/* Concept : Léo est un petit personnage ; tout le reste est en "autocollants" (bord encre, ombre décalée), joyeux mais lisible.
   Couleurs : rose bonbon (Léo, actions), jaune soleil (choix, bouton principal), lilas (étiquettes), encre prune (texte, contours). */
:root {
  --bg: #fff1f6; --carte: #ffffff; --texte: #2b0b3a; --doux: #6e5577; --encre: #2b0b3a;
  --rose: #ff5fa2; --rose-fonce: #e8458a; --jaune: #ffd23f; --lilas: #e6dcff; --lilas-fort: #9c7bff;
  --joue: #ffb3d1; --coeur: #e8174f; --sur-jaune: #2b0b3a; --sur-rose: #ffffff;
  --bulle-ia: #ffffff; --champ: #ffffff; --erreur: #c0182f; --ok: #1f8a4c;
  --demo-bg: #fff3cd; --demo-fg: #6b5300; --motif: rgba(156, 123, 255, .18);
  --accent: var(--rose); --accent-fonce: var(--rose-fonce); --accent-doux: #ffe0ee; --bord: #2b0b3a; --sur-accent: #ffffff;
  --police: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --rayon: 18px; --ombre: 4px 4px 0 var(--encre);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #1b0a25; --carte: #2a1238; --texte: #ffeaf4; --doux: #c7a9d4; --encre: #0c0311;
  --rose: #ff6fae; --rose-fonce: #ff8dc0; --jaune: #ffd23f; --lilas: #3e2357; --lilas-fort: #b79cff;
  --joue: #ff9ec7; --coeur: #ff3b6b; --sur-jaune: #2b0b3a; --sur-rose: #2b0b3a;
  --bulle-ia: #34174a; --champ: #220d2f; --erreur: #ff8a95; --ok: #6fdc9b;
  --demo-bg: #4a3d12; --demo-fg: #ffe9a8; --motif: rgba(183, 156, 255, .10);
  --accent-doux: #4a1d3d; --bord: #0c0311; --sur-accent: #2b0b3a; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #1b0a25; --carte: #2a1238; --texte: #ffeaf4; --doux: #c7a9d4; --encre: #0c0311;
  --rose: #ff6fae; --rose-fonce: #ff8dc0; --jaune: #ffd23f; --lilas: #3e2357; --lilas-fort: #b79cff;
  --joue: #ff9ec7; --coeur: #ff3b6b; --sur-jaune: #2b0b3a; --sur-rose: #2b0b3a;
  --bulle-ia: #34174a; --champ: #220d2f; --erreur: #ff8a95; --ok: #6fdc9b;
  --demo-bg: #4a3d12; --demo-fg: #ffe9a8; --motif: rgba(183, 156, 255, .10);
  --accent-doux: #4a1d3d; --bord: #0c0311; --sur-accent: #2b0b3a; color-scheme: dark }

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--police); font-size: 16px; color: var(--texte); line-height: 1.5;
  background-color: var(--bg);
  background-image: radial-gradient(var(--motif) 1.5px, transparent 1.6px);
  background-size: 22px 22px; }
.wrap { max-width: 660px; margin: 0 auto; padding-inline: 16px; padding-block: 18px 64px; }
h2 { font-size: 1.35rem; line-height: 1.2; margin: 0 0 6px; font-weight: 800; letter-spacing: -.01em; text-wrap: balance; }
.sous { color: var(--doux); margin: 0 0 16px; font-size: .95rem; }
.petit { font-size: .85rem; color: var(--doux); }
.cache { display: none !important; }

/* Barre du haut : logo + menu (toujours sur fond prune, le logo est blanc) */
html { scroll-padding-top: 88px; }
.barre { position: sticky; top: 0; z-index: 50; background: #2b0b3a; color: #fff; border-bottom: 2.5px solid #0c0311; }
.barre-in { max-width: 1160px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 16px; }
.barre-logo { display: block; flex-shrink: 0; line-height: 0; border-radius: 8px; }
.barre-logo img { display: block; height: 48px; width: auto; }
.barre-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.barre-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; color: #fff;
  text-decoration: none; font-weight: 700; font-size: .98rem; white-space: nowrap; transition: background .15s; }
