/* ═══════════════════════════════════════════════════════════════════════
   ARTKODIN — studio web (version sobre du 11/10/2026)
   Noir neutre, lettres fines, beaucoup d'air. Une seule touche froide : le dragon de glace,
   qui vit DERRIÈRE la page (canvas.scene3d) — les sections sont transparentes.
   L'ancienne version, plus chargée et plus « glace », est gardée dans design/artkodin_src/v2-glace/.
   ═══════════════════════════════════════════════════════════════════════ */
@property --coupe{syntax:'<percentage>';inherits:true;initial-value:50%}

:root{
  --nuit:#08090b; --fonce:#0e0f12; --carte:#14151a;
  --blanc:#f4f3ef; --gris:rgba(244,243,239,.64); --pale:rgba(244,243,239,.36);
  --trait:rgba(244,243,239,.1); --trait-fort:rgba(244,243,239,.24);
  --glace:#cfe5f1;                                   /* le seul reste de glace dans l'interface : survols et petits repères */
  --f-titre:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;
  --f-txt:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --marge:clamp(20px,4.6vw,76px);
  --haut:84px;                                       /* hauteur de l'en-tête en haut de page */
  --barre:66px;                                      /* hauteur de l'en-tête une fois qu'on a défilé */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--nuit)}
body{margin:0;background:var(--nuit);color:var(--blanc);font:400 17px/1.65 var(--f-txt);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-variant-numeric:lining-nums}
img,svg,video{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
h1,h2,h3,p,ol,ul,figure{margin:0;padding:0}
ol,ul{list-style:none}
em{font-style:italic}
::selection{background:var(--blanc);color:#08090b}
:focus-visible{outline:2px solid var(--blanc);outline-offset:4px;border-radius:6px}
.wrap{padding-inline:var(--marge)}
html.bloque,html.bloque body{overflow:hidden}
main,.pied{position:relative;z-index:1}
main{overflow-x:hidden;overflow-x:clip}

/* un grain très fin sur toute la page */
body::after{content:"";position:fixed;inset:0;z-index:93;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ───────── typographie ───────── */
.surtitre{font:600 11.5px/1.4 var(--f-txt);letter-spacing:.3em;text-transform:uppercase;color:var(--gris)}
.titre{margin-top:.34em;font:300 clamp(40px,5.7vw,100px)/1.02 var(--f-titre);letter-spacing:-.012em}
.titre em,.hero-t em,.vue h3 em{font-weight:300}
.chapo{max-width:440px;font-size:clamp(16px,1.2vw,18.5px);line-height:1.65;color:var(--gris)}
.grand{font:400 clamp(25px,2.9vw,48px)/1.22 var(--f-titre);letter-spacing:-.005em}
.tete{display:flex;align-items:flex-end;justify-content:space-between;gap:30px 70px;flex-wrap:wrap}
.lien{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:3px;transition:background-size .5s var(--ease),color .3s}
.lien:hover{background-size:0 1px;background-position:100% 100%}
.lien-fleche{display:inline-flex;align-items:center;gap:10px;font:600 12.5px/1 var(--f-txt);letter-spacing:.2em;text-transform:uppercase}
.lien-fleche svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
.lien-fleche:hover svg{transform:translate(4px,-4px)}
/* la rangée d'appels à l'action qui ferme chaque partie */
.suite{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px;margin-top:clamp(30px,3.6vw,56px)}
.suite .lien{font-size:15.5px;color:var(--gris)}
.suite .lien:hover{color:var(--blanc)}

/* mots qui montent (titres) et mots qui s'allument (paragraphes) */
[data-mots] .m{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em .05em .2em;margin:-.06em -.05em -.2em}
[data-mots] .m>span{display:inline-block}
.js [data-mots] .m>span{opacity:0;translate:0 105%;transition:opacity .7s,translate 1.15s var(--ease);transition-delay:calc(var(--i)*60ms)}
.js [data-mots].vu .m>span{opacity:1;translate:none}
[data-allume] .w{transition:opacity .5s}
.js [data-allume] .w{opacity:.16}
.js [data-allume] .w.on{opacity:1}
.js .rv{opacity:0;translate:0 26px;transition:opacity 1s,translate 1.1s var(--ease)}
.js .rv.vu{opacity:1;translate:none}

/* secours : si le script d'animation n'a pas démarré au bout de 9 s, rien ne reste caché */
.pret:not(.vivant) .rv,.pret:not(.vivant) [data-mots] .m>span,.pret:not(.vivant) [data-allume] .w{opacity:1!important;translate:none!important}
.pret:not(.vivant) .svc-corps{grid-template-rows:1fr}

/* ───────── boutons ───────── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:56px;padding:0 28px;border-radius:99px;overflow:hidden;isolation:isolate;white-space:nowrap;
  background:var(--blanc);color:#08090b;font:600 14.5px/1 var(--f-txt);letter-spacing:.005em;transition:transform .4s var(--ease),color .4s}
.btn::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:var(--glace);transform:translateY(103%);transition:transform .65s var(--ease)}
.btn:hover::before{transform:none}
.btn:active{transform:scale(.96)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
.btn:hover svg{transform:translateX(5px)}
.btn.ligne{background:transparent;color:var(--blanc);box-shadow:inset 0 0 0 1px var(--trait-fort)}
.btn.ligne::before{background:var(--blanc)}
.btn.ligne:hover{color:#08090b}
.btn.petit{height:44px;padding:0 20px;font-size:13.5px}
.btn.plein{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ───────── l'entrée : un rideau, le nom, un trait qui se remplit ───────── */
.entree{position:fixed;inset:0;z-index:100;display:grid;place-items:center;align-content:center;gap:26px;background:var(--nuit);will-change:transform}
html:not(.js) .entree,.pret .entree{display:none}
.entree-nom{font:400 15px/1 var(--f-titre);letter-spacing:.62em;text-transform:uppercase;padding-left:.62em;opacity:0;animation:parait 1s .1s forwards}
.entree-ligne{width:min(200px,44vw);height:1px;background:var(--trait);overflow:hidden}
.entree-ligne i{display:block;height:100%;background:var(--blanc);transform:scaleX(var(--p,0));transform-origin:left}
@keyframes parait{to{opacity:1}}

/* ───────── la pastille « Visiter » qui suit la souris sur les réalisations ───────── */
.curseur{position:fixed;left:0;top:0;z-index:96;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:var(--blanc);pointer-events:none;display:grid;place-items:center;scale:0;transition:scale .45s var(--ease)}
.curseur.bulle{scale:1}
.curseur span{font:600 10.5px/1.25 var(--f-txt);letter-spacing:.18em;text-transform:uppercase;color:#08090b;text-align:center}

/* ───────── en-tête ───────── */
.top{position:fixed;inset:0 0 auto 0;z-index:60;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;height:var(--haut);padding:0 var(--marge);
  transition:background .4s,height .5s var(--ease),border-color .4s;border-bottom:1px solid transparent}
.top.fond{height:var(--barre);background:rgba(8,9,11,.74);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-color:var(--trait)}
.logo{justify-self:start;display:flex;align-items:center;gap:12px}
.logo svg{width:22px;height:22px;fill:none;stroke:var(--blanc);stroke-width:5;stroke-linejoin:round;transition:rotate .9s var(--ease)}
.logo:hover svg{rotate:180deg}
.logo b{font:500 13px/1 var(--f-titre);letter-spacing:.44em;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:clamp(18px,2.6vw,40px)}
.nav a{position:relative;padding:12px 0;font:500 14px/1 var(--f-txt);color:var(--gris);transition:color .3s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav a:hover,.nav a.on{color:var(--blanc)}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1);transform-origin:left}
.top-d{justify-self:end;display:flex;align-items:center;gap:10px}
.burger{display:none;position:relative;width:44px;height:44px}
.burger i{position:absolute;left:10px;right:10px;height:1.5px;background:currentColor;transition:transform .5s var(--ease),top .5s var(--ease)}
.burger i:first-child{top:17px}.burger i:last-child{top:26px}
.burger[aria-expanded="true"] i:first-child{top:21.5px;transform:rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{top:21.5px;transform:rotate(-45deg)}
.menu-m{position:fixed;inset:0;z-index:58;display:flex;flex-direction:column;justify-content:center;gap:38px;padding:90px var(--marge) 40px;background:var(--nuit);
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .8s var(--ease),visibility 0s .8s}
.menu-m.ouvert{clip-path:inset(0);visibility:visible;transition:clip-path .8s var(--ease)}
.menu-m nav{display:flex;flex-direction:column}
.menu-m nav a{padding:.08em 0;font:300 clamp(40px,12vw,72px)/1.14 var(--f-titre);translate:0 34px;opacity:0;transition:translate .8s var(--ease),opacity .6s}
.menu-m.ouvert nav a{translate:none;opacity:1}
.menu-m.ouvert nav a:nth-child(2){transition-delay:.05s}.menu-m.ouvert nav a:nth-child(3){transition-delay:.1s}.menu-m.ouvert nav a:nth-child(4){transition-delay:.15s}.menu-m.ouvert nav a:nth-child(5){transition-delay:.2s}
.menu-m-bas{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.menu-m-bas .lien{font-size:15.5px;color:var(--gris)}

/* ═════════════ ACCUEIL ═════════════ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(var(--haut) + clamp(14px,3.6svh,46px)) var(--marge) 0}
.hero-bas{position:relative;z-index:1;max-width:1180px;display:flex;flex-direction:column;align-items:center}
.hero-h{display:flex;flex-direction:column;align-items:center;margin:0;font:inherit}
.hero .surtitre{letter-spacing:.3em}
.hero-t{display:block;margin-top:.3em;font:300 clamp(38px,6.1vw,104px)/.99 var(--f-titre);letter-spacing:-.014em;text-wrap:balance}
.hero-t em{display:block}
.hero-faits{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin-top:clamp(18px,2.6svh,30px);font:500 14px/1.3 var(--f-txt);color:var(--gris)}
.hero-faits li{display:flex;align-items:center;gap:24px}
.hero-faits li+li::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--pale)}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(22px,3.2svh,36px)}
/* les deux films : côte à côte, le second un peu plus bas ; ils montent à des vitesses différentes quand on défile */
.hero-films{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:clamp(16px,2.6vw,44px);width:min(1560px,100%);margin-top:clamp(30px,5svh,60px);perspective:1600px}
.hero-films .f2{margin-top:9%}
.hero-films .cadre{box-shadow:0 40px 100px rgba(0,0,0,.55)}

/* ═════════════ LE CONSTAT ═════════════ */
.constat{padding:clamp(100px,14vw,230px) 0 clamp(60px,8vw,130px)}
.manifeste{max-width:1280px;font:300 clamp(30px,4.5vw,76px)/1.13 var(--f-titre);letter-spacing:-.012em}

/* ═════════════ CE QUE VOUS ACHETEZ ═════════════ */
.services{padding:clamp(70px,9vw,150px) 0 clamp(70px,9vw,150px)}
.offre{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,6vw,110px);align-items:start;margin-top:clamp(44px,5.4vw,90px)}
.offre-liste{border-top:1px solid var(--trait-fort);--col:46px}
.svc{border-bottom:1px solid var(--trait)}
.svc-tete{display:grid;grid-template-columns:var(--col) minmax(0,1fr) 34px;align-items:center;gap:0 12px;width:100%;padding:24px 0 22px;text-align:left}
.svc-tete b{font:500 12px/1 var(--f-txt);letter-spacing:.08em;color:var(--pale);font-variant-numeric:tabular-nums;transition:color .5s}
.svc-t{font:300 clamp(28px,3vw,50px)/1.06 var(--f-titre);letter-spacing:-.01em;color:var(--gris);transition:color .5s,translate .7s var(--ease)}
.svc-a{grid-column:2;margin-top:8px;font-size:15.5px;line-height:1.45;color:var(--pale);transition:color .5s}
.svc.ouvert .svc-t,.svc-tete:hover .svc-t{color:var(--blanc)}
.svc.ouvert .svc-tete b{color:var(--blanc)}
.svc.ouvert .svc-a,.svc-tete:hover .svc-a{color:var(--gris)}
.svc:not(.ouvert) .svc-tete:hover .svc-t{translate:8px 0}
.svc-tete i,.q button i{position:relative;flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--trait-fort);transition:rotate .6s var(--ease),background .4s,border-color .4s,color .4s}
.svc-tete i::before,.svc-tete i::after,.q button i::before,.q button i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.2px;translate:-50% -50%;background:currentColor;transition:rotate .6s var(--ease)}
.svc-tete i::after,.q button i::after{rotate:90deg}
.svc.ouvert .svc-tete i,.q button[aria-expanded="true"] i{rotate:180deg;background:var(--blanc);border-color:var(--blanc);color:#08090b}
.svc.ouvert .svc-tete i::after,.q button[aria-expanded="true"] i::after{rotate:0deg}
.svc-corps{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s var(--ease)}
.svc.ouvert .svc-corps,html:not(.js) .svc-corps{grid-template-rows:1fr}
.svc-in{min-height:0;overflow:hidden;padding-left:calc(var(--col) + 12px);opacity:0;transition:opacity .5s}
.svc.ouvert .svc-in,html:not(.js) .svc-in{opacity:1;transition:opacity .7s .15s}
.svc-in>p:not(.franc){font-size:16.5px;color:var(--gris);max-width:560px}
.svc-in>:last-child{margin-bottom:34px}
.coche{margin-top:18px}
.coche li{position:relative;padding:5px 0 5px 24px;font-size:15.5px;line-height:1.45}
.coche li::before{content:"";position:absolute;left:2px;top:12px;width:7px;height:7px;rotate:45deg;border:1.2px solid var(--blanc)}
.franc{margin-top:20px;padding-left:16px;border-left:1px solid var(--trait-fort);font:400 italic 18.5px/1.4 var(--f-titre);max-width:520px}
/* le cadre de droite : un seul dessin à la fois, celui de la ligne ouverte */
.offre-vue{position:sticky;top:calc(var(--barre) + 5svh)}
.offre-cadre{position:relative;aspect-ratio:1/.84;border-radius:20px;border:1px solid var(--trait);background:var(--fonce);overflow:hidden}
.offre-cadre .illu{position:absolute;inset:0;max-width:none;aspect-ratio:auto;margin:0;border:0;border-radius:0;background:none;opacity:0;visibility:hidden;scale:1.04;transition:opacity .6s,scale 1.2s var(--ease),visibility 0s .6s}
.offre-cadre .illu.on{opacity:1;visibility:visible;scale:1;transition:opacity .7s .12s,scale 1.2s var(--ease) .12s}

.illu{position:relative;width:100%;max-width:540px;aspect-ratio:1/.8;margin-top:24px;border-radius:16px;border:1px solid var(--trait);background:var(--fonce);overflow:hidden;font:500 11px/1.3 var(--f-txt)}
.illu:not(.on) *,.illu:not(.on) *::after{animation-play-state:paused}

/* dessin 1 — la maquette devient un site */
.fenetre{position:absolute;inset:0 0 auto 0;height:9%;display:flex;align-items:center;gap:6px;padding:0 3.5%;border-bottom:1px solid var(--trait)}
.fenetre i{width:7px;height:7px;border-radius:50%;background:var(--trait-fort)}
.fenetre span{margin-left:10px;color:var(--gris);font-size:10.5px;letter-spacing:.04em}
.illu-creation .ecran{position:absolute;inset:9% 0 12% 0}
.bloc{position:absolute;border:1px dashed rgba(244,243,239,.3);border-radius:5px;opacity:0;animation:pose 10s var(--ease) infinite;animation-delay:calc(var(--k)*.22s)}
.bloc::after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:var(--fill,rgba(244,243,239,.12));opacity:0;animation:peint 10s var(--ease) infinite;animation-delay:calc(var(--k)*.22s)}
.b1{--k:0;left:6%;right:6%;top:7%;height:7%}
.b2{--k:1;left:6%;width:52%;top:20%;height:44%;--fill:linear-gradient(135deg,#2b3036,#8c9aa3 55%,#e4ebef)}
.b3{--k:2;left:63%;width:31%;top:22%;height:9%;--fill:rgba(244,243,239,.92)}
.b4{--k:3;left:63%;width:27%;top:35%;height:3.6%;--fill:rgba(244,243,239,.36)}
.b5{--k:4;left:63%;width:21%;top:41.5%;height:3.6%;--fill:rgba(244,243,239,.36)}
.b6{--k:5;left:63%;width:20%;top:52%;height:11%;border-radius:99px;--fill:var(--blanc)}
.b7{--k:6;left:6%;width:27.4%;top:71%;height:24%}
.b8{--k:7;left:36.3%;width:27.4%;top:71%;height:24%}
.b9{--k:8;left:66.6%;width:27.4%;top:71%;height:24%}
@keyframes pose{0%{opacity:0;translate:0 14px}6%,86%{opacity:1;translate:0 0}94%,100%{opacity:0;translate:0 0}}
@keyframes peint{0%,42%{opacity:0}54%,86%{opacity:1}94%,100%{opacity:0}}
.illu-leg{position:absolute;left:5%;right:5%;bottom:4.5%;display:flex;align-items:center;gap:12px;color:var(--gris);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.illu-leg i{flex:1;height:1px;background:var(--trait);position:relative}
.illu-leg i::after{content:"";position:absolute;left:0;top:-3px;width:7px;height:7px;rotate:45deg;background:var(--blanc);animation:avance 10s linear infinite}
@keyframes avance{0%{left:0}86%{left:100%}100%{left:100%}}

/* dessin 2 — avant / après */
.illu-refonte{--coupe:50%;cursor:ew-resize}
.vieux,.neuf{position:absolute;inset:0;padding:8% 8%}
.vieux{background:#d9d3c2;color:#3d3930;font-family:"Times New Roman",Times,serif}
.v-t{font-size:clamp(13px,1.5vw,20px);font-weight:700;text-decoration:underline;color:#1a1a8a}
.v-l{height:6px;margin-top:9px;background:#8e887a;width:92%}.v-l.c{width:55%}
.v-img{height:26%;margin-top:14px;background:repeating-linear-gradient(45deg,#b9b29f,#b9b29f 8px,#c8c1ae 8px,#c8c1ae 16px);border:2px ridge #8a8474}
.v-b{display:inline-block;margin-top:14px;padding:6px 12px;background:linear-gradient(#ffd24a,#e39b12);border:2px outset #f3c33a;color:#7a1010;font:700 12px Arial,sans-serif}
.v-alerte{position:absolute;left:8%;bottom:7%;font:700 12px Arial,sans-serif;color:#a11515}
.neuf{background:linear-gradient(160deg,#17181c,#0b0c0e);clip-path:inset(0 0 0 var(--coupe))}
.n-photo{height:44%;border-radius:10px;background:linear-gradient(135deg,#2b3036,#8c9aa3 55%,#e4ebef)}
.n-t{height:13px;width:62%;margin-top:18px;border-radius:3px;background:var(--blanc)}
.n-l{height:5px;width:84%;margin-top:11px;border-radius:3px;background:var(--pale)}.n-l.c{width:52%}
.n-btns{display:flex;gap:8px;margin-top:16px}
.n-btns i{width:27%;height:26px;border-radius:99px;background:var(--blanc)}.n-btns i+i{background:transparent;box-shadow:inset 0 0 0 1px var(--trait-fort)}
.n-ok{position:absolute;right:8%;bottom:7%;color:var(--gris);letter-spacing:.14em;text-transform:uppercase;font-size:10.5px}
.n-ok::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;rotate:45deg;background:var(--glace)}
.poignee{position:absolute;top:0;bottom:0;left:var(--coupe);width:1px;background:var(--blanc)}
.poignee i{position:absolute;left:50%;top:50%;width:34px;height:34px;translate:-50% -50%;border-radius:50%;background:var(--blanc);box-shadow:0 6px 20px rgba(0,0,0,.5)}
.poignee i::before,.poignee i::after{content:"";position:absolute;top:50%;width:7px;height:7px;border:1.6px solid #08090b;border-right:0;border-top:0}
.poignee i::before{left:9px;translate:0 -50%;rotate:45deg}.poignee i::after{right:9px;translate:0 -50%;rotate:-135deg}
.etiq{position:absolute;top:5%;padding:5px 9px 4px;border-radius:99px;font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.etiq.e1{left:5%;background:rgba(30,26,18,.75);color:#f1ead8}
.etiq.e2{right:5%;background:rgba(244,243,239,.14);color:var(--blanc)}

/* dessin 3 — le résultat dans Google */
.illu-seo{padding:7% 7% 0;display:flex;flex-direction:column;gap:10px}
.cherche{display:flex;align-items:center;gap:10px;height:42px;padding:0 16px;border-radius:99px;border:1px solid var(--trait-fort);background:rgba(244,243,239,.04);font-size:12.5px;color:var(--blanc)}
.cherche svg{flex:none;width:17px;height:17px;fill:none;stroke:var(--gris);stroke-width:1.6;stroke-linecap:round}
.cherche i{width:1px;height:16px;margin-left:-6px;background:var(--blanc);animation:clignote 1s steps(1) infinite}
@keyframes clignote{50%{opacity:0}}
.res{padding:14px 16px;border-radius:12px;border:1px solid transparent}
.res.fort{margin-top:6px;border-color:var(--trait-fort);background:rgba(244,243,239,.035)}
.res-u{font-size:10.5px;color:var(--gris)}
.res-t{margin-top:5px;font:500 clamp(17px,1.6vw,23px)/1.15 var(--f-titre);color:var(--blanc)}
.res-d{margin-top:6px;font:400 12px/1.5 var(--f-txt);color:var(--gris)}
.res-i,.res-b{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.res-i span,.res-b span{padding:5px 9px 4px;border-radius:99px;font-size:10px;letter-spacing:.04em;border:1px solid var(--trait);color:var(--blanc);animation:brille 7.5s var(--ease) infinite;animation-delay:calc(var(--k)*.9s)}
.res-b span{border-color:var(--trait-fort)}
.o1{--k:0}.o2{--k:1}.o3{--k:2}.o4{--k:3}.o5{--k:4}
@keyframes brille{0%,6%{background:transparent;color:var(--blanc)}10%,20%{background:var(--blanc);color:#08090b}26%,100%{background:transparent;color:var(--blanc)}}
.res.pale{opacity:.34;padding-block:8px}
.res.pale .res-u{height:5px;width:26%;background:var(--pale);border-radius:3px}
.res.pale .res-t{height:10px;width:58%;background:var(--pale);border-radius:3px}
.res.pale .res-d{height:5px;width:82%;background:var(--trait-fort);border-radius:3px}
.illu-note{position:absolute;right:6%;bottom:4.5%;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--pale)}

/* dessin 4 — un geste et le client est là */
.tel{position:absolute;left:9%;top:8%;bottom:8%;aspect-ratio:9/17.5;border-radius:22px;border:1px solid var(--trait-fort);background:linear-gradient(170deg,#17181c,#0b0c0e);padding:5%;overflow:hidden}
.tel-photo{height:34%;border-radius:10px;background:linear-gradient(135deg,#2b3036,#8c9aa3 55%,#e4ebef)}
.tel-t{height:11px;width:70%;margin-top:14px;border-radius:3px;background:var(--blanc)}
.tel-l{height:5px;width:90%;margin-top:9px;border-radius:3px;background:var(--pale)}.tel-l.c{width:56%}
.tel-barre{position:absolute;left:6%;right:6%;bottom:5%;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:99px;background:rgba(244,243,239,.07);border:1px solid var(--trait)}
.tel-barre span{padding:8px 0 7px;border-radius:99px;text-align:center;font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;animation:appui 9s var(--ease) infinite}
.a1{animation-delay:6s!important}.a2{animation-delay:0s!important}.a3{animation-delay:3s!important}
@keyframes appui{0%,3%{background:transparent;color:var(--blanc)}6%,22%{background:var(--blanc);color:#08090b}28%,100%{background:transparent;color:var(--blanc)}}
.doigt{position:absolute;left:50%;bottom:8.5%;width:26px;height:26px;margin-left:-13px;border-radius:50%;border:1.5px solid var(--blanc);opacity:0;animation:doigt 9s var(--ease) infinite}
@keyframes doigt{0%{opacity:0;scale:1.5;translate:0 0}4%{opacity:1;scale:1}8%{opacity:0;scale:1.8}
  33%{opacity:0;scale:1.5;translate:112% 0}37%{opacity:1;scale:1;translate:112% 0}41%{opacity:0;scale:1.8;translate:112% 0}
  66%{opacity:0;scale:1.5;translate:-112% 0}70%{opacity:1;scale:1;translate:-112% 0}74%,100%{opacity:0;scale:1.8;translate:-112% 0}}
.notif{position:absolute;left:47%;right:6%;padding:13px 15px;border-radius:14px;border:1px solid var(--trait-fort);background:rgba(22,23,27,.95);box-shadow:0 18px 40px rgba(0,0,0,.45);opacity:0;animation:notif 9s var(--ease) infinite}
.notif b{display:block;font:600 12.5px/1.3 var(--f-txt);color:var(--blanc)}
.notif span{display:block;margin-top:3px;font:400 11.5px/1.4 var(--f-txt);color:var(--gris)}
.notif b::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;rotate:45deg;background:var(--glace)}
.n1{top:16%;animation-delay:.5s}.n2{top:42%;animation-delay:3.5s}.n3{top:68%;animation-delay:6.5s}
@keyframes notif{0%{opacity:0;translate:24px 0}6%,60%{opacity:1;translate:0 0}70%,100%{opacity:0;translate:0 -8px}}

/* dessin 5 — la technique */
.illu-tech{padding:8% 8% 0;display:flex;flex-direction:column;gap:16px}
.adresse{display:flex;align-items:center;gap:12px;height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--trait-fort);background:rgba(244,243,239,.04);font-size:12.5px;color:var(--gris)}
.adresse b{font-weight:500;color:var(--blanc)}
.adresse svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--blanc);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.adresse .anse{transform-origin:16px 11px;animation:ferme 6s var(--ease) infinite}
@keyframes ferme{0%,12%{transform:translateY(-3px) rotate(-24deg)}22%,100%{transform:none}}
.etats li{display:flex;align-items:center;gap:12px;padding:12px 0 11px;border-bottom:1px solid var(--trait);font:500 13.5px/1.3 var(--f-txt);color:var(--blanc)}
.etats i{width:7px;height:7px;rotate:45deg;background:var(--glace);box-shadow:0 0 0 0 rgba(207,229,241,.45);animation:pouls 2.8s ease-out infinite}
.etats li:nth-child(2) i{animation-delay:.9s}.etats li:nth-child(3) i{animation-delay:1.8s}
@keyframes pouls{70%,100%{box-shadow:0 0 0 9px rgba(207,229,241,0)}}
.etats b{margin-left:auto;font:500 10.5px/1 var(--f-txt);letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.echange{display:flex;flex-direction:column;gap:8px;font:400 12.5px/1.45 var(--f-txt)}
.echange p{max-width:82%;padding:10px 14px;border-radius:14px;opacity:0;animation:bulle 9s var(--ease) infinite}
.m1{align-self:flex-start;background:rgba(244,243,239,.07);border:1px solid var(--trait);border-bottom-left-radius:4px}
.m2{align-self:flex-end;background:var(--blanc);color:#08090b;font-weight:600;border-bottom-right-radius:4px;animation-delay:1.6s!important}
@keyframes bulle{0%{opacity:0;translate:0 10px}8%,82%{opacity:1;translate:0 0}92%,100%{opacity:0}}

/* ═════════════ RÉALISATIONS ═════════════ */
.realisations{position:relative}
.galerie{position:relative;height:100svh;min-height:600px;overflow:hidden}
.piste{display:flex;align-items:center;gap:clamp(50px,7vw,130px);width:max-content;height:100%;padding:var(--barre) var(--marge) 0 calc(var(--marge) + 3vw);will-change:transform}
.vue{flex:none}
.vue-intro{width:min(500px,78vw)}
.vue-intro .chapo{margin-top:26px}
.vue-fleche{display:flex;align-items:center;gap:16px;margin-top:44px;font:600 10.5px/1 var(--f-txt);letter-spacing:.3em;text-transform:uppercase;color:var(--gris)}
.vue-fleche svg{width:60px;height:16px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;animation:balance 2s ease-in-out infinite}
@keyframes balance{50%{transform:translateX(6px)}}
.vue-cas{display:grid;grid-template-columns:min(58vw,104svh) clamp(220px,19vw,300px);gap:clamp(24px,3.4vw,60px);align-items:end}
.cadre{position:relative;display:block;border-radius:14px;overflow:hidden;border:1px solid var(--trait-fort);background:var(--fonce);box-shadow:0 50px 120px rgba(0,0,0,.6);transform-style:preserve-3d;will-change:transform}
.cadre-barre{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-bottom:1px solid var(--trait);background:rgba(244,243,239,.03)}
.cadre-barre i{width:8px;height:8px;border-radius:50%;background:var(--trait-fort)}
.cadre-barre b{margin-left:12px;font:400 11px/1 var(--f-txt);letter-spacing:.06em;color:var(--gris)}
.cadre video{width:100%;aspect-ratio:16/10;object-fit:cover;background:#0e0f12}
.cas-type{font:600 11px/1 var(--f-txt);letter-spacing:.3em;text-transform:uppercase;color:var(--gris)}
.cas-txt h3{margin-top:14px;font:300 clamp(40px,4.4vw,78px)/.98 var(--f-titre);letter-spacing:-.012em}
.cas-txt>p:not(.cas-type){margin:18px 0 22px;font-size:15.5px;color:var(--gris)}
.vue-fin{width:min(480px,80vw);padding-right:6vw}
.vue-fin h3{font:300 clamp(36px,4vw,68px)/1.02 var(--f-titre)}
.vue-fin p{margin:20px 0 28px;font-size:15.5px;color:var(--gris)}
.galerie-jauge{position:absolute;left:var(--marge);right:var(--marge);bottom:34px;height:1px;background:var(--trait)}
.galerie-jauge i{display:block;height:100%;background:var(--blanc);transform:scaleX(0);transform-origin:left}

/* ═════════════ MÉTHODE ═════════════ */
.methode{padding:clamp(80px,11vw,180px) 0 clamp(60px,8vw,130px)}
.fil{height:1px;margin-top:clamp(50px,6vw,100px);background:var(--trait)}
.fil i{display:block;height:100%;background:var(--blanc);transform:scaleX(var(--p,0));transform-origin:left}
.etapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,70px)}
.etapes li{position:relative;padding-top:38px;opacity:.28;transition:opacity .7s}
.etapes li.on{opacity:1}
.etapes li::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;rotate:45deg;border:1.2px solid var(--blanc);background:var(--nuit);transition:background .5s}
.etapes li.on::before{background:var(--blanc)}
.etape-k{font:300 clamp(54px,6.4vw,112px)/.95 var(--f-titre);letter-spacing:-.02em}
.etapes h3{margin-top:18px;font:400 clamp(24px,2.2vw,34px)/1.1 var(--f-titre)}
.etapes li>p:last-child{margin-top:8px;font-size:15.5px;color:var(--gris);max-width:400px}

/* ═════════════ TARIF ═════════════ */
.tarif{padding:clamp(80px,11vw,180px) 0}
.tarif-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.84fr);gap:clamp(30px,6vw,110px);align-items:center}
.garantie{margin-top:clamp(24px,2.8vw,40px);max-width:520px;font:400 clamp(21px,1.9vw,28px)/1.3 var(--f-titre)}
.calcul{margin-top:clamp(30px,3.6vw,52px);max-width:520px;padding-top:24px;border-top:1px solid var(--trait)}
.calcul label{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:15.5px;color:var(--gris)}
.calcul output{font:500 26px/1 var(--f-titre);color:var(--blanc);white-space:nowrap}
.calcul input{width:100%;height:28px;margin:10px 0 6px;-webkit-appearance:none;appearance:none;background:transparent;cursor:ew-resize}
.calcul input::-webkit-slider-runnable-track{height:1px;background:linear-gradient(90deg,var(--blanc) var(--p,13%),var(--trait-fort) var(--p,13%))}
.calcul input::-moz-range-track{height:1px;background:var(--trait-fort)}
.calcul input::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;margin-top:-7px;rotate:45deg;background:var(--blanc);border:0}
.calcul input::-moz-range-thumb{width:13px;height:13px;rotate:45deg;background:var(--blanc);border:0;border-radius:0}
.calcul-r{margin-top:8px;font-size:15.5px;line-height:1.6;color:var(--gris)}
.calcul-r b{font:500 26px/1 var(--f-titre);color:var(--blanc)}
.prix{position:relative;padding:clamp(26px,3.2vw,50px);border-radius:22px;border:1px solid var(--trait-fort);background:var(--fonce);will-change:transform}
.prix-k{font:600 11px/1 var(--f-txt);letter-spacing:.3em;text-transform:uppercase;color:var(--gris)}
.prix-n{display:flex;align-items:flex-start;gap:8px;margin-top:14px}
.prix-n b{font:300 clamp(110px,12.5vw,196px)/.82 var(--f-titre);letter-spacing:-.03em;font-variant-numeric:lining-nums}
.prix-n i{margin-top:.2em;font:300 clamp(40px,4.4vw,70px)/1 var(--f-titre);font-style:normal;color:var(--gris)}
.prix-n span{align-self:flex-end;margin:0 0 .9em 6px;font:600 11px/1 var(--f-txt);letter-spacing:.26em;text-transform:uppercase;color:var(--gris)}
.prix-puis{margin-top:18px;font-size:15.5px;color:var(--gris);max-width:420px}
.prix-puis b{font:500 24px/1 var(--f-titre);color:var(--blanc)}
.prix-liste{margin:22px 0 28px;padding-top:18px;border-top:1px solid var(--trait)}
.prix-liste li{position:relative;padding:5px 0 5px 24px;font-size:15.5px}
.prix-liste li::before{content:"";position:absolute;left:2px;top:13px;width:7px;height:7px;rotate:45deg;border:1.2px solid var(--blanc)}
.prix-ou{margin-top:16px;text-align:center;font-size:14.5px;color:var(--gris)}

/* ═════════════ QUI FAIT VOTRE SITE ═════════════ */
.noah{padding:clamp(60px,8vw,130px) 0;border-top:1px solid var(--trait)}
.noah-grille,.questions-grille{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,6vw,110px);align-items:start}

/* ═════════════ QUESTIONS ═════════════ */
.questions{padding:clamp(70px,9vw,150px) 0;border-top:1px solid var(--trait)}
.faq{border-top:1px solid var(--trait-fort)}
.q{border-bottom:1px solid var(--trait)}
.q button{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;padding:24px 0 22px;font:400 clamp(22px,2.1vw,32px)/1.15 var(--f-titre)}
.r{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
.r>p{min-height:0;overflow:hidden;font-size:16.5px;color:var(--gris);max-width:640px}
.q.ouvert .r{grid-template-rows:1fr}
.q.ouvert .r>p{padding-bottom:26px}

/* ═════════════ CONTACT ═════════════ */
.contact{padding:clamp(80px,11vw,190px) 0 clamp(70px,9vw,150px);border-top:1px solid var(--trait)}
.contact-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(30px,6vw,110px);align-items:start}
.contact .chapo{margin-top:24px}
.directs{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:clamp(28px,3.4vw,48px)}
.directs .lien{font-size:15.5px;color:var(--gris)}
.lead{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px 22px;padding-top:6px}
.lead label{position:relative;display:flex;flex-direction:column;gap:6px}
.lead label.large,.lead .btn,.lead .msg{grid-column:1/-1}
.lead .btn{margin-top:8px}
.lead label span{font:600 10.5px/1.4 var(--f-txt);letter-spacing:.24em;text-transform:uppercase;color:var(--gris)}
.lead label em{font-style:normal;letter-spacing:.08em;text-transform:none;opacity:.7}
.lead input{width:100%;height:46px;padding:0;border:0;border-bottom:1px solid var(--trait-fort);border-radius:0;background:transparent;color:var(--blanc);font:400 17px/1 var(--f-txt);outline:0}
.lead input::placeholder{color:rgba(244,243,239,.24)}
.lead label::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--blanc);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.lead label:focus-within::after{transform:scaleX(1)}
.lead .piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg{min-height:22px;font-size:14.5px;color:var(--gris)}
.msg.ok{color:var(--blanc)}.msg.err{color:#ffb4a8}

/* ═════════════ PIED ═════════════ */
.pied{padding-top:clamp(40px,6vw,90px);border-top:1px solid var(--trait);overflow:hidden;background:var(--nuit)}
.pied-mot{margin:0 var(--marge);font:300 var(--fs,20vw)/.84 var(--f-titre);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;text-align:center;
  color:transparent;background:linear-gradient(180deg,rgba(244,243,239,.92),rgba(244,243,239,.1));-webkit-background-clip:text;background-clip:text}
.pied-mot{pointer-events:none}
.pied-bas{position:relative;z-index:2}      /* au-dessus du grand mot, sinon il recouvre les liens */
.fitin{display:inline-block}
.pied-bas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 30px;padding-block:30px 34px;font-size:13.5px;color:var(--gris)}
.haut{display:inline-flex;align-items:center;gap:10px;font:600 10.5px/1 var(--f-txt);letter-spacing:.28em;text-transform:uppercase;transition:color .3s}
.haut:hover{color:var(--blanc)}
.haut svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:translate .5s var(--ease)}
.haut:hover svg{translate:0 -4px}
.mcta{display:none}
.pied-liens{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px clamp(24px,4vw,70px);padding-block:clamp(54px,6vw,96px) 14px}
.pied-liens .surtitre{margin-bottom:12px}
.pied-liens a{display:block;width:fit-content;padding:5px 0;font-size:15px;color:var(--gris);transition:color .3s}
.pied-liens a:hover{color:var(--blanc)}

/* ═════════════ PAGES INTÉRIEURES (métiers, guides) ═════════════ */
.p-tete{padding:calc(var(--haut) + clamp(40px,7vw,100px)) var(--marge) clamp(44px,5vw,76px)}
.ariane{font-size:13.5px;color:var(--pale)}
.ariane a{color:var(--gris);transition:color .3s}.ariane a:hover{color:var(--blanc)}
.p-tete .titre{max-width:1180px;margin-top:.5em;font-size:clamp(38px,5.2vw,88px)}
.p-chapo{max-width:780px;margin-top:clamp(22px,2.6vw,36px);font:400 clamp(20px,1.8vw,26px)/1.4 var(--f-titre)}
.p-corps{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(30px,6vw,110px);align-items:start;padding-block:clamp(44px,5vw,80px) clamp(70px,9vw,140px);border-top:1px solid var(--trait)}
.p-texte h2{margin-top:1.5em;font:300 clamp(30px,3vw,48px)/1.08 var(--f-titre);letter-spacing:-.01em}
.p-texte h2:first-child{margin-top:0}
.p-texte p{margin-top:16px;max-width:690px;color:var(--gris)}
.p-texte strong{font-weight:600;color:var(--blanc)}
.p-texte ul{margin-top:18px;max-width:690px}
.p-texte li{position:relative;padding:6px 0 6px 24px;color:var(--gris)}
.p-texte li::before{content:"";position:absolute;left:2px;top:15px;width:7px;height:7px;rotate:45deg;border:1.2px solid var(--blanc)}
.p-texte p a{color:var(--blanc);background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px}
.p-texte .cadre{margin-top:30px;max-width:690px}
.p-cote{position:sticky;top:calc(var(--barre) + 4svh)}
.p-cote .prix-n b{font-size:clamp(84px,8vw,128px)}
.p-liens{padding-block:clamp(50px,6vw,90px);border-top:1px solid var(--trait)}
.p-liens ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,4vw,60px);margin-top:22px}
.p-liens a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid var(--trait);font:400 clamp(20px,1.7vw,26px)/1.2 var(--f-titre);transition:padding .5s var(--ease)}
.p-liens a:hover{padding-left:10px}
.p-liens svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

/* ═════════════ TABLETTE ET TÉLÉPHONE ═════════════ */
@media (max-width:1180px){
  .nav{gap:22px}
  .nav a{font-size:13.5px}
  .lead{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:980px){
  .nav{gap:18px}
  .top-d .btn{padding:0 16px}
  .top-d .btn svg{display:none}
}
@media (max-width:859px){
  :root{--haut:70px;--barre:62px}
  .curseur{display:none}
  .top{grid-template-columns:1fr auto}
  .nav,.top-d .btn{display:none}
  .burger{display:block}

  .hero{min-height:0;padding-top:calc(var(--haut) + 34px)}
  .hero-films{display:flex;width:auto;align-self:flex-start;gap:14px;margin-top:40px}
  .hero-films .cadre{flex:none;width:80vw}
  .hero-films .f2{margin-top:0}
  .hero-t{font-size:clamp(34px,10.4vw,64px);line-height:1.01}
  .hero .surtitre{font-size:10px;letter-spacing:.26em;max-width:300px}
  .hero-faits{flex-direction:column;align-items:center;gap:4px;font-size:13.5px}
  .hero-faits li+li::before{display:none}
  .hero-cta{width:100%;max-width:400px}
  .hero-cta .btn{flex:1 1 100%}

  .suite{flex-direction:column;align-items:stretch;gap:18px}
  .suite .btn{width:100%}
  .suite .lien{align-self:flex-start}
  .tarif-grille,.noah-grille,.questions-grille,.contact-grille,.offre{grid-template-columns:minmax(0,1fr)}

  .offre-vue{display:none}
  .offre-liste{--col:32px}
  .svc-tete{padding:20px 0 18px}
  .svc-in{padding-left:0}

  .galerie{height:auto;min-height:0;overflow:visible;padding:clamp(70px,14vw,120px) 0 40px}
  .piste{flex-direction:column;align-items:stretch;width:auto;height:auto;gap:64px;padding:0 var(--marge)}
  .vue-intro,.vue-fin{width:auto;padding-right:0}
  .vue-fleche,.galerie-jauge{display:none}
  .vue-cas{grid-template-columns:minmax(0,1fr);gap:22px}
  .vue-fin .btn{width:100%}

  .fil{display:none}
  .etapes{grid-template-columns:minmax(0,1fr);gap:0;margin-top:40px;border-top:1px solid var(--trait-fort)}
  .etapes li{opacity:1;padding:26px 0 28px;border-bottom:1px solid var(--trait)}
  .etapes li::before{display:none}

  .directs{flex-direction:column;align-items:stretch}
  .directs .lien{align-self:flex-start}
  .lead{grid-template-columns:minmax(0,1fr)}
  .pied{padding-bottom:92px}
  .pied-liens,.p-liens ul,.p-corps{grid-template-columns:minmax(0,1fr)}
  .p-cote{position:static}
  .pied-bas{flex-direction:column;align-items:flex-start}
  .mcta{position:fixed;left:12px;right:12px;bottom:12px;z-index:56;display:flex;gap:8px;padding:6px;border-radius:99px;background:rgba(8,9,11,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--trait);translate:0 170%;transition:translate .7s var(--ease)}
  .mcta.montre{translate:none}
  .mcta .btn{height:48px;padding:0 18px;font-size:13.5px}
  .mcta .btn:first-child{flex:1}
}

/* écrans d'ordinateur peu hauts : tout tient encore dans la fenêtre */
@media (min-width:860px) and (max-height:800px){
  :root{--haut:76px}
  .hero-t{font-size:clamp(38px,min(6.1vw,10.6svh),104px)}
  .hero{padding-top:calc(var(--haut) + 22px)}
  .hero-films{margin-top:34px}
  .svc-tete{padding:18px 0 16px}
  .svc-t{font-size:clamp(26px,2.6vw,40px)}
  .prix-n b{font-size:clamp(96px,10.5vw,160px)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .js .rv,.js [data-mots] .m>span,.js [data-allume] .w{opacity:1;translate:none}
  .entree{display:none}
  .bloc,.bloc::after,.notif,.echange p{opacity:1}
}