/* ==========================================================================
   Monkeur — Feuille de style principale
   Toute nouvelle page doit ajouter son style structurant ici (CLAUDE.md).
   Palette : noir #151515, rose clair #F4CEFF, blanc #FFFFFF, rouge #EB4C4C.
   ========================================================================== */

:root {
    --dv-black: #151515;
    --dv-pink: #F4CEFF;
    --dv-white: #FFFFFF;
    --dv-red: #EB4C4C;

    --dv-gray-900: #1f1f1f;
    --dv-gray-600: #6b6b6b;
    --dv-gray-400: #9a9a9a;
    --dv-gray-200: #e9e9e9;
    --dv-gray-100: #f5f5f5;
    --dv-gray-50: #fafafa;

    --dv-radius-sm: 10px;
    --dv-radius-md: 16px;
    --dv-radius-lg: 22px;
    --dv-radius-xl: 22px;
    --dv-radius-pill: 999px;

    --dv-shell-width: 640px;
    --dv-shell-height: 615px;

    /* Hauteur réservée à la barre d'onglets du bas, sortie du flux. */
    --dv-bottom-nav-height: 62px;

    --dv-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: var(--dv-font);
    color: var(--dv-black);
    background: var(--dv-gray-100);
    -webkit-font-smoothing: antialiased;
}

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

button {
    font-family: inherit;
}

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

/* ==========================================================================
   App shell — mobile-first, contraint sur desktop (~640x615, scroll interne)
   ========================================================================== */

.app-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100dvh;
    background: var(--dv-white);
    overflow: hidden;
    margin: 0 auto;
}

.app-content {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

.app-content.no-scroll-x {
    overflow-x: hidden;
}

@media (min-width: 641px) {
    body {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background: var(--dv-gray-200);
    }

    .app-shell {
        width: var(--dv-shell-width);
        height: var(--dv-shell-height);
        max-width: var(--dv-shell-width);
        max-height: var(--dv-shell-height);
        border: 1px solid var(--dv-gray-200);
        border-radius: var(--dv-radius-lg);
    }
}

/* ================================================
   Navbar (haut d'écran, fixe dans le shell)
   ================================================ */

.app-navbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--dv-white);
    border-bottom: 1px solid var(--dv-gray-100);
    z-index: 10;
}

/*
 * Bouton retour rond : composant réutilisable, pas seulement dans
 * `.app-navbar` (il sert aussi d'en-tête de second niveau dans les offcanvas).
 */
.navbar-back {
    width: 33px;
    height: 33px;
    border-radius: 50%;
    background: var(--dv-gray-100);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dv-black);
    flex: 0 0 auto;
    font-size: 0.65rem;
}
.navbar-back svg{
    height: 18px;
    width: 18px
}

.app-navbar .navbar-title {
    font-weight: 700;
    font-size: 1.05rem;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Composant réutilisable lui aussi (fermeture d'offcanvas, etc.), pas seulement dans `.app-navbar`. */
.navbar-action {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--dv-gray-100);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dv-black);
    flex: 0 0 auto;
}
.navbar-action svg{
    width: 18px; height: 18px
}

.app-navbar.navbar-brand-mode {
    justify-content: space-between;
}

.dv-logo {
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
    color: var(--dv-black);
}

.dv-logo span {
    color: var(--dv-red);
}

/* ==========================================================================
   Bottom nav — 5 onglets fixes
   ========================================================================== */

.app-bottom-nav {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    background: var(--dv-white);
    border-top: 1px solid var(--dv-gray-100);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 10;
}

.bottom-nav-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 9px 4px 8px;
    color: var(--dv-gray-400);
    font-size: 0.66rem;
    font-weight: 600;
    position: relative;
}

.bottom-nav-item svg,
.bottom-nav-item i {
    width: 22px;
    height: 22px;
}

.bottom-nav-item.is-active {
    color: var(--dv-black);
}

/* ----- Onglet principal « Rencontrer » -----
   Centré et mis en avant (retour de test 2026-09-11) : c'est l'action que tout
   le produit cherche à provoquer. Le relief vient d'un anneau de la couleur de
   la barre, pas d'une ombre portée — la charte les réserve aux cas où elles
   servent la hiérarchie, et ici le contraste noir/rose suffit déjà.

   La pastille « remonte » par marge négative : elle occupe alors la même hauteur
   qu'une icône ordinaire, et le libellé reste aligné sur celui des autres
   onglets au lieu de flotter plus haut. */
.bottom-nav-item.is-primary {
    color: var(--dv-black);
    font-weight: 700;
}

.bottom-nav-item.is-primary .nav-primary-dial {
    width: 46px;
    height: 46px;
    margin-top: -23px;
    border-radius: 50%;
    background: var(--dv-black);
    color: var(--dv-pink);
    border: 3px solid var(--dv-white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bottom-nav-item.is-primary .nav-primary-dial svg,
.bottom-nav-item.is-primary .nav-primary-dial i {
    width: 24px;
    height: 24px;
}

.bottom-nav-item .nav-dot {
    position: absolute;
    top: 6px;
    right: calc(50% - 16px);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dv-red);
}

.bottom-nav-item .nav-badge {
    position: absolute;
    top: 3px;
    right: calc(50% - 20px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--dv-radius-pill);
    background: var(--dv-red);
    color: var(--dv-white);
    font-size: 0.62rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* ==========================================================================
   Boutons
   ========================================================================== */

.btn-dv {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--dv-radius-xl);
    padding: 10px 22px;
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: opacity .15s ease, transform .1s ease;
}

.btn-small-action {
    width: 90px;
    height: 30px; 
    font-size: 13px;
    border-radius: 30px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border: none;
    cursor: pointer;
    outline: none;
    transition: opacity .15s ease, transform .1s ease;
}

.btn-dv:active {
    transform: scale(0.98);
}

.btn-dv-block {
    width: 100%;
}

.btn-dv-primary {
    background: var(--dv-black);
    color: var(--dv-white);
}

.btn-dv-accent {
    background: var(--dv-red);
    color: var(--dv-white);
}

.btn-dv-pink {
    background: var(--dv-pink);
    color: var(--dv-black);
}

.btn-dv-outline {
    background: transparent;
    border: 1.5px solid var(--dv-black);
    color: var(--dv-black);
}

.btn-dv-outline-light {
    background: transparent;
    border: 1.5px solid var(--dv-gray-200);
    color: var(--dv-black);
}

.btn-dv-ghost {
    background: var(--dv-gray-100);
    color: var(--dv-black);
}

.btn-dv-sm {
    padding: 9px 16px;
    font-size: 0.85rem;
    border-radius: var(--dv-radius-sm);
}

.btn-dv:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-icon-round {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--dv-gray-100);
    color: var(--dv-black);
    flex: 0 0 auto;
}

/* ==========================================================================
   Chips (pastilles de sélection) — remplace radio/checkbox natifs
   ========================================================================== */

.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border-radius: var(--dv-radius-pill);
    border: 1.5px solid var(--dv-gray-200);
    background: var(--dv-white);
    color: var(--dv-black);
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    user-select: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
@media screen and (max-width: 768px) {
    .chip {
        padding: 7px 16px;
            font-size: 0.78rem;
    }
}

.chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.chip svg,
.chip i {
    width: 16px;
    height: 16px;
}

.chip.is-active.chip-pink {
    background: var(--dv-black);
    border-color: var(--dv-black);
    color: var(--dv-white);
}

.chip.is-active {
    background: var(--dv-pink);
    border-color: var(--dv-pink);
    color: var(--dv-black);
}

/* ==========================================================================
   Champs de formulaire
   ========================================================================== */

.form-label-dv {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 8px;
    color: var(--dv-black);
}

.form-hint {
    font-size: 0.78rem;
    color: var(--dv-gray-600);
    margin-top: 6px;
}

.input-dv {
    width: 100%;
    border: 1.5px solid var(--dv-gray-200);
    border-radius: var(--dv-radius-xl);
    padding: 8px 16px;
    font-size: 0.9rem;
    font-family: inherit;
    background: var(--dv-white);
    color: var(--dv-black);
}

.input-dv:focus {
    outline: none;
    border-color: var(--dv-black);
}

.input-group-dv {
    position: relative;
}

.input-group-dv .input-dv {
    padding-left: 44px;
}

.input-group-dv .input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dv-gray-400);
    width: 18px;
    height: 18px;
}

/* Stepper (remplace input[number]) */
.stepper-dv {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--dv-gray-200);
    border-radius: var(--dv-radius-pill);
    overflow: hidden;
}

.stepper-dv button {
    width: 42px;
    height: 42px;
    border: none;
    background: var(--dv-gray-100);
    color: var(--dv-black);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.stepper-dv button:active {
    background: var(--dv-gray-200);
}

.stepper-dv input {
    width: 56px;
    border: none;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    padding: 0;
    background: transparent;
}

.stepper-dv input:focus {
    outline: none;
}

/* OTP */
.otp-inputs {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.otp-inputs input {
    width: 46px;
    height: 54px;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
    border: 1.5px solid var(--dv-gray-200);
    border-radius: var(--dv-radius-sm);
}

.otp-inputs input:focus {
    outline: none;
    border-color: var(--dv-black);
}

/* Bouton d'apparence lien, dans un paragraphe : « Renvoyer le code », « Modifier
   l'email ». Un vrai <button> plutôt qu'un <a> parce qu'il soumet un formulaire,
   d'où la remise à zéro complète du style natif. */
.btn-link-dv {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-weight: 700;
    color: var(--dv-black);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* Verrouillé le temps de l'envoi : sans repère visuel, l'absence de réaction au
   clic passe pour une panne. */
.btn-link-dv:disabled {
    opacity: 0.45;
    cursor: progress;
    text-decoration: none;
}

/* ==========================================================================
   Onboarding / auth
   ========================================================================== */

.auth-shell {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 28px 22px 24px;
}

.step-progress {
    display: flex;
    gap: 6px;
    margin-bottom: 22px;
}

.step-progress span {
    flex: 1;
    height: 4px;
    border-radius: var(--dv-radius-pill);
    background: var(--dv-gray-200);
}

.step-progress span.is-done,
.step-progress span.is-active {
    background: var(--dv-black);
}

.step-heading {
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.step-subheading {
    color: var(--dv-gray-600);
    font-size: 0.9rem;
    margin-bottom: 24px;
}

.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 10px 18px;
    border-radius: var(--dv-radius-xl);
    border: 1.5px solid var(--dv-gray-200);
    background: var(--dv-white);
    font-weight: 700;
    color: var(--dv-black);
    font-size: 0.88rem
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--dv-gray-400);
    font-size: 0.8rem;
    margin: 20px 0;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--dv-gray-200);
}

.wizard-step {
    display: none;
}

.wizard-step.is-active {
    display: block;
}

.wizard-nav {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 18px;
}

/* Upload photos */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.photo-slot {
    /* Format vertical 9:16, identique à celui appliqué au stockage. */
    aspect-ratio: 9/16;
    border-radius: var(--dv-radius-md);
    border: 1.5px dashed var(--dv-gray-200);
    background: var(--dv-gray-50);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dv-gray-400);
    position: relative;
    overflow: hidden;
    padding: 0;
    width: 100%;
}

.photo-slot.has-photo {
    border-style: solid;
    cursor: pointer;
}

.photo-slot.is-primary {
    border-color: var(--dv-black);
    border-width: 2px;
}

.photo-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-slot .photo-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(21, 21, 21, 0.6);
    color: var(--dv-white);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}

.photo-slot .photo-primary-tag {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background: var(--dv-black);
    color: var(--dv-white);
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--dv-radius-pill);
    display: none;
}

.photo-slot.is-primary .photo-primary-tag {
    display: block;
}

/* Emplacement en cours d'envoi : voile + indicateur de chargement */
.photo-slot.is-uploading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.72);
}

.photo-slot.is-uploading::before {
    content: "";
    position: absolute;
    z-index: 2;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--dv-gray-200);
    border-top-color: var(--dv-black);
    animation: dv-spin 0.7s linear infinite;
}

@keyframes dv-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   Formulaires multi-étapes : champs requis, erreurs, états de chargement
   ========================================================================== */

/* Marqueur discret de champ obligatoire */
.label-required {
    color: var(--dv-red);
    font-weight: 700;
    margin-left: 2px;
}

.label-optional {
    margin-left: 6px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--dv-gray-400);
    text-transform: lowercase;
}

.field-error {
    margin: 6px 0 0;
    font-size: 0.78rem;
    color: var(--dv-red);
    min-height: 0;
}

/* Parrain déjà identifié par le lien : on l'annonce au lieu d'afficher un
   champ vide. Preuve sociale à l'étape où l'on hésite le plus. */
.sponsor-confirmed {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--dv-radius-md);
    background: var(--dv-pink);
    color: var(--dv-black);
    font-size: 0.85rem;
}

.sponsor-confirmed i {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.field-error:empty {
    display: none;
}

.input-dv.is-invalid,
.chip-group.is-invalid {
    border-color: var(--dv-red);
}

.chip-group.is-invalid {
    border: 1px solid var(--dv-red);
    border-radius: var(--dv-radius-md);
    padding: 8px;
}

/* Étape verrouillée pendant un appel réseau : la saisie reste visible mais inerte */
.wizard-step.is-locked {
    pointer-events: none;
    opacity: 0.55;
}

/* Bouton en cours de traitement */
.btn-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: var(--dv-white);
    animation: dv-spin 0.7s linear infinite;
}

.btn-dv.is-loading .btn-spinner {
    display: inline-block;
}

.btn-dv.is-loading {
    gap: 10px;
}

/* ==========================================================================
   Étape « Vos contacts »
   ========================================================================== */

.contact-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-field .input-dv {
    flex: 1;
    min-width: 0;
}

.contact-field .contact-code {
    flex: 0 0 104px;
    width: 104px;
}

.contact-prefix {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--dv-radius-pill);
    background: var(--dv-gray-100);
    color: var(--dv-gray-600);
    font-weight: 700;
    font-size: 0.9rem;
}

/* Bloc pédagogique sobre en bas d'étape (ni dégradé, ni ombre, ni bordure latérale) */
.info-block {
    background: var(--dv-gray-50);
    border: 1px solid var(--dv-gray-200);
    border-radius: var(--dv-radius-md);
    padding: 14px 16px;
}

.info-block-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.86rem;
    margin-bottom: 8px;
}

.info-block-title svg {
    width: 16px;
    height: 16px;
}

.info-block-list {
    margin: 0;
    padding-left: 18px;
    color: var(--dv-gray-600);
    font-size: 0.8rem;
    line-height: 1.55;
}

.info-block-list li + li {
    margin-top: 4px;
}

/* Variante d'alerte sobre (motif de rejet, etc.) — même structure, teinte rouge. */
.info-block-warning {
    background: #FDECEC;
    border-color: #F6C6C6;
    color: var(--dv-black);
}

