/* ============================================================
   CCA — Site multipage · shell partagé + pages intérieures
   Étend styles.css (tokens, nav, footer, boutons, .cta, .reveal)
   ============================================================ */

/* ============ MÉGA-MENU (desktop) ============ */

/* ============ PACKS — tableau comparatif (row-based, classe dédiée pour éviter collision avec .ptable de l'accueil) ============ */
.cmp-table {
  display: block; background: transparent; border: 1px solid var(--dline);
  margin-top: clamp(36px,6vh,56px); overflow: hidden;
}
.cmp-table .pt-row { display: grid; grid-template-columns: minmax(150px,1.6fr) repeat(3,1fr); background: var(--dline); gap: 1px; }
.cmp-table .pt-feat, .cmp-table .pt-col { background: var(--noir); padding: 16px 18px; display: flex; align-items: center; font-family: var(--dm); font-weight: 300; font-size: 14px; color: var(--paper); }
.cmp-table .pt-feat { font-weight: 400; color: #B8B4AC; }
.cmp-table .pt-col.feat { background: #161616; }
.cmp-table .pt-no { color: #4A4640; }
.cmp-table .pt-row.pt-head .pt-feat { background: var(--noir); }
.cmp-table .pt-row.pt-head .pt-col { flex-direction: column; align-items: flex-start; gap: 5px; padding: 24px 18px; }
.cmp-table .pt-row.pt-head .pt-col.feat { border-top: 2px solid var(--orange); }
.cmp-table .pt-name { font-family: var(--syne); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; color: var(--paper); }
.cmp-table .pt-row.pt-head .pt-col.feat .pt-name { color: var(--orange); }
.cmp-table .pt-price { font-family: var(--dm); font-weight: 300; font-size: 12px; color: #6A6A6A; }
.cmp-table .pt-row.pt-cta .pt-col { padding: 20px 18px; }
.cmp-table .pt-btn { font-family: var(--syne); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; padding: 12px 18px; border: 1px solid #2E2E2E; color: var(--paper); width: 100%; text-align: center; transition: all .25s; cursor: none; }
.cmp-table .pt-btn:hover { border-color: var(--orange); }
.cmp-table .pt-btn.primary { background: var(--orange); border-color: var(--orange); color: #fff; }
.cmp-table .pt-btn.primary:hover { background: var(--orange-d); }
@media (max-width: 760px) {
  .cmp-table { overflow-x: auto; }
  .cmp-table .pt-row { grid-template-columns: minmax(120px,1.2fr) repeat(3,minmax(96px,1fr)); min-width: 540px; }
  .cmp-table .pt-feat, .cmp-table .pt-col { font-size: 12.5px; padding: 13px 12px; }
}

/* ============ MÉGA-MENU (desktop) ============ */
.nav-links .has-mega { position: relative; display: flex; align-items: center; }
.mega-trigger {
  font-family: var(--dm); font-weight: 400; font-size: 13px; color: var(--warm);
  background: none; border: 0; cursor: none; display: inline-flex; align-items: center; gap: 5px;
  transition: color .2s; padding: 0; font-family: inherit;
}
.mega-trigger i { font-style: normal; font-size: 9px; transition: transform .25s var(--ease); color: var(--faint); }
.has-mega:hover .mega-trigger, .has-mega.open .mega-trigger { color: var(--ink); }
.has-mega:hover .mega-trigger i, .has-mega.open .mega-trigger i { transform: rotate(180deg); color: var(--orange); }

.mega-panel {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--paper); border: 1px solid var(--hair);
  box-shadow: 0 24px 60px -24px rgba(10,10,10,0.22);
  padding: 14px; border-radius: 6px; min-width: 460px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .26s var(--ease), transform .26s var(--ease), visibility 0s linear .26s;
  z-index: 820;
}
.has-mega:hover .mega-panel, .has-mega.open .mega-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0); transition-delay: 0s;
}
/* hover bridge so the gap doesn't close it */
.has-mega::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 16px; }
.mega-panel.wide { min-width: 560px; }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.mega-item {
  display: flex; flex-direction: column; gap: 3px; padding: 13px 15px; border-radius: 4px;
  transition: background .18s; cursor: none;
}
.mega-item:hover { background: #EFEBE3; }
.mega-item .mi-idx { font-family: var(--dm); font-weight: 500; font-size: 9px; letter-spacing: 0.18em; color: var(--blue); }
.mega-item .mi-title { font-family: var(--syne); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); }
.mega-item .mi-desc { font-family: var(--dm); font-weight: 300; font-size: 12px; color: var(--warm); line-height: 1.45; }
.mega-foot {
  grid-column: 1 / -1; margin-top: 6px; padding: 13px 15px; border-top: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: space-between;
}
.mega-foot span { font-family: var(--dm); font-weight: 300; font-size: 12px; color: var(--warm); }
.mega-foot a { font-family: var(--syne); font-weight: 700; font-size: 12px; color: var(--orange); }

.nav-links a.is-active, .has-mega.is-active .mega-trigger { color: var(--ink); }
.nav-links a.is-active { position: relative; }
.nav-links a.is-active::after,
.has-mega.is-active .mega-trigger::after {
  content: ""; position: absolute; left: 0; right: 14px; bottom: -20px; height: 2px; background: var(--blue);
}
.has-mega.is-active .mega-trigger { position: relative; }
.has-mega.is-active .mega-trigger::after { right: 14px; bottom: -20px; }

/* ============ MOBILE accordéon ============ */
.m-group { width: 100%; }
.m-grouphead {
  width: 100%; background: none; border: 0; cursor: none; text-align: left;
  font-family: var(--syne); font-weight: 800; font-size: clamp(30px,9vw,48px);
  letter-spacing: -0.03em; color: var(--ink); display: flex; align-items: baseline; gap: 14px;
}
.m-grouphead span { font-family: var(--dm); font-weight: 500; font-size: 12px; color: var(--blue); letter-spacing: .1em; }
.m-grouphead i { font-style: normal; margin-left: auto; font-size: 26px; color: var(--orange); transition: transform .3s var(--ease); }
.m-group.open .m-grouphead i { transform: rotate(45deg); }
.m-sub { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); padding-left: 30px; }
.m-sub a {
  font-family: var(--dm) !important; font-weight: 400 !important; font-size: 16px !important;
  letter-spacing: 0 !important; color: var(--warm) !important; padding: 7px 0; display: block;
}

/* ============ PAGE HERO (intérieur) ============ */
.page-hero {
  padding: clamp(96px, 14vh, 132px) var(--pad) clamp(40px, 7vh, 64px);
  border-bottom: 1px solid var(--hair); background: var(--paper);
}
.page-hero.dark { background: var(--noir); color: var(--paper); border-bottom-color: var(--dline); }
.ph-wrap { max-width: 1100px; margin: 0 auto; }
.crumb { font-family: var(--dm); font-weight: 400; font-size: 12px; color: var(--faint); margin-bottom: 26px; display: flex; gap: 8px; flex-wrap: wrap; }
.crumb a { color: var(--warm); transition: color .2s; }
.crumb a:hover { color: var(--orange); }
.crumb .sep { color: var(--faint2); }
.page-hero.dark .crumb { color: #5A5A5A; }
.page-hero.dark .crumb a { color: #8A8A8A; }
.ph-eyebrow { display: block; font-family: var(--dm); font-weight: 500; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--blue); margin-bottom: 22px; }
.page-hero h1 { font-family: var(--syne); font-weight: 800; font-size: clamp(40px, 6.5vw, 84px); line-height: 0.94; letter-spacing: -0.035em; color: var(--ink); max-width: 16ch; }
.page-hero.dark h1 { color: var(--paper); }
.ph-sub { font-family: var(--dm); font-weight: 300; font-size: clamp(15px,1.6vw,18px); color: var(--warm); line-height: 1.75; margin-top: 24px; max-width: 52ch; text-wrap: pretty; }
.page-hero.dark .ph-sub { color: #9A9A92; }
.ph-ctas { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.btn-wa {
  display: inline-flex; align-items: center; gap: 9px; font-family: var(--syne); font-weight: 700; font-size: 13px;
  background: #25D366; color: #07331A; padding: 13px 22px; border-radius: 3px; cursor: none;
  transition: transform .25s var(--ease), filter .25s;
}
.btn-wa:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn-wa svg { width: 16px; height: 16px; }

/* ph quick stats */
.ph-stats { display: flex; gap: clamp(28px,4vw,56px); margin-top: 48px; flex-wrap: wrap; padding-top: 30px; border-top: 1px solid var(--hair); }
.page-hero.dark .ph-stats { border-top-color: var(--dline); }
.ph-stat .n { font-family: var(--syne); font-weight: 800; font-size: clamp(30px,4vw,44px); letter-spacing: -0.03em; color: var(--orange); line-height: 1; }
.ph-stat .n.blue { color: var(--blue); }
.ph-stat .l { font-family: var(--dm); font-weight: 300; font-size: 12px; color: var(--warm); margin-top: 8px; letter-spacing: 0.04em; }

/* ============ LEAD band ============ */
.lead { padding: clamp(56px,9vh,104px) var(--pad); border-bottom: 1px solid var(--hair); }
.lead-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.4fr; gap: clamp(32px,5vw,72px); align-items: start; }
.lead-label { font-family: var(--dm); font-weight: 500; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--blue); }
.lead-body p { font-family: var(--syne); font-weight: 600; font-size: clamp(20px,2.6vw,30px); line-height: 1.35; letter-spacing: -0.015em; color: var(--ink); text-wrap: pretty; }
.lead-body p em { color: var(--orange); font-style: normal; }
.lead-body .sm { font-family: var(--dm); font-weight: 300; font-size: 15px; line-height: 1.8; color: var(--warm); margin-top: 22px; max-width: 56ch; }
@media (max-width: 760px) { .lead-inner { grid-template-columns: 1fr; gap: 20px; } }

/* ============ BENEFITS grid ============ */
.benefits { padding: clamp(56px,9vh,104px) var(--pad); }
.benefits-head { max-width: 1100px; margin: 0 auto clamp(36px,5vh,56px); }
.benefits-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.benefit { background: var(--paper); padding: clamp(28px,3vw,38px); min-height: 220px; display: flex; flex-direction: column; transition: background .25s; }
.benefit:hover { background: #FBF9F5; }
.benefit .b-idx { font-family: var(--syne); font-weight: 800; font-size: 13px; color: var(--orange); letter-spacing: 0.04em; }
.benefit .b-title { font-family: var(--syne); font-weight: 700; font-size: clamp(18px,2.2vw,22px); letter-spacing: -0.015em; margin-top: 18px; }
.benefit .b-desc { font-family: var(--dm); font-weight: 300; font-size: 14px; color: var(--warm); line-height: 1.7; margin-top: 12px; flex: 1; text-wrap: pretty; }
@media (max-width: 860px) { .benefits-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .benefits-grid { grid-template-columns: 1fr; } }

/* ============ INCLUDED checklist ============ */
.included { padding: clamp(56px,9vh,104px) var(--pad); background: var(--noir); color: var(--paper); }
.included-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 0.8fr 1.5fr; gap: clamp(32px,5vw,72px); }
.included .sec-label { color: var(--orange); }
.included h2 { font-family: var(--syne); font-weight: 800; font-size: clamp(30px,4vw,48px); line-height: 0.98; letter-spacing: -0.03em; color: var(--paper); margin-top: 18px; }
.inc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--dline); border: 1px solid var(--dline); align-self: start; }
.inc-item { background: var(--noir); padding: 20px 22px; display: flex; gap: 14px; align-items: flex-start; }
.inc-item .ck { color: var(--orange); font-weight: 700; font-size: 15px; line-height: 1.4; flex-shrink: 0; }
.inc-item .it { font-family: var(--dm); font-weight: 400; font-size: 14px; color: var(--paper); line-height: 1.5; }
.inc-item .it small { display: block; font-weight: 300; color: #6A6A6A; font-size: 12px; margin-top: 3px; }
@media (max-width: 760px) { .included-inner { grid-template-columns: 1fr; gap: 24px; } .inc-list { grid-template-columns: 1fr; } }

/* ============ STAT band (proof) ============ */
.proofband { padding: clamp(48px,7vh,88px) var(--pad); border-bottom: 1px solid var(--hair); }
.proof-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.proof-cell { background: var(--paper); padding: clamp(28px,3vw,40px); }
.proof-cell .pn { font-family: var(--syne); font-weight: 800; font-size: clamp(40px,5.5vw,68px); letter-spacing: -0.04em; line-height: 1; color: var(--orange); }
.proof-cell .pn.blue { color: var(--blue); }
.proof-cell .pn.ink { color: var(--ink); }
.proof-cell .pl { font-family: var(--dm); font-weight: 300; font-size: 14px; color: var(--warm); margin-top: 14px; line-height: 1.6; max-width: 28ch; }
@media (max-width: 760px) { .proof-inner { grid-template-columns: 1fr; } }

/* ============ FAQ ============ */
.faq { padding: clamp(56px,9vh,104px) var(--pad); }
.faq-inner { max-width: 900px; margin: 0 auto; }
.faq-list { margin-top: clamp(32px,5vh,48px); }
.faq-item { border-top: 1px solid var(--hair); }
.faq-item:last-child { border-bottom: 1px solid var(--hair); }
.faq-q {
  width: 100%; background: none; border: 0; color: inherit; cursor: none; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0;
  font-family: var(--syne); font-weight: 700; font-size: clamp(16px,2vw,21px); letter-spacing: -0.01em;
  transition: color .2s;
}
.faq-q:hover { color: var(--blue); }
.faq-q .pm { font-size: 22px; color: var(--orange); transition: transform .3s var(--ease); flex-shrink: 0; }
.faq-item.open .faq-q .pm { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq-a p { padding: 0 0 26px; font-family: var(--dm); font-weight: 300; font-size: 15px; color: var(--warm); line-height: 1.8; max-width: 70ch; text-wrap: pretty; }

/* ============ CTA WhatsApp variant (reuses .cta) ============ */
.cta .cta-btn.wa { background: #25D366; color: #07331A; }
.cta .cta-btn.wa:hover { filter: brightness(1.05); }

/* ============ CONTACT form ============ */
.cform-wrap { padding: clamp(56px,9vh,104px) var(--pad); }
.cform-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(36px,5vw,72px); align-items: start; }
.cform-aside h2 { font-family: var(--syne); font-weight: 800; font-size: clamp(30px,4vw,46px); line-height: 0.98; letter-spacing: -0.03em; }
.cform-aside p { font-family: var(--dm); font-weight: 300; font-size: 15px; color: var(--warm); line-height: 1.75; margin-top: 18px; max-width: 40ch; }
.cform-direct { margin-top: 36px; display: flex; flex-direction: column; gap: 12px; }
.cform-direct a { font-family: var(--dm); font-weight: 400; font-size: 15px; color: var(--ink); border-bottom: 1px solid var(--hair); padding-bottom: 11px; transition: color .2s, border-color .2s; }
.cform-direct a:hover { color: var(--orange); border-color: var(--orange); }
.cform-direct a span { font-family: var(--dm); font-weight: 500; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); display: block; margin-bottom: 5px; }

.cform { display: grid; gap: 18px; }
.cfield { display: flex; flex-direction: column; gap: 8px; }
.cfield label { font-family: var(--dm); font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--warm); }
.cfield input, .cfield select, .cfield textarea {
  font-family: var(--dm); font-weight: 300; font-size: 15px; color: var(--ink);
  background: #fff; border: 1px solid var(--hair); border-radius: 4px; padding: 13px 15px;
  transition: border-color .2s; width: 100%; cursor: none;
}
.cfield input:focus, .cfield select:focus, .cfield textarea:focus { outline: none; border-color: var(--blue); }
.cfield textarea { resize: vertical; min-height: 120px; }
.cfield.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cform .submit-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--syne); font-weight: 700; font-size: 15px; background: #25D366; color: #07331A;
  padding: 16px; border-radius: 4px; border: 0; cursor: none; width: 100%;
  transition: filter .2s, transform .25s var(--ease);
}
.cform .submit-wa:hover { filter: brightness(1.05); transform: translateY(-2px); }
.cform .formnote { font-family: var(--dm); font-weight: 300; font-size: 12px; color: var(--faint); text-align: center; }
@media (max-width: 760px) { .cform-grid { grid-template-columns: 1fr; gap: 32px; } .cfield.row2 { grid-template-columns: 1fr; } }

