/* Fond animé du hero (remplace le shader WebGL du site d'origine) */
html { scroll-behavior: smooth; }

.hero-shader { overflow: hidden; }
.hero-shader .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .75;
  mix-blend-mode: screen;
  will-change: transform;
}
.hero-shader .blob-1 {
  width: 55%; height: 90%; left: -10%; top: 20%;
  background: radial-gradient(circle, #8a2cf5 0%, rgba(138,44,245,0) 70%);
  animation: blob-a 18s ease-in-out infinite;
}
.hero-shader .blob-2 {
  width: 50%; height: 80%; left: 35%; top: -25%;
  background: radial-gradient(circle, #6a3cf6 0%, rgba(106,60,246,0) 70%);
  animation: blob-b 22s ease-in-out infinite;
}
.hero-shader .blob-3 {
  width: 45%; height: 85%; right: -8%; bottom: -30%;
  background: radial-gradient(circle, #2b7cff 0%, rgba(43,124,255,0) 70%);
  animation: blob-c 20s ease-in-out infinite;
}
@keyframes blob-a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(18%,-12%) scale(1.15); } }
@keyframes blob-b { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-15%,20%) scale(.9); } }
@keyframes blob-c { 0%,100% { transform: translate(0,0) scale(1.05); } 50% { transform: translate(-20%,-15%) scale(1.2); } }

@media (prefers-reduced-motion: reduce) {
  .hero-shader .blob { animation: none; }
}

/* Logos officiels : les fichiers contiennent une marge intégrée,
   compensée ici par des marges négatives (fichiers non modifiés). */
.logo-header {
  display: block;
  height: 56px;
  width: auto;
  margin: -10px 0 -10px -10px;
}
.logo-footer {
  display: block;
  height: 64px;
  width: auto;
  margin: -12px 0 -12px -12px;
}

