/* ============================================================
   DigiKoder — Grille Tarifaire v2.0.0
   Structure : tableau unifié (1 col libellés + N cols plans)
   Géométrie Sacrée : φ=1.618, Fibonacci (8/13/21/34/55/89px)
   ============================================================ */

.dk-pricing-wrap {
    --dk-bg:            #080f1e;
    --dk-surface:       #111827;
    --dk-surface-2:     #1a2540;
    --dk-border:        rgba(255,255,255,.07);
    --dk-border-strong: rgba(255,255,255,.14);

    --dk-text:          #e8edf7;
    --dk-text-2:        #8a93a8;
    --dk-text-3:        #5f6781;

    /* Accents colonnes */
    --dk-c1: #04b342;   --dk-c1-2: #028a33;   /* vert    — gratuit */
    --dk-c2: #ff8c2a;   --dk-c2-2: #cc5a00;   /* orange  — starter */
    --dk-c3: #1cb3a3;   --dk-c3-2: #0a8a7c;   /* cyan    — pro */
    --dk-c4: #3f60f0;   --dk-c4-2: #1e3aa8;   /* bleu    — business */

    --dk-yes:    #04b342;
    --dk-no:     #4a5169;
    --dk-trial:  #f59e0b;
    --dk-claudia: #a855f7;

    /* Fibonacci */
    --s8: 8px;   --s13: 13px;  --s21: 21px;
    --s34: 34px; --s55: 55px;  --s89: 89px;

    /* Typographie ×1.618 */
    --t-sm: 13px; --t-base: 15px; --t-lg: 26px; --t-xl: 32px;

    --radius: 21px;
    --radius-sm: 8px;
    --radius-pill: 999px;

    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--dk-text);
    background: var(--dk-bg);
    padding: var(--s34) var(--s21) var(--s55);
}

