.gg-qc-add-wrap {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
            margin-top: 18px;
        }

        .gg-qc-qty-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
        }

        .gg-qc-qty,
        .gg-qc-line-qty,
        .wpcf7 input,
        .wpcf7 textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }

        .gg-qc-qty {
            width: 80px;
        }

        /* .gg-qc-add n'est plus dans cette liste : sa forme et sa
           graisse sont celles de TOUS les boutons du site, décrites
           une fois dans socle.css. Les trois autres sont des boutons
           internes au panier, ils gardent leur gabarit. */
        .gg-qc-clear,
        .gg-qc-remove,
        .wpcf7-submit {
            cursor: pointer;
            border: 0;
            border-radius: 999px;
            padding: 12px 18px;
            font-weight: 700;
        }

        .gg-qc-add {
            cursor: pointer;
        }

        .wpcf7-submit {
            background: #111;
            color: #fff;
        }

        .gg-qc-view-cart {
            font-weight: 600;
            text-decoration: underline;
        }

        .gg-qc-page {
            max-width: 980px;
            margin: 0 auto 28px;
        }

.gg-qc-item {
    display: grid;
    grid-template-columns: 44px 1fr 120px 120px;
    gap: 16px;
    align-items: center;
    padding: 18px;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    margin-bottom: 14px;
    background: #fff;
}

        .gg-qc-thumb-link {
            display: block;
        }

        .gg-qc-thumb {
            width: 92px;
            height: 92px;
            object-fit: cover;
            border-radius: 10px;
            background: #f3f3f3;
            display: block;
        }

        .gg-qc-thumb-placeholder {
            border: 1px dashed #ddd;
        }

        .gg-qc-item-main {
            min-width: 0;
        }

        .gg-qc-item-title {
            font-weight: 800;
            display: inline-block;
            margin-bottom: 5px;
        }

        /*
         * Prix désactivé dans le panier pour le moment.
         * La classe est conservée pour futur usage.
         */
        .gg-qc-price {
            display: none;
            opacity: .75;
            font-size: 14px;
        }

        .gg-qc-qty-col label {
            display: block;
            font-weight: 700;
            margin-bottom: 6px;
        }

        .gg-qc-remove,
        .gg-qc-clear {
            background: #f4f4f4;
        }

        .gg-qc-empty {
            padding: 24px;
            border: 1px dashed #ccc;
            border-radius: 14px;
            text-align: center;
        }
		.gg-qc-form-disabled {
    display: none !important;
}

.gg-qc-empty-title {
    font-weight: 800;
    font-size: 18px;
    margin-bottom: 8px;
}

.gg-qc-empty p {
    margin: 8px 0;
}

/* LA CONFIRMATION D'ENVOI — 16/10.
   Même gabarit que le panier vide, mais un trait plein et l'or de la
   charte : le pointillé dit « il manque quelque chose », ce qui est
   exactement le contraire du message. Classe neuve, donc aucune règle
   #page-container à contourner ici. */
.gg-qc-sent {
    padding: 24px;
    border: 2px solid #D5AE05;
    border-radius: var(--mc-rayon-carte, 12px);
    background: rgba(213, 174, 5, .06);
    text-align: center;
}

.gg-qc-sent:focus {
    /* Reçoit le focus par script, jamais au clavier : l'anneau n'aurait
       rien à signaler. */
    outline: none;
}

.gg-qc-sent-title {
    font-weight: 800;
    font-size: 20px;
    color: #4D4D4D;
    margin-bottom: 8px;
}

.gg-qc-sent p {
    margin: 8px 0 20px;
}

/* Le bouton de secours respire. Il était collé au paragraphe tant
   qu'il portait les classes Divi, qui emportaient leur propre marge ;
   celles du site n'en ont pas, et c'est tant mieux — une marge de
   bouton n'a rien à faire dans la définition du bouton. */
.gg-qc-empty .gg-ref-cta {
    margin-top: 16px;
}

