/* ============================================================
   MARKET[SELL]ING™ — RÉFLEXIONS / INSIGHTS
   Gabarit éditorial commun FR + EN
   ============================================================ */


/* ============================================================
   1. HERO
   ============================================================ */

.reflection-hero{
  position:relative;
  overflow:hidden;

  padding:110px 0 92px;

  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(240,84,69,.14) 0%,
      rgba(242,140,40,.07) 28%,
      transparent 52%
    ),
    #FCF8F1;
}

.reflection-hero::after{
  content:"";

  position:absolute;

  width:520px;
  height:520px;

  right:-310px;
  bottom:-360px;

  border-radius:50%;

  border:1px solid rgba(240,84,69,.18);

  pointer-events:none;
}

.reflection-hero-inner{
  position:relative;
  z-index:1;

  max-width:1180px;

  margin:0 auto;
  padding:0 28px;
}

.reflection-kicker{
  margin:0 0 26px;

  color:#F05445;

  font-family:
    "Avenir Next",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;

  font-size:.72rem;
  font-weight:800;

  letter-spacing:.13em;
  text-transform:uppercase;
}

.reflection-hero h1{
  max-width:920px;

  margin:0;

  color:#181817;

  font-family:
    "Avenir Next",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;

  font-size:clamp(3.2rem,6vw,5.8rem);
  font-weight:700;

  line-height:.97;
  letter-spacing:-.055em;
}

.reflection-lead{
  max-width:820px;

  margin:42px 0 0;

  color:#4E4943;

  font-family:
    "Iowan Old Style",
    Baskerville,
    Georgia,
    "Times New Roman",
    serif;

  font-size:clamp(1.3rem,2vw,1.72rem);
  line-height:1.55;
}


/* ============================================================
   2. ARTICLE
   ============================================================ */

.reflection-body{
  background:#FFFDF8;
}

.reflection-content{
  max-width:790px;

  margin:0 auto;
  padding:96px 28px 112px;
}

.reflection-content p{
  margin:0 0 1.65em;

  color:#302E2A;

  font-family:
    "Iowan Old Style",
    Baskerville,
    Georgia,
    "Times New Roman",
    serif;

  font-size:1.18rem;
  line-height:1.82;
}

.reflection-content h2{
  margin:3.15em 0 1em;

  color:#181817;

  font-family:
    "Avenir Next",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;

  font-size:clamp(1.8rem,3vw,2.5rem);
  font-weight:700;

  line-height:1.08;
  letter-spacing:-.04em;
}

.reflection-content strong{
  color:#181817;
  font-weight:700;
}


/* ============================================================
   3. LETTRINE
   ============================================================ */

.reflection-content > p:first-of-type::first-letter{
  float:left;

  margin:.08em .12em 0 0;

  color:#F05445;

  font-family:
    "Avenir Next",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;

  font-size:4.3rem;
  font-weight:800;
  line-height:.78;
}


/* ============================================================
   4. CITATIONS / RESPIRATIONS
   ============================================================ */

.reflection-quote{
  position:relative;

  width:calc(100% + 160px);

  margin:66px -80px;
  padding:44px 52px;

  background:
    linear-gradient(
      145deg,
      #171817 0%,
      #24231F 100%
    );

  border-left:5px solid #F05445;

  box-shadow:
    0 22px 50px rgba(24,24,23,.10);
}

.reflection-quote p{
  margin:0;

  color:#FCF8F1;

  font-family:
    "Iowan Old Style",
    Baskerville,
    Georgia,
    "Times New Roman",
    serif;

  font-size:clamp(1.45rem,2.6vw,2rem);
  line-height:1.45;
}

.reflection-quote.accent{
  border-left:0;

  background:
    linear-gradient(
      115deg,
      #F05445 0%,
      #E45B38 58%,
      #F28C28 135%
    );
}

.reflection-quote.accent p{
  color:#fff;
}


/* ============================================================
   5. LIENS ÉDITORIAUX
   ============================================================ */

.reflection-content a{
  color:#B93830;

  text-decoration-color:rgba(240,84,69,.55);
  text-decoration-thickness:1px;
  text-underline-offset:4px;

  transition:color .2s ease;
}

.reflection-content a:hover{
  color:#F05445;
}


/* ============================================================
   6. FIN D'ARTICLE
   ============================================================ */

.reflection-next{
  position:relative;
  overflow:hidden;

  padding:94px 28px;

  background:
    linear-gradient(
      145deg,
      #181918 0%,
      #22221F 100%
    );

  color:#FCF8F1;
}

.reflection-next::after{
  content:"";

  position:absolute;

  width:480px;
  height:480px;

  right:-220px;
  bottom:-300px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(240,84,69,.18),
      rgba(242,140,40,.07) 42%,
      transparent 68%
    );

  pointer-events:none;
}

.reflection-next-inner{
  position:relative;
  z-index:1;

  max-width:900px;

  margin:0 auto;
}

.reflection-next .eyebrow{
  margin:0 0 18px;

  color:#F28C28;
}

.reflection-next h2{
  max-width:720px;

  margin:0 0 24px;

  color:#fff;

  font-size:clamp(2.2rem,4vw,3.8rem);
  line-height:1;
  letter-spacing:-.045em;
}

.reflection-next p{
  max-width:690px;

  margin:0;

  color:#CFC8BE;

  font-family:
    "Iowan Old Style",
    Baskerville,
    Georgia,
    "Times New Roman",
    serif;

  font-size:1.16rem;
  line-height:1.72;
}

.reflection-next-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;

  gap:22px;

  margin-top:36px;
}

.reflection-secondary-link{
  color:#FCF8F1;

  font-size:.78rem;
  font-weight:800;

  letter-spacing:.03em;
  text-decoration:none;

  transition:color .2s ease;
}

.reflection-secondary-link:hover{
  color:#FF7568;
}


/* ============================================================
   7. RETOUR AUX RÉFLEXIONS
   ============================================================ */

.reflection-back{
  display:inline-flex;
  align-items:center;

  gap:8px;

  margin-bottom:42px;

  color:#6A645C;

  font-family:
    "Avenir Next",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;

  font-size:.75rem;
  font-weight:700;

  text-decoration:none;

  transition:color .2s ease;
}

.reflection-back:hover{
  color:#F05445;
}


/* ============================================================
   8. MOBILE
   ============================================================ */

@media(max-width:760px){

  .reflection-hero{
    padding:76px 0 64px;
  }

  .reflection-hero-inner{
    padding:0 20px;
  }

  .reflection-hero h1{
    font-size:clamp(2.65rem,12vw,4.1rem);
  }

  .reflection-lead{
    margin-top:32px;

    font-size:1.23rem;
  }

  .reflection-content{
    padding:66px 20px 82px;
  }

  .reflection-content p{
    font-size:1.08rem;
    line-height:1.76;
  }

  .reflection-content h2{
    margin-top:2.65em;
  }

  .reflection-content > p:first-of-type::first-letter{
    font-size:3.7rem;
  }

  .reflection-quote{
    width:auto;

    margin:50px -20px;
    padding:34px 24px;
  }

  .reflection-quote p{
    font-size:1.35rem;
  }

  .reflection-next{
    padding:72px 20px;
  }

  .reflection-next-links{
    align-items:stretch;
    flex-direction:column;
  }

  .reflection-next-links .cta{
    width:100%;
  }

}


/* ============================================================
   9. ACCESSIBILITÉ
   ============================================================ */

@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    transition:none !important;
    animation:none !important;
  }

}