/* ── Styles propres aux écrans ─────────────────────────────────────────── */

.section-title {
  font-size: 16px;
  font-weight: 700;
  margin: 22px 4px 12px;
}
.list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.list-head__title { font-size: 15px; font-weight: 700; color: var(--muted); }
/* En-tête réduite à sa seule action : sans ce réglage, `space-between` la
   collerait à gauche. */
.list-head--end { justify-content: flex-end; }
.foot-note {
  text-align: center;
  font-size: 12.5px;
  color: var(--muted-light);
  margin: 26px 0 10px;
  line-height: 1.7;
}
.sheet__icon {
  width: 54px; height: 54px;
  border-radius: 18px;
  display: grid; place-items: center;
  margin: 0 auto 14px;
}

/* ══ Accueil publique ═════════════════════════════════════════════════ */

.landing { --pad: clamp(16px, 5vw, 48px); }

.lp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px var(--pad);
  max-width: 1180px;
  margin: 0 auto;
}
.lp-nav img { height: 74px; width: auto; }
.lp-nav nav { display: flex; gap: 12px; }
/* Sous 520px, deux boutons pleine taille et le logo ne tiennent plus sur une
   ligne : on revient à un gabarit compact plutôt que de laisser le bandeau
   déborder. */
@media (max-width: 520px) {
  .lp-nav { gap: 10px; }
  .lp-nav img { height: 48px; }
  .lp-nav nav { gap: 8px; }
  .lp-nav .btn { height: 40px; padding: 0 14px; font-size: 14px; border-radius: var(--r-sm); }
}

.lp-hero {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px var(--pad) 56px;
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 920px) { .lp-hero { grid-template-columns: 1.05fr .95fr; padding-top: 48px; } }

.lp-hero__text h1 {
  font-size: clamp(30px, 5.2vw, 50px);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 16px 0 14px;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lp-hero__text > p { font-size: 17px; color: var(--muted); max-width: 54ch; line-height: 1.65; }
.lp-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.lp-note { margin-top: 14px; font-size: 13px; color: var(--muted-light); }

.lp-stack { position: relative; aspect-ratio: 4 / 3.4; }
.lp-shot--back {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
}
.lp-shot--front {
  position: absolute;
  right: -6px; bottom: -14px;
  width: min(300px, 78%);
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  padding: 12px;
  display: grid;
  gap: 6px;
}
.lp-shot__row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  background: var(--bg);
  font-size: 12.5px;
}
.lp-shot__row svg { width: 17px; height: 17px; color: var(--pink); flex: none; }
.lp-shot__row b { font-weight: 600; }
.lp-shot__row span { margin-left: auto; color: var(--muted-light); font-size: 11.5px; }

.lp-section { padding: 56px var(--pad); max-width: 1180px; margin: 0 auto; }
.lp-section--alt { background: #fff; max-width: none; }
.lp-section--alt > * { max-width: 1180px; margin-inline: auto; }
.lp-section h2 {
  font-size: clamp(23px, 3.4vw, 32px);
  font-weight: 800;
  letter-spacing: -.015em;
  margin-bottom: 28px;
}
/* Mosaïque. Quatre colonnes, tuiles au format portrait : une photo paysage sur
   deux colonnes retombe exactement sur la même hauteur (2 col / 1.5 = 1.333 col,
   soit la hauteur d'un portrait 3/4). Les deux rangées sont donc pleines, sans
   trou ni recadrage brutal. */
.lp-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.lp-tile {
  margin: 0;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--line);
}
.lp-tile img { width: 100%; height: 100%; object-fit: cover; }
.lp-tile--wide { grid-column: span 2; aspect-ratio: 3 / 2; }
.lp-tile--cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
  background: var(--grad-brand);
  color: #fff;
}
.lp-tile--cta b { font-size: 19px; font-weight: 800; }
.lp-tile--cta p { font-size: 13.5px; opacity: .9; line-height: 1.5; }
.lp-tile--cta .btn { background: #fff; color: var(--pink); font-weight: 700; }

/* Deux colonnes dès que quatre tuiles deviennent trop étroites ; la photo
   paysage prend alors toute la largeur. */
@media (max-width: 900px) {
  .lp-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .lp-gallery { gap: 10px; }
  .lp-tile--cta b { font-size: 17px; }
}

.lp-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.lp-card {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--shadow-1);
}
.lp-card .ico { width: 44px; height: 44px; border-radius: 14px; margin-bottom: 14px; }
.lp-card .ico svg { width: 22px; height: 22px; }
.lp-card h3 { font-size: 17px; margin-bottom: 8px; }
.lp-card p { color: var(--muted); font-size: 14.5px; line-height: 1.6; }

