/* Le site de Bonne Plume, d'après les écrans Stitch du 13/11 (docs/stitch-bonne-plume.md).
   Couleurs de l'app (lib/theme.dart) et pastels du site : chaque texte atteint 4,5:1 sur son fond (3:1 pour le
   texte de plus de 24 px et les bordures), contrôlé par outils/tests/test_site.py. Tailles en rem : le texte suit
   le réglage du lecteur jusqu'à 200 %. Polices servies par le site (outils/polices_site.py, licences dans /polices/). */
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/polices/atkinson-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/polices/atkinson-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/polices/atkinson-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/polices/fraunces.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/polices/caveat.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --papier: #F7F6F2;
  --carte: #FFFFFF;
  --creux: #ECEAE4;
  --encre: #1A2030;
  --encre2: #474E5F;
  --encre3: #5C6375;
  --trait: #DCD9D1;
  --bord: #868D9C;
  --accent: #1E3A6D;
  --accent-pale: #E2E8F3;
  --sur-accent: #FFFFFF;
  --alerte: #B3261E;
  --sauge: #DDEBD7;
  --lilas: #E9E1F5;
  --beurre: #FCF0C8;
  --peche: #FBE0D0;
  --ciel: #DDEEF7;
  --vert: #2F7A4D;
  --vert-pale: #EAF3EB;
  --sur-vert: #FFFFFF;
  --corail: #E87A5D;
  --corail-vif: #C4593D;
  --corail-texte: #A8432A;
  --corail-pale: #FCEDE5;
  --sur-corail: #FFFFFF;
  --barre-sauge: #8CC09A;
  --barre-lilas: #A994D9;
  --barre-beurre: #E2B651;
  --barre-peche: #EE9878;
  --barre-ciel: #7DB9DC;
  --ombre: 0 10px 30px -6px rgba(30, 58, 109, 0.10), 0 4px 12px -2px rgba(30, 58, 109, 0.05);
  --ombre-forte: 0 22px 44px -12px rgba(30, 58, 109, 0.22), 0 8px 16px -6px rgba(30, 58, 109, 0.08);
  --points: radial-gradient(rgba(30, 58, 109, 0.09) 1px, transparent 1.4px);
  --texte: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --titre: "Fraunces", Georgia, "Times New Roman", serif;
  --main: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #11141A;
    --carte: #1A1E26;
    --creux: #242935;
    --encre: #ECEEF2;
    --encre2: #C2C7D2;
    --encre3: #9CA3B1;
    --trait: #2F3441;
    --bord: #6B7385;
    --accent: #A7BEEA;
    --accent-pale: #24314B;
    --sur-accent: #11141A;
    --alerte: #F2B8B5;
    --sauge: #1F2B22;
    --lilas: #262033;
    --beurre: #2E2A1A;
    --peche: #2F231E;
    --ciel: #1B2733;
    --vert: #8ED1A5;
    --vert-pale: #1F2B22;
    --sur-vert: #11141A;
    --corail: #E8937B;
    --corail-vif: #E8937B;
    --corail-texte: #F2A58F;
    --corail-pale: #2F231E;
    --sur-corail: #11141A;
    --ombre: 0 10px 30px -6px rgba(0, 0, 0, 0.45);
    --ombre-forte: 0 22px 44px -12px rgba(0, 0, 0, 0.6);
    --points: radial-gradient(rgba(236, 238, 242, 0.07) 1px, transparent 1.4px);
  }
  .photo { filter: brightness(0.88); }
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 400 1.0625rem/1.6 var(--texte);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, .marque, .phrase, .titre, .score, .faq summary, .pense-bete-titre {
  font-family: var(--titre);
  font-weight: 650;
  font-synthesis: none;
  color: var(--accent);
}

a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }

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

.cadre { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1rem; }
.cadre-etroit { max-width: 46rem; }
@media (min-width: 48rem) { .cadre { padding-inline: 2rem; } }

