/* Âme Sœur Royale, lot 2.
   Feuille de style de l'espace membre. Elle s'ajoute à style.css et réutilise
   ses couleurs, elle ne la remplace pas.

   Toujours la même règle : aucune police téléchargée, aucune bibliothèque,
   aucune vidéo. Pensée pour des téléphones Android modestes. */

/* ---------- Structure générale ---------- */
.page-espace { align-items: stretch; }

.contenu {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 6px 16px calc(100px + env(safe-area-inset-bottom, 0px));
}

/* ---------- Barre du haut ---------- */
.barre-haute {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: #081733;
  border-bottom: 1px solid rgba(217, 180, 74, .28);
}
.logo-petit { height: 34px; width: auto; }

.retour-haut {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: var(--creme);
  opacity: .75;
  text-decoration: none;
}
.pastille-vide { width: 40px; display: inline-block; }

/* ---------- Pastille de photo ---------- */
.pastille {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(217, 180, 74, .18);
  border: 1.5px solid var(--or);
  color: var(--or-clair);
  font-family: Georgia, serif;
  font-size: 18px;
  flex: 0 0 auto;
  text-decoration: none;
}
.pastille img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pastille-grande {
  width: 108px;
  height: 108px;
  font-size: 42px;
  margin: 0 auto 14px;
}

/* ---------- Bandeau d'état ---------- */
.bandeau {
  width: 100%;
  max-width: 680px;
  margin: 14px auto 0;
  padding: 14px 16px;
  border-radius: 16px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
.bandeau strong { display: block; font-size: 15px; margin-bottom: 3px; }
.bandeau span { opacity: .85; }

.bandeau-attente {
  background: rgba(217, 180, 74, .12);
  border: 1px solid rgba(217, 180, 74, .5);
  color: var(--or-clair);
}
.bandeau-valide {
  background: rgba(46, 132, 92, .16);
  border: 1px solid rgba(96, 196, 148, .55);
  color: #A8E5C8;
}

/* ---------- Onglets ---------- */
.onglets {
  width: 100%;
  max-width: 680px;
  margin: 16px auto 4px;
  display: flex;
  gap: 8px;
  padding: 0 16px;
}
.onglet {
  flex: 1;
  text-align: center;
  padding: 11px 8px;
  border-radius: 999px;
  border: 1px solid rgba(217, 180, 74, .35);
  background: rgba(14, 34, 70, .55);
  color: var(--creme);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
  text-decoration: none;
}
.onglet-actif {
  background: rgba(217, 180, 74, .18);
  border-color: var(--or);
  color: var(--or-clair);
  font-weight: bold;
}

/* ---------- Grille des profils ---------- */
.compteur {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  opacity: .7;
  margin: 16px 0 10px;
}

.grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.fiche {
  display: block;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(14, 34, 70, .78);
  border: 1px solid rgba(217, 180, 74, .32);
  color: var(--creme);
  text-decoration: none;
}
.fiche:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }

.fiche-image {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, rgba(217, 180, 74, .22), rgba(14, 34, 70, .9));
  display: flex;
  align-items: center;
  justify-content: center;
}
.fiche-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fiche-initiale {
  font-family: Georgia, serif;
  font-size: 54px;
  color: var(--or-clair);
  opacity: .85;
}

.fiche-verifie {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(8, 23, 51, .82);
  border: 1px solid rgba(217, 180, 74, .6);
  color: var(--or-clair);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
}

.fiche-texte { padding: 11px 12px 14px; }
.fiche-texte h3 {
  margin: 0 0 2px;
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: normal;
}
.fiche-lieu {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  opacity: .7;
}

/* ---------- Étiquettes de valeurs ---------- */
.jetons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.jetons-centre { justify-content: center; }

.jeton {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(217, 180, 74, .14);
  border: 1px solid rgba(217, 180, 74, .38);
  color: var(--or-clair);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.3;
}

/* ---------- Cartes ---------- */
.carte-profil,
.carte-vide,
.carte-accueil {
  background: rgba(14, 34, 70, .78);
  border: 1px solid rgba(217, 180, 74, .35);
  border-radius: 20px;
  padding: 22px 18px;
  margin: 18px 0;
  text-align: center;
}
.carte-profil h2 { margin: 0 0 4px; font-size: 24px; }
.carte-vide { text-align: left; }
.carte-vide h2 { font-size: 21px; margin: 0 0 8px; }
.carte-vide p,
.carte-accueil p {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  opacity: .85;
  margin: 0 0 10px;
}
.carte-accueil { text-align: left; margin: 20px 0 26px; }
.carte-accueil p:last-child { margin-bottom: 0; }

.marque-verifie {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: var(--or-clair);
  opacity: .85;
  margin: 10px 0 0;
}

.titre-section {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: normal;
  margin: 26px 0 10px;
  color: var(--or-clair);
}

/* ---------- Valeurs détaillées ---------- */
.valeurs { display: flex; flex-direction: column; gap: 9px; }
.valeur {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(14, 34, 70, .68);
  border: 1px solid rgba(217, 180, 74, .22);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: left;
}
.valeur-titre { opacity: .68; flex: 0 0 auto; }
.valeur-texte { color: var(--or-clair); text-align: right; }