.lp-steps { display: grid; gap: 22px; }
.lp-steps li { display: flex; gap: 16px; align-items: flex-start; }
.lp-step__n {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad-brand);
  color: #fff;
  font-weight: 800;
}
.lp-steps h3 { font-size: 17px; margin-bottom: 4px; }
.lp-steps p { color: var(--muted); }

.lp-final {
  text-align: center;
  padding: 64px var(--pad);
  background: var(--grad-brand);
  color: #fff;
}
.lp-final h2 { font-size: clamp(24px, 4vw, 34px); font-weight: 800; margin-bottom: 10px; }
.lp-final p { opacity: .92; margin-bottom: 26px; }
.lp-final .btn--pink { background: #fff; color: var(--pink); box-shadow: var(--shadow-2); }

.lp-footer {
  text-align: center;
  padding: 34px var(--pad) 48px;
  color: var(--muted-light);
  font-size: 13px;
  display: grid;
  gap: 10px;
  justify-items: center;
}
.lp-footer__links a { color: var(--muted); }

/* ══ Écrans d'authentification ════════════════════════════════════════ */

.auth { min-height: 100vh; display: grid; }
@media (min-width: 960px) { .auth { grid-template-columns: 44% 56%; } }

.auth__art { position: relative; display: none; overflow: hidden; }
@media (min-width: 960px) { .auth__art { display: block; } }
.auth__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auth__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(40,120,200,.88), rgba(233,30,140,.82));
}
.auth__art-text {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  padding: 48px;
  color: #fff;
}
/* Le logo n'est plus passé en blanc : il contient une icône dont le cœur est
   déjà blanc, et tout blanchir la réduisait à un carré plein. Il garde donc ses
   couleurs, sur une pastille claire qui le détache du dégradé. */
.auth__art-text img {
  width: 190px;
  height: auto;
  padding: 9px 13px;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
}
.auth__art-text p { font-size: 20px; font-weight: 600; max-width: 22ch; }

.auth__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 32px clamp(20px, 6vw, 64px) 48px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}
.auth__panel--wide { max-width: 720px; }
.auth__logo { margin-bottom: 20px; }
@media (min-width: 960px) { .auth__logo { display: none; } }
.auth__title { font-size: clamp(24px, 3.4vw, 30px); font-weight: 800; letter-spacing: -.015em; }
.auth__subtitle { color: var(--muted); margin-bottom: 22px; }
.auth-form { display: block; }
.auth-links { text-align: right; margin: -4px 0 16px; font-size: 13.5px; }
.auth-foot { margin-top: 20px; text-align: center; color: var(--muted); font-size: 14px; }

/* ── Inscription ── */

