/* Nuna Consulting — French static pages
   Rebuilt to match the live English site's actual structure (verified via screenshot):
   - Contained/centered layout with side margins
   - Logo icon + text lockup
   - Plain-text header CTA (no button box)
   - Hero: text overlaid on image
   - 3-column section: text / text / image
   - Commitment section: image-left / text-right */

:root {
  --base: #ffffff;
  --contrast: #000000;
  --indigo-dye: #16425B;
  --lapis-lazuli: #2F6690;
  --carolina-blue: #82B4D3;
  --midnight-green: #235E70;
  --pacific-cyan: #30A2C5;
  --columbia-blue: #CDE7EF;
  --base-midtone: #f4f4f4;
  --contrast-midtone: #323232;

  --font-body: 'Roboto Flex', system-ui, sans-serif;

  --sp-20: clamp(0.625rem, 0.5rem + 0.37vw, 0.875rem);
  --sp-30: clamp(0.9375rem, 0.8125rem + 0.37vw, 1.25rem);
  --sp-40: clamp(1.25rem, 1.125rem + 0.61vw, 1.75rem);
  --sp-50: clamp(1.75rem, 1.5rem + 0.61vw, 2.5rem);
  --sp-60: clamp(2.1875rem, 1.9375rem + 1.14vw, 3.5rem);
  --sp-70: clamp(3rem, 2.5rem + 1.83vw, 5rem);
  --sp-80: clamp(4rem, 3.25rem + 2.44vw, 7rem);

  --content-width: 1100px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--contrast-midtone);
  background: var(--base);
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--font-body);
  line-height: 1.15;
  color: var(--indigo-dye);
  margin: 0 0 var(--sp-30);
  font-weight: 700;
}

.wrap { max-width: var(--content-width); margin: 0 auto; padding: 0 var(--sp-50); }

/* ---- Header ---- */
.site-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-40);
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--sp-40) var(--sp-50);
}

.header-phone {
  text-align: center;
  font-size: 0.9em;
  white-space: nowrap;
}

.site-header .logo-lockup {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.site-header .logo-lockup img { height: 100px; width: auto; }

.site-header .logo-lockup .logo-text {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--indigo-dye);
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--sp-40);
  flex-wrap: wrap;
  font-size: 0.85em;
}

.header-right a:hover { text-decoration: underline; }

.header-cta { color: var(--pacific-cyan); font-weight: 600; }

.lang-toggle a {
  font-weight: 600;
  color: var(--indigo-dye);
}

.lang-toggle a.current { text-decoration: underline; }

/* ---- Hero (text overlaid on image) ---- */
.hero {
  position: relative;
  max-width: var(--content-width);
  margin: var(--sp-40) auto var(--sp-70);
  padding: 0 var(--sp-50);
}

.hero-image-wrap {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.hero-image-wrap img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

/* Scrim: fades from solid white on the left (behind the text) to
   transparent on the right, so the heading/paragraph stay legible
   no matter what's in that part of the photo. */
.hero-image-wrap::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 65%;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.92) 0%,
    rgba(255,255,255,0.80) 55%,
    rgba(255,255,255,0) 100%
  );
  pointer-events: none;
}

.hero-text-overlay {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 55%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-50) var(--sp-60);
}

.hero-text-overlay h1 {
  font-size: 2em;
  margin-bottom: var(--sp-30);
  text-shadow: 0 1px 12px rgba(255,255,255,0.6);
}

.hero-text-overlay p {
  font-size: 0.95em;
  max-width: 380px;
  text-shadow: 0 1px 8px rgba(255,255,255,0.6);
}

/* ---- 3-column section: text / text / image ---- */
.section { max-width: var(--content-width); margin: 0 auto; padding: var(--sp-70) var(--sp-50); }

.three-col {
  display: flex;
  gap: var(--sp-60);
  flex-wrap: wrap;
  align-items: flex-start;
}

.three-col .text-col { flex: 1 1 260px; }
.three-col .text-col h3 { font-size: 1.1em; }
.three-col .text-col p { font-size: 0.92em; }

.three-col .image-col { flex: 1 1 260px; }
.three-col .image-col img { width: 100%; height: 220px; object-fit: cover; border-radius: 6px; display: block; }

/* ---- Commitment section: image-left / text-right ---- */
.commitment {
  display: flex;
  gap: var(--sp-70);
  flex-wrap: wrap;
  align-items: flex-start;
}

.commitment .image-col { flex: 1 1 340px; }
.commitment .image-col img { width: 100%; height: 460px; object-fit: cover; border-radius: 6px; display: block; }

.commitment .text-col { flex: 1.3 1 380px; }
.commitment .text-col h2 { font-size: 1.6em; }
.commitment .text-col > p:first-of-type { font-size: 0.95em; margin-bottom: var(--sp-50); }
.commitment .subsection { margin-top: var(--sp-40); }
.commitment .subsection h3 { font-size: 1.05em; margin-bottom: var(--sp-20); }
.commitment .subsection p { font-size: 0.92em; }

/* ---- Footer ---- */
.site-footer {
  max-width: var(--content-width);
  margin: var(--sp-70) auto 0;
  padding: var(--sp-50);
  text-align: center;
  border-top: 1px solid var(--base-midtone);
}

.site-footer img { height: 60px; margin-bottom: var(--sp-30); }
.site-footer p { font-size: 0.85em; color: var(--contrast-midtone); }

/* ---- Contact form (unchanged page) ---- */
.phone-line { font-size: 1.1em; margin: var(--sp-50) 0; }

form.contact-form {
  max-width: 500px;
  margin: var(--sp-50) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-30);
}

form.contact-form label { font-weight: 600; color: var(--indigo-dye); }

form.contact-form input, form.contact-form textarea {
  padding: var(--sp-30);
  border: 1px solid var(--carolina-blue);
  font-family: var(--font-body);
  font-size: 1em;
  border-radius: 4px;
}

form.contact-form button {
  background: var(--indigo-dye);
  color: #fff;
  border: none;
  padding: var(--sp-30);
  font-size: 1em;
  border-radius: 4px;
  cursor: pointer;
}

form.contact-form button:hover { background: var(--midnight-green); }

.form-note { text-align: center; padding: var(--sp-30); margin-bottom: var(--sp-30); border-radius: 4px; }
.form-note.success { background: var(--columbia-blue); color: var(--indigo-dye); }
.form-note.error { background: #fdecea; color: #a33; }

@media (max-width: 700px) {
  .site-header { grid-template-columns: 1fr; text-align: center; }
  .header-right { justify-content: center; }
  .hero-image-wrap::before { display: none; }
  .hero-text-overlay {
    position: static;
    width: 100%;
    background: var(--base);
    padding: var(--sp-40) 0 0;
  }
  .hero-text-overlay h1, .hero-text-overlay p { text-shadow: none; }
  .hero-image-wrap img { height: 260px; }
  .commitment .image-col img { height: 280px; }
}