/* =========================================================================
   Présences — Rotary Club de Roubaix
   Design mobile-first. Palette officielle Rotary International.
   ========================================================================= */

:root{
  color-scheme: light;

  /* Marque Rotary */
  --royal:      #17458F;
  --royal-dk:   #0F2F63;
  --azure:      #0067C8;
  --sky:        #00A2E0;
  --gold:       #F7A81B;
  --gold-dk:    #C67F00;
  --cranberry:  #D41367;

  /* Sémantique */
  --present:    #0E7C55;
  --present-bg: #E7F5EF;
  --absent:     #B4232A;
  --absent-bg:  #FBECEC;
  --pending:    #A76B00;
  --pending-bg: #FFF6E3;

  /* Neutres */
  --ink:      #14181F;
  --ink-2:    #47505E;
  --ink-3:    #767F8D;
  --line:     #E3E7EE;
  --line-2:   #EEF1F6;
  --surface:  #FFFFFF;
  --canvas:   #F1F4F9;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;

  --shadow-1: 0 1px 2px rgba(20,24,31,.06), 0 1px 3px rgba(20,24,31,.05);
  --shadow-2: 0 4px 12px rgba(20,24,31,.08), 0 2px 4px rgba(20,24,31,.05);
  --shadow-3: 0 18px 40px rgba(15,47,99,.18);

  --font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
/* doit primer sur les display:flex/grid posés plus bas, sinon [hidden] est ignoré */
[hidden]{ display:none !important; }
body{
  font-family: var(--font);
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
button{ font-family:inherit; cursor:pointer; }
input,select{ font-family:inherit; }

/* =========================================================================
   Scène — l'application occupe tout l'écran, sur téléphone comme sur bureau
   ========================================================================= */
.stage{ display:flex; justify-content:center; height:100vh; height:100dvh; }
.device{ width:100%; height:100%; }

.device__screen{
  display:flex; flex-direction:column;
  height:100%; overflow:hidden;
  background: var(--canvas);
  position:relative;
}

/* Cadre téléphone : uniquement pour les démonstrations du Bureau. */
.stage--frame{ background:#DDE3EC; padding:24px 16px; }
.stage--frame .device{
  width:392px; max-width:100%;
  height:min(812px, calc(100vh - 48px));
  background:#fff; border-radius:38px; padding:10px;
  box-shadow: var(--shadow-3), 0 0 0 1px rgba(15,47,99,.08);
}
.stage--frame .device__screen{ border-radius:29px; }

/* Bascule d'aperçu, réservée au Bureau */
.vpswitch{
  position:fixed; right:14px; bottom:14px; z-index:50;
  display:flex; align-items:center; gap:6px;
  background:#fff; border:1px solid var(--line); border-radius:99px;
  padding:5px 7px; box-shadow: var(--shadow-2);
  font-size:11.5px; font-weight:700; color:var(--ink-3);
}
.vpswitch button{
  background:transparent; border:0; border-radius:99px;
  padding:5px 11px; font-size:11.5px; font-weight:700; color:var(--ink-3);
}
.vpswitch button.is-active{ background:var(--royal); color:#fff; }

/* Écran d'attente et lien non reconnu */
.boot{
  display:grid; place-items:center; height:100%; text-align:center;
  padding:30px; color:var(--ink-3); font-size:13.5px; line-height:1.6;
}
.boot img{ height:34px; margin-bottom:16px; }
.boot h1{ font-size:17px; color:var(--ink); margin:0 0 8px; letter-spacing:-.02em; }
.boot p{ margin:0 0 8px; max-width:330px; }

/* =========================================================================
   Barre d'application
   ========================================================================= */
.appbar{
  background: linear-gradient(178deg, var(--royal) 0%, var(--royal-dk) 100%);
  color:#fff;
  padding:14px 16px 14px;
  flex:none;
  position:relative;
}
.appbar__top{ display:flex; align-items:center; gap:12px; }
.appbar__logo{
  background:#fff; border-radius:8px; padding:4px 6px; flex:none;
  display:flex; align-items:center;
}
.appbar__logo img{ display:block; height:22px; width:auto; }
.appbar__titles{ min-width:0; flex:1; }
.appbar__title{ font-size:14px; font-weight:700; letter-spacing:-.015em; line-height:1.2; }
.appbar__sub{ font-size:11.5px; opacity:.72; margin-top:2px; }
.appbar__who{
  display:flex; align-items:center; gap:7px; flex:none;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.16);
  border-radius:99px; padding:4px 10px 4px 4px; font-size:11.5px; font-weight:600;
}
.avatar{
  width:24px; height:24px; border-radius:50%; flex:none;
  background: var(--gold); color:#3B2A00;
  display:grid; place-items:center; font-size:10px; font-weight:700; letter-spacing:-.02em;
}
.avatar--lg{ width:34px; height:34px; font-size:12px; }

/* Bandeau d'alerte "réponses en attente" */
.nudge{
  margin-top:12px;
  display:flex; align-items:center; gap:10px;
  background: rgba(247,168,27,.16);
  border:1px solid rgba(247,168,27,.42);
  border-radius: var(--r-md);
  padding:9px 12px;
  font-size:12.5px; line-height:1.35;
}
.nudge b{ color: var(--gold); }
.nudge__icon{ flex:none; width:20px; height:20px; }

/* =========================================================================
   Zone défilante
   ========================================================================= */
.scroller{
  flex:1; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding-bottom:16px;
}

/* En-tête de mois — RESTE FIGÉ au défilement */
.month{
  position:sticky; top:0; z-index:12;
  background: var(--canvas);
  padding:14px 16px 8px;
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color: var(--ink-3);
  border-bottom:1px solid var(--line-2);
  box-shadow:0 6px 8px -8px rgba(20,24,31,.18);
}

/* =========================================================================
   Carte événement
   ========================================================================= */
.card{
  background: var(--surface);
  margin:12px 12px 0;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  border:1px solid var(--line);
  overflow:hidden;
}
.card--past{ opacity:.72; }
.card--answered-present{ border-left:4px solid var(--present); }
.card--answered-absent { border-left:4px solid var(--absent); }
.card--pending         { border-left:4px solid var(--gold); }

.card__head{ display:flex; gap:12px; padding:13px 14px 11px; align-items:flex-start; }
.datebox{
  flex:none; width:50px; text-align:center; align-self:flex-start;
  background: var(--line-2); border-radius:10px; padding:6px 0 5px;
}
.datebox__dow{ font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
.datebox__day{ font-size:21px; font-weight:700; line-height:1.05; color:var(--royal); letter-spacing:-.02em; }
.datebox__mon{ font-size:9.5px; font-weight:600; text-transform:uppercase; color:var(--ink-3); letter-spacing:.06em; }
.card--action .datebox{ background:#FFF3DC; }
.card--action .datebox__day{ color: var(--gold-dk); }

.card__body{ min-width:0; flex:1; }
.card__title{ font-size:15px; font-weight:700; letter-spacing:-.01em; line-height:1.25; }
.card__meta{ margin-top:4px; font-size:12.5px; color:var(--ink-2); display:flex; flex-wrap:wrap; gap:4px 10px; }
.card__meta span{ display:inline-flex; align-items:center; gap:4px; }
.card__note{
  margin-top:8px; font-size:12px; color:var(--ink-2); line-height:1.45;
  background: var(--line-2); border-radius:8px; padding:7px 9px;
}

.chips{ display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.chip{
  display:inline-flex; align-items:center; gap:4px;
  font-size:9.5px; font-weight:700; letter-spacing:.045em; text-transform:uppercase;
  border-radius:5px; padding:3px 7px; line-height:1.35;
}
.chip--repas{ background:#E8F1FC; color:var(--azure); }
.chip--action{ background:#FFF3DC; color:var(--gold-dk); }
.chip--soiree{ background:#F7E9F1; color:var(--cranberry); }
.chip--cloture{ background:var(--pending-bg); color:var(--pending); }
.chip--clos{ background:var(--line-2); color:var(--ink-3); }

/* --- Boutons Présent / Absent --- */
.choice{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  padding:0 14px 12px;
}
.choice button{
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px;                      /* cible tactile confortable */
  border-radius:11px; border:2px solid var(--line);
  background:#fff; color:var(--ink-2);
  font-size:14.5px; font-weight:700; letter-spacing:-.01em;
  transition: background .12s, border-color .12s, color .12s;
}
.choice button:active{ transform: translateY(1px); }
.choice button .ic{
  width:22px; height:22px; flex:none; border-radius:50%; padding:4px;
  background:var(--line-2); color:#fff; stroke-width:3.5;
}
.choice .yes.is-on{ background:var(--present-bg); border-color:var(--present); color:var(--present); }
.choice .yes.is-on .ic{ background:var(--present); }
.choice .no.is-on { background:var(--absent-bg);  border-color:var(--absent);  color:var(--absent); }
.choice .no.is-on .ic{ background:var(--absent); }
.choice .yes:not(.is-on):hover{ border-color:var(--present); color:var(--present); }
.choice .no:not(.is-on):hover { border-color:var(--absent);  color:var(--absent); }

/* --- Sous-options (GOOD ROUB') --- */
.options{ padding:0 14px 12px; }
.options__title{ font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px; }
.opt{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--line); border-radius:10px;
  padding:10px 11px; margin-bottom:6px; font-size:13px; background:#fff;
}
.opt.is-on{ border-color:var(--present); background:var(--present-bg); }
.opt__box{
  width:20px; height:20px; border-radius:6px; flex:none;
  border:1.5px solid var(--line); display:grid; place-items:center; background:#fff;
}
.opt.is-on .opt__box{ background:var(--present); border-color:var(--present); }
.opt.is-on .opt__box svg{ display:block; }
.opt__box svg{ display:none; width:12px; height:12px; }
.opt__count{
  margin-left:auto; flex:none; font-size:11px; font-weight:700; color:var(--ink-2);
  background:#fff; border:1px solid var(--line); border-radius:99px; padding:2px 8px;
}
.opt.is-on .opt__count{ border-color:var(--present); color:var(--present); }

/* --- Invités --- */
.guests{ padding:0 14px 12px; }
.guests__title{ font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px; }
.guest{
  display:flex; align-items:center; gap:8px;
  background:#F7F9FC; border:1px solid var(--line); border-radius:9px;
  padding:8px 10px; margin-bottom:6px; font-size:13px;
}
.guest__txt{ display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.guest__txt b{ font-weight:600; }
.guest__by{ font-size:11px; color:var(--ink-3); }
.guest__del{
  margin-left:auto; background:none; border:0; color:var(--ink-3);
  font-size:16px; line-height:1; padding:2px 4px; border-radius:5px; flex:none;
}
.guest__del:hover{ color:var(--absent); background:var(--absent-bg); }
.btn-add{
  width:100%; min-height:42px;
  border:1.5px dashed var(--line); background:#fff; border-radius:10px;
  color: var(--azure); font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.btn-add:hover{ border-color:var(--azure); background:#F5FAFF; }

/* --- Compteur de fin de carte --- */
.tally{
  display:flex; align-items:center; gap:11px;
  border-top:1px solid var(--line-2);
  background:#FAFBFD;
  padding:10px 14px;
}
.tally__num{
  font-size:22px; font-weight:700; color:var(--royal);
  letter-spacing:-.035em; line-height:1; flex:none;
}
.tally__lbl{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.tally__lbl b{ font-size:12.5px; color:var(--ink); }
.tally__lbl span{ font-size:11.5px; color:var(--ink-3); }
.tally__link{
  margin-left:auto; background:none; border:0; flex:none;
  color:var(--azure); font-size:12.5px; font-weight:700;
  display:inline-flex; align-items:center; gap:3px; padding:6px 0 6px 8px;
}
.progress{ height:3px; background:var(--line-2); }
.progress > i{ display:block; height:100%; background:var(--azure); }

/* =========================================================================
   Barre d'onglets
   ========================================================================= */
.tabbar{
  flex:none; display:flex; background:#fff; border-top:1px solid var(--line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.tabbar button{
  position:relative;
  flex:1; background:none; border:0; padding:6px 2px 5px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--ink-3); font-size:10.5px; font-weight:700; letter-spacing:.01em;
  border-radius:8px;
}
.tabbar button svg{ width:21px; height:21px; }
.tabbar button.is-active{ color:var(--royal); }
.tabbar__badge{
  position:absolute; top:2px; left:50%; margin-left:5px;
  background:var(--gold); color:#3B2A00; font-size:9px; font-weight:700;
  border-radius:99px; padding:0 5px; line-height:15px; min-width:16px; text-align:center;
  box-shadow:0 0 0 2px #fff;
}

/* =========================================================================
   Tableau Bureau — dates figées en haut, noms figés à gauche
   ========================================================================= */
.panel{ margin:12px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-1); overflow:hidden; }
.panel__head{ padding:13px 15px; border-bottom:1px solid var(--line-2); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.panel__title{ font-size:14px; font-weight:700; letter-spacing:-.01em; }
.panel__sub{ font-size:12px; color:var(--ink-3); }
.panel__actions{ margin-left:auto; display:flex; gap:8px; }

.gridwrap{ overflow:auto; max-height:520px; }
table.grid{ border-collapse:separate; border-spacing:0; font-size:12.5px; width:max-content; min-width:100%; }
table.grid th, table.grid td{ border-bottom:1px solid var(--line-2); white-space:nowrap; }

table.grid thead th{
  position:sticky; top:0; z-index:3;
  background:#fff; border-bottom:2px solid var(--line);
  padding:9px 10px; text-align:center; vertical-align:bottom;
  font-weight:700; min-width:104px;
}
table.grid thead th .th-day{ display:block; font-size:16px; color:var(--royal); letter-spacing:-.02em; }
table.grid thead th .th-mon{ display:block; font-size:9.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); font-weight:700; }
table.grid thead th .th-lbl{ display:block; font-size:10.5px; color:var(--ink-2); font-weight:600; margin-top:3px; max-width:104px; white-space:normal; line-height:1.25; }

table.grid th.namecol, table.grid td.namecol{
  position:sticky; left:0; z-index:2; background:#fff;
  text-align:left; padding:7px 12px; min-width:184px;
  border-right:1px solid var(--line);
}
table.grid thead th.namecol{ z-index:4; }
table.grid tbody tr:nth-child(even) td, table.grid tbody tr:nth-child(even) td.namecol{ background:#FAFBFD; }
table.grid tbody tr:hover td, table.grid tbody tr:hover td.namecol{ background:#F1F6FD; }
table.grid td{ padding:7px 10px; text-align:center; }

.pill{
  display:inline-grid; place-items:center; width:26px; height:26px; border-radius:8px;
  font-size:12px; font-weight:700;
}
.pill--o{ background:var(--present-bg); color:var(--present); }
.pill--n{ background:var(--absent-bg);  color:var(--absent); }
.pill--x{ background:var(--line-2);     color:#B6BECB; }

tfoot td{ position:sticky; bottom:0; background:#FFF9EC; border-top:2px solid var(--gold); font-weight:700; padding:9px 10px; text-align:center; }
tfoot td.namecol{ position:sticky; left:0; z-index:2; background:#FFF9EC; text-align:left; }
tfoot .ft-num{ font-size:16px; color:var(--royal); display:block; letter-spacing:-.02em; }
tfoot .ft-lbl{ font-size:9.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; }

.name-main{ font-weight:600; }
.name-tag{
  font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  border-radius:4px; padding:1px 5px; margin-left:6px; vertical-align:1px;
}
.tag-conjoint{ background:#F3E9FA; color:#7A3FA8; }
.tag-famille { background:#E9F5FA; color:#0B6E8C; }
.tag-jeune   { background:#FFF3DC; color:var(--gold-dk); }
.tag-invite  { background:#E8F1FC; color:var(--azure); }

/* =========================================================================
   Boutons génériques
   ========================================================================= */
.btn{
  border-radius:9px; border:1px solid var(--line); background:#fff;
  padding:8px 13px; font-size:12.5px; font-weight:700; color:var(--ink-2);
  display:inline-flex; align-items:center; gap:6px;
}
.btn:hover{ border-color:var(--ink-3); color:var(--ink); }
.btn--primary{ background:var(--royal); border-color:var(--royal); color:#fff; }
.btn--primary:hover{ background:var(--royal-dk); border-color:var(--royal-dk); color:#fff; }
.btn--danger{ color:var(--absent); border-color:#F0D2D2; }
.btn--danger:hover{ background:var(--absent-bg); border-color:var(--absent); color:var(--absent); }
.btn--ghost{ border-color:transparent; background:transparent; color:var(--azure); }
.btn--block{ width:100%; justify-content:center; min-height:46px; font-size:14px; }

/* =========================================================================
   Listes (membres, restaurant)
   ========================================================================= */
.list{ }
.row{
  display:flex; align-items:center; gap:11px;
  padding:11px 15px; border-bottom:1px solid var(--line-2); font-size:13.5px;
}
.row:last-child{ border-bottom:0; }
.row__main{ min-width:0; flex:1; }
.row__name{ font-weight:600; }
.row__sub{ font-size:11.5px; color:var(--ink-3); margin-top:1px; }
.row__end{ margin-left:auto; flex:none; text-align:right; }

.lock{
  display:flex; gap:9px; align-items:flex-start;
  margin:12px 12px 0; padding:11px 13px;
  background:#EAF1FB; border:1px solid #CBDCF5; border-radius:var(--r-md);
  font-size:12.5px; color:#1D3F73; line-height:1.45;
}
.lock svg{ flex:none; width:17px; height:17px; margin-top:1px; }

/* Restaurant : grande carte de couverts */
.covers{
  display:flex; align-items:center; gap:18px;
  padding:15px 16px; background:#F5F9FF;
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
  border-left:4px solid var(--gold);
}
.covers__num{ font-size:38px; font-weight:700; line-height:.95; letter-spacing:-.04em; color:var(--royal); }
.covers__lbl{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); margin-top:4px; }
.covers__split{ margin-left:auto; text-align:right; font-size:12.5px; color:var(--ink-2); line-height:1.65; }
.covers__split b{ color:var(--ink); }

.emptystate{ text-align:center; padding:46px 26px; color:var(--ink-3); font-size:13px; line-height:1.6; }
.emptystate svg{ width:44px; height:44px; opacity:.35; margin-bottom:10px; }

/* Résumé chiffré */
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-2); }
@media (min-width:700px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat{ background:#fff; padding:12px 10px; text-align:center; }
.stat__n{ font-size:22px; font-weight:700; color:var(--royal); letter-spacing:-.03em; line-height:1.1; }
.stat__l{ font-size:10.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; font-weight:700; margin-top:3px; }

/* =========================================================================
   Feuille modale
   ========================================================================= */
.sheet-backdrop{
  position:fixed; inset:0; z-index:80;
  background:rgba(15,25,45,.45); backdrop-filter:blur(2px);
  display:flex; align-items:flex-end; justify-content:center;
}
.sheet{
  background:#fff; width:100%; max-width:420px;
  border-radius:20px 20px 0 0; max-height:82vh; overflow-y:auto;
  box-shadow:0 -8px 40px rgba(0,0,0,.25);
  animation: up .18s ease-out;
}
@keyframes up{ from{ transform:translateY(22px); opacity:.4 } to{ transform:none; opacity:1 } }
.sheet__grip{ width:38px; height:4px; border-radius:99px; background:var(--line); margin:9px auto 0; }
.sheet__head{ padding:12px 18px 10px; border-bottom:1px solid var(--line-2); }
.sheet__title{ font-size:16px; font-weight:700; letter-spacing:-.015em; }
.sheet__sub{ font-size:12.5px; color:var(--ink-3); margin-top:2px; }
.sheet__body{ padding:14px 18px 20px; }
.field{ margin-bottom:12px; }
.field label{ display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); margin-bottom:5px; }
.field input, .field select{
  width:100%; border:1.5px solid var(--line); border-radius:10px;
  padding:11px 12px; font-size:14px; color:var(--ink); background:#fff;
}
.field input:focus, .field select:focus{ outline:none; border-color:var(--azure); box-shadow:0 0 0 3px rgba(0,103,200,.12); }
.field small{ display:block; font-size:11.5px; color:var(--ink-3); margin-top:5px; line-height:1.4; }

.attendee{
  display:flex; align-items:center; gap:9px;
  padding:8px 0; border-bottom:1px solid var(--line-2); font-size:13.5px;
}
.attendee:last-child{ border-bottom:0; }

.toast{
  position:fixed; left:50%; bottom:84px; transform:translateX(-50%);
  background:var(--ink); color:#fff; font-size:13px; font-weight:600;
  padding:11px 18px; border-radius:99px; z-index:99; box-shadow:var(--shadow-2);
  animation: up .18s ease-out;
}

/* =========================================================================
   Adaptations écran large
   ========================================================================= */
@media (min-width: 860px){
  .stage:not(.stage--frame) .cards-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(340px,1fr));
    gap:0 4px; align-items:start; padding-bottom:20px;
  }
  .stage:not(.stage--frame) .month{ grid-column:1/-1; }
  .stage:not(.stage--frame) .appbar{ padding:16px 22px; }
  .stage:not(.stage--frame) .appbar__logo img{ height:32px; }
  .stage:not(.stage--frame) .appbar__title{ font-size:17px; }
  .stage:not(.stage--frame) .tabbar{ justify-content:center; gap:10px; }
  .stage:not(.stage--frame) .tabbar button{ flex:0 0 128px; }
}

@media print{
  .vpswitch,.tabbar,.appbar__who,.panel__actions,.btn{ display:none !important; }
  body{ background:#fff; }
  .stage{ padding:0; }
  .device,.device__screen{ height:auto !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; }
  .scroller{ overflow:visible !important; }
}