/* DIEM — ajustements */
.brxe-carousel { position: relative; }
.diem-legende {
  position: absolute; left: 0; bottom: -132px; z-index: 2;
  margin: 0; min-height: 28px; display: flex; align-items: center; max-width: calc(100% - 140px);
  font-family: "Cambo", Georgia, serif; font-size: clamp(16px, 1.3vw, 24px); line-height: 1.2;
  letter-spacing: .04em; color: var(--dark-green-a, #433f27);
}
@media (max-width: 767px) {
  .diem-legende { position: static; margin-top: 16px; max-width: none; }
}

/* Accueil, ouverture (inverse du hero de la page Projet) : l'image monte jusqu'en haut de l'écran, sous un filtre
   vert et des bandes vertes. Le filtre s'efface, les bandes s'ouvrent (la vidéo démarre), puis la bande verte du haut
   descend par-dessus et les infos du haut apparaissent. Calque ajouté au HTML par le plugin
   (voir sequenceHero dans ajustements.js) ; sans script, il s'efface seul. */
.diem-ouverture {
  position: absolute; top: -88px; left: 0; right: 0; bottom: 0; z-index: 1; overflow: hidden; pointer-events: none;
  animation: diem-ouverture-secours .6s ease 8s forwards;
}
.diem-ouverture.diem-ouv-js { animation: none; }
.diem-ouv-image {
  position: absolute; inset: 0; background: url(diem-hero-premiere-image.webp) center / cover no-repeat;
  transform-origin: 0 0;
}
html:has(.diem-ouverture) #brxe-803a5a .bricks-background-video-wrapper { overflow: hidden; }
.diem-bandes {
  position: absolute; inset: 0;
  display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-evenly; column-gap: 8px;
  background-color: rgba(64, 60, 38, .7);
  transition: background-color .8s cubic-bezier(.55, .085, .68, .53);
}
.diem-bande {
  flex: 1 1 0; height: 100%; background-color: var(--dark-green-a, #433f27); opacity: .9;
  transition: transform .8s cubic-bezier(.895, .03, .685, .22);
}
.diem-bande-arche { margin-top: 20vh; border-top-left-radius: 50vw; border-top-right-radius: 50vw; }
.diem-ouverture.is-filtre .diem-bandes { background-color: rgba(64, 60, 38, 0); }
.diem-ouverture.is-ouvert .diem-bande-rect { transform: translateY(-101%); }
.diem-ouverture.is-ouvert .diem-bande-arche { transform: translateY(101%); }
.diem-ouv-haut {
  position: absolute; top: 0; left: 0; right: 0; height: 88px; background-color: rgb(67, 63, 39);
  transform: translateY(-100%); transition: transform .8s cubic-bezier(.165, .84, .44, 1);
}
.diem-ouverture.is-haut .diem-ouv-haut { transform: none; }
@media (max-width: 767px) {
  .diem-bande:nth-child(n+3) { display: none; }
}
@keyframes diem-ouverture-secours { to { opacity: 0; visibility: hidden; } }

/* Infos du haut (Condos locatifs, logo, Charlesbourg, menu) : masquées pendant l'ouverture, puis en décalé */
html:has(.diem-ouverture) :is(#header-txt-left, #brxe-e848a8, #header-txt-right, #diem-header .hamburger-menu) {
  opacity: 0; animation: diem-entete .5s ease 8s forwards;
}
html:has(.diem-ouverture.diem-ouv-js) :is(#header-txt-left, #brxe-e848a8, #header-txt-right, #diem-header .hamburger-menu) { animation: none; }
html:has(.diem-ouverture.is-entete) :is(#header-txt-left, #brxe-e848a8, #header-txt-right, #diem-header .hamburger-menu) {
  animation: diem-entete .6s ease both;
}
html:has(.diem-ouverture.is-entete) #brxe-e848a8 { animation-delay: .12s; }
html:has(.diem-ouverture.is-entete) #header-txt-right { animation-delay: .24s; }
html:has(.diem-ouverture.is-entete) #diem-header .hamburger-menu { animation-delay: .36s; }
@keyframes diem-entete { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .diem-bande, .diem-ouv-haut { transition: none; }
  .diem-ouverture { transition: opacity .4s ease; }
  .diem-ouverture.is-ouvert { opacity: 0; }
  .diem-ouverture.is-ouvert .diem-bande { transform: none; }
}

/* Accueil : apparition décalée des textes d'ouverture (voir sequenceHero dans ajustements.js).
   Le thème les affiche d'office après 6,5 s : on les garde masqués jusqu'à la fin de la vidéo. */
.diem-hero-seq #brxe-866666:not(.is-visible),
.diem-hero-seq #brxe-96401b:not(.is-visible) { opacity: 0 !important; }
.diem-hero-seq #brxe-866666.is-visible,
.diem-hero-seq #brxe-96401b.is-visible { opacity: 1 !important; }
.diem-hero-seq #brxe-866666 { transition: opacity .6s ease; }
.diem-hero-seq #brxe-95a9ef,
.diem-hero-seq #brxe-f1b58f {
  opacity: 0; transform: translateY(12px);
  transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1);
}
.diem-hero-seq #brxe-95a9ef.is-visible,
.diem-hero-seq #brxe-f1b58f.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .diem-hero-seq #brxe-95a9ef, .diem-hero-seq #brxe-f1b58f { transform: none; transition: opacity .3s; }
}