.portrait-espace { font-size: 16px; }

/* ---------- Boutons ---------- */
.bouton-second {
  margin-top: 12px;
  background: transparent;
  border: 1.5px solid rgba(217, 180, 74, .7);
  color: var(--or-clair);
  box-shadow: none;
}
.bouton-court {
  display: inline-block;
  width: auto;
  margin-top: 10px;
  padding: 10px 20px;
  font-size: 15px;
}
.lien-or { color: var(--or-clair); }

/* ---------- Page de transfert, réservée à l'administration ---------- */
.zone-lien {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(217, 180, 74, .4);
  background: rgba(255, 255, 255, .96);
  color: #14213d;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
}
textarea.zone-lien { min-height: 150px; line-height: 1.5; }

/* ---------- Lot 3, écran des silhouettes ---------- */
.silhouettes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 6px 0 18px;
}
.silhouette {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px 12px;
  border-radius: 18px;
  border: 1.5px solid rgba(217, 180, 74, .38);
  background: rgba(14, 34, 70, .6);
  color: rgba(247, 241, 232, .8);
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.silhouette input { position: absolute; opacity: 0; pointer-events: none; }
.silhouette-dessin { display: block; height: 86px; }
.silhouette-dessin svg { height: 100%; width: auto; display: block; }
.silhouette-nom {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
}
.silhouette-active {
  border-color: var(--or);
  background: rgba(217, 180, 74, .16);
  color: var(--or-clair);
}

/* ---------- Lot 3, écran photo ---------- */
.photo-cercle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 210px;
  height: 210px;
  margin: 10px auto 16px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  background: rgba(14, 34, 70, .7);
  border: 2px dashed rgba(217, 180, 74, .6);
  color: var(--or-clair);
}
.photo-cercle input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.photo-cercle img { display: none; width: 100%; height: 100%; object-fit: cover; }

.photo-invite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}
.photo-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(217, 180, 74, .18);
  border: 1.5px solid var(--or);
  font-size: 28px;
  line-height: 1;
}
.photo-remplie {
  border-style: solid;
  border-color: var(--or);
}
.photo-remplie img { display: block; }
.photo-remplie .photo-invite { display: none; }

/* ---------- Lot 3, finalisation du profil ---------- */
.finalisation {
  background: rgba(14, 34, 70, .78);
  border: 1px solid rgba(217, 180, 74, .35);
  border-radius: 20px;
  padding: 18px;
  margin: 18px 0;
  text-align: left;
  font-family: Helvetica, Arial, sans-serif;
}
.finalisation-haut { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.finalisation-chiffre {
  font-family: Georgia, serif;
  font-size: 26px;
  color: var(--or-clair);
}
.finalisation-titre { font-size: 14px; opacity: .8; }

.finalisation-barre {
  height: 8px;
  border-radius: 999px;
  background: rgba(247, 241, 232, .16);
  overflow: hidden;
}
.finalisation-avance {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--or), var(--or-clair));
  transition: width .6s ease;
}
.finalisation-liste {
  margin: 12px 0 6px;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.7;
  opacity: .88;
}

/* ---------- Lot 3, question brise-glace ---------- */
.carte-question {
  background: rgba(217, 180, 74, .1);
  border: 1px solid rgba(217, 180, 74, .45);
  border-radius: 20px;
  padding: 18px;
  margin: 18px 0;
  text-align: left;
}
.carte-question-titre {
  display: block;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 6px;
}
.carte-question-texte {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 19px;
  line-height: 1.45;
  color: var(--or-clair);
}

.jeton-touche {
  cursor: pointer;
  text-align: left;
  font-family: Helvetica, Arial, sans-serif;
}

/* ---------- Petits écrans ---------- */
@media (max-width: 360px) {
  .grille { gap: 10px; }
  .fiche-texte h3 { font-size: 16px; }
  .valeur { flex-direction: column; gap: 4px; }
  .valeur-texte { text-align: left; }
  .photo-cercle { width: 175px; height: 175px; }
  .silhouette-dessin { height: 72px; }
}

/* ---------- Grands écrans ---------- */
@media (min-width: 620px) {
  .grille { grid-template-columns: 1fr 1fr 1fr; }
}

/* ---------- Lot 4, titre de page ---------- */
.titre-page {
  font-family: Georgia, serif;
  font-size: 26px;
  font-weight: normal;
  margin: 18px 0 6px;
}

/* ---------- Lot 4, galerie du membre ---------- */
.galerie {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
}

.galerie-case {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 210px;
  padding: 8px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(14, 34, 70, .72);
  border: 1.5px solid rgba(217, 180, 74, .35);
}
.galerie-case img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galerie-etat,
.galerie-avant {
  position: relative;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  background: rgba(8, 23, 51, .86);
  border: 1px solid rgba(217, 180, 74, .55);
  color: var(--or-clair);
  margin-bottom: auto;
}
.galerie-avant {
  background: rgba(217, 180, 74, .85);
  color: #14213d;
  font-weight: bold;
  margin: 4px 0 auto;
}
.galerie-refuse .galerie-etat {
  border-color: var(--framboise);
  color: #F3B9CC;
}
.galerie-refuse img { opacity: .45; }

