/* ===========================================================================
   GOUTCE — LA CHARTE
   Lot 1 : le socle. Couleurs, typographie, boutons, champs, cartes, et les
   pages que le theme laissait nues (connexion, inscription, contact, panier,
   tunnel, mot de passe oublie).

   Cette feuille est chargee APRES goutce.css, qui ne sert plus qu'a neutraliser
   le theme de demonstration. Tout ce qui releve de l'identite vit ICI.

   ⚠️ Les sept familles de gout viennent de la caracteristique « Type de
   saveur », deja normalisee en base. La couleur ne decore jamais : elle
   informe. Le magenta et le violet du logo restent la signature de marque.
   =========================================================================== */

:root {
    /* La marque */
    --g-magenta: #F20FC0;
    --g-violet: #7A0FE0;
    --g-violet-fonce: #5F0BB4;
    --g-violet-texte: #6A0BC4;      /* 7,07:1 sur blanc — utilisable pour du TEXTE */
    --g-degrade: linear-gradient(118deg, #F20FC0 0%, #7A0FE0 100%);

    /* Les fonds sombres : un noir qui tire sur le violet, jamais un gris neutre */
    --g-encre: #140B22;
    --g-encre-2: #1E1033;
    --g-encre-3: #2C1A49;

    /* Le corps, clair */
    --g-lilas: #F7F4FB;
    --g-lilas-2: #EFE9F7;
    --g-trait: #E4DCEF;
    --g-texte: #1B1029;
    --g-texte-2: #5C4F72;
    --g-texte-3: #8B7DA2;
    --g-vert: #1E7A4C;

    --g-ombre: 0 1px 2px rgba(20, 11, 34, .05), 0 8px 24px -12px rgba(20, 11, 34, .18);
    --g-ombre-forte: 0 18px 50px -18px rgba(20, 11, 34, .5);
    --g-rayon: 14px;

    --g-display: 'Unbounded', 'Trebuchet MS', system-ui, sans-serif;
    --g-police: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Les sept familles de gout. Chaque couple fond/encre est mesure pour rester
   lisible : l'encre sert au TEXTE, le vif seulement aux pastilles et aux traits. */
.g-fam-fruite    { --fam: #E03E52; --fam-fond: #FCEBED; --fam-encre: #9E2231; }
.g-fam-frais     { --fam: #1D9BD1; --fam-fond: #E7F4FA; --fam-encre: #14607F; }
.g-fam-gourmand  { --fam: #C87A1E; --fam-fond: #FAF0E2; --fam-encre: #8A5210; }
.g-fam-classique { --fam: #7A6048; --fam-fond: #F3EFEA; --fam-encre: #544131; }
.g-fam-menthole  { --fam: #159E6E; --fam-fond: #E6F6F0; --fam-encre: #0D6446; }
.g-fam-boisson   { --fam: #B4632E; --fam-fond: #FAEFE7; --fam-encre: #7C4320; }
.g-fam-bonbon    { --fam: #E3468F; --fam-fond: #FCEAF3; --fam-encre: #9C2660; }

/* ------------------------------------------------------------ typographie */

body,
body.js-body { font-family: var(--g-police); color: var(--g-texte); background: var(--g-lilas); }

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4,
.page-header h1,
.page-title,
#main .page-header h1 {
    font-family: var(--g-display);
    font-weight: 700;
    letter-spacing: -.02em;
    text-wrap: balance;
    color: var(--g-texte);
}

#main .page-header h1,
.page-header h1 {
    margin: 0 0 22px;
    font-size: clamp(24px, 2.8vw, 34px);
    text-transform: none;
}

/* ---------------------------------------------------------------- boutons */

.btn { border-radius: 999px; font-family: var(--g-police); font-weight: 700; letter-spacing: 0; }

.btn-primary,
#main .btn-primary,
.btn.btn-primary,
button.btn-primary,
input.btn-primary {
    border: 0;
    background: var(--g-violet);
    color: #FFFFFF;
    padding: 12px 22px;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
#main .btn-primary:hover { background: var(--g-violet-fonce) !important; color: #FFFFFF; }

.g-btn-magenta,
.btn.g-btn-magenta {
    border: 0;
    background: var(--g-degrade);
    color: #FFFFFF;
    box-shadow: 0 10px 26px -12px rgba(242, 15, 192, .8);
}
.g-btn-magenta:hover { filter: brightness(1.08); color: #FFFFFF; }

.btn-secondary,
.btn-outline-secondary {
    border: 1px solid var(--g-trait);
    background: #FFFFFF;
    color: var(--g-texte-2);
}
.btn-secondary:hover { border-color: var(--g-violet); color: var(--g-violet-texte); background: #FFFFFF; }

/* ----------------------------------------------------------------- champs */

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
input[type="number"],
select,
textarea,
.form-control:focus {
    border: 1px solid var(--g-trait);
    border-radius: 10px;
    background: #FFFFFF;
    color: var(--g-texte);
    font-family: var(--g-police);
    box-shadow: none;
}
.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], select { height: 46px; padding: 0 16px; }
textarea.form-control { min-height: 130px; padding: 14px 16px; }
.form-control:focus,
input:focus, select:focus, textarea:focus {
    border-color: var(--g-violet);
    box-shadow: 0 0 0 3px rgba(122, 15, 224, .14);
    outline: 0;
}
.form-control::placeholder { color: var(--g-texte-3); }

/* ⚠️ Le remplissage automatique du navigateur peint le champ en JAUNE : c'est
   ce qu'on voyait sur la page de connexion. Seul un fond interieur le couvre. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--g-texte);
    box-shadow: 0 0 0 40px #FFFFFF inset;
    caret-color: var(--g-texte);
}

.form-control-label,
label.form-control-label,
.form-group label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--g-texte-2);
}

/* Le selecteur de fichier du formulaire de contact : bouton systeme bleu. */
.custom-file,
.form-control-file { border-radius: 10px; }
.custom-file .btn,
.custom-file-input + .btn,
.form-group .custom-file button,
label.custom-file {
    background: var(--g-lilas-2) !important;
    border: 1px solid var(--g-trait) !important;
    color: var(--g-texte-2) !important;
    border-radius: 10px;
    font-weight: 700;
}
input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 10px 18px;
    border: 1px solid var(--g-trait);
    border-radius: 999px;
    background: var(--g-lilas-2);
    color: var(--g-texte-2);
    font: 700 13px var(--g-police);
    cursor: pointer;
}
input[type="file"]::file-selector-button:hover { border-color: var(--g-violet); color: var(--g-violet-texte); }

/* Le bouton « MONTRER » du mot de passe, gris et carre. */
.input-group .input-group-append .btn,
.input-group-btn .btn,
button[data-action="show-password"] {
    border-radius: 0 10px 10px 0;
    border: 1px solid var(--g-trait);
    border-left: 0;
    background: var(--g-lilas-2);
    color: var(--g-texte-2);
    font-size: 12px;
    font-weight: 700;
}

/* -------------------------------------------------- les pages « nues » */

/* Le theme laissait connexion, inscription, contact, mot de passe oublie et
   adresses sans aucune mise en page : formulaire brut, aligne a droite. */
#authentication #main,
#registration #main,
#contact #main,
#password #main,
#identity #main,
#address #main,
#order-confirmation #main { padding-bottom: 40px; }

/* ⚠️ Mesure avant ecriture : `body#authentication #content.page-content` (2 id)
   annulait fond, bordure, ombre et marges — une regle heritee du theme de
   cigarette recopiee dans goutce.css. On ecrit a la meme specificite, et
   charte.css etant chargee apres, elle gagne sans `!important`. */
body#authentication #content.page-content,
body#registration #content.page-content,
body#contact #content .contact-form,
body#password #content.page-content,
body#identity #content.page-content,
body#address #content.page-content {
    max-width: 680px;
    margin: 0 auto 28px;
    padding: 30px 32px;
    background: #FFFFFF;
    border: 1px solid var(--g-trait);
    border-radius: 18px;
    box-shadow: var(--g-ombre);
}

#authentication .page-header,
#registration .page-header,
#contact .page-header,
#password .page-header { max-width: 680px; margin: 0 auto; text-align: center; }

/* Le formulaire est en deux colonnes libellé/champ, illisible sous 900 px et
   visuellement bancal au-dessus : on empile. */
#authentication .form-group.row,
#registration .form-group.row,
#contact .form-group.row,
#password .form-group.row,
#identity .form-group.row { display: block; margin-bottom: 18px; }
#authentication .form-group.row > label,
#registration .form-group.row > label,
#contact .form-group.row > label,
#password .form-group.row > label,
#identity .form-group.row > label {
    display: block;
    max-width: none;
    flex: none;
    margin-bottom: 7px;
    padding: 0;
    text-align: left;
}
#authentication .form-group.row > div,
#registration .form-group.row > div,
#contact .form-group.row > div,
#password .form-group.row > div,
#identity .form-group.row > div { max-width: none; flex: none; padding: 0; width: 100%; }

#authentication .form-footer,
#registration .form-footer,
#contact .form-footer,
#password .form-footer { display: flex; justify-content: center; margin-top: 8px; }
#authentication .form-footer .btn,
#registration .form-footer .btn,
#contact .form-footer .btn { min-width: 210px; padding: 14px 28px; font-size: 15px; }

#authentication .no-account,
#registration .no-account,
.forgot-password {
    max-width: 680px;
    margin: 0 auto;
    padding: 16px 0 0;
    text-align: center;
}
#authentication .no-account a,
.forgot-password a { color: var(--g-violet-texte); font-weight: 700; border-bottom: 2px solid currentColor; }

/* Le panier et le tunnel */
#cart .cart-grid-body .card,
#cart .cart-grid-right .card,
#checkout .card,
#checkout #checkout-personal-information-step,
#order-confirmation .card {
    border: 1px solid var(--g-trait);
    border-radius: 18px;
    box-shadow: var(--g-ombre);
}
#checkout .step-title,
#cart .cart-summary .h4 { font-family: var(--g-display); font-weight: 600; }
#checkout .step-number { background: var(--g-violet); color: #FFFFFF; }

/* ------------------------------------------------------- bandeau de l'offre */

.g-annonce {
    background: var(--g-degrade);
    color: rgba(255, 255, 255, .92);
    font-size: 12.5px;
}
.g-annonce__flux {
    display: flex;
    gap: 14px 28px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 9px 0;
    margin: 0;
    list-style: none;
}
.g-annonce b { color: #FFFFFF; }
.g-annonce__offre b:first-child { font-family: var(--g-display); font-size: 14px; }
.g-annonce__code {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .26);
    font-family: var(--g-display);
    font-size: 11.5px;
    letter-spacing: .04em;
}

/* ------------------------------------------------------ pieces reutilisables */

.g-pastille-fam {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--fam-encre, var(--g-violet-texte));
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    box-shadow: 0 1px 4px rgba(20, 11, 34, .1);
}
.g-pastille-fam::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50% 50% 50% 2px;
    transform: rotate(45deg);
    background: var(--fam, var(--g-violet));
}

.g-sur {
    margin: 0 0 14px;
    font: 600 11.5px/1 var(--g-police);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--g-magenta);
}
.g-sur--clair { color: rgba(255, 255, 255, .62); }

.g-titre-rang {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
    flex-wrap: wrap;
}
.g-titre-rang h2 { font-size: clamp(23px, 2.5vw, 31px); margin: 0; }
.g-titre-rang p { margin: 7px 0 0; color: var(--g-texte-2); font-size: 14.5px; max-width: 62ch; }
.g-lien-suite { font-weight: 700; color: var(--g-violet-texte); border-bottom: 2px solid currentColor; padding-bottom: 1px; }

/* Le motif de la marque : les volutes du logo, en fond des bandes sombres. */
.g-volutes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.g-bande-sombre { position: relative; overflow: hidden; color: #FFFFFF; }
.g-bande-sombre > .container,
.g-bande-sombre > div { position: relative; z-index: 1; }

/* Le theme borne `#content` a 640 px et le colle en haut : la carte gere
   desormais sa propre largeur. */
body#authentication #content,
body#registration #content {
    max-width: none;
    padding: 0;
    background: none;
}
body#authentication .page-content .form-group:last-of-type,
body#registration .page-content .form-group:last-of-type { margin-bottom: 8px; }

/* ===========================================================================
   LOT 2 — LA VIGNETTE
   Elle ne disait que le nom et le prix. Elle porte desormais la famille de
   gout, la marque, la contenance, la dilution et les saveurs — de quoi
   comparer sans ouvrir la fiche.
   =========================================================================== */

.product-miniature .thumbnail-top { position: relative; }

.g-pastille-fam--carte { position: absolute; top: 12px; left: 12px; z-index: 3; }

/* Le fond du visuel prend la teinte de la famille : le repere se voit avant
   meme de lire la pastille. */
.product-miniature.g-fam-fruite .thumbnail-container .product-thumbnail,
.product-miniature[class*="g-fam-"] .thumbnail-container .product-thumbnail,
.product-miniature[class*="g-fam-"] .product-image {
    background: linear-gradient(180deg, var(--fam-fond) 0%, #FFFFFF 100%);
}

.g-carte-marque {
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fam-encre, var(--g-texte-3));
}

.g-carte-specs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}
.g-carte-specs li {
    padding: 2px 9px;
    border: 1px solid var(--g-trait);
    border-radius: 999px;
    font-size: 11.5px;
    color: var(--g-texte-2);
}

.g-carte-saveurs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin: 0 0 10px;
    font-size: 11.5px;
    color: var(--g-texte-2);
}
.g-carte-saveurs span::after { content: '·'; margin-left: 5px; color: var(--g-texte-3); }
.g-carte-saveurs span:last-child::after { content: ''; }

/* La carte a grandi de trois lignes : la hauteur plancher suit. */
.product-miniature .thumbnail-container,
.product-miniature article { min-height: 452px; }
.product-miniature .product-title { min-height: 2.9em; }
.product-miniature .product-title a { font-size: 14.5px; }

/* ===========================================================================
   LOT 3 — LE RAYON
   =========================================================================== */

/* La barre de familles, au-dessus de la grille. */
.g-familles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    padding: 16px 18px;
    background: #FFFFFF;
    border: 1px solid var(--g-trait);
    border-radius: var(--g-rayon);
}
.g-familles__titre {
    margin-right: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--g-texte-3);
}
.g-fam-bouton {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--fam);
    background: var(--fam-fond);
    color: var(--fam-encre);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
}
.g-fam-bouton::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50% 50% 50% 2px;
    transform: rotate(45deg);
    background: var(--fam);
}
.g-fam-bouton i { font-style: normal; font-size: 11px; font-weight: 600; opacity: .62; }
.g-fam-bouton:hover { background: #FFFFFF; color: var(--fam-encre); }

/* Quatre colonnes au lieu de trois : la grille est un `.row` dont les enfants
   n'ont pas de classe de colonne, c'est le theme qui fixe leur largeur. */
@media (min-width: 1200px) {
    #products .products.row,
    .products-grid .products.row {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
        margin-left: 0;
        margin-right: 0;
    }
    #products .products.row > .product-item,
    .products-grid .products.row > .product-item {
        width: 100%;
        max-width: none;
        flex: none;
        padding: 0;
        margin: 0;
    }
}

/* ⚠️ L'etiquette « Nouveau » du theme et la pastille de famille occupaient le
   MEME coin et se chevauchaient. Les drapeaux passent a droite. */
.product-miniature .product-flags,
.product-miniature ul.product-flags {
    left: auto;
    right: 10px;
    top: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    z-index: 2;
}

/* Le bouton « Montrer » du mot de passe : le theme gagnait en specificite. */
body .input-group .input-group-append .btn,
body .input-group-btn > .btn {
    border-radius: 0 10px 10px 0;
    border: 1px solid var(--g-trait);
    border-left: 0;
    background: var(--g-lilas-2);
    color: var(--g-texte-2);
    font-size: 11.5px;
    font-weight: 700;
}
body#authentication .page-header,
body#registration .page-header,
body#contact .page-header { text-align: center; }

/* ===========================================================================
   LOT 5 — LA FICHE PRODUIT
   =========================================================================== */

.g-fiche-tete { margin: 0 0 20px; }
.g-fiche-marque {
    display: inline-block;
    margin: 0 10px 12px 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fam-encre, var(--g-violet-texte));
    border-bottom: 2px solid currentColor;
}
.g-fiche-tete .g-pastille-fam { vertical-align: 2px; }

