/* ============================================================
   OpenVista — /store/freelancepro  (groupe « FreelancePro »)
   Feuille de style du template de commande « ov_freelancepro ».

   Derivée de templates/orderforms/ov_cloudvps/css/style.css : même
   langage graphique (marine #0F172A, bleu #024BB7, jaune #FFC107,
   police Abel). Seul le scope a changé :
       #ov-store-cloudvps  ->  #ov-store-freelancepro
   Les règles des sections propres aux VPS (datacenters, systèmes
   d'exploitation) sont conservées telles quelles : inutilisées ici,
   elles évitent de faire diverger les deux feuilles.

   Pourquoi une copie et non un @import : les deux templates sont
   scopés par identifiant, et chaque page ne charge que sa feuille.
   ============================================================ */
/* ============================================================
   OpenVista — /store/cloud-vps branded storefront (ov_cloudvps)
   Scoped under #ov-store-freelancepro so it cannot leak elsewhere.
   Palette = openvista.ma: navy #0F172A, blue #024BB7/#227AFD,
   sky #5EB1FA, CTA yellow #FFC107, ink #212529, muted #6B7280,
   border #E2E8F0, bg soft #F6F8FB.
   ============================================================ */

#ov-store-freelancepro {
    font-family: 'Abel', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: .012em;
}

#ov-store-freelancepro .container { max-width: 1200px; }

#ov-store-freelancepro h1,
#ov-store-freelancepro h2,
#ov-store-freelancepro h3 {
    font-family: 'Abel', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #0F172A;
    letter-spacing: .008em;
}

#ov-store-freelancepro h2 {
    font-size: 2.1rem;
    font-weight: 700;
    margin-bottom: .4rem;
    text-align: center;
}

#ov-store-freelancepro .ov-section { padding: 3.2rem 0 1.2rem; }

#ov-store-freelancepro .ov-sub {
    text-align: center;
    color: #6B7280;
    font-size: 1.12rem;
    max-width: 780px;
    margin: 0 auto 2.2rem;
    line-height: 1.55;
}

/* ---------------- HERO ---------------- */
#ov-store-freelancepro .ov-hero {
    background: linear-gradient(135deg, #0F172A 0%, #024BB7 55%, #5EB1FA 100%);
    border-radius: 1.1rem;
    color: #fff;
    padding: 3.4rem 0 2.6rem;
    margin-top: .4rem;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .14);
}

#ov-store-freelancepro .ov-hero-inner { text-align: center; }

#ov-store-freelancepro .ov-eyebrow {
    display: inline-block;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    border-radius: 999px;
    padding: .3rem 1.1rem;
    font-size: .92rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 1.1rem;
}

#ov-store-freelancepro .ov-hero h1 {
    color: #fff;
    font-size: 2.9rem;
    font-weight: 700;
    margin-bottom: .9rem;
}

#ov-store-freelancepro .ov-lead {
    color: rgba(255, 255, 255, .93);
    font-size: 1.22rem;
    max-width: 860px;
    margin: 0 auto 1.8rem;
    line-height: 1.6;
}

#ov-store-freelancepro .ov-hero-cta,
#ov-store-freelancepro .ov-final-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .8rem;
    margin-bottom: 1.6rem;
}

#ov-store-freelancepro .ov-cta {
    background-color: #FFC107 !important;
    border: 1px solid #FFC107 !important;
    color: #0F172A !important;
    font-weight: 700;
    border-radius: 999px;
    padding: .55rem 1.7rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
    transition: transform .15s ease, background-color .15s ease;
}

#ov-store-freelancepro .ov-cta:hover,
#ov-store-freelancepro .ov-cta:focus {
    background-color: #FFCA2C !important;
    border-color: #FFCA2C !important;
    color: #0F172A !important;
    transform: translateY(-1px);
}

#ov-store-freelancepro .ov-ghost {
    background: transparent !important;
    border: 1.5px solid rgba(255, 255, 255, .75) !important;
    color: #fff !important;
    border-radius: 999px;
    padding: .55rem 1.7rem;
    transition: background-color .15s ease, color .15s ease;
}

#ov-store-freelancepro .ov-ghost:hover {
    background: rgba(255, 255, 255, .14) !important;
    color: #fff !important;
}

#ov-store-freelancepro .ov-chips {
    list-style: none;
    margin: 1.2rem auto 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .55rem;
    max-width: 900px;
}

#ov-store-freelancepro .ov-chips li {
    background: rgba(15, 23, 42, .28);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    border-radius: 999px;
    padding: .35rem 1.05rem;
    font-size: .98rem;
    letter-spacing: .02em;
}

/* ---------------- LOGIN NOTE ---------------- */
#ov-store-freelancepro .ov-login-note {
    background: #EAF2FF;
    border: 1px solid #C9DDFB;
    border-radius: .7rem;
    color: #1B2B4B;
    text-align: center;
    padding: .75rem 1rem;
    margin: 0 auto 1.6rem;
    max-width: 820px;
}

#ov-store-freelancepro .ov-login-note a { color: #024BB7; font-weight: 700; }

/* ---------------- OFFRE CARDS ---------------- */
#ov-store-freelancepro .ov-cards { margin-top: .4rem; }

#ov-store-freelancepro .ov-col { margin-bottom: 1.6rem; }

#ov-store-freelancepro .ov-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: .95rem;
    padding: 1.6rem 1.5rem 1.5rem;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
    transition: box-shadow .18s ease, transform .18s ease;
}

#ov-store-freelancepro .ov-card:hover {
    box-shadow: 0 16px 34px rgba(15, 23, 42, .12);
    transform: translateY(-3px);
}

#ov-store-freelancepro .ov-card-featured {
    border: 2px solid #024BB7;
    background: linear-gradient(180deg, #F6FAFF 0%, #fff 60%);
}

#ov-store-freelancepro .ov-pill {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: #FFC107;
    color: #0F172A;
    font-weight: 700;
    font-size: .86rem;
    letter-spacing: .05em;
    border-radius: 999px;
    padding: .22rem 1rem;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .18);
}

#ov-store-freelancepro .ov-card-name {
    font-size: 1.42rem;
    font-weight: 700;
    color: #0F172A;
    margin: .25rem 0 .35rem;
}

#ov-store-freelancepro .ov-card-name a.ov-card-name-link {
    color: #0F172A;
    text-decoration: none;
}

#ov-store-freelancepro .ov-card-name a.ov-card-name-link:hover {
    color: #024BB7;
    text-decoration: underline;
}

#ov-store-freelancepro .ov-card-pitch {
    color: #6B7280;
    min-height: 3.1em;
    font-size: 1.03rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

#ov-store-freelancepro .ov-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: .1rem;
}

#ov-store-freelancepro .ov-price-amount {
    font-size: 2.1rem;
    font-weight: 700;
    color: #024BB7;
}

#ov-store-freelancepro .ov-price-cycle {
    color: #6B7280;
    font-size: 1rem;
    margin-left: .25rem;
}

#ov-store-freelancepro .ov-price-caption {
    color: #9AA3AF;
    font-size: .88rem;
    margin-bottom: 1rem;
}

#ov-store-freelancepro .ov-specs {
    list-style: none;
    margin: 0 0 1.3rem;
    padding: 0;
    flex: 1 1 auto;
}

#ov-store-freelancepro .ov-specs li {
    position: relative;
    padding-left: 1.55rem;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: .42rem;
    color: #212529;
}

#ov-store-freelancepro .ov-specs li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #227AFD;
    font-weight: 700;
}

#ov-store-freelancepro .ov-specs li:empty { display: none; }

#ov-store-freelancepro .ov-card-cta {
    margin-top: auto;
    text-align: center;
}

#ov-store-freelancepro .ov-card-cta .ov-cta {
    display: block;
    width: 100%;
    border-radius: .6rem;
    padding: .6rem 1rem;
    font-size: 1.06rem;
}

#ov-store-freelancepro .ov-contact-link {
    display: inline-block;
    margin-top: .65rem;
    color: #227AFD;
    font-size: .95rem;
}

#ov-store-freelancepro .ov-contact-link:hover { color: #024BB7; }

#ov-store-freelancepro .ov-footnote {
    text-align: center;
    color: #9AA3AF;
    font-size: .9rem;
    margin: .4rem auto 0;
    max-width: 900px;
}

/* ---------------- INCLUS ---------------- */
#ov-store-freelancepro .ov-included {
    background: #F6F8FB;
    border-radius: 1rem;
    padding: 3rem 0 2.4rem;
}

#ov-store-freelancepro .ov-included-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .85rem;
    max-width: 1060px;
    margin: 0 auto;
}

#ov-store-freelancepro .ov-included-item {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: .8rem;
    padding: .8rem .95rem;
    font-size: 1rem;
    line-height: 1.35;
    color: #1B2B4B;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}

#ov-store-freelancepro .ov-check {
    color: #024BB7;
    font-weight: 700;
    margin-right: .45rem;
}

/* ---------------- STATS / DATACENTERS ---------------- */
#ov-store-freelancepro .ov-stats { margin-bottom: 1.4rem; }

#ov-store-freelancepro .ov-stat {
    text-align: center;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-top: 4px solid #024BB7;
    border-radius: .9rem;
    padding: 1.5rem 1.2rem;
    height: 100%;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
}