.barre-nav a:hover { background: rgba(255, 255, 255, .1); }
.barre-nav a[aria-current="page"] { background: #4b1c66; }
.barre-nav a[aria-current="page"] svg { color: var(--jaune); }
.barre-nav svg { width: 20px; height: 20px; flex-shrink: 0; }
.barre-nav .barre-cta { margin-left: 12px; background: var(--jaune); color: #2b0b3a; border: 2.5px solid #0c0311; box-shadow: 3px 3px 0 #0c0311; }
.barre-nav .barre-cta:hover { background: #ffc61a; }
.barre-nav .barre-cta:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #0c0311; }
.barre-burger { display: none; }
@media (max-width: 980px) {
  .barre-logo img { height: 40px !important; }
  .barre-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; margin-left: auto; width: 48px; height: 44px;
    padding: 0 12px; background: transparent; border: 2px solid rgba(255, 255, 255, .35); border-radius: 12px; box-shadow: none; }
  .barre-burger:hover { background: rgba(255, 255, 255, .1); }
  .barre-burger span { display: block; height: 2.5px; background: #fff; border-radius: 2px; transition: transform .2s, opacity .2s; }
  .barre-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .barre-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .barre-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .barre-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 8px 16px 18px; background: #2b0b3a; border-bottom: 2.5px solid #0c0311; box-shadow: 0 12px 24px rgba(12, 3, 17, .35); }
  .barre-nav.ouvert { display: flex; }
  .barre-nav a { padding: 13px 14px; font-size: 1.05rem; }
  .barre-nav .barre-cta { margin: 10px 0 0; justify-content: center; }
}
.wrap { padding-top: 26px; }

/* FAQ */
.faq { margin-top: 34px; }
.faq h2 { font-size: clamp(1.4rem, 5vw, 1.8rem); margin-bottom: 14px; }
.faq details { background: var(--carte); border: 2.5px solid var(--encre); border-radius: 16px; margin-bottom: 10px; box-shadow: 3px 3px 0 var(--encre); }
.faq summary { cursor: pointer; list-style: none; padding: 14px 48px 14px 16px; font-weight: 800; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 8px; background: var(--jaune); color: var(--sur-jaune); border: 2px solid var(--encre); font-size: 1.1rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; background: var(--rose); color: var(--sur-rose); }
.faq details p { margin: 0; padding: 0 16px 16px; color: var(--doux); font-size: .95rem; }
.faq summary:focus-visible { outline: 3px solid var(--lilas-fort); outline-offset: 2px; border-radius: 14px; }

/* Cartes "autocollant" */
.carte { background: var(--carte); border: 2.5px solid var(--encre); border-radius: var(--rayon); padding: 22px; box-shadow: 6px 6px 0 var(--encre); }

/* Boutons */
button { font: inherit; font-weight: 700; cursor: pointer; border: 2.5px solid var(--encre); border-radius: 14px; padding: 11px 20px;
  background: var(--rose); color: var(--sur-rose); box-shadow: var(--ombre); transition: transform .08s, box-shadow .08s; }
button:hover { background: var(--rose-fonce); }
button:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--encre); }
button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--lilas-fort); outline-offset: 2px; }
button.second { background: var(--carte); color: var(--texte); }
button.second:hover { background: var(--lilas); }
button.gros { width: 100%; padding: 16px; font-size: 1.15rem; background: var(--jaune); color: var(--sur-jaune); }
button.gros:hover:not(:disabled) { background: #ffc61a; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.lien { color: var(--texte); font-weight: 700; text-decoration-color: var(--rose); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.lien-btn { background: none; border: 0; box-shadow: none; padding: 0; color: var(--texte); text-decoration: underline; font-size: inherit; }

/* Champs */
label { display: block; font-weight: 700; margin: 16px 0 6px; font-size: .95rem; }
input[type=text], input[type=email], input[type=number], select, textarea {
  width: 100%; padding: 12px 14px; border: 2.5px solid var(--encre); border-radius: 12px; font: inherit; background: var(--champ); color: var(--texte); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: .9rem; margin-top: 14px; }
.consent input { margin-top: 4px; flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--rose); }
.erreur { color: var(--erreur); font-size: .92rem; font-weight: 600; margin-top: 12px; }
.succes { color: var(--ok); font-weight: 800; font-size: 1.2rem; }

