/* ==========================================================================
   Ton vrai prix — feuille de style
   Esthétique : formulaire web des années 2000–2010 (blocs gris, bandeaux en
   dégradé bleu → violet → rouge, Arial). Couleurs et polices : variables ci-dessous.
   ========================================================================== */

:root {
  /* Couleurs */
  --bg: #FFFFFF;          /* fond général */
  /* Blocs et champs très légèrement translucides : ils prennent la teinte du décor juste
     derrière eux (dégradé du questionnaire, thème des autres pages). Le texte reste net. */
  --block: rgba(240, 242, 242, .9);    /* fond des questions et encadrés */
  --block-2: rgba(232, 236, 236, .92); /* fond alternatif (en-têtes de tableau, zébrures) */
  --solid: #FFFFFF;                    /* là où il faut un fond opaque (menus) */
  --ink: #222222;         /* texte */
  --ink-2: #5A5F60;       /* texte secondaire (rare) */
  --line: #D0D5D5;        /* bordures */
  --field-line: #B9C1C1;  /* bordure des champs */
  --paper: rgba(255, 255, 255, .93);   /* champs de réponse */
  --blue: #1854D8;
  --blue-dark: #1043B0;
  --blue-soft: #E7EEFC;
  --violet: #7134B4;
  --red: #E52F40;
  --red-soft: #FDECEE;
  --band: linear-gradient(90deg, var(--blue) 0%, var(--violet) 55%, var(--red) 100%);
  --band-v: linear-gradient(180deg, var(--blue) 0%, var(--violet) 55%, var(--red) 100%);

  /* Typographie */
  --sans: Arial, Helvetica, 'Liberation Sans', sans-serif;
  --receipt: 'Courier New', Courier, monospace; /* uniquement le ticket de l’accueil */

  /* Mise en page */
  --w: 700px;
  --gutter: 14px;
  --hdr-h: 48px;
  --hdr-total: 48px; /* recalculé en JS */
  --radius: 4px;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hdr-total) + 12px);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.45 var(--sans);
  overflow-x: hidden;
}

main { flex: 1; min-height: 100vh; outline: none; } /* le pied de page n’apparaît jamais en haut au chargement */
h1, h2, h3, p { margin: 0; }
a { color: var(--blue); }
button, select, input { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.wrap {
  width: 100%;
  max-width: calc(var(--w) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 50;
  padding: 8px 12px;
  background: var(--blue);
  color: #fff;
  opacity: 0;               /* invisible même pendant le rebond de l’iPhone */
  pointer-events: none;
  transform: translateY(-150%);
}
.skip:focus { opacity: 1; pointer-events: auto; transform: none; }

.mono { font-family: var(--sans); }
.fine { font-size: 13px; color: var(--ink-2); line-height: 1.45; }

/* ---------- Boutons ---------- */

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: linear-gradient(#FFFFFF, #E9EDED);
  color: var(--ink);
  font: 700 14px/1.1 var(--sans);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}
@media (hover: hover) { .btn:hover { border-color: #9AA4A4; background: linear-gradient(#FFFFFF, #E1E6E6); } }
.btn:active { background: #E1E6E6; }

.btn-primary {
  border-color: var(--blue-dark);
  background: linear-gradient(#2E68E4, var(--blue));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-primary:hover { border-color: #0C3592; background: linear-gradient(#2560DE, var(--blue-dark)); }
.btn-primary:active { background: var(--blue-dark); box-shadow: none; }

.btn-large { min-height: 46px; padding: 0 26px; font-size: 16px; }
.btn-small { min-height: 34px; padding: 0 12px; font-size: 13.5px; }

.btn[disabled], .btn[disabled]:hover { opacity: .5; cursor: not-allowed; }

.btn-small.btn-primary { min-height: 34px; }

/* Bouton discret : même forme qu’un bouton, plus effacé (passer, annuler, recommencer). */
.btn-quiet {
  background: var(--paper);
  border-color: var(--line);
  color: #3D4344;
  font-weight: 400;
}
@media (hover: hover) { .btn-quiet:hover { background: var(--block); border-color: var(--field-line); color: var(--ink); } }

.btn:active { transform: translateY(1px); }

/* ---------- En-tête ---------- */

.hdr {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.hdr-row {
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: calc(var(--w) + 2 * var(--gutter));
  height: var(--hdr-h);
  margin: 0 auto;
  padding: 0 6px 0 var(--gutter);
}
.logo {
  margin-right: auto;
  font: 700 18.5px/1 var(--sans);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  word-spacing: -.6px;
}
.logo-w { margin-right: -.06em; } /* espace « Ton vrai » ramené aux trois quarts */
.logo-q {
  background: var(--band);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* « prix » n’a que des minuscules sans hampe : un rien plus grand pour paraître de la même
     taille que « Ton vrai », collé à la même ligne de base, sans espace en plus. */
  font-size: 1.06em;
  line-height: 1;
  letter-spacing: .2px;
}

.nav { display: flex; align-items: center; }
.nav a {
  padding: 8px 9px;
  font: 400 14px/1 var(--sans);
  color: var(--blue);
  text-decoration: none;
}
.nav a:hover { text-decoration: underline; }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.nav-short { display: none; }

.lang { position: relative; margin-left: 2px; }
.lang-btn {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 7px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}
/* Drapeau : pas de cadre gris ; ouvert, un fin contour de la couleur des liens de l’en-tête.
   Survol seulement avec une souris (sur iPhone, le survol resterait collé après le toucher). */
.lang-btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.lang-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--hdr-link, var(--blue)); }
.lang-btn:active { transform: scale(.94); }
@media (hover: hover) { .lang-btn:hover .flag { opacity: .85; } }
button.lang-item { width: 100%; border: 0; background: none; color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: pointer; min-height: 40px; }
@media (hover: hover) { button.lang-item:hover { background: var(--block); } }
.flag svg { display: block; width: 22px; height: 15px; outline: 1px solid rgba(0, 0, 0, .15); }
/* Liste : chaque drapeau à ses vraies proportions (le britannique est plus allongé), sans cadre */
.lang-item svg { display: block; height: 15px; width: auto; flex: none; filter: drop-shadow(0 0 .6px rgba(0, 0, 0, .45)); }
.lang-item .lf { display: flex; justify-content: center; width: 30px; flex: none; }
.lang-code { display: none; }
.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 190px;
  padding: 6px 0;
  background: var(--solid);
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
}
.lang-title { padding: 4px 12px 6px; font-size: 12px; color: var(--ink-2); }
.lang-menu ul { list-style: none; margin: 0; padding: 0; }
.lang-item { display: flex; align-items: center; gap: 10px; padding: 7px 12px; font-size: 14px; }
.lang-item[aria-current="true"] { font-weight: 700; }
.lang-item.is-soon { color: var(--ink-2); }
.lang-item.is-soon svg { opacity: .5; }
.lang-item em { margin-left: auto; font-size: 12px; }

/* ---------- Pied de page ---------- */

.ftr { margin-top: 56px; border-top: 1px solid var(--line); background: var(--block); }
.ftr-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  max-width: calc(var(--w) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 16px var(--gutter) 20px;
  font-size: 13px;
  color: var(--ink-2);
}
.ftr-logo { position: relative; font-weight: 700; color: var(--ink); text-decoration: none; word-spacing: -.6px; }

/* ---------- Titres et encadrés ---------- */

.page-title { margin-top: 28px; font: 700 26px/1.2 var(--sans); }
.page-lede { margin-top: 8px; font-size: 15px; }
.block-title { font: 700 17px/1.3 var(--sans); margin-bottom: 10px; }
.loading { margin-top: 40px; color: var(--ink-2); }

/* Bandeau en dégradé : titres de catégories et de sections. */
.band,
.res-block > .block-title {
  display: flex;
  align-items: center;
  min-height: 48px;
  margin: 0;
  padding: 10px 16px;
  border-radius: 7px 7px 0 0;
  background: var(--band);
  color: #fff;
  font: 700 18px/1.25 var(--sans);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}

/* Encadré : bandeau + zone claire bordée. */
.box,
.res-block {
  margin-top: 26px;
  border-radius: 7px 7px var(--radius) var(--radius);
  background: var(--block);
}
.res-block { padding: 0 14px 16px; border: 1px solid var(--line); }
.res-block > .block-title { margin: -1px -15px 14px; }
.res-block:not(:has(> .block-title)) { padding-top: 14px; border-radius: var(--radius); }

/* ---------- Accueil ---------- */

.home { padding-top: 34px; text-align: center; }
.hero { font: 700 clamp(28px, 7.5vw, 38px)/1.15 var(--sans); }
.hero-lede { max-width: 34em; margin: 12px auto 0; font-size: 16px; }
.hero-cta { margin-top: 24px; }

/* Touche originale : un ticket de caisse qui attend son total. */
.ticket {
  width: min(100%, 270px);
  margin: 26px auto 0;
  padding: 18px 18px 26px;
  background: var(--paper);
  border: 1px solid var(--field-line);
  border-bottom: 0;
  font: 400 13px/1.65 var(--receipt);
  text-align: left;
  transform: rotate(-1.4deg);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%;
}
.ticket p { display: flex; justify-content: space-between; gap: 12px; }
.tk-head { justify-content: center !important; font-weight: 700; font-size: 14px; }
.tk-sub { color: var(--ink-2); padding-bottom: 8px; border-bottom: 1px dashed var(--field-line); margin-bottom: 6px; font-size: 12px; }
.tk-cols { color: var(--ink-2); font-size: 12px; }
.tk-total {
  margin-top: 8px;
  padding: 8px 0;
  border-top: 1px dashed var(--field-line);
  border-bottom: 1px dashed var(--field-line);
  font-weight: 700;
}
.tk-amount { color: var(--blue); white-space: nowrap; }
.tk-cursor {
  display: inline-block;
  width: .55em;
  height: 1.05em;
  margin-left: 3px;
  vertical-align: -2px;
  background: var(--blue);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Caisse enregistreuse : le ticket sort de la fente en s’imprimant */
.reg { position: relative; width: 300px; max-width: 100%; margin: 12px auto 0; }
.reg-paper { position: relative; width: 232px; margin: 0 auto -10px; padding-top: 4px; overflow: hidden; }
.reg-paper .ticket {
  position: relative;
  width: 232px;
  margin: 0;
  transform: translateY(100%);
  animation: print 1.9s cubic-bezier(.25, .6, .35, 1) .3s forwards;
}
@keyframes print { to { transform: translateY(0); } }
.reg-body { position: relative; display: block; width: 100%; height: auto; }
.reg-screen { font: 700 22px/1 var(--receipt); fill: #7FF0FF; letter-spacing: 1px; }
.key { fill: #FBFCFC; stroke: #B3BCBC; }
.key-b { fill: var(--blue); stroke: var(--blue-dark); }
.key-r { fill: var(--red); stroke: #B81E2E; }
.press { animation: press .3s steps(1) .5s 8 alternate; }
.press.late { animation-delay: .8s; }
@keyframes press { from { transform: translateY(1.5px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .reg-paper .ticket { transform: none; } }

/* Les quatre leurres du questionnaire, cachés sur l’accueil */
.egg { position: absolute; z-index: 1; width: 14px; height: 27px; opacity: .85; pointer-events: none; }
.egg svg { display: block; width: 100%; height: 100%; overflow: visible; }
.egg-hook { right: 34px; top: calc(100% - 4px); transform-origin: 50% 0; animation: egg-swing 3.6s ease-in-out infinite; }
.egg-bobber { right: 26px; top: -21px; animation: egg-bob 2.8s ease-in-out infinite; }
.egg-lantern { left: 22px; bottom: -31px; transform-origin: 50% 0; animation: egg-swing 4.2s ease-in-out infinite; }
/* La foreuse fore dans le haut de l’encadré « L’histoire de ce site » */
.egg-drill { right: 74px; top: -21px; z-index: 2; opacity: 1; animation: egg-drill .12s linear infinite alternate; }
.egg-drill::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 16px; height: 5px; margin-left: -8px; border-radius: 50%; background: rgba(20, 8, 4, .45); z-index: -1; }
.egg-floor { right: auto; left: 18%; top: -21px; }
@keyframes egg-drill { from { transform: translateX(-.6px); } to { transform: translateX(.6px); } }
.reg-body { z-index: 1; }

/* Curseur du thème, à droite du ticket */
.home-picker { position: absolute; z-index: 2; top: 6px; left: calc(50% + 124px); text-align: left; color: var(--on-bg); text-shadow: var(--on-bg-shadow); }
.home-last { max-width: 340px; margin: 14px auto 0; text-align: left; }
@media (max-width: 420px) {
  .reg-paper, .reg-paper .ticket { width: 196px; }
  .reg-paper .ticket { padding: 14px 12px 22px; font-size: 11.5px; }
  .home-picker { left: calc(50% + 104px); right: -4px; --step: 42px; }
  .home-picker .dp-title { font-size: 11px; }
  .home-picker .dp-label { font-size: 12px; padding: 3px 2px; }
  .home-picker .dp-swatch { display: none; }
  .home-picker .dp-body { gap: 5px; }
  .home-picker .dp-track { width: 26px; }
  .home-picker .dp-thumb { left: 3px; width: 20px; height: 34px; top: calc(var(--pos) * var(--step) * (var(--n) - 1) - 2px); }
  .home-picker .dp-thumb i { height: 20px; }
  .home-picker .dp-rail { left: 9px; }
  .home-picker .dp-notch { left: 7px; }
}
@keyframes egg-swing { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes egg-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(2px) rotate(4deg); } }

.how { position: relative; margin-top: 40px; }
.how-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--bg);
  counter-reset: how;
}
.how-list li {
  counter-increment: how;
  padding: 11px 14px 12px;
  border-radius: var(--radius);
  background: var(--block);
}
.how-list h3 { font: 700 15px/1.35 var(--sans); }
.how-list h3::before { content: counter(how) ". "; color: var(--blue); }
.how-list p { margin-top: 3px; }

@media (min-width: 640px) {
  .how-list { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Questionnaire ---------- */

.q-intro { padding-bottom: 4px; }

.resume {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid #BCCDF3;
  border-radius: var(--radius);
  background: var(--blue-soft);
}
.resume-actions, .confirm-actions, .lb-actions, .share-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 10px;
}

.confirm {
  margin-top: 10px;
  padding: 10px 12px 12px;
  border: 1px solid #BCCDF3;
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  background: var(--blue-soft);
}
.confirm p { font-size: 14px; font-weight: 700; }
.confirm-actions { margin-top: 8px; }

/* Catégorie : bandeau, puis les questions dans une zone claire. */
.cat { margin-top: 26px; }
.cat-body {
  display: grid;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
}

/* Question : bloc gris, libellé en haut, champ juste en dessous. */
.q {
  min-width: 0;
  margin: 0;
  padding: 11px 12px 12px;
  border: 0;
  border-radius: var(--radius);
  background: var(--block);
}
.q legend {
  /* float : la légende se comporte comme un bloc normal dans le fieldset */
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 8px;
  font: 700 15px/1.35 var(--sans);
}
.q > :not(legend) { clear: both; }
.q-hint { margin: -4px 0 8px; font-size: 13px; color: var(--ink-2); }
.q-flag { display: none; }

.q.is-missing { background: var(--red-soft); box-shadow: inset 3px 0 0 var(--red); }
.q.is-missing .q-flag { display: inline; margin-left: 8px; font-weight: 400; font-size: 13px; color: var(--red); }

/* Menu déroulant natif */
.sel { position: relative; max-width: 100%; }
.sel select {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  max-width: 420px;
  height: 38px;
  padding: 0 34px 0 10px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23444' stroke-width='1.8'/%3E%3C/svg%3E") right 11px center / 11px 8px no-repeat;
  color: var(--ink);
  font-size: 15px;
  text-overflow: ellipsis;
  cursor: pointer;
}
.sel select:hover { border-color: #95A0A0; }
.sel select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(24, 84, 216, .25); }
.sel select.is-empty { color: #6B7070; }
.sel select option { color: var(--ink); }

/* Champ texte (pseudo) */
.txt {
  display: block;
  width: 100%;
  max-width: 420px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
}
.txt:hover { border-color: #95A0A0; }
.txt:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(24, 84, 216, .25); }
.txt[aria-invalid] { border-color: var(--red); }

/* Petits boutons côte à côte (réponses très courtes).
   Bouton bombé → enfoncé et bleu quand il est choisi ; second clic = désélection. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 64px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: linear-gradient(rgba(255, 255, 255, .95), rgba(236, 240, 240, .9));
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
  color: var(--ink);
  font: 700 15px/1 var(--sans);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .12s, border-color .12s, transform .06s;
}
.chip:hover { border-color: #8E9999; }
.chip:active { transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12); }
.chip[aria-checked="true"] {
  border-color: var(--blue-dark);
  background: linear-gradient(#1A4CC0, #2A64E2);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .28);
  color: #fff;
}
.chip[aria-checked="true"]::before {
  content: "";
  width: 11px;
  height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: tick-pop .18s ease-out;
}
@keyframes tick-pop { from { transform: scale(0); } 70% { transform: scale(1.25); } to { transform: scale(1); } }

/* Réponses illustrées (drapeaux) */
.opts-img { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-width: 460px; }
.opt-img {
  appearance: none;
  position: relative;
  display: block;
  width: 100%;
  padding: 6px 6px 5px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--paper);
  font: inherit;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .12s, transform .06s;
}
.opt-img:hover { border-color: #8E9999; }
.opt-img:active { transform: translateY(1px); }
.opt-img-pic svg { width: 100%; height: auto; outline: 1px solid rgba(0, 0, 0, .12); }
.opt-img-letter { display: block; margin-top: 5px; font-size: 13px; font-weight: 700; }
.opt-img[aria-checked="true"] { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue); background: var(--blue-soft); }
.opt-img[aria-checked="true"] .opt-img-letter { color: var(--blue); }
.opt-img[aria-checked="true"]::after {
  content: "";
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  box-shadow: 0 0 0 2px #fff;
  animation: tick-pop .18s ease-out;
}

/* Champ numérique (réservé aux cas où une valeur exacte compte) */
.num { display: flex; align-items: center; gap: 10px; }
.num-input {
  width: 9ch;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: 15px;
}
.num-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(24, 84, 216, .25); }
.num-input[aria-invalid="true"] { border-color: var(--red); }
.field-error { margin-top: 6px; font-size: 13px; color: var(--red); }

/* ---------- Mini-épreuves ---------- */

.trial-slot { scroll-margin-top: calc(var(--hdr-total) + 12px); }
/* Une épreuve = une petite fenêtre rétro : barre de titre, chronomètre à cristaux liquides. */
.trial {
  overflow: hidden;
  border: 1px solid #A9B7D6;
  border-radius: 6px;
  background: var(--paper);
}
.trial.is-missing { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.trial-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 34px;
  padding: 5px 8px 5px 12px;
  border-bottom: 1px solid #A9B7D6;
  background: linear-gradient(rgba(244, 247, 253, .94), rgba(220, 229, 246, .92));
  color: var(--blue-dark);
  font: 700 13px/1.3 var(--sans);
}
.trial-tag::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--band);
  vertical-align: 1px;
}
.trial-timer:not(:empty) {
  min-width: 58px;
  padding: 2px 7px;
  border: 1px solid #0E1A2E;
  border-radius: 3px;
  background: #13243F;
  color: #7FD8FF;
  font: 700 14px/1.2 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  text-align: center;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5);
}
.trial-body { padding: 13px 14px 15px; }
.trial-title { font: 700 17px/1.3 var(--sans); margin-bottom: 6px; }
.trial-text { margin-bottom: 12px; }
.trial-score {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: var(--radius);
  background: var(--blue-soft);
  font: 700 20px/1.3 var(--sans);
  color: var(--blue);
}
.trial-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.trial-actions:empty { display: none; }
.trial-count { font-size: 13px; color: var(--ink-2); }

.sym-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 12px; }
.sym {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  aspect-ratio: 1;
  padding: 5px 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--block);
  color: var(--ink);
}
.sym svg { width: 40%; min-width: 24px; }
.sym-name { font-size: 11px; line-height: 1.1; color: var(--ink-2); text-align: center; }
.sym-pick { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sym-pick:hover { border-color: #95A0A0; }
.sym-pick[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 1px var(--blue); }
.sym-pick[aria-pressed="true"] svg, .sym-pick[aria-pressed="true"] .sym-name { color: var(--blue); }

@media (min-width: 620px) { .sym-grid { grid-template-columns: repeat(6, 1fr); } }

.rx-stage { display: grid; place-items: center; padding: 4px 0; }
.rx-circle {
  display: grid;
  place-items: center;
  width: min(60vw, 210px);
  aspect-ratio: 1;
  padding: 16px;
  border: 2px solid var(--field-line);
  border-radius: 50%;
  background: var(--block);
  font: 700 14px/1.3 var(--sans);
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.rx-circle.is-wait { background: var(--paper); color: var(--ink-2); border-style: dashed; }
.rx-circle.is-go { background: var(--red); border-color: #B81E2E; color: #fff; }
.rx-msg { min-height: 1.5em; margin-top: 10px; text-align: center; font-weight: 700; }
.rx-log {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 12px 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.rx-log li { display: flex; flex-direction: column; gap: 3px; padding: 6px 3px; border-right: 1px solid var(--line); text-align: center; background: var(--block); }
.rx-log li:last-child { border-right: 0; }
.rx-log span { font-size: 11px; color: var(--ink-2); }
.rx-log b { font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rx-log li.is-set b { color: var(--ink); }
.rx-fs { min-height: 1.4em; margin: 6px 0 10px; font-size: 13px; color: var(--ink-2); text-align: center; }

/* ---------- Validation ---------- */

.submit {
  margin-top: 26px;
  padding: 16px 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--block);
  text-align: center;
}
.submit-title { font: 700 18px/1.3 var(--sans); margin-bottom: 6px; }
.submit p { max-width: 36em; margin: 0 auto; }
.submit-msg:not(:empty) { margin-top: 14px; text-align: left; }
.submit > .btn { margin-top: 16px; }

.notice { padding: 12px 14px; border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--paper); }
.notice p { margin-bottom: 10px; }
.notice-error { border-color: var(--red); background: var(--red-soft); }
.notice-error p { margin-bottom: 0; }

/* ---------- Résultat ---------- */

.res-hero {
  margin-top: 28px;
  padding: 22px 16px 24px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--block);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.res-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--band); }
.res-kicker { font: 700 15px/1.3 var(--sans); }
.res-amount {
  margin-top: 8px;
  font: 700 clamp(34px, 10.5vw, 60px)/1.1 var(--sans);
  color: var(--blue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.res-comment { max-width: 32em; margin: 12px auto 0; font-size: 16px; }

.res-share .share-actions { margin-top: 0; justify-content: center; }
.res-share .fine:not(:empty) { margin-top: 10px; text-align: center; }

.bars { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 14px;
  padding: 8px 12px 9px;
  border-bottom: 1px solid var(--line);
}
.bar:nth-child(even) { background: rgba(247, 248, 248, .55); }
.bar-value { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.bar-track { grid-column: 1 / -1; height: 7px; border-radius: 2px; background: var(--block-2); }
.bar-fill { display: block; height: 100%; border-radius: 2px; background: var(--blue); }
.bar-bonus .bar-fill { background: var(--red); }
.bars-total {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding: 9px 12px;
  border-radius: var(--radius);
  background: var(--block-2);
  font-weight: 700;
  font-size: 16px;
}
.res-block > .fine { margin-top: 8px; }

.tests-grid { display: grid; gap: 8px; }
.test-card { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.test-card h3 { font: 700 15px/1.3 var(--sans); margin-bottom: 6px; }
.test-card p { font-size: 14px; }
.test-card .test-score { font: 700 18px/1.3 var(--sans); color: var(--blue); margin-bottom: 2px; }
.test-pct { margin-top: 6px; }
@media (min-width: 620px) { .tests-grid { grid-template-columns: 1fr 1fr; } }

.res-lb p { max-width: 36em; }
.res-lb > .btn { margin-top: 12px; }
.res-link .btn { margin: 10px 0; }
.res-again { padding-top: 18px; text-align: center; }

/* Formulaire du classement */
.lb-form { display: grid; gap: 16px; margin-top: 4px; }
.field { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.field > legend { float: left; width: 100%; }
fieldset.field > :not(legend) { clear: both; }
.field label[for], .field legend { display: block; padding: 0; margin-bottom: 6px; font-weight: 700; }
.field input[type="text"] {
  width: 100%;
  max-width: 320px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: 15px;
}
.field input[type="text"]:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(24, 84, 216, .25); }
.field .fine { margin-top: 5px; }

/* Choix du niveau de visibilité : liste à boutons radio classiques */
.opt input, .check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.opts { display: grid; gap: 4px; }
.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  cursor: pointer;
}
.opt-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid #8C9696;
  border-radius: 50%;
  background: var(--paper);
}
.opt-mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); transform: scale(0); }
.opt.is-on { border-color: var(--blue); background: var(--blue-soft); }
.opt.is-on .opt-mark::after { transform: scale(1); }
.opt input:focus-visible ~ .opt-mark { outline: 2px solid var(--blue); outline-offset: 2px; }

.check { position: relative; display: flex; align-items: flex-start; cursor: pointer; font-size: 14px; }
.check span::before {
  content: "";
  flex: none;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 1px 10px -3px 0;
  border: 1px solid #8C9696;
  border-radius: 2px;
  background: var(--paper);
}
.check input:checked + span::before { background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.2'/%3E%3C/svg%3E") center / 12px no-repeat; border-color: var(--blue-dark); }
.check input:focus-visible + span::before { outline: 2px solid var(--blue); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error:empty { display: none; }
.form-error { color: var(--red); font-size: 14px; }

/* ---------- Classement ---------- */

/* ---------- Classement ----------
   Même famille que le reste du site : bandeau en dégradé, fond pastel du thème, boutons bombés
   comme ceux du menu (qui rebondissent). Rang dans une pastille bleue légère (un peu plus marquée
   pour le podium), valeurs bien en gras, mes participations juste un peu plus teintées. */
.me-box { margin-top: 18px; }
.me-box ul { list-style: none; margin: 0; padding: 0; }
.me-box li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.me-box li:last-child { border-bottom: 0; }
.me-box .rk { min-width: 38px; }
.lb-name { font-weight: 700; overflow-wrap: anywhere; }
.me-val { margin-left: auto; font: 700 16.5px/1.2 var(--sans); color: #111; white-space: nowrap; }

#board { margin-top: 18px; }
.lb-count { font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.table-wrap {
  border: 1px solid var(--line);
  border-radius: 7px 7px var(--radius) var(--radius);
  /* Un seul dégradé sur toute la largeur de l’en-tête (pas un par colonne) */
  background: var(--band) 0 0 / 100% 46px no-repeat;
  background-color: var(--paper);
}
.lb { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.lb th {
  padding: 0 10px;
  height: 46px;
  background: none;
  color: #fff;
  font: 700 14px/1.2 var(--sans);
  text-align: left;
}
.lb th:first-child { border-top-left-radius: 6px; }
.lb th:last-child { border-top-right-radius: 6px; }
.lb td { padding: 9px 10px; border-bottom: 1px solid rgba(0, 0, 0, .08); vertical-align: middle; }
.lb tbody tr:last-child td { border-bottom: 0; }
.lb .c-rank { width: 2.6em; padding-right: 0; }
.lb .c-val { text-align: right; white-space: nowrap; font: 700 16.5px/1.2 var(--sans); color: #111; letter-spacing: -.1px; }
.lb tr.is-me td { background: var(--block-2); }
.rk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 14px;
  background: rgba(24, 84, 216, .08);
  color: var(--blue-dark);
  font: 700 13.5px/1 var(--sans);
}
.rk-top { background: rgba(24, 84, 216, .16); }

/* Bouton « Détails » : petit bouton bombé, chevron qui se retourne */
.lb-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0 2px 8px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 10px;
  background: linear-gradient(var(--paper), var(--block));
  box-shadow: 0 3px 0 rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .75);
  color: var(--ink);
  font: 700 13.5px/1 var(--sans);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
  transition: transform .07s ease, box-shadow .07s ease;
}
.lb-more:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(0, 0, 0, .16), inset 0 2px 3px rgba(0, 0, 0, .12); }
.lb-more i { width: 6px; height: 6px; border-right: 2px solid rgba(0, 0, 0, .4); border-bottom: 2px solid rgba(0, 0, 0, .4); transform: rotate(45deg) translate(-1px, -1px); transition: transform .2s; }.lb-more[aria-expanded="true"] i { transform: rotate(-135deg) translate(-1px, -1px); }

/* Détails déroulés : un encadré pastel, lignes nettes */
.lb-detail td { padding: 0 10px 12px; }
.lb-panel { padding: 4px 12px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--block); }
.lb-detail-list { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.lb-detail-list li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.lb-detail-list li:last-child { border-bottom: 0; }
.lb-detail-list b { white-space: nowrap; }

/* « Valeur » dans l’en-tête : bouton qui ouvre la liste des quatre monnaies */
.lbcur { position: relative; display: inline-block; }
.lbcur-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 10px 0 11px;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 9px;
  background: linear-gradient(#FFFFFF, #EEF1F1);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .2);
  color: var(--ink);
  font: 700 14px/1 var(--sans);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .07s ease, box-shadow .07s ease;
}
.lbcur-btn:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0, 0, 0, .2); }
.lbcur-btn b { color: var(--blue-dark); font-size: 15px; }
.lbcur-btn i { width: 6px; height: 6px; margin-left: 1px; border-right: 2px solid rgba(0, 0, 0, .4); border-bottom: 2px solid rgba(0, 0, 0, .4); transform: rotate(45deg) translate(-1px, -1px); transition: transform .2s; }
.lbcur-btn[aria-expanded="true"] i { transform: rotate(-135deg) translate(-1px, -1px); }
/* Liste des monnaies : mêmes touches que le menu */
.lbcur-menu {
  position: absolute;
  z-index: 5;
  right: 0;
  top: calc(100% + 8px);
  display: grid;
  gap: 5px;
  min-width: 170px;
  padding: 6px;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 12px;
  background: var(--solid);
  text-align: left;
}
.lbcur-menu[hidden] { display: none; }
.lbcur-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 10px;
  background: linear-gradient(var(--paper), var(--block));
  box-shadow: 0 3px 0 rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .75);
  color: var(--ink);
  font: 700 15px/1 var(--sans);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .07s ease, box-shadow .07s ease;
}
.lbcur-opt:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(0, 0, 0, .16), inset 0 2px 3px rgba(0, 0, 0, .12); }
.lbcur-opt b { min-width: 22px; font-size: 17px; text-align: center; color: var(--blue-dark); }
.lbcur-opt[aria-checked="true"] { color: var(--blue-dark); background: linear-gradient(var(--block), var(--block-2)); }
.lb-more-wrap { margin-top: 14px; text-align: center; }

.empty { margin-top: 24px; padding: 22px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--block); text-align: center; }
.empty p { margin-bottom: 14px; }
.empty-404 { text-align: left; }
.empty-404 .page-title { margin-top: 0; }
.empty-404 .page-lede { margin-bottom: 18px; }

