/* ===================================================================== AXCYLIA — Proposition de styles personnalisables par le visiteur Styles : original (défaut) · atelier · nocturne · pop · aurore · suisse · nature — 4 coloris chacun Pilotage : attributs data-style / data-coloris sur (voir theme.js) ===================================================================== */ /* ---- Coloris : chaque style propose 4 teintes (1 = teinte par défaut) ---- */ :root[data-style=original]{--teal:#2698A0;--teal-rgb:38 152 160;--teal-light:#3FB5BD;--teal-light-rgb:63 181 189;--teal-glow:#7FD8DD;--teal-glow-rgb:127 216 221;--teal-pale:#E8F5F6} :root[data-style=original][data-coloris="2"]{--teal:#5563DE;--teal-rgb:85 99 222;--teal-light:#6E7AE3;--teal-light-rgb:110 122 227;--teal-glow:#A2A9ED;--teal-glow-rgb:162 169 237;--teal-pale:#EEEFFC} :root[data-style=original][data-coloris="3"]{--teal:#1E9A6A;--teal-rgb:30 154 106;--teal-light:#40A980;--teal-light-rgb:64 169 128;--teal-glow:#83C7AD;--teal-glow-rgb:131 199 173;--teal-pale:#E8F5F0} :root[data-style=original][data-coloris="4"]{--teal:#DD5E43;--teal-rgb:221 94 67;--teal-light:#E2765F;--teal-light-rgb:226 118 95;--teal-glow:#ECA698;--teal-glow-rgb:236 166 152;--teal-pale:#FCEFEC} :root[data-style=atelier]{--teal:#B4532A;--teal-rgb:180 83 42;--teal-light:#BE6B48;--teal-light-rgb:190 107 72;--teal-glow:#D6A08A;--teal-glow-rgb:214 160 138;--teal-pale:#EBD8C9} :root[data-style=atelier][data-coloris="2"]{--teal:#5F7446;--teal-rgb:95 116 70;--teal-light:#758760;--teal-light-rgb:117 135 96;--teal-glow:#A7B399;--teal-glow-rgb:167 179 153;--teal-pale:#DEDDCD} :root[data-style=atelier][data-coloris="3"]{--teal:#2F4A7A;--teal-rgb:47 74 122;--teal-light:#4C638D;--teal-light-rgb:76 99 141;--teal-glow:#8D9BB6;--teal-glow-rgb:141 155 182;--teal-pale:#DDE1E8} :root[data-style=atelier][data-coloris="4"]{--teal:#A8741A;--teal-rgb:168 116 26;--teal-light:#B4873A;--teal-light-rgb:180 135 58;--teal-glow:#CFB381;--teal-glow-rgb:207 179 129;--teal-pale:#EADDC6} :root[data-style=nocturne]{--teal:#C3F24B;--teal-rgb:195 242 75;--teal-light:#CFF56F;--teal-light-rgb:207 245 111;--teal-glow:#E4F9AE;--teal-glow-rgb:228 249 174;--teal-pale:#212A16} :root[data-style=nocturne][data-coloris="2"]{--teal:#A08CFF;--teal-rgb:160 140 255;--teal-light:#B3A3FF;--teal-light-rgb:179 163 255;--teal-glow:#D4CBFF;--teal-glow-rgb:212 203 255;--teal-pale:#1C1B2F} :root[data-style=nocturne][data-coloris="3"]{--teal:#43D9EB;--teal-rgb:67 217 235;--teal-light:#69E1EF;--teal-light-rgb:105 225 239;--teal-glow:#AAEEF6;--teal-glow-rgb:170 238 246;--teal-pale:#0F262C} :root[data-style=nocturne][data-coloris="4"]{--teal:#FFB547;--teal-rgb:255 181 71;--teal-light:#FFC46C;--teal-light-rgb:255 196 108;--teal-glow:#FFDEAC;--teal-glow-rgb:255 222 172;--teal-pale:#2A2115} :root[data-style=pop]{--teal:#FFD23F;--teal-rgb:255 210 63;--teal-light:#FFD95C;--teal-light-rgb:255 217 92;--teal-glow:#FFE282;--teal-glow-rgb:255 226 130;--teal-pale:#FFEEB6} :root[data-style=pop][data-coloris="2"]{--teal:#FF8FB8;--teal-rgb:255 143 184;--teal-light:#FFA0C3;--teal-light-rgb:255 160 195;--teal-glow:#FFB6D1;--teal-glow-rgb:255 182 209;--teal-pale:#FFD4E4} :root[data-style=pop][data-coloris="3"]{--teal:#8DB2FF;--teal-rgb:141 178 255;--teal-light:#9EBEFF;--teal-light-rgb:158 190 255;--teal-glow:#B5CDFF;--teal-glow-rgb:181 205 255;--teal-pale:#D4E2FF} :root[data-style=pop][data-coloris="4"]{--teal:#6FE0A8;--teal-rgb:111 224 168;--teal-light:#85E5B5;--teal-light-rgb:133 229 181;--teal-glow:#A1EBC6;--teal-glow-rgb:161 235 198;--teal-pale:#C8F3DE} :root[data-style=aurore]{--teal:#6D4AFF;--teal-rgb:109 74 255;--teal-light:#8365FF;--teal-light-rgb:131 101 255;--teal-glow:#AF9BFF;--teal-glow-rgb:175 155 255;--teal-pale:#EDE9FF;--acc2:#EC4899;--acc2-rgb:236 72 153} :root[data-style=aurore][data-coloris="2"]{--teal:#2563EB;--teal-rgb:37 99 235;--teal-light:#467AEE;--teal-light-rgb:70 122 238;--teal-glow:#87A9F4;--teal-glow-rgb:135 169 244;--teal-pale:#E5ECFD;--acc2:#06B6D4;--acc2-rgb:6 182 212} :root[data-style=aurore][data-coloris="3"]{--teal:#F2542D;--teal-rgb:242 84 45;--teal-light:#F46E4C;--teal-light-rgb:244 110 76;--teal-glow:#F8A18C;--teal-glow-rgb:248 161 140;--teal-pale:#FDEAE6;--acc2:#E83E8C;--acc2-rgb:232 62 140} :root[data-style=aurore][data-coloris="4"]{--teal:#0E9F6E;--teal-rgb:14 159 110;--teal-light:#32AD84;--teal-light-rgb:50 173 132;--teal-glow:#7ACAAF;--teal-glow-rgb:122 202 175;--teal-pale:#E2F3EE;--acc2:#0EA5E9;--acc2-rgb:14 165 233} :root[data-style=suisse]{--teal:#E3301C;--teal-rgb:227 48 28;--teal-light:#E74F3E;--teal-light-rgb:231 79 62;--teal-glow:#F08D82;--teal-glow-rgb:240 141 130;--teal-pale:#F0D7D1} :root[data-style=suisse][data-coloris="2"]{--teal:#1D3FD8;--teal-rgb:29 63 216;--teal-light:#3F5CDE;--teal-light-rgb:63 92 222;--teal-glow:#8395EA;--teal-glow-rgb:131 149 234;--teal-pale:#D4D9EB} :root[data-style=suisse][data-coloris="3"]{--teal:#0A8F5B;--teal-rgb:10 143 91;--teal-light:#2FA074;--teal-light-rgb:47 160 116;--teal-glow:#78C1A5;--teal-glow-rgb:120 193 165;--teal-pale:#D2E4D9} :root[data-style=suisse][data-coloris="4"]{--teal:#FF5B00;--teal-rgb:255 91 0;--teal-light:#FF7426;--teal-light-rgb:255 116 38;--teal-glow:#FFA573;--teal-glow-rgb:255 165 115;--teal-pale:#F4DDCD} :root[data-style=nature]{--teal:#3F8A5A;--teal-rgb:63 138 90;--teal-light:#5C9C73;--teal-light-rgb:92 156 115;--teal-glow:#95BFA4;--teal-glow-rgb:149 191 164;--teal-pale:#CBDECD} :root[data-style=nature][data-coloris="2"]{--teal:#C0673F;--teal-rgb:192 103 63;--teal-light:#C97E5C;--teal-light-rgb:201 126 92;--teal-glow:#DCAB95;--teal-glow-rgb:220 171 149;--teal-pale:#E5D7C8} :root[data-style=nature][data-coloris="3"]{--teal:#7B6BB3;--teal-rgb:123 107 179;--teal-light:#8F81BE;--teal-light-rgb:143 129 190;--teal-glow:#B6AED5;--teal-glow-rgb:182 174 213;--teal-pale:#D7D8DF} :root[data-style=nature][data-coloris="4"]{--teal:#3C82A0;--teal-rgb:60 130 160;--teal-light:#5995AE;--teal-light-rgb:89 149 174;--teal-glow:#94BACB;--teal-glow-rgb:148 186 203;--teal-pale:#CADCDB} /* ===================================================================== TRANSITIONS - changement de style : rideau aux couleurs du style choisi (theme.js) - changement de coloris : cercle qui s'ouvre depuis le clic (View Transitions) ===================================================================== */ ::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal} .cfg-ring,.cfg-veil{position:fixed;inset:0;clip-path:circle(0px at 50% 50%);pointer-events:auto;cursor:progress} .cfg-ring{z-index:1000;background:var(--lc)} .cfg-veil{z-index:1001;display:flex;align-items:center;justify-content:center;overflow:hidden; background:radial-gradient(900px 600px at 70% 15%,rgb(var(--lc-rgb) / .38),transparent 60%),linear-gradient(158deg,#0A1322,#16264B 55%,#1D3E68); color:#fff;font-family:'Inter',-apple-system,'Segoe UI',sans-serif} .cfg-veil-in{text-align:center;padding:24px;opacity:0} .cfg-veil-k{display:block;font-size:12px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;opacity:.6;margin-bottom:16px} .cfg-veil-n{display:block;font-size:clamp(58px,11vw,150px);line-height:.95;font-weight:800;letter-spacing:-.045em} .cfg-veil-d{display:block;margin-top:18px;font-size:clamp(15px,1.6vw,19px);opacity:.75} .cfg-veil-bar{display:block;width:140px;height:4px;margin:28px auto 0;background:var(--lc);border-radius:4px;transform:scaleX(0)} .cfg-veil[data-for=atelier]{background:#F6F1E7;color:#241D17;font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif} .cfg-veil[data-for=atelier] .cfg-veil-k{font-family:'Inter',sans-serif;color:var(--lc);opacity:1} .cfg-veil[data-for=atelier] .cfg-veil-n{font-weight:500;font-style:italic;letter-spacing:-.02em} .cfg-veil[data-for=atelier] .cfg-veil-bar{height:1px;border-radius:0;background:#241D17;width:220px} .cfg-veil[data-for=nocturne]{background:radial-gradient(700px 460px at 50% 50%,rgb(var(--lc-rgb) / .24),transparent 65%),#07090D} .cfg-veil[data-for=nocturne] .cfg-veil-n{font-weight:700;letter-spacing:-.055em} .cfg-veil[data-for=nocturne] .cfg-veil-d{font-family:"Cascadia Code",Consolas,Menlo,monospace;color:var(--lc);opacity:1} .cfg-veil[data-for=nocturne] .cfg-veil-bar{box-shadow:0 0 26px var(--lc)} .cfg-ring[data-for=pop]{background:#111} .cfg-veil[data-for=pop]{background:radial-gradient(rgb(17 17 17 / .2) 1.3px,transparent 1.7px) 0 0/22px 22px,var(--lc);color:#111} .cfg-veil[data-for=pop] .cfg-veil-n{display:inline-block;font-weight:900;letter-spacing:-.06em;background:#fff;border:4px solid #111;border-radius:22px;box-shadow:10px 10px 0 #111;padding:.02em .22em .1em;rotate:-3deg} .cfg-veil[data-for=pop] :is(.cfg-veil-k,.cfg-veil-d){opacity:1;font-weight:800} .cfg-veil[data-for=pop] .cfg-veil-d{margin-top:30px} .cfg-veil[data-for=pop] .cfg-veil-bar{background:#111;height:7px} .cfg-ring[data-for=aurore]{background:linear-gradient(120deg,var(--lc),var(--lc2))} .cfg-veil[data-for=aurore]{background:radial-gradient(40vmax 30vmax at 20% 25%,rgb(var(--lc-rgb) / .45),transparent 70%),radial-gradient(40vmax 30vmax at 80% 75%,rgb(var(--lc2-rgb) / .42),transparent 70%),#F4F2FB;color:#1B1537} .cfg-veil[data-for=aurore] .cfg-veil-n{background:linear-gradient(120deg,var(--lc),var(--lc2));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em} .cfg-veil[data-for=aurore] .cfg-veil-bar{background:linear-gradient(90deg,var(--lc),var(--lc2))} .cfg-veil[data-for=suisse]{background:#F2F2EE;color:#0A0A0A;font-family:"Helvetica Neue",Inter,Arial,sans-serif;justify-content:flex-start;align-items:flex-end} .cfg-veil[data-for=suisse] .cfg-veil-in{text-align:left;padding:0 5vw 7vh} .cfg-veil[data-for=suisse] .cfg-veil-k{color:var(--lc);opacity:1;letter-spacing:.08em} .cfg-veil[data-for=suisse] .cfg-veil-n{font-size:clamp(84px,19vw,280px);letter-spacing:-.075em;line-height:.8} .cfg-veil[data-for=suisse] .cfg-veil-bar{margin:30px 0 0;width:min(60vw,640px);height:18px;border-radius:0;transform-origin:0 50%} .cfg-veil[data-for=nature]{background:radial-gradient(50vmax 40vmax at 80% 20%,rgb(var(--lc-rgb) / .3),transparent 70%),radial-gradient(40vmax 30vmax at 10% 90%,rgb(var(--lc-rgb) / .18),transparent 70%),#EEF3EA;color:#1F3B2D;font-family:Candara,Seravek,"Gill Sans","Trebuchet MS",sans-serif} .cfg-veil[data-for=nature] .cfg-veil-k{color:var(--lc);opacity:1;font-family:'Inter',sans-serif} .cfg-veil[data-for=nature] .cfg-veil-n{font-weight:700;letter-spacing:-.01em} .cfg-veil[data-for=nature] .cfg-veil-bar{width:26px;height:26px;border-radius:0 100% 0 100%;background:var(--lc)} /* ===================================================================== STYLE 1 — ATELIER : éditorial, papier, typographie à empattements ===================================================================== */ :root[data-style=atelier]{ --navy:#241D17;--navy-deep:#1A1511;--navy-mid:#2B231C;--navy-soft:#3A3028; --ink:#2A231C;--muted:#6E6356;--line:#DCD2C1; --bg:#F6F1E7;--bg-alt:#EFE7D8;--surface:#FBF8F1; --r:3px; --shadow:10px 10px 0 rgb(var(--teal-rgb) / .16); --shadow-xl:10px 10px 0 rgb(var(--teal-rgb) / .2); --mx-dot-rgb:92 74 56; --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif; --cfg-bg:#FBF8F1;--cfg-ink:#241D17;--cfg-muted:#6E6356;--cfg-line:#DCD2C1;--cfg-r:4px; --cfg-border:1px solid #241D17;--cfg-shadow:10px 10px 0 rgb(var(--teal-rgb) / .22);--cfg-font:var(--serif); --cfg-fab-bg:#241D17;--cfg-fab-fg:#F6F1E7;--cfg-fab-r:3px;--cfg-fab-shadow:5px 5px 0 rgb(var(--teal-rgb) / .45),0 0 0 1px rgb(246 241 231 / .3); } :root[data-style=atelier] body{ background-color:var(--bg);color:var(--ink); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .29 0 0 0 0 .21 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } :root[data-style=atelier] #mx{opacity:.5} :root[data-style=atelier] #prog{background:var(--teal)} :root[data-style=atelier] :is(h1,h2,h3,.duo-title,.ad-h,.ad-title){font-family:var(--serif);letter-spacing:-.01em} :root[data-style=atelier] h1{font-weight:500;font-size:clamp(38px,5.3vw,66px);line-height:1.05} :root[data-style=atelier] h1 .accent{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--teal);font-style:italic} :root[data-style=atelier] h2{font-weight:500;font-size:clamp(30px,4vw,50px);line-height:1.08} :root[data-style=atelier] h3{font-weight:600;font-size:22px} :root[data-style=atelier] .btn{border-radius:2px} /* header */ :root[data-style=atelier] header{background:rgb(246 241 231 / .92);border-bottom:1px solid var(--ink)} :root[data-style=atelier] header.stuck{box-shadow:none;border-bottom-color:var(--ink)} :root[data-style=atelier] .nav-brand .name{font-family:var(--serif);font-weight:600;letter-spacing:.24em;color:var(--ink)} :root[data-style=atelier] .nav-links > a{color:var(--ink)} :root[data-style=atelier] .nav-links > a:not(.nav-cta)::after{height:1px} :root[data-style=atelier] .nav-cta{background:var(--ink);border-radius:2px} :root[data-style=atelier] .nav-cta:hover{background:var(--teal);box-shadow:none} /* hero */ :root[data-style=atelier] .hero{color:var(--ink);background:transparent;padding:86px 0 96px;border-bottom:1px solid var(--ink)} :root[data-style=atelier] .hero .grid-bg{opacity:1;background-image:linear-gradient(90deg,rgb(42 35 28 / .07) 1px,transparent 1px);background-size:calc(100% / 6) 100%;mask-image:none;-webkit-mask-image:none} :root[data-style=atelier] .hero-grid{grid-template-columns:1.12fr .88fr;gap:70px} @media(max-width:960px){:root[data-style=atelier] .hero-grid{grid-template-columns:1fr;gap:48px}:root[data-style=atelier] .hero{padding:60px 0 72px}} :root[data-style=atelier] .eyebrow{background:none;border:none;border-radius:0;padding:0;color:var(--teal);letter-spacing:.22em;font-size:12px} :root[data-style=atelier] .eyebrow .dot{width:34px;height:1px;border-radius:0;background:var(--teal);animation:none} :root[data-style=atelier] .hero p.lead{color:var(--muted)} :root[data-style=atelier] .hero p.lead strong{color:var(--ink)} :root[data-style=atelier] .btn-primary{background:var(--teal);box-shadow:none} :root[data-style=atelier] .btn-primary:hover{background:var(--ink);box-shadow:none} :root[data-style=atelier] .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)} :root[data-style=atelier] .btn-ghost:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)} :root[data-style=atelier] .hero-facts{border-top:1px solid var(--line)} :root[data-style=atelier] .fact svg{stroke:var(--teal)} :root[data-style=atelier] .fact span{color:var(--ink)} :root[data-style=atelier] .browser{transform:none;animation:none;border-radius:3px;border:1px solid var(--ink);box-shadow:16px 16px 0 rgb(var(--teal-rgb) / .18)} :root[data-style=atelier] .br-url svg{stroke:var(--teal)} :root[data-style=atelier] .br-bar{background:var(--bg-alt);border-bottom:1px solid var(--ink)} :root[data-style=atelier] .br-dot,:root[data-style=atelier] .ba-chrome .cd,:root[data-style=atelier] .ad-top .cd{background:transparent!important;border:1px solid var(--ink)} :root[data-style=atelier] .br-url{background:var(--surface);border-radius:2px;font-family:var(--serif);font-style:italic;font-size:11.5px} :root[data-style=atelier] .br-body{background:var(--surface)} :root[data-style=atelier] .sk{background:#E9E0D0;border-radius:2px} :root[data-style=atelier] .sk-hero{border-radius:2px} :root[data-style=atelier] .sk-card{background:var(--bg);border-color:var(--line);border-radius:2px} :root[data-style=atelier] .sk-card::before{border-radius:50%} :root[data-style=atelier] .sk-btn{border-radius:2px} :root[data-style=atelier] .chip-float{background:var(--surface);border:1px solid var(--ink);border-radius:2px;box-shadow:none;color:var(--ink);font-family:var(--serif);font-style:italic;font-weight:500;font-size:14.5px} /* bandeau */ :root[data-style=atelier] .marquee{background:var(--navy);color:#E9DFCD;border-bottom:none} :root[data-style=atelier] .mq-item{font-family:var(--serif);font-style:italic;font-weight:400;font-size:19px;letter-spacing:0} :root[data-style=atelier] .mq-item i{width:6px;height:6px;border-radius:0;transform:rotate(45deg);background:var(--teal-glow)} /* titres de section : mise en page éditoriale sur deux colonnes */ :root[data-style=atelier] .section-alt{background:rgb(239 231 216 / .72);border-color:var(--line)} :root[data-style=atelier] .section-head,:root[data-style=atelier] .section-head.center{ max-width:none;margin-left:0;margin-right:0;text-align:left; display:grid;grid-template-columns:1.1fr .9fr;column-gap:64px;align-items:end; padding-bottom:30px;border-bottom:1px solid var(--ink);margin-bottom:56px; } :root[data-style=atelier] .section-head .kicker{grid-column:1 / -1} :root[data-style=atelier] .section-head h2{margin-bottom:0} :root[data-style=atelier] .section-head p{font-size:17px} :root[data-style=atelier] .kicker{display:inline-flex;align-items:center;gap:12px;color:var(--teal);letter-spacing:.22em;font-size:12px} :root[data-style=atelier] .kicker::before{content:'';width:34px;height:1px;background:currentColor} @media(max-width:860px){ :root[data-style=atelier] .section-head,:root[data-style=atelier] .section-head.center{grid-template-columns:1fr} :root[data-style=atelier] .section-head p{margin-top:14px} } /* services : grille éditoriale numérotée */ :root[data-style=atelier] .cards{gap:0;counter-reset:svc} :root[data-style=atelier] .card{background:transparent;border:none;border-bottom:1px solid var(--line);border-radius:0;padding:44px 40px 44px 0;counter-increment:svc} :root[data-style=atelier] .card:nth-child(odd){border-right:1px solid var(--line)} :root[data-style=atelier] .card:nth-child(even){padding-left:40px;padding-right:0} :root[data-style=atelier] .card::before{display:none} :root[data-style=atelier] .card::after,:root[data-style=atelier] .card:hover::after{content:counter(svc,decimal-leading-zero);top:40px;right:40px;left:auto;width:auto;height:auto;background:none;font-family:var(--serif);font-style:italic;font-size:24px;line-height:1;color:var(--teal);transition:none} :root[data-style=atelier] .card:nth-child(even)::after{right:0} :root[data-style=atelier] .card:hover{transform:none;box-shadow:none;border-color:var(--line)} :root[data-style=atelier] .ico{width:50px;height:50px;border-radius:50%;background:transparent;border:1px solid var(--ink)} :root[data-style=atelier] .ico svg{stroke:var(--ink);width:22px;height:22px;stroke-width:1.6} :root[data-style=atelier] :is(.card,.arg):hover .ico{background:var(--ink);transform:none} :root[data-style=atelier] :is(.card,.arg):hover .ico svg{stroke:var(--bg)} :root[data-style=atelier] .card p{font-size:16px} :root[data-style=atelier] :is(.card,.duo-card) li{padding-left:28px} :root[data-style=atelier] :is(.card,.duo-card) li::before{border:none;transform:none;width:16px;height:1px;background:var(--teal);top:13px} @media(max-width:700px){ :root[data-style=atelier] .cards > .card:nth-child(n){padding:34px 0;border-right:none} :root[data-style=atelier] .cards > .card:nth-child(n)::after{right:0;top:34px} } /* avant / après */ :root[data-style=atelier] .ba-frame{border-radius:3px;border:1px solid var(--ink);box-shadow:16px 16px 0 rgb(var(--teal-rgb) / .16)} :root[data-style=atelier] .ba-chrome{background:var(--bg-alt);border-bottom:1px solid var(--ink)} :root[data-style=atelier] .ba-chrome .cu{background:var(--surface);border-color:var(--line);border-radius:2px;font-family:var(--serif);font-style:italic;font-size:13px} :root[data-style=atelier] .ba-tag{border-radius:2px} :root[data-style=atelier] .ba-tag.r{background:var(--teal);border-color:transparent} :root[data-style=atelier] .ba-knob{border:1px solid var(--ink);box-shadow:none} :root[data-style=atelier] .ba-knob svg{stroke:var(--ink)} :root[data-style=atelier] .ba-hint{font-family:var(--serif);font-style:italic;font-size:16px} :root[data-style=atelier] .ba-hint b{color:var(--ink)} :root[data-style=atelier] .ba-pts{gap:0;border-top:1px solid var(--ink)} :root[data-style=atelier] .ba-pt{text-align:left;padding:30px 30px 0 0} :root[data-style=atelier] .ba-pt + .ba-pt{padding-left:30px;border-left:1px solid var(--line)} :root[data-style=atelier] .ba-pt .i{margin:0 0 16px;border-radius:50%;background:transparent;border-color:var(--ink)} :root[data-style=atelier] .ba-pt .i svg{stroke:var(--ink)} :root[data-style=atelier] .ba-pt b{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink)} @media(max-width:760px){ :root[data-style=atelier] .ba-pts{gap:0} :root[data-style=atelier] .ba-pt + .ba-pt{padding-left:0;border-left:none;border-top:1px solid var(--line)} } /* arguments */ :root[data-style=atelier] .args{gap:0} :root[data-style=atelier] .arg{background:transparent;border:none;border-radius:0;padding:6px 36px 6px 0} :root[data-style=atelier] .arg + .arg{padding-left:36px;border-left:1px solid var(--line)} :root[data-style=atelier] .arg:hover{transform:none;box-shadow:none} :root[data-style=atelier] .arg .ico{background:transparent} @media(max-width:900px){ :root[data-style=atelier] .arg + .arg{padding:28px 0 6px;border-left:none;border-top:1px solid var(--line)} } /* applications */ :root[data-style=atelier] .app-list .i{border-radius:50%;background:transparent;border:1px solid var(--ink)} :root[data-style=atelier] .app-list .i svg{stroke:var(--ink)} :root[data-style=atelier] .app-list b{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink)} :root[data-style=atelier] .btn-dark{box-shadow:none} :root[data-style=atelier] .ad-frame{border-radius:3px;border:1px solid var(--ink);background:var(--surface);box-shadow:16px 16px 0 rgb(var(--teal-rgb) / .16)} :root[data-style=atelier] .ad-top{background:var(--bg-alt);border-bottom:1px solid var(--ink)} :root[data-style=atelier] .ad-top .tt{font-family:var(--serif);font-style:italic;color:var(--ink);font-weight:500;font-size:13.5px} :root[data-style=atelier] .ad-h{font-size:23px;font-weight:500} :root[data-style=atelier] :is(.ad-day,.ad-slot){border-radius:2px;background:var(--surface);border-width:1px} :root[data-style=atelier] .ad-day .n{font-family:var(--serif);color:var(--ink);font-size:19px} :root[data-style=atelier] .ad-day.on{background:var(--ink);border-color:var(--ink)} :root[data-style=atelier] .ad-day.on .d{color:#BFB3A0} :root[data-style=atelier] .ad-slot{color:var(--ink)} :root[data-style=atelier] .ad-slot.on{background:var(--teal);border-color:var(--teal);color:#fff} :root[data-style=atelier] .ad-slot:disabled{background:var(--bg-alt);color:#B5AA99} :root[data-style=atelier] .ad-go{border-radius:2px} :root[data-style=atelier] .ad-go:disabled{background:#E6DDCC;color:#9E9383} :root[data-style=atelier] .ad-go:not(:disabled):hover{background:var(--ink)} :root[data-style=atelier] .ad-check{background:transparent;border:1px solid var(--teal)} :root[data-style=atelier] .ad-ok .ad-title{font-weight:500;font-size:24px} :root[data-style=atelier] .ad-note{font-family:var(--serif);font-style:italic;font-size:15.5px} :root[data-style=atelier] :is(.ad-note b,.ad-again){color:var(--ink)} :root[data-style=atelier] :is(.ad-day .d,.ad-day .n){display:block} /* options */ :root[data-style=atelier] .chips{justify-content:flex-start;max-width:none;margin:0} :root[data-style=atelier] .chip{background:transparent;border-color:var(--ink);border-radius:2px;color:var(--ink)} :root[data-style=atelier] .chip:hover{background:var(--ink);border-color:var(--ink);color:var(--bg);box-shadow:none} /* formules */ :root[data-style=atelier] .duo-card{background:var(--surface);border:1px solid var(--ink);border-radius:3px} :root[data-style=atelier] .duo-card.dark{background:var(--navy);border-color:var(--navy)} :root[data-style=atelier] .duo-card.dark::before{display:none} :root[data-style=atelier] .duo-card.dark p{color:#C9BDAA} :root[data-style=atelier] .duo-card.dark li{color:#EDE4D3} :root[data-style=atelier] .duo-card.dark li::before{background:var(--teal-glow)} :root[data-style=atelier] .duo-title{font-size:32px;font-weight:500} :root[data-style=atelier] .duo-label{letter-spacing:.2em} /* méthode */ :root[data-style=atelier] .steps{gap:0} :root[data-style=atelier] .steps::before{display:none} :root[data-style=atelier] .step{padding:0 28px;border-left:1px solid var(--line)} :root[data-style=atelier] .step:first-child{border-left:none;padding-left:0} :root[data-style=atelier] .step .n,:root[data-style=atelier] .step:hover .n{width:auto;height:auto;background:none;box-shadow:none;border-radius:0;justify-content:flex-start;transform:none;font-family:var(--serif);font-style:italic;font-weight:400;font-size:60px;line-height:1;color:var(--teal);margin-bottom:18px} @media(max-width:900px){ :root[data-style=atelier] .steps{gap:40px 0} :root[data-style=atelier] .step:nth-child(odd){border-left:none;padding-left:0} } @media(max-width:540px){:root[data-style=atelier] .step:nth-child(n){border-left:none;padding:0}} /* faq */ :root[data-style=atelier] .q button{font-family:var(--serif);font-size:21px;font-weight:500;color:var(--ink);padding:26px 50px 26px 0} :root[data-style=atelier] .q button:hover{color:var(--teal)} :root[data-style=atelier] .q button::after{content:'+';border:none;transform:none;width:auto;height:auto;top:20px;right:4px;font-family:var(--serif);font-size:32px;line-height:1;color:var(--teal);font-weight:300} :root[data-style=atelier] .q.open button::after{transform:rotate(45deg)} :root[data-style=atelier] .q .a p{font-size:16px} /* zone */ :root[data-style=atelier] .zone-card{background:var(--surface);border:1px solid var(--ink);border-radius:3px;box-shadow:16px 16px 0 rgb(var(--teal-rgb) / .14)} :root[data-style=atelier] .zone-txt p strong{color:var(--ink)} :root[data-style=atelier] .zone-map svg path{fill:rgb(var(--teal-rgb) / .07);stroke:var(--ink);stroke-width:1.4;stroke-dasharray:6 5} :root[data-style=atelier] .zone-map svg g{fill:var(--ink);font-family:var(--serif)} :root[data-style=atelier] .zone-map svg circle[fill="#2698A0"]{fill:var(--teal)} :root[data-style=atelier] .zone-map svg circle[stroke="#2698A0"]{stroke:var(--teal)} :root[data-style=atelier] .zone-map svg circle[fill="#8FA2C2"]{fill:var(--muted)} :root[data-style=atelier] .zone-map svg > text{fill:var(--teal);font-family:var(--serif);paint-order:stroke;stroke:var(--surface);stroke-width:6px;stroke-linejoin:round} /* contact */ :root[data-style=atelier] .cta{background:var(--navy)} :root[data-style=atelier] .cta .grid-bg{opacity:1;background-image:linear-gradient(90deg,rgb(246 241 231 / .05) 1px,transparent 1px);background-size:calc(100% / 6) 100%;mask-image:none;-webkit-mask-image:none} :root[data-style=atelier] .cta h2{font-size:clamp(36px,5vw,64px);color:#F6F1E7} :root[data-style=atelier] .cta p{color:#CBBFAD} :root[data-style=atelier] .cf{background:var(--surface);border-radius:3px;box-shadow:16px 16px 0 rgb(var(--teal-rgb) / .45)} :root[data-style=atelier] .cf label{color:var(--ink);letter-spacing:.12em;font-size:11.5px} :root[data-style=atelier] :is(.cf input,.cf select,.cf textarea){border-radius:2px;border-color:#CFC3AF;background:#FFFDF8} :root[data-style=atelier] :is(.cf input,.cf select,.cf textarea):focus{border-color:var(--teal);box-shadow:0 0 0 3px rgb(var(--teal-rgb) / .15)} :root[data-style=atelier] .cf-note{font-family:var(--serif);font-style:italic;font-size:14px} :root[data-style=atelier] .cta .btn-ghost{color:#F6F1E7;border-color:rgb(246 241 231 / .4)} :root[data-style=atelier] .cta .btn-ghost:hover{background:#F6F1E7;color:var(--ink)} :root[data-style=atelier] .cta-actions .btn-primary:hover{background:#F6F1E7;color:var(--ink)} :root[data-style=atelier] .cta-mail{color:#A89C8A} :root[data-style=atelier] .cta-mail a{color:var(--teal-glow);border-color:rgb(var(--teal-glow-rgb) / .4)} /* pied de page */ :root[data-style=atelier] footer{background:var(--navy-deep);color:#A89C8A} :root[data-style=atelier] .foot-top{border-bottom-color:rgb(246 241 231 / .12)} :root[data-style=atelier] .foot-brand img{filter:brightness(0) invert(1);opacity:.85} :root[data-style=atelier] .foot-brand p{color:#A89C8A} :root[data-style=atelier] .foot-col .foot-h{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;font-size:19px;font-weight:500;color:#F6F1E7} :root[data-style=atelier] :is(.foot-col a,.foot-col span){color:#BCB09E} :root[data-style=atelier] .foot-col a:hover{color:var(--teal-glow)} :root[data-style=atelier] .foot-bot{color:#8A7F6F} /* barre mobile */ :root[data-style=atelier] .mbar{background:rgb(246 241 231 / .96);border-top:1px solid var(--ink);box-shadow:none} :root[data-style=atelier] .mbar a{border-radius:2px} :root[data-style=atelier] .mbar .m2{background:transparent;color:var(--ink);border-color:var(--ink)} /* ===================================================================== STYLE 2 — NOCTURNE : sombre, premium, accent lumineux ===================================================================== */ :root[data-style=nocturne]{ --navy:#F1F4F9;--navy-deep:#050608;--navy-mid:#0B0E13;--navy-soft:#141922; --ink:#D5DBE5;--muted:#8A94A6;--line:rgb(255 255 255 / .09); --bg:#07090D;--bg-alt:#0C1016;--surface:#0F131A;--surface-2:#151A23; --on-accent:#07090D; --r:20px; --shadow:0 24px 60px rgb(0 0 0 / .5); --shadow-xl:0 30px 80px rgb(0 0 0 / .6); --mx-dot-rgb:200 210 225; --mono:"Cascadia Code","Cascadia Mono","SF Mono",Menlo,Consolas,"Liberation Mono",monospace; --cfg-bg:#0F131A;--cfg-ink:#F1F4F9;--cfg-muted:#8A94A6;--cfg-line:rgb(255 255 255 / .1);--cfg-r:20px; --cfg-border:1px solid rgb(255 255 255 / .1);--cfg-shadow:0 30px 80px rgb(0 0 0 / .6),0 0 60px -20px rgb(var(--teal-rgb) / .35); --cfg-fab-bg:var(--teal);--cfg-fab-fg:#07090D;--cfg-fab-r:999px;--cfg-fab-shadow:0 0 0 1px rgb(var(--teal-rgb) / .5),0 10px 40px rgb(var(--teal-rgb) / .35); color-scheme:dark; } :root[data-style=nocturne] body{background:var(--bg);color:var(--ink)} :root[data-style=nocturne] ::selection{color:var(--on-accent)} :root[data-style=nocturne] #mx{opacity:.7} :root[data-style=nocturne] h1{font-size:clamp(40px,6.4vw,84px);letter-spacing:-.045em;line-height:1.02;font-weight:700} :root[data-style=nocturne] h1 .accent{background:linear-gradient(95deg,var(--teal) 10%,var(--teal-glow) 90%);-webkit-background-clip:text;background-clip:text} :root[data-style=nocturne] :is(h2,h3){color:#fff} :root[data-style=nocturne] h2{font-weight:700;letter-spacing:-.035em} :root[data-style=nocturne] .btn{border-radius:999px} /* header */ :root[data-style=nocturne] header{background:rgb(7 9 13 / .72);border-bottom:1px solid var(--line)} :root[data-style=nocturne] header.stuck{border-bottom-color:var(--line);box-shadow:none} :root[data-style=nocturne] .nav-brand img{filter:invert(1) hue-rotate(180deg) brightness(1.15)} :root[data-style=nocturne] .nav-brand .name{color:#fff} :root[data-style=nocturne] .nav-links > a{color:var(--muted)} :root[data-style=nocturne] .nav-links > a:not(.nav-cta):hover{color:#fff} :root[data-style=nocturne] .nav-cta{background:var(--teal);color:var(--on-accent)!important;border-radius:999px} :root[data-style=nocturne] .nav-cta:hover{background:#fff;box-shadow:0 0 0 4px rgb(var(--teal-rgb) / .25)} /* hero : centré, écran qui monte depuis le bas */ :root[data-style=nocturne] .hero{background:radial-gradient(1000px 560px at 50% -10%,rgb(var(--teal-rgb) / .2),transparent 65%),var(--bg);padding:96px 0 0} :root[data-style=nocturne] .hero .grid-bg{opacity:1;background-image:linear-gradient(rgb(255 255 255 / .045) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / .045) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 75% 65% at 50% 0%,#000 25%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 0%,#000 25%,transparent 100%)} :root[data-style=nocturne] .hero-grid{grid-template-columns:1fr;gap:70px;text-align:center;justify-items:center} :root[data-style=nocturne] .hero-grid > :first-child{max-width:900px} :root[data-style=nocturne] .eyebrow{font-family:var(--mono);text-transform:none;letter-spacing:.01em;font-weight:500;font-size:13px;background:rgb(var(--teal-rgb) / .07);border-color:rgb(var(--teal-rgb) / .3);color:var(--teal)} :root[data-style=nocturne] .eyebrow .dot{background:var(--teal)} :root[data-style=nocturne] .hero p.lead{margin-left:auto;margin-right:auto;max-width:660px;color:var(--muted)} :root[data-style=nocturne] .hero p.lead strong{color:#fff} :root[data-style=nocturne] .hero-actions{justify-content:center} :root[data-style=nocturne] .hero-facts{justify-content:center;border-top:none;padding-top:0;margin-bottom:0} :root[data-style=nocturne] .fact svg{stroke:var(--teal)} :root[data-style=nocturne] .fact span{color:var(--muted)} :root[data-style=nocturne] .btn-primary{color:var(--on-accent);box-shadow:0 0 0 1px rgb(var(--teal-rgb) / .5),0 10px 40px rgb(var(--teal-rgb) / .28)} :root[data-style=nocturne] .btn-primary:hover{background:#fff;box-shadow:0 0 0 4px rgb(var(--teal-rgb) / .25),0 16px 50px rgb(var(--teal-rgb) / .35)} :root[data-style=nocturne] .btn-ghost{background:rgb(255 255 255 / .04);border-color:rgb(255 255 255 / .14)} :root[data-style=nocturne] .mock-zone{width:100%;max-width:900px} :root[data-style=nocturne] .browser{transform:none;animation:none;max-width:none;border-radius:16px 16px 0 0;background:var(--surface); box-shadow:0 0 0 1px rgb(255 255 255 / .1),0 -30px 120px -40px rgb(var(--teal-rgb) / .55); -webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)} :root[data-style=nocturne] .br-url svg{stroke:var(--teal)} :root[data-style=nocturne] .br-bar{background:var(--surface-2);border-bottom:1px solid var(--line)} :root[data-style=nocturne] .br-url{background:var(--bg);color:var(--muted);font-family:var(--mono)} :root[data-style=nocturne] .br-body{background:var(--surface);min-height:360px;padding:30px 30px} :root[data-style=nocturne] .sk{background:rgb(255 255 255 / .07)} :root[data-style=nocturne] .sk-hero{height:110px;background:linear-gradient(122deg,var(--surface-2),rgb(var(--teal-rgb) / .55))} :root[data-style=nocturne] .sk-card{height:80px;background:rgb(255 255 255 / .03);border-color:var(--line)} :root[data-style=nocturne] .sk-card::before{background:rgb(var(--teal-rgb) / .25)} :root[data-style=nocturne] .chip-float{background:rgb(21 26 35 / .88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgb(255 255 255 / .12);color:#fff;box-shadow:0 20px 50px rgb(0 0 0 / .5);font-family:var(--mono);font-weight:500;font-size:12.5px;border-radius:999px} :root[data-style=nocturne] .chip-a{top:24%;left:-36px} :root[data-style=nocturne] .chip-b{bottom:auto;top:46%;right:-36px} @media(max-width:960px){ :root[data-style=nocturne] .hero{padding:64px 0 0} :root[data-style=nocturne] .browser{max-width:none} :root[data-style=nocturne] .br-body{min-height:260px;padding:20px 18px} } /* bandeau */ :root[data-style=nocturne] .marquee{background:var(--bg);color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} :root[data-style=nocturne] .mq-item{font-family:var(--mono);font-weight:400;font-size:13px;text-transform:uppercase;letter-spacing:.08em} :root[data-style=nocturne] .mq-item i{border-radius:1px;background:var(--teal);width:6px;height:6px} /* sections */ :root[data-style=nocturne] .section-alt{background:rgb(12 16 22 / .82);border-color:var(--line)} :root[data-style=nocturne] .kicker{font-family:var(--mono);font-weight:500;letter-spacing:.02em;text-transform:none;font-size:13.5px;color:var(--teal)} :root[data-style=nocturne] .kicker::before{content:'// ';opacity:.55} :root[data-style=nocturne] .section-head p{color:var(--muted)} /* services : grille « bento » */ :root[data-style=nocturne] .cards{grid-template-columns:repeat(3,1fr);gap:16px} :root[data-style=nocturne] .card:nth-child(1),:root[data-style=nocturne] .card:nth-child(4){grid-column:span 2} :root[data-style=nocturne] :is(.card:nth-child(1),.card:nth-child(4)) ul{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px} :root[data-style=nocturne] .card{background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line);border-radius:var(--r)} :root[data-style=nocturne] .card::before{background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%),rgb(var(--teal-rgb) / .12),transparent 45%)} :root[data-style=nocturne] .card:hover{border-color:rgb(var(--teal-rgb) / .4);box-shadow:0 30px 80px rgb(0 0 0 / .5)} :root[data-style=nocturne] .ico{background:rgb(var(--teal-rgb) / .1);border:1px solid rgb(var(--teal-rgb) / .25);border-radius:14px} :root[data-style=nocturne] :is(.card,.arg):hover .ico{background:var(--teal)} :root[data-style=nocturne] :is(.card,.arg):hover .ico svg{stroke:var(--on-accent)} :root[data-style=nocturne] .card p{color:var(--muted)} :root[data-style=nocturne] .card li{color:var(--ink)} @media(max-width:900px){ :root[data-style=nocturne] .cards{grid-template-columns:1fr 1fr} :root[data-style=nocturne] .card:nth-child(1),:root[data-style=nocturne] .card:nth-child(4){grid-column:span 1} :root[data-style=nocturne] :is(.card:nth-child(1),.card:nth-child(4)) ul{display:flex} } @media(max-width:700px){:root[data-style=nocturne] .cards{grid-template-columns:1fr}} /* avant / après */ :root[data-style=nocturne] .ba-frame{background:var(--surface);box-shadow:0 0 0 1px var(--line),0 40px 100px rgb(0 0 0 / .6)} :root[data-style=nocturne] .ba-chrome{background:var(--surface-2);border-bottom:1px solid var(--line)} :root[data-style=nocturne] .ba-chrome .cu{background:var(--bg);border-color:var(--line);color:var(--muted);font-family:var(--mono)} :root[data-style=nocturne] .ba-knob{background:var(--teal)} :root[data-style=nocturne] .ba-knob svg{stroke:var(--on-accent)} :root[data-style=nocturne] .ba-tag.r{background:var(--teal);color:var(--on-accent)} :root[data-style=nocturne] :is(.ba-hint b,.ba-pt b){color:#fff} :root[data-style=nocturne] .ba-pt .i{background:var(--surface);border-color:var(--line)} /* arguments */ :root[data-style=nocturne] .arg{background:var(--surface);border-color:var(--line)} :root[data-style=nocturne] .arg:hover{border-color:rgb(var(--teal-rgb) / .4)} :root[data-style=nocturne] .arg .ico{background:rgb(var(--teal-rgb) / .1)} /* applications */ :root[data-style=nocturne] .app-list .i{background:rgb(var(--teal-rgb) / .1);border:1px solid rgb(var(--teal-rgb) / .25)} :root[data-style=nocturne] .app-list b{color:#fff} :root[data-style=nocturne] .btn-dark{background:#fff;color:#07090D;box-shadow:none} :root[data-style=nocturne] .btn-dark:hover{background:var(--teal);color:var(--on-accent)} :root[data-style=nocturne] .ad-frame{background:var(--surface);box-shadow:0 0 0 1px var(--line),0 40px 100px rgb(0 0 0 / .55)} :root[data-style=nocturne] .ad-top{background:var(--surface-2);border-bottom-color:var(--line)} :root[data-style=nocturne] .ad-top .tt{color:var(--muted);font-family:var(--mono)} :root[data-style=nocturne] :is(.ad-h,.ad-ok .ad-title){color:#fff} :root[data-style=nocturne] .ad-lbl{font-family:var(--mono);letter-spacing:.04em} :root[data-style=nocturne] :is(.ad-day,.ad-slot){background:var(--bg);border-color:var(--line)} :root[data-style=nocturne] .ad-day .n{color:#fff} :root[data-style=nocturne] .ad-slot{color:var(--ink)} :root[data-style=nocturne] .ad-day.on{background:#fff;border-color:#fff} :root[data-style=nocturne] .ad-day.on .d{color:#5A6475} :root[data-style=nocturne] .ad-day.on .n{color:#07090D} :root[data-style=nocturne] .ad-slot.on{color:var(--on-accent)} :root[data-style=nocturne] .ad-slot:disabled{background:transparent;color:#3E4654} :root[data-style=nocturne] .ad-go{color:var(--on-accent)} :root[data-style=nocturne] .ad-go:disabled{background:var(--surface-2);color:#5A6475} :root[data-style=nocturne] .ad-go:not(:disabled):hover{background:#fff} :root[data-style=nocturne] .ad-check{background:rgb(var(--teal-rgb) / .14)} :root[data-style=nocturne] .ad-again{color:#fff;border-color:var(--line)} :root[data-style=nocturne] .ad-note b{color:#fff} :root[data-style=nocturne] :is(.ad-day .d,.ad-day .n){display:block} /* options */ :root[data-style=nocturne] .chip{background:var(--surface);border-color:var(--line);color:var(--ink);font-family:var(--mono);font-size:13px} :root[data-style=nocturne] .chip:hover{background:var(--teal);border-color:var(--teal);color:var(--on-accent);box-shadow:0 0 30px rgb(var(--teal-rgb) / .35)} /* formules */ :root[data-style=nocturne] .duo-card{background:var(--surface);border-color:var(--line)} :root[data-style=nocturne] .duo-title{color:#fff} :root[data-style=nocturne] .duo-card li{color:var(--ink)} :root[data-style=nocturne] .duo-card.dark{border:1px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(140deg,var(--teal),rgb(var(--teal-rgb) / .08) 65%) border-box} :root[data-style=nocturne] .duo-card.dark::before{background:radial-gradient(circle,rgb(var(--teal-rgb) / .2),transparent 68%)} :root[data-style=nocturne] .duo-card.dark p{color:var(--muted)} :root[data-style=nocturne] .duo-card.dark li::before{border-color:var(--teal)} :root[data-style=nocturne] .duo-label,:root[data-style=nocturne] .duo-card.dark .duo-label{font-family:var(--mono);text-transform:none;letter-spacing:.01em;font-size:13px;color:var(--teal)} /* méthode */ :root[data-style=nocturne] .steps::before{background:linear-gradient(90deg,var(--teal),rgb(var(--teal-rgb) / .05))} :root[data-style=nocturne] .step .n{background:var(--bg);color:var(--teal);border:1px solid rgb(var(--teal-rgb) / .5);border-radius:50%;font-family:var(--mono);font-weight:500;box-shadow:0 0 0 6px var(--bg),0 0 26px rgb(var(--teal-rgb) / .3)} :root[data-style=nocturne] .step:hover .n{background:var(--teal);color:var(--on-accent)} /* faq */ :root[data-style=nocturne] .q button{color:#fff} :root[data-style=nocturne] .q button:hover{color:var(--teal)} /* zone */ :root[data-style=nocturne] .zone-card{background:radial-gradient(520px 320px at 100% 50%,rgb(var(--teal-rgb) / .1),transparent 70%),var(--surface);border-color:var(--line);box-shadow:none} :root[data-style=nocturne] .zone-txt p strong{color:#fff} :root[data-style=nocturne] .zone-map svg path{fill:rgb(var(--teal-rgb) / .06);stroke:rgb(var(--teal-rgb) / .6)} :root[data-style=nocturne] .zone-map svg g{fill:var(--ink)} :root[data-style=nocturne] .zone-map svg circle[fill="#2698A0"]{fill:var(--teal)} :root[data-style=nocturne] .zone-map svg circle[stroke="#2698A0"]{stroke:var(--teal)} :root[data-style=nocturne] .zone-map svg circle[fill="#8FA2C2"]{fill:#5A6475} :root[data-style=nocturne] .zone-map svg > text{fill:var(--teal);font-family:var(--mono);paint-order:stroke;stroke:var(--surface);stroke-width:6px;stroke-linejoin:round} /* contact */ :root[data-style=nocturne] .cta{background:radial-gradient(820px 460px at 50% 100%,rgb(var(--teal-rgb) / .18),transparent 65%),var(--bg);border-top:1px solid var(--line)} :root[data-style=nocturne] .cta p{color:var(--muted)} :root[data-style=nocturne] .cf{background:var(--surface);border:1px solid var(--line);box-shadow:0 40px 100px rgb(0 0 0 / .5)} :root[data-style=nocturne] .cf label{color:var(--ink)} :root[data-style=nocturne] :is(.cf input,.cf select,.cf textarea){background:var(--bg);border-color:rgb(255 255 255 / .12);color:#fff} :root[data-style=nocturne] :is(.cf input,.cf textarea)::placeholder{color:#5A6475} :root[data-style=nocturne] .cf select option{background:var(--surface)} :root[data-style=nocturne] .cta-mail{color:var(--muted)} :root[data-style=nocturne] .cta-mail a{color:var(--teal);border-color:rgb(var(--teal-rgb) / .4)} /* pied de page */ :root[data-style=nocturne] footer{background:var(--navy-deep);border-top:1px solid var(--line)} :root[data-style=nocturne] .foot-brand img{filter:invert(1) hue-rotate(180deg) brightness(1.2)} :root[data-style=nocturne] .foot-col .foot-h{font-family:var(--mono);text-transform:none;letter-spacing:.02em;font-weight:500} :root[data-style=nocturne] .foot-col a:hover{color:var(--teal)} /* barre mobile */ :root[data-style=nocturne] .mbar{background:rgb(7 9 13 / .92);border-top-color:var(--line);box-shadow:none} :root[data-style=nocturne] .mbar .m1{color:var(--on-accent)} :root[data-style=nocturne] .mbar .m2{background:var(--surface-2);color:#fff;border-color:var(--line)} /* ===================================================================== STYLE 3 — POP : néo-brutaliste, contours épais, couleurs franches ===================================================================== */ :root[data-style=pop]{ --navy:#111;--navy-deep:#111;--navy-soft:#222; --ink:#111;--muted:#3F3B36;--line:#111; --bg:#FFF8EC;--bg-alt:#FFEFD6;--surface:#fff; --r:16px;--bw:2.5px; --hard:5px 5px 0 #111;--hard-lg:8px 8px 0 #111; --pink:#FF8FB8;--blue:#8DB2FF;--green:#7EE2B0;--yellow:#FFD23F;--lilac:#C9B6FF; --shadow:var(--hard-lg);--shadow-xl:var(--hard-lg); --cfg-bg:#fff;--cfg-ink:#111;--cfg-muted:#3F3B36;--cfg-line:#111;--cfg-r:16px; --cfg-border:2.5px solid #111;--cfg-shadow:8px 8px 0 #111; --cfg-fab-bg:#111;--cfg-fab-fg:#fff;--cfg-fab-r:14px;--cfg-fab-shadow:4px 4px 0 var(--teal),0 0 0 2px #fff; } :root[data-style=pop] body{background:var(--bg);color:var(--ink)} :root[data-style=pop] ::selection{background:#111;color:var(--teal)} :root[data-style=pop] #mx{display:none} :root[data-style=pop] #prog{background:#111;height:5px} :root[data-style=pop] :is(h1,h2,h3){color:var(--ink)} :root[data-style=pop] h1{font-weight:900;letter-spacing:-.045em;font-size:clamp(36px,4.7vw,64px);line-height:1.1} :root[data-style=pop] h1 .accent{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#111;position:relative;z-index:0;white-space:nowrap} :root[data-style=pop] h1 .accent{padding:0 .06em} :root[data-style=pop] h1 .accent::after{content:'';position:absolute;left:-.08em;right:-.08em;top:.16em;bottom:.02em;background:#fff;border:var(--bw) solid #111;border-radius:10px;box-shadow:3px 3px 0 #111;z-index:-1;transform:rotate(-2deg)} :root[data-style=pop] h2{font-weight:900;letter-spacing:-.04em} :root[data-style=pop] h3{font-weight:800} :root[data-style=pop] .btn{border:var(--bw) solid #111;border-radius:12px;font-weight:800;box-shadow:var(--hard);color:#111} :root[data-style=pop] .btn:active{transform:translate(3px,3px);box-shadow:0 0 0 #111} :root[data-style=pop] .btn-primary,:root[data-style=pop] .btn-primary:hover{background:var(--teal);color:#111} :root[data-style=pop] .btn-primary::before{display:none} :root[data-style=pop] .btn-ghost,:root[data-style=pop] .btn-ghost:hover{background:#fff;color:#111;border-color:#111} :root[data-style=pop] .btn-dark,:root[data-style=pop] .btn-dark:hover{background:#111;color:#fff} @media(hover:hover){ :root[data-style=pop] .btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #111} } /* header */ :root[data-style=pop] header{background:var(--bg);border-bottom:var(--bw) solid #111} :root[data-style=pop] header.stuck{box-shadow:none;border-bottom-color:#111} :root[data-style=pop] .nav-brand .name{color:#111;font-weight:900} :root[data-style=pop] .nav-links > a{color:#111;font-weight:700} :root[data-style=pop] .nav-links > a:not(.nav-cta):hover{color:#111} :root[data-style=pop] .nav-links > a:not(.nav-cta)::after{background:#111;height:3px} :root[data-style=pop] .nav-cta,:root[data-style=pop] .nav-cta:hover{background:var(--teal);color:#111!important;border:var(--bw) solid #111;border-radius:10px;box-shadow:3px 3px 0 #111;font-weight:800!important} @media(hover:hover){:root[data-style=pop] .nav-cta:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 #111}} /* hero : aplat de couleur, maquette à gauche */ :root[data-style=pop] .hero{background:var(--teal);color:#111;border-bottom:var(--bw) solid #111;padding:84px 0 100px} :root[data-style=pop] .hero .grid-bg{opacity:1;background-image:radial-gradient(rgb(17 17 17 / .2) 1.3px,transparent 1.7px);background-size:22px 22px;mask-image:none;-webkit-mask-image:none} :root[data-style=pop] .hero-grid{grid-template-columns:.9fr 1.1fr;gap:64px} :root[data-style=pop] .mock-zone{order:-1} :root[data-style=pop] .eyebrow{background:#fff;border:var(--bw) solid #111;color:#111;box-shadow:3px 3px 0 #111;font-weight:800;rotate:-2deg} :root[data-style=pop] .eyebrow .dot{background:#111;animation:none} :root[data-style=pop] .hero p.lead{color:#111;font-weight:500} :root[data-style=pop] .hero .btn-primary{background:#111;color:#fff;box-shadow:5px 5px 0 #fff} @media(hover:hover){:root[data-style=pop] .hero .btn-primary:hover{box-shadow:7px 7px 0 #fff}} :root[data-style=pop] .hero-facts{border-top:var(--bw) solid #111} :root[data-style=pop] .fact svg{stroke:#111;stroke-width:3} :root[data-style=pop] .fact span{color:#111;font-weight:700} :root[data-style=pop] .browser{transform:none;rotate:-2.5deg;animation:none;border:var(--bw) solid #111;border-radius:16px;box-shadow:12px 12px 0 #111} :root[data-style=pop] .br-bar{background:#fff;border-bottom:var(--bw) solid #111} :root[data-style=pop] .br-dot{border:2px solid #111} :root[data-style=pop] .br-url{background:var(--bg);border:2px solid #111;color:#111;font-weight:700} :root[data-style=pop] .br-url svg{stroke:#111} :root[data-style=pop] .br-body{background:#fff} :root[data-style=pop] .sk{background:#EDE6D8} :root[data-style=pop] .sk-hero{background:var(--pink);border:var(--bw) solid #111;border-radius:10px} :root[data-style=pop] .sk-card{border:2px solid #111} :root[data-style=pop] .sk-card:nth-child(1){background:var(--blue)} :root[data-style=pop] .sk-card:nth-child(2){background:var(--green)} :root[data-style=pop] .sk-card:nth-child(3){background:var(--lilac)} :root[data-style=pop] .sk-card::before{background:#fff;border:2px solid #111} :root[data-style=pop] .sk-btn{background:#111} :root[data-style=pop] .chip-float{background:#fff;border:var(--bw) solid #111;box-shadow:4px 4px 0 #111;border-radius:12px;color:#111;font-weight:800} :root[data-style=pop] .chip-float svg{stroke:#111} :root[data-style=pop] .chip-a{background:var(--lilac);rotate:-5deg} :root[data-style=pop] .chip-b{background:var(--green);rotate:4deg} @media(max-width:960px){ :root[data-style=pop] .hero{padding:60px 0 80px} :root[data-style=pop] .hero-grid{grid-template-columns:1fr;gap:52px} :root[data-style=pop] .mock-zone{order:0} :root[data-style=pop] .browser{rotate:-1.5deg} } /* bandeau : ruban incliné */ :root[data-style=pop] .marquee{background:#111;color:#fff;border-bottom:none;rotate:-1.3deg;width:104%;margin:20px 0 20px -2%;padding:16px 0} /* le bandeau incliné déborde volontairement : on empêche le défilement horizontal de la page */ :root[data-style=pop]{overflow-x:clip} :root[data-style=pop] body{overflow-x:clip} :root[data-style=pop] .mq-item{font-weight:900;text-transform:uppercase;font-size:17px;letter-spacing:.01em} :root[data-style=pop] .mq-item i{width:16px;height:16px;border-radius:0;background:var(--teal);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)} /* sections */ :root[data-style=pop] .section-alt{background:var(--bg-alt);border-top:var(--bw) solid #111;border-bottom:var(--bw) solid #111} :root[data-style=pop] .kicker{background:#111;color:var(--teal);padding:7px 15px;border-radius:999px;rotate:-2deg;letter-spacing:.1em;font-weight:800} :root[data-style=pop] .section-head p{color:var(--muted);font-weight:500} /* services : cartes colorées */ :root[data-style=pop] .cards{gap:30px} :root[data-style=pop] .card{border:var(--bw) solid #111;border-radius:var(--r);box-shadow:var(--hard-lg)} :root[data-style=pop] .card:hover{border-color:#111} :root[data-style=pop] .card:nth-child(1){background:#DCE7FF} :root[data-style=pop] .card:nth-child(2){background:#FFDCEA} :root[data-style=pop] .card:nth-child(3){background:#DDF7E7} :root[data-style=pop] .card:nth-child(4){background:#FFF0C2} :root[data-style=pop] .card::before,:root[data-style=pop] .card::after{display:none} :root[data-style=pop] .ico{background:#fff;border:var(--bw) solid #111;border-radius:12px;box-shadow:3px 3px 0 #111} :root[data-style=pop] .ico svg{stroke:#111;stroke-width:2.2} :root[data-style=pop] :is(.card,.arg):hover .ico{background:var(--teal);transform:rotate(-6deg)} :root[data-style=pop] :is(.card,.arg):hover .ico svg{stroke:#111} :root[data-style=pop] :is(.card,.arg) p,:root[data-style=pop] .app-list span{color:var(--muted)} :root[data-style=pop] :is(.card,.duo-card) li::before{border-color:#111;border-left-width:3px;border-bottom-width:3px} @media(hover:hover){ :root[data-style=pop] .card:hover{transform:translate(-4px,-4px);box-shadow:12px 12px 0 #111} } /* avant / après */ :root[data-style=pop] .ba-frame{border:var(--bw) solid #111;border-radius:18px;box-shadow:12px 12px 0 #111} :root[data-style=pop] .ba-chrome{background:#fff;border-bottom:var(--bw) solid #111} :root[data-style=pop] .ba-chrome .cd{border:2px solid #111} :root[data-style=pop] .ba-chrome .cu{border:2px solid #111;color:#111;font-weight:700;background:var(--bg)} :root[data-style=pop] .ba-chrome .cu svg{stroke:#111} :root[data-style=pop] .ba-tag{-webkit-backdrop-filter:none;backdrop-filter:none;font-weight:900;border:2px solid #111!important} :root[data-style=pop] .ba-tag.l{background:#fff;color:#111} :root[data-style=pop] .ba-tag.r{background:var(--teal);color:#111} :root[data-style=pop] .ba-handle{background:#111;width:3px;box-shadow:none} :root[data-style=pop] .ba-knob{background:var(--teal);border:var(--bw) solid #111;box-shadow:3px 3px 0 #111} :root[data-style=pop] .ba-knob svg{stroke:#111} :root[data-style=pop] .ba-hint{color:#111;font-weight:500} :root[data-style=pop] .ba-hint b{color:#111;background:var(--teal);padding:1px 7px;border-radius:5px;border:2px solid #111} :root[data-style=pop] .ba-pt .i{width:54px;height:54px;border:var(--bw) solid #111;border-radius:50%;box-shadow:3px 3px 0 #111} :root[data-style=pop] .ba-pt:nth-child(1) .i{background:var(--blue)} :root[data-style=pop] .ba-pt:nth-child(2) .i{background:var(--pink)} :root[data-style=pop] .ba-pt:nth-child(3) .i{background:var(--green)} :root[data-style=pop] .ba-pt .i svg{stroke:#111} :root[data-style=pop] .ba-pt b{color:#111;font-weight:900;font-size:17px} :root[data-style=pop] .ba-pt span{color:var(--muted)} /* arguments */ :root[data-style=pop] .arg{background:#fff;border:var(--bw) solid #111;box-shadow:var(--hard)} :root[data-style=pop] .arg:nth-child(1) .ico{background:var(--pink)} :root[data-style=pop] .arg:nth-child(2) .ico{background:var(--blue)} :root[data-style=pop] .arg:nth-child(3) .ico{background:var(--green)} @media(hover:hover){:root[data-style=pop] .arg:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 #111}} /* applications */ :root[data-style=pop] .app-list .i{border:var(--bw) solid #111;box-shadow:3px 3px 0 #111} :root[data-style=pop] .app-list li:nth-child(1) .i{background:var(--pink)} :root[data-style=pop] .app-list li:nth-child(2) .i{background:var(--blue)} :root[data-style=pop] .app-list li:nth-child(3) .i{background:var(--green)} :root[data-style=pop] .app-list li:nth-child(4) .i{background:var(--lilac)} :root[data-style=pop] .app-list .i svg{stroke:#111} :root[data-style=pop] .app-list b{color:#111;font-weight:800} :root[data-style=pop] .ad-frame{border:var(--bw) solid #111;box-shadow:12px 12px 0 #111;border-radius:18px} :root[data-style=pop] .ad-top{background:var(--teal);border-bottom:var(--bw) solid #111} :root[data-style=pop] .ad-top .cd{border:2px solid #111} :root[data-style=pop] .ad-top .tt{color:#111;font-weight:800} :root[data-style=pop] .ad-h{font-weight:900} :root[data-style=pop] .ad-sub{color:var(--muted)} :root[data-style=pop] .ad-lbl{color:#111} :root[data-style=pop] :is(.ad-day,.ad-slot){border:2px solid #111;border-radius:10px} :root[data-style=pop] :is(.ad-day:hover,.ad-slot:hover:not(:disabled)){border-color:#111;background:var(--teal-pale);color:#111} :root[data-style=pop] .ad-day.on,:root[data-style=pop] .ad-day.on:hover{background:#111;border-color:#111} :root[data-style=pop] .ad-day.on .d{color:#BBB} :root[data-style=pop] .ad-slot.on,:root[data-style=pop] .ad-slot.on:hover{background:var(--teal);color:#111;border-color:#111;box-shadow:2px 2px 0 #111} :root[data-style=pop] .ad-slot:disabled{border-color:#CFC6B6;color:#B3AA9A;background:#F5EFE3} :root[data-style=pop] .ad-go{background:#111;color:#fff;border:var(--bw) solid #111;border-radius:12px} :root[data-style=pop] .ad-go:disabled{background:#EDE6D8;color:#9A9183;border-color:#CFC6B6} :root[data-style=pop] .ad-go:not(:disabled):hover{background:var(--teal);color:#111} :root[data-style=pop] .ad-check{background:var(--teal);border:var(--bw) solid #111} :root[data-style=pop] .ad-check svg{stroke:#111} :root[data-style=pop] .ad-ok .when{color:#111;background:var(--teal);padding:0 5px} :root[data-style=pop] .ad-again{color:#111;border-bottom:2px solid #111} :root[data-style=pop] .ad-note b{color:#111} :root[data-style=pop] :is(.ad-day .d,.ad-day .n){display:block} /* options */ :root[data-style=pop] .chips{gap:14px} :root[data-style=pop] .chip{background:#fff;border:var(--bw) solid #111;color:#111;font-weight:700;box-shadow:3px 3px 0 #111} :root[data-style=pop] .chip:nth-child(3n+1){rotate:-1.5deg} :root[data-style=pop] .chip:nth-child(3n+2){rotate:1deg} :root[data-style=pop] .chip:hover{background:var(--teal);color:#111;border-color:#111;box-shadow:5px 5px 0 #111} :root[data-style=pop] .chip:nth-child(4n+2):hover{background:var(--pink)} :root[data-style=pop] .chip:nth-child(4n+3):hover{background:var(--blue)} :root[data-style=pop] .chip:nth-child(4n):hover{background:var(--green)} /* formules */ :root[data-style=pop] .duo-card{background:#fff;border:var(--bw) solid #111;box-shadow:var(--hard-lg)} :root[data-style=pop] .duo-card.dark{background:#111;color:#fff;border-color:#111;box-shadow:8px 8px 0 var(--teal)} :root[data-style=pop] .duo-card.dark::before{display:none} :root[data-style=pop] .duo-title{font-weight:900;color:#111} :root[data-style=pop] .duo-card p{color:var(--muted)} :root[data-style=pop] .duo-card.dark .duo-title{color:#fff} :root[data-style=pop] .duo-card.dark p{color:#D0D0D0} :root[data-style=pop] .duo-card.dark li{color:#fff} :root[data-style=pop] .duo-card.dark li::before{border-color:var(--teal)} :root[data-style=pop] .duo-label{display:inline-block;background:#111;color:#fff;padding:5px 13px;border-radius:999px} :root[data-style=pop] .duo-card.dark .duo-label{background:var(--teal);color:#111} @media(hover:hover){ :root[data-style=pop] .duo-card:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 #111} :root[data-style=pop] .duo-card.dark:hover{box-shadow:11px 11px 0 var(--teal)} } /* méthode */ :root[data-style=pop] .steps::before{background:none;border-top:3px dashed #111;height:0;top:29px} :root[data-style=pop] .step .n{width:60px;height:60px;border-radius:50%;border:var(--bw) solid #111;color:#111;font-weight:900;font-size:22px;box-shadow:3px 3px 0 #111} :root[data-style=pop] .step:nth-child(1) .n{background:var(--pink)} :root[data-style=pop] .step:nth-child(2) .n{background:var(--blue)} :root[data-style=pop] .step:nth-child(3) .n{background:var(--green)} :root[data-style=pop] .step:nth-child(4) .n{background:var(--yellow)} :root[data-style=pop] .step:hover .n{transform:rotate(-10deg) scale(1.06)} :root[data-style=pop] .step p{color:var(--muted)} /* faq : questions en cartes */ :root[data-style=pop] .faq{display:flex;flex-direction:column;gap:14px} :root[data-style=pop] .q{background:#fff;border:var(--bw) solid #111;border-radius:14px;box-shadow:var(--hard);padding:0 22px;transition:background-color .2s} :root[data-style=pop] .q.open{background:var(--teal-pale)} :root[data-style=pop] .q button,:root[data-style=pop] .q button:hover{color:#111;font-weight:800;padding:20px 44px 20px 0} :root[data-style=pop] .q button::after{border-right:3px solid #111;border-bottom:3px solid #111;top:25px} :root[data-style=pop] .q .a p{color:var(--muted);padding:0 20px 22px 0} /* zone */ :root[data-style=pop] .zone-card{background:#fff;border:var(--bw) solid #111;border-radius:20px;box-shadow:12px 12px 0 #111} :root[data-style=pop] .zone-txt p{color:var(--muted)} :root[data-style=pop] .zone-txt p strong{color:#111;background:var(--teal-pale);padding:0 3px} :root[data-style=pop] .zone-map svg{rotate:3deg} :root[data-style=pop] .zone-map svg path{fill:var(--teal);stroke:#111;stroke-width:3} :root[data-style=pop] .zone-map svg g{fill:#111} :root[data-style=pop] .zone-map svg circle[fill="#2698A0"]{fill:#111} :root[data-style=pop] .zone-map svg circle[stroke="#2698A0"]{stroke:#111} :root[data-style=pop] .zone-map svg circle[fill="#8FA2C2"]{fill:#fff;stroke:#111;stroke-width:2} :root[data-style=pop] .zone-map svg > text{fill:#111;font-weight:900;paint-order:stroke;stroke:#fff;stroke-width:6px;stroke-linejoin:round} /* contact */ :root[data-style=pop] .cta{background:#111;color:#fff} :root[data-style=pop] .cta .grid-bg{opacity:1;background-image:radial-gradient(rgb(255 255 255 / .16) 1.3px,transparent 1.7px);background-size:22px 22px;mask-image:none;-webkit-mask-image:none} :root[data-style=pop] .cta h2{color:#fff;font-size:clamp(38px,5.6vw,70px)} :root[data-style=pop] .cta p{color:#D8D8D8} :root[data-style=pop] .cf{border:var(--bw) solid #fff;box-shadow:10px 10px 0 var(--teal);border-radius:18px} :root[data-style=pop] .cf label{color:#111;font-weight:800} :root[data-style=pop] .cf label .opt{color:var(--muted)} :root[data-style=pop] :is(.cf input,.cf select,.cf textarea){border:2px solid #111;border-radius:10px;background:var(--bg)} :root[data-style=pop] :is(.cf input,.cf select,.cf textarea):focus{border-color:#111;box-shadow:0 0 0 3px var(--teal)} :root[data-style=pop] .cf .cf-consent{color:var(--muted)} :root[data-style=pop] .cf .cf-consent a{color:#111;font-weight:700} :root[data-style=pop] .cf .cf-consent input{accent-color:#111} :root[data-style=pop] .cf-note{color:var(--muted)} :root[data-style=pop] .cta-actions .btn{border-color:#fff} :root[data-style=pop] .cta-actions .btn-primary{box-shadow:5px 5px 0 #fff} :root[data-style=pop] .cta-actions .btn-ghost,:root[data-style=pop] .cta-actions .btn-ghost:hover{background:#111;color:#fff;box-shadow:5px 5px 0 var(--teal)} @media(hover:hover){ :root[data-style=pop] .cta-actions .btn-primary:hover{box-shadow:7px 7px 0 #fff} :root[data-style=pop] .cta-actions .btn-ghost:hover{box-shadow:7px 7px 0 var(--teal)} } :root[data-style=pop] .cta-mail{color:#BBB} :root[data-style=pop] .cta-mail a{color:var(--teal);border-color:var(--teal)} /* pied de page */ :root[data-style=pop] footer{background:#111;color:#CFCFCF;border-top:var(--bw) dashed rgb(255 255 255 / .25)} :root[data-style=pop] .foot-top{border-bottom:2px dashed rgb(255 255 255 / .2)} :root[data-style=pop] .foot-brand img{filter:brightness(0) invert(1)} :root[data-style=pop] .foot-brand p{color:#BDBDBD} :root[data-style=pop] .foot-col .foot-h{color:var(--teal);font-weight:900} :root[data-style=pop] :is(.foot-col a,.foot-col span){color:#D6D6D6} :root[data-style=pop] .foot-col a:hover{color:var(--teal)} :root[data-style=pop] .foot-bot{color:#9A9A9A} /* barre mobile */ :root[data-style=pop] .mbar{background:var(--bg);border-top:var(--bw) solid #111;box-shadow:none} :root[data-style=pop] .mbar a{border:var(--bw) solid #111;border-radius:12px;font-weight:800} :root[data-style=pop] .mbar .m1{background:var(--teal);color:#111;box-shadow:3px 3px 0 #111} :root[data-style=pop] .mbar .m2{background:#fff;color:#111;border-color:#111} /* ===================================================================== STYLE 4 — AURORE : verre dépoli, dégradés lumineux, formes arrondies ===================================================================== */ :root[data-style=aurore]{ --navy:#1B1537;--navy-deep:#120E26;--navy-mid:#1B1537;--navy-soft:#2A2150; --ink:#2B2745;--muted:#6B6788;--line:rgb(43 39 69 / .1); --bg:#F4F2FB;--bg-alt:#EDEAF8; --glass:rgb(255 255 255 / .58);--glass-strong:rgb(255 255 255 / .8);--glass-edge:rgb(255 255 255 / .92); --grad:linear-gradient(120deg,var(--teal),var(--acc2)); --r:26px; --shadow:0 24px 60px -18px rgb(var(--teal-rgb) / .35); --shadow-xl:0 30px 70px -20px rgb(var(--teal-rgb) / .45); scroll-padding-top:104px; --cfg-bg:rgb(255 255 255 / .78);--cfg-ink:#1B1537;--cfg-muted:#6B6788;--cfg-line:rgb(43 39 69 / .12);--cfg-r:26px; --cfg-border:1px solid rgb(255 255 255 / .92);--cfg-shadow:0 30px 80px -10px rgb(var(--teal-rgb) / .35); --cfg-fab-bg:linear-gradient(120deg,var(--teal),var(--acc2));--cfg-fab-fg:#fff;--cfg-fab-r:999px;--cfg-fab-shadow:0 12px 34px -6px rgb(var(--teal-rgb) / .6); } :root[data-style=aurore] body{background:var(--bg);color:var(--ink)} :root[data-style=aurore] body::before{ content:'';position:fixed;inset:-15vmax;z-index:0;pointer-events:none; background: radial-gradient(38vmax 30vmax at 18% 22%,rgb(var(--teal-rgb) / .3),transparent 70%), radial-gradient(34vmax 28vmax at 82% 30%,rgb(var(--acc2-rgb) / .26),transparent 70%), radial-gradient(40vmax 30vmax at 55% 88%,rgb(var(--teal-glow-rgb) / .34),transparent 70%); animation:auFlow 22s ease-in-out infinite alternate;will-change:transform; } @keyframes auFlow{0%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(4vmax,-3vmax,0) rotate(8deg)}100%{transform:translate3d(-3vmax,3vmax,0) rotate(-6deg)}} :root[data-style=aurore] #mx{display:none} :root[data-style=aurore] #prog{background:var(--grad)} :root[data-style=aurore] ::selection{background:var(--acc2);color:#fff} :root[data-style=aurore] :is(h1,h2,h3){color:var(--navy)} :root[data-style=aurore] h1{font-weight:800;letter-spacing:-.04em;font-size:clamp(38px,4.6vw,62px);line-height:1.05} :root[data-style=aurore] h1 .accent{white-space:nowrap;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} :root[data-style=aurore] h2{font-weight:800;letter-spacing:-.035em} :root[data-style=aurore] .btn{border-radius:999px} /* header flottant en verre */ :root[data-style=aurore] header{top:14px;margin:14px 16px 0;border-radius:22px;background:rgb(255 255 255 / .55);border:1px solid var(--glass-edge);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 10px 30px -12px rgb(27 21 55 / .18)} :root[data-style=aurore] header.stuck{border-color:var(--glass-edge);box-shadow:0 14px 40px -14px rgb(27 21 55 / .3)} :root[data-style=aurore] .nav{height:68px} :root[data-style=aurore] .nav-brand .name{color:var(--navy)} :root[data-style=aurore] .nav-links > a{color:var(--muted)} :root[data-style=aurore] .nav-links > a:not(.nav-cta)::after{background:var(--grad);border-radius:2px} :root[data-style=aurore] .nav-cta,:root[data-style=aurore] .nav-cta:hover{background:var(--grad);border-radius:999px;box-shadow:0 8px 22px -6px rgb(var(--teal-rgb) / .55)} @media(max-width:560px){:root[data-style=aurore] header{margin:10px 10px 0;top:10px}} /* hero */ :root[data-style=aurore] .hero{background:transparent;color:var(--ink);padding:84px 0 104px} :root[data-style=aurore] .hero .grid-bg{display:none} :root[data-style=aurore] .eyebrow{background:var(--glass-strong);border:1px solid var(--glass-edge);color:var(--navy);box-shadow:0 6px 20px -8px rgb(var(--teal-rgb) / .35)} :root[data-style=aurore] .eyebrow .dot{background:var(--grad)} :root[data-style=aurore] .hero p.lead{color:var(--muted)} :root[data-style=aurore] .hero p.lead strong{color:var(--navy)} :root[data-style=aurore] .btn-primary,:root[data-style=aurore] .btn-primary:hover{background:var(--grad);box-shadow:0 14px 34px -8px rgb(var(--teal-rgb) / .6)} :root[data-style=aurore] .btn-ghost{background:var(--glass-strong);color:var(--navy);border:1px solid var(--glass-edge)} :root[data-style=aurore] .btn-ghost:hover{background:#fff;border-color:#fff} :root[data-style=aurore] .btn-dark{background:var(--navy);box-shadow:0 14px 30px -10px rgb(27 21 55 / .5)} :root[data-style=aurore] .btn-dark:hover{background:var(--grad)} :root[data-style=aurore] .hero-facts{border-top:1px solid rgb(43 39 69 / .1)} :root[data-style=aurore] .fact svg{stroke:var(--teal)} :root[data-style=aurore] .fact span{color:var(--ink)} :root[data-style=aurore] .mock-zone::before{content:'';position:absolute;inset:6% 8%;background:var(--grad);filter:blur(70px);opacity:.5;border-radius:50%;z-index:0} :root[data-style=aurore] .browser{position:relative;z-index:1;background:rgb(255 255 255 / .55);border-radius:24px;border:1px solid var(--glass-edge);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 40px 90px -24px rgb(var(--teal-rgb) / .5)} :root[data-style=aurore] .br-bar{background:rgb(255 255 255 / .45);border-bottom:1px solid rgb(255 255 255 / .75)} :root[data-style=aurore] .br-url{background:rgb(255 255 255 / .75);border-radius:999px} :root[data-style=aurore] .br-url svg{stroke:var(--teal)} :root[data-style=aurore] .br-body{background:transparent} :root[data-style=aurore] .sk{background:rgb(43 39 69 / .08);border-radius:99px} :root[data-style=aurore] .sk-hero{background:var(--grad);border-radius:16px} :root[data-style=aurore] .sk-card{background:rgb(255 255 255 / .6);border-color:rgb(255 255 255 / .9);border-radius:14px} :root[data-style=aurore] .sk-card::before{background:var(--grad);border-radius:50%;opacity:.8} :root[data-style=aurore] .sk-btn{background:var(--grad);border-radius:99px} :root[data-style=aurore] .chip-float{background:rgb(255 255 255 / .72);border:1px solid var(--glass-edge);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:999px;box-shadow:0 18px 40px -12px rgb(var(--teal-rgb) / .45)} /* bandeau */ :root[data-style=aurore] .marquee{background:rgb(255 255 255 / .45);color:var(--navy);border-top:1px solid var(--glass-edge);border-bottom:1px solid var(--glass-edge)} :root[data-style=aurore] .mq-item i{width:8px;height:8px;background:var(--grad)} /* sections */ :root[data-style=aurore] .section-alt{background:rgb(255 255 255 / .3);border-color:rgb(255 255 255 / .75)} :root[data-style=aurore] .kicker{background:var(--glass-strong);border:1px solid var(--glass-edge);padding:6px 14px;border-radius:999px;letter-spacing:.12em;font-size:11.5px;color:var(--teal);box-shadow:0 6px 18px -10px rgb(var(--teal-rgb) / .5)} :root[data-style=aurore] .section-head p{color:var(--muted)} :root[data-style=aurore] :is(.card,.arg,.duo-card,.zone-card,.ad-frame,.ba-frame){background:var(--glass);border:1px solid var(--glass-edge);box-shadow:0 20px 50px -24px rgb(27 21 55 / .22)} /* services */ :root[data-style=aurore] .card{border-radius:var(--r)} :root[data-style=aurore] .card::before{background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgb(var(--acc2-rgb) / .12),transparent 45%)} :root[data-style=aurore] .card::after{background:var(--grad);height:4px} :root[data-style=aurore] .card:hover{border-color:#fff;box-shadow:var(--shadow-xl)} :root[data-style=aurore] .ico{background:var(--grad);border-radius:18px;box-shadow:0 10px 24px -8px rgb(var(--teal-rgb) / .55)} :root[data-style=aurore] .ico svg,:root[data-style=aurore] :is(.card,.arg):hover .ico svg{stroke:#fff} :root[data-style=aurore] :is(.card,.arg):hover .ico{background:var(--grad)} :root[data-style=aurore] :is(.card,.duo-card) li::before{border-color:var(--teal)} /* avant / après */ :root[data-style=aurore] .ba-frame{border-radius:26px} :root[data-style=aurore] .ba-chrome{background:rgb(255 255 255 / .5);border-bottom:1px solid var(--glass-edge)} :root[data-style=aurore] .ba-chrome .cu{background:rgb(255 255 255 / .85);border-color:transparent;border-radius:999px} :root[data-style=aurore] .ba-tag{border-radius:999px} :root[data-style=aurore] .ba-tag.r{background:var(--grad);border-color:transparent} :root[data-style=aurore] .ba-knob{background:var(--grad);box-shadow:0 10px 30px -6px rgb(var(--teal-rgb) / .7)} :root[data-style=aurore] .ba-knob svg{stroke:#fff} :root[data-style=aurore] .ba-pt .i{background:var(--grad);border:none;border-radius:16px;box-shadow:0 10px 24px -10px rgb(var(--teal-rgb) / .6)} :root[data-style=aurore] .ba-pt .i svg{stroke:#fff} /* arguments */ :root[data-style=aurore] .arg{border-radius:var(--r)} :root[data-style=aurore] .arg:hover{box-shadow:var(--shadow)} /* applications */ :root[data-style=aurore] .app-list .i{background:var(--grad);border-radius:14px;box-shadow:0 8px 20px -8px rgb(var(--teal-rgb) / .6)} :root[data-style=aurore] .app-list .i svg{stroke:#fff} :root[data-style=aurore] .ad-frame{border-radius:26px} :root[data-style=aurore] .ad-top{background:rgb(255 255 255 / .45);border-bottom:1px solid var(--glass-edge)} :root[data-style=aurore] :is(.ad-day,.ad-slot){background:rgb(255 255 255 / .72);border-color:rgb(255 255 255 / .95);border-radius:14px} :root[data-style=aurore] :is(.ad-day .d,.ad-day .n){display:block} :root[data-style=aurore] .ad-day.on{background:var(--navy);border-color:var(--navy)} :root[data-style=aurore] .ad-slot.on{background:var(--grad);border-color:transparent;color:#fff} :root[data-style=aurore] .ad-slot:disabled{background:rgb(255 255 255 / .35);color:#B3AFC8} :root[data-style=aurore] .ad-go{background:var(--grad);border-radius:999px} :root[data-style=aurore] .ad-go:disabled{background:rgb(43 39 69 / .08);color:#9C98B5} :root[data-style=aurore] .ad-go:not(:disabled):hover{background:var(--navy)} :root[data-style=aurore] .ad-check{background:var(--grad)} :root[data-style=aurore] .ad-check svg{stroke:#fff} /* options */ :root[data-style=aurore] .chip{background:var(--glass);border:1px solid var(--glass-edge);color:var(--navy);font-weight:600} @media(hover:hover){:root[data-style=aurore] .chip:hover{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 12px 26px -8px rgb(var(--teal-rgb) / .6)}} /* formules */ :root[data-style=aurore] .duo-card{border-radius:var(--r)} :root[data-style=aurore] .duo-card.dark{background:var(--grad);border-color:transparent;box-shadow:0 30px 70px -20px rgb(var(--teal-rgb) / .6)} :root[data-style=aurore] .duo-card.dark::before{background:radial-gradient(circle,rgb(255 255 255 / .35),transparent 68%)} :root[data-style=aurore] .duo-card.dark :is(.duo-title,.duo-label,li){color:#fff} :root[data-style=aurore] .duo-card.dark p{color:rgb(255 255 255 / .88)} :root[data-style=aurore] .duo-card.dark li::before{border-color:#fff} /* méthode */ :root[data-style=aurore] .steps::before{background:var(--grad);opacity:.5;height:3px;border-radius:3px} :root[data-style=aurore] .step .n,:root[data-style=aurore] .step:hover .n{background:var(--grad);border-radius:50%;box-shadow:0 10px 26px -8px rgb(var(--teal-rgb) / .6),0 0 0 6px rgb(255 255 255 / .6)} /* faq */ :root[data-style=aurore] .faq{display:flex;flex-direction:column;gap:12px} :root[data-style=aurore] .q{background:var(--glass);border:1px solid var(--glass-edge);border-radius:20px;padding:0 24px;box-shadow:0 10px 30px -20px rgb(27 21 55 / .25);transition:box-shadow .3s,background-color .3s} :root[data-style=aurore] .q.open{background:var(--glass-strong);box-shadow:0 20px 50px -22px rgb(var(--teal-rgb) / .5)} :root[data-style=aurore] .q button{padding:20px 40px 20px 0} :root[data-style=aurore] .q button::after{top:26px} :root[data-style=aurore] .q .a p{padding:0 20px 22px 0} /* zone */ :root[data-style=aurore] .zone-card{border-radius:32px} :root[data-style=aurore] .zone-map svg path{fill:rgb(var(--teal-rgb) / .12);stroke:var(--teal);stroke-width:2} :root[data-style=aurore] .zone-map svg g{fill:var(--navy)} :root[data-style=aurore] .zone-map svg circle[fill="#2698A0"]{fill:var(--acc2)} :root[data-style=aurore] .zone-map svg circle[stroke="#2698A0"]{stroke:var(--acc2)} :root[data-style=aurore] .zone-map svg circle[fill="#8FA2C2"]{fill:var(--teal)} :root[data-style=aurore] .zone-map svg > text{fill:var(--teal);paint-order:stroke;stroke:#fff;stroke-width:6px;stroke-linejoin:round} /* contact : grand panneau en dégradé */ :root[data-style=aurore] .cta{margin:40px 16px 16px;border-radius:40px;background:radial-gradient(700px 400px at 15% 10%,rgb(255 255 255 / .25),transparent 60%),var(--grad);box-shadow:0 40px 100px -40px rgb(var(--teal-rgb) / .7)} :root[data-style=aurore] .cta .grid-bg{display:none} :root[data-style=aurore] .cta h2{color:#fff} :root[data-style=aurore] .cta p{color:rgb(255 255 255 / .9)} :root[data-style=aurore] .cf{background:rgb(255 255 255 / .85);border:1px solid rgb(255 255 255 / .9);border-radius:28px;box-shadow:0 30px 70px -20px rgb(27 21 55 / .45)} :root[data-style=aurore] .cf label{color:var(--navy)} :root[data-style=aurore] :is(.cf input,.cf select,.cf textarea){border-radius:14px;border-color:rgb(43 39 69 / .12);background:rgb(255 255 255 / .9)} :root[data-style=aurore] .cta-actions .btn-primary,:root[data-style=aurore] .cta-actions .btn-primary:hover{background:#fff;color:var(--navy);box-shadow:0 14px 30px -10px rgb(27 21 55 / .4)} :root[data-style=aurore] .cta-actions .btn-ghost{background:rgb(255 255 255 / .16);color:#fff;border-color:rgb(255 255 255 / .5)} :root[data-style=aurore] .cta-actions .btn-ghost:hover{background:rgb(255 255 255 / .28);border-color:#fff} :root[data-style=aurore] .cta-mail{color:rgb(255 255 255 / .82)} :root[data-style=aurore] .cta-mail a{color:#fff;border-color:rgb(255 255 255 / .6)} @media(max-width:560px){:root[data-style=aurore] .cta{margin:30px 10px 10px;border-radius:28px}} /* pied de page */ :root[data-style=aurore] footer{background:transparent;color:var(--muted)} :root[data-style=aurore] .foot-top{border-bottom-color:rgb(43 39 69 / .1)} :root[data-style=aurore] .foot-brand p{color:var(--muted)} :root[data-style=aurore] .foot-col .foot-h{color:var(--navy)} :root[data-style=aurore] :is(.foot-col a,.foot-col span){color:var(--muted)} :root[data-style=aurore] .foot-col a:hover{color:var(--teal)} :root[data-style=aurore] .foot-bot{color:#8C88A8} /* barre mobile + panneau */ :root[data-style=aurore] .mbar{background:rgb(255 255 255 / .72);border-top:1px solid var(--glass-edge)} :root[data-style=aurore] .mbar a{border-radius:999px} :root[data-style=aurore] .mbar .m1{background:var(--grad)} :root[data-style=aurore] .mbar .m2{background:#fff;border-color:rgb(43 39 69 / .1)} :root[data-style=aurore] .cfg{-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5)} /* ===================================================================== STYLE 5 — SUISSE : grille stricte, typographie massive, une seule couleur ===================================================================== */ :root[data-style=suisse]{ --navy:#0A0A0A;--navy-deep:#0A0A0A;--navy-mid:#141414;--navy-soft:#1C1C1C; --ink:#0A0A0A;--muted:#55554F;--line:#0A0A0A; --bg:#F2F2EE;--bg-alt:#E8E8E2; --r:0px;--shadow:none;--shadow-xl:none; --grot:"Helvetica Neue",Inter,Helvetica,Arial,sans-serif; --cfg-bg:#F2F2EE;--cfg-ink:#0A0A0A;--cfg-muted:#55554F;--cfg-line:rgb(10 10 10 / .18);--cfg-r:0px; --cfg-border:1px solid #0A0A0A;--cfg-shadow:0 24px 60px rgb(0 0 0 / .18);--cfg-font:var(--grot); --cfg-fab-bg:var(--teal);--cfg-fab-fg:#fff;--cfg-fab-r:0px;--cfg-fab-shadow:0 0 0 1px #0A0A0A; } :root[data-style=suisse] body{background:var(--bg);color:var(--ink);font-family:var(--grot);counter-reset:sec} :root[data-style=suisse] #mx{display:none} :root[data-style=suisse] #prog{background:var(--teal);height:4px} :root[data-style=suisse] ::selection{background:var(--teal);color:#fff} :root[data-style=suisse] :is(h1,h2,h3){color:var(--ink)} :root[data-style=suisse] h1{font-size:clamp(42px,7.4vw,104px);font-weight:800;letter-spacing:-.06em;line-height:.92;margin-bottom:44px} :root[data-style=suisse] h1 .accent{white-space:nowrap;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--teal)} :root[data-style=suisse] h2{font-size:clamp(32px,4.8vw,64px);font-weight:800;letter-spacing:-.05em;line-height:.98} :root[data-style=suisse] h3{font-weight:700;letter-spacing:-.02em;line-height:1.2} :root[data-style=suisse] .btn{border-radius:0} /* header */ :root[data-style=suisse] header{background:rgb(242 242 238 / .95);border-bottom:1px solid var(--ink)} :root[data-style=suisse] header.stuck{box-shadow:none;border-bottom-color:var(--ink)} :root[data-style=suisse] .nav-brand .name{color:var(--ink);font-weight:800;letter-spacing:.04em} :root[data-style=suisse] .nav-links{gap:0} :root[data-style=suisse] .nav-links > a{color:var(--ink)} :root[data-style=suisse] .nav-links > a:not(.nav-cta){padding:0 15px} :root[data-style=suisse] .nav-links > a:not(.nav-cta)::after{left:15px;height:2px;background:var(--teal)} :root[data-style=suisse] .nav-links > a:not(.nav-cta):hover::after{width:calc(100% - 30px)} :root[data-style=suisse] .nav-cta{background:var(--teal);border-radius:0;margin-left:15px} :root[data-style=suisse] .nav-cta:hover{background:var(--ink);box-shadow:none;transform:none} /* hero : grille de 12 colonnes, titre pleine largeur */ :root[data-style=suisse] .hero{background:var(--bg);color:var(--ink);padding:56px 0 88px;border-bottom:1px solid var(--ink)} :root[data-style=suisse] .hero .grid-bg{opacity:1;background-image:linear-gradient(90deg,rgb(10 10 10 / .07) 1px,transparent 1px);background-size:calc(100% / 12) 100%;mask-image:none;-webkit-mask-image:none} :root[data-style=suisse] .hero-grid{grid-template-columns:repeat(12,1fr);column-gap:24px;row-gap:0;align-items:start} :root[data-style=suisse] .hero-grid > :first-child{display:contents} :root[data-style=suisse] .eyebrow{grid-column:1 / -1;display:flex;background:none;border:none;border-top:2px solid var(--ink);border-radius:0;padding:14px 0 0;margin-bottom:30px;color:var(--ink);font-size:13px;letter-spacing:.04em;font-weight:600} :root[data-style=suisse] .eyebrow .dot{width:12px;height:12px;border-radius:0;background:var(--teal);animation:none} :root[data-style=suisse] h1{grid-column:1 / -1} :root[data-style=suisse] .hero p.lead{grid-column:1 / span 5;color:var(--ink);max-width:none;margin-bottom:30px} :root[data-style=suisse] .hero-actions{grid-column:1 / span 6;margin-bottom:36px} :root[data-style=suisse] .hero-facts{grid-column:1 / span 5;flex-direction:column;gap:0;padding-top:0;border-top:1px solid var(--ink)} :root[data-style=suisse] .fact{padding:12px 0;border-bottom:1px solid rgb(10 10 10 / .15)} :root[data-style=suisse] .fact svg{stroke:var(--teal);stroke-width:3} :root[data-style=suisse] .fact span{color:var(--ink)} :root[data-style=suisse] .mock-zone{grid-column:7 / -1;grid-row:3 / span 3;perspective:none} :root[data-style=suisse] .btn-primary{background:var(--teal);box-shadow:none} :root[data-style=suisse] .btn-primary::before{display:none} :root[data-style=suisse] .btn-primary:hover{background:var(--ink);box-shadow:none;transform:none} :root[data-style=suisse] .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)} :root[data-style=suisse] .btn-ghost:hover{background:var(--ink);color:var(--bg);border-color:var(--ink);transform:none} :root[data-style=suisse] .btn-dark{background:var(--ink);box-shadow:none} :root[data-style=suisse] .btn-dark:hover{background:var(--teal);transform:none} :root[data-style=suisse] .browser{transform:none;animation:none;border-radius:0;border:1px solid var(--ink);box-shadow:none;background:#fff} :root[data-style=suisse] .br-bar{background:var(--bg);border-bottom:1px solid var(--ink)} :root[data-style=suisse] .br-dot{border-radius:0;background:transparent!important;border:1px solid var(--ink)} :root[data-style=suisse] .br-url{border-radius:0;background:#fff;border:1px solid rgb(10 10 10 / .2);color:var(--ink)} :root[data-style=suisse] .br-url svg{stroke:var(--teal)} :root[data-style=suisse] .br-body{min-height:320px} :root[data-style=suisse] :is(.sk,.sk-hero,.sk-card,.sk-btn){border-radius:0} :root[data-style=suisse] .sk{background:#E4E4DE} :root[data-style=suisse] .sk-hero{background:var(--teal);height:96px} :root[data-style=suisse] .sk-hero::after{display:none} :root[data-style=suisse] .sk-card{background:#fff;border-color:var(--ink)} :root[data-style=suisse] .sk-card::before{border-radius:0;background:var(--ink);width:12px;height:12px} :root[data-style=suisse] .sk-btn{background:var(--ink)} :root[data-style=suisse] .chip-float{background:var(--ink);color:#fff;border-radius:0;box-shadow:none;animation:none;font-weight:500} :root[data-style=suisse] .chip-float svg{stroke:var(--teal)} :root[data-style=suisse] .chip-a{top:auto;bottom:-22px;left:-24px} :root[data-style=suisse] .chip-b{bottom:auto;top:-20px;right:-16px} @media(max-width:960px){ :root[data-style=suisse] .hero{padding:40px 0 64px} :root[data-style=suisse] .hero-grid{grid-template-columns:1fr} :root[data-style=suisse] :is(.eyebrow,h1,.hero p.lead,.hero-actions,.hero-facts){grid-column:1 / -1} :root[data-style=suisse] .mock-zone{grid-column:1 / -1;grid-row:auto;margin-top:44px} } /* bandeau */ :root[data-style=suisse] .marquee{background:var(--teal);color:#fff;border-bottom:1px solid var(--ink);padding:14px 0} :root[data-style=suisse] .mq-item{font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.02em} :root[data-style=suisse] .mq-item i{width:8px;height:8px;border-radius:0;background:#fff} /* titres de section numérotés */ :root[data-style=suisse] .section-alt{background:var(--bg-alt);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)} :root[data-style=suisse] .kicker{letter-spacing:.02em;text-transform:none;font-size:14px;font-weight:600;color:var(--ink)} :root[data-style=suisse] .section-head,:root[data-style=suisse] .section-head.center{ max-width:none;margin:0 0 64px;text-align:left;display:grid;grid-template-columns:3fr 9fr;column-gap:24px; border-top:2px solid var(--ink);padding-top:18px;counter-increment:sec} :root[data-style=suisse] .section-head .kicker{grid-column:1;grid-row:1 / span 2} :root[data-style=suisse] .section-head .kicker::before{content:counter(sec,decimal-leading-zero);display:block;font-size:56px;font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--teal);margin-bottom:10px} :root[data-style=suisse] .section-head h2{grid-column:2} :root[data-style=suisse] .section-head p{grid-column:2;max-width:640px;color:var(--muted);font-size:18px} :root[data-style=suisse] .zone-txt .kicker::before{content:'';display:inline-block;width:10px;height:10px;background:var(--teal);margin-right:10px} @media(max-width:760px){ :root[data-style=suisse] .section-head,:root[data-style=suisse] .section-head.center{grid-template-columns:1fr} :root[data-style=suisse] .section-head :is(.kicker,h2,p){grid-column:1;grid-row:auto} :root[data-style=suisse] .section-head .kicker{margin-bottom:14px} :root[data-style=suisse] .section-head .kicker::before{font-size:42px} } /* services : tableau */ :root[data-style=suisse] .cards{gap:0;border-top:1px solid var(--ink);border-left:1px solid var(--ink)} :root[data-style=suisse] .card{background:transparent;border:none;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);border-radius:0;padding:40px 36px 44px;transition:background-color .25s,color .25s} :root[data-style=suisse] .card::before,:root[data-style=suisse] .card::after{display:none} :root[data-style=suisse] .card:hover{transform:none;box-shadow:none;border-color:var(--ink)} :root[data-style=suisse] .ico{width:auto;height:auto;background:none;border-radius:0;justify-content:flex-start;margin-bottom:28px} :root[data-style=suisse] .ico svg{width:34px;height:34px;stroke:var(--ink);stroke-width:1.6} :root[data-style=suisse] :is(.card,.arg):hover .ico{background:none;transform:none} :root[data-style=suisse] .arg:hover .ico svg{stroke:var(--teal)} :root[data-style=suisse] .card h3{font-size:26px;letter-spacing:-.03em} :root[data-style=suisse] :is(.card,.duo-card) li{padding-left:22px} :root[data-style=suisse] :is(.card,.duo-card) li::before{border:none;transform:none;width:8px;height:8px;background:var(--teal);top:9px} @media(hover:hover){ :root[data-style=suisse] .card:hover{background:var(--ink)} :root[data-style=suisse] .card:hover :is(h3,li){color:#fff} :root[data-style=suisse] .card:hover p{color:#A8A8A0} :root[data-style=suisse] .card:hover .ico svg{stroke:var(--teal)} } /* avant / après */ :root[data-style=suisse] .ba-frame{border-radius:0;border:1px solid var(--ink);box-shadow:none} :root[data-style=suisse] .ba-chrome{background:var(--bg);border-bottom:1px solid var(--ink)} :root[data-style=suisse] .ba-chrome .cd{border-radius:0;background:transparent!important;border:1px solid var(--ink)} :root[data-style=suisse] .ba-chrome .cu{border-radius:0;border-color:rgb(10 10 10 / .2)} :root[data-style=suisse] .ba-chrome .cu svg{stroke:var(--teal)} :root[data-style=suisse] .ba-tag{border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none} :root[data-style=suisse] .ba-tag.l{background:var(--ink);border-color:var(--ink)} :root[data-style=suisse] .ba-tag.r{background:var(--teal);border-color:var(--teal)} :root[data-style=suisse] .ba-handle{background:var(--teal);box-shadow:none} :root[data-style=suisse] .ba-knob{border-radius:0;background:var(--teal);box-shadow:none;width:48px;height:48px} :root[data-style=suisse] .ba-knob svg{stroke:#fff} :root[data-style=suisse] .ba-hint{text-align:left} :root[data-style=suisse] .ba-hint b{color:var(--ink)} :root[data-style=suisse] .ba-pts{gap:24px} :root[data-style=suisse] .ba-pt{text-align:left;padding:18px 0 0;border-top:2px solid var(--ink)} :root[data-style=suisse] .ba-pt .i{margin:0 0 18px;border:none;background:none;width:auto;height:auto;justify-content:flex-start} :root[data-style=suisse] .ba-pt .i svg{width:28px;height:28px;stroke:var(--teal)} :root[data-style=suisse] .ba-pt b{font-size:19px;color:var(--ink)} /* arguments */ :root[data-style=suisse] .args{gap:24px} :root[data-style=suisse] .arg{background:none;border:none;border-top:6px solid var(--ink);border-radius:0;padding:26px 0 0} :root[data-style=suisse] .arg:hover{transform:none;box-shadow:none;border-top-color:var(--teal)} :root[data-style=suisse] .arg .ico{background:none} :root[data-style=suisse] .arg h3{font-size:22px} /* applications */ :root[data-style=suisse] .app-list{gap:0;border-top:1px solid var(--ink)} :root[data-style=suisse] .app-list li{padding:18px 0;border-bottom:1px solid rgb(10 10 10 / .18)} :root[data-style=suisse] .app-list .i{background:var(--ink);border-radius:0} :root[data-style=suisse] .app-list .i svg{stroke:#fff} :root[data-style=suisse] .app-list b{color:var(--ink);font-size:17px} :root[data-style=suisse] .ad-frame{border-radius:0;border:1px solid var(--ink);box-shadow:none;background:#fff} :root[data-style=suisse] .ad-top{background:var(--ink);border-bottom:none} :root[data-style=suisse] .ad-top .cd{border-radius:0;background:transparent!important;border:1px solid #fff} :root[data-style=suisse] .ad-top .tt{color:#fff} :root[data-style=suisse] .ad-h{font-size:22px;font-weight:800;letter-spacing:-.03em} :root[data-style=suisse] :is(.ad-day,.ad-slot){border-radius:0;border-width:1px;border-color:rgb(10 10 10 / .25)} :root[data-style=suisse] :is(.ad-day .d,.ad-day .n){display:block} :root[data-style=suisse] .ad-day.on{background:var(--ink);border-color:var(--ink)} :root[data-style=suisse] .ad-slot.on{background:var(--teal);border-color:var(--teal);color:#fff} :root[data-style=suisse] .ad-go{border-radius:0} :root[data-style=suisse] .ad-go:disabled{background:#E4E4DE;color:#8F8F88} :root[data-style=suisse] .ad-go:not(:disabled):hover{background:var(--ink)} :root[data-style=suisse] .ad-check{border-radius:0} /* options : tableau de cases */ :root[data-style=suisse] .chips{justify-content:flex-start;max-width:none;margin:0;gap:0;border-top:1px solid var(--ink);border-left:1px solid var(--ink)} :root[data-style=suisse] .chip{flex:1 1 auto;text-align:center;border-radius:0;background:transparent;border:none;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:16px 22px} @media(hover:hover){:root[data-style=suisse] .chip:hover{background:var(--teal);color:#fff;transform:none;box-shadow:none;border-color:var(--ink)}} /* formules */ :root[data-style=suisse] .duo{gap:0} :root[data-style=suisse] .duo-card{border-radius:0;border:1px solid var(--ink);background:transparent} :root[data-style=suisse] .duo-card:hover{transform:none;box-shadow:none} :root[data-style=suisse] .duo-card.dark{background:var(--teal);border-color:var(--ink);border-left:none} :root[data-style=suisse] .duo-card.dark::before{display:none} :root[data-style=suisse] .duo-card.dark :is(.duo-title,.duo-label,li){color:#fff} :root[data-style=suisse] .duo-card.dark p{color:rgb(255 255 255 / .9)} :root[data-style=suisse] .duo-card.dark li::before{background:#fff} :root[data-style=suisse] .duo-label{color:var(--ink);letter-spacing:.06em} :root[data-style=suisse] .duo-title{font-size:34px;letter-spacing:-.04em;line-height:1.05} @media(max-width:840px){:root[data-style=suisse] .duo-card.dark{border-left:1px solid var(--ink);border-top:none}} /* méthode : grands chiffres */ :root[data-style=suisse] .steps::before{display:none} :root[data-style=suisse] .step{border-top:2px solid var(--ink);padding-top:16px} :root[data-style=suisse] .step .n,:root[data-style=suisse] .step:hover .n{width:auto;height:auto;background:none;box-shadow:none;border-radius:0;justify-content:flex-start;transform:none;color:var(--ink);font-size:88px;font-weight:800;letter-spacing:-.06em;line-height:.9;margin-bottom:20px} @media(hover:hover){:root[data-style=suisse] .step:hover .n{color:var(--teal)}} /* faq alignée sur la colonne des titres */ :root[data-style=suisse] .faq{max-width:none;margin:0 0 0 calc(25% + 18px)} :root[data-style=suisse] .q{border-bottom:1px solid var(--ink)} :root[data-style=suisse] .q:first-child{border-top:1px solid var(--ink)} :root[data-style=suisse] .q button{font-size:21px;font-weight:600;letter-spacing:-.02em;color:var(--ink);padding:24px 60px 24px 0} :root[data-style=suisse] .q button:hover{color:var(--teal)} :root[data-style=suisse] .q button::after{content:'+';border:none;transform:none;width:auto;height:auto;top:14px;right:0;font-size:40px;font-weight:300;line-height:1;color:var(--ink)} :root[data-style=suisse] .q.open button::after{transform:rotate(45deg);color:var(--teal)} @media(max-width:760px){:root[data-style=suisse] .faq{margin:0}} /* zone */ :root[data-style=suisse] .zone-card{border-radius:0;border:1px solid var(--ink);box-shadow:none;background:transparent} :root[data-style=suisse] .zone-txt p strong{color:var(--ink)} :root[data-style=suisse] .zone-map svg path{fill:rgb(var(--teal-rgb) / .14);stroke:var(--teal);stroke-width:2.5;stroke-linejoin:miter} :root[data-style=suisse] .zone-map svg g{fill:var(--ink)} :root[data-style=suisse] .zone-map svg circle[fill="#2698A0"]{fill:var(--teal)} :root[data-style=suisse] .zone-map svg circle[stroke="#2698A0"]{stroke:var(--teal)} :root[data-style=suisse] .zone-map svg circle[fill="#8FA2C2"]{fill:var(--ink)} :root[data-style=suisse] .zone-map svg > text{fill:var(--ink);paint-order:stroke;stroke:var(--bg);stroke-width:6px;stroke-linejoin:round} /* contact */ :root[data-style=suisse] .cta{background:var(--ink);text-align:left;padding:110px 0} :root[data-style=suisse] .cta .grid-bg{opacity:1;background-image:linear-gradient(90deg,rgb(255 255 255 / .08) 1px,transparent 1px);background-size:calc(100% / 12) 100%;mask-image:none;-webkit-mask-image:none} :root[data-style=suisse] .cta h2{color:#fff;font-size:clamp(42px,6.6vw,94px);letter-spacing:-.06em;line-height:.9;margin-bottom:28px} :root[data-style=suisse] .cta p{margin:0 0 48px;color:#B5B5AE;max-width:560px} :root[data-style=suisse] .cf{margin:0 0 36px;border-radius:0;box-shadow:none;background:var(--bg)} :root[data-style=suisse] .cf label{color:var(--ink);letter-spacing:.04em} :root[data-style=suisse] :is(.cf input,.cf select,.cf textarea){border-radius:0;border-color:rgb(10 10 10 / .35);background:#fff} :root[data-style=suisse] :is(.cf input,.cf select,.cf textarea):focus{border-color:var(--ink);box-shadow:0 0 0 2px var(--teal)} :root[data-style=suisse] .cf .cf-consent a{color:var(--ink)} :root[data-style=suisse] .cf-note{text-align:left} :root[data-style=suisse] .cta-actions{justify-content:flex-start} :root[data-style=suisse] .cta .btn-ghost{color:#fff;border-color:rgb(255 255 255 / .5)} :root[data-style=suisse] .cta .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff} :root[data-style=suisse] .cta-actions .btn-primary:hover{background:#fff;color:var(--ink)} :root[data-style=suisse] .cta-mail{color:#8F8F88} :root[data-style=suisse] .cta-mail a{color:#fff;border-color:var(--teal)} /* pied de page */ :root[data-style=suisse] footer{background:var(--bg);color:var(--ink)} :root[data-style=suisse] .foot-top{border-bottom-color:var(--ink)} :root[data-style=suisse] .foot-brand p{color:var(--muted)} :root[data-style=suisse] .foot-col .foot-h{color:var(--ink);letter-spacing:.04em;text-transform:none;font-size:14px;border-top:2px solid var(--ink);padding-top:10px} :root[data-style=suisse] :is(.foot-col a,.foot-col span){color:var(--ink)} :root[data-style=suisse] .foot-col a:hover{color:var(--teal)} :root[data-style=suisse] .foot-bot{color:var(--muted)} /* barre mobile */ :root[data-style=suisse] .mbar{background:var(--bg);border-top:1px solid var(--ink);box-shadow:none} :root[data-style=suisse] .mbar a{border-radius:0} :root[data-style=suisse] .mbar .m2{background:transparent;color:var(--ink);border-color:var(--ink)} /* ===================================================================== STYLE 6 — NATURE : tons végétaux, formes organiques, douceur ===================================================================== */ :root[data-style=nature]{ --navy:#1F3B2D;--navy-deep:#15291F;--navy-mid:#1F3B2D;--navy-soft:#2A4A39; --ink:#2C3A31;--muted:#5F6F63;--line:rgb(31 59 45 / .12); --bg:#EEF3EA;--bg-alt:#E2EBDC;--surface:#FAFBF6; --r:32px; --soft:0 1px 0 rgb(31 59 45 / .04),0 24px 50px -24px rgb(31 59 45 / .24); --shadow:0 30px 60px -26px rgb(31 59 45 / .3); --shadow-xl:0 36px 70px -28px rgb(31 59 45 / .36); --blob:62% 38% 55% 45% / 48% 58% 42% 52%; --humane:Candara,Seravek,"Gill Sans Nova","Gill Sans","Trebuchet MS",sans-serif; --mx-dot-rgb:31 59 45; --cfg-bg:#FAFBF6;--cfg-ink:#1F3B2D;--cfg-muted:#5F6F63;--cfg-line:rgb(31 59 45 / .14);--cfg-r:28px; --cfg-border:none;--cfg-shadow:0 30px 80px -20px rgb(31 59 45 / .45);--cfg-font:var(--humane); --cfg-fab-bg:#1F3B2D;--cfg-fab-fg:#fff;--cfg-fab-r:999px;--cfg-fab-shadow:0 12px 30px -8px rgb(31 59 45 / .55),0 0 0 3px rgb(var(--teal-rgb) / .4); } :root[data-style=nature] body{background:var(--bg);color:var(--ink)} :root[data-style=nature] #mx{opacity:.55} :root[data-style=nature] #prog{background:var(--teal);height:4px;border-radius:0 4px 4px 0} :root[data-style=nature] :is(h1,h2,h3,.duo-title,.ad-h,.ad-title){font-family:var(--humane);color:var(--navy);letter-spacing:-.01em} :root[data-style=nature] h1{font-weight:700;font-size:clamp(38px,5.4vw,68px);line-height:1.06} :root[data-style=nature] h1 .accent{white-space:nowrap;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--teal);text-decoration:underline wavy;text-decoration-color:rgb(var(--teal-rgb) / .55);text-decoration-thickness:3px;text-underline-offset:12px;text-decoration-skip-ink:none} :root[data-style=nature] h2{font-weight:700;font-size:clamp(30px,3.8vw,48px)} :root[data-style=nature] h3{font-weight:700;font-size:21px;line-height:1.3} :root[data-style=nature] .btn{border-radius:999px} /* header */ :root[data-style=nature] header{background:rgb(238 243 234 / .86)} :root[data-style=nature] header.stuck{border-bottom-color:transparent;box-shadow:0 10px 30px -18px rgb(31 59 45 / .35)} :root[data-style=nature] .nav-brand .name{color:var(--navy)} :root[data-style=nature] .nav-links > a{color:var(--muted)} :root[data-style=nature] .nav-links > a:not(.nav-cta)::after{width:6px;height:6px;border-radius:50%;left:50%;bottom:-11px;transform:translateX(-50%) scale(0);transition:transform .3s var(--ease);background:var(--teal)} :root[data-style=nature] .nav-links > a:not(.nav-cta):hover::after{width:6px;transform:translateX(-50%) scale(1)} :root[data-style=nature] .nav-cta{background:var(--navy);border-radius:999px} :root[data-style=nature] .nav-cta:hover{background:var(--teal);box-shadow:0 10px 24px -8px rgb(var(--teal-rgb) / .6)} /* hero : forme organique vivante derrière la maquette */ :root[data-style=nature] .hero{color:var(--ink);background:radial-gradient(900px 520px at 85% 20%,rgb(var(--teal-rgb) / .16),transparent 62%),radial-gradient(700px 480px at 0% 100%,rgb(var(--teal-glow-rgb) / .24),transparent 60%),var(--bg)} :root[data-style=nature] .hero .grid-bg{display:none} :root[data-style=nature] .eyebrow{background:var(--surface);border:1px solid var(--line);color:var(--navy);letter-spacing:.06em;box-shadow:var(--soft)} :root[data-style=nature] .eyebrow .dot{background:var(--teal)} :root[data-style=nature] .hero p.lead{color:var(--muted)} :root[data-style=nature] .hero p.lead strong{color:var(--navy)} :root[data-style=nature] .btn-primary{background:var(--teal);box-shadow:0 14px 30px -12px rgb(var(--teal-rgb) / .7)} :root[data-style=nature] .btn-primary:hover{background:var(--navy);box-shadow:0 18px 36px -14px rgb(31 59 45 / .6)} :root[data-style=nature] .btn-ghost{background:var(--surface);color:var(--navy);border:1px solid var(--line)} :root[data-style=nature] .btn-ghost:hover{background:#fff;border-color:rgb(var(--teal-rgb) / .5)} :root[data-style=nature] .btn-dark{background:var(--navy);box-shadow:0 14px 30px -12px rgb(31 59 45 / .55)} :root[data-style=nature] .btn-dark:hover{background:var(--teal)} :root[data-style=nature] .hero-facts{border-top:1px dashed rgb(31 59 45 / .22)} :root[data-style=nature] .fact svg{stroke:var(--teal)} :root[data-style=nature] .fact span{color:var(--ink)} :root[data-style=nature] .mock-zone{perspective:none} :root[data-style=nature] .mock-zone::before{content:'';position:absolute;inset:-9% -7% -11% -5%;background:linear-gradient(140deg,rgb(var(--teal-rgb) / .4),rgb(var(--teal-glow-rgb) / .5));border-radius:var(--blob);animation:naBlob 14s ease-in-out infinite alternate;z-index:0} @keyframes naBlob{0%{border-radius:62% 38% 55% 45% / 48% 58% 42% 52%;transform:rotate(0)}50%{border-radius:40% 60% 38% 62% / 60% 40% 60% 40%;transform:rotate(6deg)}100%{border-radius:55% 45% 65% 35% / 42% 55% 45% 58%;transform:rotate(-4deg)}} :root[data-style=nature] .browser{position:relative;z-index:1;transform:none;animation:naFloat 7s ease-in-out infinite;border-radius:26px;box-shadow:0 40px 80px -30px rgb(31 59 45 / .5)} @keyframes naFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} :root[data-style=nature] .br-bar{background:var(--surface);border-bottom:1px solid var(--line)} :root[data-style=nature] .br-url{background:var(--bg);border-radius:999px} :root[data-style=nature] .br-url svg{stroke:var(--teal)} :root[data-style=nature] .sk{background:#E6ECE2;border-radius:99px} :root[data-style=nature] .sk-hero{border-radius:20px} :root[data-style=nature] .sk-card{border-radius:18px;background:var(--bg);border-color:transparent} :root[data-style=nature] .sk-card::before{border-radius:var(--blob);background:rgb(var(--teal-rgb) / .35)} :root[data-style=nature] .sk-btn{border-radius:99px} :root[data-style=nature] .chip-float{background:var(--surface);border-radius:999px;box-shadow:0 18px 40px -16px rgb(31 59 45 / .45)} @media(max-width:960px){ :root[data-style=nature] .browser{animation:none} :root[data-style=nature] .mock-zone{max-width:470px} } /* bandeau */ :root[data-style=nature] .marquee{background:var(--navy);color:#CFDDD2;border-bottom:none} :root[data-style=nature] .mq-item{font-family:var(--humane);font-size:17px;letter-spacing:.01em} :root[data-style=nature] .mq-item i{width:12px;height:12px;border-radius:0 100% 0 100%;background:var(--teal-glow)} /* sections : bords ondulés */ :root[data-style=nature] .section-alt{background:var(--bg-alt);border:none} :root[data-style=nature] .section-alt::before,:root[data-style=nature] .section-alt::after{ content:'';position:absolute;left:0;right:0;height:46px;background:var(--bg-alt);pointer-events:none; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46V26C160 4 320 0 480 12s320 30 480 30 320-24 480-36V46Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46V26C160 4 320 0 480 12s320 30 480 30 320-24 480-36V46Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat; } :root[data-style=nature] .section-alt::before{top:-45px} :root[data-style=nature] .section-alt::after{bottom:-45px;transform:scale(-1,-1)} :root[data-style=nature] .kicker{display:inline-flex;align-items:center;gap:9px;text-transform:none;letter-spacing:.01em;font-size:16px;font-weight:700;font-family:var(--humane);color:var(--teal)} :root[data-style=nature] .kicker::before{content:'';width:13px;height:13px;border-radius:0 100% 0 100%;background:currentColor;flex:none} :root[data-style=nature] .section-head p{color:var(--muted)} /* services : cartes décalées */ :root[data-style=nature] .cards{gap:28px} :root[data-style=nature] .card{background:var(--surface);border:none;border-radius:var(--r);box-shadow:var(--soft)} :root[data-style=nature] .card::after{display:none} :root[data-style=nature] .ico{background:rgb(var(--teal-rgb) / .14);border-radius:var(--blob);transition:all .5s var(--ease)} :root[data-style=nature] .ico svg{stroke:var(--teal)} :root[data-style=nature] :is(.card,.arg):hover .ico{background:var(--teal);border-radius:50%;transform:rotate(-8deg)} :root[data-style=nature] :is(.card,.duo-card) li::before{border:none;transform:none;width:8px;height:8px;border-radius:50%;background:var(--teal);top:9px;left:2px} @media(min-width:701px){ :root[data-style=nature] .cards{padding-bottom:48px} :root[data-style=nature] .card:nth-child(even){transform:translateY(48px)} } @media(hover:hover){ :root[data-style=nature] .card:hover{box-shadow:var(--shadow-xl);transform:translateY(-6px)} } @media(hover:hover) and (min-width:701px){ :root[data-style=nature] .card:nth-child(even):hover{transform:translateY(42px)} } /* avant / après */ :root[data-style=nature] .ba-frame{border-radius:28px;box-shadow:0 40px 90px -40px rgb(31 59 45 / .5)} :root[data-style=nature] .ba-chrome{background:var(--surface);border-bottom:1px solid var(--line)} :root[data-style=nature] .ba-chrome .cu{border-radius:999px;background:var(--bg);border-color:transparent} :root[data-style=nature] .ba-chrome .cu svg{stroke:var(--teal)} :root[data-style=nature] .ba-tag{border-radius:999px} :root[data-style=nature] .ba-tag.r{background:var(--teal);border-color:transparent} :root[data-style=nature] .ba-knob{background:var(--surface);box-shadow:0 0 0 6px rgb(var(--teal-rgb) / .4),0 10px 26px rgb(0 0 0 / .3)} :root[data-style=nature] .ba-knob svg{stroke:var(--teal)} :root[data-style=nature] .ba-pt .i{width:58px;height:54px;border:none;border-radius:var(--blob);background:rgb(var(--teal-rgb) / .16)} :root[data-style=nature] .ba-pt .i svg{stroke:var(--teal);width:22px;height:22px} :root[data-style=nature] .ba-pt b{font-family:var(--humane);font-size:18px} /* arguments */ :root[data-style=nature] .arg{background:var(--surface);border:none;border-radius:var(--r);box-shadow:var(--soft);text-align:center;padding:40px 30px} :root[data-style=nature] .arg .ico{margin-left:auto;margin-right:auto;background:rgb(var(--teal-rgb) / .14)} /* applications */ :root[data-style=nature] .app-list .i{background:rgb(var(--teal-rgb) / .15);border-radius:var(--blob)} :root[data-style=nature] .app-list .i svg{stroke:var(--teal)} :root[data-style=nature] .app-list b{font-family:var(--humane);font-size:18px} :root[data-style=nature] .ad-frame{border-radius:28px;background:var(--surface);box-shadow:0 40px 80px -36px rgb(31 59 45 / .45)} :root[data-style=nature] .ad-top{background:var(--bg);border-bottom:1px solid var(--line)} :root[data-style=nature] :is(.ad-day,.ad-slot){border-radius:16px;background:#fff;border-color:var(--line)} :root[data-style=nature] :is(.ad-day .d,.ad-day .n){display:block} :root[data-style=nature] .ad-day.on{background:var(--navy);border-color:var(--navy)} :root[data-style=nature] .ad-day.on .d{color:#A9C2B0} :root[data-style=nature] .ad-slot.on{background:var(--teal);border-color:var(--teal);color:#fff} :root[data-style=nature] .ad-slot:disabled{background:var(--bg);color:#AAB7AD} :root[data-style=nature] .ad-go{border-radius:999px} :root[data-style=nature] .ad-go:disabled{background:#E1E8DD;color:#8E9C92} :root[data-style=nature] .ad-go:not(:disabled):hover{background:var(--navy)} :root[data-style=nature] .ad-check{border-radius:var(--blob)} /* options */ :root[data-style=nature] .chip{background:var(--surface);border-color:transparent;box-shadow:var(--soft);color:var(--navy);font-weight:600} @media(hover:hover){:root[data-style=nature] .chip:hover{background:var(--teal);color:#fff;box-shadow:0 14px 26px -12px rgb(var(--teal-rgb) / .7)}} /* formules */ :root[data-style=nature] .duo-card{background:var(--surface);border:none;border-radius:var(--r);box-shadow:var(--soft)} :root[data-style=nature] .duo-card.dark{background:var(--navy)} :root[data-style=nature] .duo-card.dark::before{background:rgb(var(--teal-rgb) / .5);border-radius:var(--blob);filter:blur(12px);width:300px;height:260px;top:-90px;right:-80px} :root[data-style=nature] .duo-card.dark .duo-title{color:#fff} :root[data-style=nature] .duo-card.dark p{color:#B9CBBE} :root[data-style=nature] .duo-card.dark li{color:#E6EEE7} :root[data-style=nature] .duo-card.dark li::before{background:var(--teal-glow)} :root[data-style=nature] .duo-card.dark .duo-label{color:var(--teal-glow)} :root[data-style=nature] .duo-label{letter-spacing:.08em} /* méthode */ :root[data-style=nature] .steps::before{background:none;border-top:2px dashed rgb(var(--teal-rgb) / .45);height:0;top:28px} :root[data-style=nature] .step .n{width:60px;height:56px;border-radius:var(--blob);background:var(--surface);color:var(--teal);font-family:var(--humane);font-size:24px;font-variant-numeric:lining-nums;box-shadow:var(--soft)} :root[data-style=nature] .step:nth-child(even) .n{border-radius:45% 55% 40% 60% / 55% 45% 55% 45%} :root[data-style=nature] .step:hover .n{background:var(--teal);color:#fff;border-radius:50%} /* faq */ :root[data-style=nature] .faq{display:flex;flex-direction:column;gap:12px} :root[data-style=nature] .q{background:var(--surface);border:none;border-radius:24px;padding:0 26px;box-shadow:var(--soft)} :root[data-style=nature] .q.open{background:#fff} :root[data-style=nature] .q button{font-family:var(--humane);font-size:19px;font-weight:700;padding:21px 44px 21px 0} :root[data-style=nature] .q button::after{top:28px} :root[data-style=nature] .q .a p{padding:0 20px 24px 0} /* zone */ :root[data-style=nature] .zone-card{background:var(--surface);border:none;border-radius:44px;box-shadow:var(--soft)} :root[data-style=nature] .zone-txt p strong{color:var(--navy)} :root[data-style=nature] .zone-map svg path{fill:rgb(var(--teal-rgb) / .16);stroke:var(--teal);stroke-width:2.4;stroke-dasharray:2 7;stroke-linecap:round} :root[data-style=nature] .zone-map svg g{fill:var(--navy)} :root[data-style=nature] .zone-map svg circle[fill="#2698A0"]{fill:var(--teal)} :root[data-style=nature] .zone-map svg circle[stroke="#2698A0"]{stroke:var(--teal)} :root[data-style=nature] .zone-map svg circle[fill="#8FA2C2"]{fill:var(--muted)} :root[data-style=nature] .zone-map svg > text{fill:var(--teal);paint-order:stroke;stroke:var(--surface);stroke-width:6px;stroke-linejoin:round} /* contact : arrondi qui se fond dans le pied de page */ :root[data-style=nature] .cta{background:radial-gradient(700px 420px at 12% 0%,rgb(var(--teal-rgb) / .38),transparent 60%),radial-gradient(600px 400px at 100% 100%,rgb(var(--teal-glow-rgb) / .16),transparent 60%),var(--navy);border-radius:56px 56px 0 0;margin-top:30px} :root[data-style=nature] .cta .grid-bg{display:none} :root[data-style=nature] .cta h2{color:#fff} :root[data-style=nature] .cta p{color:#BFD0C4} :root[data-style=nature] .cf{background:var(--surface);border-radius:30px;box-shadow:0 30px 70px -20px rgb(0 0 0 / .45)} :root[data-style=nature] .cf label{color:var(--navy)} :root[data-style=nature] :is(.cf input,.cf select,.cf textarea){border-radius:14px;background:#fff;border-color:rgb(31 59 45 / .16)} :root[data-style=nature] .cta .btn-ghost{background:rgb(255 255 255 / .08);color:#fff;border-color:rgb(255 255 255 / .28)} :root[data-style=nature] .cta .btn-ghost:hover{background:rgb(255 255 255 / .16)} :root[data-style=nature] .cta-actions .btn-primary:hover{background:#fff;color:var(--navy)} :root[data-style=nature] .cta-mail{color:#9FB5A6} :root[data-style=nature] .cta-mail a{color:var(--teal-glow);border-color:rgb(var(--teal-glow-rgb) / .45)} @media(max-width:560px){:root[data-style=nature] .cta{border-radius:36px 36px 0 0}} /* pied de page */ :root[data-style=nature] footer{background:var(--navy);color:#A9B9AD} :root[data-style=nature] .foot-top{border-bottom-color:rgb(255 255 255 / .1)} :root[data-style=nature] .foot-brand img{filter:brightness(0) invert(1);opacity:.9} :root[data-style=nature] .foot-brand p{color:#A9B9AD} :root[data-style=nature] .foot-col .foot-h{font-family:var(--humane);text-transform:none;letter-spacing:0;font-size:18px;color:#fff} :root[data-style=nature] :is(.foot-col a,.foot-col span){color:#BFCDC3} :root[data-style=nature] .foot-col a:hover{color:var(--teal-glow)} :root[data-style=nature] .foot-bot{color:#8BA092} /* barre mobile */ :root[data-style=nature] .mbar{background:rgb(250 251 246 / .95);border-top:none;box-shadow:0 -10px 30px -12px rgb(31 59 45 / .25)} :root[data-style=nature] .mbar a{border-radius:999px} :root[data-style=nature] .mbar .m2{background:var(--bg);color:var(--navy);border-color:transparent} /* ===================================================================== CONFIGURATEUR (bouton + panneau) ===================================================================== */ :root{ --cfg-bg:#fff;--cfg-ink:#16264B;--cfg-muted:#5C6880;--cfg-line:#E4E8EF;--cfg-r:18px; --cfg-border:1px solid #E4E8EF;--cfg-shadow:0 30px 70px rgb(10 19 34 / .28);--cfg-font:inherit; --cfg-fab-bg:#16264B;--cfg-fab-fg:#fff;--cfg-fab-r:999px;--cfg-fab-shadow:0 14px 34px rgb(10 19 34 / .35),0 0 0 1px rgb(255 255 255 / .18); } .cfg-fab{ position:fixed;left:20px;bottom:20px;z-index:190; display:inline-flex;align-items:center;gap:9px;padding:12px 18px 12px 14px; background:var(--cfg-fab-bg);color:var(--cfg-fab-fg);border:none;border-radius:var(--cfg-fab-r); box-shadow:var(--cfg-fab-shadow);font:600 14px/1 'Inter',-apple-system,'Segoe UI',sans-serif;cursor:pointer; transition:transform .25s var(--ease); } .cfg-fab svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .cfg-fab svg circle{fill:currentColor;stroke:none} .cfg-fab:hover{transform:translateY(-2px)} .cfg-fab.hint::after{content:'';position:absolute;inset:-5px;border-radius:inherit;border:2px solid var(--teal);animation:cfgPing 1.9s var(--ease) infinite;pointer-events:none} @keyframes cfgPing{0%{opacity:.9;transform:scale(.94)}100%{opacity:0;transform:scale(1.2)}} @media(max-width:900px){ .cfg-fab{left:14px;bottom:calc(88px + env(safe-area-inset-bottom,0px));padding:13px} .cfg-fab span{display:none} } .cfg{ position:fixed;left:20px;bottom:82px;z-index:195;width:432px;max-width:calc(100vw - 40px); max-height:calc(100vh - 110px);overflow:auto;overscroll-behavior:contain; background:var(--cfg-bg);color:var(--cfg-ink);border:var(--cfg-border);border-radius:var(--cfg-r); box-shadow:var(--cfg-shadow);padding:20px; font-family:'Inter',-apple-system,'Segoe UI',sans-serif;line-height:1.4; animation:cfgIn .35s var(--ease);transform-origin:bottom left; } @keyframes cfgIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}} @media(max-width:900px){ .cfg{left:0;right:0;bottom:0;width:auto;max-width:none;max-height:82vh; border-radius:var(--cfg-r) var(--cfg-r) 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom,0px))} } .cfg button{font-family:inherit;color:inherit} .cfg button:focus-visible,.cfg-fab:focus-visible{outline:2px solid var(--teal);outline-offset:3px} .cfg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:18px} .cfg-title{display:block;font-family:var(--cfg-font);font-size:17px;font-weight:700;margin-bottom:5px} .cfg-head p{font-size:13px;color:var(--cfg-muted);line-height:1.5} .cfg-x{flex:0 0 34px;height:34px;border-radius:50%;background:transparent;border:1px solid var(--cfg-line);cursor:pointer;display:flex;align-items:center;justify-content:center} .cfg-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round} .cfg-lbl{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cfg-muted);margin-bottom:10px} .cfg-lbl b{letter-spacing:0;text-transform:none;color:var(--cfg-ink);font-weight:600;font-size:12.5px} .cfg-styles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px} .cfg-style{position:relative;text-align:left;background:transparent;border:1.5px solid var(--cfg-line);border-radius:calc(var(--cfg-r) - 8px);padding:5px 5px 7px;cursor:pointer;transition:border-color .2s,transform .25s var(--ease)} .cfg-style:active{transform:scale(.96)} .cfg-style:hover{border-color:var(--cfg-muted)} .cfg-style[aria-pressed="true"]{border-color:var(--cfg-ink);box-shadow:inset 0 0 0 1px var(--cfg-ink)} .cfg-style[aria-pressed="true"]::after{content:'';position:absolute;top:9px;right:9px;width:16px;height:16px;border-radius:50%;background:var(--cfg-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center/10px no-repeat;z-index:2} :root[data-style=nocturne] .cfg-style[aria-pressed="true"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307090D' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E")} .cfg-name{display:block;font-size:12px;font-weight:700;padding:0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cfg-desc{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .cfg-tile{display:block;position:relative;height:52px;border-radius:calc(var(--cfg-r) - 12px);overflow:hidden;margin-bottom:6px} .cfg-tile i{position:absolute;display:block;font-style:normal} .cfg-tile .aa{left:8px;top:5px;font-size:19px;line-height:1.1;z-index:1} .cfg-tile .bar{left:9px;bottom:8px;width:28px;height:7px;z-index:1} .cfg-tile .ln{right:8px;top:12px;width:32%;height:26px;background:linear-gradient(currentColor 0 0) 0 0/100% 4px no-repeat,linear-gradient(currentColor 0 0) 0 9px/80% 4px no-repeat,linear-gradient(currentColor 0 0) 0 18px/60% 4px no-repeat;opacity:.22} .cfg-tile.t-original{background:linear-gradient(158deg,#0A1322,#16264B 55%,#1D3E68);color:#fff} .cfg-tile.t-original .aa{font-family:'Inter',sans-serif;font-weight:800;letter-spacing:-.03em} .cfg-tile.t-original .bar{background:var(--tc,#2698A0);border-radius:4px} .cfg-tile.t-atelier{background:#F6F1E7;color:#241D17;box-shadow:inset 0 0 0 1px #241D17} .cfg-tile.t-atelier .aa{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-style:italic;font-weight:500} .cfg-tile.t-atelier .bar{background:var(--tc,#B4532A);height:2px;bottom:11px} .cfg-tile.t-nocturne{background:radial-gradient(80px 50px at 50% 0,rgb(255 255 255 / .12),transparent),#07090D;color:#fff} .cfg-tile.t-nocturne .aa{font-family:'Inter',sans-serif;font-weight:700;letter-spacing:-.04em} .cfg-tile.t-nocturne .bar{background:var(--tc,#C3F24B);border-radius:99px;box-shadow:0 0 14px var(--tc,#C3F24B)} .cfg-tile.t-pop{background:var(--tc,#FFD23F);color:#111;box-shadow:inset 0 0 0 2px #111} .cfg-tile.t-pop .aa{font-family:'Inter',sans-serif;font-weight:900;letter-spacing:-.04em} .cfg-tile.t-aurore{background:radial-gradient(40px 30px at 22% 30%,var(--tc,#6D4AFF),transparent),radial-gradient(46px 34px at 88% 88%,var(--tc2,#EC4899),transparent),#F4F2FB;color:#1B1537} .cfg-tile.t-aurore .aa{font-family:'Inter',sans-serif;font-weight:800;letter-spacing:-.04em} .cfg-tile.t-aurore .bar{background:linear-gradient(90deg,var(--tc,#6D4AFF),var(--tc2,#EC4899));border-radius:99px} .cfg-tile.t-suisse{background:#F2F2EE;color:#0A0A0A;box-shadow:inset 0 0 0 1px #0A0A0A} .cfg-tile.t-suisse .aa{font-family:"Helvetica Neue",Inter,Arial,sans-serif;font-weight:800;letter-spacing:-.07em} .cfg-tile.t-suisse .bar{background:var(--tc,#E3301C)} .cfg-tile.t-nature{background:#EEF3EA;color:#1F3B2D} .cfg-tile.t-nature::after{content:'';position:absolute;right:-10px;bottom:-14px;width:48px;height:42px;border-radius:62% 38% 55% 45% / 48% 58% 42% 52%;background:var(--tc,#3F8A5A);opacity:.4} .cfg-tile.t-nature .aa{font-family:Candara,Seravek,"Gill Sans","Trebuchet MS",sans-serif;font-weight:700} .cfg-tile.t-nature .bar{background:var(--tc,#3F8A5A);border-radius:99px} .cfg-tile.t-pop .bar{background:#fff;border:2px solid #111;border-radius:3px;box-shadow:2px 2px 0 #111;height:10px} .cfg-sws{display:flex;gap:12px;margin-bottom:18px} .cfg-sw{width:40px;height:40px;border-radius:50%;background:var(--c);flex:none;border:3px solid var(--cfg-bg);box-shadow:0 0 0 1.5px var(--cfg-line);cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s} .cfg-sw:hover{transform:scale(1.08)} .cfg-sw[aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--cfg-ink)} .cfg-sw.pop,.cfg-style.pop .cfg-tile{animation:cfgPop .7s cubic-bezier(.34,1.56,.64,1)} @keyframes cfgPop{0%{transform:scale(.6)}60%{transform:scale(1.14)}100%{transform:none}} .cfg-foot{border-top:1px solid var(--cfg-line);padding-top:14px} .cfg-reset{background:none;border:none;padding:0;font-size:12.5px;color:var(--cfg-muted)!important;text-decoration:underline;text-underline-offset:3px;cursor:pointer} .cfg-reset:hover{color:var(--cfg-ink)!important} @media(prefers-reduced-motion:reduce){.cfg-fab.hint::after{display:none}} @media(prefers-reduced-motion:reduce){:root[data-style=aurore] body::before{animation:none}}