/* ==========================================================
   Kit d'appels à l'action (includes/cta-kit.php) — audit UX du 2026-10-10
   Cartes blanches, bordure complète de 1 px (jamais sur un seul côté), titres 600-700,
   boutons fins de 40 px, couleurs du site : bleu nuit, bleu, vert. Pas de jaune.
   ========================================================== */

.mci-cta,
.mci-gate,
.mci-next {
    --mci-navy: #082a5e;
    --mci-ink: #0b1f45;
    --mci-text: #475569;
    --mci-muted: #64748b;
    --mci-line: #e2e8f0;
    --mci-blue: #1363df;
    --mci-blue-dark: #0f55c4;
    --mci-blue-soft: #eef4fd;
    --mci-green: #0e9a57;
    --mci-green-soft: #e9f8f0;
    --mci-wa: #1ea952;
    --mci-font: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    font-family: var(--mci-font);
    box-sizing: border-box;
}

.mci-cta *,
.mci-gate *,
.mci-next * {
    box-sizing: border-box;
}

.mci-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ── Carte d'action ──────────────────────────────────────── */
.mci-cta {
    --mci-tint: var(--mci-blue-soft);
    --mci-accent: var(--mci-blue);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px 18px;
    margin: 0;
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid var(--mci-line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(8, 42, 94, 0.04), 0 10px 28px -20px rgba(8, 42, 94, 0.22);
    color: var(--mci-text);
    text-align: left;
}

.mci-cta--green { --mci-tint: var(--mci-green-soft); --mci-accent: var(--mci-green); }
.mci-cta--navy { --mci-tint: #edf1f8; --mci-accent: var(--mci-navy); }
.mci-cta--wa { --mci-tint: #e8f8ee; --mci-accent: var(--mci-wa); }

.mci-cta-ico {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--mci-tint);
    color: var(--mci-accent);
    flex-shrink: 0;
    align-self: start;
}

.mci-cta-body {
    min-width: 0;
}

.mci-cta .mci-cta-kicker {
    margin: 0 0 3px;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mci-accent);
}

.mci-cta .mci-cta-title {
    margin: 0;
    font-family: var(--mci-font);
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mci-ink);
}

.mci-cta .mci-cta-text {
    margin: 4px 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--mci-text);
}

.mci-cta .mci-cta-text strong,
.mci-cta .mci-cta-text b {
    color: var(--mci-ink);
    font-weight: 700;
}

.mci-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px 14px;
}

@media (max-width: 680px) {
    .mci-cta {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0 12px;
        padding: 16px;
    }
    /* Boutons pleine largeur, lien centré dessous (carte « Accompagnement », Kamlo 2026-10-12) */
    .mci-cta-actions {
        grid-column: 1 / -1;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-top: 14px;
    }
    .mci-cta-actions a.mci-cta-btn {
        width: 100%;
        height: 44px;
    }
    .mci-cta-actions a.mci-cta-btn--link {
        align-self: center;
        width: auto;
        height: auto;
        padding: 6px 0;
    }

    /* Plus de colonne vide sous l'icône (Kamlo, 2026-10-11) : le corps se fond dans la grille de la carte.
       Icône + sur-titre/titre en tête, texte et contenus en pleine largeur dessous. */
    .mci-cta-body {
        display: contents;
    }
    .mci-cta .mci-cta-kicker,
    .mci-cta .mci-cta-title {
        grid-column: 2;
        align-self: center;
    }
    .mci-cta:has(.mci-cta-kicker) .mci-cta-ico {
        grid-row: span 2;
        align-self: center;
    }
    .mci-cta:has(.mci-cta-kicker) .mci-cta-kicker {
        align-self: end;
    }
    .mci-cta:has(.mci-cta-kicker) .mci-cta-title {
        align-self: start;
    }
    .mci-cta-body > :not(.mci-cta-kicker):not(.mci-cta-title) {
        grid-column: 1 / -1;
    }
    .mci-cta .mci-cta-text {
        margin-top: 10px;
    }
}

/* ── Boutons ─────────────────────────────────────────────── */
a.mci-cta-btn,
button.mci-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: none;
    font-family: var(--mci-font);
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

a.mci-cta-btn svg,
button.mci-cta-btn svg {
    flex-shrink: 0;
}

