/* M2V3 Architectes — surcouche du modèle 1 (Liarch) */

/* Charte : sobre, noir et blanc (décision Musa, 18/09/2026) — pas les 4 couleurs du logo */
:root {
  --m2v3-accent: #000000;
  --m2v3-gris: #777777;
  /* Arrondi des photos de réalisations, repris du design validé sur /web1 */
  --m2v3-arrondi: 15px;
}

/* Liens : jamais le bleu par défaut de Bootstrap */
a,
a:hover,
a:focus {
  color: inherit;
}

/* Logo */
.m2v3-logo img {
  display: block;
  width: 150px;
  height: auto;
}

@media (max-width: 575px) {
  .m2v3-logo img {
    width: 110px;
  }
}

/* Photos : cadrage fixe, quelle que soit la source */
.m2v3-cover img {
  display: block;
  width: 100%;
  aspect-ratio: 900 / 777;
  object-fit: cover;
}

.slide img {
  aspect-ratio: 1145 / 650;
  object-fit: cover;
}

/* Équipe */
.m2v3-team {
  padding: 60px 0 20px;
}

.m2v3-team__text {
  max-width: 560px;
  margin: 16px 0 50px;
  color: #666666;
  font-size: 18px;
  line-height: 1.6;
}

.m2v3-team__item {
  margin-bottom: 40px;
}

.m2v3-team__photo {
  overflow: hidden;
  margin-bottom: 20px;
  aspect-ratio: 1 / 1;
  border-radius: var(--m2v3-arrondi);
  background: #f2f2f2;
}

.m2v3-team__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.4s ease, transform 0.6s ease;
}

.m2v3-team__item:hover .m2v3-team__photo img {
  filter: none;
  transform: scale(1.03);
}

.m2v3-team__name {
  font-size: 22px;
  font-weight: 500;
  color: #000000;
}

.m2v3-team__role {
  margin-top: 4px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m2v3-accent);
}

/* Pied de page : liens vers les autres modèles */
.footer__design a {
  color: inherit;
  text-decoration: underline;
}

.m2v3-team__bio {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: #666666;
}

.m2v3-team__photo--trichot img {
  object-position: 65% 30%;
}

/* Réalisations : grille de cartes, chaque carte ouvre la galerie du projet */
.m2v3-projets {
  padding: 40px 0 80px;
}

.m2v3-projets__hint {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #999999;
}

.m2v3-projets__grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 48px 30px;
}

.m2v3-projet__lien {
  display: block;
  color: inherit;
  text-decoration: none;
}

.m2v3-projet__lien:hover,
.m2v3-projet__lien:focus {
  color: inherit;
  text-decoration: none;
}

.m2v3-projet__image {
  display: block;
  overflow: hidden;
  margin-bottom: 18px;
  aspect-ratio: 4 / 3;
  background: #f2f2f2;
}

.m2v3-projet__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.m2v3-projet__lien:hover .m2v3-projet__image img,
.m2v3-projet__lien:focus .m2v3-projet__image img {
  transform: scale(1.04);
}

.m2v3-projet__lieu {
  display: block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--m2v3-accent);
}

.m2v3-projet__titre {
  display: block;
  margin-top: 6px;
  font-size: 21px;
  line-height: 1.3;
  color: #000000;
}

.m2v3-projet__programme {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: #666666;
}

/* Légende des galeries : texte du projet lisible sur le fond sombre */
.fancybox-caption {
  max-height: 40vh;
  overflow-y: auto;
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
}

.fancybox-caption__body {
  max-width: 820px;
  margin: 0 auto;
}

.fancybox-caption strong {
  font-size: 19px;
  font-weight: 500;
}

.fancybox-caption p {
  margin: 10px 0 0;
}

/* Sous-menu « Accueil » : deux entrées, gabarit compact */
.m2v3-dropdown {
  min-width: 200px;
}

@media (min-width: 992px) {
  .m2v3-dropdown {
    left: -30px;
    padding: 28px 30px;
  }
}

.m2v3-dropdown .navigation__dropdown-item + .navigation__dropdown-item {
  margin-top: 10px;
}

/* ===== Accueil 2 (Home Modern) ===== */

/* Logo : carrés + « Architectes » en texte, blanc sur l'accroche puis gris une fois l'en-tête fixé */
.m2v3-logo--texte {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.m2v3-logo--texte img {
  width: 120px;
}

.m2v3-logo__texte {
  font-size: 12px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #ffffff;
  transition: color 0.3s ease;
}

.header--fixed .m2v3-logo__texte {
  color: #6d6e70;
}

/* Accroche plein écran : diaporama des réalisations */
.m2v3-hero .swiper-container,
.m2v3-hero .swiper-wrapper,
.m2v3-hero__slide {
  height: 100%;
}

.m2v3-hero__slide {
  position: relative;
  background-position: center;
  background-size: cover;
}

.m2v3-hero__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.25) 70%, rgba(0, 0, 0, 0.1) 100%);
}