/* ---------- Léo ---------- */
.leo { display: block; width: 100%; height: auto; overflow: visible; }
.leo .yeux { display: none; }
.leo[data-humeur="normal"] .yeux-normal, .leo[data-humeur="coeur"] .yeux-coeur,
.leo[data-humeur="lunettes"] .yeux-lunettes, .leo[data-humeur="etoiles"] .yeux-etoiles { display: inline; }
.leo .oeil { transform-box: fill-box; transform-origin: center; animation: cligne 4.8s infinite; }
.leo .oeil + .oeil { animation-delay: .02s; }
.leo .pupille { transition: transform .12s ease-out; }
.leo .yeux-coeur path { transform-box: fill-box; transform-origin: center; animation: battement 1s infinite; }
@keyframes cligne { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@keyframes battement { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.18); } }
.leo-saute { animation: saute .45s ease-out; }
@keyframes saute { 0% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-10px) rotate(-4deg); } 100% { transform: translateY(0) rotate(0); } }

/* ---------- Accueil ---------- */
.accroche { margin: 0 0 22px; }
.accroche-titre { font-size: clamp(2rem, 7.5vw, 3rem); line-height: 1.02; font-weight: 800; letter-spacing: -.035em; margin: 0 0 14px; text-wrap: balance; }
.accroche-texte { margin: 0; color: var(--doux); font-size: 1.08rem; max-width: 46ch; }
.accroche-punch { display: inline-block; margin: 14px 0 0; padding: 8px 14px; font-size: 1.08rem; font-weight: 800;
  background: var(--jaune); color: var(--sur-jaune); border: 2.5px solid var(--encre); border-radius: 12px; transform: rotate(-1.5deg); box-shadow: 3px 3px 0 var(--encre); }

.accueil { display: flex; flex-direction: column; gap: 18px; }
.ia-ligne { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; }
.leo-grand { position: relative; width: 112px; }
.leo-grand .badge-ia { position: absolute; right: -6px; bottom: 2px; background: var(--jaune); color: var(--sur-jaune);
  border: 2px solid var(--encre); border-radius: 8px; font-size: .72rem; font-weight: 800; padding: 1px 6px; transform: rotate(8deg); }
.bulle-leo { position: relative; background: var(--bulle-ia); border: 2.5px solid var(--encre); border-radius: 18px; padding: 14px 16px;
  font-size: 1.1rem; font-weight: 600; min-height: 56px; }
.bulle-leo::before { content: ""; position: absolute; left: -12px; top: 50%; width: 18px; height: 18px; background: var(--bulle-ia);
  border-left: 2.5px solid var(--encre); border-bottom: 2.5px solid var(--encre); transform: translateY(-50%) rotate(45deg); }

.frappe { display: inline-flex; gap: 5px; padding: 6px 2px; }
.frappe i { width: 8px; height: 8px; border-radius: 50%; background: var(--doux); animation: rebond 1s infinite ease-in-out; }
.frappe i:nth-child(2) { animation-delay: .15s; } .frappe i:nth-child(3) { animation-delay: .3s; }
@keyframes rebond { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-5px); opacity: 1; } }

.cartes-choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.choix-carte { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 14px 16px;
  background: var(--champ); color: var(--texte); font-weight: 400; border-radius: 16px; box-shadow: var(--ombre); }
.choix-carte:hover { background: var(--accent-doux); }
.choix-carte .emo { font-size: 1.9rem; line-height: 1; margin-bottom: 6px; }
.choix-carte strong { font-size: 1.08rem; font-weight: 800; }
.choix-carte span:last-child { font-size: .86rem; color: var(--doux); }
.choix-carte[aria-pressed="true"] { background: var(--jaune); color: var(--sur-jaune); transform: rotate(-1.5deg); }
.choix-carte[aria-pressed="true"]:nth-child(even) { transform: rotate(1.5deg); }
.choix-carte[aria-pressed="true"] span:last-child { color: var(--sur-jaune); opacity: .75; }
.choix-carte[aria-pressed="true"] strong::after { content: " ✓"; }
.centre { text-align: center; margin: 0; }
.mention { font-size: .78rem; line-height: 1.4; max-width: 48ch; margin-inline: auto; }

