/* Inter variable (graisses 400 à 800), mêmes fichiers et mêmes plages que Google Fonts v20 */ @font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/inter-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Inter Fallback";src:local("Arial"),local("Arimo"),local("Liberation Sans");size-adjust:107%;ascent-override:90%;descent-override:22.4%;line-gap-override:0%} @font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} :root{--bg:#09090a;--bg2:#0f0f11;--card:#121214;--card2:#18181b;--ink:#f3f2ee;--mute:#a3a3ab;--dim:#878791;--line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.18);--acc:#7a7df6;--acc-h:#8b8ef8;--acc-t:#a8aafa;--acc-bg:rgba(122,125,246,.16);--onacc:#0a0a0b; color-scheme:dark;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)} *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:calc(90px + env(safe-area-inset-top,0px));background:var(--bg)} body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,"Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:17px;line-height:1.6;font-weight:400;overflow-x:hidden;-webkit-font-smoothing:antialiased;font-feature-settings:"lnum" 1} a{color:inherit} :focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px} .w{max-width:1240px;margin:0 auto;padding:0 28px} .n{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1} .prog{position:fixed;top:env(safe-area-inset-top,0px);left:0;height:2px;width:0;background:var(--acc);z-index:80} /* boutons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--acc);color:var(--onacc);padding:15px 28px;border-radius:10px;font:600 16px/1 Inter,"Inter Fallback",system-ui,sans-serif;text-decoration:none;border:1px solid var(--acc);min-height:52px;cursor:pointer;transition:transform .25s,background .25s,border-color .25s} @media (hover:hover){.btn:hover{background:var(--acc-h);box-shadow:0 10px 30px -12px rgba(122,125,246,.8)}} .btn .ar{transition:transform .25s}@media (hover:hover){.btn:hover .ar{transform:translateX(4px)}} .btn.g{background:transparent;color:var(--ink);border-color:var(--line2)} @media (hover:hover){.btn.g:hover{background:rgba(255,255,255,.06);border-color:var(--ink)}} .btn.s{padding:11px 20px;min-height:44px;font-size:15px} /* nav */ .nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:70;transition:background .3s,border-color .3s;border-bottom:1px solid transparent} .nav .w{display:flex;align-items:center;justify-content:space-between;height:88px;transition:height .3s;gap:16px} .nav.s{background:rgba(9,9,10,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:var(--line)} .nav.s .w{height:64px} .logo{display:inline-flex;align-items:center;color:var(--ink);text-decoration:none;min-height:44px} .logo svg{display:block;height:21px;width:auto} footer .logo{display:flex}footer .logo svg{height:24px} /* logo dans un titre : même logo que l'en-tête, à la hauteur des majuscules, posé sur la ligne de base */ .menu{display:flex;gap:34px;align-items:center} .menu a{text-decoration:none;font-size:15px;font-weight:500;color:var(--mute);transition:color .2s} @media (hover:hover){.menu a:hover{color:var(--ink)}} .menu a:not(.btn){display:inline-flex;align-items:center;min-height:44px} .menu a.btn{color:var(--onacc)} .burger{display:none;background:none;border:0;color:var(--ink);width:44px;height:44px;cursor:pointer} .burger svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round} .burger path{transition:transform .3s cubic-bezier(.2,.7,.2,1)} .burger .b1{transform-origin:12px 8px}.burger .b2{transform-origin:12px 16px} .burger[aria-expanded="true"] .b1{transform:translateY(4px) rotate(45deg)} .burger[aria-expanded="true"] .b2{transform:translateY(-4px) rotate(-45deg)} /* hero */ .hero-bg{position:relative} .hero-bg::before{content:"";position:absolute;inset:0 0 auto;height:760px;background:radial-gradient(60% 55% at 50% 0%,rgba(255,255,255,.07),transparent 70%),linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 96px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/96px 100%;-webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent);pointer-events:none} .hero{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center;padding:64px 0 112px} h1{font-size:clamp(44px,7.4vw,104px);line-height:.98;font-weight:700;letter-spacing:-.05em;margin:0 0 30px} h1 .m{color:var(--mute)} .lead{font-size:clamp(18px,1.9vw,21px);color:var(--mute);max-width:32em;margin:0 0 38px} .cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:34px} .ok{display:flex;flex-wrap:wrap;gap:10px 28px;list-style:none;margin:0;padding:0;font-size:15px;font-weight:500;color:var(--mute)} .ok li::before{content:"✓";color:var(--acc);font-weight:700;margin-right:9px} .ok b{color:var(--ink);font-weight:700} /* sections */ section{padding:120px 0;position:relative} .alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .eyebrow{display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:600;margin-bottom:22px} .eyebrow::before{content:"";width:28px;height:1px;background:var(--acc)} h2{font-size:clamp(34px,5.2vw,68px);line-height:1.03;font-weight:700;letter-spacing:-.04em;margin:0 0 22px;max-width:15em} .sub{color:var(--mute);max-width:38em;margin:0 0 64px;font-size:19px} h3{letter-spacing:-.02em} /* cartes */ .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:32px;transition:transform .35s,border-color .35s} @media (hover:hover){.card:hover{transform:translateY(-4px);border-color:var(--line2)}} .card h3{margin:0 0 10px;font-size:20px;line-height:1.3;font-weight:600} .card p{margin:0;color:var(--mute);font-size:15.5px} /* processus */ .tl{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .tl li{display:grid;grid-template-columns:110px 1fr 1.2fr;gap:24px;padding:34px 0;border-bottom:1px solid var(--line);align-items:baseline;transition:padding-left .3s} @media (hover:hover){.tl li:hover{padding-left:12px}} .tl i{font-style:normal;font-size:15px;font-weight:600;color:var(--dim);letter-spacing:.06em} .tl h3{margin:0;font-size:26px;font-weight:600;letter-spacing:-.03em} .tl p{margin:0;color:var(--mute)} /* tarifs */ .plan{display:flex;flex-direction:column;position:relative;padding:36px} .plan.hot{background:var(--card2);border-color:rgba(107,110,243,.6)} @media (hover:hover){.plan.hot:hover{border-color:var(--acc)}} .pill{position:absolute;top:-13px;left:32px;background:var(--acc);color:var(--onacc);font-size:12px;font-weight:800;letter-spacing:.1em;padding:6px 14px;border-radius:99px} .plan h3{font-size:13px;letter-spacing:.16em;margin:0 0 8px;color:var(--mute);font-weight:700} .plan>p{margin-bottom:0} .plan .pr{font-size:clamp(46px,5vw,68px);line-height:1;margin:30px 0 8px;font-weight:700;letter-spacing:-.05em;white-space:nowrap} .plan .per{font-size:14px;color:var(--dim);margin-bottom:28px} .plan ul{list-style:none;margin:0 0 32px;padding:0;flex:1;font-size:15.5px} .plan li{padding:12px 0 12px 28px;position:relative;border-top:1px solid var(--line);color:var(--mute)} .plan li::before{content:"✓";position:absolute;left:0;color:var(--acc);font-weight:700} .plan .btn{width:100%} .fine{font-size:14px;color:var(--dim);margin-top:34px;max-width:52em} /* faq */ .faq{max-width:900px} .fq{border-top:1px solid var(--line)} .fq:last-child{border-bottom:1px solid var(--line)} .fq button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;background:none;border:0;color:#cfcfd4;font:600 20px/1.4 Inter,"Inter Fallback",system-ui,sans-serif;letter-spacing:-.02em;text-align:left;padding:30px 0;cursor:pointer;transition:color .25s} .fq.open button{color:var(--ink)}@media (hover:hover){.fq button:hover{color:var(--ink)}} .fq button:focus-visible{outline-offset:6px} .fq i{width:34px;height:34px;position:relative;flex:none;border:1px solid var(--line2);border-radius:50%;transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .3s,background .3s} .fq i::before,.fq i::after{content:"";position:absolute;left:10px;right:10px;top:16px;height:1.5px;background:currentColor;transition:background .3s} .fq i::after{transform:rotate(90deg)} @media (hover:hover){.fq button:hover i{border-color:var(--ink)}} .fq.open i{transform:rotate(135deg);border-color:var(--acc);color:var(--acc)} html.js .fa>div{overflow:hidden;min-height:0;opacity:0;transform:translateY(-6px);transition:opacity .35s,transform .45s cubic-bezier(.2,.7,.2,1)} .fq.open .fa>div{opacity:1;transform:none;transition-delay:.08s} .fa p{margin:0 0 30px;color:var(--mute);max-width:44em} @media (max-width:600px){.fq button{font-size:18px;padding:24px 0;gap:16px}.fq i{width:30px;height:30px}.fq i::before,.fq i::after{left:8px;right:8px;top:14px}} /* cta final */ .final{position:relative;border:1px solid var(--line2);border-radius:18px;padding:112px 40px;text-align:center;margin-bottom:96px;background:radial-gradient(60% 80% at 50% 0%,rgba(255,255,255,.08),transparent 70%),var(--card);overflow:hidden} .final h2{margin-inline:auto;font-size:clamp(36px,6vw,80px);max-width:12em} .final .sub{margin:0 auto 42px;font-size:19px} .final .btn{font-size:17px;padding:19px 36px} .final .tel{display:block;min-height:44px;margin:30px 0 6px;font-size:clamp(26px,3.4vw,38px);font-weight:700;letter-spacing:-.04em;text-decoration:none} .final small{display:block;margin-top:18px;color:var(--dim);font-size:15px} /* footer */ footer{border-top:1px solid var(--line);padding:72px 0 48px;color:var(--mute);font-size:15px} .fg{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px} h2.eyebrow{line-height:inherit;max-width:none} @media (min-width:601px) and (max-height:860px){#cp #cfb .act{position:sticky;bottom:-36px;z-index:2;margin:0 -36px;padding:12px 36px 36px;background:var(--card);border-top:1px solid var(--line)}} #cfb>p:first-of-type{padding-right:44px} #cfb .next{margin:-4px 0 16px;font-size:13.5px;line-height:1.45;color:var(--mute)} footer .fh{margin:0 0 16px;color:var(--ink);font-size:14px;font-weight:600} footer a{display:block;text-decoration:none;padding:5px 0;transition:color .2s} @media (hover:hover){footer a:hover{color:var(--ink)}} .copy{margin-top:56px;padding-top:26px;border-top:1px solid var(--line);font-size:14px;color:var(--dim)} /* animations */ html.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*100ms)} html.js .rv.in{opacity:1;transform:none} html.js .hero .rv{opacity:1;transform:none;transition:none} @media (max-width:1000px){ .menu{position:absolute;top:100%;left:0;right:0;background:var(--bg);flex-direction:column;align-items:stretch;gap:0;padding:8px 28px 24px;border-bottom:1px solid var(--line);display:none} .menu.open{display:flex;overflow-y:auto;overscroll-behavior:contain}.menu a{padding:16px 0;border-bottom:1px solid var(--line)}.menu a.btn{margin-top:18px;border:1px solid var(--acc)} .burger{display:block} .grid3{grid-template-columns:1fr} .hero{grid-template-columns:1fr;gap:48px}.hero{padding:32px 0 88px} .fg{grid-template-columns:1fr 1fr} .tl li{grid-template-columns:70px 1fr;gap:6px 18px}.tl p{grid-column:2} section{padding:88px 0} } @media (max-width:600px){ .w{padding:0 20px} .btn{width:100%}.fg{grid-template-columns:1fr}.final{padding:72px 22px} .card{padding:26px}.plan{padding:30px} } @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}html.js .rv{opacity:1;transform:none;transition:none}*{transition-duration:.01ms!important}} /* ===== modale ===== */ dialog.mdl{border:1px solid var(--line2);background:var(--card);color:var(--ink);padding:0;border-radius:16px;width:min(1180px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:hidden;font-family:inherit} dialog.mdl::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(4px)} dialog.sm{width:min(520px,calc(100vw - 32px));padding:36px;overflow:auto} .x{position:absolute;top:14px;right:14px;z-index:5;width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:rgba(9,9,10,.7);color:var(--ink);font-size:24px;line-height:1;cursor:pointer} @media (hover:hover){.x:hover{border-color:var(--ink)}} .dm{display:grid;grid-template-columns:1.7fr .9fr;height:min(800px,calc(100dvh - 34px))} .dm-l{overflow:hidden;background:#000;position:relative} /* concepts : aperçus (images) et cadre de la fenêtre (vraie page) */ .dm-frame{position:relative;width:100%;overflow:hidden} .dm-frame iframe{border:0;display:block;transform-origin:0 0;background:#0b0b0c} .dm-l.pm iframe.full{border:0;border-radius:0} #dmo{margin-top:0;align-self:flex-start} @media (max-width:600px){#dml{height:70dvh}#dml.pm{padding-left:0;padding-right:0;padding-bottom:0}} .dm-r{padding:40px 32px 32px;overflow:auto;display:flex;flex-direction:column;gap:14px} .dm-r .tg{display:inline-block;align-self:flex-start;border:1px solid var(--line2);color:var(--mute);border-radius:99px;padding:5px 12px;font-size:12px;font-weight:500} .dm-r h3{margin:0;font-size:34px;font-weight:700;letter-spacing:-.045em;line-height:1.05} .dm-r .st2{color:var(--mute);font-weight:500;margin:-6px 0 0} .dm-r p{margin:0;color:var(--mute);font-size:16px} .dm-r ul{list-style:none;margin:6px 0 10px;padding:0} .dm-r li{padding:11px 0 11px 28px;position:relative;border-top:1px solid var(--line);font-weight:500} .dm-r li::before{content:"✓";position:absolute;left:0;color:var(--acc);font-weight:700} .dm-r .fn{font-size:13px;color:var(--dim);margin-top:-4px} /* ordinateur à écran peu haut : panneau plus compact pour que tout tienne au-dessus des boutons */ @media (min-width:761px) and (max-height:980px){.dm-r{padding:28px 28px 22px;gap:10px}.dm-r h3{font-size:30px}.dm-r ul{margin:0 0 4px}.dm-r li{padding:8px 0 8px 28px}.dm-r .more{margin-top:0}} .dm-r .act{margin-top:auto;display:grid;gap:10px} .dm-r .act{position:sticky;bottom:0;background:var(--card);padding:12px 0 4px;box-shadow:0 -14px 18px -6px var(--card)} /* phrase + boutons toujours visibles en bas du panneau */ .dm-r .dm-o{margin:0 0 2px;color:var(--ink);font-weight:500;font-size:15px} .dm-o a{color:var(--mute);font-weight:500;white-space:nowrap}@media (hover:hover){.dm-o a:hover{color:var(--ink)}} :is(dialog.sm,.ct-f) h3{margin:0 0 6px;font-size:28px;font-weight:700;letter-spacing:-.04em} :is(dialog.sm,.ct-f) p{margin:0 0 20px;color:var(--mute)} .opts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px} .chipb{border:1px solid var(--line2);background:transparent;color:var(--ink);border-radius:99px;padding:10px 16px;font:500 15px/1 Inter,"Inter Fallback",system-ui,sans-serif;cursor:pointer;min-height:44px} .chipb.on{background:var(--acc);border-color:var(--acc);color:var(--onacc);font-weight:700} :is(dialog.sm,.ct-f) label{display:block;font-size:14px;color:var(--mute);margin-bottom:8px} :is(dialog.sm,.ct-f) textarea{width:100%;background:var(--bg);border:1px solid var(--line2);border-radius:10px;color:var(--ink);padding:14px;font:400 16px/1.5 Inter,"Inter Fallback",system-ui,sans-serif;resize:vertical;margin-bottom:20px} :is(dialog.sm,.ct-f) .act{display:flex;gap:10px;flex-wrap:wrap} :is(dialog.sm,.ct-f) .act .btn{flex:1} :is(dialog.sm,.ct-f) small{display:block;margin-top:16px;color:var(--dim);font-size:14px} /* ===== dock + popup ===== */ @media (max-width:1000px){ .dm{grid-template-columns:1fr;height:auto;max-height:calc(100dvh - 34px);overflow:auto}.dm-l{height:56dvh;flex:none}.dm-r{overflow:visible;padding:28px 22px} dialog.mdl{overflow:auto}} @media (max-width:600px){ dialog.sm{padding:28px 20px}} /* ===== v3 : identité éditoriale ===== */ section[data-n]{overflow-x:clip} section[data-n]::before{content:attr(data-n);position:absolute;right:max(16px,calc(50% - 620px));top:34px;font-size:clamp(110px,16vw,230px);font-weight:800;letter-spacing:-.07em;line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.11);pointer-events:none} section .w{position:relative;z-index:1} .rail{position:fixed;left:16px;top:50%;z-index:40;display:none;flex-direction:column;align-items:center;gap:14px;transform:translateY(-50%);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)} .rail span:last-child{writing-mode:vertical-rl;transform:rotate(180deg)} .rail i{width:1px;height:56px;background:linear-gradient(var(--acc),transparent)} #rn{color:var(--ink)} @media (min-width:1380px){.rail{display:flex}} .hero{grid-template-columns:.95fr 1.05fr} h1{font-size:clamp(42px,6.4vw,92px)} /* filtres + grille */ /* modale : bascule + téléphone */ .seg{display:inline-flex;align-self:flex-start;border:1px solid var(--line2);border-radius:99px;padding:3px} .seg button{border:0;background:none;color:var(--mute);padding:8px 16px;border-radius:99px;font:500 14px/1 Inter,"Inter Fallback",system-ui,sans-serif;cursor:pointer;min-height:36px} .seg button.on{background:var(--ink);color:var(--onacc);font-weight:600} .dm-l.pm{display:flex;justify-content:center;align-items:flex-start;padding:28px 0;background:#0a0a0b} .dm-l.pm .dm-frame{display:flex;justify-content:center;align-items:flex-start} .dm-l.pm iframe{border:6px solid #2a2a2e;border-radius:34px} /* widget + popup */ .fab{position:fixed;z-index:60;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));display:inline-flex;align-items:center;gap:10px;background:var(--card2);color:var(--ink);border:1px solid var(--line2);border-radius:99px;padding:15px 24px 15px 20px;font:600 15px/1 Inter,"Inter Fallback",system-ui,sans-serif;cursor:pointer;box-shadow:0 24px 40px -22px #000;opacity:0;visibility:hidden;transform:translateY(16px);pointer-events:none;transition:opacity .4s,transform .4s,border-color .25s,visibility .4s;min-height:52px} .fab::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--acc)} .fab.on{opacity:1;visibility:visible;transform:none;pointer-events:auto} @media (hover:hover){.fab:hover{border-color:var(--acc)}} @media (max-width:1000px){.hero{grid-template-columns:1fr}} @media (max-width:600px){.fab{right:16px}} @media (prefers-reduced-motion:reduce){.fab{transition:none;animation:none}} /* ===== accroche et lisibilité ===== */ .w.hero{padding:56px 28px 80px} h1{font-size:clamp(44px,6vw,86px);margin-bottom:26px} .lead b,.sub b,.fa b{color:var(--ink);font-weight:600} .ok{color:#c4c4cb} .more{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none} .more .ar{color:var(--acc);transition:transform .25s} @media (hover:hover){.more:hover .ar{transform:translateX(4px)}} @media (max-width:1000px){.w.hero{padding:28px 28px 72px}} @media (max-width:600px){.w.hero{padding-left:20px;padding-right:20px}} /* ===== simplification ===== */ button.more{background:none;border:0;padding:0;cursor:pointer;font-family:inherit} section>.w>.more{margin-top:32px} @media (max-width:600px){section{padding:72px 0}.sub{margin-bottom:36px;font-size:17px}.tl li{padding:20px 0}.tl h3{font-size:22px} .plan .pr{margin:18px 0 4px}.plan .per{margin-bottom:16px}.plan li{padding:8px 0 8px 26px;font-size:15px}.plan ul{margin-bottom:22px} } /* ===== clarté et contact ===== */ /* navigation par ancre : apparition courte au lieu du fondu long */ html.jump .rv{transition-duration:.3s;transition-delay:0s} /* très petits écrans : le bouton principal reste visible sans défiler */ @media (max-width:360px){.w.hero{padding-top:14px}h1{margin-bottom:18px}.lead{margin-bottom:22px}} /* tarifs : badge de lancement */ #tarifs .sub{margin-bottom:26px} /* réalisations : 3 concepts sur mobile */ /* modale concept sur mobile : croix hors maquette, bouton toujours accessible */ @media (max-width:1000px){.dm-l{padding-top:68px}.dm-l.pm{padding-top:68px}.dm-r .act{position:sticky;bottom:0;background:var(--card);padding:12px 0 4px;margin-top:8px}} /* contact : formulaire */ :is(dialog.sm,.ct-f) .act .btn{flex:1 1 auto;white-space:nowrap} :is(dialog.sm,.ct-f) input:not([type=hidden]){width:100%;background:var(--bg);border:1px solid var(--line2);border-radius:10px;color:var(--ink);padding:13px 14px;font:400 16px/1.4 Inter,"Inter Fallback",system-ui,sans-serif;margin-bottom:16px} :is(dialog.sm,.ct-f) input:focus,:is(dialog.sm,.ct-f) textarea:focus{border-color:var(--acc);outline:none} .fl2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px} .cerr{color:#ff9b9b;font-size:15px;margin:14px 0 0!important} .cerr a{color:var(--ink);font-weight:600} .btn[disabled]{opacity:.6;cursor:wait;transform:none} #cok h3{margin-bottom:8px} .hint{font-size:13.5px!important;color:var(--dim)!important;margin:-6px 0 16px!important} /* formulaire sur téléphone : compact, bouton Envoyer accessible au pouce */ @media (max-width:600px){.fab{padding:12px 18px 12px 16px;min-height:44px;font-size:14px} #cp{padding:22px 18px}#cp h3{font-size:22px;margin-bottom:4px;padding-right:48px}#cp p{margin-bottom:14px} #cp .opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}#cp .chipb{padding:8px 10px;font-size:14px;line-height:1.2} #cp label{margin-bottom:6px}#cp input:not([type=hidden]){padding:11px 12px;margin-bottom:12px}#cp textarea{margin-bottom:14px;padding:11px 12px} #cp .hint{margin:-4px 0 12px!important}#cp small{margin-top:12px} #cp small .lk{display:inline-block;padding:11px 0;margin:-11px 0}} @media (max-width:359px){.fl2{grid-template-columns:1fr}} /* bouton flottant : utile seulement sur mobile (le menu affiche déjà le bouton sur ordinateur) */ @media (min-width:1001px){.fab{display:none}} /* zones tactiles d'au moins 44 px pour les liens « Voir… » */ .more{min-height:44px} /* grands numéros de section : décoratifs, ignorés par les lecteurs d'écran */ section[data-n]::before{content:attr(data-n) / ""} /* bannière de consentement */ .ck{position:fixed;z-index:75;left:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));width:min(440px,calc(100vw - 40px));background:var(--card2);border:1px solid var(--line2);border-radius:14px;padding:20px 22px;box-shadow:0 30px 60px -30px #000;display:grid;gap:14px} .ck[hidden]{display:none} .ck p{margin:0;font-size:14.5px;color:var(--mute)} .ck div{display:flex;gap:10px} .ck .btn{flex:1} @media (max-width:600px){.ck{left:16px;right:16px;width:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px))}} /* mentions légales */ .lk{background:none;border:0;padding:0;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer} @media (hover:hover){.lk:hover{color:var(--ink)}} footer .copy a.lk{display:inline;padding:0} #ml h4{margin:22px 0 4px;font-size:15px;font-weight:600;color:var(--ink)} #ml p{margin:0;font-size:15px} /* finitions : retours à la ligne équilibrés, relief discret des cartes, halo des boutons principaux */ h1,h2,h3,.final h2{text-wrap:balance} .lead,.sub,.care p,.fa p,.card p{text-wrap:pretty} .card,.care,.final{box-shadow:inset 0 1px 0 rgba(255,255,255,.04)} .btn:not(.g){box-shadow:0 10px 28px -14px rgba(107,110,243,.75)} @media (hover:hover){.btn:not(.g):hover{box-shadow:0 14px 34px -12px rgba(107,110,243,.85)}} .plan.hot{background:radial-gradient(120% 60% at 50% 0%,rgba(107,110,243,.10),transparent 60%),var(--card2)} /* offres : niveau, besoin client, détail repliable (h4, pas h3 : le suivi lit le premier h3 de la carte) */ .stp{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--acc-h);margin-bottom:12px} .plan .need{margin:2px 0 8px;color:var(--ink);font-size:17px;font-weight:600;line-height:1.4;letter-spacing:-.01em;text-wrap:balance;overflow-wrap:break-word} /* ordinateur : prix, listes et boutons alignés d'une carte à l'autre */ @supports (grid-template-rows:subgrid){@media (min-width:1001px){ .grid3.n{grid-template-rows:repeat(9,auto);column-gap:16px;row-gap:0} .grid3.n>.plan{display:grid;grid-template-rows:subgrid;grid-row:span 9;align-content:start} .grid3.n>.plan>ul{align-self:start} .grid3.n>.plan>.btn{align-self:end}}} .plan .det{margin:-14px 0 28px;border-bottom:1px solid var(--line)} .det summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:8px 0;cursor:pointer;font-size:15px;font-weight:600;color:var(--ink)} .det summary::-webkit-details-marker{display:none} .det summary::after{content:"+";color:var(--acc);font-size:22px;font-weight:400;line-height:1;transition:transform .3s} .det[open] summary::after{transform:rotate(45deg)} .det-b{padding:4px 0 18px} .det h4{margin:14px 0 2px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:700} .plan .det ul{margin:0;flex:none;font-size:14.5px} .plan .det li{padding:7px 0 7px 26px} .det p{margin:12px 0 0;font-size:13.5px;color:var(--dim)} @media (prefers-reduced-motion:reduce){.det summary::after{transition:none}} /* après la création : services complémentaires, suivi, infos de paiement (aéré, détails au clic) */ /* suivi compact (le détail s'ouvre au clic) */ /* services : 4 cartes{display:flex;gap:12px;margin-top:44px;height:350px} .care h3{margin:0 0 10px;font-size:clamp(24px,2.6vw,30px);font-weight:700;letter-spacing:-.03em} .care{border:1px solid var(--line2);border-radius:14px;padding:30px 32px;background:linear-gradient(135deg,rgba(107,110,243,.07),transparent 55%),var(--card)} .care-h{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 48px} .care p{margin:0;color:var(--mute);max-width:36em} #suivi,.plan{scroll-margin-top:110px} .plus{display:flex;align-items:center;gap:16px;margin:40px 0 16px;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)} .plus::before,.plus::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line2))} .plus::after{background:linear-gradient(90deg,var(--line2),transparent)} .plus span::before{content:"+";margin-right:10px;color:var(--acc);font-size:15px} @media (max-width:1000px){.plus{margin:28px 0 14px}} @media (max-width:360px){.plus{font-size:11.5px;letter-spacing:.08em;gap:10px}.grid3.n>.plan{padding:24px 20px}.plan .btn{padding:15px 12px;white-space:nowrap}} .care-n{display:block;margin:4px 0 12px;font-size:clamp(36px,4vw,48px);font-weight:700;letter-spacing:-.05em;line-height:1} .care-n small{font-size:.4em;color:var(--mute);font-weight:500;letter-spacing:0} .care-t{flex:none} .care .care-b{flex:1 1 100%;color:var(--ink);font-weight:500;font-size:17px} .btn.care-t{min-height:44px} .care-t .ar{display:inline-block;transition:transform .35s var(--ease,ease)} .care-t[aria-expanded="true"] .ar{transform:rotate(-90deg)} html.js .care-x>div{overflow:hidden;min-height:0;opacity:0;transition:opacity .35s} .care.open .care-x>div{opacity:1;transition-delay:.08s} .care-in{margin-top:26px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 32px} .care-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 28px;flex:1 1 100%} .care-l li{display:grid;grid-template-columns:18px 1fr;gap:2px 8px;font-weight:600;color:var(--ink)} .care-l li::before{content:"✓";grid-row:span 2;color:var(--acc)} .care-l span{grid-column:2;font-size:14px;font-weight:400;color:var(--mute)} .care .care-c{font-size:14px;color:var(--dim)} @media (max-width:1000px){.care-h{flex-direction:column;align-items:flex-start}.care-l{grid-template-columns:1fr 1fr}} @media (max-width:600px){.care-l{gap:10px}.care-in{margin-top:20px;padding-top:20px;gap:16px}.care{padding:24px 20px}.care p{font-size:16px}.btn.care-t{width:auto}.care-l{grid-template-columns:1fr}.care-in .btn{width:100%}} @media (prefers-reduced-motion:reduce){.care-x,.care-x>div{transition:none}} .det .det-in{margin:6px 0 0;color:var(--mute);font-weight:600;font-size:13.5px} /* petits écrans peu hauts (iPhone SE…) : le bouton principal visible sans défiler */ @media (max-width:420px) and (max-height:700px){.w.hero{padding-top:12px}h1{font-size:38px;margin-bottom:16px}.lead{font-size:17px;margin-bottom:18px}} /* formulaire sur écrans peu hauts : bouton Envoyer visible */ @media (max-width:600px) and (max-height:700px){#cp{padding:18px 16px}#cp h3{font-size:20px}#cp>form>#cfb>p:first-of-type{margin-bottom:10px;font-size:15px}#cp .opts{margin-bottom:12px}#cp .chipb{min-height:40px;padding:6px 10px}#cp textarea{margin-bottom:12px}} /* ===================== REFONTE « STORYTELLING » ===================== Impact → curiosité → démonstration → méthode → offres. Effets : transformations et opacité uniquement (GPU), IntersectionObserver et une seule boucle de défilement ; rien ne bloque le scroll ; mouvements réduits respectés. */ :root{--ease:cubic-bezier(.2,.7,.2,1)} /* titres de section : révélation par masque + montée */ /* (le masque ne démarre qu'à l'apparition : un clip-path initial empêcherait la détection par IntersectionObserver) */ html.js h2.rv.in{animation:mask 1.1s var(--ease) both} @keyframes mask{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(-20% -10% -40% -10%)}} /* navigation : lien de la section en cours */ .menu a:not(.btn){position:relative} .menu a.on{color:var(--ink)} @media (min-width:1001px){.menu a.on::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;border-radius:2px;background:var(--acc)}} /* 1. héro : peu d'éléments, un visuel en profondeur */ .hero-bg{overflow:hidden} .w.hero{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(32px,5vw,72px);align-items:center;min-height:calc(100svh - 88px);padding:36px 28px 120px} .kick{display:flex;align-items:center;gap:12px;margin:0 0 26px;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)} .kick::before{content:"";flex:none;width:28px;height:1px;background:var(--acc)} .hero h1{font-size:clamp(44px,5.7vw,86px);margin-bottom:24px} .hero .lead{max-width:29em;margin-bottom:34px} @keyframes skin{from{opacity:0;transform:translateY(40px) scale(.97)}} @keyframes skin1{from{opacity:0;transform:translateY(40px) scale(.97)}to{opacity:.5}} .cue{position:absolute;left:50%;bottom:28px;translate:-50% 0;display:grid;place-items:center;width:44px;height:44px} .cue i{width:1px;height:38px;background:linear-gradient(var(--acc),transparent);animation:cue 2.6s ease-in-out infinite;transform-origin:top} @keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} @media (max-width:1000px){.w.hero{grid-template-columns:1fr;min-height:0;padding:28px 28px 90px;gap:44px}.cue{display:none}} @media (max-width:600px){.w.hero{padding:22px 20px 70px}.kick{font-size:11.5px;margin-bottom:20px}} /* 2. le point de départ : manifeste dont les mots s'allument au défilement */ #histoire{padding:150px 0 120px} .manif{font-size:clamp(30px,4.6vw,64px);line-height:1.12;letter-spacing:-.035em;font-weight:600;max-width:17em;margin:0 0 90px} .manif span{color:rgba(243,242,238,.16);transition:color .5s ease} .manif span.lit{color:var(--ink)} @media (max-width:860px){#histoire{padding:100px 0 80px}.manif{margin-bottom:56px}} /* 3. vitrine des concepts */ #exemples{padding-bottom:30px} #exemples .sub{margin-bottom:10px} .sc-style{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)} /* 4. méthode : titre fixe à gauche, ligne de progression à droite */ .tl{position:relative;list-style:none;margin:0;padding:0;border:0;--p:0} .tl::before,.tl::after{content:"";position:absolute;left:21px;top:22px;bottom:60px;width:1px;background:var(--line2)} .tl::after{background:var(--acc);transform-origin:top;transform:scaleY(var(--p))} .tl li{display:grid;grid-template-columns:44px 1fr;gap:24px;padding:0 0 52px;border:0;align-items:start} @media (hover:hover){.tl li:hover{padding-left:0}} .tl li i{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:var(--bg);font-style:normal;font-size:13px;font-weight:600;color:var(--dim);transition:border-color .4s,color .4s,background .4s} .tl li.on i{border-color:var(--acc);color:var(--ink);background:#15152b} .tl h3{font-size:24px;margin:8px 0 6px} .tl p{grid-column:auto;margin:0;color:var(--mute)} .tl li h3,.tl li p{opacity:.4;transition:opacity .5s ease} .tl li.on h3,.tl li.on p{opacity:1} @media (max-width:1000px){html{scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}} @media (prefers-reduced-motion:reduce){.tl li h3,.tl li p{opacity:1}} @media (max-width:600px){.tl li{gap:18px;padding-bottom:40px}.tl h3{font-size:21px}} /* mouvements réduits : tout visible, sans animation */ @media (prefers-reduced-motion:reduce){html.js h2.rv.in{animation:none}.cue i{animation:none}.manif span,.tl li i,.tl li h3,.tl li p{transition:none}} /* téléphone : pied de page compact, liens faciles à toucher, envoi du formulaire toujours visible */ @media (pointer:coarse),(max-width:600px){footer a{padding:12px 0}footer .copy .lk,footer .copy a.lk{display:inline-block;padding:12px 4px}} @media (max-width:600px){ .fg{grid-template-columns:1fr 1fr;gap:32px 20px}.fg>div:first-child,.fg>div:last-child{grid-column:1/-1} footer{padding:56px 0 36px}.copy{margin-top:36px} .kick{font-size:12px} #cp #cfb .act{position:sticky;bottom:-22px;z-index:2;margin:0 -18px;padding:12px 18px 22px;background:var(--card);border-top:1px solid var(--line)}} @media (max-width:600px) and (max-height:700px){#cp #cfb .act{bottom:-18px;margin:0 -16px;padding:12px 16px 18px}} #cp .opts{grid-template-columns:repeat(2,minmax(0,1fr))}#cp .opts .chipb{min-width:0}#cp .opts .chipb:last-child:nth-child(odd){grid-column:1/-1} #cp .ctel{margin:12px 0 0;font-size:15px;color:var(--mute)} #cp .ctel a{display:inline-block;padding:10px 2px;color:var(--ink);font-weight:600} @media (max-width:600px){.final .btn{font-size:16px;padding:17px 16px;white-space:nowrap}} @media (max-width:360px){.final{padding:64px 16px}} /* logo LIARO dans un titre : même hauteur que les capitales */ /* offres sur téléphone : onglets + cartes à faire glisser */ .ptabs{display:none} @media (max-width:1000px){ .ptabs{display:grid;max-width:560px;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;margin:0 0 6px;border:1px solid var(--line2);border-radius:14px;background:var(--card)} .ptabs button{display:grid;place-content:center;gap:3px;min-height:56px;padding:6px 4px;border:0;border-radius:10px;background:none;color:var(--mute);font:600 13px/1.15 Inter,"Inter Fallback",system-ui,sans-serif;cursor:pointer;transition:background .3s,color .3s,box-shadow .3s} .ptabs .rec{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acc-t)} .ptabs button b{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.02em} .ptabs button[aria-pressed="true"]{background:var(--card2);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(107,110,243,.55)} .grid3.n{display:flex;align-items:stretch;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -28px;padding:20px 28px 8px;scroll-padding:0 28px;scrollbar-width:none;overscroll-behavior-x:contain} .grid3.n::-webkit-scrollbar{display:none} .grid3.n>.plan{flex:0 0 min(calc(100% - 24px),440px);scroll-snap-align:start;scroll-snap-stop:always} html.js .grid3.n>.plan.rv{opacity:1;transform:none} @media (hover:hover){.card:hover{transform:none}}} @media (max-width:600px){.grid3.n{margin:0 -20px;padding:20px 20px 8px;scroll-padding:0 20px}} @media (prefers-reduced-motion:reduce){.ptabs button{transition:none}} /* fenêtre d'accueil : orientée vers les offres{position:fixed;z-index:76;right:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));width:min(360px,calc(100vw - 32px));background:var(--card2);border:1px solid var(--line2);border-radius:16px;padding:24px 24px 22px;box-shadow:0 30px 60px -30px #000;opacity:0;transform:translateY(14px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)} /* ===================== MOBILE RÉEL (téléphones, y compris iPhone anciens) ===================== Accordéons animés en hauteur par JS (fiables sur tous les navigateurs, sans l'astuce grid 0fr/1fr), fenêtre des maquettes en plein écran sur téléphone, solutions de repli pour dvh/svh, overflow:clip et aspect-ratio. */ a,button,summary,label{touch-action:manipulation;-webkit-tap-highlight-color:transparent} /* accordéons : FAQ, cartes de services, suivi. Sans JS, tout reste ouvert. */ html.js .fa,html.js .care-x{display:block;height:0;overflow:hidden;transition:height .42s cubic-bezier(.2,.7,.2,1)} html.js .fa>div,html.js .care-x>div{overflow:visible} @media (prefers-reduced-motion:reduce){html.js .fa,html.js .care-x{transition:none}} /* fond de page bloqué quand une fenêtre est ouverte (iOS fait défiler la page derrière sinon) */ /* verrou de défilement : seulement sur html. Le body garde overflow visible pendant le verrou, sinon il devient le conteneur de défilement et l'en-tête collant (sticky) repart en haut de page : le menu s'ouvrait hors de l'écran quand on avait fait défiler la page (14/10/2026) */ html.lock,html.mopen{overflow:hidden}html.lock body,html.mopen body{overflow:visible} /* la barre de défilement garde sa place : rien ne bouge quand une fenêtre s'ouvre (ordinateur) */ html{scrollbar-gutter:stable} /* navigateurs sans (iOS < 15.4) : fenêtre affichée par le script de secours */ dialog.pf{display:none} dialog.pf[open]{display:block;position:fixed;left:0;right:0;top:50%;transform:translateY(-50%);margin:0 auto;z-index:200;box-shadow:0 0 0 100vmax rgba(0,0,0,.78)} /* hauteurs : repli en vh si dvh / svh ne sont pas reconnus */ dialog.mdl{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)} .dm{height:min(800px,calc(100vh - 34px));height:min(800px,calc(100dvh - 34px))} @supports not (overflow-x:clip){@media (max-width:1000px){section[data-n],.hero-bg{overflow:hidden}}} /* menu mobile : panneau lisible, défilable si l'écran est bas, icône croix nette sur Safari */ .burger{position:relative;z-index:2} @media (max-width:1000px){ .menu{max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));box-shadow:0 30px 60px -20px rgba(0,0,0,.8)} .menu a:not(.btn){min-height:52px;padding:14px 0;font-size:17px;color:var(--ink)} .menu a.on::after{display:none} html.mopen body{cursor:pointer}/* iOS : nécessaire pour que toucher le fond déclenche un clic */ html.mopen body::after{content:"";position:fixed;left:0;top:0;right:0;bottom:0;z-index:65;background:rgba(0,0,0,.6)}} /* téléphone : en-tête sans flou (plus fluide), opaque */ @media (max-width:760px){.nav.s{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(9,9,10,.96)}} /* ===== fenêtre des maquettes sur téléphone : plein écran, aperçu au centre, commandes en bas ===== */ @media (max-width:760px){ dialog#dm{width:100%;max-width:100%;height:100vh;height:100dvh;max-height:none;max-height:100dvh;margin:0;border:0;border-radius:0;top:0;left:0;transform:none;box-shadow:none} #dm .dm{display:flex;flex-direction:column;height:100%;max-height:none;overflow:hidden} #dm #dml,#dm #dml.pm{flex:1 1 auto;min-height:0;height:auto;padding:calc(60px + env(safe-area-inset-top,0px)) 0 0;display:block;background:#0a0a0b} #dm #dml::before{content:"Concept de démonstration";position:absolute;left:16px;top:calc(20px + env(safe-area-inset-top,0px));font-size:13px;font-weight:500;color:var(--mute)} #dm #dml.pm .dm-frame{display:block} #dm #dml.pm iframe{border:0;border-radius:0} #dm .dm-r{flex:none;overflow:visible;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line2);background:var(--card)} #dm .dm-r .tg,#dm #dmd,#dm #dmf,#dm #dmo,#dm .dm-r .fn,#dm .dm-r .dm-o{display:none} #dm #dmt{grid-column:1;grid-row:1;font-size:20px;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #dm #dms{grid-column:1;grid-row:2;margin:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #dm .seg{grid-column:2;grid-row:1/3;margin:0} #dm .seg button{min-height:40px;padding:0 12px;font-size:13px} #dm .dm-r .act{grid-column:1/-1;grid-row:3;position:static;display:grid;grid-template-columns:1.35fr 1fr;gap:8px;margin:10px 0 0;padding:0;background:none} #dm .dm-r .act .btn{min-height:48px;padding:12px 10px;font-size:15px;white-space:nowrap} #dm .x{top:calc(8px + env(safe-area-inset-top,0px));right:10px;background:rgba(9,9,10,.88);border-color:rgba(255,255,255,.25);box-shadow:0 6px 18px rgba(0,0,0,.5)} #dm .x::after{content:"";position:absolute;inset:-6px}} @media (max-width:350px){#dm .dm-r .act{grid-template-columns:1fr 1fr}#dm .dm-r .act .btn{font-size:14px;padding:12px 6px}} /* petit téléphone : nom et style du concept lisibles en entier, choix Ordinateur/Téléphone sur sa propre ligne (44 px) */ @media (max-width:400px){#dm .dm-r{grid-template-columns:minmax(0,1fr)}#dm .seg{grid-column:1;grid-row:3;display:grid;grid-template-columns:1fr 1fr;margin-top:8px}#dm .seg button{min-height:44px}#dm .dm-r .act{grid-row:4}} /* ===================== FINITION ===================== Réassurance au moment du choix, petits écrans, rythme vertical sur téléphone, système de rayons unifié. */ /* réassurance juste sous les forfaits */ .assure{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 32px;margin:30px 0 0;padding:0;font-size:14.5px;font-weight:500;color:var(--mute)} .assure li{display:flex;align-items:center;gap:9px} .assure li::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;background:rgba(107,110,243,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.9' fill='none' stroke='%238b8df7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat} .assure+.plus,.help+.plus{margin-top:44px} .help{margin:18px 0 0;text-align:center;font-size:15px;color:var(--mute)} .help a{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:-12px 0 -12px 6px;color:var(--ink);font-weight:600;text-decoration:none} .help a .ar{color:var(--acc);transition:transform .25s}@media (hover:hover){.help a:hover .ar{transform:translateX(4px)}} @media (max-width:1000px){.help{text-align:left;margin-top:16px}.help a{margin-left:0}.help+.plus{margin-top:32px}} @media (max-width:1000px){.assure{flex-direction:column;align-items:flex-start;gap:10px;margin-top:20px}.assure+.plus{margin-top:32px}} /* carte recommandée : même relief sur ordinateur et téléphone */ .plan.hot .pill{box-shadow:0 8px 24px -10px rgba(107,110,243,.8)} /* rayons : un seul système (cartes 14 px, petites pièces 10 px{border-radius:14px} .final{border-radius:16px} /* haut de page : sur les téléphones à écran bas (iPhone SE…), le bouton principal reste visible dès l'arrivée */ @media (max-width:600px) and (max-height:700px){ .w.hero{padding-top:12px} .kick{margin-bottom:12px} .hero h1{font-size:38px;margin-bottom:14px} .hero .lead{font-size:16px;line-height:1.55;margin-bottom:20px} .hero .cta .btn{min-height:48px;padding-top:13px;padding-bottom:13px}} /* téléphone : rythme plus serré avant la première preuve, sans rien retirer */ @media (max-width:600px){ #histoire{padding:80px 0 64px} .manif{margin-bottom:44px} .tl li{padding-bottom:30px} } /* accessibilité : lien d’évitement, visible seulement au clavier */ #nl-badge-frame{display:none!important} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .skip{position:fixed;left:16px;top:12px;z-index:300;padding:10px 16px;border-radius:10px;background:var(--acc);color:var(--onacc);font-weight:600;text-decoration:none;transform:translateY(-150%);transition:transform .25s} .skip:focus{transform:none} /* retour tactile : léger enfoncement au toucher / clic, identique pour tous les éléments interactifs */ .btn,.chipb,.ptabs button,.seg button,.x,.care-t,.fab{transition-property:transform,background,border-color,color,box-shadow,opacity,visibility} .btn:active,.chipb:active,.ptabs button:active,.seg button:active,.x:active,.fab:active{transform:scale(.97)} .fq button:active i{transform:scale(.92)} .fq.open button:active i{transform:rotate(135deg) scale(.92)} /* téléphone : le logo est juste au-dessus, le libellé du héro tient sur une ligne */ /* aperçu du budget après les concepts : une ligne, pas un bloc */ .budget{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;margin:36px auto 0;padding:16px 22px;max-width:max-content;border:1px solid var(--line2);border-radius:99px;background:rgba(255,255,255,.02);font-size:15px;color:var(--mute);text-align:center} .budget b{color:var(--ink);font-weight:600} .budget a{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:-12px 0;color:var(--ink);font-weight:600;text-decoration:none} @media (hover:hover){.budget a:hover .ar{transform:translateY(3px)}} .budget .ar{display:inline-block;color:var(--acc);transition:transform .25s} @media (max-width:600px){.budget{border-radius:16px;margin-top:28px;padding:14px 18px;font-size:14.5px;max-width:none}} /* téléphone : manifeste et piliers plus compacts (tout reste visible) */ @media (max-width:600px){ .manif{font-size:28px;margin-bottom:36px} } /* téléphone : méthode en ligne de temps compacte (même contenu, deux fois moins haute) */ @media (max-width:600px){ .tl li{grid-template-columns:34px 1fr;gap:14px;padding-bottom:20px} .tl li i{width:34px;height:34px;font-size:12px} .tl::before,.tl::after{left:16px;top:17px;bottom:40px} .tl h3{font-size:18px;margin:5px 0 2px} .tl p{font-size:15px;line-height:1.5}} /* ===================== SITE MULTIPAGE (13/10/2026) ===================== Pages : accueil, création, offres, visibilité, FAQ, contact. Composants communs ci-dessous. */ /* menu : page en cours */ .menu a[aria-current="page"]{color:var(--ink)} .menu a[aria-current="page"]:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;border-radius:2px;background:var(--acc)} @media (max-width:1000px){.menu a[aria-current="page"]:not(.btn)::after{display:none}.menu a[aria-current="page"]:not(.btn){color:var(--acc-t)}} /* haut des pages intérieures */ .phero{position:relative;padding:168px 0 72px;overflow:hidden} .phero::before{content:"";position:absolute;inset:0 0 auto;height:520px;background:radial-gradient(50% 60% at 30% 0%,rgba(107,110,243,.13),transparent 70%),linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 96px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/96px 100%;-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent);pointer-events:none} .phero .w{position:relative} .phero h1{font-size:clamp(40px,6.2vw,88px);max-width:13em} .phero h1 .m{color:var(--mute)} .phero .lead{max-width:36em} .phero .lead a{color:var(--ink)} .phero-s{padding-bottom:28px} @media (max-width:760px){.phero{padding:128px 0 48px}.phero h1{font-size:clamp(36px,10vw,52px)}} /* portes d'entrée vers chaque page (accueil) */ /* trois étapes (accueil, visibilité) */ .steps3{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)} .steps3 li{padding:32px 32px 8px 0} .steps3 b{display:block;font-size:13px;font-weight:600;color:var(--acc);margin-bottom:14px} .steps3 h3{margin:0 0 8px;font-size:23px;letter-spacing:-.03em} .steps3 p{margin:0;color:var(--mute)} @media (max-width:760px){.steps3{grid-template-columns:1fr;margin-top:36px}.steps3 li{padding:24px 0 4px;border-bottom:1px solid var(--line)}} /* deux colonnes : texte + liste */ .split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,96px);align-items:center} .split .sub{margin-bottom:32px} @media (max-width:1000px){.split{grid-template-columns:1fr}} .chk{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .chk li{position:relative;padding:20px 0 20px 36px;border-bottom:1px solid var(--line);color:var(--mute);font-size:17px} .chk li::before{content:"✓";position:absolute;left:4px;top:20px;color:var(--acc);font-weight:700} .chk b{color:var(--ink);font-weight:600} /* méthode (création) */ /* identité visuelle */ .note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:28px;padding:24px 28px;border:1px solid var(--line2);border-radius:14px;background:rgba(107,110,243,.06)} .note p{margin:0;max-width:44em;color:var(--mute)}.note b{color:var(--ink)} @media (max-width:600px){.note{padding:22px 20px}} .founder{margin:96px auto 40px;text-align:center;color:var(--dim);font-size:15px;max-width:36em} /* ===== fenêtre de navigateur commune (vitrine, galerie, fenêtre des concepts) : même format pour tous les concepts ===== */ .bw{overflow:hidden;border-radius:12px;border:1px solid var(--line2);background:#111114;box-shadow:0 50px 90px -48px #000} .bw-bar{display:flex;align-items:center;gap:7px;height:30px;padding:0 12px;background:#17171a;border-bottom:1px solid var(--line)} .bw-bar i{width:9px;height:9px;border-radius:50%;background:#3a3a40;flex:none} .bw-bar span{margin:0 auto;padding:3px 14px;border-radius:6px;background:#0d0d10;color:var(--dim);font-size:11px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%;transform:translateX(-14px)} .bw-v{aspect-ratio:16/10;background:#000;overflow:hidden} .bw-v img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center} /* vitrine (accueil, ordinateur) : même fenêtre, téléphone toujours au même endroit, même ombre */ /* galerie (création) : 4 + 3 fenêtres centrées */ /* fenêtre d'un concept, vue ordinateur : fenêtre de navigateur 16:10 centrée (et non plus une page étirée en hauteur) */ .dm-l:not(.pm){display:flex;align-items:center;justify-content:center;padding:32px;background:radial-gradient(70% 60% at 50% 40%,rgba(107,110,243,.10),transparent 70%),#0a0a0b} .dm-l:not(.pm) .dm-frame{flex:none;border-radius:12px;border:1px solid var(--line2);background:#000;box-shadow:0 40px 80px -40px #000} .dm-l .dm-bar{display:flex} .dm-l.pm .dm-bar{display:none} .dm-r{gap:12px} @media (max-height:820px) and (min-width:761px){.dm-r{padding:28px 28px 24px;gap:10px}.dm-r h3{font-size:28px}#dmf li{padding-top:8px;padding-bottom:8px;font-size:15px}} @media (max-width:1000px) and (min-width:761px){.dm-l:not(.pm){padding:72px 20px 20px}} @media (max-width:760px){#dm #dml:not(.pm){display:flex;align-items:center;justify-content:center;padding:calc(60px + env(safe-area-inset-top,0px)) 12px 12px}} /* ===== offre de lancement ===== */ .lanc-s{padding:0 0 24px} body:not(.offre-on) .lanc-s{display:none} .p-offres .lanc-s{padding:72px 0 8px} .lanc-v{display:none;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none}@media (hover:hover){.lanc-v:hover{color:var(--acc-t)}} .p-accueil .lanc-v{display:inline-block} .lanc{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(28px,4vw,52px);border:1px solid rgba(107,110,243,.45);border-radius:20px;background:radial-gradient(70% 120% at 0% 0%,rgba(107,110,243,.16),transparent 60%),var(--card)} .lanc-k{margin:0 0 14px;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--acc-t)} .lanc h2{font-size:clamp(30px,3.8vw,50px);margin:0 0 16px} .lanc-t>p{color:var(--mute);margin:0 0 24px;max-width:34em} .lanc-a{display:flex;flex-direction:column;gap:16px} .lanc-c{margin:0;font-size:17px;color:var(--mute)} .lanc-c b{display:block;font-size:64px;line-height:1;letter-spacing:-.05em;color:var(--ink)} .lanc-f{margin:0;font-size:13px;color:var(--dim)} .lanc-f a{color:var(--mute)} @media (max-width:900px){.lanc{grid-template-columns:1fr}.lanc-c b{font-size:48px;display:inline;margin-right:6px}} /* prix des forfaits : prix de lancement + prix normal barré ; à la fin de l'offre, le prix normal seul */ .pr-n{text-decoration:none} body:not(.offre-on) .pr-l{display:none} body:not(.offre-on) .pr-n .vh{display:none} .offre-on .plan .pr .pr-n{margin-left:12px;font-size:.36em;font-weight:500;letter-spacing:0;color:var(--dim);text-decoration:line-through;vertical-align:middle} .offre-on .plan .per .pr-l{color:var(--acc-t);font-weight:600} /* ===== comparatif ===== */ .cmp-h{display:none;margin:0 0 10px;font-size:13px;color:var(--dim)} @media (max-width:760px){.cmp-h{display:block}} .cmp-l{display:flex;flex-wrap:wrap;gap:10px 24px;margin:0 0 18px;font-size:14px;color:var(--mute)} .cmp-l span{display:inline-flex;align-items:center;gap:8px} .cmp-w{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--card);-webkit-overflow-scrolling:touch} .cmp{width:100%;min-width:680px;border-collapse:collapse;font-size:15px} .cmp th,.cmp td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle} .cmp thead th{background:#16161a;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)} .cmp thead th:not(:first-child),.cmp td{text-align:center;width:17%} .cmp tbody th{font-weight:500;color:#d6d6db} .cmp-g th{padding-top:26px;font-size:12.5px;font-weight:700!important;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-t)!important;background:rgba(107,110,243,.04)} .cmp td small{display:block;margin-top:3px;font-size:12px;color:var(--mute)} .cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0} i.ok,i.op,i.dv,i.no{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font-style:normal;font-weight:700;font-size:13px} i.ok{background:rgba(107,110,243,.18);color:var(--acc-t)} i.op{border:1px solid rgba(107,110,243,.6);color:var(--acc-t)} i.dv{border:1px dashed var(--line2);color:var(--mute)} i.no{color:#6b6b73} @media (max-width:760px){.cmp{font-size:14px}.cmp th,.cmp td{padding:12px}.cmp tbody th{position:sticky;left:0;z-index:1;background:var(--card);min-width:140px;max-width:150px;box-shadow:1px 0 0 var(--line)}.cmp thead th:first-child{position:sticky;left:0;z-index:2}} .ext{margin-top:28px;padding:26px 28px;border:1px solid var(--line);border-radius:16px} .ext h3{margin:0 0 12px;font-size:18px;letter-spacing:-.02em} .ext ul{margin:0 0 12px;padding-left:20px;color:var(--mute)}.ext li{margin:6px 0}.ext b{color:var(--ink);font-weight:600} .ext p{margin:0;font-size:14px;color:var(--dim)} /* options à la carte */ .opt-g{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .opt{display:flex;flex-direction:column;gap:8px;padding:26px;border:1px solid var(--line);border-radius:16px;background:var(--card)} .opt h3{margin:0;font-size:19px;letter-spacing:-.02em} .opt p{margin:0;flex:1;color:var(--mute);font-size:15px} .opt b{margin-top:8px;font-size:22px;letter-spacing:-.03em} .opt small{font-size:13px;color:var(--dim)} @media (max-width:1000px){.opt-g{grid-template-columns:1fr 1fr}} @media (max-width:600px){.opt-g{grid-template-columns:1fr}} #suivi-s{padding-top:72px} /* ===== visibilité ===== */ .money{padding:32px;border:1px solid var(--line2);border-radius:16px;background:var(--card)} .money h3{margin:0 0 18px;font-size:20px} .money dl{margin:0} .money dt{font-weight:600;margin-top:14px} .money dd{margin:4px 0 0;color:var(--mute)} .money dd b{color:var(--ink)} .money-n{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--dim)} /* ===== FAQ par thèmes ===== */ .faq-h{font-size:clamp(22px,2.4vw,28px);margin:64px 0 8px;letter-spacing:-.03em;max-width:none} .faq-w .faq-h:first-child{margin-top:0} .faq-w .faq{margin-top:12px} #faq{padding-top:24px} /* ===== contact ===== */ .ct{padding-top:24px} .ct-g>*{min-width:0} .ct-g{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,72px);align-items:start} .ct-f{padding:36px;border:1px solid var(--line2);border-radius:18px;background:var(--card)} .ct-a h2{font-size:26px;margin:8px 0 18px;letter-spacing:-.03em} .ct-s{margin:0 0 32px;padding:0;list-style:none;counter-reset:s} .ct-s li{position:relative;padding:16px 0 16px 44px;border-bottom:1px solid var(--line);color:var(--mute);counter-increment:s} .ct-s li::before{content:counter(s);position:absolute;left:0;top:14px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(107,110,243,.6);color:var(--acc-t);font-size:13px;font-weight:600} .ct-s b{color:var(--ink)} .ct-t p{margin:0 0 4px;color:var(--mute)} .ct-t .tel{display:inline-block;font-size:30px;font-weight:700;letter-spacing:-.03em;color:var(--ink);text-decoration:none;margin-bottom:4px} .ct-t small{display:block;color:var(--dim)} @media (max-width:900px){.ct-g{grid-template-columns:1fr}.ct-f{padding:26px 20px}} .p-contact .fab{display:none} /* relecture du 13/10 : comparatif lisible sur téléphone, contact plus direct, options compactes */ @media (max-width:760px){.cmp{table-layout:fixed;min-width:0}.cmp th,.cmp td{padding:11px 6px}.cmp tbody th,.cmp thead th:first-child{position:static;box-shadow:none;padding-left:12px}.cmp thead th:first-child{width:36%}.cmp tbody th{min-width:0;max-width:none;font-size:13px;line-height:1.35}.cmp thead th:not(:first-child){width:auto;font-size:10.5px;letter-spacing:0;text-transform:none;font-weight:700;hyphens:manual;overflow-wrap:anywhere}.cmp td small{font-size:12px;line-height:1.3;overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}.cmp tbody th{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}.cmp-h{display:none!important} .opt-g{grid-template-columns:1fr 1fr;gap:8px}.opt{padding:16px}.opt p{display:none}.opt h3{font-size:16px}.opt b{font-size:19px}} .p-contact .phero{padding:112px 0 12px} .p-contact #cf .ctel{display:none} .ct-who{margin:20px 0 0;font-size:14px;color:var(--dim)} /* relecture QA du 13/10 */ body:not(.offre-on) .lanc-o{display:none} @media (max-width:600px){.cmp-w{overflow:visible}.cmp thead th{position:sticky;top:64px;z-index:2;background:#16161a}} /* sans JavaScript : menu affiché en ligne sur téléphone, pas d'onglets inactifs ni de vitrine vide */ html:not(.js) .burger,html:not(.js) .ptabs{display:none} @media (max-width:1000px){html:not(.js) .nav .w{flex-wrap:wrap;row-gap:4px}html:not(.js) .menu{display:flex;position:static;flex-direction:row;flex-wrap:wrap;gap:2px 16px;width:100%;padding:0 0 10px;border:0;background:none;box-shadow:none;max-height:none}html:not(.js) .menu a{padding:6px 0;border:0;font-size:14px}html:not(.js) .menu a.btn{display:none}} .cg-nos{display:flex;flex-wrap:wrap;gap:10px 20px;padding:0;list-style:none}.cg-nos a{color:var(--ink)} /* ===================== PARCOURS CLIENT (14/10/2026) ===================== Lisibilité sur ordinateur, services en blocs visuels, visionneuse d'exemples, possibilités du site, identité, visibilité. */ /* lisibilité : bouton principal contrasté (5,7:1), étapes de la méthode lisibles sans attendre le défilement, petits numéros plus clairs */ .btn:not(.g){background:var(--acc)} @media (hover:hover){.btn:not(.g):hover{background:var(--acc-h)}} .tl li h3,.tl li p{opacity:1} .tl li:not(.on) h3{color:#d6d6db} .steps3 b,.sc-style{color:var(--acc-t)} .sc-style{font-size:12.5px} /* fenêtre d'un concept : plus large, panneau d'informations plus étroit → la page est moins réduite, donc lisible */ dialog#dm{width:min(1480px,calc(100vw - 32px))} @media (min-width:1001px){#dm .dm{grid-template-columns:minmax(0,1fr) 340px}} /* ---- services en blocs visuels (accueil) ---- */ .vis-g{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px} .vis{display:flex;flex-direction:column;gap:10px;padding:18px 18px 22px;border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);text-decoration:none;transition:border-color .35s,transform .35s var(--ease)} @media (hover:hover){.vis:hover{border-color:rgba(107,110,243,.6)}} .vis h3{margin:8px 4px 0;font-size:21px;letter-spacing:-.03em} .vis p{margin:0 4px;flex:1;color:var(--mute);font-size:15.5px} .vis-l{margin:6px 4px 0;font-size:15px;font-weight:600;color:var(--acc-t)} .vis-i{aspect-ratio:16/10;border-radius:12px;background:radial-gradient(80% 90% at 30% 0%,rgba(107,110,243,.18),transparent 70%),#0d0d10;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden} @media (max-width:1100px){.vis-g{grid-template-columns:1fr 1fr}} @media (max-width:560px){.vis-g{grid-template-columns:1fr}.vis-i{aspect-ratio:16/8}} /* mini-illustrations (dessinées en CSS, aucune image) */ /* ---- résumé des offres (accueil) ---- */ .osum{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px} .osum-c{position:relative;display:flex;flex-direction:column;gap:8px;padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);text-decoration:none;transition:border-color .35s} .osum-c.hot{border-color:rgba(107,110,243,.6)}@media (hover:hover){.osum-c:hover{border-color:rgba(107,110,243,.6)}} .osum-c .pill{top:-13px;left:24px} .osum-n{font-size:22px;font-weight:700;letter-spacing:-.03em} .osum-c p{margin:0;flex:1;color:var(--mute);font-size:15.5px} .osum-p{margin-top:10px;font-size:30px;letter-spacing:-.04em} .osum-p .pr-n{margin-left:8px;font-size:15px;letter-spacing:0;color:var(--dim)} .offre-on .osum-p .pr-n{text-decoration:line-through} .osum-f{margin:22px 0 0;text-align:center;color:var(--mute)} .osum-f a{color:var(--ink);font-weight:600;text-decoration:none} @media (max-width:900px){.osum{grid-template-columns:1fr}} /* ---- visionneuse d'exemples (création) ---- */ .cv-s{padding-top:8px} .cv-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px} .cv-tabs button{min-height:44px;padding:0 18px;border-radius:99px;border:1px solid var(--line2);background:transparent;color:var(--mute);font:600 15px/1 Inter,"Inter Fallback",system-ui,sans-serif;cursor:pointer;transition:background .25s,color .25s,border-color .25s} @media (hover:hover){.cv-tabs button:hover{color:var(--ink);border-color:var(--ink)}} .cv-tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#0a0a0b} .cv-p{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(24px,3.5vw,48px);align-items:center} .cv-stage{position:relative;padding:0 9% 7% 0} .cv-desk .bw{box-shadow:0 60px 100px -50px #000} .cv-ph{position:absolute;right:0;bottom:0;width:21%;aspect-ratio:9/19.5;overflow:hidden;border-radius:24px;border:5px solid #2a2a2e;background:#000;box-shadow:0 30px 60px -20px #000} .cv-ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:top} .cv-info h2{font-size:clamp(26px,2.4vw,34px);margin:8px 0 10px;letter-spacing:-.035em} .cv-info p{margin:0 0 24px;color:var(--mute)} .cv-act{display:flex;flex-direction:column;gap:10px;align-items:flex-start} .cv-p.in .cv-stage,.cv-p.in .cv-info{animation:cvIn .5s var(--ease)} @keyframes cvIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.cv-p.in .cv-stage,.cv-p.in .cv-info{animation:none}} .cv-note{margin:22px 0 0;font-size:13.5px;color:var(--dim)} @media (max-width:1000px){.cv-p{grid-template-columns:1fr}.cv-act{flex-direction:row;flex-wrap:wrap}} @media (max-width:700px){.cv-tabs{flex-wrap:nowrap;overflow-x:auto;margin:0 -20px 18px;padding:0 20px;scrollbar-width:none}.cv-tabs button{flex:none}.cv-stage{padding:0}.cv-ph{display:none}.cv-act .btn{width:auto;flex:1 1 auto}} /* ---- possibilités du site (création) ---- */ .feat-g{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .feat{display:flex;flex-direction:column;gap:8px;padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--card)} .feat h4{margin:0;font-size:18px;letter-spacing:-.02em} .feat p{margin:0;flex:1;color:var(--mute);font-size:15.5px} .st{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:4px 10px;border-radius:99px;font-size:12.5px;font-weight:600;line-height:1.3} .st::before{font-weight:700} .st.in{background:rgba(107,110,243,.16);color:var(--acc-t)}.st.in::before{content:"✓"} .st.op{border:1px solid rgba(107,110,243,.55);color:var(--acc-t)}.st.op::before{content:"+"} .st.dv{border:1px dashed var(--line2);color:var(--mute)}.st.dv::before{content:"◇"} .feat .st+.st{margin-top:0} @media (max-width:1000px){.feat-g{grid-template-columns:1fr 1fr}} @media (max-width:600px){.feat-g{grid-template-columns:1fr}.feat{padding:20px}} /* ---- identité visuelle : planches des concepts de démonstration ---- */ .idb-g{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .idb{display:flex;flex-direction:column;gap:10px;padding:0 0 22px;border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden} .idb-logo{display:grid;place-items:center;min-height:150px;padding:20px;background:var(--b);color:var(--f);text-align:center;line-height:1.15} .idb-k{display:inline-block;width:20px;height:20px;margin-right:8px;border-radius:6px;background:linear-gradient(135deg,#5b4dff,#19c39b);vertical-align:-2px} .idb-c{display:flex;gap:6px;margin:6px 20px 0;padding:0;list-style:none} .idb-c li{width:30px;height:30px;border-radius:8px} .idb-t{margin:2px 20px 0;color:#d6d6db;font-size:17px} .idb h3{margin:6px 20px 0;font-size:19px;letter-spacing:-.02em} .idb > p:last-child{margin:0 20px;color:var(--mute);font-size:15px} @media (max-width:1100px){.idb-g{grid-template-columns:1fr 1fr}} @media (max-width:560px){.idb-g{grid-template-columns:1fr}} #prestation .steps3{margin-top:48px} /* ---- visibilité : explications, illustrations Google et publicité, schéma ---- */ .expl{display:grid;gap:14px;margin-top:8px} .expl>div{padding:22px 24px;border:1px solid var(--line);border-radius:14px;background:var(--card)} .expl h3{margin:0 0 8px;font-size:19px;letter-spacing:-.02em} .expl p{margin:0 0 10px;color:var(--mute);font-size:15.5px} dl.money{margin:0} #publicite .split{align-items:start} .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:44px 0 0;padding:0;list-style:none;counter-reset:f} .flow li{position:relative;display:flex;flex-direction:column;gap:6px;padding:22px;border:1px solid var(--line);border-radius:14px;background:var(--card);counter-increment:f} .flow li::before{content:counter(f);display:grid;place-items:center;width:30px;height:30px;margin-bottom:6px;border-radius:50%;background:rgba(107,110,243,.18);color:var(--acc-t);font-size:14px;font-weight:700} .flow li:not(:last-child)::after{content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);z-index:1;color:var(--acc-t);font-weight:700} .flow b{font-size:17px}.flow span{color:var(--mute);font-size:15px} .flow-n{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0} @media (max-width:900px){.flow{grid-template-columns:1fr 1fr}.flow li:nth-child(2)::after{display:none}} @media (max-width:560px){.flow{grid-template-columns:1fr}.flow li::after{display:none}} /* offres : à qui s'adresse chaque forfait */ .plan .pour{margin:0;color:var(--mute);font-size:15px} /* grands numéros décoratifs : seulement sur l'accueil (sur les pages intérieures, ils passaient derrière les titres) */ body:not(.p-accueil) section[data-n]::before{display:none} /* lisibilité ordinateur : plus aucun texte de lecture sous 13 px, phrase du fondateur plus contrastée */ .det h4{font-size:13px} @media (min-width:761px){.cmp td small{font-size:12.5px}.lanc-f,.cv-note{font-size:14px}} .founder{color:var(--mute)} .founder a{color:var(--ink)} .feat h3{margin:0;font-size:18px;letter-spacing:-.02em} .vis-g>*,.osum>*,.feat-g>*,.idb-g>*,.flow>*{min-width:0} /* ===== Audit de cohérence (14/10) ===== Couleurs : fonds --bg (page) / --bg2 (sections alternées) / --card ; textes --ink (titres), --mute (texte courant), --dim (secondaire) ; accent indigo --acc = action (boutons, bordures actives), --acc-h = survol, --acc-t = texte d'accent (étiquettes, liens, mots clés des titres), --acc-bg = fond teinté (statuts « compris »). Le jaune reste réservé aux concepts (jamais à LIARO). */ h1 .m,.phero h1 .m{color:var(--acc-t)} /* haut de l'accueil : un exemple en grand, ordinateur + téléphone, légende sous l'image (plus de pastille posée dessus) */ .hv{position:relative;margin:0;padding:0 0 0 0} .hv::before{content:"";position:absolute;inset:8% -4% 4% 8%;background:radial-gradient(closest-side,rgba(122,125,246,.32),transparent);filter:blur(40px);pointer-events:none} .hv-d{position:relative;margin-right:13%} .hv-d .bw{box-shadow:0 60px 110px -50px #000,0 0 0 1px rgba(122,125,246,.18)} .hv-p{position:absolute;right:0;bottom:12%;width:24%;aspect-ratio:9/19.5;overflow:hidden;border:4px solid #2a2a2e;border-radius:22px;background:#000;box-shadow:0 40px 80px -30px #000} .hv-p img{display:block;width:100%;height:100%;object-fit:cover;object-position:top} .hv figcaption{position:relative;margin-top:22px;font-size:14px;color:var(--dim)} .hv figcaption a{color:var(--acc-t);font-weight:600;text-decoration:none;white-space:nowrap} @media (hover:hover){.hv figcaption a:hover{text-decoration:underline}} html.js .hv .hv-d,html.js .hv .hv-p{animation:hvin .9s var(--ease) both}html.js .hv .hv-p{animation-delay:.15s} @keyframes hvin{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){html.js .hv .hv-d,html.js .hv .hv-p{animation:none}} @media (max-width:1000px){.hv{max-width:620px}.hv-d{margin-right:10%}} @media (max-width:600px){.hv-p{width:26%;border-width:3px;border-radius:16px}.hv figcaption{font-size:13px;margin-top:16px}} /* numéros décoratifs retirés partout (ils passaient derrière les titres) ; le repère latéral n'apparaît qu'une fois dans une section */ section[data-n]::before{display:none} .rail{opacity:0;transition:opacity .4s}.rail.on{opacity:1} /* pages intérieures : le contenu arrive plus haut, titres un peu moins massifs */ .phero{padding:104px 0 64px}.phero-s{padding-bottom:24px} .phero h1{font-size:clamp(40px,5.4vw,76px)} @media (max-width:760px){.phero{padding:56px 0 40px}.phero-s{padding-bottom:16px}} .p-contact .phero{padding:88px 0 12px} @media (max-width:760px){.p-contact .phero{padding:48px 0 8px}} .hero h1{font-size:clamp(40px,4.7vw,70px);letter-spacing:-.045em} @media (min-width:1001px){.w.hero{grid-template-columns:1.12fr 1fr;min-height:0;padding:56px 28px 120px}} .hv-d{margin-right:9%}.hv-p{width:19%;bottom:-7%} @media (max-width:600px){.hv-p{width:22%}} .hv-m{position:relative} .hv figcaption{margin-top:30px;padding-right:22%} @media (max-width:600px){.hv figcaption{margin-top:26px;padding-right:0}} /* Visibilité : vraie photo de recherche locale ; annonces (formats Instagram et Google) */ /* mini illustration « publicité » : une annonce dans un fil (pas de courbe de résultats) */ /* services sur téléphone : deux colonnes compactes (au lieu de quatre grandes cartes empilées) */ @media (max-width:560px){.vis-g{grid-template-columns:1fr 1fr;gap:10px;margin-top:32px}.vis{padding:10px 10px 14px;gap:6px;border-radius:14px}.vis-i{aspect-ratio:16/11;border-radius:10px} .vis h3{margin:6px 2px 0;font-size:16.5px;line-height:1.25}.vis p{margin:0 2px;font-size:14px;line-height:1.45}.vis-l{margin:4px 2px 0;font-size:14px} .vis-i>*{transform:scale(.66)}} @media (max-width:340px){.vis-g{grid-template-columns:1fr}} /* Visibilité : capture Google Maps en pleine largeur sous les explications */ .expl-2{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media (max-width:760px){.expl-2{grid-template-columns:1fr}} /* ===== Maquette de démonstration ORÉE (page Création) ===== Tout est en em : 1 em = 1/64 de la largeur de la fenêtre (10 px pour 640 px), via les unités de conteneur. */ .om-f{position:relative;margin:0} .om-f::before{content:"";position:absolute;inset:6% -6% 10% 4%;background:radial-gradient(closest-side,rgba(176,141,87,.22),transparent),radial-gradient(closest-side at 70% 60%,rgba(122,125,246,.26),transparent);filter:blur(40px);pointer-events:none} .om-stage{position:relative;padding:0 9% 7% 0} .om-bw{position:relative;container-type:inline-size;box-shadow:0 70px 120px -50px #000,0 0 0 1px rgba(176,141,87,.25)} .om{--lin:#efe8dc;--noyer:#2b1f18;--laiton:#b08d57;position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--lin);color:var(--noyer);font:400 10px/1.45 Inter,"Inter Fallback",system-ui,sans-serif;font-size:1.5625cqw;letter-spacing:0} .om i{font-style:normal} .om .om-h,.om .om-h2,.om-logo,.om-ph .om-h,.om-pn b,.om-serv b,.om-p b{font-family:"Bodoni MT",Didot,"Bodoni 72","Playfair Display",Georgia,serif;font-weight:400} .om-nav{position:absolute;z-index:3;inset:0 0 auto;display:flex;align-items:center;gap:2.2em;height:5.4em;padding:0 3.2em;background:linear-gradient(rgba(20,14,10,.55),transparent);color:#f5efe4;transition:background .45s,color .45s} .om-logo{display:flex;align-items:center;gap:.5em;margin-right:auto;font-size:1.9em;letter-spacing:.32em} .om-logo svg{width:.85em;height:1em;color:currentColor} .om-l{font-size:1.1em;opacity:.82;padding:.3em 0;border-bottom:1px solid transparent} .om-l.on{opacity:1;border-color:var(--laiton)} .om-nav em{font-style:normal;font-size:1.05em;padding:.75em 1.3em;border:1px solid rgba(245,239,228,.55);border-radius:99px} .om:not([data-v="accueil"]) .om-nav{background:var(--lin);color:var(--noyer);border-bottom:1px solid rgba(43,31,24,.1)} .om:not([data-v="accueil"]) .om-nav em{border-color:var(--noyer)} .om[data-v="rdv"] .om-nav em{background:var(--noyer);color:var(--lin)} .om-v{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s,visibility 0s .45s} .om[data-v="accueil"] [data-vue="accueil"],.om[data-v="projets"] [data-vue="projets"],.om[data-v="rdv"] [data-vue="rdv"]{opacity:1;visibility:visible;transition:opacity .45s} /* accueil */ .om-hero{position:relative;height:66%;overflow:hidden;background:#3a2a1e} .om-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%} .om-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(24,16,11,.86) 0%,rgba(24,16,11,.55) 42%,rgba(24,16,11,.05) 75%)} .om-ht{position:absolute;z-index:2;left:3.2em;bottom:3.2em;width:30em;color:#f5efe4} .om-ht small,.om-ph2 small,.om-rl small{display:block;margin-bottom:1em;font-size:.95em;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--laiton)} .om .om-h{font-size:4.1em;line-height:1.02;letter-spacing:-.01em} .om .om-h i,.om .om-h2 i{font-style:italic;color:#d9b77e} .om .om-h2 i{color:#9a6f3a} .om-ht p{margin:1.1em 0 1.6em;max-width:27em;font-size:1.2em;color:rgba(245,239,228,.82)} .om-cta{display:flex;gap:1.4em;align-items:center} .om-b1{display:inline-block;padding:.95em 1.6em;border-radius:99px;background:var(--lin);color:var(--noyer);font-size:1.1em;font-weight:600} .om-b2{font-size:1.1em;font-weight:600;color:#f5efe4;border-bottom:1px solid var(--laiton);padding-bottom:.2em} .om-card{position:absolute;z-index:2;right:2.6em;bottom:2.6em;display:flex;flex-direction:column;gap:.45em;width:17em;padding:1.3em 1.4em;border-radius:1em;background:rgba(239,232,220,.95);box-shadow:0 2em 4em -1.5em rgba(0,0,0,.6)} .om-ck{font-size:.9em;color:#7a6a5c}.om-card b{font-size:1.25em;font-weight:600} .om-slots,.om-filt,.om-tags,.om-hrs{display:flex;flex-wrap:wrap;gap:.45em} .om-slots{margin-top:.3em} .om-slots i,.om-filt i,.om-tags i,.om-hrs i{padding:.45em .8em;border-radius:99px;border:1px solid rgba(43,31,24,.22);font-size:.95em;white-space:nowrap} .om-slots i.on,.om-filt i.on,.om-tags i.on,.om-hrs i.on{background:var(--noyer);border-color:var(--noyer);color:var(--lin)} .om-trust{display:flex;justify-content:space-between;gap:1.5em;padding:1.25em 3.2em;border-bottom:1px solid rgba(43,31,24,.12);font-size:1.02em;color:#5a4a3d} .om-trust span::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:.6em;border-radius:50%;background:var(--laiton);vertical-align:.1em} .om-serv{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4em;padding:1.7em 3.2em} .om-serv small{display:block;font-size:.95em;color:var(--laiton);font-weight:600;letter-spacing:.1em} .om-serv b{display:block;margin:.3em 0;font-size:1.65em} .om-serv span{font-size:1.05em;color:#6b5a4c} /* projets */ .om-ph2{display:flex;align-items:flex-end;justify-content:space-between;gap:2em;padding:8em 3.2em 2em} .om .om-h2{font-size:3em;line-height:1.05} .om-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:1.4em;padding:0 3.2em} .om-p img{display:block;width:100%;height:21.5em;object-fit:cover;border-radius:.6em;background:#d8cfc2} .om-p b{display:block;margin-top:.8em;font-size:1.5em} .om-p span{font-size:1em;color:#7a6a5c} /* rendez-vous */ .om-rdv{display:grid;grid-template-columns:1fr 1.05fr;gap:3em;padding:8.2em 3.2em 0} .om-rl p{margin:1em 0 1.6em;font-size:1.2em;color:#5a4a3d} .om-steps{display:flex;flex-direction:column;gap:.7em;margin:0 0 1.6em;padding:0;list-style:none;counter-reset:s} .om-steps li{counter-increment:s;display:flex;align-items:center;gap:.8em;font-size:1.15em;color:#9a8a7c} .om-steps li::before{content:counter(s);display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;border:1px solid currentColor;font-size:.85em} .om-steps li.fait{color:var(--noyer)}.om-steps li.fait::before{content:"✓";background:var(--laiton);border-color:var(--laiton);color:#fff} .om-steps li.on{color:var(--noyer);font-weight:600}.om-steps li.on::before{background:var(--noyer);border-color:var(--noyer);color:var(--lin)} .om-cal{padding:1.8em;border-radius:1.2em;background:#fbf8f2;box-shadow:0 1.5em 3em -1.5em rgba(43,31,24,.35)} .om-cal>b{display:block;margin-bottom:1em;font-size:1.3em;font-weight:600} .om-days{display:grid;grid-template-columns:repeat(7,1fr);gap:.45em;text-align:center} .om-days i{font-size:.9em;color:#9a8a7c} .om-days span{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:50%;font-size:1.05em;color:#b7aa9c} .om-days .d{color:var(--noyer)} .om-days .a{font-weight:600}.om-days .a::after{content:"";position:absolute;bottom:.2em;width:.3em;height:.3em;border-radius:50%;background:var(--laiton)} .om-days .sel{background:var(--noyer);color:var(--lin)} .om-hrs{margin:1.3em 0} .om-cal .om-b1{display:block;text-align:center;background:var(--noyer);color:var(--lin)} /* téléphone */ .om-ph{position:absolute;right:0;bottom:0;width:24%;aspect-ratio:9/19;container-type:inline-size;border:4px solid #26262b;border-radius:24px;background:#26262b;overflow:hidden;box-shadow:0 40px 80px -30px #000} .om-pi{position:relative;height:100%;overflow:hidden;border-radius:19px;background:#efe8dc;color:#2b1f18;font-size:5.6cqw;line-height:1.4} .om-pi i{font-style:normal} .om-pn{display:flex;align-items:center;justify-content:space-between;padding:2.6em 1.6em 1em} .om-pn b{letter-spacing:.3em;font-size:1.25em}.om-pn i{width:1.6em;height:.7em;border-top:2px solid #2b1f18;border-bottom:2px solid #2b1f18} .om-pi img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover} .om-pi small{display:block;margin:1.4em 1.6em .6em;font-size:.8em;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#9a6f3a} .om-ph .om-h{margin:0 1.6em;font-size:2.1em;line-height:1.05} .om-ph .om-h i{font-style:italic;color:#9a6f3a} .om-pi .om-b1{margin:1.2em 1.6em;background:#2b1f18;color:#efe8dc;font-size:.95em;padding:.8em 1.2em} .om-pb{position:absolute;left:.8em;right:.8em;bottom:.8em;display:grid;grid-template-columns:1fr 1fr;gap:.5em} .om-pb span{padding:.8em 0;border-radius:99px;border:1px solid #2b1f18;text-align:center;font-size:.9em;font-weight:600;background:#efe8dc} .om-pb .on{background:#b08d57;border-color:#b08d57;color:#fff} /* boutons sous la maquette */ .om-f figcaption{position:relative;margin-top:14px;font-size:14px;line-height:1.55;color:var(--dim);max-width:44em} .om-f figcaption b{color:var(--mute);font-weight:600} @media (prefers-reduced-motion:reduce){.om-v,.om-nav{transition:none!important}} @supports not (container-type:inline-size){.om{font-size:9px}.om-pi{font-size:8px}} /* ===== Page Création (conception du 14/10) ===== */ /* haut de page : texte à gauche, maquette ORÉE à droite */ .ch{padding:56px 0 72px} .ch-g{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(32px,4.5vw,72px);align-items:center} .ch h1{font-size:clamp(40px,4.6vw,66px)} .ch .lead{max-width:30em;margin-bottom:30px} .ch .cta{margin-bottom:22px} .ch .ok{gap:8px 22px;font-size:14.5px} @media (max-width:1000px){.ch-g{grid-template-columns:1fr;gap:40px}.ch{padding:40px 0 56px}.ch-m{max-width:680px}} @media (max-width:600px){.ch{padding:28px 0 40px}.om-stage{padding:0 6% 9% 0}.om-ph{width:27%;border-width:3px;border-radius:16px}.om-pi{border-radius:13px}.om-f figcaption{font-size:13px}} .st.ex{border:1px solid var(--line2);color:var(--mute)}.st.ex::before{content:"€";font-size:.9em} /* problèmes → réponses */ .bz-g{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px} .bz{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;padding:22px 22px 24px;border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);text-decoration:none;transition:border-color .3s,background .3s} @media (hover:hover){.bz:hover{border-color:rgba(122,125,246,.6);background:#15151a}} .bz svg{width:26px;height:26px;fill:none;stroke:var(--acc-t);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px} .bz b{font-size:17.5px;line-height:1.3;letter-spacing:-.02em} .bz p{margin:0;color:var(--mute);font-size:15px;line-height:1.5} .bz::after{content:"→";position:absolute;top:20px;right:22px;color:var(--dim);transition:transform .25s,color .25s} @media (hover:hover){.bz:hover::after{color:var(--acc-t);transform:translateX(3px)}} @media (max-width:900px){.bz-g{grid-template-columns:1fr 1fr}} @media (max-width:560px){.bz-g{grid-template-columns:1fr;gap:10px;margin-top:28px}.bz{padding:16px 44px 18px 16px;gap:4px}.bz svg{position:absolute;right:16px;bottom:16px;width:20px;height:20px;opacity:.7}.bz::after{display:none}.bz b{font-size:16.5px}} .cv-s h2{margin-bottom:28px} /* explorateur d'outils */ .ox{margin-top:36px} .ox-t{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px} .ox-t button{min-height:44px;padding:10px 18px;border-radius:99px;border:1px solid var(--line2);background:transparent;color:var(--mute);font:500 15px/1 Inter,"Inter Fallback",system-ui,sans-serif;cursor:pointer;transition:background .2s,color .2s,border-color .2s} @media (hover:hover){.ox-t button:hover{color:var(--ink);border-color:var(--ink)}} .ox-t button[aria-selected="true"]{background:var(--acc);border-color:var(--acc);color:var(--onacc)} .ox-p{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(22px,3vw,36px);border:1px solid var(--line);border-radius:18px;background:var(--card)} html.js .ox-p[hidden]{display:none} html:not(.js) .ox-p{margin-bottom:14px}html:not(.js) .ox-t{display:none} .ox-x h3{margin:0 0 16px;font-size:24px;letter-spacing:-.03em} .ox-x dl{display:grid;grid-template-columns:170px 1fr;gap:12px 20px;margin:0 0 18px} .ox-x dt{color:var(--acc-t);font-size:14px;font-weight:600;padding-top:2px} .ox-x dd{margin:0;color:#cfcfd4;font-size:15.5px;line-height:1.5} .ox-s{display:flex;flex-wrap:wrap;gap:6px;margin:0} .ox-s .st{margin:0} .ox-n{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:16px 0 0;color:var(--dim);font-size:14px} .ox-n .st{margin:0}.ox-n a{color:var(--ink);font-weight:600;text-decoration:none} @media (max-width:860px){.ox-p{grid-template-columns:1fr}.ox-v{order:-1}} @media (max-width:560px){.ox-x dl{grid-template-columns:1fr;gap:2px}.ox-x dd{margin-bottom:10px}.ox-t{flex-wrap:nowrap;overflow-x:auto;margin-inline:-20px;padding:0 20px 4px;scrollbar-width:none}.ox-t::-webkit-scrollbar{display:none}.ox-t button{flex:none}} /* petites démonstrations visuelles (décoratives) */ .ox-v{position:relative;display:grid;place-items:center;min-height:260px;padding:28px;border-radius:14px;background:radial-gradient(80% 90% at 30% 0%,rgba(122,125,246,.18),transparent 70%),#0d0d10;border:1px solid var(--line);overflow:hidden} .ox-v i{font-style:normal} .xv-form,.xv-cal,.xv-ad{width:min(300px,100%);display:flex;flex-direction:column;gap:9px;padding:18px;border-radius:14px;background:#f4f3ef;color:#16161a;box-shadow:0 30px 60px -30px #000;font-size:13px} .xv-form>b,.xv-cal>b{font-size:15px} .xv-chips,.xv-d,.xv-h{display:flex;flex-wrap:wrap;gap:6px} .xv-chips i,.xv-d i,.xv-h i{padding:5px 10px;border-radius:99px;border:1px solid #cfcdc6;font-size:12px} .xv-chips .on,.xv-d .on,.xv-h .on{background:#16161a;border-color:#16161a;color:#fff} .xv-h .off{color:#b5b3ad;text-decoration:line-through} .xv-in{display:block;height:30px;border-radius:8px;background:#fff;border:1px solid #dddbd4}.xv-in.s{height:52px} .xv-form em,.xv-cal em,.xv-ad em{display:block;padding:9px;border-radius:8px;background:var(--acc);color:#0a0a0b;text-align:center;font-style:normal;font-weight:600} .xv-toast{position:absolute;right:16px;top:18px;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:#1b1b21;border:1px solid var(--line2);box-shadow:0 20px 40px -20px #000;font-size:12.5px;color:var(--mute)} .xv-toast i{width:9px;height:9px;border-radius:50%;background:#5ad19a;box-shadow:0 0 0 4px rgba(90,209,154,.18)} .xv-toast b{display:block;color:var(--ink);font-size:13px} .xv-map{position:relative;width:min(320px,100%);aspect-ratio:4/3;border-radius:14px;background:linear-gradient(90deg,transparent 47%,#fff 47%,#fff 51%,transparent 51%),linear-gradient(0deg,transparent 58%,#fff 58%,#fff 62%,transparent 62%),linear-gradient(135deg,#e5ece6,#dfe6ee);box-shadow:0 30px 60px -30px #000;overflow:hidden} .xv-q{position:absolute;left:12px;right:12px;top:12px;padding:8px 14px;border-radius:99px;background:#fff;color:#202124;font-size:13px;box-shadow:0 1px 4px rgba(0,0,0,.15)} .xv-map>i{position:absolute;width:18px;height:18px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#b9bec6} .xv-map .p1{left:30%;top:46%}.xv-map .p2{left:68%;top:40%}.xv-map .p3{left:56%;top:56%;width:24px;height:24px;background:var(--acc);box-shadow:0 0 0 6px rgba(122,125,246,.25)} .xv-fiche{position:absolute;left:12px;right:12px;bottom:12px;display:flex;flex-direction:column;padding:10px 14px;border-radius:10px;background:#fff;color:#4d5156;font-size:12px} .xv-fiche b{color:#1a0dab;font-size:14px;font-weight:600} .xv-ad{position:relative} .xv-sp{position:absolute;top:28px;left:28px;padding:2px 8px;border-radius:5px;background:rgba(255,255,255,.92);font-size:11px;font-weight:700} .xv-img{display:block;height:120px;border-radius:10px;background:linear-gradient(135deg,#c9a57a,#7a5a3c)} .xv-ad>b{font-size:15px}.xv-ad>span{color:#5f6368;font-size:12.5px} .xv-flow{display:flex;flex-direction:column;gap:12px;width:min(300px,100%);margin:0;padding:0;list-style:none;counter-reset:f} .xv-flow li{counter-increment:f;position:relative;display:flex;flex-direction:column;padding:12px 14px 12px 52px;border-radius:12px;background:#17171c;border:1px solid var(--line2);font-size:12.5px;color:var(--mute)} .xv-flow li::before{content:counter(f);position:absolute;left:14px;top:50%;translate:0 -50%;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--acc-bg);color:var(--acc-t);font-weight:700} .xv-flow li+li::after{content:"";position:absolute;left:26px;top:-13px;height:12px;border-left:1px dashed var(--line2)} .xv-flow b{color:var(--ink);font-size:14px} .xv-kb{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%} .xv-kb div{display:flex;flex-direction:column;gap:6px;padding:10px 8px;border-radius:10px;background:#141418;border:1px solid var(--line)} .xv-kb b{font-size:11.5px;color:var(--mute);font-weight:600} .xv-kb i{display:block;height:34px;border-radius:7px;background:#22222a;border-left:3px solid var(--acc)} .xv-kb i.ok{border-left-color:#5ad19a} /* étapes : six en deux rangées */ .steps6{margin-top:40px} .steps6 li{padding-bottom:24px;border-bottom:1px solid var(--line)} .steps6 h3{font-size:20px} @media (max-width:760px){.steps3.steps6{grid-template-columns:1fr 1fr;gap:0 16px}.steps6 li{padding:22px 0 18px}.steps6 h3{font-size:17px}.steps6 p{font-size:14.5px}} /* bloc final à deux actions */ .final-a{display:flex;flex-wrap:wrap;justify-content:center;gap:12px} @media (max-width:600px){.final-a{flex-direction:column}.final-a .btn{white-space:normal}} /* ORÉE : proportions ajustées après contrôle visuel (titre sur deux lignes, carte des créneaux en haut à droite, téléphone plus bas) */ .om-hero{height:69%} .om-ht{width:36em;bottom:2.6em} .om .om-h{font-size:3.5em} .om-ht p{max-width:31em;font-size:1.15em;margin:.9em 0 1.4em} .om-card{top:7em;bottom:auto} .om-stage{padding:0 8% 13% 0} .om-ph{width:20%} .om-pi img{height:auto} .om-p img{height:17em} .om-steps li::before{flex:none} .om-pi img{aspect-ratio:5/4} .om-ph .om-h{font-size:1.85em} .om-pi .om-b1{margin:1em 1.6em 0} .xv-form{transform:translateX(-12%)}.xv-toast{top:auto;bottom:24px;right:14px}@media (max-width:560px){.xv-form{transform:none}.xv-toast{bottom:10px;right:10px}} /* offre de lancement : bandeau en haut de chaque page et conditions détaillées */ .annonce{margin:0;background:linear-gradient(90deg,#1b1b3a,#24245a 50%,#1b1b3a);border-bottom:1px solid rgba(122,125,246,.35);text-align:center} .annonce a{display:block;padding:9px 20px;color:#e6e6fb;font-size:14px;line-height:1.4;text-decoration:none} .annonce b{color:#fff} .annonce a>span{margin-left:6px;color:var(--acc-t);font-weight:600;white-space:nowrap} @media (hover:hover){.annonce a:hover>span{text-decoration:underline}} @media (max-width:600px){.annonce a{padding:8px 16px;font-size:13px}} .lanc-d{display:grid;gap:12px;margin:0;padding:18px 0 0;border-top:1px solid var(--line)} .lanc-d dt{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--acc-t)} .lanc-d dd{margin:2px 0 0;color:#cfcfd4;font-size:15px} .lanc-d ol{margin:4px 0 0;padding-left:20px}.lanc-d li{margin:2px 0} /* page Offres : accès direct aux deux chemins ; configurateur du projet sur mesure */ .ph-l{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0} .ph-l a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--acc);padding-bottom:3px} @media (hover:hover){.ph-l a:hover{color:var(--acc-t)}} .cfg{display:grid;grid-template-columns:repeat(3,1fr) ;gap:16px;margin-top:36px} .cfg fieldset{min-width:0;margin:0;padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--card)} .cfg legend{float:left;width:100%;margin-bottom:14px;font-size:17px;font-weight:700;letter-spacing:-.02em} .cfg-o{clear:both;display:flex;flex-wrap:wrap;gap:8px} .cfg label{position:relative;cursor:pointer} .cfg input{position:absolute;opacity:0;width:1px;height:1px} .cfg label span{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 14px;border:1px solid var(--line2);border-radius:99px;color:#cfcfd4;font-size:14.5px;line-height:1.3;transition:background .2s,border-color .2s,color .2s} .cfg label span::before{content:"+";color:var(--dim);font-weight:600} @media (hover:hover){.cfg label:hover span{border-color:var(--ink);color:var(--ink)}} .cfg input:checked+span{background:var(--acc-bg);border-color:var(--acc);color:var(--ink)} .cfg input:checked+span::before{content:"✓";color:var(--acc-t)} .cfg input:focus-visible+span{outline:2px solid var(--acc);outline-offset:3px} .cfg-r{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding:22px 26px;border:1px solid rgba(122,125,246,.45);border-radius:16px;background:linear-gradient(120deg,rgba(122,125,246,.12),transparent 60%),var(--card)} .cfg-n{flex:1 1 280px;margin:0;display:flex;flex-direction:column;gap:2px} .cfg-n b{font-size:18px;letter-spacing:-.02em}.cfg-n span{color:var(--mute);font-size:14.5px} .cfg-f{flex-basis:100%;margin:0;color:var(--dim);font-size:13.5px} @media (max-width:1000px){.cfg{grid-template-columns:1fr}} @media (max-width:600px){.cfg fieldset{padding:18px 16px}.cfg-r{padding:18px 16px}.cfg-r .btn{width:100%}} .osum-perso{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin-top:16px;padding:20px 24px;border:1px dashed rgba(122,125,246,.55);border-radius:16px;color:var(--mute);font-size:15.5px;text-decoration:none;transition:border-color .3s,background .3s} .osum-perso b{color:var(--ink)} .osum-perso em{font-style:normal;font-weight:600;color:var(--acc-t);white-space:nowrap} @media (hover:hover){.osum-perso:hover{border-style:solid;background:rgba(122,125,246,.06)}} /* ===== Page Identité : cas conceptuel ORÉE, avant / après ===== */ .cas-st{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 36px;color:var(--mute);font-size:15px} .cas-st span{padding:4px 10px;border-radius:99px;border:1px dashed var(--line2);color:var(--ink);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase} .av{display:grid;grid-template-columns:1.2fr .8fr;gap:16px} .av-q,.av-b{padding:clamp(22px,3vw,34px);border:1px solid var(--line);border-radius:18px;background:var(--card)} .av-k{margin:0 0 14px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-t)} .av-q blockquote{margin:0;font-size:clamp(19px,1.9vw,24px);line-height:1.45;letter-spacing:-.015em;color:var(--ink)} .av-w{margin:16px 0 0;color:var(--dim);font-size:14px} .av-old{display:flex;align-items:center;justify-content:center;gap:10px;height:120px;margin-bottom:16px;border-radius:12px;background:#fff;color:#2b6cd4;font:700 22px/1 Arial,Helvetica,sans-serif} .av-old svg{width:30px;height:30px} .av-l{margin:0;padding-left:18px;color:var(--mute);font-size:14.5px}.av-l li{margin:4px 0} .av-sep{display:flex;align-items:center;gap:16px;margin:28px 0;color:var(--acc-t);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase} .av-sep::before,.av-sep::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(122,125,246,.6),transparent)} .av-sep span::after{content:" ↓"} /* planche d'identité */ .idn{display:grid;grid-template-columns:repeat(12,1fr);gap:16px} .idn>div{min-width:0;padding:clamp(22px,2.6vw,32px);border-radius:18px} .idn h3{margin:0 0 16px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase} .idn-logo,.idn-typo{background:#efe8dc;color:#2b1f18} .idn-logo{grid-column:span 7}.idn-pal{grid-column:span 5;background:#2b1f18;color:#efe8dc} .idn-typo{grid-column:span 5}.idn-app{grid-column:span 7;background:#f6f2ea;color:#2b1f18} .idn-why{grid-column:1/-1;border:1px solid var(--line);background:var(--card)} .oree-w{font-family:"Bodoni MT",Didot,"Bodoni 72","Playfair Display",Georgia,serif;letter-spacing:.34em;font-weight:400} .idn-main{display:flex;flex-direction:column;align-items:center;gap:12px;padding:30px 0 26px} .idn-main .oree-m{width:64px;height:77px} .idn-main .oree-w{font-size:clamp(34px,3.6vw,46px);margin-right:-.34em} .idn-main small{font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:#8a6a3e} .idn-var{display:grid;grid-template-columns:1fr 110px;gap:12px} .idn-var>div{display:flex;align-items:center;justify-content:center;gap:12px;height:96px;border-radius:12px;background:#2b1f18;color:#efe8dc} .idn-var .oree-m{width:30px;height:36px}.idn-var .oree-w{font-size:24px} .idn-var .v-ico{background:#b08d57} .idn-var .v-ico .oree-m{width:40px;height:48px} .idn-c{margin:14px 0 0;font-size:13.5px;color:#6b5a4c} .idn-pal ul{list-style:none;margin:0;padding:0;display:grid;gap:12px} .idn-pal li{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center} .idn-pal i{grid-row:1/3;width:52px;height:52px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)} .idn-pal b{font-size:17px;font-weight:600}.idn-pal span{font-size:13.5px;color:#cbbfb0} .idn-typo .t-ser{margin:0;font-family:"Bodoni MT",Didot,"Bodoni 72",Georgia,serif;font-size:clamp(28px,2.6vw,36px);line-height:1.1} .idn-typo .t-ser i{color:#9a6f3a} .idn-typo .t-san{margin:18px 0 0;font-size:17px;line-height:1.45} .t-cap{margin:6px 0 0;font-size:12.5px;color:#7a6a5c} .app-g{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;align-items:start} .app-card{display:grid;gap:10px} .app-card>div{aspect-ratio:85/55;border-radius:8px;box-shadow:0 14px 30px -16px rgba(43,31,24,.55)} .cv-f{display:flex;align-items:center;justify-content:center;gap:10px;background:#efe8dc;border:1px solid #e0d6c6} .cv-f .oree-m{width:22px;height:27px}.cv-f .oree-w{font-size:19px;color:#2b1f18} .cv-b{position:relative;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:0 18px;background:#2b1f18;color:#efe8dc;font-size:12px} .cv-b b{font-family:"Bodoni MT",Didot,Georgia,serif;font-weight:400;font-size:15px} .cv-b span{color:#cbbfb0} .cv-b i{position:absolute;right:16px;bottom:14px;width:28px;height:2px;background:#b08d57} .app-ig{overflow:hidden;border-radius:12px;background:#fff;box-shadow:0 14px 30px -16px rgba(43,31,24,.55);font-size:12px;color:#262626} .ig-h{display:flex;align-items:center;gap:8px;padding:8px 10px} .ig-a{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#2b1f18} .ig-a .oree-m{width:14px;height:17px} .app-ig img{display:block;width:100%;aspect-ratio:1;object-fit:cover} .ig-c{display:block;padding:8px 10px 10px} .idn-site{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;margin-top:16px;padding:14px 16px;border-radius:12px;background:#2b1f18;color:#cbbfb0;font-size:14px;text-decoration:none} .idn-site b{color:#efe8dc;white-space:nowrap}@media (hover:hover){.idn-site:hover b{color:#d9b77e}} .idn-why ol{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:0;padding:0;list-style:none} .idn-why h3{color:var(--acc-t)} .idn-why li{color:var(--mute);font-size:15.5px;line-height:1.55} .idn-why li b{display:block;margin-bottom:4px;color:var(--ink);font-size:17px} #pourquoi .steps3{margin-top:36px} #planches h2{margin-bottom:8px} @media (max-width:1000px){.idn-logo,.idn-pal,.idn-typo,.idn-app{grid-column:1/-1}.idn-why ol{grid-template-columns:1fr;gap:16px}} @media (max-width:760px){.av{grid-template-columns:1fr}.app-g{grid-template-columns:1fr 1fr}.idn{gap:12px}} @media (max-width:420px){.app-g{grid-template-columns:1fr}.idn-var{grid-template-columns:1fr 88px}} .t-spec{display:flex;align-items:baseline;gap:22px;margin:4px 0 22px;padding-bottom:18px;border-bottom:1px solid rgba(43,31,24,.15);line-height:1} .t-spec .s1{font-family:"Bodoni MT",Didot,"Bodoni 72",Georgia,serif;font-size:clamp(70px,7vw,104px)} .t-spec .s2{font-size:clamp(50px,5vw,74px);font-weight:600;letter-spacing:-.04em;color:#8a6a3e} .idn-typo{display:flex;flex-direction:column} /* lisibilité (test) : légendes des planches assez contrastées et pas sous 13 px */ .idn-main small{font-size:13px;color:#6e5230} .t-cap{font-size:13px;color:#5f5043} .idn-c{color:#5f5043} /* ORÉE : toute la maquette ouvre la démonstration complète */ .om-hit{position:absolute;z-index:5;inset:0 8% 13% 0;border:0;border-radius:12px;background:transparent;cursor:pointer} .om-hit::after{content:"Explorer la démonstration ↗";position:absolute;left:50%;top:50%;translate:-50% -50%;padding:12px 20px;border-radius:99px;background:rgba(10,10,11,.82);color:#fff;font:600 15px/1 Inter,"Inter Fallback",system-ui,sans-serif;white-space:nowrap;opacity:0;transition:opacity .3s;backdrop-filter:blur(6px)} .om-hit:focus-visible::after{opacity:1}@media (hover:hover){.om-hit:hover::after{opacity:1}} .om-hit:focus-visible{outline:2px solid var(--acc);outline-offset:4px} @media (hover:hover){.om-hit:hover{box-shadow:0 0 0 1px rgba(176,141,87,.6),0 0 60px -10px rgba(176,141,87,.35)}} .om-act{position:relative;display:flex;align-items:center;gap:18px;margin-top:6px} .om-dots{display:flex;gap:6px}.om-dots i{width:22px;height:3px;border-radius:2px;background:var(--line2);transition:background .4s}.om-dots i.on{background:var(--acc-t)} @media (hover:none){.om-hit::after{display:none}} /* ===== Accueil (harmonisation du 14/10) : même finition que la page Création ===== */ /* haut de page : maquette par secteur + deux cartes « ce que le site apporte » */ .hv-hit{position:absolute;z-index:4;inset:0 9% 0 0;border:0;border-radius:12px;background:transparent;cursor:pointer} .hv-hit::after{content:"Voir ce site en grand ↗";position:absolute;left:50%;top:50%;translate:-50% -50%;padding:11px 18px;border-radius:99px;background:rgba(10,10,11,.82);color:#fff;font:600 14.5px/1 Inter,"Inter Fallback",system-ui,sans-serif;white-space:nowrap;opacity:0;transition:opacity .3s;backdrop-filter:blur(6px)} .hv-hit:focus-visible::after{opacity:1}@media (hover:hover){.hv-hit:hover::after{opacity:1}} .hv-hit:focus-visible{outline:2px solid var(--acc);outline-offset:4px} @media (hover:none){.hv-hit::after{display:none}} .hv-d .bw-v img,.hv-p img{transition:opacity .35s} .hv.chg .hv-d .bw-v img,.hv.chg .hv-p img{opacity:.15} .hv-n{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:rgba(22,22,27,.92);border:1px solid var(--line2);box-shadow:0 24px 50px -24px #000;backdrop-filter:blur(8px);font-size:12.5px;line-height:1.35;color:var(--mute);pointer-events:none} .hv-n b{display:block;color:var(--ink);font-size:13.5px} .hv-n1{left:-5%;top:14%} .hv-n1 i{width:9px;height:9px;flex:none;border-radius:50%;background:#5ad19a;box-shadow:0 0 0 4px rgba(90,209,154,.18)} .hv-n2{left:6%;bottom:-6%} .hv-n2 svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--acc-t);stroke-width:1.8} html.js .hv-n{animation:hvn .8s .9s var(--ease) both}html.js .hv-n2{animation-delay:1.15s} @keyframes hvn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){html.js .hv-n{animation:none}} .hv-s{position:relative;display:flex;flex-wrap:wrap;gap:6px;margin-top:40px} .hv-s button{min-height:36px;padding:7px 13px;border-radius:99px;border:1px solid var(--line2);background:transparent;color:var(--mute);font:500 13.5px/1 Inter,"Inter Fallback",system-ui,sans-serif;cursor:pointer;transition:background .2s,color .2s,border-color .2s} @media (hover:hover){.hv-s button:hover{color:var(--ink);border-color:var(--ink)}} .hv-s button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#0a0a0b} .hv figcaption{margin-top:14px;padding-right:0} @media (max-width:1000px){.hv-n1{left:2%}} @media (max-width:600px){.hv-n{padding:7px 10px;font-size:11px;gap:7px}.hv-n b{font-size:12px}.hv-n1{left:-2%;top:6%}.hv-n2{left:2%;bottom:-9%}.hv-s{margin-top:34px;flex-wrap:nowrap;overflow-x:auto;margin-inline:-20px;padding:0 20px 4px;scrollbar-width:none}.hv-s::-webkit-scrollbar{display:none}.hv-s button{flex:none}} /* services : de vrais aperçus (tout en em, proportionnel à la carte) */ .vis-i{container-type:inline-size;position:relative;background:radial-gradient(80% 90% at 30% 0%,rgba(122,125,246,.16),transparent 70%),#0d0d10} .vz{position:relative;width:100%;height:100%;font-size:4.2cqw;font-family:Inter,"Inter Fallback",system-ui,sans-serif} .vz i{font-style:normal} .vz-site .vz-bw{position:absolute;left:8%;top:12%;width:72%;border-radius:.5em;overflow:hidden;background:#111;box-shadow:0 1.5em 3em -1em #000;border:1px solid var(--line2)} .vz-bw>span{display:flex;gap:.3em;padding:.4em .6em;background:#1a1a1f}.vz-bw>span i{width:.4em;height:.4em;border-radius:50%;background:#3a3a40} .vz-bw img{display:block;width:100%;aspect-ratio:16/10;height:auto;object-fit:cover;object-position:top} .vz-site .vz-ph{position:absolute;right:8%;bottom:8%;width:20%;aspect-ratio:9/19;border:.25em solid #2a2a2e;border-radius:.9em;overflow:hidden;background:#000;box-shadow:0 1em 2em -.6em #000} .vz-ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:top} .vz-map{background:linear-gradient(90deg,transparent 46%,#fff 46%,#fff 49%,transparent 49%),linear-gradient(0deg,transparent 64%,#fff 64%,#fff 67%,transparent 67%),linear-gradient(135deg,#e2eae3,#dce4ec)} .vz-q{position:absolute;left:6%;right:6%;top:9%;display:flex;justify-content:space-between;align-items:center;padding:.55em .9em;border-radius:99px;background:#fff;color:#202124;font-size:.95em;box-shadow:0 .1em .4em rgba(0,0,0,.18)} .vz-q i{width:.8em;height:.8em;border:.15em solid #5f6368;border-radius:50%} .vz-map .p{position:absolute;width:1.1em;height:1.1em;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#b9bec6} .vz-map .p1{left:22%;top:42%}.vz-map .p2{left:72%;top:36%}.vz-map .p3{left:52%;top:40%;width:1.5em;height:1.5em;background:var(--acc);box-shadow:0 0 0 .35em rgba(122,125,246,.3)} .vz-f{position:absolute;left:6%;right:6%;bottom:8%;display:flex;flex-direction:column;gap:.15em;padding:.7em .9em;border-radius:.6em;background:#fff;color:#4d5156;font-size:.85em;box-shadow:0 .4em 1em -.4em rgba(0,0,0,.4)} .vz-f b{color:#1a0dab;font-size:1.2em;font-weight:600}.vz-f em{font-style:normal;color:#188038} .vz-a{display:flex;gap:.4em;margin-top:.25em}.vz-a u{text-decoration:none;padding:.2em .6em;border-radius:99px;border:1px solid #dadce0;color:#1a73e8;font-size:.9em} .vz-ad{display:grid;place-items:center} .vz-post{width:46%;border-radius:.6em;overflow:hidden;background:#fff;box-shadow:0 1.2em 2.4em -1em #000;color:#262626;font-size:.8em} .vz-h{display:flex;align-items:center;gap:.4em;padding:.5em .6em}.vz-h i{width:1.5em;height:1.5em;border-radius:50%;background:linear-gradient(135deg,#b4523f,#e8b9a0)} .vz-h b{font-weight:600}.vz-h small{margin-left:auto;font-size:.85em;color:#737373} .vz-post img{display:block;width:100%;aspect-ratio:1;height:auto;object-fit:cover;object-position:62% top} .vz-cta{display:flex;justify-content:space-between;padding:.55em .7em;background:#efefef;font-weight:600;color:#0095f6} .vz-id{display:grid;grid-template-columns:1.25fr 1fr;gap:5%;padding:9% 7%} .vz-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;border-radius:.6em;background:#efe8dc;color:#2b1f18} .vz-logo svg{width:2.4em;height:2.9em} .vz-logo span{font-family:"Bodoni MT",Didot,"Bodoni 72",Georgia,serif;font-size:1.5em;letter-spacing:.3em;margin-right:-.3em} .vz-side{display:flex;flex-direction:column;gap:6%} .vz-sw{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:.35em}.vz-sw i{border-radius:.4em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)} .vz-aa{display:flex;align-items:baseline;justify-content:space-around;padding:.4em;border-radius:.5em;background:#2b1f18;color:#efe8dc;line-height:1} .vz-aa b{font-family:"Bodoni MT",Didot,Georgia,serif;font-weight:400;font-size:2.2em}.vz-aa em{font-style:normal;font-weight:600;font-size:1.6em;color:#d9b77e} @media (max-width:560px){.vis-i>*{transform:none}.vz{font-size:4.6cqw}} .vz-post{width:auto;height:88%;aspect-ratio:4/5.2;display:flex;flex-direction:column}.vz-post img{flex:1;min-height:0;aspect-ratio:auto;height:auto} .vz-post{width:36%;height:auto;aspect-ratio:auto;display:block}.vz-post img{aspect-ratio:1;height:auto;object-position:72% 40%} .vz-post{width:50%;font-size:.72em}.vz-post img{aspect-ratio:16/10;object-position:70% 45%}.vz-cta,.vz-h{white-space:nowrap} /* ===== Introductions visuelles des pages (harmonisation du 14/10) ===== */ /* Identité : comparateur avant / après */ .ab{position:relative;margin:0} .ab-z{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;border:1px solid var(--line2);box-shadow:0 60px 110px -50px #000;user-select:none} .ab-l{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px} .ab-av{background:#fff} .ab-av .av-old{height:auto;margin:0;background:none;font-size:clamp(20px,2.2vw,28px)} .ab-av .av-old svg{width:34px;height:34px} .ab-old{margin:0;color:#6b6b72;font-size:14px} .ab-ap{background:#efe8dc;color:#2b1f18;clip-path:inset(0 0 0 var(--p))} .ab-logo{display:flex;flex-direction:column;align-items:center;gap:10px} .ab-logo .oree-m{width:58px;height:70px} .ab-logo .oree-w{font-size:clamp(30px,3.2vw,42px);margin-right:-.34em} .ab-logo small{font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:#6e5230} .ab-sw{display:flex;gap:8px}.ab-sw i{width:30px;height:30px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(43,31,24,.15)} .ab-t{position:absolute;top:16px;padding:5px 12px;border-radius:99px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .ab-av .ab-t{left:16px;background:#ececf0;color:#3a3a40} .ab-ap .ab-t{right:16px;background:#2b1f18;color:#efe8dc} .ab-h{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);pointer-events:none} .ab-h::after{content:"‹ ›";position:absolute;top:50%;left:50%;translate:-50% -50%;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:#2b1f18;font:700 16px/1 Inter,system-ui,sans-serif;box-shadow:0 8px 24px -6px rgba(0,0,0,.5)} .ab-z input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize} .ab-z:focus-within{outline:2px solid var(--acc);outline-offset:4px} .ab figcaption{margin-top:14px;font-size:14px;color:var(--dim)} .ab figcaption a{color:var(--acc-t);font-weight:600;text-decoration:none} /* Visibilité : une page de résultats sur téléphone */ .sr{position:relative;margin:0;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center} .sr::before{content:"";position:absolute;inset:10% 20% 10% -6%;background:radial-gradient(closest-side,rgba(122,125,246,.26),transparent);filter:blur(40px);pointer-events:none} .sr-ph{position:relative;width:min(290px,64vw);aspect-ratio:9/18.5;display:flex;flex-direction:column;gap:8px;padding:16px 12px;border:6px solid #26262b;border-radius:34px;background:#f1f3f4;color:#202124;font-size:12px;line-height:1.35;overflow:hidden;box-shadow:0 60px 110px -50px #000} .sr-q{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;border-radius:99px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.15);font-size:13px} .sr-q i{width:11px;height:11px;border:2px solid #5f6368;border-radius:50%} .sr-z{position:relative;display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:#fff;transition:opacity .35s,box-shadow .35s,transform .35s} .sr-z small{color:#4d5156;font-size:11px}.sr-z>b{color:#1a0dab;font-size:13.5px;font-weight:500}.sr-z>span{color:#4d5156} .sr-map{padding:0;overflow:hidden} .sr-m{position:relative;height:96px;background:linear-gradient(90deg,transparent 46%,#fff 46%,#fff 49%,transparent 49%),linear-gradient(0deg,transparent 58%,#fff 58%,#fff 62%,transparent 62%),linear-gradient(135deg,#e2eae3,#dce4ec)} .sr-m i{position:absolute;width:14px;height:14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#b9bec6} .sr-m .p1{left:24%;top:40%}.sr-m .p2{left:74%;top:30%}.sr-m .p3{left:54%;top:36%;width:20px;height:20px;background:#d93025} .sr-f{display:flex;flex-direction:column;gap:2px;padding:10px 12px} .sr-f b{color:#1a0dab;font-size:14px;font-weight:600}.sr-f em{font-style:normal;color:#188038} .sr-a{display:flex;gap:5px;margin-top:4px}.sr-a u{text-decoration:none;padding:3px 8px;border-radius:99px;border:1px solid #dadce0;color:#1a73e8;font-size:11px} .sr .sr-z{opacity:.4} .sr[data-z="pub"] .sr-ad,.sr[data-z="fiche"] .sr-map,.sr[data-z="seo"] .sr-org{opacity:1;transform:scale(1.03);box-shadow:0 0 0 2px var(--acc),0 14px 30px -12px rgba(122,125,246,.6)} .sr-c{position:relative;display:flex;flex-direction:column;gap:14px} .sr-b{display:flex;flex-direction:column;align-items:flex-start;gap:8px} .sr-b button{min-height:42px;padding:9px 16px;border-radius:99px;border:1px solid var(--line2);background:transparent;color:var(--mute);font:500 14.5px/1 Inter,"Inter Fallback",system-ui,sans-serif;cursor:pointer;transition:background .2s,color .2s,border-color .2s} @media (hover:hover){.sr-b button:hover{color:var(--ink);border-color:var(--ink)}} .sr-b button[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--onacc)} .sr-t{margin:0;max-width:16em;color:#cfcfd4;font-size:15px;line-height:1.5} .sr-t span{display:none}.sr[data-z="pub"] .sr-t [data-z="pub"],.sr[data-z="fiche"] .sr-t [data-z="fiche"],.sr[data-z="seo"] .sr-t [data-z="seo"]{display:inline} .sr-t a{display:inline-block;margin-top:6px;color:var(--acc-t);font-weight:600;text-decoration:none} .sr figcaption{grid-column:1/-1;font-size:13.5px;color:var(--dim)} @media (max-width:600px){.sr{grid-template-columns:1fr;justify-items:center;gap:20px}.sr-c{align-items:center;text-align:center}.sr-b{flex-direction:row;flex-wrap:wrap;justify-content:center}.sr-t{max-width:none}} /* Offres : quel forfait pour vous ? */ .fz{position:relative;padding:clamp(22px,2.6vw,32px);border:1px solid rgba(122,125,246,.45);border-radius:20px;background:linear-gradient(140deg,rgba(122,125,246,.12),transparent 55%),var(--card);box-shadow:0 60px 110px -60px #000} .fz-k{margin:0 0 4px;font-size:22px;font-weight:700;letter-spacing:-.02em} .fz-q{margin:0 0 14px;color:var(--mute);font-size:15px} .fz-o{display:grid;gap:8px} .fz-o a{display:flex;align-items:center;gap:12px;min-height:46px;padding:10px 14px;border-radius:12px;border:1px solid var(--line2);color:#cfcfd4;font-size:15px;text-decoration:none;transition:border-color .2s,background .2s,color .2s} .fz-o a::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line2);transition:border-color .2s,box-shadow .2s} @media (hover:hover){.fz-o a:hover{border-color:var(--ink);color:var(--ink)}} .fz-o a[aria-current="true"]{border-color:var(--acc);background:var(--acc-bg);color:var(--ink)} .fz-o a[aria-current="true"]::before{border-color:var(--acc);box-shadow:inset 0 0 0 4px var(--card),inset 0 0 0 8px var(--acc)} .fz-r{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)} .fz-r[hidden]{display:none} .fz-n{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acc-t)} .fz-r p{margin:6px 0 10px;color:#cfcfd4;font-size:15px} .fz-p{font-size:30px;letter-spacing:-.03em;margin-bottom:14px}.fz-p .pr-n{margin-left:8px;font-size:.5em;color:var(--dim)} .fz-l{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px} .fz-l>a:not(.btn){color:var(--ink);font-weight:600;font-size:15px;text-decoration:none} @media (max-width:1000px){.fz,.ab,.sr{max-width:620px}} .offre-on .fz-p .pr-n{text-decoration:line-through} .sr-ph{aspect-ratio:9/14.2} .sr-z,.sr-q{flex:none}@media (max-width:600px){.sr-ph{aspect-ratio:auto;padding-bottom:22px}} .sr-a u{white-space:nowrap} .xv-img{width:100%;object-fit:cover;object-position:70% 45%} .w.hero>*,.ch-g>*{min-width:0}@media (max-width:600px){.hv-s{margin-top:46px}} /* zoom fort sur téléphone (≈ 200 %, moins de 300 px de large) : longs mots coupés, cartes et rangées qui ne débordent plus */ @media (max-width:300px){h1,h2,h3{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}.card,.plan{padding:18px 14px;min-width:0}.om-act{flex-wrap:wrap}.om-dots{display:none}main [class]{grid-template-columns:minmax(0,1fr)!important}fieldset{min-width:0}.t-spec .s2{font-size:38px}} /* bandeau de lancement : version courte sur téléphone (2 lignes au lieu de 3 à 320 px) */ .annonce i{font-style:normal}.annonce .an-c{display:none} @media (max-width:480px){.annonce .an-l{display:none}.annonce .an-c{display:inline}.annonce a>span{margin-left:2px}} /* page /paiement/ (hors menu) : récapitulatif + un état visible à la fois (data-etat peut en contenir deux : « annule carte ») */ .pay-w{max-width:680px} .pay{margin-top:28px;padding:28px;border:1px solid var(--line);border-radius:18px;background:var(--card)} .pay-r{display:grid;gap:12px;margin:0 0 22px;padding-bottom:20px;border-bottom:1px solid var(--line)} .pay-r div{display:flex;justify-content:space-between;gap:16px}.pay-r dt{color:var(--mute)}.pay-r dd{margin:0;text-align:right;font-weight:600} .pay-m dd{font-size:24px} .pay-e{display:none}.pay-e p+p,.pay-e p+.btn{margin-top:12px} .pay[data-etat~=verif] [data-e=verif],.pay[data-etat~=carte] [data-e=carte],.pay[data-etat~=envoi] [data-e=envoi],.pay[data-etat~=virement] [data-e=virement],.pay[data-etat~=ok] [data-e=ok],.pay[data-etat~=annule] [data-e=annule],.pay[data-etat~=erreur] [data-e=erreur],.pay[data-etat~=invalide] [data-e=invalide]{display:block} .pay[data-etat~=annule] [data-e=annule],.pay[data-etat~=erreur] [data-e=erreur]{margin-bottom:18px} .pay-n{color:var(--mute);font-size:15px;margin-top:12px} .pay-ok{font-size:20px;color:#7fe0b0} @media (max-width:600px){.pay{padding:20px}.pay-r{gap:8px}.pay-r div{gap:12px;font-size:15px}.pay-m dd{font-size:21px}.pay .btn{width:100%;justify-content:center}} .p-paiement .annonce{display:none} .pay{display:flex;flex-direction:column}.pay-r{order:-2}.pay [data-e=annule],.pay [data-e=erreur]{order:-1} .pay-r[hidden]{display:none} /* liens isolés : zone tactile d'au moins 24 px (WCAG 2.2) */ .ox-n a,#sr [data-z] a{display:inline-block;padding:3px 0} /* ===== Visibilité : un seul commerce fictif suivi de bout en bout (Maison Pétale) ===== */ /* parcours en 5 étapes */ .pj5-s{padding-top:clamp(56px,7vw,90px);padding-bottom:0} .pj5{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;counter-reset:pj} .pj5 li{counter-increment:pj;display:flex} .pj5 a,.pj5 button{position:relative;display:flex;flex-direction:column;gap:6px;width:100%;padding:18px 16px;border:1px solid var(--line2);border-radius:14px;background:var(--card);color:var(--ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:border-color .25s,background .25s} .pj5 a::before,.pj5 button::before{content:counter(pj);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--acc-bg);color:var(--acc-t);font-size:13px;font-weight:700;margin-bottom:4px} @media (hover:hover){.pj5 a:hover,.pj5 button:hover{border-color:var(--acc);background:var(--card2)}} .pj5 b{font-size:16px}.pj5 span{color:var(--mute);font-size:14px;line-height:1.45} .pj5 li:not(:last-child) a::after,.pj5 li:not(:last-child) button::after{content:"→";position:absolute;right:-11px;top:24px;z-index:1;color:var(--dim);font-size:14px} .pj5-n{margin-top:16px;color:var(--dim);font-size:14px;max-width:60em} @media (max-width:900px){.pj5{grid-template-columns:1fr;gap:8px}.pj5 a,.pj5 button{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:12px;padding:14px 16px}.pj5 a::before,.pj5 button::before{margin:0}.pj5 span{flex-basis:100%;padding-left:40px}.pj5 li:not(:last-child) a::after,.pj5 li:not(:last-child) button::after{content:none}} /* carte Google Maps + fiche d'établissement (démonstration, style clair façon Google) */ .gmd{margin:40px 0 0} .gmd-app{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);border-radius:18px;overflow:hidden;background:#fff;color:#202124;box-shadow:0 30px 60px -30px rgba(0,0,0,.7);font-family:Inter,system-ui,sans-serif} .gmd-map{position:relative;min-height:440px;background:#eef0e8;overflow:hidden} .gmd-map::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 46px,#fff 46px 50px,transparent 50px) 0 0/96px 96px,linear-gradient(transparent 0 46px,#fff 46px 50px,transparent 50px) 0 0/96px 96px;opacity:.7} .gmd-loire{position:absolute;left:-10%;right:-10%;top:66%;height:54px;background:#aad3df;transform:rotate(-8deg);border-radius:40px} .gmd-r{position:absolute;background:#fde293;border:1px solid #f2c84b} .gmd-r.r1{left:0;right:0;top:38%;height:9px}.gmd-r.r2{top:0;bottom:0;left:30%;width:9px}.gmd-r.r3{top:0;bottom:30%;left:68%;width:7px;transform:rotate(12deg)}.gmd-r.r4{left:10%;right:20%;top:18%;height:6px;transform:rotate(-4deg);background:#fff;border-color:#e3e3e3} .gmd-p{position:absolute;width:12px;height:12px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#9aa0a6;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.3)} .gmd-p.x1{left:18%;top:52%}.gmd-p.x2{left:78%;top:24%}.gmd-p.x3{left:52%;top:80%} .gmd-pin{position:absolute;left:44%;top:34%;display:flex;align-items:center;gap:6px;transform:translate(-14px,-34px)} .gmd-pin svg{width:38px;height:38px;fill:#b4523f;stroke:#fff;stroke-width:1.4;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))} .gmd-pin svg circle{fill:#fff;stroke:none} .gmd-pin b{padding:4px 9px;border-radius:6px;background:#fff;color:#b4523f;font-size:13px;box-shadow:0 1px 4px rgba(0,0,0,.25);white-space:nowrap} .gmd-q{position:absolute;z-index:2;left:16px;right:16px;top:16px;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:28px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);font-size:15px} .gmd-q svg,.ad2-q svg{width:18px;height:18px;flex:none;fill:none;stroke:#5f6368;stroke-width:2} .gmd-chips{position:absolute;z-index:2;left:16px;top:70px;display:flex;gap:6px;flex-wrap:wrap} .gmd-chips span{padding:6px 12px;border-radius:16px;background:#fff;font-size:12.5px;box-shadow:0 1px 3px rgba(0,0,0,.18)} .gmd-card{position:relative;border-left:1px solid #e3e3e3;display:flex;flex-direction:column} .gmd-card>img{width:100%;height:150px;object-fit:cover;display:block} .gmd-in{padding:16px 18px 18px;display:flex;flex-direction:column} .gmd-h{font-size:22px;font-weight:500;color:#202124} .gmd-c{color:#70757a;font-size:14px;margin-top:2px} .gmd-o{font-size:14px;color:#70757a;margin-top:2px}.gmd-o em{font-style:normal;color:#188038;font-weight:600} .gmd-act{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:14px 0 6px;padding-bottom:12px;border-bottom:1px solid #e8eaed} .gmd-act span{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;color:#1a73e8} .gmd-act i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid #dadce0;font-style:normal;font-size:15px} .gmd-act .on i{background:#e8f0fe;border-color:#1a73e8} .gmd-l{list-style:none;margin:6px 0 0;padding:0;font-size:13.5px} .gmd-l li{display:flex;gap:12px;padding:6px 0;color:#3c4043}.gmd-l i{width:18px;color:#1a73e8;font-style:normal;text-align:center} .gmd-ph{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:10px} .gmd-ph img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:6px;display:block} .gmd-av{margin-top:10px;padding:10px 12px;border:1px dashed #c4c7c5;border-radius:8px;color:#70757a;font-size:12.5px} .gmd-n{position:absolute;z-index:3;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--acc);color:#0a0a0b;font:700 14px Inter,sans-serif;box-shadow:0 0 0 4px rgba(122,125,246,.3)} .gmd-n.n1{left:calc(44% - 50px);top:calc(34% - 30px)}.gmd-in{position:relative}.gmd-n.n2{right:16px;top:16px}.gmd-act .on{position:relative}.gmd-n.n3{width:22px;height:22px;font-size:12px;right:calc(50% - 32px);top:-8px} .gmd figcaption{margin-top:18px} .gmd-k{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px 22px;font-size:15px;color:var(--mute);line-height:1.5} .gmd-k b{color:var(--ink)}.gmd-k .lk{color:var(--acc-t);display:inline-block;padding:3px 0} .gmd-f{display:block;margin-top:14px;color:var(--dim);font-size:13px} @media (max-width:820px){.gmd-app{grid-template-columns:1fr}.gmd-map{min-height:300px}.gmd-pin{top:62%;left:38%}.gmd-n.n1{left:calc(38% - 50px);top:calc(62% - 30px)}.gmd-loire{top:84%}.gmd-r.r1{top:52%}.gmd-card{border-left:0;border-top:1px solid #e3e3e3}.gmd-card>img{height:130px}.gmd-k{grid-template-columns:1fr}} /* publicité : annonce Google qui mène à la page Commander + publication Instagram sponsorisée */ .ad2{margin:0;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;align-items:start;font-family:Inter,system-ui,sans-serif} .ad2-g,.ad2-i{border-radius:16px;background:#fff;color:#202124;box-shadow:0 24px 50px -28px rgba(0,0,0,.7)} .ad2-g{padding:16px} .ad2-q{display:flex;align-items:center;gap:10px;padding:11px 16px;border:1px solid #dfe1e5;border-radius:24px;font-size:15px} .ad2-r{margin-top:14px;padding:4px 2px} .ad2-s{font-size:12.5px;color:#4d5156}.ad2-s b{color:#202124} .ad2-h{display:block;margin:5px 0 4px;color:#1a0dab;font-size:18px;font-weight:500;line-height:1.3} .ad2-r p{margin:0;font-size:14px;color:#4d5156;line-height:1.5} .ad2-sl{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px}.ad2-sl u{color:#1a0dab;font-size:14px;text-decoration:none} .ad2-to{margin-top:16px;padding-top:14px;border-top:1px dashed #dadce0} .ad2-to>span{font-size:12.5px;color:#5f6368} .ad2-lp{margin-top:8px;padding:14px 16px;border-radius:10px;background:#f7f1ea;color:#1d1a17;text-align:center} .ad2-lp small{font:600 10px/1 Inter,sans-serif;letter-spacing:.2em;color:#b4523f} .ad2-lp p{margin:8px 0 10px;font:400 17px/1.45 Georgia,"Times New Roman",serif} .ad2-lp u{color:#b4523f;font-style:italic;text-decoration-thickness:1px} .ad2-lp em{display:inline-block;padding:8px 14px;background:#1d1a17;color:#f7f1ea;font:600 11px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;font-style:normal} .ad2-i{overflow:hidden} .ad2-ih{display:flex;align-items:center;gap:10px;padding:10px 12px} .ad2-ih i{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#f7f1ea 40%,#b4523f 42%);border:2px solid #e1306c} .ad2-ih span{display:flex;flex-direction:column;font-size:13px;line-height:1.2}.ad2-ih small{color:#737373;font-size:11.5px} .ad2-i img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block} .ad2-cta{display:flex;justify-content:space-between;padding:11px 12px;background:#efefef;font-size:13.5px;font-weight:600;color:#0095f6} .ad2-i p{margin:0;padding:10px 12px 14px;font-size:13px;line-height:1.45;color:#262626} .ad2 figcaption{grid-column:1/-1;margin-top:4px;font-size:14px;color:var(--mute);line-height:1.5} .ad2 figcaption .lk{color:var(--acc-t);display:inline-block;padding:3px 0} @media (max-width:700px){.ad2{grid-template-columns:1fr}.ad2-i{max-width:360px}} /* en-tête collant : un élément du menu qui reçoit le focus (clavier) est déjà visible ; sans cette marge négative, la marge de défilement (scroll-padding-top) faisait remonter la page de 80 px */ .nav a,.nav button{scroll-margin-top:-120px} /* menu ouvert (téléphone, tablette) : ancré à l'écran juste sous l'en-tête (le script pose top), donc toujours visible après défilement ; le flou de l'en-tête (761-1000 px) est retiré pendant ce temps : un flou ferait de l'en-tête le repère du menu au lieu de l'écran */ @media (max-width:1000px){html.mopen .menu.open{position:fixed}html.mopen .nav.s{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(9,9,10,.96)}} /* haut des pages intérieures (.ch) : l'entrée en fondu se joue dès le premier affichage, en CSS seul, au lieu d'attendre le script (le script masquait le titre puis le réaffichait : plus grand élément visible 1,3 s plus tard sur téléphone, mesuré le 19/10) */ @keyframes rvin{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} .ch .rv{animation:rvin .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*100ms)} html.js .ch .rv{opacity:1;transform:none;transition:none} @media (prefers-reduced-motion:reduce){.ch .rv{animation:none}}