.reg { display: flex; flex-direction: column; min-height: 0; }
.reg__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.reg__title { font-size: 17px; font-weight: 700; flex: 1; }
.reg__count { font-size: 13px; font-weight: 700; color: var(--blue); }
.reg__track { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.reg__bar { display: block; height: 100%; background: var(--grad-brand); transition: width .3s ease; }
.reg__body { padding: 22px 2px 8px; }
.reg__foot { padding-top: 8px; }
.reg__sub { font-size: 15px; font-weight: 700; margin-bottom: 6px; }

.bio__foot { display: flex; justify-content: flex-end; }
.bio__count { font-size: 12px; color: var(--muted-light); }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.photo-slot {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg);
}
.photo-slot img { width: 100%; height: 100%; object-fit: cover; }
.photo-slot--add {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  border: 2px dashed #CBD3DD;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.photo-slot--add svg { width: 24px; height: 24px; }
.photo-slot__del {
  position: absolute;
  top: 6px; right: 6px;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0,0,0,.55);
  color: #fff;
}
.photo-slot__del svg { width: 15px; height: 15px; }
.photo-slot__main, .photo-slot__new {
  position: absolute;
  left: 6px; bottom: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
}
.photo-slot__new { background: var(--pink); }

.selfie-box { margin-top: 10px; display: grid; gap: 10px; justify-items: center; }
/* Sur ordinateur, la zone est un <button> qui ouvre la webcam ; sur téléphone,
   un <label> qui déclenche l'appareil photo. Les deux doivent se ressembler,
   d'où la remise à plat du fond et de la police héritée du bouton. */
.selfie-box__add {
  width: 100%;
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 28px 20px;
  border: 2px dashed #CBD3DD;
  border-radius: var(--r-lg);
  background: none;
  font: inherit;
  text-align: center;
  cursor: pointer;
  color: var(--muted);
}
.selfie-box__add svg { width: 30px; height: 30px; color: var(--blue); }
.selfie-box__add b { color: var(--dark); font-size: 15px; }
.selfie-box__add span { font-size: 13px; max-width: 34ch; }
/* Pas de webcam joignable : la zone reste informative, sans action. */
.selfie-box__add--off { cursor: default; border-color: var(--line); }
.selfie-box__add--off svg { color: var(--muted-light); }

/* Aperçu du direct, cadré comme le selfie final. */
.cam {
  width: min(100%, 300px);
  aspect-ratio: 1;
  margin: 0 auto 14px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--dark);
  box-shadow: var(--shadow-2);
}
.cam__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Miroir à l'écran seulement : le cliché envoyé garde le sens réel. */
  transform: scaleX(-1);
}
.selfie-box__img {
  width: 160px; height: 160px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow-2);
}

/* ── Vérification du compte ── */

