/* ==========================================================================
   Rouler Mieux — thème de la plateforme (chargé après app.css, uniquement
   sous le nom de domaine Rouler Mieux, voir views/partials/head.ejs).
   Vert forêt = confiance, jaune soleil = action, fond vert d'eau très doux.
   ========================================================================== */
body.rm {
  --bg: #F6F9F7;
  --surface: #FFFFFF;
  --surface-2: #EEF4F0;
  --navy: #0F2019;
  --navy-2: #1C3A2E;
  --navy-deep: #0C211A;
  --blue: #14593F;
  --blue-hover: #0E4631;
  --blue-soft: #DDF1E5;
  --blue-line: #BFE3CE;
  --sage: #1E8A55;
  --sage-dark: #166B42;
  --sage-soft: #DDF1E5;
  --sage-line: #BFE3CE;
  --ink: #0F2019;
  --ink-2: #4C5E57;
  --ink-3: #6E7F78;
  --line: #E3EBE6;
  --line-2: #D7E2DB;
  --r-sm: 12px;
  --r-md: 22px;
  --r-lg: 28px;
  --shadow-1: 0 1px 2px rgba(12, 33, 26, .04);
  --shadow-2: 0 1px 2px rgba(12, 33, 26, .05), 0 18px 40px -22px rgba(12, 33, 26, .22);
  --shadow-3: 0 2px 6px rgba(12, 33, 26, .05), 0 26px 56px -26px rgba(12, 33, 26, .3);
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rm-sun: #FFC83D;
  --rm-sun-ink: #2B2100;
  --rm-night: #0C211A;
  --rm-night-ink: #EAF3EE;
  --rm-mid: #E8A400;
  --rm-no: #C2502B;
  --chart-done: #E8A400;
  font-feature-settings: normal;
}
body.rm h1, body.rm h2, body.rm h3, body.rm .display { letter-spacing: -.03em; }
body.rm ::selection { background: var(--blue-soft); color: var(--ink); }
body.rm :focus-visible { outline-color: rgba(255, 200, 61, .9); }

