/* ============================================================
   AUREA : villa-raccourcis.css
   Raccourcis de chaque villa (scripts/villa-raccourcis.js).
   - Ligne de trois liens texte dans la hero, sous .vh-sub (meme famille que
     .acq-link de la page acquisition : lien texte a filet anime, pas de bouton).
     acquisition.css n'est pas charge sur les pages villa : la famille est donc
     reproduite ici, en version claire pour la hero sombre.
   - Les memes trois raccourcis loges DANS le header du site (une seule bande en
     haut, plus de barre separee) : logo a gauche, raccourcis au centre, navigation
     a droite. Meme famille typographique que .hdr-nav a ; distingues de la
     navigation par leur place et un filet vertical discret, sans point ni puce.
     Sous ~1280 px la navigation passe dans le menu (.hdr-toggle) et les raccourcis
     restent visibles ; sous 1024 px les raccourcis passent en libelles courts.
   ============================================================ */

/* ---------- 1a. Ligne de raccourcis dans la hero ---------- */
.vh-links{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(14px,2vw,28px);
  margin-top:clamp(20px,3vh,30px);
}
.vh-link{
  position:relative; font-family:var(--font-body); font-weight:400;
  font-size:.82rem; letter-spacing:.04em; color:var(--blanc-pur);
  text-decoration:none; background:none; border:0; padding:0 0 4px;
  cursor:pointer; opacity:.92;
  transition:opacity .3s var(--ease-cine), color .3s var(--ease-cine);
}
.vh-link::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--sable); opacity:.8; transition:right .5s var(--ease-cine);
}
.vh-link:hover, .vh-link:focus-visible{ opacity:1; color:var(--blanc-pur); }
.vh-link:hover::after, .vh-link:focus-visible::after{ right:0; }
.vh-link:focus-visible{ outline:2px solid var(--sable); outline-offset:3px; border-radius:2px; }

/* ---------- 1b. Raccourcis dans le header ---------- */
/* Injectes entre le logo et la navigation. Occupent le centre de la bande. */
.hdr-raccourcis{
  display:flex; align-items:center; justify-content:center;
  flex:1 1 auto; min-width:0; gap:clamp(16px,2vw,32px);
}
.hdr-rc{
  position:relative; font-family:var(--font-body); font-weight:400;
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft);
  white-space:nowrap; background:none; border:0; padding:0; cursor:pointer; text-decoration:none;
  transition:color .3s var(--ease-cine);
}
.hdr-rc::after{
  content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1px;
  background:var(--bronze); transition:right .4s var(--ease-cine);
}
.hdr-rc:hover, .hdr-rc:focus-visible{ color:var(--bronze); }
.hdr-rc:hover::after, .hdr-rc:focus-visible::after{ right:0; }
.hdr-rc:focus-visible{ outline:2px solid var(--bronze); outline-offset:3px; border-radius:2px; }
.hdr-rc .hdr-rc-short{ display:none; }
.hdr-raccourcis.is-inert{ pointer-events:none; opacity:.45; }

/* header villa : version compacte (~52 px), pose une fois la hero passee */
.site-header.has-raccourcis .hdr-inner{ height:52px; }
.site-header.has-raccourcis.solid .brand img{ height:22px; }

/* Filet vertical discret entre les raccourcis et la navigation (desktop large) */
@media (min-width:1280px){
  .site-header.has-raccourcis .hdr-nav::before{
    content:""; flex:0 0 auto; align-self:center; width:1px; height:16px;
    background:rgba(152,118,71,.30); margin-right:clamp(16px,2vw,28px);
  }
}

/* Le titre du plan ne doit pas rester sous le header lors d'un saut d'ancre natif
   (repli si le JS ne prend pas la main) : hauteur du seul header compact + marge. */
#plan{ scroll-margin-top:72px; }

/* ---------- 1d. Sous ~1280 px : la navigation passe dans le menu ---------- */
@media (max-width:1279px){
  .site-header.has-raccourcis .hdr-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; margin-right:-8px; background:transparent; border:0; cursor:pointer; color:var(--encre);
  }
  .site-header.has-raccourcis .hdr-toggle span{
    position:relative; width:20px; height:1px; background:currentColor; display:block;
    transition:transform .35s var(--ease-cine), opacity .2s;
  }
  .site-header.has-raccourcis .hdr-toggle span::before,
  .site-header.has-raccourcis .hdr-toggle span::after{
    content:""; position:absolute; left:0; width:20px; height:1px; background:currentColor;
    transition:transform .35s var(--ease-cine);
  }
  .site-header.has-raccourcis .hdr-toggle span::before{ top:-6px; }
  .site-header.has-raccourcis .hdr-toggle span::after{ top:6px; }
  .site-header.has-raccourcis.nav-open .hdr-toggle span{ background:transparent; }
  .site-header.has-raccourcis.nav-open .hdr-toggle span::before{ transform:translateY(6px) rotate(45deg); }
  .site-header.has-raccourcis.nav-open .hdr-toggle span::after{ transform:translateY(-6px) rotate(-45deg); }

  .site-header.has-raccourcis .hdr-nav{
    position:fixed; top:52px; left:0; right:0; flex-direction:column; align-items:flex-start;
    gap:0; padding:8px clamp(18px,6vw,32px) 22px;
    background:rgba(253,251,247,.96); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    opacity:0; visibility:hidden; transform:translateY(-10px); pointer-events:none;
    transition:opacity .35s var(--ease-cine), transform .35s var(--ease-cine), visibility .35s;
  }
  .site-header.has-raccourcis.nav-open .hdr-nav{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
  .site-header.has-raccourcis .hdr-nav a{
    font-size:.72rem; letter-spacing:.2em; padding:15px 0; width:100%; border-bottom:1px solid var(--line);
  }
  .site-header.has-raccourcis .hdr-nav a::after{ display:none; }
  .site-header.has-raccourcis .hdr-nav .hdr-cta{ border:0; border-radius:0; padding:15px 0; color:var(--bronze); }
  .site-header.has-raccourcis .hdr-nav .hdr-cta:hover{ background:transparent; color:var(--bronze); }
  .site-header.has-raccourcis .hdr-nav a:last-child{ border-bottom:0; }
}

/* ---------- 1d (suite). Sous 1024 px : libelles courts, meme bande ---------- */
@media (max-width:1023px){
  .site-header.has-raccourcis .hdr-rc .hdr-rc-full{ display:none; }
  .site-header.has-raccourcis .hdr-rc .hdr-rc-short{ display:inline; }
  .site-header.has-raccourcis .hdr-raccourcis{ gap:clamp(10px,3.5vw,20px); }
  .site-header.has-raccourcis .hdr-rc{ font-size:.56rem; letter-spacing:.12em; }
  #plan{ scroll-margin-top:64px; }
}
@media (max-width:560px){
  .site-header.has-raccourcis .hdr-raccourcis{ gap:clamp(8px,3vw,14px); }
  .site-header.has-raccourcis .hdr-rc{ font-size:.52rem; letter-spacing:.05em; }
  .site-header.has-raccourcis .brand img{ height:20px; }
}

@media (prefers-reduced-motion:reduce){
  .hdr-rc, .hdr-rc::after{ transition:none; }
}