/* ============================================================================
 * Briques des diapositives — en pixels de DIAPOSITIVE (1280 × 720).
 * La scène met la diapositive à l'échelle : ces tailles restent vraies
 * à l'écran, au projecteur et en plein écran.
 *
 * Un style propre à une seule diapositive va dans son fichier (champ `css`),
 * pas ici. Ici : ce qui sert à plusieurs.
 * ========================================================================== */

.slide { font-family: var(--font); }
.slide h1, .slide h2, .slide h3, .slide h4, .slide p, .slide ol, .slide ul, .slide figure { margin: 0; }
.slide ol, .slide ul { padding: 0; }

/* ---------- diapositive sombre (tone: 'dark') : fond de page de garde de la charte ---------- */

.slide--dark {
  --ink: #FCFAF0;
  --ink-2: #CBD3E1;
  --ink-3: #95A2B8;
  --surface: rgba(255, 255, 255, .07);
  --surface-2: rgba(255, 255, 255, .05);
  --surface-3: rgba(255, 255, 255, .1);
  --line: rgba(255, 255, 255, .14);
  --line-2: rgba(255, 255, 255, .08);
  --rail: rgba(255, 255, 255, .3);
  --brand-ink: #8CC0FF;
  --brand-line: rgba(140, 192, 255, .55);
  --em-a: #7DB8FF;
  --em-b: #B9AEFF;
  --shadow-cell: none;
  color: var(--ink);
  background:
    radial-gradient(110% 95% at 100% 105%, rgba(24, 103, 190, .9) 0%, rgba(24, 103, 190, 0) 62%),
    radial-gradient(60% 55% at -5% 110%, rgba(43, 135, 255, .35) 0%, rgba(43, 135, 255, 0) 70%),
    #1E293B;
}
.slide--dark .slide__brand { color: var(--ink-2); }
.slide--dark .slide__brand img { filter: brightness(0) invert(1); } /* logo blanc sur fond sombre */

/* ---------- typographie ---------- */

