/* ============================================================
   INCANDESENS — Main Stylesheet
   ============================================================ */

/* --- Fonts -------------------------------------------------- */
@font-face {
  font-family: 'Diolce';
  /* Safari needs explicit format strings and weight:400 not 'normal' */
  src: url('fonts/diolce.woff2') format('woff2'),
       url('fonts/diolce.woff')  format('woff'),
       url('fonts/diolce.ttf')   format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
                 U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/satoshi.woff2') format('woff2'),
       url('fonts/satoshi.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/satoshi-bold.woff2') format('woff2'),
       url('fonts/satoshi-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Design Tokens ----------------------------------------- */
:root {
  /* Colors */
  --c-beige:     #f4ede7;
  --c-cream:     #fdfdF9;
  --c-tan:       #ecd5bf;
  --c-teal:      #468a9d;
  --c-teal-dark: #254252;
  --c-brown:     #412e1c;
  --c-brown-mid: #745434;
  --c-gold:      #da9e62;
  --c-ink:       #121115;
  --c-muted:     #26262c;
  --c-white:     #ffffff;

  /* Typography */
  --font-display: 'Diolce', 'Palatino Linotype', 'Palatino', 'Book Antiqua', Georgia, serif;
  --font-body:    'Satoshi', 'Helvetica Neue', sans-serif;

  /* Spacing */
  --gap-xs:  8px;
  --gap-s:   16px;
  --gap-m:   32px;
  --gap-l:   120px;
  --gap-xl:  170px;

  /* Layout */
  --max-w:      1200px;
  --pad-x:      clamp(16px, 4vw, 80px);
  --row-gap:    48px;
  --radius-img: 16px;
  --radius-btn: 100px;
}

/* --- Reset -------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html  { scroll-behavior: smooth; }
body  {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-beige);
  overflow-x: hidden;
}
img   { max-width: 100%; height: auto; display: block; }
a     { text-decoration: none; color: inherit; }

/* --- Page wrapper ------------------------------------------ */
.page           { display: flex; flex-direction: column; min-height: 100vh; }
.page--cream    { background: var(--c-cream); }
.page--tan      { background: var(--c-tan); }
.page--beige    { background: var(--c-beige); }

/* --- Container --------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* --- Header / Nav ------------------------------------------ */
.site-header {
  width: 100%;
  padding: 20px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-logo { display: flex; align-items: center; }
.site-logo img { width: clamp(80px, 10vw, 130px); height: auto; }

.site-nav { display: flex; align-items: center; gap: 40px; }
.site-nav a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--c-ink);
  text-transform: uppercase;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.site-nav a:hover  { color: var(--c-teal); border-color: var(--c-teal); }
.site-nav a.active { color: var(--c-teal); }

/* --- Buttons ----------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity 0.2s, transform 0.15s;
}
.btn:hover              { opacity: 0.85; transform: translateY(-1px); }
.btn--primary           { background: var(--c-teal);     color: var(--c-white); }
.btn--primary-gold      { background: var(--c-gold);     color: var(--c-white); }
.btn--outline-ink       { background: transparent; border-color: var(--c-ink);       color: var(--c-ink); }
.btn--outline-dark      { background: transparent; border-color: var(--c-teal-dark); color: var(--c-teal-dark); }
.btn--outline-brown     { background: transparent; border-color: var(--c-brown);     color: var(--c-brown); }

/* CTA wrapper — always horizontally centered */
.btn-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: var(--gap-xs);
}

/* --- Typography -------------------------------------------- */
.display-title {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.1;
  text-align: center;
}
.section-title {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.15;
  text-align: center;
}
.label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.body-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-muted);
}
.body-bold {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
}

/* Color helpers */
.tc-teal      { color: var(--c-teal); }
.tc-teal-dark { color: var(--c-teal-dark); }
.tc-brown     { color: var(--c-brown); }
.tc-brown-mid { color: var(--c-brown-mid); }
.tc-gold      { color: var(--c-gold); }
.tc-ink       { color: var(--c-ink); }
.tc-muted     { color: var(--c-muted); }

/* --- Section spacing --------------------------------------- */
.section    { padding: var(--gap-l) 0; }
.section--lg{ padding: var(--gap-xl) 0; }

/* --- Hero section ------------------------------------------ */
.hero {
  padding: var(--gap-l) var(--pad-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-xl);
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
}

/* ============================================================
   TWO-COLUMN LAYOUT — strict 50 / 50
   Stays side-by-side until viewport < 600 px
   ============================================================ */
.content-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--row-gap);
  width: 100%;
}
.content-row--reverse { flex-direction: row-reverse; }

/* Both children take exactly 50% minus half the gap */
.content-row__img,
.content-row__text {
  flex: 0 0 calc(50% - var(--row-gap) / 2);
  min-width: 0; /* prevent overflow */
}

/* Image: preserve natural aspect ratio, no cropping */
.content-row__img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-img);
  object-fit: contain;
}

/* Text column: vertical flex stack */
.content-row__text {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
}

/* --- Card strip (3 images row) ----------------------------- */
.card-strip {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 24px;
  width: 100%;
  justify-content: center;
}
.card-strip img {
  flex: 1 1 240px;
  max-width: 360px;
  border-radius: var(--radius-img);
  object-fit: cover;
}