/* Sélecteur de plans : titre « Plans & prix » à la place de l'indication « Survolez la façade… » (voir titrePlans) */
lp-selecteur .lps-hint { display: none !important; }
.diem-plans-titre {
  position: absolute; left: clamp(16px, 4%, 72px); top: clamp(10px, 1.6%, 26px); z-index: 4; /* au ras du haut : dans le ciel, moins sur le bâtiment */
  display: flex; flex-direction: column; gap: .7em; pointer-events: none;
  text-align: left; color: var(--dark-green-a, #433f27);
  text-shadow: 0 0 22px rgb(255 255 255 / .85), 0 0 5px rgb(255 255 255 / .7);
  opacity: 0; transition: opacity .8s ease;
}
.diem-plans-titre__t {
  font-family: "Cambo", Georgia, serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(22px, 2.2vw, 42px); line-height: 1.15; letter-spacing: .08em;
}
.diem-plans-titre__s {
  font-family: "museo-sans", "Helvetica Neue", Arial, sans-serif; font-weight: 300; text-transform: uppercase;
  font-size: clamp(11px, .85vw, 15px); line-height: 1.3; letter-spacing: .16em;
}
/* Ouverture : le titre arrive avec l'image d'horizon, avant le départ de la vidéo */
.lps-intro.is-on .diem-plans-titre { opacity: 1; transition-delay: .3s; }
/* Façade : visible tant qu'aucun étage n'est choisi (l'indication d'origine est alors en grand format) */
.lps-facade .lps-hint.is-big ~ .diem-plans-titre { opacity: 1; transition: none; }
/* Ordinateur et tablette : la façade en bande ne change plus au choix d'un étage, le titre y reste aussi */
@media (min-width: 768px) {
  .lps-facade.is-intro .diem-plans-titre { opacity: 1; transition: none; }
}
@media (max-width: 767px) {
  .diem-plans-titre { gap: .4em; top: 12px; left: 12px; }
}

/* Rendus 3D cliquables : visionneuse plein écran (voir visionneuse3D) */
.diem-3d-zoom { cursor: zoom-in; }
.diem-lb {
  position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 64px); background: rgb(47 44 27 / .94);
}
.diem-lb.is-ouverte { display: flex; }
html.diem-lb-ouverte { overflow: hidden; }
.diem-lb__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; max-height: 100%; }
.diem-lb__fig img { display: block; max-width: min(92vw, 2560px); max-height: calc(100vh - 120px); width: auto; height: auto; object-fit: contain; box-shadow: 0 12px 40px rgb(0 0 0 / .35); }
.diem-lb__fig figcaption { font-family: "Cambo", Georgia, serif; font-size: clamp(14px, 1.1vw, 20px); letter-spacing: .04em; color: var(--light-green, #c4bea2); text-align: center; }
.diem-lb__fermer, .diem-lb__nav {
  position: absolute; border: 0; background: none; cursor: pointer; color: var(--light-green, #c4bea2);
  font: 300 44px/1 "Cambo", Georgia, serif; padding: 8px 14px; opacity: .8; transition: opacity .2s;
}
.diem-lb__fermer:hover, .diem-lb__nav:hover, .diem-lb__fermer:focus-visible, .diem-lb__nav:focus-visible { opacity: 1; outline: none; color: var(--peach, #f49f68); }
.diem-lb__fermer { top: 12px; right: 16px; }
.diem-lb__nav { top: 50%; transform: translateY(-50%); font-size: 64px; }
.diem-lb__nav--prec { left: 8px; }
.diem-lb__nav--suiv { right: 8px; }
.diem-lb.is-seul .diem-lb__nav { display: none; }
@media (max-width: 767px) {
  .diem-lb__nav { top: auto; bottom: 12px; transform: none; font-size: 48px; }
}

/* Rendus 3D : survol avec voile vert et « + » pêche (voir visionneuse3D) */
.diem-3d-voile {
  position: fixed; left: 0; top: 0; z-index: 9990; pointer-events: none; overflow: hidden;
  display: grid; place-items: center;
  background: rgb(67 63 39 / .34);
  opacity: 0; transition: opacity .3s cubic-bezier(.4, 0, .2, 1), border-radius .2s;
}
.diem-3d-voile.is-visible { opacity: 1; transition: opacity .5s cubic-bezier(.22, .61, .36, 1), border-radius .2s; }
.diem-3d-voile__plus {
  position: relative; width: clamp(36px, 3.4vw, 56px); height: clamp(36px, 3.4vw, 56px);
  opacity: 0; transform: scale(.55) rotate(-90deg);
  transition: opacity .25s ease, transform .35s cubic-bezier(.4, 0, .2, 1);
}
.diem-3d-voile__plus::before, .diem-3d-voile__plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--peach, #f49f68);
  border-radius: 1px; transform: translate(-50%, -50%);
}
.diem-3d-voile__plus::before { width: 100%; height: 2px; }
.diem-3d-voile__plus::after { width: 2px; height: 100%; }
.diem-3d-voile.is-visible .diem-3d-voile__plus {
  opacity: 1; transform: none;
  transition: opacity .45s ease .08s, transform .6s cubic-bezier(.16, 1, .3, 1) .05s;
}
@media (prefers-reduced-motion: reduce) {
  .diem-3d-voile, .diem-3d-voile.is-visible, .diem-3d-voile__plus, .diem-3d-voile.is-visible .diem-3d-voile__plus { transition: opacity .2s; transform: none; }
}

/* Tuile à états (accueil, Projet) : GSAP anime seul les couleurs du texte */
.sticky-morph-slides-section .txt { transition: none !important; }

/* Sélecteur de plans : barre de filtres visible dès le départ (le sélecteur la masquait pendant l'intro).
   L'intro est calée sous la barre ; la barre passe au-dessus de son calque pour rester cliquable. */
lp-selecteur.intro-fit > .lps-bar { opacity: 1 !important; transition: none !important; }
lp-selecteur .lps-bar { position: relative; z-index: 7; }

/* ===== v1.8.0 ===== */

/* Accueil officiel : boucle des espaces en fond du hero, sur toute sa surface (la vidéo est en 16:9).
   Après quelques secondes, un voile vert l'assombrit pour la lecture de DIEM et des textes (classe is-voile). */
#brxe-803a5a.diem-boucle { background-image: var(--diem-affiche) !important; background-size: cover !important; background-position: center !important; }
#brxe-803a5a.diem-boucle .bricks-background-video-wrapper video { width: 100% !important; height: 100% !important; object-fit: cover; }
#brxe-803a5a.diem-boucle .bricks-background-video-wrapper::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: rgba(52, 49, 30, .5); opacity: 0; transition: opacity 1.6s ease;
}
#brxe-803a5a.diem-boucle.is-voile .bricks-background-video-wrapper::after { opacity: 1; }
/* Sur la vidéo assombrie, DIEM et la phrase passent en clair (beige du site) */
#brxe-803a5a.diem-boucle #brxe-866666 { filter: brightness(0) invert(91%) sepia(8%) saturate(380%) hue-rotate(350deg) !important; }
#brxe-803a5a.diem-boucle #brxe-95a9ef { color: #dcd6cc !important; }

/* En-tête : « Condos locatifs Charlesbourg » à gauche, l'emblème au centre. Au défilement (html.diem-colle), le
   texte s'efface et le logo DIEM prend sa place. À l'arrivée sur la page, les éléments apparaissent en décalé. */
#diem-header.diem-ht-fusion { --diem-emb: 60px; }
#diem-header.diem-ht-fusion > .brxe-container > .brxe-block { position: relative; }
#diem-header.diem-ht-fusion > .brxe-container > .brxe-block > svg { flex: 0 0 auto; width: var(--diem-emb) !important; height: var(--diem-emb) !important; min-width: var(--diem-emb); max-width: none !important; }
#diem-header.diem-ht-fusion #header-txt-right { display: none !important; }
#diem-header.diem-ht-fusion #header-txt-left {
  left: 0 !important; right: auto !important; bottom: calc(var(--diem-emb) / 2) !important;
  text-align: left; font-size: clamp(14px, 1.25vw, 24px); line-height: 1.25;
}
#diem-header.diem-ht-fusion #header-txt-left .diem-ht { display: inline-block; transition: opacity .4s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
#diem-header.diem-ht-fusion #header-txt-left .diem-ht + .diem-ht { transition-delay: .05s; margin-left: 1.4em; } /* deux éléments distincts */
#diem-header.diem-ht-fusion .diem-emb-lien { cursor: pointer; }
#diem-header.diem-ht-fusion .diem-emb-lien:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }
/* Mesure du centrage (ajustements.js) : sans transformation, le temps d'un calcul. Les animations d'apparition
   continuent (une déclaration !important l'emporte sur elles) : les couper les relançait à chaque nouvelle mesure. */
#diem-header.diem-mesure *, #diem-header.diem-mesure *::before { transform: none !important; transition: none !important; }
/* Logo DIEM : caché en haut de page (le thème le fait apparaître au défilement, on reprend la main) */
#diem-header.diem-ht-fusion a.bricks-link-wrapper > svg {
  opacity: 0 !important; transform: translateY(12px); pointer-events: none;
  transition: opacity .45s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}
#diem-header.diem-ht-fusion a.bricks-link-wrapper { pointer-events: none; }
html.diem-colle #diem-header.diem-ht-fusion #header-txt-left .diem-ht { opacity: 0; transform: translateX(-18px); }
html.diem-colle #diem-header.diem-ht-fusion a.bricks-link-wrapper { pointer-events: auto; }
html.diem-colle #diem-header.diem-ht-fusion a.bricks-link-wrapper > svg { opacity: 1 !important; transform: none; pointer-events: auto; transition-delay: .18s; }
/* Tablette : « Condos locatifs / Secteur Charlesbourg » sur deux lignes et « Réserver votre unité » sans son trait,
   sinon les deux touchent l'emblème entre 768 et 900 px environ */
@media (min-width: 768px) and (max-width: 1023px) {
  #diem-header.diem-ht-fusion #header-txt-left .diem-ht { display: block; }
  #diem-header.diem-ht-fusion #header-txt-left .diem-ht + .diem-ht { margin-left: 0; }
  #diem-header .diem-cta-entete__trait { display: none !important; }
}
@media (max-width: 767px) {
  #diem-header.diem-ht-fusion { --diem-emb: 40px; }
  #diem-header.diem-ht-fusion #header-txt-left { font-size: 10px; }
  #diem-header.diem-ht-fusion #header-txt-left .diem-ht { display: block; }
  #diem-header.diem-ht-fusion #header-txt-left .diem-ht + .diem-ht { margin-left: 0; } /* déjà sur deux lignes */
  #diem-header.diem-ht-fusion a.bricks-link-wrapper > svg { height: 34px !important; width: auto !important; }
}

/* Arrivée sur la page : emblème, texte, « Plans et prix » (le trait s'allonge), puis « Menu » */
@keyframes diem-h-emb { from { opacity: 0; transform: translateY(10px) scale(.88); } }
@keyframes diem-h-gauche { from { opacity: 0; transform: translateX(-16px); } }
@keyframes diem-h-droite { from { opacity: 0; transform: translateX(14px); } }
@keyframes diem-h-trait { from { width: 0; } }
@keyframes diem-h-fondu { from { opacity: 0; } }
@keyframes diem-h-ligne { from { transform: scaleX(0); } }
#diem-header.diem-ht-fusion > .brxe-container > .brxe-block > svg { animation: diem-h-emb .9s cubic-bezier(.2, .7, .2, 1) .1s backwards; }
#diem-header.diem-ht-fusion #header-txt-left .diem-ht { animation: diem-h-gauche .8s cubic-bezier(.2, .7, .2, 1) .35s backwards; }
#diem-header.diem-ht-fusion #header-txt-left .diem-ht + .diem-ht { animation-delay: .5s; }
.diem-cta-entete__trait { animation: diem-h-trait .7s cubic-bezier(.2, .7, .2, 1) .6s backwards; }
.diem-cta-entete__t { animation: diem-h-fondu .6s ease .85s backwards; }
.diem-menu__mot { animation: diem-h-droite .7s cubic-bezier(.2, .7, .2, 1) .95s backwards; }
.diem-menu .hamburger-menu span { animation: diem-h-ligne .5s cubic-bezier(.2, .7, .2, 1) backwards; }
.diem-menu .hamburger-menu span:nth-child(1) { animation-delay: 1.05s; }
.diem-menu .hamburger-menu span:nth-child(2) { animation-delay: 1.15s; }
.diem-menu .hamburger-menu span:nth-child(3) { animation-delay: 1.25s; }
@media (prefers-reduced-motion: reduce) {
  #diem-header.diem-ht-fusion *, .diem-cta-entete__trait, .diem-cta-entete__t, .diem-menu__mot { animation: none !important; transition-duration: .01s !important; }
}

/* En-tête, à droite : « Plans et prix » (écrit comme les liens du site), puis « Menu » et l'icône à 3 lignes */
.diem-entete-actions { display: flex; align-items: center; gap: clamp(24px, 2.8vw, 48px); justify-self: end; margin-left: auto; width: max-content; }
.diem-cta-entete {
  display: flex; align-items: center; gap: 14px; text-decoration: none; white-space: nowrap;
  font-family: museo-sans, sans-serif; font-style: italic; font-weight: 300; font-size: 18px; text-transform: uppercase;
  color: var(--peach, #f49f68); transition: opacity .3s;
}
.diem-cta-entete__trait { display: block; width: 32px; height: 1px; background: currentColor; transition: width .3s ease; }
.diem-cta-entete:hover .diem-cta-entete__trait { width: 48px; }
#diem-header.light .diem-cta-entete { color: var(--dark-green-a, #433f27); }
#diem-header.menu-open .diem-cta-entete { opacity: 0; pointer-events: none; }

.diem-menu { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.diem-menu__mot {
  font-family: museo-sans, sans-serif; font-size: 16px; font-weight: 300; text-transform: uppercase; letter-spacing: 2px;
  color: var(--light-green, #c4bea2); transition: color .25s;
}
#diem-header.light .diem-menu__mot, #diem-header.menu-open .diem-menu__mot { color: var(--dark-green-a, #433f27); }
.diem-menu .hamburger-menu { position: relative; width: 30px; height: 18px; justify-self: auto; }
.diem-menu .hamburger-menu span:nth-child(n) { left: 0; right: auto; width: 100%; transform-origin: center; }
.diem-menu .hamburger-menu span:nth-child(1) { top: 0; }
.diem-menu .hamburger-menu span:nth-child(2) { top: 8px; left: auto; right: 0; width: 60%; transform-origin: right center; }
.diem-menu .hamburger-menu span:nth-child(3) { top: 16px; }
#diem-header.menu-open .diem-menu .hamburger-menu span:nth-child(1) { top: 8px; transform: rotate(45deg); }
#diem-header.menu-open .diem-menu .hamburger-menu span:nth-child(2) { opacity: 0; }
#diem-header.menu-open .diem-menu .hamburger-menu span:nth-child(3) { top: 8px; transform: rotate(-45deg); }
.diem-menu:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }
/* Survol : les lignes se décalent (celle du milieu s'allonge, celle du bas se raccourcit), le mot se rapproche */
.diem-menu .hamburger-menu span:nth-child(n) { transition: width .35s cubic-bezier(.2, .7, .2, 1), top .25s ease, transform .25s ease, opacity .25s ease, background-color .25s ease; }
.diem-menu__mot { transition: color .25s, transform .35s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) {
  #diem-header:not(.menu-open) .diem-menu:hover .hamburger-menu span:nth-child(1) { width: 70%; left: auto; right: 0; }
  #diem-header:not(.menu-open) .diem-menu:hover .hamburger-menu span:nth-child(2) { width: 100%; }
  #diem-header:not(.menu-open) .diem-menu:hover .hamburger-menu span:nth-child(3) { width: 45%; left: auto; right: 0; }
  #diem-header:not(.menu-open) .diem-menu:hover .diem-menu__mot { transform: translateX(-4px); }
}
@media (max-width: 767px) {
  .diem-cta-entete { display: none; }
  .diem-menu { gap: 8px; }
  .diem-menu__mot { font-size: 11px; letter-spacing: 1px; }
  .diem-menu .hamburger-menu { width: 24px; height: 14px; }
  .diem-menu .hamburger-menu span:nth-child(2) { top: 6px; }
  .diem-menu .hamburger-menu span:nth-child(3) { top: 12px; }
  #diem-header.menu-open .diem-menu .hamburger-menu span:nth-child(1),
  #diem-header.menu-open .diem-menu .hamburger-menu span:nth-child(3) { top: 6px; }
}

/* Bouton fixe « Prendre rendez-vous maintenant », en arche comme la carte « DIEM Origines » */
.diem-rdv {
  position: fixed; right: 24px; bottom: 24px; z-index: 90; box-sizing: border-box;
  width: 156px; height: 176px; padding: 46px 12px 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: var(--dark-green-a, #433f27); border: 2px solid var(--light-green, #c4bea2); border-radius: 78px 78px 0 0;
  text-align: center; text-decoration: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  transition: transform .3s ease, border-color .3s ease, opacity .3s ease;
}
.diem-rdv__t { font-family: Cambo, serif; font-size: 15px; line-height: 1.2; letter-spacing: 1px; text-transform: uppercase; color: var(--light-green, #c4bea2); }
.diem-rdv__m { font-family: museo-sans, sans-serif; font-size: 14px; font-style: italic; font-weight: 300; text-transform: uppercase; color: var(--peach, #f49f68); }
.diem-rdv:hover { transform: translateY(-4px); border-color: var(--peach, #f49f68); }
body:has(#diem-header.menu-open) .diem-rdv { opacity: 0; pointer-events: none; }
/* Entièrement sous le hero ou le pied de page (voir ajustements.js) */
.diem-rdv.is-cache { pointer-events: none; }
@media (max-width: 767px) {
  .diem-rdv { right: 12px; bottom: 12px; width: 104px; height: 120px; padding: 30px 8px 12px; gap: 4px; border-radius: 52px 52px 0 0; }
  .diem-rdv__t { font-size: 12px; letter-spacing: .5px; }
  .diem-rdv__m { font-size: 11px; }
}

/* Tuiles à états (accueil : Horizon / Origines ; Projet : 3 points) : flèches gauche / droite sous le texte */
.diem-tuile-nav { position: absolute; bottom: 7%; z-index: 3; display: flex; align-items: center; gap: 18px; }
.diem-tuile-nav button {
  display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border-radius: 50%; cursor: pointer;
  background: transparent; border: 1px solid currentColor; color: inherit; opacity: .9;
  transition: opacity .25s ease, transform .25s ease, background-color .25s ease;
}
.diem-tuile-nav button svg { width: 22px; height: 22px; }
/* Les tracés de la tuile sont recolorés en remplissage par le script : les flèches restent des traits */
.diem-tuile-nav button svg path { fill: none !important; stroke: currentColor; }
.diem-tuile-nav button:hover:not(:disabled) { opacity: 1; transform: scale(1.06); background-color: rgba(244, 159, 104, .12); }
.diem-tuile-nav button:disabled { opacity: .28; cursor: default; }
.diem-tuile-nav button:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.diem-tuile-nav__n { min-width: 64px; text-align: center; font-family: museo-sans, sans-serif; font-size: 14px; letter-spacing: 2px; }
@media (max-width: 767px) {
  .diem-tuile-nav { bottom: 4%; gap: 12px; }
  .diem-tuile-nav button { width: 42px; height: 42px; }
}

/* Accueil, tuile Horizon / Origines : grands textes plus petits */
#brxe-603c6a, #brxe-vttche { font-size: clamp(18px, 1.3vw, 24px) !important; line-height: 1.4; }

/* Projet, carte DIEM Origines : « À venir » en pleine opacité */
#brxe-eieylr { opacity: 1 !important; }

/* Projet, illustration des deux bâtiments : DIEM Horizon (orange) cliquable, vers le sélecteur de plans */
.diem-bat-horizon {
  position: absolute; z-index: 5; display: block; cursor: pointer; /* au-dessus de l'illustration (z-index 3) */
  clip-path: polygon(32.78% 53.90%, 43.27% 44.99%, 48.78% 42.43%, 62.15% 32.41%, 62.94% 33.41%, 66.08% 31.29%, 67.40% 28.95%, 67.66% 14.25%, 68.44% 12.25%, 69.76% 12.25%, 73.43% 5.01%, 75.79% 5.57%, 76.57% 3.79%, 79.20% 4.01%, 79.98% 2.23%, 83.65% 2.23%, 99.13% 31.40%, 99.13% 55.12%, 98.60% 63.92%, 78.93% 71.38%, 65.30% 80.73%, 54.81% 85.19%, 43.27% 97.44%, 40.91% 97.88%, 38.29% 92.87%, 37.76% 82.07%, 35.66% 75.95%, 35.40% 70.60%, 33.83% 68.04%, 33.30% 68.82%, 32.78% 54.57%);
  background: rgba(255, 244, 232, 0); transition: background-color .3s ease;
}
.diem-bat-horizon:hover, .diem-bat-horizon:focus-visible { background: rgba(255, 244, 232, .22); }

/* DIEM Horizon, section des inclusions : sans la ligne horizontale sous le titre */
#brxe-a6830d { display: none !important; }
/* Projet, vignette DIEM Origines : sans « 57 unités sur 5 étages » */
#brxe-egbqjv { display: none !important; }

/* Sélecteur de plans, fenêtre « Visiter l'unité » : formulaire en deux colonnes, champs soulignés (comme LePatriote).
   Le type d'unité est masqué : l'unité est déjà dans le message. */
.lps-dlg-visit .lps-visit-form .wpcf7-form > p {
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px 40px; margin: 0;
}
.lps-dlg-visit .lps-visit-form .wpcf7-form > p > br { display: none; }
.lps-dlg-visit .lps-visit-form .wpcf7-form-control-wrap { display: block; position: relative; }
.lps-dlg-visit .lps-visit-form .wpcf7-form-control-wrap[data-name="unit_text"] { display: none; }
.lps-dlg-visit .lps-visit-form .wpcf7-form-control-wrap[data-name="message"],
.lps-dlg-visit .lps-visit-form .btn-submit { grid-column: 1 / -1; }
.lps-dlg-visit .lps-visit-form input.wpcf7-form-control:not([type="submit"]),
.lps-dlg-visit .lps-visit-form textarea.wpcf7-form-control {
  width: 100%; box-sizing: border-box; margin: 0; padding: 12px 0 10px;
  border: 0; border-bottom: 1px solid var(--dark-green-a, #433f27); border-radius: 0; background: transparent;
  font-family: museo-sans, sans-serif; font-size: 18px; font-weight: 300; color: var(--dark-green-a, #433f27);
  box-shadow: none; outline: none; transition: border-color .2s ease;
}
.lps-dlg-visit .lps-visit-form textarea.wpcf7-form-control { min-height: 150px; resize: vertical; line-height: 1.5; }
.lps-dlg-visit .lps-visit-form input.wpcf7-form-control::placeholder,
.lps-dlg-visit .lps-visit-form textarea.wpcf7-form-control::placeholder { color: rgba(67, 63, 39, .55); opacity: 1; }
.lps-dlg-visit .lps-visit-form .wpcf7-form-control:focus { border-bottom-color: var(--peach, #f49f68); }
.lps-dlg-visit .lps-visit-form .wpcf7-not-valid { border-bottom-color: #c0392b; }
.lps-dlg-visit .lps-visit-form .wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: 13px; color: #c0392b; }
.lps-dlg-visit .lps-visit-form .btn-submit { display: flex; align-items: center; margin-top: 10px; }
.lps-dlg-visit .lps-visit-form .btn-submit .line { display: none; }
.lps-dlg-visit .lps-visit-form input[type="submit"] {
  appearance: none; cursor: pointer; padding: 14px 30px; border: 1.5px solid var(--dark-green-a, #433f27); border-radius: 0;
  background: transparent; color: var(--dark-green-a, #433f27);
  font-family: museo-sans, sans-serif; font-size: 15px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase;
  transition: background-color .25s ease, color .25s ease;
}
.lps-dlg-visit .lps-visit-form input[type="submit"]:hover { background: var(--dark-green-a, #433f27); color: #fff; }
.lps-dlg-visit .lps-visit-form .wpcf7-response-output { margin: 18px 0 0; font-size: 14px; }
@media (max-width: 600px) {
  .lps-dlg-visit .lps-visit-form .wpcf7-form > p { grid-template-columns: 1fr; gap: 18px; }
}

/* Accueil, grand écran : le hero n'est plus limité à 1920 px (bandes vides de chaque côté au-delà) */
@media (min-width: 1921px) {
  #brxe-803a5a { max-width: none !important; }
}

/* Téléphone : formulaire du bas de page sur une colonne (les champs coupaient leur libellé) */
@media (max-width: 478px) {
  .prefooter .wpcf7-form > p { grid-template-columns: 1fr !important; }
  .prefooter .wpcf7-form > p > * { grid-column: 1 / -1 !important; } /* certains champs du site sont en « span 2 » */
  .prefooter .wpcf7-form-control-wrap input:not([type="checkbox"]), .prefooter .wpcf7-form-control-wrap select { width: 100% !important; max-width: none !important; } /* pas la case de consentement */
}

/* Téléphone, DIEM Horizon : chaque prix sur une seule ligne */
@media (max-width: 478px) {
  #brxe-92d6f0 h3 { font-size: 15px !important; white-space: nowrap; }
  #brxe-92d6f0 h3 strong { display: inline !important; }
  #brxe-92d6f0 h3 strong::before { content: none !important; } /* saut de ligne de la règle mobile (≤ 767 px) */
}

/* Espaces communs (salle d'entraînement) et Localisation (vue aérienne) : image agrandie dans sa colonne, au format
   3:2. La section fait un écran de haut, contenu centré sous les titres : au-delà de ces tailles, le bloc remonte
   sous les titres (Bricks garde les tailles d'origine, 522 et 518 px, sur tablette et téléphone). */
@media (min-width: 992px) {
  #brxe-hqrgdl { width: 100% !important; height: auto !important; aspect-ratio: 3 / 2; }
  #brxe-twwccc { width: min(640px, 100%) !important; height: auto !important; aspect-ratio: 3 / 2; }
}

/* Formulaire de contact (Contact, bas de page, fenêtre du sélecteur) : case de consentement sur toute la largeur */
.wpcf7-form .wpcf7-form-control-wrap[data-name="consent"] { grid-column: 1 / -1 !important; display: block; }
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item { display: block; margin: 0; }
.wpcf7-form .wpcf7-acceptance label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13px; line-height: 1.5; }
.wpcf7-form .wpcf7-acceptance input[type="checkbox"] { flex: 0 0 auto; width: 15px; height: 15px; margin: 2px 0 0; accent-color: var(--peach, #f49f68); }

/* DIEM Origines retiré du site (novembre 2026) : vignette Origines sur l'illustration de Projet. Sur la bande de
   l'accueil, « Origines · À venir » est remplacé (dans Bricks) par « Habitez la vue », écrit comme les accroches du
   site (Cambo en capitales, vert foncé) ; l'opacité réduite de l'ancien titre Origines est annulée */
#brxe-yuehyg { display: none !important; }
/* Téléphone et tablette : la grille prévue pour « Origines | À venir » le calait à gauche ; centré comme le reste */
@media (max-width: 991px) {
  #s03-element-03 > #brxe-9b1927 { grid-column: 1 / -1 !important; justify-self: center !important; text-align: center; }
}
#brxe-9b1927 {
  font-family: Cambo, serif !important; font-weight: 400 !important; font-size: clamp(16px, 1.6vw, 30px) !important;
  letter-spacing: .08em !important; text-transform: uppercase !important; white-space: nowrap; opacity: 1 !important;
}

/* Accueil, tuile DIEM Horizon (seul état) : vert clair, texte et emblème en vert foncé, photo à coins droits.
   Téléphone (section séparée) : le bloc de texte passe du gris au même vert clair. */
.sticky-morph-slides-section.diem-tuile-unique { background-color: var(--light-green, #c4bea2) !important; }
/* Les titres et textes ont leur propre couleur claire dans Bricks, et le pêche se lit mal sur le vert clair : tout
   le texte de l'état passe en vert foncé */
.sticky-morph-slides-section.diem-tuile-unique .txt,
.sticky-morph-slides-section.diem-tuile-unique .slide-trigger,
.sticky-morph-slides-section.diem-tuile-unique .slide-trigger * { color: var(--dark-green-a, #433f27) !important; }
.sticky-morph-slides-section.diem-tuile-unique path { fill: var(--dark-green-a, #433f27) !important; }
.sticky-morph-slides-section.diem-tuile-unique .frame { border-radius: 0 !important; }
#brxe-353683 { background-color: var(--light-green, #c4bea2) !important; }

/* Listes : puce DIEM (petite arche pleine, comme les arches du site, dans la couleur du texte) à la place du « _ »
   ajouté par le CSS global de Bricks */
.brxe-list li:has(.icon i.ti-plus) .title::before {
  content: "" !important;
  display: inline-block; width: .46em; height: .58em; margin-right: .7em; vertical-align: .02em;
  background-color: currentColor; opacity: .8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'%3E%3Cpath d='M0 15V6a6 6 0 0 1 12 0v9z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'%3E%3Cpath d='M0 15V6a6 6 0 0 1 12 0v9z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Projet, « Sans oublier… Le site et sa nature » : léger grain de tissu dans le même vert clair (intensité réduite de 70 % à la demande du client) */
/* Fond à 85 % d'opacité (la vue transparaît légèrement), textes à 100 % : le fond passe sur un calque à part.
   Même traitement sur « La vue, un privilège au quotidien » : Localisation (vert clair) et DIEM Horizon (beige) */
#brxe-ouyvhz, #brxe-ebfqyc, #brxe-dd0877 { background: none !important; position: relative; isolation: isolate; }
#brxe-ouyvhz::before, #brxe-ebfqyc::before, #brxe-dd0877::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: #c4bea2 url("diem-tissu-clair-doux.jpg") center / cover; opacity: .85;
}
#brxe-dd0877::before { background: #ccc3b6 url("diem-tissu-beige-doux.jpg") center / cover; }

/* Accueil, tuile DIEM Horizon : vidéo de la cuisine à la place du rendu 3D (voir ajustements.js, videoTuile) */
#brxe-cgxxzh .diem-tuile-video, .front-img .diem-tuile-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.diem-video-remplace-image { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; }
img.diem-image-remplacee { display: none !important; }
/* Vidéos calées par ajustements.js sur une image (Espaces communs #brxe-hqrgdl, DIEM Horizon #brxe-366656) */
.diem-video-sur-image { position: absolute; display: block; object-fit: cover; pointer-events: none; }
.diem-tuile-video--mobile { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
#brxe-28ce17.diem-tuile-video-remplacee { display: none !important; }

/* Textes en deux paragraphes, le premier en accroche (plus grand), la suite en paragraphe courant : Espaces communs
   (à côté de la salle d'entraînement), Localisation (à côté de la vue aérienne), Projet (haut de page) et accueil
   (« DIEM est né d'un dialogue… ») */
#brxe-zatojo > p:first-child, #brxe-hcpdea > p:first-child, #brxe-rzhmcl > p:first-child, #brxe-4c81f3 > p:first-child { font-size: 1.45em !important; line-height: 1.45 !important; margin-bottom: 1.1em; }
/* Téléphone : la colonne du hero (hauteur fixe, éléments « wrap ») renvoyait l'image et le texte dans une 2e colonne
   hors écran dès que le texte grandissait ; ils restent sous les titres, dans la marge du bas */
@media (max-width: 767px) {
  #brxe-dvgtqr { flex-wrap: nowrap !important; }
}

/* Espaces communs, « Imaginez… » : même fond toilé que la tuile « Au cœur de Charlesbourg » de l'accueil */
#brxe-wtejmf { background: #433f27 url("/wp-content/uploads/2026/03/texture_diem.jpg") 0 0 / contain repeat !important; }

/* ---- Tour responsive du 9 novembre 2026 ---- */

/* Accueil, tuile DIEM Horizon : deux versions (ordinateur #brxe-yejvdm, téléphone #brxe-8fdb91) étaient affichées
   ensemble de 768 à 1260 px. Version téléphone (image au-dessus du texte) jusqu'à 991 px, tuile ordinateur au-delà. */
@media (min-width: 768px) and (max-width: 991px) {
  #brxe-yejvdm { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1260px) {
  #brxe-8fdb91 { display: none !important; }
}
/* Version téléphone sur vert clair : le lien « Découvrir DIEM Horizon » et son trait passent du pêche au vert foncé */
#brxe-353683 a, #brxe-353683 a * { color: var(--dark-green-a, #433f27) !important; }
#brxe-353683 .brxe-divider .line { border-color: var(--dark-green-a, #433f27) !important; background-color: var(--dark-green-a, #433f27) !important; }

/* Projet, tuile des 3 points sur téléphone : même alternance que sur ordinateur (clair, foncé, clair) ; le CSS global
   de Bricks mettait le fond clair sur les états pairs */
@media (max-width: 767px) {
  #brxe-mevnjo .mobile-distinct-point-wrapper:nth-of-type(2n+1) { background-color: var(--light-green, #c4bea2) !important; }
  #brxe-mevnjo .mobile-distinct-point-wrapper:nth-of-type(2n+1) .txt { color: var(--dark-green-a, #433f27) !important; }
  #brxe-mevnjo .mobile-distinct-point-wrapper:nth-of-type(2n+1) path { fill: var(--dark-green-a, #433f27) !important; }
  #brxe-mevnjo .mobile-distinct-point-wrapper:nth-of-type(2n) { background-color: transparent !important; }
  #brxe-mevnjo .mobile-distinct-point-wrapper:nth-of-type(2n) .txt { color: var(--light-green, #c4bea2) !important; }
  #brxe-mevnjo .mobile-distinct-point-wrapper:nth-of-type(2n) path { fill: var(--light-green, #c4bea2) !important; }
}

/* DIEM Horizon, prix : le montant ne se coupe plus en deux (« 1 / 370 $ ») quand la colonne est étroite (tablette) */
#brxe-92d6f0 h3 strong { white-space: nowrap; }

/* Espaces communs, tablette : la 1re ligne du titre du hero (animée vers right: 35 %) sortait de l'écran à gauche */
@media (min-width: 768px) and (max-width: 1023px) {
  #hero-anim-txt-01 { right: auto !important; left: 0 !important; }
}

/* Contact : formulaire et agenda l'un sous l'autre, carte du bureau sous les informations (tablette) ; champs du
   formulaire sur une colonne (téléphone), comme le formulaire du bas de page */
@media (min-width: 768px) and (max-width: 1023px) {
  #brxe-ebmokl { grid-template-columns: 1fr !important; row-gap: 48px; }
  #bureau-de-location { grid-template-columns: 1fr !important; row-gap: 40px; }
  #bureau-de-location > #brxe-ntfvrw { height: 420px !important; min-height: 0 !important; }
}
@media (max-width: 767px) {
  #diem-contact-form .wpcf7-form > p { grid-template-columns: 1fr !important; }
  #diem-contact-form .wpcf7-form > p > * { grid-column: 1 / -1 !important; }
  #diem-contact-form .wpcf7-form-control-wrap input:not([type="checkbox"]), #diem-contact-form .wpcf7-form-control-wrap select { width: 100% !important; max-width: none !important; }
}

/* Pages sans #section-02 (Réserver votre unité, politique de confidentialité) : le thème ne donne jamais de fond
   à l'en-tête ; une fois la page défilée, le logo DIEM et « Réserver votre unité » passaient sur la photo du sélecteur. */
body:not(:has(#section-02)) #diem-header { transition: background-color .4s ease; }
html.diem-colle body:not(:has(#section-02)) #diem-header { background-color: rgb(67, 63, 39); }
html.diem-colle body:not(:has(#section-02)) #diem-header.light { background-color: rgb(220, 214, 204); }

/* Tuiles à états (accueil DIEM Horizon, Projet 3 points) : le thème leur donne 100vh par état (200 à 300vh) avec
   des panneaux collants, ce qui faisait une pause au défilement. prolongerTuile() remettait la hauteur à auto,
   mais seulement au chargement complet de la page (vidéos, agenda) : la pause restait le temps du chargement. */
.sticky-morph-slides-section { height: auto !important; }

/* Commentaires #2 (11 novembre 2026) — en-tête : « Condos locatifs » en gros sur la première ligne, « Charlesbourg »
   dessous en plus petit ; « Plans et prix » sans le trait devant. */
#diem-header.diem-ht-fusion #header-txt-left { font-size: clamp(15px, 1.4vw, 26px); line-height: 1.1; }
#diem-header.diem-ht-fusion #header-txt-left .diem-ht { display: block; }
#diem-header.diem-ht-fusion #header-txt-left .diem-ht + .diem-ht { margin-left: 0; margin-top: .3em; }
#diem-header.diem-ht-fusion #header-txt-left .diem-ht--lieu { font-size: .58em; letter-spacing: .18em; }
@media (max-width: 767px) {
  #diem-header.diem-ht-fusion #header-txt-left { font-size: 12px; }
  #diem-header.diem-ht-fusion #header-txt-left .diem-ht--lieu { font-size: .72em; }
}
.diem-cta-entete__trait { display: none !important; }
/* Menu plein écran : vert pâle uni (avant : dégradé pêche → vert) */
#diem-header.menu-open { background-image: none !important; background-color: var(--light-green, #c4bea2) !important; }

/* Accueil, section du projet : trois arches 3½ / 4½ / 5½ (même forme que « Prendre rendez-vous ») à la place de l'image */
.diem-typos { display: flex; justify-content: center; align-items: flex-end; gap: clamp(16px, 2.2vw, 40px); flex-wrap: wrap; }
.diem-typo {
  box-sizing: border-box; width: clamp(160px, 13.5vw, 240px); aspect-ratio: 156 / 176; padding: 18% 10px 10%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--dark-green-a, #433f27); border: 2px solid var(--light-green, #c4bea2); border-radius: 999px 999px 0 0;
  text-align: center; text-decoration: none; transition: transform .3s ease, border-color .3s ease;
}
.diem-typo:hover, .diem-typo:focus-visible { transform: translateY(-4px); border-color: var(--peach, #f49f68); }
.diem-typo__t { font-family: Cambo, serif; font-size: clamp(30px, 2.6vw, 44px); line-height: 1; color: var(--light-green, #c4bea2); }
.diem-typo__a, .diem-typo__m { font-family: museo-sans, sans-serif; font-size: 13px; font-weight: 300; letter-spacing: .12em; text-transform: uppercase; color: var(--light-green, #c4bea2); opacity: .85; }
.diem-typo__p { font-family: Cambo, serif; font-size: clamp(22px, 1.9vw, 32px); line-height: 1.1; color: var(--peach, #f49f68); }
@media (max-width: 767px) {
  .diem-typos { gap: 10px; flex-wrap: nowrap; }
  .diem-typo { width: calc((100% - 20px) / 3); padding: 22% 4px 10%; gap: 3px; }
  .diem-typo__t { font-size: 24px; }
  .diem-typo__p { font-size: 16px; }
  .diem-typo__a, .diem-typo__m { font-size: 9px; letter-spacing: .06em; }
}

/* Accueil, bande entre le projet et la tuile Horizon : la photo de la vue (garde-corps) avec « DIEM Horizon | Été 2027 ».
   Le grand DIEM en lettres espacées est retiré ; textes en clair sur un voile qui assombrit le bas de la photo. */
.page-id-1100 #section-03 {
  background: var(--dark-green-a, #433f27) url("/wp-content/uploads/2026/11/vue-horizon-diem-garde-corps-2048x1365.webp") center calc(51% - 50px) / cover no-repeat !important;
  /* Bande de 66vh ; photo remontée de 50 px (moins de ciel en haut, plus de garde-corps en bas) */
  height: 66vh !important; min-height: 0 !important;
}
.page-id-1100 #section-03::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(40, 37, 22, .05) 35%, rgba(40, 37, 22, .55) 100%); }
.page-id-1100 #section-03 > * { position: relative; }
.page-id-1100 #section-03 #s03-element-01 { display: none !important; }
.page-id-1100 #section-03 #s03-element-02 *, .page-id-1100 #section-03 #s03-element-03 * { color: #f3efe6 !important; }
.page-id-1100 #section-03 #s03-element-02 .brxe-divider .line { border-color: #f3efe6 !important; }
.page-id-1100 #section-03 #s03-element-02 .brxe-text-basic { text-transform: uppercase; letter-spacing: .14em; }

/* Accueil, tuile DIEM Horizon : une seule image, la vidéo (plus de photo du balcon derrière, ni de cadre) */
#brxe-yejvdm #brxe-uuooww { visibility: hidden !important; }
#brxe-yejvdm #brxe-wgcofq { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; max-height: none !important; max-width: none !important; margin: 0 !important; transform: none !important; border-radius: 0 !important; }
#brxe-yejvdm #brxe-cgxxzh { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; max-height: none !important; max-width: none !important; margin: 0 !important; transform: none !important; border-radius: 0 !important; }

/* Accueil, espaces communs : le carrousel reste dans la colonne de gauche (rien sous le texte) ; à droite, la liste
   des espaces avec leur icône (ajustements.js) : un clic amène l'image dans le carrousel et la met en évidence. */
@media (min-width: 992px) {
  #section-05 #brxe-00d0c4 { width: 58% !important; max-width: 58% !important; }
  #section-05 #brxe-00d0c4 .splide__track { overflow: hidden; }
}
#section-05 .splide__slide { transition: opacity .4s ease; }
#section-05.diem-ec-choix .splide__slide:not(.diem-ec-actif) { opacity: .45; }
#section-05 .splide__slide.diem-ec-actif img { outline: 2px solid var(--peach, #f49f68); outline-offset: -2px; }
.diem-ec-liste { list-style: none; margin: 36px 0 32px; padding: 0; display: grid; gap: 4px; }
.diem-ec-liste button {
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid rgba(196, 190, 162, .25);
  background: none; cursor: pointer; text-align: left; color: var(--light-green, #c4bea2);
  font-family: museo-sans, sans-serif; font-size: 15px; font-weight: 300; letter-spacing: .08em; text-transform: uppercase;
  transition: color .25s ease, padding .25s ease;
}
.diem-ec-liste button:hover, .diem-ec-liste button:focus-visible, .diem-ec-liste button[aria-current="true"] { color: var(--peach, #f49f68); padding-left: 6px; }
.diem-ec-ic { flex: none; width: 34px; height: 34px; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }

/* Le projet, prix « À partir de » : en vert (avant : pêche) */
#brxe-92d6f0, #brxe-92d6f0 * { color: var(--dark-green-a, #433f27) !important; }

/* Accueil : sélecteur de plans et carrousel d'images intérieures (copiés de « Le projet ») sur le beige de cette page.
   Sans fond, le hero de l'accueil (collant, sous les sections) apparaissait au travers. */
.page-id-1100 #plans, .page-id-1100 #brxe-ffxzqo { position: relative; background-color: #dcd6cc; }
/* Même chose sur téléphone (tuile #brxe-8fdb91) : la vidéo seule, pleine largeur, sans la photo du balcon ni le masque */
#brxe-8fdb91 #brxe-c577ef { position: relative; background-image: none !important; }
#brxe-8fdb91 .diem-tuile-video--mobile { position: absolute; inset: 0; width: 100% !important; height: 100% !important; aspect-ratio: auto; object-fit: cover; -webkit-mask: none !important; mask: none !important; clip-path: none !important; }
/* Bande vue (accueil) : « DIEM Horizon | Été 2027 » centré dans la moitié gauche, « Habitez la vue » dans la moitié droite
   (la grille gardait 3 colonnes, dont celle du grand DIEM retiré). Tablette et téléphone : empilés, centrés (inchangé). */
@media (min-width: 992px) {
  .page-id-1100 #section-03 #brxe-1a558a { display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: 0 !important; align-items: center !important; width: 100% !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; }
  .page-id-1100 #section-03 #s03-element-02, .page-id-1100 #section-03 #s03-element-03 { grid-column: auto !important; justify-self: center !important; margin: 0 !important; }
  .page-id-1100 #section-03 #s03-element-03 > #brxe-9b1927 { text-align: center; }
}
/* Carrousel d'images intérieures (Le projet #brxe-fyutnb, accueil #brxe-rgxrxr) : légende et flèches collées sous l'image
   (avant : 132 px plus bas, comme les autres carrousels) */
@media (min-width: 768px) {
  :is(#brxe-fyutnb, #brxe-rgxrxr) .diem-legende { bottom: -52px; }
  :is(#brxe-fyutnb, #brxe-rgxrxr) .swiper-button { top: auto !important; bottom: -65px !important; } /* décalées de -14 px par le thème : alignées sur la légende */
}

/* Arches des typologies : quatre (Studio, 3½, 4½, 5½), elles se partagent la largeur ; téléphone : deux par rangée.
   Variante claire (page « Le projet », fond beige) : arche pâle, contour et textes vert foncé, prix en pêche. */
.diem-typos { gap: clamp(10px, 1.4vw, 26px); flex-wrap: nowrap; }
.diem-typo { flex: 1 1 0; width: auto; min-width: 0; max-width: 220px; }
.diem-typos--clair .diem-typo { background: #ebe7df; border-color: var(--dark-green-a, #433f27); border-width: 1.5px; }
.diem-typos--clair .diem-typo__t, .diem-typos--clair .diem-typo__a, .diem-typos--clair .diem-typo__m { color: var(--dark-green-a, #433f27) !important; }
.diem-typos--clair .diem-typo__p { color: var(--peach, #f49f68) !important; }
.diem-typos--clair .diem-typo:hover, .diem-typos--clair .diem-typo:focus-visible { border-color: var(--peach, #f49f68); }
.diem-typos--clair { justify-content: flex-start; }
@media (max-width: 767px) {
  .diem-typos { flex-wrap: wrap; justify-content: center; gap: 12px; }
  .diem-typo { flex: 0 0 calc(50% - 6px); max-width: 170px; padding: 20% 6px 10%; }
  .diem-typo__t { font-size: 28px; }
  .diem-typo__p { font-size: 19px; }
  .diem-typo__a, .diem-typo__m { font-size: 10px; letter-spacing: .08em; }
}

/* [diem_espaces_slider] — Le projet : espaces communs extérieurs et intérieurs dans un seul carrousel, même gabarit
   que le carrousel d'images intérieures (image pleine largeur, légende et flèches dessous) */
.diem-ecs { position: relative; width: 100%; outline: none; }
.diem-ecs__piste { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.diem-ecs__piste::-webkit-scrollbar { display: none; }
.diem-ecs__diapo { flex: 0 0 100%; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.diem-ecs__img { display: block; width: 100%; height: calc(100vh - 270px); min-height: 320px; object-fit: cover; }
.diem-ecs__leg {
  display: flex; align-items: center; gap: 18px; min-height: 52px; padding: 14px 140px 0 0;
  font-family: Cambo, Georgia, serif; color: var(--dark-green-a, #433f27);
}
.diem-ecs__groupe { font-size: clamp(15px, 1.2vw, 22px); letter-spacing: .08em; text-transform: uppercase; }
.diem-ecs__ic { flex: none; width: 40px; height: 40px; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.diem-ecs__titre { font-size: clamp(14px, 1vw, 18px); letter-spacing: .03em; }
.diem-ecs__nav { position: absolute; right: 0; bottom: 12px; display: flex; gap: 70px; }
.diem-ecs__nav button { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--dark-green-a, #433f27); transition: opacity .25s ease; }
.diem-ecs__nav button::before { content: ''; display: block; width: 14px; height: 14px; margin: auto; border: solid currentColor; border-width: 0 0 1.5px 1.5px; transform: rotate(45deg); }
.diem-ecs__nav .diem-ecs__suiv::before { transform: rotate(-135deg); }
.diem-ecs__nav button:disabled { opacity: .3; cursor: default; }
@media (max-width: 767px) {
  .diem-ecs__img { height: 62vw; min-height: 0; }
  .diem-ecs__leg { flex-wrap: wrap; gap: 6px 12px; padding: 12px 0 0; }
  .diem-ecs__ic { width: 30px; height: 30px; }
  .diem-ecs__titre { flex-basis: 100%; }
  .diem-ecs__nav { position: static; justify-content: flex-end; gap: 40px; margin-top: 8px; }
}
/* « Plans et prix » (en-tête) : petit décalage au survol */
.diem-cta-entete__t { display: inline-block; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.diem-cta-entete:hover .diem-cta-entete__t, .diem-cta-entete:focus-visible .diem-cta-entete__t { transform: translateX(-6px); }

/* Liens d'action (« Découvrir DIEM Horizon », « Explorer le quartier »…) sur toutes les pages : le trait à gauche est
   remplacé par une petite flèche (chevron, comme celles des carrousels) à droite du texte ; au survol, une ligne
   vient s'animer depuis la pointe du chevron et en fait une flèche. Deux formes : les liens Bricks (trait + texte)
   et les liens des textes ACF (.diem-cta-lien). La flèche prend la couleur du texte. */
a.brxe-block:has(> .brxe-divider + .brxe-heading) > .brxe-divider { display: none !important; }
a.brxe-block:has(> .brxe-divider + .brxe-heading) > .brxe-heading,
a.diem-cta-lien { position: relative; padding-right: 30px !important; }
a.brxe-block:has(> .brxe-divider + .brxe-heading) > .brxe-heading::after,
a.diem-cta-lien::after {
  content: ''; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; box-sizing: border-box;
  border: solid currentColor; border-width: 1.2px 1.2px 0 0; transform: translateY(-50%) rotate(45deg);
  transition: right .35s cubic-bezier(.2, .7, .2, 1);
}
a.brxe-block:has(> .brxe-divider + .brxe-heading) > .brxe-heading::before,
a.diem-cta-lien::before {
  content: '' !important; display: block; position: absolute; right: 4px; top: 50%; width: 11px !important; height: 1.2px !important;
  margin: -.6px 0 0 !important; border: 0 !important; background: currentColor !important;
  transform: scaleX(0); transform-origin: right center; transition: transform .35s cubic-bezier(.2, .7, .2, 1), right .35s cubic-bezier(.2, .7, .2, 1) !important;
}
a.brxe-block:has(> .brxe-divider + .brxe-heading):is(:hover, :focus-visible) > .brxe-heading::before,
a.diem-cta-lien:is(:hover, :focus-visible)::before { transform: scaleX(1); }

/* Carrousels : la légende de l'image au centre ; flèche gauche tout à gauche, flèche droite tout à droite */
.diem-ecs__leg { justify-content: center; text-align: center; padding: 14px 60px 0; }
.diem-ecs__nav { left: 0; right: 0; justify-content: space-between; pointer-events: none; }
.diem-ecs__nav button { pointer-events: auto; }
@media (max-width: 767px) {
  .diem-ecs__leg { padding: 12px 36px 0; }
  .diem-ecs__titre { flex-basis: auto; }
  .diem-ecs__nav { position: absolute; left: 0; right: 0; bottom: auto; top: calc(62vw + 18px); margin: 0; }
}
@media (min-width: 768px) {
  .brxe-carousel .diem-legende { left: 50%; transform: translateX(-50%); justify-content: center; text-align: center; max-width: calc(100% - 140px); white-space: nowrap; }
  .brxe-carousel:has(.diem-legende) .bricks-swiper-button-prev { left: 0 !important; right: auto !important; transform: translateY(-50%) !important; }
  .brxe-carousel:has(.diem-legende) .bricks-swiper-button-next { right: 0 !important; left: auto !important; transform: translateY(-50%) !important; }
}

/* Le projet, tuile des prix : « Choisir mon unité » à droite, aligné sur le bord droit de l'image et sur le bas des
   quatre arches ; moins d'espace jusqu'au carrousel d'images intérieures */
@media (min-width: 992px) {
  #brxe-63a93a { position: relative; }
  #brxe-dmcta1 { position: absolute !important; right: 0; bottom: 0; margin: 0 !important; }
  #brxe-1e5b47 { padding-bottom: 60px !important; }
  #brxe-998eb0 { padding-top: 120px !important; }
}
/* Cartes du quartier (Leaflet) : leurs calques internes (jusqu'à z-index 1000) passaient par-dessus le bouton fixe
   « Prendre rendez-vous » ; la carte est contenue dans son propre plan */
[data-diemq] { position: relative; z-index: 0; isolation: isolate; }
/* Menu plein écran : même petit décalage au survol que « Plans et prix » dans l'en-tête */
#bloc-menu li.menu-item > a { display: inline-block; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
#bloc-menu li.menu-item > a:is(:hover, :focus-visible) { transform: translateX(-6px); }

/* Accueil (textes inversés le 11 novembre) : section du projet, petit sur-titre « DIEM Horizon  Nouveaux condos
   locatifs » au-dessus du paragraphe (à la place de la phrase d'accroche) ; tuile Horizon, la phrase d'accroche
   « DIEM est né d'un dialogue… » en plus grand, comme avant dans la section du projet */
#brxe-4c81f3 > p.diem-surtitre {
  font-size: 13px !important; line-height: 1.4 !important; margin: 0 0 1.4em !important;
  letter-spacing: .14em; text-transform: uppercase; opacity: .9;
}
#brxe-4c81f3 > p.diem-surtitre strong { font-weight: 600; margin-right: 1.2em; }
:is(#brxe-2b5434, #brxe-a48caf) > p:first-child { font-size: 1.45em !important; line-height: 1.45 !important; margin-bottom: 1.1em; }