/* Les polices sont déclarées dans assets/css/polices.css et servies par
   ce site. L'@import vers fonts.googleapis.com qui se trouvait ici
   envoyait l'adresse IP de chaque visiteur à Google avant tout
   consentement. Ne pas le remettre. */

:root {
  --lueur-navy: #132a44;
  --lueur-navy-deep: #0b1d30;
  --lueur-coral: #e66f68;
  --lueur-coral-dark: #b9413b;
  --lueur-coral-soft: #f7dfdc;
  --lueur-violet: #7559c7;
  --lueur-gold: #c8a55a;
  --lueur-ivory: #fbf9f5;
  --lueur-mist: #f2f4f6;
  --lueur-white: #fff;
  --lueur-ink: #26313c;
  --lueur-muted: #66717d;
  --lueur-line: #dce2e8;
  --lueur-success: #237b62;
  --lueur-danger: #a52828;
  --lueur-shadow-sm: 0 6px 20px rgba(11, 29, 48, .07);
  --lueur-shadow-md: 0 18px 48px rgba(11, 29, 48, .12);
  --lueur-radius-sm: .75rem;
  --lueur-radius-md: 1.125rem;
  --lueur-radius-lg: 1.75rem;
  --lueur-max: 74rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
body { margin: 0; background: var(--lueur-ivory); color: var(--lueur-ink); font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.65; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--lueur-navy); text-underline-offset: .2em; }
a:hover { color: var(--lueur-coral-dark); }
h1, h2, h3, h4 { color: var(--lueur-navy); font-family: "DM Serif Display", Georgia, serif; font-weight: 400; line-height: 1.12; text-wrap: balance; }
h1 { font-size: clamp(2.65rem, 7vw, 5.6rem); letter-spacing: -.035em; }
h2 { font-size: clamp(2rem, 4vw, 3.45rem); letter-spacing: -.025em; }
h3 { font-size: clamp(1.25rem, 2vw, 1.65rem); }
p { margin-block: 0 1rem; }
:focus-visible { outline: 3px solid var(--lueur-violet); outline-offset: 3px; border-radius: .2rem; }
.container { width: min(calc(100% - 2rem), var(--lueur-max)); margin-inline: auto; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.screen-reader-text:focus { position: fixed !important; inset: 1rem auto auto 1rem; z-index: 9999; width: auto; height: auto; clip: auto; padding: .75rem 1rem; background: #fff; color: var(--lueur-navy); box-shadow: var(--lueur-shadow-md); }
.lueur-icon { width: 1.25em; height: 1.25em; flex: 0 0 auto; }
.eyebrow { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 1rem; color: var(--lueur-coral-dark); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow--light { color: #ffd6d1; }
.button { display: inline-flex; min-height: 2.875rem; align-items: center; justify-content: center; gap: .55rem; padding: .7rem 1.15rem; border: 1px solid transparent; border-radius: 999px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; }
.button:hover { transform: translateY(-1px); }
.button--primary { background: var(--lueur-navy); color: var(--lueur-white); box-shadow: 0 8px 20px rgba(19,42,68,.18); }
.button--primary:hover { background: var(--lueur-navy-deep); color: #fff; }
.button--secondary { border-color: var(--lueur-navy); background: transparent; color: var(--lueur-navy); }
.button--secondary:hover { background: var(--lueur-navy); color: #fff; }
.button--ghost { color: var(--lueur-navy); }
.button--light { background: #fff; color: var(--lueur-navy); }
.button--coral { background: var(--lueur-coral); color: var(--lueur-navy-deep); }
.button--large { min-height: 3.4rem; padding-inline: 1.45rem; }
.button--full { width: 100%; }
.button-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.icon-button { display: inline-grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 1px solid var(--lueur-line); border-radius: 50%; background: #fff; color: var(--lueur-navy); cursor: pointer; }
.chip-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { display: inline-flex; padding: .3rem .65rem; border-radius: 999px; background: var(--lueur-mist); color: var(--lueur-navy); font-size: .78rem; font-weight: 600; }
.badge { display: inline-flex; padding: .3rem .65rem; border-radius: 999px; background: var(--lueur-coral-soft); color: var(--lueur-coral-dark); font-size: .75rem; font-weight: 700; }

/*
 * Les champs de saisie — et seulement eux.
 *
 * Cette règle visait « input » sans distinction, donc aussi les cases à
 * cocher et les boutons radio. Une case à cocher héritait ainsi d'une
 * largeur de 100 %, d'une hauteur minimale de 3,25 rem et d'un rayon de
 * bordure : elle se rendait en grand carré vide, aussi large que son
 * conteneur, à côté de son libellé. C'est ce qu'on voyait dans le bandeau
 * de consentement, et partout ailleurs où le site pose une case.
 *
 * :not() plutôt qu'une remise à zéro plus bas : une correction posée après
 * coup se réapplique à chaque nouvelle règle générique, et il faut s'en
 * souvenir. Ici, la règle ne les atteint simplement pas.
 */
input:not([type="checkbox"]):not([type="radio"]), select, textarea { width: 100%; min-height: 3rem; padding: .7rem .85rem; border: 1px solid #aab4bf; border-radius: .7rem; background: #fff; color: var(--lueur-ink); font: inherit; }
textarea { min-height: 8rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--lueur-violet); box-shadow: 0 0 0 3px rgba(117,89,199,.18); outline: 0; }
label { display: block; margin-bottom: .35rem; color: var(--lueur-navy); font-weight: 700; }
fieldset { padding: 1.25rem; border: 1px solid var(--lueur-line); border-radius: var(--lueur-radius-md); }
legend { padding-inline: .4rem; color: var(--lueur-navy); font-weight: 700; }
.form-row { margin-bottom: 1rem; }
.form-help { color: var(--lueur-muted); font-size: .875rem; }
.notice { padding: .9rem 1rem; border-inline-start: 4px solid var(--lueur-violet); border-radius: .5rem; background: #f1edff; }
.notice--success { border-color: var(--lueur-success); background: #eaf8f3; }
.notice--error { border-color: var(--lueur-danger); background: #fff0f0; }
.progress { height: .5rem; overflow: hidden; border-radius: 999px; background: var(--lueur-line); }
.progress > span { display: block; width: var(--progress, 33%); height: 100%; background: var(--lueur-coral); }
.empty-state { max-width: 34rem; margin: 4rem auto; padding: 2rem; text-align: center; }
.empty-state__icon { display: grid; width: 4rem; height: 4rem; place-items: center; margin: 0 auto 1rem; border-radius: 50%; background: var(--lueur-coral-soft); color: var(--lueur-coral-dark); font-size: 1.5rem; }

.profile-grid { display: grid; gap: 1rem; }
.profile-card { overflow: hidden; border: 1px solid rgba(19,42,68,.09); border-radius: var(--lueur-radius-md); background: #fff; box-shadow: var(--lueur-shadow-sm); }
.profile-card__media { position: relative; aspect-ratio: 4 / 4.25; overflow: hidden; background: linear-gradient(145deg, var(--lueur-coral-soft), #d7e8ee); }
.profile-card__media img { width: 100%; height: 100%; object-fit: cover; }
.profile-card__placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: rgba(19,42,68,.4); font-size: 5rem; }
.compatibility { position: absolute; inset: .75rem auto auto .75rem; padding: .35rem .65rem; border-radius: 999px; background: rgba(11,29,48,.88); color: #fff; font-size: .75rem; font-weight: 700; backdrop-filter: blur(5px); }
.profile-card__favorite { position: absolute; inset: .65rem .65rem auto auto; }
.profile-card__body { padding: 1.1rem; }
.profile-card__title-row { display: flex; align-items: center; gap: .5rem; }
.profile-card__title-row h3 { margin: 0; }
.verified { display: inline-grid; width: 1.4rem; height: 1.4rem; place-items: center; border-radius: 50%; background: var(--lueur-violet); color: #fff; font-size: .8rem; }
.profile-card__location { display: flex; align-items: center; gap: .35rem; margin: .35rem 0 .7rem; color: var(--lueur-muted); font-size: .875rem; }
.profile-card .chip-list { margin-bottom: 1rem; }
.online-dot { width: .5rem; height: .5rem; margin-left: .35rem; border-radius: 50%; background: #25a47c; }

@media (min-width: 42rem) { .profile-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 64rem) { .profile-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* Visual direction v2: energetic, photo-led dating experience. */
:root {
  --lueur-violet: #9557e8;
  --lueur-violet-dark: #7338c8;
  --lueur-lilac: #f6ecff;
  --lueur-lime: #80d43a;
  --lueur-ink: #22202a;
  --lueur-radius-sm: .7rem;
  --lueur-radius-md: 1rem;
  --lueur-radius-lg: 1.5rem;
  --lueur-shadow-sm: 0 8px 24px rgba(78, 39, 122, .08);
  --lueur-shadow-md: 0 22px 60px rgba(78, 39, 122, .16);
}

body { background: #fff; }
h1, h2, h3, h4 { color: var(--lueur-ink); font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 800; letter-spacing: -.045em; }
h1 { font-size: clamp(3rem, 6vw, 5.35rem); line-height: 1.02; }
h2 { font-size: clamp(2.15rem, 4vw, 3.75rem); line-height: 1.08; }
h3 { letter-spacing: -.025em; }
a { color: var(--lueur-violet-dark); }
:focus-visible { outline-color: var(--lueur-violet); }
.eyebrow { color: var(--lueur-violet-dark); }
.button { min-height: 3rem; border-radius: .72rem; }
.button--primary { background: linear-gradient(135deg, var(--lueur-violet), var(--lueur-violet-dark)); box-shadow: 0 10px 26px rgba(149,87,232,.28); }
.button--primary:hover { background: var(--lueur-violet-dark); }
.button--secondary { border-color: var(--lueur-violet); color: var(--lueur-violet-dark); }
.button--secondary:hover { background: var(--lueur-violet); }
.badge { background: var(--lueur-lilac); color: var(--lueur-violet-dark); }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: 3.25rem; border-color: #d7c5eb; border-radius: .75rem; }
input:focus, select:focus, textarea:focus { border-color: var(--lueur-violet); }

.profile-card { border-color: rgba(117,56,200,.12); border-radius: 1.1rem; box-shadow: 0 10px 35px rgba(67,36,92,.08); transition: transform .2s ease, box-shadow .2s ease; }
.profile-card:hover { transform: translateY(-5px); box-shadow: 0 20px 46px rgba(67,36,92,.15); }
.profile-card__media { aspect-ratio: 1 / 1.06; background: var(--lueur-lilac); }
/*
 * La planche des quatre portraits. Même histoire que le visuel d'accueil :
 * 2,3 Mo de PNG pour une photographie, contre 137 Ko en WebP.
 *
 * Deux déclarations, dans cet ordre. Un navigateur qui ignore image-set()
 * ne comprend pas la seconde, la jette, et garde le JPEG de la première —
 * c'est le mécanisme normal de la cascade, et c'est le seul repli fiable
 * pour une image de fond, où <picture> n'existe pas.
 */
.profile-card__portrait { width: 100%; height: 100%; background-image: url('../images/member-portraits-v2.jpg'); background-repeat: no-repeat; background-size: 200% 200%; }
.profile-card__portrait { background-image: image-set(url('../images/member-portraits-v2.webp') type('image/webp'), url('../images/member-portraits-v2.jpg') type('image/jpeg')); }
.profile-card__portrait--1 { background-position: 0 0; }
.profile-card__portrait--2 { background-position: 100% 0; }
.profile-card__portrait--3 { background-position: 0 100%; }
.profile-card__portrait--4 { background-position: 100% 100%; }
.compatibility { background: rgba(115,56,200,.92); }
.verified { background: var(--lueur-violet); }
.profile-card__body { padding: 1rem 1.1rem 1.15rem; }
.profile-card__body > p:not(.profile-card__location) { display: none; }
.profile-card .chip-list { display: none; }
.profile-card__title-row h3 { font-size: 1.12rem; }

@media (min-width: 64rem) { .profile-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }