/* ============================================================================
   SIMULATEUR TPR (simulateur-tpr.php, hors theorie)

   Une seule palette, CLAIRE, celle du site : fond #eef3f9, cartes blanches,
   texte bleu marine #112a45, vert #8cc63f (texte vert #4e7d1f sur fond clair),
   ambre pour ce qui est verrouille. Pas de variante sombre : le site est en
   mode clair, et le lecteur aussi (seule la video elle-meme est sombre).
   Aucune classe utilitaire Tailwind ici : le build du front est purge.
   ============================================================================ */

#rp, .rp-app, .rp-modal {
    --rp-bg: #eef3f9;
    --rp-card: #ffffff;
    --rp-card-2: #f5f8fc;
    --rp-border: rgba(16, 42, 69, .12);
    --rp-border-2: rgba(16, 42, 69, .2);
    --rp-ink: #112a45;
    --rp-muted: #51647a;
    --rp-navy: #0f2b46;
    --rp-green: #8cc63f;
    --rp-green-d: #7ab62f;
    --rp-green-tx: #4e7d1f;
    --rp-green-bg: rgba(140, 198, 63, .14);
    --rp-green-bd: rgba(140, 198, 63, .5);
    --rp-amber-bg: #fbeccb;
    --rp-amber-bd: #c9902a;
    --rp-amber-tx: #7a4a06;
    --rp-red: #c62d23;
    --rp-red-bg: rgba(198, 45, 35, .08);
    --rp-red-bd: rgba(198, 45, 35, .45);
    --rp-shadow: 0 10px 28px rgba(16, 42, 69, .10);
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--rp-ink);
}
#rp {
    background: var(--rp-bg) !important;
    padding: 0 0 64px;
    /* flow-root : la marge haute du premier bloc ne traverse pas #rp */
    display: flow-root;
}
#rp *, .rp-app *, .rp-modal * { box-sizing: border-box; }
#rp .container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ---- Boutons (les memes que le reste du site) ------------------------------ */
.rp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 18px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; text-decoration: none;
    font: inherit; font-weight: 800; font-size: 14.5px; line-height: 1.2;
    transition: transform .12s, box-shadow .12s, background-color .12s, border-color .12s;
}
.rp-btn svg { width: 16px; height: 16px; flex: 0 0 16px; }
.rp-btn--pri {
    background: linear-gradient(180deg, #8cc63f, #7ab62f); color: #0f2b46;
    box-shadow: 0 10px 24px rgba(140, 198, 63, .30);
}
.rp-btn--pri:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(140, 198, 63, .38); }
.rp-btn--ghost { background: #fff; color: var(--rp-ink); border-color: var(--rp-border-2); }
.rp-btn--ghost:hover { border-color: var(--rp-green); color: var(--rp-green-tx); }
.rp-btn--lock { background: var(--rp-amber-bg); color: var(--rp-amber-tx); border-color: var(--rp-amber-bd); }
.rp-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.rp-btn.is-on { background: var(--rp-green-bg); border-color: var(--rp-green); color: var(--rp-green-tx); }

/* ---- Bandeau admin ------------------------------------------------------------ */
#rp .rp-adm {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    margin: 18px 0 0; padding: 10px 14px; border-radius: 12px;
    background: var(--rp-amber-bg); border: 1px dashed var(--rp-amber-bd); color: var(--rp-ink); font-size: 13px;
}
#rp .rp-adm p { margin: 0; flex: 1 1 260px; line-height: 1.5; }
#rp .rp-adm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rp-amber-bd); }
#rp .rp-adm-act { display: flex; gap: 8px; flex-wrap: wrap; }
#rp .rp-adm-act a {
    padding: 6px 11px; border-radius: 99px; font-weight: 700; font-size: 12.5px; text-decoration: none;
    color: var(--rp-ink); background: #fff; border: 1px solid var(--rp-border);
}
#rp .rp-adm-act a:hover { border-color: var(--rp-green); }

/* ---- En-tete -------------------------------------------------------------------- */
#rp .rp-hero { display: grid; gap: 18px; padding: 28px 0 10px; }
@media (min-width: 940px) {
    #rp .rp-hero { grid-template-columns: minmax(0, 1fr) 360px; align-items: center; gap: 34px; }
}
#rp .rp-eyebrow {
    display: inline-block; padding: 5px 13px; border-radius: 99px; margin-bottom: 12px;
    font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    color: var(--rp-green-tx); background: var(--rp-green-bg); border: 1px solid var(--rp-green-bd);
}
#rp .rp-hero h1 {
    margin: 0 0 .7rem; font-size: clamp(1.6rem, 3.2vw, 2.45rem); font-weight: 900; line-height: 1.1;
    letter-spacing: -.025em; color: var(--rp-ink); text-wrap: balance;
}
#rp .rp-hero h1 span { display: block; color: var(--rp-green-tx); }
#rp .rp-hero-tx > p { margin: 0; max-width: 46rem; color: var(--rp-muted); font-size: .97rem; line-height: 1.6; }
#rp .rp-facts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; }
#rp .rp-facts li { padding: 7px 12px; border-radius: 10px; font-size: 13px; color: var(--rp-muted); background: #fff; border: 1px solid var(--rp-border); }
#rp .rp-facts b { color: var(--rp-ink); font-weight: 900; }

/* La carte « simulation d'examen » : blanche, filet vert, comme les cartes du site. */
#rp .rp-exam {
    position: relative; overflow: hidden; border-radius: 18px; padding: 20px 20px 18px;
    background: #fff; border: 2px solid var(--rp-green-bd); box-shadow: var(--rp-shadow);
}
#rp .rp-exam-tag { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--rp-green-tx); }
#rp .rp-exam b { display: block; margin: 4px 0 6px; font-size: 1.25rem; font-weight: 900; color: var(--rp-ink); }
#rp .rp-exam p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--rp-muted); }
#rp .rp-exam-dots { display: flex; gap: 5px; margin: 0 0 16px; }
#rp .rp-exam-dots i {
    flex: 1 1 0; max-width: 26px; aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-style: normal; font-size: 10.5px; font-weight: 800; color: #0f2b46; background: var(--rp-green);
}
#rp .rp-exam-dots i:nth-child(n+7) { background: transparent; border: 2px solid var(--rp-green); color: transparent; }
#rp .rp-exam .rp-btn { width: 100%; }

/* ---- Les deux formats -------------------------------------------------------------- */
#rp .rp-how { display: grid; gap: 12px; margin: 22px 0 8px; }
@media (min-width: 760px) { #rp .rp-how { grid-template-columns: 1fr 1fr; } }
#rp .rp-how-c { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--rp-border); }
#rp .rp-how-c h2 { margin: 0 0 4px; font-size: 1rem; font-weight: 800; color: var(--rp-ink); }
#rp .rp-how-c p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.55; color: var(--rp-muted); }
#rp .rp-how-c small { font-size: 12px; font-weight: 700; color: var(--rp-green-tx); }
.rp-how-ic { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.rp-how-ic svg { width: 21px; height: 21px; }
.rp-how-ic--clic, .rp-how-ic--quiz { background: var(--rp-green-bg); color: var(--rp-green-tx); }

/* ---- Grille des videos ------------------------------------------------------------- */
#rp .rp-list { margin-top: 26px; }
#rp .rp-list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
#rp .rp-list-head h2 { margin: 0; font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 900; color: var(--rp-ink); }
#rp .rp-filters { display: flex; flex-wrap: wrap; gap: 6px; }
#rp .rp-filters button {
    padding: 7px 13px; border-radius: 99px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700;
    color: var(--rp-muted); background: #fff; border: 1px solid var(--rp-border);
}
#rp .rp-filters button.is-on { color: #0f2b46; background: var(--rp-green); border-color: var(--rp-green); }

#rp .rp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 14px; }
#rp .rp-card {
    position: relative; display: flex; flex-direction: column; width: 100%; padding: 0; overflow: hidden; text-align: left;
    background: #fff; border: 1px solid var(--rp-border); border-radius: 16px; cursor: pointer;
    color: var(--rp-ink); text-decoration: none; font: inherit;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
#rp button.rp-card:hover, #rp a.rp-card:hover { transform: translateY(-3px); border-color: var(--rp-green); box-shadow: var(--rp-shadow); }
#rp .rp-card:focus-visible { outline: 3px solid var(--rp-green); outline-offset: 2px; }
#rp .rp-card[hidden] { display: none; }
#rp .rp-thumb { position: relative; display: block; aspect-ratio: 2 / 1; background: #dfe7f0; overflow: hidden; }
#rp .rp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
#rp .rp-card:hover .rp-thumb img { transform: scale(1.05); }
#rp .rp-dur, #rp .rp-free { position: absolute; z-index: 1; padding: 3px 8px; border-radius: 7px; font-size: 11.5px; font-weight: 800; line-height: 1.3; }
#rp .rp-dur { right: 8px; bottom: 8px; background: rgba(255, 255, 255, .92); color: var(--rp-ink); font-variant-numeric: tabular-nums; }
#rp .rp-free { left: 8px; top: 8px; background: var(--rp-green); color: #0f2b46; text-transform: uppercase; letter-spacing: .05em; font-size: 10.5px; }
#rp .rp-play {
    position: absolute; z-index: 1; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; background: var(--rp-green); color: #0f2b46;
    opacity: 0; transform: scale(.8); transition: opacity .15s, transform .15s; box-shadow: 0 8px 22px rgba(16, 42, 69, .25);
}
#rp .rp-play svg { width: 24px; height: 24px; margin-left: 3px; }
#rp .rp-card:hover .rp-play, #rp .rp-card:focus-visible .rp-play { opacity: 1; transform: scale(1); }
#rp .rp-lock .rp-thumb img { filter: saturate(.55) brightness(.9); }
#rp .rp-lockic {
    position: absolute; z-index: 1; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; background: var(--rp-amber-bg); color: var(--rp-amber-tx); border: 1px solid var(--rp-amber-bd);
}
#rp .rp-lockic svg { width: 21px; height: 21px; }
#rp .rp-body { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 13px; flex: 1 1 auto; }
#rp .rp-n { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rp-muted); }
#rp .rp-body b { font-size: 1.02rem; font-weight: 900; color: var(--rp-ink); line-height: 1.25; }
#rp .rp-ctx { font-size: 12.5px; line-height: 1.45; color: var(--rp-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#rp .rp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; }
#rp .rp-diff { display: inline-flex; gap: 3px; margin-right: 2px; }
#rp .rp-diff i { width: 7px; height: 7px; border-radius: 2px; background: var(--rp-border-2); }
#rp .rp-diff i.on { background: var(--rp-green); }
#rp .rp-st:empty { display: none; }
#rp .rp-st {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 99px;
    font-size: 11px; font-weight: 800; background: var(--rp-card-2); border: 1px solid var(--rp-border); color: var(--rp-muted);
}
#rp .rp-st svg { width: 11px; height: 11px; }
#rp .rp-st.is-ok { color: var(--rp-green-tx); border-color: var(--rp-green-bd); background: var(--rp-green-bg); }
#rp .rp-st.is-ko { color: var(--rp-red); border-color: var(--rp-red-bd); background: var(--rp-red-bg); }
#rp .rp-st--lock { color: var(--rp-amber-tx); background: var(--rp-amber-bg); border-color: var(--rp-amber-bd); }
#rp .rp-soon { cursor: default; opacity: .7; border-style: dashed; }
#rp .rp-thumb--soon { display: flex; align-items: center; justify-content: center; color: var(--rp-muted); background: var(--rp-card-2); }
#rp .rp-thumb--soon svg { width: 34px; height: 34px; opacity: .6; }
#rp .rp-note { margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: var(--rp-muted); }
#rp .rp-empty { margin: 0; padding: 22px 18px; border-radius: 16px; text-align: center; font-size: 14px; line-height: 1.6; color: var(--rp-muted); background: #fff; border: 1px dashed var(--rp-border-2); }
#rp .rp-empty[hidden] { display: none; }
#rp .rp-note a { color: var(--rp-green-tx); font-weight: 700; }

/* ---- Fenetre de choix du format ------------------------------------------------------ */
.rp-modal {
    position: fixed; inset: 0; z-index: 9990; display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(16, 42, 69, .45); backdrop-filter: blur(3px);
}
.rp-modal[hidden] { display: none; }
.rp-modal-box {
    position: relative; width: min(640px, 100%); max-height: calc(100vh - 32px); overflow: auto;
    background: #fff; color: var(--rp-ink); border-radius: 20px; padding: 0 0 20px;
    box-shadow: 0 30px 80px rgba(16, 42, 69, .30); animation: rpPop .18s ease-out;
}
@keyframes rpPop { from { transform: translateY(10px) scale(.98); opacity: 0; } }
.rp-modal-img { aspect-ratio: 2 / 1; background: #dfe7f0; }
.rp-modal-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-modal-x {
    position: absolute; right: 10px; top: 10px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
    background: #fff; color: var(--rp-ink); font-size: 22px; line-height: 1; box-shadow: 0 4px 12px rgba(16, 42, 69, .2);
}
.rp-modal-n { display: block; margin: 16px 20px 0; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rp-muted); }
.rp-modal h2 { margin: 4px 20px 4px; font-size: 1.3rem; font-weight: 900; color: var(--rp-ink); }
.rp-modal-s { margin: 0 20px 14px; font-size: 13.5px; line-height: 1.55; color: var(--rp-muted); }
/* Fenetre « publiees dans les 48 heures » (pack pas encore en vente) */
.rp-soon-box { width: min(460px, 100%); padding: 30px 24px 22px; text-align: center; }
.rp-soon-ic {
    display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%;
    color: var(--rp-green-tx); background: var(--rp-green-bg); border: 1px solid var(--rp-green-bd);
}
.rp-soon-ic svg { width: 28px; height: 28px; }
.rp-soon-box .rp-modal-n { margin: 14px 0 0; }
.rp-soon-box h2 { margin: 4px 0 10px; }
.rp-soon-box .rp-modal-s { margin: 0 0 10px; font-size: 14.5px; }
.rp-soon-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.rp-soon-act .rp-btn { padding: 12px 18px; }
.rp-modes { display: grid; gap: 10px; margin: 0 20px; }
@media (min-width: 560px) { .rp-modes { grid-template-columns: 1fr 1fr; } }
.rp-mode {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border-radius: 14px; cursor: pointer; text-align: left;
    font: inherit; color: var(--rp-ink); background: var(--rp-card-2); border: 2px solid var(--rp-border);
    transition: border-color .12s, transform .12s;
}
.rp-mode:hover, .rp-mode:focus-visible { border-color: var(--rp-green); transform: translateY(-2px); outline: none; }
.rp-mode b { font-size: 1rem; font-weight: 900; }
.rp-mode span { font-size: 13px; line-height: 1.5; color: var(--rp-muted); }
.rp-mode small { font-size: 11.5px; font-weight: 700; color: var(--rp-green-tx); }
.rp-mode .rp-mode-ic { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 2px; }
.rp-mode .rp-mode-ic svg { width: 20px; height: 20px; }

