@keyframes filterCardIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #fff;
  background: #000;
  /* Empêche le léger scroll horizontal des blocs pleine largeur (.custom-banner
     en width: 100vw, qui inclut la gouttière de la scrollbar). `clip` plutôt que
     `hidden` : ne crée pas de conteneur de défilement, donc ne casse pas le
     position: sticky du landing. */
  overflow-x: clip;
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  z-index: 10;
  background: transparent;
  transition: background 0.3s ease;
}

.header--scrolled {
  background: rgba(0, 0, 0, 0.85);
}

.header-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
}

.header-logo {
  height: 40px;
  width: auto;
  object-fit: contain;
}

.header-nav {
  display: flex;
  gap: 2rem;
}

.header-nav a,
.header-nav__link {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  transition: opacity 0.2s;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.header-nav a:hover,
.header-nav__link:hover {
  opacity: 0.8;
}

/* Hamburger button — hidden on desktop, visible on mobile */
.header-burger {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  z-index: 12;
}

/* Landing page */
.landing {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
}

.landing-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none;
}

.landing-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Ratio de la vidéo Vimeo : 2.37:1 (42.19%). On dimensionne l'iframe
     à ce ratio et on prend la plus grande dimension pour toujours couvrir
     le viewport (équivalent object-fit: cover pour un iframe). */
  width: 110vw;
  height: 46.41vw; /* 110vw * 0.4219 */
  min-height: 110vh;
  min-width: 260.73vh; /* 110vh / 0.4219 */
  transform: translate(-50%, -50%);
  border: none;
}

/* Voile sombre par-dessus la vidéo pour la lisibilité de l'encart */
.landing-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.landing-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: min(90%, 50rem);
  padding: 2rem;
  text-align: center;
  color: #fff;
  text-transform: uppercase;
}

.landing-overlay__title {
  margin: 0 0 1rem;
  font-size: clamp(3rem, 10vw, 6.5rem);
  font-weight: 700;
  line-height: 1.1;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}

.landing-overlay__subtitle {
  margin: 0;
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 400;
  line-height: 1.4;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

/* Pages intérieures */
.page {
  min-height: 100vh;
  padding: 6rem 2rem 2rem;
  background: #111;
}

.page h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.page p {
  font-size: 1.125rem;
  opacity: 0.85;
  line-height: 1.7;
}

/* Contenu centré (page de contact) */
.page--centered {
  text-align: center;
}

/* Contact form */
.contact-form {
  max-width: 640px;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.page--centered .contact-form {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.contact-field label {
  font-size: 0.95rem;
  font-weight: 500;
  opacity: 0.9;
}

.contact-field input,
.contact-field textarea {
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: #fff;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  transition: border-color 0.2s;
}

.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: #666;
}

.contact-field textarea {
  resize: vertical;
}

.contact-error {
  font-size: 0.85rem;
  color: #f87171;
}

.contact-success {
  padding: 0.75rem 1rem;
  background: #166534;
  border-radius: 6px;
  font-size: 0.95rem;
}

.contact-submit {
  align-self: flex-start;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  color: #000;
  background: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.contact-submit:hover {
  opacity: 0.85;
}

.contact-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page--centered .contact-submit {
  align-self: center;
}

/* Under construction page */
.under-construction-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
  background: #000;
  gap: 2rem;
  text-align: center;
}

.under-construction-logo {
  width: auto;
  height: auto;
  max-width: min(300px, 80vw);
  max-height: 120px;
  object-fit: contain;
}

.under-construction-fallback {
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
}

.under-construction-title {
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  font-weight: 600;
  margin: 0;
  color: #fff;
}

/* Projets page */
.projets-page__message {
  font-size: 1.1rem;
  opacity: 0.6;
  margin-top: 2rem;
}

.projets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.projets-page__load-more {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

/* Tag filters */
.projects-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.projects-filters__btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.2s ease;
  font-family: inherit;
}

.projects-filters__btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.projects-filters__btn--active {
  background: #fff;
  color: #000;
}

/* Project card */
.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 280px;
  padding: 2.5rem 1.5rem;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 0;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.3s ease;
  color: #fff;
  text-decoration: none;
  font-family: inherit;
  animation: filterCardIn 0.35s ease both;
}

.project-card:hover {
  transform: scale(1.04);
}

/* Thumbnail image as background */
.project-card__thumbnail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.4s ease;
  z-index: 0;
}

