/* ===================================================================
   Silex · version E5, le site allégé — couche posée après toutes les autres (coque Silex.astro).
   1. Sections masquées   2. Héros B   3. Barre mobile de l'accueil   4. Accueil
   5. Démonstration       6. Apprendre (liste, carte, verrou, page de capsule)   7. La fiche
   =================================================================== */

/* ---------- 1. Masqué, pas supprimé : on revient en arrière en ôtant [hidden][data-masque] ---------- */
[data-masque] {
  display: none !important;
}

/* ---------- 2. Héros B : le film d'abord, le titre dans le socle ---------- */
.hx-kick {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acc-btn);
}
.hx h1 {
  margin: 0;
  max-width: none;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}
.hx h1 em {
  font-style: normal;
  color: var(--acc-btn);
}
.hx {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #eaf6fb 0%, #fff 72%);
}
.hx .tex {
  opacity: 0.05;
}
.hx-note {
  margin: 0;
  font-size: 0.86rem;
  color: var(--sec);
}
.hx-lk {
  color: var(--acc-btn);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.hx-lk:hover {
  text-decoration: underline;
}
.hx-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
}

.hxB {
  padding: 26px 0 40px;
}
.hxB__dev {
  position: relative;
  max-width: min(1060px, calc((100svh - 250px) * 1.67));
  margin: 0 auto;
}
/* Grand écran : le cadre (tablette et carte) peut se réduire d'un facteur --hxk, autour de son centre.
   La réduction est une mise à l'échelle : la place qu'il occupe dans la page ne change pas, donc la
   section suivante ne remonte pas, et l'espace libéré se répartit également autour du cadre.
   --hxk:1 = la taille d'origine ; .9 = la taille retenue par le fondateur (E5.2). Rien ne change sous 1200 px. */
@media (min-width: 1200px) {
  .hxB {
    --hxk: 0.9;
  }
  .hxB__dev {
    transform: scale(var(--hxk, 1));
    transform-origin: 50% 50%;
  }
}
.hxt {
  position: relative;
  background: #1e2126;
  border-radius: 30px 30px 0 0;
  padding: 14px 14px 0;
}
.hxv {
  position: relative;
  margin: 0;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  background: #fff;
  aspect-ratio: 16/9;
}
.hxv video,
.hxv__aff {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}
.hxv video::cue {
  font-family: Inter, system-ui, sans-serif;
  font-size: 1rem;
  background: rgba(10, 30, 36, 0.82);
  color: #fff;
}
.hxv__aff {
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.is-joue .hxv__aff {
  opacity: 0;
}

/* commandes : en bas à droite de l'écran pendant la boucle et le film ; au centre quand rien ne joue */
.hxctl {
  position: absolute;
  right: 30px;
  bottom: 16px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hxctl button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  line-height: 1;
  font-weight: 600;
  color: #fff;
  background: rgba(15, 18, 21, 0.84);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  border-radius: 999px;
}
.hxctl button:focus-visible {
  outline: 3px solid var(--acc2);
  outline-offset: 3px;
}
.hxctl svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hxctl .i-ecouter svg path:first-child,
.hxctl .i-couper svg path:first-child {
  fill: currentColor;
}
.hxctl .i-voir svg,
.hxctl .i-play svg,
.hxctl .i-pause svg {
  fill: currentColor;
  stroke: none;
}
.hxctl .hxctl__p {
  width: 38px;
  height: 38px;
  justify-content: center;
}
.hxctl .hxctl__p svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.6;
}
.hxctl__pl {
  display: none;
}
.hxctl .hxctl__m {
  font-size: 0.86rem;
  padding: 10px 16px 10px 12px;
}
.hxctl__m i {
  display: none;
  font-style: normal;
}
.hxctl__m span {
  display: none;
}
[data-etat='boucle'] .i-ecouter,
[data-etat='boucle'] .t-ecouter {
  display: inline-flex;
}
[data-etat='arret'] .i-voir,
[data-etat='arret'] .t-voir {
  display: inline-flex;
}
[data-etat='film'] .i-couper,
[data-etat='film'] .t-couper {
  display: inline-flex;
}
.hxctl__p .i-play {
  display: none;
}
[data-pause] .hxctl__p .i-play {
  display: inline-flex;
}
[data-pause] .hxctl__p .i-pause {
  display: none;
}
/* rien ne joue : le bouton devient l'invitation. Il se tient en bas à droite du cadre, là où sont les
   commandes pendant la lecture : au centre, il recouvrait l'écriture de la tablette de l'image fixe. */
