/* Compléments WordPress au CSS compilé du build Next (app.css contient déjà
   tailwind + mp.css + leola-v2.css). Règle d'or (leçon Imovelys) : le CSS de
   wp-block-library est NON layered, il bat les utilities @layer -> les
   mirrors ici sont non layered. */

/* Les figures ne doivent introduire aucune marge. */
figure {
  margin: 0;
}
figure.wp-block-image {
  margin: 0;
}
figure.wp-block-image img {
  display: block;
}

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

/* Dans un cadre (.mp-frame), un parallax, la fenêtre héro ou le visuel des
   familles, l'image remplit son conteneur même quand Gutenberg insère la
   figure entre les deux. */
.mp-frame figure.wp-block-image,
.mp-parallax figure.wp-block-image,
.lo-hero-media figure.wp-block-image,
.lo-split__img figure.wp-block-image,
.lo-fam__imgs figure.wp-block-image {
  position: static;
  height: 100%;
  width: 100%;
}
.mp-frame figure.wp-block-image img,
.lo-hero-media figure.wp-block-image img,
.lo-split__img figure.wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Les classes de l'img d'origine atterrissent sur la FIGURE à la
   conversion : l'img doit suivre (gotcha Imovelys). */
figure.wp-block-image[class*="object-cover"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Visuel des familles : chaque figure empilée en absolu, crossfade au JS. */
.lo-fam__imgs figure.wp-block-image {
  position: absolute;
  inset: 0;
}
.lo-fam__imgs figure.wp-block-image img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.lo-fam__imgs figure.wp-block-image img.is-active,
.lo-fam__imgs figure.wp-block-image.is-active img {
  opacity: 1;
}
/* Split vigilance : l'image absolue du panneau gauche. */
.lo-split__img figure.wp-block-image img {
  position: absolute;
  inset: 0;
}
/* Parallax : mp.css cible .mp-parallax > img : 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. */
.wp-block-group {
  box-sizing: border-box;
}

/* PAS de reset global des marges ici (écraserait les utilities @layer). */

/* Familles par défaut (pendants du @layer base, non layered pour battre 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;
}

/* Note d'erreur des formulaires injectée par main.js. */
.mp-form-note {
  color: var(--mp-sand, #a6884f);
}

/* Le CTA de la nav disparaît en mobile : lo-btn (non layered) bat la
   utility hidden -> règle explicite (gotcha M&P, déjà rejoué en V3). */
@media (max-width: 639px) {
  .lo-nav .lo-btn {
    display: none;
  }
}

/* Logo nav : hauteur fixe (l'attribut style inline saute parfois à la
   conversion des templates PHP). */
:root {
  --lo-nav-h: 140px;
}

@media (max-width: 639px) {
  :root {
    --lo-nav-h: 116px;
  }
}

.lo-nav img {
  height: calc(var(--lo-nav-h) - 24px);
  width: auto;
  display: block;
}

/* Retours cliente 07/08 : logo complet dans la nav (116px desktop, 92px
   mobile) -> la nav grandit, on recale les compensations de bandeaux SANS
   toucher au contenu. */
.pt-\[calc\(78px\+clamp\(36px\,6vh\,72px\)\)\] {
  padding-top: calc(var(--lo-nav-h) + clamp(36px, 6vh, 72px));
}

.pt-\[calc\(78px\+clamp\(40px\,7vh\,90px\)\)\] {
  padding-top: calc(var(--lo-nav-h) + clamp(40px, 7vh, 90px));
}

.pt-\[140px\] {
  padding-top: calc(var(--lo-nav-h) + 62px);
}

/* Menu deroulant « Notre région » (retour call Robin 07/08) */
.lo-navdrop {
  position: relative;
  display: flex;
  align-items: center;
}

.lo-navdrop__btn {
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 0 3px;
  margin: 0;
  color: inherit;
  font-family: inherit;
  line-height: inherit;
}

.lo-navdrop__caret {
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.25s ease;
}

.lo-navdrop:hover .lo-navdrop__caret,
.lo-navdrop:focus-within .lo-navdrop__caret {
  transform: rotate(225deg) translateY(-1px);
}

.lo-navdrop__menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 230px;
  padding: 10px 0;
  background: var(--mp-ivory);
  border: 1px solid color-mix(in srgb, var(--mp-gold) 45%, transparent);
  box-shadow: 0 18px 40px rgba(46, 43, 39, 0.12);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s;
}

.lo-navdrop:hover .lo-navdrop__menu,
.lo-navdrop:focus-within .lo-navdrop__menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.lo-navdrop__item {
  display: block;
  padding: 11px 22px;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mp-forest);
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.lo-navdrop__item:hover {
  background: color-mix(in srgb, var(--mp-gold) 14%, transparent);
  color: var(--mp-ink);
}

/* Partie haute du logo en tete de page (remplace les traits CSS que la
   cliente prenait pour un logo coupe — retour 07/08) */
.lo-logo-haut {
  margin: 0;
}

.lo-logo-haut img {
  height: 96px;
  width: auto;
  display: block;
}

@media (max-width: 720px) {
  .lo-logo-haut img {
    height: 68px;
  }
}

/* Hero home immersif (photo) : le motif or est illisible sur la photo,
   on le passe en creme comme le reste du texte du hero mobile */
@media (max-width: 959px) {
  .lo-logo-haut--hero img {
    filter: brightness(0) invert(0.94);
  }
}

/* Retour cliente 07/08 : les titres de tete de page cales a gauche donnent
   une impression de vide -> centres (toutes les pages sauf le hero 2 colonnes
   de l'accueil) */
.mp-page:not(.mp-accueil) > section:first-child .lo-logo-haut img {
  margin-inline: auto;
}

.mp-page:not(.mp-accueil) > section:first-child .mp-kicker {
  text-align: center;
}

.mp-page:not(.mp-accueil) > section:first-child h1 {
  margin-inline: auto;
  text-align: center;
}

.mp-page:not(.mp-accueil) > section:first-child h1 + p {
  margin-inline: auto;
  text-align: center;
}

/* Meme retour : les en-tetes de section (kicker + h2 a gauche, numero 01-04
   a droite) passent centres, le numero reste en marge droite */
.mp-page .flex.items-end.justify-between.gap-6:not(.flex-wrap) {
  display: block;
  position: relative;
  text-align: center;
}

.mp-page .flex.items-end.justify-between.gap-6:not(.flex-wrap) h2 {
  margin-inline: auto;
}

.mp-page .flex.items-end.justify-between.gap-6:not(.flex-wrap) .lo-secnum {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.mp-page .flex.items-end.justify-between.gap-6:not(.flex-wrap) + p {
  margin-inline: auto;
  text-align: center;
}
.lo-drawer img {
  height: 40px;
  width: auto;
}

/* Les <video> passent en wp:html : dimensions garanties. */
.lo-hero-media video,
.lo-hero-mobile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Retour cliente 07/08, 2e vague : les colonnes qui s'arretent bien avant leur
   voisine laissent un grand blanc en bas de page (mesure : a-propos 379px en
   1366 et 508px en 1920, contact 535px, accueil 243px en 1920). */

/* A propos, bloc « Le constat » : le texte se centre sur la photo verticale et
   la colonne image se resserre. Portee verifiee : ce combo de colonnes sans
   alignement explicite n'existe que la (l'accueil a deja items-center). */
@media (min-width: 980px) {
  .mp-page
    [class*="grid-cols-[1.2fr_1fr]"]:not([class*="items-center"]):not(
      [class*="items-end"]
    ) {
    grid-template-columns: 1.45fr 1fr;
    align-items: center;
  }
}

/* Accueil, les 4 familles : le visuel colle est plus haut que la liste des
   que l'ecran depasse 1500px. */
@media (min-width: 1500px) {
  .lo-fam__imgs {
    aspect-ratio: 3 / 2.85;
  }
}

/* Contact : le formulaire finissait bien avant la colonne de droite. Le champ
   message respire et le visuel de l'aside se raccourcit. */
@media (min-width: 980px) {
  .lo-form-contact textarea.mp-field {
    min-height: 360px;
  }

  aside [class*="aspect-[3/4]"] {
    aspect-ratio: 1 / 1;
    max-width: 290px;
  }
}

/* == densite ecrans courts == (retour cliente : « beaucoup d'espace vide [...]
   mais il y en a d'autres » — ce n'est pas trois endroits, c'est tout le site
   vu sur SON ecran, un portable 15 pouces d'environ 1366x625).
   Les sections sont en padding clamp(80px,11vh,140px) : sous 730px de haut,
   11vh passe sous le plancher de 80px, qui s'applique alors en haut ET en bas
   = 160px de vide entre deux blocs, un quart de son ecran. Testé par injection
   avant d'etre pousse : les ecrans les plus pauvres passent de 31 % a 40-48 %
   de contenu et les pages raccourcissent de 10 a 17 %.
   Le rendu valide en 1440x900 n'est pas touche (media query sur la hauteur). */

/* --- densite sur les ecrans courts (portables 15 pouces) ---------------
   Le rendu valide en 1440x900 ne bouge pas : tout est sous media query. */
@media (max-height: 820px) {
  section { padding-block: clamp(38px, 6vh, 72px) !important; }
  section[class*="pt-"] { padding-top: clamp(38px, 6vh, 72px) !important; }
  /* le hero garde sa hauteur d'ecran, mais colle moins au header */
  section[class*="min-h"] { padding-block: 0 !important; }
  /* respirations internes : titres, grilles, listes */
  [class*="mt-14"] { margin-top: 2.25rem !important; }
  [class*="mt-12"] { margin-top: 2rem !important; }
  [class*="mt-10"] { margin-top: 1.75rem !important; }
  [class*="mt-9"], [class*="mt-8"] { margin-top: 1.5rem !important; }
  /* aucune image ne doit depasser un ecran : sinon on tombe sur un ecran
     « image seule + vide », exactement la 3e photo de la cliente */
  .mp-frame, .lo-frame, figure.wp-block-image { max-height: 62vh; }
  .mp-frame img, .lo-frame img, figure.wp-block-image img {
    max-height: 62vh; object-fit: cover;
  }
}

/* MSE - blog (liste + article) */
.lo-blog,.lo-article{background:var(--mp-ivory);color:var(--mp-ink);padding:calc(150px + clamp(24px,4vh,56px)) clamp(20px,4vw,56px) clamp(64px,9vh,120px);}
@media (max-width:1099px){.lo-blog,.lo-article{padding-top:calc(104px + clamp(20px,4vh,40px));}}
.lo-blog__inner{max-width:1180px;margin:0 auto;}
.lo-blog__kicker,.lo-article__kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mp-gold);margin:0 0 14px;}
.lo-article__kicker a{color:var(--mp-gold);text-decoration:none;}
.lo-article__kicker a:hover{color:var(--mp-forest);}
.lo-blog__title{font-family:"Playfair Display",Georgia,serif;font-weight:400;font-size:clamp(38px,5vw,72px);line-height:1.06;margin:0 0 18px;color:var(--mp-forest);}
.lo-blog__intro{max-width:64ch;font-size:18px;line-height:1.65;color:#5a5349;margin:0 0 clamp(36px,6vh,64px);}
.lo-blog__intro p{margin:0 0 14px;}
.lo-blog__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:clamp(24px,3vw,40px);}
.lo-blog__card{display:flex;flex-direction:column;background:#fffaf4;border:1px solid rgba(46,43,39,.10);}
.lo-blog__thumb{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--mp-pale);}
.lo-blog__thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease;}
.lo-blog__card:hover .lo-blog__thumb img{transform:scale(1.04);}
.lo-blog__body{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1 1 auto;}
.lo-blog__date,.lo-article__meta{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mp-sage);margin:0 0 10px;}
.lo-blog__h{font-family:"Playfair Display",Georgia,serif;font-weight:400;font-size:26px;line-height:1.22;margin:0 0 12px;}
.lo-blog__h a{color:var(--mp-forest);text-decoration:none;}
.lo-blog__h a:hover{color:var(--mp-gold);}
.lo-blog__excerpt{font-size:15.5px;line-height:1.65;color:#5a5349;margin:0 0 20px;}
.lo-blog__more{margin-top:auto;align-self:flex-start;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mp-forest);text-decoration:none;border-bottom:1px solid var(--mp-gold);padding-bottom:4px;}
.lo-blog__more:hover{color:var(--mp-gold);}
.lo-blog__empty{font-size:18px;color:#5a5349;}
.lo-blog__nav{margin-top:clamp(40px,6vh,72px);}
.lo-blog__nav .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.lo-blog__nav .nav-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.lo-blog__nav .page-numbers{display:inline-block;padding:10px 16px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mp-forest);text-decoration:none;border:1px solid rgba(46,43,39,.18);}
.lo-blog__nav .page-numbers.current,.lo-blog__nav .page-numbers:hover{background:var(--mp-gold);border-color:var(--mp-gold);color:#2e2b27;}
.lo-article__inner{max-width:760px;margin:0 auto;}
.lo-article__title{font-family:"Playfair Display",Georgia,serif;font-weight:400;font-size:clamp(34px,4.2vw,58px);line-height:1.1;margin:0 0 14px;color:var(--mp-forest);}
.lo-article__hero{margin:clamp(28px,4vh,44px) 0;}
.lo-article__hero img{width:100%;height:auto;display:block;}
.lo-article__body{font-size:17.5px;line-height:1.75;color:#453f38;}
.lo-article__body p{margin:0 0 22px;}
.lo-article__body h2{font-family:"Playfair Display",Georgia,serif;font-weight:400;font-size:clamp(26px,3vw,36px);line-height:1.2;color:var(--mp-forest);margin:44px 0 16px;}
.lo-article__body h3{font-family:"Playfair Display",Georgia,serif;font-weight:400;font-size:22px;line-height:1.25;color:var(--mp-forest);margin:34px 0 12px;}
.lo-article__body ul,.lo-article__body ol{margin:0 0 22px;padding-left:22px;}
.lo-article__body ul{list-style:disc;}
.lo-article__body ol{list-style:decimal;}
.lo-article__body li{margin:0 0 8px;}
.lo-article__body a{color:var(--mp-forest);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--mp-gold);}
.lo-article__body a:hover{color:var(--mp-gold);}
.lo-article__body blockquote{margin:28px 0;padding:4px 0 4px 22px;border-left:2px solid var(--mp-gold);font-family:"Playfair Display",Georgia,serif;font-size:21px;line-height:1.45;color:var(--mp-forest);}
.lo-article__body img{max-width:100%;height:auto;}
.lo-article__body strong{font-weight:600;color:var(--mp-forest);}
.lo-article__cta{margin:clamp(44px,6vh,72px) 0 0;background:var(--mp-forest);color:var(--mp-ivory);padding:clamp(30px,4vw,48px);text-align:center;}
.lo-article__cta p{font-family:"Playfair Display",Georgia,serif;font-size:clamp(22px,2.4vw,30px);line-height:1.25;margin:0 0 22px;color:var(--mp-ivory);}
.lo-article__cta a{display:inline-block;background:var(--mp-gold);color:#2e2b27;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;padding:16px 30px;text-decoration:none;}
.lo-article__cta a:hover{background:var(--mp-pale);}
.lo-article__back{margin:clamp(28px,4vh,44px) 0 0;}
.lo-article__back a{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mp-forest);text-decoration:none;border-bottom:1px solid var(--mp-gold);padding-bottom:4px;}
.lo-article__back a:hover{color:var(--mp-gold);}

/* le theme impose section{padding-block:...!important} sous 820px de haut :
   on repasse au-dessus pour degager la nav fixe */
section.lo-blog, article.lo-article{padding-block-start:calc(150px + clamp(20px,3vh,48px))!important;padding-block-end:clamp(56px,8vh,110px)!important;}
@media (max-width:1099px){section.lo-blog, article.lo-article{padding-block-start:calc(104px + clamp(16px,3vh,36px))!important;}}

/* === MSE : miroir de .lo-article__body dans l'editeur de blocs (admin uniquement) === */
.editor-styles-wrapper.post-type-post{font-family:"Inter",ui-sans-serif,system-ui,sans-serif;font-size:17.5px;line-height:1.75;color:#453f38;}
.editor-styles-wrapper.post-type-post p{margin:0 0 22px;}
.editor-styles-wrapper.post-type-post h2{font-family:"Playfair Display",Georgia,serif;font-weight:400;font-size:clamp(26px,3vw,36px);line-height:1.2;color:#2e2b27;margin:44px 0 16px;}
.editor-styles-wrapper.post-type-post h3{font-family:"Playfair Display",Georgia,serif;font-weight:400;font-size:22px;line-height:1.25;color:#2e2b27;margin:34px 0 12px;}
.editor-styles-wrapper.post-type-post ul,.editor-styles-wrapper.post-type-post ol{margin:0 0 22px;padding-left:22px;}
.editor-styles-wrapper.post-type-post ul{list-style:disc;}
.editor-styles-wrapper.post-type-post ol{list-style:decimal;}
.editor-styles-wrapper.post-type-post li{margin:0 0 8px;}
.editor-styles-wrapper.post-type-post a{color:#2e2b27;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#c8a96e;}
.editor-styles-wrapper.post-type-post blockquote{margin:28px 0;padding:4px 0 4px 22px;border-left:2px solid #c8a96e;font-family:"Playfair Display",Georgia,serif;font-size:21px;line-height:1.45;color:#2e2b27;}
.editor-styles-wrapper.post-type-post strong{font-weight:600;color:#2e2b27;}
/* === fin MSE === */

/* MSE 26-08 : titres h1/h4-h6 + apercu editeur */
.lo-article__body h1{font-family:"Playfair Display",Georgia,serif;font-weight:400;font-size:clamp(30px,3.6vw,44px);line-height:1.15;color:var(--mp-forest);margin:48px 0 18px}
.lo-article__body h4{font-family:"Playfair Display",Georgia,serif;font-weight:400;font-size:19px;line-height:1.35;color:var(--mp-forest);margin:28px 0 10px}
.lo-article__body h5{font-family:"Inter",ui-sans-serif,system-ui,sans-serif;font-weight:600;font-size:16px;line-height:1.5;color:var(--mp-forest);margin:24px 0 8px}
.lo-article__body h6{font-family:"Inter",ui-sans-serif,system-ui,sans-serif;font-weight:600;font-size:15px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--mp-forest);margin:24px 0 8px}
.editor-styles-wrapper.post-type-post h1{font-family:"Playfair Display",Georgia,serif;font-weight:400;font-size:clamp(30px,6.8vw,44px);line-height:1.15;color:#2e2b27;margin:48px 0 18px}
.editor-styles-wrapper.post-type-post h4{font-family:"Playfair Display",Georgia,serif;font-weight:400;font-size:19px;line-height:1.35;color:#2e2b27;margin:28px 0 10px}
.editor-styles-wrapper.post-type-post h5{font-family:"Inter",ui-sans-serif,system-ui,sans-serif;font-weight:600;font-size:16px;line-height:1.5;color:#2e2b27;margin:24px 0 8px}
.editor-styles-wrapper.post-type-post h6{font-family:"Inter",ui-sans-serif,system-ui,sans-serif;font-weight:600;font-size:15px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:#2e2b27;margin:24px 0 8px}
.editor-styles-wrapper.post-type-post h2{font-size:clamp(26px,5.7vw,36px)}
.editor-styles-wrapper.post-type-post .editor-post-title{font-family:"Playfair Display",Georgia,serif;font-weight:400;font-size:clamp(34px,8vw,58px);line-height:1.1;color:#2e2b27;margin:0 0 14px}