/* ============================================================
   HireKazi — Page Tarifs (/tarifs), layout public
   Fond clair ; offre de lancement et cartes de formules pleines
   (bleu marine, formule mise en avant en vert) ; section tri de CV.
   ============================================================ */

.l-pricing {
    --l-dark:         #0f263d;
    --l-primary:      #003A60;
    --l-accent:       #00C16E;
    --l-accent-light: #2ECC71;
    --l-gold:         #F39C12;
    --l-white:        #FFFFFF;
    --l-text-dark:    #0F1F2D;
    --l-text-muted:   #637D93;
    --l-font-display: 'Archivo', system-ui, sans-serif;
    --l-font-body:    'Archivo', system-ui, sans-serif;
    --l-ease:         cubic-bezier(.4, 0, .2, 1);
    --page-gutter:    32px;
}
@media (max-width: 700px) { .l-pricing { --page-gutter: 20px; } }

/* Pleine largeur : la page tarifs s'affranchit de la colonne de .public-main */
.public-main:has(.l-pricing) { max-width: none; padding: 0; }

.l-pricing__container { max-width: 1280px; margin: 0 auto; padding: 0 var(--page-gutter); }
.l-pricing__container--narrow { max-width: 800px; }
.l-pricing__plans { background: #fff; padding: 72px 0 64px; border-bottom: 1px solid #E2E8EF; }

/* ── En-tête (mêmes styles que les sections de l'accueil) ── */
.l-pricing .l-section__header { text-align: center; max-width: 680px; margin: 0 auto 40px; }
.l-pricing .l-section__eyebrow { margin-bottom: 18px; }
.l-pricing .l-section__title { font-family: var(--l-font-display); font-size: clamp(1.9rem, 3.2vw, 2.7rem);
    font-weight: 800; line-height: 1.18; letter-spacing: -.025em; color: var(--l-primary); margin: 0 0 16px; }
.l-pricing .l-section__subtitle { font-size: 17px; line-height: 1.75; color: var(--l-text-muted); margin: 0; }
.l-pricing .l-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; padding: 5px 14px; border-radius: 100px; border: 1px solid; }
.l-pricing .l-tag--gold { background: rgba(243,156,18,.1); color: var(--l-gold); border-color: rgba(243,156,18,.2); }
.l-tag--sort { background: rgba(0,58,96,.06); color: var(--l-primary); border-color: rgba(0,58,96,.18); }

/* ── Boutons ── */
.l-pricing .l-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 8px;
    font-family: var(--l-font-body); font-size: 13px; font-weight: 600; cursor: pointer; border: 2px solid transparent;
    transition: all .2s var(--l-ease); text-decoration: none; white-space: nowrap; }
.l-pricing .l-btn--primary { background: var(--l-accent); color: #fff; border-color: var(--l-accent); }
.l-pricing .l-btn--primary:hover { background: #00A85F; border-color: #00A85F; color: #fff; }
/* Bouton secondaire, sur fond bleu marine (plan gratuit) */
.l-pricing .l-btn--ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.3); }
.l-pricing .l-btn--ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); }

/* ── Offre de lancement : encadré bleu, compteur et bouton verts pour signaler « offert » ── */
.l-launch-box {
    display: flex; gap: 32px; align-items: center; flex-wrap: wrap;
    background: var(--l-primary); border-radius: 8px; padding: 32px 36px; margin: 0 auto 20px; max-width: 960px;
}
.l-launch-box__main { flex: 1 1 380px; }
.l-launch-box__title {
    display: flex; align-items: center; gap: 10px; font-family: var(--l-font-title, inherit);
    font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 10px;
}
.l-launch-box__title i { color: var(--l-accent); font-size: 22px; }
.l-launch-box__text { font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.92); margin: 0 0 8px; padding-left: 0; }
.l-launch-box__text strong { color: #fff; }
.l-launch-box__side {
    flex: 0 0 auto; text-align: center; min-width: 180px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 18px 22px;
}
.l-launch-box__count { font-size: 52px; font-weight: 800; line-height: 1; color: var(--l-accent); }
.l-launch-box__count-label {
    font-size: 12px; text-transform: uppercase; letter-spacing: .06em; line-height: 1.3;
    color: rgba(255,255,255,.85); margin: 6px 0 16px;
}
.l-launch-box__cta { justify-content: center; width: 100%; }
.l-launch-box .l-btn--primary:hover { background: var(--l-accent); border-color: var(--l-accent); }
.l-launch-note {
    text-align: center; font-size: 13px; line-height: 1.6; color: var(--l-text-muted);
    max-width: 620px; margin: 0 auto 36px; padding-left: 0;
}

/* ── Sélecteur de période ── */
.l-period-toggle {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    background: #fff; border: 1px solid #E2E8EF; padding: 6px; border-radius: 100px;
    width: fit-content; margin: 0 auto 40px;
}
.l-period-btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 22px; border-radius: 100px;
    font-family: var(--l-font-body); font-size: 14px; font-weight: 600; cursor: pointer; border: none;
    background: transparent; color: var(--l-text-muted); transition: all .2s; white-space: nowrap;
}
.l-period-btn:hover { color: var(--l-primary); }
.l-period-btn.active { background: var(--l-primary); color: #fff; }
.l-period-badge {
    font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 2px 7px; border-radius: 100px;
    background: var(--l-accent); color: #fff;
}
.l-period-msg {
    text-align: center; font-size: 13px; font-weight: 600; color: #00804A;
    background: #EAF9F1; border: 1px solid #CDEFDC; padding: 10px 24px; border-radius: 100px;
    width: fit-content; margin: -20px auto 32px;
}
.l-price-block--hidden { display: none; }

/* ── Cartes de formules : bleu marine, formule mise en avant en vert (texte blanc) ── */
.l-plans__grid {
    display: grid; grid-template-columns: repeat(var(--plans-count, 4), minmax(0, 1fr));
    gap: 16px; width: 100%; margin: 0 auto 32px;
}
.l-plan-card { background: var(--l-primary); border-radius: 8px; padding: 24px 20px; min-width: 0; transition: all .25s; }
.l-plan-card--featured { background: var(--l-accent); }
.l-plan-card__badge { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: rgba(255,255,255,.75); margin-bottom: 16px; }
.l-plan-card__badge i { font-size: 12px; }
.l-plan-card__badge--muted { background: rgba(255,255,255,.1); padding: 3px 8px; border-radius: 4px; width: fit-content; }
.l-plan-card__name { font-family: var(--l-font-display); font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.l-plan-card__price { font-family: var(--l-font-display); font-size: 2.4rem; font-weight: 900; line-height: 1; color: #fff; margin-bottom: 6px; }
.l-plan-card__period { font-size: 12px; color: rgba(255,255,255,.6); margin-bottom: 24px; }
.l-price-strike { font-size: 15px; color: rgba(255,255,255,.45); text-decoration: line-through; margin-bottom: 2px; }
.l-plan-card__features { list-style: none; margin: 0 0 28px; padding-left: 0; display: flex; flex-direction: column; gap: 10px; }
.l-plan-card__feature { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: rgba(255,255,255,.88); }
.l-plan-card__feature i { flex-shrink: 0; color: var(--l-accent-light); margin-top: 2px; font-size: 14px; }
.l-plan-card .l-btn { display: flex; justify-content: center; }

/* Pastilles des cartes */
.l-founder-badge {
    display: inline-flex; align-items: center; gap: 5px;
    /* Doit tenir sur UNE ligne dans une carte étroite (grille 4 colonnes) */
    white-space: nowrap; font-size: 10.5px; font-weight: 700; letter-spacing: -.1px;
    padding: 4px 10px; border-radius: 100px; background: rgba(243,156,18,.18); color: var(--l-gold); margin-bottom: 6px;
}
.l-founder-badge i { font-size: 11px; flex-shrink: 0; }
.l-save-badge {
    display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 100px;
    background: rgba(46,204,113,.18); color: #6FE3AE; margin-top: 6px; margin-bottom: 4px;
}
.l-plan-card__offered {
    display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 0;
    padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 700;
    background: rgba(0,193,110,.2); color: #6FE3AE; border: 1px solid rgba(0,193,110,.45);
}
.l-plan-card__launch-note { font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,.6); text-align: center; margin-top: 10px; }

/* Variante verte (formule mise en avant) */
.l-plan-card--featured .l-plan-card__badge,
.l-plan-card--featured .l-plan-card__period,
.l-plan-card--featured .l-plan-card__feature,
.l-plan-card--featured .l-plan-card__feature i { color: #fff; }
.l-plan-card--featured .l-price-strike { color: rgba(255,255,255,.65); }
.l-plan-card--featured .l-founder-badge,
.l-plan-card--featured .l-save-badge { background: rgba(255,255,255,.22); color: #fff; }
.l-plan-card--featured .l-plan-card__offered { background: rgba(255,255,255,.2); color: #fff; border-color: rgba(255,255,255,.5); }
.l-plan-card--featured .l-btn--primary,
.l-plan-card--featured .l-btn--primary:hover { background: #fff; border-color: #fff; color: #00804A; }

.l-plans__secure {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    text-align: center; font-size: 13px; color: var(--l-text-muted);
}

/* ── Section tri de CV ── */
.l-pricing__sort { background: #F5F7FA; padding: 72px 0; border-bottom: 1px solid #E2E8EF; }
.l-pricing__sort-head { text-align: center; max-width: 680px; margin: 0 auto 32px; }
.l-pricing__sort-head p { font-size: 16px; line-height: 1.65; color: var(--l-text-muted); margin: 0; }
.l-pricing__sort-title { font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; line-height: 1.2; color: var(--l-primary); margin: 16px 0 12px; }
.l-sort-offer {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    max-width: 960px; margin: 0 auto 32px; padding: 20px 24px; border: 1px solid #BFE8D0; border-radius: 8px; background: #EAF9F1;
}
.l-sort-offer strong { display: block; font-size: 18px; color: var(--l-primary); }
.l-sort-offer span { font-size: 14px; color: var(--l-text-muted); }
.l-sort-label { text-align: center; font-size: 14px; font-weight: 700; color: var(--l-primary); margin: 0 0 14px; }
.l-sort-soon { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 4px; background: #FEF4E2; color: #B26B00; font-size: 11px; font-weight: 700; }
.l-sort-packs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; max-width: 960px; margin: 0 auto; }
.l-sort-pack { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid #D3E2EF; border-radius: 8px; background: #EEF4FA; text-align: center; }
.l-sort-pack--featured { border: 2px solid var(--l-accent); background: #E9F8F0; }
.l-sort-pack__name { font-size: 14px; font-weight: 700; color: var(--l-text-muted); }
.l-sort-pack__price { font-size: 20px; font-weight: 800; color: var(--l-primary); }
.l-sort-pack__unit { font-size: 12px; color: var(--l-text-muted); }
.l-sort-included { display: flex; gap: 10px; align-items: flex-start; max-width: 960px; margin: 24px auto 0; font-size: 14px; line-height: 1.6; color: var(--l-text-muted); }
.l-sort-included i { color: var(--l-primary); margin-top: 3px; }
.l-sort-included b { color: var(--l-primary); }

/* ── FAQ tarifs (styles .acv-faq de public.css) ── */
.l-pricing__faq { padding: 64px 0 80px; }
.l-pricing__faq-title { font-size: 28px; font-weight: 800; color: var(--l-primary); text-align: center; margin: 0 0 28px; }
.l-pricing__candidates { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
    margin: 32px 0 0; padding-top: 24px; border-top: 1px solid #E2E8EF; font-size: 15px; color: var(--l-text-muted); text-align: center; }
.l-pricing__candidates i { color: var(--l-accent); }
.l-pricing__candidates a { color: var(--l-primary); font-weight: 600; }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .l-plans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .l-plan-card__price { font-size: 2.8rem; }
}
@media (max-width: 900px) {
    .l-sort-packs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .l-launch-box { gap: 20px; }
    .l-launch-box__side { min-width: 100%; }
    .l-launch-box__count { font-size: 42px; }
    /* Sélecteur pleine largeur, boutons équirépartis (évite le débordement horizontal) */
    .l-period-toggle { width: 100%; max-width: 100%; box-sizing: border-box; gap: 4px; padding: 5px; }
    .l-period-btn { flex: 1 1 0; justify-content: center; padding: 10px 6px; font-size: 13px; gap: 4px; }
    .l-period-badge { font-size: 9px; padding: 2px 5px; }
}
@media (max-width: 600px) {
    /* Formules en défilement horizontal : la carte suivante dépasse pour le signaler */
    .l-plans__grid {
        grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%;
        overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
        margin-left: -20px; margin-right: -20px; padding: 0 20px 4px; scroll-padding: 0 20px; width: auto;
    }
    .l-plans__grid::-webkit-scrollbar { display: none; }
    .l-plan-card { scroll-snap-align: start; }
    .l-launch-box { padding: 24px 20px; }
    .l-launch-box__title { font-size: 20px; }
    .l-pricing__sort { padding: 48px 0; }
    .l-sort-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .l-sort-offer .l-btn { width: 100%; justify-content: center; }
}