/*
 * Papillote — page de présentation (/decouvrir/) : ouverture, vidéo, diaporama, fonctionnement, essai, données,
 * formation, ePoc et Inria, ressources, appel final.
 * Elle reprend les bandeaux, les tuiles et le téléphone du site (vitrine.css, pages.css).
 */

/* Ouverture : fil d'Ariane, titre de la page et sommaire, puis la vidéo juste dessous */
.pa-discover__hero {
  padding-block: var(--pa-space-8, 3rem) var(--pa-space-4);
  background:
    radial-gradient(40rem 18rem at 90% 0%, var(--pa-raspberry-soft), transparent 70%),
    radial-gradient(30rem 14rem at 0% 0%, var(--pa-lagoon-soft), transparent 70%);
}

.pa-discover__head {
  display: grid;
  gap: var(--pa-space-4);
  justify-items: start;
}

.pa-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pa-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--pa-text-sm);
  font-weight: 700;
  color: var(--pa-ink-soft);
}

.pa-breadcrumb li + li::before {
  content: "›";
  margin-inline-end: var(--pa-space-2);
  color: var(--pa-ink-soft);
}

.pa-discover__title {
  margin: 0;
  font-size: clamp(2.2rem, 1rem + 2.6vw, 3.4rem);
  line-height: 1.05;
  text-wrap: balance;
  font-variation-settings: var(--pa-title-variation), "opsz" 144;
}

.pa-discover__head .pa-section-lead {
  margin: 0;
  max-width: 44rem;
}

.pa-discover__toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pa-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pa-discover__toc a {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-2);
  min-height: 36px;
  padding: 0 var(--pa-space-4);
  border: 1px solid var(--pa-line-strong);
  border-radius: 999px;
  background: var(--pa-surface);
  color: var(--pa-ink);
  font-size: var(--pa-text-sm);
  font-weight: 700;
  text-decoration: none;
}

.pa-discover__toc a:hover {
  border-color: var(--pa-accent);
  color: var(--pa-accent);
}

#video {
  padding-top: var(--pa-space-4);
}

/* La vidéo : l'affiche (ou le lecteur), et le programme à côté */
.pa-discover__cinema {
  display: grid;
  gap: var(--pa-space-6);
  align-items: start;
}

@media (min-width: 900px) {
  .pa-discover__cinema {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  }
}

.pa-discover__player {
  aspect-ratio: 16 / 9;
  border-radius: var(--pa-radius-xl);
  overflow: hidden;
  background: var(--pa-night);
  box-shadow: var(--pa-shadow-3);
}

.pa-discover__poster {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--pa-space-3);
  width: 100%;
  height: 100%;
  padding: var(--pa-space-5);
  border: 0;
  background:
    radial-gradient(24rem 16rem at 85% 10%, rgb(255 122 168 / 0.28), transparent 70%),
    radial-gradient(22rem 14rem at 10% 90%, rgb(79 208 242 / 0.2), transparent 70%),
    var(--pa-night);
  color: var(--pa-night-ink);
  font: inherit;
  text-align: center;
}

button.pa-discover__poster {
  cursor: pointer;
}

button.pa-discover__poster:focus-visible {
  outline: 3px solid var(--pa-focus);
  outline-offset: -6px;
}

.pa-discover__poster strong {
  font-family: var(--pa-font-title);
  font-size: var(--pa-text-xl);
}

@media (max-width: 599px) {
  .pa-discover__poster {
    gap: var(--pa-space-2);
    padding: var(--pa-space-3);
  }

  .pa-discover__poster .pa-logo,
  .pa-discover__poster [data-logo] {
    width: 44px;
    height: 44px;
  }

  .pa-discover__poster strong {
    font-size: var(--pa-text-md);
  }

  .pa-discover__poster > span:last-child {
    font-size: var(--pa-text-sm);
  }
}

.pa-discover__poster--soon > span:last-child {
  color: var(--pa-night-ink-soft);
}

.pa-discover__play {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-2);
  padding: var(--pa-space-3) var(--pa-space-5);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-accent);
  color: var(--pa-accent-ink);
  font-weight: 700;
}

.pa-discover__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.pa-discover__programme {
  display: grid;
  gap: var(--pa-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pa-programme;
}

.pa-discover__programme li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: var(--pa-space-3);
  counter-increment: pa-programme;
}

.pa-discover__programme li::before {
  content: counter(pa-programme);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pa-raspberry-soft);
  color: var(--pa-raspberry);
  font-weight: 700;
}

.pa-discover__programme span {
  color: var(--pa-ink-soft);
  font-size: var(--pa-text-sm);
}

.pa-discover__privacy {
  margin: var(--pa-space-4) 0 0;
}

/* Les quatre étapes : des tuiles sans lien, numérotées par la liste */
.pa-discover__steps .pa-tile:hover {
  transform: none;
  box-shadow: var(--pa-shadow-2);
}