.gg-qc-contact-link {
    display: inline-flex;
    margin-top: 12px;
    padding: 12px 18px;
    border-radius: 999px;
    background: #d58900;
    color: #fff !important;
    font-weight: 800;
    text-decoration: none;
}

.gg-qc-contact-link:hover {
    background: #111;
    color: #fff !important;
}

        .gg-qc-cf7-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }

        .gg-qc-menu-icon {
            position: relative;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 66px;
            padding: 0 14px;
            color: #222;
            font-weight: 700;
            text-decoration: none;
            line-height: 1;
        }

        .gg-qc-menu-icon:hover {
            color: #d58900;
        }

        .gg-qc-menu-svg {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .gg-qc-menu-svg svg {
            display: block;
        }

        .gg-qc-menu-label {
            display: inline-block;
        }

        .gg-qc-count {
            display: inline-flex;
            min-width: 20px;
            height: 20px;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            background: #d58900;
            color: #fff;
            font-size: 12px;
            line-height: 1;
            padding: 0 6px;
            font-weight: 800;
        }

        .gg-qc-count[data-empty="1"] {
            display: none;
        }

        .gg-qc-floating {
            display: none !important;
        }

        .gg-qc-floating:hover {
            color: #fff;
        }

        .gg-qc-product-quote-box {
            margin-top: 18px;
        }
		.gg-qc-item-number {
    font-weight: 800;
    color: #222;
    text-align: center;
}

        /*
         * Prix désactivé sur fiche produit pour le moment.
         * À réactiver si besoin plus tard.
         */
        .gg-qc-product-price {
            display: none;
            margin-bottom: 12px;
            font-size: 15px;
            color: #333;
        }

        .gg-qc-product-price strong {
            font-weight: 800;
        }

@media (max-width: 720px) {
    .gg-qc-item {
        grid-template-columns: 44px 1fr;
    }

    .gg-qc-qty-col,
    .gg-qc-remove {
        grid-column: 1 / -1;
    }

            .gg-qc-cf7-grid {
                grid-template-columns: 1fr;
            }

            .gg-qc-menu-icon {
                min-height: auto;
                padding: 10px 12px;
            }

            .gg-qc-menu-label {
                display: none;
            }
        }
		.gg-qc-item-reference {
    margin-bottom: 5px;
    color: #d58900;
    font-size: 14px;
    font-weight: 700;
}

        /* ==========================================================
           VARIANTE « PILULE » — le bouton contourné de l'en-tête
           ==========================================================
           Six variables, à redéfinir dans Divi > Options du thème >
           CSS personnalisé si la charte évolue. Le plugin ne pose ici
           que les valeurs de repli.
           ========================================================== */

        .gg-qc-menu-icon--pilule {
            --qc-bordure: #4D4D4D;
            --qc-encre: #4D4D4D;
            --qc-fond: transparent;
            --qc-hauteur: 46px;
            --qc-taille: 15px;
            --qc-rayon: 100px;

            min-height: var(--qc-hauteur);
            padding: 0 22px;
            border: 1px solid var(--qc-bordure);
            border-radius: var(--qc-rayon);
            background: var(--qc-fond);
            color: var(--qc-encre);
            font-size: var(--qc-taille);
            font-weight: 600;
            white-space: nowrap;
            transition: background 0.18s ease, color 0.18s ease;
        }

        .gg-qc-menu-icon--pilule:hover {
            background: var(--qc-encre);
            color: #fff;
        }

        /* Le compteur perd sa pastille et se lit « (0) ». Les parenthèses
           sont posées en CSS : le script ne réécrit que le chiffre, elles
           ne peuvent donc pas disparaître à la mise à jour du panier. */
        .gg-qc-menu-icon--pilule .gg-qc-count {
            min-width: 0;
            height: auto;
            padding: 0;
            border-radius: 0;
            background: none;
            color: inherit;
            font-size: inherit;
            font-weight: inherit;
        }

        .gg-qc-menu-icon--pilule .gg-qc-count::before {
            content: "(";
        }

        .gg-qc-menu-icon--pilule .gg-qc-count::after {
            content: ")";
        }

        .gg-qc-menu-icon--pilule .gg-qc-menu-svg svg {
            width: 18px;
            height: 18px;
        }

        /* ==========================================================
           PETIT ÉCRAN — ce que le snippet d'origine imposait
           ==========================================================
           Le bloc hérité masque le libellé du panier sous 1 100 px et
           remet sa hauteur à « auto » avec 10 px de rembourrage. Sur
           un bouton du système CTA, cela donne un caddie suivi d'un
           « (4) » sans le moindre mot, et une hauteur qui ne tombe
           plus en face de celle du bouton voisin.

           Le libellé revient donc, et la hauteur avec — mais seulement
           pour les boutons qui portent une classe du système. Les
           usages historiques du panier ailleurs sur le site gardent le
           comportement qu'ils avaient.
           ========================================================== */

        @media (max-width: 1100px) {
            .cta-secondary .gg-qc-menu-label,
            .mc-actions .gg-qc-menu-label {
                display: inline-block;
            }

            .cta-secondary,
            .mc-actions .gg-qc-menu-icon {
                min-height: var(--cta-hauteur, 46px);
                height: var(--cta-hauteur, 46px);
                padding: 0 22px;
            }
        }

/* ------------------------------------------------------------------
   Sélecteur de quantité − / +
   ------------------------------------------------------------------
   Les trois éléments forment un seul objet : un cadre autour, aucun
   cadre entre eux. Les boutons prennent le fond doux, le champ reste
   blanc — c'est lui qu'on saisit. */

.gg-qc-stepper {
	display: inline-flex;
	align-items: stretch;
	overflow: hidden;
	border: 1px solid var(--mc-bord, #ECECEC);
	border-radius: 8px;
	background: #fff;
}

.gg-qc-stepper button {
	width: 34px;
	border: 0;
	background: var(--mc-fond-doux, #FAFAFA);
	color: var(--mc-encre, #4D4D4D);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease;
}

.gg-qc-stepper button:hover {
	background: var(--mc-action, #D87A00);
	color: #fff;
}

.gg-qc-stepper .gg-qc-qty-label {
	display: flex;
	margin: 0;
}

/* On retire les flèches natives du champ nombre : elles feraient
   doublon avec les deux boutons, et elles sont minuscules. */
.gg-qc-stepper .gg-qc-qty {
	width: 52px;
	border: 0;
	padding: 8px 4px;
	text-align: center;
	font-size: 0.875rem;
	font-family: inherit;
	-moz-appearance: textfield;
}

.gg-qc-stepper .gg-qc-qty::-webkit-outer-spin-button,
.gg-qc-stepper .gg-qc-qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.gg-qc-stepper .gg-qc-qty:focus {
	outline: 2px solid var(--mc-action, #D87A00);
	outline-offset: -2px;
}

.gg-qc-note {
	margin: 10px 0 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: #767676;
	max-width: 46ch;
}

/* ==================================================================
   LE BLOC DE COMMANDE DE LA FICHE PRODUIT
   ==================================================================
   La maquette ne pose pas le sélecteur et le bouton à nu sur le fond :
   elle les enferme dans un panneau blanc bordé, qui les détache du
   hero et rassemble la quantité, l'ajout au devis et la phrase sur
   l'absence de prix. C'est ce panneau.

   Il ne s'applique qu'à l'intérieur d'un hero : ailleurs — tableau des
   références, listing — le bouton reste nu, comme aujourd'hui. */

.mc-hero .gg-qc-product-quote-box {
	/* DANS LE HERO, LE PANNEAU DISPARAÎT.
	   Sur un fond sombre, le cadre gris autour du sélecteur alourdissait
	   la bande sans rien séparer d'utile. Il ne reste que le sélecteur,
	   posé dans la rangée avec les deux boutons. */
	background: transparent;
	border: 0;
	padding: 0;
	width: auto;
	/* Plus de plafond à 620 px : le panneau prend la largeur de la
	   colonne, la phrase sur l'absence de prix se range à sa droite, et
	   les deux boutons forment la ligne du dessous. C'est la disposition
	   de la maquette, et elle emploie enfin les 1440 px. */
	max-width: none;
	flex: 0 1 auto;
	justify-content: flex-start;
	gap: 14px 22px;
	margin-top: 4px;
	padding: 10px 18px;
	border: 1px solid var(--mc-bord, #ECECEC);
	border-radius: 12px;
	background: #fff;
}

.mc-hero .gg-qc-add-wrap {
	margin-top: 0;
}

/* La phrase sur l'absence de prix ferme la rangée, sur toute sa
   largeur : elle se lit d'un trait et ne pousse plus les boutons. */
/* TROIS CLASSES, PAS DEUX. La rangée de boutons et la note ont des
   règles plus anciennes qui fixaient une base de 230 px ; à poids égal
   c'est l'ordre d'écriture qui tranchait, et la phrase se retrouvait en
   colonne de 230 px sur trois lignes. Le sélecteur descend d'un cran
   pour passer devant sans !important. */
.mc-hero .gg-ref-cta-wrap .gg-qc-note {
	order: 9;
	flex: 0 0 100%;
	width: 100%;
	margin: 4px 0 0;
	/* PAS DE PLAFOND DE LARGEUR ICI.
	   72ch valaient 542 px à 12 px, pour une phrase de 93 caractères et
	   1 180 px disponibles : elle se cassait en deux lignes sans raison.
	   Un plafond de confort de lecture a du sens pour un paragraphe, pas
	   pour une ligne de service qui doit tenir sur une seule. */
	max-width: none;
}

/* Le sélecteur sur fond sombre : le cadre clair du thème disparaîtrait,
   et les chiffres saisis doivent rester lisibles. */
.mc-hero--sombre .gg-qc-stepper {
	border: 0;
	background: transparent;
}

.mc-hero--sombre .gg-qc-stepper button {
	width: 40px;
	background: transparent;
	color: #FFFFFF;
}

.mc-hero--sombre .gg-qc-stepper .gg-qc-qty {
	width: 46px;
	background: transparent;
	color: #FFFFFF;
	font-weight: 600;
}

.mc-hero--sombre .gg-qc-qty-titre {
	color: rgba(255, 255, 255, 0.62);
}

.mc-hero--sombre .gg-qc-note {
	color: rgba(255, 255, 255, 0.55);
}

/* « Voir mon devis » passe en dernier : il s'intercalait entre les deux
   boutons, un lien souligné au milieu de deux pilules. */
.mc-fiche__actions .gg-qc-view-cart {
	order: 1;
}

/* Le panneau ne se rhabille plus en sombre non plus : il n'existe plus
   du tout dans le hero, quelle que soit la variante. */
.mc-hero--sombre .gg-qc-product-quote-box {
	border: 0;
	background: transparent;
}

/* Les deux appels à l'action de la fiche sur une seule ligne, comme
   dans la maquette : « Ajouter au devis » plein, « Télécharger la fiche
   technique » en contour. Le wrap du CTA secondaire porte déjà la
   classe .mc-fiche__actions. */
/* LA RANGÉE DE BOUTONS, PARTOUT.
   .mc-fiche__actions ne couvrait que la fiche ; sur la gamme, les deux
   boutons du hero se touchaient, le conteneur étant resté en display
   block (relevé le 01/10). La règle vaut pour .gg-ref-cta-wrap, qui est
   le conteneur commun aux deux. */
.gg-ref-cta-wrap,
.mc-fiche__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;
}


/* ==================================================================
   LE BLOC DE COMMANDE DE LA FICHE — structure
   ==================================================================
   Tout le balisage est en <span> pour traverser un paragraphe sans le
   casser (voir le commentaire dans sc_button) : ce sont ces
   déclarations qui leur rendent leur comportement de bloc. */

.gg-qc-commande {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

/* DANS LA FICHE, LE CONTENEUR S'EFFACE.
   Le bouton « Télécharger la fiche technique » est écrit dans le
   gabarit, APRÈS ce shortcode : il est donc frère de .gg-qc-commande,
   pas de ses enfants. display:contents retire le conteneur de la mise
   en page sans toucher au document — les trois éléments deviennent
   enfants directs de .mc-fiche__actions, et les deux boutons se
   retrouvent sur la même ligne, comme dans la maquette. */
.mc-fiche__actions .gg-qc-commande {
	display: contents;
}

.gg-qc-product-quote-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 28px;
	/* Le panneau prend la ligne entière : les boutons passent dessous. */
	flex: 0 0 100%;
}

.gg-qc-qty-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* ------------------------------------------------------------------
   DANS LE HERO : TROIS PILULES SUR UNE SEULE LIGNE
   ------------------------------------------------------------------
   « QUANTITÉ » était posé AU-DESSUS du sélecteur : le bloc faisait deux
   étages et dépassait la hauteur des boutons, d'où la marche d'escalier
   relevée le 01/10. Le libellé passe DEVANT les commandes, dans la même
   pilule, et c'est le champ entier qui porte le cadre — le sélecteur,
   lui, n'en a plus. Les trois objets font alors 50 px, comme les
   boutons. */

.mc-hero .gg-qc-qty-field {
	flex-direction: row;
	align-items: center;
	gap: 12px;
	height: 50px;
	padding: 0 8px 0 18px;
	border: 1px solid var(--mc-bord, #ECECEC);
	border-radius: 100px;
	background: #FFFFFF;
}

.mc-hero--sombre .gg-qc-qty-field {
	border-color: rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.07);
}

.mc-hero .gg-qc-stepper {
	height: auto;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.gg-qc-qty-titre {
	font-size: 0.65625rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #8A8A8A;
}

.gg-qc-stepper {
	display: inline-flex;
}

.gg-qc-note {
	display: block;
	flex: 1 1 260px;
}

/* « Voir mon devis » a été retiré du hero le 01/10 — le panier est déjà
   dans l'en-tête. La règle reste pour les gabarits qui appelleraient
   encore le lien ailleurs. */
.gg-qc-view-cart {
	font-size: 0.875rem;
	font-weight: 600;
}

/* ------------------------------------------------------------------
   LE RENVOI VERS LA SECTION DOCUMENTS
   ------------------------------------------------------------------
   Derrière les deux boutons, en lien et non en pilule : c'est un
   déplacement dans la page, pas une action. La flèche est dessinée,
   jamais écrite — un caractère « ↓ » se lit à voix haute.

   PLUS AUCUN HERO N'ÉMET CETTE CLASSE DEPUIS LA 1.9.4 : le lien « Voir
   tous les documents » a été retiré le 02/10, c'est le bouton de
   téléchargement qui porte désormais l'ancre #documents. Les règles sont
   conservées — et non supprimées — parce qu'elles décrivent un motif
   réutilisable (un renvoi d'ancre discret), et qu'un bloc de 35 lignes
   inerte coûte moins que de le réécrire au prochain besoin. */

.mc-lien-ancre {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--mc-action, #D87A00);
	transition: color 0.18s ease;
}

.mc-lien-ancre:hover {
	color: var(--mc-action-hover, #B86A00);
	text-decoration: underline;
}

.mc-lien-ancre__fleche {
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.18s ease;
}

.mc-lien-ancre:hover .mc-lien-ancre__fleche {
	transform: rotate(45deg) translate(2px, 2px);
}

.mc-hero--sombre .mc-lien-ancre {
	color: #FFFFFF;
}

.mc-hero--sombre .mc-lien-ancre:hover {
	color: var(--mc-or, #D5AE05);
}

/* ------------------------------------------------------------------
   LA CONFIRMATION D'AJOUT AU DEVIS
   ------------------------------------------------------------------

   Posée en bas à droite, au-dessus de la barre d'action de fiche quand
   celle-ci est active — d'où le décalage : deux éléments flottants qui
   se recouvrent valent moins que zéro.

   Elle ne prend jamais le focus et ne bloque rien : c'est une nouvelle,
   pas une question. Voir quote-cart.js pour le raisonnement. */

.gg-qc-confirm {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 9100;
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: min(420px, calc(100vw - 48px));
	padding: 14px 16px;
	border-radius: 12px;
	background: #FFFFFF;
	border: 1px solid var(--mc-bord, #ECECEC);
	box-shadow: 0 18px 38px -16px rgba(0, 0, 0, 0.35);
	font-size: 0.875rem;
	line-height: 1.4;
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s cubic-bezier(.22, 1, .36, 1);
}

.gg-qc-confirm--visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Quand la barre d'action de fiche est là, on passe au-dessus d'elle. */
body:has(.mc-fiche-barre--visible) .gg-qc-confirm {
	bottom: 92px;
}

.gg-qc-confirm__texte {
	color: var(--c-base, #4D4D4D);
	min-width: 0;
}

.gg-qc-confirm__lien {
	flex: 0 0 auto;
	font-weight: 700;
	color: var(--mc-action, #D87A00);
	text-decoration: none;
	white-space: nowrap;
}

.gg-qc-confirm__lien:hover,
.gg-qc-confirm__lien:focus-visible {
	color: var(--mc-action-hover, #B86A00);
	text-decoration: underline;
}

.gg-qc-confirm__fermer {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #9A9A9A;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.gg-qc-confirm__fermer:hover {
	background: var(--mc-fond-doux, #FAFAFA);
	color: var(--c-base, #4D4D4D);
}

@media (max-width: 760px) {

	.gg-qc-confirm {
		right: 12px;
		left: 12px;
		bottom: 12px;
		max-width: none;
	}

	body:has(.mc-fiche-barre--visible) .gg-qc-confirm {
		bottom: 76px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.gg-qc-confirm {
		transition: none;
	}
}

/* ==================================================================
   LE PANIER EN CARTES — maquette 12, 07/10
   ==================================================================

   Garde : body.mc-h-panier — réglage « 15. Panier devis — lignes en
   cartes ». Décochée, pas une déclaration ne s'applique.

   CE QUI N'EST PAS TOUCHÉ, ET C'EST LE POINT. Le formulaire est validé
   par le client : ni ses champs, ni leur ordre, ni leurs libellés ne
   bougent. Le balisage des lignes non plus — il est écrit par
   quote-cart.js, et le réécrire pour coller à une maquette reviendrait
   à changer un comportement pour une question d'apparence. On ne
   déplace donc rien : on habille ce qui existe.

   CE QUE LA MAQUETTE MONTRE ET QU'ON NE FAIT PAS. Une vignette produit
   par ligne. Le panier ne mémorise aujourd'hui que le titre, la
   référence et la quantité — pas d'image. La pastille de numéro prend
   sa place : elle occupe le même carré, et elle dit quelque chose de
   vrai (le rang de la ligne) plutôt que de montrer un gris vide.

   LE BOUTON EST ORANGE, PAS OR. La maquette le dessine en #D5AE05.
   L'orange d'action #D87A00 est une règle de marque, et une règle de
   marque ne change pas d'une page à l'autre : un bouton d'envoi qui
   change de couleur sur une seule page apprend au visiteur que la
   couleur ne veut rien dire. Arbitré le 07/10.
   ================================================================== */

body.mc-h-panier .gg-qc-item {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 12px;
	padding: 16px 18px;
	border: 1px solid var(--mc-bord, #ECECEC);
	border-radius: var(--mc-rayon-carte, 12px);
	background: #FFFFFF;
}

/* La pastille du rang : le carré que la maquette réserve à la vignette.
   flex:0 0 auto, sans quoi elle s'écrase dès que le titre est long. */
body.mc-h-panier .gg-qc-item-number {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	background: var(--mc-fond-doux, #FAFAFA);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--mc-gris, #6E757C);
}

body.mc-h-panier .gg-qc-item-main {
	flex: 1 1 auto;
	min-width: 0;
}

body.mc-h-panier .gg-qc-item-reference {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mc-gris, #6E757C);
}

body.mc-h-panier .gg-qc-item-title {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	color: var(--mc-encre, #4D4D4D);
	text-decoration: none;
}

body.mc-h-panier .gg-qc-item-title:hover {
	color: var(--mc-action, #D87A00);
}

body.mc-h-panier .gg-qc-qty-col {
	flex: 0 0 auto;
	text-align: right;
}

body.mc-h-panier .gg-qc-qty-col label {
	display: block;
	margin-bottom: 4px;
	font-size: 0.75rem;
	color: var(--mc-gris, #6E757C);
}

body.mc-h-panier .gg-qc-line-qty {
	width: 76px;
	padding: 8px 10px;
	border: 1px solid var(--mc-bord, #ECECEC);
	border-radius: 8px;
	text-align: center;
}

body.mc-h-panier .gg-qc-remove {
	flex: 0 0 auto;
	padding: 8px 12px;
	border: 0;
	background: transparent;
	font-size: 0.8125rem;
	color: var(--mc-gris, #6E757C);
	cursor: pointer;
}

body.mc-h-panier .gg-qc-remove:hover {
	color: #B42318;
}

/* Sur petit écran la ligne s'empile : quatre colonnes dans 390 px
   écraseraient le titre à deux caractères par ligne. */
@media (max-width: 720px) {
	body.mc-h-panier .gg-qc-item {
		flex-wrap: wrap;
	}

	body.mc-h-panier .gg-qc-item-main {
		flex: 1 1 100%;
		order: 2;
	}

	body.mc-h-panier .gg-qc-qty-col {
		order: 3;
		text-align: left;
	}

	body.mc-h-panier .gg-qc-remove {
		order: 4;
		margin-left: auto;
	}
}

/* ==================================================================
   LA QUANTITÉ EST DEVENUE UNE PHRASE — 15/10
   ==================================================================
   Le champ mesurait 80 px : la largeur d'un compteur à trois chiffres.
   « 500 kg » y tient à peine, « 2 palettes » pas du tout. Il s'élargit
   donc, et il perd le cadre interne que le sélecteur − / + lui donnait,
   puisque c'est maintenant la pilule entière qui fait le cadre.

   LES RÈGLES .gg-qc-stepper PLUS HAUT NE SERVENT PLUS À RIEN : aucun
   gabarit n'émet ces boutons depuis le 15/10. Elles sont laissées en
   place, inertes, plutôt que retirées à chaud d'une feuille de 700
   lignes la veille d'une mise en ligne. */

#page-container .gg-qc-qty {
	width: 100%;
	max-width: 230px;
	min-width: 0;
	text-align: left;
}

/* Dans la pilule du hero, le champ ne porte pas de cadre à lui : il
   serait un rectangle dans un arrondi. */
.mc-hero .gg-qc-qty-field .gg-qc-qty {
	border: 0;
	background: transparent;
	padding-inline: 0;
	height: 100%;
}

.mc-hero--sombre .gg-qc-qty-field .gg-qc-qty {
	color: #FFFFFF;
}

.mc-hero--sombre .gg-qc-qty-field .gg-qc-qty::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.gg-qc-qty::placeholder,
.gg-qc-line-qty::placeholder {
	color: #9A9A95;
}

/* La colonne du tableau des références : étroite, mais plus large que
   les trois chiffres d'avant. Le champ y est facultatif.

   LA LARGEUR MINIMALE EST LE POINT — relevé le 15/10 sur
   /produits/aciers-revetus/, capture à l'appui : le tableau distribue
   ses colonnes au prorata du contenu, et la quantité, dont l'en-tête
   est court et les cellules vides, se retrouvait à une soixantaine de
   pixels. L'exemple y était coupé en « ex. 50( », ce qui enseigne
   exactement le contraire de ce qu'il devait enseigner. Un max-width ne
   pouvait rien là-contre : c'est un plancher qu'il fallait. */
.mc-reftable__qte {
	width: 1%;
	white-space: nowrap;
}

.mc-reftable__qte .gg-qc-qty {
	width: 100%;
	min-width: 132px;
	max-width: 160px;
	padding: 7px 10px;
}

@media (max-width: 600px) {

	#page-container .gg-qc-qty {
		max-width: none;
	}
}