/* /prix/ — fond sombre (onglets Elementor blancs sur mobile = texte illisible) */
.page-id-16912 .eael-tabs-content,
.page-id-16912 .eael-tab-content-item,
.page-id-16912 .elementor-widget-shortcode {
    background-color: var(--dk-bg, #080f1e) !important;
}

/* ---- INTRO ---- */
.dk-pricing-intro {
    text-align: center;
    margin-bottom: var(--s21);
}
.dk-pricing-title {
    font-size: var(--t-xl);
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 var(--s8);
    background: linear-gradient(180deg, #fff, #b8c2dd);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.dk-pricing-subtitle {
    color: var(--dk-text-2);
    font-size: var(--t-base);
    max-width: 680px;
    margin: 0 auto var(--s13);
}
.dk-trial-banner {
    display: inline-flex;
    align-items: center;
    gap: var(--s8);
    background: linear-gradient(135deg, rgba(63,96,240,.15), rgba(63,96,240,.05));
    border: 1px solid rgba(63,96,240,.35);
    border-radius: var(--radius-pill);
    padding: 6px var(--s21);
    font-size: var(--t-sm);
    color: #fff;
}
.dk-trial-dot {
    width: 7px; height: 7px;
    background: #3f60f0;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(63,96,240,.25);
    animation: dk-blink 2s infinite;
    flex-shrink: 0;
}
@keyframes dk-blink { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ---- TABLEAU ---- */
.dk-pricing-table-wrap {
    background: linear-gradient(180deg, var(--dk-surface), var(--dk-surface-2));
    border: 1px solid var(--dk-border);
    border-radius: var(--radius);
    overflow: visible;
    box-shadow:
        0 1px 0 rgba(255,255,255,.04) inset,
        0 30px 80px -40px rgba(0,0,0,.7);
}

.dk-pricing-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.dk-pricing-table th,
.dk-pricing-table td {
    text-align: center;
    vertical-align: middle;
    padding: var(--s13) var(--s13);
    border-bottom: 1px solid var(--dk-border);
    min-height: 44px;
}

/* Colonne libellés */
.dk-pricing-table th.dk-col-label,
.dk-pricing-table td.dk-col-label {
    text-align: left;
    width: 38%;
    padding-left: var(--s21);
    padding-right: var(--s13);
    color: var(--dk-text);
    font-weight: 500;
    font-size: var(--t-base);
    background: #0e1628;
    border-right: 1px solid var(--dk-border);
    position: sticky;
    left: 0;
    z-index: 2;
}

/* Colonnes plans */
.dk-pricing-table th.dk-col-plan {
    width: 15.5%;
    padding: 0;
    border-right: 1px solid var(--dk-border);
    background: var(--dk-surface-2);
    vertical-align: top;
}
.dk-pricing-table th.dk-col-plan:last-child { border-right: none; }

/* Coins du tableau (overflow:visible → arrondi manuel sur cellules d'angle) */
.dk-pricing-table thead tr:first-child th.dk-col-label    { border-radius: calc(var(--radius) - 1px) 0 0 0; }
.dk-pricing-table thead tr:first-child th.dk-col-plan:last-child { border-radius: 0 calc(var(--radius) - 1px) 0 0; }
.dk-pricing-table .dk-row-cta td:first-child               { border-radius: 0 0 0 calc(var(--radius) - 1px); }
.dk-pricing-table .dk-row-cta td:last-child                 { border-radius: 0 0 calc(var(--radius) - 1px) 0; }

/* En-tête plan */
.dk-plan-head {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 26px var(--s13) var(--s13);
    color: #fff;
    text-align: center;
    height: 100%;
}

.dk-plan-head__name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .92;
}
.dk-plan-head__price {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.01em;
}
.dk-plan-head__price small {
    font-size: 12px;
    font-weight: 500;
    opacity: .75;
    margin-left: 2px;
}
.dk-plan-head__hint {
    font-size: 11px;
    font-weight: 500;
    opacity: .8;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.dk-plan-head__for {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,.75);
    background: rgba(255,255,255,.12);
    border-radius: var(--radius-pill);
    padding: 2px var(--s8);
    margin-top: var(--s8);
    letter-spacing: .04em;
}

/* Gradients par couleur */
.dk-c-1 .dk-plan-head { background: linear-gradient(160deg, var(--dk-c1), var(--dk-c1-2)); }
.dk-c-2 .dk-plan-head { background: linear-gradient(160deg, var(--dk-c2), var(--dk-c2-2)); }
.dk-c-3 .dk-plan-head { background: linear-gradient(160deg, var(--dk-c3), var(--dk-c3-2)); }
.dk-c-4 .dk-plan-head { background: linear-gradient(160deg, var(--dk-c4), var(--dk-c4-2)); }

/* Badge "Populaire" — dans l'espace de 26px réservé sur toutes les colonnes */
.dk-plan-badge {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    background: #ffd84d;
    color: #1a1300;
    padding: 0px 10px;
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 14px -4px rgba(255,216,77,.7);
}
/* Badge secondaire "Meilleure valeur" — positionné sous le bloc dk-plan-head */
.dk-plan-badge--secondary {
    position: static;
    transform: none;
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .10em;
    background: rgba(28,179,163,.2);
    color: #1cb3a3;
    border: 1px solid rgba(28,179,163,.4);
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    margin: var(--s8) auto 0;
    box-shadow: none;
}

/* Sections */
.dk-pricing-table tr.dk-row-section td {
    background: rgba(255,255,255,.06);
    text-transform: uppercase;
    font-size: var(--t-sm);
    font-weight: 800;
    letter-spacing: .16em;
    color: #fff;
    text-align: left;
    padding: var(--s8) var(--s21);
    border-top: 2px solid var(--dk-border-strong);
    border-bottom: 1px solid var(--dk-border-strong);
    position: relative;
}
.dk-pricing-table tr.dk-row-section td::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--dk-c3);
    border-radius: 0 2px 2px 0;
}
.dk-pricing-table tr.dk-row-section td.dk-section-claudia::before {
    background: var(--dk-claudia);
}

/* Lignes features — alternance */
.dk-pricing-table tbody tr.dk-row-feat:nth-of-type(even) td {
    background: rgba(255,255,255,.018);
}
.dk-pricing-table tbody tr.dk-row-feat:nth-of-type(even) td.dk-col-label {
    background: rgb(24 30 47);
}
.dk-pricing-table tbody tr.dk-row-feat--claudia td {
    background: linear-gradient(180deg, transparent, rgba(168,85,247,.04)) !important;
}

