/* ============================================================
   Janson Construction — Website UI kit styles
   Reconciled against the Janson - Website.fig file
   and the production page screenshot.
   Builds on ../../colors_and_type.css
   ============================================================ */
@import url("colors_and_type.css");

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--font-sans); }
/* Réserve la goulotte de la barre de défilement : sans ça, son apparition pendant
   les animations d'entrée décale le contenu à l'horizontale (effet saccadé). */
html { scrollbar-gutter: stable; }
body { overflow-x: clip; }
img, svg { max-width: 100%; display: block; }

/* ---------- Shared form field (Contact + Carrière) ---------- */
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus { border-bottom-color: #2D372D; }
.form-file::file-selector-button {
  font-family: var(--font-sans); font-weight: 500; font-size: var(--text-main-size); letter-spacing: var(--text-main-tracking);
  color: var(--dark-900); background: transparent; border: 1.5px solid var(--green-500);
  border-radius: 99999px; padding: 10px 20px; margin-right: 16px; cursor: pointer;
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}
.form-file:hover::file-selector-button { background: var(--dark-900); color: var(--taupe-50); border-color: var(--dark-900); }

/* ---------- Type helpers ---------- */
.jc-marquee   { font-weight: 500; font-size: var(--marquee-size); line-height: var(--marquee-lh); letter-spacing: var(--marquee-tracking); margin: 0; }
.jc-display   { font-weight: 500; font-size: var(--display-size); line-height: var(--display-lh); letter-spacing: var(--display-tracking); margin: 0; }
.jc-h1        { font-weight: 500; font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: var(--h1-tracking); margin: 0; }
.jc-h2        { font-weight: 500; font-size: var(--h2-size); line-height: var(--h2-lh); letter-spacing: var(--h2-tracking); margin: 0; }
.jc-h2-alt    { font-weight: 500; font-size: var(--h2alt-size); line-height: var(--h2alt-lh); letter-spacing: var(--h2alt-tracking); margin: 0; }
.jc-h3        { font-weight: 500; font-size: var(--h3-size); line-height: var(--h3-lh); letter-spacing: var(--h3-tracking); margin: 0; }
.jc-h4        { font-weight: 500; font-size: var(--h4-size); line-height: var(--h4-lh); letter-spacing: var(--h4-tracking); margin: 0; }
.jc-h5        { font-weight: 500; font-size: var(--h5-size); line-height: var(--h5-lh); letter-spacing: var(--h5-tracking); margin: 0; }
.jc-h6        { font-weight: 500; font-size: var(--h6-size); line-height: var(--h6-lh); letter-spacing: var(--h6-tracking); margin: 0; }
.jc-text-large{ font-weight: 500; font-size: var(--text-large-size); line-height: var(--text-large-lh); letter-spacing: var(--text-large-tracking); margin: 0; }
.jc-text-main { font-weight: 500; font-size: var(--text-main-size); line-height: var(--text-main-lh); letter-spacing: var(--text-main-tracking); margin: 0; }
.jc-text-small{ font-weight: 500; font-size: var(--text-small-size); line-height: var(--text-small-lh); letter-spacing: var(--text-small-tracking); text-transform: uppercase; margin: 0; }
.jc-overline  { font-weight: 400; font-size: var(--overline-size); line-height: var(--overline-lh); letter-spacing: var(--overline-tracking); margin: 0; }

/* ---------- Layout ---------- */
.jc-container { width: 100%; margin: 0 auto; padding-left: var(--site-margin); padding-right: var(--site-margin); }
.jc-section { padding-top: var(--section-main); padding-bottom: var(--section-main); }

/* ---------- Buttons ---------- */
.jc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  padding: 18px 24px; border-radius: var(--radius-round);
  border: 1.5px solid transparent;
  font-family: var(--font-sans); font-weight: 500;
  font-size: var(--text-main-size); line-height: 1; letter-spacing: var(--text-main-tracking);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}
.jc-btn::after {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  border: 1px solid currentColor; background: transparent;
  transition: background-color 240ms ease;
  flex-shrink: 0;
}
.jc-btn:hover::after { background: currentColor; }

.jc-btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border-color: var(--btn-primary-bg); }
.jc-btn--primary:hover { background: var(--btn-primary-bg-hover); color: var(--btn-primary-fg-hover); border-color: var(--btn-primary-bg-hover); }

.jc-btn--secondary { background: transparent; border-color: var(--dark-900); }
.jc-btn--secondary:not(.on-dark) { color: var(--dark-900); }
.jc-btn--secondary.on-dark { color: var(--taupe-50); border-color: var(--taupe-50); }
.jc-btn--secondary:hover { background: var(--green-800); color: var(--taupe-50); border-color: var(--green-800); }

/* Dark solid button — used in the nav over green-300 bg; same sizing as other buttons */
.jc-btn--solid-dark { background: var(--dark-900); color: var(--taupe-50); border-color: var(--dark-900); }
.jc-btn--solid-dark:hover { background: var(--green-800); border-color: var(--green-800); }

/* Circular 64×64 icon button */
.jc-btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: var(--radius-round);
  background: var(--btn-primary-bg); border: 1.5px solid var(--btn-primary-bg);
  color: var(--dark-900); cursor: pointer;
  transition: background-color 240ms ease, border-color 240ms ease;
}
.jc-btn-icon:hover { background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-bg-hover); }
.jc-btn-icon svg { width: 24px; height: 24px; }

/* ---------- Text link ---------- */
.jc-text-link {
  display: inline-flex; align-items: baseline; gap: 8px;
  color: var(--link-fg); text-decoration: none;
  font-weight: 500; font-size: var(--text-main-size); letter-spacing: var(--text-main-tracking);
  border-bottom: 1px solid currentColor; padding-bottom: 4px;
  transition: opacity 200ms ease;
}
.jc-text-link:hover { opacity: 0.7; }
.jc-text-link.on-dark { color: var(--taupe-50); }

