/* Styles de l'application (classes consommant les variables de noel.css). */
.page{max-width:28rem;margin:0 auto;padding:var(--sp-6) var(--sp-4)}
.title{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:var(--fs-2xl);line-height:1.15;margin:0 0 var(--sp-4)}
.lead{color:var(--ink-2);line-height:1.5;margin:0 0 var(--sp-5)}
.muted{color:var(--ink-3);font-size:var(--fs-sm)}
.field{display:block;margin-bottom:var(--sp-4)}
.field>span{display:block;margin-bottom:var(--sp-1);font-weight:500}
.field input{width:100%;box-sizing:border-box;height:50px;padding:0 var(--sp-3);font:inherit;font-size:17px;color:var(--ink);background:var(--card);border:1px solid var(--line-strong);border-radius:var(--r-xs)}
.btn{display:block;width:100%;box-sizing:border-box;min-height:54px;padding:0 var(--sp-4);border:0;border-radius:var(--r-xs);background:var(--primary);color:var(--on-primary);font:600 15px var(--font-ui);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.btn--ghost{background:transparent;color:var(--primary-text);border:1px solid var(--line-strong)}
.link{display:inline-block;margin-top:var(--sp-4);padding:var(--sp-3) 0}
.alert{margin:0 0 var(--sp-4);padding:var(--sp-3) var(--sp-4);border:2px solid var(--accent);border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent-text)}
.notice{margin:0 0 var(--sp-4);padding:var(--sp-3) var(--sp-4);border:1px solid var(--gold);border-radius:var(--r-sm);background:var(--gold-soft);color:var(--gold-text)}
.inline-form{margin:0}

/* --- Messages, boutons, badges --- */
.flash{margin:0 0 var(--sp-4);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm);border:1px solid var(--gold);background:var(--gold-soft);color:var(--ink)}
.flash--error{border:2px solid var(--accent);background:var(--accent-soft);color:var(--accent-text)}
.btn--inline{display:inline-flex;align-items:center;justify-content:center;width:auto}
.btn--small{min-height:var(--tap);display:inline-flex;align-items:center;width:auto;padding:0 var(--sp-3);font-size:13px;letter-spacing:.06em}
.btn--danger{background:var(--accent);color:var(--on-accent)}
a.btn{text-decoration:none;color:var(--on-primary)}
a.btn--ghost,summary.btn--ghost{color:var(--primary-text)}
.badge{display:inline-block;padding:2px var(--sp-2);border-radius:var(--r-xs);font:600 11.5px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;vertical-align:middle}
.badge--gold{background:var(--gold-soft);border:1px solid var(--gold);color:var(--gold-text)}
.badge--muted{background:var(--paper-sunk);border:1px solid var(--line-strong);color:var(--ink-3)}

