/* ---------- Palettes ----------
   Deux ambiances : « ciel » (bleu) et « rose ». Chacune existe en clair
   et en sombre, selon le réglage du téléphone ou de l'ordinateur. */
:root{
  --display:"Young Serif", Georgia, "Times New Roman", serif;
  --body:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
/* Ciel, clair */
:root, :root[data-palette="ciel"]{
  --sky:#E4EDF3; --sky-2:#D3E1EB; --paper:#FBFCFD; --ink:#22335B; --ink-soft:#56658A;
  --line:#C6D4E0; --apricot:#F2B78F; --butter:#F1DE95; --sage:#9CBBA3; --rose:#E7AEB9;
  --btn-bg:#22335B; --btn-fg:#FBFCFD; --ok:#2B6A4B; --ok-bg:#DCEEE2; --warn:#85500F; --warn-bg:#FBEBD6;
  --danger:#A23B4B; --string:#8595B4; --focus:#C2477A;
  color-scheme:light;
}
/* Rose, clair */
:root[data-palette="rose"]{
  --sky:#FBEAF0; --sky-2:#F4D8E2; --paper:#FFFBFC; --ink:#5A2338; --ink-soft:#8A5468;
  --line:#EBC6D4; --apricot:#F4B79C; --butter:#F6DFA8; --sage:#C3C39B; --rose:#E795AE;
  --btn-bg:#8E2F55; --btn-fg:#FFFBFC; --ok:#3E6B4E; --ok-bg:#E1EFE3; --warn:#8A4A18; --warn-bg:#FBE7D6;
  --danger:#A62A4A; --string:#C58FA6; --focus:#2F4A86;
  color-scheme:light;
}
/* Ciel, sombre */
@media (prefers-color-scheme: dark){
  :root:not([data-palette="rose"]){
    --sky:#131B31; --sky-2:#243052; --paper:#1C2643; --ink:#EEF1F8; --ink-soft:#AEB8D2;
    --line:#34416B; --btn-bg:#F1DE95; --btn-fg:#131B31; --ok:#8FD1A8; --ok-bg:#1E3B30;
    --warn:#F2C08F; --warn-bg:#3D2E1C; --danger:#F29AA8; --string:#6F7FA6; --focus:#F2A3C0;
    color-scheme:dark;
  }
  /* Rose, sombre */
  :root[data-palette="rose"]{
    --sky:#2A1424; --sky-2:#3F1F33; --paper:#351A2C; --ink:#FBE9F0; --ink-soft:#D7AEC0;
    --line:#5A2C46; --apricot:#E8A98E; --butter:#E9D49B; --sage:#AFB694; --rose:#E795AE;
    --btn-bg:#F3B8CD; --btn-fg:#2A1424; --ok:#9BD3AD; --ok-bg:#24402F; --warn:#F0BE93; --warn-bg:#452C1D;
    --danger:#F5A0B4; --string:#8E5872; --focus:#9CC4F5;
    color-scheme:dark;
  }
}
/* Fondu entre les deux ambiances */
:root.bascule *{
  transition: background-color .9s ease, color .9s ease, border-color .9s ease,
              fill .9s ease, stroke .9s ease, box-shadow .9s ease, outline-color .9s ease;
}
@media (prefers-reduced-motion: reduce){
  :root.bascule *{transition:none}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sky);color:var(--ink);font:400 1.0625rem/1.6 var(--body)}
