/* Galeries des cartes projets : cinq vues sur un cycle de 20 s.
   La premiere vue sert de fond permanent ; les quatre autres passent par-dessus
   et se maintiennent jusqu a ce que la suivante les ait recouvertes. Sans ce
   recouvrement, le fond reapparaissait entre chaque paire. */
@keyframes mmFade5 {
  0%        { opacity: 0; }
  6%, 27%   { opacity: 1; }
  33%, 100% { opacity: 0; }
}

.mm-f5 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: mmFade5 20s linear infinite;
}
.mm-f5-base { animation: none; opacity: 1; }
.mm-f5-2 { animation-delay: 4s; }
.mm-f5-3 { animation-delay: 8s; }
.mm-f5-4 { animation-delay: 12s; }
.mm-f5-5 { animation-delay: 16s; }

/* Sans animation, on montre la première vue seule plutôt qu’un cadre vide. */
@media (prefers-reduced-motion: reduce) {
  .mm-f5 { animation: none; opacity: 0; }
  .mm-f5-base { opacity: 1; }
}

/* Le trait entre les etapes n a de sens que si elles sont sur une ligne. */
@media (max-width: 780px) {
  .mm-step-rule { display: none; }
}

/* Bandeau Maisons neuves / Renovation / Votre projet de A a Z.
   Cinq blocs : deux colonnes de texte, deux photos, une colonne de parcours.
   auto-fit cassait la grille en 4 + 1, on decrit donc les paliers a la main. */
.mm-trio { display: grid; grid-template-columns: 1fr; align-items: stretch; }
.mm-trio > div:nth-child(2), .mm-trio > div:nth-child(4) { min-height: 240px; }

@media (min-width: 700px) {
  .mm-trio { grid-template-columns: 1fr 1fr; }
  .mm-trio > div:nth-child(5) { grid-column: 1 / -1; }
}

@media (min-width: 1180px) {
  .mm-trio { grid-template-columns: 1.15fr 0.85fr 1.15fr 0.85fr 1.05fr; }
  .mm-trio > div:nth-child(5) { grid-column: auto; }
}

/* Boutons repris du hero. */
.mm-btn-clair:hover { background: rgba(255,255,255,0.10) !important; border-color: rgba(255,255,255,0.7) !important; color: #fff !important; border-radius: 14px; }
.mm-btn-sombre:hover { background: #17395E !important; border-color: #17395E !important; color: #fff !important; border-radius: 14px; }

/* Mot qui defile : caracteres empiles, entree par le bas, sortie par le haut. */
.mm-rot { display: inline-grid; overflow: hidden; vertical-align: bottom; padding-bottom: .22em; margin-bottom: -.22em; }
/* Gabarit invisible : tous les mots empiles donnent la largeur au navigateur,
   dans la vraie police et a la vraie taille, sans mesure JavaScript. */
.mm-rot-sizer { grid-area: 1 / 1; display: grid; visibility: hidden; pointer-events: none; }
.mm-rot-sizer > span { grid-area: 1 / 1; white-space: pre; }
.mm-rot-sizer > span[data-lg='en'] { display: none; }
html[lang='en'] .mm-rot-sizer > span[data-lg='fr'] { display: none; }
html[lang='en'] .mm-rot-sizer > span[data-lg='en'] { display: block; }
.mm-rot-stack { grid-area: 1 / 1; position: relative; }
.mm-rot-line { position: absolute; left: 0; top: 0; white-space: pre; }
.mm-rot-c { display: inline-block; will-change: transform, opacity; transition: transform .55s cubic-bezier(.19,1.08,.32,1), opacity .4s ease; }

@media (prefers-reduced-motion: reduce) {
  .mm-rot { transition: none; }
  .mm-rot-c { transition: none; }
}

/* Cartes savoir-faire : photo, titre, description. Sobre, sans cadre. */
.mm-metier img { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.mm-metier:hover img { transform: scale(1.04); }
.mm-metier h3 { position: relative; padding-bottom: 10px; }
.mm-metier h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 26px; height: 2px; background: #2D7DD2; transition: width .45s cubic-bezier(.2,.8,.2,1); }
.mm-metier:hover h3::after { width: 54px; }

/* Banniere CCMI : meme cadrage sur mobile et sur ordinateur. */
@media (max-width: 780px) {
  .mm-ccmi-banniere { aspect-ratio: 4 / 5; min-height: 0; }
}

/* Chronologie du CCMI : cinq etapes, trait de liaison entre les pastilles. */
.mm-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 30px 12px; }
.mm-step-num { position: relative; z-index: 1; width: 36px; height: 36px; margin: 0 auto 20px; border-radius: 50%; background: #17395E; color: #fff; display: grid; place-items: center; font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; }
.mm-step-last { background: #2D7DD2; }
.mm-step-rule { display: none; }

@media (min-width: 640px) { .mm-etapes { grid-template-columns: repeat(3, 1fr); } }

@media (min-width: 1024px) {
  .mm-etapes { grid-template-columns: repeat(5, 1fr); gap: 0 8px; }
  .mm-step-rule { display: block; position: absolute; top: 18px; left: calc(50% + 26px); right: -6px; height: 1px; background: rgba(45,125,210,0.35); }
}

/* Repli du parcours quand animation-timeline n est pas supporte. */
.mm-parcours-js [class*='mmc-'] { animation-timeline: auto; }
.mm-parcours-js [data-mm-etape] { animation: none !important; transition: opacity .45s ease; }
.mm-parcours-js [data-mm-jauge] { animation: none !important; transition: width .2s linear; }

/* Hero : le bloc et ses chiffres doivent tenir dans un ecran des l arrivee. */
.mm-hero { min-height: calc(100svh - var(--mmHead, 0px)); }
.mm-hero .mmc-4463cf9 { padding: 14px 0 18px; }

@media (min-width: 900px) and (min-height: 660px) {
  .mm-hero { height: calc(100svh - var(--mmHead, 0px)); min-height: 0; }
}

/* Sous 900 px la barre etroite occupe deja 66 px : on resserre encore. */
@media (max-width: 899px) {
  .mm-hero .mmc-08c7ed9 { font-size: clamp(20px, 6vw, 26px); }
  .mm-hero .mmc-73d23a3 { font-size: 9.5px; letter-spacing: 0.06em; }
  .mm-hero .mmc-4463cf9 { padding: 10px 0 12px; }
}

/* Sur telephone la hauteur reste un minimum : rien ne doit etre rogne. */
@media (max-width: 899px) {
  .mm-hero { min-height: calc(100svh - var(--mmHead, 0px)); height: auto; overflow: visible; }
  .mm-hero > div:last-child { padding-bottom: 8px; }
}
/* marqueur : mm-hero-mobile */