/* /rencontres/ — feuille de la landing à qualification progressive.
   Reprise TELLE QUELLE de la variation v3 du kit : mêmes couleurs, mêmes
   espacements, mêmes animations, mêmes points de rupture. Style « ember » :
   graphite quasi-noir, un seul accent chaud, typographie système.
   Propriétés logiques partout — la page sert aussi he/ar en RTL.
   Rien n'a été redessiné ici ; la seule chose qui change dans ce portage,
   ce sont les textes et le vivier de photos. */

:root {
    /* Thème par défaut — 04/09/2026, sur la demande de Fabien : « fond noir, un beau
       bleu pour l'accent ». Noir profond, bleu électrique (le code « confiance /
       vraie app » des sites de rencontre relation), or sur les chiffres, vert sur
       les signaux d'activité. Les deux autres thèmes (?theme=red, ?theme=warm)
       ne redéfinissent que ces jetons : le reste de la feuille est commun. */
    --v3-bg: #050608;
    --v3-bg-2: #0b0d12;
    --v3-card: #12151c;
    --v3-card-2: #191d26;
    --v3-line: rgba(255, 255, 255, .09);
    --v3-line-2: rgba(255, 255, 255, .17);
    --v3-text: #f6f7fb;
    --v3-muted: #a7adbd;
    --v3-dim: #7a8090;
    --v3-accent: #2f7bff;
    --v3-accent-rgb: 47, 123, 255;
    --v3-accent-soft: #7ab2ff;
    --v3-accent-deep: #1a4fd1;
    --v3-deep-rgb: 26, 79, 209;
    --v3-gold: #ffc26b;
    --v3-online: #2ee88a;
    --v3-grad: linear-gradient(135deg, #5a95ff 0%, #2f7bff 55%, #1a4fd1 100%);
    --v3-radius: 14px;
    --v3-shadow: 0 20px 60px rgba(0, 0, 0, .6);
    --v3-glow: 0 14px 38px -10px rgba(var(--v3-accent-rgb), .66);
    --v3-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Noto Sans", "Noto Sans Hebrew", "Noto Sans Arabic", sans-serif;
    /* Barre d'outils navigateur qui mange le bas de l'écran (Safari iOS). */
    --v3-vv-bottom: 0px;
}

/* Noir + rouge cramoisi : le rouge ÉROTIQUE — sang, cuir, backroom — pas
   l'orangé « alerte ». Demande de Fabien (04/09) : « red plus érotique, gay,
   fetish… pas ce rouge orangé ». Aucune composante orange dans le dégradé ;
   le bas de gamme tire vers le bordeaux profond, jamais vers le rose. */
html[data-theme="red"] {
    --v3-bg: #060506;
    --v3-bg-2: #0c0a0b;
    --v3-card: #121012;
    --v3-card-2: #1a1719;
    --v3-line: rgba(255, 255, 255, .08);
    --v3-line-2: rgba(255, 255, 255, .16);
    --v3-text: #f8f2f3;
    --v3-muted: #b09da1;
    --v3-dim: #7f6d71;
    --v3-accent: #e5132e;
    --v3-accent-rgb: 229, 19, 46;
    --v3-accent-soft: #ff2f4a;
    --v3-accent-deep: #8a0c1e;
    --v3-deep-rgb: 138, 12, 30;
    --v3-gold: #f2c14e;
    --v3-grad: linear-gradient(135deg, #ff2740 0%, #c40f2b 55%, #7a0a1c 100%);
    --v3-glow: 0 14px 40px -10px rgba(229, 19, 46, .7);
}

/* Noir chaud bordeaux + corail : la première proposition de la refonte, gardée pour comparer. */
html[data-theme="warm"] {
    --v3-bg: #0f0507;
    --v3-bg-2: #170a0e;
    --v3-card: #1e1014;
    --v3-card-2: #27151b;
    --v3-text: #fbf6f7;
    --v3-muted: #b6a3a9;
    --v3-dim: #85747a;
    --v3-accent: #ff4d3d;
    --v3-accent-rgb: 255, 77, 61;
    --v3-accent-soft: #ff8f6a;
    --v3-accent-deep: #e0163c;
    --v3-deep-rgb: 224, 22, 60;
    --v3-grad: linear-gradient(135deg, #ff6a3d 0%, #ff3b3b 55%, #e0163c 100%);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    background: var(--v3-bg);
    color-scheme: dark;
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    margin: 0;
    overflow-x: hidden;
    background:
        radial-gradient(ellipse 70% 42% at 72% -6%, rgba(var(--v3-accent-rgb), .22), transparent 70%),
        radial-gradient(ellipse 60% 50% at -5% 35%, rgba(var(--v3-deep-rgb), .10), transparent 70%),
        var(--v3-bg);
    color: var(--v3-text);
    font: 400 16px/1.5 var(--v3-font);
    -webkit-font-smoothing: antialiased;
}

button,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

h1, h2, h3 {
    margin: 0;
    letter-spacing: -.018em;
    line-height: 1.12;
    text-wrap: balance;
}

.v3-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.v3-skip {
    position: absolute;
    inset-inline-start: -9999px;
    top: 0;
}

.v3-skip:focus {
    inset-inline-start: 8px;
    z-index: 200;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--v3-accent);
    color: #fff;
    font-weight: 700;
}

/* ---------- Barre supérieure ---------- */

.v3-bar {
    position: sticky;
    z-index: 60;
    top: 0;
    display: flex;
    width: 100%;
    min-height: 56px;
    padding: 8px clamp(14px, 3vw, 26px);
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--v3-line);
    background: color-mix(in srgb, var(--v3-bg) 86%, transparent);
    backdrop-filter: blur(14px);
}

.v3-brand {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.v3-brand__mark {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 10px;
    background: var(--v3-grad);
    box-shadow: var(--v3-glow);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .01em;
}

.v3-brand__name {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.v3-geo {
    display: inline-flex;
    max-width: 46%;
    padding: 6px 11px;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    border: 1px solid var(--v3-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    color: var(--v3-muted);
    font-size: 12.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v3-geo i {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--v3-online);
    box-shadow: 0 0 0 3px rgba(52, 209, 122, .16);
}

/* ---------- Ossature ---------- */

.v3-main {
    width: min(100%, 1120px);
    margin: 0 auto;
    padding: 0 clamp(14px, 3vw, 26px) 40px;
}

.v3-eyebrow {
    display: inline-flex;
    margin: 0 0 12px;
    padding: 6px 12px;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(var(--v3-accent-rgb), .3);
    border-radius: 999px;
    background: rgba(var(--v3-accent-rgb), .1);
    color: var(--v3-accent-soft);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .01em;
}

.v3-eyebrow i {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--v3-online);
    box-shadow: 0 0 0 3px rgba(52, 209, 122, .18);
}

.v3-eyebrow--plain {
    border-color: var(--v3-line);
    background: rgba(255, 255, 255, .04);
    color: var(--v3-muted);
}

.v3-lead {
    max-width: 58ch;
    margin: 0;
    color: var(--v3-muted);
    font-size: clamp(15.5px, 1.25vw, 17px);
    line-height: 1.5;
}

.v3-reassure {
    margin: 10px 0 0;
    color: var(--v3-dim);
    font-size: 12.5px;
    font-weight: 500;
}

/* ---------- CTA ---------- */

.v3-cta {
    display: inline-flex;
    min-height: 56px;
    padding: 0 24px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 12px;
    background: var(--v3-grad);
    box-shadow: var(--v3-glow);
    color: #fff;
    cursor: pointer;
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -.005em;
    text-align: center;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.v3-cta:hover,
.v3-cta:focus-visible {
    box-shadow: 0 16px 42px -10px rgba(var(--v3-deep-rgb), .78);
    outline: none;
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.v3-cta:active {
    transform: translateY(0);
}

.v3-cta--wide {
    display: flex;
    width: 100%;
}

.v3-arrow {
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
}

[dir="rtl"] .v3-arrow {
    display: inline-block;
    transform: scaleX(-1);
}

/* ---------- Hero ---------- */

.v3-hero {
    display: grid;
    padding: clamp(20px, 3vw, 42px) 0 clamp(24px, 3vw, 44px);
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    grid-template-areas:
        "lead   mosaic"
        "proof  mosaic";
    align-items: start;
    gap: 18px clamp(26px, 4vw, 54px);
}

.v3-hero__lead {
    grid-area: lead;
}

.v3-hero__proof {
    grid-area: proof;
}

.v3-hero h1 {
    max-width: 16ch;
    font-size: clamp(33px, 4.3vw, 58px);
    font-weight: 900;
    line-height: 1.06;
}

/* La ville est l'argument : elle porte le dégradé, le reste reste blanc. */
.v3-hero h1 em {
    font-style: normal;
    background: linear-gradient(120deg, var(--v3-accent-soft), var(--v3-accent) 55%, var(--v3-gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.v3-hero .v3-eyebrow {
    display: inline-flex;
    padding: 6px 12px 6px 9px;
    border: 1px solid rgba(var(--v3-accent-rgb), .35);
    border-radius: 999px;
    background: rgba(var(--v3-accent-rgb), .12);
    text-transform: none;
    letter-spacing: 0;
    font-size: 13.5px;
    font-weight: 700;
}

.v3-hero .v3-eyebrow i {
    background: var(--v3-online);
    box-shadow: 0 0 0 0 rgba(46, 232, 138, .6);
    animation: v3-pulse 2.2s ease-in-out infinite;
}

.v3-hero__proof .v3-lead {
    margin-bottom: 18px;
}

.v3-stats {
    display: grid;
    margin: 0 0 20px;
    padding: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    list-style: none;
}

.v3-stats li {
    display: flex;
    min-width: 0;
    padding: 12px 10px 11px;
    flex-direction: column;
    gap: 3px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
}

.v3-stats b {
    color: var(--v3-gold);
    font-size: clamp(24px, 2.4vw, 30px);
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1;
}

.v3-stats span {
    color: var(--v3-muted);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
}

/* ---------- Mosaïque du hero ---------- */

.v3-mosaic {
    display: grid;
    aspect-ratio: 1 / .96;
    grid-area: mosaic;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: 1.32fr 1fr;
    gap: 8px;
}

.v3-mosaic__tile {
    position: relative;
    display: block;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--v3-line);
    border-radius: 12px;
    background: var(--v3-card);
    cursor: pointer;
    text-align: start;
    transition: transform .18s ease, border-color .18s ease;
}

.v3-mosaic__tile:nth-child(1) { grid-column: span 4; }
.v3-mosaic__tile:nth-child(2) { grid-column: span 2; }
.v3-mosaic__tile:nth-child(3) { grid-column: span 2; }
.v3-mosaic__tile:nth-child(4) { grid-column: span 2; }
.v3-mosaic__tile:nth-child(5) { grid-column: span 2; }

.v3-mosaic__tile:hover,
.v3-mosaic__tile:focus-visible {
    border-color: rgba(var(--v3-accent-rgb), .55);
    outline: none;
    transform: translateY(-2px);
}

.v3-mosaic__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 32%;
}

.v3-mosaic__tile::after {
    position: absolute;
    inset: 42% 0 0;
    background: linear-gradient(transparent, rgba(6, 6, 9, .92));
    content: "";
    pointer-events: none;
}

.v3-mosaic__meta {
    position: absolute;
    z-index: 2;
    inset-inline: 9px;
    bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.v3-mosaic__meta b {
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v3-mosaic__meta em {
    align-self: flex-start;
    max-width: 100%;
    padding: 2px 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(var(--v3-accent-rgb), .2);
    color: var(--v3-accent-soft);
    font-size: 10.5px;
    font-style: normal;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v3-dot {
    position: absolute;
    z-index: 2;
    top: 9px;
    inset-inline-end: 9px;
    width: 9px;
    height: 9px;
    border: 2px solid rgba(6, 6, 9, .75);
    border-radius: 50%;
    background: var(--v3-online);
    animation: v3-pulse 2.6s ease-in-out infinite;
}

@keyframes v3-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52, 209, 122, .5); }
    55%      { box-shadow: 0 0 0 6px rgba(52, 209, 122, 0); }
}

/* ---------- Profils discrets (floutés) ---------- */

.v3-mosaic__tile.is-discreet img {
    filter: blur(14px) brightness(.62) saturate(.7);
    transform: scale(1.14);
}

.v3-discreet {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: grid;
    padding: 10px;
    place-content: center;
    justify-items: center;
    gap: 5px;
    text-align: center;
}

.v3-discreet i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(var(--v3-accent-rgb), .45);
    border-radius: 50%;
    background: rgba(var(--v3-accent-rgb), .16);
    font-size: 15px;
    font-style: normal;
}

.v3-discreet b {
    font-size: 13px;
    font-weight: 800;
}

.v3-discreet small,
.v3-card__lock small {
    color: var(--v3-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
}

.v3-card__lock small {
    max-width: 14ch;
}

/* ---------- Quiz ---------- */

.v3-quiz {
    padding: clamp(20px, 2.6vw, 32px);
    border: 1px solid var(--v3-line);
    border-radius: 18px;
    background: linear-gradient(165deg, var(--v3-card-2), var(--v3-card) 70%);
    box-shadow: var(--v3-shadow);
    scroll-margin-top: 72px;
}

.v3-quiz h2 {
    max-width: 22ch;
    font-size: clamp(21px, 2.2vw, 28px);
    font-weight: 800;
}

.v3-progress {
    height: 4px;
    margin: 20px 0 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
}

.v3-progress i {
    display: block;
    width: 33.33%;
    height: 100%;
    border-radius: 999px;
    background: var(--v3-grad);
    transition: width .35s cubic-bezier(.32, .72, .33, 1);
}

.v3-quiz__step {
    margin: 0 0 18px;
    color: var(--v3-dim);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.v3-quiz__stage {
    position: relative;
}

.v3-step {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.v3-step[hidden] {
    display: none;
}

.v3-step.is-active {
    animation: v3-slide .3s cubic-bezier(.32, .72, .33, 1) both;
}

@keyframes v3-slide {
    from { opacity: 0; transform: translateY(9px); }
    to   { opacity: 1; transform: none; }
}

.v3-step legend {
    display: block;
    margin: 0 0 14px;
    padding: 0;
    font-size: clamp(19px, 1.9vw, 23px);
    font-weight: 700;
    letter-spacing: -.015em;
}

.v3-choices {
    display: grid;
    gap: 9px;
}

.v3-choices--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v3-choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.v3-choices button {
    display: flex;
    min-width: 0;
    min-height: 62px;
    padding: 10px 12px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--v3-line-2);
    border-radius: 12px;
    background: rgba(255, 255, 255, .035);
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.005em;
    line-height: 1.2;
    text-align: center;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.v3-choices button:hover,
.v3-choices button:focus-visible {
    border-color: rgba(var(--v3-accent-rgb), .6);
    background: rgba(var(--v3-accent-rgb), .1);
    outline: none;
    transform: translateY(-1px);
}

.v3-choices button.is-picked {
    border-color: var(--v3-accent);
    background: rgba(var(--v3-accent-rgb), .18);
    color: #fff;
}

/* ---------- Résultats ---------- */

.v3-results {
    padding-top: clamp(30px, 4vw, 52px);
    scroll-margin-top: 66px;
}

.v3-results[hidden] {
    display: none;
}

.v3-results__head {
    margin-bottom: 18px;
}

.v3-results__head h2 {
    margin: 0 0 6px;
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 800;
}

.v3-edit {
    margin-top: 12px;
    padding: 8px 14px;
    border: 1px solid var(--v3-line-2);
    border-radius: 999px;
    background: none;
    color: var(--v3-muted);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

.v3-edit:hover,
.v3-edit:focus-visible {
    border-color: var(--v3-accent);
    color: var(--v3-text);
    outline: none;
}

.v3-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.v3-card {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--v3-line);
    border-radius: 12px;
    background: var(--v3-card);
    cursor: pointer;
    text-align: start;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.v3-card:hover,
.v3-card:focus-visible {
    border-color: rgba(var(--v3-accent-rgb), .55);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .42);
    outline: none;
    transform: translateY(-3px);
}

.v3-card__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--v3-bg-2);
}

.v3-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 32%;
}

.v3-card__media::after {
    position: absolute;
    inset: 40% 0 0;
    background: linear-gradient(transparent, rgba(6, 6, 9, .93));
    content: "";
    pointer-events: none;
}

.v3-card__meta {
    position: absolute;
    z-index: 2;
    inset-inline: 10px;
    bottom: 9px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.v3-card__meta b {
    overflow: hidden;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v3-card__meta small {
    color: var(--v3-muted);
    font-size: 12px;
    font-weight: 600;
}

.v3-chip {
    align-self: flex-start;
    max-width: 100%;
    padding: 3px 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(var(--v3-accent-rgb), .2);
    color: var(--v3-accent-soft);
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v3-card__badge {
    position: absolute;
    z-index: 3;
    top: 9px;
    inset-inline-start: 9px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(14, 5, 7, .72);
    color: var(--v3-online);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .01em;
    backdrop-filter: blur(6px);
}

.v3-card__badge::before {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-inline-end: 5px;
    border-radius: 50%;
    background: currentColor;
    content: "";
    vertical-align: 1px;
}

.v3-card__badge.is-strong {
    color: var(--v3-gold);
}

.v3-card__go {
    display: inline-flex;
    align-self: flex-start;
    min-height: 30px;
    margin-top: 4px;
    padding: 0 12px;
    align-items: center;
    border-radius: 999px;
    background: var(--v3-grad);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
}

.v3-card--locked img {
    filter: blur(15px) brightness(.6) saturate(.7);
    transform: scale(1.16);
}

.v3-card__lock {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: grid;
    padding: 12px;
    place-content: center;
    justify-items: center;
    gap: 7px;
    text-align: center;
}

.v3-card__lock span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(var(--v3-accent-rgb), .4);
    border-radius: 50%;
    background: rgba(var(--v3-accent-rgb), .14);
    color: var(--v3-accent-soft);
    font-size: 15px;
}

.v3-card__lock b {
    font-size: 13px;
    font-weight: 700;
}

.v3-more {
    display: block;
    min-height: 52px;
    margin: 16px auto 0;
    padding: 0 26px;
    border: 1px solid var(--v3-line-2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .035);
    color: var(--v3-text);
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    transition: border-color .16s ease, background .16s ease;
}

.v3-more:hover,
.v3-more:focus-visible {
    border-color: var(--v3-accent);
    background: rgba(var(--v3-accent-rgb), .1);
    outline: none;
}

.v3-more[hidden] {
    display: none;
}

/* ---------- Objections ---------- */

.v3-objections {
    display: grid;
    margin-top: clamp(34px, 4.5vw, 60px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.v3-obj {
    padding: 20px;
    border: 1px solid var(--v3-line);
    border-radius: var(--v3-radius);
    background: var(--v3-card);
}

.v3-obj__mark {
    display: grid;
    width: 28px;
    height: 28px;
    margin-bottom: 12px;
    place-items: center;
    border-radius: 8px;
    background: rgba(52, 209, 122, .16);
    color: var(--v3-online);
    font-size: 15px;
    font-weight: 800;
}

.v3-obj b {
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.v3-obj p {
    margin: 0;
    color: var(--v3-muted);
    font-size: 14px;
    line-height: 1.5;
}

/* ---------- Bloc final ---------- */

.v3-final {
    margin-top: clamp(34px, 4.5vw, 60px);
    padding: clamp(26px, 3.4vw, 46px) clamp(20px, 3vw, 40px);
    border: 1px solid rgba(var(--v3-accent-rgb), .26);
    border-radius: 20px;
    background:
        radial-gradient(ellipse 80% 120% at 50% -20%, rgba(var(--v3-deep-rgb), .17), transparent 70%),
        var(--v3-card);
    text-align: center;
}

.v3-final__faces {
    display: flex;
    margin-bottom: 16px;
    justify-content: center;
}

.v3-final__faces img {
    width: 44px;
    height: 44px;
    border: 2px solid var(--v3-card);
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 30%;
}

.v3-final__faces img + img {
    margin-inline-start: -12px;
}

.v3-final h2 {
    margin-bottom: 8px;
    font-size: clamp(24px, 2.8vw, 36px);
    font-weight: 800;
}

.v3-final .v3-lead {
    margin: 0 auto 22px;
}

.v3-final .v3-cta {
    width: min(100%, 420px);
    margin: 0 auto;
}

/* ---------- Pied ---------- */

.v3-footer {
    margin-top: 34px;
    padding-top: 20px;
    border-top: 1px solid var(--v3-line);
    color: var(--v3-dim);
    font-size: 12.5px;
    line-height: 1.7;
    text-align: center;
}

.v3-footer__age {
    display: inline-block;
    margin-inline-end: 7px;
    padding: 2px 7px;
    border: 1px solid var(--v3-line-2);
    border-radius: 5px;
    font-weight: 800;
}

.v3-footer a {
    color: var(--v3-muted);
    text-decoration: underline;
}

/* ---------- Fiche de contact ---------- */

.v3-sheet[hidden] {
    display: none;
}

/* Le fond ne défile pas derrière la fiche ouverte. */
body.v3-locked {
    overflow: hidden;
}

.v3-sheet {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid;
    padding: 20px;
    place-items: center;
}

.v3-sheet__scrim {
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 8, .78);
    backdrop-filter: blur(6px);
}

.v3-sheet__card {
    position: relative;
    z-index: 1;
    width: min(100%, 470px);
    max-height: min(88vh, 780px);
    padding: 22px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--v3-line-2);
    border-radius: 18px;
    background: var(--v3-card);
    box-shadow: var(--v3-shadow);
    animation: v3-pop .26s cubic-bezier(.32, .72, .33, 1) both;
}

@keyframes v3-pop {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.v3-sheet__close {
    position: absolute;
    z-index: 2;
    top: 12px;
    inset-inline-end: 12px;
    width: 34px;
    height: 34px;
    border: 1px solid var(--v3-line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    color: var(--v3-muted);
    cursor: pointer;
    font-size: 19px;
    line-height: 1;
}

.v3-sheet__close:hover,
.v3-sheet__close:focus-visible {
    border-color: var(--v3-line-2);
    color: var(--v3-text);
    outline: none;
}

.v3-sheet__head {
    display: grid;
    margin-bottom: 14px;
    padding-inline-end: 40px;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
}

.v3-sheet__photo {
    display: block;
    width: 76px;
    height: 90px;
    overflow: hidden;
    border: 1px solid var(--v3-line);
    border-radius: 11px;
    background: var(--v3-bg-2);
}

.v3-sheet__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}

.v3-sheet__ident {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.v3-sheet__ident b {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.015em;
}

.v3-sheet__presence {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--v3-online);
    font-size: 12.5px;
    font-weight: 700;
}

.v3-sheet__presence::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.v3-sheet__presence.is-offline {
    color: var(--v3-dim);
}

.v3-sheet__sub {
    margin: 0 0 11px;
    color: var(--v3-muted);
    font-size: 14px;
}

.v3-openers {
    display: grid;
    margin-bottom: 11px;
    gap: 7px;
}

.v3-openers button {
    min-height: 48px;
    padding: 9px 14px;
    border: 1px solid var(--v3-line-2);
    border-radius: 10px;
    background: rgba(255, 255, 255, .035);
    cursor: pointer;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    text-align: start;
    transition: border-color .16s ease, background .16s ease;
}

.v3-openers button:hover,
.v3-openers button:focus-visible {
    border-color: rgba(var(--v3-accent-rgb), .6);
    background: rgba(var(--v3-accent-rgb), .09);
    outline: none;
}

.v3-openers button.is-picked {
    border-color: var(--v3-accent);
    background: rgba(var(--v3-accent-rgb), .16);
}

.v3-composer {
    display: block;
    margin-bottom: 12px;
}

.v3-composer textarea {
    display: block;
    width: 100%;
    min-height: 70px;
    padding: 11px 13px;
    border: 1px solid var(--v3-line-2);
    border-radius: 10px;
    background: rgba(255, 255, 255, .03);
    color: var(--v3-text);
    font-size: 15px;
    resize: none;
}

.v3-composer textarea::placeholder {
    color: var(--v3-dim);
}

.v3-composer textarea:focus {
    border-color: var(--v3-accent);
    outline: none;
}

.v3-pending {
    display: grid;
    margin-bottom: 12px;
    padding: 12px 13px;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    border: 1px solid rgba(52, 209, 122, .3);
    border-radius: 11px;
    background: rgba(52, 209, 122, .08);
    animation: v3-slide .3s cubic-bezier(.32, .72, .33, 1) both;
}

.v3-pending[hidden] {
    display: none;
}

.v3-pending__tick {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 50%;
    background: rgba(52, 209, 122, .2);
    color: var(--v3-online);
    font-size: 14px;
    font-weight: 800;
}

.v3-pending b {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
}

.v3-pending p {
    margin: 2px 0 0;
    color: var(--v3-muted);
    font-size: 13px;
    line-height: 1.45;
}

.v3-sheet .v3-reassure {
    text-align: center;
}

/* ---------- Fiche, étape 2 : avertissement avant la sortie ---------- */

#sheetStep[hidden],
.v3-handoff[hidden] {
    display: none;
}

.v3-handoff {
    margin-top: 6px;
    padding: 16px 16px 14px;
    border: 1px solid rgba(46, 232, 138, .35);
    border-radius: 14px;
    background:
        radial-gradient(ellipse 90% 100% at 50% -30%, rgba(46, 232, 138, .14), transparent 70%),
        var(--v3-card-2);
    animation: v3-fade .22s ease-out;
}

.v3-handoff__head {
    display: flex;
    margin-bottom: 8px;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 800;
}

.v3-handoff__text {
    margin: 0 0 14px;
    color: var(--v3-muted);
    font-size: 14.5px;
    line-height: 1.5;
}

.v3-handoff__text b,
.v3-handoff strong {
    color: var(--v3-text);
}

.v3-handoff .v3-cta {
    width: 100%;
}

.v3-handoff__back {
    display: block;
    margin: 10px auto 0;
}

@keyframes v3-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Barre fixe mobile ---------- */

.v3-dock {
    position: fixed;
    z-index: 80;
    inset-inline: 0;
    bottom: var(--v3-vv-bottom, 0px);
    display: none;
    padding: 9px 12px calc(11px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--v3-line);
    background: rgba(11, 11, 15, .95);
    box-shadow: 0 -14px 36px rgba(0, 0, 0, .5);
    backdrop-filter: blur(16px);
    transform: translateY(120%);
    transition: transform .3s ease;
}

.v3-dock.is-visible {
    transform: translateY(0);
}

.v3-dock__cta {
    display: grid;
    width: min(100%, 520px);
    min-height: 56px;
    margin: 0 auto;
    padding-block: 6px;
    padding-inline: 7px 16px;
    grid-template-columns: 42px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    background: var(--v3-grad);
    box-shadow: var(--v3-glow);
    color: #fff;
}

.v3-dock__face {
    display: block;
    width: 42px;
    height: 42px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .35);
    border-radius: 9px;
}

.v3-dock__face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}

.v3-dock__text {
    min-width: 0;
}

.v3-dock__text small {
    display: block;
    overflow: hidden;
    opacity: .75;
    font-size: 11.5px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v3-dock__text b {
    display: block;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.15;
}

/* ---------- Sans JavaScript ---------- */

.v3-nojs {
    width: min(100%, 1120px);
    margin: 20px auto;
    padding: 20px;
    border: 1px solid var(--v3-line-2);
    border-radius: var(--v3-radius);
    background: var(--v3-card);
    text-align: center;
}

.v3-nojs a {
    display: inline-block;
    margin-top: 10px;
    padding: 13px 22px;
    border-radius: 11px;
    background: var(--v3-grad);
    color: #fff;
    font-weight: 800;
}

/* ---------- Tablette ---------- */

@media (max-width: 900px) {
    /* Le hero repasse en flux : accroche, puis les visages tout de suite,
       puis la preuve. Un visage doit être à l'écran sans scroll. */
    .v3-hero {
        display: block;
        padding-top: 16px;
    }

    .v3-hero h1 {
        max-width: 18ch;
    }

    .v3-mosaic {
        aspect-ratio: 1 / .74;
        margin: 16px 0 18px;
    }

    .v3-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .v3-objections {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
    }

    .v3-obj {
        display: grid;
        padding: 15px;
        grid-template-columns: 28px minmax(0, 1fr);
        align-items: start;
        gap: 5px 12px;
    }

    .v3-obj__mark {
        margin-bottom: 0;
        grid-row: span 2;
    }

    body {
        padding-bottom: calc(86px + var(--v3-vv-bottom, 0px));
    }

    .v3-dock {
        display: block;
    }

    /* La fiche devient une bottom-sheet. */
    .v3-sheet {
        padding: 0;
        align-items: end;
    }

    .v3-sheet__card {
        width: 100%;
        max-height: 90vh;
        max-height: 90dvh;
        padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
        border-inline: 0;
        border-bottom: 0;
        border-radius: 20px 20px 0 0;
        animation-name: v3-rise;
    }
}

@keyframes v3-rise {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Mobile ---------- */

@media (max-width: 620px) {
    .v3-hero h1 {
        max-width: none;
        font-size: clamp(27px, 7.6vw, 34px);
    }

    .v3-stats {
        padding: 12px 0;
    }

    .v3-stats li {
        padding-inline: 8px;
    }

    .v3-stats span {
        font-size: 11.5px;
    }

    .v3-cta {
        width: 100%;
        min-height: 54px;
        font-size: 16px;
    }

    /* Quatre réponses sur deux colonnes : sur quatre elles deviennent illisibles. */
    .v3-choices--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .v3-choices button {
        min-height: 56px;
        font-size: 14.5px;
    }

    .v3-quiz {
        padding: 18px 15px;
        border-radius: 16px;
    }

    .v3-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .v3-mosaic {
        gap: 6px;
    }

    .v3-mosaic__meta b {
        font-size: 13px;
    }

    .v3-final {
        padding: 24px 16px;
    }
}

@media (max-width: 380px) {
    .v3-mosaic__meta em {
        display: none;
    }

    .v3-mosaic__tile:nth-child(1) .v3-mosaic__meta em {
        display: block;
    }
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* Sas de redirection : plein écran, 900 ms, avant tout départ vers le partenaire. */
.mf-gate, .v3-gate {
    position: fixed;
    z-index: 200;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--v3-bg) 92%, transparent);
    backdrop-filter: blur(6px);
}
.mf-gate.is-open, .v3-gate.is-open { display: flex; }
.mf-gate__box, .v3-gate__box {
    display: flex;
    padding-inline: 28px;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-align: center;
}
.mf-gate__box b, .v3-gate__box b { font-size: 16.5px; font-weight: 700; line-height: 1.4; }
.mf-gate__spin, .v3-gate__spin {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(255, 255, 255, .16);
    border-top-color: var(--mf-primary, var(--v3-accent, #3cbff0));
    border-radius: 50%;
    animation: mf-gate-spin .8s linear infinite;
}
@keyframes mf-gate-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mf-gate__spin, .v3-gate__spin { animation-duration: 2.4s; } }