/* Charte Sendom appliquée à WHMCS (Twenty-One + Bootstrap 4 + commande standard_cart).
   Couleurs, polices et formes reprises de site/app/assets/css/main.css : à garder synchronisées. */

:root{
  --bg:#ffffff;--alt:#f2f7f3;--surface:#ffffff;--ink:#0f2419;--mute:#5a6b61;--line:#dae6dd;
  --primary:#12873f;--primary-hover:#0d7034;--on-primary:#ffffff;--tint:#e5f4ea;
  --navy:#063321;--navy-2:#0b4a2e;--on-navy:#ffffff;--navy-mute:#b9d8c4;
  --promo:#fcd116;--on-promo:#1c1600;--promo-soft:#fff8d6;
  --flag-red:#e31b23;
  --ok:#12873f;--warn:#9a5c00;--bad:#d0161e;
  --shadow:rgba(6,51,33,.14);
  --f-display:'Montserrat','Segoe UI',system-ui,sans-serif;
  --f-brand:'Michroma','Montserrat','Arial Black',system-ui,sans-serif;
  --f-body:'Montserrat','Segoe UI',system-ui,-apple-system,sans-serif;
  --r:12px;
}

/* ---------- Base ---------- */
body.sd{background:var(--alt);color:var(--ink);font:400 16px/1.55 var(--f-body)}
.sd h1,.sd h2,.sd h3,.sd h4,.sd h5,.sd h6,.sd .h1,.sd .h2,.sd .h3,.sd .h4,.sd .h5{font-family:var(--f-display);color:var(--ink);letter-spacing:-.01em}
.sd h1,.sd h2,.sd .h1,.sd .h2{font-weight:800}
.sd h3,.sd h4,.sd h5,.sd .h3,.sd .h4,.sd .h5{font-weight:700}
.sd a{color:var(--primary)}
.sd a:hover{color:var(--primary-hover)}
.sd .text-muted{color:var(--mute)!important}
.sd :focus-visible{outline:3px solid var(--promo);outline-offset:2px}
.sd .container{max-width:1180px}
#main-body{background:var(--alt);padding:32px 0 56px}