a.mci-cta-btn--primary,
button.mci-cta-btn--primary {
    background: var(--mci-blue, #1363df);
    border-color: var(--mci-blue, #1363df);
    color: #ffffff;
}

a.mci-cta-btn--primary:hover,
a.mci-cta-btn--primary:focus-visible,
button.mci-cta-btn--primary:hover,
button.mci-cta-btn--primary:focus-visible {
    background: var(--mci-blue-dark, #0f55c4);
    border-color: var(--mci-blue-dark, #0f55c4);
    color: #ffffff;
}

a.mci-cta-btn--ghost,
button.mci-cta-btn--ghost {
    background: #ffffff;
    border-color: #cbd5e1;
    color: var(--mci-ink, #0b1f45);
}

a.mci-cta-btn--ghost:hover,
a.mci-cta-btn--ghost:focus-visible {
    border-color: var(--mci-blue, #1363df);
    color: var(--mci-blue, #1363df);
}

a.mci-cta-btn--wa {
    background: var(--mci-wa, #1ea952);
    border-color: var(--mci-wa, #1ea952);
    color: #ffffff;
}

a.mci-cta-btn--wa:hover,
a.mci-cta-btn--wa:focus-visible {
    background: #188f45;
    border-color: #188f45;
    color: #ffffff;
}

a.mci-cta-btn--link {
    height: auto;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--mci-blue, #1363df);
}

a.mci-cta-btn--link:hover,
a.mci-cta-btn--link:focus-visible {
    color: var(--mci-blue-dark, #0f55c4);
    text-decoration: underline;
    text-underline-offset: 3px;
}

a.mci-cta-btn:focus-visible,
button.mci-cta-btn:focus-visible,
.mci-next-item:focus-visible {
    outline: 2px solid var(--mci-blue, #1363df);
    outline-offset: 2px;
}

button.mci-cta-btn[disabled] {
    opacity: 0.6;
    cursor: wait;
}

/* ── Alerte par e-mail ───────────────────────────────────── */
.mci-optin {
    align-items: start;
}

.mci-optin-form {
    display: grid;
    /* Colonne bornée à la carte : sans minmax, elle prenait la largeur naturelle du champ + du bouton
       et débordait sur téléphone (carte « Me rappeler samedi », 2026-10-11) */
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 12px 0 0;
}

.mci-optin-row {
    display: flex;
    gap: 8px;
    min-width: 0;
}

.mci-optin-consent {
    min-width: 0;
}

/* Téléphone : champ et bouton l'un sous l'autre, en pleine largeur
   (sélecteurs préfixés par .mci-optin-form : ils passent devant la règle du champ, plus bas dans le fichier) */
@media (max-width: 640px) {
    /* Disposition sans colonne vide sous la cloche : règle commune des cartes (.mci-cta, plus haut) ;
       ici seulement l'écart, que la variante compacte (plus bas dans le fichier) redéfinirait */
    .mci-cta.mci-optin {
        gap: 0 12px;
    }

    .mci-optin-form .mci-optin-row {
        flex-direction: column;
    }

    .mci-optin-form .mci-optin-row input[type="email"] {
        flex: none;
        width: 100%;
        height: 44px;
    }

    .mci-optin-form .mci-optin-row .mci-cta-btn,
    .mci-optin .mci-optin-member .mci-cta-btn {
        width: 100%;
        height: 44px;
    }
}

.mci-optin-row input[type="email"] {
    flex: 1;
    min-width: 0;
    height: 40px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    font-family: var(--mci-font);
    font-size: 14.5px;
    color: var(--mci-ink);
    box-shadow: none;
}

.mci-optin-row input[type="email"]:focus {
    outline: none;
    border-color: var(--mci-blue);
    box-shadow: 0 0 0 3px rgba(19, 99, 223, 0.14);
}

.mci-optin-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 400;
    color: var(--mci-muted);
    cursor: pointer;
}

.mci-optin-consent input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    accent-color: var(--mci-green);
    cursor: pointer;
}

.mci-optin-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}

.mci-optin-member {
    margin: 12px 0 0;
}

.mci-optin .mci-optin-legal {
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--mci-muted);
}

.mci-optin .mci-optin-msg,
.mci-optin .mci-optin-done {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--mci-green);
}

.mci-optin .mci-optin-msg[hidden] {
    display: none;
}

.mci-optin .mci-optin-msg.is-error {
    color: #b42318;
}

.mci-optin.is-done .mci-optin-form,
.mci-optin.is-done .mci-optin-member {
    display: none;
}

/* Colonne étroite (archives des sujets) */
.mci-optin--compact {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    box-shadow: none;
}

.mci-optin--compact .mci-cta-ico {
    width: 32px;
    height: 32px;
    border-radius: 9px;
}

.mci-optin--compact .mci-cta-title {
    font-size: 15px;
}

.mci-optin--compact .mci-cta-text {
    font-size: 13.5px;
}

.mci-optin--compact .mci-optin-row {
    flex-direction: column;
}

.mci-optin--compact .mci-optin-row .mci-cta-btn,
.mci-optin--compact .mci-optin-member .mci-cta-btn {
    width: 100%;
}

/* Sur un en-tête bleu (examens blancs) */
.mci-optin--dark {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow: none;
}

.mci-optin--dark .mci-cta-ico {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.mci-optin--dark .mci-cta-title,
.mci-optin--dark .mci-optin-msg,
.mci-optin--dark .mci-optin-done {
    color: #ffffff;
}

.mci-optin--dark .mci-cta-text,
.mci-optin--dark .mci-optin-consent,
.mci-optin--dark .mci-optin-legal {
    color: rgba(255, 255, 255, 0.82);
}

.mci-optin--dark .mci-optin-msg.is-error {
    color: #ffd2cc;
}

/* Carte « Me rappeler samedi » du bandeau des examens blancs (seule carte « dark ») : sa colonne est étroite,
   le champ était coupé à côté du bouton. Champ et bouton sur 2 lignes, même sur grand écran (Kamlo, 2026-10-18). */
.mci-optin--dark .mci-optin-form .mci-optin-row {
    flex-direction: column;
}

.mci-optin--dark .mci-optin-form .mci-optin-row input[type="email"] {
    flex: none;
    width: 100%;
    height: 44px;
}

.mci-optin--dark .mci-optin-form .mci-optin-row .mci-cta-btn {
    width: 100%;
    height: 44px;
}

.mci-optin--dark a.mci-cta-btn--primary,
.mci-optin--dark button.mci-cta-btn--primary {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--mci-navy);
}

.mci-optin--dark button.mci-cta-btn--primary:hover {
    background: var(--mci-blue-soft);
    border-color: var(--mci-blue-soft);
    color: var(--mci-navy);
}

/* ── Écran « connexion ou compte gratuit » ───────────────── */
.mci-gate {
    display: flex;
    justify-content: center;
    padding: 40px 16px 56px;
}

.mci-gate-card {
    width: 100%;
    max-width: 580px;
    padding: 32px 32px 28px;
    background: #ffffff;
    border: 1px solid var(--mci-line);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(8, 42, 94, 0.04), 0 18px 44px -28px rgba(8, 42, 94, 0.3);
    text-align: center;
}

.mci-gate-ico {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 14px;
    border-radius: 14px;
    background: var(--mci-blue-soft);
    color: var(--mci-blue);
}

.mci-gate .mci-gate-kicker {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mci-blue);
}

.mci-gate .mci-gate-title {
    margin: 0 0 8px;
    font-family: var(--mci-font);
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--mci-ink);
    text-wrap: balance;
}

.mci-gate .mci-gate-text {
    max-width: 46ch;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.6;
    color: var(--mci-text);
}

.mci-gate .mci-gate-points {
    display: inline-grid;
    gap: 9px;
    margin: 18px auto 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.mci-gate .mci-gate-points li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.45;
    color: #1e293b;
}

.mci-gate-check {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--mci-green-soft);
    color: var(--mci-green);
    flex-shrink: 0;
}

.mci-gate-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 22px 0 0;
}

.mci-gate .mci-gate-note {
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--mci-muted);
}

@media (max-width: 520px) {
    .mci-gate-card {
        padding: 26px 20px 22px;
    }
    .mci-gate-actions .mci-cta-btn {
        width: 100%;
    }
}

/* ── Fenêtre « Connectez-vous » (visiteur sur un lien qui demande un compte, 2026-10-11) ── */
.mci-gate-pop {
    width: min(520px, calc(100% - 32px));
    max-width: none;
    max-height: calc(100% - 32px);
    margin: auto;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
}

.mci-gate-pop[open] {
    animation: mci-gate-in 0.2s ease;
}

.mci-gate-pop::backdrop {
    background: rgba(6, 18, 43, 0.6);
}

@keyframes mci-gate-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.mci-gate.mci-gate--pop {
    display: block;
    padding: 0;
}

.mci-gate--pop .mci-gate-card {
    position: relative;
    max-width: none;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px); /* iPhone : vh ignore les barres de Safari */
    overflow-x: hidden;
    overflow-y: auto;
    padding: 32px 28px 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.mci-gate--pop .mci-gate-ico--paid,
.mci-gate-pop.is-paid .mci-gate-ico--free {
    display: none;
}

.mci-gate-pop.is-paid .mci-gate-ico--paid {
    display: grid;
}

button.mci-gate-pop-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    background: #ffffff;
    border: 1px solid var(--mci-line);
    border-radius: 10px;
    color: var(--mci-muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

button.mci-gate-pop-close:hover,
button.mci-gate-pop-close:focus-visible {
    border-color: #cbd5e1;
    color: var(--mci-ink);
}

.mci-gate--pop .mci-gate-title {
    padding: 0 24px;
}

.mci-gate--pop .mci-gate-actions {
    flex-direction: column;
    align-items: stretch;
}

.mci-gate--pop .mci-gate-actions .mci-cta-btn {
    width: 100%;
    height: 44px;
}

/* Compte gratuit : bouton vert (comme les autres appels au compte gratuit) */
.mci-gate-pop.is-free a.mci-cta-btn--primary {
    background: #12bb6a;
    border-color: #12bb6a;
}

.mci-gate-pop.is-free a.mci-cta-btn--primary:hover,
.mci-gate-pop.is-free a.mci-cta-btn--primary:focus-visible {
    background: var(--mci-green);
    border-color: var(--mci-green);
}

.mci-gate--pop .mci-gate-pop-login {
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--mci-text);
}

.mci-gate--pop .mci-gate-pop-login a {
    color: var(--mci-blue);
    font-weight: 600;
    text-decoration: none;
}

.mci-gate--pop .mci-gate-pop-more {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
}

.mci-gate--pop .mci-gate-pop-more a {
    color: var(--mci-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mci-gate--pop .mci-gate-pop-login a:hover,
.mci-gate--pop .mci-gate-pop-more a:hover {
    color: var(--mci-blue-dark);
}

@media (max-width: 520px) {
    .mci-gate--pop .mci-gate-card {
        padding: 28px 18px 20px;
    }
}

/* Dialogue « Accès activé » de Chariow après un compte gratuit : ligne discrète vers les offres */
.mci-success-upsell {
    display: block;
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.5;
    color: #64748b;
}

.mci-success-upsell a {
    color: #1363df;
    font-weight: 600;
    text-decoration: none;
}

/* ── Bloc « Et maintenant ? » ────────────────────────────── */
.mci-next {
    margin: 20px 0 0;
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid var(--mci-line);
    border-radius: 14px;
    text-align: left;
}

.mci-next .mci-next-title {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--mci-ink);
}

.mci-next-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
}

a.mci-next-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--mci-line);
    border-radius: 12px;
    background: #ffffff;
    color: var(--mci-ink);
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

a.mci-next-item:hover {
    border-color: var(--mci-blue);
    background: #f7faff;
    color: var(--mci-ink);
}

.mci-next-ico {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--mci-blue-soft);
    color: var(--mci-blue);
}

.mci-next-item.is-wa .mci-next-ico {
    background: #e8f8ee;
    color: var(--mci-wa);
}

.mci-next-text {
    min-width: 0;
}

.mci-next-text b {
    display: block;
    font-size: 14.5px;
    line-height: 1.35;
    font-weight: 600;
}

.mci-next-text small {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 400;
    color: var(--mci-muted);
}

.mci-next-arrow {
    color: #94a3b8;
}

a.mci-next-item:hover .mci-next-arrow {
    color: var(--mci-blue);
}

/* ── Empilement de cartes sous un contenu ────────────────── */
.mci-cta-stack {
    display: grid;
    gap: 14px;
    margin: 24px 0 0;
}

/* ── Page des offres : offre présélectionnée, rassurance ─── */
.tcf-pt-card.is-mci-highlight {
    box-shadow: 0 0 0 2px #1363df, 0 20px 44px -24px rgba(19, 99, 223, 0.5) !important;
    transition: box-shadow 0.3s ease;
}

.mci-pt-reassure {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 26px;
    margin: 22px auto 0;
    font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
    font-size: 14.5px;
    line-height: 1.5;
    color: #475569;
    text-align: center;
}

/* Texte courant et non boîte flexible : sur téléphone, la phrase et le lien se compressaient en deux colonnes (2026-10-11) */
.mci-pt-reassure span {
    display: inline-block;
    max-width: 100%;
}

.mci-pt-reassure svg {
    display: inline-block;
    margin-right: 8px;
    vertical-align: -3px;
    color: #1363df;
}

.mci-pt-reassure a {
    color: #1363df;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.mci-pt-reassure a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    a.mci-cta-btn,
    button.mci-cta-btn,
    a.mci-next-item,
    .tcf-pt-card.is-mci-highlight {
        transition: none;
    }
}