html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

#grainient-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: 0;
}

/* ---------- White content panel (frames the gradient around it) ---------- */
.content-panel {
  position: fixed;
  top: 134px;
  left: 24px;
  right: 24px;
  bottom: -100px;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  z-index: 5;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

.content-panel-placeholder {
  color: #999;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-align: center;
}

@media (max-width: 768px) {
  .content-panel {
    top: 110px;
    left: 12px;
    right: 12px;
    bottom: -100px;
    border-radius: 20px;
    padding: 24px;
  }
}

.logo-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  z-index: 1;
  pointer-events: none;
}

.logo-wrap svg {
  width: clamp(240px, 70vw, 320px);
  height: auto;
  display: block;
}

/* ---------- StarBorder "Découvrir" button ---------- */
.star-border-container {
  display: inline-block;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  padding: 1px 0;
  border: none;
  background: transparent;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
}

.border-gradient-bottom {
  position: absolute;
  width: 300%;
  height: 50%;
  opacity: 0.7;
  bottom: -12px;
  right: -250%;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff, transparent 10%);
  animation: star-movement-bottom linear infinite alternate;
  animation-duration: 5s;
  z-index: 0;
}

.border-gradient-top {
  position: absolute;
  opacity: 0.7;
  width: 300%;
  height: 50%;
  top: -12px;
  left: -250%;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff, transparent 10%);
  animation: star-movement-top linear infinite alternate;
  animation-duration: 5s;
  z-index: 0;
}

.inner-content {
  position: relative;
  border: 1px solid #222;
  background: #000;
  color: #fff;
  font-size: 15px;
  letter-spacing: normal;
  text-align: center;
  padding: 16px 26px;
  border-radius: 20px;
  z-index: 1;
  transition: background-color 0.35s ease, color 0.35s ease;
}

.star-border-container:hover .inner-content {
  background: #fff;
  color: #000;
}

@keyframes star-movement-bottom {
  0% {
    transform: translate(0%, 0%);
    opacity: 1;
  }
  100% {
    transform: translate(-100%, 0%);
    opacity: 0;
  }
}

@keyframes star-movement-top {
  0% {
    transform: translate(0%, 0%);
    opacity: 1;
  }
  100% {
    transform: translate(100%, 0%);
    opacity: 0;
  }
}