/* Cellules valeur */
.dk-cell          { font-size: var(--t-sm); font-weight: 600; color: var(--dk-text); }
.dk-cell--yes     { color: var(--dk-yes); font-size: 17px; }
.dk-cell--no      { color: var(--dk-no);  font-size: 17px; }
.dk-cell--num     { color: var(--dk-text); }
.dk-cell--unl     { color: var(--dk-c3); font-weight: 700; }
.dk-cell--trial   { color: var(--dk-trial); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.dk-cell--claudia { color: var(--dk-claudia); font-weight: 700; }

/* Ligne CTA */
.dk-row-cta td {
    padding: var(--s13) var(--s13);
    background: rgba(255,255,255,.02);
    border-top: 1px solid var(--dk-border-strong);
    border-bottom: none;
}

/* ---- CTA — contrat JS funnel : .ptsColFooter > .ptsTog > .ptsActBtn.btn_abo_X > a ---- */
.ptsColFooter { padding: 0; }
.ptsTog { width: 100%; }
.ptsActBtn a, .dk-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 100%;
    min-height: 44px;
    padding: 10px var(--s34);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #fff;
    text-decoration: none;
    transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
    cursor: pointer;
}
.ptsActBtn a:hover, .dk-cta-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }

.dk-c-1 .ptsActBtn a, .dk-c-1 .dk-cta-btn { background: linear-gradient(160deg, var(--dk-c1), var(--dk-c1-2)); box-shadow: 0 8px 20px -10px var(--dk-c1-2); }
.dk-c-2 .ptsActBtn a, .dk-c-2 .dk-cta-btn { background: linear-gradient(160deg, var(--dk-c2), var(--dk-c2-2)); box-shadow: 0 8px 20px -10px var(--dk-c2-2); }
.dk-c-3 .ptsActBtn a, .dk-c-3 .dk-cta-btn { background: linear-gradient(160deg, var(--dk-c3), var(--dk-c3-2)); box-shadow: 0 8px 20px -10px var(--dk-c3-2); }
.dk-c-4 .ptsActBtn a, .dk-c-4 .dk-cta-btn { background: linear-gradient(160deg, var(--dk-c4), var(--dk-c4-2)); box-shadow: 0 8px 20px -10px var(--dk-c4-2); }

.dk-cta-note {
    text-align: center;
    font-size: 12px;
    color: var(--dk-text-2);
    margin-top: 6px;
    line-height: 1.4;
}
.dk-cta-note a { color: var(--dk-text-2); text-decoration: underline; }

/* ---- INFOBULLE (dk-tip) — CSS-only hover, position:absolute ---- */
.dk-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    vertical-align: middle;
}

