/* ============================================================================
   CHARTE COLORFULL — Design system façade publique (AfricaPrintZone)
   Inspiré du thème SaaS premium de sendpromax (tokens, cartes arrondies,
   ombres douces, hero dégradé, CTA pilules) appliqué à la palette :
     Bleu Afrique  #0757D5  (principal)    Cyan  #00AEEF  (technologie)
     Bleu profond  #073B8F  (institution)  Teal accent  #04A8CD  (impression)
     Magenta       #E91E63  (impression)   Noir  #101828  (texte)
     Gris clair    #F2F4F7  (interfaces)
   Chargé APRÈS style.css → tous les segments ci-dessous ont priorité.
   ============================================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  --cf-africa:   #0757D5;
  --cf-africa-2: #073B8F;
  --cf-africa-3: #02248A;
  --cf-tech:     #00AEEF;
  --cf-magenta:  #E91E63;
  --cf-print:    #04A8CD;
  --cf-ink:      #101828;
  --cf-mist:     #F2F4F7;
  --cf-surface:  #FFFFFF;
  --cf-border:   #E4E7EC;
  --cf-text:     #101828;
  --cf-muted:    #667085;
  --cf-soft:     #EFF6FF;
  --cf-shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --cf-shadow:    0 6px 18px rgba(7,87,213,.08), 0 2px 6px rgba(16,24,40,.05);
  --cf-shadow-lg: 0 18px 40px rgba(7,87,213,.16);
  --cf-radius:    14px;
  --cf-radius-lg: 20px;
  --cf-font: 'Open Sans', -apple-system, system-ui, Segoe UI, Roboto, sans-serif;
  --cf-font-display: 'Raleway', 'Open Sans', sans-serif;
}

/* ---------- 2. Base ---------- */
body { font-family: var(--cf-font); font-size: 16px; color: var(--cf-text); background: var(--cf-mist); line-height: 1.6; }
h1, h2, h3, h4, h5, h6 { font-family: var(--cf-font-display); color: var(--cf-ink); }
a { color: var(--cf-africa); text-decoration: none; }
a:hover { color: var(--cf-africa-2); text-decoration: none; }
::selection { background: rgba(7,87,213,.18); }