/* --- Administration --- */
.subnav{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-5);padding-bottom:var(--sp-3);border-bottom:3px double var(--gold)}
.subnav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--sp-3);color:var(--ink-2);text-decoration:none;border-radius:var(--r-xs)}
.subnav a[aria-current="page"]{background:var(--primary);color:var(--on-primary);font-weight:600}
.page-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.page-head .title{margin:0}
.table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm)}
.table th{padding:var(--sp-3);text-align:left;font:600 12px var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line-strong)}
.table td{padding:var(--sp-3);vertical-align:top;border-bottom:1px solid var(--line-soft);overflow-wrap:anywhere}
.is-inactive td,.card.is-inactive{opacity:.6}
.is-inactive td.actions{opacity:1}
.actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:flex-start}
.actions form{margin:0}
details.confirm{position:relative}
details.confirm summary{display:inline-flex;list-style:none;cursor:pointer;border:1px solid var(--line-strong);border-radius:var(--r-xs);box-sizing:border-box}
details.confirm[open]{flex-basis:100%}
details.confirm>form{margin-top:var(--sp-2);padding:var(--sp-3);background:var(--paper-sunk);border:1px solid var(--line);border-radius:var(--r-sm)}
details.confirm .field{margin-bottom:var(--sp-3)}
.cards{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));margin-top:var(--sp-5)}
.card{padding:var(--sp-4);background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-1)}
.card__title{margin:0 0 var(--sp-3);font:500 20px/1.25 var(--font-display)}
.member-list{margin:0 0 var(--sp-4);padding:0;list-style:none}
.member-list li{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);min-height:var(--tap);border-bottom:1px solid var(--line-soft)}
.field select,.field input[type="date"]{width:100%;box-sizing:border-box;height:50px;padding:0 var(--sp-3);font:inherit;font-size:17px;color:var(--ink);background:var(--card);border:1px solid var(--line-strong);border-radius:var(--r-xs)}
fieldset.field{border:0;padding:0;margin:0 0 var(--sp-4)}
fieldset.field legend{padding:0;margin-bottom:var(--sp-1);font-weight:500}
.check{display:flex;align-items:center;gap:var(--sp-2);min-height:var(--tap)}
.check input{width:22px;height:22px}
.form-grid{display:grid;gap:0 var(--sp-5);grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));max-width:56rem}
.form-grid>.muted,.form-grid>.form-actions,.form-grid>fieldset.field:nth-last-of-type(-n+2){grid-column:1/-1}
.form-actions{display:flex;align-items:center;gap:var(--sp-4)}
.inline-fields{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:flex-end;margin:var(--sp-3) 0}
.inline-fields .field{margin:0;flex:1 1 14rem}
.credentials{display:grid;grid-template-columns:max-content 1fr;gap:var(--sp-2) var(--sp-5);margin:var(--sp-5) 0;padding:var(--sp-5);background:var(--gold-soft);border:2px dashed var(--gold)}
.credentials dt{color:var(--ink-3)}
.credentials dd{margin:0;font:600 22px/1.3 ui-monospace,Consolas,monospace;letter-spacing:.04em;overflow-wrap:anywhere}

/* Tableau en cartes sur téléphone */
@media (max-width:899px){
  .table,.table tbody,.table tr,.table td{display:block}
  .table thead{display:none}
  .table tr{padding:var(--sp-2) 0;border-bottom:3px double var(--gold)}
  .table td{display:grid;grid-template-columns:7.5rem 1fr;gap:var(--sp-2);border:0;padding:var(--sp-1) var(--sp-3)}
  .table td::before{content:attr(data-label);color:var(--ink-3);font-size:var(--fs-xs)}
  .table td.actions{display:flex}
  .table td.actions::before{content:none}
}
@media (min-width:900px){.table td.actions{min-width:11.5rem}}

/* --- Ma lettre, cartes cadeau, formulaire --- */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.title--sub{font-size:var(--fs-xl);margin:var(--sp-7) 0 var(--sp-3)}
.letter-tabs{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.letter-tabs a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--sp-4);color:var(--ink-2);text-decoration:none;border:1px solid var(--line-strong);border-radius:var(--r-xs)}
.letter-tabs a[aria-current="page"]{background:var(--primary);color:var(--on-primary);border-color:var(--primary);font-weight:600}
.letter-layout{display:grid;gap:var(--sp-5);align-items:start}
@media (min-width:900px){.letter-layout{grid-template-columns:minmax(0,1fr) 320px}}
.letter-gifts{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(20rem,1fr))}
.gift-card{display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-4) var(--sp-4) var(--sp-3) var(--sp-7);position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-1)}
.gift-card::before{content:"";position:absolute;left:var(--sp-3);top:var(--sp-4);width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--gold)}
.gift-card__title{margin:0 0 var(--sp-1);font:500 15px/1.3 var(--font-ui)}
.gift-card__meta{margin:0 0 var(--sp-2);font-size:var(--fs-xs);color:var(--ink-3)}
.gift-card__text{margin:0 0 var(--sp-2);font-size:var(--fs-sm);color:var(--ink-2);overflow-wrap:anywhere}
.gift-card__links{margin:0;font-size:var(--fs-xs)}
.stars{color:var(--gold-text);letter-spacing:.1em}
.status{margin:var(--sp-2) 0 0;padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);border-left:3px solid var(--line-strong);background:var(--paper-sunk)}
.status--reserved,.status--by_parents{border-left-color:var(--accent);color:var(--accent-text)}
.status--purchased{border-left-color:var(--success-text);color:var(--success-text)}
.status--participations{border-left-color:var(--gold);color:var(--gold-text)}
.note-box{padding:var(--sp-4);background:var(--card);border:1px dashed var(--gold);border-radius:var(--r-sm)}
.note-box textarea,.gift-form textarea{width:100%;box-sizing:border-box;padding:var(--sp-3);font:inherit;font-size:17px;color:var(--ink);background:var(--card);border:1px solid var(--line-strong);border-radius:var(--r-xs)}
.empty{padding:var(--sp-6);text-align:center;background:var(--card);border:1px dashed var(--line-strong);border-radius:var(--r-sm);grid-column:1/-1}
.fab{position:fixed;right:var(--sp-4);bottom:76px;z-index:9;display:inline-flex;align-items:center;min-height:52px;padding:0 var(--sp-5);border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font:600 14px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;box-shadow:var(--shadow-2),inset 0 0 0 3px var(--accent),inset 0 0 0 4px var(--gold-light)}
@media (min-width:900px){.fab{bottom:var(--sp-6);right:var(--sp-7)}}
.gift-form{max-width:40rem}
.gift-form input[type="url"]{display:block;width:100%;box-sizing:border-box;height:50px;margin-bottom:var(--sp-2);padding:0 var(--sp-3);font:inherit;font-size:17px;color:var(--ink);background:var(--card);border:1px solid var(--line-strong);border-radius:var(--r-xs)}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--sp-4);border:1px solid var(--line-strong);border-radius:var(--r-xs);background:var(--card);color:var(--ink-2)}
.chip input:checked+span{background:var(--accent-soft);border:2px solid var(--accent);color:var(--accent-text);font-weight:600}
.chip input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
.link-list{padding:0;list-style:none}
.link-list li{margin:var(--sp-2) 0}
.link-list a{display:inline-flex;align-items:center;min-height:var(--tap)}

