@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 300 700; font-stretch: 75% 100%; font-display: swap; src: url(/assets/fonts/bricolage-2.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 500; font-display: swap; src: url(/assets/fonts/fraunces-italic-2.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ===================================================================== ATELIER VITRINE — V3 « La fenêtre ouverte » Le logo est une arche. Chaque photo est vue à travers une arche : une vitrine, une porte de longère. Le hero s’ouvre au défilement. ===================================================================== */ :root{ --nuit:#141c27; /* encre marine */ --foret:#1f2b38; /* bleu nuit Instagram : hero, calculateur, contact */ --foret-2:#34485e; /* ardoise, détails */ --brume:#e9e6de; /* lin : surfaces */ --blanc:#f2f0eb; /* crème des posts */ --ocre:#c9a24d; /* or (charte définitive) : V du logo, boutons, repères — jamais en texte sur fond clair */ --ocre-2:#dcbf7e; /* or clair : survol, texte or sur fond sombre */ --or-fonce:#8f6f28; /* or foncé : texte et liens or sur fond clair */ --terre:#b9573a; /* ce qui part : commissions */ --sauge:#a9b6c4; /* ce qui reste */ --texte:#2b333d; --muted:#5f6670; --ligne:rgba(20,28,39,.12); --display:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif; --serif:'Fraunces',Georgia,'Times New Roman',serif; --nav:84px; --max:1360px; --gutter:clamp(1.25rem,4vw,3.5rem); --ease:cubic-bezier(.22,1,.36,1); } *,*::before,*::after{box-sizing:border-box} html{scroll-padding-top:calc(var(--nav) + 12px);-webkit-text-size-adjust:100%} html,body{overflow-x:hidden;overflow-x:clip} body{margin:0;font-family:var(--display);font-size:1.0625rem;line-height:1.6;color:var(--texte);background:var(--blanc);-webkit-font-smoothing:antialiased;font-optical-sizing:auto} img,video,svg{display:block;max-width:100%} a{color:inherit} ul,ol{margin:0;padding:0;list-style:none} p{margin:0} h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;font-stretch:82%;color:var(--nuit);line-height:.95;letter-spacing:-.015em;text-wrap:balance} h1{font-size:clamp(2.8rem,6vw,5.8rem)} h2{font-size:clamp(2.3rem,4.8vw,4.6rem)} h3{font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.05} .voice{font-family:var(--serif);font-style:italic;font-weight:400;font-variation-settings:"SOFT" 100,"WONK" 1;letter-spacing:0;font-stretch:100%} .wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto} .section{padding-block:clamp(3.5rem,6.5vw,6rem)} .lab{display:flex;align-items:center;gap:.7rem;font-size:.9rem;font-weight:500;color:var(--muted);margin-bottom:1.5rem} .lab::before{content:"";width:28px;height:1.5px;background:currentColor;opacity:.6;flex:none} .lab-light{color:rgba(247,245,240,.72)} .lead{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.5;max-width:58ch;color:var(--texte)} .lead-voice{font-family:var(--serif);font-style:italic;font-weight:400;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:clamp(1.5rem,2.4vw,2.3rem);line-height:1.2;color:var(--foret);max-width:30ch} .arch{border-radius:999px 999px 10px 10px;overflow:hidden} .skip{position:absolute;left:-999px;top:1rem;background:var(--nuit);color:#fff;padding:.8rem 1.2rem;border-radius:8px;z-index:100;text-decoration:none} .skip:focus{left:1rem} :focus-visible{outline:3px solid var(--ocre);outline-offset:3px} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ---------- Boutons ---------- */ .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:58px;padding:1rem 1.7rem;border-radius:8px;font:inherit;font-weight:600;font-size:1rem;letter-spacing:-.01em;text-decoration:none;border:1.5px solid transparent;cursor:pointer;background:var(--ocre);color:var(--nuit);transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);will-change:transform} .btn:hover{background:var(--ocre-2)} .btn-dark{background:var(--nuit);color:var(--blanc)} .btn-dark:hover{background:var(--foret-2)} .btn-ghost{background:transparent;border-color:rgba(255,255,255,.55);color:#fff} .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff} .btn-ghost-dark{background:transparent;border-color:rgba(20,28,39,.35);color:var(--nuit)} .btn-ghost-dark:hover{background:var(--brume);border-color:var(--nuit)} .btn-sm{min-height:46px;padding:.6rem 1.15rem;font-size:.92rem} .btn .arrow{width:18px;height:18px;flex:none;transition:transform .4s var(--ease)} .btn:hover .arrow{transform:translateX(4px)} /* ---------- Navigation ---------- */ .nav{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--nav);display:flex;align-items:center;color:#fff;transition:background .4s,color .4s,box-shadow .4s} .nav-in{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1.5rem} .nav.is-solid{background:rgba(247,245,240,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--nuit);box-shadow:0 1px 0 var(--ligne)} .brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-weight:700;font-stretch:86%;font-size:1.3rem;letter-spacing:-.018em;white-space:nowrap;line-height:1} .brand svg{width:auto;height:22px;aspect-ratio:122/80;flex:none;color:currentColor} .brand b{font-weight:inherit;color:var(--ocre)} .nav.is-solid .brand b{color:var(--or-fonce)} .nav-links{display:flex;gap:clamp(1.2rem,1.9vw,2.1rem);white-space:nowrap} .nav-links a{text-decoration:none;font-size:.95rem;font-weight:500;opacity:.92;position:relative;padding:.3rem 0} .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--ocre);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)} .nav-links a:hover::after{transform:scaleX(1);transform-origin:left} .nav-right{display:flex;align-items:center;gap:1.4rem} .nav-tel{text-decoration:none;font-weight:500;font-size:.95rem;white-space:nowrap;font-variant-numeric:tabular-nums} .burger{display:none;width:48px;height:48px;border:0;background:transparent;color:inherit;cursor:pointer;border-radius:50%;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0} .burger span{display:block;width:24px;height:1.5px;background:currentColor;transition:transform .35s var(--ease)} .burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)} .burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)} .menu{position:fixed;inset:0;z-index:55;background:var(--foret);color:var(--blanc);display:flex;flex-direction:column;justify-content:flex-end;gap:1.2rem;padding:6rem var(--gutter) 2.5rem} .menu[hidden]{display:none} .menu a{text-decoration:none} .menu .menu-link{font-size:clamp(2.4rem,9vw,3.4rem);font-weight:600;font-stretch:82%;letter-spacing:-.02em;line-height:1.05;display:block;padding:.3rem 0;border-bottom:1px solid rgba(247,245,240,.15)} .menu .menu-foot{margin-top:1.5rem;display:grid;gap:.9rem} .menu .menu-foot .btn{width:100%} .menu .nav-tel{text-align:center;display:block;font-size:1.15rem} @media (max-width:1040px){.nav-links,.nav-tel{display:none}.burger{display:flex}} @media (min-width:1041px) and (max-width:1279px){.nav-right .nav-tel{display:none}} .nav-right .btn{white-space:nowrap} @media (max-width:640px){.nav-right{display:none}.nav{--nav:72px}} /* ---------- Hero : vidéo plein écran + réservation en direct ---------- */ .hero{position:relative;min-height:100svh;min-height:100vh;background:var(--foret);color:#fff;overflow:hidden;display:grid;align-items:end} .hero-media{position:absolute;inset:-8% 0;z-index:0;will-change:transform} .hero-media picture{position:absolute;inset:0} .hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%} .hero-media img{animation:drift 36s ease-in-out infinite alternate;transform-origin:50% 65%} @keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.1)}} .hero-media video{opacity:0;transition:opacity .8s ease} .hero.has-video .hero-media video{opacity:1} .hero.has-video .hero-media img{animation:none;opacity:0;transition:opacity 1s ease .3s} .hero-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(20,28,39,.55) 0%,rgba(20,28,39,.25) 45%,rgba(20,28,39,0) 70%),linear-gradient(180deg,rgba(20,28,39,.5) 0%,rgba(20,28,39,.08) 32%,rgba(20,28,39,.2) 58%,rgba(20,28,39,.88) 100%)} .hero-in{position:relative;z-index:2;width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto;padding:calc(var(--nav) + 2rem) 0 2.2rem} .hero-text{max-width:62%} .hero h1 .hero-label{font-family:var(--display);font-stretch:100%;letter-spacing:0;line-height:1.4;font-size:.92rem;font-weight:500;color:rgba(255,255,255,.85);margin-bottom:1.4rem;display:flex;align-items:center;gap:.7rem} .hero-label::before{content:"";width:28px;height:1.5px;background:currentColor;opacity:.7;flex:none} .hero h1{color:#fff;font-size:clamp(2.8rem,6.2vw,6rem);max-width:none} .mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em} .mask .line{display:block;will-change:transform} .hero-voice{font-size:clamp(1.35rem,2.1vw,1.9rem);line-height:1.25;max-width:28ch;margin:1.6rem 0 2rem;color:rgba(255,255,255,.95)} .hero-cta{display:flex;flex-wrap:wrap;gap:.8rem} .hero-foot{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;font-size:.9rem;color:rgba(255,255,255,.82)} .hero-foot li{display:flex;align-items:center;gap:.6rem} .hero-foot li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ocre)} @media (max-width:980px){.hero-text{max-width:none}} @media (max-width:760px){.hero-in{padding-top:calc(var(--nav) + 5rem);padding-bottom:1.6rem}.hero h1{font-size:clamp(2.6rem,11.5vw,3.9rem)}.hero-foot{margin-top:1.6rem}} /* ---------- Bande de photos : l’univers du gîte ---------- */ .strip-sec{padding:1.1rem 0;background:var(--blanc);overflow:hidden} .strip{display:flex;gap:1rem;width:max-content;animation:strip 70s linear infinite} .strip:hover{animation-play-state:paused} @keyframes strip{to{transform:translateX(-50%)}} .strip figure{margin:0;position:relative;flex:none;width:clamp(200px,24vw,340px);aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--brume)} .strip figure:nth-child(odd){aspect-ratio:3/4;width:clamp(160px,18vw,255px)} .strip img{width:100%;height:100%;object-fit:cover} .strip figcaption{position:absolute;left:.8rem;bottom:.8rem;font-size:.78rem;font-weight:500;color:#fff;background:rgba(20,28,39,.55);padding:.3rem .6rem;border-radius:6px;backdrop-filter:blur(4px)} @media (prefers-reduced-motion:reduce){.strip{animation:none;width:auto;flex-wrap:wrap}} /* ---------- Constat : la comparaison ---------- */ .constat-head{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem 4rem;align-items:end;margin-bottom:2.2rem} .constat-head .lead{max-width:44ch} .cmp-switch{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1.1rem;font-size:.95rem;color:var(--muted)} .cmp-switch span{margin-right:.3rem} .cmp-switch button{font:inherit;font-size:.9rem;font-weight:600;padding:.45rem 1rem;border-radius:6px;border:1.5px solid rgba(20,28,39,.2);background:#fff;color:var(--nuit);cursor:pointer;min-height:40px} .cmp-switch button[aria-pressed="true"]{background:var(--nuit);color:var(--blanc);border-color:var(--nuit)} .cmp{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem} .cmp-card{border-radius:14px;padding:clamp(1.3rem,2.6vw,2rem);display:grid;gap:1.3rem;align-content:start} .cmp-plat{background:#fff;box-shadow:inset 0 0 0 1px var(--ligne)} .cmp-direct{background:var(--foret);color:var(--blanc)} .cmp-title{font-weight:600;font-size:1.05rem;display:flex;align-items:center;gap:.6rem} .cmp-title::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--terre);flex:none} .cmp-direct .cmp-title::before{background:var(--ocre)} .flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:.5rem} .flow li{border-radius:10px;padding:.9rem .9rem 1rem;display:grid;gap:.35rem;align-content:space-between;background:var(--brume)} .cmp-direct .flow li{background:rgba(255,255,255,.08)} .fl-k{font-size:.82rem;line-height:1.3;color:var(--muted)} .cmp-direct .fl-k{color:rgba(247,245,240,.7)} .flow strong{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:600;font-stretch:85%;letter-spacing:-.01em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap} .fl-cut{background:rgba(184,92,56,.1)!important}.fl-cut strong{color:var(--terre)} .fl-zero strong{color:var(--ocre-2)} .cmp-plat .fl-you{box-shadow:inset 0 0 0 1.5px var(--nuit)} .cmp-direct .fl-you{background:var(--ocre)!important}.cmp-direct .fl-you .fl-k{color:rgba(20,28,39,.75)}.cmp-direct .fl-you strong{color:var(--nuit)} .fl-arrow{width:20px;height:20px;align-self:center;color:var(--muted)} .cmp-direct .fl-arrow{color:rgba(247,245,240,.6)} .cmp-note{font-size:.92rem;line-height:1.5;color:var(--muted)} .cmp-direct .cmp-note{color:rgba(247,245,240,.85)} .cmp-direct .cmp-note b{color:var(--ocre-2);font-weight:600} .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.4rem} .facts li{padding-top:1.1rem;border-top:1px solid var(--ligne);display:grid;gap:.4rem} .facts strong{font-size:clamp(1.9rem,3vw,2.6rem);font-weight:600;font-stretch:82%;color:var(--nuit);line-height:1;font-variant-numeric:tabular-nums} .facts span{font-size:.92rem;color:var(--texte);max-width:34ch} .constat-foot{margin-top:2.6rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.4rem 2rem} .constat-foot .lead-voice{max-width:32ch} @media (max-width:980px){.constat-head{grid-template-columns:1fr}.cmp{grid-template-columns:1fr}} @media (max-width:560px){.flow{grid-template-columns:1fr;gap:.4rem}.flow li{grid-template-columns:1fr auto;align-items:center}.fl-arrow{transform:rotate(90deg);justify-self:center;width:18px;height:18px}.facts{grid-template-columns:1fr}} /* ---------- Calculateur (trois questions, une réponse claire) ---------- */ .calc-sec{background:var(--foret);color:var(--blanc)} .calc-sec h2{color:var(--blanc)} .calc-head{display:grid;grid-template-columns:1.2fr .8fr;gap:1.5rem 4rem;align-items:end;margin-bottom:2.4rem} .calc-head .lead{color:rgba(247,245,240,.8)} .calc{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start} .q{padding:1.5rem 0;border-top:1px solid rgba(247,245,240,.14)} .q:first-child{border-top:0;padding-top:0} .q-n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(247,245,240,.12);font-size:.85rem;font-weight:600;margin-right:.7rem;flex:none} .q-label{display:flex;align-items:center;font-size:1.1rem;font-weight:600;margin-bottom:1rem} .big-val{display:flex;align-items:baseline;gap:.4rem;margin-bottom:.4rem} .big-val output{font-size:clamp(2.2rem,4vw,3rem);font-weight:600;font-stretch:85%;letter-spacing:-.01em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ocre-2)} .big-val span{color:rgba(247,245,240,.7);font-size:.95rem} .calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;margin:.8rem 0 .3rem;border-radius:3px;background:linear-gradient(var(--ocre),var(--ocre)) 0/var(--fill,50%) 100% no-repeat rgba(247,245,240,.18);cursor:pointer} .calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;border-radius:50%;background:var(--ocre);border:4px solid var(--foret);box-shadow:0 0 0 1.5px var(--ocre)} .calc input[type=range]::-moz-range-thumb{width:32px;height:32px;border-radius:50%;background:var(--ocre);border:4px solid var(--foret);box-shadow:0 0 0 1.5px var(--ocre)} .calc input[type=range]:focus-visible{outline:3px solid var(--ocre-2);outline-offset:6px} .range-ends{display:flex;justify-content:space-between;font-size:.8rem;color:rgba(247,245,240,.55)} .helper{margin-top:1rem;font-size:.92rem} .helper summary{cursor:pointer;color:var(--ocre-2);font-weight:500;list-style:none;display:inline-flex;align-items:center;gap:.4rem} .helper summary::-webkit-details-marker{display:none} .helper summary::before{content:"+";display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1.5px solid currentColor;font-size:.85rem;line-height:1} .helper[open] summary::before{content:"−"} .helper-box{margin-top:.9rem;padding:1rem;border-radius:10px;background:rgba(0,0,0,.18);display:grid;grid-template-columns:1fr 1fr auto;gap:.8rem;align-items:end} .helper-box label{display:grid;gap:.35rem;font-size:.82rem;color:rgba(247,245,240,.75)} .helper-box input{font:inherit;font-size:1.05rem;font-weight:600;width:100%;min-height:46px;padding:.5rem .8rem;border-radius:8px;border:1.5px solid rgba(247,245,240,.25);background:transparent;color:var(--blanc)} .helper-box input:focus{outline:none;border-color:var(--ocre)} .helper-box button{font:inherit;font-weight:600;font-size:.9rem;min-height:46px;padding:.5rem 1rem;border-radius:8px;border:0;background:var(--blanc);color:var(--nuit);cursor:pointer} .chips{display:flex;flex-wrap:wrap;gap:.5rem} .chips label{position:relative;cursor:pointer} .chips input{position:absolute;opacity:0;width:1px;height:1px} .chips span{display:inline-flex;align-items:center;gap:.45rem;min-height:48px;padding:.6rem 1.1rem;border-radius:8px;border:1.5px solid rgba(247,245,240,.28);font-weight:500;transition:background .2s,border-color .2s,color .2s} .chips span small{opacity:.65;font-size:.82em} .chips input:checked + span{background:var(--ocre);border-color:var(--ocre);color:var(--nuit)} .chips input:focus-visible + span{outline:3px solid var(--ocre-2);outline-offset:2px} .other-rate{display:inline-flex;align-items:center;gap:.5rem;margin-top:.8rem;border:1.5px solid rgba(247,245,240,.3);border-radius:8px;padding:.1rem .9rem} .other-rate input{width:4.5rem;border:0;background:transparent;color:var(--blanc);font:inherit;font-size:1.1rem;font-weight:600;min-height:44px} .other-rate input:focus{outline:none} .other-rate[hidden]{display:none} .houses{display:grid;grid-template-columns:repeat(10,1fr);gap:.4rem;max-width:460px} .houses button{aspect-ratio:1;border:0;padding:0;border-radius:8px;background:rgba(247,245,240,.1);color:rgba(247,245,240,.45);cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s,transform .2s} .houses button svg{width:58%;height:58%} .houses button.on{background:var(--ocre);color:var(--nuit)} .houses button:hover{transform:translateY(-2px)} .houses-legend{margin-top:.8rem;font-size:.95rem;color:rgba(247,245,240,.85)} .houses-legend b{color:var(--ocre-2)} .result{position:sticky;top:calc(var(--nav) + 1.5rem);border-radius:14px;background:var(--blanc);color:var(--nuit);padding:clamp(1.4rem,3vw,2.2rem);display:grid;gap:1.3rem} .res-line{font-size:1.05rem;line-height:1.4} .res-num{display:block;font-size:clamp(2.6rem,5vw,4rem);font-weight:600;font-stretch:82%;letter-spacing:-.01em;line-height:1;font-variant-numeric:tabular-nums;margin:.3rem 0} .res-lost .res-num{color:var(--terre)} .res-keep{padding:1.2rem;border-radius:10px;background:var(--foret);color:var(--blanc)} .res-keep .res-num{color:var(--ocre-2)} .res-sub{font-size:.95rem;color:rgba(247,245,240,.8)} .res-bar{height:12px;border-radius:6px;background:rgba(184,92,56,.18);overflow:hidden;display:flex} .res-bar i{display:block;height:100%;background:var(--ocre);width:var(--keep,30%);transition:width .5s var(--ease)} .res-bar-legend{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);margin-top:-.7rem} .res-note{font-size:.8rem;color:var(--muted);line-height:1.5} .result .btn{justify-self:stretch} @media (max-width:900px){.calc-head{grid-template-columns:1fr}.calc{grid-template-columns:1fr}.result{position:static}} @media (max-width:520px){.helper-box{grid-template-columns:1fr 1fr}.helper-box button{grid-column:1/-1}.houses{gap:.3rem}} /* ---------- Avant / après : le même gîte, deux vitrines ---------- */ /* annonce type plateforme (maquette neutre, sans marque) */ /* ---------- Réalisations : maquettes ordinateur + téléphone ---------- */ .works-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:clamp(1.5rem,4vw,3rem)} .works-head > div:first-child{flex:1 1 auto;min-width:0} .reel-nav{display:flex;gap:.6rem;flex:none;padding-bottom:.4rem} .reel-btn{width:50px;height:50px;border-radius:50%;border:1.5px solid rgba(20,28,39,.3);background:transparent;color:var(--nuit);display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s} .reel-btn:hover{background:var(--nuit);color:var(--blanc)} .reel-btn svg{width:20px;height:20px} .reel-wrap{width:100%} .reel{display:flex;gap:2rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:1rem max(1.25rem,calc(50vw - var(--max) / 2)) 2.5rem;scroll-padding-inline:max(1.25rem,calc(50vw - var(--max) / 2));scrollbar-width:none;-webkit-overflow-scrolling:touch} .reel::-webkit-scrollbar{display:none} .work{flex:0 0 min(82vw,560px);scroll-snap-align:start} .work-visual{position:relative;padding:0 14% 18% 0;margin-bottom:1.8rem;perspective:1200px} .device-laptop{position:relative;width:100%;aspect-ratio:16/10;background:#141c27;border-radius:14px 14px 6px 6px;padding:2.6% 2.6% 0;box-shadow:0 30px 60px -25px rgba(20,28,39,.55);transform-style:preserve-3d;transition:transform .4s ease} .device-laptop::after{content:"";position:absolute;left:-3%;right:-3%;bottom:-4%;height:4%;background:#1f2b38;border-radius:0 0 12px 12px;box-shadow:0 10px 30px -10px rgba(20,28,39,.5)} .device-phone{position:absolute;right:0;bottom:0;width:28%;aspect-ratio:9/19;background:#141c27;border-radius:16% / 7.5%;padding:3.2%;box-shadow:0 24px 50px -20px rgba(20,28,39,.7);z-index:2} .screen{height:100%;background:var(--brume);border-radius:6px 6px 0 0;overflow:hidden;container-type:inline-size;position:relative} .device-phone .screen{border-radius:12% / 5.5%} .screen img{width:100%;height:100%;object-fit:cover;object-position:top} .ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:8%;background:linear-gradient(160deg,#ece9e2,#f6f4ef)} .ph-name{display:block;font-family:var(--serif);font-style:italic;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:clamp(1rem,7cqi,2.6rem);color:var(--foret-2);line-height:1.05} .ph-note{display:block;margin-top:.6em;font-size:clamp(.5rem,2.6cqi,.8rem);color:var(--muted);font-weight:500} .work h3{font-size:1.8rem} .work-meta{color:var(--muted);font-size:.95rem;margin:.3rem 0 .9rem} .tags{display:flex;flex-wrap:wrap;gap:.45rem} .tags li{font-size:.82rem;font-weight:500;padding:.45rem .8rem;border-radius:6px;background:var(--brume);color:var(--nuit)} .work-badge{display:inline-block;vertical-align:middle;margin-left:.5rem;font-family:var(--display);font-size:.72rem;font-weight:600;font-stretch:100%;letter-spacing:0;padding:.3rem .6rem;border-radius:6px;background:var(--ocre);color:var(--nuit)} .works-note{font-size:.88rem;color:var(--muted);max-width:60ch} /* ---------- Ce qui est inclus ---------- */ .inclus-sec{background:var(--brume)} .inclus{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,6rem);align-items:start} .inclus-media{position:sticky;top:calc(var(--nav) + 1.5rem);height:min(700px,calc(100vh - var(--nav) - 3rem));min-height:440px;overflow:hidden;background:var(--foret);border-radius:12px} .inclus-media{container-type:size;background:radial-gradient(120% 80% at 20% 0%,#f7f4ee 0%,#ece8df 60%,#e3ded3 100%)!important;border:1px solid var(--ligne)} .inclus-media::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(20,28,39,.09) 1px,transparent 1.2px);background-size:18px 18px;opacity:.6;pointer-events:none} .sc{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s} .sc.is-on{opacity:1;visibility:visible;transition:opacity .5s var(--ease)} .sc-ui{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2.6cqmin,16px);padding:clamp(14px,6cqmin,40px);font-size:clamp(11.5px,3.7cqmin,19px);line-height:1.35;color:#1e242b;font-stretch:100%} .sc-ui p{margin:0} .sc-ui > *{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease),transform .75s var(--ease)} .sc.is-on .sc-ui > *{opacity:1;transform:none} .sc.is-on .sc-ui > :nth-child(2){transition-delay:.18s}.sc.is-on .sc-ui > :nth-child(3){transition-delay:.36s} .ui-card{background:#fff;border-radius:clamp(10px,3cqmin,18px);padding:clamp(12px,4.4cqmin,24px);box-shadow:0 24px 50px -28px rgba(20,28,39,.45),0 0 0 1px rgba(20,28,39,.06);width:min(100%,470px)} .ui-app{display:flex;align-items:center;gap:.5em;font-size:.8em;color:#6b7078} .ui-app i{font-style:normal;width:1.7em;height:1.7em;border-radius:.45em;background:var(--ocre);display:grid;place-items:center;color:var(--nuit);font-size:.85em} .ui-t{font-weight:700;font-size:1.12em;margin-top:.45em!important;color:var(--nuit)} .ui-t-s{margin:0 0 .6em!important;font-size:1em} .ui-d{color:#4a525b;margin-top:.2em!important;font-size:.95em} .ui-bill p{display:flex;justify-content:space-between;align-items:baseline;gap:1em;padding:.55em 0;border-bottom:1px solid #ece9e2} .ui-bill p:first-child{padding-top:0}.ui-bill p:last-child{border:0;padding-bottom:0} .ui-bill span{color:#6b7078} .ui-bill b{font-weight:600;color:var(--nuit);white-space:nowrap} .ui-was b{color:var(--terre);font-weight:500} .ui-zero b{font-size:1.7em;line-height:1;color:var(--or-fonce)} .ui-zero small{font-size:.42em;font-weight:500;color:#6b7078;margin-left:.2em} .sc.is-on .ui-zero b{animation:uipop .6s 1s cubic-bezier(.34,1.56,.64,1) both} @keyframes uipop{from{transform:scale(.6);opacity:0}} .sc.is-on .ui-bill{animation:uiglow 3s 2.2s ease-in-out infinite} @keyframes uiglow{50%{box-shadow:0 24px 50px -28px rgba(20,28,39,.45),0 0 0 3px rgba(47,91,69,.25)}} .sc.is-on .ui-tiles img{animation:uikb 10s ease-in-out infinite alternate} .sc.is-on .ui-bar i{display:inline-block;animation:uilock 2.4s 1.6s ease-in-out infinite} @keyframes uilock{50%{transform:scale(1.25)}} .ui-src{display:flex;flex-wrap:wrap;justify-content:center;gap:.45em} .ui-src span{padding:.45em .85em;border-radius:99px;background:#fff;box-shadow:0 0 0 1px rgba(20,28,39,.1);font-size:.85em;font-weight:600} .ui-links{display:flex;justify-content:center;gap:22%;width:70%;height:clamp(16px,6cqmin,34px);margin:-.3em 0} .ui-links i{width:2px;height:100%;background:repeating-linear-gradient(180deg,var(--ocre) 0 5px,transparent 5px 9px);background-size:2px 18px} .sc.is-on .ui-links i{animation:uiflow .9s linear infinite} @keyframes uiflow{to{background-position:0 18px}} .ui-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:.32em;text-align:center;font-variant-numeric:tabular-nums;font-size:.95em} .ui-cal em{font-style:normal;font-size:.72em;font-weight:600;color:#9aa0a8} .ui-cal span{padding:.42em 0;border-radius:.5em;background:#f6f4ef} .ui-cal .x{background:#f6f4ef} .sc.is-on .ui-cal .x{animation:uiblock .35s calc(.7s + var(--d) * .2s) both} @keyframes uiblock{to{background:var(--nuit);color:#fff;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.5)}} .ui-sync{margin-top:.8em!important;font-size:.82em;font-weight:600;color:var(--or-fonce);display:flex;align-items:center;gap:.4em} .sc.is-on .ui-sync b{display:inline-block;animation:uispin 1.2s .4s linear 2} @keyframes uispin{to{transform:rotate(360deg)}} .ui-head{font-family:var(--serif);font-style:italic;font-size:1.5em;color:var(--nuit);align-self:flex-start} .ui-tiles{display:grid;grid-template-columns:1fr 1fr;gap:clamp(6px,2.2cqmin,12px);width:100%;flex:1;max-height:78%} .ui-tiles figure{position:relative;margin:0;border-radius:clamp(8px,2.6cqmin,14px);overflow:hidden;box-shadow:0 14px 30px -18px rgba(20,28,39,.5)} .ui-tiles img{width:100%;height:100%;object-fit:cover} .ui-tiles figcaption{position:absolute;left:.5em;right:.5em;bottom:.5em;display:flex;justify-content:space-between;gap:.4em;align-items:center;padding:.4em .6em;border-radius:.5em;background:rgba(255,255,255,.94);font-size:.8em;font-weight:600;color:var(--nuit)} .ui-tiles figcaption b{font-weight:600;color:var(--or-fonce);white-space:nowrap} .ui-q{display:flex;align-items:center;gap:.55em;padding:.7em 1em;border:1px solid #dedad2;border-radius:99px;font-size:.95em;color:#3a4048;min-height:1.3em} .ui-q i{font-style:normal;font-size:1.15em;color:#6b7078} .ui-type{display:inline-block;white-space:nowrap;overflow:hidden;max-width:0;vertical-align:bottom;border-right:1.5px solid var(--ocre)} .sc.is-on .ui-type{animation:uitype 1s .3s steps(30,end) forwards} @keyframes uitype{to{max-width:100%;border-right-color:transparent}} .ui-res{margin-top:1em;opacity:0;transform:translateY(8px)} .sc.is-on .ui-res{animation:uiup .5s 1.4s var(--ease) forwards} .sc.is-on .ui-ghost{animation-delay:1.6s} @keyframes uiup{to{opacity:1;transform:none}} .ui-url{display:flex;align-items:center;gap:.5em;font-size:.8em;color:#4a525b} .ui-url i{font-style:normal;width:1.9em;height:1.9em;border-radius:50%;background:#f1efe9;display:grid;place-items:center;font-weight:700;font-size:.75em;color:var(--nuit)} .ui-rt{color:#1f4f9a;font-size:1.06em;font-weight:500;margin-top:.35em!important;line-height:1.25} .ui-rd{color:#4a525b;font-size:.85em;margin-top:.3em!important} .ui-ghost{display:grid;gap:.45em} .ui-ghost span{height:.7em;border-radius:99px;background:#efede8} .ui-ghost span:last-child{width:70%} .ui-phone{position:relative;width:min(48cqw,38cqh);aspect-ratio:9/19;background:#141c27;border-radius:13%/6.2%;padding:3.4%;box-shadow:0 30px 60px -24px rgba(20,28,39,.6);display:flex;flex-direction:column} .ui-ph-top{display:flex;justify-content:space-between;align-items:center;color:#fff;font-size:clamp(8px,2.4cqmin,11px);font-weight:600;padding:.3em .8em .45em} .ui-sig{display:inline-flex;align-items:flex-end;gap:2px} .ui-sig i{width:3px;background:#fff;border-radius:1px} .ui-sig i:nth-child(1){height:4px}.ui-sig i:nth-child(2){height:6px}.ui-sig i:nth-child(3){height:8px;opacity:.35}.ui-sig i:nth-child(4){height:10px;opacity:.35} .ui-ph-scr{flex:1;border-radius:9%/4%;overflow:hidden;background:#f6f3ee;display:flex;flex-direction:column} .ui-ph-scr > *{opacity:0} .sc.is-on .ui-ph-scr > *{animation:uiup .45s var(--ease) forwards} .sc.is-on .ui-ph-scr > :nth-child(1){animation-delay:.7s}.sc.is-on .ui-ph-scr > :nth-child(2){animation-delay:.95s}.sc.is-on .ui-ph-scr > :nth-child(3){animation-delay:1.15s} .ui-ph-scr img{width:100%;height:52%;object-fit:cover} .ui-ph-t{font-family:var(--serif);font-size:clamp(10px,4.4cqmin,19px);line-height:1.1;padding:.6em .7em .4em;color:#2c3a48} .ui-ph-b{margin:auto .7em .9em;padding:.55em;border-radius:.4em;background:#2c3a48;color:#fff;text-align:center;font-size:.72em;font-weight:600} .ui-load{position:absolute;left:12%;right:12%;top:9%;height:3px;border-radius:3px;background:rgba(255,255,255,.15);overflow:hidden} .ui-load i{display:block;height:100%;width:0;background:var(--ocre)} .sc.is-on .ui-load i{animation:uiload .7s .1s ease-out forwards} .sc.is-on .ui-load{animation:uifade .3s .9s forwards} @keyframes uiload{to{width:100%}} @keyframes uifade{to{opacity:0}} .ui-pill{padding:.6em 1.1em;border-radius:99px;background:var(--nuit);color:#fff;font-weight:600;font-size:.88em;text-align:center} .ui-pill::before{content:"⚡ ";color:var(--ocre-2)} .ui-gal{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr 1fr;gap:clamp(4px,1.4cqmin,8px);width:min(100%,470px);aspect-ratio:16/10;border-radius:clamp(10px,3cqmin,16px);overflow:hidden;box-shadow:0 24px 50px -28px rgba(20,28,39,.5)} .ui-gal figure{position:relative;margin:0;overflow:hidden} .ui-gal img{width:100%;height:100%;object-fit:cover} .ui-gal .g0{grid-row:1/4} .ui-gal .g1 img{transform:scale(2.4);transform-origin:84% 42%} .ui-gal .g2 img{transform:scale(2.6);transform-origin:22% 72%} .ui-gal .g3 img{object-position:50% 90%;transform:scale(1.8);transform-origin:50% 95%} .ui-gal .g0 span{position:absolute;left:.6em;bottom:.6em;padding:.25em .6em;border-radius:99px;background:rgba(20,28,39,.75);color:#fff;font-size:.72em;font-weight:600} .ui-gal .g3 b{position:absolute;inset:0;display:grid;place-items:center;background:rgba(20,28,39,.55);color:#fff;font-weight:700} .sc.is-on .ui-gal .g0 img{animation:uikb 9s ease-in-out infinite alternate} @keyframes uikb{to{transform:scale(1.08)}} .ui-note{align-self:flex-start;max-width:88%;background:#fffbea;border-radius:.6em;padding:.7em .95em;font-family:var(--serif);font-style:italic;font-size:1em;line-height:1.3;color:#2c3a48;box-shadow:0 14px 30px -16px rgba(0,0,0,.45);rotate:-1.5deg} .ui-note span,.ui-lab{display:block;font-family:var(--display);font-style:normal;font-size:.66em;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--or-fonce);margin-bottom:.3em} .ui-write{align-self:flex-end;width:auto;max-width:88%} .ui-h{font-family:var(--serif);font-size:1.3em;line-height:1.1;color:#2c3a48} .ui-bar{display:flex;align-items:center;gap:.6em;width:min(100%,470px);padding:.8em 1.1em;border-radius:99px;background:#fff;box-shadow:0 0 0 1px rgba(20,28,39,.1),0 18px 40px -26px rgba(20,28,39,.5);font-size:1.1em;font-weight:600;color:var(--nuit)} .ui-bar i{font-style:normal;font-size:.8em} .ui-deed{position:relative;text-align:left} .ui-key{position:absolute;right:.9em;top:.9em;width:1.8em;height:1.8em;color:var(--ocre)} .ui-rows{margin-top:.7em;border-top:1px solid #ece9e2} .ui-rows p{display:flex;justify-content:space-between;gap:1em;padding:.55em 0;border-bottom:1px solid #ece9e2;font-size:.95em} .ui-rows p:last-child{border-bottom:0;padding-bottom:0} .ui-rows span{color:#6b7078} .ui-rows b{font-weight:600;color:var(--or-fonce)} @media (prefers-reduced-motion:reduce){.sc *,.sc{animation-duration:.01s!important;animation-delay:0s!important;transition-duration:.01s!important}} .rows{display:grid} .row{padding:1.8rem 0;border-top:1px solid var(--ligne);display:grid;grid-template-columns:2.2rem 1fr;gap:1rem;align-items:start;transition:opacity .4s} .row:last-child{border-bottom:1px solid var(--ligne)} .row i{display:block;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--nuit);margin-top:.65rem;transition:background .3s,transform .3s var(--ease)} .row.is-on i{background:var(--nuit);transform:scale(1.25)} .row h3{margin-bottom:.45rem} .row p{font-size:.98rem;max-width:48ch;color:var(--texte)} .rows.has-focus .row:not(.is-on){opacity:.45} .inclus-strip{margin-top:2rem;padding-bottom:4rem;display:flex;flex-wrap:wrap;gap:.6rem} .inclus-strip li{font-size:.9rem;font-weight:500;padding:.6rem 1rem;border-radius:6px;background:#fff;color:var(--nuit)} .inclus-strip li:has(a){background:var(--nuit);padding:0} .inclus-strip li a{display:block;padding:.6rem 1rem;color:var(--blanc);text-decoration:none;font-weight:600} .inclus-strip li a:hover{color:var(--ocre-2)} @media (max-width:900px){.inclus{grid-template-columns:1fr}.inclus-media{position:sticky;top:var(--nav);height:38vh;min-height:260px;z-index:1;border-radius:0 0 10px 10px}.rows.has-focus .row:not(.is-on){opacity:1}} /* ---------- Région : vidéo ---------- */ .region{position:relative;min-height:72vh;display:grid;align-items:end;color:#fff;overflow:hidden;background:var(--foret)} .region-media{position:absolute;inset:-12% 0} .region-media picture{position:absolute;inset:0} .region-media img,.region-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .region-media video{opacity:0;transition:opacity 1s ease} .region.has-video video{opacity:1} .region::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,28,39,.55) 0%,rgba(20,28,39,0) 60%),linear-gradient(180deg,rgba(20,28,39,.05) 0%,rgba(20,28,39,.15) 40%,rgba(20,28,39,.9) 100%)} .region-in{position:relative;z-index:1;padding:4rem 0 3rem;display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:end} .region h2{color:#fff;max-width:14ch} .region p{color:#fff;font-size:1.1rem;max-width:44ch;text-shadow:0 1px 14px rgba(0,0,0,.55)} @media (max-width:860px){.region-in{grid-template-columns:1fr}.region{min-height:70vh}} /* ---------- La méthode ---------- */ /* ---------- Manifeste + équipe ---------- */ /* ---------- Avis ---------- */ .avis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem} .avis{border:1px dashed rgba(20,28,39,.3);border-radius:10px;padding:2rem 1.6rem;min-height:230px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:var(--muted);font-size:.92rem;gap:.7rem} .avis .stars{display:flex;gap:.2rem;color:var(--ocre)} .avis .stars svg{width:18px;height:18px} .avis strong{color:var(--nuit);font-weight:600;font-size:1.1rem} .avis-note{font-size:.88rem;color:var(--muted);margin-top:1.4rem;max-width:60ch} @media (max-width:860px){.avis-grid{grid-template-columns:1fr}} /* ---------- FAQ ---------- */ .faq-sec{background:var(--brume)} .faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,6rem);align-items:start} .faq-side{position:sticky;top:calc(var(--nav) + 2rem)} .faq-chips{display:flex;flex-direction:column;gap:.5rem;margin-top:2rem;max-width:340px} .faq-chip{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.2rem;border-radius:12px;border:1px solid var(--ligne);background:transparent;font:inherit;font-weight:600;font-size:1.02rem;color:var(--nuit);cursor:pointer;text-align:left;transition:background .25s,border-color .25s,color .25s} .faq-chip span{min-width:1.9rem;height:1.9rem;border-radius:99px;display:grid;place-items:center;background:rgba(20,28,39,.08);font-size:.8rem;font-variant-numeric:tabular-nums} .faq-chip:hover{background:rgba(255,255,255,.6)} .faq-chip[aria-selected="true"]{background:var(--nuit);border-color:var(--nuit);color:var(--blanc)} .faq-chip[aria-selected="true"] span{background:var(--ocre);color:var(--nuit)} .faq-help{margin-top:1.6rem;max-width:340px;padding:1.2rem 1.3rem;border-radius:14px;background:#fff;border:1px solid var(--ligne)} .faq-help p{font-size:.95rem;color:var(--texte)} .faq-help strong{display:block;color:var(--nuit);margin-bottom:.2rem} .faq-help a{display:inline-flex;align-items:center;gap:.55rem;margin-top:.9rem;padding:.7rem 1rem;border-radius:10px;background:var(--ocre);color:var(--nuit);font-weight:600;text-decoration:none;font-variant-numeric:tabular-nums} .faq-help a svg{width:17px;height:17px} .faq-group{display:grid;gap:.7rem} .faq-group[hidden]{display:none} .faq-grid > *{min-width:0} .faq-group:not([hidden]){animation:faqin .45s var(--ease)} @keyframes faqin{from{opacity:0;transform:translateY(10px)}} .faq details{background:#fff;border-radius:14px;border:1px solid var(--ligne);transition:box-shadow .3s,border-color .3s} .faq details[open]{border-color:transparent;box-shadow:0 20px 40px -26px rgba(20,28,39,.35),inset 3px 0 0 var(--ocre)} .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.2rem;padding:1.15rem 1.3rem 1.15rem 1.5rem;font-size:clamp(1.05rem,1.4vw,1.2rem);font-weight:600;font-stretch:90%;color:var(--nuit);line-height:1.3} .faq summary::-webkit-details-marker{display:none} .faq summary:hover .faq-ic{background:var(--brume)} .faq-ic{flex:0 0 34px;height:34px;border-radius:50%;border:1.5px solid rgba(20,28,39,.25);display:grid;place-items:center;color:var(--nuit);transition:transform .4s var(--ease),background .3s,border-color .3s} .faq-ic svg{width:15px;height:15px} .faq details[open] .faq-ic{transform:rotate(45deg);background:var(--ocre);border-color:var(--ocre)} .faq-body{overflow:hidden} .faq-body a{color:var(--nuit);font-weight:600;text-underline-offset:3px;text-decoration-color:var(--ocre)} .faq-guides{margin-top:1.2rem;max-width:340px;display:grid;gap:.45rem;font-size:.92rem} .faq-guides p{font-weight:600;color:var(--nuit)} .faq-guides a{color:var(--texte);text-underline-offset:3px;text-decoration-color:var(--ocre)} @media (max-width:860px){.faq-guides{display:none}} .faq-more{display:none;margin-top:1rem;font-size:.95rem;color:var(--texte)} .faq-more a{color:var(--nuit);font-weight:600} .faq-body p{padding:0 3.6rem 1.4rem 1.5rem;max-width:62ch;font-size:.98rem;color:var(--texte)} @media (max-width:860px){ .faq-grid{grid-template-columns:1fr;gap:1.4rem}.faq-side{position:static} .faq-chips{flex-direction:row;overflow-x:auto;max-width:none;margin:1.4rem calc(-1 * var(--gutter)) 0;padding:0 var(--gutter) .3rem;scrollbar-width:none} .faq-chips::-webkit-scrollbar{display:none} .faq-chip{flex:none;padding:.7rem 1rem;font-size:.92rem;border-radius:99px} .faq-chip span{min-width:1.6rem;height:1.6rem} .faq-help{display:none} .faq summary{padding:1rem 1rem 1rem 1.15rem;font-size:1.02rem} .faq-body p{padding:0 1.15rem 1.2rem} .faq-more{display:block} } /* ---------- Contact ---------- */ .contact{background:var(--foret);color:var(--blanc);position:relative;overflow:hidden} .contact h2{color:var(--blanc)} .contact-list{margin:1.6rem 0 2rem;display:grid;gap:.8rem;font-size:1rem} .contact-list li{display:flex;gap:.8rem;align-items:flex-start} .contact-list li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--ocre);margin-top:.6rem} .ways{display:grid;gap:.6rem;justify-items:start} .way{display:inline-flex;align-items:center;gap:.7rem;padding:.75rem 1.1rem;border-radius:8px;border:1px solid rgba(247,245,240,.3);text-decoration:none;font-weight:500;font-size:.95rem;transition:background .25s,border-color .25s} .way:hover{background:rgba(247,245,240,.1);border-color:rgba(247,245,240,.7)} .way svg{width:18px;height:18px;color:var(--ocre-2)} .form{background:#fff;color:var(--nuit);border-radius:10px;padding:clamp(1.4rem,3vw,2.2rem);align-self:start} .form h3{font-size:1.4rem;margin-bottom:1.2rem} .fields{display:grid;gap:1rem} .field{display:grid;gap:.4rem} .field label{font-size:.88rem;font-weight:500} .field input,.field textarea{font:inherit;font-size:1rem;padding:.85rem 1rem;min-height:54px;border:1.5px solid rgba(20,28,39,.18);border-radius:8px;background:#fff;color:var(--nuit);width:100%} .field textarea{min-height:100px;resize:vertical} .field input:focus,.field textarea:focus{outline:none;border-color:var(--nuit);box-shadow:0 0 0 4px rgba(201,162,77,.35)} .form-note{font-size:.82rem;color:var(--muted);margin-top:.9rem} .form .btn{width:100%} .form-success{display:none;padding:1.5rem 0;text-align:center} .form-success h3{margin-bottom:.5rem} .form.is-sent .fields,.form.is-sent .form-note{display:none} .form.is-sent .form-success{display:block} /* ---------- Footer ---------- */ .footer{background:var(--nuit);color:rgba(247,245,240,.7);padding:3rem 0 1.6rem;font-size:.9rem;overflow:hidden} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;padding-bottom:3rem;border-bottom:1px solid rgba(247,245,240,.12)} .footer .ft-h{font-family:var(--display);color:var(--blanc);font-weight:600;font-stretch:100%;font-size:.95rem;line-height:.95;letter-spacing:-.015em;margin:0 0 1rem} .footer ul{display:grid;gap:.5rem} .footer a{color:var(--blanc);text-decoration:none} .footer a:hover{text-decoration:underline;text-underline-offset:3px} .footer-tag{max-width:36ch} .ft-regions{margin-top:1.1rem;font-size:.9rem;line-height:1.6;color:rgba(247,245,240,.6)} .ft-regions a{color:rgba(247,245,240,.85)} .footer-grid-4{grid-template-columns:1.3fr 1fr 1fr .8fr} @media (max-width:860px){.footer-grid-4{grid-template-columns:1fr 1fr}.footer-grid-4>:first-child{grid-column:1/-1}} .wordmark{font-size:clamp(3.6rem,15vw,14rem);font-weight:600;font-stretch:78%;letter-spacing:-.02em;line-height:.9;color:var(--brume);margin:1.6rem 0 1.2rem;white-space:nowrap} .wordmark .voice{color:var(--ocre);font-size:.92em} .footer-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem 1.5rem;font-size:.82rem} .footer-legal ul{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem} @media (max-width:860px){.footer-grid{grid-template-columns:1fr}} /* ---------- Barre mobile ---------- */ .mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;grid-template-columns:1fr 1.5fr;gap:.6rem;padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));background:rgba(247,245,240,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 -10px 30px rgba(20,28,39,.12);transform:translateY(115%);transition:transform .4s var(--ease)} .mobile-bar.is-visible{transform:none} @media (max-width:760px){.mobile-bar{display:grid}} /* ---------- Modales ---------- */ dialog{border:0;border-radius:10px;padding:0;max-width:min(92vw,760px);width:100%;background:var(--blanc);color:var(--texte);box-shadow:0 40px 90px -30px rgba(0,0,0,.5)} dialog::backdrop{background:rgba(20,28,39,.65);backdrop-filter:blur(4px)} .dialog-in{padding:clamp(1.5rem,4vw,2.6rem);max-height:82vh;overflow:auto;font-size:.95rem} .dialog-in h2{font-size:1.9rem;margin-bottom:1.2rem} .dialog-in h3{font-size:1.15rem;margin:1.5rem 0 .4rem} .dialog-in p{margin-bottom:.6rem} .dialog-close{position:absolute;top:.9rem;right:.9rem;width:44px;height:44px;border-radius:50%;border:1px solid rgba(20,28,39,.25);background:var(--brume);color:var(--nuit);cursor:pointer;display:grid;place-items:center} .dialog-close svg{width:18px;height:18px} .js:not(.no-anim) [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1)} .js:not(.no-anim) [data-reveal].is-in{opacity:1;transform:none} /* ---------- Une réservation en direct (parcours) ---------- */ .pp-intro{display:grid;grid-template-columns:1.2fr .8fr;gap:1.5rem 4rem;align-items:end;margin-bottom:clamp(2rem,4vw,3.5rem)} .pp{display:grid;grid-template-columns:minmax(260px,.85fr) 1.15fr;gap:clamp(2rem,6vw,7rem);align-items:start} .pp-stage{position:sticky;top:calc(var(--nav) + 2rem);display:grid;justify-items:center;gap:.9rem} .pp-phone{width:min(300px,24vw,calc((100vh - var(--nav) - 6rem) * .4737));width:min(300px,24vw,calc((100svh - var(--nav) - 6rem) * .4737));min-width:220px;aspect-ratio:9/19;background:#141c27;border-radius:13%/6.2%;padding:3.6%;box-shadow:0 50px 90px -40px rgba(20,28,39,.6),inset 0 0 0 1.5px #2b3646;position:relative} .pp-phone::before{content:"";position:absolute;top:2.6%;left:50%;width:30%;height:3%;border-radius:20px;background:#141c27;transform:translateX(-50%);z-index:5} .pp-screen{position:relative;height:100%;border-radius:10%/4.8%;overflow:hidden;background:#f6f3ee;container-type:inline-size;font-family:var(--display);font-stretch:100%;color:#2a2f36;line-height:1.3} .pp-s{position:absolute;inset:0;opacity:0;transform:translateY(12px) scale(.985);transition:opacity .5s var(--ease),transform .7s var(--ease);pointer-events:none} .pp-s.is-on{opacity:1;transform:none} .pp-s p{margin:0} .ps-bar{display:flex;align-items:center;justify-content:space-between;padding:15cqi 7cqi 4cqi;font-size:5.4cqi} .ps-bar b{font-weight:600} .ps-bar-l{justify-content:center;border-bottom:1px solid rgba(0,0,0,.08);padding-bottom:4.5cqi} .ps-logo{width:11cqi;height:11cqi;border:1.5px solid #2a2f36;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-size:4.4cqi} .ps-burger{width:8cqi;height:3cqi;border-top:2px solid #2a2f36;border-bottom:2px solid #2a2f36} .ps-hero{height:44%;overflow:hidden} .ps-hero img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 6s ease-out} .pp-s.is-on .ps-hero img{transform:scale(1)} .ps-pad{padding:6cqi 7cqi} .ps-kicker{font-size:4.2cqi;letter-spacing:.12em;text-transform:uppercase;color:var(--or-fonce);font-weight:600} .ps-title{font-family:var(--serif);font-size:9.4cqi;line-height:1.05;margin:2.4cqi 0 2cqi!important;color:#2c3a48} .ps-text{font-size:5cqi;color:#6b7078} .ps-btn{display:block;margin-top:6cqi;padding:4.4cqi 3cqi;border-radius:3cqi;background:#2c3a48;color:#fff;text-align:center;font-size:5.2cqi;font-weight:600;position:relative} .ps-finger{position:absolute;right:14%;top:58%;width:11cqi;height:11cqi;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 2px rgba(201,162,77,.9);opacity:0;transform:translate(20cqi,20cqi) scale(1);pointer-events:none} .pp-s.is-on .ps-press .ps-finger{animation:psfinger 2.4s .8s var(--ease) both} .pp-s.is-on .ps-press{animation:pspress 2.4s .8s both} @keyframes psfinger{0%{opacity:0;transform:translate(20cqi,20cqi)}35%{opacity:1;transform:translate(0,-50%)}45%{transform:translate(0,-50%) scale(.75)}60%{transform:translate(0,-50%) scale(1);opacity:1}100%{opacity:0;transform:translate(0,-50%) scale(1.4)}} @keyframes pspress{0%,38%{transform:none}45%{transform:scale(.96)}55%,100%{transform:none}} .ps-sync{display:inline-flex;align-items:center;gap:1.5cqi;padding:1.8cqi 3.4cqi;border-radius:99px;background:rgba(201,162,77,.16);color:var(--or-fonce);font-size:4.3cqi;font-weight:600} .ps-month{font-family:var(--serif);font-size:8cqi;margin:4cqi 0 2.5cqi!important;color:#2c3a48} .ps-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:1.6cqi 0;text-align:center;font-size:5.2cqi;font-variant-numeric:tabular-nums} .ps-cal i{font-style:normal;font-size:3.8cqi;color:#9aa0a8;padding-bottom:.6cqi;font-weight:600} .ps-cal span{aspect-ratio:1;display:grid;place-items:center;border-radius:50%;margin:0 .5cqi} .ps-cal .x{color:#b4b8be;background:#e9e7e1;text-decoration:line-through} .ps-cal .sel{margin:0;border-radius:0;transition:background .3s,color .3s} .pp-s.is-on .ps-cal .sel{animation:pssel .35s calc(.6s + var(--d) * .22s) both} .pp-s.is-on .ps-cal .a,.pp-s.is-on .ps-cal .b{animation-name:psselend} .ps-cal .a{border-radius:50% 0 0 50%}.ps-cal .b{border-radius:0 50% 50% 0} @keyframes pssel{from{background:transparent}to{background:rgba(201,162,77,.32);font-weight:700}} @keyframes psselend{from{background:transparent}to{background:var(--ocre);font-weight:700;color:#141c27}} .ps-legend{display:flex;align-items:center;gap:2cqi;margin-top:4.5cqi!important;font-size:4.4cqi;color:#6b7078} .ps-legend i{width:4cqi;height:4cqi;border-radius:50%;background:#e9e7e1;border:1px solid #cfccc4} .ps-pick{margin-top:5cqi!important;padding:3.8cqi;border-radius:3cqi;background:#141c27;color:#fff;text-align:center;font-size:5cqi;font-weight:600;opacity:0;transform:translateY(4cqi)} .pp-s.is-on .ps-pick{animation:psup .5s 1.9s var(--ease) both} @keyframes psup{to{opacity:1;transform:none}} .ps-form{display:grid;gap:3.6cqi} .ps-f{display:grid;gap:1.2cqi} .ps-f span{font-size:4.2cqi;color:#8a8f96;font-weight:600} .ps-f b{display:block;padding:3.4cqi 3.6cqi;border:1.5px solid #dcd9d2;border-radius:2.6cqi;background:#fff;font-size:5.4cqi;font-weight:500;min-height:1.3em;box-sizing:content-box;line-height:1.3} .ps-f em{font-style:normal;display:inline-block;white-space:nowrap;overflow:hidden;vertical-align:bottom;max-width:0} .pp-s.is-on .ps-f em{animation:pstype .7s var(--d) steps(14,end) forwards} .pp-s.is-on .ps-f b{animation:psfocus .9s var(--d) both} @keyframes pstype{to{max-width:100%}} @keyframes psfocus{0%{border-color:#dcd9d2}20%,80%{border-color:var(--ocre)}100%{border-color:#dcd9d2}} .ps-send{background:var(--ocre);color:#141c27;margin-top:3cqi} .pp-s.is-on .ps-send{animation:pspress .6s 2.8s both} .ps-note{font-size:4cqi;color:#8a8f96;text-align:center} .ps-toast{position:absolute;left:7cqi;right:7cqi;bottom:8cqi;padding:4.2cqi;border-radius:3.4cqi;background:var(--nuit);color:#fff;text-align:center;font-size:5.2cqi;font-weight:600;opacity:0;transform:translateY(10cqi)} .pp-s.is-on .ps-toast{animation:psup .55s 3.3s var(--ease) both} .pp-owner{background:linear-gradient(170deg,#3c4c5e,#1f2b38 60%,#141c27);color:#fff} .ps-lock{text-align:center;padding-top:24cqi} .ps-time{display:block;font-size:20cqi;font-weight:300;letter-spacing:-.02em;line-height:1} .ps-date{display:block;font-size:4.6cqi;opacity:.75;margin-top:2cqi} .ps-notif{margin:14cqi 4.5cqi 0;padding:5cqi;border-radius:6cqi;background:rgba(255,255,255,.94);color:#1e242b;box-shadow:0 12px 30px rgba(0,0,0,.3);transform:translateY(-10cqi);opacity:0} .pp-s.is-on .ps-notif{animation:psnotif .7s .45s var(--ease) forwards} @keyframes psnotif{to{transform:none;opacity:1}} .ps-app{display:flex;align-items:center;gap:2.4cqi;font-size:4cqi;color:#6b7078} .ps-app i{font-style:normal;width:7cqi;height:7cqi;border-radius:2cqi;background:var(--ocre);display:grid;place-items:center;color:#141c27;font-size:4cqi} .ps-nt{font-weight:700;font-size:6cqi;margin-top:2.6cqi!important} .ps-nd{font-size:5cqi;color:#444b53;margin-top:1cqi!important;line-height:1.35} .ps-actions{display:grid;grid-template-columns:1.15fr 1fr;gap:2.4cqi;margin-top:4.4cqi} .ps-actions span{position:relative;padding:3.4cqi 2cqi;border-radius:2.6cqi;background:#ecebe6;text-align:center;font-size:5cqi;font-weight:600} .ps-actions .ok{background:var(--nuit);color:#fff} .ps-actions em{font-style:normal} .ps-actions .t2{position:absolute;inset:0;display:grid;place-items:center;opacity:0} .pp-s.is-on .ps-actions .ok{animation:psok .2s 2.2s forwards} .pp-s.is-on .ps-actions .t1{animation:pshide .2s 2.2s forwards} .pp-s.is-on .ps-actions .t2{animation:psshow .2s 2.2s forwards} .pp-s.is-on .ps-actions .ps-finger{right:30%;animation:psfinger 2s 1.2s var(--ease) both} @keyframes psok{to{background:var(--ocre);color:#141c27}} @keyframes pshide{to{opacity:0}} @keyframes psshow{to{opacity:1}} .ps-done{padding:22cqi 7cqi 0;text-align:center} .ps-check{display:grid;place-items:center;width:20cqi;height:20cqi;margin:0 auto;border-radius:50%;background:var(--ocre);color:#141c27;font-size:10cqi;font-weight:700;transform:scale(.4);opacity:0} .pp-s.is-on .ps-check{animation:pscheck .6s .2s cubic-bezier(.34,1.56,.64,1) forwards} @keyframes pscheck{to{transform:none;opacity:1}} .ps-dt{font-family:var(--serif);font-size:9.4cqi;margin-top:5cqi!important} .ps-lines{margin-top:8cqi;text-align:left;border-top:1px solid rgba(255,255,255,.16)} .ps-lines p{display:flex;justify-content:space-between;align-items:baseline;gap:2cqi;padding:3.6cqi 0;border-bottom:1px solid rgba(255,255,255,.16);font-size:4.8cqi} .ps-lines span{opacity:.8} .ps-lines b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap} .ps-lines .cut b{color:#e58c6c;font-weight:500} .ps-lines .zero b{color:var(--ocre-2);font-size:7.6cqi;line-height:1} .ps-lines .tot{border-bottom:0} .ps-lines .tot b{font-size:6cqi} .pp-cap{font-size:.8rem;color:#5c636d} .pp-steps{counter-reset:pp;display:grid} .pp-step{position:relative;padding:clamp(1.6rem,3vw,2.4rem) 0 clamp(1.6rem,3vw,2.4rem) 4rem;border-top:1px solid var(--ligne);min-height:min(46vh,400px);display:flex;flex-direction:column;justify-content:center;transition:color .45s} .pp-step:not(.is-on) h3,.pp-step:not(.is-on) p{color:#5c636d} .pp-step:not(.is-on) .pp-who{background:transparent;color:#5c636d;border-color:rgba(20,28,39,.18)} .pp-step:last-child{border-bottom:1px solid var(--ligne)} .pp-step.is-on{opacity:1} .pp-step::before{counter-increment:pp;content:counter(pp);position:absolute;left:0;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1.5px solid var(--nuit);display:grid;place-items:center;font-weight:600;font-variant-numeric:tabular-nums;transition:background .3s,color .3s} .pp-step.is-on::before{background:var(--nuit);color:var(--blanc)} .pp-who{display:inline-block;align-self:flex-start;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .65rem;border-radius:999px;background:#fff;border:1px solid var(--ligne);margin-bottom:.7rem} .pp-you{background:var(--ocre);border-color:transparent;color:var(--nuit)} .pp-step h3{font-size:clamp(1.35rem,2.3vw,2rem);margin-bottom:.5rem} .pp-step p{max-width:46ch} .pp-was{color:#a2462a;white-space:nowrap} .pp-end{margin-top:clamp(2rem,4vw,3rem);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem 2rem;padding:1.6rem 1.8rem;border-radius:14px;background:#fff;border:1px solid var(--ligne)} .pp-end p{max-width:52ch;font-size:1.05rem;color:var(--nuit)} .no-anim .pp-step{opacity:1} @media (max-width:900px){ .pp-intro{grid-template-columns:1fr;margin-bottom:1.2rem} .pp{grid-template-columns:1fr;gap:0} .pp-stage{top:calc(var(--nav) - 1px);z-index:3;background:var(--blanc);padding:.7rem 0 .9rem;margin:0 calc(-1 * var(--gutter));box-shadow:0 16px 18px -18px rgba(20,28,39,.4)} .pp-phone{min-width:0;width:min(58vw,230px,calc((100vh - var(--nav)) * .55 * .4737));width:min(58vw,230px,calc((100svh - var(--nav)) * .55 * .4737))} .pp-cap{display:none} .pp-step{min-height:auto;padding:1.4rem 0 1.4rem 3rem;justify-content:flex-start} .pp-step:last-child{padding-bottom:2rem} .pp-step::before{top:1.45rem;transform:none;width:34px;height:34px;font-size:.9rem} .pp-step h3{font-size:1.3rem} .pp-step p{font-size:.98rem} .pp-end{padding:1.3rem;margin-top:1.6rem} .pp-end .btn{width:100%} } @media (prefers-reduced-motion:reduce){.pp-s,.pp-s *{animation-duration:.01s!important;animation-delay:0s!important;transition:none!important}} /* ---------- La méthode : parcours horizontal ---------- */ .meth-sec{overflow:hidden;padding-bottom:clamp(2rem,4vw,3rem)} .meth-sec.has-pin{padding-top:0} .meth-head{display:grid;grid-template-columns:1.2fr .8fr;gap:1.5rem 4rem;align-items:end;margin-bottom:clamp(1.5rem,3vw,2.5rem)} .meth-pin{display:flex;flex-direction:column;gap:clamp(1rem,2.2vw,1.8rem)} .meth-bar{position:relative} .mb-track{height:3px;border-radius:3px;background:var(--ligne);overflow:hidden} .mb-fill{display:block;height:100%;width:0;background:var(--ocre);transition:width .2s linear} .mb-marks{display:grid;grid-template-columns:repeat(4,1fr);margin-top:.8rem} .mb-marks li{position:relative;font-size:.85rem;font-weight:600;color:var(--muted);padding-top:.15rem;transition:color .3s} .mb-marks li::before{content:"";position:absolute;left:0;top:-1.3rem;width:11px;height:11px;border-radius:50%;background:var(--blanc);border:2px solid var(--ligne);transform:translateY(-1px);transition:background .3s,border-color .3s} .mb-marks li.is-on,.mb-marks li.is-past{color:var(--nuit)} .mb-marks li.is-on::before,.mb-marks li.is-past::before{background:var(--ocre);border-color:var(--ocre)} .meth-viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch} .meth-viewport::-webkit-scrollbar{display:none} .meth-track{display:flex;gap:clamp(1rem,2.4vw,2rem);padding:0 max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));width:max-content} .mc{flex:none;width:min(74vw,980px);display:grid;grid-template-columns:1.15fr .85fr;background:#fff;border-radius:18px;overflow:hidden;border:1px solid var(--ligne);box-shadow:0 30px 60px -40px rgba(20,28,39,.35);scroll-snap-align:start;scroll-margin-left:var(--gutter);opacity:.55;transition:opacity .5s var(--ease)} .mc.is-on{opacity:1} .mc-ill{position:relative;min-height:clamp(320px,52vh,520px);background:radial-gradient(120% 90% at 20% 0%,#f7f4ee,#ebe7de);container-type:size} .mc-ill::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(20,28,39,.08) 1px,transparent 1.2px);background-size:18px 18px} .mc-txt{padding:clamp(1.5rem,3vw,2.6rem);display:flex;flex-direction:column;justify-content:center} .mc-who{display:inline-flex;align-items:center;gap:.6rem;align-self:flex-start;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.35rem .8rem .35rem .35rem;border-radius:99px;background:var(--brume);color:var(--nuit);margin-bottom:1rem} .mc-who span{width:1.7rem;height:1.7rem;border-radius:50%;background:var(--nuit);color:var(--blanc);display:grid;place-items:center;font-size:.8rem;letter-spacing:0} .mc.is-on .mc-who span{background:var(--ocre);color:var(--nuit)} .mc h3{font-size:clamp(1.45rem,2.4vw,2.1rem);margin-bottom:.7rem} .mc-txt > p:last-child{color:var(--texte);max-width:38ch} .meth-foot{display:flex;justify-content:space-between;align-items:center} .meth-hint{font-size:.85rem;color:var(--muted)} .meth-dots{display:flex;gap:.45rem} .meth-dots i{width:7px;height:7px;border-radius:50%;background:rgba(20,28,39,.2);transition:width .3s var(--ease),background .3s} .meth-dots i.on{width:22px;border-radius:4px;background:var(--nuit)} .is-pinned .meth-viewport{overflow:visible;scroll-snap-type:none} .is-pinned .meth-foot{display:none} .is-pinned.meth-pin{height:100vh;height:100svh;justify-content:center;padding-top:var(--nav);padding-bottom:1rem;gap:clamp(.8rem,1.6vw,1.4rem)} .is-pinned .mc-ill{min-height:min(480px,calc(100vh - var(--nav) - 290px))!important} .is-pinned .meth-head{margin-bottom:0} .is-pinned .meth-head h2{font-size:clamp(2rem,3.4vw,3.2rem)} .is-pinned .mc-ill{min-height:clamp(300px,46vh,480px)} /* illustrations */ .mi{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2.6cqmin,16px);padding:clamp(14px,6cqmin,36px);font-size:clamp(11px,3.5cqmin,17px);line-height:1.35;color:#1e242b;font-stretch:100%} .mi p{margin:0} .mi-card{background:#fff;border-radius:clamp(10px,3cqmin,16px);padding:clamp(12px,4cqmin,22px);box-shadow:0 22px 46px -26px rgba(20,28,39,.45),0 0 0 1px rgba(20,28,39,.06);width:min(100%,430px)} .mi-t{font-weight:700;color:var(--nuit)} .mi-visio{position:relative;width:min(100%,430px);aspect-ratio:16/9.5;border-radius:clamp(10px,3cqmin,16px);background:linear-gradient(160deg,#2b3a4b,#141c27);overflow:hidden;box-shadow:0 22px 46px -24px rgba(20,28,39,.6)} .mv-main{position:absolute;inset:0;display:grid;place-items:center} .mv-av{width:26%;aspect-ratio:1;margin-top:-6%;border-radius:50%;overflow:hidden;border:3px solid var(--ocre);background:var(--ocre);color:var(--nuit);display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-size:2.2em} .mv-av svg{width:100%;height:100%;display:block} .mv-name{position:absolute;left:.7em;bottom:.7em;padding:.25em .6em;border-radius:.4em;background:rgba(0,0,0,.4);color:#fff;font-size:.72em;font-weight:600} .mv-wave{position:absolute;left:50%;top:86%;transform:translateX(-50%);display:flex;gap:3px;align-items:center;height:1.2em} .mv-wave i{width:3px;height:30%;border-radius:2px;background:var(--ocre-2)} .mc.is-on .mv-wave i{animation:mvw .9s ease-in-out infinite alternate} .mv-wave i:nth-child(2){animation-delay:.15s!important}.mv-wave i:nth-child(3){animation-delay:.3s!important}.mv-wave i:nth-child(4){animation-delay:.1s!important}.mv-wave i:nth-child(5){animation-delay:.25s!important} @keyframes mvw{to{height:100%}} .mv-self{position:absolute;right:.6em;top:.6em;width:26%;aspect-ratio:4/3;border-radius:.5em;background:linear-gradient(160deg,#a9b6c4,#6d7480);display:grid;place-items:center;color:#fff;font-size:.7em;font-weight:600;border:1.5px solid rgba(255,255,255,.4)} .mv-ctrl{position:absolute;right:.7em;bottom:.7em;display:flex;gap:.35em} .mv-ctrl i{width:1.5em;height:1.5em;border-radius:50%;background:rgba(255,255,255,.18)} .mv-ctrl i.r{background:#d9534f} .mi-devis{display:grid;gap:.3em} .mi-sign{width:52%;height:auto;color:var(--nuit);stroke-dasharray:360;stroke-dashoffset:360} .mc.is-on .mi-sign{animation:misign 1.4s .6s ease-in-out forwards} @keyframes misign{to{stroke-dashoffset:0}} .mi-ok{color:var(--or-fonce);font-weight:700;opacity:0} .mc.is-on .mi-ok{animation:miin .4s 2s forwards} @keyframes miin{to{opacity:1}} .mi-quest ul{display:grid;gap:.5em;margin-top:.7em} .mi-quest li{position:relative;padding-left:1.8em;font-size:.95em} .mi-quest li::before{content:"";position:absolute;left:0;top:.05em;width:1.2em;height:1.2em;border-radius:.3em;border:1.5px solid #cfcbc2;background:#fff;display:grid;place-items:center;font-size:.85em;font-weight:700;color:var(--nuit)} .mc.is-on .mi-quest li::before{animation:micheck .25s calc(.5s + var(--d) * .45s) forwards} @keyframes micheck{to{content:"✓";background:var(--ocre);border-color:var(--ocre)}} .mi-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:.35em;margin-top:.8em} .mi-thumbs span{aspect-ratio:1;border-radius:.4em;background:#f1efe9 url(/assets/parcours/clos.webp) center/260% no-repeat;opacity:0;transform:scale(.6)} .mi-thumbs span:nth-child(2){background-position:85% 40%}.mi-thumbs span:nth-child(3){background-position:15% 75%}.mi-thumbs span:nth-child(4){background-position:50% 95%}.mi-thumbs span:nth-child(5){background-position:60% 10%} .mc.is-on .mi-thumbs span{animation:mipop .35s calc(2.2s + var(--d) * .15s) cubic-bezier(.34,1.56,.64,1) forwards} @keyframes mipop{to{opacity:1;transform:none}} .mi-chip{padding:.5em 1em;border-radius:99px;background:var(--nuit);color:#fff;font-weight:600;font-size:.88em;opacity:0;transform:translateY(8px)} .mc.is-on .mi-chip{animation:miup .5s 3.1s var(--ease) forwards} @keyframes miup{to{opacity:1;transform:none}} .mi-browser{position:relative;width:min(100%,430px);border-radius:clamp(10px,3cqmin,14px);background:#fff;overflow:visible;box-shadow:0 22px 46px -26px rgba(20,28,39,.5),0 0 0 1px rgba(20,28,39,.06)} .mb-top{display:flex;align-items:center;gap:.3em;padding:.55em .8em;border-bottom:1px solid #ece9e2;font-size:.72em;color:#6b7078} .mb-top i{width:.65em;height:.65em;border-radius:50%;background:#e2dfd8} .mb-top span{margin-left:.6em} .mb-page{overflow:hidden;border-radius:0 0 .8em .8em} .mb-page img{width:100%;aspect-ratio:16/7;object-fit:cover;transition:aspect-ratio .6s var(--ease)} .mc.is-on .mb-page img{animation:miimg .6s 2.4s var(--ease) forwards} @keyframes miimg{to{aspect-ratio:16/8.6}} .mb-page p{font-family:var(--serif);font-size:1.15em;padding:.5em .8em .7em;color:#2c3a48} .mi-pin{position:absolute;width:1.7em;height:1.7em;border-radius:50% 50% 50% 0;background:var(--ocre);color:var(--nuit);display:grid;place-items:center;font-size:.75em;font-weight:700;box-shadow:0 6px 14px rgba(0,0,0,.25);opacity:0;transform:scale(.4)} .mi-pin.p1{left:58%;top:34%}.mi-pin.p2{left:14%;bottom:12%} .mc.is-on .mi-pin{animation:mipop .4s .6s cubic-bezier(.34,1.56,.64,1) forwards} .mc.is-on .mi-pin.p2{animation-delay:.85s} .mi-comment{display:flex;justify-content:space-between;align-items:center;gap:1em;font-size:.92em;opacity:0;transform:translateY(8px)} .mc.is-on .mi-comment{animation:miup .5s 1.3s var(--ease) forwards} .mi-done{color:var(--or-fonce);font-weight:700;white-space:nowrap;opacity:0} .mc.is-on .mi-done{animation:miin .3s 2.4s forwards} .mi-url{display:flex;align-items:center;gap:.6em;width:min(100%,430px);padding:.8em 1.1em;border-radius:99px;background:#fff;box-shadow:0 0 0 1px rgba(20,28,39,.1),0 18px 40px -26px rgba(20,28,39,.5);font-size:1.08em;font-weight:600;color:var(--nuit)} .mi-url i{font-style:normal;font-size:.8em} .mi-live{margin-left:auto;display:inline-flex;align-items:center;gap:.4em;padding:.25em .7em;border-radius:99px;background:rgba(201,162,77,.16);color:var(--or-fonce);font-size:.72em;font-weight:700;opacity:0} .mi-live::before{content:"";width:.55em;height:.55em;border-radius:50%;background:#2f9a5f} .mc.is-on .mi-live{animation:miin .3s .6s forwards} .mc.is-on .mi-live::before{animation:milive 1.6s 1s ease-in-out infinite} @keyframes milive{50%{box-shadow:0 0 0 .4em rgba(47,154,95,.18)}} .mi-final p{display:flex;justify-content:space-between;gap:1em;padding:.6em 0;border-bottom:1px solid #ece9e2;opacity:0;transform:translateX(-8px)} .mi-final p:first-child{padding-top:0}.mi-final p:last-child{border:0;padding-bottom:0} .mi-final span{color:#6b7078}.mi-final b{color:var(--or-fonce);font-weight:600;text-align:right} .mc.is-on .mi-final p{animation:miup .45s var(--ease) forwards} .mc.is-on .mi-final p:nth-child(1){animation-delay:.9s}.mc.is-on .mi-final p:nth-child(2){animation-delay:1.15s}.mc.is-on .mi-final p:nth-child(3){animation-delay:1.4s} @media (max-width:900px){ .meth-head{grid-template-columns:1fr} .mb-marks li{font-size:.72rem} .mc{width:86vw;grid-template-columns:1fr;opacity:1} .mc-ill{min-height:0;height:min(74vw,310px)} .mi-browser .mb-page img{aspect-ratio:16/6.4} .mc-txt{padding:1.3rem 1.3rem 1.5rem} .mc h3{font-size:1.35rem} .mc-txt > p:last-child{font-size:.97rem} .meth-track{padding:0 var(--gutter)} } @media (prefers-reduced-motion:reduce){.mc *,.mc *::before{animation-duration:.01s!important;animation-delay:0s!important}} /* ---------- Qui nous sommes ---------- */ .who-sec{background:var(--nuit);color:var(--blanc)} .who-head{display:grid;grid-template-columns:1fr 1fr;gap:1.8rem 4rem;align-items:end;margin-bottom:clamp(2rem,4vw,3.5rem)} .who-head h2{color:var(--blanc)} .who-head .lead{color:rgba(247,245,240,.8)} .duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.4vw,2rem)} .who-card{display:flex;flex-direction:column;gap:1.3rem;background:#1b2532;border:1px solid rgba(247,245,240,.1);border-radius:18px;padding:clamp(1.4rem,2.6vw,2.2rem);transition:transform 1s var(--ease),opacity .8s var(--ease)} .wc-l{background:linear-gradient(160deg,#243246,#1b2532 70%);border-color:rgba(201,162,77,.35)} .who-top{display:flex;align-items:center;gap:1.1rem} .who-mono svg{width:100%;height:100%;display:block} .who-mono{flex:none;overflow:hidden;width:clamp(64px,7vw,84px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:clamp(2rem,3.4vw,2.7rem);color:var(--nuit);background:var(--ocre);box-shadow:0 0 0 6px rgba(201,162,77,.14)} .wc-r .who-mono{box-shadow:0 0 0 6px rgba(169,182,196,.12)} .who-sub{font-size:.88rem;color:rgba(247,245,240,.6);margin-top:.15rem} .who-call{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.1rem;border-radius:10px;background:var(--ocre);color:var(--nuit);font-weight:600;text-decoration:none;font-size:.95rem;transition:background .2s} .who-call:hover{background:var(--ocre-2)} .who-call svg{width:18px;height:18px} .who-body{padding:clamp(1.4rem,2.6vw,2.2rem);display:flex;flex-direction:column} .who-role{display:inline-block;align-self:flex-start;font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.35rem .7rem;border-radius:99px;background:rgba(201,162,77,.14);color:var(--ocre-2)} .who-card h3{color:var(--blanc);font-size:clamp(1.7rem,2.6vw,2.3rem);margin:.35rem 0 0;line-height:1.05} .who-for{font-size:.86rem;color:rgba(247,245,240,.6);margin-bottom:.4rem} .who-list{display:grid;gap:.45rem} .who-list li{position:relative;padding-left:1.4rem;color:rgba(247,245,240,.88);font-size:.98rem} .who-list li::before{content:"";position:absolute;left:0;top:.62em;width:.55rem;height:2px;background:var(--ocre)} .who-when{margin-top:auto;font-size:.9rem;color:var(--ocre-2);font-weight:500} .why{margin-top:clamp(3rem,6vw,5rem)} .why-t{font-family:var(--serif);font-style:italic;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:clamp(1.6rem,2.6vw,2.3rem);color:var(--blanc);margin-bottom:1.6rem} .why-line{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,3vw,3rem);padding-top:2.2rem} .why-line::before{content:"";position:absolute;left:0;right:0;top:.45rem;height:2px;background:rgba(247,245,240,.14)} .why-line::after{content:"";position:absolute;left:0;right:0;top:.45rem;height:2px;background:var(--ocre);transform-origin:left;transform:scaleX(var(--why,1));transition:transform 1.6s var(--ease)} .why-line li{position:relative;transition:opacity .7s var(--ease),transform .8s var(--ease)} .why-line li::before{content:"";position:absolute;left:0;top:-2.15rem;width:16px;height:16px;border-radius:50%;background:var(--nuit);border:2px solid var(--ocre);box-sizing:border-box} .why-line li:last-child::before{background:var(--ocre)} .why-line span{display:block;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ocre-2);margin-bottom:.5rem} .why-line p{color:rgba(247,245,240,.85);font-size:1.02rem;max-width:34ch} .promise{margin-top:clamp(2.5rem,5vw,4rem);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.6vw,1.2rem)} .promise li{display:flex;align-items:center;gap:.9rem;padding:1.1rem 1.2rem;border-radius:14px;background:rgba(247,245,240,.05);border:1px solid rgba(247,245,240,.1);font-size:.95rem;font-weight:500;color:var(--blanc);transition:opacity .6s var(--ease),transform .7s var(--ease),background .3s} .promise li:hover{background:rgba(247,245,240,.09)} .promise svg{flex:none;width:34px;height:34px;padding:7px;border-radius:50%;background:var(--ocre);color:var(--nuit)} /* apparitions */ .js:not(.no-anim) .duo .wc-l{opacity:0;transform:translateX(-40px) rotate(-1.5deg)} .js:not(.no-anim) .duo .wc-r{opacity:0;transform:translateX(40px) rotate(1.5deg);transition-delay:.12s} .js:not(.no-anim) .duo.in .who-card{opacity:1;transform:none} .js:not(.no-anim) .why-line{--why:0} .js:not(.no-anim) .why-line li{opacity:0;transform:translateY(14px)} .js:not(.no-anim) .why-line.in{--why:1} .js:not(.no-anim) .why-line.in li{opacity:1;transform:none} .why-line.in li:nth-child(2){transition-delay:.45s}.why-line.in li:nth-child(3){transition-delay:.9s} .js:not(.no-anim) .promise li{opacity:0;transform:translateY(16px)} .js:not(.no-anim) .promise.in li{opacity:1;transform:none} .promise.in li:nth-child(2){transition-delay:.1s}.promise.in li:nth-child(3){transition-delay:.2s}.promise.in li:nth-child(4){transition-delay:.3s} @media (max-width:1100px){.promise{grid-template-columns:1fr 1fr}} @media (max-width:760px){ .who-head{grid-template-columns:1fr} .duo{grid-template-columns:1fr} .who-card{padding:1.3rem} .who-call{width:100%;justify-content:center} .who-role{font-size:.64rem;letter-spacing:.05em;padding:.3rem .55rem} .who-list li{font-size:.93rem} .why-line{grid-template-columns:1fr;padding-top:0;padding-left:2rem;gap:1.6rem} .why-line::before,.why-line::after{left:.45rem;right:auto;top:.3rem;bottom:.3rem;width:2px;height:auto} .why-line::after{transform-origin:top;transform:scaleY(var(--why,1))} .why-line li::before{left:-2rem;top:.1rem} .promise{grid-template-columns:1fr 1fr;gap:.6rem} .promise li{flex-direction:column;align-items:flex-start;gap:.6rem;padding:.9rem;font-size:.86rem;line-height:1.35} .promise svg{width:30px;height:30px;padding:6px} .who-list li{font-size:.9rem} .why{margin-top:2.6rem} .why-line{gap:1.2rem} } .story{padding-left:1.6rem;border-left:2px solid var(--ocre)} .story-k{font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ocre-2);margin-bottom:.7rem} .story-txt{max-width:62ch} .story-txt p{font-family:var(--serif);font-style:italic;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:clamp(1.05rem,1.25vw,1.18rem);line-height:1.5;color:rgba(247,245,240,.9)} .story-txt p + p{margin-top:.9rem} .story-txt .story-sign{font-family:var(--display);font-style:normal;font-size:.95rem;font-weight:600;color:var(--ocre-2);margin-top:1.2rem;display:flex;align-items:center;gap:.7rem} .story-sign::before{content:"";width:28px;height:1.5px;background:var(--ocre)} @media (max-width:760px){.story{padding-left:1.1rem}.story-txt p{font-size:1.04rem}} /* ---------- Ordinateur : chaque bloc tient dans l’écran ---------- */ @media (min-width:1024px){ .section{padding-block:clamp(2.5rem,7vh,5rem)} h2{font-size:min(4.6rem,4.4vw,7.2vh)} h1{font-size:min(5.8rem,6vw,10vh)} .lead{font-size:min(1.3rem,1.5vw,2.3vh)} .hero h1{font-size:min(6rem,6.2vw,9.4vh)} .hero-foot{margin-top:min(2.4rem,3vh)} } /* ---------- Ordinateur : blocs compacts ---------- */ @media (min-width:1024px){ .constat-head{grid-template-columns:1.45fr .85fr;margin-bottom:1.4rem} .facts{margin-top:min(2.4rem,3vh)} .facts li{padding-top:.8rem} .facts strong{font-size:min(2.6rem,4.4vh)} .constat-foot{margin-top:min(2.6rem,3vh)} .constat-foot .lead-voice{max-width:46ch;font-size:min(1.5rem,2.8vh)} .calc-head{margin-bottom:min(2.4rem,3vh)} .works-head{margin-bottom:min(3rem,3vh)} .work{flex-basis:min(560px,40vw,calc((100vh - 380px) * 1.3))} #realisations{padding-block:min(4rem,6vh)} .work-visual{margin-bottom:1.1rem} .contact-list{margin:1.1rem 0 1.4rem} .fields{grid-template-columns:1fr 1fr;gap:.8rem} .fields .field:nth-child(5),.fields .btn{grid-column:1/-1} .field input,.field textarea{min-height:48px;padding:.7rem .9rem} .field textarea{min-height:76px} .promise{margin-top:min(3rem,4vh)} .duo{margin-top:0} .faq-chips{margin-top:min(2rem,3vh)} } /* ajustement automatique à la hauteur de l’écran (ordinateur) */ .fit > *{zoom:var(--fz,1)} /* Ouverture du hero en CSS : s’affiche dès le chargement, sans attendre les scripts */ @keyframes heroLine{from{transform:translateY(110%)}to{transform:none}} @keyframes heroFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes heroMedia{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}} .js:not(.no-anim) .hero .mask .line{animation:heroLine 1s cubic-bezier(.16,1,.3,1) .15s backwards} .js:not(.no-anim) .hero .mask:nth-child(2) .line{animation-delay:.25s} .js:not(.no-anim) .hero .mask:nth-child(3) .line{animation-delay:.35s} .js:not(.no-anim) .hero [data-fade]{animation:heroFade .8s ease-out .45s backwards} .js:not(.no-anim) .hero .hero-voice{animation-delay:.55s} .js:not(.no-anim) .hero .hero-cta{animation-delay:.65s} .js:not(.no-anim) .hero .hero-foot{animation-delay:.75s} .js:not(.no-anim) .hero-media{animation:heroMedia 1.4s cubic-bezier(.22,1,.36,1) backwards} @media (prefers-reduced-motion:reduce){.hero .mask .line,.hero [data-fade],.hero-media{animation:none!important;opacity:1!important;transform:none!important}} /* ---------- Avis ---------- */ .rv-sec{background:var(--blanc)} .rv-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,6rem);align-items:center} .rv-score{display:flex;align-items:center;gap:1rem;margin-top:1.6rem} .rv-score strong{font-size:clamp(3rem,5vw,4.2rem);font-weight:600;font-stretch:82%;line-height:1;color:var(--nuit)} .rv-score span{font-size:.9rem;color:var(--muted)} .rv-stars{display:flex;gap:2px;color:var(--ocre)} .rv-stars svg{width:18px;height:18px} .rv-link{display:inline-block;margin-top:1.2rem;font-weight:600;color:var(--nuit);text-underline-offset:4px} .rv-list{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .rv{margin:0;background:#fff;border:1px solid var(--ligne);border-radius:16px;padding:1.5rem;display:flex;flex-direction:column;gap:1rem;box-shadow:0 24px 50px -36px rgba(20,28,39,.35)} .rv blockquote{margin:0;font-family:var(--serif);font-style:italic;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:1.06rem;line-height:1.45;color:var(--nuit);flex:1} .rv figcaption{display:flex;align-items:center;gap:.7rem;padding-top:1rem;border-top:1px solid var(--ligne);font-size:.86rem;color:var(--muted)} .rv figcaption b{display:block;color:var(--nuit);font-weight:600} .rv-av{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--brume);color:var(--nuit);font-weight:600} .rv-g{margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;font-size:.76rem;font-weight:600;padding:.3rem .6rem;border-radius:99px;background:var(--brume);color:var(--nuit);white-space:nowrap} .rv-g svg{width:14px;height:14px} @media (max-width:860px){.rv-grid{grid-template-columns:1fr;gap:1.6rem}.rv-list{grid-template-columns:1fr}} @media (min-width:1024px) and (max-height:820px){.work .tags li:nth-child(n+3){display:none}.works-note{margin-top:0}} /* ---------- Contact (v27) ---------- */ .ct-grid{display:grid;grid-template-columns:1fr minmax(0,480px);gap:clamp(2rem,5vw,6rem);align-items:start} .ct-info h2{color:var(--blanc);margin-top:.2rem} .ct-lead{margin-top:1.1rem;max-width:48ch;color:rgba(247,245,240,.82);font-size:1.05rem} .ct-steps{margin:1.6rem 0;display:grid;gap:.7rem;counter-reset:none} .ct-steps li{display:flex;align-items:center;gap:.9rem;color:var(--blanc);font-size:.98rem} .ct-steps span{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(201,162,77,.16);color:var(--ocre-2);font-weight:600;font-size:.85rem} .ct-person{display:flex;align-items:center;gap:.9rem;margin-bottom:1.2rem;padding:.8rem 1rem .8rem .8rem;border-radius:14px;background:rgba(247,245,240,.06);border:1px solid rgba(247,245,240,.1);width:max-content;max-width:100%} .ct-av{width:52px;height:52px;border-radius:50%;overflow:hidden;flex:none} .ct-av svg{width:100%;height:100%;display:block} .ct-person b{display:block;color:var(--blanc)} .ct-person span:not(.ct-av){font-size:.86rem;color:var(--ocre-2)} .ct-info .ways{display:flex;flex-wrap:wrap;gap:.6rem} .form-lead{font-size:.92rem;color:var(--muted);margin:-.6rem 0 1.2rem} @media (max-width:900px){.ct-grid{grid-template-columns:1fr;gap:2rem}.ct-info .ways{display:grid}.ct-info .way{justify-content:flex-start}} @media (min-width:1024px){.contact .fields{grid-template-columns:1fr 1fr}.contact .fields .field:nth-child(5),.contact .fields .btn{grid-column:1/-1}} /* ---------- Région (v27) ---------- */ .region{min-height:min(88vh,820px)} .region-in{grid-template-columns:1.15fr .85fr!important;gap:3rem!important;align-items:end;padding:5rem 0 3.5rem!important} .region-txt h2{max-width:15ch;margin-top:.3rem} .region-txt > p:last-child{margin-top:1.1rem;max-width:46ch} .region-chips{display:grid;gap:.6rem;justify-self:end;width:min(100%,360px)} .region-chips li{display:flex;align-items:center;gap:.7rem;padding:.8rem 1rem;border-radius:12px;background:rgba(255,255,255,.94);color:var(--nuit);font-size:.95rem;font-weight:500;box-shadow:0 18px 36px -20px rgba(0,0,0,.6);backdrop-filter:blur(6px)} .region-chips svg{flex:none;width:18px;height:18px;color:var(--or-fonce)} .region-chips b{margin-left:auto;font-weight:600;color:var(--or-fonce);font-size:.86rem;white-space:nowrap} .js:not(.no-anim) .region-chips.in li{animation:chipIn .6s cubic-bezier(.22,1,.36,1) backwards} .region-chips li:nth-child(2){animation-delay:.12s!important}.region-chips li:nth-child(3){animation-delay:.24s!important}.region-chips li:nth-child(4){animation-delay:.36s!important} @keyframes chipIn{from{opacity:0;transform:translateX(24px)}} @media (max-width:860px){.region{min-height:0}.region-in{grid-template-columns:1fr!important;gap:1.6rem!important;padding:12rem 0 2.4rem!important}.region-chips{justify-self:stretch;width:100%;grid-template-columns:1fr 1fr;gap:.5rem}.region-chips li{flex-direction:column;align-items:flex-start;gap:.3rem;padding:.7rem .8rem;font-size:.86rem;line-height:1.25}.region-chips b{margin-left:0}.region-chips svg{width:16px;height:16px}} /* ---------- Mobile (v27) ---------- */ @media (max-width:760px){.hero-media{inset:0}} .way .s{display:none} @media (max-width:760px){ .ct-info .ways{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;justify-items:stretch} .ct-info .way{flex-direction:column;justify-content:center;gap:.35rem;padding:.8rem .4rem;font-size:.86rem;text-align:center} .ct-info .way .l{display:none}.ct-info .way .s{display:block} .ct-info .way svg{width:22px;height:22px} .ct-person{width:100%} .inclus-strip{display:grid;grid-template-columns:1fr 1fr;gap:.45rem} .inclus-strip li{font-size:.82rem;padding:.55rem .7rem;text-align:center} .pp-step p{font-size:.95rem} } /* ---------- v29 : vidéos plus lumineuses sur mobile ---------- */ @media (max-width:760px){ .hero-shade{background:linear-gradient(180deg,rgba(20,28,39,.38) 0%,rgba(20,28,39,0) 22%,rgba(20,28,39,.05) 42%,rgba(20,28,39,.55) 70%,rgba(20,28,39,.82) 100%)} .region::after{background:linear-gradient(180deg,rgba(20,28,39,.3) 0%,rgba(20,28,39,.28) 30%,rgba(20,28,39,.6) 58%,rgba(20,28,39,.88) 100%)} .region-media{inset:0} .region h2,.region p{text-shadow:0 2px 18px rgba(0,0,0,.45)} } /* ---------- Mobile (v12) ---------- */ .reel-dots{display:none} @media (max-width:640px){ .works-head{display:block;margin-bottom:1.2rem} .reel-nav{display:none} .reel{gap:1rem;padding:.5rem 1.25rem 1.2rem;scroll-padding-inline:1.25rem} .work{flex:0 0 84vw} .work-visual{padding:0 22% 34% 0;margin-bottom:1.1rem} .device-laptop{border-radius:10px 10px 4px 4px} .device-phone{width:38%;padding:2.6%} .work h3{font-size:1.4rem;line-height:1.15} .work-badge{display:table;margin:.45rem 0 0} .work-meta{font-size:.9rem;margin:.25rem 0 .7rem} .tags li{font-size:.76rem;padding:.35rem .6rem} .reel-dots{display:flex;justify-content:center;gap:.45rem;margin:0 0 1.2rem} .reel-dots i{width:7px;height:7px;border-radius:50%;background:rgba(20,28,39,.2);transition:width .3s var(--ease),background .3s} .reel-dots i.on{width:22px;border-radius:4px;background:var(--nuit)} .works-note{font-size:.82rem} .row{grid-template-columns:.9rem 1fr;gap:.8rem;padding:1.25rem 0} .row i{width:8px;height:8px;margin-top:.5rem} .row h3{font-size:1.25rem} .row p{font-size:.94rem} .inclus-media{height:min(48vh,420px);height:min(48svh,420px);min-height:300px} .footer-grid{grid-template-columns:1fr 1fr;gap:2rem 1.5rem} .footer-grid > :first-child{grid-column:1/-1} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .js [data-reveal],.js [data-fade],.js .mask .line{opacity:1!important;transform:none!important} .hero-media img{animation:none!important} *{transition-duration:.01ms!important} } @media (max-width:900px){.cv main>section:not(.hero),.cv .footer{content-visibility:auto;contain-intrinsic-size:auto 1000px}} /* Bandeau artisans & indépendants */ .pro-band{background:var(--brume);border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);padding-block:clamp(2.4rem,4.5vw,3.6rem)} .pro-band-in{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:clamp(1.6rem,4vw,3.4rem);align-items:center} .pro-band-img{border-radius:14px;overflow:hidden;aspect-ratio:16/10;box-shadow:0 24px 50px -34px rgba(20,28,39,.5)} .pro-band-img img{width:100%;height:100%;object-fit:cover;display:block} .pro-band h2{font-size:clamp(1.8rem,3vw,2.6rem)} .pro-band p{margin-top:.8rem;max-width:62ch} .pro-band-link{display:inline-block;margin-top:1.1rem;font-weight:600;color:var(--nuit);text-underline-offset:5px;text-decoration-color:var(--ocre);text-decoration-thickness:2px} .pro-band-link:hover{text-decoration-color:var(--nuit)} .form-pro{font-size:.9rem;margin-top:.55rem;color:var(--muted)} .form-pro a{color:var(--nuit);font-weight:600;text-underline-offset:3px;text-decoration-color:var(--ocre)} .form.is-sent .form-pro{display:none} .nav-links a[aria-current="page"]::after{transform:scaleX(1)} .menu-link[aria-current="page"]{color:var(--ocre)} @media (max-width:760px){.pro-band-in{grid-template-columns:1fr}} /* ---------- Les formules (grille 2027, sans prix) ---------- */ .formules-sec{background:var(--blanc)} .fm-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.6rem);align-items:stretch} .fm-card{display:flex;flex-direction:column;gap:1rem;padding:clamp(1.6rem,3vw,2.6rem);border-radius:18px;background:#fff;border:1px solid var(--ligne);box-shadow:0 30px 60px -44px rgba(20,28,39,.45);position:relative;overflow:hidden} .fm-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--ocre)} .fm-kicker{font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--or-fonce)} .fm-name{font-size:clamp(2.3rem,4vw,3.3rem);font-weight:650;font-stretch:84%;letter-spacing:-.02em;line-height:1;color:var(--nuit)} .fm-tag{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,1.4vw,1.25rem);line-height:1.4;color:var(--texte);max-width:34ch} .fm-list{list-style:none;margin:.4rem 0 .6rem;padding:1.1rem 0 0;border-top:1px solid var(--ligne);display:grid;gap:.75rem} .fm-list li{position:relative;padding-left:1.9rem;line-height:1.45} .fm-list li::before{content:"";position:absolute;left:0;top:.1em;width:1.2rem;height:1.2rem;border-radius:50%;background:var(--ocre) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141c27' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/70% no-repeat} .fm-card .btn{margin-top:auto;align-self:flex-start} .fm-dark{background:linear-gradient(160deg,#243246,var(--nuit) 70%);color:var(--blanc);border-color:transparent} .fm-dark .fm-name{color:var(--blanc)} .fm-dark .fm-kicker{color:var(--ocre-2)} .fm-dark .fm-tag{color:rgba(242,240,235,.85)} .fm-dark .fm-list{border-top-color:rgba(242,240,235,.14)} .fm-both{margin-top:clamp(1rem,2vw,1.6rem);display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(1rem,2vw,1.6rem)} .fm-both-txt{padding:clamp(1.4rem,2.6vw,2.2rem);border-radius:18px;background:var(--brume)} .fm-both-h{font-weight:600;font-size:1.05rem;margin-bottom:1rem;color:var(--nuit)} .fm-incl{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.6rem} .fm-incl li{position:relative;padding-left:1.1rem;line-height:1.45;font-size:.97rem} .fm-incl li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--ocre)} .fm-delay{padding:clamp(1.4rem,2.6vw,2.2rem);border-radius:18px;background:var(--nuit);color:var(--blanc);display:flex;flex-direction:column;justify-content:center;gap:.8rem} .fm-delay-n{font-size:clamp(3rem,5.5vw,4.6rem);font-weight:650;font-stretch:82%;letter-spacing:-.02em;line-height:.9;color:var(--ocre)} .fm-delay-t{font-size:.97rem;line-height:1.5;color:rgba(242,240,235,.85)} .fm-delay-t b{color:var(--blanc);font-weight:600} .fm-small{margin-top:1.6rem;font-size:.97rem;color:var(--muted)} .fm-small a{color:var(--nuit);font-weight:600;text-underline-offset:3px;text-decoration-color:var(--ocre);text-decoration-thickness:2px} @media (max-width:900px){.fm-grid,.fm-both{grid-template-columns:1fr}} @media (max-width:560px){.fm-incl{grid-template-columns:1fr}.fm-card .btn{align-self:stretch}} .work-link{margin-top:.9rem;font-size:.95rem} .work-link a{color:var(--nuit);font-weight:600;text-underline-offset:4px;text-decoration-color:var(--ocre);text-decoration-thickness:2px} a.work-visual{display:block;color:inherit;text-decoration:none;cursor:pointer} a.work-visual .device-phone{transition:transform .5s var(--ease)} @media (hover:hover){a.work-visual:hover .device-phone{transform:translateY(-10px)}}