/* ==========================================================
   Page publique de parrainage (/parrain/{pseudo})
   ========================================================== */
.profil-parrain{width:100%;max-width:1080px;margin:auto;padding:24px 16px 48px}

/* Bandeau affiché au parrain lorsqu'il consulte sa propre page */
.profil-proprietaire{display:grid;justify-items:start;gap:6px;max-width:760px;margin:0 auto 16px;padding:14px 16px;border:1px dashed #7dd3fc;border-radius:12px;background:#f0f9ff;color:#075985;font-size:14px;line-height:1.45}
.profil-proprietaire-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:#0f172a;color:#fff;font-size:12px;font-weight:700}
.profil-proprietaire a{font-weight:700;color:#0086b3;text-decoration:underline;white-space:nowrap}
.profil-proprietaire-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:4px}
.profil-proprietaire .profil-proprietaire-apercu{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border:1px solid #0086b3;border-radius:999px;background:#fff;text-decoration:none}
.profil-proprietaire .profil-proprietaire-apercu:hover{background:#e0f2fe}

/* Pastille flottante de l'aperçu visiteur, visible uniquement par le parrain */
.profil-apercu-visiteur{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom));left:50%;z-index:40;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;border-radius:999px;background:#0f172a;color:#fff;font-size:14px;font-weight:600;white-space:nowrap;box-shadow:0 12px 28px -10px rgb(0 0 0 / .5);transform:translateX(-50%)}
.profil-apercu-visiteur a{padding:8px 14px;border-radius:999px;background:#dbff50;color:#0f172a;font-weight:700;text-decoration:none}
.profil-apercu-visiteur a:hover{background:#cdf53b}
body:has(.profil-apercu-visiteur){padding-bottom:80px}

/* En-tête */
.profil-entete{position:relative;overflow:hidden;display:grid;justify-items:center;gap:10px;max-width:760px;margin:0 auto 20px;padding:32px 24px;border-radius:20px;background:linear-gradient(135deg,#00acdd 0%,#0086b3 100%);color:#fff;text-align:center;box-shadow:0 18px 36px -22px rgb(0 134 179 / .8)}
.profil-entete::before,.profil-entete::after{content:"";position:absolute;border-radius:999px;background:rgb(219 255 80 / .2);pointer-events:none}
.profil-entete::before{top:-50px;right:-40px;width:160px;height:160px}
.profil-entete::after{bottom:-60px;left:-50px;width:140px;height:140px;background:rgb(255 255 255 / .1)}
.profil-entete>*{position:relative;z-index:1}
.profil-surtitre{color:#dbff50;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.profil-titre{font-size:32px;font-weight:800;line-height:1.1;overflow-wrap:anywhere}
.profil-accroche{max-width:36ch;color:rgb(255 255 255 / .92);font-size:16px;line-height:1.45}
.profil-entete .profil-bouton-partage{min-height:48px;margin-top:6px;padding:12px 24px;border-color:#dbff50;border-radius:999px;background:#dbff50;color:#0f172a;font-size:15px;font-weight:700;box-shadow:0 6px 16px -8px rgb(0 0 0 / .45);transition:transform .15s ease,background-color .15s ease}
.profil-entete .profil-bouton-partage:hover{border-color:#cdf53b;background:#cdf53b}
.profil-entete .profil-bouton-partage:active{transform:scale(.97)}
.profil-entete .profil-bouton-partage:focus-visible{outline-color:#fff}

/* Recherche et filtres, collés en haut de l'écran */
.profil-outils{position:sticky;top:0;z-index:30;margin:0 -16px 12px;padding:12px 16px 8px;background:rgb(249 250 251 / .96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:box-shadow .2s ease}
.profil-outils.est-collee{box-shadow:0 10px 18px -14px rgb(0 0 0 / .35)}
.profil-recherche{position:relative;max-width:760px;margin:0 auto}
.profil-recherche-icone{position:absolute;top:50%;left:16px;width:20px;height:20px;color:#9ca3af;transform:translateY(-50%);pointer-events:none}
.profil-recherche-champ{width:100%;min-height:48px;padding:12px 16px 12px 46px;border:1px solid #d1d5db;border-radius:999px;background:#fff;color:#111827;font-size:16px;box-shadow:0 1px 2px rgb(0 0 0 / .04)}
.profil-recherche-champ::placeholder{color:#9ca3af}
.profil-recherche-champ:focus{outline:none;border-color:#00acdd;box-shadow:0 0 0 3px rgb(0 172 221 / .2)}
.profil-categories{display:flex;gap:8px;max-width:760px;margin:0 auto;padding:10px 2px 4px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.profil-categories::-webkit-scrollbar{display:none}
.profil-categorie{display:inline-flex;flex-shrink:0;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border:1px solid #e5e7eb;border-radius:999px;background:#fff;color:#374151;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.profil-categorie:hover{border-color:#9ca3af}
.profil-categorie[aria-pressed="true"]{border-color:#0f172a;background:#0f172a;color:#fff}
.profil-categorie-nombre{padding:1px 7px;border-radius:999px;background:#f3f4f6;color:#6b7280;font-size:11px;font-weight:700}
.profil-categorie[aria-pressed="true"] .profil-categorie-nombre{background:rgb(255 255 255 / .2);color:#fff}
.profil-categorie:focus-visible,.profil-code:focus-visible{outline:3px solid #00acdd;outline-offset:2px}
.profil-resultat{max-width:760px;margin:4px auto 0;padding:0 4px;color:#6b7280;font-size:12px}

/* Grille des offres : 1 colonne sur téléphone, 2 sur tablette, 3 sur ordinateur */
.profil-offres{display:grid;gap:12px}
.profil-offre,.profil-compte{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px}
.profil-offre{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:16px;transition:border-color .2s ease,box-shadow .2s ease}
.profil-offre:hover{border-color:#bae6fd;box-shadow:0 12px 24px -18px rgb(0 0 0 / .4)}
.profil-offre[hidden],.profil-aucun-resultat[hidden]{display:none}
.profil-offre-vide{grid-column:1 / -1;display:grid;gap:6px;max-width:760px;width:100%;margin:0 auto}
.profil-offre-entete{display:flex;gap:12px;align-items:center}
.profil-offre-entete img{width:48px;height:48px;flex-shrink:0;border:1px solid #f3f4f6;border-radius:12px;background:#fff;object-fit:contain}
.profil-offre-identite{min-width:0}
.profil-offre-nom{color:#111827;font-size:16px;font-weight:700;line-height:1.25}
.profil-offre-categorie{margin-top:2px;color:#6b7280;font-size:12px}
.profil-avantage{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;color:#4b5563;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
/* Aligne coupons et boutons en bas des cartes d'une même rangée */
.profil-parrainage{display:grid;gap:6px;margin-top:auto}
.profil-avantage+.profil-primaire,.profil-offre-entete+.profil-primaire{margin-top:auto}
.profil-parrainage-libelle{color:#6b7280;font-size:12px;font-weight:600}

/* Code ou lien présenté comme un coupon : un appui sur le code le copie */
.profil-copie-offre{display:flex;align-items:center;gap:8px;padding:5px 5px 5px 14px;border:2px dashed #7dd3fc;border-radius:12px;background:#f0f9ff}
.profil-code{flex:1;min-width:0;overflow:hidden;color:#0369a1;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:16px;font-weight:700;letter-spacing:.04em;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;-webkit-user-select:all;user-select:all}
.profil-code.profil-code-lien{font-family:inherit;font-size:14px;font-weight:600;letter-spacing:0}
.profil-copie-offre .copy-btn{flex-shrink:0;min-height:40px;padding:8px 16px;border:0;border-radius:8px;background:#0f172a;color:#fff}
.profil-copie-offre .copy-btn:hover{background:#1e293b}
.profil-contact{width:100%}
.profil-offre>.profil-bouton{width:100%}
/* Lien vers l'offre complète, aux couleurs du site */
.profil-offre>.profil-primaire{min-height:42px;padding:10px 16px;border-color:#00acdd;border-radius:10px;background:#00acdd;color:#fff;box-shadow:0 1px 2px rgb(0 0 0 / .08)}
.profil-offre>.profil-primaire:hover{border-color:#0097c1;background:#0097c1}

/* Aucun résultat et invitation à créer sa propre page */
.profil-aucun-resultat{display:grid;justify-items:center;gap:8px;max-width:520px;margin:24px auto;padding:24px;border:1px dashed #d1d5db;border-radius:16px;background:#fff;text-align:center}
.profil-invitation{display:grid;justify-items:center;gap:10px;max-width:760px;margin:40px auto 0;padding:28px 24px;border-radius:20px;background:#0f172a;color:#fff;text-align:center}
.profil-invitation h2{font-size:20px;font-weight:800;line-height:1.25}
.profil-invitation p{max-width:46ch;color:#cbd5e1;font-size:14px;line-height:1.5}
.profil-invitation .profil-invitation-bouton{margin-top:4px;padding:12px 24px;border-color:#dbff50;border-radius:999px;background:#dbff50;color:#0f172a;font-weight:700}
.profil-invitation .profil-invitation-bouton:hover{border-color:#cdf53b;background:#cdf53b}

@media(min-width:768px){
    .profil-parrain{padding:32px 24px 56px}
    .profil-outils{margin:0 -24px 16px;padding:14px 24px 10px}
    .profil-recherche,.profil-categories,.profil-resultat{max-width:none}
    .profil-offres{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}
@media(min-width:1024px){
    /* Barre sur une seule ligne : recherche à gauche, catégories à droite */
    .profil-outils{display:grid;grid-template-columns:340px minmax(0,1fr);align-items:center;column-gap:16px}
    .profil-recherche,.profil-categories,.profil-resultat{margin:0}
    .profil-categories{min-width:0;padding-top:4px}
    .profil-resultat{grid-column:1 / -1;margin-top:4px}
    .profil-offres{grid-template-columns:repeat(3,minmax(0,1fr))}
    .profil-titre{font-size:36px}
}
/* Une ou deux offres : colonne unique centrée, alignée sur l'en-tête */
@media(min-width:768px){
    .profil-offres.profil-offres-reduites{grid-template-columns:minmax(0,1fr);max-width:760px;margin:0 auto}
}
/* Souris : barre de défilement fine et visible pour les catégories */
@media(pointer:fine){
    .profil-categories{padding-bottom:8px;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}
    .profil-categories::-webkit-scrollbar{display:block;height:6px}
    .profil-categories::-webkit-scrollbar-thumb{border-radius:999px;background:#cbd5e1}
}

/* ==========================================================
   Composants partagés avec l'espace parrain (/moncompte)
   ========================================================== */
.profil-bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:1px solid #d1d5db;border-radius:8px;background:#fff;color:#374151;font-weight:600;font-size:14px;text-align:center;cursor:pointer;text-decoration:none}
.profil-bouton:hover{background:#f3f4f6}
.profil-primaire{background:#00acdd;border-color:#00acdd;color:#fff}
.profil-primaire:hover{background:#0097c1;border-color:#0097c1}
.profil-bouton:focus-visible,.profil-url:focus-visible,.profil-fermer:focus-visible{outline:3px solid #00acdd;outline-offset:3px}
.profil-compte h2{margin-bottom:8px}.profil-compte p{margin-bottom:12px}
.profil-compte-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.profil-url{width:100%;min-width:0;border:1px solid #d1d5db;border-radius:8px;background:#f9fafb;padding:12px;font-size:14px;color:#374151}
/* ---------- Fenêtre de partage ----------
   Laptop : carte centrée. Téléphone (< 640 px) : panneau qui glisse depuis le bas, à portée du pouce. */
.profil-dialog{width:calc(100% - 32px);max-width:460px;max-height:calc(100dvh - 32px);overflow:auto;margin:auto;padding:0;border:0;border-radius:20px;background:#fff;color:#111827;box-shadow:0 24px 64px -16px rgb(15 23 42 / .45);overscroll-behavior:contain}
.profil-dialog::backdrop{background:rgb(15 23 42 / .55);backdrop-filter:blur(2px)}
.profil-dialog[open]{animation:profil-dialog-entree .22s ease-out}
@keyframes profil-dialog-entree{from{opacity:0;transform:translateY(12px) scale(.98)}}

.profil-dialog-haut{position:relative;overflow:clip;padding:22px 24px 20px;background:linear-gradient(135deg,#00acdd 0%,#0086b3 100%);color:#fff}
.profil-dialog-haut::after{content:"";position:absolute;top:-48px;right:-48px;width:150px;height:150px;border-radius:999px;background:rgb(219 255 80 / .22);pointer-events:none}
.profil-dialog-haut > *{position:relative;z-index:1}
.profil-dialog-poignee{display:none}
.profil-dialog-entete{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.profil-dialog-surtitre{margin-bottom:2px;color:#dbff50;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.profil-dialog-titre{font-size:22px;font-weight:800;line-height:1.2}
.profil-dialog-resume{margin-top:6px;color:rgb(255 255 255 / .92);font-size:14px;line-height:1.45}
.profil-fermer{display:inline-flex;flex-shrink:0;width:36px;height:36px;align-items:center;justify-content:center;margin:-4px -8px 0 0;border:0;border-radius:999px;background:rgb(255 255 255 / .16);color:#fff;font-size:24px;line-height:1;cursor:pointer;transition:background-color .15s ease}
.profil-fermer:hover{background:rgb(255 255 255 / .28)}
.profil-dialog .profil-fermer:focus-visible,.profil-dialog-copier:focus-visible{outline:3px solid #dbff50;outline-offset:2px}

/* Lien présenté comme un coupon, bouton de copie accolé */
.profil-dialog-lien{display:flex;gap:6px;margin-top:16px;padding:5px;border:1px dashed rgb(255 255 255 / .55);border-radius:14px;background:rgb(255 255 255 / .14)}
.profil-dialog-lien .profil-url{flex:1;padding:8px 10px;border:0;background:transparent;color:#fff;font-size:14px;font-weight:600;text-overflow:ellipsis}
.profil-dialog-lien .profil-url:focus-visible{outline:2px solid #dbff50;outline-offset:0}
.profil-dialog-copier{flex-shrink:0;min-height:42px;padding:0 16px;border:0;border-radius:10px;background:#dbff50;color:#0f172a;font-size:14px;font-weight:800;white-space:nowrap;cursor:pointer;transition:transform .15s ease,background-color .15s ease}
.profil-dialog-copier:hover{background:#e6ff80}
.profil-dialog-copier:active{transform:scale(.97)}
.profil-dialog-copier.est-copie{background:#fff;color:#047857}

.profil-dialog-corps{padding:20px 24px 22px}
.profil-dialog-whatsapp{display:flex;min-height:52px;align-items:center;justify-content:center;gap:10px;border-radius:14px;background:#25d366;color:#fff;font-size:16px;font-weight:800;text-decoration:none;box-shadow:0 6px 16px -8px rgb(37 211 102 / .8);transition:transform .15s ease,filter .15s ease}
.profil-dialog-whatsapp svg{width:22px;height:22px}
.profil-dialog-whatsapp:hover{filter:brightness(.96)}
.profil-dialog-whatsapp:active{transform:scale(.98)}

/* Tuiles des autres réseaux (icône ronde + libellé), façon feuille de partage */
.profil-partage-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:8px;margin:18px 0 6px}
.profil-partage-options [hidden]{display:none}
.profil-tuile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 2px;border:0;border-radius:12px;background:none;color:#374151;font-size:12.5px;font-weight:600;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .15s ease}
.profil-tuile:hover{background:#f1f5f9}
.profil-tuile-icone{display:inline-flex;width:48px;height:48px;align-items:center;justify-content:center;border-radius:999px;color:#fff;transition:transform .15s ease}
.profil-tuile:active .profil-tuile-icone{transform:scale(.93)}
.profil-tuile-icone svg{width:22px;height:22px}
.profil-tuile-facebook .profil-tuile-icone{background:#1877f2}
.profil-tuile-x .profil-tuile-icone{background:#0f172a}
.profil-tuile-x .profil-tuile-icone svg{width:19px;height:19px}
.profil-tuile-telegram .profil-tuile-icone{background:#229ed9}
.profil-tuile-email .profil-tuile-icone{background:#64748b}
.profil-tuile-natif .profil-tuile-icone{background:#e2e8f0;color:#0f172a}
.profil-tuile-natif .profil-tuile-icone svg{width:26px;height:26px;stroke-width:3}

.profil-dialog-qr{display:flex;width:100%;min-height:44px;align-items:center;justify-content:center;gap:8px;margin-top:10px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;color:#0f172a;font-size:14px;font-weight:700;cursor:pointer;transition:background-color .15s ease}
.profil-dialog-qr svg{width:18px;height:18px}
.profil-dialog-qr:hover,.profil-dialog-qr[aria-expanded="true"]{background:#f8fafc}
.profil-dialog-whatsapp:focus-visible,.profil-tuile:focus-visible,.profil-dialog-qr:focus-visible{outline:3px solid #00acdd;outline-offset:2px}
.profil-dialog-description{color:#4b5563;font-size:14px}
.profil-dialog-astuce{margin-top:14px;padding:10px 12px;border-radius:12px;background:#f0f9ff;color:#075985;font-size:13px;line-height:1.45}

#profil-qr{width:216px;height:216px;max-width:100%;margin:14px auto 8px;padding:12px;border:1px solid #e2e8f0;border-radius:16px;background:#fff}
#profil-qr img,#profil-qr canvas{max-width:100%;height:auto}
#profil-partage-statut{margin-top:10px;overflow-wrap:anywhere}
#profil-partage-statut:empty{display:none}

@media(max-width:639.98px){
    .profil-dialog{width:100%;max-width:none;max-height:92dvh;margin:auto 0 0;border-radius:24px 24px 0 0}
    .profil-dialog[open]{animation:profil-dialog-feuille .28s cubic-bezier(.2,.8,.2,1)}
    .profil-dialog-haut{padding:10px 18px 18px}
    .profil-dialog-poignee{display:block;width:40px;height:5px;margin:0 auto 12px;border-radius:999px;background:rgb(255 255 255 / .5)}
    .profil-dialog-titre{font-size:20px}
    .profil-dialog-corps{padding:18px 18px calc(18px + env(safe-area-inset-bottom))}
}
@keyframes profil-dialog-feuille{from{transform:translateY(100%)}}
@media(prefers-reduced-motion:reduce){
    .profil-dialog[open]{animation:none}
}

@media(max-width:480px){
    .profil-parrain{padding:16px 12px 40px}
    .profil-entete{padding:24px 16px;border-radius:18px}
    .profil-titre{font-size:28px}
    .profil-outils{margin:0 -12px 12px;padding:10px 12px 6px}
    .profil-compte{padding:16px}
}