/* ==========================================================================
   ClemManu's Airlines - guest.css
   Parcours invite : carte d'embarquement, ecrans successifs, enregistrement,
   photos, envoi. Depend de base.css pour les jetons et les primitives.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Ossature de la page
   -------------------------------------------------------------------------- */
.entete-vol {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pas-3);
  margin-bottom: var(--pas-4);
}

.entete-vol__marque {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: var(--taille-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blanc);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Un ecran = une etape. Une seule action visible a la fois. */
.ecran { animation: entree-ecran 240ms ease-out both; }

@keyframes entree-ecran {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.ecran__titre {
  margin-bottom: var(--pas-2);
  font-size: var(--taille-l);
  color: var(--encre);
}

.ecran__chapeau {
  margin-bottom: var(--pas-4);
  color: var(--encre-douce);
  font-size: var(--taille-s);
}

.ecran__actions { margin-top: var(--pas-5); }

/* Fil d'etapes discret */
.etape-cours {
  margin: 0 0 var(--pas-3);
  font-family: var(--police-titre);
  font-size: var(--taille-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-faible);
}

/* --------------------------------------------------------------------------
   2. Carte d'embarquement
   -------------------------------------------------------------------------- */
.bp {
  position: relative;
  display: flex;
  min-height: 420px;
  border-radius: var(--rayon-m);
  background: var(--blanc);
  box-shadow: var(--ombre-carte);
  overflow: hidden;
}

/* Planisphere dore en filigrane */
.bp__filigrane {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0.16;
}
.bp__filigrane svg { width: 130%; height: auto; }
.bp__filigrane path,
.bp__filigrane circle { fill: var(--or-sable); }

/* Bandeau lateral dore, mention verticale */
.bp__bande {
  position: relative;
  z-index: 1;
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--or-sable);
  border-right: 1px dashed rgba(17, 17, 17, 0.35);
}
.bp__bande-txt {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--encre);
  white-space: nowrap;
}

.bp__corps {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--pas-4) var(--pas-4) var(--pas-3);
  display: flex;
  flex-direction: column;
}

.bp__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pas-2);
  padding-bottom: var(--pas-2);
  border-bottom: 1px solid var(--or-clair);
}
.bp__cie {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
}
.bp__type {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bleu-profond);
}

.bp__prenoms {
  margin: var(--pas-4) 0 0;
  text-align: center;
  font-family: var(--police-prenom);
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1.15;
  color: var(--bleu-profond);
}
.bp__amp { color: var(--or-sable); }

.bp__coeur {
  display: block;
  width: 46px;
  height: auto;
  margin: var(--pas-1) auto var(--pas-3);
}
.bp__coeur path { fill: none; stroke: var(--or-sable); stroke-width: 3; stroke-dasharray: 5 5; }

/* Trace de vol pointille */
.bp__vol {
  display: flex;
  align-items: center;
  gap: var(--pas-2);
  margin-bottom: var(--pas-4);
}
.bp__code {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: 0.08em;
  color: var(--encre);
}
.bp__trace { flex: 1 1 auto; height: 26px; }
.bp__trace .trace-ligne {
  fill: none;
  stroke: var(--or-sable);
  stroke-width: 2;
  stroke-dasharray: 4 5;
  stroke-linecap: round;
}
.bp__trace .trace-avion { fill: var(--bleu-profond); }
.bp__trace .trace-point { fill: var(--or-sable); }

.bp__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pas-3);
  margin: 0 0 var(--pas-4);
}
.bp__grille dt {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-faible);
}
.bp__grille dd {
  margin: 2px 0 0;
  font-size: var(--taille-m);
  font-weight: 500;
  color: var(--encre);
}

.bp__mention {
  margin: 0 0 var(--pas-3);
  padding: var(--pas-2);
  border-top: 1px dashed var(--or-clair);
  border-bottom: 1px dashed var(--or-clair);
  text-align: center;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: var(--taille-s);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bleu-profond);
}

.bp__bas { margin-top: auto; }

.bp__codebarres { display: block; width: 100%; height: 44px; }
.bp__codebarres rect { fill: var(--encre); }

.bp__compteur {
  margin: var(--pas-2) 0 0;
  text-align: center;
  font-size: var(--taille-s);
  color: var(--encre-douce);
}
.bp__compteur strong { color: var(--bleu-profond); font-weight: 500; }

/* --------------------------------------------------------------------------
   3. Menu : deux destinations
   -------------------------------------------------------------------------- */
.menu-cartes {
  display: grid;
  gap: var(--pas-4);
}

.dest {
  display: flex;
  align-items: center;
  gap: var(--pas-4);
  width: 100%;
  min-height: 110px;
  padding: var(--pas-4);
  border: 2px solid var(--or-clair);
  border-radius: var(--rayon-m);
  background: var(--blanc);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duree) ease, box-shadow var(--duree) ease;
}
.dest:hover { border-color: var(--or-sable); box-shadow: var(--ombre-douce); }

.dest__icone {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
}
.dest__icone svg { width: 100%; height: 100%; }
.dest__icone .ic-trait { fill: none; stroke: var(--bleu-profond); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dest__icone .ic-plein { fill: var(--or-sable); }

.dest__texte { min-width: 0; }
.dest__titre {
  display: block;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: var(--taille-s);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre);
}
.dest__sous {
  display: block;
  margin-top: var(--pas-1);
  font-size: var(--taille-s);
  color: var(--encre-douce);
}

/* --------------------------------------------------------------------------
   4. Enregistrement
   -------------------------------------------------------------------------- */
.enr { text-align: center; }