.g-fiche-specs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
.g-fiche-specs > div {
    padding: 9px 14px;
    border: 1px solid var(--g-trait);
    border-radius: var(--g-rayon);
    background: #FFFFFF;
}
.g-fiche-specs dt {
    margin: 0;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--g-texte-3);
}
.g-fiche-specs dd { margin: 2px 0 0; font-weight: 700; font-size: 14.5px; color: var(--g-texte); }

.g-fiche-saveurs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 16px 0 0; }
.g-fiche-saveurs__titre {
    margin-right: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--g-texte-3);
}
.g-fiche-saveurs a {
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--fam-fond, var(--g-lilas-2));
    color: var(--fam-encre, var(--g-violet-texte));
    font-size: 13px;
    font-weight: 600;
    border: 1px solid transparent;
}
.g-fiche-saveurs a:hover { border-color: var(--fam, var(--g-violet)); text-decoration: none; }

/* ===========================================================================
   LOT 4 — L'ACCUEIL
   =========================================================================== */

.g-bande { position: relative; padding: 56px 0; }
.g-bande__texte { max-width: 52ch; margin: 14px 0 22px; color: rgba(255, 255, 255, .74); font-size: 15.5px; }
.g-h2-clair { color: #FFFFFF; font-size: clamp(25px, 2.7vw, 34px); margin: 0; }
.g-btn-grand { padding: 15px 28px; font-size: 15px; }

/* l'offre de bienvenue dans le bandeau du haut */
.gc-bandeau__offre b:first-child { font-family: var(--g-display); font-size: 14px; }
.g-annonce__code {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 6px;
    background: rgba(242, 15, 192, .18);
    color: var(--g-magenta);
    font-family: var(--g-display);
    font-size: 11.5px;
    letter-spacing: .04em;
}

/* le nuancier */
.g-nuancier-bande { background: var(--g-lilas); }
.g-nuancier { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.g-tuile {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 216px;
    padding: 18px;
    border-radius: 18px;
    overflow: hidden;
    background: var(--g-encre);
    transition: transform .18s ease, box-shadow .18s ease;
}
.g-tuile:hover { transform: translateY(-4px); box-shadow: var(--g-ombre); text-decoration: none; }
.g-tuile__fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.g-tuile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 11, 34, .05) 30%, rgba(20, 11, 34, .86) 100%);
}
/* Les familles dont le visuel n'est pas encore genere : une pluie de gouttes
   dans leur couleur, jamais un aplat. */
.g-tuile--nue { background: linear-gradient(155deg, var(--fam) 0%, var(--fam-encre) 58%, var(--g-encre) 100%); }
.g-tuile--nue::after { background: linear-gradient(180deg, transparent 34%, rgba(20, 11, 34, .66) 100%); }
.g-tuile__gouttes { position: absolute; inset: 0; width: 100%; height: 100%; color: #FFFFFF; opacity: .5; }
.g-tuile__corps { position: relative; z-index: 2; display: grid; gap: 2px; }
.g-tuile__nom { font-family: var(--g-display); font-size: 17px; color: #FFFFFF; }
.g-tuile__dit { font-size: 12.5px; color: rgba(255, 255, 255, .72); }
.g-tuile__n { font-size: 11.5px; font-weight: 700; color: #FFFFFF; opacity: .85; margin-top: 4px; }

/* la bande DIY */
.g-diy { background: linear-gradient(118deg, var(--g-encre) 0%, var(--g-encre-3) 100%); }
.g-diy__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); gap: 48px; align-items: center; }
.g-diy__chiffres { display: flex; gap: 32px; margin-bottom: 26px; flex-wrap: wrap; }
.g-diy__chiffres b { display: block; font-family: var(--g-display); font-size: 27px; color: #FFFFFF; }
.g-diy__chiffres span { color: rgba(255, 255, 255, .6); font-size: 13px; }
.g-diy__visuel img { width: 100%; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .14); box-shadow: var(--g-ombre-forte); }

/* la carte cadeau */
.g-cadeau { background: linear-gradient(140deg, #2A0F3E 0%, var(--g-encre) 55%, #3A0B55 100%); }
.g-cadeau__grille { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: 52px; align-items: center; }
/* ⚠️ Le visuel est volontairement tres sombre : pose tel quel sur une bande
   sombre il DISPARAIT. Il lui faut un cadre clair et un halo pour exister. */
.g-cadeau__visuel {
    position: relative;
    padding: 10px;
    border-radius: 26px;
    background: linear-gradient(140deg, rgba(242, 15, 192, .4), rgba(122, 15, 224, .25));
    border: 1px solid rgba(255, 255, 255, .16);
}
.g-cadeau__visuel img {
    display: block;
    width: 100%;
    border-radius: 18px;
    filter: brightness(1.12) saturate(1.08);
    box-shadow: 0 26px 60px -22px rgba(242, 15, 192, .75);
}
.g-cadeau__note { margin: 14px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .5); }

@media (max-width: 1100px) { .g-nuancier { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 980px) {
    .g-diy__grille, .g-cadeau__grille { grid-template-columns: 1fr; }
    .g-cadeau__visuel { order: -1; }
}
@media (max-width: 560px) { .g-nuancier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===========================================================================
   LOT 6 — LA NAVIGATION PAR LE GOUT
   Une entree de plus dans la barre, qui deroule les familles et les saveurs.
   Ouverture au survol ET au focus clavier, sans JavaScript.
   =========================================================================== */

.header-navfullwidth .container { display: flex; align-items: stretch; flex-wrap: wrap; }
.header-navfullwidth #_desktop_top_menu.menu { flex: 1 1 auto; max-width: none; width: auto; }

.g-gout { position: relative; display: flex; align-items: stretch; }
.g-gout__bouton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 0 16px;
    border: 0;
    background: rgba(255, 255, 255, .08);
    color: #FFFFFF;
    font: 700 13.5px/1 var(--g-police);
    cursor: pointer;
    white-space: nowrap;
}
.g-gout__bouton:hover { background: rgba(255, 255, 255, .16); }
.g-gout__chevron {
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
}

.g-gout__panneau {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 420px);
    gap: 28px;
    width: max-content;
    max-width: min(700px, 92vw);
    padding: 24px 26px;
    background: #FFFFFF;
    border: 1px solid var(--g-trait);
    border-radius: 0 0 16px 16px;
    box-shadow: 0 24px 50px -18px rgba(20, 11, 34, .35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.g-gout:hover .g-gout__panneau,
.g-gout:focus-within .g-gout__panneau { opacity: 1; visibility: visible; transform: translateY(0); }

.g-gout__titre {
    display: block;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--g-texte-3);
}
.g-gout__familles { display: grid; gap: 6px; }
.g-gout__fam {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--fam-fond);
    color: var(--fam-encre);
    font-size: 14px;
    font-weight: 700;
}
.g-gout__fam::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50% 50% 50% 2px;
    transform: rotate(45deg);
    background: var(--fam);
    flex: none;
}
.g-gout__fam span { flex: 1; }
.g-gout__fam i { font-style: normal; font-size: 11px; font-weight: 600; opacity: .6; }
.g-gout__fam:hover { text-decoration: none; filter: brightness(.97); }

.g-gout__saveurs { display: flex; flex-wrap: wrap; gap: 7px; }
.g-gout__saveurs a {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 7px 13px;
    border: 1px solid var(--g-trait);
    border-radius: 999px;
    color: var(--g-texte-2);
    font-size: 13.5px;
    font-weight: 600;
}
.g-gout__saveurs a i { font-style: normal; font-size: 11px; color: var(--g-texte-3); }
.g-gout__saveurs a:hover { border-color: var(--g-violet); color: var(--g-violet-texte); text-decoration: none; }

@media (max-width: 991px) {
    .g-gout { display: none; }
}

/* Notre propre conteneur : le `.container` de Bootstrap se comporte
   differemment selon le hook qui rend le bloc (sur displayHomeTop2 il sortait
   a 153 px et comprimait tout le nuancier contre le bord droit). */
.g-conteneur {
    position: relative;
    z-index: 1;
    width: min(1220px, 100% - 40px);
    margin-inline: auto;
}

/* ⚠️ Sans largeur explicite, la grille du nuancier ressortait a 0 px et se
   collait au bord droit — les tuiles a 36 px. Mesure a 1440 px : le parent
   fait bien 1140, seule la grille s'effondrait. */
.g-nuancier { width: 100%; }
/* Même effondrement que la grille du nuancier : sans largeur explicite, la
   ligne de titre sortait a 0 px, collee au bord droit. */
.g-titre-rang { width: 100%; }

/* ⚠️ Le heros sortait SANS fond peint : texte blanc sur le lilas du corps,
   donc invisible. On repose fond et degrades explicitement. */
.gc-hero,
.image-slider-block,
#index .gc-hero {
    background-color: var(--g-encre);
    background-image:
        radial-gradient(90% 120% at 8% -10%, rgba(242, 15, 192, .32) 0%, transparent 58%),
        radial-gradient(70% 110% at 88% 0%, rgba(122, 15, 224, .4) 0%, transparent 62%);
    color: #FFFFFF;
}
.gc-hero .gc-hero-inner { width: 100%; }