/* En-tête */
.entete { padding-block: 0.75rem; }
.entete-dedans { display: flex; align-items: center; gap: 1rem 2rem; }
.marque { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 1.375rem; line-height: 1.2; text-decoration: none; }
.marque svg { flex: none; }
.marque-fond { fill: var(--accent); }
.marque-plume, .marque-ligne { fill: var(--sur-accent); stroke: var(--sur-accent); stroke-width: 0; }
.marque-ligne { stroke-width: 1.6; stroke-linecap: round; }
.marque-tige { stroke: var(--accent); stroke-width: 1.3; stroke-linecap: round; }
.entete-dedans .entete-liens, .entete-dedans .entete-bouton { display: none; }
.entete-liens a { color: var(--encre); text-decoration: none; font-weight: 600; padding-block: 0.5rem; }
.entete-liens a:hover { color: var(--accent); text-decoration: underline; }
@media (min-width: 60rem) {
  .entete-dedans .entete-liens { display: flex; gap: 2rem; margin-inline: auto; }
  .entete-dedans .entete-bouton { display: inline-flex; }
}
.en-test .entete-dedans .entete-liens, .en-test .entete-dedans .entete-bouton { display: none; }

main { flex: 1; }

/* Boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 3rem; padding: 0.75rem 1.5rem; border-radius: 999px;
  background: var(--accent); color: var(--sur-accent);
  font-weight: 700; text-decoration: none; box-shadow: 0 10px 22px -10px rgba(30, 58, 109, 0.55);
  touch-action: manipulation;
}
.bouton:hover { filter: brightness(1.12); text-decoration: none; }
.bouton-grand { min-height: 3.5rem; padding-inline: 2rem; font-size: 1.125rem; }

/* Petites étiquettes */
.surtitre {
  margin: 0 0 0.5rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--corail-texte);
}
.pastille-haut {
  display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 1.25rem;
  padding: 0.375rem 0.875rem; border-radius: 999px; background: var(--sauge); color: var(--accent);
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.pastille-haut::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--vert); }
.pilules { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pilules li {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.375rem 0.875rem;
  border-radius: 999px; background: var(--carte); border: 1px solid var(--trait);
  font-size: 0.9375rem; color: var(--encre2);
}
.pilules svg { flex: none; color: var(--corail-vif); }
.teinte-sauge { background: var(--sauge); }
.teinte-lilas { background: var(--lilas); }
.teinte-beurre { background: var(--beurre); }
.teinte-peche { background: var(--peche); }
.teinte-ciel { background: var(--ciel); }

/* Photos sur leur tache pastel, à petits points comme du papier découpé */
.photo { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 1.75rem; }
.photo-cadre { position: relative; }
.photo-cadre::before {
  content: ""; position: absolute; z-index: 0; inset: -1.5rem -1.75rem 3rem 2.5rem;
  border-radius: 3rem 3rem 3rem 7rem; background: var(--points) 0 0 / 10px 10px, var(--sauge);
}
.photo-cadre.lilas::before { background: var(--points) 0 0 / 10px 10px, var(--lilas); inset: 2rem 1.5rem -1rem -0.75rem; border-radius: 3rem 7rem 3rem 3rem; }
.photo-cadre .photo { position: relative; z-index: 1; border: 6px solid var(--carte); box-shadow: var(--ombre-forte); }

/* Haut de l'accueil */
.haut { padding-block: 1.5rem 3.5rem; overflow-x: hidden; overflow-x: clip; }
.haut-grille { display: grid; gap: 2.5rem; }
h1 { font-size: 2.625rem; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 1.5rem; }
.main {
  display: inline-block; margin-top: 0.25rem; font-family: var(--main); font-weight: 600; font-size: 1.15em;
  letter-spacing: 0; color: var(--corail-vif);
  text-decoration: underline wavy var(--corail); text-decoration-thickness: 0.06em; text-underline-offset: 0.2em;
  text-decoration-skip-ink: none;
}
.chapeau { margin: 0 0 1.5rem; font-size: 1.1875rem; color: var(--encre2); max-width: 34rem; }
.haut-texte .bouton { width: 100%; }
.haut-visuel { position: relative; padding: 1.5rem 0.75rem 0 0.25rem; }
.bulle {
  position: absolute; z-index: 2; top: 0.5rem; left: 0; margin: 0;
  padding: 0.125rem 1rem 0.25rem; border-radius: 1.25rem 1.25rem 1.25rem 0.25rem;
  background: var(--carte); color: var(--accent); box-shadow: var(--ombre);
  font: 700 1.75rem/1.2 var(--main); transform: rotate(-4deg);
}
.confetti {
  position: absolute; z-index: 2; display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; font: 650 1.125rem/1 var(--titre); color: var(--accent); box-shadow: var(--ombre);
}
.confetti-1 { top: 0; right: 4rem; background: var(--peche); transform: rotate(8deg); }
.confetti-2 { top: 2.75rem; right: -0.25rem; background: var(--lilas); transform: rotate(-10deg); }
.confetti-3 { bottom: 5.5rem; left: -0.5rem; background: var(--beurre); transform: rotate(-6deg); }
.carte-question {
  position: relative; z-index: 3; margin: -4rem 0.5rem 0;
  padding: 1rem; border-radius: 1.25rem; background: var(--carte); box-shadow: var(--ombre-forte);
}
.carte-question-haut { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.25rem 0.75rem; }
.phrase-mini { margin: 0.5rem 0 0.875rem; font: 650 1.1875rem/1.4 var(--titre); color: var(--accent); }
.options-mini { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.option-mini {
  flex: 1 1 4.5rem; min-height: 3rem; padding: 0.5rem;
  font: inherit; font-weight: 600; color: var(--encre); background: var(--carte);
  border: 1.5px solid var(--bord); border-radius: 999px; cursor: pointer; touch-action: manipulation;
}
.option-mini:hover { background: var(--accent-pale); border-color: var(--accent); }
.carte-question noscript p { margin: 0.75rem 0 0; color: var(--encre2); }

@media (min-width: 40rem) {
  h1 { font-size: 3.5rem; }
  .haut-texte .bouton { width: auto; }
}
@media (min-width: 60rem) {
  .haut { padding-block: 2.5rem 5rem; }
  .haut-grille { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 4rem; }
  h1 { font-size: 4.25rem; }
  .haut-visuel { padding: 2rem 1.5rem 0 1rem; }
  .carte-question { margin: -5.5rem 1.5rem 0 2rem; padding: 1.25rem; }
}

/* Parties de l'accueil */
.partie { padding-block: 3rem; }
.partie h2 { font-size: 2rem; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 1rem; }
.centre { text-align: center; }
@media (min-width: 48rem) { .partie { padding-block: 4.5rem; } .partie h2 { font-size: 2.75rem; } }

.etapes { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; text-align: left; }
.etape { background: var(--carte); border-radius: 1.5rem; padding: 1.5rem; box-shadow: var(--ombre); }
.numero { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 0.875rem; font: 650 1.25rem/1 var(--titre); color: var(--accent); }
.etape h3, .atout h3 { font-size: 1.375rem; line-height: 1.25; margin: 1rem 0 0.5rem; }
.etape p, .atout p { margin: 0; color: var(--encre2); }
@media (min-width: 48rem) { .etapes { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

.panneau { background: var(--carte); border-radius: 2rem; padding: 2.5rem 1.25rem; box-shadow: var(--ombre); }
.panneau h2 { max-width: 32rem; margin-inline: auto; }
.onglets { list-style: none; padding: 0; margin: 1.75rem auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; max-width: 48rem; }
.onglet { padding: 0.625rem 1.125rem; border-radius: 0.875rem 0.875rem 0.875rem 0.25rem; border: 1px solid rgba(30, 58, 109, 0.14); font-weight: 600; }
.note { margin: 0 auto; max-width: 32rem; color: var(--encre2); }

.app-grille { display: grid; gap: 3rem; }
.app-grille .chapeau { margin-bottom: 0; }
.atouts { list-style: none; padding: 0; display: grid; gap: 1rem; margin: 1.75rem 0 1.25rem; }
.atout { border-radius: 1.5rem; padding: 1.25rem; }
.atout-icone { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: var(--carte); color: var(--accent); }
.atout h3 { font-size: 1.1875rem; margin-top: 0.875rem; }
.app-visuel { position: relative; padding: 0.5rem 0.75rem 0 1.25rem; }
.pense-bete {
  position: relative; z-index: 3; width: min(19rem, 88%); margin: -4.5rem 0 0 -0.5rem;
  padding: 1.75rem 1.25rem 1.25rem; border-radius: 0.75rem; background: var(--carte); box-shadow: var(--ombre-forte);
  transform: rotate(-2deg);
}
.aimant { position: absolute; top: -0.75rem; left: 50%; width: 1.5rem; height: 1.5rem; margin-left: -0.75rem; border-radius: 50%; background: var(--corail); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18); }
.pense-bete-etiquette { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--corail-texte); }
.pense-bete-titre { margin: 0.25rem 0 0.75rem; font-size: 1.1875rem; line-height: 1.25; }
.pense-bete-truc { margin: 0 0 0.75rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; background: var(--beurre); font-size: 0.9375rem; }
.lignes { display: block; height: 2.25rem; background: repeating-linear-gradient(to bottom, transparent 0 0.75rem, var(--trait) 0.75rem calc(0.75rem + 1px)); }
@media (min-width: 40rem) { .atouts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60rem) {
  .app-grille { grid-template-columns: 1.15fr 1fr; align-items: center; gap: 4rem; }
  .pense-bete { margin-left: -1.5rem; }
}

.faq { display: grid; gap: 0.75rem; margin-top: 2rem; text-align: left; }
.faq details { background: var(--carte); border: 1px solid var(--trait); border-radius: 1rem; }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 3.5rem; padding: 0.875rem 1.25rem; font-size: 1.125rem; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; content: "+" / "";
  flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--creux); font: 700 1.25rem/1 var(--texte); color: var(--accent); transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 1.25rem 1.25rem; color: var(--encre2); }

.appel { display: grid; gap: 1.5rem; padding: 1rem 1rem 1.75rem; border-radius: 2rem; background: var(--points) 0 0 / 12px 12px, var(--beurre); }
.appel h2 { margin-bottom: 0.5rem; }
.appel p { margin: 0 0 1.5rem; color: var(--encre2); font-size: 1.125rem; }
@media (min-width: 48rem) { .appel { grid-template-columns: 1fr 1.1fr; align-items: center; gap: 3rem; padding: 2rem; } }

/* Barre du bas, sur téléphone seulement, tant que le test n'a pas commencé */
.barre-bas {
  position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom));
  background: var(--carte); border-top: 1px solid var(--trait); box-shadow: 0 -10px 24px -14px rgba(30, 58, 109, 0.3);
}
.barre-bas p { margin: 0; font-size: 0.875rem; line-height: 1.3; color: var(--encre2); }
.barre-bas strong { display: block; color: var(--accent); }
.barre-bas .bouton { flex: none; min-height: 3rem; padding-inline: 1.25rem; }
@media (min-width: 48rem) { .barre-bas { display: none; } }
.en-test .barre-bas { display: none; }

/* Le test */
.test { width: calc(100% - 1rem); max-width: 44rem; margin: 0.5rem auto 2.5rem; padding: 1.25rem 0.75rem 1.5rem; border-radius: 1.75rem; background: var(--ciel); scroll-margin-top: 0.5rem; }
@media (min-width: 48rem) { .test { padding: 2rem; } }

