:root {
  --yellow: #fff569;
  --paper: #f5f0eb;
  --ink: #070707;
  --display: "Boldonse", sans-serif;
  --sans: "DM Sans", sans-serif;
  --page-pad: 40px;
  --footer-gap: 24px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 999; background: #fff; padding: .75rem 1rem; }
.panel { position: relative; min-height: 100svh; min-height: 100dvh; overflow: hidden; }
.panel--paper { background: var(--paper); }
.panel--yellow { background: var(--yellow); }
.panel--dark { background: var(--ink); color: var(--yellow); }
.panel__inner {
  position: relative; z-index: 3;
  min-height: calc(100svh - 2 * var(--page-pad));
  min-height: calc(100dvh - 2 * var(--page-pad));
  padding: clamp(84px, 10vh, 112px) var(--page-pad) calc(58px + var(--footer-gap));
}
.corner-logo { position: absolute; top: 0; left: 0; width: clamp(128px, 12vw, 170px); z-index: 4; }
.panel-arrow {
  position: absolute; right: 36px; top: 40px; width: 48px; height: 48px; border-radius: 999px;
  display: grid; place-items: center; z-index: 6;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.panel-arrow:hover { transform: translateY(-2px); }
.panel-arrow svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.panel-arrow--yellow { background: var(--yellow); color: var(--ink); }
.panel-arrow--dark { background: var(--ink); color: var(--yellow); }
.panel-arrow--light { background: #fff; color: var(--ink); }
.panel-footer {
  position: absolute; left: var(--page-pad); right: var(--page-pad); bottom: 0; z-index: 5;
  padding: 14px 0 16px; border-top: 1.5px solid currentColor;
}
.panel-footer nav {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  font-size: .96rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
}
.panel-footer nav a span { margin-left: .18em; }
.panel-footer--lineonly { min-height: 48px; }
.panel--dark .panel-footer { border-color: var(--yellow); }

.questions-layout { display: grid; align-items: center; }
.questions-copy { width: min(980px, 74vw); margin-left: clamp(94px, 10vw, 180px); }
.questions-title {
  margin: 0 0 clamp(24px, 3.6vh, 38px); font-family: var(--display);
  font-size: clamp(2rem, 4vw, 4.15rem); line-height: 1.04; letter-spacing: -.026em;
}
.questions-subcopy {
  margin-top: clamp(26px, 4.5vh, 48px); max-width: 31rem;
  font-size: clamp(1.06rem, 1.32vw, 1.48rem); line-height: 1.16;
}

.hero-neck { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-neck img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: .42; }
.hero-layout { display: grid; align-items: center; }
.hero-title {
  position: relative; z-index: 3; margin: 0; max-width: 8.1ch; font-family: var(--display);
  font-size: clamp(3.1rem, 6.6vw, 6.9rem); line-height: .94; letter-spacing: -.036em;
}

.studio-layout { display: grid; align-items: start; }
.studio-copy { width: min(900px, 100%); margin-left: clamp(230px, 23vw, 340px); }
.studio-block + .studio-block { margin-top: clamp(22px, 3.2vh, 34px); }
.studio-block h2 {
  margin: 0 0 14px; font-family: var(--display);
  font-size: clamp(1.95rem, 4.2vw, 4.35rem); line-height: .98; letter-spacing: -.03em;
}
.studio-block--intro p { margin: 0; max-width: 18ch; font-size: clamp(1.14rem, 1.48vw, 1.64rem); line-height: 1.15; }
.studio-lead { margin: 0 0 16px; max-width: 15ch; font-size: clamp(1.62rem, 2.35vw, 2.8rem); line-height: 1.08; }
.studio-block--main p:last-child { margin: 0; max-width: 35ch; font-size: clamp(.98rem, 1.28vw, 1.32rem); line-height: 1.18; }

.contact-layout { display: grid; align-items: center; }
.contact-kicker { margin: 0 0 clamp(32px, 4.6vh, 54px); max-width: 12ch; font-size: clamp(1.68rem, 2.28vw, 2.85rem); line-height: 1.08; }
.contact-row { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; align-items: center; gap: 24px; }
.contact-title { margin: 0; font-family: var(--display); font-size: clamp(2.7rem, 5.9vw, 6.35rem); line-height: .93; letter-spacing: -.04em; }
.email-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 72px; padding: 16px 22px 14px;
  border-radius: 6px; background: var(--paper); box-shadow: inset 0 0 0 1.5px rgba(7,7,7,.08);
  font-family: var(--display); font-size: clamp(1.38rem, 2.22vw, 2.65rem); line-height: 1; letter-spacing: -.022em;
  transition: background-color .2s ease, transform .18s ease;
}
.email-button:hover, .email-button:focus-visible { background: var(--yellow); transform: translateY(-1px); }

@media (max-width: 1100px) {
  :root { --page-pad: 28px; }
  .panel__inner { padding-top: 78px; padding-bottom: calc(56px + var(--footer-gap)); }
  .questions-copy, .studio-copy { margin-left: clamp(68px, 10vw, 120px); }
  .questions-copy { width: min(100%, 860px); }
  .hero-title { font-size: clamp(2.95rem, 7.2vw, 5.8rem); }
  .studio-copy { margin-left: clamp(160px, 18vw, 260px); }
  .contact-row { grid-template-columns: 1fr; justify-items: start; }
}

@media (max-width: 760px) {
  :root { --page-pad: 20px; --footer-gap: 18px; }
  .panel__inner {
    min-height: calc(100svh - 2 * var(--page-pad));
    min-height: calc(100dvh - 2 * var(--page-pad));
    padding-top: 82px; padding-bottom: 82px;
  }
  .corner-logo { width: 110px; }
  .panel-arrow { width: 44px; height: 44px; top: 16px; right: 16px; }
  .panel-footer { left: var(--page-pad); right: var(--page-pad); padding: 14px 0; }
  .panel-footer nav { gap: 16px; font-size: .9rem; }
  .questions-copy, .studio-copy { width: 100%; margin-left: 0; }
  .questions-title { font-size: clamp(1.72rem, 6.9vw, 2.72rem); line-height: 1.03; letter-spacing: -.024em; margin-bottom: 18px; }
  .questions-subcopy { margin-top: 20px; max-width: 15.25rem; font-size: clamp(.98rem, 3.9vw, 1.18rem); line-height: 1.18; }
  .hero-title {
    max-width: 6.4ch; font-size: clamp(2.46rem, 12.2vw, 3.95rem); line-height: .96; letter-spacing: -.03em;
    margin-top: 15vh; overflow-wrap: normal; word-break: normal; hyphens: manual;
  }
  .studio-block h2 { margin-bottom: 10px; font-size: clamp(1.82rem, 8.7vw, 3rem); }
  .studio-block--intro p { max-width: 19ch; font-size: clamp(1.02rem, 4.15vw, 1.22rem); line-height: 1.15; }
  .studio-block + .studio-block { margin-top: 18px; }
  .studio-lead { max-width: 12.6ch; font-size: clamp(1.52rem, 7.2vw, 2.3rem); line-height: 1.08; margin-bottom: 14px; }
  .studio-block--main p:last-child { max-width: none; font-size: clamp(.92rem, 3.55vw, 1.05rem); line-height: 1.18; }
  .contact-kicker { font-size: clamp(1.34rem, 6vw, 2rem); max-width: 11.5ch; margin-bottom: 22px; line-height: 1.08; }
  .contact-title { font-size: clamp(2.2rem, 12vw, 4rem); line-height: .94; }
  .email-button { min-height: 56px; width: 100%; justify-content: flex-start; padding: 14px 16px 12px; font-size: clamp(1.06rem, 5.3vw, 1.66rem); }
}


/* ===== V23 refinements ===== */
.corner-logo { width: clamp(160px, 15vw, 212px); }

.questions-title {
  font-size: clamp(1.86rem, 3.58vw, 3.7rem);
  line-height: 1.16;
  letter-spacing: 0;
  margin-bottom: clamp(22px, 3.1vh, 30px);
}
.questions-subcopy {
  line-height: 1.24;
}

.hero-title {
  max-width: 8.6ch;
  font-size: clamp(3.1rem, 6.15vw, 6.35rem);
  line-height: 1.12;
  letter-spacing: 0;
}

.studio-copy {
  width: min(920px, 100%);
  margin-left: clamp(180px, 19vw, 290px);
}
.studio-block h2 {
  letter-spacing: 0;
  line-height: 1.1;
}
.studio-block--intro p {
  line-height: 1.22;
}
.studio-lead {
  max-width: 16ch;
  line-height: 1.18;
}
.studio-block--main p:last-child {
  line-height: 1.22;
}

.contact-kicker {
  max-width: 16ch;
  font-size: clamp(1.6rem, 2.14vw, 2.55rem);
  line-height: 1.22;
  margin-bottom: clamp(30px, 4.3vh, 48px);
}
.contact-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 26px;
}
.contact-title {
  font-size: clamp(3.1rem, 6.15vw, 6.35rem);
  line-height: 1.12;
  letter-spacing: 0;
}
.email-button {
  align-self: end;
}

@media (max-width: 1100px) {
  .corner-logo { width: clamp(150px, 18vw, 190px); }
  .contact-row { grid-template-columns: 1fr; align-items: start; gap: 18px; }
  .hero-title, .contact-title {
    font-size: clamp(2.95rem, 6.8vw, 5.8rem);
  }
  .studio-copy {
    margin-left: clamp(120px, 14vw, 220px);
  }
}

@media (max-width: 760px) {
  .corner-logo { width: 138px; }
  .questions-title {
    font-size: clamp(1.56rem, 5.9vw, 2.28rem);
    line-height: 1.18;
    letter-spacing: 0;
    margin-bottom: 16px;
  }
  .questions-subcopy {
    line-height: 1.24;
  }
  .hero-title {
    max-width: 7.1ch;
    font-size: clamp(2.28rem, 10.8vw, 3.7rem);
    line-height: 1.14;
    letter-spacing: 0;
    margin-top: 14vh;
  }
  .studio-block h2 {
    line-height: 1.12;
    letter-spacing: 0;
  }
  .studio-block--intro p {
    line-height: 1.22;
  }
  .studio-lead {
    max-width: 13.5ch;
    font-size: clamp(1.4rem, 6.5vw, 2.08rem);
    line-height: 1.16;
    margin-bottom: 12px;
  }
  .studio-block--main p:last-child {
    line-height: 1.22;
  }
  .contact-kicker {
    max-width: 16ch;
    font-size: clamp(1.22rem, 5vw, 1.7rem);
    line-height: 1.2;
  }
  .contact-title {
    font-size: clamp(2.28rem, 10.8vw, 3.7rem);
    line-height: 1.14;
    letter-spacing: 0;
  }
}


/* ===== V24 — line-height & free wrapping ===== */
.questions-copy {
  width: min(1180px, 84vw);
}
.questions-title {
  font-size: clamp(1.66rem, 3.08vw, 3.16rem);
  line-height: 1.28;
  letter-spacing: 0;
  text-wrap: balance;
  hyphens: auto;
  max-width: 34ch;
  margin-bottom: clamp(18px, 2.4vh, 24px);
}
.questions-subcopy {
  line-height: 1.28;
}

.hero-title {
  max-width: 10.8ch;
  line-height: 1.2;
  letter-spacing: 0;
  text-wrap: balance;
  hyphens: auto;
}

.studio-block h2,
.studio-lead,
.contact-title,
.contact-kicker {
  hyphens: auto;
  text-wrap: balance;
}
.studio-block h2 {
  line-height: 1.18;
}
.studio-lead {
  max-width: 18ch;
  line-height: 1.24;
}
.contact-kicker {
  max-width: 18ch;
  line-height: 1.26;
}
.contact-title {
  line-height: 1.18;
}

@media (max-width: 760px) {
  .questions-title {
    font-size: clamp(1.42rem, 5.2vw, 2rem);
    line-height: 1.28;
    max-width: 100%;
  }
  .hero-title {
    max-width: 8.8ch;
    font-size: clamp(2.1rem, 9.4vw, 3.25rem);
    line-height: 1.18;
  }
  .studio-lead {
    max-width: 100%;
    line-height: 1.24;
  }
  .contact-kicker,
  .contact-title {
    line-height: 1.22;
  }
}


/* =========================================================
   V26 — repart strictement de la V24
   Changements limités : hero + studio
   ========================================================= */

/* HERO — même taille desktop que V24, mais davantage de leading */
.hero-title {
  line-height: 1.34 !important;
}

/* STUDIO — mise en page 1/3 + 2/3 sur desktop */
@media (min-width: 761px) {
  .studio-layout {
    align-items: center !important;
  }
  .studio-copy {
    width: min(1180px, 82vw) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important;
    column-gap: clamp(2.5rem, 5vw, 5.5rem) !important;
    align-items: start !important;
  }
  .studio-block + .studio-block {
    margin-top: 0 !important;
  }
  .studio-block h2 {
    margin-bottom: 16px !important;
    letter-spacing: 0 !important;
  }
  .studio-block--intro p {
    max-width: 26ch !important;
    font-size: clamp(1.06rem, 1.34vw, 1.5rem) !important;
    line-height: 1.26 !important;
  }
  .studio-lead {
    max-width: none !important;
    font-weight: 700 !important;
    font-size: clamp(1.5rem, 2.15vw, 2.55rem) !important;
    line-height: 1.24 !important;
    margin-bottom: 18px !important;
  }
  .studio-block--main p:last-child {
    max-width: 42ch !important;
    font-size: clamp(.92rem, 1.16vw, 1.2rem) !important;
    line-height: 1.28 !important;
  }
}

/* Mobile — titre hero plus petit pour rester dans l'écran */
@media (max-width: 760px) {
  .hero-title {
    font-size: clamp(1.95rem, 8.6vw, 2.95rem) !important;
    line-height: 1.28 !important;
    max-width: 8.8ch !important;
    margin-top: 14vh !important;
  }
  .studio-copy {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
  .studio-block + .studio-block {
    margin-top: 20px !important;
  }
  .studio-block h2 {
    letter-spacing: 0 !important;
  }
  .studio-block--intro p {
    font-size: clamp(.98rem, 3.9vw, 1.16rem) !important;
    line-height: 1.24 !important;
  }
  .studio-lead {
    font-weight: 700 !important;
    font-size: clamp(1.32rem, 5.8vw, 1.82rem) !important;
    line-height: 1.22 !important;
  }
  .studio-block--main p:last-child {
    font-size: clamp(.88rem, 3.3vw, .98rem) !important;
    line-height: 1.24 !important;
  }
}


/* =========================================================
   V27 — desktop only refinements from V26
   ========================================================= */
@media (min-width: 761px) {
  /* QUESTIONS — bloc ancré à gauche, sous-texte au corps du Studio */
  .questions-copy {
    width: min(1180px, 84vw) !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
  }
  .questions-subcopy {
    max-width: 42ch !important;
    margin-top: clamp(24px, 3.6vh, 40px) !important;
    font-size: clamp(1.06rem, 1.34vw, 1.5rem) !important;
    line-height: 1.26 !important;
  }
  .questions-subcopy__line2 {
    font-size: calc(1em + 1px);
  }

  /* HERO — cou plus petit pour qu'on lise davantage sa forme */
  .hero-neck img {
    inset: auto !important;
    left: 10% !important;
    top: 8% !important;
    width: 80% !important;
    height: 84% !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  /* STUDIO — corps courant harmonisé, lead sans bold */
  .studio-block--main p:last-child {
    max-width: 42ch !important;
    font-size: clamp(1.06rem, 1.34vw, 1.5rem) !important;
    line-height: 1.26 !important;
  }
  .studio-lead {
    font-weight: 400 !important;
  }

  /* CONTACT — surtitre élargi pour rester sur deux lignes */
  .contact-kicker {
    width: 42vw !important;
    max-width: 760px !important;
  }
}


/* =========================================================
   V28 — desktop-only tweaks requested
   ========================================================= */
@media (min-width: 761px) {
  /* QUESTIONS — more leading so Boldonse lines never touch */
  .questions-title {
    line-height: 1.38 !important;
    margin-bottom: clamp(20px, 2.8vh, 28px) !important;
  }

  /* HERO — neck larger again, but cropped offscreen top and bottom */
  .hero-neck img {
    left: 14% !important;
    top: -14% !important;
    width: 72% !important;
    height: 128% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* CONTACT — pure white background */
  .panel--contact {
    background: #ffffff !important;
  }
}


/* =========================================================
   V29 — footer/menu safety offset only
   ========================================================= */
.panel-footer {
  bottom: calc(28px + env(safe-area-inset-bottom)) !important;
}


/* =========================================================
   V30 — MOBILE ONLY refinements (desktop untouched)
   ========================================================= */
@media (max-width: 760px) {
  /* Leave extra room above the browser / Netlify badge area */
  .panel-footer {
    bottom: calc(82px + env(safe-area-inset-bottom)) !important;
  }
  .panel__inner {
    padding-bottom: 154px !important;
  }

  /* QUESTIONS — more leading + one point larger supporting copy */
  .questions-title {
    line-height: 1.42 !important;
  }
  .questions-subcopy {
    font-size: calc(clamp(.98rem, 3.9vw, 1.18rem) + 1px) !important;
    line-height: 1.30 !important;
  }

  /* HERO — exactly two lines, slightly larger, vertically centered */
  .hero-layout {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  .hero-title {
    width: 100% !important;
    max-width: none !important;
    margin-top: 0 !important;
    font-size: clamp(2.18rem, 9.3vw, 2.9rem) !important;
    line-height: 1.34 !important;
    letter-spacing: 0 !important;
  }
  .hero-title span {
    display: block !important;
    white-space: nowrap !important;
  }

  /* STUDIO — body copy matches question supporting copy, all still fits one screen */
  .studio-layout {
    display: flex !important;
    align-items: center !important;
  }
  .studio-copy {
    width: 100% !important;
    margin: 0 !important;
  }
  .studio-block--intro p,
  .studio-block--main p:last-child {
    font-size: calc(clamp(.98rem, 3.9vw, 1.18rem) + 1px) !important;
    line-height: 1.23 !important;
  }
  .studio-block + .studio-block {
    margin-top: 16px !important;
  }
  .studio-block h2 {
    margin-bottom: 8px !important;
  }
  .studio-lead {
    font-size: clamp(1.26rem, 5.35vw, 1.72rem) !important;
    line-height: 1.22 !important;
    margin-bottom: 10px !important;
  }

  /* CONTACT — larger headline, centered vertically, email fills its button */
  .panel--contact {
    background: #ffffff !important;
  }
  .contact-layout {
    display: flex !important;
    align-items: center !important;
  }
  .contact-kicker {
    font-size: clamp(1.28rem, 5.25vw, 1.75rem) !important;
    line-height: 1.28 !important;
    margin-bottom: 24px !important;
  }
  .contact-row {
    width: 100% !important;
  }
  .contact-title {
    font-size: clamp(2.18rem, 9.3vw, 2.9rem) !important;
    line-height: 1.34 !important;
  }
  .email-button {
    width: 100% !important;
    justify-content: center !important;
    font-size: clamp(1.42rem, 6.2vw, 1.9rem) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    white-space: nowrap !important;
  }
}


/* =========================================================
   V31 — desktop hero fix + mobile-only refinements
   ========================================================= */

/* DESKTOP: only the hero title is adjusted. Keep it on two clean lines. */
@media (min-width: 761px) {
  .hero-title {
    max-width: none !important;
  }
  .hero-title span {
    display: block !important;
    white-space: nowrap !important;
  }
}

/* MOBILE ONLY */
@media (max-width: 760px) {
  /* Footer/menu: a little lower than V30, still clear of the Netlify badge. */
  .panel-footer {
    bottom: calc(54px + env(safe-area-inset-bottom)) !important;
  }
  .panel__inner {
    padding-bottom: 126px !important;
  }

  /* CONTACT: kicker full width and above Parlons-en; whole content vertically centred. */
  .contact-layout {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
  }
  .contact-kicker {
    width: 100% !important;
    max-width: none !important;
    margin-bottom: 24px !important;
  }
  .contact-row {
    width: 100% !important;
  }

  /* STUDIO: intro paragraph uses full width. Main body flows naturally with no forced line breaks. */
  .studio-block--intro p {
    width: 100% !important;
    max-width: none !important;
  }
  .studio-block--main p:last-child {
    width: 100% !important;
    max-width: none !important;
  }
  .studio-block--main p:last-child br {
    display: none !important;
  }
}