/* ==========================================================================
   Barre de navigation
   L'ancienne barre était restée dans l'ancien style : Playfair en capitales
   ultra-espacées à 13 px, exactement le tic que le reste de la page a quitté.
   Et « Prestations » n'était qu'une ancre vers la page d'accueil : les huit
   pages de métier n'existaient que dans le pied de page.

   Trois panneaux déroulants ouvrent maintenant l'ensemble du site. Celui des
   prestations est rangé en deux colonnes qui ne sont pas décoratives :
   à gauche ce qu'on nettoie, à droite comment on intervient. C'est la même
   distinction que fait le devis.
   ========================================================================== */

.hdr {
  --h-or: #8a6818;
  --h-or-clair: #c9a34a;
  --h-encre: #1c1408;
  --h-encre-mut: #4a3c1c;
  --h-encre-fnt: #6a6040;
  --h-creme: #faf7f0;
  --h-filet: rgba(100, 80, 20, 0.16);
  --h-filet-fort: rgba(100, 80, 20, 0.3);
  --h-ez: cubic-bezier(.4, 0, .2, 1);
}

/* Le panneau large se cale sur la barre, pas sur son déclencheur : il reste
   ainsi dans la page quelle que soit la position de l'onglet. */
.hdr-inner { position: relative; }

.nav-links { gap: 2px; }

.nav-item { position: relative; display: flex; align-items: center; }
.nav-item--large { position: static; }

/* ---- Les onglets --------------------------------------------------------- */

.hdr .nav-link,
.hdr .nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  font-family: var(--font-b);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--h-encre);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .25s var(--h-ez);
}

/* Filet doré sous l'onglet, déployé depuis la gauche : même signalétique que
   les liens du corps de page. */
.hdr .nav-link,
.hdr .nav-trigger { position: relative; }

.hdr .nav-link::after,
.hdr .nav-trigger::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 1px;
  background: var(--h-or);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s var(--h-ez);
}

.hdr .nav-link:hover,
.hdr .nav-trigger:hover,
.hdr .nav-link:focus-visible,
.hdr .nav-trigger:focus-visible { color: var(--h-or); }

.hdr .nav-link:hover::after,
.hdr .nav-trigger:hover::after,
.hdr .nav-link:focus-visible::after,
.hdr .nav-trigger:focus-visible::after,
.nav-item.ouvert .nav-trigger::after { transform: scaleX(1); }

.nav-item.ouvert .nav-trigger { color: var(--h-or); }

.nav-chev {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform .3s var(--h-ez);
}

.nav-item.ouvert .nav-chev { transform: rotate(180deg); }

/* ---- Les panneaux -------------------------------------------------------- */

.nav-panel {
  position: absolute;
  top: 100%;
  z-index: 40;
  /* La marge est de la marge intérieure, pas extérieure : elle fait un pont
     transparent sous l'onglet, sinon le survol se coupe entre les deux. */
  padding-top: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -8px, 0);
  transition: opacity .24s var(--h-ez), transform .24s var(--h-ez),
              visibility 0s linear .24s;
}

.nav-item.ouvert .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.np-inner {
  background: var(--h-creme);
  border: 1px solid var(--h-filet);
  border-radius: 2px;
  box-shadow: 0 24px 60px -24px rgba(28, 20, 8, 0.28);
}

/* Panneau large : trois colonnes, calé sur la largeur de la barre. */
.nav-item--large .nav-panel { left: 0; right: 0; }

.nav-item--large .np-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.82fr);
  width: min(920px, 100%);
  margin-inline: auto;
}

.np-col { padding: 26px 26px 28px; }
.np-col + .np-col { border-left: 1px solid var(--h-filet); }

.np-titre {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-family: var(--font-b);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--h-or);
}

.np-titre::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--h-or);
  flex-shrink: 0;
}

/* ---- Les liens du panneau ------------------------------------------------ */

.np-lnk {
  position: relative;
  display: block;
  padding: 9px 0 9px 22px;
  color: inherit;
}

/* L'alvéole, la seule puce du site. */
.np-lnk::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15px;
  width: 9px;
  height: 10px;
  background: var(--h-filet-fort);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transition: background-color .3s var(--h-ez), transform .3s var(--h-ez);
}

.np-lnk:hover::before,
.np-lnk:focus-visible::before {
  background: var(--h-or-clair);
  transform: scale(1.15);
}

.np-nom {
  display: block;
  font-family: var(--font-b);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--h-encre);
  transition: color .3s var(--h-ez);
}

.np-lnk:hover .np-nom,
.np-lnk:focus-visible .np-nom { color: var(--h-or); }

.np-des {
  display: block;
  margin-top: 3px;
  font-family: var(--font-b);
  font-size: 0.76rem;
  font-weight: 300;
  line-height: 1.45;
  color: var(--h-encre-fnt);
}

/* ---- La colonne de droite ------------------------------------------------ */

.np-aside {
  padding: 26px;
  background: rgba(138, 104, 24, 0.045);
  border-left: 1px solid var(--h-filet);
}

.np-aside-p {
  margin-top: 2px;
  font-family: var(--font-b);
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--h-encre-mut);
}

.np-aside-lnk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-bottom: 4px;
  position: relative;
  font-family: var(--font-b);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--h-or);
}

.np-aside-lnk::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.3);
  transform-origin: left center;
  transition: transform .35s var(--h-ez);
}

.np-aside-lnk:hover::after,
.np-aside-lnk:focus-visible::after { transform: scaleX(1); }

.np-fleche {
  display: inline-block;
  transition: transform .3s var(--h-ez);
}

.np-aside-lnk:hover .np-fleche,
.np-aside-lnk:focus-visible .np-fleche { transform: translateX(5px); }

.np-tel {
  display: block;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--h-filet);
  font-family: var(--font-h);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--h-encre);
  transition: color .3s var(--h-ez);
}

.np-tel:hover { color: var(--h-or); }

.np-tel-lbl {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-b);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--h-encre-fnt);
}

/* ---- Panneaux étroits ---------------------------------------------------- */

.nav-panel--etroit { left: 0; }
.nav-panel--etroit .np-inner { width: 286px; padding: 22px 24px 24px; }

/* Aligné à droite quand l'onglet est dans la seconde moitié de la barre, pour
   ne pas sortir de la fenêtre sur un écran étroit. */
.nav-panel--fin-droite { left: auto; right: 0; }

.np-note {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--h-filet);
  font-family: var(--font-b);
  font-size: 0.76rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--h-encre-fnt);
}

.np-note a {
  color: var(--h-or);
  border-bottom: 1px solid currentColor;
}

/* ---- Devis --------------------------------------------------------------- */

.hdr .nav-cta {
  font-family: var(--font-b);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  border-radius: 2px;
  padding: 11px 20px;
}

/* ==========================================================================
   Entre 769 et 1100 px, la barre est à l'étroit
   Quatre onglets, le sélecteur de langue et le devis demandaient 852 px pour
   785 disponibles : tout se serrait. On resserre la lettre et les marges
   plutôt que de sacrifier un élément.
   ========================================================================== */

@media (min-width: 769px) and (max-width: 1099px) {
  .hdr .nav-link,
  .hdr .nav-trigger {
    padding: 9px 8px;
    font-size: 0.67rem;
    letter-spacing: 0.1em;
  }

  .hdr .nav-link::after,
  .hdr .nav-trigger::after { left: 8px; right: 8px; }

  .hdr .nav-cta {
    padding: 10px 14px;
    font-size: 0.63rem;
    letter-spacing: 0.12em;
  }

  .hdr .nav-logo img { height: 38px; }

  .np-col { padding: 22px 18px 24px; }
  .np-aside { padding: 22px 18px; }
  .np-des { font-size: 0.72rem; }
}

/* ==========================================================================
   Traversée du hero et pages sombres
   La barre est transparente sur la vidéo : les onglets passent en clair, mais
   les panneaux gardent leur fond crème, ce sont des surfaces de lecture.
   ========================================================================== */

body.scrolly-over .hdr .nav-link,
body.scrolly-over .hdr .nav-trigger,
body.page-noire .hdr .nav-link,
body.page-noire .hdr .nav-trigger { color: #fafafa; }

body.scrolly-over .hdr .nav-link::after,
body.scrolly-over .hdr .nav-trigger::after,
body.page-noire .hdr .nav-link::after,
body.page-noire .hdr .nav-trigger::after { background: var(--h-or-clair); }

body.scrolly-over .hdr .nav-link:hover,
body.scrolly-over .hdr .nav-trigger:hover,
body.scrolly-over .hdr .nav-item.ouvert .nav-trigger,
body.page-noire .hdr .nav-link:hover,
body.page-noire .hdr .nav-trigger:hover,
body.page-noire .hdr .nav-item.ouvert .nav-trigger { color: var(--h-or-clair); }

/* ==========================================================================
   Sous 769 px : tout passe dans le menu plein écran
   Les groupes y sont des <details> natifs. Pas de script d'accordéon : le
   navigateur sait déjà faire, et le menu reste utilisable si le JS tombe.
   ========================================================================== */

@media (max-width: 768px) {
  .nav-panel { display: none; }
}

.mob-groupe {
  width: min(320px, 82vw);
  margin-inline: auto;
  border-bottom: 1px solid rgba(100, 80, 20, 0.14);
}

.mob-groupe > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 2px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-b);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text, #1c1408);
}

