/* =============================================================================
   Carnet des mariés — back-office WeddingFeel.
   Direction : minimalisme utilitaire, monochrome chaud, filets d'1 px, couleur
   employée uniquement pour porter un sens (les états d'une invitation).
   La couleur dominante choisie par le client s'applique au SITE DES INVITÉS,
   pas ici : un back-office se lit, il ne se met pas en scène.
   ========================================================================== */
:root{
  --bg:#FBFBFA; --surface:#FFFFFF; --surface-2:#F7F6F3;
  --border:#EAEAEA; --border-fort:#DCDAD5;
  --ink:#2F3437; --ink-soft:#787774; --ink-fort:#111111;

  /* pastels délavés : un état se reconnaît à sa teinte, jamais à elle seule */
  --rouge:#FDEBEC;  --rouge-t:#9F2F2D;
  --bleu:#E1F3FE;   --bleu-t:#1F6C9F;
  --vert:#EDF3EC;   --vert-t:#346538;
  --jaune:#FBF3DB;  --jaune-t:#956400;
  --gris:#F1F1EF;   --gris-t:#787774;

  --r:10px; --r-s:6px;
  --z-top:20; --z-modal:50;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.6 Poppins,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.015em;line-height:1.25}
[hidden]{display:none !important}
.boot{padding:4rem;text-align:center;color:var(--ink-soft)}
svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}

/* --- Connexion ------------------------------------------------------------ */
.gate{min-height:100dvh;display:grid;place-items:center;padding:1.5rem;background:var(--surface-2)}
.gate-card{width:min(100%,25rem);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:2.5rem 2rem}
.gate h1{margin:.5rem 0 .5rem;font-size:1.4rem}
.gate-lead{margin:0 0 1.5rem;color:var(--ink-soft);font-size:.92rem}
.brand{margin:0;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600}

/* --- Champs et boutons ---------------------------------------------------- */
.lbl{display:block;font-size:.75rem;font-weight:500;color:var(--ink-soft);margin:0 0 .3rem}
.input,.select,textarea.input{width:100%;padding:.55rem .7rem;border:1px solid var(--border);
  border-radius:var(--r-s);background:var(--surface);color:var(--ink);font:inherit;font-size:.92rem;
  transition:border-color 180ms ease}
.input:hover,.select:hover{border-color:var(--border-fort)}
textarea.input{min-height:7rem;line-height:1.6;resize:vertical}
:focus-visible{outline:2px solid var(--ink-fort);outline-offset:2px}
.btn{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-size:.87rem;font-weight:500;
  padding:.5rem .8rem;min-height:38px;border-radius:var(--r-s);border:1px solid var(--border);
  background:var(--surface);color:var(--ink);cursor:pointer;white-space:nowrap;
  transition:background 180ms ease,border-color 180ms ease,color 180ms ease}