/* ⚠️ LA cause du heros invisible : le theme lui laisse `float: left`. Un
   element flottant sort du flux — le nuancier, rendu juste apres, se posait
   donc PAR-DESSUS lui, fond opaque compris. Ni la couleur ni le z-index
   n'etaient en cause. */
.gc-hero,
.image-slider-block { float: none; width: 100%; clear: both; }

/* ===========================================================================
   FINITIONS — 23/09/2026
   Sept defauts releves par Stephane sur le rendu reel. Chacun a ete MESURE
   avant d'etre corrige ; les valeurs constatees sont citees en commentaire.
   =========================================================================== */

/* 1. LE MENU — il ressortait en `rgb(5, 24, 41)`, un bleu marine du theme de
      demonstration, au milieu d'un site violet. */
#header .header-navfullwidth,
.header-navfullwidth,
.top-navigation-menu {
    background: linear-gradient(180deg, var(--g-encre-2) 0%, #241541 100%);
    border-top: 1px solid rgba(255, 255, 255, .06);
}

/* 2. LES ETIQUETTES — mesure : la pastille de famille etait a left:12px et les
      drapeaux du theme a left:10px et left:44px, tous en `position:absolute`,
      donc empiles les uns sur les autres. On remet les drapeaux dans le flux,
      en colonne, a droite ; la famille reste seule a gauche. */
.product-miniature .product-flags,
.product-miniature ul.product-flags,
#products .product-miniature ul.product-flags {
    position: absolute;
    top: 10px;
    right: 10px;
    left: auto;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    margin: 0;
    padding: 0;
    z-index: 3;
}
.product-miniature .product-flags li,
.product-miniature ul.product-flags > li,
#products .product-miniature ul.product-flags > li {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    margin: 0;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.4;
    white-space: nowrap;
}
.product-miniature ul.product-flags > li.new {
    background: var(--g-encre);
    color: #FFFFFF;
    border: 0;
}
.product-miniature ul.product-flags > li.out_of_stock {
    background: #FFFFFF;
    border: 1px solid var(--g-trait);
    color: var(--g-texte-2);
}

/* 3. LE DOUBLE CONTOUR — mesure : `article.product-miniature` ET son enfant
      `.thumbnail-container` portaient chacun `1px solid #E8E0F2`, d'ou deux
      traits concentriques, tres visibles au survol. Une seule boite encadre. */
.product-miniature,
.product-miniature article,
#products .product-miniature {
    border: 0;
    background: transparent;
    box-shadow: none;
}
.product-miniature .thumbnail-container {
    border: 1px solid var(--g-trait);
    border-radius: 16px;
    overflow: hidden;
    background: #FFFFFF;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.product-miniature:hover .thumbnail-container {
    border-color: var(--fam, var(--g-violet));
    box-shadow: 0 14px 34px -16px rgba(20, 11, 34, .35);
    transform: translateY(-3px);
}
.product-miniature:hover,
.product-miniature:hover article { transform: none; box-shadow: none; border: 0; }

/* 4. LE BOUTON D'ACHAT — il etait minuscule, colle au prix. Le pied de carte
      passe sur deux lignes : le prix seul, puis un bouton pleine largeur. */
.product-miniature .gc-carte-bas {
    display: block;
    margin-top: auto;
    padding: 12px 14px 14px;
}
.product-miniature .gc-carte-bas .product-price-and-shipping { margin-bottom: 10px; text-align: center; }
.product-miniature .gc-carte-bas .price,
.product-miniature .product-price-and-shipping .price {
    font-family: var(--g-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--g-texte);
}
.product-miniature .add,
.product-miniature .add form { display: block; width: 100%; }
.product-miniature .add .btn,
.product-miniature .add button,
.product-miniature .gc-prevenir {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: 0;
    border-radius: 12px;
    background: var(--g-violet);
    color: #FFFFFF;
    font: 700 14px/1 var(--g-police);
    text-align: center;
    cursor: pointer;
    transition: background .16s ease;
}
.product-miniature .add .btn:hover,
.product-miniature .add button:hover { background: var(--g-violet-fonce); }
.product-miniature .gc-prevenir {
    background: #FFFFFF;
    border: 1px solid var(--g-trait);
    color: var(--g-texte-2);
    text-decoration: none;
}
.product-miniature .gc-prevenir:hover { border-color: var(--g-violet); color: var(--g-violet-texte); }

/* 5. LE HEROS — trop petit, tasse en haut a gauche, et le visuel gardait son
      rectangle noir. On lui donne de l'ampleur et on fond les bords du visuel. */
.gc-hero .gc-hero-inner { padding: 74px 0 78px; gap: 56px; align-items: center; }
.gc-hero-texte h2 { font-size: clamp(36px, 4.6vw, 58px); line-height: 1.02; }
.gc-hero-desc { font-size: 16.5px; max-width: 46ch; margin-bottom: 30px; color: rgba(255, 255, 255, .78); }
.gc-hero-actions .btn { padding: 15px 30px; font-size: 15px; border-radius: 999px; }
.gc-hero-actions .btn-primary { background: var(--g-degrade); border: 0; box-shadow: 0 12px 30px -12px rgba(242, 15, 192, .8); }
.gc-hero-puces { gap: 10px 24px; margin-top: 26px; font-size: 13.5px; }
.gc-hero-visuel {
    border: 0;
    background: transparent;
    padding: 0;
    overflow: visible;
}
/* ⚠️ `mix-blend-mode` est annule par la transformation que Bootstrap pose sur
   `.carousel-item` : un masque, lui, ne depend d'aucun contexte d'empilement. */
.gc-hero-visuel img {
    aspect-ratio: 5 / 4;
    object-fit: cover;
    object-position: 74% 50%;
    border-radius: 0;
    -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%);
}

/* 6. LA TRANSITION — la bande DIY et la carte cadeau, toutes deux sombres, se
      touchaient sans respiration. Un filet lumineux marque la jointure. */
.g-diy { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.g-diy::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: min(760px, 70%);
    height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--g-magenta), var(--g-violet), transparent);
    opacity: .75;
}

/* 7. LA CARTE CADEAU, EN CLAIR — le visuel est tres sombre : sur fond clair il
      devient le point fort de la page, et le rythme sombre/clair revient. */
.g-cadeau-clair { background: var(--g-lilas); padding: 64px 0; }
.g-cadeau-clair .g-cadeau__grille {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}
.g-cadeau-clair h2 { font-size: clamp(25px, 2.7vw, 34px); margin: 0 0 16px; }
.g-cadeau__texte { max-width: 50ch; margin: 0 0 26px; color: var(--g-texte-2); font-size: 15.5px; }
.g-cadeau-clair .g-cadeau__note { margin: 14px 0 0; font-size: 12.5px; color: var(--g-texte-3); }
.g-cadeau-clair .g-cadeau__visuel {
    padding: 0;
    border: 0;
    background: none;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 30px 70px -26px rgba(122, 15, 224, .65);
}
.g-cadeau-clair .g-cadeau__visuel img { display: block; width: 100%; border-radius: 22px; filter: none; box-shadow: none; }

/* 8. LA LETTRE D'INFORMATION — blanche sur blanc, sans l'offre pourtant
      annoncee en haut de chaque page. */
#footer .footer-top,
.footer-top {
    position: relative;
    background: linear-gradient(118deg, var(--g-violet) 0%, var(--g-magenta) 118%);
    color: #FFFFFF;
}
#footer .footer-top .block_newsletter {
    max-width: 780px;
    margin: 0 auto;
    padding: 52px 0 46px;
    text-align: center;
}
.g-nl-remise {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 9px 20px 9px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .24);
    color: #FFFFFF;
}
.g-nl-remise b { font-family: var(--g-display); font-size: 23px; line-height: 1; }
.g-nl-remise i { font-style: normal; font-size: 12.5px; opacity: .9; }
#footer .footer-top .block_newsletter .newsletter-title h2,
#footer .footer-top .block_newsletter .newsletter-title h2 span {
    color: #FFFFFF;
    font-size: clamp(24px, 2.6vw, 32px);
}
#footer .footer-top .block_newsletter p,
#footer .footer-top .block_newsletter .condition p { color: rgba(255, 255, 255, .84); }
#footer .footer-top .block_newsletter .condition p { font-size: 12.5px; color: rgba(255, 255, 255, .7); }
#footer .footer-top .block_newsletter .subscribe-block {
    display: flex;
    justify-content: center;
    gap: 9px;
    max-width: 520px;
    margin: 0 auto;
    padding: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .24);
}
#footer .footer-top .block_newsletter input[type="email"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    border: 0;
    border-radius: 999px;
    background: #FFFFFF;
}
#footer .footer-top .block_newsletter .btn-primary,
#footer .footer-top .block_newsletter input.btn-primary {
    height: 46px;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    background: var(--g-encre);
    color: #FFFFFF;
    font-weight: 700;
    box-shadow: none;
}
#footer .footer-top .block_newsletter .btn-primary:hover { background: #000000 !important; }

@media (max-width: 980px) { .g-cadeau-clair .g-cadeau__grille { grid-template-columns: 1fr; } }

/* Le bloc gardait le fond blanc du theme au milieu de la bande degradee : un
   rectangle blanc en plein milieu, et le champ e-mail invisible dedans. */