.verif {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 20px;
  padding: 40px 18px;
}
.verif__card { max-width: 620px; text-align: center; padding: 28px; }
.verif__ico {
  width: 60px; height: 60px;
  border-radius: 20px;
  display: grid; place-items: center;
  margin: 0 auto 18px;
}
.verif__card h1 { font-size: 22px; margin-bottom: 12px; }
.verif__card > p { color: var(--muted); line-height: 1.65; }
.verif__steps { display: grid; gap: 10px; margin: 24px 0; text-align: left; }
.verif__steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--r-md);
  background: var(--green-soft);
  color: var(--green);
  font-size: 14px;
  font-weight: 600;
}
.verif__steps svg { width: 18px; height: 18px; flex: none; }
.verif__steps .is-current { background: var(--amber-soft); color: #A9741A; }
.verif__steps .is-todo { background: var(--bg); color: var(--muted-light); }
.verif__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.verif__current { margin: 22px 0; }
.verif__current h3 { font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.verif__thumbs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.verif__thumb, .verif__thumbs .img-ph {
  width: 74px; height: 96px;
  border-radius: var(--r-sm);
  object-fit: cover;
}

/* ══ Grille de profils ════════════════════════════════════════════════ */

.grid-profiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 14px;
}
.grid-profiles--empty { display: block; }
@media (min-width: 700px) {
  .grid-profiles { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
}
.skel-card { aspect-ratio: 3 / 4.5; }

.pcard {
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform .18s, box-shadow .18s;
}
.pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.pcard__media { display: block; position: relative; aspect-ratio: 3 / 4; }
.pcard__img, .pcard__media .img-ph {
  width: 100%; height: 100%;
  object-fit: cover;
}
.pcard__scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: linear-gradient(to top, rgba(10,15,30,.86), transparent);
}
.pcard__fresh {
  position: absolute;
  top: 9px; left: 9px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
}
.pcard__count {
  position: absolute;
  top: 9px; right: 9px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.pcard__count svg { width: 13px; height: 13px; }
.pcard__id { position: absolute; left: 12px; right: 12px; bottom: 10px; color: #fff; }
.pcard__name { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; }
.pcard__age { font-weight: 400; opacity: .85; }
.pcard__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 3px; font-size: 12px; opacity: .9; }
.pcard__meta span { display: inline-flex; align-items: center; gap: 3px; }
.pcard__meta svg { width: 13px; height: 13px; }
.pcard__foot { padding: 10px; }
.pcard__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  border-radius: var(--r-sm);
  background: var(--green-soft);
  color: var(--green);
  font-weight: 700;
  font-size: 13.5px;
}
.pcard__phone svg { width: 16px; height: 16px; }

/* ══ Fiche profil ═════════════════════════════════════════════════════ */

.detail { padding-bottom: 92px; }
.detail__hero { position: relative; height: min(64vh, 560px); background: var(--bg); }
.detail__stage, .detail__stage img, .detail__stage .img-ph { width: 100%; height: 100%; }
.detail__img { object-fit: cover; }
.detail__scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(10,15,30,.9), transparent);
  pointer-events: none;
}
.detail__back, .detail__fav {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
  color: var(--dark);
  box-shadow: var(--shadow-1);
}
.detail__back { left: 14px; }
.detail__fav { right: 14px; color: var(--muted); }
.detail__fav.is-on { color: #F5A524; }
.detail__back svg, .detail__fav svg { width: 21px; height: 21px; }

.detail__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.82);
  color: var(--dark);
  opacity: 0;
  transition: opacity .18s;
}
.detail__hero:hover .detail__nav { opacity: 1; }
@media (hover: none) { .detail__nav { opacity: .85; } }
.detail__nav--prev { left: 12px; }
.detail__nav--next { right: 12px; }

.detail__ident { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: #fff; padding: 0 20px; }
.detail__ident h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: clamp(26px, 6vw, 34px);
  font-weight: 800;
}
.detail__age { font-weight: 300; opacity: .8; }
.detail__place {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 7px;
  font-size: 14px;
  opacity: .9;
}
.detail__place svg { width: 15px; height: 15px; }
.detail__sep { opacity: .5; margin: 0 4px; }
.detail__dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.detail__dot {
  width: 7px; height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,.55);
  transition: width .22s, background .22s;
}
.detail__dot.is-on { width: 22px; background: var(--pink); }

.detail__body { margin-top: -18px; position: relative; z-index: 1; }
.detail__bio { color: var(--muted); line-height: 1.7; white-space: pre-wrap; }
.detail__spacer { height: 12px; }

