#creche-search { margin: 10px 0 16px; } #creche-search form { display:flex; gap:8px; } #creche-search input { flex:1; padding:10px 12px; border:1px solid #ddd; border-radius:999px; } #creche-search .btn { padding:10px 14px; border-radius:999px; border:1px solid #ddd; background:#fff; cursor:pointer; } #creche-search .btn.alt { background:#f6f6f6; } #creche-map-wrap { display:grid; grid-template-columns: 2fr 1fr; gap:16px; align-items:start; } #creche-map { width:100%; height:650px; border-radius:16px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.06); } #creche-closest .closest { display:flex; gap:12px; padding:12px; border:1px solid #eee; border-radius:16px; background:#fff; } #creche-closest img { width:96px; height:96px; object-fit:cover; border-radius:12px; } #creche-closest .dist { font-weight:600; margin:4px 0; } #creche-list { margin-top:18px; } #creche-list .cards { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:14px; } #creche-list .card { display:flex; gap:10px; padding:12px; border:1px solid #eee; border-radius:16px; background:#fff; } #creche-list .card img { width:120px; height:100px; object-fit:cover; border-radius:12px; } #creche-list .card .dist { font-weight:600; margin:2px 0 6px; } #creche-list h3, #creche-closest h3 { margin:10px 0; } .leaflet-popup-content h4 { margin: 6px 0; } .leaflet-popup-content img { width:100%; max-width:240px; border-radius:8px; margin-bottom:6px; } @media (max-width: 900px) { #creche-map-wrap { grid-template-columns: 1fr; } } /* Image thumbnail */ .card .thumb img { width: 140px; height: 110px; object-fit: cover; border-radius: 18px; box-shadow: 0 4px 12px rgba(0,0,0,.08); } .card.closest .thumb img { width: 110px; height: 110px; border-radius: 20px; } /* Mise en forme carte et liste */ .card { display: flex; align-items: flex-start; gap: 14px; padding: 14px; border: 1px solid #f1eef3; border-radius: 22px; background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.06); } .card .content { flex: 1; } .card h4 { margin: 0 0 6px; } .card .addr { margin-top: 4px; color: #666; } .card .meta { font-size: 14px; color: #777; margin-top: 4px; } /* ===== Cadre blanc + rubans sur la carte, SANS toucher l'intérieur ===== */ #creche-map { position: relative; /* nécessaire pour les ::before/::after */ border-radius: 26px; /* coins arrondis du cadre */ /* Bordure blanche via spread-shadow (n'affecte pas la taille) */ box-shadow: 0 0 0 1px #DA6B5E, /* <-- bordure blanche visible */ 0 10px 28px; /* ombre pour l'effet "papier" */ overflow: hidden; /* on garde les tuiles bien découpées aux coins */ } /* Ruban marron en haut à gauche */ #creche-map::before, #creche-map::after { content: ""; position: absolute; width: 100px; /* longueur du ruban */ height: 7px; /* épaisseur du ruban */ background: #8c5c3a; /* marron kraft */ border-radius: 3px; box-shadow: 0 2px 6px #FF7F50; pointer-events: none; /* ne bloque pas les clics sur la carte */ z-index: 800; /* au-dessus des tuiles, sous les popups */ } /* haut-gauche */ #creche-map::before { top: 8px; left: -18px; /* déborde légèrement sur le cadre */ transform: rotate(-50deg); } /* bas-droit */ #creche-map::after{ bottom: 8px; right: -18px; transform: rotate(130deg); } /* (facultatif) zoom controls un peu décollés du bord pour ne pas toucher les rubans */ .leaflet-control-container .leaflet-top.leaflet-left { margin-top: 8px; margin-left: 8px; } /* ====== Barre de recherche ====== */ #creche-search { margin: 10px 0 16px; } #creche-search form { display:flex; flex-wrap: wrap; gap:10px; align-items:center; } /* Champ avec bouton X intégré */ #creche-search .input-wrap{ position: relative; flex: 1 1 420px; max-width: 720px; } #creche-search #creche-query{ width:100%; padding:12px 42px 12px 14px; border:1px solid #DA6B5F; border-radius:999px; background:#fff; } #creche-search .clear-btn{ position:absolute; right:8px; top:50%; transform:translateY(-50%); border:1px solid #e5e5e5; background:#fff; cursor:pointer; opacity:.0; pointer-events:none; transition:opacity .15s ease; font-size:16px; line-height:26px; text-align:center; } #creche-search .clear-btn.visible{ opacity:1; pointer-events:auto; } #creche-search .btn { padding:10px 14px; border-radius:999px; border:1px solid #ddd; background:#fff; cursor:pointer; } #creche-search .btn.alt { background:#f6f6f6; } /* Groupe géoloc + rayon */ #creche-search .geo-group{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } #creche-search .radius-label{ color:#666; } #creche-search .radius{ width:90px; padding:10px 10px; border:1px solid #DA6B5F; border-radius:999px; text-align:center; } #creche-search .radius-unit{ color:#777; } /* ====== Carte plein largeur ====== */ #creche-map-wrap { display:block; } #creche-map { width:100%; height:500px; border-radius:26px; overflow:hidden; box-shadow: 0 0 0 1px #fff, 0 10px 28px rgba(0,0,0,.12); position: relative; } /* ====== Liste avec animation slide ====== */ #creche-list { margin-top:18px; } #creche-list .cards{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:14px; transform: translateY(0); opacity:1; } #creche-list .cards.slide-in{ animation: slideIn .35s ease both; } @keyframes slideIn{ from{ transform: translateY(14px); opacity: .0; } to{ transform: translateY(0); opacity: 1; } } /* Cartes */ #creche-list .card { display:flex; gap:10px; padding:12px; border:1px solid #eee; border-radius:16px; background:#fff; } #creche-list .card img { width:120px; height:100px; object-fit:cover; border-radius:12px; } #creche-list .card .dist { font-weight:600; margin:2px 0 6px; } #creche-list h3{ margin:10px 0; } /* Rubans existants (si gardés) */ #creche-map::before, #creche-map::after{ /* gardés tels que dans ta version, ou ajuste tes valeurs */ } /* CTRL + molette feedback */ #creche-map.ctrl-zoom-active { cursor: zoom-in; } #creche-map.ctrl-hint { outline: 3px dashed rgba(200, 80, 0, 0.5); outline-offset: -3px; transition: outline 0.3s ease; } @media (max-width: 900px) { #creche-search .input-wrap{ flex: 1 1 100%; } #creche-search .geo-group{ width:100%; } } /* Sticky bar de recherche */ #creche-search { position: sticky; top: 12px; z-index: 1000; backdrop-filter: blur(6px); } /* Carte/list sync : carte active + pulse sur marker le plus proche */ #creche-list .card.active { outline: 2px solid #ffb8a8; box-shadow: 0 10px 26px rgba(255,120,90,.2); } .leaflet-marker-icon.pulse .mk { position: relative; } .leaflet-marker-icon.pulse .mk::after{ content:""; position:absolute; inset:-6px; border-radius:50%; box-shadow:0 0 0 0 rgba(255,120,90,.45); animation:pulse 1.6s ease-out infinite; } @keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(255,120,90,.45); } 70% { box-shadow:0 0 0 18px rgba(255,120,90,0); } 100% { box-shadow:0 0 0 0 rgba(255,120,90,0); } } /* État vide dans la liste */ #creche-list .empty{ grid-column: 1 / -1; padding:18px; border:1px dashed #e5c7bf; border-radius:14px; background:#fffdfa; color:#7b5a53; } /* ===== Top 4 proches sous la carte ===== */ #creche-top4.hidden { display:none; } #creche-top4 { margin: 18px 0 6px; } #creche-top4 h3 { margin: 0 0 12px; } #creche-top4 .top-cards{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .top-card{ display:block; background:#fff; border-radius:22px; padding:10px; text-decoration:none; color:#333; border:2px solid rgba(0,0,0,.06); box-shadow: 0 10px 20px rgba(0,0,0,.06); transition: transform .15s ease, box-shadow .15s ease; } .top-card:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,.09); } .top-card .img{ width:100%; height:160px; border-radius:18px; overflow:hidden; margin-bottom:10px; border:4px solid transparent; } .top-card .img img{ width:100%; height:100%; object-fit:cover; } /* Bordures colorées comme la maquette (rouge/jaune/bleu/rouille) */ .top-card.color-1 .img{ border-color:#e95f64; } .top-card.color-2 .img{ border-color:#f1be3a; } .top-card.color-3 .img{ border-color:#6ec3e6; } .top-card.color-4 .img{ border-color:#c67b5a; } .top-card .title{ font-weight:700; margin-bottom:4px; line-height:1.2; } .top-card .addr{ color:#666; font-size:14px; } .top-card .city{ color:#888; font-size:13px; margin-top:2px; } .top-card .infos{ display:flex; flex-wrap:wrap; gap:8px 12px; font-size:13px; color:#555; margin-top:8px; } /* Responsive */ @media (max-width: 1100px){ #creche-top4 .top-cards{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px){ #creche-top4 .top-cards{ grid-template-columns: 1fr; } .top-card .img{ height:180px; } } /* ====== Bouton X à l'intérieur du champ ====== */ .input-wrap { position: relative; } .clear-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: transparent; font-size: 20px; color: #b37b68; /* marron clair assorti au thème */ cursor: pointer; opacity: 0; transition: opacity .2s ease; } #creche-query:not(:placeholder-shown) + .clear-btn { opacity: 1; } .clear-btn:hover { color: #d35f4f; /* un peu plus vif au survol */ }