/* =====================================================================
   MOTION · couche d'animation de l'accueil · motion.css
   Lois : chaque geste se joue UNE fois, jamais lié au défilement, jamais
   de mouvement permanent derrière le texte. transform et opacity seulement
   (clip-path uniquement sur des calques décoratifs sans clic). L'état final
   est l'état CSS par défaut : html.mk (JS présent et mouvement permis, posé
   dans la tête) ne fait que fixer l'état de départ, .mk-in lance l'entrée.
   Sans JS, ou en mouvement réduit, la page est déjà à son état final.
   Tout calque décoratif est en pointer-events:none.
   ===================================================================== */

/* ---------- 0. UN SEUL LANGAGE : deux courbes, quatre durées, un pas ---------- */
:root{
  --mk-out:cubic-bezier(.16,1,.3,1);       /* tout ce qui arrive */
  --mk-inout:cubic-bezier(.28,0,.22,1);    /* tout ce qui balaie */
  --mk-t1:.28s;                            /* interface : un état change */
  --mk-t2:.7s;                             /* une ligne, un bloc qui arrive */
  --mk-t3:1.1s;                            /* une photo, un voile */
  --mk-t4:2.2s;                            /* balayages longs (scène, carte) */
  --mk-step:80ms;                          /* décalage entre frères */
  --mk-rise:22px;                          /* amplitude verticale unique */
  --mk-night:#16120d;                      /* voile charbon chaud */
  --mk-paper:#f4efe6;                      /* fond de #cartes */
  --mk-mapbg:#fdfbf9;                      /* fond réel de l'image de la carte */
}

/* ---------- 0b. SOCLE : sans JavaScript, rien n'est caché ----------
   site.css cache tout .reveal par défaut (40 blocs sur l'accueil, titres compris) :
   JS coupé, la page était vide. La tête pose la classe js avant le premier rendu ;
   sans elle, tout reste visible. */
html:not(.js) .reveal{opacity:1}

/* ---------- 1. HERO : les lumières montent (CSS seul, une fois au chargement) ---------- */
@media (prefers-reduced-motion:no-preference){
  @keyframes mkLift{from{opacity:0;transform:translateY(var(--mk-rise))}}
  @keyframes mkRise{from{transform:translateY(16px)}}
  @keyframes mkDolly{from{transform:scale(1.1)}}
  @keyframes mkDawn{from{opacity:.86}}
  @keyframes mkGlow{from{opacity:0}}
  .hero h1{animation:mkLift var(--mk-t3) var(--mk-out) .12s backwards}
  .hero-sub{animation:mkLift var(--mk-t3) var(--mk-out) .28s backwards}
  .hero-proof{animation:mkLift var(--mk-t3) var(--mk-out) .44s backwards}
  /* les boutons ne sont JAMAIS transparents : ils montent de 16 px, rien d'autre */
  .hero-cta,.hero .dispo,.hero-photo,.hero-triade{animation:mkRise var(--mk-t2) var(--mk-out) .2s backwards}
  .hero-vid,.hero-media{animation:mkDolly 2.4s var(--mk-out) backwards}
  .hero-veil::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--mk-night);opacity:0;
    animation:mkDawn 1.6s var(--mk-inout) .1s backwards}
  .hero-bg::before{animation:mkGlow 2.2s ease-out .2s backwards}
}

/* mouvement réduit : le hero d'origine (floatUp de site.css) ne bouge pas non plus */
@media (prefers-reduced-motion:reduce){
  .hero h1,.hero-cta,.hero-proof{animation:none}
}

/* ---------- 2. SIMULATEUR : la question glisse, la carte ne saute plus ---------- */
/* Chaque étape prend sa propre hauteur : plus de vide sous les questions courtes.
   La hauteur réservée (--mk-est-h) n'est plus imposée. */
.est-wiz:not(.est-fin) .estim2-form:has(.est-back:not([hidden])){min-height:0}   /* reserve a partir de l'etape 2 : l'etape 1 reste compacte */
/* scroll-behavior:smooth de site.css rend asynchrone le scrollTo(0) que ScrollTrigger fait pour mesurer :
   toutes les scenes etaient mesurees avec l'ancien scroll. Lenis et ScrollTrigger pilotent le defilement. */
html.mk-gsap{scroll-behavior:auto !important}
/* menu plein ecran : defile seul, ne chaine jamais vers la page */
.navmenu{overscroll-behavior:contain}
@media (prefers-reduced-motion:no-preference){
  @keyframes mkStepF{from{opacity:0;transform:translateX(14px)}}
  @keyframes mkStepB{from{opacity:0;transform:translateX(-14px)}}
  html.mk .est-wiz .ef-group:not([hidden]),
  html.mk .est-wiz .estim2-res:not([hidden]){animation:mkStepF var(--mk-t1) var(--mk-out) backwards}
  html.mk #estim[data-dir="b"] .ef-group:not([hidden]){animation-name:mkStepB}
}

