/* Boostmoi — Le Valomètre. Identité « pastel posé » : crème chaud, encre marine, six pastels, Fraunces + DM Sans. */
:root {
  --creme: #fff7ee; --papier: #fffdf9; --encre: #22284a; --encre-2: #5c6280;
  --corail: #f6a48e; --safran: #f8d483; --rose: #f8c6d1; --bleu: #a8b7ec; --vert: #a9d9bf; --lavande: #cdc4f1;
  --corail-p: #fde1d8; --safran-p: #fdf0cd; --rose-p: #fde6ec; --bleu-p: #e1e6f9; --vert-p: #e3f4ea; --lavande-p: #ece8fa;
  --brique: #b8402f; --ligne: rgb(34 40 74 / 0.14); --ligne-forte: rgb(34 40 74 / 0.3);
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --cursive: "Sacramento", "Brush Script MT", cursive;
  --t: 1;
  --aise: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: light;
}
@media (prefers-reduced-motion: reduce) { :root { --t: 0; } }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--creme); color: var(--encre); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
svg { display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; border-radius: 8px; }
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }
.evitement { position: absolute; left: -999px; top: 8px; min-height: 44px; display: inline-flex; align-items: center; padding: 8px 14px; background: var(--encre); color: var(--creme); border-radius: 8px; z-index: 50; }
.evitement:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Colonne et écrans ---- */
.appli { width: min(100%, 430px); min-height: 100%; margin: 0 auto; }
.ecran { position: relative; min-height: 100dvh; display: flex; flex-direction: column; gap: 20px; padding: calc(20px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); animation: arrivee calc(360ms * var(--t)) var(--aise) both; overflow: hidden; }
.ecran > * { position: relative; }
@keyframes arrivee { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
.serif { font-family: var(--serif); font-variation-settings: "SOFT" 0, "WONK" 0; }
.titre { font-family: var(--serif); font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; font-weight: 700; line-height: 1; letter-spacing: -0.02em; text-wrap: balance; font-size: clamp(34px, 9.5vw, 42px); }
.question { font-family: var(--serif); font-variation-settings: "opsz" 36, "SOFT" 0, "WONK" 0; font-weight: 500; font-size: clamp(23px, 6.4vw, 27px); line-height: 1.2; text-wrap: pretty; }
.etiquette { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.meta { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mention { font-size: 13px; color: var(--encre-2); text-align: center; text-wrap: pretty; }
.sous { color: var(--encre-2); text-wrap: pretty; }
.pousse-bas { margin-top: auto; display: grid; gap: 12px; }

/* ---- Boutons ---- */
.bouton { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 58px; padding: 0 24px; border: 0; border-radius: 999px; font-weight: 700; font-size: 17px; line-height: 1.1; color: var(--encre); background: var(--corail); transition: transform calc(120ms * var(--t)) ease, opacity 150ms ease; }
.bouton:active { transform: scale(0.985); }
.bouton svg { width: 20px; height: 20px; flex: none; }
.bouton--encre { background: var(--encre); color: var(--creme); }
.bouton--contour { background: transparent; border: 2px solid var(--encre); }
.bouton[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.lien { background: none; border: 0; padding: 10px 6px; min-height: 44px; font-weight: 700; font-size: 15px; color: var(--encre-2); text-decoration: underline; text-underline-offset: 3px; }
.rond { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--encre); background: transparent; }
.rond svg { width: 20px; height: 20px; }
.barre-haute { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }

/* ---- Le Valomètre (logo-jauge) ---- */
.valometre { display: block; width: 100%; height: auto; overflow: visible; }
.valometre__aiguille { transform-origin: 200px 250px; transform-box: view-box; will-change: transform; }
.valometre__mot { font-family: var(--cursive); font-size: 38px; fill: var(--encre); }
.valometre--heros { width: min(100%, 340px); margin: 0 auto; }
.valometre--mini { width: 92px; flex: none; }
.valometre--resultat { width: min(100%, 360px); margin: 0 auto; }
.valometre--question { width: min(62%, 230px); margin: 0 auto; }
.jauge-question { display: grid; justify-items: center; padding: 2px 0 0; }
@media (max-height: 700px) { .valometre--question { width: 170px; } }
.heros { display: grid; place-items: center; padding: 8px 0 0; }
.jauge-resultat { position: relative; display: grid; justify-items: center; padding: 8px 0 0; }
.jauge-resultat .chiffre { font-family: var(--serif); font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; font-weight: 700; font-size: clamp(48px, 15vw, 60px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: -6px; }
.jauge-resultat .chiffre small { font-family: var(--sans); font-size: 18px; font-weight: 700; margin-left: 2px; }

/* ---- Arrivée ---- */
.bouquet { position: absolute; inset: -40px -30px auto -30px; height: 44%; pointer-events: none; }
.bouquet path, .bouquet circle, .bouquet rect { transform-box: fill-box; transform-origin: center; animation: pousse calc(700ms * var(--t)) var(--aise) both; }
.bouquet :nth-child(2) { animation-delay: calc(80ms * var(--t)); } .bouquet :nth-child(3) { animation-delay: calc(160ms * var(--t)); } .bouquet :nth-child(4) { animation-delay: calc(240ms * var(--t)); } .bouquet :nth-child(5) { animation-delay: calc(320ms * var(--t)); }
@keyframes pousse { from { opacity: 0; transform: scale(0.6) rotate(-8deg); } to { opacity: 1; transform: none; } }
.marque { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.marque svg { width: 28px; height: 28px; }
.espace { height: 26vh; }
@media (max-height: 700px) { .espace { height: 14vh; } .bouquet { height: 36%; } }
.champ { display: grid; gap: 8px; }
.champ label { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.champ input { width: 100%; min-height: 58px; padding: 0 18px; border: 2px solid var(--encre); border-radius: 18px; background: var(--papier); font: 700 20px var(--serif); color: var(--encre); }
.champ input::placeholder, .champ textarea::placeholder { color: rgb(34 40 74 / 0.4); font-weight: 500; }
.champ textarea { width: 100%; padding: 14px 18px; border: 2px solid var(--encre); border-radius: 18px; background: var(--papier); font: 500 18px/1.4 var(--serif); color: var(--encre); resize: vertical; min-height: 96px; }
.champ textarea:focus-visible { outline: none; border-color: var(--brique); }
.champ input:focus-visible { outline: none; border-color: var(--brique); }
.champ .aide { min-height: 20px; font-size: 13px; color: var(--brique); }

/* ---- Question ---- */
.segments { display: grid; grid-template-columns: repeat(21, 1fr); gap: 3px; }
.segments i { height: 8px; border-radius: 999px; background: var(--ligne); transition: background-color calc(300ms * var(--t)) ease; }
.segments i.ok { background: var(--corail); }
.reponses { display: grid; gap: 12px; }
.reponse { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; min-height: 68px; padding: 14px 16px; border: 2px solid transparent; border-radius: 18px; background: var(--fond); text-align: left; font-weight: 700; font-size: 16px; line-height: 1.35; transition: transform calc(120ms * var(--t)) ease, border-color 120ms ease; }
.reponse:active { transform: scale(0.985); }
.reponse .lettre { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--c); font-size: 14px; font-weight: 700; transition: background-color 120ms ease, color 120ms ease; }
.reponse[aria-pressed="true"] { border-color: var(--encre); }
.reponse[aria-pressed="true"] .lettre { background: var(--encre); color: var(--creme); }
.question-bloc { display: grid; gap: 6px; }

/* ---- Résultat ---- */
.resultat { align-items: center; text-align: center; }
.anneau { position: relative; display: grid; place-items: center; width: min(68vw, 260px); height: min(68vw, 260px); margin: 24px auto 8px; }
.anneau svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.anneau circle { fill: none; stroke-width: 11; }
.anneau .piste { stroke: var(--ligne); }
.anneau .arc { stroke-dasharray: 0 100; transition: stroke-dasharray calc(1800ms * var(--t)) cubic-bezier(0.25, 0.9, 0.3, 1); }
.anneau .arc2 { stroke-dashoffset: calc(-1 * var(--p1)); transition-delay: calc(1700ms * var(--t)); transition-duration: calc(900ms * var(--t)); }
.resultat.lance .arc1 { stroke-dasharray: var(--p1) 100; }
.resultat.lance .arc2 { stroke-dasharray: var(--p2) 100; }
.anneau .chiffre { font-family: var(--serif); font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; font-weight: 700; font-size: clamp(52px, 17vw, 68px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.anneau .chiffre small { font-family: var(--sans); font-size: 18px; font-weight: 700; margin-left: 2px; }
.apres { opacity: 0; translate: 0 10px; transition: opacity calc(400ms * var(--t)) ease, translate calc(400ms * var(--t)) var(--aise); }
.resultat.fin .apres { opacity: 1; translate: 0 0; }
.tendances { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.pastille { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 8px; border-radius: 999px; background: var(--c); font-size: 14px; font-weight: 700; }
.pastille i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgb(255 253 249 / 0.85); }
.pastille i svg { width: 16px; height: 16px; }

/* ---- Révélation ---- */
.ecran--profil { background: var(--c); padding-bottom: 0; }
.ecran--profil .barre-haute .rond { border-color: var(--encre); }
.entete-profil { display: grid; gap: 10px; padding: 8px 0 24px; animation: retourne calc(600ms * var(--t)) var(--aise) both; }
@keyframes retourne { from { opacity: 0; transform: perspective(1000px) rotateY(40deg); } to { opacity: 1; transform: none; } }
.entete-profil .signe { width: 104px; height: 104px; }
.entete-profil .tu-es { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 19px; }
.entete-profil h1 { font-family: var(--serif); font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; font-weight: 700; font-size: clamp(42px, 12vw, 52px); line-height: 0.95; letter-spacing: -0.02em; }
.entete-profil .mots { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; }
.entete-profil .citation { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 19px; line-height: 1.4; }
.feuille { margin: auto -20px 0; padding: 22px 20px calc(24px + env(safe-area-inset-bottom, 0px)); background: var(--creme); border-radius: 28px 28px 0 0; display: grid; gap: 14px; }
.rubriques { display: grid; gap: 10px; }
.rubrique { display: grid; gap: 3px; padding: 14px 16px; border-radius: 16px; background: var(--papier); border: 1px solid var(--ligne); font-size: 15px; line-height: 1.45; }
.rubrique small { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brique); }
.portrait { font-size: 15px; line-height: 1.55; color: var(--encre-2); }
details.second { border: 1px solid var(--ligne); border-radius: 16px; background: var(--papier); padding: 0 16px; }
details.second summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 60px; padding: 12px 0; cursor: pointer; list-style: none; font-weight: 700; font-size: 14px; }
details.second summary::-webkit-details-marker { display: none; }
details.second summary .pastille { flex: 0 1 auto; min-width: 0; max-width: 100%; }
details.second summary .pastille span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.second summary .intitule { flex: 1 0 100%; color: var(--encre-2); }
details.second summary::after { content: "+"; margin-left: auto; font-family: var(--serif); font-size: 24px; line-height: 1; }
details.second[open] summary::after { content: "–"; }
details.second p { padding: 0 0 16px; font-size: 15px; line-height: 1.5; }

/* ---- Tableau blanc ---- */
.tableau { width: min(100%, 390px); margin: 0 auto; aspect-ratio: 25 / 19; border-radius: 18px; background: var(--fond); border: 2px solid var(--encre); overflow: hidden; }
.tableau canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.outils { display: grid; gap: 10px; }
.outil { display: grid; gap: 6px; }
.outil .etiquette { color: var(--encre-2); }
.nuances { display: flex; flex-wrap: wrap; gap: 8px; }
.nuance { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--encre); background: var(--n); padding: 0; }
.nuance[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--creme), 0 0 0 5px var(--encre); }
.outil--actions { display: flex; flex-wrap: wrap; gap: 4px 14px; }

/* ---- Carte : l'aperçu est l'image fabriquée sur l'appareil ---- */
.carte-zone { display: grid; justify-items: center; }
.apercu { position: relative; width: min(100%, 330px, 52dvh); aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: var(--papier); box-shadow: 0 16px 40px rgb(34 40 74 / 0.14); display: grid; place-items: center; }
.apercu__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.apercu__attente { font-size: 14px; font-weight: 700; color: var(--encre-2); text-align: center; padding: 20px; }
.apercu[aria-busy="true"]::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.5) 50%, transparent 70%); background-size: 200% 100%; animation: brille calc(1.4s * var(--t) + 0.01s) linear infinite; }
@keyframes brille { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.actions { display: grid; gap: 10px; }

/* ---- Modale d'avis ---- */
.modale { width: min(100% - 32px, 430px); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: 24px; background: var(--creme); color: var(--encre); box-shadow: 0 24px 60px rgb(34 40 74 / 0.25); overflow: auto; }
.modale::backdrop { background: rgb(34 40 74 / 0.45); backdrop-filter: blur(2px); }
.modale[open] { animation: arrivee calc(300ms * var(--t)) var(--aise) both; }
.modale__corps { display: grid; gap: 14px; padding: 24px 22px calc(22px + env(safe-area-inset-bottom, 0px)); }
.etoiles { display: flex; gap: 6px; justify-content: center; }
.etoile { width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; }
.etoile svg { width: 38px; height: 38px; fill: var(--papier); stroke: var(--encre); stroke-width: 1.4; stroke-linejoin: round; transition: transform calc(140ms * var(--t)) var(--aise), fill 120ms ease; }
.etoile:active svg { transform: scale(0.9); }
.etoile--pleine svg { fill: var(--safran); }
.etoile[aria-checked="true"] svg { transform: scale(1.15); }
.etoiles__mot { min-height: 22px; text-align: center; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 18px; color: var(--encre-2); }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.modale .aide { min-height: 20px; font-size: 13px; color: var(--brique); }
.modale .actions { display: grid; gap: 6px; justify-items: center; }
.modale .actions .bouton { justify-self: stretch; }

/* ---- Toast ---- */
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; max-width: min(92vw, 400px); padding: 12px 18px; border-radius: 999px; background: var(--encre); color: var(--creme); font-weight: 700; font-size: 14px; text-align: center; z-index: 20; }
.toast[hidden] { display: none; }