/* ---------- CardNav menu ---------- */
.card-nav-container {
  position: fixed;
  top: 2em;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 800px;
  z-index: 99;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
}
.card-nav {
  display: block;
  height: 78px;
  padding: 0;
  background-color: #fff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.75rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
  will-change: height;
}
.card-nav-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  z-index: 2;
}
.hamburger-menu {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: 6px;
  color: #000;
}
.hamburger-menu:hover .hamburger-line {
  opacity: 0.75;
}
.hamburger-line {
  width: 30px;
  height: 2px;
  background-color: currentColor;
  transition: transform 0.25s ease, opacity 0.2s ease, margin 0.3s ease;
  transform-origin: 50% 50%;
}
.hamburger-menu.open .hamburger-line:first-child {
  transform: translateY(4px) rotate(45deg);
}
.hamburger-menu.open .hamburger-line:last-child {
  transform: translateY(-4px) rotate(-45deg);
}
.nav-logo-container {
  display: flex;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.nav-logo-container svg {
  height: 46px;
  width: auto;
  display: block;
}
.card-nav-cta-button {
  background: linear-gradient(135deg, #2dc76d, #233b75, #009fe3);
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  padding: 0 1.2rem;
  height: 46px;
  box-sizing: border-box;
  cursor: pointer;
  transition: filter 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.card-nav-cta-button:hover {
  filter: brightness(1.12);
}
.card-nav-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 94px;
  bottom: 12px;
  padding: 0 0.5rem;
  display: flex;
  align-items: stretch;
  gap: 12px;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
}
.card-nav.open .card-nav-content {
  visibility: visible;
  pointer-events: auto;
}
.nav-card {
  flex: 1 1 0;
  min-width: 0;
  border-radius: calc(0.75rem - 0.2rem);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  user-select: none;
}
.nav-card--green {
  background-color: #2dc76d;
  color: #fff;
}
.nav-card--navy {
  background-color: #233b75;
  color: #fff;
}
.nav-card--cyan {
  background-color: #009fe3;
  color: #fff;
}
.nav-card-label {
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.nav-card-links {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-card-link {
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-card-link:hover {
  opacity: 0.75;
}
.nav-card-link-icon {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
}
/* ---------- Contact page ---------- */
.card-nav-container.contact-nav-visible {
  opacity: 1;
  pointer-events: auto;
}

.contact-page-wrap {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 24px 40px;
  box-sizing: border-box;
  z-index: 5;
}

.contact-card {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  padding: 48px 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.contact-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #000;
  text-align: center;
}

.contact-subtitle {
  margin: -10px 0 0;
  font-size: 14px;
  color: #777;
  text-align: center;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-field span {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #999;
}

.contact-field input,
.contact-field textarea {
  border: none;
  border-bottom: 1px solid #ddd;
  padding: 8px 2px;
  font-family: inherit;
  font-size: 15px;
  color: #000;
  background: transparent;
  resize: vertical;
  transition: border-color 0.25s ease;
}

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

.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.contact-form .star-border-container {
  align-self: center;
  margin-top: 4px;
}

.contact-success {
  display: none;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  color: #000;
  padding: 12px 0;
}
.contact-success.visible {
  display: block;
}

@media (max-width: 768px) {
  .contact-card {
    padding: 36px 26px;
    border-radius: 20px;
  }
  .contact-page-wrap {
    padding-top: 120px;
  }
}

/* ---------- Case studies test page (grid + custom scroll) ---------- */
.case-panel {
  position: fixed;
  top: 134px;
  left: 24px;
  right: 24px;
  bottom: -100px;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  z-index: 5;
  overflow: hidden;
  box-sizing: border-box;
}

.panel-scroll {
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 40px 40px 160px 40px;
  /* Bottom padding is deliberately much larger than the others: .case-panel
     bleeds 100px below the actual viewport (bottom:-100px, so its rounded
     corner is never seen). That bottom sliver of panel-scroll's own box is
     never visible, even at max scroll — scrolling only ever aligns the
     content's bottom with the box's own bottom, not with the viewport edge.
     This extra padding pushes the true end of scrollable content (e.g. the
     footer) safely above that dead zone, so it's always reachable. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.panel-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* ---------- Page footer ----------
   Sits at the end of .panel-scroll's normal content flow. Its margin-top is
   computed in JS (see initStickyFooter): it's set just large enough to push the
   footer to the bottom of the visible panel when there isn't much content above,
   and shrinks to a small fixed gap once that content is taller than the panel —
   at which point the footer is only reachable by scrolling, as intended. The
   value below is just a static fallback in case JS doesn't run. */
.page-footer {
  position: relative;
  margin-top: 40px;
  padding-top: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 32px;
}
.page-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, #2dc76d, #233b75, #009fe3);
}
.footer-copyright {
  font-size: 12.5px;
  color: #999;
  white-space: nowrap;
}
.footer-links {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links--secondary {
  margin-left: auto;
}
.footer-links a {
  font-size: 13px;
  color: #000;
  text-decoration: none;
  transition: opacity 0.25s ease;
  white-space: nowrap;
}
.footer-links a:hover {
  opacity: 0.6;
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 20px;
  row-gap: 36px;
}

/* ---- Real project card (image + title + category) ---- */
.case-card {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* Thumbnail is ready but its case-study page isn't yet — image shows, not clickable */
.case-card--static {
  cursor: default;
}
.case-card--static:hover .case-thumb img {
  transform: none;
}

.case-thumb {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  overflow: hidden;
  background: #009fe3;
}

.case-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.case-card:hover .case-thumb img {
  transform: scale(1.045);
}

.case-info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.case-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #000;
  flex: 1 1 auto;
  min-width: 0;
}

.case-category {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #999;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Homepage hero (accueil.html): logo + baseline, centered at the top ---- */
.home-hero {
  text-align: center;
  padding: 12px 0 8px;
}
.home-hero-logo {
  width: clamp(200px, 26vw, 320px);
  margin: 0 auto;
}
.home-hero-logo svg {
  display: block;
  width: 100%;
  height: auto;
}
.home-hero-baseline {
  margin: 20px 0 0;
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 500;
  color: #333;
}

/* ---- Homepage sections (accueil.html): projets récents / actualité / web gazette ---- */
.home-section {
  margin: 56px 0;
}

.home-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.home-section-title {
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 700;
  color: #000;
  margin: 0;
}

.home-section-link {
  font-size: 13px;
  font-weight: 600;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.25s ease;
}
.home-section-link:hover {
  opacity: 0.6;
}

.home-news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.home-news-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.home-news-thumb {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  background: #009fe3;
  margin-bottom: 12px;
  overflow: hidden;
}

.home-news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.home-news-card:hover .home-news-thumb img {
  transform: scale(1.045);
}

.home-news-date {
  margin: 0 0 4px;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #999;
}

.home-news-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: #000;
}

.home-news-teaser {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #666;
}

/* ---- "La Web Gazette" page: uneven bento-style grid, inspired by
   Graphéine's magazine layout — blocks of different sizes, not all aligned. ---- */
.gazette-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 24px;
}

.gazette-card {
  display: block;
  color: inherit;
  text-decoration: none;
}
.gazette-card--lg {
  grid-column: span 2;
}
.gazette-card--square,
.gazette-card--tall {
  grid-column: span 1;
}

.gazette-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  background: #009fe3;
  margin-bottom: 12px;
  overflow: hidden;
}
.gazette-card--lg .gazette-thumb {
  aspect-ratio: 16 / 9;
}
.gazette-card--square .gazette-thumb {
  aspect-ratio: 1 / 1;
}
.gazette-card--tall .gazette-thumb {
  aspect-ratio: 3 / 4;
}

.gazette-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.gazette-card:hover .gazette-thumb img {
  transform: scale(1.045);
}

/* ---- Empty slot placeholder (no project yet) ---- */
.case-block {
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.case-block--green {
  background: #2dc76d;
}
.case-block--navy {
  background: #233b75;
}
.case-block--cyan {
  background: #009fe3;
}

/* Placeholder "logo" symbols, centered white shapes */
.icon-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
}

.icon-square {
  width: 28px;
  height: 28px;
  border-radius: 3px;
  background: #fff;
}

.icon-triangle {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 26px solid #fff;
}

.icon-cross {
  position: relative;
  width: 30px;
  height: 30px;
}
.icon-cross::before,
.icon-cross::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  border-radius: 2px;
}
.icon-cross::before {
  width: 100%;
  height: 5px;
  transform: translate(-50%, -50%);
}
.icon-cross::after {
  width: 5px;
  height: 100%;
  transform: translate(-50%, -50%);
}

.scroll-thumb {
  position: absolute;
  top: 0;
  right: 10px;
  width: 4px;
  border-radius: 2px;
  background: #000;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.scroll-thumb.visible {
  opacity: 0.3;
}

@media (max-width: 768px) {
  .case-panel {
    top: 110px;
    left: 12px;
    right: 12px;
    bottom: -100px;
    border-radius: 20px;
  }
  .panel-scroll {
    padding: 24px 24px 150px 24px;
  }
  .case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    row-gap: 22px;
  }
  .case-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .case-title {
    font-size: 13px;
  }
  .case-category {
    font-size: 10px;
  }
  .home-news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .home-news-grid .home-news-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .home-news-grid .home-news-card:last-child:nth-child(odd) .home-news-thumb {
    aspect-ratio: 16 / 9;
  }
  .gazette-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
  }
  .gazette-card {
    margin-top: 0 !important;
  }
  .gazette-card--lg {
    grid-column: span 2;
  }
  .page-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .footer-links {
    gap: 14px;
  }
  .footer-links--secondary {
    margin-left: 0;
  }
}

/* ---------- Project case-study page ---------- */
.project-content {
  max-width: 920px;
  margin: 0 auto;
}

/* ---- Centered page intro, e.g. actualite.html / web-gazette.html ----
   Matches the centered treatment of the hero on accueil.html: the h1 and
   headline sit centered instead of following the left-aligned case-study
   layout used on project-XX.html / article-01.html. */
.page-intro-centered .project-title {
  text-align: center;
}
.page-intro-centered .project-headline {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.project-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #999;
  text-decoration: none;
  margin-bottom: 28px;
  transition: color 0.25s ease;
}
.project-back-link:hover {
  color: #000;
}

.project-hero {
  /* Bleeds past .panel-scroll's 40px padding to span the full white panel,
     edge to edge — the panel's own border-radius + overflow:hidden round the top corners.
     Height snaps to the bottom of the window on load (matches .case-panel's top offset: 134px),
     like the very first screen of the case study. */
  position: relative;
  width: calc(100% + 80px);
  height: calc(100vh - 134px);
  min-height: 320px;
  margin: -40px -40px 36px -40px;
  overflow: hidden;
  background: #009fe3;
}
.project-hero img,
.project-hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Scroll-down cue, centered at the bottom of the hero */
.hero-scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 2;
  pointer-events: none;
  animation: hero-scroll-hint 2s ease-in-out infinite;
}
.hero-scroll-indicator svg {
  display: block;
}
@keyframes hero-scroll-hint {
  0% { opacity: 0; transform: translate(-50%, -6px); }
  40% { opacity: 1; }
  80% { opacity: 0; }
  100% { opacity: 0; transform: translate(-50%, 10px); }
}

.project-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.project-tag {
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  background: #f2f2f2;
  color: #555;
  font-weight: 600;
}
.project-year {
  font-size: 12px;
  color: #aaa;
  margin-left: auto;
}

.project-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 10px;
  color: #000;
}

