/* ==========================================================================
   portal.css — Espace pèlerin (visiteur)
   Requires static/css/site.css (design tokens, .button, .container...).
   ========================================================================== */

.portal-narrow {
  max-width: 560px;
}

/* --------------------------------------------------------------------------
   En-tête de l'espace personnel
   -------------------------------------------------------------------------- */

.portal-hero-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.portal-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.portal-hero-actions form {
  display: inline-flex;
}

.portal-hero-actions button {
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
}

/* --------------------------------------------------------------------------
   Alertes
   -------------------------------------------------------------------------- */

.portal-alert {
  margin-bottom: 1.2rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  font-weight: 600;
}

.portal-alert p {
  margin: 0;
}

/* `messages.error(...)` est remappé en tag "danger" (voir MESSAGE_TAGS) ;
   `.portal-alert-error` reste utilisé pour les erreurs de formulaire
   (non_field_errors), qui ne passent pas par les messages Django. */
.portal-alert-error,
.portal-alert-danger {
  background: rgba(178, 40, 40, 0.08);
  border-color: rgba(178, 40, 40, 0.3);
  color: #8a1f1f;
}

.portal-alert-success {
  background: rgba(15, 63, 52, 0.08);
  border-color: rgba(15, 63, 52, 0.3);
  color: var(--green);
}

.portal-alert-info,
.portal-alert-warning {
  background: var(--soft);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Formulaires
   -------------------------------------------------------------------------- */

.portal-form {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 253, 247, 0.82);
  box-shadow: var(--shadow);
}

.portal-field {
  display: grid;
  gap: 0.35rem;
}

.portal-field label {
  color: var(--green);
  font-weight: 700;
  font-size: 0.875rem;
}

.portal-field input,
.portal-field select,
.portal-field textarea {
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: inherit;
}

.portal-field input:focus,
.portal-field select:focus,
.portal-field textarea:focus {
  outline: 3px solid rgba(185, 148, 76, 0.25);
  border-color: var(--gold);
}

.portal-field-error input,
.portal-field-error select {
  border-color: #b22828;
}

.portal-field .errorlist {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #b22828;
  font-size: 0.85rem;
}

.portal-field .helptext {
  color: var(--muted);
  font-size: 0.82rem;
}

.portal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
}

/* .button-light (site.css) est pensé pour le fond sombre du hero de la
   page d'accueil (blanc translucide) : illisible sur le fond clair des
   pages de l'espace pèlerin, qui l'utilisent pourtant partout ("Annuler"...).
   Repris ici avec le même traitement que .portal-logout-button. */
.button-light {
  background: var(--white);
  color: var(--green-2);
  border-color: var(--line);
}

.button-light:hover {
  background: rgba(15, 63, 52, 0.07);
  border-color: var(--green-2);
}

.portal-button-lg {
  min-height: 56px;
  padding: 0.9rem 1.6rem;
  font-size: 1.05rem;
}

.portal-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-weight: 600;
}

.portal-check input {
  margin-top: 0.2rem;
}

/* --------------------------------------------------------------------------
   Cards de l'espace personnel
   -------------------------------------------------------------------------- */

.portal-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.portal-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 253, 247, 0.82);
  box-shadow: 0 12px 38px rgba(23, 33, 31, 0.06);
}

.portal-card > .button {
  margin-top: auto;
  align-self: flex-start;
}

.portal-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: auto;
  align-items: center;
}

.portal-account-actions form {
  display: inline-flex;
}

.portal-account-actions button {
  cursor: pointer;
  font: inherit;
}

.portal-logout-button {
  background: var(--white);
  color: var(--green-2);
  border-color: var(--line);
}

.portal-logout-button:hover {
  background: rgba(15, 63, 52, 0.07);
  border-color: var(--green-2);
}

.portal-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.portal-card-header h2 {
  margin: 0;
  color: var(--green);
  font-size: 1.15rem;
}

.portal-status {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  font-weight: 800;
  color: var(--white);
}

.portal-status-ok {
  background: var(--green-2);
}

.portal-status-missing {
  background: #b22828;
}

.portal-card-details {
  display: grid;
  gap: 0.6rem;
  margin: 0;
}

.portal-card-details div {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}

.portal-card-details dt {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
}

.portal-card-details dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

/* --------------------------------------------------------------------------
   Photos
   -------------------------------------------------------------------------- */

.portal-photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.portal-photo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.portal-photo-item img,
.portal-photo-frame {
  width: 96px;
  height: 128px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--soft);
}

.portal-link-button {
  border: none;
  background: none;
  padding: 0;
  color: var(--green-2);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

.portal-link-danger {
  color: #b22828;
}

/* --------------------------------------------------------------------------
   Ajout de photo : instructions + capture caméra
   -------------------------------------------------------------------------- */

.portal-instructions {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 253, 247, 0.82);
  box-shadow: var(--shadow);
}

.portal-instructions ul {
  margin: 0.9rem 0;
  padding-left: 1.2rem;
  color: var(--muted);
}

.portal-instructions li {
  margin-bottom: 0.4rem;
}

.portal-instructions-example {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.1rem 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
}

.portal-instructions-example img {
  flex: none;
  width: 120px;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
}

.portal-instructions-example p {
  margin: 0;
  font-size: 0.9rem;
}

.portal-instructions-example .portal-badge-ok {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--green);
  font-weight: 700;
}

.portal-capture {
  display: grid;
  gap: 1rem;
}

.portal-camera {
  display: grid;
  gap: 0.75rem;
  justify-items: center;
}

.portal-camera-frame {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius);
  background: #000;
}

.portal-camera-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  /* Le miroir (caméra avant) et le zoom sont appliqués directement en
     style inline par static/js/pilgrim_photo_capture.js (mécanisme repris
     de 2026) — la capture, elle, corrige toujours ce miroir pour ne jamais
     enregistrer une photo d'identité inversée. */
}

.portal-camera-guide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.portal-camera-guide img {
  opacity: 0.35;
  width: auto;
  height: auto;
  /* Les dimensions exactes sont pilotées en JS (caméra avant/arrière),
     voir setSilhouetteSize dans pilgrim_photo_capture.js. */
}

.portal-camera-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  max-width: 360px;
}

.portal-camera-controls label {
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.portal-camera-controls input[type="range"] {
  flex: 1;
  accent-color: var(--green);
}

.portal-camera-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}

/* Capturer / Changer de caméra / Charger une image : même gabarit, quelle
   que soit la longueur du texte. */
.portal-camera-actions .button {
  flex: 1 1 160px;
  text-align: center;
}

.portal-photo-preview {
  display: flex;
  justify-content: center;
}

.portal-photo-preview img {
  width: 96px;
  height: 128px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
}

/* Capture (add_photo.html) uniquement : aperçu et bouton "Enregistrer"
   centrés sous la caméra, contrairement aux autres pages de l'espace
   pèlerin où .portal-actions reste aligné à gauche. */
.portal-capture .portal-actions {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Choix de structure : réutilise l'accordéon .structure-accordion de
   site.css (page publique des structures) ; la structure déjà choisie est
   mise en valeur et le bouton "Choisir <nom>" est dans le corps déplié.
   -------------------------------------------------------------------------- */

.structure-accordion.is-selected {
  border-color: var(--green-2);
  box-shadow: 0 0 0 2px rgba(20, 96, 77, 0.25);
}

.portal-choose-form {
  margin-top: 1rem;
}