/* Page de vente du pack CCA.
   Reprend la charte du site (Inter, bleu Abecedo) et lui ajoute un couple
   contraste plus marque : un navy d'aviation en fond de sections fortes, et
   un ambre en accent, pour que la page ne soit pas une suite de blocs blancs. */

:root {
    --cca-navy: #0B2545;
    --cca-navy-soft: #13315C;
    --cca-amber: #E0A63C;
    --cca-amber-dark: #B87F1E;
    --cca-ink: #1D1D1F;
    --cca-mute: #5A6472;
    --cca-line: #DCE3EC;
    --cca-wash: #F4F7FB;
}

.cca-main { padding-top: 0; }

/* Bandeau d'ouverture */
.cca-hero {
    background:
        radial-gradient(1100px 420px at 78% -8%, rgba(224, 166, 60, 0.20), transparent 62%),
        linear-gradient(160deg, var(--cca-navy) 0%, var(--cca-navy-soft) 100%);
    color: #fff;
    padding: 84px 0 72px;
}
.cca-hero .container { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: center; }
.cca-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--cca-amber);
    border: 1px solid rgba(224, 166, 60, 0.45);
    border-radius: 999px;
    padding: 6px 14px;
    margin-bottom: 22px;
}
.cca-hero h1 { font-size: 46px; line-height: 1.14; font-weight: 700; margin-bottom: 18px; letter-spacing: -0.02em; }
.cca-hero h1 .accent { color: var(--cca-amber); }
.cca-lede { font-size: 19px; line-height: 1.62; color: rgba(255, 255, 255, 0.86); max-width: 40em; }
.cca-price { display: flex; align-items: baseline; gap: 12px; margin: 30px 0 22px; }
.cca-price .amount { font-size: 38px; font-weight: 700; color: #fff; }
.cca-price .terms { font-size: 15px; color: rgba(255, 255, 255, 0.72); }
.cca-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.cca-btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--cca-amber); color: #241701;
    font-weight: 650; font-size: 16px;
    padding: 15px 26px; border-radius: 12px; text-decoration: none;
    transition: background 0.18s ease, transform 0.18s ease;
}
.cca-btn:hover { background: var(--cca-amber-dark); color: #fff; transform: translateY(-1px); }
.cca-btn-ghost {
    display: inline-flex; align-items: center;
    color: rgba(255, 255, 255, 0.9); text-decoration: none;
    font-size: 15px; padding: 15px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.32);
}
.cca-btn-ghost:hover { color: #fff; border-bottom-color: var(--cca-amber); }
.cca-cover { justify-self: center; }
.cca-cover img {
    width: 100%; max-width: 300px; border-radius: 22px;
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.42);
}

/* Chiffres */
.cca-figures { background: #fff; border-bottom: 1px solid var(--cca-line); }
.cca-figures .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding-top: 44px; padding-bottom: 44px; }
.cca-figure .n { font-size: 34px; font-weight: 700; color: var(--cca-navy); line-height: 1.1; }
.cca-figure .l { font-size: 14px; color: var(--cca-mute); margin-top: 6px; }

/* Sections */
.cca-section { padding: 76px 0; }
.cca-section.wash { background: var(--cca-wash); }
.cca-section h2 { font-size: 32px; font-weight: 700; color: var(--cca-ink); margin-bottom: 14px; letter-spacing: -0.01em; }
.cca-section .intro { font-size: 17px; color: var(--cca-mute); max-width: 62ch; margin-bottom: 40px; line-height: 1.66; }

/* Modules */
.cca-modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 18px; }
.cca-module {
    background: #fff; border: 1px solid var(--cca-line); border-left: 4px solid var(--cca-amber);
    border-radius: 12px; padding: 22px 24px;
}
.cca-module .code { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--cca-amber-dark); }
.cca-module h3 { font-size: 18px; font-weight: 650; color: var(--cca-navy); margin: 4px 0 10px; line-height: 1.34; }
.cca-module .themes { font-size: 14.5px; color: var(--cca-mute); line-height: 1.6; }
.cca-module .count { display: block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--cca-ink); }

/* Methode */
.cca-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.cca-method { background: #fff; border: 1px solid var(--cca-line); border-radius: 12px; padding: 26px; }
.cca-method h3 { font-size: 17px; font-weight: 650; color: var(--cca-navy); margin-bottom: 8px; }
.cca-method p { font-size: 15px; color: var(--cca-mute); line-height: 1.62; }

/* Encart examen */
.cca-exam { background: var(--cca-navy); color: #fff; }
.cca-exam h2 { color: #fff; }
.cca-exam .intro { color: rgba(255, 255, 255, 0.78); }
.cca-exam-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; margin-bottom: 30px; }
.cca-exam-item { border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; padding: 22px; background: rgba(255, 255, 255, 0.045); }
.cca-exam-item .n { font-size: 27px; font-weight: 700; color: var(--cca-amber); }
.cca-exam-item .l { font-size: 14.5px; color: rgba(255, 255, 255, 0.82); margin-top: 6px; line-height: 1.55; }
.cca-source { font-size: 14px; color: rgba(255, 255, 255, 0.62); line-height: 1.66; }
.cca-source a { color: rgba(255, 255, 255, 0.9); }

/* Franchise */
.cca-honest { border: 1px solid var(--cca-line); border-radius: 14px; background: #fff; padding: 30px 32px; }
.cca-honest ul { list-style: none; margin: 0; padding: 0; }
.cca-honest li { position: relative; padding-left: 26px; margin-bottom: 14px; font-size: 15.5px; color: var(--cca-ink); line-height: 1.62; }
.cca-honest li:last-child { margin-bottom: 0; }
.cca-honest li::before {
    content: ""; position: absolute; left: 0; top: 9px;
    width: 9px; height: 9px; border-radius: 2px; background: var(--cca-amber);
}
.cca-honest strong { font-weight: 650; color: var(--cca-navy); }

/* Appel final */
.cca-final { background: var(--cca-wash); text-align: center; }
.cca-final h2 { margin-bottom: 12px; }
.cca-final p { font-size: 17px; color: var(--cca-mute); margin-bottom: 28px; }

@media (max-width: 900px) {
    .cca-hero .container { grid-template-columns: 1fr; gap: 40px; }
    .cca-hero h1 { font-size: 34px; }
    .cca-cover { order: -1; }
    .cca-figures .container { grid-template-columns: repeat(2, 1fr); }
}