.dk-tip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    border: 1.5px solid rgba(255, 255, 255, .4);
    color: rgba(255, 255, 255, .85);
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1;
    cursor: help;
    flex-shrink: 0;
    transition: background .15s, border-color .15s, color .15s;
}
.dk-tip:hover .dk-tip__icon,
.dk-tip:focus-within .dk-tip__icon {
    background: rgba(28, 179, 163, .2);
    border-color: var(--dk-c3, #1cb3a3);
    color: var(--dk-c3, #1cb3a3);
}

/* Bulle — position:absolute par rapport à .dk-tip (position:relative) */
.dk-tip__bubble {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    background: #1a2540;
    background: var(--dk-surface-2, #1a2540);
    border: 1px solid rgba(255, 255, 255, .18);
    border: 1px solid var(--dk-border-strong, rgba(255, 255, 255, .18));
    border-radius: var(--radius-sm, 8px);
    padding: var(--s8, 8px) var(--s13, 13px);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.55;
    color: #e8edf7;
    color: var(--dk-text, #e8edf7);
    width: 260px;
    max-width: calc(100vw - 32px);
    white-space: normal;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    z-index: 9999;
    box-shadow: 0 8px 24px -8px rgba(0,0,0,.6);
    pointer-events: none;
}
.dk-tip:hover .dk-tip__bubble,
.dk-tip:focus-within .dk-tip__bubble {
    display: block;
}

/* ---- MENTION LÉGALE TARIFAIRE ---- */
.dk-pricing-legal {
    text-align: center;
    margin-top: var(--s21);
    font-size: var(--t-xs, 12px);
    color: var(--dk-text-2);
    letter-spacing: .03em;
}

/* ---- NOTE ESSAI 14J ---- */
.dk-trial-note {
    margin-top: var(--s34);
    text-align: center;
    padding: var(--s21) var(--s34);
    background: var(--dk-surface);
    border: 1px solid var(--dk-border);
    border-radius: var(--radius-sm);
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
}
.dk-trial-note h4 {
    font-size: var(--t-sm);
    font-weight: 700;
    color: var(--dk-yes);
    margin: 0 0 var(--s8);
}
.dk-trial-note p {
    font-size: var(--t-sm);
    color: var(--dk-text-2);
    line-height: 1.6;
    margin: 0;
}
.dk-trial-note p strong { color: var(--dk-text); }

/* ---- SUR MESURE — surcharges texte blanc + ✓✗ rouge ---- */
.dk-pricing-wrap--sur-mesure {
    --dk-text:   #ffffff;
    --dk-text-2: #ffffff;
    --dk-text-3: #ffffff;
    --dk-yes:    #e02020;
    --dk-no:     #e02020;
}
.dk-pricing-wrap--sur-mesure .dk-pricing-subtitle,
.dk-pricing-wrap--sur-mesure .dk-trial-note p,
.dk-pricing-wrap--sur-mesure .dk-cta-note,
.dk-pricing-wrap--sur-mesure .dk-cta-note a,
.dk-pricing-wrap--sur-mesure .dk-sur-mesure-footer-note,
.dk-pricing-wrap--sur-mesure .dk-sur-mesure-footer-link {
    color: #ffffff;
}
.dk-sur-mesure-footer-note {
    text-align: center;
    margin-top: var(--s21);
    font-size: var(--t-sm);
}
.dk-sur-mesure-footer-link {
    color: var(--dk-c3);
    font-weight: 600;
    text-decoration: none;
}

/* Onglet Sur mesure — blocs Elementor sous la grille (texte gris illisible) */
.digikoder-page-prix #sur-mesure-tab .elementor-widget-text-editor,
.digikoder-page-prix #sur-mesure-tab .elementor-widget-text-editor p,
.digikoder-page-prix #sur-mesure-tab .elementor-widget-heading .elementor-heading-title,
.page-id-16912 #sur-mesure-tab .elementor-widget-text-editor,
.page-id-16912 #sur-mesure-tab .elementor-widget-text-editor p,
.page-id-16912 #sur-mesure-tab .elementor-widget-heading .elementor-heading-title {
    color: #ffffff !important;
}

/* ---- COMPARATIF DIGIKODER VS CONCURRENTS ---- */
.dk-comparatif-wrap {
    --dk-bg: #080f1e;
    --dk-surface-2: #1a2540;
    --dk-border: rgba(255, 255, 255, .07);
    --dk-border-strong: rgba(255, 255, 255, .18);
    --dk-text: #e8edf7;
    --dk-text-2: #8a93a8;
    --dk-c3: #1cb3a3;
    --dk-accent: #4f8ef7;
    --dk-yes: #34d399;
    width: 100%;
    max-width: none;
    margin: var(--s55) 0 var(--s34);
    padding: 0;
    font-family: inherit;
    box-sizing: border-box;
}
.dk-comparatif-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(180deg, var(--dk-surface, #111827), var(--dk-surface-2, #1a2540));
    border: 1px solid var(--dk-border, rgba(255,255,255,.07));
    border-radius: var(--radius, 21px);
    box-shadow:
        0 1px 0 rgba(255,255,255,.04) inset,
        0 30px 80px -40px rgba(0,0,0,.7);
}
.dk-comparatif-title {
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    color: var(--dk-text, #e8edf7);
    margin: 0 0 var(--s8);
}
.dk-comparatif-subtitle {
    text-align: center;
    font-size: 14px;
    color: var(--dk-text-2, #8a93a8);
    margin: 0 0 var(--s34);
}
/* Bulles vers le bas — évite le clipping overflow-x du wrapper */
.dk-comparatif-wrap .dk-tip__bubble {
    top: calc(100% + 8px);
    bottom: auto;
}
.dk-comparatif-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    color: var(--dk-text, #e8edf7);
}
.dk-comparatif-table thead th {
    padding: var(--s13) var(--s21);
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    border-bottom: 2px solid var(--dk-border-strong, rgba(255,255,255,.14));
    background: transparent;
}
.dk-comp-col-label { width: 26%; text-align: left; }
.dk-comp-col-dk { width: 18%; position: relative; }
.dk-comp-col-other { width: 14%; }
.dk-comp-logo--dk {
    display: block;
    font-weight: 800;
    font-size: 15px;
    color: var(--dk-accent, #4f8ef7);
}
.dk-comparatif-table tbody tr {
    border-bottom: 1px solid var(--dk-border, rgba(255,255,255,.07));
}
.dk-comparatif-table tbody tr:hover { background: rgba(255,255,255,.03); }
.dk-comp-label {
    padding: var(--s13) var(--s21) var(--s13) 0;
    font-size: 13px;
    color: var(--dk-text-2, #8a93a8);
    vertical-align: middle;
}
.dk-comp-cell {
    padding: var(--s13) var(--s13);
    text-align: center;
    vertical-align: middle;
    font-size: 13px;
    font-weight: 500;
}
.dk-comp-cell--highlight { background: rgba(79,142,247,.06); }
.dk-comp-cell--yes {
    color: var(--dk-yes, #34d399);
    font-weight: 600;
}
.dk-comp-cell--yes::before {
    content: "✓ ";
    color: var(--dk-yes, #22c55e);
    font-weight: 800;
}
.dk-comp-cell--highlight.dk-comp-cell--yes {
    font-weight: 700;
}
.dk-comp-cell--no  {
    color: #ff4444;
    font-weight: 700;
    font-size: 14px;
}
.dk-comp-cell--no::before {
    content: "✗ ";
    color: #ff4444;
    font-weight: 800;
    font-size: 16px;
}
.dk-comp-cell--mid { color: var(--dk-text-2, #8a93a8); }
.dk-comparatif-footnote {
    margin: var(--s34) auto 0;
    padding-top: var(--s13);
    max-width: 720px;
    text-align: center;
    font-size: 14px;
    color: var(--dk-text-2, #8a93a8);
    line-height: 1.55;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
    .page-id-16912 .site-content,
    .page-id-16912 .entry-content,
    .page-id-16912 #content {
        background-color: var(--dk-bg, #080f1e);
    }

    .dk-pricing-wrap {
        padding: var(--s21) var(--s13) var(--s34);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .dk-pricing-intro {
        padding-left: 0;
        padding-right: 0;
    }

    .dk-pricing-title { font-size: 26px; }

    /* Scroll horizontal sur les colonnes plans — libellés collés à gauche (sticky) */
    .dk-pricing-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: var(--radius-sm);
    }

    .dk-pricing-table {
        min-width: 680px;
        width: auto;
        table-layout: auto;
    }

    .dk-pricing-table th.dk-col-label,
    .dk-pricing-table td.dk-col-label {
        position: sticky;
        left: 0;
        z-index: 3;
        width: 130px;
        min-width: 130px;
        max-width: 140px;
        font-size: 11px;
        padding-left: var(--s13);
        padding-right: var(--s8);
        background: #0e1628;
        box-shadow: 4px 0 10px -4px rgba(0, 0, 0, 0.5);
    }

    .dk-comparatif-table {
        min-width: 760px;
    }

    .dk-pricing-table thead th.dk-col-label {
        z-index: 5;
        background: #0e1628;
    }

    .dk-pricing-table tbody tr.dk-row-feat:nth-of-type(even) td.dk-col-label {
        background: rgb(24 30 47);
    }

    .dk-pricing-table th.dk-col-plan {
        width: 110px;
        min-width: 110px;
    }

    .dk-plan-head { padding: var(--s13) 6px var(--s8); }
    .dk-plan-head__price { font-size: 16px; }
    .dk-plan-head__name { font-size: 9px; }
    .dk-cell { font-size: 11px; }
    .ptsActBtn a, .dk-cta-btn { font-size: 10px; padding: 8px var(--s21); letter-spacing: .04em; }

    .dk-pricing-legal,
    .dk-trial-note {
        padding-left: 0;
        padding-right: 0;
    }
}
@media (max-width: 560px) {
    .dk-pricing-title { font-size: 22px; }
    .dk-pricing-table th.dk-col-label,
    .dk-pricing-table td.dk-col-label { font-size: 10px; }
    .dk-plan-head__price { font-size: 14px; }
}