/* ============ BLOG ============ */
.blog-wrap { padding: clamp(48px,7vh,80px) var(--pad) clamp(56px,9vh,104px); }
.blog-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.post { background: var(--paper); padding: clamp(26px,3vw,34px); min-height: 280px; display: flex; flex-direction: column; transition: background .25s; cursor: none; }
.post:hover { background: #FBF9F5; }
.post .p-cat { font-family: var(--dm); font-weight: 500; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue); }
.post .p-title { font-family: var(--syne); font-weight: 700; font-size: clamp(18px,2.2vw,23px); letter-spacing: -0.015em; line-height: 1.15; margin-top: 16px; }
.post .p-ex { font-family: var(--dm); font-weight: 300; font-size: 14px; color: var(--warm); line-height: 1.7; margin-top: 12px; flex: 1; text-wrap: pretty; }
.post .p-meta { font-family: var(--dm); font-weight: 300; font-size: 12px; color: var(--faint); margin-top: 18px; display: flex; justify-content: space-between; align-items: center; }
.post .p-meta .arw { color: var(--orange); transition: transform .25s var(--ease); }
.post:hover .p-meta .arw { transform: translateX(6px); }
.post.feat { grid-column: span 3; min-height: 0; flex-direction: row; gap: clamp(24px,4vw,48px); align-items: center; }
.post.feat .p-body { flex: 1; }
.post.feat .p-title { font-size: clamp(24px,3.2vw,38px); }
.post.feat .p-side { flex-shrink: 0; width: 38%; }
.post.feat .pf-num { font-family: var(--syne); font-weight: 800; font-size: clamp(60px,9vw,120px); color: var(--hair); letter-spacing: -0.04em; line-height: 1; text-align: right; }
@media (max-width: 860px) { .blog-grid { grid-template-columns: 1fr 1fr; } .post.feat { grid-column: 1 / -1; flex-direction: column; align-items: flex-start; } .post.feat .p-side { display: none; } }
@media (max-width: 540px) { .blog-grid { grid-template-columns: 1fr; } }