.atouts { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.atouts li { background: var(--lilas); color: var(--texte); border: 2px solid var(--encre); border-radius: 999px; padding: 5px 12px; font-size: .88rem; font-weight: 600; }

.methode { margin-top: 34px; }
.methode h2 { margin-bottom: 14px; }
.methode ol { margin: 0; padding: 0; list-style: none; counter-reset: etape; display: flex; flex-direction: column; gap: 14px; }
.methode li { counter-increment: etape; position: relative; padding-left: 50px; color: var(--doux); font-size: .95rem; }
.methode li strong { display: block; color: var(--texte); font-size: 1.02rem; font-weight: 800; }
.methode li::before { content: counter(etape); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 12px;
  background: var(--rose); color: var(--sur-rose); border: 2.5px solid var(--encre); display: grid; place-items: center; font-weight: 800; }
.methode li:nth-child(even)::before { background: var(--jaune); color: var(--sur-jaune); }

/* ---------- Entretien ---------- */
.entete-chat { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.entete-chat h2 { margin: 0; } .entete-chat .sous { margin: 0; }
.avatar { flex-shrink: 0; width: 46px; }
.jauge { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: .85rem; font-weight: 700; flex-wrap: wrap; }
.jauge-barre { flex: 1; min-width: 120px; height: 14px; border: 2px solid var(--encre); border-radius: 999px; background: var(--champ); overflow: hidden; }
.jauge-barre i { display: block; height: 100%; width: 0; background: var(--rose); transition: width .5s ease-out; }
.jauge-coeur { color: var(--coeur); font-size: 1.1rem; }
.chat { height: 52vh; min-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 6px 4px;
  border-top: 2px dashed var(--lilas-fort); border-bottom: 2px dashed var(--lilas-fort); }
.bulle { max-width: 86%; padding: 10px 14px; border-radius: 16px; white-space: pre-wrap; overflow-wrap: anywhere; border: 2px solid var(--encre); }
.bulle.ia { background: var(--bulle-ia); align-self: flex-start; border-bottom-left-radius: 4px; }
.bulle.moi { background: var(--rose); color: var(--sur-rose); align-self: flex-end; border-bottom-right-radius: 4px; animation: pop .2s ease-out; }
.bulle.attente { color: var(--doux); font-style: italic; }
.bulle.ia.avant { background: var(--jaune); color: var(--sur-jaune); font-weight: 700; font-size: 1.04rem; display: flex; gap: 10px;
  align-items: flex-start; border-radius: 16px; box-shadow: 3px 3px 0 var(--encre); transform: rotate(-.8deg); }
.avant-icone { font-size: 1.2rem; line-height: 1.3; }
.bulle strong { font-weight: 800; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.saisie { display: flex; gap: 10px; margin-top: 12px; align-items: stretch; }
.saisie textarea { resize: none; height: 54px; }

/* ---------- Profil ---------- */
dl { margin: 0; }
dt { font-weight: 800; margin-top: 14px; font-size: .82rem; color: var(--doux); letter-spacing: .02em; }
dd { margin: 3px 0 0; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.etiquettes span { background: var(--lilas); border: 2px solid var(--encre); border-radius: 999px; padding: 2px 10px; font-size: .88rem; font-weight: 600; }
.echelle { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--doux); margin-top: 4px; flex-wrap: wrap; }
.echelle .points { display: inline-flex; gap: 4px; }
.echelle .points i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--encre); display: inline-block; background: var(--champ); }
.echelle .points i.plein { background: var(--rose); }
.presentation { font-style: italic; margin: 0 0 8px; font-size: 1.05rem; }

/* ---------- Fin ---------- */
.fin { text-align: center; }
.fin .leo-fin { width: 130px; margin: 0 auto 10px; }
.fin p { max-width: 44ch; margin-inline: auto; }
#confettis { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }

/* ---------- Proposition ---------- */
.match-tete { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 14px; margin-bottom: 18px; }
.match-tete .avatar { width: 70px; }
.bulle-leo.petite { font-size: 1rem; min-height: 0; padding: 10px 14px; margin: 0; }
.match-haut { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: center; }
.match-qui h2 { font-size: 1.6rem; margin: 0; }
.match-qui .sous { margin: 2px 0 8px; }
.anneau { --p: 0; width: 132px; aspect-ratio: 1; max-width: 100%; border-radius: 50%; border: 2.5px solid var(--encre); box-shadow: 4px 4px 0 var(--encre);
  background: conic-gradient(var(--rose) calc(var(--p) * 1%), var(--lilas) 0); display: grid; place-items: center; }
.anneau-centre { width: 74%; aspect-ratio: 1; border-radius: 50%; background: var(--carte); border: 2.5px solid var(--encre);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
.anneau-centre b { font-size: 1.75rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.anneau-centre span { font-size: .72rem; color: var(--doux); font-weight: 600; }
.photo-zone { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; margin: 18px 0 4px; }
.photo { width: 96px; aspect-ratio: 1; border-radius: 22px; border: 2.5px solid var(--encre); box-shadow: 3px 3px 0 var(--encre); overflow: hidden;
  background: linear-gradient(135deg, var(--rose), var(--lilas-fort)); background-size: cover; background-position: center;
  display: grid; place-items: center; color: #fff; font-size: 2.4rem; font-weight: 800; transition: filter .6s ease; }
.photo-zone.floue .photo { filter: blur(9px) saturate(.8); }
.photo-zone.devoilee .photo { animation: devoile .7s ease-out; }
@keyframes devoile { 0% { transform: scale(.8) rotate(-6deg); } 60% { transform: scale(1.08) rotate(3deg); } 100% { transform: scale(1) rotate(0); } }
.photo-texte { margin: 0; font-size: .9rem; color: var(--doux); }
.mot-recu { margin: 16px 0 0; padding: 12px 14px; background: var(--jaune); color: var(--sur-jaune); border: 2.5px solid var(--encre); border-radius: 14px; transform: rotate(-.6deg); }
.mot-recu p { margin: 4px 0 0; font-size: 1.05rem; font-style: italic; }
button.jaune { background: var(--jaune); color: var(--sur-jaune); }
button.jaune:hover:not(:disabled) { background: #ffc61a; }
.encadre { margin-top: 18px; padding: 16px; border: 2.5px dashed var(--lilas-fort); border-radius: 16px; }
.encadre h3 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.encadre label:first-of-type { margin-top: 10px; }
.compteur { text-align: right; font-size: .78rem; color: var(--doux); margin-top: 4px; font-variant-numeric: tabular-nums; }
.resultat { margin-top: 18px; }
.duo-question { font-size: clamp(1.3rem, 4.5vw, 1.7rem); font-weight: 800; line-height: 1.15; margin: 14px 0 16px; text-wrap: balance; }
.duo-options { display: grid; gap: 12px; }
.duo-choix { width: 100%; }
.duo-score { font-size: 1.4rem; margin: 6px 0; font-variant-numeric: tabular-nums; }
.duo-score span:first-child { color: var(--doux); text-decoration: line-through; }
.duo-score b { color: var(--rose); font-size: 2.2rem; font-weight: 800; }
.centre-actions { justify-content: center; }

.bandeau-demo { background: var(--demo-bg); color: var(--demo-fg); text-align: center; padding: 8px 16px; font-size: .85rem; font-weight: 600; border-bottom: 2px solid var(--encre); }

@media (max-width: 460px) {
  .match-haut { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .match-tete { grid-template-columns: 56px minmax(0, 1fr); } .match-tete .avatar { width: 56px; }
  .ia-ligne { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  .leo-grand { width: 84px; }
  .bulle-leo { font-size: 1rem; }
  .cartes-choix { grid-template-columns: 1fr; }
  .choix-carte { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 10px; }
  .choix-carte .emo { margin: 0; }
  .choix-carte span:last-child { flex-basis: 100%; }
  .carte { padding: 18px; box-shadow: 4px 4px 0 var(--encre); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Seuil de compatibilité */
.seuil { border: 0; padding: 0; margin: 20px 0 0; min-width: 0; }
.seuil legend { font-weight: 800; font-size: 1rem; padding: 0; margin-bottom: 10px; }
.seuil-choix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.seuil-option { position: relative; margin: 0; display: flex; flex-direction: column; gap: 2px; padding: 12px; cursor: pointer;
  background: var(--champ); border: 2.5px solid var(--encre); border-radius: 14px; box-shadow: 3px 3px 0 var(--encre); font-weight: 400; }
.seuil-option input { position: absolute; opacity: 0; pointer-events: none; }
.seuil-pct { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.seuil-nom { font-weight: 800; }
.seuil-detail { font-size: .8rem; color: var(--doux); }
.seuil-option:has(input:checked) { background: var(--jaune); color: var(--sur-jaune); transform: rotate(-1deg); }
.seuil-option:has(input:checked) .seuil-detail { color: var(--sur-jaune); opacity: .75; }
.seuil-option:has(input:focus-visible) { outline: 3px solid var(--lilas-fort); outline-offset: 2px; }
@media (max-width: 460px) { .seuil-choix { grid-template-columns: 1fr; } .seuil-option { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 10px; } .seuil-detail { flex-basis: 100%; } }

/* Rebond de Léo à chaque changement de page */
.leo-rebond { animation: rebond-leo .75s cubic-bezier(.3, .6, .4, 1) .05s both; transform-origin: 50% 100%; }
@keyframes rebond-leo {
  0%   { transform: translateY(0) scale(1, 1); }
  18%  { transform: translateY(0) scale(1.12, .86); }
  42%  { transform: translateY(-22px) scale(.94, 1.08); }
  64%  { transform: translateY(0) scale(1.1, .9); }
  80%  { transform: translateY(-6px) scale(.98, 1.03); }
  100% { transform: translateY(0) scale(1, 1); }
}

/* Objets que Léo lance quand il reconnaît une passion */
#leo-chat { position: relative; }
.objet-leo { position: absolute; left: 50%; top: 10%; font-size: 1.7rem; pointer-events: none; z-index: 5;
  animation: lancer 1.3s cubic-bezier(.2, .7, .4, 1) forwards; }
@keyframes lancer {
  0%   { transform: translate(-50%, 0) scale(.3) rotate(0); opacity: 0; }
  15%  { opacity: 1; }
  45%  { transform: translate(calc(-50% + var(--dx) * .6), -46px) scale(1.25) rotate(200deg); }
  100% { transform: translate(calc(-50% + var(--dx)), 10px) scale(.9) rotate(400deg); opacity: 0; }
}
.objet-leo.arc { font-size: 2.6rem; top: -10%; animation: arc-en-ciel 2.3s ease-out forwards; }
@keyframes arc-en-ciel {
  0%   { transform: translate(-50%, 10px) scale(.2); opacity: 0; }
  25%  { transform: translate(-50%, -38px) scale(1.35); opacity: 1; }
  45%  { transform: translate(-50%, -34px) scale(1.2) rotate(-6deg); }
  65%  { transform: translate(-50%, -36px) scale(1.25) rotate(6deg); opacity: 1; }
  100% { transform: translate(-50%, -70px) scale(1); opacity: 0; }
}
.pin-drapeau { position: absolute; right: -8px; bottom: -4px; font-size: 1.15rem; line-height: 1; background: var(--carte);
  border: 2px solid var(--encre); border-radius: 50%; width: 26px; height: 26px; display: grid; place-items: center;
  box-shadow: 2px 2px 0 var(--encre); animation: epingle .4s ease-out; z-index: 4; }
.pin-drapeau.deux { right: auto; left: -8px; }
@keyframes epingle { 0% { transform: scale(0) rotate(-30deg); } 70% { transform: scale(1.25) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
/* Léo brandit le symbole de ta région */
.brandi { position: absolute; left: 50%; top: -6px; font-size: 1.9rem; line-height: 1; pointer-events: none; z-index: 5;
  transform-origin: 50% 120%; animation: brandir 2.5s ease-in-out forwards; }
@keyframes brandir {
  0%   { transform: translate(-50%, 18px) scale(.3); opacity: 0; }
  14%  { transform: translate(-50%, -30px) scale(1.2) rotate(0); opacity: 1; }
  28%  { transform: translate(-50%, -30px) scale(1.15) rotate(-18deg); }
  42%  { transform: translate(-50%, -30px) scale(1.15) rotate(18deg); }
  56%  { transform: translate(-50%, -30px) scale(1.15) rotate(-18deg); }
  70%  { transform: translate(-50%, -30px) scale(1.15) rotate(14deg); opacity: 1; }
  100% { transform: translate(-50%, -48px) scale(.9) rotate(0); opacity: 0; }
}

/* Léa : rouge à lèvres, cils, et sa propre couleur */
.leo .levres, .leo .cils { display: none; }
.leo[data-perso="lea"] .levres, .leo[data-perso="lea"] .cils { display: inline; }
.leo[data-perso="lea"] .bouche { display: none; }
.leo[data-perso="lea"] .corps { fill: var(--lilas-fort); }

/* Choix de l'IA perso */
.choix-perso { display: flex; flex-direction: column; gap: 14px; }
.choix-perso h2 { margin: 0; }
.persos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.perso-carte { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 12px; text-align: center;
  background: var(--champ); color: var(--texte); font-weight: 400; border-radius: 18px; box-shadow: var(--ombre); }
.perso-carte:hover { background: var(--accent-doux); }
.perso-carte > div { width: 100px; }
.perso-carte strong { font-size: 1.35rem; font-weight: 800; margin-top: 4px; }
.perso-carte span { font-size: .88rem; color: var(--doux); }
.perso-carte[aria-pressed="true"] { background: var(--jaune); color: var(--sur-jaune); transform: rotate(-1.5deg); }
.perso-carte[aria-pressed="true"] span { color: var(--sur-jaune); opacity: .75; }
.changer-perso { align-self: flex-start; }
@media (max-width: 460px) { .perso-carte > div { width: 80px; } .persos { gap: 10px; } }
.perso-dit { position: relative; margin: 0 0 14px; padding: 8px 12px; background: var(--bulle-ia); border: 2px solid var(--encre); border-radius: 14px;
  font-size: .9rem; font-weight: 700; line-height: 1.3; color: var(--texte); text-wrap: balance; }
.perso-dit::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px; background: var(--bulle-ia);
  border-right: 2px solid var(--encre); border-bottom: 2px solid var(--encre); transform: translateX(-50%) rotate(45deg); }
.perso-carte[aria-pressed="true"] .perso-dit { color: var(--texte); }
.perso-dit { flex-grow: 1; display: flex; align-items: center; justify-content: center; }

/* Ailleurs / ici */
.difference { margin-top: 34px; }
.difference h2 { font-size: clamp(1.4rem, 5vw, 1.8rem); margin-bottom: 14px; }
.colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.colonne { border: 2.5px solid var(--encre); border-radius: 18px; padding: 16px; }
.colonne h3 { margin: 0 0 10px; font-size: 1.05rem; font-weight: 800; }
.colonne ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.colonne li { position: relative; padding-left: 28px; font-size: .93rem; line-height: 1.35; }
.colonne li::before { position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--encre);
  display: grid; place-items: center; font-size: .72rem; font-weight: 800; }
.ailleurs { background: var(--champ); color: var(--doux); border-style: dashed; }
.ailleurs h3 { color: var(--doux); }
.ailleurs li::before { content: "✕"; background: var(--lilas); color: var(--texte); }
.ici { background: var(--jaune); color: var(--sur-jaune); box-shadow: 6px 6px 0 var(--encre); transform: rotate(-.8deg); }
.ici li::before { content: "✓"; background: var(--rose); color: var(--sur-rose); }
@media (max-width: 560px) { .colonnes { grid-template-columns: 1fr; } .ici { order: -1; } }