/* ===========================================================================
   Panier - configuration d'un produit (orderforms/shufytheme_cart)

   Ne redessine PAS les cartes d'option : le theme les habille deja
   (.default__shadow__panel, .logo__based__configoption et son logo en :after).
   Ce fichier n'ajoute que les trois choses qui manquaient dans une carte, et
   qui sont du texte, pas du decor :

     .ns-cart__desc  une sous-ligne sous le titre  (fin de support, effet)
     .ns-cart__tag   une pastille de qualification (DERNIERE VERSION, LTS...)
     .ns-cart__note  une consequence a lire avant de choisir

   Le contenu vient de la table nsCartOpts, en tete de
   orderforms/shufytheme_cart/configureproduct.tpl - jamais d'ici.

   Charge par includes/head.tpl sur la seule page configureproduct.
   =========================================================================== */

:root {
	/* L'accent du theme releve au rendu sur le coin de la carte retenue :
	   #5368f1. Juste a la limite pour du texte - 4,55:1 sur blanc. --ns-cart-ac
	   descend d'un cran dans la rampe pour tenir 5,36:1 sur les libelles ;
	   --ns-cart-ac-vif reste l'accent d'origine, pour ce qui n'est pas du texte. */
	--ns-cart-ac: #4259f0;
	--ns-cart-ac-vif: #5368f1;
	--ns-cart-ac-fond: #e2e5f9;

	--ns-fond: #ffffff;
	--ns-fond-2: #f6f7f9;
	--ns-trait: #d5d9df;
	--ns-texte: #12151c;
	--ns-texte-2: #585f6d;
	--ns-gris: #828a99;

	--ns-ok: #147b3a;
	--ns-attention: #9c4d11;
	--ns-critique: #c0362c;
	--ns-info: #097990;
	--ns-ok-fond: #e7f5ec;
	--ns-attention-fond: #fdeee3;
	--ns-critique-fond: #fdeceb;
	--ns-info-fond: #ebf7fa;
}

body.body__dark {
	--ns-cart-ac: #8f9df6;
	--ns-cart-ac-vif: #5368f1;
	--ns-cart-ac-fond: rgb(83 104 241 / 14%);

	--ns-fond: #151821;
	--ns-fond-2: #1b1f29;
	--ns-trait: #2a303c;
	--ns-texte: #eef0f4;
	--ns-texte-2: #9aa2b1;
	--ns-gris: #727a8a;

	--ns-ok: #3fbb74;
	--ns-attention: #dc8438;
	--ns-critique: #f0776a;
	--ns-info: #45afc4;
	--ns-ok-fond: rgb(63 187 116 / 14%);
	--ns-attention-fond: rgb(220 132 56 / 14%);
	--ns-critique-fond: rgb(240 119 106 / 14%);
	--ns-info-fond: rgb(69 175 196 / 14%);
}

/* --- La sous-ligne -------------------------------------------------------
   Elle porte le fait qui fait choisir (une date de fin de support), donc
   elle est sous le titre et pas sous le prix. Le titre du theme est en
   "margin: 0 !important" dans .logo__based__configoption : c'est cette
   sous-ligne qui pose l'ecart. */
.panel__check__cart__group__content .ns-cart__desc {
	margin: 3px 0 6px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--ns-gris);
}

/* --- La consequence ------------------------------------------------------
   Sous le prix, parce qu'elle ne se lit qu'une fois le choix envisage
   ("vous devez saisir la cle SSH ci-dessous"). Plus sombre que la
   sous-ligne : c'est une action, pas un renseignement. */
.panel__check__cart__group__content .ns-cart__note {
	margin: 5px 0 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--ns-texte-2);
}

/* --- La pastille ---------------------------------------------------------
   Elle prend la place du badge "GRATUIT !" du theme, jamais les deux a la
   fois : voir configureproduct.tpl. Fond sourd et texte teinte plutot que
   l'inverse - six cartes a pastille pleine feraient un arc-en-ciel, et
   aucune de ces valeurs n'appelle un geste. */
.panel__check__cart__group__content .ns-cart__tag {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 8px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .3px;
	text-transform: uppercase;
	white-space: nowrap;
	background: var(--ns-info-fond);
	color: var(--ns-info);
}

.panel__check__cart__group__content .ns-cart__tag--ok {
	background: var(--ns-ok-fond);
	color: var(--ns-ok);
}

