/* ==============================================================
   HEAVEN HOME — Signature v5
   Police Cormorant Garamond + 6 animations tirées du métier :
   1. Cote au millimètre (sous les titres de section)
   2. Du plan à la réalité (photos de réalisations)
   3. Ouverture des façades (photo principale de chaque galerie)
   4. Reflet sur laque cuivre (boutons cuivre)
   5. Tiroirs en cascade (cartes services, prestations, atouts)
   6. Compteur sur la règle (chiffres de l'accueil)
   Tout s'arrête si le visiteur a demandé « moins d'animations ».
============================================================== */
:root{
  --f-display: "Cormorant Garamond", Georgia, serif;
  --f-body: "Outfit", "Karla", "Segoe UI", sans-serif;
  --ressort: cubic-bezier(.34,1.45,.64,1);
}
h1,h2,h3,.logo,.stat b,.galerie figcaption b{ font-weight:600; }
.hero h1{ font-size:clamp(2.7rem, 6.9vw, 5.1rem); line-height:1.02; }
h2{ letter-spacing:0; }
em.or{ font-weight:500; }

/* ---------- 1. Cote au millimètre ---------- */
.cote-hh{ display:block; position:relative; height:22px; width:min(320px, 70%); margin:.5rem 0 1rem; }
.cote-hh i{ position:absolute; background:var(--laiton); }
.cote-hh .t{ left:0; right:0; top:10px; height:1px; transform-origin:center; }
.cote-hh .b{ top:3px; width:1px; height:15px; }
.cote-hh .b.g{ left:0; } .cote-hh .b.d{ right:0; }
.cote-hh em{ position:absolute; left:50%; top:-2px; transform:translateX(-50%); padding:0 .6rem;
  font:600 .72rem/1.6 ui-monospace, Menlo, monospace; font-style:normal; letter-spacing:.06em; color:var(--laiton); background:inherit; }
section .cote-hh em{ background:var(--noir); }
.light .cote-hh em{ background:var(--ivoire); }
.light-2 .cote-hh em{ background:var(--ivoire-2); }
.cta-band .cote-hh{ margin-inline:auto; }
.cta-band .cote-hh em{ background:#1D1612; }
.reveal.in .cote-hh .t{ animation:hh-trait 1.1s var(--ease) both .3s; }
.reveal.in .cote-hh .b{ animation:hh-apparait .3s both 1.2s; }
.reveal.in .cote-hh em{ animation:hh-apparait .4s both 1.35s; }
@keyframes hh-trait{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes hh-apparait{ from{ opacity:0; } to{ opacity:1; } }

/* ---------- 2. Du plan à la réalité ---------- */
.galerie figure .plan-hh{ position:absolute; inset:0; z-index:2; pointer-events:none; width:100%; height:100%; opacity:0; }
.galerie figure .plan-hh *{ fill:none; stroke:var(--laiton-clair); stroke-width:1.2; vector-effect:non-scaling-stroke; stroke-dasharray:1600; stroke-dashoffset:1600; }
.galerie.in figure.plan .plan-hh{ animation:hh-plan-voile 2.6s var(--ease) both; animation-delay:var(--d,0s); }
.galerie.in figure.plan .plan-hh *{ animation:hh-dessin 1.3s var(--ease) both; animation-delay:var(--d,0s); }
.galerie.in figure.plan img.photo-realisation{ animation:hh-developpe 1.4s var(--ease) backwards; animation-delay:calc(var(--d,0s) + 1s); }
@keyframes hh-dessin{ to{ stroke-dashoffset:0; } }
@keyframes hh-plan-voile{ 0%{opacity:1} 60%{opacity:1} 100%{opacity:0} }
@keyframes hh-developpe{ from{ filter:grayscale(1) brightness(.3) contrast(1.4); } to{ filter:none; } }

/* ---------- 3. Ouverture des façades ---------- */
.galerie figure.facade-hh{ perspective:1200px; }
.facade-hh .porte-hh{ position:absolute; top:0; bottom:0; width:50%; z-index:3; pointer-events:none;
  background:linear-gradient(135deg, #3B2C22, #261C15); border:1px solid #4A3A2E;
  transform-origin:left center; transform:rotateY(-104deg); backface-visibility:hidden; }
.facade-hh .porte-hh::after{ content:""; position:absolute; top:46%; width:4px; height:46px; border-radius:2px; background:var(--laiton); }
.facade-hh .porte-hh.g{ left:0; } .facade-hh .porte-hh.g::after{ right:14px; }
.facade-hh .porte-hh.d{ right:0; transform-origin:right center; transform:rotateY(104deg); }
.facade-hh .porte-hh.d::after{ left:14px; }
.galerie.in .facade-hh .porte-hh.g{ animation:hh-ouvre-g 1.6s var(--ease) both .2s; }
.galerie.in .facade-hh .porte-hh.d{ animation:hh-ouvre-d 1.6s var(--ease) both .2s; }
@keyframes hh-ouvre-g{ 0%,30%{ transform:rotateY(0); } 100%{ transform:rotateY(-104deg); visibility:hidden; } }
@keyframes hh-ouvre-d{ 0%,30%{ transform:rotateY(0); } 100%{ transform:rotateY(104deg); visibility:hidden; } }

/* ---------- 4. Reflet sur laque cuivre ---------- */
.btn-or{ position:relative; overflow:hidden; isolation:isolate; }
.btn-or::before{ content:""; position:absolute; top:-30%; bottom:-30%; left:-70%; width:45%; z-index:-1; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,240,222,.7), transparent); transform:skewX(-18deg); }
.btn-or.reflet::before{ animation:hh-reflet 1.2s var(--ease); }
.btn-or:hover::before{ animation:hh-reflet 1s var(--ease); }
@keyframes hh-reflet{ to{ left:135%; } }

/* ---------- 5. Tiroirs en cascade ---------- */
.grille-services.stagger > *, .tarifs.stagger > *, .atouts.stagger > *{
  transform:translateX(-46px); transition:opacity .6s var(--ease), transform .9s var(--ressort); }
.grille-services.stagger.in > *, .tarifs.stagger.in > *, .atouts.stagger.in > *{ transform:none; }

/* ---------- 6. Compteur sur la règle ---------- */
.hero .regle .curseur-hh{ position:absolute; bottom:0; left:0; width:2px; height:22px; background:var(--laiton-clair);
  box-shadow:0 0 10px rgba(229,155,102,.7); }

@media (prefers-reduced-motion:reduce){
  .cote-hh *, .plan-hh, .plan-hh *, .galerie img, .porte-hh, .btn-or::before{ animation:none !important; }
  .plan-hh, .porte-hh{ display:none; }
}