#footer .footer-top .block_newsletter,
#footer .footer-top .block_newsletter .footer-block-toggle-content,
#footer .footer-top .block_newsletter form,
#footer .footer-top .block_newsletter .row,
#footer .footer-top .block_newsletter .newsletter-title,
.footer-top .block_newsletter { background: transparent; border: 0; box-shadow: none; }
#footer .footer-top .block_newsletter .input-wrapper { flex: 1 1 auto; min-width: 0; }
#footer .footer-top .block_newsletter input[type="email"] {
    width: 100%;
    padding: 0 20px;
    color: var(--g-texte);
}
#footer .footer-top .block_newsletter input[type="email"]::placeholder { color: var(--g-texte-3); }
.g-nl-remise { background: rgba(0, 0, 0, .3); }
.g-nl-remise b { color: #FFFFFF; }
#footer .footer-top .block_newsletter .subscribe-block .clearfix { display: none; }

/* ------------------------------------------------- derniers ajustements */

/* Le visuel du heros etait recadre trop serre : les flacons touchaient le bas.
   On montre l'image entiere et le masque efface ses bords. */
.gc-hero-visuel img {
    aspect-ratio: 4 / 3;
    object-fit: contain;
    object-position: center;
    -webkit-mask-image: radial-gradient(ellipse 78% 86% at 50% 48%, #000 46%, transparent 92%);
    mask-image: radial-gradient(ellipse 78% 86% at 50% 48%, #000 46%, transparent 92%);
}
/* Le bouton principal du heros restait violet plat. */
.gc-hero .gc-hero-actions .btn-primary,
.gc-hero-actions a.btn-primary {
    background: var(--g-degrade);
    border: 0;
    box-shadow: 0 12px 30px -12px rgba(242, 15, 192, .85);
}
.gc-hero .gc-hero-actions .btn-primary:hover { filter: brightness(1.08); background: var(--g-degrade); }
/* Les puces sortaient en carres vides : la coche du theme s'appuie sur une
   police d'icones absente. On la dessine en bordures, insensible a la police. */
.gc-hero-puces li::before {
    content: '';
    width: 6px;
    height: 10px;
    border: solid #5BC48A;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    font-family: inherit;
    margin-right: 2px;
}

/* La lettre d'information : le bloc restait cale a gauche dans sa colonne
   Bootstrap, et son texte descriptif sortait en gris fonce sur le violet. */
#footer .footer-top .container > .row,
.footer-top .container > .row { justify-content: center; }
#footer .footer-top .block_newsletter,
.footer-top .block_newsletter {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}
#footer .footer-top .block_newsletter > * { max-width: 720px; margin-left: auto; margin-right: auto; }
#footer .footer-top #block-newsletter-label,
#footer .footer-top .block_newsletter p#block-newsletter-label,
#footer .footer-top .block_newsletter .footer-block-toggle-content p { color: rgba(255, 255, 255, .88); }
#footer .footer-top .block_newsletter .condition p { color: rgba(255, 255, 255, .68); }
#footer .footer-top .block_newsletter .subscribe-block { align-items: center; }
#footer .footer-top .block_newsletter .btn-primary { flex: none; margin: 0; }
#footer .footer-top .block_newsletter .hidden-sm-up { display: none; }

/* ===========================================================================
   FINITIONS (2) — 23/09/2026
   =========================================================================== */

/* 1. LE PANIER virait au bleu du theme au survol. */
/* ⚠️ La PILULE elle-meme (`.blockcart:hover`) a ete RETIREE de cette liste le
   24/09 : avec ses deux identifiants, elle imposait `background: transparent`
   et annulait le survol commun aux deux outils de l'en-tete — « Connexion »
   reagissait, le panier non. Le bleu du theme est tue sur les DESCENDANTS,
   ce qui suffit. */
#header #_desktop_cart .blockcart a:hover,
#header #_desktop_cart .blockcart:hover *,
#header .blockcart.cart-preview:hover a,
#header .blockcart.cart-preview:hover span {
    background: transparent;
    color: #FFFFFF;
}
#header #_desktop_cart .blockcart > .header { border-radius: 999px; transition: background .16s ease; }
#header #_desktop_cart .blockcart:hover > .header { background: rgba(255, 255, 255, .1); }

/* 2. LE VOLET « PAR SAVEUR » — mesure : ses textes heritaient du lavande de
      l'en-tete (`rgb(237,230,247)`) sur fond BLANC, donc illisibles. Le theme
      impose `#header a { color: inherit }` : il faut deux identifiants. */
#header .g-gout__panneau,
#header .g-gout__panneau a,
#header .g-gout__panneau span { color: var(--g-texte); }
#header .g-gout__panneau .g-gout__titre { color: var(--g-texte-3); }
#header .g-gout__panneau .g-gout__fam { color: var(--fam-encre); }
#header .g-gout__panneau .g-gout__fam span { color: var(--fam-encre); }
#header .g-gout__panneau .g-gout__fam i { color: var(--fam-encre); opacity: .6; }
#header .g-gout__panneau .g-gout__saveurs a { color: var(--g-texte-2); background: #FFFFFF; }
#header .g-gout__panneau .g-gout__saveurs a i { color: var(--g-texte-3); }
#header .g-gout__panneau .g-gout__saveurs a:hover { color: var(--g-violet-texte); border-color: var(--g-violet); }

/* 3. LA LETTRE D'INFORMATION — 524 px de haut pour trois lignes, un champ
      arrondi et un bouton rectangulaire cote a cote. */
#footer .footer-top .block_newsletter { padding: 34px 0 30px; }
#footer .footer-top .block_newsletter .newsletter-title { margin-bottom: 6px; }
#footer .footer-top .block_newsletter .newsletter-title h2 { margin: 0; }
#footer .footer-top .block_newsletter p { margin: 0 0 16px; font-size: 14.5px; }
#footer .footer-top .block_newsletter .subscribe-block { margin-bottom: 12px; }
#footer .footer-top .block_newsletter .condition { margin: 0; }
#footer .footer-top .block_newsletter .condition p { margin: 0; }
.g-nl-remise { margin-bottom: 12px; }
/* meme hauteur, meme arrondi des deux cotes */
#footer .footer-top .block_newsletter input[type="email"],
#footer .footer-top .block_newsletter .btn-primary,
#footer .footer-top .block_newsletter input.btn-primary {
    height: 46px;
    border-radius: 999px;
    line-height: 46px;
    padding-top: 0;
    padding-bottom: 0;
}

/* 4. « Reponse sous un jour ouvre » touchait le bloc suivant. */
.gc-pied-delai,
.g-pied-delai { margin: 14px 0 26px; }

/* La ligne desktop de la barre du haut est vide depuis que « Connexion » a
   rejoint le panier. Elle ne peut pas etre supprimee du gabarit : la meme
   `.header-nav` porte tout l'en-tete mobile. */
@media (min-width: 992px) {
    .header-nav { display: none; }
}
/* Les outils de la barre principale sur une seule ligne : recherche, compte,
   panier. */
.g-entete-outils {
    display: flex;
    align-items: center;
    gap: 18px;
    justify-content: flex-end;
}
.g-entete-outils > * { margin: 0; }
.g-entete-outils #search_widget { flex: 1 1 auto; min-width: 0; max-width: 520px; }
.g-entete-outils #_desktop_user_info,
.g-entete-outils #_desktop_cart { flex: none; }
.g-entete-outils .user-info { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.g-entete-outils .user-info a,
.g-entete-outils .blockcart a { color: rgba(255, 255, 255, .9); font-size: 13.5px; font-weight: 600; }
.g-entete-outils .user-info a:hover { color: #FFFFFF; }

/* L'ordre du DOM place le panier avant la recherche : logo, panier, recherche,
   connexion. On remet la recherche au centre et les deux outils a droite. */
.g-entete-outils #search_widget { order: 1; }
.g-entete-outils #_desktop_user_info { order: 2; }
.g-entete-outils #_desktop_cart { order: 3; }
.g-entete-outils .user-info,
.g-entete-outils .blockcart {
    padding: 8px 14px;
    border-radius: 999px;
    transition: background .16s ease;
}
.g-entete-outils .user-info:hover { background: rgba(255, 255, 255, .1); }

/* Le visuel du heros n'est plus une image generee mais une composition de
   VRAIS produits du catalogue, detoures sur fond transparent. Le masque qui
   effacait les bords de la photo generee n'a donc plus lieu d'etre. */
.gc-hero-visuel img {
    aspect-ratio: auto;
    object-fit: contain;
    -webkit-mask-image: none;
    mask-image: none;
    /* Les produits etaient coupes en bas : le heros est moins haut que le
       visuel, et `.gc-hero` rogne ce qui depasse. */
    max-height: 360px;
    width: auto;
    margin-inline: auto;
    filter: drop-shadow(0 22px 36px rgba(0, 0, 0, .5));
}
.gc-hero-visuel { display: flex; align-items: flex-end; justify-content: center; }

/* ===========================================================================
   FINITIONS (3) — 23/09/2026
   =========================================================================== */

/* ⚠️ L'ICONE DU PANIER virait au bleu au survol a cause d'une regle precise,
   que mes corrections precedentes ne touchaient pas : elles visaient le texte
   et le conteneur, pas le pseudo-element qui DESSINE le rond.
       #_desktop_cart .header>a:hover::before { background: #227ed1 }
   (custom.css). On la bat avec un identifiant de plus. */
#header #_desktop_cart .header > a::before,
#header #_desktop_cart .header > a:hover::before {
    background: rgba(255, 255, 255, .1);
    color: #FFFFFF;
    transition: background .16s ease;
}
#header #_desktop_cart .header > a:hover::before { background: var(--g-degrade); }
#header #_desktop_cart .header > a:hover .cart-products-count { color: var(--g-magenta); }

/* ---------------------------------------------------------------------------
   LES VIGNETTES — elles etaient fades a cote du reste du site : blanc sur
   blanc, sans accent, alors que tout autour est colore. La famille de gout,
   qui n'etait qu'une pastille, teinte maintenant la carte entiere.
   --------------------------------------------------------------------------- */

.product-miniature .thumbnail-container {
    position: relative;
    border-color: var(--g-trait);
    background: #FFFFFF;
}
/* Un lisere de la couleur de famille en tete de carte. */
.product-miniature .thumbnail-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--fam, var(--g-violet));
    opacity: .9;
    z-index: 2;
}
/* Le visuel repose sur un fond plus franc, pris a la famille. */
.product-miniature .thumbnail-container .product-thumbnail,
.product-miniature[class*="g-fam-"] .thumbnail-container .product-thumbnail {
    background:
        radial-gradient(120% 90% at 50% 8%, color-mix(in srgb, var(--fam, var(--g-violet)) 22%, #FFFFFF) 0%,
        #FFFFFF 78%);
}
.product-miniature:hover .thumbnail-container {
    border-color: var(--fam, var(--g-violet));
    box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--fam, var(--g-violet)) 55%, transparent);
}
/* Le prix : c'est l'information qu'on cherche, elle doit peser. */
.product-miniature .gc-carte-bas .price,
.product-miniature .product-price-and-shipping .price {
    font-size: 21px;
    color: var(--g-texte);
}
/* Le bouton prend la couleur de la marque au survol. */
.product-miniature .add .btn:hover,
.product-miniature .add button:hover {
    background: var(--g-degrade);
    box-shadow: 0 10px 22px -10px rgba(242, 15, 192, .8);
}
/* La marque, en tete de bloc texte, prend la couleur de la famille. */
.g-carte-marque { color: var(--fam-encre, var(--g-texte-3)); font-size: 11.5px; }
/* Les pastilles de contenance : un fond, pas seulement un filet. */
.g-carte-specs li {
    background: var(--fam-fond, var(--g-lilas-2));
    border-color: transparent;
    color: var(--fam-encre, var(--g-texte-2));
    font-weight: 600;
}
/* Meme effondrement que le nuancier : sans largeur explicite, la barre de
   familles ressortait sur 390 px, tassee contre le bord gauche. */
.g-familles,
.gc-outils-rayon { width: 100%; }
/* `#js-product-list-top` est un flex SANS retour a la ligne : la barre de
   familles se partageait la ligne avec le compteur et le tri, d'ou 374 px. */
#js-product-list-top.products-selection { flex-wrap: wrap; }
#js-product-list-top .gc-outils-rayon { flex: 0 0 100%; max-width: 100%; }

/* ===========================================================================
   DIRECTION ARTISTIQUE — tout parle la langue du logo
   Volutes, gouttes, degrade magenta -> violet. Les photos de banque et les
   aplats criards sortent.
   =========================================================================== */

/* --- LE NUANCIER : sept tuiles graphiques identiques, plus aucune photo --- */
.g-tuile {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 208px;
    padding: 20px;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(158deg, var(--fam) 0%, var(--fam-fonce) 62%, var(--g-encre) 100%);
    box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--fam) 70%, transparent);
    transition: transform .2s ease, box-shadow .2s ease;
}
.g-tuile:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 44px -18px color-mix(in srgb, var(--fam) 85%, transparent);
    text-decoration: none;
}
/* La goutte du logo, en filigrane : le meme trace sur les sept tuiles. */
.g-tuile__motif {
    position: absolute;
    top: -16px;
    right: -22px;
    width: 128px;
    height: 166px;
    color: #FFFFFF;
    opacity: .34;
    transform: rotate(14deg);
    transition: transform .3s ease, opacity .3s ease;
}
.g-tuile:hover .g-tuile__motif { transform: rotate(8deg) scale(1.06); opacity: .46; }
.g-tuile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 38%, rgba(20, 11, 34, .55) 100%);
}
.g-tuile__corps { position: relative; z-index: 2; display: grid; gap: 3px; }
.g-tuile__nom { font-family: var(--g-display); font-size: 18px; color: #FFFFFF; line-height: 1.15; }
.g-tuile__dit { font-size: 12.5px; color: rgba(255, 255, 255, .8); }
.g-tuile__n {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

/* --- LES VIGNETTES : une seule langue, l'accent reste discret --- */
/* Le lisere colore en tete de carte faisait bandeau d'alerte et donnait sept
   couleurs differentes sur une meme rangee. Il saute. */
.product-miniature .thumbnail-container::before { display: none; }
.product-miniature .thumbnail-container {
    border-radius: 18px;
    border-color: var(--g-trait);
    box-shadow: 0 1px 2px rgba(20, 11, 34, .04);
}
/* Le fond du visuel redevient neutre et chaud ; la couleur de famille ne sert
   plus qu'a la pastille et au survol. */
.product-miniature .thumbnail-container .product-thumbnail,
.product-miniature[class*="g-fam-"] .thumbnail-container .product-thumbnail {
    background: linear-gradient(180deg, var(--g-lilas) 0%, #FFFFFF 92%);
}
.product-miniature:hover .thumbnail-container {
    border-color: var(--g-violet);
    box-shadow: 0 18px 38px -18px rgba(122, 15, 224, .45);
}
.g-carte-marque { color: var(--g-texte-3); }
.g-carte-specs li {
    background: var(--g-lilas);
    border-color: var(--g-trait);
    color: var(--g-texte-2);
    font-weight: 600;
}
/* La pastille de famille porte seule le code couleur — et le porte bien. */
.g-pastille-fam {
    background: var(--fam, var(--g-violet));
    color: #FFFFFF;
    box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--fam, var(--g-violet)) 80%, transparent);
}
.g-pastille-fam::before { background: rgba(255, 255, 255, .85); }

/* --- LA LETTRE D'INFORMATION : une carte encre, plus un aplat criard --- */
#footer .footer-top,
.footer-top { background: var(--g-lilas); padding: 46px 0 52px; }
#footer .footer-top .block_newsletter {
    position: relative;
    overflow: hidden;
    max-width: 960px;
    margin: 0 auto;
    padding: 44px 40px 40px;
    border-radius: 24px;
    background: linear-gradient(140deg, var(--g-encre) 0%, var(--g-encre-3) 58%, #3A0B55 100%);
    box-shadow: 0 26px 60px -30px rgba(20, 11, 34, .7);
    text-align: center;
}
.g-nl-volutes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#footer .footer-top .block_newsletter > *:not(.g-nl-volutes) { position: relative; z-index: 1; }
.g-nl-remise {
    background: var(--g-degrade);
    box-shadow: 0 10px 26px -12px rgba(242, 15, 192, .7);
}
#footer .footer-top .block_newsletter .btn-primary,
#footer .footer-top .block_newsletter input.btn-primary {
    background: var(--g-degrade);
    box-shadow: 0 10px 24px -12px rgba(242, 15, 192, .8);
}
#footer .footer-top .block_newsletter .btn-primary:hover { background: var(--g-degrade) !important; filter: brightness(1.08); }
#footer .footer-top .block_newsletter .subscribe-block {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .18);
}

