/* ========================================================================= DESIGN SYSTEM Noir & blanc pur, inspiration Apple. Aucune couleur d'accent. C'est la typographie (Inter) et l'espace vide qui portent le design. ========================================================================= */ /* :root UNIQUE (Lot E) — les 3 blocs fragmentés sont fusionnés ici. */ :root{ color-scheme:light; /* thème clair forcé : anti Auto-Dark mobile (voir ) */ --black:#000000; /* texte, boutons, icônes */ --white:#FFFFFF; /* fond */ --grey-bg:#F5F5F7; /* zones, fonds d'icônes */ --grey-line:#E5E5E5; /* séparateurs */ --grey-text:#6E6E73; /* texte secondaire — 4,6:1 sur --grey-bg (AA), Lot E */ --danger:#DC2626; /* rouge d'erreur UNIQUE (Lot E) */ --radius:14px; /* coins arrondis des boutons */ --radius-lg:22px; /* coins arrondis des cartes */ --max:1080px; /* largeur max de la vitrine */ --app:460px; /* largeur max de l'app (mobile) */ --ease:cubic-bezier(.4,0,.2,1); /* — ex-bloc 2 (pilules Apple) — */ --apple-blue:#1d1d1f; --apple-blue-btn:#1d1d1f; --apple-text:#1d1d1f; --pill:980px; /* — ex-bloc 3 (verre / encre / easings V9) — */ --glass:var(--white); --glass-line:var(--grey-line); --ink:#0a0a0c; --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1); } /* --- Reset léger -------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; font-weight:400; color:var(--black); background:var(--grey-bg); line-height:1.5; overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; letter-spacing:-0.01em; } img,svg{display:block} /* ===== GARDE-FOU GLOBAL ANTI « ICÔNE GÉANTE » ========================== Toute icône SVG SANS taille propre (ni attribut width/height, ni règle CSS dédiée) est bornée à 24px. La sélecteur est en :where() → spécificité NULLE : toutes les règles « .xxx svg » existantes restent prioritaires (ex. .cat svg=46px, .map svg=100%), donc rien n'est cassé. Seuls les SVG « orphelins » (nouveaux, dynamiques, ou dont la règle manque) sont capturés ici — ils ne pourront plus jamais remplir l'écran. flex:none = jamais étiré/écrasé dans un conteneur flex. */ :where(svg:not([width]):not([height])){width:24px;height:24px} svg{flex:none} /* Icônes Lucide en SVG inline () : dimensionnées par zone. Aucune dépendance réseau — s'affichent identiquement en file:// hors-ligne. */ svg.lucide{width:22px;height:22px;flex:none;stroke-width:1.8} .header svg.lucide{width:20px;height:20px} .bottom-nav svg.lucide{width:24px;height:24px} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} input{font-family:inherit} a{color:inherit;text-decoration:none} /* Accessibilité : focus clavier visible + respect du "reduced motion" */ :focus-visible{outline:2px solid var(--black);outline-offset:3px;border-radius:4px} @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important;scroll-behavior:auto!important} } /* --- Boutons réutilisables --------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-weight:600;font-size:17px;letter-spacing:-0.01em; padding:16px 28px;border-radius:var(--radius); transition:transform .15s var(--ease),opacity .15s var(--ease),background .15s var(--ease); user-select:none; } .btn:active{transform:scale(.97)} .btn-primary{background:var(--black);color:var(--white)} .btn-primary:hover{opacity:.85} .btn-outline{background:var(--white);color:var(--black);box-shadow:inset 0 0 0 1.5px var(--grey-line)} .btn-outline:hover{box-shadow:inset 0 0 0 1.5px var(--black)} .btn-block{display:flex;width:100%} /* ========================================================================= HEADER FIXE ========================================================================= */ .header{ position:fixed;top:0;left:0;right:0;z-index:100; display:flex;align-items:center;justify-content:space-between; height:56px;padding:0 16px;gap:8px; background:rgba(245,245,247,.8); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--grey-line); } .header > *{flex-shrink:0} .logo{flex-shrink:0} /* Logotype texte — REMPLACEZ "Prestaa" par votre marque */ .logo{font-weight:800;font-size:21px;letter-spacing:-0.04em} /* Sélecteur de zone (centre) */ .zone{position:relative} .zone-btn{ display:inline-flex;align-items:center;gap:6px; font-weight:500;font-size:14px;color:var(--black); padding:7px 10px;border-radius:10px;transition:background .15s var(--ease); white-space:nowrap; } .zone-btn:hover{background:var(--grey-bg)} .zone-btn svg{transition:transform .2s var(--ease)} .zone.open .zone-btn svg{transform:rotate(180deg)} .zone-menu{ position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) scale(.96); min-width:200px;background:var(--white);border:1px solid var(--grey-line); border-radius:var(--radius);padding:6px; box-shadow:0 12px 32px rgba(0,0,0,.10); opacity:0;pointer-events:none;transform-origin:top center; transition:opacity .18s var(--ease),transform .18s var(--ease); } .zone.open .zone-menu{opacity:1;pointer-events:auto;transform:translateX(-50%) scale(1)} .zone-item{ display:flex;align-items:center;justify-content:space-between; padding:11px 12px;border-radius:9px;font-size:14px;font-weight:500;width:100%;text-align:left; } .zone-item:hover{background:var(--grey-bg)} .zone-item.soon{color:var(--grey-text);cursor:default} .zone-item.soon:hover{background:transparent} .zone-item .tag{font-size:11px;font-weight:600;color:var(--grey-text)} .zone-item .chk{color:var(--black)} .account-btn{ font-weight:500;font-size:14px;padding:8px 14px;border-radius:10px;white-space:nowrap; box-shadow:inset 0 0 0 1px var(--grey-line);transition:background .15s var(--ease); } .account-btn:hover{background:var(--grey-bg)} /* --- Notifications (cloche dans le header) ------------------------------ */ .header-right{display:flex;align-items:center;gap:2px} .hicon{width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;transition:background .15s var(--ease)} .hicon:hover{background:var(--grey-bg)} .hicon svg{width:19px;height:19px;color:var(--black)} .notif{position:relative} .notif-btn{ position:relative;width:38px;height:38px;border-radius:10px; display:inline-flex;align-items:center;justify-content:center;transition:background .15s var(--ease); } .notif-btn:hover{background:var(--grey-bg)} .notif-btn svg{width:19px;height:19px;color:var(--black)} .notif-badge{ position:absolute;top:5px;right:5px;min-width:16px;height:16px;padding:0 4px;border-radius:8px; background:var(--black);color:var(--white);font-size:10px;font-weight:700;line-height:1; display:flex;align-items:center;justify-content:center;border:2px solid var(--white); } .notif-badge.hide{display:none} .hicon-cart{position:relative} .hcart-badge{ position:absolute;top:5px;right:5px;min-width:16px;height:16px;padding:0 4px;border-radius:8px; background:var(--black);color:var(--white);font-size:10px;font-weight:700;line-height:1; display:flex;align-items:center;justify-content:center;border:2px solid var(--white); } .hcart-badge.hide{display:none} .hcart-badge.pop{animation:pop .45s var(--ease) both} .notif-menu{ position:fixed;top:60px;right:12px;left:auto;width:320px;max-width:calc(100vw - 24px); background:var(--white);border:1px solid var(--grey-line);border-radius:var(--radius);padding:6px; box-shadow:0 12px 32px rgba(0,0,0,.12);z-index:120; opacity:0;pointer-events:none;transform:scale(.96);transform-origin:top right; transition:opacity .18s var(--ease),transform .18s var(--ease); } .notif.open .notif-menu{opacity:1;pointer-events:auto;transform:scale(1)} .notif-mhead{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--grey-text);padding:10px 12px 8px} .notif-item{ display:flex;align-items:flex-start;gap:11px;padding:12px;border-radius:10px;width:100%;text-align:left; position:relative;transition:background .12s var(--ease); } .notif-item:hover{background:var(--grey-bg)} .notif-item .ni-ic{width:38px;height:38px;border-radius:50%;background:var(--black);flex-shrink:0;display:flex;align-items:center;justify-content:center} .notif-item .ni-ic svg{width:19px;height:19px;color:var(--white)} .notif-item.read .ni-ic{background:var(--grey-bg)} .notif-item.read .ni-ic svg{color:var(--grey-text)} .notif-item .ni-txt{flex:1;min-width:0;padding-right:10px} .notif-item .ni-txt b{display:block;font-weight:600;font-size:14px;letter-spacing:-0.01em} .notif-item .ni-txt small{display:block;color:var(--grey-text);font-size:12.5px;line-height:1.35;margin-top:2px} .notif-item .ni-time{display:block;color:var(--grey-text);font-size:11px;margin-top:5px} .notif-item .ni-dot{position:absolute;top:15px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--black)} .notif-item.read .ni-dot{display:none} /* ========================================================================= STRUCTURE VITRINE ========================================================================= */ .wrap{max-width:var(--max);margin:0 auto;padding:0 20px} .section{padding:36px 0} .section-label{ font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase; color:var(--grey-text);margin-bottom:10px; } /* --- HERO --------------------------------------------------------------- */ .hero{padding:66px 20px 8px;text-align:center} .hero h1{ font-weight:800;letter-spacing:-0.045em;line-height:1.02; font-size:clamp(40px,9.5vw,82px); } .hero p{ max-width:520px;margin:8px auto 0; font-size:clamp(14px,2vw,16px);color:var(--black);font-weight:400;line-height:1.45; } .hero-cta{margin-top:36px} .hero-note{margin-top:18px;font-size:13px;color:var(--grey-text);font-weight:500} /* --- Barre de recherche FIXE (sticky) + libellé assistant IA ----------- */ .search-sticky{ position:sticky;top:56px;z-index:60; background:var(--grey-bg); padding:10px 20px 10px; box-shadow:0 10px 20px -18px rgba(0,0,0,.4); } .search-ai-label{ display:flex;align-items:center;justify-content:center;gap:7px; font-size:13.5px;font-weight:700;letter-spacing:-0.01em;margin-bottom:8px; background:var(--black);-webkit-background-clip:text;background-clip:text;color:transparent; } .search-ai-label svg{width:16px;height:16px;stroke:url(#iconGrad);fill:none;flex-shrink:0} .hero-sub{text-align:center;padding:12px 20px 0} .hero-sub .hero-note{margin-top:0} .hero-sub .hero-link{margin-top:5px} /* --- GRILLE DES 12 CATÉGORIES ------------------------------------------ */ .cats{ display:grid;grid-template-columns:repeat(2,1fr);gap:10px; } .cat{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px; background:var(--white);border:none;border-radius:var(--radius-lg); box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 20px rgba(0,0,0,.05); padding:20px 12px;min-height:112px;width:100%;text-align:center;cursor:pointer; transition:transform .2s var(--ease),box-shadow .2s var(--ease); position:relative; } .cat:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 18px 34px rgba(0,0,0,.12);z-index:2} .cat:active{transform:translateY(-1px) scale(.99)} .cat-media{ display:flex;align-items:center;justify-content:center; background:transparent; } .cat-icon{ width:80%;height:80%;object-fit:contain;display:block; filter:drop-shadow(0 13px 13px rgba(0,0,0,.24)); transition:transform .3s var(--ease),filter .3s var(--ease); } .cat:hover .cat-icon{transform:translateY(-7px) scale(1.07);filter:drop-shadow(0 24px 22px rgba(0,0,0,.30))} .cat:active .cat-icon{transform:translateY(-2px) scale(1.02)} .cat svg{width:46px;height:46px;color:var(--black)} .cat span{font-size:15px;font-weight:600} .cat.soon{color:var(--grey-text)} .cat.soon .cat-icon{opacity:.9} .cat.soon svg{color:var(--grey-text);opacity:.55} .cat.soon span{color:var(--grey-text)} .cat .soon-pill{ position:absolute;top:10px;right:10px;font-size:10px;font-weight:600; color:var(--grey-text);background:var(--white);padding:3px 7px;border-radius:20px; letter-spacing:.02em; } /* --- BARRE DE RECHERCHE IA --------------------------------------------- */ .search-zone{margin-top:16px;position:relative;max-width:560px;margin-left:auto;margin-right:auto} .search-sticky .search-zone{margin-top:0;max-width:620px} .search-box{ display:flex;align-items:center;gap:10px; background:var(--white);border-radius:999px; padding:0 8px 0 20px;height:56px; box-shadow:0 1px 6px rgba(0,0,0,.08), inset 0 0 0 1px var(--grey-line); transition:box-shadow .18s var(--ease); } .search-box:hover{box-shadow:0 3px 14px rgba(0,0,0,.14), inset 0 0 0 1px transparent} .search-box:focus-within{box-shadow:0 3px 18px rgba(0,0,0,.16), inset 0 0 0 1px transparent} .sb-go{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--grey-text)} .sb-go svg{width:20px;height:20px} .search-box input{ border:none;outline:none;background:transparent;width:100%;height:100%; font-size:17px;font-weight:400;color:var(--black);text-align:left; } .search-box input::placeholder{color:var(--grey-text)} .sb-mic{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;flex-shrink:0;transition:background .15s var(--ease)} .sb-mic:hover{background:var(--grey-bg)} .sb-mic svg{width:21px;height:21px;stroke:url(#iconGrad)} /* --- Demande personnalisée (multi-offres) ------------------------------ */ .hero-link{display:inline-block;margin-top:16px;font-size:13.5px;font-weight:600;color:var(--grey-text);text-decoration:underline;text-underline-offset:3px;transition:color .15s var(--ease)} .hero-link:hover{color:var(--black)} .offers-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px} .offers-head b{font-size:17px;font-weight:700} .sort-tabs{display:flex;gap:4px;background:var(--grey-bg);border-radius:999px;padding:3px;flex-shrink:0} .sort-tab{font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:999px;color:var(--grey-text);transition:all .15s var(--ease)} .sort-tab.active{background:var(--white);color:var(--black);box-shadow:0 1px 4px rgba(0,0,0,.10)} .offer-card{border:1px solid var(--grey-line);border-radius:var(--radius);padding:16px;margin-bottom:12px;animation:offerIn .35s var(--ease) both} @keyframes offerIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .oc-head{display:flex;align-items:center;gap:12px} .oc-av{width:46px;height:46px;border-radius:50%;background:var(--black);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;flex-shrink:0} .oc-id{flex:1;min-width:0} .oc-id b{font-size:15.5px;font-weight:600;display:block} .oc-meta{font-size:12.5px;color:var(--grey-text);margin-top:2px} .oc-price{font-size:22px;font-weight:800;flex-shrink:0} .oc-msg{font-size:13.5px;color:var(--grey-text);line-height:1.45;margin:12px 0 14px} .offers-wait{display:flex;align-items:center;gap:12px;color:var(--grey-text);font-size:14px;padding:16px 2px} .spin{width:20px;height:20px;border:2.5px solid var(--grey-line);border-top-color:var(--black);border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0} @keyframes spin{to{transform:rotate(360deg)}} .cu-badge{display:inline-block;background:var(--grey-bg);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:600;color:var(--grey-text);margin-bottom:18px} /* Suggestions IA */ .suggest{ position:absolute;top:calc(100% + 8px);left:0;right:0; background:var(--white);border:1px solid var(--grey-line);border-radius:var(--radius); padding:6px;box-shadow:0 16px 40px rgba(0,0,0,.10);z-index:20; opacity:0;pointer-events:none;transform:translateY(-6px); transition:opacity .18s var(--ease),transform .18s var(--ease); } .suggest.show{opacity:1;pointer-events:auto;transform:none} .suggest-item{ display:flex;align-items:center;gap:14px;width:100%;text-align:left; padding:13px 14px;border-radius:10px;transition:background .12s var(--ease); } .suggest-item:hover{background:var(--grey-bg)} .suggest-item .si-ic{ width:38px;height:38px;flex-shrink:0;border-radius:11px;background:var(--grey-bg); display:flex;align-items:center;justify-content:center; } .suggest-item .si-ic svg{width:19px;height:19px} .suggest-item .si-txt b{display:block;font-weight:600;font-size:15px} .suggest-item .si-txt small{color:var(--grey-text);font-size:13px} .suggest-item .si-arrow{margin-left:auto;color:var(--grey-text)} /* Bouton secondaire : entrée prestataire */ .pro-cta{margin:28px auto 0;display:block} .pro-cta-inner{ display:inline-flex;align-items:center;gap:10px;margin:0 auto; font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--black); padding:14px 26px;border-radius:var(--radius);box-shadow:inset 0 0 0 1.5px var(--grey-line); transition:box-shadow .15s var(--ease); } .pro-cta:hover .pro-cta-inner{box-shadow:inset 0 0 0 1.5px var(--black)} .cta-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:stretch;margin-top:20px} .cta-row .pro-cta{margin:0;flex:1 1 150px;display:flex} .cta-row .pro-cta-inner{display:flex;width:100%;justify-content:center;text-align:center;padding:13px 14px;font-size:12px;letter-spacing:.04em} /* --- COMMENT ÇA MARCHE -------------------------------------------------- */ .steps{display:grid;grid-template-columns:1fr;gap:20px} .step{ display:flex;gap:18px;align-items:flex-start; padding:26px;background:var(--white);border-radius:var(--radius-lg);box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 20px rgba(0,0,0,.05); } .step-num{ flex-shrink:0;width:34px;height:34px;border-radius:50%; background:var(--black);color:var(--white); display:flex;align-items:center;justify-content:center; font-weight:700;font-size:15px; } .step h3{font-size:18px;font-weight:700;margin-bottom:4px;letter-spacing:-0.02em} .step p{font-size:15px;color:var(--grey-text);line-height:1.45} /* --- COMPARAISON -------------------------------------------------------- */ /* (.compare* supprimés — Lot D : tableau comparatif jamais rendu dans l'app.) */ .ico-yes,.ico-no{display:inline-flex;width:22px;height:22px} .ico-no{color:var(--grey-text)} /* --- FOOTER ------------------------------------------------------------- */ .footer{border-top:1px solid var(--grey-line);padding:26px 20px;margin-top:8px} .footer-inner{max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between} .footer .logo{font-size:18px} .footer-links{display:flex;flex-wrap:wrap;gap:22px} .footer-links a{font-size:13px;color:var(--grey-text);font-weight:500;transition:color .15s} .footer-links a:hover{color:var(--black)} .footer-meta{font-size:13px;color:var(--grey-text);width:100%;border-top:1px solid var(--grey-line);padding-top:20px;margin-top:6px} /* ========================================================================= APP — PARCOURS PLEIN ÉCRAN ========================================================================= */ .app{ position:fixed;inset:0;z-index:200;background:var(--white); display:none;flex-direction:column; opacity:0;transition:opacity .28s var(--ease); } .app.open{display:flex;opacity:1} .app.open.entering{opacity:0} /* Barre supérieure : retour · progression · fermer */ .app-top{ flex-shrink:0;display:flex;align-items:center;gap:14px; height:56px;padding:0 16px;border-bottom:1px solid var(--grey-line); padding-top:env(safe-area-inset-top); } .app-icon-btn{ width:38px;height:38px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; transition:background .15s var(--ease); } .app-icon-btn:hover{background:var(--grey-bg)} .app-icon-btn svg{width:20px;height:20px} .progress{flex:1;height:4px;background:var(--grey-line);border-radius:4px;overflow:hidden} .progress-bar{height:100%;width:0;background:var(--black);border-radius:4px;transition:width .45s var(--ease)} /* Corps : les écrans sont empilés en absolu, un seul actif */ .app-body{flex:1;position:relative;overflow:hidden} .screen{ position:absolute;inset:0;overflow-y:auto; display:flex;flex-direction:column;align-items:center; padding:32px 22px 40px; opacity:0;transform:translateX(24px);pointer-events:none; transition:opacity .32s var(--ease),transform .32s var(--ease); } .screen.active{opacity:1;transform:none;pointer-events:auto} .screen-inner{width:100%;max-width:var(--app);margin:0 auto;flex:1;display:flex;flex-direction:column} /* En-tête d'écran (titre + sous-titre) */ .q-eyebrow{font-size:13px;font-weight:600;color:var(--grey-text);letter-spacing:.03em;margin-bottom:10px} .q-title{font-size:28px;font-weight:700;letter-spacing:-0.03em;line-height:1.12} .q-sub{font-size:16px;color:var(--grey-text);margin-top:10px;line-height:1.45} /* Conteneur des options : panneau gris uni → support du verre dépoli des rangées. */ .q-options{display:flex;flex-direction:column;gap:12px;margin-top:26px;background:#e9eaee;border-radius:22px;padding:14px} /* Rangées de choix en VERRE DÉPOLI translucide (modèle validé). */ .choice{ position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px; width:100%;text-align:left;cursor:pointer;padding:16px 18px;border-radius:16px;color:var(--black); background:linear-gradient(150deg, rgba(255,255,255,.42), rgba(255,255,255,.16)); border:1px solid rgba(255,255,255,.55); backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%); box-shadow:0 4px 14px rgba(30,40,80,.08), inset 0 1px 1px rgba(255,255,255,.8); transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .16s ease,border-color .16s ease; } .choice:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(30,40,80,.12), inset 0 1px 1px rgba(255,255,255,.8)} .choice:active{transform:scale(.985)} /* Texte : nouveau markup (.choice-txt) + ancien (.c-main, boutons hardcodés provider/slots) */ .choice-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1} .choice-title{font-size:16.5px;font-weight:600;line-height:1.2} .choice-desc{font-size:13px;color:var(--grey-text);line-height:1.2} /* Icône d'option à gauche du titre (une par option, injectée par choiceBtn) */ .choice-ic{width:26px;height:26px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:var(--ink)} .choice-ic svg{width:26px;height:26px} .choice--urgent .choice-ic{color:var(--danger)} @media (max-width:380px){ .choice-ic,.choice-ic svg{width:22px;height:22px} } .choice .c-ic{width:30px;height:30px;flex-shrink:0;color:var(--black)} .choice .c-main{flex:1;min-width:0} .choice .c-main b{display:block;font-size:16.5px;font-weight:600;letter-spacing:-0.01em} .choice .c-main small{color:var(--grey-text);font-size:13px} /* Pastille de sélection : cercle vide → noir coché quand .selected (comme le modèle) */ .choice-check{width:26px;height:26px;border-radius:50%;flex:0 0 auto;border:1.5px solid rgba(0,0,0,.18);background:rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;color:#fff;transition:.16s} .choice-check .icon{width:15px;height:15px;opacity:0;transition:opacity .16s} .choice .c-check{width:24px;height:24px;color:var(--black);opacity:0;transition:opacity .15s} .choice.selected{border-color:rgba(0,0,0,.85);background:linear-gradient(150deg, rgba(255,255,255,.6), rgba(255,255,255,.3));box-shadow:0 6px 18px rgba(30,40,80,.14), inset 0 1px 1px rgba(255,255,255,.9)} .choice.selected .choice-check{background:var(--black);border-color:var(--black)} .choice.selected .choice-check .icon{opacity:1} .choice.selected .c-check{opacity:1} /* Cascade "rowin" à l'entrée de l'écran (une par une, ~65 ms). fill=backwards → caché pendant le délai puis révèle, et laisse hover/:active reprendre après. Défaut : visible (donc reduced-motion + boutons hors .screen restent visibles). */ @media (prefers-reduced-motion:no-preference){ .screen.active .q-options .choice{animation:rowin .5s cubic-bezier(.34,1.56,.64,1) backwards} .screen.active .q-options .choice:nth-child(1){animation-delay:0ms} .screen.active .q-options .choice:nth-child(2){animation-delay:65ms} .screen.active .q-options .choice:nth-child(3){animation-delay:130ms} .screen.active .q-options .choice:nth-child(4){animation-delay:195ms} .screen.active .q-options .choice:nth-child(5){animation-delay:260ms} .screen.active .q-options .choice:nth-child(6){animation-delay:325ms} .screen.active .q-options .choice:nth-child(7){animation-delay:390ms} .screen.active .q-options .choice:nth-child(n+8){animation-delay:455ms} } @keyframes rowin{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:translateY(0)}} /* Sous-créneaux "Date précise" */ .subslot{display:none;flex-direction:column;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--grey-line)} .subslot.show{display:flex} /* Champ adresse / paiement */ .field{ width:100%;height:58px;border-radius:var(--radius);background:var(--grey-bg); padding:0 18px;font-size:17px;border:none;outline:none;color:var(--black); box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .15s,background .15s; } .field:focus{background:var(--white);box-shadow:inset 0 0 0 1.5px var(--black)} .field::placeholder{color:var(--grey-text)} .field-label{font-size:13px;font-weight:600;color:var(--grey-text);margin:18px 0 8px} .address-hint{font-size:13px;color:var(--grey-text);margin-top:12px;display:flex;align-items:center;gap:7px} /* Pied d'écran avec le bouton de validation */ .q-foot{margin-top:auto;padding-top:28px} /* --- ÉCRAN PRIX : le moment clé ---------------------------------------- */ .price-screen{justify-content:center;text-align:center} .price-market{ font-size:17px;color:var(--grey-text);font-weight:500; text-decoration:line-through;text-decoration-thickness:1.5px; } .price-market span{font-size:13px;text-decoration:none;display:block;margin-bottom:4px;letter-spacing:.02em} .price-big{ font-weight:900;letter-spacing:-0.05em;line-height:1; font-size:clamp(76px,24vw,128px);margin:10px 0 6px; } .price-firm{ display:inline-flex;align-items:center;gap:7px; font-size:14px;font-weight:600;color:var(--black); background:var(--grey-bg);padding:8px 16px;border-radius:20px; } .price-recap{font-size:14px;color:var(--grey-text);margin-top:22px;line-height:1.6;max-width:340px} .price-save{font-size:14px;font-weight:600;color:var(--black);margin-top:6px} .price-actions{display:flex;flex-direction:column;gap:12px;margin-top:36px;width:100%;max-width:340px} /* --- ÉCRAN PAIEMENT ----------------------------------------------------- */ .pay-recap{ width:100%;background:var(--grey-bg);border-radius:var(--radius); padding:20px 22px;display:flex;align-items:center;justify-content:space-between;margin-top:8px; } .pay-recap .pr-l b{display:block;font-size:16px;font-weight:600} .pay-recap .pr-l small{color:var(--grey-text);font-size:13px} .pay-recap .pr-amount{font-size:24px;font-weight:800;letter-spacing:-0.03em} .card-row{display:flex;gap:12px} .card-row .field{flex:1} .pay-secure{ display:flex;align-items:flex-start;gap:9px;margin-top:20px; font-size:13px;color:var(--grey-text);line-height:1.4; } .pay-secure svg{flex-shrink:0;width:16px;height:16px;margin-top:1px} .demo-note{text-align:center;font-size:12px;color:var(--grey-text);margin-top:14px;font-weight:500} /* --- ÉCRAN CONFIRMATION ------------------------------------------------- */ .confirm-screen{justify-content:flex-start;text-align:center} .check-circle{ width:72px;height:72px;border-radius:50%;background:var(--black); display:flex;align-items:center;justify-content:center;margin:18px auto 0; animation:pop .5s var(--ease) both; } .check-circle svg{width:36px;height:36px;color:var(--white)} @keyframes pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}} .confirm-screen h2{font-size:28px;font-weight:800;letter-spacing:-0.03em;margin-top:22px} .confirm-screen .c-sub{color:var(--grey-text);font-size:16px;margin-top:8px} /* Mini-carte stylisée */ .map{ width:100%;height:150px;background:var(--grey-bg);border-radius:var(--radius-lg); margin-top:28px;overflow:hidden;position:relative; } .map svg{width:100%;height:100%} /* Suivi temps réel (stepper vertical) */ .track{width:100%;text-align:left;margin-top:24px;display:flex;flex-direction:column} .track-step{display:flex;align-items:center;gap:14px;padding:14px 0;position:relative} .track-step:not(:last-child)::after{ content:"";position:absolute;left:11px;top:38px;bottom:-6px;width:2px;background:var(--grey-line); } .track-step.done:not(:last-child)::after{background:var(--black)} .track-dot{ width:24px;height:24px;border-radius:50%;flex-shrink:0; box-shadow:inset 0 0 0 2px var(--grey-line);background:var(--white); display:flex;align-items:center;justify-content:center; transition:box-shadow .3s var(--ease),background .3s var(--ease); } .track-dot svg{width:13px;height:13px;color:var(--white);opacity:0;transition:opacity .3s} .track-step.done .track-dot{background:var(--black);box-shadow:inset 0 0 0 2px var(--black)} .track-step.done .track-dot svg{opacity:1} .track-step.current .track-dot{box-shadow:inset 0 0 0 2px var(--black)} .track-label{font-size:16px;font-weight:500;color:var(--grey-text);transition:color .3s} .track-step.done .track-label,.track-step.current .track-label{color:var(--black);font-weight:600} /* ========================================================================= MODALE GÉNÉRIQUE ("Bientôt disponible", espace pro, compte…) ========================================================================= */ .modal{ position:fixed;inset:0;z-index:300;display:none; align-items:center;justify-content:center;padding:24px; background:rgba(0,0,0,.4);opacity:0;transition:opacity .22s var(--ease); } .modal.open{display:flex;opacity:1} .modal-card{ background:var(--white);border-radius:var(--radius-lg);padding:36px 30px; max-width:380px;width:100%;text-align:center; transform:scale(.92);transition:transform .26s var(--ease); } .modal.open .modal-card{transform:scale(1)} .modal-ic{ width:56px;height:56px;border-radius:50%;background:var(--grey-bg); display:flex;align-items:center;justify-content:center;margin:0 auto 20px; } .modal-ic svg{width:26px;height:26px} .modal-card h3{font-size:21px;font-weight:700;letter-spacing:-0.02em} .modal-card p{color:var(--grey-text);font-size:15px;margin-top:10px;line-height:1.5} .modal-card .btn{margin-top:26px} /* ========================================================================= OVERLAYS GÉNÉRIQUES (catalogue, espace prestataire) ========================================================================= */ .overlay{ position:fixed;inset:0;z-index:200;background:var(--white); display:none;flex-direction:column;opacity:0;transition:opacity .28s var(--ease); } .overlay.open{display:flex;opacity:1} .overlay.open.entering{opacity:0} .ov-title{flex:1;text-align:center;font-weight:600;font-size:16px;letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ov-body{flex:1;overflow-y:auto;padding:28px 22px 40px;-webkit-overflow-scrolling:touch} /* ========================================================================= DÉCOUVRIR AUTOUR DE MOI — CTA accueil + feed scroll infini (overlay #discover) Verre + dégradé de marque uniquement (base couleur sacrée). Pas de blur animé. ========================================================================= */ /* CTA sur la home */ .dsc-cta{display:flex;align-items:center;gap:14px;width:100%;text-align:left; background:var(--glass);border-radius:var(--radius-lg);padding:16px 18px; box-shadow:inset 0 0 0 1px var(--glass-line), 0 10px 28px rgba(10,10,12,.07); -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px); transition:box-shadow .35s var(--ease-out), transform .2s var(--ease-out);will-change:transform} .dsc-cta:hover{box-shadow:inset 0 0 0 1px rgba(0,0,0,.35), 0 22px 50px rgba(10,10,12,.14)} .dsc-cta:active{transform:scale(.99)} .dsc-cta-ic{flex-shrink:0;width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center; color:var(--white);background:var(--black)} .dsc-cta-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .dsc-cta-txt b{font-size:16px;letter-spacing:-0.01em;color:var(--ink)} .dsc-cta-txt small{font-size:13px;color:var(--grey-text);line-height:1.35} .dsc-cta-arrow{flex-shrink:0;color:var(--grey-text);font-size:24px;line-height:1} /* En-tête de l'overlay */ .dsc-head{flex-shrink:0;display:flex;align-items:center;gap:12px;width:100%;max-width:var(--app);margin:0 auto; padding:16px 20px 12px;box-sizing:border-box} .dsc-htxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .dsc-htxt b{font-size:20px;font-weight:700;letter-spacing:-0.02em;color:var(--ink)} .dsc-htxt small{font-size:12px;color:var(--grey-text)} .dsc-close{flex-shrink:0;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center; color:var(--ink);background:var(--glass);box-shadow:inset 0 0 0 1px var(--glass-line);transition:background .15s var(--ease)} .dsc-close:hover{background:var(--grey-bg)} /* Filtre segmenté Tous / Particuliers / Entreprises */ .dsc-seg{flex-shrink:0;display:flex;gap:4px;width:calc(100% - 40px);max-width:var(--app);margin:0 auto 8px;box-sizing:border-box; padding:6px;border-radius:999px;background:var(--glass); box-shadow:inset 0 0 0 1px var(--glass-line);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px)} .dsc-seg-btn{flex:1;padding:9px 8px;border-radius:999px;font-size:13px;font-weight:600;color:var(--grey-text); transition:color .2s var(--ease), background .2s var(--ease)} .dsc-seg-btn:hover{color:var(--ink)} .dsc-seg-btn.active{color:var(--white);background:var(--black)} /* Conteneur scrollable (le scroll vit ici, ne détourne pas la molette de la page) */ .dsc-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;width:100%} .dsc-feed{display:grid;grid-template-columns:1fr;gap:14px;width:100%;max-width:var(--app);margin:0 auto; padding:6px 20px 28px;box-sizing:border-box} /* Carte réalisation (verre) */ .dsc-card{background:var(--glass);border-radius:var(--radius-lg);overflow:hidden; box-shadow:inset 0 0 0 1px var(--glass-line), 0 10px 28px rgba(10,10,12,.07); -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px); transition:box-shadow .35s var(--ease-out)} .dsc-card:hover{box-shadow:inset 0 0 0 1px rgba(0,0,0,.30), 0 22px 50px rgba(10,10,12,.13)} .dsc-media{position:relative;width:100%;aspect-ratio:16/11;background:var(--grey-bg)} .dsc-media img{width:100%;height:100%;object-fit:cover;display:block} .dsc-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center; color:var(--ink);background:rgba(255,255,255,.86);box-shadow:0 6px 18px rgba(10,10,12,.22)} .dsc-badge{position:absolute;top:12px;left:12px;font-size:11px;font-weight:600;padding:5px 10px;border-radius:999px; color:var(--ink);background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .dsc-body{padding:14px 16px 16px} .dsc-titre{font-size:13px;color:var(--grey-text);margin-bottom:8px;line-height:1.35; display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} .dsc-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .dsc-name{font-size:16px;font-weight:650;letter-spacing:-0.01em;color:var(--ink); display:flex;align-items:center;gap:7px;min-width:0} .dsc-name b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dsc-verif{flex-shrink:0;font-size:11px;font-weight:600;color:var(--grey-text); display:inline-flex;align-items:center;gap:3px} .dsc-verif svg{color:var(--black)} .dsc-stars{flex-shrink:0;font-size:13px;color:var(--ink);white-space:nowrap} .dsc-stars small{color:var(--grey-text)} .dsc-meta{margin-top:6px;font-size:13px;color:var(--grey-text);display:flex;align-items:center;gap:6px} .dsc-meta .dsc-dot{opacity:.5} /* Sentinelle (observée) + états (chargement / fin / vide) */ .dsc-sentinel{height:1px;width:100%} .dsc-state{width:100%;max-width:var(--app);margin:0 auto;padding:8px 20px 32px;box-sizing:border-box; text-align:center;color:var(--grey-text);font-size:14px} .dsc-spin{width:26px;height:26px;margin:6px auto;border-radius:50%; border:3px solid var(--grey-line);border-top-color:var(--ink);animation:dscSpin .8s linear infinite} @keyframes dscSpin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.dsc-spin{animation-duration:1.6s}} @media (min-width:640px){ .dsc-head,.dsc-feed,.dsc-state{max-width:760px} .dsc-seg{max-width:760px;width:calc(100% - 40px)} .dsc-feed{grid-template-columns:repeat(2,1fr)} } /* --- Catalogue : navigation sections › sous-sections › sous-sous-sections */ .cat-wrap{width:100%;max-width:var(--app);margin:0 auto} .cat-path{font-size:12px;color:var(--grey-text);font-weight:600;letter-spacing:.02em;margin-bottom:16px;text-transform:uppercase} .cat-head{font-size:26px;font-weight:700;letter-spacing:-0.03em;margin-bottom:6px} .cat-headsub{font-size:15px;color:var(--grey-text);margin-bottom:24px;line-height:1.45} /* Catalogue : la liste n'est plus une carte bordée — elle porte la grille d'icônes sur le fond gris. */ .cat-group{border:0;border-radius:0;overflow:visible;background:none} /* Écran catalogue en fond gris uni (le verre translucide des tuiles se lit dessus). */ #catalog{background:#e9eaee} /* ===== Grille d'icônes façon écran d'accueil iPhone (verre translucide) ===== */ .icon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 8px;padding:8px 2px 40px;max-width:520px;margin:0 auto} @media (max-width:380px){.icon-grid{grid-template-columns:repeat(3,1fr)}} .cat-app{display:flex;flex-direction:column;align-items:center;gap:9px;background:none;border:none;cursor:pointer;padding:0} .icon-grid .icon{width:30px;height:30px;max-width:32px;max-height:32px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block} .app-tile{position:relative;width:64px;height:64px;border-radius:18px;color:var(--black);display:flex;align-items:center;justify-content:center; background:linear-gradient(150deg, rgba(255,255,255,.42), rgba(255,255,255,.14)); border:1px solid rgba(255,255,255,.55); backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%); box-shadow:0 6px 18px rgba(30,40,80,.10),inset 0 1px 1px rgba(255,255,255,.85),inset 0 -6px 12px rgba(255,255,255,.18); transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease} .app-tile::after{content:"";position:absolute;top:5px;left:8px;right:8px;height:34%;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0));pointer-events:none} .cat-app:active .app-tile{transform:scale(.92)} .cat-app:hover .app-tile{transform:translateY(-2px);box-shadow:0 10px 24px rgba(30,40,80,.14),inset 0 1px 1px rgba(255,255,255,.85)} .app-label{font-size:12.5px;font-weight:500;color:var(--black);text-align:center;line-height:1.15;max-width:78px} /* Animation : rebond spring, une par une. L'état caché + le pop ne s'appliquent que si le mouvement est autorisé → sous reduced-motion, tuiles visibles, sans animation (correction : sinon .cat-app.in l'emporterait sur la règle reduce). */ .cat-app{opacity:1} @media (prefers-reduced-motion:no-preference){ .cat-app{opacity:0;transform:translateY(22px) scale(.7)} .cat-app.in{animation:popIn .62s cubic-bezier(.34,1.56,.64,1) forwards} } /* popIn = apparition rebond de la grille d'icônes (distincte du `pop` scale de :521, qui sert à .check-circle / .req-bell / .id-done — les 2 keyframes coexistent). */ @keyframes popIn{0%{opacity:0;transform:translateY(22px) scale(.7)}60%{opacity:1;transform:translateY(-4px) scale(1.06)}100%{opacity:1;transform:translateY(0) scale(1)}} /* Filet : état final visible garanti (posé par le setTimeout de catPlayIn). */ .cat-app.shown{opacity:1;transform:none} .cat-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:17px 18px;background:var(--white);transition:background .12s var(--ease)} .cat-row+.cat-row{border-top:1px solid var(--grey-line)} .cat-row:hover{background:var(--grey-bg)} .cat-row:active{background:#EFEFF1} .cat-row .cr-txt{flex:1;min-width:0} .cat-row .cr-txt b{display:block;font-weight:600;font-size:16px;letter-spacing:-0.01em} .cat-row .cr-txt small{color:var(--grey-text);font-size:13px} .cr-tag{font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px;white-space:nowrap;flex-shrink:0} .cr-tag.soon{color:var(--grey-text);background:var(--grey-bg)} .cr-tag.live{color:var(--white);background:var(--black)} .cr-arrow{color:var(--grey-text);flex-shrink:0;display:flex} /* --- Espace prestataire : carte de demande entrante -------------------- */ .req-bell{width:64px;height:64px;border-radius:50%;background:var(--black);display:flex;align-items:center;justify-content:center;margin:6px auto 0;animation:pop .5s var(--ease) both} .req-bell svg{width:30px;height:30px;color:var(--white)} .req-card{width:100%;border:1px solid var(--grey-line);border-radius:var(--radius-lg);overflow:hidden;margin-top:24px} .req-client{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--grey-line)} .req-avatar{width:42px;height:42px;border-radius:50%;background:var(--grey-bg);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex-shrink:0} .req-client .rc-name{flex:1} .req-client .rc-name b{display:block;font-weight:600;font-size:16px} .req-client .rc-name small{color:var(--grey-text);font-size:13px;display:flex;align-items:center;gap:5px} .req-client .rc-name small svg{width:13px;height:13px;color:var(--black)} .req-body{padding:14px 18px} .req-line{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:14px;padding:6px 0} .req-line span:first-child{color:var(--grey-text);flex-shrink:0} .req-line span:last-child{font-weight:600;text-align:right} .req-earn{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;background:var(--grey-bg);border-top:1px solid var(--grey-line)} .req-earn .re-l small{display:block;color:var(--grey-text);font-size:12px;margin-top:2px} .req-earn .re-l b{font-size:15px;font-weight:600} .req-earn .re-amount{font-size:26px;font-weight:800;letter-spacing:-0.03em;flex-shrink:0} /* --- Vérification d'identité (démo) ------------------------------------ */ .id-card{ width:100%;max-width:320px;margin:24px auto 0;aspect-ratio:1.58/1; border-radius:16px;background:var(--grey-bg);border:1.5px solid var(--grey-line); position:relative;overflow:hidden;padding:18px;display:flex;gap:14px; } .id-photo{width:60px;height:76px;border-radius:8px;background:#E0E0E3;flex-shrink:0;display:flex;align-items:center;justify-content:center} .id-photo svg{width:30px;height:30px;color:#AFAFB4} .id-lines{flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px;padding-top:4px} .id-line{height:8px;border-radius:4px;background:#DADADE} .id-line.s{width:55%}.id-line.m{width:78%}.id-line.l{width:95%} .id-watermark{position:absolute;right:14px;bottom:10px;font-size:11px;font-weight:700;letter-spacing:.14em;color:#C2C2C7} .id-scan{position:absolute;left:0;right:0;top:0;height:3px;background:var(--black);box-shadow:0 0 12px 3px rgba(0,0,0,.35);opacity:0} .id-card.scanning .id-scan{opacity:1;animation:scanmove 1.4s var(--ease)} @keyframes scanmove{0%{top:0}100%{top:calc(100% - 3px)}} .id-done{position:absolute;inset:0;background:rgba(255,255,255,.93);display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px} .id-card.verified .id-done{display:flex} .id-done .idc{width:46px;height:46px;border-radius:50%;background:var(--black);display:flex;align-items:center;justify-content:center;animation:pop .4s var(--ease) both} .id-done .idc svg{width:24px;height:24px;color:var(--white)} .id-done b{font-weight:600;font-size:15px} /* --- Toast (notifications de démo) ------------------------------------- */ .toast{ position:fixed;left:50%;top:14px;transform:translate(-50%,-140%);z-index:400; background:var(--black);color:var(--white);padding:14px 18px;border-radius:14px; display:flex;align-items:center;gap:11px;font-size:14px;font-weight:500;max-width:88%; box-shadow:0 14px 34px rgba(0,0,0,.28);transition:transform .38s var(--ease); margin-top:env(safe-area-inset-top); } .toast.show{transform:translate(-50%,0)} .toast svg{width:18px;height:18px;flex-shrink:0} /* --- État "hors zone" (rayon > 30 km) ---------------------------------- */ .addr-outzone{display:none;flex-direction:column;flex:1} .addr-outzone.show{display:flex} .addr-form.hide{display:none} .oz-ic{width:64px;height:64px;border-radius:50%;background:var(--grey-bg);display:flex;align-items:center;justify-content:center;margin:6px auto 22px} .oz-ic svg{width:30px;height:30px;color:var(--black)} /* --- Tonte & pelouse : sélection de la parcelle au cadastre ------------- */ .cadastre{width:100%;max-width:var(--app);margin:22px auto 0;border:1px solid var(--grey-line);border-radius:var(--radius);overflow:hidden;background:#FAFAFB} .cadastre svg{display:block;width:100%;height:auto} /* Carte de mesure (parcelle cadastre + bâtiments) */ .lawn-map{width:100%;max-width:var(--app);margin:0 auto;height:300px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--grey-line);background:#e8eaed} .lawn-map .leaflet-container{height:100%;width:100%} /* Voile d'analyse (recherche cadastre en cours) */ .lawn-map-wrap{position:relative;max-width:var(--app);margin:0 auto;width:100%} .lawn-analyzing{position:absolute;inset:0;z-index:500;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;border-radius:var(--radius);background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(4px);font-size:13.5px;font-weight:600;color:var(--ink)} .lawn-analyzing.show{display:flex} .la-spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--grey-line);border-top-color:var(--ink);animation:laSpin .8s linear infinite} @keyframes laSpin{to{transform:rotate(360deg)}} .parcel{fill:var(--grey-bg);stroke:#C5C5CA;stroke-width:1.5;cursor:pointer;transition:fill .15s var(--ease)} .parcel:hover{fill:#E9E9EC} .parcel.sel{fill:#fff;stroke:var(--black);stroke-width:2.6} .parcel-ctx{fill:#F0F0F2;stroke:#DCDCE0;stroke-width:1.2} .parcel-road{fill:#E4E4E7} .parcel-lbl{font-size:10px;fill:var(--grey-text);font-weight:600;pointer-events:none;text-anchor:middle} .parcel-lbl.sel{fill:var(--black)} .parcel-pin{pointer-events:none} .parcel-readout{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:14px 16px;border:1px solid var(--grey-line);border-radius:var(--radius);background:var(--white)} .parcel-readout.empty{color:var(--grey-text);justify-content:center;font-size:14px;font-weight:500} .parcel-readout .pr-ref{font-size:13px;color:var(--grey-text);font-weight:500} .parcel-readout .pr-ref b{display:block;color:var(--black);font-size:16px;font-weight:600;margin-top:2px} .parcel-readout .pr-surf{font-size:24px;font-weight:800;letter-spacing:-0.03em;white-space:nowrap} .parcel-readout .pr-hint{font-size:12.5px;line-height:1.45;color:var(--grey-text);font-weight:400;max-width:300px;text-align:right} /* Tonte (cadastre) : autocomplétion BAN + raccourci adresse + légende + ajustement */ .lawn-addr-field{position:relative;max-width:var(--app);margin:22px auto 0;width:100%} .lawn-suggests{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;display:flex;flex-direction:column;gap:6px} .lawn-sug{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;border:1px solid var(--grey-line);border-radius:12px;background:var(--white);padding:10px 14px;cursor:pointer;transition:border-color .15s var(--ease)} .lawn-sug:hover,.lawn-sug:focus-visible{border-color:var(--black);outline:none} .lawn-sug b{font-size:14px;color:var(--black);font-weight:600} .lawn-sug small{font-size:12px;color:var(--grey-text)} .lawn-saved-cta{display:flex;align-items:center;gap:12px;width:100%;max-width:var(--app);margin:22px auto 0;text-align:left;border:1px solid var(--grey-line);border-radius:14px;background:var(--white);padding:14px 16px;cursor:pointer;transition:border-color .15s var(--ease)} .lawn-saved-cta:hover{border-color:var(--black)} .lsa-ic{flex-shrink:0;display:inline-flex;color:var(--black)}.lsa-ic svg{width:22px;height:22px} .lsa-txt{flex:1}.lsa-txt small{display:block;font-size:11px;color:var(--grey-text);text-transform:uppercase;letter-spacing:.03em}.lsa-txt b{font-size:14px;color:var(--black);font-weight:600} .lsa-go{flex-shrink:0;font-size:13px;font-weight:700;color:var(--black)} .lawn-or{max-width:var(--app);margin:12px auto 0;text-align:center;font-size:12px;color:var(--grey-text)} .lawn-legend{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;max-width:var(--app);margin:12px auto 0;width:100%} .ll-key{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--grey-text)} .ll-key::before{content:"";width:13px;height:13px;border-radius:4px} .ll-parcel::before{background:rgba(0,0,0,.06);box-shadow:inset 0 0 0 1.5px #000} .ll-build::before{background:rgba(0,0,0,.5);box-shadow:inset 0 0 0 1.5px #000} .lawn-adjust{max-width:var(--app);margin:16px auto 0;width:100%} .lawn-note{font-size:12px;line-height:1.5;color:var(--grey-text);margin-top:8px} .spinner{width:30px;height:30px;border-radius:50%;border:3px solid var(--grey-line);border-top-color:var(--black);animation:spin .8s linear infinite;display:inline-block;vertical-align:middle;margin-right:10px} /* --- Nettoyage de piscine : illustration + saisie des dimensions -------- */ .pool-illu{width:100%;max-width:var(--app);margin:22px auto 4px} .pool-illu svg{display:block;width:100%;height:auto} .dim-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:24px} .dim-grid .dim-cell{min-width:0} .dim-grid .dim-cell label{display:block;font-size:12px;font-weight:600;color:var(--grey-text);margin-bottom:6px;text-align:center} .dim-grid .field{margin-top:0;min-width:0;text-align:center;padding-left:6px;padding-right:6px} /* --- Compte : profil vérifié + portefeuille ---------------------------- */ .ov-title{flex:1;font-size:18px;font-weight:700;letter-spacing:-0.02em} .tabs{display:flex;gap:6px;background:var(--grey-bg);border-radius:12px;padding:4px;margin:0 auto 24px;max-width:var(--app)} .tab-btn{flex:1;padding:10px;border-radius:9px;font-size:14px;font-weight:600;color:var(--grey-text);transition:all .15s var(--ease)} .tab-btn.active{background:var(--white);color:var(--black);box-shadow:0 1px 4px rgba(0,0,0,.08)} .tab-panel{display:none;max-width:var(--app);margin:0 auto} .tab-panel.active{display:block} .acc-head{display:flex;align-items:center;gap:16px} .acc-avatar{width:64px;height:64px;border-radius:50%;background:var(--black);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;flex-shrink:0} .acc-id b{font-size:20px;font-weight:700;letter-spacing:-0.02em;display:block} .acc-note{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:14px;font-weight:700} .acc-note svg{width:15px;height:15px;color:var(--black)} .acc-note span{color:var(--grey-text);font-weight:500} .vbadges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px} .vbadge{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--grey-bg);font-size:12.5px;font-weight:600} .vbadge svg{width:14px;height:14px;color:var(--black)} .acc-section{margin-top:26px} .acc-label{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--grey-text);margin-bottom:12px} .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{padding:8px 13px;border-radius:10px;font-size:13px;font-weight:600;box-shadow:inset 0 0 0 1.5px var(--grey-line)} .acc-list{display:flex;flex-direction:column;gap:10px} .acc-item{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--grey-line);border-radius:var(--radius)} .acc-item .ai-body{flex:1;min-width:0} .acc-item .ai-body b{display:block;font-size:15px;font-weight:600;letter-spacing:-0.01em} .acc-item .ai-body small{display:block;color:var(--grey-text);font-size:13px;margin-top:2px} .acc-item .ai-ok{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--black);white-space:nowrap;margin-top:7px} .acc-item .ai-ok svg{width:13px;height:13px;flex-shrink:0} .wallet-card{background:var(--black);color:var(--white);border-radius:var(--radius-lg);padding:26px 24px} .wallet-card .wc-label{font-size:13px;font-weight:500;opacity:.7;letter-spacing:.02em} .wallet-card .wc-bal{font-size:40px;font-weight:800;letter-spacing:-0.04em;margin-top:6px} .wallet-card .wc-sub{font-size:13px;opacity:.72;margin-top:12px;line-height:1.5} .topup{display:flex;gap:8px;margin-top:12px} .topup button{flex:1;padding:13px;border-radius:12px;font-size:14px;font-weight:600;box-shadow:inset 0 0 0 1.5px var(--grey-line);transition:background .15s var(--ease)} .topup button:hover{background:var(--grey-bg)} .txn-list{display:flex;flex-direction:column;margin-top:4px} .txn{display:flex;align-items:center;gap:12px;padding:14px 2px;border-bottom:1px solid var(--grey-line)} .txn:last-child{border-bottom:none} .txn .tx-ic{width:38px;height:38px;border-radius:50%;background:var(--grey-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0} .txn .tx-ic svg{width:17px;height:17px;color:var(--black)} .txn .tx-body{flex:1;min-width:0} .txn .tx-body b{display:block;font-size:14px;font-weight:600} .txn .tx-body small{color:var(--grey-text);font-size:12px} .txn .tx-amt{font-size:15px;font-weight:700;white-space:nowrap} .txn .tx-amt.minus{color:var(--grey-text)} .pay-methods{display:flex;flex-direction:column;gap:10px;margin-bottom:20px} .pay-method{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:var(--radius);box-shadow:inset 0 0 0 1.5px var(--grey-line);transition:box-shadow .15s var(--ease);width:100%;text-align:left} .pay-method.selected{box-shadow:inset 0 0 0 2px var(--black)} .pay-method:disabled{opacity:.45} .pay-method .pm-l{display:flex;align-items:center;gap:13px;min-width:0} .pay-method .pm-l svg.pm-ic{width:22px;height:22px;color:var(--black);flex-shrink:0} .pay-method .pm-l b{display:block;font-size:15px;font-weight:600} .pay-method .pm-l small{display:block;color:var(--grey-text);font-size:12.5px} .pay-method .pm-check{width:20px;height:20px;color:var(--black);opacity:0;transition:opacity .15s;flex-shrink:0} .pay-method.selected .pm-check{opacity:1} /* --- Assistant IA (chat texte + vocal) --------------------------------- */ .chat-msgs{flex:1;overflow-y:auto;padding:22px 18px;display:flex;flex-direction:column;gap:13px;-webkit-overflow-scrolling:touch} .bubble{max-width:82%;padding:13px 16px;border-radius:18px;font-size:15px;line-height:1.45;word-wrap:break-word;overflow-wrap:anywhere} .bubble.user{align-self:flex-end;background:var(--black);color:var(--white);border-bottom-right-radius:6px} .bubble.ai{align-self:flex-start;background:var(--grey-bg);color:var(--black);border-bottom-left-radius:6px;max-width:90%} .bubble .mic-tag{display:flex;align-items:center;gap:6px;font-size:12px;opacity:.7;margin-bottom:6px} .bubble .mic-tag svg{width:13px;height:13px} .qb{margin-top:11px;background:var(--white);border:1px solid var(--grey-line);border-radius:14px;padding:14px 16px} .qb-title{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--grey-text)} .qb ul{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:5px} .qb li{font-size:13.5px;padding-left:15px;position:relative;line-height:1.35} .qb li:before{content:'';position:absolute;left:1px;top:7px;width:5px;height:5px;border-radius:50%;background:var(--black)} .qb-price{display:flex;align-items:baseline;gap:10px;margin-top:13px;padding-top:13px;border-top:1px solid var(--grey-line)} .qb-price .m{font-size:14px;color:var(--grey-text);text-decoration:line-through} .qb-price .b{font-size:30px;font-weight:800;letter-spacing:-0.03em} .qb-firm{font-size:12px;font-weight:600;color:var(--grey-text)} .qb-method{font-size:12.5px;color:var(--grey-text);margin-top:11px;line-height:1.45} .qb-method b{color:var(--black);font-weight:600} .qb .btn{margin-top:14px} .typing{align-self:flex-start;display:flex;gap:5px;padding:15px 16px;background:var(--grey-bg);border-radius:18px} .typing span{width:7px;height:7px;border-radius:50%;background:var(--grey-text);animation:blink 1.2s infinite} .typing span:nth-child(2){animation-delay:.2s} .typing span:nth-child(3){animation-delay:.4s} @keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}} .chat-suggest{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 8px} .chat-suggest button{padding:8px 13px;border-radius:999px;font-size:13px;font-weight:500;box-shadow:inset 0 0 0 1.5px var(--grey-line);transition:background .15s var(--ease)} .chat-suggest button:hover{background:var(--grey-bg)} .chat-bar{flex-shrink:0;border-top:1px solid var(--grey-line);padding:12px 14px;padding-bottom:calc(12px + env(safe-area-inset-bottom));background:var(--white)} .chat-row{display:flex;align-items:center;gap:10px} .chat-row.hide{display:none} .chat-row input{flex:1;min-width:0;height:46px;border-radius:999px;background:var(--grey-bg);border:none;outline:none;padding:0 18px;font-size:16px;color:var(--black)} .chat-ic{width:46px;height:46px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--grey-bg);transition:background .15s var(--ease)} .chat-ic svg{width:20px;height:20px;color:var(--black)} .chat-ic.send{background:var(--black)} .chat-ic.send svg{color:var(--white)} .chat-rec{display:none;align-items:center;gap:12px} .chat-rec.show{display:flex} .rec-dot{width:9px;height:9px;border-radius:50%;background:var(--black);animation:blink 1s infinite;flex-shrink:0} .rec-time{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;min-width:38px} .wave{flex:1;display:flex;align-items:center;justify-content:center;gap:3px;height:46px;overflow:hidden} .wave span{width:3px;height:8px;border-radius:2px;background:var(--black);animation:wv .9s ease-in-out infinite} .wave span:nth-child(2n){animation-delay:.1s} .wave span:nth-child(3n){animation-delay:.25s} .wave span:nth-child(5n){animation-delay:.4s} @keyframes wv{0%,100%{height:7px}50%{height:28px}} /* --- Formulaire "Proposer un service" + champs ------------------------- */ select.field{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center} .field-area{height:auto;min-height:112px;padding:14px 16px;line-height:1.5;resize:vertical;font-family:inherit} /* --- Messagerie -------------------------------------------------------- */ .convo{display:flex;align-items:center;gap:13px;padding:15px 4px;border-bottom:1px solid var(--grey-line);width:100%;text-align:left;transition:background .12s var(--ease)} .convo:hover{background:var(--grey-bg)} .convo .cv-av{width:46px;height:46px;border-radius:50%;background:var(--black);color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;flex-shrink:0} .convo .cv-b{flex:1;min-width:0} .convo .cv-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px} .convo .cv-top b{font-size:15px;font-weight:600;letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .convo .cv-time{font-size:11.5px;color:var(--grey-text);white-space:nowrap;flex-shrink:0} .convo .cv-last{display:block;font-size:13.5px;color:var(--grey-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px} .convo .cv-dot{width:9px;height:9px;border-radius:50%;background:var(--black);flex-shrink:0} .msg-thread{display:none;flex-direction:column;flex:1;min-height:0} .msg-thread.show{display:flex} .thread-msgs{flex:1;overflow-y:auto;padding:20px 18px;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch} .credit-note{margin:14px auto 0;padding:12px 14px;background:var(--grey-bg);border-radius:12px;font-size:13px;line-height:1.45;color:var(--grey-text);max-width:var(--app)} .credit-note b{color:var(--black);font-weight:600} /* --- Barre de navigation basse ----------------------------------------- */ body{padding-bottom:calc(60px + env(safe-area-inset-bottom))} .bottom-nav{ position:fixed;left:0;right:0;bottom:0;z-index:100;display:flex; background:rgba(245,245,247,.86);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px); border-top:1px solid var(--grey-line);padding-bottom:env(safe-area-inset-bottom); } .nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 2px 8px;color:var(--grey-text);transition:color .15s var(--ease)} .nav-item svg{width:23px;height:23px} .nav-item span{font-size:10.5px;font-weight:600;letter-spacing:-0.01em} .nav-item.active{color:var(--black)} /* Onglets principaux (Assistant · Portefeuille · Messages · Compte) : l'overlay s'arrête juste au-dessus de la barre du bas → footer fixe toujours visible. Les pages « section » (devis, catalogue, prestataire…) gardent inset:0 et recouvrent la barre → pas de footer là-bas. */ #chat.open, #account.open, #messages.open{ bottom:calc(60px + env(safe-area-inset-bottom)); } /* --- Paramètres : préférences ------------------------------------------ */ .set-row{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid var(--grey-line);border-radius:var(--radius);width:100%;text-align:left;font-size:15px;font-weight:500;transition:background .12s var(--ease)} .set-row:hover{background:var(--grey-bg)} .set-row svg{width:18px;height:18px;color:var(--grey-text);flex-shrink:0} /* --- Feuille de partage (bottom sheet) --------------------------------- */ .sheet-backdrop{position:fixed;inset:0;z-index:350;background:rgba(0,0,0,.4);display:none;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .2s var(--ease)} .sheet-backdrop.open{display:flex;opacity:1} .sheet{width:100%;max-width:var(--app);background:var(--white);border-radius:22px 22px 0 0;padding:10px 18px calc(18px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .26s var(--ease);box-shadow:0 -10px 40px rgba(0,0,0,.14)} .sheet-backdrop.open .sheet{transform:translateY(0)} .sheet-handle{width:40px;height:4px;border-radius:2px;background:var(--grey-line);margin:4px auto 14px} .sheet-title{font-size:17px;font-weight:700;text-align:center;margin-bottom:20px} .share-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 6px;margin-bottom:18px} .share-opt{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11px;font-weight:500;color:var(--grey-text)} .share-ic{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .12s var(--ease)} .share-opt:active .share-ic{transform:scale(.92)} .share-ic svg{width:24px;height:24px} .share-ic.wa{background:var(--black)} .share-ic.fb{background:var(--black)} .share-ic.x{background:#000} .share-ic.tg{background:var(--black)} .share-ic.li{background:var(--black)} .share-ic.em{background:var(--black)} .share-ic.sms{background:var(--black)} .share-ic.cp{background:var(--grey-bg);color:var(--black)} /* --- Accent dégradé "Apple Intelligence" — base noir & blanc conservée --- */ /* --igrad supprimé (V9 noir & blanc pur) */ /* Certains textes en dégradé multicolore : titre d'accueil, prix */ .hero h1, .price-big, .qb-price .b{ background:var(--black); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } /* Icônes de catégories en dégradé multicolore */ .cat svg{stroke:#1d1d1f} /* ========================================================================= RESPONSIVE — DESKTOP ========================================================================= */ @media (min-width:720px){ .header{padding:0 32px} .cats{grid-template-columns:repeat(4,1fr);gap:16px} .steps{grid-template-columns:repeat(3,1fr)} .section{padding:96px 0} .hero{padding:170px 20px 96px} .screen{padding:48px 22px} .q-title{font-size:32px} } /* ========================================================================= THÈME APPLE — surcharge (typographie SF Pro, accent bleu, pilules, sections) Le dégradé de marque est conservé sur le grand titre et les icônes. ========================================================================= */ /* (variables déplacées dans le :root unique en tête de fichier — Lot E) */ body{ font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Inter,sans-serif; color:var(--apple-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } .logo{color:var(--apple-text)} /* Hero façon Apple : titre gras serré, accroche large */ .hero h1{font-weight:700;letter-spacing:-0.015em;line-height:1.05;font-size:clamp(34px,8vw,60px)} .hero p{font-size:clamp(16px,2.4vw,21px);color:var(--apple-text);font-weight:400;line-height:1.4;letter-spacing:-0.01em;margin-top:10px} /* Lien bleu à chevron façon Apple */ .hero-link{color:var(--apple-blue);text-decoration:none;font-weight:400;font-size:15px} .hero-link:hover{text-decoration:underline} .hero-link::after{content:" ›"} /* Boutons : pilules Apple (primaire bleu, secondaire gris clair) */ .btn{border-radius:var(--pill);font-weight:400;letter-spacing:-0.01em;padding:13px 24px;font-size:17px} .btn-primary{background:var(--apple-blue-btn);color:#fff} .btn-primary:hover{background:#000;opacity:1} .btn-outline{background:#e8e8ed;color:var(--apple-text);box-shadow:none} .btn-outline:hover{background:#dcdce1;box-shadow:none} /* Titres de section façon Apple : grands, gras, centrés */ .section-label{font-size:clamp(26px,5.5vw,36px);font-weight:700;letter-spacing:-0.02em;text-transform:none;color:var(--apple-text);text-align:center;margin-bottom:22px} /* Tuiles catégories façon Apple */ .cat-media{background:transparent} .cat span{font-size:15px;font-weight:600;letter-spacing:-0.01em;color:var(--apple-text)} /* Rangée de CTA : pilule bleue (Publier) + pilule grise (Proposer) */ .cta-row .pro-cta-inner{border-radius:var(--pill);text-transform:none;letter-spacing:-0.01em;font-size:15px;font-weight:500;padding:13px 22px;box-shadow:none} .cta-row .pro-cta:last-child .pro-cta-inner{background:var(--apple-blue-btn);color:#fff} .cta-row .pro-cta:last-child .pro-cta-inner svg{stroke:currentColor} .cta-row .pro-cta:first-child .pro-cta-inner{background:#e8e8ed;color:var(--apple-text)} .cta-row .pro-cta:hover .pro-cta-inner{box-shadow:none;opacity:.9} /* ---- Survol : effet grow + ombre (icônes, blocs, boutons) ---- */ .cta-row .pro-cta{transition:transform .22s var(--ease)} .cta-row .pro-cta:hover{transform:translateY(-2px) scale(1.03)} .cta-row .pro-cta:hover .pro-cta-inner{box-shadow:0 10px 26px rgba(0,0,0,.16),inset 0 0 0 1.5px var(--apple-blue-btn);opacity:1} /* Services express = service URGENT (dépannage) → pilule ROUGE (cohérent, non criard). (Le bouton rouge « Services urgents » a été supprimé — Lot D : l'urgence se coche dans le tunnel. Styles .pro-cta--urgent purgés, dernière ombre colorée du thème.) */ .btn{transition:transform .2s var(--ease),box-shadow .2s var(--ease),opacity .15s var(--ease),background .15s var(--ease)} .btn:hover{transform:translateY(-1px) scale(1.015);box-shadow:0 10px 24px rgba(0,0,0,.16)} /* ---- Carrousel 3D (coverflow) ---- */ .carousel-section{margin:28px auto 14px;overflow:hidden} .carousel3d{position:relative;perspective:1300px;height:clamp(210px,44vw,360px)} .c3d-stage{position:relative;width:100%;height:100%;transform-style:preserve-3d} .c3d-card{ position:absolute;top:0;left:50%;width:min(560px,72%);height:100%; margin-left:calc(min(560px,72%) / -2);border-radius:28px;overflow:hidden;cursor:pointer;background:#000; box-shadow:0 28px 56px -18px rgba(0,0,0,.30); transition:transform .6s cubic-bezier(.33,0,.2,1),opacity .6s,box-shadow .6s; -webkit-backface-visibility:hidden;backface-visibility:hidden; } .c3d-card img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;user-select:none} .c3d-card::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.42)} .carousel-cap{position:absolute;left:20px;bottom:18px;color:#fff;font-weight:600;font-size:clamp(15px,2.3vw,19px);letter-spacing:-0.01em;text-shadow:0 1px 12px rgba(0,0,0,.5);z-index:2;max-width:80%;opacity:0;transition:opacity .5s} .c3d-card.is-active .carousel-cap{opacity:1} .c3d-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:30;width:38px;height:38px;border-radius:50%;border:none;background:rgba(255,255,255,.7);backdrop-filter:saturate(180%) blur(10px);-webkit-backdrop-filter:saturate(180%) blur(10px);color:#1d1d1f;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.14);transition:transform .2s var(--ease),background .2s} .c3d-nav:hover{background:#fff;transform:translateY(-50%) scale(1.08)} .c3d-prev{left:10px}.c3d-next{right:10px} .carousel-dots{position:absolute;bottom:12px;left:0;right:0;display:flex;gap:7px;justify-content:center;z-index:25} .carousel-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:all .3s var(--ease)} .carousel-dot.active{background:#fff;width:22px;border-radius:4px} /* Recherche : anneau de focus bleu Apple */ .search-box:focus-within{box-shadow:0 0 0 4px rgba(0,0,0,.10),0 2px 12px rgba(0,0,0,.06)} /* Étapes "Comment ça marche" : pastille bleue façon Apple */ .step-num{background:var(--apple-blue-btn)} /* FOOTER — grille responsive (modèle) : marque (1.6fr) + 4 colonnes de liens */ /* Fond gris clair DISTINCT (#ECECEF) : plus marqué que le #F5F5F7 de la page, pour que le footer se lise comme une zone à part. */ .footer{background:#ECECEF;border-top:1px solid var(--grey-line);padding:34px 20px 24px;margin-top:22px;color:var(--apple-text)} /* (Le token global --grey-text est passé à #6E6E73 au Lot E — l'override footer est devenu inutile.) */ .footer-main{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:40px 34px} .footer-brandcol .logo{font-size:20px;margin-bottom:10px} .footer-tagline{font-size:12.5px;line-height:1.55;color:var(--grey-text);margin-bottom:18px;max-width:340px} .footer-social{display:flex;flex-wrap:wrap;gap:10px} .fsoc{width:38px;height:38px;border-radius:50%;border:1px solid var(--grey-line);background:var(--white);display:flex;align-items:center;justify-content:center;color:var(--apple-text);transition:background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease)} /* Classe utilitaire .icon : borne TOUTE icône d'interface à 22px (max 24) ; ne peut jamais gonfler. S'ajoute aux attributs width/height du HTML (double sécurité). */ .icon{width:22px;height:22px;max-width:24px;max-height:24px;flex:0 0 auto;object-fit:contain} .fsoc svg.icon{width:22px;height:22px} .fsoc:hover{background:var(--black);color:var(--white);border-color:var(--black);transform:translateY(-2px)} .footer-col h4{font-size:11.5px;font-weight:600;color:var(--apple-text);margin-bottom:12px;letter-spacing:.01em} .footer-col a{display:block;font-size:11.5px;color:var(--grey-text);font-weight:400;padding:4px 0;line-height:1.3;text-decoration:none;transition:color .15s var(--ease)} .footer-col a:hover{color:var(--apple-text);text-decoration:underline} /* Application mobile — badges FR en SVG inline, non cliquables */ .footer-app{max-width:var(--max);margin:28px auto 0;padding-top:24px;border-top:1px solid var(--grey-line)} .fapp-soon{display:block;font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--grey-text);margin-bottom:12px} .fapp-badges{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .fapp-badge{height:46px;width:auto;display:block;user-select:none;pointer-events:none} /* Note démo + bas de page */ .footer-note{max-width:var(--max);margin:22px auto 0;font-size:12px;line-height:1.5;color:var(--grey-text)} .footer-bottom{max-width:var(--max);margin:16px auto 0;border-top:1px solid var(--grey-line);padding-top:16px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;font-size:12px;color:var(--grey-text)} .footer-bottom .fb-legal{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center} .footer-bottom a{color:var(--grey-text);text-decoration:none} .footer-bottom a:hover{color:var(--apple-text);text-decoration:underline} .footer-bottom .fb-copy{font-weight:600;color:var(--apple-text)} /* Responsive : 5 colonnes (desktop) → marque pleine largeur + liens en 2 colonnes (tablette ET mobile). JAMAIS de colonne unique : empiler les 4 groupes de liens rendait le footer démesurément long et vide sur téléphone. */ @media (max-width:860px){ .footer-main{grid-template-columns:1fr 1fr;gap:30px 28px} .footer-brandcol{grid-column:1/-1} } @media (max-width:480px){ /* Footer COMPACT sur téléphone : moins d'air, colonnes toujours en 2. */ .footer{padding:24px 18px 18px;margin-top:16px} .footer-main{grid-template-columns:1fr 1fr;gap:20px 18px} .footer-brandcol{grid-column:1/-1} .footer-tagline{max-width:none;margin-bottom:14px;font-size:12px} /* Garde-fou : icônes réseaux TOUJOURS en ligne (jamais empilées), ronds visibles. */ .footer-social{flex-direction:row;flex-wrap:wrap;gap:8px} .fsoc{width:36px;height:36px} /* Cibles tactiles confortables mais sans allonger inutilement la colonne. */ .footer-col h4{margin-bottom:8px} .footer-col a{padding:6px 0} .footer-app{margin-top:20px;padding-top:18px} .fapp-badge{height:42px} .footer-note{margin-top:16px} /* Barre légale alignée à gauche (space-between éparpille les items au retour ligne) */ .footer-bottom{margin-top:14px;padding-top:14px;justify-content:flex-start;gap:8px 16px} .footer-bottom .fb-legal{gap:10px 16px} .footer-bottom .fb-legal a{padding:4px 0} } /* ====== Pages d'information (#infopage) — prose lisible, préfixe .ipg ====== */ .ipg{max-width:660px} .ipg h3{font-size:16.5px;font-weight:600;color:var(--black);letter-spacing:-.01em;margin:30px 0 10px} .ipg h3:first-of-type{margin-top:24px} .ipg p{font-size:15px;line-height:1.68;color:var(--apple-text);margin:0 0 14px} .ipg ul{margin:0 0 16px;padding-left:22px} .ipg li{font-size:15px;line-height:1.6;color:var(--apple-text);margin:7px 0} .ipg li::marker{color:var(--grey-text)} .ipg i{color:var(--grey-text);font-style:italic} .ipg code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;background:var(--grey-bg);border:1px solid var(--grey-line);border-radius:5px;padding:1px 5px} /* Encadré « démonstration » : callout avec accent noir à gauche (reste N&B pur) */ .ipg-note{font-size:13.5px;line-height:1.6;color:var(--apple-text);background:var(--grey-bg);border:1px solid var(--grey-line);border-left:3px solid var(--black);border-radius:4px 14px 14px 4px;padding:13px 16px;margin:4px 0 24px} /* --- Option URGENTE (Phase 3 bis) : bordure rouge qui ressort + titre rouge. Le rouge est réservé à l'urgence (et aux erreurs) — il tranche sur le thème. */ .choice--urgent{border-color:rgba(220,38,38,.5);box-shadow:0 4px 14px rgba(220,38,38,.08), inset 0 1px 1px rgba(255,255,255,.9)} .choice--urgent .choice-title{color:var(--danger)} .choice--urgent:hover{border-color:var(--danger)} .choice--urgent.selected{border-color:var(--danger);box-shadow:0 6px 18px rgba(220,38,38,.18), inset 0 1px 1px rgba(255,255,255,.9)} .choice--urgent.selected .choice-check{background:var(--danger);border-color:var(--danger)} /* --- Autocomplétion BAN générique (vraies adresses) --------------------- */ .ban-wrap{position:relative} .ban-sug{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;display:none;background:var(--white);border-radius:14px;box-shadow:0 18px 44px rgba(10,10,12,.16), inset 0 0 0 1px var(--grey-line);overflow:hidden;max-height:264px;overflow-y:auto} .ban-sug.show{display:block} .ban-sug-item{display:block;width:100%;text-align:left;padding:11px 14px;background:var(--white);border:none;cursor:pointer;font-family:inherit} .ban-sug-item:hover,.ban-sug-item:focus-visible{background:var(--grey-bg);outline:none} .ban-sug-item b{display:block;font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-0.01em} .ban-sug-item small{display:block;font-size:12px;color:var(--grey-text);margin-top:1px} /* --- Période idéale (2 dates) — écran « C'est pour quand ? » ------------ */ .period-grid{display:flex;gap:12px;margin-top:4px} .period-field{flex:1;display:block;font-size:12.5px;font-weight:600;color:var(--ink)} .period-field input{margin-top:6px;width:100%;font-family:inherit;color:var(--ink)} .period-hint{font-size:12.5px;line-height:1.5;color:var(--grey-text);margin-top:10px} @media (max-width:420px){.period-grid{flex-direction:column;gap:10px}} /* --- Icônes de question (une image parle plus que mille mots) ----------- */ .q-ico{width:46px;height:46px;border-radius:14px;background:var(--white);box-shadow:inset 0 0 0 1px var(--grey-line), 0 6px 16px rgba(10,10,12,.06);display:flex;align-items:center;justify-content:center;margin:0 0 14px;color:var(--ink);flex:none} .q-ico svg{width:23px;height:23px} .screen.active .q-ico{animation:popIn .55s cubic-bezier(.34,1.56,.64,1) both} /* L'icône « Service détecté » (intro) rebondit aussi à l'affichage, et son pictogramme est centré dans la tuile (le layout carte de .cat ne s'applique pas ici). */ #appBody .screen.active .cat{animation:popIn .55s cubic-bezier(.34,1.56,.64,1) both} #appBody .screen[data-screen="suggestions"] .cat{display:flex;align-items:center;justify-content:center} #appBody .screen[data-screen="suggestions"] .cat svg{width:34px;height:34px;margin:0} @media (prefers-reduced-motion:reduce){ .screen.active .q-ico,#appBody .screen.active .cat{animation:none} } /* Press states unifiés (Phase 3) : retour tactile discret sur tout élément tapable qui n'avait pas le sien. :where() = spécificité nulle, n'écrase rien d'existant. */ :where(.cat-app,.acc-set-row,.se-item,.mk-choose,.mk-card,.pro-cta,.zg-chip,.pc-up1-chip,.app-icon-btn,.sort-tab,.mk-seg-btn,.entr-send,.entr-ghost):active{transform:scale(.97)} @media (prefers-reduced-motion:reduce){ :where(.cat-app,.acc-set-row,.se-item,.mk-choose,.mk-card,.pro-cta,.zg-chip,.pc-up1-chip,.app-icon-btn,.sort-tab,.mk-seg-btn,.entr-send,.entr-ghost):active{transform:none} } .ipg ol.ipg-steps{margin:0 0 16px;padding-left:24px} .ipg ol.ipg-steps li{font-size:15px;line-height:1.65;color:var(--apple-text);margin:12px 0} .ipg ol.ipg-steps li::marker{font-weight:700;color:var(--black)} .ipg-meta-inline{font-size:12.5px!important;color:var(--grey-text)!important} .ipg-meta{font-size:12px;color:var(--grey-text);margin-top:26px;padding-top:16px;border-top:1px solid var(--grey-line)} /* ====== Animation "mission en direct" ====== */ .mission-card{position:relative;background:var(--white);border-radius:24px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04),0 14px 34px rgba(0,0,0,.07);margin-top:8px} .mission-stage{position:relative;width:100%;line-height:0} .mission-map{display:block;width:100%;height:auto} .mission-cap{margin-top:14px;font-size:14px;line-height:1.5;color:var(--grey-text);text-align:center;max-width:520px;margin-left:auto;margin-right:auto} .mroute{fill:none;stroke:#0A84FF;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:400;stroke-dashoffset:400;filter:drop-shadow(0 2px 5px rgba(10,132,255,.3));animation:mDraw 14s ease-in-out infinite} @keyframes mDraw{0%,45%{stroke-dashoffset:400}80%,100%{stroke-dashoffset:0}} .mpin{position:absolute;left:80.6%;top:19.2%;width:30px;height:30px;margin:-30px 0 0 -15px;transform-origin:50% 100%;z-index:3;animation:mPinDrop 14s ease-in-out infinite} .mpin svg{width:30px;height:30px;display:block;filter:drop-shadow(0 4px 6px rgba(0,0,0,.22))} @keyframes mPinDrop{0%{opacity:0;transform:translateY(-30px) scale(.7)}5%{opacity:1}8%{transform:translateY(0) scale(1)}11%{transform:translateY(-5px) scale(1)}14%,100%{opacity:1;transform:translateY(0) scale(1)}} .mpulse{position:absolute;left:80.6%;top:19.2%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:3px solid #0A84FF;opacity:0;z-index:2;animation:mPulse 14s ease-out infinite} @keyframes mPulse{0%,78%{opacity:0;transform:scale(.5)}82%{opacity:.65;transform:scale(.6)}93%,100%{opacity:0;transform:scale(3.4)}} .mdot{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;left:14%;top:81%;opacity:0;z-index:4;animation:mDot 14s ease-in-out infinite} .mdot::before{content:"";position:absolute;inset:0;border-radius:50%;background:#0A84FF;box-shadow:0 0 0 4px rgba(10,132,255,.22),0 2px 6px rgba(0,0,0,.3)} .mdot::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff} @keyframes mDot{0%,44%{opacity:0;left:14%;top:81%}45%{opacity:1;left:14%;top:81%}55%{left:44%;top:81%}62%{left:44%;top:46%}70%{left:69%;top:46%}77%{left:69%;top:19%}80%,100%{opacity:1;left:80.6%;top:19.2%}} .mnotif{position:absolute;left:50%;top:13%;transform:translateX(-50%);width:min(82%,300px);background:#fff;border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:11px 13px;display:flex;align-items:center;gap:11px;opacity:0;z-index:6;animation:mNotif 14s ease-in-out infinite} .mnotif-ic{width:38px;height:38px;border-radius:11px;background:var(--black);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;flex-shrink:0;letter-spacing:-.03em} .mnotif-txt{flex:1;min-width:0;text-align:left} .mnotif-txt b{display:block;font-size:13px;letter-spacing:-.01em;color:var(--black)} .mnotif-txt small{font-size:11.5px;color:var(--grey-text)} .mnotif-btn{flex-shrink:0;font-size:12px;font-weight:700;color:#fff;background:#0A84FF;border-radius:9px;padding:7px 11px;white-space:nowrap;position:relative;overflow:hidden} .mnotif-btn .ok{position:absolute;inset:0;background:#34C759;display:flex;align-items:center;justify-content:center;opacity:0;animation:mAccept 14s ease-in-out infinite} @keyframes mNotif{0%,13%{opacity:0;transform:translateX(-50%) translateY(-12px)}18%,38%{opacity:1;transform:translateX(-50%) translateY(0)}43%,100%{opacity:0;transform:translateX(-50%) translateY(-12px)}} @keyframes mAccept{0%,28%{opacity:0}33%,100%{opacity:1}} .msuccess{position:absolute;left:50%;top:53%;transform:translate(-50%,-50%) scale(.8);background:var(--black);color:#fff;font-weight:700;font-size:14px;padding:10px 18px;border-radius:999px;display:flex;align-items:center;gap:7px;opacity:0;z-index:6;box-shadow:0 12px 30px rgba(0,0,0,.24);white-space:nowrap;animation:mSuccess 14s ease-in-out infinite} @keyframes mSuccess{0%,80%{opacity:0;transform:translate(-50%,-50%) scale(.8)}85%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}89%,96%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.9)}} .mheart{position:absolute;top:19.2%;font-size:17px;opacity:0;z-index:5;will-change:transform,opacity} .mheart.h1{left:80.6%;animation:mHeart 14s ease-out infinite} .mheart.h2{left:74%;animation:mHeart 14s ease-out .3s infinite} .mheart.h3{left:87%;animation:mHeart 14s ease-out .6s infinite} @keyframes mHeart{0%,79%{opacity:0;transform:translate(-50%,0) scale(.4)}84%{opacity:1;transform:translate(-50%,-16px) scale(1)}93%,100%{opacity:0;transform:translate(-50%,-48px) scale(1.1)}} @media (prefers-reduced-motion:reduce){.mroute{animation:none;stroke-dashoffset:0}.mdot{animation:none;opacity:1;left:80.6%;top:19.2%}.mpin{animation:none;opacity:1}.mnotif,.mpulse,.mheart{animation:none;opacity:0}.msuccess{animation:none;opacity:1}} /* ========================================================================= V9 — DESIGN NOIR & BLANC PUR (ex-refonte « Liquid Intelligence », purgée) Plus aucune couleur d'accent : iris/dégradés supprimés (CDC V9 §27). Restent ici quelques tokens utilitaires neutres (glass→blanc, ink, eases). Seules exceptions couleur : bleu GPS #0A84FF + vert #34C759, UNIQUEMENT dans l'animation « mission en direct ». ========================================================================= */ /* (variables verre/encre déplacées dans le :root unique en tête de fichier — Lot E) */ /* La couleur de fond passe sur pour laisser respirer l'aurora derrière */ html{background:var(--grey-bg)} body{background:transparent} /* Scroll natif (Lenis retiré). Léger lissage pour les sauts d'ancre uniquement. */ html{scroll-behavior:smooth} /* ---- AURORA iridescente (fond fixe, derrière tout) --------------------- */ #fx-aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;background:var(--grey-bg)} .fx-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;mix-blend-mode:multiply;will-change:transform} .fx-b1{width:46vw;height:46vw;left:-8vw;top:-6vw;background:none} .fx-b2{width:40vw;height:40vw;right:-10vw;top:4vw;background:none} .fx-b3{width:50vw;height:50vw;left:8vw;bottom:-18vw;background:none} .fx-b4{width:34vw;height:34vw;right:2vw;bottom:-6vw;background:none;opacity:.38} .fx-grid{position:absolute;inset:0;opacity:.5; background-image:none; background-size:54px 54px; -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 78%); mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 78%)} /* ---- GRAIN (très léger, au-dessus du fond) ----------------------------- */ #fx-grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.04;mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* ---- CURSEUR custom (additif, desktop pointeur fin seulement) ---------- */ #cursor{position:fixed;top:0;left:0;z-index:9000;pointer-events:none;display:none;mix-blend-mode:multiply} #cursor-ring{position:absolute;width:38px;height:38px;border-radius:50%;transform:translate(-50%,-50%); background:var(--black); -webkit-mask:radial-gradient(closest-side,transparent 70%,#000 72%);mask:radial-gradient(closest-side,transparent 70%,#000 72%); opacity:.9} #cursor-dot{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--ink);transform:translate(-50%,-50%)} @media (hover:hover) and (pointer:fine){#cursor{display:block}} /* ---- PRELOADER -------------------------------------------------------- */ #preloader{position:fixed;inset:0;z-index:9500;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px; background:var(--grey-bg);} #preloader.is-hidden{pointer-events:none} .pl-mark{font-family:'Inter',sans-serif;font-weight:800;font-size:clamp(30px,8vw,52px);letter-spacing:-.04em;color:var(--ink)} .pl-mark .pl-dot{color:var(--black)} .pl-bar{width:min(220px,52vw);height:3px;border-radius:3px;background:rgba(10,10,12,.1);overflow:hidden} .pl-fill{display:block;width:0%;height:100%;border-radius:3px;background:var(--black)} .pl-sub{font-size:13px;color:var(--grey-text);font-weight:500;letter-spacing:-.01em} /* ====================================================================== ÉTATS DE REVEAL — appliqués SEULEMENT si GSAP est actif (html.fx-on), pour rester 100% visible si le CDN est bloqué (progressive enhancement). ====================================================================== */ html.fx-on .hero p, html.fx-on .hero-eyebrow, html.fx-on .search-sticky, html.fx-on .hero-sub, html.fx-on .cat, html.fx-on .cta-row, html.fx-on .carousel-section, html.fx-on .section-label, html.fx-on .step, html.fx-on .mission-card, html.fx-on .mission-cap, html.fx-on .footer, html.fx-on .hl-in{opacity:0} /* ====================================================================== HERO ====================================================================== */ .hero{padding:120px 20px 6px;position:relative} .hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:-.01em; color:var(--ink);padding:7px 14px 7px 11px;margin-bottom:20px;border-radius:999px; background:var(--glass);border:1px solid var(--glass-line); -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px); box-shadow:0 6px 20px rgba(10,10,12,.06)} .hero-eyebrow .he-dot{width:8px;height:8px;border-radius:50%;background:var(--black);box-shadow:0 0 0 4px rgba(0,0,0,.16)} .hero h1{font-weight:800;letter-spacing:-.035em;line-height:.98;font-size:clamp(42px,11.5vw,92px)} .hero h1 .hl{display:block;overflow:hidden;padding-bottom:.08em} .hero h1 .hl-in{display:inline-block;will-change:transform;color:var(--ink);background:none;-webkit-text-fill-color:currentColor} .hero h1 .grad{background:var(--black);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .hero p{max-width:560px;margin-left:auto;margin-right:auto;font-size:clamp(16px,2.4vw,21px);color:var(--grey-text);margin-top:18px} /* ====================================================================== BARRE DE RECHERCHE — pilule de verre + anneau iridescent au focus ====================================================================== */ .search-sticky{background:transparent;border:none} .search-ai-label{font-weight:700} .search-box{position:relative;background:var(--glass);height:62px;border-radius:999px; box-shadow:0 10px 34px rgba(10,10,12,.12), inset 0 0 0 1px var(--glass-line); -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px); transition:box-shadow .3s var(--ease-out),transform .3s var(--ease-out)} .search-box::before{content:"";position:absolute;inset:-1.5px;border-radius:999px;padding:1.5px; background:var(--black);opacity:0;transition:opacity .3s var(--ease-out); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none} .search-box:focus-within{transform:translateY(-2px);box-shadow:0 18px 48px rgba(10,10,12,.18), inset 0 0 0 1px transparent} .search-box:focus-within::before{opacity:1} .search-box input{font-size:17px} .sb-go{color:var(--ink)} .sb-go svg{transition:transform .3s var(--ease-out)} .search-box:focus-within .sb-go svg{transform:scale(1.12)} /* ====================================================================== CTA secondaires (proposer / publier) ====================================================================== */ .cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:18px} .pro-cta{position:relative;border-radius:999px;background:var(--glass); -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px); box-shadow:inset 0 0 0 1px var(--glass-line),0 6px 18px rgba(10,10,12,.06); transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)} .pro-cta:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px transparent,0 14px 30px rgba(10,10,12,.12)} .pro-cta-inner{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;font-size:14.5px;font-weight:600;color:var(--ink)} .pro-cta-inner svg{stroke:url(#iconGrad)} /* ====================================================================== CATÉGORIES — bento de verre, halo coloré, flèche ====================================================================== */ .cats{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;align-items:stretch;gap:14px} .cat{position:relative;overflow:hidden;flex-direction:row;justify-content:flex-start;gap:14px; background:var(--glass);border-radius:24px;padding:18px 16px;min-height:96px;text-align:left; box-shadow:inset 0 0 0 1px var(--glass-line),0 10px 28px rgba(10,10,12,.07); -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px); will-change:transform;transition:box-shadow .35s var(--ease-out),transform .2s var(--ease-out)} .cat:hover{transform:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 22px 50px rgba(10,10,12,.14)} .cat:active{transform:scale(.985)} /* halo coloré qui suit la souris (variables posées par GSAP) */ .cat-glow{position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .35s var(--ease-out);pointer-events:none;z-index:0; background:none} .cat:hover .cat-glow{opacity:1} .cat-media{position:relative;z-index:1;width:50px;height:50px;border-radius:15px;flex:0 0 auto; background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px var(--glass-line)} .cat svg{width:26px;height:26px;color:var(--ink);transition:transform .35s var(--ease-out),stroke .35s var(--ease-out)} .cat:hover .cat-media svg{stroke:url(#iconGrad);transform:scale(1.08)} .cat .cat-label{position:relative;z-index:1;font-size:15.5px;font-weight:650;font-weight:600;color:var(--ink);flex:1 1 auto;letter-spacing:-.01em} .cat-arrow{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 auto; color:var(--grey-text);opacity:0;transform:translateX(-6px);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)} .cat-arrow svg{width:18px;height:18px} .cat:hover .cat-arrow{opacity:1;transform:translateX(0)} .cat.soon{opacity:.72} .cat.soon .cat-arrow{display:none} .cat .soon-pill{top:12px;right:12px;background:rgba(255,255,255,.7);border:1px solid var(--glass-line)} /* Tuile "feature" (bento) : pleine largeur, plus grande */ .cat--feature{grid-column:1 / -1;min-height:96px;padding:22px 22px; background:rgba(255,255,255,.6)} .cat--feature::after{content:"Le plus demandé";position:absolute;top:14px;right:16px;z-index:1; font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--black)} .cat--feature .cat-media{width:64px;height:64px;border-radius:19px} .cat--feature svg{width:32px;height:32px} .cat--feature .cat-label{font-size:19px;font-weight:700} @media (min-width:680px){ .cats{grid-template-columns:repeat(3,1fr)} .cat--feature{grid-column:span 2} } @media (min-width:1000px){.cats{grid-template-columns:repeat(4,1fr)}} /* ====================================================================== CARROUSEL 3D — cadre de verre, légende iridescente ====================================================================== */ .carousel-section{margin-top:34px} .c3d-card{border-radius:22px;box-shadow:0 30px 60px rgba(10,10,12,.22),inset 0 0 0 1px rgba(255,255,255,.5);cursor:grab} .c3d-card:active{cursor:grabbing} .c3d-card.is-active{box-shadow:0 40px 80px rgba(10,10,12,.28),inset 0 0 0 1.5px rgba(0,0,0,.4)} .carousel-cap{font-weight:700;font-size:clamp(15px,2.3vw,20px)} .c3d-nav{background:var(--glass);box-shadow:inset 0 0 0 1px var(--glass-line),0 8px 20px rgba(10,10,12,.16);color:var(--ink)} .carousel-dot.active{background:var(--black)} /* ====================================================================== SECTIONS / "COMMENT ÇA MARCHE" — cartes de verre numérotées ====================================================================== */ .section-label{font-weight:800;letter-spacing:-.03em;font-size:clamp(28px,6vw,46px)} .steps{gap:14px} @media (min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}} .step{position:relative;overflow:hidden;background:var(--glass);border-radius:24px;padding:26px 22px;align-items:flex-start;gap:16px; box-shadow:inset 0 0 0 1px var(--glass-line),0 12px 30px rgba(10,10,12,.07); -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px)} .step::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--black);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)} .step:hover::before{transform:scaleX(1)} .step-num{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:0 0 auto; font-weight:800;font-size:19px;color:#fff;background:var(--ink);box-shadow:0 8px 20px rgba(10,10,12,.2)} .step:nth-child(2) .step-num{background:var(--ink)} .step:nth-child(3) .step-num{background:var(--ink)} /* ====================================================================== MISSION — carte de verre avec halo ====================================================================== */ .mission-card{background:var(--glass);box-shadow:inset 0 0 0 1px var(--glass-line),0 24px 60px rgba(10,10,12,.12); -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px)} .mission-card::before{content:"";position:absolute;inset:-40% -10% auto -10%;height:70%;z-index:0;pointer-events:none; background:none} .mission-stage{position:relative;z-index:1} /* ====================================================================== HEADER / BOTTOM-NAV — verre + filet iridescent ====================================================================== */ .header{background:rgba(245,245,247,.6);border-bottom:1px solid rgba(255,255,255,.5)} .header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--black);opacity:.5} .logo{font-family:'Inter',sans-serif;font-weight:800;position:relative} .bottom-nav{background:rgba(245,245,247,.7);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)} .nav-item.active{color:var(--ink)} .nav-item.active svg{stroke:url(#iconGrad)} /* ====================================================================== ACCESSIBILITÉ — réduit le mouvement : tout reste visible, pas d'anim ====================================================================== */ @media (prefers-reduced-motion:reduce){ html.fx-on .hero p,html.fx-on .hero-eyebrow,html.fx-on .search-sticky,html.fx-on .hero-sub, html.fx-on .cat,html.fx-on .cta-row,html.fx-on .carousel-section,html.fx-on .section-label, html.fx-on .step,html.fx-on .mission-card,html.fx-on .mission-cap,html.fx-on .footer, html.fx-on .hl-in{opacity:1} #fx-aurora .fx-blob,.pl-fill{animation:none} #cursor{display:none} } /* ========================================================================= CARTE RÉELLE "SUIVI EN TEMPS RÉEL" — Toulouse (Leaflet) ========================================================================= */ .mission-map{position:relative;aspect-ratio:16/10;min-height:340px;overflow:hidden; -webkit-backdrop-filter:none;backdrop-filter:none;background:var(--grey-bg)} .mm-map{position:absolute;inset:0;border-radius:inherit;z-index:0} .leaflet-container{background:#EAEAEF;font-family:inherit} .mm-map .leaflet-tile{filter:saturate(1.03) contrast(1.02)} .mm-veil{position:absolute;inset:0;z-index:450;pointer-events:none;border-radius:inherit; box-shadow:inset 0 0 0 1px var(--glass-line), inset 0 44px 60px -44px rgba(10,10,12,.16), inset 0 -54px 70px -54px rgba(10,10,12,.20)} /* Marqueurs (divIcon) */ .mm-divicon{background:none!important;border:none!important} .mm-avatar{position:relative;width:54px;height:54px} .mm-avatar img{width:54px;height:54px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 6px 16px rgba(10,10,12,.32);display:block} .mm-avatar.noimg{width:54px;height:54px;border-radius:50%;background:var(--black);border:3px solid #fff;box-shadow:0 6px 16px rgba(10,10,12,.32)} .mm-avatar-ring{position:absolute;inset:-7px;border-radius:50%;border:2.5px solid var(--black);opacity:0} .mission-map.is-playing .mm-avatar-ring{animation:mmPulse 1.9s ease-out infinite} @keyframes mmPulse{0%{transform:scale(.65);opacity:.7}100%{transform:scale(1.55);opacity:0}} .mm-home{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50% 50% 50% 4px; transform:rotate(45deg);background:#fff;box-shadow:0 6px 16px rgba(10,10,12,.28);color:var(--ink)} .mm-home svg{transform:rotate(-45deg);width:19px;height:19px} .mm-car{width:22px;height:22px;border-radius:50%;background:#FF2D2D;border:3px solid #fff; box-shadow:0 0 0 6px rgba(255,45,45,.22),0 4px 14px rgba(255,45,45,.55)} /* Notification (la photo de profil reçoit la demande) */ .mm-notif{position:absolute;top:14px;left:14px;z-index:1200;max-width:min(300px,calc(100% - 120px)); display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:16px; background:var(--glass);border:1px solid var(--glass-line); -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px); box-shadow:0 16px 40px rgba(10,10,12,.18);opacity:0} .mm-notif-ic{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--ink);color:#fff} .mm-notif-ic svg{width:19px;height:19px} .mm-notif-txt{flex:1 1 auto;min-width:0} .mm-notif-txt b{font-size:13.5px;font-weight:700;color:var(--ink)} .mm-notif-txt small{display:block;font-size:12px;color:var(--grey-text);margin-top:1px;white-space:nowrap} .mm-notif-state{flex:0 0 auto;font-size:12.5px;font-weight:700;color:var(--black);opacity:0;transform:scale(.85);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)} .mm-notif-state.on{opacity:1;transform:scale(1)} /* HUD bas-gauche */ .mm-hud{position:absolute;left:14px;bottom:56px;z-index:1200;display:inline-flex;align-items:center;gap:8px; padding:8px 13px;border-radius:999px;background:rgba(10,10,12,.82);color:#fff;font-size:12.5px;font-weight:600;opacity:0; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .mm-hud-dot{width:8px;height:8px;border-radius:50%;background:#FF2D2D;animation:mmDot 1.4s ease-out infinite} @keyframes mmDot{0%{box-shadow:0 0 0 0 rgba(255,45,45,.55)}100%{box-shadow:0 0 0 9px rgba(255,45,45,0)}} /* Contrôles */ .mm-controls{position:absolute;left:0;right:0;bottom:14px;z-index:1200;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:0 12px} .mm-btn{font-size:14px;font-weight:600;color:var(--ink);background:var(--glass);border:1px solid var(--glass-line); padding:11px 20px;border-radius:999px;cursor:pointer;-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px); box-shadow:0 8px 22px rgba(10,10,12,.14);transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out)} .mm-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(10,10,12,.2)} .mm-btn-primary{color:#fff;background:var(--ink);border-color:transparent} .mm-btn[hidden]{display:none} /* Badge */ .mm-badge{position:absolute;top:14px;right:14px;z-index:1200;font-size:11px;font-weight:600;color:var(--grey-text); background:rgba(255,255,255,.62);border:1px solid var(--glass-line);padding:5px 10px;border-radius:999px; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .leaflet-control-attribution{font-size:11px;background:rgba(255,255,255,.7)!important} .leaflet-control-attribution a{color:var(--grey-text)!important} /* Fallback si Leaflet indisponible */ .mission-map.is-static .mm-map,.mission-map.is-static .mm-controls,.mission-map.is-static .mm-notif,.mission-map.is-static .mm-hud,.mission-map.is-static .mm-badge{display:none} .mission-map.is-static{background:var(--grey-bg)} @media (prefers-reduced-motion:reduce){.mm-avatar-ring,.mm-hud-dot,.mm-divicon .mm-ring{animation:none}} /* --- Personnes nommées (Julien / Rayane) --- */ .mm-person{position:relative;width:100%;display:flex;flex-direction:column;align-items:center} .mm-ava{position:relative;width:50px;height:50px} .mm-ava img{width:50px;height:50px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 6px 16px rgba(10,10,12,.32);display:block} .mm-ava.noimg{width:50px;height:50px;border-radius:50%;background:var(--black);border:3px solid #fff;box-shadow:0 6px 16px rgba(10,10,12,.32)} .mm-ring{position:absolute;inset:-6px;border-radius:50%;border:2.5px solid var(--black);opacity:0} .mm-divicon.pulse .mm-ring{opacity:1;animation:mmPulse 1.7s ease-out infinite} .mm-divicon.driving .mm-ring{opacity:1;border-color:#FF2D2D;animation:mmPulse 1.05s ease-out infinite} .mm-phone{position:absolute;right:-9px;bottom:-7px;width:24px;height:24px;border-radius:8px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 4px 10px rgba(10,10,12,.35)} .mm-phone svg{width:12px;height:12px} .mm-divicon.req .mm-phone{background:var(--black);box-shadow:0 0 0 5px rgba(0,0,0,.22),0 4px 10px rgba(10,10,12,.3)} .mm-tag{margin-top:6px;background:rgba(255,255,255,.94);border:1px solid var(--glass-line);border-radius:9px;padding:2px 9px;text-align:center;box-shadow:0 4px 12px rgba(10,10,12,.16)} .mm-tag b{display:block;font-size:11.5px;font-weight:700;color:var(--ink);line-height:1.15;white-space:nowrap} .mm-tag i{display:block;font-size:9.5px;font-style:normal;color:var(--grey-text);line-height:1.1;white-space:nowrap} /* --- Bandeau d'étape (narration) --- */ .mm-step{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);z-index:1200;display:inline-flex;align-items:center;gap:10px; max-width:calc(100% - 26px);padding:8px 16px 8px 8px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line); -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);box-shadow:0 14px 36px rgba(10,10,12,.18);opacity:0} .mm-step-num{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center} .mm-step-txt{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* --- Couche FX (chips + cœurs) --- */ .mm-fx{position:absolute;inset:0;z-index:1100;pointer-events:none;overflow:hidden} .mm-chip{position:absolute;transform:translate(-50%,-135%);font-size:13px;font-weight:800;color:#fff;background:var(--ink);padding:5px 11px;border-radius:999px;box-shadow:0 8px 20px rgba(10,10,12,.3);white-space:nowrap} .mm-chip.pay{background:var(--black)} .mm-chip.ok{background:#34C759;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;transform:translate(-50%,-50%)} .mm-chip.req{background:rgba(255,255,255,.94);color:var(--ink);border:1px solid var(--glass-line)} .mm-heart{position:absolute;font-size:18px;transform:translate(-50%,-50%);will-change:transform,opacity} /* ========================================================================= RESPONSIVE MOBILE — affinages petits écrans (≤ 560px) ========================================================================= */ @media (max-width:560px){ .hero{padding:94px 18px 4px} .hero-eyebrow{margin-bottom:16px;font-size:12px;padding:6px 12px 6px 10px} .hero h1{font-size:clamp(40px,13.5vw,60px)} .hero p{font-size:16px;margin-top:14px} .search-box{height:56px} .search-box input{font-size:16px} /* ≥16px : évite le zoom auto iOS */ /* Catégories : tuiles en colonne (icône au-dessus, libellé dessous) */ .cats{gap:11px} .cat{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:16px 10px;min-height:108px} .cat .cat-label{flex:0 0 auto;text-align:center;font-size:14.5px;line-height:1.2;min-height:2.4em;display:flex;align-items:center;justify-content:center} .cat .cat-arrow{display:none} .cat-media{width:48px;height:48px} .cat svg{width:24px;height:24px} /* La tuile "feature" reste en ligne, pleine largeur */ .cat--feature{flex-direction:row;text-align:left;min-height:108px;padding:16px} .cat--feature .cat-label{text-align:left;font-size:17px;min-height:0;justify-content:flex-start} .cat--feature .cat-media{width:54px;height:54px} .cat--feature svg{width:28px;height:28px} .cat--feature::after{font-size:10px;top:12px;right:12px} .step{padding:20px 18px} /* Carte mission : plus haute, contrôles confortables */ .mission-map{min-height:360px} .mm-notif{left:10px;right:auto;top:10px;max-width:calc(100% - 78px);padding:9px 11px;gap:9px} .mm-notif-ic{width:34px;height:34px} .mm-notif-txt b{font-size:13px} .mm-badge{top:10px;right:10px;font-size:10px;padding:4px 8px} .mm-step{bottom:54px;padding:7px 13px 7px 7px} .mm-step-num{width:23px;height:23px;font-size:12px} .mm-step-txt{font-size:12px} .mm-tag b{font-size:11px} .mm-controls{bottom:12px;gap:8px;padding:0 10px} .mm-btn{font-size:13.5px;padding:10px 16px} } /* ========================================================================= PERF — fluidité : on coupe les effets coûteux qui re-peignent au scroll. backdrop-filter (flou) conservé uniquement sur header + barre du bas (fixes). ========================================================================= */ .cat,.step,.pro-cta,.hero-eyebrow,.search-box,.search-sticky, .mm-notif,.mm-step,.mm-btn,.mm-badge,.c3d-nav,.zone-menu,.notif-menu{ -webkit-backdrop-filter:none!important;backdrop-filter:none!important} .header,.bottom-nav{-webkit-backdrop-filter:saturate(160%) blur(12px)!important;backdrop-filter:saturate(160%) blur(12px)!important} .cat--feature{background:var(--white)!important} /* aurora désormais statique → plus de re-rastérisation du flou par frame */ .fx-blob{will-change:auto} #fx-grain{mix-blend-mode:normal;opacity:.03} #cursor{mix-blend-mode:normal} /* ========================================================================= PARCOURS ENTREPRISE / DEVIS (overlay plein écran) ========================================================================= */ .entr{position:fixed;inset:0;z-index:300;display:none;background:var(--grey-bg)} .entr.open{display:block} .entr-panel{max-width:560px;margin:0 auto;height:100%;display:flex;flex-direction:column;background:var(--white)} .entr-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;padding:11px 12px;background:rgba(255,255,255,.92);border-bottom:1px solid var(--grey-line)} .entr-ic{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--ink);background:var(--grey-bg)} .entr-ic svg{width:20px;height:20px} .entr-htxt{flex:1 1 auto;min-width:0;text-align:center} .entr-htxt b{display:block;font-size:16px;font-weight:700;color:var(--ink);line-height:1.15} .entr-htxt small{display:block;font-size:12px;color:var(--grey-text)} .entr-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 16px 32px} .entr-lead{font-size:14px;color:var(--grey-text);margin-bottom:14px} .entr-choice{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--white);border:1px solid var(--grey-line);border-radius:18px;padding:18px 16px;margin-bottom:12px;box-shadow:0 6px 18px rgba(10,10,12,.05);transition:transform .15s var(--ease-out),box-shadow .15s var(--ease-out);cursor:pointer} .entr-choice:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(10,10,12,.1)} .ec-ic{flex:0 0 auto;width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:var(--grey-bg);color:var(--ink)} .ec-ic svg{width:24px;height:24px} .ec-txt{flex:1 1 auto} .ec-txt b{display:block;font-size:16px;font-weight:700;color:var(--ink)} .ec-txt small{display:block;font-size:12.5px;color:var(--grey-text);margin-top:2px;line-height:1.35} .ec-go{flex:0 0 auto;display:flex;align-items:center;color:var(--grey-text)} .ec-go svg{width:20px;height:20px} .entr-co{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--white);border:1px solid var(--grey-line);border-radius:16px;padding:13px;margin-bottom:10px;transition:transform .15s var(--ease-out),box-shadow .15s var(--ease-out);cursor:pointer} .entr-co:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(10,10,12,.1)} .entr-ava{width:46px;height:46px;border-radius:13px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;color:#fff;background:var(--black)} .entr-ava.lg{width:58px;height:58px;border-radius:16px;font-size:24px} .entr-co-main{flex:1 1 auto;min-width:0} .entr-co-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .entr-co-top b{font-size:15px;font-weight:700;color:var(--ink)} .entr-badge{font-size:10.5px;font-weight:700;color:var(--black);background:rgba(59,130,246,.12);padding:2px 7px;border-radius:999px} .entr-spec{display:block;font-size:12px;color:var(--ink);margin-top:2px;opacity:.8} .entr-meta{display:block;font-size:11.5px;color:var(--grey-text);margin-top:1px} .entr-note{flex:0 0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;line-height:1} .entr-note b{font-size:18px;font-weight:800;background:var(--black);-webkit-background-clip:text;background-clip:text;color:transparent} .entr-note small{font-size:10px;color:var(--grey-text)} .entr-avis{font-size:10px;color:var(--grey-text);margin-top:3px} .entr-co-head{display:flex;gap:14px;align-items:center;margin-bottom:14px} .entr-noteline{font-size:12.5px;color:var(--grey-text);margin-top:3px} .entr-stars{color:var(--black);letter-spacing:1px} .entr-photos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px} .entr-photo{width:62px;height:62px;border-radius:12px;background:var(--grey-bg);display:flex;align-items:center;justify-content:center;border:1px solid var(--grey-line);flex:0 0 auto;color:var(--grey-text)} .entr-photo svg{width:24px;height:24px} .entr-photo.more{font-size:11px;font-weight:600;color:var(--grey-text)} .entr-reviews{margin-bottom:16px} .entr-rev{background:var(--grey-bg);border-radius:12px;padding:10px 12px;margin-bottom:8px} .entr-rev-top{display:flex;justify-content:space-between;font-size:12.5px} .entr-rev-top b{color:var(--ink)} .entr-rev-top span{color:var(--black)} .entr-rev p{font-size:13px;color:var(--apple-text);margin-top:4px;line-height:1.4} .entr-form h4{font-size:15px;font-weight:700;margin:6px 0 12px;color:var(--ink)} .entr-form label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:12px} .entr-form input,.entr-form textarea{display:block;width:100%;margin-top:5px;font-size:16px;font-weight:400;color:var(--ink);background:var(--white);border:1px solid var(--grey-line);border-radius:12px;padding:12px 14px;outline:none;font-family:inherit} .entr-form input:focus,.entr-form textarea:focus{border-color:var(--black)} .entr-send{display:block;width:100%;margin-top:6px;font-size:15px;font-weight:600;color:#fff;background:var(--ink);border:none;border-radius:14px;padding:15px;cursor:pointer} .entr-ghost{display:block;width:100%;margin-top:10px;font-size:14px;font-weight:600;color:var(--ink);background:var(--grey-bg);border:none;border-radius:14px;padding:13px;cursor:pointer} .entr-note-sm{font-size:11.5px;color:var(--grey-text);text-align:center;margin-top:10px} .entr-q-firm{display:flex;align-items:center;gap:12px;margin-bottom:16px} .entr-q-firm small{display:block;color:var(--grey-text);font-size:12.5px} .entr-q-firm b{font-size:15px;color:var(--ink)} .entr-q-lines{background:var(--grey-bg);border-radius:14px;padding:4px 14px;margin-bottom:12px} .entr-q-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;font-size:13.5px;border-bottom:1px solid var(--grey-line)} .entr-q-row:last-child{border-bottom:none} .entr-q-row span{color:var(--grey-text);flex:0 0 auto} .entr-q-row b{color:var(--ink);font-weight:600;text-align:right} .entr-q-total{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:14px;background:var(--grey-bg);margin-bottom:8px} .entr-q-total span{font-size:14px;font-weight:600;color:var(--ink)} .entr-q-total b{font-size:24px;font-weight:800;background:var(--black);-webkit-background-clip:text;background-clip:text;color:transparent} .entr-q-delai{font-size:12.5px;color:var(--grey-text);text-align:center;margin-bottom:14px} @media (max-width:560px){.entr-panel{max-width:none}} /* ========================================================================= PANIER — overlay "mon panier" (services cumulés) + barre + notification ========================================================================= */ .panier{position:fixed;inset:0;z-index:300;display:none;background:var(--grey-bg)} .panier.open{display:block} .pnr-panel{max-width:560px;margin:0 auto;height:100%;display:flex;flex-direction:column;background:var(--white)} .pnr-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 16px 12px} .pnr-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--white);border:1px solid var(--grey-line);border-radius:14px;padding:13px 14px;margin-bottom:9px;cursor:pointer;transition:border-color .15s var(--ease-out),background .15s var(--ease-out)} .pnr-row.on{border-color:var(--black);background:var(--grey-bg)} .pnr-check{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:var(--grey-text);background:var(--grey-bg)} .pnr-row.on .pnr-check{color:#fff;background:var(--black)} .pnr-lbl{flex:1 1 auto;min-width:0;font-size:14.5px;font-weight:600;color:var(--ink)} .pnr-price{flex:0 0 auto;font-size:13.5px;font-weight:700;color:var(--grey-text)} .pnr-row.on .pnr-price{color:var(--ink)} .pnr-row.custom{cursor:default} .pnr-customs{margin-bottom:10px} .pnr-del{flex:0 0 auto;width:24px;height:24px;border:none;background:var(--grey-bg);border-radius:50%;color:var(--grey-text);cursor:pointer;font-size:12px} .pnr-foot{flex:0 0 auto;border-top:1px solid var(--grey-line);background:var(--white);padding:14px 16px;box-shadow:0 -8px 24px rgba(10,10,12,.06)} .pnr-line{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--ink);padding:3px 0} .pnr-line span{color:var(--grey-text)} .pnr-line.disc span,.pnr-line.disc b{color:var(--black);font-weight:700} .pnr-line.total{font-size:17px;font-weight:800;padding-top:8px;margin-top:4px;border-top:1px dashed var(--grey-line)} .pnr-line.total b{background:var(--black);-webkit-background-clip:text;background-clip:text;color:transparent} .pnr-hint{font-size:12px;color:var(--black);font-weight:600;text-align:center;margin:8px 0 12px} @media (max-width:560px){.pnr-panel{max-width:none}} /* Barre fixe "Voir mon panier" (visible quand le panier contient des services) */ .panier-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:66px;z-index:95;display:none;align-items:center;justify-content:space-between;gap:12px; width:calc(100% - 24px);max-width:560px;padding:13px 18px;border-radius:16px;cursor:pointer; background:var(--ink);color:#fff;box-shadow:0 14px 34px rgba(10,10,12,.3)} .panier-bar.show{display:flex} .pbar-l{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:700} .panier-bar svg{width:19px;height:19px} .pbar-r{display:inline-flex;align-items:center;gap:10px} .pbar-r b{font-size:15px;font-weight:800;background:var(--black);-webkit-background-clip:text;background-clip:text;color:transparent} .pbar-cta{font-size:13px;font-weight:600;opacity:.92} /* Notification "Ajoutez d'autres services" (cumul, en haut de la home) */ .pickmore{position:fixed;left:50%;top:calc(64px + env(safe-area-inset-top));z-index:96;display:none;align-items:center;gap:11px; width:calc(100% - 24px);max-width:560px;padding:12px 14px;border-radius:16px; background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px); box-shadow:0 14px 34px rgba(10,10,12,.16);transform:translateX(-50%);opacity:0;transition:opacity .3s var(--ease-out)} .pickmore.show{display:flex;opacity:1} .pm-ic{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--black);color:#fff} .pm-ic svg{width:18px;height:18px} .pm-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px} .pm-txt b{font-size:14px;font-weight:700;color:var(--ink)} .pm-txt small{font-size:11.5px;color:var(--grey-text)} .pm-x{flex:0 0 auto;width:26px;height:26px;border:none;background:var(--grey-bg);border-radius:50%;color:var(--grey-text);cursor:pointer;display:flex;align-items:center;justify-content:center} .pm-x svg{width:14px;height:14px} /* Invite de cumul sur l'écran de paiement (avant "Payer") */ .pay-cumul{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin:4px 0 14px;padding:13px 14px;border-radius:16px;cursor:pointer; background:var(--grey-bg);border:1px solid var(--black);transition:transform .15s var(--ease-out),box-shadow .15s var(--ease-out)} .pay-cumul:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(10,10,12,.1)} .pc-ic{flex:0 0 auto;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--black);color:#fff} .pc-ic svg{width:19px;height:19px} .pc-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px} .pc-txt b{font-size:14px;font-weight:700;color:var(--ink)} .pc-txt small{font-size:11.5px;color:var(--grey-text)} .pc-arrow{flex:0 0 auto;font-size:20px;color:var(--black);font-weight:700} /* Panier épuré : services cumulés + bouton "ajouter d'autres services" */ .pnr-empty{text-align:center;padding:48px 16px;color:var(--ink)} .pnr-empty p{font-size:16px;font-weight:600} .pnr-empty .pnr-empty-sub{font-size:13.5px;color:var(--grey-text);font-weight:400;margin-top:6px} .pnr-addmore{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:6px;padding:13px;border-radius:14px;cursor:pointer; background:var(--grey-bg);border:1px dashed var(--grey-line);color:var(--ink);font-size:14px;font-weight:600} .pnr-addmore span{font-size:17px;color:var(--black);font-weight:800} /* MARCHÉ — liste de prestataires en fin de service (overlay #market) */ .mk-controls{flex:0 0 auto;padding:4px 16px 12px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--grey-line);background:var(--white)} .mk-seg{display:flex;gap:6px;background:var(--grey-bg);border-radius:12px;padding:4px} .mk-seg-btn{flex:1;border:none;background:transparent;border-radius:9px;padding:8px 6px;font-size:12.5px;font-weight:600;color:var(--grey-text);cursor:pointer;transition:color .15s var(--ease-out),background .15s var(--ease-out);white-space:nowrap} .mk-seg-btn.active{color:#fff;background:var(--black)} .mk-scroll{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--grey-bg)} .mk-feed{max-width:560px;margin:0 auto;padding:14px 16px 32px;display:flex;flex-direction:column;gap:11px} .mk-card{display:flex;align-items:center;gap:13px;background:var(--white);border:1px solid var(--grey-line);border-radius:18px;padding:14px} .mk-ava{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:#fff;background:var(--black)} .mk-info{flex:1 1 auto;min-width:0} .mk-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .mk-top b{font-size:15px;font-weight:700;color:var(--ink)} .mk-reco{font-size:10.5px;font-weight:800;color:#fff;background:var(--black);padding:2px 7px;border-radius:999px;text-transform:uppercase;letter-spacing:.02em} .mk-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:3px} .mk-badge{font-size:11px;font-weight:700;color:var(--grey-text);background:var(--grey-bg);padding:2px 8px;border-radius:999px} .mk-verif{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;color:var(--black)} .mk-verif svg{width:12px;height:12px} .mk-note{font-size:12px;color:var(--grey-text);font-weight:600} .mk-note small{font-size:10px} .mk-loc{font-size:12px;color:var(--grey-text);margin-top:3px} .mk-right{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:7px} .mk-price{font-size:18px;font-weight:800;background:var(--black);-webkit-background-clip:text;background-clip:text;color:transparent} .mk-choose{border:none;background:var(--ink);color:#fff;font-size:13px;font-weight:700;padding:9px 16px;border-radius:11px;cursor:pointer;transition:transform .15s var(--ease-out)} .mk-choose:hover{transform:translateY(-1px)} .mk-empty{text-align:center;color:var(--grey-text);padding:40px 16px;font-size:14px} .mk-multi{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--white);border:1px solid var(--grey-line);border-radius:12px;padding:9px 12px;cursor:pointer} .mk-multi.on{border-color:var(--black);background:var(--grey-bg)} .mk-switch{flex:0 0 auto;width:40px;height:23px;border-radius:999px;background:var(--grey-line);position:relative;transition:background .2s var(--ease-out)} .mk-multi.on .mk-switch{background:var(--black)} .mk-knob{position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(10,10,12,.3);transition:transform .2s var(--ease-out)} .mk-multi.on .mk-knob{transform:translateX(17px)} .mk-multi-txt b{display:block;font-size:13px;font-weight:700;color:var(--ink)} .mk-multi-txt small{font-size:11px;color:var(--grey-text)} .mk-ia{margin-top:8px;font-size:11.5px;line-height:1.45;color:var(--grey-text)} .mk-ia:empty{display:none} .mk-card.sel{border-color:var(--black);background:var(--grey-bg)} .mk-check{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--grey-line);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#fff} .mk-check.on{background:var(--black);border-color:transparent} .mk-foot{flex:0 0 auto;display:none;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--grey-line);background:var(--white)} .mk-foot.show{display:block} .mk-send{width:100%;border:none;border-radius:14px;padding:15px;font-size:15px;font-weight:700;color:#fff;background:var(--ink);cursor:pointer} .mk-send:disabled{opacity:.4;cursor:default} /* Checkout générique (bottom sheet, réutilise .amore) */ .co-card{text-align:center} .co-eyebrow{font-size:12px;font-weight:700;color:var(--black);text-transform:uppercase;letter-spacing:.03em} .co-price{font-size:38px;font-weight:800;letter-spacing:-0.03em;margin:6px 0 2px;background:var(--black);-webkit-background-clip:text;background-clip:text;color:transparent} .co-service{font-size:15px;font-weight:700;color:var(--ink)} .co-provider{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 0;padding:11px;background:var(--grey-bg);border-radius:14px;text-align:left} .co-provider .co-ava{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:#fff;background:var(--black)} .co-provider b{font-size:14px;font-weight:700;color:var(--ink);display:block} .co-provider small{font-size:11.5px;color:var(--grey-text)} .co-secure{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--grey-text);text-align:left;margin-bottom:14px} .co-secure svg{flex:0 0 auto;width:16px;height:16px} /* PROFIL — chooser + formulaire + vue publique */ .pf-intro{font-size:14px;color:var(--grey-text);margin-bottom:14px} /* (.pf-typechoice / .pf-type-btn / .pf-type-ic supprimés — Lot D : plus aucun rendu ne les utilise.) */ .pf-head{display:flex;align-items:center;gap:14px;margin-bottom:14px} .pf-ava{flex:0 0 auto;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:#fff;background:var(--black);position:relative;cursor:pointer} .pf-ava img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover} .pf-ava-edit{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;border:2px solid var(--white)} .pf-ava-edit svg{width:11px;height:11px} .pf-ava-add{display:inline-flex;align-items:center;gap:5px;margin-top:7px;font-size:12.5px;font-weight:600;color:var(--black);background:none;border:none;padding:0;cursor:pointer} .pf-ava-add svg{width:14px;height:14px} /* Champ mot de passe + œil afficher/masquer */ .pw-wrap{position:relative} .pw-wrap .field{padding-right:48px} .pw-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--grey-text);cursor:pointer;border-radius:9px} .pw-eye:hover{color:var(--ink)} .pw-eye svg{width:19px;height:19px} .pw-eye .pw-i-hide{display:none} .pw-eye.on .pw-i-show{display:none} .pw-eye.on .pw-i-hide{display:block} /* Email de réinitialisation simulé */ .pw-mail{text-align:left;background:var(--grey-bg);border:1px solid var(--grey-line);border-radius:14px;padding:14px 15px;margin:6px 0 12px} .pw-mail-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px} .pw-mail-from{font-weight:800;font-size:14px;color:var(--ink)} .pw-mail-meta{font-size:11.5px;color:var(--grey-text)} .pw-mail-sub{font-weight:700;font-size:13.5px;color:var(--ink);margin-bottom:5px} .pw-mail-txt{font-size:12.5px;color:var(--grey-text);line-height:1.5;margin-bottom:12px} .pw-mail .entr-send{width:100%} .pf-htxt b{font-size:18px;font-weight:700;color:var(--ink)} .pf-htxt .pf-type-tag{display:inline-block;font-size:11px;font-weight:700;color:var(--grey-text);background:var(--grey-bg);padding:2px 9px;border-radius:999px;margin-left:6px} .pf-note-big{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--grey-text);margin-top:4px} .pf-note-big b{font-size:16px;background:var(--black);-webkit-background-clip:text;background-clip:text;color:transparent} .pf-anon{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--grey-text);background:var(--grey-bg);border-radius:12px;padding:10px 12px} .pf-anon svg{flex:0 0 auto;width:15px;height:15px} .pf-row{display:flex;gap:10px} .pf-row>div{flex:1} .pf-media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px} .pf-mtile{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--grey-bg);border:1px solid var(--grey-line)} .pf-mtile img,.pf-mtile video{width:100%;height:100%;object-fit:cover;display:block} .pf-mtile .pf-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(10,10,12,.25)} .pf-mtile .pf-play svg{width:26px;height:26px} .pf-mtile .pf-del{position:absolute;top:5px;right:5px;width:22px;height:22px;border:none;border-radius:50%;background:rgba(10,10,12,.6);color:#fff;font-size:12px;cursor:pointer;line-height:1} .pf-add{aspect-ratio:1/1;border:1px dashed var(--grey-line);border-radius:12px;background:var(--grey-bg);color:var(--grey-text);font-size:12px;font-weight:600;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px} .pf-add svg{width:20px;height:20px;color:var(--black)} .pf-rev{border:1px solid var(--grey-line);border-radius:14px;padding:12px 14px;margin-bottom:9px} .pf-rev-top{display:flex;align-items:center;justify-content:space-between;gap:8px} .pf-rev-top b{font-size:13.5px;font-weight:700;color:var(--ink)} .pf-rev-note{font-size:13px;font-weight:800;background:var(--black);-webkit-background-clip:text;background-clip:text;color:transparent} .pf-rev-txt{font-size:13px;color:var(--apple-text);margin-top:5px;line-height:1.45} .pf-rev-date{font-size:11px;color:var(--grey-text);margin-top:5px} .pf-avg{display:flex;align-items:baseline;gap:8px;margin-bottom:12px} .pf-avg b{font-size:32px;font-weight:800;letter-spacing:-0.03em;background:var(--black);-webkit-background-clip:text;background-clip:text;color:transparent} .pf-avg small{font-size:13px;color:var(--grey-text)} .pf-actions{display:flex;gap:10px;margin-top:18px} .pf-scan-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;margin:6px 0} .pf-range{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:999px;background:var(--grey-line);outline:none;margin:6px 0 2px} .pf-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--black);cursor:pointer;box-shadow:0 2px 6px rgba(10,10,12,.25)} .pf-range::-moz-range-thumb{width:22px;height:22px;border:none;border-radius:50%;background:var(--black);cursor:pointer} .pf-range-ends{display:flex;justify-content:space-between;font-size:11.5px;color:var(--grey-text);margin-bottom:4px} #pfRayonVal{font-weight:800;background:var(--black);-webkit-background-clip:text;background-clip:text;color:transparent} .pf-files{display:flex;flex-direction:column;gap:7px;margin-top:4px} .pf-file{display:flex;align-items:center;gap:10px;background:var(--grey-bg);border:1px solid var(--grey-line);border-radius:12px;padding:9px 12px} .pf-file-ic{flex:0 0 auto;color:var(--black)} .pf-file-ic svg{width:18px;height:18px;display:block} .pf-file-name{flex:1 1 auto;min-width:0;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pf-file-del{flex:0 0 auto;width:22px;height:22px;border:none;background:var(--grey-line);border-radius:50%;color:var(--grey-text);cursor:pointer;font-size:11px} .pf-upload{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:8px;padding:12px;border-radius:12px;border:1px dashed var(--grey-line);background:var(--grey-bg);color:var(--ink);font-size:13.5px;font-weight:600;cursor:pointer} .pf-upload svg{width:18px;height:18px;color:var(--black)} /* Compte — choix / connexion / inscription */ .acc-auth{max-width:380px;margin:24px auto 0;display:flex;flex-direction:column;gap:12px} .aa-brand{font-family:'Inter',sans-serif;font-weight:800;font-size:30px;letter-spacing:-0.04em;text-align:center;margin-bottom:2px} .aa-lead{font-size:14px;color:var(--grey-text);text-align:center;margin-bottom:8px;line-height:1.5} .aa-err{font-size:13px;color:var(--danger);min-height:16px} .aa-link{background:none;border:none;color:var(--grey-text);font-size:13px;font-weight:600;cursor:pointer;text-decoration:underline;padding:4px;align-self:center} .aa-sep{font-size:13px;color:var(--grey-text);text-align:center;margin-top:8px} .aa-big{padding:15px} /* Alerte « infos manquantes » dans le profil */ .pf-alert{display:flex;gap:11px;align-items:flex-start;background:var(--grey-bg);border:1px solid var(--grey-line);border-radius:14px;padding:13px 14px;margin-bottom:16px} .pf-alert>svg{flex:0 0 auto;width:20px;height:20px;color:var(--black);margin-top:1px} .pf-alert b{font-size:13.5px;font-weight:700;color:var(--ink);display:block;margin-bottom:2px} .pf-alert small{font-size:12.5px;color:var(--grey-text);line-height:1.45} .pf-alert .pf-alert-cta{margin-top:9px;border:none;background:var(--ink);color:#fff;font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:10px;cursor:pointer} /* Pied de page intégré au Compte (toujours disponible) */ .acc-foot{margin-top:30px;padding-top:20px;border-top:1px solid var(--grey-line)} .acc-foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .acc-foot-col h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--grey-text);margin:0 0 9px} .acc-foot-col a{display:block;font-size:13px;color:var(--ink);text-decoration:none;padding:4px 0} .acc-foot-col a:hover{color:var(--black)} .acc-foot-bottom{margin-top:18px;display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--grey-text)} .acc-foot-demo{opacity:.8} /* Invite de fin de service "ajouter un autre service / payer" */ .amore{position:fixed;inset:0;z-index:340;display:none;align-items:flex-end;justify-content:center;background:rgba(10,10,12,.45)} .amore.open{display:flex} .amore-card{width:100%;max-width:460px;background:var(--white);border-radius:24px 24px 0 0;padding:26px 22px calc(22px + env(safe-area-inset-bottom));text-align:center;box-shadow:0 -10px 40px rgba(10,10,12,.25)} @media (min-width:560px){.amore{align-items:center}.amore-card{border-radius:24px}} .amore-ic{width:54px;height:54px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--black)} .amore-ic svg{width:26px;height:26px} .amore-card h3{font-size:19px;font-weight:800;color:var(--ink);margin-bottom:6px} .amore-sub{font-size:14px;color:var(--grey-text);margin-bottom:18px} .amore-sub b{color:var(--ink)} .entr-add span{font-weight:500;color:var(--grey-text);font-size:12px} /* (Styles de l'ancien overlay #auth et de la bannière #authStatus supprimés — Lot D. L'authentification vit dans l'écran Compte.) */ .logo-dot{font-size:1.55em;line-height:0;margin-left:1px;background:var(--black);-webkit-background-clip:text;background-clip:text;color:transparent} /* === V9 — neutralisation des effets « Liquid Intelligence » (noir & blanc pur) === */ #fx-aurora,#fx-grain,#cursor{display:none!important} /* ========================================================================= V9 — ÉCRANS FIDÉLITÉ & PHOTOS (data-action natif). Noir & blanc pur. ========================================================================= */ .pf-wrap,.fid-wrap{max-width:var(--app,460px);margin:0 auto;padding:8px 20px 40px} .pf-eyebrow,.fid-sec-title{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--grey-text);margin:6px 0 10px} .pf-h2{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--black);margin:0 0 8px} .pf-sub{font-size:15px;line-height:1.5;color:var(--grey-text);margin:0 0 20px} .photo-btns{display:flex;flex-direction:column;gap:10px;margin:18px 0 14px} .photo-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:15px 16px;border:none;border-radius:var(--radius); background:var(--black);color:var(--white);font-size:15px;font-weight:600;cursor:pointer;transition:transform .12s var(--ease),opacity .12s var(--ease)} .photo-btn:active{transform:scale(.985)} .photo-btn--ghost{background:var(--white);color:var(--black);box-shadow:inset 0 0 0 1px var(--grey-line)} .photo-btn-ic{display:inline-flex;width:20px;height:20px} .photo-btn-ic svg{width:20px;height:20px} .pf-note{font-size:13px;line-height:1.5;color:var(--grey-text);margin-top:6px;text-align:center} .pf-gate{border-radius:var(--radius);overflow:hidden;box-shadow:inset 0 0 0 1px var(--grey-line);margin:6px 0 4px} .pf-gate-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 15px;background:var(--white)} .pf-gate-row b{font-size:14px;color:var(--black)}.pf-gate-row span{font-size:13px;color:var(--grey-text);text-align:right} .pf-gate-row--off{background:var(--grey-bg);border-top:1px solid var(--grey-line)} .pf-check{width:56px;height:56px;margin:6px auto 14px;color:var(--black)}.pf-check svg{width:56px;height:56px} .pf-result{border-radius:var(--radius);box-shadow:inset 0 0 0 1px var(--grey-line);overflow:hidden;margin:6px 0 4px} .pf-res-row{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;font-size:14px;color:var(--grey-text);border-bottom:1px solid var(--grey-line)} .pf-res-row:last-child{border-bottom:none}.pf-res-row b{color:var(--black);font-weight:700} /* Tableau de bord fidélité */ .fid-tabs{display:flex;gap:6px;padding:5px;background:var(--grey-bg);border-radius:999px;margin:4px 0 20px} .fid-tab{flex:1;padding:9px 12px;border:none;border-radius:999px;background:transparent;color:var(--grey-text);font-size:14px;font-weight:600;cursor:pointer;transition:all .15s var(--ease)} .fid-tab.on{background:var(--white);color:var(--black);box-shadow:0 1px 3px rgba(0,0,0,.08)} .fid-card{background:var(--white);border-radius:var(--radius-lg);padding:22px 20px;box-shadow:inset 0 0 0 1px var(--grey-line)} .fid-points{font-size:46px;font-weight:900;letter-spacing:-.03em;color:var(--black);line-height:1} .fid-points span{font-size:18px;font-weight:600;color:var(--grey-text);margin-left:6px;letter-spacing:0} .fid-tier{font-size:14px;color:var(--grey-text);margin:8px 0 14px}.fid-tier b{color:var(--black)} .fid-bar{height:8px;border-radius:999px;background:var(--grey-bg);overflow:hidden} .fid-bar-fill{display:block;height:100%;border-radius:999px;background:var(--black);transition:width .5s var(--ease)} .fid-msg{font-size:14px;font-weight:600;color:var(--black);margin:12px 0 4px;line-height:1.45} .fid-perk{font-size:13px;color:var(--grey-text);line-height:1.45} .fid-bonus{border-radius:var(--radius);box-shadow:inset 0 0 0 1px var(--grey-line);overflow:hidden;margin-bottom:18px} .fid-bonus-row{display:flex;justify-content:space-between;padding:12px 15px;font-size:14px;color:var(--grey-text);border-bottom:1px solid var(--grey-line)} .fid-bonus-row:last-child{border-bottom:none}.fid-bonus-row b{color:var(--black)} .fid-gate-card{display:flex;gap:12px;align-items:flex-start;background:var(--grey-bg);border-radius:var(--radius);padding:15px;margin:16px 0 18px;box-shadow:inset 0 0 0 1px var(--grey-line)} .fid-gate-ic{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--black);color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px} .fid-gate-card b{display:block;font-size:14px;color:var(--black);margin-bottom:3px} .fid-gate-card span{font-size:13px;color:var(--grey-text);line-height:1.45} /* Parcours prestataire — validation 6 étapes */ .pv-photo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:150px;margin:0 0 18px;border-radius:var(--radius); background:var(--grey-bg);box-shadow:inset 0 0 0 1px var(--grey-line);color:var(--grey-text);font-size:13px;font-weight:600} .pv-photo svg{width:30px;height:30px} .pv-dots{display:flex;gap:6px;margin:0 0 18px} .pv-dot{flex:1;height:4px;border-radius:999px;background:var(--grey-line);transition:background .25s var(--ease)} .pv-dot.on{background:var(--black)} /* Zonage + garantie d'intervention */ .zg-modes{display:flex;gap:6px;padding:5px;background:var(--grey-bg);border-radius:999px;margin:0 0 16px} .zg-mode{flex:1;padding:9px 6px;border:none;border-radius:999px;background:transparent;color:var(--grey-text);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s var(--ease)} .zg-mode.on{background:var(--white);color:var(--black);box-shadow:0 1px 3px rgba(0,0,0,.08)} .zg-slider{background:var(--white);border-radius:var(--radius);padding:16px;box-shadow:inset 0 0 0 1px var(--grey-line);margin-bottom:6px} .zg-slider-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;font-size:13px;color:var(--grey-text)} .zg-slider-top b{font-size:18px;font-weight:800;color:var(--black)} .zg-slider input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:999px;background:var(--grey-line);outline:none} .zg-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--black);cursor:pointer;border:3px solid var(--white);box-shadow:0 1px 4px rgba(0,0,0,.25)} .zg-slider input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--black);cursor:pointer;border:3px solid var(--white)} .zg-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px} .zg-chip{padding:9px 14px;border:none;border-radius:999px;background:var(--white);color:var(--grey-text);font-size:13px;font-weight:600;cursor:pointer;box-shadow:inset 0 0 0 1px var(--grey-line);transition:all .14s var(--ease)} .zg-chip.on{background:var(--black);color:var(--white);box-shadow:none} .zg-sec{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--grey-text);margin:22px 0 10px} .zg-flux{display:flex;flex-direction:column;gap:8px} .zg-flux-card{display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;padding:13px 14px;border:none;border-radius:var(--radius);background:var(--white);box-shadow:inset 0 0 0 1px var(--grey-line);cursor:pointer;transition:box-shadow .14s var(--ease)} .zg-flux-card.on{box-shadow:inset 0 0 0 2px var(--black)} .zg-flux-dot{flex-shrink:0;width:18px;height:18px;margin-top:1px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--grey-line);position:relative} .zg-flux-dot.on{box-shadow:inset 0 0 0 2px var(--black)} .zg-flux-dot.on::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--black)} .zg-flux-txt b{display:block;font-size:14px;color:var(--black);margin-bottom:2px} .zg-flux-txt small{font-size:12.5px;line-height:1.45;color:var(--grey-text)} .zg-guard{background:var(--white);border-radius:var(--radius-lg);padding:20px;box-shadow:inset 0 0 0 1.5px var(--black)} .zg-guard--off{box-shadow:inset 0 0 0 1px var(--grey-line);text-align:center} .zg-guard-badge{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;color:var(--black);margin-bottom:10px} .zg-guard-badge svg{width:18px;height:18px} .zg-guard-sub{font-size:14px;line-height:1.5;color:var(--grey-text);margin:0 0 16px}.zg-guard-sub b{color:var(--black)} .zg-price{display:flex;align-items:flex-end;gap:18px;margin-bottom:16px} .zg-price-app{font-size:38px;font-weight:900;letter-spacing:-.03em;color:var(--black);line-height:.95} .zg-price-app span{display:block;font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--grey-text);margin-top:5px} .zg-price-mkt{padding-bottom:2px}.zg-price-mkt s{font-size:20px;font-weight:700;color:var(--grey-text)} .zg-price-mkt span{display:block;font-size:11px;color:var(--grey-text);margin-top:3px} .zg-verlist{display:flex;flex-direction:column;gap:8px;margin-bottom:16px} .zg-ver{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--apple-text,#1d1d1f)} .zg-ver-badge{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--black);color:var(--white)} .zg-ver-badge svg{width:12px;height:12px} .zg-guard--off .zg-guard-ic{width:46px;height:46px;margin:0 auto 12px;color:var(--black)}.zg-guard--off .zg-guard-ic svg{width:46px;height:46px} .zg-guard--off b{display:block;font-size:20px;font-weight:800;color:var(--black);margin-bottom:8px} .zg-guard--off p{font-size:13.5px;line-height:1.55;color:var(--grey-text);margin:0 auto 16px;max-width:320px} .zg-email{display:flex;flex-direction:column;gap:10px;max-width:320px;margin:0 auto} .zg-email input{width:100%;padding:14px 16px;border:none;border-radius:var(--radius);background:var(--grey-bg);box-shadow:inset 0 0 0 1px var(--grey-line);font-size:15px;font-family:inherit;color:var(--black);text-align:center} .zg-email input:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--black)} .zg-lead-ok{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--black);line-height:1.4;max-width:320px;margin:0 auto} .zg-lead-ok svg{flex-shrink:0;width:20px;height:20px} /* Parcours client — notation (étoiles N&B) */ .pc-stars{display:flex;gap:8px;justify-content:center;margin:8px 0 4px} .pc-star{border:none;background:none;padding:4px;cursor:pointer;color:var(--grey-line);transition:color .12s var(--ease),transform .12s var(--ease)} .pc-star svg{width:38px;height:38px;fill:currentColor;stroke:none} .pc-star.on{color:var(--black)} .pc-star:active{transform:scale(.9)} /* Suivi de mission « façon Uber » */ .ub-timeline{display:flex;flex-direction:column;gap:0;margin:4px 0 6px} .ub-tl-item{display:flex;gap:14px;align-items:flex-start;padding:0 0 18px;position:relative} .ub-tl-item:not(:last-child)::before{content:"";position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--grey-line)} .ub-tl-dot{flex-shrink:0;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--grey-bg);color:var(--grey-text);box-shadow:inset 0 0 0 1px var(--grey-line);z-index:1} .ub-tl-dot.alarm{background:var(--black);color:var(--white);box-shadow:none} .ub-tl-txt b{display:block;font-size:14px;color:var(--black)} .ub-tl-txt span{font-size:13px;color:var(--grey-text);line-height:1.45} .ub-eta{display:flex;gap:12px} .ub-eta-card{flex:1;background:var(--white);border-radius:var(--radius);padding:16px;box-shadow:inset 0 0 0 1px var(--grey-line);text-align:center} .ub-eta-label{display:block;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--grey-text);margin-bottom:6px} .ub-eta-card b{font-size:30px;font-weight:900;letter-spacing:-.02em;color:var(--black)} .ub-eta-card small{display:block;font-size:12px;color:var(--grey-text);margin-top:5px;line-height:1.4} .ub-thread{display:flex;flex-direction:column;gap:8px;margin:4px 0 14px} .ub-msg{align-self:flex-start;max-width:85%;background:var(--grey-bg);border-radius:14px;padding:10px 13px;font-size:14px;color:var(--black);box-shadow:inset 0 0 0 1px var(--grey-line)} .ub-msg-from{display:block;font-size:11px;font-weight:700;color:var(--grey-text);margin-bottom:2px} .ub-msg--blocked{background:var(--white);color:var(--grey-text);font-style:italic} .ub-msg-flag{display:inline-block;margin-top:5px;font-size:11px;font-weight:700;font-style:normal;color:var(--white);background:var(--black);border-radius:999px;padding:2px 9px} .ub-tests{display:flex;flex-wrap:wrap;gap:8px} /* SaaS prestataire */ .saas-plans{display:flex;flex-direction:column;gap:12px;margin-bottom:8px} .saas-plan{position:relative;background:var(--white);border-radius:var(--radius-lg);padding:18px;box-shadow:inset 0 0 0 1px var(--grey-line)} .saas-plan--on{box-shadow:inset 0 0 0 2px var(--black)} .saas-plan--feat{box-shadow:inset 0 0 0 1.5px var(--black)} .saas-tag{position:absolute;top:14px;right:14px;font-size:11px;font-weight:700;color:var(--white);background:var(--black);border-radius:999px;padding:3px 10px} .saas-plan-name{font-size:15px;font-weight:800;color:var(--black)} .saas-price{font-size:30px;font-weight:900;letter-spacing:-.02em;color:var(--black);margin:4px 0 12px} .saas-price small{font-size:13px;font-weight:600;color:var(--grey-text);letter-spacing:0;margin-left:6px} .saas-perks{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px} .saas-perks li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--apple-text,#1d1d1f)} .saas-perks li svg{flex-shrink:0;color:var(--black)} .saas-videos{display:flex;flex-direction:column;gap:8px;margin-bottom:12px} .saas-video{display:flex;align-items:center;gap:11px;background:var(--white);border-radius:var(--radius);padding:12px 14px;box-shadow:inset 0 0 0 1px var(--grey-line)} .saas-vid-ic{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:var(--grey-bg);color:var(--black)} .saas-vid-txt{flex:1}.saas-vid-txt b{display:block;font-size:14px;color:var(--black)}.saas-vid-txt span{font-size:12px;color:var(--grey-text)} .saas-vid-status{font-size:11px;font-weight:700;border-radius:999px;padding:3px 10px;text-transform:capitalize} .saas-vid-status--ok{background:var(--black);color:var(--white)} .saas-vid-status--wait{background:var(--grey-bg);color:var(--grey-text);box-shadow:inset 0 0 0 1px var(--grey-line)} .saas-vid-status--ko{background:var(--white);color:var(--black);box-shadow:inset 0 0 0 1.5px var(--black)} .saas-table{border-radius:var(--radius);overflow:hidden;box-shadow:inset 0 0 0 1px var(--grey-line);margin-bottom:6px} .saas-tr{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:10px;padding:12px 14px;font-size:12.5px;color:var(--grey-text);border-bottom:1px solid var(--grey-line);align-items:center} .saas-tr:last-child{border-bottom:none} .saas-tr b{color:var(--black);font-weight:700} .saas-tr--head{background:var(--grey-bg);font-weight:700;color:var(--black);text-transform:uppercase;font-size:11px;letter-spacing:.03em} /* Services Création / express */ .pf-wrap--wide{max-width:680px} .dsc-cta--feat{box-shadow:inset 0 0 0 1.5px var(--black)} .cr-group-title{font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--black);margin:22px 0 12px} .cr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px} .cr-card{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:inset 0 0 0 1px var(--grey-line);display:flex;flex-direction:column} .cr-ba{display:flex;height:84px} .cr-ba-half{flex:1;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .cr-ba-before{background:var(--grey-bg);color:var(--grey-text)} .cr-ba-after{background:var(--black);color:var(--white)} .cr-body{padding:14px;display:flex;flex-direction:column;flex:1} .cr-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px} .cr-top b{font-size:14.5px;color:var(--black);line-height:1.25} .cr-badge{flex-shrink:0;font-size:11px;font-weight:800;color:var(--white);background:var(--black);border-radius:999px;padding:2px 9px} .cr-desc{font-size:12.5px;line-height:1.45;color:var(--grey-text);margin:6px 0 12px;flex:1} .cr-foot{display:flex;justify-content:space-between;align-items:center;gap:8px} .cr-price{font-size:16px;font-weight:800;color:var(--black)} .cr-book{border:none;border-radius:999px;background:var(--black);color:var(--white);font-size:13px;font-weight:600;padding:8px 16px;cursor:pointer;transition:transform .12s var(--ease)} .cr-book:active{transform:scale(.95)} /* Vérification d'identité + passerelle (classes idv- pour éviter la collision avec la classe legacy .id-card de l'ancienne carte de scan, ligne ~676) */ .idv-card{display:block;background:var(--white);border-radius:var(--radius);padding:16px;box-shadow:inset 0 0 0 1px var(--grey-line);margin-bottom:12px} .idv-card--done{box-shadow:inset 0 0 0 1.5px var(--black)} .idv-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px} .idv-card-top b{font-size:15px;color:var(--black)} .idv-ok{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--white);background:var(--black);border-radius:999px;padding:3px 10px} .idv-need{font-size:13px;color:var(--apple-text,#1d1d1f);margin:0 0 4px;line-height:1.4} .idv-use{font-size:12.5px;color:var(--grey-text);margin:0 0 14px} .idv-bridge .pf-sub{margin-bottom:14px} /* Upsell N1 inline (1-clic sur la page prix) */ .pc-up1-title{font-size:13px;font-weight:700;color:var(--black);margin:18px 0 10px} .pc-up1-title small{font-weight:500;color:var(--grey-text)} .pc-up1{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px} .pc-up1-chip{display:inline-flex;align-items:center;gap:6px;border:none;border-radius:999px;background:var(--white);color:var(--black);font-size:13px;font-weight:600;padding:9px 14px;cursor:pointer;box-shadow:inset 0 0 0 1px var(--grey-line);transition:all .14s var(--ease)} .pc-up1-chip b{font-weight:800} .pc-up1-chip.on{background:var(--black);color:var(--white);box-shadow:none} .pc-up1-chip:disabled{opacity:.35;cursor:not-allowed} /* Recherche IA langage naturel */ .se-box{display:flex;align-items:center;gap:10px;background:var(--white);border-radius:999px;padding:4px 6px 4px 16px;box-shadow:inset 0 0 0 1px var(--grey-line);margin-bottom:18px} .se-box:focus-within{box-shadow:inset 0 0 0 1.5px var(--black)} .se-ic{flex-shrink:0;display:inline-flex;color:var(--grey-text)}.se-ic svg{width:20px;height:20px} .se-box input{flex:1;border:none;outline:none;background:none;font-size:16px;font-family:inherit;color:var(--black);padding:11px 6px} .se-examples .se-ex-title{font-size:13px;color:var(--grey-text);margin-bottom:10px} .se-examples{display:flex;flex-wrap:wrap;gap:8px} .se-list{display:flex;flex-direction:column;gap:8px} .se-item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;border:none;border-radius:var(--radius);background:var(--white);box-shadow:inset 0 0 0 1px var(--grey-line);padding:14px 16px;cursor:pointer;transition:box-shadow .14s var(--ease)} .se-item:hover{box-shadow:inset 0 0 0 1.5px var(--black)} .se-item-txt b{display:block;font-size:15px;color:var(--black)} .se-item-txt small{font-size:12.5px;color:var(--grey-text)} .se-item-go{flex-shrink:0;font-size:13px;font-weight:700;color:var(--black)} .se-empty{font-size:14px;color:var(--grey-text);line-height:1.5;padding:8px 0} /* ====== Adresse (#address) — autocomplete BAN + fiche + zone (préfixe .adr) ====== */ .adr-hint{font-size:13.5px;color:var(--grey-text);line-height:1.55;padding:6px 2px} .adr-sec{font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--apple-text);text-transform:uppercase;margin:22px 0 10px} /* Suggestions BAN (liste sous le champ) */ .adr-suggests{display:flex;flex-direction:column;gap:6px} .adr-sug{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:none;border-radius:14px;background:var(--white);box-shadow:inset 0 0 0 1px var(--grey-line);padding:12px 14px;cursor:pointer;transition:box-shadow .14s var(--ease)} .adr-sug:hover,.adr-sug:focus-visible{box-shadow:inset 0 0 0 1.5px var(--black);outline:none} .adr-sug-ic{flex-shrink:0;display:inline-flex;color:var(--grey-text)}.adr-sug-ic svg{width:18px;height:18px} .adr-sug-txt b{display:block;font-size:14.5px;color:var(--black);font-weight:600} .adr-sug-txt small{font-size:12.5px;color:var(--grey-text)} /* Fiche de l'adresse choisie (champs remplis auto) */ .adr-card{background:var(--white);border-radius:var(--radius-lg,18px);box-shadow:inset 0 0 0 1px var(--grey-line);padding:16px 16px 14px} .adr-card-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px} .adr-card-ic{flex-shrink:0;display:inline-flex;color:var(--black)}.adr-card-ic svg{width:20px;height:20px} .adr-card-title{font-size:15px;font-weight:600;color:var(--black);line-height:1.35} .adr-fields{display:flex;flex-direction:column;gap:1px;border-top:1px solid var(--grey-line)} .adr-field{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--grey-line);font-size:13.5px} .adr-field-k{color:var(--grey-text)} .adr-field-v{color:var(--black);font-weight:500;text-align:right} .adr-actions{display:flex;align-items:center;gap:14px;margin-top:14px} .adr-actions .photo-btn{flex:1} .adr-textbtn{border:none;background:none;color:var(--grey-text);font-size:13.5px;font-weight:600;cursor:pointer;padding:8px 4px} .adr-textbtn:hover{color:var(--black);text-decoration:underline} /* Adresses enregistrées */ .adr-saved{display:flex;flex-direction:column;gap:8px} .adr-saved-item{display:flex;align-items:center;gap:12px;background:var(--white);border-radius:14px;box-shadow:inset 0 0 0 1px var(--grey-line);padding:12px 14px} .adr-saved-item.on{box-shadow:inset 0 0 0 1.5px var(--black)} .adr-saved-ic{flex-shrink:0;display:inline-flex;color:var(--grey-text)}.adr-saved-ic svg{width:18px;height:18px} .adr-saved-txt{flex:1} .adr-saved-txt b{display:block;font-size:14px;color:var(--black);font-weight:600} .adr-saved-txt small{font-size:12px;color:var(--grey-text)} .adr-badge{flex-shrink:0;font-size:11px;font-weight:700;color:var(--white);background:var(--black);border-radius:999px;padding:3px 9px} /* Carte Leaflet + rayon (étape 2) — hauteur explicite obligatoire pour Leaflet */ .adr-map{height:280px;border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--grey-line);margin:8px 0 4px;background:var(--grey-bg);z-index:0} .adr-map .leaflet-container{height:100%;width:100%;font-family:inherit;background:var(--grey-bg)} /* Marqueur noir (divIcon) — pastille noire cerclée de blanc, cohérente N&B */ .adr-pin span{display:block;width:14px;height:14px;border-radius:50%;background:var(--black);border:3px solid var(--white);box-shadow:0 1px 4px rgba(0,0,0,.4)} .adr-slider{margin-top:10px} /* Réglages du compte (§ONGLETS) — lignes cliquables façon réglages mobile */ .acc-settings{max-width:var(--app,460px);margin:20px auto 0;padding:0 20px} .acc-settings--flush{margin:8px auto 0;padding:0} /* Bandeau "Suivi de mission" en tête de l'inbox Messages */ .msg-suivi{max-width:var(--app,460px);margin:0 auto;padding:16px 20px 6px} .acc-set-title{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--grey-text);margin:0 2px 10px} .acc-set-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:1px solid var(--grey-line);border-radius:14px;background:var(--white);padding:14px 16px;margin-bottom:8px;cursor:pointer;transition:border-color .15s var(--ease)} .acc-set-row:hover,.acc-set-row:focus-visible{border-color:var(--black);outline:none} .acc-set-ic{flex-shrink:0;display:inline-flex;color:var(--black)}.acc-set-ic svg{width:22px;height:22px} .acc-set-txt{flex:1;min-width:0} .acc-set-txt b{display:block;font-size:14.5px;color:var(--black);font-weight:600} .acc-set-txt small{font-size:12px;color:var(--grey-text)} .acc-set-go{flex-shrink:0;font-size:18px;color:var(--grey-text);line-height:1} /* ========================================================================= PASSE FINALE — a11y (focus clavier) & perfs (content-visibility). Le reduced-motion est déjà global (voir règle * en tête de fichier). ========================================================================= */ /* Focus clavier visible (n'affecte pas la souris grâce à :focus-visible). */ .overlay :focus-visible, .dsc-cta:focus-visible, .photo-btn:focus-visible,.zg-chip:focus-visible,.fid-tab:focus-visible, .cr-book:focus-visible,.se-item:focus-visible,.pc-up1-chip:focus-visible, .zg-mode:focus-visible,.zg-flux-card:focus-visible,.pc-star:focus-visible, .app-icon-btn:focus-visible,.idv-card .photo-btn:focus-visible{ outline:2px solid var(--black);outline-offset:2px;border-radius:8px} .se-box:focus-within{outline:2px solid transparent} /* ====================================================================== ACCENT « BLEU MÉTRO » — Phase 3, choisi par Souleymane (2 juil. 2026). UNE source de vérité (--accent + variantes) et UN seul bloc d'application, ici, en fin de fichier. L'accent sert exclusivement les MOMENTS D'ACTION : CTA primaires, états sélectionnés, progression, liens d'action, focus. Le noir reste la couleur du texte, de la navigation et de la structure. Pour changer d'accent : modifier les 4 variables ci-dessous, rien d'autre. ====================================================================== */ :root{ --accent:#1D4ED8; /* base — blanc dessus : 6,3:1 (AA) */ --accent-hover:#1E40AF; --accent-active:#1B3A9E; --accent-tint:#EFF4FE; /* fond très clair (badges, surlignages) */ } /* — CTA primaires (pilules et boutons pleins) — */ .btn-primary{background:var(--accent)} .btn-primary:hover{background:var(--accent-hover);opacity:1} .btn-primary:active{background:var(--accent-active)} .photo-btn{background:var(--accent)} .photo-btn:hover{background:var(--accent-hover)} .photo-btn--ghost{background:var(--white);color:var(--black)} .photo-btn--ghost:hover{background:var(--white)} .mk-choose{background:var(--accent)} .mk-choose:hover{background:var(--accent-hover)} .mk-send{background:var(--accent)} .mk-send:hover{background:var(--accent-hover)} .cr-book{background:var(--accent)} .cr-book:hover{background:var(--accent-hover)} /* — États sélectionnés (rangées verre, chips, toggle) — */ .choice.selected{border-color:var(--accent)} .choice.selected .choice-check{background:var(--accent);border-color:var(--accent)} .pc-up1-chip.on{background:var(--accent);color:var(--white)} .mk-multi.on{border-color:var(--accent)} .mk-multi.on .mk-switch{background:var(--accent)} /* — Progression — */ .progress-bar{background:var(--accent)} .fid-bar-fill{background:var(--accent)} /* — Liens d'action — */ .se-item-go{color:var(--accent)} /* — Focus clavier — */ :focus-visible{outline-color:var(--accent)} .overlay :focus-visible, .dsc-cta:focus-visible, .photo-btn:focus-visible,.zg-chip:focus-visible,.fid-tab:focus-visible, .cr-book:focus-visible,.se-item:focus-visible,.pc-up1-chip:focus-visible, .zg-mode:focus-visible,.zg-flux-card:focus-visible,.pc-star:focus-visible, .app-icon-btn:focus-visible,.idv-card .photo-btn:focus-visible{outline-color:var(--accent)}