/* ===========================================================================
   PAGE « FORMATIONS » (module `formations`, mission « page Formations »,
   11/11/2026). Que des jetons de `jetons.css` : couleurs, espaces, rayons,
   tailles. Le thème clair ou sombre vient des jetons eux-mêmes.

   SYMÉTRIE : 4 colonnes sur ordinateur (deux rangées pleines pour les 8
   tutoriels), 2 sur tablette et téléphone pliable déplié, 1 en liste sur
   petit téléphone. La dernière rangée incomplète est CENTRÉE (flex,
   `justify-content: center`) : jamais de trou à droite. Toutes les cartes
   d'une rangée ont la même hauteur (`align-items: stretch`).
   =========================================================================== */

.formations {
  --formations-ecart: var(--tab-espace-2, 16px);
  --formations-colonnes: 4;
}

/* ── En haut : deux blocs côte à côte, de même hauteur ─────────────────── */
.formations__haut {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--tab-espace-3, 32px);
  margin-block-end: var(--tab-espace-3, 32px);
}
.formations__accroche,
.formations__presentation {
  background: var(--tab-surface, #FFFFFF);
  border: var(--tab-trait, 1px) solid var(--tab-bordure, #D9D9D4);
  border-radius: var(--tab-rayon-large, 16px);
  padding: var(--tab-encadre-marge, 20px);
  min-width: 0;
}
.formations__accroche {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--tab-espace-2, 16px);
}
.formations__accroche h1 {
  margin: 0;
  font-size: var(--tab-taille-grand-titre, 2rem);
  line-height: 1.2;
  overflow-wrap: break-word;
  hyphens: auto;
}
.formations__phrase {
  margin: 0;
  font-size: var(--tab-taille-moyenne, 1.125rem);
  line-height: var(--tab-interligne, 1.55);
}
.formations__deja,
.formations__langue {
  margin: 0;
  color: var(--tab-texte-secondaire, #666666);
}
.formations__langue { font-weight: 600; }

.formations__presentation {
  display: flex;
  flex-direction: column;
  gap: var(--tab-espace-1, 8px);
}
.formations__commencez {
  align-self: flex-start;
  background: var(--tab-etiquette, #96491C);
  color: var(--tab-sur-etiquette, #FFFFFF);
}
.formations__presentation .carte-formation { flex: 1; border: 0; padding: 0; background: transparent; }

/* ── Les cartes des tutoriels ──────────────────────────────────────────── */
.formations__cartes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--formations-ecart);
}
.formations__case {
  display: flex;
  flex: 0 0 calc((100% - (var(--formations-colonnes) - 1) * var(--formations-ecart))
                / var(--formations-colonnes));
  min-width: 0;
}

.carte-formation {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: var(--tab-cible, 44px);
  margin: 0;
  padding: 0;
  font: inherit;
  text-align: start;
  color: var(--tab-texte-principal, #111111);
  background: var(--tab-surface, #FFFFFF);
  border: var(--tab-trait, 1px) solid var(--tab-bordure, #D9D9D4);
  border-radius: var(--tab-rayon, 10px);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--tab-ombre-douce, none);
  transition: box-shadow var(--tab-duree-courte, 0.18s), border-color var(--tab-duree-courte, 0.18s);
}
.carte-formation:hover { box-shadow: var(--tab-ombre, none); border-color: var(--tab-bleu-fonce, #5F8FC8); }
.carte-formation:focus-visible {
  outline: var(--tab-contour-focus, 2px) solid var(--tab-accent, #3F6FA9);
  outline-offset: var(--tab-contour-focus, 2px);
}

.carte-formation__image {
  position: relative;
  display: block;
  /* Une largeur EXPLICITE : dans une colonne flex, Chromium ne tire pas la
     hauteur du rapport 16/9 d'une largeur seulement étirée (hauteur nulle). */
  width: 100%;
  flex: 0 0 auto;
  aspect-ratio: 16 / 9;
  background: var(--tab-surface-douce, #EAF2FB);
  overflow: hidden;
}
.formations__presentation .carte-formation__image { border-radius: var(--tab-rayon, 10px); }
.carte-formation__image img,
.carte-formation__image video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Le bouton lecture : un disque à la couleur d'accent, un triangle dessiné
   (aucun emoji, aucune image). */
.carte-formation__lecture {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: calc(var(--tab-cible, 44px) * 1.25);
  height: calc(var(--tab-cible, 44px) * 1.25);
  transform: translate(-50%, -50%);
  border-radius: var(--tab-rayon-pastille, 999px);
  background: var(--tab-accent, #3F6FA9);
  box-shadow: var(--tab-ombre, none);
  transition: opacity var(--tab-duree-courte, 0.18s);
}
.carte-formation__lecture::after {
  content: "";
  position: absolute;
  inset: 30% 26% 30% 38%;
  background: var(--tab-sur-accent, #FFFFFF);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.carte-formation--extrait .carte-formation__lecture { opacity: 0; }

.carte-formation__duree {
  position: absolute;
  inset-block-end: var(--tab-espace-1, 8px);
  inset-inline-end: var(--tab-espace-1, 8px);
  padding: 2px var(--tab-espace-1, 8px);
  border-radius: var(--tab-rayon-pastille, 999px);
  background: var(--tab-ruban, #5A6470);
  color: var(--tab-sur-ruban, #FFFFFF);
  font-size: var(--tab-taille-petite, 0.8125rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.carte-formation__texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tab-espace-1, 8px);
  padding: var(--tab-espace-2, 16px);
  flex: 1;
  min-width: 0;
}
.formations__presentation .carte-formation__texte { padding-inline: 0; padding-block-end: 0; }
.carte-formation__titre {
  font-weight: 700;
  font-size: var(--tab-taille-moyenne, 1.125rem);
  line-height: 1.3;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}
.carte-formation__tuile {
  font-size: var(--tab-taille-petite, 0.8125rem);
  color: var(--tab-texte-secondaire, #666666);
}
.carte-formation__groupe {
  padding: 1px var(--tab-espace-1, 8px);
  border-radius: var(--tab-rayon-pastille, 999px);
  border: var(--tab-trait, 1px) solid currentColor;
  font-size: var(--tab-taille-petite, 0.8125rem);
  font-weight: 600;
}
.carte-formation__groupe--demarrer { background: var(--tab-succes-fond, #E8F4ED); color: var(--tab-succes, #2F7A4D); }
.carte-formation__groupe--facturer { background: var(--tab-bleu-tres-clair, #EAF2FB); color: var(--tab-bleu-profond, #3F6FA9); }
.carte-formation__groupe--suivre { background: var(--tab-avertissement-fond, #FBF1E2); color: var(--tab-avertissement, #8A5A1B); }

/* ── « Bientôt dans TABULA » : une bande fine et centrée ───────────────── */
.formations__bientot {
  margin: var(--tab-espace-3, 32px) auto 0;
  max-width: var(--tab-mesure, 72ch);
  padding: var(--tab-espace-2, 16px);
  border-block: var(--tab-trait, 1px) solid var(--tab-bordure, #D9D9D4);
  text-align: center;
}
.formations__bientot-titre {
  margin: 0 0 var(--tab-espace-1, 8px);
  font-size: var(--tab-taille-base, 1rem);
}
.formations__bientot-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tab-espace-1, 8px) var(--tab-espace-2, 16px);
  color: var(--tab-texte-secondaire, #666666);
}
.formations__bientot-liste li { display: inline-flex; align-items: center; gap: var(--tab-espace-1, 8px); }
.formations__bientot-mention {
  margin: var(--tab-espace-1, 8px) 0 0;
  font-size: var(--tab-taille-petite, 0.8125rem);
  color: var(--tab-texte-secondaire, #666666);
}

/* ── « Envie d'essayer ? » (page publique seulement) ───────────────────── */
.formations__envie {
  margin-block-start: var(--tab-espace-4, 64px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--tab-espace-2, 16px);
  text-align: center;
}
.formations__envie p { margin: 0; font-size: var(--tab-taille-moyenne, 1.125rem); }

.formations__vide { text-align: center; color: var(--tab-texte-secondaire, #666666); }

/* ── Le lecteur, par-dessus la page ────────────────────────────────────── */
.lecteur-formation {
  width: min(100% - 2 * var(--tab-marge-laterale-tel, 16px), 60rem);
  max-height: calc(100dvh - 2 * var(--tab-marge-laterale-tel, 16px));
  padding: var(--tab-encadre-marge, 20px);
  border: var(--tab-trait, 1px) solid var(--tab-bordure, #D9D9D4);
  border-radius: var(--tab-rayon-large, 16px);
  background: var(--tab-surface, #FFFFFF);
  color: var(--tab-texte-principal, #111111);
  box-shadow: var(--tab-ombre, none);
  overflow: auto;
}
.lecteur-formation::backdrop {
  background: color-mix(in srgb, var(--tab-texte-principal, #111111) 70%, transparent);
}
.lecteur-formation__tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tab-espace-2, 16px);
  margin-block-end: var(--tab-espace-2, 16px);
}
.lecteur-formation__titre {
  margin: 0;
  font-size: var(--tab-taille-titre, 1.5rem);
  overflow-wrap: break-word;
  hyphens: auto;
  min-width: 0;
}
.lecteur-formation__fermer { flex: 0 0 auto; }
.lecteur-formation__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 70dvh;
  background: var(--tab-texte-principal, #111111);
  border-radius: var(--tab-rayon, 10px);
}
.lecteur-formation__etapes { margin-block-start: var(--tab-espace-2, 16px); }
.lecteur-formation__etapes-titre { margin: 0 0 var(--tab-espace-1, 8px); font-weight: 600; }
.lecteur-formation__etapes-liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tab-espace-1, 8px);
}
.lecteur-formation__etape { font-variant-numeric: tabular-nums; }
.lecteur-formation__etape[aria-current="step"] {
  border-color: var(--tab-accent, #3F6FA9);
  box-shadow: inset 0 0 0 var(--tab-trait, 1px) var(--tab-accent, #3F6FA9);
}
.lecteur-formation__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--tab-espace-1, 8px);
  margin-block-start: var(--tab-espace-2, 16px);
}
.lecteur-formation__actions .bouton { max-width: 100%; white-space: normal; text-align: center; }
.lecteur-formation__suivante { margin-inline-start: auto; }

/* ── Tablette, téléphone pliable déplié : 2 colonnes ───────────────────── */
@media (max-width: 1023px) {
  .formations { --formations-colonnes: 2; }
}
@media (max-width: 860px) {
  .formations__haut { grid-template-columns: minmax(0, 1fr); gap: var(--tab-espace-2, 16px); }
}

/* ── Petit téléphone : 1 colonne, en liste (image à gauche, texte à droite) ── */
@media (max-width: 599px) {
  .formations { --formations-colonnes: 1; }
  .page.formations { padding-inline: var(--tab-marge-laterale-tel, 16px); }
  .formations__accroche h1 { font-size: var(--tab-taille-titre, 1.5rem); }
  .formations__cartes .carte-formation { flex-direction: row; align-items: stretch; }
  .formations__cartes .carte-formation__image { flex: 0 0 40%; width: 40%; aspect-ratio: 16 / 9; align-self: center; }
  .formations__cartes .carte-formation__texte { padding: var(--tab-espace-1, 8px) var(--tab-espace-2, 16px); justify-content: center; }
  .formations__cartes .carte-formation__lecture {
    width: var(--tab-cible, 44px);
    height: var(--tab-cible, 44px);
  }
  .formations__cartes .carte-formation__titre { font-size: var(--tab-taille-base, 1rem); }
  .lecteur-formation { padding: var(--tab-espace-2, 16px); }
  .lecteur-formation__actions .bouton { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .carte-formation, .carte-formation__lecture { transition: none; }
}