/* KStudio Camp · pages de compte. Mêmes tokens que le Camp (core/css/camp.css), feuille indépendante. */
:root {
  --fond: #F9F8F5; --carte: #fff; --encre: #14181A; --sombre: #0D1A18;
  --orange: #FB923C; --orange-f: #C2410C; --teal: #9AD0C9; --teal-f: #2F6F68;
  --creme-orange: #FFEBD6; --creme-teal: #DDF0EC; --rouge: #E0483E; --gris: #636360;
  --font: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --gut: 16px; --trait: 3px solid var(--encre); --ombre: 4px 4px 0 var(--encre); --r: 18px;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--fond); }
body { margin: 0; font: 17px/1.45 var(--font); color: var(--encre); background: var(--fond); -webkit-font-smoothing: antialiased; overflow-x: clip; min-height: 100vh; display: flex; flex-direction: column; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
a { color: var(--orange-f); }

.haut { background: var(--sombre); color: var(--fond); padding: 16px var(--gut); }
.haut__in { max-width: 560px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.logo { display: flex; align-items: center; gap: 8px; font: 700 13px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: inherit; text-decoration: none; }
.logo__pastille { width: 14px; height: 14px; border-radius: 50%; background: var(--orange); border: 2.5px solid var(--fond); }
.haut__lien { font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--teal); text-decoration: none; }

main { flex: 1 0 auto; width: 100%; max-width: 560px; margin: 0 auto; padding: 28px var(--gut) 40px; display: flex; flex-direction: column; gap: 22px; }
.kicker { font: 500 12px/1.2 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--orange-f); }
h1 { font-weight: 800; font-size: clamp(1.7rem, 7vw, 2.3rem); line-height: 1.05; letter-spacing: -.02em; margin-top: 6px; }
.chapo { color: var(--gris); margin-top: 8px; }

.carte { background: var(--carte); border: var(--trait); border-radius: var(--r); box-shadow: var(--ombre); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.carte h2 { font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em; }
label { font-weight: 700; font-size: .95rem; display: block; margin-bottom: 6px; }
input[type=text], input[type=email], select {
  width: 100%; font: inherit; padding: 12px 14px; border: var(--trait); border-radius: 12px; background: var(--fond); color: var(--encre);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 20px;
  font: 800 1rem/1 var(--font); background: var(--orange); color: var(--encre); border: var(--trait); border-radius: 999px;
  box-shadow: 3px 3px 0 var(--encre); cursor: pointer; text-decoration: none; transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--encre); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--encre); }
.btn[disabled] { opacity: .55; cursor: wait; }
.btn--creux { background: var(--carte); box-shadow: none; }
.btn--danger { background: var(--rouge); color: #fff; }
.btn--petit { min-height: 38px; padding: 8px 14px; font-size: .9rem; }

.etat { font-weight: 600; padding: 12px 14px; border: var(--trait); border-radius: 12px; }
.etat--ok { background: var(--creme-teal); }
.etat--ko { background: #FDE3E0; }
.etat--info { background: var(--creme-orange); }
.etat a { word-break: break-all; }
.rgpd { font-size: .86rem; color: var(--gris); border-top: 2px dashed var(--encre); padding-top: 12px; }
.rgpd strong { color: var(--encre); }

.liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ws { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border: var(--trait); border-radius: 14px; background: var(--fond); }
.ws--actif { background: var(--creme-teal); }
.ws__nom { font-weight: 800; }
.pastille { display: inline-block; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border: 2px solid var(--encre); border-radius: 999px; background: var(--carte); margin-left: 6px; vertical-align: middle; }
.rangee { display: flex; gap: 10px; flex-wrap: wrap; }
.choix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choix label { margin: 0; font-weight: 700; }
.choix input { position: absolute; opacity: 0; }
.choix span { display: block; padding: 12px; text-align: center; border: var(--trait); border-radius: 14px; background: var(--fond); cursor: pointer; }
.choix input:checked + span { background: var(--orange); box-shadow: 3px 3px 0 var(--encre); }
.choix input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 3px; }
.pied { text-align: center; font-size: .85rem; color: var(--gris); padding: 0 var(--gut) 28px; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

.esp { height: 14px; }
.chapo--0 { margin: 0; }