: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; } /* === CAP D'AGDE === */ /* Regroupe 2 champs pour qu'ils restent toujours cote a cote, y compris quand la barre passe en colonne (voir le bloc responsive plus bas) : evite qu'un des deux se retrouve isole seul sur sa propre ligne (cas des dates "Du" / "au" de capagde.cgi). Reutilisable pour toute autre paire de champs qui doit rester groupee. */ .search-field-group { display: flex; flex: 1; min-width: 0; } .search-field-group .search-field { flex: 1; } /* === 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; } /* padding-left a 12px (comme les autres .search-field) : sans lui, la case "Avec photo(s)" demarrait 10px plus a gauche que "A" / "De" au-dessus des qu'elle passait sur sa propre ligne pleine largeur (mode compact), donnant une impression de desalignement. Sans effet en mode large : la case est deja decalee par ailleurs (margin-left:auto ou voisinage du champ ville). */ .search-field-photo { padding: 15px 12px 0px 12px; } /* 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 : barre compacte. S'applique aussi hors tablette, car la colonne centrale de entree.cgi est une iframe (annonces.cgi) dont la largeur devient inferieure a 768px des que la fenetre descend sous ~1230px. */ @media (max-width: 768px) { .search-bar-inline { flex-wrap: wrap; border-radius: 12px; max-width: 100%; } /* Pas de separateur sous les champs : le trait depassait de part et d'autre du bouton (qui a 8px de marge laterale), et en mode large les champs n'ont deja aucun separateur (border-right desactivee dans la regle de base). */ .search-field { flex: 1 1 45%; } /* Le bouton quitte la position absolue pour prendre sa propre ligne : les champs occupent alors toute la largeur de la barre, donc le bouton recouvrirait le dernier d'entre eux (son select passe dessous et son libelle est tronque). Les !important sont necessaires pour battre les width des regles de base et du modificateur --expanded. */ /* z-index remis a auto : la regle de base (z-index:1000) ne servait qu'a affranchir le bouton en position absolute des champs voisins. Un item flex avec un z-index non-auto cree son propre contexte d'empilement meme en position:static (regle flexbox) : le bouton passait donc devant le menu deroulant bootstrap-select (lui-meme en z-index:1000) des que celui-ci s'ouvrait sous le champ "Je recherche" / "Qui recherche" / "Distance", masquant une partie des options. */ .search-bar-inline .search-btn-icon, .search-bar-inline .search-btn-icon.search-btn-icon--expanded { position: static; flex: 1 1 100%; width: auto !important; margin: 0 8px 8px 8px; border-radius: 8px !important; z-index: auto; } /* Cap d'agde : sans ce correctif, la regle generique .search-field {flex:1 1 45%} ci-dessus s'appliquait aussi a "Je recherche" (45%), qui se retrouvait donc apparie avec "Du" sur la 1ere ligne pendant que "au" etait ejecte seul sur la 2e ligne. Ici "Je recherche" prend sa propre ligne (100%) et les 2 dates du groupe restent cote a cote sur la suivante (50% chacune). Scope a #capagde : sur les autres pages, .search-field-sarecherche s'apparie normalement avec 1 seul champ voisin (ex: Distance sur annonces.cgi) et n'a pas ce probleme. */ #capagde .search-bar-inline .search-field-sarecherche { flex: 1 1 100%; } .search-bar-inline .search-field-group { flex: 1 1 100%; } .search-bar-inline .search-field-group .search-field { flex: 1 1 50%; } } /* ============================================================ */ /* 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; } /* Empilement vertical centre : titre, accroche puis bouton chacun sur sa ligne */ .subscription-content { display: flex; flex-direction: column; align-items: center; text-align: center; } .subscription-content h3 { font-size: 18px; margin: 0 0 6px; font-weight: 600; color: #141515; } /* Accroche principale (identite / desir) */ .subscription-hook { font-size: 26px; line-height: 1.1; font-weight: 800; margin: 4px 0 18px; color: #141515; } /* Bouton d'action (contraste fort sur le fond jaune) */ .subscription-btn { display: inline-block; background: var(--couleur-principale, #eb406d); color: #fff; padding: 12px 30px; border-radius: 999px; font-size: 16px; font-weight: 700; letter-spacing: 0.2px; box-shadow: 0 4px 14px rgba(235, 64, 109, 0.35); transition: background 0.2s ease, transform 0.2s ease; } .mosaique-subscription-block:hover .subscription-btn { background: var(--couleur-principale-hover, #d93a5f); transform: translateY(-1px); } /* 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; /* Sur tablette/mobile, le glisser-deposer est reimplemente en JS via les evenements touch* (la Drag and Drop API HTML5 ne fonctionne pas sur ces navigateurs). touch-action:none est necessaire ici : sans lui, le navigateur peut demarrer le defilement de la page des le premier mouvement du doigt sur une vignette avant meme que notre JS ait pu appeler preventDefault (optimisation native du scroll), rendant le reordonnancement tactile peu fiable. Contrepartie acceptee : on ne peut plus demarrer un scroll de page avec le doigt pose directement sur une vignette (il faut le faire a cote), comportement standard des grilles reordonnables tactiles (ex: Trello, Instagram mobile). */ touch-action: none; } .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); } /* Regroupe le label "Zoom :" et son select : .map-toolbar est en flex-wrap:wrap, donc sans ce conteneur les 2 elements pouvaient finir chacun sur leur propre ligne (le label reste accroche a la fin de la 1ere ligne pendant que le select, plus large, est le seul a manquer de place et bascule seul sur une 2e ligne). Groupes, ils basculent ensemble. */ /* margin-left:auto : pousse le groupe vers la droite de SA propre ligne, que ce soit la 1ere ligne (partage avec la barre de filtres, ex: map_naturiste a peu de filtres et tient sur 1 ligne) ou une ligne suivante quand il bascule seul (ex: map_club a 5 boutons de filtre, la barre est plus longue et le groupe est ejecte seul sur une 2e ligne). Sans ca, le groupe ejecte seul demarrait a gauche de sa ligne (comportement flex par defaut). */ .map-toolbar-zoom { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; margin-left: auto; } .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; } /* Barre compacte : les 200px ci-dessus ne servaient qu'a degager le bouton en position absolue. Comme il passe alors sur sa propre ligne (voir le bloc responsive de .search-bar-inline), cette reserve ne fait plus que renvoyer la case "Avec photo(s)" sous le champ "A" une fois sur deux selon la largeur. A garder ici, apres la regle ci-dessus : une media query n'augmente pas la specificite, donc l'ordre de declaration decide. */ @media (max-width: 768px) { #anniv .search-bar-inline--partout .search-field-photo { padding-right: 12px; } } /* 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; } /* ================================================ */ /* SLIDE VERROUILLE (non-abonne) : teaser + CTA */ /* Affiche uniquement en desktop V5 pour inciter a */ /* l'abonnement sans devoiler les photos 2+. */ /* ================================================ */ .fiche-photo-locked { position: relative; display: flex; width: 100%; height: 580px; align-items: center; justify-content: center; overflow: hidden; background: #111; text-decoration: none; cursor: pointer; } .fiche-photo-locked:hover, .fiche-photo-locked:focus, .fiche-photo-locked:active { text-decoration: none; color: inherit; } /* Fond flou tres accentue (aucune photo 2+ n'est envoyee : c'est la 1re photo, deja publique, floutee a l'extreme -> effet "il y en a plus"). */ .fiche-photo-locked-bg { filter: blur(40px) brightness(0.55); opacity: 0.9; } .fiche-photo-locked-overlay { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; } .fiche-photo-locked-overlay .material-icons { font-size: 54px; color: #fff; margin-bottom: 10px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); } .fiche-photo-locked-cta { display: inline-block; background: linear-gradient(135deg, #ffd633 0%, #ffb800 100%); color: #141515; padding: 12px 28px; border-radius: 999px; font-size: 16px; font-weight: 800; letter-spacing: 0.2px; box-shadow: 0 4px 14px rgba(255, 184, 0, 0.45); transition: transform 0.15s, box-shadow 0.15s; text-decoration: none; } .fiche-photo-locked:hover .fiche-photo-locked-cta { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255, 184, 0, 0.6); text-decoration: none; } /* Miniature verrouillee : meme structure qu'une vignette ( plein cadre) + flou CSS sur l'image deja publique + cadenas centre en absolute. */ .fiche-thumb-slide.fiche-thumb-locked { opacity: 1; } .fiche-thumb-slide.fiche-thumb-locked .fiche-thumb-locked-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; filter: blur(10px) brightness(0.5); transform: scale(1.18); } .fiche-thumb-slide.fiche-thumb-locked .material-icons { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; font-size: 30px; line-height: 1; color: #ffd633; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); 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 { height: auto; border-radius: 6px; } /* CTA d'incitation a l'abonnement : bouton jaune (coherent avec le bloc promo des annonces et les vignettes floutees). Fond jaune + texte sombre. */ .entree-sidebar-promo-cta { display: block; padding: 12px 12px; background: linear-gradient(135deg, #ffd633 0%, #ffb800 100%); color: #141515; border-radius: 10px; text-align: center; text-decoration: none; box-shadow: 0 4px 12px rgba(255, 184, 0, 0.35); transition: transform 0.15s, box-shadow 0.15s; } .entree-sidebar-promo-hook { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; opacity: 0.85; } .entree-sidebar-promo-action { display: block; font-size: 13px; font-weight: 600; margin-top: 2px; } .entree-sidebar-promo-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255, 184, 0, 0.5); color: #141515; 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, #suppAboAllopass.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, #suppAboAllopass.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; } /* Bootstrap ajoute un clearfix .modal-header::before/::after (content:" "; display:table). Dans un conteneur flex, ces pseudo-elements deviennent des items flex : avec justify-content:space-between ils se collent aux deux bords et poussent le titre + la croix vers le centre. On les neutralise pour que seuls titre (gauche) et croix (droite) soient repartis. */ #suppAbo.abo-modale-suppression .modal-header::before, #suppAbo.abo-modale-suppression .modal-header::after, #suppAboStripe.abo-modale-suppression .modal-header::before, #suppAboStripe.abo-modale-suppression .modal-header::after, #suppAboNok.abo-modale-suppression .modal-header::before, #suppAboNok.abo-modale-suppression .modal-header::after, #suppAboAllopass.abo-modale-suppression .modal-header::before, #suppAboAllopass.abo-modale-suppression .modal-header::after { display: 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, #suppAboAllopass.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, #suppAboAllopass.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, #suppAboAllopass.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, #suppAboAllopass.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, #suppAboAllopass.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, #suppAboAllopass.abo-modale-suppression .modal-body .abo-modale-attention .material-icons { font-size: 22px; } #suppAboAllopass.abo-modale-suppression .modal-body .abo-modale-codes { margin-top: 14px; padding: 10px 14px; background: var(--couleur-principale-light, rgba(235, 64, 109, 0.1)); border-radius: 8px; font-size: 13.5px; line-height: 1.6; } #suppAbo.abo-modale-suppression .modal-footer, #suppAboStripe.abo-modale-suppression .modal-footer, #suppAboNok.abo-modale-suppression .modal-footer, #suppAboAllopass.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, #suppAboAllopass.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, #suppAboAllopass.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, #suppAboAllopass.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, #suppAboAllopass.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, #suppAboAllopass.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; } }