/* --- LE HEROS : sortir du patron « titre + paragraphe + image a droite » --- */
.gc-hero .gc-hero-inner {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    padding: 72px 0 0;
    align-items: end;
    gap: 40px;
}
.gc-hero-texte { padding-bottom: 72px; }
.gc-hero-texte h2 {
    font-size: clamp(38px, 5.2vw, 64px);
    line-height: .98;
    letter-spacing: -.03em;
    margin-bottom: 18px;
}
.gc-hero-desc { font-size: 17px; max-width: 42ch; margin-bottom: 28px; }
/* Le visuel DEBORDE vers le bas : il n'est plus sagement centre dans sa
   colonne, il entre dans la page. */
.gc-hero-visuel { align-items: flex-end; margin-bottom: -28px; }
.gc-hero-visuel img { max-height: 400px; }

/* Des raccourcis utiles a la place des trois puces a coche. */
.gc-hero-raccourcis {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 26px;
}
.gc-hero-raccourcis > span {
    margin-right: 4px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}
.gc-hero-raccourcis a {
    padding: 8px 15px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .92);
    font-size: 13.5px;
    font-weight: 600;
}
.gc-hero-raccourcis a:hover {
    border-color: var(--g-magenta);
    background: rgba(242, 15, 192, .16);
    color: #FFFFFF;
    text-decoration: none;
}
@media (max-width: 980px) {
    .gc-hero .gc-hero-inner { grid-template-columns: 1fr; padding-top: 44px; }
    .gc-hero-texte { padding-bottom: 36px; }
    .gc-hero-visuel { margin-bottom: 0; }
}
/* Le texte legal sous le formulaire sortait en gris sombre sur l'encre. */
#footer .footer-top .block_newsletter .condition,
#footer .footer-top .block_newsletter .condition p,
.footer-top .block_newsletter .condition p { color: rgba(255, 255, 255, .62); font-size: 12px; }
#footer .footer-top .block_newsletter .condition p a { color: rgba(255, 255, 255, .85); text-decoration: underline; }
/* Les raccourcis du heros tenaient sur deux lignes et se perdaient. */
.gc-hero-raccourcis { max-width: 46ch; }
.gc-hero-raccourcis a { padding: 7px 13px; font-size: 13px; }
/* ⚠️ Mesure : `#footer .footer-top .block_newsletter form .condition p` (1 id,
   4 classes) imposait `color:#333` — du gris sombre sur l'encre. Meme
   selecteur, charte chargee apres : elle gagne. */
#footer .footer-top .block_newsletter form .condition p {
    color: rgba(255, 255, 255, .62);
    font-size: 12px;
    padding-top: 14px;
}
/* Le champ ne remplissait pas la pastille : un vide restait avant le bouton. */
#footer .footer-top .block_newsletter .input-wrapper { flex: 1 1 auto; width: auto; }
#footer .footer-top .block_newsletter .subscribe-block { max-width: 560px; }
/* Le debordement coupait les flacons au ras du bord : ils sont maintenant
   poses entiers sur la ligne basse du heros. */
.gc-hero-visuel { margin-bottom: 0; }
.gc-hero-visuel img { max-height: 340px; }
.gc-hero .gc-hero-inner { padding: 64px 0 34px; }
.gc-hero-texte { padding-bottom: 0; }

/* ===========================================================================
   LA GRILLE — une seule largeur pour toute la page
   ⚠️ Mesure : cinq bords gauches differents coexistaient (110, 135, 150, 155,
   165). Rien ne s'alignait d'une section a l'autre. C'est ce defaut-la que
   l'oeil lit comme « pas soigne », avant toute question de couleur.
   Largeur retenue : 1220 px, soit un bord a 110 px sur un ecran de 1440.
   =========================================================================== */

.g-conteneur,
#header .container,
#wrapper > .container,
.g-bande .container,
.featured-products .container,
.brand-section .container,
.footer-container .container,
.footer-top .container,
.footer-bottom .container,
.gc-hero .container,
.header-top .container,
.header-navfullwidth .container,
.header-banner .container {
    width: min(1220px, 100% - 40px);
    max-width: none;
    margin-inline: auto;
    padding-left: 0;
    padding-right: 0;
}
/* Les grilles de produits heritaient de marges negatives Bootstrap. */
.featured-products .products.row,
#products .products.row,
.products-grid .products.row { margin-left: 0; margin-right: 0; }
.featured-products .products-section-title,
.featured-products .g-titre-rang { padding-left: 0; padding-right: 0; }
/* La carte d'information s'aligne sur la meme grille. */
#footer .footer-top .block_newsletter { max-width: none; }

/* ---------------------------------------------------------- LE RYTHME -----
   Les titres de section etaient a 23-31 px sur une page de 1440 : ils ne
   portaient rien. Et toutes les bandes avaient le meme creux vertical.
   --------------------------------------------------------------------------- */
.g-titre-rang h2,
.featured-products h2,
.featured-products .products-section-title,
.brand-section .section-title span {
    font-family: var(--g-display);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.05;
    color: var(--g-texte);
    text-transform: none;
}
.g-titre-rang p { font-size: 15.5px; margin-top: 10px; }
.g-titre-rang { margin-bottom: 30px; }
.featured-products { padding: 62px 0; }
.g-bande { padding: 72px 0; }
.g-nuancier-bande { padding: 66px 0; }

/* ------------------------------------------------- LES CARTES, PLUS DENSES -
   Le flacon occupait le tiers d'une zone de 196 px et la carte respirait dans
   le vide. Le visuel gagne de la place, le texte se resserre.
   --------------------------------------------------------------------------- */
.product-miniature .thumbnail-container .product-thumbnail,
.product-miniature .product-image { height: 230px; padding: 14px; }
.product-miniature .thumbnail-container img,
.product-miniature .product-image img { max-height: 100%; }
.product-miniature .product-description,
.product-miniature .meta-pro { padding: 12px 14px 0; }
.product-miniature .product-title { min-height: 2.7em; margin-bottom: 6px; }
.product-miniature .g-carte-saveurs { margin-bottom: 6px; }
.product-miniature .thumbnail-container,
.product-miniature article { min-height: 0; }
.product-miniature .gc-carte-bas { padding: 10px 14px 14px; }
/* Les marges negatives de Bootstrap (`.row { margin: 0 -15px }`) faisaient
   deborder les grilles de 15 px de chaque cote : les nouveautes sortaient a
   x=80 et la carte d'information a x=95, alors que la grille est a 110. */
.featured-products .products,
.featured-products .row,
#footer .footer-top .row,
#footer .footer-top .container > .row,
.footer-container .container > .row,
#js-product-list-top.row { margin-left: 0; margin-right: 0; }
.featured-products .products > .product-item,
.featured-products .products > * { padding-left: 0; padding-right: 0; }
.featured-products .products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}
#footer .footer-top .block_newsletter { width: 100%; }
/* Il restait un `.row` intermediaire (`.products-grid`) avec ses marges
   negatives : la grille des nouveautes sortait encore a x=95. */
.featured-products .products-grid,
.featured-products .products-grid > .row,
.featured-products .products-grid .products,
.products-grid > .row { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }

/* ===========================================================================
   FINITIONS (4) — 23/09/2026
   Deux griefs de Stephane, mesures avant d'etre touches.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. « CONNEXION » ET « MON PANIER » N'AVAIENT PAS LE MEME FORMAT
   Mesure : connexion 138x64 a 73 px du haut, panier 153x117 a 46 px. Ni la
   meme hauteur, ni la meme ligne, ni la meme famille d'icone — le panier
   gardait le rond Fontawesome bleu marine (#051829) du theme de demonstration
   et un libelle sur deux lignes.
   Le gabarit du panier a ete refait ; ce qui suit les met au meme gabarit.
   --------------------------------------------------------------------------- */

/* Le rond de 40 px du theme disparait : l'icone est maintenant dans le
   balisage, comme celle de la connexion. */
#header #_desktop_cart .header > a::before,
#header #_desktop_cart .header > a:hover::before { content: none; display: none; }

/* Un seul gabarit pour les deux outils. */
#header .g-entete-outils .user-info > a,
#header #_desktop_cart .header > a,
#header #_desktop_user_info .user-info > a {
    display: inline-flex;
    padding-left: 0;
    align-items: center;
    gap: 9px;
    padding: 0;
    height: 24px;
    line-height: 1;
    white-space: nowrap;
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .9);
}
#header #_desktop_user_info .material-icons,
#header #_desktop_cart .material-icons {
    margin: 0;
    width: 22px;
    height: 22px;
    font-size: 22px;
    line-height: 22px;
}
/* Meme pilule, donc meme hauteur et meme survol. */
#header .g-entete-outils .user-info,
#header .g-entete-outils .blockcart {
    display: flex;
    align-items: center;
    padding: 9px 15px;
    border-radius: 999px;
    background: transparent;
    transition: background .16s ease;
}
.g-entete-outils .user-info:hover,
.g-entete-outils .blockcart:hover { background: rgba(255, 255, 255, .1); }
#header #_desktop_user_info .user-info > a:hover,
#header #_desktop_cart .header > a:hover { color: #FFFFFF; text-decoration: none; }
/* Le module remet une classe `header` sur le conteneur interne : elle ne doit
   rien ajouter en hauteur. */
#header #_desktop_cart .blockcart .header { display: flex; align-items: center; padding: 0; margin: 0; }

/* Le nombre d'articles : une pastille sur l'icone, plus une seconde ligne. */
#header #_desktop_cart .g-outil-icone { position: relative; display: inline-flex; }
#header #_desktop_cart .cart-qty {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--g-degrade);
    box-shadow: 0 0 0 2px var(--g-encre);
}
#header #_desktop_cart .cart-number {
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
    color: #FFFFFF;
}

/* ---------------------------------------------------------------------------
   2. LES VIGNETTES « PAS SOIGNEES »
   Mesure : carte de 517 px de haut pour ~300 px de contenu — le plancher
   `min-height: 452px` etalait le reste en vides flottants (53 px entre le
   visuel et le nom, 50 px entre les saveurs et le prix). Trois largeurs
   differentes sur la meme page (232, 237, 258 px). Et six lignes toutes
   centrees, sans hierarchie : l'oeil ne sait pas ou se poser.
   --------------------------------------------------------------------------- */

/* Plus de plancher : la carte se regle sur son contenu, et c'est la grille qui
   egalise les hauteurs d'une rangee. */
.product-miniature .thumbnail-container,
.product-miniature article { min-height: 0; }
.product-miniature,
.product-miniature > article { display: flex; }
.product-miniature .thumbnail-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 16px;
    overflow: hidden;
}

/* Le visuel : une boite de hauteur FIXE, pour que tous les flacons soient
   cadres pareil d'une carte a l'autre. */