.info-block-warning .info-block-title {
    color: var(--dv-red);
}

/* ==========================================================================
   VITRINE PUBLIQUE (landing + blog) — préfixe `mk-`
   --------------------------------------------------------------------------
   Contrairement à l'application connectée (app-shell figé ~640x615px, scroll
   interne), la vitrine est une vraie page web : pleine largeur, bandes de
   couleur en pleine laize, scroll de document normal.

   Chaque section pose son fond sur toute la largeur et centre son contenu
   dans un `.mk-container` unique — c'est ce qui permet les bandes noires /
   roses de bout en bout sans casser l'alignement des colonnes.

   Direction artistique (CLAUDE.md) : aucun dégradé, aucune ombre portée
   décorative, aucune carte à bordure gauche accentuée. La hiérarchie repose
   sur le contraste noir/blanc, les filets 1px et l'espacement.
   ========================================================================== */

.marketing-body {
    margin: 0;
    background: var(--dv-white);
    font-family: var(--dv-font);
    color: var(--dv-black);
    /* La vitrine scrolle comme un site classique : on neutralise le
       `height: 100%` global posé pour l'app-shell. */
    height: auto;
    min-height: 100%;
}

html:has(.marketing-body) {
    height: auto;
}

.marketing-shell {
    width: 100%;
    overflow-x: clip;
}

.mk-container {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (min-width: 992px) {
    .mk-container {
        padding: 0 40px;
    }
}

/* Rythme vertical commun à toutes les sections. */
.mk-section {
    padding: 56px 0;
}

.mk-section-tight {
    padding-top: 0;
}

@media (min-width: 992px) {
    .mk-section {
        padding: 88px 0;
    }
}

.mk-section-gray {
    background: var(--dv-gray-50);
}

.mk-section-dark {
    background: var(--dv-black);
    color: var(--dv-white);
}

.mk-section-pink {
    background: var(--dv-pink);
}

/* ==========================================================================
   Apparition au scroll : un fondu + léger glissement, une seule fois.
   `.mk-reveal` part masqué, `.is-visible` (ajouté par IntersectionObserver,
   cf. plugins/scroll-reveal.js) déclenche la transition.

   Tout est conditionné à `.mk-js-reveal`, posé sur <html> par le plugin lui-même
   au moment où il se charge. Le masquage n'existe donc que si le code capable de
   le lever est bien présent : sans JS, si le fichier ne se charge pas ou s'il
   disparaît d'un layout, la vitrine s'affiche normalement, simplement sans
   animation. Écrire `opacity: 0` sans cette garde revient à faire dépendre la
   lisibilité de toute la page marketing d'un seul fichier JS.
   ========================================================================== */

.mk-js-reveal .mk-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s cubic-bezier(0.16, 0.84, 0.44, 1), transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.mk-js-reveal .mk-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Décalage en cascade pour les grilles d'éléments répétés : chaque enfant
   apparaît un peu après le précédent, sans qu'il faille calculer un délai
   en JS pour chacun. */
.mk-steps > .mk-reveal:nth-child(2),
.mk-points > .mk-reveal:nth-child(2),
.mk-quotes > .mk-reveal:nth-child(2),
.mk-plans > .mk-reveal:nth-child(2),
.mk-blog-grid > .mk-reveal:nth-child(2),
.mk-stats-grid > .mk-reveal:nth-child(2) {
    transition-delay: 0.08s;
}

.mk-steps > .mk-reveal:nth-child(3),
.mk-points > .mk-reveal:nth-child(3),
.mk-quotes > .mk-reveal:nth-child(3),
.mk-plans > .mk-reveal:nth-child(3),
.mk-blog-grid > .mk-reveal:nth-child(3),
.mk-stats-grid > .mk-reveal:nth-child(3) {
    transition-delay: 0.16s;
}

.mk-steps > .mk-reveal:nth-child(4),
.mk-points > .mk-reveal:nth-child(4),
.mk-quotes > .mk-reveal:nth-child(4),
.mk-plans > .mk-reveal:nth-child(4),
.mk-blog-grid > .mk-reveal:nth-child(4),
.mk-stats-grid > .mk-reveal:nth-child(4) {
    transition-delay: 0.24s;
}

@media (prefers-reduced-motion: reduce) {
    /* Même sélecteur que la règle de masquage : une spécificité moindre ne
       l'emporterait pas et le contenu resterait invisible pour qui a demandé
       moins d'animations — exactement l'inverse du but recherché. */
    .mk-js-reveal .mk-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==========================================================================
   Barre de navigation de la vitrine
   ========================================================================== */

.mk-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--dv-white);
    border-bottom: 1px solid var(--dv-gray-200);
}

.mk-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 64px;
}

.mk-nav .dv-logo {
    font-size: 1.35rem;
}

.mk-nav-links {
    display: none;
    align-items: center;
    gap: 28px;
}

.mk-nav-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dv-gray-600);
    transition: color 0.15s ease;
}

.mk-nav-link:hover,
.mk-nav-link.is-active {
    color: var(--dv-black);
}

.mk-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mk-nav-signin {
    display: none;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dv-black);
}

.mk-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--dv-gray-200);
    border-radius: var(--dv-radius-sm);
    background: var(--dv-white);
    color: var(--dv-black);
    padding: 0;
}

.mk-nav-toggle svg {
    width: 20px;
    height: 20px;
}

/* Panneau déroulant mobile : liens + connexion, replié par défaut. */
.mk-nav-mobile {
    display: none;
    border-top: 1px solid var(--dv-gray-200);
    padding: 12px 0 18px;
}

.mk-nav-mobile.is-open {
    display: block;
}

.mk-nav-mobile a {
    display: block;
    padding: 11px 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dv-black);
}

.mk-nav-mobile a + a {
    border-top: 1px solid var(--dv-gray-100);
}

@media (min-width: 992px) {
    .mk-nav-links,
    .mk-nav-signin {
        display: flex;
    }

    .mk-nav-toggle,
    .mk-nav-mobile {
        display: none !important;
    }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.mk-hero {
    background: var(--dv-gray-100);
    padding: 44px 0 52px;
}

@media (min-width: 992px) {
    .mk-hero {
        padding: 76px 0 84px;
    }
}

.mk-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

@media (min-width: 992px) {
    .mk-hero-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 56px;
    }
}

.mk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--dv-pink);
    color: var(--dv-black);
    border-radius: var(--dv-radius-pill);
    padding: 8px 16px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mk-eyebrow svg {
    width: 14px;
    height: 14px;
}

.mk-eyebrow-plain {
    display: block;
    background: none;
    padding: 0;
    color: var(--dv-gray-600);
    margin-bottom: 12px;
}

.mk-hero h1 {
    font-size: clamp(2.1rem, 6.2vw, 3.3rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.035em;
    margin: 20px 0 0;
}

.mk-hero-lead {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--dv-gray-600);
    margin: 18px 0 0;
    max-width: 480px;
}

.mk-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
}

.mk-textlink {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--dv-black);
}

.mk-textlink svg {
    width: 16px;
    height: 16px;
}

.mk-textlink:hover {
    color: var(--dv-red);
}

/* Bandeau de réassurance sous le hero. */
.mk-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.mk-trust span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--dv-white);
    border: 1px solid var(--dv-gray-200);
    border-radius: var(--dv-radius-pill);
    padding: 8px 15px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--dv-gray-600);
}

.mk-trust svg {
    width: 14px;
    height: 14px;
    color: var(--dv-red);
}

/* ==========================================================================
   Aperçu produit : maquette de l'application rendue en CSS
   (aucune photo externe, rien à charger, rien qui puisse manquer)
   ========================================================================== */

.mk-mock {
    background: var(--dv-white);
    border: 1px solid var(--dv-gray-200);
    border-radius: var(--dv-radius-lg);
    padding: 14px;
    max-width: 340px;
    margin: 0 auto;
}

.mk-mock-card {
    position: relative;
    background-image: url('../img/femme-24-metisse.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--dv-radius-md);
    aspect-ratio: 3 / 4;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 14px;
    overflow: hidden;
} 
.mk-mock-chip {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--dv-white);
    border-radius: var(--dv-radius-pill);
    padding: 6px 12px;
    font-size: 0.7rem;
    font-weight: 700;
}

.mk-mock-chip svg {
    width: 13px;
    height: 13px;
    color: var(--dv-red);
}

.mk-mock-figure {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dv-white);
    opacity: 0.55;
}

.mk-mock-figure svg {
    width: 108px;
    height: 108px;
    stroke-width: 1;
}

.mk-mock-identity {
    position: relative;
    background: var(--dv-white);
    border-radius: var(--dv-radius-sm);
    padding: 10px 12px;
}

.mk-mock-identity strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
}

.mk-mock-identity span {
    font-size: 0.76rem;
    color: var(--dv-gray-600);
}

.mk-mock-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
}

.mk-mock-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dv-gray-200);
    background: var(--dv-white);
    color: var(--dv-gray-600);
}

.mk-mock-btn svg {
    width: 20px;
    height: 20px;
}

.mk-mock-btn-pass {
    color: var(--dv-red);
    border-color: #F6C6C6;
}

.mk-mock-btn-like {
    background: var(--dv-black);
    border-color: var(--dv-black);
    color: var(--dv-white);
}

.mk-mock-btn-phone {
    background: var(--dv-pink);
    border-color: var(--dv-pink);
    color: var(--dv-black);
}

/* Variante « conversation » utilisée par les sections fonctionnalités. */
.mk-mock-sheet {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mk-mock-row {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--dv-gray-200);
    border-radius: var(--dv-radius-sm);
    padding: 12px;
}

.mk-mock-avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--dv-pink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dv-black);
    overflow: hidden;
}
.mk-mock-avatar img {
width : 100%;
height: 100%;
object-fit: cover;
}
.mk-mock-avatar svg {
    width: 19px;
    height: 19px;
}

.mk-mock-row-text {
    min-width: 0;
    flex: 1 1 auto;
}

.mk-mock-row-text strong {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
}

.mk-mock-row-text span {
    font-size: 0.76rem;
    color: var(--dv-gray-600);
}

.mk-mock-tag {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: var(--dv-radius-pill);
    background: var(--dv-gray-100);
    color: var(--dv-gray-600);
}

.mk-mock-tag-ok {
    background: var(--dv-black);
    color: var(--dv-white);
}

.mk-mock-tag-pink {
    background: var(--dv-pink);
    color: var(--dv-black);
}

/* ==========================================================================
   En-tête de section
   ========================================================================== */

.mk-head {
    max-width: 620px;
    margin: 0 auto 44px;
    text-align: center;
}

.mk-head h2 {
    font-size: clamp(1.6rem, 4.4vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0;
}

.mk-head p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--dv-gray-600);
    margin: 14px 0 0;
}

.mk-section-dark .mk-head p {
    color: rgba(255, 255, 255, 0.68);
}

.mk-section-dark .mk-eyebrow-plain {
    color: var(--dv-pink);
}

/* ==========================================================================
   « Comment ça marche » — 4 étapes numérotées
   ========================================================================== */

.mk-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

@media (min-width: 576px) {
    .mk-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 34px 28px;
    }
}

@media (min-width: 992px) {
    .mk-steps {
        grid-template-columns: repeat(4, 1fr);
    }
}

.mk-step-num {
    width: 47px;
    height: 47px;
    border-radius: 50%;
    background: var(--dv-pink);
    color: var(--dv-black);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 16px;
}

.mk-step h3 {
    font-size: 1.02rem;
    font-weight: 800;
    margin: 0 0 8px;
}

.mk-step p {
    font-size: 0.87rem;
    line-height: 1.6;
    color: var(--dv-gray-600);
    margin: 0;
}

/* ==========================================================================
   Sections fonctionnalités : maquette + texte, alternées
   ========================================================================== */

.mk-feature {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: center;
}

.mk-feature + .mk-feature {
    margin-top: 56px;
}

@media (min-width: 992px) {
    .mk-feature {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 64px;
    }

    .mk-feature + .mk-feature {
        margin-top: 88px;
    }

    /* Une ligne sur deux inverse l'ordre visuel sans toucher au DOM :
       le texte reste lu avant sa maquette par les lecteurs d'écran. */
    .mk-feature.is-reversed .mk-feature-media {
        order: 2;
    }
}

.mk-feature h3 {
    font-size: clamp(1.4rem, 3.6vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin: 0;
}

.mk-feature > div > p {
    font-size: 0.93rem;
    line-height: 1.65;
    color: var(--dv-gray-600);
    margin: 14px 0 0;
}

.mk-points {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
}

.mk-point {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid var(--dv-gray-200);
}

.mk-point-icon {
    flex: 0 0 auto;
    width: 37px;
    height: 37px;
    border-radius: 50%;
    background: var(--dv-black);
    color: var(--dv-pink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mk-point-icon svg {
    width: 15px;
    height: 15px;
    color: var(--dv-pink);
}

.mk-point strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 3px;
}

.mk-point span {
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--dv-gray-600);
}

.mk-feature-media {
    background: var(--dv-gray-50);
    border: 1px solid var(--dv-gray-200);
    border-radius: var(--dv-radius-lg);
    padding: 22px;
}

.mk-section-gray .mk-feature-media {
    background: var(--dv-white);
}

/* Variante autonome de `.mk-points` : une section entière de points (sécurité,
   diaspora) plutôt qu'une liste à côté d'une maquette. Deux colonnes dès que
   la largeur le permet, mêmes puces à icône que partout ailleurs. */
.mk-points-grid {
    max-width: 880px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 40px;
}

@media (min-width: 768px) {
    .mk-points-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.mk-section-note {
    max-width: 620px;
    margin: 32px auto 0;
    text-align: center;
    font-size: 0.86rem;
    line-height: 1.65;
    color: var(--dv-gray-600);
}

/* ==========================================================================
   Bande manifeste (fond noir)
   ========================================================================== */

.mk-statement {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}

.mk-statement h2 {
    font-size: clamp(1.6rem, 4.6vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin: 0;
}

.mk-statement h2 em {
    font-style: normal;
    color: var(--dv-pink);
}

.mk-statement p {
    font-size: 0.98rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.68);
    margin: 18px 0 0;
}

.mk-statement .btn-dv {
    margin-top: 28px;
}

/* ==========================================================================
   Comparatif face aux applications classiques
   ========================================================================== */

.mk-compare {
    max-width: 880px;
    margin: 0 auto;
    border: 1px solid var(--dv-gray-200);
    border-radius: var(--dv-radius-lg);
    overflow: hidden;
}

.mk-compare-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--dv-white);
}

.mk-compare-table th,
.mk-compare-table td {
    padding: 14px 18px;
    text-align: left;
    font-size: 0.85rem;
    line-height: 1.5;
    border-top: 1px solid var(--dv-gray-200);
}

.mk-compare-table thead th {
    border-top: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dv-gray-600);
    background: var(--dv-gray-50);
}

