/* SPDX-License-Identifier: AGPL-3.0-or-later
   Pages d'accès communes à l'application (partiduo-ui-bulma, interface de
   référence) et à l'administration (partiduo-admin) : connexion, second
   facteur, invitation, liens par courriel, erreurs, composants et licences.
   Une seule définition : partiduo-admin en garde une copie octet pour
   octet, vérifiée par une empreinte dans les specs des deux dépôts ; ne
   modifier qu'ici, puis recopier et mettre à jour les deux empreintes.
   Chargée sur toutes les pages, avant la feuille propre à chaque dépôt.
   Couleurs et polices : theme.css (identique dans les deux dépôts). */

/* Icônes du jeu unique (Lucide) et cibles tactiles de 44 px. */
.pd-icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.button .pd-icon { margin-inline-end: .35em; }
.pd-touch { min-height: 44px; min-width: 44px; }

/* Lien d'évitement (WCAG 2.4.1) */
.pd-skip { position: absolute; inset-inline-start: .5rem; inset-block-start: -3rem; z-index: 100; background: var(--pd-surface);
  color: var(--pd-ink); padding: .6rem 1rem; border-radius: var(--bulma-radius); border: 2px solid var(--pd-focus); }
.pd-skip:focus { inset-block-start: .5rem; }

/* Marque : symbole (dessiné sur la grille de 32 px, net à cette taille) et
   nom en texte, « Parti » et « duo » aux couleurs de l'identité. Le symbole
   est décoratif (alt="") : le nom suffit aux lecteurs d'écran. */
.pd-logo { display: block; flex: none; width: 2rem; height: 2rem; }
.pd-name { font-weight: 600; font-size: 1.2rem; line-height: 1; color: var(--pd-brand-parti); letter-spacing: -.02em; }
.pd-name span { color: var(--pd-brand-duo); }

/* Langue : liste et bouton « Appliquer » (aucun envoi au changement de la
   liste, WCAG 3.2.2). */
.pd-lang { display: flex; gap: .35rem; align-items: center; }
.pd-lang select, .pd-lang .button { min-height: 44px; }

/* Messages et alertes : icône à gauche du texte. */
.pd-message { margin-block-end: 1rem; }
.pd-alert { display: flex; gap: .75rem; align-items: flex-start; }
.pd-alert .pd-icon { margin-block-start: .15em; }

/* Formulaires des pages d'accès : étiquettes et aides comme dans
   l'application, actions alignées, codes à usage unique. */
.pd-auth-card .label { font-size: .8rem; font-weight: 600; color: var(--pd-muted); }
.pd-auth-card .help { font-size: .8rem; }
.pd-form-actions { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; }
.pd-form-actions a { min-height: 44px; display: inline-flex; align-items: center; }
.pd-code { font-family: var(--bulma-family-code); letter-spacing: .15em; font-size: 1.1rem; max-width: 14rem; }
.pd-code-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 1.5rem; margin: 1rem 0; padding-inline-start: 1.5rem; }
.pd-code-list code { font-size: 1rem; letter-spacing: .06em; background: transparent; color: var(--pd-ink); white-space: nowrap; }

/* Mise en page : en-tête, carte centrée, pied de page. */
.pd-auth-body { display: flex; flex-direction: column; min-height: 100vh; }
/* En-tête : langue en haut à droite, puis le bandeau. */
.pd-auth-top { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .6rem 1rem 0; }
.pd-auth-top .pd-lang { align-self: flex-end; }
/* Bandeau : Partiduo à gauche (logo, nom, mention), « une création » au
   milieu, ALOLI à droite (logo, deux lignes, lien vers son site). Sur un
   écran étroit, les trois s'empilent, centrés. */