/* ---------- 3. Boutons premium ---------- */
.btn { border-radius: 999px; font-weight: 600; }
.btn-primary { background: var(--cf-africa); border-color: var(--cf-africa); box-shadow: 0 6px 14px rgba(7,87,213,.22); }
.btn-primary:hover { background: var(--cf-africa-2); border-color: var(--cf-africa-2); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(7,87,213,.28); }
.btn-warning { background: var(--cf-print); border-color: var(--cf-print); color: #fff; font-weight: 700; box-shadow: 0 6px 14px rgba(4,168,205,.25); }
.btn-warning:hover { background: #028BAE; border-color: #028BAE; color: #fff; transform: translateY(-1px); }
.btn-neon { background: var(--cf-magenta); border-color: var(--cf-magenta); }
.btn-neon:hover { background: #d01652; border-color: #d01652; transform: translateY(-1px); }
.btn-default { background: #fff; border-color: var(--cf-border); color: var(--cf-ink); }
.btn-default:hover { background: var(--cf-mist); color: var(--cf-africa-2); }
.btn-lg { padding: .85rem 1.9rem; border-radius: 999px; }

/* ---------- 4. Champs ---------- */
.form-control { border-radius: 10px; border-color: var(--cf-border); font-size: .95rem; padding: .55rem .9rem; box-shadow: none; }
.form-control:focus { border-color: var(--cf-africa); box-shadow: 0 0 0 3px rgba(7,87,213,.14); }
select.form-control { cursor: pointer; }

/* ---------- 5. Conteneurs / sections ---------- */
.container { max-width: 1180px; }
.page-content { background: transparent; }

/* Section heading premium (réutilisé par les blocs home) */
.cf-section { padding: 3.2rem 0; }
.cf-section--alt { background: #fff; }
.cf-kicker {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--cf-soft); color: var(--cf-africa);
  font-size: .74rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; padding: .32rem .85rem; border-radius: 999px;
  margin-bottom: .8rem;
}
.cf-title {
  font-family: var(--cf-font-display); font-weight: 800; font-size: 1.9rem;
  line-height: 1.18; color: var(--cf-ink); margin: 0 0 .5rem;
}
.cf-title span { color: var(--cf-africa); }
.cf-subtitle { color: var(--cf-muted); font-size: 1.02rem; max-width: 620px; }
.text-center .cf-subtitle { margin-left: auto; margin-right: auto; }

/* ---------- 6. Header premium ---------- */
#header { background: #fff; box-shadow: 0 6px 24px rgba(16,24,40,.07); }
.header-top-bar { background: #fff !important; border-bottom: 1px solid var(--cf-border) !important; }
.header-top-bar .header-logo { display: flex; align-items: center; }
.header-login a { color: var(--cf-ink) !important; font-weight: 600; }
.header-login a:hover { color: var(--cf-africa) !important; }

.btn-premium {
  background: linear-gradient(135deg, #1E90FF 0%, #0757D5 45%, #00AEEF 100%) !important;
  color: #fff !important; border: 0 !important;
  box-shadow: 0 6px 18px rgba(0,174,239,.45) !important;
  padding: .55rem 1.25rem !important;
  font-weight: 800 !important;
  letter-spacing: .2px;
}
.btn-premium:hover,
.btn-premium:focus {
  background: linear-gradient(135deg, #1E90FF 0%, #0757D5 45%, #00AEEF 100%) !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: 0 6px 18px rgba(0,174,239,.45) !important;
  transform: none !important;
}

/* Bande de recherche */
.header-search { background: linear-gradient(135deg, var(--cf-africa-3) 0%, var(--cf-africa-2) 55%, var(--cf-africa) 100%) !important; position: relative; }
.header-search::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 120% at 15% 0%, rgba(0,174,239,.25), transparent 60%),
    radial-gradient(50% 110% at 90% 100%, rgba(4,168,205,.18), transparent 60%);
}
.header-search-bar { position: relative; z-index: 1; }
.search-value { border-radius: 999px !important; box-shadow: 0 10px 30px rgba(2,36,138,.35) !important; }
.search-btn, .toggle-btn { border-radius: 999px !important; }
.search-btn { background: var(--cf-print) !important; color: #fff !important; }
.search-btn:hover { background: #028BAE !important; }
.toggle-btn { background: rgba(255,255,255,.16) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.28) !important; }
.keywords .form-control { border-radius: 999px !important; }
.kw-suggestions { border-radius: 0 0 14px 14px !important; border-color: var(--cf-border) !important; }
.kw-suggestions li:hover { background: var(--cf-soft) !important; }
.kw-suggestions .kw-type { background: var(--cf-africa) !important; color: #fff !important; border-radius: 999px !important; }

/* Portail marketing dans la bande */
.search-toggle .apz-portal { color: #fff; }
.apz-portal-title { color: var(--cf-print) !important; }
.apz-portal-link:hover { color: var(--cf-print) !important; }
.apz-portal-tile { border-radius: 12px !important; border-color: rgba(255,255,255,.16) !important; }
.apz-portal-tile:hover { border-color: var(--cf-print) !important; }
.apz-portal-ic { color: var(--cf-print) !important; }
.apz-portal-t-title { color: var(--cf-print) !important; }
.apz-portal-cta { background: linear-gradient(135deg, #04A8CD, #028BAE) !important; color: #fff !important; }
.apz-portal-badge { border-color: rgba(4,168,205,.5) !important; color: var(--cf-print) !important; }

/* ---------- 7. Nav principale ---------- */
.header-nav-bar { background: #fff !important; border-bottom: 1px solid var(--cf-border) !important; box-shadow: none !important; }
.primary-nav > li > a { color: var(--cf-ink) !important; font-weight: 600; }
.primary-nav > li > a:hover { color: var(--cf-africa) !important; }
.primary-nav > li.active > a { color: var(--cf-africa) !important; border-bottom-color: var(--cf-africa) !important; }
.primary-nav > li.apz-more > ul { border-radius: 12px !important; box-shadow: 0 12px 32px rgba(16,24,40,.12) !important; border: 1px solid var(--cf-border) !important; }
.primary-nav > li.apz-more > ul > li > a:hover { background: var(--cf-soft) !important; color: var(--cf-africa) !important; }

/* ---------- 8. Hero premium ---------- */
.hero-section {
  background: linear-gradient(135deg, var(--cf-africa-3) 0%, var(--cf-africa-2) 45%, var(--cf-africa) 80%, var(--cf-tech) 130%) !important;
  height: 460px !important;
  position: relative;
}
.hero-section::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 100% at 85% 10%, rgba(4,168,205,.22), transparent 55%),
    radial-gradient(50% 90% at 10% 90%, rgba(0,174,239,.28), transparent 60%);
}
.hero-overlay { position: relative; z-index: 2; }
.hero-title { font-size: 2.6rem !important; font-weight: 800 !important; text-transform: none !important; letter-spacing: -.01em; text-shadow: 0 2px 22px rgba(2,36,138,.35); }
.hero-title strong { color: var(--cf-print) !important; font-weight: 900; }
.hero-subtitle { color: #DCE7FF !important; font-size: 1.12rem !important; max-width: 720px; }
@media (max-width: 768px) {
  .hero-section { height: 300px !important; }
  .hero-title { font-size: 1.7rem !important; }
}

/* ---------- 9. Cartes prestataires (home + recherche) ---------- */
#page-content { background: var(--cf-mist); }
.products-pagination-top, .products-pagination-bottom { margin: .4rem 0 1.2rem; }
.product-details-list .tab-pane.active { padding-top: .4rem; }
.product-details-list .tab-pane h2 { font-family: var(--cf-font-display); font-weight: 800; color: var(--cf-ink); font-size: 1.6rem; }
.product-details-list .tab-pane h2 .comments {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cf-africa); color: #fff; font-size: .82rem; font-weight: 700;
  min-width: 30px; height: 30px; padding: 0 .5rem; border-radius: 999px; margin-left: .5rem; vertical-align: middle;
}
.single-product {
  background: #fff !important; border: 1px solid var(--cf-border) !important;
  border-radius: var(--cf-radius) !important; box-shadow: var(--cf-shadow-sm);
  overflow: hidden; transition: transform .18s ease, box-shadow .18s ease;
}
.single-product:hover { transform: translateY(-4px); box-shadow: var(--cf-shadow); }
.single-product figure { margin: 0; position: relative; }
.single-product figure > img { width: 100%; height: 253px; object-fit: cover; display: block; }
.single-product figure img.apz-img-fallback { object-fit: contain; padding: 1.6rem 1rem; background: #fff; }
.single-product figure::after {
  content: "AFRICA\A PRINT\A ZONE";
  white-space: pre-line;
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Raleway', sans-serif; font-weight: 800;
  font-size: 1.55rem; line-height: 1.25; text-align: center;
  color: rgba(2,36,138,.13);
  text-shadow: 0 1px 2px rgba(255,255,255,.6);
}
.single-product h4 { padding: .85rem 1rem .15rem; margin: 0; }
.single-product h4 a { color: var(--cf-ink); font-weight: 700; }
.single-product h4 a:hover { color: var(--cf-africa); }
.single-product h5 { padding: 0 1rem; margin: 0; font-size: .85rem; }
.single-product h5 a { color: var(--cf-tech); font-weight: 600; }
.single-product h5 a:hover { color: var(--cf-africa); }
.single-product > p { padding: 0 1rem; color: var(--cf-muted); font-size: .88rem; }

/* Bandeau rating + figcaption sur image */
.single-product figure .rating { display: none; }
.single-product figure .rating p { color: #fff !important; font-size: .72rem; font-weight: 700; margin: .05rem 0 0; }
.single-product figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, transparent, rgba(2,36,138,.85));
  padding: 1.6rem 1rem .6rem; display: flex; justify-content: space-between; align-items: flex-end;
}
.single-product figure figcaption .bookmark a { color: #fff; font-size: .8rem; font-weight: 600; }
.single-product figure figcaption .bookmark .fa { color: var(--cf-print); }
.single-product figure figcaption .read-more a { color: var(--cf-print); font-weight: 700; font-size: .82rem; }

/* Sur les cartes « Prestataires en vedette » (accueil) : le dégradé de survol du
   figcaption était jaune (style.css) → passage en teal, cohérent avec le thème. */
.featured-listing .single-product figure figcaption {
  background: linear-gradient(180deg, transparent, rgba(4, 168, 205, .9));
}

/* Actions de carte */
.apz-card-actions { padding: .35rem 1rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.apz-card-actions .read-more { font-size: .85rem; font-weight: 700; color: var(--cf-africa); }
.apz-card-actions .read-more:hover { color: var(--cf-tech); }

/* ---------- 10. Featured / features ---------- */
.featured-listing { background: #fff; padding: 2.6rem 0; }
.featured-listing .heading, .page-content .heading { text-align: center; margin-bottom: 1.6rem; }
.featured-listing .heading h2, .page-content .heading h2 { font-weight: 800; color: var(--cf-ink); }
.featured-listing .heading p, .page-content .heading p { color: var(--cf-muted); }

/* ---------- 11. CTA + bandes promotionnelles ---------- */
.cta-banner { background: linear-gradient(135deg, var(--cf-africa) 0%, var(--cf-africa-2) 55%, var(--cf-africa-3) 100%) !important; position: relative; overflow: hidden; }
.cta-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 120% at 20% 0%, rgba(0,174,239,.3), transparent 60%), radial-gradient(50% 100% at 85% 100%, rgba(4,168,205,.2), transparent 55%);
}
.cta-banner > .container { position: relative; z-index: 1; }
.cta-banner h1 { color: #fff !important; font-weight: 800 !important; }
.cta-banner h1 strong { color: var(--cf-print) !important; text-decoration: none !important; }
.cta-banner h2 { color: #DCE7FF !important; }
.cta-main-btn { background: var(--cf-print) !important; color: #fff !important; box-shadow: 0 8px 22px rgba(2,36,138,.35) !important; }
.cta-main-btn:hover { background: #fff !important; color: var(--cf-africa) !important; transform: translateY(-2px); }

/* App mobile */
#africaprintzone-download { position: relative; }
#africaprintzone-download::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 90% at 80% 15%, rgba(0,174,239,.25), transparent 55%);
}

/* Pays couverts */
.apz-countries { border-top: 3px solid var(--cf-print) !important; }
.apz-country {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px; padding: .42rem .95rem; color: #DFE7F5;
}
.apz-country:hover { border-color: var(--cf-print); color: #fff; transform: translateY(-1px); }

/* ---------- 12. Footer premium ---------- */
#footer .main-footer { background: var(--cf-ink) !important; }
#footer .main-footer h3 { color: #fff !important; }
#footer .main-footer .popular-categories ul li { border-top-color: #22304A !important; }
#footer .main-footer .popular-categories ul li:last-child { border-bottom-color: #22304A !important; }
#footer .main-footer .presentation-foot, #footer .main-footer .about-globo p { color: #9AA6B8 !important; }
#footer .main-footer a { color: #B6C2D4 !important; }
#footer .main-footer a:hover { color: var(--cf-print) !important; }
#footer .copyright { background: var(--cf-africa-2) !important; }
#footer .copyright a { color: #C6D2E4 !important; }
#footer .copyright a:hover { color: var(--cf-print) !important; }
#footer .main-footer .newsletter input { background: var(--cf-africa-2) !important; border-color: #22304A !important; }
#footer .main-footer .newsletter button { background: var(--cf-print) !important; color: #fff !important; }
#footer .main-footer .newsletter button:hover { background: #028BAE !important; }

/* ---------- 13. Pagination premium ---------- */
.pagination { display: inline-flex; gap: .4rem; }
/* Neutralise le formatage « boîtes carrées » du thème (li 30x30, bordure, radius 3px)
   pour ne conserver que le style pilule des liens — sinon les deux se superposent. */
.pagination li {
  float: none; width: auto; height: auto; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent;
}
.pagination li.active, .pagination li:hover { background: transparent; border-color: transparent; }
.pagination li a, .pagination li span { border-radius: 999px !important; font-weight: 600; color: var(--cf-ink); min-width: 29px; height: 29px; font-size: 13px; line-height: normal; display: inline-flex; align-items: center; justify-content: center; border-color: var(--cf-border) !important; }
.pagination li a:hover { background: var(--cf-soft) !important; color: var(--cf-africa) !important; text-decoration: none; }
.pagination li.active a, .pagination li.active span { background: var(--cf-africa) !important; border-color: var(--cf-africa) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(7,87,213,.25) !important; }
.pagination li.disabled a, .pagination li.disabled span { background: var(--cf-soft) !important; border-color: var(--cf-border) !important; color: var(--cf-muted) !important; pointer-events: none; cursor: not-allowed; }

/* ---------- 14. Sidebar gauche ---------- */
.page-sidebar { background: #fff; border-radius: var(--cf-radius); border: 1px solid var(--cf-border); padding: 1.2rem; box-shadow: var(--cf-shadow-sm); }
.page-sidebar .sort-by select { margin-bottom: .7rem; }
.page-sidebar .apz-sidebar-ad { display: none; }

/* Structure identique à /page/imprimeur : colonne flex, lien épinglé en bas */
.page-sidebar.company-sidebar.home-sidebar { display: flex; flex-direction: column; height: 100%; }
.page-sidebar.company-sidebar.home-sidebar .apz-home-sidebar-inner { flex: 1 1 auto; }
.category-toggle .page-sidebar .sidebar-sort { flex: 0 0 auto; }

/* ---------- 15. Alerts propres ---------- */
.alert { border-radius: 12px; border-left-width: 4px; }
.alert-light { background: #fff; border-color: var(--cf-border); color: var(--cf-muted); }

/* ---------- 16. Animations douces ---------- */
.btn, .single-product, .pagination li a, .pagination li span { transition: all .18s ease; }
@keyframes cf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }