/* Complements WordPress au CSS compile du build Next (app.css).
   Regle d'or (lecon Imovelys) : le CSS de wp-block-library est NON layered,
   il bat donc toutes les utilities @layer -> les mirrors ici sont non layered. */

/* Les figures ne doivent introduire aucune marge (WP core met 1em en bas,
   non layered, ce qui battait le preflight — verifie : aucune figure du
   site ne porte d'utility de marge, mirror global sans risque). */
figure {
  margin: 0;
}
figure.wp-block-image {
  margin: 0;
}
figure.wp-block-image img {
  display: block;
}

/* Fond du site : mp.css le pose en @layer base, battu par les styles WP
   non layered -> mirror obligatoire. */
html,
body {
  background: var(--mp-ivory, #f5f1eb);
}

/* Dans un cadre (.mp-frame), un parallax ou un fond de panneau, l'image
   remplit son conteneur meme quand Gutenberg insere la figure entre les deux. */
.mp-frame figure.wp-block-image,
.mp-parallax figure.wp-block-image,
.mp-panel__bg figure.wp-block-image {
  position: static;
  height: 100%;
  width: 100%;
}
.mp-frame figure.wp-block-image img,
.mp-panel__bg figure.wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Les classes de l'img d'origine (absolute inset-0 h-full w-full object-cover)
   atterrissent sur la FIGURE a la conversion : l'img doit suivre (gotcha
   Imovelys). */
figure.wp-block-image[class*="object-cover"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* mp.css cible .mp-parallax > img (enfant direct) : mirror avec figure. */
.mp-parallax > figure.wp-block-image img {
  position: absolute;
  left: 0;
  top: -6%;
  width: 100%;
  height: 112%;
  object-fit: cover;
  will-change: transform;
}

/* Groups Gutenberg : neutres, aucune mise en page implicite. */
.wp-block-group {
  box-sizing: border-box;
}

/* PAS de reset global des marges ici : un reset non layered ecraserait
   les utilities @layer (mt-4...) du build — c'est exactement le bug qu'on
   a corrige le 16/07 (-61px par page). Le preflight @layer de app.css
   suffit contre les styles UA, et theme.json sans blockGap n'emet aucun
   gap de layout (verifie sur Imovelys). */

/* Familles par defaut (pendants du @layer base de mp.css, en non layered
   pour battre les styles WP). */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-playfair), "Playfair Display", Georgia, serif;
}
body {
  font-family: var(--font-inter), Inter, "Segoe UI", sans-serif;
}

/* La note d'erreur des formulaires est injectee par main.js. */
.mp-form-note {
  color: var(--mp-sand, #a68a64);
}

/* Diptyque saisons cote WP : les DEUX panneaux texte sont dans le DOM
   (en React, le texte etait swappe par etat). Un seul visible a la fois. */
.mp-saisons .mp-saison-panel {
  display: none;
}
.mp-saisons .mp-saison-panel.is-active {
  display: block;
}

/* Sous 640px le CTA de la nav doit disparaitre : la utility `hidden` est
   battue par .mp-btn{display:inline-flex} (non layered) -> regle explicite. */
@media (max-width: 639px) {
  .mp-nav .mp-btn {
    display: none;
  }
}

/* Logo cliente dans la nav : version blanche sur le hero, version foret
   quand la barre devient solide (fond ivoire). */
.mp-nav .mp-logo {
  height: 62px;
  width: auto;
  display: block;
}
.mp-nav .mp-logo--sombre {
  display: none;
}
.mp-nav.is-solid .mp-logo--clair {
  display: none;
}
.mp-nav.is-solid .mp-logo--sombre {
  display: block;
}
@media (max-width: 639px) {
  .mp-nav .mp-logo {
    height: 50px;
  }
}

/* ---- Nav : deroulant « Notre secteur » + drawer (modifs Robin 2, 2026-07-22).
   Classes custom uniquement (aucune utility ecrasee, regle d'or respectee). ---- */
.mp-nav__group {
  position: relative;
}
.mp-nav__group-btn {
  background: none;
  border: 0;
  padding: 0 0 3px;
  color: inherit;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.mp-nav__caret {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.mp-nav__group:hover .mp-nav__caret,
.mp-nav__group:focus-within .mp-nav__caret,
.mp-nav__group.is-open .mp-nav__caret {
  transform: rotate(180deg);
}
.mp-nav__sub {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 18px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0.3s;
}
.mp-nav__group:hover .mp-nav__sub,
.mp-nav__group:focus-within .mp-nav__sub,
.mp-nav__group.is-open .mp-nav__sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.mp-nav__sub-panel {
  min-width: 224px;
  display: flex;
  flex-direction: column;
  background: var(--mp-ivory, #f5f1eb);
  color: var(--mp-forest, #2a2e2a);
  border: 1px solid rgba(166, 138, 100, 0.3);
  box-shadow: 0 22px 44px -20px rgba(35, 38, 31, 0.35);
  padding: 10px 0;
  transform: translateY(6px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.mp-nav__group:hover .mp-nav__sub-panel,
.mp-nav__group:focus-within .mp-nav__sub-panel,
.mp-nav__group.is-open .mp-nav__sub-panel {
  transform: translateY(0);
}
.mp-nav__sub-link {
  padding: 10px 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.25s;
}
.mp-nav__sub-link:hover,
.mp-nav__sub-link.is-active {
  color: var(--mp-sand, #a68a64);
}

/* Drawer mobile : groupe « Notre secteur » en sous-liste indentee. */
.mp-drawer__group {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
}
.mp-drawer__group-label {
  margin-bottom: 10px;
}
.mp-drawer__sub-link {
  padding: 6px 0 6px 22px;
  font-size: 24px;
  line-height: 1.35;
  border-left: 1px solid rgba(205, 179, 139, 0.35);
}