.project-headline {
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 600;
  line-height: 1.4;
  color: #333;
  margin: 0 0 28px;
  max-width: 760px;
}

.project-lead p {
  font-size: 16px;
  line-height: 1.75;
  color: #333;
  max-width: 760px;
  margin: 0 0 18px;
}

/* ---- CTA button used inside page content (e.g. accueil.html) ----
   Same look as .card-nav-cta-button but always visible, including on mobile. */
.home-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2dc76d, #233b75, #009fe3);
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  padding: 0 1.2rem;
  height: 46px;
  box-sizing: border-box;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.3s ease;
  margin-top: 8px;
}
.home-cta:hover {
  filter: brightness(1.12);
}

.project-section {
  margin: 56px 0;
}

.project-image-full {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #009fe3;
}
.project-image-full img,
.project-image-full video {
  width: 100%;
  display: block;
}
/* Placeholder state: no real visual yet — reserve the intended ratio (given
   per-instance via inline style, e.g. 16:10) instead of collapsing to the
   broken-image icon's tiny fallback size. */
.project-image-full.is-placeholder img,
.project-image-full.is-placeholder video {
  height: 100%;
  object-fit: cover;
}

.project-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.project-row-2 > div {
  aspect-ratio: 3 / 2;
  border-radius: 16px;
  overflow: hidden;
  background: #009fe3;
}
.project-row-2 img,
.project-row-2 video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-video {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
}
.project-video video {
  width: 100%;
  display: block;
}
/* Placeholder state: no real footage yet — reserve the intended 16:9 ratio
   and use the site's cyan placeholder color instead of collapsing to 0px. */