.pd-auth-banner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; width: 100%; max-width: 62rem; margin-block-start: .5rem; }
.pd-auth-brand { display: flex; align-items: center; gap: .75rem; justify-self: start; text-align: start; }
.pd-auth-brand > span { display: flex; flex-direction: column; gap: .3rem; }
.pd-auth-brand .pd-logo { width: 3.5rem; height: 3.5rem; }
.pd-auth-brand .pd-name { font-size: 2rem; }
.pd-auth-brand small { color: var(--pd-muted); font-size: .9rem; }
.pd-auth-credit { font-size: 1.6rem; font-weight: 600; font-style: italic; color: var(--pd-muted); white-space: nowrap; }
.pd-auth-aloli { justify-self: end; display: flex; align-items: center; gap: .6rem; color: var(--pd-muted); font-size: .85rem; line-height: 1.3; text-decoration: none; }
.pd-auth-aloli:hover, .pd-auth-aloli:focus-visible { color: var(--pd-ink); text-decoration: underline; }
/* Logo d'ALOLI (mot « ALoli » d'aloli.fr, police Explora convertie en
   tracés : rien à charger) à la hauteur du logo de Partiduo ; proportions
   178 × 66. */
.pd-auth-aloli img { width: 9.45rem; height: 3.5rem; flex: none; }
.pd-auth { flex: 1; display: flex; justify-content: center; align-items: flex-start; padding: 1.5rem 1rem 3rem; }
.pd-auth:focus { outline: none; }
.pd-auth-card { width: 100%; max-width: 30rem; background: var(--pd-surface); border: 1px solid var(--pd-rule); border-radius: var(--bulma-radius); padding: 1.5rem; }
.pd-auth-title { font-size: 1.4rem; font-weight: 600; color: var(--pd-ink); margin-block-end: .5rem; text-wrap: balance; }
.pd-auth-subtitle { font-size: 1rem; font-weight: 600; color: var(--pd-ink); display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; margin-block-end: .4rem; }
.pd-auth-block { margin-block: 1rem; }
.pd-auth-block > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--bulma-link); font-weight: 500; }
.pd-recommended { border: 1px solid var(--pd-rule); border-radius: var(--bulma-radius); padding: 1rem; background: var(--pd-row-alt); }
/* Séparateur « ou » entre deux moyens de connexion, filets de part et
   d'autre. */
.pd-or { display: flex; align-items: center; gap: .75rem; color: var(--pd-muted); font-size: .85rem; margin-block: 1.25rem; }
.pd-or::before, .pd-or::after { content: ""; flex: 1; border-block-start: 1px solid var(--pd-rule); }
/* Connexion fédérée (D-R5-010) : un bouton par fournisseur d'identité. */
.pd-federated { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pd-federated .button { min-block-size: 44px; justify-content: flex-start; }
.pd-passkey-status:empty { display: none; }

/* Composants et licences : tableau dans la carte, textes défilants. */
.pd-auth-card .table-container { overflow-x: auto; border: 1px solid var(--pd-rule); border-radius: var(--bulma-radius); }
.pd-auth-card .table { background: transparent; color: var(--pd-ink); font-size: .9rem; }
.pd-auth-card .table th { color: var(--pd-muted); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  border-color: var(--pd-rule); white-space: nowrap; }
.pd-auth-card .table td { border-color: var(--pd-rule); vertical-align: middle; }
.pd-auth-card .table td a { overflow-wrap: anywhere; }
.pd-licences { max-height: 60vh; overflow: auto; font-size: .75rem; white-space: pre-wrap; }

/* Pied de page : provenance du code (AGPL-3.0, art. 13). */
.pd-foot { padding: 1rem; text-align: center; font-size: .85rem; color: var(--pd-muted); }
.pd-foot a { color: inherit; text-decoration: underline; }

/* Téléphone (< 768 px) : bandeau empilé et réduit (logo d'ALOLI à 2,5 rem),
   carte resserrée, codes sur une colonne. */
@media (max-width: 767.98px) {
  .pd-auth-banner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: .5rem; }
  .pd-auth-brand, .pd-auth-aloli { justify-self: center; }
  .pd-auth-credit { font-size: 1.2rem; }
  .pd-auth-aloli img { width: 6.75rem; height: 2.5rem; }
  .pd-auth { padding-block-start: 1rem; }
  .pd-auth-card { padding: 1rem; }
  .pd-code-list { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .pd-skip, .pd-auth-top, .pd-foot { display: none !important; }
  .pd-auth-card { border: 0; }
}