.mk-compare-table tbody th {
    font-weight: 700;
    color: var(--dv-black);
    white-space: nowrap;
}

.mk-compare-table tbody td {
    color: var(--dv-gray-600);
}

.mk-compare-table td.mk-compare-win {
    font-weight: 700;
    color: var(--dv-black);
    background: rgba(244, 206, 255, 0.3);
}

.mk-compare-table thead th:last-child {
    background: var(--dv-pink);
    color: var(--dv-black);
}

/* Un tableau à trois colonnes devient illisible bien avant 480px de large une
   fois qu'on retire le padding du conteneur (`.mk-container` : -40px) : on
   empile chaque ligne en petit bloc dès 599px, avec le critère en titre et
   les deux valeurs étiquetées par leur colonne d'origine. */
@media (max-width: 599.98px) {
    .mk-compare-table thead {
        display: none;
    }

    .mk-compare-table,
    .mk-compare-table tbody,
    .mk-compare-table tr,
    .mk-compare-table th,
    .mk-compare-table td {
        display: block;
        width: 100%;
    }

    .mk-compare-table tr {
        padding: 16px 18px;
        border-top: 1px solid var(--dv-gray-200);
    }

    .mk-compare-table tr:first-child {
        border-top: 0;
    }

    .mk-compare-table tbody th,
    .mk-compare-table tbody td {
        padding: 4px 0;
        border-top: 0;
    }

    .mk-compare-table tbody th {
        font-size: 0.9rem;
        margin-bottom: 6px;
    }

    .mk-compare-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.66rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--dv-gray-400);
        margin-bottom: 2px;
    }

    .mk-compare-table td.mk-compare-win {
        background: none;
        padding-left: 0;
    }
}

/* ==========================================================================
   Chiffres clés — bandeau court entre le comparatif et les tarifs
   ========================================================================== */

.mk-stats-strip {
    padding: 34px 0;
    background: var(--dv-gray-50);
    border-top: 1px solid var(--dv-gray-200);
    border-bottom: 1px solid var(--dv-gray-200);
}

.mk-stats-eyebrow {
    display: block;
    text-align: center;
    margin-bottom: 20px;
}

.mk-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
    max-width: 780px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .mk-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.mk-stat {
    text-align: center;
}

.mk-stat strong {
    display: block;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.mk-stat span {
    display: block;
    font-size: 0.76rem;
    line-height: 1.4;
    color: var(--dv-gray-600);
    margin-top: 4px;
}

/* ==========================================================================
   Tarifs
   ========================================================================== */

.mk-plans {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
}

@media (min-width: 768px) {
    .mk-plans {
        grid-template-columns: repeat(3, 1fr);
    }
}

.mk-plan {
    position: relative;
    background: var(--dv-white);
    border: 1px solid var(--dv-gray-200);
    border-radius: var(--dv-radius-lg);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Le pack mis en avant se distingue par un cadre noir complet — jamais par
   une bordure gauche accentuée (refus explicite, CLAUDE.md). */
.mk-plan.is-featured {
    border: 2px solid var(--dv-black);
    padding: 30px 24px;
}

.mk-plan-badge {
    position: absolute;
    top: -12px;
    left: 24px;
    background: var(--dv-black);
    color: var(--dv-white);
    border-radius: var(--dv-radius-pill);
    padding: 6px 14px;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.mk-plan-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--dv-gray-600);
    margin: 0 0 10px;
}

.mk-plan-price {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0;
}

.mk-plan-price small {
    display: block;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--dv-gray-400);
    letter-spacing: 0;
    margin-bottom: 2px;
}

.mk-plan-features {
    list-style: none;
    padding: 0;
    margin: 22px 0 26px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    flex: 1 1 auto;
}

.mk-plan-features li {
    display: flex;
    gap: 10px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--dv-gray-900);
}

.mk-plan-features svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: var(--dv-black);
}

.mk-plans-note {
    text-align: center;
    font-size: 0.82rem;
    color: var(--dv-gray-600);
    margin: 26px 0 0;
}

/* ==========================================================================
   Témoignages
   ========================================================================== */

.mk-quotes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .mk-quotes {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

.mk-quote {
    background: var(--dv-white);
    border: 1px solid var(--dv-gray-200);
    border-radius: var(--dv-radius-lg);
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
}

.mk-quote > svg {
    width: 22px;
    height: 22px;
    color: var(--dv-pink);
    margin-bottom: 14px;
}

.mk-quote p {
    font-size: 0.92rem;
    line-height: 1.65;
    margin: 0 0 20px;
    flex: 1 1 auto;
}

.mk-quote-author strong {
    display: block;
    font-size: 0.87rem;
    font-weight: 800;
}

.mk-quote-author span {
    font-size: 0.79rem;
    color: var(--dv-gray-600);
}

/* ==========================================================================
   FAQ — accordéon Bootstrap reskinné à plat
   ========================================================================== */

.mk-faq {
    max-width: 780px;
    margin: 0 auto;
}

.mk-faq .accordion-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--dv-gray-200);
}

.mk-faq .accordion-item:first-child {
    border-top: 1px solid var(--dv-gray-200);
}

.mk-faq .accordion-button {
    background: transparent;
    color: var(--dv-black);
    font-family: var(--dv-font);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 20px 4px;
    box-shadow: none;
}

.mk-faq .accordion-button:not(.collapsed) {
    background: transparent;
    color: var(--dv-black);
    box-shadow: none;
}

.mk-faq .accordion-button:focus {
    box-shadow: none;
}

.mk-faq .accordion-button::after {
    width: 16px;
    height: 16px;
    background-size: 16px;
}

.mk-faq .accordion-body {
    padding: 0 4px 22px;
    font-size: 0.89rem;
    line-height: 1.7;
    color: var(--dv-gray-600);
}

/* ==========================================================================
   Texte SEO de bas de page — discret : plus petit, fond neutre, non centré
   sur la conversion (contrairement au reste de la page).
   ========================================================================== */

.mk-seo-block {
    padding: 44px 0;
    background: var(--dv-gray-50);
}

.mk-seo-block h2 {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-align: center;
    margin: 0 0 16px;
}

.mk-seo-block p {
    max-width: 760px;
    margin: 0 auto 14px;
    font-size: 0.82rem;
    line-height: 1.75;
    color: var(--dv-gray-600);
}

.mk-seo-block p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Appel à l'action final (bande rose)
   ========================================================================== */

.mk-cta {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.mk-cta h2 {
    font-size: clamp(1.6rem, 4.6vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.18;
    margin: 0;
}

.mk-cta p {
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 16px 0 26px;
}

/* ==========================================================================
   Pied de page
   ========================================================================== */

.mk-footer {
    background: var(--dv-black);
    color: var(--dv-white);
    padding: 52px 0 26px;
}

.mk-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 34px;
}

@media (min-width: 576px) {
    .mk-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .mk-footer-grid {
        grid-template-columns: 1.6fr repeat(3, 1fr);
        gap: 48px;
    }
}

.mk-footer .dv-logo {
    color: var(--dv-white);
    font-size: 1.3rem;
}

.mk-footer-about {
    font-size: 0.85rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.6);
    margin: 14px 0 0;
    max-width: 320px;
}

.mk-footer-col h3 {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin: 0 0 16px;
}

.mk-footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.mk-footer-col a {
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.75);
}

.mk-footer-col a:hover {
    color: var(--dv-white);
}

.mk-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 44px;
    padding-top: 22px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   Blog — en-tête, filtres, grille
   ========================================================================== */

.mk-page-head {
    background: var(--dv-gray-100);
    padding: 44px 0;
    text-align: center;
}

@media (min-width: 992px) {
    .mk-page-head {
        padding: 64px 0;
    }
}

.mk-page-head h1 {
    font-size: clamp(1.9rem, 5vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.12;
    margin: 14px 0 0;
}

.mk-page-head > .mk-container > p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--dv-gray-600);
    margin: 14px auto 0;
    max-width: 560px;
}

.mk-blog-search {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 660px;
    margin: 28px auto 0;
}

.mk-blog-search-field {
    position: relative;
    flex: 1 1 220px;
    min-width: 0;
}

.mk-blog-search-field svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: var(--dv-gray-400);
    pointer-events: none;
}

.mk-blog-search input {
    width: 100%;
    height: 46px;
    border: 1px solid var(--dv-gray-200);
    border-radius: var(--dv-radius-pill);
    background: var(--dv-white);
    padding: 0 16px 0 40px;
    font-family: var(--dv-font);
    font-size: 0.88rem;
    color: var(--dv-black);
}

.mk-blog-search input:focus {
    outline: none;
    border-color: var(--dv-black);
}

.mk-blog-search select {
    height: 46px;
    border: 1px solid var(--dv-gray-200);
    border-radius: var(--dv-radius-pill);
    background: var(--dv-white);
    padding: 0 16px;
    font-family: var(--dv-font);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dv-black);
}

.mk-blog-search select:focus {
    outline: none;
    border-color: var(--dv-black);
}

.mk-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.mk-chip {
    border: 1px solid var(--dv-gray-200);
    background: var(--dv-white);
    border-radius: var(--dv-radius-pill);
    padding: 8px 16px;
    font-size: 0.81rem;
    font-weight: 600;
    color: var(--dv-gray-600);
}

.mk-chip:hover {
    border-color: var(--dv-black);
    color: var(--dv-black);
}

.mk-chip.is-active {
    background: var(--dv-black);
    border-color: var(--dv-black);
    color: var(--dv-white);
}

.mk-blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
}

@media (min-width: 576px) {
    .mk-blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .mk-blog-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }
}

.mk-post {
    display: flex;
    flex-direction: column;
}

.mk-post-cover {
    position: relative;
    display: block;
    border-radius: var(--dv-radius-md);
    overflow: hidden;
    background: var(--dv-gray-100);
    aspect-ratio: 16 / 10;
}

.mk-post-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

/* Article sans couverture : un aplat de marque, jamais une image générique
   qui laisse croire à un visuel cassé. */
.mk-post-cover.is-empty,
.mk-article-cover.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dv-pink);
}

.mk-post-cover.is-empty .dv-logo span,
.mk-article-cover.is-empty .dv-logo span {
    color: var(--dv-black);
    opacity: 0.45;
}

/* Sans couverture, le bandeau de marque ne doit pas manger l'écran :
   il devient une simple bande, pas un visuel 16/9. */
.mk-article-cover.is-empty {
    aspect-ratio: auto;
    height: 180px;
}

.mk-article-cover.is-empty .dv-logo {
    font-size: 1.8rem;
}

.mk-post-cover:hover img {
    transform: scale(1.04);
}

.mk-post-category {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--dv-white);
    color: var(--dv-black);
    border-radius: var(--dv-radius-pill);
    padding: 6px 12px;
    font-size: 0.68rem;
    font-weight: 700;
}

.mk-post-title {
    display: block;
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.015em;
    margin: 16px 0 0;
    color: var(--dv-black);
}

.mk-post-title:hover {
    color: var(--dv-red);
}

.mk-post-excerpt {
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--dv-gray-600);
    margin: 10px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mk-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 14px;
    font-size: 0.76rem;
    color: var(--dv-gray-400);
}

.mk-post-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mk-post-meta svg {
    width: 13px;
    height: 13px;
}

.mk-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--dv-gray-600);
}

.mk-empty svg {
    display: block;
    width: 40px;
    height: 40px;
    color: var(--dv-gray-400);
    margin: 0 auto 14px;
    stroke-width: 1.5;
}

.mk-empty p {
    font-size: 0.9rem;
    margin: 0;
}

.mk-pagination {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.mk-center {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* ==========================================================================
   Blog — article
   ========================================================================== */

.mk-article {
    padding: 32px 0 20px;
}

.mk-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--dv-gray-600);
    margin-bottom: 24px;
}

.mk-back:hover {
    color: var(--dv-black);
}

.mk-back svg {
    width: 16px;
    height: 16px;
}

.mk-article-head {
    max-width: 760px;
}

.mk-article-head h1 {
    font-size: clamp(1.8rem, 4.8vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 14px 0 0;
}

.mk-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 18px;
    font-size: 0.79rem;
    color: var(--dv-gray-600);
}

.mk-article-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mk-article-meta svg {
    width: 14px;
    height: 14px;
}

.mk-article-cover {
    border-radius: var(--dv-radius-lg);
    overflow: hidden;
    background: var(--dv-gray-100);
    aspect-ratio: 16 / 9;
    margin: 28px 0 0;
}

.mk-article-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mk-article-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 36px;
}

@media (min-width: 992px) {
    .mk-article-layout {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 64px;
        align-items: start;
    }
}

.mk-article-content {
    font-size: 0.97rem;
    line-height: 1.8;
    color: var(--dv-gray-900);
}

.mk-article-content > *:first-child {
    margin-top: 0;
}

.mk-article-content h2 {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 34px 0 14px;
}

.mk-article-content h3,
.mk-article-content h4,
.mk-article-content h5,
.mk-article-content h6 {
    font-size: 1.08rem;
    font-weight: 800;
    margin: 26px 0 12px;
}

.mk-article-content p {
    margin: 0 0 18px;
}

.mk-article-content a {
    color: var(--dv-red);
    text-decoration: underline;
}

.mk-article-content img {
    border-radius: var(--dv-radius-md);
    margin: 24px 0;
}

.mk-article-content blockquote {
    margin: 24px 0;
    padding: 20px 22px;
    background: var(--dv-gray-50);
    border: 1px solid var(--dv-gray-200);
    border-radius: var(--dv-radius-md);
    font-size: 1rem;
    font-style: italic;
}

.mk-article-content blockquote p:last-child {
    margin-bottom: 0;
}

.mk-article-content ul,
.mk-article-content ol {
    margin: 0 0 18px;
    padding-left: 22px;
}

.mk-article-content li {
    margin-bottom: 8px;
}

.mk-article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 0.88rem;
}

.mk-article-content th,
.mk-article-content td {
    border: 1px solid var(--dv-gray-200);
    padding: 10px 12px;
    text-align: left;
}

.mk-article-content th {
    background: var(--dv-gray-50);
    font-weight: 700;
}

.mk-article-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--dv-gray-200);
}

@media (min-width: 768px) {
    .mk-article-nav {
        grid-template-columns: repeat(2, 1fr);
    }
}

.mk-article-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--dv-gray-200);
    border-radius: var(--dv-radius-md);
    padding: 14px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--dv-black);
}

.mk-article-nav-link:hover {
    border-color: var(--dv-black);
}

.mk-article-nav-link.is-next {
    justify-content: flex-end;
    text-align: right;
}

.mk-article-nav-link svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--dv-gray-400);
}

/* Barre de partage d'un article (plugin share.js). */
.mk-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--dv-gray-200);
}

.mk-share-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--dv-gray-600);
    margin-right: 4px;
}

