/* ═══════════ eMakeHouse : page de teasing ═══════════
   Univers charte v1.6 : pétrole #183C40, menthe #8CCFB5, perle #F4F6F5,
   texte #203238, vert lisible #276A55. Alexandria variable auto-hébergée.
   Mode par défaut : blocs statiques, maison allumée (sans JS et
   prefers-reduced-motion). La classe .eh-js .eh-seq, posée par JS quand le
   mouvement est accepté, active la séquence au défilement. */

@font-face{
  font-family:'Alexandria';
  src:url('/assets/fonts/Alexandria-Variable-latin.woff2') format('woff2');
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
  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:'Alexandria';
  src:url('/assets/fonts/Alexandria-Variable-latin-ext.woff2') format('woff2');
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --eh-petrol:#183C40;
  --eh-mint:#8CCFB5;
  --eh-pearl:#F4F6F5;
  --eh-ink:#203238;
  --eh-green:#276A55;
}

/* ── Héros : encore chez EmakeSolution (noir et or) ── */
.eh-hero{position:relative;overflow:hidden;background:var(--black)}
.eh-hero::before{content:"";position:absolute;left:-14%;right:-14%;top:-56px;height:calc(100svh + 112px);z-index:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,0.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.035) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
.eh-hero__wrap{position:relative;z-index:1;min-height:calc(88svh - 71px);display:flex;flex-direction:column;justify-content:center;padding-top:clamp(48px,8vh,96px);padding-bottom:clamp(32px,5vh,56px);text-align:center}
.eh-hero .eyebrow{justify-content:center;margin-bottom:clamp(20px,3.5vh,34px)}
.eh-hero__title{font-size:clamp(34px,5vw,64px);line-height:1.08;margin:0 0 clamp(16px,2.5vh,24px)}
.eh-hero__line{font-size:clamp(16px,1.6vw,19px);color:var(--muted-2);margin:0 0 clamp(14px,2vh,20px)}
.eh-count{font-family:var(--font-display);font-weight:500;font-size:clamp(14px,1.4vw,17px);letter-spacing:0.14em;color:var(--yellow);margin:0}
.eh-count{min-height:1.6em}
.eh-hero__cue{margin-top:clamp(30px,6vh,56px);font-size:13.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted-2)}
.eh-hero__cue i{display:block;width:1px;height:34px;margin:12px auto 0;background:linear-gradient(var(--yellow),transparent)}

/* ── Séquence ── */
.eh-seq{position:relative;background:var(--black)}
.eh-seq__sticky{position:relative}
.eh-bg{position:absolute;inset:0;background:var(--eh-petrol);opacity:1;pointer-events:none}
.eh-frame{position:relative;z-index:1;display:grid;gap:clamp(18px,3vh,32px);padding:clamp(28px,5vh,56px) 0;align-items:center;justify-items:center}
.eh-stage{position:relative;width:min(92vw,680px)}
.eh-stage svg{display:block;width:100%;height:auto;overflow:visible}
.eh-symbol{position:absolute;top:-4%;left:50%;width:clamp(44px,8vw,64px);height:auto;transform:translateX(-50%);opacity:1}
.eh-texts{width:min(92vw,680px)}
.eh-t{margin:0 0 18px;font-family:'Alexandria',sans-serif;font-weight:300;font-size:clamp(19px,2.4vw,28px);line-height:1.45;color:var(--eh-pearl)}
.eh-t strong{font-weight:500}