/* --- Les listes, réservations, Mes cadeaux --- */
.filters{margin:var(--sp-3) 0 var(--sp-5)}
.filters summary{display:inline-flex;list-style:none;cursor:pointer;border:1px solid var(--line-strong);border-radius:var(--r-xs)}
.filters .btn--small:not(.btn--ghost){background:var(--primary);color:var(--on-primary)}
.filters__form{margin-top:var(--sp-3);padding:var(--sp-4);background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);display:grid;gap:0 var(--sp-6);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.filters__form .form-actions{grid-column:1/-1}
.plist{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr));align-items:start}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-1)}
.pcard--empty{border-style:dashed;background:transparent}
.pcard__head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);list-style:none;cursor:pointer;min-height:var(--tap)}
.pcard--empty .pcard__head{cursor:default}
.pcard__who{display:flex;flex-direction:column;min-width:0;flex:1;font:500 18px/1.25 var(--font-display)}
.pcard__who .muted{font:400 var(--fs-xs) var(--font-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--paper-sunk);color:var(--primary-text);font:italic 500 17px var(--font-display);box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--gold)}
.count{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:var(--fs-xs);color:var(--ink-3);white-space:nowrap}
.gauge{width:64px;height:4px;appearance:none;border:0;background:var(--line);border-radius:2px;overflow:hidden}
.gauge::-webkit-progress-bar{background:var(--line)}
.gauge::-webkit-progress-value{background:var(--primary)}
.gauge::-moz-progress-bar{background:var(--primary)}
.pcard__gifts{border-top:1px solid var(--line-soft)}
.pcard__note{margin:0;padding:var(--sp-3) var(--sp-4)}
details.more>summary{display:flex;align-items:center;min-height:var(--tap);padding:0 var(--sp-4);color:var(--primary-text);cursor:pointer;list-style:none;border-top:1px solid var(--line-soft)}
.grow{border-top:1px solid var(--line-soft)}
.pcard__gifts>.grow:first-child{border-top:0}
.grow--conflict{outline:2px solid var(--accent);outline-offset:-2px}
.grow--conflict>.alert{margin:var(--sp-2)}
.grow__line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-2);align-items:start;padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);min-height:64px}
.grow__d>summary{display:flex;flex-direction:column;gap:2px;padding:var(--sp-1) 0;cursor:pointer;list-style:none;min-height:var(--tap);justify-content:center}
.grow__title{font:500 15px/1.3 var(--font-ui);overflow-wrap:anywhere}
.grow__meta{font-size:var(--fs-xs);color:var(--ink-3)}
.grow__body{padding:var(--sp-2) 0 var(--sp-3);font-size:var(--fs-sm)}
.grow__body p{margin:0 0 var(--sp-2)}
.grow__tools{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:flex-end;margin-top:var(--sp-2)}
.grow__tools form{margin:0}
.grow__act{display:flex;align-items:center;min-height:var(--tap);justify-self:end}
.grow__act form{margin:0}
.grow__act details.confirm[open]{flex-basis:auto}
.grow__act details.confirm>form{position:absolute;right:0;z-index:5;min-width:15rem;box-shadow:var(--shadow-2)}
.status{display:block;font-size:var(--fs-xs);color:var(--ink-3)}
.status strong{font-weight:600}
.status--reserved,.status--by_parents{color:var(--accent-text)}
.status--purchased{color:var(--success-text)}
.status--participations{color:var(--gold-text)}
.participations{margin:var(--sp-2) 0;padding-left:var(--sp-5)}
.stamp{display:inline-block;padding:2px var(--sp-2);border:2px solid var(--stamp);color:var(--stamp);font:600 11px/1.15 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;text-align:center;transform:rotate(-5deg);box-shadow:inset 0 0 0 1px var(--card),inset 0 0 0 2px var(--stamp)}
.stamp--gold{border-color:var(--gold-text);color:var(--gold-text);box-shadow:inset 0 0 0 1px var(--card),inset 0 0 0 2px var(--gold-text);transform:rotate(-4deg)}
.wrapped{display:inline-block;padding:3px var(--sp-3);background:var(--wrapped-bg);color:var(--wrapped-ink);font:italic 500 14px var(--font-display);transform:rotate(4deg)}
.with-form{margin-top:var(--sp-2);padding:var(--sp-3);background:var(--paper-sunk);border:1px solid var(--line);border-radius:var(--r-sm)}
.recap{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:var(--sp-3);margin:var(--sp-4) 0;padding:var(--sp-4);background:var(--chrome);color:var(--on-chrome);border-bottom:3px double var(--gold)}
.recap dt{font:600 11.5px var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--on-chrome-2)}
.recap dd{margin:0;font:italic 500 30px var(--font-display);color:var(--chrome-accent)}
.recap__total{grid-column:1/-1}
.recap__total dd{font-size:24px}
.recap .muted{color:var(--on-chrome-2);margin:0}
.mgroup{margin-bottom:var(--sp-5)}
.mrow{margin-bottom:var(--sp-2);padding:var(--sp-2) var(--sp-3);background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm)}
.mrow--removed{opacity:.85;border-color:var(--accent)}
.mrow--removed .mrow__title{text-decoration:line-through}
.mrow--bought .mrow__title{text-decoration:line-through;color:var(--ink-3)}
.mrow__line{display:flex;align-items:center;gap:var(--sp-3)}
.mrow__main{flex:1;min-width:0}
.mrow__main p{margin:0}
.mrow__title{margin:0;font:500 15px/1.3 var(--font-ui);overflow-wrap:anywhere}
.mrow__tick{margin:0;display:grid;place-items:center;width:var(--tap);height:var(--tap)}
.tick{display:grid;place-items:center;width:var(--tap);height:var(--tap);padding:0;background:transparent;border:0;cursor:pointer}
.tick span{display:block;width:28px;height:28px;border:2px solid var(--line-strong);border-radius:var(--r-xs);background:var(--card)}
.tick[aria-pressed="true"] span{background:var(--primary);border-color:var(--primary);box-shadow:inset 0 0 0 4px var(--card)}
.mrow__release{position:relative}
.mrow__release>form{position:absolute;right:0;z-index:5;min-width:15rem;box-shadow:var(--shadow-2)}