/* Pied de page : même bleu nuit que le fond du logo « fond sombre » */
.footer-dark { background: #17143f; color: #fdf7ec; }
.footer-dark a { color: #fdf7ec; }
.footer-dark .footer-muted { color: rgba(253, 247, 236, .75); }

/* Accessibilité : lien d'évitement */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: #17233a; color: #fff; padding: 10px 16px; border-radius: 999px;
  font-weight: 600; transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* Bleu renforcé pour petits textes sur fond gris clair (contraste ≥ 4,5:1) */
.text-brand-strong { color: #1655c9; }

/* Navigation des en-têtes */
.nav-link { font-weight: 600; color: #17233a; }
.nav-link:hover { color: #1f6bf2; }
.nav-hide-sm { display: none; }
@media (min-width: 640px) { .nav-hide-sm { display: inline; } }

/* Pied de page : liens */
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 15px; }
.footer-links a { text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom { border-top: 1px solid rgba(253, 247, 236, .15); }

/* Pages légales et contact */
.legal { max-width: 48rem; margin: 0 auto; padding: 40px 20px 64px; font-size: 17px; line-height: 1.7; color: #17233a; }
.legal h1 { font-size: 2.25rem; font-weight: 800; line-height: 1.15; }
.legal h2 { font-size: 1.4rem; font-weight: 800; margin-top: 2.2rem; }
.legal h3 { font-size: 1.1rem; font-weight: 700; margin-top: 1.4rem; }
.legal p, .legal ul, .legal table { margin-top: .8rem; }
.legal ul { list-style: disc; padding-left: 1.4rem; }
.legal li { margin-top: .35rem; }
.legal a { color: #1655c9; text-decoration: underline; text-underline-offset: 3px; }
.legal .updated { color: rgba(23, 35, 58, .7); font-size: 15px; margin-top: .5rem; }
.legal .box { background: #fff; border: 1px solid rgba(23, 35, 58, .1); border-radius: 20px; padding: 20px 24px; margin-top: 1.2rem; }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; }
.legal th, .legal td { text-align: left; border-bottom: 1px solid rgba(23, 35, 58, .12); padding: 8px 6px; vertical-align: top; }
.todo { background: #fff1b8; border-radius: 4px; padding: 0 .3em; font-weight: 600; }
.social-card {
  display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 20px;
  border: 1px solid rgba(23, 35, 58, .1); padding: 20px 24px; margin-top: 16px;
  text-decoration: none !important; color: #17233a !important; transition: transform .2s, box-shadow .2s;
}
.social-card:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -18px rgba(23, 35, 58, .35); }
.social-card .ico { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.social-card strong { display: block; font-size: 1.1rem; }
.social-card span.handle { color: rgba(23, 35, 58, .7); font-size: 15px; }

/* Argument « 5 minutes » */
.anywhere-list { display: grid; gap: 12px; }
.anywhere-item { display: flex; align-items: flex-start; gap: 14px; background: #fff; border-radius: 16px; padding: 16px 18px; box-shadow: 0 18px 40px -24px rgba(23, 35, 58, .35); border: 1px solid rgba(23, 35, 58, .08); }
.anywhere-item .ico { width: 40px; height: 40px; border-radius: 999px; background: #1f6bf2; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.anywhere-item strong { display: block; font-size: 1.05rem; }
.anywhere-item span.sub { color: rgba(23, 35, 58, .72); font-size: 15px; }
.hero-note { margin-top: 14px; font-size: 15px; font-weight: 600; color: #fff; display: flex; align-items: center; gap: 8px; }

/* Page Abonnements */
.plans { display: grid; gap: 12px; margin-top: 1.4rem; }
.plan {
  display: flex; align-items: center; gap: 14px; background: #fff; border: 2px solid rgba(23, 35, 58, .12);
  border-radius: 18px; padding: 16px 18px; cursor: pointer; transition: border-color .2s, box-shadow .2s;
}
.plan:hover { border-color: rgba(31, 107, 242, .5); }
.plan input { width: 20px; height: 20px; accent-color: #1f6bf2; flex-shrink: 0; }
.plan:has(input:checked) { border-color: #1f6bf2; box-shadow: 0 16px 36px -22px rgba(31, 107, 242, .8); }
.plan .p-body { flex: 1; }
.plan .p-name { font-weight: 800; font-size: 1.1rem; display: block; }
.plan .p-desc { color: rgba(23, 35, 58, .72); font-size: 15px; }
.plan .p-price { font-weight: 800; color: #1655c9; white-space: nowrap; font-size: 1.1rem; }
.consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; font-size: 15px; line-height: 1.55; }
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: #1f6bf2; flex-shrink: 0; }
.pay-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 52px; border-radius: 999px; background: #2ee59d; color: #17233a; font-weight: 700; font-size: 1.05rem;
  margin-top: 20px; transition: transform .2s, opacity .2s; border: 0; cursor: pointer;
}
.pay-btn:hover { transform: translateY(-2px); }
.pay-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.methods { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.methods span { background: #fff; border: 1px solid rgba(23, 35, 58, .15); border-radius: 8px; padding: 4px 10px; font-size: 14px; font-weight: 600; }
.notice { border-radius: 14px; padding: 12px 16px; margin-top: 14px; font-weight: 600; font-size: 15px; }
.notice.err { background: #fdecec; color: #a3242a; }
.notice.ok { background: #e3fbf1; color: #0f5a3d; }
.banner-ok { background: #e3fbf1; color: #0f5a3d; border-radius: 18px; padding: 16px 20px; font-weight: 600; margin-bottom: 20px; }

/* Page Compte */
.auth-card { background: #fff; border-radius: 24px; padding: 28px 24px; box-shadow: 0 20px 60px -30px rgba(23, 35, 58, .25); max-width: 480px; margin: 20px auto 0; }
.auth-card h1 { font-size: 1.9rem; }
.field { display: grid; gap: 6px; margin-top: 16px; font-weight: 600; font-size: 15px; }
.field input { border: 1px solid rgba(23, 35, 58, .25); border-radius: 12px; padding: 13px 14px; font-weight: 400; font-size: 16px; background: #fff; }
.field .hint { font-weight: 400; color: rgba(23, 35, 58, .7); font-size: 14px; }
.pass-wrap { position: relative; display: block; }
.pass-wrap input { width: 100%; padding-right: 112px !important; }
.pass-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 10px;
  background: #f2f6fb; color: #1655c9; font-weight: 600; font-size: 14px; border: 0; cursor: pointer;
}
.pass-toggle:hover { background: #e6eef9; }
.tabs { display: flex; gap: 6px; background: #f2f6fb; border-radius: 999px; padding: 4px; margin-top: 18px; }
.tabs button { flex: 1; border-radius: 999px; padding: 10px; font-weight: 700; color: rgba(23, 35, 58, .75); }
.tabs button[aria-selected="true"] { background: #fff; color: #17233a; box-shadow: 0 4px 12px -6px rgba(23, 35, 58, .3); }
.link-btn { color: #1655c9; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; font-size: 15px; background: none; border: 0; cursor: pointer; padding: 0; }
.ghost-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 999px; border: 1px solid rgba(23, 35, 58, .2); background: #fff; padding: 0 20px; font-weight: 600; cursor: pointer; }
.danger-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 999px; border: 0; background: #c62f35; color: #fff; padding: 0 20px; font-weight: 700; cursor: pointer; }
.danger-btn:disabled { opacity: .5; cursor: not-allowed; }
.row-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.demo-banner { background: #fff1b8; color: #5c4400; border-radius: 14px; padding: 12px 16px; font-weight: 600; font-size: 15px; margin-bottom: 18px; }

/* Page Traducteur */
.tr-page { max-width: 64rem; margin: 0 auto; padding: 40px 20px 64px; color: #17233a; }
.tr-page h1 { font-size: 2.25rem; font-weight: 800; line-height: 1.15; }
.tr-lead { margin-top: .8rem; font-size: 17px; line-height: 1.6; color: rgba(23, 35, 58, .75); }
.tr-card { background: #fff; border-radius: 24px; padding: 24px; margin-top: 24px; box-shadow: 0 20px 60px -30px rgba(23, 35, 58, .25); }
.tr-langs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: end; }
.tr-field { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
.tr-field select, .tr-field input { border: 1px solid rgba(23, 35, 58, .25); border-radius: 12px; padding: 12px; font-weight: 400; font-size: 16px; background: #fff; width: 100%; }
.tr-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 999px; background: #f2f6fb; color: #1655c9; border: 0; cursor: pointer; }
.tr-icon-btn:hover { background: #e6eef9; }
.tr-icon-btn:disabled { opacity: .45; cursor: not-allowed; }
.tr-options { margin-top: 16px; border-top: 1px solid rgba(23, 35, 58, .1); padding-top: 12px; }
.tr-options summary { cursor: pointer; font-weight: 700; color: #1655c9; }
.tr-options-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-top: 12px; }
.tr-wide { grid-column: 1 / -1; }
.tr-panes { display: grid; gap: 16px; margin-top: 18px; }
@media (min-width: 768px) { .tr-panes { grid-template-columns: 1fr 1fr; } }
.tr-pane { display: flex; flex-direction: column; border: 1px solid rgba(23, 35, 58, .15); border-radius: 18px; min-height: 220px; overflow: hidden; }
.tr-pane textarea { flex: 1; border: 0; resize: vertical; padding: 16px; font-size: 18px; line-height: 1.55; min-height: 170px; font-family: inherit; color: inherit; }
.tr-out { background: #f7f9fd; }
#tr-output { flex: 1; padding: 16px; font-size: 20px; line-height: 1.55; font-weight: 600; white-space: pre-wrap; }
#tr-output.tr-placeholder { color: rgba(23, 35, 58, .45); font-weight: 400; font-size: 18px; }
.tr-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-top: 1px solid rgba(23, 35, 58, .08); }
.tr-out .tr-bar { justify-content: flex-end; }
.tr-mic { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 999px; border: 0; background: #1f6bf2; color: #fff; font-weight: 700; cursor: pointer; }
.tr-mic:disabled { background: #9db3d6; cursor: not-allowed; }
.tr-mic-on { background: #c62f35; animation: tr-pulse 1.4s ease-in-out infinite; }
@keyframes tr-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(198, 47, 53, .45); } 50% { box-shadow: 0 0 0 10px rgba(198, 47, 53, 0); } }
@media (prefers-reduced-motion: reduce) { .tr-mic-on { animation: none; } }
.tr-muted { color: rgba(23, 35, 58, .7); font-size: 14px; }
.tr-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.tr-auto { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.tr-auto input { width: 20px; height: 20px; accent-color: #1f6bf2; }
.tr-go { width: auto; margin-top: 0; padding: 0 32px; }
.tr-quota { margin-top: 20px; background: #f2f6fb; border-radius: 16px; padding: 14px 16px; }
.tr-quota-head { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }
.tr-quota-track { height: 10px; border-radius: 999px; background: rgba(23, 35, 58, .1); overflow: hidden; margin: 10px 0 8px; }
#tr-quota-fill { height: 100%; width: 0; border-radius: 999px; background: #1f6bf2; transition: width .5s; }
.tr-unlimited #tr-quota-fill { background: #2ee59d; }
.tr-upsell h2 { font-size: 1.5rem; font-weight: 800; }
.tr-upsell p { margin-top: .8rem; line-height: 1.6; }
.tr-info { margin-top: 40px; line-height: 1.7; }
.tr-info h2 { font-size: 1.5rem; font-weight: 800; }
.tr-info h3 { font-size: 1.15rem; font-weight: 700; margin-top: 1.4rem; }
.tr-info ul { list-style: disc; padding-left: 1.4rem; margin-top: .8rem; }
.tr-info li { margin-top: .4rem; }
.tr-info table { width: 100%; border-collapse: collapse; margin-top: .8rem; background: #fff; border-radius: 14px; overflow: hidden; }
.tr-info th, .tr-info td { text-align: left; padding: 10px 14px; border-bottom: 1px solid rgba(23, 35, 58, .08); }
.tr-info p { margin-top: .8rem; }
@media (max-width: 520px) { .tr-langs { grid-template-columns: 1fr; } .tr-langs .tr-icon-btn { justify-self: center; transform: rotate(90deg); } .tr-options-grid { grid-template-columns: 1fr; } }

/* Mini-jeux des cours */
.mg-card { background: #fff; border-radius: 24px; padding: 24px; box-shadow: 0 16px 40px -24px rgba(23, 35, 58, .35); }
.mg-kind { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #1655c9; background: #eaf1fd; border-radius: 999px; padding: 4px 12px; }
.mg-prompt { margin-top: 14px; font-size: 1.35rem; font-weight: 800; line-height: 1.35; }
.mg-sub { margin-top: 6px; color: rgba(23, 35, 58, .7); }
.mg-answer { min-height: 64px; margin-top: 18px; padding: 12px; border: 2px dashed rgba(23, 35, 58, .2); border-radius: 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mg-answer:empty::before { content: attr(data-empty); color: rgba(23, 35, 58, .45); font-size: 15px; }
.mg-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mg-tile { border: 2px solid rgba(23, 35, 58, .15); background: #fff; border-radius: 12px; padding: 10px 14px; font-size: 1.05rem; font-weight: 600; cursor: pointer; transition: transform .15s, border-color .15s; }
.mg-tile:hover { border-color: #1f6bf2; transform: translateY(-1px); }
.mg-tile[disabled] { opacity: .35; cursor: default; transform: none; }
.mg-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.mg-pair { border: 2px solid rgba(23, 35, 58, .15); background: #fff; border-radius: 14px; padding: 12px; text-align: left; font-weight: 600; cursor: pointer; min-height: 56px; }
.mg-pair[aria-pressed="true"] { border-color: #1f6bf2; background: rgba(31, 107, 242, .06); }
.mg-pair.is-matched { border-color: #2ee59d; background: rgba(46, 229, 157, .16); cursor: default; }
.mg-pair.is-miss { border-color: #e5484d; background: rgba(229, 72, 77, .08); }
.mg-listen { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; min-height: 64px; padding: 0 26px; border-radius: 999px; background: #1f6bf2; color: #fff; font-weight: 700; font-size: 1.05rem; border: 0; cursor: pointer; }
.mg-feedback { margin-top: 16px; border-radius: 14px; padding: 12px 16px; font-weight: 600; }
.mg-feedback.ok { background: #e3fbf1; color: #0f5a3d; }
.mg-feedback.ko { background: #fdecec; color: #a3242a; }

/* Application : états du bilan et du jeu */
.choice[aria-pressed="true"] { border-color: #1f6bf2; background: rgba(31, 107, 242, .05); }
.choice.is-right { border-color: #2ee59d; background: rgba(46, 229, 157, .18); }
.choice.is-wrong { border-color: #e5484d; background: rgba(229, 72, 77, .08); }
.field-error { color: #c62f35; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible {
  outline: 3px solid #1f6bf2;
  outline-offset: 2px;
}

/* Mini-jeux : éléments ajoutés pour les 40 jeux */
.mg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mg-timer { font-weight: 800; font-variant-numeric: tabular-nums; color: #1655c9; background: #eaf1fd; border-radius: 999px; padding: 4px 12px; font-size: 14px; }
.mg-timer.is-low { color: #a3242a; background: #fdecec; }
.mg-duo { grid-template-columns: 1fr 1fr; }
.mg-opt-sub { display: block; margin-top: 4px; font-weight: 500; color: rgba(23, 35, 58, .7); }
.mg-claim { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #f4f6fb; font-weight: 600; }
.mg-hidden { letter-spacing: .3em; color: rgba(23, 35, 58, .35); }
.mg-mono { letter-spacing: .06em; }
.mg-flash-note { font-weight: 600; color: #1655c9; }
.mg-mem { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.mg-memcard { min-height: 88px; border-radius: 14px; border: 2px solid rgba(23, 35, 58, .12); background: linear-gradient(135deg, #1f6bf2, #7b4dff); color: #fff; font-size: 1.6rem; font-weight: 800; cursor: pointer; padding: 8px; overflow-wrap: anywhere; transition: transform .15s; }
.mg-memcard:hover { transform: translateY(-2px); }
.mg-memcard.is-open { background: #fff; color: #17233a; font-size: .9rem; font-weight: 600; line-height: 1.3; }
.mg-memcard.is-matched { border-color: #2ee59d; background: rgba(46, 229, 157, .16); cursor: default; transform: none; }
.mg-input { width: 100%; margin-top: 18px; padding: 14px 16px; border: 2px solid rgba(23, 35, 58, .18); border-radius: 14px; font-size: 1.1rem; background: #fff; }
.mg-input:focus { outline: none; border-color: #1f6bf2; box-shadow: 0 0 0 4px rgba(31, 107, 242, .15); }
.mg-mic { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; min-height: 60px; padding: 0 26px; border-radius: 999px; border: 2px solid #1f6bf2; background: #fff; color: #1655c9; font-weight: 700; font-size: 1.05rem; cursor: pointer; }
.mg-mic.is-on { background: #e5484d; border-color: #e5484d; color: #fff; animation: mg-pulse 1.2s infinite; }
@keyframes mg-pulse { 50% { box-shadow: 0 0 0 10px rgba(229, 72, 77, .15); } }
@media (max-width: 560px) { .mg-mem { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mg-duo { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .mg-mic.is-on { animation: none; } .mg-memcard, .mg-tile { transition: none; } }

/* Code promo (page Abonnements) */
.promo-field { margin-top: 1.4rem; }
.promo-field label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.promo-opt { font-weight: 400; color: #5b6884; }
.promo-row { display: flex; gap: 8px; max-width: 420px; }
.promo-row input { flex: 1; min-width: 0; height: 46px; border: 1px solid rgba(23, 35, 58, .2); border-radius: 12px; padding: 0 14px; font: inherit; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: #fff; color: #17233a; }
.promo-row input:focus { outline: 2px solid #1f6bf2; outline-offset: 1px; }
.promo-row button { height: 46px; padding: 0 18px; border: 0; border-radius: 12px; background: #17233a; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.promo-row button:hover { background: #1f6bf2; }
#promo-msg .notice { max-width: 560px; }