/* ---- Le lecteur : clair, comme le site ------------------------------------------------ */
/* Encoche et barre d'accueil de l'iPhone : le site declare viewport-fit=cover,
   donc en paysage la page passe SOUS l'encoche (59 px de chaque cote sur un
   iPhone 15) si on ne recule pas le contenu de env(safe-area-inset-*). */
.rp-app { position: fixed; inset: 0; z-index: 9995; display: flex; flex-direction: column; background: var(--rp-bg); overflow: hidden; overscroll-behavior: contain; }
.rp-app[hidden] { display: none; }
body.rp-open { overflow: hidden; }
.rp-bar {
    flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
    padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
    background: #fff; border-bottom: 1px solid var(--rp-border); box-shadow: 0 2px 10px rgba(16, 42, 69, .05);
}
.rp-bar-t { min-width: 0; flex: 0 1 auto; font-size: 14.5px; font-weight: 800; color: var(--rp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-bar-m { font-size: 12.5px; font-weight: 700; color: var(--rp-green-tx); padding: 3px 9px; border-radius: 99px; background: var(--rp-green-bg); white-space: nowrap; }
.rp-bar-act { margin-left: auto; display: flex; gap: 6px; }
.rp-ico {
    width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--rp-border); cursor: pointer; display: flex; align-items: center; justify-content: center;
    background: var(--rp-card-2); color: var(--rp-ink);
}
.rp-ico:hover { border-color: var(--rp-green); color: var(--rp-green-tx); }
.rp-ico[hidden] { display: none; }
.rp-ico svg { width: 19px; height: 19px; }
.rp-ico[aria-pressed="false"] .rp-snd-w { display: none; }
.rp-ico[aria-pressed="false"] { opacity: .6; }
.rp-main {
    flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; overflow-y: auto; gap: 10px;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 14px max(12px, env(safe-area-inset-right)) max(24px, calc(12px + env(safe-area-inset-bottom))) max(12px, env(safe-area-inset-left));
}
.rp-long { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.rp-rules { display: none; }
.rp-stage {
    position: relative; flex: 0 0 auto; width: min(100%, calc((100dvh - 200px) * 2)); max-width: 1280px; aspect-ratio: 2 / 1;
    background: #0f2b46; border-radius: 14px; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation;
    -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
    box-shadow: var(--rp-shadow);
}
/* Pendant le film en format clic, un doigt pose sur la video ne fait ni
   defiler ni zoomer : chaque toucher est un clic, tout de suite. */
.rp-stage.is-clic { touch-action: none; }
.rp-stage video, .rp-stage canvas, .rp-fx, .rp-cover { position: absolute; inset: 0; width: 100%; height: 100%; }
.rp-stage video { object-fit: fill; background: #0f2b46; }
.rp-stage canvas { pointer-events: none; }
.rp-fx { pointer-events: none; overflow: hidden; }
/* Pointeur vert : c'est la POINTE qui compte, comme a l'examen. */
.rp-stage.is-clic {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M2 2l11 27 4-11 11-4z' fill='%238cc63f' stroke='%230f2b46' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 2 2, crosshair;
}
.rp-ripple { position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; border: 3px solid #8cc63f; box-shadow: 0 0 0 2px rgba(15, 43, 70, .5); animation: rpRipple .6s ease-out forwards; }
@keyframes rpRipple { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
/* Les ecrans poses sur la video : une carte blanche sur un voile clair. */
/* Centre par marges automatiques et non par align-items : si la carte est plus
   haute que la video (telephone en paysage), elle commence en haut et defile
   au lieu d'etre coupee par le haut. */
.rp-cover { display: flex; padding: 18px; overflow-y: auto; background: rgba(238, 243, 249, .78); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.rp-cover > * { margin: auto; }
.rp-cover[hidden] { display: none; }
.rp-cover-c {
    display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 40rem; padding: 20px 24px; text-align: center;
    background: #fff; border: 1px solid var(--rp-border); border-radius: 18px; box-shadow: var(--rp-shadow);
}
.rp-cover h3 { margin: 0; font-size: clamp(1.1rem, 2.4vw, 1.6rem); font-weight: 900; color: var(--rp-ink); }
.rp-cover p { margin: 0; font-size: clamp(.85rem, 1.5vw, .98rem); line-height: 1.55; color: var(--rp-muted); }
.rp-cover .rp-small { font-size: 12.5px; }
.rp-cover-c.is-ok h3 { color: var(--rp-green-tx); }
.rp-cover-c.is-ko h3 { color: var(--rp-red); }
.rp-count { font-size: clamp(3rem, 12vw, 7rem); font-weight: 900; color: #0f2b46; text-shadow: 0 6px 30px rgba(140, 198, 63, .7); animation: rpBeat 1s ease-out infinite; }
@keyframes rpBeat { from { transform: scale(1.25); opacity: .4; } 30% { transform: scale(1); opacity: 1; } }
.rp-spin { width: 42px; height: 42px; border-radius: 50%; border: 4px solid rgba(16, 42, 69, .12); border-top-color: var(--rp-green); animation: rpSpin .8s linear infinite; }
@keyframes rpSpin { to { transform: rotate(360deg); } }

/* Compteur de clics : pastilles vertes numerotees ; utilisee = cercle vide ;
   la derniere clignote (comme a l'examen). */
.rp-dock { width: min(100%, 1280px); display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; flex-wrap: wrap; }
.rp-dock:empty { display: none; }
.rp-dots { display: flex; align-items: center; gap: 4px; }
.rp-dots i {
    width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-style: normal; font-size: 11.5px; font-weight: 800; color: #0f2b46; background: var(--rp-green); border: 2px solid var(--rp-green);
    transition: background-color .15s, color .15s;
}
.rp-dots i.used { background: transparent; color: transparent; }
.rp-dots i.last { animation: rpBlink 1s steps(2) infinite; }
@keyframes rpBlink { 50% { opacity: .25; } }
.rp-dock-l { font-size: 12px; font-weight: 700; color: var(--rp-muted); }
.rp-toast {
    position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 3; padding: 7px 14px; border-radius: 99px;
    background: #fff; color: var(--rp-ink); font-size: 13px; font-weight: 700; box-shadow: var(--rp-shadow); animation: rpPop .15s ease-out;
}

/* ---- Panneaux sous le film ------------------------------------------------------------ */
.rp-panel { width: min(100%, 1280px); }
.rp-panel:empty { display: none; }
.rp-q, .rp-detail, .rp-score { background: #fff; border: 1px solid var(--rp-border); border-radius: 16px; padding: 16px; box-shadow: 0 4px 14px rgba(16, 42, 69, .05); }
.rp-q-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.rp-q-head h3 { margin: 0; font-size: clamp(1.1rem, 2.4vw, 1.45rem); font-weight: 900; color: var(--rp-ink); }
.rp-q-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--rp-muted); }
.rp-timer { position: relative; width: 52px; height: 52px; flex: 0 0 52px; margin-left: auto; }
.rp-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rp-timer circle { fill: none; stroke-width: 5; }
.rp-timer .bg { stroke: rgba(16, 42, 69, .1); }
.rp-timer .fg { stroke: var(--rp-green); stroke-linecap: round; transition: stroke .3s; }
.rp-timer.is-mid .fg { stroke: #e0a21a; }
.rp-timer.is-end .fg { stroke: var(--rp-red); }
.rp-timer b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 900; color: var(--rp-ink); }
.rp-opts { display: grid; gap: 8px; }
@media (min-width: 760px) { .rp-opts { grid-template-columns: 1fr 1fr; } }
.rp-opt {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 12px; cursor: pointer; text-align: left;
    font: inherit; font-size: 14.5px; line-height: 1.4; color: var(--rp-ink); background: var(--rp-card-2); border: 2px solid var(--rp-border);
    transition: border-color .12s, background-color .12s;
}
.rp-opt:hover { border-color: var(--rp-green); }
.rp-opt .l {
    flex: 0 0 30px; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    font-weight: 900; background: #fff; border: 1px solid var(--rp-border);
}
.rp-opt[aria-pressed="true"] { border-color: var(--rp-green); background: var(--rp-green-bg); }
.rp-opt[aria-pressed="true"] .l { background: var(--rp-green); border-color: var(--rp-green); color: #0f2b46; }
.rp-q-foot { display: flex; justify-content: flex-end; margin-top: 12px; }

/* Correction du mode question : la bonne reponse, c'est tout. */
.rp-answer { display: grid; gap: 8px; margin-top: 4px; }
.rp-answer-l { margin: 0; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--rp-muted); }
.rp-answer-ok {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px;
    background: var(--rp-green-bg); border: 2px solid var(--rp-green); color: var(--rp-ink); font-weight: 700; font-size: 15px;
}
.rp-answer-ok i { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 900; background: var(--rp-green); color: #0f2b46; }
.rp-answer-ko { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 12px; background: var(--rp-red-bg); border: 1px solid var(--rp-red-bd); color: var(--rp-red); font-size: 14px; text-decoration: line-through; }
.rp-answer-ko i { font-style: normal; font-weight: 900; text-decoration: none; }

.rp-res { display: grid; gap: 12px; }
@media (min-width: 900px) { .rp-res { grid-template-columns: 280px minmax(0, 1fr); align-items: start; } }
.rp-score { text-align: center; padding: 18px; }
.rp-score .big { display: block; font-size: 2.8rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; color: var(--rp-ink); }
.rp-score .big small { font-size: 1.3rem; color: var(--rp-muted); }
.rp-score .lab { display: block; margin-top: 6px; font-size: 13px; color: var(--rp-muted); }
.rp-verdict { display: inline-block; margin-top: 12px; padding: 6px 14px; border-radius: 99px; font-weight: 900; font-size: 13.5px; }
.rp-verdict.ok { background: var(--rp-green-bg); color: var(--rp-green-tx); border: 1px solid var(--rp-green-bd); }
.rp-verdict.ko { background: var(--rp-red-bg); color: var(--rp-red); border: 1px solid var(--rp-red-bd); }
.rp-saved { display: block; margin-top: 10px; font-size: 11.5px; color: var(--rp-muted); min-height: 1em; }
.rp-detail h4 { margin: 0 0 10px; font-size: 13px; font-weight: 800; color: var(--rp-muted); text-transform: uppercase; letter-spacing: .06em; }
.rp-hz { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rp-border); }
.rp-hz:first-of-type { border-top: 0; padding-top: 0; }
.rp-hz-ic { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; }
.rp-hz-ic.ok { background: var(--rp-green-bg); color: var(--rp-green-tx); }
.rp-hz-ic.ko { background: var(--rp-red-bg); color: var(--rp-red); }
.rp-hz b { display: block; font-size: 14.5px; color: var(--rp-ink); }
.rp-hz p { margin: 3px 0 0; font-size: 13px; line-height: 1.55; color: var(--rp-muted); }
.rp-hz .rp-small { font-size: 12px; color: var(--rp-muted); }
.rp-line { margin: 8px 0 0; font-size: 13px; color: var(--rp-muted); }
.rp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.rp-auto {
    display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px;
    background: var(--rp-green-bg); border: 1px solid var(--rp-green-bd); color: var(--rp-ink); font-size: 13.5px; font-weight: 600;
}
.rp-auto i { flex: 0 0 14px; width: 14px; height: 14px; border-radius: 3px; background: rgba(140, 198, 63, .45); border: 2px solid var(--rp-green); }

/* Frise de correction : fenetre de chaque danger + clics */
/* pan-y : un glisse horizontal deplace la lecture, un glisse vertical fait defiler. */
.rp-tl { position: relative; height: 34px; margin: 12px 0 4px; border-radius: 8px; background: var(--rp-card-2); border: 1px solid var(--rp-border); cursor: pointer; touch-action: pan-y; }
.rp-tl .w { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: rgba(140, 198, 63, .35); border: 1px solid var(--rp-green); }
.rp-tl .c { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(16, 42, 69, .25); }
.rp-tl .c.hit { background: var(--rp-green); }
.rp-tl .c.miss { background: var(--rp-red); }
.rp-tl .c.dup, .rp-tl .c.skip { background: #9aa9b8; }
.rp-tl .p { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--rp-navy); }
.rp-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; color: var(--rp-muted); }
.rp-legend span { display: inline-flex; align-items: center; gap: 5px; }
.rp-legend i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.rp-legend .lw { border-radius: 3px; background: rgba(140, 198, 63, .45); border: 1px solid var(--rp-green); }
.rp-legend .lh { background: var(--rp-green); }
.rp-legend .lm { background: var(--rp-red); }
.rp-ctrl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rp-ctrl .rp-btn { padding: 9px 13px; font-size: 13px; }

/* Recapitulatif de la simulation */
.rp-sum-t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rp-sum-t th, .rp-sum-t td { padding: 9px 8px; text-align: left; border-top: 1px solid var(--rp-border); color: var(--rp-ink); }
.rp-sum-t th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--rp-muted); border-top: 0; }
.rp-sum-t td.n { font-variant-numeric: tabular-nums; font-weight: 800; }
.rp-btn--sm { padding: 7px 11px; font-size: 12.5px; }
.rp-sum-msg { display: none; }
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
    .rp-detail .rp-sum-msg { display: block; margin: -2px 0 6px; font-size: 14px; font-weight: 600; color: var(--rp-ink); }
}
/* « Tourne ton telephone » : seulement sur telephone tenu en portrait (plus bas). */
.rp-rotate { display: none; }
.rp-btn:active { transform: scale(.98); }
/* Sur ecran tactile, le doigt cache le point touche : une onde plus grande. */
@media (pointer: coarse) {
    .rp-ripple { width: 78px; height: 78px; margin: -39px 0 0 -39px; border-width: 4px; }
    .rp-btn--sm { min-height: 40px; padding: 8px 12px; font-size: 13px; }
}

/* ---- Telephone, en portrait (et petites fenetres) --------------------------------------
   La video est au format 2:1 : en portrait elle ne peut pas depasser la largeur
   de l'ecran. On lui donne donc toute la largeur (bord a bord), on la met au
   milieu de l'ecran pendant le film (sous le pouce), on retire ce qui fait
   doublon (l'ecran pose sur la video pendant la question et le resultat), et
   on propose de tourner le telephone pour une video bien plus grande. */
@media (max-width: 640px) {
    .rp-bar { gap: 8px; padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 6px max(14px, env(safe-area-inset-left)); }
    .rp-bar-t { font-size: 15px; }
    .rp-bar-m { display: none; }
    .rp-bar-act { gap: 6px; }
    .rp-ico { width: 44px; height: 44px; border-radius: 12px; }
    .rp-ico svg { width: 21px; height: 21px; }
    .rp-main { gap: 0; padding: 0 0 calc(18px + env(safe-area-inset-bottom)); }
    .rp-stage { width: 100%; border-radius: 0; box-shadow: none; }
    .rp-dock { padding: 12px 12px 0; gap: 10px; }
    .rp-dock-l { font-size: 13px; }
    .rp-dots { gap: 6px; }
    .rp-dots i { width: 28px; height: 28px; font-size: 12px; }
    .rp-panel { padding: 12px 10px 0; }

    .rp-cover { padding: 10px; }
    .rp-cover-c { padding: 14px 16px; gap: 10px; border-radius: 16px; }
    .rp-cover h3 { font-size: 1.12rem; }
    .rp-cover .rp-long { display: none; }
    .rp-rules {
        display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px;
        background: #fff; border: 1px solid var(--rp-border); font-size: 14.5px; line-height: 1.6; color: var(--rp-muted);
    }
    .rp-rules p { margin: 0; }
    .rp-rules .rp-small { font-size: 13px; }

    /* Decompte et film : la video au milieu de l'ecran, les consignes s'effacent. */
    .rp-app[data-st="count"] .rp-stage, .rp-app[data-st="playing"] .rp-stage { margin-top: auto; }
    .rp-app[data-st="count"] .rp-dock, .rp-app[data-st="playing"] .rp-dock { margin-bottom: auto; padding-bottom: 12px; }
    .rp-app[data-st="count"] .rp-panel { display: none; }
    /* Question, resultat, recapitulatif : la video n'a plus rien a montrer. */
    .rp-app[data-st="question"] .rp-stage, .rp-app[data-st="result"] .rp-stage, .rp-app[data-st="summary"] .rp-stage { display: none; }
    /* Correction : la video reste en haut pendant qu'on lit les explications. */
    .rp-app[data-st="review"] .rp-stage { position: sticky; top: 0; z-index: 4; box-shadow: 0 8px 18px rgba(16, 42, 69, .18); }

    .rp-q, .rp-detail, .rp-score { padding: 14px; border-radius: 14px; }
    .rp-q-head { gap: 12px; }
    .rp-q-head h3 { font-size: 1.2rem; }
    .rp-q-head p { font-size: 13px; }
    .rp-timer { width: 48px; height: 48px; flex: 0 0 48px; }
    .rp-opt { min-height: 58px; padding: 12px; font-size: 15px; }
    .rp-opt .l { flex: 0 0 32px; width: 32px; height: 32px; }
    .rp-q-foot .rp-btn { width: 100%; min-height: 50px; font-size: 16px; }

    /* Score en une ligne : le chiffre a gauche, le verdict a droite. */
    .rp-score { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 18px; text-align: left; padding: 14px 18px; }
    .rp-score .big { grid-row: span 3; font-size: 2.6rem; }
    .rp-score .lab { margin-top: 0; font-size: 14px; }
    .rp-verdict { justify-self: start; margin-top: 6px; }
    .rp-saved { margin-top: 4px; font-size: 12.5px; }

    /* Boutons de fin : deux par ligne, le principal sur toute la largeur ;
       un bouton seul sur sa ligne la prend toute. */
    .rp-actions { gap: 8px; }
    .rp-actions .rp-btn { flex: 1 1 calc(50% - 4px); min-width: 0; min-height: 48px; padding: 10px; text-align: center; }
    .rp-actions .rp-btn--pri { flex-basis: 100%; }

    .rp-auto { font-size: 14px; }
    .rp-ctrl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .rp-ctrl .rp-btn { min-height: 44px; padding: 10px 8px; font-size: 14px; }
    .rp-tl { height: 42px; }
    .rp-legend { gap: 6px 14px; font-size: 12.5px; }
    .rp-hz b { font-size: 15px; }
    .rp-hz p { font-size: 14px; }
    .rp-hz .rp-small { font-size: 12.5px; }
    .rp-line { font-size: 13.5px; }
    .rp-answer-ok { font-size: 15px; }
    .rp-answer-ko { font-size: 14.5px; }

    /* Recapitulatif de l'examen : une carte par film au lieu d'un tableau. */
    .rp-sum-t thead { display: none; }
    .rp-sum-t, .rp-sum-t tbody { display: block; }
    .rp-sum-t tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; padding: 12px 0; border-top: 1px solid var(--rp-border); }
    .rp-sum-t tr:first-child { border-top: 0; }
    .rp-sum-t td { padding: 0; border: 0; }
    .rp-sum-t td:first-child { font-weight: 800; }
    .rp-sum-t td:nth-child(2) { color: var(--rp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rp-sum-t td:nth-child(4) { grid-column: 1 / -1; }
    .rp-sum-t td:nth-child(4):empty { display: none; }
    .rp-sum-t td:nth-child(4) .rp-btn { width: 100%; min-height: 44px; font-size: 14px; }
}
@media (max-width: 640px) and (orientation: portrait) {
    .rp-rotate {
        display: flex; align-items: center; gap: 12px; margin: 10px 0 0; padding: 12px 14px; border-radius: 14px;
        background: var(--rp-green-bg); border: 1px solid var(--rp-green-bd); color: var(--rp-ink); font-size: 14px; font-weight: 600; line-height: 1.45;
    }
    .rp-rotate svg { flex: 0 0 28px; width: 28px; height: 28px; color: var(--rp-green-tx); }
}

/* ---- Telephone, en paysage ---------------------------------------------------------------
   La video prend toute la hauteur disponible. Le compteur de clics monte dans
   la barre (le JS l'y deplace), la barre s'amincit, et le contenu recule de
   l'encoche. Meme requete que MQ_LAND dans tpr-player.js. */
@media (max-height: 500px) and (orientation: landscape) {
    .rp-bar { gap: 10px; padding: max(4px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 4px max(14px, env(safe-area-inset-left)); }
    .rp-bar-t { font-size: 14.5px; }
    .rp-bar-m { display: none; }
    .rp-ico { width: 40px; height: 40px; }
    .rp-bar .rp-dock { width: auto; min-height: 0; flex: 0 0 auto; flex-wrap: nowrap; margin-left: auto; gap: 8px; }
    .rp-bar .rp-dots i { width: 24px; height: 24px; font-size: 11px; }
    .rp-bar .rp-dock-l { font-size: 12.5px; white-space: nowrap; }
    .rp-main { gap: 8px; padding: 6px max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
    /* 49 px de barre, 6 px au-dessus de la video, 8 px ou la barre d'accueil dessous */
    .rp-stage { border-radius: 10px; width: min(100%, calc((100vh - 64px) * 2)); }
    .rp-stage { width: min(100%, calc((100dvh - 56px - max(8px, env(safe-area-inset-bottom))) * 2)); }
    .rp-app[data-st="count"] .rp-stage, .rp-app[data-st="playing"] .rp-stage { margin-top: auto; margin-bottom: auto; }
    /* Consignes : elles sont sur la video ; le panneau (consignes du portrait) se retire. */
    .rp-app[data-st="intro"] .rp-panel, .rp-app[data-st="count"] .rp-panel { display: none; }

    .rp-cover { padding: 10px; }
    .rp-cover .rp-long { display: flex; }
    .rp-cover-c { max-width: 36rem; padding: 14px 20px; gap: 8px; }
    .rp-cover h3 { font-size: 1.15rem; }
    .rp-cover p { font-size: 13.5px; line-height: 1.5; }
    .rp-cover .rp-small { font-size: 12.5px; }
    .rp-cover .rp-btn { padding: 11px 22px; }

    .rp-app[data-st="question"] .rp-stage, .rp-app[data-st="result"] .rp-stage, .rp-app[data-st="summary"] .rp-stage { display: none; }
    .rp-q { padding: 12px 14px; }
    .rp-q-head { margin-bottom: 10px; }
    .rp-q-head h3 { font-size: 1.15rem; }
    .rp-timer { width: 46px; height: 46px; flex: 0 0 46px; }
    .rp-opts { grid-template-columns: 1fr 1fr; }
    .rp-opt { min-height: 54px; padding: 10px 12px; }
    .rp-q-foot { margin-top: 10px; }
    .rp-q-foot .rp-btn { min-width: 220px; min-height: 46px; }
    .rp-res { grid-template-columns: 230px minmax(0, 1fr); align-items: start; }
    .rp-actions .rp-btn { flex: 1 1 auto; min-height: 44px; }

    /* Correction : la video a gauche, qui reste en place ; les boutons,
       la frise et les explications a droite, qui defilent. */
    .rp-app[data-st="review"] .rp-main { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; gap: 10px 12px; }
    .rp-app[data-st="review"] .rp-stage { position: sticky; top: 0; width: 100%; }
    .rp-app[data-st="review"] .rp-panel { width: auto; min-width: 0; }
    .rp-app[data-st="review"] .rp-res { grid-template-columns: minmax(0, 1fr); }
    .rp-app[data-st="review"] .rp-detail, .rp-app[data-st="review"] .rp-score { padding: 12px; }
    /* Score en une ligne : les boutons de lecture restent visibles sans defiler. */
    .rp-app[data-st="review"] .rp-score { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; text-align: left; padding: 10px 14px; }
    .rp-app[data-st="review"] .rp-score .big { grid-row: span 3; font-size: 2.2rem; }
    .rp-app[data-st="review"] .rp-score .lab { margin-top: 0; }
    .rp-app[data-st="review"] .rp-verdict { justify-self: start; margin-top: 4px; padding: 4px 12px; }
    .rp-app[data-st="review"] .rp-saved { margin-top: 2px; }
    .rp-app[data-st="review"] .rp-auto { padding: 8px 12px; font-size: 13.5px; }
    .rp-saved { font-size: 12.5px; }
    .rp-app[data-st="review"] .rp-actions .rp-btn { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 9px 8px; text-align: center; }
    .rp-app[data-st="review"] .rp-actions .rp-btn--pri { flex-basis: 100%; }
    .rp-ctrl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .rp-ctrl .rp-btn { min-height: 42px; padding: 8px 6px; font-size: 13.5px; }
    .rp-tl { height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .rp-count, .rp-dots i.last, .rp-ripple, .rp-modal-box { animation: none; }
}

/* ============================================================================
   PAGE PUBLIQUE (refonte du 2026-09-28) : heros avec une vraie image de nos
   videos, avis Google, simulateur d'examen explicite, sections Format clic /
   Format question, ce qu'on clique, FAQ. Toujours la palette claire du site.
   ============================================================================ */
#rp .rp-top { display: grid; gap: 26px; padding: 30px 0 8px; align-items: center; }
@media (min-width: 980px) { #rp .rp-top { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; } }
#rp .rp-top h1 {
    margin: 0 0 .75rem; font-size: clamp(1.75rem, 3.6vw, 2.7rem); font-weight: 900; line-height: 1.08;
    letter-spacing: -.025em; color: var(--rp-ink); text-wrap: balance;
}
#rp .rp-top h1 em { font-style: normal; color: var(--rp-green-tx); }
#rp .rp-lead { margin: 0 0 18px; max-width: 40rem; color: var(--rp-muted); font-size: 1.02rem; line-height: 1.65; }
#rp .rp-lead b { color: var(--rp-ink); }
#rp .rp-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
#rp .rp-ctas .rp-btn { padding: 14px 20px; font-size: 15px; }
#rp .rp-ctas svg { width: 18px; height: 18px; flex: 0 0 18px; }

/* Avis Google : note, etoiles, nombre d'avis, puis quelques extraits. */
#rp .rp-gr { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--rp-border); text-decoration: none; color: var(--rp-ink); box-shadow: 0 4px 14px rgba(16, 42, 69, .05); }
#rp .rp-gr:hover { border-color: var(--rp-green); }
#rp .rp-gr-g { width: 22px; height: 22px; flex: 0 0 22px; }
#rp .rp-gr-n { font-size: 1.15rem; font-weight: 900; }
#rp .rp-stars { display: inline-flex; gap: 1px; color: #f5b301; font-size: 15px; letter-spacing: 1px; }
#rp .rp-gr small { font-size: 12.5px; color: var(--rp-muted); font-weight: 600; }

/* L'image de demonstration : une vraie image d'une de nos videos, la zone
   verte ou il fallait cliquer, le pointeur et le point gagne. */
#rp .rp-demo { position: relative; margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 2 / 1; background: #dfe7f0; box-shadow: 0 22px 50px rgba(16, 42, 69, .18); border: 4px solid #fff; }
#rp .rp-demo img { width: 100%; height: 100%; object-fit: cover; display: block; }
#rp .rp-demo-zone { position: absolute; border: 3px solid #8cc63f; border-radius: 12px; background: rgba(140, 198, 63, .22); box-shadow: 0 0 0 2px rgba(15, 43, 70, .35); animation: rpZone 2.4s ease-in-out infinite; }
@keyframes rpZone { 50% { background: rgba(140, 198, 63, .36); } }
#rp .rp-demo-tag { position: absolute; left: -3px; top: -30px; padding: 4px 9px; border-radius: 7px; background: #8cc63f; color: #0f2b46; font-size: 12px; font-weight: 800; white-space: nowrap; }
#rp .rp-demo-ptr { position: absolute; width: 30px; height: 30px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); }
#rp .rp-demo-pt { position: absolute; right: 12px; top: 12px; padding: 7px 12px; border-radius: 99px; background: #fff; color: var(--rp-green-tx); font-size: 13px; font-weight: 900; box-shadow: var(--rp-shadow); }
#rp .rp-demo-cap { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, .92); color: var(--rp-ink); font-size: 12px; font-weight: 700; }
/* Variante « question » : une carte de quiz posee sur l'image. */
#rp .rp-demo-q { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); width: min(88%, 380px); padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .96); box-shadow: var(--rp-shadow); }
#rp .rp-demo-q b { display: block; margin-bottom: 8px; font-size: 14px; color: var(--rp-ink); }
#rp .rp-demo-q span { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-top: 5px; border-radius: 8px; font-size: 12.5px; color: var(--rp-ink); background: var(--rp-card-2); border: 1px solid var(--rp-border); }
#rp .rp-demo-q span.on { border-color: var(--rp-green); background: var(--rp-green-bg); font-weight: 700; }
#rp .rp-demo-q i { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 5px; font-style: normal; font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--rp-border-2); }
#rp .rp-demo-q span.on i { background: var(--rp-green); border-color: var(--rp-green); color: #0f2b46; }

/* Le simulateur d'examen : une carte qu'on ne peut pas confondre. */
#rp .rp-sim {
    display: grid; gap: 18px; align-items: center; margin: 22px 0 8px; padding: 22px; border-radius: 20px;
    background: linear-gradient(135deg, #ffffff 0%, #f1f8e6 100%); border: 2px solid var(--rp-green); box-shadow: var(--rp-shadow);
}
@media (min-width: 860px) { #rp .rp-sim { grid-template-columns: minmax(0, 1fr) auto; padding: 24px 28px; } }
#rp .rp-sim-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--rp-green-tx); }
#rp .rp-sim h2 { margin: 4px 0 6px; font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 900; color: var(--rp-ink); }
#rp .rp-sim p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--rp-muted); max-width: 44rem; }
#rp .rp-sim ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
#rp .rp-sim li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--rp-border); font-size: 13px; color: var(--rp-ink); }
#rp .rp-sim li b { font-weight: 900; color: var(--rp-green-tx); }
#rp .rp-sim .rp-btn { padding: 16px 24px; font-size: 16px; white-space: nowrap; }
#rp .rp-sim .rp-btn svg { width: 20px; height: 20px; flex: 0 0 20px; }

/* Sections de contenu (SEO) */
#rp .rp-sec { margin-top: 46px; }
#rp .rp-sec > h2 { margin: 0 0 10px; font-size: clamp(1.3rem, 2.6vw, 1.75rem); font-weight: 900; letter-spacing: -.015em; color: var(--rp-ink); }
#rp .rp-sec > p { margin: 0 0 12px; max-width: 52rem; color: var(--rp-muted); font-size: .98rem; line-height: 1.7; }
#rp .rp-duo { display: grid; gap: 22px; align-items: center; margin-top: 16px; }
@media (min-width: 900px) { #rp .rp-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; } #rp .rp-duo--rev .rp-duo-tx { order: 2; } }
#rp .rp-duo-tx h2 { margin: 0 0 10px; font-size: clamp(1.3rem, 2.6vw, 1.75rem); font-weight: 900; letter-spacing: -.015em; color: var(--rp-ink); }
#rp .rp-duo-tx h3 { margin: 18px 0 6px; font-size: 1.02rem; font-weight: 800; color: var(--rp-ink); }
#rp .rp-duo-tx p { margin: 0 0 10px; color: var(--rp-muted); font-size: .97rem; line-height: 1.7; }
#rp .rp-duo-tx small { display: inline-block; margin-top: 4px; padding: 5px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: var(--rp-green-tx); background: var(--rp-green-bg); }
#rp .rp-ticks { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
#rp .rp-ticks li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.55; color: var(--rp-ink); }
#rp .rp-ticks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--rp-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%230f2b46' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
#rp .rp-ticks--no li::before { background: #f3d6d3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%23c62d23' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
#rp .rp-cols { display: grid; gap: 14px; margin-top: 14px; }
@media (min-width: 820px) { #rp .rp-cols { grid-template-columns: 1fr 1fr; } }
#rp .rp-box { padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--rp-border); }
#rp .rp-box h3 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 800; color: var(--rp-ink); }
#rp .rp-regions { width: 100%; border-collapse: collapse; margin-top: 14px; background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid var(--rp-border); font-size: 14px; }
#rp .rp-regions th, #rp .rp-regions td { padding: 11px 14px; text-align: left; border-top: 1px solid var(--rp-border); color: var(--rp-ink); vertical-align: top; }
#rp .rp-regions th { background: var(--rp-card-2); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--rp-muted); border-top: 0; }
#rp .rp-regions td b { color: var(--rp-green-tx); }

/* FAQ */
#rp .rp-faq { margin-top: 14px; display: grid; gap: 10px; }
#rp .rp-faq details { border-radius: 14px; background: #fff; border: 1px solid var(--rp-border); }
#rp .rp-faq details[open] { border-color: var(--rp-green-bd); box-shadow: 0 6px 18px rgba(16, 42, 69, .06); }
#rp .rp-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; font-size: 15px; font-weight: 800; color: var(--rp-ink); }
#rp .rp-faq summary::-webkit-details-marker { display: none; }
#rp .rp-faq summary::after { content: "+"; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: var(--rp-green-tx); background: var(--rp-green-bg); }
#rp .rp-faq details[open] summary::after { content: "\2212"; }
#rp .rp-faq .rp-faq-a { padding: 0 18px 16px; color: var(--rp-muted); font-size: 14.5px; line-height: 1.7; }
#rp .rp-faq .rp-faq-a p { margin: 0 0 8px; }
#rp .rp-faq a, #rp .rp-sec a, #rp .rp-duo-tx a { color: var(--rp-green-tx); font-weight: 700; }

/* Dernier appel */
#rp .rp-end { margin-top: 46px; padding: 28px 24px; border-radius: 20px; text-align: center; background: linear-gradient(135deg, #ffffff 0%, #eaf5dc 100%); border: 2px solid var(--rp-green-bd); }
#rp .rp-end h2 { margin: 0 0 8px; font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 900; color: var(--rp-ink); }
#rp .rp-end p { margin: 0 auto 16px; max-width: 38rem; color: var(--rp-muted); font-size: 15px; line-height: 1.6; }
#rp .rp-end .rp-ctas { justify-content: center; margin: 0; }
@media (max-width: 640px) {
    #rp .rp-top { padding-top: 18px; }
    #rp .rp-top .rp-eyebrow { font-size: 10.5px; letter-spacing: .05em; }
    #rp .rp-ctas .rp-btn { flex: 1 1 100%; }
    #rp .rp-demo-q { display: none; }
    #rp .rp-sim .rp-btn { width: 100%; white-space: normal; }
}

/* ============================================================================
   iPhone : sections publiques (audit du 2026-09-29). Le lecteur est plus haut.
   ============================================================================ */
/* Paysage (viewport-fit=cover) : le texte ne passe plus sous l'encoche. */
#rp .container {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
}
/* Titres et questions de FAQ : pas de mot seul sur la derniere ligne. */
#rp h2, #rp h3, #rp .rp-faq summary { text-wrap: balance; }
/* Les ancres ne se cachent plus sous le menu colle (103 a 113 px). */
#rp section[id], #rp .rp-list { scroll-margin-top: 124px; }
/* « Pour aller plus loin » : toute la carte est cliquable ; texte de 12 px au moins. */
#rp #plus-loin .rp-box { position: relative; }
#rp #plus-loin .rp-box h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
#rp .rp-sim small { font-size: 12.5px; }
#rp .rp-n, #rp .rp-st { font-size: 12px; }
/* Ecran tactile : cibles de 44 px. */
@media (hover: none) and (pointer: coarse) {
    #rp .rp-filters button { min-height: 44px; }
    #rp .rp-adm-act a { display: inline-flex; align-items: center; min-height: 44px; }
    .rp-modal-x { width: 44px; height: 44px; }
}
/* Fenetres : hauteur de l'ecran VISIBLE (100vh passe sous la barre de Safari),
   zones sures, et la page derriere ne defile plus. */
.rp-modal {
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
             max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.rp-modal-box { max-height: 100%; overscroll-behavior: contain; }
@media (hover: none) and (pointer: coarse) {
    body:has(> .rp-modal:not([hidden])) { overflow: hidden; }
}
/* Icones des formats en vert (.rp-mode span les rendait grises). */
.rp-mode .rp-mode-ic { color: var(--rp-green-tx); }
/* Choix du format compact : icone a gauche du titre, image plus basse ou masquee. */
@media (max-width: 480px), (max-height: 500px) {
    .rp-mode { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; row-gap: 3px; align-content: start; padding: 12px 14px; }
    .rp-mode .rp-mode-ic { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
    .rp-mode > b, .rp-mode > span:not(.rp-mode-ic), .rp-mode > small { grid-column: 2; }
}
@media (max-width: 480px) { .rp-modal-img { aspect-ratio: 3 / 1; } }
@media (max-height: 500px) {
    .rp-modal-img { display: none; }
    .rp-modal-n { margin-right: 64px; }
    .rp-soon-box { padding-top: 22px; }
    .rp-soon-ic { width: 46px; height: 46px; }
}
/* Fenetre « bientot » : deux boutons pleine largeur. */
@media (max-width: 480px) { .rp-soon-act .rp-btn { flex: 1 1 100%; } }
/* Images de demonstration : legende SOUS l'image (elle masquait la zone et le
   pointeur), etiquette calee a droite (coupee en NL), carte QCM sous la photo. */
@media (max-width: 640px), (orientation: landscape) and (max-height: 500px) {
    #rp .rp-demo { overflow: visible; margin-bottom: 26px; }
    #rp .rp-demo img { border-radius: 14px; }
    #rp .rp-demo-cap { top: calc(100% + 8px); bottom: auto; left: 0; padding: 0; background: none; color: var(--rp-muted); font-size: 12.5px; font-weight: 600; }
    #rp .rp-demo-tag { left: auto; right: -3px; }
    #rp .rp-duo--rev .rp-demo { aspect-ratio: auto; margin-bottom: 0; }
    #rp .rp-duo--rev .rp-demo img { height: auto; aspect-ratio: 2 / 1; border-radius: 14px 14px 0 0; }
    #rp .rp-duo--rev .rp-demo-q { display: block; position: static; transform: none; width: auto; border-radius: 0 0 14px 14px; box-shadow: none; padding: 12px 10px 8px; }
    #rp .rp-demo-q i { font-size: 12px; }
}
@media (max-width: 640px) {
    /* Bouton d'examen et dernier appel sur une ligne. */
    #rp .rp-sim { padding: 20px 16px; }
    #rp .rp-sim .rp-btn, #rp .rp-end .rp-ctas .rp-btn { padding: 14px 16px; font-size: 15px; }
    #rp .rp-end { padding: 24px 16px; }
    /* Grille sur deux colonnes (sur une colonne, elle faisait la moitie de la page). */
    #rp .rp-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    #rp .rp-body { padding: 9px 10px 10px; }
    #rp .rp-body b { font-size: .92rem; }
    #rp .rp-ctx { font-size: 12px; }
    #rp .rp-lockic { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
    #rp .rp-lockic svg { width: 17px; height: 17px; }
    #rp .rp-free { left: 6px; top: 6px; }
    #rp .rp-dur { right: 6px; bottom: 6px; }
}
/* Surtitre sur deux lignes equilibrees (iPhone SE). */
@media (max-width: 380px) {
    #rp .rp-top .rp-eyebrow { font-size: 11.5px; letter-spacing: .04em; line-height: 1.45; border-radius: 12px; text-wrap: balance; }
}
/* Paysage : 3 colonnes malgre les marges d'encoche ; image entiere sous le menu. */
@media (orientation: landscape) and (max-height: 500px) {
    #rp .rp-grid { grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); }
    #rp .rp-demo { width: 100%; max-width: 500px; justify-self: center; }
}