.btn:hover{background:var(--surface-2);border-color:var(--border-fort)}
.btn:active{transform:scale(.985)}
.btn--fort{background:var(--ink-fort);color:#fff;border-color:var(--ink-fort)}
.btn--fort:hover{background:#333;border-color:#333}
.btn--bloc{width:100%;justify-content:center;margin-top:1.1rem;padding:.65rem}
.btn--muet{border-color:transparent;background:none;color:var(--ink-soft)}
.btn--muet:hover{background:var(--surface-2);color:var(--ink)}
.btn--wa{background:var(--vert);color:var(--vert-t);border-color:#CFE3D5}
.btn--wa:hover{background:#E1EDE4;border-color:#BDD6C6}
.btn--min{padding:.28rem .5rem;min-height:30px;font-size:.79rem}
.btn--danger{color:var(--rouge-t);border-color:#F0D6D5}
.btn--danger:hover{background:var(--rouge);border-color:#E4C0BE}
.note{margin:1rem 0 0;padding:.65rem .8rem;border-radius:var(--r-s);font-size:.86rem;
  background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--border)}
.note--bad{background:var(--rouge);color:var(--rouge-t);border-color:#F0D6D5}
.note--ok{background:var(--vert);color:var(--vert-t);border-color:#CFE3D5}

/* --- En-tête -------------------------------------------------------------- */
.top{position:sticky;top:0;z-index:var(--z-top);display:flex;justify-content:space-between;
  align-items:center;gap:1rem;flex-wrap:wrap;padding:.7rem 1.5rem;
  background:var(--surface);border-bottom:1px solid var(--border)}
.top-l,.top-r{display:flex;align-items:center;gap:.8rem}
.top .select{width:auto;font-weight:500}
.who{font-size:.82rem;color:var(--ink-soft)}

/* --- Bandeau de mesures --------------------------------------------------- */
.recap{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));
  padding:1.25rem 1.5rem 0}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:.85rem .95rem;text-align:start;font:inherit;color:inherit;
  transition:border-color 180ms ease,background 180ms ease}
button.card{cursor:pointer}
button.card:hover{border-color:var(--border-fort);background:var(--surface-2)}
button.card.is-on{border-color:var(--ink-fort)}
.card h3{margin:0 0 .35rem;font-size:.72rem;font-weight:500;color:var(--ink-soft);
  display:flex;align-items:center;justify-content:space-between;gap:.4rem}
.card .big{margin:0;font-size:1.6rem;font-weight:600;line-height:1.1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.card .sub{margin:.2rem 0 0;font-size:.78rem;color:var(--ink-soft)}

/* --- Onglets -------------------------------------------------------------- */
.tabs{display:flex;gap:.15rem;padding:1.25rem 1.5rem 0;flex-wrap:wrap;
  border-bottom:1px solid var(--border);margin-bottom:-1px}
.tab{font:inherit;font-size:.88rem;font-weight:500;padding:.55rem .85rem;border:0;
  background:none;color:var(--ink-soft);cursor:pointer;border-bottom:2px solid transparent;
  transition:color 180ms ease,border-color 180ms ease}
.tab:hover{color:var(--ink)}
.tab.is-on{color:var(--ink-fort);border-bottom-color:var(--ink-fort)}
.bar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;padding:1rem 1.5rem 0}
.bar .select{width:auto}
.champ-icone{position:relative;flex:0 1 16rem}
.champ-icone .i{position:absolute;inset-inline-start:.6rem;top:50%;transform:translateY(-50%);
  color:var(--ink-soft);pointer-events:none}
.champ-icone .input{padding-inline-start:2.1rem}
.count{color:var(--ink-soft);font-size:.83rem;margin-inline-start:auto;
  font-variant-numeric:tabular-nums}
main{padding:1.25rem 1.5rem 4rem}

/* --- Tableau -------------------------------------------------------------- */
.wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.88rem}
th,td{text-align:start;padding:.6rem .75rem;border-bottom:1px solid var(--border);vertical-align:top}
th{font-size:.71rem;font-weight:500;color:var(--ink-soft);white-space:nowrap;
  position:sticky;top:0;background:var(--surface-2);z-index:1}
tbody tr:last-child td{border-bottom:0}
tr[data-fiche]{cursor:pointer;transition:background 150ms ease}
tr[data-fiche]:hover{background:var(--surface-2)}
.nom{font-weight:500}
.tel{color:var(--ink-soft);font-size:.8rem;font-variant-numeric:tabular-nums}
.nums{font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap}
.actions{display:flex;gap:.3rem;flex-wrap:wrap}

/* --- Étiquettes ----------------------------------------------------------- */
.pill{display:inline-block;padding:.14rem .55rem;border-radius:999px;font-size:.7rem;
  font-weight:500;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.pill--a_envoyer{background:var(--gris);color:var(--gris-t)}
.pill--envoye{background:var(--jaune);color:var(--jaune-t)}
.pill--ouvert{background:var(--bleu);color:var(--bleu-t)}
.pill--present{background:var(--vert);color:var(--vert-t)}
.pill--absent{background:var(--rouge);color:var(--rouge-t)}
.ev{display:inline-block;padding:.1rem .4rem;border-radius:4px;background:var(--surface-2);
  color:var(--ink-soft);font-size:.72rem;margin:0 .18rem .18rem 0;border:1px solid var(--border)}
.ev--on{background:var(--ink-fort);color:#fff;border-color:var(--ink-fort)}
.he{font-size:.68rem;color:var(--bleu-t);background:var(--bleu);padding:.05rem .35rem;
  border-radius:4px;font-weight:500}

/* --- Kanban --------------------------------------------------------------- */
.kanban{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.col{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:.7rem;min-height:6rem}
.col h3{margin:0 0 .6rem;font-size:.72rem;font-weight:500;color:var(--ink-soft);
  display:flex;justify-content:space-between;gap:.5rem}
.kcard{border:1px solid var(--border);border-radius:var(--r-s);padding:.5rem .6rem;
  margin-bottom:.4rem;background:var(--surface);cursor:pointer;transition:border-color 150ms ease}
.kcard:hover{border-color:var(--border-fort)}
.kcard .meta{font-size:.76rem;color:var(--ink-soft);margin-top:.1rem}

/* --- Panneaux ------------------------------------------------------------- */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:1.35rem;margin-bottom:1rem}
.panel--large{max-width:62rem}
.panel h2{font-size:1.02rem;margin:0 0 .3rem}
.panel h3{font-size:.9rem;margin:1.4rem 0 .5rem}
.panel p{color:var(--ink-soft);font-size:.88rem;margin:.3rem 0}
.tete{display:flex;gap:1rem;justify-content:space-between;align-items:start;flex-wrap:wrap;
  margin-bottom:.9rem}
.rowform{display:flex;gap:.5rem;flex-wrap:wrap;align-items:end;margin-top:.9rem}
.rowform .input,.rowform .select{width:auto;min-width:11rem}
.grille{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(11.5rem,1fr))}
.vide{padding:2.5rem;text-align:center;color:var(--ink-soft);font-size:.9rem}
kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8em;
  border:1px solid var(--border);border-radius:4px;background:var(--surface-2);padding:.05rem .3rem}
.etapes{counter-reset:e;list-style:none;padding:0;margin:.9rem 0 0}
.etapes li{counter-increment:e;position:relative;padding-inline-start:2rem;margin-bottom:.65rem;
  color:var(--ink-soft);font-size:.88rem}
.etapes li::before{content:counter(e);position:absolute;inset-inline-start:0;top:.05rem;
  width:1.35rem;height:1.35rem;border-radius:50%;background:var(--surface-2);
  border:1px solid var(--border);color:var(--ink);display:grid;place-items:center;
  font-size:.72rem;font-weight:500}
.etapes strong{color:var(--ink);font-weight:500}

/* --- Cases à cocher ------------------------------------------------------- */
.cases{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.3rem}
.case{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .7rem;
  border:1px solid var(--border);border-radius:var(--r-s);font-size:.87rem;cursor:pointer;
  background:var(--surface);transition:border-color 180ms ease,background 180ms ease}
.case:hover{border-color:var(--border-fort)}
.case:has(input:checked){border-color:var(--ink-fort);background:var(--surface-2);font-weight:500}
.case input{accent-color:var(--ink-fort);cursor:pointer}

/* --- Prénoms des enfants en pastilles ------------------------------------- */
.jetons{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center;padding:.35rem;
  border:1px solid var(--border);border-radius:var(--r-s);background:var(--surface);min-height:42px}
.jetons:focus-within{outline:2px solid var(--ink-fort);outline-offset:2px}
.jeton{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .3rem .2rem .6rem;
  border-radius:999px;background:var(--surface-2);border:1px solid var(--border);font-size:.85rem}
.jeton button{display:grid;place-items:center;width:20px;height:20px;border:0;border-radius:50%;
  background:none;color:var(--ink-soft);cursor:pointer;padding:0;
  transition:background 150ms ease,color 150ms ease}
.jeton button:hover{background:var(--rouge);color:var(--rouge-t)}
.jetons input{flex:1;min-width:7rem;border:0;outline:0;background:none;font:inherit;
  font-size:.88rem;padding:.25rem}

/* --- Fiche invité --------------------------------------------------------- */
.modal{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;padding:1rem}
.modal-fond{position:absolute;inset:0;background:rgba(17,17,17,.35)}
.modal-boite{position:relative;width:min(100%,41rem);max-height:90dvh;overflow:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:0 2px 24px rgba(0,0,0,.05)}
.modal-tete{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;
  gap:1rem;padding:1rem 1.35rem;border-bottom:1px solid var(--border);background:var(--surface)}
.modal-tete h2{font-size:1rem}
.modal-corps{padding:1.35rem}
.pied{display:flex;gap:.5rem;justify-content:space-between;align-items:center;flex-wrap:wrap;
  margin-top:1.35rem;padding-top:1rem;border-top:1px solid var(--border)}

/* --- Plan de table -------------------------------------------------------- */
.tables{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.tbl{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:.85rem;
  transition:border-color 180ms ease}
.tbl.cible{border-color:var(--ink-fort)}
.tbl h4{display:flex;justify-content:space-between;gap:.5rem;font-size:.92rem;margin-bottom:.15rem}
.jauge{height:3px;border-radius:2px;background:var(--surface-2);margin:.5rem 0 .65rem;overflow:hidden}
.jauge i{display:block;height:100%;background:var(--ink-fort);transition:width 220ms ease}
.jauge.pleine i{background:var(--vert-t)}
.tbl ul{list-style:none;margin:0;padding:0;font-size:.85rem}
.tbl li{display:flex;justify-content:space-between;gap:.5rem;align-items:center;
  padding:.28rem 0;border-bottom:1px solid var(--surface-2)}
.tbl li:last-child{border:0}
.aplacer{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.55rem}
.pastille{display:inline-flex;align-items:center;gap:.4rem;padding:.32rem .6rem;border-radius:999px;
  border:1px solid var(--border);background:var(--surface);font-size:.82rem;cursor:pointer;
  transition:border-color 150ms ease,background 150ms ease}
.pastille:hover{border-color:var(--border-fort);background:var(--surface-2)}
.pastille.is-on{border-color:var(--ink-fort);background:var(--ink-fort);color:#fff}
.pastille b{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}
@media (max-width:720px){
  .top{padding:.6rem .9rem}
  main,.bar,.recap,.tabs{padding-inline:.9rem}
  th,td{padding:.5rem .55rem}
  .champ-icone{flex:1 1 100%}
}

/* --- En-têtes triables ------------------------------------------------------ */
.tri{font:inherit;font-size:inherit;font-weight:inherit;color:inherit;background:none;
  border:0;padding:0;cursor:pointer;white-space:nowrap;transition:color 150ms ease}
.tri:hover{color:var(--ink)}
.tri.is-on{color:var(--ink-fort);font-weight:600}

/* --- Pastilles d'événement modifiables sur place ---------------------------- */
button.ev{font:inherit;font-size:.72rem;cursor:pointer;transition:background 150ms ease,
  border-color 150ms ease,color 150ms ease}
button.ev:hover{border-color:var(--ink-fort)}

/* --- Le dossier d'un foyer, sous ses champs --------------------------------- */
.dossier{margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--border)}
.dossier h3{font-size:.8rem;font-weight:600;color:var(--ink-soft);margin:0 0 .5rem}
.dossier h3+h3,.chrono+h3{margin-top:1.2rem}
.chrono{list-style:none;margin:0;padding:0}
.chrono li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.35rem 0;border-bottom:1px solid var(--surface-2);font-size:.87rem}
.chrono li:last-child{border:0}
ol.chrono{counter-reset:c}
ol.chrono li{counter-increment:c;position:relative;padding-inline-start:1.4rem}
ol.chrono li::before{content:'';position:absolute;inset-inline-start:.28rem;top:.85rem;
  width:7px;height:7px;border-radius:50%;background:var(--ink-fort)}
ol.chrono li:not(:last-child)::after{content:'';position:absolute;inset-inline-start:.55rem;
  top:1.35rem;bottom:-.35rem;width:1px;background:var(--border)}

/* =============================================================================
   La couleur, par moment
   Chaque événement porte sa teinte, la même partout : vignette, pastille,
   panneau, plan de table, PDF. Elle dit DE QUOI on parle — elle ne décore pas.
   ========================================================================== */
.card--ev{border-color:var(--fond);background:linear-gradient(180deg,var(--fond) 0 3px,var(--surface) 3px)}
.card--ev .big{color:var(--trait)}
.card--ev h3{color:var(--trait)}
.card--ev .i{color:var(--vif)}
button.card--ev:hover{border-color:var(--vif)}
button.card--ev.is-on{border-color:var(--vif);box-shadow:inset 0 0 0 1px var(--vif)}

.panel--ev{border-top:3px solid var(--vif)}
.panel--ev h2{color:var(--trait)}
.panel--ev thead th{background:var(--fond);color:var(--trait)}
.panel--ev .jauge i{background:var(--vif)}
.panel--ev .tbl h4{color:var(--trait)}
.panel--ev .pastille.is-on{background:var(--vif);border-color:var(--vif)}

button.ev{background:var(--surface-2);color:var(--ink-soft);border-color:var(--border)}
button.ev.ev--on{background:var(--fond);color:var(--trait);border-color:var(--fond);font-weight:500}
button.ev:hover{border-color:var(--trait)}

/* le tableau respire : une ligne sur deux légèrement teintée */
tbody tr:nth-child(even){background:var(--surface-2)}
tbody tr:nth-child(even):hover,tbody tr:hover{background:var(--bg)}

/* --- Saisir une réponse à la place du foyer -------------------------------- */
.compteurs{list-style:none;margin:.2rem 0 0;padding:0;display:grid;gap:.4rem}
.compteurs li{display:flex;align-items:center;gap:.6rem;padding:.4rem .55rem;
  border:1px solid var(--fond,var(--border));border-radius:var(--r-s);background:var(--fond,var(--surface-2))}
.compteurs .etiq{flex:1;font-size:.88rem;font-weight:500;color:var(--trait,var(--ink))}
.compteurs .compteur{width:4.5rem;text-align:center;font-variant-numeric:tabular-nums;
  background:var(--surface)}
.compteurs .tel{white-space:nowrap}