.product-miniature .thumbnail-container .product-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 214px;
    padding: 14px;
    margin: 0;
}
.product-miniature .thumbnail-container .product-thumbnail img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

/* Le bloc texte : aligne a GAUCHE. Tout centrer sur six lignes donnait une
   colonne molle ; un bord commun donne un rythme et une hierarchie. */
.product-miniature .product-description,
.product-miniature .thumbnail-container > .product-description {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 7px;
    padding: 14px 16px 0;
    text-align: left;
}
.product-miniature .g-carte-marque {
    margin: 0;
    text-align: left;
    font-size: 11px;
    letter-spacing: .07em;
}
.product-miniature .product-title {
    margin: 0;
    min-height: 2.7em;
    text-align: left;
}
.product-miniature .product-title a { font-size: 14.5px; line-height: 1.35; }
.product-miniature .g-carte-specs {
    margin: 0;
    justify-content: flex-start;
    text-align: left;
}
.product-miniature .g-carte-saveurs {
    margin: 0;
    text-align: left;
    font-size: 12px;
}

/* Prix et bouton restent colles en bas, quelle que soit la longueur du nom. */
.product-miniature .gc-carte-bas {
    margin-top: auto;
    padding-top: 14px;
    text-align: left;
}
.product-miniature .gc-carte-bas .product-price-and-shipping {
    margin-bottom: 10px;
    text-align: left;
}
.product-miniature .gc-carte-bas .price,
.product-miniature .product-price-and-shipping .price { font-size: 20px; }

/* « Me prevenir » etait un contour blanc sur fond blanc : illisible a cote du
   bouton plein de la carte voisine. Il devient un bouton a part entiere. */
.product-miniature .add .btn-secondary,
.product-miniature .add .btn-outline,
.product-miniature .add button[disabled],
.product-miniature .add .g-btn-prevenir {
    background: var(--g-lilas);
    border: 1px solid var(--g-trait);
    color: var(--g-texte-2);
    opacity: 1;
}
.product-miniature .add .btn-secondary:hover,
.product-miniature .add .g-btn-prevenir:hover {
    background: var(--g-encre);
    border-color: var(--g-encre);
    color: #FFFFFF;
}

/* Toutes les colonnes de la meme largeur : trois largeurs cohabitaient parce
   que les rangees venaient de grilles differentes (carrousel d'accueil,
   grille de rayon). */
.featured-products .products,
.featured-products .products-grid .products,
#products .products,
.products.row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.featured-products .products > *,
#products .products > *,
.products.row > * { width: auto; max-width: none; flex: none; padding: 0; margin: 0; }
@media (max-width: 991px) {
    .featured-products .products,
    #products .products,
    .products.row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .featured-products .products,
    #products .products,
    .products.row { grid-template-columns: minmax(0, 1fr); }
}

/* Le dernier ecart entre les deux outils ne venait ni de l'icone ni du texte —
   les blocs internes font tous deux 42 px au meme bord haut — mais du
   conteneur exterieur du panier, que le theme rembourre de 30 px en haut et en
   bas : 102 px contre 42, et 30 px de decalage vertical. */
#header #_desktop_cart { padding: 0; }

/* ---------------------------------------------------------------------------
   LES VIGNETTES (suite) — mesure au lieu de deduction.
   `text-align: left` gagnait bien la cascade sur le nom et les saveurs, et
   pourtant les deux restaient centres : ce sont des conteneurs FLEX en
   `justify-content: center`, ou `text-align` n'a aucun effet. Quatre lignes
   alignees a gauche et deux centrees au milieu, c'etait pire que tout centrer.
   --------------------------------------------------------------------------- */
.product-miniature .product-title,
.product-miniature .g-carte-saveurs,
.product-miniature .g-carte-specs { justify-content: flex-start; }

/* Un bloc d'avis VIDE de 28 px sous chaque carte : la boutique n'a aucun avis
   et n'en inventera pas. Tant qu'il n'y en a pas, il ne prend pas de place. */
.product-miniature .product-list-reviews:not(:has(.star, .grade-stars > *)) { display: none; }

/* Le prix et l'action passent sur UNE ligne : c'etait 118 px de bas de carte
   pour 66 px de contenu, tout le reste en vide. */
.product-miniature .gc-carte-bas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding: 14px 0 0;
}
.product-miniature .gc-carte-bas .product-price-and-shipping {
    margin: 0;
    padding: 0;
    flex: 0 1 auto;
}
.product-miniature .gc-carte-bas .add,
.product-miniature .gc-carte-bas .add form,
.product-miniature .gc-carte-bas > a { flex: 0 0 auto; width: auto; }
.product-miniature .gc-carte-bas .btn,
.product-miniature .gc-carte-bas button,
.product-miniature .gc-carte-bas .gc-prevenir {
    width: auto;
    padding: 10px 18px;
    font-size: 13.5px;
    white-space: nowrap;
}

/* « Me prevenir » etait un contour blanc sur fond blanc, illisible a cote du
   bouton plein de la carte voisine. Sa vraie classe est `gc-prevenir`, pas
   `btn-secondary` — c'est pour ca que ma regle precedente ne l'atteignait pas. */
