/* ===============================================================
   NovaHoster — feuille de style du tunnel de commande.
   Chargée par includes/head.tpl après theme.css.

   Les valeurs (tailles, rayons, couleurs, espacements) reprennent
   la maquette fournie. La couleur d'accent est dérivée de
   --brand-primary et non figée : le thème est sur rgb(208,45,20),
   pas sur le #d92027 de la maquette, et deux rouges différents sur
   la même page se voient.
   =============================================================== */

:root{
  --nh-red:        var(--brand-primary, #d92027);
  --nh-red-dark:   color-mix(in srgb, var(--brand-primary, #d92027) 85%, #000);
  --nh-red-soft:   color-mix(in srgb, var(--brand-primary, #d92027) 10%, #fff);
  --nh-navy:       #141b26;
  --nh-navy-2:     #1d2736;
  --nh-bg:         #f6f8fb;
  --nh-border:     #e6eaf1;
  --nh-border-2:   #cdd6e3;
  --nh-text:       #18202e;
  --nh-muted:      #67748b;
  --nh-green:      #16a34a;
  --nh-green-soft: #e8f7ee;
  --nh-amber:      #f59e0b;
  --nh-radius:     14px;
  --nh-shadow:     0 6px 24px rgba(20,27,38,.07);
}

/* ---------------------------------------------------------------
   1. Tunnel de commande — règles communes aux quatre écrans
   --------------------------------------------------------------- */

/* Retirer Inscription / Connexion de la barre de menu pendant la
   commande. Deux écritures redondantes : par le nom de l'entrée de
   menu et par l'adresse du lien. Un renommage dans l'admin ou un
   changement d'URL laisse l'autre en place. */
.page-order .menu-primary > li[menuItemName*="ogin" i],
.page-order .menu-primary > li[menuItemName*="egister" i],
.page-order .menu-primary > li[menuItemName*="onnexion" i],
.page-order .menu-primary > li[menuItemName*="nscription" i],
.page-order .menu-primary > li:has(> a[href*="/login"]),
.page-order .menu-primary > li:has(> a[href*="login.php"]),
.page-order .menu-primary > li:has(> a[href*="/register"]),
.page-order .menu-primary > li:has(> a[href*="register.php"]){
  display:none;
}

/* Titre des autres écrans du tunnel (40px par défaut). */
.page-order .main-header-title{ font-size:1.85rem; line-height:1.25; }
@media (max-width:640px){
  .page-order .main-header-title{ font-size:1.5rem; }
}

/* ---------------------------------------------------------------
   2. Étape « Choix du domaine »
   --------------------------------------------------------------- */

.page-configureproductdomain{ background:var(--nh-bg); }

/* L'en-tête du thème est remplacé par celui de la variante : il ne
   propose ni sous-titre ni accent, et son titre vient d'une chaîne
   WHMCS qu'on ne peut pas mettre en forme.

   Le :has(.nh-head) n'est pas décoratif : si la variante NovaHoster
   n'est pas active dans l'admin, WHMCS sert le gabarit Boxed, qui ne
   contient pas de .nh-head. Masquer l'en-tête sans cette garde
   laisserait alors la page entièrement sans titre. */
.page-configureproductdomain:has(.nh-head) .main-header{ display:none; }

/* --- 2.1 En-tête ------------------------------------------------ */
.nh-head{ text-align:center; margin-bottom:26px; }
.nh-head h1{
  font-size:30px; font-weight:800; letter-spacing:-.02em;
  line-height:1.2; margin:0; color:var(--nh-text);
}
.nh-head h1 span{ color:var(--nh-red); }
.nh-head > p{
  color:var(--nh-muted); margin:6px 0 0; font-size:15.5px;
}
.nh-picked{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  padding:7px 16px; background:#fff; border:1px solid var(--nh-border);
  border-radius:999px; font-size:13.5px; color:var(--nh-muted);
}
.nh-picked b{ color:var(--nh-text); font-weight:600; }
.nh-picked svg{ color:var(--nh-green); flex:none; }

/* --- 2.2 Les trois cartes de choix ------------------------------ */
.page-configureproductdomain .panel-choose-domain-boxed{
  border:none; border-radius:var(--nh-radius); background:transparent;
  box-shadow:none;
}
.page-configureproductdomain .panel-choose-domain-boxed .panel-domain-option{
  padding:0 0 14px; background:transparent;
}
.page-configureproductdomain .panel-choose-domain-boxed .panel-domain-option .content{
  column-gap:14px;
}
.page-configureproductdomain .panel-choose-domain-boxed .panel-domain-option .radio .box{
  position:relative;
  align-items:flex-start;
  padding:20px 18px 18px;
  border:2px solid var(--nh-border);
  border-radius:var(--nh-radius);
  background:#fff;
  height:100%;
  overflow:hidden;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.page-configureproductdomain .panel-choose-domain-boxed .panel-domain-option .radio .box:hover{
  border-color:var(--nh-border-2);
  transform:translateY(-2px);
}
/* État sélectionné. iCheck remplace l'input à l'exécution : le thème
   lui-même cible .radio-styled.checked + div, et c'est le seul
   sélecteur qui matche réellement. */
.page-configureproductdomain .panel-choose-domain-boxed .panel-domain-option .radio .radio-styled.checked + .box{
  border-color:var(--nh-red);
  box-shadow:var(--nh-shadow);
}

/* Pastille d'icône. */
.page-configureproductdomain .panel-choose-domain-boxed .panel-domain-option .radio .box-icon{
  width:46px; height:46px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--nh-red-soft); margin-bottom:12px;
  transition:background .18s ease;
}
.page-configureproductdomain .panel-choose-domain-boxed .panel-domain-option .radio .box-icon .svg-icon{
  width:26px; height:26px;
}
.page-configureproductdomain .panel-choose-domain-boxed .panel-domain-option .radio .radio-styled.checked + .box .box-icon{
  background:var(--nh-red);
}
/* Les illustrations du thème sont peintes avec --svg-icon-color-* :
   sur pastille rouge, on les repasse en blanc par ces variables,
   pas par un remplissage en dur qui ne suivrait pas la charte. */
.page-configureproductdomain .panel-choose-domain-boxed .panel-domain-option .radio .radio-styled.checked + .box .box-icon{
  --svg-icon-color-1:#fff;
  --svg-icon-color-2:rgba(255,255,255,.65);
  --svg-icon-color-3:#fff;
  --svg-icon-color-4:var(--nh-red);
  --svg-icon-color-5:rgba(255,255,255,.4);
}

/* Textes des cartes, alignés à gauche comme la maquette. */
.page-configureproductdomain .panel-choose-domain-boxed .panel-domain-option .radio .box-text{
  align-items:flex-start;
}
.page-configureproductdomain .panel-choose-domain-boxed .panel-domain-option .radio .box-text-title{
  font-size:15.5px; font-weight:700; line-height:1.3;
  margin-block:0 4px; text-align:left; color:var(--nh-text);
}
.page-configureproductdomain .panel-choose-domain-boxed .panel-domain-option .radio .box-text-subtitle{
  font-size:13px; line-height:1.45; color:var(--nh-muted); text-align:left;
}

/* Coche de sélection. Le thème dessine un ruban d'angle (un carré
   pivoté posé hors du cadre) ; la maquette veut une pastille ronde.
   On reprend ses deux pseudo-éléments plutôt que d'en ajouter. */
.page-configureproductdomain .panel-choose-domain-boxed .panel-domain-option .radio .radio-styled.checked + .box:before{
  top:12px; right:12px; left:auto;
  width:22px; height:22px;
  border-radius:50%;
  transform:none;
  background:var(--nh-red);
}
.page-configureproductdomain .panel-choose-domain-boxed .panel-domain-option .radio .radio-styled.checked + .box:after{
  top:17px; right:17px;
  font-size:11px; line-height:1;
}

/* --- 2.3 Bandeau de recherche ----------------------------------- */
.page-configureproductdomain .panel-domain-search{
  background:linear-gradient(135deg, var(--nh-navy) 0%, var(--nh-navy-2) 60%, #26202b 100%);
  border-radius:var(--nh-radius);
  padding:34px 30px 26px;
  min-height:0;
  box-shadow:var(--nh-shadow);
}

/* Un intitulé par mode. Le thème se contente d'ajouter .hidden sur
   les .inline-form ; on lit cet état avec :has() au lieu de toucher
   à son JavaScript. */
.nh-search-head{ display:none; margin-bottom:18px; }
.nh-search-head h2{
  font-size:19px; font-weight:700; color:#fff; margin:0 0 4px;
  /* Le thema donne 52px de hauteur de ligne aux h2 : sans ca,
     l'intitule occupe trois fois sa hauteur reelle. */
  line-height:1.3;
}
.nh-search-head .nh-sub{ color:#aab6c8; font-size:14px; }

.panel-domain-search:has(#domainregister:not(.hidden)) [data-nh-head="register"],
.panel-domain-search:has(#domaintransfer:not(.hidden)) [data-nh-head="transfer"],
.panel-domain-search:has(#domainowndomain:not(.hidden)) [data-nh-head="owndomain"]{
  display:block;
}

/* Champ + extension réunis en un seul bloc blanc, bouton détaché. */
.page-configureproductdomain .panel-domain-search .inline-form > .inline-form-element:first-child{
  margin-right:0;
}
.page-configureproductdomain .panel-domain-search .form-control.input-lg{
  height:56px; font-size:16.5px; border:none;
  border-radius:12px 0 0 12px;
  box-shadow:0 3px 14px rgba(0,0,0,.22);
}
.page-configureproductdomain .panel-domain-search .dropdown .tld-select{
  height:56px; border:none; background:#fff; font-weight:600;
  border-radius:0 12px 12px 0;
  border-left:1px solid #eef1f6;
  box-shadow:0 3px 14px rgba(0,0,0,.22);
}
/* Le mode « domaine existant » aligne deux champs texte : le second
   ferme le bloc à droite. */
.page-configureproductdomain .panel-domain-search #domainowndomain .inline-form-element:first-child .form-control{
  border-radius:12px 0 0 12px;
}
.page-configureproductdomain .panel-domain-search #domainowndomain .inline-form-element:nth-child(2) .form-control{
  border-radius:0 12px 12px 0;
  border-left:1px solid #eef1f6;
}

.page-configureproductdomain .panel-domain-search .btn{
  height:56px; border-radius:12px; font-weight:700; font-size:16px;
  background:var(--nh-red); border-color:var(--nh-red); color:#fff;
}
.page-configureproductdomain .panel-domain-search .btn span{ color:#fff; }
.page-configureproductdomain .panel-domain-search .btn:hover,
.page-configureproductdomain .panel-domain-search .btn:focus{
  background:var(--nh-red-dark); border-color:var(--nh-red-dark); color:#fff;
}

/* --- 2.4 Puces d'extensions ------------------------------------- */
.nh-tlds{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.nh-tld{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  color:#e8edf5; font-size:13.5px; font-family:inherit;
  transition:background .15s ease, border-color .15s ease;
}
.nh-tld:hover{ background:rgba(255,255,255,.16); }
.nh-tld.is-active{ background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.35); }
.nh-tld b{ font-weight:700; }
.nh-tld-price{ color:#9fb0c8; font-weight:400; }
/* Badge de groupe (hot / new / sale), libelle fourni par WHMCS. */
.nh-tld-tag{
  font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:999px;
  text-transform:uppercase; letter-spacing:.03em; color:#fff;
  background:var(--nh-red);
}
.nh-tld-tag-new{ background:var(--nh-green); }
.nh-tld-tag-sale{ background:var(--nh-amber); color:#3a2a05; }

/* Loupe dans le champ de recherche. Le champ est repousse a droite
   d'autant, pour que la saisie ne passe pas dessous. */
.page-configureproductdomain .panel-domain-search #domainregister .inline-form-element:first-child{
  position:relative;
}
.nh-search-icon{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  color:#8a94a6; line-height:0; pointer-events:none; z-index:2;
}
.page-configureproductdomain .panel-domain-search #domainregister #registersld{
  padding-left:46px;
}

/* --- 2.5 Résultat principal ------------------------------------- */
/* Resserré : le bloc occupait près de 180 px de haut pour une ligne
   d'information. */
.page-configureproductdomain #primaryLookupResult .domain-available{
  border:2px solid var(--nh-green); border-radius:var(--nh-radius); background:#fff;
}
.page-configureproductdomain #primaryLookupResult .domain-unavailable{
  border:2px solid var(--nh-red); border-radius:var(--nh-radius); background:#fff;
}
.page-configureproductdomain #primaryLookupResult .message{
  padding:16px 20px; margin-bottom:0;
}
.page-configureproductdomain #primaryLookupResult .message-content{
  display:flex; align-items:center; gap:16px; max-width:none; width:100%;
  /* Le thème centre ce bloc ; on le cale à gauche pour que le domaine
     suive l'icône au lieu de flotter au milieu. */
  justify-content:flex-start;
  /* m-w-lg centre le bloc par une marge automatique : sans ça l'icône
     reste décalée de 160px du bord. Le !important est ici subi et non
     choisi : le thème écrit .m-w-lg{max-width:...!important}, qui ne
     peut pas se battre autrement, et il bornait le bloc à 975px alors
     que le panneau en fait 1256. */
  margin:0;
  max-width:none !important;
}
.page-configureproductdomain #primaryLookupResult .message-icon{
  width:42px; height:42px; flex:none; margin:0;
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
}
.page-configureproductdomain #primaryLookupResult .message-body{
  flex:1 1 auto; min-width:0; margin:0; text-align:left;
  /* Le thème fige ce bloc à width:100% : il n'occupait donc pas
     l'espace restant et le bouton ne partait pas à droite. */
  width:auto;
  /* flex-direction explicite : le thème empile ce bloc en colonne, ce
     qui renvoyait le prix sous le nom de domaine. */
  display:flex; flex-direction:row; align-items:baseline;
  gap:14px; flex-wrap:wrap; justify-content:flex-start;
}
/* Titre et prix sur une même ligne : le thème les empile, chacun
   occupant toute la largeur. */
.page-configureproductdomain #primaryLookupResult .message-title{
  margin:0; font-size:17px; font-weight:700; line-height:1.3;
  width:auto; flex:0 0 auto;
}
.page-configureproductdomain #primaryLookupResult .domain-price{
  margin:0; font-weight:800; font-size:19px;
  width:auto; flex:0 0 auto;
}
.page-configureproductdomain #primaryLookupResult .domain-price .price{
  margin:0;
}
.page-configureproductdomain #primaryLookupResult .message-actions{
  margin:0; flex:none;
}
.page-configureproductdomain #primaryLookupResult del{
  color:var(--nh-muted); font-weight:400; font-size:13.5px;
}