/* --- Toast : confirmation + « Annuler », disparaît seul (CSS) ; flocons dorés 1,2 s --- */
#toast{position:fixed;left:var(--sp-4);right:var(--sp-4);bottom:80px;z-index:20;display:flex;justify-content:center;pointer-events:none}
.toast{pointer-events:auto;position:relative;display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-3) var(--sp-4);background:var(--chrome);color:var(--on-chrome);border:1px solid var(--gold);border-radius:var(--r-sm);box-shadow:var(--shadow-2);animation:noel-toast .25s ease-out,toast-out .4s ease-in 5.5s forwards}
.toast--error{border:2px solid var(--accent);background:var(--accent-soft);color:var(--accent-text)}
.toast form{margin:0}
.toast__undo{min-height:var(--tap);padding:0 var(--sp-2);background:transparent;border:0;color:var(--chrome-accent);font:600 14px var(--font-ui);text-decoration:underline;cursor:pointer}
.flakes{position:absolute;left:0;right:0;top:-28px;display:flex;justify-content:space-around;color:var(--gold);pointer-events:none}
.flakes i{font-style:normal;animation:noel-flake 1.2s ease-in both}
.flakes i:nth-child(2){animation-delay:.1s}.flakes i:nth-child(3){animation-delay:.2s}.flakes i:nth-child(4){animation-delay:.05s}.flakes i:nth-child(5){animation-delay:.15s}
@keyframes toast-out{to{opacity:0;visibility:hidden}}
@media (min-width:900px){#toast{left:calc(232px + var(--sp-7));right:var(--sp-7);bottom:var(--sp-6);justify-content:flex-start}}

/* --- Accueil : compte à rebours, alertes, raccourcis ; préférences d'e-mail --- */
.countdown{margin:var(--sp-3) 0 var(--sp-5);padding:var(--sp-5);background:var(--chrome);color:var(--on-chrome);border-bottom:3px double var(--gold);text-align:center}
.countdown__n{display:block;font:italic 500 84px/1 var(--font-display);color:var(--chrome-accent)}
.countdown__t{font:600 13px var(--font-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--on-chrome-2)}
.countdown .muted{color:var(--on-chrome-2);margin:var(--sp-3) 0 0}
.alerts{list-style:none;padding:0;margin:0 0 var(--sp-3);display:grid;gap:var(--sp-2)}
.alert-card{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:var(--r-sm)}
.alert-card__main{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;color:var(--ink);text-decoration:none}
.alert-card form{margin:0}
.shortcuts{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.shortcut{display:flex;flex-direction:column;gap:2px;padding:var(--sp-4);background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);text-decoration:none;box-shadow:var(--shadow-1)}
.shortcut strong{font:500 18px var(--font-display)}
.prefs{max-width:40rem}
.prefs__master{padding:var(--sp-2) 0}
.prefs__sub:disabled,.prefs:has(.prefs__master input:not(:checked)) .prefs__sub{opacity:.5}
.prefs:has(.prefs__master input:not(:checked)) .prefs__sub .check{pointer-events:none}
.logout-form{margin:var(--sp-5) 0}
.form-grid{align-items:end}