/* ============================================================
   CERTIFICATIONS, VIDEOS EN POP-UP, PUBLICITE
   ------------------------------------------------------------
   Charge par l'application ET par le site (voir assembler.js et
   les deux index.html). Couleurs : jetons.css uniquement.
   Les animations d'entree sont en « backwards », jamais « both ».
   ============================================================ */

/* ---------- le bloc « Prepare la certification » ---------- */
.bloc-certifs {
  position: relative; margin: 28px 0 8px; padding: 18px;
  border-radius: var(--r-l); background: var(--surface); border: 1.5px solid var(--bord);
  overflow: hidden; text-align: left;
  animation: bc-entre 560ms var(--ressort, cubic-bezier(.2, 1.4, .4, 1)) backwards;
}
.bloc-certifs::before {
  content: ''; position: absolute; left: 0; top: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--or));
  transform-origin: left; animation: bc-barre 900ms ease 200ms backwards;
}
@keyframes bc-entre { from { opacity: 0; transform: translateY(24px); } }
@keyframes bc-barre { from { transform: scaleX(0); } }
.bc-tete { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.bc-medaille { flex: none; font-size: 34px; line-height: 1; animation: bc-medaille 3.2s ease-in-out 1s infinite; transform-origin: 50% 0; }
@keyframes bc-medaille { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-12deg); } 86% { transform: rotate(9deg); } 94% { transform: rotate(-4deg); } }
.bc-sur { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--or); }
.bc-tete h3 { margin: 3px 0 6px; font-size: 19px; font-weight: 800; line-height: 1.25; color: var(--texte); }
.bc-tete p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--texte-2); }
.bc-liste { display: grid; gap: 10px; }
.bc-carte {
  padding: 12px 14px; border-radius: var(--r-m); background: var(--surface-2); border: 1px solid var(--bord);
  animation: bc-entre 460ms ease backwards; animation-delay: calc(250ms + var(--k, 0) * 110ms);
}
.bc-haut { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.bc-code {
  font-family: var(--police-mono); font-size: 12px; font-weight: 700;
  padding: 2px 8px; border-radius: 6px; background: var(--accent); color: var(--sur-accent);
}
.bc-niv { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; border: 1px solid var(--bord-fort); color: var(--texte-2); }
.bc-niv.debutant { border-color: var(--succes); color: var(--succes); }
.bc-niv.avance { border-color: var(--or); color: var(--or); }
.bc-nom { display: block; font-size: 15px; font-weight: 800; line-height: 1.3; margin-bottom: 10px; color: var(--texte); }
.bc-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.bc-btn {
  display: inline-flex; align-items: center; gap: 4px; padding: 7px 11px; border-radius: 99px;
  font: 700 12px/1.2 var(--police); color: var(--texte); cursor: pointer; text-decoration: none;
  background: var(--surface); border: 1px solid var(--bord-fort);
  transition: transform 200ms var(--ressort, ease), border-color 160ms ease;
}
.bc-btn:hover { border-color: var(--accent); }
.bc-btn:active { transform: scale(.94); }
.bc-btn.principal { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); }
.bc-note { margin: 12px 0 0; }
.bc-sable {
  display: block; margin-top: 12px; padding: 10px 12px; border-radius: var(--r-m);
  border: 1px dashed var(--bord-fort); font-size: 13px; font-weight: 700; color: var(--texte); text-decoration: none;
}
.bc-sable span { font-weight: 500; color: var(--texte-3); }
.bc-sable:hover { border-color: var(--accent); }

