:root { --url-rep-all: "https://example.com/images/"; /* Couleurs principales du site Pour changer la couleur d'identite : modifier --couleur-principale + --couleur-principale-rgb. Tout le reste est derive automatiquement. */ --couleur-principale: #eb406d; /* Rose/Magenta */ --couleur-principale-rgb: 235, 64, 109; /* Meme couleur en RGB pour les rgba() */ --couleur-principale-hover: #d93a5f; --couleur-principale-fonce: #d9356b; /* Accent fonce pour gradients */ --couleur-principale-light: rgba(var(--couleur-principale-rgb), 0.1); /* 2eme couleur des gradients d'accent (header modale, onglets actifs, tags...). - Sur EC (principale rose #eb406d) -> effet subtil rose vers rose clair. - Sur DG (principale violet) -> effet contraste violet vers rose. Surchargeable dans themes/theme-.css. */ --couleur-accent: #f06292; --gradient-accent: linear-gradient(135deg, var(--couleur-principale) 0%, var(--couleur-accent) 100%); /* Avatars par defaut quand un profil n'a pas de photo (4 types : H, F, Couple, Trans). Defaut : images generiques a la racine de images_ec_v5/. Chaque theme de site peut surcharger en pointant vers son sous-dossier dedie : - theme-entrecoquins.css -> images_ec_v5/ec/img_vide_*.svg - theme-distingay.css -> images_ec_v5/dg/img_vide_*.svg (a creer) Utilise par : voirfiche_sans_photo, ann_sans_photo, mosaique-photo-vide, event-photo-vide, courrier-avatar-vide, contact-avatar-vide, comment-card-avatar-vide, mod-avatar-vide, journal-avatar-vide. Aussi lu cote JS (chat overlay + cards online dans entree.cgi) via getComputedStyle, donc URL en chemin web absolu (resolu uniformement par le navigateur, peu importe le niveau de la page courante). */ --url-img-vide-h: url('../../../rep_all/css/images_ec_v5/img_vide_h.svg?inutil=2'); --url-img-vide-f: url('../../../rep_all/css/images_ec_v5/img_vide_f.svg?inutil=2'); --url-img-vide-cpl: url('../../../rep_all/css/images_ec_v5/img_vide_cpl.svg?inutil=2'); --url-img-vide-trans: url('../../../rep_all/css/images_ec_v5/img_vide_trans.svg?inutil=2'); /* Couleurs de statut */ --couleur-online: #2ef788; /* Vert en ligne (point indicateur) */ --couleur-offline: #999; --couleur-erreur: #EC4433; --couleur-succes: #4caf50; /* Couleurs des boutons d'action */ --couleur-chat-online: #4caf50; /* Vert bouton chat en ligne */ --couleur-chat-online-hover: #45a049; --couleur-mail: var(--couleur-principale); /* Rose bouton courrier */ --couleur-mail-hover: var(--couleur-principale-hover); --couleur-delete: #dc3545; /* Rouge bouton supprimer */ --couleur-delete-hover: #c82333; --couleur-admin: #ab35dc; /* Violet bouton admin */ --couleur-admin-hover: #9420c5; --couleur-disabled: #ccc; /* Gris désactivé */ /* Couleurs des badges */ --couleur-badge-nouveau: var(--couleur-principale); --couleur-badge-libresoir: #4caf50; --couleur-badge-dernmin: #ff9800; --couleur-badge-video: rgba(0, 0, 0, 0.6); /* Couleurs de texte */ --couleur-texte-principal: #333; --couleur-texte-secondaire: #666; --couleur-texte-gris: #999; --couleur-texte-blanc: #fff; /* Couleurs de fond */ --couleur-fond-clair: #f8f8f8; --couleur-fond-blanc: #fff; --couleur-fond-gris: #e8e8e8; /* Bulles de messages (courrier, chat, histo) */ --message-bubble-user-bg: linear-gradient(135deg, var(--couleur-principale) 0%, var(--couleur-principale-fonce) 100%); --message-bubble-user-color: #fff; --message-bubble-user-radius: 18px 18px 4px 18px; --message-bubble-other-bg: #fff; --message-bubble-other-color: #333; --message-bubble-other-radius: 18px 18px 18px 4px; --message-bubble-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Couleurs de scrollbar */ --scrollbar-thumb: #666; /* Barre gris foncé */ --scrollbar-thumb-hover: #444; /* Barre gris très foncé au survol */ --scrollbar-track: #f5f5f5; /* Fond gris clair */ --scrollbar-width: 8px; /* Largeur de la scrollbar */ /* Ombres et effets */ --box-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.12); --box-shadow-card-hover: 0 8px 20px rgba(var(--couleur-principale-rgb), 0.25); --box-shadow-subtil: 0 1px 3px rgba(0, 0, 0, 0.1); --text-shadow-lisibilite: 0 1px 3px rgba(0, 0, 0, 0.8); /* Border radius */ --border-radius-card: 12px; --border-radius-bouton: 6px; --border-radius-badge: 4px; --border-radius-input: 4px; /* Transitions */ --transition-rapide: 0.15s ease; --transition-normale: 0.25s ease; --transition-lente: 0.3s ease; /* Espacements */ --gap-grille: 18px; --padding-card: 10px; --padding-container: 20px; } /* ============================================================ Harmonisation : pseudo affiche avec 1ere lettre en majuscule ============================================================ Purement visuel (text-transform), le DOM garde la casse d'origine du pseudo. Donc le JS qui lit textContent / data-pseudo pour appeler message(), voirfiche(), courrier()... continue de recevoir le pseudo en minuscules comme stocke en base. Pour etendre a une nouvelle liste : ajouter la classe ci-dessous. Deja capitalize ailleurs : .fiche-pseudo (.fiche-header), .mosaique-pseudo. */ .mod-pseudo, .entree-online-card-name, .event-pseudo, .event-pseudo a, .contact-pseudo, .courrier-pseudo, .map-user-pseudo, .journal-pseudo, .comment-card-pseudo, .comment-card-pseudo a { text-transform: capitalize; } /* Transition fluide pour la restauration de page (masquage préventif) */ html { transition: opacity 0.15s ease-out; } /* ============================================================ */ /* SCROLLBAR GLOBALE - Gris foncé pour tout le site */ /* ============================================================ */ /* Scrollbar pour Chrome, Safari, Edge (Webkit) */ body::-webkit-scrollbar, html::-webkit-scrollbar, *::-webkit-scrollbar { width: var(--scrollbar-width); height: var(--scrollbar-width); } body::-webkit-scrollbar-track, html::-webkit-scrollbar-track, *::-webkit-scrollbar-track { background: var(--scrollbar-track); } body::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb, *::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } body::-webkit-scrollbar-thumb:hover, html::-webkit-scrollbar-thumb:hover, *::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* Scrollbar pour Firefox */ body, html, * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } /* ============================================================ */ /* FIN SCROLLBAR GLOBALE */ /* ============================================================ */ body { margin: 0; background-color: transparent; /* background-color: white; background-color: black; background-image: url('//www.entrecoquins.com/images_index10/fond-site.jpg'); background-image: url('//www.entrecoquins.com/images_index10/fond-site2.jpg'); background-position: center; background-attachment: fixed; background-size : cover; */ font-size:12px; font-family:Arial; } p { margin : 0 0 0 0; display: inline; } ul, li { margin:0; border:0; padding:0; list-style:none; } table { border-collapse: initial; } label { font-weight: initial; } @font-face { font-family: 'roboto'; src: url('../../../rep_all/css/fonts/Roboto-Black-webfont.eot'); src: url('../../../rep_all/css/fonts/Roboto-Black-webfont.eot?#iefix') format('embedded-opentype'), url('../../../rep_all/css/fonts/Roboto-Black-webfont.woff') format('woff'), url('../../../rep_all/css/fonts/Roboto-Black-webfont.ttf') format('truetype'), url('../../../rep_all/css/fonts/Roboto-Black-webfont.svg#robotoblack') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'chunk'; src: url('../../../rep_all/css/fonts/chunkfive_ex-webfont.eot'); src: url('../../../rep_all/css/fonts/chunkfive_ex-webfont.eot?#iefix') format('embedded-opentype'), url('../../../rep_all/css/fonts/chunkfive_ex-webfont.woff') format('woff'), url('../../../rep_all/css/fonts/chunkfive_ex-webfont.ttf') format('truetype'), url('../../../rep_all/css/fonts/chunkfive_ex-webfont.svg#chunkfive_exregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; font-display: block; src: url(../../../rep_all/css/fonts/material-icons-4/material-icons.woff2) format('woff2'), url(../../../rep_all/css/fonts/material-icons-4/material-icons.woff) format('woff'); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: 'liga'; } .menu_titre {background-position: left center; font-size: 12pt;color: #696662; font-family:Trebuchet MS; font-weight:bold;background-color: #80A5E7; text-indent:15px; background-image:url('images/icobleu.gif'); background-repeat:no-repeat} .menu_titre_ligne {background-position: left center; font-size: 12pt;color: #696662; font-family:Trebuchet MS; font-weight:bold; text-indent:15px;} .menu_titre_mini {background-position: left center; font-size: 10pt;color: #696662; font-family:Trebuchet MS; font-weight:bold;background-color: #80A5E7;} .menu_item { border: 1px solid #fbf7f7; background-color: #f3ebeb; font-size: 12px; font-family: Arial; } .petit_txt {font-size:10px; font-family:Arial;} .toutpetit_txt {font-size:10px; font-family:Arial;} .tableau_lignecoul1 {border:0px; background-color:#ffffff; font-size:12px; font-family:Arial;} .tableau_lignecoul2 {border:0px; background-color:#f3ebeb; font-size:12px; font-family:Arial;} .tableau_ligne_coul1 {border:0px; background-color:#ffffff; font-size:12px; font-family:Arial;} .tableau_ligne_coul2 {border:0px; background-color:#f3ebeb; font-size:12px; font-family:Arial;} .rech_pseudo {background-position: left center; font-size: 10pt;color: #FFFFFF; font-family:Trebuchet MS; font-weight:bold; background-color: #80A5E7; text-indent:12px;} .rech_info {font-size:11px; font-family:Trebuchet MS;} /* Scroll barre liste user*/ .mCSB_inside > .mCSB_container { margin-right: 0px; } /* Boutons */ a .material-icons,a .fa,a .material-icons { color: #504c4d; } a .material-icons:hover,a .fa:hover, a .material-icons:hover { color: black; } .modal-body input[type=Submit]:not(.btn-primary):not(.btn-primary-mini):not(.btn-primary-large), #courrier input[type=Submit]:not(.btn-primary):not(.btn-primary-mini):not(.btn-primary-large), #agenda input[type=Submit]:not(.btn-primary):not(.btn-primary-mini):not(.btn-primary-large), #dern_minute input[type=Submit]:not(.btn-primary):not(.btn-primary-mini):not(.btn-primary-large), #albumphotos input[type=Submit]:not(.btn-primary):not(.btn-primary-mini):not(.btn-primary-large), #voirfiche input[type=Submit]:not(.btn-primary):not(.btn-primary-mini):not(.btn-primary-large), #recherche input[type=Submit]:not(.btn-primary):not(.btn-primary-mini):not(.btn-primary-large), input[type=Submit]:not(.btn-primary):not(.btn-primary-mini):not(.btn-primary-large) { /* border: 1px solid #f0067f; background: #eb2a94; background: -webkit-gradient(linear, left top, left bottom, from(#f07fbd), to(#eb2a94)); background: -webkit-linear-gradient(top, #f07fbd, #eb2a94); background: -moz-linear-gradient(top, #f07fbd, #eb2a94); background: -ms-linear-gradient(top, #f07fbd, #eb2a94); background: -o-linear-gradient(top, #f07fbd, #eb2a94); background-image: -ms-linear-gradient(top, #f07fbd 0%, #eb2a94 100%); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; color: #f7edf3; font-family: helvetica, serif; padding: 2px 5px 1px 5px; text-shadow: #649899 0 1px 0; background: #63b0b0; background: -webkit-gradient(linear, left top, left bottom, from(#84e0e0), to(#63b0b0)); background: -webkit-linear-gradient(top, #84e0e0, #63b0b0); background: -moz-linear-gradient(top, #84e0e0, #63b0b0); background: -ms-linear-gradient(top, #84e0e0, #63b0b0); background: -o-linear-gradient(top, #84e0e0, #63b0b0); background-image: -ms-linear-gradient(top, #84e0e0 0%, #63b0b0 100%); color: #faf9f7; padding: 6px; /* border-radius: 6px; */ background-color: #36b4b4; font-size: 14px; text-decoration: none; vertical-align: middle; font-family: 'Roboto', sans-serif; border-radius: 8px; border: 1px solid #6ca3a3; color: #faf9f7; margin: 0px 0px 5px 0px; padding: 6px 10px 6px 10px; } .modal-body input[type=Submit]:not(.btn-primary):not(.btn-primary-mini):not(.btn-primary-large):hover, #courrier input[type=Submit]:not(.btn-primary):not(.btn-primary-mini):not(.btn-primary-large):hover, #agenda input[type=Submit]:not(.btn-primary):not(.btn-primary-mini):not(.btn-primary-large):hover, #dern_minute input[type=Submit]:not(.btn-primary):not(.btn-primary-mini):not(.btn-primary-large):hover, #albumphotos input[type=Submit]:not(.btn-primary):not(.btn-primary-mini):not(.btn-primary-large):hover, #voirfiche input[type=Submit]:not(.btn-primary):not(.btn-primary-mini):not(.btn-primary-large):hover, #recherche input[type=Submit]:not(.btn-primary):not(.btn-primary-mini):not(.btn-primary-large):hover, input[type=Submit]:not(.btn-primary):not(.btn-primary-mini):not(.btn-primary-large):hover { /* border: 1px solid #f0067f; background: #eb2a94; background: -webkit-gradient(linear, left top, left bottom, from(#f07fbd), to(#eb2a94)); background: -webkit-linear-gradient(top, #f07fbd, #eb2a94); background: -moz-linear-gradient(top, #f07fbd, #eb2a94); background: -ms-linear-gradient(top, #f07fbd, #eb2a94); background: -o-linear-gradient(top, #f07fbd, #eb2a94); background-image: -ms-linear-gradient(top, #f07fbd 0%, #eb2a94 100%); color: white; */ color: white; background-color:#2d9999; } .modal-body input[type=Submit]:not(.btn-primary):not(.btn-primary-mini):not(.btn-primary-large):active, #courrier input[type=Submit]:not(.btn-primary):not(.btn-primary-mini):not(.btn-primary-large):active, #agenda input[type=Submit]:not(.btn-primary):not(.btn-primary-mini):not(.btn-primary-large):active, #dern_minute input[type=Submit]:not(.btn-primary):not(.btn-primary-mini):not(.btn-primary-large):active, #albumphotos input[type=Submit]:not(.btn-primary):not(.btn-primary-mini):not(.btn-primary-large):active, #voirfiche input[type=Submit]:not(.btn-primary):not(.btn-primary-mini):not(.btn-primary-large):active, #recherche input[type=Submit]:not(.btn-primary):not(.btn-primary-mini):not(.btn-primary-large):active { /* text-shadow: #f2c4de 0 1px 0; border: 1px solid #f0067f; background: #eb2a94; background: -webkit-gradient(linear, left top, left bottom, from(#f07fbd), to(#eb2a94)); background: -webkit-linear-gradient(top, #f07fbd, #eb2a94); background: -moz-linear-gradient(top, #f07fbd, #eb2a94); background: -ms-linear-gradient(top, #f07fbd, #eb2a94); background: -o-linear-gradient(top, #f07fbd, #eb2a94); background-image: -ms-linear-gradient(top, #f07fbd 0%, #eb2a94 100%); color: #fff; */ color: black; } #courrier_recherche { position:relative; width:240px; height: 25px; margin: 0px 5px 0px 0px; /* padding: 2 0 0 0; */ text-transform:capitalize; /* background:url(../../../rep_all/css/images_ec_v3/titre_centre.png) repeat-x; */ font-size:8pt; font-family:Arial; vertical-align:text-top; text-align:right; color: black; float:right; } #courrier_recherche input[type=text]{ width: 100px; height: 19px; position: absolute; top: 3px; right: 67px; } #courrier_recherche input[type=Submit]{ position: absolute; top: 2px; right: 0px; margin: 0px 0px 0px 0px; text-transform:capitalize; font-size: 9px; font-family:Arial; padding: 0px 5px; } #courrier_recherche .glyphicon-search { position: absolute; top: 8px; right: 173px; color: white; } /******************************************/ /* Param */ /******************************************/ :focus{-moz-outline-style: none;} form {margin: 0; padding: 0;} a:focus { outline:0; } #page_cnx_ok { width:100%; height:100%; /* background-image: url('//www.entrecoquins.com/images_index10/fond-site2.jpg'); */ background-color: #f3ebeb; background-position: center; background-attachment: fixed; background-size : cover; } #entree_gauche { } #entree_milieu { width:100%; min-width:914px; /* background-image: url('//www.entrecoquins.com/images_index10/fond-site2.jpg'); */ background-color: #f3ebeb; background-position: center; background-attachment: fixed; background-size : cover; } #entree_droite { } /* ===== LEGACY V4 - Chat dialogue ===== Toutes ces regles sont scopees a body:not(.entree) pour ne PAS s'appliquer en v5 (page entree-v5 ou body.entree est present). En v5, le chat est restyle proprement en fin de fichier dans la section "PAGE ENTREE V5 - Chat dialogue" sans !important. */ body:not(.entree) #chat_dial_bloc { pointer-events: none; width: 610px; height: 525px; position: fixed; bottom:0px; right: 211px; } body:not(.entree) #chat_dial_action { width: 100%; height: 100%; background-color: white; border: 1px solid #b4e70b; border-radius: 5px 5px 0px 0px; display:none; } body:not(.entree) #chat_dial_mini { width: 150px; display:none; position:absolute; bottom:0px; right:0px; } body:not(.entree) #chat_dial_mini, body:not(.entree) #chat_dial_haut, body:not(.entree) #chat_dial_liste { display:none; pointer-events: visible; } body:not(.entree) #chat_dial_liste .ligne_user { position:relative; height:21px; } body:not(.entree) #chat_dial_liste #ferme { position: absolute; left: 110px; } body:not(.entree) #chat_dial_liste #popup { position: absolute; left: 93px; } body:not(.entree) #chat_dial_liste i { font-size: 18px; } body:not(.entree) #chat_dial_liste .info_user { position:absolute; top:0px; left:0px; color: #696662; } body:not(.entree) #chat_dial_liste .info_user p { margin: 2px 0 0 0; display: inline-block; } body:not(.entree) #chat_dial_liste #IMG_cpl, body:not(.entree) #chat_dial_liste #IMG_f, body:not(.entree) #chat_dial_liste #IMG_h, body:not(.entree) #chat_dial_liste #IMG_trans { float:left; } body:not(.entree) #chat_dial_bloc #titre { float:left; } body:not(.entree) #chat_dial_bloc #titre, body:not(.entree) #chat_dial_bloc #titre #titre_centre { background-color: #f3ebeb; background-color: #b4e70b; color: #696662; border-radius:5px 5px 0px 0px; } body:not(.entree) #chat_dial_bloc #titre a { color: #696662; } body:not(.entree) #chat_dial_bloc #titre a:hover { color: black; } body:not(.entree) #chat_dial_bloc #sound { float:left; } body:not(.entree) #chat_dial_bloc #reduc, body:not(.entree) #chat_dial_bloc #ferme, body:not(.entree) #chat_dial_bloc #grand { float:right; } body:not(.entree) #chat_dial_liste { float: left; height: 100%; width: 130px; background-color: white; border-right: 1px solid #b4e70b; } body:not(.entree) #chat_dial_message { display: table; height: 100%; background-color: white; pointer-events: visible; } body:not(.entree) #chat_dial_message #chat_dial_vide { text-align:center; width: 475px; } body:not(.entree) #chat_dial_liste .attente { background-color:#b4e70b; -webkit-animation-name: attenteclignote; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; animation-name: attenteclignote; animation-duration: 2s; animation-iteration-count: infinite; } @-webkit-keyframes attenteclignote { 0% {background-color: #b4e70b;} 50% {background-color: white;} } @keyframes attenteclignote { 0%{background-color: #b4e70b;} 50%{background-color: white;} } body:not(.entree) #chat_dial_liste .surbrillance { background-color:#f3ebeb; } #user_enligne_bloc { width: 191px; /* position: absolute; bottom: 0px; height: 80%; right: 18px; */ height: 80%; right: 18px; bottom: 0px; position: fixed; /* margin: 0px 18px 0px 0px; */ } #espace_contenu { overflow: hidden; } #conteneur_avc_recherche { /* width:595px; border:1px solid red; */ padding: 8px 8px 0px 8px; overflow: hidden; width: 100%; max-width: 970px; margin-left: auto; margin-right: auto; } #conteneur_basic { /* width:500px; /*border:1px solid red;*/ padding: 8px 8px 0px 8px; overflow: hidden; width: 100%; max-width: 970px; margin-left: auto; margin-right: auto; } #bloc_pub { max-width: 970px; margin-left: auto; margin-right: auto; } #bloc_info { /*background-color:#fbe099;*/ background-color:#fff1cc; font-size:12px; font-family:Arial; text-align:center; padding: 5px; } #bloc_info_non_centre { background-color:#fbe099; font-size:11px; font-family:Arial; } .texte_normal { font-size:12px; font-family:Arial; padding: 3 3 3 3; } .petit_txt { font-size:10px; font-family:Arial; } /*******************************************/ /* Boutons et liens */ /*******************************************/ /*bouton 1*/ #bouton_1_g { /* width: 7px; height:20px; background-image:url('../../../rep_all/css/images_ec_v3/bouton_1_g.png'); background-repeat:no-repeat; */ } #bouton_1_centre { height:20px; /* background-image:url('../../../rep_all/css/images_ec_v3/bouton_1_m.png'); */ font-size:8pt; font-family:Arial; } #bouton_1_centre a{ /* text-decoration:none; color: #ffffff; font-family:Arial; font-weight:bold; outline: none; text-shadow: #649899 0 1px 0; background: #63b0b0; background: -webkit-gradient(linear, left top, left bottom, from(#84e0e0), to(#63b0b0)); background: -webkit-linear-gradient(top, #84e0e0, #63b0b0); background: -moz-linear-gradient(top, #84e0e0, #63b0b0); background: -ms-linear-gradient(top, #84e0e0, #63b0b0); background: -o-linear-gradient(top, #84e0e0, #63b0b0); background-image: -ms-linear-gradient(top, #84e0e0 0%, #63b0b0 100%); color: #faf9f7; padding: 6px; /* border-radius: 6px; background-color: #36b4b4; font-size: 13px; text-decoration: none; vertical-align: middle; font-family: 'Roboto', sans-serif; border-radius: 5px; border: 1px solid #6ca3a3; color: #faf9f7; padding: 4px 10px 4px 10px; */ } #bouton_1_centre a:hover { /* color: #ffffff; font-family:Arial; font-weight:bold; text-decoration:underline; color: white; background-color: #2d9999; */ } #bouton_1_centre .fa { color: white; font-size: 26px; vertical-align: sub; } #bouton_1_d { /* width: 7px; height:20px; background-image:url('../../../rep_all/css/images_ec_v3/bouton_1_d.png'); background-repeat:no-repeat; */ } .petit_bouton { font-size:10px; font-family:Arial; } /* bloque de date */ /*******************/ #flight, .active, #calroot { -moz-border-radius:4px; } #flight { font-family:sans-serif; /* background:#333 url(/media/img/gradient/h80.png); */ font-size:11px; /* width:500px; */ margin:0 auto; /* padding:12px 0 12px 30px; height:56px; color:#ddd; -moz-box-shadow:0 0 10px #666; -webkit-box-shadow:0 0 10px #666; */ } #flight label { float:left; width:160px; display:block; padding:6px; border:1px solid transparent; margin-right:10px; } #flight .active { background-color:#fff; color:#333; border:1px solid #ccc; border-bottom:0; } .active input { color:#333; text-shadow:none; } /* date input */ .date { float:left; display:block; border:0; background-color:transparent; font-size:18px; width:105px; cursor:pointer; } /* date input trigger element - version moderne */ body .caltrigger { display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; float: left !important; background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%) !important; background-image: none !important; border: 1px solid #ddd !important; border-radius: 8px !important; margin-top: 0 !important; margin-left: 8px !important; cursor: pointer !important; transition: all 0.2s ease !important; position: relative !important; text-decoration: inherit !important; } body .caltrigger::before { content: "\e109"; font-family: 'Glyphicons Halflings'; font-size: 16px; color: var(--couleur-principale); } body .caltrigger:hover { background: linear-gradient(135deg, var(--couleur-principale) 0%, var(--couleur-principale-fonce) 100%) !important; border-color: var(--couleur-principale) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(var(--couleur-principale-rgb), 0.3) !important; } body .caltrigger:hover::before { color: white; } body .active .caltrigger { background: linear-gradient(135deg, var(--couleur-principale) 0%, var(--couleur-principale-fonce) 100%) !important; border-color: var(--couleur-principale) !important; box-shadow: 0 2px 8px rgba(var(--couleur-principale-rgb), 0.4) !important; } body .active .caltrigger::before { color: white; } /* Layout pour date + icône sur la même ligne dans l'agenda */ #agenda_container .date-input-wrapper { display: flex !important; align-items: center !important; gap: 0 !important; } #agenda_container .date-input-wrapper input[type="date"] { flex: 1 !important; margin: 0 !important; } #agenda_container .date-input-wrapper .caltrigger { float: none !important; flex-shrink: 0 !important; margin-left: 8px !important; } /* For the details, see: http://flowplayer.org/tools/dateinput/index.html#skinning */ /* calendar root element */ #calroot { /* place on top of other elements. set a higher value if nessessary */ z-index:1; font-family:sans-serif; background-color:#fff; border:1px solid #ccc; border-width:0 1px 1px; padding-top:10px; height:160px; width:160px; display:none; margin:0 0 0 -7px; -moz-border-radius-topleft:0; -moz-border-radius-topright:0; -webkit-border-top-left-radius:0; -webkit-border-top-right-radius:0; } /* head. contains title, prev/next month controls and possible month/year selectors */ #calhead { padding:2px 0; height:22px; } #caltitle { font-size:14px; color:var(--couleur-principale); float:left; text-align:center; width:123px; line-height:20px; text-shadow:0 1px 0 #ddd; } #calnext, #calprev { display:block; width:13px; height:20px; background:transparent url(//www.entrecoquins.com/beta2/images_css/calendrier_retour.gif) no-repeat scroll center center; float:left; cursor:pointer; margin-left:2px; } #calnext { background-image:url(//www.entrecoquins.com/beta2/images_css/calendrier_next.gif); float:right; margin-right:2px; } #calprev.caldisabled, #calnext.caldisabled { visibility:hidden; } /* year/month selector */ #caltitle select { font-size:10px; } /* names of the days */ #caldays { height:14px; border-bottom:1px solid #ddd; } #caldays span { display:block; float:left; width:22px; text-align:center; font-size:11px; } /* container for weeks */ #calweeks { background-color:#fff; margin-top:4px; } /* single week */ .calweek { clear:left; height:22px; } /* single day */ .calweek a { display:block; float:left; width:21px; height:20px; text-decoration:none; font-size:11px; margin-left:1px; text-align:center; line-height:20px; color:#666; -moz-border-radius:3px; -webkit-border-radius:3px; } /* different states */ .calweek a:hover, .calfocus { background-color:#ddd; } /* sunday */ a.calsun { color:red; } /* offmonth day */ a.caloff { color:#ccc; } a.caloff:hover { background-color:rgb(245, 245, 250); } /* unselecteble day */ a.caldisabled { background-color:#efefef !important; color:#ccc !important; cursor:default; } /* current date */ #calcurrent { background-color:var(--couleur-principale); color:#fff; border-radius:3px; } /* today */ #caltoday { background-color:rgba(var(--couleur-principale-rgb), 0.15); color:var(--couleur-principale); border-radius:3px; } /************************/ /* Modal */ /*************************/ .modal-title { color:var(--couleur-principale); } .modal-body, #bloc_modal #conteneur_basic { width:100%; /* background-color: #fbf7f7; */ } .modal-body #chargement { background-image: url('../../../rep_all/css/images_ec_v4/chargement_petit.gif'); background-repeat: no-repeat; background-position: center 8px; width: 100%; height: 115px; } .modal-body #chargement .icon_perso { font-size: 100px; display: inherit; } /******************************************/ /* Tableaux */ /******************************************/ #titre, #titre_bas { width:100%; /* height:30px; */ height: 25px; line-height:20px; margin:0; padding: 0 0 0 0; border:0; font-size:10pt; /*color: #567aa6; */ color: #ffffff; font-family:Arial; font-weight:bold; background-color: var(--couleur-principale); border-radius: 5px 5px 0px 0px; } #titre, #titre_bas { border-radius: 0px 0px 5px 5px; } #titre #titre_gauche { /* width:38px; */ width:0px; margin:0; padding: 0 0 0 0; /* background:url(../../../rep_all/css/images_ec_v3/titre_gauche.png) no-repeat; */ background-color: var(--couleur-principale); border-radius: 5px 5px 0px 0px; } #titre #titre_centre { /* width:auto; margin: 0px 0px 0px 0px; padding: 3px 0 0 7px; text-transform:capitalize; vertical-align:top; background-color: var(--couleur-principale); float:left; border-radius: 5px 5px 0px 0px; */ } #titre #titre_blocenplus { text-transform:capitalize; font-size: 11px; text-align: right; vertical-align: top; overflow: hidden; border-radius: 5px 5px 0px 0px; } #titre #titre_cpl, #titre #titre_homme, #titre #titre_femme, #titre #titre_trans{ text-transform:capitalize; padding: 5px 5px 0px 0px; } #titre #titre_droite { width:10px; margin:0; padding: 0 0 0 0; /* background:url(../../../rep_all/css/images_ec_v3/titre_droite.png) no-repeat; */ background-color: var(--couleur-principale); border-radius: 5px 5px 0px 0px; } #titre { border-radius: 5px 5px 0px 0px; } #titre_droite { border-radius: 0px 0px 5px 5px; } #titre_bas #titre_gauche_bas { width:10px; margin:0; padding: 0 0 0 0; /* background:url(../../../rep_all/css/images_ec_v3/titre_gauche_bas.png) no-repeat; background:url(../../../rep_all/css/images_ec_v3/titre_bas_gauche.png) no-repeat; */ } #titre_bas #titre_centre_bas { width:auto; margin: 0px 0px 0px 0px; padding: 0 0 0 0; text-transform:capitalize; float:left; /* background:url(../../../rep_all/css/images_ec_v3/titre_centre_bas.png) repeat-x; background:url(../../../rep_all/css/images_ec_v3/titre_bas_centre.png) repeat-x; */ } #titre_bas #titre_droite_bas { width:10px; margin:0; padding: 0 0 0 0; /* background:url(../../../rep_all/css/images_ec_v3/titre_droite_bas.png) no-repeat; background:url(../../../rep_all/css/images_ec_v3/titre_bas_droite.png) no-repeat; */ } #bloc_elements { /* border:2px solid #01649e; border-left:2px solid #01649e; border-right:2px solid #01649e; border-bottom:2px solid #01649e; border-top:0px; border-radius: 0px 0px 10px 10px; padding:0px 5px 5px 5px; -moz-border-radius:0px 0px 10px 10px; -webkit-border-radius:0px 0px 10px 10px; */ background-color:#ffffff; vertical-align: top; /* padding: 0px 3px 10px 3px; */ width:100%; margin: 0px 0px 10px 0px; overflow: hidden; border-radius: 0px 0px 5px 5px; } #recherche { width:100%; font-size:12px; font-family:Arial; overflow: visible; /* Important : permet aux suggestions de dépasser */ /* border:2px solid #01649e; border-left:2px solid #01649e; border-right:2px solid #01649e; border-bottom:2px solid #01649e; border-top:0px; border-radius: 0px 0px 10px 10px; -moz-border-radius:0px 0px 10px 10px; -webkit-border-radius:0px 0px 10px 10px; background-color:#ffffff; */ background-color: #fbf7f7; padding:5px 5px 5px 5px; border-radius: 0px 0px 5px 5px; } #recherche1 input[type="checkbox"] { margin: 0px 3px 0px 0px; } #recherche select, #recherche input[type="checkbox"], #recherche input[type="text"] { border: 1px solid #d7d3ce; background: #faf8f5; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: #3e3c3a; -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px; -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px; box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px; } #recherche select:focus { background: #fff; color: #696662;; } /* Base for label styling */ #recherche [type="checkbox"]:not(:checked), #recherche [type="checkbox"]:checked { position: absolute; left: -9999px; } #recherche [type="checkbox"]:not(:checked) + label, #recherche [type="checkbox"]:checked + label { position: relative; padding: 3px 0px 0px 19px; cursor: pointer; margin: 2px 0px 0px 0px; } /* checkbox aspect */ #recherche [type="checkbox"]:not(:checked) + label:before, #recherche [type="checkbox"]:checked + label:before { content: ''; position: absolute; left:0; top: 2px; width: 17px; height: 17px; border: 1px solid #aaa; background: #f8f8f8; border-radius: 3px; box-shadow: inset 0 1px 3px rgba(0,0,0,.3) } /* checked mark aspect */ #recherche [type="checkbox"]:not(:checked) + label:after, #recherche [type="checkbox"]:checked + label:after { content: '✔'; position: absolute; top: 3px; left: 2px; font-size: 18px; line-height: 0.8; color: #eb2a94; transition: all .2s; } /* checked mark aspect changes */ #recherche [type="checkbox"]:not(:checked) + label:after { opacity: 0; transform: scale(0); } #recherche [type="checkbox"]:checked + label:after { opacity: 1; transform: scale(1); } /* disabled checkbox */ #recherche [type="checkbox"]:disabled:not(:checked) + label:before, #recherche [type="checkbox"]:disabled:checked + label:before { box-shadow: none; border-color: #bbb; background-color: #ddd; } #recherche [type="checkbox"]:disabled:checked + label:after { color: #999; } #recherche [type="checkbox"]:disabled + label { color: #aaa; } /* accessibility */ #recherche [type="checkbox"]:checked:focus + label:before, #recherche [type="checkbox"]:not(:checked):focus + label:before { border: 1px dotted blue; } /* hover style just for information */ #recherche label:hover:before { border: 1px solid #4778d9!important; } #recherche_table { width:100%; padding:0 0 0 0; font-size:12px; font-family:Arial; } #recherche_pays , #recherche_km { width:220px; padding:0 0 0 0; font-size:12px; font-family:Arial; /* border:2px solid #e0f4fe; border-left:2px solid #e0f4fe; border-right:2px solid #e0f4fe; border-bottom:2px solid #e0f4fe; border-top:2px solid #e0f4fe; background-color:#f3ebeb; */ background-color: #f3ebeb; border-radius: 10px 10px 10px 10px; padding:5px 5px 5px 5px; /*arrondir les coins en haut ? gauche et en bas ? droite*/ -moz-border-radius:10px 10px 10px 10px; -webkit-border-radius:10px 10px 10px 10px; } .menu_txt { font-size:12px; font-family:Arial; } /* sous titre */ #sous_titre_bloc { /* border:1px solid #afcff9; background-color:#f2f7fd; background-color:#dae7f9; border:1px solid #afcff9; background-color:#f2f7fd; background-image:url('//www.entrecoquins.com/beta2/images_css/fiche_fond_photos.png'); background-repeat:repeat-y; */ background-color: #fbf7f7; font-size:12px; font-family:Arial; } #sous_titre_debut { /* width:15px; */ } #sous_titre_fin { /* width:auto; */ } #sous_titre_g{ /* width:8px; height:23px; background:url(//www.entrecoquins.com/beta2/images_css/sous_titre_g.png) no-repeat; */ } #sous_titre_centre{ height:23px; font-weight:bold; text-transform:capitalize; font-size:12px; /* background:url(//www.entrecoquins.com/beta2/images_css/sous_titre_centre.png); */ color: var(--couleur-principale); padding: 0px 0px 0px 5px; } #sous_titre_centre a { text-decoration:underline; } #sous_titre_centre a:hover { text-decoration:none; } #sous_titre_d{ /* width:8px; height:23px; background:url(//www.entrecoquins.com/beta2/images_css/sous_titre_d.png) no-repeat; */ } /* Sous menu onglet */ #onglet { width:100%; padding:0px 5px 0px 5px; background-color: #fbf7f7; height: 38px; border-bottom: 1px solid #beaeb1; display: inline-block; } #bloc_elements #onglet { width:100%; border-top:0px; border-left:0px; border-right:0px; border-bottom:0px; padding:0px 0px 0px 5px; border-bottom: 1px solid #beaeb1; } #onglet_milieu p, #onglet_milieu a { font-size:14px; font-family: roboto; text-align:center; text-decoration:none; display:block; color: #757575; } .onglet_bloc_1 #onglet_milieu p, .onglet_bloc_1 #onglet_milieu a { color: var(--couleur-principale); padding: 0px; } .onglet_bloc_1 #onglet_gauche { /* width:8px; height:27px; background:url(../../../rep_all/css/images_ec_v3/onglet_gauche_1.png) no-repeat; float:left; */ } .onglet_bloc_1 #onglet_milieu { float: left; } .onglet_bloc_1 #onglet_milieu a, .onglet_bloc_1 #onglet_milieu p { color:var(--couleur-principale); text-decoration:none; margin: 5px 3px 3px 3px; padding: 5px; /* border: 1px solid #ec6084; border-radius: 4px; */ } .onglet_bloc_1 #onglet_droite { /* width:9px; height:27px; background:url(../../../rep_all/css/images_ec_v3/onglet_droite_1.png) no-repeat; float:left; height:16px; float: left; border: 1px solid #ec6084; margin: 5px 0px 0px 5px; */ } .onglet_bloc_0 #onglet_gauche { /* width:8px; height:27px; background:url(../../../rep_all/css/images_ec_v3/onglet_gauche_0.png) no-repeat; float:left; */ } .onglet_bloc_0 #onglet_milieu { /* height:27px; background:url(../../../rep_all/css/images_ec_v3/onglet_mil_0.png); float:left; margin: 3px 0px 3px 5px; padding: 5px; */ color:var(--couleur-principale); border-radius: 4px; float: left; } .onglet_bloc_0 #onglet_milieu a, .onglet_bloc_0 #onglet_milieu p { /* float:left; */ border: 1px solid #fbf7f7; margin: 4px 3px 3px 3px; padding: 5px; text-decoration:none; } .onglet_bloc_0 #onglet_milieu a:hover { /* text-decoration:none; border: 1px solid #757575; margin: 3px 3px 3px 3px; */ border: 1px solid #757575; border-radius: 4px; } .onglet_bloc_0 #onglet_milieu .nbr { color:var(--couleur-principale); } .onglet_bloc_0 #onglet_droite { /* width:9px; height:27px; background:url(../../../rep_all/css/images_ec_v3/onglet_droite_0.png) no-repeat; float:left; height:16px; float: left; border: 1px solid #ec6084; margin: 5px 0px 0px 5px; */ } #onglet_milieu .icone_unique { padding: 0px 1px 2px 1px; } /* #onglet_div { background-color: #e5effc; } #onglet { height:21px; font-size:10px; font-family:Arial; } #onglet td { text-align:center; vertical-align:bottom; padding: 0 0 2 0; } #onglet_non_actif, #onglet_actif { color: #567aa6; } #onglet_non_actif a, #onglet_actif a{ text-decoration:none; color: #567aa6; outline: none; } #onglet_non_actif a:hover, #onglet_actif a:hover { color: #567aa6; text-decoration:underline; } #onglet_debut { width:15px; } #onglet_fin { width:10px; } #onglet_non_actif { width: 105px; background-image:url('//www.entrecoquins.com/beta2/images_css/onglet_non_actif.png'); background-repeat:no-repeat; } #onglet_actif { /*width: 105px; background-image:url('//www.entrecoquins.com/beta2/images_css/onglet_actif.png'); width: 104px; background-image:url('//www.entrecoquins.com/beta2/images_css/onglet_actif_2.png'); background-repeat:no-repeat; } */ /* ligne de filtre */ #filtre { height:21px; background-color: #f3ebeb; font-size:11px; font-family:Arial; text-align:center; color:#878787; font-weight:bold; } #filtre td{ text-align:center; } #filtre_txt { vertical-align:bottom; padding:0 5 0 0; float:left; } #filtre_fleche_haut a{ width: 15px; height: 14px; display: block; background-position: center bottom; background-image:url('../../../rep_all/css/images_ec_v3/filtre_fleche_haut.png'); background-repeat:no-repeat; float:left; } #filtre_fleche_bas a{ width: 15px; height: 14px; display: block; background-position: center bottom; background-image:url('../../../rep_all/css/images_ec_v3/filtre_fleche_bas.png'); background-repeat:no-repeat; float:left; } /* ligne des informations */ #tableau_coul0_txt { background-color: #fbf7f7; } #tableau_lignecoul1, #tableau_coul1_txt { background-color:#ffffff; } #tableau_lignecoul2, #tableau_coul2_txt { background-color:#f3ebeb; } #tableau_coul0_txt, #tableau_coul1_txt, #tableau_coul2_txt { font-size:12px; font-family:Arial; } /* ligne de pages */ #ligne_nbr_page { background-color: #f3ebeb; font-size:11px; font-family:Arial; text-align:center; } /* bloc style1 */ #bloc_style1_hg { height: 8px; width: 9px; background:url(//www.entrecoquins.com/beta2/images_css/bloc_style1_hg.png) no-repeat; } #bloc_style1_hm { width:auto; background:url(//www.entrecoquins.com/beta2/images_css/bloc_style1_hm.png); } #bloc_style1_hd { width:9px; background:url(//www.entrecoquins.com/beta2/images_css/bloc_style1_hd.png) no-repeat; } #bloc_style1_md { width:9px; background:url(//www.entrecoquins.com/beta2/images_css/bloc_style1_md.png); } #bloc_style1_mg { width:9px; background:url(//www.entrecoquins.com/beta2/images_css/bloc_style1_mg.png); } #bloc_style1_bg { height: 8px; width:9px; background:url(//www.entrecoquins.com/beta2/images_css/bloc_style1_bg.png) no-repeat; } #bloc_style1_bm { width:auto; background:url(//www.entrecoquins.com/beta2/images_css/bloc_style1_bm.png); } #bloc_style1_bd { width:9px; background:url(//www.entrecoquins.com/beta2/images_css/bloc_style1_bd.png) no-repeat; } #bloc_style1_centre { background-color: #ffffff; font-size:11px; font-family:Arial; vertical-align:middle; text-align: center ; } /******************************************/ /* Emplacements et specificit?es */ /******************************************/ /* Bloc emoicone */ #style_carat { position:relative; left:1px; top:1px; width:200px; height:27px; background-color:white; overflow:hidden; font-size:10px; font-family:Arial; } #emo { position:relative; left:1px; top:0px; width:200px; height:184px; background-color:white; overflow:auto; font-size:10px; font-family:Arial; } /* page Accueil/Menu */ #menu { /* width: 547px; */ } #menu #titre_etat_profil { overflow: hidden; float: right; width: 383px; margin: 3px; } #menu #etatprofil { overflow: hidden; float: left; width: 157px; position: 0px; height: 18px; color: white; font-size:11px; padding: 2px 0px 0px 1px; } #menu #etat_profil_bloc { display:none; } #menu #fiche_pourcent_10 { width:224px; height:30px; background-color:#f8f8f8; background-image:url('../../../rep_all/css/images_ec_v4/fiche_pourcent_10.png'); background-repeat:no-repeat; background-position: center center; overflow: hidden; } #menu #fiche_pourcent_30 { width:224px; height:17px; background-image:url('../../../rep_all/css/images_ec_v4/fiche_pourcent_30.png'); background-repeat:no-repeat; background-position: center center; overflow: hidden; } #menu #fiche_pourcent_70 { width:224px; height:17px; background-image:url('../../../rep_all/css/images_ec_v4/fiche_pourcent_70.png'); background-repeat:no-repeat; background-position: center center; overflow: hidden; } #menu #fiche_pourcent_100 { width:224px; height:17px; background-image:url('../../../rep_all/css/images_ec_v4/fiche_pourcent_100.png'); background-repeat:no-repeat; background-position: center center; overflow: hidden; } #menu #bloc_2 { /* height: 116px; margin: 0px 0px 10px 0px; */ } #menu #bloc_user { width:400px; background-color: #FFFFFF; position: relative; } #menu #info_profil { /* width:375px; height:114px; background-color:white; */ } #menu #bloc_user #list_bloc_photo img { margin: auto; } #menu #bloc_user #list_bloc_photo a{ text-align: center; } #menu #bloc_user #IMG_h, #menu #bloc_user #IMG_f, #menu #bloc_user #IMG_f_c, #menu #bloc_user #IMG_cpl, #menu #bloc_user #IMG_cpl_c, #menu #bloc_user #IMG_trans { position: absolute; left:59px; } #menu #bloc_user #text1 { position: absolute; top:27px; left:59px; width:100%; color:#878787; font-size:12px; font-family:Arial; margin: 0 0 0 3px; } #menu #bloc_user #text1 a { color:#0586d1; font-weight: bold; text-decoration: none; } #menu #bloc_user #text2 { position: absolute; top:48px; left:59px; color:#878787; font-size:12px; font-family:Arial; margin: 0 0 0 3px; } #menu #bloc_user #text2 b { color:#f93a9d; } #menu #info_profil_ajout { overflow: hidden; float: right; width: 180px; margin: 3px 0px 0px 0px; } #menu #menu_txt_bloc { margin: 7px 0px 0px 30px; } #menu #info_profil_ajout a { text-decoration:none; color:#f93a9d; font-weight:bold; font-size:12px; } #menu #info_profil_ajout a:hover { text-decoration:none; color:#c61370; } #menu #info_evenements { /* padding: 0px 0px 0px; margin: 0px 0px 10px 0px; background-color: white; */ } #menu #info_evenements #bloc_elements { padding: 0px 3px 25px 3px; } #menu #info_evenements #bouton_1_centre { float:right; padding: 12px 3px 0px 0px; } #menu #info_evenements #titre #bouton_1_centre { margin: 7px 5px 0px 0px; height: 15px; padding: 0px; } #menu #info_evenements #titre #bouton_1_centre a { font-size: 9px; font-family: arial; text-transform: initial; } #menu #info_evenements #bouton_1_centre a, #menu #profils_hasard #bouton_1_centre a, #menu #quelques_videos #bouton_1_centre a { color: white; font-size: 14px; vertical-align: sub; } #menu #info_evenements #bloc_elements > center { margin: 6px 0 0 0; } #menu #pseudo_video { font-size: 12px; color: #878787; vertical-align: middle; text-align: center; margin: 5px 0px 0px 0px; } #menu #pseudo_video a{ text-decoration:none; color: #878787; } #menu #pseudo_video a:hover{ color: black; } #menu #video_play { position: absolute; width: 100px; height: 88px; background-image: url("//www.entrecoquins.com/images/video_play.png"); background-position: center 10px; background-repeat: no-repeat; background-size: 60px 60px; color: white; padding: 63px 0px 0px 67px; font-size: 11px; } #menu #quelques_videos { /* padding: 0px 0px 0px; margin: 0px 0px 10px 0px; background-color: white; */ } #menu #quelques_videos #bloc_elements { padding: 0px 3px 26px 3px; } #menu #quelques_videos #ann_bloc_photo { margin:10px auto 0px auto; } #menu #quelques_videos #ann_bloc_photo img{ width: 98px; } #menu #quelques_videos #bouton_1_centre { padding: 17px 5px 0px 0px; float: right; } #menu #quelques_videos #bouton_1_centre i { vertical-align: middle; color:white; font-size: 22px; } #menu #info_pub { background-image:url('../../../rep_all/css/images_ec_v4/info_pub.png'); background-repeat:no-repeat; position: relative; width: 100%; height:172px; background-color: white; padding: 7px 10px 171px; margin: 0px 0px 15px 0px; } #menu #pub_parrainage { width: 35%; text-align: center; float: left; overflow: hidden; } #menu #pub_boutique { width: 35%; height:166px; text-align: center; float: left; overflow: hidden; } #menu #pub_boutique a { width:100%; height:100%; display: block; background-image:url('../../../rep_all/css/images_ec_v3/special/pub_boutique.png'); background-repeat:no-repeat; background-position: center center; margin:auto; } #menu #pub_club { width: 30%; height:164px; font-size:11px; font-family:Arial; background:url('../../../rep_all/css/images_ec_v3/acceuil_bloc_club.png') no-repeat; background-position: center center; padding: 6px 0px 0px 0px; float:right; } #menu #profils_hasard { padding: 0px 0px 44px; margin: 0px 0px 10px 0px; background-color: white; border-radius: 5px 5px 5px 5px; } #menu #profils_hasard { /* padding: 0px 0px 44px; margin: 0px 0px 10px 0px; background-color: white; */ } #menu #profils_hasard #bouton_1_centre { padding: 5px 5px 0px 0px; float: right; } /* #menu #info_recherche_rapide { width: 192px; float:left; } #menu #info_recherche_rapide #bloc_elements center { margin: 12px 0 4px; } */ #info_recherche_rapide2 { position:relative; padding: 0px 0px 0px 0px; } #info_recherche_rapide2 #recherche { background-color:white; } #info_recherche_rapide2 #bloc_elements { padding: 7px 3px 6px; } #info_recherche_rapide2 #recherche_rapide_autour { float:left; width:35%; } #info_recherche_rapide2 #recherche_rapide_photo { float:left; width:25%; } #info_recherche_rapide2 #recherche_rapide_video { float:left; width:25%; } #info_recherche_rapide2 #recherche_rapide_bouton { float:right; width:15%; } #menu #menu_recherche_txt { background-color:#f8f8f8; font-size:11px; color:#878787; padding: 0px 3px 0px 3px; } /* page chatcam */ #chatcam { background-color:white; } #chatcam table:first-child{ height:100%; width:100%; } #chatcam_v1 a{ width: 215px; height: 136px; display: block; background-image:url('//www.entrecoquins.com/beta2/images_css/chatcam_v1.png'); background-repeat:no-repeat; background-position: center center; } #chatcam_v2 a{ width: 215px; height: 136px; display: block; background-image:url('//www.entrecoquins.com/beta2/images_css/chatcam_v2.png'); background-repeat:no-repeat; background-position: center center; } /* page annonces */ #annonces_fleche_td { width:115px; /* background:url(../../../rep_all/css/images_ec_v3/titre_centre.png) repeat-x; */ background-color: var(--couleur-principale); float:right; } #annonces_fleche_td_bas { /* padding: 8 0 0 0; height:32px; background:url(../../../rep_all/css/images_ec_v3/titre_bas_centre.png) repeat-x; */ width:115px; float:right; } /* #annonces_fleche_tableau { width:90px; height:24px; font-size:8pt; font-family:Arial; vertical-align:middle; text-align: center ; background:url(../../../rep_all/css/images_ec_v3/annonce_fleche_fond.png) no-repeat; background-position: center top; padding: 5px 0px 4px 0px; } #annonces_fleche { width:18px; } #annonces_fleche_centre { width: auto; } #annonces_fleche_g a { width: 20px; height:14px; background-image:url('../../../rep_all/css/images_ec_v3/annonce_fleche_g.png'); background-repeat:no-repeat; background-position: 5px 0px; display: block; } #annonces_fleche_d a { width: 20px; height:14px; background-image:url('../../../rep_all/css/images_ec_v3/annonce_fleche_d.png'); background-repeat:no-repeat; background-position: 0px 0px; display: block ; } #annonces_fleche_g_bas a { width: 20px; height:14px; background-image:url('../../../rep_all/css/images_ec_v3/annonce_fleche_g.png'); background-repeat:no-repeat; background-position: 5px 0px; display: block; } #annonces_fleche_d_bas a { width: 20px; height:14px; background-image:url('../../../rep_all/css/images_ec_v3/annonce_fleche_d.png'); background-repeat:no-repeat; background-position: 0px 0px; display: block ; } .annonces_onglet_mode #onglet_milieu { float:right; } #annonces_onglet_tableau { padding: 0 0 0 10; } #annonces_bloc_icone_plusprecis { width: 14px; float: left; } #annonces_texte_plusprecis { font-size:12px; font-family:Arial; float: left; } #annonces_icone_plusprecis a{ width: 14px; height: 14px; display: block; background-image:url('//www.entrecoquins.com/beta2/images_css/group_close.png'); background-repeat:no-repeat; } #annonces_icone_plusprecis_ok a{ width: 14px; height: 14px; display: block; background-image:url('//www.entrecoquins.com/beta2/images_css/group_open.png'); background-repeat:no-repeat; } /* Page statistiques */ #stats #ann_bg_mos_cpl, #stats #ann_bg_mos_f, #stats #ann_bg_mos_h, #stats #ann_bg_mos_trans { height:131px; } #stats #ann_envoicourrier, #stats #ann_contact { display:none; } #stats #mosaique #ann_img_online, #stats #mosaique #ann_img_offline { position: absolute; height:10px; top: 3px; right: 3px; left: auto; background-image:none; } #stats #mosaique #ann_img_online .material-icons{ font-size:13px; color:#b4e70b; } #stats #mosaique #ann_img_offline .material-icons{ font-size:13px; color:#696662; } /* Page soirees */ #soiree #lieu { position: absolute; top: 20px; left: 102px; } #soiree #event_type { position: absolute; top: 34px; left: 102px; } #soiree_description_titre { height:21px; width: 105px; background-image:url('//www.entrecoquins.com/beta2/images_css/onglet_non_actif.png'); background-repeat:no-repeat; background-position: 5 0; text-align:left; vertical-align:bottom; color: #567aa6; padding:0 0 0 10; } #soiree #moment { font-weight: bold; color: var(--couleur-principale); margin: 44px 0px 0px 0px; } #soiree_description_txt { height:100%; width:315px; border:1px solid #afcff9; background-color: #ecf3fc; padding:5px 5px 5px 5px; margin: 0 0 5px 0; } #soiree_description_txt::first-letter { text-transform: capitalize; } #soiree_bloc_ajout_soiree { border:1px solid #FFFFFF; font-size:8pt; font-family:Arial; } #soiree_espace_bloc_pro { height:10px; } #soiree_espace_fond_titre { background-color: #696662; } #soiree_espace_fond_titre #sous_titre_centre a{ color: white; text-decoration:none; } #soiree_espace_fond_titre #sous_titre_centre a:hover{ color: #f3ebeb; } #soiree_tarif { font-size:10px; font-family:Arial; font-weight:bold; vertical-align:bottom; } #soiree #ann_ligne_m_cpl, #soiree #ann_ligne_m_h, #soiree #ann_ligne_m_f, #soiree #ann_ligne_m_trans { width:60px; padding: 0px 0px 0px 0px; vertical-align:middle; text-align: center ; font-weight:bold; } #soiree #tableau_info { position: absolute; top: 28px; right: 0px; font-size: xx-small; text-align: center; border-spacing: 1px; } #tableau_supp_soiree_prive { position: absolute; bottom: 10px; right: 0px; } /* Page derniere minute #dern_minute #ann_envoicourrier a { background-position: 3px 1px; font-size: 11px; width: 122px; } */ #dern_minute #moment { font-weight: bold; color: var(--couleur-principale); margin: 16px 0px 0px; } #dern_minute #description { width:100%; margin: 0px 0px 5px 0px; } #dern_minute .top { background-color: #fbf7f7; border: 1px solid #a6a6a6; border-radius: 5px; padding: 5px; } /* Page journal */ #journal #bloc_elements { padding: 0px 0px 10px 0px; } #journal #localite { position: absolute; left: 102px; } #journal #ann_bloc_photo img { width: 98px; } #journal #bouton_1_centre { float:right; } #journal #ann_journal_info { padding: 29px 0px 0px 0px; } /* Page cap d'agde */ #cap_info { position: absolute; top: 20px; left: 104px; color: var(--couleur-principale); } #capagde #ann_ageville { left: 104px; top: 37px; } /* Page courrier */ #courrier a { color: #757575; } #courrier #bloc_elements { padding:0px; margin:0px; } #courrier_pseudo a, #courrier_titre a, #courrier_date { font-size:10pt; font-family:Arial; color: #757575; } #courrier_pseudo { width:90px; font-size:10pt; font-size:10pt; font-family:Arial; } #courrier_date { width:65px; } #courrier_select { width:20px; } #courrier #message { width:100%; margin: 5px 0px 5px 0px; resize: vertical; } #courrier_select input[type="checkbox"] { margin: 2px 0 0 3px; } #courrier_non_lu, #courrier_non_lu a { background-color: var(--couleur-principale); font-weight:bold; color:#ffffff; } #courrier .surbrillance, #courrier .surbrillance a { color:black; } #courrier_img_lu, #courrier_img_lu a { width:20px; height:13px; background:url(../../../rep_all/css/images_ec_v4/courrier_lu.png); background-repeat:no-repeat; background-position : center, center; } #courrier_img_nonlu, #courrier_img_nonlu a { width:20px; height:13px; background:url(../../../rep_all/css/images_ec_v4/courrier_nonlu.png); background-repeat:no-repeat; background-position : center, center; } #courrier_sup_select { height:30px; text-align:right; } #courrier_Infodesctruct { height:25px; text-align:center; } #courrier #sous_titre_bloc { padding: 5 5 5 5; } #courrier #espace_bloc { height:10px; } #courrier_resultat { /* border:1px solid #e0f4fe; */ } #courrier_bloc_pseudo { height: 116px; margin: -8px 0px 0px 0px; padding: 10px 0px 0px 0px; } #courrier #ann_ageville { position:relative; left: 0px; } #courrier_historique { border: 1px solid #f3ebeb; background-color:#fffff; font-size:12px; font-family:Arial; margin: 0px 0px 7px 0px; } #courrier_moment { color:#808080; font-size:10px; } #courrier_sujet b { color:#808080; font-size:10px; } #courrier_message { padding:5px 0px 0px 0px; } #courrier_emmeteur_pseudo { width:340px; margin:3px 0px 3px 3px; text-align:left; font-weight:bold; border:1px solid #f3ebeb; background-color:#fffff; border-radius: 10px 10px 10px 10px; padding:0px 5px 5px 5px; /*arrondir les coins en haut ? gauche et en bas ? droite*/ -moz-border-radius:10px 10px 10px 10px; -webkit-border-radius:10px 10px 10px 10px; } #courrier_emmeteur_user { width:340px; margin:3px 0px 3px 100px; text-align:left; font-weight:bold; background-color:#f3ebeb; border-radius: 10px 10px 10px 10px; padding:0px 5px 5px 5px; /*arrondir les coins en haut ? gauche et en bas ? droite*/ -moz-border-radius:10px 10px 10px 10px; -webkit-border-radius:10px 10px 10px 10px; } #courrier_enquette { text-align:left; font-weight:bold; border:1px solid #f21387; border-radius: 10px 10px 10px 10px; padding:0px 5px 5px 5px; /*arrondir les coins en haut ? gauche et en bas ? droite*/ -moz-border-radius:10px 10px 10px 10px; -webkit-border-radius:10px 10px 10px 10px; } #courrier #courrier_sup_select input[type=Submit] { margin: 8px 5px 0px; font-size: 12px; border-radius: 5px; } #modal_courrier #courrier #image { padding: 0px 3px 0px 0px; } #modal_courrier #courrier #image #ann_bloc_photo img { height: 100px; border-radius: 7px 7px 7px 7px; } #modal_courrier #courrier #sous_titre_bloc { background-color: #f3ebeb; } #modal_courrier #courrier #ann_bloc_photo img { padding:0px; } #modal_courrier #courrier #ann_sans_photo { height: 100px; background-position: center center; } /* (Anciennes regles legacy V4 sur #abonnement supprimees - 2026-05-03 : ~275 lignes ciblant #abonnement, #tableau_etat, #abo_fond_*, #bloc_listeabo, etc. Code mort : les subs V4 du CGI (abonn_h, abonn_stripe_h, abonn_couple, etc.) sont desactivees par court-circuit (lignes 662-666 et 5166-5170 d'abonnement.cgi redirigent vers abonn_type_h / abonn_type_autre qui utilisent le wrapper moderne). Le wrapper utilise desormais #abonnement (renomme depuis #abonnement_v5 le 2026-05-03 puisque les regles legacy ne sont plus la pour entrer en conflit). */ a.infobulle_abo { /* on d?finit le lien pr?sent dans la balise info */ position: relative; color: blue; font-style : italic; text-decoration: none; } a.infobulle_abo span { /* on cache l'infobulle */ display: none; } a.infobulle_abo:hover { /* aucun arri?re plan */ background: none; /* On d?finit une valeur pour que l'info bulle s'affiche au dessus du texte */ z-index: 10; } a.infobulle_abo:hover span { /* on affiche l'infobulle en ligne */ display: inline; /* on d?finit la position du block */ position: absolute; /* on change la valeur de la propri?t? white-space pour ?viter les retours ? la ligne */ white-space: nowrap; /* on positionne notre infobulle */ top: 30px; left: -300px; /* couleur de l'arri?re plan */ background-color: b8d2f2; /* couleur du texte */ color: 3b6190; /* marge interne */ padding: 3px; /* bord de l'info bulle border: 1px solid blue; border-left: 3px solid blue; */ background:url(//www.entrecoquins.com/beta2/images_css/abon_fond_etat2.png); border:3px solid #7db0db; } /* Abonnement version 5 */ #abov5_zone_abo {background:#fff; color:#717272; font-size:12px; padding:0px; overflow:hidden; width: 508px; padding: 0px 0px 0px 10px;} #abov5_zone_abo p {margin: 5px 0px 5px 0px; display:block;} #abov5_zone_abo a {text-decoration:none} .abov5_titre {font-family:'Century Gothic'; font-weight:normal} #abov5_acces_illimite {color:#fff; height:25px; line-height:25px; padding:0 10px; font-family:'roboto'; font-size:15px; border-radius:6px; text-transform:uppercase; margin:3px 0 10px; background: -moz-linear-gradient(270deg, #ff5db1 0%, #ef027d 100%);/* FF3.6+ */ background: -webkit-gradient(linear, 270deg, color-stop(0%, #ff5db1), color-stop(100%, #ef027d));/* Chrome,Safari4+ */ background: -webkit-linear-gradient(270deg, #ff5db1 0%, #ef027d 100%);/* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(270deg, #ff5db1 0%, #ef027d 100%);/* Opera 11.10+ */ background: -ms-linear-gradient(270deg, #ff5db1 0%, #ef027d 100%);/* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5db1', endColorstr='#ef027d', GradientType='1'); /* for IE */ background: linear-gradient(180deg, #ff5db1 0%, #ef027d 100%);/* W3C */ width:100%; } #abov5_acces_site {color:#fff; height:25px; line-height:25px; padding:0 10px; font-family:'roboto'; font-size:15px; border-radius:6px; text-transform:uppercase; margin:0 0 10px; clear:both; background: -moz-linear-gradient(270deg, #31b0fb 0%, #1a98e1 100%);/* FF3.6+ */ background: -webkit-gradient(linear, 270deg, color-stop(0%, #31b0fb), color-stop(100%, #1a98e1));/* Chrome,Safari4+ */ background: -webkit-linear-gradient(270deg, #31b0fb 0%, #1a98e1 100%);/* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(270deg, #31b0fb 0%, #1a98e1 100%);/* Opera 11.10+ */ background: -ms-linear-gradient(270deg, #31b0fb 0%, #1a98e1 100%);/* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#31b0fb', endColorstr='#1a98e1', GradientType='1'); /* for IE */ background: linear-gradient(180deg, #31b0fb 0%, #1a98e1 100%);/* W3C */ width:100%; } #abov5_avg {color:#6e6e6e; padding:0; font-family:'roboto'; font-size:17px; text-transform:uppercase; margin:0 0 0; clear:both;} #abov5_avg span {color:#1e9be5} .abov5_bigfen {background:url(../../../rep_all/css/images_ec_v3/special/abov5_fond_a.png); width:240px; height:245px; padding:20px 0 0; float:left; margin:0 11px 0 0} .abov5_bigfen .abov5_titre {display:block; text-align:center; color:#fff; font-size:24px; margin:0 0 6px; text-shadow:2px 2px 2px #f10c83} .abov5_bigfen img {display:block; margin:6px auto 12px} .abov5_bigfen .abov5_prix {text-align:center; height:116px; font-size:98px; font-family:'chunk'; color:#f21286; line-height:116px; margin:0 0 20px} .abov5_bigfen .abov5_prix .abov5_euro {line-height:20px; font-size:50px; position:relative; top:-34px; font-weight:normal} .abov5_bigfen .abov5_prix .abov5_par {font-family:'Century Gothic'; font-size:17px; color:#949494; margin-left:-36px} .abov5_bigfen .abov5_footer {font-size:11px; color:#878787; text-align:center} .abov5_acces1j3m {background:url(../../../rep_all/css/images_ec_v3/special/abov5_fond_b.png); width:240px; height:116px; padding:10px 0 0; float:left; margin:0 0 10px 0; position:relative} .abov5_acces1j3m img {display:block; position:absolute; top:12px; right:12px} .abov5_acces1j3m .abov5_titre {display:block; color:#f21286; font-size:17px; margin:0 0 10px 12px} .abov5_acces1j3m .abov5_prix {text-align:center; height:46px; font-size:32px; font-family:'chunk'; color:#f21286; line-height:46px; margin:0 0 13px} .abov5_acces1j3m .abov5_prix .abov5_euro {line-height:20px; font-size:15px; position:relative; top:-12px; font-weight:normal} .abov5_acces1j3m .abov5_prix .abov5_par {font-family:'Century Gothic'; font-size:11px; color:#9c9a9a; margin-left:-10px} .abov5_acces1j3m .abov5_footer {font-size:11px; color:#fff; text-align:center} #abov5_pass12mois {float:right; margin:0 0 0 11px; background:url(../../../rep_all/css/images_ec_v3/special/abov5_fond_c.png)} #abov5_pass12mois .abov5_titre {text-shadow:2px 2px 2px #1d9ae4} #abov5_pass12mois .abov5_prix {color:#1e9be5} .abov5_passmini {background:url(../../../rep_all/css/images_ec_v3/special/abov5_fond_d.png); width:115px; height:117px; overflow:hidden; display:inline-block; padding:6px 0 0; margin:0 0 7px} .abov5_passmini.abov5_cg {margin-right:7px} .abov5_passmini.abov5_cdernier {margin-bottom:20px} .abov5_passmini .abov5_titre {display:block; color:#1e9be5; font-size:17px; margin:0 0 6px 12px} .abov5_passmini .abov5_prix {text-align:center; height:46px; font-size:25px; font-family:'chunk'; color:#1e9be5; line-height:46px; margin:0 0 7px} .abov5_passmini .abov5_prix .abov5_euro {line-height:20px; font-size:12px; position:relative; top:-12px; font-weight:normal} .abov5_passmini .abov5_prix .abov5_par {font-family:'Century Gothic'; font-size:11px; color:#9c9a9a; margin-left:-6px} .abov5_passmini .abov5_footer {font-size:11px; color:#fff; text-align:center} p.abov5_info, #abov5_zone_code_promo {border:1px solid #c7e2f2; padding:8px; border-radius:6px; text-align:center} p.abov5_info a {color:#1c9ae3; text-decoration:none} p.abov5_info a:hover, p.abov5_info a:focus {text-decoration:underline} #abov5_zone_code_promo {background:#e7f3fa; text-align:left; margin:0 0 10px} #abov5_zone_code_promo input {border:1px solid #c7e2f2; margin:0 0 0 10px; border-radius:6px; width:100px; padding:2px 10px} #abov5_tabavg {border-collapse:collapse; width:100%; margin:0 0 20px; border:1px solid #c7e2f2; border-radius:6px; display:block} #abov5_tabavg th {color:#fff; font-family:'Century Gothic'; font-size:13px; text-align:center; height:28px; line-height:28px; width:92px; background: -moz-linear-gradient(270deg, #31b0fb 0%, #1a98e1 100%);/* FF3.6+ */ background: -webkit-gradient(linear, 270deg, color-stop(0%, #31b0fb), color-stop(100%, #1a98e1));/* Chrome,Safari4+ */ background: -webkit-linear-gradient(270deg, #31b0fb 0%, #1a98e1 100%);/* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(270deg, #31b0fb 0%, #1a98e1 100%);/* Opera 11.10+ */ background: -ms-linear-gradient(270deg, #31b0fb 0%, #1a98e1 100%);/* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#31b0fb', endColorstr='#1a98e1', GradientType='1'); /* for IE */ background: linear-gradient(180deg, #31b0fb 0%, #1a98e1 100%);/* W3C */ } #abov5_cpl #abov5_tabavg th {width:146px;} #abov5_tabavg th.abov5_g {width:306px;} #abov5_cpl #abov5_tabavg th.abov5_g {width:350px} #abov5_tabavg th:first-child {border-radius:6px 0 0 0} #abov5_tabavg th:last-child {border-radius:0 6px 0 0} #abov5_tabavg td {height:24px; line-height:24px; color:#717272; text-align:center; border-left:1px solid #c7e2f2} #abov5_tabavg td img {display:block; margin:auto} #abov5_tabavg td.abov5_g {padding-left:10px; text-align:left; border:0; font-size: 12px;} #abov5_tabavg tr:nth-child(odd) {background:#e7f3fa} #abov5_tabavg .abov5_oui {display:block; margin:auto; width:18px; height:14px; background:url(../../../rep_all/css/images_ec_v3/special/abov5_check.png); text-indent:-4444em; overflow:hidden} .abov5_separateur {display:block; height:1px; background:#f0f0f0; clear:both; margin:0 0 10px} .abov5_reduc {font-family:'Century Gothic'; width:36px; height:36px; line-height:36px; color:#fff; font-size:14px; font-weight:bold; display:block; text-align:center; border-radius:50%; background: -moz-linear-gradient(270deg, #ff8016 0%, #ff4705 100%);/* FF3.6+ */ background: -webkit-gradient(linear, 270deg, color-stop(0%, #ff8016), color-stop(100%, #ff4705));/* Chrome,Safari4+ */ background: -webkit-linear-gradient(270deg, #ff8016 0%, #ff4705 100%);/* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(270deg, #ff8016 0%, #ff4705 100%);/* Opera 11.10+ */ background: -ms-linear-gradient(270deg, #ff8016 0%, #ff4705 100%);/* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8016', endColorstr='#ff4705', GradientType='1'); /* for IE */ background: linear-gradient(180deg, #ff8016 0%, #ff4705 100%);/* W3C */ } .abov5_reduc.abov5_bg2 { background: -moz-linear-gradient(270deg, #dae019 0%, #b4ce21 100%);/* FF3.6+ */ background: -webkit-gradient(linear, 270deg, color-stop(0%, #dae019), color-stop(100%, #b4ce21));/* Chrome,Safari4+ */ background: -webkit-linear-gradient(270deg, #dae019 0%, #b4ce21 100%);/* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(270deg, #dae019 0%, #b4ce21 100%);/* Opera 11.10+ */ background: -ms-linear-gradient(270deg, #dae019 0%, #b4ce21 100%);/* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dae019', endColorstr='#b4ce21', GradientType='1'); /* for IE */ background: linear-gradient(180deg, #dae019 0%, #b4ce21 100%);/* W3C */ } .abov5_reduc span {font-size:10px; position:relative; top:-4px; font-weight:normal; font-family:Arial} .abov5_reduc.abov5_mini {width:28px; height:28px; line-height:28px; font-size:12px} .abov5_reduc.abov5_mini span {font-size:7px} #abov5_acces_1mois, #abov5_pass12mois {position:relative} #abov5_acces_1mois .abov5_reduc, #abov5_pass12mois .abov5_reduc {position:absolute; right:14px; top:89px} .abov5_acces1j3m .abov5_reduc {position:absolute; right:16px; top:46px} #tableau_etat { background: none repeat scroll 0 0 #E7F3FA; margin: 0 0 4px; text-align: left; border: 1px solid #C7E2F2; border-radius: 6px; padding: 2px; font-size:10px; width:100%; } /* (Anciennes regles legacy V4 #abonnement #tableau_etat + #abonnement .abo_ligne* supprimees - 2026-05-03 : ~80 lignes de code mort. La structure HTML moderne utilise .abo-prix-bloc-tarifs .abo_ligne_* qui a sa propre zone CSS dans "ABONNEMENT V5 — Hero, bandeau certif, bloc prix moderne". */ #abo_certif a { color: #fff; } #abo_certif .material-icons{ float: left; margin: 6px 19px 6px 6px; color: white; } /* Bloc contacts */ #listecontacts #bloc_elements { margin :0px; padding: 0px 0px 10px 0px; } #listecontacts #ann_contact:hover { width: 25px; height: 25px; display: block; background-image:url('../../../rep_all/css/images_ec_v3/bouton_supp_mini.png'); background-repeat:no-repeat; } #listecontacts #voirfiche_coeur { width:100%; } /* liste des bloqu? #listecontacts #ann_ligne_g_cpl { width:275px; } */ /* Liste des commentaires */ #commentaires_etat_attente { width:50px; font-size:10px; font-family:Arial; background-color:#fff1cc; text-align: center ; } #commentaires_etat_affiche { width:50px; font-size:10px; font-family:Arial; background-color:#d8f8b4; text-align:center; } /* Modification d'une fiche */ #modiffiche #bloc_elements #tableau_coul2_txt td b, #modiffiche #bloc_elements #tableau_coul1_txt td b { margin: 0px 0px 0px 5px; } #modiffiche #bloc_elements textarea { width:97%; font-size: 13px; resize: vertical; } #modiffiche #nbcar { margin: 2px 0px 5px 5px; } #modiffiche #tableau_fiche_f, #modiffiche #tableau_fiche_h, #modiffiche #tableau_fiche_trans { width: 415px; height:216px; font-size:12px; font-family:Arial; border: 1px solid #f3ebeb; background-color:#ffffff; border-radius: 10px 10px 10px 10px; padding:5px 5px 5px 5px; /*arrondir les coins en haut ? gauche et en bas ? droite*/ -moz-border-radius:10px 10px 10px 10px; -webkit-border-radius:10px 10px 10px 10px; } #modiffiche #tableau_fiche_f { background-image:url('../../../rep_all/css/images_ec_v4/fiche_fond_info_F.png'); background-repeat:no-repeat; } #modiffiche #tableau_fiche_h { background-image:url('../../../rep_all/css/images_ec_v4/fiche_fond_info_H.png'); background-repeat:no-repeat; } #modiffiche #tableau_fiche_trans { background-image:url('../../../rep_all/css/images_ec_v4/fiche_fond_info_trans.png'); background-repeat:no-repeat; } #modiffiche #tableau_fiche_f td, #modiffiche #tableau_fiche_h td, #modiffiche #tableau_fiche_trans td { padding: 3 0 0 10; font-size:12px; font-family:Arial; } #modiffiche #titre_onglet #texte { border-bottom: 1px solid #f3ebeb; margin: 0px 15px 0px 19px; padding: 0 0 0 18px; color: #696662; font-weight: bold; } /* Historique */ #histo_chat { background-color: white; border-radius: 0px 0px 12px 12px; } #histo_chat #bloc_elements{ margin:0px; padding: 0px 0px 10px 0px; } /* Moderateurs */ #moderateur_liste #ann_envoicourrier { top: -4px; left: 0px; position: relative; } /* Album Photo */ #albumphotos #bloc_elements { padding:0px; margin:0px 0px 10px 0px; } #albumphotos #chargement { background-image: url('../../../rep_all/css/images_ec_v4/chargement_petit.gif'); background-repeat: no-repeat; background-position: center 8px; width: 100%; height: 115px; } #album_fleche_bas a { width:31px; height:30px; margin: 0px 0px 0px 3px; background-image:url('../../../rep_all/css/images_ec_v3/album_fleche_bas.png'); background-repeat:no-repeat; display: block; } #album_fleche_haut a{ width:31px; height:30px; margin: 0px 0px 10px 3px; background-image:url('../../../rep_all/css/images_ec_v3/album_fleche_haut.png'); background-repeat:no-repeat; display: block; } #albumphotos #bouton_passgalprivee { font-size: 12px; padding: 3px; margin: 1px; } /* chatpop - regles legacy v4 (scopees avec body:not(.entree) pour ne pas impacter le chat v5 refait dans entree.cgi) */ body:not(.entree) #chat_user_iframe { float: right; height: 100%; } body:not(.entree) #chat_user_mini { float: right; width: 100px; } body:not(.entree) .chat_iframe_up { width:478px; height:100%; } #chatpop #titre_gauche, #chatpop #titre_centre, #chatpop #type_fiche_info_vide, body:not(.entree) #chat_dial_bloc #titre_gauche, body:not(.entree) #chat_dial_bloc #titre_centre, body:not(.entree) #chat_dial_bloc #type_fiche_info_vide { width:initial; float: left; } #chatpop #titre_blocenplus,#chatpop #titre_droite { float: right; } #chatpop #titre_cpl, #chatpop #titre_homme, #chatpop #titre_femme, #chatpop #titre_trans { float: left; } #chatpop #ann_bloc_photo, #chatpop #ann_bloc_photo #ann_sans_photo, #chatpop #ann_bloc_photo #ann_sans_photo a { background-position: center center; width:50px; height:50px; } #chatpop #ann_bloc_photo { float: left; width: 12%; margin: 0px 0px 0px 5px; border:initial; } #chatpop #ann_bloc_photo img { width: 47px; height: 47px; object-fit: cover; overflow: hidden; border-radius: 7px 7px 7px 7px; } #chatpop #chatpop #voirfiche_note { width: 16%; } #chatpop #voirfiche_courrier { width: 16%; } #chatpop #voirfiche_coeur { width: 16%; } #chatpop #voirfiche_bloque { width: 21%; } #chatpop #voirfiche_note, #chatpop #voirfiche_courrier, #chatpop #voirfiche_coeur, #chatpop #voirfiche_bloque, #chatpop #voirfiche_flash { vertical-align: middle; text-align: center; float:left; width: 21%; } #chatpop #bloc_elements { background-color:#f7f7f9; } #chatpop #statustxtaff { font-size: 12px; margin: 2px 0px 0px 3px; display: inline-block; } #chatpop_espacebloc_hauteur { height: 3px; } #chatpop #chatpop_bloc_etat { height: 23px; font-size:10px; font-family:Arial; float:left; } #chatpop #chatpop_info_popup { display:none; font-size: 12px; margin: 2px 0px 0px 68px; color: red; float: left; } #messageaff { max-height:312px; width:100%; height:100%; background-color:#ffffff; font-size:14px; font-family:Arial; overflow:auto; } #chatpop textarea { resize: vertical; max-height: 72px; } #chatpop_system #messageaff { max-height:441px; } #chatpop_phrasestype td { background-color: #ffffff; font-size:11px; font-family:Arial; vertical-align:middle; text-align: center ; border-width:1px; border-style:solid; border-color:#5582D3; } #chatpop #photo { position:relative; width:111px; height:111px; border:1px solid #e0f4fe; background-color:#ffffff; overflow:hidden; } #chatpop #chatpop_tableaulargeurgras { width: 100%; border:1px solid #e0f4fe; background-color:#ffffff; padding: 2 2 2 2; } #bouton_gras a { width:30px; height:16px; border:0px; background:url(../../../rep_all/css/images_ec_v3/chatpop_bold.png) no-repeat; background-position: 5px 0px; float:left; display:block; } #chatpop #bouton_emo a { background:url(../../../rep_all/css/images_ec_v4/icone_emo.png) no-repeat; background-position: center center; width:18px; height:16px; border:0px; display:block; float:left; } #chatpop_tableaulargeuremo { width:300px; } #chatpop #bouton_recharge a { width:180px; height:16px; border:0px; background:url(../../../rep_all/css/images_ec_v3/chatpop_recharge.png) no-repeat; background-position: 157px 0px; display:none; } #chatpop #emoico { display:none; width: 100%; height: 290px; background-color: #ffffff; overflow: auto; font-size: 10px; font-family: Arial; z-index: 5; position: absolute; top: 76px; } #chatpop_mess_user { width:auto; margin:3px 3px 3px 30px; text-align:left; border:1px solid #e0f4fe; background-color:#f3ebeb; border-radius: 10px 10px 10px 10px; padding:2px 1px 1px 5px; /*arrondir les coins en haut ? gauche et en bas ? droite*/ -moz-border-radius:10px 10px 10px 10px; font-size:12px; font-family:Arial; } #chatpop_mess_user b{ font-weight:bold; } #chatpop_mess_pseudo { width:auto; margin:3px 30px 3px 3px; text-align:left; border:1px solid #e0f4fe; background-color:#fffff; border-radius: 10px 10px 10px 10px; padding:2px 1px 1px 5px; /*arrondir les coins en haut ? gauche et en bas ? droite*/ -moz-border-radius:10px 10px 10px 10px; font-size:12px; font-family:Arial; } #chatpop_mess_pseudo b{ font-weight:bold; } #chatpop #btn_envoi { font-size: 14px; margin: 2px 0px 0px 15px; } #chatpop #btn_envoi_img { font-size: 11px; margin: -4px 6px 0px 15px; padding: 5px; } #videochat-lecture { background-image:url('//www.entrecoquins.com/beta2/images_css/fiche_fond_photos.png'); background-repeat:repeat-y; border:1px solid #afcff9; padding: 1px; } #videochat-envoi { background-image:url('//www.entrecoquins.com/beta2/images_css/fiche_fond_photos.png'); background-repeat:repeat-y; border:1px solid #afcff9; padding: 1px; } #webcam_control_panel a{ background-image:url('//www.entrecoquins.com/beta2/images_css/webcam_control_panel.png'); background-repeat:no-repeat; width: 15px; height: 15px; display: block ; } .webcam_ico { height: 23px; padding: 3px 5px 0px; float:right; } #chatpop #bouton_1_centre a { font-size: 11px; } #chatpop #sawebcam, #chatpop #mawebcam { width: 162px; height: 122px; background: url(https://chat-test2.entrecoquins.com/img/chargement_grand.gif); background-repeat: no-repeat; background-size: 39%; background-position: 50% 50%; border: 1px solid #696662; } #sawebcam { margin: 23px 0px 20px 0px; } #mawebcam { margin: 0px 0px 10px 0px; } #webcam_mic { background-image:url('//www.entrecoquins.com/beta2/images_css/webcam_mic.png'); background-repeat:no-repeat; width: 15px; height: 15px; } #webcam_hp { background-image:url('//www.entrecoquins.com/beta2/images_css/webcam_hp.png'); background-repeat:no-repeat; width: 15px; height: 15px; } /* fiche */ /* #conteneur_basic #voirfiche{ width:514px; } */ #voirfiche #bloc_elements { background: #f8f8f8; } #voirfiche_tabl_menu #espace_gauche { width: 80px; } #voirfiche_tabl_menu #espace_droite { width: 80px; } #voirfiche_menu_fond { height:68px; } #voirfiche_tabl_menu { width: 100%; font-size: 9px; font-family: 'Arial', sans-serif; color: #696662; } #voirfiche_tabl_menu a{ color: #696662; } #voirfiche_tabl_menu a:hover{ color: black; text-decoration:none; } #voirfiche_tabl_menu i { font-size:30px; } #voirfiche_menu_espace { width: 23px; height: 41px; display: block; background-image:url('../../../rep_all/css/images_ec_v3/fiche_menu_espace.png'); background-repeat:no-repeat; background-position: center center; } #voirfiche #titre_gauche { float: left; width: 55px; margin: 2px 0px 0px 5px; } #voirfiche #titre_gauche #bouton_1_centre a { font-size: 12px; padding: 2px 3px 2px; font-family:Arial; font-weight: normal; } #voirfiche #titre_gauche #bouton_1_centre i { font-size: 18px; } /* Anciens styles voirfiche action bar supprimés — remplacés par .fiche-actions-bar v5 */ #listebloques #voirfiche_bloque { width: 55px; height: 44px; display: block; background-image:url('../../../rep_all/css/images_ec_v3/fiche_interdit.png'); background-repeat:no-repeat; background-position: center center; } #type_fiche_info_vide { width: 115px; } #type_fiche_info { width: 200px; font-size:11px; color:#fffff; vertical-align:top; overflow: hidden; float: left; padding: 1px 0px 0px 60px; } #type_fiche_info #certif, #type_fiche_info #douteuse{ margin: 2px 0px 0px; } #type_fiche_info #certif i { font-size: 13px; color: rgb(180, 231, 11); vertical-align: top; margin: 3px 0px 0px 0px; } #type_fiche_info #douteuse i { font-size: 17px; color: rgb(245, 242, 37); vertical-align: top; margin: 1px 0px 0px 0px; } #type_fiche_info #fausse{ font-size: 17px; color: red; vertical-align: top; margin: 1px 0px 0px 0px; } #type_fiche_info #bloque{ font-size: 17px; color: red; vertical-align: top; margin: 1px 0px 0px 0px; display:none; } #onglet_photo_pub, #onglet_photo_privee { float:left; } #voirfiche_tabl_photo { width:100%; } /* #voirfiche #bloc_img_public img, #voirfiche #bloc_img_privee img { border-radius:5px; } */ #voirfiche_tabl_capagde { width: 100%; font-size:12px; background-color: #e2d2d2; color: #333; } #voirfiche_sans_photo { width: 200px; height: 209px; /* background-image:url('../../../rep_all/css/images_ec_v5/sans_photo_grand.png'); background-repeat:repeat-y; */ background-image: var(--url-img-vide-h); } #voirfiche_sans_photo.cpl, #voirfiche_sans_photo.cpl a { background-image: var(--url-img-vide-cpl); background-size: cover; } #voirfiche_sans_photo.h, #voirfiche_sans_photo.h a { background-image: var(--url-img-vide-h); background-size: cover; } #voirfiche_sans_photo.f, #voirfiche_sans_photo.f a { background-image: var(--url-img-vide-f); background-size: cover; } #voirfiche_sans_photo.trans, #voirfiche_sans_photo.trans a { background-image: var(--url-img-vide-trans); background-size: cover; } #voirfiche_tabl_description { width: 100%; background-color:white; } #voirfiche_tabl_commentaire, #voirfiche_tabl_dernieremin, #voirfiche_tabl_soiree { /*word-break: break-all;*/ width: 100%; background-color:#ffffff; border-radius: 0px 10px 10px 10px; padding:5px 5px 5px 5px; /*arrondir les coins en haut ? gauche et en bas ? droite*/ -moz-border-radius:0px 10px 10px 10px; -webkit-border-radius:0px 10px 10px 10px; } #voirfiche_bloc_info_H, #voirfiche_bloc_info_F, #voirfiche_bloc_info_TRANS { width: 215px; height:216px; font-size:12px; font-family:Arial; background-color:#fbf7f7; border-radius: 10px 10px 10px 10px; padding:5px 5px 5px 5px; /*arrondir les coins en haut ? gauche et en bas ? droite*/ -moz-border-radius:10px 10px 10px 10px; -webkit-border-radius:10px 10px 10px 10px; } #voirfiche_bloc_info_H { background-image:url('../../../rep_all/css/images_ec_v4/fiche_fond_info_H.png'); background-repeat:no-repeat; } #voirfiche_bloc_info_F { background-image:url('../../../rep_all/css/images_ec_v4/fiche_fond_info_F.png'); background-repeat:no-repeat; } #voirfiche_bloc_info_TRANS { background-image:url('../../../rep_all/css/images_ec_v4/fiche_fond_info_trans.png'); background-repeat:no-repeat; } #voirfiche_bloc_info_global { width: 464px; height:100%; font-size:12px; font-family:Arial; background-color:#fbf7f7; border-radius: 10px 10px 10px 10px; padding:5px 5px 5px 5px; /*arrondir les coins en haut ? gauche et en bas ? droite*/ -moz-border-radius:10px 10px 10px 10px; -webkit-border-radius:10px 10px 10px 10px; } #voirfiche_bloc_info_global td, #voirfiche_bloc_info_H td, #voirfiche_bloc_info_F td, #voirfiche_bloc_info_TRANS td { padding: 0px 0px 0px 3px; } #voirfiche #bloc_info { /*border-bottom: 1px solid #696662;*/ padding: 0px; } #voirfiche #voirfiche_tabl_info #bloc_info { padding: 1px; border-top: 1px solid #beaeb1; border-bottom: 1px solid #beaeb1; } #voirfiche #gallery_video { border-bottom: 1px solid #696662; } #voirfiche #espace_commentaire #ann_bloc_photo img { height:100%; border-radius: 7px; } /* Map deplacement */ #map_deplacement #bouton_1_centre a{ font-size: 12px; margin: 0px 5px 0px 0px; } #map_deplacement #recherche input[type="text"] { font-size: 12px; } #map_deplacement #recherche input[type="Submit"] { font-size: 12px; margin: 10px 0px 0px 0px; } /* Club map */ #mapclub #liste_choix table { padding: 1px 1px 1px 1px; } #mapclub #ann_bloc_photo { height: 109px; } #mapclub #ann_mos_pseudo { top: 75px; } #mapclub #ann_mos_date { top: 92px; } /* Club fiche */ #club_fiche #coordonnee, #club_fiche #notes { font-size:12px; font-family:Arial; background-color:#ffffff; border-radius: 0px 0px 10px 10px; padding:5px 5px 5px 5px; /*arrondir les coins en haut ? gauche et en bas ? droite*/ -moz-border-radius:10px 10px 10px 10px; -webkit-border-radius:10px 10px 10px 10px; } #club_fiche #coordonnee { width:220; } #club_fiche #notes { width:120; } #club_fiche #photo_mini { padding:5 0 0 0; } #club_fiche_pseudo { background-color:#f3ebeb; width:100%; height:25px; padding: 0px 0px 0px 10px; font-size:12px; font-family:Arial; color:#878787; /* border-left:1px solid #e0f4fe; border-bottom:1px solid #e0f4fe; border-top:1px solid #e0f4fe; */ } #club_fiche_pseudo a { color:#696662; } #club_fiche_date { background-color:#f3ebeb; width:141px; height:25px; padding: 0px 30px 0px 0px; font-size:12px; font-family:Arial; text-align:right; color:#696662; /* border-right:1px solid #e0f4fe; border-bottom:1px solid #e0f4fe; border-top:1px solid #e0f4fe; */ } #club_fiche_commentaire { font-size:12px; font-family:Arial; padding: 10px 5px 15px 5px; } #club_fiche #ann_bloc_photo { height: 109px; } #club_fiche #ann_mos_pseudo { top: 75px; } #club_fiche #ann_mos_date { top: 92px; } #club_fiche #club_fiche_commentaire { background-color:#f3ebeb; border-radius: 5px; } #club_fiche_commentaire:first-letter { text-transform: uppercase; } /******************************************/ /* Bloc d'annonces */ /******************************************/ #ann_nouveau_bloc, .ann_bloc_tableau { font-size:12px; font-family:Arial; position:relative; } #bloc_liste_annonce { background-color:#ffffff; /* border-left:2px solid #01649e; border-right:2px solid #01649e; */ padding:0px 5px 5px 5px; } #ann_sans_photo, #ann_sans_photo a { height: 67px; display: block; background-position: center center; background-image: url('../../../rep_all/css/images_ec_v3/sans_photo_petit.png'); background-repeat: no-repeat; border-radius: 7px; border: 1px solid rgb(201, 198, 198); padding: 1px; } #ann_sans_photo.cpl, #ann_sans_photo.cpl a { background-image: var(--url-img-vide-cpl); background-size: cover; } #ann_sans_photo.h, #ann_sans_photo.h a { background-image: var(--url-img-vide-h); background-size: cover; } #ann_sans_photo.f, #ann_sans_photo.f a { background-image: var(--url-img-vide-f); background-size: cover; } #ann_sans_photo.trans, #ann_sans_photo.trans a { background-image: var(--url-img-vide-trans); background-size: cover; } #ann_sans_photo_bloque, #ann_sans_photo_bloque a { width: 100%; height: 52px; display: block ; background-position: center center; background-image:url('../../../rep_all/css/images_ec_v3/sans_photo_petit_bloque.png'); background-repeat:no-repeat; } #ann_nouveau { position: absolute; top: 1px; left: 1px; color: white; font-size: 10px; text-align: center; background-color: #f86c06; padding: 4px; border-radius: 5px 0px; font-family: 'Roboto', sans-serif; width: 56px; } #ann_libresoir { position: absolute; top: 1px; left: 1px; color: white; font-size: 10px; text-align: center; background-color: #f806f5; padding: 4px; border-radius: 5px 0px; font-family: 'Roboto', sans-serif; width: 68px; } #ann_dernminute { position: absolute; top: 1px; left: 1px; color: white; font-size: 10px; text-align: center; background-color: #f80631; padding: 4px; border-radius: 5px 0px; font-family: 'Roboto', sans-serif; width: 82px; } #ann_event { position: absolute; top: 1px; left: 1px; color: white; font-size: 10px; text-align: center; background-color: #0692f8; padding: 4px; border-radius: 5px 0px; font-family: 'Roboto', sans-serif; width: 63px; } #ann_deplacement { position: absolute; height: 16px; width: 26px; top: 80px; left: 163px; font-size: 20px; color: #ecc360; } #ann_entrebloc { height: 15px; background-color: #e3e3e3; border: 7px solid #FFFFFF; overflow: hidden; } #ann_bg_cpl, #ann_bg_f, #ann_bg_h, #ann_bg_trans { height: 100px; font-size:12px; font-family:Arial; } #ann_ligne_g_cpl, #ann_ligne_g_f, #ann_ligne_g_h, #ann_ligne_g_trans { /* border-top : 1px solid #e0f4fe; border-left : 1px solid #e0f4fe; border-bottom : 1px solid #e0f4fe; */ width:auto; height:20px; padding: 0px 0px 0px 5px; } #ann_ligne_g_cpl a, #ann_ligne_g_f a, #ann_ligne_g_h a, #ann_ligne_g_trans a { text-decoration:none; padding: 0px 0px 0px 0px; color: #757575; font-weight:bold; } #ann_ligne_g_cpl a:hover, #ann_ligne_g_f a:hover, #ann_ligne_g_h a:hover, #ann_ligne_g_trans a:hover { /*color: black;*/ } #ann_ligne_m_cpl, #ann_ligne_m_f, #ann_ligne_m_h, #ann_ligne_m_trans{ /* border-top : 1px solid #e0f4fe; border-bottom : 1px solid #e0f4fe; */ width:29px; padding: 0px 0px 0px 3px; text-align:right; } #ann_ligne_d_cpl, #ann_ligne_d_f, #ann_ligne_d_h, #ann_ligne_d_trans { width:121px; /* border-top: 1px solid #e0f4fe; border-right: 1px solid #e0f4fe; border-bottom : 1px solid #e0f4fe; */ text-align:right; padding: 2px 5px 0px 0px; color:white; font-weight:bold; } #ann_ligne_g_cpl, #ann_ligne_m_cpl, #ann_ligne_d_cpl, td #ann_ligne_d_cpl { background-color: #fbf7f7; } #ann_ligne_g_f, #ann_ligne_m_f, #ann_ligne_d_f, td #ann_ligne_d_f { background-color: #fbf7f7; } #ann_ligne_g_h, #ann_ligne_m_h, #ann_ligne_d_h, td #ann_ligne_d_h { /* background-color:#e6f4fc; */ background-color: #fbf7f7; } #ann_ligne_g_trans, #ann_ligne_m_trans, #ann_ligne_d_trans, td #ann_ligne_d_trans { background-color: #fbf7f7; } #ann_ligne_d_cpl { /* background:url(../../../rep_all/css/images_ec_v3/ann_ligne_d_cpl.png) no-repeat; background-position:right center; */ color:#cd88dc; } #ann_ligne_d_f { /* background:url(../../../rep_all/css/images_ec_v3/ann_ligne_d_f.png) no-repeat; background-position:right center; */ color:#ff4fb7; } #ann_ligne_d_h { /* background:url(../../../rep_all/css/images_ec_v3/ann_ligne_d_h.png) no-repeat; background-position:right center; */ color:#53b1e7; } #ann_ligne_d_trans { /* background:url(../../../rep_all/css/images_ec_v3/ann_ligne_d_trans.png) no-repeat; background-position:right center; */ color:#f2a606; } #ann_bloc_photo { width: 100px; height: 100px; vertical-align: top; border-radius: 7px; border: 1px solid rgb(201, 198, 198); position:relative; } #ann_bloc_photo img { width: 100px; height: 75px; object-fit: cover; overflow: hidden; border-radius: 7px 7px 0px 0px; } #ann_bloc_photo #image { width: 100px; height: 75px; border-radius: 6px 6px 0px 0px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } #ann_bg_cpl #ann_bloc_photo, #ann_bg_cpl #ann_sans_photo, #ann_bg_mos_cpl { border: 1px solid #cd88dc; } #ann_bg_h #ann_bloc_photo, #ann_bg_h #ann_sans_photo, #ann_bg_mos_h { border: 1px solid #53b1e7; } #ann_bg_f #ann_bloc_photo, #ann_bg_f #ann_sans_photo, #ann_bg_mos_f { border: 1px solid #ff4fb7; } #ann_bg_trans #ann_bloc_photo, #ann_bg_trans #ann_sans_photo, #ann_bg_mos_trans { border: 1px solid #f2a606; } #ann_pseudo_info { height: 78px; } #ann_bloc_photo #ann_sans_photo, #ann_bloc_photo #ann_sans_photo a { width: 100px; height: 75px; margin: 0px 0px 0px 0px; border: 0px; } #ann_dern_cnx { } #ann_dern_cnx b { } #ann_enligne { width: 20px; text-align: left; vertical-align: bottom; padding: 0px 0px 0px 0px; color: #288eca; position: absolute; top: 78px; left: 74px; font-size: 0px; } #ann_enligne a { text-decoration:none; color:#288eca; } #ann_ageville { white-space: nowrap; width: 160px; color:#757575; overflow: hidden; -o-text-overflow: ellipsis; /* pour Opera 9 */ text-overflow: ellipsis; position: absolute; line-height: 18px; left: 104px; } #ann_distance { position: absolute; top: 21px; right: 3px; font-style: italic; } #ann_distance, #ann_distance b { color:#757575 } #ann_distance b { font-size:0px; } #ann_ageville img, #ann_journal_info img, #ann_contact_info img{ display:none; } #ann_anniv { position: absolute; top: 75px; left: 104px; color: var(--couleur-principale); } #ann_contact_info { vertical-align: top; } #ann_envoicourrier { position: absolute; top: 76px; left: 41px; } #ann_envoicourrier a { text-decoration:none; padding: 0px 0px 0px 20px; background:url('../../../rep_all/css/images_ec_v4/courriermini.png') no-repeat; background-position: 0px 5px; width: 20px; height: 19px; display: block; font-size: 0px; } #ann_contact { width: 20px; height: 19px; background-position: 0px 3px; cursor:pointer; position: absolute; top: 76px; left: 8px; } /* Coeur favoris legacy (image PNG en background). Scope a body:not(.entree) pour ne PAS s'appliquer en page entree v5 (ou notre coeur Material Icons gere le visuel). */ body:not(.entree) .ann_contact_nonactif { background: url('../../../rep_all/css/images_ec_v3/annonce_contact_off.png') no-repeat; cursor:pointer; } body:not(.entree) .ann_contact_actif { background: url('../../../rep_all/css/images_ec_v3/annonce_contact_on.png') no-repeat; cursor:pointer; } #ann_video { position: absolute; width:17px; height:17px; left: 185px; top: 79px; } #ann_video i { font-size: 17px; margin: 3px 0px 0px 2px; color: rgb(249, 53, 53); } #ann_img_online { background:url('../../../rep_all/css/images_ec_v4/mini_chat.png') no-repeat; width:20px; height:17px; float: left; } #ann_img_offline { background:url('../../../rep_all/css/images_ec_v3/offlignepetit.png') no-repeat; width:20px; height:17px; float: left; } #mosaique { display: inline-block; overflow: hidden; vertical-align:top; } #ann_bg_mos_cpl, #ann_bg_mos_f, #ann_bg_mos_h, #ann_bg_mos_trans { position:relative; font-size:11px; font-family:Arial; text-align:center; color:#8c8c8c; } #ann_bg_mos_cpl a, #ann_bg_mos_f a, #ann_bg_mos_h a, #ann_bg_mos_trans a{ font-size:12px; font-family:Arial; text-align:center; text-decoration:none; color:#696662; font-weight:bold; } #ann_bg_mos_cpl a:hover, #ann_bg_mos_f a:hover, #ann_bg_mos_h a:hover, #ann_bg_mos_trans a:hover{ color:black; } #ann_mos_photo { /* height:83px; */ } #ann_mos_photo img { border-radius: 7px 7px 0px 0px; width: 100%; height: 100px; object-fit: cover; } #ann_mos_photo #image { border-radius: 7px 7px 0px 0px; width: 100%; height: 107px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } #ann_mos_photo #ann_sans_photo { /* width: 57px; margin: 16px auto; border: initial; */ border: 0px; border-radius: 7px 7px 0px 0px; width: 100%; height: 100px; object-fit: cover; } #ann_bg_mos_cpl a:hover, #ann_bg_mos_f a:hover, #ann_bg_mos_h a:hover, #ann_bg_mos_trans a:hover { text-decoration:none; } #ann_bg_mos_cpl, #ann_bg_mos_f, #ann_bg_mos_h, #ann_bg_mos_trans { width:106px; height:139px; border-radius:10px; margin: 5px 5px 5px 5px; /* display: inline-block; overflow: hidden; float:left; */ } #ann_mos_type { position:absolute; width:36px; height:33px; top:0px; left:0px; z-index: 2; } #ann_bg_mos_cpl #ann_mos_type { background:url('../../../rep_all/css/images_ec_v4/annonce_bg_cpl_mosaique.png') no-repeat; } #ann_bg_mos_f #ann_mos_type { background:url('../../../rep_all/css/images_ec_v4/annonce_bg_f_mosaique.png') no-repeat; } #ann_bg_mos_h #ann_mos_type { background:url('../../../rep_all/css/images_ec_v4/annonce_bg_h_mosaique.png') no-repeat; } #ann_bg_mos_trans #ann_mos_type { background:url('../../../rep_all/css/images_ec_v4/annonce_bg_trans_mosaique.png') no-repeat; } #mosaique #ann_contact { top: 115px; } #mosaique #ann_envoicourrier { top: 115px; font-size: 0px; } #mosaique #ann_img_online, #mosaique #ann_img_offline { position: absolute; top: 117px; left: 76px; } #mosaique #ann_img_online i, #mosaique #ann_img_offline i { font-size:0px; } #ann_mos_pseudo { position: absolute; top: 107px; width: 100px; color: #696662; text-decoration:none; font-size: 12px; font-family: Arial; font-weight:bold; text-align: center; } #ann_mos_pseudo a { color: #696662; } #ann_mos_pseudo a:hover { color: black; } #ann_mos_date { position: absolute; top: 115px; width: 100px; color: #696662; text-align: center; font-size: 12px; } #mosaique #ann_nouveau { position: absolute; top: 79px; left: 0px; background-color: #f86c06; border-radius: 8px 8px 0px 0px; width: 104px; } #mosaique #ann_libresoir { position: absolute; top: 79px; left: 0px; background-color: #f806f5; border-radius: 8px 8px 0px 0px; width: 104px; } #mosaique #ann_dernminute { position: absolute; top: 79px; left: 0px; background-color: #f806f5; border-radius: 8px 8px 0px 0px; width: 104px; } #mosaique #ann_event { position: absolute; top: 79px; left: 0px; background-color: #0692f8; border-radius: 8px 8px 0px 0px; width: 104px; } #mosaique #ann_video { position: absolute; width: 17px; height: 17px; left: 83px; top: 78px; } /******************************************/ /* Menu du haut */ /******************************************/ #menu_haut { display: table; position: relative; width:100%; height: 60px; font-size: 10px; padding:0px 5px 0px 0px; margin:0px; text-align: center; font-family: 'Arial', sans-serif; background-color: #fbf7f7; list-style-type:none; } /* #menu_haut #separateur { width: 1px; height: 57px; background-color: white; } */ #menu_haut li { float:left; } #menu_haut a{ width:52px; height:57px; font-size:9px; font-family: 'Arial', sans-serif; text-decoration:none; text-align:center; padding:2px 0px 0px 0px; float:left; color: #696662; } #menu_haut #menu_haut_gauche { display: table-cell; width:178px; height: 100%; background-color: #fbf7f7; text-align: left; } #menu_haut #menu_haut_gauche a{ width: 100%; height: 100%; font-size:15px; } #menu_haut_gauche #logo { background-image:url('../../../rep_all/css/images_ec_v4/logo_menu.png'); background-repeat:no-repeat; width:173; height:100%; display: block ; background-position: center center; margin: 0px 0px 0px 2px; } #menu_haut a:hover { color: black; } #menu_haut .material-icons { font-size: 28px; width: 100%; } #menu_haut .fa { font-size: 28px; width: 100%; } #menu_haut_globale { display: table-cell; width: 215px; } #menu_haut_info { display: table-cell; vertical-align: middle; } #menu_haut_info_user { width: 300px; margin: 0px auto; /*background-color: white; */ /*padding: 2px; */ border-radius: 5px; font-size: 11px; color:#696662; } #menu_haut_info_user a { float:none; font-size: 11px; color:black; } #menu_haut_info_user #bouton_abo { margin: 0px; background-color: #fbf7f7; } #menu_haut_droite { display: table-cell; width: 209px; } #menu_haut_droite #deconnexion { float: right; } #menu_activite { height:35px; background-color: #504c4d; } #menu_activite a .fa { color:white; } #menu_activite #bouton_menu { position:relative; width:178px; font-size: 15px; float:left; margin: 7px 0px 0px 4px; } #menu_activite #bouton_menu a { text-decoration: none; color: white; font-family: 'Roboto', sans-serif; } #menu_activite #bouton_menu a:hover { color: #fbf7f7; } #menu_activite #liste_activite { height: 35px; overflow: hidden; padding: 6px 0px 0px 0px; } #menu_activite li { background-color: #504c4d; text-align: center; float: left; } #menu_activite #recherche_personne { width:25%; } #menu_activite #recherche_online { width:15%; } #menu_activite #soirees { width:25%; } #menu_activite #soirees .fa { font-size: 14px; display: inline-block; margin: 3px 0px 0px; vertical-align: top; } #menu_activite #dern_minutes { width:25%; } #menu_activite #chatcam { width:25%; } #menu_activite #chatcam .icon_perso { font-size: 19px; vertical-align: middle; margin: -4px 0px 0px; display: inline-block; } #menu_activite li a { color: white; /* background-color:#fbf7f7; */ border-radius: 5px 5px 5px 5px; padding: 4px 3px 5px 5px; text-decoration: none; font-size: 15px; font-weight: initial; text-align: center; font-family: 'Roboto', sans-serif; } #menu_activite li a:hover { color: #696662; background-color: #fbf7f7; } #menu_activite #recherche_online .fa { color:#b4e70b; } #menu_activite #nbr { color: #f10d83; border: 1px solid white; background-color: white; font-size: 11px; margin: -2px 0px 0px 0px; border-radius: 5px; display: inline-block; overflow: hidden; padding: 0px 1px 0px 1px; } #menu_haut #user_action { position: relative; } /* Les anciens styles v4 (#chat_enattente, #courrier_enattente, #notif_enattente, #contact_enattente, #courrier_enattente_nbr) positionnaient ces badges en position: absolute à des coordonnées fixes (top:33px; left:xxx) correspondant à l'ancien menu horizontal v4. En v5, ces IDs sont réutilisés dans la nouvelle topbar (.entree-topbar-icons > .entree-icon-btn > .entree-badge) pour conserver la compat avec les scripts existants (maj_courrier_enattente, maj_contact_enattente...). Les règles v5 qui les stylent correctement sont plus bas (.entree-badge). */ #menu_haut li#agenda a{ width:53px; height:57px; background: url('../../../rep_all/css/images_ec_v3/menu_h_agenda.png') no-repeat; float:left; } #menu_haut li#historique a{ width:51px; height:56px; background: url('../../../rep_all/css/images_ec_v3/menu_h_historique.png') no-repeat; float:left; background-position: -2px; } #menu_haut #modo a{ float:right; } #menu_haut #faq a{ float:right; } #menu_haut #compte a{ float:right; } #menu_haut li#abo a{ width:50px; height:57px; background: url('../../../rep_all/css/images_ec_v3/menu_h_abo.png') no-repeat; float:left; } #menu_haut li#abo_nonactif a{ width:50px; height:57px; background: url('../../../rep_all/css/images_ec_v3/menu_h_abo_nonactif.gif') no-repeat; background-position: 10px 20px; float:left; } #menu_haut li#prive a{ width:37px; height:57px; background: url('../../../rep_all/css/images_ec_v3/menu_h_modepriv.png') no-repeat; float:left; display:none; } /* #menu_haut_quit{ width:51px; height:47px; float:right; } #menu_haut_quit a{ width:51px; height:47px; font-size:9px; font-family:Arial; color:#288eca; text-decoration:none; text-align:center; display:block; background: url(../../../rep_all/css/images_ec_v3/menu_h_picto_quit.png) no-repeat; background-color: #f3ebeb; background-color: rgba(255, 255, 255, 0.8); background-position: 12px 14px; border-radius: 0px 0px 0px 5px; } */ #message_haut { margin:5px; } #message_haut #bloc_info{ background-color: #fbe099; padding: 3px; font-size: 12px; } /* Menu Profil du haut */ #menu_profil{ display:none; padding: 0px 0px 7px 16px; background-color: white; border-bottom: 1px solid rgb(105, 102, 98); border-top: 1px solid #696662; } #menu_profil #abonnement{ width:initial; } /* #menu_profil .menu li { height:30px; float:left; margin-right:10px; } #menu_profil .menu li a{ color:#3b5d14; text-decoration:none; padding:0 10px; height:30px; line-height:30px; display:block; float:left; padding:0 26px 0 10px; } #menu_profil .menu li a:hover{ } #menu_profil ul .submenu { border:solid 1px #fff; border-top:none; background-color: #f3ebeb; position:relative; top:4px; width:150px; padding:6px 0; clear:both; z-index:11; display:none; } #menu_profil ul .submenu li{ background:none; display:block; float:none; margin:0 0px; border:0; height:25px; line-height:normal; border-top:solid 1px #DEDEDE; } #menu_profil .submenu li a{ background:none; display:block; float:none; padding:6px 6px; margin:0 0 0 10; border:0; height:25px; color:#105cbe; line-height:normal; text-align:left; } #menu_profil .submenu li a:hover{ background: #fbf4f4; height:25px; } #menu_profil #paramuser{ background: url(//www.entrecoquins.com/beta2/images_css/menu_g_pref.png) no-repeat; background-position: 4px 50%; padding-left:20px; } #menu_profil #modiffiche{ background: url(//www.entrecoquins.com/beta2/images_css/menu_g_modiffiche.png) no-repeat; background-position: 4px 50%; padding-left:20px; } #menu_profil #albumphoto{ background: url(//www.entrecoquins.com/beta2/images_css/menu_g_album.png) no-repeat; background-position: 4px 50%; padding-left:20px; } #menu_profil #voirfiche{ background: url(//www.entrecoquins.com/beta2/images_css/menu_g_voirfiche.png) no-repeat; background-position: 4px 50%; padding-left:20px; } #menu_profil #listebloque{ background: url(//www.entrecoquins.com/beta2/images_css/menu_g_bloque.png) no-repeat; background-position: 4px 50%; padding-left:20px; } #menu_profil #commentaires{ background: url(//www.entrecoquins.com/beta2/images_css/menu_g_commentaire.png) no-repeat; background-position: 4px 50%; padding-left:20px; } #menu_profil #abonnement{ background: url(//www.entrecoquins.com/beta2/images_css/menu_g_abbonnement.png) no-repeat; background-position: 4px 50%; padding-left:20px; } #menu_profil #parrainage{ background: url(../../../rep_all/css/images_ec_v3/menu_g_parrainage.png) no-repeat; background-position: 4px 50%; padding-left:20px; } */ /******************************************/ /* Menu de gauche */ /******************************************/ #menu_gauche { width:178px; margin:0; padding: 0 0 0px 0px; font-size:10px; font-family:Arial; text-align:left; /* background:url(../../../rep_all/css/images_ec_v3/menu_g_fond.png); background-repeat:repeat-y; */ list-style-type:none; outline: none; background-color: #f3ebeb; background-color: #fbf7f7; border-radius: 0px 0px 5px 5px; float: left; } #menu_gauche #espace { height:18px; } #menu_gauche li { vertical-align: middle; padding: 10px 0px 0px 2px; font-size: 12px; color: #696662; text-decoration:none; } #menu_gauche li, #menu_gauche li a, #menu_gauche li p, #menu_gauche li .material-icons, #menu_gauche li a .material-icons { vertical-align: middle; color: #696662; } #menu_gauche li a .material-icons { vertical-align: middle; margin: -5px 2px 0px -3px; font-size: 19px; color: black; } #menu_gauche li a .fa { width: 18px; font-size: 16px; color: black; } #menu_gauche li a .icon_perso { vertical-align: middle; font-size: 19px; margin: 0px 0px 0px -2px; color: black; } #menu_gauche li a { padding: 5px 5px 3px 1px; } #menu_gauche li a:hover { width: 18px; color: black; text-decoration:none; background-color: white; border-radius: 3px; } #menu_gauche li a .surbrillance { color:var(--couleur-principale); } #menu_gauche_haut li { padding: 4px 0px 3px 3px; } /* #menu_gauche_haut, #menu_gauche_param, #menu_gauche_suite, #menu_gauche_adulte, #menu_gauche_suite1 { width:178px; margin:0; padding: 0 0 0 0; font-size:10px; font-family:Arial; text-align:left; list-style-type:none; outline: none; background-color: #f3ebeb; border-radius: 0px 0px 5px 5px; } #menu_gauche_bas { display:block; width:178px; height:8px; background:url(../../../rep_all/css/images_ec_v3/menu_g_fond_bas.png); background-position: 0px -4px; background-repeat:no-repeat; } #menu_gauche li { padding: 0; line-height: 30px; background-repeat: no-repeat; background-position: 0 50%; } #menu_gauche li a, #menu_gauche #g_nbr { text-decoration:none; color: #000000; outline: none; } #menu_gauche li a:hover {color:#000066; text-decoration:underline;} #menu_gauche #g_nbr:hover {color:#000066; text-decoration:underline;} #menu_gauche #nbr {color:#fb3199; font-weight: bold;} #menu_gauche #nbr:hover {color:#fe58ae; text-decoration:underline;} #menu_gauche .titre{ color: #696662; width:100%; height:20px; text-align:center; font-size:12px; font-family:Arial; font-weight:bold; text-decoration:none; padding: 2px 0px 0px 0px; background-color: #f3ebeb; margin: 1px 0px 3px 0px; line-height: normal; } #menu_gauche #geoloc .material-icons { margin: 0px -4px 3px -1px; } #menu_gauche #journal .fa { margin: 0px 2px 3px 3px; } /* #menu_gauche li#annonces{ background: url(../../../rep_all/css/images_ec_v3/menu_g_annonces.png) no-repeat; background-position: 2px 50%; font-weight: bold; } */ #menu_gauche li#nouvelan{ background: url('//www.entrecoquins.com/beta2/images_css/menu_g_nouvelan.png') no-repeat; background-position: 2px 50%; } /* #menu_gauche li#journal{ background: url(../../../rep_all/css/images_ec_v3/menu_g_journal.png) no-repeat; background-position: 2px 50%; } #menu_gauche li#dern_minutes{ background: url(../../../rep_all/css/images_ec_v3/menu_g_dernminutes.png) no-repeat; background-position: 2px 50%; } #menu_gauche #nbr{ float: right; margin: 0 13 0 0; } #menu_gauche #g_nbr { float: left; } #menu_gauche li#soirees{ background: url(../../../rep_all/css/images_ec_v3/menu_g_soirees.png) no-repeat; background-position: 2px 50%; } #menu_gauche li#anniv{ background: url(../../../rep_all/css/images_ec_v3/menu_g_anniv.png) no-repeat; background-position: 2px 50%; } #menu_gauche li#geoloc{ background: url(../../../rep_all/css/images_ec_v3/menu_g_geoloc.png) no-repeat; background-position: 2px 50%; } #menu_gauche li#agenda{ background: url(//www.entrecoquins.com/beta2/images_css/menu_g_agenda.png) no-repeat; background-position: 2px 50%; } #menu_gauche li#deplacement{ background: url(../../../rep_all/css/images_ec_v3/menu_g_deplacement.png) no-repeat; background-position: 2px 50%; } #menu_gauche li#club{ background: url(../../../rep_all/css/images_ec_v3/menu_g_clubs.png) no-repeat; background-position: 2px 50%; } #menu_gauche li#naturiste{ background: url(../../../rep_all/css/images_ec_v3/menu_g_naturist.png) no-repeat; background-position: 2px 50%; } #menu_gauche li#agde{ background: url(../../../rep_all/css/images_ec_v3/menu_g_agde.png) no-repeat; background-position: 2px 50%; } #menu_gauche li#courriers{ background: url(//www.entrecoquins.com/beta2/images_css/menu_g_courrier.png) no-repeat; background-position: 2px 50%; } #menu_gauche li#contacts{ background: url(//www.entrecoquins.com/beta2/images_css/menu_g_contacts.png) no-repeat; background-position: 2px 50%; } #menu_gauche li#stats{ background: url(//www.entrecoquins.com/beta2/images_css/menu_g_stats.png) no-repeat; background-position: 2px 50%; } #menu_gauche li#compte{ background: url(//www.entrecoquins.com/beta2/images_css/menu_g_compte.png) no-repeat; background-position: 2px 50%; } #menu_gauche li#paramuser{ background: url(//www.entrecoquins.com/beta2/images_css/menu_g_pref.png) no-repeat; background-position: 24px 50%; padding-left:20px; } #menu_gauche li#modiffiche{ background: url(//www.entrecoquins.com/beta2/images_css/menu_g_modiffiche.png) no-repeat; background-position: 24px 50%; padding-left:20px; } #menu_gauche li#albumphoto{ background: url(//www.entrecoquins.com/beta2/images_css/menu_g_album.png) no-repeat; background-position: 24px 50%; padding-left:20px; } #menu_gauche li#voirfiche{ background: url(//www.entrecoquins.com/beta2/images_css/menu_g_voirfiche.png) no-repeat; background-position: 24px 50%; padding-left:20px; } #menu_gauche li#listebloque{ background: url(//www.entrecoquins.com/beta2/images_css/menu_g_bloque.png) no-repeat; background-position: 24px 50%; padding-left:20px; } #menu_gauche li#commentaires{ background: url(//www.entrecoquins.com/beta2/images_css/menu_g_commentaire.png) no-repeat; background-position: 24px 50%; padding-left:20px; } #menu_gauche li#blog{ background: url(../../../rep_all/css/images_ec_v3/menu_g_blog.png) no-repeat; background-position: 2px 50%; } #menu_gauche li#abonnement{ background: url(//www.entrecoquins.com/beta2/images_css/menu_g_abbonnement.png) no-repeat; background-position: 0px 50%; } #menu_gauche li#abonnement_nonactif{ background: url(//www.entrecoquins.com/beta2/images_css/menu_g_abbonnemen-nonactif.png) no-repeat; background-position: 0px 50%; } #menu_gauche li#abonnement_nonactif a{ padding-left: 38px; } #menu_gauche li#invit{ background: url(../../../rep_all/css/images_ec_v3/menu_g_invit.png) no-repeat; background-position: 2px 50%; } #menu_gauche li#boutique{ background: url(../../../rep_all/css/images_ec_v3/menu_g_boutique.png) no-repeat; background-position: 2px 50%; } #menu_gauche li#tatoo{ background: url(../../../rep_all/css/images_ec_v3/menu_g_tatoo.png) no-repeat; background-position: 2px 50%; } #menu_gauche li#carte_gratter{ background: url(../../../rep_all/css/images_ec_v3/menu_g_cartes.png) no-repeat; background-position: 2px 50%; } #menu_gauche li#sectionadulte{ background: url(../../../rep_all/css/images_ec_v3/menu_g_adulte.png) no-repeat; background-position: 2px 50%; } #menu_gauche li#promovideo{ background: url(//www.entrecoquins.com/beta2/images_css/menu_g_adult_video.png) no-repeat; background-position: 24px 50%; padding-left:20px; } #menu_gauche li#promocam{ background: url(//www.entrecoquins.com/beta2/images_css/menu_g_adult_cam.png) no-repeat; background-position: 24px 50%; padding-left:20px; } #menu_gauche li#affiliation{ background: url(../../../rep_all/css/images_ec_v3/menu_g_affiliation.png) no-repeat; background-position: 2px 50%; } */ #menu_gauche .titre_historique { border-top: 2px solid white; margin: 0px 0px 2px 0px; color: white; padding: 2px 0px 2px 15px; border-bottom: 2px solid white; background-color: #504c4d; font-size: 12px; } #menu_gauche .menu_historique_actif { display:none; } #menu_gauche #historique_vide { display:none; } #menu_gauche #historique_liste { margin: 0px 0px 5px 0px; } #historique_liste #bouton_1_centre { padding: 10px; } #menu_gauche #pseudo { height:15px; line-height:15px; color:#878787; font-size: 12px; font-weight: bold; margin: 0 2 2 6; padding : 0px; text-align:left; } #menu_gauche #pseudo a { color:#878787; font-size: 12px; font-weight: bold; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; position: absolute; left: 91px; } #menu_gauche .titre_cpl { color:#cd88dc; font-size: 12px; font-weight: bold; } #menu_gauche .titre_femme { color:#ff4fb7; font-size: 12px; font-weight: bold; } #menu_gauche .titre_homme { color:#53b1e7; font-size: 12px; font-weight: bold; } #menu_gauche .titre_trans { color:#ffc74f; font-size: 12px; font-weight: bold; } #menu_gauche #btn_admin { text-align: center; margin: 0px 0px 10px; } /* #menu_gauche li#faq{ background: url(../../../rep_all/css/images_ec_v3/menu_g_faq.png) no-repeat; background-position: 4px 50%; } */ /******************************************/ /* Bloc que pub */ /******************************************/ #bloc_pub { margin:15px 0px 0px 0px; text-align: center; float: left; } #pub_cadre { background-color: #f3ebeb; padding: 5px; border-radius: 5px; width: 478px; overflow: hidden; display: inline-block; } /******************************************/ /* Bloc que telechargement */ /******************************************/ #status { /* background-color: #F9F7ED; */ padding: 10px 15px; width: 450px; font-size: 11px; } #status .progress { background: white url('//www.entrecoquins.com/beta2/images_css/bar_progress.gif') no-repeat; background-position: +50% 0; margin-right: 0.5em; } #status .progress-text { font-size: 11px; font-weight: bold; } #list { list-style: none; width: 450px; margin: 0; font-size: 11px; } #list li.file { border-bottom: 1px solid #eee; background: url('//www.entrecoquins.com/beta2/images_css/bar_file.png') no-repeat 4px 4px; } /******************************************/ /* Partie des pseudos en ligne */ /******************************************/ /* tableau user en ligne */ #user_enligne { width: 190px; height: 100%; border: 1px solid #504c4d; background-color: #504c4d; border-radius: 15px 15px 0px 0px; } #user_enligne #titre { color: white; border-radius: 15px 15px 0px 0px; font-size: 9pt; background-color: #504c4d; margin: 2px 0px 0px 2px; width:initial; } #user_enligne #titre_centre { float: left; background-color:#504c4d; border-radius:5px; } #user_enligne #ico_fenetre { border-radius: 20px 20px 0px 0px; float: right; } #user_enligne #ico_fenetre i{ cursor:pointer; } /* bloc message, chatcam, acceuil */ #entree_choix_td, #entree_choix_separateur, #entree_choix_td_message, #entree_choix_td_chatcam, #entree_choix_td_acceuil { height: 48px; } #entree_choix_td { display:none; } #entree_choix_separateur { width: 1px ; height: 48px ; background-color: white; } #entree_choix_td_message { width: 47px; } #chat_bulle { width:48px; height:48px; background-image:url('//www.entrecoquins.com/beta2/images/chat_bulle.gif'); } #entree_choix_td_chatcam{ width: 70px; } #entree_choix_td_acceuil { width: 69px; } #entree_choix_tableau { width: 100%; height: 100%; background-color: #f3ebeb; } #entree_texte_chatcam, #entree_texte_acceuil { font-size:10px; font-family:Tahoma; text-transform:Uppercase; color:#59A1FF; text-align: center; } #entree_icone_chatcam a { width: 70px; height: 28px ; display: block ; background-position: center center; background-image:url('../../../rep_all/css/images_ec_v3/bouton_chatcam.png'); background-repeat:no-repeat; } #entree_icone_acceuil a { width: 71px; height: 28px ; display: block ; background-position: center center; background-image:url('../../../rep_all/css/images_ec_v3/bouton_acceuil.png'); background-repeat:no-repeat; } /* bloc de connecte N'est plus utilis?/ #entree_connect_td { height: 19px; } #entree_connect_tableau { width: 100%; height: 19px; font-size:10px; font-family:Arial; background-image:url('../../../rep_all/css/images_ec_v3/entree_connect_fond.png'); background-repeat:repeat; color: #ffffff; } #Nbr_connecte { padding-left: 8px; } #entree_rech_liste_tous a { width: 22px ; height: 19px ; display: block ; background-position: center center; background-image:url('../../../rep_all/css/images_ec_v3/rech_liste_total.png'); background-repeat:no-repeat; } #entree_rech_liste_page a { width: 22px ; height: 19px ; display: block ; background-position: center center; background-image:url('../../../rep_all/css/images_ec_v3/rech_liste_page.png'); background-repeat:no-repeat; } /* bloc de recherche */ #user_enligne_rech { height: 19px; background-color: #fbf7f7; } #entree_rech_separateur { width: 7px ; height: 19px ; background-position: center center; background-image:url('//www.entrecoquins.com/beta2/images_css/rech_separateur.png'); background-repeat:no-repeat; } #entree_rech_tous a { width: 24px ; height: 19px ; display: block ; background-position: center center; background-image:url('../../../rep_all/css/images_ec_v4/rech_tous.png'); background-repeat:no-repeat; } #entree_rech_cpl a{ width: 17px ; height: 19px ; display: block ; background-position: center top; background-image:url('../../../rep_all/css/images_ec_v4/rech_cpl.png'); background-repeat:no-repeat; } #entree_rech_f a{ width: 11px ; height: 19px ; display: block ; background-position: center top; background-image:url('../../../rep_all/css/images_ec_v4/rech_f.png'); background-repeat:no-repeat; } #entree_rech_h a { width: 11px ; height: 19px ; display: block ; background-position: center top; background-image:url('../../../rep_all/css/images_ec_v4/rech_h.png'); background-repeat:no-repeat; } #entree_rech_t a { width: 11px ; height: 19px ; display: block ; background-position: center top; background-image:url('../../../rep_all/css/images_ec_v4/rech_t.png'); background-repeat:no-repeat; } #entree_rech_certif a { width: 14px ; height: 19px ; display: block ; background-position: center top; background-image:url('../../../rep_all/css/images_ec_v4/rech_certif.png'); background-repeat:no-repeat; } #entree_rech_libre a { width: 14px ; height: 19px ; display: block ; background-position: center top; background-image:url('../../../rep_all/css/images_ec_v3/minilibre.png'); background-repeat:no-repeat; } #entree_rech_fav a { width: 14px ; height: 19px ; display: block ; background-position: center top; background-image:url('../../../rep_all/css/images_ec_v3/rech_fav.png'); background-repeat:no-repeat; } #entree_rech_perso a { width: 13px ; height: 19px ; display: block ; background-position: center top; background-image:url('../../../rep_all/css/images_ec_v3/rech_perso.png'); background-repeat:no-repeat; } /* Bloc libre ce soir */ #entree_lbr_td { position: relative; font-family: 'Roboto', sans-serif; height: 19px; /* background-color:#ffffff; background-image:url('../../../rep_all/css/images_ec_v3/libresoir_fond.png'); background-color: #fbf7f7; */ background-color: #36b4b4; } #libresoir { position: absolute; top: -2px; left: 2px; } #entree_lbr_tableau { background-color: #504c4d; width: 100%; height: 100%; /* background-position: 5px top; */ font-size:10px; font-family:Arial; padding-left: 0px; border-top: 1px solid grey; border-bottom: 1px solid #504c4d; } #entree_lbr_tableau #recherche { background-color: initial; padding: 6px 5px 5px 5px; } #entree_lbr_tableau #recherche [type="checkbox"]:not(:checked) + label, #entree_lbr_tableau #recherche [type="checkbox"]:checked + label { font-size: 10px; margin: -5px 0px 0px; padding: 2px 0px 0px 19px; } #entree_lbr_tableau #recherche [type="checkbox"]:not(:checked) + label::before, #entree_lbr_tableau #recherche [type="checkbox"]:checked + label::before { width: 12px; height: 12px; } #entree_lbr_tableau #recherche [type="checkbox"]:not(:checked) + label::after, #entree_lbr_tableau #recherche [type="checkbox"]:checked + label::after { font-size: 10px; } #entree_lbr_txt_libre { position: absolute; top: 1px; left: 18px; width: 164px; padding-left: 0px; white-space: nowrap; /* color: #696662; */ color: #ffffff; font-family: 'Roboto', sans-serif; font-size: 11px; } /* bloc de tri */ #user_enligne_tri { height: 19px; color: #ffffff; background-color: #f3ebeb; border-top: 1px solid white; } #user_enligne_tri select{ font-size:9px; font-family:Arial; width: 100%; height: 16px; color:black; } /* bloc de recherche */ #bloc_recherche { width:230px; } #user_enligne_recherche { background-color: white; height:100%; } #entree_bloc_recherche select { width:100px; } #entree_bloc_recherche #label { width: 62px; float: left; } #user_enligne_recherche select[name="pays"] { max-width: 178px; } /* Bloc de message, exemple abo de test 30 min... */ #entree_bloc_info { background-color:#fff1cc; font-size:11px; font-family:Arial; text-align:center; padding: 2px 2px 0px 10px; } #entree_bloc_info_ferme a { background-image: url('../../../rep_all/css/images_ec_v3/bouton_supp_mini.png'); background-repeat: no-repeat; display: block; height: 13px; width: 14px; float: right; } /* Distance et actualisation */ #user_enligne_bas { height: 34px; background-color: #fbf7f7; position: absolute; bottom: 0px; width: 188px; } #user_enligne_bas #bouton_1_centre { float:left; margin: 8px 0px 0px 15px; } #user_enligne_bas_actualiser { float:right; margin: 1px 5px 0px 0px; } #user_enligne_bas_actualiser a { height: 28px; width: 30px; display: block ; background-image:url('../../../rep_all/css/images_ec_v3/actualiser.png'); background-repeat:no-repeat; background-position: center center; } /******************************************/ /* Liste des pseudos en ligne ? */ /******************************************/ #user_enligne_liste { background-color: #fff; border: 1px solid #fbf7f7; } #liste_user_info { border:0px solid #ffffff; background-color: #ffffff; font-size:12px; font-family:Arial; border-spacing:0px; border-collapse:collapse; width:100%; color:#4B4B4B; } #user_enligne_liste_live #chargement { background-image: url('../../../rep_all/css/images_ec_v4/chargement_grand.gif'); background-repeat: no-repeat; background-position: center 50px; width: 100%; height: 100%; } #liste_user { border:0px solid #ffffff; background-color: #ffffff; font-size:12px; font-family:Arial; border-spacing: 0px; border-collapse: collapse; vertical-align:middle; text-align: center ; width:100%; /*height:100%;*/ white-space: nowrap; } #liste_nbr_connect_td { height: 18px; /* background-image:url('../../../rep_all/css/images_ec_v3/nbr_page_fond.png'); background-repeat:no-repeat; background-position: center center; */ margin: 0; padding: 0; } #liste_nbr_connect_table { width: 125px; font-size:10px; font-family:Arial; vertical-align:middle; text-align: center; background-color: #fbf7f7; border-top: 1px solid white; border-bottom: 1px solid white; border-left: 1px solid white; border-right: 1px solid white; border-radius: 14px; } #liste_nbr_connect_fleche { width: 30px; height: 18px; } #liste_nbr_connect_fleche_g a { width: 30px; height: 18px; background-image:url('//www.entrecoquins.com/beta2/images_css/nbr_page_fleche_g.gif'); background-repeat:no-repeat; background-position: center center; display: block ; } #liste_nbr_connect_fleche_d a { width: 18px; height: 18px; background-image:url('//www.entrecoquins.com/beta2/images_css/nbr_page_fleche_d.gif'); background-repeat:no-repeat; background-position: center center; display: block ; } #liste_user #liste_infotri { color: #757575; font-size: 10px; height: 9px; } #liste_petit { font-size:8px; font-family:Arial; } #list_entrebloc { height:1px; background-color: #e3e3e3; border:6px solid #FFFFFF; overflow:hidden; } #list_bloc { position: relative; height: 70px; background-color: #ffffff; } #list_bloc #IMG_h, #list_bloc #IMG_f, #list_bloc #IMG_f_c, #list_bloc #IMG_cpl, #list_bloc #IMG_cpl_c, #list_bloc #IMG_trans { position: absolute; left:59px; } #list_bloc #IMG_libre { position: absolute; left:151px; top:56px; } #list_bloc_photo img { border-radius: 7px; border: 1px solid rgb(201, 198, 198); padding: 1px; vertical-align: top; width: 54px; height: 67px; object-fit: cover; overflow:hidden; } #list_bloc_photo #image { border-radius: 7px; border: 1px solid rgb(201, 198, 198); padding: 1px; vertical-align: top; width: 54px; height: 67px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } #optimise #list_bloc_photo img { margin: initial; } #optimise #list_bloc_photo #image { } #list_bloc_photo { position: absolute; width:58px; height:71px; /* background:url(../../../rep_all/css/images_ec_v3/mini_cadre_photo.png) no-repeat; */ left: 0px; top:0px; } #liste_user #ann_sans_photo { background-position : center center; } #list_bloc_photo a { width:58px; height:71px; display:table-cell; vertical-align:middle; text-align:center } #list_pseudo { position: absolute; left: 78px; top: 5px; } #list_pseudo a { color: #288ECA; font-weight: bold; padding: 0; text-decoration: none; } #list_age { position: absolute; left: 59px; top:23px; color:#757575; font-size:11px; text-align: left; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; width: 112px; } #list_ville { position: absolute; left: 59px; top:39px; color:#757575; font-size:11px; text-align: left; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; width: 112px; } #list_bloc #ann_contact { cursor:pointer; position: absolute; left: 59px; top: 54px; } #list_img_online a{ background:url('../../../rep_all/css/images_ec_v4/mini_chat.png') no-repeat; width:20px; height:18px; position: absolute; left: 78px; top:56px; } #list_video a{ background:url('../../../rep_all/css/images_ec_v3/special/mini_video.png') no-repeat; width:15px; height:15px; position: absolute; left: 103px; top:58px; } #list_nouveau { background:url('../../../rep_all/css/images_ec_v3/special/mini_nouveau.png') no-repeat; width:15px; height:15px; position: absolute; left: 160px; top:5px; } #pseudo { font-size:12px; font-family:Arial; width:auto; text-align: left; color:#FFFFFF; white-space: nowrap; } #pseudo a:link {color:#3333FF; text-decoration:none;} #pseudo a:visited {font-weight:bold; color:#333399; text-decoration:none;} #pseudo a:active {font-weight:bold; color:#333399; text-decoration:none;} #pseudo a:hover {color:#000066; text-decoration:underline;} #IMG_vf a{ width: 16px ; height: 19px ; display: block ; background-position: left top; background-image:url('../../../rep_all/css/images_ec_v3/minifiche_photo.png'); background-repeat:no-repeat; } #IMG_vf1 a{ width: 16px ; height: 19px ; display: block ; background-position: left top; background-image:url('../../../rep_all/css/images_ec_v3/minifiche.png'); background-repeat:no-repeat; } #IMG_libre { width: 14px; height: 19px; display: block; background-position: left top; background-image:url('../../../rep_all/css/images_ec_v3/minilibre.png'); background-repeat:no-repeat; } #IMG_capagde { width: 14px; height: 17px; display: block; background-position: left top; background-image:url('../../../rep_all/css/images_ec_v3/mini_agde.png'); background-repeat:no-repeat; } /* Icones des types de pseudos */ #IMG_admin a{ width: 17px ; height: 20px ; display: block ; background-position: left top; background-image:url('//www.entrecoquins.com/beta2/images_css/type_admin.gif'); background-repeat:no-repeat; } #IMG_h { width: 17px ; height: 19px ; display: block ; background-position: left top; background-image:url('../../../rep_all/css/images_ec_v4/type_h.png'); background-repeat:no-repeat; } #IMG_h a{ width: 17px ; height: 19px ; display: block ; background-position: left top; background-image:url('../../../rep_all/css/images_ec_v4/type_h.png'); background-repeat:no-repeat; } #IMG_f { width: 17px ; height: 19px ; display: block ; background-position: left top; background-image:url('../../../rep_all/css/images_ec_v4/type_f.png'); background-repeat:no-repeat; } #IMG_f a{ width: 17px ; height: 19px ; display: block ; background-position: left top; background-image:url('../../../rep_all/css/images_ec_v4/type_f.png'); background-repeat:no-repeat; } #IMG_f_c { width: 17px ; height: 19px ; display: block ; background-position: left top; background-image:url('../../../rep_all/css/images_ec_v4/type_f_c.png'); background-repeat:no-repeat; } #IMG_f_c a{ width: 17px ; height: 19px ; display: block ; background-position: left top; background-image:url('../../../rep_all/css/images_ec_v4/type_f_c.png'); background-repeat:no-repeat; } #IMG_cpl { width: 17px ; height: 19px ; display: block ; background-position: left top; background-image:url('../../../rep_all/css/images_ec_v4/type_cpl.png'); background-repeat:no-repeat; } #IMG_cpl a{ width: 17px ; height: 19px ; display: block ; background-position: left top; background-image:url('../../../rep_all/css/images_ec_v4/type_cpl.png'); background-repeat:no-repeat; } #IMG_cpl_c { width: 17px ; height: 19px ; display: block ; background-position: left top; background-image:url('../../../rep_all/css/images_ec_v4/type_cpl_c.png'); background-repeat:no-repeat; } #IMG_cpl_c a{ width: 17px ; height: 19px ; display: block ; background-position: left top; background-image:url('../../../rep_all/css/images_ec_v4/type_cpl_c.png'); background-repeat:no-repeat; } #IMG_trans { width: 17px ; height: 19px ; display: block ; background-position: left top; background-image:url('../../../rep_all/css/images_ec_v4/type_trans.png'); background-repeat:no-repeat; } #IMG_trans a{ width: 17px ; height: 19px ; display: block ; background-position: left top; background-image:url('../../../rep_all/css/images_ec_v4/type_trans.png'); background-repeat:no-repeat; } /* Formulaire d'inscription */ #chargement_mini { width: 16px ; height: 16px ; display: block ; background-position: left top; background-image:url('//www.entrecoquins.com/beta2/images_css/chargement_ajax.gif'); background-repeat:no-repeat; } #chargement_erreur { font-weight:bold; color:red; padding: 0px 0px 0px 26px; width: 200px ; height: 16px ; display: block ; background-position: 8 center; background-image:url('//www.entrecoquins.com/beta2/images_css/AJAX_error.gif'); background-repeat:no-repeat; } #chargement_ok { padding: 0px 0px 0px 26px; width: 200px ; height: 16px ; display: block ; background-position: 8 center; background-image:url('//www.entrecoquins.com/beta2/images_css/AJAX_ok.gif'); background-repeat:no-repeat; } #chargement_liste { padding: 0px 0px 0px 8px; width: 200px ; height: 16px ; display: block ; } #annonces #chargement_ok { padding: 0px 0px 0px 26px; width: 180px ; height: 16px ; display: block ; background-position: 8 center; background-image:url('//www.entrecoquins.com/beta2/images_css/AJAX_ok.gif'); background-repeat:no-repeat; } #chargement_liste { padding: 0px 0px 0px 0px; width: 180px ; height: 16px ; display: block ; } /* CONFIG PROPRE AU SITE */ /****************************/ #site_menu_info1 { width:160px; height:164px; font-size:11px; font-family:Arial; background:url('../../../rep_all/css/images_ec_v3/acceuil_bloc_club.png') no-repeat; padding: 6px 0px 0px 0px; } #inscript_logo_haut { width: 719px ; height: 132px ; display: block ; background-image:url('//www.entrecoquins.com/beta2/images_css/inscription-logo.jpg'); background-repeat:no-repeat; } #inscript_logo_haut #texte{ position: relative; font-size:16px; font-family:Arial; font-weight:bold; top: 108px; color:#3d608d; } #inscript_logo_haut b{ color:#e8228e; } #inscript_etape_nonactif { width: 186px ; height: 43px ; color:#3d608d; background-image:url('//www.entrecoquins.com/beta2/images_css/inscription_etapenonactif.gif'); background-repeat:no-repeat; } #inscript_etape_actif { width: 186px ; height: 43px ; color:#3d608d; background-image:url('//www.entrecoquins.com/beta2/images_css/inscription_etapeactif.gif'); background-repeat:no-repeat; } #inscription_etape_espace { width:30px; } #inscript_etape_nonactif #numero, #inscript_etape_actif #numero { float:left; display: block ; width:52px; height:43px; text-align:center; margin:5 0 0 0; font-size:26px; font-family:Arial; font-weight:bold; color:white; } #inscript_etape_nonactif #texte, #inscript_etape_actif #texte { float:left; display: block ; width:134px; text-align:center; margin:10 0 0 0; font-size:16px; font-family:Arial; font-weight:bold; } #inscript_image_tableau { width: 550px ; height: 187px ; display: block ; background-position: right; /* background-image:url('//www.entrecoquins.com/beta2/images_css/inscription-fille.jpg'); background-repeat:no-repeat; width: 800px ; height: 387px ; margin: 0 0 0 0; padding: 20 0 0 5; */ Vertical-Align: top; } #inscription_page1 #tableau_info { width:550px; } #inscription_page1 #retour_email { width: 20px; } #inscription_page1 #tabl_gauche { width: 120px ; font-weight:bold; text-align:right; padding:8 5 0 0; Vertical-Align: text-top; } #inscription_page1 #tableau_coul2_txt, #tableau_coul1_txt { height: 30px ; } #inscription_page2 #tableau_info { width:765px; } #inscription_page2 #inscript_pseudo { height: 30px ; color:#3d608d; font-size:12px; text-align:center; vertical-align: middle; } #inscription_page2 #tableau_fiche_f #titre_onglet { display:block; height:23px; width:132px; background-image:url('//www.entrecoquins.com/beta2/images_css/inscription_onglet_f.gif'); background-repeat:no-repeat; } #inscription_page2 #tableau_fiche_f #titre_onglet #texte { text-align:center; padding:5 0 0 0; font-weight:bold; color:#3c5f8c; font-size:11px; } #inscription_page2 #tableau_fiche_f #info_tabl { width:370px; background-color:#ffdcef; border:1px solid #ffbfe2; color:#3c5f8c; font-size:11px; padding:5 2 2 2; } #inscription_page2 #tableau_fiche_espace { width:5px; } #inscription_page2 #tableau_fiche_h #titre_onglet { display:block; height:23px; width:131px; background-image:url('//www.entrecoquins.com/beta2/images_css/inscription_onglet_h.gif'); background-repeat:no-repeat; } #inscription_page2 #tableau_fiche_h #titre_onglet #texte { text-align:center; padding:5 0 0 0; font-weight:bold; color:#3c5f8c; font-size:11px; } #inscription_page2 #tableau_fiche_h #info_tabl { width:370px; background-color:#dae7f9; border:1px solid #a9c4e7; color:#3c5f8c; font-size:11px; padding:5 2 2 2; } #inscription_page2 #tableau_recherche, #inscription_page2 #tableau_select { background-color:#dae7f9; font-size:11px; width:100%; } #inscription_page2 #tableau_recherche #titre_txt, #inscription_page2 #tableau_tendance #titre_txt { padding:5 0 0 15; font-weight:bold; color:#3c5f8c; font-size:13px; } #inscription_page2 #tabl_choixrecherche, #inscription_page2 #tabl_choixtendance { margin:0 0 10 30; } #inscription_page2 #tabl_choixrecherche td, #inscription_page2 #tabl_choixtendance td { width:200px; font-size:11px; } #inscription_page2 #tableau_tendance, #inscription_page2 #tableau_annonce { background-color:#f2f7fd; } #inscription_page2 #tableau_select #titre_txt, #inscription_page2 #tableau_annonce #titre_txt { font-weight:bold; color:#3c5f8c; font-size:13px; } #inscription_page2 #webcam { width:30%; background-color:#c6dcf9; padding:5 15 5 15; vertical-align:top; } #inscription_page2 #deplace { width:25%; padding:5 15 5 15; vertical-align:top; } #inscription_page2 #hobbies { width:70%; background-color:#c6dcf9; padding:5 15 5 15; vertical-align:top; } #inscription_page2 #tabl_choixhobbies td { font-size:11px; } #inscription_page2 #tableau_annonce { padding:5 0 0 15; } #inscription_page2 #tableau_annonce #nbr_car { padding:5 0 5 0; font-size:11px; } /* Bas de page */ #footer { background-color: rgb(254, 247, 247); padding: 5px; text-align: center; height:47px; margin: 10px 0px 0px 0px; } #footer #slogan { color:#696662; font-weight:bold; color: var(--couleur-principale); } .petitlienbas {font-size:12px; font-family:Arial; color:#999999; text-decoration:none;} .petitlienbas a:link {font-size:12px; font-family:Arial; color:#999999; text-decoration:none;} .petitlienbas a:visited {font-size:12px; font-family:Arial; color:#999999; text-decoration:none;} .petitlienbas a:active {font-size:12px; font-family:Arial; color:#999999; text-decoration:none;} .petitlienbas a:hover {font-size:12px; font-family:Arial; color:black; text-decoration:none;} /* ============================================= */ /* MODERNISATION V5 - Janvier 2026 */ /* ============================================= */ /* --------------------------------------------- */ /* 0. FONTS MODERNES (comme version mobile) */ /* --------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); :root { --font-titres: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-corps: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } body { font-family: var(--font-corps) !important; font-weight: 400; } /* Titres */ h1, h2, h3, h4, h5, h6, #titre, #titre_centre, .titre, .panel-heading, #ann_mos_pseudo a, #ann_mos_pseudo { font-family: var(--font-titres) !important; font-weight: 500; letter-spacing: -0.02em; } /* Corps de texte - SANS span ni a pour préserver les icônes */ p, td, th, label, input, select, textarea, button, #recherche, #recherche_table { font-family: var(--font-corps) !important; } /* Pseudos - Style accrocheur (Outfit comme mobile) */ #ann_mos_pseudo a, #ann_pseudo, #ann_pseudo a { font-family: var(--font-titres) !important; font-weight: 600; letter-spacing: -0.01em; } /* --------------------------------------------- */ /* 1. EN-TÊTES MODERNISÉS */ /* --------------------------------------------- */ /* ============================================================ */ /* BARRE DE TITRE SECTION (fond blanc, simple) */ /* ============================================================ */ .section-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 28px; } .section-header-title { font-size: 16px; font-weight: 600; color: var(--color-text, #333); letter-spacing: -0.2px; } .section-header-actions { display: flex; align-items: center; gap: 10px; } .section-header-actions select { padding: 5px 25px 5px 10px !important; font-size: 12px !important; border: 1px solid #ddd !important; border-radius: 20px !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23666' d='M5 7L1 3h8z'/%3E%3C/svg%3E") no-repeat right 6px center !important; background-size: 10px !important; color: #333 !important; transition: all 0.2s ease !important; appearance: none !important; height: auto !important; cursor: pointer !important; } .section-header-actions select:hover { border-color: var(--couleur-principale); box-shadow: 0 0 0 3px rgba(var(--couleur-principale-rgb), 0.1); } .section-header-actions select:focus { outline: none; border-color: var(--couleur-principale); box-shadow: 0 0 0 3px rgba(var(--couleur-principale-rgb), 0.15); } /* ============================================================ */ /* FIN BARRE DE TITRE SECTION */ /* ============================================================ */ /* --------------------------------------------- */ /* ANCIEN STYLE #titre (garder pour compatibilité avec le reste du site) */ /* --------------------------------------------- */ #titre, #titre_bas { /* background: linear-gradient(135deg, var(--couleur-principale) 0%, var(--couleur-principale-fonce) 100%); box-shadow: 0 4px 12px rgba(var(--couleur-principale-rgb), 0.3); border-radius: 12px 12px 0 0; */ height: 38px; line-height: 34px; } #titre #titre_centre, #titre #titre_gauche, #titre #titre_droite, #titre #titre_blocenplus { /* background: transparent; border-radius: 12px 12px 0 0; */ } #titre #titre_centre { /* padding: 6px 0 0 15px; font-size: 14px; letter-spacing: 0.5px; text-shadow: 0 1px 2px rgba(0,0,0,0.2); */ } #titre_bas { border-radius: 0 0 12px 12px; box-shadow: 0 4px 12px rgba(var(--couleur-principale-rgb), 0.2); } /* Pagination bas moderne */ .annonces-pagination-bas { display: flex; justify-content: center; align-items: center; gap: 20px; padding: 20px 0; font-size: 14px; color: var(--color-text-light, #666); } /* Masquer l'ancienne structure table si elle existe encore */ #annonces table#titre { display: none; } /* --------------------------------------------- */ /* MASQUER LES ONGLETS LISTE/MOSAÏQUE */ /* --------------------------------------------- */ /* Masquer le changement de mode (on reste en mosaïque) Le code reste en place au cas où on en aurait besoin */ .annonces_onglet_mode, #onglet { /* display: none !important;*/ } /* --------------------------------------------- */ /* SPINNER DE CHARGEMENT INFINITE SCROLL */ /* --------------------------------------------- */ #mosaique-loading-spinner { display: none; text-align: center; padding: 30px 0; width: 100%; clear: both; } #mosaique-loading-spinner.active { display: block; } .mosaique-spinner { display: inline-block; width: 40px; height: 40px; border: 4px solid var(--color-border, #f0f0f0); border-top: 4px solid var(--couleur-principale); border-radius: 50%; animation: mosaique-spin 0.8s linear infinite; } @keyframes mosaique-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .mosaique-loading-text { margin-top: 12px; color: var(--color-text-light, #999); font-size: 14px; } /* Message "Aucun profil trouvé" */ .no-results-message { text-align: center; padding: 80px 20px; color: #666; } .no-results-icon { font-size: 64px; color: #ddd; margin-bottom: 20px; } .no-results-message h3 { font-size: 24px; color: #333; margin-bottom: 10px; font-weight: 600; } .no-results-message p { font-size: 16px; color: #999; max-width: 500px; margin: 0 auto; line-height: 1.5; } /* --------------------------------------------- */ /* 2. CARTES MOSAÏQUE MODERNISÉES */ /* --------------------------------------------- */ #ann_bg_mos_cpl, #ann_bg_mos_f, #ann_bg_mos_h, #ann_bg_mos_trans { border-radius: 12px !important; margin: 8px !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background-color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); overflow: hidden; } #ann_bg_mos_cpl:hover, #ann_bg_mos_f:hover, #ann_bg_mos_h:hover, #ann_bg_mos_trans:hover { transform: translateY(-2px); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12); } /* Photos mosaïque avec coins arrondis et effet zoom */ #ann_mos_photo, #ann_mos_photo #image { border-radius: 9px 9px 0 0; overflow: hidden; } #ann_mos_photo img { border-radius: 12px 12px 0 0; transition: transform 0.4s ease, filter 0.3s ease; width: 100%; height: 100%; object-fit: cover; } #ann_bg_mos_cpl:hover #ann_mos_photo img, #ann_bg_mos_f:hover #ann_mos_photo img, #ann_bg_mos_h:hover #ann_mos_photo img, #ann_bg_mos_trans:hover #ann_mos_photo img { filter: brightness(1.05); } /* Pseudo en mosaïque */ #ann_mos_pseudo { padding: 8px 6px; font-size: 12px; background: linear-gradient(to bottom, rgba(255,255,255,0.9), #fff); } #ann_mos_pseudo a { font-weight: 600; color: #333 !important; } /* Bordures colorées plus épaisses et visibles */ #ann_bg_mos_cpl { border: 3px solid #cd88dc !important; border-top: 3px solid #cd88dc !important; } #ann_bg_mos_h { border: 3px solid #53b1e7 !important; border-top: 3px solid #53b1e7 !important; } #ann_bg_mos_f { border: 3px solid #ff4fb7 !important; border-top: 3px solid #ff4fb7 !important; } #ann_bg_mos_trans { border: 3px solid #f2a606 !important; border-top: 3px solid #f2a606 !important; } /* --------------------------------------------- */ /* 3. CARTES LISTE MODERNISÉES */ /* --------------------------------------------- */ #ann_bg_cpl, #ann_bg_h, #ann_bg_f, #ann_bg_trans { border-radius: 12px !important; margin-bottom: 12px !important; transition: all 0.3s ease; /* background-color: #fff;*/ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* border-left: 4px solid transparent;*/ } /* #ann_bg_cpl { border-left-color: #cd88dc !important; } #ann_bg_h { border-left-color: #53b1e7 !important; } #ann_bg_f { border-left-color: #ff4fb7 !important; } #ann_bg_trans { border-left-color: #f2a606 !important; } */ #ann_bg_cpl:hover, #ann_bg_h:hover, #ann_bg_f:hover, #ann_bg_trans:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } #ann_ligne_g_cpl, #ann_ligne_m_cpl, #ann_ligne_d_cpl, td #ann_ligne_d_cpl, #ann_ligne_g_f, #ann_ligne_m_f, #ann_ligne_d_f, td #ann_ligne_d_f, #ann_ligne_g_h, #ann_ligne_m_h, #ann_ligne_d_h, td #ann_ligne_d_h, #ann_ligne_g_trans, #ann_ligne_m_trans, #ann_ligne_d_trans, td #ann_ligne_d_trans { background-color: initial; font-family: var(--font-corps) !important; font-size: 14px; text-transform: capitalize; font-weight: 400; cursor: pointer; } #ann_entrebloc { height: 7px; background-color: initial; border: none; overflow: hidden; } #annonces_fleche_td, #annonces_fleche_td_bas { background-color: initial; float: none; } /* Mode liste - Photo bloc - À PERSONNALISER */ /* Décalage à corriger manuellement */ /* --------------------------------------------- */ /* 4. FORMULAIRE DE RECHERCHE MODERNISÉ */ /* --------------------------------------------- */ #recherche { background: linear-gradient(to bottom, #fefefe, #f8f6f4); border-radius: 0 0 12px 12px; padding: 15px; } #recherche select { border: 2px solid #e8e4e0; border-radius: 8px; padding: 8px 12px; background-color: #fff; transition: all 0.2s ease; font-size: 13px; } #recherche select:hover { border-color: #d0ccc8; } #recherche select:focus { border-color: var(--couleur-principale); box-shadow: 0 0 0 3px rgba(var(--couleur-principale-rgb), 0.15); outline: none; } #recherche input[type="text"] { border: 2px solid #e8e4e0; border-radius: 8px; padding: 8px 12px; transition: all 0.2s ease; font-size: 13px; } #recherche input[type="text"]:hover { border-color: #d0ccc8; } #recherche input[type="text"]:focus { border-color: var(--couleur-principale); box-shadow: 0 0 0 3px rgba(var(--couleur-principale-rgb), 0.15); outline: none; } /* Checkboxes modernisées */ #recherche [type="checkbox"]:checked + label:before { background-color: var(--couleur-principale); border-color: var(--couleur-principale); box-shadow: 0 2px 4px rgba(var(--couleur-principale-rgb), 0.3); } #recherche [type="checkbox"]:checked + label:after { color: #fff; } #recherche [type="checkbox"]:not(:checked) + label:before { border: 2px solid #ccc; border-radius: var(--border-radius-badge); } /* Labels des checkboxes */ #recherche [type="checkbox"] + label { padding-left: 28px !important; margin-right: 12px; margin-bottom: 8px; display: inline-block; cursor: pointer; transition: color 0.2s ease; } #recherche [type="checkbox"] + label:hover { color: var(--couleur-principale); } /* Titres de sections dans le formulaire */ #recherche td[colspan] { padding-top: 12px !important; padding-bottom: 6px !important; } /* Label "Pseudo:" et autres labels */ #recherche td:first-child { font-weight: 500; color: #555; padding-right: 10px; } /* Section Distance */ #recherche_table tr td b, #recherche b { font-family: var(--font-titres) !important; font-weight: 600; font-size: 13px; color: var(--couleur-principale); display: inline-block; margin: 8px 0 4px 0; } /* Lien Plus/Moins */ #annonces_texte_plusprecis, #annonces_texte_plusprecis a { color: var(--couleur-principale) !important; font-weight: 600 !important; font-size: 13px; text-decoration: none; transition: all 0.2s ease; } #annonces_texte_plusprecis a:hover { color: var(--couleur-principale-hover) !important; text-decoration: underline; } /* Section "Recherche plus précise" */ /* #annonces_plusprecis - voir définition plus bas */ /* Séparateur visuel avant les âges */ #recherche_table tr:has(select[name="age_mr_min"]) td { padding-top: 15px; border-top: 1px solid #e8e4e0; margin-top: 10px; } /* Labels d'âge */ #recherche td:contains("Age") { font-weight: 600; color: #555; } /* Espacement entre groupes de checkboxes */ #recherche br + [type="checkbox"] + label { margin-top: 8px; } /* Bouton Ajouter pour les recherches sauvegardées */ #recherche input[name="recherche_add"] { background: #fff !important; color: var(--couleur-principale) !important; border: 2px solid var(--couleur-principale) !important; font-size: 12px !important; padding: 6px 12px !important; } #recherche input[name="recherche_add"]:hover { background: var(--couleur-principale) !important; color: #fff !important; } /* --------------------------------------------- */ /* 5. BOUTONS MODERNISÉS (fallback général) */ /* --------------------------------------------- */ /* Note: Les classes .btn-primary-* ont priorité */ input[type=Submit]:not(.btn-primary-mini):not(.btn-primary):not(.btn-primary-large), input[type=submit]:not(.btn-primary-mini):not(.btn-primary):not(.btn-primary-large), button[type=submit]:not(.btn-primary-mini):not(.btn-primary):not(.btn-primary-large) { background: var(--couleur-principale); border: none; border-radius: 8px; padding: 10px 20px; font-size: 14px; font-weight: 600; color: #fff; cursor: pointer; transition: background 0.2s ease; box-shadow: none; outline: none; } input[type=Submit]:not(.btn-primary-mini):not(.btn-primary):not(.btn-primary-large):hover, input[type=submit]:not(.btn-primary-mini):not(.btn-primary):not(.btn-primary-large):hover, button[type=submit]:not(.btn-primary-mini):not(.btn-primary):not(.btn-primary-large):hover { background: var(--couleur-principale-hover); outline: none; } input[type=Submit]:focus, input[type=submit]:focus, button[type=submit]:focus { outline: none; } input[type=Submit]:not(.btn-primary-mini):not(.btn-primary):not(.btn-primary-large):active, input[type=submit]:not(.btn-primary-mini):not(.btn-primary):not(.btn-primary-large):active, button[type=submit]:not(.btn-primary-mini):not(.btn-primary):not(.btn-primary-large):active { background: var(--couleur-principale-fonce); outline: none; } /* --------------------------------------------- */ /* 6. ICÔNES D'ACTION (Favoris, Message, etc.) */ /* --------------------------------------------- */ #ann_contact a, #ann_envoicourrier a { transition: all 0.25s ease; display: inline-block; } #ann_contact a:hover, #ann_envoicourrier a:hover { transform: scale(1.2); filter: brightness(1.1); } /* Zone des icônes en bas des cartes */ #mosaique #ann_contact { background: rgba(255,255,255,0.95); padding: 6px 0; } /* --------------------------------------------- */ /* 7. ONGLETS (Liste/Mosaïque) */ /* --------------------------------------------- */ .onglet_bloc_0, .onglet_bloc_1 { border-radius: 8px !important; transition: all 0.25s ease; margin: 0 2px; } .onglet_bloc_1 { background: linear-gradient(135deg, var(--couleur-principale) 0%, var(--couleur-principale-fonce) 100%) !important; box-shadow: 0 2px 8px rgba(var(--couleur-principale-rgb), 0.3); } .onglet_bloc_1 a, .onglet_bloc_1 .glyphicon { color: #fff !important; } .onglet_bloc_0 { background-color: #f0eeec !important; } .onglet_bloc_0:hover { background-color: #e8e4e0 !important; transform: translateY(-1px); } /* --------------------------------------------- */ /* 8. BLOC RECHERCHE GÉNÉRAL */ /* --------------------------------------------- */ #bloc_recherche { background-color: #faf9f8; border-radius: 8px 8px 0px 0px; /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); */ overflow: visible; position: relative; z-index: 100; } .bloc_retour { background-color: #faf9f8; } #recherche_table { padding: 8px 0; } #recherche_table tr td { padding: 5px 0; } /* Section "Recherche plus lente" */ /* #annonces_plusprecis - voir définition plus bas */ /* Lien Plus/Moins */ #annonces_texte_plusprecis a { color: var(--couleur-principale) !important; font-weight: 600; text-decoration: none; transition: color 0.2s ease; } #annonces_texte_plusprecis a:hover { color: var(--couleur-principale-hover) !important; text-decoration: underline; } /* --------------------------------------------- */ /* 9. PAGINATION */ /* --------------------------------------------- */ /* Conteneur de la pagination (flèches + compteur) */ #annonces_fleche_tableau { background: var(--couleur-principale) !important; background-image: none !important; border-radius: 20px; padding: 4px 8px !important; height: auto !important; display: inline-flex; align-items: center; gap: 5px; } /* Compteur de pages */ #annonces_cpt_page, #annonces_cpt_page_bas { font-weight: 600; color: #fff !important; background-color: transparent !important; padding: 2px 8px; border-radius: 0; font-size: 12px; box-shadow: none; } /* Flèches */ #annonces_fleche_g a, #annonces_fleche_d a, #annonces_fleche_g_bas a, #annonces_fleche_d_bas a { transition: opacity 0.2s ease; filter: brightness(10); /* Rendre les flèches blanches */ } #annonces_fleche_g a:hover, #annonces_fleche_d a:hover, #annonces_fleche_g_bas a:hover, #annonces_fleche_d_bas a:hover { opacity: 0.8; } /* --------------------------------------------- */ /* 10. LISTE DES PROFILS - CONTENEUR */ /* --------------------------------------------- */ #bloc_liste_annonce { background-color: #faf9f8; /* padding: 10px; border-radius: 0 0 12px 12px; */ } /* Mosaïque - ne pas modifier display, garder inline-block original */ /* --------------------------------------------- */ /* 12. RÉORGANISATION LAYOUT - RECHERCHE EN HAUT */ /* --------------------------------------------- */ /* Conteneur principal — centré dans la zone disponible */ #conteneur_avc_recherche { display: block; width: 100%; margin-left: auto; margin-right: auto; } /* Bloc recherche en haut - pleine largeur */ #bloc_recherche { width: 100% !important; /* margin-bottom: 8px; */ display: block; } #bloc_recherche > table { width: 100% !important; } /* Bloc annonces/résultats en dessous - pleine largeur */ #annonces { width: 100% !important; display: block; background-color: #faf9f8; } #annonces > table { width: 100% !important; } /* -------- TRI DANS LA BARRE PROFILS -------- */ #annonces_tri_container { display: inline-block; } #annonces_tri_container select { padding: 0px 23px 0px 10px; border: none; border-radius: 15px; font-size: 11px; font-weight: 500; background: rgba(255, 255, 255, 0.25) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 8px center; background-size: 8px; appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; transition: all 0.2s ease; color: #fff; width: auto; min-width: 0; } #annonces_tri_container select:hover { background-color: rgba(255, 255, 255, 0.35); } #annonces_tri_container select:focus { background-color: rgba(255, 255, 255, 0.4); outline: none; } #annonces_tri_container select option { color: #333; background: #fff; } /* --------------------------------------------- */ /* 13. NOUVELLE STRUCTURE FORMULAIRE SIMPLIFIÉ */ /* --------------------------------------------- */ #toggle_filtres_icon { font-weight: 700; font-size: 16px; } /* Section filtres (cachée par défaut) #section_filtres { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #ddd; } */ /* Toggle mode Distance / Pays */ .form-row-mode { padding: 10px 20px; } .form-mode-toggle { display: flex; gap: 20px; justify-content: center; } .form-mode-option { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 16px; border-radius: 20px; background: #f5f3f1; transition: all 0.2s ease; font-size: 13px; font-weight: 500; color: #666; } .form-mode-option:hover { background: #efe9e5; } .form-mode-option input[type="radio"] { accent-color: var(--couleur-principale); width: 16px; height: 16px; cursor: pointer; } .form-mode-option input[type="radio"]:checked + span { color: var(--couleur-principale); font-weight: 600; } /* Section Pays dans filtres */ #section_filtres #recherche_pays { display: flex; flex-wrap: wrap; gap: 15px; padding: 15px 20px; background: #fefefe; border-radius: 10px; margin: 10px 20px; border: 1px solid #f0e8e4; } #section_filtres #recherche_pays .form-group { flex: 1; min-width: 150px; } .form-row-advanced-link #annonces_texte_plusprecis a { color: #999 !important; font-size: 13px; } .form-row-advanced-link #annonces_texte_plusprecis a:hover { color: var(--couleur-principale) !important; } /* ================================================= */ /* FORMULAIRE COMPACT V5 - 2 LIGNES */ /* ================================================= */ .ville-autocomplete-container { position: relative; display: flex; align-items: center; } /* Container spécifique pour l'agenda */ #agenda_container .ville-autocomplete-container { position: relative !important; width: 100%; } #agenda_container .ville-autocomplete-container .ville-suggestions { position: absolute !important; top: calc(100% + 4px) !important; left: 0 !important; right: 0 !important; z-index: 99999 !important; margin-top: 0 !important; } .form-input-ville { width: 100%; padding: 10px 12px 10px 32px; border: 1px solid #e0dbd6; border-radius: 8px; font-size: 14px; background: #fff; transition: all 0.2s ease; } .form-input-ville:focus { outline: none; border-color: var(--couleur-principale); box-shadow: 0 0 0 3px rgba(var(--couleur-principale-rgb), 0.1); } /* Suggestions autocomplete */ .ville-suggestions { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #e0dbd6; border-top: none; border-radius: 0 0 8px 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); max-height: 250px; overflow-y: auto; z-index: 1000; display: none; } /* Scrollbar gris foncé pour autocomplete ville (Webkit: Chrome, Safari, Edge) */ .ville-suggestions::-webkit-scrollbar { width: var(--scrollbar-width); } .ville-suggestions::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 4px; } .ville-suggestions::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } .ville-suggestions::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* Scrollbar pour Firefox */ .ville-suggestions { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } .ville-suggestion-item { padding: 10px 12px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f0ebe6; transition: background 0.15s ease; } .ville-suggestion-item:last-child { border-bottom: none; } .ville-suggestion-item:hover, .ville-suggestion-item.active { background: #fdf2f5; } .ville-name { font-size: 13px; color: #333; } .ville-loading, .ville-error, .ville-no-result { padding: 12px; text-align: center; font-size: 13px; color: #888; } .ville-error { color: #e74c3c; } .btn-filtres { color: var(--couleur-principale) !important; font-size: 12px; font-weight: 600; text-decoration: none; display: flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 6px; transition: background 0.2s ease; } .btn-filtres:hover { background: rgba(var(--couleur-principale-rgb), 0.1); } #toggle_filtres_icon { font-weight: 700; } /* ================================================= */ /* FORMULAIRE DE RECHERCHE V5 - STRUCTURE DIVS */ /* ================================================= */ /* Conteneur principal défini dans section 12 ci-dessous */ /* -------- LIGNES DU FORMULAIRE -------- */ .form-row { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 20px; align-items: flex-end; } .form-row:last-child { margin-bottom: 0; } /* -------- GROUPES DE CHAMPS -------- */ .form-group { display: flex; flex-direction: column; gap: 6px; } .form-label { font-size: 11px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.5px; } /* -------- INPUTS -------- */ .form-input, #form_recherche input[type="text"] { padding: 10px 14px; border: 1px solid #e0dcd8; border-radius: 8px; font-size: 13px; font-family: var(--font-corps); transition: all 0.2s ease; background: #fff; width: 100%; box-sizing: border-box; } .form-input:focus, #form_recherche input[type="text"]:focus { border-color: var(--couleur-principale); box-shadow: 0 0 0 3px rgba(var(--couleur-principale-rgb), 0.1); outline: none; } /* -------- SELECTS -------- */ #form_recherche select { padding: 10px 35px 10px 14px; border: 1px solid #e0dcd8; border-radius: 8px; font-size: 13px; font-family: var(--font-corps); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 12px center; background-size: 10px; appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; transition: all 0.2s ease; min-width: 150px; } #form_recherche select:focus { border-color: var(--couleur-principale); box-shadow: 0 0 0 3px rgba(var(--couleur-principale-rgb), 0.1); outline: none; } #form_recherche select:hover { border-color: #ccc; } .bs3.bootstrap-select .dropdown-toggle .filter-option { padding: 0px !important; } .bootstrap-select .dropdown-toggle .caret { right: 12px !important; } /* -------- ONGLETS PAYS/DISTANCE -------- */ .form-tab { padding: 8px 20px; border-radius: 20px; font-size: 12px; font-weight: 600; text-decoration: none; color: #666; background: #f5f3f1; transition: all 0.2s ease; border: 1px solid transparent; } .form-tab:hover { background: #eee; color: #333; } .form-tab.active, #tab_pays.onglet_bloc_1, .onglet_bloc_1 a { background: var(--couleur-principale) !important; color: #fff !important; } #recherche_pays, #recherche_km { display: flex !important; flex-wrap: wrap; gap: 12px; align-items: center; width: 100%; } #recherche_km[style*="none"] { display: none !important; } /* -------- FILTRES CHECKBOXES (PILLS) -------- */ .form-row-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 15px 0; border-top: 1px solid #eee; } .form-filter { position: relative; display: inline-block; } /* Cacher la checkbox native */ .form-filter > input[type="checkbox"], #form_recherche .form-filter input[type="checkbox"], #annonces_plusprecis .form-filter input[type="checkbox"] { position: absolute !important; opacity: 0 !important; cursor: pointer; height: 0 !important; width: 0 !important; left: -9999px !important; } /* Style du label comme pill */ .form-filter > label, #form_recherche .form-filter label, #annonces_plusprecis .form-filter label { display: inline-flex !important; align-items: center; padding: 8px 16px !important; background: #fff !important; border: 1px solid #e0dcd8 !important; border-radius: 20px !important; font-size: 12px !important; font-weight: 500; color: #555 !important; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } /* Hover sur les labels */ .form-filter > label:hover, #form_recherche .form-filter label:hover, #annonces_plusprecis .form-filter label:hover { border-color: var(--couleur-principale) !important; background: #fef5f7 !important; color: var(--couleur-principale) !important; box-shadow: 0 2px 8px rgba(var(--couleur-principale-rgb), 0.15); transform: translateY(-1px); } /* Checkbox cochée - le label prend le gradient d'accent du theme */ .form-filter > input[type="checkbox"]:checked + label, #form_recherche .form-filter input[type="checkbox"]:checked + label, #annonces_plusprecis .form-filter input[type="checkbox"]:checked + label { background: var(--gradient-accent) !important; border-color: var(--couleur-principale) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(var(--couleur-principale-rgb), 0.3); } /* ========================================== */ /* NEUTRALISER LES ANCIENS STYLES #recherche */ /* ========================================== */ /* Retirer les pseudo-éléments des checkboxes pour .form-filter */ #recherche #form_recherche .form-filter [type="checkbox"]:not(:checked) + label:before, #recherche #form_recherche .form-filter [type="checkbox"]:checked + label:before, #recherche #form_recherche .form-filter [type="checkbox"]:not(:checked) + label:after, #recherche #form_recherche .form-filter [type="checkbox"]:checked + label:after, #recherche #annonces_plusprecis .form-filter [type="checkbox"]:not(:checked) + label:before, #recherche #annonces_plusprecis .form-filter [type="checkbox"]:checked + label:before, #recherche #annonces_plusprecis .form-filter [type="checkbox"]:not(:checked) + label:after, #recherche #annonces_plusprecis .form-filter [type="checkbox"]:checked + label:after, #form_recherche .form-filter [type="checkbox"]:not(:checked) + label:before, #form_recherche .form-filter [type="checkbox"]:checked + label:before, #form_recherche .form-filter [type="checkbox"]:not(:checked) + label:after, #form_recherche .form-filter [type="checkbox"]:checked + label:after, #annonces_plusprecis .form-filter [type="checkbox"]:not(:checked) + label:before, #annonces_plusprecis .form-filter [type="checkbox"]:checked + label:before, #annonces_plusprecis .form-filter [type="checkbox"]:not(:checked) + label:after, #annonces_plusprecis .form-filter [type="checkbox"]:checked + label:after { content: none !important; display: none !important; } /* Réinitialiser le padding des labels dans .form-filter */ #recherche #form_recherche .form-filter [type="checkbox"]:not(:checked) + label, #recherche #form_recherche .form-filter [type="checkbox"]:checked + label, #recherche #annonces_plusprecis .form-filter [type="checkbox"]:not(:checked) + label, #recherche #annonces_plusprecis .form-filter [type="checkbox"]:checked + label { position: relative; padding: 8px 16px !important; margin: 0; } /* Lien Plus de critères - Style simple comme + Filtres */ #annonces_texte_plusprecis a { color: #999 !important; font-size: 11px; text-decoration: none !important; transition: color 0.2s ease; } #annonces_texte_plusprecis a:hover { color: var(--couleur-principale) !important; } /* Cacher l'ancien bloc icône */ #annonces_bloc_icone_plusprecis { display: none !important; } /* -------- SECTION RECHERCHE AVANCEE -------- */ #annonces_plusprecis { margin-top: 15px; padding: 10px 0; background: transparent; border: none; box-shadow: none; } .form-section { margin-bottom: 20px; } .form-section:last-child { margin-bottom: 0; } .form-section-title { font-size: 11px; font-weight: 600; color: #999; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } /* Grille de checkboxes */ .form-checkboxes-grid { display: flex; flex-wrap: wrap; gap: 8px; } /* Age selection */ #choixage, .form-age-selection { display: flex; flex-direction: column; gap: 10px; padding: 10px 0; background: transparent; width: 100%; box-sizing: border-box; } /* Ligne d'âge (Mr ou Mme) */ .form-age-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Masquer les BR dans la section age */ #choixage br, #choixage BR { display: block; } #choixage b, #choixage B { font-size: 11px; font-weight: 600; color: #666; white-space: nowrap; min-width: 70px; } #choixage b:first-child, #choixage B:first-child { margin-left: 0; } #choixage select { min-width: 65px; max-width: 85px; padding: 6px 25px 6px 8px !important; font-size: 12px; } /* Message warning */ .form-warning, #bloc_info { background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%); padding: 12px 18px; border-radius: 10px; font-size: 12px; color: #795548; margin: 15px 0; } /* Note: .form-row-save, .form-saved-searches supprimés - utiliser .form-line-save et .saved-searches-pills */ /* --------------------------------------------- */ /* 11. AMÉLIORATIONS GÉNÉRALES */ /* --------------------------------------------- */ /* Scrollbar personnalisée */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; border-radius: var(--border-radius-badge); } ::-webkit-scrollbar-thumb { background: var(--couleur-principale); border-radius: var(--border-radius-badge); } ::-webkit-scrollbar-thumb:hover { background: var(--couleur-principale-hover); } /* --------------------------------------------- */ /* 12. FORMULAIRE ULTRA-COMPACT 3 LIGNES */ /* --------------------------------------------- */ /* ============================================================ */ /* SPÉCIFIQUE PAGE ANNONCES : Masquage ancienne structure */ /* ============================================================ */ /* Cacher l'ancien titre "Recherche" */ #bloc_recherche #titre, #bloc_recherche #titre_gauche, #bloc_recherche #titre_centre, #bloc_recherche #titre_droite, #bloc_recherche > table > tbody > tr:first-child { display: none !important; } /* Réinitialiser les styles des anciennes tables */ #bloc_recherche #recherche, #bloc_recherche > table { border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; } /* ============================================================ */ /* CONTENEUR DU FORMULAIRE DE RECHERCHE */ /* Réutilisable sur d'autres pages */ /* ============================================================ */ /* Conteneur du formulaire - nom générique réutilisable */ #form_recherche { border: none !important; border-radius: 6px !important; padding: 8px 15px 0 15px !important; box-shadow: none !important; margin: 0 auto; position: relative; overflow: visible !important; } /* Bouton "Filtres" en haut à droite */ .btn-filtres-top { position: absolute; top: -10px; right: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; line-height: 1; color: var(--couleur-principale, #eb406d); background: #fff; border: 1px solid var(--couleur-principale, #eb406d); border-radius: 999px; padding: 4px 10px; text-decoration: none; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); transition: background 0.2s, color 0.2s, box-shadow 0.2s; z-index: 5; } .btn-filtres-top #toggle_filtres_icon { display: inline-block; font-size: 15px; font-weight: 700; line-height: 1; } .btn-filtres-top:hover, .btn-filtres-top:active { background: var(--couleur-principale, #eb406d); color: #fff; text-decoration: none; box-shadow: 0 2px 8px rgba(235, 64, 109, 0.25); } .btn-filtres-top:hover #filtres_count_badge, .btn-filtres-top:active #filtres_count_badge { color: #fff; } .btn-filtres-top:focus { color: var(--couleur-principale, #eb406d); text-decoration: none; outline: none; } /* ============================================================ */ /* COMPOSANT RÉUTILISABLE : BARRE DE RECHERCHE COMPACTE */ /* Style labels empilés sur une ligne (Airbnb-like) */ /* Utilisable sur n'importe quelle page du site */ /* ============================================================ */ /* Conteneur principal de la barre */ .search-bar-inline { display: flex; align-items: stretch; justify-content: flex-start; background: #fff; border: 1px solid #ddd; border-radius: 50px; padding: 0; margin: 8px auto; max-width: 650px; box-shadow: 0 1px 6px rgba(0,0,0,0.08); overflow: visible; position: relative; } /* Variante sans le champ "Qui recherche" (sites gay) : barre plus compacte car il ne reste que 2-3 champs (Je recherche / Distance / [De]). */ .search-bar-inline--no-leurrecherche { max-width: 500px; } /* Champ de recherche individuel */ .search-field { display: flex; flex-direction: column; padding: 8px 12px; /* border-right: 1px solid #eee; */ flex: 1; min-width: 0; } .search-field:last-of-type { border-right: none; } /* === ÉVÉNEMENTS === */ .search-field-pour { flex: 0 0 120px; } .search-field-lieu { flex: 0 0 120px; } /* === ANNONCES === */ .search-field-sarecherche { flex: 0 0 150px; } .search-field-leurrecherche { flex: 0 0 150px; } /* === COMMUN === */ .search-field-distance { flex: 0 0 107px; } /* Champ ville avec autocomplete */ .search-field-ville { position: relative; z-index: 100; flex: 1 0 145px; /* Peut grandir, ne peut pas rétrécir en dessous de 145px */ padding: 8px 54px 8px 8px; } /* Label au-dessus du champ */ .search-label { font-size: 10px; font-weight: 700; color: #666; letter-spacing: 0.5px; margin-bottom: 0px; margin-left: 11px; text-align: left; } .search-field-ville .search-label { margin-left: 0; } .search-field-photo { padding: 15px 12px 0px 0px; } /* Selects avec flèche custom */ .search-bar-inline select { border: 1px solid transparent !important; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L2 5h8z'/%3E%3C/svg%3E") no-repeat right 4px center !important; background-size: 10px !important; padding: 4px 20px 4px 8px !important; font-size: 13px !important; color: #333 !important; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; min-width: 80px !important; border-radius: 8px !important; transition: all 0.2s ease; } .search-bar-inline select:focus { outline: none !important; background-color: #fff !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L2 5h8z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 4px center !important; background-size: 10px !important; border-color: #ddd !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; } /* Options des selects (limité par le navigateur) */ .search-bar-inline select option { padding: 8px 12px; background: #fff !important; color: #333 !important; } /* Option sélectionnée (supprimer le dégradé bleu par défaut) */ .search-bar-inline select option:checked { background: #fff !important; background-image: none !important; color: #333 !important; } .search-bar-inline select option:hover { background: #f5f5f5 !important; background-image: none !important; } /* Input ville avec autocomplete */ .search-bar-inline input[type="text"] { border: none !important; background: transparent !important; padding: 0 !important; font-size: 13px !important; color: #333 !important; width: 100% !important; } .search-bar-inline input[type="text"]::placeholder { color: #999; } .search-bar-inline input[type="text"]:focus { outline: none !important; } /* Bouton de recherche (cercle rose avec icône) */ .search-btn-icon { /* display: flex !important; */ /* align-items: center !important; */ /* justify-content: center !important; */ width: 42px !important; height: 42px !important; /* min-width: 42px !important; */ /* background: var(--couleur-principale) !important; */ /* border: none !important; */ border-radius: 50% !important; /* margin: 8px 11px 8px 8px !important; */ padding: 0 !important; cursor: pointer; color: #fff !important; transition: background 0.2s ease, transform 0.1s ease; position: absolute; top: 9px; right: 9px; z-index: 1000; } .search-btn-icon:hover { background: var(--couleur-principale-hover) !important; transform: scale(1.05); } .search-btn-icon .glyphicon { font-size: 18px; } /* Texte du bouton recherche (visible uniquement en mode etendu "Partout") */ .search-btn-text { display: none; font-size: 14px; font-weight: 600; margin-left: 8px; color: #fff; white-space: nowrap; } /* Mode etendu : bouton "Rechercher" en pill quand le bloc ville est cache */ .search-btn-icon.search-btn-icon--expanded { width: auto !important; height: 42px !important; padding: 0 18px !important; border-radius: 50px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .search-btn-icon.search-btn-icon--expanded .search-btn-text { display: inline; } /* Animation spinner pour le chargement */ .search-btn-icon .spinning { animation: mosaique-spin 0.8s linear infinite; display: inline-block; } /* Responsive mobile */ @media (max-width: 768px) { .search-bar-inline { flex-wrap: wrap; border-radius: 12px; max-width: 100%; } .search-field { flex: 1 1 45%; border-right: none; border-bottom: 1px solid #eee; } .search-btn-icon { width: 100%; border-radius: 8px; margin: 8px; } } /* ============================================================ */ /* FIN COMPOSANT : BARRE DE RECHERCHE COMPACTE */ /* ============================================================ */ /* ========== LIGNES DU FORMULAIRE (ancien système) ========== */ .form-line { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 0; flex-wrap: wrap; } /* Ligne 3 : Recherches sauvées */ .form-line-3 { padding-top: 6px; padding-bottom: 15px; justify-content: center; gap: 10px; } /* Labels inline */ .form-label-sm { font-size: 11px; color: #888; white-space: nowrap; } /* Selects compacts */ #form_recherche select { padding: 5px 25px 5px 8px !important; font-size: 12px !important; border: none !important; border-radius: 0 !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23666' d='M5 7L1 3h8z'/%3E%3C/svg%3E") no-repeat right 6px center !important; background-size: 8px !important; min-width: auto !important; max-width: 180px; /* Limite la largeur pour tenir sur une ligne */ } /* Ville autocomplete mini */ .ville-autocomplete-mini { position: relative; } .form-input-ville-mini { margin: 3px 0px 0px 0px; padding: 5px 8px !important; font-size: 12px !important; border: 1px solid #ddd !important; border-radius: 4px !important; width: 140px !important; transition: all 0.2s ease; } .form-input-ville-mini:focus { outline: none !important; border-color: var(--couleur-principale) !important; box-shadow: 0 0 0 3px rgba(var(--couleur-principale-rgb), 0.1) !important; } /* Suggestions ville */ .ville-autocomplete-mini { position: relative; z-index: 9999; } .ville-autocomplete-mini .ville-suggestions { position: absolute; top: calc(100% + 8px); /* Petit espace sous l'input */ left: 0; right: auto; background: #fff; border: 1px solid #ddd; border-radius: 8px; max-height: 300px; overflow-y: auto; z-index: 99999; display: none; box-shadow: 0 8px 24px rgba(0,0,0,0.12); min-width: 280px; } /* Items dans les suggestions de ville */ .ville-suggestion-item { padding: 12px 16px; cursor: pointer; transition: background 0.2s ease; border-bottom: 1px solid #f5f5f5; } .ville-suggestion-item:last-child { border-bottom: none; } .ville-suggestion-item:hover, .ville-suggestion-item.active { background: #f8f8f8; } .ville-name { font-size: 14px; color: #333; } .ville-loading, .ville-error, .ville-no-result { padding: 12px 16px; color: #999; font-size: 13px; text-align: center; } /* Ville autocomplete dans modiffiche */ .ville-autocomplete-modiffiche { position: relative; z-index: 9999; } .form-input-ville-modiffiche { width: 100% !important; padding: 10px 12px !important; font-size: 14px !important; border: 1px solid #ddd !important; border-radius: 8px !important; transition: all 0.2s ease; box-sizing: border-box; } .form-input-ville-modiffiche:focus { outline: none !important; border-color: var(--couleur-principale) !important; box-shadow: 0 0 0 3px rgba(var(--couleur-principale-rgb), 0.1) !important; } .ville-autocomplete-modiffiche .ville-suggestions { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid #ddd; border-radius: 8px; max-height: 300px; overflow-y: auto; z-index: 99999; display: none; box-shadow: 0 8px 24px rgba(0,0,0,0.12); } /* ================================================= */ /* BOUTONS PRIMARY UNIFORMISÉS - 3 TAILLES */ /* ================================================= */ /* BASE COMMUNE pour tous les boutons primary */ .btn-primary-mini, .btn-primary, .btn-primary-large { background: var(--couleur-principale); color: #fff !important; border: none; cursor: pointer; font-weight: 600; text-transform: capitalize; letter-spacing: 0.5px; transition: all 0.2s ease; text-decoration: none; display: inline-block; text-align: center; } /* HOVER COMMUN */ .btn-primary-mini:hover, .btn-primary:hover, .btn-primary-large:hover { background: var(--couleur-principale-hover); color: #fff !important; } /* LOADING - État chargement */ .btn-primary-mini.btn-loading, .btn-primary.btn-loading, .btn-primary-large.btn-loading, .btn-primary-mini:disabled, .btn-primary:disabled, .btn-primary-large:disabled { background: #ccc !important; cursor: not-allowed; opacity: 0.7; } /* FOCUS - Override Bootstrap (empêche le bleu) */ .btn-primary-mini:focus, .btn-primary:focus, .btn-primary-large:focus { background: var(--couleur-principale); color: #fff !important; outline: none !important; box-shadow: 0 0 0 2px rgba(var(--couleur-principale-rgb), 0.3) !important; } /* ACTIVE (clic) */ .btn-primary-mini:active, .btn-primary:active, .btn-primary-large:active { background: #c02d52 !important; color: #fff !important; outline: none !important; box-shadow: none !important; } /* VISITED (liens) */ .btn-primary-mini:visited, .btn-primary:visited, .btn-primary-large:visited { background: var(--couleur-principale); color: #fff !important; } /* TAILLE MINI */ .btn-primary-mini { padding: 4px 10px; font-size: 10px; border-radius: 10px; } /* TAILLE NORMALE */ .btn-primary { padding: 8px 18px; font-size: 12px; border-radius: 12px; } /* TAILLE GRANDE */ .btn-primary-large { padding: 12px 30px; font-size: 14px; border-radius: 20px; } /* Note: Aliases .btn-rechercher-mini, .btn-ajouter-mini, .btn-ajouter supprimés - utiliser .btn-primary-mini */ /* Bouton Ajouter événement (outline/creux) */ .btn-add-event { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; background: transparent; color: var(--couleur-principale) !important; border: 1.5px solid var(--couleur-principale); border-radius: 20px; font-size: 12px; font-weight: 500; text-decoration: none; cursor: pointer; transition: all 0.2s ease; } .btn-add-event:hover { background: var(--couleur-principale); color: #fff !important; text-decoration: none; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(var(--couleur-principale-rgb), 0.3); } .btn-add-event:active { background: var(--couleur-principale-fonce); border-color: var(--couleur-principale-fonce); color: #fff !important; text-decoration: none !important; outline: none; transform: translateY(0); } .btn-add-event:focus { text-decoration: none !important; outline: none; } .btn-add-event .glyphicon { font-size: 13px; } /* ========== ONGLETS ÉVÉNEMENTS MODERNES ========== */ /* Onglets dans le header (utilisés dans plusieurs pages) */ .header-tabs { display: flex; gap: 15px; padding: 0px 20px 10px 20px; } .header-tab { flex: 1; padding: 5px 10px; background: #f5f5f5; color: #666 !important; text-align: center; text-decoration: none; border-radius: 10px; font-size: 14px; font-weight: 500; border: 2px solid transparent; transition: all 0.3s ease; cursor: pointer; } .header-tab:hover { background: #ebebeb; color: #333 !important; text-decoration: none; } .header-tab.active { background: var(--couleur-principale); color: #fff !important; border-color: var(--couleur-principale); box-shadow: 0 2px 8px rgba(var(--couleur-principale-rgb), 0.2); } .header-tab.active:hover { background: var(--couleur-principale-hover); border-color: var(--couleur-principale-hover); color: #fff !important; text-decoration: none; } .header-tab:active, .header-tab:focus { text-decoration: none !important; outline: none; } /* Header de page complet (titre + onglets + recherche) */ .page-header { background-color: #faf9f8; border-radius: 5px 5px 0px 0px; margin: 0px; padding: 0px; border: none; } /* Zone de recherche dans le header */ .header-search { padding: 15px 20px; } /* ========== RECHERCHES SAUVEGARDÉES (PILLS) ========== */ .saved-searches-pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } /* Pill de recherche sauvegardée (conteneur) */ .saved-pill { display: inline-flex; align-items: center; padding: 4px 8px 4px 10px; background: #fff; border: 1px solid #ddd; border-radius: 12px; font-size: 11px; transition: all 0.2s; gap: 6px; } .saved-pill:hover { border-color: var(--couleur-principale); background: #fff5f7; } /* Lien du nom de recherche */ .saved-pill-link { color: #555; text-decoration: none !important; transition: color 0.2s; } .saved-pill-link:hover, .saved-pill:hover .saved-pill-link { color: var(--couleur-principale); text-decoration: none !important; } /* Bouton supprimer (×) - croix intégrée style mix */ .saved-pill-delete { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: 14px; line-height: 1; color: #bbb; text-decoration: none !important; border-radius: 50%; transition: all 0.2s; } .saved-pill-delete:hover { color: #fff; background: var(--couleur-principale); text-decoration: none !important; } .saved-pill:hover .saved-pill-delete { color: var(--couleur-principale); } .saved-pill:hover .saved-pill-delete:hover { color: #fff; background: var(--couleur-principale); } /* Ligne pseudo dans filtres */ /* Zone Autres options (Pseudo + Sauvegarder) */ .form-autres-options { margin: 15px -15px 0 -15px; padding: 12px 15px; background: #f8f8f8; border-radius: 0 0 8px 8px; } .form-autres-options-title { font-size: 10px; font-weight: 600; color: #aaa; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; } .form-line-pseudo { display: flex; align-items: center; gap: 8px; padding: 6px 0; justify-content: flex-start; } .form-line-pseudo .form-label-sm { font-size: 11px; color: #666; } .form-line-pseudo .form-input-mini { width: 150px !important; } .form-input-mini { padding: 4px 8px !important; font-size: 11px !important; border: 1px solid #ddd !important; border-radius: 4px !important; width: auto; } /* Ligne sauvegarde dans filtres */ .form-line-save { display: flex; align-items: center; gap: 8px; padding: 8px 0; margin-top: 8px; justify-content: flex-start; } .form-line-save .form-label-sm { font-size: 11px; color: #666; } .form-line-save .form-input-mini { width: 150px !important; } /* Bouton Rechercher en bas des filtres */ .form-line-rechercher-bottom { display: flex; justify-content: center; padding: 15px 0 5px 0; margin-top: 10px; } /* Note: .btn-ajouter-mini et #form_recherche button[name="Sauve"] supprimés - utiliser .btn-primary-mini */ /* ========================================== */ /* SLIDERS D'AGE - noUiSlider */ /* ========================================== */ #form_recherche .form-age-slider-row, #annonces_plusprecis .form-age-slider-row { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 10px !important; padding: 0 5px !important; } #form_recherche .form-age-label, #annonces_plusprecis .form-age-label { font-size: 11px !important; font-weight: 600 !important; color: #666 !important; min-width: 65px !important; flex-shrink: 0 !important; } #form_recherche .age-slider, #annonces_plusprecis .age-slider { flex: 0 0 auto !important; width: 170px !important; height: 6px !important; } #form_recherche .form-age-value, #annonces_plusprecis .form-age-value { font-size: 11px !important; font-weight: 600 !important; color: #666 !important; min-width: 54px !important; text-align: right !important; flex-shrink: 0 !important; } /* Style de la barre du slider */ #form_recherche .age-slider .noUi-target, #annonces_plusprecis .age-slider .noUi-target { background: #e8e4e0 !important; border-radius: 3px !important; border: none !important; box-shadow: inset 0 1px 2px rgba(0,0,0,0.08) !important; height: 6px !important; } #form_recherche .age-slider .noUi-connect, #annonces_plusprecis .age-slider .noUi-connect { background: var(--gradient-accent) !important; border-radius: 3px !important; } /* Style des poignées */ #form_recherche .age-slider .noUi-handle, #annonces_plusprecis .age-slider .noUi-handle { width: 16px !important; height: 16px !important; border-radius: 50% !important; background: #fff !important; border: 2px solid var(--couleur-principale) !important; box-shadow: 0 2px 4px rgba(var(--couleur-principale-rgb), 0.25) !important; cursor: pointer !important; top: -5px !important; right: -8px !important; transition: all 0.15s ease !important; } #form_recherche .age-slider .noUi-handle:before, #annonces_plusprecis .age-slider .noUi-handle:before, #form_recherche .age-slider .noUi-handle:after, #annonces_plusprecis .age-slider .noUi-handle:after { display: none !important; } #form_recherche .age-slider .noUi-handle:hover, #annonces_plusprecis .age-slider .noUi-handle:hover { transform: scale(1.1) !important; box-shadow: 0 2px 6px rgba(var(--couleur-principale-rgb), 0.35) !important; } #form_recherche .age-slider .noUi-handle:active, #annonces_plusprecis .age-slider .noUi-handle:active, #form_recherche .age-slider .noUi-handle:focus, #annonces_plusprecis .age-slider .noUi-handle:focus { outline: none !important; transform: scale(1.15) !important; box-shadow: 0 2px 8px rgba(var(--couleur-principale-rgb), 0.45) !important; border-width: 3px !important; } /* Responsive */ @media (max-width: 500px) { .form-age-slider-row { flex-direction: column; align-items: flex-start; gap: 6px; } .form-age-value { text-align: left; } .age-slider { width: 100%; } } /* ========================================== */ /* INDICATEUR FILTRES ACTIFS */ /* ========================================== */ /* Compteur de filtres actifs - seul le nombre est en rose */ #filtres_count_badge { font-weight: 700; color: var(--couleur-principale); } /* ========================================== */ /* MODE MOSAÏQUE - MODERNISÉ */ /* ========================================== */ /* Conteneur principal de la grille - Spécificité augmentée avec ID parent */ #bloc_liste_annonce .mosaique-container { display: flex; flex-wrap: wrap; gap: var(--gap-grille); padding: var(--padding-container); max-width: 1400px; margin: 0 auto; width: 100%; box-sizing: border-box; } /* Card individuelle d'un profil - 3 colonnes par défaut */ #bloc_liste_annonce .mosaique-card { flex: 0 0 calc(33.333% - 12px); max-width: calc(33.333% - 12px); width: calc(33.333% - 12px); position: relative; height: 360px; border-radius: var(--border-radius-card); overflow: hidden; /* Ombres profondes pour effet premium */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; background-color: var(--couleur-fond-clair); display: inline-block; } /* Cards boost (intercalees par le systeme d'immersion - cf. prepare_boost_pool) * Pas de badge visible : on garde l'experience uniforme, juste un tres leger * boost de luminosite/contraste pour qu'elles attirent inconsciemment l'oeil. */ /* .mosaique-card-boost { border: 2px solid red !important; } */ /* Responsive mosaïque : 2 colonnes tablette, 1 colonne mobile */ @media (max-width: 900px) { #bloc_liste_annonce .mosaique-card { flex: 0 0 calc(50% - 9px); max-width: calc(50% - 9px); width: calc(50% - 9px); height: 320px; } } @media (max-width: 560px) { #bloc_liste_annonce .mosaique-card { flex: 0 0 100%; max-width: 100%; width: 100%; height: 280px; } } #bloc_liste_annonce .mosaique-card:hover { /* Ombre plus marquée au hover (sans effet de montée) */ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 16px 40px rgba(0, 0, 0, 0.06); } /* Lien englobant toute la card */ #bloc_liste_annonce .mosaique-card a { display: block; width: 100%; height: 100%; text-decoration: none; color: inherit; } #bloc_liste_annonce .mosaique-card a:hover { text-decoration: none; } /* Photo de profil */ #bloc_liste_annonce .mosaique-photo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; /* Filtres premium pour améliorer l'image */ filter: contrast(1.06) saturate(1.12) brightness(1.02); /* Transition douce pour le zoom */ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } /* Effet premium au hover : zoom + boost couleurs */ #bloc_liste_annonce .mosaique-card:hover .mosaique-photo { transform: scale(1.05); filter: contrast(1.08) saturate(1.15) brightness(1.04); } /* Photo vide - avatar par défaut */ #bloc_liste_annonce .mosaique-photo-vide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--couleur-fond-gris); background-size: 70%; background-position: center center; background-repeat: no-repeat; } /* Avatars par type */ #bloc_liste_annonce .mosaique-photo-vide.cpl { background-image: var(--url-img-vide-cpl); background-size: cover; background-color: var(--couleur-fond-blanc); background-color: #f7f7f9; } #bloc_liste_annonce .mosaique-photo-vide.f { background-image: var(--url-img-vide-f); background-size: cover; background-color: var(--couleur-fond-blanc); background-color: #f7f7f9; } #bloc_liste_annonce .mosaique-photo-vide.h { background-image: var(--url-img-vide-h); background-size: cover; background-color: var(--couleur-fond-blanc); background-color: #f7f7f9; } #bloc_liste_annonce .mosaique-photo-vide.trans { background-image: var(--url-img-vide-trans); background-size: cover; background-color: var(--couleur-fond-blanc); background-color: #f7f7f9; } /* Overlay sombre en bas pour la lisibilité du texte - effet premium */ #bloc_liste_annonce .mosaique-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 80px; /* Dégradé subtil pour look professionnel */ background: linear-gradient( to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.05) 75%, transparent 100% ); pointer-events: none; } /* Indicateur en ligne (point vert) */ #bloc_liste_annonce .mosaique-online { position: absolute; top: 10px; right: 10px; width: 12px; height: 12px; background-color: var(--couleur-online); border-radius: 50%; border: 2px solid var(--couleur-texte-blanc); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); z-index: 10; } /* Pseudo en haut à gauche */ #bloc_liste_annonce .mosaique-pseudo { position: absolute; top: 8px; left: var(--padding-card); color: var(--couleur-texte-blanc); font-size: 15px; font-weight: 600; text-shadow: var(--text-shadow-lisibilite); z-index: 10; text-transform: capitalize; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Ville sous le pseudo */ #bloc_liste_annonce .mosaique-ville { position: absolute; top: 28px; left: var(--padding-card); color: #e0e0e0; color: var(--couleur-texte-blanc); font-size: 12px; font-weight: 400; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); text-shadow: var(--text-shadow-lisibilite); z-index: 10; text-transform: capitalize; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Type de profil en bas à droite */ #bloc_liste_annonce .mosaique-type { position: absolute; bottom: 8px; right: var(--padding-card); color: var(--couleur-texte-blanc); font-size: 11px; font-weight: 500; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); z-index: 10; } /* Badge "Nouveau" */ #bloc_liste_annonce .mosaique-badge-nouveau { position: absolute; bottom: 4px; left: 6px; background-color: var(--couleur-badge-nouveau); color: var(--couleur-texte-blanc); font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: var(--border-radius-badge); text-transform: uppercase; z-index: 10; } /* Badge "Dernière minute" */ #bloc_liste_annonce .mosaique-badge-dernmin { position: absolute; bottom: 4px; left: 6px; background-color: var(--couleur-badge-dernmin); color: white; font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: var(--border-radius-badge); z-index: 10; } /* Badge "Vidéo" */ #bloc_liste_annonce .mosaique-badge-video { position: absolute; top: 45px; left: 8px; background-color: rgba(0, 0, 0, 0.6); color: white; font-size: 10px; font-weight: 500; padding: 2px 6px; border-radius: var(--border-radius-badge); z-index: 10; } /* Badge "Libre ce soir" */ #bloc_liste_annonce .mosaique-badge-libresoir { position: absolute; top: 6px; right: 27px; background-color: var(--couleur-badge-libresoir); color: white; font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: var(--border-radius-badge); z-index: 10; } /* ============================================================ */ /* BOOTSTRAP-SELECT - PERSONNALISATION POUR BARRE DE RECHERCHE */ /* ============================================================ */ .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { width: auto !important; } /* Masquer la flèche SVG native UNIQUEMENT si Bootstrap-select est actif */ .search-bar-inline .bootstrap-select select { background-image: none !important; } /* Style du bouton Bootstrap-select dans la barre de recherche */ .search-bar-inline .btn-selectpicker-custom { border: 1px solid transparent !important; background: transparent !important; padding: 4px 20px 4px 8px !important; font-size: 13px !important; color: #333 !important; min-height: auto !important; height: auto !important; border-radius: 8px !important; box-shadow: none !important; transition: all 0.2s ease; text-align: left !important; font-weight: normal !important; } /* Focus sur le bouton */ .search-bar-inline .btn-selectpicker-custom:focus, .search-bar-inline .btn-selectpicker-custom:hover, .search-bar-inline .bootstrap-select.open .btn-selectpicker-custom { border-color: #ddd !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; background: transparent !important; outline: none !important; } /* Menu déroulant */ /* .search-bar-inline .bootstrap-select .dropdown-menu { border: 1px solid #ddd !important; border-radius: 8px !important; box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important; padding: 4px 0 !important; margin-top: 4px !important; } */ /* Scrollbar gris foncé pour le dropdown (Webkit: Chrome, Safari, Edge) */ .search-bar-inline .bootstrap-select .dropdown-menu::-webkit-scrollbar, .bootstrap-select .dropdown-menu::-webkit-scrollbar { width: var(--scrollbar-width) !important; } .search-bar-inline .bootstrap-select .dropdown-menu::-webkit-scrollbar-track, .bootstrap-select .dropdown-menu::-webkit-scrollbar-track { background: var(--scrollbar-track) !important; border-radius: 4px; } .search-bar-inline .bootstrap-select .dropdown-menu::-webkit-scrollbar-thumb, .bootstrap-select .dropdown-menu::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb) !important; border-radius: 4px; } .search-bar-inline .bootstrap-select .dropdown-menu::-webkit-scrollbar-thumb:hover, .bootstrap-select .dropdown-menu::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover) !important; } /* Scrollbar pour Firefox */ /* .search-bar-inline .bootstrap-select .dropdown-menu { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } */ .bootstrap-select .dropdown-menu { scrollbar-width: thin !important; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track) !important; } /* Items dans le dropdown */ .search-bar-inline .bootstrap-select .dropdown-menu li a { padding: 10px 16px !important; font-size: 13px !important; color: #333 !important; transition: all 0.15s ease; } /* Hover sur un item */ .search-bar-inline .bootstrap-select .dropdown-menu li a:hover { background: #f8f8f8 !important; color: #333 !important; } /* Item sélectionné (couleur rose du site) */ .search-bar-inline .bootstrap-select .dropdown-menu li.selected a, .search-bar-inline .bootstrap-select .dropdown-menu li.selected a:hover { background: var(--couleur-principale, #e91e63) !important; color: #fff !important; } /* Flèche du bouton (icône Bootstrap native) */ .search-bar-inline .bootstrap-select .caret { border-top-color: #666 !important; } .search-bar-inline .bootstrap-select.open .caret { border-top-color: #333 !important; } /* ============================================================ */ /* FIN BOOTSTRAP-SELECT PERSONNALISATION */ /* ============================================================ */ /* ================================================= */ /* BRIDAGE NON-ABONNÉS - PROFILS FLOUTÉS */ /* ================================================= */ /* Bloc d'abonnement (position 24) */ .mosaique-subscription-block { flex: 0 0 100%; /* Prend toute la largeur dans le conteneur flex */ width: 100%; background: linear-gradient(135deg, #ffd633 0%, #ffb800 100%); border-radius: 12px; padding: 40px 20px; text-align: center; box-shadow: 0 8px 24px rgba(255, 195, 0, 0.3); margin: 20px 0; transition: transform 0.3s ease, box-shadow 0.3s ease; box-sizing: border-box; } .mosaique-subscription-block:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(255, 195, 0, 0.4); } .mosaique-subscription-block a { color: #141515; text-decoration: none; display: block; } .subscription-content h3 { font-size: 20px; margin-bottom: 12px; font-weight: 400; color: #141515; } .subscription-content p { font-size: 16px; margin: 8px 0; color: #141515; } .subscription-content strong { font-size: 24px; font-weight: 700; color: #141515; } /* Profils floutés (après position 24) */ .mosaique-card-blurred { position: relative; } .mosaique-card-blurred > a { filter: blur(5px) brightness(0.4); opacity: 0.9; transition: all 0.3s ease; } /* Texte par-dessus le flou */ .mosaique-blur-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70%; text-align: center; background: rgba(255, 195, 0, 0.95); z-index: 10; border-radius: 10px; padding: 20px 10px; color: #141515; font-size: 16px; pointer-events: none; /* Permet de cliquer à travers */ } .mosaique-blur-text strong { font-size: 20px; font-weight: 700; display: block; margin-top: 4px; color: #141515; } /* ========================================== */ /* ÉVÉNEMENTS PRIVÉS - FORMAT CARTE 1 COLONNE */ /* ========================================== */ /* Conteneur principal - 1 colonne */ .evenements-mosaique-container { display: flex; flex-direction: column; gap: 20px; padding: 20px 10px; max-width: 1200px; margin: 0 auto; width: 100%; box-sizing: border-box; transition: opacity 0.15s ease-out; /* Transition fluide pour la restauration */ } /* Conteneur événements (pour scroll restoration) */ #evenements_container { transition: opacity 0.15s ease-out; } /* Card individuelle d'événement */ .event-card { width: 100%; background-color: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-sizing: border-box; position: relative; } .event-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 16px 40px rgba(0, 0, 0, 0.06); transform: translateY(-2px); } .event-card-inner { display: flex; flex-direction: column; width: 100%; } /* Bouton supprimer flottant (clubs seulement, pour admin) */ a.event-delete-floating { position: absolute; top: 10px; right: 10px; z-index: 20; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background-color: var(--couleur-admin); color: #fff; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } a.event-delete-floating:hover { background-color: var(--couleur-admin-hover); transform: scale(1.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); text-decoration: none; } a.event-delete-floating .glyphicon { font-size: 14px; color: #fff; } /* Section supérieure : Photo + Infos */ .event-top-section { display: flex; flex-direction: row; gap: 20px; padding: 15px; } /* Photo container - 30% */ .event-photo-container { position: relative; flex: 0 0 30%; width: 30%; height: 250px; overflow: hidden; border-radius: 8px; align-self: flex-start; } .event-photo-container a { display: block; width: 100%; height: 100%; text-decoration: none; } .event-photo { width: 100%; height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; filter: contrast(1.06) saturate(1.12) brightness(1.02); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .event-card:hover .event-photo { transform: scale(1.05); filter: contrast(1.08) saturate(1.15) brightness(1.04); } /* Photo vide - avatar par défaut */ .event-photo-vide { width: 100%; height: 100%; background-color: #f5f5f5; background-size: 60%; background-position: center center; background-repeat: no-repeat; } .event-photo-vide.cpl { background-image: var(--url-img-vide-cpl); background-size: cover; background-color: var(--couleur-fond-blanc); } .event-photo-vide.f { background-image: var(--url-img-vide-f); background-size: cover; background-color: var(--couleur-fond-blanc); } .event-photo-vide.h { background-image: var(--url-img-vide-h); background-size: cover; background-color: var(--couleur-fond-blanc); } .event-photo-vide.trans { background-image: var(--url-img-vide-trans); background-size: cover; background-color: var(--couleur-fond-blanc); } .event-photo-vide.club { background-color: #f0f0f0; background-size: 50%; position: relative; } .event-photo-vide.club::after { content: "🏢"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 80px; opacity: 0.3; } /* Overlay pour meilleure lisibilité */ .event-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.15) 100% ); pointer-events: none; } /* Indicateur en ligne */ .event-online { position: absolute; top: 10px; right: 10px; width: 12px; height: 12px; background-color: var(--couleur-online); border-radius: 50%; border: 2px solid var(--couleur-texte-blanc); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); z-index: 10; } /* Container des infos - 70% */ .event-info-container { flex: 1; display: flex; flex-direction: column; gap: 8px; } /* Contenu texte de la carte */ .event-title { font-size: 20px; font-weight: 700; color: #141515; line-height: 1.3; margin-bottom: 5px; } .event-pseudo { font-size: 14px; color: #666; margin-bottom: 8px; } .event-pseudo a { color: var(--couleur-principale); text-decoration: none; font-weight: 600; } .event-pseudo a:hover { text-decoration: underline; } .event-type-badge { display: inline-block; background-color: #f0f0f0; color: #666; padding: 2px 8px; border-radius: 4px; font-size: 11px; margin-left: 8px; font-weight: 500; text-transform: uppercase; } /* Grille d'informations 2x2 */ .event-info-grid { display: grid; grid-template-columns: auto auto; gap: 8px 20px; margin-top: 10px; justify-content: center; align-items: start; } .event-info-row { display: contents; } /* Informations de localisation et date */ .event-localisation, .event-date, .event-lieu, .event-genre { font-size: 13px; color: #666; display: flex; align-items: center; gap: 6px; } .event-localisation .glyphicon, .event-date .glyphicon, .event-lieu .glyphicon, .event-genre .glyphicon { color: var(--couleur-principale); font-size: 12px; } /* Description */ .event-description { font-size: 14px; color: #555; line-height: 1.5; margin-top: 30px; text-align: left; } .event-description-more, .event-description-less { color: var(--couleur-principale); font-weight: 600; text-decoration: none; cursor: pointer; margin-left: 3px; } .event-description-more:hover, .event-description-less:hover { text-decoration: underline; } /* Tableau Nombre et Tarifs - horizontal */ .event-tarifs-table { display: flex; justify-content: space-around; align-items: center; padding: 15px 20px; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; } .tarif-group { display: flex; align-items: center; gap: 12px; font-size: 14px; } .tarif-label { font-weight: 600; color: #555; min-width: 60px; } .tarif-nombre { min-width: 15px; text-align: center; } .tarif-prix { color: var(--couleur-principale); } /* Actions (chat, courrier, supprimer) */ .event-actions { display: flex; justify-content: center; align-items: center; gap: 25px; margin-top: 15px; } a.event-action-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: var(--couleur-principale); color: #fff; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } a.event-action-btn:hover { background-color: var(--couleur-mail-hover); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); text-decoration: none; } a.event-action-btn:focus { text-decoration: none; outline: none; } a.event-action-btn .glyphicon { font-size: 16px; color: #fff; } /* Bouton chat - vert si en ligne */ a.event-action-chat { background-color: var(--couleur-chat-online); } a.event-action-chat:hover { background-color: var(--couleur-chat-online-hover); text-decoration: none; } /* Bouton chat - grisé si hors ligne */ a.event-action-offline { background-color: var(--couleur-disabled); cursor: not-allowed; opacity: 0.6; } a.event-action-offline:hover { background-color: var(--couleur-disabled); transform: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); text-decoration: none; } /* Bouton courrier - rose */ a.event-action-mail { background-color: var(--couleur-mail); } a.event-action-mail:hover { background-color: var(--couleur-mail-hover); text-decoration: none; } /* ============================================================================= DERNIÈRE MINUTE V5 - Styles spécifiques ============================================================================= */ /* Card dernière minute (hérite de event-card) */ .dernmin-card { /* Hérite de .event-card */ } /* Card TOP mise en avant */ .dernmin-card-top { border: 2px solid #9b59b6; box-shadow: 0 4px 12px rgba(155, 89, 182, 0.25); } .dernmin-card-top::before { content: "★ TOP"; position: absolute; top: 10px; left: 10px; background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); color: white; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; z-index: 10; } /* Bouton Supprimer flottant (admin ou propriétaire) - bas droite */ .dernmin-delete-floating { position: absolute; bottom: 15px; right: 15px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: linear-gradient(135deg, #dc3545 0%, #c82333 100%); border-radius: 50%; color: white; text-decoration: none; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(220, 53, 69, 0.35); z-index: 10; } .dernmin-delete-floating:hover { background: linear-gradient(135deg, #c82333 0%, #bd2130 100%); transform: scale(1.1); color: white; text-decoration: none; box-shadow: 0 4px 12px rgba(220, 53, 69, 0.5); } .dernmin-delete-floating .glyphicon { font-size: 16px; } .dernmin-top-btn { position: absolute; right: 10px; top: 10px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: linear-gradient(135deg, var(--couleur-admin) 0%, var(--couleur-admin-hover) 100%); border-radius: 50%; color: white; text-decoration: none; transition: all 0.2s ease; box-shadow: 0 2px 6px rgba(171, 53, 220, 0.35); z-index: 10; } .dernmin-top-btn:hover { background: linear-gradient(135deg, var(--couleur-admin-hover) 0%, #7d3c98 100%); transform: scale(1.1); color: white; text-decoration: none; box-shadow: 0 4px 12px rgba(171, 53, 220, 0.5); } .dernmin-top-btn .glyphicon { font-size: 14px; } /* Bouton TOP actif (étoile pleine) - plus clair pour indiquer l'état actif */ .dernmin-top-btn.dernmin-top-active { background: linear-gradient(135deg, #c77dff 0%, var(--couleur-admin) 100%); box-shadow: 0 2px 6px rgba(199, 125, 255, 0.4); } .dernmin-top-btn.dernmin-top-active:hover { background: linear-gradient(135deg, var(--couleur-admin) 0%, var(--couleur-admin-hover) 100%); box-shadow: 0 4px 12px rgba(171, 53, 220, 0.5); } /* ============================================================================= STYLES MODAL LEGACY (utilisés par les modales Bootstrap V4 dans entree.cgi, abonnement.cgi) TODO: Nettoyer quand les modales V4 seront migrées vers modale-* centralisée ============================================================================= */ .modal-content { background: white; border-radius: 12px; width: 90%; max-width: 500px; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); } .modal-header { position: relative; display: flex; justify-content: center; align-items: center; padding: 20px 25px; border-bottom: 1px solid #e0e0e0; background: var(--gradient-accent); border-radius: 12px 12px 0 0; } .modal-header h3 { margin: 0; font-size: 18px; font-weight: 600; color: white; text-align: center; } .modal-body { background-color: white; padding: 25px; border: 1px solid #e0e0e0; border-top: none; border-bottom: none; } .modal-body .form-group { margin-bottom: 20px; } .modal-body .form-group label { display: block; font-weight: 600; color: #333; margin-bottom: 8px; font-size: 14px; } .modal-body .form-control, .modal-body select { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; } .modal-body .form-control:focus, .modal-body select:focus { outline: none; border-color: var(--couleur-principale); box-shadow: 0 0 0 3px rgba(var(--couleur-principale-rgb), 0.1); } /* Style pour le select avec bootstrap-select dans la modale */ .modal-body .bootstrap-select { width: 100% !important; } .modal-body .bootstrap-select .btn-selectpicker-custom { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; text-align: left; background: white; transition: border-color 0.2s, box-shadow 0.2s; } .modal-body .bootstrap-select .btn-selectpicker-custom:hover, .modal-body .bootstrap-select .btn-selectpicker-custom:focus { border-color: var(--couleur-principale); box-shadow: 0 0 0 3px rgba(var(--couleur-principale-rgb), 0.1); background: white; } .modal-body .bootstrap-select .btn-selectpicker-custom .filter-option { color: #333; } /* Personnalisation du dropdown bootstrap-select dans la modale */ .modal-body .bootstrap-select .dropdown-menu { border-radius: 8px; border: 1px solid #ddd; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); margin-top: 4px; } .modal-body .bootstrap-select .dropdown-menu li a { padding: 10px 15px; color: #333; transition: background-color 0.2s, color 0.2s; } .modal-body .bootstrap-select .dropdown-menu li:hover > a, .modal-body .bootstrap-select .dropdown-menu li.active > a, .modal-body .bootstrap-select .dropdown-menu li.selected > a { background: linear-gradient(135deg, var(--couleur-principale) 0%, var(--couleur-principale-fonce) 100%); color: white; } .modal-body .bootstrap-select .dropdown-menu li.selected > a:hover { background: linear-gradient(135deg, var(--couleur-principale-hover) 0%, var(--couleur-principale-fonce) 100%); color: white; } .modal-body textarea.form-control { resize: vertical; min-height: 100px; } .modal-body .form-text { display: block; margin-top: 6px; font-size: 12px; color: #666; } /* Groupe de checkboxes côte à côte */ .modal-body .checkbox-group { display: flex; gap: 20px; flex-wrap: wrap; } .modal-body .checkbox-inline { display: flex; align-items: center; gap: 8px; } .modal-body .checkbox-inline input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--couleur-principale); } .modal-body .checkbox-inline label { margin: 0; font-weight: 400; } .modal-body .form-info { padding: 15px; background: #f8f9fa; border-radius: 8px; text-align: center; color: #666; font-size: 13px; line-height: 1.5; } .modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 20px 25px; border-top: 1px solid #e0e0e0; background: #f8f9fa; border-radius: 0 0 12px 12px; } .modal-footer .btn-cancel { padding: 10px 20px; border: 1px solid #ddd; background: white; border-radius: 6px; font-size: 14px; cursor: pointer; transition: all 0.2s; } .modal-footer .btn-cancel:hover { background: #f0f0f0; } .modal-footer .btn-submit { padding: 10px 25px; border: none; background: linear-gradient(135deg, var(--couleur-principale) 0%, var(--couleur-principale-fonce) 100%); color: white; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .modal-footer .btn-submit:hover { background: linear-gradient(135deg, var(--couleur-principale-hover) 0%, var(--couleur-principale-fonce) 100%); transform: translateY(-1px); } /* ============================================ MODAL COURRIER V5 - MESSAGERIE ============================================ */ .modale-close { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: white; opacity: 0.8; font-size: 24px; background: none; border: none; cursor: pointer; line-height: 1; padding: 0; text-shadow: none; } .modale-close:hover { opacity: 1; color: white; } #modal_courrier .modal-dialog { max-width: 520px; overflow-x: hidden; } #modal_courrier .modal-body { padding: 20px 25px; overflow-x: hidden; } /* En-tête destinataire : même style que courrier.cgi */ #modal_courrier .modal-courrier-header { display: flex; align-items: center; gap: 12px; padding: 12px 0 16px 0; margin-bottom: 18px; } /* Forcer l'avatar en rond (l'image chargée via .load() peut avoir ses propres styles) */ #modal_courrier #image img { width: 50px !important; height: 50px !important; border-radius: 50% !important; object-fit: cover !important; display: block !important; } #modal_courrier #ann_bloc_photo { border:none; } #modal_courrier textarea.form-control { resize: vertical; min-height: 120px; } #modal_courrier .modal-footer .btn-submit .glyphicon { margin-right: 5px; font-size: 13px; } /* Message d'erreur inline */ .modal-courrier-error { padding: 10px 14px; margin-bottom: 14px; background: #fff0f3; border: 1px solid #f5c6cb; border-radius: 8px; color: #c0392b; font-size: 14px; } .modal-courrier-error .glyphicon { margin-right: 6px; } #modal_courrier .courrier-bot-info { display: flex; align-items: center; padding: 15px; background: #fff5f7; border-radius: 10px; margin-bottom: 15px; border: 1px solid #fce4ec; } #modal_courrier .courrier-bot-question { padding: 10px 15px; background: #f8f9fa; border-radius: 8px; margin-bottom: 15px; font-size: 14px; } #modal_courrier .courrier-bot-buttons { display: flex; justify-content: center; gap: 12px; margin-bottom: 10px; } #modal_courrier .courrier-bot-buttons .btn-cancel, #modal_courrier .courrier-bot-buttons .btn-submit { padding: 8px 20px; border-radius: 6px; font-size: 14px; cursor: pointer; } /* ============================================ AGENDA V5 - PAGE AGENDA ============================================ */ /* Conteneur principal agenda */ #agenda, #agenda_container { padding: 20px 10px; max-width: 1200px; margin: 0 auto; width: 100%; } /* Info explicative sous les onglets */ .agenda-info-text { display: flex; align-items: center; gap: 12px; padding: 15px 20px; margin: 20px 15px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 10px; color: #555; font-size: 14px; line-height: 1.5; } .agenda-info-text .glyphicon { font-size: 18px; color: var(--couleur-principale); flex-shrink: 0; } /* Message d'erreur agenda */ .agenda-error-message { padding: 12px 15px; margin: 15px 15px; background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%); color: white; border-radius: 8px; font-size: 14px; display: flex; align-items: center; gap: 15px; box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3); } .agenda-error-message .glyphicon { font-size: 18px; } /* Message de succès agenda (apres ajout PRG) */ .agenda-success-message { padding: 12px 15px; margin: 15px 15px; background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%); color: white; border-radius: 8px; font-size: 14px; display: flex; align-items: center; gap: 15px; box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3); } .agenda-success-message .glyphicon { font-size: 18px; } /* Section liste existante */ .agenda-list-section { margin: 20px 15px; } .agenda-list-title { font-size: 18px; font-weight: 700; color: #333; margin: 0 0 18px 0; padding: 15px 20px; background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%); border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); display: flex; align-items: center; } .agenda-list-title .glyphicon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: linear-gradient(135deg, var(--couleur-principale) 0%, var(--couleur-principale-fonce) 100%); color: white; border-radius: 8px; margin-right: 12px; font-size: 14px; box-shadow: 0 2px 6px rgba(var(--couleur-principale-rgb), 0.3); } /* Items de la liste */ .agenda-list { display: flex; flex-direction: column; gap: 10px; } .agenda-item { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; background: white; border: 1px solid #e8e8e8; border-radius: 10px; transition: all 0.2s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .agenda-item:hover { border-color: var(--couleur-principale); box-shadow: 0 3px 10px rgba(var(--couleur-principale-rgb), 0.1); transform: translateY(-1px); } .agenda-item-info { flex: 1; min-width: 0; } .agenda-item-date { font-size: 14px; color: #333; font-weight: 500; margin-bottom: 4px; } .agenda-item-date .glyphicon { color: var(--couleur-principale); margin-right: 6px; font-size: 12px; } .agenda-item-delai { color: #888; font-size: 12px; font-weight: 400; } .agenda-item-location { font-size: 13px; color: #666; } .agenda-item-location .glyphicon { color: #999; margin-right: 6px; font-size: 11px; } .agenda-item-title { font-size: 13px; color: #666; } .agenda-item-title .glyphicon { color: #999; margin-right: 6px; font-size: 11px; } .agenda-item-delete { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--couleur-delete) 0%, #c0392b 100%); color: white; text-decoration: none; transition: all 0.2s ease; flex-shrink: 0; margin-left: 15px; box-shadow: 0 2px 6px rgba(231, 76, 60, 0.3); } .agenda-item-delete:hover { background: linear-gradient(135deg, #c0392b 0%, #a93226 100%); transform: scale(1.1); color: white; text-decoration: none; box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4); } .agenda-item-delete .glyphicon { font-size: 14px; } /* ============================================ FORMULAIRE AGENDA ============================================ */ .agenda-form-section { margin: 25px 15px; } .agenda-form-title { font-size: 18px; font-weight: 700; color: #333; margin: 0 0 20px 0; padding: 15px 20px; background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%); border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); display: flex; align-items: center; } .agenda-form-title .glyphicon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: linear-gradient(135deg, var(--couleur-principale) 0%, var(--couleur-principale-fonce) 100%); color: white; border-radius: 8px; margin-right: 12px; font-size: 14px; box-shadow: 0 2px 6px rgba(var(--couleur-principale-rgb), 0.3); } .agenda-form-body { padding: 25px; background: white; border: 1px solid #e8e8e8; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } .agenda-form-body .form-group { margin-bottom: 20px; position: relative; } .agenda-form-body .form-group label { display: block; font-weight: 600; color: #333; margin-bottom: 8px; font-size: 14px; } .agenda-form-body .form-control { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; } .agenda-form-body .form-control-nbr { width: 70px; } .agenda-form-body .form-control:focus { outline: none; border-color: var(--couleur-principale); box-shadow: 0 0 0 3px rgba(var(--couleur-principale-rgb), 0.1); } .agenda-form-body textarea.form-control { resize: vertical; min-height: 80px; } .agenda-form-body select.menu_txt { width: 100%; padding: 12px 15px; padding-right: 40px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; background: white; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; appearance: none; -webkit-appearance: none; -moz-appearance: none; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; cursor: pointer; } .agenda-form-body select.menu_txt:focus { outline: none; border-color: var(--couleur-principale); box-shadow: 0 0 0 3px rgba(var(--couleur-principale-rgb), 0.1); } /* Input number pour les nombres */ .agenda-form-body input[type="number"] { -moz-appearance: textfield; } .agenda-form-body input[type="number"]::-webkit-inner-spin-button, .agenda-form-body input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* Bootstrap select dans l'agenda */ #agenda_container .bootstrap-select .dropdown-toggle .caret { right: 12px !important; } /* Lignes de formulaire côte à côte */ .form-row { display: flex; gap: 15px; margin-bottom: 0; } .form-group-half { flex: 1; } .form-row-thirds { display: flex; gap: 15px; } .form-row-thirds .form-group { flex: 1; } /* Groupe delai */ .delai-group { display: flex; align-items: center; gap: 10px; } .delai-group select.menu_txt { width: auto; min-width: 80px; } .delai-text { color: #666; font-size: 14px; } /* Groupe gratuit */ .gratuit-group { display: flex; flex-direction: column; gap: 10px; } .gratuit-group select.menu_txt { width: auto; min-width: 120px; } /* Tarifs */ .tarif-input { display: flex; align-items: center; gap: 8px; } .tarif-input .form-control { width: 80px; text-align: center; } .tarif-euro { font-weight: 600; color: #666; font-size: 16px; } /* Info texte */ .form-info-text { padding: 12px 15px; margin-bottom: 20px; background: #f8f9fa; border-radius: 8px; color: #666; font-size: 13px; line-height: 1.5; } /* Checkbox inline dans formulaire agenda */ .agenda-form-body .checkbox-group { display: flex; gap: 20px; flex-wrap: wrap; } .agenda-form-body .checkbox-inline { display: flex; align-items: center; gap: 8px; } .agenda-form-body .checkbox-inline input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--couleur-principale); flex-shrink: 0; cursor: pointer; } .agenda-form-body .checkbox-inline label { margin: 0; font-weight: 400; font-size: 13px; color: #555; cursor: pointer; user-select: none; } /* Bouton submit */ .form-actions { margin-top: 25px; display: flex; justify-content: flex-end; } .agenda-form-body .btn-submit { padding: 12px 30px; background: linear-gradient(135deg, var(--couleur-principale) 0%, var(--couleur-principale-fonce) 100%); color: white; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 3px 10px rgba(var(--couleur-principale-rgb), 0.3); } .agenda-form-body .btn-submit:hover { background: linear-gradient(135deg, var(--couleur-principale-hover) 0%, var(--couleur-principale-fonce) 100%); box-shadow: 0 5px 15px rgba(var(--couleur-principale-rgb), 0.4); transform: translateY(-1px); } .agenda-form-body .btn-submit .glyphicon { margin-right: 8px; } /* Datepicker styling dans le formulaire */ .agenda-form-body .form-group .dateinput { width: 100%; } /* ============================================ DATEPICKER MODERNE POUR AGENDA ============================================ */ /* Modernisation du calendrier (global) */ body #calroot { background: white !important; border: 1px solid #e0e0e0 !important; border-radius: 12px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important; padding: 15px !important; width: 300px !important; height: auto !important; margin: 8px 0 0 0 !important; z-index: 1000 !important; } /* Header du calendrier */ body #calhead { padding: 8px 0 12px 0 !important; height: auto !important; display: flex !important; align-items: center !important; justify-content: space-between !important; } body #caltitle { font-size: 16px !important; font-weight: 600 !important; color: #333 !important; width: auto !important; flex: 1 !important; text-align: center !important; line-height: 28px !important; text-shadow: none !important; float: none !important; } /* Boutons prev/next - masquer les anciennes images */ body #calprev, body #calnext { width: 32px !important; height: 32px !important; border-radius: 50% !important; background: #f8f9fa !important; background-image: none !important; border: 1px solid #e0e0e0 !important; transition: all 0.2s ease !important; margin: 0 !important; position: relative !important; float: none !important; flex-shrink: 0 !important; } body #calprev { order: 1 !important; } body #caltitle { order: 2 !important; } body #calnext { order: 3 !important; } body #calprev::after, body #calnext::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; border-style: solid; } body #calprev::after { border-width: 5px 7px 5px 0; border-color: transparent #666 transparent transparent; margin-left: -2px; } body #calnext::after { border-width: 5px 0 5px 7px; border-color: transparent transparent transparent #666; margin-left: 2px; } body #calprev:hover, body #calnext:hover { background: linear-gradient(135deg, var(--couleur-principale) 0%, var(--couleur-principale-fonce) 100%) !important; border-color: var(--couleur-principale) !important; } body #calprev:hover::after { border-color: transparent white transparent transparent !important; } body #calnext:hover::after { border-color: transparent transparent transparent white !important; } /* Jours de la semaine */ body #caldays { height: auto !important; border-bottom: 1px solid #f0f0f0 !important; margin-bottom: 8px !important; } body #caldays span { width: 36px !important; font-size: 11px !important; font-weight: 600 !important; color: #999 !important; text-transform: uppercase !important; line-height: 20px !important; } /* Semaines */ body #calweeks { background: transparent !important; margin-top: 0 !important; } body .calweek { height: 36px !important; margin-bottom: 2px !important; } /* Jours */ body .calweek a { width: 36px !important; height: 34px !important; line-height: 34px !important; font-size: 13px !important; font-weight: 500 !important; color: #333 !important; border-radius: 8px !important; margin: 0 1px !important; transition: all 0.2s ease !important; } body .calweek a:hover, body .calfocus { background: linear-gradient(135deg, #fff5f8 0%, #ffe8ef 100%) !important; color: var(--couleur-principale) !important; } /* Dimanche */ body a.calsun { color: #e74c3c !important; } /* Jour hors mois */ body a.caloff { color: #ccc !important; } body a.caloff:hover { background: #f8f9fa !important; color: #999 !important; } /* Jour désactivé */ body a.caldisabled { background: transparent !important; color: #ddd !important; cursor: not-allowed !important; transform: none !important; } /* Date sélectionnée */ body #calcurrent { background: linear-gradient(135deg, var(--couleur-principale) 0%, var(--couleur-principale-fonce) 100%) !important; color: white !important; font-weight: 700 !important; box-shadow: 0 2px 8px rgba(var(--couleur-principale-rgb), 0.4) !important; } body #calcurrent:hover { background: linear-gradient(135deg, var(--couleur-principale-hover) 0%, var(--couleur-principale-fonce) 100%) !important; } /* Aujourd'hui */ body #caltoday { background: #f0f0f0 !important; color: #333 !important; font-weight: 600 !important; } /* Anciennes modales custom (confirm/info) supprimées - remplacées par modale-* centralisée */ /* Compteur de caractères */ .char-counter { margin-top: 5px; font-size: 13px; color: #666; text-align: right; } /* ================================================== COURRIER V5 - Liste de messages ================================================== */ #courrier_container { padding: 10px 0px 0px 0px; max-width: 1200px; margin: 0 auto; width: 100%; } .courrier-list { background: white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); overflow: hidden; } .courrier-item { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; transition: background 0.15s ease; } .courrier-item:last-child { border-bottom: none; } .courrier-item:hover { background: #fafafa; } .courrier-item-link { display: flex; align-items: center; flex: 1; text-decoration: none; color: inherit; min-width: 0; } .courrier-item-link:hover, .courrier-item-link:focus, .courrier-item-link:active { text-decoration: none; color: inherit; } /* Avatar rond */ .courrier-avatar { position: relative; flex-shrink: 0; width: 50px; height: 50px; margin-right: 14px; } .courrier-avatar-img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; background-color: #e0e0e0; display: block; } /* Point vert en ligne */ .courrier-online-dot { position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #2ef788; border-radius: 50%; border: 2px solid white; } /* Info pseudo + date */ .courrier-info { flex: 1; display: flex; align-items: center; justify-content: space-between; min-width: 0; gap: 10px; } .courrier-pseudo { font-size: 15px; font-weight: 400; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .courrier-date { font-size: 13px; color: #999; white-space: nowrap; flex-shrink: 0; } /* Point rose non lu */ .courrier-unread-dot { width: 10px; height: 10px; background: var(--couleur-principale); border-radius: 50%; flex-shrink: 0; margin-left: 10px; } /* Style non lu : pseudo en gras */ .courrier-unread .courrier-pseudo { font-weight: 700; color: #333; } .courrier-unread .courrier-date { color: #555; font-weight: 500; } /* Bouton supprimer */ .courrier-item-delete { color: #ccc; text-decoration: none; padding: 8px; margin-left: 8px; border-radius: 4px; transition: all 0.2s ease; flex-shrink: 0; font-size: 14px; } .courrier-item-delete:hover { background: rgba(217, 83, 79, 0.1); color: #d9534f; text-decoration: none; } .courrier-item-delete:active, .courrier-item-delete:focus { text-decoration: none; outline: none; } /* Spinner de chargement */ .courrier-loading { display: none; text-align: center; padding: 20px; } .courrier-spinner { display: inline-block; width: 30px; height: 30px; border: 3px solid #f0f0f0; border-top: 3px solid var(--couleur-principale); border-radius: 50%; animation: courrier-spin 0.8s linear infinite; } @keyframes courrier-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* État vide */ .courrier-empty { text-align: center; padding: 40px 20px; color: #999; font-size: 15px; } .courrier-empty .glyphicon { font-size: 40px; display: block; margin-bottom: 15px; color: #ddd; } /* Fin de liste */ .courrier-end { text-align: center; padding: 15px; color: #bbb; font-size: 13px; } /* Badge important (admin) */ .courrier-important-badge { color: #ffffff; background-color: var(--couleur-principale); border-radius: 10px; padding: 0px 6px; text-transform: capitalize; font-size: 11px; margin-right: 6px; } /* Photo vide - avatar par type */ .courrier-avatar-vide { width: 50px; height: 50px; border-radius: 50%; background-position: center center; background-repeat: no-repeat; background-size: cover; background-color: #e0e0e0; } .courrier-avatar-vide.cpl { background-image: var(--url-img-vide-cpl); } .courrier-avatar-vide.h { background-image: var(--url-img-vide-h); } .courrier-avatar-vide.f { background-image: var(--url-img-vide-f); } .courrier-avatar-vide.trans { background-image: var(--url-img-vide-trans); } /* ================================================== COURRIER LECTURE V5 - Page de lecture/réponse ================================================== */ /* Header conversation */ .courrier-header { background: white; padding: 15px 10px; border-bottom: 1px solid #e0e0e0; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; } .courrier-header-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .courrier-back-btn { color: #666; font-size: 24px; text-decoration: none; transition: color 0.2s ease; flex-shrink: 0; } .courrier-back-btn:hover { color: var(--couleur-principale); text-decoration: none; } .courrier-header-avatar { position: relative; width: 50px; height: 50px; flex-shrink: 0; } .courrier-header-avatar img, .courrier-header-avatar .courrier-avatar-vide { width: 50px; height: 50px; border-radius: 50%; cursor: pointer; } .courrier-header-info { flex: 1; min-width: 0; } .courrier-header-pseudo { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 2px; } .courrier-header-pseudo a { color: #333; text-decoration: none; } .courrier-header-pseudo a:hover { color: var(--couleur-principale); text-decoration: none; } .courrier-header-type { font-size: 13px; color: #999; } .courrier-header-actions { display: flex; align-items: center; gap: 15px; flex-shrink: 0; } /* Coeur favoris dans header lecture - override ancien CSS */ .courrier-header #ann_contact { position: relative !important; top: auto !important; left: auto !important; width: 28px; height: 28px; cursor: pointer; background-position: center; background-size: 22px; } .courrier-action-icon { color: #999; font-size: 22px; transition: color 0.2s ease; text-decoration: none; line-height: 1; } .courrier-action-icon:hover { color: var(--couleur-principale); text-decoration: none; } #courrier .courrier-action-icon.online { color: #2ef788 !important; cursor: pointer; } #courrier .courrier-action-icon.online:hover { color: #25d670 !important; text-decoration: none !important; } #courrier .courrier-action-icon.offline { color: #ccc !important; cursor: not-allowed; opacity: 0.5; pointer-events: none; } #courrier .courrier-action-icon.offline:hover { color: #ccc !important; } /* Zone messages (bulles chat) */ .courrier-messages-container { background: #f5f5f5; padding: 20px 10px; min-height: 400px; max-height: 600px; overflow-y: auto; } .courrier-message { margin-bottom: 15px; display: flex; align-items: flex-start; } .courrier-message.user { justify-content: flex-end; } .courrier-message-avatar { width: 32px; height: 32px; border-radius: 50%; margin-right: 8px; margin-top: 3px; flex-shrink: 0; } /* Override size pour avatar vide dans les bulles */ .courrier-message-avatar.courrier-avatar-vide { width: 32px; height: 32px; } .courrier-message.user .courrier-message-avatar { display: none; } .courrier-message-content { max-width: 70%; } .courrier-message.user .courrier-message-content { align-items: flex-end; } .courrier-message-bubble { padding: 12px 16px; word-wrap: break-word; } .courrier-message.user .courrier-message-bubble { background: var(--message-bubble-user-bg); color: var(--message-bubble-user-color); border-radius: var(--message-bubble-user-radius); box-shadow: var(--message-bubble-shadow); } .courrier-message:not(.user) .courrier-message-bubble { background: var(--message-bubble-other-bg); color: var(--message-bubble-other-color); border-radius: var(--message-bubble-other-radius); box-shadow: var(--message-bubble-shadow); } .courrier-message-text { font-size: 14px; line-height: 1.4; color: #333; } .courrier-message.user .courrier-message-text { color: white; } .courrier-message-photos { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; } .courrier-message-photo { max-width: 200px; max-height: 200px; border-radius: 8px; cursor: pointer; transition: transform 0.2s ease; } .courrier-message-photo:hover { transform: scale(1.05); } .courrier-message-time { font-size: 11px; color: #999; margin-top: 4px; padding: 0 4px; } .courrier-message.user .courrier-message-time { text-align: right; } /* Formulaire de réponse */ .courrier-reply-form { background: white; border-top: 1px solid #e0e0e0; padding: 15px 10px; } .courrier-reply-textarea { width: 100%; border: 1px solid #e0e0e0; border-radius: 20px; padding: 12px 16px; font-size: 14px; resize: none; min-height: 80px; max-height: 200px; box-sizing: border-box; font-family: inherit; } .courrier-reply-textarea:focus { outline: none; border-color: var(--couleur-principale); box-shadow: 0 0 0 3px rgba(var(--couleur-principale-rgb), 0.1); } .courrier-reply-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; gap: 10px; } .courrier-file-input-wrapper { position: relative; flex-shrink: 0; } .courrier-file-input { position: absolute; opacity: 0; width: 0; height: 0; } .courrier-file-label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid #ddd; border-radius: 20px; font-size: 13px; color: #666; cursor: pointer; transition: all 0.2s ease; background: white; } .courrier-file-label:hover { background: #f8f8f8; border-color: #bbb; } .courrier-file-label.file-selected { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; } .courrier-file-label .glyphicon { font-size: 12px; } .courrier-send-btn { padding: 10px 28px; background: linear-gradient(135deg, var(--couleur-principale) 0%, var(--couleur-principale-fonce) 100%); color: white; border: none; border-radius: 20px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; } .courrier-send-btn:hover { background: linear-gradient(135deg, var(--couleur-principale-hover) 0%, var(--couleur-principale-fonce) 100%); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(var(--couleur-principale-rgb), 0.3); } .courrier-send-btn:active { transform: translateY(0); } .courrier-send-btn:disabled, .courrier-send-btn.btn-loading { opacity: 0.7; cursor: not-allowed; transform: none; } .courrier-send-btn .glyphicon { margin-right: 6px; } /* Animation spinner */ .spinning { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Message d'erreur validation */ .courrier-error-message { background: #fff3cd; border: 1px solid #ffc107; border-radius: 8px; padding: 12px 16px; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; color: #856404; } .courrier-error-message .glyphicon { font-size: 18px; color: #ffc107; } /* Admin: phrases rapides */ .courrier-phrases-admin { background: #f8f8f8; padding: 15px; border-radius: 0px 0px 8px 8px; margin-bottom: 15px; } .courrier-phrases-title { font-size: 13px; font-weight: 600; color: #666; margin-bottom: 10px; } .courrier-phrases-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .courrier-phrase-btn { padding: 6px 10px; background: white; border: 1px solid #ddd; border-radius: 6px; font-size: 12px; color: #555; cursor: pointer; transition: all 0.2s ease; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .courrier-phrase-btn:hover { background: var(--couleur-principale); color: white; border-color: var(--couleur-principale); } .courrier-phrases-edit { margin-top: 10px; text-align: center; } .courrier-phrases-edit a { font-size: 12px; color: #999; text-decoration: underline; } .courrier-phrases-edit a:hover { color: var(--couleur-principale); } /* Admin: chatbot */ .courrier-chatbot { background: #fff; padding: 15px; } .courrier-chatbot-title { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 10px; } .courrier-chatbot-content { font-size: 13px; line-height: 1.5; color: #555; background: #f8f8f8; padding: 10px; border-radius: 6px; margin-bottom: 8px; } .courrier-chatbot-actions { display: flex; gap: 15px; font-size: 13px; } .courrier-chatbot-action { color: #999; cursor: pointer; transition: color 0.2s ease; } .courrier-chatbot-action:hover { color: var(--couleur-principale); } .courrier-chatbot-debug { margin-top: 10px; padding: 10px; background: #f0f0f0; border-radius: 6px; font-size: 12px; color: #666; display: none; } .courrier-chatbot-debug.show { display: block; } /* Admin: boutons actions */ .courrier-admin-actions { background: #ffffff; padding: 10px 15px; display: flex; gap: 10px; flex-wrap: wrap; } /* Admin: ligne avec boutons alignés à gauche */ .courrier-admin-row { display: flex; justify-content: flex-start; align-items: center; width: 100%; gap: 10px; } /* Bouton admin standard (Non lu, Transferts...) */ .courrier-admin-btn { padding: 8px 16px; background: white; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; color: #555; cursor: pointer; transition: all 0.2s ease; text-decoration: none !important; display: inline-block; } .courrier-admin-btn:hover, .courrier-admin-btn:active, .courrier-admin-btn:focus { background: #f0f0f0; color: #333; border-color: #bbb; text-decoration: none !important; outline: none; } /* Bouton Fiche Admin : couleur admin violet */ #courrier .courrier-admin-btn.btn-fiche-admin { background: var(--couleur-admin); color: white !important; border-color: var(--couleur-admin); text-decoration: none !important; } #courrier .courrier-admin-btn.btn-fiche-admin:hover, #courrier .courrier-admin-btn.btn-fiche-admin:active, #courrier .courrier-admin-btn.btn-fiche-admin:focus { background: var(--couleur-admin-hover); border-color: var(--couleur-admin-hover); color: white !important; text-decoration: none !important; outline: none; } /* Container principal lecture (utilise #conteneur_basic + #courrier existants) */ #courrier .courrier-header { border-radius: 0; } #courrier .courrier-messages-container { background: #f5f5f5; } #courrier .courrier-reply-form { background: white; } /* Le form ne doit pas ajouter de padding/margin supplémentaire */ #courrier form { margin: 0; padding: 0; } /* ================================================== HISTO CHAT V5 - Historique des conversations ================================================== */ .histo-chat-list { background: white; border-radius: 12px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); overflow: hidden; margin-top: 10px; } .histo-chat-item { border-bottom: 1px solid #f0f0f0; transition: background 0.15s ease; } .histo-chat-item:last-child { border-bottom: none; } .histo-chat-item:hover { background: #fafafa; } .histo-chat-card { display: flex; align-items: center; padding: 14px 16px; gap: 14px; } .histo-chat-card .courrier-header-avatar { cursor: pointer; flex-shrink: 0; width: 50px; height: 50px; } .histo-chat-card .courrier-header-avatar img, .histo-chat-card .courrier-header-avatar .courrier-avatar-vide { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; } .histo-chat-card .courrier-header-info { flex: 1; min-width: 0; } .histo-chat-card .courrier-header-pseudo { font-size: 15px; font-weight: 600; } .histo-chat-card .courrier-header-pseudo a { color: #333; text-decoration: none; } .histo-chat-card .courrier-header-pseudo a:hover { color: var(--couleur-principale); text-decoration: none; } .histo-chat-card .courrier-header-type { font-size: 13px; color: #888; margin-top: 2px; } .histo-chat-date { font-size: 13px; color: #999; white-space: nowrap; flex-shrink: 0; } .histo-chat-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .histo-chat-btn-conv { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; background: var(--couleur-principale); color: white; border: none; border-radius: 20px; font-size: 13px; cursor: pointer; transition: background 0.2s ease; white-space: nowrap; text-decoration: none; } .histo-chat-btn-conv:hover { background: var(--couleur-principale-hover); text-decoration: none; } .histo-chat-btn-conv:focus, .histo-chat-btn-conv:active { outline: none; text-decoration: none; } /* Zone de conversation depliable */ .histo-chat-conv { border-top: 1px solid #f0f0f0; max-height: 300px; overflow-y: auto; padding: 0; } .histo-chat-conv:not(:empty) { padding: 12px 16px; } .histo-chat-loading { text-align: center; padding: 20px; color: #999; font-size: 14px; } .histo-chat-loading .glyphicon { font-size: 16px; margin-right: 6px; } .histo-chat-empty { text-align: center; padding: 40px 20px; color: #999; font-size: 15px; } /* Messages dans la conversation */ .histo-msg { padding: 12px 16px; margin-bottom: 8px; border-radius: 18px; font-size: 14px; line-height: 1.4; max-width: 85%; word-wrap: break-word; box-shadow: var(--message-bubble-shadow); } .histo-msg-user { background: var(--message-bubble-user-bg); color: var(--message-bubble-user-color); margin-left: auto; text-align: right; border-radius: var(--message-bubble-user-radius); } .histo-msg-user a { color: var(--message-bubble-user-color); } .histo-msg-user .histo-msg-time { color: rgba(255, 255, 255, 0.7); } .histo-msg-pseudo { background: var(--message-bubble-other-bg); color: var(--message-bubble-other-color); margin-right: auto; border-radius: var(--message-bubble-other-radius); } .histo-msg-time { font-size: 11px; color: #999; margin-bottom: 4px; } .histo-msg-photo-blocked { font-size: 12px; color: #c0392b; font-style: italic; } /* Responsive */ @media (max-width: 768px) { .histo-chat-card { padding: 10px 12px; gap: 10px; } .histo-chat-card .courrier-header-avatar { width: 40px; height: 40px; } .histo-chat-card .courrier-header-avatar img, .histo-chat-card .courrier-header-avatar .courrier-avatar-vide { width: 40px; height: 40px; } .histo-chat-btn-conv { padding: 5px 10px; font-size: 12px; } .histo-chat-btn-conv .btn-conv-text { display: none; } .histo-chat-date { display: none; } } /* ============================================== */ /* STATISTIQUES V5 */ /* ============================================== */ /* Badge compteur dans les onglets (fond blanc, texte rose) */ .header-tab-badge { display: inline-flex; align-items: center; justify-content: center; background: #fff !important; color: var(--couleur-principale) !important; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; margin-left: 6px; line-height: 1; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } /* Badge sur onglet actif : inverser les couleurs */ .header-tab.active .header-tab-badge { background: var(--couleur-principale) !important; color: #fff !important; } /* Date overlay sur les cards mosaique (statistiques) */ #bloc_liste_annonce .mosaique-date { position: absolute; bottom: 8px; left: 8px; background: rgba(0, 0, 0, 0.2); color: #fff; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; z-index: 11; text-shadow: none; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* Message "aucun résultat" style V5 */ .stats-no-results { text-align: center; padding: 60px 20px; color: #999; width: 100%; } .stats-no-results .glyphicon { font-size: 48px; color: #ddd; display: block; margin-bottom: 15px; } .stats-no-results p { font-size: 16px; color: #888; margin: 0; } /* ============================================== */ /* CONTACTS V5 (listecontacts.cgi) */ /* Style liste (inspiré courrier-v5) */ /* ============================================== */ #contacts_container { padding: 10px 0px 0px 0px; max-width: 1200px; margin: 0 auto; width: 100%; } #listecontacts { background-color: #faf9f8; border-radius: 5px 5px 0px 0px; } /* Container liste */ .contact-list { background: white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); overflow: hidden; } /* Ligne contact */ .contact-item { display: flex; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; transition: background 0.15s ease; } .contact-item:last-child { border-bottom: none; } .contact-item:hover { background: #fafafa; } /* Lien cliquable (avatar + infos) */ .contact-item-link { display: flex; align-items: flex-start; flex: 1; text-decoration: none; color: inherit; min-width: 0; } .contact-item-link:hover, .contact-item-link:focus, .contact-item-link:active { text-decoration: none; color: inherit; } /* Avatar rond 50px */ .contact-avatar { position: relative; flex-shrink: 0; width: 50px; height: 50px; margin-right: 14px; } .contact-avatar-img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; background-color: #e0e0e0; display: block; } /* Avatar vide (pas de photo) - images par type */ .contact-avatar-vide { width: 50px; height: 50px; border-radius: 50%; background-color: #f0f0f0; background-size: cover; background-position: center center; background-repeat: no-repeat; display: block; } .contact-avatar-vide.h { background-image: var(--url-img-vide-h); } .contact-avatar-vide.f { background-image: var(--url-img-vide-f); } .contact-avatar-vide.cpl { background-image: var(--url-img-vide-cpl); } .contact-avatar-vide.trans, .contact-avatar-vide.tr { background-image: var(--url-img-vide-trans); } /* Point vert en ligne */ .contact-online-dot { position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #2ef788; border-radius: 50%; border: 2px solid white; } /* Zone info (pseudo + badges + note) */ .contact-info { flex: 1; min-width: 0; padding-top: 2px; } /* Ligne du haut : pseudo + badges */ .contact-info-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; } /* Pseudo */ .contact-pseudo { font-weight: 600; font-size: 14px; color: #333; } /* Badge type (Homme, Femme, Couple) */ .contact-type-badge { font-size: 11px; color: #999; font-weight: 400; } /* Badges d'activité */ .contact-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; line-height: 1.4; white-space: nowrap; } .contact-badge-libresoir { background: #fff3cd; color: #856404; } .contact-badge-soiree { background: #e8daef; color: #6c3483; } .contact-badge-dm { background: #d4efdf; color: #1e8449; } /* Note personnelle (2-3 lignes max avec troncature) */ .contact-note { font-size: 12px; color: #666; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .contact-note-empty { font-style: italic; color: #bbb; -webkit-line-clamp: 1; } /* Bouton supprimer (à droite) */ .contact-item-delete { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: 12px; margin-top: 7px; border-radius: 50%; color: #ccc !important; text-decoration: none !important; transition: all 0.2s ease; cursor: pointer; } .contact-item-delete:hover { background: rgba(220, 53, 69, 0.1); color: #dc3545 !important; text-decoration: none !important; } .contact-item-delete .glyphicon { font-size: 14px; line-height: 1; } /* Message aucun contact */ .contacts-no-results { text-align: center; padding: 60px 20px; color: #999; width: 100%; } .contacts-no-results .glyphicon { font-size: 48px; color: #ddd; display: block; margin-bottom: 15px; } .contacts-no-results p { font-size: 16px; color: #888; margin: 5px 0; } .contacts-no-results-sub { font-size: 13px !important; color: #aaa !important; } /* ========================================== */ /* Commentaires / Recommandations V5 */ /* ========================================== */ .comment-card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .comment-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; } .comment-card-left { display: flex; align-items: flex-start; flex: 1; min-width: 0; } .comment-card-avatar { width: 48px; height: 48px; flex-shrink: 0; margin-right: 12px; } .comment-card-avatar img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .comment-card-avatar-vide { width: 48px; height: 48px; border-radius: 50%; background-color: #f0f0f0; background-size: 60%; background-position: center; background-repeat: no-repeat; } .comment-card-avatar-vide.h { background-image: var(--url-img-vide-h); } .comment-card-avatar-vide.f { background-image: var(--url-img-vide-f); } .comment-card-avatar-vide.cpl { background-image: var(--url-img-vide-cpl); } .comment-card-avatar-vide.trans, .comment-card-avatar-vide.tr { background-image: var(--url-img-vide-trans); } .comment-card-info { display: flex; flex-direction: column; min-width: 0; } .comment-card-pseudo { font-weight: 600; font-size: 14px; color: #333; } .comment-card-pseudo a { color: #333; text-decoration: none; } .comment-card-pseudo a:hover { color: var(--couleur-principale); text-decoration: none; } .comment-card-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; font-weight: 500; } .comment-card-badge-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .comment-card-badge-attente .comment-card-badge-dot { background-color: #ffc107; } .comment-card-badge-attente { color: #856404; background: #fff3cd; padding: 2px 8px; border-radius: 12px; } .comment-card-badge-valide .comment-card-badge-dot { background-color: #28a745; } .comment-card-badge-valide { color: #155724; background: #d4edda; padding: 2px 8px; border-radius: 12px; } .comment-card-date { font-size: 12px; color: #999; white-space: nowrap; margin-left: 10px; flex-shrink: 0; } .comment-card-texte { font-size: 14px; line-height: 1.5; color: #333; margin-bottom: 12px; word-wrap: break-word; } .comment-card-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; } .comment-card-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; border: none; cursor: pointer; text-decoration: none; transition: background 0.2s; } .comment-card-btn:hover { text-decoration: none; } .comment-card-btn-valider { background: #28a745; color: #fff; } .comment-card-btn-valider:hover { background: #218838; color: #fff; } .comment-card-btn-supprimer { background: transparent; color: #dc3545; border: 1px solid #dc3545; } .comment-card-btn-supprimer:hover { background: rgba(220, 53, 69, 0.1); color: #dc3545; } .comment-card-btn-supprimer-discret { background: transparent; color: #999; padding: 5px 10px; font-size: 12px; } .comment-card-btn-supprimer-discret:hover { color: #dc3545; } /* Spinner de chargement (animation rotation) */ @keyframes spinning { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spinning { animation: spinning 1s linear infinite; } /* Popup de bienvenue (1ere arrivee V5) - carte marketing. Couleur de fond = couleur principale du site (var --couleur-principale), donc chaque site (entrecoquins, distingay...) prend automatiquement sa teinte via son theme. */ .popup-bienvenue-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.55); z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 16px; } .popup-bienvenue-card { position: relative; background: var(--couleur-principale, #eb406d); color: #fff; width: 100%; max-width: 420px; border-radius: 16px; padding: 30px 28px 24px; text-align: center; box-shadow: 0 12px 45px rgba(0, 0, 0, 0.35); } .popup-bienvenue-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: #fff; font-size: 24px; line-height: 1; opacity: 0.85; cursor: pointer; padding: 0; } .popup-bienvenue-close:hover { opacity: 1; } .popup-bienvenue-titre { margin: 4px 0 14px; font-size: 21px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: #fff; } .popup-bienvenue-texte { margin: 0 0 22px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.95); } .popup-bienvenue-cta { display: block; width: 100%; background: #fff; color: var(--couleur-principale, #eb406d); border: none; border-radius: 30px; padding: 13px 18px; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform 0.08s ease, box-shadow 0.15s ease; margin: 14px 0px; } .popup-bienvenue-cta:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); transform: translateY(-1px); } .popup-bienvenue-v4, .popup-bienvenue-skip { display: block; margin-top: 14px; font-size: 12px; color: rgba(255, 255, 255, 0.9); text-decoration: underline; cursor: pointer; } .popup-bienvenue-v4:hover, .popup-bienvenue-skip:hover { color: #fff; } .popup-bienvenue-skip { margin-top: 8px; font-size: 11px; color: rgba(255, 255, 255, 0.75); } /* Modale de confirmation V5 */ .modale-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 9999; display: flex; align-items: center; justify-content: center; } .modale-content { background: #fff; border-radius: 12px; width: 90%; max-width: 400px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); overflow: hidden; } .modale-header { background: var(--couleur-principale); color: #fff; padding: 15px 20px; font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; } .modale-header h3 { margin: 0; font-size: 18px; font-weight: 600; color: #fff; } .modale-fermer { cursor: pointer; font-size: 24px; line-height: 1; color: #fff; opacity: 0.8; padding: 0 4px; flex-shrink: 0; } .modale-fermer:hover { opacity: 1; } .modale-header .glyphicon { margin-right: 8px; } /* Warning modale: force un "!" lisible, independant de la fonte icone */ .modale-header .modale-warning-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: 8px; color: #fff !important; font-size: 35px !important; line-height: 1; vertical-align: middle; } .modale-header .modale-warning-icon::after { content: '!'; position: absolute; left: 50%; top: 64%; transform: translate(-50%, -52%); font-family: Arial, sans-serif; font-size: 11px; font-weight: 900; line-height: 1; color: #fff; pointer-events: none; } .modale-body { padding: 25px 20px; font-size: 14px; color: #555; text-align: center; } .modale-footer { padding: 15px 20px; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid #eee; } .modale-btn { padding: 8px 20px; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .modale-btn-cancel { background: #f0f0f0; color: #666; } .modale-btn-cancel:hover { background: #e0e0e0; } .modale-btn-confirm { background: #dc3545; color: #fff; } .modale-btn-confirm:hover { background: #c82333; } .modale-btn-valider { background: var(--couleur-principale); color: #fff; } .modale-btn-valider:hover { background: var(--couleur-principale-hover); } /* Variantes header modale generique */ .modale-header-error { background: #dc3545 !important; } .modale-header-warning { background: #e67e22 !important; } /* Bouton OK (style principal) pour modale alert */ .modale-header-error + .modale-body + .modale-footer .modale-btn-confirm { background: var(--couleur-principale); } .modale-header-error + .modale-body + .modale-footer .modale-btn-confirm:hover { background: var(--couleur-principale-hover); } /* Bouton Confirmer pour modale warning */ .modale-header-warning + .modale-body + .modale-footer .modale-btn-confirm { background: #e67e22; } .modale-header-warning + .modale-body + .modale-footer .modale-btn-confirm:hover { background: #cf6d17; } /* Modale formulaire V5 */ .modale-form-group { margin-bottom: 15px; text-align: left; } .modale-label { display: block; margin-bottom: 6px; font-size: 14px; color: #555; } .modale-textarea { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; resize: vertical; transition: border-color 0.2s; box-sizing: border-box; } .modale-textarea:focus { border-color: var(--couleur-principale); outline: none; box-shadow: 0 0 0 3px rgba(var(--couleur-principale-rgb), 0.1); } .modale-radio-group { text-align: left; } .modale-radio { display: block; padding: 8px 0; font-size: 14px; color: #555; cursor: pointer; } .modale-radio input[type="radio"] { margin-right: 8px; accent-color: var(--couleur-principale); } .modale-body .modale-form-group:last-child { margin-bottom: 0; } /* ================================ MODERATEURS V5 ================================ */ #moderateur_liste { background: #f8f8f8; } #mod_container { max-width: 700px; margin: 0 auto; padding: 20px 10px; } /* Info box */ .mod-info { background: white; border-radius: 10px; padding: 14px 18px; margin-bottom: 20px; color: #666; font-size: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); line-height: 1.5; } .mod-info .glyphicon { color: var(--couleur-principale); margin-right: 8px; } /* Liste des modérateurs */ .mod-list { background: white; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; } /* Item modérateur */ .mod-item { display: flex; align-items: center; padding: 12px 18px; border-bottom: 1px solid #eee; gap: 12px; transition: background 0.15s; } .mod-item:last-child { border-bottom: none; } .mod-item:hover { background: #fdf2f6; } /* Lien vers fiche profil (avatar + pseudo), comme contact-item-link */ .mod-item-link { display: flex; align-items: center; flex: 1; gap: 12px; text-decoration: none; color: inherit; min-width: 0; } .mod-item-link:hover, .mod-item-link:focus, .mod-item-link:active { text-decoration: none; color: inherit; } /* Avatar modérateur */ .mod-avatar { position: relative; width: 50px; height: 50px; flex-shrink: 0; display: block; } .mod-avatar-img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; } .mod-avatar-vide { width: 50px; height: 50px; border-radius: 50%; background-size: cover; background-position: center; } .mod-avatar-vide.h { background-image: var(--url-img-vide-h); } .mod-avatar-vide.f { background-image: var(--url-img-vide-f); } .mod-avatar-vide.cpl { background-image: var(--url-img-vide-cpl); } .mod-avatar-vide.trans { background-image: var(--url-img-vide-trans); } .mod-online-dot { position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4CAF50; border: 2px solid white; border-radius: 50%; } /* Bloc info (pseudo + rôle) */ .mod-info-block { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; } /* Pseudo */ a.mod-pseudo, a.mod-pseudo:hover, a.mod-pseudo:visited, a.mod-pseudo:active, .mod-item-link .mod-pseudo { font-weight: 600; font-size: 14px; color: var(--couleur-principale); text-decoration: none !important; } a.mod-pseudo:hover, .mod-item-link:hover .mod-pseudo { color: var(--couleur-principale-hover); } /* Role badge */ .mod-role { font-size: 12px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Actions (chat + courrier) - utilise event-action-btn existants */ .mod-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; } /* Taille réduite pour les boutons dans la liste modérateurs */ #moderateur_liste .event-action-btn { width: 36px; height: 36px; } #moderateur_liste .event-action-btn .glyphicon { font-size: 14px; } /* ================================ FAQ V5 ================================ */ #faq { background: #f8f8f8; border-radius: 5px 5px 0px 0px; } #faq_container { max-width: 900px; margin: 0 auto; padding: 20px 10px; } /* Sommaire */ .faq-sommaire { background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); margin-bottom: 30px; overflow: hidden; } .faq-sommaire-title { display: none; background: linear-gradient(135deg, var(--couleur-principale) 0%, var(--couleur-principale-fonce) 100%); color: white; padding: 15px 20px; font-size: 18px; font-weight: 600; } .faq-sommaire-title .glyphicon { margin-right: 8px; } .faq-sommaire-links { padding: 20px; display: flex; flex-wrap: wrap; gap: 10px; } .faq-sommaire-link { display: inline-block; padding: 8px 16px; background: #f8f8f8; border: 1px solid #e0e0e0; border-radius: 20px; color: #333; text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.2s ease; } .faq-sommaire-link:hover { background: var(--couleur-principale); color: white; border-color: var(--couleur-principale); text-decoration: none; transform: translateY(-2px); box-shadow: 0 2px 6px rgba(var(--couleur-principale-rgb), 0.3); } /* Catégories */ .faq-category { background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); margin-bottom: 30px; overflow: hidden; scroll-margin-top: 20px; /* Décalage pour le scroll vers ancres */ } .faq-category-header { background: #f8f8f8; border-bottom: 2px solid var(--couleur-principale); padding: 15px 20px; font-size: 20px; font-weight: 600; color: #333; } .faq-category-header .glyphicon { margin-right: 10px; color: var(--couleur-principale); } /* Items FAQ (question + réponse) */ .faq-item { border-bottom: 1px solid #e0e0e0; } .faq-item:last-child { border-bottom: none; } .faq-question { padding: 18px 20px; font-size: 15px; font-weight: 600; color: #333; cursor: pointer; display: flex; align-items: center; gap: 12px; transition: all 0.2s ease; user-select: none; } .faq-question:hover { background: #fef9fb; color: var(--couleur-principale); } .faq-icon { flex-shrink: 0; color: var(--couleur-principale); font-size: 12px; transition: transform 0.2s ease; } .faq-answer { max-height: 0; overflow: hidden; padding: 0 20px; background: #fafafa; color: #555; font-size: 14px; line-height: 1.6; } .faq-answer.open { max-height: 2000px; padding: 20px 20px 20px 52px; /* Aligné avec la question (icon 12px + gap 12px + padding 20px = 44px, arrondi à 52px pour marge) */ } .faq-answer p { margin-bottom: 12px; } .faq-answer p:last-child { margin-bottom: 0; } .faq-answer a { color: var(--couleur-principale); font-weight: 600; text-decoration: none; } .faq-answer a:hover { text-decoration: underline; } .faq-answer b { color: #333; font-weight: 600; } /* Animation icône chevron */ .faq-question:hover .faq-icon { transform: scale(1.2); } /* ================================ MODIFFICHE V5 ================================ */ #modiffiche { background: #f8f8f8; border-radius: 5px 5px 0px 0px; } #modiffiche_container { margin: 0 auto; padding: 20px 10px; } /* Card de section */ .modiffiche-card { background: white; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); padding: 20px 25px; margin-bottom: 20px; } .modiffiche-card .form-section-title { font-size: 11px; font-weight: 700; color: var(--couleur-principale); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0; } /* Champs */ .modiffiche-fields { display: flex; flex-direction: column; gap: 14px; } .modiffiche-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .modiffiche-field { display: flex; flex-direction: column; gap: 5px; } .modiffiche-field label { font-size: 13px; font-weight: 600; color: #555; } .modiffiche-field input[type="text"], .modiffiche-field input[type="password"] { border: 1px solid #e0e0e0; border-radius: 8px; padding: 9px 13px; font-size: 14px; color: #333; background: #fafafa; transition: border-color 0.2s, background 0.2s; width: 100%; box-sizing: border-box; } .modiffiche-field select { border: 1px solid #e0e0e0; border-radius: 8px; padding: 9px 13px; font-size: 14px; color: #333; background: #fafafa; transition: border-color 0.2s, background 0.2s; width: 100%; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; } .modiffiche-field textarea { border: 1px solid #e0e0e0; border-radius: 8px; padding: 9px 13px; font-size: 14px; color: #333; background: #fafafa; transition: border-color 0.2s, background 0.2s; width: 100%; box-sizing: border-box; } .modiffiche-field input[type="text"]:focus, .modiffiche-field input[type="password"]:focus { outline: none; border-color: var(--couleur-principale); background: white; } .modiffiche-field select:focus { outline: none; border-color: var(--couleur-principale); background-color: white; } .modiffiche-field textarea:focus { outline: none; border-color: var(--couleur-principale); background: white; } /* Grid 2 colonnes pour caractéristiques physiques */ .modiffiche-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* Champ inline (taille/poids + unité) */ .modiffiche-field-inline { display: flex; align-items: center; gap: 8px; } .modiffiche-input-short { width: 80px !important; } .modiffiche-unit { font-size: 13px; color: #888; white-space: nowrap; } /* Valeur readonly (pseudo) */ .modiffiche-value { font-weight: 600; color: #333; font-size: 14px; padding: 9px 0; } /* Hint / aide */ .modiffiche-hint { font-size: 12px; color: #aaa; line-height: 1.4; } /* Toggle mot de passe */ .passwd-toggle-link { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin: 4px 0; font-size: 14px; cursor: pointer; border: 1px dashed #e0e0e0; border-radius: 8px; background: #fafafa; transition: all 0.2s ease; } .passwd-toggle-link .glyphicon { font-size: 13px; margin-right: 4px; } .passwd-cancel-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; color: #999; font-size: 12px; cursor: pointer; transition: color 0.2s; } .passwd-cancel-link:hover { color: #c0392b; } /* Feedback validation mot de passe */ .passwd-feedback { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 0 4px; } .passwd-rule { font-size: 12px; color: #c0392b; transition: color 0.2s; } .passwd-rule.ok { color: #27ae60; } .passwd-rule.ko { color: #c0392b; } /* Checkboxes / sélections */ .modiffiche-checkboxes { display: flex; flex-wrap: wrap; gap: 8px; } .modiffiche-checkboxes table, .modiffiche-checkboxes tr, .modiffiche-checkboxes td { display: contents; } .modiffiche-checkboxes .form-filter { position: relative; display: inline-block; } .modiffiche-checkboxes .form-filter > input[type="checkbox"], .modiffiche-checkboxes .form-filter > input[type="radio"] { position: absolute !important; opacity: 0; left: -9999px; } .modiffiche-checkboxes .form-filter > label { display: inline-flex !important; align-items: center; padding: 8px 16px !important; background: #fff !important; border: 1px solid #e0dcd8 !important; border-radius: 20px !important; font-size: 12px !important; color: #555 !important; cursor: pointer; transition: all 0.2s ease; user-select: none; white-space: nowrap; } .modiffiche-checkboxes .form-filter > label:hover { border-color: var(--couleur-principale) !important; color: var(--couleur-principale) !important; } .modiffiche-checkboxes .form-filter > input[type="checkbox"]:checked + label, .modiffiche-checkboxes .form-filter > input[type="radio"]:checked + label { background: var(--gradient-accent) !important; color: #fff !important; border-color: transparent !important; } /* Séparateur de section couple */ .modiffiche-partner-sep { border: none; border-top: 2px solid #f0f0f0; margin: 20px 0 10px 0; } .modiffiche-partner-title { font-size: 12px; color: var(--couleur-principale); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 14px; } /* Section annonce */ .modiffiche-annonce-hint { font-size: 12px; color: #999; margin-bottom: 10px; } .modiffiche-annonce-hint input[type="text"] { display: inline; width: 50px; padding: 2px 6px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 12px; } .modiffiche-annonce-wrap { display: block; } .modiffiche-annonce-textarea-wrap { position: relative; } .modiffiche-annonce-textarea-wrap textarea { width: 100%; box-sizing: border-box; border: 1px solid #e0e0e0; border-radius: 8px; padding: 10px 13px 45px 13px; font-size: 14px; min-height: 220px; background: #fafafa; transition: border-color 0.2s; resize: vertical; } .modiffiche-annonce-textarea-wrap textarea:focus { outline: none; border-color: var(--couleur-principale); background: white; } .modiffiche-annonce-textarea-wrap > .emoji-picker-wrap { position: absolute; bottom: 10px; right: 10px; } .emoji-picker-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 8px; background: #fff; border: 1px solid #e0dcd8; border-radius: 20px; font-size: 18px; cursor: pointer; transition: all 0.2s; user-select: none; } .emoji-picker-btn:hover { border-color: var(--couleur-principale); background: #fff5f7; } .emoji-picker-btn span { font-size: 12px; color: #888; } .emoji-picker-popover { display: none; position: absolute; bottom: 45px; right: 0; z-index: 1000; width: 320px; height: 316px; background: #fff; border: 1px solid #e0dcd8; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.12); overflow: hidden; } .emoji-picker-popover.open { display: flex; flex-direction: column; } .emoji-picker-cats { display: flex; border-bottom: 1px solid #f0f0f0; padding: 6px 8px 0; gap: 2px; flex-shrink: 0; } .emoji-picker-cat { flex: 1; text-align: center; padding: 6px 0 8px; font-size: 16px; cursor: pointer; border-bottom: 2px solid transparent; border-radius: 0; background: none; border-left: none; border-right: none; border-top: none; transition: border-color 0.2s; opacity: 0.5; } .emoji-picker-cat:hover { opacity: 0.8; } .emoji-picker-cat.active { opacity: 1; border-bottom-color: var(--couleur-principale); } .emoji-picker-grid { flex: 1; overflow-y: auto; padding: 8px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; align-content: start; } .emoji-picker-grid .ep-emoji { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; font-size: 22px; cursor: pointer; border-radius: 6px; border: none; background: none; padding: 0; transition: background 0.15s; } .emoji-picker-grid .ep-emoji:hover { background: #fff0f3; } .modiffiche-annonce-counter { font-size: 12px; color: #999; padding: 6px 4px 0; transition: color 0.2s; } .modiffiche-annonce-counter #annonce_nbcar { font-weight: 700; } .modiffiche-annonce-counter.counter-warn { color: #e74c3c; } .modiffiche-annonce-counter.counter-warn #annonce_nbcar { color: #e74c3c; } .modiffiche-annonce-counter.counter-ok { color: #27ae60; } .modiffiche-annonce-counter.counter-ok #annonce_nbcar { color: #27ae60; } .modiffiche-submit { text-align: center; padding: 20px 0 30px; } /* ================================================= */ /* ALBUM PHOTOS V5 */ /* ================================================= */ #album, #listecommentaires, #mapclub, #mapnaturiste, #fiche_club, #capagde, #anniv, #journal { padding: 0; background: #f8f8f8; border-radius: 5px 5px 0px 0px; } .album-content { padding: 0 10px 10px; } .album-banner { background: #f7e8ed; color: #555; border-radius: 6px; padding: 10px 14px; margin: 0px 10px; font-size: 12px; line-height: 1.6; } .album-banner strong { display: block; font-size: 13px; font-weight: 600; color: var(--couleur-principale); margin-bottom: 3px; } .album-section-title { font-size: 14px; font-weight: 700; color: var(--couleur-principale); text-transform: uppercase; letter-spacing: 0.5px; margin: 20px 0 10px; padding-left: 4px; } .album-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; } .album-thumb { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #f0f0f0; cursor: grab; } .album-thumb.dragging { opacity: 0.5; outline: 2px dashed var(--couleur-principale); } .album-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; } .album-thumb-actions { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 6px; background: linear-gradient(transparent, rgba(0,0,0,0.5)); } .album-thumb-btn { width: 30px; height: 30px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; transition: transform 0.15s; color: #fff; } .album-thumb-btn:hover { transform: scale(1.15); } .album-btn-lock { background: rgba(255,255,255,0.25); } .album-btn-delete { background: rgba(220,53,69,0.7); } .album-btn-delete:hover { background: rgba(220,53,69,0.9); } .album-thumb-certif { position: absolute; top: 6px; right: 6px; background: rgba(39,174,96,0.85); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; } .album-add { aspect-ratio: 1; border-radius: 10px; border: 2px dashed #ddd; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; background: #fafafa; } .album-add:hover { border-color: var(--couleur-principale); background: #fff5f7; } .album-add-icon { font-size: 36px; color: #ccc; transition: color 0.2s; } .album-add:hover .album-add-icon { color: var(--couleur-principale); } .album-add-loading { aspect-ratio: 1; border-radius: 10px; border: 2px dashed #ddd; display: flex; align-items: center; justify-content: center; background: #fafafa; } .album-password { display: flex; align-items: center; gap: 10px; margin: 10px 0 16px; padding: 0 4px; } .album-password label { font-size: 12px; color: #666; white-space: nowrap; } .album-password input[type="text"] { flex: 1; max-width: 220px; padding: 8px 12px; border: 1px solid #e0dcd8; border-radius: 8px; font-size: 13px; outline: none; transition: border-color 0.2s; } .album-password input[type="text"]:focus { border-color: var(--couleur-principale); } .album-password-msg { font-size: 12px; padding: 4px 8px; border-radius: 6px; margin-left: 4px; } .album-password-msg.ok { color: #27ae60; } .album-password-msg.error { color: #e74c3c; } .album-separator { border: none; border-top: 1px solid #eee; margin: 20px 0; } .album-info-text { text-align: center; font-size: 13px; color: #999; padding: 10px 0; } .album-drag-hint { text-align: center; font-size: 12px; color: #aaa; margin-bottom: 12px; } .album-thumb.drag-over { outline: 2px solid var(--couleur-principale); outline-offset: -2px; } .album-max-msg { font-size: 11px; color: var(--couleur-principale); font-weight: normal; margin-left: 6px; } .album-tip { font-size: 12px; color: #999; padding: 4px 12px 10px; } /* ================================ ALBUM PHOTOS V5 - ÉDITEUR PHOTO (crop, rotation, masque/floutage) ================================ */ #photo_editor_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 9998; align-items: center; justify-content: center; } .pe-box { background: #fff; border-radius: 12px; width: 92%; max-width: 660px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); } .pe-step { display: flex; flex-direction: column; min-height: 0; flex: 1; } .pe-header { background: var(--couleur-principale); padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .pe-header-title { color: #fff; font-weight: 600; font-size: 15px; } .pe-header-close { background: none; border: none; color: rgba(255, 255, 255, 0.8); font-size: 22px; cursor: pointer; line-height: 1; padding: 0 4px; } .pe-header-close:hover { color: #fff; } .pe-ratios { display: flex; gap: 8px; padding: 8px 12px; background: #f8f8f8; border-bottom: 1px solid #eee; flex-shrink: 0; } .pe-ratio-btn { flex: 1; padding: 6px; border-radius: 6px; border: 2px solid #ddd; background: #fff; color: #666; font-size: 12px; cursor: pointer; transition: all 0.15s; } .pe-ratio-btn.active { border-color: var(--couleur-principale); background: var(--couleur-principale); color: #fff; } .pe-image-zone { flex: 1; min-height: 0; height: 380px; overflow: hidden; background: #222; display: flex; align-items: center; justify-content: center; } .pe-image-zone-sm { height: 340px; } .pe-image-zone img { max-width: 100%; max-height: 100%; object-fit: contain; } .pe-footer { background: #f8f8f8; border-top: 1px solid #eee; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .pe-footer-center { background: #f8f8f8; border-top: 1px solid #eee; padding: 16px; text-align: center; flex-shrink: 0; } .pe-footer-center p { color: #555; font-size: 13px; margin-bottom: 14px; } .pe-btns-row { display: flex; gap: 10px; justify-content: center; } .pe-hint { background: #f8f8f8; border-bottom: 1px solid #eee; padding: 6px 12px; text-align: center; flex-shrink: 0; color: #888; font-size: 12px; } .pe-btn { padding: 8px 18px; border-radius: 8px; border: 1px solid #ddd; background: #fff; color: #555; font-size: 13px; cursor: pointer; } .pe-btn:disabled { opacity: 0.4; cursor: not-allowed; } .pe-btn-primary { padding: 8px 22px; border-radius: 8px; border: none; background: var(--couleur-principale); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; } .pe-btn-primary:hover { background: var(--couleur-principale-hover); } .pe-btn-outline { padding: 9px 20px; border-radius: 8px; border: 1px solid var(--couleur-principale); background: #fff; color: var(--couleur-principale); font-size: 13px; cursor: pointer; } .pe-btn-back { display: block; margin: 10px auto 0; padding: 6px 14px; border-radius: 6px; border: 1px solid #ddd; background: #fff; color: #888; font-size: 12px; cursor: pointer; } #pe_masque_canvas { cursor: crosshair; touch-action: none; display: block; } /* ===== PREFERENCES V5 ===== */ .pref-section { background: #fff; border-radius: 12px; margin-bottom: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); } .pref-section-title { font-size: 13px; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.5px; padding: 18px 20px 10px; } .pref-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid #f2f2f2; gap: 16px; } .pref-item-label { flex: 1; font-size: 14px; color: #333; line-height: 1.4; } .pref-toggle { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; margin: 0; cursor: pointer; } .pref-toggle input { opacity: 0; width: 0; height: 0; position: absolute; } .pref-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ddd; transition: 0.3s ease; border-radius: 26px; } .pref-toggle-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: #fff; transition: 0.3s ease; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .pref-toggle input:checked + .pref-toggle-slider { background-color: var(--couleur-principale); } .pref-toggle input:checked + .pref-toggle-slider:before { transform: translateX(20px); } .pref-section-danger { border: 1px solid #f5c6cb; } .pref-section-danger .pref-section-title { color: var(--couleur-delete); } .pref-alert { padding: 16px 20px; border-radius: 12px; margin-bottom: 16px; font-size: 14px; line-height: 1.5; } .pref-alert-warning { background: #fff3cd; border: 1px solid #ffeaa7; color: #856404; } .pref-alert-success { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; } .pref-email-info { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid #f2f2f2; font-size: 14px; color: #666; } .pref-email-address { font-weight: 600; color: #333; } .pref-delete-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: transparent; color: var(--couleur-delete); border: 1px solid var(--couleur-delete); border-radius: 8px; cursor: pointer; font-size: 14px; transition: all 0.2s ease; } .pref-delete-btn:hover { background: var(--couleur-delete); color: #fff; } .pref-toast { position: fixed; bottom: 30px; right: 30px; background: #333; color: #fff; padding: 12px 24px; border-radius: 8px; font-size: 14px; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; z-index: 9999; pointer-events: none; } .pref-toast.show { opacity: 1; transform: translateY(0); } .pref-react-btn { display: inline-block; padding: 8px 20px; background: #856404; color: #fff; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; text-decoration: none; margin-top: 12px; transition: background 0.2s ease; } .pref-react-btn:hover { background: #6d5003; color: #fff; } /* ============================== MAP V5 - Carte interactive ============================== */ .map-page-container { background: #f8f8f8; padding: 0; width: 100%; box-sizing: border-box; } .map-toolbar { display: flex; align-items: center; gap: 14px; padding: 10px 20px; background: #fff; border-bottom: 1px solid #eee; flex-wrap: wrap; } .map-toolbar-info { font-size: 13px; color: #888; flex: 1; min-width: 0; } .map-toolbar-label { font-size: 14px; font-weight: 600; color: #444; white-space: nowrap; } .map-toolbar-select { padding: 6px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; color: #333; background: #f8f8f8; cursor: pointer; outline: none; transition: border-color 0.2s; } .map-toolbar-select:focus { border-color: var(--couleur-principale); } .map-wrapper { position: relative; width: 100%; height: 600px; box-sizing: border-box; } #map { width: 100%; height: 100%; box-sizing: border-box; } /* Panel overlay */ .map-panel { position: absolute; top: 10px; right: 10px; bottom: 10px; width: 290px; background: #fff; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.18); display: flex; flex-direction: column; z-index: 1000; transform: translateX(320px); transition: transform 0.3s ease; overflow: hidden; } .map-panel.open { transform: translateX(0); } .map-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--couleur-principale); color: #fff; border-radius: 12px 12px 0 0; flex-shrink: 0; gap: 8px; } .map-panel-title { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } .map-panel-count { font-size: 12px; opacity: 0.85; white-space: nowrap; flex-shrink: 0; } .map-panel-close { background: rgba(255,255,255,0.25); border: none; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; font-size: 18px; line-height: 1; flex-shrink: 0; transition: background 0.2s; padding: 0; } .map-panel-close:hover { background: rgba(255,255,255,0.4); } .map-panel-list { flex: 1; overflow-y: auto; padding: 4px 0; } /* Mini-card utilisateur dans le panel */ .map-user-card { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid #f5f5f5; transition: background 0.15s; } .map-user-card:last-child { border-bottom: none; } .map-user-card:hover { background: #fef5f7; } .map-user-avatar-wrap { position: relative; flex-shrink: 0; } .map-user-photo-bg { width: 48px; height: 48px; border-radius: 50%; background-size: cover; background-position: center; background-color: #eee; border: 2px solid #f0f0f0; cursor: pointer; display: block; } .map-user-online-dot { position: absolute; bottom: 1px; right: 1px; width: 11px; height: 11px; border-radius: 50%; background: #28a745; border: 2px solid #fff; } .map-user-info { flex: 1; min-width: 0; } .map-user-pseudo { font-size: 14px; font-weight: 700; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .map-user-pseudo:hover { color: var(--couleur-principale); } .map-user-age { font-size: 12px; color: #888; margin-top: 2px; } .map-user-actions { display: flex; gap: 5px; flex-shrink: 0; } .map-user-btn { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 13px; border: none; cursor: pointer; transition: all 0.2s; line-height: 1; } .map-user-btn-msg { width: 32px; height: 32px; } /* Avatar placeholder typé dans le panel map */ .map-panel .comment-card-avatar-vide { width: 48px; height: 48px; border-radius: 50%; cursor: pointer; flex-shrink: 0; } /* Loading overlay */ .map-loading { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.88); display: flex; align-items: center; justify-content: center; z-index: 500; font-size: 14px; color: #888; gap: 10px; } .map-loading-spinner { width: 20px; height: 20px; border: 3px solid #eee; border-top-color: var(--couleur-principale); border-radius: 50%; animation: map-spin 0.8s linear infinite; flex-shrink: 0; } @keyframes map-spin { to { transform: rotate(360deg); } } /* Marqueur */ .map-marker-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--couleur-principale); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(var(--couleur-principale-rgb), 0.5); } /* Clusters custom (Leaflet.markercluster) */ .map-cluster-icon { background: var(--couleur-principale); height: 35px; width: 35px; font-size: 11px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(var(--couleur-principale-rgb), 0.45); font-family: inherit; } /* Filtres type carte clubs */ .map-filter-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .map-filter-btn { display: inline-block; padding: 5px 14px; border: 1px solid var(--couleur-principale); border-radius: 20px; font-size: 13px; color: var(--couleur-principale); background: transparent; cursor: pointer; text-decoration: none; transition: all 0.2s; white-space: nowrap; } .map-filter-btn:hover, .map-filter-btn.active { background: var(--couleur-principale); color: #fff; text-decoration: none; } /* Popup établissement (Leaflet popup) */ .map-club-popup { min-width: 220px; font-size: 13px; line-height: 1.5; } .map-club-popup-name { font-size: 15px; font-weight: 700; color: #333; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid #f0f0f0; } .map-club-popup-row { display: flex; gap: 6px; margin-bottom: 4px; color: #555; } .map-club-popup-label { font-weight: 600; color: #333; flex-shrink: 0; } .map-club-popup-note { display: inline-block; background: var(--couleur-principale); color: #fff; border-radius: 4px; padding: 1px 7px; font-size: 12px; font-weight: 700; } /* Sections sous la carte (établissements + commentaires) */ .map-below-section { margin-top: 16px; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,0.07); } .map-below-section-title { display: flex; align-items: center; gap: 8px; padding: 12px 20px; font-size: 14px; font-weight: 700; color: #333; border-bottom: 1px solid #f2f2f2; background: #faf9f8; } /* Liste derniers établissements */ .map-etabl-list { padding: 8px 0; } .map-etabl-item { display: flex; align-items: center; gap: 10px; padding: 8px 20px; border-bottom: 1px solid #f8f8f8; font-size: 13px; transition: background 0.15s; } .map-etabl-item:last-child { border-bottom: none; } .map-etabl-item:hover { background: #fef5f7; } .map-etabl-date { color: #aaa; font-size: 12px; flex-shrink: 0; min-width: 80px; } .map-etabl-name a { color: var(--couleur-principale); font-weight: 600; text-decoration: none; } .map-etabl-name a:hover { text-decoration: underline; } .map-etabl-dept { color: #888; font-size: 12px; margin-left: 4px; } /* Commentaires clubs - réutilise comment-card + surcharge établissement */ .map-club-comment-etabl { font-size: 12px; color: #888; margin-top: 2px; } .map-club-comment-etabl a { color: var(--couleur-principale); text-decoration: none; } .map-club-comment-etabl a:hover { text-decoration: underline; } /* ================================================ Cap d'Agde (capagde.cgi) ================================================ */ /* Input date dans la barre de recherche */ .search-date-input { border: 1px solid transparent !important; background: transparent; padding: 4px 6px !important; font-size: 13px; color: #333; outline: none; width: 130px; } .search-date-input:focus { border-color: var(--couleur-principale) !important; border-radius: 4px; } /* Dateinput dans la barre de recherche */ .search-bar-inline .date-input-wrapper { display: flex !important; align-items: center !important; gap: 0 !important; } .search-bar-inline .date-input-wrapper .caltrigger { width: 32px !important; height: 32px !important; margin-left: 0 !important; margin-right: 6px !important; border-radius: 6px !important; float: none !important; flex-shrink: 0 !important; } .search-bar-inline .date-input-wrapper .caltrigger::before { font-size: 13px; } /* Label aligné à gauche (avec l'icône) */ .search-bar-inline .search-field .search-label { margin-left: 0; } /* Compteur dans section-header */ .section-count { display: inline-block; background: var(--couleur-principale); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; margin-left: 8px; vertical-align: middle; } /* Message liste vide */ .capagde-empty { text-align: center; padding: 40px 20px; color: #999; font-size: 14px; } .capagde-empty .glyphicon { font-size: 24px; display: block; margin-bottom: 10px; color: #ccc; } /* Badge filtres actifs */ .filtres-badge { display: inline-block; background: var(--couleur-principale); color: #fff; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; line-height: 16px; text-align: center; margin-left: 4px; vertical-align: middle; } /* Cap d'Agde - badge date sur carte mosaïque (plus visible) */ #capagde #bloc_liste_annonce .mosaique-date { background: var(--couleur-principale); backdrop-filter: none; -webkit-backdrop-filter: none; font-weight: 600; font-size: 10px; padding: 3px 7px; letter-spacing: 0.2px; } /* ================================================ Fiche établissement (club_fiche.cgi) ================================================ */ .cf-container { max-width: 100%; } /* Badge type (Club / Sauna / Resto) */ .cf-type-badge { display: inline-block; background: var(--couleur-principale); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 3px 10px; border-radius: 12px; margin-right: 8px; vertical-align: middle; letter-spacing: 0.5px; } /* Note globale */ .cf-global-note { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: #fff; border-radius: 12px; margin-bottom: 16px; box-shadow: 0 1px 6px rgba(0,0,0,0.07); } .cf-stars { display: flex; gap: 3px; } .cf-star-on { color: var(--couleur-principale); font-size: 20px; } .cf-star-off { color: #ddd; font-size: 20px; } .cf-global-note-value { font-size: 19px; font-weight: 600; color: #333; line-height: 1; } /* Photos */ .cf-photos { margin-bottom: 16px; border-radius: 12px; overflow: hidden; background: #000; } .cf-photo-main { width: 100%; max-height: 420px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .cf-photo-main img { width: 100%; max-height: 420px; object-fit: contain; } .cf-photo-thumbs { display: flex; gap: 4px; padding: 6px; background: #1a1a1a; overflow-x: auto; } .cf-thumb { width: 70px; height: 52px; object-fit: cover; border-radius: 6px; cursor: pointer; opacity: 0.7; transition: opacity 0.2s; flex-shrink: 0; } .cf-thumb:hover { opacity: 1; } .cf-logo { max-width: 120px; max-height: 80px; border-radius: 8px; } /* Sections */ .cf-section { background: #fff; border-radius: 12px; margin-bottom: 16px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,0.07); } .cf-section-title { display: flex; align-items: center; gap: 8px; padding: 14px 20px; font-size: 15px; font-weight: 700; color: #333; border-bottom: 1px solid #f2f2f2; background: #faf9f8; } .cf-section-title .btn-add-event { margin-left: auto; } .cf-section-body { padding: 16px 20px; } /* Info blocks */ .cf-info-block { padding: 10px 0; border-bottom: 1px solid #f5f5f5; } .cf-info-block:last-child { border-bottom: none; } .cf-info-label { font-size: 12px; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 4px; } .cf-info-value { font-size: 14px; color: #333; line-height: 1.5; } /* Notes avec jauges */ .cf-notes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #f2f2f2; } .cf-note-row { display: flex; align-items: center; gap: 10px; } .cf-note-label { font-size: 13px; color: #666; min-width: 75px; flex-shrink: 0; } .cf-note-bar { flex: 1; height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden; } .cf-note-bar-fill { height: 100%; background: var(--couleur-principale); border-radius: 4px; transition: width 0.4s ease; } .cf-note-val { font-size: 14px; font-weight: 700; color: #333; min-width: 30px; text-align: right; } /* Liste avis */ .cf-avis-list .comment-card { border-bottom: 1px solid #f5f5f5; border-radius: 0; box-shadow: none; margin-bottom: 0; } .cf-avis-list .comment-card:last-child { border-bottom: none; } /* Modale avis - groupes de notes */ .cf-modale-note-group { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f5f5f5; } .cf-modale-note-group label { font-size: 14px; font-weight: 600; color: #333; } .cf-modale-note-input { display: flex; align-items: center; gap: 6px; } .cf-modale-note-input input[type="number"] { width: 60px; padding: 6px 8px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; text-align: center; } .cf-modale-note-input span { font-size: 13px; color: #999; } .cf-modale-comment-group { margin-top: 16px; } .cf-modale-comment-group label { display: block; font-size: 14px; font-weight: 600; color: #333; margin-bottom: 8px; } .cf-modale-comment-group textarea { width: 100%; padding: 10px 14px; border: 1px solid #ddd; border-radius: 10px; font-size: 14px; font-family: inherit; resize: vertical; box-sizing: border-box; } .cf-modale-comment-group textarea:focus { outline: none; border-color: var(--couleur-principale); } /* Avertissement */ .map-avertissement { padding: 10px 20px; font-size: 12px; color: #999; text-align: center; font-style: italic; } /* ================================================ Anniversaires (anniv.cgi) ================================================ */ #anniv .header-tabs { padding: 10px 20px 10px 20px !important; } /* Badge date anniversaire sur carte mosaique */ #anniv #bloc_liste_annonce .mosaique-date { background: var(--couleur-principale); backdrop-filter: none; -webkit-backdrop-filter: none; font-weight: 600; font-size: 10px; padding: 3px 7px; letter-spacing: 0.2px; } /* Titre au-dessus du bloc de recherche */ #anniv .section-header-top { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } /* Checkbox "Avec photo" dans la barre de recherche */ .search-bar-inline .search-label-checkbox { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #555; cursor: pointer; white-space: nowrap; padding: 4px 2px; } .search-bar-inline .search-label-checkbox input[type="checkbox"] { margin: 0; cursor: pointer; accent-color: var(--couleur-principale); } /* Mode Partout : sans le champ ville, la case photo reste alignee a droite (comme quand le champ "De" remplit l'espace central). */ #anniv .search-bar-inline--partout .search-field-photo { flex: 0 1 auto; margin-left: auto; padding-right: 200px; } /* Message aucun résultat */ .anniv-empty { padding: 30px 20px; text-align: center; color: #888; font-size: 14px; } .anniv-empty .glyphicon { margin-right: 8px; color: var(--couleur-principale); } /* ================================ JOURNAL V5 ================================ */ .journal-list { background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); overflow: hidden; } .journal-item { display: flex; flex-direction: column; align-items: stretch; padding: 16px; border-bottom: 1px solid #f0f0f0; transition: background 0.15s ease; } .journal-item:last-child { border-bottom: none; } .journal-item:hover { background: #fafafa; } .journal-item-link { display: flex; align-items: center; text-decoration: none; color: inherit; margin-bottom: 10px; } .journal-item-link:hover, .journal-item-link:focus, .journal-item-link:active { text-decoration: none; color: inherit; } .journal-avatar { position: relative; flex-shrink: 0; width: 50px; height: 50px; margin-right: 14px; } .journal-avatar-img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; background-color: #e0e0e0; } .journal-avatar-vide { width: 50px; height: 50px; border-radius: 50%; background-color: #f0f0f0; background-size: cover; background-position: center; } .journal-avatar-vide.h { background-image: var(--url-img-vide-h); } .journal-avatar-vide.f { background-image: var(--url-img-vide-f); } .journal-avatar-vide.cpl { background-image: var(--url-img-vide-cpl); } .journal-avatar-vide.trans, .journal-avatar-vide.tr { background-image: var(--url-img-vide-trans); } .journal-online-dot { position: absolute; bottom: 1px; right: 1px; width: 12px; height: 12px; border-radius: 50%; background-color: var(--couleur-chat-online); border: 2px solid #fff; } .journal-info { display: flex; flex-direction: column; min-width: 0; } .journal-pseudo { font-weight: 600; font-size: 15px; color: #333; } .journal-type { font-size: 13px; color: #888; } .journal-ville { font-size: 12px; color: #aaa; } .journal-action-text { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 12px; gap: 6px; } .journal-action-icon { font-size: 22px; opacity: 0.85; } .journal-action-desc { display: block; } .journal-action-label { font-size: 14px; font-weight: 600; color: #444; } .journal-action-time { font-size: 13px; font-weight: 400; color: #999; } /* Couleurs icône selon le type d'action */ .journal-action-modif .journal-action-icon { color: #f39c12; } .journal-action-dernmin .journal-action-icon { color: #3498db; } .journal-action-soiree .journal-action-icon { color: #9b59b6; } .journal-action-inscript .journal-action-icon { color: #27ae60; } .journal-action-photo .journal-action-icon { color: #16a085; } .journal-action-video .journal-action-icon { color: #2980b9; } .journal-action-comment .journal-action-icon { color: var(--couleur-principale); } .journal-action-default .journal-action-icon { color: #bdc3c7; } .journal-actions { display: flex; justify-content: center; align-items: center; gap: 25px; margin-top: 15px; } /* Empty state */ .journal-empty { padding: 40px 20px; text-align: center; color: #888; font-size: 14px; } .journal-empty .glyphicon { display: block; font-size: 32px; margin-bottom: 12px; color: var(--couleur-principale); opacity: 0.5; } .journal-empty p { margin: 0; } /* ============================================================ FICHE PROFIL V5 - Modernisation avril 2026 DESKTOP UNIQUEMENT — pas de media queries ici. La version mobile est gérée par Nuxt (nuxt2-entrecoquins). Voir 0-docs/0-desktop-maquettes-v5.md > Bonnes pratiques ============================================================ */ /* Container principal — fond gris comme #modiffiche */ .fiche { background: #f8f8f8; border-radius: 5px 5px 0 0; } .fiche #bloc_elements { padding: 0px; } .fiche .voirfiche-cards-container { padding: 10px; } /* Cards plus visibles dans le contexte voirfiche (fond gris) */ .fiche .modiffiche-card { box-shadow: 0 2px 6px rgba(0,0,0,0.10); border: 1px solid #e8e8e8; } /* Header fiche (pseudo + type) — fond sobre comme .page-header Refonte avril 2026 : grid 3 colonnes (left auto / center 1fr / right auto) pour eviter que le pseudo deborde sur les badges (absolute) sur ecrans intermediaires (1000-1100px). Tout le monde est dans le flux. */ .fiche-header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 14px 20px; background-color: var(--couleur-fond-blanc); border-radius: 5px 5px 0 0; position: relative; min-height: 60px; } .fiche-header .fiche-header-left { display: flex; align-items: center; justify-content: flex-start; min-width: 0; } .fiche-header .fiche-header-center { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; } .fiche-header .fiche-header-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; } .fiche-header .fiche-pseudo { font-family: var(--font-titres, 'Outfit', sans-serif); font-size: 18px; font-weight: 600; color: var(--couleur-texte-principal); letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; max-width: 180px; } .fiche-header .fiche-type-visu { font-family: var(--font-corps, 'Inter', sans-serif); font-size: 12px; color: var(--couleur-texte-secondaire); text-transform: capitalize; white-space: nowrap; } .fiche-btn-retour { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font-family: var(--font-corps, 'Inter', sans-serif); font-size: 13px; color: var(--couleur-principale); text-decoration: none; border-radius: var(--border-radius-bouton); transition: all var(--transition-rapide); white-space: nowrap; flex-shrink: 0; } .fiche-btn-retour:hover { background: var(--couleur-principale); color: var(--couleur-texte-blanc); text-decoration: none; } .fiche-btn-retour i { font-size: 14px; color: var(--couleur-principale); } /* Badge type fiche (certif/doute) dans le header */ .fiche-header #type_fiche_info { float: none; padding: 0; width: auto; font-size: 11px; } /* Barre d'actions — cercles gris avec icônes outline Refonte avril 2026 : justify-content: space-around + gap minimal pour eviter le debordement sur ecrans intermediaires (1000-1100px). 7 boutons de 46px se repartissent dans la largeur dispo sans deborder. */ .fiche-actions-bar { background: #fff; padding: 10px 8px; box-sizing: border-box; } .fiche-actions { display: flex; justify-content: space-around; align-items: center; flex-wrap: nowrap; gap: 6px; width: 100%; max-width: 540px; margin: 0 auto; box-sizing: border-box; } .fiche-action-item { text-align: center; flex: 0 0 auto; } .fiche-action-item a { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; box-sizing: border-box; background: #fff; border: 1px solid #e8e8e8; color: var(--couleur-principale); text-decoration: none; transition: background 0.2s, color 0.2s, border-color 0.2s; } /* #voirfiche_courrier a { background: #ffb1ca; } #voirfiche_note a { background: #7cd5ff; } #voirfiche_coeur a { background: #eb90d3; } #voirfiche_bloque a { background: #ff9797; } #voirfiche_flash a { background: #e4e599; } */ .fiche-action-item a:hover { background: #fafafa; color: var(--couleur-principale); border-color: #e0e0e0; text-decoration: none; } .fiche-action-item i.material-icons { font-size: 22px !important; line-height: 1 !important; width: auto !important; height: auto !important; display: inline !important; float: none !important; vertical-align: middle !important; } /* Écrase a .material-icons { color: #504c4d } qui cible directement le */ .fiche-action-item:not(.fiche-action-online):not(#voirfiche_chat_off) i.material-icons, .fiche-action-item:not(.fiche-action-online):not(#voirfiche_chat_off) a:hover i.material-icons { color: var(--couleur-principale); } /* Chat en ligne = inchangé (cercle vert, icône blanche) */ .fiche-action-online a { background: #b4e70b !important; border: 1px solid transparent !important; color: #fff !important; } .fiche-action-online a:hover { background: #9ccb0a !important; } .fiche-action-online i.material-icons, .fiche-action-online a:hover i.material-icons { color: #fff !important; } /* Chat hors ligne — style d’origine (gris), pas le fond blanc / rose des autres */ #voirfiche_chat_off.fiche-action-item a { background: #f0f0f0 !important; border: 1px solid #e8e8e8 !important; color: #555 !important; } #voirfiche_chat_off.fiche-action-item a:hover { background: #e8e8e8 !important; color: #333 !important; } #voirfiche_chat_off.fiche-action-item i.material-icons, #voirfiche_chat_off.fiche-action-item a:hover i.material-icons { color: #555 !important; } /* Hors ligne / désactivé (uniquement utilisé pour le chat) */ .fiche-action-item a.fiche-action-disabled { opacity: 0.35; cursor: default; pointer-events: none; } /* Override : neutraliser les anciens styles du coeur */ .fiche #voirfiche_coeur { width: auto !important; height: auto !important; float: none !important; } .fiche #voirfiche_coeur a, .fiche #voirfiche_coeur a:hover, .fiche #voirfiche_coeur .ann_contact_actif, .fiche #voirfiche_coeur .ann_contact_actif:hover { background-image: none !important; background-position: initial; width: 46px !important; height: 46px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; } /* Contact actif (favori) = fond rose + coeur plein blanc */ .fiche #voirfiche_coeur .ann_contact_actif { background: var(--couleur-principale) !important; border-color: var(--couleur-principale) !important; } .fiche #voirfiche_coeur .ann_contact_actif i.material-icons { font-size: 0 !important; } .fiche #voirfiche_coeur .ann_contact_actif i.material-icons::before { content: '\e87d'; font-family: 'Material Icons'; font-size: 24px; color: #fff; display: block; line-height: 1; } /* Note / bloquer actifs = fond primaire + icône blanche — toute fiche #voirfiche */ #voirfiche #voirfiche_note a.fiche-note-actif, #voirfiche #voirfiche_note a.fiche-note-actif:hover, #voirfiche #voirfiche_bloque a.fiche-bloque-actif, #voirfiche #voirfiche_bloque a.fiche-bloque-actif:hover { background: var(--couleur-principale) !important; border-color: var(--couleur-principale) !important; color: #fff !important; } #voirfiche #voirfiche_note a.fiche-note-actif i.material-icons, #voirfiche #voirfiche_note a.fiche-note-actif:hover i.material-icons, #voirfiche #voirfiche_bloque a.fiche-bloque-actif i.material-icons, #voirfiche #voirfiche_bloque a.fiche-bloque-actif:hover i.material-icons { color: #fff !important; } #voirfiche #voirfiche_bloque a.fiche-bloque-actif, #voirfiche #voirfiche_bloque a.fiche-bloque-actif:hover { background: var(--couleur-principale) !important; border-color: var(--couleur-principale) !important; color: #fff !important; } /* Menu tableau (ex. mode visiteur) : même pastille que .fiche-action-item */ #voirfiche #voirfiche_signaler a i { color: red; } #voirfiche #voirfiche_tabl_menu #voirfiche_note a:hover { background: #fafafa; color: var(--couleur-principale); border-color: #e0e0e0; text-decoration: none; } #voirfiche #voirfiche_tabl_menu #voirfiche_note a i.material-icons { font-size: 22px !important; line-height: 1 !important; color: var(--couleur-principale); } #voirfiche #voirfiche_tabl_menu #voirfiche_bloque a { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; box-sizing: border-box; background: #fff; border: 1px solid #e8e8e8; color: var(--couleur-principale); text-decoration: none; vertical-align: middle; transition: background 0.2s, color 0.2s, border-color 0.2s; } #voirfiche #voirfiche_tabl_menu #voirfiche_bloque a:hover { background: #fafafa; color: var(--couleur-principale); border-color: #e0e0e0; text-decoration: none; } #voirfiche #voirfiche_tabl_menu #voirfiche_bloque a i.material-icons { font-size: 22px !important; line-height: 1 !important; color: var(--couleur-principale); } /* Popup chat : bouton note / bloquer actifs */ #chatpop #voirfiche_note a.fiche-note-actif, #chatpop #voirfiche_note a.fiche-note-actif:hover, #chatpop #voirfiche_bloque a.fiche-bloque-actif, #chatpop #voirfiche_bloque a.fiche-bloque-actif:hover { background: var(--couleur-principale) !important; border-color: var(--couleur-principale) !important; color: #fff !important; } #chatpop #voirfiche_note a.fiche-note-actif i.material-icons, #chatpop #voirfiche_note a.fiche-note-actif:hover i.material-icons, #chatpop #voirfiche_bloque a.fiche-bloque-actif i.material-icons, #chatpop #voirfiche_bloque a.fiche-bloque-actif:hover i.material-icons { color: #fff !important; } /* Ancienne règle coeur actif neutralisée — remplacée par .fiche #voirfiche_coeur */ /* Onglets v5 */ .fiche-tabs { display: flex; gap: 0; background: var(--couleur-fond-blanc); border-bottom: 2px solid var(--couleur-fond-gris); } .fiche-tab-item { flex: 1; text-align: center; padding: 6px 12px; font-family: var(--font-corps, 'Inter', sans-serif); font-size: 13px; font-weight: 500; color: var(--couleur-texte-secondaire); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all var(--transition-rapide); white-space: nowrap; user-select: none; } .fiche-tab-item:hover { color: var(--couleur-principale); } .fiche-tab-item.fiche-tab-active { color: var(--couleur-principale); border-bottom-color: var(--couleur-principale); font-weight: 600; } #conteneur_bloc_photo_video { margin: 10px; padding: 0px; background: white; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); padding: 0px 0px; margin-bottom: 10px; } /* Zone photo */ .fiche-photo-zone { text-align: center; background: white; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); padding: 0px 0px 15px 0px; margin-bottom: 10px; } .fiche-photo-zone #hauteur_image { display: flex; flex-direction: column; align-items: center; } .fiche-photo-zone #bloc_img_public, .fiche-photo-zone #bloc_img_privee { text-align: center; width: 100%; } .fiche-photo-zone #sync2 { margin: 0 auto; } .fiche-galpriv-form { text-align: center; padding: 20px; font-family: var(--font-corps, 'Inter', sans-serif); font-size: 14px; color: var(--couleur-texte-principal); } .fiche-galpriv-form input[type="password"] { padding: 8px 12px; border: 1px solid var(--couleur-fond-gris); border-radius: var(--border-radius-input); font-size: 14px; outline: none; transition: border-color var(--transition-rapide); } .fiche-galpriv-form input[type="password"]:focus { border-color: var(--couleur-principale); box-shadow: 0 0 0 3px var(--couleur-principale-light); } /* ============================================================ GALERIES VIDÉO V5 — Lecteur HTML5 + miniatures Swiper Remplace unitegallery pour un rendu propre, responsive, sans distorsion. Protection : user-select none, pas de drag, poster stylé en background. ============================================================ */ .fiche-video-block { width: 100%; padding: 15px 0 0 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .fiche-video-loading { display: flex; align-items: center; justify-content: center; min-height: 300px; width: 100%; } .fiche-video-spinner { width: 48px; height: 48px; border: 4px solid rgba(239, 58, 115, 0.2); border-top-color: var(--couleur-principale); border-radius: 50%; animation: fiche-video-spin 0.8s linear infinite; } @keyframes fiche-video-spin { to { transform: rotate(360deg); } } .fiche-video-content { width: 100%; } .fiche-video-player-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } /* Fallback pour navigateurs sans aspect-ratio */ @supports not (aspect-ratio: 16 / 9) { .fiche-video-player-wrap { height: 0; padding-bottom: 56.25%; } .fiche-video-player-wrap > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } .fiche-video-player { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; object-fit: contain; outline: none; } /* Bouton play central : overlay au-dessus de la 1ère frame de la vidéo, masqué dès le début de la lecture (les controls natifs prennent le relais). */ .fiche-video-poster-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; border: none; background: var(--couleur-principale); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); z-index: 2; transition: transform 0.15s ease, background 0.15s ease; pointer-events: auto; } .fiche-video-poster-play:hover { transform: translate(-50%, -50%) scale(1.08); } .fiche-video-poster-play .material-icons { font-size: 44px !important; color: #fff !important; margin-left: 4px; } /* Miniatures sous le lecteur */ .fiche-video-thumbs-wrap { position: relative; margin-top: 12px; padding: 0 40px; } /* Quand la navigation Swiper est verrouillée (toutes les miniatures tiennent), on réduit le padding latéral — plus de trou visuel inutile. */ .fiche-video-thumbs-wrap.no-nav { padding: 0 10px; } .fiche-video-thumbs-wrap.no-nav .fiche-video-thumbs-prev, .fiche-video-thumbs-wrap.no-nav .fiche-video-thumbs-next { display: none; } .fiche-video-thumbs-swiper { width: 100%; height: 90px; overflow: hidden; } /* Swiper force height:100% sur .swiper-slide ; on contraint tout à 90px. */ .fiche-video-thumbs-swiper .swiper-wrapper { height: 90px !important; } .fiche-video-thumb.swiper-slide { position: relative; width: 160px !important; height: 90px !important; border-radius: 8px; overflow: hidden; cursor: pointer; background: #000; border: 2px solid transparent; transition: border-color 0.15s ease, transform 0.15s ease; flex-shrink: 0; } .fiche-video-thumb.active { border-color: var(--couleur-principale); } .fiche-video-thumb-img { position: absolute; inset: 0; background-size: cover; background-position: center center; background-repeat: no-repeat; } .fiche-video-thumb-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; pointer-events: none; } .fiche-video-thumb-play .material-icons { font-size: 22px !important; color: #fff !important; margin-left: 2px; } /* Flèches de navigation miniatures */ .fiche-video-thumbs-prev, .fiche-video-thumbs-next { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 1px solid #e8e8e8; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; transition: background 0.15s ease; -webkit-user-select: none; user-select: none; } .fiche-video-thumbs-prev { left: 0; } .fiche-video-thumbs-next { right: 0; } .fiche-video-thumbs-prev:hover, .fiche-video-thumbs-next:hover { background: #f5f5f5; } .fiche-video-thumbs-prev .material-icons, .fiche-video-thumbs-next .material-icons { font-size: 22px !important; color: var(--couleur-principale) !important; } .fiche-video-thumbs-prev.swiper-button-disabled, .fiche-video-thumbs-next.swiper-button-disabled { opacity: 0.35; cursor: default; } /* Protection anti-copie (défense en profondeur) */ .fiche-video-block .photo-protected, .fiche-video-player { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; } .fiche-galpriv-msg { text-align: center; padding: 10px 0; color: #c00; } .fiche-galpriv-msg:empty { padding: 0; } /* ================================================ */ /* SWIPER PHOTO GALLERY (remplace Owl Carousel) */ /* ================================================ */ /* Placeholder sans photo (v5) */ .fiche #voirfiche_sans_photo { width: 100%; height: 400px; border-radius: 12px; background-color: #f0f0f0; background-repeat: no-repeat; background-position: center center; background-size: auto 100%; display: flex; align-items: center; justify-content: center; } /* Carousel principal */ /* Fix Firefox : hauteur fixe explicite sur le wrapper et les slides. Sans ça, Firefox ne propage pas la height:580px de .fiche-photo-slide à travers .swiper-slide (height:auto par défaut), et l'image se déploie à sa taille naturelle, repoussant tout le contenu en dessous. */ .fiche-swiper-main { width: 100%; height: 580px; border-radius: 12px; overflow: hidden; background: #111; cursor: zoom-in; } .fiche-swiper-main .swiper-slide { height: 580px; } .fiche-photo-slide { position: relative; width: 100%; height: 580px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #111; } /* Flèches navigation photo principale */ .fiche-nav-prev, .fiche-nav-next { opacity: 0.6; position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.88); box-shadow: 0 2px 8px rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s, box-shadow 0.2s; user-select: none; -webkit-user-select: none; -moz-user-select: none; } .fiche-nav-prev { left: 12px; } .fiche-nav-next { right: 12px; } .fiche-nav-prev:hover, .fiche-nav-next:hover { background: rgba(255, 255, 255, 1); box-shadow: 0 3px 12px rgba(0,0,0,0.35); } .fiche-nav-prev .material-icons, .fiche-nav-next .material-icons { font-size: 28px; color: #333; line-height: 1; pointer-events: none; user-select: none; -webkit-user-select: none; } .fiche-nav-prev.swiper-button-disabled, .fiche-nav-next.swiper-button-disabled { display: none; } /* Vignette dégradé sur les bords (style Google Photos) */ .fiche-photo-slide::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to right, rgba(0,0,0,0.45) 0%, transparent 18%, transparent 82%, rgba(0,0,0,0.45) 100%), linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 15%, transparent 85%, rgba(0,0,0,0.3) 100%); } /* Calque flou — même image en fond */ .fiche-photo-blur-bg { position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(28px); transform: scale(1.05); opacity: 0.75; z-index: 0; will-change: transform; } .fiche-photo-slide img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; } /* Pagination dots — entre la photo et les miniatures */ .fiche-photo-pagination { display: flex; justify-content: center; align-items: center; gap: 5px; padding: 6px 0; } .fiche-photo-pagination .swiper-pagination-bullet { width: 7px; height: 7px; background: #ccc; opacity: 1; border-radius: 50%; cursor: pointer; transition: background 0.2s, transform 0.2s; display: inline-block; } .fiche-photo-pagination .swiper-pagination-bullet-active { background: var(--couleur-principale); transform: scale(1.2); } /* Thumbnails — wrapper flex : flèches aux extrémités, swiper au centre */ .fiche-swiper-thumbs-wrapper { display: flex; align-items: center; gap: 6px; width: 100%; margin: 0px; box-sizing: border-box; padding: 0 10px; } .fiche-swiper-thumbs { flex: 1; min-width: 0; overflow: hidden; } /* Flèches des miniatures — désactivées */ .fiche-thumbs-prev, .fiche-thumbs-next { display: none !important; } /* Miniatures centrées quand <= 9 photos */ .fiche-thumbs-centered .fiche-swiper-thumbs .swiper-wrapper { justify-content: center; } .fiche-thumb-slide { width: 82px !important; height: 82px !important; border-radius: 8px; overflow: hidden; cursor: pointer; opacity: 0.6; transition: opacity 0.2s, border-color 0.2s; border: 2px solid transparent; flex-shrink: 0; position: relative; } .fiche-thumb-slide.swiper-slide-thumb-active { opacity: 1; border-color: var(--couleur-principale); } .fiche-thumb-slide img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } /* ================================================ */ /* LIGHTBOX */ /* ================================================ */ #fiche-lightbox { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.92); flex-direction: column; align-items: center; justify-content: center; } #fiche-lightbox-img { max-width: 90vw; max-height: 90vh; height: 70vh; object-fit: contain; border-radius: 4px; user-select: none; -webkit-user-drag: none; } .fiche-lightbox-close { position: absolute; top: 16px; right: 20px; color: #fff; font-size: 32px !important; cursor: pointer; opacity: 0.8; transition: opacity 0.2s; } .fiche-lightbox-close:hover { opacity: 1; } .fiche-lightbox-prev, .fiche-lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 52px !important; cursor: pointer; opacity: 0.7; transition: opacity 0.2s; user-select: none; } .fiche-lightbox-prev { left: 16px; } .fiche-lightbox-next { right: 16px; } .fiche-lightbox-prev:hover, .fiche-lightbox-next:hover { opacity: 1; } .fiche-lightbox-nav-disabled { opacity: 0.2 !important; cursor: default; } #voirfiche #espace_image { position: absolute; z-index: 10; margin: 0; padding: 0; } /* Sections (annonce, préférences, à propos, recommandations) */ .fiche-section { padding: 20px; background: var(--couleur-fond-blanc); font-family: var(--font-corps, 'Inter', sans-serif); border-bottom: 1px solid #f0f0f0; } .fiche-section:last-child { border-bottom: none; } .fiche-section-action { font-size: 12px; font-weight: 500; color: var(--couleur-principale); text-decoration: none; border: 1px solid var(--couleur-principale); border-radius: 20px; padding: 4px 14px; text-transform: none; letter-spacing: 0; transition: all 0.15s ease; } .fiche-section-action:hover { background: var(--couleur-principale); color: #fff; text-decoration: none; } /* Événement + Dernière minute : côte à côte */ .fiche-events-row { display: flex; gap: 12px; align-items: stretch; } .fiche-events-row .modiffiche-card { flex: 1; min-width: 0; } /* Contenu soirée / dernière minute */ .soiree-item, .dernmin-item { padding: 4px 0; } .soiree-titre { font-size: 15px; font-weight: 600; color: #333; margin-bottom: 6px; } .soiree-date { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #666; margin-bottom: 10px; } .soiree-date .material-icons { font-size: 16px !important; color: var(--couleur-principale); } .soiree-body-grid { display: flex; gap: 16px; margin-bottom: 10px; } .soiree-col { flex: 1; min-width: 0; } .soiree-info-row { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #555; margin-bottom: 5px; } .soiree-info-row .material-icons { font-size: 16px !important; color: var(--couleur-principale); flex-shrink: 0; } .soiree-description { font-size: 13px; color: #444; line-height: 1.6; font-style: italic; padding-top: 8px; border-top: 1px solid #f0f0f0; } .soiree-sep { border: none; border-top: 1px solid #eee; margin: 12px 0; } /* Badge Cap d'Agde / Libre ce soir / Déplacement / Nouvel An */ .fiche-cap-badge { display: flex; align-items: center; justify-content: center; gap: 7px; background: var(--couleur-principale); color: #fff; border-radius: 20px; padding: 5px 14px; font-size: 13px; font-weight: 600; margin: 0 auto 12px auto; width: fit-content; max-width: fit-content; white-space: nowrap; } .fiche-cap-badge .material-icons { font-size: 16px !important; color: #fff !important; } /* Badge type + moment (ex: "Webcam cet après-midi") */ .dernmin-type-moment { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--couleur-principale); font-weight: 600; border-radius: 20px; margin-bottom: 10px; } .dernmin-type-moment .material-icons { font-size: 14px !important; } #espace_soiree .form-section-title, #espace_dernieremin .form-section-title { border-bottom: 3px solid #c93e6a; } /* Annonce */ .fiche-annonce-text { font-size: 14px; line-height: 1.7; color: var(--couleur-texte-principal); word-wrap: break-word; } /* Tags / pills (recherche, tendance, hobbies) */ .fiche-tags { display: flex; flex-wrap: wrap; gap: 8px; } .fiche-tag { display: inline-flex; align-items: center; padding: 6px 14px; background: var(--gradient-accent); border: none; border-radius: 20px; font-size: 12px; font-weight: 500; color: #fff; white-space: nowrap; } /* Préférences */ .fiche-pref-group { margin-bottom: 14px; } .fiche-pref-group:last-child { margin-bottom: 0; } .fiche-pref-label { font-size: 12px; font-weight: 600; color: var(--couleur-texte-secondaire); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 8px; } /* À propos */ .fiche-apropos-label { font-size: 12px; font-weight: 600; color: var(--couleur-texte-secondaire); text-transform: uppercase; letter-spacing: 0.3px; margin: 16px 0 10px; } .fiche-apropos-label:first-of-type { margin-top: 0; } /* Tableau informations v5 (utilisé en version compacte : voirfiche-v5) */ .fiche-table-infos { border-collapse: collapse; font-family: var(--font-corps, 'Inter', sans-serif); font-size: 13px; } .fiche-table-infos td { padding: 5px 8px; color: var(--couleur-texte-principal); text-align: left; } .fiche-table-infos .fiche-td-label { font-weight: 600; color: var(--couleur-texte-secondaire); text-align: right; white-space: nowrap; padding-right: 14px; } /* Positionnement du tableau (ajustement visuel manuel) */ .fiche-table-infos.fiche-table-compact { width: 200px; margin-left: auto; margin-right: auto; } .fiche-table-infos.fiche-table-compact1, .fiche-table-infos.fiche-table-compact2 { width: 200px; margin-left: 72px; } /* Profil couple : 2 mini-tableaux côte à côte */ .fiche-apropos-couple { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; } .fiche-apropos-couple .fiche-apropos-col { flex: 1 1 280px; min-width: 260px; max-width: 340px; } .fiche-apropos-col-title { font-family: var(--font-titres, 'Outfit', sans-serif); font-size: 14px; font-weight: 600; text-align: center; padding: 8px 12px; border-bottom: 2px solid #f0f0f0; margin-bottom: 4px; } .fiche-apropos-col-title.mot_femme { color: var(--couleur-principale); } .fiche-apropos-col-title.mot_homme { color: #5b8dd9; } /* Sur mobile : colonnes empilées */ @media (max-width: 600px) { .fiche-apropos-couple { gap: 18px; } .fiche-apropos-couple .fiche-apropos-col { flex: 1 1 100%; max-width: 100%; } } .fiche-apropos-loc { margin-top: 16px; padding-top: 12px; padding-bottom: 20px; border-top: 1px solid #f0f0f0; } /* Bloc localisation compact (3 colonnes : gauche / centre / droite) */ .fiche-loc-compact { display: flex; gap: 30px; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } .fiche-loc-col { display: flex; flex-direction: column; gap: 3px; min-width: 210px; flex: 1 1 0; } /* Localisation : alignée à gauche (par défaut) */ /* Distance : centrée */ .fiche-loc-col:nth-child(2) { text-align: center; align-items: center; } /* Mobilité : alignée à droite */ .fiche-loc-col:nth-child(3) { text-align: right; align-items: flex-end; } .fiche-loc-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #999; } .fiche-loc-value { font-size: 14px; color: #333; } .fiche-badge-certif, .fiche-badge-doute, .fiche-badge-fausse, .fiche-badge-bloque { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: 500; white-space: nowrap; flex-shrink: 0; } .fiche-badge-certif i, .fiche-badge-doute i, .fiche-badge-fausse i, .fiche-badge-bloque i { font-size: 13px; } .fiche-badge-certif { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; } .fiche-badge-doute { background: #fff3e0; color: #e65100; border: 1px solid #ffe0b2; } .fiche-badge-fausse { background: #fdecea; color: #c62828; border: 1px solid #ffcdd2; } .fiche-badge-bloque { background: #fdecea; color: #c62828; border: 1px solid #ffcdd2; } /* Recommandations */ .fiche-commentaires { font-size: 14px; line-height: 1.6; color: var(--couleur-texte-principal); } /* Section recommandations : titre + bouton côte à côte */ #espace_commentaire .form-section-title { display: flex; align-items: center; justify-content: space-between; } /* Info fiche (bandeau Cap d'Agde, soirées, etc.) */ #voirfiche_tabl_info { padding: 8px 16px; background: rgba(var(--couleur-principale-rgb), 0.08); font-size: 13px; color: var(--couleur-texte-principal); border-left: 3px solid var(--couleur-principale); } /* ============================================================ Menu v5 refonte — avril 2026 Topbar (haut) + Sidebar (gauche) + conteneur central Classes prefixées "entree-" pour éviter tout conflit avec l'existant. ============================================================ */ :root { --entree-topbar-h: 64px; /* Sidebar légèrement élargie (265px vs 235 avant) — mai 2026. Elle reste collée au bord gauche (left: 0), fond rose pleine hauteur. */ --entree-sidebar-w: 239px; --entree-online-w: 240px; /* Largeur max du contenu central (iframe) sur grand écran. */ --entree-content-max: 1300px; /* Refonte mai 2026 — "option B hybride" : La sidebar est COLLÉE au bord gauche (left: 0, fond rose plein bord). Le reste du layout (topbar + iframe + panel online) est centré sur la zone disponible à sa droite (100vw - sidebar). --entree-right-max = largeur max de la zone droite = content + panel. --entree-right-margin = marge de chaque côté dans cette zone droite. Sur écran <= sidebar + right_max : marge = 0, comportement identique à V5. Sur écran plus large : le contenu droit se centre, marges grises visibles. */ --entree-right-max: 1540px; --entree-right-margin: max(0px, calc((100vw - var(--entree-sidebar-w) - var(--entree-right-max)) / 2)); --entree-bg: #ffffff; --entree-bg-alt: #f7f7f9; --entree-bg-side: #f2f2f5; --entree-border: #e5e7eb; --entree-text: #1f2937; --entree-text-muted: #6b7280; --entree-accent: var(--couleur-principale); --entree-accent-hover: #d92a5a; --entree-shadow: 0 1px 3px rgba(0,0,0,0.06); } /* ========== TOPBAR ========== */ /* Refonte avril 2026 : la sidebar prend toute la hauteur et contient le logo. La topbar ne couvre plus que la zone à droite de la sidebar. */ .entree-topbar { position: fixed; top: 0; /* La sidebar est collée à gauche ; la topbar couvre la zone à sa droite. --entree-right-margin centre cette zone sur les grands écrans. */ left: var(--entree-sidebar-w); right: var(--entree-right-margin); height: var(--entree-topbar-h); background: var(--entree-bg); border-bottom: 1px solid var(--entree-border); box-shadow: var(--entree-shadow); display: flex; align-items: center; gap: 16px; padding: 0 16px; z-index: 1000; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* Logo désormais dans la sidebar : on garde la classe pour ne rien casser ailleurs, mais on n'attend plus de markup ici. */ .entree-topbar-logo { display: none; } /* Navigation onglets topbar (Recherche / Événements / Dernières minutes) Remplace le formulaire de recherche (refonte 28 avril 2026) space-evenly : espacement identique avant, entre et après chaque onglet, fluide — s'adapte automatiquement à la largeur disponible. */ .entree-topbar-nav { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-evenly; min-width: 0; } .entree-topbar-tab, .entree-topbar-tab:link, .entree-topbar-tab:visited { display: inline-flex; align-items: center; gap: 7px; padding: 7px 18px; margin: 0px 1px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--entree-text-muted); text-decoration: none; border: 1px solid var(--entree-border); background: transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; flex: 0 1 auto; /* ne s'étire pas, peut rétrécir si besoin */ } .entree-topbar-tab:hover, .entree-topbar-tab:focus, .entree-topbar-tab:focus-visible { background: var(--entree-bg-alt); color: var(--entree-text); border-color: var(--entree-accent); text-decoration: none; outline: none; } .entree-topbar-tab.active, .entree-topbar-tab.active:link, .entree-topbar-tab.active:visited { background: var(--entree-accent); color: #fff; border-color: var(--entree-accent); } .entree-topbar-tab.active:hover { background: var(--entree-accent-hover); border-color: var(--entree-accent-hover); color: #fff; } /* Icône dans les onglets : légèrement plus petite que les icônes standalone topbar */ .entree-topbar-tab i.material-icons { font-size: 22px; line-height: 1; } #entree_tb_recherche { padding: 6px 18px 6px 15px; } /* Badge compteur dans les onglets topbar (Événements / Dernières minutes) Aligné avec les autres badges du site (.entree-badge dans la topbar icones) : fond rose plein, texte blanc. */ .entree-topbar-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--entree-accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; box-sizing: border-box; } /* Onglet actif (fond rose plein) : on inverse le badge en blanc/rose pour qu'il reste lisible */ .entree-topbar-tab.active .entree-topbar-tab-count { background: #fff; color: var(--entree-accent); } .entree-topbar-tab-count:empty { display: none; } /* Icones + badges */ .entree-topbar-icons { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; } .entree-icon-btn, .entree-icon-btn:link, .entree-icon-btn:visited { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; color: var(--entree-text-muted); text-decoration: none; transition: background 0.15s, color 0.15s; } /* Tous les etats interactifs : Bootstrap injecte par defaut un text-decoration: underline et une color: blue sur :focus et :active. On bloque tout ca pour conserver le style icone propre. */ .entree-icon-btn:hover, .entree-icon-btn:focus, .entree-icon-btn:focus-visible, .entree-icon-btn:active { background: var(--entree-bg-alt); color: var(--entree-accent); text-decoration: none; outline: none; } .entree-icon-btn i { font-size: 22px; } .entree-badge { position: absolute; top: 2px; left: 22px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--entree-accent); color: #fff; font-size: 11px; font-weight: 700; display: none; align-items: center; justify-content: center; line-height: 1; } .entree-badge:not(:empty) { display: inline-flex; } /* Les scripts JS existants (maj_courrier_enattente, maj_contact_enattente...) injectent
valeur
DANS le span .entree-badge. On neutralise ce wrapper pour n'afficher que le chiffre. */ .entree-badge > div { display: inline; font: inherit; color: inherit; background: transparent; border: 0; padding: 0; margin: 0; } /* Avatar + dropdown */ .entree-topbar-avatar { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border-radius: 10px; border: 1px solid var(--entree-border); cursor: pointer; transition: box-shadow 0.15s; user-select: none; } .entree-topbar-avatar:hover { box-shadow: var(--entree-shadow); } .entree-topbar-avatar-img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } .entree-topbar-avatar-name { font-size: 14px; font-weight: 600; color: var(--entree-text); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .entree-topbar-avatar-chevron { font-size: 20px; color: var(--entree-text-muted); } .entree-avatar-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; background: var(--entree-bg); border: 1px solid var(--entree-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.15s, transform 0.15s, visibility 0.15s; z-index: 1010; } .entree-avatar-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); } .entree-avatar-dropdown a, .entree-avatar-dropdown a:link, .entree-avatar-dropdown a:visited { display: flex; align-items: center; gap: 10px; padding: 9px 12px; color: var(--entree-text); text-decoration: none; border-radius: 6px; font-size: 14px; transition: background 0.1s; } .entree-avatar-dropdown a:hover, .entree-avatar-dropdown a:focus, .entree-avatar-dropdown a:focus-visible, .entree-avatar-dropdown a:active { background: var(--entree-bg-alt); color: var(--entree-accent); text-decoration: none; outline: none; } .entree-avatar-dropdown a i { font-size: 19px; color: var(--entree-text-muted); } .entree-avatar-dropdown a:hover i { color: var(--entree-accent); } /* Séparateur entre les 2 sections (profil / compte) */ .entree-avatar-dropdown-sep { height: 1px; background: var(--entree-border); margin: 6px 4px; } /* Lien Déconnexion : icône accent pour l'identifier visuellement */ .entree-avatar-dropdown-quit i { color: var(--entree-accent); } /* ========== SIDEBAR ========== */ /* Refonte avril 2026 : sidebar pleine hauteur (top:0), elle contient le logo. Z-index supérieur à la topbar (1000) pour que le logo masque visuellement le coin haut-gauche → effet "rail vertical continu" plus moderne. Refonte 2 (28 avril 2026) : fond couleur principale + texte blanc. */ .entree-sidebar { position: fixed; top: 0; /* Collée au bord gauche — fond rose pleine hauteur, ne bouge jamais. */ left: 0; bottom: 0; width: var(--entree-sidebar-w); background: var(--couleur-principale); border-right: 0; box-shadow: 0 0 12px rgba(0,0,0,0.08); overflow-y: auto; overflow-x: hidden; /* Reserve en permanence la place du scrollbar pour eviter que le contenu se decale a gauche quand le scrollbar apparait (au deploiement d'un sous-menu par exemple). Compatibilite >95%, fallback silencieux sur les vieux navigateurs (comportement d'origine). */ scrollbar-gutter: stable; /* Firefox : scrollbar thin et thematise (rose plus fonce sur fond rose) */ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.35) transparent; padding: 0 4px 12px 8px; z-index: 1010; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Flex column pour pouvoir pousser le footer en bas (margin-top:auto). Si le contenu dépasse, le scroll naturel s'active et le footer reste accessible en bas du scroll. */ display: flex; flex-direction: column; } /* Webkit (Chrome/Safari/Edge) : scrollbar thin et thematise */ .entree-sidebar::-webkit-scrollbar { width: 8px; } .entree-sidebar::-webkit-scrollbar-track { background: transparent; } .entree-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.30); border-radius: 4px; } .entree-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.50); } /* Logo intégré en haut de la sidebar (hauteur = topbar pour aligner le bas du logo avec le bas de la topbar). Sticky pour rester visible quand on scrolle dans la sidebar. */ .entree-sidebar-logo { flex: 0 0 auto; height: var(--entree-topbar-h); display: flex; align-items: center; justify-content: center; padding: 0 8px; margin: 0 -8px 12px -8px; /* compense le padding-x de .entree-sidebar */ background: var(--couleur-principale); position: sticky; top: 0; z-index: 2; } .entree-sidebar-logo a { display: block; line-height: 0; } .entree-sidebar-logo img { height: 44px; width: auto; display: block; transition: transform 0.15s; /* Le logo PNG est rose/coloré, sur fond rose il faut le passer en blanc. brightness(0)=tout noir, invert(1)=tout blanc, en conservant la transparence. */ filter: brightness(0) invert(1); } /* Banniere promo au-dessus du menu */ .entree-sidebar-promo { margin-bottom: 16px; text-align: center; } .entree-sidebar-promo img { max-width: 100%; height: auto; border-radius: 6px; } /* CTA inversée : sur fond rose principal, on bascule en bouton blanc texte rose */ .entree-sidebar-promo-cta { display: block; padding: 10px 12px; background: #fff; color: var(--couleur-principale); border-radius: 8px; font-weight: 700; font-size: 13px; text-align: center; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; } .entree-sidebar-promo-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.18); color: var(--couleur-principale-hover); text-decoration: none; } /* User block */ .entree-sidebar-user { display: flex; align-items: center; gap: 10px; padding: 8px 6px 14px 6px; border-bottom: 1px solid rgba(255,255,255,0.22); margin-bottom: 10px; } .entree-sidebar-user-img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 44px; border: 2px solid #fff; background-color: white; } .entree-sidebar-user-info { min-width: 0; } .entree-sidebar-user-name { font-weight: 700; font-size: 14px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .entree-sidebar-user-link { font-size: 12px; color: rgba(255,255,255,0.85); text-decoration: none; } .entree-sidebar-user-link:hover { color: #fff; text-decoration: underline; } /* Menu — refonte sidebar foncée (28 avril 2026) : sur fond rose, items en blanc */ .entree-sidebar-menu { display: flex; flex-direction: column; gap: 2px; } /* Section header (non utilisé en markup actuellement, conservé pour éventuel futur usage) */ .entree-sidebar-section { padding: 14px 10px 4px 10px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.6); user-select: none; } /* Sub-item : lien indenté dans un sous-menu dépliable */ .entree-sidebar-subitem, .entree-sidebar-subitem:link, .entree-sidebar-subitem:visited { display: block; padding: 7px 10px 7px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.88); text-decoration: none; transition: background 0.1s, color 0.1s; } .entree-sidebar-subitem:hover, .entree-sidebar-subitem:focus, .entree-sidebar-subitem:focus-visible, .entree-sidebar-subitem:active { background: rgba(255,255,255,0.16); color: #fff; text-decoration: none; outline: none; } /* Les boutons toggle (Rencontres, Plus) : légèrement plus gras pour les distinguer des items directs simples */ .entree-sidebar-toggle { font-weight: 700; } .entree-sidebar-item, .entree-sidebar-item:link, .entree-sidebar-item:visited { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 10px; border-radius: 8px; color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; background: transparent; border: 0; text-align: left; cursor: pointer; transition: background 0.1s, color 0.1s; } /* Hover/focus : voile blanc translucide. Bootstrap réapplique parfois color:blue et text-decoration:underline sur :focus/:active → on neutralise. */ .entree-sidebar-item:hover, .entree-sidebar-item:focus, .entree-sidebar-item:focus-visible, .entree-sidebar-item:active { background: rgba(255,255,255,0.16); color: #fff; text-decoration: none; outline: none; } .entree-sidebar-item > i.material-icons:first-child { font-size: 22px; color: #fff; flex: 0 0 22px; width: 22px; height: 22px; line-height: 22px; overflow: hidden; text-align: center; box-sizing: content-box; } .entree-sidebar-item:hover > i.material-icons:first-child { color: #fff; } .entree-sidebar-item > span { flex: 1; } /* Compteur (événements / dernières minutes) : pastille blanche, texte couleur principale. min-width dimensionné pour contenir 3 chiffres : largeur uniforme 1-999. */ .entree-sidebar-count { flex: 0 0 auto; min-width: 30px; height: 20px; padding: 0 5px; border-radius: 10px; background: #fff; color: var(--couleur-principale); font-size: 11px; font-weight: 800; line-height: 20px; text-align: center; box-sizing: border-box; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,0.12); } /* Masque le badge si vide (pas de compteur à afficher) */ .entree-sidebar-count:empty { display: none; } .entree-sidebar-chevron { font-size: 20px; color: rgba(255,255,255,0.85); transition: transform 0.2s; } .entree-sidebar-toggle.open .entree-sidebar-chevron { transform: rotate(180deg); } .entree-sidebar-submenu { display: none; flex-direction: column; padding: 2px 0 6px 44px; } .entree-sidebar-submenu.open { display: flex; } .entree-sidebar-submenu a, .entree-sidebar-submenu a:link, .entree-sidebar-submenu a:visited { padding: 7px 10px; border-radius: 6px; font-size: 13px; color: rgba(255,255,255,0.85); text-decoration: none; transition: background 0.1s, color 0.1s; } .entree-sidebar-submenu a:hover, .entree-sidebar-submenu a:focus, .entree-sidebar-submenu a:focus-visible, .entree-sidebar-submenu a:active { background: rgba(255,255,255,0.16); color: #fff; text-decoration: none; outline: none; } /* Espace Admin — blanc comme les autres items. box-shadow inset à gauche (ignore le border-radius, s'affiche sur toute la hauteur) pour l'indicateur violet admin. */ .entree-sidebar-admin { margin-top: 8px; border-top: 1px solid rgba(255,255,255,0.22); padding-top: 14px; color: #fff; box-shadow: inset 3px 0 0 var(--couleur-admin); } .entree-sidebar-admin > i.material-icons:first-child { color: #fff; } .entree-sidebar-admin:hover { background: rgba(255,255,255,0.16); color: #fff; box-shadow: inset 3px 0 0 var(--couleur-admin); } .entree-sidebar-admin:hover > i.material-icons:first-child { color: #fff; } /* Footer */ .entree-sidebar-footer { /* margin-top:auto pousse le footer tout en bas de la sidebar (flex column). Si le contenu menu dépasse, ça reste après le contenu et accessible via scroll. */ margin-top: auto; padding: 12px 8px 4px 8px; border-top: 1px solid rgba(255,255,255,0.22); display: flex; flex-direction: column; gap: 6px; font-size: 11px; color: rgba(255,255,255,0.75); opacity: 1; flex-shrink: 0; } .entree-sidebar-slogan { color: #fff; font-size: 9px; line-height: 1.3; font-weight: 700; text-align: center; opacity: 0.9; } .entree-sidebar-footer-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; } .entree-sidebar-footer a { color: rgba(255,255,255,0.85); text-decoration: none; } .entree-sidebar-footer a:hover { color: #fff; text-decoration: underline; } .entree-sidebar-footer-links-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; } .entree-sidebar-footer-links-grid > a { text-align: center; } /* Scrollbar discrète sur fond rose : barre blanche translucide */ .entree-sidebar { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.35) transparent; } .entree-sidebar::-webkit-scrollbar { width: 6px; } .entree-sidebar::-webkit-scrollbar-track { background: transparent; } .entree-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35); border-radius: 3px; } .entree-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.55); } /* ========== CONTENU CENTRAL ========== */ .entree-espace-contenu, body > #espace_contenu { margin-top: var(--entree-topbar-h); margin-left: var(--entree-sidebar-w); min-height: calc(100vh - var(--entree-topbar-h)); padding: 16px; box-sizing: border-box; } /* Neutralisation de l'ancien layout menu_gauche / menu_activite / conteneur_avc_recherche pour les pages v5 qui intègrent la nouvelle topbar/sidebar. On ne casse pas la v4 (classes entree-* sont spécifiques). */ body:has(.entree-topbar) #menu_activite, body:has(.entree-topbar) #menu_gauche, body:has(.entree-topbar) #conteneur_avc_recherche > #menu { display: none; } /* ---- Libellés sidebar : évite le débordement horizontal ---- Exclut .entree-sidebar-count (badge compteur) qui a ses propres dimensions. */ .entree-sidebar .entree-sidebar-item > span:not(.entree-sidebar-count) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ===================================================================== PAGE ENTREE V5 — entree.cgi (refonte avril 2026) La topbar et la sidebar sont rendues directement dans le page entree (parent). L'iframe centrale (#entree_milieu) doit être positionnée entre les deux. ===================================================================== */ /* Refonte mai 2026 — hybride : La sidebar reste collée à gauche (fond rose plein bord, jamais déplacée). La zone droite (topbar + iframe + panel) est centrée dans l'espace disponible à droite de la sidebar, via --entree-right-margin. Sous le seuil (sidebar + right_max = 1805px), la marge est 0 et rien ne change. Au-delà, seule la marge DROITE apparaît (bande grise à droite du panel online) — la sidebar rose reste visible sur tout le bord gauche, effet "ancre visuelle". */ body.entree { background: var(--entree-bg-side); } /* Iframe centrale : à droite de la sidebar, limitée à droite par --entree-right-margin (qui vaut 0 sous le seuil, et pousse le contenu vers le centre au-delà). */ body.entree #entree_milieu { position: fixed; top: var(--entree-topbar-h); left: var(--entree-sidebar-w); right: var(--entree-right-margin); bottom: 0; width: auto; min-width: 0; } body.entree #entree_milieu > iframe { width: 100%; height: 100%; display: block; } /* Spinner de chargement : affiché par-dessus l'iframe tant que la page n'est pas chargée. Disparaît via onload="...style.display='none'" */ #entree_milieu_loader { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: var(--entree-bg, #f8f8f8); pointer-events: none; } .entree-loader-spinner { width: 44px; height: 44px; border: 4px solid rgba(235, 64, 109, 0.2); border-top-color: var(--couleur-principale, #eb406d); border-radius: 50%; animation: entree-spin 0.75s linear infinite; } @keyframes entree-spin { to { transform: rotate(360deg); } } /* Plus de menu gauche en surcouche : la sidebar fait office */ body.entree #entree_gauche { display: none; } /* Le bloc chat reste en bas-droite ; on remonte juste son z-index pour qu'il passe au-dessus de l'iframe. */ body.entree #chat_dial_bloc { z-index: 800; } /* ===================================================================== PROFILS ONLINE V5 — bloc colonne droite (refonte avril 2026) Container :
Architecture : header sticky + body (libresoir + filtres + tri + list) Données : fetch JSON sur liste_user.cgi via le module OnlineList. ===================================================================== */ body.entree #user_enligne_bloc.entree-online { position: fixed; top: var(--entree-topbar-h); /* Panel collé au bord droit de la zone droite centrable. */ right: var(--entree-right-margin); bottom: 0; width: var(--entree-online-w); height: auto; background: var(--entree-bg); border-left: 1px solid var(--entree-border); display: flex; flex-direction: column; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 13px; color: var(--entree-text); z-index: 600; transition: height 0.25s ease, top 0.25s ease; } /* Réduit la largeur de l'iframe centrale quand le bloc est présent */ body.entree.has-online-panel #entree_milieu { right: calc(var(--entree-right-margin) + var(--entree-online-w)); } /* État replié : le bloc se collapse en hauteur (header seul, collé en bas- droite), libérant toute la largeur ET la hauteur pour l'iframe centrale. */ body.entree #user_enligne_bloc.entree-online.is-collapsed { top: auto; bottom: 0; height: auto; width: var(--entree-online-w); border-top: 1px solid var(--entree-border); } body.entree.has-online-panel.online-collapsed #entree_milieu { right: var(--entree-right-margin); } .entree-online.is-collapsed .entree-online-body, .entree-online.is-collapsed .entree-online-chat-bar { display: none; } .entree-online.is-collapsed .entree-online-header { border-bottom: none; } .entree-online.is-collapsed .entree-online-chevron { transform: rotate(180deg); } /* Barre de chat conservée mais discrète en v5 (sera retravaillée plus tard) */ .entree-online .entree-online-chat-bar { flex: 0 0 auto; border-bottom: 1px solid var(--entree-border); background: var(--entree-bg-alt); } /* Header sticky */ .entree-online .entree-online-header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--entree-border); background: var(--entree-bg); cursor: pointer; user-select: none; transition: background 0.12s; } .entree-online .entree-online-header:hover { background: var(--entree-bg-alt); } .entree-online .entree-online-chevron { font-size: 22px; color: var(--entree-text-muted); transition: transform 0.25s; } .entree-online .entree-online-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--entree-text); } .entree-online .entree-online-title .material-icons { font-size: 20px; color: var(--entree-accent); } .entree-online .entree-online-total { font-size: 12px; font-weight: 500; color: var(--entree-text-muted); background: var(--entree-bg-alt); border-radius: 10px; padding: 2px 8px; } /* Footer (sticky en bas) avec le bouton plier/deplier */ /* Body */ .entree-online .entree-online-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } /* Disponible ce soir */ .entree-online .entree-online-libre { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 2px 12px; border-bottom: 1px solid var(--entree-border); background: var(--entree-bg-alt); } .entree-online .entree-online-libre input[type="checkbox"] { margin: 0; cursor: pointer; accent-color: var(--entree-accent); } .entree-online .entree-online-libre label { cursor: pointer; font-size: 12px; color: var(--entree-text); font-weight: 500; padding: 7px 0px 0px 0px; } /* Toolbar filtres : labels textuels courts (les Material Icons recents transgender/verified/nightlife/auto_awesome ne sont pas dans la version bundlee, donc on evite les boutons vides). */ .entree-online .entree-online-filters { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px; border-bottom: 1px solid var(--entree-border); } .entree-online .entree-online-filters--gay { grid-template-columns: repeat(3, 1fr); } .entree-online .entree-online-filter { height: 26px; padding: 0 4px; background: transparent; border: 1px solid var(--entree-border); border-radius: 6px; color: var(--entree-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; transition: all 0.15s; white-space: nowrap; } .entree-online .entree-online-filter:hover { background: var(--entree-bg-alt); color: var(--entree-text); border-color: var(--entree-text-muted); } .entree-online .entree-online-filter.is-active { background: var(--entree-accent); color: #fff; border-color: var(--entree-accent); } /* Tri */ .entree-online .entree-online-sort { flex: 0 0 auto; padding: 6px 8px; border-bottom: 1px solid var(--entree-border); } .entree-online .entree-online-sort select { width: 100%; border: 1px solid var(--entree-border); border-radius: 6px; padding: 5px 8px; font-size: 12px; background: var(--entree-bg); color: var(--entree-text); cursor: pointer; } .entree-online .entree-online-sort select:focus { outline: none; border-color: var(--entree-accent); } /* Liste scrollable */ .entree-online .entree-online-list { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 6px 0; scrollbar-width: thin; } .entree-online .entree-online-list::-webkit-scrollbar { width: 6px; } .entree-online .entree-online-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; } /* État vide / loading */ .entree-online .entree-online-empty, .entree-online .entree-online-loading { padding: 24px 12px; text-align: center; color: var(--entree-text-muted); font-size: 12px; } /* Footer pagination scroll-infinite (modes Cpl/F/H/T/Cert/Libre) */ .entree-online .entree-online-footer { padding: 10px 12px 14px; text-align: center; color: var(--entree-text-muted); font-size: 11px; letter-spacing: 0.3px; opacity: 0.75; } .entree-online .entree-online-footer.is-loading { font-style: italic; opacity: 1; } /* Animations diff incremental (refreshPagedSilent toutes les 5s) - Fade-in nouvelles cards : pilote 100% en JS via opacity + transition inline (cf. applyDiff dans entree.cgi). C'est plus fiable que `animation` CSS qui peut etre ignoree par le batching navigateur sur certaines cards (symptome : card visible direct, sans fade). Donc : PAS de regle .is-entering ici, tout est inline. - Fade-out : keyframe + classe (plus simple car on a juste a `removeChild` a la fin, la classe disparait avec). /!\ Pas de transform: translateY : sur des durees longues (>1s), l'interpolation sub-pixel rend le texte flou pendant l'anim. */ @keyframes entree-online-card-leave { from { opacity: 1; } to { opacity: 0; } } .entree-online .entree-online-card.is-leaving { will-change: opacity; animation: entree-online-card-leave 0.45s ease-in forwards; pointer-events: none; } /* Card profil */ .entree-online .entree-online-card { display: flex; align-items: center; gap: 10px; padding: 8px 12px; text-decoration: none; color: inherit; border-bottom: 1px solid #f1f1f3; transition: background 0.12s; cursor: pointer; } .entree-online .entree-online-card:hover { background: var(--entree-bg-alt); } .entree-online .entree-online-card.is-new { background: rgba(var(--couleur-principale-rgb), 0.04); } .entree-online .entree-online-card-photo { flex: 0 0 auto; position: relative; width: 56px; height: 56px; } .entree-online .entree-online-card-photo img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--entree-bg-alt); border: 2px solid var(--entree-bg); box-shadow: 0 0 0 1px var(--entree-border), 0 1px 3px rgba(0,0,0,0.08); display: block; transition: transform 0.18s ease, box-shadow 0.18s ease; } .entree-online .entree-online-card:hover .entree-online-card-photo img { transform: scale(1.04); box-shadow: 0 0 0 1px var(--entree-accent), 0 2px 6px rgba(0,0,0,0.12); } /* Dot online (vert) */ .entree-online .entree-online-card-dot { position: absolute; bottom: 2px; right: 2px; width: 13px; height: 13px; background: #22c55e; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(34,197,94,0.3); } .entree-online .entree-online-card-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .entree-online .entree-online-card-name { display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 13px; color: var(--entree-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .entree-online .entree-online-card-name .material-icons { font-size: 14px; color: var(--entree-accent); flex: 0 0 auto; } .entree-online .entree-online-card-meta { font-size: 11px; color: var(--entree-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .entree-online .entree-online-card-loc { font-size: 11px; color: var(--entree-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .entree-online .entree-online-card-badges { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1px; max-width: 16px; } .entree-online .entree-online-card-badges .material-icons { font-size: 13px; color: var(--entree-text-muted); line-height: 1; } .entree-online .entree-online-card-badges .entree-badge-video { color: var(--entree-accent); } .entree-online .entree-online-card-badges .entree-badge-libre { color: #f59e0b; } .entree-online .entree-online-card-badges .entree-badge-new { color: #22c55e; } .entree-online .entree-online-card-badges .entree-badge-fav { color: #ef4444; } /* Animation d'apparition d'une nouvelle card (sliding refresh) */ @keyframes entree-online-fade-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .entree-online .entree-online-card.is-fresh { animation: entree-online-fade-in 0.4s ease; } /* Responsive : sous 1100px on rétrécit, sous 900px on cache */ @media (max-width: 1100px) { body.entree #user_enligne_bloc.entree-online { width: 220px; } body.entree.has-online-panel #entree_milieu { right: 220px; } } @media (max-width: 900px) { body.entree #user_enligne_bloc.entree-online { display: none; } body.entree.has-online-panel #entree_milieu { right: 0; } } /* ============================================================================ PAGE ENTREE V5 - Chat dialogue (chat_dial_bloc) Scope : body.entree #chat_dial_bloc Refonte avril 2026 - inspire de la version mobile (Nuxt2) STRUCTURE PROPRE : les regles legacy v4 sur ces memes IDs sont scopees a `body:not(.entree)` (debut de fichier + ligne ~5230 pour .ann_contact_*) donc elles ne s'appliquent PAS ici. Pas besoin de !important pour les surcharger. !important conserves UNIQUEMENT pour neutraliser les styles INLINE poses par le JS legacy non modifie : `position`, `right/left/top/bottom`, et `display` via attribute selectors `[style*="display: ..."]`. Tout le reste est propre. ============================================================================ */ /* --- Variables locales chat --- Le chat coexiste avec la sidebar gauche (--entree-sidebar-w = 240px) et le panneau online a droite (--entree-online-w = 240px). On tente d'occuper la place ideale mais on s'adapte si la viewport est trop etroite. Largeur reelle disponible : - panneau online deplie : 100vw - 240 (gauche) - 240 (droite) - 24 (marges) - panneau online replie : 100vw - 240 (gauche) - 24 (marges) On utilise clamp() pour garantir une largeur min meme sur tres petits ecrans. */ body.entree #chat_dial_bloc { --chat-accent: var(--couleur-principale); --chat-bg: #ffffff; --chat-text: #2b2b2b; --chat-text-muted: #8a8a8a; --chat-border: #e6e6e6; --chat-list-bg: #f7f7f9; --chat-list-w: 130px; --chat-msg-min-w: 280px; /* zone messages minimum confortable */ --chat-w-min: 420px; /* largeur min absolue : liste 130 + msg 280 + marges */ --chat-w-ideal: 550px; /* mode normal (sans webcam) */ --chat-w-ideal-webcam: 920px; /* mode webcam mono ou dual */ --chat-avail-w: calc(100vw - var(--entree-sidebar-w) - var(--entree-online-w) - 24px); --chat-w: clamp(var(--chat-w-min), var(--chat-avail-w), var(--chat-w-ideal)); --chat-h-ideal: 540px; --chat-h: clamp(360px, calc(100vh - var(--entree-topbar-h) - 16px), var(--chat-h-ideal)); --chat-mini-w: 240px; --chat-mini-h: 44px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; transition: width 0.25s ease, height 0.25s ease; } /* Quand le panneau online est replie : la largeur disponible tient compte de la sidebar et de la marge droite si on est sur grand ecran. */ body.entree.online-collapsed #chat_dial_bloc { --chat-avail-w: calc(100vw - var(--entree-sidebar-w) - var(--entree-right-margin) - 24px); } /* Mode webcam active : - 1 cam (sa OU ma) : zone video ~360x270 (4/3), chat ~920x580 idealement - 2 cams (sa ET ma) : zones video stackees, chat ~920x720 idealement Largeur ET hauteur s'adaptent a la viewport quand l'ecran est trop petit. Ratio 4/3 dicte par les constraints du SDK (videoWidth=160, videoHeight=120). Classes posees/enlevees par chatpop.cgi (MutationObserver). */ body.entree #chat_dial_bloc.webcam-active { --chat-w: clamp(var(--chat-w-min), var(--chat-avail-w), var(--chat-w-ideal-webcam)); --chat-h: clamp(420px, calc(100vh - var(--entree-topbar-h) - 16px), 580px); } body.entree #chat_dial_bloc.webcam-active.dual-webcam { --chat-h: clamp(480px, calc(100vh - var(--entree-topbar-h) - 16px), 720px); } body.entree #chat_dial_bloc.webcam-active #chat_dial_haut, body.entree #chat_dial_bloc.webcam-active #chat_dial_action { transition: width 0.25s ease, bottom 0.25s ease, height 0.25s ease; } /* --- Mini-bar (etat reduit, en bas-droite) --- */ body.entree #chat_dial_bloc #chat_dial_mini { /* position/right/left/top/bottom forces parce que le JS legacy peut set inline */ position: fixed !important; right: calc(var(--entree-right-margin) + 250px) !important; left: auto !important; top: auto !important; bottom: 0 !important; width: var(--chat-mini-w); height: var(--chat-mini-h); background: var(--chat-accent); color: #fff; display: none; align-items: center; gap: 4px; padding: 0 8px; border-radius: 10px 10px 0 0; box-shadow: 0 -2px 12px rgba(0,0,0,0.15); font-size: 14px; font-weight: 600; z-index: 700; } /* JS legacy set display:block inline -> on force flex */ body.entree #chat_dial_bloc #chat_dial_mini[style*="display: block"], body.entree #chat_dial_bloc #chat_dial_mini[style*="display:block"] { display: flex !important; } /* Ordre flex des enfants (les regles v4 sont neutralisees par body:not(.entree)) */ body.entree #chat_dial_bloc #chat_dial_mini #sound { order: 0; } body.entree #chat_dial_bloc #chat_dial_mini #grand { order: 1; flex: 1; } body.entree #chat_dial_bloc #chat_dial_mini #grand2 { order: 2; } body.entree #chat_dial_bloc #chat_dial_mini #ferme { order: 3; } body.entree #chat_dial_bloc #chat_dial_mini .entree-chat-mini-icon a, body.entree #chat_dial_bloc #chat_dial_mini .entree-chat-mini-label a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; transition: background 0.15s ease; } body.entree #chat_dial_bloc #chat_dial_mini .entree-chat-mini-icon a:hover, body.entree #chat_dial_bloc #chat_dial_mini .entree-chat-mini-label a:hover { background: rgba(255,255,255,0.15); } body.entree #chat_dial_bloc #chat_dial_mini .entree-chat-mini-label .nbr:not(:empty) { background: #fff; color: var(--chat-accent); border-radius: 10px; padding: 0 6px; font-size: 11px; margin-left: 4px; } body.entree #chat_dial_bloc #chat_dial_mini .material-icons { font-size: 18px; color: #fff; } /* --- Fenetre ouverte : header + body --- Le JS legacy (chatpop_fenetre_grande/reduite/ferme) force position/top/left/display inline -> on force position/right/left/top et utilise des attribute selectors pour display. */ body.entree #chat_dial_bloc #chat_dial_haut, body.entree #chat_dial_bloc #chat_dial_action { position: fixed !important; right: calc(var(--entree-right-margin) + 250px) !important; left: auto !important; top: auto !important; width: var(--chat-w); background: var(--chat-bg); border-left: 1px solid var(--chat-border); border-right: 1px solid var(--chat-border); z-index: 700; box-sizing: border-box; } /* --- Header global (titre Chat + boutons + header conversation dynamique) --- */ body.entree #chat_dial_bloc #chat_dial_haut { bottom: var(--chat-h) !important; border-top: 1px solid var(--chat-border); border-radius: 10px 10px 0 0; box-shadow: 0 -4px 16px rgba(0,0,0,0.1); overflow: visible; display: none; flex-direction: column; z-index: 710 !important; transition: bottom 0.25s ease, width 0.25s ease; } body.entree #chat_dial_bloc #chat_dial_haut[style*="display: block"], body.entree #chat_dial_bloc #chat_dial_haut[style*="display:block"], body.entree #chat_dial_bloc #chat_dial_haut[style*="display: inline"] { display: flex !important; } body.entree #chat_dial_bloc #chat_dial_haut #titre { height: 38px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; background: var(--chat-bg); border-bottom: 1px solid var(--chat-border); position: relative; } body.entree #chat_dial_bloc #chat_dial_haut #titre #titre_centre { flex: 1; text-align: center; font-weight: 700; color: var(--chat-accent); font-size: 16px; letter-spacing: 0.3px; } body.entree #chat_dial_bloc #chat_dial_haut .entree-chat-header-icon { flex: 0 0 auto; display: inline-flex; align-items: center; } body.entree #chat_dial_bloc #chat_dial_haut .entree-chat-header-icon a { color: var(--chat-text-muted); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; transition: background 0.15s ease, color 0.15s ease; } body.entree #chat_dial_bloc #chat_dial_haut .entree-chat-header-icon a:hover { color: var(--chat-accent); background: rgba(var(--couleur-principale-rgb), 0.08); } body.entree #chat_dial_bloc #chat_dial_haut .entree-chat-header-icon .material-icons { font-size: 20px; } /* Ordre des icones : sound a gauche | titre centre | reduire + fermer a droite */ body.entree #chat_dial_bloc #chat_dial_haut #titre #sound { order: 0; margin-right: auto; } body.entree #chat_dial_bloc #chat_dial_haut #titre #titre_centre { order: 1; } body.entree #chat_dial_bloc #chat_dial_haut #titre #reduc { order: 2; margin-left: auto; } body.entree #chat_dial_bloc #chat_dial_haut #titre #ferme { order: 3; } /* --- Header par conversation : photo + pseudo + actions --- Le JS chatpop_render_header set display:flex inline pour montrer le bloc. On capture display:flex et display:block (au cas ou) pour garantir le layout. */ body.entree #chat_dial_bloc #chatpop_user_header { align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--chat-border); background: var(--chat-bg); } body.entree #chat_dial_bloc #chatpop_user_header[style*="display: flex"], body.entree #chat_dial_bloc #chatpop_user_header[style*="display:flex"], body.entree #chat_dial_bloc #chatpop_user_header[style*="display: block"], body.entree #chat_dial_bloc #chatpop_user_header[style*="display:block"] { display: flex !important; } body.entree #chat_dial_bloc .entree-chat-userhead-photo { flex: 0 0 auto; width: 48px; height: 48px; position: relative; display: block; } body.entree #chat_dial_bloc .entree-chat-userhead-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--chat-border); box-sizing: border-box; } /* Point vert "en ligne" positionne sur la photo du header chat v5. Visible uniquement si .online est applique par entree_chat_update_online_dot(). */ body.entree #chat_dial_bloc .entree-chat-userhead-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #9ca3af; /* gris = offline/inconnu */ border: 2px solid #fff; box-sizing: content-box; display: none; pointer-events: none; } body.entree #chat_dial_bloc .entree-chat-userhead-dot.online { display: block; background: #22c55e; /* vert en ligne */ } /* Note : flex:1 est desormais sur .entree-chat-userhead-info (wrapper nom+type). Le nom lui-meme (flex:none) est stylee dans la section "Refonte v5" en bas. */ body.entree #chat_dial_bloc .entree-chat-userhead-name { flex: 1; font-weight: 600; color: var(--chat-text); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.entree #chat_dial_bloc .entree-chat-userhead-actions { display: flex; align-items: center; gap: 4px; } body.entree #chat_dial_bloc .entree-chat-userhead-action a { color: var(--chat-text-muted); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; transition: background 0.15s ease, color 0.15s ease; } body.entree #chat_dial_bloc .entree-chat-userhead-action a:hover { background: rgba(var(--couleur-principale-rgb), 0.1); color: var(--chat-accent); } body.entree #chat_dial_bloc .entree-chat-userhead-action .material-icons { font-size: 20px; } /* Coeur favoris : la classe .ann_contact_actif (toggle JS) bascule en rouge plein pour bonne lisibilite (le rose du chat-accent etait trop proche du fond/texte). Hover sur l'inactif : on garde le chat-accent classique pour rester subtil. */ body.entree #chat_dial_bloc #chatpop_uh_fav a:hover .material-icons { color: var(--chat-accent); } body.entree #chat_dial_bloc #chatpop_uh_fav a.ann_contact_actif .material-icons { color: #e53935; } /* Swap automatique de l'icone material-icons selon l'etat .ann_contact_actif : meme convention que voirfiche (cf. #voirfiche_coeur), permet a affiche_contact() de synchroniser le coeur du chat sans toucher au DOM de l'icone. */ body.entree #chat_dial_bloc #chatpop_uh_fav a.ann_contact_actif i.material-icons { font-size: 0 !important; } body.entree #chat_dial_bloc #chatpop_uh_fav a.ann_contact_actif i.material-icons::before { content: '\e87d'; font-family: 'Material Icons'; font-size: 20px; line-height: 1; color: #e53935; } /* Note active (rouge) sur notre bouton chat -> meme convention que voirfiche / chatpop */ body.entree #chat_dial_bloc #chatpop_uh_note a.fiche-note-actif .material-icons { color: var(--chat-accent); } /* --- Menu kebab dropdown --- */ body.entree #chat_dial_bloc .entree-chat-kebab-wrap { position: relative; } body.entree #chat_dial_bloc .entree-chat-kebab-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; background: #fff; border: 1px solid var(--chat-border); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.18); padding: 6px 0; display: none; z-index: 9999; } body.entree #chat_dial_bloc .entree-chat-kebab-menu.open { display: block; } body.entree #chat_dial_bloc .entree-chat-kebab-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 14px; color: var(--chat-text); text-decoration: none; font-size: 14px; white-space: nowrap; background: transparent; justify-content: flex-start; text-align: left; } body.entree #chat_dial_bloc .entree-chat-kebab-menu a:hover { background: #f5f5f7; color: var(--chat-accent); } body.entree #chat_dial_bloc .entree-chat-kebab-menu a .material-icons { font-size: 18px; color: var(--chat-text-muted); } body.entree #chat_dial_bloc .entree-chat-kebab-menu a:hover .material-icons { color: var(--chat-accent); } /* Item "danger" : Supprimer la conversation -> rose accent */ body.entree #chat_dial_bloc .entree-chat-kebab-menu a#chatpop_kebab_supp, body.entree #chat_dial_bloc .entree-chat-kebab-menu a#chatpop_kebab_supp .material-icons { color: var(--chat-accent); } /* --- Body : liste utilisateurs + zone messages --- */ body.entree #chat_dial_bloc #chat_dial_action { bottom: 0 !important; height: var(--chat-h); border-bottom: 1px solid var(--chat-border); border-radius: 0px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); display: none; overflow: hidden; transition: height 0.25s ease, width 0.25s ease; } body.entree #chat_dial_bloc #chat_dial_action[style*="display: block"], body.entree #chat_dial_bloc #chat_dial_action[style*="display:block"], body.entree #chat_dial_bloc #chat_dial_action[style*="display: initial"], body.entree #chat_dial_bloc #chat_dial_action[style*="display:initial"] { display: block !important; } body.entree #chat_dial_bloc #chat_dial_action::after { content: ""; display: block; clear: both; } body.entree #chat_dial_bloc #chat_dial_liste { float: left; width: var(--chat-list-w); height: 100%; background: var(--chat-list-bg); border-right: 1px solid var(--chat-border); overflow-y: auto; box-sizing: border-box; padding: 6px 0; } body.entree #chat_dial_bloc #chat_dial_liste > div { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; font-size: 13px; color: var(--chat-text); cursor: pointer; border-left: 3px solid transparent; } body.entree #chat_dial_bloc #chat_dial_liste > div:hover { background: rgba(var(--couleur-principale-rgb), 0.06); } body.entree #chat_dial_bloc #chat_dial_liste > div.surbrillance { background: rgba(var(--couleur-principale-rgb), 0.12); color: var(--chat-accent); font-weight: 600; } body.entree #chat_dial_bloc #chat_dial_liste > div.attente { font-weight: 700; color: var(--chat-accent); } body.entree #chat_dial_bloc #chat_dial_liste > div.attente::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--chat-accent); border-radius: 50%; margin-right: 4px; animation: entree-chat-pulse 1.5s ease-in-out infinite; } @keyframes entree-chat-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } body.entree #chat_dial_bloc #chat_dial_message { margin-left: var(--chat-list-w); height: 100%; background: #fafafa; overflow: hidden; position: relative; /* JS legacy (chat_voir) force "display: initial" inline qui vaut "inline" pour un
-> on reforce block pour que width/height s'appliquent */ display: block !important; } /* bloc_pseudo : conteneur d'une conversation. Le JS legacy met "display: initial" inline (= inline) sur la conversation active + "position: absolute; top: 1000px; left: -10000px" sur les conversations cachees. On veut que l'active prenne tout l'espace et que les cachees restent hors vue. On force display:block systematiquement (le masquage se fait via le position:absolute hors-ecran, pas via display). */ body.entree #chat_dial_bloc #chat_dial_message .bloc_pseudo { width: 100% !important; height: 100% !important; display: block !important; box-sizing: border-box; } /* chat_user_iframe : wrapper autour de l'iframe chatpop -> full taille */ body.entree #chat_dial_bloc #chat_dial_message #chat_user_iframe, body.entree #chat_dial_bloc #chat_dial_message .bloc_pseudo > div { float: none !important; width: 100% !important; height: 100% !important; box-sizing: border-box; } /* iframe chatpop elle-meme : full taille, pas les 478px legacy */ body.entree #chat_dial_bloc #chat_dial_message iframe, body.entree #chat_dial_bloc #chat_dial_message .chat_iframe_up { width: 100% !important; height: 100% !important; border: 0; display: block; } body.entree #chat_dial_bloc .entree-chat-empty { padding: 24px 16px; text-align: center; color: var(--chat-text-muted); font-size: 13px; line-height: 1.5; } /* Responsive : sous 720px on bascule full-width pour le chat */ @media (max-width: 720px) { body.entree #chat_dial_bloc { --chat-w: calc(100vw - 8px); --chat-mini-w: calc(100vw - 8px); } body.entree #chat_dial_bloc #chat_dial_haut, body.entree #chat_dial_bloc #chat_dial_action, body.entree #chat_dial_bloc #chat_dial_mini { right: 4px !important; } } /* ============================================================= Refonte v5 — Colonne gauche simplifiee (pseudo + croix seuls) ============================================================= */ /* item .ligne_user : pseudo cliquable a gauche + croix a droite */ body.entree #chat_dial_bloc #chat_dial_liste > .ligne_user { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 10px; gap: 4px; } /* Lien pseudo (occupe tout l'espace restant) */ body.entree #chat_dial_bloc #chat_dial_liste > .ligne_user .info_user { flex: 1 1 auto; overflow: hidden; text-decoration: none; color: inherit; min-width: 0; } /* Texte du pseudo : tronque si trop long */ body.entree #chat_dial_bloc #chat_dial_liste > .ligne_user .ligne_user_pseudo { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 500; color: var(--chat-text); } /* Bouton croix : petit, discret */ body.entree #chat_dial_bloc #chat_dial_liste > .ligne_user .ligne_user_ferme { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: var(--chat-text-muted); text-decoration: none; opacity: 0; transition: opacity .15s, background .15s, color .15s; } body.entree #chat_dial_bloc #chat_dial_liste > .ligne_user:hover .ligne_user_ferme, body.entree #chat_dial_bloc #chat_dial_liste > .ligne_user.surbrillance .ligne_user_ferme { opacity: 1; } body.entree #chat_dial_bloc #chat_dial_liste > .ligne_user .ligne_user_ferme:hover { background: rgba(var(--couleur-principale-rgb), 0.12); color: var(--chat-accent); } body.entree #chat_dial_bloc #chat_dial_liste > .ligne_user .ligne_user_ferme .material-icons { font-size: 14px; } /* ============================================================= Refonte v5 — Header conversation : bloc info (nom + type) ============================================================= */ /* .entree-chat-userhead-info regroupe nom + type et prend le flex restant */ body.entree #chat_dial_bloc .entree-chat-userhead-info { flex: 1; display: flex; flex-direction: column; min-width: 0; justify-content: center; } /* Le nom n'a plus flex:1 (maintenant c'est son parent .info qui l'a) */ body.entree #chat_dial_bloc .entree-chat-userhead-name { flex: none; font-weight: 600; color: var(--chat-text); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } /* Type (Femme bi / Homme / Couple F bi...) : discret, sous le nom */ body.entree #chat_dial_bloc .entree-chat-userhead-type { font-size: 11px; color: var(--chat-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; } /* ============================================================= Composants v5 charges dans des iframes (chatpop.cgi, etc.) ------------------------------------------------------------- Les regles ci-dessous concernent du HTML genere DANS UNE IFRAME par chatpop.cgi / chatpop.js (modale webcam, boutons d'invitation, avertissement). Ces iframes n'heritent PAS du body.entree de la page parente (entree.cgi). On laisse donc les selecteurs sans prefixe : style_ec_v5.css n'est charge qu'en v5, donc tout son contenu est par definition v5. ============================================================= */ /* Boutons webcam (Diffuser ma webcam / Stopper la/les Webcam(s)) : Le HTML legacy utilise une avec des cellules bouton_1_g / bouton_1_centre / bouton_1_d (vestiges des coins arrondis en images). On neutralise tout ca pour avoir un bouton propre full-width. */ #bloc_webcam table { width: 100% !important; margin: 6px 0; border-collapse: collapse; } #bloc_webcam #bouton_1_g, #bloc_webcam #bouton_1_d { display: none; } #bloc_webcam #bouton_1_centre { height: auto; padding: 0; } #bloc_webcam #bouton_1_centre a { display: flex; align-items: center; justify-content: center; gap: 6px; background-color: var(--couleur-principale); color: #fff; border-radius: 6px; padding: 8px 12px; font-size: 12px; font-weight: 500; font-family: inherit; text-decoration: none; white-space: normal; line-height: 1.3; text-align: center; } #bloc_webcam #bouton_1_centre a:hover { background-color: var(--couleur-principale-hover); color: #fff; } #bloc_webcam #bouton_1_centre a .material-icons { font-size: 16px; color: #fff; margin: 0; } /* Bouton Stopper : variante outline (action destructive, secondaire) */ #btn-stopper-webcam #bouton_1_centre a { background-color: #fff; border: 1.5px solid var(--couleur-principale); color: var(--couleur-principale); } #btn-stopper-webcam #bouton_1_centre a:hover { background-color: rgba(var(--couleur-principale-rgb), 0.08); border-color: var(--couleur-principale-hover); color: var(--couleur-principale-hover); } #btn-stopper-webcam #bouton_1_centre a .material-icons { color: var(--couleur-principale); } #btn-stopper-webcam #bouton_1_centre a:hover .material-icons { color: var(--couleur-principale-hover); } /* ============================================================================ Webcam responsive (chatpop.cgi) : largeur de la td droite + ratio 4/3 ============================================================================ Layout HTML legacy : table 2 colonnes - td gauche #chatpop_tableaulargeurtxt (zone messages, width="100%" HTML) - td droite #chatpop_col_droite (zone webcam, sans width) Sans cam active, la td droite reste compressée à 0 → la zone messages prend toute la largeur. Quand une cam s'active, le MutationObserver pose .webcam-on / .dual-webcam sur la td droite et .webcam-on-table sur la
englobante, ce qui déclenche les règles ci-dessous. Le clamp() fait varier la largeur en fonction de la taille de l'iframe : - 180px minimum - 360px (mono) ou 280px (dual) maximum - sinon : largeur iframe - zone messages min (220px) - marges (16px) */ #chatpop_col_droite.webcam-on { min-width: clamp(180px, calc(100vw - 220px - 16px), 360px); width: clamp(180px, calc(100vw - 220px - 16px), 360px); } /* Mode dual cam : on garde le meme max (360px) que le mode mono pour ne pas reduire artificiellement la cam quand l'utilisateur a la place. On ajoute juste une contrainte hauteur via min() : sur les petites viewports, on limite la largeur a (hauteur dispo / 2) * 4/3 (ratio 4:3, divise par 2 pour les 2 cams empilees) — sinon les deux cams en 360x270 deborderaient verticalement. ~200px reserves dans la formule pour le header chat + le chat_dial_action + le bouton Stopper webcam. */ #chatpop_col_droite.webcam-on.dual-webcam { min-width: clamp(180px, min(calc(100vw - 220px - 16px), calc((100vh - 200px) * 2 / 3)), 360px); width: clamp(180px, min(calc(100vw - 220px - 16px), calc((100vh - 200px) * 2 / 3)), 360px); } /* Neutralise l'attribut HTML width="100%" sur la td gauche pendant le mode webcam : sinon l'algo de layout des tables donne tout l'espace à gauche et compresse la droite à son min-content (~220px = largeur du bouton). L'attribut HTML width est un "presentational hint" (spécificité 0), donc un simple `width: auto` CSS suffit à le surclasser. */ .webcam-on-table #chatpop_tableaulargeurtxt { width: auto; } /* #bloc_webcam : conteneur du flux video. Suit la largeur de la td parente. */ #bloc_webcam { text-align: center; margin: 10px auto; width: 100%; max-width: 100%; } /* Zones #sawebcam / #mawebcam : ratio 4/3 (cf. constraints SDK 160x120). Padding-bottom 75% = technique CSS robuste pour figer le ratio sans dépendre de la dimension intrinsèque du
, donc pas de conflit → pas besoin de !important ici. */ #bloc_webcam #btn-diffuser-webcam, #bloc_webcam #btn-stopper-webcam { width: 220px; margin: 6px auto; } /* Modale webcam (chatpop.cgi) : header avec degrade, titre centre, croix en haut a droite */ #modalParamettreVideo .modal-header { background: linear-gradient(135deg, var(--couleur-principale) 0%, var(--couleur-principale-hover) 100%); justify-content: center; position: relative; } #modalParamettreVideo .modal-title { color: #fff; font-size: 17px; font-weight: 600; margin: 0; text-align: center; } #modalParamettreVideo .close { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); float: none; color: #fff; opacity: .9; font-size: 22px; line-height: 1; background: none; border: none; padding: 0; margin: 0; cursor: pointer; } #modalParamettreVideo .close:hover { opacity: 1; } #modalParamettreVideo .modal-body { background: #fff; color: #333 !important; padding: 20px 20px 10px; } #modalParamettreVideo .modal-body label { color: #444 !important; font-weight: 600; font-size: 13px; margin-bottom: 4px; display: block; } #modalParamettreVideo .modal-body select.form-control { color: #333 !important; background-color: #fff !important; border: 1px solid #ddd; border-radius: 6px; padding: 6px 10px; font-size: 13px; width: 100%; } #modalParamettreVideo .modal-body .text-center { color: #555 !important; font-size: 13px; } #modalParamettreVideo .modal-footer { background: #fff; border-top: 1px solid #f0f0f0; padding: 12px 20px; text-align: right; } #modalParamettreVideo #modalParamettreVideoSubmit { background: var(--couleur-principale) !important; border-color: var(--couleur-principale) !important; color: #fff !important; border-radius: 6px; padding: 8px 22px; font-weight: 500; } #modalParamettreVideo #modalParamettreVideoSubmit:hover { background: var(--couleur-principale-hover) !important; border-color: var(--couleur-principale-hover) !important; } /* ============================================================= Invitation webcam (boutons Accepter / Refuser) ============================================================= */ .webcam-invite-container { background: rgba(var(--couleur-principale-rgb), 0.1); border: 1px solid rgba(var(--couleur-principale-rgb), 0.3); border-radius: 8px; padding: 14px 16px; margin: 10px 0; } .webcam-invite-text { font-size: 14px; font-weight: 600; color: var(--couleur-principale); margin-bottom: 10px; } .webcam-invite-text .material-icons { font-size: 18px; vertical-align: middle; margin-right: 4px; } .webcam-btn-accept-cam, .webcam-btn-accept-watch, .webcam-btn-refuse, .webcam-warning-btn-confirm, .webcam-warning-btn-cancel { display: inline-block; border: none; border-radius: 6px; padding: 7px 16px; font-size: 13px; font-weight: 500; cursor: pointer; margin: 2px 4px 2px 0; font-family: inherit; line-height: 1.4; transition: opacity 0.15s ease, background-color 0.15s ease; } .webcam-btn-accept-cam { background: var(--couleur-principale); color: #fff; } .webcam-btn-accept-cam:hover { background: var(--couleur-principale-hover); color: #fff; } .webcam-btn-accept-watch { background: var(--couleur-principale); color: #fff; opacity: 0.85; } .webcam-btn-accept-watch:hover { opacity: 1; } .webcam-btn-refuse { background: var(--couleur-erreur); color: #fff; } .webcam-btn-refuse:hover { background: #c4382c; color: #fff; } /* ============================================================= Avertissement webcam « pas échangé récemment » ============================================================= */ .webcam-warning-container { background: rgba(var(--couleur-principale-rgb), 0.1); border: 1px solid rgba(var(--couleur-principale-rgb), 0.3); border-radius: 8px; padding: 14px 16px; margin: 10px 0; } .webcam-warning-title { font-size: 14px; font-weight: 600; color: var(--couleur-principale); margin-bottom: 8px; } .webcam-warning-title .material-icons { font-size: 18px; vertical-align: middle; margin-right: 4px; } .webcam-warning-text { font-size: 13px; color: #555; margin-bottom: 12px; } .webcam-warning-btn-confirm { background: var(--couleur-principale); color: #fff; } .webcam-warning-btn-confirm:hover { background: var(--couleur-principale-hover); color: #fff; } .webcam-warning-btn-cancel { background: #f0f0f0; color: #555; } .webcam-warning-btn-cancel:hover { background: #e0e0e0; color: #333; } /* ============================================================= Certification (certification.cgi) ============================================================= */ #certification { background: #f8f8f8; min-height: 100%; } #certification #page_container { max-width: 820px; margin: 0 auto; padding: 20px 16px 40px; } #certification .certif-card { background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); overflow: hidden; } /* --- Bandeau attractif (gradient rose) --- */ #certification .certif-banner { display: flex; align-items: center; gap: 16px; padding: 18px 22px; background: linear-gradient(135deg, var(--couleur-principale) 0%, var(--couleur-principale-fonce) 100%); color: #fff; } #certification .certif-banner-icon { font-size: 32px; flex-shrink: 0; } #certification .certif-banner-text { font-size: 15px; line-height: 1.45; } #certification .certif-banner-text b { font-weight: 700; } /* --- Corps de la carte --- */ #certification .certif-body { padding: 24px 28px 28px; } #certification .certif-intro { font-size: 14px; line-height: 1.6; color: var(--couleur-texte-principal); margin: 0 0 22px 0; } #certification .certif-intro b { font-weight: 600; } /* --- Sous-titre des phases --- */ #certification .certif-section-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--couleur-principale); margin: 0 0 16px 0; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #f0e6e9; } #certification .certif-section-title .glyphicon { font-size: 16px; } /* --- Liste des phases (etapes numerotees) --- */ #certification .certif-phases { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; } #certification .certif-phase { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; background: #fafafa; border: 1px solid #efefef; border-radius: 10px; transition: all 0.2s ease; } #certification .certif-phase:hover { border-color: rgba(var(--couleur-principale-rgb), 0.3); background: #fff; box-shadow: 0 2px 6px rgba(var(--couleur-principale-rgb), 0.08); } #certification .certif-phase-num { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--couleur-principale) 0%, var(--couleur-principale-fonce) 100%); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; box-shadow: 0 2px 4px rgba(var(--couleur-principale-rgb), 0.25); } #certification .certif-phase-content { flex: 1; min-width: 0; } #certification .certif-phase-titre { font-size: 15px; font-weight: 600; color: var(--couleur-texte-principal); margin-bottom: 4px; } #certification .certif-phase-desc { font-size: 13.5px; line-height: 1.55; color: var(--couleur-texte-secondaire); } #certification .certif-phase-desc b { font-weight: 600; color: var(--couleur-principale); } /* --- Avertissement (badge confidentialite) --- */ #certification .certif-warning { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #fff8e1; border: 1px solid #ffe082; border-radius: 8px; color: #7a5e00; font-size: 13.5px; line-height: 1.5; margin-bottom: 24px; } #certification .certif-warning .glyphicon { font-size: 16px; color: #e6a700; flex-shrink: 0; } /* --- Section QR code --- */ #certification .certif-qrcode-section { display: flex; flex-direction: column; align-items: center; background: #fff; border: 1px dashed rgba(var(--couleur-principale-rgb), 0.3); border-radius: 10px; padding: 22px 20px; text-align: center; } #certification .certif-qrcode-titre { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--couleur-principale); margin: 0 0 12px 0; } #certification .certif-qrcode-titre .glyphicon { font-size: 18px; } #certification .certif-qrcode-intro { display: block; max-width: 560px; width: 100%; font-size: 13.5px; line-height: 1.5; color: var(--couleur-texte-secondaire); text-align: center; margin: 0 auto 20px auto; } #certification .certif-qrcode-img-wrap { display: block; width: -moz-fit-content; width: fit-content; padding: 12px; background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); margin: 0 auto 18px auto; } #certification .certif-qrcode-img { display: block; max-width: 220px; width: 100%; height: auto; } #certification .certif-qrcode-url-wrap { display: block; width: 100%; max-width: 560px; margin: 0 auto 18px auto; text-align: left; background: #f5f5f5; border-radius: 6px; padding: 10px 14px; box-sizing: border-box; } #certification .certif-qrcode-url-label { font-size: 12px; font-weight: 600; color: var(--couleur-texte-secondaire); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } #certification .certif-qrcode-url { font-family: "Consolas", "Monaco", "Courier New", monospace; font-size: 12px; color: var(--couleur-principale); word-break: break-all; line-height: 1.4; } #certification .certif-qrcode-note { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--couleur-texte-gris); font-style: italic; margin: 0; } #certification .certif-qrcode-note .glyphicon { font-size: 13px; } /* ============================================================ ABONNEMENT V5 (abonnement.cgi) Pages servies : abonn_type_h (H) et abonn_type_autre (F/cpl) ============================================================ */ #abonnement #page_container { max-width: 980px; margin: 0 auto; padding: 20px 16px 40px; } /* --- Etat de l'abonnement (card en haut) --- */ #abonnement .abo-etat-card { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 18px 22px; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); margin-bottom: 18px; } #abonnement .abo-etat-card.abo-etat--actif { border-left-color: var(--couleur-online); } #abonnement .abo-etat-icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f5f5f5; } #abonnement .abo-etat--actif .abo-etat-icon { background: rgba(46, 247, 136, 0.12); } #abonnement .abo-etat--actif .abo-etat-icon .material-icons { color: #1aa364; font-size: 28px; } #abonnement .abo-etat-content { flex: 1; min-width: 0; } #abonnement .abo-etat-titre { font-size: 15px; font-weight: 600; color: var(--couleur-texte-principal); margin-bottom: 2px; } #abonnement .abo-etat-detail { font-size: 13.5px; color: var(--couleur-texte-secondaire); line-height: 1.5; } #abonnement .abo-etat-detail .abo-etat-label { font-weight: 600; color: var(--couleur-texte-secondaire); margin-right: 4px; } #abonnement .abo-etat-detail .abo-etat-sep { margin: 0 8px; color: #ccc; } #abonnement .abo-etat-info { margin-top: 4px; font-size: 12.5px; color: var(--couleur-texte-gris); font-style: italic; } /* ===================================================================== Card winback : ancien abonné dont l'abo a expiré (refonte 29 avril 2026) Layout en colonne : header (icône + salutation + date) → fidélité (opt) → CTA reprendre ===================================================================== */ #abonnement .abo-etat-card.abo-etat--winback { display: block; padding: 22px 24px; background: #fff; border-radius: 14px; box-shadow: 0 4px 16px rgba(var(--couleur-principale-rgb), 0.08); border: 1px solid rgba(var(--couleur-principale-rgb), 0.15); margin-bottom: 18px; } #abonnement .abo-etat-winback-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; } #abonnement .abo-etat-winback-icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--couleur-principale) 0%, var(--couleur-principale-fonce) 100%); box-shadow: 0 2px 6px rgba(var(--couleur-principale-rgb), 0.25); } #abonnement .abo-etat-winback-icon .material-icons { color: #fff; font-size: 26px; } #abonnement .abo-etat-winback-titres { flex: 1; min-width: 0; } #abonnement .abo-etat-winback-titre { font-size: 18px; font-weight: 700; color: var(--couleur-texte-principal); line-height: 1.3; } #abonnement .abo-etat-winback-sous { font-size: 13.5px; color: var(--couleur-texte-secondaire); margin-top: 2px; } #abonnement .abo-etat-winback-sous b { color: var(--couleur-principale); font-weight: 700; } #abonnement .abo-etat-fidelite { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: #fff8e1; border: 1px solid #ffd54f; border-radius: 20px; color: #7a5e00; font-size: 13px; font-weight: 600; margin: 6px 0 14px 0; } #abonnement .abo-etat-fidelite .material-icons { font-size: 18px; color: #ff9800; } /* CTA "Reprendre votre formule X" — aligné sur la palette du bandeau certif v2 : fond rose très pâle, border rose pâle, texte foncé. Seuls icône/titre/flèche en rose vif. */ #abonnement .abo-cta-reprendre { display: flex; align-items: center; gap: 16px; padding: 16px 18px; background: rgba(var(--couleur-principale-rgb), 0.07); border: 1px solid rgba(var(--couleur-principale-rgb), 0.25); border-radius: 12px; color: #333; text-decoration: none; transition: box-shadow 0.18s ease, transform 0.18s ease; box-shadow: 0 1px 4px rgba(var(--couleur-principale-rgb), 0.06); } #abonnement .abo-cta-reprendre:hover, #abonnement .abo-cta-reprendre:focus { color: #333; text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(var(--couleur-principale-rgb), 0.14); } /* Icône ronde rose plein avec material-icon blanche (= .abo-certif-icon) */ #abonnement .abo-cta-reprendre > .material-icons:first-child { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: var(--couleur-principale); color: #fff; font-size: 26px; display: flex; align-items: center; justify-content: center; } #abonnement .abo-cta-reprendre-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; } #abonnement .abo-cta-reprendre-titre { font-size: 14px; font-weight: 700; color: var(--couleur-principale); margin-bottom: 3px; } #abonnement .abo-cta-reprendre-detail { font-size: 12.5px; color: #555; line-height: 1.45; } #abonnement .abo-cta-reprendre-arrow { font-size: 24px; color: var(--couleur-principale); flex-shrink: 0; transition: transform 0.2s ease; } #abonnement .abo-cta-reprendre:hover .abo-cta-reprendre-arrow { transform: translateX(3px); } /* --- Pill "Tarif d'origine conserve" dans le header des cards etat --- Utilisee dans 2 contextes (place a droite via margin-left:auto) : - card winback (ancien abonne avec offre exclusive) - card actif (abonne en cours avec offre exclusive) Remplace l'ancien bandeau global "membre fidele" qui faisait doublon. */ #abonnement .abo-etat-fidelite-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; background: #fff8e1; border: 1px solid #ffd54f; border-radius: 16px; color: #7a5e00; font-size: 12px; font-weight: 600; margin-left: auto; white-space: nowrap; flex-shrink: 0; } #abonnement .abo-etat-fidelite-pill .material-icons { font-size: 15px; color: #ff9800; } /* --- CTA principal "Meilleure offre" (winback double CTA) --- Garde la palette douce de .abo-cta-reprendre (fond rose pale, bordure rose clair). Differenciation visuelle vs CTA secondaire portee par : titre + badge -X% vert + detail. */ #abonnement .abo-cta-reprendre--meilleure .abo-cta-reprendre-titre { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Badge "-30%" inline dans le titre du CTA meilleure offre (verte = economie) */ #abonnement .abo-cta-reprendre-badge { display: inline-block; background: #2e7d32; color: #fff; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 10px; letter-spacing: 0.3px; } /* --- CTA secondaire (lien discret "Plutot reprendre la formule identique") --- */ #abonnement .abo-cta-reprendre-secondaire { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; padding: 8px 12px; font-size: 12.5px; color: #888; text-decoration: none; border-radius: 8px; transition: color 0.15s, background 0.15s; flex-wrap: wrap; } #abonnement .abo-cta-reprendre-secondaire:hover, #abonnement .abo-cta-reprendre-secondaire:focus { color: var(--couleur-principale); background: rgba(var(--couleur-principale-rgb), 0.05); text-decoration: none; } #abonnement .abo-cta-reprendre-secondaire .material-icons { font-size: 16px; flex-shrink: 0; } #abonnement .abo-cta-reprendre-secondaire-detail { color: #aaa; font-size: 11.5px; margin-left: 2px; } /* ===================================================================== Highlight de la dernière formule dans la liste (badge + flash au scroll) ===================================================================== */ #abonnement .abo-prix-bloc-tarifs .abo_ligne--derniere { border: 2px solid var(--couleur-principale); box-shadow: 0 4px 14px rgba(var(--couleur-principale-rgb), 0.18); position: relative; } /* Note : le badge "Votre derniere formule" sur la ligne a ete retire (HTML). L'info est portee par le CTA secondaire de la card winback ("Plutot reprendre la formule identique"). Seule la classe .abo_ligne--derniere reste pour la border rose discrete. */ /* Animation flash : déclenchée via JS abo_v5_scroll_highlight() */ @keyframes abo-ligne-flash-anim { 0% { box-shadow: 0 4px 14px rgba(var(--couleur-principale-rgb), 0.18); } 30% { box-shadow: 0 0 0 8px rgba(var(--couleur-principale-rgb), 0.35), 0 4px 22px rgba(var(--couleur-principale-rgb), 0.45); } 100% { box-shadow: 0 4px 14px rgba(var(--couleur-principale-rgb), 0.18); } } #abonnement .abo_ligne--flash { animation: abo-ligne-flash-anim 1.6s ease-out; } /* Active le scroll smooth natif sur la page abonnement */ #abonnement { scroll-behavior: smooth; } html:has(#abonnement) { scroll-behavior: smooth; } /* (Anciennes regles V1 .abo-banner-certif supprimees : version moderne unifiee plus bas, dans la zone "ABONNEMENT V5 — Hero, bandeau certif, bloc prix moderne") */ /* --- Bandeau membre fidele (privilege) --- */ #abonnement .abo-banner-fidele { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: #fff8e1; border: 1px solid #ffe082; border-radius: 8px; color: #7a5e00; font-size: 13.5px; line-height: 1.5; margin-bottom: 18px; } #abonnement .abo-banner-fidele::before { content: "star"; font-family: "Material Icons"; font-size: 18px; color: #e6a700; flex-shrink: 0; } /* --- Card principale (formules + code promo + paiements) --- */ #abonnement .abo-card { background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); overflow: hidden; margin-bottom: 18px; } #abonnement .abo-card-body { padding: 0 24px 24px; } /* --- Grille des formules de prix --- */ #abonnement .abo-prix-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 24px; } #abonnement .abo-prix-bloc { background: #fafafa; border: 1px solid #efefef; border-radius: 10px; padding: 16px 18px; } #abonnement .abo-prix-bloc--total { border-color: rgba(var(--couleur-principale-rgb), 0.25); background: #fff; box-shadow: 0 2px 6px rgba(var(--couleur-principale-rgb), 0.06); } #abonnement .abo-prix-bloc-titre { font-size: 17px; font-weight: 700; color: var(--couleur-principale); text-align: center; margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.3px; } #abonnement .abo-prix-bloc--site .abo-prix-bloc-titre { color: var(--couleur-texte-principal); } #abonnement .abo-prix-bloc-soustitre { font-size: 13px; font-weight: 600; color: var(--couleur-texte-secondaire); text-align: center; margin-bottom: 16px; letter-spacing: 0.2px; } /* (Anciennes regles V1 .abo-prix-bloc-tarifs supprimees : version moderne unifiee plus bas, dans la zone "ABONNEMENT V5 — Hero, bandeau certif, bloc prix moderne") */ /* Trust signaux sous les prix (UX conversion) */ #abonnement .abo-trust-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 28px; padding: 12px 8px 4px; margin-bottom: 14px; } #abonnement .abo-trust-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--couleur-texte-secondaire); white-space: nowrap; } #abonnement .abo-trust-item .material-icons { font-size: 18px; color: var(--couleur-principale); } /* --- Logos paiement --- */ #abonnement .abo-paiement-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; padding: 14px 0; margin-bottom: 18px; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; } #abonnement .abo-paiement-logos img { max-height: 32px; width: auto; opacity: 0.85; } #abonnement .abo-paiement-logos-alt { display: flex; gap: 10px; align-items: center; } #abonnement .abo-paiement-logo-svg { display: inline-flex; align-items: center; justify-content: center; height: 28px; min-width: 44px; padding: 4px 8px; background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; font-family: Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; } #abonnement .abo-paiement-logo-svg--visa { color: #1a1f71; } #abonnement .abo-paiement-logo-svg--mc { color: #eb001b; } #abonnement .abo-paiement-logo-svg--cb { color: #00427a; } /* --- Code promo --- */ #abonnement .abo-codepromo { background: #fafafa; border: 1px solid #eee; border-radius: 8px; padding: 14px 16px; margin-top: 8px; } #abonnement .abo-codepromo form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; } #abonnement .abo-codepromo label { flex: 1 1 100%; font-size: 13px; font-weight: 600; color: var(--couleur-texte-secondaire); margin: 0 0 4px 0; } #abonnement .abo-codepromo input[type="text"] { flex: 1 1 200px; padding: 8px 12px; font-size: 14px; border: 1px solid #ddd; border-radius: 6px; outline: none; transition: border-color 0.15s ease; } #abonnement .abo-codepromo input[type="text"]:focus { border-color: var(--couleur-principale); } #abonnement .abo-codepromo input[type="submit"] { padding: 8px 18px; font-size: 13px; font-weight: 600; color: #fff; background: var(--couleur-principale); border: none; border-radius: 6px; cursor: pointer; transition: background 0.15s ease; } #abonnement .abo-codepromo input[type="submit"]:hover { background: var(--couleur-principale-hover); } /* --- Card avantages (liste avec icones check) --- */ #abonnement .abo-avg-card { background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); padding: 22px 24px; margin-bottom: 18px; } #abonnement .abo-avg-titre { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--couleur-principale); margin: 0 0 16px 0; padding-bottom: 10px; border-bottom: 1px solid #f0e6e9; } #abonnement .abo-avg-titre .material-icons { font-size: 20px; } /* Liste des avantages : 1 colonne par défaut (les axes thématiques structurent le contenu) */ #abonnement .abo-avg-liste { display: flex; flex-direction: column; gap: 6px; } #abonnement .abo-avg-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; font-size: 13.5px; line-height: 1.45; color: var(--couleur-texte-principal); border-radius: 6px; } /* Icône d'item : fond rose plein + icône blanche (cohérence marque, unifié sur tous les axes) */ #abonnement .abo-avg-item .material-icons { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: 18px; color: #fff; background: var(--couleur-principale); border-radius: 50%; margin-top: 1px; } /* ---------- AVANTAGES V2 : 3 axes thematiques (UX 2026-04) ---------- */ #abonnement .abo-avg-card .abo-avg-axe { margin-bottom: 14px; } #abonnement .abo-avg-card .abo-avg-axe:last-child { margin-bottom: 0; } #abonnement .abo-avg-axe-titre { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--couleur-principale); margin: 0 0 8px 0; padding: 0 4px; } #abonnement .abo-avg-axe-titre .material-icons { font-size: 18px; color: var(--couleur-principale); } /* Texte d'item : titre en foncé + description grisée */ #abonnement .abo-avg-item .abo-avg-item-txt { flex: 1; font-size: 13px; line-height: 1.45; color: #555; margin: 4px 0 0 0; } #abonnement .abo-avg-item .abo-avg-item-txt b { color: var(--couleur-texte-principal); font-weight: 700; display: inline; margin-right: 2px; } /* --- Zone bas : stop abo, rappel, mentions --- Ton volontairement discret : on n'incite pas a l'arret de l'abonnement. Le bouton stop reste accessible (transparence legale + pas de friction excessive), mais visuellement minore par rapport aux CTA d'achat. */ #abonnement .abo-bas { background: transparent; border-radius: 0; box-shadow: none; padding: 8px 4px 0; margin-bottom: 12px; border-top: 1px solid #eee; padding-top: 16px; } #abonnement .abo-stop-zone { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 4px 0; background: transparent; margin-bottom: 10px; font-size: 12.5px; color: var(--couleur-texte-gris); text-align: center; } #abonnement .abo-stop-zone-text { color: var(--couleur-texte-gris); font-size: 12.5px; } /* Lien discret de resiliation : ressemble a un lien CGV, pas a un bouton */ #abonnement .abo-btn-stop { display: inline-flex; align-items: center; gap: 4px; padding: 0; font-size: 12.5px; font-weight: 400; color: var(--couleur-texte-gris); background: transparent; border: none; border-bottom: 1px dotted #bbb; border-radius: 0; cursor: pointer; text-decoration: none; transition: color 0.15s ease, border-color 0.15s ease; } #abonnement .abo-btn-stop:hover { background: transparent; border-bottom-color: #888; color: #555; text-decoration: none; } #abonnement .abo-btn-stop .material-icons { display: none; } /* Rappel des regles : ton neutre, plus de fond jaune-warning */ #abonnement .abo-rappel { font-size: 11.5px; line-height: 1.5; color: var(--couleur-texte-gris); background: transparent; border: none; border-radius: 0; padding: 4px 0; margin-bottom: 8px; text-align: center; font-style: italic; } #abonnement .abo-cgv { font-size: 11.5px; line-height: 1.55; color: var(--couleur-texte-gris); text-align: center; } #abonnement .abo-cgv a { color: var(--couleur-texte-gris); text-decoration: underline; } #abonnement .abo-cgv a:hover { color: var(--couleur-principale); text-decoration: underline; } /* ========================================================================== ABONNEMENT V5 — Hero, bandeau certif, bloc prix moderne (anciennement "V2" / inline dans abonnement.cgi sub abo_v5_test_styles) ========================================================================== */ /* --- Hero (titre + bullets cles, fond sombre) --- */ #abonnement .abo-hero { margin: 0 0 18px 0; padding: 22px 24px 18px; background-color: #2d2627; color: white; border-radius: 12px; text-align: center; box-shadow: 0 4px 16px rgb(211 201 203); } #abonnement .abo-hero-titre { font-family: var(--font-titres, 'Outfit', sans-serif); font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -0.4px; margin: 0 0 14px 0; } #abonnement .abo-hero-bullets { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; max-width: 720px; margin: 0 auto; } #abonnement .abo-hero-bullet { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; line-height: 1.2; } #abonnement .abo-hero-bullet .material-icons { font-size: 18px; background: rgba(255,255,255,0.18); padding: 5px; border-radius: 50%; } /* --- Etat abonnement : variante ponctuel (acces actif sans renouvellement) --- */ #abonnement .abo-etat-card.abo-etat--ponctuel { background: rgba(var(--couleur-principale-rgb), 0.07); border: 1px solid rgba(var(--couleur-principale-rgb), 0.2); } #abonnement .abo-etat-card.abo-etat--ponctuel .abo-etat-icon { background: rgba(var(--couleur-principale-rgb), 0.12); } #abonnement .abo-etat-card.abo-etat--ponctuel .abo-etat-icon .material-icons { color: var(--couleur-principale); font-size: 28px; } #abonnement .abo-etat-card.abo-etat--ponctuel .abo-etat-titre { color: var(--couleur-principale); } #abonnement .abo-etat-card .abo-etat-info { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: #777; margin-top: 8px; line-height: 1.4; font-style: italic; } #abonnement .abo-etat-card .abo-etat-info .material-icons { font-size: 16px; flex-shrink: 0; margin-top: 1px; color: var(--couleur-principale); } /* --- Bandeau certification (femmes / couples) : card light pink --- */ #abonnement .abo-banner-certif { display: flex; align-items: center; gap: 16px; padding: 16px 18px; margin: 14px 0; background: rgba(var(--couleur-principale-rgb), 0.07); border: 1px solid rgba(var(--couleur-principale-rgb), 0.25); border-radius: 12px; color: #333; text-decoration: none; transition: box-shadow 0.18s, transform 0.18s; box-shadow: 0 1px 4px rgba(var(--couleur-principale-rgb), 0.06); } #abonnement .abo-banner-certif:hover { text-decoration: none; color: #333; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(var(--couleur-principale-rgb), 0.14); } #abonnement .abo-certif-icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: var(--couleur-principale); display: flex; align-items: center; justify-content: center; } #abonnement .abo-certif-icon .material-icons { font-size: 26px; color: #fff; } #abonnement .abo-certif-body { flex: 1; min-width: 0; } #abonnement .abo-certif-titre { font-size: 14px; font-weight: 700; color: var(--couleur-principale); margin-bottom: 3px; } #abonnement .abo-certif-sous { font-size: 12.5px; color: #555; line-height: 1.45; } #abonnement .abo-banner-certif .abo-banner-certif-arrow { font-size: 24px; color: var(--couleur-principale); flex-shrink: 0; } /* --- Bandeau social proof (au-dessus des prix) --- */ #abonnement .abo-social-proof { margin: 16px 0; padding: 12px 18px; background: #fff; border: 1px solid #eee; border-radius: 10px; } #abonnement .abo-social-proof-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; } #abonnement .abo-social-proof-stars { display: inline-flex; gap: 1px; flex-shrink: 0; } #abonnement .abo-social-proof-stars .material-icons { font-size: 20px; color: #ffb300; } #abonnement .abo-social-proof-txt { font-size: 14px; color: #333; line-height: 1.4; } #abonnement .abo-social-proof-txt b { color: var(--couleur-principale); } /* --- Avantages : ordre en grille plus dense au-dessus des prix --- */ #abonnement .abo-avg-card { margin: 0 0 18px 0; } /* --- Blocs prix : meilleure offre mise en avant + vrai CTA "Activer" --- */ #abonnement .abo-prix-bloc-tarifs .abo_ligne { position: relative; display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 14px; margin: 0 0 12px 0; padding: 0; background: #fff; border: 2px solid #eee; border-radius: 12px; overflow: visible; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; min-height: 78px; } #abonnement .abo-prix-bloc-tarifs .abo_ligne:hover { border-color: var(--couleur-principale); box-shadow: 0 4px 14px rgba(var(--couleur-principale-rgb), 0.15); transform: translateY(-1px); } /* Meilleure offre : encore plus visible (scale + bordure + ombre + fond tres leger) */ #abonnement .abo-prix-bloc-tarifs .abo_ligne--featured { border: 2px solid var(--couleur-principale); box-shadow: 0 6px 20px rgba(var(--couleur-principale-rgb), 0.22); background: linear-gradient(180deg, #fff 0%, #fff5f8 100%); transform: scale(1.02); margin: 18px 0 22px 0; } #abonnement .abo-prix-bloc-tarifs .abo_ligne--featured:hover { transform: scale(1.025) translateY(-1px); } /* Badge "MEILLEURE OFFRE" : ruban en haut a droite */ #abonnement .abo-prix-bloc-tarifs .abo_ligne_badge { position: absolute; top: -11px; right: 16px; background: linear-gradient(135deg, var(--couleur-principale) 0%, #c92856 100%); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.6px; padding: 5px 12px; border-radius: 6px; box-shadow: 0 2px 8px rgba(var(--couleur-principale-rgb), 0.4); z-index: 2; text-transform: uppercase; } /* Bloc gauche (prix) */ #abonnement .abo-prix-bloc-tarifs .abo_ligne_gauche { background: var(--couleur-principale); color: #fff; padding: 16px 12px; display: flex; align-items: baseline; justify-content: center; gap: 4px; border-radius: 10px 0 0 10px; flex-wrap: wrap; min-height: 78px; box-sizing: border-box; } #abonnement .abo-prix-bloc-tarifs .abo_ligne--featured .abo_ligne_gauche { background: linear-gradient(135deg, var(--couleur-principale) 0%, var(--couleur-principale-hover) 100%); } #abonnement .abo-prix-bloc-tarifs .abo_prix_montant { font-size: 32px; font-weight: 800; line-height: 1; } #abonnement .abo-prix-bloc-tarifs .abo_prix_devise { font-size: 22px; font-weight: 700; } #abonnement .abo-prix-bloc-tarifs .abo_mois { font-size: 13px; font-weight: 600; opacity: 0.95; } /* Bloc centre (duree + economie + description) */ #abonnement .abo-prix-bloc-tarifs .abo_ligne_centre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 0; } #abonnement .abo-prix-bloc-tarifs .abo_ligne_duree { font-size: 17px; font-weight: 700; color: #222; } #abonnement .abo-prix-bloc-tarifs .abo_ligne_economie { display: inline-block; background: #2e7d32; color: #fff; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 12px; letter-spacing: 0.3px; } #abonnement .abo-prix-bloc-tarifs .abo_ligne_description { font-size: 11px; color: #999; font-style: italic; } /* Bloc droite : VRAI BOUTON CTA (remplace le chevron) */ #abonnement .abo-prix-bloc-tarifs .abo_ligne_droite { padding: 0 14px; } #abonnement .abo-prix-bloc-tarifs .abo_ligne_droite::before { content: "Activer"; display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; background: var(--couleur-principale); color: #fff; font-size: 13px; font-weight: 700; border-radius: 24px; white-space: nowrap; box-shadow: 0 2px 6px rgba(var(--couleur-principale-rgb), 0.3); transition: background 0.15s, box-shadow 0.15s, transform 0.15s; } #abonnement .abo-prix-bloc-tarifs .abo_ligne:hover .abo_ligne_droite::before { background: var(--couleur-principale-hover); box-shadow: 0 4px 10px rgba(var(--couleur-principale-rgb), 0.45); transform: translateX(2px); } #abonnement .abo-prix-bloc-tarifs .abo_ligne--featured .abo_ligne_droite::before { background: linear-gradient(135deg, var(--couleur-principale) 0%, #c92856 100%); padding: 12px 22px; font-size: 14px; } /* Le chevron historique est masque : remplace par le bouton ::before */ #abonnement .abo-prix-bloc-tarifs .abo_fleche { display: none; } /* Liens des cartes d'offres : pas de soulignement */ #abonnement .abo-prix-bloc-tarifs a, #abonnement .abo-prix-bloc-tarifs a:hover, #abonnement .abo-prix-bloc-tarifs a:focus { text-decoration: none; color: inherit; } /* --- Toggle "Acces au site" (page H uniquement) Place EN DEHORS de la card prix principale, pour ne pas polluer la zone de decision. Discret, replie par defaut. --- */ #abonnement .abo-option-site-toggle-wrap { text-align: center; margin: 18px 0 0 0; } #abonnement .abo-option-site-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #888; text-decoration: none; padding: 8px 14px; border-radius: 18px; transition: color 0.15s, background 0.15s; cursor: pointer; font-weight: 500; } #abonnement .abo-option-site-toggle .material-icons { font-size: 18px; transition: transform 0.2s; } #abonnement .abo-option-site-toggle.open .material-icons { transform: rotate(180deg); } #abonnement .abo-option-site-zone { margin-top: 12px; } #abonnement .abo-option-site-zone .abo-prix-bloc-titre { font-size: 16px; font-weight: 700; color: #555; text-align: center; margin: 0 0 4px 0; } #abonnement .abo-option-site-zone .abo-prix-bloc-soustitre { font-size: 13px; color: #888; text-align: center; margin: 0 0 14px 0; } /* --- Code promo : accordeon discret apres les avantages --- */ #abonnement .abo-codepromo-discret { margin: 16px 0 18px; text-align: center; border: 1.5px dashed #ddd; border-radius: 10px; padding: 14px 20px; background: #fafafa; } #abonnement .abo-codepromo-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: #888; cursor: pointer; text-decoration: none; transition: color 0.15s; font-weight: 500; } #abonnement .abo-codepromo-toggle:hover { color: #444; text-decoration: none; } #abonnement .abo-codepromo-toggle .material-icons { font-size: 17px; color: var(--couleur-principale); } #abonnement .abo-codepromo-form { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 0 4px; flex-wrap: wrap; } #abonnement .abo-codepromo-form input[type="text"] { border: 1px solid #ddd; border-radius: 6px; padding: 7px 12px; font-size: 13px; width: 160px; } #abonnement .abo-codepromo-form input[type="submit"] { padding: 7px 16px; font-size: 13px; background: #f5f5f5; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; color: #444; transition: background 0.15s; } #abonnement .abo-codepromo-form input[type="submit"]:hover { background: #ebebeb; } /* Responsive prix : sous 600px le bouton passe sous la ligne */ @media (max-width: 600px) { #abonnement .abo-prix-bloc-tarifs .abo_ligne { grid-template-columns: 110px 1fr; grid-template-areas: "gauche centre" "cta cta"; } #abonnement .abo-prix-bloc-tarifs .abo_ligne_gauche { grid-area: gauche; } #abonnement .abo-prix-bloc-tarifs .abo_ligne_centre { grid-area: centre; } #abonnement .abo-prix-bloc-tarifs .abo_ligne_droite { grid-area: cta; padding: 0 14px 14px; text-align: center; } #abonnement .abo-prix-bloc-tarifs .abo_ligne_droite::before { width: 100%; justify-content: center; } } /* --- Modales V5 stop abonnement (override Bootstrap) --- */ #abonnement #suppAbo .modal-content, #abonnement #suppAboStripe .modal-content, #abonnement #suppAboNok .modal-content, #suppAbo.abo-modale-suppression .modal-content, #suppAboStripe.abo-modale-suppression .modal-content, #suppAboNok.abo-modale-suppression .modal-content { border: none; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); } #suppAbo.abo-modale-suppression .modal-header, #suppAboStripe.abo-modale-suppression .modal-header, #suppAboNok.abo-modale-suppression .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: linear-gradient(135deg, var(--couleur-principale) 0%, var(--couleur-principale-fonce) 100%); color: #fff; border: none; } #suppAbo.abo-modale-suppression .modal-header .modal-title, #suppAboStripe.abo-modale-suppression .modal-header .modal-title, #suppAboNok.abo-modale-suppression .modal-header .modal-title { font-size: 16px; font-weight: 600; margin: 0; color: #fff; } #suppAbo.abo-modale-suppression .modal-header .close, #suppAboStripe.abo-modale-suppression .modal-header .close, #suppAboNok.abo-modale-suppression .modal-header .close { color: #fff; opacity: 0.85; text-shadow: none; font-size: 24px; font-weight: 400; margin: 0; padding: 0 4px; } #suppAbo.abo-modale-suppression .modal-header .close:hover, #suppAboStripe.abo-modale-suppression .modal-header .close:hover, #suppAboNok.abo-modale-suppression .modal-header .close:hover { opacity: 1; color: #fff; } #suppAbo.abo-modale-suppression .modal-body, #suppAboStripe.abo-modale-suppression .modal-body, #suppAboNok.abo-modale-suppression .modal-body { padding: 20px 24px; font-size: 14px; line-height: 1.55; color: var(--couleur-texte-principal); } #suppAbo.abo-modale-suppression .modal-body .abo-modale-attention, #suppAboStripe.abo-modale-suppression .modal-body .abo-modale-attention { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #c0392b; margin-bottom: 10px; font-size: 15px; } #suppAbo.abo-modale-suppression .modal-body .abo-modale-attention .material-icons, #suppAboStripe.abo-modale-suppression .modal-body .abo-modale-attention .material-icons { font-size: 22px; } #suppAbo.abo-modale-suppression .modal-footer, #suppAboStripe.abo-modale-suppression .modal-footer, #suppAboNok.abo-modale-suppression .modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; background: #fafafa; border-top: 1px solid #efefef; margin: 0; } #suppAbo.abo-modale-suppression .modal-footer .abo-btn-modale, #suppAboStripe.abo-modale-suppression .modal-footer .abo-btn-modale, #suppAboNok.abo-modale-suppression .modal-footer .abo-btn-modale { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; font-size: 13.5px; font-weight: 600; border-radius: 6px; border: 1px solid transparent; cursor: pointer; transition: all 0.15s ease; background: #fff; } #suppAbo.abo-modale-suppression .modal-footer .abo-btn-modale--oui, #suppAboStripe.abo-modale-suppression .modal-footer .abo-btn-modale--oui { background: #c0392b; color: #fff; border-color: #c0392b; } #suppAbo.abo-modale-suppression .modal-footer .abo-btn-modale--oui:hover, #suppAboStripe.abo-modale-suppression .modal-footer .abo-btn-modale--oui:hover { background: #a93226; border-color: #a93226; } #suppAbo.abo-modale-suppression .modal-footer .abo-btn-modale--non, #suppAboStripe.abo-modale-suppression .modal-footer .abo-btn-modale--non, #suppAboNok.abo-modale-suppression .modal-footer .abo-btn-modale--non { background: #fff; color: var(--couleur-texte-principal); border-color: #ddd; } #suppAbo.abo-modale-suppression .modal-footer .abo-btn-modale--non:hover, #suppAboStripe.abo-modale-suppression .modal-footer .abo-btn-modale--non:hover, #suppAboNok.abo-modale-suppression .modal-footer .abo-btn-modale--non:hover { background: #f0f0f0; border-color: #ccc; } /* --- Page demo --- */ #abonnement .abo-demo-card { background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); padding: 24px; text-align: center; margin-bottom: 18px; } #abonnement .abo-demo-card img { max-width: 100%; height: auto; border-radius: 8px; } /* --- Responsive (general, hors prix qui a son propre media @600px ci-dessus) --- */ @media (max-width: 720px) { #abonnement .abo-trust-row { gap: 6px 14px; } #abonnement .abo-trust-item { font-size: 11.5px; } }