/* ---------- Navigation ---------- */
.jc-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  z-index: 50;
  background-color: transparent;
  color: var(--dark-900);
  transform: translateY(0);
  transition: transform 360ms cubic-bezier(0.25, 0.1, 0.25, 1),
              background-color 280ms cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;
}
.jc-nav--scrolled {
  background-color: var(--taupe-300);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.jc-nav--hidden {
  transform: translateY(-100%);
}
/* Au-dessus de la bande verte du hero : même vert que la section */
.jc-nav--green {
  background-color: var(--green-300);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.jc-nav__inner {
  height: 90px;
  width: 100%;
  margin: 0 auto;
  padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
}
.jc-nav__brand { position: relative; display: block; }
.jc-nav__brand img { height: 48px; display: block; transition: opacity 280ms cubic-bezier(0.25, 0.1, 0.25, 1); }
/* Logo blanc superposé, révélé quand l'overlay mobile est ouvert */
.jc-nav__brand-blanc { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.jc-nav.is-open .jc-nav__brand-blanc { opacity: 1; }
.jc-nav.is-open .jc-nav__brand img:first-child { opacity: 0; }
.jc-nav__right { display: flex; align-items: center; gap: 32px; }
.jc-nav__links { display: flex; gap: 32px; align-items: center; }
.jc-nav__link {
  color: var(--dark-900); text-decoration: none;
  font-size: var(--text-main-size); font-weight: 500; letter-spacing: var(--text-main-tracking);
  padding: 8px 0; position: relative;
}
.jc-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 240ms ease;
}
.jc-nav__link:hover::after, .jc-nav__link.is-active::after { transform: scaleX(1); }

/* Theme mode switcher — prototype tool */
.jc-theme-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(3,7,3,0.1);
  border-radius: var(--radius-round);
  padding: 4px;
}
.jc-theme-btn {
  padding: 5px 10px;
  border-radius: var(--radius-round);
  border: none;
  background: transparent;
  color: var(--dark-900);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.45;
  transition: background 200ms ease, opacity 200ms ease;
  white-space: nowrap;
}
.jc-theme-btn.is-active {
  background: rgba(3,7,3,0.14);
  opacity: 1;
}
.jc-theme-btn:hover { opacity: 0.75; }

/* ---------- Section eyebrow + carousel header ---------- */
.jc-eyebrow { display: inline-flex; gap: 8px; align-items: baseline; }
.jc-eyebrow__num { color: var(--dark-900); }
.jc-carousel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 0;
  margin-bottom: 32px;
}
.jc-carousel-head__controls { display: flex; align-items: center; gap: 16px; }
/* R\u00e9alisations : titre de section rapproch\u00e9 des cartes */
.jc-projects .jc-carousel-head { margin-bottom: 0; }
.jc-carousel-head__count { font-family: var(--font-sans); font-size: var(--text-main-size); letter-spacing: var(--text-main-tracking); color: var(--dark-900); font-variant-numeric: tabular-nums; }
.jc-arrow-btn {
  width: 32px; height: 32px; background: transparent; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--dark-900);
  transition: opacity 200ms ease;
}
.jc-arrow-btn:hover { opacity: 0.55; }
.jc-arrow-btn svg { width: 24px; height: 24px; }
.jc-arrow-btn:disabled { opacity: 0.2; cursor: not-allowed; }

/* ============================================================
   Sections, in page order
   ============================================================ */

/* HERO SPLIT — green-300 band: H1 left + body+CTA right, full-width image directly below */
.jc-hero-split { background: var(--green-300); padding: 340px 0 140px; }
.jc-hero-split__inner { display: grid; grid-template-columns: 1.6fr 1fr; gap: 64px; align-items: flex-start; }
.jc-hero-split__title {
  /* Hero font is smaller than --h2 to match reference proportions */
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  max-width: none;
}
.jc-hero-split__body { display: flex; flex-direction: column; gap: 32px; max-width: 380px; justify-self: end; align-items: flex-start; }
.jc-hero-split__visual { width: 100%; height: 720px; background-size: cover; background-position: center; background-color: var(--green-300); }

/* "CE QU'ON FAIT" — 3-col grid: image | vide | eyebrow+body */
.jc-cequon { background: var(--bg); padding: 120px 0; }
.jc-cequon__inner { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 0; align-items: stretch; }
.jc-cequon__left { display: flex; flex-direction: column; gap: 20px; }
.jc-cequon__image { width: 75%; aspect-ratio: 3/4; background-size: cover; background-position: center; }
.jc-cequon__caption { color: var(--dark-900); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; line-height: 1.5; max-width: 260px; }
.jc-cequon__right { grid-column: 3; display: flex; flex-direction: column; justify-content: flex-start; padding-top: 0; max-width: none; }
.jc-cequon__body { font-size: var(--h4-size); line-height: var(--h4-lh); letter-spacing: var(--h4-tracking); max-width: 80%; margin-top: auto; margin-bottom: auto; }

/* MARQUEE BAND — Signé Janson scrolling, very faded */
.jc-marquee-band { background: var(--bg); padding: 48px 0 64px; overflow: hidden; color: rgba(3,7,3,0.16); }
.jc-marquee-band__track {
  display: inline-flex; gap: 32px; white-space: nowrap;
  font-family: var(--font-sans); font-weight: 500;
  font-size: var(--marquee-size); line-height: var(--marquee-lh); letter-spacing: var(--marquee-tracking);
  animation: jc-marquee-scroll 32s linear infinite;
  width: max-content;
}
.jc-marquee-band__group { display: inline-flex; gap: 32px; align-items: center; flex-shrink: 0; padding-right: 32px; }
.jc-marquee-band__dash { font-weight: 500; }
@keyframes jc-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* PROJECTS — carousel of 3 portrait thumbs */
.jc-projects { background: var(--bg); padding-top: 0; padding-bottom: 64px; }
.jc-projects__inner { width: 100%; margin: 0 auto; padding: 0 var(--site-margin); display: flex; flex-direction: column; gap: 0; }

.jc-projects__track-wrap { overflow: hidden; }
/* Mobile / tablette : défilement tactile natif avec accrochage — on swipe */
.jc-projects__track-wrap.is-swipe {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  /* Bord gauche align\u00e9 sur la marge du site, la carte suivante peut d\u00e9passer \u00e0 droite */
  margin-left: calc(-1 * var(--site-margin));
  margin-right: calc(-1 * var(--site-margin));
  /* Le rembourrage crée la marge de départ/fin, scroll-padding aligne
     l'accrochage sur cette marge plutôt que sur le bord de l'écran. */
  padding-left: var(--site-margin);
  scroll-padding-left: var(--site-margin);
}
/* La piste se dimensionne sur ses cartes ; la marge de droite est portée par la
   dernière carte — Safari iOS ignore le padding-right d'un conteneur défilant. */