[data-etat='arret'] .hxctl {
  left: 14px;
  right: 14px;
  top: 14px;
  bottom: auto;
  aspect-ratio: 16/9;
  justify-content: flex-end;
  align-items: flex-end;
  box-sizing: border-box;
  padding: 0 16px 16px;
  pointer-events: none;
}
[data-etat='arret'] .hxctl button {
  pointer-events: auto;
}
[data-etat='arret']:not([data-pause]) .hxctl__p {
  display: none;
}
[data-etat='arret'] .hxctl__m {
  background: #fff;
  color: var(--ink);
  font-size: 1.02rem;
  padding: 10px 24px 10px 10px;
  gap: 14px;
  box-shadow:
    0 18px 44px rgba(10, 58, 69, 0.28),
    0 0 0 1px rgba(10, 58, 69, 0.06);
}
[data-etat='arret'] .hxctl__m .i-voir {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--acc-btn);
  color: #fff;
}
[data-etat='arret'] .hxctl__m .i-voir svg {
  width: 20px;
  height: 20px;
  margin-left: 3px;
}

.hxB__band {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 26px 26px;
  padding: 22px 30px;
  box-shadow: 0 40px 80px -36px rgba(10, 58, 69, 0.4);
}
.hxB__band::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 14px;
  background: #1e2126;
  border-radius: 0 0 30px 30px;
  transform: translateY(-1px);
}
.hxB__tx {
  display: grid;
  gap: 6px;
  padding-top: 12px;
}
.hxB h1 {
  font-size: 1.85rem;
  line-height: 1.1;
}
.hxB__act {
  display: grid;
  justify-items: end;
  gap: 8px;
  padding-top: 12px;
}

@media (max-width: 640px) {
  .hxB {
    padding: 0 0 28px;
  }
  .hxB > .w {
    padding-inline: 0;
  }
  .hxB__dev {
    max-width: none;
  }
  .hxt {
    padding: 0;
    background: #0f1215;
    border-radius: 0;
  }
  .hxv {
    border-radius: 0;
    box-shadow: 0 1px 0 var(--line);
  }
  .hxctl {
    position: static;
    justify-content: space-between;
    flex-direction: row-reverse;
    padding: 10px 20px 0;
    background: #fff;
  }
  .hxctl button {
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: 0 4px 12px rgba(10, 58, 69, 0.06);
  }
  .hxctl .hxctl__m {
    min-height: 40px;
    padding: 8px 14px 8px 11px;
  }
  .hxctl__m svg {
    color: var(--acc-btn);
  }
  .hxctl .hxctl__p {
    width: auto;
    height: 40px;
    padding: 0 12px;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--sec) !important;
    font-weight: 500;
    font-size: 0.84rem;
    gap: 7px;
  }
  .hxctl__pl {
    display: inline;
  }
  /* sur téléphone, l'invitation descend sous l'image, à la place des commandes : l'image reste entière */
  [data-etat='arret'] .hxctl {
    position: static;
    aspect-ratio: auto;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    padding: 10px 20px 0;
    background: #fff;
    pointer-events: auto;
  }
  [data-etat='arret'] .hxctl__m {
    white-space: nowrap;
    flex: none;
  }
  [data-etat='arret'] .hxctl__m {
    font-size: 0.92rem;
    padding: 8px 18px 8px 8px;
    gap: 11px;
  }
  [data-etat='arret'] .hxctl__m .i-voir {
    width: 42px;
    height: 42px;
  }
  [data-etat='arret'] .hxctl .hxctl__m .i-voir svg {
    color: #fff;
  }
  .hxB__band {
    display: grid;
    justify-items: start;
    gap: 16px;
    margin: 16px 20px 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
  }
  .hxB__band::before {
    display: none;
  }
  .hxB__tx {
    padding: 0;
    gap: 8px;
  }
  .hxB h1 {
    font-size: clamp(1.6rem, 7.4vw, 1.85rem);
    line-height: 1.12;
  }
  .hxB__act {
    justify-items: stretch;
    width: 100%;
    padding: 0;
  }
  .hx-cta {
    flex-wrap: wrap;
    gap: 12px 18px;
  }
  .hx-cta .b1 {
    width: 100%;
    justify-content: center;
    padding-block: 14px;
    font-size: 1rem;
  }
}