/* Vos données : une puce par engagement */
.pa-discover__facts {
  display: grid;
  gap: var(--pa-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.pa-discover__facts li {
  display: flex;
  gap: var(--pa-space-3);
  align-items: flex-start;
  padding: var(--pa-space-4) var(--pa-space-5);
  border-radius: var(--pa-radius-lg, 16px);
  background: rgb(255 255 255 / 0.06);
  line-height: 1.5;
}

.pa-discover__facts li > span:first-child {
  flex: none;
  color: #FF9DBE;
}

.pa-discover__facts strong {
  color: var(--pa-night-ink);
}

/* ePoc et Inria */
.pa-discover__epoc-card {
  display: grid;
  gap: var(--pa-space-3);
  max-width: 52rem;
}

.pa-discover__epoc-card p {
  margin: 0;
  line-height: 1.6;
}

.pa-discover__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pa-space-2) var(--pa-space-5);
  margin: var(--pa-space-2) 0 0;
  padding: 0;
  list-style: none;
}

.pa-discover__links a {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-2);
  min-height: 24px;
  font-weight: 700;
}

/* Le diaporama : l'image, les commandes, les notes empilées (seule la courante se voit), les fichiers */
.pa-slides {
  display: grid;
  gap: var(--pa-space-4);
}

.pa-slides__stage {
  margin: 0;
  border-radius: var(--pa-radius-lg);
  overflow: hidden;
  background: var(--pa-surface);
  box-shadow: var(--pa-shadow-3);
}

.pa-slides__stage img {
  display: block;
  width: 100%;
  height: auto;
}

.pa-slides__stage:focus-visible {
  outline: 3px solid var(--pa-focus);
  outline-offset: 3px;
}

.pa-slides__stage:fullscreen {
  display: grid;
  place-items: center;
  border-radius: 0;
  background: #000;
}

.pa-slides__stage:fullscreen img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
}

.pa-slides__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pa-space-2) var(--pa-space-3);
}

.pa-slides__back .pa-icon {
  transform: rotate(180deg);
}

.pa-slides__choice {
  flex: 1 1 16rem;
  min-width: 0;
}

.pa-slides__counter {
  color: var(--pa-ink-soft);
  font-variant-numeric: tabular-nums;
}

.pa-slides__notes {
  padding: var(--pa-space-4) var(--pa-space-5);
  border-radius: var(--pa-radius-lg);
  background: var(--pa-surface);
  box-shadow: var(--pa-shadow-2);
}

.pa-slides__notes h3 {
  margin: 0 0 var(--pa-space-2);
  font-size: var(--pa-text-md);
}

.pa-slides__pile {
  display: grid;
}

.pa-slides__pile > p {
  grid-area: 1 / 1;
  margin: 0;
  line-height: 1.6;
  visibility: hidden;
}

.pa-slides__pile > p.pa-slides__current {
  visibility: visible;
}

.pa-slides__files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pa-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pa-slides__files a {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-2);
  min-height: 44px;
  padding: var(--pa-space-2) var(--pa-space-4);
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-surface);
  color: var(--pa-ink);
  font-weight: 700;
  text-decoration: none;
}

.pa-slides__files a:hover {
  border-color: var(--pa-accent);
}

.pa-slides__files small {
  color: var(--pa-ink-soft);
  font-weight: 400;
}

.pa-slides__version {
  margin: 0;
}

/* QR code sur fond blanc (lisible dans les deux thèmes) */
.pa-discover__qr-code {
  flex: none;
  width: 156px;
  padding: 10px;
  border-radius: var(--pa-radius-md);
  background: #FFFFFF;
  box-shadow: var(--pa-shadow-1);
}

.pa-discover__qr-code svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Essayer : les exemples et leurs liens à gauche, le téléphone à droite */
.pa-discover__try {
  display: grid;
  gap: var(--pa-space-8, 3rem);
  align-items: center;
}

@media (min-width: 900px) {
  .pa-discover__try {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }
}

.pa-discover__try-side {
  display: grid;
  gap: var(--pa-space-5);
}