.panel__check__cart__group__content .ns-cart__tag--att {
	background: var(--ns-attention-fond);
	color: var(--ns-attention);
}

/* Le rouge est reserve a ce qui ne recoit PLUS de correctifs de securite -
   pas a ce qui va s'arreter, qui est en ambre. C'est la seule pastille de la
   page qui doit faire hesiter. */
.panel__check__cart__group__content .ns-cart__tag--crit {
	background: var(--ns-critique-fond);
	color: var(--ns-critique);
}

/* La pastille d'accent. Elle ne dit pas un ETAT comme les quatre autres (a
   jour, LTS, bientot fini, plus de correctifs) mais une MISE EN AVANT : c'est
   le palier qu'on pousse. D'ou l'accent du theme, et pas un ton semantique -
   peindre "Reprise apres sinistre" en ambre le ferait lire comme un avertisse-
   ment, alors que c'est le haut de gamme. Fond sourd et texte teinte, comme
   les autres : une seule pastille pleine par page suffirait a la casser. */
.panel__check__cart__group__content .ns-cart__tag--ac {
	background: var(--ns-cart-ac-fond);
	color: var(--ns-cart-ac);
}

/* --- Le bandeau d'un groupe ----------------------------------------------
   Il se place entre le titre du groupe et les cartes : apres les cartes il
   serait lu trop tard, avant le titre il n'aurait pas de sujet.

   DEUX FORMES, et l'ecart entre les deux est le sujet :

     --justif  encadre teinte. Il PLAIDE UN PRIX, et rien d'autre. UN SEUL par
               page - deux encadres teintes et aucun des deux n'est plus lu.
     --note    une simple ligne grise. Elle PRECISE, elle ne plaide pas.

   Le cyan de --ns-info est deliberement DIFFERENT de l'accent : le bandeau ne
   demande aucun geste, il informe. S'il portait l'accent il entrerait en
   concurrence avec les cartes, qui elles en attendent un.

   Le contenu vient de nsCartGroupes, en tete de
   orderforms/shufytheme_cart/configureproduct.tpl - jamais d'ici. */
.configoption__optiontype__2 > .ns-cart__bandeau {
	display: block;
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--ns-texte-2);
}

.configoption__optiontype__2 > .ns-cart__bandeau--justif {
	padding: 11px 15px;
	border-left: 3px solid var(--ns-info);
	border-radius: 0 8px 8px 0;
	background: var(--ns-info-fond);
}

/* La ligne sourde suit le titre du groupe de pres : elle en fait partie, elle
   ne s'en detache pas. D'ou l'ecart reduit au-dessus. */
.configoption__optiontype__2 > .ns-cart__bandeau--note {
	margin-top: -6px;
	max-width: 72ch;
	color: var(--ns-gris);
}

/* Le theme met les <strong> a la couleur du corps de texte ; ici la premiere
   phrase doit ressortir du paragraphe qu'elle ouvre. */
.configoption__optiontype__2 > .ns-cart__bandeau strong {
	font-weight: 600;
	color: var(--ns-texte);
}

.configoption__optiontype__2 > .ns-cart__bandeau--note strong {
	color: var(--ns-texte-2);
}

/* --- L'icone d'une valeur d'option ---------------------------------------
   Elle prend la place du ":after" du theme, qui chargeait un fichier disparu
   du serveur (404) et laissait donc les cartes nues. Meme geometrie, pour
   qu'une carte a icone Font Awesome et une carte a logo distant s'alignent :
   le ":after" fait 30px de cote, cale a "right: 20px", centre verticalement.

   pointer-events: none - le <label> couvre toute la carte et doit continuer
   a recevoir le clic. */
.logo__based__configoption .ns-cart__ico {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	width: 30px;
	font-size: 23px;
	line-height: 1;
	text-align: center;
	color: var(--ns-gris);
	pointer-events: none;
}

/* La carte retenue teinte son icone : c'est la seule qui ait un etat, et le
   gris ne le dirait pas. */
.logo__based__configoption:has(.configoption__radio__input:checked) .ns-cart__ico {
	color: var(--ns-cart-ac);
}

@media only screen and (max-width: 767px) {
	.logo__based__configoption .ns-cart__ico {
		right: 13px;
		width: 26px;
		font-size: 20px;
	}
}