.jc-projects__track-wrap.is-swipe .jc-projects__track { width: max-content; }
.jc-projects__track-wrap.is-swipe .jc-thumb:last-child { margin-right: var(--site-margin); }
.jc-projects__track-wrap.is-swipe .jc-thumb { flex: 0 0 calc((100vw - 2 * var(--site-margin) - 16px) / 2); }
@media (max-width: 680px) {
  .jc-projects__track-wrap.is-swipe .jc-thumb { flex: 0 0 calc(100vw - 2 * var(--site-margin) - 32px); }
}
.jc-projects__track-wrap.is-swipe::-webkit-scrollbar { display: none; }
.jc-projects__track-wrap.is-swipe .jc-thumb { scroll-snap-align: start; }
/* Témoignages swipables — une citation par écran */
.jc-testimonials__swipe {
  display: flex;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  margin: 24px 0 0;
}
.jc-testimonials__swipe::-webkit-scrollbar { display: none; }
.jc-testimonials__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  margin: 0;
  padding-right: 4px;
  box-sizing: border-box;
}
.jc-projects__track {
  display: flex; gap: 16px;
  transition: transform 600ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.jc-thumb {
  flex: 0 0 calc((100% - 32px) / 3);
  aspect-ratio: 3/4;
  background-size: cover; background-position: center;
  position: relative; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 32px;
  color: var(--taupe-50);
  text-decoration: none;
}
.jc-thumb__title { font-size: var(--h3-size); line-height: 1.1; letter-spacing: -0.018em; font-weight: 500; max-width: 80%; color: var(--taupe-50); }
.jc-thumb__hover {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.3); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  opacity: 0; transition: opacity 320ms ease;
  color: var(--white);
}
/* Écran tactile : pas de survol — l'overlay resterait collé après un tap */
@media (hover: hover) {
  .jc-thumb:hover .jc-thumb__hover { opacity: 1; }
}
.jc-thumb__hover-step { font-size: 56px; line-height: 1; font-weight: 500; }
.jc-thumb__hover-label { font-size: var(--text-main-size); letter-spacing: var(--text-main-tracking); font-weight: 500; color: var(--taupe-50); }

.jc-projects__cta { display: flex; justify-content: center; padding: 56px 0 24px; }

/* TESTIMONIALS — general client photo left, quote + author right */
.jc-testimonials { background: var(--bg); padding: 80px 0 120px; }
.jc-testimonials__body { display: grid; grid-template-columns: 480px 1fr; gap: 96px; align-items: start; min-width: 0; }
.jc-testimonials__photo { width: 480px; max-width: 100%; aspect-ratio: 4 / 5; flex-shrink: 0; background-size: cover; background-position: center; }
.jc-testimonials__right { display: flex; flex-direction: column; padding-left: 12%; min-width: 0; }
.jc-testimonials__right .jc-carousel-head { margin-bottom: 0; }
.jc-testimonials__quote-wrap { margin: 0; display: flex; flex-direction: column; gap: 32px; }
.jc-testimonials__quote { color: var(--dark-900); max-width: 720px; }
.jc-testimonials__attr { display: flex; flex-direction: column; gap: 20px; }
.jc-testimonials__attr .jc-text-main { color: var(--dark-900); }

/* FULL BLEED IMAGE (between testimonials and approche) */
.jc-fullbleed { width: 100%; height: 760px; background-size: cover; background-position: center; }

/* APPROCHE — taupe bg, left column = heading + lead + accordion,
   right column = green-300 card (full section height) with quote + bottom-right thumb */
.jc-approche { background: var(--bg); padding: 120px 0; }
.jc-approche__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: stretch;
}

/* LEFT COLUMN */
.jc-approche__left { display: flex; flex-direction: column; gap: 96px; }
.jc-approche__head { display: flex; flex-direction: column; gap: 24px; max-width: 520px; }
.jc-approche__title-h {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 96px;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--dark-900);
  margin: 0;
}
.jc-approche__lead { color: var(--dark-900); max-width: 400px; }

/* Accordion-style list — rows with title / num / dot, divider lines */
.jc-approche__list { display: flex; flex-direction: column; border-top: 1px solid rgba(3,7,3,0.18); margin-top: auto; }
.jc-approche__row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px 0;
  background: transparent; border: none;
  border-bottom: 1px solid rgba(3,7,3,0.18);
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: rgba(3,7,3,0.45);
  transition: color 200ms ease;
}
.jc-approche__row.is-active { color: var(--dark-900); }
.jc-approche__row:hover     { color: var(--dark-900); }
.jc-approche__title {
  font-family: var(--font-sans); font-weight: 500;
  font-size: var(--text-large-size); line-height: var(--text-large-lh); letter-spacing: var(--text-large-tracking);
  flex: 1;
}
.jc-approche__num {
  font-family: var(--font-sans); font-weight: 500;
  font-size: var(--text-main-size); letter-spacing: var(--text-main-tracking);
  flex: 1;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.jc-approche__dot { display: inline-flex; align-items: center; justify-content: flex-end; flex-shrink: 0; }

/* RIGHT COLUMN — green-300 card */
.jc-approche__card {
  background: var(--green-300);
  padding: 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 80px;
  min-height: 720px;
  position: relative;
}
.jc-approche__quote {
  font-family: var(--font-sans); font-weight: 500;
  font-size: 28px; line-height: 1.35; letter-spacing: -0.005em;
  color: var(--dark-900);
  max-width: 540px;
  margin: 0;
}
.jc-approche__thumb {
  width: 200px; height: 300px;
  background-size: cover; background-position: center;
  align-self: flex-end;
}

/* CARRIERES — image left + text+CTA right; eyebrow sits above the body column */
.jc-carrieres { background: var(--bg); padding: 96px 0 120px; }
.jc-carrieres__inner { display: flex; flex-direction: column; }
.jc-carrieres__row { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: stretch; }
.jc-carrieres__image { width: 100%; max-width: 480px; aspect-ratio: 4/5; background-size: cover; background-position: center; }
.jc-carrieres__body { display: flex; flex-direction: column; justify-content: space-between; padding-top: 8px; }
.jc-carrieres__eyebrow { }
.jc-carrieres__content { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; max-width: 60%; }

/* CONTACT CTA — green-500 section, taupe-50 text, tall portrait thumb on the right */
.jc-contact-cta {
  background: var(--green-500);
  color: var(--taupe-50);
  padding: 48px 0 0;
  position: relative;
  overflow: hidden;
}
.jc-contact-cta__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 96px 0;
  gap: 24px;
}
.jc-contact-cta__label {
  color: var(--taupe-50);
  opacity: 0.65;
  font-weight: 500;
}
.jc-contact-cta__head .jc-contact-cta__label:last-child { text-align: right; }
.jc-contact-cta__dash {
  font-family: var(--font-sans);
  color: var(--taupe-50);
  opacity: 0.5;
  font-size: 16px;
  line-height: 1;
}
.jc-contact-cta__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
  align-items: end;
  padding-bottom: 96px;
}
.jc-contact-cta__left { display: flex; flex-direction: column; gap: 64px; max-width: 1100px; align-items: flex-start; }
.jc-contact-cta__title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 88px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--taupe-50);
  margin: 0;
}
.jc-contact-cta__thumb {
  position: absolute;
  right: var(--site-margin);
  bottom: 96px;
  width: 9%;
  height: auto;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
}