/* ---------- Infos ---------- */

.prose { margin-top: 18px; display: grid; gap: 8px; }
.prose section { padding: 12px 14px 14px; border-radius: var(--radius); background: var(--block); }
.prose h2 { font: 700 16px/1.3 var(--sans); color: var(--blue); margin-bottom: 6px; }
.prose p + p { margin-top: 8px; }
.clear-box { margin-top: 14px; }
.clear-box .fine:not(:empty) { margin-top: 10px; }

/* ---------- Petits écrans ---------- */

@media (max-width: 520px) {
  :root { --gutter: 10px; }
  .nav-long { display: none; }
  .nav-short { display: inline; }
  .nav a { padding: 8px 7px; }
  .band, .res-block > .block-title { font-size: 17px; min-height: 46px; padding: 10px 13px; }
  .cat-body { padding: 5px; gap: 5px; }
  .q { padding: 10px 10px 11px; }
  .sel select, .txt { max-width: none; font-size: 16px; } /* 16 px : évite le zoom automatique sur iPhone */
  .trial-actions .btn { flex: 1 1 100%; }
}
@media (max-width: 360px) {
  .logo { font-size: 15px; }
  .chip { min-width: 54px; padding: 0 11px; }
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Résultat : classement en grand, mes réponses, fin de page ---------- */

.lb-big { border: 2px solid #BCCDF3; }
.lb-ask { font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.lb-yesno { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.lb-yesno .btn { width: 100%; padding: 0 10px; }

.vis-cards { display: grid; gap: 6px; }
.vis-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid var(--field-line);
  border-radius: 6px;
  background: linear-gradient(rgba(255, 255, 255, .94), rgba(242, 245, 245, .9));
  font-weight: 700;
  cursor: pointer;
}
.vis-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vis-mark { flex: none; width: 20px; height: 20px; border: 1px solid #8C9696; border-radius: 50%; background: var(--paper); display: grid; place-items: center; }
.vis-mark::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); transform: scale(0); transition: transform .15s; }
.vis-card.is-on { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 1px var(--blue); }
.vis-card.is-on .vis-mark::after { transform: scale(1); }
.vis-card input:focus-visible ~ .vis-mark { outline: 2px solid var(--blue); outline-offset: 2px; }
.vis-card.is-off { opacity: .5; cursor: not-allowed; }

.answers-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 50px;
  margin-top: 12px;
  padding: 0 16px;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 10px;
  background: linear-gradient(var(--paper), var(--block));
  box-shadow: 0 3px 0 rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .75);
  color: var(--ink);
  font: 700 16px/1 var(--sans);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .07s ease, box-shadow .07s ease;
}
.answers-toggle:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(0, 0, 0, .16), inset 0 2px 3px rgba(0, 0, 0, .12); }
.answers-hide { margin-top: 14px; }
.answers-toggle i { width: 8px; height: 8px; border-right: 2px solid rgba(0, 0, 0, .4); border-bottom: 2px solid rgba(0, 0, 0, .4); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
.answers-toggle[aria-expanded="true"] i { transform: rotate(-135deg) translate(-2px, -2px); }
.my-answers { margin-top: 10px; padding: 6px 12px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--solid); }
.ans-cat { margin: 12px 0 6px; padding-left: 8px; border-left: 4px solid; border-image: var(--band-v) 1; font: 700 15px/1.3 var(--sans); }
.ans-list { margin: 0; }
.ans { display: grid; gap: 2px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.ans:last-child { border-bottom: 0; }
.ans dt { font-size: 14px; color: #33393B; }
.ans dd { margin: 0; font-weight: 700; }

.share-mini { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 12px; }
.share-mini .fine { flex-basis: 100%; text-align: center; }
.res-end { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.res-end .btn { flex: 1 1 150px; max-width: 260px; }

/* ---------- Finitions ---------- */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Changement de page plus doux et plus rapide (navigateurs récents) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .12s; }

/* Histoire du site */
.story-body { padding: 12px 14px 14px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--paper); text-align: left; }
.story-body p { font-size: 15.5px; line-height: 1.5; }

/* Touches de la caisse : s’enfoncent ; les blanches prennent le dégradé le temps du clic */
.reg-body .kg { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.reg-body .hit { fill: transparent; pointer-events: all; }
.reg-body rect.key, .reg-body rect.key-b, .reg-body rect.key-r { pointer-events: none; transform-box: fill-box; transition: transform .06s; }
.reg-body rect.is-down { transform: translateY(1.5px); }
.reg-body rect.key.is-down { fill: url(#reg-band); stroke: #5A2E9A; }

/* Partager / télécharger : deux petits boutons arrondis, pictogramme dans une pastille */
.share-mini { gap: 8px; }
.share-mini .btn {
  gap: 8px;
  min-height: 36px;
  padding: 0 14px 0 5px;
  border: 1px solid rgba(24, 84, 216, .3);
  border-radius: 999px;
  /* Fond opaque : le papier du thème posé sur du blanc. Translucide, il prenait la couleur du
     décor juste derrière, et les deux boutons n’avaient pas exactement la même teinte. */
  background: linear-gradient(var(--paper), var(--paper)) var(--solid);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
  color: var(--blue-dark);
  font-weight: 700;
  font-size: 13px;
}
@media (hover: hover) { .share-mini .btn:hover { background: var(--blue-soft); border-color: rgba(24, 84, 216, .5); } }
.share-mini .btn:active { transform: translateY(1px); box-shadow: none; }
/* Les deux boutons restent exactement pareils, même pendant un partage en cours (bouton
   momentanément désactivé) ou après un toucher (pas de contour de sélection). */
.share-mini .btn:disabled { opacity: 1; color: var(--blue-dark); -webkit-text-fill-color: var(--blue-dark); }
.share-mini .btn:focus:not(:focus-visible) { outline: none; }
.share-mini .btn::before {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--blue) var(--ico) center / 13px no-repeat;
}
.share-mini [data-share] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 1l4 4H9v6H7V5H4zM2 9h2v4h8V9h2v6H2z'/%3E%3C/svg%3E"); }
.share-mini [data-download] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M7 1h2v7h3l-4 4-4-4h3zM2 13h12v2H2z'/%3E%3C/svg%3E"); }

/* « Recommencer » : plus gris que blanc */
.res-end .btn:not(.btn-primary) { border-color: #A3ADAD; background: linear-gradient(#E4E8E8, #C9D0D0); }
.res-end .btn:not(.btn-primary):hover { background: linear-gradient(#DDE2E2, #C1C9C9); }

/* Pseudo dans les phrases */
.res-kicker em, .res-lb em { font-style: italic; }
@media (max-width: 420px) {
  .share-mini { gap: 6px; flex-wrap: nowrap; }
  .share-mini .btn { gap: 6px; padding-right: 10px; font-size: 12px; white-space: nowrap; }
  .share-mini .btn::before { width: 24px; height: 24px; }
}

.share-mini { justify-content: center; }
.share-mini .fine:empty { display: none; }

.story-body p + p { margin-top: 0; } /* simple retour à la ligne, même interligne */
.author { font-style: italic; }

/* ---------- Résultat : choix de la monnaie ----------
   Boutons bombés (comme ceux du menu) qui rebondissent au toucher ; le choix est bleu, toujours
   en relief : ni coche, ni effet enfoncé. */
.cur-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cur-chip {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 58px;
  padding: 6px 4px;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 10px;
  background: linear-gradient(var(--paper), var(--block));
  box-shadow: 0 3px 0 rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .75);
  color: var(--ink);
  font-family: var(--sans);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.cur-chip b { font-size: 20px; line-height: 1; }
.cur-chip span { font-size: 13px; font-weight: 700; }
.cur-chip[aria-checked="true"] {
  border-color: var(--blue-dark);
  background: linear-gradient(#3A74EA, var(--blue));
  box-shadow: 0 3px 0 #0E3592, inset 0 1px 0 rgba(255, 255, 255, .3);
  color: #fff;
}
.cur-chip.is-pressed { animation: cur-bounce .2s ease-out; }
@keyframes cur-bounce {
  0% { transform: translateY(0); }
  40% { transform: translateY(3px); }
  75% { transform: translateY(-1.5px); }
  100% { transform: translateY(0); }
}
.answers-hide i { transform: rotate(-135deg) translate(-2px, -2px); }

/* Rebond des boutons bombés (comme le menu) après un appui */
.lb-more.is-pressed, .answers-toggle.is-pressed, .lbcur-btn.is-pressed, .lbcur-opt.is-pressed { animation: key-bounce .17s ease-out; }