.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 1.5rem; padding: 1.25rem 1rem; margin: 0 0 1rem; box-shadow: var(--ombre); }
.carte:last-child { margin-bottom: 0; }
@media (min-width: 48rem) { .carte { padding: 1.75rem 2rem; } }

.apercu { background: var(--alerte); color: var(--carte); padding: 0.75rem 1rem; border-radius: 0.75rem; font-weight: 700; margin: 0 0 1rem; }

.progression { display: grid; gap: 0.5rem; margin: 0 0.25rem 1rem; }
.progression p { order: -1; margin: 0; font-size: 0.9375rem; font-weight: 700; color: var(--accent); }
.piste { height: 0.5rem; background: var(--carte); border-radius: 1rem; overflow: hidden; }
.piste i { display: block; height: 100%; background: var(--accent); border-radius: 1rem; transition: width 0.3s ease; }

.question-haut { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; }
.consigne { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre2); }
.pastille-domaine { margin: 0; padding: 0.25rem 0.75rem; border-radius: 999px; color: var(--encre); font-size: 0.8125rem; font-weight: 700; }
.etiquette { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre2); }

.phrase { font-size: 1.625rem; line-height: 1.4; margin: 0.875rem 0 1.25rem; }
.trou { display: inline-block; min-width: 4em; height: 1.1em; vertical-align: -0.15em; border-bottom: 2px dashed var(--encre3); margin-inline: 0.15em; }
.rempli { background: none; color: var(--vert); text-decoration: underline 3px; text-underline-offset: 0.18em; }
.titre { font-size: 1.5rem; line-height: 1.25; margin: 0.5rem 0 0.25rem; }