.k {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ink-3);
}
.k--brand { color: var(--brand-ink); }
.t {
  font-family: var(--font-display);
  font-size: 42px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.t--xl { font-size: 56px; line-height: 1.04; letter-spacing: -0.028em; }
.t--md { font-size: 34px; }
/* Le mot d'accent du site : DM Serif Display italique, dégradé bleu → violet. */
.em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  padding-right: .06em;
  background: linear-gradient(90deg, var(--em-a), var(--em-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Le surligneur de la proposition commerciale. */
.mark {
  padding: 0 .18em;
  border-radius: 4px;
  background: var(--mark);
  color: var(--ink);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.lead {
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
.body { font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.small { font-size: 14.5px; line-height: 1.5; }
.xs { font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.strong { color: var(--ink); font-weight: 700; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- mises en page ---------- */

.head { display: flex; flex-direction: column; gap: 12px; }
.split {
  height: 100%;
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  gap: 56px;
}
.split__side { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; min-width: 0; }
.split__main { display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 0; }
.stack { display: flex; flex-direction: column; }

/* ---------- surfaces ---------- */

.panel { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-cell); }
.masked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px;
  border: 1px dashed var(--rail);
  border-radius: 10px;
  background:
    repeating-linear-gradient(45deg, var(--line) 0 1px, transparent 1px 8px),
    var(--surface-2);
  text-align: center;
  color: var(--ink-2);
}
/* Tons d'accent de la charte, pour les cartes et pastilles. */
.tone-blue { --tone-soft: var(--blue-soft); --tone-ink: var(--blue-ink); }
.tone-green { --tone-soft: var(--green-soft); --tone-ink: var(--green-ink); }
.tone-pink { --tone-soft: var(--pink-soft); --tone-ink: var(--pink-ink); }
.tone-violet { --tone-soft: var(--violet-soft); --tone-ink: var(--violet-ink); }
.tone-yellow { --tone-soft: var(--yellow-soft); --tone-ink: var(--yellow-ink); }
.tone-ic {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 12px;
  background: var(--tone-soft);
  color: var(--tone-ink);
}

/* ---------- puces ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}
.chip--brand { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-ink); }
.chip--quiet { background: transparent; }
.chip--tone { background: var(--tone-soft); border-color: transparent; color: var(--tone-ink); }
.chip--low { background: var(--low-soft); border-color: var(--low-line); color: var(--low); }
.chip--high { background: var(--high-soft); border-color: var(--high-line); color: var(--high); }
button.chip { cursor: pointer; font-family: inherit; }

/* Le badge Octomine IA de la plateforme. */
.ia {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ia-a), var(--ia-b));
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 650;
  white-space: nowrap;
  box-shadow: 0 6px 16px -8px rgba(98, 88, 246, .7);
}

/* La bulle de parole du site (« Je ne suis plus épanoui »). */
.bubble {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px 16px 16px 4px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 10px 24px -14px rgba(16, 24, 40, .25);
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.4;
}
.bubble .sm { margin-top: -1px; }

/* ---------- commandes : au trait bleu, pleines quand actives ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--brand-line);
  border-radius: 10px;
  background: transparent;
  color: var(--brand-ink);
  font: inherit;
  font-size: 15.5px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn--solid { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn--lg { height: 54px; padding: 0 24px; font-size: 17px; border-radius: 12px; }
.btn:disabled { opacity: .45; cursor: default; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.seg > button {
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--brand-line);
  border-radius: 10px;
  background: transparent;
  color: var(--brand-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
}
.seg > button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

.field {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--rail);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
}
.field:focus { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--brand); }

.slide button:focus-visible,
.slide a:focus-visible,
.slide [role="slider"]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ---------- smileys et météo ---------- */

.sm, .wx { display: block; flex: none; }

/* Bandes de score : même règle partout (météo, grille, jauges). */
.band-good { --band: var(--good); --band-soft: var(--good-soft); --band-ink: var(--good-ink); }
.band-fair { --band: var(--fair); --band-soft: var(--fair-soft); --band-ink: var(--fair-ink); }
.band-poor { --band: var(--poor); --band-soft: var(--poor-soft); --band-ink: var(--poor-ink); }
.band-bad { --band: var(--bad); --band-soft: var(--bad-soft); --band-ink: var(--bad-ink); }
.score { font-weight: 750; color: var(--band-ink); font-variant-numeric: tabular-nums; }
.score small { font-size: .62em; font-weight: 600; opacity: .75; margin-left: 1px; }

/* ---------- carte de question, à l'image de la plateforme (Roboto) ---------- */

.qc {
  --qc-ink: #333A45;
  --qc-mute: #9AA1AC;
  --qc-dot: #B3B3B3;
  --qc-track: #F1F1F1;
  --qc-ring: #3B82F6;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 26px 0;
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 10px 30px -12px rgba(0, 0, 0, .18);
  color: var(--qc-ink);
  font-family: var(--font-app);
  font-size: 16px;
}
.qc__q { font-size: 19px; font-weight: 500; line-height: 1.35; }
.qc__poles { display: flex; justify-content: space-between; gap: 16px; font-size: 16.5px; color: var(--qc-ink); }
.qc__scale { --thumb: 44px; position: relative; padding-top: 50px; }
.qc__face {
  position: absolute;
  top: 0;
  left: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--p, .5));
  transform: translateX(-50%);
  transition: left .18s ease;
}
.qc__ask {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-top: 6px;
  border-radius: 50%;
  background: #D6E6FF;
  color: var(--qc-ring);
  font-weight: 700;
  font-size: 18px;
}
.qc__track {
  position: relative;
  height: var(--thumb);
  cursor: pointer;
  touch-action: none;
  border-radius: 999px;
  outline: none;
}
.qc__track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 16px);
  height: 32px;
  border-radius: 999px;
  background: var(--qc-track);
}
.qc__dot {
  position: absolute;
  top: 50%;
  left: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--i));
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--qc-dot);
}
.qc__thumb {
  position: absolute;
  top: 0;
  left: calc((100% - var(--thumb)) * var(--p, .5));
  width: var(--thumb);
  height: var(--thumb);
  border: 3px solid var(--qc-ring);
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 0 0 rgba(59, 130, 246, .18);
  transition: left .18s ease, box-shadow .2s;
}
.qc__track:focus-visible .qc__thumb,
.qc__track.is-drag .qc__thumb { box-shadow: 0 0 0 12px rgba(59, 130, 246, .16); }
.qc__track:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.qc__opts { display: flex; flex-direction: column; gap: 4px; }
.qc__opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 6px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--qc-ink);
  font: inherit;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}
.qc__opt:disabled { opacity: .45; cursor: not-allowed; }
.qc__opts--dense { gap: 0; }
.qc__opts--dense .qc__opt { padding-block: 5px; }
.qc__box {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 2px solid #757575;
  border-radius: 50%;
  color: #FFFFFF;
}
.qc__opt--multi .qc__box { border-radius: 3px; }
.qc__opt[aria-pressed="true"] .qc__box { border-color: var(--qc-ring); }
.qc__opt[aria-pressed="true"]:not(.qc__opt--multi) .qc__box::after {
  content: '';
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--qc-ring);
}
.qc__opt--multi[aria-pressed="true"] .qc__box { background: var(--qc-ring); }
.qc__field { position: relative; margin-top: 6px; }
.qc__field fieldset {
  position: absolute;
  inset: -6px 0 0;
  margin: 0;
  padding: 0 8px;
  border: 1px solid #C4C4C4;
  border-radius: 8px;
  pointer-events: none;
}
.qc__field legend { padding: 0 5px; font-size: 13px; color: #6B7280; }
.qc__field-row { display: flex; align-items: flex-start; gap: 10px; padding: 14px 14px 12px; }
.qc__field-row .ic { color: #8A8F98; margin-top: 2px; }
.qc__input {
  flex: 1;
  min-width: 0;
  min-height: 24px;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--qc-ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
}
.qc__input::placeholder { color: var(--qc-mute); }
.qc__count { margin-top: 4px; text-align: right; font-size: 12.5px; color: #8A8F98; font-variant-numeric: tabular-nums; }
.qc__nc {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 -26px;
  padding: 14px 26px;
  border: 0;
  border-top: 1px solid #E5E5E5;
  border-radius: 0 0 12px 12px;
  background: none;
  color: var(--qc-ink);
  font: inherit;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}
.qc__nc .qc__box { border-radius: 3px; }
.qc__nc.is-on .qc__box { background: var(--qc-ring); border-color: var(--qc-ring); }
.qc__end { height: 22px; }
.qc.is-nc .qc__scale, .qc.is-nc .qc__opts, .qc.is-nc .qc__poles { opacity: .35; pointer-events: none; }

/* ---------- options de réponse, forme simple (reprises des premières diapositives) ---------- */

.opts { display: flex; flex-direction: column; gap: 8px; }
.opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--rail);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.opt__mark {
  flex: none;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 2px solid var(--rail);
  border-radius: 50%;
  color: var(--on-brand);
}
.opt--multi .opt__mark { border-radius: 5px; }
.opt[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); }
.opt[aria-pressed="true"] .opt__mark { border-color: var(--brand); background: var(--brand); }
.opt:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- jauge à 10 crans : un effectif non nul remplit au moins un cran ---------- */

.gauge { display: flex; gap: 3px; }
.gauge i { flex: 1 1 0; height: 13px; border-radius: 2px; background: var(--empty); }
.gauge--lg i { height: 18px; border-radius: 3px; }
.gauge--sm i { height: 9px; }
.gauge--ink i.on { background: var(--ink-2); }
.gauge--low i.on { background: var(--s1); }
.gauge--high i.on { background: var(--s7); }
.gauge--series i.on {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .5) 0 2px, rgba(255, 255, 255, 0) 2px 5px),
    var(--series);
}

/* ---------- échelle à crans, lue (les crans retenus sont pleins) ---------- */

.crans { display: flex; flex-direction: column; gap: 7px; }
.crans__row { display: flex; gap: 4px; }
.crans__row i { flex: 1 1 0; height: 14px; border-radius: 3px; background: var(--empty); }
.crans--sm .crans__row { gap: 2px; }
.crans--sm .crans__row i { height: 7px; border-radius: 2px; }
.crans--ink .crans__row i.on { background: var(--ink-2); }
.crans--brand .crans__row i.on { background: var(--brand); }
.crans--low .crans__row i.on { background: var(--s1); }
.crans--high .crans__row i.on { background: var(--s7); }
.crans__poles { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 600; color: var(--ink-2); }

/* ---------- étapes : [data-step="n"] apparaît à l'étape n ; .is-dim pour la mise en avant ---------- */

.slide [data-step] { transition: opacity .35s ease, transform .35s ease; }
.slide [data-step].is-future { opacity: 0; transform: translateY(10px); pointer-events: none; }
.focusable { transition: opacity .3s ease, box-shadow .3s ease, border-color .3s ease, transform .3s ease; }
.focusable.is-dim { opacity: .38; }
.focusable.is-on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow-cell); }

/* ---------- apparitions (ui.stagger) : l'un après l'autre, décalés de --d ---------- */

.rv-in { animation: rv-in .38s ease both; animation-delay: var(--d, 0ms); }
.rv-pop { animation: rv-pop .45s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: var(--d, 0ms); }
@keyframes rv-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes rv-pop { from { opacity: 0; transform: scale(.6); } }
/* Un mot généré par Octomine IA (nuage de mots) : il sort du flou. */
.rv-gen { animation: rv-gen .5s ease both; animation-delay: var(--d, 0ms); }
@keyframes rv-gen { from { opacity: 0; filter: blur(6px); transform: scale(.86); } }

/* ---------- curseur simulé (ui.simCursor) : sa pointe est au coin haut gauche ---------- */

.sim-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: 24px;
  height: 24px;
  pointer-events: none;
  opacity: 0;
  transform: translate(var(--x, 0px), var(--y, 0px));
  transition: opacity .3s ease;
  filter: drop-shadow(0 2px 3px rgba(16, 24, 40, .35));
}
.sim-cursor.is-on { opacity: 1; }
.sim-cursor svg { display: block; transform-origin: 3px 2px; }
.sim-cursor::before {
  content: '';
  position: absolute;
  left: -13px;
  top: -14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand);
  opacity: 0;
}
.sim-cursor.is-click::before { animation: sim-click .5s ease-out; }
.sim-cursor.is-click svg { animation: sim-press .25s ease; }
.is-sim-paused .sim-cursor::before, .is-sim-paused .sim-cursor svg { animation-play-state: paused; }
@keyframes sim-click { from { opacity: .45; transform: scale(.2); } to { opacity: 0; transform: scale(1.3); } }
@keyframes sim-press { 50% { transform: scale(.82); } }

/* ---------- diapositive en erreur ---------- */

.s-error, .s-missing { display: flex; flex-direction: column; gap: 14px; max-width: 900px; }
.s-error pre {
  max-height: 340px;
  overflow: auto;
  padding: 16px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--bad-ink);
  font-size: 13px;
  white-space: pre-wrap;
}
.s-missing code, .s-error code { font-size: .92em; color: var(--brand-ink); }