.m2v3-hero .hero-banner__inner {
  position: relative;
  z-index: 1;
}

.m2v3-hero .swiper-pagination {
  bottom: 40px !important;
  left: 0 !important;
  width: 100% !important;
}

.m2v3-hero__btn {
  margin-top: 8px;
}

/* Photo de la section « L'agence » */
.m2v3-simplicity__image img {
  display: block;
  width: 100%;
  max-width: 430px;
  aspect-ratio: 430 / 500;
  object-fit: cover;
}

/* Carrousel des réalisations : vignettes carrées quel que soit le format de la photo */
.m2v3-work-card__image img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ===== Pages générées (agence, réalisations, fiches) ===== */

/* Cadrage fixe des photos : les photos de l'agence sont en paysage comme en portrait */
.m2v3-ratio {
  display: block;
  overflow: hidden;
  max-width: 100%;
  aspect-ratio: 460 / 310;
}

.m2v3-ratio--carre { aspect-ratio: 640 / 582; }
.m2v3-ratio--large { aspect-ratio: 827 / 685; }
.m2v3-ratio--bandeau { aspect-ratio: 1920 / 780; }

.m2v3-ratio img,
.m2v3-ratio a,
.m2v3-ratio .m2v3-galerie-lien {
  display: block;
  width: 100%;
  height: 100%;
}

.m2v3-ratio img {
  object-fit: cover;
}

/* Photos des fiches : agrandissement au clic (Fancybox) */
.m2v3-galerie-lien {
  display: block;
  cursor: zoom-in;
}

.m2v3-galerie-lien img {
  display: block;
  width: 100%;
  height: auto;
}

/* Sélecteur de mise en page d'une fiche (Standard · Avec colonne · Minimaliste) */
.m2v3-mise-en-page {
  padding-top: 18px;
  padding-bottom: 18px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: right;
  color: #999999;
}

.m2v3-mise-en-page a {
  color: #000000;
}

.m2v3-mise-en-page a:hover,
.m2v3-mise-en-page a:focus {
  color: var(--m2v3-accent);
}

.m2v3-mise-en-page__actif {
  color: var(--m2v3-accent);
}

/* Fiche avec colonne : suite du texte et photos empilées */
.m2v3-short-suite {
  margin-top: -10px;
}

.m2v3-colonne-photos > div + div {
  margin-top: 10px;
}

/* Références (page agence) */
.m2v3-references {
  padding: 40px 0 60px;
}

.m2v3-references__liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.m2v3-references__item {
  padding: 22px 10px 22px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 19px;
  font-weight: 300;
  color: #000000;
}

/* Grille 3 : les marges négatives de la liste dépassent de 4 px avec nos photos → pas de défilement horizontal */
.works-page--grid {
  overflow-x: clip;
}

/* Accueil 2 : puce active du diaporama en blanc sur la photo */
.webpage--modern .hero-banner.m2v3-hero .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #ffffff; /* plus spécifique que la règle du thème (.webpage--modern .hero-banner …) */
}

/* Fond de l'accroche (visible sous le diaporama sur mobile) : noir plutôt que le gris-vert du thème */
.m2v3-hero {
  background-color: #000000;
}

/* Accueil 2 : l'item de menu actif reste lisible (blanc) sur la photo, tant que l'en-tête n'est pas fixé */
.header--white:not(.header--fixed) .navigation__item--current > .navigation__link {
  color: #ffffff !important; /* le thème Modern force cette couleur en !important */
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* ===== Pages supplémentaires ===== */
.m2v3-ratio--slide { aspect-ratio: 1145 / 650; }
.m2v3-ratio--panorama { aspect-ratio: 1545 / 600; }
.m2v3-ratio--portrait { aspect-ratio: 549 / 833; }
.m2v3-ratio--carre1 { aspect-ratio: 1 / 1; }
.m2v3-ratio--studio { aspect-ratio: 804 / 695; }

/* Image qui remplit un cadre dont la hauteur est fixée par le thème */
.m2v3-cover-fill img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m2v3-404-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  max-height: 420px;
  object-fit: cover;
}

.m2v3-team--bios {
  padding-top: 0;
}

.team-item__photo img {
  object-fit: cover;
}

/* Parcours (section « récompenses » du thème) sans logos */
.m2v3-parcours .reward__project-name span {
  font-size: inherit;
}

/* Cartes OpenStreetMap des pages contact */
.contacts__map iframe {
  border: 0;
  filter: grayscale(100%);
}

/* Mosaïque et accueil Technical : éléments positionnés qui dépassent de quelques pixels → pas de défilement horizontal */
.works-page,
.webpage--technical-drawing main {
  overflow-x: clip;
}

/* Accueil 3 : pas de majuscule à chaque mot (usage français) */
.an-awards--parallax .an-awards__heading,
.an-awards--parallax .an-awards__welcome {
  text-transform: none;
}

/* Accueil 2 : diapo sans photo (projet dont l'agence n'a pas fourni d'image) — fond noir, texte seul */
.m2v3-hero__slide--texte {
  background-color: #000000;
}

.m2v3-hero__slide--texte::before {
  display: none;
}

.m2v3-hero__slide--texte .m2v3-hero__btn {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #000000;
}

/* Accueil (menu latéral) : barre mobile — sous 1200 px le thème cache le menu latéral sans bouton */
.m2v3-barre-mobile {
  display: none;
}

@media (max-width: 1199.98px) {
  .m2v3-barre-mobile {
    position: sticky;
    top: 0;
    z-index: 50;
    /* !important : la barre porte « display:none » en ligne, pour qu'une feuille absente
       ou périmée ne puisse jamais faire apparaître un second logo au-dessus du contenu. */
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  }

  .m2v3-barre-mobile__logo img {
    display: block;
    width: 120px;
    height: auto;
  }

  .layout--left-aside {
    padding-top: 0;
  }
}

/* Menu mobile : retrait de la photo de fond du template (bâtiment qui n'est pas de M2V3) */
.menu__inner {
  background-image: none;
}

/* Gabarit à menu latéral appliqué à tout le site : marge à droite (le thème n'en prévoit pas,
   d'où un débordement de 15 px dû aux marges négatives des grilles Bootstrap) */
@media (min-width: 1200px) {
  .layout--left-aside {
    padding-right: 30px;
  }
}

/* ===== Page Réalisations : design repris de /web1 (Archin), demande Musa 09/10 ===== */
.m2v3-projets-page__entete {
  padding-top: 40px;
  padding-bottom: 40px;
}

.m2v3-projets-page__titre {
  margin: 0;
  font-size: clamp(72px, 17vw, 250px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.m2v3-projets-page__texte {
  max-width: 620px;
  margin-top: 24px;
  font-size: 18px;
  line-height: 1.6;
  color: #666666;
}

.m2v3-section__titre {
  /* taille et graisse héritées de .heading, comme « Notre démarche » ou « Parcours » */
  margin: 0 0 50px;
}

/* « À la une » : piste que l'on fait défiler à la souris ou au doigt */
.m2v3-une {
  padding: 40px 0 80px;
}

.m2v3-une__piste {
  padding: 0 15px 40px;
}

.m2v3-une__slide {
  width: min(520px, 80vw);
}

.m2v3-une .swiper-scrollbar {
  height: 3px;
  background: rgba(0, 0, 0, 0.08);
}

.m2v3-une .swiper-scrollbar-drag {
  background: #000000;
}

/* Carte projet */
.m2v3-case__image {
  display: block;
  overflow: hidden;
  margin-bottom: 24px;
  aspect-ratio: 4 / 3;
  background: #f2f2f2;
}

.m2v3-case__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.m2v3-case__image:hover img,
.m2v3-case__image:focus img {
  transform: scale(1.04);
}

.m2v3-case__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.m2v3-case__tag {
  padding: 6px 14px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #000000;
}

.m2v3-case__titre {
  margin: 0 0 14px;
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.m2v3-case__titre a:hover,
.m2v3-case__titre a:focus {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.m2v3-case__texte {
  font-size: 15px;
  line-height: 1.6;
  color: #666666;
}

/* Filtres : liens sobres, pas des boutons */
.m2v3-filtres .filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-bottom: 50px;
}

.m2v3-filtres .filter__item {
  /* Repères du site : petites capitales légères, comme « Ils nous ont fait confiance ». */
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #999999;
  transition: color 0.3s ease;
}

.m2v3-filtres .filter__item:hover,
.m2v3-filtres .filter__item--active {
  color: #000000;
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* Grille : 3 colonnes alignées, gouttières larges */
.m2v3-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 70px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.m2v3-toutes {
  padding-bottom: 60px;
}

/* ===== Arrondi des photos de réalisations (demande Musa, 09/10/2026) ===== */
/* Les cartes de la page Réalisations, les photos des fiches projet et les vignettes
   « projet précédent / suivant ». Le bandeau d'ouverture reste à bords droits :
   il touche le bord de la fenêtre, un arrondi y serait bancal. */
.m2v3-case__image,
.m2v3-galerie-lien,
.single-project__gallery-image .m2v3-ratio,
.paginate__image {
  overflow: hidden;
  border-radius: var(--m2v3-arrondi);
}

.m2v3-galerie-lien {
  display: block;
}

.m2v3-galerie-lien img,
.paginate__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== Équipe : bloc de contact en fin de page (gabarit de l'accueil) ===== */
.m2v3-equipe-contact {
  padding: 0 0 90px;
}

.m2v3-equipe-contact__ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 60px;
  margin-top: 24px;
}