/* ---------- 2 bis. E7 : sous-titres sur demande, et le héros du téléphone ---------- */
.hxv picture {
  display: contents;
}
.hxctl .hxctl__cc {
  display: none;
  width: 38px;
  height: 38px;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
[data-etat='film'] .hxctl .hxctl__cc {
  display: inline-flex;
}
.hxctl .hxctl__cc[aria-pressed='true'] {
  background: var(--acc-btn);
  color: #fff;
}
.hxcc {
  display: none;
}
@media (max-width: 640px) {
  .hxcc {
    display: block;
    margin: 10px 20px 0;
    min-height: 2.7em;
    font-size: 0.95rem;
    line-height: 1.35;
    font-weight: 600;
    text-align: center;
    color: var(--ink);
    white-space: pre-line;
    text-wrap: balance;
  }
  .hxcc[hidden] {
    display: none;
  }
}
@media (max-width: 640px) {
  /* le film vertical (4:5) occupe la largeur ; sur un écran bas, il se rogne d’au plus 12 % par le bas (la marge blanche du film) pour rapprocher le titre et le bouton */
  .hxt {
    position: relative;
    background: #fff;
  }
  .hxv {
    aspect-ratio: auto;
    width: 100%;
    height: min(125vw, max(110vw, calc(100svh - 270px)));
    box-shadow: none;
  }
  .hxv video,
  .hxv__aff {
    object-position: 50% 0;
  }
  /* les commandes reviennent sur l'image, en bas, dans la marge blanche du film */
  .hxctl,
  [data-etat='arret'] .hxctl {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    top: auto;
    padding: 0;
    background: none;
    aspect-ratio: auto;
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: center;
    pointer-events: none;
  }
  .hxctl button {
    pointer-events: auto;
    box-shadow:
      0 8px 22px rgba(10, 58, 69, 0.16),
      0 0 0 1px rgba(10, 58, 69, 0.06);
    border: 0;
  }
  .hxctl .hxctl__p {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    background: #fff !important;
    color: var(--ink) !important;
    box-shadow:
      0 8px 22px rgba(10, 58, 69, 0.16),
      0 0 0 1px rgba(10, 58, 69, 0.06) !important;
  }
  .hxctl__pl {
    display: none;
  }
  .hxctl .hxctl__cc {
    order: -1;
    margin-left: auto;
    background: #fff;
    color: var(--ink);
  }
  .hxctl .hxctl__p {
    order: -2;
  }
  .hxctl .hxctl__m {
    margin-right: auto;
  }
  [data-etat='arret'] .hxctl .hxctl__m {
    font-size: 0.86rem;
    padding: 5px 14px 5px 5px;
    gap: 9px;
  }
  [data-etat='arret'] .hxctl .hxctl__m .i-voir {
    width: 34px;
    height: 34px;
  }
  [data-etat='arret'] .hxctl .hxctl__m .i-voir svg {
    width: 15px;
    height: 15px;
  }
  /* un titre, un bouton : le sur-titre, le lien secondaire et la bande de garanties quittent le premier écran du téléphone */
  .hxB .hx-kick,
  .hxB .hx-lk {
    display: none;
  }
  .hxB__band {
    margin-top: 18px;
    gap: 14px;
  }
  .hxB + .trust {
    display: none;
  }
}

/* ---------- 2 ter. E7 : les sous-titres des capsules, sous l'image et sur demande (silex-e.js, § 7) ---------- */
.xccs {
  display: block;
  margin: 10px 2px 0;
  min-height: 2.7em;
  font-size: 0.95rem;
  line-height: 1.35;
  font-weight: 600;
  text-align: center;
  color: var(--ink);
  white-space: pre-line;
  text-wrap: balance;
}
.xccs[hidden],
.xccs.is-off {
  display: none;
}
.xcc.is-off {
  display: none !important;
}
[data-cap='complete'] .xcc {
  position: static;
  margin: 8px 4px 4px;
  min-height: 2.7em;
  font-size: 0.9rem;
  color: var(--ink);
  text-shadow: none;
}
[data-cap='complete'] .xcc:empty {
  display: block;
}
.xccw {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  margin: 10px 2px 0;
}
.xccw[hidden] {
  display: none;
}
.xccw .xccs,
.xccw .xcc {
  flex: 1;
  margin: 0;
  padding-left: 50px;
}
.xccb {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 30px;
  padding: 0 9px;
  border-radius: 8px;
  font:
    800 0.72rem/1 Inter,
    system-ui,
    sans-serif;
  letter-spacing: 0.06em;
  background: rgba(15, 18, 21, 0.78);
  color: #fff;
}
.xccb[aria-pressed='false'] {
  background: rgba(255, 255, 255, 0.94);
  color: var(--sec);
  box-shadow: 0 0 0 1px var(--line);
  text-decoration: line-through;
}
.xccb:focus-visible {
  outline: 3px solid var(--acc2);
  outline-offset: 2px;
}

/* ---------- 3. Barre mobile de l'accueil : un seul bouton foncé à la fois ---------- */
.mbar.lgbar,
.mbar.lgbar.show {
  transform: translateY(110%);
}
@media (max-width: 640px) {
  body:has(.hxB) .nv__c .b1 {
    display: none !important;
  }
  .mbar.lgbar.voir {
    transform: none;
  }
}

/* ---------- 4. Accueil ---------- */
/* E8 · « L'erreur devient la leçon » : dans chaque carte, l'étape numérotée et son texte d'abord, l'illustration ensuite */
.xer__c {
  gap: 16px;
}
.xer__tx {
  display: grid;
  gap: 6px;
}
.xer__c h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.22rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.xer__c h3::before {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--acc-btn);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0;
}
.xer__c p {
  padding-left: 44px;
  font-size: 0.98rem;
  line-height: 1.5;
}
.xer__c .ui {
  margin-top: 2px;
}
.xer__ar {
  margin-top: 236px;
}
/* au-dessus de 760 px, les trois illustrations partent de la même ligne, quelle que soit la longueur des textes */
@media (min-width: 761px) and (max-width: 1180px) {
  @supports (grid-template-rows: subgrid) {
    .xer__lp {
      row-gap: 16px;
    }
    .xer__c {
      grid-row: 1 / span 2;
      grid-template-rows: subgrid;
      gap: 16px;
    }
    .xer__lp > :nth-child(1) {
      grid-column: 1;
    }
    .xer__lp > :nth-child(3) {
      grid-column: 2;
    }
    .xer__lp > :nth-child(5) {
      grid-column: 3;
    }
  }
}
@media (min-width: 1181px) {
  @supports (grid-template-rows: subgrid) {
    .xer__lp {
      row-gap: 16px;
    }
    .xer__c {
      grid-row: 1 / span 2;
      grid-template-rows: subgrid;
      gap: 16px;
    }
    .xer__ar {
      grid-row: 2;
      margin-top: 0;
      align-self: center;
    }
    .xer__lp > :nth-child(1) {
      grid-column: 1;
    }
    .xer__lp > :nth-child(2) {
      grid-column: 2;
    }
    .xer__lp > :nth-child(3) {
      grid-column: 3;
    }
    .xer__lp > :nth-child(4) {
      grid-column: 4;
    }
    .xer__lp > :nth-child(5) {
      grid-column: 5;
    }
  }
}
@media (max-width: 760px) {
  .xer__lp {
    gap: 44px;
  }
  .xer__c h3 {
    font-size: 1.18rem;
  }
  .xer__c p {
    padding-left: 44px;
  }
}

