/* ------------------------------------------------------------------
   goutce.com — couche de design.
   Palette relevee sur le logo : blanc et degrade magenta -> violet.
   L'enveloppe (bandeau, en-tete, heros, pied) est sombre, comme le logo ;
   le catalogue reste clair pour la lisibilite des fiches.
------------------------------------------------------------------- */
:root {
    /* La marque */
    --gc-magenta: #F20FC0;        /* decoratif : degrades, filets, pastilles */
    --gc-violet: #7A0FE0;          /* couleur d'action : boutons, liens */
    --gc-violet-fonce: #5F0BB4;
    --gc-violet-texte: #6A0BC4;      /* liens sur fond clair */
    --gc-violet-clair: #F3E8FE;      /* fonds d'accent tres pales */
    --gc-degrade: linear-gradient(118deg, #F20FC0 0%, #7A0FE0 100%);

    /* Les fonds sombres : un noir qui tire sur le violet, jamais un gris neutre */
    --gc-encre: #140B22;
    --gc-encre-2: #21123A;

    /* Le corps, clair */
    --gc-nuage: #F8F5FC;
    --gc-trait: #E8E0F2;
    --gc-texte: #1B1029;
    --gc-texte-2: #5C4F72;
    --gc-texte-3: #8B7DA2;
    --gc-vert: #1E7A4C;
    --gc-vert-fond: #E8F6EE;
}

/* Le thème anime TOUTES les propriétés de TOUS les éléments : coûteux et brouillon. */
* { transition: none; }
a, button, .btn, .product-miniature, .gc-gamme { transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

body { color: var(--gc-texte); }
h1, h2, h3, h4 { letter-spacing: -.015em; }
.btn, .btn-primary {
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
.btn-primary { background: var(--gc-bleu); border-color: var(--gc-bleu); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active:focus { background: var(--gc-bleu-fonce) !important; border-color: var(--gc-bleu-fonce) !important; }
:focus-visible { outline: 3px solid var(--gc-bleu); outline-offset: 2px; }

/* ---- Barre utilitaire + en-tête ---- */
.gc-bandeau {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 26px;
    padding: 8px 18px;
    background: var(--gc-encre);
    color: #C3CDDF;
    font-size: 12.5px;
    text-align: center;
}
.gc-bandeau b { color: #fff; font-weight: 600; }
.gc-bandeau span { display: inline-flex; align-items: center; gap: 7px; }
.gc-bandeau i { color: #5BC48A; font-style: normal; }
.header-nav { border-bottom: 0; background: #fff; }
.header-top { padding: 6px 0 10px; }
.header-contact-block .text-block { color: var(--gc-texte-2); font-size: 13px; }
.header-contact-block a { color: var(--gc-texte); font-weight: 600; }

/* menu principal (bandeau encre du thème, souligné bleu au survol) */
#_desktop_top_menu .top-menu { margin: 0; }
#_desktop_top_menu .top-menu > li > a.dropdown-item {
    font-size: 14.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 2.5px solid transparent;
}
#_desktop_top_menu .top-menu > li > a.dropdown-item:hover,
#_desktop_top_menu .top-menu > li.current > a.dropdown-item { border-bottom-color: var(--gc-bleu); background: transparent; }
#_desktop_top_menu .sub-menu { border: 1px solid var(--gc-trait); border-radius: 0 0 10px 10px; box-shadow: 0 16px 36px rgba(14, 27, 46, .12); }

/* ---- Héros ---- */
.gc-hero { background: linear-gradient(120deg, #0E1B2E 0%, #16263F 55%, #1B3358 100%); }
.gc-hero .gc-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: 34px;
    padding: 46px 0 44px;
}
.gc-hero-texte { color: #fff; }
.gc-hero-sur {
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.gc-hero-texte h2 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 42px;
    line-height: 1.06;
    font-weight: 700;
    text-transform: none;
}
.gc-hero-desc { max-width: 46ch; margin-bottom: 20px; color: #C3CDDF; font-size: 15.5px; line-height: 1.55; }
.gc-hero-desc p { margin: 0; color: inherit; }
.gc-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.gc-hero-actions .btn { padding: 12px 22px; font-size: 15px; }
.gc-hero-actions .gc-btn-clair { border: 1.5px solid rgba(255, 255, 255, .38); background: transparent; color: #fff; }
.gc-hero-actions .gc-btn-clair:hover { background: rgba(255, 255, 255, .12); }
.gc-hero-visuel { position: relative; display: flex; align-items: center; justify-content: center; padding: 18px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; background: rgba(255, 255, 255, .06); }
/* Visuels produit seul sur fond studio (composés le 17/09) : on les montre en entier. */
.gc-hero-visuel { padding: 0; overflow: hidden; }
.gc-hero-visuel img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center; border-radius: 13px; }
.gc-hero .carousel-control, .gc-hero .direction { display: none; }
.gc-hero-puces { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; padding: 0; list-style: none; color: #C3CDDF; font-size: 13px; }
.gc-hero-puces li { display: flex; align-items: center; gap: 7px; }
.gc-hero-puces li::before { content: "\f00c"; font-family: FontAwesome; color: #5BC48A; font-size: 12px; }
.gc-hero-points { position: static; display: flex; justify-content: center; gap: 8px; margin: 0; padding: 0 0 18px; list-style: none; }
.gc-hero-points li { width: 9px; height: 9px; margin: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .34); text-indent: 0; cursor: pointer; }
.gc-hero-points li.active { width: 26px; border-radius: 999px; background: #fff; }
@media (max-width: 860px) {
    .gc-hero .gc-hero-inner { grid-template-columns: 1fr; gap: 20px; padding: 26px 0 24px; }
    .gc-hero-texte h2 { font-size: 28px; }
    .gc-hero-visuel { order: -1; }
}

/* ---- Bandeau de réassurance ---- */
.home-servives-block { padding: 0 !important; background: #fff; }
.home-servives-block .services-main { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; width: 100%; margin: 0; background: var(--gc-trait); border-top: 1px solid var(--gc-trait); border-bottom: 1px solid var(--gc-trait); }
.home-servives-block .services-inner { width: auto; padding: 0; background: #fff; }
.home-servives-block .services-inner-main { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; text-align: left; }
.home-servives-block .services-icon { flex: none; margin: 0; }
.home-servives-block .services-icon i { color: var(--gc-bleu); font-size: 20px; }
.home-servives-block .services-content strong { display: block; color: var(--gc-texte); font-size: 13.5px; font-weight: 600; }
.home-servives-block .services-content p { margin: 0; color: var(--gc-texte-2); font-size: 12.5px; line-height: 1.4; }
@media (max-width: 760px) { .home-servives-block .services-main { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Titres de section ---- */
.section-title { position: relative; margin-bottom: 18px; text-align: left; }
.section-title::before, .section-title::after { display: none !important; }
.section-title span { display: block; color: var(--gc-texte); font-size: 22px; font-weight: 700; text-transform: none; }
.section-title span i { color: var(--gc-texte); font-style: normal; font-weight: 700; }
.section-title .gc-sous { display: block; margin-top: 3px; color: var(--gc-texte-2); font-size: 13.5px; font-weight: 400; }
.gc-lien-section { float: right; margin-top: 6px; color: var(--gc-bleu-texte); font-size: 13.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Choisir sa gamme ---- */
.gc-gammes-section { padding: 34px 0 6px; }
.gc-gammes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.gc-gamme { display: block; padding: 14px 12px; border: 1px solid var(--gc-trait); border-radius: 12px; background: #fff; text-align: center; color: var(--gc-texte); }
.gc-gamme:hover { border-color: var(--gc-bleu); box-shadow: 0 8px 22px rgba(22, 103, 219, .1); color: var(--gc-texte); text-decoration: none; }
.gc-gamme .gc-gamme-vis { display: flex; align-items: center; justify-content: center; height: 86px; margin-bottom: 9px; border-radius: 9px; background: var(--gc-nuage); overflow: hidden; }
.gc-gamme img { max-height: 80px; width: auto; }
.gc-gamme b { display: block; font-size: 13.5px; }
.gc-gamme span { color: var(--gc-texte-3); font-size: 12px; }
@media (max-width: 900px) { .gc-gammes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575px) { .gc-gammes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Bandeau 18+ ---- */
.home-images-block-two { margin: 34px 0 !important; padding: 0 !important; background: none !important; }
.home-images-block-two .content-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    border: 1px solid var(--gc-trait);
    border-radius: 12px;
    background: #fff;
    text-align: left;
}
.gc-age { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 2.5px solid var(--gc-encre); border-radius: 50%; font-size: 15px; font-weight: 700; }
.home-images-block-two h3 { margin: 0 0 3px; color: var(--gc-texte); font-size: 15.5px; font-weight: 700; text-transform: none; }
.home-images-block-two p { margin: 0; max-width: 78ch; color: var(--gc-texte-2); font-size: 13.5px; line-height: 1.5; }
.home-images-block-two .link-btn { display: inline-block; color: var(--gc-bleu-texte); font-size: 13.5px; font-weight: 600; text-decoration: underline; white-space: nowrap; }
.home-images-block-two .link-btn span { color: inherit; }
@media (max-width: 760px) { .home-images-block-two .content-main { grid-template-columns: 1fr; } }

/* ---- Cartes produit ---- */
.featured-products { margin: 34px 0 !important; }
.product-miniature .thumbnail-container { position: relative; display: flex; flex-direction: column; height: 100%; border: 1px solid var(--gc-trait); border-radius: 12px; background: #fff; overflow: hidden; box-shadow: none; }
.product-miniature .thumbnail-container:hover { box-shadow: 0 10px 28px rgba(14, 27, 46, .09); }
.product-miniature .thumbnail-top { position: relative; background: var(--gc-nuage); }
.product-miniature .product-thumbnail img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; mix-blend-mode: multiply; }
.product-miniature .product-description { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 13px 14px 15px; text-align: left; }
.product-miniature .product-title { margin: 0; min-height: 2.8em; }
.product-miniature .product-title a { display: block; color: var(--gc-texte); font-size: 14.5px; font-weight: 600; line-height: 1.35; text-transform: none; }
.product-miniature .gc-carte-gamme { color: var(--gc-texte-3); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.product-miniature .product-price-and-shipping { margin: 0; }
.product-miniature .price { color: var(--gc-texte); font-size: 19px; font-weight: 700; }
.product-miniature .regular-price { margin-right: 6px; color: var(--gc-texte-3); font-size: 13px; }
.product-miniature .gc-carte-bas { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.product-miniature .add { margin: 0 0 0 auto; }
.product-miniature .add .btn { height: 38px; padding: 0 14px; font-size: 13px; line-height: 36px; }
.product-miniature .gc-prevenir { display: inline-block; height: 38px; padding: 0 14px; border: 1.5px solid var(--gc-encre); border-radius: 8px; background: #fff; color: var(--gc-encre); font-size: 12.5px; font-weight: 700; line-height: 35px; }
.product-miniature .gc-prevenir:hover { background: var(--gc-encre); color: #fff; text-decoration: none; }
.product-miniature.gc-epuise .product-thumbnail img { opacity: .55; }
.product-miniature .highlighted-informations { display: none; }
.product-flags { top: 10px; left: 10px; right: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin: 0; padding: 0; }
.product-flags li.product-flag { position: static; margin: 0; padding: 3px 9px; border-radius: 999px; background: var(--gc-bleu); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; box-shadow: none; }
.product-flags li.product-flag.out_of_stock { background: #fff; border: 1px solid var(--gc-trait); color: var(--gc-texte-2); }
.product-flags li.product-flag.discount, .product-flags li.product-flag.on-sale { background: #B42318; }
.gc-etiquette-sans { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--gc-vert-fond); color: var(--gc-vert); font-size: 11px; font-weight: 700; }

/* ---- Rayon ---- */
#category #left-column, #search #left-column { padding-right: 22px; }
.block-category { margin-bottom: 18px; padding: 0; border: 0; background: none; }
#category #js-product-list-header h1, .page-header h1 { margin: 0 0 8px; color: var(--gc-texte); font-size: 28px; font-weight: 700; text-transform: none; }
.gc-cat-intro { max-width: 82ch; margin: 0 0 14px; color: var(--gc-texte-2); font-size: 14px; line-height: 1.6; }
#search_filters, .facet { border: 0; }
#search_filters .facet-title, #search_filters .h6 { color: var(--gc-texte-3); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
#search_filters .facet-label a { color: var(--gc-texte-2); font-size: 13.5px; }
.products-sort-order .select-title { border-radius: 8px; border-color: var(--gc-trait); }
.pagination .page-list li a { border-radius: 8px; }

/* ---- Fiche produit ---- */
#product .product-prices .current-price span, #product .current-price .price { color: var(--gc-texte); font-size: 31px; font-weight: 700; }
#product h1.h1, #product .product-detail-name { font-size: 27px; font-weight: 700; line-height: 1.2; text-transform: none; }
.gc-services { display: grid; gap: 12px; margin: 18px 0 0; padding: 14px 16px; border: 1px solid var(--gc-trait); border-radius: 12px; font-size: 13.5px; }
.gc-services > div { display: flex; align-items: flex-start; gap: 11px; }
.gc-services i { flex: none; margin-top: 3px; color: var(--gc-bleu); font-size: 17px; }
.gc-services b { display: block; color: var(--gc-texte); }
.gc-services span { color: var(--gc-texte-2); line-height: 1.45; }
.gc-dispo { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px; border-radius: 999px; background: var(--gc-vert-fond); color: var(--gc-vert); font-size: 12.5px; font-weight: 700; }
.gc-dispo.ko { background: #FDECEA; color: #B42318; }
.gc-dispo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
#product .product-variants .control-label { font-size: 13.5px; font-weight: 600; }
#product .product-variants li { margin-right: 7px; }
#product .product-actions .btn-primary { padding: 13px 26px; font-size: 15px; }

/* ---- Newsletter ---- */
.footer-top { background: var(--gc-nuage); }
.block_newsletter .newsletter-title h2 span, .block_newsletter .newsletter-title h2 span i { color: var(--gc-texte); font-size: 20px; font-style: normal; font-weight: 700; text-transform: none; }
.block_newsletter p { color: var(--gc-texte-2); font-size: 13.5px; }
.block_newsletter input[type="email"] { height: 46px; border: 1.5px solid var(--gc-trait); border-radius: 8px; }
.block_newsletter .btn { height: 46px; }
.block_newsletter .condition p { color: var(--gc-texte-3); font-size: 12px; }

/* ---- Pied de page ---- */
.footer-container { background: var(--gc-encre); color: #AFBACE; }
.footer-container a, .footer-container li a { color: #AFBACE; }
.footer-container a:hover { color: #fff; }
.footer-container .footer-block-title h3, .footer-container .footer-colum-title h3 { color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.footer-container .footer-text-content p { color: #AFBACE; font-size: 13.5px; line-height: 1.6; }
.footer-bottom { background: var(--gc-encre); border-top: 1px solid rgba(255, 255, 255, .12); }
.footer-bottom .footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 14px 0 20px; }
.gc-mentions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; color: #AFBACE; font-size: 12.5px; }
.gc-mentions .gc-age-pied { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; }
.gc-mentions .gc-age-pied i { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 2px solid #fff; border-radius: 50%; font-size: 11px; font-style: normal; }
.footer-payment-icon { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.footer-payment-icon i { color: #AFBACE; font-size: 22px; }

/* ------------------------------------------------------------------
   Reprises : le thème cible certains blocs avec des sélecteurs longs,
   il faut donc être aussi précis que lui.
------------------------------------------------------------------- */

/* titres de section : pas de traits décoratifs, alignés à gauche */
.section-title > span::before,
.section-title > span::after { display: none !important; }
.featured-products .section-title,
.gc-gammes-section .section-title { text-align: left; }

/* réassurance */
.home-servives-block .services-main {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    font-size: 14px;
    background: var(--gc-trait);
    border-top: 1px solid var(--gc-trait);
    border-bottom: 1px solid var(--gc-trait);
}
.home-servives-block .services-main .services-inner { display: block; width: auto; padding: 0; background: #fff; }
.home-servives-block .services-main .services-inner .services-inner-main { display: flex; align-items: flex-start; padding: 16px 18px; text-align: left; }
.home-servives-block .services-main .services-inner .services-inner-main .services-icon {
    position: static;
    width: 34px;
    transform: none;
    flex: none;
}
.home-servives-block .services-main .services-inner .services-inner-main .services-content { padding-left: 0; }
.home-servives-block .services-main .services-inner .services-inner-main .services-content > strong { font-size: 13.5px; text-transform: none; color: var(--gc-texte); }
.home-servives-block .services-main .services-inner .services-inner-main .services-content > p { font-size: 12.5px; color: var(--gc-texte-2); }
@media (max-width: 760px) { .home-servives-block .services-main { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* bandeau 18+ : plus de photo d'ambiance */
.home-images-block-two {
    float: none;
    background-image: none !important;
    padding: 0 !important;
    text-align: left;
}
.home-images-block-two .content-main h3 { font-size: 15.5px !important; color: var(--gc-texte) !important; margin: 0 0 3px !important; font-weight: 700; }
.home-images-block-two .content-main > a.link-btn { font-size: 13.5px !important; color: var(--gc-bleu-texte) !important; line-height: 1.4; text-decoration: underline; }
.home-images-block-two .content-main > a.link-btn::after { font-size: 14px; }

/* pied de page : tout le texte doit rester lisible sur l'encre */
#footer .footer-container #block_myaccount_infos > h3,
#footer .footer-container #block_myaccount_infos > h3 > a,
#footer .contactinfo-section .footer-links-column .footer-colum-title > h3,
#footer .footer-container .footer-block-title h3 { color: #fff !important; }
#footer .contactinfo-section .add-item .text strong { color: #fff; }
#footer .contactinfo-section .add-item .text a,
#footer .contactinfo-section .add-item .text p { color: #AFBACE; }
#footer .contactinfo-section .add-item .icon i { color: var(--gc-bleu); }
#footer .footer-container li a:hover { color: #fff; }

/* titre « Votre compte » du pied de page (p.h3.myaccount-title) */
#footer .footer-container .myaccount-title a,
#footer .footer-container .myaccount-title,
#footer .footer-container .links .title .h3 { color: #fff !important; }

/* vignettes de sous-catégories : pas d'image de catégorie sur cette boutique */
#subcategories .subcategory-image { display: none; }
#subcategories ul li { width: auto; margin: 0; }
#subcategories ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
#subcategories ul li .subcategory-name,
#subcategories ul li h5 a { display: block; padding: 12px 14px; border: 1px solid var(--gc-trait); border-radius: 10px; background: #fff; color: var(--gc-texte); font-size: 13.5px; font-weight: 600; text-transform: none; text-align: center; }
#subcategories ul li .subcategory-name:hover,
#subcategories ul li h5 a:hover { border-color: var(--gc-bleu); color: var(--gc-bleu-texte); text-decoration: none; }
@media (max-width: 760px) { #subcategories ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* rayon : titre et intro */
#category #js-product-list-header .gc-cat-intro p:last-child { margin-bottom: 0; }

/* pied de page : le paragraphe de présentation doit rester lisible sur l'encre */
#footer .footer-container .footer-text-content p,
#footer .footer-container .logo-socials p { color: #C3CDDF !important; opacity: 1; }
#footer .footer-container .logo-socials img { max-width: 170px; height: auto; }

/* ------------------------------------------------------------------
   Fiche produit
------------------------------------------------------------------- */
#product .product-container { margin-top: 6px; }
#product .page-content.product-cover img { border-radius: 14px; border: 1px solid var(--gc-trait); }
#product .product-images > li.thumb-container > .thumb { border-radius: 9px; border: 1.5px solid var(--gc-trait); }
#product .product-images > li.thumb-container > .thumb.selected { border-color: var(--gc-encre); }
#product h1.h1 { margin: 0 0 10px; }

/* points clés */
.gc-cles { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.gc-cles li { padding: 4px 11px; border-radius: 999px; background: var(--gc-nuage); font-size: 12.5px; color: var(--gc-texte-2); }

/* pastille de disponibilité (celle du thème est masquée) */
.gc-dispo { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 4px; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.gc-dispo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.gc-dispo.ok { background: #E8F6EE; color: var(--gc-vert); }
.gc-dispo.peu { background: #FFF6EC; color: #A5510A; }
.gc-dispo.ko { background: #FDECEA; color: #B42318; }
#product-availability, #product .product-availability { display: none !important; }

/* alerte de retour en stock */
.gc-alerte-stock { margin: 16px 0 12px; padding: 16px; border: 1px solid #F6D2AA; border-radius: 12px; background: #FFF6EC; }
.gc-alerte-stock > b { display: block; margin-bottom: 3px; font-size: 15px; color: var(--gc-texte); }
.gc-alerte-stock > p { margin: 0 0 10px; font-size: 13.5px; color: #6B5540; }
.gc-alerte-stock .js-mailalert { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.gc-alerte-stock input[type="email"] { flex: 1 1 200px; min-width: 0; height: 44px; padding: 0 12px; border: 1.5px solid #E9C8A2; border-radius: 8px; background: #fff; font-size: 14px; }
.gc-alerte-stock .btn { height: 44px; margin: 0; }
.gc-alerte-stock p.mailalert-msg, .gc-alerte-stock .alert { margin: 8px 0 0; font-size: 13px; }

/* mention légale sous le bouton */
.gc-legal { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--gc-texte-3); }

/* onglets */
#product .tabs, #product .product-tabs { border: 0; }
#product .nav-tabs { border-bottom: 1px solid var(--gc-trait); }
#product .nav-tabs .nav-link { padding: 12px 16px; border: 0; border-bottom: 2.5px solid transparent; color: var(--gc-texte-2); font-size: 14.5px; font-weight: 600; text-transform: none; }
#product .nav-tabs .nav-link.active { color: var(--gc-texte); border-bottom-color: var(--gc-bleu); background: none; }
#product .tab-content { padding: 20px 0 6px; font-size: 14.5px; line-height: 1.65; color: var(--gc-texte-2); }
#product .product-description p { max-width: 82ch; }

/* tableau des caractéristiques */
#product .data-sheet { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 58%); max-width: 640px; margin: 0; font-size: 14px; }
#product .data-sheet dt.name, #product .data-sheet dd.value { margin: 0; padding: 10px 0; border-top: 1px solid var(--gc-trait); background: none; }
#product .data-sheet dt.name { font-weight: 600; color: var(--gc-texte-2); }
#product .data-sheet dd.value { color: var(--gc-texte); }
#product .product-features { margin-top: 0; }
#product .product-reference span { color: var(--gc-texte); font-variant-numeric: tabular-nums; }

/* autres saveurs de la gamme */
.gc-saveurs-section { clear: both; width: 100%; margin: 26px 0 8px; padding-top: 22px; border-top: 1px solid var(--gc-trait); }
.gc-saveurs-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; margin-bottom: 16px; }
.gc-saveurs-tete h2 { margin: 0 0 3px; font-size: 20px; font-weight: 700; text-transform: none; color: var(--gc-texte); }
.gc-saveurs-tete p { margin: 0; font-size: 13.5px; color: var(--gc-texte-2); }
.gc-saveurs-lien { font-size: 13.5px; font-weight: 600; color: var(--gc-bleu-texte); text-decoration: underline; white-space: nowrap; }
.gc-saveurs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.gc-saveur { display: block; padding: 10px; border: 1px solid var(--gc-trait); border-radius: 12px; background: #fff; text-align: center; color: var(--gc-texte); }
.gc-saveur:hover { border-color: var(--gc-bleu); box-shadow: 0 8px 20px rgba(22, 103, 219, .1); color: var(--gc-texte); text-decoration: none; }
.gc-saveur .vis { display: flex; align-items: center; justify-content: center; height: 96px; margin-bottom: 8px; border-radius: 8px; background: var(--gc-nuage); overflow: hidden; }
.gc-saveur .vis img { max-height: 92px; width: auto; }
.gc-saveur b { display: block; font-size: 13px; line-height: 1.3; }
.gc-saveur .prix { display: block; margin-top: 2px; font-size: 13px; font-weight: 700; }
.gc-saveur .etat { display: block; margin-top: 2px; font-size: 11.5px; color: var(--gc-vert); }
.gc-saveur.epuise .vis { opacity: .5; }
.gc-saveur.epuise .etat { color: var(--gc-texte-3); }
@media (max-width: 900px) { .gc-saveurs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575px) { .gc-saveurs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------
   Rayons
------------------------------------------------------------------- */
/* tuiles de gammes en tête de rayon */
.gc-rayon-gammes { margin: 4px 0 18px; }
.gc-rayon-gammes h2 { margin: 0 0 10px; font-size: 15px; font-weight: 700; text-transform: none; color: var(--gc-texte); }
.gc-rayon-gammes-liste { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.gc-rayon-gammes .gc-gamme { padding: 10px; }
.gc-rayon-gammes .gc-gamme-vis { display: flex; align-items: center; justify-content: center; height: 72px; margin-bottom: 6px; border-radius: 8px; background: var(--gc-nuage); overflow: hidden; }
.gc-rayon-gammes .gc-gamme-vis img { max-height: 68px; width: auto; }
.gc-rayon-gammes .gc-gamme b { font-size: 12.5px; }
.gc-rayon-gammes .gc-gamme span { font-size: 11.5px; color: var(--gc-texte-3); }
.gc-gamme-cachee { display: none; }
.gc-bascule:checked ~ .gc-rayon-gammes-liste .gc-gamme-cachee { display: block; }
.gc-gammes-toutes { display: inline-block; margin: 10px 0 0; color: var(--gc-bleu-texte); font-size: 13px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.gc-gammes-toutes .gc-reduire { display: none; }
.gc-bascule:checked ~ .gc-gammes-toutes .gc-voir { display: none; }
.gc-bascule:checked ~ .gc-gammes-toutes .gc-reduire { display: inline; }
@media (max-width: 900px) { .gc-rayon-gammes-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575px) { .gc-rayon-gammes-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* raccourci « disponible uniquement » */
.gc-outils-rayon { margin-bottom: 10px; }
.gc-dispo-raccourci { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1.5px solid var(--gc-trait); border-radius: 999px; background: #fff; color: var(--gc-texte); font-size: 13px; font-weight: 600; }
.gc-dispo-raccourci i { width: 8px; height: 8px; border-radius: 50%; background: var(--gc-vert); }
.gc-dispo-raccourci:hover { border-color: var(--gc-encre); color: var(--gc-texte); text-decoration: none; }
.gc-dispo-raccourci[aria-pressed="true"] { border-color: var(--gc-encre); background: var(--gc-encre); color: #fff; }
.gc-dispo-raccourci[aria-pressed="true"] i { background: #5BC48A; }

/* filtres actifs au-dessus de la grille, sur tous les écrans */
.gc-filtres-actifs { margin-bottom: 12px; }
.gc-filtres-actifs .active-filters, .gc-filtres-actifs .active_filters { padding: 0; border: 0; background: none; }
.gc-filtres-actifs .filter-block, .gc-filtres-actifs li { display: inline-flex; align-items: center; gap: 7px; margin: 0 6px 6px 0; padding: 5px 11px; border-radius: 999px; background: var(--gc-bleu-clair); color: var(--gc-bleu-texte); font-size: 12.5px; font-weight: 600; }
.gc-filtres-actifs .js-search-filters-clear-all { margin-left: 4px; border: 0; background: none; color: var(--gc-texte-2); font-size: 12.5px; font-weight: 600; text-decoration: underline; }

/* barre d'outils du rayon */
#js-product-list-top.products-selection { align-items: center; margin: 0 0 6px; padding: 12px 0; border-top: 1px solid var(--gc-trait); border-bottom: 1px solid var(--gc-trait); }
#js-product-list-top .total-products p { margin: 0; font-size: 13px; color: var(--gc-texte-2); }
#js-product-list-top .sort-by { font-size: 13px; color: var(--gc-texte-2); }
.products-sort-order .select-title { height: 38px; border: 1.5px solid var(--gc-trait); border-radius: 8px; font-size: 13px; }
.filter-button .btn-secondary { height: 38px; border: 1.5px solid var(--gc-encre); border-radius: 999px; background: #fff; color: var(--gc-encre); font-size: 13px; font-weight: 700; }

/* tiroir de filtres au téléphone (le thème bascule la classe sur #search_filters) */
@media (max-width: 991px) {
    #search_filters_wrapper { position: fixed; inset: 0; z-index: 1000; display: none; padding: 0; background: #fff; overflow: auto; }
    #search_filters_wrapper.shown, #search_filters_wrapper[style*="block"] { display: block; }
    #search_filters_wrapper #search_filters { padding: 16px; }
    #search_filters_wrapper .facet { border-bottom: 1px solid var(--gc-trait); }
}

/* texte de bas de rayon */
#js-product-list-footer .category-additional-description { margin: 18px 0 8px; padding: 18px 20px; border: 0; border-radius: 12px; background: var(--gc-nuage); font-size: 13.5px; line-height: 1.65; color: var(--gc-texte-2); }
#js-product-list-footer .category-additional-description h2 { margin: 0 0 8px; font-size: 16px; color: var(--gc-texte); text-transform: none; }
#js-product-list-footer .category-additional-description p { max-width: 90ch; }
#js-product-list-footer .card { border: 0; background: none; box-shadow: none; }

/* pagination */
.pagination { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--gc-trait); }
.pagination .page-list { margin: 0; }
.pagination .page-list li a { min-width: 34px; height: 34px; border: 1px solid var(--gc-trait); border-radius: 8px; font-weight: 600; }
.pagination .page-list li.current a { background: var(--gc-encre); border-color: var(--gc-encre); color: #fff; }

/* colonne de filtres : on borne la hauteur des longues listes */
#search_filters .facet ul { max-height: 260px; overflow-y: auto; padding-right: 4px; }
#search_filters .facet ul::-webkit-scrollbar { width: 6px; }
#search_filters .facet ul::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--gc-trait); }
#search_filters .facet { padding-bottom: 12px; border-bottom: 1px solid var(--gc-trait); }
#search_filters .facet-label { margin-bottom: 4px; }
#search_filters .facet-label a { font-size: 13.5px; }
#left-column .block-categories { border: 0; background: none; padding: 0 0 10px; }

/* deux produits par ligne au téléphone (le thème n'en met qu'un) */
@media (max-width: 767px) {
    #products .products-grid .products .product-item,
    #js-product-list .products .product-item,
    .featured-products .products-grid .products .product-item { width: 50%; padding-left: 5px; padding-right: 5px; }
    #js-product-list .products, #products .products { margin-left: -5px; margin-right: -5px; }
    .product-miniature .product-title a { font-size: 13.5px; }
    .product-miniature .price { font-size: 17px; }
}

/* ------------------------------------------------------------------
   Tunnel de commande
------------------------------------------------------------------- */
/* fil des étapes (panier) */
.gc-etapes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: var(--gc-nuage); font-size: 13px; }
.gc-etape { display: inline-flex; align-items: center; gap: 8px; color: var(--gc-texte-3); }
.gc-etape i { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1.5px solid var(--gc-trait); border-radius: 50%; background: #fff; font-size: 11.5px; font-style: normal; font-weight: 700; }
.gc-etape.active { color: var(--gc-texte); font-weight: 700; }
.gc-etape.active i { border-color: var(--gc-encre); background: var(--gc-encre); color: #fff; }
.gc-sep { color: var(--gc-texte-3); }

/* panier */
#cart .cart-container, #cart .cart-summary, #checkout .cart-summary { border: 1px solid var(--gc-trait); border-radius: 12px; box-shadow: none; }
#cart h1.h1 { margin: 0 0 4px; font-size: 24px; text-transform: none; }
.gc-panier-sous { margin: 0; font-size: 13.5px; color: var(--gc-texte-2); }
#cart .product-line-grid { align-items: center; }
#cart .product-line-info .label, #cart .product-line-info a.label { color: var(--gc-texte); font-size: 14.5px; font-weight: 600; }
#cart .product-line-grid-left .product-image img { border-radius: 9px; background: var(--gc-nuage); }
#cart .cart-summary-line .label { color: var(--gc-texte-2); }
#cart .cart-summary-line.cart-total .label, #cart .cart-summary-line.cart-total .value { font-size: 19px; font-weight: 700; color: var(--gc-texte); }
#cart .checkout .btn, #checkout .checkout .btn { width: 100%; height: 50px; font-size: 15px; }
#cart .cart-summary .block-promo .promo-code-button { font-size: 13.5px; font-weight: 600; }

/* réassurance et mentions, panier et tunnel */
.gc-rassure-tunnel { display: grid; gap: 11px; margin-top: 14px; padding: 14px 16px; border: 1px solid var(--gc-trait); border-radius: 12px; font-size: 13px; background: #fff; }
.gc-rassure-tunnel > div { display: flex; align-items: flex-start; gap: 11px; }
.gc-rassure-tunnel i { flex: none; margin-top: 2px; color: var(--gc-bleu); font-size: 16px; }
.gc-rassure-tunnel b { display: block; font-size: 13.5px; color: var(--gc-texte); }
.gc-rassure-tunnel span { color: var(--gc-texte-2); line-height: 1.45; }
.gc-legal { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--gc-texte-3); }
.gc-tunnel-legal { display: block; margin-top: 6px; font-size: 12px; color: var(--gc-texte-3); }

/* étapes du tunnel */
#checkout .checkout-step { margin-bottom: 12px; border: 1px solid var(--gc-trait); border-radius: 12px; background: #fff; }
#checkout .checkout-step .step-title { padding: 16px 18px; font-size: 16px; font-weight: 700; color: var(--gc-texte); text-transform: none; }
#checkout .checkout-step.-current .step-title { border-bottom: 1px solid var(--gc-trait); }
#checkout .checkout-step .step-number { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: 10px; border-radius: 50%; background: var(--gc-nuage); font-size: 12.5px; font-weight: 700; }
#checkout .checkout-step.-current .step-number { background: var(--gc-encre); color: #fff; }
#checkout .checkout-step.-complete .step-number { background: #E8F6EE; color: var(--gc-vert); }
#checkout .content { padding: 18px; }

/* modes de livraison */
/* le thème garde ses colonnes Bootstrap ici : on n'habille que la carte */
#checkout .delivery-option { margin: 0 0 10px; padding: 14px; border: 1.5px solid var(--gc-trait); border-radius: 12px; background: #fff; }
#checkout .delivery-option:hover { border-color: var(--gc-bleu); }
#checkout .delivery-option .custom-radio, #checkout .delivery-option input[type="radio"] { margin-top: 2px; }
#checkout .delivery-option .carrier-name, #checkout .delivery-option .h6 { font-size: 14.5px; font-weight: 700; color: var(--gc-texte); }
#checkout .delivery-option .carrier-delay, #checkout .delivery-option .delivery-option-2 { font-size: 13px; color: var(--gc-texte-2); }
#checkout .delivery-option .carrier-price { font-weight: 700; white-space: nowrap; }
#checkout .carrier-extra-content { margin: 6px 0 14px; padding: 14px; border: 1px dashed var(--gc-trait); border-radius: 12px; background: var(--gc-nuage); }

/* moyens de paiement */
#checkout .payment-options .payment-option { margin: 0 0 10px; padding: 14px; border: 1.5px solid var(--gc-trait); border-radius: 12px; background: #fff; }
#checkout .payment-options .payment-option:hover { border-color: var(--gc-bleu); }
#checkout .payment-options .payment-option label { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--gc-texte); }
#checkout #conditions-to-approve { margin-top: 14px; padding: 14px; border: 1px solid var(--gc-trait); border-radius: 12px; background: var(--gc-nuage); }
#checkout #conditions-to-approve label { font-size: 13.5px; color: var(--gc-texte-2); }
#checkout #conditions-to-approve a { font-weight: 600; color: var(--gc-bleu-texte); text-decoration: underline; }
#checkout #payment-confirmation button { width: 100%; height: 52px; font-size: 15.5px; }

/* confirmation de commande */
.gc-suite { margin: 18px 0; padding: 18px 20px; border: 1px solid var(--gc-trait); border-radius: 12px; background: #fff; }
.gc-suite h2 { margin: 0 0 12px; font-size: 17px; text-transform: none; color: var(--gc-texte); }
.gc-suite-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gc-suite-liste > div { padding: 14px; border: 1px solid var(--gc-trait); border-radius: 10px; font-size: 13px; color: var(--gc-texte-2); }
.gc-suite-liste b { display: block; margin-bottom: 3px; font-size: 13.5px; color: var(--gc-texte); }
@media (max-width: 760px) { .gc-suite-liste { grid-template-columns: 1fr; } }

/* ligne de panier : visuel plus lisible, colonnes resserrées */
#cart .product-line-grid-left { max-width: 110px; }
#cart .product-line-grid-left .product-image img { width: 92px; height: 92px; object-fit: contain; padding: 6px; }
#cart .product-line-grid-body { padding-left: 4px; }
#cart .product-line-grid-right .product-price { font-size: 17px; font-weight: 700; }
#cart .product-line-grid-right .qty { margin-right: 10px; }
#cart .product-line-grid-right input.js-cart-line-product-quantity { height: 40px; border: 1.5px solid var(--gc-trait); border-radius: 8px; }
#cart .remove-from-cart { color: var(--gc-texte-3); }
#cart .product-line-grid + .product-line-grid { border-top: 1px solid var(--gc-trait); }

/* ---- Franco de port : jauge dans le panier ---- */
.gc-franco { margin: 0 0 14px; padding: 13px 16px; border: 1px solid var(--gc-trait); border-radius: 12px; background: #fff; }
.gc-franco p { margin: 0 0 9px; font-size: 13.5px; line-height: 1.45; color: var(--gc-texte-2); }
.gc-franco b { color: var(--gc-texte); font-weight: 700; }
.gc-franco-jauge { height: 6px; border-radius: 999px; background: var(--gc-trait); overflow: hidden; }
.gc-franco-jauge span { display: block; height: 100%; border-radius: 999px; background: var(--gc-bleu); }
.gc-franco-ok { border-color: #BFE3CE; background: var(--gc-vert-fond); }
.gc-franco-ok b { color: var(--gc-vert); }
.gc-franco-ok .gc-franco-jauge span { background: var(--gc-vert); }


/* ==================================================================
   Identite goutce — l'enveloppe sombre
   ================================================================== */

/* Le bandeau et l'en-tete portent le logo : ils doivent etre sombres. */
.gc-bandeau {
    background: var(--gc-encre);
    color: #C9BBDE;
}
.gc-bandeau strong, .gc-bandeau b { color: #FFFFFF; }

#header, .header-top, .header-nav {
    background: var(--gc-encre);
    color: #EDE6F7;
}
#header a, .header-top a, .header-nav a { color: #EDE6F7; }
#header a:hover, .header-top a:hover { color: var(--gc-magenta); }

/* Un filet en degrade sous l'en-tete : la seule trace du logo dans la page. */
#header { border-bottom: 3px solid transparent; border-image: var(--gc-degrade) 1; }

/* Le champ de recherche doit rester lisible sur fond sombre. */
#header input[type="text"], #header input[type="search"], #header .form-control {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #FFFFFF;
}
#header input::placeholder { color: #B7A8CC; }

/* Le logo respire : pas de cadre, pas de fond blanc derriere. */
#header .logo, .header-logo img { background: none; }

/* ---- Les actions ---- */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
    background: var(--gc-violet);
    border-color: var(--gc-violet);
    color: #FFFFFF;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active:focus {
    background: var(--gc-violet-fonce) !important;
    border-color: var(--gc-violet-fonce) !important;
}
/* Le degrade du logo, reserve a l'action principale d'une page. */
.gc-cta, .add-to-cart, #add_to_cart .btn, .product-add-to-cart .btn-primary {
    background: var(--gc-degrade);
    border: 0;
    color: #FFFFFF;
}
.gc-cta:hover, .add-to-cart:hover, .product-add-to-cart .btn-primary:hover {
    filter: brightness(1.08);
}
:focus-visible { outline: 3px solid var(--gc-magenta); outline-offset: 2px; }

a { color: var(--gc-violet-texte); }
a:hover { color: var(--gc-magenta); }

/* ---- Le heros ---- */
.gc-hero, .image-slider-block {
    background: radial-gradient(120% 140% at 12% 0%, #3A0F5E 0%, var(--gc-encre) 62%);
    color: #FFFFFF;
}
.gc-hero-sur, .gc-hero .gc-hero-sur {
    background: var(--gc-degrade);
    color: #FFFFFF;
    border: 0;
}

/* ---- Le pied de page ---- */
.footer-container, #footer {
    background: var(--gc-encre);
    color: #C9BBDE;
}
#footer a, .footer-container a { color: #D8CCEA; }
#footer a:hover, .footer-container a:hover { color: var(--gc-magenta); }
#footer h3, #footer h4, .footer-container h3 { color: #FFFFFF; }

/* ---- Les pastilles de prix et de nouveaute ---- */
.product-flags .new, .product-flags .on-sale, .gc-pastille {
    background: var(--gc-degrade);
    color: #FFFFFF;
    border: 0;
}
.product-price, .current-price-value { color: var(--gc-violet-texte); }

/* ---- Les vignettes : un lisere de marque au survol, rien de plus ---- */
.product-miniature { border: 1px solid var(--gc-trait); border-radius: 12px; }
.product-miniature:hover {
    border-color: var(--gc-violet);
    box-shadow: 0 10px 28px -18px rgba(122, 15, 224, .55);
}

/* ---- Les titres de rayon ---- */
.page-header h1, #js-product-list-header h1, .category-header h1 { color: var(--gc-texte); }
.page-header h1::after, .category-header h1::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin-top: 10px;
    background: var(--gc-degrade);
    border-radius: 2px;
}


/* ==================================================================
   Finitions
   ================================================================== */

/* ---- L'en-tete sombre : tout le texte suit ---- */
#header, #header .header-top, #header .header-nav,
#header .blockcart, #header .cart-preview,
#header .user-info, #header .header-top-right {
    color: #EDE6F7;
}
#header .blockcart *, #header .cart-preview *,
#header .user-info *, #header .header-top a, #header .header-nav a {
    color: inherit;
}

#header .blockcart:hover *, #header .user-info a:hover { color: var(--gc-magenta); }

/* La pastille ronde du panier, sur fond sombre. */
#header .blockcart .shopping-cart, #header .cart-icon {
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .20);
}

/* ---- Le bandeau du haut ---- */
.goutce-bandeau {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 26px;
    padding: 9px 18px;
    background: var(--gc-encre);
    color: #C9BBDE;
    font-size: 12.5px;
    text-align: center;
}
.goutce-bandeau span { white-space: nowrap; }

/* ---- Le bloc de contact du pied ---- */
.goutce-contact h4 { color: #FFFFFF; font-size: 15px; margin-bottom: 8px; }
.goutce-contact p { margin: 0 0 6px; color: #C9BBDE; font-size: 13.5px; }
.goutce-contact a { color: var(--gc-magenta); font-weight: 600; }

/* ---- Le champ de recherche sur fond sombre ---- */
#header .search-widget form input[type="text"],
#header #search_widget input[type="text"] {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #FFFFFF;
}
#header .search-widget form button, #header #search_widget button { color: #EDE6F7; }


/* ==================================================================
   Finitions 2 — selecteurs releves dans le balisage servi
   ================================================================== */

/* ---- Le panier, sur en-tete sombre ---- */
.blockcart, .blockcart.cart-preview,
.blockcart a, .blockcart span, .blockcart .cart-qty {
    color: #EDE6F7;
}
.blockcart .cart-number, .blockcart .cart-products-count {
    color: #C9BBDE;
    background: none;
    font-weight: 500;
}
.blockcart:hover a, .blockcart:hover span { color: var(--gc-magenta); }

/* La pastille ronde autour de l'icone. */
.blockcart .shopping-cart, .blockcart > a > i, .cart-preview .shopping-cart {
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #FFFFFF;
}

/* Le lien « Connexion » et les liens du haut. */
.header-top a, .header-nav a, .user-info a { color: #EDE6F7; }
.header-top a:hover, .header-nav a:hover, .user-info a:hover { color: var(--gc-magenta); }

/* ---- Les pastilles produit ---- */
.product-flag {
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 4px 11px;
    text-transform: uppercase;
    border: 0;
}
.product-flag.new, .product-flag.online-only, .product-flag.discount {
    background: var(--gc-degrade);
    color: #FFFFFF;
}
/* Une rupture de stock doit se lire comme une information, pas comme une promotion. */
.product-flag.out_of_stock {
    background: #F3EFF8;
    color: #5C4F72;
    border: 1px solid var(--gc-trait);
}
.product-flag.on-sale, .product-flag.pack { background: var(--gc-violet); color: #FFFFFF; }

/* ---- Le logo : l'en-tete lui laisse de la place, autant l'occuper ---- */
.logo, .header-logo img, #header .logo {
    max-width: 230px;
    width: auto;
    height: auto;
}
@media (max-width: 767px) {
    .logo, .header-logo img, #header .logo { max-width: 170px; }
}


/* ==================================================================
   Finitions 3 — la ou le theme l'emporte en specificite
   ================================================================== */

/* Le theme cible ces pastilles plus precisement que nous ; le `!important` est ici
   le moyen le plus lisible de trancher, plutot qu'empiler des selecteurs. */
.product-flags .product-flag.new,
.product-flags li.product-flag.new {
    background: var(--gc-degrade) !important;
    color: #FFFFFF !important;
    border: 0 !important;
}
.product-flags .product-flag.on-sale,
.product-flags .product-flag.discount,
.product-flags .product-flag.pack {
    background: var(--gc-violet) !important;
    color: #FFFFFF !important;
    border: 0 !important;
}
/* Une rupture de stock informe, elle ne met pas en avant : gris, pas couleur de marque. */
.product-flags .product-flag.out_of_stock,
.product-flags li.product-flag.out_of_stock {
    background: #EFEAF6 !important;
    color: #5C4F72 !important;
    border: 1px solid var(--gc-trait) !important;
}
.product-flags .product-flag {
    border-radius: 999px !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 4px 11px;
    text-transform: uppercase;
}

/* Le compte d'articles : du texte, pas une pastille de couleur. */
.blockcart .cart-products-count, .blockcart .cart-number {
    background: none !important;
    background-image: none !important;
    color: #C9BBDE !important;
    -webkit-text-fill-color: #C9BBDE;
}
.blockcart:hover .cart-products-count { color: var(--gc-magenta) !important; }

.goutce-editeur { margin-top: 12px; font-size: 12px; line-height: 1.5; color: #8E7FA8; }


/* ==================================================================
   Le catalogue
   ================================================================== */

/* ---- L'en-tete de rayon ----
   Le titre flottait, centre et seul, au-dessus d'une description grise illisible.
   On l'ancre a gauche avec le filet de marque, comme sur les autres pages. */
#js-product-list-header, .block-category {
    text-align: left;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--gc-trait);
    margin-bottom: 22px;
}
#js-product-list-header h1, .block-category h1 {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--gc-texte);
    margin: 0 0 10px;
}
#js-product-list-header h1::after, .block-category h1::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin-top: 10px;
    background: var(--gc-degrade);
    border-radius: 2px;
}
#js-product-list-header .category-description,
#js-product-list-header #category-description, .block-category .category-description {
    color: var(--gc-texte-2) !important;
    font-size: 15px;
    line-height: 1.6;
    max-width: 70ch;
}

/* ---- La barre de tri ---- */
#js-product-list-top {
    background: var(--gc-nuage);
    border: 1px solid var(--gc-trait);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 20px;
}
#js-product-list-top .total-products p, #js-product-list-top .products-sort-order {
    color: var(--gc-texte-2);
    font-size: 14px;
    margin: 0;
}

/* ---- Les vignettes ----
   Le theme laissait une carte blanche, sans relief, ou le titre et le prix flottaient
   sans hierarchie. On serre la carte, on donne du poids au prix, et on reserve la
   couleur de marque au survol. */
.product-miniature .thumbnail-container,
.product-miniature article {
    background: #FFFFFF;
    border: 1px solid var(--gc-trait);
    border-radius: 14px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.product-miniature:hover .thumbnail-container,
.product-miniature:hover article {
    border-color: var(--gc-violet);
    box-shadow: 0 14px 30px -20px rgba(122, 15, 224, .55);
    transform: translateY(-2px);
}

/* Le visuel : une place FIXE, pour que les cartes d'une rangee s'alignent meme quand
   une photo manque — 43 fiches n'en ont aucune. */
.product-miniature .thumbnail-container .product-thumbnail,
.product-miniature .product-image {
    display: block;
    background: #FBF9FE;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.product-miniature .thumbnail-container img,
.product-miniature .product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
}

/* Le texte occupe le reste, et le prix se cale en bas : les boutons s'alignent. */
.product-miniature .product-description, .product-miniature .meta-pro {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 12px 14px 14px;
    text-align: left;
}
.product-miniature .product-title {
    min-height: 3.4em;
    margin: 0 0 6px;
    display: flex;
    align-items: flex-start;
}
.product-miniature .product-title a {
    color: var(--gc-texte);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.005em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-miniature:hover .product-title a { color: var(--gc-violet-texte); }

/* La marque, discrete, au-dessus du prix. */
.product-miniature .product-brand-default, .product-miniature .product-brand {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gc-texte-3);
    margin-bottom: 8px;
}

/* Le prix : c'est l'information qu'on cherche, elle doit peser. */
.product-miniature .product-price-and-shipping,
.product-miniature .product-price-and-shipping .price {
    font-size: 19px;
    font-weight: 800;
    color: var(--gc-texte);
    letter-spacing: -.02em;
}
.product-miniature .product-price-and-shipping .regular-price {
    font-size: 13px;
    font-weight: 500;
    color: var(--gc-texte-3);
    text-decoration: line-through;
    margin-right: 6px;
}

/* Le bas de carte : prix a gauche, action a droite, toujours sur la meme ligne. */
.product-miniature .product-description > .product-price-and-shipping,
.product-miniature .meta-pro > .product-price-and-shipping {
    margin-top: auto;
}
.product-miniature .product-add-to-cart, .product-miniature .add-to-cart {
    margin-top: 10px;
}
.product-miniature .product-add-to-cart .btn, .product-miniature .btn.add-to-cart {
    width: 100%;
    border-radius: 9px;
    font-weight: 600;
    font-size: 13.5px;
    padding: 9px 12px;
}

/* ---- La colonne de filtres ---- */
#search_filters, #search_filters_wrapper {
    background: var(--gc-nuage);
    border: 1px solid var(--gc-trait);
    border-radius: 12px;
    padding: 16px 16px 8px;
}
#search_filters .facet, #search_filters_wrapper .facet {
    border-bottom: 1px solid var(--gc-trait);
    padding-bottom: 12px;
    margin-bottom: 12px;
}
#search_filters .facet:last-child { border-bottom: 0; }
#search_filters .facet-title, #search_filters .facet .title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gc-texte);
}
#search_filters .facet-label a, #search_filters li a {
    color: var(--gc-texte-2);
    font-size: 14px;
}
#search_filters .facet-label a:hover { color: var(--gc-violet-texte); }

/* L'arborescence de la colonne : elle servait de seul contenu, autant la tenir. */
.block-categories {
    background: var(--gc-nuage);
    border: 1px solid var(--gc-trait);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 18px;
}
.block-categories .category-top-menu > li > a, .block-categories h1, .block-categories .text-uppercase {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gc-texte);
}
.block-categories a { color: var(--gc-texte-2); font-size: 14px; }
.block-categories a:hover { color: var(--gc-violet-texte); }

/* ---- La pagination ---- */
.pagination .page-list a, .pagination .page-list span {
    border-radius: 8px;
    color: var(--gc-texte-2);
}
.pagination .page-list .current a, .pagination .current span {
    background: var(--gc-degrade);
    color: #FFFFFF;
    font-weight: 700;
}


/* ==================================================================
   Le catalogue
   ================================================================== */

/* ---- L'en-tete de rayon ----
   Le titre flottait, centre et seul, au-dessus d'une description grise illisible.
   On l'ancre a gauche avec le filet de marque, comme sur les autres pages. */
/* ⚠️ Mesure a l'appui : le theme force `text-align: center` sur cet en-tete avec une
   specificite superieure a la notre. Charger la feuille APRES la sienne ne suffit pas —
   l'ordre source ne departage que des specificites egales. */
#js-product-list-header, .block-category, #js-product-list-header .block-category-inner {
    text-align: left !important;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--gc-trait);
    margin-bottom: 22px;
}
#js-product-list-header h1, .block-category h1 {
    text-align: left !important;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--gc-texte);
    margin: 0 0 10px;
}
#js-product-list-header h1::after, .block-category h1::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin-top: 10px;
    background: var(--gc-degrade);
    border-radius: 2px;
}
/* Le theme reserve la place d'un bloc de description absent : on retire le vide
   plutot que de le laisser pousser la grille vers le bas. */
#js-product-list-header .category-description:empty,
#js-product-list-header #category-description:empty { display: none; }
#js-product-list-header .category-description,
#js-product-list-header #category-description, .block-category .category-description {
    margin-bottom: 0;
    color: var(--gc-texte-2) !important;
    font-size: 15px;
    line-height: 1.6;
    max-width: 70ch;
}

/* ---- La barre de tri ---- */
#js-product-list-top {
    background: var(--gc-nuage);
    border: 1px solid var(--gc-trait);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 20px;
}
#js-product-list-top .total-products p, #js-product-list-top .products-sort-order {
    color: var(--gc-texte-2);
    font-size: 14px;
    margin: 0;
}

/* ---- Les vignettes ----
   Le theme laissait une carte blanche, sans relief, ou le titre et le prix flottaient
   sans hierarchie. On serre la carte, on donne du poids au prix, et on reserve la
   couleur de marque au survol. */
.product-miniature .thumbnail-container,
.product-miniature article {
    background: #FFFFFF;
    border: 1px solid var(--gc-trait);
    border-radius: 14px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.product-miniature:hover .thumbnail-container,
.product-miniature:hover article {
    border-color: var(--gc-violet);
    box-shadow: 0 14px 30px -20px rgba(122, 15, 224, .55);
    transform: translateY(-2px);
}

/* Le visuel : une place FIXE, pour que les cartes d'une rangee s'alignent meme quand
   une photo manque — 43 fiches n'en ont aucune. */
.product-miniature .thumbnail-container .product-thumbnail,
.product-miniature .product-image {
    display: block;
    background: #FBF9FE;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.product-miniature .thumbnail-container img,
.product-miniature .product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
}

/* Le texte occupe le reste, et le prix se cale en bas : les boutons s'alignent. */
.product-miniature .product-description, .product-miniature .meta-pro {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 12px 14px 14px;
    text-align: left;
}
.product-miniature .product-title {
    min-height: 3.4em;
    margin: 0 0 6px;
    display: flex;
    align-items: flex-start;
}
/* Le `text-align` du conteneur mesure bien « left », mais le theme centre le lien
   lui-meme : c'est sur le <a> qu'il faut reprendre la main. */
.product-miniature .product-title a {
    text-align: left !important;
    color: var(--gc-texte);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.005em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-miniature:hover .product-title a { color: var(--gc-violet-texte); }

/* La marque, discrete, au-dessus du prix. */
.product-miniature .product-brand-default, .product-miniature .product-brand {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gc-texte-3);
    margin-bottom: 8px;
}

/* Le prix : c'est l'information qu'on cherche, elle doit peser. */
/* Le theme impose 18px/600 au prix : on reprend la main, mesure a l'appui. */
.product-miniature .product-price-and-shipping,
.product-miniature .product-price-and-shipping .price,
.product-miniature .product-price-and-shipping span {
    font-size: 19px !important;
    font-weight: 800 !important;
    color: var(--gc-texte);
    letter-spacing: -.02em;
}
.product-miniature .product-price-and-shipping .regular-price {
    font-size: 13px;
    font-weight: 500;
    color: var(--gc-texte-3);
    text-decoration: line-through;
    margin-right: 6px;
}

/* Le bas de carte : prix a gauche, action a droite, toujours sur la meme ligne. */
.product-miniature .product-description > .product-price-and-shipping,
.product-miniature .meta-pro > .product-price-and-shipping {
    margin-top: auto;
}
.product-miniature .product-add-to-cart, .product-miniature .add-to-cart {
    margin-top: 10px;
}
.product-miniature .product-add-to-cart .btn, .product-miniature .btn.add-to-cart {
    width: 100%;
    border-radius: 9px;
    font-weight: 600;
    font-size: 13.5px;
    padding: 9px 12px;
}

/* ---- La colonne de filtres ---- */
#search_filters, #search_filters_wrapper {
    background: var(--gc-nuage);
    border: 1px solid var(--gc-trait);
    border-radius: 12px;
    padding: 16px 16px 8px;
}
#search_filters .facet, #search_filters_wrapper .facet {
    border-bottom: 1px solid var(--gc-trait);
    padding-bottom: 12px;
    margin-bottom: 12px;
}
#search_filters .facet:last-child { border-bottom: 0; }
#search_filters .facet-title, #search_filters .facet .title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gc-texte);
}
#search_filters .facet-label a, #search_filters li a {
    color: var(--gc-texte-2);
    font-size: 14px;
}
#search_filters .facet-label a:hover { color: var(--gc-violet-texte); }

/* L'arborescence de la colonne : elle servait de seul contenu, autant la tenir. */
.block-categories {
    background: var(--gc-nuage);
    border: 1px solid var(--gc-trait);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 18px;
}
.block-categories .category-top-menu > li > a, .block-categories h1, .block-categories .text-uppercase {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gc-texte);
}
.block-categories a { color: var(--gc-texte-2); font-size: 14px; }
.block-categories a:hover { color: var(--gc-violet-texte); }

/* ---- La pagination ---- */
.pagination .page-list a, .pagination .page-list span {
    border-radius: 8px;
    color: var(--gc-texte-2);
}
.pagination .page-list .current a, .pagination .current span {
    background: var(--gc-degrade);
    color: #FFFFFF;
    font-weight: 700;
}
/* ===========================================================================
   FINITIONS — 23/09/2026
   Reponse a la liste de defauts : en-tete, slider, hauteur des vignettes,
   marques, newsletter, pied de page.

   ⚠️ Le premier bloc n'est pas cosmetique : 27 declarations de cette feuille
   utilisaient `--gc-bleu*`, une variable JAMAIS definie. Une declaration dont
   la variable est absente est INVALIDE — le navigateur la jette en silence et
   la regle du theme de demo (turquoise, orange) repasse dessous. C'est ce qui
   faisait cohabiter deux palettes sur la meme page.
   =========================================================================== */

:root {
    --gc-bleu: var(--gc-violet);
    --gc-bleu-fonce: var(--gc-violet-fonce);
    --gc-bleu-texte: var(--gc-violet-texte);
    --gc-bleu-clair: var(--gc-violet-clair);
}

/* --------------------------------------------------------------- l'en-tete */

.header-banner .gc-bandeau {
    padding: 9px 0;
    background: var(--gc-encre-2);
    font-size: 12.5px;
    letter-spacing: .01em;
}

.header-nav {
    min-height: 0;
    border: 0;
    background: var(--gc-encre);
}
.header-nav .container { padding-top: 4px; padding-bottom: 4px; }
.header-nav,
.header-nav a,
.header-nav .user-info,
.header-nav .user-info a,
.header-nav .material-icons { color: rgba(255, 255, 255, .78); }
.header-nav a:hover,
.header-nav .user-info a:hover { color: #FFFFFF; }
.header-nav .user-info { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }

.header-top { padding: 16px 0 18px; background: var(--gc-encre); }
.header-top #_desktop_logo img { max-height: 54px; width: auto; }

/* La recherche : une pastille claire sur le fond encre, pas un bloc gris. */
#search_widget .search-widget form,
#search_widget form { position: relative; }
#search_widget input[type="text"],
#search_widget input.ui-autocomplete-input {
    width: 100%;
    height: 46px;
    padding: 0 54px 0 20px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #FFFFFF;
    font-size: 14.5px;
}
#search_widget input[type="text"]::placeholder { color: rgba(255, 255, 255, .52); }
#search_widget input[type="text"]:focus {
    border-color: var(--gc-magenta);
    background: rgba(255, 255, 255, .13);
    outline: 0;
}
#search_widget button[type="submit"],
#search_widget .btn { /* le bouton loupe, cale dans la pastille */
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--gc-degrade);
    color: #FFFFFF;
    line-height: 38px;
}
#search_widget .material-icons { font-size: 20px; color: #FFFFFF; }

/* Le panier : lisible sur fond sombre. */
#_desktop_cart .blockcart,
#_desktop_cart .blockcart a,
#_desktop_cart .blockcart .text,
#_desktop_cart .blockcart .cart-qty { color: rgba(255, 255, 255, .9); }
#_desktop_cart .blockcart .text { font-weight: 600; }
#_desktop_cart .blockcart .cart-qty { color: rgba(255, 255, 255, .62); font-size: 12.5px; }
#_desktop_cart .blockcart .cart-products-count {
    display: inline-block;
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--gc-magenta);
    color: #FFFFFF;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

/* La barre de rayons. */
.header-navfullwidth {
    background: var(--gc-encre-2);
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.header-navfullwidth .top-menu > li > a,
.top-navigation-menu .top-menu > li > a {
    padding: 15px 16px;
    color: rgba(255, 255, 255, .88);
    font-size: 14.5px;
    font-weight: 600;
}
.header-navfullwidth .top-menu > li > a:hover,
.header-navfullwidth .top-menu > li:hover > a { color: #FFFFFF; background: rgba(255, 255, 255, .07); }

/* ---------------------------------------------------------------- le heros */

/* Le visuel est un produit pose sur fond noir. En `screen`, le noir se fond
   dans le degrade violet et il ne reste que le flacon — pas de rectangle
   noir rapporte au milieu d'un fond colore. */
.gc-hero-visuel {
    border: 0;
    background: transparent;
    padding: 0;
}
.gc-hero-visuel img {
    /* On recadre sur les flacons : le visuel a une large plage noire a gauche.
       Une fois le sujet centre, le masque peut etre symetrique et effacer les
       QUATRE bords — sinon le bord droit reste net la ou sont les flacons. */
    aspect-ratio: 5 / 4;
    object-fit: cover;
    object-position: 74% 50%;
    /* ⚠️ `mix-blend-mode` a ete essaye puis abandonne : le carrousel Bootstrap
       pose une transformation sur `.carousel-item`, ce qui cree un contexte
       d'empilement et isole le melange — le rectangle noir restait entier.
       Un masque, lui, ne depend d'aucun contexte : on efface les bords. */
    -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 52%, transparent 100%);
    mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 52%, transparent 100%);
    border-radius: 0;
}
.gc-hero-desc { color: rgba(255, 255, 255, .76); }
.gc-hero-puces { color: rgba(255, 255, 255, .7); }
.gc-hero .gc-hero-inner { padding: 52px 0 48px; }

/* ------------------------------------------------- les vignettes : memes hauteurs */

/* Une carte = une colonne. Le visuel occupe une hauteur FIXE (sinon un flacon
   large et un flacon etroit ne donnent pas la meme carte), le titre reserve
   deux lignes, et le pied de carte est pousse en bas par `margin-top: auto`.
   Sans ces trois reglages les cartes mesuraient 415 px et 407 px cote a cote. */
.product-miniature .thumbnail-container,
.product-miniature article {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.product-miniature .thumbnail-container .product-thumbnail,
.product-miniature .product-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 210px;
    padding: 14px;
}
.product-miniature .thumbnail-container img,
.product-miniature .product-image img {
    width: auto;
    max-width: 100%;
    height: 100%;
    max-height: 182px;
    object-fit: contain;
}
.product-miniature .product-description,
.product-miniature .meta-pro {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}
.product-miniature .product-title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.2em;
    margin-bottom: 6px;
}
.product-miniature .product-title a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.35;
}
.product-miniature .product-description > .product-price-and-shipping,
.product-miniature .meta-pro > .product-price-and-shipping,
.product-miniature .product-description > .add,
.product-miniature .meta-pro > .add { margin-top: auto; }
.products .product,
.products .product-item,
#products .product,
#products .product-item { display: flex; }
.products .product > article,
.products .product-item > article { width: 100%; }

/* --------------------------------------------------------------- les marques */

/* Aucune des 181 marques n'a de logo : le module servait le visuel « Aucune
   image disponible » en boucle. Il rend desormais les NOMS — on les habille. */
.brand-section { padding: 34px 0 40px; background: var(--gc-nuage); }
.brand-section .brand-row ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.brand-section .brand-row li { margin: 0; }
.brand-section .brand-row a {
    display: inline-block;
    padding: 7px 15px;
    border: 1px solid var(--gc-trait);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--gc-texte-2);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}
.brand-section .brand-row a:hover {
    border-color: var(--gc-violet);
    color: var(--gc-violet-texte);
}

/* ------------------------------------------------------------ la newsletter */

.block_newsletter {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 34px 0 6px;
    text-align: center;
}
.block_newsletter .footer-block-title,
.block_newsletter .footer-block-title span {
    border: 0;
    background: none;
    color: var(--gc-texte);
    font-size: 22px;
    font-weight: 700;
}
.block_newsletter .footer-block-title::before,
.block_newsletter .footer-block-title::after { display: none; }
.block_newsletter .subscribe-block { display: flex; justify-content: center; gap: 8px; }
.block_newsletter .input-wrapper { flex: 1 1 auto; max-width: 380px; }
.block_newsletter input[type="email"] {
    width: 100%;
    height: 48px;
    padding: 0 18px;
    border: 1px solid var(--gc-trait);
    border-radius: 999px;
    background: #FFFFFF;
}
.block_newsletter .btn-primary {
    height: 48px;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    background: var(--gc-degrade);
    font-weight: 700;
}
.block_newsletter .condition p { color: var(--gc-texte-3); font-size: 12.5px; }

/* -------------------------------------------------------------- le pied */

.footer-container { padding: 44px 0 34px; background: var(--gc-encre); }
.footer-container .container > .row { display: flex; flex-wrap: wrap; }

.gc-pied-marque { padding-right: 40px; }
.gc-pied-logo { display: inline-block; margin-bottom: 16px; }
.gc-pied-logo img { width: 190px; height: auto; }
.gc-pied-baseline { margin: 0 0 18px; color: rgba(255, 255, 255, .62); font-size: 13.5px; line-height: 1.6; }
.gc-pied-contact { margin: 0 0 12px; color: rgba(255, 255, 255, .82); font-size: 14px; }
.gc-pied-bouton {
    display: inline-block;
    padding: 11px 22px;
    border-radius: 999px;
    background: var(--gc-degrade);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}
.gc-pied-bouton:hover { color: #FFFFFF; filter: brightness(1.1); }
.gc-pied-delai { margin: 12px 0 0; color: rgba(255, 255, 255, .5); font-size: 12.5px; }

/* Les titres de colonnes etaient en noir sur fond sombre : illisibles. */
.footer-container .links .h3,
.footer-container .links p.h3,
.footer-container .links .title .h3,
.footer-container .block-contact .h3,
.footer-container .myaccount-title .h3,
.footer-container h3,
.footer-container .h3 {
    margin-bottom: 14px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.footer-container ul { margin: 0; padding: 0; list-style: none; }
.footer-container li { margin-bottom: 9px; }
.footer-container a { color: rgba(255, 255, 255, .68); font-size: 14px; }
.footer-container a:hover { color: #FFFFFF; text-decoration: none; }
.footer-container .links .collapse { display: block; }

.footer-bottom { padding: 16px 0; background: var(--gc-encre-2); }
.footer-bottom .footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.footer-bottom .gc-mentions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.footer-bottom .gc-mentions span { color: rgba(255, 255, 255, .6); font-size: 12.5px; }
.footer-bottom .gc-age-pied { display: flex; align-items: center; gap: 8px; color: #FFFFFF !important; font-weight: 600; }
.footer-bottom .gc-age-pied i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1.5px solid var(--gc-magenta);
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

@media (max-width: 991px) {
    .gc-pied-marque { padding-right: 0; margin-bottom: 30px; }
    .footer-container { padding: 32px 0 24px; }
}

/* Le menu etait enferme dans `col-lg-8` : neuf rayons n'y tenaient pas et
   « Cartes cadeaux » retombait seul sur une deuxieme ligne (barre de 113 px).
   ⚠️ Specificite calibree sur MESURE, pas devinee : le navigateur designe
   `#header .navbar-block .top-menu .level0 > a` (1 id, 3 classes) comme
   gagnante pour le remplissage, et `#header .top-navigation-menu .top-menu`
   pour le `display:block` de la liste. On passe donc au-dessus avec deux
   identifiants — aucun `!important` n'est necessaire. */
#header #_desktop_top_menu.menu {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}
#header .top-navigation-menu #_desktop_top_menu ul.top-menu {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
#header #_desktop_top_menu ul.top-menu > li.level0 > a,
#header #_desktop_top_menu ul.top-menu > li.level0:first-child > a {
    padding: 16px 11px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
}

/* Le panier : `#_desktop_cart .header > a .text` du theme gagnait (1 id,
   2 classes, 1 element) et laissait un lavande pale illisible sur l'encre. */
#header #_desktop_cart .blockcart .text,
#header #_desktop_cart .header > a .text { color: #FFFFFF; font-weight: 600; }
#header #_desktop_cart .blockcart .cart-qty,
#header #_desktop_cart .header > a .cart-qty { color: rgba(255, 255, 255, .6); }

/* L'etiquette de rupture : grise et sans relief a cote du magenta « NEUF ». */
.product-flags li.product-flag.out_of_stock,
.products-grid .products .product-item .product-flags > li.out_of_stock,
#products .products-grid .products .product-item .product-flags > li.out_of_stock {
    background: #FFFFFF;
    border: 1px solid var(--gc-trait);
    color: var(--gc-texte-2);
    font-weight: 600;
}

/* --------------------------------------- le pied : specificites recalibrees */

/* ⚠️ Mesure : `#footer .footer-container .h3.hidden-sm-down { color:#000 }`
   gagnait — des titres NOIRS sur fond encre, donc invisibles. */
#footer .footer-container .h3,
#footer .footer-container .h3.hidden-sm-down,
#footer .footer-container .links .h3.hidden-sm-down,
#footer .footer-container .title .h3,
#footer .footer-container .myaccount-title .h3 {
    margin-bottom: 16px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
#footer .footer-container a { color: rgba(255, 255, 255, .68); font-size: 14px; }
#footer .footer-container a:hover { color: #FFFFFF; }

/* La newsletter : le theme lui met un titre de 40 px en bleu ardoise, flanque
   de deux filets bleus. Rien de tout cela n'appartient a cette boutique. */
#footer .footer-top .block_newsletter .newsletter-title h2,
#footer .footer-top .block_newsletter .newsletter-title h2 span {
    color: var(--gc-texte);
    font-size: 24px;
    font-weight: 700;
}
#footer .footer-top .block_newsletter .newsletter-title h2 span::before,
#footer .footer-top .block_newsletter .newsletter-title h2 span::after { display: none; content: none; }
#footer .footer-top .block_newsletter .btn-primary,
#footer .block_newsletter input.btn-primary {
    height: 48px;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    background: var(--gc-degrade);
    color: #FFFFFF;
    font-weight: 700;
}
#footer .footer-top .block_newsletter input[type="email"] {
    height: 48px;
    border: 1px solid var(--gc-trait);
    border-radius: 999px;
}

/* Une carte en rupture porte un second badge et un lien « Me prevenir » a la
   place du bouton : 7 px de plus que ses voisines. Plutot que de courir apres
   chaque variante, on donne au conteneur une hauteur plancher — le bas de
   carte est deja cale en bas par le `margin-top: auto` ci-dessus. */
.product-miniature .thumbnail-container,
.product-miniature article { min-height: 382px; }
.product-miniature .add,
.product-miniature a.gc-prevenir { margin-bottom: 0; }

/* Page rayon : la carte de titre laissait ~60 px de blanc sous la description,
   et `.gc-outils-rayon` est un conteneur vide qui occupait sa propre ligne.
   ⚠️ `:empty` ne matche PAS un element qui ne contient que des espaces —
   d'ou `:not(:has(*))`. */
/* ⚠️ Mesure : le meme jeu `padding-bottom 18 + border-bottom + margin 22`
   etait pose sur `#js-product-list-header` ET sur `.block-category` qui est
   DEDANS — deux filets empiles et 80 px de vide. On garde celui du parent et
   on neutralise l'enfant. Le `!important` est necessaire : la regle d'origine
   (mon restyle precedent) en portait deja un. */
#js-product-list-header .block-category {
    padding: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
}
#js-product-list-header .block-category .h1 { margin-bottom: 10px; }
.gc-outils-rayon:not(:has(*)) { display: none; }