/* --- 2.6 « Plus populaires » : liste compacte -------------------- */
/* Cinq cartes de 180 px poussaient le reste de la page hors de l'écran.
   Elles deviennent des lignes, comme chez le concurrent. */
.page-configureproductdomain .spotlight-tlds{ margin-top:22px; }
.page-configureproductdomain .spotlight-tlds .section-header{
  margin:0 0 10px; padding:0;
}
.page-configureproductdomain .spotlight-tlds .section-title{
  font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--nh-muted); margin:0;
}
.page-configureproductdomain .spotlight-tlds .section-desc{ display:none; }

.page-configureproductdomain .spotlights{
  display:block; margin:0; padding:0;
  background:#fff; border:1px solid var(--nh-border);
  border-radius:var(--nh-radius); overflow:hidden;
}
.page-configureproductdomain .spotlight-col{
  width:100%; max-width:none; flex:none; padding:0; margin:0;
}
.page-configureproductdomain .spotlight-col + .spotlight-col .spotlight{
  border-top:1px solid var(--nh-border);
}
.page-configureproductdomain .spotlight{
  border:none; border-radius:0; background:transparent;
  box-shadow:none; margin:0; height:auto;
  transition:background .15s ease;
}
.page-configureproductdomain .spotlight:hover{ background:#f8fafc; }
.page-configureproductdomain .spotlight-body{ padding:0; }
.page-configureproductdomain .spotlight-top{
  display:flex; align-items:center; gap:14px;
  padding:12px 18px; flex-wrap:wrap;
}
.page-configureproductdomain .spotlight-content{
  flex:1; min-width:160px; margin:0; text-align:left;
  display:flex; align-items:baseline; gap:2px;
  /* Le thème donne 32px de remplissage vertical à ce bloc, prévu pour
     une carte : c'est lui qui faisait des lignes de 112px. */
  padding:0;
}
/* Nom cherché, écrit par le script de la variante. */
.page-configureproductdomain .spotlight-content .nh-sld{
  font-size:15.5px; font-weight:600; color:var(--nh-text);
}
.page-configureproductdomain .spotlight-content .extension{
  font-size:15.5px; font-weight:700; color:var(--nh-red);
  margin:0; line-height:1.3;
}
.page-configureproductdomain .spotlight-footer{
  display:flex; align-items:center; justify-content:flex-end;
  gap:12px; margin:0; padding:0; border:none; flex:none;
}
.page-configureproductdomain .spotlight-footer_price{
  font-size:15px; font-weight:700; color:var(--nh-text); margin:0;
}
.page-configureproductdomain .spotlight-footer .form-group{ margin:0; }
.page-configureproductdomain .spotlight-footer .btn{
  border-radius:9px; font-weight:700; white-space:nowrap;
}
.page-configureproductdomain .spotlight-tlds .tld-label{ margin-left:6px; }

/* --- 2.7 « Domaines suggérés » : retiré -------------------------- */
/* Masqué et non supprimé du gabarit : order.js écrit dans
   #domainSuggestions. Retirer le bloc casserait le script. */
.page-configureproductdomain .suggested-domains{ display:none !important; }

/* --- 2.8 Avantages ---------------------------------------------- */
.nh-benefits{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  /* L'écart passe par un remplissage et non une marge : en production
     la marge haute était absorbée (fusion avec la marge voisine ou
     règle du thème) et le bloc se retrouvait collé au bandeau de
     recherche. Un padding ne fusionne jamais et ne peut pas être
     annulé par une règle de marge. */
  margin-top:0;
  padding-top:40px;
}
/* Les deux formulaires qui precedent portent leur propre marge basse,
   variable selon ce qu'ils contiennent (resultats affiches ou non) :
   on la remet a zero pour que l'ecart soit exactement celui declare
   ci-dessus, et pas la somme de deux valeurs imprevisibles. */
.page-configureproductdomain #frmProductDomain,
.page-configureproductdomain #frmProductDomainSelections,
.page-configureproductdomain .panel-choose-domain-boxed{
  margin-bottom:0;
}
.nh-benefit{
  background:#fff; border:1px solid var(--nh-border); border-radius:var(--nh-radius);
  padding:18px 16px; display:flex; gap:12px; align-items:flex-start;
}
.nh-benefit-icon{
  width:38px; height:38px; border-radius:10px; flex:none;
  background:var(--nh-red-soft); color:var(--nh-red);
  display:flex; align-items:center; justify-content:center;
}
.nh-benefit-text b{ display:block; font-size:14px; font-weight:700; margin-bottom:2px; color:var(--nh-text); }
.nh-benefit-text span{ font-size:12.5px; color:var(--nh-muted); line-height:1.45; }

/* --- 2.9 Barre de confiance ------------------------------------- */
.nh-trust{
  display:flex; justify-content:center; gap:26px; flex-wrap:wrap;
  margin:28px 0 8px; font-size:13.5px; color:var(--nh-muted);
}
.nh-trust span{ display:inline-flex; align-items:center; gap:7px; }
.nh-trust svg{ color:var(--nh-green); flex:none; }
.nh-stars{ color:var(--nh-amber); font-style:normal; letter-spacing:1px; }

/* --- 2.10 Retour -------------------------------------------------- */
.nh-actions{ display:flex; margin-top:24px; }
.nh-back{
  display:inline-flex; align-items:center; gap:8px;
  border:1.5px solid var(--nh-border); background:#fff; color:var(--nh-text);
  border-radius:11px; font-size:15px; font-weight:600; font-family:inherit;
  padding:13px 26px; cursor:pointer; transition:border-color .15s ease;
}
.nh-back:hover{ border-color:var(--nh-border-2); }

/* ---------------------------------------------------------------
   3. Adaptation aux petits écrans
   --------------------------------------------------------------- */
@media (max-width:991px){
  .nh-benefits{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px){
  .nh-head h1{ font-size:24px; }
  /* En inline-flex etroit, le libelle et le nom du produit se
     repartissaient en deux colonnes justifiees. */
  .nh-picked{
    display:flex; flex-wrap:wrap; justify-content:center;
    text-align:center; padding:8px 14px; line-height:1.4;
  }
  .page-configureproductdomain .panel-domain-search{ padding:24px 18px 20px; }
  /* En colonne, chaque champ redevient un bloc autonome. */
  .page-configureproductdomain .panel-domain-search .form-control.input-lg,
  .page-configureproductdomain .panel-domain-search .dropdown .tld-select,
  .page-configureproductdomain .panel-domain-search #domainowndomain .inline-form-element:first-child .form-control,
  .page-configureproductdomain .panel-domain-search #domainowndomain .inline-form-element:nth-child(2) .form-control{
    border-radius:12px; border-left:none;
  }
  .nh-back{ width:100%; justify-content:center; }
}
@media (max-width:767px){
  .nh-trust{ gap:12px; flex-direction:column; align-items:center; text-align:center; }
}
@media (max-width:575px){
  .nh-benefits{ grid-template-columns:1fr; }
}


/* ===============================================================
   3. Étape « Configurer »
   Valeurs reprises de la maquette. Le gabarit d'origine n'est pas
   modifié dans sa mécanique : cycles, options et récapitulatif
   restent ceux du thème, seul l'habillage change.
   =============================================================== */

.page-configureproduct{ background:var(--nh-bg); }

/* En-tête du thème remplacé par celui de la variante — même garde que
   sur l'étape du domaine : sans .nh-cfg-head, la page garde son titre. */
.page-configureproduct:has(.nh-cfg-head) .main-header{ display:none; }

.nh-cfg-head{ margin-bottom:24px; }
.nh-cfg-head h1{
  font-size:27px; font-weight:800; letter-spacing:-.02em;
  line-height:1.2; margin:0 0 4px; color:var(--nh-text);
}
.nh-cfg-head .nh-lead{
  color:var(--nh-muted); font-size:15px; margin:0; max-width:62ch;
}

/* --- 3.1 La carte du pack --------------------------------------- */
.page-configureproduct .nh-pack{
  border:1px solid var(--nh-border); border-radius:var(--nh-radius);
  background:#fff; overflow:hidden; box-shadow:none;
}
.nh-pack-top{
  padding:18px 22px;
  background:linear-gradient(135deg, var(--nh-navy), var(--nh-navy-2));
  color:#fff;
}
.nh-pack-name{ font-size:19px; font-weight:800; line-height:1.3; }
.page-configureproduct .nh-pack .panel-body{ padding:20px 22px; }

.nh-feats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px 20px;
}
.nh-feat{
  display:flex; align-items:flex-start; gap:9px;
  font-size:13.5px; line-height:1.45; color:var(--nh-text);
}
.nh-feat svg{ color:var(--nh-green); flex:none; margin-top:3px; }
/* Repli au-delà de la neuvième caractéristique. */
.nh-feat-more{ display:none; }
.nh-feats-ouvert .nh-feat-more{ display:flex; }
.nh-feats-toggle{
  margin-top:14px; padding:0; background:none; border:none;
  color:var(--nh-red); font-weight:600; font-size:13.5px;
  cursor:pointer; font-family:inherit;
}

/* --- 3.2 Les sections en cartes --------------------------------- */
/* La section des services est imbriquée dans #productAddonsContainer :
   elle n'est pas fille directe de .main-content, d'où un titre resté
   sans style au premier essai. On vise les deux niveaux. */
.page-configureproduct .main-content > .section,
.page-configureproduct .nh-addons{
  background:#fff; border:1px solid var(--nh-border);
  border-radius:var(--nh-radius); overflow:hidden;
  /* Le thème pose 48px de marge haute sur .section : c'était lui le
     grand vide entre les cartes, pas la marge basse. */
  margin-top:0; margin-bottom:18px;
}
/* Le conteneur d'addons ne sert que d'enveloppe : sans cette remise à
   plat, il dessinait un second cadre autour de la carte des services. */
.page-configureproduct #productAddonsContainer{
  background:transparent; border:none; border-radius:0;
  overflow:visible; margin-top:0; margin-bottom:0; padding:0;
}
/* La section du pack porte déjà sa propre carte. Ses remplissages
   s'ajoutaient à ceux du panneau et de la section : plus de 110px de
   vide entre le pack et les cycles. */
.page-configureproduct .main-content > .section:has(.nh-pack){
  background:transparent; border:none; border-radius:0;
  overflow:visible; margin-top:0; margin-bottom:18px;
}
.page-configureproduct .main-content > .section:has(.nh-pack) > .section-body{
  padding:0; margin:0;
}
.page-configureproduct .nh-pack{ margin-bottom:0; }

