/* Start custom CSS *//* ============================================================
   CoEssence — CPT Sagesses — Template page individuelle
   WPCode > CSS Snippet  OU  Elementor > CSS personnalisé
   ============================================================ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --serif  : 'Cormorant Garamond', Georgia, serif;
  --sans   : 'DM Sans', sans-serif;
  --dark   : #1a1408;
  --accent : #b8864e;
  --gold2  : #e8c99a;
  --cream  : #faf6f0;
  --muted  : #6b6459;
}

body {
  font-family : var(--sans);
  font-weight : 300;
  color       : var(--dark);
  background  : #fff;
}

/* ── NAV ── */
.nav {
  position        : fixed;
  top             : 0;
  left            : 0;
  right           : 0;
  z-index         : 100;
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : 20px 64px;
  background      : rgba(255,255,255,.92);
  backdrop-filter : blur(12px);
  border-bottom   : 0.5px solid rgba(26,20,8,.08);
}

.nav-logo {
  font-family     : var(--serif);
  font-size       : 22px;
  font-weight     : 300;
  color           : var(--dark);
  text-decoration : none;
  letter-spacing  : .06em;
}

.nav-logo em { font-style:italic; color:var(--accent); }

.nav-links {
  display : flex;
  gap     : 36px;
}

.nav-links a {
  font-size       : 12px;
  letter-spacing  : .1em;
  text-transform  : uppercase;
  color           : var(--muted);
  text-decoration : none;
  transition      : color .3s;
}

.nav-links a:hover { color:var(--accent); }

/* ── HERO SAGESSE (fond sombre) ── */
.hero {
  background : var(--dark);
  padding    : 160px 64px 100px;
  position   : relative;
  overflow   : hidden;
}

.hero::before {
  content    : '';
  position   : absolute;
  inset      : 0;
  background : radial-gradient(ellipse 60% 70% at 70% 50%, rgba(184,134,78,.08) 0%, transparent 60%);
}

.hero-inner {
  max-width : 1200px;
  margin    : 0 auto;
  display   : grid;
  grid-template-columns : 1fr 1fr;
  gap       : 80px;
  align-items : center;
  position  : relative;
  z-index   : 2;
}

.hero-left {}

.hero-tag {
  display        : inline-flex;
  align-items    : center;
  gap            : 10px;
  font-size      : 10px;
  letter-spacing : .2em;
  text-transform : uppercase;
  color          : var(--accent);
  margin-bottom  : 24px;
}

.hero-tag::before {
  content    : '';
  display    : block;
  width      : 20px;
  height     : .5px;
  background : var(--accent);
}

.hero-origine {
  font-family    : var(--sans);
  font-size      : 11px;
  letter-spacing : .18em;
  text-transform : uppercase;
  color          : rgba(232,201,154,.45);
  margin-bottom  : 16px;
}

.hero-titre {
  font-family    : var(--serif);
  font-size      : clamp(64px, 7vw, 100px);
  font-weight    : 200;
  color          : #fff;
  line-height    : .9;
  letter-spacing : -.02em;
  margin-bottom  : 28px;
}

.hero-titre em {
  font-style : italic;
  color      : var(--gold2);
  display    : block;
}

.hero-def {
  font-family : var(--serif);
  font-size   : 20px;
  font-style  : italic;
  color       : var(--gold2);
  line-height : 1.5;
  margin-bottom : 24px;
  padding-left  : 20px;
  border-left   : 2px solid rgba(184,134,78,.4);
}

.hero-intro {
  font-size   : 15px;
  color       : rgba(255,255,255,.65);
  line-height : 1.8;
}

.hero-right {
  position      : relative;
  height        : 520px;
  border-radius : 6px;
  overflow      : hidden;
}

.hero-right img {
  width      : 100%;
  height     : 100%;
  object-fit : cover;
  filter     : saturate(.7) brightness(.8);
}

.hero-badge {
  position        : absolute;
  bottom          : 28px;
  left            : 28px;
  background      : rgba(26,20,8,.8);
  backdrop-filter : blur(10px);
  border          : 0.5px solid rgba(184,134,78,.3);
  border-radius   : 4px;
  padding         : 14px 20px;
}

