/* Mon Codi : thèmes et composants communs (appli, site, admin) */
  html, body { height: 100%; }
body { margin: 0; background: #F4F1EB; }
.app { --body: 'Nunito', system-ui, sans-serif; --feet: #1D1D22;
       min-height: 100%; max-width: 480px; margin: 0 auto; position: relative; display: flex; flex-direction: column;
       background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.45;
       -webkit-tap-highlight-color: transparent; }
  .app[data-t="neutre"]    { --bg:#F4F1EB; --card:#FFFFFF; --ink:#1F1D1A; --muted:#65605A; --accent:#2F5D50; --accent-ink:#FFFFFF; --soft:#E7E1D5; --line:#DED7CA; --deco:#C9BEAB; --deco2:#E0B04C; --blush:#E7A28F; --page:#FFFFFF; --display:'Young Serif', Georgia, serif; --body:'Work Sans', system-ui, sans-serif; }
.app[data-t="rose"]      { --bg:#FFF0F5; --card:#FFFFFF; --ink:#4A2338; --muted:#8A5670; --accent:#C92E66; --accent-ink:#FFFFFF; --soft:#FFDCE9; --line:#F6C9DA; --deco:#FF9EC4; --deco2:#FFCF5A; --blush:#FF7FA8; --page:#FFF7FA; --display:'Fredoka', system-ui, sans-serif; }
.app[data-t="bleu"]      { --bg:#EDF4FF; --card:#FFFFFF; --ink:#10243F; --muted:#4A5F7E; --accent:#1D5FBF; --accent-ink:#FFFFFF; --soft:#D5E6FF; --line:#C5D8F1; --deco:#8CC0FF; --deco2:#FFC94D; --blush:#8CC0FF; --page:#F7FBFF; --display:'Bricolage Grotesque', system-ui, sans-serif; }
.app[data-t="halloween"] { --bg:#1B1426; --card:#2A2038; --ink:#F5EDE0; --muted:#BBADCB; --accent:#FF7A1A; --accent-ink:#1B1426; --soft:#3A2B4D; --line:#48385F; --deco:#8BE04E; --deco2:#8BE04E; --blush:#FF7A1A; --page:#EFE3CF; --display:'Creepster', 'Fredoka', cursive; --feet:#0F0A17; }
.app[data-t="polar"]     { --bg:#1C2126; --card:#262D34; --ink:#ECEFF1; --muted:#A9B3BC; --accent:#F5C518; --accent-ink:#15191D; --soft:#313A43; --line:#3B4550; --deco:#F5C518; --deco2:#E53935; --blush:#E57373; --page:#F2EFE6; --display:'Special Elite', 'Courier New', monospace; --feet:#0E1114; }
.app[data-t="casse"]     { --bg:#0F221E; --card:#17332D; --ink:#EAF4EF; --muted:#9FBDB3; --accent:#E8C547; --accent-ink:#10231F; --soft:#1F3F38; --line:#2A4A42; --deco:#FF3B3B; --deco2:#E8C547; --blush:#FF7B7B; --page:#F3EBD2; --display:'Anton', Impact, sans-serif; --feet:#07120F; }
.app[data-t="jaccuse"]   { --bg:#F1ECDF; --card:#FBF8F0; --ink:#161514; --muted:#5C574E; --accent:#B3261E; --accent-ink:#FFFFFF; --soft:#E6DFCD; --line:#D5CCB7; --deco:#161514; --deco2:#161514; --blush:#E8A39B; --page:#FBF8F0; --display:'Playfair Display', Georgia, serif; }
.app[data-t="rev"]       { --bg:#F3E7C9; --card:#FBF4E2; --ink:#2B1D0E; --muted:#6B5536; --accent:#1F3A93; --accent-ink:#FFFFFF; --soft:#EADBB4; --line:#D9C697; --deco:#C8102E; --deco2:#C8102E; --blush:#E79A8F; --page:#FBF4E2; --display:'IM Fell English', Georgia, serif; }
.app[data-t="veil"]      { --bg:#F6F3EC; --card:#FFFFFF; --ink:#1E2A44; --muted:#5A6275; --accent:#1E2A44; --accent-ink:#FFFFFF; --soft:#E8E3D8; --line:#DDD6C8; --deco:#CFC6B4; --deco2:#8FA3BF; --blush:#E8B4B8; --page:#FFFFFF; --display:'Cormorant Garamond', Georgia, serif; }
* { box-sizing: border-box; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #5B8DEF; outline-offset: 2px; }

.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; display: flex; align-items: center; gap: 10px;
       padding: 10px 16px; background: var(--bg); border-bottom: 1px solid var(--line); }
.logo { width: 34px; height: 34px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font: 700 20px Georgia, serif; flex-shrink: 0; }
.appname { font-family: var(--display); font-size: 20px; font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.testpill { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; padding: 4px 8px; border-radius: 99px; background: var(--soft); color: var(--ink); white-space: nowrap; }
.ibtn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: grid; place-items: center; padding: 0; flex-shrink: 0; }

main { flex: 1; padding: 0 16px calc(96px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 14px; }
.hero { position: relative; padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.deco { position: absolute; inset: 0 -16px; pointer-events: none; overflow: hidden; }
.hello { margin: 0; font-family: var(--display); font-size: 28px; line-height: 1.12; font-weight: 700; max-width: 300px; text-wrap: balance; position: relative; }
.tag { align-self: flex-start; font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 99px; background: var(--soft); position: relative; }
.codirow { display: flex; align-items: flex-end; gap: 8px; position: relative; }
.bubble { background: var(--card); border: 1px solid var(--line); border-radius: 18px 18px 18px 4px; padding: 10px 13px; font-size: 15px; font-weight: 700; line-height: 1.4; margin-bottom: 34px; }
.big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.big button { min-height: 92px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-weight: 800; font-size: 16px; }
.b-main { border: 0; background: var(--accent); color: var(--accent-ink); }
.b-alt { border: 1.5px solid var(--line); background: var(--card); }
label.l, .kicker { display: block; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 0 0 5px; }
textarea, input[type=text], input[type=date], select { width: 100%; min-height: 48px; padding: 11px 13px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font-size: 16px; }
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 13px; font-weight: 700; padding: 5px 11px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); }
.chip.unsure { border-style: dashed; color: var(--muted); }
.go { width: 100%; min-height: 54px; border: 0; border-radius: 16px; background: var(--accent); color: var(--accent-ink); font-size: 17px; font-weight: 800; }
.go:disabled { opacity: .6; }
.fine { font-size: 12.5px; color: var(--muted); margin: -4px 0 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.card .code { font-size: 12px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted); }
.card h3 { margin: 0; font-family: var(--display); font-size: 26px; line-height: 1.1; font-weight: 700; }
.card .meta { font-size: 13px; color: var(--muted); font-weight: 600; }
.open { min-height: 48px; border-radius: 14px; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; font-size: 15px; text-decoration: none; padding: 0 14px; }
.pagebox { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 14px; border: 1.5px dashed var(--line); }
.pagebox label { font-size: 14px; font-weight: 700; }
.pagebox input { min-height: 44px; padding: 8px 10px; text-align: center; font-weight: 800; background: var(--bg); }
.thumbs { display: flex; gap: 8px; align-items: center; }
.thumbs span { font-size: 13px; color: var(--muted); font-weight: 700; flex: 1; }
.thumbs button { min-height: 40px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg); font-size: 13px; font-weight: 800; display: flex; align-items: center; gap: 5px; }
.thumbs button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.empty { text-align: center; color: var(--muted); font-weight: 700; padding: 8px; }
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; }
.tabs .in { max-width: 480px; margin: 0 auto; display: flex; gap: 2px; padding: 6px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--card); border-top: 1px solid var(--line); }
.tabs button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 54px; justify-content: center; border: 0; background: none; color: var(--muted); font-size: 12px; font-weight: 800; }
.tabs button.on { color: var(--ink); } .tabs button.on svg { color: var(--accent); }
.phone-dark-accent .tabs button.on svg { color: var(--ink); }
.sheet-bg { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 480px; min-height: 0; max-height: 88%; overflow-y: auto; background: var(--bg); color: var(--ink); border-radius: 24px 24px 0 0; padding: 18px 16px calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 12px; }
.sheet h2 { margin: 0; font-family: var(--display); font-size: 24px; }
.types { display: flex; flex-wrap: wrap; gap: 8px; }
.types button { min-height: 44px; padding: 0 14px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--card); font-weight: 800; font-size: 14px; }
.types button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile { min-height: 92px; border-radius: 18px; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 6px; text-align: left; }
.tile .n { font-size: 16px; font-weight: 800; line-height: 1.15; } .tile small { font-size: 12px; font-weight: 700; opacity: .85; }
.sw { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); display: inline-block; }
.ward { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wt { border: 1px solid var(--line); background: var(--card); border-radius: 16px; padding: 6px 4px 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; font-size: 12px; font-weight: 800; }
.wt[aria-pressed="true"] { border: 2.5px solid var(--accent); }
.codibtn { background: none; border: 0; padding: 0; line-height: 0; border-radius: 16px; flex-shrink: 0; }
.codi { overflow: visible; display: block; }
.codi .cos { display: none; }
.codi[data-c="detective"] .cos-detective, .codi[data-c="braqueur"] .cos-braqueur, .codi[data-c="gentleman"] .cos-gentleman,
.codi[data-c="avocat"] .cos-avocat, .codi[data-c="magistrat"] .cos-magistrat, .codi[data-c="policier"] .cos-policier,
.codi[data-c="bonnet"] .cos-bonnet, .codi[data-c="noeud"] .cos-noeud, .codi[data-c="diplome"] .cos-diplome,
.codi[data-c="sorciere"] .cos-sorciere { display: inline; }
.codi[data-c="braqueur"] .mouth-open { display: none; }
.toast { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 30; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 99px; font-weight: 800; font-size: 14px; max-width: calc(100% - 32px); text-align: center; }
.list { display: flex; flex-direction: column; gap: 8px; }
.fb { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; font-size: 14px; }
.fb b { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .codi .eyes { transform-box: fill-box; transform-origin: center; animation: blink 5s infinite; }
  @keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
  .codi.hop { animation: hop .45s cubic-bezier(.3,1.6,.5,1); }
  @keyframes hop { 35% { transform: translateY(-14px) scale(1.04, .96); } }
}