.page-configureproduct .main-content > .section > .section-header,
.page-configureproduct .nh-addons > .section-header{
  padding:18px 22px; margin:0; border-bottom:1px solid var(--nh-border);
}
.page-configureproduct .main-content > .section > .section-header .section-title,
.page-configureproduct .nh-addons > .section-header .section-title{
  font-size:16px; font-weight:700; margin:0; color:var(--nh-text);
  line-height:1.3;
}
.page-configureproduct .main-content > .section > .section-body,
.page-configureproduct .main-content > .section > .panel-check-group,
.page-configureproduct .nh-addons > .section-body{
  padding:20px 22px; margin:0;
}

/* --- 3.3 Durée d'engagement ------------------------------------- */
.page-configureproduct #sectionCycles .panel-check{
  position:relative; overflow:visible;
  border:2px solid var(--nh-border); border-radius:12px;
  background:#fff; box-shadow:none;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.page-configureproduct #sectionCycles .panel-check:hover{
  border-color:var(--nh-border-2);
}
.page-configureproduct #sectionCycles .panel-check.checked{
  border-color:var(--nh-red);
  box-shadow:0 4px 18px rgba(20,27,38,.10);
}
/* Le thème met 16px de remplissage sur le <label> ET sur .check-content :
   les deux s'additionnaient, d'où des cartes de 144px pour 84px de
   contenu. Le remplissage passe sur le <label>, qui devient la ligne
   « bouton radio + texte » : sans ça le radio restait collé en haut. */
.page-configureproduct #sectionCycles .check > label{
  display:flex; align-items:center; gap:12px;
  padding:16px 46px 16px 16px; margin:0; width:100%;
}
.page-configureproduct #sectionCycles .check-content{
  padding:0; text-align:left; flex:1; min-width:0;
}
.page-configureproduct #sectionCycles .check-title{
  font-size:14.5px; font-weight:700; margin:0 0 3px; color:var(--nh-text);
}
.page-configureproduct #sectionCycles .check-subtitle{
  font-size:21px; font-weight:800; line-height:1.2; margin:0; color:var(--nh-text);
}
/* Badge d'économie. Posé à cheval sur le bord il chevauchait la bordure
   et se détachait de la carte : il est ramené à l'intérieur, en haut à
   droite, et le <label> lui réserve sa place à droite. */
