/* ============================================================
   CLARION STRATUM — da-claire.css (proposition de DA)
   Alterne sections marine et sections ivoire, ajoute un bandeau
   de chiffres clés, les couvertures des guides et des icônes.
   ============================================================ */

/* ---------- Sections claires ---------- */
.clair{
  --ivory:#0E2A3E;          /* texte fort */
  --ivory-dim:#4B566B;      /* texte courant */
  --gold-l:#8F6A24;         /* or lisible sur fond clair */
  --grad-gold:linear-gradient(135deg,#B8862E,#9C7127 55%,#7A5519);
  /* Fondu progressif marine → ivoire → marine : pas de coupure franche */
  background:linear-gradient(180deg,#0E2A3E 0,#27344F 45px,#6F7483 100px,#C9C1B1 155px,#EFE7D6 200px,#EFE7D6 calc(100% - 200px),#C9C1B1 calc(100% - 155px),#6F7483 calc(100% - 100px),#27344F calc(100% - 45px),#081D2C 100%) !important;
  color:#0E2A3E;
}
section.clair{padding:190px 0 200px}
.clair .kicker{color:#9C7127}
.clair .res-badge,.clair .preuve-badge,.clair .badge-fondateur{color:#FFFDF8}
.clair .btn-gold{color:#FFFDF8}
.clair .btn-ghost{color:#0E2A3E;border-color:rgba(14,42,62,.35)}
.clair .btn-ghost:hover{color:#8F6A24;border-color:#8F6A24}

/* Cartes blanches, ombre douce */
.clair .doutes li,
.clair .mindset-card,
.clair .inclus,
.clair .res-card,
.clair .chiffre,
.clair .start-card{
  background:#FFFFFF !important;
  border:1px solid rgba(210,168,78,.35) !important;
  box-shadow:0 14px 36px rgba(14,42,62,.08) !important;
}
.clair .mindset-card{border-left:4px solid #D2A84E !important}
.clair .preuve{
  background:#0E2A3E;border-color:#D2A84E;
  --ivory:#F8F3E7;--ivory-dim:#D9D2C0;--gold-l:#F2DFA6;
  --grad-gold:linear-gradient(135deg,#F2DFA6,#E2C06F 35%,#C3943A 70%,#8F6A24);
  color:#F8F3E7;
}
.clair .preuve .chiffre{background:rgba(8,29,44,.55) !important;border-color:rgba(248,243,231,.14) !important;box-shadow:none !important}
.clair .preuve .chiffre.net{background:rgba(210,168,78,.14) !important;border-color:rgba(210,168,78,.55) !important}
.clair .photo-frame{box-shadow:0 22px 50px rgba(14,42,62,.22)}
.clair .res-card h4{color:#0E2A3E}
.clair .inclus li{border-color:rgba(14,42,62,.1)}
/* Encadré bonus de La Chasse (styles en ligne) */
.clair .bonus-box{background:linear-gradient(165deg,#FBF3DF,#FFFFFF) !important;border-color:#D2A84E !important}
.clair .methode-note{color:#4B566B}

/* ---------- Bandeau chiffres clés (sous le hero) ---------- */
.reperes{background:linear-gradient(180deg,rgba(8,29,44,0),#081D2C);color:#F8F3E7;padding:0}
.reperes .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.repere{padding:34px 18px 30px;text-align:center;border-right:1px solid rgba(210,168,78,.25)}
.repere:last-child{border-right:none}
.repere b{display:block;font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:600;line-height:1.1;letter-spacing:.01em;color:#F8F3E7}
.repere b em{font-style:normal;color:#E2C06F}
.repere span{display:block;margin-top:8px;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:#D9D2C0;line-height:1.5}
.reperes-note{grid-column:1/-1;text-align:center;font-size:.8rem;font-style:italic;color:rgba(217,210,192,.6);padding:0 0 18px}
@media (max-width:760px){
  .reperes .wrap{grid-template-columns:1fr 1fr}
  .repere{border-bottom:1px solid rgba(210,168,78,.25);padding:24px 10px 20px}
  .repere:nth-child(2n){border-right:none}
}

/* ---------- Couvertures des guides ---------- */
.couv{
  display:block;width:156px;margin:0 0 24px;border-radius:6px;
  box-shadow:0 18px 38px rgba(0,0,0,.45),0 0 0 1px rgba(210,168,78,.45);
  transform:rotate(-2deg);transition:transform .4s ease;
}
.pricing:hover .couv{transform:rotate(0) translateY(-4px)}
.pricing-top{display:flex;gap:22px;align-items:flex-end}
.pricing-top .couv{flex:0 0 auto;margin-bottom:6px}
@media (max-width:480px){.couv{width:96px}}

/* ---------- Icônes des outils ---------- */
.ico{
  width:54px;height:54px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(145deg,#0E2A3E,#1B2E52);box-shadow:0 8px 20px rgba(14,42,62,.25);
}
.ico svg{width:28px;height:28px;stroke:#E2C06F;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}