#ov-store-freelancepro .ov-stat-num {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: #024BB7;
    margin-bottom: .3rem;
}

#ov-store-freelancepro .ov-stat-txt {
    color: #6B7280;
    font-size: 1rem;
    line-height: 1.5;
}

#ov-store-freelancepro .ov-dc { margin-top: .6rem; }

#ov-store-freelancepro .ov-dc-card {
    background: linear-gradient(135deg, #0F172A 0%, #1B3A6B 100%);
    color: #fff;
    border-radius: 1rem;
    padding: 1.7rem 1.8rem;
    height: 100%;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .16);
}

#ov-store-freelancepro .ov-dc-card h3 {
    color: #fff;
    font-size: 1.35rem;
    margin-bottom: .45rem;
}

#ov-store-freelancepro .ov-dc-card h3::before {
    content: "📍";
    margin-right: .45rem;
}

#ov-store-freelancepro .ov-dc-card p {
    color: rgba(255, 255, 255, .88);
    line-height: 1.55;
    margin: 0;
}

/* ---------------- OS ---------------- */
#ov-store-freelancepro .ov-os-chips {
    list-style: none;
    margin: 0 auto 1.1rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    max-width: 980px;
}

#ov-store-freelancepro .ov-os-chips li {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 999px;
    color: #1B2B4B;
    padding: .45rem 1.2rem;
    font-size: 1rem;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .05);
}

#ov-store-freelancepro .ov-os-note {
    text-align: center;
    color: #6B7280;
    max-width: 800px;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.55;
}

/* ---------------- FAQ ---------------- */
#ov-store-freelancepro .ov-faq { background: #fff; border-radius: 1rem; }

#ov-store-freelancepro .ov-faq-list {
    max-width: 860px;
    margin: .4rem auto 0;
}

#ov-store-freelancepro details {
    border: 1px solid #E2E8F0;
    border-radius: .7rem;
    background: #F6F8FB;
    padding: 0 1.2rem;
    margin-bottom: .7rem;
}

#ov-store-freelancepro details summary {
    cursor: pointer;
    font-weight: 700;
    color: #0F172A;
    font-size: 1.08rem;
    padding: .95rem 0;
    list-style: none;
    position: relative;
}

#ov-store-freelancepro details summary::-webkit-details-marker { display: none; }

#ov-store-freelancepro details summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #024BB7;
    font-size: 1.35rem;
    font-weight: 700;
}

#ov-store-freelancepro details[open] summary::after { content: "–"; }

#ov-store-freelancepro details p {
    color: #4B5563;
    line-height: 1.6;
    margin: 0;
    padding: 0 1.6rem 1.1rem 0;
}

#ov-store-freelancepro details a { color: #024BB7; font-weight: 700; }

/* ---------------- CTA FINAL ---------------- */
#ov-store-freelancepro .ov-final {
    background: linear-gradient(135deg, #0F172A 0%, #024BB7 60%, #227AFD 100%);
    border-radius: 1.1rem;
    color: #fff;
    text-align: center;
    padding: 2.6rem 1.6rem;
    margin-bottom: 2.6rem;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .14);
}

#ov-store-freelancepro .ov-final h2 {
    color: #fff;
    margin-bottom: .5rem;
}

#ov-store-freelancepro .ov-final p {
    color: rgba(255, 255, 255, .9);
    font-size: 1.12rem;
    max-width: 720px;
    margin: 0 auto 1.6rem;
    line-height: 1.6;
}

#ov-store-freelancepro .ov-final-cta { margin-bottom: 0; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 991.98px) {
    #ov-store-freelancepro .ov-included-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
    #ov-store-freelancepro .ov-hero { padding: 2.4rem 0 2rem; border-radius: .9rem; }
    #ov-store-freelancepro .ov-hero h1 { font-size: 2.15rem; }
    #ov-store-freelancepro .ov-lead { font-size: 1.1rem; }
    #ov-store-freelancepro .ov-section { padding: 2.4rem 0 .6rem; }
    #ov-store-freelancepro .ov-card-pitch { min-height: 0; }
}

@media (max-width: 575.98px) {
    #ov-store-freelancepro .ov-included-grid { grid-template-columns: 1fr; }
}
/* ============================================================
   Open Vista — consolidation 2026-09-14
   Cartes des offres Open Vista (bundles) affichées sur /store/cloud-vps
   à côté des offres Cloud VPS. Tokens : navy #0F172A, bleu #024BB7,
   CTA jaune #FFC107 (charte openvista.ma).
   ============================================================ */

.ov-card-offer {
    position: relative;
    border-top: 3px solid #024BB7;
}

.ov-card-offer .ov-card-name,
.ov-card-offer .ov-card-name-link {
    color: #0F172A;
    font-weight: 600;
}

.ov-pill-offer {
    background: #024BB7;
    color: #fff;
    font-weight: 600;
    letter-spacing: .4px;
}

.ov-card-offer .ov-price-amount {
    color: #024BB7;
    font-weight: 700;
}

.ov-card-offer .ov-price-caption {
    color: #5A6B85;
}

.ov-card-offer .ov-card-cta .ov-cta {
    background: #FFC107;
    border-color: #FFC107;
    color: #1A1A1A;
    font-weight: 600;
}

.ov-card-offer .ov-card-cta .ov-cta:hover {
    background: #E5AD06;
    border-color: #E5AD06;
    color: #111;
}

.ov-card-offer .ov-contact-link {
    color: #024BB7;
    text-decoration: none;
    font-weight: 500;
}

.ov-card-offer .ov-contact-link:hover {
    text-decoration: underline;
    color: #024BB7;
}

/* Séparation visuelle entre les VPS et les offres Open Vista */
.ov-card-offer::after {
    content: "";
    display: block;
}
/* ============================================================
   Open Vista — classement par catégories + description globale
   Page /store/cloud-vps — 2026-09-14
   ============================================================ */

/* ---- Description globale du catalogue ---- */
#ov-store-freelancepro .ov-global-intro {
    max-width: 900px;
    margin: 0 auto 2.4rem;
    padding: 1.7rem 1.9rem;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-left: 4px solid #024BB7;
    border-radius: 16px;
    text-align: left;
}
#ov-store-freelancepro .ov-global-intro p {
    color: #334155;
    font-size: 1.02rem;
    line-height: 1.65;
    margin-bottom: .9rem;
}
#ov-store-freelancepro .ov-global-intro p:last-of-type { margin-bottom: 1rem; }
#ov-store-freelancepro .ov-global-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.4rem;
}
#ov-store-freelancepro .ov-global-points li {
    position: relative;
    padding-left: 1.35rem;
    color: #0F172A;
    font-size: .95rem;
    font-weight: 500;
}
#ov-store-freelancepro .ov-global-points li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #024BB7;
    font-weight: 700;
}

/* ---- Catégories ---- */
#ov-store-freelancepro .ov-category {
    margin-bottom: 2.6rem;
    padding-top: 1.6rem;
    border-top: 1px solid #E2E8F0;
}
#ov-store-freelancepro .ov-category:first-of-type {
    border-top: 0;
    padding-top: 0;
}
#ov-store-freelancepro .ov-category-head {
    margin-bottom: 1.4rem;
}
#ov-store-freelancepro .ov-category-title {
    display: inline-block;
    color: #0F172A;
    font-size: 1.28rem;
    font-weight: 600;
    margin: 0 0 .45rem;
    padding-bottom: .35rem;
    border-bottom: 3px solid #FFC107;
}
#ov-store-freelancepro .ov-category-desc {
    color: #64748B;
    font-size: .99rem;
    line-height: 1.6;
    max-width: 820px;
    margin: 0;
}
/* Le titre des cartes passe en h4 dans les catégories */
#ov-store-freelancepro .ov-category .ov-card-name {
    font-size: 1.06rem;
    margin-bottom: .4rem;
}

@media (max-width: 991.98px) {
    #ov-store-freelancepro .ov-global-intro { padding: 1.3rem 1.2rem; }
    #ov-store-freelancepro .ov-global-points { flex-direction: column; gap: .35rem; }
    #ov-store-freelancepro .ov-category { margin-bottom: 1.8rem; }
}

/* ---------------------------------------------------- Carte d'un pack (bundle)
   Un pack ne contient qu'un seul produit : sa carte doit donc se distinguer
   au premier regard de celle de l'offre correspondante. D'ou la bordure
   tiretee, la pastille sombre et le bouton bleu, la ou l'offre porte une
   pastille bleue et un bouton jaune. */
.ov-card-bundle {
    border: 1px dashed #024BB7;
}
.ov-pill-bundle {
    background: #0F172A;
    color: #fff;
    font-weight: 600;
    letter-spacing: .4px;
}
.ov-card-bundle .ov-price-amount {
    color: #0F172A;
    font-weight: 700;
}
.ov-card-bundle .ov-price-caption {
    color: #5A6B85;
}
.ov-card-bundle .ov-card-cta .ov-cta {
    background: #024BB7;
    border-color: #024BB7;
    color: #fff;
    font-weight: 600;
}
.ov-card-bundle .ov-card-cta .ov-cta:hover {
    background: #013a8f;
    border-color: #013a8f;
    color: #fff;
}