.page-configureproduct #sectionCycles .label-save{
  position:absolute; top:10px; right:10px; z-index:2;
  background:var(--nh-green); color:#fff;
  font-size:10px; font-weight:700; padding:3px 8px; line-height:1.4;
  border-radius:999px; text-transform:uppercase; letter-spacing:.03em;
  white-space:nowrap;
}
.page-configureproduct #sectionCycles .cycle-full-price{
  display:block; margin-top:4px;
  font-size:12px; color:var(--nh-muted); font-weight:400;
}

/* --- 3.4 Services additionnels ---------------------------------- */
/* La maquette les aligne en lignes pleine largeur, quel que soit le
   réglage « Addons Columns » du thème. */
.page-configureproduct .nh-addons .panel-check-group > [class*="col-"]{
  width:100%; max-width:100%; flex:0 0 100%;
}
.page-configureproduct .nh-addons .panel-check{
  border:1px solid var(--nh-border); border-radius:12px;
  background:#fff; box-shadow:none; margin-bottom:10px;
  transition:border-color .16s ease;
}
.page-configureproduct .nh-addons .panel-check:hover{ border-color:var(--nh-border-2); }
.page-configureproduct .nh-addons .panel-check.checked{
  border-color:var(--nh-red); background:var(--nh-red-soft);
}
.page-configureproduct .nh-addons .check > label{
  display:flex; align-items:center; gap:14px;
  padding:14px 18px; margin:0; width:100%;
}
/* Le prix passe à droite, comme la maquette : le nom et la description
   tiennent la colonne de gauche, le tarif la colonne de droite. */
.page-configureproduct .nh-addons .check-content{
  padding:0; text-align:left; flex:1; min-width:0;
  display:grid; grid-template-columns:1fr auto;
  column-gap:16px; align-items:center;
}
.page-configureproduct .nh-addons .check-title{ grid-column:1; grid-row:1; }
.page-configureproduct .nh-addons .check-desc{ grid-column:1; grid-row:2; }
.page-configureproduct .nh-addons .check-subtitle{
  grid-column:2; grid-row:1 / span 2; justify-self:end; white-space:nowrap;
}
/* Une option sans description ne doit pas laisser sa deuxième ligne vide. */
.page-configureproduct .nh-addons .check-desc:empty{ display:none; }

/* Badge d'option, tiré d'un marqueur en tête de description. */
.nh-addon-tag{
  display:inline-block; margin-left:8px; vertical-align:1px;
  font-size:10px; font-weight:700; padding:2px 8px; line-height:1.5;
  border-radius:999px; text-transform:uppercase; letter-spacing:.03em;
  background:var(--nh-red); color:#fff;
}
.nh-addon-tag-inclus, .nh-addon-tag-incluse, .nh-addon-tag-offert, .nh-addon-tag-offerte{
  background:var(--nh-green);
}
.nh-addon-tag-le-plus-choisi, .nh-addon-tag-populaire, .nh-addon-tag-recommande{
  background:var(--nh-amber); color:#3a2a05;
}
.page-configureproduct .nh-addons .check-title{
  font-size:14.5px; font-weight:700; margin:0 0 2px; color:var(--nh-text);
}
.page-configureproduct .nh-addons .check-subtitle{
  font-size:14px; font-weight:700; color:var(--nh-red); margin:0 0 2px;
}
.page-configureproduct .nh-addons .check-desc{
  font-size:12.5px; color:var(--nh-muted); margin:0; line-height:1.45;
}

/* --- 3.5 Récapitulatif — commun à tout le tunnel ----------------- */
/* Le bloc rouge plein écrasait la colonne et entrait en concurrence
   avec le bouton d'action. Carte claire, le rouge réservé au bouton.
   Porté sur .page-order et non sur une page précise : le récapitulatif
   est le même composant à chaque étape, il doit s'y voir pareil. */
.page-order .panel-summary{
  background:#fff !important; color:var(--nh-text) !important;
  border:1px solid var(--nh-border); border-radius:var(--nh-radius);
  box-shadow:var(--nh-shadow); overflow:hidden;
}
.page-order .panel-summary .panel-heading{
  padding:16px 20px; border-bottom:1px solid var(--nh-border);
  background:transparent;
}
.page-order .panel-summary .panel-title{
  font-size:15.5px; font-weight:700; color:var(--nh-text); margin:0;
}
/* Le pied du récapitulatif s'appelle .panel-footer, pas .summary-total :
   il porte le libellé (.price-total) et le montant (.price-amount). */
.page-order .panel-summary,
.page-order .panel-summary a,
.page-order .panel-summary .summary-list,
.page-order .panel-summary .list-item,
.page-order .panel-summary .item-name,
.page-order .panel-summary .item-value,
.page-order .panel-summary .panel-footer{
  color:var(--nh-text);
}
.page-order .panel-summary .panel-body{ padding:16px 20px; }
.page-order .panel-summary .list-item{
  display:flex; justify-content:space-between; gap:12px;
  font-size:13.5px; padding:9px 0;
  border-bottom:1px solid var(--nh-border);
}
.page-order .panel-summary .summary-list{
  list-style:none; margin:0; padding:0;
}
.page-order .panel-summary .list-item-main .item-name{ font-weight:600; }
.page-order .panel-summary .item-value{ font-weight:700; white-space:nowrap; }
.page-order .panel-summary .list-item-title{
  font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--nh-muted); border-bottom:none;
  padding-bottom:2px;
}
.page-order .panel-summary .panel-footer{
  background:#fafbfd; border-top:1px solid var(--nh-border);
  padding:16px 20px;
}
/* Sur le fond rouge d'origine ce libellé est blanc à 80% : sur la carte
   claire il devenait invisible. */
.page-order .panel-summary .price-total{
  font-size:14px; font-weight:700; color:var(--nh-text);
}
.page-order .panel-summary .price-amount{
  font-size:26px; font-weight:800; color:var(--nh-text);
}
.page-order .panel-summary .btn-checkout{
  width:100%; border-radius:11px; font-weight:700; font-size:15.5px;
  padding:15px; background:var(--nh-red); border-color:var(--nh-red); color:#fff;
}
.page-order .panel-summary .btn-checkout:hover{
  background:var(--nh-red-dark); border-color:var(--nh-red-dark); color:#fff;
}
.nh-reassure{ margin-top:14px; font-size:12.5px; color:var(--nh-muted); }
.nh-reassure div{ display:flex; align-items:flex-start; gap:8px; padding:4px 0; }
.nh-reassure svg{ color:var(--nh-green); flex:none; margin-top:3px; }

/* --- 3.6 Retour -------------------------------------------------- */
.page-configureproduct .nh-actions{ margin-top:22px; }

/* --- 3.7 Petits écrans ------------------------------------------- */
@media (max-width:1000px){
  .nh-feats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px){
  .nh-cfg-head h1{ font-size:22px; }
  .nh-feats{ grid-template-columns:1fr; }
}

/* --- 3.8 Options configurables ----------------------------------
   Le gabarit imbrique une .section par option dans une .section
   enveloppe (#productConfigurableOptions), plus un .panel-form :
   d'où un titre resté sans style, un cadre dans un cadre et une
   boîte grise autour du menu déroulant.
   ---------------------------------------------------------------- */