.mk-share-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dv-gray-200);
    background: var(--dv-white);
    color: var(--dv-gray-600);
    padding: 0;
    font-size: 0.85rem;
}

/* Réseaux sociaux : Lucide rend un <svg>, FontAwesome garde un <i>. */
.mk-share-btn svg {
    width: 16px;
    height: 16px;
}

.mk-share-btn i {
    font-size: 0.95rem;
    line-height: 1;
}

.mk-share-btn:hover {
    border-color: var(--dv-black);
    background: var(--dv-black);
    color: var(--dv-white);
}

.mk-sidebar {
    border-top: 1px solid var(--dv-gray-200);
    padding-top: 26px;
}

@media (min-width: 992px) {
    .mk-sidebar {
        position: sticky;
        top: 88px;
        border-top: 0;
        padding-top: 0;
    }
}

.mk-sidebar-card + .mk-sidebar-card {
    margin-top: 22px;
}

.mk-sidebar h2 {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--dv-gray-400);
    margin: 0 0 16px;
}

.mk-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mk-sidebar li a {
    font-size: 0.87rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--dv-black);
}

.mk-sidebar li a:hover {
    color: var(--dv-red);
}

.mk-sidebar-cta {
    background: var(--dv-pink);
    border-radius: var(--dv-radius-lg);
    padding: 22px;
}

.mk-sidebar-cta h2 {
    color: var(--dv-black);
}

.mk-sidebar-cta p {
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0 0 16px;
}

/* Pagination Laravel dans la vitrine : neutralisée façon Monkeur. */
.mk-pagination .pagination {
    gap: 6px;
    margin: 0;
}

.mk-pagination .page-link {
    border: 1px solid var(--dv-gray-200);
    border-radius: var(--dv-radius-sm);
    color: var(--dv-black);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 8px 14px;
    box-shadow: none;
}

.mk-pagination .page-item.active .page-link {
    background: var(--dv-black);
    border-color: var(--dv-black);
    color: var(--dv-white);
}

.mk-pagination .page-item.disabled .page-link {
    color: var(--dv-gray-400);
    background: var(--dv-white);
}
/* ==========================================================================
   Contenu long-format (CGU / confidentialité)
   ========================================================================== */

.legal-content {
    padding: 20px 22px 40px;
}

.legal-content h2 {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 26px 0 10px;
}

.legal-content h2:first-child {
    margin-top: 0;
}

.legal-content p,
.legal-content li {
    font-size: 0.88rem;
    color: var(--dv-gray-900);
    line-height: 1.6;
}

.legal-content .legal-updated {
    color: var(--dv-gray-600);
    font-size: 0.8rem;
    margin-bottom: 24px;
}

/* ==========================================================================
   Carte de profil swipable (écran Rencontrer)
   ========================================================================== */

.dating-screen {
    height: 100%;
    padding: 12px;
    position: relative;
}

.swipe-stack {
    position: relative;
    height: 100%;
}

.profile-card {
    position: absolute;
    inset: 0;
    border-radius: var(--dv-radius-lg);
    overflow: hidden;
    background: var(--dv-gray-900);
}

.profile-card.stack-behind-1 {
    transform: scale(0.97) translateY(10px);
    z-index: 1;
    opacity: 0.7;
}

.profile-card.stack-behind-2 {
    transform: scale(0.94) translateY(20px);
    z-index: 0;
    opacity: 0.4;
}

.profile-card.stack-top {
    z-index: 2;
}

.profile-card-scroll {
    height: 100%;
    overflow-y: auto;
    scroll-snap-type: y proximity;
}

.profile-photo-frame {
    position: relative;
    height: 100%;
    min-height: 100%;
    scroll-snap-align: start;
}

.profile-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-photo-frame::before,
.profile-photo-frame::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 130px;
    pointer-events: none;
}

.profile-photo-frame::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(21, 21, 21, 0.55), transparent);
}

.profile-photo-frame::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(21, 21, 21, 0.75), transparent);
}

.profile-card-topbar {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.profile-identity .profile-name-line {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--dv-white);
    font-weight: 800;
    font-size: 1.15rem;
}

.profile-identity .online-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #38d67a;
    display: inline-block;
}

.profile-identity .verified-badge {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--dv-pink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dv-black);
}

.profile-identity .verified-badge svg {
    width: 11px;
    height: 11px;
}

.profile-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.profile-goal-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--dv-white);
    color: var(--dv-black);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--dv-radius-pill);
}

.profile-goal-badge svg {
    width: 12px;
    height: 12px;
}

.profile-location {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.78rem;
    font-weight: 600;
}

.profile-ellipsis-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(21, 21, 21, 0.45);
    border: none;
    color: var(--dv-white);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.profile-card-actions {
    position: absolute;
    bottom: 18px;
    left: 0;
    right: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.card-action-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--dv-white);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dv-black);
    box-shadow: 0 6px 16px rgba(21, 21, 21, 0.18);
}

.card-action-btn.is-primary {
    width: 62px;
    height: 62px;
    background: var(--dv-black);
    color: var(--dv-white);
}

.card-action-btn.is-dislike {
    color: var(--dv-gray-600);
}

.card-action-btn.is-like {
    color: var(--dv-red);
}

.card-action-btn:disabled {
    opacity: .5;
    pointer-events: none;
}

.profile-scroll-hint {
    position: absolute;
    bottom: 92px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    z-index: 3;
}

.profile-details-panel {
    scroll-snap-align: start;
    background: var(--dv-white);
    padding: 24px 20px 30px;
    min-height: 60%;
}

.profile-details-panel h3 {
    font-size: 1rem;
    font-weight: 800;
    margin: 22px 0 10px;
}

.profile-details-panel h3:first-child {
    margin-top: 0;
}

.profile-bio {
    font-size: 0.9rem;
    color: var(--dv-gray-900);
    line-height: 1.55;
}

.profile-info-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profile-info-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.88rem;
}

.profile-info-row svg,
.profile-info-row i {
    width: 18px;
    height: 18px;
    color: var(--dv-gray-600);
    flex: 0 0 auto;
}

.profile-info-row .info-label {
    color: var(--dv-gray-600);
    flex: 1;
}

.profile-info-row .info-value {
    font-weight: 700;
}

/* ==========================================================================
   Likes / Découverte — grilles
   ========================================================================== */

.grid-screen {
    padding: 16px;
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.mini-profile-card {
    position: relative;
    border-radius: var(--dv-radius-md);
    overflow: hidden;
    aspect-ratio: 3/4;
    background: var(--dv-gray-200);
}

.mini-profile-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mini-profile-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(21, 21, 21, 0.7), transparent 55%);
}

.mini-profile-card .mini-card-info {
    position: absolute;
    left: 10px;
    bottom: 8px;
    right: 10px;
    z-index: 2;
    color: var(--dv-white);
    font-size: 0.82rem;
    font-weight: 700;
}

.mini-profile-card.is-locked img {
    filter: blur(14px);
}

.mini-profile-card .lock-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    color: var(--dv-white);
    background: rgba(21, 21, 21, 0.25);
}

.mini-profile-card .lock-overlay svg {
    width: 22px;
    height: 22px;
}

.mini-profile-card .lock-overlay span {
    font-size: 0.68rem;
    font-weight: 700;
}

.section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.section-header-row h2 {
    font-size: 1rem;
    font-weight: 800;
    margin: 0;
}

.mood-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px; 
    scroll-behavior: smooth;

    /* Scrollbar native masquée : le défilement reste possible au doigt/à la
       molette, mais rien ne doit rappeler une barre de défilement de bureau. */
    scrollbar-width: none;
    -ms-overflow-style: none;

    /* Fondu aux deux bords : les avatars entrent/sortent sous une couche
       plutôt que de sembler déborder de l'écran (effet stories). */
    mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
}

.mood-rail::-webkit-scrollbar {
    display: none;
}

.mood-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 66px;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.mood-avatar-ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.mood-item span {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--dv-gray-600);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ==========================================================================
   Messages
   ========================================================================== */

.conversation-list {
    padding: 8px 0;
    border-bottom: 1px solid #f7f8f8;
}

.conversation-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
}

.conversation-item .conv-avatar {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border-radius: 50%;
    background-color: var(--dv-pink);
}

.conversation-item .conv-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.conversation-item .conv-avatar .online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #38d67a;
    border: 2px solid var(--dv-white);
}

.conversation-item .conv-body {
    flex: 1 1 auto;
    min-width: 0;
}

.conversation-item .conv-name {
    font-weight: 700;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.conversation-item .conv-preview {
    font-size: 0.82rem;
    color: var(--dv-gray-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-item .conv-meta {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.conversation-item .conv-time {
    font-size: 0.72rem;
    color: var(--dv-gray-400);
}

.conversation-item .conv-unread {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--dv-radius-pill);
    background: var(--dv-red);
    color: var(--dv-white);
    font-size: 0.68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-thread {
    padding: 16px 16px 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-bubble-row {
    display: flex;
}

.chat-bubble-row.is-me {
    justify-content: flex-end;
}

.chat-bubble {
    max-width: 78%;
    padding: 11px 15px;
    border-radius: 18px;
    font-size: 0.88rem;
    line-height: 1.4;

    /* Les sauts de ligne du texte sont rendus tels quels. C'est ce qui permet
       au message de bienvenue de la plateforme d'être structuré (titres, listes,
       paragraphes) sans qu'on ait à injecter du HTML dans une bulle : le corps
       du message reste échappé par Blade. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.chat-bubble-row:not(.is-me) .chat-bubble {
    background: var(--dv-gray-100);
    color: var(--dv-black);
    border-bottom-left-radius: 4px;
}

.chat-bubble-row.is-me .chat-bubble {
    background: var(--dv-pink);
    color: var(--dv-black);
    border-bottom-right-radius: 4px;
}

.chat-request-card {
    background: var(--dv-pink);
    border-radius: var(--dv-radius-md);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 700;
}

.chat-composer {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid var(--dv-gray-100);
    background: var(--dv-white);
}

.chat-composer textarea {
    flex: 1 1 auto;
    resize: none;
    border: 1.5px solid var(--dv-gray-200);
    border-radius: var(--dv-radius-md);
    padding: 11px 14px;
    font-family: inherit;
    font-size: 0.88rem;
    max-height: 90px;
}

.chat-composer textarea:focus {
    outline: none;
    border-color: var(--dv-black);
}

.chat-composer-send {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--dv-black);
    color: var(--dv-white);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.chat-char-count {
    text-align: right;
    font-size: 0.7rem;
    color: var(--dv-gray-400);
    padding: 0 14px 6px;
}

/* ==========================================================================
   Profil
   ========================================================================== */

.profile-account-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 26px 20px 20px;
}

.profile-account-avatar {
    position: relative;
    margin-bottom: 12px;
}

.profile-account-avatar img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
}

.profile-account-avatar .edit-avatar-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--dv-black);
    color: var(--dv-white);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--dv-white);
}

.profile-account-name {
    font-size: 1.15rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 6px;
}

.profile-account-sub {
    color: var(--dv-gray-600);
    font-size: 0.85rem;
    margin-top: 2px;
}

.popularity-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--dv-gray-100);
    padding: 6px 14px;
    border-radius: var(--dv-radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    margin-top: 10px;
}

.popularity-pill svg {
    width: 14px;
    height: 14px;
    color: var(--dv-red);
}

.plan-banner {
    margin: 4px 18px 18px;
    background: var(--dv-black);
    color: var(--dv-white);
    border-radius: var(--dv-radius-lg);
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.plan-banner h3 {
    font-size: 0.95rem;
    font-weight: 800;
    margin: 0 0 3px;
}

.plan-banner p {
    font-size: 0.78rem;
    color: var(--dv-gray-400);
    margin: 0;
}

.settings-group {
    margin: 18px 0;
}

.settings-group-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--dv-gray-400);
    margin-bottom: 8px;
    padding-left: 2px;
}

.settings-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 4px;
    border-bottom: 1px solid var(--dv-gray-100);
    font-size: 0.9rem;
    font-weight: 600;
}

.settings-item:last-child {
    border-bottom: none;
}

.settings-item .settings-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--dv-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dv-black);
    flex: 0 0 auto;
}

.settings-item .settings-icon svg {
    width: 17px;
    height: 17px;
}

/* .settings-item .settings-label {
    flex: 1 1 auto;
} */

.settings-item .settings-chevron {
    color: var(--dv-gray-400);
    width: 16px;
    height: 16px;
}

.settings-item.is-danger .settings-label {
    color: var(--dv-red);
}

.settings-item.is-danger .settings-icon {
    color: var(--dv-red);
}

/* ========================================
   Offcanvas — actions & second niveau
   ======================================== */

.offcanvas-dv-action {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 4px;
    font-weight: 700;
    font-size: 0.95rem;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    border-bottom: 1px solid var(--dv-gray-100);
}

.offcanvas-dv-action:last-child {
    border-bottom: none;
}

.offcanvas-dv-action .action-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--dv-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.offcanvas-dv-action.is-danger {
    color: var(--dv-red);
}

.offcanvas-dv-action.is-danger .action-icon {
    color: var(--dv-red);
}

.offcanvas-grabber {
    width: 40px;
    height: 4px;
    border-radius: var(--dv-radius-pill);
    background: var(--dv-gray-200);
    margin: 10px auto 4px;
}

/*
 * Bootstrap fixe la hauteur des offcanvas du bas à 30vh, quel que soit leur
 * contenu : trop court pour la plupart des offcanvas de l'app, qui obligent
 * alors à scroller dans une fenêtre minuscule. On laisse la hauteur suivre le
 * contenu, avec un minimum plus généreux ; le `max-height` propre à chaque
 * offcanvas (inline, quand il existe) continue de faire plafond.
 */
.offcanvas.offcanvas-bottom {
    height: auto;
    min-height: 45vh;
    max-height: 92vh;
}

/* ==========================================================================
   Popups transverses : mur premium, mur boost, fin de quota
   ========================================================================== */

.paywall-hero {
    text-align: center;
    padding: 8px 6px 12px;
}

.paywall-hero .paywall-icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--dv-black);
    color: var(--dv-pink);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 5px;
}

.paywall-hero h2 {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.paywall-hero p {
    font-size: 0.86rem;
    color: var(--dv-gray-600);
}

.paywall-feature-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 22px;
}

.paywall-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.88rem;
}

.paywall-feature-item .feature-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--dv-pink);
    color: var(--dv-black);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.feature-icon svg{
    height: 16px;
    width: 16px
}

.paywall-plans {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.paywall-plan-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1.5px solid var(--dv-gray-200);
    border-radius: var(--dv-radius-md);
    padding: 14px 16px;
    cursor: pointer;
}

.paywall-plan-option.is-selected {
    border-color: var(--dv-black);
    background: var(--dv-pink);
}

.paywall-plan-option .plan-option-name {
    font-weight: 700;
    font-size: 0.9rem;
}

.paywall-plan-option .plan-option-sub {
    font-size: 0.68rem;
    color: var(--dv-gray-600);
}

.paywall-plan-option .plan-option-price {
    font-weight: 800;
    font-size: 0.95rem;
}

.boost-carousel-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 20px;
}

.boost-carousel-item {
    flex: 0 0 78%;
    background: var(--dv-gray-50);
    border-radius: var(--dv-radius-md);
    padding: 16px;
    text-align: center;
}

.boost-carousel-item .boost-icon-circle {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--dv-black);
    color: var(--dv-pink);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}

.boost-carousel-item h4 {
    font-size: 0.88rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.boost-carousel-item p {
    font-size: 0.76rem;
    color: var(--dv-gray-600);
    margin: 0;
}

.boost-packs-row {
    display: flex;
    gap: 10px;
}

.boost-pack-card {
    flex: 1;
    border: 1.5px solid var(--dv-gray-200);
    border-radius: var(--dv-radius-md);
    padding: 14px 10px;
    text-align: center;
    cursor: pointer;
}

.boost-pack-card.is-selected {
    border-color: var(--dv-black);
    background: var(--dv-gray-50);
}

.boost-pack-card .pack-duration {
    font-weight: 800;
    font-size: 0.85rem;
}

.boost-pack-card .pack-price {
    font-size: 0.78rem;
    color: var(--dv-gray-600);
    margin-top: 3px;
}

.quota-screen {
    text-align: center;
    padding: 10px 8px 4px;
}

.quota-screen .quota-icon {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: var(--dv-gray-100);
    color: var(--dv-red);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}

.quota-screen h2 {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.quota-screen p {
    font-size: 0.87rem;
    color: var(--dv-gray-600);
    margin-bottom: 22px;
}

.quota-countdown {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 22px;
}

.quota-countdown div {
    background: var(--dv-gray-100);
    border-radius: var(--dv-radius-sm);
    padding: 10px 14px;
    text-align: center;
}

.quota-countdown strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
}

.quota-countdown span {
    font-size: 0.66rem;
    color: var(--dv-gray-600);
}

/* ==========================================================================
   Toast maison
   ========================================================================== */

.dv-toast-container {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 28px);
    max-width: calc(var(--dv-shell-width) - 32px);
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.dv-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--dv-black);
    color: var(--dv-white);
    border-radius: var(--dv-radius-md);
    padding: 12px 14px;
    opacity: 0;
    transform: translateY(-14px);
    transition: opacity .25s ease, transform .25s ease;
}

.dv-toast.is-shown {
    opacity: 1;
    transform: translateY(0);
}

.dv-toast .toast-avatar {
    position: relative;
    flex: 0 0 auto;
}

.dv-toast .toast-avatar img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.dv-toast .toast-event-icon {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--dv-red);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--dv-black);
}

.dv-toast .toast-event-icon svg {
    width: 10px;
    height: 10px;
    color: var(--dv-white);
}

.dv-toast .toast-body {
    flex: 1 1 auto;
    min-width: 0;
}

.dv-toast .toast-title {
    font-weight: 700;
    font-size: 0.85rem;
}

.dv-toast .toast-message {
    font-size: 0.78rem;
    color: var(--dv-gray-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==================
   Utilitaires
   ================== */
.w-30{width: 30%}
.w-40{width: 40%}
.w-60{width: 60%}
.w-70{width: 70%}
.text-muted-dv {
    color: var(--dv-gray-600);
}

.text-red-dv {
    color: var(--dv-red);
}

.divider-dv {
    height: 1px;
    background: var(--dv-gray-100);
    border: none;
    margin: 16px 0;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 30px;
    color: var(--dv-gray-600);
}

.empty-state .empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--dv-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    color: var(--dv-gray-400);
}

/* ==========================================================================
   PHASE 3 — Cœur applicatif
   Swipe, Activités, Découverte, Mood, popup profil, discussion.
   Sobriété assumée : pas de dégradé décoratif, pas d'ombre systématique,
   aucune carte à bordure gauche accentuée.
   ========================================================================== */

/* ----- Navbar : compteur de quota ----- */
.navbar-right-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.quota-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--dv-gray-100);
    color: var(--dv-black);
    font-size: .78rem;
    font-weight: 800;
    padding: 5px 11px;
    border-radius: var(--dv-radius-pill);
}

.quota-pill svg {
    width: 13px;
    height: 13px;
}

.popularity-pill.is-muted {
    color: var(--dv-gray-600);
    font-weight: 600;
    font-size: .72rem;
}

/* ----- Carte de profil : compléments ----- */
.profile-card.is-queued {
    display: none;
}

.profile-card.is-standalone {
    position: relative;
    inset: auto;
    height: 100%;
}

/* Retour visuel pendant le geste de swipe */
.profile-card.is-liking {
    outline: 3px solid var(--dv-pink);
    outline-offset: -3px;
}

.profile-card.is-passing {
    outline: 3px solid var(--dv-gray-400);
    outline-offset: -3px;
}

.profile-mood-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    background: var(--dv-pink);
    color: var(--dv-black);
    font-size: .7rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: var(--dv-radius-pill);
}

.profile-mood-tag svg {
    width: 12px;
    height: 12px;
}

.profile-boost-tag {
    position: absolute;
    top: 16px;
    right: 62px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--dv-black);
    color: var(--dv-pink);
    font-size: .66rem;
    font-weight: 800;
    padding: 4px 9px;
    border-radius: var(--dv-radius-pill);
}

.profile-boost-tag svg {
    width: 11px;
    height: 11px;
}

.profile-photo-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-bottom: 14px;
}

.profile-photo-strip img {
    width: 92px;
    height: 132px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: var(--dv-radius-md);
}

.profile-popularity {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 11px 14px;
    background: var(--dv-gray-100);
    border-radius: var(--dv-radius-md);
    font-size: .82rem;
    font-weight: 600;
}

.profile-popularity strong {
    margin-left: auto;
    font-size: 1rem;
    font-weight: 800;
}

.profile-popularity svg {
    width: 16px;
    height: 16px;
}

/* Les boutons flottants recouvrent le bas de la carte : on reserve la place. */
.profile-details-spacer {
    height: 92px;
}

.card-action-btn.is-request,
.card-action-btn.is-message {
    width: 46px;
    height: 46px;
}

/* ----- Cartes promotionnelles insérées dans la pile ----- */
.promo-card {
    background: var(--dv-black);
    color: var(--dv-white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.promo-card-body {
    width: 100%;
    padding: 26px 24px;
    text-align: center;
    overflow-y: auto;
    max-height: 100%;
}

.promo-eyebrow {
    display: inline-block;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--dv-pink);
    margin-bottom: 10px;
}

.promo-card h3 {
    font-size: 1.28rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 10px;
}

.promo-lead {
    font-size: .86rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .78);
    margin: 0 0 20px;
}

.promo-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    text-align: left;
}

.promo-benefits li {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 0;
    font-size: .84rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.promo-benefits li:last-child {
    border-bottom: none;
}

.promo-benefits svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    color: var(--dv-pink);
}

.promo-skip {
    display: block;
    width: 100%;
    margin-top: 12px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, .6);
    font-size: .8rem;
    font-weight: 600;
    padding: 8px;
    text-align: center;
}

.quota-emoji,.end-quota {
    font-size: 2.6rem;
    margin: 0 auto;
    height: 48px; 
    width: 48px; 
    border-radius: 50rem; display: flex;
    align-items: center;
    justify-content: center; 
    margin-bottom: 12px;
    color: var(--dv-black);
}
.end-quota{
    background-color: var(--dv-pink);
}

/*
 * Boutons sur fond noir (.promo-card, .likes-unlock, .discovery-cta) :
 * .btn-dv-primary et .btn-dv-outline sont noirs par défaut et disparaissent
 * sur ces cartes. On les repasse en rose/blanc pour rester lisibles.
 */
.promo-card .btn-dv-primary,
.likes-unlock .btn-dv-primary,
.discovery-cta .btn-dv-primary {
    background: var(--dv-pink);
    color: var(--dv-black);
}

.promo-card .btn-dv-outline {
    background: transparent;
    border-color: rgba(255, 255, 255, .5);
    color: var(--dv-white);
}

/* ----- Onglets Activités (bordure basse discrète) ----- */
.activity-tabs {
    display: flex;
    border-bottom: 1px solid var(--dv-gray-200);
    background: var(--dv-white);
    flex: 0 0 auto;
}

.activity-tab {
    position: relative;
    flex: 1;
    text-align: center;
    padding: 13px 6px 11px;
    font-size: .84rem;
    font-weight: 700;
    color: var(--dv-gray-600);
    margin-bottom: -1px;

    /* Réinitialisation du chrome natif : l'onglet est un lien sur Activités
       mais un `<button>` sur Parrainage (les trois panneaux vivent sur la même
       page). Sans ce reset, le bouton arrive avec son fond gris et son cadre,
       et la rangée n'a plus rien du trait sobre voulu par la charte. */
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    font-family: inherit;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
}

.activity-tab.is-active {
    color: var(--dv-black);
    border-bottom-color: var(--dv-black);
}

/* Rangée à libellés longs (Parrainage) : le texte passe sur deux lignes, les
   onglets doivent rester de même hauteur et le texte respirer. */
.activity-tabs.is-compact .activity-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 8px 4px 6px;
    font-size: .76rem;
    letter-spacing: -0.1px;
}

/* Badge de comptage flottant, en haut à droite du texte de l'onglet. */
.tab-badge {
    position: absolute;
    top: 6px;
    right: calc(50% - 34px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--dv-radius-pill);
    background: var(--dv-red);
    color: var(--dv-white);
    font-size: .62rem;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
}

/* ----- CTA Booster / Premium sur les pages Activités ----- */
.activity-cta-row {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    background: var(--dv-white);
    border-bottom: 1px solid var(--dv-gray-200);
}

.activity-cta-row .btn-dv-sm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: center;
}

.activity-cta-row .btn-dv-sm svg {
    width: 14px;
    height: 14px;
}

/* ----- Sous-onglets en pastilles (reçues / envoyées) ----- */
.pill-tabs {
    display: flex;
    gap: 8px;
    padding: 14px 16px 6px;
}

.pill-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--dv-radius-pill);
    border: 1px solid var(--dv-gray-200);
    background: var(--dv-white);
    font-size: .82rem;
    font-weight: 700;
    color: var(--dv-gray-600);
}

.pill-tab.is-active {
    background: var(--dv-black);
    border-color: var(--dv-black);
    color: var(--dv-white);
}

.pill-count {
    font-size: .7rem;
    font-weight: 800;
    opacity: .75;
}

/* ----- Cartes de demande ----- */
.request-panel {
    padding: 8px 16px 20px;
}

.request-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    margin-bottom: 10px;
    background: var(--dv-white);
    border: 1px solid var(--dv-gray-200);
    border-radius: 16px;
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

.request-avatar {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
}

.request-body {
    flex: 1 1 auto;
    min-width: 0;
}

.request-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.request-head strong {
    font-size: .92rem;
    font-weight: 800;
}

.request-date {
    font-size: .7rem;
    font-weight: 600;
    color: var(--dv-gray-400);
    flex: 0 0 auto;
}

.request-message {
    margin: 6px 0 10px;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--dv-gray-600);
}

.request-message.is-preset {
    font-style: italic;
}

.request-actions {
    display: flex;
    gap: 8px;
}

.request-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.request-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: var(--dv-radius-pill);
    font-size: .72rem;
    font-weight: 800;
    background: var(--dv-gray-100);
    color: var(--dv-gray-600);
}

.request-status.is-success {
    background: #e8f8ee;
    color: #1c7a44;
}

.request-status.is-danger {
    background: #fdecec;
    color: var(--dv-red);
}

.request-status.is-waiting {
    background: var(--dv-pink);
    color: var(--dv-black);
}

/* ----- Page Likes ----- */
.likes-unlock {
    margin: 16px;
    padding: 22px 20px;
    border-radius: var(--dv-radius-lg);
    background: var(--dv-black);
    color: var(--dv-white);
    text-align: center;
}

.likes-unlock .unlock-icon {
    width: 46px;
    height: 46px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--dv-pink);
    color: var(--dv-black);
    display: flex;
    align-items: center;
    justify-content: center;
}

.likes-unlock h2 {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0 0 6px;
}

.likes-unlock p {
    font-size: .84rem;
    color: rgba(255, 255, 255, .75);
    margin: 0 0 16px;
}

.likes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 4px 16px 20px;
}

/* ----- Notifications ----- */
.notif-hint {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 12px 16px 0;
    font-size: .76rem;
    color: var(--dv-gray-600);
}

.notif-hint svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.notif-list {
    padding: 8px 0 20px;
}

.notif-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--dv-gray-100);
}

.notif-item.is-unread {
    background: #fdf7ff;
}

.notif-select {
    flex: 0 0 auto;
}

.notif-avatar {
    position: relative;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
}

.notif-avatar img,
.notif-avatar-fallback {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.notif-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dv-gray-100);
    color: var(--dv-gray-600);
}

/* Auteur d'un like, pour un compte sans l'avantage « voir qui m'a liké » : la
   photo servie est déjà le fichier flouté, le liseré rappelle que c'est
   volontaire et non une image qui n'a pas fini de charger. */
.notif-avatar.is-locked img {
    border: 1.5px dashed var(--dv-gray-300);
}

.notif-event-icon {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--dv-black);
    color: var(--dv-pink);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--dv-white);
}

.notif-event-icon svg {
    width: 9px;
    height: 9px;
}

.notif-body {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
}

.notif-body strong {
    display: block;
    font-size: .85rem;
    font-weight: 700;
}

.notif-message {
    display: block;
    font-size: .78rem;
    color: var(--dv-gray-600);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notif-date {
    display: block;
    font-size: .68rem;
    color: var(--dv-gray-400);
    margin-top: 3px;
    font-weight: 600;
}

.notif-item-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.notif-read,
.notif-delete {
    flex: 0 0 auto;
    color: var(--dv-gray-400);
}

.notif-read:hover {
    color: var(--dv-black);
}

.notif-bulk-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 16px;
    background: var(--dv-black);
    color: var(--dv-white);
    font-size: .8rem;
    font-weight: 700;
}

.notif-bulk-bar > div {
    display: flex;
    gap: 7px;
}

/* ----- Rail Mood (Découverte) ----- */
.mood-rail-wrap {
    position: relative;
    background: var(--dv-white);
    border-bottom: 1px solid var(--dv-gray-200);
    padding: 10px 20px;
}

/* Boutons de contrôle du carrousel : cercle blanc, bordure fine plutôt
   qu'une ombre portée (CLAUDE.md — pas d'ombre par habitude de style). */