.bc__rep {
  margin: 8px 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--acc-ink);
}
.bc__rep b {
  color: var(--acc-btn);
  font-weight: 700;
}
.lg-more {
  display: flex;
  gap: 22px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.lg-fin {
  padding-block: 76px !important;
}
.lg-fin h2 {
  margin: 0;
}
.lg-fin__st {
  list-style: none;
  margin: 28px auto 0;
  padding: 0;
  max-width: none;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.lg-fin__st li {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--filet-nuit, rgba(255, 255, 255, 0.14));
  color: #fff;
  font-weight: 500;
  font-size: 0.95rem;
}
.lg-fin__st b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  color: var(--acc-ink);
  font-size: 0.85rem;
}
.lg-fin__n {
  margin: 14px 0 0;
  font-size: 0.86rem;
  color: var(--craie3, #8fb1ba);
}
@media (max-width: 640px) {
  .lg-fin__st {
    display: grid;
    justify-content: stretch;
    gap: 10px;
    text-align: left;
  }
  .lg-fin__st li {
    border-radius: 14px;
  }
}

/* ---------- 5. Démonstration : enseignants et tuteurs, les titres seuls ---------- */
.lg-ens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 8px;
}
.lg-ens__g {
  background: #fff;
  border: 1px solid var(--tint2);
  border-radius: 20px;
  padding: 22px 24px;
  border-top: 3px solid var(--acc-btn);
}
.lg-ens__g ul {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.lg-ens__g li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.3;
}
.lg-ens__g .ic {
  flex: none;
  margin: 0;
}
@media (max-width: 820px) {
  .lg-ens {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ---------- 6. Apprendre ---------- */
.ap-hero {
  padding-bottom: 26px;
}
.ap-hero h1 {
  max-width: 20ch;
}
.ap-hero .lead {
  max-width: 62ch;
}
.ap-flt {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(20, 30, 50, 0.05);
}
.ap-pub {
  justify-self: start;
}
.ap-pub button[aria-pressed='true'] {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(20, 30, 50, 0.12);
}
.ap-flt__r {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: center;
}
.ap-f {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ap-f__l {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sec);
}
.ap-f__c {
  display: flex;
  gap: 6px;
}
.ap-f button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 500;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--body);
  background: #fff;
  white-space: nowrap;
}
.ap-f button[aria-pressed='true'] {
  background: var(--acc-ink);
  border-color: var(--acc-ink);
  color: #fff;
}
.ap-f button:focus-visible {
  outline: 2px solid var(--acc2);
  outline-offset: 2px;
}
.ap-f.is-off {
  opacity: 0.4;
  pointer-events: none;
}
.ap-libre {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--body);
  margin-left: auto;
}
.ap-libre input {
  accent-color: var(--acc-btn);
  width: 16px;
  height: 16px;
}
.ap-n {
  margin: 18px 2px 12px;
  font-size: 0.86rem;
  color: var(--sec);
}
.ap-g {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.ap-c {
  margin: 0;
}
.ap-c[hidden] {
  display: none;
}
.ap-c__lk {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}
.ap-c__lk:hover {
  box-shadow: 0 18px 44px rgba(20, 30, 50, 0.1);
  transform: translateY(-2px);
}
.ap-c__lk:focus-visible {
  outline: 3px solid var(--acc2);
  outline-offset: 3px;
}
.ap-c__v {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--tint);
  overflow: hidden;
}
.ap-c__v img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ap-c__d {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 18, 21, 0.82);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
}
.ap-c__d svg {
  width: 12px;
  height: 12px;
  fill: #fff;
}
.ap-c--v .ap-c__v > img,
.ap-c--v .ap-fi {
  filter: saturate(0.85);
}
.ap-c__b {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px 18px 18px;
}
.ap-c__k {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--sec);
}
.ap-c h3 {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.ap-c__x {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--body);
}
.ap-c__f {
  margin: 4px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ap-t {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--tint);
  color: var(--acc-ink);
}
.ap-t--fiche {
  background: #eef0f4;
  color: var(--ardoise);
}
.ap-t--article {
  background: #f1f3f7;
  color: var(--body);
}
.ap-a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 600;
}
.ap-a svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.ap-a--libre {
  color: var(--acc-btn);
}
.ap-a--libre::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acc-btn);
}
.ap-a--v {
  color: var(--ardoise);
}
.ap-p {
  font-size: 0.76rem;
  color: var(--sec);
}
/* vignette d'une fiche : la fiche de révision de l'accueil, posée droite */
.ap-fi {
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%) rotate(-2deg);
  width: 72%;
  background: #fff;
  border-radius: 14px;
  padding: 12px 14px 13px;
  box-shadow: 0 14px 30px rgba(20, 30, 50, 0.12);
  border-top: 4px solid var(--acc);
  display: grid;
  gap: 5px;
}
.ap-fi--a {
  border-top-color: #3fb3d4;
  transform: translate(-50%, -50%) rotate(2deg);
}
.ap-fi--c {
  border-top-color: #0a3a45;
}
.ap-fi .xfc__s {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acc-btn);
}
.ap-fi b {
  font-size: 0.9rem;
  line-height: 1.2;
  color: var(--ink);
}
.ap-fi p {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--body);
}
.ap-fi .xfc__ex {
  font-family: Caveat, cursive;
  font-size: 1.05rem;
  color: var(--acc-ink);
}
.ap-vide {
  margin-top: 14px;
  padding: 22px;
  border-radius: 16px;
  background: var(--tint);
  color: var(--acc-ink);
  font-size: 0.95rem;
  line-height: 1.5;
}
.ap-vide a {
  color: var(--acc-btn);
  font-weight: 600;
}
@media (max-width: 980px) {
  .ap-g {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .ap-hero h1 {
    font-size: clamp(1.7rem, 7.6vw, 1.95rem);
  }
  .ap-flt {
    padding: 14px 0 6px;
    border: 0;
    box-shadow: none;
    background: none;
    gap: 10px;
  }
  .ap-pub {
    justify-self: stretch;
    display: flex;
  }
  .ap-pub button {
    flex: auto;
    padding-inline: 8px;
    font-size: 0.84rem;
  }
  .ap-flt__r {
    display: grid;
    gap: 8px;
  }
  .ap-f {
    display: grid;
    gap: 5px;
    min-width: 0;
  }
  .ap-f__c {
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin-right: -20px;
    padding-right: 20px;
  }
  .ap-f__c::-webkit-scrollbar {
    display: none;
  }
  .ap-libre {
    margin: 2px 0 0;
  }
  .ap-g {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  /* sur mobile, une carte en ligne : vignette à gauche, texte à droite */
  .ap-c__lk {
    grid-template-rows: none;
    grid-template-columns: 128px minmax(0, 1fr);
    border-radius: 16px;
    align-items: start;
  }
  .ap-c__v {
    aspect-ratio: 16/9;
    margin: 10px 0 10px 10px;
    border-radius: 10px;
  }
  .ap-p {
    display: none;
  }
  .ap-c[data-ty='fiche'] .ap-c__d {
    display: none;
  }
  .ap-c__k {
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 0.74rem;
  }
  .ap-c__k span:last-child {
    white-space: nowrap;
  }
  .ap-c__d {
    left: 6px;
    bottom: 6px;
    font-size: 0.66rem;
    padding: 3px 7px 3px 6px;
  }
  .ap-fi {
    width: 90%;
    padding: 7px 8px;
    gap: 2px;
    border-top-width: 3px;
  }
  .ap-fi p,
  .ap-fi .xfc__ex {
    display: none;
  }
  .ap-fi b {
    font-size: 0.72rem;
  }
  .ap-fi .xfc__s {
    font-size: 0.5rem;
  }
  .ap-c__b {
    padding: 12px 14px 13px;
    gap: 5px;
  }
  .ap-c h3 {
    font-size: 0.95rem;
  }
  .ap-c__x {
    display: none;
  }
  .ap-c__f {
    margin: 0;
  }
}
/* verrou */
.ap-lock {
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  max-height: calc(100svh - 32px);
  overflow: auto;
  width: min(560px, calc(100vw - 32px));
  border: 0;
  border-radius: 24px;
  padding: 30px 32px 26px;
  box-shadow: 0 30px 70px rgba(20, 30, 50, 0.3);
  color: var(--ink);
}
.ap-lock::backdrop {
  background: rgba(10, 58, 69, 0.45);
  backdrop-filter: blur(3px);
}
.ap-lock h2 {
  margin: 10px 0 0;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.ap-lock__p {
  margin: 12px 0 0;
  color: var(--body);
  font-size: 0.98rem;
  line-height: 1.5;
}
.ap-lock__a {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin-top: 20px;
}
.ap-lock__el {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--tint);
  color: var(--acc-ink);
  font-size: 0.9rem;
  line-height: 1.5;
}
.ap-lock__el a {
  color: var(--acc-btn);
  font-weight: 600;
}
.ap-lock__x {
  all: unset;
  cursor: pointer;
  position: absolute;
  right: 16px;
  top: 12px;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--sec);
  padding: 6px;
  z-index: 3;
} /* au-dessus de l'aperçu, qui le recouvrait sur téléphone */
/* page de contenu */
.ap-hero--d {
  padding-bottom: 18px;
}
.ap-hero--d h1 {
  font-size: clamp(2rem, 3.4vw, 2.7rem);
}
.ap-fil {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.84rem;
  color: var(--sec);
  margin-bottom: 12px;
}
.ap-fil a {
  color: var(--acc-btn);
  font-weight: 600;
  text-decoration: none;
}
.ap-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  margin: 14px 0 0;
  font-size: 0.9rem;
  color: var(--body);
}
.ap-d__g {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.ap-vid {
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
}
.ap-vid video {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  background: #fff;
}
.ap-d__note {
  margin: 12px 2px 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--sec);
}
.ap-tr {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.ap-tr summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--acc-btn);
}
.ap-tr p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--body);
  max-width: 70ch;
}
.ap-d__a {
  display: grid;
  gap: 14px;
}
.ap-d__a .xob {
  max-width: none;
  width: 100%;
  margin: 0;
}
.ap-lockbox .b {
  margin-top: 12px;
}
.ap-par {
  margin-top: 30px;
  padding: 20px 24px;
  border-radius: 18px;
  background: var(--tint);
  display: grid;
  gap: 6px;
}
.ap-par p {
  margin: 0;
  color: var(--acc-ink);
  line-height: 1.55;
  max-width: 80ch;
}
@media (max-width: 860px) {
  .ap-d__g {
    grid-template-columns: 1fr;
  }
}

.ap-grp {
  margin-top: 26px;
}
.ap-grp[hidden] {
  display: none;
}
.ap-grp__h {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 2px 14px;
}
.ap-grp__h h2 {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}
.ap-grp__h p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--sec);
}
@media (max-width: 640px) {
  .ap-grp__h {
    display: grid;
    gap: 2px;
  }
  .ap-grp__h h2 {
    font-size: 1.12rem;
  }
}

.ap-more {
  display: contents;
}
.ap-more > summary {
  display: none;
}
@media (max-width: 640px) {
  .ap-more {
    display: block;
  }
  .ap-more > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink);
  }
  .ap-more > summary::-webkit-details-marker {
    display: none;
  }
  .ap-more > summary small {
    font-weight: 500;
    color: var(--sec);
  }
  .ap-more[open] > summary {
    margin-bottom: 10px;
  }
}

.ap-lock__pv {
  position: relative;
  margin: 4px 0 16px;
  width: 100%;
  height: 160px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--tint);
}
.ap-lock__pv:empty {
  display: none;
}
.ap-lock__pv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ap-lock__pv .ap-c__d {
  display: none;
}
.ap-lock__pv::after {
  content: '';
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.92) 60%);
  backdrop-filter: blur(2px);
}
.ap-lock__pv i {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--acc-ink);
  color: #fff;
}
.ap-lock__pv i svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
@media (max-width: 640px) {
  .ap-lock {
    padding: 24px 20px 20px;
  }
  .ap-lock__pv {
    height: 130px;
  }
}