/* ---------- Footer ---------- */
.jc-footer { background: var(--bg-dark); color: var(--taupe-50); padding: 120px 0 32px; }
.jc-footer__container {
  width: 100%; margin: 0 auto; padding: 0 var(--site-margin);
  display: flex; flex-direction: column; gap: 80px;
}

/* Top row — 2 columns: nav links left, contact info right */
.jc-footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

/* Big vertical nav links on the left */
.jc-footer__links { display: flex; flex-direction: column; gap: 24px; }
.jc-footer__links a {
  color: var(--taupe-50); text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 38px;
  line-height: 1.2;
  letter-spacing: -0.014em;
  transition: opacity 200ms ease;
}
.jc-footer__links a:hover { opacity: 0.6; }

/* Contact info on the right, right-aligned, larger body type */
.jc-footer__contact {
  display: flex; flex-direction: column; gap: 32px; align-items: flex-end;
}
.jc-footer__contact a {
  color: var(--taupe-50); text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-large-size);
  line-height: 1.5;
  letter-spacing: var(--text-large-tracking);
  text-align: right;
  transition: opacity 200ms ease;
}
.jc-footer__contact a:hover { opacity: 0.6; }
/* Profils sociaux — libellés typographiques, pas de glyphes (voir la marque) */
.jc-footer__social { display: flex; flex-wrap: wrap; gap: 24px; }
.jc-footer__social a { font-size: var(--text-main-size); letter-spacing: var(--text-main-tracking); }

/* Big JANSON mark, bottom-right, sits between top section and copyright bar */
.jc-footer__bigmark {
  display: flex;
  justify-content: flex-end;
  padding-top: 32px;
}
.jc-footer__bigmark img {
  height: 80px;
  opacity: 1;
  display: block;
}

/* Thin divider + 3-column copyright row */
.jc-footer__copyright {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  align-items: center;
  padding: 24px 0 0;
  border-top: 1px solid rgba(238, 238, 230, 0.18);
}
.jc-footer__copyright span {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-main-size);
  line-height: 1.5;
  letter-spacing: var(--text-main-tracking);
  text-transform: none;
  color: var(--taupe-50);
  opacity: 0.5;
}
.jc-footer__copyright span:nth-child(1) { text-align: left; }
.jc-footer__copyright span:nth-child(2) { text-align: center; }
.jc-footer__copyright span:nth-child(3) { text-align: right; }
.jc-footer__copyright a { color: inherit; text-decoration: none; transition: opacity 240ms cubic-bezier(0.25, 0.1, 0.25, 1); }
.jc-footer__copyright a:hover { opacity: 0.6; }

/* ============================================================
   Responsive — Janson takes the full viewport at every size
   ============================================================ */

/* Tablet — single column for most splits, slightly smaller type */
@media (max-width: 1100px) {
  :root {
    --marquee-size: 96px;
    --display-size: 80px;
    --h1-size: 64px;
    --h2-size: 56px;
    --h2alt-size: 48px;
    --h3-size: 36px;
    --h4-size: 28px;
    --h5-size: 22px;
    --section-main: 80px;
    --section-large: 112px;
    --section-page-top: 200px;
  }
  .jc-nav__links { display: none; }
  .jc-hero-split__inner       { grid-template-columns: 1fr; gap: 32px; }
  .jc-hero-split__title       { max-width: none; }
  .jc-hero-split__body        { max-width: none; }
  .jc-hero-split__visual      { height: 420px; }

  .jc-cequon__inner           { grid-template-columns: 1fr; gap: 40px; }
  /* Mobile : le texte d'abord, l'image + l\u00e9gende passent sous la section */
  .jc-cequon__left            { order: 2; }
  .jc-cequon__right           { order: 1; }
  .jc-cequon__left            { max-width: none; flex-direction: column; }
  .jc-cequon__image           { aspect-ratio: 3/4; width: 60%; max-width: 300px; }
  /* La légende ne dépasse jamais la largeur de son image */
  .jc-cequon__caption         { width: 60%; max-width: 300px; }
  .jc-cequon__right           { grid-column: 1; padding-top: 0; gap: 40px; justify-content: flex-start; }

  .jc-projects__track         { gap: 16px; }
  .jc-thumb                   { flex-basis: calc((100% - 16px) / 2); }

  .jc-testimonials__body      { grid-template-columns: 1fr; gap: 32px; }
  .jc-testimonials__photo     { max-width: 420px; }
  .jc-testimonials__right     { padding-left: 0; }
  .jc-testimonials__quote-wrap { gap: 24px; margin: 0; }
  .jc-testimonials__quote     { max-width: none; }

  .jc-fullbleed               { height: 480px; }

  .jc-carrieres__row          { grid-template-columns: 1fr; gap: 40px; }
  .jc-carrieres__body         { max-width: none; }
  /* Le texte occupe toute la largeur disponible sur mobile */
  .jc-carrieres__content      { max-width: none; }
  /* Rythme \u00e9gal titre \u2192 texte \u2192 bouton */
  .jc-carrieres__content .jc-btn { margin-top: 12px; }

  .jc-contact-cta__body       { grid-template-columns: 1fr; gap: 32px; }
  /* Même rythme que la section Carrières : titre → texte → bouton */
  .jc-contact-cta__left       { gap: 24px; }
  .jc-contact-cta__left .jc-btn { margin-top: 12px; }
  /* Image pleine largeur de la colonne, marges du site conservées */
  .jc-contact-cta__thumb      { position: static; order: -1; justify-self: stretch; width: 100%; max-width: none; height: auto; aspect-ratio: 4 / 3; }

  .jc-footer                   { padding: 64px 0 24px; }
  .jc-footer__container        { gap: 48px; }
  .jc-footer__top              { grid-template-columns: 1fr; gap: 40px; }
  .jc-footer__links a          { font-size: 28px; }
  .jc-footer__contact          { align-items: flex-start; gap: 12px; }
  .jc-footer__social           { gap: 20px; margin-top: 8px; }
  .jc-footer__contact a        { text-align: left; }
  .jc-footer__bigmark          { justify-content: flex-start; padding-top: 16px; }
  .jc-footer__bigmark img      { height: 72px; }
}