img,svg{max-width:100%}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.15;margin:0}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
.wrap{max-width:1080px;margin:0 auto;padding:0 1.25rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Hero */
.hero{text-align:center;padding:0 1.25rem 3rem}
.mobile{display:block;width:min(440px,92vw);height:auto;margin:0 auto -0.5rem}
.mobile .ln{stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.mobile .str{stroke:var(--string);stroke-width:1.5}
.hang{transform-box:view-box}
.h1{transform-origin:70px 41px}.h2{transform-origin:145px 33px}.h3{transform-origin:255px 33px}.h4{transform-origin:330px 41px}
@media (prefers-reduced-motion:no-preference){
  .hang{animation:sway 6s ease-in-out infinite alternate}
  .h2{animation-duration:7.4s;animation-delay:-3s}
  .h3{animation-duration:5.2s;animation-delay:-1s}
  .h4{animation-duration:6.8s;animation-delay:-4s}
}
@keyframes sway{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
.hero h1{font-size:clamp(2.4rem,7vw,4.4rem);max-width:14ch;margin:0 auto}
.hero .due{margin-top:.75rem;font-size:1.15rem;color:var(--ink-soft)}
.hero .lede{max-width:52ch;margin:1.25rem auto 0}

/* Étapes */
.steps{list-style:none;padding:0;margin:0 auto 3.5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;counter-reset:s}
.steps li{counter-increment:s;display:flex;gap:.8rem;align-items:flex-start}
.steps li::before{content:counter(s);flex:none;width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;font-family:var(--display);background:var(--paper);border:1.5px solid var(--ink)}

/* Cadeaux */
.section-title{font-size:clamp(1.7rem,4vw,2.3rem);margin-bottom:.4rem}
.section-intro{color:var(--ink-soft);margin-bottom:1.5rem;max-width:60ch}
.tags{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:3rem 1.5rem;padding-top:1.75rem}
.tag{position:relative;display:flex;flex-direction:column;gap:.55rem;background:var(--paper);border:1px solid var(--line);border-radius:16px 16px 20px 20px;padding:2.6rem 1.35rem 1.35rem}
.tag:nth-child(odd){transform:rotate(-.6deg)}
.tag:nth-child(even){transform:rotate(.5deg)}
.tag::after{content:"";position:absolute;left:50%;top:-30px;width:1.5px;height:52px;background:var(--string)}
.tag::before{content:"";position:absolute;left:50%;top:15px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--sky);border:1px solid var(--line)}
.ico{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:#22335B}
.ico svg{width:38px;height:38px}
.c0 .ico{background:var(--apricot)}.c1 .ico{background:var(--sage)}.c2 .ico{background:var(--butter)}.c3 .ico{background:var(--rose)}
.tag h3{font-size:1.4rem}
.tag .desc{color:var(--ink-soft);font-size:.98rem}
.price{font-family:var(--display);font-size:1.5rem;margin-top:auto;padding-top:.4rem}
.kind{font-size:.9rem;color:var(--ink-soft)}
.bar{height:10px;border-radius:99px;background:var(--sky-2);overflow:hidden;display:flex}
.bar .paid{background:var(--sage)}
.bar .pend{background:repeating-linear-gradient(45deg,var(--butter) 0 5px,var(--apricot) 5px 10px)}
.state{font-size:.92rem;color:var(--ink-soft)}
.state strong{color:var(--ink)}
.empty{padding:2rem;text-align:center;background:var(--paper);border:1px dashed var(--line);border-radius:16px}

/* Boutons & champs */
.btn{appearance:none;border:0;cursor:pointer;font:700 1rem/1.2 var(--body);padding:.8rem 1.2rem;border-radius:999px;background:var(--btn-bg);color:var(--btn-fg);min-height:44px}
.btn:hover{filter:brightness(1.12)}
.btn[disabled]{cursor:not-allowed;background:var(--sky-2);color:var(--ink-soft);filter:none}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn.small{padding:.45rem .85rem;min-height:36px;font-size:.92rem}
.btn.danger{background:transparent;color:var(--danger);border:1.5px solid currentColor}
.btn.armed{background:var(--danger);color:#fff;border-color:var(--danger)}
label{display:block;font-weight:700;margin-bottom:.3rem}
.hint{font-weight:400;color:var(--ink-soft);font-size:.9rem}
input[type=text],input[type=number],textarea,select{width:100%;font:inherit;color:var(--ink);background:var(--sky);border:1.5px solid var(--line);border-radius:10px;padding:.65rem .8rem}
textarea{min-height:5rem;resize:vertical}
.field{margin-bottom:1rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.choice input{position:absolute;opacity:0}
.choice label{margin:0;font-weight:400;border:1.5px solid var(--line);border-radius:12px;padding:.7rem .9rem;cursor:pointer;background:var(--sky)}
.choice label b{display:block}
.choice input:checked+label{border-color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--paper)}
.choice input:focus-visible+label{outline:3px solid var(--focus);outline-offset:2px}
.choice input:disabled+label{opacity:.5;cursor:not-allowed}
.icon-pick{display:flex;flex-wrap:wrap;gap:.4rem}
.icon-pick input{position:absolute;opacity:0}
.icon-pick label{margin:0;width:52px;height:52px;display:grid;place-items:center;border-radius:12px;border:1.5px solid var(--line);cursor:pointer;background:var(--sky)}
.icon-pick svg{width:30px;height:30px}
.icon-pick input:checked+label{border-color:var(--ink);background:var(--butter);color:#22335B}
.icon-pick input:focus-visible+label{outline:3px solid var(--focus);outline-offset:2px}
.check{display:flex;gap:.6rem;align-items:flex-start;font-weight:400}
.check input{width:1.2rem;height:1.2rem;margin-top:.2rem;flex:none}
.err{color:var(--danger);font-size:.93rem;margin-top:.3rem}

/* Dialog */
dialog{border:0;border-radius:20px;padding:0;width:min(560px,94vw);background:var(--paper);color:var(--ink);max-height:92vh}
dialog::backdrop{background:rgba(19,27,49,.55)}
.dlg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1.4rem 1.4rem .6rem}
.dlg-head h2{font-size:1.6rem}
.dlg-body{padding:.4rem 1.4rem 1.4rem}
.x{appearance:none;border:0;background:transparent;color:var(--ink);font-size:1.6rem;line-height:1;width:44px;height:44px;border-radius:50%;cursor:pointer;flex:none}
.x:hover{background:var(--sky)}
.pay{border:1.5px solid var(--line);border-radius:14px;overflow:hidden;margin:1rem 0}
.pay-row{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:.7rem .9rem;border-top:1px solid var(--line)}
.pay-row:first-child{border-top:0}
.pay-row dt{font-size:.88rem;color:var(--ink-soft)}
.pay-row dd{margin:0;font-weight:700;word-break:break-all;font-variant-numeric:tabular-nums}
.pay-row.big dd{font-family:var(--display);font-weight:400;font-size:1.35rem}
.note{padding:.8rem 1rem;border-radius:12px;font-size:.95rem;margin-top:.8rem}
.note.warn{background:var(--warn-bg);color:var(--warn)}
.note.ok{background:var(--ok-bg);color:var(--ok)}

/* Mes participations */
.mine{margin-top:3.5rem}
.mine ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.mine li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:.8rem 1rem}
.pill{display:inline-block;font-size:.85rem;font-weight:700;padding:.15rem .6rem;border-radius:99px}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.wait{background:var(--warn-bg);color:var(--warn)}

/* Admin */
.admin{margin-top:2rem;padding:1.5rem;background:var(--paper);border-radius:22px;border:1.5px solid var(--ink)}
.admin h2{font-size:2rem;margin-bottom:.3rem}
.admin h3{font-size:1.35rem;margin:2rem 0 .8rem}
.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}
.totals{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1rem}
.totals div{background:var(--sky);border-radius:14px;padding:.8rem 1.1rem}
.totals b{display:block;font-family:var(--display);font-weight:400;font-size:1.5rem}
.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:.95rem}
th,td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:700;background:var(--sky)}
tr:last-child td{border-bottom:0}
td .msg{color:var(--ink-soft);font-style:italic;max-width:28ch}
.row-actions{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.row-actions input{width:6.5rem;padding:.35rem .5rem}
.item-row{display:flex;align-items:center;gap:.8rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
.item-row:last-child{border-bottom:0}
.item-row .ico{width:44px;height:44px;flex:none}
.item-row .ico svg{width:26px;height:26px}
.item-row .grow{flex:1;min-width:0}
.item-row .grow span{display:block;color:var(--ink-soft);font-size:.9rem}

footer{margin-top:4rem;padding:2rem 1.25rem 3rem;text-align:center;color:var(--ink-soft);font-size:.95rem}
.linkbtn{appearance:none;background:none;border:0;padding:.3rem;color:var(--ink);font:inherit;text-decoration:underline;cursor:pointer}
.toast{position:fixed;left:50%;bottom:1.25rem;transform:translateX(-50%);background:var(--ink);color:var(--sky);padding:.75rem 1.1rem;border-radius:12px;max-width:min(92vw,480px);font-size:.95rem;opacity:0;pointer-events:none;transition:opacity .2s}
.toast.on{opacity:1}
.loading{text-align:center;color:var(--ink-soft);padding:2rem}
[hidden]{display:none!important}

/* Connexion parents */
.login{max-width:420px;margin:3rem auto;background:var(--paper);border:1.5px solid var(--ink);border-radius:22px;padding:1.6rem}
.login h1{font-size:2rem;margin-bottom:.4rem}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:1.2rem 0}
.topbar h1{font-size:clamp(1.8rem,4vw,2.4rem)}
input[type=email],input[type=password]{width:100%;font:inherit;color:var(--ink);background:var(--sky);border:1.5px solid var(--line);border-radius:10px;padding:.65rem .8rem}

/* Utilitaires (pas de style inline : la politique de sécurité l'interdit) */
.sprite{position:absolute}
.block{display:block}
.full{width:100%}
.gap{margin-bottom:1rem}
.gap-top{margin-top:.9rem}
.field.bare{border:0;padding:0;margin:0 0 1rem}
.field.bare legend{font-weight:700;margin-bottom:.3rem;padding:0}
.pay-row dl{margin:0}
.chips+.hint,.field>.hint{margin-top:.4rem}
a.btn{text-decoration:none;display:inline-flex;align-items:center}

/* Photos des cadeaux */
.tag .photo{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px;background:var(--sky-2);border:1px solid var(--line)}
.tag .photo.vide{display:none}
.item-row .photo{width:56px;height:56px;object-fit:cover;border-radius:10px;flex:none;border:1px solid var(--line)}
.apercu{display:flex;align-items:center;gap:.8rem;margin-top:.6rem}
.apercu img{width:90px;height:60px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
input[type=file]{width:100%;font:inherit;color:var(--ink-soft);background:var(--sky);border:1.5px solid var(--line);border-radius:10px;padding:.55rem .7rem}
input[type=file]::file-selector-button{font:inherit;font-weight:700;margin-right:.7rem;padding:.4rem .8rem;border:0;border-radius:99px;background:var(--btn-bg);color:var(--btn-fg);cursor:pointer}

/* Choix de l'ambiance */
.ambiance{display:flex;justify-content:center;gap:.5rem;align-items:center;flex-wrap:wrap;padding:1.5rem 0 0;color:var(--ink-soft);font-size:.92rem}
.ambiance .btn.small{border-color:var(--line)}
.ambiance .btn.small[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.login .mobile.petit{width:min(260px,70vw);margin:-.5rem auto .5rem}