/* ===================================================================== Tanaflex — thème « Cinéma × Éditorial » Base sombre immersive (accent rouge) + raffinement éditorial (titres serif, numérotation, touches dorées, grandes marges). ===================================================================== */ :root{ --bg:#0b0b0f; --bg2:#101017; --panel:#14141b; --panel2:#181820; --line:#23232f; --line2:#2e2e3d; --txt:#eef0f6; --mut:#8b90a3; --mut2:#6b7080; --accent:#e11d2a; --accent2:#ff3b47; --gold:#c9a45e; --star:#f6b21b; --ok:#22c55e; --warn:#fbbf24; --field:#0e0e14; --topbar:rgba(11,11,15,.82); --sidebar:#0d0d13; --hover:#2f2f3d; --serif:"Space Grotesk","Segoe UI",system-ui,sans-serif; --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* Encart publicitaire : dimensions du CRÉATIF servi par la régie (ExoClick, TrafficStars, JuicyAds…). Le back-office écrase --ad-h selon le format retenu. Les colonnes latérales se dimensionnent à partir de --ad-w : elles valaient 320 px pour 24 px de remplissage, soit 294 px utiles — un pavé de 300 px de large ne rentrait pas et se faisait rogner. */ --ad-w:300px; --ad-h:300px; --ad-col:calc(var(--ad-w) + 26px); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--sans);font-size:15px;line-height:1.55; background-image:radial-gradient(70% 60% at 100% -10%,rgba(225,29,42,.10),transparent 60%);} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .serif{font-family:var(--serif);font-weight:600;letter-spacing:-.3px} .wrap{max-width:1200px;margin:0 auto;padding:0 24px} .muted{color:var(--mut)} .small{font-size:13px} .center{text-align:center} .right{text-align:right} .nowrap{white-space:nowrap} .hidden{display:none} .gold{color:var(--star)} .danger-txt{color:var(--accent2)} .inline{display:inline} .spacer{margin-left:auto} /* ---------- Buttons ---------- */ .btn{font-family:var(--sans);font-weight:700;font-size:14px;border:1px solid transparent;border-radius:8px; padding:9px 17px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.16s;color:#fff; background:linear-gradient(120deg,#2b2b3a,#1e1e29);box-shadow:0 4px 12px -8px rgba(0,0,0,.6)} .btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px -12px rgba(0,0,0,.65)} .btn:active{transform:translateY(0)} .btn.primary{background:linear-gradient(120deg,var(--accent),#b3141f);border-color:transparent} .btn.primary:hover{filter:brightness(1.08)} .btn.ghost{background:var(--field);border-color:var(--line);color:var(--txt);box-shadow:none} .btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:rgba(225,29,42,.07)} .btn.ok{background:linear-gradient(120deg,#22a35a,#158043);border-color:transparent;color:#fff} .btn.ok:hover{filter:brightness(1.07)} .btn.danger{background:linear-gradient(120deg,#e23b4e,#b3141f);border-color:transparent;color:#fff} .btn.danger:hover{filter:brightness(1.07)} .btn.sm{padding:6px 12px;font-size:13px;border-radius:6px} .btn.block{width:100%;justify-content:center;padding:12px} /* Icônes dans les boutons (éditer / supprimer…) : taille cohérente quelle que soit celle du SVG */ .btn .ico{width:16px;height:16px;flex:none} .btn.sm .ico{width:14px;height:14px} /* Boutons natifs de champ fichier (« Parcourir… ») refaits comme de vrais boutons */ input[type=file]{font-family:inherit;font-size:14px;color:var(--mut)} input[type=file]::file-selector-button{font-family:var(--sans);font-weight:700;font-size:13px;border:0;border-radius:7px; padding:9px 15px;margin-right:12px;cursor:pointer;color:#fff;background:linear-gradient(120deg,var(--accent),#b3141f);transition:.15s} input[type=file]::file-selector-button:hover{filter:brightness(1.09);transform:translateY(-1px)} input[type=file]::-webkit-file-upload-button{font-family:var(--sans);font-weight:700;font-size:13px;border:0;border-radius:7px; padding:9px 15px;margin-right:12px;cursor:pointer;color:#fff;background:linear-gradient(120deg,var(--accent),#b3141f)} /* ---------- Top bar ---------- */ /* Header COLLANT : reste en haut de l'ecran au defilement (recherche + menu toujours a portee). */ .site-head{position:sticky;top:0;z-index:60} /* Galeries en AJAX : leger fondu + clics neutralises pendant le chargement du fragment. */ .gal-loading{opacity:.5;pointer-events:none;transition:opacity .12s} /* Barre supérieure : léger dégradé + ombre douce pour la détacher du contenu. */ .topbar{position:relative;z-index:50;backdrop-filter:blur(14px);border-bottom:1px solid var(--line); background:linear-gradient(180deg,var(--topbar),color-mix(in srgb,var(--topbar) 88%,transparent)); box-shadow:0 10px 30px -24px rgba(0,0,0,.9)} .topbar-inner{display:flex;align-items:center;gap:22px;min-height:74px;padding:9px 0} .brand{font-family:var(--serif);font-weight:700;font-size:22px;letter-spacing:.3px;display:flex;flex-direction:column;gap:1px;line-height:1.1} .brand-row{display:flex;align-items:center;gap:10px} .brand-slogan{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--mut);text-transform:none} .nav-collapse{display:flex;align-items:center;gap:18px;flex:1} .tools{display:flex;align-items:center;gap:8px} .menu-toggle{display:none;background:var(--panel);border:1px solid var(--line);color:var(--txt);font-size:20px;line-height:1;border-radius:6px;padding:7px 12px;cursor:pointer} .theme-btn{background:var(--panel);border:1px solid var(--line);color:var(--txt);border-radius:6px;width:38px;height:38px;cursor:pointer;font-size:16px;display:inline-flex;align-items:center;justify-content:center} .theme-btn:hover{border-color:var(--accent)} .theme-btn .ic-sun{display:none} html[data-theme="light"] .theme-btn .ic-sun{display:inline} html[data-theme="light"] .theme-btn .ic-moon{display:none} /* ---------- Menus déroulants (langue, compte) ---------- */ .dd{position:relative} .dd-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:190px;background:var(--panel);border:1px solid var(--line2); border-radius:8px;padding:6px;box-shadow:0 24px 50px -16px rgba(0,0,0,.72);display:none;z-index:80} .dd.open .dd-menu{display:block} /* Sélecteur de langue */ .flag{width:22px;height:15px;border-radius:3px;display:inline-block;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.18)} .lang-btn{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:6px; padding:7px 9px;cursor:pointer;color:var(--txt)} .lang-btn .caret{color:var(--mut);font-size:11px} .lang-menu{min-width:210px;max-height:70vh;overflow:auto} .lang-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;color:var(--txt); padding:9px 10px;border-radius:5px;cursor:pointer;font-size:14px;font-family:inherit} .lang-item:hover{background:var(--hover)} .lang-item.on{background:rgba(225,29,42,.12);font-weight:700} /* Menu compte */ .account-btn .ic{font-size:14px} .account-btn:hover{transform:none} .account-btn .caret{color:var(--mut);font-size:11px} .account-menu{min-width:210px} .account-menu a,.account-menu button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--txt); padding:10px 12px;border-radius:6px;cursor:pointer;font-size:14px;font-family:inherit;font-weight:600} .account-menu a:hover,.account-menu button:hover{background:var(--hover)} .account-menu form{margin:4px 0 0;padding-top:4px;border-top:1px solid var(--line)} .account-menu form button{color:var(--accent2)} .account-menu form button:hover{background:rgba(225,29,42,.12);color:var(--accent2)} .upload .ic{font-size:16px} /* Bouton « Publier » du header : bien plus visible — rouge vif, gras, halo pulsé — dans les deux thèmes (le double sélecteur l'emporte sur l'habillage beige du thème clair). */ .tools .btn.upload, html[data-theme="light"] .tools .btn.upload{ background:linear-gradient(120deg,#ff3b47,#e11d2a 52%,#b3141f);color:#fff;border-color:transparent; font-weight:800;letter-spacing:.2px;padding-left:18px;padding-right:18px; animation:publierGlow 2.6s ease-in-out infinite} .tools .btn.upload:hover, html[data-theme="light"] .tools .btn.upload:hover{ filter:brightness(1.1);color:#fff;animation:none;box-shadow:0 12px 30px -8px rgba(225,29,42,1)} @keyframes publierGlow{0%,100%{box-shadow:0 6px 16px -6px rgba(225,29,42,.7)}50%{box-shadow:0 8px 26px -3px rgba(225,29,42,1)}} @media(prefers-reduced-motion:reduce){.tools .btn.upload{animation:none;box-shadow:0 8px 20px -6px rgba(225,29,42,.85)}} /* Google Translate : machinerie invisible + neutralisation du bandeau */ .gt-hidden{position:absolute!important;left:-9999px;top:-9999px;height:0;overflow:hidden} .goog-te-banner-frame,.skiptranslate>iframe,.goog-te-balloon-frame{display:none!important} #goog-gt-tt,.goog-tooltip,.goog-te-gadget-icon{display:none!important} body{top:0!important;position:static!important} .brand-dot{width:11px;height:11px;border-radius:3px;background:var(--accent);box-shadow:0 0 14px var(--accent)} .mainnav{display:flex;gap:22px;color:var(--mut);font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.06em} .mainnav a:hover{color:var(--accent)} .search{margin-left:auto;display:flex;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden} .search input{background:none;border:0;color:#fff;padding:9px 13px;width:210px;outline:none;font-size:14px} .search button{background:none;border:0;color:var(--mut);padding:0 13px;cursor:pointer;font-size:17px} .usermenu{display:flex;align-items:center;gap:8px} /* ---------- Recherche proéminente + autocomplétion ---------- */ .search.big{position:relative;flex:1;max-width:620px;margin:0;display:flex;align-items:center;gap:2px; background:var(--field);border:1px solid var(--line);border-radius:999px;padding:4px 4px 4px 16px;overflow:visible; transition:border-color .18s,box-shadow .18s,background .18s} .search.big:hover{border-color:var(--line2)} .search.big:focus-within{border-color:var(--accent);background:var(--panel); box-shadow:0 0 0 4px rgba(225,29,42,.13),0 10px 30px -14px rgba(0,0,0,.7)} /* Loupe en SVG : nette à toute taille, contrairement au glyphe ⌕. */ .search.big .search-ic{width:18px;height:18px;flex:none;color:var(--mut);transition:color .18s} .search.big:focus-within .search-ic{color:var(--accent)} .search.big input{flex:1;min-width:0;background:none;border:0;color:var(--txt);padding:10px 12px;font-size:15px;outline:none} .search.big input::placeholder{color:var(--mut2,#6b6b7a)} .search.big input::-webkit-search-cancel-button{filter:invert(.55)} /* Bouton détaché à l'intérieur de la barre plutôt qu'un bloc collé au bord. */ .search.big button{border:0;background:var(--accent);color:#fff;font-weight:700;font-size:13.5px;font-family:inherit; padding:9px 20px;border-radius:999px;cursor:pointer;flex:none;transition:background .15s,transform .12s} .search.big button:hover{background:var(--accent2)} .search.big button:active{transform:scale(.97)} .ac{position:absolute;top:calc(100% + 10px);left:0;right:0;background:var(--panel);border:1px solid var(--line2); border-radius:14px;box-shadow:0 30px 60px -20px rgba(0,0,0,.72);padding:8px;z-index:70;max-height:74vh;overflow:auto} .ac[hidden]{display:none} /* En-têtes de rubrique de l'autocomplétion : bloc contrasté selon le thème (sombre → fond noir + texte blanc ; clair → fond blanc + texte noir). */ .ac-group-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;padding:8px 10px;background:#000;color:#fff;border-bottom:1px solid var(--line)} html[data-theme="light"] .ac-group-h{background:#fff;color:#000} .ac-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:5px;color:var(--txt)} .ac-item:hover,.ac-item.active,.ac-item.on{background:var(--hover)} /* Suggestion : portion SAISIE en gras, complétion en normal, nature du résultat à droite. */ .ac-lbl{flex:1;min-width:0;font-size:14px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ac-hit{font-weight:800;color:var(--txt)} .ac-rest{font-weight:400;color:var(--mut)} .ac-item:hover .ac-rest,.ac-item.on .ac-rest{color:var(--txt)} .ac-tags{display:inline-flex;align-items:center;gap:8px;flex:none} .ac-type{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em; color:var(--accent);background:rgba(225,29,42,.1);border:1px solid rgba(225,29,42,.28); border-radius:99px;padding:2px 8px;white-space:nowrap} .ac-thumb{width:54px;height:34px;object-fit:cover;border-radius:4px;flex:none;background:var(--field)} .ac-av{width:34px;height:34px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent),#6d0f1a)} .ac-tit{font-weight:600;font-size:14px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ac-meta{font-size:12px;color:var(--mut)} .ac-empty{padding:16px;text-align:center;color:var(--mut);font-size:14px} /* Item « Rechercher « … » » (recherche libre du texte saisi), toujours en tête */ .ac-search{border-bottom:1px solid var(--line)} .ac-search .ac-type{background:var(--accent);color:#fff;border-color:var(--accent)} .ac-search .ac-hit{color:var(--accent)} /* ===== Barre de recherche du back-office ===== */ /* ===== En-têtes de tableau triables (pyramide haut / bas) ===== */ .th-sort{display:inline-flex;align-items:center;gap:7px;color:inherit;white-space:nowrap} .th-sort:hover{color:var(--accent)} .th-arrows{display:inline-flex;flex-direction:column;line-height:.62;font-size:8px} .th-arrows b{color:var(--mut2,#5b5b6b);opacity:.5;transition:color .12s,opacity .12s} .th-arrows b.on{color:var(--accent);opacity:1} .table th.sorted{color:var(--accent)} .table th.num,.table td.num{text-align:right} /* Colonne « favoris » */ .fav-n{color:#f5b301;font-weight:800;white-space:nowrap} /* Lien vers le profil public, ouvert dans un nouvel onglet */ .u-name{font-weight:700;display:inline-flex;align-items:center;gap:4px;white-space:nowrap} .u-name:hover{color:var(--accent)} .u-ext{font-size:10px;opacity:.5} .u-name:hover .u-ext{opacity:1} /* ===== Tableau des membres (back-office) — refonte lisibilité ===== 8 colonnes : le tableau défile horizontalement dans son cadre (jamais coupé lettre par lettre) ; largeurs de colonnes fixées, chaque cellule sur une seule ligne. */ .table-scroll{overflow-x:auto;overflow-y:visible} .table-scroll .table{min-width:1120px} /* La table des médias remplit toute la largeur du cadre (désormais pleine largeur) : la colonne Actions a de la place et reste visible sans défilement. min-width conservé → scroll si écran étroit. */ .table-scroll .table.table-media{width:100%} .table tbody tr{transition:background .12s} .table tbody tr:hover{background:rgba(255,255,255,.028)} /* Annule le overflow-wrap:anywhere global : plus aucune coupure de mot dans ce tableau */ .table-users th,.table-users td{overflow-wrap:normal;word-break:normal;vertical-align:middle} /* Tableau des médias (/admin/photos, /admin/videos) : mêmes garde-fous que le tableau membres (le overflow-wrap:anywhere global coupait « Statut », « Vues », « Photo », les pseudos… mot par mot). */ .table-media th,.table-media td{overflow-wrap:normal;word-break:normal;white-space:nowrap;vertical-align:middle} .table-media td:nth-child(3){white-space:normal;min-width:240px} /* colonne Titre : retour à la ligne par mots */ .table-media td:nth-child(3) a{overflow-wrap:anywhere} .table-users td{padding-top:12px;padding-bottom:12px} /* Colonne identité : pastille + pseudo sur une seule ligne, largeur confortable */ .table-users th:first-child,.table-users td:first-child{min-width:210px} .u-cell{display:flex;align-items:center;gap:10px;min-width:0} .u-cell .avatar{flex:none} /* Icône du sexe du membre (SVG) : ne prend pas d'espace au pseudo (flex:none), couleurs distinctes. */ .u-cell{gap:8px} .gicon{display:inline-flex;flex:none;align-items:center} .gicon-homme{color:#3b82f6} .gicon-femme{color:#ec4899} .gicon-couple{color:#a855f7} .gicon-autre{color:var(--mut)} /* ===== Module Rencontres ===== */ .meet-hero{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin-bottom:16px} .meet-hero h1{margin:0 0 4px} .meet-mine{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:8px} .meet-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:14px} .meet-filters label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600} .meet-filters input,.meet-filters select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--field);color:var(--txt)} .meet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin-bottom:18px} .meet-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:.15s} .meet-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 22px 44px -24px rgba(0,0,0,.5)} .meet-card-photo{position:relative;aspect-ratio:3/4;background:var(--meet-ph);display:flex;align-items:center;justify-content:center;overflow:hidden} .meet-card-photo img{width:100%;height:100%;object-fit:cover} .meet-card-photo.discreet img{filter:blur(14px)} .meet-ph{font-size:34px;color:rgba(255,255,255,.5)} .meet-boost{position:absolute;top:8px;right:8px;background:var(--accent);color:#fff;border-radius:6px;padding:1px 7px;font-size:12px;font-weight:700} .meet-card-body{padding:9px 11px} .meet-card-name{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .meet-legal ul{margin:6px 0 0;padding-left:20px} .meet-legal li{margin:6px 0} .meet-fs{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:4px 0} .meet-fs legend{font-weight:700;padding:0 6px} /* Langues parlées : colonnes auto-ajustées, pour tenir sur une ligne large comme sur mobile. */ .meet-langs{border:1px solid var(--line);border-radius:8px;padding:8px 12px;margin:4px 0} .meet-langs legend{font-weight:600;padding:0 6px;font-size:.94em} /* Les cases se touchaient : 2 px d'écart vertical collait les bordures deux à deux, si bien qu'on lisait une grille pleine au lieu de choix distincts. Elles respirent, et chacune porte son propre fond — une case cochée se repère alors d'un coup d'œil. */ .meet-langs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px} .meet-langs-grid .check{ margin:0; padding:8px 11px; border-radius:9px; background:var(--panel); border:1px solid var(--line); cursor:pointer; transition:border-color .14s, background .14s; } .meet-langs-grid .check:hover{border-color:var(--line2); background:var(--hover)} .meet-langs-grid .check:has(input:checked){border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent)} /* Réseaux : plusieurs par rangée, pour qu'une escorte qui en déclare six n'allonge pas la page. Les colonnes s'ajustent d'elles-mêmes (3 à 4 sur un écran large, 1 sur mobile). */ .meet-socials-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px} .meet-social-row{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:8px;padding:8px} .meet-social-top{display:flex;gap:6px;align-items:center} .meet-social-top select{flex:0 0 108px;min-width:0} .meet-social-top input{flex:1 1 auto;min-width:0} .meet-social-top .meet-social-del{flex:0 0 auto;padding:2px 8px} .meet-social-vis{display:flex;gap:12px;flex-wrap:wrap} .meet-social-vis .check{margin:0;font-size:.86em;opacity:.85} .meet-social-vis .check:hover{opacity:1} .meet-photo-prev img{max-width:160px;border-radius:8px;margin:6px 0;display:block} .meet-show{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start} .meet-show-photo{aspect-ratio:3/4;background:var(--meet-ph);border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden} .meet-show-photo img{width:100%;height:100%;object-fit:cover} .meet-show-photo.discreet img{filter:blur(16px)} .meet-facts{list-style:none;padding:0;margin:10px 0;display:flex;flex-direction:column;gap:5px} .meet-bio{white-space:normal;line-height:1.6;margin:12px 0} .meet-tags{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0} .meet-contact{margin-top:14px;display:flex;flex-direction:column;gap:12px;align-items:stretch} .meet-contact label{display:block;font-weight:600;font-size:14px} .meet-contact textarea{margin-top:6px} .meet-contact .btn{align-self:flex-start} /* Mur d'inscription visiteur (gate) */ .meet-gate{display:flex;justify-content:center;align-items:flex-start;padding:30px 16px;min-height:50vh} .meet-gate-modal{max-width:480px;width:100%;text-align:center;padding:32px 28px} .meet-gate-lock{width:60px;height:60px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff} .meet-gate-modal h1{font-size:22px;margin:0 0 10px} .meet-gate-txt{color:var(--muted);margin:0 0 20px;line-height:1.5} .meet-gate-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:20px} .meet-gate-actions .btn{width:100%;justify-content:center} .meet-gate-benefits{list-style:none;padding:16px 0 0;margin:0;border-top:1px solid var(--line);text-align:left;display:flex;flex-direction:column;gap:8px} .meet-gate-benefits li{display:flex;align-items:center;gap:8px;font-size:14px} .meet-gate-check{color:#1db954;font-weight:800} .meet-gate-back{margin:16px 0 0} .meet-gate-back a{color:var(--muted);font-size:13px} /* BLOC DE CONTACT — un seul écart vertical, partout. Téléphone et réseaux sont DEUX images distinctes (deux routes, deux règles de visibilité), posées l'une sous l'autre, et le bouton « Contacter » les suit. Trois jonctions, donc, qui valaient chacune autre chose : 12 px entre les images, 10 px entre deux réseaux, 8 px avant le bouton — l'ensemble n'avait aucun rythme. La valeur est celle de CONTACT_ECART (src/controllers/meeting_ctrl.php) : chaque image porte déjà la MOITIÉ de cet écart en haut et en bas. D'où margin:0 entre les images — les deux demi-marges en font une entière — et une demi-marge avant le bouton. Changer l'écart demande de toucher les deux endroits, et c'est dit des deux côtés. */ /* ===================================================================== SUPPRESSION DÉFINITIVE D'UN COMPTE ===================================================================== */ /* Le lien de sortie : lisible, mais nettement séparé du bouton d'enregistrement. Ni caché — quelqu'un qui veut partir doit trouver la porte — ni proéminent. */ .profile-danger{margin:22px 0 0; padding-top:16px; border-top:1px solid var(--line); font-size:13.5px} .profile-danger a{color:#e03131; font-weight:600; text-decoration:none} .profile-danger a:hover{text-decoration:underline} .purge-avert{padding:14px 16px; margin-bottom:20px; border-left:4px solid #e03131; background:rgba(224,49,49,.08)} .purge-titre{margin:0; font-size:14.5px; line-height:1.6} .purge-h2{font-size:19px; margin:0 0 10px} /* L'inventaire : le NOMBRE d'abord, en colonne alignée. C'est lui qu'on lit, et l'aligner permet d'embrasser l'ampleur de la suppression d'un seul regard. */ .purge-liste{list-style:none; margin:0 0 16px; padding:0} .purge-liste li{display:flex; gap:14px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px} .purge-liste li:last-child{border-bottom:0} .purge-n{flex:0 0 74px; text-align:right; font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; color:#e03131} .purge-note{margin:0 0 20px; max-width:66ch; line-height:1.6} .purge-form{padding:16px} .purge-form label{display:block; margin-bottom:14px} .purge-form .form-foot{display:flex; gap:10px; align-items:center} :root{--contact-ecart:12px} /* Chaque réseau est désormais une PASTILLE dessinée dans l'image, sur fond transparent, et les pastilles sont séparées à l'intérieur même de l'image. Il ne reste à la feuille de style qu'à poser le MÊME écart entre les deux images (téléphone / réseaux) et avant le bouton. */ .meet-contact-img{margin:0 0 var(--contact-ecart);line-height:0} .meet-contact-img:last-of-type{margin-bottom:0} /* Hauteur NATIVE : l'image de contact fait 32 px par ligne, un bloc « réseaux » de 4 lignes en fait donc 128. Une hauteur fixe à 32 px écrasait ces 4 lignes dans 32 pixels — illisible. */ /* Plus d'arrondi ici : ce sont les PASTILLES dessinées dans l'image qui le portent. Un border-radius sur une image devenue transparente ne rognerait que du vide. */ .meet-contact-img img{display:inline-block;height:auto;width:auto;max-width:100%} /* Les images n'ont plus aucune marge interne : l'écart complet se met donc ici, comme entre deux pastilles. */ .meet-contact-cta{margin-top:var(--contact-ecart)} /* Astérisque « champ obligatoire » (ajouté par app.js sur les champs [required]) */ .req-star{color:var(--accent);font-weight:700;margin-left:2px} @media(max-width:720px){.meet-show{grid-template-columns:1fr}.meet-show-photo{max-width:280px}} .meet-avatar{width:100%;height:100%;display:block} .meet-dist{position:absolute;bottom:8px;left:8px;background:rgba(0,0,0,.6);color:#fff;border-radius:6px;padding:1px 7px;font-size:11px;font-weight:700} .meet-premium{background:linear-gradient(90deg,#f5b301,#e08a00);color:#1a1200;border:0} .meet-map{height:70vh;min-height:420px;border-radius:12px;overflow:hidden;border:1px solid var(--line)} /* Marqueur « couple » sur la carte : rond mi-rose (gauche) / mi-bleu (droite) */ .leaflet-div-icon.meet-marker-couple{background:transparent;border:0} .mm-couple{display:block;width:16px;height:16px;border-radius:50%;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.2);background:linear-gradient(90deg,#e05a9a 0 50%,#3b74d0 50% 100%)} .meet-gallery{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px} .meet-gallery img{width:60px;height:60px;object-fit:cover;border-radius:6px} .meet-likes{margin-top:8px;color:var(--mut);font-size:14px} .meet-actions{margin:10px 0} .meet-secondary{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px} .meet-report input{padding:6px 9px;border:1px solid var(--line);border-radius:7px;background:var(--field);color:var(--txt);max-width:180px} .meet-editgal{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px} .meet-editgal-item{position:relative;width:100px} .meet-editgal-item img{width:100px;height:120px;object-fit:cover;border-radius:8px;display:block} .meet-badge-main{position:absolute;top:4px;left:4px;background:var(--accent);color:#fff;font-size:10px;border-radius:5px;padding:1px 5px} .meet-badge-pend{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.7);color:#fff;font-size:10px;border-radius:5px;padding:1px 5px} .meet-editgal-act{position:absolute;bottom:4px;left:4px;right:4px;display:flex;gap:4px;justify-content:center} .meet-adfilter{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 16px} .chip-esc{font-size:11px;color:var(--muted);display:inline-flex;align-items:center;gap:3px;margin:0 4px} .chip-esc form{display:inline-flex;align-items:center;gap:3px} .chip-esc input{margin:0} .meet-adfilter .chip.on{background:var(--accent);color:#fff} .meet-adgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-bottom:18px} .meet-adcard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:.15s} .meet-adcard:hover{transform:translateY(-3px);border-color:var(--accent)} .meet-adcard-img{position:relative;aspect-ratio:16/10;background:var(--meet-ph);display:flex;align-items:center;justify-content:center;overflow:hidden} .meet-adcard-img img{width:100%;height:100%;object-fit:cover} .meet-adtype{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.62);color:#fff;border-radius:6px;padding:1px 8px;font-size:11px;font-weight:700} .meet-adcard-body{padding:9px 11px} .meet-adcard-by{color:var(--mut)} .meet-adcard-city{color:var(--accent);font-weight:700} /* Pseudo : blanc en thème sombre ; foncé (fond de page assombri) en thème clair. */ .meet-adcard-author{font-weight:700;color:#fff} html[data-theme="light"] .meet-adcard-author{color:var(--bg);color:color-mix(in srgb, var(--bg) 100%, #000 55%)} .meet-adshow{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:20px;align-items:start} .meet-adshow-img img{width:100%;border-radius:12px} /* Visuel générique quand une annonce n'a pas de photo. */ .meet-adshow-img.ph{aspect-ratio:4/3;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px; background:linear-gradient(135deg,var(--meet-ph,#1b1b24),var(--panel2));color:var(--mut);border:1px solid var(--line)} .meet-adshow-phtype{font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;font-size:13px} @media(max-width:700px){.meet-adshow{grid-template-columns:1fr}} .meet-modphotos{display:flex;flex-wrap:wrap;gap:12px} .meet-modphoto{width:120px;text-align:center} .meet-modphoto img{width:120px;height:150px;object-fit:cover;border-radius:8px;display:block;margin-bottom:4px} /* ============ Module Rencontres — refonte « Wyylde » ============ */ /* Le module Rencontres adopte l'accent et les surfaces de FlexX (clair ET sombre). */ :root{--meet-pink:var(--accent);--meet-red:var(--accent);--meet-ph:linear-gradient(135deg,#241a22,#14101a)} html[data-theme="light"]{--meet-ph:linear-gradient(135deg,#efe7ec,#e2d8e1)} body.meet-app{background:var(--bg)} /* Le header n'est pas collant dans le module : le backdrop-filter du .topbar n'a aucun effet utile mais rend flou le texte des menus déroulants (enfants du calque filtré) → on le retire. */ .meet-app .topbar{backdrop-filter:none;-webkit-backdrop-filter:none} /* Icônes SVG « line » du module : alignées au texte, héritent la couleur. */ .mic{display:inline-block;vertical-align:-.18em;flex:none} .btn .mic{vertical-align:-.2em;margin-right:2px} /* En-tête Rencontres : réutilise le header FlexX (.site-head/.topbar/.menubar) → rendu identique. */ .meet-navstats{margin-left:auto;display:flex;gap:16px;align-items:center;color:var(--mut);font-size:13px} .meet-navstats b{color:var(--txt)} .meet-navstats-on{display:inline-flex;align-items:center;gap:5px} .mlink-badge{background:var(--accent);color:#fff;border-radius:20px;padding:0 6px;font-size:11px;font-weight:700;vertical-align:middle} .account-menu-tag{display:block;padding:8px 14px;color:#e08a00;font-weight:700;font-size:13px} .meet-premium-tag{color:#e08a00;font-weight:700} .meet-main{padding:18px 0} @media(max-width:760px){.meet-navstats{display:none}} /* Fil d'Ariane du module : espace bas franc pour ne pas coller au contenu. */ .meet-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:12.5px;color:var(--mut);margin:2px 0 18px;line-height:1.3} .meet-crumb a{color:var(--mut)} .meet-crumb a:hover{color:var(--accent)} .meet-crumb-sep{color:var(--line2);font-size:14px} .meet-crumb-cur{color:var(--txt);font-weight:600} /* PUBLICITÉ DANS LE MODULE RENCONTRES. Le module n'en portait aucune : toute la partie où l'on passe le plus de temps échappait à la régie. Les encarts se posent en COLONNE LATÉRALE ou entre deux blocs — jamais dans une liste de profils, où un encart se prendrait pour une fiche et se ferait cliquer par erreur. */ .meet-col-r .ad-slot,.meet-filters-panel .ad-slot{margin:14px 0 0} .meet-ville-pub{display:flex;justify-content:center;margin:22px 0} /* ===== Recherche : titre et page presque vide ===== Le titre de la page nommait « Recherche de profils » et rien d'autre : la ville demandée n'apparaissait que dans l'onglet du navigateur. Il porte désormais le sujet réel, en tête des résultats et non dans la colonne des filtres. */ .meet-results-titre{margin:0 0 14px} .meet-results-titre h1{font-family:var(--serif);font-weight:600;font-size:26px;margin:0 0 2px;line-height:1.2} .meet-results-titre p{margin:0;font-size:13.5px} .meet-results-head{margin:0 0 10px;font-size:12.5px} /* Un seul résultat laissait six cents pixels de blanc : on remplit avec une suite utile. */ .meet-suite{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)} .meet-suite-ville{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:10px; background:var(--panel2);border:1px solid var(--line);text-decoration:none;margin-bottom:20px} .meet-suite-ville:hover{border-color:var(--accent)} .meet-suite-ville b{display:block;font-size:15.5px;margin-bottom:2px} .meet-suite-ville .muted{display:block;line-height:1.4} .meet-suite-ic{flex:none;display:flex;color:var(--accent)} .meet-suite-fl{flex:none;margin-left:auto;color:var(--mut)} .meet-suite-h{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.03em; color:var(--mut);margin:0 0 10px} .meet-suite-villes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px} .meet-suite-v{display:flex;flex-direction:column;gap:2px;padding:11px 13px;border-radius:9px; background:var(--panel);border:1px solid var(--line);text-decoration:none} .meet-suite-v:hover{border-color:var(--accent)} .meet-suite-note{margin:18px 0 0} @media(max-width:520px){ .meet-results-titre h1{font-size:21px} .meet-suite-villes{grid-template-columns:repeat(2,1fr);gap:8px} } /* ===== Publicité en modale ===== Format le plus intrusif : il recouvre la page. Le bouton de fermeture est donc GRAND et toujours visible, le compte à rebours annoncé, et rien n'y est caché — une modale dont on cherche la croix est ce qui fait fermer l'onglet, pas la publicité elle-même. */ .admodal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center; padding:16px;background:rgba(8,8,12,.82);backdrop-filter:blur(3px)} .admodal-box{background:var(--panel);border:1px solid var(--line);border-radius:12px; max-width:min(96vw,720px);max-height:92vh;overflow:auto;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)} .admodal-head{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:10px 12px;border-bottom:1px solid var(--line)} .admodal-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2)} /* 44 px de haut : la cible reste confortable au doigt, même une fois le compte à rebours fini. */ .admodal-close{min-height:44px;padding:0 16px;border-radius:99px;border:1px solid var(--line2); background:var(--field);color:var(--mut);font-weight:700;font-size:13px;cursor:not-allowed} .admodal.is-ready .admodal-close{cursor:pointer;background:var(--accent);border-color:var(--accent);color:#fff} .admodal-x{display:none} .admodal.is-ready .admodal-wait{display:none} .admodal.is-ready .admodal-x{display:inline} .admodal-body{padding:14px;display:flex;align-items:center;justify-content:center} .admodal-body img,.admodal-body iframe{max-width:100%} @media(max-width:520px){.admodal-box{max-width:100%}.admodal-body{padding:10px}} @media(max-width:900px){ /* Sur téléphone la colonne latérale passe sous le contenu : l'encart s'y centre au lieu de rester collé à gauche sur une largeur qui n'est plus la sienne. */ .meet-col-r .ad-slot,.meet-filters-panel .ad-slot{margin-left:auto;margin-right:auto} } /* Pied de page léger du module (liens légaux + 18+, cohérent avec le site) */ .meet-foot{border-top:1px solid var(--line);background:var(--panel);margin-top:24px} .meet-foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px;padding:16px 0;font-size:12px} .meet-foot-c{color:var(--mut)} .meet-foot-links{display:flex;flex-wrap:wrap;gap:6px 14px} .meet-foot-links a{color:var(--mut)} .meet-foot-links a:hover{color:var(--accent)} /* Tableau de bord 3 colonnes */ .meet-dash{display:grid;grid-template-columns:230px 1fr 260px;gap:18px;align-items:start} .meet-mycard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center} .meet-mycard-ph{width:120px;height:120px;border-radius:50%;margin:0 auto 10px;overflow:hidden;background:var(--meet-ph) center/cover;display:flex;align-items:center;justify-content:center} .meet-mycard-name{font-weight:800;font-size:17px} /* Rappel « déjà membre du site » sous le bouton d'inscription : séparé par un filet pour que la seconde voie d'accès ne se lise pas comme la suite du texte de la première. */ .meet-alreadyin{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line)} .meet-alreadyin a{color:var(--accent);font-weight:600} .meet-alreadyin a:hover{text-decoration:underline} .meet-certcta{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#f6d365,#f5b301);color:#5c4300;border-radius:20px;padding:5px 12px;font-size:12px;font-weight:700;margin:10px 0 4px;box-shadow:0 4px 14px -6px rgba(245,179,1,.7)} .meet-certcta:hover{filter:brightness(1.04)} .meet-certbadge{display:inline-flex;align-items:center;gap:6px;color:#12b886;font-weight:700;font-size:12px;margin:10px 0 4px} .meet-certbadge.lg{font-size:14px;margin-top:12px} .meet-mystats{display:flex;gap:10px;justify-content:center;margin-top:12px} .meet-mystats>div{flex:1;background:var(--field);border-radius:10px;padding:8px 4px} .meet-mystats b{display:block;font-size:20px;font-family:var(--serif)} .meet-mystats span{font-size:11px;color:var(--mut)} .meet-mystats-link{display:inline-block;margin-top:10px;font-size:13px;font-weight:600} .meet-links{margin-top:14px;display:flex;flex-direction:column;gap:2px;padding:8px} .meet-links a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:var(--txt);font-weight:600;font-size:14px;transition:background .15s,color .15s} .meet-links a:hover{background:var(--field);color:var(--accent)} .meet-links-ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--field);color:var(--mut);flex:none;transition:background .15s,color .15s} .meet-links a:hover .meet-links-ic{background:var(--accent);color:#fff} /* Annonces — vignette de repli + statut (mode « Mes annonces ») */ .meet-adcard-ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--mut)} .meet-adstatus{position:absolute;top:8px;right:8px} /* Page « La certification » */ .meet-cert{max-width:820px} .meet-cert-hero{display:flex;gap:18px;align-items:flex-start} .meet-cert-hero-ic{flex:none;width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#12b886,#0ca678);box-shadow:0 10px 24px -12px rgba(18,184,134,.8)} .meet-cert-hero h2{margin:0 0 6px;font-size:20px} .meet-cert-steps{display:grid;grid-template-columns:1fr;gap:12px;margin:8px 0 18px} .meet-cert-step{display:flex;gap:14px;align-items:flex-start;margin:0} .meet-cert-step b{display:block;margin-bottom:3px} .meet-cert-step .btn{margin-top:8px} .meet-cert-num{flex:none;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center} .meet-cert-note ul{margin:8px 0 0;padding-left:20px;color:var(--mut);display:flex;flex-direction:column;gap:6px} .meet-cert-note li b{color:var(--txt)} @media(min-width:640px){.meet-cert-steps{grid-template-columns:repeat(3,1fr)}.meet-cert-step{flex-direction:column}} /* Modale de confirmation (module Rencontres) */ .meet-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px} .meet-modal[hidden]{display:none} .meet-modal-backdrop{position:absolute;inset:0;background:rgba(8,6,10,.62);backdrop-filter:blur(2px)} .meet-modal-box{position:relative;background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:24px;max-width:400px;width:100%;box-shadow:0 30px 70px -20px rgba(0,0,0,.7);animation:meetPop .16s ease} @keyframes meetPop{from{transform:translateY(8px) scale(.97);opacity:0}to{transform:none;opacity:1}} .meet-modal-msg{margin:0 0 20px;font-size:16px;font-weight:600;line-height:1.4} .meet-modal-actions{display:flex;gap:10px;justify-content:flex-end} /* Lightbox galerie */ .meet-lb{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center} .meet-lb[hidden]{display:none} .meet-lb-backdrop{position:absolute;inset:0;background:rgba(6,4,8,.92)} .meet-lb-stage{position:relative;z-index:1;margin:0;max-width:92vw;max-height:88vh;display:flex} .meet-lb-stage img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:8px;box-shadow:0 20px 60px -10px rgba(0,0,0,.8)} .meet-lb-x{position:absolute;top:18px;right:22px;z-index:2;background:rgba(255,255,255,.1);color:#fff;border:0;width:44px;height:44px;border-radius:50%;font-size:20px;cursor:pointer;transition:background .15s} .meet-lb-x:hover{background:rgba(255,255,255,.22)} .meet-lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;background:rgba(255,255,255,.1);color:#fff;border:0;width:52px;height:52px;border-radius:50%;font-size:32px;line-height:1;cursor:pointer;transition:background .15s} .meet-lb-nav:hover{background:rgba(255,255,255,.22)} .meet-lb-nav.prev{left:20px}.meet-lb-nav.next{right:20px} .meet-lb-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:2;color:#fff;background:rgba(0,0,0,.5);border-radius:20px;padding:5px 14px;font-size:13px;font-weight:600} @media(max-width:600px){.meet-lb-nav{width:42px;height:42px;font-size:26px}.meet-lb-nav.prev{left:8px}.meet-lb-nav.next{right:8px}} .meet-publish{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,var(--panel)),var(--panel));border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:14px;padding:12px 16px;display:flex;align-items:center;gap:14px;margin-bottom:18px;transition:box-shadow .15s,transform .15s} .meet-publish:hover{box-shadow:0 10px 26px -14px color-mix(in srgb,var(--accent) 70%,transparent)} .meet-publish-ic{width:44px;height:44px;border-radius:12px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;flex:none} .meet-publish-txt{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0} .meet-publish-txt b{font-size:15px} .meet-publish-cta{flex:none;pointer-events:none} .meet-zaphead{margin:6px 0 16px} .meet-tabs{display:flex;gap:6px} .meet-tabs a{padding:7px 16px;border-radius:20px;font-weight:700;color:var(--mut)} .meet-tabs a.on{background:var(--meet-pink);color:#fff} .meet-more{text-align:center;margin-top:16px} .meet-col-r>div{margin-bottom:14px} .meet-complete{background:linear-gradient(135deg,var(--meet-red),#b3121e);color:#fff;border-radius:14px;padding:16px} .meet-complete .btn.light{background:#fff;color:var(--meet-red);border:0} .meet-newbies{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px} .meet-events-h{font-weight:800;margin-bottom:10px} .meet-newbies-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .meet-newbie{aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--meet-ph);display:flex;align-items:center;justify-content:center} .meet-newbie img{width:100%;height:100%;object-fit:cover} /* Cartes profil */ .mcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:14px} .mcard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.15s} .mcard:hover{transform:translateY(-4px);border-color:var(--meet-pink);box-shadow:0 20px 40px -22px rgba(224,70,143,.5)} .mcard-ph{position:relative;aspect-ratio:1;background:var(--meet-ph);display:flex;align-items:center;justify-content:center;overflow:hidden} .mcard-ph img{width:100%;height:100%;object-fit:cover} .mcard-ph.discreet img{filter:blur(16px)} .mcard-online{position:absolute;top:8px;left:8px;width:12px;height:12px;border-radius:50%;background:#22c55e;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.2)} .mcard-badges{position:absolute;top:6px;right:6px;display:flex;flex-direction:column;gap:4px;align-items:flex-end} .mcard-cert{background:#12b886;color:#fff;font-size:10px;font-weight:700;border-radius:5px;padding:1px 6px} /* Vérification de plus de six mois : le badge PÂLIT au lieu de disparaître. Il reste vrai qu'une vérification a eu lieu — mais elle ne s'affirme plus au même titre qu'une récente. Le contour maintient la lisibilité sur une photo claire, que le fond translucide seul ne garantirait pas. */ .mcard-cert.pale{background:rgba(18,184,134,.28); color:#d8f5ec; box-shadow:inset 0 0 0 1px rgba(18,184,134,.55)} /* « À la une » : la mention d'un emplacement PAYANT. Elle est volontairement lisible et non discrète — un placement publicitaire qui se ferait passer pour un classement au mérite tromperait le visiteur. Doré plutôt que rouge : c'est une distinction, pas une alerte. */ .mcard-avant{background:#e0a800; color:#241d00; font-size:10px; font-weight:800; border-radius:5px; padding:1px 6px; letter-spacing:.02em} .mcard-lcs{background:var(--meet-red);color:#fff;font-size:10px;font-weight:700;border-radius:5px;padding:1px 6px} .mcard-new{background:#f5b301;color:#3a2c00;font-size:10px;font-weight:700;border-radius:5px;padding:1px 6px} .mcard-discreet{background:rgba(20,16,26,.72);color:#fff;font-size:10px;font-weight:700;border-radius:5px;padding:1px 6px;backdrop-filter:blur(2px)} .mprofile-private{color:var(--mut);font-weight:600} .mcard-dist{position:absolute;bottom:6px;left:6px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;border-radius:6px;padding:1px 7px} .mcard-rate{position:absolute;bottom:6px;right:0;background:#ffd400;color:#3a2c00;font-size:12px;font-weight:800;padding:2px 8px;border-radius:6px 0 0 6px;box-shadow:0 2px 6px rgba(0,0,0,.35);z-index:2;letter-spacing:.2px} .mcard-body{padding:8px 10px;text-align:center} .mcard-name{font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mcard-type{font-size:12px;color:var(--mut)} .mcard-coups{color:#f5b301;font-weight:700;font-size:12px;margin-top:2px} /* Recherche */ .meet-search{display:grid;grid-template-columns:270px 1fr;gap:18px;align-items:start} .meet-filters-panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;align-self:start} /* Le titre du panneau est passé de

à

(la page n'avait aucun titre de niveau 1 à offrir à Google) : la règle couvre les deux balises pour que l'apparence reste strictement identique. */ .meet-filters-panel h2,.meet-filters-title{margin:0 0 10px;font-size:18px} .meet-fi{margin-bottom:10px} .meet-results.meet-loading{opacity:.5;pointer-events:none;transition:opacity .15s} /* PANNEAU DE FILTRES REPLIÉ SUR PETIT ÉCRAN. Sur un téléphone, ce panneau mesurait plus de 1 200 px : Escorte, Certifié, Photo, Connecté, Type, Genre, Orientation, Âge, Localisation, Rechercher, Réinitialiser — un formulaire entier AVANT la première annonce, qui commençait à 1 322 px sur un écran de 844. On demandait donc de faire défiler un écran et demi de réglages pour voir ce qu'on était venu voir. Il reste ouvert au-dessus de 980 px, où il tient dans une colonne latérale sans rien pousser. Le bouton est posé par meeting.js : sans JavaScript, le panneau reste simplement déplié — long, mais entier. On ne cache jamais des filtres derrière un bouton qui n'existe pas. */ .meet-filters-toggle{display:none} @media(max-width:980px){ .meet-filters-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px; width:100%;margin:0 0 12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px; background:var(--panel);color:inherit;font:inherit;font-weight:600;cursor:pointer} .meet-filters-toggle .meet-filters-count{font-weight:500;color:var(--mut)} .meet-filters-toggle[aria-expanded="true"] .meet-filters-caret{transform:rotate(180deg)} .meet-filters-caret{transition:transform .15s} .meet-filters-panel.is-collapsed{display:none} } /* Champs de formulaire — style unifié « sexy » (text · select · textarea) du module Rencontres */ .meet-main :is(input[type=text],input[type=search],input[type=number],input[type=date],input[type=email],input[type=tel],input[type=url],input[type=password],input:not([type]),select,textarea){ width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background-color:var(--field);color:var(--txt); font:inherit;font-size:14px;line-height:1.35;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;-webkit-appearance:none;appearance:none} .meet-main :is(input,select,textarea)::placeholder{color:var(--mut);opacity:.75} .meet-main :is(input[type=text],input[type=search],input[type=number],input[type=date],input[type=email],input[type=tel],input[type=url],input[type=password],input:not([type]),select,textarea):hover:not(:focus){border-color:var(--line2)} .meet-main :is(input[type=text],input[type=search],input[type=number],input[type=date],input[type=email],input[type=tel],input[type=url],input[type=password],input:not([type]),select,textarea):focus{ outline:none;border-color:var(--accent);background-color:var(--panel);box-shadow:0 0 0 3px rgba(225,29,42,.16)} .meet-main textarea{min-height:92px;resize:vertical} .meet-main select{padding-right:36px;cursor:pointer;background-repeat:no-repeat;background-position:right 12px center;background-size:15px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23968f98' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")} .meet-main select::-ms-expand{display:none} /* Autocomplete de ville */ .meet-ac{position:relative} .meet-ac-list{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 4px);margin:0;padding:5px;list-style:none;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px -12px rgba(0,0,0,.5);max-height:280px;overflow:auto} .meet-ac-item{padding:9px 11px;border-radius:8px;cursor:pointer;font-size:14px;color:var(--txt);display:flex;align-items:center;gap:8px} .meet-ac-item:hover,.meet-ac-item.active{background:rgba(225,29,42,.12)} .meet-ac-cp{font-size:12px;font-weight:700;color:var(--mut);background:var(--field);border:1px solid var(--line);border-radius:6px;padding:1px 6px} /* Autocomplétion du header, groupée par rubrique */ .meet-app .search.big{position:relative} .meet-sug{position:absolute;z-index:90;left:0;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:5px;box-shadow:0 24px 55px -16px rgba(0,0,0,.6);max-height:70vh;overflow:auto} .meet-sug[hidden]{display:none} .meet-sug-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);padding:9px 11px 4px} .meet-sug-item{display:flex;align-items:baseline;gap:8px;padding:8px 11px;border-radius:8px;cursor:pointer;color:var(--txt);font-size:14px} .meet-sug-item:hover,.meet-sug-item.active{background:rgba(225,29,42,.12)} .meet-sug-all{font-weight:600;color:var(--accent)} .meet-sug-l{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .meet-sug-s{font-size:12px;color:var(--mut);flex:none} /* Aucun résultat + création d'alerte */ .meet-noresult{grid-column:1/-1;text-align:center;padding:34px 16px;display:flex;flex-direction:column;align-items:center;gap:10px} /* Messagerie Rencontres (2 colonnes) */ .meet-msg{display:grid;grid-template-columns:290px 1fr;gap:16px;align-items:stretch;min-height:60vh} .meet-msg-list{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;max-height:74vh;overflow-y:auto} .meet-msg-conv{display:flex;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid var(--line);position:relative} .meet-msg-conv:hover{background:var(--field)} .meet-msg-conv.on{background:rgba(225,29,42,.10)} /* La pastille porte la silhouette genrée (homme / femme / couple) et non plus une initiale sur aplat coloré : le dessin dit ce qu'est le profil, la lettre ne disait rien. overflow:hidden découpe le SVG au rond, sans quoi il déborderait du cercle. */ .meet-msg-ava{width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--meet-ph,#2a2530)} .meet-msg-conv-b{flex:1;min-width:0} .meet-msg-conv-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline} .meet-msg-conv-top b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .meet-msg-conv-last{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .meet-msg-badge{background:var(--accent);color:#fff;border-radius:20px;min-width:20px;height:20px;padding:0 6px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none} .meet-msg-thread{background:var(--panel);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;overflow:hidden} .meet-msg-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--mut);padding:40px} .meet-msg-thead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)} .meet-msg-thead-l{display:flex;align-items:center;gap:10px} .meet-msg-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;max-height:60vh} .meet-bubble{max-width:74%;align-self:flex-start;background:color-mix(in srgb,var(--txt) 11%,var(--panel));border:1px solid var(--line);border-radius:13px;border-bottom-left-radius:4px;padding:6px 11px} .meet-bubble.me{align-self:flex-end;background:var(--accent);color:#fff;border-color:transparent;border-radius:13px;border-bottom-right-radius:4px} .meet-bubble-txt{font-size:14px;line-height:1.35;word-break:break-word} .meet-bubble-title{font-weight:600;display:block} .meet-msg-plink{text-decoration:underline;font-weight:700} .meet-bubble.me .meet-msg-plink{color:#fff !important} .meet-bubble-hr{border:0;border-top:1px solid color-mix(in srgb,var(--txt) 16%,transparent);margin:5px 0} .meet-bubble.me .meet-bubble-hr{border-top-color:rgba(255,255,255,.32)} .meet-bubble-t{font-size:10px;opacity:.7;margin-top:2px;text-align:right} .meet-msg-form{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line);align-items:flex-end} .meet-msg-form textarea{flex:1;min-height:auto} .meet-msg-blocked{padding:16px;text-align:center;border-top:1px solid var(--line)} @media(max-width:760px){.meet-msg{grid-template-columns:1fr}.meet-msg-list{max-height:none}} /* Mes alertes */ .meet-alerts{display:flex;flex-direction:column;gap:10px} .meet-alert{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0} .meet-alert-b{display:flex;align-items:center;gap:12px} .meet-alert-ic{width:40px;height:40px;border-radius:11px;background:var(--field);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none} .meet-alert-act{display:flex;gap:8px;flex:none} /* Mes favoris */ .meet-fav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-bottom:8px} .meet-fav-item{display:flex;flex-direction:column;gap:6px} .meet-fav-tools{display:flex;gap:6px;flex-wrap:wrap} .meet-fav-tools .btn{flex:1;justify-content:center} .meet-fav-ads{display:flex;flex-direction:column;gap:10px} .meet-fav-ad{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 10px} .meet-fav-ad-l{display:flex;align-items:center;gap:12px;flex:1;min-width:0;color:var(--txt)} .meet-fav-ad-b{min-width:0;display:flex;flex-direction:column;gap:2px} .meet-fav-ad-b b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media(max-width:600px){.meet-fav-ad{flex-wrap:wrap}.meet-fav-tools{width:100%}} /* Nouvelle annonce : formulaire + colonne de suggestions illustrées */ .meet-adnew{display:grid;grid-template-columns:290px 1fr;gap:18px;align-items:start} .meet-adnew-form{margin:0} .meet-adnew-sug{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;position:sticky;top:16px} .meet-adnew-sug-h{display:flex;align-items:center;gap:8px;font-weight:800;margin-bottom:10px} .meet-adnew-sug-list{display:flex;flex-direction:column;gap:8px;max-height:70vh;overflow:auto} .meet-sugcard{display:flex;gap:10px;align-items:center;padding:6px;border-radius:10px;transition:background .15s} .meet-sugcard:hover{background:var(--field)} .meet-sugcard-img{width:56px;height:56px;border-radius:9px;overflow:hidden;flex:none;background:var(--meet-ph);display:flex;align-items:center;justify-content:center;color:var(--mut)} .meet-sugcard-img img{width:100%;height:100%;object-fit:cover} .meet-sugcard-b{min-width:0;display:flex;flex-direction:column;gap:2px} .meet-sugcard-b b{font-size:13px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} @media(max-width:820px){.meet-adnew{grid-template-columns:1fr}.meet-adnew-sug{position:static;order:2}} /* Zone de dépôt (dossiers + .zip) sous le champ « Parcourir » */ .meet-dropzone{margin-top:8px;border:2px dashed var(--line2);border-radius:12px;background:var(--field);padding:18px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s} .meet-dropzone:hover{border-color:var(--accent)} .meet-dropzone.drag{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--field))} .meet-dropzone-in{display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none} .meet-dropzone-ic{width:44px;height:44px;border-radius:12px;background:var(--panel);border:1px solid var(--line);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:4px} /* Fichiers en attente d'envoi : de vraies miniatures, réordonnables et retirables. La liste ne suit plus le curseur « pointer » de la zone — on y clique pour agir sur une image, pas pour rouvrir le sélecteur de fichiers. */ .meet-dropzone-files{ list-style:none; margin:12px 0 0; padding:12px 0 0; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px; cursor:default; text-align:left; } .mdz-item{ position:relative; aspect-ratio:1/1; border-radius:10px; overflow:hidden; background:var(--panel); border:1px solid var(--line); cursor:grab; transition:border-color .15s, transform .12s, opacity .12s; } .mdz-item:active{cursor:grabbing} .mdz-item img{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none} .mdz-item.mdz-drag{opacity:.4} .mdz-item.mdz-over-t{border-color:var(--accent); transform:scale(1.04)} /* La première image devient la photo principale : le dire sur la vignette, au moment où l'ordre se décide, évite la surprise après validation. */ .mdz-main{ position:absolute; top:5px; left:5px; z-index:2; background:var(--accent); color:#fff; font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px; letter-spacing:.02em; } .mdz-over{ position:absolute; top:5px; left:5px; z-index:2; background:var(--warn,#fbbf24); color:#1a1a1a; font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px; } .mdz-del{ position:absolute; top:4px; right:4px; z-index:3; width:22px; height:22px; padding:0; border-radius:50%; border:0; background:rgba(0,0,0,.62); color:#fff; font-size:12px; line-height:1; cursor:pointer; opacity:0; transition:opacity .15s, background .15s; } .mdz-item:hover .mdz-del, .mdz-del:focus-visible{opacity:1} .mdz-del:hover{background:var(--accent)} .mdz-name{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:12px 6px 4px; font-size:10.5px; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.82)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Archive : pas de miniature possible, son contenu n'est lu qu'à l'ouverture côté serveur. */ .mdz-zip{cursor:default; display:flex; align-items:center; justify-content:center; background:var(--panel2)} .mdz-zipic{font-size:34px; opacity:.75} .mdz-note{grid-column:1/-1; margin:2px 0 0; font-size:12px; color:var(--mut); line-height:1.5} /* Génération d'image par IA */ .meet-aigen{margin-top:12px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:12px;padding:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,var(--panel)),var(--panel))} .meet-aigen-h{display:flex;align-items:center;gap:8px;font-weight:800;margin-bottom:2px} .meet-aigen-row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0} .meet-aigen-row #aiPrompt{flex:1;min-width:180px} .meet-aigen-row #aiModel{flex:none;width:auto} .meet-aigen-msg{margin-top:8px;padding:8px 12px;border-radius:8px;font-size:13px;font-weight:600} .meet-aigen-msg.ok{background:rgba(18,133,95,.14);color:#0e7a55} .meet-aigen-msg.err{background:rgba(225,29,42,.12);color:var(--accent)} /* Génération IA dans l'espace médias */ .ai-genbox{border-color:color-mix(in srgb,var(--accent) 30%,var(--line))} .ai-genbox-h{display:flex;align-items:center;gap:8px;margin:0 0 4px} .ai-genbox-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0} .ai-genbox-row input,.ai-genbox-row select{background:var(--field);border:1px solid var(--line);border-radius:6px;color:var(--txt);padding:11px 13px;font-family:inherit;font-size:15px;outline:none;font-weight:400} .ai-genbox-row input:focus,.ai-genbox-row select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(225,29,42,.15)} .ai-genbox-row #aiPrompt{flex:1;min-width:200px} .ai-genbox-row #aiModel{flex:none;width:auto} .ai-genbox-msg{margin-top:6px;padding:8px 12px;border-radius:8px;font-size:13px;font-weight:600} .ai-genbox-msg.ok{background:rgba(18,133,95,.14);color:#0e7a55} .ai-genbox-msg.err{background:rgba(225,29,42,.12);color:var(--accent)} .ai-genbox-link{margin-left:8px;font-weight:700} .ai-genbox-result{margin-top:10px;display:flex;gap:14px;align-items:center;flex-wrap:wrap} .ai-genbox-thumb{width:120px;height:120px;object-fit:cover;border-radius:10px;border:1px solid var(--line)} .ai-genbox-acts{display:flex;gap:8px;flex-wrap:wrap} .al-edit-avatar{margin:4px 0 2px} /* Tableau de bord — onglet Abonnements */ .sub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px} .sub-card{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 12px} .sub-card-l{display:flex;align-items:center;gap:11px;flex:1;min-width:0;color:var(--txt)} .sub-ava{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;display:flex;align-items:center;justify-content:center;background:var(--field);color:var(--mut);font-size:16px} .sub-ava-cat{background:var(--accent);color:#fff} .sub-card-b{display:flex;flex-direction:column;min-width:0} .sub-card-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Back-office : « Catégories nav » (drag-and-drop, tri alpha auto) */ .catnav-block{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:18px} .catnav-block-h{display:flex;align-items:center;justify-content:space-between;gap:12px} .catnav-block-h h3{margin:0} .catnav-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px} .catnav-col-h{font-weight:700;font-size:13px;margin-bottom:6px;color:var(--mut)} .catnav-list{list-style:none;margin:0;padding:6px;min-height:120px;max-height:340px;overflow:auto;background:var(--field);border:1px solid var(--line);border-radius:10px;display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start} .catnav-list.over{border-color:var(--accent);box-shadow:0 0 0 3px rgba(225,29,42,.12)} .catnav-list-sel{background:color-mix(in srgb,var(--accent) 8%,var(--field))} .catnav-item{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:6px 11px;font-size:13px;font-weight:600;cursor:grab;user-select:none} .catnav-item:hover{border-color:var(--accent)} .catnav-item.dragging{opacity:.45} @media(max-width:700px){.catnav-cols{grid-template-columns:1fr}} .meet-toggles{display:flex;flex-direction:column;gap:2px;margin-bottom:8px} .meet-toggle{display:flex;align-items:center;justify-content:space-between;padding:5px 0;font-size:14px;cursor:pointer} .meet-toggle input{display:none} .meet-toggle i{width:38px;height:22px;border-radius:20px;background:var(--line2);position:relative;transition:.15s;flex:none} .meet-toggle i::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.15s} .meet-toggle input:checked+i{background:var(--meet-pink)} .meet-toggle input:checked+i::after{left:18px} .meet-fgroup{border-top:1px solid var(--line);padding:10px 0} .meet-fgroup>b{display:block;margin-bottom:6px} .meet-frow{display:flex;gap:8px}.meet-frow input,.meet-frow select{flex:1;min-width:0;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--field);color:var(--txt)} .meet-kinks{max-height:200px;overflow:auto;display:flex;flex-direction:column;gap:2px} .meet-results-head{margin-bottom:10px} /* Fiche profil */ .mprofile-head{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px} .mprofile-head-l{display:flex;align-items:center;gap:14px} .mprofile-avatar{width:64px;height:64px;border-radius:50%;background:var(--meet-ph) center/cover;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden} .mprofile-avatar.discreet{filter:blur(3px)} .mprofile-head h1{margin:0;font-size:24px;font-family:var(--serif)} .mprofile-cert{color:#12b886;font-size:16px; display:inline-flex; align-items:center; gap:3px; vertical-align:middle} /* La DATE accolée au bouclier : c'est elle qui fait la différence entre un badge vérifiable et un badge décoratif. Petite et en filet, elle informe sans concurrencer le pseudo. */ .mprofile-cert-d{font-size:11px; font-weight:700; letter-spacing:.02em; opacity:.85} .mprofile-cert.pale{color:#7fbfa9} .mprofile-status{font-size:12px;font-weight:700;color:var(--mut);display:flex;align-items:center;gap:6px} .mprofile-dot{width:9px;height:9px;border-radius:50%;background:#999}.mprofile-dot.on{background:#22c55e} .mprofile-actions{display:flex;gap:8px;flex-wrap:wrap} .mprofile-grid{display:grid;grid-template-columns:290px 1fr;gap:18px;align-items:start} /* Colonne photo façon « fiche » : grande photo + vignettes cliquables + CTA */ .mprofile-media{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--panel)} .mprofile-photo{position:relative;aspect-ratio:3/4;background:var(--meet-ph);display:flex;align-items:center;justify-content:center;overflow:hidden} .mprofile-photo-main{width:100%;height:100%;object-fit:cover;cursor:zoom-in;display:block} .mprofile-photo-svg{width:62%;max-width:160px} .mprofile-photo-tag{position:absolute;left:10px;bottom:10px;color:#fff;font-weight:800;font-size:13px;padding:4px 11px;border-radius:20px;box-shadow:0 4px 12px -4px rgba(0,0,0,.6)} .mprofile-photo-online{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.5);color:#fff;font-size:11px;font-weight:700;padding:4px 9px;border-radius:20px} .mprofile-photo-lock{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:5px;background:rgba(20,16,26,.72);color:#fff;font-size:11px;font-weight:700;padding:4px 9px;border-radius:20px;backdrop-filter:blur(2px)} .mprofile-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:5px} .mprofile-thumb{width:100%;aspect-ratio:1;object-fit:cover;border-radius:7px;cursor:zoom-in;transition:opacity .15s,transform .15s} .mprofile-thumb:hover{opacity:.85;transform:scale(1.03)} .mprofile-stats2{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:12px} .mprofile-stats2>div{flex:1;text-align:center;padding:12px 6px;border-right:1px solid var(--line)} .mprofile-stats2>div:last-child{border-right:0} .mprofile-stats2 b{display:block;font-size:22px;font-family:var(--serif)} .mprofile-stats2 span{font-size:11px;color:var(--mut)} .mprofile-loc{background:var(--panel);border:1px solid var(--line);padding:12px;font-size:14px;border-radius:12px;margin-top:10px;display:flex;align-items:center;gap:7px} .mprofile-contactbtn{margin-top:12px;justify-content:center;font-weight:700} .mprofile-secondary{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} .mprofile-tabs{display:flex;gap:4px;border-bottom:2px solid var(--line);margin-bottom:14px} .mprofile-tabs a{padding:10px 18px;font-weight:700;color:var(--mut);border-bottom:2px solid transparent;margin-bottom:-2px} .mprofile-tabs a.on{color:var(--meet-red);border-bottom-color:var(--meet-red)} .mprofile-sec{color:var(--meet-pink);margin:16px 0 8px;font-size:16px} .mpills{display:flex;flex-wrap:wrap;gap:8px} .mpill{border-radius:8px;padding:5px 12px;font-size:13px;font-weight:700} .mpill.red{background:var(--meet-red);color:#fff}.mpill.dark{background:#1b1b22;color:#fff} html[data-theme="light"] .mpill.dark{background:#26262e} .mprofile-desc{white-space:normal;line-height:1.6} .mprofile-table{border:1px solid var(--line);border-radius:10px;overflow:hidden} .mprofile-couple{display:grid;grid-template-columns:1fr 1fr;gap:12px} .mprofile-person-h{font-weight:800;font-size:13px;margin-bottom:6px;color:var(--accent)} @media(max-width:600px){.mprofile-couple{grid-template-columns:1fr}} .mprofile-tr{display:flex;justify-content:space-between;padding:9px 14px} .mprofile-tr:nth-child(odd){background:var(--field)} .mprofile-tr span{color:var(--mut)} .mprofile-about{display:flex;flex-wrap:wrap;gap:22px} .mtesti{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px} .mtesti-h{margin-bottom:6px} @media(max-width:980px){.meet-dash{grid-template-columns:1fr}.meet-col-l,.meet-col-r{order:2}.meet-search{grid-template-columns:1fr}.mprofile-grid{grid-template-columns:1fr}.meet-filters-panel{position:static}.meet-contacts{grid-template-columns:1fr}} /* Contacts */ .meet-contacts{display:grid;grid-template-columns:250px 1fr;gap:18px;align-items:start} .meet-listform{display:flex;gap:6px;margin:10px 0} .meet-listform input{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--field);color:var(--txt)} .meet-lists{list-style:none;padding:0;margin:0} .meet-lists li{display:flex;align-items:center;gap:8px;padding:8px 4px;border-top:1px solid var(--line)} .meet-lists li span{flex:1}.meet-lists li b{color:var(--meet-pink)} .meet-contact-foot{display:flex;gap:6px;align-items:center;margin-top:6px} .meet-assign{flex:1;min-width:0;font-size:12px;padding:4px 6px;border:1px solid var(--line);border-radius:7px;background:var(--field);color:var(--txt)} .btn.ok{background:#12b886;color:#fff;border:0}.btn.ok:hover{background:#0ea875} .cell-mail{display:block;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px} .table-users .num{width:92px;white-space:nowrap} .table-users td.right{white-space:nowrap} /* Le et champs .form. */ /* Grille 2 colonnes : sans min-width:0 les colonnes refusent de rétrécir → le panneau déborde du cadre. */ .form-2col > *{min-width:0} .panel .form{max-width:100%} .form input:focus,.form select:focus,.form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(225,29,42,.15)} /* Blocs .field (catégories, tags…) : même respiration verticale que les