/* Mobile — full single column, tight margins, smaller type */
@media (max-width: 680px) {
  :root {
    --site-margin: 20px;
    --marquee-size: 64px;
    --display-size: 56px;
    --h1-size: 48px;
    --h2-size: 40px;
    --h2alt-size: 36px;
    --h3-size: 30px;
    --h4-size: 24px;
    --h5-size: 20px;
    --h6-size: 18px;
    --text-large-size: 18px;
    --section-main: 56px;
    --section-large: 80px;
    --section-page-top: 140px;
  }

  /* Prototype bar — single line, shrink chrome */
  .jc-prototype-bar { padding: 8px 16px; font-size: 10px; gap: 8px; flex-wrap: wrap; }
  .jc-prototype-bar .pages { width: 100%; margin-left: 0; }
  .jc-prototype-bar button { padding: 4px 8px; font-size: 10px; }

  /* Nav becomes a logo + CTA only (links already hidden at 1100) */
  .jc-nav__inner       { height: 64px; padding: 0 20px; }
  .jc-nav__brand img   { height: 40px; }
  .jc-btn              { padding: 18px 24px; font-size: 14px; gap: 12px; }
  .jc-btn--solid-dark  { padding: 18px 24px; }

  /* Hero */
  .jc-hero-split       { padding: 48px 0 32px; }
  .jc-hero-split__visual { height: 280px; }

  /* Carousel header — stack count + arrows below eyebrow */
  .jc-carousel-head           { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 0; }
  .jc-carousel-head__controls { width: 100%; justify-content: flex-end; }

  /* Project carousel — one card visible, slight peek */
  .jc-projects                { padding-bottom: 40px; }
  .jc-thumb                   { flex-basis: 88%; padding: 24px; }
  .jc-thumb__title            { max-width: 100%; }
  .jc-projects__track         { gap: 12px; }
  .jc-projects__cta           { padding: 32px 0 16px; }

  /* Sections — shorter rhythm */
  .jc-cequon                  { padding: 56px 0; }
  .jc-cequon__right           { gap: 32px; }
  .jc-cequon__caption         { font-size: 14px; }
  .jc-marquee-band            { padding: 16px 0 8px; }
  .jc-testimonials            { padding: 48px 0; }
  .jc-fullbleed               { height: 320px; }
  .jc-approche                { padding: 56px 0; }
  .jc-approche__inner         { grid-template-columns: 1fr; gap: 32px; }
  .jc-approche__left          { gap: 48px; }
  .jc-approche__title-h       { font-size: 64px; }
  .jc-approche__card          { padding: 32px; min-height: 0; gap: 40px; }
  .jc-approche__quote         { font-size: 22px; max-width: none; }
  .jc-approche__thumb         { width: 140px; height: 210px; }
  .jc-approche__row           { padding: 20px 0; }
  .jc-carrieres               { padding: 56px 0 72px; }
  .jc-carrieres__row          { grid-template-columns: 1fr; }
  .jc-carrieres__image        { aspect-ratio: 1/1; }
  .jc-contact-cta             { padding: 32px 0 0; }
  /* Même distance au-dessus qu'en dessous de « Contacter — Janson » */
  .jc-contact-cta__head       { padding: 0 0 32px 0; }
  .jc-contact-cta__body       { grid-template-columns: 1fr; gap: 24px; padding-bottom: 56px; }
  .jc-contact-cta__title      { font-size: 44px; }
  .jc-contact-cta__thumb      { width: 100%; max-width: none; height: auto; aspect-ratio: 4 / 3; }

  /* Footer */
  .jc-footer                  { padding: 48px 0 24px; }
  .jc-footer__container       { gap: 32px; }
  .jc-footer__links a         { font-size: 22px; }
  .jc-footer__contact a       { font-size: 16px; }
  .jc-footer__bigmark img     { height: 44px; }
  /* Copyright sur une seule ligne, texte plus petit */
  .jc-footer__copyright       { grid-template-columns: auto auto auto; gap: 8px; }
  .jc-footer__copyright span  { font-size: 11px; white-space: nowrap; }
  .jc-footer__copyright span:nth-child(1) { text-align: left; }
  .jc-footer__copyright span:nth-child(2) { text-align: center; }
  .jc-footer__copyright span:nth-child(3) { text-align: right; }

  /* Contact page — single column */
  .jc-contact { grid-template-columns: 1fr !important; gap: 40px !important; }
  .jc-contact form { grid-template-columns: 1fr !important; }
  .jc-realisations-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   BURST IMAGE ANIMATION — project card hover
   Only affects .jc-projects .jc-projects__inner .jc-thumb
   ============================================================ */

/* Placeholders de formulaire — vert sauge, plutôt que le gris du navigateur */
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--green-300); opacity: 1; }
.form-field select:has(option[value=""]:checked) { color: var(--green-300); }
.form-field select option { color: var(--dark-900); }

/* ── Révélation au scroll (components/Reveal.js) ──
   Le texte n'est animé qu'en opacité : une transformation le fait se recaler au
   sous-pixel en fin de course. La montée est réservée aux surfaces d'image. */