/* ============ ABOUT extras ============ */
.about-values { padding: clamp(56px,9vh,104px) var(--pad); }
.values-grid { max-width: 1100px; margin: clamp(36px,5vh,52px) auto 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.value { background: var(--paper); padding: clamp(24px,2.6vw,32px); min-height: 200px; display: flex; flex-direction: column; }
.value .v-n { font-family: var(--dm); font-weight: 500; font-size: 12px; letter-spacing: 0.2em; color: var(--blue); }
.value .v-t { font-family: var(--syne); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; margin-top: auto; }
.value .v-d { font-family: var(--dm); font-weight: 300; font-size: 13px; color: var(--warm); line-height: 1.6; margin-top: 12px; }
@media (max-width: 860px) { .values-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .values-grid { grid-template-columns: 1fr; } }

.story { padding: clamp(56px,9vh,104px) var(--pad); border-bottom: 1px solid var(--hair); }
.story-inner { max-width: 820px; margin: 0 auto; }
.story-inner p { font-family: var(--dm); font-weight: 300; font-size: clamp(16px,1.8vw,19px); line-height: 1.85; color: var(--ink); margin-bottom: 22px; text-wrap: pretty; }
.story-inner p.big { font-family: var(--syne); font-weight: 600; font-size: clamp(22px,3vw,32px); line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 32px; }
.story-inner p.big em { color: var(--orange); font-style: normal; }

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  .mega-panel, .m-sub, .faq-a, .m-grouphead i { transition: none !important; }
}