.rail-nav-btn {
    position: absolute;
    top: 24px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--dv-white);
    border: 1px solid var(--dv-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    cursor: pointer;
    padding: 0;
    color: var(--dv-black);
}

.rail-nav-btn svg {
    width: 14px;
    height: 14px;
}

.rail-nav-btn.is-prev {
    left: 0;
}

.rail-nav-btn.is-next {
    right: 0;
}

/* Anneau rose plein = profil boosté ; anneau gris fin = mood simple. */
.mood-avatar-ring {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    padding: 2px;
    border: 2px solid var(--dv-gray-200);
}

.mood-avatar-ring.is-boosted {
    border-color: var(--dv-pink);
    border-width: 3px;
}

.mood-avatar-ring.is-add {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dv-gray-100);
    color: var(--dv-gray-600);
    border: 1px dashed var(--dv-gray-400);
}

.mood-online-dot {
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #38d67a;
    border: 2px solid var(--dv-white);
}

.mood-current {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 16px 0;
    padding: 9px 13px;
    background: var(--dv-pink);
    color: var(--dv-black);
    border-radius: var(--dv-radius-pill);
    font-size: .78rem;
    font-weight: 700;
}

.mood-current svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.mood-remove {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--dv-black);
    display: flex;
    padding: 0;
}

.mood-remove svg {
    width: 15px;
    height: 15px;
}

/* ----- Grille Découverte ----- */
.discovery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 14px 16px 0;
}

.mini-boost-tag {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--dv-black);
    color: var(--dv-pink);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mini-boost-tag svg {
    width: 11px;
    height: 11px;
}

.discovery-cta {
    margin: 14px 16px;
    padding: 22px 20px;
    border-radius: var(--dv-radius-lg);
    background: var(--dv-black);
    color: var(--dv-white);
    text-align: center;
    /* Occupe l'equivalent de deux lignes de la grille. */
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.discovery-cta .cta-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 11px;
    border-radius: 50%;
    background: var(--dv-pink);
    color: var(--dv-black);
    display: flex;
    align-items: center;
    justify-content: center;
}

.discovery-cta h3 {
    font-size: 1.02rem;
    font-weight: 800;
    margin: 0 0 7px;
}

.discovery-cta p {
    font-size: .82rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .75);
    margin: 0 0 16px;
}

/* ----- Popup profil ----- */
.profile-popup {
    position: absolute;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(21, 21, 21, .55);
}

.profile-popup-shell {
    position: relative;
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    border-radius: var(--dv-radius-lg);
    overflow: hidden;
    background: var(--dv-gray-900);
}

.profile-popup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 6;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(21, 21, 21, .55);
    color: var(--dv-white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-popup-body {
    height: 100%;
}

.popup-loader {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dans la popup, l'ellipsis de la carte doublerait le bouton de fermeture. */
.profile-popup .profile-ellipsis-btn {
    display: none;
}

/* ----- Discussion ----- */
.chat-notice {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    background: var(--dv-gray-100);
    color: var(--dv-gray-600);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.4;
}

.chat-notice svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.chat-notice.is-limit {
    background: var(--dv-pink);
    color: var(--dv-black);
}

.chat-composer-disabled {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: var(--dv-gray-100);
    color: var(--dv-gray-400);
    font-size: .8rem;
    font-weight: 600;
    text-align: center;
}

.chat-composer-disabled svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.chat-time {
    display: block;
    margin-top: 3px;
    font-size: .62rem;
    font-weight: 600;
    opacity: .6;
}

.chat-char-count {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.chat-messages-left {
    color: var(--dv-gray-400);
}

/* ----- Profil : alerte de statut, boost actif ----- */
.status-notice {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 14px 16px 0;
    padding: 14px;
    border-radius: var(--dv-radius-md);
    background: var(--dv-pink);
    color: var(--dv-black);
}

.status-notice.is-danger {
    background: #fdecec;
    color: var(--dv-red);
}

.status-notice svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: 1px;
}

.status-notice strong {
    display: block;
    font-size: .87rem;
    font-weight: 800;
    margin-bottom: 3px;
}

.status-notice p {
    margin: 0;
    font-size: .8rem;
    line-height: 1.45;
}

.profile-boost-active {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 4px 11px;
    border-radius: var(--dv-radius-pill);
    background: var(--dv-black);
    color: var(--dv-pink);
    font-size: .72rem;
    font-weight: 800;
}

.profile-boost-active svg {
    width: 12px;
    height: 12px;
}

.settings-sub {
    display: block;
    font-size: .7rem;
    font-weight: 600;
    color: var(--dv-gray-400);
    margin-top: 2px;
}

/* ----- Offcanvas : demande de numéro ----- */
.offcanvas-dv-title {
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 6px;
}

.request-preset {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 12px 0;
    padding: 13px 14px;
    border-radius: var(--dv-radius-md);
    background: var(--dv-gray-100);
    font-size: .83rem;
    line-height: 1.45;
    font-style: italic;
    color: var(--dv-gray-600);
}

.request-preset svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    margin-top: 2px;
}

.request-toggle-message {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 4px 0;
    font-size: .82rem;
    font-weight: 700;
    color: var(--dv-black);
    text-decoration: underline;
}

.request-toggle-message svg {
    width: 14px;
    height: 14px;
}

.request-custom-message {
    margin-top: 10px;
}

.char-counter {
    text-align: right;
    font-size: .72rem;
    font-weight: 600;
    color: var(--dv-gray-400);
    margin-top: 4px;
}

.section-divider {
    height: 1px;
    background: var(--dv-gray-200);
    margin: 24px 0 18px;
}

.empty-state h3 {
    font-size: .98rem;
    font-weight: 800;
    color: var(--dv-black);
    margin: 0 0 6px;
}

.empty-state p {
    font-size: .84rem;
    line-height: 1.5;
    margin: 0 0 16px;
}

/* ----- Cartes de demande : alignement sur la capture d'inspiration ----- */
/* Contrôle segmenté « Reçues / Envoyées » : conteneur gris, onglet actif blanc. */
.pill-tabs {
    display: flex;
    gap: 0;
    margin: 14px 16px 10px;
    padding: 4px;
    background: var(--dv-gray-100);
    border-radius: var(--dv-radius-pill);
}

.pill-tab {
    flex: 1;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 10px 12px;
    border-radius: var(--dv-radius-pill);
    color: var(--dv-gray-600);
}

.pill-tab.is-active {
    background: var(--dv-white);
    border: none;
    color: var(--dv-black);
}

/* La carte passe en colonne : identité en haut, actions pleine largeur en bas. */
.request-card {
    display: block;
}

.request-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.request-top strong {
    display: block;
    font-size: .95rem;
    font-weight: 800;
}

.request-sub {
    display: block;
    margin-top: 2px;
    font-size: .78rem;
    font-weight: 500;
    color: var(--dv-gray-600);
}

.request-body {
    margin-top: 12px;
}

.request-message {
    margin: 0 0 12px;
    font-style: italic;
}

.request-actions {
    display: flex;
    gap: 10px;
}

/* Les deux actions occupent la même largeur : refuser reste aussi accessible
   qu'accepter, seul le contraste hiérarchise. */
.request-actions .btn-dv {
    flex: 1;
}

/* ----- État vide de la page Likes (cf. captures-design) ----- */
.likes-empty {
    padding: 40px 28px;
    text-align: center;
}

.likes-empty-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 34px;
}

.likes-empty-avatar {
    border-radius: 50%;
    background: var(--dv-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dv-gray-400);
}

.likes-empty-avatar.is-main {
    width: 108px;
    height: 108px;
    z-index: 2;
    border: 4px solid var(--dv-white);
}

.likes-empty-avatar.is-main svg {
    width: 34px;
    height: 34px;
}

/* Les deux vignettes latérales suggèrent d'autres profils sans en montrer. */
.likes-empty-avatar.is-side {
    width: 68px;
    height: 68px;
}

.likes-empty-avatar.is-side:first-child {
    margin-right: -22px;
}

.likes-empty-avatar.is-side:nth-child(3) {
    margin-left: -22px;
}

.likes-empty-badge {
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--dv-pink);
    color: var(--dv-black);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid var(--dv-white);
    z-index: 3;
}

.likes-empty h2 {
    font-size: 1.32rem;
    font-weight: 800;
    margin: 0 0 10px;
}

.likes-empty p {
    font-size: .88rem;
    line-height: 1.55;
    color: var(--dv-gray-600);
    margin: 0 0 26px;
}

.likes-empty-secondary {
    display: block;
    margin-top: 16px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--dv-black);
}

/* ----- Boutons d'action de la carte : alignement SPEC.md §10 + captures -----
   « boutons circulaires avec uniquement une icône noir foncé, flottants sur la
   carte ». Les quatre boutons partagent donc le même fond blanc : la hiérarchie
   se fait par la taille, pas par un aplat noir qui écraserait le reste. */
.card-action-btn,
.card-action-btn.is-primary {
    background: var(--dv-white);
    color: var(--dv-black);
}

.card-action-btn.is-primary {
    width: 62px;
    height: 62px;
}

.card-action-btn.is-dislike,
.card-action-btn.is-like {
    color: var(--dv-black);
}

.card-action-btn svg {
    width: 22px;
    height: 22px;
}

.card-action-btn.is-primary svg {
    width: 26px;
    height: 26px;
}

/* Ville en pastille sombre, sur sa propre ligne, comme sur la capture. */
.profile-meta-row {
    flex-wrap: wrap;
}

.profile-location {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(21, 21, 21, .55);
    color: var(--dv-white);
    padding: 4px 10px;
    border-radius: var(--dv-radius-pill);
    font-size: .72rem;
    font-weight: 700;
}

/* ==========================================================================
   Boutons d'actions rapides navbar (Booster / Filtrer)
   ========================================================================== */

.navbar-quick-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.navbar-quick-actions .navbar-action img {
    width: 18px;
    height: 18px;
}

.quota-pill img {
    width: 14px;
    height: 14px;
}

/* ==========================================================================
   Filtres de recherche (Rencontrer / Découverte)
   ========================================================================== */

.filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 14px 2px;
    border-bottom: 1px solid var(--dv-gray-100);
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    text-align: left;
}

.filter-row:last-of-type {
    border-bottom: none;
}

/* Ligne de filtre dont la valeur se choisit dans un sélecteur en modale
   (pays, ville) plutôt que dans une liste de chips. Le <select> natif est
   masqué par le plugin ; c'est .mss-control qui occupe la place, calé à
   droite par data-ms-width. */
.filter-row-select {
    justify-content: space-between;
}

.filter-row-select .mss-control {
    margin-left: auto;
}

.filter-row-label {
    font-size: .88rem;
    font-weight: 700;
    color: var(--dv-black);
}

.filter-row-value {
    font-size: .82rem;
    font-weight: 600;
    color: var(--dv-gray-600);
    margin-left: auto;
    margin-right: 6px;
}

.filter-row-nav {
    cursor: pointer;
}

.filter-row-nav .settings-chevron {
    flex: 0 0 auto;
}

.filter-age-steppers {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-age-sep {
    color: var(--dv-gray-400);
    font-weight: 700;
}

.stepper-dv-sm button {
    width: 32px;
    height: 32px;
    font-size: 1rem;
}

.stepper-dv-sm input {
    width: 34px;
    font-size: .85rem;
}

/* Interrupteur "Profils vérifiés uniquement" : un peu plus grand que la
   taille par défaut de Bootstrap, plus facile à toucher sur mobile. */
.filter-switch .form-check-input {
    width: 2.6em;
    height: 1.4em;
    cursor: pointer;
}

.filter-premium-banner {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--dv-black);
    color: var(--dv-white);
    padding: 12px 14px;
    border-radius: var(--dv-radius-md);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 14px;
}

.filter-premium-banner svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--dv-pink);
}

/* Un compte non Premium peut ouvrir la sélection mais pas la modifier :
   les puces restent visibles, juste inertes. */
#advancedFieldOffcanvas .chip:has(input:disabled) {
    cursor: default;
    opacity: .7;
}

/* ==========================================================================
   Phase 5 — Monétisation : wizard des murs, moyens de paiement, pages de retour
   ========================================================================== */

/* Le wizard tient dans le même offcanvas : la hauteur doit laisser respirer
   l'étape 1 (packs + liste d'avantages) sans déborder de la coque mobile. */
.paywall-offcanvas {
    border-radius: 20px 20px 0 0;
    max-height: 92%;
}

.paywall-offcanvas .offcanvas-header {
    align-items: center;
}

/* --- Étape 1 : cartes de packs --- */

.paywall-plan-option {
    position: relative;
}

.plan-option-badge {
    position: absolute;
    top: -9px;
    left: 14px;
    background: var(--dv-black);
    color: var(--dv-pink);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 3px 9px;
    border-radius: var(--dv-radius-pill);
}

.plan-option-pricing {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.plan-option-compare {
    font-size: 0.72rem;
    color: var(--dv-gray-400);
    text-decoration: line-through;
}

.paywall-feature-item .feature-value {
    display: block;
    font-style: normal;
    font-size: 0.76rem;
    color: var(--dv-gray-600);
}

.boost-pack-card {
    position: relative;
}

.boost-pack-card .pack-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dv-black);
    color: var(--dv-pink);
    font-size: 0.58rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: var(--dv-radius-pill);
    white-space: nowrap;
}

.boost-pack-card .pack-compare {
    font-size: 0.68rem;
    color: var(--dv-gray-400);
    text-decoration: line-through;
}

/* --- Étape 2 : moyens de paiement --- */

.paywall-methods-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--dv-gray-600);
    margin-bottom: 8px;
}

.paywall-methods {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.paywall-method {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid var(--dv-gray-200);
    border-radius: var(--dv-radius-md);
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
}

.paywall-method.is-selected {
    border-color: var(--dv-black);
    background: var(--dv-gray-50);
}

.paywall-method input[type="radio"] {
    accent-color: var(--dv-black);
    flex: 0 0 auto;
}

.paywall-method img {
    height: 22px;
    width: auto;
    max-width: 56px;
    object-fit: contain;
    flex: 0 0 auto;
}

/* Moyen de paiement indisponible depuis le pays du visiteur (Mobile Money hors
   d'Afrique) : affiché mais hors d'atteinte, pour que l'absence se comprenne. */
.paywall-method.is-unavailable {
    opacity: 0.45;
    cursor: not-allowed;
    background: var(--dv-gray-50);
}

.paywall-method.is-unavailable img {
    filter: grayscale(1);
}

/* Champ neutralisé : le « Numéro à débiter » quand on règle par carte. */
.form-group-dv.is-inactive label {
    color: var(--dv-gray-400);
}

.form-group-dv.is-inactive .input-dv {
    background: var(--dv-gray-50);
    color: var(--dv-gray-400);
    cursor: not-allowed;
}

/* --- Récapitulatif d'achat, partagé par le wizard et les pages de retour --- */

.pay-recap {
    border: 1px solid var(--dv-gray-200);
    border-radius: var(--dv-radius-md);
    padding: 4px 14px;
}

.pay-recap-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    font-size: 0.84rem;
    border-bottom: 1px solid var(--dv-gray-100);
}