.info-line { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.info-line .ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.info-line .ico svg { width: 18px; height: 18px; }
.info-line__label { display: block; font-size: 11.5px; color: var(--muted-light); font-weight: 600; }
.info-line b { font-size: 15px; }

.detail__bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  padding: 12px 16px calc(12px + var(--safe-b));
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.detail__action { max-width: 680px; margin: 0 auto; }

/* Sur ordinateur, la fiche se lit en deux colonnes : la photo occupe toute la
   hauteur à gauche et reste visible pendant que les informations défilent à
   droite. La barre d'action quitte sa position fixe — plaquée en bas d'un
   écran large, elle flottait loin du contenu qu'elle concerne. */
@media (min-width: 900px) {
  .detail {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 0 32px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 24px 28px 40px;
  }
  .detail__hero {
    grid-column: 1;
    grid-row: 1 / span 2;
    position: sticky;
    top: 24px;
    height: min(82vh, 760px);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-2);
  }
  /* L'action passe au-dessus des informations, comme sur la carte du
     carrousel : c'est le geste attendu de l'écran. */
  .detail__bar {
    grid-column: 2;
    grid-row: 1;
    position: static;
    z-index: auto;
    padding: 0 0 18px;
    background: none;
    border-top: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .detail .detail__body {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
    max-width: none;
    padding: 0;
  }
  .detail__action { max-width: none; }
  .detail__spacer { display: none; }
  /* Les flèches photo ne dépendent plus du survol : sur cette mise en page la
     photo est le repère principal, ses commandes doivent rester visibles. */
  .detail__nav { opacity: 1; }
}

/* ══ Listes ═══════════════════════════════════════════════════════════ */

.tab-body { margin-top: 16px; }
.rows { display: grid; gap: 10px; }
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  color: inherit;
}
a.row:hover { box-shadow: var(--shadow-2); }
.row__body { flex: 1; min-width: 0; }
.row__name { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; }
.row__sub {
  font-size: 13px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row__sub.is-unread { color: var(--dark); font-weight: 600; }
.row__time { font-size: 11.5px; color: var(--muted-light); white-space: nowrap; }
.row__actions { display: flex; gap: 6px; flex: none; }
.row__end { display: grid; justify-items: end; gap: 5px; }
.row__phone { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; letter-spacing: .04em; }
.row__phone svg { width: 14px; height: 14px; }
.row__phone.is-open { color: var(--green); }
.row--admin { align-items: flex-start; flex-wrap: wrap; }
.badge-pill {
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--pink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.upsell {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.upsell .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.upsell div { flex: 1; }
.upsell b { font-size: 14.5px; }
.upsell p { font-size: 13px; color: var(--muted); }

/* ══ Carrousel « Rencontres » ═════════════════════════════════════════ */

.bigcard {
  background: #fff;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.bigcard__media { position: relative; display: block; aspect-ratio: 4 / 4.6; }
.bigcard__img, .bigcard__media .img-ph { width: 100%; height: 100%; object-fit: cover; }
.bigcard__scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(10,15,30,.9), transparent);
}
.bigcard__ident { position: absolute; left: 18px; right: 18px; bottom: 16px; color: #fff; }
.bigcard__ident h2 { display: flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 800; }
.bigcard__ident p { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 13.5px; opacity: .9; }
.bigcard__ident svg { width: 14px; height: 14px; }
.bigcard__bio {
  padding: 16px 18px 0;
  color: var(--muted);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bigcard__tags { padding: 14px 18px 0; }
.bigcard__action { padding: 16px 18px 0; }
/* La bio et les centres d'intérêt sont facultatifs : c'est le dernier bloc
   présent, quel qu'il soit, qui ferme la carte. */
.bigcard > :last-child { padding-bottom: 18px; }

/* Passage d'un profil à l'autre au balayage : la photo se prend à pleine main,
   c'est le geste du parcours de rencontre. `touch-action: pan-y` laisse le
   défilement vertical de la page au navigateur et ne nous réserve que
   l'horizontale. */
.bigcard__stage { position: relative; }
.bigcard__stage--swipe {
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.bigcard__stage--swipe .bigcard__img { -webkit-user-drag: none; }

/* La carte pivote légèrement en suivant le doigt : c'est ce qui distingue un
   balayage d'un simple défilement. */
.bigcard { will-change: transform; }

/* Posé en haut, au centre : le bas de la photo est déjà pris par le nom et la
   ville. */
.bigcard__swipe-hint {
  position: absolute;
  left: 50%;
  top: 10px;
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
  background: rgba(10, 15, 30, .38);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  pointer-events: none;
  transition: opacity .25s ease;
}
.bigcard__swipe-hint svg { width: 16px; height: 16px; opacity: .8; }
.bigcard__swipe-hint.is-gone { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .bigcard { transition: none !important; }
}
.round {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #fff;
  box-shadow: var(--shadow-2);
  color: var(--blue);
  transition: transform .12s;
}
.round:hover:not(:disabled) { transform: scale(1.06); }
.round:disabled { opacity: .4; }
.round svg { width: 22px; height: 22px; }

/* ══ Conversation ═════════════════════════════════════════════════════ */

.chat {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
@media (min-width: 900px) {
  #app.has-nav .chat { left: var(--sidebar-w); }
}
.chat__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px calc(10px);
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.chat__who { display: flex; align-items: center; gap: 10px; color: inherit; min-width: 0; }
.chat__who b { display: flex; align-items: center; gap: 5px; font-size: 15.5px; }
.chat__who span { display: block; font-size: 12px; color: var(--muted-light); }

.thread {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.thread__day { text-align: center; margin: 14px 0 10px; }
.thread__day span {
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(16,24,40,.06);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}
.thread__empty {
  margin: auto;
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  max-width: 34ch;
}
.thread__empty h3 { font-size: 17px; }
.thread__empty p { font-size: 14px; color: var(--muted); line-height: 1.6; }

.bubble {
  max-width: min(78%, 520px);
  align-self: flex-start;
  padding: 9px 13px;
  border-radius: 18px 18px 18px 6px;
  background: #fff;
  box-shadow: var(--shadow-1);
  word-wrap: break-word;
}
.bubble p { white-space: pre-wrap; line-height: 1.5; font-size: 14.5px; }
.bubble--me {
  align-self: flex-end;
  background: var(--grad-brand);
  color: #fff;
  border-radius: 18px 18px 6px 18px;
}
.bubble.is-grouped { border-top-left-radius: 8px; }
.bubble--me.is-grouped { border-top-right-radius: 8px; }
.bubble__time { display: block; margin-top: 3px; font-size: 10.5px; opacity: .6; text-align: right; }

.chat__bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px calc(10px + var(--safe-b));
  background: #fff;
  border-top: 1px solid var(--line);
}
.chat__input {
  flex: 1;
  min-height: 44px;
  max-height: 120px;
  padding: 11px 14px;
  border-radius: 22px;
  border: 1.5px solid var(--line);
  resize: none;
  line-height: 1.4;
}
.chat__input:focus { outline: none; border-color: var(--blue); }
.chat__send {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad-brand);
  color: #fff;
  transition: opacity .15s;
}
.chat__send:disabled { opacity: .4; }
.chat__send svg { width: 20px; height: 20px; margin-left: -2px; }

/* ══ Profil ═══════════════════════════════════════════════════════════ */

.me {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.me__photo { position: relative; flex: none; }
.me__img, .me__photo .img-ph {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow-2);
}
.me__edit {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad-brand);
  color: #fff;
  border: 2.5px solid var(--bg);
}
.me__edit svg { width: 15px; height: 15px; }
.me__id { flex: 1; min-width: 200px; }
.me__id h1 { display: flex; align-items: center; gap: 8px; font-size: 22px; }
.me__place { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.me__chips { margin-top: 10px; }

.status { display: flex; align-items: center; gap: 12px; border-left: 3px solid transparent; }
.status--ok { border-left-color: var(--green); }
.status--wait { border-left-color: var(--amber); }
.status--ko { border-left-color: var(--red); }
.status .ico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none; }
.status div { flex: 1; }
.status b { font-size: 15px; }
.status p { font-size: 13px; color: var(--muted); }

.plan__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.plan__head .ico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none; }
.plan__head b { font-size: 15.5px; }
.plan__head p { font-size: 13px; color: var(--muted); }
.plan__gauge { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin-bottom: 10px; }
.plan__gauge span { display: block; height: 100%; border-radius: 4px; background: var(--grad-green); }
.plan__count { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.plan__count b { font-size: 20px; color: var(--dark); }
.plan--on { border: 1.5px solid rgba(34,160,107,.3); }
.plan--admin { background: linear-gradient(135deg, rgba(233,30,140,.06), rgba(40,120,200,.06)); }

.setting {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 0;
  text-align: left;
  color: inherit;
  border-top: 1px solid var(--line);
}
.setting:first-of-type { border-top: none; }
.setting--link { cursor: pointer; border-radius: var(--r-sm); }
.setting--link:hover { background: var(--bg); }
.setting .ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.setting > div { flex: 1; }
.setting b { font-size: 14.5px; display: block; }
.setting p { font-size: 12.5px; color: var(--muted); }
.setting > svg { width: 18px; height: 18px; color: var(--muted-light); }

/* ══ Abonnement ═══════════════════════════════════════════════════════ */

.plans {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.plancard {
  position: relative;
  background: #fff;
  border-radius: var(--r-lg);
  padding: 22px 18px 18px;
  box-shadow: var(--shadow-1);
  border: 1.5px solid transparent;
  display: flex;
  flex-direction: column;
}
.plancard--best { border-color: rgba(233,30,140,.4); box-shadow: var(--shadow-2); }
.plancard__flag {
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--grad-pink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.plancard__flag svg { width: 12px; height: 12px; }
.plancard h3 { font-size: 17px; margin-bottom: 6px; }
.plancard__price { font-size: 26px; font-weight: 800; color: var(--blue); }
.plancard__unit { font-size: 12.5px; color: var(--muted-light); margin-bottom: 14px; }
.plancard__list { display: grid; gap: 8px; margin-bottom: 18px; flex: 1; }
.plancard__list li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--muted); }
.plancard__list svg { width: 15px; height: 15px; color: var(--green); flex: none; margin-top: 2px; }

.carry { display: flex; align-items: center; gap: 12px; }
.carry .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.carry b { font-size: 14.5px; }
.carry p { font-size: 13px; color: var(--muted); }

.bullets { display: grid; gap: 14px; }
.bullets li { display: flex; gap: 12px; align-items: flex-start; }
.bullets > li > svg { width: 20px; height: 20px; color: var(--pink); flex: none; margin-top: 2px; }
.bullets b { font-size: 14.5px; }
.bullets p { font-size: 13.5px; color: var(--muted); }

/* ══ Notifications ════════════════════════════════════════════════════ */

.notif {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  border-left: 3px solid transparent;
}
.notif.is-unread { border-left-color: var(--pink); background: #FFF9FC; }
.notif .ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.notif__body { flex: 1; min-width: 0; }
.notif__body b { font-size: 14.5px; }
.notif__body p { font-size: 13.5px; color: var(--muted); }
.notif__time { font-size: 11.5px; color: var(--muted-light); }
.notif__del { width: 34px; height: 34px; color: var(--muted-light); }
.notif__del svg { width: 17px; height: 17px; }

/* ══ Administration ═══════════════════════════════════════════════════ */

.verif-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.vcard__head { margin-bottom: 12px; }
.vcard__head b { display: block; font-size: 16px; }
.vcard__shots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vcard__shots figure { margin: 0; }
.vcard__img, .vcard__shots .img-ph {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--r-md);
}
.vcard__shots figcaption {
  text-align: center;
  font-size: 11.5px;
  color: var(--muted-light);
  margin-top: 4px;
  font-weight: 600;
}
.vcard__thumbs { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.vcard__thumb, .vcard__thumbs .img-ph {
  width: 54px; height: 70px;
  object-fit: cover;
  border-radius: var(--r-sm);
}
.vcard__bio {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vcard__actions { display: flex; gap: 8px; margin-top: 14px; }
.vcard__actions .btn { flex: 1; }

.padmin__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.padmin__head b { font-size: 16px; }

.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch span {
  width: 42px; height: 24px;
  border-radius: 12px;
  background: #CBD3DD;
  position: relative;
  transition: background .18s;
}
.switch span::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .18s;
}
.switch input:checked + span { background: var(--green); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--muted); }

/* ══ Filtres ══════════════════════════════════════════════════════════ */

.range__value { font-size: 15px; margin-bottom: 12px; }
.range__value b { color: var(--blue); font-size: 17px; }
.range__row { display: grid; gap: 5px; margin-bottom: 12px; }
.range__row span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.filters__actions { display: flex; gap: 10px; margin-top: 18px; }
.filters__actions .btn { flex: 1; }

/* ══ Panneau du numéro ════════════════════════════════════════════════ */

.phonebox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 4px;
  padding: 18px;
  border-radius: var(--r-lg);
  background: var(--bg);
  color: var(--muted);
}
.phonebox svg { width: 22px; height: 22px; }
.phonebox__value { font-size: 22px; font-weight: 800; letter-spacing: .06em; }
.phonebox--on { background: var(--green-soft); color: var(--green); }

/* ══ Erreurs ══════════════════════════════════════════════════════════ */

.errorpage {
  min-height: 70vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  text-align: center;
}
.errorpage h1 { font-size: 24px; }
.errorpage p { color: var(--muted); }
.errorpage .ico { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; }

/* ══ Consentement ═════════════════════════════════════════════════════ */

/* Case obligatoire avant tout envoi de photos en vérification. Elle est
   volontairement encadrée et non noyée dans le formulaire : c'est le dernier
   point de décision avant que des données personnelles ne quittent l'appareil. */
.consent {
  margin-top: 20px;
  padding: 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  transition: border-color .15s ease, background .15s ease;
}
.consent--on { border-color: var(--blue); background: var(--blue-soft); }

.consent__row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
}
/* La case native est rendue invisible plutôt que supprimée : elle reste
   focusable au clavier et pilote le carré dessiné juste à côté. Elle est
   calée sur ce carré, et non laissée en position libre — étalée ailleurs, elle
   passerait par-dessus le lien vers la politique et le rendrait incliquable. */
.consent__row input {
  position: absolute;
  left: 0;
  top: 1px;
  opacity: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  cursor: pointer;
}
.consent__mark {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1.5px solid var(--muted-light);
  border-radius: 6px;
  background: var(--card);
  display: grid;
  place-items: center;
  color: transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.consent__mark svg { width: 15px; height: 15px; stroke-width: 3; }
.consent--on .consent__mark { background: var(--blue); border-color: var(--blue); color: #fff; }
.consent__row input:focus-visible ~ .consent__mark { outline: 2px solid var(--blue); outline-offset: 2px; }

.consent__text { font-size: 13.5px; line-height: 1.55; color: var(--dark); }
.consent__text a { color: var(--blue); font-weight: 600; text-decoration: underline; }

.consent__hint {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 10px 0 0 33px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.consent__hint svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }

/* ══ Pages légales ════════════════════════════════════════════════════ */

.legal { min-height: 100vh; background: var(--bg); padding-bottom: 40px; }

.legal__head {
  background: var(--grad-brand);
  color: #fff;
  padding: 28px var(--pad, 16px) 34px;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 10px;
}
/* Le logo garde ses couleurs sur la pastille claire : le passer en blanc le
   réduit à un rectangle plein, son cœur étant déjà blanc (même raison que sur
   les écrans d'authentification). */
.legal__logo img {
  display: block;
  padding: 8px 12px;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
.legal__head h1 { font-size: clamp(22px, 4vw, 30px); font-weight: 800; }
.legal__date { font-size: 12.5px; opacity: .85; }

.legal__body { margin-top: -18px; }

.legal__lead {
  margin-bottom: 16px;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-1);
  color: var(--muted);
  line-height: 1.65;
}

.legal__card { line-height: 1.65; }
.legal__card p { color: var(--muted); }
.legal__card p + p { margin-top: 10px; }
.legal__card h3 {
  margin: 18px 0 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--dark);
}
.legal__card h3:first-of-type { margin-top: 14px; }

.legal__list { margin: 8px 0 0; padding-left: 18px; }
.legal__list li { margin-bottom: 9px; color: var(--muted); }
.legal__list li::marker { color: var(--blue); }
.legal__list b { color: var(--dark); font-weight: 650; }

.legal__card a { color: var(--blue); text-decoration: underline; overflow-wrap: anywhere; }

.legal__foot {
  margin-top: 22px;
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}