/* ============================================================ SAPINÉO — tokens ============================================================ */ :root{ --sap-sapin:#1a2e22; --sap-sapin-deep:#131f18; --sap-moyen:#2f4a37; --sap-vert-clair:#4e7359; --sap-vert-soft:#6b8f76; --sap-or-chaud:#c89a4a; --sap-or-clair:#e8b85e; --sap-or-pale:#f4d590; --sap-creme:#f4efe2; --sap-blanc:#ffffff; --sap-surface:rgba(255,255,255,0.05); --sap-border-glass:rgba(255,255,255,0.22); --sap-border-soft:rgba(255,255,255,0.12); --sap-divider:rgba(255,255,255,0.08); --fg-1:#ffffff; --fg-2:rgba(255,255,255,0.74); --fg-3:rgba(255,255,255,0.52); --fg-4:rgba(255,255,255,0.32); --accent:var(--sap-or-clair); --page-grad:radial-gradient(140% 100% at 50% 0%, #20392b 0%, #1a2e22 42%, #131f18 100%); --body-bg:#131f18; --halo-1:radial-gradient(circle, rgba(232,184,94,0.30) 0%, rgba(200,154,74,0.10) 38%, transparent 70%); --halo-2:radial-gradient(circle, rgba(78,115,89,0.55) 0%, rgba(47,74,55,0.24) 42%, transparent 75%); --halo-3:radial-gradient(circle, rgba(244,239,226,0.10) 0%, transparent 68%); --vignette:radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,0.34) 100%); --sel-bg:rgba(232,184,94,0.28); --sel-ink:#ffffff; --glass-bg:rgba(255,255,255,0.05); --glass-border:rgba(255,255,255,0.22); --glass-border-hover:rgba(255,255,255,0.32); --glass-shadow:0 24px 60px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.08); --glass-shadow-hover:0 28px 64px rgba(0,0,0,0.38),inset 0 1px 0 rgba(255,255,255,0.10); --divider:rgba(255,255,255,0.08); --pill-bg:rgba(255,255,255,0.05); --pill-border:rgba(255,255,255,0.18); --field-bg:rgba(0,0,0,0.22); --field-bg-focus:rgba(0,0,0,0.30); --field-border:rgba(255,255,255,0.16); --field-ph:rgba(255,255,255,0.28); --input-ink:#ffffff; --header-veil:rgba(19,31,24,0.72); --header-border:rgba(255,255,255,0.08); --mark-bg:#131f18; --scroll-border:rgba(255,255,255,0.30); --btn-ink:#131f18; --quote-border:rgba(232,184,94,0.40); --quote-bg:linear-gradient(180deg, rgba(232,184,94,0.08), rgba(232,184,94,0.02)); --quote-glow:0 0 50px rgba(200,154,74,0.12), inset 0 1px 0 rgba(255,255,255,0.06); --tl-track:rgba(232,184,94,0.18); --tl-num-bg:rgba(26,46,34,0.85); --tl-num-bg-lit:rgba(40,33,18,0.90); --foot-bg:#131f18; --confirm-veil:rgba(19,31,24,0.60); --fd:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif; --fm:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace; --r-md:14px; --r-lg:22px; --r-xl:28px; --r-pill:999px; --glow-gold:0 8px 24px rgba(232,184,94,0.5),0 0 40px rgba(200,154,74,0.33); --glow-gold-lg:0 0 60px var(--sap-or-clair),0 0 120px rgba(200,154,74,0.5),inset 0 0 20px rgba(255,255,255,0.6); --shadow-glass:0 24px 60px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.08); --shadow-doc:0 30px 70px rgba(0,0,0,0.45),0 10px 24px rgba(0,0,0,0.25); --ease:cubic-bezier(0.22,1,0.36,1); --gut:clamp(22px,5vw,80px); --maxw:1080px; } *{box-sizing:border-box;} /* `clip` plutôt que `hidden` : même garde contre un débordement horizontal, sans transformer en conteneur de défilement (ce qui casserait les ancres et le `position:sticky`). Le garde du corps ne suffisait pas : c'est la page entière qui s'élargissait. */ html{scroll-behavior:smooth; overflow-x:clip;} img,svg,video,canvas{max-width:100%;} body{ margin:0; background:var(--body-bg); color:var(--fg-1); font-family:var(--fd); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; transition:background .5s var(--ease), color .5s var(--ease); } a{color:inherit; text-decoration:none;} ::selection{background:var(--sel-bg); color:var(--sel-ink);} /* ── Fond fixe : dégradé sapin + halos ──────────────────────── */ .bg{position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none; background:var(--page-grad); transition:background .5s var(--ease);} .halo{position:absolute; border-radius:50%; will-change:transform; transition:background .5s var(--ease);} .halo--gold{top:-18vh; left:-12vw; width:62vw; height:62vw; min-width:520px; min-height:520px; background:var(--halo-1); filter:blur(60px);} .halo--green{bottom:-22vh; right:-14vw; width:70vw; height:70vw; min-width:560px; min-height:560px; background:var(--halo-2); filter:blur(70px);} .halo--cream{top:42%; left:48%; width:42vw; height:42vw; min-width:380px; min-height:380px; background:var(--halo-3); filter:blur(60px);} .bg::after{content:""; position:absolute; inset:0; background:var(--vignette);} /* ── En-tête (fixe, se voile au défilement) ─────────────────── */ .hdr{position:fixed; top:0; left:0; right:0; z-index:80; display:flex; align-items:center; justify-content:space-between; padding:18px var(--gut); border-bottom:0.5px solid transparent; transition:background var(--ease) .4s, backdrop-filter .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);} .hdr.veiled{ background:var(--header-veil); -webkit-backdrop-filter:blur(18px) saturate(1.2); backdrop-filter:blur(18px) saturate(1.2); border-bottom-color:var(--header-border); padding:13px var(--gut);} .brand{display:flex; align-items:center; gap:11px;} .brand .mark{width:30px; height:30px; border-radius:9px; background:var(--mark-bg); border:1px solid rgba(232,184,94,0.32); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .5s var(--ease);} .brand .orb{width:12px; height:12px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff 0%,#e8b85e 45%,#c89a4a 100%); box-shadow:0 0 12px #e8b85e;} .brand .name{font-weight:700; font-size:19px; letter-spacing:-0.01em;} .brand .name b{color:var(--accent); font-weight:800;} .hdr .cta-mini{font-family:var(--fm); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--btn-ink); font-weight:600; border:none; border-radius:var(--r-pill); background:linear-gradient(180deg,#e8b85e 0%,#c89a4a 100%); padding:10px 18px; white-space:nowrap; box-shadow:var(--glow-gold), inset 0 1px 0 rgba(255,255,255,0.45); display:inline-flex; align-items:center; gap:7px; transition:filter .25s var(--ease), box-shadow .3s var(--ease), transform .12s var(--ease);} .hdr .cta-mini .arr{transition:transform .3s var(--ease);} .hdr .cta-mini:hover{filter:brightness(1.04); box-shadow:0 8px 24px rgba(232,184,94,0.5),0 0 48px rgba(200,154,74,0.4), inset 0 1px 0 rgba(255,255,255,0.5);} .hdr .cta-mini:hover .arr{transform:translateX(3px);} .hdr .cta-mini:active{transform:scale(0.98);} /* ── Grille de mise en page ──────────────────────────────────── */ .section{position:relative; padding:clamp(80px,12vh,140px) var(--gut); border-top:0.5px solid var(--divider);} .wrap{max-width:var(--maxw); margin:0 auto; width:100%;} .wrap--narrow{max-width:780px;} .center{text-align:center;} .overline{font-family:var(--fm); font-size:13px; font-weight:500; letter-spacing:3px; text-transform:uppercase; color:var(--fg-3);} .overline--rules{display:inline-flex; align-items:center; gap:14px;} .overline--rules::before,.overline--rules::after{content:""; width:30px; height:1px; background:var(--fg-4);} .title{font-weight:700; line-height:1.06; letter-spacing:-0.025em; margin:0; color:var(--fg-1); text-wrap:balance;} .title .g{color:var(--accent); font-weight:800;} .t-hero{font-size:clamp(40px,7.4vw,86px);} .t-h2{font-size:clamp(31px,4.6vw,58px); line-height:1.08;} .t-h3{font-size:clamp(25px,3.2vw,40px); line-height:1.12;} .lede{font-weight:400; font-size:clamp(17px,1.9vw,22px); line-height:1.55; color:var(--fg-2); margin:0; text-wrap:pretty;} .body{font-weight:400; font-size:clamp(15.5px,1.55vw,18px); line-height:1.62; color:var(--fg-2); margin:0; text-wrap:pretty;} /* Pastilles et boutons */ .pill{display:inline-flex; align-items:center; gap:10px; padding:9px 18px; border-radius:var(--r-pill); background:var(--pill-bg); border:0.5px solid var(--pill-border); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); font-family:var(--fm); font-size:clamp(10.5px,1.4vw,12px); letter-spacing:1.8px; text-transform:uppercase; font-weight:500; color:var(--fg-2); max-width:100%; /* Sur un téléphone, « Entreprises du paysage · de l'auto-entrepreneur à la PME » ne tient pas sur une ligne. En `nowrap`, le texte élargissait la page : tout le contenu centré se décalait et le titre se coupait à gauche. Il passe donc à la ligne, centré. Les pastilles courtes des pages produit tiennent toujours sur une ligne — `normal` ne coupe que si nécessaire. */ white-space:normal; flex-wrap:wrap; justify-content:center; text-align:center; line-height:1.5;} .pill .dot{width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent);} .btn-gold{display:inline-flex; align-items:center; gap:9px; cursor:pointer; border:none; font-family:var(--fd); font-weight:700; font-size:clamp(15px,1.5vw,17px); color:var(--btn-ink); background:linear-gradient(180deg,#e8b85e 0%,#c89a4a 100%); border-radius:var(--r-pill); padding:16px 28px; box-shadow:var(--glow-gold), inset 0 1px 0 rgba(255,255,255,0.45); transition:transform .12s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease);} .btn-gold:hover{filter:brightness(1.04); box-shadow:0 10px 30px rgba(232,184,94,0.55),0 0 60px rgba(200,154,74,0.4), inset 0 1px 0 rgba(255,255,255,0.5);} .btn-gold:active{transform:scale(0.98);} .btn-gold .arr{transition:transform .3s var(--ease);} .btn-gold:hover .arr{transform:translateX(4px);} /* ── HÉRO ────────────────────────────────────────────────────── */ .hero{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:140px var(--gut) 96px; border-top:none; position:relative;} .hero .pill{margin-bottom:30px;} .hero .t-hero{max-width:14ch;} .hero .lede{margin:30px auto 0; max-width:60ch;} .hero .btn-gold{margin-top:42px;} .scroll-hint{position:absolute; bottom:34px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; font-family:var(--fm); font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--fg-3);} .scroll-hint .mouse{width:22px; height:34px; border:1.5px solid var(--scroll-border); border-radius:12px; position:relative;} .scroll-hint .mouse::after{content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%); width:3px; height:7px; border-radius:2px; background:var(--accent); animation:scrolldot 1.8s var(--ease) infinite;} @keyframes scrolldot{0%{opacity:0; transform:translate(-50%,0);}30%{opacity:1;}60%{opacity:1; transform:translate(-50%,11px);}100%{opacity:0; transform:translate(-50%,11px);}} /* ── LE PROBLÈME ─────────────────────────────────────────────── */ .prob-grid{display:flex; flex-direction:column; align-items:center; gap:30px; margin-top:38px;} .prob-grid .body{max-width:62ch; text-align:center;} .quote-box{margin:8px auto 0; max-width:640px; width:100%; border:1px solid var(--quote-border); border-radius:var(--r-lg); background:var(--quote-bg); box-shadow:var(--quote-glow); padding:clamp(24px,4vw,40px); text-align:center;} .quote-box .qover{font-family:var(--fm); font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--fg-3); margin:0 0 18px;} .quote-box .q{font-weight:700; font-size:clamp(24px,3.4vw,38px); letter-spacing:-0.02em; color:var(--fg-1); margin:0; line-height:1.15;} .quote-box .q .g{color:var(--accent); font-weight:800;} /* ── CHRONOLOGIE (Notre approche) ───────────────────────────── */ .timeline{position:relative; margin-top:54px; max-width:760px; margin-left:auto; margin-right:auto;} .timeline .rail{position:absolute; left:27px; top:18px; bottom:18px; width:2px; pointer-events:none;} .timeline .rail svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible;} .timeline .rail .rail-track{stroke:var(--tl-track);} #rail-draw{stroke:var(--accent);} .tl-step{position:relative; display:grid; grid-template-columns:56px 1fr; gap:24px; padding:18px 0;} .tl-step + .tl-step{margin-top:8px;} .tl-num{width:56px; height:56px; border-radius:50%; flex-shrink:0; border:1.5px solid rgba(232,184,94,0.45); background:var(--tl-num-bg); display:flex; align-items:center; justify-content:center; position:relative; z-index:2; font-family:var(--fm); font-weight:600; font-size:16px; letter-spacing:1px; color:var(--accent); transition:box-shadow .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease);} .tl-step.lit .tl-num{border-color:var(--accent); box-shadow:var(--glow-gold); background:var(--tl-num-bg-lit);} .tl-body{padding-top:5px;} .tl-body h3{font-weight:700; font-size:clamp(20px,2.2vw,26px); letter-spacing:-0.01em; margin:0 0 9px; color:var(--fg-1);} .tl-body p{font-weight:400; font-size:clamp(15px,1.5vw,17px); line-height:1.6; color:var(--fg-2); margin:0; max-width:54ch;} /* ── EXEMPLE CONCRET — 3 étapes ─────────────────────────────── */ .devis-intro{max-width:60ch; margin:26px auto 0; text-align:center;} .devis-stage{position:relative; margin-top:54px;} .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; position:relative;} .vcard{position:relative; border-radius:var(--r-xl); padding:30px 30px 34px; background:var(--glass-bg); border:0.5px solid var(--glass-border); -webkit-backdrop-filter:blur(24px) saturate(1.2); backdrop-filter:blur(24px) saturate(1.2); box-shadow:var(--glass-shadow); display:flex; flex-direction:column; text-align:left; transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background .5s var(--ease);} .vcard:hover{border-color:var(--glass-border-hover); box-shadow:var(--glass-shadow-hover);} .vcard .vhead{display:flex; align-items:center; gap:16px; margin-bottom:26px;} .step-disc{width:54px; height:54px; border-radius:50%; flex-shrink:0; background:radial-gradient(circle at 38% 32%, #ffe6ad 0%, #e8b85e 46%, #c89a4a 100%); box-shadow:var(--glow-gold); display:flex; align-items:center; justify-content:center;} .step-badge{width:38px; height:38px; border-radius:50%; flex-shrink:0; border:1.5px solid rgba(232,184,94,0.5); display:flex; align-items:center; justify-content:center; font-family:var(--fm); font-size:13px; font-weight:600; letter-spacing:1px; color:var(--accent);} .vcard h3{font-weight:700; font-size:clamp(20px,2.1vw,24px); letter-spacing:-0.01em; margin:0 0 12px; color:var(--fg-1);} .vcard p{font-weight:400; font-size:clamp(14.5px,1.45vw,16px); line-height:1.6; color:var(--fg-2); margin:0;} .devis-close{margin:40px auto 0; text-align:center; max-width:54ch; color:var(--fg-3); font-size:clamp(14px,1.4vw,16px); line-height:1.55;} /* ── QUI JE SUIS ─────────────────────────────────────────────── */ .bf{display:flex; flex-direction:column; align-items:center; text-align:center;} .bf .mono{width:96px; height:96px; border-radius:24px; margin-bottom:30px; background:linear-gradient(150deg, var(--sap-moyen) 0%, var(--sap-sapin-deep) 100%); border:0.5px solid rgba(232,184,94,0.35); box-shadow:0 18px 50px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:34px; letter-spacing:1px; color:var(--sap-creme);} .bf .t-h3{max-width:18ch;} .bf .bf-text{margin:30px auto 0; max-width:62ch; text-align:left; display:flex; flex-direction:column; gap:18px;} .bf .bf-text p{font-weight:400; font-size:clamp(15.5px,1.55vw,18px); line-height:1.62; color:var(--fg-2); margin:0; text-wrap:pretty;} .approach-intro{margin:24px auto 0; max-width:58ch;} .pour-qui-text{margin:26px auto 0; max-width:56ch; display:flex; flex-direction:column; gap:18px;} /* ── FORMULAIRE D'AUDIT ──────────────────────────────────────── */ .audit-head{text-align:center; max-width:720px; margin:0 auto;} .audit-head .lede{margin:24px auto 0; max-width:56ch;} .form-glass{margin:48px auto 0; max-width:620px; width:100%; background:var(--glass-bg); border:0.5px solid var(--glass-border); -webkit-backdrop-filter:blur(24px) saturate(1.2); backdrop-filter:blur(24px) saturate(1.2); box-shadow:var(--glass-shadow); border-radius:var(--r-xl); padding:clamp(28px,4vw,44px); position:relative; overflow:hidden;} .field{display:flex; flex-direction:column; gap:9px; margin-bottom:22px;} .field label{font-family:var(--fm); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--fg-3);} .field .optional{font-size:10px; letter-spacing:1px; color:var(--fg-4); margin-left:6px; text-transform:none;} .field input,.field textarea{font-family:var(--fd); font-size:16px; color:var(--input-ink); background:var(--field-bg); border:0.5px solid var(--field-border); border-radius:var(--r-md); padding:14px 16px; width:100%; transition:border-color .25s, box-shadow .25s, background .25s;} .field textarea{resize:vertical; min-height:108px;} .field input::placeholder,.field textarea::placeholder{color:var(--field-ph);} .field input:focus,.field textarea:focus{outline:none; border-color:rgba(232,184,94,0.6); box-shadow:0 0 0 3px rgba(232,184,94,0.12); background:var(--field-bg-focus);} .field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:rgba(255,100,80,0.6);} .field-error{margin:6px 2px 0; font-size:12px; line-height:1.4; color:#c0392b;} @media (prefers-color-scheme: dark){ .field-error{color:#ff9a8a;} } .form-glass .btn-gold{width:100%; justify-content:center; margin-top:6px;} .form-note{font-family:var(--fm); font-size:11px; letter-spacing:0.5px; line-height:1.7; color:var(--fg-4); text-align:center; margin:16px 0 0;} .form-note a{color:var(--fg-3); text-decoration:underline; text-underline-offset:2px;} .form-note a:hover{color:var(--accent);} .form-error{font-family:var(--fm); font-size:11px; letter-spacing:0.5px; color:rgba(255,120,100,0.9); text-align:center; margin:12px 0 0; display:none;} .form-error.show{display:block;} .confirm{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px; gap:18px; background:var(--confirm-veil); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s;} .confirm.show{opacity:1; visibility:visible;} .confirm .cdisc{width:64px; height:64px; border-radius:50%; background:radial-gradient(circle at 38% 32%, #ffe6ad 0%, #e8b85e 46%, #c89a4a 100%); box-shadow:var(--glow-gold); display:flex; align-items:center; justify-content:center;} .confirm h3{font-weight:700; font-size:26px; letter-spacing:-0.01em; margin:0; color:var(--fg-1);} .confirm h3 .g{color:var(--accent); font-weight:800;} .confirm p{font-size:16px; line-height:1.55; color:var(--fg-2); margin:0; max-width:42ch;} /* ── PIED DE PAGE ────────────────────────────────────────────── */ .foot{padding:54px var(--gut) 48px; border-top:0.5px solid var(--divider); background:var(--foot-bg); transition:background .5s var(--ease);} .foot .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px;} .foot .fcol-l{display:flex; flex-direction:column; gap:10px; max-width:48ch;} .foot .name{font-weight:700; font-size:20px; letter-spacing:-0.01em;} .foot .name b{color:var(--accent); font-weight:800;} .foot .tagline{font-size:15px; line-height:1.55; color:var(--fg-3); margin:0; text-wrap:pretty;} .foot .fcol-r{font-family:var(--fm); font-size:13px; letter-spacing:1px; color:var(--fg-3); line-height:1.9; text-align:right;} .foot .fcol-r a{color:var(--fg-2); transition:color .2s;} .foot .fcol-r a:hover{color:var(--accent);} .foot .legal-links{margin-top:16px; display:flex; gap:18px; justify-content:flex-end; flex-wrap:wrap;} .foot .legal-links a{font-size:11px; letter-spacing:0.5px; color:var(--fg-2); text-decoration:underline; text-underline-offset:2px;} .foot .legal-links a:hover{color:var(--fg-2);} /* ── Apparition au défilement ────────────────────────────────── */ .reveal{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease);} .reveal.in{opacity:1; transform:none;} [data-stagger]{transition-delay:var(--d,0ms);} /* ── Bandeau de consentement aux cookies ─────────────────────── */ #cookie-banner{ position:fixed; bottom:0; left:0; right:0; z-index:9000; padding:18px var(--gut); background:rgba(19,31,24,0.96); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); border-top:0.5px solid rgba(232,184,94,0.22); display:none; animation:slideUp .4s var(--ease);} @keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}} #cookie-banner.visible{display:flex;} .cookie-inner{max-width:var(--maxw); margin:0 auto; width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;} .cookie-inner p{font-size:14px; line-height:1.55; color:var(--fg-2); margin:0; max-width:70ch;} .cookie-inner p a{color:var(--accent); text-decoration:underline; text-underline-offset:2px;} .cookie-btns{display:flex; gap:12px; flex-shrink:0;} #cookie-ok{font-family:var(--fd); font-weight:700; font-size:14px; color:var(--btn-ink); background:linear-gradient(180deg,#e8b85e 0%,#c89a4a 100%); border:none; border-radius:var(--r-pill); padding:10px 22px; cursor:pointer; white-space:nowrap; box-shadow:var(--glow-gold); transition:filter .2s;} #cookie-ok:hover{filter:brightness(1.06);} #cookie-no{font-family:var(--fd); font-size:14px; color:var(--fg-3); background:transparent; border:0.5px solid rgba(255,255,255,0.18); border-radius:var(--r-pill); padding:10px 20px; cursor:pointer; white-space:nowrap; transition:border-color .2s, color .2s;} #cookie-no:hover{border-color:rgba(255,255,255,0.36); color:var(--fg-2);} /* ── Responsive ──────────────────────────────────────────────── */ @media (max-width:860px){ .hdr .cta-mini{display:none;} .cards{grid-template-columns:1fr; gap:20px;} .vcard{min-height:0;} .timeline .rail{left:24px;} .cookie-inner{flex-direction:column; gap:16px;} .cookie-btns{width:100%; justify-content:flex-start;} } @media (min-width:861px){ .thread-v{display:none;} } @media (max-width:620px){ .hdr{padding:15px var(--gut);} .hdr.veiled{padding:11px var(--gut);} .brand .name{font-size:17px;} .section{padding:clamp(64px,11vh,96px) var(--gut);} .hero{min-height:88vh; padding:118px var(--gut) 84px;} .hero .pill{margin-bottom:24px;} .hero .lede{margin-top:24px;} .hero .btn-gold{margin-top:34px;} .btn-gold{padding:15px 24px;} .prob-grid{gap:24px; margin-top:30px;} .timeline{margin-top:42px;} .devis-stage{margin-top:40px;} .quote-box{padding:26px 22px;} .form-glass{margin-top:38px;} .foot .legal-links{justify-content:flex-start;} } @media (max-width:560px){ .t-hero{font-size:clamp(34px,11vw,44px);} .t-h2{font-size:clamp(28px,7.4vw,38px);} .t-h3{font-size:clamp(23px,6.4vw,30px);} .hero .lede,.lede{font-size:16.5px;} .tl-step{grid-template-columns:46px 1fr; gap:16px; padding:14px 0;} .tl-num{width:46px; height:46px; font-size:14px;} .timeline .rail{left:22px;} .tl-body h3{font-size:20px;} .tl-body p{font-size:15px;} .bf .mono{width:78px; height:78px; font-size:27px; border-radius:20px; margin-bottom:24px;} .vcard{padding:26px 24px 28px;} .vcard .vhead{margin-bottom:20px;} .quote-box .q{font-size:clamp(22px,6.6vw,28px);} .field{margin-bottom:18px;} .scroll-hint{bottom:26px;} } @media (max-width:380px){ :root{--gut:18px;} .t-hero{font-size:32px;} .brand .name{font-size:16px;} .pill{letter-spacing:1.3px;} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;} .reveal{opacity:1; transform:none;} } /* ============================================================ TUNNEL — composants ajoutés (catalogue, pages produit) ============================================================ */ /* ── En-tête : navigation ────────────────────────────────────── */ .hdr .navwrap{display:flex; align-items:center; gap:clamp(14px,2.4vw,30px);} .navlinks{display:flex; align-items:center; gap:clamp(14px,2vw,26px);} .navlinks a{font-family:var(--fm); font-size:12px; letter-spacing:1.4px; text-transform:uppercase; color:var(--fg-3); white-space:nowrap; transition:color .2s var(--ease);} .navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--accent);} /* ── Fil d'Ariane ────────────────────────────────────────────── */ .crumb{font-family:var(--fm); font-size:11.5px; letter-spacing:1.8px; text-transform:uppercase; color:var(--fg-4); margin-bottom:22px;} .crumb a{color:var(--fg-3); transition:color .2s;} .crumb a:hover{color:var(--accent);} .crumb .sep{margin:0 9px; color:var(--fg-4);} /* ── Héro de page produit (plus compact que l'accueil) ───────── */ .hero--produit{min-height:auto; padding:clamp(132px,17vh,170px) var(--gut) clamp(64px,9vh,92px); align-items:flex-start; text-align:left;} .hero--produit .wrap{display:flex; flex-direction:column; align-items:flex-start;} .hero--produit .t-hero{max-width:17ch; font-size:clamp(34px,5.8vw,66px);} .hero--produit .lede{margin:26px 0 0; max-width:56ch;} .hero--produit .cta-row{margin-top:36px;} /* ── Ligne de CTA (bouton + mention prix) ───────────────────── */ .cta-row{display:flex; align-items:center; gap:clamp(16px,2.6vw,28px); flex-wrap:wrap;} .cta-side{font-family:var(--fm); font-size:12.5px; letter-spacing:1.2px; line-height:1.7; color:var(--fg-3);} .cta-side b{color:var(--fg-1); font-weight:600;} /* ── Étiquette de prix ───────────────────────────────────────── */ .price{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;} .price .amount{font-weight:800; font-size:clamp(30px,4vw,44px); letter-spacing:-0.03em; color:var(--accent); line-height:1;} .price .unit{font-family:var(--fm); font-size:12px; letter-spacing:1.6px; text-transform:uppercase; color:var(--fg-3);} .price-note{font-family:var(--fm); font-size:11.5px; letter-spacing:1px; line-height:1.7; color:var(--fg-4); margin:10px 0 0;} /* ── Catalogue : grille de cartes produit ───────────────────── */ .cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:52px; align-items:stretch;} .cat-card{display:flex; flex-direction:column; border-radius:var(--r-xl); padding:32px 30px 30px; background:var(--glass-bg); border:0.5px solid var(--glass-border); -webkit-backdrop-filter:blur(24px) saturate(1.2); backdrop-filter:blur(24px) saturate(1.2); box-shadow:var(--glass-shadow); text-align:left; position:relative; overflow:hidden; transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);} .cat-card:hover{border-color:var(--glass-border-hover); box-shadow:var(--glass-shadow-hover); transform:translateY(-3px);} .cat-card .tag{font-family:var(--fm); font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--fg-4); margin:0 0 16px;} .cat-card h3{font-weight:700; font-size:clamp(21px,2.2vw,26px); letter-spacing:-0.015em; margin:0 0 12px; color:var(--fg-1);} .cat-card .pitch{font-size:15.5px; line-height:1.6; color:var(--fg-2); margin:0 0 22px;} .cat-card ul{list-style:none; padding:0; margin:0 0 26px; display:flex; flex-direction:column; gap:9px;} .cat-card li{font-size:14.5px; line-height:1.5; color:var(--fg-3); padding-left:20px; position:relative;} .cat-card li::before{content:""; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:50%; background:var(--accent); opacity:.75;} .cat-card .cat-foot{margin-top:auto; padding-top:22px; border-top:0.5px solid var(--divider);} .cat-card .go{display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-family:var(--fm); font-size:12px; letter-spacing:1.6px; text-transform:uppercase; font-weight:600; color:var(--accent); transition:gap .25s var(--ease);} .cat-card:hover .go{gap:13px;} .cat-card--phare{border-color:rgba(232,184,94,0.42); box-shadow:0 24px 60px rgba(0,0,0,0.35), 0 0 46px rgba(200,154,74,0.13), inset 0 1px 0 rgba(255,255,255,0.08);} .cat-card--phare .tag{color:var(--accent);} /* ── Périmètre : ce que ça fait / ce que ça ne fait pas ─────── */ .spec{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:44px;} .spec-col{border-radius:var(--r-lg); padding:28px 28px 30px; background:var(--glass-bg); border:0.5px solid var(--border-soft,var(--sap-border-soft)); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);} .spec-col h3{font-family:var(--fm); font-size:12px; letter-spacing:2.2px; text-transform:uppercase; margin:0 0 20px; font-weight:600;} .spec-col--in h3{color:var(--accent);} .spec-col--out h3{color:var(--fg-3);} .spec-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:13px;} .spec-col li{font-size:15.5px; line-height:1.55; color:var(--fg-2); padding-left:26px; position:relative;} .spec-col--in li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--accent); font-weight:700; font-size:14px;} .spec-col--out li{color:var(--fg-3);} .spec-col--out li::before{content:"—"; position:absolute; left:0; top:0; color:var(--fg-4); font-weight:700;} .spec-note{margin:24px 0 0; font-size:14.5px; line-height:1.6; color:var(--fg-3); text-wrap:pretty;} /* ── Bloc prix de page produit ──────────────────────────────── */ .pbox{margin-top:46px; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--quote-border); background:var(--quote-bg); box-shadow:var(--quote-glow);} .pbox-main{padding:clamp(28px,4vw,40px); display:flex; flex-wrap:wrap; gap:28px; align-items:flex-start; justify-content:space-between;} .pbox-main .left{min-width:min(100%,260px);} .pbox-main .guarantee{margin:14px 0 0; font-size:15.5px; line-height:1.6; color:var(--fg-2); max-width:40ch;} .pbox-lines{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; min-width:min(100%,300px);} .pbox-lines li{display:flex; justify-content:space-between; gap:18px; align-items:baseline; font-size:15px; line-height:1.5; color:var(--fg-2); padding-bottom:13px; border-bottom:0.5px solid var(--divider);} .pbox-lines li:last-child{border-bottom:none; padding-bottom:0;} .pbox-lines .k{color:var(--fg-3);} .pbox-lines .v{font-family:var(--fm); font-size:13.5px; letter-spacing:0.5px; color:var(--fg-1); white-space:nowrap; text-align:right;} .pbox-foot{padding:20px clamp(28px,4vw,40px); border-top:1px solid rgba(232,184,94,0.22); background:rgba(0,0,0,0.16); font-family:var(--fm); font-size:11.5px; letter-spacing:0.8px; line-height:1.8; color:var(--fg-4);} /* ── Point d'attention (aversion à la perte) ────────────────── */ .attn{margin:46px auto 0; max-width:660px; border-radius:var(--r-lg); border:0.5px solid var(--sap-border-soft); border-left:2px solid var(--accent); background:rgba(0,0,0,0.20); padding:clamp(24px,3.4vw,32px);} .attn h3{font-family:var(--fm); font-size:11.5px; letter-spacing:2.4px; text-transform:uppercase; color:var(--accent); margin:0 0 16px; font-weight:600;} .attn p{font-size:16px; line-height:1.65; color:var(--fg-2); margin:0; text-wrap:pretty;} .attn p + p{margin-top:13px;} .attn .after{color:var(--fg-1);} /* ── Preuve ──────────────────────────────────────────────────── */ .proof-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; margin-top:46px;} .proof-card{border-radius:var(--r-lg); padding:28px 26px; background:var(--glass-bg); border:0.5px solid var(--sap-border-soft); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);} .proof-card .who{font-family:var(--fm); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--fg-4); margin:0 0 14px;} .proof-card .what{font-size:16px; line-height:1.6; color:var(--fg-2); margin:0;} .proof-card .what b{color:var(--fg-1); font-weight:600;} .proof-card--vide{border-style:dashed; border-color:rgba(255,255,255,0.14); background:rgba(0,0,0,0.14);} .proof-card--vide .what{color:var(--fg-4);} /* ── Questions fréquentes ───────────────────────────────────── */ .faq{margin-top:44px; max-width:760px; margin-left:auto; margin-right:auto;} .faq details{border-bottom:0.5px solid var(--divider); padding:4px 0;} .faq summary{cursor:pointer; list-style:none; padding:20px 34px 20px 0; position:relative; font-weight:600; font-size:clamp(16px,1.7vw,18.5px); line-height:1.45; color:var(--fg-1); transition:color .2s var(--ease);} .faq summary::-webkit-details-marker{display:none;} .faq summary:hover{color:var(--accent);} .faq summary::after{content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-family:var(--fm); font-size:20px; font-weight:400; color:var(--accent); transition:transform .3s var(--ease);} .faq details[open] summary::after{transform:translateY(-50%) rotate(45deg);} .faq .ans{padding:0 34px 24px 0; margin:0; font-size:15.5px; line-height:1.65; color:var(--fg-2); text-wrap:pretty;} .faq .ans + .ans{padding-top:0; margin-top:-10px;} /* ── Barre d'action collante (mobile) ───────────────────────── */ .sticky-cta{position:fixed; left:0; right:0; bottom:0; z-index:70; display:none; padding:12px var(--gut) calc(12px + env(safe-area-inset-bottom)); background:rgba(19,31,24,0.94); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); border-top:0.5px solid rgba(232,184,94,0.22); align-items:center; justify-content:space-between; gap:14px;} .sticky-cta .sc-price{font-family:var(--fm); font-size:12px; letter-spacing:1px; line-height:1.5; color:var(--fg-3);} .sticky-cta .sc-price b{display:block; font-size:16px; letter-spacing:-0.01em; color:var(--accent); font-weight:800;} .sticky-cta .btn-gold{padding:13px 22px; font-size:15px;} /* ── Responsive des ajouts ──────────────────────────────────── */ @media (max-width:980px){ .cat-grid{grid-template-columns:1fr; gap:20px;} .spec{grid-template-columns:1fr; gap:18px;} } @media (max-width:860px){ .navlinks{display:none;} .sticky-cta{display:flex;} body:has(.sticky-cta){padding-bottom:84px;} .hero--produit{padding-top:clamp(112px,15vh,140px);} } @media (max-width:620px){ .cat-grid{margin-top:38px;} .pbox-main{flex-direction:column; gap:24px;} .pbox-lines .v{font-size:12.5px;} .attn{margin-top:34px;} .faq summary{font-size:16px; padding-right:30px;} .hero--produit .t-hero{font-size:clamp(30px,9vw,40px);} } /* ── Bloc chiffre (argument de vente sourcé) ─────────────────── */ .statwrap{margin-top:48px; display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch;} .statbox{border-radius:var(--r-xl); padding:clamp(28px,3.6vw,40px); background:var(--glass-bg); border:0.5px solid var(--glass-border); -webkit-backdrop-filter:blur(24px) saturate(1.2); backdrop-filter:blur(24px) saturate(1.2); box-shadow:var(--glass-shadow); display:flex; flex-direction:column;} .statbox--fort{border-color:rgba(232,184,94,0.42); background:var(--quote-bg); box-shadow:0 24px 60px rgba(0,0,0,0.35), 0 0 46px rgba(200,154,74,0.13), inset 0 1px 0 rgba(255,255,255,0.08);} .statbox .lab{font-family:var(--fm); font-size:11px; letter-spacing:2.4px; text-transform:uppercase; color:var(--fg-4); margin:0 0 18px;} .statbox--fort .lab{color:var(--accent);} .statbox .big{font-weight:800; font-size:clamp(52px,8vw,86px); line-height:0.95; letter-spacing:-0.04em; color:var(--accent); margin:0 0 16px;} .statbox .say{font-size:clamp(16px,1.8vw,19px); line-height:1.5; color:var(--fg-1); margin:0; font-weight:600; text-wrap:pretty;} .statbox .sub{font-size:15px; line-height:1.6; color:var(--fg-2); margin:14px 0 0; text-wrap:pretty;} .statbox .src{font-family:var(--fm); font-size:11px; letter-spacing:0.6px; line-height:1.7; color:var(--fg-4); margin:auto 0 0; padding-top:20px;} .statbox .src b{color:var(--fg-3); font-weight:500;} .statnote{margin:22px auto 0; max-width:70ch; text-align:center; font-family:var(--fm); font-size:11.5px; letter-spacing:0.6px; line-height:1.8; color:var(--fg-4);} @media (max-width:860px){ .statwrap{grid-template-columns:1fr;} } @media (max-width:620px){ .statwrap{margin-top:34px; gap:18px;} .statbox .big{font-size:clamp(46px,14vw,60px);} } /* ============================================================ TUNNEL v2 — bandeau de chiffres, cartes courtes, formulaire qualifiant ============================================================ */ /* ── Bandeau de chiffres sous le héro ───────────────────────── */ .hstats{display:flex; align-items:stretch; justify-content:center; gap:clamp(20px,4vw,56px); margin:44px auto 0; flex-wrap:wrap;} .hstat{text-align:center; min-width:150px;} .hstat .n{display:block; font-weight:800; font-size:clamp(34px,4.6vw,52px); line-height:1; letter-spacing:-0.035em; color:var(--accent);} .hstat .t{display:block; margin-top:10px; font-size:14px; line-height:1.5; color:var(--fg-3); max-width:22ch; margin-left:auto; margin-right:auto; text-wrap:pretty;} /* ── Cartes courtes (problème, avantages) ───────────────────── */ .mini-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin-top:48px;} .mini{border-radius:var(--r-lg); padding:26px 24px 28px; background:var(--glass-bg); border:0.5px solid var(--sap-border-soft); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); transition:border-color .3s var(--ease), transform .3s var(--ease);} .mini:hover{border-color:var(--glass-border); transform:translateY(-2px);} .mini .ic{display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; margin-bottom:18px; background:rgba(232,184,94,0.12); border:0.5px solid rgba(232,184,94,0.30);} .mini h3{font-weight:700; font-size:17.5px; letter-spacing:-0.01em; margin:0 0 9px; color:var(--fg-1);} .mini p{font-size:15px; line-height:1.55; color:var(--fg-2); margin:0; text-wrap:pretty;} /* ── Rappel d'action en fin de section ──────────────────────── */ .cta-band{margin-top:46px; text-align:center;} .cta-band .btn-gold{margin:0 auto;} .cta-band .under{display:block; margin-top:16px; font-family:var(--fm); font-size:11.5px; letter-spacing:1.2px; color:var(--fg-4);} /* ── Champs de sélection du formulaire ──────────────────────── */ .field select{font-family:var(--fd); font-size:16px; color:var(--input-ink); background:var(--field-bg); border:0.5px solid var(--field-border); border-radius:var(--r-md); padding:14px 16px; width:100%; appearance:none; -webkit-appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8b85e' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:18px; padding-right:44px; transition:border-color .25s, box-shadow .25s, background-color .25s;} .field select:focus{outline:none; border-color:rgba(232,184,94,0.6); box-shadow:0 0 0 3px rgba(232,184,94,0.12); background-color:var(--field-bg-focus);} .field select option{background:#1a2e22; color:#fff;} .field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;} @media (max-width:560px){ .field-row{grid-template-columns:1fr; gap:0;} } /* ── Carte large : le sur-mesure dans le catalogue ───────────── */ .cat-card--large{grid-column:1/-1; flex-direction:row; align-items:center; gap:clamp(24px,4vw,48px); flex-wrap:wrap; padding:32px clamp(28px,3.4vw,40px); border-style:dashed; border-color:rgba(255,255,255,0.18); background:rgba(0,0,0,0.16);} .cat-card--large:hover{border-style:solid; border-color:var(--glass-border); transform:none;} .cat-card--large .lft{flex:1 1 340px; min-width:0;} .cat-card--large h3{margin-bottom:10px;} .cat-card--large .pitch{margin-bottom:0; max-width:56ch;} .cat-card--large .rgt{flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-start; gap:14px;} .cat-card--large .mention{font-family:var(--fm); font-size:11.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--fg-4);} @media (max-width:720px){ .cat-card--large{flex-direction:column; align-items:flex-start;} } /* ============================================================ PASSE ESTHÉTIQUE — corrections de structure ============================================================ */ /* 1 · Grilles régulières : plus de rangée orpheline */ .mini-grid{grid-template-columns:repeat(4,1fr);} .mini-grid--3{grid-template-columns:repeat(3,1fr);} @media (max-width:1000px){ .mini-grid,.mini-grid--3{grid-template-columns:repeat(2,1fr);} } @media (max-width:620px){ .mini-grid,.mini-grid--3{grid-template-columns:1fr;} } /* 2 · Chiffres du héro : libellés lisibles, chiffres séparés par un filet */ .hstats{gap:0;} .hstat{padding:0 clamp(18px,3vw,40px); position:relative;} .hstat + .hstat::before{content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background:linear-gradient(180deg,transparent,rgba(232,184,94,0.28),transparent);} .hstat .t{margin-top:12px; font-size:14.5px; color:var(--fg-2); max-width:20ch;} @media (max-width:620px){ .hstats{gap:26px;} .hstat + .hstat::before{display:none;} } /* 3 · Cartes produit : l'action devient un bouton, pas un lien perdu */ .cat-card .go{padding:11px 20px; border-radius:var(--r-pill); border:1px solid rgba(232,184,94,0.34); background:rgba(232,184,94,0.07); transition:background .25s var(--ease), border-color .25s var(--ease), gap .25s var(--ease);} .cat-card .go:hover{background:rgba(232,184,94,0.14); border-color:rgba(232,184,94,0.6);} .cat-card .price{align-items:baseline; gap:10px;} .cat-card .amount{font-size:clamp(34px,3.6vw,42px);} /* 4 · Sur-mesure : invitant, plus « désactivé » */ .cat-card--large{border-style:solid; border-color:rgba(232,184,94,0.20); background:linear-gradient(120deg, rgba(232,184,94,0.05), rgba(255,255,255,0.02));} .cat-card--large:hover{border-color:rgba(232,184,94,0.40); background:linear-gradient(120deg, rgba(232,184,94,0.08), rgba(255,255,255,0.03));} /* 5 · Séparation des sections : un filet qui se voit sans peser */ :root{--divider:rgba(255,255,255,0.10);} .section{border-top:none; position:relative;} .section::before{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:min(100%,var(--maxw)); height:1px; background:linear-gradient(90deg,transparent,rgba(232,184,94,0.22) 22%,rgba(232,184,94,0.22) 78%,transparent);} .hero::before{display:none;} /* 6 · Rythme : plus d'air autour des titres de section */ .section .center .overline{display:inline-block; margin-bottom:22px;} .section .center .title{margin-bottom:4px;} /* ============================================================ THÈME CLAIR — crème / sapin / or Redéfinit les jetons de couleur. Tout ce qui précède les utilise. ============================================================ */ :root{ /* Encres */ --fg-1:#16281d; --fg-2:rgba(22,40,29,0.80); --fg-3:rgba(22,40,29,0.58); --fg-4:rgba(22,40,29,0.40); --accent:#96671c; /* or foncé : lisible sur crème */ --btn-ink:#1a2e22; /* Fonds */ --body-bg:#f2ece0; --page-grad:radial-gradient(150% 110% at 50% -10%, #fdfbf5 0%, #f6f1e6 38%, #eee7d8 100%); --halo-1:radial-gradient(circle, rgba(200,154,74,0.20) 0%, rgba(200,154,74,0.06) 40%, transparent 70%); --halo-2:radial-gradient(circle, rgba(107,143,118,0.24) 0%, rgba(107,143,118,0.08) 44%, transparent 75%); --halo-3:radial-gradient(circle, rgba(255,255,255,0.55) 0%, transparent 68%); --vignette:radial-gradient(ellipse at center, transparent 55%, rgba(122,104,72,0.10) 100%); /* Surfaces vitrées → cartes claires */ --glass-bg:rgba(255,255,255,0.76); --glass-border:rgba(22,40,29,0.13); --glass-border-hover:rgba(22,40,29,0.24); --glass-shadow:0 16px 40px rgba(60,52,34,0.09), inset 0 1px 0 rgba(255,255,255,0.9); --glass-shadow-hover:0 22px 52px rgba(60,52,34,0.13), inset 0 1px 0 rgba(255,255,255,0.95); --sap-surface:rgba(255,255,255,0.70); --sap-border-soft:rgba(22,40,29,0.12); --sap-border-glass:rgba(22,40,29,0.14); --divider:rgba(22,40,29,0.11); --sap-divider:rgba(22,40,29,0.11); /* En-tête, pastilles, champs */ --header-veil:rgba(250,247,239,0.86); --header-border:rgba(22,40,29,0.10); --pill-bg:rgba(255,255,255,0.70); --pill-border:rgba(22,40,29,0.14); --field-bg:#ffffff; --field-bg-focus:#ffffff; --field-border:rgba(22,40,29,0.16); --field-ph:rgba(22,40,29,0.34); --input-ink:#16281d; /* Encadrés dorés */ --quote-border:rgba(200,154,74,0.42); --quote-bg:linear-gradient(170deg, rgba(232,184,94,0.14), rgba(232,184,94,0.05)); --quote-glow:0 14px 40px rgba(150,103,28,0.10), inset 0 1px 0 rgba(255,255,255,0.8); /* Divers */ --sel-bg:rgba(200,154,74,0.34); --sel-ink:#16281d; --mark-bg:#1a2e22; --scroll-border:rgba(22,40,29,0.28); --foot-bg:#1a2e22; /* pied sombre : ancre la page */ --confirm-veil:rgba(250,247,239,0.86); /* Ombres et halos dorés, atténués pour un fond clair */ --glow-gold:0 8px 20px rgba(150,103,28,0.26), 0 2px 6px rgba(150,103,28,0.16); --glow-gold-lg:0 0 36px rgba(200,154,74,0.45), inset 0 0 14px rgba(255,255,255,0.55); --shadow-glass:var(--glass-shadow); } /* ── Reprises des valeurs codées en dur ─────────────────────── */ body{color:var(--fg-1);} .pbox-foot{background:rgba(22,40,29,0.045); border-top-color:rgba(200,154,74,0.30);} .attn{background:rgba(255,255,255,0.60);} .proof-card--vide{background:rgba(22,40,29,0.04); border-color:rgba(22,40,29,0.14);} .sticky-cta{background:rgba(250,247,239,0.95); border-top-color:rgba(200,154,74,0.30);} #cookie-banner{background:rgba(250,247,239,0.97); border-top-color:rgba(200,154,74,0.30);} #cookie-no{border-color:rgba(22,40,29,0.20); color:var(--fg-2);} #cookie-no:hover{border-color:rgba(22,40,29,0.40); color:var(--fg-1);} .field select option{background:#fff; color:#16281d;} .mini .ic{background:rgba(200,154,74,0.14); border-color:rgba(200,154,74,0.38);} .cat-card .go{border-color:rgba(150,103,28,0.34); background:rgba(200,154,74,0.10);} .cat-card .go:hover{background:rgba(200,154,74,0.20); border-color:rgba(150,103,28,0.60);} .statbox .src{color:var(--fg-3);} .spec-col--out li::before{color:var(--fg-3);} .hdr.veiled{box-shadow:0 1px 0 rgba(22,40,29,0.06), 0 8px 24px rgba(60,52,34,0.06);} /* Le pied de page reste sombre : ses encres repassent en clair */ .foot{color:#fff;} .foot .name{color:#fff;} .foot .name b{color:var(--sap-or-clair);} .foot .tagline{color:rgba(255,255,255,0.62);} .foot .fcol-r{color:rgba(255,255,255,0.60);} .foot .fcol-r a{color:rgba(255,255,255,0.86);} .foot .fcol-r a:hover{color:var(--sap-or-clair);} .foot .legal-links a{color:rgba(255,255,255,0.78);} .foot .legal-links a:hover{color:rgba(255,255,255,0.80);} /* Boutons dorés : encre sapin, ombre douce */ .btn-gold,.hdr .cta-mini,#cookie-ok{ background:linear-gradient(180deg,#e6b45c 0%,#c2913f 100%); box-shadow:var(--glow-gold), inset 0 1px 0 rgba(255,255,255,0.55);} .btn-gold:hover,.hdr .cta-mini:hover,#cookie-ok:hover{ box-shadow:0 10px 26px rgba(150,103,28,0.32), inset 0 1px 0 rgba(255,255,255,0.6);} /* Disques dorés (étapes) : le glyphe intérieur reste sapin */ .step-disc{box-shadow:0 8px 20px rgba(150,103,28,0.22);} .pill .dot{box-shadow:0 0 8px rgba(200,154,74,0.7);} .brand .orb{box-shadow:0 0 8px rgba(200,154,74,0.65);} /* ── Motif de courbes de niveau (topographie) ────────────────── */ .topo{position:relative; isolation:isolate;} .topo::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:url("data:image/svg+xml,"); background-repeat:no-repeat; background-position:right -180px top -120px; background-size:760px auto; opacity:0.085;} .topo--gauche::after{background-position:left -220px bottom -160px;} @media (max-width:860px){ .topo::after{background-size:520px auto; opacity:0.06;} } /* ── Schéma de parcours (illustration produit) ───────────────── */ .schema{margin:0 auto; max-width:900px; width:100%;} .schema svg{width:100%; height:auto; display:block; overflow:visible;} .schema .s-ink{stroke:var(--fg-1); opacity:.42;} .schema .s-fill{fill:var(--fg-1); opacity:.06;} .schema .s-or{stroke:var(--accent);} .schema .s-or-f{fill:var(--accent);} .schema .s-card{fill:var(--glass-bg); stroke:var(--glass-border);} .schema .s-lab{fill:var(--fg-3); font-family:var(--fm); font-size:13px; letter-spacing:1.6px; text-transform:uppercase;} .schema .s-dash{stroke:var(--accent); stroke-opacity:.55; stroke-dasharray:5 7; stroke-linecap:round;} .schema-wrap{margin-top:46px; padding:clamp(26px,4vw,44px) clamp(20px,3vw,36px); border-radius:var(--r-xl); background:var(--glass-bg); border:0.5px solid var(--glass-border); box-shadow:var(--glass-shadow);} @media (max-width:620px){ .schema-wrap{padding:22px 14px;} .schema .s-lab{font-size:15px;} } /* ── Correctifs de contraste des glyphes (thème clair) ───────── */ /* Les icônes sont dessinées en or : sur un disque doré elles disparaissent. */ .step-disc svg path,.step-disc svg circle,.step-disc svg rect, .step-disc svg line,.step-disc svg polyline{stroke:#1a2e22;} .step-disc svg rect[fill],.step-disc svg path[fill="#1a2e22"]{fill:#1a2e22;} /* Sur carte blanche, l'or clair manque de contraste : on descend d'un ton. */ .mini .ic svg path,.mini .ic svg circle,.mini .ic svg rect,.mini .ic svg line{stroke:#8a5f18;} .cdisc svg path{stroke:#1a2e22;} /* ============================================================ CHARTE VERTE — feuillage clair / feuille profonde S'applique par-dessus le thème clair. Les jetons dorés sont redéfinis en verts : tout ce qui les utilise suit sans retouche. ============================================================ */ :root{ /* Verts */ --v-clair:#8fc153; /* jeune pousse — aplats, boutons */ --v-moyen:#5f9438; /* feuille */ --v-profond:#3d6b28; /* encre d'accent, lisible sur fond clair */ --v-tres-clair:#dbeac6; /* fonds très doux */ --v-foret:#1b2e1d; /* encre principale */ /* Les anciens jetons dorés deviennent verts */ --sap-or-chaud:#5f9438; --sap-or-clair:#8fc153; --sap-or-pale:#c3de9c; --accent:#3d6b28; /* Encres */ --fg-1:#1b2e1d; --fg-2:rgba(27,46,29,0.86); /* Ces deux-là portent du vrai texte — surtitres, notes, mentions de prix. À 0,58 et 0,40 sur crème, ils tombaient à 2,3:1 : illisibles au soleil, sur un téléphone, sur un chantier. Relevés au seuil AA (4,5:1). */ --fg-3:rgba(27,46,29,0.74); --fg-4:rgba(27,46,29,0.72); --btn-ink:#17280f; /* Fonds : crème verdie */ --body-bg:#edf2e4; --page-grad:radial-gradient(150% 110% at 50% -10%, #f9fcf3 0%, #f1f6e9 38%, #e6eeda 100%); --halo-1:radial-gradient(circle, rgba(143,193,83,0.26) 0%, rgba(143,193,83,0.08) 40%, transparent 70%); --halo-2:radial-gradient(circle, rgba(95,148,56,0.22) 0%, rgba(95,148,56,0.07) 44%, transparent 75%); --halo-3:radial-gradient(circle, rgba(255,255,255,0.60) 0%, transparent 68%); --vignette:radial-gradient(ellipse at center, transparent 55%, rgba(45,70,40,0.09) 100%); /* Surfaces */ --glass-bg:rgba(255,255,255,0.80); --glass-border:rgba(27,46,29,0.13); --glass-border-hover:rgba(61,107,40,0.30); --glass-shadow:0 16px 40px rgba(40,64,32,0.09), inset 0 1px 0 rgba(255,255,255,0.9); --glass-shadow-hover:0 22px 52px rgba(40,64,32,0.13), inset 0 1px 0 rgba(255,255,255,0.95); --sap-border-soft:rgba(27,46,29,0.12); --divider:rgba(27,46,29,0.11); --header-veil:rgba(246,250,240,0.88); --header-border:rgba(27,46,29,0.10); --pill-bg:rgba(255,255,255,0.74); --pill-border:rgba(61,107,40,0.20); --field-border:rgba(27,46,29,0.16); --field-ph:rgba(27,46,29,0.34); --input-ink:#1b2e1d; /* Encadrés */ --quote-border:rgba(95,148,56,0.42); --quote-bg:linear-gradient(170deg, rgba(143,193,83,0.18), rgba(143,193,83,0.06)); --quote-glow:0 14px 40px rgba(61,107,40,0.10), inset 0 1px 0 rgba(255,255,255,0.85); --sel-bg:rgba(143,193,83,0.42); --sel-ink:#1b2e1d; --mark-bg:#22421f; --foot-bg:#22421f; --confirm-veil:rgba(246,250,240,0.88); --glow-gold:0 8px 20px rgba(61,107,40,0.26), 0 2px 6px rgba(61,107,40,0.16); } /* ── Boutons : jeune pousse, encre forêt ────────────────────── */ .btn-gold,.hdr .cta-mini,#cookie-ok{ background:linear-gradient(180deg,#93c757 0%,#5f9438 100%); box-shadow:var(--glow-gold), inset 0 1px 0 rgba(255,255,255,0.42);} .btn-gold:hover,.hdr .cta-mini:hover,#cookie-ok:hover{ box-shadow:0 10px 26px rgba(61,107,40,0.32), inset 0 1px 0 rgba(255,255,255,0.5);} /* ── Pastilles et disques ───────────────────────────────────── */ .step-disc,.confirm .cdisc{ background:radial-gradient(circle at 38% 30%, #cfe9a6 0%, #8fc153 46%, #5f9438 100%); box-shadow:0 8px 20px rgba(61,107,40,0.24);} .brand .orb{background:radial-gradient(circle at 35% 30%,#fff 0%,#8fc153 45%,#5f9438 100%); box-shadow:0 0 8px rgba(95,148,56,0.6);} .pill .dot{box-shadow:0 0 8px rgba(95,148,56,0.65);} .mini .ic{background:rgba(143,193,83,0.20); border-color:rgba(95,148,56,0.42);} .mini .ic svg path,.mini .ic svg circle,.mini .ic svg rect,.mini .ic svg line{stroke:#3d6b28;} .step-badge{border-color:rgba(95,148,56,0.55);} /* ── Filets, bordures et lueurs ─────────────────────────────── */ .section::before{background:linear-gradient(90deg,transparent,rgba(95,148,56,0.26) 22%,rgba(95,148,56,0.26) 78%,transparent);} .hstat + .hstat::before{background:linear-gradient(180deg,transparent,rgba(95,148,56,0.32),transparent);} .pbox-foot{background:rgba(27,46,29,0.045); border-top-color:rgba(95,148,56,0.30);} .sticky-cta,#cookie-banner{background:rgba(246,250,240,0.96); border-top-color:rgba(95,148,56,0.30);} .cat-card .go{border-color:rgba(61,107,40,0.34); background:rgba(143,193,83,0.14);} .cat-card .go:hover{background:rgba(143,193,83,0.26); border-color:rgba(61,107,40,0.60);} .cat-card--phare{border-color:rgba(95,148,56,0.42); box-shadow:0 18px 46px rgba(40,64,32,0.10), 0 0 30px rgba(143,193,83,0.16), inset 0 1px 0 rgba(255,255,255,0.9);} .cat-card--large{border-color:rgba(95,148,56,0.24); background:linear-gradient(120deg, rgba(143,193,83,0.12), rgba(255,255,255,0.40));} .cat-card--large:hover{border-color:rgba(95,148,56,0.48); background:linear-gradient(120deg, rgba(143,193,83,0.20), rgba(255,255,255,0.50));} .statbox--fort{border-color:rgba(95,148,56,0.42); box-shadow:0 18px 46px rgba(40,64,32,0.10), 0 0 30px rgba(143,193,83,0.14), inset 0 1px 0 rgba(255,255,255,0.9);} /* ── Champs ─────────────────────────────────────────────────── */ .field input:focus,.field textarea:focus,.field select:focus{ border-color:rgba(95,148,56,0.70); box-shadow:0 0 0 3px rgba(143,193,83,0.22);} .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d6b28' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");} /* ── Pied de page vert forêt ────────────────────────────────── */ .foot .name b{color:#a8d474;} .foot .fcol-r a:hover{color:#a8d474;} /* ── Boutons : vert clair franc ──────────────────────────────── */ .btn-gold,.hdr .cta-mini,#cookie-ok{ background:linear-gradient(180deg,#a6d46c 0%,#7cb843 100%); color:#16280d; box-shadow:0 8px 20px rgba(95,148,56,0.28), 0 2px 6px rgba(61,107,40,0.14), inset 0 1px 0 rgba(255,255,255,0.5);} .btn-gold:hover,.hdr .cta-mini:hover,#cookie-ok:hover{ filter:brightness(1.05); box-shadow:0 12px 28px rgba(95,148,56,0.34), inset 0 1px 0 rgba(255,255,255,0.6);} .sticky-cta .sc-price b{color:var(--accent);} /* ============================================================ PANNEAU DE DÉMONSTRATION (héro) — les outils en action ============================================================ */ .demo{margin:clamp(46px,6vh,72px) auto 0; width:100%; max-width:920px; text-align:left; border-radius:var(--r-xl); overflow:hidden; background:rgba(255,255,255,0.86); border:0.5px solid var(--glass-border); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px); box-shadow:0 24px 60px rgba(40,64,32,0.13), inset 0 1px 0 rgba(255,255,255,0.9);} .demo-head{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px clamp(18px,2.4vw,26px); border-bottom:0.5px solid var(--divider); background:rgba(143,193,83,0.09);} .demo-head .live{display:flex; align-items:center; gap:10px; font-family:var(--fm); font-size:12px; letter-spacing:1.6px; text-transform:uppercase; font-weight:600; color:var(--accent);} .demo-head .live .dot{width:8px; height:8px; border-radius:50%; background:#7cb843; box-shadow:0 0 0 0 rgba(124,184,67,0.55); animation:pulse 2.4s var(--ease) infinite;} @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(124,184,67,0.5);} 70%{box-shadow:0 0 0 9px rgba(124,184,67,0);} 100%{box-shadow:0 0 0 0 rgba(124,184,67,0);}} .demo-head .note{font-family:var(--fm); font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--fg-4);} .demo-body{display:grid; grid-template-columns:210px 1fr;} .demo-stats{padding:clamp(20px,2.6vw,28px); border-right:0.5px solid var(--divider); display:flex; flex-direction:column; gap:26px; justify-content:center; background:rgba(143,193,83,0.045);} .demo-stats .s .k{display:block; font-family:var(--fm); font-size:10.5px; letter-spacing:1.8px; text-transform:uppercase; color:var(--fg-4); margin-bottom:8px;} .demo-stats .s .v{display:block; font-weight:800; font-size:40px; line-height:1; letter-spacing:-0.035em; color:var(--accent);} .demo-stats .s .u{display:block; margin-top:7px; font-size:13px; line-height:1.45; color:var(--fg-3);} .demo-feed{padding:8px clamp(14px,2vw,20px);} .feed-row{display:flex; align-items:center; gap:14px; padding:16px 8px;} .feed-row + .feed-row{border-top:0.5px solid var(--divider);} .feed-row .ic{flex:0 0 auto; width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:rgba(143,193,83,0.18); border:0.5px solid rgba(95,148,56,0.34);} .feed-row .ic svg path,.feed-row .ic svg circle,.feed-row .ic svg rect{stroke:#3d6b28;} .feed-row .txt{flex:1 1 auto; min-width:0;} .feed-row .t{display:block; font-weight:700; font-size:15.5px; letter-spacing:-0.005em; color:var(--fg-1); margin-bottom:3px;} .feed-row .d{display:block; font-size:13.5px; line-height:1.45; color:var(--fg-3);} .status{flex:0 0 auto; font-family:var(--fm); font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; font-weight:600; padding:6px 12px; border-radius:var(--r-pill); color:#2c5a1d; background:rgba(143,193,83,0.26); border:0.5px solid rgba(95,148,56,0.38); white-space:nowrap;} @media (max-width:760px){ .demo-body{grid-template-columns:1fr;} .demo-stats{flex-direction:row; gap:0; border-right:none; border-bottom:0.5px solid var(--divider);} .demo-stats .s{flex:1 1 0;} .demo-stats .s + .s{border-left:0.5px solid var(--divider); padding-left:22px;} .demo-stats .s .v{font-size:34px;} .feed-row{flex-wrap:wrap; padding:14px 4px;} .feed-row .txt{flex:1 1 60%;} .status{margin-left:50px;} } @media (max-width:420px){ .demo-head{flex-direction:column; align-items:flex-start; gap:8px;} .feed-row .d{font-size:13px;} } /* ═════════════════════════════════════════════════════════════ PAGES SIMPLES — 404, merci, mentions légales, confidentialité Elles avaient chacune leur feuille de style recopiée, restée sur l'ancienne charte sapin/or : quatre pages du site ne ressemblaient plus au site. Elles utilisent désormais les mêmes jetons que le reste — elles suivront le prochain changement de charte sans qu'on y touche. ═════════════════════════════════════════════════════════════ */ .hero--court{min-height:auto; padding:clamp(126px,16vh,170px) var(--gut) clamp(52px,7vh,80px);} .hero--court .t-h2{max-width:18ch;} .hero--court .lede{margin:22px auto 0; max-width:56ch;} .cta-duo{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center; margin-top:40px;} .btn-ligne{display:inline-flex; align-items:center; gap:8px; padding:15px 26px; border-radius:var(--r-pill); border:1px solid var(--glass-border); background:var(--pill-bg); color:var(--fg-1); font-weight:600; font-size:15px; text-decoration:none; transition:border-color .25s var(--ease), color .25s var(--ease);} .btn-ligne:hover,.btn-ligne:focus-visible{border-color:var(--accent); color:var(--accent);} /* Le disque de confirmation, repris de l'exemple de l'accueil. */ .hero--court .step-disc{margin:0 auto 28px;} .hero--court .step-disc svg{width:26px; height:26px; color:var(--btn-ink);} /* ── Textes suivis : mentions légales, confidentialité ──────── */ .prose{max-width:76ch; margin:0 auto;} .prose .date{font-family:var(--fm); font-size:12px; letter-spacing:1.6px; text-transform:uppercase; color:var(--fg-3); margin:0 0 42px;} .prose h2{font-family:var(--fd); font-weight:700; letter-spacing:-0.01em; font-size:clamp(19px,2.1vw,23px); color:var(--fg-1); margin:44px 0 12px;} .prose h2:first-of-type{margin-top:0;} .prose p,.prose li{font-size:16px; line-height:1.68; color:var(--fg-2); margin:0 0 14px; text-wrap:pretty;} .prose ul{padding-left:20px; margin:0 0 18px;} .prose li{margin:0 0 8px;} .prose strong{color:var(--fg-1); font-weight:600;} .prose a{color:var(--accent); text-decoration:underline; text-underline-offset:3px;} .prose .encart{border-radius:var(--r-lg); padding:18px 22px; margin:0 0 30px; background:var(--glass-bg); border:0.5px solid var(--glass-border);} .prose .encart p{margin:0; font-size:15px;} .prose .signature{margin-top:46px; padding-top:22px; border-top:0.5px solid var(--divider); font-size:14px; color:var(--fg-3);} /* Un bouton qui se lit comme un lien — le lien « javascript: » qu'il remplace ne passait aucune politique de sécurité. */ .lien-bouton{background:none; border:0; padding:0; font:inherit; color:var(--accent); text-decoration:underline; text-underline-offset:3px; cursor:pointer;} .lien-bouton:hover,.lien-bouton:focus-visible{opacity:.78;} /* ── Tableau de texte suivi (guide) ──────────────────────────── */ .prose .tableau{width:100%; overflow-x:auto; margin:0 0 26px;} .prose table{width:100%; border-collapse:collapse; font-size:15px;} .prose th,.prose td{text-align:left; padding:12px 14px; vertical-align:top; border-bottom:0.5px solid var(--divider);} .prose th{font-family:var(--fm); font-size:11.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--fg-3); font-weight:500; border-bottom:1px solid var(--glass-border);} .prose td{color:var(--fg-2); line-height:1.55;} .prose td strong{color:var(--fg-1);} .prose .tableau + .note{margin-top:-14px; font-size:14px; color:var(--fg-3);} /* Sommaire du guide — ce que les moteurs lisent en premier. */ .sommaire{border-radius:var(--r-lg); padding:22px 26px; margin:0 0 38px; background:var(--glass-bg); border:0.5px solid var(--glass-border);} .sommaire p{font-family:var(--fm); font-size:11.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--fg-3); margin:0 0 12px;} .sommaire ol{margin:0; padding-left:20px;} .sommaire li{margin:0 0 6px; font-size:15px; color:var(--fg-2);} .sommaire a{color:var(--fg-1); text-decoration:none;} .sommaire a:hover{color:var(--accent); text-decoration:underline;} .devis-close a{color:var(--accent); text-decoration:underline; text-underline-offset:3px;}