.project-video.is-placeholder {
  aspect-ratio: 16 / 9;
  background: #009fe3;
}
.project-video.is-placeholder video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.project-gallery img {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  object-fit: cover;
  background: #009fe3;
  display: block;
}

.project-quote {
  max-width: 720px;
  margin: 64px auto;
  text-align: center;
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 600;
  line-height: 1.45;
  color: #000;
}

/* ---- Web Gazette article page (article-01.html and beyond) ---- */
.article-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #009fe3;
  margin: 0 0 14px;
}

.article-date {
  font-size: 13px;
  color: #999;
  margin: 8px 0 0;
}

.article-heading,
.project-lead h2 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  color: #000;
  line-height: 1.3;
  margin: 48px 0 16px;
  max-width: 760px;
}

/* ---- Support du contenu saisi via l'éditeur natif WordPress (CMS) ----
   Un titre H2, une citation ou une image ajoutés depuis wp-admin héritent
   automatiquement du bon style, sans que l'utilisateur ait besoin
   d'ajouter une classe CSS particulière. */
.project-lead blockquote {
  max-width: 720px;
  margin: 64px auto;
  text-align: center;
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 600;
  line-height: 1.45;
  color: #000;
  border: none;
  padding: 0;
}
.project-lead img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
  margin: 32px auto;
}
.project-lead figure {
  margin: 32px 0;
}
.project-lead figcaption {
  text-align: center;
  font-size: 12.5px;
  color: #999;
  margin-top: 8px;
}

.article-sources {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid #eee;
  font-size: 12px;
  line-height: 1.7;
  color: #999;
  max-width: 760px;
}

.project-nav-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 56px;
  padding-top: 24px;
}

@media (max-width: 768px) {
  .project-row-2 {
    grid-template-columns: 1fr;
  }
  .project-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  /* If the gallery has an odd number of images, the last one ends up alone
     on its row — let it span the full width instead of leaving a gap. */
  .project-gallery img:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
  }
  .project-section {
    margin: 40px 0;
  }
  .project-hero {
    width: calc(100% + 48px);
    height: calc(100vh - 110px);
    margin: -24px -24px 24px -24px;
  }
}

@media (max-width: 768px) {
  .card-nav-container {
    width: 90%;
    top: 1.2em;
  }
  .card-nav-top {
    padding: 0 1rem;
    justify-content: space-between;
  }
  .hamburger-menu {
    order: 2;
  }
  .nav-logo-container {
    position: static;
    transform: none;
    order: 1;
  }
  .card-nav-cta-button {
    display: none;
  }
  .card-nav-content {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 0.5rem;
    bottom: 12px;
    top: 94px;
    justify-content: flex-start;
  }
  .nav-card {
    height: auto;
    min-height: 60px;
    flex: 1 1 auto;
    max-height: none;
  }
  .nav-card-label {
    font-size: 15px;
    letter-spacing: 1px;
  }
  .nav-card-link {
    font-size: 15px;
  }
}