/* Fiche de leçon recto verso (décision du 10/11/2026) : javascripts/course-path/ui/views/
 * lesson-flip.js, lesson-front.js, lesson-back.js.
 *
 * Ici : le cadre, le retournement, le pied, la leçon terminée et les thèmes. Le contenu des deux
 * faces est dans CSS/course-path-flip-faces.css.
 *
 * Vaut dans les deux cadres : la popup de leçon et la fiche posée à côté du chemin
 * (CSS/course-path-side.css, chargée avant : elle règle sa place et ses paliers de hauteur).
 * Thèmes mi-jour et nuit : en bas de ce fichier, avec la palette de CSS/path-themes/tokens.css. */

/* ——— Cadre : la carte blanche laisse sa place aux deux faces ———
   Sélecteur lourd exprès : il passe devant la fiche latérale, ses paliers et les thèmes, qui
   habillent tous .cpath-white. */
html.cpath .cpath-card.cpath-card--flip .cpath-white {
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
/* Popup plus haute que la fenêtre : c'est le corps de la carte qui défile, plus la carte blanche. */
.cpath-card--flip .cpath-card__body {
  overflow: hidden auto;
}
/* Fiche à côté du chemin : rien n'y défile jamais (paliers de hauteur). */
.cpath-card--side.cpath-card--flip .cpath-card__body {
  overflow: visible;
}
/* Croix de la popup : dans le coin de l'image du recto, du côté opposé à « Leçon n ». */
html.cpath .cpath-card--flip .cpath-close {
  top: 28px;
  left: auto;
  right: auto;
  inset-inline-end: 22px;
  z-index: 3;
  box-shadow: 0 2px 8px rgb(0 0 0 / 22%);
}

/* ——— Retournement ———
   Les deux faces dans la même case de grille : la fiche a la hauteur de la plus haute. */
.cpath-flip {
  flex: 1 1 auto;
  display: grid;
  perspective: 1500px;
}
.cpath-flip__in {
  display: grid;
  min-width: 0;
  transform-style: preserve-3d;
}
.cpath-flip.is-back .cpath-flip__in {
  transform: rotateY(180deg);
}
/* Mouvement seulement après un premier retournement (is-moved) : une fiche ouverte directement
   sur son verso ne tourne pas. À mi-course la fiche recule un peu : vue de biais, la perspective
   l'agrandit, elle sortirait de son cadre. */
.cpath-flip.is-moved.is-back .cpath-flip__in {
  animation: cpath-flip-back 0.6s linear both;
}
.cpath-flip.is-moved.is-front .cpath-flip__in {
  animation: cpath-flip-front 0.6s linear both;
}
@keyframes cpath-flip-back {
  0% {
    transform: rotateY(0deg) scale(1);
    animation-timing-function: ease-in;
  }
  50% {
    transform: rotateY(90deg) scale(0.88);
    animation-timing-function: ease-out;
  }
  100% {
    transform: rotateY(180deg) scale(1);
  }
}
@keyframes cpath-flip-front {
  0% {
    transform: rotateY(180deg) scale(1);
    animation-timing-function: ease-in;
  }
  50% {
    transform: rotateY(90deg) scale(0.88);
    animation-timing-function: ease-out;
  }
  100% {
    transform: rotateY(0deg) scale(1);
  }
}
.cpath-face {
  position: relative;
  grid-area: 1 / 1;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: #fff;
  border-radius: var(--cp-white-radius);
  box-shadow: var(--cp-white-shadow);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.cpath-face--back {
  transform: rotateY(180deg);
}
/* Face cachée : hors du clavier et des lecteurs d'écran. Les deux faces s'échangent à mi-course,
   quand la fiche est de profil : celle qui part disparaît là, celle qui arrive n'est visible que
   de là (sans compter sur backface-visibility, que Safari applique mal aux enfants qui ont leur
   propre calque). */
.cpath-flip.is-front .cpath-face--back,
.cpath-flip.is-back .cpath-face--front {
  visibility: hidden;
  transition: visibility 0s linear 0.3s;
}
.cpath-flip.is-moved.is-back .cpath-face--back,
.cpath-flip.is-moved.is-front .cpath-face--front {
  animation: cpath-face-in 0.6s linear both;
}
@keyframes cpath-face-in {
  0%,
  49% {
    visibility: hidden;
  }
  50%,
  100% {
    visibility: visible;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cpath-flip.is-moved .cpath-flip__in,
  .cpath-flip.is-moved .cpath-face {
    animation: none;
  }
  .cpath-flip.is-front .cpath-face--back,
  .cpath-flip.is-back .cpath-face--front {
    transition: none;
  }
}

/* ——— Popup : même hauteur pour toutes les leçons ———
   Comme la fiche à côté du chemin (CSS/course-path-side.css) : « Mission suivante » y fait passer
   d'une leçon à l'autre, la carte ne doit pas changer de taille. 32 px : les marges du voile. */
.cpath-overlay .cpath-card--flip {
  min-height: min(640px, 100dvh - 32px);
}
@media (max-width: 640px) {
  /* Feuille basse du mobile : elle monte jusqu'à 24 px du haut. */
  .cpath-overlay .cpath-card--flip {
    min-height: min(640px, 100dvh - 24px);
  }
}

/* ——— Popup : la fiche tient dans la fenêtre ———
   Les deux faces ont la hauteur de la plus haute. Quand la fenêtre ne la donne pas, le recto
   rétrécit son image (son bouton reste à l'écran) et c'est le verso qui défile, comme l'onglet des
   missions de l'ancienne popup. Le corps de la carte ne défile plus qu'en dernier recours. */
.cpath-overlay .cpath-flip,
.cpath-overlay .cpath-flip__in {
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
}
.cpath-overlay .cpath-face--back {
  min-height: 0;
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: #4f9e6a transparent;
}

/* ——— Pied : trois tuiles (views/lesson-menus.js, PopupFoot) ——— */
.cpath-card--flip .cpath-pfoot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px var(--cp-card-pad) var(--cp-card-pad);
}
.cpath-card--flip .cpath-pfoot--cercle {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cpath-card--flip .cpath-pfoot__group {
  display: contents;
}
.cpath-card--flip .cpath-pfoot__btn {
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 78px;
  padding: 10px 6px;
  border-color: #e5e7eb;
  border-radius: 20px;
  font-size: 12.5px;
  line-height: 1.15;
  white-space: normal;
  text-align: center;
  box-shadow: 0 2px 8px rgb(15 23 42 / 5%);
}
.cpath-pfoot__ic {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.cpath-card--flip .cpath-pfoot__ic svg {
  width: 20px;
  height: 20px;
}
.cpath-pfoot__ic--ear {
  background: #def3ee;
  color: #0f6f60;
}
.cpath-pfoot__ic--chat {
  background: #ffecd9;
  color: #a54a00;
}
.cpath-pfoot__ic--users {
  background: #fde4ee;
  color: #a81f5c;
}

/* ——— Leçon terminée : la coupe, sur les deux faces (11/11/2026) ———
   Une coupe jaune (demande du même jour : pas en marron) à trois endroits : une étiquette à côté
   de « Leçon n » sur l'image, la ligne au-dessus du bouton, et une étiquette dans l'en-tête du
   verso. Le texte reste dans la couleur du texte courant, seul le picto est jaune. */
.cpath-poster__tag--done svg,
.cpath-bhead__done svg,
.cpath-fstatus.is-lesson-done svg {
  width: 16px;
  height: 16px;
  fill: #f5b800;
}
.cpath-bhead__done {
  background: #fff6d1;
  color: #374151;
}
.cpath-bhead__done {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  vertical-align: middle;
}
/* Libellé lu par les lecteurs d'écran seulement (l'étiquette de l'image ne montre que la coupe). */
.cpath-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ——— Thèmes mi-jour et nuit (CSS/path-themes/tokens.css) ——— */
html.cpath:is(.midday, .night) .cpath-face {
  background: var(--pt-surface);
}
html.cpath:is(.midday, .night) .cpath-fstatus,
html.cpath:is(.midday, .night) .cpath-bhead__txt strong,
html.cpath:is(.midday, .night) .cpath-bday__title,
html.cpath:is(.midday, .night) .cpath-fig,
html.cpath:is(.midday, .night) .cpath-bday__note {
  color: var(--pt-ink);
}
html.cpath:is(.midday, .night) .cpath-fstatus.is-done {
  color: var(--pt-accent-ink);
}
html.cpath:is(.midday, .night) .cpath-fstatus__side,
html.cpath:is(.midday, .night) .cpath-bhead__txt span {
  color: var(--pt-ink-3);
}
html.cpath:is(.midday, .night) .cpath-fig,
html.cpath:is(.midday, .night) .cpath-bday__note,
html.cpath:is(.midday, .night) .cpath-backb {
  background: var(--pt-surface-2);
  border-color: var(--pt-line);
}
html.cpath:is(.midday, .night) .cpath-face .cpath-btn--quiet,
html.cpath:is(.midday, .night) .cpath-face .cpath-btn--quiet:hover,
html.cpath:is(.midday, .night) .cpath-face .cpath-btn--quiet:focus-visible {
  background: var(--pt-surface-2);
  color: var(--pt-ink);
  box-shadow: inset 0 0 0 2px var(--pt-line-strong);
}
/* Le violet des pictos et du lien ne se lit pas sur ces fonds (comme .cpath-act__ic). */
html.cpath:is(.midday, .night) .cpath-fstatus__why,
html.cpath:is(.midday, .night) .cpath-backb,
html.cpath:is(.midday, .night) .cpath-fig svg {
  color: var(--pt-ink);
}