.galerie-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  padding-top: 8px;
}
.galerie-actions .action { margin: 0; font-size: 12px; padding: 6px 10px; }

.galerie-ajout {
  justify-content: center;
  gap: 8px;
  border-style: dashed;
  text-align: center;
}
.galerie-choix {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: var(--or-clair);
}
.galerie-choix input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.galerie-nom { word-break: break-all; }

/* ---------- Lot 4, carrousel de la fiche ---------- */
.carrousel {
  position: relative;
  margin: 16px 0 18px;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(14, 34, 70, .8);
  border: 1px solid rgba(217, 180, 74, .35);
}
.carrousel-piste {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carrousel-piste::-webkit-scrollbar { display: none; }

.carrousel-vue {
  flex: 0 0 100%;
  scroll-snap-align: start;
  aspect-ratio: 4 / 5;
}
.carrousel-vue img { width: 100%; height: 100%; object-fit: cover; display: block; }

.carrousel-points {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.carrousel-point {
  width: 22px;
  height: 4px;
  border-radius: 999px;
  background: rgba(247, 241, 232, .35);
}
.carrousel-point-actif { background: var(--or); }

.carrousel-legende {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 18px 16px;
  background: linear-gradient(180deg, rgba(8, 23, 51, 0), rgba(8, 23, 51, .92));
  text-align: left;
}
.carrousel-legende h2 { margin: 0 0 2px; font-size: 26px; }
.carrousel-legende p {
  margin: 0 0 6px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  opacity: .8;
}

/* ---------- Lot 4, gros liens d'action ---------- */
.carte-actions { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.action-large {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 15px 18px;
  border-radius: 16px;
  background: rgba(14, 34, 70, .72);
  border: 1px solid rgba(217, 180, 74, .32);
  color: var(--creme);
  text-decoration: none;
  text-align: left;
  font-family: Helvetica, Arial, sans-serif;
}
.action-large-titre { font-size: 16px; color: var(--or-clair); }
.action-large-detail { font-size: 13px; opacity: .7; }

/* ---------- Lot 4, modération ---------- */
.moderation { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.moderation-case {
  padding: 10px;
  border-radius: 14px;
  background: rgba(8, 23, 51, .5);
  border: 1px solid rgba(217, 180, 74, .25);
}
.moderation-case img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.moderation-case .action { margin: 3px 3px 0 0; font-size: 12px; padding: 6px 10px; }

@media (max-width: 380px) {
  .moderation { grid-template-columns: 1fr; }
}

/* ---------- Correctif 4c, lisibilité des actions sur la photo ---------- */
.galerie-actions {
  background: rgba(8, 23, 51, .88);
  border-radius: 12px;
  padding: 8px 6px 6px;
  width: 100%;
}
.galerie-case { justify-content: space-between; }

/* =====================================================================
   Lot 5, l'interface façon application
   ===================================================================== */

/* ---------- Barre de navigation du bas ---------- */
.barre-basse {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 23, 51, .96);
  border-top: 1px solid rgba(217, 180, 74, .3);
}

.onglet-bas {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 2px;
  color: rgba(247, 241, 232, .55);
  text-decoration: none;
  font-family: Helvetica, Arial, sans-serif;
}
.onglet-bas-actif { color: var(--or-clair); }

.onglet-icone { position: relative; display: block; }
.onglet-icone svg { width: 25px; height: 25px; display: block; }
.onglet-mot { font-size: 11px; letter-spacing: .01em; }

.badge-bas {
  position: absolute;
  top: -5px;
  right: -9px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--framboise);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  font-weight: bold;
}

/* De la place pour que la barre ne cache jamais la fin du contenu. */
.contenu-barre { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
.contenu-plein { padding-left: 0; padding-right: 0; }
.contenu-plein > *:not(.carrousel):not(.ronds) { padding-left: 16px; padding-right: 16px; }

/* ---------- Fiches de la grille, format haut ---------- */
.fiche-image { aspect-ratio: 3 / 4; }

.fiche-compteur {
  position: absolute;
  top: 8px;
  left: 8px;
  min-width: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(8, 23, 51, .8);
  border: 1px solid rgba(247, 241, 232, .35);
  color: var(--creme);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  text-align: center;
}

.fiche-legende {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 10px 8px;
  background: linear-gradient(180deg, rgba(8, 23, 51, 0), rgba(8, 23, 51, .9));
  text-align: left;
}
.fiche-legende h3 { margin: 0; font-family: Georgia, serif; font-size: 17px; font-weight: normal; }
.fiche-legende .fiche-lieu { font-size: 12px; }
.fiche-texte { padding: 9px 10px 12px; }

.coche {
  display: inline-block;
  width: 17px;
  height: 17px;
  line-height: 17px;
  border-radius: 50%;
  background: var(--or);
  color: #14213d;
  font-size: 11px;
  text-align: center;
  vertical-align: middle;
  font-family: Helvetica, Arial, sans-serif;
}

/* ---------- Carrousel plein écran, photo entière ---------- */
.carrousel {
  margin: 0 0 14px;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(217, 180, 74, .3);
}
.carrousel-vue {
  position: relative;
  aspect-ratio: 3 / 4;
  background: #081733;
  overflow: hidden;
}

/* La photo entière est posée par dessus une copie floutée d'elle-même :
   rien n'est coupé, et aucune bande noire ne reste. */
.carrousel-flou {
  position: absolute;
  inset: -20px;
  background-size: cover;
  background-position: center;
  filter: blur(26px) brightness(.55);
}
.carrousel-vue img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.carrousel-compteur {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(8, 23, 51, .8);
  border: 1px solid rgba(247, 241, 232, .35);
  color: var(--creme);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
}
.carrousel-points { top: 14px; }
.carrousel-legende h2 .coche { width: 20px; height: 20px; line-height: 20px; font-size: 13px; }

/* ---------- Boutons ronds sous la fiche ---------- */
.ronds {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  margin: -34px 0 18px;
  position: relative;
  z-index: 3;
}
.ronds form { margin: 0; }

.rond {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  font-size: 24px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.rond-gris { background: rgba(247, 241, 232, .92); color: #14213d; }
.rond-or { background: var(--or); color: #14213d; }
.rond-framboise {
  width: 72px;
  height: 72px;
  font-size: 30px;
  background: var(--framboise);
  color: #fff;
}
.rond-eteint { opacity: .4; cursor: default; }

/* ---------- Onglet Liens ---------- */
.liens { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.lien-ligne {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(14, 34, 70, .74);
  border: 1px solid rgba(217, 180, 74, .28);
  color: var(--creme);
  text-decoration: none;
}
.lien-texte { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.lien-nom { font-family: Georgia, serif; font-size: 17px; }
.lien-detail {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  opacity: .7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lien-date {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  opacity: .55;
  flex: 0 0 auto;
}

/* =====================================================================
   Lot 6, la pile de découverte et le J'aime
   ===================================================================== */

/* ---------- Fond uni dans l'espace membre ----------
   Le tunnel garde ses fonds animés. Ici, la seule image doit être
   la photo du membre que l'on regarde. */
.page-unie {
  background: #081733;
  background-image:
    radial-gradient(circle at 20% 0%, rgba(217, 180, 74, .10), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(201, 58, 107, .10), transparent 55%);
  background-attachment: fixed;
}

/* ---------- La grande fiche de découverte ---------- */
.pile {
  position: relative;
  margin: 10px 0 0;
  border-radius: 22px;
  overflow: hidden;
  background: #0E2246;
  border: 1px solid rgba(217, 180, 74, .3);
}
.pile-lien {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  text-decoration: none;
  color: var(--creme);
}
.pile-photo {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pile-initiale {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: Georgia, serif;
  font-size: 96px;
  color: var(--or-clair);
  opacity: .8;
}

.pile-legende {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 60px 18px 74px;
  background: linear-gradient(180deg, rgba(8, 23, 51, 0), rgba(8, 23, 51, .93) 55%);
  text-align: left;
}
.pile-legende h2 {
  margin: 0 0 2px;
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: normal;
}
.pile-lieu {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  opacity: .78;
  text-transform: none;
}
.pile-legende .jetons { margin-top: 10px; }

/* ---------- Le cœur rouge ---------- */
.rond-coeur {
  width: 74px;
  height: 74px;
  font-size: 32px;
  background: #D8342F;
  color: #fff;
  box-shadow: 0 8px 22px rgba(216, 52, 47, .45);
}
.rond-aime {
  background: #fff;
  color: #D8342F;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
}
.rond-coeur.rond-eteint {
  background: rgba(247, 241, 232, .22);
  color: rgba(247, 241, 232, .55);
  box-shadow: none;
}

/* Les ronds remontent sur la photo de la pile. */
.ronds { margin-top: -40px; }

/* La ville n'est jamais forcée en majuscules. */
.fiche-lieu { text-transform: none; }

/* =====================================================================
   Lot 7, corrections d'affichage
   ===================================================================== */

/* La fiche de découverte se cale sur la hauteur de l'écran, pour que les
   trois boutons ronds restent toujours visibles au-dessus de la barre. */
.pile-lien {
  aspect-ratio: auto;
  /* Repli pour les vieux navigateurs : vh compte la barre d'adresse de
     Chrome sur Android, on retire donc une marge genereuse. */
  height: min(calc(100vh - 460px), 74vw * 4 / 3);
  min-height: 215px;
}
/* Hauteur reelle de la fenetre, barre d'adresse deduite. Les quatre boutons
   ronds et la phrase du glissement restent visibles sans faire defiler. */
@supports (height: 100dvh) {
  .pile-lien { height: min(calc(100dvh - 400px), 74vw * 4 / 3); }
}
.pile-legende { padding: 44px 16px 14px; }
.pile-legende h2 { font-size: 25px; }

.ronds { margin-top: 14px; margin-bottom: 10px; }

/* Icône d'appareil photo sur sa propre pastille. */
.pastille-modifiable { position: relative; display: flex; }
.pastille-appareil {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--or);
  color: #14213d;
  border: 2px solid #0E2246;
}
.pastille-appareil svg { width: 18px; height: 18px; }

/* Administration : les trois pouvoirs. */
.zone-danger {
  margin-top: 26px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(201, 58, 107, .6);
  background: rgba(201, 58, 107, .08);
}
.zone-danger h2 { margin-top: 0; color: #F3B9CC; }

/* =========================================================================
   Lot 9 : la messagerie
   ========================================================================= */

/* La page de conversation occupe tout l'écran, comme une application. */
.page-conversation {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  /* Correctif 10a. style.css impose min-height:100vh au corps de la page.
     Sur Android, 100vh compte la barre d'adresse de Chrome : la page devenait
     plus haute que l'ecran et la barre d'ecriture passait sous le bord.
     On annule ce minimum ici, et seulement ici. */
  min-height: 0;
  max-height: 100dvh;
  overflow: hidden;
}

.barre-conversation {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(10, 17, 40, .96);
  border-bottom: 1px solid rgba(217, 180, 74, .22);
}

.retour-rond {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: #F4E9C8;
  cursor: pointer;
}
.retour-rond svg { width: 20px; height: 20px; }

.tete-conversation {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.tete-conversation img,
.tete-conversation .tete-vide {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(217, 180, 74, .18);
  color: #D9B44A;
  font-weight: 600;
}
.tete-conversation strong {
  display: block;
  color: #F4E9C8;
  font-size: 1rem;
  line-height: 1.2;
}
.tete-conversation small {
  display: block;
  color: rgba(244, 233, 200, .6);
  font-size: .78rem;
}

/* Le fil des messages : c'est lui qui défile, pas la page. */
.fil {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fil-debut,
.fil-vide {
  text-align: center;
  font-size: .82rem;
  color: rgba(244, 233, 200, .55);
  line-height: 1.5;
  margin: 6px auto 14px;
  max-width: 300px;
}

.bulle {
  max-width: 78%;
  padding: 9px 13px 6px;
  border-radius: 18px;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.bulle p { margin: 0; font-size: .95rem; line-height: 1.4; }

.bulle-moi {
  align-self: flex-end;
  background: linear-gradient(135deg, #D9B44A, #B8912F);
  color: #14203f;
  border-bottom-right-radius: 5px;
}
.bulle-autre {
  align-self: flex-start;
  background: rgba(255, 255, 255, .09);
  color: #F4E9C8;
  border-bottom-left-radius: 5px;
}

.bulle-heure {
  display: block;
  text-align: right;
  font-size: .68rem;
  opacity: .6;
  margin-top: 2px;
}

/* La barre d'écriture, collée en bas. */
.ecrire {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(10, 17, 40, .96);
  border-top: 1px solid rgba(217, 180, 74, .22);
}
.ecrire textarea {
  flex: 1 1 auto;
  resize: none;
  max-height: 120px;
  padding: 11px 14px;
  border-radius: 20px;
  border: 1px solid rgba(217, 180, 74, .3);
  background: rgba(255, 255, 255, .06);
  color: #F4E9C8;
  font: inherit;
  font-size: .95rem;
  line-height: 1.35;
}
.ecrire textarea::placeholder { color: rgba(244, 233, 200, .45); }

.envoyer-rond {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #D9B44A, #B8912F);
  color: #14203f;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.envoyer-rond svg { width: 21px; height: 21px; }

.ecrire-fermee {
  display: block;
  text-align: center;
  padding: 14px;
}
.ecrire-fermee p { margin: 0; font-size: .85rem; color: rgba(244, 233, 200, .7); }

.alerte-conversation { margin: 10px 14px 0; }

/* Le signalement. */
.signalement {
  flex: 0 0 auto;
  max-height: 60vh;
  overflow-y: auto;
  padding: 16px 16px 20px;
  background: rgba(10, 17, 40, .98);
  border-bottom: 1px solid rgba(217, 180, 74, .22);
}
.signalement h2 { margin: 0 0 6px; font-size: 1.05rem; color: #F4E9C8; }

.choix-signalement {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  cursor: pointer;
  font-size: .9rem;
  color: #F4E9C8;
}
.choix-signalement input { accent-color: #D9B44A; width: 18px; height: 18px; }

.bouton-discret {
  background: rgba(255, 255, 255, .08);
  color: #F4E9C8;
  margin-top: 8px;
}

/* Le bouton Écrire sur la fiche d'un profil. */
.rond-ecrire {
  background: rgba(217, 180, 74, .16);
  border: 1px solid rgba(217, 180, 74, .45);
  color: #D9B44A;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.rond-ecrire svg { width: 24px; height: 24px; }

/* Une conversation avec des messages non lus. */
.lien-nouveau { background: rgba(217, 180, 74, .09); }
.lien-nouveau .lien-nom { color: #D9B44A; }
.lien-nouveau .lien-detail { color: rgba(244, 233, 200, .95); font-weight: 500; }

.badge-pastille {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: #C93A6B;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0A1128;
}
.pastille { position: relative; }

/* ---------------------------------------------------------------------------
   Lot 10. L'appel des J'aime recus, et le glissement de la pile.
   --------------------------------------------------------------------------- */

.avis {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .10);
  text-decoration: none;
  color: inherit;
}

.avis-tete {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(217, 180, 74, .18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.avis-tete img { width: 100%; height: 100%; object-fit: cover; }
.avis-initiale { font-family: Georgia, serif; font-size: 1.3rem; color: #D9B44A; }

.avis-texte { flex: 1 1 auto; min-width: 0; }
.avis-texte strong {
  display: block;
  font-family: Helvetica, Arial, sans-serif;
  font-size: .98rem;
  font-weight: 600;
  color: #F7F1E8;
  margin-bottom: 2px;
}
.avis-texte small {
  display: block;
  font-family: Helvetica, Arial, sans-serif;
  font-size: .78rem;
  line-height: 1.4;
  color: rgba(244, 233, 200, .62);
}

.avis-plus {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 9px;
  background: #C93A6B;
  color: #fff;
  font-size: .72rem;
}

.avis-chevron {
  flex: 0 0 auto;
  font-size: 1.5rem;
  color: rgba(244, 233, 200, .45);
}

/* La photo du profil suivant, chargee d'avance et invisible. */
.prechargement {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* La pile suit le doigt. On coupe la selection pour que le glissement ne
   surligne pas le texte de la legende au passage. */
.pile {
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  will-change: transform;
}

.petit-geste {
  text-align: center;
  margin: 10px 0 0;
  opacity: .55;
}

/* ---------------------------------------------------------------------------
   Lot 10. La messagerie passe en clair.
   La banniere du haut reste bleu nuit, l'identite de la maison. En dessous,
   fond creme, texte presque noir, bulles blanches. On lit une conversation,
   on ne la contemple pas : les couleurs fortes s'effacent.
   Ce bloc arrive apres les regles d'origine, il les remplace.
   --------------------------------------------------------------------------- */

.page-conversation { background: #F5F2EC; }

.fil { background: #F5F2EC; }

.fil-debut,
.fil-vide {
  color: #7C7568;
  max-width: 320px;
}

.bulle {
  padding: 10px 14px 7px;
  box-shadow: 0 1px 2px rgba(20, 32, 63, .07);
}
.bulle p { color: #1E1B16; }

/* Les miennes : blanc casse, un liseré d'or a peine visible. */
.bulle-moi {
  background: #FFFDF7;
  border: 1px solid rgba(217, 180, 74, .45);
  color: #1E1B16;
}

/* Celles de l'autre : blanc pur. */
.bulle-autre {
  background: #FFFFFF;
  border: 1px solid rgba(30, 27, 22, .09);
  color: #1E1B16;
}

.bulle-heure { color: #8B8377; opacity: 1; }

/* La barre d'ecriture, claire elle aussi. */
.ecrire {
  background: #FFFFFF;
  border-top: 1px solid rgba(30, 27, 22, .12);
}
.ecrire textarea {
  background: #F5F2EC;
  border: 1px solid rgba(30, 27, 22, .14);
  color: #1E1B16;
}
.ecrire textarea::placeholder { color: #9A9285; }
.ecrire textarea:focus {
  outline: none;
  border-color: rgba(217, 180, 74, .75);
  background: #FFFFFF;
}

.ecrire-fermee { background: #FFFFFF; }
.ecrire-fermee p { color: #6E675C; }

.alerte-conversation {
  background: rgba(201, 58, 107, .08);
  border: 1px solid rgba(201, 58, 107, .35);
  color: #8E1F45;
}

/* Le signalement, sur fond clair. La case de precision etait un rectangle
   blanc brut : elle prend la meme forme que le champ d'ecriture. */
.page-conversation .signalement {
  background: #FFFFFF;
  border-bottom: 1px solid rgba(30, 27, 22, .12);
  color: #1E1B16;
}
.page-conversation .signalement h2 { color: #14203F; }
.page-conversation .signalement .petit { color: #6E675C; }

.page-conversation .choix-signalement {
  color: #1E1B16;
  border-bottom-color: rgba(30, 27, 22, .10);
}

.page-conversation .signalement textarea {
  width: 100%;
  resize: none;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid rgba(30, 27, 22, .16);
  background: #F5F2EC;
  color: #1E1B16;
  font: inherit;
  font-size: .95rem;
  line-height: 1.4;
}
.page-conversation .signalement textarea::placeholder { color: #9A9285; }
.page-conversation .signalement textarea:focus {
  outline: none;
  border-color: rgba(217, 180, 74, .75);
  background: #FFFFFF;
}

/* Lot 10, suite. Sur fond clair, le bouton Annuler devenait blanc sur blanc.
   Il reprend un contour et un texte lisibles, et seulement dans la
   conversation : ailleurs, le fond reste sombre. */
.page-conversation .bouton-discret {
  background: #FFFFFF;
  border: 1px solid rgba(30, 27, 22, .22);
  color: #3A342B;
  box-shadow: none;
}

/* Le pas en arriere dans la decouverte. */
.lien-retour-profil {
  display: block;
  margin-bottom: 4px;
  color: #D9B44A;
  text-decoration: none;
}

.petit-fin {
  text-align: center;
  margin: 8px auto 0;
  max-width: 300px;
  color: rgba(244, 233, 200, .7);
}

/* Lot 10, suite. Le logo etait a 34 px : le nom de la maison devenait
   illisible. On le remonte a 52 px et on lui laisse la largeur, la pastille
   du profil se contente de sa place. C'est le nom qui doit se lire en
   premier, pas la photo du membre. */
.barre-haute { padding: 8px 10px; gap: 8px; }
.logo-petit {
  height: 64px;
  width: auto;
  max-width: 84%;
  flex: 0 1 auto;
}
/* La pastille se serre pour laisser la banniere s'etendre vers la droite. */
.barre-haute .pastille { flex: 0 0 auto; width: 42px; height: 42px; }

/* Le retour en arriere dans la decouverte, sous la forme d'un rond, a cote
   des autres. Le lien texte ne se voyait pas. */
.rond-retour {
  background: rgba(255, 255, 255, .10);
  color: rgba(244, 233, 200, .8);
  font-size: 1.4rem;
}
.rond-retour-vide { visibility: hidden; }

/* ---------------------------------------------------------------------------
   Lot 12. Les morphologies en photographies, d'apres les maquettes de Manus.
   La carte devient un portrait entier, le libelle se pose dessus en bas, sur
   un degrade sombre pour rester lisible quel que soit le fond de l'image.
   --------------------------------------------------------------------------- */

.silhouette { padding: 0; overflow: hidden; gap: 0; }

/* Le cadre du portrait : haut comme les cartes de Manus. */
.silhouette-dessin {
  position: relative;
  display: block;
  width: 100%;
  height: 196px;
  background: rgba(8, 23, 51, .55);
}
.morpho-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}

/* Le libelle, pose sur le bas de la photo. */
.silhouette-nom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 10px 10px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  color: #F7F1E8;
  background: linear-gradient(180deg, rgba(8,23,51,0), rgba(8,23,51,.88) 62%);
  pointer-events: none;
}
.silhouette { position: relative; }

/* La case « Peu importe » garde son dessin, centre. */
.silhouette-dessin svg {
  height: 96px;
  width: auto;
  margin: 50px auto 0;
  display: block;
}

.silhouette-active { background: rgba(217, 180, 74, .10); }
.silhouette-active .silhouette-nom { color: #F2DE9E; }

@media (max-width: 380px) {
  .silhouette-dessin { height: 172px; }
  .silhouette-dessin svg { height: 84px; margin-top: 44px; }
  .silhouette-nom { font-size: 12px; }
}

/* ---------------------------------------------------------------------------
   Lot 13. La messagerie reprise d'apres les maquettes de Manus.
   Bulles a pointe, texte en serif, separateur de jour couronne, barre
   d'ecriture en pastille. La banniere reste bleu nuit.
   --------------------------------------------------------------------------- */

/* La fleche de retour perd son rond : elle devient un simple trait d'or. */
.barre-conversation .retour-rond {
  background: none;
  color: #D9B44A;
  width: 34px;
}
.barre-conversation .retour-rond svg { width: 24px; height: 24px; }

.tete-conversation img,
.tete-conversation .tete-vide {
  width: 46px;
  height: 46px;
  border: 1.5px solid rgba(217, 180, 74, .75);
}
.tete-conversation strong {
  font-family: Georgia, serif;
  font-size: 1.18rem;
  color: #F7F1E8;
}

/* Le statut, avec sa pastille doree. */
.etat-ouverte {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: .78rem;
  color: rgba(244, 233, 200, .72);
}
.etat-ouverte::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #D9B44A;
  flex: 0 0 auto;
}

/* Le separateur de jour : un filet d'or, une couronne, la date. */
.jour {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 4px 6px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: .84rem;
  color: #8B8377;
}
.jour::before,
.jour::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(217, 180, 74, .45);
}
.jour-couronne {
  display: flex;
  align-items: flex-end;
  color: #C9A445;
}
.jour-couronne svg { width: 18px; height: 11px; display: block; }
.jour-texte { white-space: nowrap; }

/* Les bulles : plus d'air, une pointe, et le texte en serif. */
.bulle {
  max-width: 82%;
  padding: 13px 17px 8px;
  border-radius: 20px;
  position: relative;
  box-shadow: 0 1px 3px rgba(20, 32, 63, .08);
}
.bulle p {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  line-height: 1.45;
  color: #1E1B16;
}

.bulle-autre {
  background: #FFFFFF;
  border: 0;
  border-bottom-left-radius: 20px;
}
.bulle-autre::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 14px;
  width: 14px;
  height: 16px;
  background: #FFFFFF;
  clip-path: polygon(100% 0, 100% 100%, 0 12%);
}

.bulle-moi {
  background: #FBF7EE;
  border: 1px solid rgba(217, 180, 74, .55);
  border-bottom-right-radius: 20px;
}
.bulle-moi::before {
  content: "";
  position: absolute;
  right: -7px;
  top: 26px;
  width: 14px;
  height: 16px;
  background: #FBF7EE;
  border-right: 1px solid rgba(217, 180, 74, .55);
  border-top: 1px solid rgba(217, 180, 74, .55);
  clip-path: polygon(0 0, 100% 88%, 0 100%);
}

.bulle-heure {
  font-family: Helvetica, Arial, sans-serif;
  font-size: .74rem;
  color: #9A9285;
  margin-top: 4px;
}

/* La barre d'ecriture : un champ en pastille, un rond d'or plein. */
.ecrire {
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  gap: 10px;
  align-items: center;
}
.ecrire textarea {
  border-radius: 999px;
  padding: 13px 18px;
  background: #FFFFFF;
  border: 1px solid rgba(30, 27, 22, .16);
  font-family: Helvetica, Arial, sans-serif;
}
.envoyer-rond {
  width: 48px;
  height: 48px;
  background: #C9A445;
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(201, 164, 69, .35);
}
.envoyer-rond svg { width: 22px; height: 22px; }

/* Lot 15. La banniere sans avatar : le logo prend toute la largeur.
   L'avatar descend dans la carte du profil, ou il a de la place. */
/* La banniere occupe toute la largeur, d'un bord a l'autre. Le fichier du
   logo porte deja son fond bleu nuit : en l'etirant sur 100 %, la bande
   devient d'un seul tenant, sans liseré plus sombre autour. */
.barre-haute-pleine {
  padding: 0;
  justify-content: center;
  background: #0E2246;
}
.barre-haute-pleine .logo-petit {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

/* Le lien qui dit tout haut ce que le rond fait tout bas. */
.lien-photo {
  display: inline-block;
  margin-top: 10px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(217, 180, 74, .55);
  color: var(--or-clair);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
}

/* La pastille d'appareil photo, posee proprement sur le bord du cercle. */
.pastille-appareil {
  right: 4px;
  bottom: 4px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--or);
  color: #14213d;
  border: 2px solid #081733;
  align-items: center;
  justify-content: center;
}
.pastille-appareil svg { width: 21px; height: 21px; }

/* Lot 16. Toucher sa photo ouvre la galerie du telephone, sans detour.
   Le champ de fichier est invisible : c'est la photo elle-meme qu'on touche. */
.photo-directe { margin: 0; }
.photo-directe-champ {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}
.pastille-grande { cursor: pointer; }

/* Plus de pastille doree par-dessus le visage : l'appareil photo est passe
   dans le bouton, ou il ne cache rien. */
.pastille-appareil { display: none; }

.lien-photo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.lien-photo svg { width: 18px; height: 18px; }

.lien-galerie {
  display: block;
  margin-top: 10px;
  color: rgba(247, 241, 232, .6);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  text-decoration: underline;
}

/* Lot 17. La legende de Decouvrir : lisible, mais qui laisse voir le visage.
   Le voile ne monte plus que dans le bas de la carte, les etiquettes tiennent
   sur une seule ligne et se coupent proprement si elles sont trop longues. */
.pile-legende {
  padding: 70px 14px 13px;
  background: linear-gradient(
    180deg,
    rgba(8, 23, 51, 0) 0%,
    rgba(8, 23, 51, .18) 38%,
    rgba(8, 23, 51, .72) 70%,
    rgba(8, 23, 51, .94) 100%
  );
}
.pile-legende h2 {
  font-size: 23px;
  margin: 0;
  text-shadow: 0 2px 10px rgba(8, 23, 51, .85);
}
.pile-legende .pile-lieu {
  font-size: 13px;
  margin: 3px 0 9px;
  text-shadow: 0 2px 8px rgba(8, 23, 51, .8);
}
.pile-legende .jetons {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  overflow: hidden;
  margin: 0;
}
.pile-legende .jeton {
  flex: 0 1 auto;
  min-width: 0;
  padding: 5px 11px;
  font-size: 11.5px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(8, 23, 51, .55);
  border-color: rgba(242, 222, 158, .5);
}

/* Lot 18. Une etiquette touchee s'ouvre et se lit en entier. */
.pile-legende .jeton { cursor: pointer; }
.pile-legende .jeton-ouvert {
  flex: 1 1 100%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  background: rgba(8, 23, 51, .88);
  border-color: var(--or);
  color: var(--or-clair);
}
.pile-legende .jetons { flex-wrap: wrap; }

/* Lot 23. Le bandeau des J'aime recus : present sur toute la decouverte,
   plus visible qu'avant, et balayable du doigt. */
.avis-cadre {
  position: relative;
  transition: transform .22s ease, opacity .22s ease;
  will-change: transform;
}
.avis-cadre.avis-parti { transform: translateX(-120%); opacity: 0; }

.avis-cadre .avis {
  border: 1px solid var(--or);
  background: linear-gradient(100deg, rgba(217, 180, 74, .18), rgba(14, 34, 70, .95));
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
  padding-right: 46px;
}
.avis-cadre .avis-tete { border: 2px solid var(--or); }
.avis-cadre .avis-texte strong { color: var(--or-clair); }

.avis-fermer {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(8, 23, 51, .55);
  color: rgba(247, 241, 232, .75);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* Lot 24. Reprendre un J'aime envoye par megarde. */
.retrait-jaime { margin: -6px 0 14px; text-align: right; }
.retrait-jaime .action { font-size: 13px; padding: 7px 14px; }