/* Page publique d'inscription à un événement (cible du QR code) */
.pe-body {
  margin: 0;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ds-ink-900, #1A2233);
  background: var(--ds-surface-100, #F4F6F9);
  -webkit-font-smoothing: antialiased;
}

.pe-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px 24px;
  box-sizing: border-box;
}

.pe-card {
  width: 100%;
  max-width: 620px;
  background: #FFFFFF;
  border: 1px solid var(--ds-line-200, #E8ECF1);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(56, 77, 100, 0.08);
}

.pe-card-centered { text-align: center; }

/* Cover */
.pe-cover {
  position: relative;
  height: 180px;
  background: linear-gradient(135deg, #384D64 0%, #223144 100%);
}
.pe-cover-empty { height: 110px; }
.pe-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pe-brand {
  position: absolute;
  left: 16px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.pe-brand-logo { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.pe-brand-name { font-size: 13px; font-weight: 700; color: #384D64; }

/* Sélecteur de langue */
.pe-lang {
  position: absolute;
  right: 16px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.pe-lang-link {
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 700;
  color: #586D85;
  text-decoration: none;
  border-radius: 999px;
  line-height: 1.4;
}
.pe-lang-link.is-active { color: #FFFFFF; background: #FF9900; }
.pe-lang-link:not(.is-active):hover { color: #384D64; }

.pe-body-inner { padding: 24px 26px 28px; }

.pe-type {
  display: inline-block;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ds-primary-600, #E68900);
  background: rgba(255, 153, 0, 0.12);
  border-radius: 999px;
}

.pe-title {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 800;
  color: #1A2233;
  margin: 12px 0 16px;
}

.pe-info { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pe-info-item { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #384D64; }
.pe-info-item svg { width: 20px; height: 20px; flex-shrink: 0; color: #FF9900; }

.pe-description { margin: 18px 0 0; font-size: 14px; line-height: 1.65; color: #586D85; }
.pe-description p { margin: 0 0 8px; }
/* Rendu du texte riche (ActionText) sur la page publique */
.pe-description.trix-content h1 { font-size: 18px; font-weight: 700; color: #1A2233; margin: 14px 0 8px; }
.pe-description.trix-content h2 { font-size: 16px; font-weight: 700; color: #1A2233; margin: 12px 0 6px; }
.pe-description.trix-content ul,
.pe-description.trix-content ol { margin: 0 0 8px; padding-left: 22px; }
.pe-description.trix-content li { margin: 2px 0; }
.pe-description.trix-content a { color: #2C82C9; text-decoration: underline; }
.pe-description.trix-content strong { color: #384D64; }
.pe-description.trix-content blockquote {
  margin: 8px 0;
  padding: 4px 0 4px 14px;
  border-left: 3px solid #E8ECF1;
  color: #6B7C90;
}
.pe-description.trix-content pre {
  padding: 10px 12px;
  background: #F4F6F9;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 13px;
}
.pe-description.trix-content img { border-radius: 8px; }

.pe-divider { border: none; border-top: 1px solid #E8ECF1; margin: 24px 0; }

.pe-section-title { font-size: 17px; font-weight: 700; color: #1A2233; margin: 0 0 14px; }

/* Bandeau connexion */
.pe-login-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: 18px;
  background: #F1F5FF;
  border: 1px solid #D7E2FB;
  border-radius: 10px;
  font-size: 14px;
  color: #384D64;
}
.pe-login-link { font-weight: 700; color: #2C82C9; text-decoration: none; }
.pe-login-link:hover { text-decoration: underline; }

.pe-connected { font-size: 14px; color: #586D85; margin: 0 0 14px; }

/* Formulaire */
.pe-form { display: flex; flex-direction: column; gap: 14px; }
.pe-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pe-field { display: flex; flex-direction: column; gap: 6px; }
.pe-field-full { grid-column: 1 / -1; }
.pe-label { font-size: 13px; font-weight: 600; color: #586D85; }

.pe-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 15px;
  color: #1A2233;
  background: #FFFFFF;
  border: 1px solid #E8ECF1;
  border-radius: 10px;
  font-family: inherit;
}
.pe-input:focus {
  outline: none;
  border-color: #FF9900;
  box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.14);
}
.pe-textarea { resize: vertical; min-height: 70px; }

.pe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
}
.pe-btn-primary {
  color: #FFFFFF;
  background: linear-gradient(135deg, #FF9900 0%, #E68900 100%);
  box-shadow: 0 6px 16px rgba(255, 153, 0, 0.30);
}
.pe-btn-primary:hover { filter: brightness(0.97); }

/* États / messages */
.pe-success, .pe-registered {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 600;
  color: #3F7A1E;
  background: rgba(89, 178, 36, 0.12);
  border-radius: 10px;
}
.pe-registered { margin: 0; }

.pe-flash {
  max-width: 620px;
  margin: 16px auto -8px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.pe-flash-success { color: #3F7A1E; background: rgba(89, 178, 36, 0.12); }
.pe-flash-error { color: #C0392B; background: rgba(231, 76, 60, 0.10); }

.pe-state-icon { margin: 8px auto 4px; }
.pe-state-msg { font-size: 15px; color: #586D85; margin: 8px 0 0; }

.pe-powered { margin: 20px 0 0; font-size: 12px; color: #8494A7; }
.pe-powered strong { color: #FF9900; }

@media (max-width: 520px) {
  .pe-field-grid { grid-template-columns: 1fr; }
  .pe-title { font-size: 21px; }
  .pe-body-inner { padding: 20px 18px 24px; }
}

/* ── Ajouter à mon agenda (public, pensé mobile iPhone/Android) ── */
.pe-calendar {
  margin: 18px 0 0;
  padding: 16px;
  border: 1px solid var(--ds-line-200, #E8ECF1);
  border-radius: 14px;
  background: #FBFCFE;
}
.pe-calendar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #1A2233;
  margin-bottom: 12px;
}
.pe-calendar-title svg { color: #FF9900; flex-shrink: 0; }
.pe-calendar-btns { display: flex; gap: 10px; }
.pe-cal-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid transparent;
  line-height: 1.15;
  text-align: center;
}
.pe-cal-btn svg { flex-shrink: 0; }
.pe-cal-btn-apple {
  color: #1A2233;
  background: #FFFFFF;
  border-color: #DCE2EA;
}
.pe-cal-btn-apple:hover { background: #F4F6F9; }
.pe-cal-btn-google {
  color: #FFFFFF;
  background: #1A73E8;
  box-shadow: 0 4px 12px rgba(26, 115, 232, 0.24);
}
.pe-cal-btn-google:hover { filter: brightness(0.97); }
.pe-calendar-hint { margin: 10px 0 0; font-size: 12px; color: #6B7C90; line-height: 1.45; }

@media (max-width: 480px) {
  .pe-calendar-btns { flex-direction: column; }
}

/* ── Animateur / hôte (page publique) ── */
.pe-host {
  margin: 18px 0 0;
  padding: 16px;
  border: 1px solid var(--ds-line-200, #E8ECF1);
  border-radius: 14px;
  background: #FBFCFE;
}
.pe-host-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #8494A7;
  margin-bottom: 10px;
}
.pe-host-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pe-host-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FFF3E0;
  color: #FF9900;
  flex-shrink: 0;
}
.pe-host-name { font-size: 15px; font-weight: 700; color: #1A2233; }
.pe-host-bio { font-size: 14px; line-height: 1.6; color: #586D85; }
.pe-host-bio p { margin: 0 0 8px; }
.pe-host-bio p:last-child { margin-bottom: 0; }

/* ── Pointage (jour J) : auto-confirmation de présence ── */
.pe-checkin-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  color: #2FA84F;
  background: rgba(47, 168, 79, 0.10);
  border-radius: 999px;
}
.pe-checkin-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2FA84F;
  box-shadow: 0 0 0 0 rgba(47, 168, 79, 0.55);
  animation: pe-pulse 1.8s infinite;
}
@keyframes pe-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(47, 168, 79, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(47, 168, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 168, 79, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .pe-checkin-dot { animation: none; }
}
.pe-btn-checkin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #FFFFFF;
  background: linear-gradient(135deg, #34C759 0%, #2FA84F 100%);
  box-shadow: 0 6px 16px rgba(47, 168, 79, 0.28);
}
.pe-btn-checkin:hover { filter: brightness(0.97); }

/* ── Code de participation (carte + saisie) ── */
.pe-code-card {
  margin: 14px 0 4px;
  padding: 18px;
  text-align: center;
  background: #FFF6EC;
  border: 1px dashed #F0B366;
  border-radius: 14px;
}
.pe-code-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #B36A00;
  margin-bottom: 6px;
}
.pe-code-value {
  display: block;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 6px;
  color: #22364D;
}
.pe-code-hint { margin: 10px 0 0; font-size: 12.5px; color: #8A6A3A; line-height: 1.5; }

.pe-input-code {
  text-transform: uppercase;
  letter-spacing: 4px;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
}

.pe-section-subtitle { font-size: 15px; font-weight: 700; color: #1A2233; margin: 0 0 8px; }

/* Séparateur "ou" */
.pe-or {
  display: flex;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin: 22px 0;
  color: #8494A7;
  font-size: 13px;
  font-weight: 600;
}
.pe-or::before, .pe-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #E8ECF1;
}

/* ── Section repliable (jour J : s'inscrire / se connecter) ── */
.pe-collapse {
  border: 1px solid #E8ECF1;
  border-radius: 12px;
  background: #FBFCFE;
  overflow: hidden;
}
.pe-collapse-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  font-size: 14.5px;
  font-weight: 700;
  color: #22364D;
}
.pe-collapse-summary::-webkit-details-marker { display: none; }
.pe-collapse-chevron { color: #8494A7; flex-shrink: 0; transition: transform .18s ease; }
.pe-collapse[open] .pe-collapse-chevron { transform: rotate(180deg); }
.pe-collapse[open] .pe-collapse-summary { border-bottom: 1px solid #EDF0F4; }
.pe-collapse-body { padding: 16px; }
.pe-collapse-body .pe-login-banner { margin-bottom: 14px; }

/* ===== Page publique d'évaluation ===== */
.pe-eval-sub { margin: 2px 0 14px; color: #64748B; font-size: 14px; }
.pe-eval-intro { margin: 0 0 18px; color: #384D64; font-size: 14px; line-height: 1.6; }
.pe-eval-form { display: flex; flex-direction: column; gap: 18px; }
.pe-eval-q { display: flex; flex-direction: column; gap: 8px; }
.pe-eval-q-label { font-weight: 600; color: #22364D; }

/* Étoiles (note générale) */
.pe-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.pe-stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.pe-stars label { font-size: 30px; line-height: 1; color: #DCE3EC; cursor: pointer; transition: color .12s; }
.pe-stars input:checked ~ label,
.pe-stars label:hover,
.pe-stars label:hover ~ label { color: #FF9900; }

/* Échelle 1..N */
.pe-scale { display: flex; flex-wrap: wrap; gap: 8px; }
.pe-scale-item { cursor: pointer; }
.pe-scale-item input { position: absolute; opacity: 0; }
.pe-scale-item span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid #DCE3EC; color: #586D85; font-weight: 600; transition: all .12s;
}
.pe-scale-item input:checked + span { background: #FF9900; border-color: #FF9900; color: #fff; }

/* Choix (radio / cases) */
.pe-choices { display: flex; flex-direction: column; gap: 8px; }
.pe-choice { display: flex; align-items: center; gap: 10px; cursor: pointer; color: #384D64; font-size: 14px; }
.pe-choice input { width: 18px; height: 18px; accent-color: #FF9900; }

/* Confirmation / états */
.pe-eval-done { text-align: center; padding: 24px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pe-eval-done h2 { font-size: 18px; color: #22364D; margin: 6px 0 0; }
.pe-eval-done p { color: #64748B; font-size: 14px; margin: 0; }
.pe-state { text-align: center; padding: 40px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pe-state-title { font-size: 20px; color: #22364D; margin: 4px 0 0; }
.pe-state-text { color: #64748B; font-size: 14px; max-width: 420px; }

/* Identité connue (lien personnalisé / membre connecté) */
.pe-eval-identity {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; background: #F1F7FF; border: 1px solid #D6E4FB;
  border-radius: 12px; color: #2F5FA6; font-size: 14px; font-weight: 600;
}
.pe-eval-identity svg { flex-shrink: 0; }

/* Texte tronqué + « Lire plus » (description, bio animateur) */
.pe-readmore-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pe-clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.pe-clamp.expanded { -webkit-line-clamp: unset; display: block; overflow: visible; }
.pe-readmore { background: none; border: 0; padding: 2px 0 0; color: #FF9900; font-weight: 600; font-size: 13px; cursor: pointer; }
.pe-readmore:hover { text-decoration: underline; }

/* Consentement (formulaire d'inscription public) */
.pe-consent { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: #FBFCFE; border: 1px solid #E3E9F1; border-radius: 12px; margin-top: 4px; }
.pe-consent-label { font-size: 12px; font-weight: 700; color: #586D85; text-transform: uppercase; letter-spacing: .04em; }
.pe-consent-content { color: #384D64; font-size: 14px; line-height: 1.6; }
.pe-consent-doc { margin: 0; font-size: 13.5px; }
.pe-consent-doc a { color: #E68A00; text-decoration: none; font-weight: 600; }
.pe-consent-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; color: #22364D; font-size: 14px; font-weight: 600; }
/* Case à cocher au design system (appearance:none + coche orange). */
.pe-consent-check input,
.pe-check input {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; margin: 0; flex-shrink: 0;
  border: 2px solid #D1D5DB; border-radius: 5px; background: #fff; cursor: pointer;
  position: relative; transition: all .15s ease;
}
.pe-consent-check input:hover, .pe-check input:hover { border-color: #FF9900; }
.pe-consent-check input:checked, .pe-check input:checked { background: #FF9900; border-color: #FF9900; }
.pe-consent-check input:checked::after, .pe-check input:checked::after {
  content: ""; position: absolute; top: 45%; left: 50%;
  width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Choix multiples (cases à cocher) du formulaire d'inscription */
.pe-checks { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.pe-check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #1A2233; cursor: pointer; }