/* --- Highlight box ----------------------------------------- */
.highlight-box {
  background: var(--c-tan);
  border-radius: 20px;
  padding: 30px 36px;
}
.highlight-box--cream { background: var(--c-cream); }

/* --- Centered text block ----------------------------------- */
.centered-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gap-m);
  max-width: 760px;
  margin: 0 auto;
}

/* --- Section band ------------------------------------------ */
.band {
  width: 100%;
  padding: var(--gap-l) var(--pad-x);
}
.band--cream { background: var(--c-cream); }
.band--tan   { background: rgba(218,158,98,0.2); }
.band--light   { background: var(--c-beige); }
.band--deuil   { background: var(--c-teal-dark); }
/* Reduced vertical padding — used only for specific bands */
.band--compact { padding: var(--gap-m) var(--pad-x); }

/* --- 404 --------------------------------------------------- */
.page-404 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-m);
  padding: var(--gap-xl) var(--pad-x);
  text-align: center;
}
.page-404__number {
  font-family: var(--font-display);
  font-size: clamp(80px, 14vw, 160px);
  color: var(--c-brown);
  line-height: 1;
}

/* --- Footer ------------------------------------------------ */
.site-footer {
  width: 100%;
  padding: 40px var(--pad-x);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-top: auto;
}
.footer-brand { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.footer-brand img { width: clamp(80px, 10vw, 120px); }
.footer-brand p   { font-size: 13px; color: var(--c-ink); }
.footer-contact   { display: flex; flex-direction: column; gap: 10px; }
.footer-contact .label { margin-bottom: 4px; }
.footer-contact a,
.footer-contact span { font-size: 15px; color: var(--c-ink); display: block; }
.footer-legal a {
  font-size: 15px;
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-legal a:hover { color: var(--c-teal); }

/* --- Mentions légales ------------------------------------- */
.legal-text { max-width: 700px; line-height: 1.85; font-size: 15px; }
.legal-text h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  color: var(--c-teal);
  margin-top: 28px;
  margin-bottom: 6px;
}
.legal-text p   { color: var(--c-muted); }
.legal-text strong { color: var(--c-gold); }


/* --- Deuil section band ------------------------------------ */
.band--deuil { background: var(--c-teal-dark); }

/* --- Hero CTA group ---------------------------------------- */
.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* --- Topic cards (Les sujets les plus abordés) ------------- */
.topic-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
}

.topic-card {
  background: #939395;
  border-radius: 16px;
  padding: 24px 20px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  transition: box-shadow 0.2s;
}
.topic-card:hover { box-shadow: 0 4px 20px rgba(37,66,82,0.1); }

.topic-card__body { display: flex; flex-direction: column; gap: 12px; }

.topic-card__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.3;
}

.topic-card__text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.88);
}

.topic-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-teal);
  color: var(--c-white);
  transition: background 0.2s, transform 0.15s;
  flex-shrink: 0;
}
.topic-card__cta:hover {
  background: var(--c-teal-dark);
  transform: translateX(2px);
}

/* --- Footer social ----------------------------------------- */
.footer-social {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--c-ink);
  transition: color 0.2s;
}
.social-link:hover { color: var(--c-teal); }

.social-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ============================================================
   MOBILE NAV
   ============================================================ */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--c-ink);
  padding: 4px 0;
}

/* Full-screen overlay */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--c-beige);
  z-index: 200;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px var(--pad-x) 60px;
}
.nav-overlay.open { display: flex; }

.nav-overlay__header {
  position: absolute;
  top: 20px;
  left: 0; right: 0;
  padding: 0 var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-overlay__close {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--c-ink);
}
.nav-overlay__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 0;
}
.nav-overlay__links a {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink);
  padding: 22px 0;
  border-bottom: 1px solid rgba(18,17,21,0.15);
  transition: color 0.2s;
}
.nav-overlay__links a:first-child { border-top: 1px solid rgba(18,17,21,0.15); }
.nav-overlay__links a:hover,
.nav-overlay__links a.active { color: var(--c-teal); }
.nav-overlay__footer {
  position: absolute;
  bottom: 40px;
  font-size: 13px;
  color: var(--c-ink);
}

/* ============================================================
   RESPONSIVE — stacks below 600 px
   ============================================================ */
@media (max-width: 768px) {
  .site-nav   { display: none; }
  .nav-toggle { display: block; }
}

@media (max-width: 600px) {
  /* Stack image + text vertically */
  .content-row,
  .content-row--reverse {
    flex-direction: column;
    gap: var(--gap-m);
  }

  .content-row__img,
  .content-row__text {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  /* Smaller hero gap on phones */
  .hero { gap: 48px; }

  /* Card strip full width */
  .card-strip img { max-width: 100%; }

  /* Footer: centered column */
  .site-footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 28px;
    padding: 48px var(--pad-x) 40px;
  }
  .footer-brand   { align-items: center; }
  .footer-contact { align-items: center; }
  .footer-contact a,
  .footer-contact span { text-align: center; }

  /* Display title slightly smaller */
  .display-title { font-size: clamp(26px, 7.5vw, 36px); }

  /* Topic cards → 1 column on mobile */
  .topic-cards { grid-template-columns: 1fr; }

  /* Hero CTAs stack */
  .hero-ctas { flex-direction: column; align-items: center; }

  /* Footer social centered */
  .footer-social { align-items: center; }
}