/* ========================================================================= servicevoisin.fr — feuille de style unique. Thème clair et sombre. Le thème est piloté par l'attribut data-theme sur : "light", "dark", ou absent = on suit le réglage du téléphone. ========================================================================= */ :root{ --bg:#f5f7fb; --bg2:#eef2f8; --card:#ffffff; --card2:#f7f9fc; --line:#e3e8f0; --line2:#cfd7e5; --ink:#0f172a; --mut:#5b6b85; --mut2:#8494ac; --pri:#2563eb; --pri-ink:#ffffff; --pri-soft:#e8effe; --grn:#0f8a54; --grn-soft:#e4f5ec; --amb:#a76a08; --amb-soft:#fdf3e2; --red:#c62f26; --red-soft:#fdeceb; --vio:#6d45d9; --vio-soft:#f0eaff; --shadow:0 1px 2px rgba(16,24,40,.05), 0 8px 24px -14px rgba(16,24,40,.22); --radius:14px; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#0a1020; --bg2:#0e1526; --card:#141d31; --card2:#1a2440; --line:#233150; --line2:#31415f; --ink:#e9eff9; --mut:#93a3bf; --mut2:#6d7f9c; --pri:#4d82ff; --pri-ink:#04122e; --pri-soft:#17264a; --grn:#35c47f; --grn-soft:#10301f; --amb:#e2a63c; --amb-soft:#32250d; --red:#f0655c; --red-soft:#361614; --vio:#9d80ff; --vio-soft:#221a3f; --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -16px rgba(0,0,0,.8); } } :root[data-theme="dark"]{ --bg:#0a1020; --bg2:#0e1526; --card:#141d31; --card2:#1a2440; --line:#233150; --line2:#31415f; --ink:#e9eff9; --mut:#93a3bf; --mut2:#6d7f9c; --pri:#4d82ff; --pri-ink:#04122e; --pri-soft:#17264a; --grn:#35c47f; --grn-soft:#10301f; --amb:#e2a63c; --amb-soft:#32250d; --red:#f0655c; --red-soft:#361614; --vio:#9d80ff; --vio-soft:#221a3f; --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -16px rgba(0,0,0,.8); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--ink); font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased} a{color:var(--pri);text-decoration:none} a:hover{text-decoration:underline} img{max-width:100%;display:block} h1,h2,h3{margin:0 0 8px;line-height:1.25;letter-spacing:-.3px} h1{font-size:27px} h2{font-size:20px} h3{font-size:16px} p{margin:0 0 12px} /* ------------------------------------------------------------- structure */ .wrap{max-width:1000px;margin:0 auto;padding:0 16px} main{padding:22px 0 70px;min-height:60vh} .muted{color:var(--mut)} .small{font-size:13.5px} .tiny{font-size:12.5px;color:var(--mut2)} .center{text-align:center} .mt{margin-top:22px} .stack>*+*{margin-top:12px} /* ---------------------------------------------------------------- header */ header.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--line)} .topin{display:flex;align-items:center;gap:12px;padding:11px 0} .brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px; letter-spacing:-.5px;color:var(--ink)} .brand:hover{text-decoration:none} .brand .p02mark{flex:0 0 auto;display:block} .brandtext{font-weight:900;letter-spacing:-.8px} .brand em{font-style:normal;color:var(--pri)} .spacer{flex:1} nav.main{display:flex;gap:4px;align-items:center} nav.main a{padding:8px 10px;border-radius:9px;color:var(--mut);font-size:14.5px;font-weight:600;white-space:nowrap} nav.main a:hover{background:var(--card2);color:var(--ink);text-decoration:none} nav.main a.on{color:var(--ink);background:var(--card2)} .iconbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--card); display:grid;place-items:center;cursor:pointer;font-size:16px;color:var(--ink);flex:0 0 auto;padding:0} .iconbtn:hover{border-color:var(--line2)} .themeicon-dark{display:none} :root[data-theme="dark"] .themeicon-light{display:none} :root[data-theme="dark"] .themeicon-dark{display:block} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .themeicon-light{display:none} :root:not([data-theme="light"]) .themeicon-dark{display:block} } /* ------------------------------------------------------------- position */ .posbar{display:flex;align-items:center;gap:9px;padding:8px 0 0;font-size:13.5px; color:var(--mut);flex-wrap:wrap} .poschip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px; background:var(--grn-soft);color:var(--grn);border:1px solid transparent;font-weight:600; cursor:pointer;font-size:13px;white-space:nowrap;flex:0 0 auto} .poschip.off{background:var(--amb-soft);color:var(--amb)} .poschip:hover{text-decoration:none;filter:brightness(.97)} /* --------------------------------------------------------------- boutons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px; padding:11px 18px;border-radius:11px;border:1px solid var(--line2);background:var(--card); color:var(--ink);font-size:15px;font-weight:700;cursor:pointer;text-align:center} .btn:hover{text-decoration:none;border-color:var(--mut2)} .btn.pri{background:var(--pri);border-color:var(--pri);color:var(--pri-ink)} .btn.pri:hover{filter:brightness(1.07);border-color:var(--pri)} .btn.grn{background:var(--grn);border-color:var(--grn);color:#fff} .btn.sm{padding:8px 14px;font-size:13.5px;border-radius:9px} .btn.wide{width:100%} .btn[disabled]{opacity:.5;cursor:not-allowed} /* --------------------------------------------------------------- cartes */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:20px;box-shadow:var(--shadow)} .card+.card{margin-top:14px} .grid{display:grid;gap:14px} .grid.c2{grid-template-columns:repeat(2,1fr)} .grid.c3{grid-template-columns:repeat(3,1fr)} .split{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start} /* --------------------------------------------------------------- badges */ .badge{display:inline-block;font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:20px; letter-spacing:.02em;white-space:nowrap} .b-pri{background:var(--pri-soft);color:var(--pri)} .b-grn{background:var(--grn-soft);color:var(--grn)} .b-amb{background:var(--amb-soft);color:var(--amb)} .b-red{background:var(--red-soft);color:var(--red)} .b-vio{background:var(--vio-soft);color:var(--vio)} .b-mut{background:var(--card2);color:var(--mut)} .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap} /* ------------------------------------------------------------ formulaire */ label{display:block;font-weight:700;font-size:14px;margin:0 0 6px} input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number], input[type=search],select,textarea{ width:100%;padding:12px 14px;border-radius:11px;border:1px solid var(--line2); background:var(--card);color:var(--ink);font:inherit;font-size:16px} textarea{min-height:130px;resize:vertical} input:focus,select:focus,textarea:focus{outline:2px solid var(--pri);outline-offset:-1px;border-color:var(--pri)} .field{margin-bottom:16px} .hint{font-size:13px;color:var(--mut);margin:5px 0 0} select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%), linear-gradient(135deg,var(--mut) 50%,transparent 50%); background-position:calc(100% - 19px) 55%,calc(100% - 14px) 55%; background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px} /* --------------------------------------------------------------- alertes */ .alert{padding:13px 16px;border-radius:12px;font-size:14.5px;margin-bottom:16px;border:1px solid transparent} .alert.ok{background:var(--grn-soft);color:var(--grn);border-color:color-mix(in srgb,var(--grn) 30%,transparent)} .alert.warn{background:var(--amb-soft);color:var(--amb);border-color:color-mix(in srgb,var(--amb) 30%,transparent)} .alert.err{background:var(--red-soft);color:var(--red);border-color:color-mix(in srgb,var(--red) 30%,transparent)} /* --------------------------------------------------------------- annonces */ .list{display:grid;gap:12px} .tile{display:flex;gap:14px;background:var(--card);border:1px solid var(--line); border-radius:var(--radius);padding:14px;align-items:center;box-shadow:var(--shadow);color:var(--ink)} .tile:hover{text-decoration:none;border-color:var(--line2);transform:translateY(-1px)} .tile .thumb{width:78px;height:78px;flex:0 0 auto;border-radius:11px;overflow:hidden; background:var(--card2);border:1px solid var(--line);display:grid;place-items:center;font-size:30px} .tile .thumb img{width:100%;height:100%;object-fit:cover} .tile .body{flex:1;min-width:0} .tile h3{margin:5px 0 2px;font-size:16px} .tile .meta{font-size:13.5px;color:var(--mut);margin:0} .tile .side{text-align:right;flex:0 0 auto} .price{font-weight:800;font-size:17px;color:var(--grn);white-space:nowrap} .price small{display:block;font-size:11.5px;color:var(--mut2);font-weight:600} .dist{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;color:var(--pri)} .empty{text-align:center;padding:44px 20px;color:var(--mut);border:1.5px dashed var(--line2); border-radius:var(--radius)} .empty .big{font-size:38px;margin-bottom:8px} /* ------------------------------------------------------------- recherche */ .hero{background:linear-gradient(160deg,var(--card),var(--card2));border:1px solid var(--line); border-radius:20px;padding:26px;margin-bottom:22px;box-shadow:var(--shadow)} .eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase; color:var(--mut2);margin:0 0 8px} .lead{max-width:700px;font-size:15.5px;line-height:1.62;color:var(--mut);margin:0} .sbar{display:flex;gap:9px;margin:16px 0 12px} .sbar input{flex:1;min-width:0;font-size:17px;padding:15px 16px} .sbar .btn{padding:15px 22px} /* ---------------------------------------------- grille des catégories 18 puces empilées faisaient 18 lignes sur téléphone. En grille, tout tient en quelques lignes et se lit d'un coup d'œil. */ .catgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:4px} .cat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px; padding:11px 6px;border-radius:13px;border:1px solid var(--line2);background:var(--card); color:var(--mut);font-size:12.5px;font-weight:700;text-align:center;line-height:1.25; min-height:70px;cursor:pointer;font-family:inherit} .cat:hover{text-decoration:none;color:var(--ink);border-color:var(--mut2)} .cat .ic{font-size:20px;line-height:1} .cat.extra{display:none} .catgrid.open .cat.extra{display:flex} .catgrid.open .cat.more{display:none} @media(max-width:860px){.catgrid{grid-template-columns:repeat(4,1fr)}} @media(max-width:560px){.catgrid{grid-template-columns:repeat(3,1fr);gap:7px} .cat{font-size:11.5px;min-height:64px;padding:9px 4px} .cat .ic{font-size:18px}} .chips{display:flex;gap:8px;flex-wrap:wrap} .chip{display:inline-block;padding:7px 13px;border-radius:20px;background:var(--card); border:1px solid var(--line2);font-size:13.5px;font-weight:600;color:var(--mut)} .chip:hover{text-decoration:none;color:var(--ink)} .chip.on{background:var(--pri);border-color:var(--pri);color:var(--pri-ink)} /* ---------------------------------------------------------- 3 sorties */ .exits{display:grid;grid-template-columns:repeat(3,1fr);gap:13px} .exit{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line); border-radius:var(--radius);padding:18px;position:relative;overflow:hidden;color:var(--ink); box-shadow:var(--shadow)} /* pousse la fleche en bas : les trois cartes s'alignent meme si les textes n'ont pas le meme nombre de lignes */ .exit p{flex:1} a.exit:hover{text-decoration:none;transform:translateY(-2px);border-color:var(--line2)} .exit::before{content:"";position:absolute;top:0;left:0;right:0;height:3px} .exit.a::before{background:var(--grn)} .exit.b::before{background:var(--pri)} .exit.c::before{background:var(--vio)} .exit .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center; font-size:20px;margin-bottom:12px} .exit.a .ic{background:var(--grn-soft)} .exit.b .ic{background:var(--pri-soft)} .exit.c .ic{background:var(--vio-soft)} .exit p{font-size:13.5px;color:var(--mut);margin:0 0 12px} .exit .go{font-size:13px;font-weight:800} .exit.a .go{color:var(--grn)} .exit.b .go{color:var(--pri)} .exit.c .go{color:var(--vio)} /* les cartes « comment ca se passe » sont numerotees : le chiffre remplace l'icone */ .exit .ic{font-weight:800} /* ------------------------------- « arrondissez vos fins de mois » (accueil) Le meme message que l'ancien encart de bas de page, remonte en haut et detaille en trois points a la demande du client. */ .money{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:20px; padding:24px;margin-bottom:26px;box-shadow:var(--shadow); background:linear-gradient(150deg,var(--grn-soft),var(--card) 58%,var(--pri-soft))} .money::before{content:"";position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,var(--grn),var(--pri),var(--vio))} .money-head{display:flex;gap:14px;align-items:flex-start} .money-ic{flex:none;width:46px;height:46px;border-radius:14px;background:var(--card); border:1px solid var(--line);display:grid;place-items:center;font-size:22px} .money-head h2{margin:0 0 5px;font-size:21px;line-height:1.25} .money-head p{margin:0;color:var(--mut);font-size:14.5px;max-width:680px} .money-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0 16px} .mcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px} .mcard .n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%; background:var(--pri);color:var(--pri-ink);font-size:13px;font-weight:800;margin-bottom:10px} .mcard h3{font-size:14.5px;margin:0 0 6px} .mcard p{font-size:13.5px;color:var(--mut);margin:0} .money-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center} @media(max-width:860px){.money-grid{grid-template-columns:1fr}} @media(max-width:640px){ .money{padding:18px} .money-head h2{font-size:19px} .money-cta .btn{width:100%;text-align:center} } /* ------------------------------------------------------------ diagnostic */ .dcode{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:26px;font-weight:800; letter-spacing:1px} ol.causes{margin:6px 0 0;padding-left:20px;color:var(--mut)} ol.causes li{margin-bottom:5px} ol.causes li strong{color:var(--ink)} .parts span{display:inline-block;margin:0 6px 6px 0;padding:6px 12px;border-radius:20px; background:var(--card2);border:1px solid var(--line);font-size:13.5px} .dots{display:inline-flex;gap:4px;vertical-align:-1px;margin-right:7px} .dots i{width:11px;height:11px;border-radius:50%;background:var(--line2);display:block} .dots i.on{background:var(--pri)} table.struct{width:100%;border-collapse:collapse;font-size:14px} table.struct td.ch{width:1%;white-space:nowrap;font-family:ui-monospace,monospace;font-weight:800; font-size:15px;color:var(--red);background:var(--red-soft);border-radius:8px;padding:6px 10px; text-align:center} table.struct th{text-align:left;font-weight:700;padding:8px 12px;white-space:nowrap;vertical-align:top} table.struct td{padding:8px 0;vertical-align:top;color:var(--mut)} table.struct tr+tr th,table.struct tr+tr td{border-top:1px solid var(--line)} table.veh{width:100%;border-collapse:collapse;font-size:14.5px} table.veh th{text-align:left;color:var(--mut);font-weight:600;padding:8px 14px 8px 0; white-space:nowrap;width:1%} table.veh td{padding:8px 0;font-weight:700} table.veh tr+tr th,table.veh tr+tr td{border-top:1px solid var(--line)} /* ---------------------------------------------------------------- footer */ footer.bot{border-top:1px solid var(--line);padding:26px 0 40px;color:var(--mut);font-size:13.5px} footer.bot a{color:var(--mut)} footer.bot .cols{display:flex;gap:26px;flex-wrap:wrap;align-items:center} /* ---------------------------------------------------------------- mobile */ @media (max-width:860px){ .split,.grid.c2,.grid.c3,.exits{grid-template-columns:1fr} } @media (max-width:640px){ h1{font-size:23px} .wrap{padding:0 13px} /* l'en-tete ne doit JAMAIS deborder : le bouton secondaire passe dans le menu */ .topin{gap:8px} .hide-mob{display:none} .brand{font-size:17px} .brand .mark{width:28px;height:28px;font-size:14px} .iconbtn{width:34px;height:34px;font-size:15px} .topin .btn.sm{padding:8px 12px;font-size:13px} .posbar .tiny{flex:1 1 100%} nav.main{display:none} nav.main.open{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--card); border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:8px 13px 14px;gap:2px} nav.main.open a{padding:12px} .sbar{flex-wrap:wrap} .sbar .btn{width:100%} .hero{padding:20px} .tile{flex-wrap:wrap} .tile .side{width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center} .card{padding:16px} } @media (min-width:641px){ .burger{display:none} .only-mob{display:none !important} } /* ===================================================================== Fil d'actualité — cartes d'annonces avec photos, façon réseau social. « La personne publie une annonce, elle sort comme une carte, on voit les images. » Plus aérien que les vignettes en ligne. ===================================================================== */ .feed{display:grid;gap:16px} .fcard{background:var(--card);border:1px solid var(--line);border-radius:16px; overflow:hidden;box-shadow:var(--shadow);color:var(--ink);display:block} .fcard:hover{border-color:var(--line2)} .fcard a{color:inherit} .fcard a:hover{text-decoration:none} .fhead,.fbody,.fphotos{display:block} .fhead{display:flex} .fhead{display:flex;align-items:center;gap:11px;padding:14px 16px 10px} .avatar{width:44px;height:44px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center; background:var(--card2);border:1px solid var(--line);font-size:20px;overflow:hidden} .avatar img{width:100%;height:100%;object-fit:cover} .fwho{flex:1;min-width:0} .fwho strong{display:block;font-size:15px;line-height:1.3} .fwho span{font-size:13px;color:var(--mut)} .fwhen{font-size:12.5px;color:var(--mut2);white-space:nowrap;align-self:flex-start} .fbody{padding:0 16px 12px} .fbody h3{margin:0 0 5px;font-size:17px;line-height:1.35} .fbody p{margin:0;color:var(--mut);font-size:14.5px} .fphotos{display:grid;gap:3px;background:var(--line)} .fphotos.n1{grid-template-columns:1fr} .fphotos.n2{grid-template-columns:1fr 1fr} .fphotos.n3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr} .fphotos.n3 :first-child{grid-row:span 2} .fphotos img{width:100%;height:100%;object-fit:cover;display:block; aspect-ratio:16/10;background:var(--card2)} .fphotos.n3 img{aspect-ratio:auto;min-height:104px} .ffoot{display:flex;align-items:center;gap:12px;padding:11px 16px; border-top:1px solid var(--line);font-size:13.5px;color:var(--mut);flex-wrap:wrap} .ffoot .sep{flex:1} .fcta{font-weight:700;color:var(--pri)} /* Bloc « proposez vos services », façon encart de droite du modèle */ .promo{background:linear-gradient(160deg,var(--pri-soft),var(--card)); border:1px solid var(--line);border-radius:16px;padding:20px} .promo h3{font-size:18px;margin-bottom:6px} .promo p{font-size:14px;color:var(--mut)} @media(max-width:640px){ .fphotos.n3{grid-template-columns:1fr 1fr} .fphotos.n3 :first-child{grid-row:auto;grid-column:span 2} } /* Aperçu d'une photo avant envoi */ .preview{display:flex;align-items:center;gap:10px;margin-top:9px} .preview:empty{display:none} .preview img{width:74px;height:74px;object-fit:cover;border-radius:10px; border:1px solid var(--line2)} .preview .pmeta{font-size:12.5px;color:var(--mut)} .preview .pdel{width:28px;height:28px;border-radius:8px;border:1px solid var(--line2); background:var(--card);color:var(--red);cursor:pointer;font-size:13px;line-height:1} .preview .pdel:hover{border-color:var(--red)} /* Barre J'aime / Partager / Répondre sous une annonce */ .actbar{display:flex;align-items:center;gap:8px;padding:11px 0 0;margin-top:14px; border-top:1px solid var(--line);flex-wrap:wrap} .actbar form{margin:0} .actbar .btn{flex:1 1 auto;justify-content:center} @media(max-width:520px){ .actbar .btn{flex:1 1 100%} } /* -------------------------------------------------------- conversation */ .thread{display:flex;flex-direction:column;gap:10px} .msg{display:flex} .msg.me{justify-content:flex-end} .bubble{max-width:min(560px,86%);background:var(--card);border:1px solid var(--line); border-radius:16px;padding:12px 15px;box-shadow:var(--shadow)} .msg.me .bubble{background:var(--pri-soft);border-color:transparent} .bubble .mtime{display:block;margin-top:6px;font-size:11.5px;color:var(--mut2)} .quote{background:var(--card2);border:1px solid var(--line2);border-radius:12px; padding:12px 14px;margin-bottom:10px} .msg.me .quote{background:var(--card)} .navbadge{display:inline-block;min-width:18px;padding:0 5px;margin-left:5px;border-radius:9px; background:var(--red);color:#fff;font-size:11px;font-weight:800;text-align:center;line-height:18px} .convrow{position:relative} .convdel{position:absolute;top:10px;right:10px;margin:0} .convdel button{border:1px solid var(--line2);background:var(--card);border-radius:8px; width:30px;height:30px;cursor:pointer;font-size:13px;opacity:.6;padding:0} .convdel button:hover{opacity:1;border-color:var(--red)} /* resultat de la verification SIRET dans l'administration */ .siretbox{margin-top:10px;padding:12px 14px;border-radius:11px;font-size:13.5px; border:1px solid var(--line);background:var(--card2);color:var(--mut)} .siretbox.okk{border-color:var(--grn);background:var(--grn-soft);color:var(--ink)} .siretbox.ko{border-color:var(--red);background:var(--red-soft);color:var(--red)} .siretbox table{border-collapse:collapse;width:100%} .siretbox th{text-align:left;padding:3px 12px 3px 0;font-size:12.5px;color:var(--mut); font-weight:700;white-space:nowrap;vertical-align:top} .siretbox td{padding:3px 0;font-size:13px} .gone{margin:0;font-style:italic;color:var(--mut2);font-size:14px} .mdel{border:none;background:none;padding:0 0 0 6px;cursor:pointer;font-size:11px;opacity:.55;line-height:1} .mdel:hover{opacity:1} .navbadge.grn{background:var(--grn)} .navbadge.dot{min-width:9px;width:9px;height:9px;padding:0;margin:0;border-radius:50%; position:absolute;top:5px;right:5px;border:2px solid var(--card)} /* ------------------------------------------------------- menu du compte Le client voulait le menu du haut « adapté » : sept liens en ligne passaient à la ligne et coupaient l'en-tête. Tout ce qui est personnel tient maintenant dans un seul bouton à droite, comme sur le site qu'il m'a montré. */ .acct{position:relative} .acctbtn{position:relative;display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px; border-radius:24px;border:1px solid var(--line2);background:var(--card);color:var(--ink); font:inherit;font-size:14px;font-weight:700;cursor:pointer} .acctbtn:hover{border-color:var(--mut2)} .avatar.sm{width:30px;height:30px;font-size:14px} .avatar.big{width:76px;height:76px;font-size:34px} .acctname{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .caret{color:var(--mut2);font-size:11px} .acctmenu{position:absolute;top:calc(100% + 8px);right:0;min-width:262px;z-index:60; background:var(--card);border:1px solid var(--line);border-radius:14px;padding:7px; box-shadow:0 10px 40px -12px rgba(16,24,40,.35)} .acctmenu a{display:flex;align-items:center;gap:9px;padding:10px 11px;border-radius:9px; font-size:14.5px;font-weight:600;color:var(--ink)} .acctmenu a:hover{background:var(--card2);text-decoration:none} .acctcap{margin:8px 11px 4px;font-size:11px;font-weight:800;letter-spacing:.12em; text-transform:uppercase;color:var(--mut2)} .acctout{width:100%;margin-top:7px;padding:10px;border-radius:9px;border:1px solid var(--line2); background:var(--card2);color:var(--ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer} .acctout:hover{border-color:var(--red);color:var(--red)} .mobsep{display:block;margin:10px 12px 2px;font-size:11px;font-weight:800;letter-spacing:.12em; text-transform:uppercase;color:var(--mut2);border-top:1px solid var(--line);padding-top:12px} /* ------------------------------------------- cartes « service proposé » La photo d'abord et en grand : c'est ce qui fait la différence entre une annonce qui a l'air sérieuse et une ligne de texte. */ .scards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .scard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line); border-radius:16px;overflow:hidden;color:var(--ink);box-shadow:var(--shadow)} .scard:hover{text-decoration:none;border-color:var(--line2);transform:translateY(-2px)} .sphoto{position:relative;aspect-ratio:16/10;background:var(--card2)} .sphoto img{width:100%;height:100%;object-fit:cover;display:block} .sphoto.noimg{display:grid;place-items:center;font-size:44px; background:linear-gradient(150deg,var(--pri-soft),var(--card2))} .sprice{position:absolute;left:10px;bottom:10px;background:rgba(8,14,28,.82);color:#fff; padding:6px 11px;border-radius:20px;font-size:13.5px;font-weight:800;backdrop-filter:blur(3px)} .sprice em{font-style:normal;font-weight:600;opacity:.85;font-size:12px} .sbody{padding:13px 14px 10px;flex:1} .scat{font-size:12px;font-weight:700;color:var(--mut2)} .sbody h3{margin:5px 0 5px;font-size:16px;line-height:1.35} .sbody p{margin:0;font-size:13.5px;color:var(--mut)} .sfoot{display:flex;align-items:center;gap:9px;padding:10px 14px;border-top:1px solid var(--line)} .swho{min-width:0;display:flex;flex-direction:column;gap:3px} .swho strong{font-size:13.5px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sfoot .sep{flex:1} .smode{padding:8px 14px;background:var(--card2);border-top:1px solid var(--line); font-size:12.5px;font-weight:700;color:var(--mut)} @media(max-width:860px){.scards{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.scards{grid-template-columns:1fr}} /* ------------------------------------- choix demande / service (publier) Deux grosses cartes au lieu de deux petites puces : impossible de remplir le mauvais formulaire sans s'en apercevoir. */ .switch2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px} .sw{display:flex;gap:12px;align-items:flex-start;padding:15px;border-radius:14px; border:1.5px solid var(--line);background:var(--card);color:var(--ink)} .sw:hover{text-decoration:none;border-color:var(--line2)} .sw.on{border-color:var(--pri);background:var(--pri-soft);box-shadow:0 0 0 3px var(--pri-soft)} .sw .ic{font-size:22px;line-height:1} .sw strong{display:block;font-size:15px} .sw em{display:block;font-style:normal;font-size:13px;color:var(--mut);margin-top:3px} @media(max-width:640px){.switch2{grid-template-columns:1fr}} /* ----------------------------------------------- photos d'une annonce « L'aperçu de l'image, il faut que ce soit très professionnel » : photos plein cadre, coins arrondis, et agrandissement au clic. */ .gal{display:grid;gap:8px;margin:14px 0} .gal.g1{grid-template-columns:1fr} .gal.g2{grid-template-columns:1fr 1fr} .gal.g3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr} .gal.g3 :first-child{grid-row:span 2} .gal img{width:100%;height:100%;object-fit:cover;display:block;border-radius:13px; border:1px solid var(--line);background:var(--card2);cursor:zoom-in} .gal.g1 img{max-height:430px} .gal.g2 img{aspect-ratio:4/3} .gal.g3 img{aspect-ratio:auto;min-height:118px} .gal img:hover{filter:brightness(1.03)} @media(max-width:560px){ .gal.g3{grid-template-columns:1fr 1fr} .gal.g3 :first-child{grid-row:auto;grid-column:span 2} } /* Plein écran : fond sombre dans les deux thèmes, c'est le propre d'une visionneuse. */ .lbox{position:fixed;inset:0;z-index:200;background:rgba(6,10,20,.92);display:grid; place-items:center;padding:24px;cursor:zoom-out} .lbox img{max-width:100%;max-height:100%;border-radius:10px; box-shadow:0 20px 60px -20px rgba(0,0,0,.9)} .lbox .close{position:absolute;top:14px;right:16px;width:40px;height:40px;border-radius:50%; border:none;background:rgba(255,255,255,.14);color:#fff;font-size:20px;cursor:pointer} .lbox .close:hover{background:rgba(255,255,255,.26)} /* ----------------------------------------- reservation et calendrier « Apres le paiement il n'y a pas de reservation, pas de calendrier. » */ .bookcard{margin-top:14px;padding:16px;border-radius:16px;border:1px solid var(--line); background:linear-gradient(150deg,var(--grn-soft),var(--card) 60%);box-shadow:var(--shadow)} .bkwhen{font-size:19px;font-weight:800;margin:10px 0 6px;line-height:1.3} .bkphone{margin:8px 0 0;font-weight:700;color:var(--grn)} .bkform{margin-top:12px;border-top:1px solid var(--line);padding-top:10px} .slots{margin-top:6px} .slotday{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px;flex-wrap:wrap} .slotday .sd{min-width:150px;font-size:13px;font-weight:700;color:var(--mut)} .slotday .sl{display:flex;gap:6px;flex-wrap:wrap;flex:1} .slot{padding:7px 12px;border-radius:9px;border:1px solid var(--line2);background:var(--card); color:var(--ink);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer} .slot:hover{border-color:var(--pri);color:var(--pri)} @media(max-width:560px){ .slotday .sd{min-width:100%} } /* agenda dans Mon compte */ .days{display:grid;gap:8px;margin-top:12px} .dayrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .daylbl{display:flex;align-items:center;gap:8px;min-width:150px;margin:0;font-weight:700} .daylbl input{width:auto} .dayrow input[type=time]{max-width:130px} .bkform summary{cursor:pointer;font-weight:700;font-size:14px;color:var(--pri)} .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:16px} .caldow{text-align:center;font-size:11px;font-weight:800;letter-spacing:.08em; text-transform:uppercase;color:var(--mut2);padding-bottom:4px} .calcell{min-height:78px;border:1px solid var(--line);border-radius:10px;padding:5px; background:var(--card);display:flex;flex-direction:column;gap:3px} .calcell.out{border:none;background:none} .calcell.today{border-color:var(--pri);box-shadow:0 0 0 2px var(--pri-soft)} .calcell.has{background:var(--card2)} .caln{font-size:12px;font-weight:700;color:var(--mut)} .calev{display:block;font-size:10.5px;font-weight:700;padding:2px 5px;border-radius:6px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5} .calev:hover{text-decoration:none;filter:brightness(1.05)} @media(max-width:640px){ .calcell{min-height:52px;padding:3px} .calev{font-size:9px;padding:1px 3px} .caln{font-size:11px} } /* ------------------------------------------------------------- tarifs Le prix ecrit noir sur blanc : la page promettait « sans abonnement et sans commission » alors que le modele est payant pour les pros. */ .pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0} .pcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px} .pcard.hi{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-soft)} .pk{margin:0;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; color:var(--mut2)} .pp{margin:6px 0 8px;font-size:26px;font-weight:900;letter-spacing:-.5px} .pp span{font-size:14px;font-weight:700;color:var(--mut)} .pd{margin:0;font-size:13.5px;color:var(--mut);line-height:1.6} .plist{margin:8px 0 10px;padding-left:18px;font-size:13.5px;color:var(--mut)} .plist li{margin-bottom:5px} @media(max-width:860px){.pricing{grid-template-columns:1fr}} .stats{display:flex;flex-wrap:wrap;gap:14px;margin:10px 0 4px;font-size:13.5px;color:var(--mut)} .stats strong{color:var(--ink)} /* ------------------------------------------------------- profil public */ .mprofile{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap} .mprofile > form{flex:0 0 auto} @media(max-width:640px){ /* Le bouton « Contacter » écrasait la colonne du milieu : un mot par ligne. Sur téléphone on empile, et le bouton prend toute la largeur. */ .mprofile{gap:12px} .mprofile > div{flex:1 1 100%;min-width:0} .mprofile > form{flex:1 1 100%} .mprofile > form .btn{width:100%} .avatar.big{width:60px;height:60px;font-size:28px} } /* --------------------------------- barre d'actions d'une annonce (fil) « les boutons j'aime, partager et pouce, je les veux ici, l'un à côté de l'autre et adaptés au mobile, avec le nombre. » */ .fbar{display:flex;align-items:center;gap:6px;padding:8px 10px;border-top:1px solid var(--line)} .fbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:1 1 0; min-width:0;padding:9px 6px;border-radius:10px;border:1px solid transparent; background:none;color:var(--mut);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer} .fbtn:hover{background:var(--card2);color:var(--ink);text-decoration:none} .fbtn.on{color:var(--red)} .fbtn .n{font-variant-numeric:tabular-nums} .fbtn .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media(max-width:420px){ .fbtn .lbl{display:none} .fbtn{font-size:14px} } .grpcap{margin:14px 0 6px;font-size:11px;font-weight:800;letter-spacing:.12em; text-transform:uppercase;color:var(--mut2)} .mets{display:flex;flex-wrap:wrap;gap:6px;margin:7px 0 0} .mets span{font-size:12px;font-weight:700;color:var(--mut);background:var(--card2); border:1px solid var(--line);padding:3px 9px;border-radius:20px} /* ------------------------------------------------ assistant de publication Ce que le site a compris du besoin. Volontairement discret : c'est une proposition, pas une décision. Rien n'est appliqué sans un clic. */ .assist{border:1px solid var(--pri);background:var(--pri-soft);border-radius:14px; padding:14px 16px;margin:0 0 16px} .assist .ahead{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:15px} .assist .ax{margin-left:auto;background:none;border:0;color:var(--mut);cursor:pointer; font-size:16px;line-height:1;padding:2px 6px;border-radius:6px} .assist .ax:hover{background:var(--card2);color:var(--ink)} .assist p{margin:0 0 8px} .assist .arow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px} .assist .apill{display:inline-flex;align-items:center;gap:6px;background:var(--card); border:1px solid var(--line);border-radius:20px;padding:5px 12px;font-size:13.5px;font-weight:700} .assist .aq{margin:10px 0 0;padding-left:18px;font-size:14px;color:var(--mut)} .assist .aq li{margin-bottom:5px} .assist .aurg{display:inline-block;background:rgba(220,38,38,.12);color:var(--red); border-radius:20px;padding:4px 11px;font-size:12.5px;font-weight:800} .assist .aapply{margin-top:10px} @media(max-width:520px){ .assist{padding:12px} } /* ========================================================================= ACCUEIL EN DEUX COLONNES, ZONES SUR CARTE, BARRE DU BAS Refonte du 18/08 d'après la maquette du client. ========================================================================= */ /* --- bandeau visiteur */ .gbanner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; background:linear-gradient(135deg,var(--pri),var(--vio));color:#fff; border-radius:var(--radius);padding:18px 20px;margin-bottom:18px;box-shadow:var(--shadow)} .gbanner h2{margin:0 0 2px;font-size:20px;color:#fff} .gbanner p{margin:0;font-size:14.5px;opacity:.95} .gbanner .btn{background:#fff;color:var(--pri);border-color:#fff;font-weight:800;flex:0 0 auto} .hero.tight{padding-bottom:8px} /* --- la grille fil + colonne de droite */ .hlay{display:grid;grid-template-columns:1fr;gap:22px;margin:22px 0 28px} @media(min-width:1000px){ .hlay{grid-template-columns:minmax(0,1fr) 340px;align-items:start} .hside{position:sticky;top:88px} } .hmain{min-width:0} .hside{display:grid;gap:16px;align-content:start} /* --- recherche + pastilles au-dessus du fil */ .ffilter{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px; box-shadow:var(--shadow)} .fsearch{display:flex;align-items:center;gap:10px;background:var(--card2); border:1px solid var(--line);border-radius:12px;padding:8px 12px} .fsearch input{flex:1;min-width:0;border:0;background:transparent;outline:none; font-size:15px;color:var(--ink);padding:4px 0} .fchips{display:flex;gap:8px;overflow-x:auto;margin-top:12px;padding-bottom:4px; scrollbar-width:none;-webkit-overflow-scrolling:touch} .fchips::-webkit-scrollbar{display:none} .chip{flex:0 0 auto;padding:7px 13px;border-radius:999px;border:1px solid var(--line2); background:var(--card);color:var(--mut);font-size:13.5px;font-weight:700; text-decoration:none;white-space:nowrap} .chip:hover{border-color:var(--pri);color:var(--pri);text-decoration:none} .chip.on{background:var(--pri);border-color:var(--pri);color:var(--pri-ink)} /* --- la zone approximative sur une annonce */ .zbox{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card2)} .zhead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap; padding:7px 14px;font-size:12px;font-weight:700;color:var(--mut); border-bottom:1px solid var(--line);background:var(--card)} .zlock{color:var(--grn);font-weight:800} .zmap{height:132px;width:100%;background:var(--card2);z-index:0} .zmap .leaflet-control-attribution{font-size:9px;background:rgba(255,255,255,.7)} /* --- encart sponsorisé */ .fcard.spon{border-color:var(--amb);background:linear-gradient(180deg,var(--amb-soft),var(--card) 90px)} .sptag{position:absolute;top:12px;right:12px;background:var(--amb-soft);color:var(--amb); border:1px solid var(--amb);border-radius:999px;padding:2px 10px; font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase} .fcard.spon{position:relative} .fcard.spon .fhead{padding-right:110px} /* --- encart « publier » de la colonne de droite */ .qpub textarea{width:100%;border:1px solid var(--line2);border-radius:10px;padding:10px 12px; font:inherit;font-size:14.5px;color:var(--ink);background:var(--card2);resize:vertical; min-height:82px;outline:none} .qpub textarea:focus{border-color:var(--pri);background:var(--card)} .qhint{margin:9px 0 0;padding:8px 10px;border-radius:9px;background:var(--pri-soft); border:1px solid var(--line);font-size:13.5px;color:var(--ink)} .qh-ok{font-weight:800;color:var(--grn)} .qh-urg{font-weight:800;color:var(--amb)} .qrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px; padding:8px 10px;border-radius:10px;background:var(--card2);border:1px solid var(--line); font-size:14px;font-weight:700} .qrow input{width:82px;padding:5px 8px;border:1px solid var(--line2);border-radius:7px; text-align:right;font:inherit;font-weight:800;color:var(--ink);background:var(--card)} .pnotice{background:var(--amb-soft);border:1px solid var(--line);border-left:4px solid var(--amb); border-radius:12px;padding:14px;font-size:13.5px;color:var(--ink)} /* --- fenêtre « créez un compte » */ body.noscroll{overflow:hidden} .amodal{position:fixed;inset:0;z-index:3000;background:rgba(8,14,28,.68); display:flex;align-items:center;justify-content:center;padding:18px; -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} .amodal[hidden]{display:none} .amcard{position:relative;width:100%;max-width:400px;background:var(--card); border:1px solid var(--line);border-radius:18px;padding:26px 22px 20px;text-align:center; box-shadow:0 24px 60px -20px rgba(0,0,0,.6)} .amclose{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%; border:1px solid var(--line);background:var(--card2);color:var(--mut);cursor:pointer;font-size:14px} .amic{font-size:40px;line-height:1} .amcard h3{margin:6px 0 6px;font-size:20px} .amcard p{margin:0 0 16px;font-size:14.5px;color:var(--mut)} .amnote{margin:14px 0 0!important;font-size:12.5px!important;background:var(--card2); border:1px solid var(--line);border-radius:9px;padding:9px} /* --- barre du bas, téléphone uniquement */ .bnav{display:none} @media(max-width:900px){ .bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:900; background:var(--card);border-top:1px solid var(--line); padding:6px 0 calc(6px + env(safe-area-inset-bottom)); box-shadow:0 -6px 22px -12px rgba(0,0,0,.35)} .bnav-i{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px; font-size:10.5px;font-weight:700;color:var(--mut);text-decoration:none;padding:3px 0} .bnav-i span{font-size:19px;line-height:1;position:relative} .bnav-i.on{color:var(--pri)} .bnav-i:hover{text-decoration:none} .bdot{position:absolute;top:-1px;right:-5px;width:8px;height:8px;border-radius:50%; background:var(--red);border:1.5px solid var(--card)} body{padding-bottom:62px} } .spadm{margin-top:10px;padding:10px;border-radius:10px;background:var(--amb-soft); border:1px solid var(--line)} .spadm input,.spadm select{border:1px solid var(--line2);border-radius:7px; font:inherit;font-size:13.5px;background:var(--card);color:var(--ink)} /* La rangée de pastilles défile horizontalement : sans indice visuel, personne ne devine qu'il y a 17 catégories à droite du bord. */ .fchips{position:relative;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)} @media(max-width:640px){ .fsearch{flex-wrap:wrap} .fsearch input{flex:1 1 100%;order:-1} } /* ========================================================================= BANDEAU D'APERÇU, GALERIE DE PHOTOS, ÉQUIPE RECHERCHÉE (18/08) ========================================================================= */ /* Le rappel « vous voyez le site parce que vous avez le lien d'aperçu ». Sans lui, on croit que la page d'attente a disparu. */ .prevbar{background:var(--amb-soft);border-bottom:1px solid var(--amb); color:var(--ink);font-size:13.5px;padding:9px 16px;text-align:center} .prevbar a{color:var(--pri);font-weight:800;margin-left:6px;white-space:nowrap} .prevbar .tiny{color:var(--mut)} /* La bande de photos, façon maquette : ça défile au doigt. */ .gsec{padding:0 16px 12px;border-top:1px dashed var(--line);margin-top:2px;padding-top:12px} .gtit{display:flex;justify-content:space-between;align-items:center;gap:10px; margin:0 0 8px;font-size:12.5px;font-weight:800;color:var(--mut)} .gtit .gn{font-weight:700;color:var(--pri)} .gscroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none} .gscroll::-webkit-scrollbar{display:none} .gimg{flex:0 0 118px;height:90px;border-radius:10px;overflow:hidden; border:1px solid var(--line);display:block;background:var(--card2)} .gimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s} .gimg:hover img{transform:scale(1.05)} .gadd{flex:0 0 118px;height:90px;border:2px dashed var(--line2);border-radius:10px; background:var(--card2);color:var(--mut);display:flex;flex-direction:column; align-items:center;justify-content:center;gap:3px;font-size:20px;text-decoration:none} .gadd span{font-size:10.5px;font-weight:700;line-height:1.25;text-align:center} .gadd:hover{border-color:var(--pri);color:var(--pri);text-decoration:none} /* L'équipe recherchée, dans le fil */ .fcrew{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 16px 12px; padding:9px 12px;border-radius:11px;background:var(--pri-soft); border:1px solid var(--line);font-size:13.5px} .fcrew.full{background:var(--grn-soft)} .fcrew-n{font-weight:900;font-variant-numeric:tabular-nums;font-size:15px; background:var(--card);border:1px solid var(--line);border-radius:8px;padding:2px 8px} .fcrew-bar{flex:1 1 90px;min-width:70px;height:6px;border-radius:99px; background:var(--line);overflow:hidden} .fcrew-bar i{display:block;height:100%;background:var(--pri);border-radius:99px} .fcrew.full .fcrew-bar i{background:var(--grn)} /* ...et sur la page de l'annonce */ .crew{margin:16px 0;padding:16px;border-radius:14px;background:var(--pri-soft); border:1px solid var(--line)} .crew-head{display:flex;align-items:center;gap:14px} .crew-n{font-size:22px;font-weight:900;font-variant-numeric:tabular-nums; background:var(--card);border:1px solid var(--line);border-radius:12px; padding:8px 12px;white-space:nowrap} .crew-head p{margin:2px 0 0;font-size:14px;color:var(--mut)} .crew-bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:12px} .crew-bar i{display:block;height:100%;background:var(--pri);border-radius:99px} .crew-in{font-weight:800;color:var(--grn);margin:0 0 8px} .addph{margin:0 0 16px;padding:14px;border-radius:12px;background:var(--card2); border:1px dashed var(--line2)} .addph label{display:block;font-weight:700;font-size:14px;margin-bottom:8px} /* ========================================================================= PAGE DE DÉPÔT EN DEUX COLONNES, PHOTOS, PARTAGE, CŒUR (18/08) ========================================================================= */ /* --- la page de dépôt : questions à gauche, carte à droite */ .publay{display:grid;grid-template-columns:1fr;gap:20px;align-items:start;margin-top:16px} @media(min-width:1000px){ .publay{grid-template-columns:minmax(0,1fr) 380px} .pubside{position:sticky;top:88px} } .pubmain{min-width:0;margin:0} #mapPicker{height:300px;border-radius:12px;border:1px solid var(--line2);z-index:0; background:var(--card2)} @media(min-width:1000px){ #mapPicker{height:340px} } .geomsg{margin:9px 0 0;padding:8px 11px;border-radius:9px;font-size:13px;font-weight:600; background:var(--card2);border:1px solid var(--line);color:var(--mut)} .geomsg.ok{background:var(--grn-soft);border-color:var(--grn);color:var(--grn)} /* --- les cases photo, mêmes encadrés que sur l'accueil */ .phgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} @media(max-width:520px){ .phgrid{grid-template-columns:repeat(2,1fr)} } .phbox{position:relative;aspect-ratio:4/3;border:2px dashed var(--line2);border-radius:12px; background:var(--card2);display:flex;flex-direction:column;align-items:center; justify-content:center;gap:4px;cursor:pointer;overflow:hidden; transition:border-color .15s,background .15s,transform .15s} .phbox:hover{border-color:var(--pri);background:var(--pri-soft);transform:translateY(-1px)} .phbox .phin{position:absolute;inset:0;opacity:0;cursor:pointer} .phbox .phic{font-size:24px;line-height:1} .phbox .phlbl{font-size:11.5px;font-weight:800;color:var(--mut)} .phbox.pay{border-color:var(--amb);background:var(--amb-soft)} .phbox.pay:hover{border-color:var(--amb);background:var(--amb-soft)} .phtag{position:absolute;top:6px;right:6px;background:var(--amb);color:#fff; border-radius:99px;padding:1px 8px;font-size:10.5px;font-weight:800} .phbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .phbox.filled{border-style:solid;border-color:var(--grn)} /* Une fois l'image choisie, on l'efface d'aucun texte : « Photo 4 » écrit par-dessus une photo claire ne se lisait de toute façon pas. Un simple voyant vert en coin suffit à dire que la case est prise. */ .phbox.filled .phic,.phbox.filled .phlbl{display:none} .phbox.filled::after{content:'✓';position:absolute;bottom:6px;left:6px;z-index:1; width:22px;height:22px;border-radius:50%;background:var(--grn);color:#fff; display:grid;place-items:center;font-size:12px;font-weight:900; box-shadow:0 2px 6px rgba(0,0,0,.35)} /* --- le récapitulatif du prix, avant de valider */ .precap{display:flex;align-items:center;justify-content:space-between;gap:14px; margin:14px 0 18px;padding:13px 16px;border-radius:12px; background:var(--card2);border:1px solid var(--line)} .precap.due{background:var(--amb-soft);border-color:var(--amb)} .precap-l{display:flex;flex-direction:column;gap:2px;font-size:13.5px} .precap-l strong{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)} .precap-r{font-size:22px;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap} .precap.due .precap-r{color:var(--amb)} /* --- photo enregistrée mais pas encore réglée */ .gimg.owed{position:relative;flex:0 0 118px;height:90px;border-radius:10px;overflow:hidden; border:1px solid var(--amb);display:block} .gimg.owed img{filter:grayscale(.7) brightness(.75)} .owedtag{position:absolute;inset:0;display:grid;place-items:center;font-size:22px} /* --- le petit menu de partage */ .fbar,.actbar{position:relative} .shmenu{position:absolute;z-index:60;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%); background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px; box-shadow:0 18px 40px -18px rgba(0,0,0,.55);display:grid;gap:2px;min-width:190px} .shmenu a,.shmenu button{display:flex;align-items:center;gap:10px;padding:10px 12px; border:0;border-radius:10px;background:transparent;color:var(--ink);font:inherit; font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;width:100%;text-align:left} .shmenu a:hover,.shmenu button:hover{background:var(--card2);text-decoration:none} .shmenu a::first-letter{font-size:0} .shmenu .sh-fb,.shmenu .sh-wa,.shmenu .sh-cp{position:relative;padding-left:42px} .shmenu .sh-fb::before,.shmenu .sh-wa::before,.shmenu .sh-cp::before{ position:absolute;left:10px;top:50%;transform:translateY(-50%); width:24px;height:24px;border-radius:7px;display:grid;place-items:center; color:#fff;font-size:13px;font-weight:900} .shmenu .sh-fb::before{content:'f';background:#1877f2} .shmenu .sh-wa::before{content:'✆';background:#25d366} .shmenu .sh-cp::before{content:'🔗';background:var(--line2)} /* --- le cœur qui réagit tout de suite */ .fbtn.on{color:var(--red);font-weight:800} .fbtn.pop{animation:p02pop .32s ease} @keyframes p02pop{0%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:scale(1)}} /* ========================================================================= FINITION DES BOUTONS ET DES ENCADRÉS (« ajouter des couleurs sur les boutons, encadrement, arrondis, qu'il soit très joli », client 18/08) Trois principes, pour éviter le rendu « fait à la va-vite » : - le relief vient d'une OMBRE COLORÉE (teintée du bouton), pas d'un trait noir ; - le bouton s'enfonce vraiment au clic — un bouton qui ne bouge pas paraît mort ; - une seule couleur d'accent par écran : tout colorer, c'est ne rien mettre en avant. ========================================================================= */ .btn{ border-radius:12px; transition:transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, filter .18s ease; } .btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0) scale(.985)} .btn:focus-visible{outline:3px solid var(--pri-soft);outline-offset:2px} /* Le bouton principal : dégradé discret + halo de sa propre couleur. */ .btn.pri{ background:linear-gradient(180deg, color-mix(in srgb, var(--pri) 88%, white) 0%, var(--pri) 100%); box-shadow:0 1px 2px rgba(16,24,40,.10), 0 8px 18px -8px color-mix(in srgb, var(--pri) 65%, transparent); } .btn.pri:hover{ box-shadow:0 2px 4px rgba(16,24,40,.12), 0 12px 24px -8px color-mix(in srgb, var(--pri) 75%, transparent); } .btn.grn{ background:linear-gradient(180deg, color-mix(in srgb, var(--grn) 88%, white) 0%, var(--grn) 100%); box-shadow:0 1px 2px rgba(16,24,40,.10), 0 8px 18px -8px color-mix(in srgb, var(--grn) 60%, transparent); } .btn.red{ background:linear-gradient(180deg, color-mix(in srgb, var(--red) 88%, white) 0%, var(--red) 100%); border-color:var(--red);color:#fff; box-shadow:0 1px 2px rgba(16,24,40,.10), 0 8px 18px -8px color-mix(in srgb, var(--red) 60%, transparent); } /* Le bouton neutre reste neutre, mais il se teinte au survol : on voit qu'il vit. */ .btn:not(.pri):not(.grn):not(.red):hover{ border-color:var(--pri);color:var(--pri);background:var(--pri-soft) } /* Les encadrés : le liseré vient d'une ombre, pas d'un trait dur — c'est ce qui sépare une interface soignée d'une grille de rectangles. */ .card{border-radius:16px} .card:hover{box-shadow:0 1px 2px rgba(16,24,40,.05), 0 14px 34px -18px rgba(16,24,40,.30)} .fcard{transition:transform .15s ease, box-shadow .2s ease, border-color .15s ease} .fcard:hover{transform:translateY(-2px); box-shadow:0 2px 4px rgba(16,24,40,.06), 0 18px 40px -20px rgba(16,24,40,.38)} /* Les boutons du bas d'annonce : un fond au survol plutôt qu'un simple changement de couleur de texte, on sait où l'on clique. */ .fbtn{border-radius:10px;transition:background .15s ease, color .15s ease} .fbtn:hover{background:var(--pri-soft);color:var(--pri)} .fbtn.on:hover{background:var(--red-soft);color:var(--red)} /* Les pastilles de catégorie, un cran plus vivantes au survol. */ .chip{transition:transform .12s ease, border-color .15s ease, background .15s ease, color .15s ease} .chip:hover{transform:translateY(-1px)} .chip.on{box-shadow:0 6px 14px -6px color-mix(in srgb, var(--pri) 70%, transparent)} /* Un navigateur qui ne connaît pas color-mix ignore les règles ci-dessus et garde les aplats précédents : rien ne casse, c'est juste moins joli. */ @media (prefers-reduced-motion: reduce){ .btn,.fcard,.chip{transition:none} .btn:hover,.fcard:hover,.chip:hover{transform:none} } /* ========================================================================= ALIGNEMENT DES CHAMPS DANS UNE RANGÉE (capture du client, 18/08) Le problème : dans une rangée à deux ou trois colonnes, les intitulés n'ont pas tous le même nombre de lignes. « Surface du logement (m²) » passe sur deux lignes quand « Prestation » tient sur une : son champ descendait d'une ligne et la rangée partait en escalier. La solution ne fixe AUCUNE hauteur en dur — elle ne casserait pas de la même façon selon la taille de police du visiteur. Chaque champ occupe toute la hauteur de sa rangée, et sa case est poussée en bas : quelle que soit la longueur de l'intitulé, les cases d'une même rangée sont sur la même ligne. ========================================================================= */ @media (min-width:861px){ .grid.c2, .grid.c3{align-items:stretch} .grid.c2 > .field, .grid.c3 > .field{ display:flex;flex-direction:column;margin-bottom:0} /* C'est l'INTITULÉ qui absorbe la place libre, texte collé en bas — et non la case qui est poussée vers le bas. La différence compte : un champ suivi d'une explication (« il en reste 2… ») verrait sinon sa case remonter de la hauteur de cette explication, et la rangée redeviendrait bancale. Mesuré : 41 px d'écart avec l'autre méthode, 0 avec celle-ci. */ .grid.c2 > .field > label, .grid.c3 > .field > label{ flex:1 1 auto;display:flex;align-items:flex-end} /* ...et les explications sous les cases réservent la même hauteur d'une colonne à l'autre. Sans ça, une explication sur deux lignes à côté d'une sur une seule ligne rendait la place libre à l'intitulé voisin, qui repoussait SA case vers le bas : 42 px d'écart, mesurés. */ /* 3em, pas 2,7 : deux lignes d'explication mesurent 37,7 px et 2,7em n'en fait que 35,1 — il restait 3 px d'écart, invisibles à l'œil mais le signe que la règle ne tenait que par chance. */ .grid.c2 > .field > .hint, .grid.c3 > .field > .hint{min-height:3em} /* Et le cas inverse, tout aussi fréquent : UN champ porte une explication, ses voisins n'en ont pas. Sans compensation, ce sont EUX qui descendent de la hauteur de l'explication (40 px mesurés sur /demandes, /mon-compte et /inscription). On réserve donc la même place aux voisins — mais uniquement dans une rangée qui contient réellement une explication, sinon on ajouterait du vide sous tous les formulaires du site. */ .grid.c2:has(.hint) > .field:not(:has(.hint))::after, .grid.c3:has(.hint) > .field:not(:has(.hint))::after{ /* font-size REPRIS de .hint : sans lui, « 3em » se calcule sur les 16 px du champ (48 px) au lieu des 13 px de l'explication (39 px), et le vide dépassait de 9 px — l'écart repartait dans l'autre sens. */ content:'';display:block;font-size:13px;min-height:3em;margin-top:5px} /* Un intitulé ne doit pas être coupé au milieu d'un mot ni finir seul sur sa ligne : on garde le dernier mot avec le précédent. */ .grid.c2 > .field > label, .grid.c3 > .field > label{text-wrap:balance} } /* Sur téléphone, tout est déjà sur une colonne : il reste à donner le MÊME rythme vertical à tous les champs, sinon la page paraît bancale même alignée à gauche. */ @media (max-width:860px){ .grid{gap:0} .grid > .field{margin-bottom:16px} .grid > .field:last-child{margin-bottom:0} } /* Les champs courts (budget, code postal, prix) n'ont pas besoin de toute la largeur : au-delà, la case paraît vide et l'œil ne sait plus quoi y mettre. Mais ils restent alignés à gauche sur les autres, jamais centrés. */ .field.short input{max-width:340px} @media (max-width:640px){ .field.short input{max-width:none} } /* L'encart « il faut un abonnement pour répondre » (règle du 18/08). Il remplace le formulaire, il ne le cache pas : un champ qui disparaît sans un mot passe pour un site cassé, et la personne s'en va. */ .needsub{display:flex;gap:14px;align-items:flex-start;margin-top:16px;padding:16px; border-radius:14px;background:var(--amb-soft);border:1px solid var(--amb)} .ns-ic{font-size:26px;line-height:1;flex:0 0 auto} .ns-body{min-width:0;flex:1} .ns-body strong{display:block;font-size:16px;margin-bottom:4px} .ns-body p{margin:0 0 10px;font-size:14px;color:var(--ink)} .ns-more{color:var(--mut)!important;font-size:13px!important} @media(max-width:520px){ .needsub{flex-direction:column;gap:10px} } /* L'affiche partageable, en bas de l'accueil. */ .affiche{margin:28px 0;border-radius:16px;overflow:hidden;border:1px solid var(--line); box-shadow:var(--shadow);background:var(--card)} .affiche img{display:block;width:100%;height:auto} .af-cta{display:flex;align-items:center;justify-content:space-between;gap:14px; flex-wrap:wrap;padding:14px 16px;border-top:1px solid var(--line);position:relative} .af-cta strong{font-size:15px} /* ========================================================================= BANDEAU « INSTALLER L'APPLICATION » (PWA, 18/08) Posé au-dessus de la barre du bas sur téléphone, pour ne pas la recouvrir. ========================================================================= */ .pwabar{position:fixed;left:12px;right:12px;bottom:12px;z-index:1200; display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px 12px; align-items:start;padding:13px 14px; background:var(--card);border:1px solid var(--line2);border-radius:16px; box-shadow:0 18px 44px -18px rgba(0,0,0,.5)} .pwabar[hidden]{display:none} @media(max-width:900px){ .pwabar{bottom:74px} } /* au-dessus de la barre du bas */ @media(min-width:700px){ .pwabar{left:auto;right:16px;max-width:430px} } .pw-ic{grid-column:1;grid-row:1;font-size:26px;line-height:1.2} .pw-txt{grid-column:2;grid-row:1;min-width:0;display:flex;flex-direction:column;gap:2px} .pw-txt strong{font-size:14.5px;line-height:1.3} .pw-x{grid-column:3;grid-row:1;width:28px;height:28px;border-radius:50%; border:1px solid var(--line);background:var(--card2);color:var(--mut); cursor:pointer;font-size:12px} /* Le bouton et le mode d'emploi prennent TOUTE la largeur : c'est ce qui empêche la colonne de texte d'être écrasée sur un petit écran. */ .pw-go{grid-column:1/-1;grid-row:2;width:100%} .pw-ios{grid-column:1/-1;grid-row:3;padding:10px 12px;border-radius:10px; background:var(--card2);border:1px solid var(--line); font-size:12.5px;line-height:1.55;color:var(--mut)} .pw-ios[hidden]{display:none} /* Le pied d'une carte de service : la pastille ne peut plus mordre sur la ville. (client, 19/09, capture a l'appui) Je n'ai PAS reussi a reproduire le chevauchement : sur ma machine, a toutes les largeurs de 430 a 1920 px, il reste 18 pixels entre la pastille et la ville. Mais 18 pixels, c'est de la chance, pas une regle : « Particulier · propose ses services » est un libelle long, et les memes caracteres sont plus larges de 10 a 15 % sur un Mac que dans mon navigateur de test. Chez lui, ca se touche. On supprime donc la dependance a la chance : la pastille se coupe avec des points de suspension si elle manque de place, et la ville garde la sienne. */ .swho{max-width:100%} .swho .badge{ max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; display:inline-block;vertical-align:bottom; } .sfoot .tiny{flex:0 0 auto;white-space:nowrap}