/* Un champ personnalise que cart-config.js met de cote. La regle est ecrite
   parce que [hidden] est une simple valeur par defaut du navigateur : la
   moindre declaration de "display" sur .form-group la battrait. */
.form-group[data-ns-cart-champ][hidden],
[data-ns-cart-bloc][hidden] {
	display: none;
}

/* ===========================================================================
   Le champ de cle publique SSH

   WHMCS rend un <textarea rows="3"> nu, aide en dessous. Trois choses ne vont
   pas pour ce contenu-la, et aucune n'est une question de gout :

   1. Une cle est une seule "ligne" de 80 a 700 caracteres SANS espace. En
      police proportionnelle et sans coupure, elle deborde du cadre ; en
      chasse fixe et coupee n'importe ou, elle se relit et se compare.
   2. rows="3" ne montre pas une cle RSA en entier - or ce qu'on veut voir
      d'un coup d'oeil apres avoir colle, c'est justement qu'il n'en manque
      pas un bout.
   3. L'aide etait SOUS le champ. On lit une consigne avant de coller.
   =========================================================================== */

/* --- Hierarchie libelle / aide -------------------------------------------
   ELLE ETAIT INVERSEE, et c'etait de notre fait. Le libelle du theme sort en
   13px/300/#5b6278 ; .ns-cart__aide n'ayant pas de graisse declaree, elle
   heritait du 600 du panneau et sortait plus grasse ET plus sombre que le
   libelle qu'elle explique. L'oeil lisait l'explication avant de savoir a
   quoi elle se rapportait.

   On remonte la GRAISSE du libelle plutot que de seulement affaiblir l'aide :
   c'est le libelle qui est le point d'ancrage du champ.

   Pas de "color" ici, et c'est delibere : le theme declare
   "#order-standard_cart label { color: var(--color-h-hover) !important }".
   Le battre demanderait un second !important dans un projet qui n'en compte
   qu'un seul, justifie. Or ce n'est pas necessaire - la couleur du theme
   (#5b6278) est deja plus sombre que le gris de l'aide (#7d949a), et la
   graisse 500 contre 400 acheve la distinction. Verifie au rendu. */
#order-standard_cart .ns-cart__attache label,
#order-standard_cart .ns-cart__host label,
#order-standard_cart [data-ns-cart-bloc] label {
	font-size: 13px;
	font-weight: 500;
}

.ns-cart__aide {
	margin: 2px 0 8px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--ns-gris);
}

/* "facultatif" accole au libelle : un champ qu'on peut sauter doit le dire
   la ou on le lit, pas dans la phrase d'aide en dessous. */
.ns-cart__opt {
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 8px;
	background: var(--ns-fond-2);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .2px;
	color: var(--ns-gris);
	text-transform: lowercase;
}

/* --- Le champ reclame par une valeur d'option ----------------------------
   Il est rendu juste sous les cartes du groupe qui le reclame. Pas de titre
   de section : ce n'est pas une etape, c'est la suite du choix. La marge
   negative compense le "mb-6" du groupe d'options au-dessus - c'est la
   PROXIMITE qui porte le lien, elle doit etre franche. */
.ns-cart__attache {
	margin-top: -14px;
}

/* --- Le nom de machine ---------------------------------------------------
   Plus de titre de section ni de "field-container" pleine hauteur : c'est un
   reglage facultatif, il ne merite pas la meme annonce qu'un choix. */
.ns-cart__host {
	margin-top: 4px;
}

/* PORTE PAR #order-standard_cart, ET C'EST NECESSAIRE. Le theme declare
   "#order-standard_cart .form-control { border: 1px solid var(--border-color);
   font-size: 14px }" - specificite (1,1,0), qu'un selecteur sans identifiant
   ne bat pas. Constate au pixel : la bordure rouge de la cle privee ne
   s'appliquait pas, le champ restait gris. L'identifiant est celui du
   gabarit qu'on edite, pas celui d'un module tiers. */
#order-standard_cart [data-ns-cart-format="cle"] textarea.form-control {
	/* La pile s'arrete a une fonte a chasse fixe quelconque : ce qui compte
	   ici est la largeur constante, pas le dessin. */
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 12.5px;
	line-height: 1.6;
	/* Trois lignes a vide, pas huit. Un rectangle gris de 106px annonce un
	   travail de redaction pour une ligne a coller. cart-config.js l'etend a
	   la saisie, donc la cle reste visible en entier une fois collee. */
	min-height: 4.6em;
	resize: vertical;

	/* Une cle n'a pas d'espace : sans "anywhere" le navigateur refuse de la
	   couper et sort une ligne unique a defilement horizontal. */
	overflow-wrap: anywhere;
	word-break: break-all;
	white-space: pre-wrap;
}