/* L'enveloppe ne doit rien dessiner. */
.page-configureproduct .main-content > .section:has(#productConfigurableOptions){
  background:transparent; border:none; border-radius:0;
  overflow:visible; margin-top:0; margin-bottom:0; padding:0;
}

/* Chaque option devient une carte, comme les autres sections. */
.page-configureproduct #productConfigurableOptions > .section{
  background:#fff; border:1px solid var(--nh-border);
  border-radius:var(--nh-radius); overflow:hidden;
  margin:0 0 18px;
}
.page-configureproduct #productConfigurableOptions > .section > .section-header{
  padding:18px 22px; margin:0; border-bottom:1px solid var(--nh-border);
}
.page-configureproduct #productConfigurableOptions > .section > .section-header .section-title{
  font-size:16px; font-weight:700; margin:0; color:var(--nh-text); line-height:1.3;
}
/* Le thème écrit .section .section-header>p{margin-bottom:...!important} :
   32px de vide sous la description, avant le trait de séparation. Le
   !important est subi, pas choisi — c'est le seul moyen d'y répondre. */
.page-configureproduct #productConfigurableOptions .section-desc{
  font-size:12.5px; color:var(--nh-muted);
  margin:4px 0 0; margin-bottom:0 !important;
}
.page-configureproduct #productConfigurableOptions > .section > .section-body{
  padding:20px 22px; margin:0;
}

/* Le panneau interne n'est qu'une enveloppe : c'est lui la boîte grise. */
.page-configureproduct #productConfigurableOptions .panel-form{
  background:transparent; border:none; box-shadow:none; margin:0;
}
.page-configureproduct #productConfigurableOptions .panel-form > .panel-body{
  padding:0;
}
/* Un menu déroulant d'un mot n'a pas besoin de toute la largeur. */
.page-configureproduct #productConfigurableOptions select.form-control{
  max-width:420px;
}
/* Les options à choix multiples gardent la présentation des services. */
.page-configureproduct #productConfigurableOptions .panel-check{
  border:1px solid var(--nh-border); border-radius:12px;
  background:#fff; box-shadow:none;
}
.page-configureproduct #productConfigurableOptions .panel-check.checked{
  border-color:var(--nh-red);
}
.page-configureproduct #productConfigurableOptions .check > label{
  display:flex; align-items:center; gap:14px; padding:14px 18px; margin:0; width:100%;
}
.page-configureproduct #productConfigurableOptions .check-content{
  padding:0; text-align:left; flex:1; min-width:0;
}

/* Sans description produit — cas des VPS — le corps de la carte du pack
   n'affichait qu'un rectangle blanc creux sous le bandeau sombre. */
.page-configureproduct .nh-pack-body:not(:has(.nh-feats)){
  display:none;
}


/* ===============================================================
   4. Étape « Configuration des domaines »
   =============================================================== */

.page-configuredomains{ background:var(--nh-bg); }

/* Même garde que sur les autres étapes : sans en-tête de la variante,
   celui du thème reste en place et la page garde son titre. */
.page-configuredomains:has(.nh-cfg-head) .main-header{ display:none; }

/* Les sections vivent dans le <form>, pas directement sous .main-content :
   c'est ce qui laissait le titre « Serveurs DNS » sans style. */
.page-configuredomains #frmConfigureDomains > .section{
  background:#fff; border:1px solid var(--nh-border);
  border-radius:var(--nh-radius); overflow:hidden;
  margin-top:0; margin-bottom:18px;
}
/* Celle des domaines ne porte rien : chaque domaine a déjà sa carte. */
.page-configuredomains #frmConfigureDomains > .section:has(.panel-domain-info){
  background:transparent; border:none; border-radius:0;
  overflow:visible; margin-bottom:18px;
}
.page-configuredomains #frmConfigureDomains > .section:has(.panel-domain-info) > .section-body{
  padding:0;
}
.page-configuredomains #frmConfigureDomains > .section > .section-header{
  padding:18px 22px; margin:0;
}
.page-configuredomains #frmConfigureDomains > .section > .section-header .section-title{
  font-size:16px; font-weight:700; margin:0; color:var(--nh-text); line-height:1.3;
}
.page-configuredomains #frmConfigureDomains > .section > .section-header .section-desc{
  font-size:12.5px; color:var(--nh-muted);
  margin:4px 0 0; margin-bottom:0 !important;
}

/* --- 4.1 Carte d'un domaine ------------------------------------- */
.page-configuredomains .panel-domain-info{
  background:#fff; border:1px solid var(--nh-border);
  border-radius:var(--nh-radius); box-shadow:none;
  margin:0 0 14px; overflow:hidden;
}
.page-configuredomains .domain-info{
  display:flex; align-items:center; gap:16px; padding:16px 20px;
}
.page-configuredomains .domain-info-icon{ flex:none; }
.page-configuredomains .domain-info-icon .svg-icon{ width:38px; height:38px; }
.page-configuredomains .domain-info-body{ flex:1; min-width:0; }
.page-configuredomains .domain-info-title{
  font-size:18px; font-weight:700; color:var(--nh-text);
  line-height:1.3; word-break:break-all;
}
.page-configuredomains .domain-info-bottom{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:6px;
}
.page-configuredomains .domain-info-period{
  font-size:13px; color:var(--nh-muted);
}
.page-configuredomains .domain-info-hosting .label{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px;
  text-transform:uppercase; letter-spacing:.03em;
}

/* --- 4.2 Champs additionnels (WHOIS, code EPP) ------------------- */
/* Le libellé occupait deux lignes étroites à gauche d'une phrase très
   large : la ligne se lisait mal. Libellé au-dessus, texte en dessous. */
.page-configuredomains .domain-info-additional{
  padding:16px 20px; border-top:1px solid var(--nh-border);
  background:#fafbfd;
}
.page-configuredomains .domain-info-additional .form-group.row{
  display:block; margin:0;
}
.page-configuredomains .domain-info-additional .col-form-label{
  width:auto; max-width:none; flex:none; padding:0 0 6px;
  font-size:13px; font-weight:600; color:var(--nh-text);
}
.page-configuredomains .domain-info-additional .col-form-label.col-checkbox,
.page-configuredomains .domain-info-additional .col-md-8{
  width:100%; max-width:none; flex:none; padding:0;
  font-size:12.5px; color:var(--nh-muted); line-height:1.5;
}

/* --- 4.3 Options de domaine ------------------------------------- */
/* N'apparaissent que si l'extension a Gestion DNS, Renvoi d'e-mails ou
   Protection ID activés dans WHMCS (Configuration → Domaines/TLD) :
   le gabarit teste ces trois drapeaux avant d'afficher le bloc. */
