*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#fffaf6}

.reference-top{
  position:relative;
  width:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  line-height:0;
}

.reference-top > img{
  display:block;
  width:100%;
  height:auto;
  margin:0;
}

.hotspot{
  position:absolute;
  display:block;
  z-index:5;
  background:transparent;
}

/* Coordonnées proportionnelles au visuel validé */
.hs-home{left:36.6%;top:2.1%;width:4.4%;height:8.3%}
.hs-vendre{left:41.1%;top:2.1%;width:4.2%;height:8.3%}
.hs-acheter{left:45.5%;top:2.1%;width:4.8%;height:8.3%}
.hs-estimation{left:50.4%;top:2.1%;width:5.2%;height:8.3%}
.hs-biens{left:55.6%;top:2.1%;width:6.8%;height:8.3%}
.hs-communes{left:62.2%;top:2.1%;width:6.5%;height:8.3%}
.hs-conseils{left:68.5%;top:2.1%;width:4.6%;height:8.3%}
.hs-apropos{left:72.9%;top:2.1%;width:4.7%;height:8.3%}
.hs-contact{left:77.2%;top:2.1%;width:4.6%;height:8.3%}
.hs-phone{left:81.0%;top:1.2%;width:9.6%;height:8.4%}
.hs-cta{left:41.0%;top:46.4%;width:17.7%;height:8.2%}
.hs-panel{left:79.2%;top:18.7%;width:18.2%;height:48.8%}

.suite{
  min-height:120px;
  background:#fffaf6;
}

@media(max-width:800px){
  .reference-top{
    overflow-x:auto;
  }

  .reference-top > img{
    width:1200px;
    max-width:none;
  }

  .hotspot{
    display:none;
  }
}

/* =========================================================
   3 CARTES — VISUEL EXACT VALIDÉ
   ========================================================= */

.cards-reference{
  width:100%;
  padding:0 0 18px;
  background:#fff;
}

.cards-gold-rule{
  display:block;
  width:52px;
  height:2px;
  margin:0 auto 8px;
  background:#e77800;
}

.cards-reference-inner{
  position:relative;
  width:min(93.5%,1532px);
  margin:0 auto;
  line-height:0;
}

.cards-reference-inner > img{
  display:block;
  width:100%;
  height:auto;
}

.card-hotspot{
  position:absolute;
  top:0;
  height:100%;
  display:block;
  z-index:3;
  background:transparent;
}

.card-vendre{
  left:0;
  width:31.6%;
}

.card-acheter{
  left:33.6%;
  width:31.6%;
}

.card-conseil{
  left:67.3%;
  width:32.7%;
}

@media(max-width:800px){
  .cards-reference-inner{
    width:1200px;
    max-width:none;
  }

  .cards-reference{
    overflow-x:auto;
  }

  .card-hotspot{
    display:none;
  }
}


/* =========================================================
   BLOC CONSEILLÈRE — VISUEL VALIDÉ
   ========================================================= */

.bloc-conseillere-reference{
  width:100%;
  background:#f8efe6;
  padding:0 0 12px;
}

.bloc-conseillere-inner{
  width:min(100%, 2048px);
  margin:0 auto;
  line-height:0;
}

.bloc-conseillere-inner img{
  display:block;
  width:100%;
  height:auto;
}


/* =========================================================
   ZONE CLIQUABLE — DÉCOUVRIR MON ACCOMPAGNEMENT
   Aucun changement visuel.
   ========================================================= */

.bloc-conseillere-inner{
  position:relative;
}

.accompagnement-hotspot{
  position:absolute;

  /* position exacte du bouton dans le visuel validé */
  left:38.48%;
  top:68.47%;
  width:23.08%;
  height:18%;

  z-index:10;
  display:block;

  background:transparent;
  cursor:pointer;
}

.hotspot,
.card-hotspot{
  cursor:pointer;
}


/* =========================================================
   MENU INTERACTIF — SUPERPOSÉ AU VISUEL VALIDÉ
   ========================================================= */

.interactive-menu{
  position:absolute;
  z-index:50;

  /* Zone exacte du menu dans le visuel */
  top:0;
  left:35.3%;
  width:44.9%;
  height:10.7%;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:clamp(13px,1.25vw,25px);

  padding:0 1%;

  background:#fffdfb;

  line-height:normal;
}


.interactive-menu a{
  position:relative;

  display:flex;
  align-items:center;

  height:100%;

  color:#302a2e;

  text-decoration:none;

  font-family:
    "Avenir Next",
    Avenir,
    Arial,
    sans-serif;

  font-size:clamp(9px,.66vw,13px);

  font-weight:500;

  white-space:nowrap;

  transition:
    color .18s ease,
    transform .12s ease;
}


/* PAGE ACTIVE */

.interactive-menu a.active{
  color:#641451;
  font-weight:600;
}


.interactive-menu a.active::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:15%;

  height:2px;

  border-radius:3px;

  background:#e87900;
}


/* SURVOL */

.interactive-menu a:hover{
  color:#641451;
}


.interactive-menu a:not(.active):hover::after{
  content:"";

  position:absolute;

  left:15%;
  right:15%;
  bottom:15%;

  height:2px;

  border-radius:3px;

  background:#e87900;

  opacity:.65;
}


/* AU MOMENT DU CLIC */

.interactive-menu a:active{
  color:#e87900;
  transform:translateY(1px);
}


@media(max-width:900px){

  .interactive-menu{
    display:none;
  }

}