/* ========================================================================== Smilo — Annuaire public · feuille de style partagée (directory.css) Look premium repris du template, couleur de marque Smilo (#ff6e16). Chargée par dentiste.html et (à venir) les fiches générées. Fonts chargées dans le : Inter (UI) + Newsreader (titres serif). ========================================================================== */ :root{ /* Couleur de marque Smilo — cohérente avec booking / fiches / app */ --primary:#ff6e16; --primary-dark:#e55a00; --primary-soft:#fff1e8; /* Structure premium (repris du template) */ --ink:#20232a; --muted:#4c545c; --muted2:#686c72; --paper:#fffdfb; --cream:#fff8f3; --card:#ffffff; --line:#eae6e2; --line-strong:#ddd7cf; --surface:#f5f3f1; --ok:#0f7a4f; --ok-soft:#e9f7f1; --font:'Roboto',system-ui,-apple-system,Segoe UI,Arial,sans-serif; --serif:'Roboto',system-ui,-apple-system,Segoe UI,Arial,sans-serif; --shadow-sm:0 10px 28px rgba(37,30,24,.055); --shadow-md:0 20px 50px rgba(37,30,24,.09); --shadow-lg:0 30px 78px rgba(37,30,24,.13); --r-sm:12px; --r-md:18px; --r-lg:26px; } *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:84px} html,body{overflow-x:clip;max-width:100%} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font); line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit} button{cursor:pointer} img{max-width:100%;display:block} .benefit-icon svg,.cta-button svg,.text-link svg,.secondary-button svg,.step-icon svg,.clinic-icon svg, .floating-note .note-icon svg,.verified-pill svg,.showcase-cta svg,.f-dd-car svg,.language-trigger svg, .language-menu svg,.back svg,.cinfo svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .section-wrap{width:min(1180px,calc(100% - 44px));margin:0 auto} /* ---------- Header ---------- */ .site-header{position:sticky;top:0;z-index:40;padding:16px 0;background:rgba(255,253,251,.72); backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid rgba(234,230,226,.7)} .nav-wrap{width:min(1180px,calc(100% - 44px));margin:0 auto;display:grid; grid-template-columns:auto 1fr auto;align-items:center;gap:32px} .brand img{height:40px;width:auto} .main-nav{display:flex;justify-content:center;gap:30px} .main-nav a{position:relative;font-size:.86rem;font-weight:600;color:#556} .main-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:2px; background:var(--primary);transition:right .25s ease} .main-nav a:hover{color:var(--ink)} .main-nav a:hover::after{right:0} .nav-actions{display:flex;align-items:center;gap:12px} .nav-actions .pro{font-size:.82rem;font-weight:600;color:var(--muted);white-space:nowrap; padding:8px 14px;border:1px solid var(--line);border-radius:999px;transition:.18s} .nav-actions .pro:hover{border-color:var(--primary);color:var(--primary)} /* ---------- Hero ---------- */ .hero{position:relative;overflow:visible; background:linear-gradient(135deg,#fffaf6 0%,#fff 54%,#fff5ec 100%); border-bottom:1px solid var(--line);padding:44px 0 46px} .hero::before{content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(rgba(35,35,35,.022) 1px,transparent 1px), linear-gradient(90deg,rgba(35,35,35,.022) 1px,transparent 1px); background-size:42px 42px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 82%)} .hero-glow{position:absolute;border-radius:50%;pointer-events:none;opacity:.45} .hero-glow-one{width:420px;height:420px;right:-130px;top:-40px; background:radial-gradient(circle,#ffe1cd 0%,rgba(255,225,205,.12) 58%,transparent 70%)} .hero-glow-two{width:320px;height:320px;left:-160px;bottom:-60px; background:radial-gradient(circle,#fff0e6 0%,rgba(255,240,231,.1) 58%,transparent 72%)} .hero-clip{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .hero-grid{position:relative;z-index:2;width:min(1260px,calc(100% - 44px));margin:0 auto; display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,0.7fr);gap:40px;align-items:center} .eyebrow{display:flex;align-items:center;gap:10px;color:var(--primary-dark); font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase} .eyebrow>span:first-child{width:26px;height:1px;background:var(--primary)} .hero h1{font-family:var(--serif);font-weight:550;letter-spacing:-.02em; font-size:clamp(1.9rem,3.4vw,3.0rem);line-height:1.07;margin:16px 0 18px} .hero h1 em{font-style:italic;color:var(--primary)} .hero .sub{max-width:56ch;margin:0 0 26px;color:var(--muted);font-size:1.06rem;line-height:1.65} /* Search panel (contrôles réels : #city + #go + #ac) */ .search{position:relative;display:flex;align-items:center;gap:6px;max-width:600px;padding:6px; background:#fff;border:1px solid #efe3d8;border-radius:16px;box-shadow:var(--shadow-md)} .search .fld{flex:1;display:flex;align-items:center;gap:11px;padding:8px 8px 8px 16px;min-width:0} .search .fld svg{flex:none;color:var(--primary)} .search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink); font-size:1rem;font-weight:600} .search input::placeholder{color:#6b7280;font-weight:400} .search #go{border:0;border-radius:12px;background:linear-gradient(135deg,var(--primary),#ff8a45); color:#fff;font-weight:800;font-size:.92rem;padding:0 28px;white-space:nowrap; align-self:center;height:44px;line-height:44px;box-shadow:0 8px 18px rgba(255,110,22,.24);transition:.2s} .search #go:hover{transform:translateY(-1px);box-shadow:0 16px 30px rgba(255,110,22,.3)} /* Autocomplete */ .ac{position:absolute;top:calc(100% + 10px);left:0;right:0;background:#fff; border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-lg); overflow:hidden;z-index:50;display:none;text-align:left} .ac.open{display:block} .ac-item{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:12px 18px;cursor:pointer;font-size:.96rem;border-bottom:1px solid var(--line)} .ac-item:last-child{border-bottom:0} .ac-item:hover{background:var(--primary-soft)} .ac-main{display:flex;align-items:baseline;gap:8px;min-width:0;overflow:hidden; white-space:nowrap;text-overflow:ellipsis} .ac-hint{color:var(--muted2);font-size:.82rem} /* Filters */ .filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px;max-width:820px} .filters .f-sel{font-size:.82rem;font-weight:600;padding:8px 12px;border:1px solid var(--line); border-radius:999px;background:#fff;color:var(--muted);cursor:pointer;transition:.18s} .filters .f-sel:hover{border-color:var(--line-strong)} .filters .f-chk{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600; color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px; padding:7px 11px;cursor:pointer;user-select:none;white-space:nowrap;transition:.18s} .filters .f-chk:hover{border-color:#ffccae} .filters .f-chk input{accent-color:var(--primary);cursor:pointer} .filters .f-near{font-size:.8rem;font-weight:700;padding:8px 13px;border:1px solid var(--primary); border-radius:999px;background:var(--primary-soft);color:var(--primary-dark);transition:.18s} .filters .f-near.on{background:var(--primary);color:#fff} .filters .f-clear{font-size:.82rem;color:var(--muted2);background:none;border:0;cursor:pointer; text-decoration:underline;padding:6px 8px} .filters .f-clear:hover{color:var(--primary)} /* Trust row */ .trust-row{display:flex;align-items:center;gap:20px;margin-top:26px} .trust-item{display:flex;flex-direction:column;gap:1px} .trust-item strong{font-size:.9rem} .trust-item span{font-size:.72rem;color:var(--muted2)} .trust-sep{width:1px;height:28px;background:var(--line)} /* Hero showcase premium — fiche personne (repris du template) */ .hero-showcase{position:relative;padding:34px 26px 38px;margin-left:auto;width:100%} .hero-showcase::before{content:"";position:absolute;inset:0 0 0 18px; background:linear-gradient(145deg,#fff0e6,#ffd9c0); border-radius:42% 58% 48% 52% / 48% 45% 55% 52%;transform:rotate(-3deg)} .showcase-card{display:block;color:inherit;text-decoration:none;position:relative;z-index:2;padding:24px;background:#fff;border:1px solid #e2cdb9; border-radius:26px;box-shadow:var(--shadow-lg);transform:rotate(1.2deg)} .showcase-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px} .showcase-label{font-size:10px;color:#858c95;font-weight:800;text-transform:uppercase;letter-spacing:.09em} .verified-pill{padding:3px 10px;border-radius:999px;background:#e6f4ec;color:#087f4d;border:1px solid #c6e4d0;font-size:.72rem;font-weight:800; display:flex;align-items:center;gap:4px;font-size:9px;font-weight:800} .verified-pill svg{width:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .showcase-profile{display:flex;align-items:flex-start;gap:15px;padding-bottom:18px;border-bottom:1px solid var(--line)} .showcase-profile>div:last-child{min-width:0;flex:1 1 auto} .showcase-profile .profile-avatar{margin-top:0} .profile-avatar{flex:none;width:66px;height:66px;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:transparent;color:#fff;font-weight:800;font-size:1.15rem} .profile-avatar.no-photo{background:linear-gradient(145deg,#ffd7bd,var(--primary))} .profile-avatar img{width:66px;height:66px;border-radius:14px;object-fit:contain;object-position:center;background:transparent;display:block} .showcase-profile h2{margin:0 0 4px;font-size:18px;font-family:var(--serif);font-weight:600} .showcase-profile p{margin:-2px 0 0;color:#7b838d;font-size:12px} .showcase-profile .rating{display:flex;align-items:center;gap:5px;font-size:12px} .showcase-profile .rating>span{color:#ff9a4a;letter-spacing:1px} .showcase-profile .rating strong{color:var(--ink)} .showcase-profile .rating small{color:#9aa0a7} .showcase-clinic{display:flex;align-items:center;gap:12px;padding:15px 0} .clinic-icon{flex:none;width:44px;height:44px;border-radius:12px;background:var(--primary-soft);color:var(--primary); display:grid;place-items:center} .clinic-icon svg{width:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} .showcase-clinic div{display:flex;flex-direction:column;gap:3px} .showcase-clinic strong{font-size:14px;color:#2b3138;font-weight:700;letter-spacing:-.01em} .showcase-clinic small{font-size:11px;color:#8c939b} .availability-label{font-size:9px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:#90969d;margin-bottom:9px} .slots{display:grid;grid-template-columns:repeat(3,1fr);gap:7px} .slots>*{padding:9px 4px;border:1px solid #f0e8e3;border-radius:10px;background:#fffaf7;text-decoration:none; display:flex;flex-direction:column;gap:2px;color:#777f88;cursor:pointer;transition:.18s} .slots>*:hover{border-color:#ffb98e;background:#fff3eb} .slots>* span{font-size:8px;color:#777f88} .slots>* strong{font-size:12px;color:var(--ink)} .showcase-cta{width:100%;height:44px;margin-top:13px;border:0;border-radius:11px;background:var(--ink);color:#fff; display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:800;cursor:pointer;transition:.2s} .showcase-cta:hover{transform:translateY(-1px);box-shadow:0 16px 28px rgba(255,110,22,.23)} .showcase-cta svg{width:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .floating-note{position:absolute;z-index:4;padding:11px 13px;display:flex;align-items:center;gap:9px; background:#fff;border:1px solid rgba(235,230,226,.9);border-radius:15px;box-shadow:var(--shadow-md)} .floating-note .note-icon{flex:none;width:31px;height:31px;border-radius:10px;display:grid;place-items:center; background:var(--primary-soft);color:var(--primary)} .floating-note .note-icon.note-check{background:var(--ok-soft);color:var(--ok)} .floating-note .note-icon svg{width:15px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} .floating-note div{display:flex;flex-direction:column;gap:2px} .floating-note strong{font-size:10px} .floating-note small{font-size:8px;color:#8e949b} .note-one{left:auto;right:-72px;top:240px;transform:rotate(2deg)} .note-two{right:-60px;bottom:118px;transform:rotate(2deg)} /* ---------- Results (map split + list) ---------- */ .results-section{padding:26px 0 44px;background:var(--paper)} .directory-shell{border:1px solid #f0cfb5;border-top:0;border-radius:0 0 16px 16px;background:#fff; box-shadow:0 8px 22px rgba(45,35,29,.06);overflow:hidden} .directory-content{display:grid;grid-template-columns:420px minmax(0,1fr);align-items:stretch} .directory-content.no-map{grid-template-columns:1fr} .map-panel{position:sticky;top:88px;align-self:start;height:calc(100vh - 150px);min-height:560px; display:flex;padding:16px;background:#fff;border-right:1px solid var(--line)} .directory-content.no-map .map-panel{display:none} #map{flex:1;height:100%;min-height:100%;border-radius:20px;overflow:hidden; border:1px solid var(--line);z-index:0;display:none} #map .leaflet-popup-content{font-family:var(--font)} #map .leaflet-popup-content a{color:var(--primary);font-weight:600} .results-column{padding:20px 8px 20px 18px;min-width:0;max-height:calc(100vh - 150px);min-height:560px;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;scroll-behavior:smooth} .count{font-family:var(--font);font-size:.76rem;font-weight:700;letter-spacing:.04em; text-transform:uppercase;color:#556069;margin:0 0 14px} .state{padding:64px 20px;text-align:center;color:var(--muted2)} .spin{width:26px;height:26px;border:3px solid var(--surface);border-top-color:var(--primary); border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 14px} @keyframes spin{to{transform:rotate(360deg)}} /* Practitioner card (.pcard — mode praticiens, réellement utilisé) */ .pcard{position:relative;overflow:hidden;display:grid;grid-template-columns:66px minmax(0,1fr) auto;gap:13px; align-items:start;background:#fff;border:1px solid var(--line);border-radius:16px;cursor:pointer; padding:6px 15px;margin-bottom:7px;transition:border .2s ease,box-shadow .2s ease,transform .2s ease} .pcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px; background:linear-gradient(180deg,#e8a5a0,#f3ccc8);opacity:1;transition:opacity .22s ease,background .22s ease} .pcard:hover,.pcard.is-linked{transform:translateY(-2px);border-color:#e5cdb9;box-shadow:0 14px 34px rgba(35,25,18,.08)} .pcard:hover::before,.pcard.is-linked::before{opacity:1;background:linear-gradient(180deg,var(--primary),#ffb279)} .pcard.is-conventioned{border-color:#cfe5d6;background:linear-gradient(180deg,#fcfffd,#fff)} .pcard.is-conventioned::before{background:linear-gradient(180deg,#1fa56f,#7cd8aa);opacity:1} .pc-ava{width:66px;height:66px;border-radius:14px;object-fit:contain;object-position:center;background:transparent} .pc-ava-ph{width:66px;height:66px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#ffd7bd,var(--primary)); color:#fff;font-weight:800;font-size:1.25rem;border:none} .pcard:hover .pc-ava,.pcard.is-linked .pc-ava{transform:translateY(-2px) scale(1.02)} .pc-main{min-width:0} .card-topline{display:flex;align-items:center;flex-wrap:wrap;gap:10px} .pc-name{font-family:var(--serif);font-size:1.18rem;font-weight:600;color:var(--ink);letter-spacing:-.015em;line-height:1.1} .pc-name:hover{color:var(--primary)} .card-verified{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px; background:#e6f4ec;color:#087f4d;border:1px solid #c6e4d0;font-size:.62rem;font-weight:800;text-transform:none} .card-verified svg{width:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .card-specialty{margin:-4px 0 -3px;color:#737b84;font-size:.82rem} .card-rating{display:flex;align-items:center;gap:7px;font-size:.76rem;color:#6a737d;margin-bottom:0} .card-rating .stars{color:#ff9a4a;letter-spacing:.04em} .card-rating b{color:var(--ink);font-size:.82rem} .card-address{margin-top:5px;display:flex;align-items:flex-start;gap:8px;color:#444b54;font-size:.78rem;line-height:1.45} .card-address svg{width:16px;flex:0 0 auto;color:var(--primary-dark);margin-top:1px; fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .card-address span{display:block} .ca-clinic{color:#2b3138;font-weight:700} .card-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px} .card-tags span{padding:4px 9px;border:1px solid #e7e9ec;border-radius:8px;background:#f6f7f8; font-size:.62rem;font-weight:700;color:#4a5056} .card-tags .tag-orange{background:var(--primary-soft);border-color:transparent;color:var(--primary-dark)} .card-tags .tag-green{background:var(--ok-soft);border-color:transparent;color:var(--ok)} .card-tags .tag-amber{background:#fff7ed;border-color:transparent;color:#b45309} .pc-more{margin-top:8px;color:var(--muted2);font-size:.72rem} .pc-side{display:flex;flex-direction:column;gap:5px;min-width:166px;align-self:flex-start;justify-content:flex-start} .next-slot{padding:6px 12px;border:1px solid #ececee;border-radius:12px;background:#f8f9fa;text-align:center} .next-slot>span{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:3px;color:#6b7078;font-size:.58rem; font-weight:700;text-transform:uppercase;letter-spacing:.07em} .next-slot .ns-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(31,165,111,.16)} .next-slot strong{display:block;font-size:.86rem;font-weight:700;color:var(--ink);line-height:1.3} .next-slot.ns-off{background:#fbfbfa} .next-slot.ns-off strong{color:var(--muted2)} .pc-side .cta{width:100%;justify-content:center;min-height:32px;padding:0 16px;border-radius:11px;font-size:.79rem;font-weight:800} .cta.profile{background:#fff;color:var(--ink);border:1px solid var(--line)} .cta.profile:hover{border-color:#d9cbc0;background:#fffaf6;transform:translateY(-1px)} .pc-side .wl-inline{background:#fff;color:var(--primary-dark);border:1px solid #f0d9c8} .pc-side .wl-inline:hover{background:var(--primary-soft);border-color:transparent;transform:translateY(-1px)} /* Practice card (.card — mode cabinets, conservé en secours) */ .card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); padding:24px;margin-bottom:16px;box-shadow:var(--shadow-sm);transition:.22s ease} .card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)} .c-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap} .c-name{font-size:1.25rem;font-weight:700;margin:0 0 4px;letter-spacing:-.01em;font-family:var(--serif)} .c-name-link:hover .c-name{color:var(--primary)} .c-loc{display:flex;align-items:center;gap:6px;color:var(--muted2);font-size:.9rem;flex-wrap:wrap} .c-loc .itin,.c-loc .sview{color:var(--primary);font-weight:600} .c-loc .itin:hover,.c-loc .sview:hover{text-decoration:underline} .c-loc .dist{color:var(--primary-dark);font-weight:700} .c-foot{margin-top:20px;padding-top:18px;border-top:1px solid var(--line); display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap} .dispo{font-size:.9rem;color:var(--muted)} .dispo b{color:var(--ink)} .dispo .soon{color:var(--muted2)} .dispo.sm{font-size:.82rem} .dist{color:var(--primary-dark);font-weight:700} /* Shared card atoms */ .pracs{margin:18px 0 0;display:flex;flex-direction:column;gap:2px} .prac{display:flex;gap:16px;padding:14px 6px;border-top:1px solid #f0eae3;align-items:center;transition:background .18s ease;border-radius:10px} .prac:hover{background:linear-gradient(90deg,#fff8f2,transparent)} .prac:first-child{border-top:0} .prac.match{background:var(--primary-soft);box-shadow:inset 3px 0 0 var(--primary); border-radius:0 10px 10px 0;padding-left:12px} .ava{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center; background:linear-gradient(145deg,#ffd7bd,var(--primary));color:#fff;font-weight:800;font-size:.9rem} .prac .pn{font-weight:700} .prac .pn a:hover{color:var(--primary)} .prac .pt{color:var(--muted2);font-size:.86rem;margin-bottom:6px} .matchtag{font-size:.64rem;font-weight:700;color:var(--primary-dark);background:#fff; border:1px solid var(--primary);border-radius:999px;padding:1px 8px;margin-left:8px;vertical-align:middle;white-space:nowrap} .chips{display:flex;flex-wrap:wrap;gap:6px} .chip{font-size:.62rem;font-weight:700;padding:6px 9px;border-radius:8px;background:#fffaf7;border:1px solid var(--line);color:#4a5056} .chip.new{background:#fff2e6;color:#c95e18;border-color:#f4c8a0;font-weight:800} .chip.lang{background:#f7f4f1;color:#3a4149;letter-spacing:.03em;font-weight:700;border-color:#e9e2d9} .chip.conv-yes{background:#e6f4ec;color:#087f4d;border-color:#c6e4d0;font-weight:800} .chip.conv-partial{background:#fff2d9;color:#8f5b0e;border-color:#f5d59a;font-weight:800} .chip.conv-no{background:var(--surface);color:var(--muted2)} .mini-connected{display:inline-flex;align-items:center;gap:3px;font-size:.66rem;font-weight:700; color:#374151;background:var(--surface);border-radius:999px;padding:1px 8px;margin-left:6px;vertical-align:middle} .services{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px} .services .svc{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:#fff8f2;border:1px solid #f4c8a0;color:#8f4a10;font-size:.78rem;font-weight:700} .svc{font-size:.8rem;padding:7px 12px;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--muted)} .svc b{color:var(--ink);font-weight:700} .badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px; font-size:.72rem;font-weight:700;white-space:nowrap} .badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor} .badge.online{background:var(--ok-soft);color:var(--ok)} .badge.contact{background:var(--primary-soft);color:var(--primary-dark)} .badge.connected{background:var(--ink);color:#fff} .badge.connected .dot{background:#fff} .cta{padding:12px 22px;border-radius:var(--r-sm);font-weight:700;font-size:.92rem; display:inline-flex;align-items:center;gap:8px;transition:.18s;white-space:nowrap;border:0} .cta.sm{width:100%;justify-content:center;min-height:42px;padding:0 16px;border-radius:12px;font-size:.8rem;font-weight:800} .cta.book{background:linear-gradient(135deg,var(--primary),#ff8a45);color:#fff; box-shadow:0 10px 20px rgba(255,110,22,.2)} .cta.book:hover{transform:translateY(-1px);box-shadow:0 14px 26px rgba(255,110,22,.28)} .cta.call{background:#fff;color:var(--ink);border:1px solid var(--line)} .cta.call:hover{border-color:#d9cbc0;background:#fffaf6;transform:translateY(-1px)} .cta.call:hover{background:var(--primary-soft)} .cta.lead{background:var(--primary);color:#fff;font-family:inherit} .cta.lead:hover{background:var(--primary-dark)} /* ---------- Footer ---------- */ .site-footer{border-top:1px solid var(--line);background:#181a1e;color:#fff} /* ---------- Modals (waitlist / lead) ---------- */ .hp-field{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden;opacity:0} .wl-btn{display:block;margin-top:4px;background:none;border:0;color:var(--primary); font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;padding:0;text-decoration:underline} .wl-ov{position:fixed;inset:0;background:rgba(20,16,12,.5);display:none;align-items:center; justify-content:center;z-index:9999;padding:16px;backdrop-filter:blur(2px)} .wl-ov.on{display:flex} .wl-box{background:#fff;border-radius:22px;max-width:430px;width:100%;padding:26px 24px 22px;box-shadow:var(--shadow-lg)} .wl-box h3{margin:0 0 4px;font-size:1.25rem;font-family:var(--serif);font-weight:600} .wl-sub{color:var(--muted);font-size:.9rem;margin:0 0 16px} .wl-f{display:flex;flex-direction:column;gap:10px} .wl-f input,.wl-f textarea{padding:11px 13px;border:1px solid var(--line);border-radius:11px; font:inherit;width:100%;box-sizing:border-box;background:var(--cream)} .wl-f input:focus,.wl-f textarea:focus{outline:0;border-color:var(--primary);background:#fff} .wl-f textarea{resize:vertical;min-height:64px} .wl-row{display:flex;gap:10px}.wl-row>*{flex:1} .wl-consent{display:flex;gap:8px;align-items:flex-start;font-size:.82rem;color:var(--muted);margin-top:2px} .wl-consent input{margin-top:3px;width:auto;accent-color:var(--primary)} .wl-act{display:flex;gap:10px;margin-top:16px} .wl-act button{flex:1;padding:12px;border-radius:11px;font-weight:700;cursor:pointer; border:1px solid var(--line);background:#fff} .wl-act .wl-send{background:linear-gradient(135deg,var(--primary),#ff8a45);border-color:var(--primary);color:#fff} .wl-msg{margin-top:10px;font-size:.9rem;min-height:1.1em} .wl-msg.ok{color:var(--ok)}.wl-msg.err{color:#b42318} /* ---------- Responsive ---------- */ @media(max-width:980px){ .hero-grid{grid-template-columns:1fr;gap:40px} .hero-showcase{width:min(460px,100%);margin:0 auto} .note-one{left:-18px}.note-two{right:-18px} .directory-content{grid-template-columns:1fr} .map-panel{position:relative;top:auto;height:auto;min-height:0;order:2; border-right:0;border-top:1px solid var(--line)} #map{min-height:380px;height:380px} .results-column{order:1;padding:20px} } @media(max-width:640px){ .site-header{padding:12px 0} .nav-wrap{grid-template-columns:auto auto;gap:12px} .main-nav{display:none} .hero{padding:44px 0 48px} .floating-note{display:none} .search{flex-direction:column;border-radius:var(--r-md);padding:10px} .search .fld{padding:8px 12px} .search #go{width:100%;padding:13px} .trust-row{flex-wrap:wrap;gap:14px;justify-content:center;text-align:center} .pc-cab-act{margin-left:0;width:100%} .foot-in{flex-direction:column;align-items:flex-start} } /* ========================================================================== Lot 2b — Sections marketing (comment ça marche / pourquoi / FAQ / CTA pro) ========================================================================== */ .section-pad{padding:32px 0} .section-heading{max-width:720px;margin:0 auto 24px} .section-heading.centered{text-align:center} .section-kicker{display:inline-flex;align-items:center;gap:10px;color:var(--primary-dark); font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase} .section-heading.centered .section-kicker{justify-content:center} .section-heading h2,.benefits-copy h2,.faq-intro h2,.practitioner-cta h2{font-family:var(--serif); font-weight:600;letter-spacing:-.02em;margin:14px 0 16px;font-size:clamp(2rem,3.6vw,3.05rem);line-height:1.05} .section-heading h2 em,.benefits-copy h2 em,.faq-intro h2 em{color:var(--primary);font-style:italic} .section-heading p,.benefits-copy>p,.faq-intro>p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.7} .how-section{background:var(--cream);border-top:1px solid var(--line)} .steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .step-card{position:relative;min-height:250px;padding:28px;border:1px solid var(--line); border-radius:var(--r-lg);background:#fff;overflow:hidden;transition:.22s ease} .step-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)} .featured-step{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-10px)} .featured-step:hover{transform:translateY(-14px)} .step-number{position:absolute;right:20px;top:14px;font-family:var(--serif);font-size:3.4rem;color:rgba(32,35,42,.07)} .featured-step .step-number{color:rgba(255,255,255,.09)} .step-icon{width:56px;height:56px;border-radius:16px;background:var(--primary-soft);color:var(--primary); display:grid;place-items:center;margin-bottom:44px} .featured-step .step-icon{background:rgba(255,255,255,.1);color:#ff9b62} .step-icon svg{width:26px} .step-card h3{margin:0 0 9px;font-size:1.18rem} .step-card p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.6} .featured-step p{color:#c3c7cc} .benefits-section{background:#fff;border-top:1px solid var(--line)} .benefits-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:start} .benefits-copy{position:sticky;top:100px} .text-link{display:inline-flex;align-items:center;gap:8px;margin-top:24px;color:var(--primary-dark);font-size:.86rem;font-weight:800} .text-link svg{width:15px} .benefits-list{border-top:1px solid var(--line)} .benefits-list article{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)} .benefit-icon{flex:none;width:46px;height:46px;border-radius:14px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center} .benefit-icon svg{width:21px} .benefits-list h3{margin:2px 0 7px;font-size:1.06rem;font-weight:600} .benefits-list p{margin:0;color:#79818a;font-size:.82rem;line-height:1.65} .faq-section{background:var(--cream);border-top:1px solid var(--line)} .faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px} .secondary-button{display:inline-flex;align-items:center;gap:8px;height:44px;margin-top:24px;padding:0 18px; border:1px solid var(--line-strong);border-radius:12px;background:#fff;font-size:.82rem;font-weight:800} .secondary-button svg{width:14px} .faq-list{border-top:1px solid var(--line)} .faq-item{border-bottom:1px solid var(--line)} .faq-question{width:100%;padding:22px 0;border:0;background:transparent;display:flex;align-items:center; justify-content:space-between;gap:20px;text-align:left;color:var(--ink);font-size:1rem;font-weight:700;cursor:pointer} .faq-question i{position:relative;flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:#fff;border:1px solid var(--line)} .faq-question i::before,.faq-question i::after{content:"";position:absolute;left:7px;top:11px;width:8px;height:1.5px;background:var(--ink);transition:.25s ease} .faq-question i::after{transform:rotate(90deg)} .faq-item.open .faq-question{color:var(--primary-dark)} .faq-item.open .faq-question i::after{transform:rotate(0);opacity:0} .faq-answer{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .32s ease,opacity .25s ease} .faq-answer p{overflow:hidden;margin:0;padding:0 40px 0 0;color:#737c86;font-size:.82rem;line-height:1.7} .faq-item.open .faq-answer{grid-template-rows:1fr;opacity:1} .faq-item.open .faq-answer p{padding-bottom:22px} .practitioner-cta{position:relative;padding:20px 0 150px;background:transparent;color:#fff;overflow:visible} .cta-orb{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,110,22,.28),rgba(255,110,22,0) 70%);pointer-events:none} .cta-orb-one{width:300px;height:300px;right:2%;top:-150px} .cta-orb-two{width:210px;height:210px;left:-70px;bottom:-130px} .cta-inner{position:relative;z-index:4;margin-top:38px;display:flex;align-items:center;justify-content:space-between;gap:48px;padding:34px 46px 36px;border-radius:24px;background:linear-gradient(135deg,#24272e,#181a1e);border:1px solid rgba(255,255,255,.08);box-shadow:0 28px 70px rgba(0,0,0,.22);overflow:hidden} .cta-kicker{display:block;margin-bottom:12px;color:var(--primary);font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em} .practitioner-cta h2{margin:0 0 12px;color:#fff;font-size:clamp(1.9rem,3vw,2.7rem);line-height:1.06} .practitioner-cta h2 em{color:var(--primary);font-style:italic} .practitioner-cta p{max-width:640px;margin:0;color:#b7bbc1;font-size:.92rem;line-height:1.6} .cta-button{height:50px;padding:0 22px;border-radius:14px;background:linear-gradient(135deg,var(--primary),#ff8a45); color:#fff;display:inline-flex;align-items:center;gap:10px;font-size:.8rem;font-weight:800;white-space:nowrap; box-shadow:0 14px 30px rgba(255,110,22,.24);transition:.2s} .cta-button:hover{transform:translateY(-1px);box-shadow:0 18px 36px rgba(255,110,22,.3)} .cta-button svg{width:15px} @media(max-width:880px){ .steps-grid{grid-template-columns:1fr;gap:14px} .step-card,.featured-step{transform:none} .step-card:hover,.featured-step:hover{transform:translateY(-3px)} .benefits-grid,.faq-layout{grid-template-columns:1fr;gap:36px} .benefits-copy{position:static} .cta-inner{flex-direction:column;align-items:flex-start;gap:26px} .footer-main{grid-template-columns:1fr 1fr;gap:32px} } @media(max-width:560px){ .section-pad{padding:26px 0} .footer-main{grid-template-columns:1fr} } /* ========================================================================== Lot 3+ — Fiches (cabinet / praticien / personne), partagé par les 3 générateurs ========================================================================== */ .lang-switch{display:inline-flex;gap:2px;vertical-align:middle} .lang-lnk{font-size:.72rem;font-weight:700;letter-spacing:.03em;color:var(--muted2);padding:5px 8px;border-radius:8px;line-height:1} .lang-lnk:hover{color:var(--primary)} .lang-lnk.on{background:var(--primary-soft);color:var(--primary-dark)} .fiche-main{width:min(880px,calc(100% - 44px));margin:0 auto;padding:0 0 64px} .back{display:inline-block;margin:22px 0 6px;color:var(--muted2);font-size:.9rem;font-weight:600} .back:hover{color:var(--primary)} .fiche-hero{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:30px 32px 26px;margin-top:8px} .fiche-hero h1{font-family:var(--serif);font-weight:600;letter-spacing:-.02em;font-size:clamp(1.5rem,3vw,2rem);line-height:1.08;margin:0 0 10px} .fiche-hero .loc{display:flex;align-items:center;gap:8px;color:#444b54;font-size:.95rem;margin:6px 0 14px} .fiche-hero .loc svg{color:var(--primary);flex:none} .fiche-hero .hero-ava{margin-bottom:16px} .contact{display:flex;flex-wrap:wrap;gap:10px 14px;margin:2px 0 18px} .contact .cinfo{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:#fff;border:1px solid #f0d4be;color:var(--primary);font-size:.86rem;font-weight:700;transition:.15s ease} .contact .cinfo:hover{background:var(--primary);color:#fff;border-color:var(--primary)} .contact .cinfo svg{opacity:.9} .cinfo{display:inline-flex;align-items:center;gap:6px;color:var(--primary-dark);font-size:.92rem;font-weight:600} .cinfo:hover{text-decoration:underline} .cinfo svg{flex:none;opacity:.8} .hero-foot{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .cta-hint{color:var(--primary-dark);font-weight:700;font-size:.92rem} .blk{margin-top:26px} .blk h2{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);margin:0 0 16px;display:flex;align-items:center;gap:12px;font-family:var(--font)} .blk h2::before{content:"";display:inline-block;width:20px;height:2px;background:var(--primary);border-radius:2px} .blk h2 #openNow{margin-left:auto;font-size:.68rem;padding:4px 10px;border-radius:999px;letter-spacing:.02em;text-transform:none;font-weight:700;white-space:nowrap} .fiche-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 4px 14px rgba(45,35,29,.04);padding:6px 22px} .prac-main{flex:1;min-width:0} .prac-main .pn{font-family:var(--serif);font-weight:600;font-size:1.05rem;color:var(--ink);letter-spacing:-.01em;line-height:1.15} .prac-main .pt{color:#444b54;font-size:.85rem;margin-top:2px} .prac-act{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:8px} .pbio{color:var(--muted);font-size:.9rem;margin-top:7px;line-height:1.5} .hours{width:100%;border-collapse:collapse;font-size:.88rem} .hours th{text-align:left;font-weight:600;color:var(--muted);padding:7px 0;width:130px} .hours td{color:var(--muted);padding:7px 0;text-align:right;white-space:nowrap} .hours tr{border-top:1px solid var(--line)} .hours tr:first-child{border-top:0} .hours tr.today th,.hours tr.today td{color:var(--ink);font-weight:700} .hours .hclosed{color:var(--muted2)} .onow{font-size:.7rem;font-weight:700;padding:3px 10px;border-radius:999px;text-transform:none;letter-spacing:0;margin-left:8px;vertical-align:middle} .onow.open{background:var(--ok-soft);color:var(--ok)} .onow.closed{background:var(--surface);color:var(--muted2)} .fiche-foot{width:min(880px,calc(100% - 44px));margin:0 auto;padding:34px 0;display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between} .fiche-foot img{height:26px;opacity:.95;filter:brightness(0) invert(1)} .fiche-foot .foot-slogan{font-family:var(--serif);font-style:italic;color:#d7d9dc} /* Cartes cross-cabinet (/dr/) + gros avatar praticien — réutilisés lots 4-5 */ .hero-ava{flex:none;width:76px;height:76px;border-radius:22px;object-fit:contain;object-position:center;background:#fff;border:0} .hero-ava-ph{display:grid;place-items:center;border:none;background:linear-gradient(145deg,#ffd7bd,var(--primary));color:#fff;font-weight:800;font-size:1.5rem} .cab{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-sm);padding:18px 20px;margin-top:12px} .cab-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px} .cab-name{font-weight:700;font-size:1.05rem} .cab-loc{display:flex;align-items:center;gap:6px;color:var(--muted2);font-size:.86rem;margin-top:3px} .cab-fiche{color:var(--primary);font-weight:600;font-size:.86rem;white-space:nowrap} .cab-fiche:hover{text-decoration:underline} .cab-foot{margin-top:14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap} .cab-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:.72rem;font-weight:700} .cab-badge.online{background:var(--ok-soft);color:var(--ok)} .cab-badge.contact{background:var(--primary-soft);color:var(--primary-dark)} .cab-badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor} .cab-dispo{font-size:.88rem;color:var(--muted)} .cab-dispo b{color:var(--ink)} .cab-actions{display:flex;gap:10px} @media(max-width:560px){ .fiche-hero{padding:24px 20px} .hero-foot{flex-direction:column;align-items:stretch} .hero-foot .cta{justify-content:center} .cab-head{flex-direction:column} } /* --- Fiche praticien (Lot 4) : atomes spécifiques --- */ .hero-top{display:flex;gap:22px;align-items:flex-start} .hero-top .hero-ava{width:92px;height:92px;border-radius:26px} .subtitle{color:var(--muted);font-size:1rem;margin-bottom:10px} .bio{margin-top:18px;color:var(--muted);line-height:1.6} .cardnote{margin-top:18px;color:var(--muted);font-size:.95rem;line-height:1.55} .xcab{display:inline-block;margin:14px 0 0 10px;font-size:.9rem;font-weight:700;color:var(--primary)} .xcab:hover{color:var(--primary-dark)} .cabcard{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:18px 22px} .cabcard .cn{font-weight:700} .cabcard .cl{display:flex;align-items:center;gap:6px;color:var(--muted2);font-size:.9rem;margin-top:2px} .cc{margin-top:6px;font-size:.88rem;color:var(--muted)} .cc a{color:var(--primary);font-weight:600} .cc a:hover{text-decoration:underline} .cablink{font-size:.9rem;font-weight:700;color:var(--primary);white-space:nowrap} .cablink:hover{text-decoration:underline} .hours-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:2px 22px} .cta.mail{background:#fff;color:var(--ink);border:1px solid var(--line)} .cta.mail:hover{border-color:#d9cbc0;background:var(--primary-soft);transform:translateY(-1px)} @media(max-width:560px){.hero-top{flex-direction:column;text-align:center}.hero-top .chips{justify-content:center}} /* --- Fiche personne /dr/ (Lot 5) : compteur cabinets (renommé .pcount pour ne pas heurter .count de la liste) --- */ .pcount{margin-top:16px;font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted2)} .cab-actions .cta.sm,.cab .cta{margin-left:auto} .cab-actions .cta{margin-left:0} /* --- Avis patients (directory-reviews.js, modernisé Lot 6b) --- */ .stars{letter-spacing:1px;color:#ff9a4a} .stars .stars-empty{color:#e3ddd5} .rating-badge{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--ink);margin:4px 0 2px} .rating-badge .stars{font-size:1.05rem} .rating-badge .rc{font-weight:500;color:var(--muted2)} .reviews{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:20px 22px;margin:16px 0} .reviews-head{display:flex;align-items:baseline;gap:10px;margin-bottom:4px} .reviews-head h2{font-size:1.15rem;font-family:var(--serif);font-weight:600;margin:0} .reviews-head .avg{font-weight:700;color:var(--ink)} .reviews-head .rc{color:var(--muted2);font-size:.9rem} .review{padding:14px 0;border-top:1px solid var(--line)} .review:first-of-type{border-top:0} .review-top{display:flex;align-items:center;justify-content:space-between;gap:12px} .review-author{font-weight:700} .review-date{font-size:.8rem;color:var(--muted2)} .review-rate{margin:4px 0 6px;display:flex;align-items:center;gap:6px} .review-verified{font-size:.78rem;color:var(--ok);font-weight:700} .review-comment{color:var(--muted);font-size:.94rem;line-height:1.55} /* --- Cartes d'étapes illustrées (PNG HD du template) --- */ .step-card{min-height:246px;padding:24px} .step-card-illustrated{background:#fff;color:var(--ink);box-shadow:0 8px 24px rgba(37,37,37,.04)} .step-card-illustrated .step-number{color:#ece7e1} .step-illustration{height:112px;display:flex;align-items:center;justify-content:center;margin:0 0 12px;overflow:visible} .step-illustration img{display:block;width:auto;height:auto;max-width:170px;max-height:109px;object-fit:contain;object-position:center;filter:drop-shadow(0 8px 16px rgba(37,37,37,.075))} .step-card-illustrated:nth-child(2) .step-illustration img{max-width:190px} .step-card-illustrated:nth-child(3) .step-illustration img{max-width:136px} .step-card-illustrated h3{text-align:center;margin:0 0 8px} .step-card-illustrated p{max-width:250px;margin:0 auto;text-align:center} @media(max-width:880px){ .step-illustration{height:112px} .step-illustration img{max-width:170px;max-height:108px} .step-card-illustrated:nth-child(2) .step-illustration img{max-width:190px} .step-card-illustrated:nth-child(3) .step-illustration img{max-width:140px} } /* --- Masquer le cadre de résultats tant qu'il est vide (état initial « Entrez une ville… ») --- */ .results-section:has(#results > .state[data-i18n="st_start"]){display:none} /* --- Sélecteur de langue premium (repris du template) --- */ .language-switcher{position:relative} .language-trigger{height:40px;min-width:72px;padding:0 12px;display:flex;align-items:center;justify-content:center;gap:8px; border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);font-size:12px;font-weight:700;cursor:pointer; box-shadow:0 2px 10px rgba(35,25,18,.04);transition:.18s} .language-trigger:hover{border-color:var(--line-strong);background:var(--cream)} .language-trigger svg{width:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:.25s ease} .language-switcher.open .language-trigger svg{transform:rotate(180deg)} .language-menu{position:absolute;top:48px;right:0;width:172px;padding:8px;border:1px solid var(--line);background:#fff; border-radius:14px;box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transform:translateY(-5px); transition:.2s ease;z-index:60} .language-switcher.open .language-menu{opacity:1;visibility:visible;transform:none} .language-menu button,.language-menu a{width:100%;border:0;background:transparent;border-radius:9px;padding:10px;display:flex;align-items:center; gap:11px;text-align:left;color:#59616c;font-size:12px;cursor:pointer;text-decoration:none;box-sizing:border-box;transition:.15s} .language-menu button:hover,.language-menu button.selected,.language-menu a:hover,.language-menu a.selected{background:var(--primary-soft);color:var(--primary-dark)} .language-menu button span,.language-menu a span{font-weight:800;color:var(--ink);min-width:20px} .language-menu button.selected span,.language-menu a.selected span{color:var(--primary-dark)} /* --- Menus déroulants filtres premium (même langage que le menu langue) --- */ .f-dd{position:relative;display:inline-block} .f-dd-trigger{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;padding:7px 12px; border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);cursor:pointer;transition:.16s} .f-dd-trigger:hover{border-color:var(--line-strong)} .f-dd.open .f-dd-trigger{border-color:var(--primary);color:var(--ink);box-shadow:0 0 0 3px rgba(255,110,22,.1)} .f-dd-car{display:inline-flex} .f-dd-car svg{width:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:.2s} .f-dd.open .f-dd-car svg{transform:rotate(180deg)} .f-dd-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:210px;max-height:min(380px,60vh);overflow:auto;padding:8px; border:1px solid var(--line);background:#fff;border-radius:14px;box-shadow:var(--shadow-md); opacity:0;visibility:hidden;transform:translateY(-5px);transition:.16s ease;z-index:55} .f-dd.open .f-dd-menu{opacity:1;visibility:visible;transform:none} .f-dd-opt{width:100%;border:0;background:transparent;border-radius:9px;padding:9px 12px;display:block;text-align:left; color:#59616c;font-size:.85rem;cursor:pointer;white-space:nowrap;transition:.14s} .f-dd-opt:hover,.f-dd-opt.selected{background:var(--primary-soft);color:var(--primary-dark);font-weight:600} .f-dd .f-dd-native{display:none} /* --- Vagues oranges (transition CTA -> footer) --- */ .footer-wave{position:absolute;left:0;right:0;bottom:0;height:200px;width:100%; background-repeat:no-repeat;background-position:bottom center;background-size:100% 100%;pointer-events:none;z-index:1} .footer-wave.wave-back{background-image:url("/smilo/assets/waves/footer-wave-back.svg");height:212px} .footer-wave.wave-mid{background-image:url("/smilo/assets/waves/footer-wave-mid.svg");height:198px} .footer-wave.wave-front{background-image:url("/smilo/assets/waves/footer-wave-front.svg");height:185px} .practitioner-cta .cta-orb{z-index:1} /* --- Footer premium (colonnes + marque) — remplace la version 2b --- */ .site-footer{background:#181a1e;color:#fff;position:relative} .footer-main{max-width:1180px;margin:0 auto;padding:34px 22px 30px;display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px} .footer-brand img{width:118px;height:auto;opacity:.98} .footer-brand p{max-width:none;white-space:nowrap;margin:12px 0 0;color:#92979f;font-size:.8rem;line-height:1.6} .footer-column{display:flex;flex-direction:column;gap:9px} .footer-column strong{margin-bottom:5px;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--primary)} .footer-column a{color:#9298a0;font-size:.8rem;transition:.18s} .footer-column a:hover{color:#fff;transform:translateX(2px)} @media(max-width:880px){ .footer-brand p{white-space:normal} .footer-main{grid-template-columns:1fr 1fr;gap:30px} .cta-inner{flex-direction:column;align-items:flex-start;gap:26px;padding:30px 26px} } @media(max-width:560px){.footer-main{grid-template-columns:1fr}} /* --- Filtres organisés en lignes explicites --- */ .filters{display:flex;flex-direction:column;gap:10px;align-items:flex-start;min-width:0} .filters-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px} .filters-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .filters-line>*{flex:0 0 auto} /* Marqueurs numérotés + bulle sombre (vue résultats) */ .mk-num{background:none;border:0} .mk-num .mk-pin{width:30px;height:30px;border-radius:50% 50% 50% 2px;transform:rotate(45deg); background:var(--primary);box-shadow:0 6px 14px rgba(255,110,22,.4); display:grid;place-items:center;border:2px solid #fff} .mk-num .mk-pin b{transform:rotate(-45deg);color:#fff;font-size:.72rem;font-weight:800;font-family:var(--font)} .mk-num.active .mk-pin,.leaflet-marker-icon.active .mk-pin{background:var(--ink);box-shadow:0 10px 22px rgba(0,0,0,.32);z-index:1000} .mk-tip{background:rgba(37,37,37,.96)!important;color:#fff!important;border:0!important;border-radius:13px!important;max-width:240px!important;white-space:normal!important; box-shadow:0 14px 30px rgba(0,0,0,.28)!important;padding:8px 11px!important;font-family:var(--font)!important} .mk-tip::before{border-top-color:rgba(24,26,30,.96)!important} .mk-tip .mt-in{display:flex;align-items:center;gap:9px;text-align:left} .mk-tip .mt-ava{flex:0 0 52px;width:52px;height:52px;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center; background:transparent;color:#fff;font-size:.78rem;font-weight:800} .mk-tip .mt-ava img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;display:block!important;background:transparent!important} .mk-tip .mt-copy{min-width:0;display:flex;flex-direction:column;gap:2px} .mk-tip .mt-name{font-weight:700;font-size:.78rem;line-height:1.2;white-space:nowrap} .mk-tip .mt-rate{color:#ffca90;font-size:.7rem;font-weight:600} .map-legend{position:absolute;left:12px;bottom:12px;z-index:500;display:inline-flex;align-items:center;gap:7px; padding:8px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm); font-size:.72rem;color:var(--muted)} .map-legend i{width:8px;height:8px;border-radius:50%;background:var(--ok)} .card-rating-none{color:#a7adb4} .card-rating-none .stars{color:#d9dde1} /* ---------- Barre d'outils résultats (filtres actifs + vues + tri) ---------- */ .results-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:nowrap; padding:12px 14px;border:1px solid #f0cfb5;border-bottom:0;border-radius:16px 16px 0 0;background:#fef1e6;box-shadow:0 4px 14px rgba(45,35,29,.06);margin:0} .rt-chips{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:0} .rt-chip{flex:none} .rt-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid var(--line); border-radius:999px;background:#fff;color:#4b535c;font-size:.78rem;font-weight:600;cursor:pointer;transition:.18s} .rt-chip:hover{border-color:#e5cdb9;background:#fffaf6} .rt-chip i{font-style:normal;font-weight:700;color:#b9c0c7;font-size:.9rem;line-height:1} .rt-chip.active{background:var(--primary-soft);border-color:transparent;color:var(--primary-dark)} .rt-chip.active i{color:var(--primary)} .rt-chip svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .rt-near{color:var(--primary-dark)} .rt-right{display:flex;align-items:center;gap:10px;flex:none} .view-dd{position:relative} .view-trigger{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);font-size:.78rem;font-weight:700;font-family:var(--font);cursor:pointer;white-space:nowrap} .view-trigger:hover{border-color:#e5cdb9} .view-trigger .vt-ico{display:inline-flex} .view-trigger .vt-ico svg,.view-opt svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--primary)} .view-trigger .vt-caret{width:14px;height:14px;stroke:#9aa1a9;fill:none;stroke-width:2} .view-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:180px;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 16px 40px rgba(35,25,18,.14);padding:6px;display:none;z-index:60} .view-dd.open .view-menu{display:block} .view-opt{display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;border:0;border-radius:9px;background:transparent;color:#3a4149;font-size:.8rem;font-weight:600;font-family:var(--font);cursor:pointer;text-align:left} .view-opt:hover{background:#fff6f0} .view-opt.on{background:var(--primary-soft);color:var(--primary-dark)} .rt-sort{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted)} .rt-sort select{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:#fff;color:var(--ink); font-size:.78rem;font-weight:700;font-family:var(--font);cursor:pointer} /* vues : liste seule / carte seule */ .directory-content[data-view="list"] .map-panel{display:none} .directory-content[data-view="list"] .directory-content, .directory-content[data-view="list"]{grid-template-columns:1fr} .directory-content[data-view="map"] .results-column{display:none} .directory-content[data-view="map"]{grid-template-columns:1fr} .directory-content[data-view="map"] .map-panel{height:calc(100vh - 160px)} @media(max-width:900px){.results-toolbar{flex-wrap:wrap;gap:10px}.rt-right{width:100%;justify-content:space-between}} .results-column{scrollbar-width:thin;scrollbar-color:#d8ccc0 transparent} .results-column::-webkit-scrollbar{width:8px} .results-column::-webkit-scrollbar-track{background:transparent} .results-column::-webkit-scrollbar-thumb{background:#e2d3c4;border-radius:8px;border:2px solid transparent;background-clip:padding-box} .results-column::-webkit-scrollbar-thumb:hover{background:#c9b8a7;background-clip:padding-box;border:2px solid transparent} /* ========================================================================== Passe MOBILE dédiée : vue résultats + hero (retour Jacob « response tout pourri ») ========================================================================== */ /* --- Tablette / petit desktop --- */ @media (max-width:1024px){ .directory-content{grid-template-columns:360px minmax(0,1fr)} .pc-side{min-width:150px} .card-tags{gap:6px} .card-tags span{padding:5px 8px;font-size:.6rem} .rt-chips::-webkit-scrollbar{display:none} } /* --- Mobile (≤ 720px) : reflow complet --- */ @media (max-width:720px){ /* HERO : mieux packer la carte sponsor (déjà stack via 980, mais bien la calibrer) */ .hero-showcase{width:min(360px,100%)} .showcase-profile{padding:16px} .floating-note{display:none} /* TOOLBAR RÉSULTATS : chips en wrap réel, tri/vue sous les chips */ .results-toolbar{flex-wrap:wrap !important;gap:8px;padding:10px 12px} .rt-chips{flex-wrap:wrap !important;overflow-x:visible !important;flex:1 1 100%;min-width:0} .rt-chip{flex:none;padding:7px 12px;font-size:.72rem} .rt-right{width:100%;flex-wrap:wrap;gap:8px;justify-content:space-between} .view-trigger{padding:7px 10px;font-size:.72rem} .rt-sort select{padding:7px 8px;font-size:.72rem} /* CADRE (bordure + shell) : on garde le look mais on colle bien */ .directory-shell{border-radius:0 0 14px 14px} .results-toolbar{border-radius:14px 14px 0 0} /* GRILLE RÉSULTATS : pile map + liste, PAS de scroll interne (on scrolle la page) */ .directory-content{grid-template-columns:1fr} .map-panel{position:relative;top:auto;height:340px;min-height:340px; border-right:0;border-bottom:1px solid var(--line);padding:10px} #map{min-height:100%;height:100%} .results-column{padding:14px 12px;max-height:none !important;overflow-y:visible !important;min-height:0 !important} .count{font-size:.72rem;margin:0 0 12px} /* CARTE PRATICIEN : 2 colonnes en haut (photo + main) puis pc-side en pleine largeur */ .pcard{grid-template-columns:56px minmax(0,1fr);gap:12px;padding:12px;border-radius:14px;margin-bottom:9px} .pc-ava{width:56px !important;height:56px !important;border-radius:12px} .pc-ava-ph{width:56px;height:56px;border-radius:12px;font-size:1.1rem} .pc-name{font-size:1.05rem} .card-specialty{font-size:.78rem;margin:0 0 2px} .card-rating{font-size:.72rem} .card-address{font-size:.74rem} .card-tags{gap:6px;margin-top:6px} .card-tags span{padding:5px 8px;font-size:.62rem} /* pc-side : PASSE en pleine largeur SOUS les 2 colonnes du haut */ .pc-side{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;gap:8px; min-width:0;align-self:stretch;justify-content:stretch;margin-top:4px} .pc-side .next-slot{flex:1 1 100%;padding:8px 12px;text-align:left} .pc-side .next-slot > span{justify-content:space-between} .pc-side .cta{flex:1 1 45%;min-height:38px;font-size:.76rem} .pc-side .wl-inline{flex:1 1 45%} /* pas de sous-lignage disgracieux */ .pc-side .wl-btn{text-decoration:none} /* MK-TIP (bulle map) : taille adaptée */ .mk-tip{padding:6px 8px !important;max-width:200px !important} .mk-tip .mt-ava{flex:0 0 44px;width:44px;height:44px} } /* --- Très petit mobile (≤ 400px) --- */ @media (max-width:400px){ .pcard{padding:11px} .pc-side .cta{flex:1 1 100%} .pc-side .wl-inline{flex:1 1 100%} .card-tags span{padding:4px 7px} .view-trigger .vt-label{max-width:80px;overflow:hidden;text-overflow:ellipsis} } /* --- Mobile serré (≤ 720px) : hero + header + filtres safe --- */ @media (max-width:720px){ /* HERO : padding latéral réduit, on gagne de la place */ .hero-grid{width:calc(100% - 24px)} .hero{padding:32px 0 36px} .hero-copy h1{font-size:clamp(1.8rem,7vw,2.4rem)} .hero-lead{font-size:.92rem} /* SEARCH doit passer en colonne */ .search{flex-direction:column;padding:8px} .search .fld{width:100%;padding:10px 12px} .search #go,.search .go{width:100%;justify-content:center} /* Filtres hero : chips carrées et wrap propre */ .filters,.filters-top,.filters-line{flex-wrap:wrap;gap:8px} .filters-top>*,.filters-line>*,.filters>* {max-width:100%} /* HEADER : logo + langue seulement visibles, "Vous êtes praticien" repli si trop étroit */ .nav-wrap{width:calc(100% - 20px);grid-template-columns:auto 1fr auto;gap:8px} .pro{font-size:.72rem;padding:6px 10px;white-space:nowrap} .language-trigger{min-width:0;padding:6px 10px} /* Empêcher n'importe quel enfant de dépasser */ main,section,.section-wrap,.results-toolbar,.directory-shell{max-width:100%;box-sizing:border-box} } /* Très petit (Galaxy Z Fold 5 : 344px) */ @media (max-width:380px){ .nav-wrap{grid-template-columns:auto auto;gap:6px} .pro{display:none} .hero-grid{width:calc(100% - 16px)} .hero{padding:24px 0 30px} .hero-copy h1{font-size:1.7rem;line-height:1.05} .hero-lead{font-size:.88rem} .filters,.filters-top,.filters-line{gap:6px} .results-toolbar{padding:8px 10px} .pcard{padding:10px;gap:10px;grid-template-columns:50px minmax(0,1fr)} .pc-ava{width:50px !important;height:50px !important;border-radius:11px} } .fiche-hero .dispo{font-size:.92rem;color:#3a4149;font-family:var(--font)} .fiche-hero .dispo b{color:var(--ink);font-weight:700} .fiche-hero .dispo .soon{color:#444b54} /* ========================================================================== A11Y + skeleton loading + empty-state riche (Jacob 2026-07-18) ========================================================================== */ /* Focus visible sur les cartes cliquables + boutons */ .pcard:focus-visible,.cta:focus-visible,.chip:focus-visible,.rt-chip:focus-visible, .view-trigger:focus-visible,.view-opt:focus-visible,.language-trigger:focus-visible{ outline:2px solid var(--primary);outline-offset:2px;border-radius:12px} .pcard:focus-visible{outline-offset:3px} /* Prefer-reduced-motion : coupe les animations */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important} } /* Skeleton loading — placeholder shimmer pendant le fetch */ @keyframes sk-shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}} .pcard.skeleton{cursor:default;pointer-events:none;border-color:#f0eae3} .pcard.skeleton::before{opacity:.4;background:linear-gradient(180deg,#eae0d3,#f3ccc8)} .sk-ava,.sk-line,.sk-block,.sk-btn{ background:linear-gradient(90deg,#f2ede6 0%,#f8f4ee 40%,#f2ede6 80%); background-size:800px 100%;animation:sk-shimmer 1.4s linear infinite;border-radius:8px} .sk-ava{width:66px;height:66px;border-radius:14px} .sk-line{height:12px;margin:6px 0;border-radius:6px} .sk-line.sk-name{width:60%;height:16px} .sk-line.sk-sub{width:40%} .sk-line.sk-addr{width:80%} .sk-block{height:48px;margin-bottom:8px;border-radius:12px} .sk-btn{height:36px;border-radius:11px} /* Empty state riche (aucun résultat après recherche) */ .empty-rich{padding:48px 32px;text-align:center;background:#fff;border:1px dashed #e5d9c9;border-radius:16px;color:#444b54} .empty-rich .empty-icon{font-size:2.8rem;margin-bottom:16px;line-height:1;opacity:.7} .empty-rich h3{font-family:var(--serif);font-weight:500;font-size:1.35rem;color:var(--ink);margin:0 0 8px} .empty-rich p{max-width:400px;margin:0 auto;line-height:1.6;font-size:.95rem} /* ========================================================================== Fiche PERSONNE (Jacob 2026-07-18) — cartes cabinet premium façon carte liste ========================================================================== */ /* Pastilles compteur dans le hero (1 cabinet · 1 réservable) */ .fiche-hero .summary-chips{margin-top:14px} .fiche-hero .summary-chips .chip{letter-spacing:.02em} .chip.on-neutral{background:#f4f0eb;color:#4a5158;border-color:#e5ddd2;font-weight:800} /* Carte cabinet .pcab — grid 3 col : [icône] [main] [side] */ .pcab{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:18px;align-items:center; padding:18px 22px;background:#fff;border:1px solid var(--line);border-radius:16px; box-shadow:0 4px 14px rgba(45,35,29,.04);margin-bottom:14px;transition:border .2s ease,box-shadow .2s ease} .pcab:last-child{margin-bottom:0} .pcab:hover{border-color:#f0cfb5;box-shadow:0 8px 22px rgba(45,35,29,.07)} /* Icône cabinet (petit picto immeuble sur fond crème) */ .pcab-icon{align-self:start;width:56px;height:56px;border-radius:14px;background:linear-gradient(145deg,#fff2e6,#ffdcbc); display:grid;place-items:center;color:var(--primary);border:1px solid #f4c8a0} /* Colonne main (nom + adresse + badge) */ .pcab-main{min-width:0} .pcab-name{font-family:var(--serif);font-weight:600;font-size:1.4rem;color:var(--ink);letter-spacing:-.01em;line-height:1.15} .pcab-loc{display:flex;align-items:center;gap:6px;color:#444b54;font-size:.87rem;margin-top:4px} .pcab-loc svg{color:var(--primary);flex:none} .pcab-badges{margin-top:8px} .pcab .cab-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px; font-size:.7rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;font-family:var(--font)} .pcab .cab-badge.online{background:#e6f4ec;color:#087f4d;border:1px solid #c6e4d0} .pcab .cab-badge.contact{background:#f4f0eb;color:#4a5158;border:1px solid #e5ddd2} .pcab .cab-badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor} /* Colonne side (dispo + bouton OU contact) */ .pcab-side{display:flex;flex-direction:column;gap:9px;min-width:180px;align-items:stretch} .pcab-side .next-slot{background:linear-gradient(180deg,#fef1e6,#fff8f0);border:1px solid #f0cfb5; border-radius:12px;padding:10px 14px;text-align:center;position:relative} .pcab-side .next-slot .ns-lbl{display:block;font-size:.6rem;font-weight:800;letter-spacing:.1em; text-transform:uppercase;color:#8f5b0e;margin-bottom:2px} .pcab-side .next-slot .ns-dot{display:inline-block;width:6px;height:6px;border-radius:50%; background:#12a763;margin-left:6px;vertical-align:middle;box-shadow:0 0 0 3px rgba(18,167,99,.15)} .pcab-side .next-slot strong{display:block;font-size:.92rem;font-weight:800;color:var(--ink);font-family:var(--font)} .pcab-side .cta.book{width:100%;justify-content:center;min-height:40px;padding:0 20px;font-size:.82rem;font-weight:800;border-radius:12px; box-shadow:0 6px 16px rgba(255,110,22,.28)} .pcab-side .cta.book:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(255,110,22,.34)} .pcab-side.pcab-side-contact{min-width:200px;gap:8px} .pcab-side.pcab-side-contact .cab-actions{display:flex;gap:8px;flex-wrap:wrap} .pcab-side.pcab-side-contact .cta{min-height:38px;padding:0 14px;font-size:.78rem;flex:1} .pcab-side.pcab-side-contact .cta.call{background:#fff8f2;color:var(--primary);border:1px solid #f4c8a0} .pcab-side.pcab-side-contact .cta.mail{background:var(--primary);color:#fff;border:1px solid var(--primary)} /* Responsive : sous 720px, la side passe en pleine largeur en bas */ @media (max-width:720px){ .pcab{grid-template-columns:56px minmax(0,1fr);row-gap:14px} .pcab-side{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;min-width:0} .pcab-side .next-slot{flex:1;min-width:150px} .pcab-side .cta.book{flex:1;min-width:120px} } /* ========================================================================== Reveal contact (Jacob 2026-07-18) — bouton « Afficher tél » / « Afficher e-mail » qui révèle au clic + dispatch un event pour tracking marketing. ========================================================================== */ .cta.reveal{background:#fff8f2;color:var(--primary);border:1px solid #f4c8a0;font-weight:700; min-height:38px;padding:0 16px;font-size:.78rem;border-radius:12px;cursor:pointer; display:inline-flex;align-items:center;gap:8px;transition:.18s ease;font-family:var(--font)} .cta.reveal:hover{background:var(--primary);color:#fff;border-color:var(--primary)} .cta.reveal svg{opacity:.9;flex:none} .cta.reveal[data-revealed="1"]{background:#fff;border-color:var(--line);color:var(--ink);cursor:text; font-family:var(--font);font-weight:700;letter-spacing:.01em} .cta.reveal[data-revealed="1"]:hover{background:#fff;color:var(--ink);border-color:var(--line)} .cta.reveal[data-revealed="1"] svg{display:none} /* ========================================================================== Badge URGENCES (Jacob 2026-07-18) — signale les praticiens qui prennent les urgences téléphoniques ou ont un slot dispo aujourd'hui. Couleur : rouge vermillon (distinct de l'orange marque, pour attirer l'œil). ========================================================================== */ .tag-urgent,.chip.urgent,.card-tags .tag-urgent{background:#fdecea !important;color:#b0261e !important; border:1px solid #f5c6c1 !important;font-weight:800 !important;display:inline-flex !important; align-items:center;gap:5px;padding:3px 10px !important;border-radius:999px !important;font-size:.62rem !important} .tag-urgent svg,.chip.urgent svg{width:11px;height:11px;flex:none} /* Animation "pulse" discrète sur l'icône tel pour attirer l'œil */ @keyframes urg-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}} .tag-urgent svg,.chip.urgent svg{animation:urg-pulse 1.8s ease-in-out infinite;transform-origin:center} @media (prefers-reduced-motion: reduce){.tag-urgent svg,.chip.urgent svg{animation:none}} /* Étiquette dans le hero fiche : légèrement plus voyante */ .fiche-hero .chip.urgent{padding:6px 9px !important;border-radius:8px !important} .tag-urgent.tag-inline{font-size:.62rem;margin-right:6px;vertical-align:middle} .slots .slot-compact{display:inline-flex;align-items:center;gap:12px;padding:3px 16px;background:#f8f9fa;border:1px solid #ececee;border-radius:10px;white-space:nowrap} .slots .slot-compact .ns-lbl{display:inline-flex;align-items:center;gap:5px;color:#6b7078;font-size:.58rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin:0} .slots .slot-compact .ns-dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 2px rgba(31,165,111,.16)} .slots .slot-compact strong{display:inline-block;font-size:.82rem;font-weight:800;color:var(--ink);border-left:1px solid #dcdfe2;padding-left:12px;line-height:1} /* Sponsor chips (Jacob 2026-07-18) — mêmes chips que la carte liste */ .showcase-chips{display:flex;flex-wrap:wrap;gap:6px;margin:5px 0 2px} .showcase-chips span{padding:4px 9px;border:1px solid #e7e9ec;border-radius:8px;background:#f6f7f8;font-size:.62rem;font-weight:700;color:#4a5056;display:inline-flex;align-items:center;gap:4px} .showcase-chips .lang{background:#f7f4f1;color:#3a4149;border-color:#e9e2d9} .showcase-chips .conv-yes{background:#e6f4ec;color:#087f4d;border-color:#c6e4d0;font-weight:800} .showcase-chips .newp{background:#fff2e6;color:#c95e18;border-color:#f4c8a0;font-weight:800} .showcase-chips .urg{background:#fdecea;color:#b0261e;border-color:#f5c6c1;font-weight:800;padding:3px 10px;border-radius:999px} .showcase-profile .rating.no-reviews{color:#a1a6ad;font-style:italic;font-weight:500;font-size:11px} .showcase-profile .rating.no-reviews .stars{color:#d9d9d9;font-style:normal} /* Sponsor top badge dynamique (Jacob 2026-07-18) */ .verified-pill.tb-urgence{background:#fdecea;color:#b0261e;border-color:#f5c6c1} .verified-pill.tb-conv{background:#e6f4ec;color:#087f4d;border-color:#c6e4d0} .verified-pill.tb-verified{background:#e6f4ec;color:#087f4d;border-color:#c6e4d0} .showcase-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:1px} .showcase-name-row h2{margin:0} .sc-urg-inline .tag-urgent.tag-inline{padding:3px 10px;font-size:.62rem;border-radius:999px;margin:0;vertical-align:middle} /* v1.7.x — Jacob 2026-07-18 : contact sponsor (tel/email) + finitions premium */ .sc-contact{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:5px} .sc-contact .sc-tel,.sc-contact .sc-mail{display:inline-flex;align-items:center;gap:5px;color:var(--primary-dark);font-size:11px;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap} .sc-contact .sc-tel:hover,.sc-contact .sc-mail:hover{text-decoration:underline} .sc-contact svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} /* v1.7.x — Jacob : recherche compacte dans le header, remplace la nav au scroll (desktop) */ .nav-center{display:flex;align-items:center;justify-content:center;min-width:0} .hdr-search{display:none;align-items:center;gap:6px;width:100%;max-width:520px;background:#fff;border:1px solid #efe4da;border-radius:999px;padding:5px 6px 5px 16px;box-shadow:0 6px 18px rgba(45,35,29,.07)} .hdr-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:.88rem;color:var(--ink)} .hdr-search input::placeholder{color:#9aa0a7} .hdr-search #hdrGo{flex:none;display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;background:var(--primary);color:#fff;font-weight:700;font-size:.82rem;border-radius:999px;padding:8px 15px;transition:.18s ease} .hdr-search #hdrGo:hover{background:var(--primary-dark);transform:translateY(-1px)} .hdr-search #hdrGo svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .site-header.scrolled .main-nav{display:none} .site-header.scrolled .hdr-search{display:flex} @media(max-width:640px){.nav-center{display:none}} @media(max-width:640px){.nav-actions button.pro{display:none}} /* v1.7.x — Jacob : bouton « revenir en haut » (apparaît au scroll, ramène aux filtres du hero) */ .to-top{position:fixed;right:22px;top:96px;z-index:60;width:46px;height:46px;border:0;cursor:pointer;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;box-shadow:0 10px 26px rgba(35,25,18,.24);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,visibility .2s,background .18s} .to-top:hover{background:var(--primary);transform:translateY(-2px)} .to-top.show{opacity:1;visibility:visible;transform:translateY(0)} .to-top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} @media(max-width:640px){.to-top{right:14px;top:auto;bottom:14px;width:42px;height:42px}} /* v1.7.x — Jacob : fiche praticien — photo sans cadre + air autour de la bannière statut */ .fiche-hero>.badge{display:flex;justify-content:center;margin:16px 0} .foot-in img,.fiche-foot img{display:none} .hero-foot .cta.call,.hero-foot .cta.mail{padding:8px 16px;font-size:.84rem} /* v1.7.x — Jacob : fiche — note client (5 étoiles/état sans avis) + mention non-client */ .rating-badge .stars{color:#ff9a4a;letter-spacing:1px} .rating-badge.rb-none{color:var(--muted2);font-weight:400} .rating-badge.rb-none .rc{font-weight:400;font-size:.86rem} .rating-badge.rb-none .stars{color:#d9dde1} .cabnote{font-size:.9rem;font-weight:600;color:var(--muted2);white-space:nowrap} /* v1.7.x — Jacob : prestations réservables en ligne (fiche personne, par cabinet) */ .pcab-svcs{margin-top:8px} .pcab-svcs-lbl{display:block;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted2);margin-bottom:5px} .pcab-svc-list{display:flex;flex-wrap:wrap;gap:6px} .pcab-svc{display:inline-block;padding:4px 11px;border-radius:8px;background:#fbf8f4;color:#444b54;border:1px solid #ebe2d6;font-size:.76rem;font-weight:500} /* v1.7.x — Jacob : pastille prochain RDV par praticien client (fiche cabinet) */ .prac-slot{display:inline-flex;flex-direction:column;align-items:flex-end;gap:1px;padding:6px 12px;border-radius:12px;background:var(--primary-soft);text-align:right} .prac-slot .ps-lbl{font-size:.6rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--primary-dark);display:flex;align-items:center;gap:5px} .prac-slot .ps-dot{width:6px;height:6px;border-radius:50%;background:#28a745} .prac-slot b{font-size:.85rem;color:var(--ink);white-space:nowrap} /* v1.7.x — Jacob : soins réservables sous chaque dentiste (fiche cabinet) */ .prac-svcs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .prac-svc{display:inline-block;padding:4px 11px;border-radius:8px;background:#fbf8f4;color:#444b54;border:1px solid #ebe2d6;font-size:.76rem;font-weight:500} /* v1.7.x — Jacob : contact cabinet en 2 boutons pastille (fiche perso) */ .pcab-cbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px} .pcab-cbtn{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:999px;border:1px solid #f0d9c8;background:#fff;color:var(--primary-dark);font-size:.82rem;font-weight:600;text-decoration:none;transition:background .15s,border-color .15s} .pcab-cbtn:hover{background:var(--primary-soft);border-color:transparent} .pcab-cbtn svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* v1.7.x — Jacob : enrichissement page sponsor (fiche perso) */ .hl-band{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 4px} .hl-item{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:.82rem;font-weight:600;color:var(--ink);box-shadow:0 2px 8px rgba(45,35,29,.04)} .hl-ico{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--primary-soft);color:var(--primary-dark);flex:none} .hl-ico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .about-text{margin:0;color:#4a5158;font-size:.95rem;line-height:1.65;white-space:pre-line} .pcab-svc em{font-style:normal;color:var(--muted2);margin-left:6px;font-weight:500} .pcab-hours{margin-top:10px} .pcab-hours>summary{cursor:pointer;font-size:.92rem;font-weight:700;color:var(--primary-dark);list-style:none;display:inline-flex;align-items:center;gap:6px} .pcab-hours>summary::-webkit-details-marker{display:none} .pcab-hours>summary::before{content:"\25B8";transition:transform .15s} .pcab-hours[open]>summary::before{transform:rotate(90deg)} .pcab-hours table.hours{margin-top:8px;width:100%;max-width:360px} .fiche-map{height:280px;border-radius:16px;overflow:hidden;border:1px solid var(--line);z-index:0} /* v1.7.x — Jacob : galerie photos du cabinet, sous le hero (fiche perso) */ .fiche-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0 4px} .fg-item{display:block;aspect-ratio:1/1;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#f4f0eb} .fg-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease} .fg-item:hover img{transform:scale(1.05)} @media(max-width:640px){.fiche-gallery{grid-template-columns:repeat(2,1fr)}} /* v1.7.x — Jacob : pastille « prochain RDV » cliquable vers la prise de RDV (pas le profil) */ .next-slot.as-book{display:block;cursor:pointer;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s} .next-slot.as-book:hover{border-color:var(--primary);box-shadow:0 2px 10px rgba(255,110,22,.14)} .pcab-extra{font-size:.85rem;color:#444b54;margin-top:6px;line-height:1.5} .pcab-extra strong{color:var(--ink);font-weight:700} /* v1.7.5 - Carte praticien des fiches : responsive mobile. .prac etait un flex horizontal SANS wrap -> sur telephone le bloc 'Prochaine dispo + Reserver' (.prac-act) debordait et chevauchait les infos (langues empilees, boutons par-dessus le texte). On empile : avatar + infos en haut, dispo + CTA sur une ligne pleine en dessous. */ @media(max-width:560px){ .prac{ flex-wrap:wrap; align-items:flex-start; gap:12px; } .prac-main{ flex:1 1 calc(100% - 54px); } .prac-act{ flex:1 1 100%; width:100%; flex-direction:row; align-items:center; justify-content:space-between; margin-top:4px; gap:12px; } .prac-slot{ align-items:flex-start; text-align:left; } .prac-act .cta.book{ flex:0 0 auto; } } /* v1.7.5 - Corrections header mobile (pages inscription + legales) : #10 le bouton 'Precedent' etait masque sous 640px -> on le REMONTRE. #6/#8 sous 380px, .nav-wrap repassait en 2 colonnes -> le selecteur FR tombait sur une 2e ligne, aligne a gauche. On garde 3 colonnes (logo | espace | actions) pour le laisser a DROITE sur la meme ligne que le logo. */ @media(max-width:640px){ .nav-actions button.pro{ display:inline-flex !important; align-items:center; font-size:.72rem; padding:6px 10px; white-space:nowrap; } } @media(max-width:380px){ .nav-wrap{ grid-template-columns:auto 1fr auto !important; } } /* v1.7.5 - Finitions carte vitrine + bouton recherche (mobile) */ /* #1 - le mot 'Rechercher' n'etait pas centre verticalement : en mobile, padding:13px s'ajoutait a un line-height:44px fixe -> texte pousse en haut. On repasse en centrage flex avec line-height normal. */ @media(max-width:720px){ .search #go{ height:auto; line-height:1.2; padding:14px 20px; display:flex; align-items:center; justify-content:center; } } /* Puce 'verifie Smilo' (et chips Urgences/Conventionne qui partagent la classe) sur UNE ligne. */ .verified-pill{ white-space:nowrap; } /* 'Pas encore d'avis' : ne plus casser le libelle mot par mot. */ .rating.no-reviews, .rating.no-reviews>span{ white-space:nowrap; } /* v1.7.5 - Carte sponsor (vitrine) sur mobile : le contenu (photo + nom) etait pousse a droite par le cumul des paddings (conteneur 26px + carte 24px = ~50px). On rapproche du bord gauche et on elargit la colonne -> le bloc nom/avis respire, 'Pas encore d'avis' tient mieux. */ @media(max-width:720px){ .hero-showcase{ padding-left:14px; padding-right:14px; } .showcase-card{ padding:18px 16px; } .showcase-profile{ gap:12px; } } /* v1.7.5 - Lot finitions fiches (captures Jacob) */ /* img1 : menu de filtre langue -> ascenseur si beaucoup de langues */ .f-dd-menu{ max-height:min(58vh,320px); overflow-y:auto; } /* #2 : adresses/communes en Nom Propre meme si saisies en minuscules. text-transform:capitalize -> marche sur les fiches statiques ET dynamiques, sans refonte backend. (N'abaisse pas les MAJUSCULES deja presentes : cas rare.) */ .card-address, .fiche-hero .loc, #scAddr, .showcase-clinic small, .fiche-hero .loc span, .prac .card-address{ text-transform:capitalize; } /* img5 : bouton Reserver des cartes praticien -> taille du texte (pas 100%), pour rester sur la meme ligne que 'Prochaine dispo' sans deborder. */ @media(max-width:560px){ .prac-act .cta{ width:auto !important; flex:0 0 auto !important; padding:0 18px; align-items:center; } .prac-act{ justify-content:space-between; align-items:stretch; } } /* v1.7.5 - Header pages praticien/inscription/legales sur mobile (iPhone 12+ ~390px) Le lien « L'annuaire patients → » (a.pro) restait visible entre 381 et 640px et debordait a droite. On garde logo + FR + « ← Precedent », on masque ce lien secondaire sur mobile (le bouton retour couvre la navigation). */ @media(max-width:640px){ .nav-actions a.pro{ display:none !important; } } /* v1.7.5 - Fiche cabinet : remonter la photo du praticien au niveau du nom. .prac est aligne center par defaut (avatar centre verticalement) -> on top-aligne UNIQUEMENT l'avatar (align-self), le bouton Reserver ne bouge pas. Le mobile est deja en align-items:flex-start -> aucun impact responsive. */ .prac > img, .prac > .ava{ align-self:flex-start; }