/* Surcharges projet - ne pas modifier style.css */
/* Les ajustements de structure/hero sont centralises ici. */

/* =============================================
   NAV — Alignement avec le contenu page (max-width: page-width)
   ============================================= */

/*
 * style.css donne au .top : padding: 0 var(--page-margin) + width:100%.
 * Sur grand écran, le contenu nav déborde au-delà de la zone page-width.
 * max() adapte le padding : si le viewport est > page-width + marges,
 * le padding s'élargit pour centrer le contenu sur page-width.
 */
.top {
  padding-left:  max(var(--page-margin), calc(50% - var(--page-width) / 2));
  padding-right: max(var(--page-margin), calc(50% - var(--page-width) / 2));
}

/* =============================================
   LOGO — Blanc en thème sombre, couleur en thème clair
   ============================================= */

/*
 * brightness(0) rend tous les pixels noirs, invert(1) les passe en blanc.
 * Fonctionne avec logo-web-transparent.webp (fond transparent).
 * Transition douce pour éviter le flash au changement de thème.
 */
.logo img {
  height: 80px !important;
  transition: filter 0.2s ease;
}

@media (prefers-color-scheme: dark) {
  .logo img {
    filter: brightness(0) invert(1);
  }
}

/* =============================================
   SECTION NAV-RAPIDE — encadré vignettes services
   ============================================= */

/* Rectangle légèrement teinté qui met les 6 vignettes en avant */
.nav-rapide {
  background: var(--lighter);
  border-radius: calc(var(--border-radius) * 4);
  padding: 2rem 2rem 1.75rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* =============================================
   HERO — Layout 2 colonnes
   ============================================= */

/*
 * Le hero est centré à max-width page-width (66rem) pour s'aligner
 * avec la nav et le footer. Les sections sous le hero (entry-wrapper)
 * sont également élargies à page-width sur la page template.
 */

/* Conteneur hero : centré, aligné sur la largeur page */
.hero--2col {
  display: flex;
  align-items: stretch;
  min-height: 480px;
  overflow: hidden;
  max-width: var(--page-width);
  margin-left: auto;
  margin-right: auto;
}

/* Sur la page home : élargir entry-wrapper de 42rem à page-width (66rem)
   pour aligner les sections sous le hero */
body.page-template .content__entry {
  max-width: var(--page-width);
}

/* Pages services : même gestion de largeur que la home */
body.services-template .content__entry,
body.investisseurs-template .content__entry {
  max-width: var(--page-width);
}

body.services-template main.page--tag {
  max-width: var(--page-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-margin);
  padding-right: var(--page-margin);
}

/* Pages services : cadre autour des 3 cards de maillage */
body.services-template nav.maillage-interne,
body.investisseurs-template nav.maillage-interne {
  background: var(--lighter);
  border-radius: calc(var(--border-radius) * 4);
  border-top: 0;
  padding: 1.5rem 1.25rem;
  margin-top: 2rem;
}

/* Hub services: largeur cohérente et miniatures à gauche */
body.tag-template.services-template main.page--tag {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

body.tag-template.services-template .feed__item--centered {
  justify-content: flex-start;
}

body.tag-template.services-template .feed__content {
  max-width: none;
}

body.tag-template.services-template .feed__image {
  width: clamp(8.5rem, 16vw, 12rem);
  height: clamp(6.5rem, 11vw, 9rem);
  flex: 0 0 clamp(8.5rem, 16vw, 12rem);
  margin: 0;
}

/* Colonne gauche : texte + CTA */
.hero--2col .hero__content {
  flex: 0 0 50%;
  width: 50%;
  display: flex;
  align-items: center;
  padding: 3rem 2.5rem;
  box-sizing: border-box;
}

.hero--2col .hero__content .wrapper {
  max-width: 100%;
  width: 100%;
  padding: 0;
}

.hero--2col .hero__accroche {
  margin-top: 1em;
  margin-bottom: 1.5em;
}

/* Colonne droite : photo — neutralise margin: 0 var(--page-margin) de style.css */
.hero--2col .hero__image {
  flex: 0 0 50%;
  width: 50%;
  margin: 0;
  padding: 0;
}

.hero--2col .hero__image-wrapper {
  height: 100%;
  min-height: 480px;
}

.hero--2col .hero__image-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Mobile : colonne unique — texte + CTA en premier, image en dessous */
@media (max-width: 768px) {
  .hero--2col {
    flex-direction: column;
  }

  .hero--2col .hero__content {
    flex: 0 0 auto;
    width: 100%;
    padding: 1.75rem 1.25rem;
  }

  .hero--2col .hero__image {
    flex: 0 0 auto;
    width: 100%;
    height: 260px;
  }

  .hero--2col .hero__image-wrapper {
    height: 100%;
    min-height: unset;
  }
}