/* ============================================================================
   Dugos — En-tête mobile partagé (logo à gauche + menu plein écran)
   ----------------------------------------------------------------------------
   Chargé sur toutes les pages APRÈS leur style.css : ne modifie que
   l'affichage ≤ 768 px et la scrollbar custom sur tactile. Desktop inchangé.
   ========================================================================== */

/* Bouton ☰ — masqué sur desktop, injecté par site-nav.js dans .nav */
.nav__toggle {
  display: none;
  position: relative;
  z-index: 3;
  width: 44px;
  height: 44px;
  margin: -8px -10px -8px 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav__toggle span {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background: #0a0a0a;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.nav__toggle span:nth-child(1) { top: 16px; }
.nav__toggle span:nth-child(2) { top: 22px; }
.nav__toggle span:nth-child(3) { top: 28px; }
.nav--open .nav__toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav--open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav--open .nav__toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Éléments propres au menu mobile (injectés par site-nav.js) : masqués sur desktop */
.nav__menu-bg { display: none; }
.nav__label,
.nav__label-inner { display: inline; }

/* Scrollbar custom : inutile dès qu'on est sur un pointeur tactile */
@media (hover: none) and (pointer: coarse) {
  .c-scrollbar { display: none !important; }
}

/* Pied de page : réseaux + liens un peu plus bas (moins de vide sous la rangée) */
.footer { padding-bottom: 28px; }

/* Crédit « création du site » — discret, tout en bas du pied de page (toutes tailles) */
.footer__credit {
  margin: 14px 48px 0;
  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  text-align: right;
}

@media (max-width: 768px) {
  /* --- En-tête : logo à gauche, bouton à droite, une seule ligne --- */
  .nav {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    background: #ffffff !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none !important;
  }
  .nav__logo { position: relative; z-index: 3; }
  .nav__logo-img { filter: none !important; }   /* logo foncé sur fond clair */

  .nav__toggle { display: block; }

  /* --- Menu plein écran « chambre noire » ---------------------------------
     Empilement dans .nav : fond photo (1) < liens (2) < logo et ☰ (3). */

  /* En-tête menu ouvert : plus de bandeau blanc, logo et ☰ en blanc */
  .nav.nav--open {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
  .nav--open .nav__logo-img { filter: invert(1) !important; transition: filter 0.3s ease; }
  .nav--open .nav__toggle span { background: #ffffff; }

  /* Fond : noir + photo N&B révélée en fondu avec un lent zoom arrière, grain */
  .nav__menu-bg {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1;
    background: #0b0b0b;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease, visibility 0s linear 0.45s;
  }
  .nav--open .nav__menu-bg {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.45s ease;
  }
  .nav__menu-photo {
    position: absolute;
    inset: -4%;
    background: center / cover no-repeat;
    filter: grayscale(1) contrast(1.05);
    opacity: 0;
    transform: scale(1.18);
  }
  .nav__menu-photo.is-active {
    opacity: 0.42;
    transition: opacity 1.2s ease;
    animation: navMenuZoom 10s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  @keyframes navMenuZoom {
    from { transform: scale(1.18); }
    to   { transform: scale(1); }
  }
  /* Voile dégradé (lisibilité des liens et du pied) + grain argentique */
  .nav__menu-bg::before,
  .nav__menu-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .nav__menu-bg::before {
    z-index: 1;
    background:
      linear-gradient(180deg, rgba(11,11,11,0.75) 0%, rgba(11,11,11,0.15) 30%,
                      rgba(11,11,11,0.25) 62%, rgba(11,11,11,0.9) 100%);
  }
  .nav__menu-bg::after {
    z-index: 2;
    opacity: 0.09;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* Liens : grands, alignés à gauche */
  .nav__links {
    position: fixed;
    inset: 0;
    z-index: 2;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    margin: 0;
    padding: 0 32px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px !important;
    background: transparent;
    list-style: none;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 0.45s;
  }
  .nav--open .nav__links {
    visibility: visible;
    pointer-events: auto;
    transition: none;
  }

  .nav__links li {
    width: 100%;
    text-align: left;
    list-style: none;
  }

  .nav__link {
    display: flex !important;
    align-items: baseline;
    gap: 16px;
    padding: 6px 0 !important;
    font-family: var(--font-serif, "DM Serif Display", Georgia, serif) !important;
    font-size: clamp(40px, 16vw, 72px) !important;
    font-weight: 400 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    color: #ffffff !important;
    -webkit-tap-highlight-color: transparent;
  }
  .nav__link::after { display: none !important; }   /* pas de soulignement hover */

  /* Libellé révélé par le bas, derrière un masque */
  .nav__label { display: inline-block; overflow: hidden; padding: 0 0.06em 0.18em 0; margin-bottom: -0.08em; }
  .nav__label-inner {
    display: inline-block;
    transform: translateY(105%);
    transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nav--open .nav__label-inner { transform: none; }
  .nav--open .nav__links li:nth-child(1) .nav__label-inner { transition-delay: 0.12s; }
  .nav--open .nav__links li:nth-child(2) .nav__label-inner { transition-delay: 0.2s; }
  .nav--open .nav__links li:nth-child(3) .nav__label-inner { transition-delay: 0.28s; }
  .nav--open .nav__links li:nth-child(4) .nav__label-inner { transition-delay: 0.36s; }

  /* Page courante : plus grande et pleinement blanche ; les autres en retrait */
  .nav__link:not([aria-current="page"]) .nav__label-inner { opacity: 0.62; }
  .nav__link[aria-current="page"] { font-size: clamp(50px, 20vw, 90px) !important; }
  .nav__link:active .nav__label-inner { opacity: 0.6; }

  @media (prefers-reduced-motion: reduce) {
    .nav__menu-photo.is-active { animation: none; transform: none; }
    .nav__label-inner { transition: none; }
  }

  /* L'en-tête escamotable ne doit pas emporter un menu ouvert */
  .nav.nav--open {
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .c-scrollbar { display: none !important; }

  /* --- En-tête transparent sur photo sombre (page Contact) ---
     Fond toujours transparent (aucun bandeau blanc). En haut de page et menu
     fermé : logo + barres du ☰ en blanc (sur la photo sombre). Dès qu'on
     défile ou qu'on ouvre le menu plein écran : logo + ☰ repassent en foncé. */
  .nav.nav--transparent {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
  .nav--transparent:not(.scrolled):not(.nav--open) .nav__logo-img {
    filter: invert(1) !important;
  }
  .nav--transparent:not(.scrolled):not(.nav--open) .nav__toggle span {
    background: #ffffff;
  }

  /* --- Pied de page compact et dans les marges --- */
  .footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 26px !important;
  }
  .footer__main {
    align-self: stretch !important;
    width: 100%;
    margin-right: 0 !important;
    text-align: left;
  }
  .footer__logo {
    font-size: clamp(36px, 12vw, 54px) !important;
    letter-spacing: 0.02em !important;
  }
  .footer__phone {
    font-size: 13px !important;
    letter-spacing: 0.12em !important;
    text-align: left !important;
    margin-top: 8px !important;
  }
  .footer__bottom {
    padding: 18px 0 0 !important;
    gap: 12px !important;
  }
  .footer__socials {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 14px !important;
  }
  .footer__social-link { font-size: 11px !important; }
  .footer__nav {
    justify-content: center;
    gap: 6px 12px !important;
  }
  .footer__nav-link {
    font-size: 10.5px !important;
    letter-spacing: 0.05em !important;
  }
  .footer__credit {
    margin: 10px 0 0 !important;
    text-align: center !important;
    font-size: 9.5px !important;
    letter-spacing: 0.04em !important;
  }
}

/* ============================================================================
   Sélecteur de langue FR / EN (dans .nav__links, dernier élément)
   ========================================================================== */
.nav__lang {
  display: flex;
  align-items: center;
  gap: 7px;
  list-style: none;
  font-family: var(--font-sans, 'IBM Plex Sans', system-ui, sans-serif);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: inherit;
}
.nav__lang-link {
  color: inherit;
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 0.2s;
}
a.nav__lang-link:hover { opacity: 1; }
.nav__lang-link[aria-current="true"] { opacity: 1; font-weight: 500; }
.nav__lang-sep { opacity: 0.3; }

/* Avis Google : conservés dans leur langue d'origine sur la version anglaise */
.testimonial__note {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #8a8a8a;
}

@media (max-width: 768px) {
  .nav__links li.nav__lang {
    width: auto;
    margin-top: 26px;
    gap: 12px;
    font-size: 15px;
    color: #ffffff;
  }
}

/* Sélecteur de langue : globe + code de l'autre langue (remplace l'ancien « FR / EN ») */
.nav__lang-link { display: inline-flex; align-items: center; gap: 7px; opacity: 1; }
.nav__lang-icon { flex: none; transition: transform 0.4s ease; }
a.nav__lang-link:hover .nav__lang-icon { transform: rotate(20deg); }
.nav__lang-sep { display: none; }
@media (max-width: 768px) {
  .nav__links li.nav__lang { font-size: 16px; }
  .nav__lang-icon { width: 20px; height: 20px; }
}