.hero-badge-num {
  font-family : var(--serif);
  font-size   : 40px;
  font-weight : 200;
  color       : var(--gold2);
  line-height : 1;
}

.hero-badge-lbl {
  font-size      : 9px;
  letter-spacing : .16em;
  text-transform : uppercase;
  color          : rgba(255,255,255,.35);
  margin-top     : 4px;
}

/* ── SECTION : ESSENCE (fond blanc) ── */
.sec-white {
  background : #fff;
  padding    : 100px 64px;
}

.sec-white-inner {
  max-width : 1200px;
  margin    : 0 auto;
}

.sec-label {
  font-size      : 10px;
  letter-spacing : .22em;
  text-transform : uppercase;
  color          : var(--accent);
  margin-bottom  : 16px;
  display        : flex;
  align-items    : center;
  gap            : 12px;
}

.sec-label::before {
  content    : '';
  display    : block;
  width      : 22px;
  height     : .5px;
  background : var(--accent);
}

.sec-titre {
  font-family   : var(--serif);
  font-size     : clamp(36px, 4vw, 52px);
  font-weight   : 200;
  color         : var(--dark);
  margin-bottom : 48px;
  line-height   : 1.1;
}

.pilliers {
  display               : grid;
  grid-template-columns : repeat(3, 1fr);
  gap                   : 32px;
}

.pillier {
  border-top  : 2px solid var(--accent);
  padding-top : 24px;
}

.pillier-num {
  font-family   : var(--serif);
  font-size     : 40px;
  font-weight   : 200;
  color         : rgba(184,134,78,.25);
  margin-bottom : 12px;
}

.pillier h3 {
  font-family   : var(--serif);
  font-size     : 22px;
  font-weight   : 300;
  color         : var(--dark);
  margin-bottom : 12px;
}

.pillier p {
  font-size   : 14px;
  color       : var(--muted);
  line-height : 1.8;
}

/* ── SECTION : LEADERSHIP (fond sombre) ── */
.sec-dark {
  background : var(--dark);
  padding    : 100px 64px;
}

.sec-dark-inner {
  max-width : 1200px;
  margin    : 0 auto;
  display   : grid;
  grid-template-columns : 1fr 1fr;
  gap       : 80px;
  align-items : center;
}

.sec-dark .sec-label { color:var(--accent); }
.sec-dark .sec-label::before { background:var(--accent); }

.sec-dark .sec-titre {
  color : #fff;
}

.sec-dark p {
  font-size   : 15px;
  color       : rgba(255,255,255,.6);
  line-height : 1.85;
  margin-bottom : 20px;
}

.sec-dark-visual {
  position      : relative;
  height        : 480px;
  border-radius : 6px;
  overflow      : hidden;
  background    : rgba(255,255,255,.03);
  border        : 0.5px solid rgba(255,255,255,.07);
  display       : flex;
  align-items   : center;
  justify-content : center;
}

.sec-dark-visual img {
  width      : 100%;
  height     : 100%;
  object-fit : cover;
  opacity    : .7;
}

.citation-float {
  position        : absolute;
  bottom          : 28px;
  left            : 28px;
  right           : 28px;
  background      : rgba(26,20,8,.85);
  backdrop-filter : blur(10px);
  border-left     : 2px solid var(--accent);
  padding         : 20px 24px;
  border-radius   : 0 4px 4px 0;
}

.citation-float p {
  font-family : var(--serif);
  font-size   : 17px;
  font-style  : italic;
  color       : #fff !important;
  margin      : 0 0 8px !important;
  line-height : 1.5 !important;
}

.citation-float span {
  font-size      : 10px;
  letter-spacing : .12em;
  text-transform : uppercase;
  color          : rgba(255,255,255,.4);
}

/* ── SECTION : EN PRATIQUE (fond crème) ── */
.sec-cream {
  background : var(--cream);
  padding    : 100px 64px;
}

.sec-cream-inner {
  max-width : 1200px;
  margin    : 0 auto;
}