/* En-tête */
body.rm .topbar { background: rgba(246, 249, 247, .82); border-bottom-color: var(--line); }
body.rm .nav a:hover { background: var(--surface-2); color: var(--ink); }
body.rm .nav a.active { background: var(--blue-soft); color: var(--blue); }
body.rm .avatar { background: var(--blue); color: #fff; border-color: var(--blue); }
body.rm .avatar:hover { background: var(--blue-hover); color: #fff; }

/* Boutons : le bouton principal d'action est jaune soleil, comme sur le site */
body.rm .btn { box-shadow: none; }
body.rm .btn.large, body.rm .btn.sun { background: var(--rm-sun); color: var(--rm-sun-ink); box-shadow: 0 10px 22px -12px rgba(255, 200, 61, .9); }
body.rm .btn.large:hover, body.rm .btn.sun:hover { background: #F4BA25; color: var(--rm-sun-ink); }
body.rm .btn.secondary { border-color: var(--line); }
body.rm .btn.navy { background: var(--rm-night); }

/* Cartes et vignettes : paysage Rouler Mieux à la place des dégradés bleus */
body.rm .cover {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 225' preserveAspectRatio='xMidYMax slice'%3E%3Ccircle cx='300' cy='62' r='20' fill='%23FFC83D'/%3E%3Cpath d='M0 120 C 80 100 160 118 240 106 S 360 96 400 104 V225 H0Z' fill='%23BFE3CE'/%3E%3Cpath d='M0 160 C 100 140 200 160 300 150 S 380 145 400 150 V225 H0Z' fill='%2386C7A2'/%3E%3Cpath d='M150 225 C 185 190 205 150 210 112 L 216 112 C 222 150 245 190 280 225Z' fill='%232A3A34'/%3E%3Cpath d='M213 112 L213 225' stroke='%23FFC83D' stroke-width='2' stroke-dasharray='7 7'/%3E%3Cpath d='M0 200 C 120 188 260 205 400 192 V225 H0Z' fill='%233E9A6C'/%3E%3C/svg%3E") center bottom / cover no-repeat,
    linear-gradient(180deg, #E6F4EE, #F7F3E6);
}
body.rm .cover .ph { display: none; }
body.rm .cover .done-mark { background: var(--sage); }
body.rm .tile.resume { border: 0; box-shadow: var(--shadow-2); }
body.rm .resume .kicker { color: var(--blue); }
body.rm .course-card { border-radius: var(--r-md); }
body.rm .progress { background: var(--line); }
body.rm .progress > span { background: var(--blue); }
body.rm .hybrid-tile { border-color: var(--line); }
body.rm .footer { color: var(--ink-3); }

/* Défi 21 jours : couleurs du site (nuit, soleil) au lieu du bleu marine */
body.rm .defi-hero { background: var(--rm-night); color: var(--rm-night-ink); border-radius: var(--r-lg); }
body.rm .defi-hero .eyebrow, body.rm .defi-day { color: var(--rm-sun); }
body.rm .defi-hero p, body.rm .defi-hero .legend { color: rgba(234, 243, 238, .78); }
body.rm .dday.oui { background: var(--sage); border-color: var(--sage); }
body.rm .dday.partiel { background: var(--rm-mid); border-color: var(--rm-mid); color: var(--rm-sun-ink); }
body.rm .dday.non { background: var(--rm-no); border-color: var(--rm-no); }
body.rm .dday.today { box-shadow: 0 0 0 3px var(--rm-sun); }
body.rm .mission { border-color: var(--blue); border-radius: var(--r-lg); }
body.rm .mission .tag { background: var(--rm-sun); color: var(--rm-sun-ink); }
body.rm .choices label { border-radius: 18px; }
body.rm .choices label:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
body.rm .teams li.me .rk { background: var(--rm-sun); color: var(--rm-sun-ink); }
body.rm .bar span { background: var(--sage); }

/* Barre d'onglets en bas de l'écran, sur téléphone (espace apprenant) */
.rm-tabbar { display: none; }
@media (max-width: 760px) {
  body.rm.has-tabbar .container { padding-bottom: 96px; }
  body.rm.has-tabbar .topbar .nav { display: none; }
  body.rm .rm-tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  body.rm .rm-tabbar a { display: grid; justify-items: center; gap: 2px; padding: 6px 0; font-size: .72rem; font-weight: 600; color: var(--ink-3); border-radius: 12px; }
  body.rm .rm-tabbar a .icon { width: 22px; height: 22px; }
  body.rm .rm-tabbar a.active { color: var(--blue); }
  body.rm .install-hint { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   Leçons Rouler Mieux : blocs pédagogiques plus visuels et plus engageants
   ========================================================================== */
body.rm .rm-read { position: fixed; left: 0; top: 0; height: 4px; width: 0; z-index: 60; background: linear-gradient(90deg, var(--sage), var(--rm-sun)); transition: width .15s linear; }
body.rm .player-head .status-dot.type { background: var(--blue-soft); color: var(--blue); }
body.rm .lesson-title { display: flex; align-items: center; gap: 16px; }
body.rm .lesson-num { flex: none; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 1.6rem; font-weight: 800; color: var(--rm-sun-ink); background: var(--rm-sun); box-shadow: 0 10px 22px -12px rgba(232, 164, 0, .9); transform: rotate(-4deg); }
body.rm .lesson { font-size: 1.06rem; }
body.rm .lesson h2 { margin-top: 1.6em; }
body.rm .blk-figure img { border-radius: 24px; box-shadow: 0 1px 2px rgba(12, 33, 26, .05), 0 22px 44px -26px rgba(12, 33, 26, .45); width: 100%; }
body.rm .blk-figure figcaption { font-size: .92rem; color: var(--ink-2); font-weight: 500; }
body.rm .blk-label { color: var(--ink); font-weight: 700; letter-spacing: -.01em; }
body.rm .blk-label .icon { color: var(--blue); }

/* Encadrés : « Votre mission » devient un panneau de route, les autres encadrés sont colorés */
body.rm .blk-callout { border-radius: 22px; border: 0; padding: 20px 22px; }
body.rm .blk-callout.info { background: var(--blue-soft); }
body.rm .blk-callout.warning { background: #FFF3D6; }
body.rm .blk-callout.warning .blk-label { color: #7A4B00; }
body.rm .blk-callout.memo, body.rm .blk-callout.summary { background: var(--surface-2); }
body.rm .blk-callout.key { position: relative; overflow: hidden; background: var(--rm-night); color: var(--rm-night-ink); padding: 24px 24px 34px; box-shadow: 0 24px 44px -28px rgba(12, 33, 26, .8); }
body.rm .blk-callout.key .blk-label { color: var(--rm-sun); font-size: 1.05rem; }
body.rm .blk-callout.key .blk-label .icon { color: var(--rm-sun); }
body.rm .blk-callout.key strong { color: #fff; }
body.rm .blk-callout.key::after { content: ""; position: absolute; left: 0; right: 0; bottom: 12px; height: 4px; background: repeating-linear-gradient(90deg, var(--rm-sun) 0 26px, transparent 26px 44px); animation: rmLane 1.6s linear infinite; opacity: .9; }
body.rm .blk-callout.key.mission::before { content: "MISSION"; position: absolute; right: 18px; top: 16px; font-size: .68rem; font-weight: 800; letter-spacing: .14em; color: var(--rm-sun-ink); background: var(--rm-sun); padding: 4px 10px; border-radius: 999px; }
@keyframes rmLane { to { background-position: 44px 0; } }

/* Animation pas à pas : cartes empilées et barre de progression */
body.rm .blk-steps, body.rm .blk-flip, body.rm .blk-check, body.rm .blk-scenario { border-radius: 24px; border: 1px solid var(--line); padding: 22px 24px; box-shadow: 0 1px 2px rgba(12, 33, 26, .04); }
body.rm .blk-steps { background: linear-gradient(180deg, var(--blue-soft), #fff 60%); border: 0; }
body.rm .rm-stepbar { display: grid; grid-auto-flow: column; gap: 6px; margin: 12px 0 4px; }
body.rm .rm-stepbar i { height: 6px; border-radius: 999px; background: rgba(20, 89, 63, .15); transition: background .3s; }
body.rm .rm-stepbar i.on { background: var(--blue); }
body.rm .step { background: #fff; border-radius: 18px; box-shadow: 0 10px 26px -20px rgba(12, 33, 26, .5); }
body.rm .step.on:not(.current) { background: rgba(255, 255, 255, .7); box-shadow: none; }
body.rm .step-n { width: 38px; height: 38px; background: var(--rm-sun); color: var(--rm-sun-ink); font-weight: 800; }
body.rm .step.on:not(.current) .step-n { background: var(--sage); color: #fff; }
body.rm .step.current { animation: rmPop .45s cubic-bezier(.2, .9, .3, 1.3) both; }

/* Cartes à retourner : couleurs alternées et compteur */
body.rm .flip-card { min-height: 170px; }
body.rm .flip-in { min-height: 170px; }
body.rm .flip-front { border-radius: 20px; background: linear-gradient(150deg, var(--blue), #0E4631); font-size: 1.12rem; box-shadow: 0 16px 30px -22px rgba(12, 33, 26, .9); }
body.rm .flip-card:nth-child(4n+2) .flip-front { background: linear-gradient(150deg, var(--rm-night), #1C3A2E); }
body.rm .flip-card:nth-child(4n+3) .flip-front { background: linear-gradient(150deg, #E8A400, var(--rm-sun)); color: var(--rm-sun-ink); }
body.rm .flip-card:nth-child(4n+4) .flip-front { background: linear-gradient(150deg, var(--sage), #3E9A6C); }
body.rm .flip-front::after { content: "↻"; position: absolute; right: 14px; top: 10px; font-size: 1.2rem; opacity: .6; }
body.rm .flip-back { border-radius: 20px; background: #fff; border: 2px solid var(--blue-soft); }
body.rm .flip-card:hover .flip-in { transform: translateY(-3px); }
body.rm .flip-card.flipped:hover .flip-in { transform: rotateY(180deg); }
body.rm .rm-count { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .85rem; font-weight: 600; color: var(--ink-2); background: var(--surface-2); padding: 6px 12px; border-radius: 999px; }
body.rm .rm-count.done { background: var(--blue-soft); color: var(--blue); }

/* Questions et mises en situation */
body.rm .blk-check { border-left: 0; background: #fff; }
body.rm .blk-check[data-poll="1"] { background: linear-gradient(180deg, #FFF8E4, #fff 70%); border-color: #F7E2A6; }
body.rm .blk-scenario { background: linear-gradient(180deg, #E6F4EE, #fff 75%); border-color: #CDE8D8; }
body.rm .choice { border-radius: 16px; padding: 14px 16px; border-width: 2px; border-color: var(--line); transition: transform .15s, border-color .2s, background .2s; }
body.rm .choice:hover:not(:disabled) { border-color: var(--blue); transform: translateY(-1px); }
body.rm .choice.picked .choice-mark { border-color: var(--blue); background: var(--blue); }
body.rm .choice.ok { border-color: var(--sage); background: #E4F5EB; animation: rmPop .4s cubic-bezier(.2, .9, .3, 1.3) both; }
body.rm .choice.ok .choice-mark { border-color: var(--sage); background: var(--sage); box-shadow: inset 0 0 0 3px #E4F5EB; }
body.rm .choice.ko { border-color: var(--rm-no); background: #FBEAE3; animation: rmShake .4s both; }
body.rm .choice-fb { border-radius: 14px; background: var(--surface-2); }
body.rm .choice-sol { border-radius: 16px; background: var(--blue-soft); }
body.rm .blk-exercise { border-radius: 22px; border-color: var(--blue-line); background: #F7FBF8; }
@keyframes rmPop { 0% { transform: scale(.96); } 60% { transform: scale(1.02); } 100% { transform: scale(1); } }
@keyframes rmShake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* Récompenses : confettis et bandeau de fin de leçon */
.rm-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; }
.rm-confetti i { position: absolute; width: 9px; height: 14px; border-radius: 3px; top: -20px; animation: rmFall 1.6s ease-in forwards; }
@keyframes rmFall { to { transform: translate(var(--dx), 105vh) rotate(var(--r)); opacity: .9; } }
body.rm .rm-done { margin-top: 28px; border-radius: 26px; padding: 26px; background: linear-gradient(135deg, var(--blue), #0E4631); color: #fff; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; animation: rmPop .5s both; }
body.rm .rm-done .medal-rm { width: 64px; height: 64px; border-radius: 50%; background: var(--rm-sun); color: var(--rm-sun-ink); display: grid; place-items: center; font-size: 1.8rem; box-shadow: 0 0 0 8px rgba(255, 200, 61, .25); }
body.rm .rm-done h3 { margin: 0 0 4px; color: #fff; font-size: 1.25rem; }
body.rm .rm-done p { margin: 0; color: rgba(255, 255, 255, .85); }
@media (prefers-reduced-motion: reduce) { body.rm .blk-callout.key::after, body.rm .step.current, body.rm .choice.ok, body.rm .choice.ko, body.rm .rm-done, .rm-confetti { animation: none !important; } .rm-confetti { display: none; } }
@media (max-width: 640px) { body.rm .lesson-num { width: 46px; height: 46px; font-size: 1.25rem; border-radius: 14px; } body.rm .blk-steps, body.rm .blk-flip, body.rm .blk-check, body.rm .blk-scenario { padding: 18px 16px; } body.rm .flip-grid { grid-template-columns: 1fr 1fr; } body.rm .flip-front { font-size: 1rem; } }
body.rm .rm-done[hidden] { display: none; }

/* Fin de formation : badges des gestes acquis et « Et après ? » */
body.rm .certificate { position: relative; overflow: hidden; border-radius: 30px; background: linear-gradient(180deg, #E6F4EE, #FFF8E4); border: 0; }
body.rm .certificate .medal { background: var(--rm-sun); color: var(--rm-sun-ink); box-shadow: 0 0 0 10px rgba(255, 200, 61, .25); animation: rmPop .6s cubic-bezier(.2, .9, .3, 1.3) both; }
body.rm .rm-badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 26px; }
body.rm .rm-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 600; font-size: .9rem; box-shadow: 0 8px 20px -16px rgba(12, 33, 26, .6); animation: rmPop .5s cubic-bezier(.2, .9, .3, 1.3) both; }
body.rm .rm-badge:nth-child(2) { animation-delay: .08s; } body.rm .rm-badge:nth-child(3) { animation-delay: .16s; } body.rm .rm-badge:nth-child(4) { animation-delay: .24s; } body.rm .rm-badge:nth-child(5) { animation-delay: .32s; } body.rm .rm-badge:nth-child(6) { animation-delay: .4s; }
body.rm .rm-badge b { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--rm-sun); font-size: 1rem; }
body.rm .rm-kicker { display: inline-block; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rm-sun-ink); background: var(--rm-sun); padding: 4px 10px; border-radius: 999px; }
body.rm .rm-next h2 { margin: 10px 0 6px; }
body.rm .rm-next-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 18px; }
body.rm .rm-next-card { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: 22px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
body.rm .rm-next-card:hover { transform: translateY(-4px); border-color: var(--blue); box-shadow: 0 22px 40px -26px rgba(12, 33, 26, .55); }
body.rm .rm-next-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; background: var(--blue-soft); }
body.rm .rm-next-card:nth-child(2) .rm-next-ico { background: #FFF3D6; } body.rm .rm-next-card:nth-child(3) .rm-next-ico { background: #FBEAE3; } body.rm .rm-next-card:nth-child(4) .rm-next-ico { background: #E4EEF8; }
body.rm .rm-next-card .muted { font-size: .9rem; }
body.rm .rm-next-foot { margin-top: 6px; display: flex; justify-content: space-between; font-weight: 700; }
body.rm .rm-next-foot em { font-style: normal; color: var(--blue); }
@media (prefers-reduced-motion: reduce) { body.rm .rm-badge, body.rm .certificate .medal { animation: none !important; } }
body.rm .rm-next-card .muted { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }