/* Peume URL : styles communs (règles dans design.md : gris pleins, pilules, rien de blanc à bordure grise, survol en gras) */
:root { --bg:#fbfbfa; --fg:#1d1d1b; --muted:#6b6b67; --faint:#a3a39e; --plein:#f3f3f1; --gris:#e8e8e6; --gris2:#dededc; --side:#f5f5f3; --hover:#ebebe8; --rebond:cubic-bezier(.34, 1.56, .64, 1); }
* { box-sizing:border-box; }
html, body { margin:0; }
body { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; background:var(--bg); color:var(--fg); font:15px/1.5 "Geist", system-ui, -apple-system, sans-serif; -webkit-font-smoothing:antialiased; overflow-x:clip; }
a { color:inherit; }
button, input { font:inherit; color:inherit; }
[hidden] { display:none !important; }

/* menu du haut */
.top { padding:20px 16px 0; padding-top:calc(20px + env(safe-area-inset-top)); }
.top nav { display:flex; align-items:center; justify-content:space-between; gap:20px; width:min(960px, 100%); margin:0 auto; }
.brand { display:flex; align-items:center; gap:8px; font-size:18px; font-weight:600; letter-spacing:-.03em; text-decoration:none; }
.brand img { width:auto; height:20px; display:block; } /* le logo texte « Peume » */
.links { display:flex; gap:2px; font-size:14px; }
.links a { padding:6px 11px; color:var(--muted); text-decoration:none; transition:color .15s; }
.links a:hover { color:var(--fg); text-shadow:0 0 .55px currentColor, 0 0 .55px currentColor; }
.links a.on { color:var(--fg); font-weight:600; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1.5px; }
.top.sans-marque nav { justify-content:flex-end; }

/* boutons : toujours des pilules, texte centré */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 24px; border:0; border-radius:999px; background:var(--fg); color:#fff; font-weight:600; font-size:14.5px; text-decoration:none; text-align:center; cursor:pointer; transition:background .15s, opacity .15s; }
.btn:hover:not(:disabled) { text-shadow:0 0 .55px currentColor, 0 0 .55px currentColor; }
.btn:disabled { opacity:.45; cursor:default; }
.btn.gris { background:var(--gris); color:var(--fg); }
.btn.gris:hover:not(:disabled) { background:var(--gris2); }
.btn.petit { height:34px; padding:0 15px; font-size:13.5px; }
.lien-texte { padding:0; border:0; background:none; color:var(--muted); font-size:14px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.lien-texte:hover { color:var(--fg); text-shadow:0 0 .55px currentColor; }

/* sélecteur : le fond noir glisse d'un choix à l'autre */
.choix { position:relative; display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr; padding:4px; border-radius:999px; background:var(--plein); }
.choix button { position:relative; z-index:1; min-width:44px; height:36px; padding:0 14px; border:0; border-radius:999px; background:none; color:var(--muted); font-size:14px; font-weight:500; cursor:pointer; transition:color .3s; }
.choix button:hover { color:var(--fg); text-shadow:0 0 .55px currentColor, 0 0 .55px currentColor; }
.choix button.on, .choix button.on:hover { color:#fff; }
.choix.pose button, .choix.pose .curseur { transition:none; }
.choix .curseur { position:absolute; z-index:0; top:4px; bottom:4px; left:0; width:0; border-radius:999px; background:var(--fg); transition:transform .45s var(--rebond), width .45s var(--rebond); }

/* champs */
.champ-texte { display:block; width:100%; height:48px; padding:0 18px; border:0; border-radius:12px; background:var(--plein); font-size:16px; outline:none; transition:box-shadow .2s; }
.champ-texte:focus { box-shadow:0 0 0 3px rgba(29,29,27,.12); }
label.etiquette { display:block; margin:0 0 8px; font-size:13.5px; color:var(--muted); }
.case { display:inline-flex; align-items:center; gap:9px; font-size:14px; color:var(--muted); cursor:pointer; user-select:none; }
.case input { appearance:none; width:18px; height:18px; margin:0; border-radius:5px; background:var(--gris); cursor:pointer; display:grid; place-items:center; transition:background .2s; }
.case input::after { content:""; width:9px; height:5px; border:2px solid #fff; border-top:0; border-right:0; transform:rotate(-45deg) scale(0); margin-top:-2px; transition:transform .25s var(--rebond); }
.case input:checked { background:var(--fg); }
.case input:checked::after { transform:rotate(-45deg) scale(1); }
.case:hover { color:var(--fg); }

.message { min-height:22px; margin:12px 0 0; font-size:14px; color:var(--muted); }
.message.erreur { color:#b3261e; }

/* logo d'entreprise : carré arrondi, initiale si pas de logo */
.logo-ent { flex:none; width:36px; height:36px; border-radius:9px; background:var(--gris); display:grid; place-items:center; overflow:hidden; font-weight:600; font-size:15px; color:var(--muted); }
.logo-ent img { width:100%; height:100%; object-fit:contain; display:block; background:#fff; }

/* le lien court : chaque segment est une petite marche */
.court { font-family:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:-.01em; word-break:break-all; }
.court .dom { color:var(--faint); }
.court .seg { display:inline-block; }

.foot { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 14px; padding:28px 16px calc(32px + env(safe-area-inset-bottom)); color:var(--faint); font-size:13px; }
.foot a { color:var(--muted); text-decoration:none; }
.foot a:hover { color:var(--fg); text-shadow:0 0 .55px currentColor; }

@media (max-width:520px) { .links a { padding:6px 7px; font-size:13.5px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition:none !important; animation:none !important; } }