.pratiques {
  display               : grid;
  grid-template-columns : repeat(2, 1fr);
  gap                   : 28px;
  margin-top            : 48px;
}

.pratique {
  background    : #fff;
  border-radius : 6px;
  padding       : 32px;
  border        : 0.5px solid rgba(26,20,8,.06);
  display       : flex;
  gap           : 20px;
  align-items   : flex-start;
}

.pratique-icon {
  width           : 40px;
  height          : 40px;
  background      : rgba(184,134,78,.1);
  border-radius   : 50%;
  display         : flex;
  align-items     : center;
  justify-content : center;
  flex-shrink     : 0;
  font-family     : var(--serif);
  font-size       : 18px;
  color           : var(--accent);
}

.pratique h3 {
  font-family   : var(--serif);
  font-size     : 20px;
  font-weight   : 300;
  color         : var(--dark);
  margin-bottom : 8px;
}

.pratique p {
  font-size   : 14px;
  color       : var(--muted);
  line-height : 1.75;
}

/* ── SECTION : AUTRES SAGESSES (fond sombre) ── */
.sec-autres {
  background : var(--dark);
  padding    : 100px 64px;
}

.sec-autres-inner {
  max-width : 1200px;
  margin    : 0 auto;
}

.sagesses-grid {
  display               : grid;
  grid-template-columns : repeat(4, 1fr);
  gap                   : 20px;
  margin-top            : 48px;
}

.sagesse-card {
  background      : rgba(255,255,255,.03);
  border          : 0.5px solid rgba(255,255,255,.07);
  border-radius   : 6px;
  padding         : 28px 24px;
  text-decoration : none;
  transition      : border-color .3s, background .3s;
  display         : block;
}

.sagesse-card:hover {
  border-color : rgba(184,134,78,.3);
  background   : rgba(255,255,255,.05);
}

.sagesse-card-origine {
  font-size      : 9px;
  letter-spacing : .18em;
  text-transform : uppercase;
  color          : var(--accent);
  margin-bottom  : 10px;
  display        : block;
}

.sagesse-card-nom {
  font-family : var(--serif);
  font-size   : 24px;
  font-weight : 200;
  color       : #fff;
  margin-bottom : 10px;
}

.sagesse-card-desc {
  font-size   : 13px;
  color       : rgba(255,255,255,.45);
  line-height : 1.65;
}

/* ── CTA SECTION (fond blanc) ── */
.sec-cta {
  background : #fff;
  padding    : 100px 64px;
  text-align : center;
  border-top : 0.5px solid rgba(26,20,8,.06);
}

.sec-cta h2 {
  font-family   : var(--serif);
  font-size     : clamp(36px, 4vw, 52px);
  font-weight   : 200;
  color         : var(--dark);
  margin-bottom : 20px;
}

.sec-cta p {
  font-size     : 16px;
  color         : var(--muted);
  line-height   : 1.75;
  max-width     : 560px;
  margin        : 0 auto 40px;
}

.btn-dark {
  display         : inline-flex;
  align-items     : center;
  gap             : 10px;
  background      : var(--dark);
  color           : #fff;
  text-decoration : none;
  padding         : 14px 36px;
  border-radius   : 3px;
  font-size       : 12px;
  letter-spacing  : .14em;
  text-transform  : uppercase;
  font-weight     : 500;
  transition      : background .3s;
}

