@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&family=Cormorant+Garamond:wght@300;400;500;600&family=Jost:wght@300;400;500;600&family=Poppins:wght@300;400;500;600&display=swap'); :root{--site-font:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--ink:#202329;--muted:#6d727a;--line:#e2e3e5;--paper:#f7f7f5;--dark:#292c31;--accentText:#ffffff;--radius:15px}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 var(--site-font)}header{background:#fff;border-bottom:1px solid var(--line);padding:18px max(24px,calc((100vw - 1000px)/2));display:flex;justify-content:space-between;align-items:center;gap:20px}header p{font-size:12px;color:var(--muted);margin:0}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}.brand b{font:800 25px var(--site-font);letter-spacing:-.08em}.brand span{font-size:10px;font-weight:700;letter-spacing:.2em;border-left:1px solid #c5c7ca;padding-left:10px}main{max-width:900px;margin:auto;padding:48px 22px 60px}.intro{text-align:center;max-width:700px;margin:0 auto 35px}small{font-size:10px;letter-spacing:.16em;font-weight:700;color:#737982}.intro h1{font:800 clamp(34px,5.5vw,55px)/1.12 var(--site-font);letter-spacing:-.05em;margin:15px 0}.intro h1 span{color:#777d85}.intro>p{color:var(--muted);font-size:16px}.trust{font-size:11px;margin-top:20px;color:#5d636b}.progress{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}.progress span{padding:0 0 10px;border-bottom:2px solid #dfe1e3;color:#747982;font-size:11px}.progress b{margin-left:6px;color:var(--ink)}form{display:grid;gap:18px}.panel,.estimate{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,4vw,31px);box-shadow:0 5px 20px #22283105}.heading{margin-bottom:20px}.heading small{display:block;margin-bottom:5px}.heading h2,.estimate h2{font:700 23px/1.25 var(--site-font);letter-spacing:-.035em;margin:0}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}label{display:block;font-size:12px;font-weight:700;margin:15px 0 7px}input,select,textarea{width:100%;border:1px solid #d9dbde;border-radius:9px;padding:11px 12px;font:inherit;font-size:14px;color:var(--ink);background:#fff;min-height:44px}textarea{resize:vertical}input:focus,select:focus,textarea:focus{outline:3px solid #777d8524;border-color:#747a82}.sub{font-size:13px;color:var(--muted);margin:-8px 0 17px}.services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.service{position:relative;display:flex;align-items:center;gap:10px;margin:0;min-height:86px;padding:12px;border:1px solid var(--line);border-radius:calc(var(--radius) * .65);cursor:pointer}.service:has(input:checked){background:#f1f2f3;border-color:#666b72;box-shadow:inset 0 0 0 1px #666b72}.service>input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}.service:focus-within{outline:3px solid #777d8524}.symbol{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:8px;background:#f0f1f2;font-size:19px}.service>span:nth-of-type(2){display:flex;flex-direction:column;gap:3px;padding-right:8px}.service b{font-size:12px;line-height:1.35}.service small{font-size:10px;letter-spacing:0;font-weight:400;color:var(--muted);line-height:1.4}.service i{display:none;position:absolute;right:9px;top:7px;font-size:12px}.service:has(input:checked) i{display:block}.error{color:#a12727;font-size:12px}.consent{display:flex;align-items:flex-start;gap:10px;font-weight:500}.consent input{width:17px;height:17px;min-height:17px;flex:none;margin-top:2px}.note{font-size:11px;color:var(--muted)}.estimate h2{margin:9px 0}.estimate>p{font-size:13px;color:var(--muted)}.chips{display:flex;flex-wrap:wrap;gap:7px;margin:15px 0}.chips span{border:1px solid #dfe1e3;background:#f7f7f7;border-radius:100px;padding:5px 10px;font-size:11px}.estimate button{width:100%;border:0;border-radius:9px;padding:14px 20px;font:700 13px var(--site-font);background:var(--dark);color:var(--accentText);cursor:pointer;min-height:48px;margin-top:12px}.estimate button:hover{background:#41454b}.estimate button:disabled{opacity:.6;cursor:wait}.status{min-height:20px;font-size:13px}.success{color:#246b36}.error{color:#a12323}.honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.legal{line-height:1.7;margin:20px 2px 0}footer{background:var(--dark);color:#d9dadd;padding:24px max(24px,calc((100vw - 1000px)/2));display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:11px}footer .brand{color:#fff}footer .brand span{border-color:#64676c}footer a:last-child{color:#e2e3e5}@media(max-width:650px){header,footer{align-items:flex-start;flex-direction:column;gap:9px}main{padding-top:32px}.intro h1{font-size:37px}.intro>p{font-size:14px}.services,.grid{grid-template-columns:1fr}.service{min-height:78px}.progress span{font-size:10px}.progress b{display:block;margin:2px 0 0}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}} .catalog-status{font-size:12px;color:var(--muted);margin:0 0 14px}.catalog-error{color:#a12727}.catalog-group{margin:18px 0}.catalog-group-title{font:700 15px/1.35 var(--site-font);margin:0 0 9px}.catalog-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.product-card{align-items:center}.product-info{display:flex;flex:1;min-width:0;flex-direction:column;gap:5px}.product-info b{overflow-wrap:anywhere}.product-price{font-size:12px!important;font-weight:700!important;letter-spacing:0!important;color:var(--ink)!important}.product-quantity{width:66px;min-width:66px;min-height:36px;padding:6px;font-size:12px}.product-quantity:disabled{opacity:.4}.estimate-total{font-weight:700!important;font-size:16px!important;color:var(--ink)!important;border-top:1px solid var(--line);padding-top:12px}@media(max-width:650px){.catalog-items{grid-template-columns:1fr}.product-card{gap:9px}.product-quantity{width:58px;min-width:58px}} /* Catégories du catalogue : repliées par défaut et accessibles au clavier. */ .category-toggle{display:flex;width:100%;align-items:center;gap:10px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 15px;cursor:pointer;color:var(--ink);margin:0 0 10px;min-height:52px} .category-toggle:hover{background:#f7f7f7}.category-toggle:focus-visible{outline:3px solid #777d8544;outline-offset:2px} .catalog-group-title{font:700 15px/1.35 var(--site-font);margin:0} .category-count{font-size:11px;color:var(--muted);background:#f0f1f2;border-radius:20px;padding:2px 8px} .category-arrow{margin-left:auto;font-size:20px;line-height:1;transition:transform .15s ease} .category-toggle[aria-expanded="true"] .category-arrow{transform:rotate(180deg)} .catalog-items[hidden]{display:none}.catalog-group{margin:12px 0} @media(prefers-reduced-motion:reduce){.category-arrow{transition:none}} /* Accès client visible dans l’en-tête */ .site-header{position:relative}.client-login-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:10px 15px;border:1px solid #292c31;border-radius:999px;background:#292c31;color:#fff;text-decoration:none;font-size:13px;font-weight:700;white-space:nowrap;transition:background .18s ease,color .18s ease}.client-login-button:hover{background:#fff;color:#292c31}.client-login-button span{font-size:16px;line-height:1}@media(max-width:600px){.site-header{gap:10px;padding:14px 16px;flex-wrap:wrap}.site-header p{display:none}.client-login-button{margin-left:auto;padding:9px 12px;font-size:12px}} /* Préférences musicales du DJ */ .music-panel{margin-top:22px;padding:20px;border:1px solid var(--line);border-radius:12px;background:#fafafa}.music-panel[hidden]{display:none}.music-heading h3{font:700 19px/1.3 var(--site-font);margin:6px 0}.music-heading .sub{margin:8px 0 18px}.music-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.music-group{padding:14px;background:#fff;border:1px solid var(--line);border-radius:10px}.music-group h4{font:700 14px var(--site-font);margin:0 0 4px}.music-group p{font-size:11px;color:var(--muted);margin:0 0 12px}.music-options{display:grid;grid-template-columns:1fr;gap:3px}.music-option{display:flex;align-items:center;gap:8px;margin:0;padding:5px 0;font-size:12px;font-weight:500;cursor:pointer}.music-option input{width:16px;height:16px;min-height:16px;flex:none;margin:0;accent-color:#292c31}.music-panel>label{margin-top:16px}@media(max-width:650px){.music-columns{grid-template-columns:1fr}.music-panel{padding:14px}} /* Formulaire en 3 étapes, une section visible à la fois */ .form-step[hidden]{display:none!important}.progress span{opacity:.58;transition:opacity .2s,border-color .2s}.progress span.is-active{opacity:1;border-bottom-color:var(--dark)}.progress span.is-active b{color:var(--ink)}.step-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}.step-hint{font-size:11px;color:var(--muted)}.step-next,.step-back{border:1px solid var(--dark);border-radius:9px;padding:12px 16px;min-height:44px;font:700 12px var(--site-font);cursor:pointer}.step-next{background:var(--dark);color:#fff;margin-left:auto}.step-back{background:#fff;color:var(--dark)}.step-next:hover{background:#41454b}.step-back:hover{background:#f2f2f2}@media(max-width:500px){.step-actions{align-items:stretch;flex-direction:column-reverse}.step-next,.step-back{width:100%;margin:0}.step-hint{text-align:center}} .service-image{display:block;width:56px;height:56px;flex:none;object-fit:cover;border-radius:calc(var(--radius) * .45);background:#f0f1f2}.service:has(.service-image)>span:nth-of-type(1){display:none}@media(max-width:560px){.service-image{width:44px;height:44px}.services{grid-template-columns:1fr}} /* Customer request review */ .request-review{margin:18px 0 22px;padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:color-mix(in srgb,var(--paper) 70%,white);text-align:left} .request-review h3{margin:0 0 12px;font-size:1.05rem;font-family:var(--site-font)} .request-review dl{display:grid;grid-template-columns:minmax(90px, .38fr) minmax(0,1fr);gap:8px 12px;margin:0} .request-review dt{font-weight:650;color:var(--muted);font-size:.88rem} .request-review dd{margin:0;overflow-wrap:anywhere;font-size:.92rem} .request-review dd:empty{display:none} @media(max-width:560px){.request-review{padding:13px}.request-review dl{grid-template-columns:1fr;gap:3px}.request-review dd{margin-bottom:8px}} /* Confirmation de demande envoyée */ .confirmation-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(20,25,32,.52);backdrop-filter:blur(3px)}.confirmation-overlay[hidden]{display:none!important}.confirmation-box{position:relative;width:min(100%,460px);padding:36px 30px 28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);box-shadow:0 22px 70px rgba(0,0,0,.22);text-align:center;animation:confirmation-in .18s ease-out}.confirmation-close{position:absolute;top:10px;right:12px;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);font:400 30px/1 Arial,sans-serif;cursor:pointer}.confirmation-close:hover{background:color-mix(in srgb,var(--line) 55%,transparent);color:var(--ink)}.confirmation-check{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 18px;border-radius:50%;background:#e2f4e9;color:#247746;font-size:28px;font-weight:800}.confirmation-box h2{margin:0 0 10px;font:750 25px/1.2 var(--site-font)}.confirmation-box p{margin:0 auto 24px;max-width:340px;color:var(--muted);line-height:1.6}.confirmation-ok{min-height:44px;padding:11px 24px;border:0;border-radius:9px;background:var(--accent);color:var(--accentText);font:700 13px var(--site-font);cursor:pointer}.confirmation-ok:hover{filter:brightness(1.12)}.confirmation-box #download-summary{background:#000;color:#fff}.confirmation-box #download-summary:hover{background:#222;color:#fff}@keyframes confirmation-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.confirmation-box{animation:none}} /* Compact form mode controlled by the visual site editor */ body.compact-layout main{padding-top:30px;padding-bottom:40px}body.compact-layout .intro{margin-bottom:22px}body.compact-layout .intro h1{margin:10px 0}body.compact-layout .intro>p{font-size:14px;margin:10px 0}body.compact-layout .trust{margin-top:12px}body.compact-layout form{gap:10px}body.compact-layout .panel,body.compact-layout .estimate{padding:clamp(14px,3vw,22px);border-radius:calc(var(--radius) * .85)}body.compact-layout .heading{margin-bottom:12px}body.compact-layout .heading h2,body.compact-layout .estimate h2{font-size:20px}body.compact-layout .grid{column-gap:14px}body.compact-layout label{margin:9px 0 5px}body.compact-layout input,body.compact-layout select,body.compact-layout textarea{padding:8px 10px;min-height:38px;font-size:13px}body.compact-layout textarea{min-height:76px}body.compact-layout .progress{margin-bottom:12px;gap:6px}body.compact-layout .progress span{padding-bottom:6px}body.compact-layout .services{gap:7px}body.compact-layout .service{min-height:68px;padding:9px;gap:8px}body.compact-layout .symbol{width:30px;height:30px;font-size:16px}body.compact-layout .sub{margin-bottom:12px}body.compact-layout .chips{margin:10px 0;gap:5px}@media(max-width:600px){body.compact-layout main{padding:22px 14px 32px}body.compact-layout .intro{margin-bottom:18px}body.compact-layout .panel,body.compact-layout .estimate{padding:14px}body.compact-layout .grid,body.compact-layout .services{grid-template-columns:1fr}body.compact-layout .service{min-height:60px}} /* Client-facing style presets selected from the admin editor */ body[data-site-style="modern"]{background:#f3f7fb;color:#172b4d}body[data-site-style="modern"] header{background:#fff}body[data-site-style="modern"] .intro h1 span{color:#1769aa}body[data-site-style="modern"] .panel,body[data-site-style="modern"] .estimate{box-shadow:0 12px 32px #1769aa12;border-color:#d7e2ee}body[data-site-style="modern"] .service{border-radius:12px} body[data-site-style="premium"]{background:#17191d;color:#f4f1eb}body[data-site-style="premium"] header{background:#202227;border-color:#3a3c40}body[data-site-style="premium"] .brand,body[data-site-style="premium"] .intro h1,body[data-site-style="premium"] .heading h2,body[data-site-style="premium"] .estimate h2{color:#f4f1eb}body[data-site-style="premium"] .intro h1 span{color:#c7a76c}body[data-site-style="premium"] .panel,body[data-site-style="premium"] .estimate{background:#222429;border-color:#3a3c40;box-shadow:0 12px 30px #0003}body[data-site-style="premium"] input,body[data-site-style="premium"] select,body[data-site-style="premium"] textarea{background:#17191d;color:#f4f1eb;border-color:#4b4d52}body[data-site-style="premium"] .service{background:#292b30;border-color:#45474c}body[data-site-style="premium"] .service b,body[data-site-style="premium"] .service small{color:#f4f1eb}body[data-site-style="premium"] .progress span{border-color:#45474c;color:#c7c2b8}body[data-site-style="premium"] .progress span[aria-current="step"]{border-color:#c7a76c} body[data-site-style="minimal"] main{max-width:820px}body[data-site-style="minimal"] .intro{text-align:left;margin-left:0}body[data-site-style="minimal"] .panel,body[data-site-style="minimal"] .estimate{box-shadow:none;border-radius:4px}body[data-site-style="minimal"] .service{border-radius:4px}body[data-site-style="minimal"] .intro h1{font-weight:700;letter-spacing:-.035em} /* NOW — identité inspirée du prototype (intégration visuelle, sans modifier le parcours ni les API) */ :root{ --now-bg:#0b0b0c; --now-panel:#121214; --now-sand:#dcc3a5; --now-ink:#f4eadd; --now-muted:rgba(244,234,221,.62); --now-line:rgba(220,195,165,.18); } html,body{background:var(--now-bg)} body{color:var(--now-ink);font-family:'Poppins',system-ui,sans-serif} .site-header{background:rgba(11,11,12,.94);border-bottom:1px solid var(--now-line);color:var(--now-ink);backdrop-filter:blur(14px)} .site-header p{color:var(--now-muted);font-family:'Jost',sans-serif;letter-spacing:.12em;text-transform:uppercase;font-size:11px} .brand b{color:var(--now-sand);font-family:'Cormorant Garamond',Georgia,serif;letter-spacing:.08em;font-weight:500} .client-login-button{border:1px solid var(--now-line);border-radius:999px;color:var(--now-ink);background:transparent} .client-login-button:hover{background:rgba(220,195,165,.1);border-color:var(--now-sand)} main{color:var(--now-ink)} .intro{background:radial-gradient(ellipse at 50% 0%,rgba(220,195,165,.12),transparent 65%),var(--now-bg);border-bottom:1px solid var(--now-line)} .intro small,.heading small,.music-heading small{color:var(--now-sand);letter-spacing:.22em} .intro h1,.heading h2,.music-heading h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;letter-spacing:-.025em} .intro h1{color:var(--now-ink)} .intro h1 span{color:var(--now-sand)} .intro p,.sub,.note,.trust{color:var(--now-muted)} .trust{border-color:var(--now-line);background:rgba(220,195,165,.06);border-radius:999px} form#quote-form{color:var(--now-ink)} .progress{border-bottom:1px solid var(--now-line)} .progress span{color:var(--now-muted)} .progress span[aria-current="step"]{color:var(--now-sand);border-color:var(--now-sand)} .panel,.service,.music-panel,.confirmation-box{background:var(--now-panel);border:1px solid var(--now-line);color:var(--now-ink);border-radius:22px;box-shadow:0 18px 60px rgba(0,0,0,.14)} .heading h2{color:var(--now-ink)} label{color:var(--now-ink)} input:not([type=checkbox]):not([type=radio]),select,textarea{background:#171719!important;border-color:var(--now-line)!important;color:var(--now-ink)!important;border-radius:12px} input::placeholder,textarea::placeholder{color:rgba(244,234,221,.38)} input:focus,select:focus,textarea:focus{outline:2px solid rgba(220,195,165,.28);border-color:var(--now-sand)!important} button.step-next,button[type=submit],.confirmation-ok{background:var(--now-sand);color:#0b0b0c;border:1px solid var(--now-sand);border-radius:999px;font-weight:600} button.step-next:hover,button[type=submit]:hover,.confirmation-ok:hover{filter:brightness(1.07)} button.step-back{background:transparent;color:var(--now-ink);border:1px solid var(--now-line);border-radius:999px} .music-option{background:rgba(255,255,255,.025);border-color:var(--now-line);color:var(--now-ink);border-radius:12px} .music-option:has(input:checked){background:rgba(220,195,165,.12);border-color:var(--now-sand)} footer{background:#080809;border-top:1px solid var(--now-line);color:var(--now-muted)} footer a{color:var(--now-sand)} .error{color:#f2b3b3} @media(prefers-reduced-motion:no-preference){.panel,.service,.music-panel,.client-login-button,button{transition:background-color .2s,border-color .2s,color .2s,transform .2s}} @media(max-width:640px){.site-header p{display:none}.intro{padding-inline:20px}.panel{border-radius:18px}} /* Harmonisation finale du thème NOW avec les composants du catalogue et les variantes existantes */ body[data-site-style="elegant"],body[data-site-style="modern"],body[data-site-style="premium"],body[data-site-style="minimal"]{background:var(--now-bg);color:var(--now-ink)} body[data-site-style="modern"] header,body[data-site-style="premium"] header,body[data-site-style="elegant"] header{background:rgba(11,11,12,.94);border-color:var(--now-line)} body[data-site-style] .brand,body[data-site-style] .brand b,body[data-site-style] .site-header p{color:var(--now-ink)} body[data-site-style] .intro h1,body[data-site-style] .heading h2,body[data-site-style] .estimate h2{color:var(--now-ink)} body[data-site-style] .intro h1 span{color:var(--now-sand)} body[data-site-style] .panel,body[data-site-style] .estimate,body[data-site-style] .music-panel,body[data-site-style] .music-group,body[data-site-style] .request-review,body[data-site-style] .confirmation-box{background:var(--now-panel);border-color:var(--now-line);color:var(--now-ink)} body[data-site-style] .service,body[data-site-style] .product-card{background:#151517;border-color:var(--now-line);color:var(--now-ink)} body[data-site-style] .service b,body[data-site-style] .product-info b,body[data-site-style] .product-price,body[data-site-style] .estimate-total{color:var(--now-ink)!important} body[data-site-style] .service small,body[data-site-style] .product-info small,body[data-site-style] .catalog-status,body[data-site-style] .note,body[data-site-style] .sub{color:var(--now-muted)} body[data-site-style] .service:has(input:checked),body[data-site-style] .music-option:has(input:checked){background:rgba(220,195,165,.12);border-color:var(--now-sand);box-shadow:inset 0 0 0 1px rgba(220,195,165,.2)} body[data-site-style] .symbol{background:#24211e;color:var(--now-sand)} body[data-site-style] .category-toggle{background:#171719;border-color:var(--now-line);color:var(--now-ink)} body[data-site-style] .category-toggle:hover{background:#222124} body[data-site-style] .category-count{background:#292522;color:var(--now-sand)} body[data-site-style] .estimate button,body[data-site-style] .step-next,body[data-site-style] .confirmation-ok{background:var(--now-sand);color:#0b0b0c;border-color:var(--now-sand)} body[data-site-style] .step-back{background:transparent;color:var(--now-ink);border-color:var(--now-line)} body[data-site-style] .progress span,body[data-site-style] .progress b{color:var(--now-muted);border-color:var(--now-line)} body[data-site-style] .progress span.is-active,body[data-site-style] .progress span[aria-current="step"]{color:var(--now-sand);border-color:var(--now-sand)} body[data-site-style] .progress span.is-active b{color:var(--now-sand)} body[data-site-style] .request-review dt{color:var(--now-muted)} body[data-site-style] .request-review dd{color:var(--now-ink)} body[data-site-style] footer{background:#080809;color:var(--now-muted);border-color:var(--now-line)} body[data-site-style] footer .brand,body[data-site-style] footer a{color:var(--now-sand)} body[data-site-style] .confirmation-check{background:#20372b;color:#a9e0bc} body[data-site-style] .confirmation-close{color:var(--now-muted)} @media(max-width:650px){body[data-site-style] .panel{border-radius:18px}} /* Landing page éditoriale NOW. — vitrine complète, formulaire en bas */ :root{--now-bg:#0b0b0c;--now-panel:#141416;--now-ink:#f4eadd;--now-muted:rgba(244,234,221,.62);--now-line:rgba(220,195,165,.18);--now-sand:#dcc3a5} html{scroll-behavior:smooth;scroll-padding-top:90px} body{background:var(--now-bg);color:var(--now-ink)} .site-header{position:sticky;top:0;z-index:30;background:rgba(11,11,12,.92)!important;backdrop-filter:blur(18px);border-bottom:1px solid var(--now-line)!important} .brand,.brand b{color:var(--now-sand)!important;letter-spacing:.16em} .site-header p{color:var(--now-muted)!important} .client-login-button{border:1px solid var(--now-line)!important;border-radius:999px!important;color:var(--now-ink)!important;background:rgba(255,255,255,.025)!important} .intro{max-width:1240px!important;margin:0 auto!important;padding:clamp(54px,8vw,110px) clamp(22px,5vw,70px) 58px!important;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.88fr);align-items:center;gap:clamp(30px,5vw,76px);text-align:left!important} .landing-hero-copy{min-width:0} .intro small,.section-kicker{color:var(--now-sand)!important;letter-spacing:.24em;font-size:10px;font-weight:600} .intro h1{font-family:'Cormorant Garamond',Georgia,serif!important;font-weight:300!important;font-size:clamp(44px,6.2vw,82px)!important;line-height:.98!important;letter-spacing:-.035em;margin:22px 0!important;color:var(--now-ink)!important} .intro h1 span{color:var(--now-sand)!important;font-style:italic} .intro p{max-width:560px;color:var(--now-muted)!important;font-size:clamp(14px,1.35vw,17px)!important;line-height:1.9!important} .landing-cta{display:inline-flex;align-items:center;gap:20px;margin-top:18px;padding:14px 22px;background:var(--now-sand);color:#0b0b0c!important;text-decoration:none;border-radius:999px;font-size:13px;font-weight:600} .landing-cta span{font-size:18px} .intro .trust{margin-top:25px;color:var(--now-muted)!important;font-size:11px;letter-spacing:.03em} .landing-hero-image{position:relative;min-width:0;height:clamp(360px,44vw,600px);overflow:hidden;border-radius:4px 100px 4px 4px;border:1px solid var(--now-line);background:#191715} .landing-hero-image:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.75))} .landing-hero-image img,.landing-service img,.landing-statement-image img{width:100%;height:100%;object-fit:cover;display:block} .image-caption{position:absolute;z-index:1;bottom:24px;left:24px;right:24px;display:flex;flex-direction:column;gap:8px} .image-caption span,.landing-service-copy>span{font-size:9px;letter-spacing:.2em;color:var(--now-sand)} .image-caption b{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(25px,3vw,38px);font-weight:400;color:#fff} .landing-section{max-width:1240px;margin:0 auto;padding:70px clamp(22px,5vw,70px) 92px} .landing-heading-row{display:grid;grid-template-columns:1fr minmax(260px,.65fr);gap:45px;align-items:end;margin:18px 0 36px} .landing-heading-row h2,.landing-statement-copy h2,.landing-form-intro h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(38px,5vw,62px);font-weight:300;line-height:1.02;letter-spacing:-.025em;margin:0;color:var(--now-ink)} .landing-heading-row h2 em,.landing-statement-copy h2 em{color:var(--now-sand);font-weight:300} .landing-heading-row>p,.landing-statement-copy>p,.landing-form-intro>p{color:var(--now-muted);line-height:1.9;font-size:14px;margin:0} .landing-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .landing-service{overflow:hidden;border:1px solid var(--now-line);background:var(--now-panel);border-radius:3px 3px 28px 3px} .landing-service img{aspect-ratio:4/3;height:auto;max-height:280px;filter:saturate(.75)} .landing-service-copy{padding:22px 22px 26px} .landing-service-copy h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:29px;font-weight:400;margin:12px 0 8px;color:var(--now-ink)} .landing-service-copy p{color:var(--now-muted);font-size:12.5px;line-height:1.8;margin:0} .landing-statement{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:#121214;border-block:1px solid var(--now-line);margin-top:0} .landing-statement-image{min-height:520px;max-height:680px;overflow:hidden} .landing-statement-image img{filter:saturate(.7)} .landing-statement-copy{padding:clamp(32px,6vw,86px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:20px} .landing-statement-copy h2{margin-top:2px} .landing-statement-copy ul{list-style:none;margin:8px 0 0;padding:0;width:100%;border-top:1px solid var(--now-line)} .landing-statement-copy li{display:flex;gap:16px;padding:15px 0;border-bottom:1px solid var(--now-line);font-size:12.5px;color:var(--now-ink)} .landing-statement-copy li span{color:var(--now-sand);font-size:10px;letter-spacing:.15em} .landing-text-link{display:inline-flex;gap:18px;align-items:center;color:var(--now-sand)!important;text-decoration:none;font-size:13px;margin-top:4px} .landing-form-intro{max-width:850px;margin:0 auto;padding:100px 24px 34px;text-align:center} .landing-form-intro h2{margin:16px 0} .landing-form-intro>p{max-width:660px;margin:0 auto} .landing-form-perks{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:30px 0 0} .landing-form-perks span{border:1px solid var(--now-line);border-radius:999px;padding:9px 14px;color:var(--now-sand);font-size:10px;letter-spacing:.1em} .landing-form-perks b{color:var(--now-ink);font-weight:500;letter-spacing:0;margin-left:5px} #quote-form{max-width:1040px;margin:0 auto;padding:0 22px 90px;scroll-margin-top:90px} #quote-form .panel,#quote-form .estimate{background:var(--now-panel)!important;border:1px solid var(--now-line)!important;border-radius:22px!important;color:var(--now-ink)!important;box-shadow:0 18px 60px rgba(0,0,0,.14)} #quote-form .heading h2,#quote-form .estimate h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:clamp(30px,4vw,42px);color:var(--now-ink)} #quote-form .heading small,#quote-form .estimate>small{color:var(--now-sand);letter-spacing:.2em} #quote-form label{color:var(--now-ink)} #quote-form input:not([type=checkbox]):not([type=radio]),#quote-form select,#quote-form textarea{background:#171719!important;border-color:var(--now-line)!important;color:var(--now-ink)!important;border-radius:12px} #quote-form input::placeholder,#quote-form textarea::placeholder{color:rgba(244,234,221,.38)} #quote-form input:focus,#quote-form select:focus,#quote-form textarea:focus{outline:2px solid rgba(220,195,165,.28);border-color:var(--now-sand)!important} #quote-form .step-next,#quote-form button[type=submit],#quote-form .confirmation-ok{background:var(--now-sand)!important;color:#0b0b0c!important;border-color:var(--now-sand)!important;border-radius:999px} #quote-form .step-back{background:transparent!important;color:var(--now-ink)!important;border-color:var(--now-line)!important;border-radius:999px} #quote-form .progress span{color:var(--now-muted);border-color:var(--now-line)} #quote-form .progress span[aria-current=step],#quote-form .progress span.is-active{color:var(--now-sand);border-color:var(--now-sand)} #quote-form .service,#quote-form .music-panel,#quote-form .music-group{background:#151517!important;border-color:var(--now-line)!important;color:var(--now-ink)!important} #quote-form .music-option:has(input:checked),#quote-form .service:has(input:checked){background:rgba(220,195,165,.12)!important;border-color:var(--now-sand)!important} #quote-form .note,#quote-form .sub,#quote-form .catalog-status{color:var(--now-muted)!important} footer{background:#080809!important;border-top:1px solid var(--now-line)!important;color:var(--now-muted)!important} footer a{color:var(--now-sand)!important} @media(max-width:850px){.intro{grid-template-columns:1fr;gap:34px;padding-top:58px!important}.landing-hero-image{height:420px;max-height:65vh}.landing-heading-row{grid-template-columns:1fr;gap:18px}.landing-services{grid-template-columns:1fr 1fr}.landing-statement{grid-template-columns:1fr}.landing-statement-image{min-height:0;height:340px}.landing-statement-copy{padding:42px 24px 54px}} @media(max-width:560px){.intro{padding:46px 20px 44px!important}.intro h1{font-size:47px!important}.landing-hero-image{height:340px;border-top-right-radius:65px}.landing-section{padding:54px 20px 64px}.landing-services{grid-template-columns:1fr}.landing-service img{max-height:none;aspect-ratio:16/10}.landing-heading-row h2,.landing-statement-copy h2,.landing-form-intro h2{font-size:42px}.landing-statement-image{height:270px}.landing-statement-copy{padding:38px 20px 44px}.landing-form-intro{padding:66px 20px 28px}#quote-form{padding-inline:14px}.landing-form-perks{align-items:center}.landing-form-perks span{font-size:9px}} /* Reprise fidèle de la direction artistique du prototype Portail NOW. (Copy) */ :root{--bg:#0B0B0C;--bg2:#121214;--sable:#DCC3A5;--sable-hi:#EADBC8;--ink:#F4EADD;--mute:rgba(244,234,221,.55);--line:rgba(220,195,165,.14);--veil:rgba(255,255,255,.035);--soft:rgba(220,195,165,.1);--on-sable:#0B0B0C;--display:'Lilita One',Impact,sans-serif;--label:'Jost',system-ui,sans-serif;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Poppins',system-ui,sans-serif;color-scheme:dark} html{scroll-behavior:smooth;scroll-padding-top:90px;overflow-x:clip} body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;-webkit-font-smoothing:antialiased} main{max-width:none;padding:0 22px 60px;overflow:clip} .bleed{width:100vw;margin-left:calc(50% - 50vw)} .vhero{position:relative;min-height:min(86vh,760px);display:flex;align-items:flex-end;overflow:hidden;color:#F4EADD} .photo{background:radial-gradient(60% 50% at 78% 22%,rgba(255,214,160,.55),transparent 60%),radial-gradient(40% 60% at 18% 70%,rgba(220,195,165,.32),transparent 65%),radial-gradient(30% 30% at 55% 45%,rgba(255,240,215,.25),transparent 70%),linear-gradient(160deg,#2a221b 0%,#120f0d 55%,#0b0b0c 100%)} .photo.b{background:radial-gradient(50% 70% at 30% 30%,rgba(255,200,140,.45),transparent 60%),radial-gradient(40% 40% at 80% 80%,rgba(160,120,255,.22),transparent 70%),linear-gradient(200deg,#1d1814,#0b0b0c)} .photo.c{background:radial-gradient(55% 55% at 60% 35%,rgba(255,230,190,.5),transparent 62%),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 46px),linear-gradient(180deg,#2b241d,#0e0c0a)} .vnav{position:absolute;inset:0 0 auto;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px clamp(16px,4vw,48px);color:#F4EADD} .vnav .logo{font:400 30px/.85 'Lilita One',Impact,sans-serif;color:#F4EADD;text-decoration:none;letter-spacing:.02em} .vnav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-family:var(--label);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase} .vnav ul a,.vnav .lnk{color:#F4EADD;text-decoration:none} .vnav ul li:first-child{border-bottom:1px solid currentColor;padding-bottom:4px} .vnav .right{display:flex;align-items:center;gap:18px;font-family:var(--label);font-size:11px;letter-spacing:.16em;text-transform:uppercase} .pillw,.pillg{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;border-radius:999px;padding:12px 20px;font-family:var(--label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap} .pillw{background:#FBF7F2;color:#141416!important;border:1px solid #FBF7F2} .pillg{background:transparent;border:1px solid rgba(244,234,221,.55);color:#F4EADD!important;padding:13px 22px} .vhero .in{position:relative;z-index:2;padding:0 clamp(16px,4vw,48px) clamp(80px,12vh,120px);max-width:980px} .vhero h1{font-family:var(--serif);font-weight:300;font-size:clamp(44px,7.4vw,96px);line-height:1;margin:0;letter-spacing:-.01em;color:#F4EADD} .vhero h1 em{font-style:italic;color:#EADBC8} .vhero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px} .ph-note{position:absolute;right:16px;bottom:14px;font-family:var(--label);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,234,221,.65)} .cream{position:relative;z-index:3;margin-top:-44px;border-radius:44px 44px 0 0;background:var(--bg);padding:72px clamp(16px,4vw,48px) 64px} .vcontent{max-width:1180px;margin:0 auto} .lab{font-family:var(--label);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--sable);margin:0} .big{font-family:var(--serif);font-weight:300;font-size:clamp(30px,4.2vw,54px);line-height:1.1;margin:14px 0 0;max-width:22ch;color:var(--ink)} .big em{font-style:italic;color:var(--sable)} .lead{font-family:var(--label);font-weight:300;font-size:15px;line-height:1.75;color:var(--mute);max-width:56ch} .duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,72px);align-items:center;margin-top:48px} .rimg{position:relative;aspect-ratio:4/3;max-width:100%;border-radius:140px 140px 28px 28px;overflow:hidden} .rimg.w{aspect-ratio:16/8;border-radius:120px 120px 32px 32px} .band{background:var(--sable);color:#0B0B0C;overflow:hidden;padding:22px 0} .band .track{display:flex;gap:46px;width:max-content;animation:mq 34s linear infinite;font-family:var(--serif);font-style:italic;font-size:clamp(30px,4vw,46px);font-weight:300;white-space:nowrap} .band .track span:after{content:"·";margin-left:46px;opacity:.6} @keyframes mq{to{transform:translateX(-50%)}} .vsec{max-width:1180px;margin:0 auto;padding:72px 0 24px} .vsec .head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:26px} .service-editorial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .service-editorial{border:1px solid var(--line);border-radius:26px;overflow:hidden;background:var(--veil)} .editorial-photo{position:relative;aspect-ratio:4/3} .service-editorial>div:last-child{padding:20px 22px 26px} .service-editorial h3{font-family:var(--serif);font-size:28px;font-weight:400;margin:10px 0;color:var(--ink)} .service-editorial .lead{font-size:13px;margin-bottom:0} .form-lead{max-width:780px;margin:0 auto;padding:96px 20px 34px;text-align:center} .form-lead .big{max-width:none;font-size:clamp(40px,5vw,62px)} .form-lead .lead{margin:18px auto 0} #quote-form{max-width:1040px;margin:0 auto;padding:0 0 90px;scroll-margin-top:90px} #quote-form .panel,#quote-form .estimate{background:#121214!important;border-color:var(--line)!important;color:var(--ink)!important;border-radius:22px!important;box-shadow:0 18px 60px rgba(0,0,0,.14)} #quote-form .heading h2,#quote-form .estimate h2{font-family:var(--serif);font-size:clamp(30px,4vw,42px);font-weight:400;color:var(--ink)} #quote-form .heading small,#quote-form .estimate>small{color:var(--sable);letter-spacing:.2em} #quote-form label{color:var(--ink)} #quote-form input:not([type=checkbox]):not([type=radio]),#quote-form select,#quote-form textarea{background:#171719!important;border-color:var(--line)!important;color:var(--ink)!important;border-radius:12px} #quote-form input::placeholder,#quote-form textarea::placeholder{color:rgba(244,234,221,.38)} #quote-form input:focus,#quote-form select:focus,#quote-form textarea:focus{outline:2px solid rgba(220,195,165,.28);border-color:var(--sable)!important} #quote-form .step-next,#quote-form button[type=submit],#quote-form .confirmation-ok{background:var(--sable)!important;color:#0b0b0c!important;border-color:var(--sable)!important;border-radius:999px} #quote-form .step-back{background:transparent!important;color:var(--ink)!important;border-color:var(--line)!important;border-radius:999px} #quote-form .progress span{color:var(--mute);border-color:var(--line)} #quote-form .progress span[aria-current=step],#quote-form .progress span.is-active{color:var(--sable);border-color:var(--sable)} #quote-form .service,#quote-form .music-panel,#quote-form .music-group{background:#151517!important;border-color:var(--line)!important;color:var(--ink)!important} #quote-form .music-option:has(input:checked),#quote-form .service:has(input:checked){background:rgba(220,195,165,.12)!important;border-color:var(--sable)!important} #quote-form .note,#quote-form .sub,#quote-form .catalog-status{color:var(--mute)!important} @media(max-width:900px){.vnav ul{display:none}.duo{grid-template-columns:1fr}.service-editorial-grid{grid-template-columns:1fr 1fr}.vnav .right .lnk{display:none}} @media(max-width:600px){main{padding-inline:14px}.vhero{min-height:82vh}.vnav{padding:18px 16px}.vnav .right{gap:8px}.vnav .pillw{padding:10px 12px;font-size:9px;letter-spacing:.08em}.vhero .in{padding:0 20px 72px}.vhero h1{font-size:clamp(43px,12vw,60px)}.cream{padding:62px 20px 50px;border-radius:32px 32px 0 0}.service-editorial-grid{grid-template-columns:1fr}.vsec{padding-top:54px}.form-lead{padding:68px 12px 28px}#quote-form{padding-bottom:55px}} @media(prefers-reduced-motion:reduce){.band .track{animation:none}} /* Photographies réelles dans les cadres prévus par le prototype */ .vhero.photo{background-image:linear-gradient(90deg,rgba(8,7,6,.72) 0%,rgba(8,7,6,.28) 58%,rgba(8,7,6,.08) 100%),linear-gradient(0deg,rgba(8,7,6,.35),transparent 55%),url("https://images.unsplash.com/photo-1506157786151-b8491531f063?auto=format&fit=crop&w=2200&q=85");background-size:cover;background-position:center} .rimg.photo.b{background-image:linear-gradient(0deg,rgba(8,7,6,.18),rgba(8,7,6,.05)),url("https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?auto=format&fit=crop&w=1300&q=85");background-size:cover;background-position:center} .editorial-photo.photo{background-image:linear-gradient(0deg,rgba(8,7,6,.2),rgba(8,7,6,.05)),url("https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?auto=format&fit=crop&w=1000&q=85");background-size:cover;background-position:center} .service-editorial:nth-child(2) .editorial-photo.photo{background-image:linear-gradient(0deg,rgba(8,7,6,.18),rgba(8,7,6,.05)),url("https://images.unsplash.com/photo-1505373877841-8d25f7d46678?auto=format&fit=crop&w=1000&q=85")} .service-editorial:nth-child(3) .editorial-photo.photo{background-image:linear-gradient(0deg,rgba(8,7,6,.18),rgba(8,7,6,.05)),url("https://images.unsplash.com/photo-1511795409834-ef04bbd61622?auto=format&fit=crop&w=1000&q=85")} .rimg.w.photo.c{background-image:linear-gradient(0deg,rgba(8,7,6,.28),rgba(8,7,6,.02)),url("https://images.unsplash.com/photo-1514525253161-7a46d19cd819?auto=format&fit=crop&w=1800&q=85");background-size:cover;background-position:center} /* Identité NOW fidèle au prototype : palette et mode jour/nuit */ :root{ --bg:#0B0B0C;--bg2:#121214;--sable:#DCC3A5;--sable-hi:#EADBC8; --ink:#F4EADD;--mute:rgba(244,234,221,.62);--line:rgba(220,195,165,.18); --veil:rgba(255,255,255,.035);--soft:rgba(220,195,165,.1);--on-sable:#0B0B0C; --display:'Lilita One',Impact,sans-serif;--label:'Jost',system-ui,sans-serif; --serif:'Cormorant Garamond',Georgia,serif;--sans:'Poppins',system-ui,sans-serif; color-scheme:dark; } :root[data-mode="jour"]{ --bg:#F3EEE7;--bg2:#EAE3D9;--sable:#8C6A45;--sable-hi:#5E4730; --ink:#1C1A17;--mute:rgba(28,26,23,.68);--line:rgba(150,112,72,.22); --veil:rgba(255,255,255,.48);--soft:rgba(150,112,72,.1);--on-sable:#FFFFFF; color-scheme:light; } html,body{background:var(--bg);color:var(--ink);transition:background-color .35s ease,color .35s ease} body{font-family:var(--sans)} main{color:var(--ink)} .vnav .theme-toggle{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid rgba(244,234,221,.48);border-radius:999px;padding:9px 12px;color:#F4EADD;font:500 10px var(--label);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap} .vnav .theme-toggle:hover{background:rgba(255,255,255,.1)} .vnav .theme-toggle:focus-visible{outline:2px solid #EADBC8;outline-offset:3px} #quote-form .panel,#quote-form .estimate{background:var(--bg2)!important;border-color:var(--line)!important;color:var(--ink)!important;transition:background-color .35s,color .35s,border-color .35s} #quote-form input:not([type=checkbox]):not([type=radio]),#quote-form select,#quote-form textarea{background:var(--bg)!important;border-color:var(--line)!important;color:var(--ink)!important} #quote-form input::placeholder,#quote-form textarea::placeholder{color:var(--mute)} #quote-form .service,#quote-form .music-panel,#quote-form .music-group{background:var(--veil)!important;border-color:var(--line)!important;color:var(--ink)!important} #quote-form .music-option:has(input:checked),#quote-form .service:has(input:checked){background:var(--soft)!important;border-color:var(--sable)!important} #quote-form .note,#quote-form .sub,#quote-form .catalog-status{color:var(--mute)!important} #quote-form .step-next,#quote-form button[type=submit],#quote-form .confirmation-ok{background:var(--sable)!important;color:var(--on-sable)!important;border-color:var(--sable)!important} #quote-form .step-back{background:transparent!important;color:var(--ink)!important;border-color:var(--line)!important} #quote-form .progress span{color:var(--mute);border-color:var(--line)} #quote-form .progress span[aria-current=step],#quote-form .progress span.is-active{color:var(--sable);border-color:var(--sable)} footer{background:var(--bg2);color:var(--mute);border-top:1px solid var(--line);transition:background-color .35s,color .35s} footer .brand{color:var(--ink)} footer .brand span{border-color:var(--line)} footer a:last-child{color:var(--sable)} :root[data-mode="jour"] .band{background:#1C1A17;color:#F4EADD} :root[data-mode="jour"] .band .track{color:#F4EADD} @media(max-width:900px){.vnav .right{gap:10px}.vnav .theme-toggle{font-size:9px;padding:8px 9px;letter-spacing:.05em}} @media(max-width:600px){.vnav .theme-toggle{font-size:9px;padding:8px 9px}.vnav .right{gap:7px}} /* Correctif mode jour : toutes les surfaces de la vitrine et du formulaire suivent les variables du prototype */ :root[data-mode="jour"] body, :root[data-mode="jour"] main{background:var(--bg)!important;color:var(--ink)!important} :root[data-mode="jour"] .cream{background:var(--bg)!important;color:var(--ink)!important} :root[data-mode="jour"] .vsec, :root[data-mode="jour"] .form-lead, :root[data-mode="jour"] .vcontent{color:var(--ink)} :root[data-mode="jour"] .lab, :root[data-mode="jour"] .eyebrow, :root[data-mode="jour"] .heading small, :root[data-mode="jour"] #quote-form .heading small, :root[data-mode="jour"] #quote-form .estimate>small{color:var(--sable)!important} :root[data-mode="jour"] .big, :root[data-mode="jour"] .service-editorial h3, :root[data-mode="jour"] #quote-form .heading h2, :root[data-mode="jour"] #quote-form .estimate h2{color:var(--ink)!important} :root[data-mode="jour"] .big em{color:var(--sable)!important} :root[data-mode="jour"] .lead, :root[data-mode="jour"] .ph-note, :root[data-mode="jour"] .muted, :root[data-mode="jour"] .note, :root[data-mode="jour"] #quote-form .note, :root[data-mode="jour"] #quote-form .sub, :root[data-mode="jour"] #quote-form .catalog-status{color:var(--mute)!important} :root[data-mode="jour"] .service-editorial{background:var(--veil)!important;border-color:var(--line)!important} :root[data-mode="jour"] .band{background:#1C1A17!important;color:#F4EADD!important} :root[data-mode="jour"] .band .track{color:#F4EADD!important} :root[data-mode="jour"] #quote-form .panel, :root[data-mode="jour"] #quote-form .estimate{background:var(--bg2)!important;border-color:var(--line)!important;color:var(--ink)!important;box-shadow:0 12px 36px rgba(50,35,20,.07)!important} :root[data-mode="jour"] #quote-form label{color:var(--ink)!important} :root[data-mode="jour"] #quote-form input:not([type=checkbox]):not([type=radio]), :root[data-mode="jour"] #quote-form select, :root[data-mode="jour"] #quote-form textarea{background:#FBF7F2!important;border-color:var(--line)!important;color:var(--ink)!important} :root[data-mode="jour"] #quote-form input::placeholder, :root[data-mode="jour"] #quote-form textarea::placeholder{color:rgba(28,26,23,.48)!important} :root[data-mode="jour"] #quote-form .service, :root[data-mode="jour"] #quote-form .music-panel, :root[data-mode="jour"] #quote-form .music-group{background:rgba(255,255,255,.52)!important;border-color:var(--line)!important;color:var(--ink)!important} :root[data-mode="jour"] #quote-form .music-option:has(input:checked), :root[data-mode="jour"] #quote-form .service:has(input:checked){background:rgba(140,106,69,.12)!important;border-color:var(--sable)!important;color:var(--ink)!important} :root[data-mode="jour"] #quote-form .progress span{color:var(--mute)!important;border-color:var(--line)!important} :root[data-mode="jour"] #quote-form .progress span[aria-current=step], :root[data-mode="jour"] #quote-form .progress span.is-active{color:var(--sable)!important;border-color:var(--sable)!important} :root[data-mode="jour"] #quote-form .step-next, :root[data-mode="jour"] #quote-form button[type=submit], :root[data-mode="jour"] #quote-form .confirmation-ok{background:var(--sable)!important;color:#fff!important;border-color:var(--sable)!important} :root[data-mode="jour"] #quote-form .step-back{background:transparent!important;color:var(--ink)!important;border-color:var(--line)!important} :root[data-mode="jour"] footer{background:var(--bg2)!important;color:var(--mute)!important;border-color:var(--line)!important} :root[data-mode="jour"] footer .brand{color:var(--ink)!important} :root[data-mode="jour"] footer a:last-child{color:var(--sable)!important} :root[data-mode="jour"] .theme-toggle{color:#F4EADD!important;border-color:rgba(244,234,221,.48)!important} /* Formulaire NOW : colonne de travail à gauche et récapitulatif indépendant à droite */ #quote-form{width:100%;max-width:1240px;margin:0 auto;padding:0 0 76px} #quote-form .request-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:26px;align-items:start} #quote-form .request-main{min-width:0} #quote-form .progress{display:flex;gap:10px;margin:0 0 16px;padding:0;overflow-x:auto} #quote-form .progress span{flex:1 0 0;display:flex;align-items:center;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--veil);font-size:11px;letter-spacing:.08em;color:var(--mute);white-space:nowrap} #quote-form .progress span b{font-weight:500;letter-spacing:0} #quote-form .progress span[aria-current="step"],#quote-form .progress span.is-active{background:var(--soft);border-color:var(--sable);color:var(--ink)} #quote-form .panel{border:1px solid var(--line);border-radius:22px;padding:clamp(20px,3vw,32px);background:var(--bg2);box-shadow:0 18px 48px rgba(0,0,0,.08);min-width:0} #quote-form .panel .heading{margin-bottom:24px} #quote-form .panel .heading h2{font-family:var(--serif);font-size:clamp(30px,3vw,42px);font-weight:400;line-height:1.08;margin:8px 0 0} #quote-form .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} #quote-form .grid>div,#quote-form .grid>.custom-question-field{min-width:0} #quote-form .panel label{display:block;margin:0 0 7px;color:var(--mute);font-size:11px;letter-spacing:.08em} #quote-form .panel input:not([type=checkbox]):not([type=radio]),#quote-form .panel select,#quote-form .panel textarea{width:100%;min-width:0;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:var(--bg);color:var(--ink);font:400 13px var(--sans);box-shadow:none} #quote-form .panel input:focus,#quote-form .panel select:focus,#quote-form .panel textarea:focus{outline:2px solid color-mix(in srgb,var(--sable) 38%,transparent);border-color:var(--sable)} #quote-form .step-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line)} #quote-form .estimate{position:sticky;top:24px;align-self:start;display:flex;flex-direction:column;gap:16px;padding:24px;border:1px solid var(--line);border-radius:22px;background:var(--bg2);box-shadow:0 18px 48px rgba(0,0,0,.1);min-width:0} #quote-form .estimate>small{font-size:10px;letter-spacing:.22em;line-height:1.6;color:var(--sable)} #quote-form .estimate h2{font-family:var(--serif);font-size:30px;line-height:1.05;font-weight:400;margin:0} #quote-form #estimate-copy{font-size:12px;line-height:1.65;color:var(--mute);margin:0} #quote-form .chips{display:flex;flex-wrap:wrap;gap:7px;line-height:1.5;font-size:12px;color:var(--mute)} #quote-form .chips:empty{display:none} #quote-form .estimate-total{font-family:var(--serif);font-size:26px;line-height:1.2;border-top:1px solid var(--line);padding-top:14px;margin:0;color:var(--ink)} #quote-form .estimate .note{font-size:11px;line-height:1.65;white-space:pre-line;margin:0} #quote-form #submit{width:100%;display:flex;justify-content:center;align-items:center;border:0;border-radius:999px;padding:14px 18px;background:var(--sable);color:var(--on-sable);font:500 12px var(--label);letter-spacing:.08em;cursor:pointer} #quote-form #submit:disabled{opacity:.45;cursor:not-allowed} #quote-form #status{font-size:12px;line-height:1.5;margin:0;color:var(--mute)} #quote-form .request-review{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--veil);font-size:12px} #quote-form .request-review h3{font-family:var(--serif);font-size:22px;font-weight:400;margin:0 0 10px} #quote-form .request-review dl{display:grid;gap:8px;margin:0} @media(max-width:900px){ #quote-form .request-layout{grid-template-columns:minmax(0,1fr) 280px;gap:16px} #quote-form .estimate{padding:18px} #quote-form .progress{gap:6px} #quote-form .progress span{padding:10px 9px;font-size:10px} } @media(max-width:700px){ #quote-form .request-layout{grid-template-columns:minmax(0,1fr);gap:16px} #quote-form .request-main{display:contents} #quote-form .progress{grid-row:1} #quote-form .estimate{position:static;grid-row:2} #quote-form .panel{grid-row:3} #quote-form .grid{grid-template-columns:minmax(0,1fr)} #quote-form .progress span{flex:1 0 115px} #quote-form .estimate{padding:20px} } @media(max-width:700px){ #quote-form .request-main{display:flex;flex-direction:column;gap:0} #quote-form .progress,#quote-form .estimate,#quote-form .panel{grid-row:auto} } /* Catalogue NOW : catégories sous forme d'onglets, produits affichés dans le panneau actif */ #quote-form .catalog-shell{min-width:0;margin-top:18px} #quote-form .catalog-tabs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 18px;padding:0 0 12px;border-bottom:1px solid var(--line)} #quote-form .catalog-tab{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;max-width:100%;border:1px solid var(--line);border-radius:999px;padding:10px 14px;background:var(--veil);color:var(--mute);font:500 12px var(--label);cursor:pointer;transition:background .2s,border-color .2s,color .2s} #quote-form .catalog-tab span{overflow-wrap:anywhere} #quote-form .catalog-tab small{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--soft);color:var(--sable);font-size:10px} #quote-form .catalog-tab[aria-selected="true"]{background:var(--sable);border-color:var(--sable);color:var(--on-sable)} #quote-form .catalog-tab[aria-selected="true"] small{background:rgba(0,0,0,.12);color:inherit} #quote-form .catalog-tab:focus-visible{outline:2px solid var(--sable);outline-offset:3px} #quote-form .catalog-tab-heading{margin:0;font:400 26px/1.1 var(--serif);color:var(--ink)} #quote-form .catalog-tab-hint{margin:6px 0 16px;color:var(--mute);font:400 12px/1.5 var(--label)} #quote-form .catalog-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} #quote-form .catalog-tab-panel[hidden]{display:none} #quote-form .catalog-tab-panel{min-width:0} #quote-form .product-card{display:flex;align-items:center;gap:10px;min-width:0;min-height:74px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--veil);cursor:pointer;transition:background .2s,border-color .2s,transform .2s} #quote-form .product-card:hover{border-color:var(--sable);transform:translateY(-1px)} #quote-form .product-card .product-info{display:flex;flex:1;min-width:0;flex-direction:column;gap:5px} #quote-form .product-card .product-info b{font-size:12px;line-height:1.4;font-weight:500;overflow-wrap:anywhere} #quote-form .product-card .product-price{font-size:12px;color:var(--sable);letter-spacing:.02em} #quote-form .product-card .symbol{display:flex;flex:0 0 28px;width:28px;height:28px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;color:var(--sable);font-size:18px} #quote-form .product-card i{font-style:normal;opacity:0;color:var(--sable)} #quote-form .product-card:has(input:checked){background:var(--soft)!important;border-color:var(--sable)!important} #quote-form .product-card:has(input:checked) .symbol{background:var(--sable);color:var(--on-sable);border-color:var(--sable)} #quote-form .product-card:has(input:checked) i{opacity:1} #quote-form .product-card input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} #quote-form .product-card:focus-within{outline:2px solid var(--sable);outline-offset:2px} @media(max-width:900px){#quote-form .catalog-items{grid-template-columns:minmax(0,1fr)}} @media(max-width:700px){#quote-form .catalog-tabs{flex-wrap:nowrap;overflow-x:auto;padding:0 0 12px;scrollbar-width:thin}#quote-form .catalog-tab{flex:0 0 auto;white-space:nowrap}#quote-form .catalog-items{grid-template-columns:minmax(0,1fr)}} /* MODE JOUR — catalogue NOW inspiré directement de la maquette de référence */ :root[data-mode="jour"] #quote-form{max-width:1460px;padding:0 18px 76px} :root[data-mode="jour"] #quote-form .request-layout{grid-template-columns:minmax(0,1fr) minmax(340px,390px);gap:22px} :root[data-mode="jour"] #quote-form .request-main{min-width:0} :root[data-mode="jour"] #quote-form .panel, :root[data-mode="jour"] #quote-form .estimate{background:#F0EAE2!important;border:1px solid #DDD0C0!important;border-radius:26px!important;box-shadow:none!important;color:#292622!important} :root[data-mode="jour"] #quote-form .panel{padding:28px} :root[data-mode="jour"] #quote-form .heading h2, :root[data-mode="jour"] #quote-form .estimate h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(32px,3vw,42px);font-weight:400;letter-spacing:-.02em;color:#292622!important} :root[data-mode="jour"] #quote-form .heading small, :root[data-mode="jour"] #quote-form .estimate>small{font-family:'Jost',sans-serif;color:#987246!important;letter-spacing:.2em} :root[data-mode="jour"] #quote-form .progress{gap:8px;margin-bottom:18px} :root[data-mode="jour"] #quote-form .progress span{background:#F4EFE8;border:1px solid #DED2C4;border-radius:999px;color:#756F68;padding:11px 15px} :root[data-mode="jour"] #quote-form .progress span[aria-current="step"], :root[data-mode="jour"] #quote-form .progress span.is-active{background:#927047;color:#fff;border-color:#927047} :root[data-mode="jour"] #quote-form .catalog-tabs{border:0;gap:8px;margin:0 0 20px;padding:0 0 12px} :root[data-mode="jour"] #quote-form .catalog-tab{background:#F0EAE2;border-color:#DED2C4;color:#5F5952;border-radius:999px;padding:10px 16px} :root[data-mode="jour"] #quote-form .catalog-tab[aria-selected="true"]{background:#927047;border-color:#927047;color:#fff} :root[data-mode="jour"] #quote-form .catalog-tab small{background:rgba(146,112,71,.12);color:inherit} :root[data-mode="jour"] #quote-form .catalog-tab-heading{font-size:30px;color:#292622} :root[data-mode="jour"] #quote-form .catalog-tab-hint{color:#827A72} :root[data-mode="jour"] #quote-form .catalog-items{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} :root[data-mode="jour"] #quote-form .product-card{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;min-height:0;padding:0;overflow:hidden;background:#EEE7DE!important;border:1px solid #DED2C4!important;border-radius:28px;transition:transform .2s,border-color .2s} :root[data-mode="jour"] #quote-form .product-card:before{content:"";display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:150px;flex:0 0 150px;background:radial-gradient(ellipse at 50% 45%,#F8F3EC 0%,#E8DED1 72%,#E3D7C8 100%);border-bottom:1px solid #D8C9B7} :root[data-mode="jour"] #quote-form .product-card .symbol{position:absolute;top:0;left:0;width:100%;height:150px;display:flex;align-items:center;justify-content:center;border:0;border-radius:0;background:transparent;color:#927047;font-family:'Cormorant Garamond',Georgia,serif;font-size:40px;flex-basis:auto} :root[data-mode="jour"] #quote-form .product-card .product-info{display:flex;flex:1;min-height:100px;padding:14px 16px 16px;gap:6px} :root[data-mode="jour"] #quote-form .product-card .product-info b{font-family:'Cormorant Garamond',Georgia,serif;font-size:23px;line-height:1.1;font-weight:400;color:#292622} :root[data-mode="jour"] #quote-form .product-card .product-price{font-family:'Cormorant Garamond',Georgia,serif;font-size:19px;color:#292622;margin-top:auto;padding-top:8px} :root[data-mode="jour"] #quote-form .product-card i{position:absolute;right:14px;bottom:18px;color:#927047} :root[data-mode="jour"] #quote-form .product-card:has(input:checked){background:#E8DCCB!important;border-color:#927047!important} :root[data-mode="jour"] #quote-form .product-card:has(input:checked) .symbol{background:transparent;color:#927047} :root[data-mode="jour"] #quote-form .estimate{padding:24px;gap:16px;position:sticky;top:20px} :root[data-mode="jour"] #quote-form #estimate-copy, :root[data-mode="jour"] #quote-form .note, :root[data-mode="jour"] #quote-form #status{color:#77716A!important} :root[data-mode="jour"] #quote-form .chips{color:#38342F} :root[data-mode="jour"] #quote-form .estimate-total{border-color:#DED2C4;color:#292622;font-size:32px} :root[data-mode="jour"] #quote-form #submit, :root[data-mode="jour"] #quote-form .step-next{background:#927047!important;border-color:#927047!important;color:#fff!important;border-radius:999px;padding:14px 20px} :root[data-mode="jour"] #quote-form .step-back{border:1px solid #DED2C4!important;color:#514A42!important;border-radius:999px} :root[data-mode="jour"] #quote-form input:not([type=checkbox]):not([type=radio]), :root[data-mode="jour"] #quote-form select, :root[data-mode="jour"] #quote-form textarea{background:#E9E2D9!important;border-color:#D8CBBB!important;color:#292622!important;border-radius:14px} @media(max-width:1050px){ :root[data-mode="jour"] #quote-form .request-layout{grid-template-columns:minmax(0,1fr) 320px;gap:16px} :root[data-mode="jour"] #quote-form .catalog-items{grid-template-columns:repeat(2,minmax(0,1fr))} :root[data-mode="jour"] #quote-form .product-card:before, :root[data-mode="jour"] #quote-form .product-card .symbol{height:120px;flex-basis:120px} } @media(max-width:760px){ :root[data-mode="jour"] #quote-form{padding-inline:0} :root[data-mode="jour"] #quote-form .request-layout{grid-template-columns:minmax(0,1fr)} :root[data-mode="jour"] #quote-form .request-main{display:flex;flex-direction:column} :root[data-mode="jour"] #quote-form .estimate{position:static;order:2} :root[data-mode="jour"] #quote-form .panel{padding:18px} :root[data-mode="jour"] #quote-form .catalog-items{grid-template-columns:repeat(2,minmax(0,1fr))} :root[data-mode="jour"] #quote-form .product-card:before, :root[data-mode="jour"] #quote-form .product-card .symbol{height:100px;flex-basis:100px} :root[data-mode="jour"] #quote-form .product-card .product-info{padding:12px} :root[data-mode="jour"] #quote-form .product-card .product-info b{font-size:19px} } @media(max-width:480px){ :root[data-mode="jour"] #quote-form .catalog-items{grid-template-columns:minmax(0,1fr)} } /* Catalogue + récapitulatif live et contact regroupés dans le panneau droit */ #quote-form .estimate{gap:14px} #quote-form .contact-side{border-top:1px solid var(--line);padding-top:20px;margin-top:4px;display:flex;flex-direction:column;gap:12px} #quote-form .contact-side-heading small{display:block;font:500 10px var(--label);letter-spacing:.2em;color:var(--sable);margin-bottom:6px} #quote-form .contact-side-heading h3{margin:0 0 4px;font:400 27px/1.1 var(--serif);color:var(--ink)} #quote-form .contact-side .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} #quote-form .contact-side .grid>div{min-width:0} #quote-form .contact-side label:not(.consent){font-size:10px;letter-spacing:.08em} #quote-form .contact-side input:not([type=checkbox]){width:100%;min-width:0;padding:11px 12px;font-size:12px} #quote-form .contact-side .consent{display:flex;align-items:flex-start;gap:8px;font-size:11px;line-height:1.45} #quote-form .contact-side .consent input{margin-top:3px;flex:0 0 auto} #quote-form .contact-side .note{font-size:10px;line-height:1.5;margin:0} @media(max-width:760px){#quote-form .contact-side .grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:430px){#quote-form .contact-side .grid{grid-template-columns:minmax(0,1fr)}} /* Final layout: live Odoo catalogue left; event, contact and live summary right */ #quote-form .request-layout{grid-template-columns:minmax(0,1fr) minmax(360px,420px);gap:22px;align-items:start} #quote-form .request-main{min-width:0} #quote-form .catalog-main{display:block!important} #quote-form .event-side{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:6px;display:flex;flex-direction:column;gap:12px} #quote-form .event-side .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} #quote-form .event-side .grid>div{min-width:0} #quote-form .event-side label{font-size:10px;letter-spacing:.08em} #quote-form .event-side input,#quote-form .event-side select{width:100%;min-width:0;padding:10px 11px;font-size:12px} #quote-form .contact-side{border-top:0;margin-top:0;padding-top:0} #quote-form .estimate{position:sticky;top:16px;max-height:none;height:auto;overflow:visible;align-self:start} #quote-form .catalog-main .heading h2{font-size:clamp(30px,3vw,42px)} #quote-form #request-review{background:transparent!important;color:var(--ink)!important;border:0!important;padding:0!important} #quote-form #request-review h3,#quote-form #request-review p,#quote-form #request-review dt,#quote-form #request-review dd{color:var(--ink)!important} :root[data-mode="jour"] #quote-form #request-review, :root[data-mode="jour"] #quote-form #request-review h3, :root[data-mode="jour"] #quote-form #request-review p, :root[data-mode="jour"] #quote-form #request-review dt, :root[data-mode="jour"] #quote-form #request-review dd{color:#292622!important} @media(max-width:760px){#quote-form .request-layout{grid-template-columns:minmax(0,1fr)}#quote-form .estimate{position:static;max-height:none;overflow:visible;order:2}#quote-form .event-side .grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:430px){#quote-form .event-side .grid{grid-template-columns:minmax(0,1fr)}} /* Correctifs de rendu après contrôle de la capture : un seul catalogue, cartes lisibles */ #quote-form #services{display:block!important;width:100%;min-width:0} #quote-form .catalog-shell{display:block!important;width:100%;min-width:0} #quote-form .catalog-tab-panels{display:block;width:100%;min-width:0} #quote-form .catalog-tab-panel[hidden]{display:none!important} #quote-form .catalog-tab-panel:not([hidden]){display:block!important;width:100%} #quote-form .catalog-tab-panel .catalog-items{display:grid!important;width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} #quote-form .catalog-tab-panel .product-card{box-sizing:border-box;width:100%;min-width:0;min-height:245px;height:auto;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;position:relative;overflow:hidden;background:#EEE7DE!important;border:1px solid #DED2C4!important;border-radius:24px!important;padding:0!important;color:#292622!important;box-shadow:none} #quote-form .catalog-tab-panel .product-card:before{content:"";display:block;flex:0 0 105px;height:105px;background:radial-gradient(ellipse at center,#F8F3EC 0%,#E8DED1 100%);border-bottom:1px solid #D8C9B7} #quote-form .catalog-tab-panel .product-card .symbol{position:absolute;left:0;top:0;width:100%;height:105px;display:flex;align-items:center;justify-content:center;background:transparent!important;border:0!important;color:#927047!important;font-size:34px;line-height:1} #quote-form .catalog-tab-panel .product-card .product-info, #quote-form .catalog-tab-panel .product-card>span:not(.symbol){box-sizing:border-box;display:flex;flex:1;flex-direction:column;gap:7px;min-width:0;padding:14px 14px 18px;color:#292622!important;background:transparent!important} #quote-form .catalog-tab-panel .product-card .product-info b, #quote-form .catalog-tab-panel .product-card b{display:block;color:#292622!important;font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;line-height:1.15;font-weight:400;overflow-wrap:anywhere} #quote-form .catalog-tab-panel .product-card .product-price, #quote-form .catalog-tab-panel .product-card small{display:block;color:#756D64!important;font-size:13px!important;opacity:1!important} #quote-form .catalog-tab-panel .product-card i{position:absolute;right:13px;bottom:13px;color:#927047!important} #quote-form .catalog-tab-panel .product-card input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px} #quote-form .catalog-tab-panel .product-card:has(input:checked){background:#E8DCCB!important;border-color:#927047!important;box-shadow:0 0 0 1px #927047 inset} #quote-form .catalog-tab-panel .custom-project-card{min-height:245px} #quote-form .request-review{background:transparent!important;border:0!important;padding:0!important;color:#292622!important} #quote-form .request-review dt{color:#927047!important;font-size:10px!important;text-transform:uppercase;letter-spacing:.12em} #quote-form .request-review dd{color:#292622!important;font-size:13px!important;margin:2px 0 12px!important;overflow-wrap:anywhere} #quote-form .request-review h3{color:#292622!important} #quote-form #estimate-copy{color:#756D64!important} @media(max-width:1050px){#quote-form .catalog-tab-panel .catalog-items{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:760px){#quote-form .catalog-tab-panel .catalog-items{grid-template-columns:repeat(2,minmax(0,1fr))}#quote-form .catalog-tab-panel .product-card{min-height:210px}} @media(max-width:480px){#quote-form .catalog-tab-panel .catalog-items{grid-template-columns:minmax(0,1fr)}} /* Final readability: sidebar should not clip the contact form */ #quote-form .estimate{max-height:none!important;height:auto!important;overflow:visible!important} #quote-form .estimate #request-review{margin:18px 0 24px!important} #quote-form .estimate #request-review p{margin:0!important;color:#756D64!important;font-size:13px!important;line-height:1.55} #quote-form .estimate #request-review dl{margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0} #quote-form .estimate #request-review dt{margin-top:9px!important} #quote-form .estimate #request-review dd{margin:2px 0 4px!important} #quote-form .estimate .contact-side{margin-top:20px!important;padding-top:20px!important;border-top:1px solid #DED2C4!important} #quote-form .catalog-tab-panel .product-card .product-info{padding:14px 14px 18px!important;min-height:105px} #quote-form .catalog-tab-panel .product-card .product-info b{font-size:21px!important;line-height:1.18!important} #quote-form .catalog-tab-panel .product-card .product-price{margin-top:auto;padding-top:8px} /* Final live recap cleanup */ #quote-form #request-review dl{display:grid;grid-template-columns:minmax(0,1fr);gap:0} #quote-form #request-review dt{margin-top:10px!important;color:#927047!important;font-size:10px!important;font-weight:600;text-transform:uppercase;letter-spacing:.1em} #quote-form #request-review dd{margin:3px 0 0!important;padding:0 0 8px!important;color:#292622!important;font-size:13px!important;line-height:1.45;border-bottom:1px solid #DED2C4;overflow-wrap:anywhere} #quote-form #request-review dd:last-child{border-bottom:0} #quote-form #estimate-copy{margin-top:10px;color:#756D64!important;font-size:12px!important;line-height:1.5} #quote-form #selected-services{display:flex;flex-wrap:wrap;gap:6px} #quote-form #selected-services span{padding:5px 9px;border:1px solid #D8C9B7;border-radius:999px;color:#292622;background:#F6F0E8;font-size:11px} /* Jour : cartes catalogue plus compactes et formulaire droit lisible */ :root[data-mode="jour"] #quote-form .catalog-tab-panel .product-card:before{height:112px;flex-basis:112px} :root[data-mode="jour"] #quote-form .catalog-tab-panel .product-card .symbol{height:112px;font-size:34px} :root[data-mode="jour"] #quote-form .catalog-tab-panel .product-card{min-height:218px} :root[data-mode="jour"] #quote-form .catalog-tab-panel .product-card .product-info{min-height:96px;padding:12px 14px 14px} :root[data-mode="jour"] #quote-form .catalog-tab-panel .product-card .product-info b{font-size:21px;line-height:1.16} :root[data-mode="jour"] #quote-form .estimate{position:sticky;top:16px;max-height:none;height:auto;overflow:visible;min-width:0} :root[data-mode="jour"] #quote-form .estimate label{font-size:12px;letter-spacing:.02em} :root[data-mode="jour"] #quote-form .estimate input:not([type=checkbox]),:root[data-mode="jour"] #quote-form .estimate select,:root[data-mode="jour"] #quote-form .estimate textarea{min-width:0;width:100%;box-sizing:border-box} :root[data-mode="jour"] #quote-form .estimate .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} :root[data-mode="jour"] #quote-form #estimate-total{font-size:25px;line-height:1.25} @media(max-width:1000px){:root[data-mode="jour"] #quote-form .request-layout{grid-template-columns:minmax(0,1fr) 340px;gap:18px}} @media(max-width:760px){:root[data-mode="jour"] #quote-form .request-layout{grid-template-columns:minmax(0,1fr)}:root[data-mode="jour"] #quote-form .estimate{position:static}} /* Quantity controls on selected catalogue products */ #quote-form .product-card{position:relative} #quote-form .product-card .product-quantity{display:flex;align-items:center;gap:8px;position:absolute;right:12px;bottom:12px;z-index:3;padding:4px 6px;border:1px solid #D4C1AA;border-radius:999px;background:#F6F0E8;color:#2b2925} #quote-form .product-card .product-quantity[hidden]{display:none!important} #quote-form .product-card .product-quantity button{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;border:0;border-radius:50%;background:#927047;color:white;font-size:16px;cursor:pointer} #quote-form .product-card .product-quantity b{min-width:12px;text-align:center;font:600 12px var(--sans)} #quote-form .product-card.is-selected .product-info{padding-right:94px!important} #quote-form .product-card.is-selected{border-color:#927047!important;box-shadow:inset 0 0 0 1px #927047} #quote-form .product-card .product-info .product-price{display:block} #quote-form .estimate .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} #quote-form .estimate label{font-size:11px;line-height:1.4;letter-spacing:.02em} #quote-form .estimate input:not([type=checkbox]),#quote-form .estimate select,#quote-form .estimate textarea{width:100%;min-width:0;box-sizing:border-box} #quote-form .estimate{max-height:none!important;height:auto!important;overflow:visible!important} @media(max-width:1120px){#quote-form .request-layout{grid-template-columns:minmax(0,1fr) minmax(300px,34%);gap:18px}#quote-form .catalog-items{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:760px){#quote-form .request-layout{grid-template-columns:minmax(0,1fr)}#quote-form .estimate{position:static}#quote-form .catalog-items{grid-template-columns:repeat(2,minmax(0,1fr))}} /* Catalogue NOW : cartes plus compactes */ #quote-form .catalog-tab-panel .catalog-items{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} #quote-form .catalog-tab-panel .product-card{min-height:0!important;height:auto!important;border-radius:22px!important} #quote-form .catalog-tab-panel .product-card:before, #quote-form .catalog-tab-panel .product-card .symbol{height:84px!important;min-height:84px!important;flex-basis:84px!important;font-size:29px!important} #quote-form .catalog-tab-panel .product-card .product-info{min-height:76px!important;padding:10px 12px 12px!important} #quote-form .catalog-tab-panel .product-card .product-info b{font-size:18px!important;line-height:1.16!important} #quote-form .catalog-tab-panel .product-card .product-price{font-size:12px!important;margin-top:6px!important;padding-top:4px!important} #quote-form .catalog-tab-panel .product-card .product-quantity{position:absolute!important;right:9px!important;bottom:9px!important;left:auto!important;top:auto!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:6px!important;padding:3px 5px!important;border-radius:999px!important} #quote-form .catalog-tab-panel .product-card .product-quantity button{width:22px!important;height:22px!important;flex:0 0 22px!important} #quote-form .catalog-tab-panel .product-card.is-selected .product-info{padding-right:12px!important;padding-bottom:40px!important} @media(max-width:1050px){#quote-form .catalog-tab-panel .catalog-items{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){#quote-form .catalog-tab-panel .catalog-items{grid-template-columns:minmax(0,1fr)}#quote-form .catalog-tab-panel .product-card:before,#quote-form .catalog-tab-panel .product-card .symbol{height:72px!important;min-height:72px!important;flex-basis:72px!important}} /* Correctif : masquer strictement les quantités des produits non sélectionnés */ #quote-form .catalog-tab-panel .product-card .product-quantity[hidden]{display:none!important;visibility:hidden!important} #quote-form .catalog-tab-panel .product-card .product-quantity:not([hidden]){display:flex!important;flex-direction:row!important;align-items:center!important} #quote-form .catalog-tab-panel .product-card .product-quantity{gap:5px!important;background:#F6F0E8!important;border:1px solid #D4C1AA!important} #quote-form .catalog-tab-panel .product-card .product-info{padding-bottom:14px!important} #quote-form .catalog-tab-panel .product-card.is-selected .product-info{padding-bottom:42px!important} #quote-form .catalog-tab-panel .product-card .product-quantity button{font-size:14px!important} /* Bouton Ajouter visible au centre des cartes non sélectionnées */ #quote-form .catalog-tab-panel .product-card .symbol{display:flex!important;align-items:center!important;justify-content:center!important;font-size:14px!important;font-family:var(--sans,system-ui,sans-serif)!important;font-weight:600!important;letter-spacing:.02em!important} #quote-form .catalog-tab-panel .product-card .symbol::first-letter{font-size:14px!important} #quote-form .catalog-tab-panel .product-card.is-selected .symbol{font-size:0!important} #quote-form .catalog-tab-panel .product-card.is-selected .symbol::after{content:"✓";font-size:25px!important;font-weight:600!important} #quote-form .catalog-tab-panel .product-card:not(.is-selected) .symbol{color:#fff!important} #quote-form .catalog-tab-panel .product-card:not(.is-selected) .symbol{background:radial-gradient(ellipse at center,rgba(150,112,72,.14),rgba(150,112,72,0) 68%)} /* Carte catalogue : Ajouter et quantite partagent la zone d'action en bas */ #quote-form .catalog-tab-panel .product-card .product-info{position:relative!important;display:block!important;padding:10px 12px 42px!important;min-height:88px!important} #quote-form .catalog-tab-panel .product-card .product-info .symbol{position:absolute!important;right:10px!important;bottom:10px!important;top:auto!important;left:auto!important;width:auto!important;height:32px!important;min-height:32px!important;flex-basis:auto!important;padding:0 15px!important;border:0!important;border-radius:999px!important;background:#927047!important;color:#fff!important;font:600 12px/1 var(--sans,system-ui,sans-serif)!important;letter-spacing:0!important;white-space:nowrap!important;cursor:pointer!important;box-shadow:none!important} #quote-form .catalog-tab-panel .product-card .product-info .product-quantity{position:absolute!important;right:10px!important;bottom:9px!important;top:auto!important;left:auto!important;height:30px!important;padding:3px 5px!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:5px!important;border:1px solid #D4C1AA!important;border-radius:999px!important;background:#F6F0E8!important} #quote-form .catalog-tab-panel .product-card .product-info .product-quantity[hidden]{display:none!important} #quote-form .catalog-tab-panel .product-card .product-info .product-quantity button{width:22px!important;height:22px!important;flex:0 0 22px!important} #quote-form .catalog-tab-panel .product-card .product-info .product-price{display:block!important} #quote-form .catalog-tab-panel .product-card.is-selected .product-info .symbol{display:none!important} #quote-form .catalog-tab-panel .product-card .symbol{font-size:0!important} /* Ajustement final des actions catalogue : boutons contenus dans la carte */ #quote-form .catalog-tab-panel .product-card{overflow:hidden!important;min-width:0!important} #quote-form .catalog-tab-panel .product-card .product-info{min-width:0!important;overflow:hidden!important;padding-right:12px!important} #quote-form .catalog-tab-panel .product-card .product-info .symbol{right:10px!important;bottom:10px!important;max-width:calc(100% - 20px)!important;box-sizing:border-box!important;z-index:2} #quote-form .catalog-tab-panel .product-card .product-info .product-quantity{right:10px!important;bottom:9px!important;left:auto!important;top:auto!important;max-width:calc(100% - 20px)!important;box-sizing:border-box!important;z-index:3;white-space:nowrap!important} #quote-form .catalog-tab-panel .product-card.is-selected .product-info{padding-right:12px!important;padding-bottom:44px!important} #quote-form .request-review .review-product-line{display:block!important;width:100%;max-width:100%;overflow-wrap:anywhere;padding:4px 0 8px!important;border-bottom:1px solid #DED2C4!important} #quote-form .request-review .review-product-line:last-child{border-bottom:0!important} /* Fix ciblé : le bouton de quantité doit être positionné dans la carte, jamais hors de sa bordure */ #quote-form .catalog-tab-panel .product-card .product-info{position:relative!important;display:block!important;box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;flex:1 1 auto!important;overflow:visible!important;padding:10px 12px 48px!important} #quote-form .catalog-tab-panel .product-card .product-info .product-quantity{position:absolute!important;right:12px!important;bottom:10px!important;left:auto!important;top:auto!important;width:max-content!important;max-width:calc(100% - 24px)!important;min-width:0!important;box-sizing:border-box!important;gap:4px!important;padding:3px 4px!important} #quote-form .catalog-tab-panel .product-card .product-info .product-quantity button{width:21px!important;height:21px!important;flex:0 0 21px!important;margin:0!important;padding:0!important} #quote-form .catalog-tab-panel .product-card .product-info .product-quantity b{min-width:10px!important;padding:0!important;text-align:center!important} #quote-form .catalog-tab-panel .product-card .product-info .symbol{right:12px!important;bottom:10px!important;max-width:calc(100% - 24px)!important} /* Lisibilité renforcée des cartes du catalogue */ #quote-form .catalog-tab-panel .product-card .product-info .product-price, #quote-form .catalog-tab-panel .product-card .product-info small.product-price { font-size: 13px !important; line-height: 1.45 !important; } #quote-form .catalog-tab-panel .product-card .product-info b { font-size: 18px !important; line-height: 1.35 !important; letter-spacing: .01em !important; } #quote-form .catalog-tab-panel .product-card .product-info .symbol { font-size: 14px !important; line-height: 1 !important; padding: 10px 18px !important; min-height: 38px !important; } #quote-form .catalog-tab-panel .product-card .product-info .product-quantity { font-size: 15px !important; } #quote-form .catalog-tab-panel .product-card .product-info .product-quantity button { font-size: 16px !important; } @media(max-width:700px) { #quote-form .catalog-tab-panel .product-card .product-info b { font-size: 17px !important; } #quote-form .catalog-tab-panel .product-card .product-info .product-price, #quote-form .catalog-tab-panel .product-card .product-info small.product-price { font-size: 13px !important; } } /* Prix plus visibles dans les cartes du catalogue */ #quote-form .catalog-tab-panel .product-card .product-info .product-price, #quote-form .catalog-tab-panel .product-card .product-info small.product-price { font-size: 16px !important; line-height: 1.5 !important; font-weight: 500 !important; letter-spacing: .01em !important; } @media(max-width:700px) { #quote-form .catalog-tab-panel .product-card .product-info .product-price, #quote-form .catalog-tab-panel .product-card .product-info small.product-price { font-size: 15px !important; } } /* Page de finalisation du devis */ #quote-form #checkout-page{width:100%;max-width:1240px;margin:0 auto;padding:28px 0 70px;color:var(--ink)} #quote-form #checkout-page[hidden]{display:none!important} #quote-form .checkout-back{display:inline-flex;align-items:center;margin:0 0 28px;padding:11px 17px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font:500 14px var(--sans);cursor:pointer} #quote-form .checkout-heading{margin:0 0 28px} #quote-form .checkout-heading small{color:var(--sable);font:600 11px var(--label);letter-spacing:.18em} #quote-form .checkout-heading h2{margin:10px 0;font:400 clamp(34px,4vw,54px)/1.05 var(--serif);color:var(--ink)} #quote-form .checkout-heading p{color:var(--mute);font:400 15px/1.6 var(--sans)} #quote-form .checkout-columns{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);gap:24px;align-items:start} #quote-form .checkout-main,#quote-form .checkout-details{min-width:0;padding:clamp(20px,3vw,32px);border:1px solid var(--line);border-radius:24px;background:var(--bg2)} #quote-form .checkout-main>label[for="details"]{display:block;margin:0 0 10px;font:600 13px var(--label);color:var(--ink)} #quote-form .checkout-main>#details{width:100%;box-sizing:border-box;min-height:150px;margin-bottom:22px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--veil);color:var(--ink);font:400 15px/1.6 var(--sans)} #quote-form .checkout-main .music-panel{margin:18px 0 0} #quote-form .checkout-main .music-heading h3{font:400 30px/1.1 var(--serif)} #quote-form .checkout-main .music-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} #quote-form .checkout-details .event-side,#quote-form .checkout-details .contact-side{margin:0;padding:0;border:0} #quote-form .checkout-details .contact-side{margin-top:26px;padding-top:24px;border-top:1px solid var(--line)} #quote-form .checkout-details .contact-side-heading h3{font:400 30px/1.1 var(--serif)} #quote-form .checkout-details .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} #quote-form .checkout-details .grid>div{min-width:0} #quote-form .checkout-details label{display:block;margin:0 0 7px;font:600 12px var(--label);color:var(--ink)} #quote-form .checkout-details input:not([type=checkbox]),#quote-form .checkout-details select,#quote-form .checkout-details textarea{width:100%;min-width:0;box-sizing:border-box;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--veil);color:var(--ink);font:400 14px var(--sans)} #quote-form .checkout-details .consent{display:flex;align-items:flex-start;gap:9px;margin-top:18px;font-size:12px;line-height:1.5} #quote-form .checkout-submit{margin-top:24px} #quote-form .checkout-submit #submit{width:100%;min-height:54px;border-radius:999px;font-size:15px} #quote-form .checkout-submit .status{margin-top:12px} #quote-form .estimate .continue-to-checkout{width:100%;min-height:52px;margin-top:22px;padding:14px 20px;border:0;border-radius:999px;background:var(--sable);color:var(--on-sable);font:600 14px var(--sans);cursor:pointer} #quote-form .estimate .continue-to-checkout:hover{filter:brightness(1.06)} :root[data-mode="jour"] #quote-form .checkout-main,:root[data-mode="jour"] #quote-form .checkout-details{background:#F0E8DE} @media(max-width:850px){#quote-form .checkout-columns{grid-template-columns:minmax(0,1fr)}} @media(max-width:560px){#quote-form .checkout-details .grid,#quote-form .checkout-main .music-options{grid-template-columns:minmax(0,1fr)}#quote-form .checkout-main,#quote-form .checkout-details{padding:18px}} /* Finalisation : description et événement réunis dans la colonne principale */ #quote-form .checkout-main .event-side{display:block;margin:28px 0 0;padding:26px 0 0;border:0;border-top:1px solid var(--line);background:transparent} #quote-form .checkout-main .event-side .contact-side-heading{margin:0 0 18px} #quote-form .checkout-main .event-side .contact-side-heading small, #quote-form .checkout-details .contact-side-heading small{display:block;color:var(--sable);font:600 11px var(--label);letter-spacing:.18em} #quote-form .checkout-main .event-side .contact-side-heading h3{margin:8px 0 0;font:400 30px/1.1 var(--serif);color:var(--ink)} #quote-form .checkout-main .event-side .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} #quote-form .checkout-main .event-side .grid>div{min-width:0} #quote-form .checkout-main .event-side label{display:block;margin:0 0 7px;font:600 12px var(--label);color:var(--ink)} #quote-form .checkout-main .event-side input, #quote-form .checkout-main .event-side select{width:100%;min-width:0;box-sizing:border-box;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--veil);color:var(--ink);font:400 14px var(--sans)} #quote-form .checkout-main .music-panel{padding-top:24px;border-top:1px solid var(--line)} #quote-form .checkout-details .contact-side{margin:0;padding:0;border:0} @media(max-width:560px){#quote-form .checkout-main .event-side .grid{grid-template-columns:minmax(0,1fr)}} /* Correctif de visibilité et de présentation de la page de finalisation */ #quote-form #checkout-page:not([hidden]){display:block!important} #quote-form #checkout-page .checkout-columns{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr)!important;gap:24px!important;align-items:start!important} #quote-form #checkout-page .checkout-main,#quote-form #checkout-page .checkout-details{display:block!important;min-width:0!important;visibility:visible!important;opacity:1!important} #quote-form #checkout-page .checkout-main .event-side,#quote-form #checkout-page .checkout-details .contact-side{display:block!important;visibility:visible!important;opacity:1!important} #quote-form #checkout-page .checkout-main #details{display:block!important;visibility:visible!important;min-height:150px} #quote-form #checkout-page .checkout-main label[for="details"]{display:block!important;margin:0 0 10px!important} #quote-form #checkout-page .checkout-main .event-side .grid,#quote-form #checkout-page .checkout-details .contact-side .grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important} #quote-form #checkout-page .checkout-details .contact-side input:not([type=checkbox]),#quote-form #checkout-page .checkout-details .contact-side select,#quote-form #checkout-page .checkout-details .contact-side textarea{display:block!important;width:100%!important;box-sizing:border-box!important} #quote-form #checkout-page .checkout-main .music-panel:not([hidden]),#quote-form #checkout-page .checkout-main .event-side:not([hidden]){display:block!important} #quote-form #checkout-page .checkout-main .music-panel[hidden]{display:none!important} @media(max-width:850px){#quote-form #checkout-page .checkout-columns{grid-template-columns:minmax(0,1fr)!important}} @media(max-width:560px){#quote-form #checkout-page .checkout-main .event-side .grid,#quote-form #checkout-page .checkout-details .contact-side .grid{grid-template-columns:minmax(0,1fr)!important}} /* Correctif visibilité de la finalisation */ #quote-form .request-main[hidden], #quote-form .estimate[hidden], #quote-form #checkout-page[hidden] { display: none !important; } #quote-form #checkout-page .checkout-heading { display:block !important; min-height:0 !important; padding:24px 0 30px !important; margin:0 0 28px !important; background:transparent !important; border:0 !important; box-shadow:none !important; color:var(--ink) !important; } #quote-form #checkout-page .checkout-heading small, #quote-form #checkout-page .checkout-heading h2, #quote-form #checkout-page .checkout-heading p { background:transparent !important; color:var(--ink) !important; opacity:1 !important; visibility:visible !important; } #quote-form #checkout-page .checkout-heading h2 { margin:10px 0 12px !important; font-size:clamp(34px,4vw,54px) !important; line-height:1.08 !important; } #quote-form #checkout-page .checkout-heading p { max-width:680px !important; color:var(--mute) !important; } /* Suggestions d'adresse postale */ #quote-form .address-suggestions{position:relative;z-index:20;display:flex;flex-direction:column;gap:0;margin-top:5px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg2);box-shadow:0 8px 24px rgba(0,0,0,.09)} #quote-form .address-suggestions[hidden]{display:none!important} #quote-form .address-suggestion{display:block;width:100%;padding:12px 14px;border:0;border-bottom:1px solid var(--line);background:var(--bg2);color:var(--ink);text-align:left;font:400 13px/1.45 var(--sans);cursor:pointer} #quote-form .address-suggestion:last-child{border-bottom:0} #quote-form .address-suggestion:hover,#quote-form .address-suggestion:focus{background:var(--veil);outline:0} /* Finalisation NOW : un seul bloc fluide, sans colonne vide */ #quote-form #checkout-page .checkout-columns{display:block!important;max-width:980px!important;margin:0 auto!important} #quote-form #checkout-page .checkout-main{display:block!important;width:100%!important;box-sizing:border-box!important} #quote-form #checkout-page .checkout-details{display:contents!important} #quote-form #checkout-page .checkout-main .contact-side{display:block!important;margin:30px 0 0!important;padding:28px 0 0!important;border:0!important;border-top:1px solid var(--line)!important} #quote-form #checkout-page .checkout-main .contact-side .contact-side-heading{margin:0 0 18px!important} #quote-form #checkout-page .checkout-main .contact-side .contact-side-heading h3{font:400 30px/1.1 var(--serif)!important;color:var(--ink)!important} #quote-form #checkout-page .checkout-main .contact-side .grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important} #quote-form #checkout-page .checkout-main .contact-side .grid>div{min-width:0!important} #quote-form #checkout-page .checkout-main .contact-side label:not(.consent){display:block!important;margin:0 0 7px!important;font:600 12px var(--label)!important;color:var(--ink)!important} #quote-form #checkout-page .checkout-main .contact-side input:not([type=checkbox]){width:100%!important;box-sizing:border-box!important;padding:12px!important;border:1px solid var(--line)!important;border-radius:12px!important;background:var(--veil)!important;color:var(--ink)!important;font:400 14px var(--sans)!important} #quote-form #checkout-page .checkout-main .contact-side .consent{display:flex!important;align-items:flex-start!important;gap:9px!important;margin-top:18px!important} @media(max-width:560px){#quote-form #checkout-page .checkout-main .contact-side .grid{grid-template-columns:minmax(0,1fr)!important}} /* Contact en colonne droite sur la page catalogue, puis dans la finalisation */ #quote-form:not(.checkout-active) .estimate .contact-side{display:block!important;margin:24px 0 0!important;padding:22px 0 0!important;border-top:1px solid var(--line)!important} #quote-form:not(.checkout-active) .estimate .contact-side .contact-side-heading{margin:0 0 14px!important} #quote-form:not(.checkout-active) .estimate .contact-side .grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important} #quote-form:not(.checkout-active) .estimate .contact-side .address-full{grid-column:auto!important} #quote-form:not(.checkout-active) .estimate .contact-side input:not([type=checkbox]){width:100%!important;box-sizing:border-box!important} #quote-form:not(.checkout-active) .estimate .contact-side .consent{display:flex!important;align-items:flex-start!important;gap:8px!important;margin-top:14px!important} @media(max-width:760px){#quote-form:not(.checkout-active) .estimate .contact-side .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}} /* Options de disposition pilotées par l'éditeur admin */ body[data-service-layout="list"] #services{display:flex!important;flex-direction:column!important;grid-template-columns:1fr!important;gap:12px!important} body[data-service-layout="list"] #quote-form .service{width:100%!important;max-width:none!important} body[data-intro-alignment="center"] .intro{ text-align:center!important; justify-items:center!important} body[data-intro-alignment="center"] .intro p{margin-left:auto!important;margin-right:auto!important} body[data-intro-alignment="center"] .intro .trust{margin-left:auto!important;margin-right:auto!important} body[data-intro-alignment="center"] .intro h1{margin-left:auto!important;margin-right:auto!important} \n.service-image-preview{margin-top:10px;display:flex;align-items:center;min-height:0}.service-image-preview:empty{display:none}.service-image-preview img{display:block;max-width:220px;max-height:130px;object-fit:contain;border:1px solid var(--line,#ddd);border-radius:10px;padding:4px;background:var(--paper,#fff)}.text-field input[type="file"]{max-width:100%;padding:8px}\n body.now-direct-edit [data-now-edit-key]:hover{outline:2px dashed var(--dark,#1769aa);outline-offset:4px;border-radius:3px}body.now-direct-edit [data-now-edit-key]{cursor:text!important}body.now-direct-edit [data-now-edit-key].now-inline-editing{outline:2px solid var(--dark,#1769aa);outline-offset:4px;background:#fff!important;color:#171717!important;min-width:2em;user-select:text} /* NOW hero : plein écran adaptatif et fondu progressif au défilement */ .vhero.photo{ min-height:100vh; min-height:100svh; height:100vh; height:100svh; background-size:cover; background-position:center center; background-repeat:no-repeat; transition:opacity .08s linear; will-change:opacity; } @media(max-width:650px){ .vhero.photo{min-height:100vh;min-height:100svh;height:100vh;height:100svh;background-position:center center} } @media(prefers-reduced-motion:reduce){.vhero.photo{transition:none}} /* NOW — formulaire de demande inspiré du prototype : typographie plus lisible et champs mieux alignés. */ @media (min-width: 761px) { #quote-form:not(.checkout-active) .estimate .contact-side .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px 18px !important; align-items: start; } #quote-form:not(.checkout-active) .estimate .contact-side .grid > div { min-width: 0; } #quote-form:not(.checkout-active) .estimate .contact-side .address-full, #quote-form:not(.checkout-active) .estimate .contact-side .company-full, #quote-form:not(.checkout-active) .estimate .contact-side .consent, #quote-form:not(.checkout-active) .estimate .contact-side .submit-row { grid-column: 1 / -1; } } #quote-form .contact-side .contact-side-heading h3 { font-size: clamp(25px, 2.2vw, 32px) !important; line-height: 1.15 !important; } #quote-form .contact-side .contact-side-heading small { font-size: 11px !important; letter-spacing: .2em; } #quote-form .contact-side label:not(.consent) { font-size: 11px !important; line-height: 1.4; letter-spacing: .08em; } #quote-form .contact-side input:not([type="checkbox"]), #quote-form .contact-side select, #quote-form .contact-side textarea { min-height: 46px; padding: 12px 14px !important; font-size: 14px !important; line-height: 1.4; } @media (max-width: 560px) { #quote-form:not(.checkout-active) .estimate .contact-side .grid { grid-template-columns: minmax(0, 1fr) !important; } } /* Le récapitulatif textuel de sélection fait doublon avec les pastilles de prestations. */ #quote-form #estimate-copy, #quote-form #selected-services { display: none !important; } /* Formulaire NOW : adresse e-mail et adresse postale sur une ligne complète. */ #quote-form .contact-side .grid > div:has(> label[for="email"]), #quote-form .contact-side .grid > div.address-full { grid-column: 1 / -1 !important; width: 100%; } /* Ordre du formulaire « Votre contact » : ligne 1 : nom et téléphone ; ligne 2 : adresse ; ligne 3 : e-mail ; ligne 4 : entreprise et site web. */ #quote-form .contact-side .grid > div:has(> label[for="name"]), #quote-form .contact-side .grid > div:has(> label[for="phone"]) { grid-column: auto !important; } #quote-form .contact-side .grid > div:has(> label[for="street"]), #quote-form .contact-side .grid > div:has(> label[for="email"]) { grid-column: 1 / -1 !important; } #quote-form .contact-side .grid > div:has(> label[for="company"]), #quote-form .contact-side .grid > div:has(> label[for="websiteContact"]) { grid-column: auto !important; } /* Correctif prioritaire : l’ordre des champs suit exactement la demande. 1 Nom + téléphone, 2 adresse, 3 e-mail, 4 entreprise + site web. */ #quote-form .contact-side .grid > div:has(> label[for="name"]) { order: 1 !important; grid-column: span 1 !important; } #quote-form .contact-side .grid > div:has(> label[for="phone"]) { order: 2 !important; grid-column: span 1 !important; } #quote-form .contact-side .grid > div:has(> label[for="street"]) { order: 3 !important; grid-column: 1 / -1 !important; } #quote-form .contact-side .grid > div:has(> label[for="email"]) { order: 4 !important; grid-column: 1 / -1 !important; } #quote-form .contact-side .grid > div:has(> label[for="company"]) { order: 5 !important; grid-column: span 1 !important; } #quote-form .contact-side .grid > div:has(> label[for="websiteContact"]) { order: 6 !important; grid-column: span 1 !important; } /* Force l'adresse complète à occuper toute la largeur de la grille contact. */ #quote-form .contact-side .grid > div.address-full, #quote-form .contact-side .grid > div:has(> label[for="street"]) { grid-column: 1 / -1 !important; width: 100% !important; min-width: 0 !important; justify-self: stretch !important; } #quote-form .contact-side .grid > div.address-full input, #quote-form .contact-side .grid > div:has(> label[for="street"]) input { display: block !important; width: 100% !important; max-width: none !important; } /* Correctif ciblé sur le formulaire affiché dans le récapitulatif à droite. */ #quote-form:not(.checkout-active) .estimate .contact-side .grid > div.address-full, #quote-form:not(.checkout-active) .estimate .contact-side .grid > div:has(> label[for="street"]) { grid-column: 1 / -1 !important; width: 100% !important; justify-self: stretch !important; } #quote-form:not(.checkout-active) .estimate .contact-side .grid > div.address-full > input, #quote-form:not(.checkout-active) .estimate .contact-side .grid > div:has(> label[for="street"]) > input { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Cartes du catalogue NOW : typographie plus proche du modèle de référence. */ #quote-form .catalog-tab-panel .product-card .product-info b { font-size: 21px !important; line-height: 1.22 !important; font-weight: 400 !important; } #quote-form .catalog-tab-panel .product-card .product-info .product-price, #quote-form .catalog-tab-panel .product-card .product-info small.product-price { font-size: 15px !important; line-height: 1.4 !important; margin-top: 9px !important; } @media (max-width: 760px) { #quote-form .catalog-tab-panel .product-card .product-info b { font-size: 19px !important; } #quote-form .catalog-tab-panel .product-card .product-info .product-price, #quote-form .catalog-tab-panel .product-card .product-info small.product-price { font-size: 14px !important; } } /* Ajustement renforcé : noms et prix des prestations nettement plus grands. */ #quote-form .catalog-tab-panel .product-card .product-info > b, #quote-form .catalog-tab-panel .product-card .product-info > strong, #quote-form .catalog-tab-panel .product-card .product-info .product-name, #quote-form .catalog-tab-panel .product-card .product-info h3 { display: block !important; font-size: 26px !important; line-height: 1.2 !important; font-weight: 400 !important; margin: 0 0 12px !important; } #quote-form .catalog-tab-panel .product-card .product-info .product-price, #quote-form .catalog-tab-panel .product-card .product-info small.product-price, #quote-form .catalog-tab-panel .product-card .product-info [class*="price"] { font-size: 19px !important; line-height: 1.4 !important; } #quote-form .catalog-tab-panel .product-card .product-info { padding-top: 15px !important; padding-left: 16px !important; padding-right: 16px !important; } @media (max-width: 760px) { #quote-form .catalog-tab-panel .product-card .product-info > b, #quote-form .catalog-tab-panel .product-card .product-info > strong, #quote-form .catalog-tab-panel .product-card .product-info .product-name, #quote-form .catalog-tab-panel .product-card .product-info h3 { font-size: 22px !important; } #quote-form .catalog-tab-panel .product-card .product-info .product-price, #quote-form .catalog-tab-panel .product-card .product-info small.product-price, #quote-form .catalog-tab-panel .product-card .product-info [class*="price"] { font-size: 17px !important; } } /* Description courte issue de la fiche produit Odoo, sous le nom. */ #quote-form .catalog-tab-panel .product-card .product-notes { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; color: #756D64 !important; font-family: var(--site-font), sans-serif; font-size: 14px !important; line-height: 1.4 !important; font-weight: 400; overflow-wrap: anywhere; } @media(max-width:760px) { #quote-form .catalog-tab-panel .product-card .product-notes { font-size: 13px !important; -webkit-line-clamp: 3; } } /* Bannière défilante administrable avec textes et logos. */ #now-marquee{width:100%;overflow:hidden;background:var(--dark,#292c31);color:var(--accentText,#fff);padding:10px 0;position:relative} #now-marquee .now-marquee-track{display:flex;width:max-content;animation:now-marquee-scroll 34s linear infinite} #now-marquee[data-speed="slow"] .now-marquee-track{animation-duration:52s} #now-marquee[data-speed="fast"] .now-marquee-track{animation-duration:20s} #now-marquee .now-marquee-group{display:flex;align-items:center;flex-shrink:0;gap:42px;padding-right:42px} #now-marquee .now-marquee-item{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;font:500 14px/1.3 var(--site-font, sans-serif);letter-spacing:.04em} #now-marquee .now-marquee-item img{width:auto;max-width:120px;object-fit:contain} @keyframes now-marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){#now-marquee .now-marquee-track{animation:none}} /* Mode nuit : contraste renforcé, proche du prototype fourni */ :root:not([data-mode="jour"]){ --mute:rgba(244,234,221,.76); --line:rgba(220,195,165,.20); } :root:not([data-mode="jour"]) #quote-form .lead, :root:not([data-mode="jour"]) #quote-form .sub, :root:not([data-mode="jour"]) #quote-form .note, :root:not([data-mode="jour"]) #quote-form .catalog-status, :root:not([data-mode="jour"]) #quote-form .service small, :root:not([data-mode="jour"]) #quote-form .music-heading .sub, :root:not([data-mode="jour"]) #quote-form .music-group p, :root:not([data-mode="jour"]) #quote-form .step-hint, :root:not([data-mode="jour"]) #quote-form .estimate>p, :root:not([data-mode="jour"]) #quote-form .product-info small, :root:not([data-mode="jour"]) #quote-form .product-description{ color:rgba(244,234,221,.76)!important; } :root:not([data-mode="jour"]) #quote-form .product-info b, :root:not([data-mode="jour"]) #quote-form .product-price, :root:not([data-mode="jour"]) #quote-form .estimate-total, :root:not([data-mode="jour"]) #quote-form .estimate li, :root:not([data-mode="jour"]) #quote-form .estimate label, :root:not([data-mode="jour"]) #quote-form .heading h2, :root:not([data-mode="jour"]) #quote-form .estimate h2{ color:#F4EADD!important; } :root:not([data-mode="jour"]) #quote-form .category-tab, :root:not([data-mode="jour"]) #quote-form .category-button{ color:rgba(244,234,221,.82); border-color:rgba(220,195,165,.22); } :root:not([data-mode="jour"]) #quote-form input::placeholder, :root:not([data-mode="jour"]) #quote-form textarea::placeholder{ color:rgba(244,234,221,.58)!important; } /* Évite d’afficher l’image de démonstration avant le chargement de l’image choisie dans l’éditeur. */ .vhero.photo{background-image:none} /* Aligner systématiquement le prix et l’action au bas de chaque carte catalogue */ #quote-form .catalog-tab-panel .product-card .product-info{ display:flex!important; flex-direction:column!important; align-items:stretch!important; min-height:0!important; padding:10px 12px 12px!important; box-sizing:border-box!important; flex:1 1 auto!important; } #quote-form .catalog-tab-panel .product-card .product-info .product-price, #quote-form .catalog-tab-panel .product-card .product-info small.product-price{ margin-top:auto!important; padding-top:10px!important; padding-right:0!important; padding-bottom:40px!important; min-height:20px!important; box-sizing:border-box!important; } #quote-form .catalog-tab-panel .product-card .product-info .symbol, #quote-form .catalog-tab-panel .product-card .product-info .product-quantity{ bottom:10px!important; } /* Prix et bouton d'action alignés sur une même ligne, en bas de chaque carte */ #quote-form .catalog-tab-panel .product-card .product-info{ position:relative!important; padding-bottom:52px!important; } #quote-form .catalog-tab-panel .product-card .product-info .product-price, #quote-form .catalog-tab-panel .product-card .product-info small.product-price{ position:absolute!important; left:12px!important; right:118px!important; bottom:19px!important; width:auto!important; margin:0!important; padding:0!important; min-height:0!important; line-height:1.25!important; white-space:normal!important; } #quote-form .catalog-tab-panel .product-card .product-info .symbol, #quote-form .catalog-tab-panel .product-card .product-info .product-quantity{ bottom:10px!important; } @media(max-width:560px){ #quote-form .catalog-tab-panel .product-card .product-info .product-price, #quote-form .catalog-tab-panel .product-card .product-info small.product-price{ right:108px!important; } } /* NOW — aligner le prix avec l’action Ajouter / quantité, quelle que soit la longueur du titre. */ #quote-form .product-card .product-info{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important;padding:10px 12px 12px!important;position:relative!important;box-sizing:border-box!important;gap:7px!important} #quote-form .product-card .product-card-actions{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;width:100%!important;min-width:0!important;margin-top:auto!important;padding-top:10px!important} #quote-form .product-card .product-card-actions .product-price{position:static!important;display:block!important;flex:1 1 auto!important;width:auto!important;min-width:0!important;right:auto!important;left:auto!important;bottom:auto!important;margin:0!important;padding:0!important;white-space:normal!important;line-height:1.25!important;overflow-wrap:anywhere!important} #quote-form .product-card .product-card-actions .symbol{position:static!important;display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:100%!important;height:auto!important;min-height:36px!important;bottom:auto!important;right:auto!important;left:auto!important;top:auto!important;padding:10px 15px!important;white-space:nowrap!important} #quote-form .product-card .product-card-actions .product-quantity{position:static!important;flex:0 0 auto!important;right:auto!important;left:auto!important;top:auto!important;bottom:auto!important;width:max-content!important;max-width:100%!important;min-width:0!important;height:auto!important;margin:0!important;white-space:nowrap!important} #quote-form .product-card.is-selected .product-card-actions .symbol{display:none!important} #quote-form .product-card.is-selected .product-info{padding-bottom:12px!important} @media(max-width:480px){#quote-form .product-card .product-card-actions{gap:6px!important}#quote-form .product-card .product-card-actions .product-price{font-size:14px!important}#quote-form .product-card .product-card-actions .symbol{padding:9px 12px!important}} /* NOW — mode jour par défaut : palette claire et cohérente sur tout le contenu éditorial et le formulaire. */ :root[data-mode="jour"]{ --bg:#F3EEE7; --bg2:#FFFCF7; --sable:#8C6A45; --sable-hi:#725333; --ink:#1C1A17; --mute:#5D574F; --line:#D8CFC3; --veil:rgba(28,26,23,.035); --soft:rgba(140,106,69,.10); --on-sable:#FFFFFF; --now-bg:#F3EEE7; --now-panel:#FFFCF7; --now-ink:#1C1A17; --now-muted:#5D574F; --now-line:#D8CFC3; --now-sand:#8C6A45; color-scheme:light; } :root[data-mode="jour"] body, :root[data-mode="jour"] .cream{background:var(--bg)!important;color:var(--ink)!important} :root[data-mode="jour"] .site-header{ background:rgba(243,238,231,.96)!important; border-color:var(--line)!important; } :root[data-mode="jour"] .site-header p, :root[data-mode="jour"] .site-header .brand, :root[data-mode="jour"] .site-header .brand b{color:var(--ink)!important} :root[data-mode="jour"] .client-login-button{color:var(--ink)!important;border-color:var(--line)!important;background:rgba(255,255,255,.6)!important} :root[data-mode="jour"] .landing-service, :root[data-mode="jour"] .landing-statement, :root[data-mode="jour"] #quote-form .panel, :root[data-mode="jour"] #quote-form .estimate, :root[data-mode="jour"] #quote-form .music-panel, :root[data-mode="jour"] #quote-form .music-group, :root[data-mode="jour"] #quote-form .request-review, :root[data-mode="jour"] #quote-form .confirmation-box{ background:var(--now-panel)!important;border-color:var(--now-line)!important;color:var(--now-ink)!important; } :root[data-mode="jour"] .landing-heading-row h2, :root[data-mode="jour"] .landing-statement-copy h2, :root[data-mode="jour"] .landing-form-intro h2, :root[data-mode="jour"] .landing-service-copy h3, :root[data-mode="jour"] .landing-statement-copy li, :root[data-mode="jour"] #quote-form .heading h2, :root[data-mode="jour"] #quote-form .estimate h2, :root[data-mode="jour"] #quote-form label, :root[data-mode="jour"] #quote-form .product-info b, :root[data-mode="jour"] #quote-form .product-price, :root[data-mode="jour"] #quote-form .estimate-total, :root[data-mode="jour"] #quote-form .estimate li, :root[data-mode="jour"] #quote-form .estimate label, :root[data-mode="jour"] #quote-form .music-option, :root[data-mode="jour"] #quote-form .service, :root[data-mode="jour"] #quote-form .category-toggle, :root[data-mode="jour"] #quote-form .category-button{ color:var(--now-ink)!important; } :root[data-mode="jour"] .lead, :root[data-mode="jour"] .landing-heading-row>p, :root[data-mode="jour"] .landing-statement-copy>p, :root[data-mode="jour"] .landing-form-intro>p, :root[data-mode="jour"] .landing-service-copy p, :root[data-mode="jour"] #quote-form .sub, :root[data-mode="jour"] #quote-form .note, :root[data-mode="jour"] #quote-form .catalog-status, :root[data-mode="jour"] #quote-form .product-notes, :root[data-mode="jour"] #quote-form .product-info small, :root[data-mode="jour"] #quote-form .service small, :root[data-mode="jour"] #quote-form .step-hint, :root[data-mode="jour"] #quote-form .estimate>p, :root[data-mode="jour"] #quote-form .request-review dt{ color:var(--now-muted)!important; } :root[data-mode="jour"] #quote-form input:not([type=checkbox]):not([type=radio]), :root[data-mode="jour"] #quote-form select, :root[data-mode="jour"] #quote-form textarea{ background:#FFFFFF!important;color:#1C1A17!important;border-color:#CFC4B6!important; } :root[data-mode="jour"] #quote-form input::placeholder, :root[data-mode="jour"] #quote-form textarea::placeholder{color:#777067!important;opacity:1} :root[data-mode="jour"] #quote-form .service, :root[data-mode="jour"] #quote-form .product-card, :root[data-mode="jour"] #quote-form .music-option, :root[data-mode="jour"] #quote-form .category-toggle, :root[data-mode="jour"] #quote-form .category-button{ background:#FFFCF7!important;border-color:#D8CFC3!important; } :root[data-mode="jour"] #quote-form .service:has(input:checked), :root[data-mode="jour"] #quote-form .music-option:has(input:checked), :root[data-mode="jour"] #quote-form .product-card.is-selected{ background:#EFE4D6!important;border-color:#8C6A45!important; } :root[data-mode="jour"] #quote-form .symbol, :root[data-mode="jour"] #quote-form .category-count{ background:#E9DED0!important;color:#684B2E!important; } :root[data-mode="jour"] #quote-form .chips span{ background:#F6F0E8!important;color:#3B332A!important;border-color:#D8CFC3!important; } :root[data-mode="jour"] #quote-form .step-back{ background:transparent!important;color:#1C1A17!important;border-color:#BEB2A3!important; } :root[data-mode="jour"] footer{ background:#E7DED2!important;color:#40382F!important;border-color:#D8CFC3!important; } :root[data-mode="jour"] footer .brand, :root[data-mode="jour"] footer a{color:#684B2E!important} :root[data-mode="jour"] #quote-form .step-next, :root[data-mode="jour"] #quote-form button[type=submit], :root[data-mode="jour"] #quote-form .confirmation-ok, :root[data-mode="jour"] #quote-form .estimate button{ background:#8C6A45!important;color:#FFFFFF!important;border-color:#8C6A45!important; } :root[data-mode="jour"] #quote-form .error{color:#A12626!important} /* Mode nuit — corriger les éléments dont les styles historiques imposaient un texte trop sombre. */ :root:not([data-mode="jour"]) #quote-form .product-notes, :root:not([data-mode="jour"]) #quote-form .product-description, :root:not([data-mode="jour"]) #quote-form .product-info small, :root:not([data-mode="jour"]) #quote-form .catalog-status, :root:not([data-mode="jour"]) #quote-form .category-toggle, :root:not([data-mode="jour"]) #quote-form .category-button, :root:not([data-mode="jour"]) #quote-form .category-description, :root:not([data-mode="jour"]) #quote-form .chips span, :root:not([data-mode="jour"]) #quote-form .request-review, :root:not([data-mode="jour"]) #quote-form .request-review dt, :root:not([data-mode="jour"]) #quote-form .request-review dd, :root:not([data-mode="jour"]) #quote-form .estimate li, :root:not([data-mode="jour"]) #quote-form .estimate p, :root:not([data-mode="jour"]) #quote-form .step-hint, :root:not([data-mode="jour"]) #quote-form .service small, :root:not([data-mode="jour"]) #quote-form .music-group p{ color:#E1D7CA!important; } :root:not([data-mode="jour"]) #quote-form .product-info b, :root:not([data-mode="jour"]) #quote-form .product-price, :root:not([data-mode="jour"]) #quote-form .estimate-total, :root:not([data-mode="jour"]) #quote-form .heading h2, :root:not([data-mode="jour"]) #quote-form .estimate h2, :root:not([data-mode="jour"]) #quote-form label, :root:not([data-mode="jour"]) #quote-form .music-option, :root:not([data-mode="jour"]) #quote-form .category-toggle, :root:not([data-mode="jour"]) #quote-form .category-button{ color:#F7F0E7!important; } :root:not([data-mode="jour"]) #quote-form .category-toggle, :root:not([data-mode="jour"]) #quote-form .category-button, :root:not([data-mode="jour"]) #quote-form .chips span{ background:#202023!important;border-color:#51483D!important; } :root:not([data-mode="jour"]) #quote-form .product-notes{color:#D8CCBC!important} :root:not([data-mode="jour"]) #quote-form input::placeholder, :root:not([data-mode="jour"]) #quote-form textarea::placeholder{color:#BFB3A5!important;opacity:1} /* NOW — contraste des titres éditoriaux en mode nuit */ :root:not([data-mode="jour"]) .landing-heading-row h2, :root:not([data-mode="jour"]) .landing-statement-copy h2, :root:not([data-mode="jour"]) .landing-form-intro h2, :root:not([data-mode="jour"]) .landing-service-copy h3, :root:not([data-mode="jour"]) .landing-service h3, :root:not([data-mode="jour"]) .landing-heading-row h2 *, :root:not([data-mode="jour"]) .landing-statement-copy h2 *, :root:not([data-mode="jour"]) .landing-form-intro h2 *, :root:not([data-mode="jour"]) .landing-service-copy h3 * { color: #F4EADD !important; -webkit-text-fill-color: #F4EADD !important; opacity: 1 !important; } :root:not([data-mode="jour"]) .landing-heading-row h2 em, :root:not([data-mode="jour"]) .landing-statement-copy h2 em, :root:not([data-mode="jour"]) .landing-form-intro h2 em, :root:not([data-mode="jour"]) .landing-service-copy h3 em, :root:not([data-mode="jour"]) .landing-service h3 em { color: #DCC3A5 !important; -webkit-text-fill-color: #DCC3A5 !important; } :root:not([data-mode="jour"]) .landing-service, :root:not([data-mode="jour"]) .landing-statement { color: #F4EADD; } /* NOW — lisibilité des cartes produits et du récapitulatif en mode nuit */ :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-info, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-info * { color: #F4EADD !important; } :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-info .product-notes, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-info .product-description, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-info small { color: #6A6258 !important; } :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-info .product-price, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-info .product-card-actions .product-price { color: #6A6258 !important; } :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-card-actions .symbol, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-card-actions button, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-card-actions .product-quantity { color: #FFFFFF !important; } :root:not([data-mode="jour"]) #quote-form .estimate, :root:not([data-mode="jour"]) #quote-form .estimate *, :root:not([data-mode="jour"]) #quote-form .request-review, :root:not([data-mode="jour"]) #quote-form .request-review * { color: #F4EADD !important; } :root:not([data-mode="jour"]) #quote-form .estimate .heading h2, :root:not([data-mode="jour"]) #quote-form .estimate h2, :root:not([data-mode="jour"]) #quote-form .request-review h3 { color: #F4EADD !important; } :root:not([data-mode="jour"]) #quote-form .estimate .sub, :root:not([data-mode="jour"]) #quote-form .estimate > p, :root:not([data-mode="jour"]) #quote-form .request-review dt { color: #D8CCBC !important; } /* CORRECTIF FINAL — cartes beige : tous les textes foncés ; panneau sombre : titres clairs. */ :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-info, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-info *, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-info *::before, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-info *::after { color: #51483F !important; -webkit-text-fill-color: #51483F !important; } :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-info .product-price, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-info .product-card-actions .product-price { color: #51483F !important; -webkit-text-fill-color: #51483F !important; } :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-card-actions .symbol, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-card-actions button, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-card-actions button *, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-card-actions .product-quantity { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } :root:not([data-mode="jour"]) #quote-form .estimate h2, :root:not([data-mode="jour"]) #quote-form .estimate h3, :root:not([data-mode="jour"]) #quote-form .estimate .request-review h3, :root:not([data-mode="jour"]) #quote-form .estimate .request-review h2, :root:not([data-mode="jour"]) #quote-form .estimate .estimate-heading, :root:not([data-mode="jour"]) #quote-form .estimate .summary-title, :root:not([data-mode="jour"]) #quote-form .request-review h2, :root:not([data-mode="jour"]) #quote-form .request-review h3 { color: #F4EADD !important; -webkit-text-fill-color: #F4EADD !important; } :root:not([data-mode="jour"]) #quote-form .estimate .request-review *, :root:not([data-mode="jour"]) #quote-form .request-review * { color: #F4EADD !important; -webkit-text-fill-color: #F4EADD !important; } :root:not([data-mode="jour"]) #quote-form .estimate .request-review dt, :root:not([data-mode="jour"]) #quote-form .request-review dt, :root:not([data-mode="jour"]) #quote-form .estimate .request-review p, :root:not([data-mode="jour"]) #quote-form .request-review p { color: #D8CCBC !important; -webkit-text-fill-color: #D8CCBC !important; } /* NOW — titres éditoriaux globaux : empêcher les couleurs presque noires en mode nuit. */ :root:not([data-mode="jour"]) .landing-heading-row h2, :root:not([data-mode="jour"]) .landing-heading-row h2 *, :root:not([data-mode="jour"]) .landing-statement-copy h2, :root:not([data-mode="jour"]) .landing-statement-copy h2 *, :root:not([data-mode="jour"]) .landing-form-intro h2, :root:not([data-mode="jour"]) .landing-form-intro h2 *, :root:not([data-mode="jour"]) .landing-service-copy h3, :root:not([data-mode="jour"]) .landing-service-copy h3 *, :root:not([data-mode="jour"]) .landing-heading-row h1, :root:not([data-mode="jour"]) .landing-heading-row h1 *, :root:not([data-mode="jour"]) .landing-section h2, :root:not([data-mode="jour"]) .landing-section h2 *, :root:not([data-mode="jour"]) .landing-section h3, :root:not([data-mode="jour"]) .landing-section h3 *, :root:not([data-mode="jour"]) .landing-content h1, :root:not([data-mode="jour"]) .landing-content h2, :root:not([data-mode="jour"]) .landing-content h3, :root:not([data-mode="jour"]) .landing-content h1 *, :root:not([data-mode="jour"]) .landing-content h2 *, :root:not([data-mode="jour"]) .landing-content h3 *, :root:not([data-mode="jour"]) .bleed h1:not(.hero-title), :root:not([data-mode="jour"]) .bleed h2, :root:not([data-mode="jour"]) .bleed h3 { color: #F4EADD !important; -webkit-text-fill-color: #F4EADD !important; opacity: 1 !important; } :root:not([data-mode="jour"]) .landing-heading-row h2 em, :root:not([data-mode="jour"]) .landing-heading-row h2 i, :root:not([data-mode="jour"]) .landing-statement-copy h2 em, :root:not([data-mode="jour"]) .landing-statement-copy h2 i, :root:not([data-mode="jour"]) .landing-form-intro h2 em, :root:not([data-mode="jour"]) .landing-service-copy h3 em, :root:not([data-mode="jour"]) .landing-section h2 em, :root:not([data-mode="jour"]) .landing-section h3 em, :root:not([data-mode="jour"]) .landing-content h1 em, :root:not([data-mode="jour"]) .landing-content h2 em, :root:not([data-mode="jour"]) .landing-content h3 em, :root:not([data-mode="jour"]) .bleed h1 em, :root:not([data-mode="jour"]) .bleed h2 em, :root:not([data-mode="jour"]) .bleed h3 em { color: #DCC3A5 !important; -webkit-text-fill-color: #DCC3A5 !important; } /* Alignement sur la maquette NOW : titre éditorial .big en ivoire en mode nuit. */ :root:not([data-mode="jour"]) .big, :root:not([data-mode="jour"]) p.big, :root:not([data-mode="jour"]) .form-lead .big { color: #F4EADD !important; -webkit-text-fill-color: #F4EADD !important; opacity: 1 !important; } :root:not([data-mode="jour"]) .big em, :root:not([data-mode="jour"]) p.big em, :root:not([data-mode="jour"]) .form-lead .big em { color: #DCC3A5 !important; -webkit-text-fill-color: #DCC3A5 !important; } :root:not([data-mode="jour"]) .vsec .big, :root:not([data-mode="jour"]) .cream .big { color: #F4EADD !important; -webkit-text-fill-color: #F4EADD !important; } /* NOW night mode: service-card headings must contrast with their dark card body. Keep the image overlay labels and warm champagne accents unchanged. */ :root:not([data-mode="jour"]) .service-card h3, :root:not([data-mode="jour"]) .service-card h3 *, :root:not([data-mode="jour"]) .service-card .service-title, :root:not([data-mode="jour"]) .service-card .service-title *, :root:not([data-mode="jour"]) .service-grid h3, :root:not([data-mode="jour"]) .service-grid h3 *, :root:not([data-mode="jour"]) .service-tile h3, :root:not([data-mode="jour"]) .service-tile h3 *, :root:not([data-mode="jour"]) .service-card .big, :root:not([data-mode="jour"]) .service-card .big * { color: #F4EADD !important; -webkit-text-fill-color: #F4EADD !important; opacity: 1 !important; } /* Maquette catalogue NOW — cartes sombres premium en mode nuit */ :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card { background: #141313 !important; border: 1px solid #302C29 !important; border-radius: 28px !important; color: #F4EADD !important; box-shadow: none !important; overflow: hidden !important; } :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card::before { background: radial-gradient(ellipse at 50% 55%, rgba(184,145,103,.16) 0%, rgba(184,145,103,.045) 38%, transparent 72%), linear-gradient(135deg, #242120 0%, #171616 60%, #121111 100%) !important; border-bottom: 1px solid #302C29 !important; } :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .symbol { background: #E2C6A2 !important; color: #171412 !important; border: 0 !important; box-shadow: none !important; } :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-info, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-info * { color: #F0E5D8 !important; -webkit-text-fill-color: #F0E5D8 !important; } :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-info b, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-info .product-name, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-info h3 { color: #F4EADD !important; -webkit-text-fill-color: #F4EADD !important; font-weight: 400 !important; } :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-notes, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-description, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-info small:not(.product-price) { color: #9D958D !important; -webkit-text-fill-color: #9D958D !important; } :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-card-actions .product-price, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-info .product-price { color: #F0E5D8 !important; -webkit-text-fill-color: #F0E5D8 !important; } :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-card-actions .symbol, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-quantity { background: #E2C6A2 !important; color: #171412 !important; border-color: #E2C6A2 !important; } :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-quantity button { background: #171412 !important; color: #F4EADD !important; } :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card.is-selected { border-color: #DCC3A5 !important; box-shadow: inset 0 0 0 1px #DCC3A5 !important; } /* Finitions catalogue mode nuit — prix, boutons et carte personnalisée */ :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-card-actions .symbol { background: #E2C6A2 !important; color: #171412 !important; -webkit-text-fill-color: #171412 !important; } :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-card-actions .symbol *, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-card-actions .symbol::before, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-card-actions .symbol::after { color: #171412 !important; -webkit-text-fill-color: #171412 !important; } :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-card-actions .product-price, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-info .product-price { color: #F0E5D8 !important; -webkit-text-fill-color: #F0E5D8 !important; opacity: 1 !important; } /* La pastille/icône de la zone visuelle ne doit pas devenir un grand bouton beige. */ :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card > .symbol, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-visual .symbol, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-media .symbol { background: transparent !important; color: #E2C6A2 !important; -webkit-text-fill-color: #E2C6A2 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; width: auto !important; height: auto !important; min-height: 0 !important; padding: 0 !important; } /* Boutons Ajouter du catalogue : même finition que la maquette NOW */ :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-card-actions .symbol, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-info .product-card-actions .symbol { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 82px !important; min-height: 38px !important; padding: 0 18px !important; border: 1px solid #E2C6A2 !important; border-radius: 999px !important; background: #E2C6A2 !important; color: #171412 !important; -webkit-text-fill-color: #171412 !important; font-family: inherit !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1 !important; text-align: center !important; text-decoration: none !important; box-shadow: none !important; opacity: 1 !important; white-space: nowrap !important; } :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-card-actions .symbol *, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-info .product-card-actions .symbol * { color: #171412 !important; -webkit-text-fill-color: #171412 !important; } :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-card-actions .symbol:hover { background: #EBD3B5 !important; border-color: #EBD3B5 !important; color: #171412 !important; -webkit-text-fill-color: #171412 !important; } /* Priorité maximale : libellé Ajouter foncé sur bouton champagne */ :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-card-actions .symbol, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-card-actions .symbol *, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-card-actions button, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-card-actions button *, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-info .product-card-actions .symbol, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-info .product-card-actions .symbol * { color: #171412 !important; -webkit-text-fill-color: #171412 !important; text-shadow: none !important; opacity: 1 !important; } /* Correctif définitif libellé du bouton Ajouter : le vrai bouton est parfois un élément imbriqué */ :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-card-actions, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-actions, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-footer { color: #171412 !important; } :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-card-actions :is(button, a, [role="button"], .symbol), :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-actions :is(button, a, [role="button"], .symbol), :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-footer :is(button, a, [role="button"], .symbol) { background-color: #E2C6A2 !important; border-color: #E2C6A2 !important; color: #171412 !important; -webkit-text-fill-color: #171412 !important; text-shadow: none !important; opacity: 1 !important; } :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-card-actions :is(button, a, [role="button"], .symbol) *, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-actions :is(button, a, [role="button"], .symbol) *, :root:not([data-mode="jour"]) #quote-form .catalog-tab-panel .product-card .product-footer :is(button, a, [role="button"], .symbol) * { color: #171412 !important; -webkit-text-fill-color: #171412 !important; text-shadow: none !important; opacity: 1 !important; }