/* texte (français) dans les composants de la fiche, dessinés pour les maths */
.xob__math.t,
.xob__f.t span {
  font-family: Inter, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------- 7. La fiche, telle que l'appli la publie (TeX rendu à la construction par KaTeX) ---------- */
.ff {
  margin-top: 34px;
  display: grid;
  gap: 16px;
}
.ff__h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.ff__h h2 {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: -0.025em;
}
.ff__h span {
  font-size: 0.86rem;
  color: var(--sec);
}
.ff-b {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 22px;
  display: grid;
  gap: 10px;
}
.ff-b p {
  margin: 0;
  line-height: 1.6;
  color: var(--body);
}
.ff-k {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--acc-btn);
}
.ff-k--w {
  color: #b4532a;
}
.ff-idee {
  border-top: 3px solid var(--acc-btn);
}
.ff-idee p {
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
}
.ff-en {
  font-weight: 600;
  color: var(--ink) !important;
}
.ff-l {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.ff-l li {
  display: grid;
  gap: 4px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--tint);
}
.ff-l small {
  font-size: 0.86rem;
  color: var(--acc-ink);
  line-height: 1.45;
}
.ff-m {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}
.ff-m .katex-display {
  margin: 0.2em 0;
  text-align: left;
}
.ff-m .katex-display > .katex {
  text-align: left;
}
.ff-t {
  font-size: 1.05rem;
  color: var(--ink);
}
.ff-t mark,
.ff-c {
  background: none;
  color: var(--acc-btn);
  font-weight: 700;
}
.ff-t mark {
  border-bottom: 2px solid currentColor;
}
.ff-q {
  font-style: italic;
}
.ff-pg__g {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.ff-r {
  border-radius: 12px;
  padding: 10px 14px;
  display: grid;
  gap: 4px;
  min-width: 0;
}
.ff-r small {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ff-r--rev {
  background: #fdf1ec;
}
.ff-r--rev small {
  color: #b4532a;
}
.ff-r--ok {
  background: #e9f6f2;
}
.ff-r--ok small {
  color: #1d7a5f;
}
.ff-te {
  font-size: 0.92rem;
}
.ff-ret ul,
.ff-it {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: 8px;
  line-height: 1.55;
  color: var(--body);
}
.ff-vt details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--acc-btn);
}
.ff-vt details p {
  margin-top: 8px;
}
.ap-d__a .xob .katex-display {
  margin: 0.3em 0;
}
@media (max-width: 640px) {
  .ff-pg__g {
    grid-template-columns: 1fr;
  }
  .ff-b {
    padding: 16px;
  }
}
.ap-choix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 26px auto 0;
  max-width: 820px;
  text-align: left;
}
.ap-choix a {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  text-decoration: none;
}
.ap-choix a:hover {
  background: rgba(255, 255, 255, 0.14);
}
.ap-choix b {
  font-size: 1rem;
}
.ap-choix span {
  font-size: 0.86rem;
  color: var(--craie3, #8fb1ba);
}
@media (max-width: 720px) {
  .ap-choix {
    grid-template-columns: 1fr;
  }
}
.ap-c__x {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ap-fi p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ap-choix a.ap-choix__p {
  background: var(--acc2, #3fb3d4);
  border-color: transparent;
  color: #06323c;
}
.ap-choix a.ap-choix__p span {
  color: #0a3a45;
}
.ap-choix a.ap-choix__p:hover {
  filter: brightness(1.05);
  background: var(--acc2, #3fb3d4);
}