/* ---------- 3 et 4. CLAIMS (la pièce se vide) et CARTES (galerie avant / après) ----------
   Repris par motion-story.css / motion-story.js : scènes pilotées par le défilement
   (section haute + enfant sticky, ScrollTrigger scrub sans pin). Plus de logique
   temporelle ici : ni .mk-in sur .sc, ni rideaux .rea::before. */

/* ---------- 5. VIDÉOS : sur écran tactile, un rail que le doigt fait glisser ---------- */
@media (pointer:coarse){
  .vids-marq{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-inline:19vw;scroll-padding-inline:19vw}
  .vids-marq::-webkit-scrollbar{display:none}
  .vids-track{transform:none!important}
  .vids-track .vid{width:62vw;max-width:260px;scroll-snap-align:center}
}

/* ---------- 6. AVIS : les cinq étoiles se remplissent ---------- */
@media (prefers-reduced-motion:no-preference){
  /* clip-path ne s'interpole qu'entre deux formes : l'état final est donc un inset(), jamais « none » */
  @keyframes mkWipe{from{clip-path:inset(-8px 100% -8px -8px)}}
  html.mk #temoignages .rev-stars{clip-path:inset(-8px -8px -8px -8px)}
  html.mk #temoignages .rev-card:not(.mk-in) .rev-stars{clip-path:inset(-8px 100% -8px -8px)}
  html.mk #temoignages .rev-card.mk-in .rev-stars{animation:mkWipe var(--mk-t3) var(--mk-out) calc(var(--i,0) * var(--mk-step) * 2) backwards}
}

/* ---------- 7. GARANTIES : le tampon se pose sur le certificat ---------- */
@media (prefers-reduced-motion:no-preference){
  @keyframes mkStamp{
    0%{opacity:0;transform:scale(1.9) rotate(-18deg)}
    60%{opacity:1;transform:scale(.94) rotate(-9deg)}
    100%{opacity:.9;transform:scale(1) rotate(-9deg)}}
  html.mk .gb-cert:not(.mk-in) .gb-stamp{opacity:0}
  html.mk .gb-cert.mk-in .gb-stamp{animation:mkStamp .6s var(--mk-out) .5s backwards}
}

/* ---------- 8. ZONES : la lumière part de l'Eure ---------- */
/* le voile est un grand disque troué, agrandi par transform : aucun repeint */
html.mk .map-wrap::after{content:"";position:absolute;z-index:2;pointer-events:none;
  left:65.5%;top:61.5%;width:300%;aspect-ratio:1;margin:-150% 0 0 -150%;
  background:radial-gradient(circle closest-side,transparent 0,transparent 4%,rgba(253,251,249,.93) 9%);
  transform:scale(14);transform-origin:50% 50%;visibility:hidden}
html.mk .map-wrap:not(.mk-in)::after{transform:scale(1);visibility:visible}
html.mk .map-wrap:not(.mk-in) .map-pt,html.mk .map-wrap:not(.mk-in) .map-halo{opacity:0}
@media (prefers-reduced-motion:no-preference){
  @keyframes mkIris{from{transform:scale(1);visibility:visible}to{transform:scale(14);visibility:hidden}}
  html.mk .map-wrap.mk-in::after{animation:mkIris var(--mk-t4) var(--mk-inout) both}
  html.mk .map-wrap.mk-in .map-pt{animation:mapPin .55s var(--mk-out) 1s backwards}
  html.mk .map-wrap.mk-in .map-halo{animation:mapHalo .8s ease 1s backwards}
}

/* ---------- 9. FINAL : la pièce vide en écho, puis le numéro en affiche ---------- */
.fin-room{position:absolute;inset:0 0 auto 0;height:68%;z-index:0;pointer-events:none;overflow:hidden;clip-path:inset(0)}
.fin-room img{width:100%;height:100%;object-fit:cover;display:block;opacity:.4;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.3) 0,#000 32%,#000 46%,transparent 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,.3) 0,#000 32%,#000 46%,transparent 100%)}
.fin-room::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 50% 40%,rgba(34,48,42,.66),rgba(34,48,42,.9))}
.final-tel{display:block;width:fit-content;max-width:100%;margin:26px auto 0;font-family:var(--serif);font-weight:500;
  font-size:clamp(2.1rem,10.4vw,4.6rem);line-height:1.05;letter-spacing:-.02em;white-space:nowrap;
  font-variant-numeric:lining-nums;color:var(--green-bright);padding:6px 4px;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent}