.jc-reveal {
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.jc-cequon__image.jc-reveal, .jc-carrieres__image.jc-reveal, .jc-testimonials__photo.jc-reveal,
.jc-contact-cta__thumb.jc-reveal, .ap-hist-img.jc-reveal, .c-approche__img.jc-reveal,
.c-approche2__img.jc-reveal, .cont-img-split__img.jc-reveal, .cs-apply__img.jc-reveal,
.carr-day__mosaic img.jc-reveal {
  transform: translateY(28px);
  transition: opacity 760ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 760ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.jc-reveal.is-revealed { opacity: 1; transform: translateY(0); }
.carr-day__mosaic img.jc-reveal.is-revealed { transform: translateY(0); }
/* Grille de réalisations — glisse vers le haut (part du bas, remonte en place).
   Aucune transition avant la révélation : sinon la mise en scène anime la carte
   VERS le bas au lieu de la poser directement à son point de départ. */
.real-grid .jc-thumb.jc-reveal,
.jc-projects__track > .jc-thumb.jc-reveal { transform: translateY(56px); transition: none; }
/* Bande d'image pleine largeur — montée de l'image DANS son cadre : le cadre ne
   bouge pas (sinon le fond de la section apparaît au-dessus). */
.jc-fullbleed.jc-reveal { transform: translateY(40px); transition: opacity 560ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 560ms cubic-bezier(0.25, 0.1, 0.25, 1); }
.jc-fullbleed.jc-reveal.is-revealed { transform: translateY(0); }
html.jc-anim .jc-fullbleed:not(.is-revealed) { opacity: 0; transform: translateY(40px); }
.real-grid .jc-thumb.jc-reveal.is-revealed,
.jc-projects__track > .jc-thumb.jc-reveal.is-revealed {
  transform: translateY(0);
  transition: opacity 760ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 760ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
/* Décalage par colonne pour que la remontée se lise de gauche à droite */
.real-grid .jc-thumb.jc-reveal.is-revealed:nth-child(3n+2),
.jc-projects__track > .jc-thumb.jc-reveal.is-revealed:nth-child(3n+2) { transition-delay: 130ms !important; }
.real-grid .jc-thumb.jc-reveal.is-revealed:nth-child(3n),
.jc-projects__track > .jc-thumb.jc-reveal.is-revealed:nth-child(3n) { transition-delay: 260ms !important; }
/* Entrée du hero — plus lente et plus étalée que le reste de la page */
.jc-hero-split__title.jc-reveal, .jc-hero-split__body p.jc-reveal, .jc-hero-split__body .jc-btn.jc-reveal {
  transition-duration: 700ms;
}
/* Pré-masquage : les cibles sont cachées dès la première peinture, sinon React
   les affiche puis le script les cache une frame plus tard (clignotement). */
html.jc-anim .jc-eyebrow:not(.is-revealed),
html.jc-anim .jc-carousel-head:not(.is-revealed),
html.jc-anim section h1:not(.is-revealed),
html.jc-anim section h2:not(.is-revealed),
html.jc-anim section h3:not(.is-revealed),
html.jc-anim section p:not(.is-revealed),
html.jc-anim .jc-btn:not(.is-revealed),
html.jc-anim .form-field:not(.is-revealed),
html.jc-anim .jc-cequon__caption:not(.is-revealed) { opacity: 0; }
/* Contre-règles : mêmes conteneurs que la liste EXCLUDE de Reveal.js — leur
   contenu n'est jamais mis en scène, il ne doit donc jamais être pré-masqué. */
html.jc-anim .jc-nav :is(h1,h2,h3,p,.jc-btn,.jc-eyebrow),
html.jc-anim .jc-nav__overlay :is(h1,h2,h3,p,.jc-btn,.jc-eyebrow),
html.jc-anim .jc-marquee :is(h1,h2,h3,p),
html.jc-anim .jc-projects__track :is(h1,h2,h3,p,.jc-btn,.jc-eyebrow),
html.jc-anim .jc-testimonials__swipe :is(h1,h2,h3,p,.jc-btn,.jc-eyebrow),
html.jc-anim .rs-masonry :is(h1,h2,h3,p),
html.jc-anim .jc-footer__bigmark :is(h1,h2,h3,p),
html.jc-anim .jc-burst__overlay :is(h1,h2,h3,p),
html.jc-anim .jc-thumb :is(h1,h2,h3,p,.jc-btn),
html.jc-anim .jc-thumb__hover :is(h1,h2,h3,p,.jc-btn),
html.jc-anim [data-no-reveal] :is(h1,h2,h3,p,.jc-btn,.jc-eyebrow,.form-field) { opacity: 1; }
/* Pré-masquage des vignettes de la grille : cachées et décalées dès la première
   peinture, avant même que le script les mette en scène. */
html.jc-anim .real-grid .jc-thumb:not(.is-revealed),
html.jc-anim .jc-projects__track > .jc-thumb:not(.is-revealed) { opacity: 0; transform: translateY(56px); }

/* Tant que les polices chargent, rien n'apparaît — évite la recomposition du texte */
.jc-fonts-loading .jc-reveal.is-revealed { opacity: 0; }
/* Le hero est piloté pas à pas : aucun délai CSS, la durée seule compte */
.jc-intro { transition-delay: 0ms !important; }
/* Composé sur le GPU uniquement pendant la montée des images */
.jc-cequon__image.jc-reveal:not(.is-revealed), .jc-carrieres__image.jc-reveal:not(.is-revealed),
.jc-testimonials__photo.jc-reveal:not(.is-revealed), .ap-hist-img.jc-reveal:not(.is-revealed),
.real-grid .jc-thumb.jc-reveal:not(.is-revealed),
.jc-projects__track > .jc-thumb.jc-reveal:not(.is-revealed) { will-change: opacity, transform; }
@media (prefers-reduced-motion: reduce) {
  .jc-reveal { opacity: 1; transform: none; transition: none; }
}

/* Barre de nav : entre en dernier, après le titre, pour éviter deux apparitions
   trop rapprochées. Pilotée par classe (components/Reveal.js). */
.jc-nav { opacity: 0; transition: opacity 600ms cubic-bezier(0.25, 0.1, 0.25, 1); }
/* Révélation portée par <html> : React re-rend le className de la nav au scroll
   et effacerait une classe posée sur l'élément lui-même. */
.jc-nav-in .jc-nav, .jc-nav.is-revealed { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .jc-nav { opacity: 1; transition: none; } }
/* Navigation interne : la nav est déjà en place, pas de ré-entrée */
.jc-nav-instant .jc-nav { opacity: 1; transition: none; }

/* ── Image hero : apparition retardée, montée douce ──
   Pilotée par une classe (components/Reveal.js), pas par @keyframes : l'horloge
   d'animation peut être gelée selon le contexte et l'image resterait invisible. */
.jc-hero-split__visual, .jc-hero-visual {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 560ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 560ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.jc-hero-split__visual.is-revealed, .jc-hero-visual.is-revealed { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .jc-hero-split__visual, .jc-hero-visual { opacity: 1; transform: none; transition: none; }
}

/* Corps du CTA : niveau att\u00e9nu\u00e9 port\u00e9 par la couleur, pas par opacity \u2014\n   sinon il entrerait en conflit avec la r\u00e9v\u00e9lation au scroll. */\n.jc-contact-cta__body-text { color: color-mix(in oklch, var(--fg-on-dark) 78%, var(--green-800)) !important; }\n\n/* Ensure thumb is a positioning context */
.jc-projects__inner .jc-thumb {
  position: relative;
  overflow: hidden;
}

/* Title stays above overlay */
.jc-projects__inner .jc-thumb__title,
.real-grid .jc-thumb__title { position: relative; z-index: 10; }

/* Overlay — hidden by default, flex column when .is-active */
.jc-burst__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 5;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-bottom: 80px;
  pointer-events: none;
}
@media (hover: hover) {
  .jc-burst__overlay.is-active { display: flex; }
}

/* "Voir le projet" label */
.jc-burst__label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-main-size);
  letter-spacing: var(--text-main-tracking);
  color: #eeeee6;
  white-space: nowrap;
}

/* Responsive image container — all 4 images stack inside */
.jc-burst__img-wrap {
  position: relative;
  width: 70%;
  max-width: 240px;
  aspect-ratio: 240 / 301;
  flex-shrink: 0;
}

/* Each step image — fills the wrap, invisible by default */
.jc-burst__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Per-image keyframes — hard cuts via close percentage pairs */
.jc-burst__overlay.is-active .jc-burst__img--1 { animation: jc-burst-1 2400ms linear infinite; }
.jc-burst__overlay.is-active .jc-burst__img--2 { animation: jc-burst-2 2400ms linear infinite; }
.jc-burst__overlay.is-active .jc-burst__img--3 { animation: jc-burst-3 2400ms linear infinite; }
.jc-burst__overlay.is-active .jc-burst__img--4 { animation: jc-burst-4 2400ms linear infinite; }

/* step-01 visible 0%–25% (0ms–600ms) */
@keyframes jc-burst-1 {
  0%,   24.9% { opacity: 1; }
  25%,  100%  { opacity: 0; }
}
/* step-02 visible 25%–50% (600ms–1200ms) */
@keyframes jc-burst-2 {
  0%,   24.9% { opacity: 0; }
  25%,  49.9% { opacity: 1; }
  50%,  100%  { opacity: 0; }
}
/* step-03 visible 50%–75% (1200ms–1800ms) */
@keyframes jc-burst-3 {
  0%,   49.9% { opacity: 0; }
  50%,  74.9% { opacity: 1; }
  75%,  100%  { opacity: 0; }
}
/* step-04 visible 75%–100% (1800ms–2400ms) */
@keyframes jc-burst-4 {
  0%,   74.9% { opacity: 0; }
  75%,  100%  { opacity: 1; }
}

/* Very small phones — make sure scrolling never breaks */
@media (max-width: 380px) {
  :root { --site-margin: 16px; --marquee-size: 56px; --h1-size: 40px; --h2-size: 34px; }
  .jc-thumb { padding: 20px; }
}

/* ============================================================
   THEME MODES
   Applied via data-theme attribute on <html>.
   Switch with JS: document.documentElement.setAttribute('data-theme','brand')
   Reset default:  document.documentElement.removeAttribute('data-theme')
   ============================================================ */

[data-theme="brand"] {
  /* ── Surfaces ── */
  --bg:          #858d80;   /* vert-300 — fond principal */
  --bg-elevated: #af977d;   /* taupe-700 — surfaces élevées */
  --bg-warm:     #575d51;   /* vert-500 — sections chaudes alternées */
  --bg-mid:      #575d51;   /* vert-500 — nav / hero (contraste vs --bg) */
  --bg-dark:     #2d372d;   /* vert-800 — sections sombres, inchangé */

  /* ── Texte ── */
  --fg:          #030703;   /* inchangé — contraste 6.2:1 ✓ AA sur vert-300 */
  --fg-on-dark:  #eeeee6;   /* inchangé */
  --fg-muted:    #2d372d;   /* vert-800 comme muted sur fond vert-300 */

  /* ── Bordures ── */
  --border:      #575d51;
  --border-dark: #2d372d;

  /* ── Override token brut — composants legacy (nav, card Approche) ── */
  --green-300:   #575d51;   /* assure le contraste card vs fond */

  /* ── Bouton primaire — sombre (spec Figma Brand) ── */
  --btn-primary-bg:           #030703;
  --btn-primary-bg-hover:     #2d372d;
  --btn-primary-fg:           #ffffff;
  --btn-primary-fg-hover:     #eeeee6;
  --btn-primary-border:       #030703;
  --btn-primary-border-hover: #2d372d;

  /* ── Bouton secondaire ── */
  --btn-secondary-bg:         transparent;
  --btn-secondary-bg-hover:   #2d372d;
  --btn-secondary-fg:         #030703;
  --btn-secondary-fg-hover:   #eeeee6;
  --btn-secondary-border:     #030703;

  /* ── Liens ── */
  --link-fg:           #030703;
  --link-border:       #030703;
  --link-border-hover: #030703;
}

[data-theme="dark"] {
  /* ── Surfaces ── */
  --bg:          #2d372d;   /* vert-800 — fond principal sombre */
  --bg-elevated: #575d51;   /* vert-500 — surfaces élevées */
  --bg-warm:     #575d51;   /* vert-500 — sections alternées */
  --bg-mid:      #575d51;   /* vert-500 — nav (contraste vs fond) */
  --bg-dark:     #030703;   /* quasi-noir — footer/sections très sombres */

  /* ── Texte ── */
  --fg:          #eeeee6;   /* taupe-50 — texte principal · 9.45:1 ✓ AAA */
  --fg-on-dark:  #eeeee6;
  --fg-muted:    #af977d;   /* taupe-700 · 4.2:1 ✓ AA large text */

  /* ── Bordures ── */
  --border:      #575d51;
  --border-dark: #858d80;

  /* ── Bouton primaire — clair sur fond sombre (inversé) ── */
  --btn-primary-bg:           #eeeee6;   /* taupe-50 · 9.45:1 ✓ AAA */
  --btn-primary-bg-hover:     #ded6c3;
  --btn-primary-fg:           #030703;   /* 17.8:1 ✓ AAA */
  --btn-primary-fg-hover:     #030703;
  --btn-primary-border:       #eeeee6;
  --btn-primary-border-hover: #ded6c3;

  /* ── Bouton secondaire ── */
  --btn-secondary-bg:         transparent;
  --btn-secondary-bg-hover:   #575d51;
  --btn-secondary-fg:         #eeeee6;
  --btn-secondary-fg-hover:   #eeeee6;
  --btn-secondary-border:     #eeeee6;

  /* ── Liens ── */
  --link-fg:           #eeeee6;
  --link-border:       #eeeee6;
  --link-border-hover: #eeeee6;
}

/* ── Overrides Dark mode : composants à couleurs hardcodées ── */

/* Nav */
[data-theme="dark"] .jc-nav__link       { color: var(--fg); }
[data-theme="dark"] .jc-nav__link::after { background: var(--fg); }
[data-theme="dark"] .jc-theme-switcher  { background: rgba(238,238,230,0.08); }
[data-theme="dark"] .jc-theme-btn       { color: var(--fg); }
[data-theme="dark"] .jc-theme-btn.is-active { background: rgba(238,238,230,0.12); }

/* Eyebrows / eyebrow counts (use --dark-900 hardcoded) */
[data-theme="dark"] .jc-eyebrow,
[data-theme="dark"] .jc-eyebrow__num   { color: var(--fg); }

/* Marquee — invisible sur fond sombre sinon */
[data-theme="dark"] .jc-marquee-band   { color: rgba(238,238,230,0.10); }

/* Carousel divider */
[data-theme="dark"] .jc-carousel-head  { border-color: rgba(238,238,230,0.12); }

/* Testimonials */
[data-theme="dark"] .jc-testimonials__quote          { color: var(--fg); }
[data-theme="dark"] .jc-testimonials__attr .jc-text-main { color: var(--fg); }

/* Approche — titres + dividers + rows */
[data-theme="dark"] .jc-approche__title-h            { color: var(--fg); }
[data-theme="dark"] .jc-approche__lead               { color: var(--fg); }
[data-theme="dark"] .jc-approche__list               { border-color: rgba(238,238,230,0.12); }
[data-theme="dark"] .jc-approche__row                { color: rgba(238,238,230,0.35); border-color: rgba(238,238,230,0.12); }
[data-theme="dark"] .jc-approche__row.is-active,
[data-theme="dark"] .jc-approche__row:hover          { color: var(--fg); }

/* ============================================================
   RESPONSIVE ADDITIONS — START
   Ajouts pour les composants non couverts par les media queries
   originales. !important est requis : chaque page définit ses
   classes dans un <style> inline (postérieur à styles.css), et
   .real-grid porte un style inline (grid-template-columns) — sans
   !important ces règles seraient écrasées par la cascade.
   Supprimer ce bloc pour revenir à l'état précédent.
   ============================================================ */

/* ---------- Menu hamburger + overlay plein écran ---------- */
/* Hamburger masqué par défaut (desktop ≥ 1101px) */
.jc-nav__hamburger { display: none; }

/* Overlay plein écran — sous la navbar (z-index 50) */
.jc-nav__overlay {
  position: fixed;
  inset: 0;
  z-index: 49;
  background: var(--green-800);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 120px var(--site-margin) var(--site-margin);
  gap: 48px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1), visibility 400ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.jc-nav__overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Liens — pleine largeur, rangées séparées par des filets */
.jc-nav__overlay-links {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-top: 1px solid rgba(238, 238, 230, 0.18);
}
.jc-nav__overlay-links a {
  display: block;
  width: 100%;
  color: var(--taupe-50);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--h3-size);
  line-height: 1.1;
  letter-spacing: var(--h3-tracking);
  text-decoration: none;
  padding: 24px 0;
  border-bottom: 1px solid rgba(238, 238, 230, 0.18);
  transition: opacity 480ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 480ms cubic-bezier(0.25, 0.1, 0.25, 1);
  opacity: 0;
  transform: translateY(24px);
}
.jc-nav__overlay.is-open .jc-nav__overlay-links a { opacity: 1; transform: translateY(0); }
.jc-nav__overlay-cta {
  transition: opacity 480ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 480ms cubic-bezier(0.25, 0.1, 0.25, 1);
  opacity: 0;
  transform: translateY(24px);
}
.jc-nav__overlay.is-open .jc-nav__overlay-cta { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .jc-nav__overlay-links a, .jc-nav__overlay-cta { transition: none; opacity: 1; transform: none; }
}
.jc-nav__overlay.is-open .jc-nav__overlay-links a:hover { opacity: 0.6; }
.jc-nav__overlay-links a:focus-visible { outline: 2px solid var(--taupe-50); outline-offset: -4px; opacity: 1; }

