/* B3 tâche 010 — page publique d'acceptation d'une invitation d'équipe
   (`/invitations/:token`). Feuille reprise de `/mockups/invitation` (maquette
   5000.dev du 18/09), à l'identique.

   Les seuls blocs qui n'ont pas de jumeau dans la maquette sont ceux du refus :
   la maquette ouvrait sa confirmation en JavaScript, l'application l'ouvre avec
   `<details>` / `<summary>`. Le rendu est le même, la mécanique tient sans une
   ligne de script.

   Portée par `.page-inv` : cette page vit sous le layout `auth`, qui sert
   toutes les feuilles produit. Aucun sélecteur nu ne doit en sortir. */

.page-inv { background: #F7F5F1; min-height: 100vh; padding: 28px 16px 64px; font-family: 'Geist', system-ui, sans-serif; }
.page-inv * { box-sizing: border-box; }
.page-inv .inv-wrap { max-width: 560px; margin: 0 auto; }

/* Carte */
.page-inv .card { background: #fff; border: 1px solid #E7E1D6; border-radius: 18px; padding: 26px 24px; box-shadow: 0 10px 34px rgba(44, 36, 19, .07); }
.page-inv .kick { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-500); font-weight: 700; text-align: center; margin-bottom: 8px; }
.page-inv h1 { font-size: 26px; font-weight: 700; line-height: 1.2; text-align: center; color: #2C2413; margin: 0 0 8px; }
.page-inv h1 i { font-style: italic; font-weight: 400; color: var(--gold-500); }
.page-inv .lede { font-size: 13.5px; color: var(--n-700); text-align: center; line-height: 1.55; margin: 0 auto 22px; max-width: 420px; }

.page-inv .facts { border: 1px solid #EDE7DB; border-radius: 14px; overflow: hidden; margin-bottom: 18px; }
.page-inv .fact { display: flex; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #F2EDE3; }
.page-inv .fact:last-child { border-bottom: 0; }
.page-inv .fact .k { flex: 0 0 108px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8E8370; padding-top: 2px; }
.page-inv .fact .v { flex: 1; min-width: 0; font-size: 13.5px; color: #2C2413; font-weight: 600; }
.page-inv .fact .v small { display: block; font-size: 12px; font-weight: 400; color: var(--n-500); margin-top: 3px; line-height: 1.5; }
.page-inv .poles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.page-inv .pole { font-size: 11.5px; font-weight: 600; color: var(--gold-700); background: var(--gold-50); border: 1px solid var(--gold-200); border-radius: 999px; padding: 3px 9px; }

.page-inv .exp { display: flex; gap: 9px; align-items: flex-start; background: var(--gold-50); border: 1px solid #EADDC2; border-radius: 12px; padding: 11px 13px; font-size: 12.5px; color: var(--gold-700); line-height: 1.5; margin-bottom: 20px; }
.page-inv .exp-ok { background: #F2F6F3; border-color: #CFE0D5; color: #2F5B3E; }

.page-inv .fg { margin-bottom: 13px; }
.page-inv .fg-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.page-inv label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--n-700); margin-bottom: 5px; }
.page-inv input[type=text], .page-inv input[type=email], .page-inv input[type=password] { width: 100%; min-width: 0; padding: 12px 14px; border-radius: 12px; border: 1.5px solid rgba(0, 0, 0, .09); font-size: 14px; font-family: inherit; background: #fff; outline: none; }
.page-inv input:focus { border-color: var(--gold-primary); box-shadow: 0 0 0 3px rgba(196, 165, 89, .12); }
.page-inv input[readonly] { background: #F5F2EC; color: var(--n-500); }
.page-inv .hint { font-size: 11.5px; color: #8E8370; margin-top: 5px; line-height: 1.45; }
.page-inv .hint a { color: var(--gold-500); font-weight: 600; }

.page-inv .cta { display: block; width: 100%; padding: 15px; border-radius: 12px; font-size: 14.5px; font-weight: 700; color: var(--on-gold); text-shadow: var(--on-gold-shadow); background: var(--gold-fill); border: none; cursor: pointer; font-family: inherit; box-shadow: 0 4px 16px rgba(150, 120, 62, .24); }
.page-inv .cta:hover { opacity: .94; }
.page-inv .cta-link { text-align: center; text-decoration: none; }
.page-inv .ghost { width: 100%; margin-top: 10px; padding: 13px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--n-700); background: transparent; border: 1.5px solid rgba(0, 0, 0, .09); cursor: pointer; font-family: inherit; text-align: center; }
.page-inv .ghost:hover { background: #F5F2EC; }
.page-inv .ghost-link { display: block; text-decoration: none; line-height: 1.4; }
.page-inv .foot { font-size: 11.5px; color: #8E8370; text-align: center; margin-top: 18px; line-height: 1.55; }
.page-inv .foot a { color: var(--gold-500); font-weight: 600; }

/* Confirmation de refus. `<summary>` remplace le bouton de la maquette : même
   dessin, la flèche native en moins et aucun JavaScript. */
.page-inv .refuse { margin-top: 10px; }
.page-inv .refuse > summary { list-style: none; margin-top: 0; }
.page-inv .refuse > summary::-webkit-details-marker { display: none; }
.page-inv .confirm { border: 1.5px solid #E0A98A; background: #FDF6F1; border-radius: 14px; padding: 15px 16px; margin-top: 14px; }
.page-inv .confirm h3 { font-size: 14px; font-weight: 700; color: #8A3E12; margin: 0 0 6px; }
.page-inv .confirm p { font-size: 12.5px; color: #7A5237; line-height: 1.55; margin: 0 0 12px; }
.page-inv .confirm-row { display: flex; flex-wrap: wrap; gap: 9px; }
.page-inv .confirm-form { flex: 1 1 150px; margin: 0; }
.page-inv .confirm-row .danger { width: 100%; padding: 11px; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; background: #B4441A; border: 1.5px solid #B4441A; color: #fff; }

/* États de fin */
.page-inv .state-ico { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.page-inv .state-ok { background: #EAF3EC; color: #2F7A46; }
.page-inv .state-off { background: #F2EFE9; color: #8E8370; }

@media (max-width: 430px) {
  .page-inv { padding: 18px 12px 48px; }
  .page-inv .card { padding: 20px 16px; border-radius: 14px; }
  .page-inv h1 { font-size: 22px; }
  .page-inv .fact { flex-direction: column; gap: 3px; }
  .page-inv .fact .k { flex: none; }
  .page-inv .fg-2 { grid-template-columns: 1fr; }
}

/* B3 tâche 020 — le commentaire libre de « Autre chose » (AC29.7). La page des
   motifs de résiliation emprunte cette coque ; il lui manquait un seul élément,
   la zone de texte. Mêmes valeurs que les champs voisins. */
.page-inv textarea { width: 100%; min-width: 0; padding: 12px 14px; border-radius: 12px; border: 1.5px solid rgba(0, 0, 0, .09); font-size: 14px; font-family: inherit; background: #fff; outline: none; resize: vertical; }
.page-inv textarea:focus { border-color: var(--gold-primary); box-shadow: 0 0 0 3px rgba(196, 165, 89, .12); }