.final-tel .p{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.06em;margin-block:-.06em}
.final-tel .p>span{display:inline-block}
.final .final-cta .num-desk{display:none}
.final-tel:active{scale:.985;transition:scale 90ms var(--mk-out)}
@media (prefers-reduced-motion:no-preference){
  @keyframes mkDoors{from{clip-path:inset(0 50% 0 50%)}}
  @keyframes mkPair{from{transform:translateY(108%)}}
  html.mk .final:not(.mk-in) .fin-room{clip-path:inset(0 50% 0 50%)}
  html.mk .final.mk-in .fin-room{animation:mkDoors 1.5s var(--mk-out) backwards}
  html.mk .final:not(.mk-in) .final-tel .p>span{transform:translateY(108%)}
  html.mk .final.mk-in .final-tel .p>span{animation:mkPair var(--mk-t2) var(--mk-out) calc(.5s + var(--k,0) * var(--mk-step)) backwards}
}
.final-tel .p:nth-child(2) span{--k:1}.final-tel .p:nth-child(3) span{--k:2}
.final-tel .p:nth-child(4) span{--k:3}.final-tel .p:nth-child(5) span{--k:4}

/* ---------- 10. FINITIONS ---------- */
/* a. FAQ : la réponse s'ouvre et se ferme en douceur (repli : instantané) */
@supports selector(::details-content){
  #faq details::details-content{display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .38s var(--mk-out),content-visibility .38s allow-discrete}
  #faq details[open]::details-content{grid-template-rows:1fr}
  #faq details>p{min-height:0;overflow:hidden;animation:none!important;padding-bottom:0}
  #faq details>p::after{content:"";display:block;height:28px}
}
/* b. Boutons : aucun :hover sur écran tactile (un survol ne doit jamais avaler le premier tap),
      puis retour au doigt immédiat (cet ordre compte : :active doit passer après) */
@media (hover:none),(pointer:coarse){
  .btn:hover{transform:none}
  a[href^="tel:"].btn-green:hover::after,.final .btn-green:hover::after{animation:none}
  .fab-wa:hover,.fab-call:hover{transform:none}
}
.btn:active,.fab-call:active,.fab-wa:active{transform:scale(.982);transition-duration:90ms}
@media (prefers-reduced-motion:reduce){
  .btn:active,.fab-call:active,.fab-wa:active{transform:none}
}

/* ================= Equipe 04/10 : hero en 3 actions + tiroir de rappel ================= */
.hero-cb{background:none;border:0;cursor:pointer;font:inherit;color:inherit;padding:0}
.cb[hidden]{display:none}
.cb{position:fixed;inset:0;z-index:99999;display:flex;align-items:flex-end;justify-content:center}
.cb-back{position:absolute;inset:0;background:rgba(14,12,9,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.cb-card{position:relative;width:min(520px,100%);max-height:92svh;overflow:auto;background:#fbf8f1;color:#2a241b;border-radius:22px 22px 0 0;padding:26px 22px calc(24px + env(safe-area-inset-bottom,0px));box-shadow:0 -24px 60px -20px rgba(0,0,0,.5);overscroll-behavior:contain}
.cb-x{position:absolute;top:8px;right:10px;width:44px;height:44px;border:0;background:none;font-size:30px;line-height:1;cursor:pointer;color:#6a5f4e}
.cb-card h2{font-family:var(--serif,'Playfair Display',Georgia,serif);font-weight:500;font-size:1.5rem;margin:2px 40px 6px 0;line-height:1.2;color:#1f1a12}
.cb-sub{margin:0 0 16px;color:#6a5f4e;line-height:1.5}
.cb-form input[type=text],.cb-form input[type=tel],.cb-form select{width:100%;min-height:52px;padding:0 14px;border:1px solid rgba(138,111,70,.38);border-radius:14px;font:inherit;font-size:16px;background:#fff;margin-bottom:12px;color:#2a241b}
.cb-form input[aria-invalid="true"]{border-color:#b3472f}
.cb-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cb-form .btn{width:100%;justify-content:center;margin-top:4px}
.cb-form .er-lead-n{margin:12px 0 0;font-size:.88rem;color:#6a5f4e;text-align:center}
.cb-form .er-lead-n.err{color:#b3472f}
.cb-form .er-lead-h{font-family:var(--serif,'Playfair Display',Georgia,serif);font-size:1.3rem;color:#1f1a12}
html.cb-open{overflow:hidden}
@media (min-width:700px){.cb{align-items:center}.cb-card{border-radius:22px;padding:30px 30px 28px}}
@media (prefers-reduced-motion:no-preference){.cb-card{animation:cbUp .38s cubic-bezier(.16,1,.3,1)}@keyframes cbUp{from{transform:translateY(26px);opacity:0}}}
form.er-lead.cb-form input[type="text"],form.er-lead.cb-form input[type="tel"],form.er-lead.cb-form select{height:54px;min-height:54px;padding:0 16px;font-size:16px;line-height:1.2;color:#2a241b;background-color:#fff;border:1px solid rgba(138,111,70,.38);border-radius:14px;box-shadow:none}
form.er-lead.cb-form input::placeholder{color:#8b7f6a;opacity:1}
form.er-lead.cb-form select{-webkit-appearance:menulist-button;appearance:auto}
a.hero-proof{text-decoration:none;color:inherit;cursor:pointer}
a.hero-proof:hover{border-color:rgba(255,255,255,.42)}