/* Dessin de la maison : état final par défaut (tout allumé) */
.eh-l{fill:none;stroke:var(--eh-mint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.eh-l--soft{stroke-opacity:0.55;stroke-width:1.5}
.eh-glow{fill:var(--eh-mint);opacity:0.16}
.eh-room{fill:var(--eh-mint);opacity:0.07}
.eh-led{fill:var(--eh-mint)}
.eh-drop{fill:var(--eh-mint);opacity:0}
.eh-phdot{fill:var(--eh-mint)}
.eh-tankfill{fill:var(--eh-mint);opacity:0.35;transform-box:fill-box;transform-origin:50% 100%}
.eh-heat{stroke-opacity:0.6}
.eh-hc{fill:var(--eh-mint);font:500 11px 'Alexandria',sans-serif;letter-spacing:0.08em}
.eh-netcross{stroke:var(--eh-pearl);stroke-opacity:0.8}
.eh-net{stroke-dasharray:4 7;stroke-opacity:0.25}
.eh-bolt{fill:var(--eh-mint)}
.eh-click{opacity:0}
.eh-door{transform-box:fill-box;transform-origin:100% 50%}
.eh-valve{transform-box:fill-box;transform-origin:center;transform:rotate(90deg)}
.eh-meter{transform-box:fill-box;transform-origin:50% 100%;transform:rotate(32deg)}

/* ── Mode vivant : états initiaux puis scènes cumulatives ── */
@media (prefers-reduced-motion:no-preference){
  .eh-js .eh-seq{height:480svh}
  .eh-js .eh-seq .eh-bg{opacity:var(--bgp,0);transition:opacity 0.2s linear}
  .eh-js .eh-seq .eh-seq__sticky{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;background:var(--black)}
  .eh-js .eh-seq .eh-frame{grid-template-columns:minmax(0,5fr) minmax(0,7fr);width:min(1200px,94vw);margin:0 auto;gap:clamp(24px,4vw,56px);justify-items:stretch}
  .eh-js .eh-seq .eh-texts{position:relative;width:auto;min-height:7.5em}
  .eh-js .eh-seq .eh-t{position:absolute;inset:0;opacity:0;transform:translateY(18px);transition:opacity 0.55s var(--ease),transform 0.55s var(--ease)}
  .eh-js .eh-seq .eh-stage{opacity:0.45;transition:opacity 0.9s var(--ease)}
  .eh-js .eh-seq .eh-symbol{opacity:0;transform:translateX(-50%) translateY(10px);transition:opacity 0.7s var(--ease),transform 0.7s var(--ease)}
  /* états initiaux éteints */
  .eh-js .eh-seq .eh-draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease)}
  .eh-js .eh-seq .eh-glow,.eh-js .eh-seq .eh-room{opacity:0;transition:opacity 0.8s var(--ease)}
  .eh-js .eh-seq .eh-glow--sejour{opacity:0.16}
  .eh-js .eh-seq .eh-led{animation:ehPulse 2.6s ease-in-out infinite}
  .eh-js .eh-seq .eh-bolt{transform:translateX(-7px);transition:transform 0.5s var(--ease) 0.6s}
  .eh-js .eh-seq .eh-valve{transform:none;transition:transform 0.6s var(--ease)}
  .eh-js .eh-seq .eh-drop{opacity:1;animation:ehDrop 1.6s linear infinite}
  .eh-js .eh-seq .eh-phdot{opacity:0;transition:opacity 0.4s var(--ease)}
  .eh-js .eh-seq .eh-tankfill{transform:scaleY(0.14);transition:transform 1.3s var(--ease)}
  .eh-js .eh-seq .eh-heat{stroke-opacity:0;transition:stroke-opacity 0.8s var(--ease)}
  .eh-js .eh-seq .eh-hc{opacity:0;transition:opacity 0.5s var(--ease)}
  .eh-js .eh-seq .eh-meter{transform:rotate(-38deg);transition:transform 0.9s var(--ease)}
  .eh-js .eh-seq .eh-door{transition:transform 0.8s var(--ease)}
  .eh-js .eh-seq .eh-netcross{opacity:0;transition:opacity 0.4s var(--ease)}
  .eh-js .eh-seq .eh-net{transition:stroke-opacity 0.6s var(--ease);stroke-opacity:0.55}
  /* S1 : la maison se dessine, le séjour s'éteint, la porte se verrouille */
  .eh-js .eh-seq.is-s1 .eh-stage{opacity:1}
  .eh-js .eh-seq.is-s1 .eh-draw{stroke-dashoffset:0}
  .eh-js .eh-seq.is-s1 .eh-glow--sejour{opacity:0}
  .eh-js .eh-seq.is-s1 .eh-bolt{transform:none}
  .eh-js .eh-seq.is-s1 .eh-click{animation:ehClick 1s var(--ease) 0.9s 1}
  .eh-js .eh-seq.is-s1 .eh-t1{opacity:1;transform:none}
  /* S2 : la fuite stoppée */
  .eh-js .eh-seq.is-s2 .eh-drop{animation-play-state:paused}
  .eh-js .eh-seq.is-s2 .eh-valve{transform:rotate(90deg)}
  .eh-js .eh-seq.is-s2 .eh-ph1{opacity:1}
  .eh-js .eh-seq.is-s2 .eh-t1{opacity:0;transform:translateY(-14px)}
  .eh-js .eh-seq.is-s2 .eh-t2{opacity:1;transform:none}
  /* S3 : heures creuses */
  .eh-js .eh-seq.is-s3 .eh-tankfill{transform:scaleY(0.86)}
  .eh-js .eh-seq.is-s3 .eh-meter{transform:rotate(32deg)}
  .eh-js .eh-seq.is-s3 .eh-heat{stroke-opacity:0.6}
  .eh-js .eh-seq.is-s3 .eh-hc{opacity:1}
  .eh-js .eh-seq.is-s3 .eh-t2{opacity:0;transform:translateY(-14px)}
  .eh-js .eh-seq.is-s3 .eh-t3{opacity:1;transform:none}
  /* S4 : les enfants rentrent */
  .eh-js .eh-seq.is-s4 .eh-door{transform:rotate(-14deg)}
  .eh-js .eh-seq.is-s4 .eh-glow--entree,.eh-js .eh-seq.is-s4 .eh-room--entree{opacity:0.16}
  .eh-js .eh-seq.is-s4 .eh-room--entree{opacity:0.07}
  .eh-js .eh-seq.is-s4 .eh-ph2{opacity:1}
  .eh-js .eh-seq.is-s4 .eh-t3{opacity:0;transform:translateY(-14px)}
  .eh-js .eh-seq.is-s4 .eh-t4{opacity:1;transform:none}
  /* S5 : internet coupe, tout reste allumé, bascule pétrole */
  .eh-js .eh-seq.is-s5 .eh-net{stroke-opacity:0.15}
  .eh-js .eh-seq.is-s5 .eh-netcross{opacity:1}
  .eh-js .eh-seq.is-s5 .eh-glow{opacity:0.24}
  .eh-js .eh-seq.is-s5 .eh-room{opacity:0.1}
  .eh-js .eh-seq.is-s5 .eh-glow--sejour{opacity:0.24}
  .eh-js .eh-seq.is-s5 .eh-door{transform:none}
  .eh-js .eh-seq.is-s5 .eh-netdot{stroke-opacity:0.18}
  .eh-js .eh-seq.is-s5 .eh-symbol{opacity:1;transform:translateX(-50%)}
  .eh-js .eh-seq.is-s5 .eh-t4{opacity:0;transform:translateY(-14px)}
  .eh-js .eh-seq.is-s5 .eh-t5{opacity:1;transform:none}
}
@keyframes ehPulse{0%,100%{opacity:1}50%{opacity:0.25}}
@keyframes ehDrop{0%{transform:none;opacity:0}12%{opacity:1}85%{transform:translateY(18px);opacity:1}100%{transform:translateY(22px);opacity:0}}
@keyframes ehClick{0%{opacity:0;transform:scale(0.6)}35%{opacity:1}100%{opacity:0;transform:scale(1.3)}}