.pay-recap-line:last-child {
    border-bottom: 0;
}

.pay-recap-line span {
    color: var(--dv-gray-600);
    flex: 0 0 auto;
}

.pay-recap-line strong {
    font-weight: 700;
    text-align: right;
}

.pay-recap-line.is-total strong {
    font-size: 1.05rem;
}

.pay-reference {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

/* --- Pages « paiement en cours » et « paiement non abouti » --- */

.pay-status {
    text-align: center;
    padding: 12px 4px 24px;
}

.pay-status-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}

.pay-status-icon.is-waiting {
    background: var(--dv-black);
    color: var(--dv-pink);
}

.pay-status-icon.is-waiting i {
    animation: dv-spin 1.1s linear infinite;
}

.pay-status-icon.is-failed {
    background: var(--dv-gray-100);
    color: var(--dv-red);
}

@keyframes dv-spin {
    to { transform: rotate(360deg); }
}

.pay-status-title {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.pay-status-text {
    font-size: 0.86rem;
    color: var(--dv-gray-600);
    margin-bottom: 18px;
}

.pay-status-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    background: var(--dv-gray-100);
    border-radius: var(--dv-radius-md);
    padding: 12px 14px;
    font-size: 0.78rem;
    color: var(--dv-gray-600);
    margin-bottom: 18px;
}

.pay-status-warning i {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--dv-red);
}

.pay-progress {
    height: 5px;
    border-radius: var(--dv-radius-pill);
    background: var(--dv-gray-200);
    overflow: hidden;
    margin-top: 20px;
}

.pay-progress-bar {
    height: 100%;
    width: 40%;
    border-radius: var(--dv-radius-pill);
    background: var(--dv-black);
    animation: dv-pay-progress 1.6s ease-in-out infinite;
}

@keyframes dv-pay-progress {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(260%); }
}

.pay-elapsed {
    font-size: 0.74rem;
    color: var(--dv-gray-400);
    margin-top: 10px;
}

.pay-status-footnote {
    font-size: 0.74rem;
    color: var(--dv-gray-400);
    margin-top: 22px;
    margin-bottom: 0;
}

/* --- Écrans « Mon abonnement » et « Mes boosts » --- */

.sub-status {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--dv-gray-100);
    border-radius: var(--dv-radius-lg);
    padding: 16px;
    margin-bottom: 18px;
}

.sub-status.is-premium {
    background: var(--dv-black);
    color: var(--dv-white);
}

.sub-status-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: var(--dv-white);
    color: var(--dv-black);
}

.sub-status.is-premium .sub-status-icon {
    background: var(--dv-pink);
}

.sub-status-body h2 {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 3px;
}

.sub-status-body p {
    font-size: 0.8rem;
    color: var(--dv-gray-600);
    margin: 0;
}

.sub-status.is-premium .sub-status-body p {
    color: var(--dv-pink);
}

.quota-rows {
    display: flex;
    flex-direction: column;
}

.quota-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 2px;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--dv-gray-100);
}

.quota-row:last-child {
    border-bottom: 0;
}

.quota-row-label {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--dv-gray-600);
}

.quota-row-label i {
    width: 17px;
    height: 17px;
}

.quota-row-value {
    font-weight: 700;
    flex: 0 0 auto;
}

.history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 2px;
    border-bottom: 1px solid var(--dv-gray-100);
}

.history-row:last-child {
    border-bottom: 0;
}

.history-row strong {
    display: block;
    font-size: 0.86rem;
    font-weight: 700;
}

.history-row span {
    font-size: 0.74rem;
    color: var(--dv-gray-600);
}

.history-amount {
    text-align: right;
    flex: 0 0 auto;
}

.history-badge {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--dv-radius-pill);
    background: var(--dv-gray-100);
    color: var(--dv-gray-600);
    white-space: nowrap;
}

.history-badge.is-active,
.history-badge.is-completed {
    background: var(--dv-black);
    color: var(--dv-pink);
}

.history-badge.is-failed,
.history-badge.is-cancelled {
    background: #fdecec;
    color: var(--dv-red);
}

.settings-empty {
    font-size: 0.82rem;
    color: var(--dv-gray-400);
    padding: 10px 2px;
    margin: 0;
}

/* --- Badge Premium et éléments verrouillés (Phase 5) --- */

/* Volontairement distinct du badge « profil vérifié » (rond noir, coche) :
   l'un atteste d'une identité contrôlée, l'autre d'un compte payant. */
.premium-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--dv-black);
    color: var(--dv-pink);
    flex: 0 0 auto;
}

.premium-badge i {
    width: 11px;
    height: 11px;
}

.mini-premium-icon {
    width: 12px;
    height: 12px;
    color: var(--dv-pink);
}

/* Bouton d'action dont la fonction est réservée au Premium : reste cliquable
   (il ouvre le mur de conversion), mais s'annonce comme verrouillé. */
.navbar-action.is-locked {
    position: relative;
    opacity: 0.75;
}

.navbar-action .action-lock {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--dv-black);
    color: var(--dv-pink);
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar-action .action-lock i {
    width: 8px;
    height: 8px;
}

.locked-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--dv-gray-100);
    border-radius: var(--dv-radius-md);
    padding: 12px 14px;
    font-size: 0.82rem;
    color: var(--dv-gray-600);
    margin-bottom: 12px;
}

.locked-notice i {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* --- Chat monétisé : accusé de lecture et verrou du message unique --- */

.chat-receipt {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.66rem;
    color: var(--dv-gray-400);
    margin-top: 3px;
    align-self: flex-end;
}

.chat-receipt i {
    width: 12px;
    height: 12px;
}

.chat-receipt.is-read {
    color: var(--dv-black);
    font-weight: 600;
}

/* Accroche de conversion sous le fil, pour les comptes gratuits. */
.chat-receipt-teaser {
    display: block;
    width: 100%;
    background: none;
    border: 0;
    padding: 10px 0 2px;
    font-size: 0.74rem;
    color: var(--dv-gray-600);
    text-align: center;
    cursor: pointer;
}

.chat-awaiting-notice {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--dv-gray-100);
    border-radius: var(--dv-radius-md);
    padding: 10px 12px;
    margin-bottom: 8px;
    font-size: 0.76rem;
    color: var(--dv-gray-600);
}

.chat-awaiting-notice i {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.chat-awaiting-cta {
    background: var(--dv-black);
    color: var(--dv-pink);
    border: 0;
    border-radius: var(--dv-radius-pill);
    padding: 5px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    margin-left: auto;
}

.chat-composer textarea:disabled,
.chat-composer-send:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* --- Carrousel d'avantages (murs Premium et Boost) --- */

.feature-carousel {
    margin-bottom: 18px;
}

.feature-carousel-track,
.boost-carousel-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.feature-carousel-track::-webkit-scrollbar,
.boost-carousel-track::-webkit-scrollbar {
    display: none;
}

.feature-carousel-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

.carousel-dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: var(--dv-radius-pill);
    background: var(--dv-gray-200);
    cursor: pointer;
    transition: width 0.2s ease, background 0.2s ease;
}

.carousel-dot.is-active {
    width: 18px;
    background: var(--dv-black);
}

.paywall-features-title {
    font-size: 0.8rem;
    color: var(--dv-gray-600);
    margin-bottom: 10px;
}

.paywall-features-title strong {
    color: var(--dv-black);
}

/* Avantage non inclus : affiché tout de même, mais visiblement fermé — c'est la
   comparaison entre packs qui donne envie de monter en gamme. */
.paywall-feature-item.is-locked {
    opacity: 0.5;
}

.paywall-feature-item.is-locked .feature-icon {
    background: var(--dv-gray-100);
    color: var(--dv-gray-400);
}

.paywall-feature-item.is-locked .feature-value {
    font-style: italic;
}

/* --- Incitation à la vérification, en fin de carte de profil --- */

.verify-cta {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--dv-gray-100);
    border-radius: var(--dv-radius-lg);
    padding: 14px;
    margin-top: 16px;
}

.verify-cta-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
}

.verify-cta-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.verify-cta-patch {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--dv-black);
    color: var(--dv-pink);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--dv-gray-100);
}

.verify-cta-patch i {
    width: 11px;
    height: 11px;
}

.verify-cta-body strong {
    display: block;
    font-size: 0.86rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.verify-cta-body p {
    font-size: 0.74rem;
    color: var(--dv-gray-600);
    margin: 0;
}

.verify-cta-chevron {
    width: 18px;
    height: 18px;
    color: var(--dv-gray-400);
    flex: 0 0 auto;
    margin-left: auto;
}

/* --- Indicateur de crédits (dropdown des compteurs) --- */

.credits-indicator {
    display: inline-flex;
}

.navbar-action.is-alert {
    position: relative;
}

.navbar-action.is-alert::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dv-red);
}

.credits-menu {
    width: 258px;
    border: 1px solid var(--dv-gray-200);
    border-radius: var(--dv-radius-md);
    padding: 12px;
}

.credits-menu-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dv-gray-400);
    margin-bottom: 10px;
}

.credit-row {
    margin-bottom: 12px;
}

.credit-row:last-of-type {
    margin-bottom: 0;
}

.credit-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
}

.credit-row-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    color: var(--dv-gray-600);
}

.credit-row-label i {
    width: 14px;
    height: 14px;
}

.credit-row-value {
    font-size: 0.76rem;
    font-weight: 700;
    flex: 0 0 auto;
}

.credit-bar {
    height: 5px;
    border-radius: var(--dv-radius-pill);
    background: var(--dv-gray-200);
    overflow: hidden;
}

.credit-bar-fill {
    height: 100%;
    border-radius: var(--dv-radius-pill);
    background: var(--dv-black);
    transition: width 0.3s ease;
}

.credit-row.is-exhausted .credit-row-value {
    color: var(--dv-red);
}

.credit-row.is-exhausted .credit-bar-fill {
    background: var(--dv-red);
}

.credit-row-reset {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    color: var(--dv-gray-400);
    margin-top: 5px;
}

.credit-row-reset i {
    width: 11px;
    height: 11px;
}

/* --- Dropdown explicatif d'un avantage payant (bouton « retour ») --- */

.rewind-nudge {
    display: inline-flex;
}

/* La coque de l'application est étroite (640 px max) : un dropdown trop large
   déborderait sur mobile, où il occupe déjà presque toute la largeur. */
.nudge-menu {
    width: min(268px, calc(100vw - 36px));
    border: 1px solid var(--dv-gray-200);
    border-radius: var(--dv-radius-md);
    padding: 14px;
}

.nudge-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
}

.nudge-head strong {
    font-size: 0.86rem;
    font-weight: 800;
}

.nudge-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--dv-pink);
    color: var(--dv-black);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.nudge-icon i {
    width: 15px;
    height: 15px;
}

.nudge-text {
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--dv-gray-600);
    margin: 0 0 8px;
}

.nudge-text.is-muted {
    color: var(--dv-gray-400);
    font-size: 0.72rem;
    margin-bottom: 12px;
}

/* Appel à l'action du dropdown des crédits : pleine largeur, en bas. */
.credits-menu-cta {
    margin-top: 14px;
}

/* ==========================================================================
   Réglages de notification (profil → Notifications)
   ========================================================================== */

/* Aide sous le libellé d'un réglage : l'interrupteur seul ne dit pas ce qu'il
   coupe, et un utilisateur qui ne sait pas coupe tout par précaution. */
.settings-item .settings-help {
    display: block;
    font-style: normal;
    font-weight: 500;
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--dv-gray-400);
    margin-top: 2px;
}

/* L'interrupteur de la ligne ne doit pas s'écraser quand le libellé est long. */
.settings-item .form-switch {
    flex: 0 0 auto;
    padding-left: 2.6em;
}

.settings-item .form-check-input {
    width: 2.2em;
    height: 1.2em;
    cursor: pointer;
    border-color: var(--dv-gray-200);
}

.settings-item .form-check-input:checked {
    background-color: var(--dv-black);
    border-color: var(--dv-black);
}

.settings-item .form-check-input:focus {
    border-color: var(--dv-gray-200);
    box-shadow: none;
}

/* État du push sur l'appareil courant : une ligne distincte des réglages, car
   elle porte une action immédiate et non une préférence à enregistrer. */
.notif-device {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--dv-gray-100);
    border-radius: var(--dv-radius-md);
}

.notif-device-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--dv-pink);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dv-black);
    flex: 0 0 auto;
}

.notif-device-icon svg {
    width: 18px;
    height: 18px;
}

.notif-device-body {
    flex: 1 1 auto;
    min-width: 0;
}

.notif-device-body strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
}

.notif-device-body p {
    margin: 2px 0 0;
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--dv-gray-400);
}

.notif-device .btn-dv {
    flex: 0 0 auto;
}

/* ==========================================================================
   Présence (point vert) — rafraîchie par le polling
   ========================================================================== */

/* La pastille est toujours présente dans le DOM et masquée hors ligne : le
   polling n'a qu'une classe à basculer, ce qui évite d'insérer ou de retirer
   un élément dans une mise en page déjà positionnée. */
.online-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #38d67a;
    display: inline-block;
    flex: 0 0 auto;
}

.online-dot:not(.is-online),
.mood-online-dot:not(.is-online) {
    display: none;
}

/* Mention « · en ligne » dans l'entête d'une discussion. */
.conv-presence {
    font-weight: 600;
    font-size: 0.72rem;
    color: var(--dv-gray-400);
}

.conv-presence:not(.is-online) {
    display: none;
}

/* ==========================================================================
   Pages d'erreur (403, 404, 419, 429, 500, 503)
   ========================================================================== */

/* Ces pages n'utilisent pas `.app-shell` : elles doivent tenir seules, sans
   navigation ni session, y compris quand c'est la base de données qui est
   tombée. D'où un jeu de règles autonome. */
.error-body {
    margin: 0;
    min-height: 100vh;
    background: var(--dv-gray-50, #fafafa);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    color: var(--dv-black);
}

.error-shell {
    min-height: 100vh;
    max-width: 460px;
    margin: 0 auto;
    padding: 24px 20px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

.error-card {
    width: 100%;
    background: var(--dv-white);
    border-radius: var(--dv-radius-lg, 22px);
    padding: 34px 26px 28px;
    text-align: center;
}

.error-code {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--dv-black);
    background: var(--dv-pink);
    border-radius: 999px;
    padding: 6px 14px;
    margin-bottom: 18px;
}

.error-title {
    font-size: 1.22rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 10px;
}

.error-message {
    font-size: 0.86rem;
    line-height: 1.65;
    color: var(--dv-gray-600, #6b6b6b);
    margin: 0 0 24px;
}

.error-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.error-brand {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--dv-gray-400);
    margin: 0;
}

.error-brand span {
    color: var(--dv-red);
}

/* Avertissement avant suppression de compte : sobre, sans dramatiser, mais
   assez distinct du reste pour qu'on ne le survole pas. */
.account-warning {
    background: var(--dv-gray-50);
    border-radius: var(--dv-radius-md);
    padding: 14px 16px;
}

.account-warning p {
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--dv-gray-600);
    margin: 0 0 8px;
}