/* --- Le compte rendu de saisie -------------------------------------------
   Pose par cart-config.js sous le champ. Il ne bloque RIEN : le module peut
   accepter des formes qu'on ne connait pas, et une validation du theme
   deviendrait une seconde verite, forcement en retard sur la sienne. Il
   renseigne, il n'arbitre pas - sauf a dire tres fort qu'on vient de coller
   une cle privee, qui est le seul cas ou se taire serait grave. */
.ns-cart__etat {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 8px 0 0;
	font-size: 12.5px;
	line-height: 1.45;
	font-weight: 500;
	color: var(--ns-texte-2);
}

.ns-cart__etat::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-top: .45em;
	border-radius: 50%;
	background: currentColor;
}

.ns-cart__etat--ok   { color: var(--ns-ok); }
.ns-cart__etat--att  { color: var(--ns-attention); }
.ns-cart__etat--crit { color: var(--ns-critique); font-weight: 600; }

/* Coller une cle privee est la seule erreur de cette page qui se paie hors
   du site : le cadre du champ le dit aussi, pas seulement la ligne dessous. */
#order-standard_cart [data-ns-cart-format="cle"].ns-cart--danger textarea.form-control {
	border-color: var(--ns-critique);
}

/* --- "Je n'ai pas encore de cle" -----------------------------------------
   On marque "Cle SSH" comme recommande ; sans ce depliant, le client qui
   suit la recommandation et n'a pas de cle n'a que trois issues, dont deux
   sont mauvaises (repartir sur le mot de passe, ou fermer l'onglet).

   En <details> : replie, ouvrable au clavier, et sans une ligne de script. */
.ns-cart__aideplus {
	margin-top: 10px;
	font-size: 12.5px;
}

.ns-cart__aideplus > summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	padding: 2px 0;
	cursor: pointer;
	font-weight: 500;
	color: var(--ns-info);
	list-style: none;
}

.ns-cart__aideplus > summary::-webkit-details-marker {
	display: none;
}

/* Le chevron dit dans quel sens ca va s'ouvrir - un libelle souligne seul se
   confond avec un lien qui quitterait la page, ce qui, sur un formulaire de
   commande a moitie rempli, est exactement ce qu'on veut eviter. */
.ns-cart__aideplus > summary::before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 0 4px 5px;
	border-color: transparent transparent transparent currentColor;
	transition: transform .15s ease;
}

.ns-cart__aideplus[open] > summary::before {
	transform: rotate(90deg);
}

.ns-cart__aideplus > summary:focus-visible {
	outline: 2px solid var(--ns-info);
	outline-offset: 2px;
	border-radius: 3px;
}

.ns-cart__aideplus__corps {
	margin-top: 8px;
	padding: 12px 14px;
	border-radius: 8px;
	background: var(--ns-fond-2);
	color: var(--ns-texte-2);
	font-size: 12.5px;
	line-height: 1.5;
}

/* La taille est reposee sur chaque enfant : le theme dimensionne les <p> du
   panier a ~20px, et l'heritage depuis .ns-cart__aideplus__corps ne le bat
   pas. Sans ca l'intro du depliant sortait plus grosse que le libelle du
   champ qu'elle explique. */
.ns-cart__aideplus__corps p,
.ns-cart__aideplus__corps li,
.ns-cart__aideplus__corps span {
	font-size: 12.5px;
	line-height: 1.5;
}

.ns-cart__aideplus__corps p {
	margin: 0 0 8px;
}

/* Le theme met "list-style: none" sur les listes du panier : les deux etapes
   sortaient sans leurs numeros, alors que l'ordre est justement ce qui les
   rend suivables. */
.ns-cart__aideplus__corps ol {
	margin: 0;
	padding-left: 20px;
	list-style: decimal outside;
}

.ns-cart__aideplus__corps li {
	margin-bottom: 8px;
	list-style: decimal outside;
}

.ns-cart__aideplus__corps li::marker {
	color: var(--ns-gris);
	font-weight: 600;
}

.ns-cart__aideplus__corps li:last-child {
	margin-bottom: 0;
}