/* ── Monde eMakeHouse : pétrole, Alexandria ── */
.eh-world{background:var(--eh-petrol);color:var(--eh-pearl);font-family:'Alexandria',sans-serif;font-weight:300}
.eh-world section{padding:clamp(64px,10vh,120px) 0}
.eh-world h2{color:var(--eh-pearl);font-family:'Alexandria',sans-serif;font-weight:500;font-size:clamp(26px,3.4vw,42px);line-height:1.2;margin:0 0 clamp(18px,3vh,28px);letter-spacing:-0.01em}
.eh-world p{color:rgba(244,246,245,0.92);font-size:clamp(16px,1.6vw,19px);line-height:1.75;margin:0}
.eh-narrow{max-width:760px}
.eh-intro p{font-size:clamp(18px,2vw,23px);line-height:1.7}
.eh-kicker{display:block;font-weight:500;font-size:13px;letter-spacing:0.22em;text-transform:uppercase;color:var(--eh-mint);margin-bottom:18px}
/* Ce que fait eMakeHouse : liste éditoriale */
.eh-does{border-top:1px solid rgba(140,207,181,0.3)}
.eh-does li{list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;padding:22px 0;border-bottom:1px solid rgba(140,207,181,0.3)}
.eh-does ul{margin:clamp(24px,4vh,40px) 0 0;padding:0}
.eh-does__t{font-weight:500;font-size:clamp(19px,2.2vw,26px);min-width:min(40%,280px)}
.eh-does__d{font-size:clamp(15px,1.5vw,17px);color:rgba(244,246,245,0.86);flex:1}
/* Ce qui change : section perle */
.eh-switch{background:var(--eh-pearl);color:var(--eh-ink)}
.eh-switch h2,.eh-switch p{color:var(--eh-ink)}
.eh-switch .eh-kicker{color:var(--eh-green)}
.eh-switch__claims{margin:clamp(28px,5vh,48px) 0 0;padding:0}
.eh-switch__claims li{list-style:none;font-weight:500;font-size:clamp(24px,3.6vw,44px);line-height:1.25;letter-spacing:-0.01em;padding:clamp(14px,2.5vh,24px) 0;border-bottom:1px solid rgba(32,50,56,0.14)}
.eh-switch__claims li:last-child{border-bottom:none}
.eh-switch__claims em{font-style:normal;color:var(--eh-green)}
/* Pour qui + encadré */
.eh-who p{color:rgba(244,246,245,0.88)}
.eh-offer{margin-top:clamp(28px,5vh,44px);padding:clamp(22px,3.5vh,32px) clamp(22px,3vw,36px);border:1px solid var(--eh-mint);border-radius:14px;display:inline-block}
.eh-offer p{font-weight:500;font-size:clamp(18px,2vw,23px);color:var(--eh-mint)}
/* CTA */
.eh-cta{text-align:center}
.eh-cta__btn{display:inline-block;font-family:'Alexandria',sans-serif;font-weight:500;font-size:clamp(16px,1.7vw,19px);color:var(--eh-ink);background:var(--eh-mint);border-radius:999px;padding:16px 34px;text-decoration:none;transition:transform var(--transition),box-shadow var(--transition)}
.eh-cta__btn:hover{transform:translateY(-2px)}
.eh-cta__btn:focus-visible{outline:3px solid var(--eh-pearl);outline-offset:3px}
.eh-cta__note{margin-top:18px;font-size:14.5px;color:rgba(244,246,245,0.82)}
.eh-cta .eh-logo{display:block;width:min(74vw,420px);height:auto;margin:0 auto clamp(28px,5vh,44px)}
/* Responsive */
@media (max-width:767px){
  .eh-hero__wrap{min-height:calc(92svh - 61px)}
  .eh-does__t{min-width:100%}
  .eh-offer{display:block}
}

/* ── Mode vivant sur petit écran : une colonne, maison d'abord ── */
@media (prefers-reduced-motion:no-preference) and (max-width:899px){
  .eh-js .eh-seq .eh-frame{grid-template-columns:1fr;width:100vw;gap:10px;align-content:center;padding:76px 0 30px}
  .eh-js .eh-seq .eh-stage{order:-1;width:min(88vw,430px);margin:0 auto}
  .eh-js .eh-seq .eh-symbol{width:40px}
  .eh-js .eh-seq .eh-texts{width:min(88vw,430px);margin:0 auto;min-height:7em}
  .eh-js .eh-seq .eh-t{font-size:18px;line-height:1.5;text-align:center}
}
@media (prefers-reduced-motion:no-preference) and (max-width:360px){
  .eh-js .eh-seq .eh-t{font-size:16.5px}
  .eh-js .eh-seq .eh-texts{min-height:8em}
}