.options { display: grid; gap: 0.75rem; margin-top: 1rem; }
.option {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.75rem;
  width: 100%; min-height: 3.5rem; padding: 0.75rem 1rem;
  font: inherit; font-size: 1.125rem; font-weight: 600; text-align: left; color: var(--encre);
  background: var(--carte); border: 1.5px solid var(--bord); border-radius: 1rem;
  cursor: pointer; touch-action: manipulation;
}
.option:hover:not([aria-disabled]) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.option:active:not([aria-disabled]) { transform: scale(0.99); }
.option[aria-disabled] { cursor: default; }
.option.teinte-sauge { background: var(--sauge); }
.option.teinte-lilas { background: var(--lilas); }
.option.teinte-beurre { background: var(--beurre); }
.option.teinte-peche { background: var(--peche); }
.option.teinte-ciel { background: var(--ciel); }
.option.est-terne { color: var(--encre3); background: var(--papier); border-color: var(--trait); }
.option.est-bonne { background: var(--vert-pale); border: 2px solid var(--vert); }
.option.est-fausse { background: var(--corail-pale); border: 2px solid var(--corail-vif); }
.marque-option { padding: 0.125rem 0.625rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.marque-option.bonne { background: var(--vert); color: var(--sur-vert); }
.marque-option.fausse { background: var(--corail-texte); color: var(--sur-corail); }

.verdict:empty { display: none; }
.verdict { position: relative; margin-top: 1.25rem; padding: 1rem 1.125rem; border-radius: 1rem; }
.verdict p { margin: 0 0 0.5rem; }
.verdict p:last-child { margin-bottom: 0; }
.verdict.juste { background: var(--vert-pale); }
.verdict.faux { background: var(--corail-pale); }
.verdict-titre { font-size: 1.1875rem; font-weight: 700; }
.verdict.juste .verdict-titre { color: var(--vert); }
.verdict.faux .verdict-titre { color: var(--corail-texte); }
.etoile { position: absolute; top: -0.75rem; right: -0.5rem; width: 1.5rem; height: 1.5rem; fill: var(--corail); }

.principal, .secondaire {
  display: block; width: 100%; min-height: 3.5rem; margin-top: 1.25rem; padding: 0.75rem 1.25rem;
  font: inherit; font-size: 1.0625rem; font-weight: 700; border-radius: 1rem; cursor: pointer;
  touch-action: manipulation;
}
.principal { background: var(--accent); color: var(--sur-accent); border: 0; }
.principal:hover { filter: brightness(1.12); }
.principal:disabled { opacity: 0.7; cursor: progress; }
.secondaire { background: var(--carte); color: var(--accent); border: 2px solid var(--accent); }

.lien {
  display: block; margin: 1.25rem auto 0; padding: 0.75rem 0.5rem; min-height: 3rem;
  font: inherit; font-weight: 700; color: var(--accent); background: none; border: 0;
  text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer;
}

.resultat .titre { text-align: center; font-size: 1.75rem; margin-top: 0; }
.score-bloc { margin: 1rem 0 1.5rem; padding: 1.25rem 1rem; border-radius: 1.25rem; background: var(--beurre); text-align: center; }
.score { margin: 0; line-height: 1.15; }
.score strong { display: block; font-size: 2.25rem; font-weight: 650; }
.score span { display: block; font: 600 1.75rem/1.2 var(--main); color: var(--vert); }
.appreciation { margin: 0.75rem 0 0; color: var(--encre2); }
.resultat h3 { font-size: 1.25rem; margin: 1.75rem 0 0.75rem; }

.domaines { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.domaines li { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 0.75rem; align-items: baseline; }
.domaines .compte { font-weight: 700; color: var(--encre2); font-variant-numeric: tabular-nums; }
.barre { grid-column: 1 / -1; height: 0.625rem; background: var(--creux); border-radius: 1rem; overflow: hidden; }
.barre i { display: block; height: 100%; border-radius: 1rem; }
.barre .teinte-sauge { background: var(--barre-sauge); }
.barre .teinte-lilas { background: var(--barre-lilas); }
.barre .teinte-beurre { background: var(--barre-beurre); }
.barre .teinte-peche { background: var(--barre-peche); }
.barre .teinte-ciel { background: var(--barre-ciel); }

.ratees { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.ratees li { padding: 0.875rem 1rem; border: 1px solid var(--trait); border-radius: 1rem; }
.ratees strong, .ratees span { display: block; }
.ratees strong { color: var(--accent); }
.ratees span { color: var(--encre2); }

.inscription { background: var(--beurre); border-color: transparent; }
.inscription .titre { margin-top: 0; }
.inscription label { display: block; font-weight: 700; margin: 1rem 0 0.375rem; }
.inscription input[type=email] {
  width: 100%; min-height: 3.25rem; padding: 0.625rem 0.875rem;
  font: inherit; color: var(--encre); background: var(--carte);
  border: 1.5px solid var(--bord); border-radius: 0.875rem;
}
.inscription input[aria-invalid=true] { border-color: var(--alerte); border-width: 2px; }
.inscription .case { display: flex; gap: 0.75rem; align-items: flex-start; font-weight: 400; cursor: pointer; }
.case input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0.1rem 0 0; accent-color: var(--accent); }
.erreur:empty { display: none; }
.erreur { color: var(--alerte); font-weight: 700; margin: 0.75rem 0 0; }
.petit { font-size: 0.9375rem; color: var(--encre2); margin: 0.75rem 0 0; }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.actions { display: grid; gap: 0.75rem; margin-top: 0.25rem; }
.actions .principal, .actions .secondaire { margin-top: 0; }

/* Pied de page */
.pied { margin-top: 2rem; padding-block: 2rem; border-top: 1px solid var(--trait); color: var(--encre2); font-size: 0.9375rem; }
.pied-haut { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; margin-bottom: 1.25rem; }
.pied .marque { font-size: 1.1875rem; margin: 0; }
.pied nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.pied a { color: var(--encre2); overflow-wrap: anywhere; }
.pied p { margin: 0 0 0.375rem; }

/* Pages de texte et pages après l'inscription */
.page-texte { padding-block: 1.5rem 1rem; }
.page-texte h1 { font-size: 2.25rem; line-height: 1.15; margin: 0.5rem 0 0.5rem; }
.page-texte h2 { font-size: 1.375rem; line-height: 1.3; margin: 2rem 0 0.5rem; padding-top: 1.5rem; border-top: 1px solid var(--trait); }
.page-texte .maj { color: var(--encre2); margin-top: 0; font-size: 0.9375rem; }
.page-texte ul { padding-left: 1.25rem; }
.page-texte li { margin-bottom: 0.5rem; }
.page-texte li::marker { color: var(--corail-vif); }
.encadre { margin: 1.5rem 0; padding: 1rem 1.25rem; border-radius: 1.25rem; background: var(--sauge); }
.encadre p { margin: 0.5rem 0; }
.encadre-doux { margin: 1.5rem 0; padding: 1rem 1.25rem; border-radius: 1.25rem; background: var(--carte); border: 1px solid var(--peche); color: var(--encre2); }
.illustration { display: block; margin: 1rem auto 0.5rem; }
.illustration .tache { fill: var(--ciel); }
.illustration .papier { fill: var(--carte); stroke: var(--trait); stroke-width: 1.5; }
.illustration .rabat { fill: var(--beurre); }
.illustration .ligne { stroke: var(--trait); stroke-width: 4; stroke-linecap: round; }
.illustration .rond { fill: var(--sauge); }
.illustration .plume { fill: var(--vert); stroke: var(--vert); stroke-width: 1.5; stroke-linecap: round; }
.illustration .lettre { fill: var(--encre3); font: 650 1.125rem var(--titre); }
.page-centre h1 { text-align: center; }
.page-centre .suite { text-align: center; margin-top: 2rem; }
.page-centre .suite a:not(.bouton) { font-weight: 700; }
.portrait { position: relative; width: 10rem; margin: 1.5rem auto 0.5rem; }
.portrait::before { content: ""; position: absolute; inset: -0.75rem -1.25rem 0.5rem -0.5rem; border-radius: 45% 55% 50% 50%; background: var(--points) 0 0 / 10px 10px, var(--peche); }
.portrait .photo { position: relative; aspect-ratio: 1; border-radius: 50%; border: 5px solid var(--carte); box-shadow: var(--ombre-forte); }
.portrait svg { position: absolute; fill: var(--corail); }
.portrait .etoile-1 { top: -0.5rem; right: -1.5rem; width: 1.25rem; height: 1.25rem; }
.portrait .etoile-2 { bottom: 1rem; left: -1.75rem; width: 0.875rem; height: 0.875rem; fill: var(--barre-beurre); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}