.ns-cart__aideplus__corps code {
	display: block;
	margin-top: 4px;
	padding: 6px 9px;
	border-radius: 6px;
	background: var(--ns-fond);
	border: 1px solid var(--ns-trait);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 12px;
	color: var(--ns-texte);
	overflow-x: auto;
	/* Une commande se selectionne d'un double-clic ; elle ne doit pas se
	   couper au milieu d'un chemin. */
	white-space: pre;
}

.ns-cart__aideplus__fin {
	margin: 10px 0 0;
	font-size: 12px;
	color: var(--ns-gris);
}

/* --- L'etat "choisi" d'une carte de cycle --------------------------------
   Le theme le rendait comme un bouton plein, a la place exacte du bouton
   "Choisir" des autres cartes : un bouton qui ne declenche rien invite un
   clic sans effet. Premiere tentative - le meme mot en gris sombre, sans
   fond - ne se voyait plus du tout : a cote de deux pastilles cyan pleines,
   un mot presque noir se lisait comme du texte oublie la.

   Il faut donc qu'il soit VISIBLE sans etre un bouton. Trois choses le
   distinguent : la coche, la couleur d'accent, et la graisse. Aucun fond,
   aucun contour, aucun curseur de clic - c'est un etat.

   Il garde sa hauteur, sinon les trois cartes ne s'alignent plus. */
#order-standard_cart .icheck__control__check__cycle__btn .cycle__selected {
	gap: 6px;
	background: transparent;
	color: var(--ns-cart-ac);
	font-weight: 700;
	letter-spacing: .2px;
	cursor: default;
}

/* Echappement unicode plutot que le caractere : la regle du projet interdit
   les non-ASCII dans le CSS. */
#order-standard_cart .icheck__control__check__cycle__btn .cycle__selected::before {
	content: "\2713";
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

/* L'asterisque des champs obligatoires est posee par le JS en meme temps que
   l'attribut required - le champ n'est obligatoire que tant qu'il est
   visible, une asterisque ecrite en dur mentirait des que JS manque. */
.ns-cart__req {
	color: var(--ns-critique);
	font-weight: 700;
}

/* ===========================================================================
   Les cartes de cycle de facturation
   =========================================================================== */

/* --- Le bandeau "Meilleur choix" -----------------------------------------
   Le theme le pose en "position: absolute; left: 0; top: 12px" - c'est-a-dire
   a la hauteur exacte du titre du cycle, qui est centre. Sur une carte de
   250px, "Semi-annuel" passait DESSOUS et se lisait "mi-annuel". Et sous
   768px le theme reglait le probleme en mettant "font-size: 0" : le libelle
   disparaissait, il ne restait qu'un eclair jaune qui n'explique rien.

   Il devient un bandeau pleine largeur en tete de carte. Les deux triangles
   qui lui donnaient sa forme de fanion ne valent plus rien une fois qu'il
   occupe toute la largeur. */
#order-standard_cart .best__pricing__cycle__badge {
	left: 0;
	right: 0;
	top: 0;
	height: 26px;
	padding: 0 10px;
	justify-content: center;
	border-radius: 8px 8px 0 0;
	font-size: 12px;
	font-weight: 600;
}

#order-standard_cart .best__pricing__cycle__badge::before,
#order-standard_cart .best__pricing__cycle__badge::after {
	display: none;
}

/* La place du bandeau est reservee sur TOUTES les cartes de la grille, pas
   seulement sur celle qui le porte : sinon le titre de la carte designee
   descend de 26px et les trois titres ne s'alignent plus. C'est le seul
   endroit ou l'espace vide vaut mieux que l'espace repris. */
.panel__check__cart__choosecycle__group:has(.best__pricing__cycle__badge:not(.d-none)) .default__shadow__panel__body__small {
	padding-top: 32px;
}

/* ===========================================================================
   Compacter les cartes de cycle

   Elles faisaient 256 px de haut pour trois nombres. Le gros du gaspillage
   n'etait pas dans le texte mais dans une reserve : le bloc du bouton est en
   "position: absolute" ancre a 20px du bas, et le theme degageait sa place
   avec un "padding-bottom: 95px" sur le contenu - pour un bloc de 45px, dont
   10 venaient de la marge d'un conteneur de frais desormais VIDE.

   Contenu reel : 108 px. Reserve : 95 px. On rend la reserve a sa taille.
   =========================================================================== */

/* Le conteneur des frais est vide depuis que la mention "GRATUIT !" a ete
   remplacee par une ligne unique au-dessus de la grille. ":has(> *)" teste
   la presence d'un ENFANT, la ou ":empty" echouerait : Smarty y laisse des
   blancs. Quand il porte a nouveau quelque chose, sa marge revient. */
#order-standard_cart .cycle__setep__fees__wrapper:not(:has(> *)) {
	margin-top: 0;
}

#order-standard_cart .icheck__control__check__cycle__btn {
	bottom: 14px;
}

/* La reserve du bas. Le theme la pose en
   "#order-standard_cart .cart__choose__cycle__label .cart__choose__cycle__content"
   - specificite (1,2,0) - et un selecteur en (1,1,0) ne la bat pas : releve
   au rendu, le padding restait a 95px et la carte ne maigrissait pas. */
#order-standard_cart .cart__choose__cycle__label .cart__choose__cycle__content {
	padding-bottom: 40px;
}

#order-standard_cart .cycle__select,
#order-standard_cart .cycle__selected {
	height: 30px;
	font-size: 12.5px;
}

/* Le prix reste l'element dominant de la carte, mais 24px sur une carte de
   226px de large etait le seul reglage qui imposait sa hauteur au reste. */
#order-standard_cart .cart__choose__cycle__content p.coodiv-text-6 {
	font-size: 20px;
	line-height: 1.3;
}

#order-standard_cart .cart__choose__cycle__content h6 {
	font-size: 14.5px;
	margin-bottom: 5px;
}

#order-standard_cart .cart__choose__cycle__content__saving {
	font-size: 10.5px;
	margin-bottom: 2px;
}

#order-standard_cart .cart__choose__cycle__content span.coodiv-text-12 {
	font-size: 12px;
}

/* --- Les deux lignes absentes de la carte mensuelle ----------------------
   Elle n'a ni remise ni prix mensuel equivalent - le second serait le meme
   nombre que le prix affiche juste au-dessus. Les deux lignes doivent tout
   de meme occuper leur hauteur, sinon les prix et les boutons des trois
   cartes ne sont plus sur une meme ligne.

   Celle du haut porte "Prix de reference" : c'est ce prix qui sert de base
   au "33 %" des cartes voisines, donc l'espace dit quelque chose au lieu
   d'etre reserve. Meme gabarit que .cart__choose__cycle__content__saving,
   mais en gris - ce n'est pas une remise. */
.ns-cart__ref {
	display: block;
	margin-bottom: 4px;
	min-height: 17px;
	font-size: 11px;
	font-weight: 500;
	line-height: 17px;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--ns-gris);
}

.ns-cart__equiv-vide {
	display: block;
	height: 1.5em;
	font-size: 12px;
}

/* --- La mention unique des frais d'installation --------------------------
   Remplace les pastilles vertes repetees sur chaque carte. Discrete, sous le
   titre de section : c'est une precision, pas un argument. */
.ns-cart__mention {
	margin: 2px 0 14px;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--ns-gris);
}

/* --- Le renouvellement, sous le total ------------------------------------
   "Total a payer aujourd'hui" sous-entendait une suite sans jamais la dire. */
.ns-cart__recurrence {
	display: block;
	margin-top: 4px;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--ns-texte-2);
}

/* La ligne de prix est en "align-items: baseline" chez le theme : une
   pastille seule s'y aligne mal des qu'elle est le seul enfant. */
.logo__based__configoption .panel__check__cart__group__content .panel__check__cart__group__pricing {
	align-items: center;
	margin-bottom: 0;
}

/* Le logo du systeme est en :after a "right: 20px" sur 30px de large : il
   occupe donc les 50 derniers pixels de la carte. Le theme n'en reservait
   que 35 - assez tant qu'une carte ne portait qu'un titre court, plus du
   tout des qu'une sous-ligne passe sur deux lignes et vient se centrer a
   la hauteur exacte du logo. On reserve la largeur reelle. */
.logo__based__configoption .panel__check__cart__group__content {
	padding-right: 50px;
}

/* Sous 768px le theme redescend le logo a "right: 13px" sur 26px. */
@media only screen and (max-width: 767px) {
	.logo__based__configoption .panel__check__cart__group__content {
		padding-right: 39px;
	}
}