/* Partants : la grammaire commune des écrans, reprise de la maquette.
   Polices : à embarquer dans le dépôt, jamais chargées depuis un service tiers (RGPD). */
:root{
  --ground:#FFF7EF;
  --paper:#FFFFFF;
  --ink:#2A1E36;
  --ink-2:#5E5368;
  --muted:#6E6377;
  --line:#EADFD3;
  --sable:#F3ECE4;
  --tomate:#EE5A2F;
  --tomate-fonce:#C23F17;
  --tomate-ombre:#8C2B0C;
  --tomate-pale:#FFE4D8;
  --tomate-ink:#A3360F;
  --soleil:#FFC94A;
  --soleil-ombre:#D49B12;
  --soleil-pale:#FFF0C4;
  --soleil-ink:#7A5200;
  --menthe:#1B7F55;
  --menthe-ombre:#0F5537;
  --menthe-pale:#DAF2E5;
  --menthe-ink:#12603F;
  --ciel:#3550C9;
  --ciel-pale:#E2E8FF;
  --ciel-ink:#2A41A8;
  --display:'Bricolage Grotesque','Trebuchet MS',sans-serif;
  --body:'Figtree','Segoe UI',sans-serif;
}
*{box-sizing:border-box}
h1,h2,h3,p{margin:0}

/* L'écran */
body{margin:0;background:var(--ground)}
.screen{width:100%;max-width:480px;height:100dvh;margin:0 auto;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.4;display:flex;flex-direction:column;overflow:hidden;position:relative}
.top{flex:0 0 auto;padding:18px 20px 10px;display:flex;align-items:center;gap:12px}
.scroll{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none;padding:6px 20px 28px;display:flex;flex-direction:column;gap:18px}
.scroll::-webkit-scrollbar{display:none}
.scroll>*{flex-shrink:0}
.foot{flex:0 0 auto;padding:14px 20px 26px;display:flex;flex-direction:column;gap:6px;background:var(--ground);box-shadow:0 -14px 18px -16px rgba(42,30,54,.35)}

/* Texte */
.display{font-family:var(--display);font-weight:800;letter-spacing:-0.025em;line-height:1.03}
.h1{font-size:34px}
.h2{font-size:28px}
.h3{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-0.01em;line-height:1.18}
.kicker{font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.lead{font-size:17px;color:var(--ink-2)}
.meta{font-size:14px;color:var(--ink-2)}
.small{font-size:13px;color:var(--muted)}
.strong{font-weight:800;color:var(--ink)}
.center{text-align:center}

/* Mise en page */
.row{display:flex;align-items:center;gap:12px}
.row.start{align-items:flex-start}
.row.between{justify-content:space-between}
.col{display:flex;flex-direction:column;gap:3px;min-width:0}
.grow{flex:1 1 auto;min-width:0}
.wrap{flex-wrap:wrap}
.divider{height:1px;background:var(--line)}
.section{display:flex;flex-direction:column;gap:10px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:8px}

/* Cartes */
.card{background:var(--paper);border-radius:24px;padding:16px;display:flex;flex-direction:column;gap:12px;color:inherit;text-decoration:none;box-shadow:0 1px 0 rgba(42,30,54,.05),0 12px 24px -16px rgba(42,30,54,.32)}
.card.soleil{background:var(--soleil)}
.card.menthe{background:var(--menthe-pale)}
.card.ciel{background:var(--ciel-pale)}
.card.tomate{background:var(--tomate-pale)}
.card.flat{box-shadow:none;border:2px solid var(--line);background:transparent}
.card.picked{box-shadow:0 0 0 3px var(--ink),0 12px 24px -16px rgba(42,30,54,.32)}

/* Boutons */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border-radius:999px;font-family:var(--body);font-weight:800;font-size:17px;text-decoration:none;border:0;cursor:pointer;color:var(--ink);background:var(--paper);transition:transform .12s ease}
.btn:active{transform:translateY(3px)}
.btn.primary{background:var(--tomate-fonce);color:#fff;box-shadow:0 4px 0 var(--tomate-ombre)}
.btn.go{background:var(--menthe);color:#fff;box-shadow:0 4px 0 var(--menthe-ombre)}
.btn.sun{background:var(--soleil);color:var(--ink);box-shadow:0 4px 0 var(--soleil-ombre)}
.btn.ink{background:var(--ink);color:#fff;box-shadow:0 4px 0 #120B19}
.btn.outline{background:var(--paper);border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.btn.ghost{background:transparent;color:var(--ink-2);font-weight:700;min-height:44px}
.btn.sm{min-height:44px;font-size:15px;padding:0 16px}
.btn.block{width:100%}
.btn .icon{width:20px;height:20px}
.iconbtn{width:44px;height:44px;flex:0 0 44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--paper);color:var(--ink);text-decoration:none;border:0;box-shadow:0 2px 0 var(--line);cursor:pointer}

/* Icônes */
.icon{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* Pastilles de choix */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 15px;border-radius:999px;background:var(--paper);border:2px solid var(--line);font-family:var(--body);font-weight:700;font-size:15px;color:var(--ink);cursor:pointer;text-decoration:none}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip .icon{width:18px;height:18px}

/* Étiquettes */
.tag{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:13px;font-weight:800;padding:6px 11px;border-radius:999px;line-height:1}
.tag.now{background:var(--menthe-pale);color:var(--menthe-ink)}
.tag.we{background:var(--tomate-pale);color:var(--tomate-ink)}
.tag.later{background:var(--ciel-pale);color:var(--ciel-ink)}
.tag.idea{background:var(--soleil-pale);color:var(--soleil-ink)}
.tag.plain{background:var(--sable);color:var(--ink-2)}
.tag.white{background:var(--paper);color:var(--ink)}
.tag .icon{width:14px;height:14px;stroke-width:2.4}
.dot{width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:var(--menthe);box-shadow:0 0 0 4px rgba(27,127,85,.18)}
.sticker{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:7px 12px;border-radius:12px;background:var(--ink);color:#fff;font-weight:800;font-size:13px;line-height:1;transform:rotate(-3deg);box-shadow:0 3px 0 rgba(0,0,0,.18)}
.sticker.sun{background:var(--soleil);color:var(--ink)}

/* Avatars */
.av{width:36px;height:36px;flex:0 0 36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--body);font-weight:800;font-size:13px;color:var(--ink);border:2.5px solid var(--paper)}
.av.lg{width:48px;height:48px;flex-basis:48px;font-size:16px}
.av.sm{width:28px;height:28px;flex-basis:28px;font-size:11px;border-width:2px}
.c1{background:#FFC94A}.c2{background:#FFB59E}.c3{background:#9FDDBC}.c4{background:#BAC6FF}.c5{background:#F5BEE3}
.c6{background:#E3D2BC}.c7{background:#9FD8E8}.c8{background:#CDBBF5}.c9{background:#BDE59F}.c10{background:#FFCF9E}
.av.kid{border-radius:30%}
.stack{display:flex;align-items:center}
.stack .av+.av{margin-left:-10px}

/* Lieux, citations, raisons */
.place{display:flex;align-items:center;gap:12px}
.pi{width:48px;height:48px;flex:0 0 48px;border-radius:16px;display:flex;align-items:center;justify-content:center}
.pi.menthe{background:var(--menthe-pale);color:var(--menthe-ink)}
.pi.soleil{background:var(--soleil-pale);color:var(--soleil-ink)}
.pi.ciel{background:var(--ciel-pale);color:var(--ciel-ink)}
.pi.tomate{background:var(--tomate-pale);color:var(--tomate-ink)}
.quote{font-size:16px;line-height:1.45;background:var(--paper);border-radius:20px 20px 20px 6px;padding:12px 14px;box-shadow:0 2px 0 var(--line)}
.bubble{font-size:15px;background:var(--paper);border-radius:18px 18px 18px 6px;padding:10px 12px;box-shadow:0 2px 0 var(--line)}
.why{font-size:14px;color:var(--ink-2);padding:10px 12px;border-radius:14px;background:#FBF5EE}
.source{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink-2)}
.source .icon{width:16px;height:16px}

/* Formulaires */
.field{background:var(--paper);border-radius:22px;padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px}
.field-label{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink)}
.num{width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:var(--soleil);display:inline-flex;align-items:center;justify-content:center;font-family:var(--body);font-size:14px;font-weight:800}
.input{width:100%;min-height:50px;border-radius:16px;border:2px solid var(--line);background:#FFFCF8;padding:0 14px;font-family:var(--body);font-size:17px;font-weight:600;color:var(--ink)}
.input:focus{outline:none;border-color:var(--ink)}
.seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;background:var(--sable);border-radius:18px;padding:5px}
.seg button,.seg a{min-height:44px;border-radius:14px;border:0;background:transparent;font-family:var(--body);font-weight:700;font-size:15px;color:var(--ink-2);cursor:pointer;display:flex;align-items:center;justify-content:center;text-decoration:none}
.seg .on{background:var(--paper);color:var(--ink);box-shadow:0 2px 0 var(--line)}
.setting{display:flex;align-items:center;gap:14px;padding:14px 0}
.setting+.setting{border-top:1px solid var(--line)}
.switch{width:52px;height:32px;flex:0 0 52px;border-radius:999px;border:0;background:#C4B7AA;position:relative;cursor:pointer;padding:0}
.switch::after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
.switch.on{background:var(--menthe)}
.switch.on::after{left:24px}
.check{width:30px;height:30px;flex:0 0 30px;border-radius:10px;border:2px solid var(--line);background:var(--paper);display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;padding:0}
.check.on{background:var(--ink);border-color:var(--ink)}
.check .icon{width:18px;height:18px;stroke-width:3}

/* Votes et trajets */
.bar{height:12px;border-radius:999px;background:var(--sable);overflow:hidden}
.bar span{display:block;height:100%;border-radius:999px;background:var(--tomate)}
.trip{display:flex;align-items:center;gap:10px}

/* Barre du bas */
.tabbar{flex:0 0 auto;height:86px;background:var(--paper);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;padding:8px 6px 0}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:50px;font-size:11.5px;font-weight:700;color:var(--muted);text-decoration:none}
.tab.on{color:var(--tomate-fonce)}
.tab-plus{justify-self:center;width:64px;height:64px;margin-top:-28px;border-radius:50%;background:var(--tomate-fonce);color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;border:4px solid var(--ground);box-shadow:0 4px 0 var(--tomate-ombre)}
.tab-plus .icon{width:28px;height:28px;stroke-width:2.6}

/* Jeu */
.weather{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:14px;background:var(--paper);padding:9px 12px;border-radius:999px;box-shadow:0 2px 0 var(--line)}
.weather .icon{width:18px;height:18px;color:var(--soleil-ombre)}
.cf{position:absolute;border-radius:3px;pointer-events:none}
.wave{display:flex;align-items:center;justify-content:center;gap:5px;height:44px}
.wave span{width:6px;border-radius:999px;background:var(--tomate)}
.bigmic{width:88px;height:88px;border-radius:50%;background:var(--tomate-fonce);color:#fff;border:0;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 0 var(--tomate-ombre);cursor:pointer}
.bigmic .icon{width:38px;height:38px}
.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:118px;border-radius:24px;border:2px solid var(--line);background:var(--paper);font-family:var(--body);font-weight:800;font-size:15px;color:var(--ink);cursor:pointer;padding:12px 6px;text-align:center}
.choice .icon{width:34px;height:34px}
.choice.on{background:var(--tomate-fonce);border-color:var(--tomate-fonce);color:#fff;box-shadow:0 4px 0 var(--tomate-ombre);transform:rotate(-2deg)}
.dashed{border:2px dashed #D9CBBE;border-radius:24px;padding:18px;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.danger{color:#A3360F}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Ajouts de l'application, au-delà de la maquette */
@font-face{font-family:'Bricolage Grotesque';src:url('polices/bricolage-grotesque.woff2') format('woff2');font-weight:600 800;font-display:swap}
@font-face{font-family:'Figtree';src:url('polices/figtree.woff2') format('woff2');font-weight:400 800;font-display:swap}
.erreur{background:var(--tomate-pale);color:var(--tomate-ink);border-radius:14px;padding:10px 12px;font-weight:700;font-size:14px}
.ligne-enfant{display:grid;grid-template-columns:minmax(0,1fr) 84px 44px;gap:8px;align-items:center}
.partage{font-size:14px;word-break:break-all;background:#FFFCF8;border:2px dashed var(--line);border-radius:14px;padding:10px 12px;color:var(--ink-2)}
.marque{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-0.025em}
.marque span{color:var(--tomate-fonce)}
.heros{margin:0 -20px;background:var(--tomate-fonce);color:#fff;border-radius:0 0 40px 40px;padding:28px 24px 32px;display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden}
.heros .marque span{color:var(--soleil)}
.rond-ok{width:88px;height:88px;flex:0 0 88px;border-radius:50%;background:var(--menthe);color:#fff;display:flex;align-items:center;justify-content:center;transform:rotate(-6deg);box-shadow:0 5px 0 var(--menthe-ombre)}
.rond-ok .icon{width:44px;height:44px;stroke-width:2.6}
.icon.grand{width:48px;height:48px;stroke-width:2.4}
.attente{padding:48px 20px;text-align:center;color:var(--muted)}