.page-configuredomains .domain-info-addons{
  padding:14px 20px; border-top:1px solid var(--nh-border);
}
.page-configuredomains .domain-addons-title{
  font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--nh-muted); margin:0 0 10px;
}
.page-configuredomains .domain-info-addons .panel-check{
  border:1px solid var(--nh-border); border-radius:12px;
  background:#fff; box-shadow:none; margin-bottom:8px;
}
.page-configuredomains .domain-info-addons .panel-check.checked{
  border-color:var(--nh-red); background:var(--nh-red-soft);
}
.page-configuredomains .domain-info-addons .check > label{
  display:flex; align-items:center; gap:14px;
  padding:12px 16px; margin:0; width:100%;
}
.page-configuredomains .domain-info-addons .check-content{
  padding:0; flex:1; min-width:0; text-align:left;
  display:grid; grid-template-columns:1fr auto; column-gap:16px; align-items:center;
}
.page-configuredomains .domain-info-addons .check-title{
  grid-column:1; grid-row:1; font-size:14px; font-weight:700; margin:0;
}
.page-configuredomains .domain-info-addons .check-desc{
  grid-column:1; grid-row:2; font-size:12.5px; color:var(--nh-muted); margin:0;
}
.page-configuredomains .domain-info-addons .check-subtitle{
  grid-column:2; grid-row:1 / span 2; justify-self:end;
  font-size:14px; font-weight:700; white-space:nowrap; margin:0;
}

/* --- 4.4 Serveurs de noms repliés -------------------------------- */
.nh-ns-note{
  display:flex; align-items:flex-start; gap:9px;
  margin:0 22px 4px; padding:12px 14px;
  background:var(--nh-green-soft, #e8f7ee); border-radius:10px;
  font-size:13px; color:#166534;
}
.nh-ns-note svg{ color:var(--nh-green); flex:none; margin-top:2px; }

.nh-ns{ margin:14px 22px 20px; }
.nh-ns-summary{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  cursor:pointer; list-style:none;
  padding:12px 16px; border:1px solid var(--nh-border); border-radius:12px;
  font-size:13.5px; font-weight:600; color:var(--nh-text);
  background:#fff; transition:border-color .15s ease;
}
.nh-ns-summary::-webkit-details-marker{ display:none; }
.nh-ns-summary:hover{ border-color:var(--nh-border-2); }
.nh-ns-summary svg{ color:var(--nh-muted); flex:none; transition:transform .18s ease; }
.nh-ns[open] .nh-ns-summary{
  border-bottom-left-radius:0; border-bottom-right-radius:0;
}
.nh-ns[open] .nh-ns-summary svg{ transform:rotate(180deg); }
.nh-ns > .section-body{
  border:1px solid var(--nh-border); border-top:none;
  border-radius:0 0 12px 12px; padding:18px 16px;
}
.page-configuredomains .nh-ns .panel-form{
  background:transparent; border:none; box-shadow:none; margin:0;
}
.page-configuredomains .nh-ns .panel-form > .panel-body{ padding:0; }

/* --- 4.5 Bandeau collé « Continuer » ----------------------------- */
/* Le bandeau est en position fixe : à la fin de la page il recouvrait
   la dernière carte. On réserve sa hauteur sous le formulaire. */
.page-configuredomains #frmConfigureDomains{ padding-bottom:24px; }
.page-configuredomains .bottom-action-sticky .btn-primary{
  border-radius:11px; font-weight:700;
  background:var(--nh-red); border-color:var(--nh-red); color:#fff;
}
.page-configuredomains .bottom-action-sticky .btn-primary:hover{
  background:var(--nh-red-dark); border-color:var(--nh-red-dark); color:#fff;
}

.page-configuredomains .nh-actions{ margin:22px 0 0; }


/* ===============================================================
   5. Étape « Vérifier & commander »
   Valeurs reprises de la maquette. Les moyens de paiement affichés
   restent ceux configurés dans WHMCS : rien n'est ajouté ici.
   =============================================================== */

.page-viewcart{ background:var(--nh-bg); }
.page-viewcart:has(.nh-cfg-head) .main-header{ display:none; }

/* --- 5.1 Sections en cartes -------------------------------------- */
.page-viewcart .main-content > .section,
.page-viewcart #frmCheckout > .section{
  background:#fff; border:1px solid var(--nh-border);
  border-radius:var(--nh-radius); overflow:hidden;
  margin-top:0; margin-bottom:16px;
}
.page-viewcart .main-content > .section > .section-header,
.page-viewcart #frmCheckout > .section > .section-header{
  padding:15px 20px; margin:0; border-bottom:1px solid var(--nh-border);
}
.page-viewcart .section-header .section-title{
  font-size:15.5px; font-weight:700; margin:0; color:var(--nh-text); line-height:1.3;
}
.page-viewcart .section-header .section-desc{
  font-size:12.5px; color:var(--nh-muted);
  margin:4px 0 0; margin-bottom:0 !important;
}
.page-viewcart .main-content > .section > .section-body,
.page-viewcart #frmCheckout > .section > .section-body{
  padding:18px 20px; margin:0;
}

/* Le panneau interne des sections n'est qu'une enveloppe. */
.page-viewcart .section-body > .panel,
.page-viewcart .section-body > .panel-form{
  background:transparent; border:none; box-shadow:none; margin:0;
}
.page-viewcart .section-body > .panel > .panel-body{ padding:0; }

/* --- 5.2 Le panier ----------------------------------------------- */
.page-viewcart .prod-name{ font-size:14.5px; font-weight:700; color:var(--nh-text); }
.page-viewcart .prod-price,
.page-viewcart .addon-price{ font-size:15px; font-weight:700; white-space:nowrap; }
.page-viewcart .renewal,
.page-viewcart .renewal-price,
.page-viewcart .prorata-date{ font-size:11.5px; color:var(--nh-muted); }
.page-viewcart .addon-name{ font-size:12.5px; color:var(--nh-muted); }
.page-viewcart .prod-actions .btn,
.page-viewcart .addon-actions .btn{
  border-radius:8px; width:32px; height:32px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
}

/* --- 5.3 Code promotionnel ---------------------------------------- */
/* Le bandeau rouge plein attirait l'œil au même niveau que le bouton
   de paiement, pour un champ facultatif. */
.page-viewcart .promo-code,
.page-viewcart [class*="promo"] .panel{
  background:transparent;
}
.page-viewcart .promo-code .form-control{
  border-radius:10px; border:1.5px solid var(--nh-border);
}
.page-viewcart .promo-code .btn{
  border-radius:10px; font-weight:700;
  background:var(--nh-navy); border-color:var(--nh-navy); color:#fff;
}
.page-viewcart .promo-code .btn:hover{ background:#26303f; border-color:#26303f; }

/* --- 5.4 Moyens de paiement --------------------------------------- */
.page-viewcart .panel-group-condensed .radio,
.page-viewcart .panel-group-condensed .panel{
  border:1.5px solid var(--nh-border); border-radius:11px;
  background:#fff; box-shadow:none; margin-bottom:9px;
}
.page-viewcart .panel-group-condensed .radio.active,
.page-viewcart .panel-group-condensed .panel.active{
  border-color:var(--nh-red); background:var(--nh-red-soft);
}
.page-viewcart .panel-group-condensed .radio > label,
.page-viewcart .panel-group-condensed .radio-content{
  display:flex; align-items:center; gap:13px;
  padding:14px 16px; margin:0; width:100%;
  font-size:14.5px; font-weight:600; color:var(--nh-text);
}

/* --- 5.5 Champs du formulaire ------------------------------------- */
.page-viewcart #frmCheckout .form-control{
  border-radius:10px; border:1.5px solid var(--nh-border);
  padding:11px 13px; font-size:14.5px;
}
.page-viewcart #frmCheckout .form-control:focus{
  border-color:var(--nh-red);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--nh-red) 22%, transparent);
}
.page-viewcart #frmCheckout label{
  font-size:12.5px; font-weight:600; color:var(--nh-text);
}