/* ---------- Bandeau utilitaire et liseré ---------- */
.sd-util{background:var(--navy);color:var(--navy-mute);font-size:14px}
.sd-util .container{display:flex;gap:6px 20px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-top:7px;padding-bottom:7px}
.sd-util .l,.sd-util .r{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.sd-util b{color:var(--on-navy);font-weight:600}
.sd-util a,.sd-util .btn{color:var(--navy-mute);text-decoration:none;font-size:14px;padding:0;border:0;background:none}
.sd-util a:hover,.sd-util .btn:hover{color:var(--on-navy)}
.sd-tri{height:4px;background:linear-gradient(90deg,#12873f 0 33.4%,#fcd116 33.4% 66.7%,#e31b23 66.7% 100%)}

/* ---------- En-tête ---------- */
.sd-hdr{position:sticky;top:0;z-index:1020;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:none}
.sd-hdr .navbar{padding:0;min-height:72px}
.sd-hdr .navbar>.container{min-height:72px;flex-wrap:wrap}
.sd-logo{order:1;margin-right:24px;padding:0}
.sd-logo img{height:40px;width:auto;display:block}
.sd-tools{order:3;flex-direction:row;align-items:center;gap:6px;margin-left:12px}
#mainNavbar{order:2}
.sd-hdr #nav>li>a,.sd-hdr .sd-account>li>a{display:block;padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:600;font-size:15px;color:var(--ink)}
.sd-hdr #nav>li>a:hover,.sd-hdr .sd-account>li>a:hover{background:var(--alt);color:var(--ink)}
.sd-hdr #nav>li.active>a{color:var(--primary);box-shadow:inset 0 -3px 0 var(--primary);border-radius:0}
.sd-hdr .sd-account>li>a{border:2px solid var(--primary);color:var(--primary);border-radius:10px;padding:8px 14px}
.sd-hdr .sd-account>li>a:hover{background:var(--tint);color:var(--primary)}
.sd-tool{display:flex!important;align-items:center;gap:8px;padding:9px 12px!important;border-radius:9px;text-decoration:none;font-weight:600;font-size:15px;color:var(--ink)!important;position:relative}
.sd-tool:hover{background:var(--alt)}
.sd-tool .badge{background:var(--promo);color:var(--on-promo);font-weight:800;border-radius:99px;min-width:20px;padding:3px 6px}
.sd-burger{width:46px;height:46px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer}
@media (max-width:1180px){.sd-tool .t{display:none}}
@media (max-width:991.98px){
  .sd-tools{margin-left:auto}
  #mainNavbar{order:4;flex-basis:100%}
  #mainNavbar .navbar-nav{padding:8px 0}
  .sd-hdr #nav>li>a{font-size:17px;padding:13px 6px;border-bottom:1px solid var(--line);border-radius:0}
  .sd-hdr .sd-account{padding-bottom:16px}
  .sd-hdr .sd-account>li>a{text-align:center}
}
@media (max-width:560px){.sd-logo img{height:30px}}
.sd .dropdown-menu{border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 32px var(--shadow);padding:6px}
.sd .dropdown-item{border-radius:8px;color:var(--ink);font-weight:500}
.sd .dropdown-item a{color:inherit;text-decoration:none}
.sd .dropdown-item:hover,.sd .dropdown-item:focus,.sd .dropdown-item.active,.sd .dropdown-item:active{background:var(--tint);color:var(--primary)}

/* ---------- Fil d'Ariane ---------- */
.sd .master-breadcrumb{background:var(--navy);border:0}
.sd .master-breadcrumb .breadcrumb{background:none;margin:0;padding:14px 0;font-size:14px}
.sd .master-breadcrumb .breadcrumb-item,.sd .master-breadcrumb .breadcrumb-item a{color:var(--navy-mute);text-decoration:none}
.sd .master-breadcrumb .breadcrumb-item a:hover{color:var(--on-navy)}
.sd .master-breadcrumb .breadcrumb-item.active{color:var(--on-navy);font-weight:600}
.sd .master-breadcrumb .breadcrumb-item+.breadcrumb-item::before{color:var(--navy-mute)}

/* ---------- Boutons ---------- */
.sd .btn{border-radius:10px;font-weight:700;letter-spacing:.01em;transition:background .15s,color .15s}
.sd .btn-primary,.sd .btn-success,.sd .btn-info{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.sd .btn-primary:hover,.sd .btn-success:hover,.sd .btn-info:hover,
.sd .btn-primary:focus,.sd .btn-success:focus,.sd .btn-info:focus,
.sd .btn-primary:not(:disabled):not(.disabled):active,.sd .btn-success:not(:disabled):not(.disabled):active{background:var(--primary-hover);border-color:var(--primary-hover);color:var(--on-primary)}
.sd .btn-outline-primary,.sd .btn-default,.sd .btn-secondary{background:transparent;border:2px solid var(--primary);color:var(--primary)}
.sd .btn-outline-primary:hover,.sd .btn-default:hover,.sd .btn-secondary:hover{background:var(--tint);border-color:var(--primary);color:var(--primary)}
.sd .btn-warning{background:var(--promo);border-color:var(--promo);color:var(--on-promo)}
.sd .btn-danger{background:var(--bad);border-color:var(--bad)}
.sd .btn-link{color:var(--primary);font-weight:600}
/* Action principale de la commande : jaune, comme « Payer » sur sendom.sn */
.sd .btn-checkout,.sd #btnCompleteOrder,.sd #btnCompleteProductConfig,.sd #btnDomainSearch,.sd #btnDomainSearch2,
.sd .home-domain-search .btn-primary{background:var(--promo)!important;border-color:var(--promo)!important;color:var(--on-promo)!important}
.sd .btn-checkout:hover,.sd #btnCompleteOrder:hover,.sd #btnCompleteProductConfig:hover,.sd #btnDomainSearch:hover{filter:brightness(1.06)}

/* ---------- Formulaires ---------- */
.sd .form-control,.sd .custom-select,.sd select.form-control{border:1px solid var(--line);border-radius:10px;color:var(--ink);min-height:44px}
.sd .form-control:focus,.sd .custom-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--tint)}
.sd .input-group>.form-control:not(:last-child),.sd .input-group>.input-group-prepend>.input-group-text{border-radius:10px 0 0 10px}
.sd .input-group>.input-group-append>.btn,.sd .input-group>.input-group-append>.input-group-text{border-radius:0 10px 10px 0}
.sd .input-group-text{background:var(--alt);border-color:var(--line)}
.sd label{font-weight:600}
.sd .custom-control-input:checked~.custom-control-label::before{background:var(--primary);border-color:var(--primary)}

/* ---------- Cartes, encadrés, barre latérale ---------- */
.sd .card,.sd .panel{border:1px solid var(--line);border-radius:16px;box-shadow:none;background:var(--surface)}
.sd .card-header,.sd .panel-heading{background:var(--surface);border-bottom:1px solid var(--line);border-radius:16px 16px 0 0!important;font-family:var(--f-display);font-weight:700}
.sd .card-footer{background:var(--alt);border-top:1px solid var(--line);border-radius:0 0 16px 16px!important}
.sd .card-title{font-family:var(--f-display);font-weight:700}
.sd .sidebar .card,.sd .card-sidebar{border-radius:16px;overflow:hidden}
.sd .list-group-item{border-color:var(--line);color:var(--ink)}
.sd .list-group-item-action:hover{background:var(--alt);color:var(--ink)}
.sd .list-group-item.active,.sd .list-group-item.active:hover{background:var(--tint);border-color:var(--line);color:var(--primary);font-weight:700;box-shadow:inset 3px 0 0 var(--primary)}
.sd .list-group-item .badge{background:var(--primary);color:var(--on-primary)}

/* Tuiles de l'espace client (accueil connecté) */
.sd .tiles .tile{border-radius:16px;border:1px solid var(--line);background:var(--surface)}
.sd .tiles .tile .stat{font-family:var(--f-brand);font-weight:400;color:var(--ink)}
.sd .tiles .tile .highlight{background:var(--primary)!important}
.sd .action-icon-btns a{border:1px solid var(--line);border-radius:16px;color:var(--ink);font-weight:600}
.sd .action-icon-btns a:hover{border-color:var(--primary);color:var(--primary)}
.sd .action-icon-btns .ico-container{color:var(--primary)}

/* ---------- Badges, statuts, alertes ---------- */
.sd .badge{border-radius:99px;font-weight:700}
.sd .label-success,.sd .status-active,.sd .status-paid,.sd .status-completed,.sd .badge-success{background:var(--ok)!important;color:#fff}
.sd .label-warning,.sd .status-pending,.sd .status-unpaid,.sd .badge-warning{background:var(--promo)!important;color:var(--on-promo)!important}
.sd .label-danger,.sd .status-cancelled,.sd .status-terminated,.sd .status-overdue,.sd .badge-danger{background:var(--bad)!important;color:#fff}
.sd .badge-info,.sd .badge-primary{background:var(--primary);color:#fff}
.sd .alert{border-radius:12px;border:1px solid var(--line)}
.sd .alert-success{background:var(--tint);color:var(--primary-hover);border-color:color-mix(in srgb,var(--primary) 30%,transparent)}
.sd .alert-warning{background:var(--promo-soft);color:#5b4500;border-color:#f3dd73}
.sd .alert-info{background:var(--alt);color:var(--ink)}
.sd .alert-danger{background:#fdecec;color:#8f1016;border-color:#f5c2c4}

/* ---------- Tableaux, onglets, pagination ---------- */
.sd .table thead th,.sd table.dataTable thead th{border-bottom:2px solid var(--line);font-family:var(--f-display);font-weight:700;color:var(--ink);background:var(--surface)}
.sd .table td{border-color:var(--line)}
.sd .table-list>tbody>tr:hover>td{background:var(--alt)}
.sd .nav-tabs .nav-link{border-radius:10px 10px 0 0;font-weight:600;color:var(--mute)}
.sd .nav-tabs .nav-link.active{color:var(--primary);border-color:var(--line) var(--line) var(--surface)}
.sd .nav-pills .nav-link.active{background:var(--primary)}
.sd .page-item.active .page-link{background:var(--primary);border-color:var(--primary)}
.sd .page-link{color:var(--primary)}

/* ---------- Accueil WHMCS : recherche de domaine en bandeau vert nuit ---------- */
.sd .home-domain-search{background:linear-gradient(135deg,var(--navy),var(--navy-2))!important;color:var(--on-navy)}
.sd .home-domain-search h2{color:var(--on-navy);font-size:clamp(26px,3.6vw,38px)}
.sd .home-domain-search .form-control{min-height:56px;font-size:18px;border:0}
.sd .home-domain-search .input-group-append .btn{min-height:56px;padding:0 24px}
.sd .home-domain-search .tld-logos li{color:var(--navy-mute)}
.sd .home-domain-search .btn-link{color:var(--promo)}
.sd .card-columns.home .card{border-radius:16px}
.sd .pricing-card-title{font-weight:800}

/* ---------- Commande (standard_cart) ---------- */
#order-standard_cart .header-lined h1{font-family:var(--f-display);font-weight:800;color:var(--ink)}
#order-standard_cart .header-lined{border-bottom:0}
#order-standard_cart .products .product,#order-standard_cart .panel-addon{border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
#order-standard_cart .products .product header{background:var(--surface);border-bottom:1px solid var(--line);font-family:var(--f-display);font-weight:800;color:var(--ink)}
#order-standard_cart .products .product div.product-pricing span.price,#order-standard_cart .price{font-family:var(--f-brand);font-weight:400;color:var(--ink)}
#order-standard_cart .products .product .btn-order-now{background:var(--primary);border-color:var(--primary);color:#fff}
#order-standard_cart .view-cart-items-header{background:var(--navy);color:var(--on-navy);border-radius:12px 12px 0 0}
#order-standard_cart .view-cart-items{border-color:var(--line)}
#order-standard_cart .view-cart-items .item{border-bottom:1px solid var(--line)}
#order-standard_cart .view-cart-items .item-title,#order-standard_cart .view-cart-items .item-domain{color:var(--ink);font-weight:600}
#order-standard_cart .view-cart-tabs .nav-tabs a{border-radius:10px 10px 0 0}
#order-standard_cart .order-summary{background:var(--navy);border:0;border-radius:16px;overflow:hidden}
#order-standard_cart .order-summary h2{background:var(--navy);color:var(--on-navy);font-family:var(--f-display);font-weight:800}
#order-standard_cart .summary-container{background:var(--surface);border:0;border-radius:0}
#order-standard_cart .total-due-today .amt,#order-standard_cart .total-due-today span.amt{font-family:var(--f-brand);font-weight:400;color:var(--ink)}
#order-standard_cart .sub-heading span,#order-standard_cart .sub-heading .primary-bg-color{background:var(--surface);color:var(--mute);font-weight:700}
#order-standard_cart .sub-heading{border-top-color:var(--line)}
#order-standard_cart .panel-addon-selected{border-color:var(--primary)}
#order-standard_cart .panel-addon .panel-add{background:var(--tint);color:var(--primary)}
#order-standard_cart .panel-addon-selected .panel-add{background:var(--primary);color:#fff}
#order-standard_cart .field-container .form-control{border-radius:10px}
#order-standard_cart .domain-checker-container{background:linear-gradient(135deg,var(--navy),var(--navy-2));border-radius:16px}
#order-standard_cart .domain-checker-available{color:var(--ok)}
#order-standard_cart .domain-checker-unavailable{color:var(--bad)}
#order-standard_cart .product-info,#order-standard_cart .secondary-cart-body{border-radius:16px}
.sd .cart-sidebar .card .list-group-item.active{background:var(--tint)}

/* ---------- Boutique : groupes de produits (premium_comparison, chargé après ce fichier, d'où « body.sd ») ---------- */
body.sd #order-premium_comparison .main-container.price-01{background:none}
body.sd #order-premium_comparison .main-container.price-01 h3{font-family:var(--f-display);font-weight:800;color:var(--ink);font-size:clamp(26px,3.6vw,38px)}
body.sd #order-premium_comparison .price-table-container .price-table{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);box-shadow:none}
body.sd #order-premium_comparison .price-table-container .price-table .top-head{background:var(--surface);border-bottom:1px solid var(--line)}
body.sd #order-premium_comparison .price-table-container .price-table .top-head .top-area{background:var(--navy);border:0}
body.sd #order-premium_comparison .price-table-container .price-table .top-head .top-area h4{font-family:var(--f-display);font-weight:800;color:var(--on-navy)}
body.sd #order-premium_comparison .price-table-container .price-table .top-head .price-area{background:var(--surface)}
body.sd #order-premium_comparison .price-table-container .price-table .top-head .price-area .price{color:var(--mute);font-family:var(--f-body)}
body.sd #order-premium_comparison .price-table-container .price-table .top-head .price-area .price span{font-family:var(--f-brand);font-weight:400;color:var(--ink)}
body.sd #order-premium_comparison .price-table-container .order-button,
body.sd #order-premium_comparison .price-table-container .order-button:hover{background:var(--promo);color:var(--on-promo);border:0;border-radius:10px;font-weight:700;box-shadow:none;text-shadow:none}
body.sd #order-premium_comparison .price-table-container .order-button:hover{filter:brightness(1.06)}
body.sd #order-premium_comparison .price-table-container .price-table ul li{color:var(--ink);border-color:var(--line)}

/* ---------- Pied de page ---------- */
body.sd #footer.sd-footer,.sd-footer{background:var(--navy);color:var(--navy-mute);padding:0;font-size:15px}
.sd-footer .sd-cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px;padding-top:48px;padding-bottom:32px}
@media (max-width:820px){.sd-footer .sd-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.sd-footer .sd-brand{grid-column:1/-1}}
.sd-footer .sd-brand{display:grid;gap:14px;align-content:start}
.sd-footer .sd-brand img{width:200px;height:auto;display:block}
.sd-footer .sd-brand p{max-width:34ch;margin:0}
.sd-footer h4{color:var(--on-navy);font-size:16px;margin-bottom:12px}
.sd-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sd-footer a{text-decoration:none;color:var(--navy-mute)}
.sd-footer a:hover{color:var(--on-navy)}
.sd-footer .sd-social{display:flex;gap:14px;flex-wrap:wrap;font-weight:600}
.sd-footer .sd-bottom{border-top:1px solid rgba(255,255,255,.12);padding:18px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px}
.sd-footer .sd-pay{border-top:0;padding-bottom:0}
.sd-paylogos{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* Logos de paiement : toujours sur fond blanc, comme l'exigent leurs chartes */
.sd-paylogos .pl{background:#fff;border-radius:10px;height:44px;padding:6px 10px;display:inline-flex;align-items:center;gap:6px;color:#0f2419;font-weight:700;font-size:13px}
.sd-paylogos .pl img{height:28px;width:auto;display:block}
.sd-footer .sd-lang{color:var(--navy-mute);border:1px solid rgba(255,255,255,.2);font-weight:600;font-size:14px;padding:6px 12px}
.sd-footer .sd-lang:hover{color:var(--on-navy)}

/* Chiffres et prix dans la police de marque, comme sur sendom.sn */
.sd .price,.sd .amt,.sd .tiles .stat,.sd .pricing-card-title .price{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){.sd *{transition:none!important;animation:none!important}}