/* Dark overlay — appears on hover */
.project-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.project-card:hover .project-card__thumbnail {
  filter: blur(4px);
}

.project-card:hover .project-card__overlay {
  opacity: 1;
}

/* Tag and title — hidden by default, appear on hover */
.project-card__tag {
  position: relative;
  z-index: 2;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.project-card__title {
  position: relative;
  z-index: 2;
  font-size: 1.25rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease 0.05s, transform 0.4s ease 0.05s;
}

.project-card:hover .project-card__tag,
.project-card:hover .project-card__title {
  opacity: 1;
  transform: translateY(0);
}

/* Cards without thumbnail — show tag and title normally */
.project-card--no-thumbnail .project-card__tag,
.project-card--no-thumbnail .project-card__title {
  opacity: 1;
  transform: translateY(0);
}

.project-card--no-thumbnail .project-card__tag {
  opacity: 0.7;
}

.project-card--no-thumbnail:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* Project / article detail page (shared) */
.project-detail-wrapper,
.article-detail-wrapper,
.static-page-wrapper {
  max-width: 1300px;
  margin: 0 auto;
}

.project-detail,
.article-detail {
  margin: 0;
}

.project-detail h1,
.article-detail h1 {
  margin-top: 0;
}

.project-detail__back,
.article-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2rem;
  color: #fff;
  text-decoration: none;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.project-detail__back:hover,
.article-detail__back:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.25);
}

.project-detail__back-icon,
.article-detail__back-icon {
  display: inline-block;
  transition: transform 0.2s ease;
}

.project-detail__back:hover .project-detail__back-icon,
.article-detail__back:hover .article-detail__back-icon {
  transform: translateX(-3px);
}

.project-detail__byline,
.article-detail__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.65;
  margin: 0 0 2rem;
}

.project-detail__byline-item:not(:last-child)::after,
.article-detail__byline-item:not(:last-child)::after {
  content: "·";
  margin: 0 0.6rem;
  opacity: 0.7;
}

.project-detail__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .project-detail__content:has(> aside) {
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 1.5rem;
  }
}

.project-detail__credits {
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.project-detail__credits-heading {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity: 0.55;
  margin: 0 0 1rem;
}

.project-detail__credits-body {
  font-size: 0.95rem;
  line-height: 1.7;
  opacity: 0.85;
}

.project-detail__credits-body p {
  margin: 0 0 0.5em;
  font-size: inherit;
}

.project-detail__credits-body p:last-child {
  margin-bottom: 0;
}

.project-detail__credits-body a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.project-detail__credits-body a:hover {
  opacity: 0.7;
}

@media (min-width: 768px) {
  .project-detail__credits {
    padding-top: 0;
    padding-left: 1.5rem;
    border-top: none;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }

  .project-detail__credits-body {
    font-size: 0.8rem;
  }
}

.project-detail__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: 2rem;
}

.project-detail__video iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0.5rem;
}

/* Network section */
.network-section {
  position: relative;
  z-index: 1;
  background: #fff;
  padding: 4rem 2rem;
  min-height: 50vh;
}

.network-section__title {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 2rem;
  color: #111;
}

.network-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.network-filters__btn {
  background: rgba(0, 0, 0, 0.06);
  border: none;
  color: #333;
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.2s ease;
  font-family: inherit;
}

.network-filters__btn:hover {
  background: rgba(0, 0, 0, 0.12);
}

.network-filters__btn--active {
  background: #111;
  color: #fff;
}

.network-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

.network-card {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 0.5rem;
  padding: 1rem;
  transition: background 0.2s ease;
  animation: filterCardIn 0.35s ease both;
}

.network-card:hover {
  background: rgba(0, 0, 0, 0.07);
}

.network-card__logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.network-card__name {
  font-size: 0.85rem;
  text-align: center;
  color: #333;
  opacity: 0.7;
}