.btn-dark:hover { background:#2a2010; }

/* ── FOOTER ── */
.footer {
  background : #0a0704;
  padding    : 40px 64px;
  display    : flex;
  justify-content : space-between;
  align-items     : center;
}

.footer-logo {
  font-family : var(--serif);
  font-size   : 20px;
  color       : rgba(255,255,255,.4);
}

.footer-logo em { font-style:italic; color:rgba(232,201,154,.4); }

.footer-copy {
  font-size : 11px;
  color     : rgba(255,255,255,.2);
}

/* ── RESPONSIVE ── */

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

/* ── TABLET (769px → 1024px) ── */

@media (min-width: 769px) and (max-width: 1024px) {

  .nav         { padding : 18px 36px; }

  .hero        { padding : 140px 36px 80px; }
  .hero-inner  {
    grid-template-columns : 1fr 1fr;
    gap                   : 48px;
  }
  .hero-titre  { font-size : clamp(52px, 7vw, 80px); }
  .hero-right  { height : 400px; }

  .sec-white,
  .sec-cream,
  .sec-cta     { padding : 80px 36px; }

  .sec-dark,
  .sec-autres  { padding : 80px 36px; }

  .sec-white-inner,
  .sec-cream-inner,
  .sec-autres-inner { padding : 0; }

  .sec-dark-inner  {
    grid-template-columns : 1fr 1fr;
    gap                   : 48px;
    padding               : 0;
  }

  .pilliers        { grid-template-columns : repeat(3, 1fr); }
  .pratiques       { grid-template-columns : repeat(2, 1fr); }
  .sagesses-grid   { grid-template-columns : repeat(3, 1fr); }

  .footer          { padding : 32px 36px; }
}


/* ── MOBILE (≤ 768px) ── */

@media (max-width: 768px) {

  /* Nav */
  .nav {
    padding         : 14px 24px;
    justify-content : center;
  }
  .nav-links { display : none; }

  /* Hero */
  .hero {
    padding : 100px 24px 60px;
  }
  .hero-inner {
    grid-template-columns : 1fr;
    gap                   : 36px;
  }
  .hero-titre {
    font-size : clamp(44px, 11vw, 64px);
  }
  .hero-def {
    font-size : 16px;
  }
  .hero-intro {
    font-size : 14px;
  }
  .hero-right {
    height : 280px;
    order  : -1;
  }
  .hero-badge {
    bottom : 16px;
    left   : 16px;
  }

  /* Sections communes */
  .sec-white,
  .sec-cream,
  .sec-cta {
    padding : 64px 24px;
  }
  .sec-dark,
  .sec-autres {
    padding : 64px 24px;
  }
  .sec-white-inner,
  .sec-cream-inner,
  .sec-autres-inner {
    padding : 0;
  }

  /* Titres de section */
  .sec-titre {
    font-size     : clamp(28px, 7vw, 40px);
    margin-bottom : 32px;
  }

  /* Piliers — 1 colonne */
  .pilliers {
    grid-template-columns : 1fr;
    gap                   : 24px;
  }
  .pillier-num { font-size : 32px; }

  /* Leadership — 1 colonne */
  .sec-dark-inner {
    grid-template-columns : 1fr;
    gap                   : 40px;
    padding               : 0;
  }
  .sec-dark p { font-size : 14px; }
  .sec-dark-visual {
    height : 280px;
    order  : -1;
  }
  .citation-float {
    bottom : 12px;
    left   : 12px;
    right  : 12px;
    padding : 14px 16px;
  }
  .citation-float p { font-size : 14px !important; }

  /* Pratiques — 1 colonne */
  .pratiques {
    grid-template-columns : 1fr;
    gap                   : 16px;
    margin-top            : 32px;
  }
  .pratique       { padding : 24px 20px; }
  .pratique h3    { font-size : 18px; }
  .pratique p     { font-size : 13px; }

  /* Autres sagesses — 2 colonnes */
  .sagesses-grid {
    grid-template-columns : repeat(2, 1fr);
    gap                   : 12px;
    margin-top            : 32px;
  }
  .sagesse-card        { padding : 20px 16px; }
  .sagesse-card-nom    { font-size : 18px; }
  .sagesse-card-desc   { font-size : 12px; }

  /* CTA */
  .sec-cta h2  { font-size : clamp(28px, 7vw, 40px); }
  .sec-cta p   { font-size : 14px; }

  /* Footer */
  .footer {
    padding        : 28px 24px;
    flex-direction : column;
    gap            : 10px;
    text-align     : center;
  }
}


/* ── PETIT MOBILE (≤ 380px) ── */

@media (max-width: 380px) {

  .hero-titre       { font-size : 38px; }
  .sagesses-grid    { grid-template-columns : 1fr; }
  .hero-right       { height : 220px; }
  .sec-dark-visual  { height : 220px; }
}/* End custom CSS */