/* ============================================
   CONFIDENTIALITÉ — section homepage + page dédiée
   ============================================ */

/* Section homepage (band) */
.confid-band {
  padding: clamp(80px, 10vw, 120px) 0;
  background: #f6f3ee; /* beige très clair, légèrement plus chaud que page */
  border-top: 1px solid var(--line, rgba(20,40,70,0.08));
  border-bottom: 1px solid var(--line, rgba(20,40,70,0.08));
}
.confid-band__head {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}
.confid-band__head .eyebrow {
  margin-bottom: 18px;
}
.confid-band__head h2 {
  font-size: clamp(32px, 3.5vw, 42px);
  margin-bottom: 20px;
  text-wrap: balance;
}
.confid-band__head p {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  color: var(--navy-70, rgba(20,40,70,0.7));
  text-wrap: pretty;
}

.confid-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 920px;
  margin: 0 auto;
}
.confid-card {
  background: #fff;
  border: 0.5px solid var(--line, rgba(20,40,70,0.12));
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.confid-card__icon {
  color: var(--teal, #1d9e75);
  margin-bottom: 4px;
}
.confid-card__title {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--navy, #142846);
  letter-spacing: 0.02em;
}
.confid-card__text {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--navy-70, rgba(20,40,70,0.72));
  margin: 0;
}

.confid-band__more {
  display: block;
  text-align: center;
  margin-top: 40px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--teal, #1d9e75);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.confid-band__more:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .confid-grid { grid-template-columns: 1fr; }
}

/* ============================================
   ENCART Services — secret professionnel
   ============================================ */
.svc-secretpro {
  margin: clamp(60px, 8vw, 100px) 0;
  background: #faf8f4;
  border-left: 4px solid var(--teal, #1d9e75);
  padding: clamp(36px, 5vw, 56px) clamp(32px, 5vw, 64px);
}
.svc-secretpro .eyebrow { margin-bottom: 16px; }
.svc-secretpro h3 {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 400;
  color: var(--navy, #142846);
  margin-bottom: 24px;
  text-wrap: balance;
}
.svc-secretpro__text {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--navy-70, rgba(20,40,70,0.78));
  max-width: 780px;
  margin-bottom: 28px;
}
.svc-secretpro__list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.svc-secretpro__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--navy, #142846);
}
.svc-secretpro__list svg {
  flex-shrink: 0;
  color: var(--teal, #1d9e75);
  margin-top: 2px;
}
.svc-secretpro__more {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--teal, #1d9e75);
  text-decoration: none;
}
.svc-secretpro__more:hover { text-decoration: underline; }

/* ============================================
   À PROPOS — Mes engagements (refonte)
   ============================================ */
.engage {
  padding: clamp(80px, 10vw, 120px) 0;
}
.engage__head {
  max-width: 680px;
  margin-bottom: 56px;
}
.engage__head h2 {
  font-family: var(--serif);
  font-size: clamp(32px, 3.5vw, 44px);
  font-weight: 400;
  margin-bottom: 14px;
  color: var(--navy, #142846);
}
.engage__head p {
  font-family: var(--sans);
  font-size: 18px;
  color: var(--navy-70, rgba(20,40,70,0.7));
}
.engage__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 880px;
}
.engage__item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-top: 1px solid var(--line, rgba(20,40,70,0.1));
  align-items: start;
}
.engage__item:last-child {
  border-bottom: 1px solid var(--line, rgba(20,40,70,0.1));
}
.engage__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  color: var(--teal, #1d9e75);
  font-weight: 400;
  letter-spacing: 0.02em;
  padding-top: 4px;
}
.engage__body h4 {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  color: var(--navy, #142846);
  margin-bottom: 10px;
}
.engage__body p {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--navy-70, rgba(20,40,70,0.72));
}
.engage__note {
  margin-top: 36px;
  font-family: var(--sans);
  font-style: italic;
  font-size: 15px;
  line-height: 1.7;
  color: var(--navy-70, rgba(20,40,70,0.65));
  max-width: 720px;
  text-wrap: pretty;
}

@media (max-width: 720px) {
  .engage__item { grid-template-columns: 1fr; gap: 8px; }
  .engage__num { font-size: 22px; padding-top: 0; }
}

/* ============================================
   PAGE CONFIDENTIALITÉ
   ============================================ */
.cf-hero {
  padding: clamp(120px, 14vw, 180px) 0 clamp(60px, 8vw, 90px);
  border-bottom: 1px solid var(--line, rgba(20,40,70,0.08));
}
.cf-hero .eyebrow { margin-bottom: 24px; }
.cf-hero h1 {
  font-family: var(--serif);
  font-size: clamp(44px, 6vw, 72px);
  font-weight: 400;
  line-height: 1.05;
  color: var(--navy, #142846);
  margin-bottom: 28px;
  max-width: 880px;
  text-wrap: balance;
}
.cf-hero__sub {
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.6;
  color: var(--navy-70, rgba(20,40,70,0.72));
  max-width: 660px;
}

.cf-section {
  padding: clamp(60px, 8vw, 100px) 0;
  border-bottom: 1px solid var(--line, rgba(20,40,70,0.08));
}
.cf-section h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 400;
  color: var(--navy, #142846);
  margin-bottom: 40px;
  max-width: 700px;
  text-wrap: balance;
}
.cf-section__intro {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  color: var(--navy-70, rgba(20,40,70,0.78));
  max-width: 760px;
  margin-bottom: 0;
}

.cf-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  margin-top: 12px;
}
.cf-block h3 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--navy, #142846);
  margin-bottom: 14px;
  letter-spacing: 0.01em;
  border-top: 2px solid var(--teal, #1d9e75);
  padding-top: 16px;
  width: 32px;
}
.cf-block h3 span {
  display: block;
  width: max-content;
  white-space: nowrap;
}
.cf-block p {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--navy-70, rgba(20,40,70,0.72));
}

@media (max-width: 900px) {
  .cf-blocks { grid-template-columns: 1fr; gap: 28px; }
}

/* Tableau professions */
.cf-prof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 12px;
}
.cf-prof__col {
  background: #faf8f4;
  padding: 28px 24px;
  border-top: 2px solid var(--teal, #1d9e75);
}
.cf-prof__col h4 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--navy, #142846);
  margin-bottom: 16px;
}
.cf-prof__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cf-prof__col li {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--navy-70, rgba(20,40,70,0.78));
  padding-left: 14px;
  position: relative;
}
.cf-prof__col li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--teal, #1d9e75);
}

@media (max-width: 1000px) {
  .cf-prof { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .cf-prof { grid-template-columns: 1fr; }
}

/* Engagement contractuel */
.cf-contract {
  background: #f3f1ec;
  border: 1px solid var(--line, rgba(20,40,70,0.1));
  padding: clamp(40px, 5vw, 60px);
  margin-top: 12px;
  max-width: 880px;
}
.cf-contract h3 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  color: var(--navy, #142846);
  margin-bottom: 18px;
}
.cf-contract p {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--navy-70, rgba(20,40,70,0.78));
}

/* CTA final */
.cf-cta {
  padding: clamp(80px, 10vw, 120px) 0;
  text-align: center;
}
.cf-cta p {
  font-family: var(--serif);
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 400;
  font-style: italic;
  color: var(--navy, #142846);
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.45;
  text-wrap: balance;
}
.cf-cta a {
  color: var(--teal, #1d9e75);
  text-decoration: none;
  font-style: normal;
}
.cf-cta a:hover { text-decoration: underline; }