.mob-groupe > summary::-webkit-details-marker { display: none; }

.mob-groupe > summary::after {
  content: '';
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-right: 1.5px solid #8a6818;
  border-bottom: 1.5px solid #8a6818;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .28s var(--h-ez, cubic-bezier(.4, 0, .2, 1));
}

.mob-groupe[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }

.mob-groupe-liste {
  display: grid;
  gap: 2px;
  padding: 2px 0 14px;
}

.mob-menu .mob-groupe-liste a {
  position: relative;
  padding: 8px 0 8px 20px;
  font-family: var(--font-b);
  font-size: 0.92rem;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-m, #4a3c1c);
  opacity: 1;
  transform: none;
}

.mob-menu .mob-groupe-liste a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15px;
  width: 8px;
  height: 9px;
  background: rgba(100, 80, 20, 0.34);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

@media (prefers-reduced-motion: reduce) {
  .nav-panel,
  .nav-chev,
  .np-fleche,
  .hdr .nav-link::after,
  .hdr .nav-trigger::after,
  .np-lnk::before { transition: none; }
}

/* ==========================================================================
   Le menu plein écran, repris
   Il était centré verticalement par justify-content: center. Avec vingt et un
   liens, un conteneur en flex centré rogne son propre débordement par le haut
   et devient impossible à remonter. On empile depuis le haut : de toute façon
   le menu est maintenant plein.
   ========================================================================== */

.mob-menu {
  justify-content: flex-start;
  padding-top: clamp(88px, 13vh, 116px);
  text-align: left;
}

/* Les groupes suivent la même entrée décalée que les liens : la règle
   d'origine ne visait que > a et > .lang-switch. */
.mob-menu > details {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s var(--h-ez, cubic-bezier(.4, 0, .2, 1)),
              transform .4s var(--h-ez, cubic-bezier(.4, 0, .2, 1));
}

.mob-menu.open > details { opacity: 1; transform: none; }

/* Tarifs et pré-diagnostic sont au même niveau que les trois groupes : ils
   prennent la même ligne, sinon le menu ressemble à deux systèmes empilés. */
.mob-menu > a:not(.btn) {
  width: min(320px, 82vw);
  margin-inline: auto;
  padding: 15px 2px;
  border-bottom: 1px solid rgba(100, 80, 20, 0.14);
  font-family: var(--font-b);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mob-menu .mob-groupe-liste a { text-align: left; }

.mob-menu > .btn { margin-inline: auto; }
.mob-menu > .lang-switch { width: 100%; }

.mob-menu > a:not(.btn) { text-align: left; }

/* Le bas du menu : de quoi appeler sans revenir en arrière. */
.mob-contact {
  width: min(320px, 82vw);
  margin: 34px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(100, 80, 20, 0.14);
  text-align: left;
}

.mob-contact-tel {
  display: block;
  font-family: var(--font-h);
  font-size: 1.3rem;
  font-weight: 400;
  color: #8a6818;
}

.mob-contact-p {
  margin-top: 8px;
  font-family: var(--font-b);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6a6040;
}


/* ==========================================================================
   Mention d'origine des images
   Règlement (UE) 2024/1689 sur l'intelligence artificielle, article 50(4) :
   qui publie une image produite par IA « qui ressemble sensiblement à des
   personnes, objets, lieux, entités ou évènements existants et paraîtrait à
   tort authentique » doit en révéler l'origine artificielle. L'article 50(5)
   veut l'information « claire et distinguable, au plus tard lors de la
   première exposition » : elle suit donc les images, et ne se contente pas
   des mentions légales.

   Cette règle vit ici, et non dans maison.css, parce que header.css est la
   seule feuille non minifiée que chargent les vingt-trois pages. La couleur
   est écrite en clair plutôt qu'en jeton : --blanc-fnt n'existe que dans les
   portées .vl et .gal, et la mention apparaît aussi en dehors.
   ========================================================================== */

.illu {
  margin-top: clamp(14px, 2vh, 20px);
  font-family: var(--font-b, inherit);
  font-size: 0.74rem;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(250, 250, 250, 0.46);
}

.illu::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 8px;
  margin-right: 9px;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* Origine d'une image, portee par l'image elle-meme et non par le bloc :
   seules quelques vues sont generees, les autres sont des photographies.
   La mention se pose donc dans la legende de celles qui le sont.
   Reglement (UE) 2024/1689, art. 50-4 : au plus tard a la premiere exposition. */
.pc-ia {
  flex-basis: 100%;
  display: block;
  margin-top: 6px;
  font-family: var(--font-b, inherit);
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.6;
  color: rgba(250, 250, 250, 0.42);
}

.pc-ia::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 7px;
  margin-right: 8px;
  vertical-align: 0.05em;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}