/* ---------- la fenetre video (pop-up) ---------- */
.fenetre-video { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; }
.fv-fond { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fv-fond 240ms ease backwards; }
@keyframes fv-fond { from { opacity: 0; } }
.fv-carte {
  position: relative; width: min(920px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  border-radius: var(--r-l); background: var(--surface-2); border: 1.5px solid var(--bord-fort);
  box-shadow: var(--ombre-3); padding: 14px;
  animation: fv-carte 480ms var(--ressort, cubic-bezier(.2, 1.4, .4, 1)) backwards;
}
@keyframes fv-carte { from { opacity: 0; transform: translateY(40px) scale(.9); } }
.fenetre-video.part .fv-fond { animation: fv-sort 220ms ease forwards; }
.fenetre-video.part .fv-carte { animation: fv-sort-carte 220ms ease forwards; }
@keyframes fv-sort { to { opacity: 0; } }
@keyframes fv-sort-carte { to { opacity: 0; transform: translateY(20px) scale(.95); } }
.fv-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.fv-titre { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fv-titre b { font-size: 15px; font-weight: 800; color: var(--texte); }
.fv-titre span { font-size: 12px; color: var(--texte-3); }
.fv-fermer {
  flex: none; width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  background: var(--surface); border: 1px solid var(--bord-fort); color: var(--texte); font-size: 22px; line-height: 1;
  transition: transform 200ms ease;
}
.fv-fermer:hover { transform: rotate(90deg); }
.fv-ecran { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-m); overflow: hidden; background: #000; }
@supports not (aspect-ratio: 1) { .fv-ecran { height: 0; padding-bottom: 56.25%; } }
.fv-ecran iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fv-attente { position: absolute; inset: 0; display: grid; place-items: center; background: #000; transition: opacity 400ms ease; pointer-events: none; }
.fv-attente.parti { opacity: 0; }
.fv-attente i { width: 42px; height: 42px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .2); border-top-color: #fff; animation: fv-tourne 800ms linear infinite; }
@keyframes fv-tourne { to { transform: rotate(360deg); } }
.fv-episodes { display: flex; gap: 8px; overflow-x: auto; padding: 12px 2px 4px; }
.fv-ep {
  flex: none; display: inline-flex; align-items: center; gap: 8px; max-width: 260px; text-align: left;
  padding: 8px 12px; border-radius: var(--r-m); cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--bord); color: var(--texte-2);
  font: 600 12px/1.3 var(--police);
  animation: bc-entre 380ms ease backwards; animation-delay: calc(300ms + var(--k, 0) * 70ms);
  transition: border-color 160ms ease, color 160ms ease;
}
.fv-ep span { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); font-weight: 800; }
.fv-ep.actif { border-color: var(--accent); color: var(--texte); }
.fv-ep.actif span { background: var(--accent); color: var(--sur-accent); }
.fv-lien { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--texte-3); text-decoration: none; }
.fv-lien:hover { color: var(--accent); }

/* ---------- la publicite : discrete ---------- */
.pub {
  position: relative; margin: 22px 0 6px; padding: 10px 12px 12px;
  border-radius: var(--r-m); border: 1px solid var(--bord); background: var(--surface);
  animation: bc-entre 480ms ease 400ms backwards; text-align: left;
}
.pub-etiq { display: block; margin-bottom: 8px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); }
.pub-corps { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--texte); }
.pub-img { flex: none; width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--surface-2); }
.pub-pict { flex: none; font-size: 26px; line-height: 1; }
.pub-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pub-txt b { font-size: 14px; font-weight: 800; }
.pub-txt em { font-style: normal; font-size: 12px; line-height: 1.4; color: var(--texte-2); }
.pub-btn {
  flex: none; padding: 7px 12px; border-radius: 99px; font-size: 12px; font-weight: 800;
  background: var(--pub, var(--accent)); color: #fff;
}
.pub-maison .pub-btn { background: var(--or); color: #1A1403; }
.pub-sans { display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 700; color: var(--texte-3); text-decoration: none; }
.pub-sans:hover { color: var(--accent); }
.fin .pub { max-width: 420px; margin-left: auto; margin-right: auto; }

@media (prefers-reduced-motion: reduce) {
  .bloc-certifs, .bloc-certifs::before, .bc-carte, .bc-medaille, .fv-carte, .fv-ep, .pub { animation: none; }
}

/* La rangee d'episodes deborde en largeur : sans ca, elle elargirait la fenetre. */
.fenetre-video { grid-template-columns: minmax(0, 920px); }
.fv-carte { min-width: 0; width: 100%; }
/* Dans Pratique, le titre du logiciel suffit : pas de grand espace au-dessus. */
.section-titre + .bloc-certifs { margin-top: 0; }

/* ---------- le site : la section des certifications ---------- */
.certifs-site { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.certifs-site .bloc-certifs { margin: 0; }
.certifs-site .cs-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 18px; font-weight: 800; color: var(--texte); }
.pub-site { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.note-certifs { margin: 18px auto 0; max-width: 680px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--texte-3); }
.cs-logiciel { animation: bc-entre 520ms ease backwards; }
.cs-logiciel:nth-child(2) { animation-delay: 80ms; } .cs-logiciel:nth-child(3) { animation-delay: 160ms; }
.cs-logiciel:nth-child(4) { animation-delay: 240ms; } .cs-logiciel:nth-child(n+5) { animation-delay: 300ms; }
.bc-pied { margin-top: 6px; }
.certifs-site .bc-pied { grid-column: 1 / -1; max-width: 720px; justify-self: center; text-align: center; }