/* --- 5.6 Conditions et bouton de paiement -------------------------- */
/* La case des conditions s'appelle .order-checkbox dans le
   recapitulatif de commande. */
.page-order .panel-summary .order-checkbox,
.page-viewcart .panel-summary .accepttos,
.page-viewcart #accepttos-container{
  border:1.5px solid var(--nh-border); border-radius:10px;
  padding:11px 13px; margin-top:14px; background:#fff;
}
.page-viewcart .panel-summary .btn-checkout{
  width:100%; border-radius:11px; font-weight:700; font-size:16px;
  padding:16px; background:var(--nh-red); border-color:var(--nh-red); color:#fff;
}
.page-viewcart .panel-summary .btn-checkout:hover{
  background:var(--nh-red-dark); border-color:var(--nh-red-dark); color:#fff;
}

/* --- 5.7 Code promotionnel : sortir du bandeau rouge -------------- */
/* Le champ de promo reprend .search-box, le même composant que la
   recherche de domaine : sur cette page il occupait un bandeau rouge
   plein alors qu'il s'agit d'un champ facultatif. */
.page-viewcart .search-box{
  background:transparent; padding:0; border-radius:0;
  box-shadow:none; min-height:0; margin:0;
}
.page-viewcart .search-box .form-control{
  border:1.5px solid var(--nh-border); border-radius:10px;
  box-shadow:none; height:46px;
}
.page-viewcart .search-box .btn{
  border-radius:10px; height:46px; font-weight:700;
  background:var(--nh-navy); border-color:var(--nh-navy); color:#fff;
}
.page-viewcart .search-box .btn:hover{
  background:#26303f; border-color:#26303f; color:#fff;
}
.page-viewcart .search-box .btn span{ color:#fff; }

/* --- 5.8 « Dernière chance » ------------------------------------- */
/* Contenu produit par un hook WHMCS : on ne peut qu'encadrer. Les
   visuels fournis sont des images de catalogue qui ne correspondent
   pas à l'identité du site — même décision que sur l'étape produit. */
.page-viewcart .nh-lastchance{
  background:#fff; border:1px solid var(--nh-border);
  border-radius:var(--nh-radius); overflow:hidden;
  margin-top:0; margin-bottom:16px; padding:0;
}
.page-viewcart .nh-lastchance .section-header{
  padding:15px 20px; margin:0; border-bottom:1px solid var(--nh-border);
}
.page-viewcart .nh-lastchance .section-title{
  font-size:15.5px; font-weight:700; color:var(--nh-text);
}
.page-viewcart .nh-lastchance img{ display:none; }
.page-viewcart .nh-lastchance .btn{
  border-radius:8px; font-weight:700; font-size:12.5px;
  border:1.5px solid var(--nh-red); background:#fff; color:var(--nh-red);
}
.page-viewcart .nh-lastchance .btn:hover{
  background:var(--nh-red); border-color:var(--nh-red); color:#fff;
}

/* --- 5.9 Réassurance sous le récapitulatif ----------------------- */
.nh-secure{
  display:flex; align-items:flex-start; justify-content:center; gap:7px;
  margin-top:12px; font-size:12px; color:var(--nh-muted); text-align:center;
  line-height:1.45;
}
.nh-secure svg{ color:var(--nh-green); flex:none; margin-top:3px; }

/* --- 5.10 Case des conditions ------------------------------------ */
.page-order .panel-summary + .order-checkbox,
.page-viewcart .sidebar-sticky > .order-checkbox{
  display:flex; align-items:flex-start; gap:10px;
  border:1.5px solid var(--nh-border); border-radius:10px;
  background:#fff; padding:11px 13px; margin-top:14px;
  font-size:12.5px; color:var(--nh-muted);
}
.page-viewcart .sidebar-sticky > .order-checkbox a{
  color:var(--nh-red); font-weight:600;
}

/* --- 5.11 Corrections relevées sur le rendu réel ------------------ */

/* Le bandeau du code promo restait rouge : le fond vient de
   .search-box-primary{background:var(--primary-block-bg-h)}. Plutôt que
   de surenchérir sur le sélecteur, on neutralise la variable à la
   source — le composant garde toute sa mécanique, il perd sa couleur. */
.page-viewcart .search-box,
.page-viewcart .search-box-primary,
.page-viewcart .banner-primary{
  --primary-block-bg-h: transparent;
  background:transparent;
  box-shadow:none; padding:0; margin:0; border-radius:0;
}
.page-viewcart .search-box .search-field-icon,
.page-viewcart .search-box .search-field-icon > i{ color:var(--nh-muted); }
.page-viewcart .search-box .form-control,
.page-viewcart .search-box .input-group{
  border:1.5px solid var(--nh-border); border-bottom:1.5px solid var(--nh-border);
  border-radius:10px; background:#fff;
}

/* « Détails du paiement » et les autres titres imbriqués : le gabarit
   place une .section dans une .section, la carte ne les atteignait pas. */
.page-viewcart .main-content .section .section{
  background:#fff; border:1px solid var(--nh-border);
  border-radius:var(--nh-radius); overflow:hidden;
  margin-top:0; margin-bottom:16px;
}
.page-viewcart .main-content .section:has(> .section),
.page-viewcart #frmCheckout .section:has(> .section){
  background:transparent; border:none; border-radius:0;
  overflow:visible; margin-bottom:0; padding:0;
}
.page-viewcart .main-content .section .section > .section-header{
  padding:15px 20px; margin:0; border-bottom:1px solid var(--nh-border);
}
.page-viewcart .main-content .section .section > .section-body{
  padding:18px 20px; margin:0;
}

/* La case des conditions, sous le récapitulatif. */
.page-viewcart .sidebar-sticky > .order-checkbox{
  display:block; border:1.5px solid var(--nh-border); border-radius:10px;
  background:#fff; padding:12px 14px; margin-top:14px;
  font-size:12.5px; color:var(--nh-muted);
}
.page-viewcart .sidebar-sticky > .order-checkbox .checkbox{ margin:0; }
.page-viewcart .sidebar-sticky > .order-checkbox label{
  display:flex; align-items:flex-start; gap:10px; margin:0; font-weight:400;
}
.page-viewcart .sidebar-sticky > .order-checkbox a{
  color:var(--nh-red); font-weight:600;
}