/* Article detail summary */
.article-detail__summary {
  font-size: 1.15rem;
  font-style: italic;
  opacity: 0.75;
  margin: 0 0 2rem;
  line-height: 1.6;
}

.article-detail__illustration {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 0.5rem;
  margin: 0 0 2rem;
}

/* Shared content body styling for project and article detail pages */
.content-overlay__body {
  font-size: 1.1rem;
  line-height: 1.7;
  opacity: 0.85;
}

.content-overlay__body p {
  margin: 0 0 0.75em;
}

.content-overlay__body p:last-child {
  margin-bottom: 0;
}

.content-overlay__body ul,
.content-overlay__body ol {
  margin: 0 0 0.75em;
  padding-left: 1.5em;
}

.content-overlay__body a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.content-overlay__body a:hover {
  opacity: 0.7;
}

/* Blog carousel section */
.blog-carousel-section {
  position: relative;
  z-index: 1;
  background: #111;
  padding: 4rem 2rem;
  text-align: center;
}

.blog-carousel-section__title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 2rem;
  color: #fff;
}

.blog-carousel-wrapper {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}

.blog-carousel {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.5rem 0;
}

.blog-carousel::-webkit-scrollbar {
  display: none;
}

.blog-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  font-size: 2rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.blog-carousel__arrow:hover {
  background: rgba(255, 255, 255, 0.3);
}

.blog-carousel__arrow--left {
  left: -1rem;
}

.blog-carousel__arrow--right {
  right: -1rem;
}

.carousel-card {
  flex: 0 0 220px;
  scroll-snap-align: start;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  font-family: inherit;
  text-align: left;
  padding: 0;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.carousel-card:hover {
  transform: scale(1.04);
}

.carousel-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.5rem;
  display: block;
}

.carousel-card__placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
}

.carousel-card__title {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
}

.blog-carousel-section__link {
  display: inline-block;
  margin-top: 2rem;
  color: #fff;
  font-size: 1rem;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.blog-carousel-section__link:hover {
  opacity: 1;
}

/* Preview banner */
.preview-banner {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 0.6rem 1rem;
  background: #b45309;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
}

.preview-banner__exit {
  color: #fff;
  text-decoration: underline;
  white-space: nowrap;
}

.preview-banner__exit:hover {
  opacity: 0.8;
}

/* Blog page */
.blog-page {
  background: #111;
}

.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.blog-filters__btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.2s ease;
  font-family: inherit;
}

.blog-filters__btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.blog-filters__btn--active {
  background: #fff;
  color: #000;
}

.blog-page__message {
  font-size: 1.1rem;
  opacity: 0.6;
  margin-top: 2rem;
}

.blog-masonry {
  columns: 3 300px;
  column-gap: 1.5rem;
}

.blog-card {
  display: block;
  width: 100%;
  break-inside: avoid;
  margin-bottom: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: pointer;
  color: #fff;
  font-family: inherit;
  text-align: left;
  padding: 0;
  text-decoration: none;
  transition: transform 0.3s ease, background 0.2s ease;
  animation: filterCardIn 0.35s ease both;
}

.blog-card:hover {
  transform: scale(1.02);
  background: rgba(255, 255, 255, 0.1);
}

.blog-card__image {
  width: 100%;
  display: block;
  object-fit: cover;
}

.blog-card__text {
  padding: 1rem 1.25rem 1.25rem;
}

.blog-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.blog-card__excerpt {
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.7;
  margin: 0;
}

/* Footer */
.site-footer {
  background: #111;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem 2rem;
}

.site-footer__content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.site-footer__link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.2s;
}

.site-footer__link:hover {
  color: #fff;
}

.site-footer__copyright {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
}

/* Responsive */
@media (max-width: 768px) {
  .header {
    padding: 1rem 1.5rem;
  }

  .header-burger {
    display: block;
    pointer-events: auto;
  }

  .header-nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    background: rgba(0, 0, 0, 0.95);
    z-index: 11;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .header-nav--open {
    opacity: 1;
    pointer-events: auto;
  }

  .header-nav a,
  .header-nav .header-nav__link {
    font-size: 1.5rem;
  }

  .page {
    padding-top: 5rem;
  }

  .projets-grid {
    grid-template-columns: 1fr;
  }

  .project-card {
    min-height: 120px;
    padding: 1rem 1.25rem;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
  }

  .project-card__overlay {
    opacity: 1;
    background: rgba(0, 0, 0, 0.65);
  }

  .project-card__tag,
  .project-card__title {
    opacity: 1;
    transform: translateY(0);
    text-align: left;
  }

  .project-card__tag {
    font-size: 0.7rem;
  }

  .project-card__title {
    font-size: 1rem;
  }

  .project-card:hover .project-card__thumbnail {
    filter: none;
  }

  .network-section {
    padding: 3rem 1rem;
  }

  .network-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 1rem;
  }

  /* Blog carousel mobile */
  .blog-carousel-section {
    padding: 3rem 1rem;
  }

  .blog-carousel__arrow {
    display: none;
  }

  .carousel-card {
    flex: 0 0 180px;
  }

  /* Blog page mobile */
  .blog-masonry {
    columns: 1;
  }

  .site-footer__content {
    flex-direction: column;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-card,
  .blog-card,
  .network-card {
    animation: none;
  }
}

/* ─── Section personnalisable (StreamField HomePage) ───────────── */
/* Section personnalisable (home + Page flexible) : pas de fond propre, on
   laisse celui de la page (thème sombre) et la couleur de police classique
   du site (blanche, héritée). */
.custom-section {
  position: relative;
  z-index: 1;
  padding: 1rem 2rem;
}

/* Page flexible : tout le padding horizontal provient de .custom-section
   (titre compris, via .custom-section--head) pour qu'il soit identique sur
   toutes les sections (home et page flexible). .page--flush neutralise les
   marges latérales de .page afin de ne pas les doubler. */
.page--flush {
  padding-left: 0;
  padding-right: 0;
}

.custom-section--head {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* En-tête avec image de bannière en fond : l'image couvre toute la largeur,
   le titre est centré par-dessus avec un voile sombre pour rester lisible. */
.custom-section--banner {
  padding-top: 4rem;
  padding-bottom: 4rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.custom-section--banner .custom-section__inner {
  position: relative;
  z-index: 1;
}

.custom-section--banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.custom-section__inner {
  max-width: 1300px;
  margin: 0 auto;
}

.custom-section__heading {
  font-size: 2rem;
  font-weight: 700;
  text-align: left;
  margin: 4rem 0;
}

.custom-section__richtext {
  line-height: 1.7;
}

.custom-section__richtext a {
  color: inherit;
  text-decoration: underline;
}

.custom-section__figure {
  text-align: center;
}

.custom-section__image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.custom-section__caption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  opacity: 0.7;
}

.custom-section__button {
  display: inline-block;
  margin: 0.5rem 0 1.5rem;
  padding: 0.75rem 1.75rem;
  background: #fff;
  color: #111;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  transition: opacity 0.2s ease;
}

.custom-section__button:hover {
  opacity: 0.85;
}

/* Bloc « Bannière » : image de fond pleine largeur avec titre / texte / bouton
   centrés par-dessus. Voile sombre (::before via l'overlay) pour la lisibilité
   du texte blanc. */
.custom-banner {
  position: relative;
  /* Full-bleed : déborde du conteneur centré (.custom-section__inner, max 1300px
     + padding latéral) pour occuper toute la largeur de la fenêtre. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 1.5rem;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.custom-banner__overlay {
  display: flex;
  justify-content: center;
  min-height: 360px;
  /* padding horizontal élargi : plus d'espace à gauche et à droite du contenu */
  padding: 3rem clamp(2rem, 6vw, 6rem);
  background: rgba(0, 0, 0, 0.6);
}

/* Le voile reste pleine largeur ; ce conteneur recentre le contenu sur la même
   grille que le reste de la page (.custom-section__inner : 1300px + padding). */
.custom-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 1300px;
  text-align: left;
}

.custom-banner__heading {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 1rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.custom-banner__text {
  max-width: 960px;
  line-height: 1.7;
  margin: 0 0 1rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.custom-banner__text a {
  color: inherit;
  text-decoration: underline;
}

.custom-banner__button {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.75rem 1.75rem;
  background: #fff;
  color: #111;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  transition: opacity 0.2s ease;
}

.custom-banner__button:hover {
  opacity: 0.85;
}

.custom-section__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 0 1.5rem;
}

.custom-section__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
}

/* Vidéo auto-hébergée (lecteur HTML5 natif) : le lecteur épouse les dimensions
   natives de la vidéo (ratio préservé), sans jamais dépasser la largeur du
   conteneur ni la hauteur de l'écran, et reste centré. Les attributs
   width/height de la balise <video> fournissent le ratio en amont du
   chargement (pas de décalage de mise en page). */
.custom-section__video-player {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 80vh;
  height: auto;
  margin-inline: auto;
  border-radius: 8px;
  background: #000;
}

/* Conteneur de la vidéo d'ambiance (lecture auto, muette, en boucle). Le
   lecteur lui-même hérite de .custom-section__video-player : il épouse donc
   les dimensions natives de la vidéo, comme le bloc « Vidéo hébergée ». */
.custom-section__ambient-video {
  margin: 0 0 1.5rem;
}

/* Bloc « Séparateur » : espace vide vertical, hauteur fournie en inline style. */
.custom-separator {
  width: 100%;
  flex: none;
}

/* Bloc « 2 colonnes » : deux colonnes côte à côte sur desktop, empilées sous
   768px (cf. la media query mobile plus bas qui repasse en une seule colonne). */
.two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

/* Bloc « Texte illustré » : texte et image côte à côte sur desktop (le texte,
   sur fond noir, déborde légèrement sur la gauche de l'image), empilés sur
   mobile (mise en page « colonne » par défaut, repassée en « ligne » dès 768px). */
.illustrated-block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Full-bleed : occupe toute la largeur de l'écran (cf. .custom-banner). */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 1.5rem;
  /* padding horizontal : le bloc ne colle plus aux bords (box-sizing pour que
     le padding reste inclus dans les 100vw et n'ajoute pas de scroll) */
  box-sizing: border-box;
  padding: 0 clamp(1rem, 4vw, 3rem);
}

.illustrated-block__text {
  /* Effet « liquid glass » : teinte claire très translucide + fort flou et
     saturation de l'arrière-plan (la photo transparaît sous l'encadré), fine
     bordure claire + ombre portée pour détacher le panneau. */
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  color: #fff;
  /* léger halo pour garder le texte blanc lisible sur un fond clair variable */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  padding: 1.25rem 1.5rem;
  border-radius: 16px;
}

.illustrated-block__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.2;
}

.illustrated-block__content {
  margin: 0;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.6;
}

.illustrated-block__illustration {
  flex: none;
}

.illustrated-block__image {
  display: block;
  width: 100%;
  height: auto;
  /* ratio paysage pour une photo un peu moins haute (recadrage centré) */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
}

@media (min-width: 768px) {
  .illustrated-block {
    flex-direction: row;
    /* l'image définit la hauteur ; l'encadré texte, plus court, se centre
       verticalement par-dessus son bord gauche */
    align-items: center;
    gap: 0;
  }

  .illustrated-block__text {
    position: relative;
    z-index: 2;
    /* colonne texte + la moitié du recouvrement */
    flex: 0 0 calc(42% + 5rem);
    /* la photo déborde sous l'encadré sur la gauche (recouvrement de 10rem) */
    margin-right: -10rem;
    /* padding généreux pour que le texte ne colle pas au bord de l'écran */
    padding: 2.5rem clamp(2rem, 5vw, 5rem);
  }

  .illustrated-block__illustration {
    /* photo élargie + la moitié du recouvrement */
    flex: 0 0 calc(58% + 5rem);
  }
}

.custom-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1.5rem;
  margin: 0 0 1.5rem;
}

.custom-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0 0 1.5rem;
  background: #fff;
  color: #111;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.custom-card-grid .custom-card {
  margin: 0;
}

.custom-card--link {
  color: #111;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.custom-card--link:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.custom-card__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.custom-card__body {
  padding: 1.5rem;
}

