/* ===================================================================== Page publique de profil (u.php). Mobile-first : la majorité des visiteurs arrivent depuis un lien en bio sur téléphone. Les couleurs sont pilotées par les variables CSS --bg/--text/ --btn-bg/--btn-text/--accent, injectées inline depuis theme_json (contraste garanti par calcul WCAG côté serveur, voir includes/ai_theme.php). Les nuances intermédiaires (halo, ombres, badges d'icônes, bio atténuée) sont dérivées à la volée avec color-mix() : aucune couleur supplémentaire à stocker, mais un rendu avec de la profondeur plutôt que des aplats. ===================================================================== */ * { box-sizing: border-box; } :root { --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --radius: 16px; /* boutons de liens (selon data-shape) */ --card-radius: 22px; /* cartes promo / galerie / carte */ } html[data-shape="pill"] { --radius: 999px; --card-radius: 28px; } html[data-shape="square"] { --radius: 4px; --card-radius: 4px; } html { margin: 0; padding: 0; background: var(--bg); color: var(--text); transition: background-color 0.4s ease, color 0.4s ease; } body { margin: 0; padding: 0; background-color: transparent; /* la couleur est portée par pour que .bg-fx passe devant */ color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; min-height: 100vh; position: relative; isolation: isolate; } h1, h2, h3 { font-family: var(--font); } /* ---------- Halo lumineux d'arrière-plan (réglable : off / soft / strong) ---------- */ body { background-image: none; background-repeat: no-repeat; background-attachment: fixed; } html[data-glow="soft"] body { background-image: radial-gradient(560px 420px at 50% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), radial-gradient(480px 360px at 100% 0%, color-mix(in srgb, var(--btn-bg) 10%, transparent), transparent 65%); } html[data-glow="strong"] body { background-image: radial-gradient(600px 460px at 50% -10%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 72%), radial-gradient(520px 400px at 100% 0%, color-mix(in srgb, var(--btn-bg) 22%, transparent), transparent 68%); } .profile-wrap > * { max-width: 100%; } .profile-wrap { width: 100%; min-width: 0; --pf-pad: 18px; /* marge latérale : petite sur mobile pour occuper presque tout l'écran */ max-width: 480px; margin: 0 auto; padding: 56px var(--pf-pad) 40px; display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 100vh; } /* ---------- Anneau autour de la photo (réglable : dégradé / uni / aucun) ---------- */ .profile-avatar-ring { position: relative; width: 116px; height: 116px; border-radius: 50%; padding: 3px; margin-bottom: 22px; background: var(--btn-bg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent), 0 12px 32px -8px color-mix(in srgb, var(--btn-bg) 55%, transparent); transition: box-shadow 0.4s ease, background 0.4s ease; } html[data-ring-style="gradient"] .profile-avatar-ring { background: conic-gradient(from 200deg, var(--btn-bg), var(--accent), var(--btn-bg)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent), 0 12px 32px -8px color-mix(in srgb, var(--accent) 55%, transparent); } html[data-ring-style="none"] .profile-avatar-ring { padding: 0; background: transparent; box-shadow: none; } .profile-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: color-mix(in srgb, var(--bg) 70%, white 5%); border: 3px solid var(--bg); } .profile-avatar-fallback { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 38px; font-weight: 800; font-family: var(--font); background: var(--btn-bg); color: var(--btn-text); border: 3px solid var(--bg); } html[data-ring-style="gradient"] .profile-avatar-fallback { background: linear-gradient(145deg, var(--btn-bg), var(--accent)); } .profile-name { font-size: 22px; font-weight: 800; margin: 0 0 6px; letter-spacing: -0.01em; } .profile-bio { font-size: 15px; color: color-mix(in srgb, var(--text) 80%, transparent); max-width: 340px; line-height: 1.55; margin: 0 0 6px; } .profile-phones { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 22px; } .profile-phone { font-size: 13.5px; color: color-mix(in srgb, var(--text) 72%, transparent); display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); text-decoration: none; transition: background-color 0.18s ease; } .profile-phone:hover { background: color-mix(in srgb, var(--text) 14%, transparent); } .profile-phone .flag { font-size: 15px; line-height: 1; } .profile-phone strong { color: var(--text); font-weight: 600; } .profile-links { width: 100%; display: flex; flex-direction: column; gap: 14px; margin-top: 8px; } /* ---------- Boutons de liens (réglable : dégradé / uni) ---------- */ .profile-link { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 18px; border-radius: var(--radius); background: var(--btn-bg); color: var(--btn-text); font-weight: 600; font-size: 15.5px; border: none; cursor: pointer; text-decoration: none; box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--btn-bg) 70%, transparent); transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background 0.4s ease; } html[data-btn-style="gradient"] .profile-link { background: linear-gradient(135deg, var(--btn-bg), var(--accent)); } .profile-link:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px color-mix(in srgb, var(--btn-bg) 80%, transparent); filter: brightness(1.06); } .profile-link:active { transform: translateY(-1px) scale(0.99); } .profile-link .link-icon { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--btn-text) 16%, transparent); font-size: 16px; } .profile-link .link-label { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-link .link-arrow { opacity: 0.5; font-size: 14px; flex-shrink: 0; transition: transform 0.18s ease, opacity 0.18s ease; } .profile-link:hover .link-arrow { opacity: 0.9; transform: translateX(2px); } .profile-footer { margin-top: auto; padding-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .profile-qr-link { font-size: 12.5px; color: color-mix(in srgb, var(--accent) 85%, var(--text) 15%); display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); text-decoration: none; transition: background-color 0.18s ease; } .profile-qr-link:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); } .profile-brand { font-size: 11.5px; color: color-mix(in srgb, var(--text) 40%, transparent); letter-spacing: 0.02em; } .profile-brand span { color: var(--accent); font-weight: 600; } /* ---------- Styles de boutons supplémentaires ---------- */ html[data-btn-style="outline"] .profile-link { background: transparent; color: var(--text); border: 1.5px solid var(--btn-bg); box-shadow: none; } html[data-btn-style="outline"] .profile-link:hover { background: color-mix(in srgb, var(--btn-bg) 16%, transparent); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--btn-bg) 70%, transparent); filter: none; } html[data-btn-style="outline"] .profile-link .link-icon, html[data-btn-style="glass"] .profile-link .link-icon { background: var(--btn-bg); color: var(--btn-text); } html[data-btn-style="glass"] .profile-link { background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text); border: 1px solid color-mix(in srgb, var(--text) 20%, transparent); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.5); } html[data-btn-style="glass"] .profile-link:hover { background: color-mix(in srgb, var(--text) 15%, transparent); filter: none; } html[data-btn-style="brutal"] .profile-link { background: var(--btn-bg); color: var(--btn-text); border: 2px solid var(--text); box-shadow: 4px 4px 0 var(--text); } html[data-btn-style="brutal"] .profile-link:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--text); filter: none; } html[data-btn-style="brutal"] .profile-link:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--text); } /* ---------- Arrière-plans (data-bg) : couche fixe derrière le contenu ---------- */ .bg-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; display: none; } html:not([data-bg="plain"]) .bg-fx { display: block; } html[data-bg="aurora"] .bg-fx::before, html[data-bg="aurora"] .bg-fx::after { content: ''; position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(90px); opacity: 0.38; will-change: transform; } html[data-bg="aurora"] .bg-fx::before { background: var(--accent); top: -32vmax; left: -22vmax; animation: drift-a 24s ease-in-out infinite alternate; } html[data-bg="aurora"] .bg-fx::after { background: var(--btn-bg); bottom: -36vmax; right: -26vmax; animation: drift-b 28s ease-in-out infinite alternate; } html[data-bg="mesh"] .bg-fx { background: radial-gradient(60% 50% at 12% 8%, color-mix(in srgb, var(--accent) 36%, transparent), transparent 70%), radial-gradient(55% 45% at 92% 28%, color-mix(in srgb, var(--btn-bg) 30%, transparent), transparent 70%), radial-gradient(70% 50% at 50% 100%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%); } html[data-bg="grid"] .bg-fx { background-image: linear-gradient(color-mix(in srgb, var(--text) 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text) 8%, transparent) 1px, transparent 1px); background-size: 38px 38px; -webkit-mask-image: radial-gradient(ellipse at 50% 25%, #000 25%, transparent 78%); mask-image: radial-gradient(ellipse at 50% 25%, #000 25%, transparent 78%); } html[data-bg="dots"] .bg-fx { background-image: radial-gradient(color-mix(in srgb, var(--text) 22%, transparent) 1.3px, transparent 1.6px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse at 50% 25%, #000 25%, transparent 80%); mask-image: radial-gradient(ellipse at 50% 25%, #000 25%, transparent 80%); } @keyframes drift-a { to { transform: translate(18vmax, 14vmax) scale(1.15); } } @keyframes drift-b { to { transform: translate(-16vmax, -12vmax) scale(1.1); } } /* ---------- Animation d'entrée échelonnée (data-entrance) ---------- */ html[data-entrance="rise"] .reveal { animation: rise 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms); } html[data-entrance="fade"] .reveal { animation: fadein 0.9s ease backwards; animation-delay: calc(var(--i, 0) * 70ms); } @keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* ---------- Sections du bas : promotions, galerie, carte ---------- */ .pf-section { width: 100%; min-width: 0; margin-top: 38px; text-align: left; } .pf-section-title { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--text) 62%, transparent); } .pf-section-title::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--text) 16%, transparent); } /* Promotions : carrousel horizontal à accroche (swipe sur mobile) */ .promo-track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--pf-pad) * -1); padding: 4px var(--pf-pad) 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .promo-track::-webkit-scrollbar { display: none; } .promo-card { flex: 0 0 76%; max-width: 300px; scroll-snap-align: center; border-radius: var(--card-radius); overflow: hidden; background: color-mix(in srgb, var(--text) 7%, var(--bg)); border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.55); } .promo-media { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } .promo-media img { display: block; width: 100%; height: auto; } .promo-badge { position: absolute; top: 12px; left: 12px; padding: 5px 11px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-text); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.5); } .promo-body { padding: 14px 16px 16px; } .promo-body h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; } .promo-body p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: color-mix(in srgb, var(--text) 78%, transparent); } .promo-body small { display: block; font-size: 12px; color: color-mix(in srgb, var(--text) 58%, transparent); margin-bottom: 10px; } .promo-cta { display: inline-block; padding: 9px 16px; border-radius: var(--radius); background: var(--btn-bg); color: var(--btn-text); font-size: 13.5px; font-weight: 700; text-decoration: none; } /* Galerie : grille "bento" (1 grande vignette toutes les 3) */ .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .gallery-item { position: relative; padding: 0; border: 0; overflow: hidden; aspect-ratio: 1; border-radius: var(--card-radius); background: color-mix(in srgb, var(--text) 8%, var(--bg)); cursor: zoom-in; } .gallery-item:nth-child(3n + 1) { grid-column: span 2; aspect-ratio: 16 / 10; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .gallery-item:hover img { transform: scale(1.05); } /* Carte Google Maps + itinéraire */ .map-card { border-radius: var(--card-radius); overflow: hidden; background: color-mix(in srgb, var(--text) 7%, var(--bg)); border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.55); } .map-frame { display: block; width: 100%; height: 230px; border: 0; } html[data-tone="dark"] .map-frame { filter: invert(92%) hue-rotate(180deg) contrast(0.92) saturate(0.85); } .map-info { padding: 16px; } .map-address { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.45; margin-bottom: 14px; } .map-address svg { flex-shrink: 0; margin-top: 2px; color: var(--accent); } .map-actions { display: flex; flex-wrap: wrap; gap: 10px; } .map-btn { flex: 1 1 auto; text-align: center; padding: 11px 16px; border-radius: var(--radius); font-size: 14px; font-weight: 700; text-decoration: none; color: var(--text); border: 1.5px solid color-mix(in srgb, var(--text) 26%, transparent); transition: transform 0.18s ease, background-color 0.18s ease; } .map-btn:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--text) 8%, transparent); } .map-btn.primary { background: var(--btn-bg); color: var(--btn-text); border-color: transparent; } /* Lightbox plein écran */ .lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.93); padding: 20px; } .lightbox[hidden] { display: none; } .lightbox figure { margin: 0; max-width: 100%; text-align: center; } .lightbox img { max-width: 100%; max-height: 82vh; border-radius: 10px; } .lightbox figcaption { color: #E2E8F0; font-size: 14px; margin-top: 12px; } .lb-close, .lb-nav { position: absolute; border: 0; background: rgba(255, 255, 255, 0.12); color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 22px; cursor: pointer; } .lb-close { top: 16px; right: 16px; } .lb-prev { left: 12px; top: 50%; transform: translateY(-50%); } .lb-next { right: 12px; top: 50%; transform: translateY(-50%); } /* ---------- Page "compte suspendu" (abonnement expiré) ---------- */ .suspended-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: #05070F; color: #F8FAFC; text-align: center; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .suspended-card { max-width: 420px; } .suspended-icon { font-size: 44px; margin-bottom: 20px; } .suspended-card h1 { font-size: 22px; margin: 0 0 12px; } .suspended-card p { color: #94A3B8; line-height: 1.6; font-size: 15px; } @media (min-width: 480px) { .profile-wrap { padding-top: 72px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ---------- Numéro WhatsApp : repérable d'un coup d'œil + ouverture directe de la discussion ---------- */ .profile-phone.is-wa { padding: 5px 6px 5px 5px; gap: 9px; background: color-mix(in srgb, #25D366 15%, transparent); border: 1px solid color-mix(in srgb, #25D366 50%, transparent); flex-wrap: nowrap; /* icône, numéro et étiquette restent sur UNE ligne compacte */ max-width: 100%; } .profile-phone.is-wa .profile-phone-text { min-width: 0; text-align: left; line-height: 1.3; } .profile-phone.is-wa .flag, .profile-phone.is-wa .wa-cta { flex-shrink: 0; } .profile-phone.is-wa:hover { background: color-mix(in srgb, #25D366 26%, transparent); } /* Pastille ronde verte avec le logo blanc : la marque WhatsApp reconnaissable sur n'importe quel thème */ .profile-phone .wa-ic { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: #25D366; color: #fff; box-shadow: 0 4px 12px -4px rgba(37, 211, 102, 0.8); } .profile-phone .wa-ic svg { width: 16px; height: 16px; } /* Étiquette à droite : dit clairement ce qui se passera au clic */ .profile-phone .wa-cta { padding: 4px 11px; border-radius: 999px; background: #25D366; color: #05301A; font-size: 11.5px; font-weight: 800; letter-spacing: 0.02em; line-height: 1.2; } /* ---------- Adresse email de contact ---------- */ .profile-phone.is-mail { max-width: 100%; } .profile-phone .mail-ic { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: color-mix(in srgb, var(--text) 14%, transparent); color: var(--text); } .profile-phone .mail-ic svg { width: 14px; height: 14px; } .profile-phone.is-mail .profile-phone-text { min-width: 0; overflow-wrap: anywhere; text-align: left; line-height: 1.3; } /* ===================================================================== Mise en page adaptative : mobile plein écran, tablette, ordinateur ===================================================================== */ .pf-side, .pf-main { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; } .profile-wrap:not(.has-main) .pf-main { display: none; } /* Carrousel des promotions : flèches (souris) + glisser-déposer */ .promo-carousel { position: relative; } .promo-nav { display: none; position: absolute; top: calc(50% - 26px); z-index: 3; width: 44px; height: 44px; padding: 0 0 3px; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--btn-bg); color: var(--btn-text); font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent); transition: transform 0.18s ease, opacity 0.18s ease; } .promo-nav:hover { transform: scale(1.08); } .promo-nav.prev { left: -10px; } .promo-nav.next { right: -10px; } .promo-nav[hidden] { display: none !important; } @media (hover: hover) and (pointer: fine) { .promo-nav { display: inline-flex; } .promo-track { cursor: grab; } } .promo-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; } .promo-media img { -webkit-user-drag: none; user-select: none; } /* Tablette : colonne plus large, cartes plus grandes */ @media (min-width: 700px) { .profile-wrap { --pf-pad: 32px; max-width: 680px; padding-top: 80px; } .promo-track { margin: 0; padding: 4px 2px 16px; gap: 16px; } .promo-card { flex: 0 0 300px; max-width: none; } .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 190px; grid-auto-flow: dense; gap: 12px; } .gallery-item, .gallery-item:nth-child(3n + 1) { aspect-ratio: auto; grid-column: auto; } .gallery-item:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; } .map-frame { height: 300px; } } /* Ordinateur : deux colonnes — identité et liens à gauche (fixes), contenu riche à droite */ @media (min-width: 1024px) { .profile-wrap.has-main { --pf-pad: 40px; max-width: 1180px; display: grid; grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); column-gap: 64px; align-content: start; align-items: start; text-align: left; padding-top: 88px; } .profile-wrap.has-main .pf-side { position: sticky; top: 56px; align-items: flex-start; } .profile-wrap.has-main .profile-avatar-ring { width: 132px; height: 132px; } .profile-wrap.has-main .profile-avatar-fallback { font-size: 44px; } .profile-wrap.has-main .profile-name { font-size: 30px; } .profile-wrap.has-main .profile-bio { max-width: none; font-size: 16px; } .profile-wrap.has-main .profile-phones { align-items: flex-start; } .profile-wrap.has-main .profile-links { margin-top: 12px; } .profile-wrap.has-main .pf-main { align-items: stretch; } .profile-wrap.has-main .pf-main > .pf-section:first-child { margin-top: 6px; } .profile-wrap.has-main .profile-footer { grid-column: 1 / -1; } .promo-card { flex-basis: 320px; } .gallery-grid { grid-auto-rows: 210px; } .map-frame { height: 340px; } /* Sans contenu riche : une seule colonne centrée, mais plus large qu'un téléphone */ .profile-wrap:not(.has-main) { max-width: 560px; } /* Ordre des sections personnalisé (contenu riche avant contact/liens) : une seule colonne, mais assez large pour les promotions/la galerie, comme sur tablette. */ .profile-wrap.flat-rich { max-width: 680px; } } @media (min-width: 1440px) { .profile-wrap.has-main { max-width: 1320px; grid-template-columns: 420px minmax(0, 1fr); column-gap: 80px; } .promo-card { flex-basis: 340px; } .gallery-grid { grid-auto-rows: 230px; } }