.enr__bouton {
  width: 168px;
  height: 168px;
  margin: var(--pas-4) auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pas-2);
  border: 4px solid var(--or-sable);
  border-radius: 50%;
  background: var(--bleu-profond);
  color: var(--blanc);
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: var(--taille-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.enr__bouton:hover { background: var(--bleu-sombre); }
.enr__bouton svg { width: 46px; height: 46px; fill: currentColor; }

.enr__bouton--stop {
  background: var(--erreur);
  border-color: var(--or-clair);
  animation: pulse-enr 1.6s ease-in-out infinite;
}
.enr__bouton--stop:hover { background: #8A1616; }

@keyframes pulse-enr {
  0%, 100% { box-shadow: 0 0 0 0 rgba(161, 27, 27, 0.45); }
  50%      { box-shadow: 0 0 0 16px rgba(161, 27, 27, 0); }
}

.enr__minuteur {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: var(--taille-xxl);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--encre);
}
.enr__reste {
  margin: var(--pas-1) 0 var(--pas-4);
  font-size: var(--taille-s);
  color: var(--encre-douce);
}

/* Indicateur de niveau sonore */
.niveau {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 46px;
  margin-bottom: var(--pas-4);
}
.niveau__seg {
  width: 12px;
  height: 10px;
  border-radius: 3px;
  background: var(--trait);
  transition: height 90ms linear, background-color 90ms linear;
}
.niveau__seg.est-actif { background: var(--bleu-ciel); }
.niveau__seg.est-fort  { background: var(--or-sable); }

@media (prefers-reduced-motion: reduce) {
  .niveau__seg { transition: none; }
  .enr__bouton--stop { animation: none; }
}

/* --------------------------------------------------------------------------
   5. Reecoute
   -------------------------------------------------------------------------- */
.reecoute__lecteur {
  width: 100%;
  min-height: 48px;
  margin: var(--pas-4) 0;
}
.reecoute__duree {
  text-align: center;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: var(--taille-l);
  font-variant-numeric: tabular-nums;
  color: var(--bleu-profond);
}

/* --------------------------------------------------------------------------
   6. Photos
   -------------------------------------------------------------------------- */
.photos__compte {
  margin-bottom: var(--pas-3);
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: var(--taille-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.photos__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pas-2);
  margin-bottom: var(--pas-4);
}
.photos__grille:empty { display: none; }

.vignette {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 2px solid var(--or-clair);
  border-radius: var(--rayon-s);
  overflow: hidden;
  background: var(--bleu-pale);
}
.vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vignette__suppr {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.72);
  color: var(--blanc);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}
.vignette__suppr:hover { background: var(--erreur); }

.vignette__poids {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2px 4px;
  background: rgba(17, 17, 17, 0.62);
  color: var(--blanc);
  font-size: 0.6875rem;
  text-align: center;
}

.photos__ajout { position: relative; }
.photos__ajout input[type='file'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   7. Envoi
   -------------------------------------------------------------------------- */
.envoi { text-align: center; }

.envoi__avion {
  width: 100%;
  height: 74px;
  margin-bottom: var(--pas-3);
}
.envoi__avion .trace-ligne {
  fill: none;
  stroke: var(--or-sable);
  stroke-width: 2;
  stroke-dasharray: 4 6;
}
.envoi__avion .trace-avion { fill: var(--bleu-profond); }

.prog {
  height: 18px;
  border: 2px solid var(--or-clair);
  border-radius: 999px;
  background: var(--bleu-pale);
  overflow: hidden;
}
.prog__barre {
  height: 100%;
  width: 0%;
  background: var(--degrade-principal);
  transition: width 200ms linear;
}
@media (prefers-reduced-motion: reduce) { .prog__barre { transition: none; } }

.envoi__etat {
  margin-top: var(--pas-4);
  font-size: var(--taille-m);
  font-weight: 500;
}
.envoi__etat--vol     { color: var(--bleu-sombre); }
.envoi__etat--recu    { color: var(--succes); }
.envoi__etat--attente { color: var(--attente); }
.envoi__etat--erreur  { color: var(--erreur); }

.envoi__detail {
  margin-top: var(--pas-2);
  font-size: var(--taille-s);
  color: var(--encre-douce);
}

/* --------------------------------------------------------------------------
   8. Confirmation et aide micro
   -------------------------------------------------------------------------- */
.fin { text-align: center; }
.fin__tampon {
  width: 132px;
  height: 132px;
  margin: 0 auto var(--pas-4);
}
.fin__tampon circle { fill: none; stroke: var(--or-sable); stroke-width: 3; stroke-dasharray: 7 6; }
.fin__tampon text { fill: var(--bleu-profond); font-family: var(--police-titre); font-weight: 700; }
.fin__tampon .tampon-avion { fill: var(--or-sable); }

.aide-micro ol { margin: 0 0 var(--pas-4); padding-left: 1.25rem; }
.aide-micro li { margin-bottom: var(--pas-2); }

/* --------------------------------------------------------------------------
   9. Ecrans etroits (320 px) et grands caracteres
   -------------------------------------------------------------------------- */
@media (max-width: 359px) {
  .ca-page { padding-left: var(--pas-3); padding-right: var(--pas-3); }
  .bp__prenoms { font-size: 1.95rem; }
  .bp__code { font-size: 1.125rem; }
  .enr__bouton { width: 148px; height: 148px; }
  .photos__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp__grille { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   10. Page de confidentialite
   -------------------------------------------------------------------------- */
.legal { max-width: 430px; }
.legal h2 { margin-top: var(--pas-5); color: var(--bleu-profond); }
.legal ul { margin: 0 0 var(--pas-4); padding-left: 1.25rem; }
.legal li { margin-bottom: var(--pas-2); }
.legal__maj { font-size: var(--taille-xs); color: var(--encre-faible); }

/* Carre d'arret, substitue a l'icone micro pendant l'enregistrement. */
.enr__carre {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 7px;
  background: currentColor;
}