:root{--bg:#f2f0ea;--paper:#fffdf8;--paper2:#f8f6f0;--ink:#19211f;--muted:#737d79;--line:#d9d6cd;--dark:#172321;--dark2:#21312e;--accent:#d95b3f;--accent2:#b64730;--sage:#386b5a;--amber:#9b6c2c;--red:#a94838;--shadow:0 22px 60px rgba(26,36,33,.08);--radius:20px;--ease:cubic-bezier(.2,.8,.2,1)} *{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--bg);font-family:Inter,Aptos,"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.6}.hidden{display:none!important} .loading-screen{position:fixed;z-index:12000;inset:0;background:var(--dark);display:grid;place-content:center;justify-items:center;color:#fff;transition:opacity .55s var(--ease),visibility .55s}.loading-screen.leaving{opacity:0;visibility:hidden}.loading-brand{display:flex;align-items:center;gap:12px}.loading-brand strong{font-size:23px;letter-spacing:-.8px}.loading-brand small,.brand-lockup small{display:block;color:#91a49f;text-transform:uppercase;letter-spacing:1.8px;font-size:9px;font-weight:800;margin-top:3px}.loading-track{width:190px;height:2px;background:#31433f;margin-top:28px;overflow:hidden}.loading-track i{display:block;height:100%;width:45%;background:var(--accent);animation:loader 1.25s infinite var(--ease)}.loading-screen p{font-size:11px;color:#8ea09c;margin-top:12px}.pilot-mark{width:42px;height:42px;border:1px solid #40514e;border-radius:12px;position:relative;background:#20302d;overflow:hidden}.pilot-mark:before{content:"";position:absolute;width:22px;height:5px;background:var(--accent);left:9px;top:11px;transform:skewX(-28deg)}.pilot-mark:after{content:"";position:absolute;width:5px;height:21px;background:#f1efe9;left:18px;top:11px}.pilot-mark span{position:absolute;width:7px;height:7px;border:2px solid var(--accent);border-radius:50%;right:6px;bottom:6px}@keyframes loader{0%{transform:translateX(-130%)}100%{transform:translateX(340%)}} .brand-lockup{display:flex;align-items:center;gap:11px}.brand-lockup strong{font-size:19px;letter-spacing:-.65px}.brand-lockup.centered{justify-content:center;text-align:left}.kicker{display:inline-block;text-transform:uppercase;letter-spacing:1.45px;font-size:10px;font-weight:900;color:var(--accent)} .auth-screen{position:fixed;z-index:9000;inset:0;background:var(--dark);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr)}.auth-visual{position:relative;overflow:hidden;display:flex;align-items:center;padding:7vw;color:white;background:radial-gradient(circle at 70% 25%,#2b413c 0,transparent 33%),linear-gradient(145deg,#131b19,#1b2926)}.auth-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(90deg,#000 20%,transparent 95%)}.route-line{position:absolute;border:1px solid rgba(217,91,63,.42);border-radius:50%;filter:drop-shadow(0 0 8px rgba(217,91,63,.16))}.route-a{width:520px;height:210px;right:-120px;top:18%;transform:rotate(-17deg);animation:routePulse 5s infinite alternate}.route-b{width:360px;height:570px;right:7%;bottom:-280px;transform:rotate(36deg);border-color:rgba(255,255,255,.1)}@keyframes routePulse{to{transform:rotate(-13deg) scale(1.04);opacity:.7}}.auth-copy{position:relative;max-width:670px}.auth-copy .brand-lockup{position:absolute;bottom:calc(100% + 60px);left:0}.auth-copy h1{font-size:clamp(48px,6vw,86px);line-height:.93;letter-spacing:-4px;margin:17px 0 24px;max-width:730px}.auth-copy>p{max-width:610px;color:#b9c6c2;font-size:16px;line-height:1.7}.story-points{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:34px 0 24px}.story-points div{border-top:1px solid #40514d;padding-top:11px;display:flex;gap:8px;align-items:flex-start}.story-points b{color:var(--accent);font-size:10px}.story-points span{font-size:11px;color:#d6dfdc;line-height:1.4}.auth-copy .microcopy{font-size:11px;color:#839591}.auth-panel{background:var(--bg);display:grid;place-items:center;padding:32px}.auth-card{width:min(455px,100%);background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:36px;box-shadow:0 30px 80px rgba(0,0,0,.18)}.auth-card h2{font-size:40px;letter-spacing:-1.8px;margin:10px 0 5px}.auth-card>p{color:var(--muted);line-height:1.55;font-size:13px}.segmented{display:grid;grid-template-columns:1fr 1fr;background:#ece9e1;padding:4px;border-radius:13px;margin:24px 0 18px}.segmented button{border:0;border-radius:10px;background:transparent;padding:10px;font-size:12px;font-weight:850;color:#69736f}.segmented button.active{background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.08);color:var(--ink)}.secure-note{margin-top:15px;border-top:1px solid var(--line);padding-top:13px;color:#7c8582;font-size:10px;line-height:1.5} .field{display:block;margin:10px 0}.field>span{display:block;text-transform:uppercase;letter-spacing:.9px;font-size:9px;font-weight:900;color:#73807c;margin:0 0 6px}input,textarea,select{width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;color:var(--ink);outline:0;padding:12px 13px;transition:.2s}input:focus,textarea:focus,select:focus{border-color:#83938e;box-shadow:0 0 0 4px rgba(56,107,90,.07)}textarea{resize:vertical;min-height:124px;line-height:1.55}.btn{border:0;border-radius:12px;padding:11px 14px;font-weight:850;transition:transform .18s var(--ease),background .18s,box-shadow .18s;display:inline-flex;align-items:center;justify-content:center;gap:9px}.btn:hover{transform:translateY(-1px)}.btn-accent{background:var(--accent);color:white;box-shadow:0 10px 24px rgba(217,91,63,.2)}.btn-accent:hover{background:var(--accent2)}.btn-dark{background:var(--dark);color:white}.btn-ghost{background:#f0ede6;color:var(--ink);border:1px solid var(--line)}.btn-block{width:100%}.btn-large{padding:14px 19px;font-size:14px}.btn-small{padding:8px 10px;font-size:11px}.text-btn{border:0;background:transparent;color:var(--muted);font-size:11px;font-weight:800;padding:10px}.form-message{border-radius:11px;padding:10px 12px;margin-top:12px;font-size:11px;line-height:1.5}.form-message.error{background:#fff0eb;color:#973b2c;border:1px solid #edc7bd}.form-message.success{background:#edf6f1;color:#27634f;border:1px solid #c7dfd5} .entry-screen,.paywall-screen{position:fixed;z-index:8500;inset:0;background:radial-gradient(circle at 50% 15%,#2b403c,transparent 30%),var(--dark);display:grid;place-items:center;padding:24px;color:white}.entry-screen:before,.paywall-screen:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:48px 48px}.entry-card,.paywall-card{position:relative;width:min(560px,100%);text-align:center}.entry-card h1,.paywall-card h1{font-size:48px;letter-spacing:-2px;margin:17px 0 8px}.entry-card p,.paywall-card p{color:#aebcb8;line-height:1.6;max-width:520px;margin:0 auto 24px}.access-badge{display:inline-flex;margin-top:31px;border:1px solid #4a6c61;background:#223a33;color:#bde1d4;border-radius:999px;padding:7px 11px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.8px}.access-badge.locked{border-color:#7a5548;background:#3b2924;color:#efc8ba}.paywall-price{margin:23px auto;width:min(390px,100%);border:1px solid #3b4d49;background:#1d2b28;border-radius:15px;padding:16px}.paywall-price b{display:block}.paywall-price span{display:block;color:#95a6a1;font-size:11px;margin-top:4px} .app{min-height:100vh;display:grid;grid-template-columns:250px minmax(0,1fr)}.sidebar{position:sticky;top:0;height:100vh;background:var(--dark);color:white;padding:22px 15px;display:flex;flex-direction:column;z-index:30}.sidebar>.brand-lockup{padding:2px 8px 25px}.sidebar nav{display:grid;gap:4px}.sidebar nav button{border:0;background:transparent;color:#aebcb8;padding:12px 11px;border-radius:11px;text-align:left;font-size:12px;font-weight:750;display:flex;align-items:center;gap:10px;transition:.2s}.sidebar nav button span{display:grid;place-items:center;width:21px;color:#81938e;font-size:16px}.sidebar nav button.active,.sidebar nav button:hover{background:#24332f;color:#fff}.sidebar nav button.active span{color:var(--accent)}.sidebar-bottom{margin-top:auto}.access-card,.account-card{border:1px solid #344844;background:#1d2c29;border-radius:13px;padding:11px;margin-top:9px}.access-card{display:flex;align-items:center;gap:9px}.access-card b,.account-card b{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.access-card small,.account-card small{display:block;color:#849792;font-size:9px;margin-top:3px}.status-dot{width:8px;height:8px;border-radius:50%;background:#5cb08c;box-shadow:0 0 0 4px rgba(92,176,140,.08)}.account-card button{margin-top:9px;width:100%;border:1px solid #3c514c;background:transparent;color:#b5c4c0;border-radius:8px;padding:7px;font-size:9px;font-weight:900}.mobile-close{display:none}.workspace{min-width:0}.topbar{height:66px;position:sticky;top:0;z-index:20;background:rgba(242,240,234,.88);backdrop-filter:blur(15px);border-bottom:1px solid rgba(217,214,205,.7);display:flex;align-items:center;justify-content:space-between;padding:0 30px}.crumb{display:flex;align-items:center;gap:8px;font-size:11px}.crumb span{color:#8a928f}.crumb b:before{content:"/";color:#b1b7b4;margin-right:8px}.top-actions{display:flex;align-items:center;gap:10px}.sync-pill{border:1px solid var(--line);background:#faf8f2;border-radius:999px;padding:6px 9px;font-size:9px;font-weight:850;display:flex;gap:6px;align-items:center}.sync-pill i{width:6px;height:6px;border-radius:50%;background:#58a881}.sync-pill.syncing i{background:#d19b47;animation:pulse 1s infinite}.sync-pill.offline i{background:#c15d48}.avatar{width:34px;height:34px;border:0;border-radius:50%;background:var(--dark);color:white;font-size:9px;font-weight:900}.menu-btn{display:none;border:0;background:transparent;font-size:18px}.view{display:none;padding:34px 36px 70px;max-width:1500px;margin:0 auto}.view.active{display:block;animation:viewIn .42s var(--ease)}@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.reveal{animation:reveal .65s var(--ease) both}.delay-1{animation-delay:.08s}.delay-2{animation-delay:.16s}@keyframes reveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .hero-panel{min-height:310px;border-radius:26px;background:linear-gradient(135deg,#192522,#263a35);color:white;padding:42px;display:grid;grid-template-columns:1.35fr .65fr;overflow:hidden;position:relative;box-shadow:var(--shadow)}.hero-panel:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,#000,transparent)}.hero-copy{position:relative;z-index:2}.hero-copy h1{font-size:clamp(42px,5vw,66px);line-height:.96;letter-spacing:-3px;margin:12px 0 18px}.hero-copy p{max-width:690px;color:#afbfba;line-height:1.65;font-size:14px}.hero-orbit{position:relative;min-height:210px}.orbit-ring{position:absolute;width:190px;height:190px;border:1px solid #3f5550;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.orbit-ring:after{content:"";position:absolute;inset:25px;border:1px dashed #425952;border-radius:50%}.orbit-ring i{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--accent);left:50%;top:-6px;transform-origin:0 101px;animation:orbit 7s linear infinite}@keyframes orbit{to{transform:rotate(360deg)}}.orbit-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%;background:#f5f1e8;color:var(--dark);display:grid;place-items:center;font-weight:950;letter-spacing:-1px}.orbit-label{position:absolute;font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#a4b5b0}.orbit-label.one{left:10%;top:16%}.orbit-label.two{right:5%;top:43%}.orbit-label.three{left:18%;bottom:7%}.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}.quick-entry{margin-top:-34px;position:relative;z-index:4;width:calc(100% - 52px);margin-left:26px;padding:25px}.card-head,.page-head,.action-row,.step-title,.estimate-footer,.prices-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px}.card-head h2{font-size:22px;margin:3px 0 0;letter-spacing:-.7px}.shortcut{font-size:9px;color:#909995;border:1px solid var(--line);border-radius:7px;padding:5px 7px}.quick-entry textarea{min-height:92px;font-size:16px;border:0;background:#f5f3ed;margin-top:14px}.example-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}.example-chips button,.trade-tabs button{border:1px solid var(--line);background:#f6f3ed;color:#4f5a56;border-radius:999px;padding:7px 10px;font-size:9px;font-weight:800;transition:.2s}.example-chips button:hover,.trade-tabs button:hover,.trade-tabs button.active{background:var(--dark);color:white;border-color:var(--dark)}.helper{font-size:10px;color:#87918d;line-height:1.4}.action-row{margin-top:15px}.action-row.right{justify-content:flex-end}.dashboard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 1.5fr;gap:12px;margin-top:18px}.metric-card,.principle-card{border:1px solid var(--line);background:rgba(255,253,248,.82);border-radius:16px;padding:17px}.metric-card>span{font-size:9px;text-transform:uppercase;letter-spacing:.85px;color:#7f8985;font-weight:900}.metric-card>b{font-size:31px;letter-spacing:-1.3px;display:block;margin:11px 0 3px}.metric-card b.small-metric{font-size:20px}.metric-card small{font-size:9px;color:#8e9693}.principle-card{background:#e9eee9}.principle-card p{font-size:11px;color:#54615d;line-height:1.55;margin:7px 0 0}.page-head{align-items:flex-start;margin-bottom:20px}.page-head h1{font-size:42px;letter-spacing:-1.9px;margin:6px 0}.page-head p{color:var(--muted);font-size:13px;line-height:1.5;max-width:760px;margin:0}.quote-layout,.settings-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:15px}.step-title{justify-content:flex-start;border-bottom:1px solid #e7e3da;padding-bottom:13px;margin-bottom:15px}.step-title>span{width:30px;height:30px;border-radius:9px;background:#ece9e2;color:#69736f;display:grid;place-items:center;font-size:9px;font-weight:900}.step-title b{display:block;font-size:14px}.step-title small{display:block;color:#8a938f;font-size:9px;margin-top:3px}.step-title .btn{margin-left:auto}.compact{margin-bottom:14px}.double-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.triple-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.input-unit{position:relative}.input-unit input{padding-right:47px}.input-unit em{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-style:normal;color:#89928f;font-size:10px}.trade-pill{display:inline-flex;border-radius:999px;padding:8px 11px;background:#e8eee9;color:#396151;font-size:10px;font-weight:900}.fact-list{margin-top:14px}.fact-list p{font-size:11px;color:#65706c;line-height:1.55;padding:9px 0;margin:0;border-bottom:1px solid #ebe8e1}.fact-list p:last-child{border-bottom:0}.warning-box{margin-top:14px;border-left:3px solid #d59a43;background:#fff5e8;border-radius:9px;padding:11px 12px;font-size:10px;line-height:1.55;color:#765224}.estimate-card{margin-top:15px}.table-wrap{overflow:auto;border:1px solid #e3dfd7;border-radius:13px}.estimate-table{width:100%;border-collapse:collapse;min-width:800px}.estimate-table th{background:#f1eee7;color:#7c8582;text-transform:uppercase;letter-spacing:.8px;font-size:8px;text-align:left;padding:10px}.estimate-table td{padding:8px 10px;border-top:1px solid #e8e4dc;font-size:10px}.estimate-table input{padding:8px;border-radius:8px;font-size:10px}.empty-row{text-align:center;color:#8d9692;padding:25px!important}.source-badge{display:inline-flex;border-radius:999px;padding:5px 7px;font-size:8px;font-weight:900;text-transform:uppercase;white-space:nowrap}.source-badge.custom{background:#e5f1ec;color:#2e674f}.source-badge.reference{background:#fff0dc;color:#865b20}.estimate-footer{align-items:stretch;margin-top:15px}.assumption-box{flex:1;border:1px solid var(--line);background:#f5f2eb;border-radius:13px;padding:13px}.assumption-box b{font-size:10px}.assumption-box p{font-size:9px;color:#75807c;line-height:1.5;margin:5px 0 0}.totals-panel{width:min(380px,100%);background:var(--dark);color:white;border-radius:14px;padding:14px}.totals-panel>div{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:10px}.totals-panel .recommended{border-top:1px solid #3c4e4a;margin-top:5px;padding-top:10px}.totals-panel .recommended b{font-size:23px;letter-spacing:-.7px}.totals-panel small{display:block;color:#91a39e;font-size:8px;line-height:1.45;margin-top:6px}.prices-toolbar{margin-bottom:14px;padding:14px 16px}.prices-toolbar .grow{flex:1;max-width:330px;margin:0}.legend{display:flex;gap:15px;font-size:9px;color:#7c8682}.legend span{display:flex;align-items:center;gap:5px}.dot{width:7px;height:7px;border-radius:50%}.dot.custom{background:#4e9b78}.dot.reference{background:#d49b47}.catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.catalog-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:15px}.catalog-card .catalog-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.catalog-card h3{font-size:13px;margin:0 0 3px}.catalog-card small{font-size:9px;color:#85908c}.catalog-fields{display:grid;grid-template-columns:.55fr .65fr auto;gap:7px;align-items:end;margin-top:12px}.trade-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:15px}.template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.template-card{background:var(--paper);border:1px solid var(--line);border-radius:17px;padding:17px;transition:.22s var(--ease)}.template-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#c5c1b8}.template-card .template-icon{width:36px;height:36px;border-radius:10px;background:#efece5;display:grid;place-items:center;margin-bottom:13px;font-weight:900;color:var(--accent)}.template-card h3{font-size:14px;margin:0 0 6px}.template-card p{font-size:10px;color:#77817d;line-height:1.5;min-height:45px}.template-card footer{display:flex;justify-content:space-between;align-items:center;margin-top:13px}.template-card footer span{font-size:8px;text-transform:uppercase;letter-spacing:.8px;color:#929a97;font-weight:900} .sidebar-scrim{display:none}.toast{position:fixed;right:22px;bottom:22px;z-index:11000;background:var(--dark);color:white;border:1px solid #2e403c;border-radius:12px;padding:11px 14px;font-size:10px;font-weight:750;box-shadow:0 16px 40px rgba(0,0,0,.2);opacity:0;transform:translateY(12px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:none} #printContainer{display:none}.print-sheet{width:210mm;min-height:297mm;background:#fff;color:#17201f;margin:20px auto;padding:0;font-family:Arial,sans-serif}.print-band{height:9mm;background:linear-gradient(90deg,var(--accent) 0 28%,var(--dark) 28%)}.print-inner{padding:16mm 17mm 14mm}.print-top{display:flex;justify-content:space-between;gap:16mm}.print-company{display:flex;gap:5mm}.print-logo{width:14mm;height:14mm;border-radius:3mm;background:var(--dark);color:#fff;display:grid;place-items:center;font-size:9pt;font-weight:900}.print-company h2{margin:0 0 2mm;font-size:18pt}.print-company p,.print-doc p{margin:0;color:#5d6865;font-size:8.2pt;line-height:1.5}.print-doc{text-align:right}.print-doc h1{font-size:26pt;margin:0 0 2mm;letter-spacing:1px}.print-ref{display:inline-block;background:#f1eee7;border-radius:99px;padding:2mm 3mm;font-size:7.5pt;font-weight:800}.print-panels{display:grid;grid-template-columns:1fr 1fr;gap:5mm;margin:10mm 0 6mm}.print-panel{border:1px solid #d8d5cd;border-radius:3mm;padding:4mm}.print-panel .label{font-size:6.5pt;text-transform:uppercase;letter-spacing:.7px;color:#7d8683;font-weight:900;margin-bottom:2mm}.print-panel b{font-size:9pt}.print-panel p{font-size:8pt;line-height:1.45;color:#56615d;margin:1mm 0 0}.print-project{border-left:4px solid var(--accent);background:#f4f1ea;border-radius:2mm;padding:4mm 5mm;margin-bottom:5mm}.print-project h3{margin:0 0 1.5mm;font-size:12pt}.print-project p{font-size:8pt;line-height:1.45;margin:0;color:#59635f}.print-table{width:100%;border-collapse:collapse;border:1px solid #d8d5cd}.print-table th{background:var(--dark);color:#fff;font-size:6.5pt;text-transform:uppercase;letter-spacing:.6px;padding:2.8mm;text-align:left}.print-table td{font-size:8pt;padding:3mm;border-bottom:1px solid #e1ded7}.print-table .right{text-align:right}.print-totals{width:86mm;margin:6mm 0 0 auto;border:1px solid #d8d5cd;border-radius:3mm;overflow:hidden}.print-total-line{display:flex;justify-content:space-between;padding:2.8mm 4mm;border-bottom:1px solid #e5e2dc;font-size:8pt}.print-total-line.grand{background:var(--dark);color:#fff;font-size:12pt;font-weight:900}.print-bottom{display:grid;grid-template-columns:1fr 1fr;gap:5mm;margin-top:8mm}.print-note{border:1px solid #d8d5cd;border-radius:3mm;padding:4mm}.print-note h4{font-size:8pt;margin:0 0 2mm}.print-note p{font-size:7pt;line-height:1.45;color:#606a67;margin:0}.signature{height:18mm;border-bottom:1px dashed #a9afac;margin-top:3mm}.print-footer{text-align:center;font-size:6.4pt;color:#777f7c;margin-top:7mm}.print-actions{display:flex;justify-content:flex-end;gap:8px;max-width:210mm;margin:0 auto 30px} @media print{@page{size:A4 portrait;margin:0}html,body{width:210mm!important;min-height:297mm!important;background:#fff!important}.app,.toast,.auth-screen,.entry-screen,.paywall-screen,.loading-screen,.sidebar-scrim{display:none!important}#printContainer{display:block!important;width:210mm!important;margin:0!important;padding:0!important}.print-sheet{display:block!important;width:210mm!important;min-height:297mm!important;margin:0!important;box-shadow:none!important}.print-actions{display:none!important}.print-table tr,.print-panel,.print-note,.print-totals{break-inside:avoid;page-break-inside:avoid}.print-table thead{display:table-header-group}*{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}} @media(max-width:1050px){.dashboard-grid{grid-template-columns:repeat(2,1fr)}.principle-card{grid-column:span 2}.template-grid{grid-template-columns:repeat(2,1fr)}.catalog-grid{grid-template-columns:1fr}.quote-layout,.settings-grid{grid-template-columns:1fr}} @media(max-width:820px){.auth-screen{grid-template-columns:1fr}.auth-visual{display:none}.auth-panel{padding:18px}.app{display:block}.sidebar{position:fixed;left:-270px;top:0;width:250px;transition:left .3s var(--ease);box-shadow:20px 0 50px rgba(0,0,0,.15)}.sidebar.open{left:0}.mobile-close{display:block;position:absolute;right:12px;top:12px;border:0;background:transparent;color:#82938f;font-size:22px}.sidebar-scrim{display:block;position:fixed;z-index:25;inset:0;background:rgba(12,17,16,.42);backdrop-filter:blur(2px)}.menu-btn{display:block}.topbar{padding:0 16px}.view{padding:22px 15px 60px}.hero-panel{grid-template-columns:1fr;padding:27px;min-height:360px}.hero-orbit{display:none}.hero-copy h1{font-size:45px}.quick-entry{width:calc(100% - 18px);margin-left:9px;padding:18px}.dashboard-grid{grid-template-columns:1fr 1fr}.principle-card{grid-column:span 2}.page-head{flex-direction:column}.page-head h1{font-size:34px}.double-grid,.triple-grid{grid-template-columns:1fr}.estimate-footer{flex-direction:column}.totals-panel{width:100%}.template-grid{grid-template-columns:1fr}.action-row{align-items:flex-start;flex-direction:column}.action-row.right{align-items:stretch}.action-row .btn{width:100%}.entry-card h1,.paywall-card h1{font-size:39px}.auth-card{padding:28px 21px}.auth-card h2{font-size:34px}} @media(max-width:520px){.dashboard-grid{grid-template-columns:1fr}.principle-card{grid-column:auto}.top-actions .sync-pill{display:none}.crumb span{display:none}.story-points{grid-template-columns:1fr}.quick-entry textarea{font-size:15px}} @keyframes pulse{50%{opacity:.35}} /* ===== V2.1 — DOUBLE PORTE ===== */ .gateway{position:fixed;inset:0;z-index:10000;background:#101412;color:#f4f1e9;overflow:auto;padding:34px clamp(22px,5vw,78px) 26px;display:flex;flex-direction:column;min-height:100dvh} .gateway.hidden,.client-portal.hidden{display:none!important}.gateway-brand{display:flex;align-items:center;gap:12px;position:relative;z-index:4}.gateway-mark{width:42px;height:42px;border:1px solid #69736d;display:grid;place-items:center;font:800 13px/1 Arial;letter-spacing:-1px}.gateway-brand b{display:block;font-size:13px;letter-spacing:.18em}.gateway-brand span{display:block;font-size:10px;color:#8e9892;margin-top:3px;letter-spacing:.08em} .gateway-intro{text-align:center;margin:clamp(18px,4vh,42px) auto 18px;max-width:760px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.2em;color:#b46a43}.gateway-intro h1,.client-hero h1{font-family:Georgia,serif;font-weight:400;letter-spacing:-.045em;line-height:.95;margin:10px 0;font-size:clamp(38px,5.2vw,74px)}.gateway-intro p{max-width:570px;margin:auto;color:#aab1ad;font-size:14px;line-height:1.6} .door-stage{display:grid;grid-template-columns:minmax(240px,1fr) 64px minmax(240px,1fr);gap:18px;max-width:1060px;width:100%;margin:auto;align-items:center}.door-card{border:0;background:none;color:inherit;display:grid;grid-template-columns:minmax(120px,210px) 1fr;gap:22px;align-items:center;text-align:left;cursor:pointer;padding:0}.door-frame{height:min(36vh,330px);border:1px solid #47504b;padding:8px;perspective:1100px;background:linear-gradient(145deg,#181e1b,#0d100f);box-shadow:0 25px 70px #0008}.door-panel{height:100%;position:relative;transform-origin:left center;transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .5s;background:linear-gradient(120deg,#242b27,#151a17);border:1px solid #353e39;box-shadow:inset -14px 0 30px #0007}.client-door .door-panel{background:linear-gradient(135deg,#ece6d8,#b8ad99);border-color:#e6dece;color:#171b19}.door-card:hover .door-panel{transform:rotateY(-14deg)}.door-card.open .door-panel{transform:rotateY(-88deg);filter:brightness(.75)}.door-number{position:absolute;top:16px;left:16px;font:700 10px Arial;letter-spacing:.16em;opacity:.6}.door-handle{position:absolute;right:14px;top:52%;width:7px;height:7px;border-radius:50%;background:#b46a43;box-shadow:0 0 0 5px #b46a4320}.door-copy>span{font-size:9px;letter-spacing:.16em;color:#87908b}.door-copy strong{font:400 clamp(26px,3vw,42px) Georgia,serif;display:block;margin:7px 0 9px}.door-copy p{font-size:12px;line-height:1.55;color:#9aa29d;margin:0 0 13px}.door-copy em{font-style:normal;font-size:11px;font-weight:800;color:#c87a4d}.gateway-axis{display:flex;flex-direction:column;align-items:center;height:75%;gap:8px}.gateway-axis i{width:1px;background:#38413c;flex:1}.gateway-axis span{font-size:8px;letter-spacing:.2em;writing-mode:vertical-rl;color:#5f6963}.gateway-trust{text-align:center;font-size:10px;color:#707a74;max-width:760px;margin:18px auto 0;line-height:1.5} .client-portal{min-height:100dvh;background:#f2efe7;color:#151916;position:relative;z-index:9999}.client-top{height:72px;padding:0 clamp(20px,5vw,70px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d7d1c5;background:#f7f4edcc;backdrop-filter:blur(12px);position:sticky;top:0;z-index:5}.ghost-back{border:0;background:none;font-weight:700;color:#535b56}.mini-brand{display:flex;align-items:center;gap:8px}.mini-brand b{letter-spacing:.15em}.mini-brand span{font-size:8px;padding:4px 6px;background:#151916;color:white}.client-main{max-width:1180px;margin:auto;padding:clamp(36px,7vw,90px) clamp(20px,5vw,70px)}.client-hero{max-width:900px}.client-hero p{font-size:16px;max-width:650px;line-height:1.6;color:#5e665f}.client-search{margin-top:30px;background:white;border:1px solid #d8d2c6;padding:14px;display:grid;grid-template-columns:1fr 1fr auto;gap:10px;box-shadow:0 18px 50px #5d574a12}.client-search label,.client-request-card label{font-size:9px;font-weight:800;letter-spacing:.1em;color:#777;display:flex;flex-direction:column;gap:6px}.client-search input,.client-search select,.client-request-card input,.client-request-card textarea{border:1px solid #d8d4cb;background:#faf9f5;padding:12px;font:13px Arial;color:#202421;outline:none}.trust-strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #d3cdc1;border-bottom:1px solid #d3cdc1;margin:65px 0}.trust-strip>div{padding:25px;border-right:1px solid #d3cdc1;display:grid;grid-template-columns:34px 1fr}.trust-strip>div:last-child{border:0}.trust-strip b{font-size:10px;color:#b46a43}.trust-strip strong{font:400 20px Georgia,serif}.trust-strip span{grid-column:2;color:#727972;font-size:11px;margin-top:5px}.section-head{display:flex;align-items:end;justify-content:space-between}.section-head h2{font:400 38px Georgia,serif;margin:6px 0}.beta-pill{font-size:8px;font-weight:800;letter-spacing:.13em;padding:7px 9px;border:1px solid #c9c2b5}.coming-card{margin-top:20px;display:grid;grid-template-columns:180px 1fr;gap:35px;padding:32px;border:1px solid #d1cabd;background:#e9e4d9}.coming-card h3{font:400 28px Georgia,serif;margin:0 0 7px}.coming-card p{max-width:650px;color:#626a63;font-size:13px;line-height:1.6}.radar{width:150px;height:150px;border:1px solid #a8a095;border-radius:50%;position:relative;display:grid;place-items:center;background:radial-gradient(circle,#b46a4318 0 2px,transparent 3px)}.radar i{position:absolute;border:1px solid #b9b1a4;border-radius:50%;inset:20px}.radar i:nth-child(2){inset:42px}.radar i:nth-child(3){left:50%;top:0;bottom:0;width:1px;border:0;background:#b9b1a4;border-radius:0}.radar span{font-size:22px;color:#b46a43}.client-request-card{max-width:560px}.client-request-card label{margin:13px 0}.wide{width:100%} .gateway.gateway-exit .gateway-intro,.gateway.gateway-exit .gateway-brand,.gateway.gateway-exit .gateway-trust{opacity:0;transition:opacity .35s} @media(max-width:760px){.gateway{padding:22px 16px}.gateway-intro{margin-top:22px}.door-stage{grid-template-columns:1fr 1fr;gap:10px}.gateway-axis{display:none}.door-card{grid-template-columns:1fr;gap:10px}.door-frame{height:220px}.door-copy p{display:none}.door-copy strong{font-size:24px}.client-search{grid-template-columns:1fr}.trust-strip{grid-template-columns:1fr}.trust-strip>div{border-right:0;border-bottom:1px solid #d3cdc1}.coming-card{grid-template-columns:1fr}.radar{width:110px;height:110px}.client-top .btn{font-size:9px;padding:9px}.gateway-trust{font-size:9px}} .auth-resend{margin-top:8px} .premium-value{margin:18px 0;padding:18px;border:1px solid rgba(180,106,67,.35);background:linear-gradient(135deg,rgba(180,106,67,.09),rgba(255,255,255,.02));text-align:left} .premium-value>div{display:flex;align-items:baseline;gap:7px} .premium-value strong{font:400 38px Georgia,serif} .premium-value span{font-size:12px;opacity:.7} .premium-value p{margin:9px 0 0!important;font-size:12px!important;line-height:1.55!important;opacity:.78} .paywall-benefits{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0;text-align:left} .paywall-benefits span{font-size:11px;padding:9px 10px;border:1px solid rgba(255,255,255,.1)} @media(max-width:620px){.paywall-benefits{grid-template-columns:1fr}.premium-value strong{font-size:32px}} /* V2.1.2 — La requête brute de l'artisan reste interne et ne doit jamais apparaître sur le devis client */ @media print{ .print-request, .quote-request, .print-description, .quote-description, .internal-request, .internal-brief, .prompt-block, .chiffrage-libre{ display:none!important; } } #printContainer .print-request, #printContainer .quote-request, #printContainer .print-description, #printContainer .quote-description, #printContainer .internal-request, #printContainer .internal-brief, #printContainer .prompt-block, #printContainer .chiffrage-libre{ display:none!important; } .devispilot-pdf-badge{ margin-top:16px; padding:10px 12px; border:1px solid #d6d0c5; border-left:3px solid #b46a43; display:flex; align-items:center; gap:10px; background:#faf9f5; color:#343934; font-family:Arial,sans-serif; } .devispilot-pdf-badge .dp-badge-mark{ width:28px;height:28px; display:grid;place-items:center; border:1px solid #b46a43; color:#b46a43; font-weight:800; font-size:9px; letter-spacing:.06em; flex:0 0 auto; } .devispilot-pdf-badge strong{ display:block; font-size:9px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:2px; } .devispilot-pdf-badge small{ display:block; font-size:8px; line-height:1.35; color:#747b75; } @media print{ .devispilot-pdf-badge{ break-inside:avoid; page-break-inside:avoid; print-color-adjust:exact; -webkit-print-color-adjust:exact; } } .pricing-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0} .pricing-mini-card{padding:14px;border:1px solid rgba(255,255,255,.12);text-align:left} .pricing-mini-card.recommended{border-color:#b46a43;background:rgba(180,106,67,.07)} .pricing-mini-card>span{font-size:8px;letter-spacing:.14em;font-weight:800;opacity:.7} .pricing-mini-card>strong{display:block;font:400 25px Georgia,serif;margin:6px 0} .pricing-mini-card>strong small{font:10px Arial,sans-serif;opacity:.7;margin-left:4px} .pricing-mini-card p{font-size:10px!important;line-height:1.45!important;margin:0!important;opacity:.75} @media(max-width:620px){.pricing-mini-grid{grid-template-columns:1fr}} /* ===== DEVISPILOT V3 ===== */ .quality-panel{margin:18px 0 22px;padding:20px;border:1px solid #d8d2c7;background:linear-gradient(145deg,#f8f6f0,#efebe2);color:#171b18} .quality-head{display:flex;justify-content:space-between;gap:24px;align-items:end}.quality-head h3{font:400 24px Georgia,serif;margin:5px 0}.quality-note{max-width:360px;font-size:10px;line-height:1.45;color:#747b75} .quality-options{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:15px 0}.quality-choice{border:1px solid #d3cdc2;background:#fff;padding:12px 10px;text-align:left;cursor:pointer;min-height:72px;transition:.2s}.quality-choice:hover{transform:translateY(-2px);border-color:#a69d90}.quality-choice.active{border-color:#b46a43;box-shadow:inset 0 -3px #b46a43;background:#fffaf5}.quality-choice b{display:block;font-size:11px}.quality-choice span{display:block;font-size:9px;color:#7b817c;margin-top:5px;line-height:1.35}.quality-detail{font-size:9px;font-weight:800;letter-spacing:.08em;color:#747a75}.quality-detail textarea{width:100%;box-sizing:border-box;margin-top:7px;border:1px solid #d3cdc2;background:white;padding:11px;font:12px Arial;resize:vertical} .method-section{display:grid;grid-template-columns:.9fr 1.4fr;gap:55px;padding:60px 0;border-top:1px solid #d3cdc1}.method-copy h2{font:400 40px Georgia,serif;line-height:1;margin:8px 0 15px}.method-copy p{font-size:13px;line-height:1.65;color:#656d66}.method-steps{display:grid;grid-template-columns:1fr 1fr;border:1px solid #d3cdc1}.method-steps>div{padding:22px;border-right:1px solid #d3cdc1;border-bottom:1px solid #d3cdc1;display:grid;grid-template-columns:28px 1fr}.method-steps b{font-size:9px;color:#b46a43}.method-steps strong{font:400 18px Georgia,serif}.method-steps span{grid-column:2;font-size:10px;color:#757c76;margin-top:5px;line-height:1.45} .v3-pricing{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}.v3-plan{position:relative;padding:18px;border:1px solid rgba(255,255,255,.13);text-align:left}.v3-plan.featured{border-color:#b46a43;background:rgba(180,106,67,.08)}.plan-kicker{font-size:8px;letter-spacing:.16em;font-weight:800}.plan-badge{position:absolute;right:12px;top:12px;font-size:7px;letter-spacing:.1em;background:#b46a43;padding:5px 7px;color:#fff}.plan-price{margin:8px 0}.plan-price strong{font:400 30px Georgia,serif}.plan-price small{font-size:9px;opacity:.65;margin-left:5px}.v3-plan p{font-size:10px!important;line-height:1.5!important}.v3-plan ul{padding:0;margin:12px 0 0;list-style:none}.v3-plan li{font-size:9px;padding:5px 0;border-top:1px solid rgba(255,255,255,.08)} @media print{.quality-panel{display:none!important}} @media(max-width:850px){.quality-options{grid-template-columns:1fr 1fr}.method-section{grid-template-columns:1fr}.method-steps{grid-template-columns:1fr 1fr}} @media(max-width:620px){.quality-head{display:block}.quality-note{display:block;margin-top:7px}.quality-options{grid-template-columns:1fr}.method-steps,.v3-pricing{grid-template-columns:1fr}} /* ===== DEVISPILOT V3.1 — IDENTITÉ / PORTES ===== */ .gateway-brand{align-items:center} .dp-logo-mark{width:50px;height:50px;flex:0 0 auto;display:grid;place-items:center} .dp-logo-mark svg{width:100%;height:100%;overflow:visible} .dp-ring,.dp-axis,.dp-arrow{fill:none;stroke:#d9ddd8;stroke-width:2;vector-effect:non-scaling-stroke} .dp-axis{stroke:#6f7c75;stroke-width:1.4} .dp-arrow{stroke:#c97547;stroke-width:2.3;fill:#c9754712} .dp-core{fill:#c97547} .dp-wordmark b{font:800 15px/1 Arial,sans-serif;letter-spacing:.22em} .dp-wordmark b span{color:#c97547} .dp-wordmark>span{display:block;margin-top:6px;color:#85908a;font-size:9px;letter-spacing:.1em} .door-stage{align-items:start} .door-card{ grid-template-rows:340px auto; align-items:start; } .door-frame{ height:340px!important; width:100%; box-sizing:border-box; } .door-copy{ min-height:145px; display:flex; flex-direction:column; align-items:flex-start; } .door-copy strong{min-height:48px} .door-copy em{margin-top:auto} .door-panel{overflow:hidden} .door-symbol{ position:absolute; left:50%;top:47%; transform:translate(-50%,-50%); width:92px;height:92px; opacity:.42; } .door-symbol svg{width:100%;height:100%} .door-symbol path,.door-symbol circle{ fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; } .client-panel .door-symbol{color:#4e564f} .artisan-panel .door-symbol{color:#b7beb9} .door-tag{ position:absolute; bottom:17px;left:16px; font:800 8px/1 Arial,sans-serif; letter-spacing:.22em; opacity:.55; } .client-panel:after,.artisan-panel:after{ content:""; position:absolute; inset:auto 14px 48px 14px; height:1px; background:currentColor; opacity:.12; } .client-panel{ background: linear-gradient(180deg,transparent 72%,rgba(83,91,83,.05)), linear-gradient(135deg,#eee9dc,#c6bcaa)!important; } .artisan-panel{ background: repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 2px,transparent 2px 9px), linear-gradient(135deg,#242b27,#111613)!important; } .client-door .door-copy>span:before{content:"○ ";color:#c97547} .artisan-door .door-copy>span:before{content:"◇ ";color:#c97547} .send-quote-launch{margin:12px 0;display:flex;justify-content:flex-end} .send-quote-card{max-width:620px} .send-quote-card>label{display:flex;flex-direction:column;gap:6px;margin:12px 0;font-size:9px;font-weight:800;letter-spacing:.09em;color:#777} .send-quote-card input,.send-quote-card select,.send-quote-card textarea{border:1px solid #d6d1c8;background:#faf9f5;padding:11px;font:12px Arial;color:#222} .send-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0} .send-preview>div{padding:11px;border:1px solid #ddd7ce;background:#f4f1ea} .send-preview span{display:block;font-size:8px;letter-spacing:.09em;color:#777;text-transform:uppercase} .send-preview strong{display:block;margin-top:5px;font-size:11px} .send-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:15px} .send-tech-note{font-size:9px;color:#8a8f8b;line-height:1.45;margin-top:10px} @media(max-width:760px){ .door-stage{align-items:start} .door-card{grid-template-rows:250px auto} .door-frame{height:250px!important} .door-copy{min-height:150px} .door-copy strong{min-height:58px} .door-symbol{width:70px;height:70px} .gateway-brand{margin-bottom:4px} .dp-logo-mark{width:44px;height:44px} .send-preview{grid-template-columns:1fr} } /* ===== V3.2 — MES DEVIS / TARIFS ===== */ .v32-pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0} .v32-plan{position:relative;padding:18px;border:1px solid rgba(255,255,255,.13);text-align:left} .v32-plan.featured{border-color:#b46a43;background:rgba(180,106,67,.08)} .v32-plan.pro{border-color:rgba(255,255,255,.25)} .v32-plan p{font-size:10px!important;line-height:1.5!important} .v32-plan ul{list-style:none;padding:0;margin:12px 0 0} .v32-plan li{font-size:9px;padding:5px 0;border-top:1px solid rgba(255,255,255,.08)} .plan-limit{display:inline-block;margin-top:6px;padding:6px 8px;border:1px solid rgba(180,106,67,.35);font-size:9px;letter-spacing:.07em;color:#d38a5d} .library-toolbar{display:grid;grid-template-columns:1fr 280px;gap:20px;align-items:end;margin-bottom:16px} .usage-meter{padding:8px 0}.usage-meter>span{display:block;font-size:9px;color:#7d847f;text-transform:uppercase;letter-spacing:.08em}.usage-meter>strong{display:block;margin:5px 0 7px;font-size:12px}.usage-track{height:5px;background:#e4dfd5;overflow:hidden}.usage-track i{display:block;height:100%;width:0;background:#b46a43;transition:width .3s} .quotes-library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .quote-library-card{background:#fff;border:1px solid #d9d4ca;padding:16px;min-height:205px;display:flex;flex-direction:column;box-shadow:0 12px 30px rgba(28,32,29,.035)} .quote-card-top{display:flex;justify-content:space-between;gap:10px}.quote-ref{font-size:9px;font-weight:800;letter-spacing:.08em;color:#b46a43}.quote-date{font-size:9px;color:#888} .quote-library-card h3{font:400 21px Georgia,serif;margin:14px 0 4px}.quote-library-card>p{font-size:11px;color:#717873;margin:0}.quote-card-total{display:flex;justify-content:space-between;align-items:end;border-top:1px solid #ece8e0;margin-top:auto;padding-top:14px}.quote-card-total span{font-size:9px;color:#777}.quote-card-total strong{font:400 20px Georgia,serif} .quote-card-actions{display:flex;gap:5px;margin-top:13px;flex-wrap:wrap}.icon-danger{margin-left:auto;border:0;background:none;color:#a96655;font-size:18px;cursor:pointer} .empty-library{grid-column:1/-1;text-align:center;border:1px dashed #d4cec3;padding:55px 20px;background:#f7f4ed}.empty-library>span{font-size:32px;color:#b46a43}.empty-library h3{font:400 25px Georgia,serif;margin:10px 0 5px}.empty-library p{font-size:11px;color:#777;margin-bottom:16px} .artisan-symbol{width:82px!important;height:82px!important} @media(max-width:950px){.quotes-library-grid{grid-template-columns:1fr 1fr}.v32-pricing{grid-template-columns:1fr}} @media(max-width:650px){.quotes-library-grid{grid-template-columns:1fr}.library-toolbar{grid-template-columns:1fr}.artisan-symbol{width:68px!important;height:68px!important}} /* ===== V3.3 — MÉTIERS / FOURNISSEURS / MÉTÉO / PREUVE ===== */ .trade-browser,.supplier-import{margin-bottom:18px;padding:18px} .trade-browser-head,.supplier-head{display:flex;justify-content:space-between;gap:20px;align-items:end} .trade-browser-head h2,.supplier-head h2{font:400 27px Georgia,serif;margin:5px 0} .trade-browser-head p,.supplier-head p{font-size:11px;line-height:1.55;color:#747b76;max-width:720px} .trade-browser-head select{min-width:230px;border:1px solid #d7d2c8;background:#fff;padding:11px} .trade-catalog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px} .trade-op{border:1px solid #ddd7cd;background:#fff;text-align:left;padding:12px;min-height:98px;cursor:pointer;display:flex;flex-direction:column;transition:.2s} .trade-op:hover{border-color:#b46a43;transform:translateY(-2px)}.trade-op>span{font-size:8px;color:#b46a43}.trade-op strong{font:400 16px Georgia,serif;margin:8px 0}.trade-op em{font-style:normal;font-size:8px;color:#7d837e;margin-top:auto} .secure-badge{font-size:8px;font-weight:800;letter-spacing:.11em;border:1px solid #d2ccc1;padding:7px 9px;white-space:nowrap} .supplier-drop{margin-top:18px;border:1px dashed #bdb6aa;background:#f8f5ee;padding:28px;text-align:center} .supplier-drop input{display:none}.supplier-drop-icon{font-size:28px;color:#b46a43}.supplier-drop strong{display:block;font:400 20px Georgia,serif;margin:7px 0}.supplier-drop>span{display:block;font-size:10px;color:#7b817c;margin-bottom:13px} .supplier-workflow{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #ded8ce;margin-top:14px}.supplier-workflow>div{padding:14px;border-right:1px solid #ded8ce;display:grid;grid-template-columns:25px 1fr}.supplier-workflow b{font-size:8px;color:#b46a43}.supplier-workflow strong{font-size:10px}.supplier-workflow span{grid-column:2;font-size:9px;color:#7b817c;margin-top:4px} .supplier-queue{margin-top:12px;display:grid;gap:7px}.supplier-doc{display:grid;grid-template-columns:42px 1fr auto auto;gap:10px;align-items:center;border:1px solid #ddd7ce;background:#fff;padding:9px}.doc-icon{width:38px;height:38px;display:grid;place-items:center;background:#171c19;color:white;font-size:8px}.supplier-doc strong{display:block;font-size:10px}.supplier-doc span{display:block;font-size:8px;color:#868c87} .supplier-extract{margin-top:16px;border-top:1px solid #ddd7ce;padding-top:16px}.supplier-extract-head{display:flex;justify-content:space-between;align-items:end}.supplier-table-wrap{overflow:auto;margin-top:12px}.supplier-table{width:100%;border-collapse:collapse;min-width:720px}.supplier-table th{font-size:8px;background:#17201c;color:white;padding:9px;text-align:left}.supplier-table td{border-bottom:1px solid #e4dfd6;padding:6px}.supplier-table input{width:100%;box-sizing:border-box;border:1px solid #ddd7ce;padding:7px;font-size:10px}.supplier-ai-note{font-size:8px;color:#818782;margin-top:10px} .weather-widget{padding:16px;margin:0 0 16px;background:linear-gradient(135deg,#17201c,#202c26);color:#eef2ef;border-color:#2c3b34;overflow:hidden;position:relative} .weather-widget:after{content:"";position:absolute;width:180px;height:180px;border:1px solid rgba(255,255,255,.07);border-radius:50%;right:-70px;top:-90px} .weather-top{display:flex;justify-content:space-between;align-items:start}.weather-top h3{font:400 23px Georgia,serif;margin:4px 0}.weather-refresh{border:1px solid #536158;background:none;color:white;width:32px;height:32px;cursor:pointer} .weather-content{display:flex;align-items:center;gap:14px;margin-top:14px}.weather-icon{font-size:42px;width:54px}.weather-content strong{display:block;font:400 22px Georgia,serif}.weather-content span{display:block;margin-top:4px;font-size:9px;color:#9dac9f} .weather-advice{margin-top:14px;padding:10px 12px;border-left:3px solid #89958e;background:#ffffff08;font-size:10px;line-height:1.4}.weather-advice.good{border-color:#8bb38e}.weather-advice.warn{border-color:#d1a45f}.weather-advice.bad{border-color:#c76f5a} .public-proof{display:grid;grid-template-columns:220px 1fr;gap:35px;align-items:center;margin:40px 0;padding:28px;border:1px solid #d3cdc1;background:#ebe6da} .public-proof-number{border-right:1px solid #cfc8bc;padding-right:28px}.public-proof-number>span{display:block;font:400 52px Georgia,serif;color:#b46a43;line-height:1}.public-proof-number small{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#777}.public-proof h3{font:400 24px Georgia,serif;margin:6px 0}.public-proof p{font-size:10px;color:#737a74;margin:0} @media(max-width:900px){.trade-catalog-grid{grid-template-columns:repeat(2,1fr)}.supplier-workflow{grid-template-columns:1fr 1fr}} @media(max-width:650px){.trade-browser-head,.supplier-head{display:block}.trade-browser-head select{width:100%;margin-top:10px}.trade-catalog-grid{grid-template-columns:1fr}.supplier-workflow{grid-template-columns:1fr}.public-proof{grid-template-columns:1fr}.public-proof-number{border-right:0;border-bottom:1px solid #cfc8bc;padding:0 0 18px}.weather-content strong{font-size:19px}} /* ===== V3.4 — ESPACE CLIENT / DEMANDES ===== */ .client-account-actions{display:flex;gap:8px;align-items:center}.client-auth-card{max-width:520px}.client-projects-card{max-width:900px} .client-projects-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:18px}.client-projects-head h2{font:400 30px Georgia,serif;margin:4px 0} .client-projects-list,.artisan-requests-list{display:grid;gap:10px}.client-project-card,.artisan-request-card{border:1px solid #d9d3c8;background:#fff;padding:16px} .client-project-card{display:grid;grid-template-columns:1fr auto;gap:8px}.client-project-card>p{grid-column:1/-1;margin:4px 0;color:#68716b;font-size:10px;line-height:1.55} .client-project-card h3,.artisan-request-card h3{font:400 20px Georgia,serif;margin:7px 0}.client-project-card time,.artisan-request-card time{font-size:8px;color:#8b908c} .project-status{display:inline-block;padding:5px 7px;border:1px solid #d7d0c5;font-size:7px;letter-spacing:.09em;text-transform:uppercase}.project-status.open{border-color:#b46a43;color:#9b5534} .request-filters{display:grid;grid-template-columns:180px 180px 1fr;gap:12px;align-items:end;padding:14px;margin:15px 0}.request-filters label{font-size:8px;text-transform:uppercase;letter-spacing:.08em}.request-filters select{display:block;width:100%;margin-top:5px;padding:9px;border:1px solid #d8d2c8;background:#fff} .request-filter-note{text-align:right}.request-filter-note b{font:400 32px Georgia,serif;display:block}.request-filter-note span{font-size:8px;text-transform:uppercase} .request-card-top,.request-meta,.request-actions{display:flex;justify-content:space-between;gap:10px;align-items:center}.artisan-request-card>p{font-size:10px;line-height:1.55;color:#69716c}.request-meta{justify-content:flex-start;border-top:1px solid #e5e0d7;padding-top:10px;margin-top:10px;font-size:8px;color:#6d756f}.request-actions{justify-content:flex-end;margin-top:12px} .nav-count{font-style:normal;margin-left:auto;background:#b46a43;color:#fff;border-radius:20px;padding:2px 6px;font-size:7px} .empty-state{border:1px dashed #cbc4b9;padding:28px;text-align:center;color:#7a817c}.empty-state b,.empty-state span{display:block;margin:4px} @media(max-width:650px){.client-account-actions{gap:5px}.client-account-actions .btn{padding:8px;font-size:8px}.request-filters{grid-template-columns:1fr 1fr}.request-filter-note{grid-column:1/-1;text-align:left}.client-projects-head{display:block}.client-projects-head .btn{margin-top:10px}} /* ===== V3.5 ASSISTANTS MÉTIER / FOURNISSEURS ===== */ .trade-wizard-card{max-width:850px}.wizard-head{display:flex;justify-content:space-between;gap:20px}.wizard-head h2{font:400 31px Georgia,serif;margin:5px 0}.wizard-step{font-size:8px;border:1px solid #d7d0c5;height:max-content;padding:7px} .wizard-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.wizard-fields label{font-size:8px;text-transform:uppercase;letter-spacing:.08em}.wizard-fields input,.wizard-fields select{display:block;width:100%;box-sizing:border-box;margin-top:5px;padding:10px;border:1px solid #d8d2c8;background:#fff} .wizard-suggestions{border:1px solid #d9d3c8;background:#f6f2e9;padding:13px}.wizard-suggestions #wizardSuggestions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.wizard-suggestions #wizardSuggestions span{font-size:8px;border:1px solid #d4cbbd;background:#fff;padding:6px 8px} .wizard-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:15px} .supplier-levels{display:grid;grid-template-columns:repeat(3,1fr);margin:15px 0}.supplier-levels>div{padding:16px;border-right:1px solid #ddd7ce}.supplier-levels b{display:block;color:#b46a43;font-size:8px}.supplier-levels strong{display:block;font:400 17px Georgia,serif;margin:6px 0}.supplier-levels span{font-size:9px;color:#737b75} .linked-suppliers{display:grid;gap:8px;margin-bottom:15px}.linked-supplier{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:12px;border:1px solid #ddd7ce;background:#fff;padding:12px}.supplier-mark{width:45px;height:45px;display:grid;place-items:center;background:#17201c;color:#fff;font:400 16px Georgia,serif}.linked-supplier h3{font:400 18px Georgia,serif;margin:0}.linked-supplier p{font-size:8px;color:#777;margin:4px 0}.supplier-status{font-size:7px;text-transform:uppercase;border:1px solid #d5cfc5;padding:6px}.supplier-status.partner{border-color:#8ca28e;color:#49694e} .supplier-trust{padding:18px}.supplier-trust h2{font:400 24px Georgia,serif;margin:5px 0}.supplier-trust p{font-size:10px;color:#6e766f;max-width:780px;line-height:1.6} .supplier-link-card{max-width:560px} @media(max-width:650px){.wizard-fields{grid-template-columns:1fr}.supplier-levels{grid-template-columns:1fr}.supplier-levels>div{border-right:0;border-bottom:1px solid #ddd7ce}.linked-supplier{grid-template-columns:45px 1fr}.supplier-status{grid-column:2}} /* ===== V3.6 — POLISH / IDENTITÉ ===== */ :root{ --dp-ink:#102133; --dp-green:#57a63c; --dp-cream:#f6f3ed; --dp-line:#dcd7cd; } .brand-image{background:transparent!important;border:0!important;overflow:visible!important} .brand-image img{width:42px;height:42px;object-fit:contain} .gate-main-logo{width:min(290px,72vw);display:block;margin:0 auto 14px;filter:drop-shadow(0 12px 30px rgba(18,35,52,.08))} .commission-strip{max-width:980px;margin:18px auto 24px;display:flex;align-items:center;gap:16px;border:1px solid var(--dp-line);background:rgba(255,255,255,.72);backdrop-filter:blur(8px);padding:12px 16px} .commission-zero{font:700 27px/1 Georgia,serif;color:var(--dp-green);white-space:nowrap} .commission-strip strong{display:block;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--dp-ink)} .commission-strip small{display:block;font-size:9px;color:#737b75;margin-top:3px;line-height:1.4} .door-illustration{display:block;font-size:22px;margin-bottom:8px;opacity:.82} .client-ill{color:#45617a}.artisan-ill{color:#a35d39} /* smooth entrance + door feel */ .gateway-doors,.doors,.gate-doors{perspective:1200px} .gateway-door,.door,.gate-door{transform-origin:left center;will-change:transform,box-shadow;transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,border-color .3s ease} .gateway-door:hover,.door:hover,.gate-door:hover{transform:translateY(-4px) rotateY(-3deg);box-shadow:0 24px 54px rgba(20,30,26,.13)} .gateway-door:active,.door:active,.gate-door:active{transform:translateY(0) rotateY(-10deg) scale(.985)} .page-subtle{font-size:10px;color:#7a817c;max-width:620px;margin-top:6px} .card,.trade-op,.artisan-request-card,.client-project-card{box-shadow:0 8px 22px rgba(18,24,21,.025)} .btn{transition:transform .16s ease,box-shadow .16s ease,background .16s ease} .btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0)} .branding-card{padding:18px;margin-bottom:16px} .branding-head{display:flex;justify-content:space-between;gap:18px;align-items:start} .branding-head h2{font:400 25px Georgia,serif;margin:5px 0}.branding-head p{font-size:10px;color:#737a75;max-width:620px;line-height:1.5} .branding-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:15px} .branding-drop{position:relative;min-height:155px;border:1px dashed #c7c0b6;background:#faf8f3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;overflow:hidden} .branding-drop input{display:none}.branding-icon{font-size:26px;color:var(--dp-green)}.branding-drop strong{font:400 17px Georgia,serif;margin:7px 0}.branding-drop small{font-size:8px;color:#7f8580} .branding-preview{max-width:88%;max-height:110px;object-fit:contain;margin-top:8px}.branding-file-preview{margin-top:9px;font-size:9px;padding:7px 9px;border:1px solid #d9d3ca;background:white} .branding-status{font-size:8px;color:#747b76;margin-top:10px} .community-strip{margin:42px auto 0;max-width:1180px;padding:28px 24px;border-top:1px solid #ddd8ce} .community-head{text-align:center;max-width:700px;margin:0 auto 20px}.community-head h2{font:400 27px Georgia,serif;margin:6px 0}.community-head p{font-size:9px;color:#777e79;line-height:1.5} .community-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.community-empty{font-size:9px;color:#8a8f8b;padding:16px} .community-logo-card{width:120px;min-height:88px;border:1px solid #ddd7ce;background:white;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:9px} .community-logo-card img{max-width:78px;max-height:46px;object-fit:contain}.community-logo-card span{font-size:7px;color:#777;margin-top:7px;text-align:center} @media(max-width:650px){ .gate-main-logo{width:230px} .commission-strip{margin:12px 14px 18px;padding:10px 12px} .branding-head{display:block}.branding-grid{grid-template-columns:1fr} .community-strip{padding:22px 14px} } /* ===== V3.6.2 — CONNEXION CLIENT ===== */ .modal{position:fixed!important;inset:0!important;z-index:14000!important;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(13,18,16,.58);backdrop-filter:blur(8px);overflow:auto} .modal.hidden{display:none!important} .modal-card{position:relative;width:min(620px,100%);max-height:calc(100dvh - 36px);overflow:auto;background:#f7f4ed;border:1px solid #d5cfc3;padding:28px;box-shadow:0 35px 100px rgba(0,0,0,.28)} .modal-x{position:absolute;right:12px;top:12px;width:34px;height:34px;border:1px solid #d5cfc3;background:#fff;font-size:20px;line-height:1;z-index:2} .client-auth-card label,.supplier-link-card label{display:flex;flex-direction:column;gap:6px;margin:12px 0;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase} .client-auth-card input,.supplier-link-card input,.supplier-link-card select{border:1px solid #d8d2c8;background:#fff;padding:12px;color:#182019} .client-reuse{margin-top:15px;padding-top:15px;border-top:1px solid #d8d2c8}.client-reuse span{display:block;font-size:9px;color:#747c76;line-height:1.45;margin-bottom:8px} .form-msg{font-size:10px;line-height:1.45;margin-top:10px;color:#9b5534}.community-logo-card:first-child{border-color:#b8c5b6;background:#f8fbf6} @media(max-width:650px){.modal{padding:10px;align-items:flex-end}.modal-card{width:100%;max-height:90dvh;padding:24px 18px 20px;border-radius:18px 18px 0 0}} /* ===== V3.7 — EXTRACTION RÉELLE DES TARIFS ===== */ .supplier-batch-actions{display:flex;align-items:center;gap:10px;margin:12px 0 2px} .supplier-batch-actions span{font-size:9px;color:#7b817c} .supplier-extract-summary{margin:5px 0 0!important;font-size:9px!important;color:#747c76!important;max-width:580px} .supplier-doc.analyzing{border-color:#b98a61;background:#fffaf4}.supplier-doc.done{border-color:#9fb59f}.supplier-doc.error{border-color:#c78a7d} .supplier-table td small{display:block;font-size:7px;color:#858b86;margin-top:4px;line-height:1.35} .supplier-table tr.low-confidence td{background:#fff9ee} .price-input-wrap{display:flex;align-items:center;border:1px solid #ddd7ce;background:#fff} .price-input-wrap input{border:0!important;min-width:85px}.price-input-wrap em{font-style:normal;font-size:7px;color:#788079;padding-right:7px;white-space:nowrap} #analyzeAllSupplierBtn:disabled,.supplier-doc button:disabled{opacity:.55;cursor:wait} /* ===== V3.8 — BACK-OFFICE ADMIN ===== */ .admin-nav-btn{border-top:1px solid rgba(255,255,255,.12)!important;margin-top:8px!important;padding-top:16px!important} .admin-view{padding-bottom:70px} .admin-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:24px} .admin-hero h1{font:400 clamp(34px,5vw,62px)/.98 Georgia,serif;margin:7px 0 10px}.admin-hero p{max-width:650px;color:#747b76;font-size:11px;line-height:1.55} .admin-owner-badge{font-size:8px;letter-spacing:.14em;font-weight:900;border:1px solid #94aa96;color:#36543b;padding:9px 11px;background:#eef5ec} .admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px} .admin-stats article{border:1px solid #ddd7ce;background:#fbfaf6;padding:17px}.admin-stats span{display:block;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:#787e79}.admin-stats strong{display:block;font:400 31px Georgia,serif;margin:6px 0}.admin-stats small{font-size:8px;color:#878d88} .admin-tabs{display:flex;gap:0;border-bottom:1px solid #d7d1c7;margin:18px 0}.admin-tabs button{border:0;background:transparent;padding:12px 16px;font-size:9px;font-weight:800;color:#7a817c;border-bottom:2px solid transparent}.admin-tabs button.active{color:#14201a;border-bottom-color:#d86042} .admin-panel{display:none}.admin-panel.active{display:block} .admin-panel-head{display:flex;justify-content:space-between;gap:18px;align-items:end;margin:16px 0}.admin-panel-head h2{font:400 27px Georgia,serif;margin:0 0 5px}.admin-panel-head p{font-size:9px;color:#777e79;max-width:650px}.admin-panel-head input{width:min(300px,100%);border:1px solid #d8d2c8;background:white;padding:11px} .admin-table-wrap{overflow:auto;border:1px solid #ddd7ce;background:white}.admin-table{width:100%;border-collapse:collapse;min-width:760px}.admin-table th{font-size:7px;letter-spacing:.12em;text-transform:uppercase;text-align:left;background:#17211b;color:white;padding:10px}.admin-table td{padding:12px 10px;border-bottom:1px solid #ece7df;font-size:9px;vertical-align:middle}.admin-table td b,.admin-table td small,.admin-table td em{display:block}.admin-table td small{color:#818782;margin-top:3px}.admin-table td em{font-style:normal;font-size:7px;color:#a75d43;margin-top:4px} .admin-status{display:inline-flex;padding:5px 7px;border:1px solid #ddd;font-size:7px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.admin-status.active,.admin-status.founder_free{background:#edf5eb;border-color:#aac0aa;color:#34583b}.admin-status.pending{background:#fbf5e8;border-color:#d6c39b;color:#7c612e}.admin-status.suspended{background:#faece8;border-color:#d9a398;color:#8c4437} .admin-action{border:1px solid #d6d0c7;background:#fff;padding:7px 9px;font-size:8px;font-weight:800;cursor:pointer}.admin-action.suspend{color:#9a493c;border-color:#dbb0a7}.admin-action.restore{color:#315b3a;border-color:#a8c0a9;background:#f4f9f2}.admin-protected{font-size:8px;color:#657068} .admin-network-list{display:grid;gap:8px}.admin-network-card{display:grid;grid-template-columns:90px 1fr auto auto;gap:12px;align-items:center;border:1px solid #ddd7ce;background:white;padding:12px}.admin-network-type{font-size:7px;letter-spacing:.12em;color:#8a8178}.admin-network-card strong,.admin-network-card small{display:block}.admin-network-card small{font-size:8px;color:#858b86;margin-top:3px} .admin-audit-list{border:1px solid #ddd7ce;background:white}.admin-audit-row{display:grid;grid-template-columns:150px 1fr 1fr;gap:14px;padding:11px;border-bottom:1px solid #ece7df;align-items:center}.admin-audit-row time,.admin-audit-row small{font-size:8px;color:#858b86}.admin-audit-row strong,.admin-audit-row span{display:block;font-size:9px}.admin-audit-row span{color:#747b76;margin-top:2px} @media(max-width:760px){ .admin-hero{display:block}.admin-owner-badge{display:inline-block;margin-top:8px} .admin-stats{grid-template-columns:1fr 1fr}.admin-panel-head{display:block}.admin-panel-head input{margin-top:12px;width:100%} .admin-tabs{overflow:auto}.admin-tabs button{white-space:nowrap} .admin-network-card{grid-template-columns:65px 1fr;}.admin-network-card .admin-status,.admin-network-card .admin-action{grid-column:auto} .admin-audit-row{grid-template-columns:1fr}.admin-audit-row time{order:3} } /* ============================================================ V3.9 — ATELIER VIVANT / IDENTITÉ DEVISPILOT ============================================================ */ /* Vrai signe de marque */ .real-dp-mark{display:grid!important;place-items:center;background:transparent!important;border:0!important} .real-dp-mark img{width:58px;height:58px;object-fit:contain;display:block;filter:drop-shadow(0 5px 14px rgba(10,26,21,.08))} .sidebar-dp-mark{width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px} .sidebar-dp-mark img{width:100%;height:100%;object-fit:contain;display:block} .brand-lockup{align-items:center!important;gap:10px!important} .brand-lockup strong{letter-spacing:-.03em} .pilot-mark{display:none!important} /* Plus d'air, moins "tableur vide" */ .workspace{ background: radial-gradient(circle at 84% 10%,rgba(217,93,67,.035),transparent 22%), linear-gradient(90deg,rgba(21,38,31,.022) 1px,transparent 1px), linear-gradient(rgba(21,38,31,.018) 1px,transparent 1px), #f3f1eb; background-size:auto,34px 34px,34px 34px,auto; } .view{position:relative} .card{border-color:#d9d5cc} .card:hover{border-color:#cec8bd} .topbar{box-shadow:0 8px 30px rgba(26,35,31,.025)} .sidebar:after{ content:""; position:absolute;inset:auto 10px 155px 10px;height:120px; background:url("assets/atelier-tools-sketch.svg") center/contain no-repeat; opacity:.17;pointer-events:none;filter:invert(1) grayscale(1); } /* Hero atelier */ .workshop-hero{position:relative;overflow:hidden;isolation:isolate} .workshop-hero:before{ content:"";position:absolute;left:26px;right:26px;bottom:20px;height:1px; background:linear-gradient(90deg,transparent,#d4cbbf 15%,#d4cbbf 83%,transparent); } .workshop-sketch{position:absolute;pointer-events:none;user-select:none;z-index:-1} .sketch-tools{right:-38px;bottom:-32px;width:min(560px,52%);opacity:.72} .workshop-note{ position:absolute;font:600 8px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.13em;text-transform:uppercase;color:#9a8f84;transform:rotate(-2deg) } .note-one{right:54px;top:30px} .workshop-pencil-line{position:absolute;right:56px;top:52px;width:132px;height:2px;background:#d75d43;opacity:.24;transform:rotate(-4deg)} .workshop-card{position:relative;overflow:hidden} .sketch-pencil{right:-72px;bottom:-70px;width:420px;opacity:.65} .workshop-card textarea,.workshop-card .card-head{position:relative;z-index:1} /* Coûts / matériaux */ .material-sketch-wrap{position:absolute;right:0;top:-14px;width:300px;height:145px;overflow:hidden;pointer-events:none} .material-sketch-wrap img{width:100%;height:100%;object-fit:contain;opacity:.72} #prices .page-head{position:relative;overflow:hidden} #prices .page-head>div:first-child{position:relative;z-index:2;max-width:720px} .workshop-caption{font-size:9px!important;color:#7a817c!important;line-height:1.5!important;margin-top:4px!important;max-width:720px} /* Petits repères "coup de crayon" sur les titres */ .page-head h1,.admin-hero h1,.client-hero h1{position:relative;display:inline-block} .page-head h1:after,.admin-hero h1:after{ content:"";position:absolute;left:1%;bottom:-8px;width:28%;height:3px; border-top:2px solid rgba(216,92,65,.26);border-radius:50%;transform:rotate(-1.5deg) } /* Admin moins clinique */ .admin-hero-decor{position:relative;overflow:hidden;min-height:150px;padding:20px 22px;background:#f8f6ef;border:1px solid #ddd7cd} .admin-sketch{position:absolute;right:-55px;bottom:-58px;width:390px;opacity:.7;pointer-events:none} .admin-hero-decor>div:first-of-type{position:relative;z-index:1} .admin-stats article{position:relative;overflow:hidden} .admin-stats article:after{content:"";position:absolute;right:-22px;bottom:-22px;width:75px;height:75px;border:1px solid rgba(28,45,38,.055);border-radius:50%} .admin-tabs button{transition:.18s ease}.admin-tabs button:hover{background:rgba(22,35,30,.025)} /* Icônes de navigation : plus homogènes et moins "emoji" */ .sidebar nav button>span:first-child{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:500;opacity:.9 } /* Micro-textures de matière sur certaines cartes, très discrètes */ .weather-widget:after,.principle-card:after,.supplier-import:after{ content:"";position:absolute;right:14px;bottom:12px;width:76px;height:38px;pointer-events:none;opacity:.06; background:repeating-linear-gradient(135deg,#16241f 0 1px,transparent 1px 8px) } .weather-widget,.principle-card,.supplier-import{position:relative;overflow:hidden} /* Mobile : illustrations légères, jamais devant le contenu */ @media(max-width:820px){ .sidebar:after{height:90px;bottom:140px;opacity:.10} .sketch-tools{width:330px;right:-110px;bottom:-10px;opacity:.38} .workshop-note,.workshop-pencil-line{display:none} .sketch-pencil{width:300px;right:-130px;bottom:-45px;opacity:.35} .material-sketch-wrap{width:180px;height:110px;right:-50px;top:0;opacity:.6} .admin-sketch{width:270px;right:-125px;bottom:-35px;opacity:.38} .admin-hero-decor{padding:17px 18px} } /* Respect des préférences d'accessibilité */ @media(prefers-reduced-motion:reduce){ .btn,.sidebar nav button,.view,.reveal{transition:none!important;animation:none!important} } /* ============================================================ V4.0 — INTERNATIONAL ============================================================ */ .dp-lang-switch{ display:inline-flex;align-items:center;gap:2px;padding:3px; border:1px solid rgba(20,34,28,.14);background:rgba(249,248,243,.82); backdrop-filter:blur(12px);border-radius:999px;z-index:30 } .dp-lang-switch button{ appearance:none;border:0;background:transparent;color:#657069; min-width:31px;height:27px;padding:0 7px;border-radius:999px; font:800 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em;cursor:pointer;transition:.18s ease } .dp-lang-switch button:hover{color:#15241e;background:rgba(18,36,29,.05)} .dp-lang-switch button.active{background:#17241f;color:#fff} .gateway>.dp-lang-switch{position:absolute;right:24px;top:23px} .client-top>.dp-lang-switch{margin-left:auto;margin-right:10px} .topbar>.dp-lang-switch{margin-left:auto} .international-card{ display:flex;align-items:center;justify-content:space-between;gap:22px; margin-bottom:16px;padding:17px 18px;background: linear-gradient(120deg,rgba(216,94,67,.045),transparent 36%),#faf9f5 } .international-card h2{font:400 23px Georgia,serif;margin:4px 0} .international-card p{font-size:9px;color:#757d77;line-height:1.5;max-width:600px} .international-card select{min-width:170px;border:1px solid #d8d2c8;background:#fff;padding:10px 34px 10px 11px} html[lang="en"] .dp-wordmark b,html[lang="es"] .dp-wordmark b{letter-spacing:-.02em} @media(max-width:720px){ .gateway>.dp-lang-switch{right:14px;top:14px} .client-top>.dp-lang-switch{order:2;margin:0} .client-account-actions{order:3;width:100%} .international-card{display:block}.international-card select{width:100%;margin-top:12px} .topbar>.dp-lang-switch{margin-left:4px} } /* ============================================================ V4.1 — PORTES APPROUVÉES + 9 LANGUES ============================================================ */ .gateway{position:relative;overflow:hidden} .gateway-arch-sketch{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; pointer-events:none;opacity:.55;z-index:0 } .gateway>*:not(.gateway-arch-sketch){position:relative;z-index:1} /* Door illustration */ .client-symbol,.pro-symbol{ width:68%!important;height:54%!important;display:grid!important;place-items:center!important; margin:auto!important;background:transparent!important;border:0!important } .client-symbol img,.pro-symbol img{width:100%;height:100%;object-fit:contain;display:block} .client-symbol:before,.client-symbol:after,.pro-symbol:before,.pro-symbol:after{display:none!important} /* Premium physical door motion */ .gate-door,.gateway-door,.door{ transform-style:preserve-3d; backface-visibility:hidden; transform-origin:left center!important; transition: transform 1.45s cubic-bezier(.22,.68,.12,1), filter .8s ease, box-shadow 1.2s ease!important; } .gate-door:before,.gateway-door:before,.door:before{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,rgba(255,255,255,.13),transparent 16%,transparent 84%,rgba(0,0,0,.12)); opacity:.22;transition:opacity 1s ease } .door-opening .gate-door:not(.opening), .door-opening .gateway-door:not(.opening), .door-opening .door:not(.opening){filter:brightness(.62) saturate(.75)} .gate-door.opening,.gateway-door.opening,.door.opening{ transform:perspective(1350px) rotateY(-73deg) translateZ(7px)!important; box-shadow:30px 28px 64px rgba(0,0,0,.34)!important; } .gate-door.opening:before,.gateway-door.opening:before,.door.opening:before{opacity:.62} .gateway.door-opening:after{ content:"";position:absolute;inset:0;z-index:5;pointer-events:none; background:radial-gradient(circle at 50% 48%,rgba(224,194,155,.12),transparent 38%); animation:gatewayLight 1.45s ease forwards } @keyframes gatewayLight{0%{opacity:0}55%{opacity:.45}100%{opacity:0}} /* 9-language selector */ .dp-lang-switch-9{ display:flex!important;flex-wrap:wrap;justify-content:center;max-width:520px; border-color:rgba(214,204,190,.16);background:rgba(15,23,20,.62)!important; padding:5px 7px!important;gap:3px!important;box-shadow:0 10px 34px rgba(0,0,0,.12) } .gateway>.dp-lang-switch-9{ top:20px!important;right:24px!important;left:auto!important } .dp-lang-switch-9 button{ color:#b9beb9!important;min-width:34px!important;height:29px!important; font-size:8px!important;border:1px solid transparent!important } .dp-lang-switch-9 button:hover{background:rgba(255,255,255,.06)!important;color:#fff!important} .dp-lang-switch-9 button.active{ background:#f1eee5!important;color:#18211d!important;border-color:#f1eee5!important } .dp-lang-switch-9 button[data-lang="zh"], .dp-lang-switch-9 button[data-lang="ar"]{min-width:47px!important} /* RTL */ html[dir="rtl"] body{direction:rtl} html[dir="rtl"] .sidebar{direction:rtl} html[dir="rtl"] .gateway .dp-lang-switch-9{direction:ltr} html[dir="rtl"] .client-top,html[dir="rtl"] .topbar{direction:rtl} html[dir="rtl"] input,html[dir="rtl"] textarea,html[dir="rtl"] select{text-align:right} /* Small tactile line */ .gate-door .door-label,.gateway-door .door-label,.door .door-label{ letter-spacing:.18em } @media(max-width:900px){ .gateway>.dp-lang-switch-9{ position:relative!important;top:auto!important;right:auto!important; margin:12px auto 18px!important;width:calc(100% - 28px);max-width:560px } } @media(max-width:620px){ .dp-lang-switch-9{gap:2px!important;padding:4px!important} .dp-lang-switch-9 button{min-width:30px!important;height:27px!important;font-size:7px!important;padding:0 5px!important} .client-symbol,.pro-symbol{width:72%!important;height:52%!important} .gate-door.opening,.gateway-door.opening,.door.opening{ transform:perspective(1000px) rotateY(-68deg)!important } } @media(prefers-reduced-motion:reduce){ .gate-door,.gateway-door,.door{transition:none!important} .gate-door.opening,.gateway-door.opening,.door.opening{transform:none!important} } /* ============================================================ V4.2 — FINAL GATEWAY ============================================================ */ .gateway-v42{ min-height:100svh!important; background: radial-gradient(circle at 50% 58%,rgba(152,89,49,.07),transparent 28%), linear-gradient(#0c1210,#0a100e)!important; color:#efede5!important; padding:0 0 20px!important; overflow:hidden; } .gateway-final-sketch{ position:absolute;inset:54px 0 0;width:100%;height:calc(100% - 54px); object-fit:cover;pointer-events:none;opacity:.62;z-index:0 } .gateway-v42>*:not(.gateway-final-sketch){position:relative;z-index:2} .gateway-language-bar{ min-height:54px;display:flex;align-items:stretch;justify-content:center; gap:1px;padding:0 18px;border-bottom:1px solid rgba(238,231,218,.10); background:rgba(7,12,10,.58);backdrop-filter:blur(13px);direction:ltr!important; overflow-x:auto;scrollbar-width:none } .gateway-language-bar::-webkit-scrollbar{display:none} .gateway-language-bar button{ flex:0 0 auto;border:0;border-bottom:2px solid transparent;background:none; color:#aaaead;padding:0 14px;font:500 10px/1 system-ui,sans-serif; white-space:nowrap;cursor:pointer;transition:.2s ease } .gateway-language-bar button:hover{color:#fff;background:rgba(255,255,255,.025)} .gateway-language-bar button.active{color:#f5f1e8;border-bottom-color:#f4f0e6} .gateway-language-bar button span{margin-left:6px} .gateway-topline{ max-width:1420px;margin:0 auto;display:flex;align-items:center;justify-content:space-between; padding:22px 42px 8px; } .gateway-brand-v42{display:flex;align-items:center;gap:13px} .gateway-brand-v42 img{width:55px;height:55px;object-fit:contain} .gateway-brand-v42 strong{display:block;font:700 19px/1 system-ui,sans-serif;letter-spacing:.18em;color:#f3efe5} .gateway-brand-v42 strong span{color:#c96d45} .gateway-brand-v42 small{display:block;margin-top:7px;font:600 8px/1 system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#8e9691} .gateway-top-actions{display:flex;gap:10px} .gateway-top-actions button{ border:1px solid rgba(238,232,219,.25);background:rgba(13,19,17,.68);color:#d8dad6; border-radius:999px;padding:9px 17px;font-size:9px;cursor:pointer } .gateway-top-actions .create{border-color:#a85a37;color:#e18a5f} .gateway-intro-v42{text-align:center;max-width:900px;margin:25px auto 24px;padding:0 20px} .gateway-intro-v42 .eyebrow{font:800 9px/1.2 system-ui,sans-serif;letter-spacing:.27em;color:#c96d45} .gateway-intro-v42 h1{ font:400 clamp(44px,5.6vw,82px)/.94 Georgia,serif;letter-spacing:-.045em; color:#f0ede4;margin:13px auto 7px;max-width:860px;text-wrap:balance } .headline-stroke{display:block;width:185px;height:9px;margin:-4px auto 12px;border-top:2px solid #c96d45;border-radius:50%;transform:rotate(-1deg);opacity:.75} .gateway-intro-v42 p{font:400 13px/1.55 system-ui,sans-serif;color:#9ca29f;margin:0 auto;max-width:700px} .gateway-portals{ display:grid;grid-template-columns:minmax(410px,1fr) 45px minmax(410px,1fr); gap:25px;max-width:1180px;margin:18px auto 0;padding:0 28px;align-items:center } .portal{display:grid;grid-template-columns:245px 1fr;gap:24px;align-items:center;min-width:0} .portal-door-wrap{ position:relative;height:390px;border:1px solid #4a4e49;padding:8px; background:#0d110f;perspective:1500px;box-shadow:0 27px 70px rgba(0,0,0,.40); overflow:visible } .portal-reveal{position:absolute;inset:8px;overflow:hidden;background:#1a1711} .portal-reveal img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.75)} .portal-leaf{ position:absolute;inset:8px;border:1px solid #5a5e58;display:block; transform-origin:left center;transform-style:preserve-3d;backface-visibility:hidden; transition:transform 1.62s cubic-bezier(.18,.72,.12,1),box-shadow 1.4s ease,filter 1s ease; cursor:pointer;z-index:3;overflow:hidden } .client-leaf{ background: linear-gradient(135deg,rgba(255,255,255,.16),transparent 34%), radial-gradient(circle at 76% 23%,rgba(255,255,255,.18),transparent 22%), #e5decf;color:#20251f } .artisan-leaf{ background: repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 1px,transparent 1px 9px), linear-gradient(135deg,#202722,#101512);color:#eceae1 } .portal-leaf:after{ content:"";position:absolute;inset:0;pointer-events:none; box-shadow:inset -22px 0 42px rgba(0,0,0,.25),inset 1px 0 rgba(255,255,255,.08); transition:box-shadow 1.4s ease } .portal-leaf:hover{transform:rotateY(-7deg)} .portal-leaf.opening{ transform:rotateY(-82deg)!important; box-shadow:28px 20px 45px rgba(0,0,0,.38); } .portal-leaf.opening:after{box-shadow:inset -46px 0 70px rgba(0,0,0,.44),inset 1px 0 rgba(255,255,255,.14)} .portal-no{position:absolute;left:19px;top:18px;font:700 9px/1 ui-monospace,monospace;letter-spacing:.16em;color:#bb754e} .portal-icon{position:absolute;width:58%;height:45%;left:21%;top:25%;object-fit:contain;opacity:.88} .portal-knob{ position:absolute;right:14px;top:55%;width:13px;height:13px;border-radius:50%; background:radial-gradient(circle at 32% 30%,#e49a65,#9f512d 55%,#382116 100%); border:1px solid #e3a16e;box-shadow:0 0 0 4px rgba(199,107,65,.09),0 4px 12px rgba(0,0,0,.5) } .portal-bottom-line{position:absolute;left:18px;right:18px;bottom:42px;height:1px;background:rgba(88,89,83,.45)} .artisan-leaf .portal-bottom-line{background:rgba(224,224,214,.24)} .portal-tag{position:absolute;left:18px;bottom:19px;font:700 8px/1 system-ui,sans-serif;letter-spacing:.24em;color:#626861} .artisan-leaf .portal-tag{color:#b8b8ae} .portal-copy{min-width:0} .portal-kicker{display:block;font:700 8px/1.35 system-ui,sans-serif;letter-spacing:.18em;color:#929995;text-transform:uppercase} .portal-copy h2{font:400 clamp(30px,3.2vw,48px)/.98 Georgia,serif;color:#f0ece4;margin:11px 0 10px} .portal-copy>i{display:block;width:26px;border-top:2px solid #c96d45;margin-bottom:14px} .portal-copy p{font-size:11px;line-height:1.65;color:#969d99;margin:0 0 16px;max-width:220px} .portal-copy>button{ border:1px solid #a65c3b;background:rgba(17,23,20,.72);color:#e9e4da; border-radius:6px;padding:9px 13px;font-size:10px;cursor:pointer } .portal-copy>button span{margin-right:8px} .gateway-axis-v42{height:310px;display:flex;flex-direction:column;align-items:center;gap:9px} .gateway-axis-v42 i{width:1px;background:#3e4541;flex:1} .gateway-axis-v42 span{font:600 7px/1 system-ui,sans-serif;letter-spacing:.22em;color:#69716c;writing-mode:vertical-rl} .portal.active-opening .portal-copy{opacity:.45;filter:blur(.2px);transition:opacity .8s ease} .gateway-v42.is-opening .portal:not(.active-opening){opacity:.38;filter:brightness(.72);transition:opacity .8s ease,filter .8s ease} .gateway-v42.opening-fade .gateway-intro-v42, .gateway-v42.opening-fade .gateway-topline, .gateway-v42.opening-fade .gateway-language-bar, .gateway-v42.opening-fade .gateway-benefits, .gateway-v42.opening-fade .gateway-trust-v42{opacity:0;transition:opacity .55s ease} .gateway-v42.opening-fade .portal-copy{opacity:0;transition:opacity .55s ease} .gateway-benefits{ max-width:1120px;margin:24px auto 0;padding:16px 26px 0; display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(236,230,217,.08) } .gateway-benefits>div{display:flex;align-items:center;gap:10px;padding:0 18px;border-right:1px solid rgba(236,230,217,.08)} .gateway-benefits>div:last-child{border-right:0} .gateway-benefits b{font:400 22px/1 Georgia,serif;color:#aaa9a0} .gateway-benefits span{font-size:9px;line-height:1.4;color:#a6aaa6} .gateway-trust-v42{text-align:center;color:#68716c;font-size:8px;margin:13px auto 0;padding:0 20px} html[dir="rtl"] .gateway-v42{direction:rtl} html[dir="rtl"] .gateway-language-bar{direction:ltr} html[dir="rtl"] .portal{direction:rtl} html[dir="rtl"] .portal-leaf{transform-origin:right center} html[dir="rtl"] .portal-leaf.opening{transform:rotateY(82deg)!important} html[dir="rtl"] .portal-copy>button span{margin-right:0;margin-left:8px} @media(max-width:1000px){ .gateway-portals{grid-template-columns:1fr 30px 1fr;gap:14px;padding:0 18px} .portal{grid-template-columns:190px 1fr;gap:16px} .portal-door-wrap{height:320px} .gateway-topline{padding:18px 24px 8px} .gateway-benefits{padding-inline:15px} } @media(max-width:760px){ .gateway-top-actions{display:none} .gateway-topline{padding:15px 17px 4px} .gateway-brand-v42 img{width:44px;height:44px} .gateway-brand-v42 strong{font-size:16px} .gateway-language-bar{justify-content:flex-start;padding:0 8px;min-height:48px} .gateway-language-bar button{padding:0 10px;font-size:9px} .gateway-intro-v42{margin-top:18px} .gateway-intro-v42 h1{font-size:clamp(39px,11vw,58px)} .gateway-portals{display:block;max-width:540px} .gateway-axis-v42{display:none} .portal{grid-template-columns:155px 1fr;gap:17px;margin:24px 0 34px} .portal-door-wrap{height:260px} .portal-copy h2{font-size:31px} .portal-copy p{font-size:10px} .gateway-benefits{grid-template-columns:1fr 1fr;row-gap:16px} .gateway-benefits>div{border-right:0;padding:0 10px} } @media(max-width:460px){ .gateway-language-bar button span{display:none} .gateway-language-bar button{font-size:13px;padding:0 9px} .gateway-brand-v42 small{font-size:7px} .portal{grid-template-columns:135px 1fr} .portal-door-wrap{height:225px} .portal-copy h2{font-size:28px} .portal-copy p{line-height:1.5} .gateway-benefits{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){ .portal-leaf{transition:none!important} .portal-leaf.opening{transform:none!important} } /* ============================================================ V4.3 — PORTAIL FINAL VALIDÉ Les faces des portes viennent du visuel approuvé. ============================================================ */ #gateway.gateway-v43{ min-height:100svh!important; background: radial-gradient(circle at 50% 62%,rgba(139,79,43,.085),transparent 30%), linear-gradient(180deg,#0b110f 0%,#090f0d 100%)!important; color:#efede5!important;padding:0 0 18px!important;overflow:hidden; } #gateway.gateway-v43 .gateway-final-sketch{opacity:.7} .gateway-brand-v43{display:flex;align-items:center;gap:13px} .gateway-brand-v43 img{width:55px;height:55px;object-fit:contain} .gateway-brand-v43 strong{display:block;font:700 19px/1 system-ui,sans-serif;letter-spacing:.18em;color:#f3efe5} .gateway-brand-v43 strong span{color:#c96d45} .gateway-brand-v43 small{display:block;margin-top:7px;font:600 8px/1 system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#8e9691} .gateway-intro-v43{text-align:center;max-width:950px;margin:26px auto 27px;padding:0 22px} .gateway-intro-v43 .eyebrow{font:800 9px/1.2 system-ui,sans-serif;letter-spacing:.27em;color:#c96d45} .gateway-intro-v43 h1{ font:400 clamp(44px,5.55vw,82px)/.95 Georgia,serif!important; letter-spacing:-.045em;color:#f0ede4;margin:13px auto 7px; max-width:930px;text-wrap:balance } .gateway-intro-v43 p{font:400 13px/1.55 system-ui,sans-serif;color:#9ca29f;margin:0 auto;max-width:760px} .gateway-portals-v43{ display:grid;grid-template-columns:minmax(425px,1fr) 46px minmax(425px,1fr); gap:27px;max-width:1230px;margin:14px auto 0;padding:0 30px;align-items:center } .portal-v43{display:grid;grid-template-columns:255px 1fr;gap:25px;align-items:center;min-width:0} .door-stage{height:410px;perspective:1600px} .door-frame{ position:relative;width:100%;height:100%; border:9px solid #242821; outline:1px solid #55584f; background:#171813; box-shadow:0 31px 74px rgba(0,0,0,.50),inset 0 0 0 1px rgba(224,216,197,.09); overflow:visible; } .door-frame:before{ content:"";position:absolute;inset:-10px;pointer-events:none;z-index:5; border:1px solid rgba(137,123,103,.32); box-shadow:inset 0 0 18px rgba(0,0,0,.38); } .door-reveal-image{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0; filter:saturate(.8) contrast(.98); } .door-light{ position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.78; } .client-light{background:linear-gradient(90deg,rgba(255,226,159,.42),rgba(255,247,220,.14))} .artisan-light{background:linear-gradient(90deg,rgba(220,132,58,.38),rgba(76,37,15,.06))} #gateway.gateway-v43 .door-leaf-v43{ appearance:none!important;position:absolute!important;inset:0!important;z-index:4!important; width:100%!important;height:100%!important;padding:0!important;margin:0!important;border:0!important; background:#111!important;overflow:hidden!important;cursor:pointer!important; transform-origin:left center!important;transform:perspective(1600px) rotateY(0deg)!important; transform-style:preserve-3d!important;backface-visibility:hidden!important; transition: transform 1.82s cubic-bezier(.18,.72,.08,1), box-shadow 1.5s ease, filter 1.1s ease!important; will-change:transform; } #gateway.gateway-v43 .door-leaf-v43>img{ width:100%!important;height:100%!important;object-fit:cover!important;display:block!important; pointer-events:none!important;user-select:none!important; } #gateway.gateway-v43 .door-leaf-v43:after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,rgba(255,255,255,.04),transparent 22%,transparent 75%,rgba(0,0,0,.32)); box-shadow:inset -16px 0 30px rgba(0,0,0,.16); transition:box-shadow 1.6s ease,background 1.6s ease } #gateway.gateway-v43 .door-leaf-v43:hover{ transform:perspective(1600px) rotateY(-4deg)!important; } #gateway.gateway-v43 .door-leaf-v43.opening{ transform:perspective(1600px) rotateY(-84deg)!important; box-shadow:38px 22px 55px rgba(0,0,0,.42)!important; } #gateway.gateway-v43 .door-leaf-v43.opening:after{ background:linear-gradient(90deg,rgba(255,255,255,.08),transparent 15%,rgba(0,0,0,.46)); box-shadow:inset -48px 0 72px rgba(0,0,0,.45) } .portal-copy-v43{min-width:0} .portal-copy-v43 .portal-kicker{display:block;font:700 8px/1.35 system-ui,sans-serif;letter-spacing:.18em;color:#929995;text-transform:uppercase} .portal-copy-v43 h2{font:400 clamp(31px,3.3vw,49px)/.98 Georgia,serif;color:#f0ece4;margin:11px 0 10px} .portal-copy-v43>i{display:block;width:27px;border-top:2px solid #c96d45;margin-bottom:14px} .portal-copy-v43 p{font-size:11px;line-height:1.65;color:#969d99;margin:0 0 16px;max-width:230px} .portal-copy-v43>button{ border:1px solid #a65c3b;background:rgba(17,23,20,.72);color:#e9e4da; border-radius:6px;padding:9px 13px;font-size:10px;cursor:pointer } .portal-copy-v43>button span{margin-right:8px} .gateway-axis-v43{height:315px;display:flex;flex-direction:column;align-items:center;gap:9px} .gateway-axis-v43 i{width:1px;background:#3e4541;flex:1} .gateway-axis-v43 span{font:600 7px/1 system-ui,sans-serif;letter-spacing:.22em;color:#69716c;writing-mode:vertical-rl} #gateway.gateway-v43.is-opening .portal-v43:not(.active-opening){ opacity:.33;filter:brightness(.7);transition:opacity .9s ease,filter .9s ease } #gateway.gateway-v43 .portal-v43.active-opening .portal-copy-v43{ opacity:.38;transition:opacity .8s ease } #gateway.gateway-v43.opening-fade .gateway-intro-v43, #gateway.gateway-v43.opening-fade .gateway-topline, #gateway.gateway-v43.opening-fade .gateway-language-bar, #gateway.gateway-v43.opening-fade .gateway-benefits-v43, #gateway.gateway-v43.opening-fade .gateway-trust-v43, #gateway.gateway-v43.opening-fade .portal-copy-v43{ opacity:0;transition:opacity .55s ease } .gateway-benefits-v43{ max-width:1160px;margin:25px auto 0;padding:16px 26px 0; display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(236,230,217,.08) } .gateway-benefits-v43>div{display:flex;align-items:center;gap:10px;padding:0 18px;border-right:1px solid rgba(236,230,217,.08)} .gateway-benefits-v43>div:last-child{border-right:0} .gateway-benefits-v43 b{font:400 22px/1 Georgia,serif;color:#aaa9a0} .gateway-benefits-v43 span{font-size:9px;line-height:1.4;color:#a6aaa6} .gateway-trust-v43{text-align:center;color:#747d77;font-size:8px;margin:13px auto 0;padding:0 20px} html[dir="rtl"] #gateway.gateway-v43 .door-leaf-v43{transform-origin:right center!important} html[dir="rtl"] #gateway.gateway-v43 .door-leaf-v43.opening{transform:perspective(1600px) rotateY(84deg)!important} html[dir="rtl"] .portal-copy-v43>button span{margin-right:0;margin-left:8px} @media(max-width:1000px){ .gateway-portals-v43{grid-template-columns:1fr 30px 1fr;gap:15px;padding:0 18px} .portal-v43{grid-template-columns:195px 1fr;gap:17px} .door-stage{height:325px} } @media(max-width:760px){ .gateway-portals-v43{display:block;max-width:550px} .gateway-axis-v43{display:none} .portal-v43{grid-template-columns:160px 1fr;gap:18px;margin:25px 0 36px} .door-stage{height:275px} .portal-copy-v43 h2{font-size:31px} .gateway-benefits-v43{grid-template-columns:1fr 1fr;row-gap:16px} .gateway-benefits-v43>div{border-right:0;padding:0 10px} } @media(max-width:470px){ .portal-v43{grid-template-columns:142px 1fr} .door-stage{height:240px} .portal-copy-v43 h2{font-size:28px} .gateway-benefits-v43{grid-template-columns:1fr} } /* Même avec "Réduire les animations" sur iOS, la porte garde une ouverture douce mais plus courte. */ @media(prefers-reduced-motion:reduce){ #gateway.gateway-v43 .door-leaf-v43{ transition:transform .72s ease,opacity .4s ease!important } #gateway.gateway-v43 .door-leaf-v43.opening{ transform:perspective(1200px) rotateY(-58deg)!important } html[dir="rtl"] #gateway.gateway-v43 .door-leaf-v43.opening{ transform:perspective(1200px) rotateY(58deg)!important } } /* ============================================================ V4.4 — RESPONSIVE PORTRAIT + PORTAIL ISOLÉ ============================================================ */ /* Le portail est maintenant un écran indépendant : le site ne peut plus apparaître derrière. */ html.gateway-locked, body.gateway-locked{ overflow:hidden!important; height:100%!important; overscroll-behavior:none!important; } #gateway.gateway-v43{ position:fixed!important; inset:0!important; z-index:20000!important; width:100%!important; height:100dvh!important; min-height:0!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch!important; isolation:isolate!important; background: radial-gradient(circle at 50% 62%,rgba(139,79,43,.085),transparent 30%), linear-gradient(180deg,#0b110f 0%,#090f0d 100%)!important; } /* Le fond du portail continue sous tout le contenu, même sur écran vertical très long. */ #gateway.gateway-v43::before{ content:""; position:fixed; inset:0; z-index:-2; background: radial-gradient(circle at 50% 62%,rgba(139,79,43,.085),transparent 30%), linear-gradient(180deg,#0b110f 0%,#090f0d 100%); pointer-events:none; } #gateway.gateway-v43 .gateway-final-sketch{ position:absolute!important; inset:54px 0 auto 0!important; width:100%!important; height:max(900px,calc(100dvh - 54px))!important; object-fit:cover!important; } /* Tablette portrait / écrans étroits : on abandonne la grille à 3 colonnes avant que les textes soient écrasés. */ @media (max-width:1180px){ #gateway.gateway-v43 .gateway-intro-v43{ max-width:850px; margin-top:22px; margin-bottom:28px; } #gateway.gateway-v43 .gateway-intro-v43 h1{ max-width:820px; font-size:clamp(44px,7.4vw,72px)!important; } #gateway.gateway-v43 .gateway-portals-v43{ display:flex!important; flex-direction:column!important; gap:34px!important; max-width:790px!important; margin:12px auto 0!important; padding:0 28px 10px!important; } #gateway.gateway-v43 .gateway-axis-v43{ display:none!important; } #gateway.gateway-v43 .portal-v43{ width:100%!important; display:grid!important; grid-template-columns:minmax(250px,310px) minmax(0,1fr)!important; gap:34px!important; align-items:center!important; } #gateway.gateway-v43 .portal-artisan-v43{ direction:rtl; } #gateway.gateway-v43 .portal-artisan-v43 > *{ direction:ltr; } html[dir="rtl"] #gateway.gateway-v43 .portal-artisan-v43{ direction:ltr; } html[dir="rtl"] #gateway.gateway-v43 .portal-artisan-v43 > *{ direction:rtl; } #gateway.gateway-v43 .door-stage{ width:100%!important; height:auto!important; aspect-ratio:0.67 / 1!important; max-height:440px!important; } #gateway.gateway-v43 .portal-copy-v43{ width:100%!important; min-width:0!important; padding:0 4px!important; } #gateway.gateway-v43 .portal-copy-v43 h2{ font-size:clamp(34px,5vw,46px)!important; white-space:normal!important; overflow-wrap:normal!important; word-break:normal!important; } #gateway.gateway-v43 .portal-copy-v43 p{ max-width:360px!important; font-size:12px!important; line-height:1.65!important; } #gateway.gateway-v43 .portal-kicker{ max-width:360px!important; line-height:1.45!important; } #gateway.gateway-v43 .gateway-benefits-v43{ max-width:790px!important; grid-template-columns:1fr 1fr!important; row-gap:18px!important; margin-top:34px!important; } #gateway.gateway-v43 .gateway-benefits-v43 > div{ border-right:0!important; padding:0 12px!important; } #gateway.gateway-v43 .gateway-trust-v43{ margin-bottom:28px!important; } } /* Portrait tablette : le texte reste vraiment lisible à côté de chaque porte. */ @media (max-width:900px){ #gateway.gateway-v43 .gateway-topline{ padding-inline:24px!important; } #gateway.gateway-v43 .gateway-portals-v43{ max-width:720px!important; } #gateway.gateway-v43 .portal-v43{ grid-template-columns:minmax(220px,270px) minmax(0,1fr)!important; gap:28px!important; } #gateway.gateway-v43 .portal-copy-v43 h2{ font-size:38px!important; } #gateway.gateway-v43 .portal-copy-v43 p{ font-size:11.5px!important; } } /* Téléphone : porte + texte restent côte à côte tant que c'est lisible. */ @media (max-width:620px){ #gateway.gateway-v43 .gateway-language-bar button span{ display:none!important; } #gateway.gateway-v43 .gateway-portals-v43{ padding-inline:16px!important; gap:30px!important; } #gateway.gateway-v43 .portal-v43{ grid-template-columns:132px minmax(0,1fr)!important; gap:18px!important; } #gateway.gateway-v43 .door-stage{ max-height:245px!important; } #gateway.gateway-v43 .portal-copy-v43 h2{ font-size:29px!important; line-height:1.02!important; } #gateway.gateway-v43 .portal-copy-v43 p{ font-size:10px!important; line-height:1.5!important; } #gateway.gateway-v43 .portal-kicker{ font-size:7px!important; letter-spacing:.14em!important; } #gateway.gateway-v43 .gateway-benefits-v43{ grid-template-columns:1fr!important; max-width:430px!important; } } /* Très petits téléphones : on passe enfin en colonne complète. */ @media (max-width:390px){ #gateway.gateway-v43 .portal-v43, #gateway.gateway-v43 .portal-artisan-v43{ display:flex!important; flex-direction:column!important; direction:ltr!important; align-items:stretch!important; } #gateway.gateway-v43 .door-stage{ width:175px!important; max-height:none!important; margin:0 auto!important; } #gateway.gateway-v43 .portal-copy-v43{ text-align:center!important; } #gateway.gateway-v43 .portal-copy-v43 > i{ margin-left:auto!important; margin-right:auto!important; } #gateway.gateway-v43 .portal-copy-v43 p, #gateway.gateway-v43 .portal-kicker{ margin-left:auto!important; margin-right:auto!important; } } /* Empêche les anciennes règles responsive V4.2/V4.3 de repasser le portail en grille desktop ou de réduire excessivement les portes. */ @media (orientation:portrait) and (max-width:1180px){ #gateway.gateway-v43 .gateway-portals-v43{ display:flex!important; } #gateway.gateway-v43 .gateway-axis-v43{ display:none!important; } } /* Fin visuelle propre : pas de grille verte ni d'autre section perceptible sous le portail. */ #gateway.gateway-v43 > :last-child{ margin-bottom:22px!important; } /* V4.4.1 — correction arrière-plan porte client */ #gateway.gateway-v43 .portal-client-v43 .door-frame{ overflow:hidden!important; background:#d9cda9!important; } #gateway.gateway-v43 .portal-client-v43 .door-reveal-image{ inset:-3%!important; width:106%!important; height:106%!important; object-fit:cover!important; object-position:50% 52%!important; filter:saturate(.82) contrast(1.02) brightness(1.02)!important; } #gateway.gateway-v43 .portal-client-v43 .client-light{ inset:0!important; background: linear-gradient(90deg,rgba(255,231,174,.26),rgba(255,244,217,.08) 55%,rgba(95,77,45,.10))!important; z-index:2!important; pointer-events:none!important; } /* masque de sécurité : rien d'extérieur au cadre ne peut apparaître pendant l'ouverture */ #gateway.gateway-v43 .portal-client-v43 .door-frame::after{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; box-shadow:inset 0 0 22px rgba(27,23,16,.34); } #gateway.gateway-v43 .portal-client-v43 .door-leaf-v43{ z-index:4!important; } /* ============================================================ V4.5 — PENSÉE / IDÉE DU JOUR ============================================================ */ .daily-thought{ position:relative;display:grid;grid-template-columns:42px 1fr;gap:12px; overflow:hidden;border:1px solid #d9d4ca;padding:17px 18px; background: linear-gradient(120deg,rgba(210,99,68,.045),transparent 32%), #faf8f3; } .daily-thought:after{ content:"";position:absolute;right:-18px;bottom:-29px;width:135px;height:90px; background:url("assets/atelier-pencil-sketch.svg") center/contain no-repeat; opacity:.18;pointer-events:none } .daily-thought-mark{ font:400 52px/.75 Georgia,serif;color:#cf6848;opacity:.72;transform:translateY(6px) } .daily-thought .kicker{font-size:7px!important;letter-spacing:.17em!important} .daily-thought blockquote{ margin:7px 0 6px;max-width:760px; font:400 19px/1.32 Georgia,serif;color:#17221c } .daily-thought small{font-size:7.5px;color:#868c87;letter-spacing:.03em} .daily-thought-artisan{margin:0 0 16px} .daily-thought-client{ max-width:960px;margin:20px auto 27px; border-color:rgba(31,43,37,.13); } .daily-thought-client blockquote{font-size:21px} html[dir="rtl"] .daily-thought{grid-template-columns:1fr 42px} html[dir="rtl"] .daily-thought-mark{order:2} @media(max-width:650px){ .daily-thought{grid-template-columns:30px 1fr;padding:14px} .daily-thought-mark{font-size:40px} .daily-thought blockquote,.daily-thought-client blockquote{font-size:17px} } /* V4.5.1 — identité orange + bleu nuit fournie */ .gateway-brand-v43>img,.sidebar-dp-mark img,.brand-image img{object-fit:contain!important} .gateway-brand-v43>img{filter:none!important} .sidebar-dp-mark{background:transparent!important} /* V4.5.2 — auteur/source des pensées quotidiennes */ .daily-thought small{ display:flex!important; flex-wrap:wrap; align-items:center; gap:7px 10px; } .daily-thought small b{ font-size:7.5px; color:#59645e; font-weight:800; letter-spacing:.04em; } .daily-thought small span{ font-size:7.5px; color:#8b918c; } .daily-thought small b:before{ content:"— "; color:#cf6848; } .daily-thought blockquote:empty:after, .daily-thought blockquote:not(:empty){ transition:opacity .18s ease; } /* V4.5.3 — correction définitive du logo : aucun carré/fond parasite */ .gateway-brand-v43>img, .sidebar-dp-mark img, .brand-image img, img[src*="devispilot-mark-orange-clean"]{ background:transparent!important; box-shadow:none!important; border:0!important; filter:none!important; object-fit:contain!important; } .gateway-brand-v43>img{ width:86px!important; height:86px!important; padding:0!important; } @media(max-width:700px){ .gateway-brand-v43>img{width:64px!important;height:64px!important} } /* ============================================================ V4.6 — LOGO SANS FOND + DIAGRAMME TRADUIT ============================================================ */ .gateway-brand-v43>img, .sidebar-dp-mark img, .loading-brand img, img[src*="devispilot-mark-orange-final"]{ background:none!important; background-color:transparent!important; border:0!important; outline:0!important; box-shadow:none!important; filter:none!important; mix-blend-mode:normal!important; } .gateway-brand-v43>img{ width:68px!important;height:68px!important; object-fit:contain!important;padding:0!important; } .sidebar-dp-mark img{padding:0!important} /* Le diagramme reste lisible même pour russe/arabe/chinois. */ .hero-orbit .orbit-label{ min-width:72px; white-space:nowrap; } html[dir="rtl"] .hero-orbit{direction:ltr} html[dir="rtl"] .hero-orbit .orbit-label{direction:rtl} /* Source réelle de citation */ .daily-thought small b{color:#394a42!important;font-weight:900!important} .daily-thought small span{color:#7e8782!important} /* V4.6.1 — éviter visuellement les mélanges lors des changements de langue */ html[lang="zh"] body, html[lang="ru"] body, html[lang="ar"] body{ font-variant-ligatures:none; } html[lang="zh"] .view, html[lang="ru"] .view, html[lang="ar"] .view{ text-rendering:optimizeLegibility; } /* ============================================================ V4.6.2 — VRAIES PORTES Cadre fixe, battant séparé, poignée physique, croquis indépendant. ============================================================ */ /* Le cadre appartient au mur et ne tourne jamais. */ #gateway.gateway-v43 .door-frame{ overflow:hidden!important; perspective:1800px!important; transform-style:preserve-3d!important; background:#171914!important; border:9px solid #242821!important; outline:1px solid #59594f!important; box-shadow: 0 30px 70px rgba(0,0,0,.48), inset 0 0 0 1px rgba(235,225,202,.08)!important; } #gateway.gateway-v43 .door-frame::before{ z-index:8!important; pointer-events:none!important; } /* Le battant : une vraie plaque indépendante du cadre. */ #gateway.gateway-v43 .real-door-leaf{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; padding:0!important; margin:0!important; border:0!important; overflow:hidden!important; cursor:pointer!important; z-index:6!important; transform-origin:0% 50%!important; transform:perspective(1800px) rotateY(0deg) translateZ(1px)!important; transform-style:preserve-3d!important; backface-visibility:hidden!important; -webkit-backface-visibility:hidden!important; will-change:transform!important; transition: transform 1.9s cubic-bezier(.18,.69,.08,1), box-shadow 1.55s ease, filter 1s ease!important; box-shadow: inset -10px 0 22px rgba(0,0,0,.13), 0 0 0 1px rgba(255,255,255,.04)!important; } /* Texture de surface distincte des éléments fonctionnels. */ #gateway.gateway-v43 .real-door-surface{ position:absolute;inset:0;z-index:0;pointer-events:none; } #gateway.gateway-v43 .client-door-surface{ background: radial-gradient(circle at 27% 14%,rgba(255,255,255,.24),transparent 22%), repeating-linear-gradient(26deg,rgba(93,82,62,.025) 0 1px,transparent 1px 7px), linear-gradient(120deg,#eee7da 0%,#ddd5c5 58%,#d2c8b8 100%); } #gateway.gateway-v43 .artisan-door-surface{ background: radial-gradient(circle at 30% 20%,rgba(255,255,255,.035),transparent 28%), repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 1px,transparent 1px 9px), linear-gradient(120deg,#242a25,#111613 74%,#0d120f); } /* Faux chants du battant : donne une épaisseur crédible pendant la rotation. */ #gateway.gateway-v43 .real-door-leaf::before{ content:""; position:absolute; top:0;bottom:0;right:0;width:8px; z-index:7;pointer-events:none; background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(23,20,16,.72)); transform:translateZ(-2px); } #gateway.gateway-v43 .artisan-leaf-v43::before{ background:linear-gradient(90deg,#394039,#080b09); } /* Ombre générale du battant, sans dessiner de deuxième cadre. */ #gateway.gateway-v43 .real-door-leaf::after{ content:""; position:absolute;inset:0;z-index:5;pointer-events:none; background:linear-gradient(90deg,rgba(255,255,255,.025),transparent 18%,transparent 78%,rgba(0,0,0,.17)); box-shadow:inset 0 0 12px rgba(0,0,0,.10); transition:background 1.5s ease,box-shadow 1.5s ease; } /* Numéro / croquis / ligne / tag sont réellement posés sur le battant. */ #gateway.gateway-v43 .real-door-number{ position:absolute;top:18px;left:20px;z-index:3; font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em;color:#b5663e; } #gateway.gateway-v43 .real-door-icon{ position:absolute;z-index:2;object-fit:contain;pointer-events:none;user-select:none; } #gateway.gateway-v43 .client-door-icon{ width:59%;height:49%;left:18%;top:24%; } #gateway.gateway-v43 .artisan-door-icon{ width:54%;height:47%;left:22%;top:25%; } #gateway.gateway-v43 .real-door-lower-line{ position:absolute;left:18px;right:18px;bottom:43px;z-index:2;height:1px; background:rgba(77,76,69,.34); } #gateway.gateway-v43 .artisan-leaf-v43 .real-door-lower-line{ background:rgba(232,228,213,.19); } #gateway.gateway-v43 .real-door-tag{ position:absolute;left:18px;bottom:19px;z-index:3; font:700 8px/1 system-ui,sans-serif;letter-spacing:.22em; color:#62675f; } #gateway.gateway-v43 .artisan-leaf-v43 .real-door-tag{color:#aaa99f} /* Poignée vraie : environ 1,02 m sur une porte de 2,04 m => 50 % de hauteur. Elle est sur le battant et pivote avec lui. */ #gateway.gateway-v43 .real-door-handle{ position:absolute; right:17px; top:49.5%; width:17px;height:17px; margin-top:-8px; z-index:10; border-radius:50%; background: radial-gradient(circle at 31% 28%,#f0c087 0 9%,#c7834f 24%,#8c4b2b 58%,#392316 100%); border:1px solid rgba(239,184,128,.72); box-shadow: 0 0 0 3px rgba(64,39,23,.16), 1px 3px 6px rgba(0,0,0,.48); pointer-events:none; } #gateway.gateway-v43 .real-door-handle i{ position:absolute;left:50%;top:50%; width:5px;height:5px;border-radius:50%; transform:translate(-50%,-50%); background:#4c2d1c; box-shadow:inset 0 1px rgba(255,255,255,.25); } /* Charnières fixes au cadre : elles ne pivotent pas avec le battant. */ #gateway.gateway-v43 .door-frame{ background-image: linear-gradient(#755b45,#2a231b), linear-gradient(#755b45,#2a231b), linear-gradient(#755b45,#2a231b); background-repeat:no-repeat; background-size:5px 34px,5px 34px,5px 34px; background-position:1px 14%,1px 49%,1px 84%; } /* Ouverture naturelle : pas de translation parasite, seulement rotation autour des charnières. */ #gateway.gateway-v43 .real-door-leaf:hover{ transform:perspective(1800px) rotateY(-2.5deg) translateZ(1px)!important; } #gateway.gateway-v43 .real-door-leaf.opening{ transform:perspective(1800px) rotateY(-79deg) translateZ(1px)!important; box-shadow: 28px 12px 38px rgba(0,0,0,.34), inset -5px 0 12px rgba(0,0,0,.13)!important; } #gateway.gateway-v43 .real-door-leaf.opening::after{ background:linear-gradient(90deg,rgba(255,255,255,.04),transparent 17%,rgba(0,0,0,.33)); box-shadow:inset -12px 0 20px rgba(0,0,0,.24); } /* Le décor derrière reste cadré dans l'ouverture murale. */ #gateway.gateway-v43 .door-reveal-image{ inset:0!important; width:100%!important;height:100%!important; object-fit:cover!important; z-index:1!important; } #gateway.gateway-v43 .door-light{z-index:2!important} /* Version arabe : charnières de l'autre côté uniquement si l'interface est RTL. */ html[dir="rtl"] #gateway.gateway-v43 .real-door-leaf{ transform-origin:100% 50%!important; } html[dir="rtl"] #gateway.gateway-v43 .real-door-handle{ right:auto;left:17px; } html[dir="rtl"] #gateway.gateway-v43 .real-door-leaf:hover{ transform:perspective(1800px) rotateY(2.5deg) translateZ(1px)!important; } html[dir="rtl"] #gateway.gateway-v43 .real-door-leaf.opening{ transform:perspective(1800px) rotateY(79deg) translateZ(1px)!important; } /* iPad/Safari en mode réduction d'animations : conserve une vraie mécanique. */ @media(prefers-reduced-motion:reduce){ #gateway.gateway-v43 .real-door-leaf{ transition:transform .95s cubic-bezier(.2,.65,.12,1),box-shadow .8s ease!important; } #gateway.gateway-v43 .real-door-leaf.opening{ transform:perspective(1500px) rotateY(-68deg) translateZ(1px)!important; } html[dir="rtl"] #gateway.gateway-v43 .real-door-leaf.opening{ transform:perspective(1500px) rotateY(68deg) translateZ(1px)!important; } } /* ============================================================ V4.6.3 — LANGUE DISCRÈTE + ZONE D'OUVERTURE RÉELLE ============================================================ */ /* La grosse barre de langue de l'app n'est plus nécessaire. */ .app-shell > .topbar .dp-lang-switch, .client-top > .dp-lang-switch{display:none!important} /* Module langue original dans la sidebar */ .sidebar-language{ position:relative; margin:10px 14px 8px; z-index:30; } .sidebar-language-trigger{ width:100%;display:grid;grid-template-columns:28px 1fr 18px;align-items:center; gap:9px;padding:10px 11px;border:1px solid rgba(226,236,230,.12); border-radius:12px;background:rgba(255,255,255,.025);color:#b7c0bb; text-align:left;cursor:pointer;transition:.18s ease } .sidebar-language-trigger:hover{background:rgba(255,255,255,.05);border-color:rgba(226,236,230,.18)} .language-globe{ width:28px;height:28px;border:1px solid rgba(205,216,210,.18);border-radius:50%; display:grid;place-items:center;font-size:14px;color:#d06b48 } .language-current small{display:block;font-size:6px;letter-spacing:.18em;color:#6f7c76;margin-bottom:3px} .language-current b{font-size:10px;letter-spacing:.12em;color:#d7ddd9} .language-chevron{font-size:13px;color:#76827c;transition:transform .18s ease} .sidebar-language-trigger[aria-expanded="true"] .language-chevron{transform:rotate(180deg)} .sidebar-language-panel{ position:absolute;left:0;right:0;top:calc(100% + 6px); display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:7px; background:#17241f;border:1px solid rgba(226,236,230,.14); box-shadow:0 18px 42px rgba(0,0,0,.28);border-radius:12px; opacity:0;visibility:hidden;transform:translateY(-4px);transition:.18s ease } .sidebar-language-panel.open{opacity:1;visibility:visible;transform:none} .sidebar-language-panel button{ border:0;background:transparent;color:#aeb8b2;padding:7px 8px;border-radius:7px; font-size:8px;text-align:left;cursor:pointer } .sidebar-language-panel button span{display:block;margin-top:2px;font-size:6px;color:#6f7d76} .sidebar-language-panel button:hover,.sidebar-language-panel button.active{background:#21332b;color:#fff} /* Client : mini sélecteur compact */ .client-mini-language{position:relative;margin-right:8px} .client-mini-language>button{ height:34px;min-width:54px;border:1px solid #d6d2c9;border-radius:999px; background:#f8f6f0;color:#25322c;font-size:8px;font-weight:800;display:flex; gap:7px;align-items:center;justify-content:center } .client-mini-language-panel{ position:absolute;right:0;top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px; width:170px;padding:6px;background:#fff;border:1px solid #d9d4cb;box-shadow:0 15px 35px rgba(0,0,0,.12); opacity:0;visibility:hidden;transform:translateY(-4px);transition:.16s ease;z-index:60 } .client-mini-language-panel.open{opacity:1;visibility:visible;transform:none} .client-mini-language-panel button{border:0;background:#f5f3ed;padding:7px 5px;font-size:8px} /* ------------------------------------------------------------ PORTES : la zone de rotation n'est plus limitée au cadre. ------------------------------------------------------------ */ /* Espace physique autour de la porte : même couleur que le fond du portail. */ #gateway.gateway-v43 .door-stage{ position:relative!important; overflow:visible!important; padding:0 36px!important; margin:0 -36px!important; background:transparent!important; isolation:visible!important; } /* Le cadre lui-même ne coupe plus le battant. */ #gateway.gateway-v43 .door-frame{ overflow:visible!important; position:relative!important; background:#171914!important; } /* Seule la vue DERRIÈRE la porte est masquée aux dimensions de l'ouverture. */ #gateway.gateway-v43 .door-reveal-clip{ position:absolute; inset:0; overflow:hidden; z-index:1; pointer-events:none; background:#161a15; } #gateway.gateway-v43 .portal-client-v43 .door-reveal-clip{background:#d8cdaa} #gateway.gateway-v43 .portal-artisan-v43 .door-reveal-clip{background:#2a1c12} #gateway.gateway-v43 .door-reveal-clip .door-reveal-image{ position:absolute!important;inset:-3%!important; width:106%!important;height:106%!important;object-fit:cover!important; } #gateway.gateway-v43 .door-reveal-clip .door-light{ position:absolute!important;inset:0!important;z-index:2!important; } /* Le cadre passe visuellement devant les bords de l'ouverture, sans couper la porte. */ #gateway.gateway-v43 .door-frame::before{ z-index:20!important; border:1px solid rgba(137,123,103,.34)!important; box-shadow: inset 0 0 0 8px #242821, inset 0 0 19px rgba(0,0,0,.34)!important; pointer-events:none!important; } /* Battant au-dessus de l'ouverture et libre de sortir du cadre. */ #gateway.gateway-v43 .real-door-leaf{ z-index:10!important; overflow:hidden!important; } /* La porte client ouvre vers l'extérieur gauche, l'artisan vers l'extérieur droit : plus naturel visuellement et aucune collision centrale. */ #gateway.gateway-v43 .client-leaf-v43{ transform-origin:0% 50%!important; } #gateway.gateway-v43 .client-leaf-v43.opening{ transform:perspective(1850px) rotateY(-76deg) translateZ(2px)!important; } #gateway.gateway-v43 .artisan-leaf-v43{ transform-origin:100% 50%!important; } #gateway.gateway-v43 .artisan-leaf-v43 .real-door-handle{ right:auto!important;left:17px!important; } #gateway.gateway-v43 .artisan-leaf-v43.opening{ transform:perspective(1850px) rotateY(76deg) translateZ(2px)!important; } /* Poignée moins proche du bord, plus réaliste */ #gateway.gateway-v43 .real-door-handle{ top:50%!important; right:22px!important; width:16px!important;height:16px!important; } /* Espace supplémentaire autour des portes sur desktop/tablette afin que le battant soit toujours visible */ @media(min-width:761px){ #gateway.gateway-v43 .portal-v43{ overflow:visible!important; } #gateway.gateway-v43 .gateway-portals-v43{ overflow:visible!important; } } @media(max-width:760px){ #gateway.gateway-v43 .door-stage{ padding:0 22px!important;margin:0 -22px!important; } } /* RTL : symétrie complète des deux ouvertures */ html[dir="rtl"] #gateway.gateway-v43 .client-leaf-v43{ transform-origin:100% 50%!important; } html[dir="rtl"] #gateway.gateway-v43 .client-leaf-v43 .real-door-handle{ right:auto!important;left:22px!important; } html[dir="rtl"] #gateway.gateway-v43 .client-leaf-v43.opening{ transform:perspective(1850px) rotateY(76deg) translateZ(2px)!important; } html[dir="rtl"] #gateway.gateway-v43 .artisan-leaf-v43{ transform-origin:0% 50%!important; } html[dir="rtl"] #gateway.gateway-v43 .artisan-leaf-v43 .real-door-handle{ left:auto!important;right:22px!important; } html[dir="rtl"] #gateway.gateway-v43 .artisan-leaf-v43.opening{ transform:perspective(1850px) rotateY(-76deg) translateZ(2px)!important; } /* ============================================================ V4.7 — MÉTIERS ÉTENDUS ============================================================ */ .extended-trade-card{border-color:#d6d0c5!important;background:linear-gradient(145deg,#fbfaf6,#f4f1e9)!important} .extended-trade-card .trade-card-head{display:flex;align-items:center;gap:9px;margin-bottom:12px} .extended-trade-card .trade-card-head>span{width:24px;height:24px;border:1px solid #d66b48;color:#d66b48;display:grid;place-items:center;border-radius:50%} .extended-trade-card h3{font:500 18px/1.1 Georgia,serif;margin:0} .extended-trade-card small{margin-left:auto;font-size:7px;color:#858b86} .extended-ops{display:flex;flex-wrap:wrap;gap:5px} .extended-ops button,.extended-operation-picker button{ border:1px solid #d9d3c9;background:#fff;color:#26312c;border-radius:999px; padding:7px 9px;font-size:7.5px;cursor:pointer } .extended-ops button:hover,.extended-operation-picker button:hover{border-color:#c86a49;color:#a65035} .extended-ops .more{background:#18241f;color:#fff;border-color:#18241f} .extended-operation-picker{display:flex;flex-wrap:wrap;gap:7px;padding:5px 0} .input-unit{display:flex;align-items:center;border:1px solid #d8d2c8;background:#fff} .input-unit input{border:0!important;flex:1} .input-unit span{padding:0 9px;font-size:8px;color:#727a75} /* ============================================================ V4.7.1 — ORBITE : MATIÈRES · TEMPS · MARGE ============================================================ */ /* Le centre ne contient que DP. */ .hero-orbit .orbit-center{ display:grid!important; place-items:center!important; text-align:center!important; line-height:1!important; font-weight:800!important; } .hero-orbit .orbit-center::before, .hero-orbit .orbit-center::after{ content:none!important; } /* Les 3 composantes sont clairement réparties autour du cercle. */ .hero-orbit .orbit-label{ position:absolute!important; z-index:5!important; min-width:max-content!important; white-space:nowrap!important; font-size:9px!important; line-height:1!important; letter-spacing:.12em!important; text-transform:uppercase!important; color:rgba(228,232,226,.72)!important; pointer-events:none!important; } /* Matières : haut-gauche */ .hero-orbit .orbit-label.one{ left:-8px!important; top:18%!important; right:auto!important; bottom:auto!important; transform:translateX(-42%)!important; } /* Temps : côté droit */ .hero-orbit .orbit-label.two{ right:-10px!important; top:48%!important; left:auto!important; bottom:auto!important; transform:translate(52%,-50%)!important; } /* Marge : bas-gauche */ .hero-orbit .orbit-label.three{ left:8%!important; bottom:5%!important; top:auto!important; right:auto!important; transform:translate(-42%,40%)!important; } /* Le point animé reste au-dessus de l'orbite mais sous les libellés. */ .hero-orbit .orbit-ring, .hero-orbit .orbit-ring i{ z-index:3!important; } /* Lisibilité tablette/mobile */ @media(max-width:900px){ .hero-orbit .orbit-label{ font-size:7px!important; letter-spacing:.10em!important; } .hero-orbit .orbit-label.one{ left:2%!important; transform:translateX(-28%)!important; } .hero-orbit .orbit-label.two{ right:2%!important; transform:translate(30%,-50%)!important; } .hero-orbit .orbit-label.three{ left:13%!important; transform:translate(-28%,32%)!important; } } /* RTL : on garde la géométrie du diagramme identique. */ html[dir="rtl"] .hero-orbit{ direction:ltr!important; } /* ============================================================ V4.7.2 — MÉTIERS DANS LE MENU PRINCIPAL ============================================================ */ #templates .extended-trade-card, #tradeCatalogGrid > .extended-trade-card{ display:none!important; } /* Tous les métiers, anciens comme nouveaux, utilisent exactement la même grille. */ #tradeCatalogGrid .trade-op.extended-operation{ background:#fff!important; border:1px solid #d8d3ca!important; } #tradeCatalogGrid .trade-op.extended-operation:hover{ border-color:#c96b49!important; background:#fbf8f2!important; } /* Le sélecteur peut contenir beaucoup de métiers sans prendre trop de place. */ #tradeCatalogSelect{ max-width:330px; min-width:240px; } @media(max-width:720px){ #tradeCatalogSelect{ width:100%; max-width:none; min-width:0; } } /* ============================================================ V4.7.3 — ORBITE TRIANGULAIRE + LOGO CENTRAL Matières / Temps / Marge = trois sommets lisibles. ============================================================ */ .hero-orbit{ position:relative!important; overflow:visible!important; } /* Centre : vrai symbole DevisPilot, sans texte DP */ .hero-orbit .orbit-center{ width:72px!important; height:72px!important; border-radius:50%!important; display:grid!important; place-items:center!important; background:#f5f1e7!important; border:1px solid rgba(244,239,226,.72)!important; box-shadow: 0 8px 24px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.45)!important; overflow:hidden!important; z-index:6!important; } .hero-orbit .orbit-center img{ width:48px!important; height:48px!important; object-fit:contain!important; display:block!important; background:transparent!important; border:0!important; box-shadow:none!important; filter:none!important; } /* Les trois notions deviennent les 3 sommets d'un triangle visuel. */ .hero-orbit .orbit-label{ position:absolute!important; z-index:8!important; min-width:max-content!important; white-space:nowrap!important; font-size:8.5px!important; line-height:1!important; letter-spacing:.13em!important; text-transform:uppercase!important; color:rgba(230,234,228,.76)!important; pointer-events:none!important; } /* Sommet haut : MATIÈRES */ .hero-orbit .orbit-label.one{ left:50%!important; top:-8px!important; right:auto!important; bottom:auto!important; transform:translateX(-50%)!important; text-align:center!important; } /* Sommet bas-droit : TEMPS */ .hero-orbit .orbit-label.two{ right:-20px!important; top:auto!important; bottom:15%!important; left:auto!important; transform:none!important; text-align:left!important; } /* Sommet bas-gauche : MARGE */ .hero-orbit .orbit-label.three{ left:-16px!important; bottom:15%!important; top:auto!important; right:auto!important; transform:none!important; text-align:right!important; } /* Petit repère triangulaire très discret pour donner la lecture en 3 axes. */ .hero-orbit::before{ content:""; position:absolute; left:50%; top:50%; width:74%; height:64%; transform:translate(-50%,-45%); clip-path:polygon(50% 0%,100% 100%,0% 100%); border:1px solid transparent; background: linear-gradient(rgba(225,229,223,.14),rgba(225,229,223,.14)) top center/1px 100% no-repeat; opacity:.38; pointer-events:none; z-index:1; } /* Conserver l'orbite et le point animé au-dessus du triangle discret. */ .hero-orbit .orbit-ring{ z-index:3!important; } .hero-orbit .orbit-ring i{ z-index:4!important; } /* Tablette / mobile : triangle plus compact pour éviter les chevauchements. */ @media(max-width:900px){ .hero-orbit .orbit-center{ width:64px!important; height:64px!important; } .hero-orbit .orbit-center img{ width:42px!important; height:42px!important; } .hero-orbit .orbit-label{ font-size:7px!important; letter-spacing:.10em!important; } .hero-orbit .orbit-label.one{ top:-5px!important; } .hero-orbit .orbit-label.two{ right:-8px!important; bottom:14%!important; } .hero-orbit .orbit-label.three{ left:-5px!important; bottom:14%!important; } } /* RTL : conserver la géométrie du schéma, mais traduire le texte. */ html[dir="rtl"] .hero-orbit{ direction:ltr!important; } html[dir="rtl"] .hero-orbit .orbit-label{ direction:rtl!important; } /* ============================================================ V4.7.4 — UNE SEULE BIBLIOTHÈQUE MÉTIER ============================================================ */ .legacy-template-engine{ display:none!important; } /* La zone visible ne contient JAMAIS de cartes "métier". Seulement des opérations. */ #tradeCatalogGrid > .extended-trade-card, #tradeCatalogGrid > .trade-card, #tradeCatalogGrid > article{ display:none!important; } .trade-browser{ overflow:visible!important; } .trade-browser-head{ align-items:flex-end!important; } #tradeCatalogSelect{ width:min(390px,100%)!important; max-width:390px!important; min-width:280px!important; background:#fff!important; border:1px solid #d6d1c8!important; border-radius:9px!important; padding:11px 36px 11px 12px!important; font-size:10px!important; color:#18231e!important; } #tradeCatalogSelect optgroup{ font-weight:800; color:#18231e; } #tradeCatalogSelect option{ font-weight:500; } /* Grille unique d'opérations */ #tradeCatalogGrid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:10px!important; } #tradeCatalogGrid .trade-op{ min-height:132px!important; } @media(max-width:1000px){ #tradeCatalogGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important} } @media(max-width:620px){ .trade-browser-head{display:block!important} #tradeCatalogSelect{ width:100%!important; max-width:none!important; min-width:0!important; margin-top:12px!important; } #tradeCatalogGrid{grid-template-columns:1fr!important} } /* ============================================================ V4.8 — ONBOARDING + GUIDAGE DU CHIFFRAGE ============================================================ */ .onboarding-modal{z-index:25000!important} .onboarding-card{ max-width:840px!important; padding:29px!important; background: linear-gradient(145deg,rgba(208,100,69,.045),transparent 33%), #fbfaf6!important; } .onboarding-brand{display:flex;align-items:center;gap:16px;margin-bottom:17px} .onboarding-brand img{width:58px;height:58px;object-fit:contain;background:transparent} .onboarding-brand h2{font:400 35px/1 Georgia,serif;margin:5px 0 0;color:#17221c} .onboarding-lead{font-size:13px;line-height:1.7;color:#505a54;max-width:760px} .onboarding-lead strong{color:#17221c} .onboarding-principles{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:20px 0} .onboarding-principles article{ display:grid;grid-template-columns:34px 1fr;gap:10px;padding:14px; border:1px solid #ddd7cc;background:#fff } .onboarding-principles article>b{font:800 9px/1 system-ui;color:#cf6847;padding-top:3px} .onboarding-principles strong{display:block;font-size:11px;color:#17221c;margin-bottom:5px} .onboarding-principles p{font-size:9px;line-height:1.55;color:#737b76;margin:0} .onboarding-callout{ border-left:3px solid #cf6847;background:#f2efe8;padding:12px 14px;margin-top:10px } .onboarding-callout>span{font-size:7px;font-weight:900;letter-spacing:.15em;color:#b45b40;text-transform:uppercase} .onboarding-callout p{font-size:9.5px;line-height:1.6;color:#505b55;margin:5px 0 0} .onboarding-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px} .onboarding-check{display:flex;justify-content:flex-end;align-items:center;gap:7px;margin-top:11px;font-size:8px;color:#828984} .sidebar-start-btn{ width:calc(100% - 28px);margin:5px 14px 3px;padding:9px 11px; border:1px solid rgba(230,237,232,.10);background:transparent;color:#8e9a94; display:flex;align-items:center;gap:10px;border-radius:10px;text-align:left;cursor:pointer } .sidebar-start-btn span{ width:24px;height:24px;border:1px solid rgba(207,104,71,.35);border-radius:50%; display:grid;place-items:center;color:#d16d4b;font-size:10px } .sidebar-start-btn b{font-size:8px;letter-spacing:.04em} /* Assistant de complétude */ .quote-guidance{ margin:12px 0 3px;padding:15px 16px; border:1px solid #e0c6b9;background: linear-gradient(110deg,rgba(213,101,68,.07),transparent 38%),#fbf8f2; } .quote-guidance-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px} .quote-guidance h3{font:400 21px/1.15 Georgia,serif;margin:5px 0;color:#18231e} .quote-guidance>p{font-size:9px;color:#727a75;line-height:1.5;margin:7px 0 12px} .guidance-status{ flex:0 0 auto;padding:6px 9px;border-radius:999px;background:#f0d8ce;color:#9d4e36; font-size:7px;font-weight:900;letter-spacing:.08em;text-transform:uppercase } .guidance-status.ready{background:#dfece4;color:#38624c} .guidance-questions{display:grid;grid-template-columns:1fr 1fr;gap:6px} .guidance-question{ display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:start; border:1px solid #e1ddd4;background:#fff;padding:9px 10px } .guidance-question b{font-size:7px;color:#c65f42;padding-top:2px} .guidance-question span{font-size:8.5px;line-height:1.45;color:#4e5953} .guidance-question.useful{background:#f8f7f2;border-style:dashed} .guidance-question.useful b{color:#71837a} .guidance-example{margin-top:10px;border-top:1px solid #e3ded5;padding-top:9px} .guidance-example span{font-size:6.5px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:#9a6651} .guidance-example p{font-size:8.5px;line-height:1.5;color:#626b66;margin:5px 0 0;font-style:italic} @media(max-width:700px){ .onboarding-card{padding:21px!important} .onboarding-principles{grid-template-columns:1fr} .onboarding-actions{display:grid} .guidance-questions{grid-template-columns:1fr} } .market-price-panel{display:flex;justify-content:space-between;gap:18px;align-items:center;margin:12px 0;padding:12px 14px;border:1px solid #d8d3ca;background:#f5f3ed}.market-price-panel.hidden{display:none}.market-price-panel.loading{opacity:.62}.market-price-panel b{display:block;font-size:11px;margin:3px 0}.market-price-panel p{margin:0;font-size:8px;line-height:1.5;color:#6f7772}.source-badge.market{background:#e2ece7!important;color:#36604d!important}.source-badge.market_review{background:#f4dfc6!important;color:#8c592e!important} /* ============================================================ V4.9.2 — PÉRIMÈTRE DE DEVIS EXPLICITE ============================================================ */ .quote-scope-summary{margin:12px 0 14px;padding:12px;border:1px solid #d9d4ca;background:#f8f6f0} .scope-summary-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:9px} .scope-summary-head span{font-size:6.5px;font-weight:900;letter-spacing:.16em;color:#8b6655} .scope-summary-head b{font-size:9px;color:#223029;text-align:right} .scope-chips{display:flex;flex-wrap:wrap;gap:5px} .scope-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border-radius:999px;border:1px solid #d9d5cc;font-size:7px;font-weight:800;color:#6d7671;background:#fff} .scope-chip:before{content:attr(data-state);font-size:8px} .scope-chip.included{background:#e8f0eb;border-color:#c8d9cf;color:#38604c} .scope-chip.excluded{background:#f1ece7;border-color:#dfd6ce;color:#9b7c6c;text-decoration:line-through;text-decoration-thickness:1px} .quote-scope-summary>small{display:block;margin-top:8px;font-size:6.5px;color:#8a918c} /* ============================================================ V4.9.5 — PORTES PORTRAIT RECONSTRUITES Isolation totale des anciennes règles .door-stage génériques. ============================================================ */ /* Base sûre du composant porte : le portail ne doit jamais hériter de la grille .door-stage historique. */ #gateway.gateway-v43 .portal-v43 > .door-stage{ display:block!important; grid-template-columns:none!important; grid-template-rows:none!important; place-items:unset!important; box-sizing:border-box!important; position:relative!important; min-width:0!important; min-height:0!important; padding:0!important; margin:0!important; max-width:none!important; max-height:none!important; overflow:visible!important; background:transparent!important; perspective:1500px!important; transform-style:preserve-3d!important; } #gateway.gateway-v43 .portal-v43 > .door-stage > .door-frame{ display:block!important; position:relative!important; box-sizing:border-box!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; margin:0!important; padding:0!important; overflow:visible!important; transform:none!important; border:7px solid #292c26!important; outline:1px solid rgba(168,157,137,.52)!important; background:#161915!important; box-shadow:0 22px 45px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.035)!important; } #gateway.gateway-v43 .door-reveal-clip{ position:absolute!important; inset:0!important; overflow:hidden!important; z-index:1!important; } #gateway.gateway-v43 .real-door-leaf{ display:block!important; position:absolute!important; inset:0!important; width:100%!important; height:100%!important; min-width:100%!important; min-height:100%!important; max-width:none!important; max-height:none!important; box-sizing:border-box!important; border-radius:0!important; z-index:10!important; transform:perspective(1500px) rotateY(0deg) translateZ(1px)!important; transform-style:preserve-3d!important; -webkit-transform-style:preserve-3d!important; backface-visibility:hidden!important; -webkit-backface-visibility:hidden!important; } /* PORTRAIT téléphone/tablette : composition dédiée, indépendante de toutes les règles historiques. */ @media (orientation:portrait) and (max-width:760px){ #gateway.gateway-v43 .gateway-portals-v43{ display:flex!important; flex-direction:column!important; align-items:stretch!important; width:100%!important; max-width:520px!important; padding:0 18px 24px!important; margin:18px auto 0!important; gap:48px!important; overflow:visible!important; } #gateway.gateway-v43 .gateway-axis-v43{display:none!important} #gateway.gateway-v43 .portal-v43, #gateway.gateway-v43 .portal-artisan-v43{ display:grid!important; grid-template-columns:clamp(136px,38vw,174px) minmax(0,1fr)!important; grid-template-rows:auto!important; align-items:center!important; width:100%!important; min-width:0!important; gap:22px!important; margin:0!important; padding:0!important; direction:ltr!important; overflow:visible!important; } /* Client : porte à gauche, texte à droite. */ #gateway.gateway-v43 .portal-client-v43 > .door-stage{ grid-column:1!important; grid-row:1!important; justify-self:start!important; } #gateway.gateway-v43 .portal-client-v43 > .portal-copy-v43{ grid-column:2!important; grid-row:1!important; } /* Artisan : texte à gauche, porte à droite. */ #gateway.gateway-v43 .portal-artisan-v43{ grid-template-columns:minmax(0,1fr) clamp(136px,38vw,174px)!important; } #gateway.gateway-v43 .portal-artisan-v43 > .portal-copy-v43{ grid-column:1!important; grid-row:1!important; direction:ltr!important; } #gateway.gateway-v43 .portal-artisan-v43 > .door-stage{ grid-column:2!important; grid-row:1!important; justify-self:end!important; direction:ltr!important; } /* Gabarit réel de porte : ~62 cm de large pour 100 cm de haut visuellement. */ #gateway.gateway-v43 .portal-v43 > .door-stage{ width:clamp(136px,38vw,174px)!important; height:auto!important; aspect-ratio:0.62 / 1!important; max-height:none!important; min-height:219px!important; padding:0!important; margin:0!important; overflow:visible!important; perspective:1300px!important; } #gateway.gateway-v43 .portal-v43 > .door-stage > .door-frame{ width:100%!important; height:100%!important; aspect-ratio:auto!important; } /* Visuel de porte lisible à petite taille. */ #gateway.gateway-v43 .real-door-number{ top:12px!important;left:12px!important;font-size:9px!important; } #gateway.gateway-v43 .client-door-icon{ width:66%!important;height:52%!important;left:14%!important;top:23%!important; } #gateway.gateway-v43 .artisan-door-icon{ width:61%!important;height:51%!important;left:18%!important;top:24%!important; } #gateway.gateway-v43 .real-door-lower-line{ left:12px!important;right:12px!important;bottom:31px!important; } #gateway.gateway-v43 .real-door-tag{ left:12px!important;bottom:12px!important;font-size:6.5px!important; } #gateway.gateway-v43 .real-door-handle{ top:51%!important; width:14px!important;height:14px!important; margin-top:-7px!important; right:13px!important; } #gateway.gateway-v43 .artisan-leaf-v43 .real-door-handle{ right:auto!important;left:13px!important; } /* Copies : lisibles sans repousser ou comprimer la porte. */ #gateway.gateway-v43 .portal-copy-v43{ min-width:0!important; width:auto!important; padding:0!important; text-align:left!important; } #gateway.gateway-v43 .portal-copy-v43 h2{ font-size:clamp(28px,8vw,36px)!important; line-height:1!important; margin:9px 0 10px!important; } #gateway.gateway-v43 .portal-copy-v43 p{ display:block!important; max-width:230px!important; font-size:10px!important; line-height:1.55!important; } #gateway.gateway-v43 .portal-kicker{ font-size:6.5px!important; line-height:1.45!important; letter-spacing:.14em!important; } /* Ouverture mobile : on garde encore une vraie largeur visible jusqu'à la transition. */ #gateway.gateway-v43 .client-leaf-v43{ transform-origin:0% 50%!important; transition:transform 1.55s cubic-bezier(.18,.72,.12,1),box-shadow 1.25s ease!important; } #gateway.gateway-v43 .client-leaf-v43.opening{ transform:perspective(1300px) rotateY(-63deg) translateZ(2px)!important; box-shadow:22px 10px 30px rgba(0,0,0,.32)!important; } #gateway.gateway-v43 .artisan-leaf-v43{ transform-origin:100% 50%!important; transition:transform 1.55s cubic-bezier(.18,.72,.12,1),box-shadow 1.25s ease!important; } #gateway.gateway-v43 .artisan-leaf-v43.opening{ transform:perspective(1300px) rotateY(63deg) translateZ(2px)!important; box-shadow:-22px 10px 30px rgba(0,0,0,.32)!important; } /* Le cadre reste totalement immobile pendant la rotation. */ #gateway.gateway-v43 .door-frame::before{ inset:-7px!important; border:1px solid rgba(158,149,130,.45)!important; box-shadow:inset 0 0 0 6px #292c26,inset 0 0 14px rgba(0,0,0,.32)!important; } /* Neutralisation de l'ancienne règle <390px qui empilait et redimensionnait la porte. */ #gateway.gateway-v43 .portal-v43, #gateway.gateway-v43 .portal-artisan-v43{ flex-direction:initial!important; align-items:center!important; } } /* Très petit téléphone : on conserve une porte complète, jamais une tranche. */ @media (orientation:portrait) and (max-width:360px){ #gateway.gateway-v43 .portal-v43, #gateway.gateway-v43 .portal-artisan-v43{ grid-template-columns:122px minmax(0,1fr)!important; gap:15px!important; } #gateway.gateway-v43 .portal-artisan-v43{ grid-template-columns:minmax(0,1fr) 122px!important; } #gateway.gateway-v43 .portal-v43 > .door-stage{ width:122px!important; min-width:122px!important; min-height:197px!important; } #gateway.gateway-v43 .portal-copy-v43 h2{font-size:27px!important} #gateway.gateway-v43 .portal-copy-v43 p{font-size:9px!important} } /* RTL : même gabarit ; seule la lecture du texte s'inverse. */ @media (orientation:portrait) and (max-width:760px){ html[dir="rtl"] #gateway.gateway-v43 .portal-copy-v43{direction:rtl!important;text-align:right!important} html[dir="rtl"] #gateway.gateway-v43 .client-leaf-v43{transform-origin:100% 50%!important} html[dir="rtl"] #gateway.gateway-v43 .client-leaf-v43 .real-door-handle{right:auto!important;left:13px!important} html[dir="rtl"] #gateway.gateway-v43 .client-leaf-v43.opening{transform:perspective(1300px) rotateY(63deg) translateZ(2px)!important} html[dir="rtl"] #gateway.gateway-v43 .artisan-leaf-v43{transform-origin:0% 50%!important} html[dir="rtl"] #gateway.gateway-v43 .artisan-leaf-v43 .real-door-handle{left:auto!important;right:13px!important} html[dir="rtl"] #gateway.gateway-v43 .artisan-leaf-v43.opening{transform:perspective(1300px) rotateY(-63deg) translateZ(2px)!important} } /* ============================================================ V4.9.6 — PORTES : pictogrammes entiers, centrés, non rognés ============================================================ */ .portal-door .door-leaf, .portal-door .door-panel, .portal-door .door-face, .portal-card .door-leaf, .portal-card .door-panel, .portal-card .door-face { overflow: hidden; } /* The drawing gets its own safe zone inside the leaf. Never use cover: the whole symbol must remain visible. */ .portal-door .door-art, .portal-door .door-illustration, .portal-door .door-symbol, .portal-door .door-icon, .portal-card .door-art, .portal-card .door-illustration, .portal-card .door-symbol, .portal-card .door-icon { position: absolute !important; left: 50% !important; top: 50% !important; width: 68% !important; height: 58% !important; max-width: 68% !important; max-height: 58% !important; transform: translate(-50%, -50%) !important; transform-origin: center center !important; object-fit: contain !important; object-position: center center !important; background-position: center center !important; background-size: contain !important; background-repeat: no-repeat !important; overflow: visible !important; box-sizing: border-box !important; } /* Images/SVGs nested in the artwork wrapper */ .portal-door .door-art img, .portal-door .door-art svg, .portal-door .door-illustration img, .portal-door .door-illustration svg, .portal-door .door-symbol img, .portal-door .door-symbol svg, .portal-door .door-icon img, .portal-door .door-icon svg, .portal-card .door-art img, .portal-card .door-art svg, .portal-card .door-illustration img, .portal-card .door-illustration svg, .portal-card .door-symbol img, .portal-card .door-symbol svg, .portal-card .door-icon img, .portal-card .door-icon svg { display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; object-position: center !important; overflow: visible !important; } /* If the artwork itself is a direct image on the leaf */ .portal-door .door-leaf > img:not(.door-texture), .portal-door .door-panel > img:not(.door-texture), .portal-card .door-leaf > img:not(.door-texture), .portal-card .door-panel > img:not(.door-texture) { object-fit: contain !important; object-position: center center !important; } /* Portrait phones: slightly smaller safe-zone to guarantee that neither the house/person nor crossed tools touch the leaf edges while opening. */ @media (max-width: 600px) and (orientation: portrait) { .portal-door .door-art, .portal-door .door-illustration, .portal-door .door-symbol, .portal-door .door-icon, .portal-card .door-art, .portal-card .door-illustration, .portal-card .door-symbol, .portal-card .door-icon { width: 60% !important; height: 50% !important; max-width: 60% !important; max-height: 50% !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; } } /* ============================================================ V5.0.1 — PORTES POLIES pictogramme complet + battant plus épais + mouvement plus fluide ============================================================ */ /* pictogrammes : petits, entiers, centrés, légèrement au-dessus du milieu */ #gateway.gateway-v43 .real-door-icon{ position:absolute!important; z-index:4!important; display:block!important; left:50%!important; top:43%!important; width:46%!important; height:38%!important; max-width:46%!important; max-height:38%!important; transform:translate(-50%,-50%)!important; object-fit:contain!important; object-position:center center!important; opacity:.92!important; background:transparent!important; filter:none!important; pointer-events:none!important; } #gateway.gateway-v43 .client-door-icon, #gateway.gateway-v43 .artisan-door-icon{ left:50%!important; top:43%!important; width:46%!important; height:38%!important; max-width:46%!important; max-height:38%!important; } /* battant plus dense : on perçoit réellement son épaisseur au pivot */ #gateway.gateway-v43 .real-door-leaf{ transform-style:preserve-3d!important; transition: transform 1.72s cubic-bezier(.18,.74,.10,1), box-shadow 1.45s cubic-bezier(.2,.7,.1,1), filter 1.1s ease!important; will-change:transform!important; } #gateway.gateway-v43 .real-door-leaf::before{ content:""!important; position:absolute!important; top:0!important; bottom:0!important; right:-10px!important; width:11px!important; z-index:12!important; pointer-events:none!important; background:linear-gradient(90deg, rgba(255,255,255,.14) 0%, rgba(103,92,75,.38) 28%, rgba(42,37,30,.78) 72%, rgba(9,12,10,.96) 100%)!important; border-left:1px solid rgba(255,255,255,.09)!important; transform:rotateY(90deg)!important; transform-origin:left center!important; backface-visibility:hidden!important; } #gateway.gateway-v43 .artisan-leaf-v43::before{ background:linear-gradient(90deg, rgba(194,199,191,.10) 0%, rgba(56,63,58,.58) 30%, rgba(12,16,14,.96) 100%)!important; } /* très légère ombre de contact côté charnière */ #gateway.gateway-v43 .real-door-leaf::after{ content:""!important; position:absolute!important; inset:0!important; z-index:5!important; pointer-events:none!important; background:linear-gradient(90deg,rgba(0,0,0,.06),transparent 18%,transparent 77%,rgba(0,0,0,.18))!important; box-shadow:inset -5px 0 10px rgba(0,0,0,.13)!important; transition:background 1.4s ease,box-shadow 1.4s ease!important; } /* ouverture naturelle : départ doux, accélération, freinage long */ #gateway.gateway-v43 .client-leaf-v43.opening{ transform:perspective(1550px) rotateY(-67deg) translateZ(3px)!important; box-shadow:27px 14px 38px rgba(0,0,0,.34)!important; } #gateway.gateway-v43 .artisan-leaf-v43.opening{ transform:perspective(1550px) rotateY(67deg) translateZ(3px)!important; box-shadow:-27px 14px 38px rgba(0,0,0,.34)!important; } /* scènes arrière : cadrées comme une pièce derrière le dormant, pas comme une deuxième porte */ #gateway.gateway-v43 .door-reveal-clip{ inset:0!important; overflow:hidden!important; background:#141915!important; } #gateway.gateway-v43 .door-reveal-image{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; object-fit:cover!important; object-position:center center!important; transform:scale(1.025)!important; filter:saturate(.82) contrast(.96) brightness(.88)!important; } #gateway.gateway-v43 .portal-client-v43 .door-reveal-image{ filter:saturate(.78) contrast(.94) brightness(.93)!important; } /* portrait : encore plus de respiration autour du pictogramme */ @media (orientation:portrait) and (max-width:760px){ #gateway.gateway-v43 .real-door-icon, #gateway.gateway-v43 .client-door-icon, #gateway.gateway-v43 .artisan-door-icon{ left:50%!important; top:42%!important; width:42%!important; height:34%!important; max-width:42%!important; max-height:34%!important; transform:translate(-50%,-50%)!important; } #gateway.gateway-v43 .real-door-handle{ top:52%!important; } #gateway.gateway-v43 .client-leaf-v43, #gateway.gateway-v43 .artisan-leaf-v43{ transition: transform 1.78s cubic-bezier(.17,.72,.08,1), box-shadow 1.48s cubic-bezier(.2,.7,.1,1)!important; } #gateway.gateway-v43 .client-leaf-v43.opening{ transform:perspective(1450px) rotateY(-64deg) translateZ(3px)!important; } #gateway.gateway-v43 .artisan-leaf-v43.opening{ transform:perspective(1450px) rotateY(64deg) translateZ(3px)!important; } } /* RTL : conservation exacte de l'épaisseur et inversion physique de l'ouverture */ html[dir="rtl"] #gateway.gateway-v43 .client-leaf-v43.opening{ transform:perspective(1550px) rotateY(67deg) translateZ(3px)!important; } html[dir="rtl"] #gateway.gateway-v43 .artisan-leaf-v43.opening{ transform:perspective(1550px) rotateY(-67deg) translateZ(3px)!important; } @media (orientation:portrait) and (max-width:760px){ html[dir="rtl"] #gateway.gateway-v43 .client-leaf-v43.opening{ transform:perspective(1450px) rotateY(64deg) translateZ(3px)!important; } html[dir="rtl"] #gateway.gateway-v43 .artisan-leaf-v43.opening{ transform:perspective(1450px) rotateY(-64deg) translateZ(3px)!important; } } /* ============================================================ V5.0.2 — FRAIS DE CHANTIER ============================================================ */ .site-extras-panel{ margin:14px 0 4px; padding:14px; border:1px solid #ddd6ca; background:linear-gradient(135deg,rgba(200,105,72,.055),transparent 45%),#f9f7f1; } .site-extras-head{ display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:11px } .site-extras-head h3{font:400 20px/1.1 Georgia,serif;margin:4px 0 5px;color:#17221c} .site-extras-head p{font-size:8.5px;line-height:1.45;color:#747c77;margin:0;max-width:430px} .site-extras-badge{ flex:0 0 auto;border:1px solid #ddc6bb;color:#a75b42;background:#f7ebe4; padding:5px 8px;border-radius:999px;font-size:6.5px;font-weight:900;letter-spacing:.11em } .site-extras-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px} .site-extra-card{ border:1px solid #dfdad1;background:#fff;padding:10px 11px; display:flex;align-items:center;justify-content:space-between;gap:10px; transition:.18s ease } .site-extra-card.active{border-color:#88a595;background:#f0f6f2} .site-extra-card>div:first-child b{display:block;font-size:9px;color:#1b2721;margin-bottom:3px} .site-extra-card>div:first-child small{font-size:7px;color:#818983} .site-extra-controls{display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end} .site-extra-controls input{ width:66px;padding:7px 7px;border:1px solid #d8d3ca;background:#fbfaf7; border-radius:7px;font-size:8px;color:#1b2721 } .site-extra-controls span{font-size:7px;color:#737c76} .site-extra-controls button{ border:1px solid #24342c;background:#17251f;color:#fff;border-radius:8px; padding:7px 9px;font-size:7px;font-weight:800;cursor:pointer } .site-extra-controls button.active{background:#d9e9df;color:#2f5b45;border-color:#87a894} .site-extras-note{display:block;margin-top:9px;font-size:7px;color:#8a908c} @media(max-width:760px){ .site-extras-grid{grid-template-columns:1fr} .site-extra-card{align-items:flex-start;flex-direction:column} .site-extra-controls{justify-content:flex-start} } /* ============================================================ V5.0.3 — PORTES FINALISÉES ============================================================ */ /* Iconography: exact requested minimalist symbols. Smaller, full, slightly above center, never cropped. */ #gateway.gateway-v43 .real-door-icon, #gateway.gateway-v43 .client-door-icon, #gateway.gateway-v43 .artisan-door-icon{ position:absolute!important; left:50%!important; top:41%!important; width:40%!important; height:31%!important; max-width:40%!important; max-height:31%!important; transform:translate(-50%,-50%)!important; transform-origin:center center!important; display:block!important; object-fit:contain!important; object-position:center center!important; overflow:visible!important; background:transparent!important; filter:none!important; opacity:.95!important; z-index:8!important; pointer-events:none!important; } /* Door body: perceptibly thicker without looking heavy. */ #gateway.gateway-v43 .real-door-leaf{ transform-style:preserve-3d!important; backface-visibility:hidden!important; will-change:transform,box-shadow!important; transition: transform 1.85s cubic-bezier(.18,.72,.08,1), box-shadow 1.55s cubic-bezier(.19,.68,.09,1), filter 1.35s ease!important; } /* Physical edge / thickness. */ #gateway.gateway-v43 .real-door-leaf::before{ content:""!important; position:absolute!important; top:1px!important; bottom:1px!important; width:12px!important; right:-11px!important; background:linear-gradient(90deg, rgba(255,255,255,.16) 0%, rgba(123,108,88,.44) 24%, rgba(50,43,34,.82) 66%, rgba(11,13,11,.96) 100%)!important; border-left:1px solid rgba(255,255,255,.10)!important; transform:rotateY(90deg)!important; transform-origin:left center!important; backface-visibility:hidden!important; z-index:14!important; pointer-events:none!important; } #gateway.gateway-v43 .artisan-leaf-v43::before{ background:linear-gradient(90deg, rgba(194,201,194,.13), rgba(72,78,73,.56) 35%, rgba(12,16,14,.98) 100%)!important; } /* Very subtle face shading as the leaf rotates. */ #gateway.gateway-v43 .real-door-leaf::after{ content:""!important; position:absolute!important; inset:0!important; z-index:7!important; pointer-events:none!important; background:linear-gradient(90deg, rgba(0,0,0,.035), transparent 19%, transparent 77%, rgba(0,0,0,.13))!important; box-shadow:inset -4px 0 9px rgba(0,0,0,.11)!important; } /* Reveal must read as a room behind the frame, never a second door. */ #gateway.gateway-v43 .door-reveal-clip{ position:absolute!important; inset:2px!important; overflow:hidden!important; z-index:1!important; border-radius:0!important; background:#161c18!important; } #gateway.gateway-v43 .door-reveal-image{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; object-fit:cover!important; object-position:center center!important; transform:scale(1.035)!important; transform-origin:center!important; filter:saturate(.84) contrast(.97) brightness(.90)!important; } #gateway.gateway-v43 .portal-client-v43 .door-reveal-image{ filter:saturate(.79) contrast(.95) brightness(.94)!important; } /* Natural opening. Frame stays fixed, only the leaf rotates. */ #gateway.gateway-v43 .client-leaf-v43{ transform-origin:0% 50%!important; } #gateway.gateway-v43 .artisan-leaf-v43{ transform-origin:100% 50%!important; } #gateway.gateway-v43 .client-leaf-v43.opening{ transform:perspective(1650px) rotateY(-66deg) translateZ(4px)!important; box-shadow:29px 14px 40px rgba(0,0,0,.34)!important; } #gateway.gateway-v43 .artisan-leaf-v43.opening{ transform:perspective(1650px) rotateY(66deg) translateZ(4px)!important; box-shadow:-29px 14px 40px rgba(0,0,0,.34)!important; } /* Keep handles visually plausible and separate from artwork. */ #gateway.gateway-v43 .real-door-handle{ top:52%!important; z-index:12!important; } /* Mobile portrait: preserve full door + artwork and shorten angle slightly. */ @media (orientation:portrait) and (max-width:760px){ #gateway.gateway-v43 .real-door-icon, #gateway.gateway-v43 .client-door-icon, #gateway.gateway-v43 .artisan-door-icon{ left:50%!important; top:40%!important; width:38%!important; height:29%!important; max-width:38%!important; max-height:29%!important; transform:translate(-50%,-50%)!important; } #gateway.gateway-v43 .real-door-leaf{ transition: transform 1.9s cubic-bezier(.17,.72,.07,1), box-shadow 1.6s cubic-bezier(.19,.68,.09,1)!important; } #gateway.gateway-v43 .client-leaf-v43.opening{ transform:perspective(1500px) rotateY(-62deg) translateZ(4px)!important; } #gateway.gateway-v43 .artisan-leaf-v43.opening{ transform:perspective(1500px) rotateY(62deg) translateZ(4px)!important; } } /* RTL physical inversion. */ html[dir="rtl"] #gateway.gateway-v43 .client-leaf-v43.opening{ transform:perspective(1650px) rotateY(66deg) translateZ(4px)!important; } html[dir="rtl"] #gateway.gateway-v43 .artisan-leaf-v43.opening{ transform:perspective(1650px) rotateY(-66deg) translateZ(4px)!important; } @media (orientation:portrait) and (max-width:760px){ html[dir="rtl"] #gateway.gateway-v43 .client-leaf-v43.opening{ transform:perspective(1500px) rotateY(62deg) translateZ(4px)!important; } html[dir="rtl"] #gateway.gateway-v43 .artisan-leaf-v43.opening{ transform:perspective(1500px) rotateY(-62deg) translateZ(4px)!important; } } /* ============================================================ V5.0.5 — PICTOGRAMMES PORTES NETS / PETITS / NON ROGNÉS Dernière règle volontairement très spécifique. ============================================================ */ /* Neutralisation totale des anciennes tailles */ html body #gateway.gateway-v43 .real-door-leaf > img.real-door-icon.client-door-icon, html body #gateway.gateway-v43 .real-door-leaf > img.real-door-icon.artisan-door-icon{ position:absolute!important; display:block!important; box-sizing:border-box!important; left:50%!important; top:34%!important; width:28%!important; height:21%!important; min-width:0!important; min-height:0!important; max-width:28%!important; max-height:21%!important; margin:0!important; padding:0!important; transform:translate(-50%,-50%)!important; transform-origin:center center!important; object-fit:contain!important; object-position:center center!important; overflow:visible!important; clip:auto!important; clip-path:none!important; border:0!important; border-radius:0!important; background:none!important; filter:none!important; opacity:.96!important; z-index:20!important; pointer-events:none!important; } /* Client a tiny bit wider because the house/person is horizontal */ html body #gateway.gateway-v43 .real-door-leaf > img.real-door-icon.client-door-icon{ width:30%!important; max-width:30%!important; } /* Keep the handle clearly below and away from the icon */ html body #gateway.gateway-v43 .real-door-handle{ top:52%!important; z-index:22!important; } /* Portrait: same visual hierarchy, no enlargement. */ @media (orientation:portrait) and (max-width:760px){ html body #gateway.gateway-v43 .real-door-leaf > img.real-door-icon.client-door-icon{ left:50%!important; top:34%!important; width:29%!important; height:20%!important; max-width:29%!important; max-height:20%!important; transform:translate(-50%,-50%)!important; } html body #gateway.gateway-v43 .real-door-leaf > img.real-door-icon.artisan-door-icon{ left:50%!important; top:34%!important; width:27%!important; height:20%!important; max-width:27%!important; max-height:20%!important; transform:translate(-50%,-50%)!important; } } /* Ensure front face does not clip the SVG artwork itself. */ html body #gateway.gateway-v43 .real-door-leaf{ overflow:visible!important; } html body #gateway.gateway-v43 .real-door-leaf .door-surface, html body #gateway.gateway-v43 .real-door-leaf .door-face{ overflow:hidden!important; } /* ============================================================ V5.0.6 — SCÈNES DERRIÈRE LES PORTES : PROFONDEUR ============================================================ */ html body #gateway.gateway-v43 .door-reveal-clip{ inset:3px!important; overflow:hidden!important; background:#101511!important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), inset 0 0 28px rgba(0,0,0,.48)!important; } html body #gateway.gateway-v43 .door-reveal-image{ width:100%!important; height:100%!important; inset:0!important; object-fit:cover!important; object-position:center center!important; transform:scale(1.085) translateY(1.8%)!important; transform-origin:center center!important; transition: transform 1.8s cubic-bezier(.18,.72,.08,1), filter 1.5s ease, opacity 1.2s ease!important; filter:saturate(.76) contrast(.97) brightness(.74)!important; opacity:.9!important; } html body #gateway.gateway-v43 .portal-client-v43 .door-reveal-image{ filter:saturate(.76) contrast(.95) brightness(.84)!important; } /* Warm light appears from inside the room rather than as a flat overlay. */ html body #gateway.gateway-v43 .door-light{ opacity:.32!important; transition:opacity 1.5s ease!important; mix-blend-mode:screen!important; } html body #gateway.gateway-v43 .portal-artisan-v43 .door-light{ background:radial-gradient(circle at 72% 18%,rgba(240,171,91,.26),transparent 44%)!important; } html body #gateway.gateway-v43 .portal-client-v43 .door-light{ background:radial-gradient(circle at 70% 18%,rgba(255,237,191,.30),transparent 48%)!important; } /* :has is supported by current Safari/iOS: when the leaf opens, the room comes gently forward and lights up. */ html body #gateway.gateway-v43 .door-frame:has(.real-door-leaf.opening) .door-reveal-image{ transform:scale(1.015) translateY(0)!important; filter:saturate(.94) contrast(1.01) brightness(.96)!important; opacity:1!important; } html body #gateway.gateway-v43 .portal-client-v43 .door-frame:has(.real-door-leaf.opening) .door-reveal-image{ filter:saturate(.88) contrast(.99) brightness(1.01)!important; } html body #gateway.gateway-v43 .door-frame:has(.real-door-leaf.opening) .door-light{ opacity:.72!important; } /* A dark jamb gives the impression of actual wall depth behind the leaf. */ html body #gateway.gateway-v43 .door-reveal-clip::before{ content:""!important; position:absolute!important; inset:0!important; z-index:3!important; pointer-events:none!important; box-shadow: inset 13px 0 18px rgba(0,0,0,.30), inset -13px 0 18px rgba(0,0,0,.30), inset 0 13px 18px rgba(0,0,0,.20)!important; } html body #gateway.gateway-v43 .door-reveal-clip::after{ content:""!important; position:absolute!important; left:0!important;right:0!important;bottom:0!important; height:18%!important; z-index:3!important; pointer-events:none!important; background:linear-gradient(to top,rgba(0,0,0,.30),transparent)!important; } /* Mobile: frame opening stays readable, never over-dark. */ @media (orientation:portrait) and (max-width:760px){ html body #gateway.gateway-v43 .door-reveal-image{ object-position:center center!important; transform:scale(1.07) translateY(1%)!important; } html body #gateway.gateway-v43 .door-frame:has(.real-door-leaf.opening) .door-reveal-image{ transform:scale(1.01) translateY(0)!important; } } /* V5.0.7 — pictogrammes de porte corrigés */ html body #gateway.gateway-v43 .real-door-icon{ position:absolute!important; left:50%!important; top:31%!important; width:37%!important; height:auto!important; max-width:none!important; max-height:none!important; transform:translate(-50%,-50%)!important; object-fit:contain!important; object-position:center!important; z-index:15!important; filter:none!important; opacity:1!important; clip-path:none!important; } html body #gateway.gateway-v43 .real-door-leaf{ overflow:visible!important; box-shadow: inset 0 0 0 3px rgba(90,88,76,.62), inset -7px 0 0 rgba(0,0,0,.12), 7px 8px 14px rgba(0,0,0,.25)!important; } @media (orientation:portrait) and (max-width:760px){ html body #gateway.gateway-v43 .real-door-icon{ top:31%!important; width:34%!important; } } /* ============================================================ V5.0.8 — PORTES FIDÈLES AU VISUEL VALIDÉ ============================================================ */ /* Artisan: exact approved hammer + screwdriver extracted from reference. */ html body #gateway.gateway-v43 .real-door-leaf > img.artisan-door-icon{ position:absolute!important; left:50%!important; top:33%!important; width:29%!important; height:22%!important; max-width:29%!important; max-height:22%!important; transform:translate(-50%,-50%)!important; object-fit:contain!important; object-position:center!important; filter:none!important; opacity:1!important; clip:auto!important; clip-path:none!important; z-index:20!important; } /* Client icon: same restrained placement, small and fully visible. */ html body #gateway.gateway-v43 .real-door-leaf > img.client-door-icon{ position:absolute!important; left:50%!important; top:33%!important; width:28%!important; height:21%!important; max-width:28%!important; max-height:21%!important; transform:translate(-50%,-50%)!important; object-fit:contain!important; object-position:center!important; filter:none!important; opacity:1!important; clip:auto!important; clip-path:none!important; z-index:20!important; } /* The door has a visible physical edge, but stays refined. */ html body #gateway.gateway-v43 .real-door-leaf{ transform-style:preserve-3d!important; overflow:visible!important; box-shadow: inset 0 0 0 2px rgba(102,96,82,.55), inset -7px 0 0 rgba(0,0,0,.12), 7px 10px 20px rgba(0,0,0,.28)!important; transition: transform 1.85s cubic-bezier(.17,.72,.08,1), box-shadow 1.55s cubic-bezier(.2,.7,.1,1)!important; } /* The reveal is photographic and must read as a real room behind the frame. */ html body #gateway.gateway-v43 .door-reveal-clip{ inset:3px!important; overflow:hidden!important; background:#111713!important; box-shadow: inset 12px 0 20px rgba(0,0,0,.34), inset -12px 0 20px rgba(0,0,0,.30), inset 0 10px 16px rgba(0,0,0,.22)!important; } html body #gateway.gateway-v43 .door-reveal-image{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; object-fit:cover!important; object-position:center!important; transform:scale(1.055)!important; transform-origin:center!important; filter:brightness(.82) contrast(1.04) saturate(.95)!important; opacity:.96!important; transition: transform 1.75s cubic-bezier(.18,.72,.08,1), filter 1.45s ease, opacity 1.2s ease!important; } /* As the door opens, reveal the room instead of animating a flat picture. */ html body #gateway.gateway-v43 .door-frame:has(.real-door-leaf.opening) .door-reveal-image{ transform:scale(1.01)!important; filter:brightness(1) contrast(1.02) saturate(1.02)!important; opacity:1!important; } html body #gateway.gateway-v43 .door-light{ opacity:.15!important; transition:opacity 1.4s ease!important; } html body #gateway.gateway-v43 .door-frame:has(.real-door-leaf.opening) .door-light{ opacity:.5!important; } /* Portrait: keep icon small and away from handle/edges. */ @media (orientation:portrait) and (max-width:760px){ html body #gateway.gateway-v43 .real-door-leaf > img.artisan-door-icon{ top:32%!important; width:27%!important; height:20%!important; max-width:27%!important; max-height:20%!important; } html body #gateway.gateway-v43 .real-door-leaf > img.client-door-icon{ top:32%!important; width:27%!important; height:20%!important; max-width:27%!important; max-height:20%!important; } html body #gateway.gateway-v43 .door-reveal-image{ object-position:center center!important; } } /* V5.1.0 — Administration comptes enrichie */ .admin-row-actions{display:flex;flex-wrap:wrap;gap:7px;align-items:center} .admin-action.edit{border-color:#8b806b;color:#27342f;background:#f5f1e7} .admin-action.delete{border-color:#c87a6c;color:#8b2e26;background:#fff6f3} .admin-action.delete:hover{background:#8b2e26;color:#fff} .admin-warning{display:block;color:#b26b43;margin-top:6px;font-size:11px} .admin-muted{color:#8b918e;font-size:12px} .admin-date-main{display:block;font-size:13px} .admin-account-card{max-width:620px!important} .admin-edit-email{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#6c7470;margin-top:-8px} .admin-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px} .admin-edit-grid label{display:grid;gap:7px;font-size:12px;font-weight:700;letter-spacing:.04em;color:#36413c} .admin-edit-grid input,.admin-edit-grid select{width:100%;box-sizing:border-box;border:1px solid #d8d2c5;background:#fff;padding:13px 12px;border-radius:8px;font:inherit;color:#17211d} .admin-account-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0;padding:14px;background:#f6f3eb;border:1px solid #e0dbcf;border-radius:9px} .admin-account-meta span{font-size:11px;color:#737b77;display:grid;gap:3px}.admin-account-meta b{font-size:12px;color:#17211d} .admin-edit-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px} @media(max-width:760px){ .admin-edit-grid{grid-template-columns:1fr} .admin-account-meta{grid-template-columns:1fr} .admin-table{min-width:980px} .admin-account-card{width:calc(100vw - 28px)!important;max-height:88vh;overflow:auto} } .admin-confirmed{display:block;margin-top:7px;color:#54745c;font-size:12px;font-weight:600;} /* ============================================================ V5.1.4 — DASHBOARD : libellés sans chevauchement ============================================================ */ /* Le repère de méthode reste visible mais sort de la zone de l'orbite. */ .workshop-hero .note-one{ right:34px!important; top:28px!important; max-width:170px!important; padding:5px 8px!important; border-radius:999px!important; background:rgba(24,36,31,.72)!important; border:1px solid rgba(230,234,228,.10)!important; color:rgba(230,234,228,.62)!important; text-align:center!important; transform:none!important; z-index:10!important; } .workshop-hero .workshop-pencil-line{ right:44px!important; top:58px!important; width:116px!important; opacity:.20!important; } /* MATIÈRES descend sous le repère de méthode pour ne plus le toucher. */ .workshop-hero .hero-orbit .orbit-label.one{ top:34px!important; } @media(max-width:1100px){ .workshop-hero .note-one{right:22px!important;top:22px!important;font-size:7px!important} .workshop-hero .hero-orbit .orbit-label.one{top:39px!important} } @media(max-width:900px){ .workshop-hero .note-one,.workshop-hero .workshop-pencil-line{display:none!important} } /* V5.1.6 — logo artisan dans le devis */ .print-logo img{width:100%;height:100%;object-fit:contain;display:block;border-radius:2mm;background:#fff;padding:1mm;box-sizing:border-box} /* V5.1.7 — Programme partenaire */ .partner-view{max-width:1180px}.partner-hero{display:grid;grid-template-columns:1fr 1.2fr;gap:28px;align-items:center;background:#13241f;color:#fff;padding:32px;margin-bottom:22px}.partner-hero>div:first-child{display:flex;flex-direction:column}.partner-label{font-size:11px;letter-spacing:.18em;color:#d56a4b;font-weight:800}.partner-hero strong#partnerPoints{font-family:Georgia,serif;font-size:64px;line-height:1;margin:8px 0}.partner-hero small{opacity:.7}.partner-code-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);padding:22px;display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:center}.partner-code-box span{grid-column:1/-1;font-size:11px;text-transform:uppercase;letter-spacing:.13em;opacity:.65}.partner-code-box b{font-size:20px;letter-spacing:.05em}.partner-code-box .btn{color:#fff;border-color:rgba(255,255,255,.25)}.partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px}.partner-rule{padding:24px}.partner-rule>b{font-family:Georgia,serif;font-size:42px;color:#cf6042}.partner-rule h3{margin:6px 0}.partner-rule p{color:#70746e;font-size:13px;line-height:1.5}.founder-rule{border-color:#d7b878;background:#fffaf0}.partner-columns{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.partner-columns>.card{padding:24px}.partner-history-row,.partner-rank{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid #e6e1d8}.partner-history-row div,.partner-rank div{display:flex;flex-direction:column;gap:3px}.partner-history-row small,.partner-rank small{color:#8b8e88;font-size:11px}.partner-history-row strong.plus{color:#2d755b}.partner-history-row strong.minus{color:#a04c3f}.partner-rank>span{width:32px;font-weight:800;color:#9d9a91}.partner-rank>div{flex:1}.partner-rank.me{background:#f3f7f2;margin:0 -10px;padding-left:10px;padding-right:10px}.partner-note{margin-top:18px;padding:18px;color:#666;font-size:12px}.partner-stats{font-size:12px;color:#777}.auth-card .field small{font-weight:400;color:#8b8e88}@media(max-width:800px){.partner-hero,.partner-columns{grid-template-columns:1fr}.partner-grid{grid-template-columns:1fr}.partner-code-box{grid-template-columns:1fr}.partner-code-box .btn{justify-self:start}.partner-hero strong#partnerPoints{font-size:52px}} /* V5.1.8 — UI cleanup requested on iPad */ .sidebar{overflow-y:auto;overflow-x:hidden} .sidebar-bottom{padding-right:18px} .account-card{width:100%;box-sizing:border-box} /* The lower editorial sections can extend behind the fixed sidebar column. Keep the session card safely inside the dark rail instead of over the content edge. */ @media (min-width:901px){ .sidebar-bottom .account-card{max-width:210px} } /* V5.1.9 — Programme partenaire visible et prioritaire */ .sidebar nav .partner-nav-button{ margin-top:8px; padding:11px 10px!important; min-height:52px; display:grid!important; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:9px!important; border:1px solid rgba(213,106,75,.38)!important; background:rgba(213,106,75,.08)!important; color:#f4eee5!important; } .sidebar nav .partner-nav-button:hover,.sidebar nav .partner-nav-button.active{ background:rgba(213,106,75,.17)!important; border-color:rgba(213,106,75,.65)!important; } .sidebar nav .partner-nav-button .partner-nav-icon{ width:28px!important;height:28px;border-radius:50%; color:#e57655!important;background:rgba(229,118,85,.12); } .partner-nav-copy{display:flex;flex-direction:column;min-width:0;line-height:1.15} .partner-nav-copy b{font-size:11px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .partner-nav-copy small{font-size:7px;color:#99aaa5;margin-top:4px;letter-spacing:.02em} .sidebar nav .partner-nav-button em{ font-style:normal;font-size:8px;font-weight:900;color:#18241f; background:#efe8da;border-radius:999px;padding:5px 7px;white-space:nowrap; } .partner-view .view-heading{margin-bottom:20px} .partner-view .view-heading h1{max-width:760px} @media(max-width:820px){ .sidebar nav .partner-nav-button{grid-template-columns:28px minmax(0,1fr) auto} } /* V5.2.6 — L'Essentiel artisan */ .artisan-news{margin:18px 0 22px;padding:22px 24px;background:#f8f5ee;border:1px solid #d9d3c7} .artisan-news-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.artisan-news-head h3{font-family:var(--serif);font-size:30px;margin:4px 0 5px}.artisan-news-head p{margin:0;color:#6f756f;font-size:13px} .artisan-news-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 14px}.artisan-news-tabs button{border:1px solid #d5d0c5;background:#fff;border-radius:999px;padding:8px 12px;font-size:11px;font-weight:800;color:#56605b}.artisan-news-tabs button.active{background:#17251f;color:#fff;border-color:#17251f} .artisan-news-alert{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:15px;align-items:center;border-left:4px solid #d45f43;background:#fff8ef;padding:15px 16px;margin-bottom:12px}.artisan-news-badge{font-size:8px;font-weight:900;letter-spacing:.14em;padding:7px 8px;border-radius:4px;background:#d45f43;color:#fff;white-space:nowrap}.artisan-news-alert h4{margin:0 0 5px;font-size:15px}.artisan-news-alert p{margin:0 0 5px;font-size:11px;line-height:1.5;color:#5f655f}.artisan-news-alert small{color:#8b8f8a;font-size:9px}.artisan-news-alert a{font-size:10px;font-weight:900;color:#9f3f2d;text-decoration:none;white-space:nowrap} .artisan-news-feed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.artisan-news-item{background:#fff;border:1px solid #ded9cf;padding:14px;min-height:142px;display:flex;flex-direction:column}.artisan-news-item .news-kind{font-size:8px;font-weight:900;letter-spacing:.12em;color:#c65e43;text-transform:uppercase}.artisan-news-item h4{font-size:13px;line-height:1.3;margin:7px 0}.artisan-news-item p{font-size:10px;line-height:1.45;color:#69706b;margin:0 0 10px}.artisan-news-item .news-meta{font-size:8px;color:#929690;margin-top:auto}.artisan-news-item a{font-size:9px;font-weight:900;color:#17251f;text-decoration:none;margin-top:8px}.artisan-news-loading{grid-column:1/-1;padding:18px;color:#7c827d;font-size:11px}.artisan-news-foot{display:flex;justify-content:space-between;gap:15px;margin-top:12px;color:#8a8e89;font-size:9px}.artisan-news-item[hidden],.artisan-news-alert[hidden]{display:none!important} @media(max-width:900px){.artisan-news-feed{grid-template-columns:1fr}.artisan-news-alert{grid-template-columns:1fr}.artisan-news-alert a{white-space:normal}.artisan-news{padding:18px 16px}.artisan-news-head h3{font-size:25px}} /* V5.2.7 — Orbite : repères colorés, discrets et distincts */ .workshop-hero .hero-orbit .orbit-label.one{color:#e28a62!important;} /* Matières — terre cuite douce */ .workshop-hero .hero-orbit .orbit-label.two{color:#73a99a!important;} /* Temps — vert sauge/acier */ .workshop-hero .hero-orbit .orbit-label.three{color:#d4b36b!important;} /* Marge — ocre doré discret */ /* V5.2.9 — changements visibles et robustes */ .workshop-hero #orbitMaterials{color:#ff8a5c!important;text-shadow:0 0 14px rgba(255,138,92,.18)!important;font-weight:800!important} .workshop-hero #orbitTime{color:#69c6ad!important;text-shadow:0 0 14px rgba(105,198,173,.16)!important;font-weight:800!important} .workshop-hero #orbitMargin{color:#e8c45f!important;text-shadow:0 0 14px rgba(232,196,95,.15)!important;font-weight:800!important} .artisan-news{display:block!important;visibility:visible!important;opacity:1!important;position:relative!important;border-top:4px solid #df6849!important;box-shadow:0 16px 40px rgba(23,37,31,.08)!important} .artisan-news:before{content:"NOUVEAU";position:absolute;right:22px;top:18px;font-size:8px;letter-spacing:.14em;font-weight:900;color:#c9573d;background:#fff0e9;border:1px solid #f0c7bb;padding:5px 7px;border-radius:999px} .news-static{border-color:#e5d2c8!important;background:#fffdf8!important} .quote-trade-start{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:18px;align-items:end;padding:18px;margin:-2px -2px 18px;background:linear-gradient(135deg,#f0f4ef,#faf7f0);border:1px solid #d6ddd6;border-radius:14px} .quote-trade-start-copy h3{margin:5px 0 5px;font-family:var(--serif);font-size:24px;line-height:1.05}.quote-trade-start-copy p{margin:0;color:#707a75;font-size:10px;line-height:1.5;max-width:540px} .quote-trade-select-field{margin:0}.quote-trade-select-field select{background:#fff;border:1px solid #bcc8c1;font-weight:800;color:#1d2b26;min-height:48px;padding-right:42px} .quote-trade-select-field select:focus{border-color:#df6849;box-shadow:0 0 0 3px rgba(223,104,73,.10)} @media(max-width:800px){.quote-trade-start{grid-template-columns:1fr}.quote-trade-start-copy h3{font-size:21px}.artisan-news:before{position:static;display:inline-block;margin-bottom:8px}} /* ===== V5.3.0 — NIVEAU DE PRESTATION EN AMONT ===== */ .quote-start-controls{display:grid;gap:10px;min-width:0}.quote-quality-select-field select,.quote-trade-select-field select{min-height:48px;background:#fff}.quote-quality-hint{margin-top:-2px;padding:9px 11px;border-left:3px solid #c7744f;background:rgba(255,255,255,.58);color:#5f6963;font-size:10px;line-height:1.45}.quote-quality-requirements span small{font-weight:500;color:#8c918d}.quote-quality-requirements input{background:#fff}.quality-scenarios{margin:-4px 0 18px;padding:14px;border:1px solid #ddd8cd;border-radius:14px;background:#fbfaf6}.quality-scenarios-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-bottom:11px}.quality-scenarios-head b{display:block;margin-top:4px;font-size:14px}.quality-scenarios-head small{max-width:430px;color:#7a817c;font-size:9px;line-height:1.4;text-align:right}.quality-scenario-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.quality-scenario{appearance:none;border:1px solid #d9d4ca;background:#fff;border-radius:10px;padding:10px 9px;text-align:left;cursor:pointer;transition:.18s}.quality-scenario:hover{transform:translateY(-1px);border-color:#a8aaa5}.quality-scenario.active{border-color:#c86f4c;box-shadow:inset 0 -3px #c86f4c;background:#fffaf6}.quality-scenario span{display:block;color:#6e7771;font-size:8px;text-transform:uppercase;letter-spacing:.08em}.quality-scenario b{display:block;margin-top:5px;font-size:13px;color:#17211d}.quality-scenario small{display:block;margin-top:3px;color:#8a8f8b;font-size:8px}.quality-impact-note{margin-top:8px;color:#6f7772;font-size:9px;line-height:1.45} @media(max-width:900px){.quality-scenario-grid{grid-template-columns:repeat(3,1fr)}.quality-scenarios-head{display:block}.quality-scenarios-head small{display:block;text-align:left;margin-top:5px}} @media(max-width:620px){.quality-scenario-grid{grid-template-columns:1fr 1fr}.quality-scenario:last-child{grid-column:1/-1}} /* V5.3.1 — Journal artisan */ .artisan-gazette{background:#fbf8f0!important;border:1px solid #cfc7b8!important;border-top:0!important;padding:20px 22px 18px!important;box-shadow:0 18px 44px rgba(28,34,30,.07)!important} .artisan-gazette:before{display:none!important}.gazette-rule{height:3px;background:#17251f;margin-bottom:5px}.gazette-rule.double{height:5px;border-top:1px solid #17251f;border-bottom:2px solid #17251f;background:transparent;margin:13px 0 0}.gazette-topline{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid #bdb5a6;padding:5px 1px 7px;font:800 8px/1.2 Inter,sans-serif;letter-spacing:.16em;color:#686c66;text-transform:uppercase}.gazette-title-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:12px 0 3px}.gazette-title-row h3{font-family:Georgia,'Times New Roman',serif;font-size:38px;line-height:.95;letter-spacing:-1.3px;margin:3px 0;color:#17211e}.gazette-deck{font-family:Georgia,'Times New Roman',serif;font-style:italic;color:#62665f;font-size:12px;margin:5px 0 0}.artisan-gazette .artisan-news-tabs{border-bottom:1px solid #bdb5a6;padding-bottom:10px}.artisan-gazette .artisan-news-tabs button{border:0;border-radius:0;background:transparent;padding:5px 10px 5px 0;margin-right:8px;text-transform:uppercase;letter-spacing:.1em;font-size:8px}.artisan-gazette .artisan-news-tabs button.active{background:transparent;color:#c5573d;text-decoration:underline;text-underline-offset:4px}.gazette-lead{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;position:relative;border:0!important;border-bottom:2px solid #17251f!important;background:transparent!important;padding:5px 0 17px!important;margin:0 0 14px!important}.gazette-lead .artisan-news-badge{grid-column:1/-1;justify-self:start;border-radius:0;margin-bottom:3px}.gazette-lead h4{font-family:Georgia,'Times New Roman',serif!important;font-size:25px!important;line-height:1.02!important;letter-spacing:-.4px;margin:4px 0 7px!important}.gazette-lead p{font-family:Georgia,'Times New Roman',serif;font-size:12px!important;line-height:1.55!important;max-width:680px}.gazette-grid{grid-template-columns:1.25fr 1fr 1fr!important;gap:0!important}.artisan-gazette .artisan-news-item{border:0!important;border-right:1px solid #cfc7b8!important;background:transparent!important;padding:3px 14px 12px!important;min-height:155px}.artisan-gazette .artisan-news-item:nth-child(3n){border-right:0!important}.artisan-gazette .artisan-news-item h4{font-family:Georgia,'Times New Roman',serif;font-size:16px!important;line-height:1.15!important}.artisan-gazette .artisan-news-item p{font-family:Georgia,'Times New Roman',serif;font-size:10.5px!important;line-height:1.48!important}.artisan-gazette .news-kind{color:#b64f38!important}.artisan-gazette .artisan-news-foot{border-top:2px solid #17251f;padding-top:8px;margin-top:3px} @media(max-width:900px){.gazette-grid{grid-template-columns:1fr!important}.artisan-gazette .artisan-news-item{border-right:0!important;border-bottom:1px solid #cfc7b8!important;padding:12px 0!important}.gazette-lead{grid-template-columns:1fr!important}.gazette-title-row h3{font-size:31px}.gazette-topline{font-size:7px}.artisan-gazette{padding:16px!important}} /* V5.3.2 — marge par devis */ .quote-margin-select-field{min-width:180px} .quote-margin-hint{font-size:.78rem;line-height:1.45;color:var(--muted);margin-top:-2px} @media(max-width:760px){.quote-margin-select-field{min-width:0}} /* V5.3.8 — Programme partenaire +10 inscription */ .partner-referral-rule{border-color:#c86f4c;background:linear-gradient(180deg,#fffaf6 0%,#fff 100%);position:relative;overflow:hidden}.partner-referral-rule:after{content:"INSCRIPTION";position:absolute;right:14px;top:14px;font-size:8px;font-weight:900;letter-spacing:.12em;color:#c86f4c;background:#fff1e9;border:1px solid #efd3c5;padding:5px 7px;border-radius:999px} \n\n/* ===== V5.3.11 — finition mobile, lisibilité et accessibilité ===== */\n:where(button,a,input,select,textarea):focus-visible{outline:3px solid rgba(215,91,63,.28);outline-offset:2px}\nbutton,.btn,[role="button"]{touch-action:manipulation}\ninput,select,textarea{font-size:16px}\n.admin-table-wrap,.cost-table-wrap,.quote-lines-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}\n@media(max-width:650px){\n .topbar{height:62px;padding:0 18px}.view{padding:22px 15px 56px}.page-head h1{font-size:34px;line-height:1.02}.card{padding:16px;border-radius:18px}\n .btn,button{min-height:42px}.avatar{min-width:42px;height:42px}.menu-btn{min-width:42px}\n #partner .page-head h1{font-size:44px;line-height:.96}.partner-activity-card,.partner-ranking-card{padding:20px 18px!important}\n .partner-rank{grid-template-columns:48px minmax(0,1fr) auto!important;gap:10px!important}.partner-rank>span{font-size:18px!important}.partner-rank strong{font-size:18px!important;white-space:nowrap}\n .partner-rank b{font-size:18px!important}.partner-rank small{font-size:12px!important}.partner-history-row{gap:12px}\n .quote-layout,.settings-grid{grid-template-columns:1fr}.quick-entry{width:100%;margin-left:0;margin-top:14px}.quick-entry textarea{min-height:120px}\n .action-row{align-items:stretch;flex-wrap:wrap}.action-row .btn{flex:1 1 145px}\n}\n@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n /* ===== V5.3.12 — devis mobile sans tableau horizontal ===== */ @media(max-width:650px){ #quoteDesc{min-height:210px;line-height:1.45;resize:vertical} .estimate-card .table-wrap{overflow:visible;border:0;background:transparent} .estimate-table{min-width:0;width:100%;display:block} .estimate-table thead{display:none} .estimate-table tbody{display:grid;gap:10px} .estimate-table tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(92px,.42fr);gap:8px 10px;padding:12px;border:1px solid #e3dfd7;border-radius:14px;background:#fffdf8} .estimate-table td{display:flex;flex-direction:column;gap:5px;border:0!important;padding:0!important;min-width:0;font-size:12px} .estimate-table td:before{content:attr(data-label);font-size:8px;line-height:1;text-transform:uppercase;letter-spacing:.08em;color:#87908d;font-weight:900} .estimate-table td:first-child{grid-column:1/-1} .estimate-table td input{width:100%;min-width:0;box-sizing:border-box;font-size:16px;padding:10px} .estimate-table td[data-label="Source"],.estimate-table td[data-label="Action"]{justify-content:flex-end} .estimate-table td[data-label="Action"] .btn{width:48px;align-self:flex-end} .estimate-footer{flex-direction:column}.totals-panel{width:100%} } /* ===== V5.3.13 — finition devis mobile ===== */ @media(max-width:650px){ #quote .step-title{align-items:flex-start;flex-wrap:wrap} #quote .step-title .btn{margin-left:40px;max-width:calc(100% - 40px)} #quote .estimate-table tr{box-shadow:0 2px 10px rgba(23,32,31,.035)} #quote .estimate-table td[data-label="Total coût"]{font-weight:900;font-size:15px;align-self:end;text-align:right} #quote .estimate-footer{display:grid;grid-template-columns:1fr;gap:12px} #quote .totals-panel{width:100%;box-sizing:border-box;position:relative;z-index:1} #quote .totals-panel .recommended b{font-size:30px} #quoteGuidance h3{font-size:clamp(30px,10vw,44px)!important;line-height:1.02!important} #quoteGuidance{overflow:hidden} } /* ===== V5.4.1 — lecture métier compacte + pré-lancement mobile ===== */ .understood-head{margin-top:16px;padding:12px 13px;border:1px solid #dedbd2;border-radius:12px;background:#f7f5ef;display:grid;gap:4px} .understood-head b{font-size:12px;color:#18231e}.understood-head small{font-size:9px;color:#727b76;line-height:1.45} @media(max-width:650px){ #quoteGuidance h3{font-size:26px!important;line-height:1.04!important;letter-spacing:-.5px!important} #quoteGuidance{padding:14px!important} .guidance-questions{grid-template-columns:1fr!important} .understood-head{margin-top:13px}.understood-head b{font-size:14px}.understood-head small{font-size:11px} } /* ===== V5.4.5 — finition visuelle + pilote de scroll ===== */ :root{ --dp545-ink:#18231f; --dp545-ink-soft:#26332e; --dp545-paper:#fbf8f0; --dp545-canvas:#f2eee5; --dp545-line:#d5cec1; --dp545-accent:#c85a40; --dp545-accent-soft:#f3ded5; --dp545-sage:#8fa391; --dp545-serif:Georgia,"Times New Roman",serif; --dp545-sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } #app{background:linear-gradient(180deg,#f4f1e9 0%,#eee9df 100%)} #dashboard{position:relative} #dashboard .card{border-color:rgba(70,74,67,.18);box-shadow:0 13px 34px rgba(24,35,31,.055)} #dashboard .kicker{color:var(--dp545-accent);letter-spacing:.18em;font-weight:900} #dashboard .weather-widget{border-radius:28px;padding:21px 22px;background:linear-gradient(138deg,#15231e 0%,#203029 100%);border:1px solid rgba(255,255,255,.08);box-shadow:0 17px 38px rgba(18,31,26,.15)} #dashboard .weather-top h3,#dashboard .weather-content strong{font-family:var(--dp545-serif);letter-spacing:-.02em} #dashboard .weather-refresh{border-radius:10px;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.035);transition:transform .2s ease,background .2s ease,border-color .2s ease} #dashboard .weather-refresh:hover{transform:rotate(16deg);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)} #dashboard .weather-advice{border-radius:0 10px 10px 0;background:rgba(255,255,255,.045)} #dashboard .artisan-gazette{border-radius:24px!important;overflow:hidden;background:linear-gradient(180deg,#fbf8f0 0%,#f8f4eb 100%)!important;box-shadow:0 16px 40px rgba(28,34,30,.065)!important} #dashboard .gazette-topline{color:#626860;letter-spacing:.18em} #dashboard .gazette-title-row h3{font-family:var(--dp545-serif);font-size:clamp(34px,4.2vw,52px);letter-spacing:-1.7px} #dashboard .gazette-deck{font-size:13px;line-height:1.5} #dashboard .artisan-gazette .artisan-news-tabs button{transition:color .2s ease,transform .2s ease} #dashboard .artisan-gazette .artisan-news-tabs button:hover{color:var(--dp545-accent);transform:translateY(-1px)} #dashboard .gazette-lead .artisan-news-badge{background:var(--dp545-accent);padding:8px 10px;letter-spacing:.16em} #dashboard .quick-entry,#dashboard .workshop-hero{border-radius:24px;overflow:hidden} #dashboard .metric-card{border-radius:16px;background:rgba(255,255,255,.66);backdrop-filter:blur(6px)} #dashboard textarea,#dashboard input,#dashboard select{border-radius:10px} #dashboard .btn{border-radius:10px} /* Le pilote transforme la longueur réelle du tableau de bord en repère visuel. */ .dp-scroll-pilot{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:45;display:grid;grid-template-columns:auto 8px;grid-template-rows:auto 150px auto;column-gap:9px;align-items:center;pointer-events:none;opacity:0;transition:opacity .25s ease} .dp-scroll-pilot.is-visible{opacity:1} .dp-scroll-pilot-label{grid-column:1;grid-row:2;align-self:center;writing-mode:vertical-rl;transform:rotate(180deg);font:800 8px/1 var(--dp545-sans);letter-spacing:.16em;color:#6c746f;text-transform:uppercase;max-height:138px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dp-scroll-pilot-track{grid-column:2;grid-row:2;position:relative;width:3px;height:150px;border-radius:5px;background:rgba(24,35,31,.12);overflow:visible} .dp-scroll-pilot-track>span{position:absolute;left:0;top:0;width:100%;height:0;background:linear-gradient(180deg,var(--dp545-accent),#e18b6f);border-radius:5px} .dp-scroll-pilot-track>i{position:absolute;left:50%;top:0;width:11px;height:11px;margin-left:-5.5px;margin-top:-5.5px;border-radius:50%;background:var(--dp545-paper);border:3px solid var(--dp545-accent);box-shadow:0 3px 10px rgba(46,40,35,.18)} .dp-scroll-pilot small{grid-column:2;grid-row:3;font:800 7px/1 var(--dp545-sans);color:#7a817c;transform:translateX(-5px);margin-top:8px} .dp-scroll-react{transition:transform .18s linear;will-change:transform} .dp-scroll-react[data-scroll-active="1"]{transform:translateY(var(--dp-scroll-shift,0px))} @media(max-width:980px){ .dp-scroll-pilot{right:4px;grid-template-columns:4px;grid-template-rows:118px;column-gap:0} .dp-scroll-pilot-label,.dp-scroll-pilot small{display:none} .dp-scroll-pilot-track{grid-column:1;grid-row:1;width:3px;height:118px} } @media(max-width:650px){ #dashboard .weather-widget{border-radius:22px;padding:18px 17px} #dashboard .artisan-gazette{border-radius:20px!important;padding:17px 16px 15px!important} #dashboard .gazette-title-row{align-items:flex-start} #dashboard .gazette-title-row h3{font-size:36px;line-height:.98} #dashboard .gazette-topline{gap:10px;align-items:center} #dashboard .gazette-topline span:last-child{text-align:right;max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #dashboard .gazette-deck{font-size:12px} #dashboard .quick-entry,#dashboard .workshop-hero{border-radius:20px} } @media(prefers-reduced-motion:reduce){ .dp-scroll-react,.dp-scroll-pilot,.weather-refresh{transition:none!important} .dp-scroll-react{transform:none!important} } /* V5.5.1 — états explicites du Journal */ .artisan-news-status-v551{grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding:1.25rem 1.15rem;border:1px solid rgba(25,42,36,.18);background:rgba(255,255,255,.32);min-height:128px;justify-content:center} .artisan-news-status-v551 strong{font-family:var(--font-display,Georgia,serif);font-size:clamp(1.15rem,3vw,1.55rem);line-height:1.08;color:var(--ink,#172620)} .artisan-news-status-v551 span{max-width:48rem;color:rgba(23,38,32,.66);line-height:1.45} .artisan-news-status-v551.is-error{border-color:rgba(197,91,65,.38);background:rgba(197,91,65,.055)} .artisan-news-retry-v551{min-height:44px;margin-top:.35rem;padding:.7rem 1rem;border:1px solid currentColor;background:transparent;color:var(--accent,#c65c44);font:700 .78rem/1 var(--font-ui,Arial,sans-serif);letter-spacing:.12em;text-transform:uppercase;cursor:pointer} .artisan-news-retry-v551:active{transform:translateY(1px)} /* ===== V1 REBASE — design system unifie 2026-09-03 ===== */ :root{--dp1-ink:#14231e;--dp1-forest:#193129;--dp1-forest-2:#23463a;--dp1-paper:#fbf7ee;--dp1-canvas:#f0ece2;--dp1-card:#fffdf8;--dp1-line:#d8d0c2;--dp1-muted:#6d746f;--dp1-coral:#cf6248;--dp1-coral-dark:#a94835;--dp1-apricot:#efb27e;--dp1-sage:#93aa99;--dp1-gold:#c49a54;--dp1-shadow:0 16px 40px rgba(20,35,30,.075);--dp1-radius:22px} body{background:var(--dp1-canvas);color:var(--dp1-ink)} #app{background:radial-gradient(circle at 82% 8%,rgba(239,178,126,.11),transparent 24%),linear-gradient(180deg,#f7f3ea 0%,#eee9df 100%)} .sidebar{background:linear-gradient(180deg,#14251f 0%,#10201b 100%)} .sidebar nav>button:not(.partner-nav-button){border-radius:12px;margin:2px 8px;width:calc(100% - 16px)} .sidebar nav>button.active:not(.partner-nav-button){background:rgba(255,255,255,.09);box-shadow:inset 3px 0 0 var(--dp1-coral)} .topbar{background:rgba(251,247,238,.88);backdrop-filter:blur(16px);border-bottom-color:rgba(20,35,30,.1)} .view>.page-head h1,.card-head h2{letter-spacing:-.035em} .card{border-color:rgba(20,35,30,.13);box-shadow:var(--dp1-shadow)} .btn{border-radius:12px}.btn-accent{background:var(--dp1-coral);border-color:var(--dp1-coral)}.btn-accent:hover{background:var(--dp1-coral-dark)} .field input,.field select,.field textarea,textarea,input,select{border-color:#d7d0c4;background:#fffefb;transition:border-color .2s,box-shadow .2s,background .2s}.field input:focus,.field select:focus,.field textarea:focus,textarea:focus,input:focus,select:focus{border-color:var(--dp1-coral);box-shadow:0 0 0 4px rgba(207,98,72,.10);background:#fff} .kicker,.eyebrow{color:var(--dp1-coral)} #dashboard .workshop-hero{background:linear-gradient(135deg,#13251f 0%,#1b382f 58%,#244a3c 100%);box-shadow:0 22px 48px rgba(17,35,29,.18)} #dashboard .quick-entry{background:linear-gradient(180deg,#fffdf9,#faf5eb);border-top:3px solid var(--dp1-coral)} #dashboard .metric-card{border:1px solid rgba(20,35,30,.1);position:relative;overflow:hidden}.metric-card:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--dp1-coral);opacity:.72} #dashboard .weather-widget{background:radial-gradient(circle at 85% 15%,rgba(239,178,126,.12),transparent 28%),linear-gradient(140deg,#14271f,#1e3a30)} #dashboard .artisan-gazette{border-top:4px solid var(--dp1-forest)!important} #dashboard .gazette-lead .artisan-news-badge{background:var(--dp1-coral)} .dp1-command-strip{display:grid;grid-template-columns:1.2fr repeat(3,minmax(0,.75fr));gap:10px;margin:0 0 16px}.dp1-command-main,.dp1-command{border:1px solid rgba(20,35,30,.12);background:rgba(255,253,248,.86);min-height:86px;padding:15px 16px;border-radius:18px;text-align:left;color:var(--dp1-ink);cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.dp1-command-main{background:linear-gradient(135deg,var(--dp1-coral),#df8063);color:#fff;border-color:transparent}.dp1-command-main span,.dp1-command span{display:block;font:800 9px/1.2 var(--dp545-sans);letter-spacing:.16em;text-transform:uppercase;opacity:.75;margin-bottom:9px}.dp1-command-main strong,.dp1-command strong{font:700 17px/1.12 var(--dp545-sans);display:block}.dp1-command-main small,.dp1-command small{display:block;margin-top:6px;font-size:11px;line-height:1.25;opacity:.72}.dp1-command-main:hover,.dp1-command:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(20,35,30,.09);border-color:rgba(207,98,72,.35)} .dp1-section-index{display:flex;gap:7px;align-items:center;margin:2px 0 16px;overflow:auto;padding:2px 0 4px;scrollbar-width:none}.dp1-section-index::-webkit-scrollbar{display:none}.dp1-section-index button{flex:0 0 auto;border:1px solid rgba(20,35,30,.13);background:rgba(255,253,248,.7);color:#5f6964;border-radius:999px;padding:9px 12px;font:800 9px/1 var(--dp545-sans);letter-spacing:.08em;text-transform:uppercase;min-height:38px}.dp1-section-index button.is-active{background:var(--dp1-forest);border-color:var(--dp1-forest);color:#fff}.dp1-section-index button i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--dp1-coral);margin-right:6px;vertical-align:1px} .dp1-scroll-stage{transition:opacity .22s ease,transform .22s ease}.dp1-scroll-stage:not(.is-near){opacity:.82}.dp1-scroll-stage.is-near{opacity:1} @media(max-width:820px){.dp1-command-strip{grid-template-columns:1fr 1fr}.dp1-command-main{grid-column:1/-1}.dp1-command-main,.dp1-command{min-height:78px;padding:13px}.dp1-command-main strong,.dp1-command strong{font-size:15px}} @media(max-width:520px){.dp1-command-strip{grid-template-columns:1fr 1fr;gap:8px}.dp1-command-main{grid-column:1/-1}.dp1-command-main,.dp1-command{border-radius:15px;min-height:74px}.dp1-command small{display:none}.dp1-section-index{margin-left:-2px;margin-right:-2px}.dp1-section-index button{padding:8px 10px;font-size:8px}} /* ===== V1.1 — RAIL DE CAMERA / TRANSITIONS DE POINT DE VUE ===== */ :root{ --dp11-ease:cubic-bezier(.22,.78,.24,1); --dp11-topbar:74px; } /* La navigation de sections devient un vrai rail de navigation, utile et discret. */ #dashboard .dp1-section-index{ position:sticky; top:calc(var(--dp11-topbar) + 8px); z-index:34; width:max-content; max-width:100%; margin:4px auto 20px; padding:6px; border:1px solid rgba(20,35,30,.11); border-radius:999px; background:rgba(251,247,238,.84); -webkit-backdrop-filter:blur(14px) saturate(1.08); backdrop-filter:blur(14px) saturate(1.08); box-shadow:0 8px 26px rgba(20,35,30,.07); } #dashboard .dp1-section-index button{ position:relative; min-height:38px; border-color:transparent; background:transparent; transition:color .22s var(--dp11-ease),background .22s var(--dp11-ease),transform .22s var(--dp11-ease),box-shadow .22s var(--dp11-ease); } #dashboard .dp1-section-index button:hover{transform:translateY(-1px);background:rgba(20,35,30,.045)} #dashboard .dp1-section-index button.is-active{ color:#fff; background:linear-gradient(135deg,var(--dp1-forest),var(--dp1-forest-2)); box-shadow:0 5px 13px rgba(20,35,30,.16); } #dashboard .dp1-section-index button.is-active i{background:var(--dp1-apricot);box-shadow:0 0 0 4px rgba(239,178,126,.13)} /* Les cinq zones principales se comportent comme des plans successifs d'une caméra. */ #dashboard .dp11-camera-stage{ --dp11-y:0px; --dp11-rx:0deg; --dp11-scale:1; --dp11-alpha:1; --dp11-line:0; position:relative; transform-origin:50% 38%; transform:perspective(1450px) translate3d(0,var(--dp11-y),0) rotateX(var(--dp11-rx)) scale(var(--dp11-scale)); opacity:var(--dp11-alpha); transition:box-shadow .35s var(--dp11-ease),border-color .35s var(--dp11-ease); will-change:transform,opacity; backface-visibility:hidden; } #dashboard .dp11-camera-stage::after{ content:""; position:absolute; inset:-1px; z-index:6; pointer-events:none; border-radius:inherit; border:1px solid rgba(207,98,72,calc(var(--dp11-line) * .36)); box-shadow:inset 0 0 0 1px rgba(255,255,255,calc(var(--dp11-line) * .38)); opacity:var(--dp11-line); transition:opacity .25s ease; } #dashboard .dp11-camera-stage.dp11-focus{box-shadow:0 22px 48px rgba(20,35,30,.10)} /* Une ligne de perspective relie visuellement les chapitres sans prendre de place. */ #dashboard::before{ content:""; position:absolute; left:50%; top:250px; bottom:80px; width:1px; pointer-events:none; background:linear-gradient(180deg,transparent,rgba(207,98,72,.13) 8%,rgba(20,35,30,.08) 52%,transparent 96%); opacity:.55; transform:translateX(-50%); } /* Petit changement de profondeur sur le héros et le module de chiffrage. */ #dashboard .workshop-hero.dp11-camera-stage .hero-orbit{transform:translate3d(0,calc(var(--dp11-rx) * 0),0)} #dashboard .workshop-hero .orbit-center,#dashboard .workshop-hero .orbit-ring{transition:transform .45s var(--dp11-ease)} #dashboard .workshop-hero.dp11-focus .orbit-center{transform:scale(1.045)} #dashboard .workshop-hero.dp11-focus .orbit-ring{transform:rotate(4deg) scale(1.025)} #dashboard .quick-entry.dp11-focus textarea{box-shadow:0 0 0 4px rgba(207,98,72,.06)} /* Transitions entre vues : utilisées par l'API View Transitions quand le navigateur la supporte. */ ::view-transition-old(root){animation:dp11-old-view .24s ease both} ::view-transition-new(root){animation:dp11-new-view .34s var(--dp11-ease) both} @keyframes dp11-old-view{to{opacity:0;transform:translateY(-8px) scale(.995)}} @keyframes dp11-new-view{from{opacity:0;transform:translateY(12px) scale(.992)}to{opacity:1;transform:none}} /* Le pilote latéral prend l'apparence d'un repère de caméra plutôt que d'une simple barre. */ .dp-scroll-pilot-track{background:rgba(20,35,30,.10)} .dp-scroll-pilot-track::before,.dp-scroll-pilot-track::after{content:"";position:absolute;left:50%;width:7px;height:1px;background:rgba(20,35,30,.22);transform:translateX(-50%)} .dp-scroll-pilot-track::before{top:0}.dp-scroll-pilot-track::after{bottom:0} .dp-scroll-pilot-track>i{transition:transform .22s var(--dp11-ease),box-shadow .22s ease} .dp-scroll-pilot.is-moving .dp-scroll-pilot-track>i{transform:scale(1.18);box-shadow:0 4px 13px rgba(207,98,72,.28)} @media(max-width:980px){ :root{--dp11-topbar:62px} #dashboard .dp1-section-index{top:68px;margin-inline:-3px;max-width:calc(100% + 6px);border-radius:16px;padding:5px;justify-content:flex-start} #dashboard .dp1-section-index button{padding:8px 10px;min-height:36px} #dashboard::before{display:none} #dashboard .dp11-camera-stage{transform:perspective(1100px) translate3d(0,var(--dp11-y),0) rotateX(var(--dp11-rx)) scale(var(--dp11-scale))} } @media(max-width:650px){ #dashboard .dp1-section-index{top:66px;margin-bottom:15px;background:rgba(251,247,238,.92);box-shadow:0 5px 16px rgba(20,35,30,.055)} #dashboard .dp1-section-index button{font-size:8px;letter-spacing:.055em;padding-inline:9px} #dashboard .dp11-camera-stage::after{display:none} } @media(prefers-reduced-motion:reduce){ #dashboard .dp11-camera-stage{transform:none!important;opacity:1!important;will-change:auto!important} ::view-transition-old(root),::view-transition-new(root){animation:none!important} } /* ===== V1.2 — MENUS INTELLIGENTS + ACCUEIL PAR LOGO ===== */ .sidebar-home-brand{ width:100%;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer; position:relative;border-radius:16px;transition:background .26s var(--ease),transform .26s var(--ease); } .sidebar-home-brand:hover{background:rgba(255,255,255,.045);transform:translateX(2px)} .sidebar-home-brand:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .sidebar-home-hint{margin-left:auto;color:#71847e;font-size:15px;opacity:0;transform:translate(-4px,4px);transition:.25s var(--ease)} .sidebar-home-brand:hover .sidebar-home-hint,.sidebar-home-brand:focus-visible .sidebar-home-hint{opacity:1;transform:none;color:var(--accent)} /* Select natif conservé pour la valeur, la validation et les scripts métier. */ .dp-smart-select{position:relative;min-width:0} .dp-smart-native{ position:absolute!important;inset:auto!important;width:1px!important;height:1px!important; opacity:0!important;pointer-events:none!important;overflow:hidden!important; } .dp-smart-trigger{ width:100%;min-height:48px;border:1px solid var(--line);border-radius:14px;background:#fff; color:var(--ink);display:grid;grid-template-columns:minmax(0,1fr) 28px;align-items:center;gap:10px; padding:11px 12px 11px 14px;text-align:left;font:inherit;cursor:pointer;position:relative;overflow:hidden; box-shadow:0 1px 0 rgba(255,255,255,.7) inset; transition:border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease),background .22s var(--ease) } .dp-smart-trigger:before{ content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;background:var(--accent); transform:scaleY(0);transform-origin:center;transition:transform .24s var(--ease) } .dp-smart-trigger:hover{border-color:#beb8aa;background:#fffefb} .dp-smart-select.is-open .dp-smart-trigger{border-color:rgba(207,91,63,.55);box-shadow:0 0 0 4px rgba(207,91,63,.09);transform:translateY(-1px)} .dp-smart-select.is-open .dp-smart-trigger:before{transform:scaleY(1)} .dp-smart-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:680;letter-spacing:-.01em} .dp-smart-chevron{ width:28px;height:28px;border-radius:9px;display:grid;place-items:center;color:#60706b; background:#f3f0e8;transition:transform .28s var(--ease),background .22s var(--ease),color .22s var(--ease) } .dp-smart-chevron:before{content:"⌄";font-size:17px;line-height:1;transform:translateY(-2px)} .dp-smart-select.is-open .dp-smart-chevron{transform:rotate(180deg);background:rgba(207,91,63,.12);color:var(--accent)} .dp-smart-panel{ position:absolute;z-index:160;left:0;right:0;top:calc(100% + 8px);max-height:min(330px,52vh);overflow:auto; overscroll-behavior:contain;padding:7px;background:rgba(250,248,242,.98);border:1px solid rgba(183,177,163,.8); border-radius:16px;box-shadow:0 18px 45px rgba(24,34,31,.17);backdrop-filter:blur(18px); opacity:0;visibility:hidden;transform:translateY(-7px) scale(.985);transform-origin:top; transition:opacity .2s var(--ease),transform .24s var(--ease),visibility .2s; } .dp-smart-select.drop-up .dp-smart-panel{top:auto;bottom:calc(100% + 8px);transform-origin:bottom;transform:translateY(7px) scale(.985)} .dp-smart-select.is-open .dp-smart-panel{opacity:1;visibility:visible;transform:none} .dp-smart-option{ position:relative;width:100%;border:0;background:transparent;color:#34403d;border-radius:11px; padding:11px 38px 11px 12px;text-align:left;font:inherit;font-size:13px;line-height:1.3;cursor:pointer; transition:background .16s ease,color .16s ease,transform .16s ease; } .dp-smart-option:hover,.dp-smart-option:focus-visible{background:#ece9e1;color:var(--ink);outline:none;transform:translateX(2px)} .dp-smart-option[aria-selected="true"]{background:rgba(207,91,63,.1);color:var(--ink);font-weight:800} .dp-smart-option[aria-selected="true"]:after{content:"✓";position:absolute;right:13px;top:50%;transform:translateY(-50%);color:var(--accent);font-weight:900} .dp-smart-option:disabled{opacity:.45;cursor:not-allowed} .dp-smart-select.just-picked .dp-smart-trigger{animation:dpPicked .34s var(--ease)} @keyframes dpPicked{0%{transform:scale(1)}45%{transform:scale(.985)}100%{transform:scale(1)}} /* Les champs importants du chiffrage reçoivent un repère plus affirmé. */ .quote-trade-select-field .dp-smart-trigger,.quote-quality-select-field .dp-smart-trigger,.quote-margin-select-field .dp-smart-trigger{ background:linear-gradient(135deg,#fff 0%,#fbf8f1 100%); } .quote-trade-select-field .dp-smart-select.is-open .dp-smart-trigger,.quote-quality-select-field .dp-smart-select.is-open .dp-smart-trigger,.quote-margin-select-field .dp-smart-select.is-open .dp-smart-trigger{ box-shadow:0 0 0 4px rgba(207,91,63,.08),0 10px 28px rgba(26,37,34,.07) } /* Le menu langue devient une micro-interface plutôt qu'un bloc qui apparaît. */ .sidebar-language-panel{transform:translateY(-8px) scale(.98);transform-origin:bottom left;opacity:0;visibility:hidden;transition:opacity .2s var(--ease),transform .25s var(--ease),visibility .2s} .sidebar-language.open .sidebar-language-panel{opacity:1;visibility:visible;transform:none} .sidebar-language-panel button{transition:background .16s ease,color .16s ease,transform .16s ease} .sidebar-language-panel button:hover{transform:translateX(3px)} @media(max-width:760px){ .dp-smart-trigger{min-height:52px;border-radius:15px;padding-left:15px} .dp-smart-panel{max-height:44vh;border-radius:17px} .dp-smart-option{min-height:44px;padding-top:12px;padding-bottom:12px;font-size:14px} .sidebar-home-hint{display:none} } @media(prefers-reduced-motion:reduce){ .dp-smart-trigger,.dp-smart-panel,.dp-smart-chevron,.dp-smart-option,.sidebar-home-brand,.sidebar-home-hint{transition:none!important;animation:none!important} } /* ============================================================ V1.3 — INTERNATIONAL UI / LANGUAGE SELECTOR ============================================================ */ .dp-language-picker{position:relative;direction:ltr!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} .dp-language-trigger-v13{width:100%;min-height:48px;border:1px solid rgba(226,236,230,.16);border-radius:14px;background:rgba(255,255,255,.035);color:#edf1ee;display:grid;grid-template-columns:34px minmax(0,1fr) 22px;gap:10px;align-items:center;padding:8px 10px;cursor:pointer;text-align:left;transition:background .18s ease,border-color .18s ease,transform .18s ease} .dp-language-trigger-v13:active{transform:scale(.985)} .dp-language-trigger-v13 .dp-lang-flag{font-size:21px;line-height:1;filter:saturate(.92)} .dp-language-trigger-v13 .dp-lang-copy{min-width:0;display:flex;flex-direction:column;gap:2px} .dp-language-trigger-v13 .dp-lang-copy small{font-size:7px;letter-spacing:.18em;text-transform:uppercase;color:#86938d;font-weight:800} .dp-language-trigger-v13 .dp-lang-copy strong{font-size:11px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f5f3ed} .dp-language-trigger-v13 .dp-lang-arrow{font-size:16px;color:#8d9993;transition:transform .2s ease;text-align:center} .dp-language-picker.open .dp-lang-arrow{transform:rotate(180deg)} .dp-language-panel-v13{position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:120;padding:7px;background:#182720;border:1px solid rgba(236,239,235,.17);border-radius:16px;box-shadow:0 20px 46px rgba(0,0,0,.34);opacity:0;visibility:hidden;transform:translateY(7px) scale(.985);transform-origin:bottom center;transition:opacity .18s ease,transform .22s cubic-bezier(.2,.75,.25,1),visibility .18s;max-height:min(390px,70vh);overflow:auto;overscroll-behavior:contain} .dp-language-picker.open .dp-language-panel-v13{opacity:1;visibility:visible;transform:none} .dp-language-option-v13{width:100%;min-height:46px;border:0;border-radius:10px;background:transparent;color:#c6cfca;display:grid;grid-template-columns:30px minmax(0,1fr) 28px;gap:10px;align-items:center;padding:7px 9px;text-align:left;cursor:pointer;transition:background .14s ease,color .14s ease,transform .14s ease} .dp-language-option-v13 .flag{font-size:19px;line-height:1} .dp-language-option-v13 .names{min-width:0;display:flex;align-items:baseline;justify-content:space-between;gap:10px} .dp-language-option-v13 .native{font-size:10px;font-weight:800;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dp-language-option-v13 .code{font-size:7px;letter-spacing:.15em;color:#74817b;flex:0 0 auto} .dp-language-option-v13 .check{font-size:12px;color:#d3694b;opacity:0;text-align:center} .dp-language-option-v13.active{background:#263a31;color:#fff} .dp-language-option-v13.active .check{opacity:1} @media (hover:hover) and (pointer:fine){.dp-language-option-v13:hover{background:#22352d;color:#fff;transform:translateX(2px)}.dp-language-trigger-v13:hover{background:rgba(255,255,255,.06);border-color:rgba(226,236,230,.25)}} /* Sidebar picker replaces the old overlapping 2-column list. */ .sidebar-language{margin:12px 14px 10px!important;z-index:85!important} .sidebar-language>.sidebar-language-trigger,.sidebar-language>.sidebar-language-panel{display:none!important} .sidebar-language .dp-language-panel-v13{bottom:calc(100% + 8px);top:auto} /* Gateway: one clean international control instead of nine cramped labels. */ .gateway-language-bar{min-height:62px!important;overflow:visible!important;display:flex!important;justify-content:flex-end!important;align-items:center!important;padding:7px max(18px,calc((100% - 1420px)/2 + 24px))!important;background:rgba(7,12,10,.63)!important} .gateway-language-bar>.dp-language-picker{width:min(255px,72vw)} .gateway-language-bar .dp-language-panel-v13{top:calc(100% + 8px);bottom:auto;transform-origin:top center} .gateway-language-bar .dp-language-trigger-v13{background:rgba(255,255,255,.045)} /* Client header gets the same readable language control. */ .client-mini-language>.client-mini-language-panel,.client-mini-language>button{display:none!important} .client-mini-language{width:172px;max-width:46vw;margin-right:8px!important;z-index:90} .client-mini-language .dp-language-panel-v13{top:calc(100% + 7px);bottom:auto;background:#fff;border-color:#ddd8cf;box-shadow:0 18px 40px rgba(20,27,24,.14);transform-origin:top right} .client-mini-language .dp-language-trigger-v13{min-height:38px;border-color:#d8d4cb;background:#faf8f3;color:#1c2923;padding:5px 8px;grid-template-columns:27px minmax(0,1fr) 18px} .client-mini-language .dp-language-trigger-v13 .dp-lang-flag{font-size:17px} .client-mini-language .dp-language-trigger-v13 .dp-lang-copy small{display:none} .client-mini-language .dp-language-trigger-v13 .dp-lang-copy strong{color:#1c2923;font-size:9px} .client-mini-language .dp-language-option-v13{color:#425048} .client-mini-language .dp-language-option-v13.active{background:#edf1ed;color:#17261f} .client-mini-language .dp-language-option-v13 .code{color:#8d9691} @media(max-width:560px){ .gateway-language-bar{min-height:56px!important;padding:6px 14px!important} .gateway-language-bar>.dp-language-picker{width:210px;max-width:70vw} .dp-language-trigger-v13{min-height:44px;grid-template-columns:30px minmax(0,1fr) 18px;padding:6px 9px} .dp-language-trigger-v13 .dp-lang-flag{font-size:18px} .dp-language-trigger-v13 .dp-lang-copy strong{font-size:10px} .dp-language-panel-v13{max-height:62vh} .dp-language-option-v13{min-height:44px} } @media(prefers-reduced-motion:reduce){.dp-language-panel-v13,.dp-language-option-v13,.dp-language-trigger-v13,.dp-lang-arrow{transition:none!important}} /* ===== V1.4 — hiérarchie, relief et lisibilité des actions ===== */ :root{ --dp14-ink:#17241f; --dp14-paper:#fbf7ee; --dp14-coral:#cf6248; --dp14-coral-soft:#f1d2c5; --dp14-green:#173028; --dp14-line:rgba(23,36,31,.14); --dp14-shadow-1:0 1px 0 rgba(255,255,255,.82) inset,0 10px 24px rgba(18,32,27,.055),0 2px 6px rgba(18,32,27,.035); --dp14-shadow-2:0 1px 0 rgba(255,255,255,.88) inset,0 18px 48px rgba(18,32,27,.09),0 5px 14px rgba(18,32,27,.05); } /* Surfaces : relief léger, jamais “flottant” au point de gêner la lecture */ .card, .metric-card, .principle-card, .site-extra-card, .coming-card, .admin-panel, .partner-rule, .partner-hero, .trade-browser, .international-card, .branding-card, .supplier-import, .request-filters, .prices-toolbar{ border-color:var(--dp14-line)!important; box-shadow:var(--dp14-shadow-1); position:relative; } .card:after, .metric-card:after, .principle-card:after, .site-extra-card:after, .coming-card:after, .partner-rule:after, .trade-browser:after{ content:""; pointer-events:none; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 1px 0 rgba(255,255,255,.68); } /* Cartes réellement importantes : un peu plus de profondeur */ #dashboard .quick-entry, #dashboard .weather-widget, #dashboard .artisan-gazette, .estimate-card, .partner-hero, .admin-hero, .onboarding-card, .send-quote-card{ box-shadow:var(--dp14-shadow-2)!important; } /* Hiérarchie des pages : le texte explique d'abord, l'action est ensuite évidente */ .page-head,.view-heading{ position:relative; padding-bottom:18px; margin-bottom:24px; } .page-head:after,.view-heading:after{ content:""; position:absolute; left:0;right:0;bottom:0; height:1px; background:linear-gradient(90deg,var(--dp14-coral) 0 56px,var(--dp14-line) 56px 100%); } .page-head>div,.view-heading>div{min-width:0;max-width:850px} .page-head .kicker,.view-heading .kicker,.card-head .kicker,.section-head .kicker{ color:var(--dp14-coral); letter-spacing:.16em; } .page-head>button,.page-head>.btn,.view-heading>button,.view-heading>.btn{ flex:0 0 auto; min-height:46px; padding-inline:18px; } /* Actions : distinction nette primaire / secondaire */ .btn,.text-btn,.sidebar nav button{ -webkit-tap-highlight-color:transparent; } .btn-accent,.btn.accent{ background:linear-gradient(180deg,#d86a50 0%,#c85840 100%)!important; color:#fff!important; border:1px solid rgba(125,49,33,.18)!important; box-shadow:0 9px 22px rgba(183,77,54,.18),inset 0 1px 0 rgba(255,255,255,.24)!important; } .btn-dark,.btn.dark{ background:linear-gradient(180deg,#1b3029,#14261f)!important; color:#fff!important; border:1px solid rgba(8,20,16,.28)!important; box-shadow:0 8px 20px rgba(16,34,28,.14),inset 0 1px 0 rgba(255,255,255,.08)!important; } .btn-ghost,.btn.ghost{ background:rgba(255,252,246,.72)!important; border:1px solid rgba(23,36,31,.15)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.86)!important; } /* Les zones de saisie deviennent de vrais “modules d'action” */ .field>span,label>span,.quote-input-card label,.supplier-import label{ letter-spacing:.115em; } input,textarea,select{ border-color:rgba(23,36,31,.16); box-shadow:inset 0 1px 2px rgba(20,35,30,.025),0 1px 0 rgba(255,255,255,.72); } input:focus,textarea:focus,select:focus{ border-color:rgba(207,98,72,.7)!important; box-shadow:0 0 0 4px rgba(207,98,72,.09),inset 0 1px 2px rgba(20,35,30,.025)!important; } /* Titres de cartes : meilleure séparation entre explication et interaction */ .card-head,.section-head,.step-title{ position:relative; } .card-head{padding-bottom:12px;margin-bottom:2px} .card-head:after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(23,36,31,.09); } .card-head h2,.section-head h2{color:var(--dp14-ink)} .helper,.page-head p,.view-heading p,.card p{max-width:72ch} /* Métriques : relief et lecture instantanée */ .metric-card{ background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(247,241,230,.82))!important; min-height:128px; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; } .metric-card>b{color:var(--dp14-green)} .metric-card:before{width:4px!important;border-radius:4px} .principle-card{ background:linear-gradient(145deg,#eaf0eb,#e2ebe5)!important; border-color:rgba(39,86,67,.16)!important; } /* Navigation : l'état actif ressemble à une destination, pas à un simple survol */ .sidebar nav>button.active:not(.partner-nav-button){ background:linear-gradient(90deg,rgba(255,255,255,.11),rgba(255,255,255,.055))!important; box-shadow:inset 4px 0 0 var(--dp14-coral),0 7px 18px rgba(0,0,0,.08)!important; } .sidebar nav>button.active:not(.partner-nav-button) span{transform:scale(1.05)} .sidebar nav>button{position:relative;overflow:hidden} .sidebar nav>button:after{ content:"";position:absolute;right:13px;width:5px;height:5px;border-radius:50%;background:transparent;transition:.18s ease; } .sidebar nav>button.active:after{background:var(--dp14-coral);box-shadow:0 0 0 4px rgba(207,98,72,.10)} /* Tableaux / listes : créer du relief sans alourdir */ .table-wrap,.supplier-table-wrap,.admin-table-wrap{ background:rgba(255,255,255,.5); box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 6px 18px rgba(20,35,30,.035); } /* Interactions pointeur uniquement : aucun mouvement parasite sur mobile */ @media (hover:hover) and (pointer:fine){ .card:not(.weather-widget):not(.artisan-gazette):hover, .metric-card:hover,.site-extra-card:hover,.partner-rule:hover{ transform:translateY(-2px); box-shadow:var(--dp14-shadow-2); border-color:rgba(207,98,72,.20)!important; } .btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0)} } /* Mobile : ordre clair = explication puis action, sans boutons coincés à droite */ @media(max-width:700px){ .page-head,.view-heading{display:grid!important;grid-template-columns:1fr!important;gap:14px!important;padding-bottom:17px!important} .page-head>button,.page-head>.btn,.view-heading>button,.view-heading>.btn{width:100%;justify-content:center;margin:0!important} .page-head h1{max-width:12ch} .card-head{align-items:flex-start!important;flex-wrap:wrap} .card-head>.shortcut{margin-left:0} .metric-card{min-height:112px} .card,.metric-card,.principle-card{box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 8px 22px rgba(18,32,27,.055)} } @media(prefers-reduced-motion:reduce){ .card,.metric-card,.site-extra-card,.partner-rule,.btn,.sidebar nav>button{transform:none!important;transition:none!important} } /* V1.5.2 — statut linguistique non bloquant. Le site reste entièrement utilisable. */ #dpV15TranslationCurtain{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:10050;display:block;max-width:min(360px,calc(100vw - 28px));opacity:0;transform:translateY(8px) scale(.98);pointer-events:none;transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1)} #dpV15TranslationCurtain.show{opacity:1;transform:translateY(0) scale(1);pointer-events:none} .dp-v15-translation-card{display:flex;align-items:center;gap:10px;padding:10px 13px;border:1px solid rgba(21,45,39,.14);border-radius:16px;background:rgba(255,253,248,.94);box-shadow:0 10px 30px rgba(21,45,39,.13),inset 0 1px rgba(255,255,255,.9);color:#102d27;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .dp-v15-translation-card strong{display:block;font-size:12px;line-height:1.2}.dp-v15-translation-card small{display:block;margin-top:2px;color:#6e756f;font-size:10px;line-height:1.25} .dp-v15-spinner{width:16px;height:16px;flex:0 0 auto;border:2px solid rgba(210,94,68,.2);border-top-color:#d25e44;border-radius:50%;animation:dpV15Spin .72s linear infinite} @keyframes dpV15Spin{to{transform:rotate(360deg)}} @media(max-width:560px){#dpV15TranslationCurtain{left:14px;right:14px;bottom:max(14px,env(safe-area-inset-bottom));max-width:none}.dp-v15-translation-card{width:max-content;max-width:100%;margin-left:auto;padding:9px 11px}.dp-v15-translation-card small{display:none}} @media(prefers-reduced-motion:reduce){#dpV15TranslationCurtain{transition:none}.dp-v15-spinner{animation:none;border-top-color:#d25e44}} /* ===== V1.5.1 — HIERARCHIE TABLEAU DE BORD ===== */ #dashboard .dp1-section-index button.is-priority:not(.is-active){ color:var(--dp1-forest); background:rgba(207,98,72,.10); border-color:rgba(207,98,72,.18); } #dashboard .dp1-section-index button.is-priority:not(.is-active) i{ box-shadow:0 0 0 4px rgba(207,98,72,.08); } #dashboard .dp1-section-index button.is-accessory:not(.is-active){ opacity:.72; } #dashboard #dp1Chiffrage{ border-color:rgba(207,98,72,.20); } /* V5.3.8 — Programme partenaire +10 inscription */ .partner-referral-rule{border-color:#c86f4c;background:linear-gradient(180deg,#fffaf6 0%,#fff 100%);position:relative;overflow:hidden}.partner-referral-rule:after{content:"INSCRIPTION";position:absolute;right:14px;top:14px;font-size:8px;font-weight:900;letter-spacing:.12em;color:#c86f4c;background:#fff1e9;border:1px solid #efd3c5;padding:5px 7px;border-radius:999px} /* V1.5.4 — saisie naturelle + hiérarchie de fiabilité des prix */ .dp-natural-hint{margin-top:14px;padding:12px 14px;border-left:3px solid var(--accent);background:rgba(216,93,65,.055);border-radius:0 12px 12px 0;display:grid;gap:3px}.dp-natural-hint strong{font-size:11px;color:var(--dark)}.dp-natural-hint span{font-size:9px;line-height:1.5;color:#77817d}.dp-description-examples{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important}.dp-description-examples .description-example{border-radius:13px!important;text-align:left!important;padding:10px 11px!important;display:grid;gap:4px;min-width:0}.dp-description-examples .description-example b{font-size:9px;color:var(--dark)}.dp-description-examples .description-example span{font-size:8px;font-weight:600;line-height:1.35;color:#7b8581;white-space:normal}.dp-description-examples .description-example:hover span{color:rgba(255,255,255,.78)} .price-reliability-legend{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}.price-reliability-legend>span{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border:1px solid var(--line);background:#faf8f3;border-radius:999px;font-size:8px;color:#69736f}.price-reliability-legend i,.price-confidence-cell>i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}.price-reliability-legend b{font-size:8px}.trust-good i,.estimate-table tr.trust-good .price-confidence-cell>i{background:#39815f}.trust-review i,.estimate-table tr.trust-review .price-confidence-cell>i{background:#d78a32}.trust-web i,.estimate-table tr.trust-web .price-confidence-cell>i{background:#c94d45}.price-confidence-cell{display:flex;align-items:center;gap:7px}.price-confidence-cell input{min-width:82px}.estimate-table tr.trust-good .price-confidence-cell input{border-color:rgba(57,129,95,.34)}.estimate-table tr.trust-review .price-confidence-cell input{border-color:rgba(215,138,50,.42)}.estimate-table tr.trust-web .price-confidence-cell input{border-color:rgba(201,77,69,.42)}.source-badge.custom,.source-badge.supplier,.source-badge.supplier_document,.source-badge.catalog{background:#e5f1ec!important;color:#2e674f!important}.source-badge.reference{background:#fff0dc!important;color:#865b20!important}.source-badge.market,.source-badge.market_review{background:#f7dfdc!important;color:#9a3934!important} @media(max-width:620px){.dp-description-examples{grid-template-columns:1fr!important}.price-reliability-legend{display:grid;grid-template-columns:1fr}.price-reliability-legend>span{border-radius:10px;justify-content:flex-start}} /* ============================================================ V1.5.5 — SYSTÈME PLANÉTAIRE DU PILOTAGE Le chantier reste le centre. Les indicateurs gravitent autour indépendamment du scroll : aucune inclinaison / fuite en perspective. ============================================================ */ #dashboard #dp1Pilotage{ transform:none!important; opacity:1!important; perspective:none!important; } #dashboard #dp1Pilotage.dp-scroll-react, #dashboard #dp1Pilotage.dp11-camera-stage{ transform:none!important; } #dashboard #dp1Pilotage .hero-orbit{ --planet-size:92px; --orbit-a:188px; --orbit-b:224px; --orbit-c:258px; position:relative!important; min-height:278px!important; width:min(100%,330px)!important; margin:auto!important; overflow:visible!important; transform:none!important; isolation:isolate; } #dashboard #dp1Pilotage .hero-orbit::before{ content:none!important; } #dashboard #dp1Pilotage .orbit-ring, #dashboard #dp1Pilotage .orbit-label{ display:none!important; } #dashboard #dp1Pilotage .orbit-center{ width:var(--planet-size)!important; height:var(--planet-size)!important; left:50%!important; top:50%!important; transform:translate(-50%,-50%)!important; border-radius:50%!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:3px!important; background:radial-gradient(circle at 35% 28%,#fffdf8 0,#f5f1e8 54%,#e7dfd1 100%)!important; border:1px solid rgba(255,255,255,.7)!important; box-shadow:0 14px 34px rgba(7,20,17,.24), inset 0 0 0 1px rgba(19,54,45,.08)!important; z-index:8!important; } #dashboard #dp1Pilotage .orbit-center img{ width:42px!important; height:42px!important; object-fit:contain!important; } #dashboard #dp1Pilotage .orbit-center strong{ font:900 7px/1 var(--dp545-sans,Arial,sans-serif); letter-spacing:.17em; color:#16342c; } #dashboard #dp1Pilotage .orbit-track{ position:absolute; left:50%;top:50%; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; z-index:1; } #dashboard #dp1Pilotage .orbit-track-1{ width:var(--orbit-a);height:var(--orbit-a); border:1px solid rgba(220,229,224,.24); } #dashboard #dp1Pilotage .orbit-track-2{ width:var(--orbit-b);height:var(--orbit-b); border:1px dashed rgba(220,229,224,.16); } #dashboard #dp1Pilotage .orbit-track-3{ width:var(--orbit-c);height:var(--orbit-c); border:1px solid rgba(207,98,72,.13); } #dashboard #dp1Pilotage .dp-satellite{ position:absolute; left:50%;top:50%; border-radius:50%; pointer-events:none; z-index:5; transform-origin:center; will-change:transform; } #dashboard #dp1Pilotage .dp-satellite .satellite-content{ position:absolute; left:50%;top:-7px; display:flex; align-items:center; gap:7px; white-space:nowrap; transform:translateX(-50%); font:800 8px/1 var(--dp545-sans,Arial,sans-serif); text-transform:uppercase; letter-spacing:.12em; color:rgba(235,240,236,.82); } #dashboard #dp1Pilotage .dp-satellite .satellite-content i{ width:10px;height:10px;border-radius:50%; display:block;flex:0 0 auto; box-shadow:0 0 0 4px rgba(255,255,255,.035),0 5px 14px rgba(0,0,0,.24); } #dashboard #dp1Pilotage .sat-margin{ width:var(--orbit-a);height:var(--orbit-a);margin:calc(var(--orbit-a)/-2); animation:dpPlanetSpinA 9s linear infinite; } #dashboard #dp1Pilotage .sat-margin .satellite-content{animation:dpPlanetCounterA 9s linear infinite} #dashboard #dp1Pilotage .sat-margin i{background:#d8b665} #dashboard #dp1Pilotage .sat-time{ width:var(--orbit-b);height:var(--orbit-b);margin:calc(var(--orbit-b)/-2); animation:dpPlanetSpinB 13s linear infinite reverse; } #dashboard #dp1Pilotage .sat-time .satellite-content{animation:dpPlanetCounterB 13s linear infinite reverse} #dashboard #dp1Pilotage .sat-time i{background:#79b9aa} #dashboard #dp1Pilotage .sat-cost{ width:var(--orbit-c);height:var(--orbit-c);margin:calc(var(--orbit-c)/-2); animation:dpPlanetSpinC 17s linear infinite; } #dashboard #dp1Pilotage .sat-cost .satellite-content{animation:dpPlanetCounterC 17s linear infinite} #dashboard #dp1Pilotage .sat-cost i{background:#e67b5d} #dashboard #dp1Pilotage .sat-reliability{ width:calc(var(--orbit-b) - 18px);height:calc(var(--orbit-b) - 18px); margin:calc((var(--orbit-b) - 18px)/-2); animation:dpPlanetSpinD 11s linear infinite; animation-delay:-5s; } #dashboard #dp1Pilotage .sat-reliability .satellite-content{animation:dpPlanetCounterD 11s linear infinite;animation-delay:-5s} #dashboard #dp1Pilotage .sat-reliability i{background:#e9eee8} @keyframes dpPlanetSpinA{from{transform:rotate(20deg)}to{transform:rotate(380deg)}} @keyframes dpPlanetCounterA{from{transform:translateX(-50%) rotate(-20deg)}to{transform:translateX(-50%) rotate(-380deg)}} @keyframes dpPlanetSpinB{from{transform:rotate(112deg)}to{transform:rotate(472deg)}} @keyframes dpPlanetCounterB{from{transform:translateX(-50%) rotate(-112deg)}to{transform:translateX(-50%) rotate(-472deg)}} @keyframes dpPlanetSpinC{from{transform:rotate(222deg)}to{transform:rotate(582deg)}} @keyframes dpPlanetCounterC{from{transform:translateX(-50%) rotate(-222deg)}to{transform:translateX(-50%) rotate(-582deg)}} @keyframes dpPlanetSpinD{from{transform:rotate(305deg)}to{transform:rotate(665deg)}} @keyframes dpPlanetCounterD{from{transform:translateX(-50%) rotate(-305deg)}to{transform:translateX(-50%) rotate(-665deg)}} @media(max-width:1050px){ #dashboard #dp1Pilotage .hero-orbit{width:285px!important;--planet-size:82px;--orbit-a:164px;--orbit-b:198px;--orbit-c:230px} #dashboard #dp1Pilotage .dp-satellite .satellite-content{font-size:7px;letter-spacing:.09em} } @media(max-width:820px){ #dashboard #dp1Pilotage .hero-orbit{display:none!important} } @media(prefers-reduced-motion:reduce){ #dashboard #dp1Pilotage .dp-satellite, #dashboard #dp1Pilotage .dp-satellite .satellite-content{animation:none!important} #dashboard #dp1Pilotage .sat-margin{transform:rotate(25deg)!important} #dashboard #dp1Pilotage .sat-time{transform:rotate(125deg)!important} #dashboard #dp1Pilotage .sat-cost{transform:rotate(225deg)!important} #dashboard #dp1Pilotage .sat-reliability{transform:rotate(315deg)!important} } /* V1.5.6 — devis progressif / informations client facultatives */ .quote-progressive-note{margin:14px 0 18px;padding:14px 16px;border:1px solid rgba(215,96,70,.20);border-left:3px solid var(--accent,#d76046);border-radius:16px;background:linear-gradient(135deg,rgba(215,96,70,.07),rgba(255,255,255,.45));display:flex;gap:5px;flex-direction:column;color:var(--ink,#12231e)} .quote-progressive-note b{font-size:.94rem}.quote-progressive-note span{font-size:.84rem;line-height:1.45;color:#6e7772} .dp-draft-flag{display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:6px 9px;border-radius:999px;border:1px solid rgba(214,145,42,.35);background:rgba(214,145,42,.10);color:#9a6518;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase} .dp-draft-flag::before{content:"";width:7px;height:7px;border-radius:50%;background:#d6912a} @media(max-width:700px){.quote-progressive-note{margin-top:10px;padding:13px 14px}.quote-progressive-note span{font-size:.82rem}} /* ============================================================ V1.5.7 — ÉPURATION UX / DEVIS LISIBLES Objectif : conserver toutes les fonctions, réduire la densité et supprimer les collisions de texte sur desktop/tablette. ============================================================ */ :root{ --dp157-space-1:8px; --dp157-space-2:14px; --dp157-space-3:20px; --dp157-space-4:28px; --dp157-line:rgba(23,36,31,.11); --dp157-soft:#faf8f2; } /* Respiration générale des écrans métier */ #quote.view{max-width:1500px;margin-inline:auto} #quote .page-head{margin-bottom:30px} #quote .page-head p{max-width:62ch} #quote .quote-layout{ grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr); gap:24px; align-items:start; } #quote .quote-input-card,#quote .reading-card{padding:26px} #quote .quote-input-card{overflow:visible} #quote .reading-card{position:relative} /* Le cadrage ne doit plus fabriquer une colonne de texte trop étroite. */ #quote .quote-trade-start{ display:block; padding:24px; margin:0 0 24px; border-radius:18px; background:linear-gradient(145deg,rgba(239,244,239,.9),rgba(250,247,240,.92)); border:1px solid rgba(55,82,70,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.9); } #quote .quote-trade-start-copy{ display:grid; grid-template-columns:minmax(220px,.52fr) minmax(0,1fr); gap:24px; align-items:end; padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--dp157-line); } #quote .quote-trade-start-copy h3{ font-size:clamp(25px,2.2vw,34px); line-height:1.02; letter-spacing:-.035em; margin:6px 0 0; max-width:13ch; } #quote .quote-trade-start-copy p{ font-size:12px; line-height:1.6; max-width:58ch; margin:0; color:#69736e; } #quote .quote-start-controls{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 12px; align-items:start; } #quote .quote-start-controls .field{margin:0;min-width:0} #quote .quote-trade-select-field{grid-column:1} #quote .quote-quality-select-field{grid-column:2} #quote .quote-margin-select-field{grid-column:3} #quote .quote-quality-hint{ grid-column:2; margin:0; min-height:54px; padding:10px 12px; border-left:2px solid rgba(199,116,79,.72); border-radius:0 10px 10px 0; background:rgba(255,255,255,.48); font-size:9.5px; line-height:1.45; } #quote .quote-margin-hint{ grid-column:3; margin:0; min-height:54px; padding:10px 12px; border-left:2px solid rgba(61,112,89,.42); border-radius:0 10px 10px 0; background:rgba(255,255,255,.48); font-size:9.5px; line-height:1.45; } #quote .quote-quality-requirements{grid-column:1/-1;margin-top:2px} #quote .quote-quality-requirements input{min-height:48px} /* Comparatif : information utile mais secondaire, donc plus léger. */ #quote .quality-scenarios{ margin:0 0 24px; padding:18px; border-radius:16px; background:rgba(251,250,246,.75); box-shadow:none; } #quote .quality-scenarios-head{align-items:start;margin-bottom:14px} #quote .quality-scenarios-head small{max-width:48ch;line-height:1.55} #quote .quality-scenario-grid{gap:9px} #quote .quality-scenario{padding:12px 10px;min-height:78px} /* Sections et formulaires : rythme vertical plus net. */ #quote .step-title{padding-bottom:15px;margin:0 0 20px} #quote textarea#quoteDesc{min-height:126px;line-height:1.55} #quote .example-chips.compact{margin:14px 0 22px} #quote .triple-grid{gap:14px} #quote .quote-progressive-note{margin:18px 0 20px} #quote .btn-block{margin-top:20px;min-height:52px} /* Lecture métier : séparer les décisions plutôt que les empiler visuellement. */ #quote .reading-card>.step-title{margin-bottom:18px} #quote .trade-pill{margin-bottom:16px} #quote .quote-scope-summary{ margin:0 0 22px; padding:16px; border-radius:14px; background:#faf9f5; border:1px solid var(--dp157-line); } #quote .scope-chips{gap:8px!important} #quote .scope-chip{margin:0!important} #quote .site-extras-panel{ margin:0 0 22px; padding:18px; border-radius:16px; background:linear-gradient(140deg,rgba(200,105,72,.045),transparent 48%),#fbfaf6; } #quote .site-extras-head{margin-bottom:16px;gap:18px} #quote .site-extras-head h3{font-size:23px;line-height:1.12;margin-top:6px} #quote .site-extras-head p{font-size:10px;line-height:1.55;max-width:46ch} #quote .site-extras-grid{gap:10px} #quote .site-extra-card{ padding:14px; min-height:104px; border-radius:12px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; box-shadow:none; } #quote .site-extra-card>div:first-child b{font-size:10px;line-height:1.25} #quote .site-extra-card>div:first-child small{display:block;font-size:8px;line-height:1.45;margin-top:5px} #quote .site-extra-controls{max-width:150px;gap:7px} #quote .site-extra-controls input{width:74px;font-size:10px;padding:8px} #quote .site-extra-controls span{font-size:8px;line-height:1.25} #quote .site-extra-controls button{font-size:8px;padding:8px 10px} #quote .site-extras-note{margin-top:12px;font-size:8px;line-height:1.45} /* Les cartes de la page devis ne bougent plus au survol : priorité à la stabilité. */ @media (hover:hover) and (pointer:fine){ #quote .card:hover,#quote .site-extra-card:hover{transform:none!important} } /* Tablette : une seule colonne de page est plus claire que deux panneaux étroits. */ @media(max-width:1240px){ #quote .quote-layout{grid-template-columns:1fr;gap:20px} #quote .reading-card{max-width:none} } @media(max-width:900px){ #quote .quote-trade-start-copy{grid-template-columns:1fr;gap:10px;align-items:start} #quote .quote-trade-start-copy h3{max-width:none} #quote .quote-start-controls{grid-template-columns:1fr 1fr} #quote .quote-trade-select-field{grid-column:1} #quote .quote-quality-select-field{grid-column:2} #quote .quote-margin-select-field{grid-column:1} #quote .quote-margin-hint{grid-column:1} #quote .quote-quality-hint{grid-column:2;grid-row:2} #quote .quote-quality-requirements{grid-column:1/-1} } @media(max-width:650px){ #quote .quote-input-card,#quote .reading-card{padding:18px} #quote .quote-trade-start{padding:18px;margin-bottom:20px} #quote .quote-start-controls{grid-template-columns:1fr} #quote .quote-trade-select-field,#quote .quote-quality-select-field,#quote .quote-margin-select-field, #quote .quote-margin-hint,#quote .quote-quality-hint,#quote .quote-quality-requirements{grid-column:1;grid-row:auto} #quote .site-extras-grid{grid-template-columns:1fr} #quote .site-extra-card{grid-template-columns:1fr;min-height:0} #quote .site-extra-controls{max-width:none;justify-content:flex-start} } /* ============================================================ V1.5.8 — SÉLECTEUR DE LANGUE : ALIGNEMENT ROBUSTE Le drapeau ne peut plus chevaucher le libellé, même avec zoom/italien/RTL. ============================================================ */ .sidebar-language{margin:14px 18px 10px!important} .sidebar-language-trigger{ display:flex!important;align-items:center!important;gap:12px!important; min-height:58px!important;padding:10px 14px!important;overflow:hidden!important; } .sidebar-language-trigger .language-globe{ position:static!important;transform:none!important;flex:0 0 34px!important; width:34px!important;height:34px!important;border-radius:50%!important; } .sidebar-language-trigger .language-current{ min-width:0!important;flex:1 1 auto!important;display:flex!important; flex-direction:column!important;justify-content:center!important;overflow:hidden!important; } .sidebar-language-trigger .language-current small{ position:static!important;display:block!important;margin:0 0 4px!important; line-height:1!important;white-space:nowrap!important; } .sidebar-language-trigger .language-current b{ display:block!important;max-width:100%!important;line-height:1.15!important; white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important; } .sidebar-language-trigger .language-chevron{ position:static!important;flex:0 0 18px!important;margin-left:auto!important; } html[dir="rtl"] .sidebar-language-trigger{text-align:right!important} html[dir="rtl"] .sidebar-language-trigger .language-chevron{margin-left:0!important;margin-right:auto!important} @media(max-width:1100px){ .sidebar-language{margin-left:12px!important;margin-right:12px!important} .sidebar-language-trigger{gap:10px!important;padding-left:11px!important;padding-right:11px!important} } /* ===== V1.6.0 — IDENTITÉ DEVISPILOT 2026 + POLISH ===== */ :root{ --dp-brand-blue:#146ef5; --dp-brand-navy:#0b2748; --dp-brand-blue-soft:rgba(20,110,245,.10); } .gateway-brand-new{display:flex!important;align-items:center!important;gap:13px!important;min-width:0} .gateway-full-logo{width:clamp(155px,18vw,235px)!important;height:auto!important;max-height:58px!important;object-fit:contain!important;object-position:left center!important;filter:none!important} .gateway-brand-new small{font-size:8px!important;letter-spacing:.18em!important;text-transform:uppercase;color:#7f8988!important;white-space:nowrap} .sidebar-dp-mark{width:52px!important;height:52px!important;border-radius:14px!important;background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.025))!important;border:1px solid rgba(255,255,255,.10)!important;padding:7px!important;overflow:hidden!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important} .sidebar-dp-mark img{width:100%!important;height:100%!important;object-fit:contain!important;filter:drop-shadow(0 4px 10px rgba(0,0,0,.12))} .sidebar-home-brand{min-height:74px!important;padding:12px 14px!important;gap:12px!important;border-radius:18px!important} .sidebar-home-brand>div:nth-child(2){min-width:0!important} .sidebar-home-brand strong{font-size:17px!important;letter-spacing:-.02em!important} .sidebar-home-brand small{margin-top:4px!important;letter-spacing:.16em!important} .sidebar-home-hint{opacity:.42!important} /* New logo blue is reserved for brand/focus details; core green/terracotta UX remains intact. */ .sidebar-home-brand:focus-visible,.gateway-top-actions button:focus-visible{outline:2px solid var(--dp-brand-blue)!important;outline-offset:3px!important} .dp-smart-select.is-open,.dp-smart-select:focus-within{box-shadow:0 0 0 3px var(--dp-brand-blue-soft),0 14px 34px rgba(21,40,35,.09)!important} /* Additional spacing pass: calmer cards and clearer hierarchy */ .view .card,.quote-card,.dashboard-card{scroll-margin-top:98px} .view h1,.view h2,.view h3{text-wrap:balance} .view p{max-width:72ch} @media(max-width:760px){ .gateway-brand-new{gap:8px!important} .gateway-full-logo{width:145px!important;max-height:48px!important} .gateway-brand-new small{display:none!important} .sidebar-dp-mark{width:46px!important;height:46px!important;padding:6px!important;border-radius:13px!important} .sidebar-home-brand{min-height:66px!important} } /* ===== V1.6.1 — LOGO INTÉGRÉ / PALETTE HARMONISÉE ===== */ :root{ --dp-brand-blue:#2f78d2; --dp-brand-blue-bright:#438be4; --dp-brand-navy:#102b46; --dp-brand-cream:#f7f3e9; } /* Le bleu reste une signature de marque, le vert/terracotta restent les couleurs fonctionnelles. */ .sidebar, .loading-screen{ background:linear-gradient(155deg,#112b26 0%,#0f2723 52%,#0b2020 100%)!important; } .auth-visual{background:radial-gradient(circle at 72% 22%,rgba(47,120,210,.10),transparent 30%),linear-gradient(145deg,#111b19,#16302a)!important} .gateway.gateway-v43{background:radial-gradient(circle at 21% 10%,rgba(47,120,210,.055),transparent 26%),linear-gradient(145deg,#090f0e 0%,#0b1210 52%,#0e1714 100%)!important} /* Mot-symbole rendu en HTML : net, responsive et jamais déformé. */ .dp-brand-copy{min-width:0;display:flex;flex-direction:column;justify-content:center} .dp-wordmark{display:flex;align-items:baseline;white-space:nowrap;font:800 22px/1 Inter,Aptos,"SF Pro Display",system-ui,sans-serif;letter-spacing:-.055em} .dp-word-devis{color:var(--dp-brand-navy)} .dp-word-pilot{color:var(--dp-brand-blue)} .dp-word-net{color:var(--dp-brand-navy);font-size:.70em;margin-left:.06em;letter-spacing:-.03em} .dp-brand-copy small{display:block!important;margin-top:5px!important;font-size:8px!important;line-height:1!important;letter-spacing:.20em!important;text-transform:uppercase!important;color:#80908b!important;font-weight:800!important} /* Contextes sombres */ .gateway .dp-word-devis,.gateway .dp-word-net, .sidebar .dp-word-devis,.sidebar .dp-word-net, .loading-screen .dp-word-devis,.loading-screen .dp-word-net, .auth-visual .dp-word-devis,.auth-visual .dp-word-net, .entry-screen .dp-word-devis,.entry-screen .dp-word-net, .paywall-screen .dp-word-devis,.paywall-screen .dp-word-net{color:#f6f3eb} .gateway .dp-word-pilot,.sidebar .dp-word-pilot,.loading-screen .dp-word-pilot,.auth-visual .dp-word-pilot,.entry-screen .dp-word-pilot,.paywall-screen .dp-word-pilot{color:var(--dp-brand-blue-bright)} .gateway .dp-brand-copy small,.sidebar .dp-brand-copy small,.loading-screen .dp-brand-copy small,.auth-visual .dp-brand-copy small,.entry-screen .dp-brand-copy small,.paywall-screen .dp-brand-copy small{color:#899b96!important} /* Pictogramme : fond ivoire pour que le bleu marine reste lisible sur les fonds verts/noirs. */ .sidebar-dp-mark{ width:50px!important;height:50px!important;flex:0 0 50px!important; display:grid!important;place-items:center!important;padding:6px!important; border-radius:15px!important;background:linear-gradient(145deg,#fffdf8,#eee8dd)!important; border:1px solid rgba(255,255,255,.24)!important; box-shadow:0 9px 22px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.9)!important; overflow:hidden!important; } .sidebar-dp-mark img{width:100%!important;height:100%!important;display:block!important;object-fit:contain!important;filter:none!important} .gateway-mark-clean{width:46px!important;height:46px!important;flex-basis:46px!important;border-radius:14px!important} .gateway-brand-new{display:flex!important;align-items:center!important;gap:11px!important;min-width:0!important} .gateway-brand-new .dp-wordmark{font-size:20px} .gateway-brand-new .dp-brand-copy small{margin-top:6px!important} .sidebar-home-brand{gap:11px!important;align-items:center!important} .sidebar-home-brand .dp-wordmark{font-size:18px} .sidebar-home-brand .dp-brand-copy{overflow:hidden} .loading-brand .dp-wordmark,.brand-lockup .dp-wordmark{font-size:20px} .brand-lockup.centered .dp-brand-copy{text-align:left} /* La planète centrale est uniquement le chantier visuel : aucun mot parasite sous le logo. */ #dashboard #dp1Pilotage .orbit-center{gap:0!important} #dashboard #dp1Pilotage .orbit-center img{width:54px!important;height:54px!important;object-fit:contain!important} #dashboard #dp1Pilotage .orbit-center strong{display:none!important} /* Pont chromatique discret entre la nouvelle marque et l'interface existante. */ .sidebar nav button.active{background:linear-gradient(110deg,rgba(47,120,210,.08),rgba(255,255,255,.055))!important;border-left:3px solid var(--accent)!important} .sidebar nav button.active span{color:#d87858!important} .sync-pill i{box-shadow:0 0 0 3px rgba(47,120,210,.06)} .dp-smart-select.is-open,.dp-smart-select:focus-within{box-shadow:0 0 0 3px rgba(47,120,210,.09),0 14px 34px rgba(21,40,35,.09)!important} @media(max-width:760px){ .dp-wordmark{font-size:18px} .gateway-brand-new .dp-wordmark{font-size:17px} .sidebar-dp-mark{width:44px!important;height:44px!important;flex-basis:44px!important;padding:5px!important;border-radius:13px!important} .gateway-mark-clean{width:41px!important;height:41px!important;flex-basis:41px!important} } /* ============================================================ V1.6.3 — NETTOYAGE PARTENAIRE + LANGUE + LOGO SITE ============================================================ */ :root{ --dp-brand-accent:#d66549; --dp-brand-accent-soft:#e68a70; --dp-brand-deep:#14372f; --dp-brand-deep-2:#0d2924; --dp-brand-ivory:#f4efe5; --dp-brand-sage:#9aa89f; } /* Programme partenaire : suppression du bloc d'inscription redondant. */ .partner-grid.partner-grid-clean{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:20px!important; align-items:stretch!important; } .partner-grid.partner-grid-clean .partner-rule{ min-height:0!important; padding:28px 30px!important; } @media(max-width:800px){ .partner-grid.partner-grid-clean{grid-template-columns:1fr!important} } /* Sélecteur de langue : le drapeau occupe sa propre colonne réelle. */ .sidebar .dp-language-picker{width:100%!important;min-width:0!important} .sidebar .dp-language-trigger-v13{ display:flex!important; align-items:center!important; gap:13px!important; min-height:58px!important; padding:10px 13px!important; overflow:hidden!important; } .sidebar .dp-language-trigger-v13 .dp-lang-flag{ display:grid!important; place-items:center!important; width:30px!important; min-width:30px!important; max-width:30px!important; flex:0 0 30px!important; font-size:20px!important; line-height:1!important; overflow:visible!important; text-align:center!important; } .sidebar .dp-language-trigger-v13 .dp-lang-copy{ flex:1 1 auto!important; min-width:0!important; padding-left:2px!important; overflow:hidden!important; } .sidebar .dp-language-trigger-v13 .dp-lang-copy small{ display:block!important; margin:0 0 4px!important; line-height:1!important; } .sidebar .dp-language-trigger-v13 .dp-lang-copy strong{ display:block!important; min-width:0!important; max-width:100%!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; line-height:1.15!important; } .sidebar .dp-language-trigger-v13 .dp-lang-arrow{ flex:0 0 18px!important; width:18px!important; margin-left:auto!important; } /* Identité : vert profond + ivoire + terracotta, cohérente avec le produit. */ .dp-word-devis{color:var(--dp-brand-deep)!important} .dp-word-pilot{color:var(--dp-brand-accent)!important} .dp-word-net{color:#536c62!important} .gateway .dp-word-devis,.gateway .dp-word-net, .sidebar .dp-word-devis,.sidebar .dp-word-net, .loading-screen .dp-word-devis,.loading-screen .dp-word-net, .auth-visual .dp-word-devis,.auth-visual .dp-word-net, .entry-screen .dp-word-devis,.entry-screen .dp-word-net, .paywall-screen .dp-word-devis,.paywall-screen .dp-word-net{ color:var(--dp-brand-ivory)!important; } .gateway .dp-word-pilot,.sidebar .dp-word-pilot,.loading-screen .dp-word-pilot, .auth-visual .dp-word-pilot,.entry-screen .dp-word-pilot,.paywall-screen .dp-word-pilot{ color:var(--dp-brand-accent-soft)!important; } /* Le pictogramme n'est plus posé dans une pastille ivoire étrangère à la palette. */ .sidebar-dp-mark{ background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(214,101,73,.055))!important; border:1px solid rgba(244,239,229,.13)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 26px rgba(3,20,17,.16)!important; } .sidebar-dp-mark img{ filter:drop-shadow(0 5px 12px rgba(0,0,0,.14))!important; } .sidebar-home-brand{ background:linear-gradient(135deg,rgba(255,255,255,.028),rgba(214,101,73,.018))!important; } .sidebar-home-brand:hover{ background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(214,101,73,.038))!important; } /* Accent de marque harmonisé : plus de bleu électrique dans les éléments de focus. */ .sidebar-home-brand:focus-visible,.gateway-top-actions button:focus-visible{ outline-color:var(--dp-brand-accent)!important; } .dp-smart-select.is-open,.dp-smart-select:focus-within{ box-shadow:0 0 0 3px rgba(214,101,73,.12),0 14px 34px rgba(21,40,35,.09)!important; } /* Orbite : centre visuel sobre, sans libellé parasite. */ #dashboard #dp1Pilotage .orbit-center{ background:rgba(244,239,229,.96)!important; border-color:rgba(214,101,73,.24)!important; } #dashboard #dp1Pilotage .orbit-center img{filter:none!important} /* ============================================================ V1.6.4 — ORBITE INTERACTIVE Un clic/tap sur un satellite le fige sur sa position courante. Un second clic le relance sans affecter les autres planètes. ============================================================ */ #dashboard #dp1Pilotage .dp-satellite{pointer-events:none} #dashboard #dp1Pilotage .dp-satellite .satellite-content{ pointer-events:auto; appearance:none; -webkit-appearance:none; border:0; background:transparent; padding:10px 12px; margin:-10px -12px; color:inherit; cursor:pointer; border-radius:999px; touch-action:manipulation; transition:background .18s ease,box-shadow .18s ease,opacity .18s ease; } #dashboard #dp1Pilotage .dp-satellite .satellite-content:focus-visible{ outline:2px solid rgba(230,123,93,.9); outline-offset:3px; } #dashboard #dp1Pilotage .dp-satellite.is-paused, #dashboard #dp1Pilotage .dp-satellite.is-paused .satellite-content{ animation-play-state:paused!important; } #dashboard #dp1Pilotage .dp-satellite.is-paused .satellite-content{ background:rgba(246,241,232,.09); box-shadow:inset 0 0 0 1px rgba(246,241,232,.16),0 8px 20px rgba(0,0,0,.12); } #dashboard #dp1Pilotage .dp-satellite.is-paused .satellite-content i{ box-shadow:0 0 0 5px rgba(246,241,232,.08),0 0 0 8px rgba(230,123,93,.07),0 5px 14px rgba(0,0,0,.24); } @media(hover:hover) and (pointer:fine){ #dashboard #dp1Pilotage .dp-satellite .satellite-content:hover{ background:rgba(246,241,232,.06); } } /* ============================================================ V1.6.8 — EASTER EGG ORBITAL, trajectoire ancrée à la page. La planète éjectée vit en coordonnées document (position:absolute) afin qu'un scroll pendant le vol ne déforme plus sa trajectoire. Déclenchement : 3 cycles complets arrêt → relance. ============================================================ */ #dashboard #dp1Pilotage .dp-satellite.is-launching{ visibility:hidden; } .dp-orbit-ejecta{ position:absolute; z-index:99999; display:flex; align-items:center; gap:8px; pointer-events:none; white-space:nowrap; transform:translate(-50%,-50%); opacity:1; will-change:transform,opacity; filter:drop-shadow(0 10px 18px rgba(0,0,0,.28)); transform-origin:center; } .dp-orbit-ejecta::after{display:none} .dp-orbit-ejecta i{ width:13px; height:13px; border-radius:50%; display:block; flex:0 0 auto; position:relative; background:var(--planet,#e67b5d); box-shadow:0 0 0 5px rgba(255,255,255,.12),0 0 18px var(--planet,#e67b5d); } /* V1.6.7 — la traînée est attachée à la planète et orientée dynamiquement à l'opposé du vecteur de déplacement. */ .dp-orbit-ejecta i::after{ content:""; position:absolute; right:50%; top:50%; width:clamp(34px,7vw,116px); height:2px; border-radius:999px; transform:translateY(-50%) rotate(var(--flight-angle,0deg)); transform-origin:right center; background:linear-gradient(90deg,transparent,var(--trail,rgba(230,123,93,.78))); opacity:.78; transition:opacity .42s ease,width .42s ease; filter:blur(.15px); } /* Au retour, le vecteur de déplacement s'inverse : la traînée aussi. */ .dp-orbit-ejecta.is-returning i::after{ transform:translateY(-50%) rotate(calc(var(--flight-angle,0deg) + 180deg)); opacity:.34; } .dp-orbit-ejecta b{ font:900 9px/1 var(--dp545-sans,Arial,sans-serif); text-transform:uppercase; letter-spacing:.13em; color:#f7f2e8; text-shadow:0 2px 7px rgba(0,0,0,.36); transition:opacity .25s ease; } .dp-orbit-ejecta.is-returning b{opacity:.52} /* Secours pour les navigateurs sans Web Animations API. */ .dp-orbit-ejecta.legacy-flight{ animation:dpOrbitEscapeLegacy 2.35s cubic-bezier(.58,.02,.96,.38) forwards; } @keyframes dpOrbitEscapeLegacy{ 0%{transform:translate(-50%,-50%) translate3d(0,0,0) scale(1);opacity:1} 22%{transform:translate(-50%,-50%) translate3d(18px,8px,0) scale(1.04);opacity:1} 48%{transform:translate(-50%,-50%) translate3d(70px,32px,0) scale(1.07);opacity:1} 100%{transform:translate(-50%,-50%) translate3d(120vw,72vh,0) scale(.78);opacity:0} } @media(prefers-reduced-motion:reduce){ .dp-orbit-ejecta i::after{display:none} } /* V1.7.0 — centre légal / RGPD */ .dp-legal-footer{display:flex;justify-content:center;align-items:center;gap:9px;flex-wrap:wrap;margin:18px auto 8px;padding:0 18px;color:rgba(239,231,211,.58);font-size:12px;letter-spacing:.02em} .dp-legal-footer button{appearance:none;border:0;background:transparent;color:inherit;padding:5px 2px;cursor:pointer;font:inherit}.dp-legal-footer button:hover,.dp-legal-footer button:focus-visible{color:#e07359;text-decoration:underline;text-underline-offset:4px}.dp-legal-footer span{opacity:.45} .dp-legal-modal{position:fixed;inset:0;z-index:99990;display:grid;place-items:center;padding:28px}.dp-legal-modal.hidden{display:none!important}.dp-legal-backdrop{position:absolute;inset:0;background:rgba(6,20,18,.74);backdrop-filter:blur(8px)} .dp-legal-sheet{position:relative;width:min(940px,100%);max-height:min(820px,calc(100dvh - 56px));overflow:hidden;background:#f5f0e5;color:#172722;border:1px solid rgba(21,58,49,.16);border-radius:26px;box-shadow:0 24px 80px rgba(0,0,0,.3);display:grid;grid-template-rows:auto auto 1fr} .dp-legal-sheet>header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:26px 30px 18px;background:linear-gradient(145deg,#173d35,#0d2c27);color:#f7f1e4}.dp-legal-sheet>header span{display:block;color:#e07359;font-size:11px;font-weight:800;letter-spacing:.18em}.dp-legal-sheet>header h2{margin:7px 0 0;font-size:32px}.dp-legal-close{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font-size:28px;cursor:pointer} .dp-legal-tabs{display:flex;gap:6px;overflow:auto;padding:12px 18px;border-bottom:1px solid rgba(20,55,47,.12);background:#ebe5d8}.dp-legal-tabs button{white-space:nowrap;border:0;border-radius:999px;background:transparent;color:#50605b;padding:10px 14px;font-weight:750;cursor:pointer}.dp-legal-tabs button.active{background:#153a32;color:#fff} .dp-legal-content{overflow:auto;padding:28px 32px 38px;line-height:1.62}.dp-legal-content h3{margin:28px 0 8px;font-size:20px;color:#14372f}.dp-legal-content h3:first-child{margin-top:0}.dp-legal-content p{margin:8px 0;color:#3f4d48}.dp-legal-content ul{margin:8px 0 14px;padding-left:20px;color:#3f4d48}.dp-legal-content strong{color:#172722}.dp-legal-content .legal-note{padding:14px 16px;border-left:3px solid #d9654f;background:#eee6d7;border-radius:0 12px 12px 0}.dp-legal-content table{width:100%;border-collapse:collapse;margin:12px 0 20px;font-size:14px}.dp-legal-content th,.dp-legal-content td{text-align:left;vertical-align:top;padding:10px;border-bottom:1px solid rgba(20,55,47,.12)}.dp-legal-content th{color:#14372f}.dp-legal-content a{color:#b94e3c}.dp-legal-content .legal-pending{display:inline-block;padding:2px 7px;border-radius:7px;background:#f0d7ce;color:#8c392c;font-weight:750} @media(max-width:700px){.dp-legal-modal{padding:10px}.dp-legal-sheet{max-height:calc(100dvh - 20px);border-radius:18px}.dp-legal-sheet>header{padding:20px}.dp-legal-sheet>header h2{font-size:25px}.dp-legal-content{padding:22px 18px 32px}.dp-legal-tabs{padding:9px 10px}} /* V1.7.0 — centre légal / RGPD */ .dp-legal-footer{display:flex;justify-content:center;align-items:center;gap:9px;flex-wrap:wrap;margin:18px auto 8px;padding:0 18px;color:rgba(239,231,211,.58);font-size:12px}.dp-legal-footer button{border:0;background:transparent;color:inherit;padding:5px 2px;cursor:pointer;font:inherit}.dp-legal-footer button:hover,.dp-legal-footer button:focus-visible{color:#e07359;text-decoration:underline;text-underline-offset:4px}.dp-legal-footer span{opacity:.45} .dp-legal-modal{position:fixed;inset:0;z-index:99990;display:grid;place-items:center;padding:28px}.dp-legal-modal.hidden{display:none!important}.dp-legal-backdrop{position:absolute;inset:0;background:rgba(6,20,18,.74);backdrop-filter:blur(8px)}.dp-legal-sheet{position:relative;width:min(940px,100%);max-height:min(820px,calc(100dvh - 56px));overflow:hidden;background:#f5f0e5;color:#172722;border:1px solid rgba(21,58,49,.16);border-radius:26px;box-shadow:0 24px 80px rgba(0,0,0,.3);display:grid;grid-template-rows:auto auto 1fr}.dp-legal-sheet>header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:26px 30px 18px;background:linear-gradient(145deg,#173d35,#0d2c27);color:#f7f1e4}.dp-legal-sheet>header span{display:block;color:#e07359;font-size:11px;font-weight:800;letter-spacing:.18em}.dp-legal-sheet>header h2{margin:7px 0 0;font-size:32px}.dp-legal-close{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font-size:28px;cursor:pointer}.dp-legal-tabs{display:flex;gap:6px;overflow:auto;padding:12px 18px;border-bottom:1px solid rgba(20,55,47,.12);background:#ebe5d8}.dp-legal-tabs button{white-space:nowrap;border:0;border-radius:999px;background:transparent;color:#50605b;padding:10px 14px;font-weight:750;cursor:pointer}.dp-legal-tabs button.active{background:#153a32;color:#fff}.dp-legal-content{overflow:auto;padding:28px 32px 38px;line-height:1.62}.dp-legal-content h3{margin:28px 0 8px;font-size:20px;color:#14372f}.dp-legal-content h3:first-child{margin-top:0}.dp-legal-content p{margin:8px 0;color:#3f4d48}.dp-legal-content ul{margin:8px 0 14px;padding-left:20px;color:#3f4d48}.dp-legal-content strong{color:#172722}.dp-legal-content .legal-note{padding:14px 16px;border-left:3px solid #d9654f;background:#eee6d7;border-radius:0 12px 12px 0}.dp-legal-content table{width:100%;border-collapse:collapse;margin:12px 0 20px;font-size:14px}.dp-legal-content th,.dp-legal-content td{text-align:left;vertical-align:top;padding:10px;border-bottom:1px solid rgba(20,55,47,.12)}.dp-legal-content th{color:#14372f}.dp-legal-content a{color:#b94e3c}.dp-legal-content .legal-pending{display:inline-block;padding:2px 7px;border-radius:7px;background:#f0d7ce;color:#8c392c;font-weight:750}@media(max-width:700px){.dp-legal-modal{padding:10px}.dp-legal-sheet{max-height:calc(100dvh - 20px);border-radius:18px}.dp-legal-sheet>header{padding:20px}.dp-legal-sheet>header h2{font-size:25px}.dp-legal-content{padding:22px 18px 32px}.dp-legal-tabs{padding:9px 10px}}