/* En-tête, deuxième version : une barre du haut (réseaux, téléphone, courriel), le logo collé à gauche, un menu réduit.
   Chargée en dernier, sur l'accueil comme sur les pages intérieures. Contient aussi la carte d'avis de la bannière. */
:root { --nav-haut: 40px; --nav-bas: 76px; --bord: clamp(18px, 2.2vw, 40px); }

.nav--v2 { background: rgba(10, 10, 10, .82); border-bottom: 1px solid rgba(255, 255, 255, .09); }
.nav--v2.is-over { background: linear-gradient(to bottom, rgba(10, 10, 10, .62), rgba(10, 10, 10, .18)); border-bottom-color: rgba(255, 255, 255, .1); }
.nav__haut { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--nav-haut); padding: 0 var(--bord); border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 13px; color: rgba(255, 255, 255, .82); transition: height .4s var(--sortie), opacity .3s ease; overflow: hidden; }
.nav__reseaux { display: flex; gap: 8px; }
.nav__reseaux a { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); color: #fff; font-size: 14px; text-decoration: none; transition: background .25s var(--sortie), border-color .25s, transform .16s ease-out; }
.nav__reseaux a:active { transform: scale(.92); }
.nav__coord { display: flex; gap: clamp(16px, 2vw, 30px); }
.nav__coord a { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; letter-spacing: .01em; transition: color .2s; }
.nav__coord i { font-size: 15px; color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .nav__reseaux a:hover { background: var(--red); border-color: var(--red); }
  .nav__coord a:hover { color: #fff; }
}
/* une fois la page descendue, la barre du haut se replie : il reste le logo et le menu */
.nav--v2.a-defile .nav__haut { height: 0; opacity: 0; border-bottom-width: 0; }

.nav--v2 .nav__in { max-width: none; width: 100%; height: var(--nav-bas); margin: 0; padding: 0 var(--bord); display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); }
.nav--v2 .logo { margin-right: auto; }
.nav--v2 .logo__img { height: 44px; }
.nav--v2 .nav__links { gap: clamp(18px, 2vw, 34px); font-size: 12.5px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; }
.nav--v2 .nav__right { gap: 16px; }
.nav--v2 .btn--sm { padding: 13px 22px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* Les pages intérieures commencent sous l'en-tête complet */
.pg { padding-top: calc(var(--nav-haut) + var(--nav-bas)); }
html { scroll-padding-top: calc(var(--nav-bas) + 20px); }

/* ---------- La carte d'avis Google sur la bannière ---------- */
.entree__avis { position: absolute; z-index: 3; right: max(24px, calc((100vw - 1200px) / 2 + 24px)); bottom: clamp(150px, 24vh, 250px); width: min(360px, 30vw); opacity: 0; transform: translateY(18px); transition: opacity .8s var(--sortie) .9s, transform 1s var(--sortie) .9s; }
html.fx-pret .entree__avis.est-prete, html:not(.fx) .entree__avis.est-prete { opacity: 1; transform: none; }
.avisc { position: relative; padding: 22px 24px 20px; border-radius: 16px; background: rgba(16, 16, 16, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: #fff; }
.avisc__etoiles { display: flex; gap: 3px; font-size: 14px; color: #ffffff; }
.avisc__corps { display: grid; margin-top: 12px; }
.avisc__corps > div { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .7s var(--sortie); pointer-events: none; }
.avisc__corps > div.est-la { opacity: 1; transform: none; pointer-events: auto; }
.avisc blockquote { margin: 0; font-size: 15.5px; line-height: 1.5; font-style: italic; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.avisc__qui { margin-top: 12px; font-size: 13.5px; color: rgba(255, 255, 255, .82); }
.avisc__temps { position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.avisc__temps i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.avisc__temps i.court { animation: avisc-temps var(--duree, 5500ms) linear forwards; }
@keyframes avisc-temps { to { transform: scaleX(1); } }
.avisc__note { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 16px; border-radius: 999px; background: var(--red); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; transition: background .2s, transform .16s ease-out; }
.avisc__note:active { transform: scale(.97); }
.avisc__note i { font-size: 13px; }
@media (hover: hover) and (pointer: fine) { .avisc__note[href]:hover { background: var(--red-hi); } }
.avisc__exemple { position: absolute; top: 18px; right: 18px; padding: 4px 9px; border-radius: 999px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.entree__actes { top: 38%; }

@media (max-width: 1180px) {
  .nav--v2 .nav__links { display: none; }
  .nav--v2 .burger { display: block; }
  /* sur écran moyen et sur téléphone : seulement la note, en haut, et seulement devant la porte */
  .entree__avis { left: max(20px, calc((100vw - 1200px) / 2 + 24px)); right: auto; bottom: auto; top: calc(var(--nav-haut) + var(--nav-bas) + 18px); width: auto; }
  .entree__avis .avisc { display: none; }
  .entree__avis .avisc__note { margin-top: 0; }
  .entree.est-partie .entree__avis { opacity: 0 !important; pointer-events: none; transition-delay: 0s; }
}
@media (max-width: 767px) {
  :root { --nav-haut: 0px; --nav-bas: 64px; }
  .nav__haut { display: none; }
  .nav--v2 .logo__img { height: 32px; }
  .nav--v2 .btn--sm { display: none; }
  .entree__avis { left: 20px; }
}
@media (prefers-reduced-motion: reduce) { .entree__avis { opacity: 1; transform: none; transition: none; } .avisc__temps { display: none; } }

/* Retouches après essai : la carte d'avis se tient en haut à droite, hors du chemin des annotations du chantier ;
   les trois temps de la visite descendent en bas à droite. */
@media (min-width: 1181px) {
  .entree__avis { top: calc(var(--nav-haut) + var(--nav-bas) + 30px); bottom: auto; }
  .entree__actes { top: auto; bottom: clamp(150px, 24vh, 250px); transform: none; }
}
@media (min-width: 1181px) and (max-height: 760px) {
  .entree__avis .avisc { display: none; }
  .entree__avis .avisc__note { margin-top: 0; }
}