/* CTA — pleine largeur, ancré au bas de l'overlay */
.jc-nav__overlay-cta {
  width: 100%;
  margin-top: auto;
  padding-bottom: var(--site-margin);
}
.jc-nav__overlay-cta .jc-btn {
  width: 100%;
  justify-content: space-between;
  padding: 20px 24px;
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {

  /* Le CTA de la navbar est masqué — il vit désormais dans l'overlay */
  .jc-nav__right .jc-btn { display: none; }

  /* Révèle le bouton hamburger, calé à droite */
  .jc-nav__hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 8px;
    background: transparent;
    border: none;
    border-radius: var(--radius-small);
    color: var(--fg);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 240ms ease;
  }
  .jc-nav__hamburger svg { width: 24px; height: 24px; display: block; }
  .jc-nav__hamburger .hb-line {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 280ms cubic-bezier(0.25, 0.1, 0.25, 1), opacity 200ms ease;
  }
  .jc-nav__hamburger:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

  /* Overlay ouvert : icône claire + lignes transformées en X */
  .jc-nav.is-open .jc-nav__hamburger { color: var(--taupe-50); }
  .jc-nav.is-open .jc-nav__hamburger:focus-visible { outline-color: var(--taupe-50); }
  .jc-nav.is-open .jc-nav__hamburger .hb-top { transform: translateY(5px) rotate(45deg); }
  .jc-nav.is-open .jc-nav__hamburger .hb-mid { opacity: 0; }
  .jc-nav.is-open .jc-nav__hamburger .hb-bot { transform: translateY(-5px) rotate(-45deg); }

  /* Headers 2 colonnes (titre gauche / sous-titre droite) des pages
     intérieures → colonne unique, sous-titre sous le titre, gap 24px */
  .ap-opener-grid,
  .carr-opener-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-4) !important;
  }

  /* Grille asymétrique "Ce qu'on construit" (60/40, 2 rangées)
     → colonne unique, chaque carte 280px */
  .c-builds__row1 {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  .c-builds__row1 .jc-thumb { height: 280px !important; }

  /* Section équipe (A-propos) — grille 3 colonnes → 2 colonnes */
  .ap-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Grille de réalisations — 3 colonnes → 2 colonnes
     (le style inline force 3 colonnes : !important obligatoire) */
  .real-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Layout single réalisation — galerie masonry → 1 colonne,
     on annule les spans éditoriaux */
  .rs-gallery { grid-template-columns: 1fr !important; }
  .rs-cell--wide,
  .rs-cell--tall { grid-column: auto !important; grid-row: auto !important; }

  /* Section contact (titre gauche / formulaire droite) + tous les
     formulaires 2 colonnes → colonne unique */
  .cont-layout,
  .cont-form,
  .cont-img-split,
  .carr-candid,
  .carr-form-grid,
  .cs-apply,
  .cs-intro,
  .cs-content,
  .cs-form { grid-template-columns: 1fr !important; }
  .carr-candid__left { position: static !important; }
  .carr-form-full,
  .cont-span,
  .cs-span { grid-column: 1 / -1 !important; }

  /* Section "Ce qu'on fait" — l'image et le texte remplissent toute la
     largeur de la colonne (sinon proportions desktop \u00e9cras\u00e9es) */
  /* Section "Ce qu'on fait" — image portrait réduite, légende alignée dessus */
  .jc-cequon__body    { max-width: 100% !important; }
}

/* ---------- Mobile ---------- */
@media (max-width: 680px) {

  /* Grilles encore multi-colonnes au tablet → colonne unique */
  .ap-team-grid,
  .real-grid,
  .c-builds__row1 { grid-template-columns: 1fr !important; }

  /* Cartes "Ce qu'on construit" plus courtes en mobile */
  .c-builds__row1 .jc-thumb { height: 240px !important; }

  /* Headers intérieurs, formulaires, galerie masonry et section
     contact héritent déjà du passage en colonne unique défini au
     breakpoint tablet — aucune règle supplémentaire nécessaire.
     Les paddings/gaps de section suivent --section-main et
     --site-margin déjà redéfinis pour mobile plus haut. */
}

/* ============================================================
   RESPONSIVE ADDITIONS — END
   ============================================================ */