.pa-discover__models {
  display: grid;
  gap: var(--pa-space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  /* Toutes les rangées prennent la hauteur de la plus haute : les quatre tuiles sont identiques. */
  grid-auto-rows: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pa-discover__models > li {
  display: flex;
}

.pa-discover__model {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--pa-space-3);
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 44px;
  padding: var(--pa-space-2);
  border: 2px solid var(--pa-line);
  border-radius: var(--pa-radius-lg);
  background: var(--pa-surface);
  color: var(--pa-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pa-discover__model img {
  width: 88px;
  height: auto;
  border-radius: var(--pa-radius-md);
}

.pa-discover__model span {
  display: grid;
  gap: 2px;
  text-wrap: balance;
}

.pa-discover__model small {
  color: var(--pa-ink-soft);
}

.pa-discover__model:hover {
  border-color: var(--pa-accent);
}

.pa-discover__model[aria-pressed="true"] {
  border-color: var(--pa-accent);
  background: var(--pa-accent-soft);
}

.pa-discover__model:focus-visible {
  outline: 3px solid var(--pa-focus);
  outline-offset: 2px;
}

.pa-discover__try-qr,
.pa-discover__train-qr {
  display: flex;
  gap: var(--pa-space-4);
  align-items: center;
}

.pa-discover__try-qr p,
.pa-discover__train-qr p {
  margin: 0;
  line-height: 1.5;
}

/* Sur téléphone, le lien vers l'application remplace le QR code (on ne scanne pas son propre écran). */
@media (min-width: 900px) {
  .pa-discover__try-app {
    display: none;
  }
}

@media (max-width: 899px) {
  .pa-discover__try-qr {
    display: none;
  }
}

.pa-discover__try-visual {
  display: grid;
  justify-items: center;
}

.pa-discover__try-visual .pa-phone {
  width: min(100%, 300px);
}

@media (max-width: 899px) {
  .pa-discover__try-visual .pa-phone {
    width: min(70%, 240px);
  }
}

/* Couverture de l'exemple, tant que le lecteur ne joue pas (téléphone, échec, chargement) */
.pa-discover__try-screen {
  display: grid;
  align-content: center;
  gap: 10px;
  height: 100%;
  padding: 48px 18px 18px;
  color: #2A3150;
  text-align: center;
}

.pa-discover__try-screen img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 8px 22px rgb(42 49 80 / 0.12);
}

.pa-discover__try-screen strong {
  font-family: var(--pa-font-title);
  font-size: 19px;
  line-height: 1.2;
  color: #232845;
}

.pa-discover__try-screen span {
  font-size: 13px;
  color: #5A6080;
}

/* Former : quatre cartes */
.pa-discover__train {
  display: grid;
  gap: var(--pa-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
}

.pa-discover__train-card {
  display: grid;
  align-content: start;
  gap: var(--pa-space-3);
  min-width: 0;
}

.pa-discover__train-card h3 {
  display: flex;
  gap: var(--pa-space-2);
  align-items: center;
  margin: 0;
  font-size: var(--pa-text-lg);
}

.pa-discover__train-card h3 > span:first-child {
  color: var(--pa-accent);
}

.pa-discover__train-card p {
  margin: 0;
  line-height: 1.6;
}

.pa-discover__code {
  width: 100%;
  min-height: 6.5rem;
  padding: var(--pa-space-3);
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius-md);
  background: var(--pa-paper);
  color: var(--pa-ink);
  font: 0.85rem/1.5 ui-monospace, "SFMono-Regular", Menlo, monospace;
  resize: vertical;
}

.pa-discover__code:focus-visible {
  outline: 3px solid var(--pa-focus);
  outline-offset: 2px;
}

.pa-discover__files {
  display: grid;
  gap: var(--pa-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pa-discover__files a {
  display: inline-flex;
  gap: var(--pa-space-2);
  align-items: center;
  min-height: 32px;
  font-weight: 700;
}

.pa-discover__kit,
.pa-discover__plan {
  display: grid;
  gap: var(--pa-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pa-discover__kit li,
.pa-discover__plan li {
  display: grid;
  gap: 2px;
}

.pa-discover__kit a {
  font-weight: 700;
}

.pa-discover__kit span {
  color: var(--pa-ink-soft);
  font-size: var(--pa-text-sm);
}

.pa-discover__plan li {
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--pa-space-3);
  align-items: baseline;
}

.pa-discover__plan b {
  justify-self: start;
  padding: 2px var(--pa-space-2);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-raspberry-soft);
  color: var(--pa-raspberry);
  font-variant-numeric: tabular-nums;
}

/* Ressources : une carte par entrée de decouvrir/ressources.json */
.pa-discover__resources {
  display: grid;
  gap: var(--pa-space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.pa-discover__resource {
  display: grid;
  align-content: start;
  gap: var(--pa-space-2);
  height: 100%;
  padding: var(--pa-space-5);
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius-lg);
  background: var(--pa-surface);
  box-shadow: var(--pa-shadow-1);
}

.pa-discover__resource-type {
  display: inline-flex;
  gap: var(--pa-space-2);
  align-items: center;
  justify-self: start;
  padding: 2px var(--pa-space-3);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-lagoon-soft);
  color: var(--pa-ink);
  font-size: var(--pa-text-sm);
  font-weight: 700;
}

.pa-discover__resource h3 {
  margin: 0;
  font-size: var(--pa-text-md);
}

.pa-discover__resource h3 a {
  color: var(--pa-ink);
}

.pa-discover__resource p {
  margin: 0;
  line-height: 1.5;
}

.pa-discover__resource small {
  color: var(--pa-ink-soft);
}

.pa-discover__press-title {
  margin: var(--pa-space-6) 0 var(--pa-space-4);
}

/* Appel final */
.pa-discover__final {
  background:
    radial-gradient(30rem 20rem at 15% 0%, var(--pa-raspberry-soft), transparent 70%),
    radial-gradient(30rem 20rem at 85% 100%, var(--pa-lagoon-soft), transparent 70%);
}

.pa-discover__final-inner {
  display: grid;
  gap: var(--pa-space-4);
  justify-items: center;
  text-align: center;
}

.pa-discover__final-inner .pa-section-title,
.pa-discover__final-inner .pa-section-lead {
  margin: 0;
}

.pa-discover__final-inner .pa-cluster {
  justify-content: center;
}