.account-warning p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Bannière d'installation de l'application (PWA)
   ==========================================================================
   Une seule bannière pour les deux univers : elle se pose en haut de
   `.app-shell` côté application, et dans l'en-tête `.mk-nav` côté vitrine.
   Volontairement sobre — un bandeau publicitaire en haut d'un écran de
   rencontre se fait fermer avant d'être lu. */

.mk-install-banner {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--dv-gray-50);
    border-bottom: 1px solid var(--dv-gray-200);
}

.mk-install-banner[hidden] {
    display: none;
}

.mk-install-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: var(--dv-radius-sm);
}

.mk-install-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.mk-install-text strong {
    font-size: 0.82rem;
    font-weight: 700;
}

.mk-install-text span {
    font-size: 0.72rem;
    color: var(--dv-gray-600);
    /* Une seule ligne : la bannière ne doit jamais grandir au point de manger
       la hauteur utile de l'écran, qui est déjà contrainte. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mk-install-cta {
    flex: 0 0 auto;
}

.mk-install-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--dv-radius-pill);
    background: transparent;
    color: var(--dv-gray-400);
}

.mk-install-close svg {
    width: 16px;
    height: 16px;
}

/* Sous 360px, la phrase d'explication passe à la trappe avant le bouton :
   c'est l'action qui doit survivre à l'étroitesse, pas l'argumentaire. */
@media (max-width: 359px) {
    .mk-install-text span {
        display: none;
    }
}

/* Mode d'emploi iOS */
.mk-install-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mk-install-steps li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.88rem;
    line-height: 1.5;
}

.mk-install-step-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--dv-radius-pill);
    background: var(--dv-pink);
    color: var(--dv-black);
    font-size: 0.78rem;
    font-weight: 700;
}

/* Dans la vitrine, la bannière s'aligne sur la grille du contenu plutôt que de
   coller aux bords de l'écran sur grand écran. */
.mk-nav .mk-install-banner {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    background: transparent;
    border-bottom: 0;
    border-top: 0;
}

.mk-nav .mk-install-banner:not([hidden]) {
    border-bottom: 1px solid var(--dv-gray-100);
}

/* ==========================================================================
   Parrainage — écran « Mon profil › Parrainage »
   ========================================================================== */

.referral-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 16px 0;
}

.referral-stat {
    text-align: center;
    padding: 14px 6px;
    border: 1px solid var(--dv-gray-200);
    border-radius: var(--dv-radius-md);
    background: var(--dv-white);
}

.referral-stat.is-highlight {
    background: var(--dv-pink);
    border-color: var(--dv-pink);
}

.referral-stat strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dv-black);
    line-height: 1.2;
}

.referral-stat span {
    display: block;
    margin-top: 3px;
    font-size: 0.72rem;
    color: var(--dv-gray-600);
}

.referral-stat.is-highlight span {
    color: var(--dv-gray-900);
}

.referral-code-box,
.referral-link-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border: 1px dashed var(--dv-gray-400);
    border-radius: var(--dv-radius-md);
    background: var(--dv-gray-50);
    margin-bottom: 10px;
}

.referral-code {
    flex: 1 1 auto;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--dv-black);
}

.referral-link {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.78rem;
    color: var(--dv-gray-600);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.referral-copy {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: var(--dv-radius-pill);
    background: var(--dv-black);
    color: var(--dv-white);
}

.referral-copy i,.referral-copy svg {
    width: 17px;
    height: 17px;
}

.referral-hint {
    font-size: 0.78rem;
    margin-bottom: 10px;
}

.referral-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-radius: var(--dv-radius-md);
    background: var(--dv-black);
    color: var(--dv-white);
    margin: 16px 0;
}

.referral-balance span {
    display: block;
    font-size: 0.75rem;
    color: var(--dv-gray-400);
}

.referral-balance strong {
    font-size: 1.1rem;
    font-weight: 700;
}

.referral-balance-paid {
    font-size: 0.72rem;
    color: var(--dv-gray-400);
    text-align: right;
}

.referral-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--dv-gray-100);
}

.referral-row:last-child {
    border-bottom: none;
}

.referral-row img {
    width: 40px;
    height: 40px;
    border-radius: var(--dv-radius-pill);
    object-fit: cover;
    flex: 0 0 auto;
}

.referral-row-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--dv-radius-pill);
    background: var(--dv-gray-100);
    color: var(--dv-black);
}

.referral-row-icon i {
    width: 17px;
    height: 17px;
}

.referral-row-body {
    flex: 1 1 auto;
    min-width: 0;
}

.referral-row-body strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--dv-black);
}

.referral-row-body span {
    display: block;
    font-size: 0.74rem;
    color: var(--dv-gray-600);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.referral-row-state {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--dv-radius-pill);
    background: var(--dv-gray-100);
    color: var(--dv-gray-600);
}

.referral-row-state.is-ok {
    background: var(--dv-pink);
    color: var(--dv-black);
}

.referral-empty {
    text-align: center;
    padding: 22px 10px;
    color: var(--dv-gray-600);
}

.referral-empty i {
    width: 26px;
    height: 26px;
    color: var(--dv-gray-400);
}

.referral-empty p {
    margin: 8px 0 0;
    font-size: 0.82rem;
}

/* ==========================================================================
   Compte officiel de la plateforme — discussion en lecture seule
   ========================================================================== */

.chat-official-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: var(--dv-radius-pill);
    background: var(--dv-pink);
    color: var(--dv-black);
    font-size: 0.56rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    vertical-align: middle;
}

.chat-official-badge svg {
    width: 13px;
    height: 13px;
}

/* ----- Parrainage : pédagogie et simulateur de gains ----- */

.referral-faq p {
    margin: 0 0 10px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--dv-gray-600);
}

.referral-faq p:last-child {
    margin-bottom: 0;
}

.referral-faq strong {
    color: var(--dv-black);
}

.sim-field {
    margin-bottom: 18px;
}

.sim-rate-value {
    float: right;
    font-weight: 700;
    color: var(--dv-black);
}

/* Curseur : `range` et non `number`, qui est proscrit par la charte. */
.sim-range {
    width: 100%;
    height: 4px;
    border-radius: var(--dv-radius-pill);
    background: var(--dv-gray-200);
    appearance: none;
    -webkit-appearance: none;
    outline: none;
}

.sim-range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--dv-black);
    cursor: pointer;
}

.sim-range::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: var(--dv-black);
    cursor: pointer;
}

.sim-result {
    text-align: center;
    padding: 18px 14px;
    border-radius: var(--dv-radius-md);
    background: var(--dv-black);
    color: var(--dv-white);
    margin-bottom: 10px;
}

.sim-result span {
    display: block;
    font-size: 0.75rem;
    color: var(--dv-gray-400);
}

.sim-result strong {
    display: block;
    margin: 4px 0 2px;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
}

.sim-result em {
    display: block;
    font-style: normal;
    font-size: 0.72rem;
    color: var(--dv-gray-400);
}

/* ==========================================================================
   Demandes de versement des gains de parrainage
   ========================================================================== */

.payout-methods {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.payout-method {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--dv-gray-200);
    border-radius: var(--dv-radius-md);
    background: var(--dv-white);
    cursor: pointer;
}

.payout-method.is-active {
    border-color: var(--dv-black);
    background: var(--dv-gray-50);
}

.payout-method input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.payout-method-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--dv-radius-pill);
    background: var(--dv-gray-100);
    color: var(--dv-black);
}

.payout-method.is-active .payout-method-icon {
    background: var(--dv-pink);
}

.payout-method-icon i {
    width: 17px;
    height: 17px;
}

.payout-method-body {
    flex: 1 1 auto;
    min-width: 0;
}

.payout-method-body strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--dv-black);
}

.payout-method-body em {
    display: block;
    font-style: normal;
    font-size: 0.74rem;
    color: var(--dv-gray-600);
}

.withdrawal-recap {
    text-align: center;
    padding: 16px 14px;
    border-radius: var(--dv-radius-md);
    border: 1px dashed var(--dv-gray-400);
    background: var(--dv-gray-50);
    margin: 16px 0 12px;
}

.withdrawal-recap span {
    display: block;
    font-size: 0.74rem;
    color: var(--dv-gray-600);
}

.withdrawal-recap strong {
    display: block;
    margin: 2px 0;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--dv-black);
}

.withdrawal-recap em {
    display: block;
    font-style: normal;
    font-size: 0.72rem;
    color: var(--dv-gray-600);
}

.withdrawal-open {
    padding: 16px;
    border-radius: var(--dv-radius-md);
    border: 1px solid var(--dv-gray-200);
    background: var(--dv-white);
    margin-bottom: 16px;
}

.withdrawal-open-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.withdrawal-open-head strong {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--dv-black);
}

.withdrawal-open p {
    margin: 0 0 12px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--dv-gray-600);
}

.badge-dv {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--dv-radius-pill);
    background: var(--dv-black);
    color: var(--dv-white);
    font-size: 0.7rem;
    font-weight: 700;
}

.withdrawal-reason {
    margin: -4px 0 10px 52px;
    font-size: 0.76rem;
    color: var(--dv-red);
}

/* Champ de code à usage unique, saisi d'un bloc (le parcours de connexion
   utilise `.otp-inputs`, six cases distinctes ; ici un seul champ suffit). */
.otp-input {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 10px;
}

/* Le bloc de solde devient cliquable vers l'écran de retrait. */
a.referral-balance {
    text-decoration: none;
}

.referral-balance-cta {
    display: block;
    margin-top: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--dv-pink);
}
.site-logo {
    width: 165px; 
}
@media screen and (max-width: 768px){
    .site-logo {
    width: 120px; 
}
}

/* ==========================================================================
   CORRECTIFS D'ERGONOMIE MOBILE
   Regroupés ici et en fin de fichier : ce sont des redéfinitions volontaires
   de règles déclarées plus haut, elles doivent gagner sans avoir à gonfler
   artificiellement leur spécificité.
   ========================================================================== */

/* ----- 1. Le bas d'écran ne doit jamais sortir de la zone visible -----
   `100dvh` suit la barre d'URL des navigateurs mobiles, mais la coquille
   restait plus haute que le viewport visible sur les appareils qui ne
   l'implémentent pas (ou qui la recalculent en retard) : la barre d'onglets
   se retrouvait sous le pli, et il fallait scroller pour la faire remonter.
   `100svh` — la *plus petite* hauteur de viewport, barre d'URL déployée —
   garantit que le bas de la coquille est toujours à l'écran. */
html,
body {
    height: 100%;
    height: 100svh;
}

/* Seulement pour les écrans applicatifs : la vitrine et le blog n'utilisent
   pas `.app-shell` et doivent, eux, garder le défilement de page natif. */
body:has(> .app-shell) {
    overflow: hidden;
    overscroll-behavior-y: none;
}

.app-shell {
    height: 100vh;
    height: 100svh;
}

/* ----- 2. Barre d'onglets : ancrée au bas de la coquille, jamais dans le flux -----
   En `position: absolute` sur la coquille (qui est `position: relative`), elle
   ne dépend plus de la hauteur du contenu : c'est la zone de contenu qui
   défile sous elle. La réserve de place se fait par un padding bas, pour que
   le dernier élément d'une liste reste atteignable. */
.app-bottom-nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: var(--dv-pink);
    border-top: 1px solid rgba(21, 21, 21, .08);
}

.app-shell:has(.app-bottom-nav) .app-content {
    padding-bottom: calc(var(--dv-bottom-nav-height) + env(safe-area-inset-bottom));
}

/* Sur fond rose, le gris clair d'origine ne se lisait plus : on passe sur du
   noir atténué pour l'onglet au repos, noir plein pour l'onglet actif. */
.bottom-nav-item {
    color: rgba(21, 21, 21, .55);
}

.bottom-nav-item.is-active {
    color: var(--dv-black);
}

/* L'anneau de la pastille centrale doit être de la couleur de la barre pour
   qu'elle se détache : ici la barre est rose, pas blanche. */
.bottom-nav-item.is-primary .nav-primary-dial {
    border-color: var(--dv-pink);
}

@media (min-width: 641px) {
    .app-shell {
        height: var(--dv-shell-height);
    }
}

/* ----- 3. Carte de profil : la photo ne doit pas dépasser la carte -----
   `min-height: 100%` se résolvait en hauteur intrinsèque de l'image quand la
   hauteur du parent devenait indéfinie — la photo prenait alors bien plus que
   l'écran sur mobile. La borne haute la ramène dans le cadre de la carte. */
.profile-photo-frame {
    height: 100%;
    min-height: 0;
    max-height: 100%;
}

/* ----- 4. Galerie du profil : 3 photos par ligne, puis retour à la ligne -----
   L'ancienne bande en `flex` + `overflow-x` écrasait les vignettes dès la
   quatrième photo sur les écrans étroits. Une grille de trois colonnes garde
   une largeur proportionnelle quel que soit le nombre de photos. */
.profile-photo-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    overflow: visible;
    padding-bottom: 0;
    margin-bottom: 14px;
}

.profile-photo-strip a {
    display: block;
}

.profile-photo-strip img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--dv-radius-md);
}

/* ----- 5. Hiérarchie des actions : demander le numéro passe devant le like -----
   Le produit existe pour faire sortir deux personnes de l'application vers un
   vrai contact téléphonique : c'est donc « Demander le numéro » qui occupe la
   place centrale et le seul aplat de couleur de la carte. */
.card-action-btn.is-request {
    width: 62px;
    height: 62px;
    background: var(--dv-pink);
    color: var(--dv-black);
}

.card-action-btn.is-request svg {
    width: 26px;
    height: 26px;
}

.card-action-btn.is-like,
.card-action-btn.is-message,
.card-action-btn.is-dislike {
    width: 52px;
    height: 52px;
    background: var(--dv-white);
    color: var(--dv-black);
}

/* ----- 6. Navbar « Rencontrer » : avatar de l'utilisateur + actions élargies ----- */
.navbar-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    display: block;
    border: 2px solid var(--dv-pink);
}

.navbar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-navbar .navbar-action {
    width: 32px;
    height: 32px;
}

.app-navbar .navbar-action svg {
    width: 19px;
    height: 19px;
}

.navbar-quick-actions .navbar-action img {
    width: 19px;
    height: 19px;
}

.quota-pill {
    font-size: .83rem;
    padding: 6px 12px;
}

.quota-pill img {
    width: 15px;
    height: 15px;
}