:root{
  --ground:#FFF6EE; --paper:#FFFCF8; --ink:#231C19; --ink-soft:#6E5C55; --line:#EAD9CB;
  --blue:#154256; --blue-soft:#4E7889;
  --terra:#D6977E; --terra-deep:#B97A62; --sand:#ECCFB4; --sand-light:#F5E3D2; --tan:#CDA386;
  --sage:#85977F; --sage-deep:#5E7059; --sage-pale:#E8EDE4;
  --serif:"DM Serif Display",Georgia,"Times New Roman",serif;
  --body:"Martel",Georgia,serif;
}
html{height:100%;color-scheme:light}
body{margin:0;min-height:100%;background:var(--ground);color:var(--ink);font-family:var(--body);font-weight:300;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
button,input,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;text-wrap:balance;line-height:1.15;color:var(--blue)}
p{margin:0}
a{color:var(--blue)}
[hidden]{display:none!important}

/* ---------- shell ---------- */
.app{min-height:100vh;display:flex;flex-direction:column}
.brand{display:flex;justify-content:center;align-items:center;padding:18px 16px 6px;gap:10px}
.brand .word{font-family:var(--serif);font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.brand .dot{width:6px;height:6px;border-radius:50%;background:var(--terra)}
.screen{flex:1;display:flex;flex-direction:column;padding:8px 20px 40px;max-width:1120px;width:100%;margin:0 auto;animation:screenIn .6s ease both}
@keyframes screenIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.foot{padding:14px 20px 18px;text-align:center;font-size:13px;color:var(--ink-soft)}
.foot a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer;font-family:var(--body);font-weight:400;font-size:16px;letter-spacing:.02em;text-decoration:none;transition:transform .2s,background .2s,box-shadow .2s}
.btn-primary{background:var(--terra);color:#fff;box-shadow:0 8px 24px rgba(214,151,126,.32)}
.btn-primary:hover{background:var(--terra-deep);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink-soft);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--tan);color:var(--ink)}
.btn-text{background:none;border:none;color:var(--ink-soft);text-decoration:underline;text-underline-offset:4px;padding:8px 4px;cursor:pointer;min-height:44px}
.btn:focus-visible,.btn-text:focus-visible,.seed:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* ---------- photo frame ---------- */
.photo{position:relative;overflow:hidden;border-radius:18px;background:linear-gradient(160deg,var(--sand-light),var(--sand) 55%,#E4BFA6);aspect-ratio:3/2;width:100%;max-width:100%}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .6s}
.photo img.ok{opacity:1}
.photo .ph{position:absolute;inset:0;display:flex;align-items:flex-end;padding:14px 16px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(35,28,25,.55)}
.photo .ph::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 25%,rgba(255,255,255,.55),transparent 55%),radial-gradient(ellipse at 75% 80%,rgba(143,160,138,.28),transparent 50%)}
.photo.has-img .ph{display:none}
.photo.photo-round{aspect-ratio:1/1;border-radius:50%;width:230px;max-width:230px;margin:0 auto 22px;box-shadow:0 0 0 6px var(--sand-light),0 10px 28px rgba(21,66,86,.2)}
.photo.photo-round img{object-position:50% 22%}

/* ---------- home ---------- */
.home{gap:26px;justify-content:center;align-items:center;max-width:620px;text-align:center}
.home .copy{display:flex;flex-direction:column;gap:22px;align-items:center}
.home h1{font-size:clamp(30px,7.2vw,42px);font-style:italic;color:var(--blue)}
.home .lead{font-size:18px;color:var(--ink-soft);max-width:34em}
.home .mention{font-size:13px;color:var(--ink-soft);letter-spacing:.02em}
.home .cta{display:flex;flex-direction:column;align-items:center;gap:10px}
.home .photo{max-width:520px}
.home .photo.photo-round{max-width:230px;width:230px}

/* ---------- question layout ---------- */
.q{gap:6px}
.q-text{display:flex;flex-direction:column;gap:12px;padding-top:6px;transition:opacity .6s ease}
.q-text.swap{opacity:0}
.q-eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-deep);display:flex;align-items:center;gap:8px}
.q-eyebrow::before{content:"";width:18px;height:1px;background:var(--sage)}
.q-sentence{font-family:var(--serif);font-size:clamp(23px,5.6vw,30px);line-height:1.28;max-width:22em;color:var(--blue)}
.q-help{font-size:14px;color:var(--ink-soft)}
.stage{width:100%;max-width:520px;margin:0 auto;aspect-ratio:600/640}
.stage svg{width:100%;height:100%;display:block;overflow:hidden}
.g-petal{cursor:pointer;outline:none}
.g-petal .petal-edge{transition:stroke-width .25s}
.g-petal:hover .petal-body{fill-opacity:.98}
.g-petal:focus-visible .petal-edge{stroke:#0E2F3E;stroke-width:3}
.petal-label{font-family:var(--body);font-weight:600;text-anchor:middle;dominant-baseline:middle;pointer-events:none;paint-order:stroke fill;stroke-linejoin:round}
.petal-wrap{transform-box:fill-box;transform-origin:center}
.petal-wrap.bloom{animation:bloom .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes bloom{from{opacity:0;transform:scale(.86) rotate(-3deg)}to{opacity:1;transform:none}}
.petal-wrap.chosen .petal-body{fill:url(#petalSel)}
.petal-wrap.chosen .petal-edge{stroke-width:2.4}
/* le pétale choisi flotte un instant, comme retenu par un souffle, avant de se détacher */
.petal-wrap.chosen{animation:floaty .7s ease-in-out both}
@keyframes floaty{
  0%{transform:none}
  28%{transform:translate(-3px,-7px) rotate(-2.2deg)}
  62%{transform:translate(3px,-10px) rotate(2deg)}
  100%{transform:translate(0,-9px) rotate(.4deg)}
}
.petal-label.label-in{animation:labelIn .5s ease both}
@keyframes labelIn{from{opacity:0}to{opacity:1}}
/* l'envol : le pétale se soulève à peine, puis tombe en tournoyant — chaque chute est
   différente (amplitude, dérive, rotation tirées au hasard au moment du clic) */
.fall{transform-box:fill-box;transform-origin:center;animation:leaffall 1s cubic-bezier(.34,.04,.62,.98) both;pointer-events:none}
@keyframes leaffall{
  0%  {transform:translate(0,-9px) rotate(0deg);opacity:1}
  10% {transform:translate(calc(var(--s)*var(--ax)*.35),-24px) rotate(calc(var(--s)*var(--rz)*-.35));opacity:1}
  30% {transform:translate(calc(var(--s)*var(--ax)*1.1 + var(--dx)*.3),56px) rotate(calc(var(--s)*var(--rz)*.9));opacity:1}
  52% {transform:translate(calc(var(--s)*var(--ax)*-.7 + var(--dx)*.55),150px) rotate(calc(var(--s)*var(--rz)*-1.1));opacity:.92}
  74% {transform:translate(calc(var(--s)*var(--ax)*.9 + var(--dx)*.8),252px) rotate(calc(var(--s)*var(--rz)*1.3));opacity:.6}
  100%{transform:translate(calc(var(--s)*var(--ax)*-.3 + var(--dx)),360px) rotate(calc(var(--s)*var(--rz)*-.6));opacity:0}
}
.busy .g-petal{pointer-events:none}

/* pensées : l'indicateur en pétales */
.note-zone{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:2px}
.seed{display:inline-flex;align-items:center;gap:12px;background:none;border:0;cursor:pointer;color:var(--ink-soft);font-size:15px;padding:8px 12px;border-radius:999px;min-height:48px}
.seed:hover{color:var(--blue)}
.seed svg{width:54px;height:54px;flex:none;overflow:visible}
.seed .mini{transform-box:fill-box;transform-origin:center}
.seed .mini.new{animation:minibloom .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes minibloom{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}
.note-panel{width:100%;max-width:520px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;animation:screenIn .35s ease both}
.note-panel label{font-family:var(--serif);font-size:19px;color:var(--blue)}
textarea{width:100%;min-height:96px;resize:vertical;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;font-size:16px;line-height:1.5;font-weight:300}
textarea:focus,input:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* reveal, last question */
.reveal-line{text-align:center;font-family:var(--serif);font-style:italic;font-size:clamp(24px,6vw,32px);color:var(--blue);margin-top:28px;animation:screenIn 1s ease both}
.last{gap:18px;max-width:600px;justify-content:center}
.last h2{font-size:clamp(28px,6.5vw,38px);font-style:italic}
.last .q-sentence{font-size:clamp(20px,5vw,25px)}

/* result */
.result{max-width:640px;gap:22px}
.result .kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue-soft)}
.result h1{font-size:clamp(30px,7vw,44px)}
.result .body{display:flex;flex-direction:column;gap:14px}
.result h3{font-size:20px;margin-top:8px}
.result ul{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:4px}
.result blockquote{margin:6px 0 0;padding:14px 18px;border-left:2px solid var(--blue-soft);background:#EEF3F5;border-radius:0 14px 14px 0;font-family:var(--serif);font-size:20px;line-height:1.35;color:var(--blue)}
.result blockquote span{display:block}
.result .photo{max-width:520px}
.result .actions{display:flex;flex-direction:column;gap:12px;align-items:flex-start;margin-top:6px}

/* contact form */
.form{display:flex;flex-direction:column;gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px;max-width:520px;width:100%}
.form h3{font-size:22px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:14px;color:var(--ink-soft);letter-spacing:.02em}
.field input{min-height:48px;border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:#fff;font-size:16px;width:100%;min-width:0;box-sizing:border-box}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5}
.consent input{width:22px;height:22px;margin-top:3px;flex:none;accent-color:var(--blue)}
.fine{font-size:13px;color:var(--ink-soft);line-height:1.5}
.err{color:#9B3B2A;font-size:14px}
.thanks{max-width:560px;justify-content:center;gap:14px}
.thanks h2{font-size:clamp(30px,7vw,42px);font-style:italic}
.thanks p{font-size:19px;color:var(--ink-soft)}

/* ---------- admin ---------- */
.admin{max-width:900px;gap:22px}
.admin-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.admin h1{font-size:34px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.stat b{display:block;font-family:var(--serif);font-size:30px;font-weight:400;line-height:1;font-variant-numeric:tabular-nums;color:var(--blue)}
.stat span{font-size:13px;color:var(--ink-soft)}
.dist{display:flex;flex-direction:column;gap:6px;font-size:14px}
.dist .bar{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.dist i{display:block;height:6px;border-radius:3px;background:var(--sand);position:relative;overflow:hidden}
.dist i::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--blue-soft)}
.list{display:flex;flex-direction:column;gap:8px}
.list button{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center;text-align:left;width:100%;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 16px;cursor:pointer}
.list button:hover{border-color:var(--tan)}
.list .name{font-family:var(--serif);font-size:19px;color:var(--blue)}
.list .meta{font-size:13px;color:var(--ink-soft);grid-column:1/-1}
.pill{font-size:12px;letter-spacing:.06em;color:var(--terra-deep);background:var(--sand-light);border-radius:999px;padding:4px 10px;white-space:nowrap}
.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:18px}
.card h2{font-size:26px}
.card h3{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-soft);margin-top:6px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:16px}
.kv dt{color:var(--ink-soft)}
.kv dd{margin:0}
.quote{border-left:2px solid var(--sand);padding:4px 14px;color:var(--ink);white-space:pre-wrap}
.explore{background:#EEF3F5;border-radius:14px;padding:14px 16px;font-family:var(--serif);font-size:19px;color:var(--blue)}
.danger{color:#9B3B2A;border-color:#E6C4BC}
.login{max-width:420px;justify-content:center;gap:16px}
.export{width:100%;min-height:120px;font-family:ui-monospace,Menlo,monospace;font-size:12px}
.empty{color:var(--ink-soft);font-style:italic;padding:20px 0}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-size:14px;opacity:0;transition:opacity .3s;pointer-events:none}
.toast.show{opacity:1}

/* ---------- desktop ---------- */
@media (min-width:900px){
  .screen{padding:24px 40px 60px}
  .q{display:grid;grid-template-columns:40% 60%;grid-template-rows:auto 1fr;gap:12px 40px;align-items:center;flex:1}
  .q-text{grid-column:1;grid-row:1;padding-top:0;gap:22px;align-self:end}
  .q-sentence{font-size:32px}
  .q .stage{grid-column:2;grid-row:1/3;max-width:min(620px,54vw);aspect-ratio:860/752}
  .q .note-zone{grid-column:1;grid-row:2;align-items:flex-start;align-self:start;margin-top:14px}
  .q .note-panel{max-width:100%}
  .home{max-width:1000px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;text-align:center}
  .home .photo{order:2;max-width:100%}
  .home .photo.photo-round{max-width:280px;width:280px}
  .home h1{font-size:44px}
  .result{max-width:720px}
  .brand{justify-content:flex-start;padding:22px 40px 0}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .fall{animation:rmOut .35s ease both!important}
  .petal-wrap.pfade{animation:rmOut .3s ease both!important}
  @keyframes rmOut{to{opacity:0}}
  .screen,.petal-wrap.bloom,.note-panel,.reveal-line,.seed .mini.new{animation:rmIn .25s ease both!important}
  @keyframes rmIn{from{opacity:0}to{opacity:1}}
}

/* ---------- plugin ---------- */
.brand-link{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand-link:hover .word{color:var(--blue)}
select{font:inherit;color:inherit}