/* lv-24560 — LV — Messagerie (styles) */ /* ============================================================ LV — Refonte espace « Mon compte » : onglet MESSAGERIE Charte conservée : Nunito, vert #4F6E5A, beige #F0E7DB Portée : uniquement les pages contenant .messaging-container ============================================================ */ /* ---------- 1. Grille 3 colonnes ---------- */ #content .messaging-container{align-items:stretch;gap:22px;margin:0 0 40px} #content .messaging-container, #content .messaging-container *{box-sizing:border-box} #content .messaging-container > .column{min-width:0} /* ---------- 2. Colonne « Conversations » ---------- */ #content #conversations-view{ width:230px;flex:0 0 230px;min-width:0; height:680px;max-height:76vh; padding:14px 12px; background:#fff;border-radius:18px; box-shadow:0 1px 2px rgba(46,61,49,.06),0 10px 28px rgba(46,61,49,.07); overflow:hidden} #content #conversations-view::before{ content:"Conversations";display:block;flex:0 0 auto; font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:#4F6E5A;padding:6px 10px 12px;margin:0 0 10px; border-bottom:1px solid rgba(46,61,49,.10)} #content #conversations-list{flex:1 1 auto;overflow-y:auto;padding:0 4px 4px 0} #content #conversations-list::-webkit-scrollbar, #content #messages-view::-webkit-scrollbar{width:8px} #content #conversations-list::-webkit-scrollbar-thumb, #content #messages-view::-webkit-scrollbar-thumb{background:rgba(46,61,49,.18);border-radius:99px} #content .conversation-item{ position:relative;margin:0 0 6px;padding:12px 34px 12px 13px; border:1px solid transparent;border-radius:12px; transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease} #content .conversation-item h4{ margin:0 0 3px;font-size:15px;font-weight:700;line-height:1.3;color:#2E3D31; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #content .conversation-item p{ margin:0;font-size:13px;line-height:1.45;color:#6B6B63; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #content .conversation-item i{position:absolute;top:14px;right:11px;font-size:14px;color:#A9A9A0;margin:0} #content .conversation-item:hover{background:#F2F6F1;border-color:#DCE7DB} /* non lu : enveloppe pleine (fa-solid) */ #content .conversation-item:has(i.fa-solid), #content .conversation-item:has(i.fas){background:#FBF7EF;border-color:#EADCC0} #content .conversation-item i.fa-solid, #content .conversation-item i.fas{color:#A58E60} /* conversation ouverte */ #content .conversation-item.active, #content .conversation-item.active:hover, #content .conversation-item.active:has(i.fa-solid){ background:#4F6E5A;border-color:#4F6E5A;color:#fff; box-shadow:0 6px 16px rgba(79,110,90,.22)} #content .conversation-item.active h4, #content .conversation-item.active p, #content .conversation-item.active i{color:#fff} /* ---------- 3. Colonne « Messages » ---------- */ #content #messages-view{ width:auto;flex:1 1 auto;min-width:0; height:680px;max-height:76vh; padding:0;background:#fff;border-radius:18px; box-shadow:0 1px 2px rgba(46,61,49,.06),0 10px 28px rgba(46,61,49,.07)} #content #messages-list{flex:1 1 auto;padding:24px 26px 6px} #content #messages-list .message{ max-width:85%;margin:0 0 14px;padding:13px 18px; border-radius:16px;font-size:15px;line-height:1.55; box-shadow:0 1px 2px rgba(46,61,49,.05)} #content #messages-list .message small{ margin:0 0 5px;font-weight:600;letter-spacing:.02em;color:#9A9A90} #content #messages-list .message.sent{ background:#4F6E5A;color:#fff;border:0;border-bottom-right-radius:5px} #content #messages-list .message.sent small{color:rgba(255,255,255,.75)} #content #messages-list .message.received{ background:#F5F1E9;border:1px solid #E7DFD1;color:#2E3D31;border-bottom-left-radius:5px} /* ---------- 4. Formulaire de réponse (ancré en bas) ---------- */ #content #reply-form{ position:sticky;bottom:0;z-index:2; margin:0;padding:14px 26px 18px; display:flex;flex-direction:column;gap:10px; background:#fff;border-top:1px solid rgba(46,61,49,.10)} #content #reply-form textarea{ width:100%;min-height:92px;max-height:220px;resize:vertical; padding:12px 14px;font-family:inherit;font-size:15px;color:#181818; background:#fff;border:1px solid #DDD4C5;border-radius:12px; transition:border-color .15s ease,box-shadow .15s ease} #content #reply-form textarea::placeholder{color:#A8A69E} #content #reply-form textarea:focus{ outline:none;border-color:#4F6E5A;box-shadow:0 0 0 3px rgba(79,110,90,.18)} #content #reply-form button, #content #reply-form button.button{ float:none;align-self:flex-end;margin:0; padding:10px 26px;font-size:15px;font-weight:700;line-height:1.4; color:#fff;background:#4F6E5A;border:1px solid #4F6E5A;border-radius:999px; cursor:pointer;transition:background-color .15s ease,border-color .15s ease} #content #reply-form button:hover, #content #reply-form button.button:hover{background:#3E5748;border-color:#3E5748;color:#fff} #content #reply-form button[disabled]{opacity:.55;cursor:not-allowed} /* ---------- 5. Colonne « Résumé de la demande » ---------- */ #content #conversation-infos{flex:0 0 260px;width:260px;min-width:0} #content #conversation-infos .vact_card{padding:22px 24px} #content #conversation-infos .vact_card h3{margin-top:0} #content #vacante-details{display:block;margin:0 0 18px} #content #conversation-infos #vacante-details .vacante_list_item{ display:block!important;padding:0;margin:0;border:0;background:none;box-shadow:none} #content #conversation-infos #vacante-details .illustr{ width:100%!important;height:148px;margin:0 0 12px;border-radius:12px;overflow:hidden;line-height:0} #content #conversation-infos #vacante-details .illustr img{ width:100%;height:100%;object-fit:cover;border-radius:12px} #content #conversation-infos #vacante-details .infos{display:block} #content #conversation-infos #vacante-details .infos .title{ font-size:17px!important;line-height:1.3!important;font-weight:700!important; color:#2E3D31!important;margin:0 0 8px!important} #content #conversation-infos #vacante-details .infos p{ font-size:13px;line-height:1.5;color:#6B6B63;margin:0 0 4px} #content #reservation-details{border-top:1px solid rgba(46,61,49,.10);padding-top:16px} #content #reservation-details:not(:has(*)){display:none;border:0;padding:0} #content #reservation-details p{font-size:13px!important;line-height:1.7;color:#4A4A44;margin:0} #content #reservation-details .button{ display:inline-block;margin-top:4px;padding:9px 22px;border-radius:999px; background:#4F6E5A;border:1px solid #4F6E5A;color:#fff;font-weight:700} #content #reservation-details .button:hover{background:#3E5748;border-color:#3E5748;color:#fff} /* ---------- 6. États vides ---------- */ #content #conversations-list > p, #content #messages-list > p{ margin:auto;padding:24px 14px;max-width:300px; text-align:center;font-size:14px;line-height:1.6;color:#8A8A80} /* ============================================================ 7. Encart « Sécurité » — mis en avant au-dessus de la messagerie (structure générée par le snippet JS ; repli CSS sur le paragraphe brut) ============================================================ */ #content .lv-secu, #content .page-content:has(.messaging-container) > p:last-of-type:has(img.emoji){ position:relative; margin:0 0 24px;padding:20px 24px 20px 68px; background:linear-gradient(180deg,#FCF8F0 0%,#F7F0E2 100%); border:1px solid #E6D8BC;border-left:5px solid #A58E60;border-radius:16px; box-shadow:0 1px 2px rgba(46,61,49,.05); font-size:14px;line-height:1.6;color:#5B4E33} #content .lv-secu::before, #content .page-content:has(.messaging-container) > p:last-of-type:has(img.emoji)::before{ content:"";position:absolute;left:22px;top:20px;width:32px;height:32px; border-radius:10px;background-color:#F1E4C8; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A58E60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:center;background-size:18px 18px} #content .lv-secu img.emoji, #content .page-content:has(.messaging-container) > p:last-of-type:has(img.emoji) img.emoji{display:none} #content .lv-secu .lv-secu__title{ margin:0;font-size:15.5px;font-weight:800;line-height:1.45;color:#4A3D22} #content .lv-secu .lv-secu__text{ margin:6px 0 0;font-size:13.5px;line-height:1.55;color:#6B5D3E} #content .lv-secu .lv-secu__list{margin:8px 0 0;padding:0;list-style:none} #content .lv-secu .lv-secu__list li{ position:relative;margin:0 0 4px;padding-left:16px;font-size:13.5px;line-height:1.55;color:#6B5D3E} #content .lv-secu .lv-secu__list li:last-child{margin-bottom:0} #content .lv-secu .lv-secu__list li::before{ content:"";position:absolute;left:0;top:8px;width:6px;height:6px; border-radius:50%;background:#A58E60} /* ---------- 8. Responsive ---------- */ @media (max-width:1200px){ #content .messaging-container{gap:16px} #content #conversations-view{width:210px;flex:0 0 210px} #content #conversation-infos{width:240px;flex:0 0 240px} } @media (max-width:980px){ #content .messaging-container{flex-direction:column;gap:16px} #content #conversations-view{width:100%;flex:1 1 auto;height:auto;max-height:300px} #content #messages-view{width:100%;flex:1 1 auto;height:auto;min-height:440px;max-height:70vh} #content #conversation-infos{width:100%;flex:1 1 auto} #content #conversation-infos #vacante-details .illustr{height:180px} } @media (max-width:600px){ #content .lv-secu, #content .page-content:has(.messaging-container) > p:last-of-type:has(img.emoji){ padding:18px 18px 18px 18px} #content .lv-secu::before, #content .page-content:has(.messaging-container) > p:last-of-type:has(img.emoji)::before{ position:relative;left:auto;top:auto;display:block;margin:0 0 10px} #content #messages-list .message{max-width:88%} #content #reply-form{padding:12px 16px 16px} #content #messages-list{padding:18px 16px 6px} } /* lv-24826 — LV — Détails de réservation (styles) */ /* ============================================================ LV — Détails de la réservation : mise en page Compagnon du snippet JS « LV — Détails de réservation (mise en page) » ============================================================ */ #content .lv-resa h1.elementor-title{margin-bottom:10px} /* ------------------------------------------------ résumé compact */ #content .lv-resa .reservation_detail_grid{display:block!important} #content .lv-resa .reservation_detail_item{ align-items:flex-start;gap:12px 20px;padding:16px 22px;margin:0} #content .lv-resa .reservation_detail_item h4{ display:flex;align-items:center;gap:12px;flex-wrap:wrap;width:100%; margin:0!important; font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase} #content .lv-resa .lv-resa-pastille{ margin-left:auto;padding:4px 12px; font-size:11.5px;font-weight:700;letter-spacing:.02em;text-transform:none; color:#7A6329;background:#FBF1DC;border:1px solid #EBD9AE;border-radius:999px} #content .lv-resa .lv-resa-pastille--ok{ color:#3E5748;background:#EAF0E8;border-color:#CFE0CB} #content .lv-resa .lv-resa-meta{ margin-left:auto;text-align:right; font-size:10.5px;font-weight:600;letter-spacing:.01em;text-transform:none; color:#8A8A80;line-height:1.45} #content .lv-resa .lv-resa-meta + .lv-resa-pastille{margin-left:12px} #content .lv-resa .reservation_detail_item .illustr{ flex:0 0 132px;width:132px;align-self:stretch!important} #content .lv-resa .reservation_detail_item .illustr img{ width:132px;height:100%;min-height:132px;object-fit:cover;border-radius:12px;display:block} #content .lv-resa .reservation_detail_item .infos{ display:block!important;flex:1 1 300px!important;min-width:0;align-self:flex-start!important} #content .lv-resa .reservation_detail_item .infos > div{ width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:12px 26px;align-items:start} #content .lv-resa .reservation_detail_item .infos > div > *{ order:0!important;float:none!important} #content .lv-resa .reservation_detail_item .infos .title{ grid-column:1/-1;font-size:19px;font-weight:800;color:#2E3D31;line-height:1.25} #content .lv-resa .reservation_detail_item .infos p{ margin:0;font-size:15.5px;font-weight:700;color:#2E3D31;line-height:1.35} #content .lv-resa .reservation_detail_item .infos p strong{ display:block;margin-bottom:1px; font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:#8A8A80} #content .lv-resa .lv-resa-p--note{ grid-column:1/-1;font-size:12.5px!important;font-weight:400!important; color:#8A8A80!important;line-height:1.5!important} #content .lv-resa .lv-resa-p--statut{display:none} #content .lv-resa .lv-resa-annonce{color:inherit;text-decoration:none} #content .lv-resa .lv-resa-annonce:hover{text-decoration:underline;text-underline-offset:3px} /* resume : 1re ligne locataire + periode, 2e ligne loyer / provisions / frais / revenu */ @media (min-width:761px){ #content .lv-resa .reservation_detail_item .infos > div{ grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 18px} /* le titre passe a la ligne a l aplomb de la pastille de statut */ #content .lv-resa .reservation_detail_item .infos .title{grid-row:1;grid-column:1/4} #content .lv-resa .reservation_detail_item .infos p[data-lv="locataire"]{grid-row:2;grid-column:1} #content .lv-resa .reservation_detail_item .infos p[data-lv="periode"]{grid-row:2;grid-column:2/4} #content .lv-resa .reservation_detail_item .infos p[data-lv="loyer"]{grid-row:3;grid-column:1} #content .lv-resa .reservation_detail_item .infos p[data-lv="provisions"]{grid-row:3;grid-column:2} #content .lv-resa .reservation_detail_item .infos p[data-lv="revenu"]{grid-row:3;grid-column:3} /* garde-fou : si un libelle passait sur 2 lignes, les montants resteraient alignes */ #content .lv-resa .reservation_detail_item .infos p[data-lv="loyer"] strong, #content .lv-resa .reservation_detail_item .infos p[data-lv="provisions"] strong, #content .lv-resa .reservation_detail_item .infos p[data-lv="revenu"] strong{min-height:1.35em} } /* -------------------------------------------------- carte décision */ #content .lv-resa .lv-decision{ display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap; margin-top:16px;padding:22px 24px; background:linear-gradient(180deg,#F5F9F3 0%,#EDF3EB 100%); border:1px solid #CFE0CB;border-left:5px solid #4F6E5A;border-radius:16px} #content .lv-resa .lv-decision__txt{flex:1 1 320px;min-width:0} #content .lv-resa .lv-decision__titre{ margin:0 0 6px;padding:0!important;border:0!important; font-size:18px;font-weight:800;color:#2E3D31;line-height:1.3} #content .lv-resa .lv-decision__sous{ margin:0;font-size:13.5px;line-height:1.55;color:#5E6B5F} #content .lv-resa .lv-decision__actions{ flex:0 0 auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap} #content .lv-resa .lv-decision__valider{ margin:0;padding:13px 26px;border-radius:10px;cursor:pointer; font-size:15px;font-weight:700; background:#4F6E5A!important;border:1px solid #4F6E5A!important;color:#fff!important} #content .lv-resa .lv-decision__valider:hover{ background:#3E5748!important;border-color:#3E5748!important} #content .lv-resa .lv-decision__examiner{ margin:0;padding:12px 20px;border-radius:10px;font-weight:700; background:#fff!important;border:1px solid #CFE0CB!important;color:#4F6E5A!important} #content .lv-resa .lv-decision__examiner:hover{ background:#F4F8F2!important;border-color:#B8CFB3!important} #content .lv-resa .lv-decision__rejeter{ margin:0;padding:8px 4px;font-size:13px;text-decoration:underline; background:none!important;border:0!important;box-shadow:none!important;color:#9A9A90!important} #content .lv-resa .lv-decision__rejeter:hover{color:#B4443A!important} /* ------------------------------------------------------ accordéons */ #content .lv-resa .lv-acc{ margin-top:14px;background:#fff; border:1px solid #E4DED2;border-radius:16px;overflow:hidden} #content .lv-resa .lv-acc__tete{ display:flex;align-items:center;gap:14px;width:100%;margin:0; padding:17px 22px;background:none;border:0;border-radius:0; cursor:pointer;text-align:left;font-family:inherit;box-shadow:none} #content .lv-resa .lv-acc__tete:hover{background:#FBFAF7} #content .lv-resa .lv-acc__titre{ flex:0 1 auto;font-size:16px;font-weight:800;color:#2E3D31;line-height:1.3} #content .lv-resa .lv-acc__meta{ flex:1 1 auto;font-size:12.5px;font-weight:400;color:#8A8A80} #content .lv-resa .lv-acc__fleche{ flex:0 0 auto;width:10px;height:10px;margin-right:4px; border-right:2px solid #6B6B63;border-bottom:2px solid #6B6B63; transform:rotate(45deg);transition:transform .18s ease} #content .lv-resa .lv-acc--ouvert .lv-acc__fleche{transform:rotate(-135deg)} #content .lv-resa .lv-acc__corps{display:none;padding:0} #content .lv-resa .lv-acc--ouvert .lv-acc__corps{display:block} #content .lv-resa .lv-acc__corps > .vact_card, #content .lv-resa .lv-acc__corps > div > .vact_card:first-child{margin-top:0} #content .lv-resa .lv-acc__corps > form > .vact_card{margin-top:0} /* MODIF — la carte est deja encadree par l accordeon : l ombre de .vact_card ferait un double contour. Et le contenu du bail remonte de 50px. */ #content .lv-resa .lv-acc__corps .vact_card.lv-bail{box-shadow:none} #content .lv-resa .lv-acc__corps form > .vact_card.lv-bail, #content .lv-resa .lv-acc__corps > div > .vact_card.lv-bail:first-child{margin-top:-50px} /* la carte de validation d'origine, aux couleurs du site */ #content .lv-resa .vact_card[style*="28a745"]{ background:#F5F9F3!important;border:1px solid #CFE0CB!important; border-left:5px solid #4F6E5A!important;border-radius:16px!important;padding:22px 24px!important} #content .lv-resa .vact_card[style*="28a745"] h3{color:#2E3D31!important} #content .lv-resa #validate-bail-btn{ background:#4F6E5A!important;border-radius:10px!important; padding:13px 26px!important;font-weight:700} #content .lv-resa #validate-bail-btn:hover{background:#3E5748!important} /* ---------------------------------------------------------- mobile */ @media (max-width:760px){ #content .lv-resa .reservation_detail_item{gap:14px;padding:18px} #content .lv-resa .reservation_detail_item .illustr, #content .lv-resa .reservation_detail_item .illustr img{flex-basis:100%;width:100%} #content .lv-resa .reservation_detail_item .illustr img{height:160px} #content .lv-resa .lv-resa-pastille{margin-left:0} #content .lv-resa .lv-decision{padding:18px} #content .lv-resa .lv-decision__actions{flex:1 1 100%} #content .lv-resa .lv-decision__valider, #content .lv-resa .lv-decision__examiner{ flex:1 1 100%;width:100%;text-align:center;justify-content:center} #content .lv-resa .lv-decision__rejeter{flex:1 1 100%;text-align:center} #content .lv-resa .lv-acc__tete{flex-wrap:wrap;gap:4px 12px;padding:15px 18px} #content .lv-resa .lv-acc__titre{flex:1 1 auto} #content .lv-resa .lv-acc__meta{flex:1 1 100%;order:3} #content .lv-resa .lv-acc__corps{padding:0 14px 14px} } /* adresse du locataire manquante : le bail ne peut pas être validé */ #content .lv-resa .lv-decision__alerte{ margin:10px 0 0;padding:11px 13px;border-radius:10px; background:#FBF1DC;border:1px solid #EBD9AE; font-size:13px;line-height:1.5;color:#7A6329} #content .lv-resa .lv-decision__alerte a{color:#4F6E5A;font-weight:700;text-decoration:underline} #content .lv-resa .lv-decision__valider[disabled]{ opacity:.45;cursor:not-allowed;background:#8FA894!important;border-color:#8FA894!important} /* lv-24831 — LV — Messages non lus (styles) */ /* ============================================================ LV — Messages non lus Compagnon du snippet JS « LV — Messages non lus (affichage) » ============================================================ */ /* ------------------------------- pastille sur l'onglet Messagerie */ #content .kwp_dashboard_menu .lv-msg-pastille{ display:inline-flex;align-items:center;justify-content:center; min-width:23px;height:23px;padding:0 7px;margin-left:9px; border-radius:999px;vertical-align:middle; background:#4F6E5A;color:#fff; font-size:12.5px;font-weight:800;line-height:1;letter-spacing:0; box-shadow:0 0 0 3px rgba(79,110,90,.22)} #content .kwp_dashboard_menu a.active .lv-msg-pastille{ background:#fff;color:#2E3D31;box-shadow:0 0 0 3px rgba(255,255,255,.28)} /* l'onglet lui-même se distingue quand il reste du non-lu */ #content .kwp_dashboard_menu a:has(.lv-msg-pastille):not(.active){ border-color:#4F6E5A;background:#FDFAF4} #content .kwp_dashboard_menu a:has(.lv-msg-pastille):not(.active) i{color:#4F6E5A} /* Survol : l'onglet se remplit de vert, enveloppe et pastille passent en négatif. Sans ce remplissage, du blanc sur le fond crème serait illisible. */ #content .kwp_dashboard_menu a:has(.lv-msg-pastille):not(.active):hover, #content .kwp_dashboard_menu a:has(.lv-msg-pastille):not(.active):focus-visible{ background:#4F6E5A;border-color:#4F6E5A;color:#fff} #content .kwp_dashboard_menu a:has(.lv-msg-pastille):not(.active):hover i, #content .kwp_dashboard_menu a:has(.lv-msg-pastille):not(.active):focus-visible i{ color:#fff} #content .kwp_dashboard_menu a:has(.lv-msg-pastille):not(.active):hover .lv-msg-pastille, #content .kwp_dashboard_menu a:has(.lv-msg-pastille):not(.active):focus-visible .lv-msg-pastille{ background:#fff;color:#4F6E5A;box-shadow:0 0 0 3px rgba(255,255,255,.30)} /* ------------ pastille dans le menu de connexion de l'en-tete */ /* Le petit point vert d'origine est remplace par le meme compteur que l'onglet Messagerie de l'espace prive, en version compacte. */ .elementor-nav-menu .lv-msg-pastille, .elementor-nav-menu__container .lv-msg-pastille{ display:inline-flex;align-items:center;justify-content:center; min-width:19px;height:19px;padding:0 6px;margin-left:8px; border-radius:999px;vertical-align:middle; background:#4F6E5A;color:#fff; font-size:11px;font-weight:800;line-height:1;letter-spacing:0} .elementor-nav-menu a:hover .lv-msg-pastille, .elementor-nav-menu a:focus-visible .lv-msg-pastille, .elementor-nav-menu__container a:hover .lv-msg-pastille{ background:#2E3D31;color:#fff} /* ------------------------------------- rappel au-dessus de la liste */ #content .lv-conv-entete{ display:block;margin:0 2px 10px; font-size:11.5px;font-weight:800;letter-spacing:.02em;color:#A58E60} /* ----------------------------------- conversation non lue dans la liste */ #content #conversations-list .conversation-item{ border-left:4px solid transparent;transition:background-color .15s ease,border-color .15s ease} #content #conversations-list .conversation-item.lv-conv--nonlu{ background:#FBF5EA;border-left-color:#A58E60} #content #conversations-list .conversation-item.lv-conv--nonlu strong{ font-weight:800;color:#2E3D31} #content #conversations-list .conversation-item.lv-conv--nonlu i.fa-envelope{ color:#A58E60} /* ------------------------------------------------------------ mobile */ @media (max-width:760px){ #content .kwp_dashboard_menu .lv-msg-pastille{margin-left:7px} } /* lv-24933 — LV — Modale inscription (refonte ergo) */ /* ========================================================= LesVacantes — Modale « Créer un compte » : refonte ergo Charte conservée : vert #4f6e5a, titres sangbleu, texte Nunito ========================================================= */ /* ---- 1. Le conteneur : plus jamais plein écran ---- */ .kwp-login-modal-content{ max-width: 460px !important; height: auto !important; max-height: 92vh !important; overflow-y: auto; border-radius: 16px; box-shadow: 0 18px 50px rgba(24,24,24,.22); } /* ---- 2. En-tête resserré ---- */ .kwp-login-modal-header{ padding: 28px 28px 0; } .kwp-login-modal-header h3{ font-size: 26px; margin: 0 0 6px; } .kwp-login-modal-header p{ font-size: 14px; color: #6f7169; opacity: 1; } .kwp-login-modal-close{ top: 14px; right: 16px; font-size: 24px; } .kwp-login-modal-body{ padding: 22px 28px 26px; } /* ---- 3. Champs : rectangles doux, texte lisible, moins d air ---- */ .kwp-login-modal-body input[type="text"], .kwp-login-modal-body input[type="email"], .kwp-login-modal-body input[type="password"]{ height: 46px; padding: 0 16px; margin: 0 0 12px; border: 1px solid #cfd3ca; border-radius: 12px; font-size: 15px; color: #181818; background: #fff; transition: border-color .18s ease, box-shadow .18s ease; } .kwp-login-modal-body input[type="text"]::placeholder, .kwp-login-modal-body input[type="email"]::placeholder, .kwp-login-modal-body input[type="password"]::placeholder{ color:#9aa094; } .kwp-login-modal-body input[type="text"]:focus, .kwp-login-modal-body input[type="email"]:focus, .kwp-login-modal-body input[type="password"]:focus{ outline: none; border-color: var(--green, #4f6e5a); box-shadow: 0 0 0 3px rgba(79,110,90,.16); } /* ---- 4. Grille : Nom / Prénom sur une seule ligne ---- */ #kwp-register-form > input[type="hidden"]{ display: none !important; } #kwp-register-form{ display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; } #kwp-register-form > div:first-of-type, #kwp-register-form > input[type="email"], #kwp-register-form > input[type="password"], #kwp-register-form > span, #kwp-register-form > button{ grid-column: 1 / -1; } /* ---- 5. Libellés : invisibles à l oeil, lus par les lecteurs d écran ---- */ #kwp-register-modal #kwp-register-form > label{ display: block !important; position: absolute !important; width: 1px; height: 1px; margin: 0 !important; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---- 6. Propriétaire / Locataire : sélecteur segmenté ---- */ #kwp-register-form > div:first-of-type{ display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px !important; margin: 0 0 18px !important; padding: 4px; background: #f3f4f0; border-radius: 12px; } #kwp-register-form > div:first-of-type label{ display: flex !important; justify-content: center; align-items: center; gap: 8px; margin: 0 !important; padding: 10px 6px; border-radius: 9px; font-size: 15px; color: #5a5f56; cursor: pointer; transition: background .18s ease, color .18s ease; } #kwp-register-form > div:first-of-type input[type="radio"]{ accent-color: var(--green, #4f6e5a); margin: 0; } #kwp-register-form > div:first-of-type label:has(input:checked){ background: #fff; color: var(--green, #4f6e5a); font-weight: 700; box-shadow: 0 1px 3px rgba(24,24,24,.14); } /* ---- 7. Bouton principal : pilule, comme les CTA du site ---- */ #kwp-popup-register-submit, .kwp-login-modal-body input[type="submit"]{ height: 48px; margin-top: 6px !important; border-radius: 999px; background-color: var(--green, #4f6e5a); color: #fff; font-size: 16px; font-weight: 600; border: 1px solid var(--green, #4f6e5a); transition: background-color .18s ease; } #kwp-popup-register-submit:hover, .kwp-login-modal-body input[type="submit"]:hover{ background-color: var(--dark-green, #384e40); border-color: var(--dark-green, #384e40); color: #fff; } /* ---- 8. Message mots de passe différents ---- */ #kwp-popup-password-match-msg{ margin: -6px 0 8px !important; font-size: 13px; } /* ---- 9. Pied de modale ---- */ .kwp-login-modal-links{ margin-top: 16px; padding-top: 16px; } /* ---- 10. Mobile : la modale reste une carte, pas un plein écran ---- */ @media screen and (max-width: 600px){ .kwp-login-modal-content{ width: calc(100% - 24px) !important; max-width: none !important; height: auto !important; max-height: 90vh !important; top: 50% !important; transform: translate(-50%, -50%) !important; } .kwp-login-modal-header{ padding: 22px 20px 0; } .kwp-login-modal-body{ padding: 18px 20px 22px; } #kwp-register-form{ grid-template-columns: 1fr; } #kwp-register-form > *{ grid-column: 1 / -1 !important; } } /* ---- 11. Inscription : sous-titre masqué ---- */ #kwp-register-modal .kwp-login-modal-header p{ display: none !important; } #kwp-register-modal .kwp-login-modal-header h3{ margin-bottom: 0; } /* lv-24984 — LV — Bail : signature manuscrite (styles) */ /* LV — Bail : signature manuscrite (styles) Feuille de signature du bail. Reprend les codes visuels du parcours d'état des lieux — mêmes teintes, mêmes rayons, même cadre pointillé — pour que les deux gestes de signature se ressemblent. Emplacement WPCode : En-tête de tout le site. */ .lv-sgn{ position:fixed;inset:0;z-index:100000; background:rgba(28,34,29,.55); display:flex;align-items:flex-end;justify-content:center; padding:0; -webkit-overflow-scrolling:touch} .lv-sgn__feuille{ width:100%;max-width:640px;max-height:96vh; background:#FBF9F4;border-radius:20px 20px 0 0; display:flex;flex-direction:column;overflow:hidden; box-shadow:0 -8px 40px rgba(0,0,0,.22)} /* ------------------------------------------------------------- en-tête */ .lv-sgn__barre{ flex:0 0 auto;display:flex;align-items:center;justify-content:space-between; gap:12px;padding:16px 18px;background:#fff;border-bottom:1px solid #EDE7DA} .lv-sgn__titre{ font-size:15px;font-weight:600;color:#2E3D31;letter-spacing:.01em} .lv-sgn__fermer{ flex:0 0 auto;width:32px;height:32px;line-height:1; border:0!important;border-radius:50%;cursor:pointer; font-size:20px;font-family:inherit; background:#F1EDE4!important;color:#6B6B63!important;box-shadow:none!important; padding:0} .lv-sgn__fermer:hover{background:#E8E2D6!important} /* --------------------------------------------------------------- corps */ .lv-sgn__corps{ flex:1 1 auto;overflow-y:auto;padding:20px 18px 26px} .lv-sgn__chapo{ margin:0 0 20px;font-size:13.5px;line-height:1.55;color:#5C6159} .lv-sgn__chapo strong{color:#2E3D31} .lv-sgn__champ{display:block;margin:0 0 16px} .lv-sgn__lib{ display:block;margin-bottom:6px; font-size:12px;font-weight:600;letter-spacing:.03em; text-transform:uppercase;color:#8A8A80} .lv-sgn__champ input{ width:100%;box-sizing:border-box; padding:11px 13px;font-size:15px;font-family:inherit;color:#2E3D31; background:#fff;border:1px solid #DDD4C5;border-radius:12px} .lv-sgn__champ input:focus{ outline:none;border-color:#4F6E5A;box-shadow:0 0 0 3px rgba(79,110,90,.14)} .lv-sgn__aide-texte{ display:block;margin-top:5px;font-size:12px;line-height:1.45;color:#8A8A80} .lv-sgn__date{ margin:0 0 16px;padding:11px 13px; background:#F4F1E9;border:1px solid #EDE7DA;border-radius:12px} .lv-sgn__date strong{ display:block;margin:2px 0 0;font-size:15px;color:#2E3D31} .lv-sgn__date small{ display:block;margin-top:5px;font-size:12px;line-height:1.45;color:#8A8A80} .lv-sgn__mention{ margin:0 0 12px;font-size:13px;line-height:1.5; font-style:italic;color:#5C6159} /* ---------------------------------------------------------- le canevas */ .lv-sgn .lv-signature{margin:0 0 8px} .lv-sgn .lv-signature__zone{ width:100%;height:180px;display:block; background:#fff;border:1px dashed #C9BFA9;border-radius:14px; touch-action:none;cursor:crosshair} .lv-sgn .lv-signature__aide{ margin:6px 2px 0;font-size:12px;color:#8A8A80; display:flex;justify-content:space-between;gap:10px} .lv-sgn .lv-signature__aide button{ background:none!important;border:0!important;padding:0; color:#9A9A90!important;font-size:12px;font-family:inherit; text-decoration:underline;cursor:pointer;box-shadow:none!important} /* -------------------------------------------------------- message, pied */ .lv-sgn__message{ margin:14px 0 0;padding:12px 14px;border-radius:12px; font-size:13px;line-height:1.5;background:#F4F8F2;color:#3E5748} .lv-sgn__message--erreur{background:#FBEDEC;color:#8E3730} .lv-sgn__pied{ flex:0 0 auto;display:flex;gap:10px; padding:14px 18px calc(14px + env(safe-area-inset-bottom)); background:#fff;border-top:1px solid #EDE7DA} .lv-sgn__pied > *{flex:1 1 0} .lv-sgn .lv-btn{ display:inline-flex;align-items:center;justify-content:center; padding:13px 18px;border:0;border-radius:12px;cursor:pointer; font-family:inherit;font-size:15px;font-weight:600; background:#4F6E5A;color:#fff;box-shadow:none} .lv-sgn .lv-btn:hover{background:#3E5748;color:#fff} .lv-sgn .lv-btn[disabled]{opacity:.5;cursor:default} .lv-sgn .lv-btn--vide{ background:#fff;color:#4F6E5A;border:1px solid #CFE0CB} .lv-sgn .lv-btn--vide:hover{background:#F4F8F2;color:#4F6E5A} /* ------------------------------ accroche insérée dans la page réservation */ .lv-sgn__accroche{ margin:0 0 18px;font-size:14px;line-height:1.55;color:#5C6159} /* ------------------------------------------------------- grands écrans */ @media (min-width:700px){ .lv-sgn{align-items:center;padding:24px} .lv-sgn__feuille{border-radius:20px;max-height:90vh} .lv-sgn__corps{padding:26px 26px 30px} .lv-sgn__pied{padding:16px 26px;justify-content:flex-end} .lv-sgn__pied > *{flex:0 1 200px} } /* lv-25016 — LV — Réservation : composition en colonnes (styles) */ /* ===================================================================== LesVacantes — Page « Détails de la réservation » 1) Composition en 2 colonnes : Résumé (gauche) / Échéancier (droite) 2) Bloc des montants retiré du Résumé (doublon avec l'échéancier) ===================================================================== */ /* --------------------------------------------------------------------- 1. Gabarit élargi à 1200 px — uniquement sur le détail de réservation --------------------------------------------------------------------- */ @media (min-width: 1100px) { .site-main:has(.lv-resa) { max-width: 1200px !important; margin-inline: auto; padding-inline: 20px; box-sizing: border-box; } /* Deux colonnes égales : le conteneur devient une grille. Tous les blocs restent pleine largeur, sauf Résumé et Échéancier. */ .vact_account_container.lv-resa { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 0; align-items: start; } .vact_account_container.lv-resa > * { grid-column: 1 / -1; min-width: 0; } .vact_account_container.lv-resa > #lv-resume { grid-column: 1 / 2; } .vact_account_container.lv-resa > .lv-sched { grid-column: 2 / 3; } } /* --------------------------------------------------------------------- 2. Bloc des montants retiré de la carte Résumé (Loyer, provisions, total encaissé, frais de service et « Ce que vous percevez » — l'information reste donnée en entier par le bloc Échéancier des paiements) --------------------------------------------------------------------- */ .lv-resume__money { display: none !important; } /* ------------------------------------------------------------- 3. Resume de la demande : retrait du bouton "Voir sa situation" ------------------------------------------------------------- */ .lv-resume .lv-situ-btn { display: none !important; } /* ------------------------------------------------------------- 4. Informations du locataire : coordonnees + adresse alignees a droite de la photo, sans ecart excessif ------------------------------------------------------------- */ .vact_card:has(.lv-locsitu) > .flex { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 16px; } .vact_card:has(.lv-locsitu) > .flex > div:first-child { flex: 0 0 auto; width: auto; margin: 0; } .vact_card:has(.lv-locsitu) > .flex > div:first-child img { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 50%; } .vact_card:has(.lv-locsitu) > .flex > div:last-child { flex: 1 1 auto; min-width: 0; margin: 0; } .vact_card:has(.lv-locsitu) > .flex > div:last-child > p { margin: 0 0 10px; } .vact_card:has(.lv-locsitu) > .flex > div:last-child > p:last-child { margin-bottom: 0; } @media (max-width: 480px) { .vact_card:has(.lv-locsitu) > .flex { gap: 12px; } .vact_card:has(.lv-locsitu) > .flex > div:first-child img { width: 56px; height: 56px; } } /* --------------------------------------------------------------------- lv-fix-2col-2026-08-25 Le Resume et l'Echeancier sont desormais regroupes par le snippet JS dans un sous-grid #lv-resume.reservation_detail_grid--proprio qui gere lui-meme ses deux colonnes. Ce wrapper doit donc occuper toute la largeur du conteneur, sinon il se retrouve enferme dans la colonne 1 et les deux cartes tombent a 25% chacune. --------------------------------------------------------------------- */ .vact_account_container.lv-resa > #lv-resume.reservation_detail_grid{ grid-column: 1 / -1; } /* lv-25098 — LV — Situation : correctif pastilles + typo (sangbleu / nunito) */ /* ========================================================= LesVacantes — page « Ma situation » (/mon-compte/situation/) 1) Correctif d'affichage 2) Typo 3) Blocs façon page Profil 4) Sections dépliantes (voir le snippet JS « accordéon ») --------------------------------------------------------- Cause du bug d'origine : kwp-vacantes-style.css applique #content label { display:block; width:100%; color:#333 } à TOUS les labels. Le sélecteur ID l'emporte sur celui du plugin (.lv-situation__chips label) : les pastilles passaient en pleine largeur, la case disparaissait, et le libellé coché restait gris sur fond vert. On repasse au-dessus avec #content. ========================================================= */ /* ---------- 1. PASTILLES (chips) — correctif ---------- */ #content .lv-situation__chips{ display:flex; flex-wrap:wrap; gap:9px; } #content .lv-situation__chips label{ display:inline-flex; /* annule display:block du thème */ width:auto; /* annule width:100% */ max-width:100%; margin:0; /* annule margin-bottom:10px */ color:inherit; font-family:nunito, sans-serif; font-size:15px; font-weight:400; border-color:#DDD4C5; /* même trait que les champs du Profil */ } /* case native masquée, mais toujours accessible au clavier */ #content .lv-situation__chips input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; } #content .lv-situation__chips input:checked + label{ color:#fff; font-weight:600; } /* ---------- 2. BLOCS — carte blanche identique à .vact_card (Profil) ---------- */ #content .lv-situation__block{ background:#fff; border:0; border-radius:18px; padding:22px 24px; box-shadow:0 1px 2px rgba(46,61,49,.06), 0 10px 28px rgba(46,61,49,.07); } /* ---------- 3. TYPOGRAPHIE ---------- */ /* Titre de page — sangbleu, comme « Mon profil » */ #content h1.lv-situation__title, #content .page-content > h1.elementor-title{ font-family:sangbleu, Georgia, serif; font-weight:400; line-height:1.05; color:var(--lv-green,#384E40); } #content .lv-situation__intro{ font-family:nunito, sans-serif; font-size:15px; line-height:1.6; color:#5C6B60; } /* Titres de section — métriques de .vact_card h2, en sangbleu */ #content .lv-situation__block > h2{ font-family:nunito, sans-serif; font-size:20px; line-height:1.3; font-weight:700; color:#2E3D31; margin:0 0 20px; padding-bottom:14px; border-bottom:1px solid rgba(46,61,49,.12); } /* Sur-titres de groupe : DURÉE SOUHAITÉE, PRÉCISIONS… */ #content .lv-situation__sub{ font-family:nunito, sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:#5C6B60; margin:22px 0 10px; } /* Textes d'aide */ #content .lv-situation__hint, #content .lv-situation__notice, #content .lv-situation__foot{ font-family:nunito, sans-serif; font-size:14px; line-height:1.6; color:#5C6B60; } /* Zone de texte libre — mêmes champs que le Profil */ #content .lv-situation textarea{ font-family:nunito, sans-serif; font-size:15.5px; width:100%; background:#fff; border:1px solid #DDD4C5; border-radius:10px; padding:11px 14px !important; margin:0 !important; line-height:1.6 !important; color:var(--lv-ink,#181818); min-height:150px; } /* Bouton d'enregistrement */ #content .lv-situation__save{ font-family:nunito, sans-serif; font-weight:700; font-size:14.5px; letter-spacing:.02em; padding:13px 26px; border-radius:999px; } #content .lv-situation{ padding-top:18px; } /* ---------- 4. SECTIONS DÉPLIANTES ---------- (le snippet JS ajoute .lv-acc sur le bloc, .is-open quand ouvert) */ #content .lv-acc > h2{ display:flex; align-items:center; justify-content:flex-start; gap:14px; cursor:pointer; user-select:none; margin-bottom:0; transition:margin-bottom .2s ease; } #content .lv-acc.is-open > h2{ margin-bottom:20px; } #content .lv-acc > h2:focus-visible{ outline:2px solid var(--lv-green,#384E40); outline-offset:4px; border-radius:4px; } #content .lv-acc__chevron{ margin-left:auto; flex:0 0 auto; width:22px; height:22px; position:relative; transition:transform .25s ease; } #content .lv-acc__chevron::before{ content:""; position:absolute; left:5px; top:6px; width:9px; height:9px; border-right:2px solid #2E3D31; border-bottom:2px solid #2E3D31; transform:rotate(45deg); } #content .lv-acc.is-open .lv-acc__chevron{ transform:rotate(180deg); } #content .lv-acc__body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease; } #content .lv-acc.is-open > .lv-acc__body{ grid-template-rows:1fr; } #content .lv-acc__body > div{ overflow:hidden; min-height:0; } /* ---------- 5. ÉLÉMENTS MASQUÉS ---------- Pour les réafficher, supprimer ce bloc. */ #content .lv-situation__who, /* « Visible par les propriétaires… » */ #content .lv-situation__preview, /* « Ce que le propriétaire lira… » */ #content .lv-situation__callout{ /* « Tout est facultatif… » */ display:none !important; } /* ---------- 6. ONGLET PROFIL ---------- Le bloc « Mon projet » (textarea projet_locataire) fait doublon avec « En quelques mots » de la page Situation. On le masque sans le retirer du DOM : le champ reste envoyé tel quel à l'enregistrement du profil, donc aucune donnée déjà saisie n'est effacée. */ #content .vact_card:has(textarea[name="projet_locataire"]){ display:none; } /* ---------- 6. NUMEROTATION DES BLOCS ---------- */ #content .lv-situation{ counter-reset:lvblock; } #content .lv-situation__block h2{ counter-increment:lvblock; } #content .lv-situation__block h2::before{ content:counter(lvblock) ". "; opacity:.5; } #content .lv-acc > h2::before{ margin-right:-8px; } /* Titre du bloc « Mes justificatifs » (hors accordéon) */ #content .lv-situation__docs h2{ font-family:nunito, sans-serif; font-size:20px; line-height:1.3; font-weight:700; color:#2E3D31; } /* lv-25235 — LV — Ajustements profil + reservation (Claude) */ /* ===================================================================== LesVacantes — Ajustements d'affichage (profil + page reservation) Cree via WPCode. Desactivable en 1 clic. ===================================================================== */ /* 1. Mon profil : avatar en cercle parfait de 100px (style inline 120px + conteneur flex qui l'ecrasait a 96px => ovale) */ div:has(> label.file-upload-label) > img[style*="border-radius: 50%"], div:has(> label.file-upload-label) > img[style*="border-radius:50%"] { width: 100px !important; height: 100px !important; flex: 0 0 auto; aspect-ratio: 1 / 1; object-fit: cover; max-width: none; } /* 2. Reservation : bouton « Voir sa situation » + sa modale masques (doublon avec le bloc « Informations du locataire ») */ body .lv-resa .vact_card .lv-situ-btn, body div.lv-situ-modal { display: none !important; } /* 3. Bloc « Informations du locataire » : photo / nom / adresse sur 3 colonnes */ @media (min-width: 768px) { body section.lv-acc:has(.lv-locsitu) .vact_card > .flex { display: grid !important; grid-template-columns: auto 1fr 1fr; align-items: center; gap: 24px; } body section.lv-acc:has(.lv-locsitu) .vact_card > .flex > div:last-child { display: contents; } body section.lv-acc:has(.lv-locsitu) .vact_card > .flex p { margin: 0; } } /* 4. Bloc « Informations du locataire » : sans ombre portee */ #content section.lv-acc:has(.lv-locsitu) .vact_card { box-shadow: none !important; } /* 5. Mobile uniquement : retrait du padding de 30px dans le bloc « Le bail » */ @media (max-width: 767px) { body .lv-acc .vact_card.lv-bail[style*="padding: 30px"], body .lv-acc .vact_card.lv-bail[style*="padding:30px"] { padding: 0 !important; } } /* 6. Bloc Le bail : contenu remonte de 50px */ #content .lv-resa .lv-acc__corps form > .vact_card.lv-bail, #content .lv-resa .lv-acc__corps > div > .vact_card.lv-bail:first-child { margin-top: -50px !important; } /* 7. Mobile : la meme remontee est ramenee a -50px */ @media (max-width: 767px) { #content .lv-resa .lv-acc__corps form > .vact_card.lv-bail, #content .lv-resa .lv-acc__corps > div > .vact_card.lv-bail:first-child { margin-top: -50px !important; } } /* 8. Mobile : nom complet et adresse sur 2 colonnes (photo au-dessus) */ @media (max-width: 767px) { body section.lv-acc:has(.lv-locsitu) .vact_card > .flex { display: grid !important; grid-template-columns: 1fr 1fr; align-items: center; gap: 14px 16px; } body section.lv-acc:has(.lv-locsitu) .vact_card > .flex > div:first-child { grid-column: 1 / -1; } body section.lv-acc:has(.lv-locsitu) .vact_card > .flex > div:last-child { display: contents; } body section.lv-acc:has(.lv-locsitu) .vact_card > .flex p { margin: 0; } } /* 9. Carte « Signature du bail » retiree : le bloc vert pale invite deja a signer */ #content .lv-resa .lv-acc__corps > div > .vact_card.lv-bail:not(:first-child) { display: none !important; } /* lv-26503 — LV — Etape 9 Disponibilites : mise en page (Claude) */ /* Etape 9 (Disponibilites) : calendrier pleine largeur, periodes en ligne, 2 blocs cote a cote */ #kwp_calendar_container{display:block !important;} #kwp_main_section,#kwp_aside_section{width:auto !important;max-width:none !important;flex:none !important;position:static !important;} #kwp_aside_section > .vact_card.vacante_list_item{display:none !important;} #kwp-calendar-step-container > p{display:none !important;} #kwp_main_section > h2{margin-top:26px;} #periodsList{display:grid !important;grid-template-columns:repeat(3,1fr);gap:16px !important;align-items:start;} #periodsList > .period_item{width:auto !important;min-width:0;} #kwp-summary-section{display:grid !important;grid-template-columns:1fr 1fr;gap:20px;align-items:start;margin-top:26px;} #kwp-summary-section > #kwp-dispo-fields{display:none !important;} @media (max-width:781px){#periodsList{grid-template-columns:1fr;}#kwp-summary-section{grid-template-columns:1fr;}} /* --- Habillage plus contraste + periodes en ligne --- */ #vact_calendar{border:1px solid var(--lv-line,#E3E7E3) !important;box-shadow:0 1px 3px rgba(31,42,36,.07);} #kwp_main_section > h2{font-size:20px !important;letter-spacing:.05em;text-transform:uppercase;color:var(--lv-green-dark,#3E5747) !important;margin:30px 0 14px !important;} #periodsList{display:flex !important;flex-direction:column;gap:12px !important;} #periodsList > .period_item{display:grid !important;grid-template-columns:190px 1fr 150px;grid-template-rows:auto auto;column-gap:24px;row-gap:2px;align-items:center;text-align:left !important;padding:16px 56px 16px 20px !important;background:#fff !important;border:1px solid var(--lv-line,#E3E7E3) !important;border-left:5px solid var(--lv-green,#4F6E5A) !important;border-radius:14px !important;box-shadow:0 1px 3px rgba(31,42,36,.07);} #periodsList .period_item_title{grid-column:1;grid-row:1;text-align:left !important;font-size:15px !important;} #periodsList .period_item_duration{grid-column:1;grid-row:2;text-align:left !important;margin:0 !important;} #periodsList .loyer_wrap{grid-column:2;grid-row:1 / span 2;display:grid !important;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:4px;margin:0 !important;} #periodsList .loyer_label{grid-column:1;grid-row:1;text-align:left !important;width:auto !important;} #periodsList .loyer_field{grid-column:1;grid-row:2;margin:0 !important;width:100% !important;text-align:left !important;} #periodsList .provision_label{grid-column:2;grid-row:1;text-align:left !important;width:auto !important;} #periodsList .provision_field{grid-column:2;grid-row:2;margin:0 !important;width:100% !important;text-align:left !important;} #periodsList .total_calc_wrap{grid-column:3;grid-row:1 / span 2;align-items:flex-end !important;text-align:right;margin:0 !important;} #periodsList .delete_period{top:50% !important;right:14px !important;left:auto !important;transform:translateY(-50%);} #kwp-summary-section > .vact_card{border:1px solid var(--lv-line,#E3E7E3) !important;box-shadow:0 1px 3px rgba(31,42,36,.07);} #kwp-summary-section > .vact_card:last-child{background:var(--lv-green-soft,#EEF2EF) !important;border-left:5px solid var(--lv-green,#4F6E5A) !important;} @media (max-width:781px){#periodsList > .period_item{grid-template-columns:1fr;grid-template-rows:auto;row-gap:10px;padding:16px 48px 16px 16px !important;}#periodsList .loyer_wrap,#periodsList .total_calc_wrap{grid-column:1;grid-row:auto;}#periodsList .total_calc_wrap{align-items:flex-start !important;text-align:left;}} /* --- Equipements : un bloc repliable par rubrique --- */ .equipement-accordion{display:flex;flex-direction:column;gap:12px;} .equipement-accordion .accordion-item{border:1px solid var(--lv-line,#E3E7E3);border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 1px 3px rgba(31,42,36,.07);} .equipement-accordion .accordion-header{margin:0 !important;padding:14px 20px !important;background:var(--lv-green-soft,#EEF2EF);color:var(--lv-green-dark,#3E5747) !important;font-size:15px !important;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;border-bottom:1px solid transparent;} .equipement-accordion .accordion-header.active{border-bottom-color:var(--lv-line,#E3E7E3);} .equipement-accordion .accordion-content{padding:14px 16px;} /* --- Calendrier : 2 mois empiles sur mobile / tablette portrait --- */ @media (max-width:820px){ #vact_calendar .date-picker-wrapper{width:100% !important;max-width:100%;} #vact_calendar .month-wrapper{width:100% !important;flex-direction:column;align-items:center;gap:10px;} #vact_calendar table.month1,#vact_calendar table.month2{width:100% !important;max-width:340px;float:none !important;} #kwp-calendar-app,#kwp_calendar_container,#vact_calendar{max-width:100%;} } #vacante_form .equipement-accordion .accordion-item{border:1px solid var(--lv-line,#E3E7E3) !important;border-radius:14px !important;background:#fff !important;overflow:hidden !important;box-shadow:0 1px 3px rgba(31,42,36,.07) !important;} #vacante_form .equipement-accordion .accordion-header{margin:0 !important;padding:14px 20px !important;background:var(--lv-green-soft,#EEF2EF) !important;color:var(--lv-green-dark,#3E5747) !important;border-bottom:1px solid transparent !important;} #vacante_form .equipement-accordion .accordion-header.active{border-bottom-color:var(--lv-line,#E3E7E3) !important;} #kwp-summary-section > .vact_card{margin-top:0 !important;align-self:start;} #kwp-summary-section > .vact_card h3{font-size:20px !important;font-weight:500 !important;letter-spacing:1px;text-transform:uppercase;color:var(--lv-green-dark,#3E5747) !important;margin:0 0 16px !important;} #vact_calendar,#periodsList > .period_item,#kwp-summary-section > .vact_card,#vacante_form .equipement-accordion .accordion-item{box-shadow:none !important;} #periodsList .period_item_title{font-size:13.5px !important;} #periodsList .loyer_field,#periodsList .provision_field{width:100px !important;max-width:100px !important;padding:8px 10px !important;font-size:13px !important;} #periodsList .delete_period{box-shadow:none !important;transition:none !important;} #periodsList .delete_period:hover{background:rgb(153,153,153) !important;transform:none !important;opacity:1 !important;filter:none !important;box-shadow:none !important;} /* lv-27436 — LV — Header tablette */ /* ========================================================== LV — Header tablette + marges « Trouver un bien » Headers Elementor : #11451 (accueil) et #10162 (toutes les autres pages) ========================================================== */ /* ---------- Header — tablette portrait : 768 → 1024 px ---------- */ @media (min-width: 768px) and (max-width: 1024px) { /* Barre : une seule ligne, 64 px, marges latérales */ .elementor-location-header .elementor-element-4658668a > .e-con-inner, .elementor-location-header .elementor-element-e34f02c { flex-wrap: nowrap !important; align-items: center !important; gap: 10px !important; padding-left: 20px !important; padding-right: 16px !important; } .elementor-location-header .elementor-element-1f21cd65, .elementor-location-header .elementor-element-185ffa6 { height: auto !important; min-height: 64px !important; justify-content: center !important; } .elementor-location-header .elementor-element-e34f02c { height: 64px !important; } /* Logo */ .elementor-location-header .elementor-element-6433da2d, .elementor-location-header .elementor-element-5c9e496 { width: auto !important; flex: 0 0 auto !important; margin-right: auto !important; } /* Même retrait de logo que sur l'accueil */ .elementor-location-header .elementor-element-5c9e496 { margin-left: 10px !important; } .elementor-location-header .elementor-element-6433da2d img, .elementor-location-header .elementor-element-5c9e496 img { width: clamp(120px, 15vw, 144px) !important; height: auto !important; } /* Menu : tout sur une ligne */ .elementor-location-header .elementor-element-70e6dd90, .elementor-location-header .elementor-element-f90352f { width: auto !important; max-width: none !important; flex: 0 1 auto !important; min-width: 0; align-self: center !important; } .elementor-location-header .elementor-element-70e6dd90 nav.elementor-nav-menu--main > ul, .elementor-location-header .elementor-element-f90352f nav.elementor-nav-menu--main > ul { flex-wrap: nowrap !important; align-items: center !important; gap: 6px; } .elementor-location-header .elementor-element-70e6dd90 nav.elementor-nav-menu--main > ul > li > a.elementor-item, .elementor-location-header .elementor-element-f90352f nav.elementor-nav-menu--main > ul > li > a.elementor-item { white-space: nowrap !important; } .elementor-location-header .elementor-element-70e6dd90 nav.elementor-nav-menu--main > ul > li:not(.menu-item-has-children) > a.elementor-item, .elementor-location-header .elementor-element-f90352f nav.elementor-nav-menu--main > ul > li:not(.menu-item-has-children) > a.elementor-item { padding-left: 8px !important; padding-right: 8px !important; } /* Pastilles « Trouver un bien » / « Créer mon annonce » plus compactes */ .elementor-location-header .elementor-element-70e6dd90 a.elementor-item[href*="form-vacante"], .elementor-location-header .elementor-element-f90352f a.elementor-item[href*="form-vacante"], .elementor-location-header .elementor-element-70e6dd90 a.elementor-item[href$="/residence-secondaire/"], .elementor-location-header .elementor-element-f90352f a.elementor-item[href$="/residence-secondaire/"] { padding-left: 14px !important; padding-right: 14px !important; } /* Compte (« Connexion » / nom) : pastille ronde, icône seule — le libellé reste dans le DOM pour les lecteurs d'écran */ .elementor-location-header .elementor-element-70e6dd90 nav.elementor-nav-menu--main > ul > li.menu-item-has-children > a, .elementor-location-header .elementor-element-f90352f nav.elementor-nav-menu--main > ul > li.menu-item-has-children > a { font-size: 0 !important; width: 38px !important; height: 38px !important; padding: 0 !important; justify-content: center !important; align-items: center !important; border-radius: 50% !important; margin-left: 4px; } .elementor-location-header .elementor-element-70e6dd90 nav.elementor-nav-menu--main > ul > li.menu-item-has-children > a > i, .elementor-location-header .elementor-element-f90352f nav.elementor-nav-menu--main > ul > li.menu-item-has-children > a > i { font-size: 18px !important; margin: 0 !important; } .elementor-location-header .elementor-element-70e6dd90 nav.elementor-nav-menu--main > ul > li.menu-item-has-children > a .lv-dot, .elementor-location-header .elementor-element-f90352f nav.elementor-nav-menu--main > ul > li.menu-item-has-children > a .lv-dot { font-size: 11px !important; top: -6px !important; right: -8px !important; } .elementor-location-header .elementor-element-70e6dd90 nav.elementor-nav-menu--main > ul > li.menu-item-has-children > a .sub-arrow, .elementor-location-header .elementor-element-f90352f nav.elementor-nav-menu--main > ul > li.menu-item-has-children > a .sub-arrow { display: none !important; } /* Sous-menu du compte : aligné à droite, ne sort pas de l'écran */ .elementor-location-header .elementor-element-70e6dd90 nav.elementor-nav-menu--main > ul > li.menu-item-has-children > ul.sub-menu, .elementor-location-header .elementor-element-f90352f nav.elementor-nav-menu--main > ul > li.menu-item-has-children > ul.sub-menu { left: auto !important; right: 0 !important; margin-left: 0 !important; } /* Langues FR / EN : côte à côte, jamais empilées */ .elementor-location-header .elementor-element-b09d183, .elementor-location-header .elementor-element-5905d29 { width: auto !important; flex: 0 0 auto !important; margin-left: 6px !important; } .elementor-location-header .elementor-element-b09d183 .cpel-switcher__list, .elementor-location-header .elementor-element-5905d29 .cpel-switcher__list { flex-wrap: nowrap !important; width: auto !important; } .elementor-location-header .elementor-element-b09d183 .cpel-switcher__lang > a, .elementor-location-header .elementor-element-5905d29 .cpel-switcher__lang > a { width: 38px !important; height: 30px !important; } } /* Tablette « étroite » (768 → 860 px) : on resserre encore */ @media (min-width: 768px) and (max-width: 860px) { .elementor-location-header .elementor-element-4658668a > .e-con-inner, .elementor-location-header .elementor-element-e34f02c { gap: 6px !important; padding-left: 16px !important; padding-right: 12px !important; } .elementor-location-header .elementor-element-70e6dd90 nav.elementor-nav-menu--main > ul, .elementor-location-header .elementor-element-f90352f nav.elementor-nav-menu--main > ul { gap: 4px; } .elementor-location-header .elementor-element-70e6dd90 nav.elementor-nav-menu--main > ul > li:not(.menu-item-has-children) > a.elementor-item, .elementor-location-header .elementor-element-f90352f nav.elementor-nav-menu--main > ul > li:not(.menu-item-has-children) > a.elementor-item { padding-left: 6px !important; padding-right: 6px !important; } .elementor-location-header .elementor-element-70e6dd90 a.elementor-item[href*="form-vacante"], .elementor-location-header .elementor-element-f90352f a.elementor-item[href*="form-vacante"], .elementor-location-header .elementor-element-70e6dd90 a.elementor-item[href$="/residence-secondaire/"], .elementor-location-header .elementor-element-f90352f a.elementor-item[href$="/residence-secondaire/"] { padding-left: 12px !important; padding-right: 12px !important; } } /* ---------- Header — tablette paysage / petits desktops : 1025 → 1260 px ---------- Les headers collent aux bords de l'écran */ @media (min-width: 1025px) and (max-width: 1260px) { .elementor-element-53b1202 > .e-con-inner, .elementor-location-header .elementor-element-4658668a > .e-con-inner, .elementor-location-header .elementor-element-b49126e > .e-con-inner, .elementor-location-header .elementor-element-e34f02c { padding-left: 24px !important; padding-right: 24px !important; } .elementor-element-24ccdb2 nav.elementor-nav-menu--main > ul, .elementor-location-header .elementor-element-f90352f nav.elementor-nav-menu--main > ul { flex-wrap: nowrap !important; } /* Numéro de téléphone masqué (comme sur tablette) : pas la place ; l'onglet téléphone flottant reste disponible */ .elementor-location-header .elementor-element-ff909d5, .elementor-location-header .elementor-element-304d4dc { display: none !important; } /* Menu : largeur naturelle, sur une ligne */ .elementor-element-24ccdb2, .elementor-location-header .elementor-element-70e6dd90, .elementor-location-header .elementor-element-6c82701, .elementor-location-header .elementor-element-f90352f { width: auto !important; max-width: none !important; flex: 0 1 auto !important; margin-left: auto !important; } .elementor-location-header .elementor-element-70e6dd90 nav.elementor-nav-menu--main > ul, .elementor-location-header .elementor-element-6c82701 nav.elementor-nav-menu--main > ul { flex-wrap: nowrap !important; } /* Langues FR / EN : jamais empilées */ .elementor-location-header .elementor-widget-polylang-language-switcher { flex: 0 0 auto !important; width: auto !important; } .elementor-location-header .elementor-widget-polylang-language-switcher .cpel-switcher__list { flex-wrap: nowrap !important; width: auto !important; } .elementor-element-24ccdb2 nav.elementor-nav-menu--main > ul > li > a.elementor-item, .elementor-location-header .elementor-element-f90352f nav.elementor-nav-menu--main > ul > li > a.elementor-item { white-space: nowrap !important; } } /* ---------- Header des pages intérieures (desktop) : contenu centré verticalement dans la barre ---------- */ @media (min-width: 1025px) { .elementor-location-header .elementor-element-185ffa6, .elementor-location-header .elementor-element-185ffa6 > .e-con-inner { justify-content: center !important; } .elementor-location-header .elementor-element-f90352f { align-self: center !important; } } /* ---------- Sous-menu du compte : fond plein (lisible sur les photos) ---------- */ @media (min-width: 768px) { .elementor-location-header .elementor-nav-menu--main ul.sub-menu, .elementor-element-24ccdb2 .elementor-nav-menu--main ul.sub-menu { background-color: #384e40 !important; border-radius: 14px !important; padding: 6px 4px !important; box-shadow: 0 12px 28px rgba(0, 0, 0, .25) !important; } } /* ---------- Page « Trouver un bien » : marges du contenu ---------- */ /* Tablette */ @media (min-width: 768px) and (max-width: 1024px) { body.post-type-archive-vacante #main > .elementor, body.post-type-archive-vacante #main > .region-filter-box, body.post-type-archive-vacante #main > .lv-split-wrap { margin-left: 32px !important; margin-right: 32px !important; width: auto !important; max-width: none !important; } body.post-type-archive-vacante #main > .region-filter-box { border-radius: 12px !important; } body.post-type-archive-vacante .vacantes_list_container { padding-left: 0 !important; padding-right: 0 !important; } } /* Mobile */ @media (max-width: 767px) { body.post-type-archive-vacante #main > .elementor, body.post-type-archive-vacante #main > .region-filter-box, body.post-type-archive-vacante #main > .lv-split-wrap { margin-left: 20px !important; margin-right: 20px !important; width: auto !important; max-width: none !important; } body.post-type-archive-vacante #main > .region-filter-box { border-radius: 12px !important; } body.post-type-archive-vacante .vacantes_list_container { padding-left: 0 !important; padding-right: 0 !important; } } /* lv-27777 — LV — Blocs à fond coloré sans contour (Claude) */ /* ============================================================ LV — Blocs à fond coloré : sans contour (Claude, 13/09/2026) ------------------------------------------------------------ Retire le trait de contour de tous les blocs, encarts, bulles et pastilles qui portent déjà un fond de couleur. Même principe que le bloc « Créer une alerte » de la liste des biens. Non concernés (volontairement) : - boutons et liens-boutons, - champs de saisie (input, select, textarea), - bulles cochées / états de sélection (le contour porte l'info), - marqueurs et clusters de la carte (contour blanc de lisibilité), - calendriers (flatpickr, FullCalendar, daterangepicker), - barres d'accent latérales des encarts d'information. Méthode : border-color: transparent (et non border: 0) — la géométrie est conservée, aucun décalage de mise en page. ============================================================ */ /* --- Messagerie : conversations et bulles de message -------- */ #content .conversation-item, #content .conversation-item:hover, #content .conversation-item.lv-conv--nonlu, #content #messages-list .message, #content #messages-list .message.received, #content #messages-list .message.sent, /* --- Réservations : pastilles, encarts, cartes -------------- */ .lv-resume__badge, .lv-resume__badge--ok, .lv-resume__badge--wait, .lv-resume__badge--ko, #content .lv-resa [class*="lv-resa-pastille"], #content .lv-resa .lv-decision, #content .lv-resa .lv-decision__alerte, #content .lv-resa .vact_card[style*="28a745"], .lv-sgn__date, /* --- Annonces : pastilles de statut ------------------------- */ #content [class*="kwp-vacante-status-label"], #content .vacante_list_item .infos .lv-statut, /* --- Profil / espace compte : encarts et documents ---------- */ .kwp-profil__doc, .kwp-profil__doc.done, .kwp-profil__panel, .kwp_situation_doc, .vact_account_container .lv-op-doc, .vact_account_container .lv-op-doc.is-done, .vact_account_container .lv-op-panel, .lv-doc-list li, .lv-docs-notice, /* --- Modale de demande & tunnel d'annonce ------------------- */ .lv-cal-hint, .lv-cal-aide, .lv-alerte, .lv-alerte.lv-info, .lv-ds__missing, .lv-ds__note, .lv-recap, .vact_form .bail-summary-box, .vact_form .bail-category-mandatory, .summary-alert, .region-filter-box, /* --- Messages système et notifications ---------------------- */ .kwp-error, .kwp-success, #kwp-autosave-indicator.autosave-saving, #kwp-autosave-indicator.autosave-saved, #kwp-toast.toast-ok, #kwp-page-toast.toast, /* --- Pilules et cartes des pages Elementor ------------------ */ .lv-hero-badge, .lv-kicker, .lv-compare-card, .lv-compare-card.lv-compare-muted, .lv2-chip-fixed, .lv3-chip-fixed, .lv-alert-cta { border-color: transparent !important; } /* lv-27800 — LV — Fiche : barre d'action et nettoyages (Claude) */ /* ===================================================================== LV — Fiche : barre d'action et nettoyages (Claude) Emplacement : En-tête de tout le site — Extrait CSS Compagnon obligatoire : l'extrait HTML « LV — Fiche : barre d'action + blocs vides + chat différé (Claude) » qui pose les classes. ===================================================================== */ /* --- 1. Colonne de droite : PAS de collant au scroll (14/09/2026) --- La colonne de droite défile normalement avec la page. Seule la barre d'action du bas reste fixe (section 2). --------------- */ /* --- 2. Barre d'action fixe (mobile et desktop) --------------------- */ #lv-actionbar{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; display: flex; align-items: center; gap: 14px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #FFFFFF; box-shadow: 0 -6px 24px rgba(22,35,27,.13); transform: translateY(110%); transition: transform .22s ease; } #lv-actionbar[data-on="1"]{ transform: translateY(0); } #lv-actionbar .lv-ab-prix{ display: flex; flex-direction: column; line-height: 1.15; font-size: 15px; font-weight: 700; color: #16231B; white-space: nowrap; } #lv-actionbar .lv-ab-prix small{ font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #7A8A80; } #lv-actionbar .lv-ab-boutons{ margin-left: auto; display: flex; align-items: center; gap: 10px; } #lv-actionbar .lv-ab-principal{ appearance: none; border: none; cursor: pointer; background: #384E40; color: #FFFFFF; font: inherit; font-weight: 700; font-size: 15px; padding: 12px 22px; border-radius: 6px; } #lv-actionbar .lv-ab-principal:hover{ background: #2C3E33; } #lv-actionbar .lv-ab-secondaire{ appearance: none; border: none; cursor: pointer; background: #ECECEA; color: #384E40; font: inherit; font-weight: 600; font-size: 14px; padding: 12px 18px; border-radius: 6px; } #lv-actionbar .lv-ab-secondaire:hover{ background: #E0E0DD; } /* 15/09/2026 : sans disponibilité, le bouton de demande est masqué (attribut hidden) */ #lv-actionbar button[hidden]{ display: none !important; } #lv-actionbar :focus-visible{ outline: 2px solid #384E40; outline-offset: 2px; } @media (max-width: 600px){ #lv-actionbar{ gap: 10px; padding-inline: 12px; } #lv-actionbar .lv-ab-prix{ font-size: 14px; } #lv-actionbar .lv-ab-principal{ padding: 12px 16px; font-size: 14px; } #lv-actionbar .lv-ab-secondaire{ display: none; } #lv-actionbar .lv-ab-boutons:has(.lv-ab-principal[hidden]) .lv-ab-secondaire{ display: block; } } /* 20/09/2026 : « Retour aux résultats » dans la barre, tout à gauche ; le prix se rapproche des boutons ; le bloc dans la page est masqué. */ #lv-actionbar .lv-ab-retour{ display: inline-flex; align-items: center; gap: 8px; color: #5E7A66; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; padding: 10px 16px; border: 1px solid #D7DFD5; border-radius: 999px; } #lv-actionbar .lv-ab-retour:hover{ color: #384E40; border-color: #B9C6B8; } #lv-actionbar .lv-ab-retour-fleche{ font-size: 20px; line-height: 1; margin-top: -2px; } #lv-actionbar:has(.lv-ab-retour) .lv-ab-prix{ margin-left: auto; } #lv-actionbar:has(.lv-ab-retour) .lv-ab-boutons{ margin-left: 10px; } html.lv-retour-dans-barre .single-vacante .elementor-element-7aaa08d{ display: none !important; } @media (max-width: 600px){ #lv-actionbar .lv-ab-retour{ padding: 8px 12px; } #lv-actionbar .lv-ab-retour-texte{ display: none; } } @media (prefers-reduced-motion: reduce){ #lv-actionbar{ transition: none; } } /* --- 3. « Retour aux résultats » redevient un lien discret ---------- */ .single-vacante a.lv-retour-liste.elementor-button{ background: transparent !important; color: #5E7A66 !important; border: 1px solid #D7DFD5 !important; font-weight: 600 !important; box-shadow: none !important; } .single-vacante a.lv-retour-liste.elementor-button:hover{ color: #384E40 !important; border-color: #B9C6B8 !important; } /* --- 4. Compteur de vues : réservé au back-office ------------------- */ .single-vacante .lv-summary-extra .post-views{ display: none !important; } /* --- 5. Blocs sans contenu : masqués par le script compagnon -------- */ .single-vacante .lv-bloc-vide{ display: none !important; } /* --- 6. Chat : la bulle d'accroche attend, et laisse passer le CTA -- */ body:not(.lv-chat-libre) .chatway--quick--reply--container{ opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; } body.lv-actionbar-visible .chatway--trigger-container{ transform: translateY(-74px); transition: transform .22s ease; } @media (max-width: 600px){ body.lv-actionbar-visible .chatway--trigger-container{ transform: translateY(-78px); } } /* --- 3. Espace avant le bloc « Ce que coute votre sejour » (14/09/2026) --- Le widget des periodes disponibles laisse ~14px de vide sous la duree, auxquels s'ajoutent la gouttiere Elementor (20px) et la marge du bloc. On resserre d'environ 14px. -------------------------------------------- */ body #lvcs-bloc{ margin-top: -8px; margin-bottom: 20px; } /* 15/09/2026 : sur tablette, 2 biens maximum dans « Autres annonces qui pourraient vous plaire » */ @media (min-width: 768px) and (max-width: 1024px){ .elementor-element-cc5a4a8 .elementor-loop-container > div.e-loop-item:nth-of-type(n+3){ display: none; } } /* --- 9. Ajustements 15/09/2026 (Claude) ------------------------------ a) Contenu de la fiche remonté de 20px (padding haut 100 → 70px) b) Boutons de la barre d'action = mêmes styles que la colonne de droite */ .elementor-4556 .elementor-element-46a45df > .e-con-inner{ padding-top: 70px !important; } #lv-actionbar .lv-ab-principal, #lv-actionbar .lv-ab-secondaire{ font-family: "Nunito Sans", sans-serif !important; font-weight: 700 !important; border-radius: 10px !important; line-height: 1.5 !important; transition: background-color .2s ease, border-color .2s ease; } #lv-actionbar .lv-ab-principal{ background: #4C6A56 !important; color: #FFFFFF !important; border: 0 !important; font-size: 15px !important; padding: 11px 16px !important; } #lv-actionbar .lv-ab-principal:hover{ background: #384E40 !important; } #lv-actionbar .lv-ab-secondaire{ background: #FFFFFF !important; color: #4C6A56 !important; border: 1.5px solid #C9DCCF !important; font-size: 14px !important; padding: 10px 16px !important; } #lv-actionbar .lv-ab-secondaire:hover{ border-color: #4C6A56 !important; } /* lv-27804 — LV — Étape 9 : blocs période en colonnes (Claude) */ /* LesVacantes — Étape 9 « Disponibilités » — blocs « Périodes renseignées » Période en titre du bloc, durée juste en dessous, montants en colonnes, le forfait strictement au même style que loyer et charges. Le préfixe « body » sert à passer devant les règles posées dans le gabarit. */ /* ---- Structure du bloc : titre / durée / ligne montants + total ---- */ body #periodsList > .period_item{ grid-template-columns:1fr 150px !important; grid-template-rows:auto auto auto !important; column-gap:24px !important; row-gap:4px !important; align-items:start !important; } body #periodsList .period_item_title{ grid-column:1 / -1 !important; grid-row:1 !important; font-size:16px !important; line-height:1.3 !important; font-weight:700 !important; } body #periodsList .period_item_title br{display:none !important;} body #periodsList .period_item_duration{ grid-column:1 / -1 !important; grid-row:2 !important; margin:0 0 10px !important; font-size:13px !important; opacity:.75; } /* ---- Montants en colonnes de largeur égale ---- */ body #periodsList .loyer_wrap{ grid-column:1 !important; grid-row:3 !important; grid-template-columns:1fr 1fr !important; column-gap:16px !important; row-gap:4px !important; } body #periodsList .loyer_wrap.has-forfait{ grid-template-columns:1fr 1fr 1fr !important; } body #periodsList .loyer_label, body #periodsList .provision_label, body #periodsList .forfait_label{ grid-row:1 !important; align-self:end !important; text-align:left !important; width:auto !important; margin:0 !important; } body #periodsList .loyer_field, body #periodsList .provision_field, body #periodsList .forfait_field{ grid-row:2 !important; margin:0 !important; width:100% !important; text-align:left !important; } body #periodsList .loyer_label, body #periodsList .loyer_field {grid-column:1 !important;} body #periodsList .provision_label,body #periodsList .provision_field{grid-column:2 !important;} body #periodsList .forfait_label, body #periodsList .forfait_field {grid-column:3 !important;} /* Le forfait reprend exactement la typo et la boîte des deux autres champs */ body #periodsList .forfait_label{ font-size:12px !important; font-weight:700 !important; line-height:18px !important; color:#333 !important; letter-spacing:normal !important; } body #periodsList .forfait_field{ font-size:13px !important; line-height:13px !important; padding:8px 10px !important; height:33px !important; border-radius:10px !important; } /* ---- Total, aligné sur la ligne des champs ---- */ body #periodsList .total_calc_wrap{ grid-column:2 !important; grid-row:3 !important; align-self:end !important; align-items:flex-end !important; text-align:right !important; margin:0 !important; } /* ---- Tablette : le total passe sous les champs ---- */ @media (max-width:781px){ body #periodsList > .period_item{ grid-template-columns:1fr !important; row-gap:4px !important; } body #periodsList .loyer_wrap{ grid-column:1 !important; grid-row:3 !important; column-gap:10px !important; } body #periodsList .total_calc_wrap{ grid-column:1 !important; grid-row:4 !important; align-items:flex-start !important; text-align:left !important; margin-top:10px !important; } } /* ---- Mobile : une colonne, les 3 champs empilés ---- */ @media (max-width:520px){ body #periodsList .loyer_wrap, body #periodsList .loyer_wrap.has-forfait{ grid-template-columns:1fr !important; row-gap:2px !important; } body #periodsList .loyer_label, body #periodsList .loyer_field, body #periodsList .provision_label,body #periodsList .provision_field, body #periodsList .forfait_label, body #periodsList .forfait_field{ grid-column:1 !important; grid-row:auto !important; } body #periodsList .loyer_label, body #periodsList .provision_label, body #periodsList .forfait_label{margin-top:8px !important;} } /* ---- Supprimer + corbeille, en haut a droite du bloc ---- */ body #periodsList > .period_item{ position: relative !important; } body #periodsList .period_item_title{ padding-right: 110px !important; } body #periodsList .delete_period{ position: absolute !important; top: 10px !important; right: 12px !important; left: auto !important; transform: none !important; margin: 0 !important; padding: 2px 0 !important; width: auto !important; height: auto !important; min-width: 0 !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; gap: 6px !important; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; color: #555 !important; line-height: 1 !important; white-space: nowrap !important; z-index: 2 !important; } body #periodsList .delete_period::before{ content: 'Supprimer' !important; font-family: Nunito, sans-serif !important; font-size: 13px !important; font-weight: 400 !important; color: #555 !important; line-height: 1 !important; } body #periodsList .delete_period i{ color: #555 !important; font-size: 15px !important; } body #periodsList .delete_period:hover{ background: none !important; box-shadow: none !important; transform: none !important; color: #333 !important; } body #periodsList .delete_period:hover::before, body #periodsList .delete_period:hover i{ color: #333 !important; } /* ---- Mes revenus : le trait vert du net se pose pile sur le separateur gris ---- */ body #kwp-summary-section .summary-stat{ margin-top: -1px !important; } body #kwp-summary-section .summary-stat:first-child{ margin-top: 0 !important; } /* lv-28736 — LV — Page Propriétaire : mise en page (Claude) */ /* ========================================================= LV — Page Proprietaire (21705) : mise en page Claude — 20/09/2026 ========================================================= */ /* --- 1. Hero : moins de vide, la promesse remonte -------- */ @media (min-width:1025px){ body.page-id-21705 .elementor-element-3573cb7a .elementor-spacer-inner{height:60px !important} body.page-id-21705 .elementor-element-2e6a4300 .elementor-spacer-inner{height:72px !important} } /* une seule action principale dans le hero */ body.page-id-21705 .elementor-element-1df0bc3e .elementor-button{ background-color:transparent !important;color:#fff !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.8) !important; } body.page-id-21705 .elementor-element-1df0bc3e .elementor-button:hover{ background-color:rgba(255,255,255,.16) !important;color:#fff !important; } /* --- 2. Bloc creme « Valorisez votre bien » -------------- */ @media (min-width:1025px){ body.page-id-21705 .elementor-element-79458c8b .e-con-inner{align-items:center} body.page-id-21705 .elementor-element-3bc37fcc{flex:1 1 0%} } body.page-id-21705 .elementor-element-33ff3208{width:100% !important;max-width:none !important} body.page-id-21705 .elementor-element-33ff3208 .elementor-icon-list-items{width:100%} body.page-id-21705 .elementor-element-33ff3208 .elementor-icon-list-item{align-items:flex-start !important} body.page-id-21705 .elementor-element-33ff3208 .elementor-icon-list-icon{padding-top:.3em} body.page-id-21705 .elementor-element-33ff3208 .elementor-icon-list-item + .elementor-icon-list-item{margin-top:11px} /* --- 3. Cartes « Pourquoi louer avec LesVacantes » ------- */ body.page-id-21705 .elementor-element-3ced6f8e, body.page-id-21705 .elementor-element-1fdabedb{display:none !important} body.page-id-21705 .elementor-element-7e7d957, body.page-id-21705 .elementor-element-586231a5{padding:26px 26px 28px !important;row-gap:26px !important} body.page-id-21705 .lvp-list{list-style:none;margin:0;padding:0} body.page-id-21705 .lvp-list li{position:relative;padding-left:18px;margin:0 0 8px} body.page-id-21705 .lvp-list li:last-child{margin-bottom:0} body.page-id-21705 .lvp-list li::before{ content:"";position:absolute;left:0;top:.62em; width:6px;height:6px;border-radius:50%;background:#D9C08A; } /* --- 4. Simulateur fiscal : remis a la charte ------------ */ body.page-id-21705 .lvf-wrap, body.page-id-21705 .lvf-wrap input, body.page-id-21705 .lvf-wrap select, body.page-id-21705 .lvf-wrap button{font-family:"nunito sans",Nunito,sans-serif !important} body.page-id-21705 .lvf-wrap{color:#243028 !important} body.page-id-21705 .lvf-wrap h2, body.page-id-21705 .lvf-wrap h3{color:#46624F !important;font-weight:500 !important;letter-spacing:0 !important} body.page-id-21705 .lvf-card{border-radius:20px !important} body.page-id-21705 .lvf-input-wrap input, body.page-id-21705 .lvf-wrap select{border-radius:12px !important;color:#181818 !important} body.page-id-21705 .lvf-badge{background:#46624F !important;color:#FFF0CD !important;font-weight:600 !important} body.page-id-21705 .lvf-main-value{color:#37473C !important} body.page-id-21705 .lvf-best-title{color:#46624F !important} body.page-id-21705 .lvf-note, body.page-id-21705 .lvf-footer-note{color:#6B7A6F !important} /* --- 5. FAQ : deux colonnes independantes ---------------- */ body.page-id-21705 .lvq-grid.lvq-split{display:block} body.page-id-21705 .lvq-grid.lvq-split > .lvq-colwrap{display:flex;flex-direction:column;gap:22px} body.page-id-21705 .lvq-grid.lvq-split > .lvq-colwrap + .lvq-colwrap{margin-top:22px} @media (min-width:900px){ body.page-id-21705 .lvq-grid.lvq-split{display:flex;align-items:flex-start;gap:24px} body.page-id-21705 .lvq-grid.lvq-split > .lvq-colwrap{flex:1 1 0%;min-width:0} body.page-id-21705 .lvq-grid.lvq-split > .lvq-colwrap + .lvq-colwrap{margin-top:0} } /* --- 6. CTA final : une seule action principale ---------- */ body.page-id-21705 .elementor-element-29c23b54 .elementor-button{ background-color:#4F6D59 !important;color:#fff !important;border-color:#4F6D59 !important; } body.page-id-21705 .elementor-element-29c23b54 .elementor-button:hover{ background-color:#3E5747 !important;color:#fff !important; } /* --- 7. Barre de confiance (pied de page, tout le site) -- */ .elementor-element-aca42fd > .elementor-element{ background-color:#FFEFC8 !important;padding:14px 10px !important;gap:16px !important; } .elementor-element-aca42fd .elementor-icon svg{width:46px !important;height:46px !important} .elementor-element-aca42fd > .elementor-element-4bd5c8b .elementor-icon svg{width:40px !important;height:40px !important} /* ======================================================= 5. IMPACT — Claude 20/09/2026 Hero plein ecran, colonne LesVacantes gagnante, etapes ======================================================= */ /* 5.1 Hero : la promesse occupe l'ecran ------------------ */ body.page-id-21705 .elementor-element-3520c695{ position:relative; min-height:clamp(430px,64vh,640px); justify-content:center; background-position:center 40%; } body.page-id-21705 .elementor-element-3520c695::before{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(20,34,25,.58),rgba(20,34,25,.20) 46%,rgba(20,34,25,.64)); } body.page-id-21705 .elementor-element-3520c695 > .e-con-inner{position:relative;z-index:2} body.page-id-21705 .elementor-element-3573cb7a .elementor-spacer-inner{height:0 !important} @media (min-width:1025px){ body.page-id-21705 .elementor-element-3573cb7a .elementor-spacer-inner{height:0 !important} body.page-id-21705 .elementor-element-2e6a4300 .elementor-spacer-inner{height:12px !important} } body.page-id-21705 .elementor-element-2d7ec6e9 .elementor-heading-title{ font-size:clamp(30px,4.4vw,56px) !important; line-height:1.08 !important; text-shadow:0 2px 20px rgba(0,0,0,.40); } body.page-id-21705 .elementor-element-5ab72910 .elementor-heading-title{ font-size:clamp(13px,1.15vw,16px) !important; line-height:1.35 !important; text-shadow:0 1px 14px rgba(0,0,0,.40); } body.page-id-21705 .elementor-element-1ec381de .elementor-button{ font-size:16px !important; padding:15px 32px !important; box-shadow:0 12px 28px rgba(10,20,14,.35); } /* 5.2 Comparatif : la colonne LesVacantes gagne ---------- */ body.page-id-21705 .elementor-element-f3389d4 .wpr-data-table th:nth-child(3){ background:#FFF0CD !important;color:#243028 !important;font-weight:800 !important; border-radius:16px 16px 0 0; } body.page-id-21705 .elementor-element-f3389d4 .wpr-data-table td:nth-child(3){ background:#FFF0CD !important; } body.page-id-21705 .elementor-element-f3389d4 .wpr-data-table td:nth-child(3), body.page-id-21705 .elementor-element-f3389d4 .wpr-data-table td:nth-child(3) *{ color:#243028 !important; } body.page-id-21705 .elementor-element-f3389d4 .wpr-data-table th:nth-child(3) .wpr-table-text{color:#243028 !important} body.page-id-21705 .elementor-element-f3389d4 .wpr-data-table td:nth-child(3) .wpr-table-text{color:#4a544c !important} body.page-id-21705 .elementor-element-f3389d4 .wpr-data-table td:nth-child(3) .wpr-table-text b{color:#243028 !important} body.page-id-21705 .elementor-element-f3389d4 .wpr-data-table tr:last-child td:nth-child(3){ border-radius:0 0 16px 16px; } body.page-id-21705 .elementor-element-f3389d4 .wpr-data-table td:nth-child(2), body.page-id-21705 .elementor-element-f3389d4 .wpr-data-table td:nth-child(2) *{ color:rgba(255,255,255,.74) !important; } /* 5.3 Cartes « Pourquoi louer » : plus de relief --------- */ body.page-id-21705 .elementor-element-7e7d957, body.page-id-21705 .elementor-element-586231a5{ box-shadow:0 18px 40px rgba(23,38,29,.14); } body.page-id-21705 .elementor-element-192c7f9 .elementor-icon-box-title{ font-size:clamp(18px,1.5vw,21px) !important;line-height:1.25 !important; } /* 5.4 Etapes : le numero se voit ------------------------- */ body.page-id-21705 .lv-etape-n{ background:#4F6D59 !important;color:#fff !important; border-color:transparent !important; box-shadow:0 8px 18px rgba(79,109,89,.30); } /* 5.5 Hero : puces de preuve lisibles + resultat plus fort */ body.page-id-21705 .lv-chips > *{ background:rgba(255,255,255,.20) !important; border:1px solid rgba(255,255,255,.38) !important; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); } body.page-id-21705 .lv-esti-q{font-size:clamp(19px,2vw,24px) !important} body.page-id-21705 .lv-esti-res strong{font-size:clamp(30px,3.2vw,42px) !important;line-height:1.05 !important} /* LV sous-titre hero : espace apres */ body.page-id-21705 .elementor-element-5ab72910{margin-bottom:-10px !important} /* 5.7 Tableau Bail civil / mobilite : pas de trait sous le tableau */ body.page-id-21705 .elementor-element-194820e .wpr-table-inner-container{border-bottom:0 !important} /* 5.8 Section boutons sous la FAQ : meme fond que la FAQ, pas de blanc */ body.page-id-21705 .elementor-element-786db289{background-color:#FBFBF9 !important} /* plus de bande blanche sous les boutons avant le pied de page : la marge devient du padding, le gris de la section continue (21/09/2026) */ body.page-id-21705 .elementor-element-786db289{margin-bottom:0 !important;padding-bottom:40px !important} /* lv-28769 — LV — Accueil V2 : boutons uniformes (Claude) */ /* LV - Accueil V2 : boutons uniformes (Claude 20/09/2026) */ /* Un seul gabarit de bouton sur toute la page : hauteur 48 px, pilule, Nunito 16 gras, meme padding, largeurs egales quand deux boutons sont cote a cote. */ /* 1. Gabarit commun */ html body.elementor-page-28677 .elementor-button, html body.elementor-page-28677 .lvrh-btn{ display:inline-flex!important;align-items:center!important;justify-content:center!important; box-sizing:border-box!important; min-height:48px!important;height:auto!important; min-width:200px!important;max-width:100%!important; padding:0 28px!important; font-family:"Nunito",sans-serif!important;font-size:16px!important;font-weight:700!important; line-height:1.2!important;letter-spacing:normal!important;text-align:center!important; white-space:nowrap!important;border-radius:999px!important;border-width:1px!important; } html body.elementor-page-28677 .elementor-button .elementor-button-content-wrapper{ display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important; } /* 2. Bouton de la barre de recherche : meme langage, a l'echelle de la barre (4 + 40 + 4 = 48) */ html body.elementor-page-28677 .lvrh-btn{min-height:40px!important;min-width:auto!important;padding:0 22px!important} /* 3. Hero : le CTA suit la hauteur de la barre de recherche */ html body.page-id-28677 .elementor-element-ee9e99b .elementor-button.elementor-button, html body.page-id-28677 .elementor-element-7a33ab0 .elementor-button.elementor-button{min-height:48px!important;min-width:auto!important} /* 4. Deux boutons cote a cote : largeurs egales et ecart identique de 16 px */ html body.elementor-page-28677 .elementor-element:has(> .elementor-widget-button):not(:has(> :not(.elementor-widget-button))), html body.elementor-page-28677 .e-con-inner:has(> .elementor-widget-button):not(:has(> :not(.elementor-widget-button))){ display:grid!important;grid-auto-flow:column!important;grid-auto-columns:1fr!important; justify-content:start!important;align-items:stretch!important;gap:16px!important; width:fit-content!important;max-width:100%!important; } html body.elementor-page-28677 .elementor-element:has(> .elementor-widget-button):not(:has(> :not(.elementor-widget-button))) > .elementor-widget-button, html body.elementor-page-28677 .e-con-inner:has(> .elementor-widget-button):not(:has(> :not(.elementor-widget-button))) > .elementor-widget-button{width:auto!important} html body.elementor-page-28677 .elementor-element:has(> .elementor-widget-button):not(:has(> :not(.elementor-widget-button))) > .elementor-widget-button .elementor-button, html body.elementor-page-28677 .e-con-inner:has(> .elementor-widget-button):not(:has(> :not(.elementor-widget-button))) > .elementor-widget-button .elementor-button{width:100%!important} /* 5. Mobile : boutons pleine largeur, empiles */ @media (max-width:767px){ html body.elementor-page-28677 .elementor-button{white-space:normal!important;width:100%!important;min-width:auto!important} html body.elementor-page-28677 .elementor-element:has(> .elementor-widget-button):not(:has(> :not(.elementor-widget-button))), html body.elementor-page-28677 .e-con-inner:has(> .elementor-widget-button):not(:has(> :not(.elementor-widget-button))){grid-auto-flow:row!important;grid-auto-columns:auto!important;width:100%!important;gap:12px!important} } /* lv-28783 — LV — Accueil V2 : desktop (Claude) */ /* LV - Accueil V2 : desktop (Claude 21/09/2026) */ /* Avis Google sans contour cale a gauche, blocs 50/50 video-Proprietaire et image-Locataire, annonces remontees avec une marge a gauche, tableau comparatif en colonnes arrondies. */ @media (min-width:768px){ html body.elementor-page-28677 .elementor-element-568ea14{padding-left:10px!important} html body.elementor-page-28677 .elementor-element-568ea14 .ti-header{width:100%!important;max-width:100%!important;box-sizing:border-box!important;border:0!important;box-shadow:none!important;margin-left:0!important;margin-right:auto!important} html body.elementor-page-28677 .elementor-element-568ea14 .ti-widget,html body.elementor-page-28677 .elementor-element-568ea14 .ti-widget-container{text-align:left!important} html body.elementor-page-28677 .elementor-element-04846c2 > .e-con-inner,html body.elementor-page-28677 .elementor-element-9ae49fd > .e-con-inner{display:flex!important;flex-wrap:nowrap!important;justify-content:center!important;align-items:stretch!important;gap:40px!important} html body.elementor-page-28677 .elementor-element-04846c2 > .e-con-inner > .elementor-element,html body.elementor-page-28677 .elementor-element-9ae49fd > .e-con-inner > .elementor-element{flex:1 1 0!important;width:auto!important;max-width:none!important;min-width:0!important} html body.elementor-page-28677 .lv-split-wrap{margin-top:8px!important} html body.elementor-page-28677 .lv-split-wrap .lv-list-col{padding-left:0!important} html body.elementor-page-28677 .elementor-element-4752c6e{margin-top:-10px!important} html body.elementor-page-28677 .elementor-element-70cf42d table{border-collapse:separate!important;border-spacing:8px 0!important} html body.elementor-page-28677 .elementor-element-70cf42d thead th,html body.elementor-page-28677 .elementor-element-70cf42d thead td{border-radius:20px 20px 0 0!important} html body.elementor-page-28677 .elementor-element-70cf42d tbody tr:last-child td,html body.elementor-page-28677 .elementor-element-70cf42d tbody tr:last-child th{border-radius:0 0 20px 20px!important} /* fill-half : le visuel occupe toute sa moitie */ html body.elementor-page-28677 .elementor-element-04846c2 .elementor-widget-video,html body.elementor-page-28677 .elementor-element-04846c2 .elementor-widget-image,html body.elementor-page-28677 .elementor-element-9ae49fd .elementor-widget-image,html body.elementor-page-28677 .elementor-element-9ae49fd .elementor-widget-video{width:100%!important;max-width:100%!important} html body.elementor-page-28677 .elementor-element-9ae49fd .elementor-widget-image img,html body.elementor-page-28677 .elementor-element-04846c2 .elementor-widget-image img{width:100%!important;height:auto!important} /* Bouton "Estimer mon loyer" : vert fonce, un peu plus grand, sans contour ni ombre (21/09/2026) */ html body.elementor-page-28677 .elementor-element-5fec118 .elementor-button{background-color:#384E40!important;color:#fff!important;font-size:17px!important;min-height:52px!important;padding:0 34px!important} html body.elementor-page-28677 .elementor-element-5fec118 .elementor-button:hover, html body.elementor-page-28677 .elementor-element-5fec118 .elementor-button:focus{background-color:#fff!important;color:#384E40!important;border-color:#fff!important;box-shadow:none!important} html body.elementor-page-28677 .elementor-element-5fec118 .elementor-button:hover .elementor-button-text, html body.elementor-page-28677 .elementor-element-5fec118 .elementor-button:hover span{color:#384E40!important} /* Cartes du bloc pitch : chaque rangee prend la hauteur de son contenu (la rangee du bas etait etiree) */ html body.elementor-page-28677 .elementor-element-a089113{grid-template-rows:auto auto!important;align-content:start!important} } /* lv-28795 — LV — Accueil V2 : annonces en ligne défilante (Claude) */ /* LV - Accueil V2 : les annonces sur une seule ligne qui defile (Claude 21/09/2026) */ /* Remplace le bloc liste + carte : la carte est retiree, les annonces defilent horizontalement. */ html body.elementor-page-28677 .elementor-widget-shortcode .lv-split-wrap{display:block!important} html body.elementor-page-28677 .elementor-widget-shortcode .lv-split-wrap .lv-map-col, html body.elementor-page-28677 .lv-map-reopen{display:none!important} html body.elementor-page-28677 .elementor-widget-shortcode .lv-split-wrap .lv-list-col{width:100%!important;max-width:100%!important;padding-left:0!important} html body.elementor-page-28677 .vacantes_list_container{display:flex!important;flex-wrap:nowrap!important;grid-template-columns:none!important;align-items:stretch!important;overflow-x:auto!important;overflow-y:hidden!important;gap:20px!important;margin:0!important;padding:4px 0 16px!important;scrollbar-width:thin;-webkit-overflow-scrolling:touch;scroll-snap-type:none!important;scroll-behavior:auto!important} html body.elementor-page-28677 .vacantes_list_container>.vacante_card{flex:0 0 calc((100% - 60px)/4)!important;width:calc((100% - 60px)/4)!important;max-width:calc((100% - 60px)/4)!important;margin:0!important;scroll-snap-align:none!important} /* on leve les limites a 8 (desktop) et 4 (mobile) annonces : tout le stock defile */ html body.elementor-page-28677 .vacantes_list_container>.vacante_card:nth-of-type(n+5){display:block!important} html body.elementor-page-28677 .vacantes_list_container>.vacante_card:nth-child(n+5){display:block!important} /* MAJ 22/09/2026 : 8 annonces dans la rangee, 4 visibles a la fois (>=768px) */ @media (min-width:768px){ html body.elementor-page-28677 .vacantes_list_container > article.vacante_card.vacante_card.vacante_card:nth-of-type(-n+8){display:block!important} html body.elementor-page-28677 .vacantes_list_container > article.vacante_card.vacante_card.vacante_card:nth-of-type(n+9){display:none!important} } /* barre de defilement discrete */ html body.elementor-page-28677 .vacantes_list_container::-webkit-scrollbar{height:6px} html body.elementor-page-28677 .vacantes_list_container::-webkit-scrollbar-thumb{background:#D9D9D2;border-radius:3px} html body.elementor-page-28677 .vacantes_list_container::-webkit-scrollbar-track{background:transparent} /* fleches de defilement, en haut a droite de la rangee */ html body.elementor-page-28677 .lv-row-col{position:relative!important} html body.elementor-page-28677 button.lv-row-nav{position:absolute!important;top:-52px!important;width:40px!important;height:40px!important;min-width:0!important;min-height:0!important;border-radius:50%!important;border:1px solid #E2E2DC!important;background:#fff!important;background-color:#fff!important;background-image:none!important;box-shadow:none!important;cursor:pointer!important;z-index:6!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important;margin:0!important;line-height:0!important;transition:background-color .2s ease,opacity .2s ease} html body.elementor-page-28677 button.lv-row-nav:hover{background:#F4F3EE!important;background-color:#F4F3EE!important} html body.elementor-page-28677 button.lv-row-prev{right:48px!important;left:auto!important} html body.elementor-page-28677 button.lv-row-next{right:0!important;left:auto!important} html body.elementor-page-28677 button.lv-row-nav i{width:9px!important;height:9px!important;border-right:2px solid #1F3B2C!important;border-bottom:2px solid #1F3B2C!important;border-top:0!important;border-left:0!important;display:block!important;background:none!important} html body.elementor-page-28677 button.lv-row-prev i{transform:rotate(135deg);margin-left:3px!important} html body.elementor-page-28677 button.lv-row-next i{transform:rotate(-45deg);margin-right:3px!important} html body.elementor-page-28677 button.lv-row-nav.lv-off{opacity:.3!important;pointer-events:none!important} @media(max-width:1024px){ html body.elementor-page-28677 .vacantes_list_container>.vacante_card{flex:0 0 380px!important;width:380px!important;max-width:380px!important} } @media(max-width:767px){ /* mobile : une annonce a la fois, le doigt cale la carte suivante (Claude 22/09/2026) */ html body.elementor-page-28677 .vacantes_list_container{gap:14px!important;padding-bottom:12px!important;scroll-snap-type:x mandatory!important;scroll-padding:0!important} html body.elementor-page-28677 .vacantes_list_container>.vacante_card{flex:0 0 100%!important;width:100%!important;max-width:100%!important;scroll-snap-align:start!important;scroll-snap-stop:always!important} html body.elementor-page-28677 button.lv-row-nav{display:none!important} } /* plus d'air au-dessus du bloc « Comment ca marche ? » */ html body.elementor-page-28677 .elementor-element-0442635{padding-top:64px!important} @media(max-width:767px){html body.elementor-page-28677 .elementor-element-0442635{padding-top:44px!important}} /* icone play de la video : pastille compacte et lisible */ html body.elementor-page-28677 .elementor-widget-video .elementor-custom-embed-play{width:68px!important;height:68px!important;border-radius:50%!important;background:rgba(31,59,44,.82)!important;display:flex!important;align-items:center!important;justify-content:center!important;line-height:0!important;box-shadow:0 4px 18px rgba(0,0,0,.25)!important;transition:background-color .2s ease,box-shadow .2s ease} html body.elementor-page-28677 .elementor-widget-video .elementor-custom-embed-play svg, html body.elementor-page-28677 .elementor-widget-video .elementor-custom-embed-play i{display:none!important} html body.elementor-page-28677 .elementor-widget-video .elementor-custom-embed-play::after{content:"";display:block;width:0;height:0;border-left:19px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:6px} html body.elementor-page-28677 .elementor-widget-video .elementor-custom-embed-play:hover{background:#1F3B2C!important;box-shadow:0 6px 22px rgba(0,0,0,.35)!important} @media(max-width:767px){ html body.elementor-page-28677 .elementor-widget-video .elementor-custom-embed-play{width:56px!important;height:56px!important} html body.elementor-page-28677 .elementor-widget-video .elementor-custom-embed-play::after{border-left-width:16px;border-top-width:10px;border-bottom-width:10px;margin-left:5px} } /* le bouton play doit se centrer sur le cadre video, pas sur le widget entier */ html body.elementor-page-28677 .elementor-widget-video .elementor-wrapper, html body.elementor-page-28677 .elementor-widget-video .elementor-widget-container{position:relative!important} html body.elementor-page-28677 .elementor-widget-video .elementor-custom-embed-play{position:absolute!important;top:50%!important;left:50%!important;right:auto!important;bottom:auto!important;margin:0!important;transform:translate(-50%,-50%)!important} /* en-tete fixe garanti en CSS, sans dependre du JS du plugin sticky */ @media(min-width:1025px){ html body.elementor-page-28677 header.elementor-location-header{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;z-index:999!important} html body.admin-bar.elementor-page-28677 header.elementor-location-header{top:32px!important} } /* le cadre video garde sa hauteur meme avant le chargement de la vignette, sinon le bouton play se retrouve hors de l image */ html body.elementor-page-28677 .elementor-widget-video .elementor-wrapper{aspect-ratio:16/9;background:#12261B!important;overflow:hidden!important;border-radius:6px} html body.elementor-page-28677 .elementor-widget-video .elementor-custom-embed-image-overlay{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;height:100%!important} html body.elementor-page-28677 .elementor-widget-video .elementor-custom-embed-image-overlay img{width:100%!important;height:100%!important;object-fit:cover!important} /* bouton « Estimer mon loyer » du hero : sans contour ni ombre, avec plus d air autour */ html body.elementor-page-28677 .elementor-element-5fec118 .elementor-button{border:0!important;box-shadow:none!important} html body.elementor-page-28677 .elementor-element-5fec118{margin-top:18px!important;margin-bottom:18px!important} /* mobile : bouton Estimer mon loyer en contour blanc et texte blanc */ @media(max-width:767px){ html body.elementor-page-28677 .elementor-element-ad2ccf8 .elementor-button{border:1px solid #fff!important;color:#fff!important;background-color:transparent!important;box-shadow:none!important} html body.elementor-page-28677 .elementor-element-ad2ccf8 .elementor-button .elementor-button-text, html body.elementor-page-28677 .elementor-element-ad2ccf8 .elementor-button span{color:#fff!important} } /* pas de contour blanc au survol des boutons verts pleins Creer mon annonce */ html body.elementor-page-28677 .elementor-element-7a33ab0 .elementor-button:hover, html body.elementor-page-28677 .elementor-element-ee9e99b .elementor-button:hover, html body.elementor-page-28677 .elementor-element-642968f .elementor-button:hover, html body.elementor-page-28677 .elementor-element-cbadef1 .elementor-button:hover{border-color:transparent!important} /* mobile : survol de Estimer mon loyer -> fond blanc, texte vert */ @media(max-width:767px){ html body.elementor-page-28677 .elementor-element-ad2ccf8 .elementor-button:hover, html body.elementor-page-28677 .elementor-element-ad2ccf8 .elementor-button:focus{background-color:#fff!important;color:#384E40!important;border-color:#fff!important} html body.elementor-page-28677 .elementor-element-ad2ccf8 .elementor-button:hover .elementor-button-text, html body.elementor-page-28677 .elementor-element-ad2ccf8 .elementor-button:hover span{color:#384E40!important} } /* tablette : l en-tete pose sur l image du hero sortait de l ecran (margin-top:-100px) et se retrouvait sous le hero. On le replace en superposition, avec un degrade pour la lisibilite. */ @media(min-width:768px) and (max-width:1024px){ html body.elementor-page-28677 .elementor-element-53b1202{margin-top:0!important;position:absolute!important;top:0!important;left:0!important;right:0!important;width:100%!important;z-index:30!important;background-image:linear-gradient(to bottom,rgba(16,32,23,.55),rgba(16,32,23,0))!important;padding:16px 26px 18px!important;align-items:center!important} } /* mobile : les logos presse defilent 3 par 3 au lieu de tenir sur 3 lignes */ @media(max-width:767px){ html body.page-id-28677 section.lvp-press .lvp-press-grid{display:flex!important;flex-wrap:nowrap!important;grid-template-columns:none!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory;gap:0!important;padding:0!important;margin:0!important;-webkit-overflow-scrolling:touch;scrollbar-width:none} html body.page-id-28677 section.lvp-press .lvp-press-grid::-webkit-scrollbar{display:none} html body.page-id-28677 section.lvp-press .lvp-press-grid>a{flex:0 0 33.333%!important;width:33.333%!important;max-width:33.333%!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0 10px!important;margin:0!important} html body.page-id-28677 section.lvp-press .lvp-press-grid>a:nth-child(3n+1){scroll-snap-align:start} html body.page-id-28677 section.lvp-press .lvp-press-grid>a img{max-height:34px!important;width:auto!important} } /* mobile : on retire le bloc Locataire (image + texte), qui debordait aussi a droite, et on ramene les deux boutons des blocs a icones a une largeur raisonnable */ @media(max-width:767px){ html body.elementor-page-28677 .elementor-element-9ae49fd{display:none!important} html body.elementor-page-28677 .elementor-element-d46ea7c, html body.elementor-page-28677 .elementor-element-43c3679{text-align:center!important} html body.elementor-page-28677 .elementor-element-d46ea7c .elementor-button, html body.elementor-page-28677 .elementor-element-43c3679 .elementor-button{width:auto!important;max-width:260px!important;display:inline-flex!important;margin-left:auto!important;margin-right:auto!important} } /* le sur-titre « Une nouvelle facon de louer » est retire (21/09/2026) */ html body.elementor-page-28677 .elementor-element-279c0b5{display:none!important} /* tableau comparatif : plus de filet gris sous la derniere ligne */ html body.elementor-page-28677 .elementor-element-1355712 .wpr-table-inner-container{border-bottom:0!important} /* mobile : les logos partenaires defilent, 3 visibles, un logo a la fois */ @media(max-width:767px){ html body .elementor-element-de1b698>.elementor-element-24dfe6f{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory;gap:0!important;scrollbar-width:none;-webkit-overflow-scrolling:touch} html body .elementor-element-de1b698>.elementor-element-24dfe6f::-webkit-scrollbar{display:none} html body .elementor-element-de1b698 .elementor-element-24dfe6f>.elementor-element{flex:0 0 33.333%!important;width:33.333%!important;max-width:33.333%!important;box-sizing:border-box!important;scroll-snap-align:start;display:flex!important;align-items:center!important;justify-content:center!important;padding:0 10px!important;margin:0!important} } /* tablette : blocs proprietaire et locataire — media plus petit, texte plus large, marges laterales */ @media(min-width:768px) and (max-width:1024px){ html body.elementor-page-28677 .elementor-element-04846c2>.e-con-inner, html body.elementor-page-28677 .elementor-element-9ae49fd>.e-con-inner{padding-left:24px!important;padding-right:24px!important;gap:26px!important;align-items:center!important} html body.elementor-page-28677 .elementor-element-4e90568, html body.elementor-page-28677 .elementor-element-fc69616{flex:0 0 36%!important;width:36%!important;max-width:36%!important;--width:36%!important} html body.elementor-page-28677 .elementor-element-30ba2a2, html body.elementor-page-28677 .elementor-element-d36f9d5{flex:1 1 auto!important;width:auto!important;max-width:64%!important;--width:64%!important} html body.elementor-page-28677 .elementor-element-04846c2, html body.elementor-page-28677 .elementor-element-9ae49fd{overflow-x:clip!important} html body.elementor-page-28677 .elementor-element-f85de97{margin-bottom:48px!important} html body.elementor-page-28677 .elementor-element-c53f8f1{padding-top:48px!important} } /* le filet gris de bas de tableau part sur les deux variantes du comparatif */ html body .wpr-table-inner-container{border-bottom:0!important} html body .wpr-table-inner-container>table, html body .wpr-table-inner-container tbody tr:last-child td{border-bottom:0!important} /* tablette : on reprend la main sur le partage 50/50 pose par l extrait desktop */ @media(min-width:768px) and (max-width:1024px){ html body.elementor-page-28677 .elementor-element-04846c2 > .e-con-inner > .elementor-element.elementor-element-4e90568, html body.elementor-page-28677 .elementor-element-9ae49fd > .e-con-inner > .elementor-element.elementor-element-fc69616{flex:0 0 36%!important;width:36%!important;max-width:36%!important;--width:36%!important} html body.elementor-page-28677 .elementor-element-04846c2 > .e-con-inner > .elementor-element.elementor-element-30ba2a2, html body.elementor-page-28677 .elementor-element-9ae49fd > .e-con-inner > .elementor-element.elementor-element-d36f9d5{flex:1 1 auto!important;width:auto!important;max-width:64%!important;--width:64%!important} } /* les 4 blocs verts de reassurance passent en Nunito */ html body.elementor-page-28677 .elementor-element-1b35b62, html body.elementor-page-28677 .elementor-element-1b35b62 *{font-family:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important} /* tablette portrait : pas de bandeau degrade sur l en-tete du hero, et 100 px de moins pour l image de fond (21/09/2026) */ @media(min-width:768px) and (max-width:1024px) and (orientation:portrait){ html body.elementor-page-28677 .elementor-element-53b1202{background-image:none!important} html body.elementor-page-28677 .elementor-element-252c8e4, html body.elementor-page-28677 .elementor-element-252c8e4>.elementor-container{height:704px!important;min-height:0!important} } /* lv-28876 — LV — Header tablette portrait (Claude) */ /* LV — Header tablette portrait : disposition d'avant-scroll + entrees reduites (Trouver un bien / Creer mon annonce / compte / FR-EN) — Claude 21/09/2026 */ @media (min-width:768px) and (max-width:1024px) and (orientation:portrait){ /* menus du header : seulement Trouver un bien, Creer mon annonce et le compte */ nav.elementor-nav-menu--main>ul.lvd-mainnav{flex-wrap:nowrap!important} nav.elementor-nav-menu--main>ul.lvd-mainnav>li{display:none!important} nav.elementor-nav-menu--main>ul.lvd-mainnav>li.menu-item-18411, nav.elementor-nav-menu--main>ul.lvd-mainnav>li.menu-item-18410{display:block!important} nav.elementor-nav-menu--main>ul.lvd-mainnav>li:has(>.vact_header_button){display:block!important} nav.elementor-nav-menu--main>ul.lvd-mainnav>li>a.elementor-item{padding-left:14px!important;padding-right:14px!important} /* pas de burger : tout est visible */ .elementor-widget-nav-menu:has(ul.lvd-mainnav) .elementor-menu-toggle{display:none!important} /* rangee alignee a droite, sur une seule ligne */ .elementor-widget-nav-menu:has(ul.lvd-mainnav)>.elementor-widget-container{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-end!important} .elementor-widget-nav-menu:has(ul.lvd-mainnav) nav.elementor-nav-menu--main{width:auto!important;flex:0 0 auto!important} /* selecteur FR/EN recopie dans le header d'accueil (voir snippet JS) */ .lv-sw-clone{flex:0 0 auto!important;width:auto!important;margin:0 0 0 6px!important} .lv-sw-clone ul,.lv-sw-clone .cpel-switcher__list{display:flex!important;flex-direction:row!important;gap:2px!important;margin:0!important} .lv-sw-clone li{list-style:none!important} /* lv-hero-flush : la photo du hero part du haut de l ecran (pas de bande blanche) */ body.home #content, body.page-id-28677 #content{padding-top:0!important} body.home .elementor-28677 .elementor-element.elementor-element-53b1202, body.page-id-28677 .elementor-28677 .elementor-element.elementor-element-53b1202{padding-block-start:30px!important} /* lv-no-flash : pas de flash de l en-tete fixe ni de saut du bloc header pendant le chargement */ body.home header.elementor-location-header:not(.lv-hdr-auto){opacity:0;animation:lvNoFlash 0s linear 1.2s forwards} /* lv-hero-air : titre et boutons remontes sur la photo, plus d air avant les 4 blocs */ .elementor-28677 .elementor-element.elementor-element-a35ed0e{--spacer-size:230px!important} /* section Locataire : En savoir plus et Trouver un bien alignes en bas de colonne */ .elementor-28677 .elementor-element.elementor-element-c5dabfd{flex:1 1 auto!important} .elementor-28677 .elementor-element.elementor-element-6d27bb8{margin-block-start:auto!important} .elementor-28677 .elementor-element.elementor-element-8987b03{margin-block-start:auto!important;margin-block-end:4px!important} /* lv-presse : "Ils en parlent" sur une seule ligne qui defile */ .lvp-press-grid{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:28px!important;align-items:center!important;padding-bottom:6px!important;scrollbar-width:thin} .lvp-press-grid > *{flex:0 0 auto!important;width:150px!important} .lvp-press-grid::-webkit-scrollbar{height:4px} .lvp-press-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:4px} } @keyframes lvNoFlash{to{opacity:1}}