.product-miniature .gc-prevenir {
    display: inline-block;
    border-radius: 999px;
    background: var(--g-lilas);
    border: 1px solid var(--g-trait);
    color: var(--g-texte-2);
    font-weight: 700;
    text-align: center;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.product-miniature .gc-prevenir:hover {
    background: var(--g-encre);
    border-color: var(--g-encre);
    color: #FFFFFF;
    text-decoration: none;
}

/* ===========================================================================
   LA PAGE D ACCUEIL — le parti pris « nuancier »   (24/09/2026)
   Goutce, c est gouter et goutte : le site n est pas un catalogue de flacons,
   c est un NUANCIER de gouts. Une goutte = une saveur = une couleur.
     - les sept couleurs de famille sont la palette du CONTENU ;
     - le magenta -> violet du logo reste celle de la MARQUE ;
     - la goutte du logo est le signe recurrent : repere de section,
       pastille, puce, numero d etape.
   ⚠️ Chaque couleur ET chaque graisse sont posees explicitement : ce theme
   impose les siennes aux h1/h2/h3, et poser une police d affichage ne pose
   pas sa graisse.
   =========================================================================== */

.n { position: relative; overflow: hidden; }
/* ⚠️ LE PIEGE DE CE THEME : il pose sa propre couleur sur h1/h2/h3, donc un
   titre place dans une section sombre ressort NOIR SUR NOIR si l'on se
   contente d'heriter. Chaque couleur est donc posee explicitement, jamais
   heritee — y compris sur les <b> et les <span>. */
.n h1, .n h2, .n h3 { color: inherit; }
/* Poser la police d'affichage ne pose PAS sa graisse : mesure a l'appui,
   titres a 600, prix et grands nombres a 400. Chaque graisse est donc posee
   explicitement, au meme titre que chaque couleur. */
.n h1 { font-weight: 800; }
.n h2 { font-weight: 800; }
.n h3 { font-weight: 700; }
.n p, .n li { font-weight: 500; }
.n b, .n strong { font-weight: 800; }
.n-heros, .n-heros h1, .n-heros h2, .n-heros h3 { color: #fff; }
.n-cadeau, .n-cadeau h1, .n-cadeau h2, .n-cadeau h3 { color: #fff; }
.n-calc, .n-calc h3 { color: #fff; }
.n-formats h2, .n-nouveautes h2, .n-diy h2, .n-reperes b { color: #140B22; }
.n-diy h3 { color: #140B22; }
.n-large { position: relative; z-index: 2; width: min(1220px, 100% - 40px); margin-inline: auto; }
.n-volutes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.n-goutte { width: 1em; height: 1.3em; flex: none; }
.n a { text-decoration: none; }

/* Un seul bareme de titres, un seul rythme — c'est ce qui relie les blocs. */
.n-tete { margin-bottom: 34px; max-width: 58ch; }
.n-sur { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.n-sur__g { width: .85em; height: 1.1em; }
.n-tete h2 { margin: 0; font-family: var(--g-display, inherit);
  font-size: clamp(30px, 3.4vw, 44px); line-height: 1.04; letter-spacing: -.025em; }
.n-tete p { margin: 14px 0 0; font-size: 16.5px; font-weight: 500; line-height: 1.55; }

.n-btn { display: inline-block; padding: 14px 26px; border: 0; border-radius: 999px;
  font-size: 14.5px; font-weight: 700; cursor: pointer; transition: filter .16s ease, transform .16s ease; }
.n-btn--plein { background: linear-gradient(94deg, #F20FC0, #7A0FE0); color: #fff; }
.n-btn--clair { background: #fff; color: #140B22; }
.n-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* --- 1. LE HEROS : le nuancier lui-meme, pas une image de decoration --- */
.n-heros { background: linear-gradient(168deg, #140B22 0%, #1E0F33 58%, #2E0B48 100%);
  color: #fff; padding: 62px 0 68px; }
.n-heros__haut { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 48px; align-items: end; margin-bottom: 44px; }
.n-heros h1 { margin: 0; font-family: var(--g-display, inherit);
  font-size: clamp(38px, 4.9vw, 62px); line-height: .98; letter-spacing: -.032em; }
.n-heros h1 em { font-style: normal; color: rgba(255,255,255,.42); }
.n-heros__haut > div > p { margin: 20px 0 0; max-width: 46ch; font-size: 17px;
  line-height: 1.55; color: rgba(255,255,255,.74); }
.n-heros__chiffres { display: grid; gap: 14px; margin: 0; padding: 0 0 0 22px; list-style: none;
  border-left: 1px solid rgba(255,255,255,.16); }
.n-heros__chiffres b { display: block; font-family: var(--g-display, inherit); font-weight: 800;
  font-size: 28px; letter-spacing: -.02em; line-height: 1.1; }
.n-heros__chiffres span { font-size: 12.5px; color: rgba(255,255,255,.58); }

/* Le nuancier : des pastilles de couleur, comme dans un nuancier de peintre. */
.n-nuancier { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.n-chip { position: relative; display: flex; align-items: flex-end; min-height: 196px;
  padding: 18px 16px 17px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(162deg, var(--vif) 0%, var(--sombre) 100%);
  box-shadow: 0 14px 30px -16px rgba(0,0,0,.65);
  transition: transform .2s ease, box-shadow .2s ease; }
.n-chip__g { position: absolute; top: 16px; right: 14px; width: 54px; height: 70px;
  color: #fff; opacity: .34; transform: rotate(9deg);
  transition: transform .25s ease, opacity .25s ease; }
.n-chip::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(0,0,0,.3) 100%); }
.n-chip__pied { position: relative; z-index: 2; display: grid; gap: 3px; }
.n-chip__nom { font-family: var(--g-display, inherit); font-weight: 800; font-size: 19px;
  line-height: 1.08; color: #fff; }
.n-chip__dit { min-height: 2.64em; font-size: 11.5px; font-weight: 500; line-height: 1.32;
  color: rgba(255,255,255,.82); }
.n-chip__n { margin-top: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(255,255,255,.7); }
.n-chip:hover { transform: translateY(-7px); box-shadow: 0 26px 46px -18px var(--vif); }
.n-chip:hover .n-chip__g { opacity: .44; transform: rotate(6deg) scale(1.08); }

/* --- 2. LES FORMATS : le second axe, sur papier --- */
.n-formats { background: #F7F4FB; padding: 76px 0 70px; }
.n-formats .n-sur { color: #7A0FE0; }
.n-formats .n-tete h2 { color: #140B22; }
.n-formats .n-tete p { color: #493E60; }
.n-formats__rang { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.n-format { display: grid; gap: 3px; padding: 18px 16px; border-radius: 14px;
  background: #fff; border: 1px solid #E4DAF2; box-shadow: 0 1px 2px rgba(20,11,34,.04);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.n-format__n { font-family: var(--g-display, inherit); font-weight: 800; font-size: 27px;
  letter-spacing: -.02em; color: #140B22; line-height: 1.05; }
.n-format__nom { font-size: 12.5px; font-weight: 700; color: #493E60; }
.n-format:hover { border-color: #7A0FE0; transform: translateY(-3px);
  box-shadow: 0 14px 28px -14px rgba(122,15,224,.45); }

/* --- 3. LES NOUVEAUTES --- */
.n-nouveautes { background: #fff; padding: 76px 0 78px; }
.n-nouveautes .n-sur { color: #7A0FE0; }
.n-nouveautes .n-tete h2 { color: #140B22; }
.n-grille4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.n-carte { display: flex; flex-direction: column; background: #fff; border: 1px solid #E0D5F0;
  border-radius: 18px; overflow: hidden; box-shadow: 0 2px 4px rgba(20,11,34,.05);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.n-carte__vue { position: relative; display: flex; align-items: center; justify-content: center;
  height: 218px; padding: 18px;
  background: radial-gradient(112% 86% at 50% 4%,
    color-mix(in srgb, var(--vif) 15%, #fff) 0%, #fff 76%); }
.n-carte__vue img { height: 100%; width: 100%; object-fit: contain; }
.n-carte__fam { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px 5px 8px; border-radius: 999px; background: var(--vif); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .03em; }
.n-carte__g { width: .8em; height: 1em; opacity: .85; }
.n-carte__corps { display: flex; flex-direction: column; flex: 1 1 auto; gap: 7px; padding: 15px 16px 16px; }
.n-carte__marque { font-size: 11px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--sombre); }
.n-carte h3 { margin: 0; min-height: 2.7em; font-size: 15px; font-weight: 700; line-height: 1.34; }
.n-carte h3 a { color: #140B22; }
.n-carte__bas { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 12px; }
.n-carte__prix { font-family: var(--g-display, inherit); font-weight: 800; font-size: 22px;
  letter-spacing: -.02em; color: #140B22; }
.n-carte__bas .n-btn { padding: 10px 18px; font-size: 13.5px; }
.n-carte:hover { border-color: var(--vif); transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px var(--vif); }

/* --- 4. LE DIY --- */
.n-diy { background: #F7F4FB; padding: 80px 0 82px; }
.n-diy .n-sur { color: #7A0FE0; }
.n-diy .n-tete h2 { color: #140B22; }
.n-diy .n-tete p { color: #493E60; }
.n-diy__corps { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 44px; align-items: start; }
.n-etapes { display: grid; gap: 26px; margin: 0; padding: 0; list-style: none; counter-reset: e; }
.n-etapes li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px; align-items: start; }
.n-etape__num { position: relative; display: flex; align-items: center; justify-content: center;
  width: 46px; height: 58px; color: #EDE4F8; }
.n-etape__g { position: absolute; inset: 0; width: 100%; height: 100%; }
.n-etape__num b { position: relative; margin-top: 6px; font-family: var(--g-display, inherit);
  font-size: 19px; color: #7A0FE0; }
.n-etapes h3 { margin: 0 0 5px; font-family: var(--g-display, inherit); font-weight: 800; font-size: 19px; color: #140B22; }
.n-etapes p { margin: 0 0 7px; font-size: 14.5px; font-weight: 500; line-height: 1.55; color: #493E60; }
.n-etape__n { font-size: 11.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: #7A0FE0; }
.n-calc { padding: 26px 26px 28px; border-radius: 22px;
  background: linear-gradient(158deg, #140B22 0%, #2E0B48 100%); color: #fff; }
.n-calc__sur { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #F20FC0; }
.n-calc h3 { margin: 0 0 8px; font-family: var(--g-display, inherit); font-weight: 800; font-size: 22px; }
.n-calc > p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.7); }
.n-calc__demo { display: grid; gap: 8px; margin-bottom: 20px; }
.n-calc__demo > div { display: flex; align-items: center; justify-content: space-between;
  padding: 11px 15px; border-radius: 11px; background: rgba(255,255,255,.07);
  font-size: 13.5px; color: rgba(255,255,255,.72); }
.n-calc__demo b { font-family: var(--g-display, inherit); font-weight: 800; font-size: 15.5px; color: #fff; }
.n-calc__res { background: rgba(242,15,192,.14) !important; border: 1px solid rgba(242,15,192,.3); }

/* --- 5. LA CARTE CADEAU --- */
.n-cadeau { background: linear-gradient(150deg, #1E0F33 0%, #140B22 55%, #3A0B55 100%);
  color: #fff; padding: 78px 0 80px; }
.n-cadeau__corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: 48px; align-items: center; }
.n-cadeau .n-sur { color: #F20FC0; }
.n-cadeau .n-tete h2 { color: #fff; }
.n-cadeau .n-tete p { color: rgba(255,255,255,.7); }
.n-puces { display: grid; gap: 11px; margin: 0 0 28px; padding: 0; list-style: none; }
.n-puces li { display: flex; align-items: center; gap: 11px; font-size: 15px; color: rgba(255,255,255,.86); }
.n-puce__g { width: .8em; height: 1em; color: #F20FC0; }
.n-cadeau__visuel { display: flex; justify-content: center; }
.n-cartecadeau { position: relative; display: grid; align-content: space-between;
  width: 330px; height: 208px; padding: 22px 24px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(112deg, #F20FC0 0%, #A81FE8 52%, #7A0FE0 100%);
  box-shadow: 0 30px 60px -26px rgba(242,15,192,.6); transform: rotate(-4deg); }
.n-cartecadeau__marque { font-family: var(--g-display, inherit); font-weight: 800; font-size: 20px; color: #fff; }
.n-cartecadeau__marque em { font-style: normal; opacity: .65; }
.n-cartecadeau__g { position: absolute; top: -22px; right: -26px; width: 150px; height: 195px;
  color: #fff; opacity: .16; transform: rotate(16deg); }
.n-cartecadeau__montant { font-family: var(--g-display, inherit); font-weight: 800; font-size: 50px;
  letter-spacing: -.02em; line-height: 1; color: #fff; }
.n-cartecadeau__pied { font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.78); }

/* --- 6. LES REPERES --- */
.n-reperes { background: #fff; padding: 46px 0 50px; border-top: 1px solid #EAE3F4; }
.n-reperes ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px;
  margin: 0; padding: 0; list-style: none; }
.n-reperes li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.n-repere__g { width: 18px; height: 23px; color: #7A0FE0; grid-row: span 2; }
.n-reperes b { font-size: 14.5px; font-weight: 800; color: #140B22; }
.n-reperes span { grid-column: 2; font-size: 12.5px; font-weight: 500; line-height: 1.5; color: #493E60; }

@media (max-width: 1100px) {
  .n-nuancier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .n-formats__rang { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .n-grille4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n-heros__haut, .n-diy__corps, .n-cadeau__corps { grid-template-columns: minmax(0, 1fr); }
  .n-heros__chiffres { padding: 0; border-left: 0; grid-auto-flow: column; }
  .n-reperes ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .n-nuancier, .n-formats__rang { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n-grille4, .n-reperes ul { grid-template-columns: minmax(0, 1fr); }
  .n-heros__chiffres { grid-auto-flow: row; }
  .n-cartecadeau { width: 100%; max-width: 330px; }
}

/* --- Les rangs de produits rendus par le theme, remis au meme rythme --- */
.featured-products .section-title { position: relative; margin-bottom: 28px; }
.featured-products .section-title::before {
    content: '';
    display: block;
    width: 13px;
    height: 17px;
    margin-bottom: 11px;
    background: var(--g-violet);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130'%3E%3Cpath d='M50 4 C 74 42, 92 62, 92 84 A 42 42 0 0 1 8 84 C 8 62, 26 42, 50 4 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130'%3E%3Cpath d='M50 4 C 74 42, 92 62, 92 84 A 42 42 0 0 1 8 84 C 8 62, 26 42, 50 4 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
}
.featured-products .section-title > span {
    display: block;
    font-family: var(--g-display, inherit);
    font-weight: 800;
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1.04;
    letter-spacing: -.025em;
    text-transform: none;
    color: var(--g-encre);
}
.featured-products .section-title .gc-sous {
    display: block;
    margin-top: 12px;
    font-size: 16.5px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0;
    text-transform: none;
    color: #493E60;
}
.featured-products .section-title .gc-lien-section {
    position: absolute;
    right: 0;
    bottom: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--g-violet);
}

/* Alterner les fonds : deux sections claires qui se touchent se confondent.
   heros encre / formats lilas / nouveautes blanc / e-liquides lilas /
   DIY blanc / carte cadeau encre / reperes blanc. */
.featured-products[data-type="newproducts"] { background: #FFFFFF; padding: 76px 0 78px; }
.featured-products[data-type="popularproducts"] { background: var(--g-lilas); padding: 76px 0 78px; }
.featured-products.top-margin, .featured-products.bottom-margin { margin-top: 0; margin-bottom: 0; }
.n-diy { background: #FFFFFF; }

/* --- « Une par famille » : le bloc signature, en GRILLE et non en carrousel.
   Les rangs en carrousel du theme calculent leur largeur en JS et sortaient
   des colonnes de 216, 224 puis 262 px sur la meme page. --- */
.n-parfamille { background: #FFFFFF; padding: 76px 0 78px; }
.n-parfamille .n-sur { color: var(--g-violet); }
.n-parfamille .n-tete h2 { color: var(--g-encre); }
.n-parfamille .n-tete p { color: #493E60; }
.n-grille-produits {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
}
.n-grille-produits > * {
    display: flex;
    width: auto;
    max-width: none;
    flex: none;
    margin: 0;
    padding: 0;
}
.n-grille-produits .product-miniature { width: 100%; }
@media (max-width: 991px) {
    .n-grille-produits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .n-grille-produits { grid-template-columns: minmax(0, 1fr); }
}

/* Alternance reprise avec le troisieme rang de produits. */
.featured-products[data-type="newproducts"] { background: var(--g-lilas); }
.featured-products[data-type="popularproducts"] { background: #FFFFFF; }
.n-diy { background: var(--g-lilas); }

/* La boite du visuel restait CARREE (214 px de large dans une carte de 287) :
   le fond teinte s'arretait aux deux tiers et laissait une bande blanche a
   droite de chaque vignette. Elle prend toute la largeur. */
.product-miniature .thumbnail-container .thumbnail-top,
.product-miniature .thumbnail-container .product-thumbnail { width: 100%; }

/* « E-liquides et recharges » decroche : il faisait doublon avec la bande des
   formats. L'alternance reprend — heros encre / formats lilas / une par
   famille blanc / nouveautes lilas / DIY blanc / carte cadeau encre /
   reperes blanc. */
.n-diy { background: #FFFFFF; }

/* ⚠️ Ma propre regle `.n-diy h3 { color: #140B22 }` attrapait aussi le titre du
   CALCULATEUR, qui est une carte sombre DANS le bloc DIY : « On fait le calcul
   pour vous » sortait noir sur noir. Meme famille de piege que l'heritage des
   titres, mais cette fois c'est moi qui l'avais tendu. */
.n-diy .n-calc h3 { color: #FFFFFF; }

/* --- L'EN-TETE SUR TELEPHONE --- */

/* ⚠️ « .header-top » est peinte en BLANC par le theme. Invisible en desktop
   (ma charte la recouvre), elle ressortait en telephone : une bande blanche
   sous le logo, ou le champ de recherche — dessine pour un fond encre —
   disparaissait, ne laissant que le bouton loupe flottant a droite. */
#header .header-top { background: transparent; }

/* Le champ de recherche, lisible sur l'encre a toutes les largeurs. */
#header .header-top #search_widget { width: 100%; }
#header .header-top #search_widget form { width: 100%; }

/* « −10 % » se coupait entre le nombre et le signe : l'element montait a 40 px
   quand ses voisins en font 18, et le bandeau passait a quatre lignes. */
.gc-bandeau__offre > b,
.gc-bandeau .g-annonce__code { white-space: nowrap; }

@media (max-width: 767px) {
    .gc-bandeau { font-size: 11px; line-height: 1.5; padding: 7px 14px; }
    .gc-bandeau__offre { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
}

/* ⚠️ Un trait blanc franc entre le logo et la recherche sur telephone, qu'aucune
   mesure de boite n'explique : une bordure n'ecarte rien, elle se peint DANS
   l'element. C'est le `border-bottom` clair que le theme pose sur
   `nav.header-nav` — visible seulement ici, ou l'en-tete est sombre. */
#header nav.header-nav,
#header .header-nav { border-bottom: 0; border-top: 0; }
#header .header-top { border-top: 0; }

/* --- LES ETIQUETTES DES VIGNETTES : empilees, jamais superposees --- */
/* Mesure : `li.product-flag.new` est en `position: absolute` et sort de la
   carte (bord droit a 381 pour une carte qui finit a 370), et il se peint
   PAR-DESSUS « Épuisé », pose 10 px plus haut. Les etiquettes reviennent dans
   le flux, empilees en colonne contre le bord droit. */
.product-miniature ul.product-flags,
#products .product-miniature ul.product-flags {
    position: absolute;
    top: 12px;
    right: 12px;
    left: auto;
    bottom: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    max-width: 62%;
    margin: 0;
    padding: 0;
    z-index: 3;
}
.product-miniature ul.product-flags > li,
#products .product-miniature ul.product-flags > li {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    margin: 0;
}

/* « Tout voir » etait en absolu sur la ligne du chapeau : sur telephone les
   deux se chevauchaient (« …entrées en stock.Tout voir »). */
@media (max-width: 767px) {
    .featured-products .section-title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .featured-products .section-title > span { order: 1; }
    .featured-products .section-title .gc-lien-section {
        position: static;
        order: 2;
        margin-top: 12px;
    }
}

/* ⚠️ Mesure : c'est `.product-flags li.product-flag.new` (3 classes, 1 type)
   qui gagnait, avec `position:absolute; left:10px; top:10px` — et le bleu
   #227ed1 du theme de demonstration. Ma regle n'avait que 2 classes. On passe
   par un identifiant : moins cher qu'un `!important` et ca reste lisible. */
#wrapper .product-miniature ul.product-flags > li.product-flag,
#wrapper .product-miniature ul.product-flags > li {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    margin: 0;
}

/* --- 1. LE SURVOL DES DEUX OUTILS DE L'EN-TETE, a l'identique --- */
/* ⚠️ La regle de base porte un identifiant (#header) et battait la regle
   :hover qui n'en avait pas : un identifiant l'emporte sur trois classes.
   Les deux survols etaient donc SANS EFFET, et seul le panier paraissait
   reagir — grace a une vieille regle a deux identifiants qui peint son
   enfant. On remonte le :hover au meme niveau, et on retire l'effet sur
   l'enfant pour qu'il n'y en ait qu'UN, le meme pour les deux. */
#header .g-entete-outils .user-info:hover,
#header .g-entete-outils .blockcart:hover { background: rgba(255, 255, 255, .1); }
#header #_desktop_cart .blockcart:hover > .header { background: transparent; }

/* --- 2. LES SECTIONS DE L'ACCUEIL, PLEINE LARGEUR --- */
/* Les blocs statiques sont hors du conteneur et s'etendent d'un bord a
   l'autre ; ceux accroches a « displayHome«  etaient enfermes dans un conteneur
   de 1 220 px, d'ou un fond « boxe » pour « Nouveautes » et « Une par
   famille ». On ouvre le conteneur sur l'accueil uniquement — les autres
   pages gardent leur grille. */
body#index #wrapper > .container {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-left: 0;
    padding-right: 0;
}
body#index #wrapper > .container > .row { margin-left: 0; margin-right: 0; }

/* --- 4. LE BLOC DES MARQUES --- */
/* Aucune des marques n'a de logo en base : des cadres vides diraient moins
   que des noms lisibles et leur volumetrie. */
.n-marques { background: #FFFFFF; padding: 76px 0 78px; }
.n-marques .n-sur { color: var(--g-violet); }
.n-marques .n-tete h2 { color: var(--g-encre); }
.n-marques .n-tete p { color: #493E60; }
.n-marques__rang {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}
.n-marque {
    display: grid;
    align-content: center;
    gap: 3px;
    min-height: 82px;
    padding: 16px 18px;
    border-radius: 14px;
    background: #FFFFFF;
    border: 1px solid #E0D5F0;
    box-shadow: 0 1px 2px rgba(20, 11, 34, .04);
    transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.n-marque__nom {
    font-family: var(--g-display, inherit);
    font-weight: 800;
    font-size: 16px;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--g-encre);
}
.n-marque__n { font-size: 11.5px; font-weight: 700; color: #6B5F86; }
.n-marque:hover {
    border-color: var(--g-violet);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -14px rgba(122, 15, 224, .45);
    text-decoration: none;
}
.n-marques__tout {
    display: inline-block;
    margin-top: 22px;
    font-size: 14px;
    font-weight: 700;
    color: var(--g-violet);
}
@media (max-width: 1100px) { .n-marques__rang { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .n-marques__rang { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- 5. LA LETTRE D'INFORMATION : UNE SEULE CAPSULE --- */
/* Le champ etait une pilule BLANCHE aux angles ronds, le bouton un rectangle
   arrondi, le tout pose dans une capsule sombre : trois formes empilees, avec
   un bout de fond sombre coince entre le champ et le bouton. */
#footer .footer-top .block_newsletter .subscribe-block {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 520px;
    margin: 0 auto;
    padding: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
}
#footer .footer-top .block_newsletter .subscribe-block .input-wrapper {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}
#footer .footer-top .block_newsletter .subscribe-block input[type="email"] {
    width: 100%;
    height: 44px;
    padding: 0 18px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    color: #FFFFFF;
    font-size: 14.5px;
}
#footer .footer-top .block_newsletter .subscribe-block input[type="email"]::placeholder {
    color: rgba(255, 255, 255, .55);
}
#footer .footer-top .block_newsletter .subscribe-block input[type="email"]:focus {
    outline: 2px solid rgba(242, 15, 192, .55);
    outline-offset: 2px;
}
#footer .footer-top .block_newsletter .subscribe-block input[type="submit"],
#footer .footer-top .block_newsletter .subscribe-block .btn-primary {
    flex: 0 0 auto;
    float: none;
    height: 44px;
    margin: 0;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    background: var(--g-degrade);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}
#footer .footer-top .block_newsletter .subscribe-block .clearfix { display: none; }

/* ⚠️ Les etiquettes debordaient ENCORE sur les pages de rayon (« Nouveau » a
   81 px hors de la carte) : le theme y emploie un selecteur bien plus lourd
   qu'en accueil — `#products .products-grid .products .product-item ...`, soit
   un identifiant et CINQ classes, contre mes trois. On passe a deux
   identifiants, ce qui l'emporte quel que soit le nombre de classes. */
#wrapper #products .product-miniature ul.product-flags,
#products .product-miniature ul.product-flags {
    position: absolute;
    top: 12px;
    right: 12px;
    left: auto;
    bottom: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    max-width: 62%;
    margin: 0;
    padding: 0;
    z-index: 3;
}
#wrapper #products .product-miniature ul.product-flags > li,
#wrapper #products .product-miniature ul.product-flags > li.product-flag,
#wrapper #products .product-miniature ul.product-flags > li.product-flag.new {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    margin: 0;
}

/* ===========================================================================
   LE HAUT DE LA PAGE — variante A   (24/09/2026)
   Le heros etait un nuancier de peintre : sept aplats et une goutte plate.
   Abstrait, et pas un produit au-dessus de la ligne de flottaison sur une
   boutique qui vend des saveurs. Chaque famille porte maintenant une vraie
   photo, detouree et recadree.
   =========================================================================== */

.n-heros__tete { margin-bottom: 34px; }
.n-heros__tete h1 { margin: 0; font-family: var(--g-display); font-weight: 800;
    font-size: clamp(34px, 4.2vw, 54px); line-height: 1; letter-spacing: -.03em; color: #FFFFFF; }
.n-heros__tete p { margin: 14px 0 0; max-width: 60ch; font-size: 16.5px; font-weight: 500;
    line-height: 1.55; color: rgba(255, 255, 255, .72); }

.n-familles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.n-fam {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    background: var(--sombre);
    border: 1px solid rgba(255, 255, 255, .1);
    transition: transform .2s ease, box-shadow .2s ease;
}
.n-fam__vue {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 148px;
    padding: 12px;
    background: radial-gradient(120% 92% at 50% 0%, var(--vif) 0%, var(--sombre) 78%);
}
/* ⚠️ Les visuels sont des PNG DETOURES et RECADRES : sans le recadrage, un
   detourage a 97 % laisse un sujet minuscule au milieu de transparence, et
   object-fit: contain l'affiche tout petit. */
.n-fam__vue img { height: 100%; width: 100%; object-fit: contain;
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .4)); }
.n-fam__corps { display: grid; gap: 1px; padding: 12px 14px 13px; }
.n-fam__nom { font-family: var(--g-display); font-weight: 800; font-size: 16px;
    line-height: 1.1; color: #FFFFFF; }
.n-fam__n { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: rgba(255,255,255,.62); }
.n-fam:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -18px var(--vif);
    text-decoration: none; }

/* --- LA BANDE DES RAYONS : le rayon devant, le nombre derriere --- */
.n-rayons { background: var(--g-lilas); padding: 72px 0 74px; }
.n-rayons .n-sur { color: var(--g-violet); }
.n-rayons .n-tete h2 { color: var(--g-encre); }
.n-rayons .n-tete p { color: #493E60; }
.n-rayons__rang { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.n-rayon {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    padding: 12px 16px 12px 12px;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid #E0D5F0;
    box-shadow: 0 1px 2px rgba(20, 11, 34, .04);
    transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.n-rayon__vue { grid-row: span 2; display: flex; align-items: center; justify-content: center;
    height: 76px; border-radius: 12px; background: linear-gradient(180deg, var(--g-lilas), #FFFFFF 88%); }
.n-rayon__vue img { height: 92%; width: 92%; object-fit: contain; }
.n-rayon__nom { align-self: end; font-family: var(--g-display); font-weight: 800; font-size: 17px;
    line-height: 1.15; letter-spacing: -.01em; color: var(--g-encre); }
.n-rayon__n { align-self: start; font-size: 11.5px; font-weight: 700; color: #6B5F86; }
.n-rayon:hover { border-color: var(--g-violet); transform: translateY(-3px);
    box-shadow: 0 14px 28px -14px rgba(122, 15, 224, .45); text-decoration: none; }

@media (max-width: 1100px) {
    .n-familles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .n-rayons__rang { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .n-familles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .n-rayons__rang { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
   L'ECHELLE TYPOGRAPHIQUE DES PAGES INTERIEURES   (24/09/2026)
   L'accueil avait ete redessine, le reste du site portait encore le theme de
   demonstration : cinq tailles de h1 sans echelle, deux encres (#333 sur la
   fiche contre #1B1029 ailleurs), la meme vignette en deux graisses et deux
   formes de bouton pour un meme role.
   =========================================================================== */

/* Le titre d'une page interieure. UN seul reglage la ou il y en avait quatre. */
/* ⚠️ Le h1 EST #js-product-list-header, il n'en est pas le descendant :
   « #category #js-product-list-header h1 » ne matche rien SUR MARQUE ET
   RECHERCHE. Mais sur CATEGORIE, si : la page interpose un
   « div.block-category » et le h1 y est bien un descendant. Les deux formes
   coexistent donc, et il faut les deux — mesure a l'appui. */
#category h1#js-product-list-header,
#manufacturer h1#js-product-list-header,
#search h1#js-product-list-header,
#category #js-product-list-header h1,
#manufacturer #js-product-list-header h1,
#search #js-product-list-header h1,
#product #main h1.h1,
#main .page-header h1 {
    margin: 0 0 20px;
    font-family: var(--g-display);
    font-size: clamp(27px, 2.6vw, 36px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.025em;
    color: var(--g-texte);
    text-transform: none;
}

/* Le titre d'une SECTION : un cran sous le titre de page, un cran au-dessus
   d'un nom de produit. Sert notamment aux h2 des descriptions de rayon. */
#category #main h2:not(.product-title):not(.footer-block-title),
#manufacturer #main h2:not(.product-title):not(.footer-block-title),
#search #main h2:not(.product-title):not(.footer-block-title),
#product #main h2:not(.product-title):not(.footer-block-title) {
    font-family: var(--g-display);
    font-size: clamp(21px, 1.9vw, 28px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--g-texte);
}

/* Le nom d'un produit dans une grille : MEME reglage partout. Il etait en 700
   sur l'accueil et en 600 ailleurs — la meme carte, deux graisses. */
#main .product-title,
#products .product-title,
.n .product-title,
.product-miniature .product-title {
    font-family: var(--g-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
}

/* Le bouton d'action : une seule forme. L'ajout au panier etait en pilule
   999px/500, celui de la newsletter en 12px/700.
   ⚠️ On EXCLUT .float-xs-right : ce n'est pas un bouton d'action mais une
   fleche de carrousel, ronde et transparente — l'arrondir a 12px la
   transformerait en petit carre. */
#product .product-actions .btn-primary,
#main .btn.btn-primary:not(.float-xs-right),
.btn.btn-primary.add-to-cart,
.product-add-to-cart .btn-primary {
    border-radius: 12px;
    font-weight: 700;
}