.custom-card__title {
  margin: 0 0 0.25rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.custom-card__subtitle {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #666;
}

.custom-card__description {
  margin: 0;
  line-height: 1.6;
  color: #333;
}

/* ─── Bloc « Liste interactive » ───────────────────────────────── */
/* Mobile / tablette (base) : liste simple titre + sous-titre, volet droit
   masqué. Le passage à la mise en page deux colonnes (desktop) se fait à
   partir de 1024px pour que les tablettes gardent la version simplifiée. */
.ilist {
  margin: 0 0 1.5rem;
}

.ilist__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ilist__item + .ilist__item {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.ilist__trigger {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-decoration: none;
  padding: 1.75rem 0;
  cursor: default;
}

/* Item porteur d'un lien : cliquable, avec une flèche d'indication. */
.ilist__trigger--link {
  cursor: pointer;
}

.ilist__arrow {
  display: inline-block;
  margin-left: 0.4rem;
  transition: transform 0.25s ease;
}

.ilist__title {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 700;
  line-height: 1.25;
}

/* Détail dépliable rendu SOUS le titre : replié par défaut, déplié sur l'item
   actif (appui sur mobile) et — sur desktop — au survol. L'astuce grid
   0fr → 1fr anime la hauteur en douceur quel que soit le contenu. */
.ilist__reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.35s ease, opacity 0.35s ease;
}

.ilist__reveal-inner {
  overflow: hidden;
  min-height: 0;
}

.ilist__trigger--active .ilist__reveal {
  grid-template-rows: 1fr;
  opacity: 1;
}

.ilist__subtitle-inline {
  margin: 0.6rem 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  opacity: 0.85;
}

.ilist__text-inline {
  margin: 0.4rem 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
  opacity: 0.8;
}

/* Vidéo dépliée sous le titre (mobile : affichée en premier). Sur desktop, la
   vidéo passe dans le volet de droite et cette copie est masquée. */
.ilist__reveal-video {
  margin: 0.75rem 0 0.25rem;
}

.ilist__video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

.ilist__detail {
  display: none;
}

@media (min-width: 1024px) {
  /* Deux colonnes seulement si au moins un item porte une vidéo ; sinon le
     volet de droite resterait vide (détail déplié sous le titre). */
  .ilist--has-video {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 2.5rem;
    /* la liste (plus courte) se centre verticalement en regard du volet vidéo */
    align-items: center;
  }

  .ilist__trigger {
    position: relative;
    opacity: 0.55;
    transition: opacity 0.25s ease, padding-left 0.25s ease;
  }

  /* Chevron ancré sur la ligne du titre (et non au centre du déclencheur, qui
     grandit quand le détail se déplie sous le titre). Masqué par défaut, il
     apparaît sur l'item actif / survolé (qui s'indente alors de 2rem). */
  .ilist__trigger::before {
    content: "\276F";
    position: absolute;
    left: 0;
    top: 2.75rem;
    font-size: 1.1rem;
    line-height: 1;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 0.25s ease;
  }

  .ilist__trigger--active,
  .ilist__trigger:hover {
    opacity: 1;
    padding-left: 2rem;
  }

  .ilist__trigger--active::before,
  .ilist__trigger:hover::before {
    opacity: 1;
  }

  .ilist__trigger--link:hover .ilist__arrow,
  .ilist__trigger--link.ilist__trigger--active .ilist__arrow {
    transform: translateX(0.35rem);
  }

  /* Sur desktop, le détail se déplie aussi au survol (pas seulement sur l'item
     actif), pour conserver le retour visuel immédiat au passage de la souris. */
  .ilist__trigger:hover .ilist__reveal {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  /* La vidéo est rendue dans le volet de droite : on masque la copie dépliée
     sous le titre (réservée au mobile). */
  .ilist__reveal-video {
    display: none;
  }

  /* Volet droit : la vidéo de l'item actif s'affiche directement sur le fond de
     la page. Panneaux empilés dans la même cellule (grid-area 1/1) ; la hauteur
     s'aligne sur le panneau le plus grand et reste stable. Affiché uniquement
     quand la liste comporte au moins une vidéo. */
  .ilist--has-video .ilist__detail {
    display: grid;
  }

  /* Remplacement sans superposition : l'opacité bascule instantanément (pas de
     fondu, donc on ne voit jamais deux vidéos à la fois) tandis que la vidéo
     active glisse depuis le haut. */
  .ilist__panel {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(-1.5rem);
    transition: transform 0.45s ease;
    pointer-events: none;
  }

  .ilist__panel--active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* La vidéo occupe toute la largeur du volet, en gardant son ratio natif. */
  .ilist__panel .ilist__video {
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
  }
}

/* Respecte la préférence « animations réduites » : pas de glissement. */
@media (prefers-reduced-motion: reduce) {
  .ilist__trigger,
  .ilist__trigger::before,
  .ilist__arrow,
  .ilist__reveal,
  .ilist__panel {
    transition: none;
  }

  .ilist__panel {
    transform: none;
  }
}

@media (max-width: 768px) {
  .custom-section {
    padding: 1rem 1.25rem;
  }

  .custom-section__heading {
    font-size: 1.6rem;
  }

  .two-column {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ------------------------------------------------------------------ *
 * Bloc « Carrousel » (galerie de miniatures SwiperJS)                 *
 * Init JS dans site.js ; markup dans home/blocks/carousel_block.html. *
 * ------------------------------------------------------------------ */
.carousel-block {
  /* couleur de marque pour les flèches et les puces Swiper */
  --swiper-theme-color: #1b5599;
  --swiper-navigation-size: 34px;
  /* Full-bleed : occupe toute la largeur de l'écran en débordant du conteneur
     centré (.custom-section__inner). Même technique que .custom-banner. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 1.5rem;
}

/* Dans une colonne du bloc « 2 colonnes », le full-bleed (100vw) déborderait
   de la colonne : on le neutralise pour épouser la largeur de la colonne.
   `min-width: 0` sur la colonne (item de grille, min-width auto par défaut) +
   largeur définie (100%) sur le carrousel : sans ça, Swiper calcule la taille
   des slides depuis un conteneur « auto » qui grandit avec son contenu, d'où un
   zoom progressif infini. */
.two-column__col {
  min-width: 0;
}

.two-column__col .carousel-block,
.two-column__col .illustrated-block {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.carousel-block__main {
  width: 100%;
  overflow: hidden;
}

.carousel-block__slide {
  position: relative;
}

.carousel-block__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  /* plafonne la hauteur sur grand écran (sinon un 16:9 plein écran = trop haut) */
  max-height: 80vh;
  object-fit: cover;
}

.carousel-block__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0.75rem 1rem;
  color: #fff;
  font-size: 0.95rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
}

.carousel-block__thumbs {
  margin-top: 0.75rem;
  padding: 0 1rem;
  box-sizing: border-box;
}

.carousel-block__thumb {
  height: auto;
  opacity: 0.45;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

/* la miniature active (synchronisée avec la grande image) reprend l'opacité */
.carousel-block__thumbs .swiper-slide-thumb-active {
  opacity: 1;
}

.carousel-block__thumb-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ------------------------------------------------------------------ *
 * Bloc « Chiffres clés » (compteurs animés CountUp.js)               *
 * Init JS dans site.js ; markup dans home/blocks/key_figures_block.  *
 * Chiffre au-dessus, libellé en dessous ; les chiffres s'affichent   *
 * côte à côte (retour à la ligne si besoin), l'ensemble centré.      *
 * ------------------------------------------------------------------ */
.key-figures {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem 3rem;
  margin: 0 auto 1.5rem;
}

.key-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* hérite de la typo claire du site (Montserrat blanc, cf. body) */
  color: #fff;
}

.key-figure__value {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 600;
  line-height: 1.1;
  /* chiffres à chasse fixe : la largeur ne saute pas pendant le comptage */
  font-variant-numeric: tabular-nums;
}

.key-figure__label {
  margin-top: 0.5rem;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 400;
  opacity: 0.75;
}

@media (max-width: 768px) {
  .key-figures {
    gap: 1.5rem 2rem;
  }
}