/*
Theme Name: Dog Cherie
Theme URI: https://dogcherie.co.uk
Description: Base copiée telle quelle de svevelys-child (thème enfant de Storefront) le 08/09/2026, à adapter par la migration shopify-to-woo. Rien n'est encore propre à Dog Cherie : mise en page, CSS, polices, couleurs et textes sont ceux de la source.
Author: Dog Cherie
Template: storefront
Version: 0.1.0
Text Domain: dogcherie-child
*/

/* Palette. Les noms de variables restent préfixés --gac-* : ils sont câblés
   dans tout ce fichier et les renommer n'apporterait rien.

   Les boutons ne sont PAS en pilule : tous les angles du site valent 0, à la
   seule exception du champ d'inscription à la lettre d'information en pied de
   page, qui vaut 100px. Voir « Angles » plus bas. */
:root {
    --gac-primary: #000000;       /* noir - boutons principaux */
    --gac-primary-dark: #333333;  /* survol */
    --gac-secondary: #ffffff;     /* boutons secondaires : blanc, bordure noire */
    --gac-ink: #303030;           /* texte courant */
    --gac-heading: #000000;       /* titres */
    --gac-dark: #000000;          /* fonds sombres (barre d'annonce, hero) */
    --gac-border: #ebebeb;

    /* Angles. Tout vaut 0, sauf le champ de la lettre d'information. */
    --gac-radius: 0px;            /* boutons */
    --gac-radius-input: 4px;      /* champs  */
    --gac-radius-card: 4px;       /* cartes  */
    --gac-radius-media: 0px;      /* visuels */
    --gac-radius-pill: 100px;     /* le seul arrondi plein : champ de la lettre d'information */
}

/* Angles droits. */
button, .button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit {
    border-radius: var(--gac-radius);
}

h1, h2, h3, h4, h5, h6, .site-title {
    color: var(--gac-heading);
}

/* Garde-fou : empêche toute barre de défilement horizontale parasite
   provoquée par les sections pleine largeur (hero, réassurance en 100vw).

   `clip` ET NON `hidden` (26/08/2026). `overflow: hidden` fait de l'élément
   un conteneur de défilement : tout `position: sticky` d'un descendant se
   cale alors sur CE cadre, qui ne défile pas, et ne colle donc jamais. La
   colonne d'achat de la fiche produit était déclarée `sticky` depuis des
   semaines, son calculé le disait, et elle défilait quand même - trois
   ancêtres la neutralisaient : `html`, `body` et `.site` ici,
   `.single-product div.product` plus bas.
   `clip` coupe exactement pareil et ne crée aucun conteneur de défilement.
   `overflow-y: visible` doit être écrit : `visible` + `hidden` se résout en
   `auto`, alors que `visible` + `clip` reste `visible`. */
html,
body,
.site {
    overflow-x: clip;
    overflow-y: visible;
}
/* Storefront arrondit TOUTES les images de 3 px dans sa remise à zéro
   (`img{...border-radius:3px}`, style.css 4.6.2). Aucune image du site n'est
   arrondie : on repasse à 0. L'angle se voyait le mieux sur la grille de la
   fiche produit, où huit photos collées laissent voir huit coins rongés. */
img {
    max-width: 100%;
    height: auto;
    border-radius: 0;
}

/* ============================================================
   Typographie
   ============================================================

   DEUX familles, pas une : Inter pour le texte courant, les boutons et la
   navigation, Libre Baskerville pour tous les titres.

   Les neuf fichiers sont hébergés ici plutôt que chez Google. Deux raisons :
   une requête externe par page coûte cher sur cette machine, et
   fonts.googleapis.com transmet l'adresse IP du visiteur avant tout
   consentement. */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
             src: url('assets/fonts/inter_n4.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
             src: url('assets/fonts/inter_n5.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
             src: url('assets/fonts/inter_n7.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap;
             src: url('assets/fonts/inter_i4.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 500; font-display: swap;
             src: url('assets/fonts/inter_i5.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 700; font-display: swap;
             src: url('assets/fonts/inter_i7.woff2') format('woff2'); }

@font-face { font-family: 'Libre Baskerville'; font-style: normal; font-weight: 400; font-display: swap;
             src: url('assets/fonts/librebaskerville_n4.woff2') format('woff2'); }
@font-face { font-family: 'Libre Baskerville'; font-style: normal; font-weight: 700; font-display: swap;
             src: url('assets/fonts/librebaskerville_n7.woff2') format('woff2'); }
@font-face { font-family: 'Libre Baskerville'; font-style: italic; font-weight: 400; font-display: swap;
             src: url('assets/fonts/librebaskerville_i4.woff2') format('woff2'); }

/* Les titres : Libre Baskerville, graisse 400, sans interlettrage. */
h1, h2, h3, h4,
.site-title {
    font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.2; /* --line-height--display-loose */
}

/* h5 et h6 restent en Inter, en graisse 500. */
h5, h6 {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
    letter-spacing: 0;
}

button, .button, input[type="submit"],
.main-navigation ul li a {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    letter-spacing: .01em;
}

.main-navigation ul li a {
    text-transform: uppercase;
    font-weight: 500;
    font-size: .95em;
}

/* ============================================================
   Couleurs de marque (compléments aux réglages Storefront)
   ============================================================ */
a { color: var(--gac-primary); }
a:hover { color: var(--gac-primary-dark); }

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--gac-ink);
    font-weight: 600;
}

/* Badge promo aux couleurs de marque */
.woocommerce span.onsale {
    background-color: var(--gac-primary);
    color: #fff;
    border-radius: 2px;
    min-height: auto;
    min-width: auto;
    padding: .35em .7em;
    line-height: 1.2;
}

/* Boutons : fond brun de marque (défini ici, pas via le customizer Storefront
   dont le CSS est mis en cache de façon peu fiable) */
button, input[type="button"], input[type="reset"], input[type="submit"],
.button, .added_to_cart,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt {
    background-color: var(--gac-primary);
    color: #fff;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: 500;
}
button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover,
.button:hover, .added_to_cart:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    background-color: var(--gac-primary-dark);
    color: #fff;
}

/* Header : fond blanc, texte sombre */
.site-header {
    background-color: #fff;
    border-bottom: 1px solid #ececec;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.site-header,
.site-header a,
.site-branding .site-title a,
.main-navigation ul li a,
.site-header .site-header-cart .cart-contents,
.site-header .amount {
    color: var(--gac-ink);
}
.main-navigation ul li a:hover,
.site-branding .site-title a:hover,
.site-header a:hover {
    color: var(--gac-primary);
}

/* Anneau de focus : discret et de marque, uniquement au clavier.
   Pattern sûr `:not(:focus-visible)` : les navigateurs sans support
   :focus-visible ignorent la règle et gardent l'anneau natif (accessibilité).

   `summary` est traité à part, sans anneau du tout : le sommaire d'un
   `details` est focusable et le clic le focus, or Chromium fait correspondre
   `:focus-visible` à un `summary` cliqué à la souris (Safari non). La paire
   habituelle `:focus-visible` / `:focus:not(...)` y laissait donc l'anneau au
   clic. Aucun anneau sur les sommaires, au clavier compris. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .button:focus-visible {
    outline: 2px solid var(--gac-primary);
    outline-offset: 2px;
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible),
input:focus:not(:focus-visible), select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible), .button:focus:not(:focus-visible) {
    outline: none;
}
summary:focus, summary:focus-visible { outline: none; }
/* Le clavier retrouve quand même son anneau : gac-ui.js pose `dgc-clavier`
   sur <html> au premier Tab et le retire au pointeur. Contourne le travers
   Chromium ci-dessus sans priver la navigation clavier de tout repère. */
.dgc-clavier summary:focus {
    outline: 2px solid var(--gac-primary);
    outline-offset: 2px;
}

/* Messages WooCommerce aux couleurs de marque */
.woocommerce-info,
.woocommerce-message {
    border-top-color: var(--gac-primary);
}
.woocommerce-info::before,
.woocommerce-message::before {
    color: var(--gac-primary);
}

/* ============================================================
   Barre d'annonce  (conteneur propre, PAS .col-full -> pas de
   pseudo-éléments clearfix qui cassaient l'alignement)
   ============================================================ */
.gac-announcement-bar {
    background: var(--gac-dark);
    color: #fff;
}
.gac-announcement-inner {
    max-width: 1024px;
    margin: 0 auto;
    display: flex;
    gap: .8em;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: .6em 1em;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .78em;
}
.gac-announcement-bar .gac-sep { opacity: .5; }

/* ============================================================
   Hero (pleine largeur, fond sombre façon boutique minimaliste)
   ============================================================ */
.gac-hero {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    background: #1a1a1a;
    color: #fff;
    text-align: center;
    padding: 5.5em 1.5em;
    margin-bottom: 2.5em;
}

/* Masque le titre "Accueil" de la page d'accueil (template Homepage) */
.page-template-template-homepage .entry-title,
body.home .entry-title {
    display: none;
}

/* ============================================================
   Titres de section (home)
   ============================================================ */
.storefront-product-section .section-title {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 1.2em;
}

/* ============================================================
   Bandeau de réassurance  (conteneur propre, PAS .col-full)
   ============================================================ */
.gac-trust {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    background: #f7f7f5;
    border-top: 1px solid #ececec;
    padding: 2.4em 1em;
    margin-top: 2.5em;
}
.gac-trust-grid {
    max-width: 1024px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5em;
    text-align: center;
}
.gac-trust-item { display: flex; flex-direction: column; gap: .3em; }
.gac-trust-title {
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--gac-ink);
    letter-spacing: .02em;
}
.gac-trust-text { font-size: .85em; color: #666; }

/* ============================================================
   Pages boutique/produit en pleine largeur (sidebar retirée)
   ============================================================ */
.woocommerce-page .content-area,
.woocommerce-page.right-sidebar .content-area,
.woocommerce-page.left-sidebar .content-area {
    width: 100%;
    margin: 0;
    float: none;
}
.woocommerce-page #secondary {
    display: none;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 749px) {
    .gac-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2em; }
    .gac-hero { padding: 3.5em 1.2em; }
}

@media (max-width: 480px) {
    .gac-hero { padding: 2.8em 1em; }
    .gac-announcement-inner {
        font-size: .7em;
        letter-spacing: .02em;
        gap: .5em;
    }
    .gac-trust-grid { gap: 1em; }
    .gac-trust-title { font-size: .92em; }
    .gac-trust-text { font-size: .78em; }
}

/* ============================================================
   Page d'accueil
   ============================================================ */
.gac-home .gac-section {
    padding: 3.5em 0;
}
.gac-home .gac-section:nth-child(even) {
    background: #faf8f7;
}
.gac-section__header {
    text-align: center;
    margin-bottom: 2em;
}
.gac-section__title {
    margin: 0;
    font-size: 1.9em;
    letter-spacing: .02em;
}
.gac-section__sub {
    margin: .4em 0 0;
    color: #666;
    font-size: 1em;
}

/* Hero pleine largeur */
.gac-home .gac-hero {
    background-size: cover;
    background-position: center;
    padding: 0;
    min-height: 460px;
    display: flex;
}
.gac-hero__overlay {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 26, 26, .38);
    padding: 4em 1.5em;
}
.gac-hero__inner {
    text-align: center;
    color: #fff;
    max-width: 46rem;
}
.gac-hero__title {
    color: #fff;
    font-size: 2.6em;
    margin: 0 0 .8em;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
.gac-btn,
.gac-home .button.gac-btn {
    background: var(--gac-primary);
    color: #fff;
    padding: .85em 2.2em;
    border-radius: var(--gac-radius);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.gac-btn:hover {
    background: var(--gac-primary-dark);
    color: #fff;
}

/* Tuiles de collections */
.gac-tiles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2em;
}
.gac-tile a {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    color: #fff;
}
.gac-tile__img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform .35s ease;
}
.gac-tile a:hover .gac-tile__img {
    transform: scale(1.05);
}
.gac-tile__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .9em 1em;
    background: linear-gradient(transparent, rgba(26, 26, 26, .78));
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 1em;
}

/* Bloc image + texte */
.gac-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5em;
    align-items: center;
}
.gac-split__media img {
    width: 100%;
    border-radius: 3px;
    display: block;
}
.gac-split__text p {
    margin-bottom: 1em;
}

/* Bloc de texte long */
.gac-copy {
    max-width: 54rem;
    margin: 0 auto;
}
.gac-copy .gac-section__title {
    text-align: center;
    margin-bottom: 1em;
}

/* Guides */
.gac-guides {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6em;
}
.gac-guide a {
    display: block;
    color: var(--gac-ink);
}
.gac-guide__img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 3px;
    display: block;
    margin-bottom: .8em;
}
.gac-guide__title {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 1.15em;
    margin-bottom: .4em;
}
.gac-guide__excerpt {
    display: block;
    color: #666;
    font-size: .92em;
    line-height: 1.5;
}

/* La grille produit de l'accueil suit celle des collections */
.gac-section--products .products.columns-4 li.product {
    width: 22.05%;
    float: left;
    margin-right: 3.8%;
}
.gac-section--products .products.columns-4 li.product:nth-child(4n) {
    margin-right: 0;
}

@media (max-width: 900px) {
    .gac-tiles { grid-template-columns: repeat(2, 1fr); }
    .gac-guides { grid-template-columns: 1fr; }
    .gac-split { grid-template-columns: 1fr; }
    .gac-hero { min-height: 340px; }
    .gac-hero__title { font-size: 1.9em; }
    .gac-section__title { font-size: 1.5em; }
    .gac-section--products .products.columns-4 li.product {
        width: 48%;
        margin-right: 4%;
    }
    .gac-section--products .products.columns-4 li.product:nth-child(2n) {
        margin-right: 0;
    }
}

/* Le nom de marque tient le h1 de l'accueil */
.gac-hero__brand {
    color: #fff;
    font-size: 1em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .18em;
    margin: 0 0 .6em;
    opacity: .9;
}

/* Pied de page : les deux colonnes de menus */
.gac-footer-nav {
    padding: 2em 0 .5em;
    text-align: center;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5em 2em;
}
.gac-footer-col > summary {
    cursor: pointer;
    list-style: none;
}
.gac-footer-col > summary::-webkit-details-marker { display: none; }
.gac-footer-nav__title {
    font-size: 1.05em;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 1em;
}
/* Sous 600 px les colonnes s'empilent mais ne se replient pas : le clic sur
   l'intitulé est neutralisé aux deux largeurs, la colonne reste ouverte et
   aucun chevron n'est dessiné. */
@media (max-width: 749px) {
    .gac-footer-nav { grid-template-columns: 1fr; }
}
.gac-footer-col > summary {
    pointer-events: none;
    cursor: default;
}
.gac-footer-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4em 1.6em;
}
.gac-footer-nav__list a {
    color: var(--gac-ink);
    font-size: .92em;
}
.gac-footer-nav__list a:hover {
    color: var(--gac-primary);
}

/* Le texte de collection passe sous la grille : lecture calee sur le contenu */
.gac-term-copy {
    max-width: 54rem;
    margin: 3em auto 0;
    padding-top: 2em;
    border-top: 1px solid var(--gac-border);
}
.gac-term-copy .term-description {
    font-size: .96em;
    line-height: 1.65;
}
.gac-term-copy .term-description h2,
.gac-term-copy .term-description h3 {
    font-size: 1.2em;
    margin: 1.4em 0 .5em;
}

/* ============================================================
   Fiche produit
   ============================================================ */

/* Les benefices de la collection, sous le prix.
   La source les compose en groupe flex : une fleche de 24 px, 12 px de
   gouttiere, le texte a 1rem ; 8 px entre les lignes et 8 px de
   `padding-block-start` sur le groupe, qui s'ajoutent aux 12 px de
   gouttiere du groupe « Header » - soit 20 px sous le prix.
   La fleche est l'icone `arrow` du theme Horizon, meme trace, posee en
   masque pour qu'elle prenne la couleur du texte. */
.gac-benefits ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 8px 0 0;
}
.gac-benefits li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 1rem;
    line-height: normal;
}
.gac-benefits li::before {
    content: "";
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m11.246 5.31759c.0322-.07821.0833-.14723.1486-.20093.0654-.0537.143-.09041.2259-.10686.083-.01645.1688-.01214.2497.01257.0808.0247.1544.06902.214.12902l4.104 4.104c.0478.04765.0857.10426.1115.16659.0259.06232.0392.12913.0392.19661 0 .06747-.0133.13429-.0392.19661-.0258.06233-.0637.11893-.1115.16659l-4.104 4.10401c-.0963.0963-.227.1504-.3632.1504s-.2669-.0541-.3632-.1504-.1504-.227-.1504-.3632.0541-.2669.1504-.3632l3.2288-3.2278h-11.0736c-.13606 0-.26654-.0541-.36275-.15027-.0962-.0962-.15025-.22669-.15025-.36274 0-.13606.05405-.26654.15025-.36275.09621-.0962.22669-.15025.36275-.15025h11.0736l-3.2288-3.2278c-.0721-.07178-.1212-.16335-.1411-.2631s-.0097-.20316.0293-.2971z'/%3E%3C/svg%3E") no-repeat center / 24px 24px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m11.246 5.31759c.0322-.07821.0833-.14723.1486-.20093.0654-.0537.143-.09041.2259-.10686.083-.01645.1688-.01214.2497.01257.0808.0247.1544.06902.214.12902l4.104 4.104c.0478.04765.0857.10426.1115.16659.0259.06232.0392.12913.0392.19661 0 .06747-.0133.13429-.0392.19661-.0258.06233-.0637.11893-.1115.16659l-4.104 4.10401c-.0963.0963-.227.1504-.3632.1504s-.2669-.0541-.3632-.1504-.1504-.227-.1504-.3632.0541-.2669.1504-.3632l3.2288-3.2278h-11.0736c-.13606 0-.26654-.0541-.36275-.15027-.0962-.0962-.15025-.22669-.15025-.36274 0-.13606.05405-.26654.15025-.36275.09621-.0962.22669-.15025.36275-.15025h11.0736l-3.2288-3.2278c-.0721-.07178-.1212-.16335-.1411-.2631s-.0097-.20316.0293-.2971z'/%3E%3C/svg%3E") no-repeat center / 24px 24px;
}


.gac-carac {
    margin: 3em 0 0;
    max-width: 54rem;
}
.gac-carac__title {
    font-size: 1.35em;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .7em;
}
.gac-carac ul {
    margin-left: 1.1em;
}
.gac-carac li {
    margin-bottom: .35em;
}

.gac-highlights {
    margin: 3em 0 0;
}
.gac-highlight {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5em;
    align-items: center;
    margin-bottom: 2.5em;
}
.gac-highlight--reverse .gac-highlight__media {
    order: 2;
}
.gac-highlight__media img {
    width: 100%;
    display: block;
}
.gac-highlight__text h2 {
    font-size: 1.35em;
    margin-bottom: .5em;
}

/* L'empilement mobile des sections editoriales est plus bas dans cette
   feuille, a la bascule de la source (749 px) et avec la specificite qu'il
   faut pour passer devant la grille de bureau. Le bloc qui vivait ici tenait
   a 767 px : entre 750 et 767 il retirait l'`order` de l'image sans toucher
   aux colonnes, et la section inversee montrait son image a gauche dans la
   colonne large - 375 px de cote la ou la source en pose 266, a droite. */

/* ============================================================
   Fiche produit sur mobile : le prix et le bouton doivent tenir
   dans le premier ecran. La galerie pleine hauteur les repoussait
   a plus de deux ecrans.
   ============================================================ */
@media (max-width: 749px) {
    .single-product .product_title {
        font-size: 1.5em;
        margin-bottom: .2em;
    }
    /* Le vide au-dessus du titre n'est pas une marge de la colonne : la
       source pose 14 px de `padding-block-start` sur son groupe titre, a
       toutes les largeurs. Voir le `padding-top: 14px` global du `.summary`
       plus bas - une marge ici le DOUBLAIT sur telephone et manquait sur le
       bureau (titre 14 px trop haut a 1440, releve du 29/08/2026). */
}

@media (max-width: 749px) {
    /* Le fil d'Ariane et la barre d'annonce sont ramenés à une ligne : sur
       deux lignes chacun, ils repoussaient le bouton d'achat à 1 136 px au
       lieu de 812. Le fil reste lisible par les moteurs. */
    .single-product .woocommerce-breadcrumb {
        white-space: nowrap;
        overflow-x: auto;
        font-size: .8em;
        margin-bottom: .6em;
        -webkit-overflow-scrolling: touch;
    }
    .gac-announcement-inner {
        white-space: nowrap;
        overflow-x: auto;
        font-size: .72em;
        -webkit-overflow-scrolling: touch;
    }
    .single-product .site-content,
    .single-product .col-full {
        padding-top: .6em;
    }
}

@media (max-width: 749px) {
    /* Chrome plus compact au-dessus de la fiche */
    .gac-announcement-inner {
        padding: .45em .8em;
        line-height: 1.2;
    }

    /* La colonne d'achat est un flex vertical, comme celle de la source : son
       `group-block-content` est en `layout-panel-flex--column`. On le garde
       pour que les marges des enfants ne fusionnent PAS, exactement comme
       chez elle.

       AUCUN `order` ici. La source n'en pose aucun - ses six blocs sont tous
       a `order: 0` et se suivent dans l'ordre du DOM, a 390 comme a 1440 -
       et notre colonne sort deja du PHP dans le meme ordre : titre, note,
       prix, achat, reassurance, telephone, accordeon.

       Ce bloc reordonnait autrefois pour remonter `.gac-benefits`, dont le
       hook est commente dans `inc-product.php` depuis. Il restait un
       `.summary > * { order: 5 }` attrape-tout, et l'accordeon, qui n'avait
       pas d'ordre explicite, passait devant la reassurance et le telephone.
       Mesure du 26/08/2026 a 390 px sur suspension-luminaire-salon-tamise :
       source bouton 1014, reassurance 1090, badge 1174, accordeon apres ;
       copie bouton 918, accordeon 998, reassurance 1247, badge 1323.
       Ne pas reintroduire d'ordre explicite : le DOM porte deja le bon. */
    .single-product div.product .summary {
        display: flex;
        flex-direction: column;
    }

    /* Storefront pose `margin-bottom: 2.617924em` sur `.summary`, soit
       36,7 px. Sur le bureau la colonne est flottante et cette marge ne se
       voit pas ; empilee, elle repousse la premiere section editoriale.
       La source laisse 4 px entre le bas de son accordeon et le debut de la
       section, puis 21 px de rembourrage de section : 25 px du dernier filet
       a la photo. Mesure du 26/08/2026 a 390 px sur
       suspension-luminaire-chambre-cocooning : source 25, copie 57,6. */
    .single-product div.product .summary {
        margin-bottom: 4px;
    }
}

@media (max-width: 749px) {
    /* En-tête mobile plus bas : le logo prenait 116 px du premier écran,
       il en tient 60. */
    .site-header {
        padding-top: .7em;
        padding-bottom: .7em;
    }
    .site-title {
        font-size: 1.45em;
        line-height: 1.1;
    }
    .site-branding {
        margin-bottom: 0;
    }
}

@media (max-width: 749px) {
    /* La barre d'annonce est un flex : nowrap sur le conteneur, sinon les
       trois mentions passent sur deux lignes. */
    .gac-announcement-inner {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding: .3em .8em;
    }
}

/* ============================================================
   Interface
   ============================================================ */

/* Pas de colonne de widgets : le contenu occupe toute la largeur */
.dgc-no-sidebar #secondary,
.dgc-no-sidebar .widget-area {
    display: none;
}
.dgc-no-sidebar #primary,
.dgc-no-sidebar .content-area {
    width: 100%;
    float: none;
    margin-right: 0;
}
.dgc-no-sidebar .site-content .col-full {
    max-width: 1170px;
}
/* Une page de texte reste lisible : la pleine largeur ferait des lignes
   de 200 caracteres.
   PAS l'accueil : elle est batie en blocs pleine largeur (hero, grilles,
   sections a deux colonnes) et ce plafond la reduisait a 736 px cales a
   gauche.
   `body.page` et non `.page` : la balise <article> porte aussi la classe
   `page`, elle rattrapait la regle par en dessous. */
body.page:not(.home):not(.woocommerce-page) .entry-content,
body.single-post .entry-content {
    max-width: 46rem;
    /* Centre, pas cale a gauche : le conteneur est passe de 1170 a 1600 px
       pour s'aligner sur l'en-tete, et une colonne de 736 px collee a gauche
       dans 1600 px se lit comme un defaut de mise en page. */
    margin-left: auto;
    margin-right: auto;
}

/* Logo */
.custom-logo-link img,
.site-header .custom-logo {
    max-height: 62px;
    width: auto;
}
@media (max-width: 749px) {
    .custom-logo-link img,
    .site-header .custom-logo {
        max-height: 40px;
    }
}


/* ============================================================
   Pied de page sombre
   ============================================================ */
.site-footer {
    background: var(--gac-dark);
    color: #f2f0ec;
}
.site-footer a,
.site-footer .gac-footer-nav__list a,
.site-footer .site-info {
    color: #f2f0ec;
}
.site-footer .gac-footer-nav__title {
    color: #fff;
}
.site-footer .gac-footer-nav__list a {
    border-bottom: 1px solid transparent;
}
.site-footer .site-info {
    border-top: 1px solid rgba(255, 255, 255, .15);
    padding-top: 1.2em;
    margin-top: 1.4em;
    font-size: .85em;
    opacity: .75;
    text-align: center;
}

/* ============================================================
   Accordeon de la fiche produit
   ============================================================ */
/* Chaque `details` fait 45 px fermé : 44 de titre plus un filet EN HAUT,
   pas en bas. Titre en Inter 16/19,2 graisse 500, casse normale, sans
   interlettrage - ni capitales, ni `+` dessiné en `::after`. */
.gac-accordion {
    /* 28 px sous l'encart téléphone. */
    margin: 28px 0 0;
}
/* Et 14 px SOUS le dernier filet, releves sur `.accordion` de la source a 390
   comme a 1440 px. Nous n'en avions aucun. La FAQ, qui porte la meme classe
   de base, est exclue : son rembourrage n'a pas ete releve. */
.gac-accordion:not(.gac-accordion--faq) {
    padding-bottom: 14px;
}
.gac-accordion__item {
    /* Filet à rgb(0 0 0 / .06) : à .13 il est deux fois plus foncé, ce qui
       se voit à l'oeil sur une pile de cinq filets. */
    border-top: 1px solid rgba(0, 0, 0, .06);
}
/* Un filet BAS sur le dernier panneau ferme la pile : sans lui, le dernier
   titre se termine dans le vide. Le relevé du 15/08/2026 disait « un filet en
   haut, pas en bas » : vrai pour les quatre premiers, faux pour le dernier,
   dont le `details` fait 46 px contre 45 - l'écart étant ce filet. */
.gac-accordion__item:last-of-type {
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.gac-accordion__title {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11.2px 0;
    /* 44 px de titre, filet non compris : 22,4 de rembourrage et 21,6 de
       contenu. La ligne de texte seule n'en fait que 19,2 - c'est la boîte de
       l'icône qui ouvre le reste. */
    min-height: 44px;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 19.2px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
}
.gac-accordion__title::-webkit-details-marker {
    display: none;
}
/* Le chevron est poussé à droite par la marge automatique : le titre peut
   ainsi porter la note (« Avis clients ★★★★★ (3 avis) ») sans que le chevron
   se décale, ce qu'un positionnement absolu aurait fait. */
.gac-accordion__chevron {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    transition: rotate .2s ease;
}
.gac-accordion__item[open] > .gac-accordion__title .gac-accordion__chevron {
    rotate: 180deg;
}
/* Toutes les règles qui suivent sont scopées par
   `:not(.gac-accordion--faq)` : la FAQ - accueil, page /faq et bas de fiche -
   réutilise la classe `.gac-accordion__body` avec son propre rythme, réglé
   dans un chantier antérieur. Une règle nue sur `__body` la reprendrait au
   passage. */
/* Le corps du panneau est en `display: flex` : les marges verticales de
   ses paragraphes ne FUSIONNENT donc pas, et deux `<p>` sont séparés par
   7 + 7 = 14 px. En flux normal elles fusionneraient et ne donneraient que 7.
   C'est le mécanisme qui compte ici, pas le nombre.

   Rembourrage bas : 0,7rem, soit 11,2 px. */
.gac-accordion:not(.gac-accordion--faq) .gac-accordion__body {
    display: flex;
    flex-direction: column;
    padding: 0 0 11.2px;
}
/* Toutes les règles de texte courant ci-dessous visent une LISTE DE
   BALISES, enfants directs du panneau, et jamais `> *` ni un `p` de
   descendance. Le panneau « Avis clients » loge un composant entier - titres
   d'avis, méta, textes - dans un `div` : un `__body p` le reprendrait au
   passage et poserait 7 px de marge sur chaque titre d'avis, qui n'en veut
   aucune. */
.gac-accordion:not(.gac-accordion--faq) .gac-accordion__body > :is(p, h2, h3, h4, ul, ol) {
    /* Largeur de lecture 32,5em de 14 px, et `text-wrap: pretty`. Le point
       de coupe des lignes en dépend : sans lui, un « : » de fin de proposition
       tombe en fin de ligne au lieu de passer à la suivante. */
    max-width: min(100%, 455px);
    text-wrap: pretty;
}
.gac-accordion:not(.gac-accordion--faq) .gac-accordion__body > p {
    /* Espacement des paragraphes : 0.5em, soit 7 px. Storefront posait
       1,41575em (19,8 px). */
    margin-block: 7px;
}
.gac-accordion:not(.gac-accordion--faq) .gac-accordion__body > :is(p, h2, h3, h4, ul, ol):first-child {
    margin-block-start: 0;
}
.gac-accordion:not(.gac-accordion--faq) .gac-accordion__body > :is(p, h2, h3, h4, ul, ol):last-child {
    margin-block-end: 0;
}
/* La liste des caractéristiques est rentrée par un
   `padding-inline-start: 1.5em` - la puce est donc DANS la colonne, qui garde
   toute sa largeur - et garde 1em de marge basse même en dernier enfant. La
   rentrer par une marge rognerait la colonne de 15,4 px et raccourcirait le
   panneau d'autant. */
.gac-accordion:not(.gac-accordion--faq) .gac-accordion__body > ul {
    /* Raccourci, et non `margin-block` : Storefront pose `margin-left: 3em`
       sur ses listes, qui repoussait la liste de 42 px. */
    margin: 0 0 14px;
    padding-inline-start: 1.5em;
}
.gac-accordion:not(.gac-accordion--faq) .gac-accordion__body > ul:last-child {
    margin-block-end: 14px;
}
/* Les titres de la description : Inter 14 px gras. La présélection de
   titre du thème les rendrait en Libre Baskerville 15,4 px graisse 400, soit
   un autre dessin, une autre taille et une autre graisse. */
.gac-accordion:not(.gac-accordion--faq) .gac-accordion__body > h2,
.gac-accordion:not(.gac-accordion--faq) .gac-accordion__body > h3 {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    /* Espacement des titres h2 et h3 : 0.25em, soit 3,5 px. */
    margin-block: 3.5px;
}
.gac-accordion:not(.gac-accordion--faq) .gac-accordion__body > h2 {
    line-height: 1;      
}
.gac-accordion:not(.gac-accordion--faq) .gac-accordion__body > h3 {
    line-height: 1.1;    
}

/* ============================================================
   Pastilles de variantes
   ============================================================ */
.gac-select-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
/* La légende d'option - « Taille » - en casse normale à 14 px, et non en
   capitales grises de 11,9. */
/* `th`, pas `td` : le gabarit de WooCommerce écrit `<th class="label">`.
   Une règle sur `td.label label` ne coifferait rien. */
.variations .label label {
    font-size: 14px;
    line-height: 22.4px;
    text-transform: none;
    letter-spacing: normal;
    color: rgba(0, 0, 0, .81);
    display: block;
    margin-bottom: 8px;
}
.variations .label {
    margin-bottom: 0;
}
/* La valeur choisie, accolée au nom pour les options en pastilles. */
.dgc-option__valeur {
    padding-left: 8px;
    color: rgba(0, 0, 0, .7);
}
.variations,
.variations tbody,
.variations tr,
.variations td {
    display: block;
    width: 100%;
    border: 0;
    padding: 0;
}
.variations td.label {
    margin-bottom: .2em;
}
.woocommerce div.product form.cart .reset_variations {
    font-size: .82em;
}


/* ============================================================
   Volet du panier
   ============================================================ */
html:has(body.gac-drawer-open) { overflow: hidden; }
body.gac-drawer-open {
    overflow: hidden;
}
.gac-drawer {
    position: fixed;
    inset: 0;
    z-index: 9999;
}
.gac-drawer__scrim {
    position: absolute;
    inset: 0;
    background: rgba(26, 26, 26, .45);
    opacity: 0;
    transition: opacity .25s ease;
}
.gac-drawer.is-open .gac-drawer__scrim {
    opacity: 1;
}
.gac-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(400px, 92vw);
    background: #fff;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .25s ease;
    box-shadow: -8px 0 30px rgba(0, 0, 0, .18);
}
.gac-drawer.is-open .gac-drawer__panel {
    transform: translateX(0);
}
.gac-drawer__head {
    display: flex;
    align-items: center;
    /* Titre et pastille a gauche, croix a droite ; PAS de filet sous
       l'en-tete - la source n'en peint aucun (seul filet du volet : celui
       au-dessus des totaux). Titre a x20, contenu a x16 (releve 29/08/2026). */
    justify-content: flex-start;
    /* 20 px sous le titre avant le premier article, comme la source les pose
       (`--cart-drawer-padding: var(--padding-xl)`, soit 20 px sur les quatre
       cotes de son en-tete). Les 4 px de la premiere ligne s'y ajoutent. */
    padding: 20px 16px;
    border-bottom: 0;
}
.gac-drawer__head .gac-drawer__title { margin-left: 4px; }
/* 17 px entre le titre et la pastille chez la source (badge a x103). */
.gac-drawer__head .gac-drawer__count { margin-left: 17px; }
.gac-drawer__head .gac-drawer__close { margin-left: auto; }
.gac-drawer__title {
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.gac-drawer__close {
    background: none;
    border: 0;
    font-size: 1.7em;
    line-height: 1;
    padding: 0 .2em;
    color: var(--gac-ink);
    cursor: pointer;
    box-shadow: none;
}
.gac-drawer__close:hover {
    background: none;
    color: var(--gac-primary);
}
.gac-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 1.2em 16px 2em;
}
.gac-drawer__body .woocommerce-mini-cart__buttons .button {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: .5em;
}
.gac-drawer__body .woocommerce-mini-cart__buttons .checkout {
    background: var(--gac-primary);
    color: #fff;
}

/* Le logo est dimensionné par sa largeur : Storefront neutralise max-height */
.site-header .custom-logo-link img,
.site-header .custom-logo {
    max-width: 138px;
    height: auto;
}
/* Bascule à 749/750 et non 767/768 : l'en-tête passe de sa rangée
       téléphone unique (60 px) à ses deux rangées de bureau (109,9)
       exactement à 750 px. */
@media (max-width: 749px) {
    .site-header .custom-logo-link img,
    .site-header .custom-logo {
        max-width: 118px;
    }
}


/* ============================================================
   Recherche : loupe dans la barre de navigation, champ dans un
   panneau. Le widget de Storefront ouvrait la rangee du logo.
   ============================================================ */
.site-header .site-search {
    display: none;
}
.site-header .site-branding {
    width: auto;
    float: none;
    margin-bottom: 0;
}
.site-header > .col-full {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.gac-search-toggle {
    background: none;
    border: 0;
    padding: .5em;
    margin-left: auto;
    color: var(--gac-ink);
    cursor: pointer;
    line-height: 0;
    box-shadow: none;
    order: 5;
}
.gac-search-toggle:hover {
    background: none;
    color: var(--gac-primary);
}
.storefront-primary-navigation .col-full {
    position: relative;
}
.storefront-primary-navigation .gac-search-toggle {
    position: absolute;
    right: 5.5em;
    top: 50%;
    transform: translateY(-50%);
}


@media (max-width: 749px) {
    .storefront-primary-navigation .gac-search-toggle {
        right: 4.5em;
    }
}


/* Hero : pas de voile sur toute l'image. Le noir ne sert que de fond au
   bloc de texte, placé en bas à gauche. */
.gac-home .gac-hero__overlay {
    background: none;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 2.5em;
}
.gac-home .gac-hero__inner {
    text-align: left;
    background: rgba(26, 26, 26, .72);
    padding: 1.8em 2.2em;
    max-width: 30rem;
}
.gac-home .gac-hero__title {
    text-shadow: none;
    font-size: 2.1em;
}

/* Fond blanc partout : pas d'alternance de bandes grises */
.gac-home .gac-section:nth-child(even) {
    background: transparent;
}

/* .col-full porte un clearfix : ses pseudo-elements devenaient des cases de
   grille et decalaient l'image et le texte d'une colonne. */
.gac-split::before,
.gac-split::after,
.gac-copy::before,
.gac-copy::after {
    display: none;
}

@media (max-width: 749px) {
    .gac-home .gac-hero__overlay {
        padding: 1.2em;
    }
    .gac-home .gac-hero__inner {
        max-width: none;
        padding: 1.2em 1.4em;
    }
}

/* ============================================================
   En-tete sur une seule rangee : logo, menu, icones
   ============================================================ */
.site-header > .col-full {
    display: flex;
    align-items: center;
    gap: 2.2em;
    padding-top: 1.1em;
    padding-bottom: 1.1em;
}
.site-header .site-branding {
    flex: 0 0 auto;
    margin: 0;
}
.site-header .main-navigation {
    flex: 1 1 auto;
    width: auto;
    float: none;
    margin: 0;
}
.site-header .primary-navigation {
    display: block;
}
.site-header .main-navigation ul.menu {
    display: flex;
    flex-wrap: wrap;
    gap: 1.8em;
    margin: 0;
}
.site-header .main-navigation ul.menu > li {
    margin: 0;
    float: none;
}
.site-header .main-navigation ul.menu > li > a {
    padding: .4em 0;
    text-transform: none;
    font-size: 1em;
    font-weight: 400;
}
.site-header .site-header-cart {
    flex: 0 0 auto;
    width: auto;
    float: none;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
}
.site-header .site-header-cart .cart-contents {
    padding: .4em;
}
/* Le montant du panier ne s'affiche pas : seul le compteur */
.site-header .site-header-cart .amount,
.site-header .site-header-cart .count {
    display: none;
}
.site-header .gac-search-toggle {
    position: static;
    transform: none;
    margin-left: auto;
    order: 0;
}
/* La rangee de navigation separee n'a plus de contenu */
.storefront-primary-navigation {
    display: none;
}

@media (max-width: 749px) {
    .site-header > .col-full {
        flex-wrap: wrap;
        gap: .8em;
    }
    .site-header .main-navigation {
        order: 4;
        flex-basis: 100%;
    }
    .site-header .gac-search-toggle {
        order: 2;
    }
    .site-header .site-header-cart {
        order: 3;
    }
}

/* Hero : bandeau noir colle au titre, bouton dessous, en bas a gauche */
.gac-home .gac-hero__inner {
    background: none;
    padding: 0;
    max-width: 34rem;
}
.gac-home .gac-hero__title {
    display: inline-block;
    background: var(--gac-dark);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .01em;
    font-size: 1.9em;
    padding: .18em .45em;
    margin: 0 0 1.1em;
}
.gac-home .gac-hero__inner .gac-btn {
    letter-spacing: .12em;
    padding: 1em 2.4em;
}

/* ============================================================
   En-tete, version corrigee : le logo vit desormais DANS le
   conteneur de navigation, seul endroit ou les regles de menu
   de Storefront s'appliquent.
   ============================================================ */
.site-header > .col-full {
    display: block;
    padding: 0;
    min-height: 0;
}
.storefront-primary-navigation {
    display: block;
}
.storefront-primary-navigation > .col-full {
    display: flex;
    align-items: center;
    gap: 2.4em;
    padding-top: 1em;
    padding-bottom: 1em;
    position: relative;
}
.storefront-primary-navigation .site-branding {
    flex: 0 0 auto;
    width: auto;
    float: none;
    margin: 0;
    padding: 0;
}
.storefront-primary-navigation .site-branding .logo,
.storefront-primary-navigation .site-branding h1 {
    margin: 0;
}
.storefront-primary-navigation .main-navigation {
    flex: 1 1 auto;
    width: auto;
    float: none;
    margin: 0;
}
.storefront-primary-navigation .main-navigation ul.menu > li > a,
.storefront-primary-navigation .main-navigation ul.nav-menu > li > a {
    text-transform: none;
    font-weight: 400;
    font-size: 1em;
    white-space: nowrap;
}
.storefront-primary-navigation .site-header-cart {
    flex: 0 0 auto;
    width: auto;
    float: none;
    margin: 0;
    padding: 0;
}
.storefront-primary-navigation .gac-search-toggle {
    position: static;
    transform: none;
    flex: 0 0 auto;
    margin-left: auto;
    order: 0;
}
.storefront-primary-navigation .site-header-cart .amount,
.storefront-primary-navigation .site-header-cart .count {
    display: none;
}

@media (max-width: 749px) {
    .storefront-primary-navigation > .col-full {
        flex-wrap: wrap;
        gap: .6em;
    }
    .storefront-primary-navigation .main-navigation {
        order: 5;
        flex-basis: 100%;
    }
    .storefront-primary-navigation .gac-search-toggle { order: 2; }
    .storefront-primary-navigation .site-header-cart { order: 3; }
}

/* ============================================================
   L'echelle d'espacement de la source, commune au blog et a l'article.

   Horizon ne fige pas ses rembourrages : il les ecrit
   `max(20px, calc(var(--spacing-scale) * Npx))` pour un rembourrage et
   `max(24px, calc(var(--gap-scale) * Npx))` pour une gouttiere, et fait
   tomber les deux echelles a 0,7 sous 990 px - une bascule qui n'a rien a
   voir avec celle de la mise en colonnes, a 749.
   ============================================================ */
:root {
    --dgc-spacing-scale: .7;
    --dgc-gap-scale: .7;
}
@media screen and (min-width: 990px) {
    :root {
        --dgc-spacing-scale: 1;
        --dgc-gap-scale: 1;
    }
}

/* ============================================================
   Index du blog : le gabarit que la source pose, compte par compte.

   Tout vient de `sections/main-blog.liquid`, `blocks/_blog-post-card.liquid`,
   `_blog-post-image`, `_blog-post-info-text` et `_blog-post-description` du
   theme Horizon 3.4.0, plus les valeurs calculees relevees sur
   svevelys.com/blogs/articles a 1440 px le 27/08/2026.

   La grille fait SIX colonnes et chaque carte porte son `--col-span` et son
   `--blog-post-card-scale` en style en ligne, poses par home.php : la source
   ne pose pas une grille reguliere, elle repartit selon le NOMBRE d'articles
   de la page. La hauteur d'image vaut `400px * echelle`, d'ou 400 pour le
   heros et 320 pour ses voisins.
   ============================================================ */
.dgc-blog {
    --dgc-blog-colonnes-gap: 36px;
    --dgc-blog-rangees-gap: 36px;
    /* `--padding-block-end: max(20px, calc(var(--spacing-scale) * 48px))` */
    padding-block-end: max(20px, calc(var(--dgc-spacing-scale) * 48px));
}

/* Le bloc de titre est un `text-block` en preselection h2 : 48 px de
   rembourrage haut et bas, largeur au contenu. */
.dgc-blog__title {
    display: flex;
    flex-direction: column;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    padding-block: 48px;
}
.dgc-blog__title h1 {
    margin: 0;
    font-family: 'Libre Baskerville', serif;
    /* `--font-size--h2` de la source. La taille est fluide entre 750 et
       1000 px de fenetre : 36 px au plancher, 48 au plafond. */
    font-size: clamp(2.25rem, 4.8vw, 3rem);
    font-weight: 400;
    line-height: 1;
    color: var(--gac-ink);
    text-wrap: balance;
    /* `--max-width--body-narrow` */
    max-width: min(100%, 1092px);
}

.dgc-blog__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    width: 100%;
    column-gap: var(--dgc-blog-colonnes-gap);
    row-gap: var(--dgc-blog-rangees-gap);
}

.dgc-blog-item {
    grid-column: span var(--col-span);
}
/* Sans image, la source encadre la carte ; avec image, ni cadre ni
   rembourrage. */
.dgc-blog-item {
    border: 1px solid rgb(0 0 0 / .2);
    padding: 0 1rem 1rem;
}
.dgc-blog-item:has(.dgc-blog-card__image-container) {
    border: none;
    padding: 0;
}

.dgc-blog-card {
    display: flex;
    flex-direction: column;
    text-align: left;
    column-gap: var(--dgc-blog-colonnes-gap);
}
/* Le heros met l'image a gauche et le texte a droite, 70 % contre 30 %. */
.dgc-blog-item--horizontal .dgc-blog-card {
    flex-direction: row;
}
.dgc-blog-item--horizontal:has(.dgc-blog-card__image-container) .dgc-blog-card > *:first-child {
    flex-basis: 70%;
}
.dgc-blog-item--horizontal:has(.dgc-blog-card__image-container) .dgc-blog-card > *:last-child {
    flex-basis: 30%;
}

.dgc-blog-item .dgc-blog-card__image-container,
.dgc-blog-item .dgc-blog-card__content {
    width: 100%;
}

.dgc-blog-card__image-container a {
    display: block;
}
.dgc-blog-card__image {
    display: block;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    /* `--blog-post-card-img-height` de la hauteur « large » du bloc image. */
    height: calc(400px * var(--blog-post-card-scale));
    border-radius: 4px;
}

.dgc-blog-card__content {
    padding-block-start: .4rem;
    display: flex;
    flex-direction: column;
}
/* Le rembourrage haut porte sur les DEUX liens de la carte : le titre et le
   « Lire plus... » du texte. C'est la meme regle chez la source. */
.dgc-blog-card__content a {
    display: block;
    text-wrap: pretty;
    text-decoration: none;
    padding-block-start: .75rem;
    color: var(--gac-ink);
}
/* Au survol, la source repasse le titre et le « Lire plus... » du noir a
   81 % au noir plein - relevé au calcule des deux cotes, elle ne les eclaircit
   pas. Seul le lien du texte porte la transition ; le titre bascule sec. */
.dgc-blog-card__content a:hover,
.dgc-blog-card__content a:hover .dgc-blog-card__heading {
    color: rgb(0 0 0);
}
.dgc-blog-card__text a {
    color: var(--gac-ink);
    transition: color .125s, text-decoration-color .125s;
}
.dgc-blog-card__text a:hover {
    color: rgb(0 0 0);
}

.dgc-blog-card__heading {
    font-family: 'Libre Baskerville', serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--gac-ink);
    padding-block-end: 10px;
    text-wrap: balance;
}

.dgc-blog-details {
    display: flex;
    flex-wrap: wrap;
    gap: 11.2px;
    font-size: 14px;
    line-height: 1.6;
    color: rgb(0 0 0 / .7);
    white-space: nowrap;
}
.dgc-blog-details > span {
    text-overflow: clip;
    overflow: hidden;
}

.dgc-blog-card__text {
    display: flex;
    flex-direction: column;
    padding-block-start: 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--gac-ink);
    text-wrap: pretty;
    max-width: 100%;
}

/* La bascule de la source est a 749 px, pas au 767 des habitudes WordPress :
   toutes les cartes passent alors sur six colonnes et l'image tombe a la
   moitie de sa hauteur. */
@media screen and (max-width: 749px) {
    .dgc-blog-item--horizontal .dgc-blog-card {
        flex-direction: column;
    }
}

/* ============================================================
   Accueil : la section « derniers articles » de la source.

   `sections/featured-blog-posts.liquid` en disposition grille, relevee sur
   svevelys.com le 27/08/2026 : rembourrage 48 haut et bas a l'echelle,
   gouttiere 12 entre le titre et la grille, trois colonnes a 8 px, image
   carree, puis titre, date et auteur, et l'extrait a 30 mots.
   ============================================================ */
.dgc-home-blog {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-block: max(20px, calc(var(--dgc-spacing-scale) * 48px));
}
.dgc-home-blog__title {
    display: flex;
    flex-direction: column;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
}
.dgc-home-blog__title h3 {
    margin: 0;
    font-family: 'Libre Baskerville', serif;
    /* `--font-size--h3` : 2rem, sans echelle fluide. */
    font-size: 32px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--gac-ink);
    text-wrap: pretty;
    max-width: min(100%, 1040px);
}
.dgc-home-blog__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.dgc-home-blog-card {
    position: relative;
}
/* Toute la carte est cliquable chez la source, par un lien pose au dessus. */
.dgc-home-blog-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.dgc-home-blog-card__inner,
.dgc-home-blog-card__content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dgc-home-blog-card__image {
    display: flex;
    max-width: 100%;
}
/* Meme raison que sur la couverture d'article : `.hentry .wp-post-image` de
   Storefront pese deux classes et posait 1,618em sous l'image. */
.dgc-home-blog .dgc-home-blog-card__img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center center;
    margin: 0;
    border-radius: 0;
}
.dgc-home-blog-card__heading {
    margin: 0;
    font-family: 'Libre Baskerville', serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--gac-ink);
    text-wrap: pretty;
    clear: none;
}
.dgc-home-blog-card__text {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    line-height: 1.6;
    color: var(--gac-ink);
    text-wrap: pretty;
    padding-block-start: 8px;
}
/* La source passe a deux colonnes sous 750, pas a une. */
@media screen and (max-width: 749px) {
    .dgc-home-blog__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Article de blog : le gabarit et le texte courant de la source.

   `templates/article.json` : une colonne flex, gouttiere 32, rembourrage 40
   en haut et 80 en bas ; titre en preselection h2 centre, date sous lui a 24,
   image a la une recadree en 16/9 sur toute la largeur, puis le corps dans une
   colonne de 672 px centree.

   Les regles de texte courant sont celles de `.rte` dans le `base.css` de la
   source, transcrites a l'identique (marges en `em`, pas en pixels : elles
   suivent la taille du bloc qu'elles separent). Storefront habille les memes
   balises et gagne souvent par specificite, d'ou les selecteurs longs.
   ============================================================ */
.dgc-article {
    display: flex;
    flex-direction: column;
    gap: max(24px, calc(var(--dgc-gap-scale) * 32px));
    padding-block: max(20px, calc(var(--dgc-spacing-scale) * 40px))
                   max(20px, calc(var(--dgc-spacing-scale) * 80px));
    /* Storefront pose une marge basse sur `.hentry` : la source n'en a pas,
       et elle s'ajoutait aux 80 px de rembourrage. */
    margin-bottom: 0;
}
/* Le texte courant de la source coupe ses lignes en `wrap`, pas en `pretty` :
   a police, taille et largeur identiques, les mots ne tombent pas au meme
   endroit selon la valeur. Notre feuille pose `pretty` partout ailleurs. */
.dgc-article__content,
.dgc-article__content :is(p, li, figcaption, blockquote, cite, td, th) {
    text-wrap: wrap;
}
.dgc-article__title h1 {
    margin: 0;
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(2.25rem, 4.8vw, 3rem);
    font-weight: 400;
    line-height: 1;
    color: var(--gac-ink);
    text-align: center;
    text-wrap: balance;
}
.dgc-article__details {
    justify-content: center;
    padding-block-start: max(20px, calc(var(--dgc-spacing-scale) * 24px));
}

/* `image_ratio: adapt` du gabarit : la couverture garde le format de son
   fichier, sur toute la largeur de page. */
.dgc-article__cover {
    display: block;
    position: relative;
    width: 100%;
}
/* Le selecteur nomme la section : Storefront pose `margin: 0 auto 1.618em` sur
   `.hentry .wp-post-image`, deux classes, et gagnait sur la classe seule. */
.dgc-article .dgc-article__cover-img {
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
    /* `--ratio` est pose par single.php depuis le format du fichier. */
    aspect-ratio: var(--ratio, 1);
    object-fit: cover;
    object-position: center center;
    border-radius: 0;
}

/* `--normal-content-width` de la source. */
.dgc-article__content {
    max-width: 672px;
    margin: 0 auto;
    width: 100%;
}

/* Le texte courant. Les valeurs sont celles de `.rte` : `1em` de blanc sous un
   paragraphe, `clamp(1.5rem, 3.3em, 2.5rem)` au dessus d'un titre et `.25em`
   sous lui. */
/* Le paragraphe garde les marges du navigateur - `1em` en haut ET en bas, qui
   fusionnent entre voisins. Storefront les remplace par `0 0 1.41575em`, ce
   qui serre le texte contre ce qui le precede (une figure, une citation). */
.dgc-article__content :is(p, dl) {
    margin-block: 1em;
    font-size: 14px;
    line-height: 1.6;
    color: var(--gac-ink);
}
.dgc-article__content :is(ul, ol) {
    margin-block-end: 1em;
    font-size: 14px;
    line-height: 1.6;
    color: var(--gac-ink);
}
.dgc-article__content :is(h1, h2, h3, h4, h5, h6) {
    /* Storefront pose `clear: both` sur tous les titres. La source ne le fait
       pas : un titre qui suit une figure flottee s'ecoule A COTE d'elle, et
       avec le `clear` il passait dessous, ce qui deplacait tout le bas de
       l'article. */
    clear: none;
    font-family: 'Libre Baskerville', serif;
    font-weight: 400;
    color: var(--gac-ink);
    margin-block: clamp(1.5rem, 3.3em, 2.5rem) .25em;
    text-transform: none;
    letter-spacing: normal;
}
/* `--font-size--h2` : fluide entre 36 et 48 px, comme le titre de l'article. */
.dgc-article__content h2 { font-size: clamp(2.25rem, 4.8vw, 3rem); line-height: 1; }
.dgc-article__content h3 { font-size: 32px; line-height: 1.1; }
.dgc-article__content h4 { font-size: 20px; line-height: 1.2; }
.dgc-article__content > :first-child:is(p, h1, h2, h3, h4, h5, h6) {
    margin-block-start: 0;
}
/* Le dernier bloc ne pousse rien : la source ferme sa colonne net. */
.dgc-article__content > :last-child:is(p, h1, h2, h3, h4, h5, h6) {
    margin-block-end: 0;
}

.dgc-article__content :is(ul, ol) {
    padding-inline-start: 1.5em;
    margin-block-start: 0;
    /* Storefront rentre ses listes de 3em : la source les laisse au bord de
       la colonne. */
    margin-inline: 0;
    list-style-position: outside;
}
.dgc-article__content li {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

/* Storefront borne les images a 100 % et leur pose 3 px de coins ; la source
   ne pose que la largeur. La figure garde les marges du navigateur - la
   source ne la style pas du tout, et c'est ce qui lui donne ses 40 px
   lateraux. */
.dgc-article__content img {
    width: 100%;
    height: auto;
    border-radius: 0;
}
.dgc-article__content figure {
    margin: 1em 40px;
}
.dgc-article__content figcaption {
    font-size: 14px;
    line-height: 1.6;
    color: var(--gac-ink);
    text-align: start;
    margin: 0;
    padding: 0;
}

.dgc-article__content blockquote {
    margin-inline: 1.5em 2.3em;
    margin-block: 3.8em;
    padding: 0 0 0 .8em;
    border: 0;
    border-inline-start: 1.5px solid rgb(0 0 0 / .25);
    font-style: italic;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.6;
    color: var(--gac-ink);
    background: none;
}
.dgc-article__content blockquote p {
    margin-block: 0 1em;
    font-style: italic;
    font-weight: 500;
}
.dgc-article__content blockquote :last-child {
    margin-block-end: 0;
}
.dgc-article__content cite {
    font-style: italic;
    font-weight: 500;
    font-size: 14px;
}

/* `rte-formatter` de la source enveloppe chaque tableau ; le notre le fait en
   PHP, meme resultat sans le saut de mise en page d'un enrobage au chargement. */
.dgc-article__content .rte-table-wrapper {
    overflow-x: auto;
}
.dgc-article__content table {
    width: 100% !important;
    border-collapse: collapse;
    margin: 0;
    border: 0;
}
/* Le gras du texte courant est a 700 chez la source ; notre feuille pose 600
   sur `strong` pour le reste du site. */
.dgc-article__content :is(strong, b, th) {
    font-weight: 700;
}
.dgc-article__content :is(thead, tr:not(:has(td))) {
    background-color: rgb(0 0 0 / .05);
    font-weight: 700;
    text-transform: uppercase;
}
.dgc-article__content tr:has(td) {
    border-bottom: 1px solid rgb(0 0 0 / .1);
}
/* Storefront peint ses cellules en gris tres clair - `#fdfdfd` sur les `td`,
   `#f8f8f8` sur les `th`, `#fbfbfb` une ligne sur deux - et son selecteur
   `table:not(.has-background) tbody td` pese plus que la classe seule. La
   source ne pose de fond que sur l'en-tete du tableau : les cellules restent
   transparentes. */
.dgc-article__content table:not(.has-background) :is(th, td),
.dgc-article__content table:not(.has-background) tbody tr:nth-child(2n) td {
    background-color: transparent;
}
.dgc-article__content :is(th, td) {
    text-align: start;
    padding-inline: .8rem;
    padding-block: .7rem;
    border: 0;
    font-size: 14px;
    line-height: 1.6;
}
/* Les tableaux de mise en page (deux images cote a cote, galerie) portent leur
   propre rembourrage en ligne : la regle de cellule ne doit pas s'y ajouter. */
.dgc-article__content td[style*="width"] {
    padding-block: 0;
}

/* Le separateur reste celui du navigateur, comme chez la source : deux
   bordures de 1 px en `inset` sur une boite de hauteur nulle, gris par
   defaut. Storefront le remplace par une barre grise pleine de 1 px. */
.dgc-article__content hr {
    height: 0;
    color: gray;
    background: none;
    border-style: inset;
    border-width: 1px;
    margin-block: .5em;
    margin-inline: 0;
    max-width: none;
}

/* Un lien du texte courant est souligne au repos ; au survol la source efface
   le trait et passe au vert. */
.dgc-article__content :is(p, ul, ol, table) a {
    color: var(--gac-ink);
    text-decoration: underline;
    text-decoration-color: currentcolor;
    transition: color .125s, text-decoration-color .125s;
}
.dgc-article__content :is(p, ul, ol, table) a:hover {
    color: var(--dgc-vert-survol);
    text-decoration-color: transparent;
}

/* Pied de page sombre : Storefront cible .site-footer a:not(.button),
   plus specifique que la regle precedente, d'ou le gris illisible. */
.site-footer,
.site-footer .widget,
.site-footer p {
    color: #e8e5e0;
}
.site-footer a:not(.button),
.site-footer .gac-footer-nav__list a,
.site-footer .site-info a {
    color: #e8e5e0;
    text-decoration: none;
}
.site-footer .site-info {
    color: rgba(255, 255, 255, .7);
}

/* Aucune puce sur les grilles en <ul> */
.gac-guide-grid,
.gac-guide-grid > li,
.gac-tiles,
.gac-tiles > li,
.gac-guides,
.gac-guides > li,
.gac-footer-nav__list,
.gac-footer-nav__list > li {
    list-style: none;
    list-style-type: none;
}
.gac-guide-grid > li::marker,
.gac-tiles > li::marker,
.gac-guides > li::marker {
    content: "";
}

/* ============================================================
   En-tete : largeurs forcees. Storefront donne une largeur en
   pourcentage au menu et au panier, ce qui ecrasait la rangee
   et empilait les entrees les unes sous les autres.
   ============================================================ */
.site-header .storefront-primary-navigation > .col-full > .site-branding,
.site-header .storefront-primary-navigation > .col-full > .main-navigation,
.site-header .storefront-primary-navigation > .col-full > .site-header-cart {
    width: auto;
    max-width: none;
    float: none;
    clear: none;
    margin: 0;
    padding: 0;
}
.site-header .storefront-primary-navigation > .col-full > .main-navigation {
    flex: 1 1 auto;
    min-width: 0;
}
.site-header .storefront-primary-navigation .primary-navigation {
    display: block;
    width: auto;
    float: none;
}
.site-header .storefront-primary-navigation ul.menu,
.site-header .storefront-primary-navigation ul.nav-menu {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.9em;
    margin: 0;
    padding: 0;
    width: auto;
    float: none;
}
.site-header .storefront-primary-navigation ul.menu > li,
.site-header .storefront-primary-navigation ul.nav-menu > li {
    display: block;
    float: none;
    width: auto;
    margin: 0;
    border: 0;
    list-style: none;
}
.site-header .storefront-primary-navigation ul.menu > li > a,
.site-header .storefront-primary-navigation ul.nav-menu > li > a {
    display: block;
    padding: .6em 0;
    white-space: nowrap;
    border: 0;
}

/* Le bloc du hero descend vraiment en bas de l'image */
.gac-home .gac-hero {
    align-items: flex-end;
}
.gac-home .gac-hero__overlay {
    align-items: flex-end;
    padding: 0 0 2.4em 3em;
}
.gac-home .gac-hero__title {
    margin-bottom: .9em;
}
@media (max-width: 749px) {
    .gac-home .gac-hero__overlay {
        padding: 0 1.2em 1.6em;
    }
}

/* ============================================================
   Reglages apres relecture : en-tete plus serre, hero plus haut,
   bloc de texte centre
   ============================================================ */
.site-header .storefront-primary-navigation > .col-full {
    padding-top: .5em;
    padding-bottom: .5em;
    padding-left: 1.6em;
    padding-right: 1.6em;
    max-width: none;
    gap: 1.8em;
}
.site-header {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}
.site-header > .col-full {
    padding-left: 0;
    padding-right: 0;
}

/* Hero : plus de hauteur, titre plus discret, bloc centre */
.gac-home .gac-hero {
    min-height: 620px;
    align-items: stretch;
}
.gac-home .gac-hero__overlay {
    align-items: center;
    justify-content: center;
    padding: 2em;
}
.gac-home .gac-hero__inner {
    text-align: center;
    max-width: 38rem;
}
.gac-home .gac-hero__title {
    font-size: 1.5em;
    padding: .3em .7em;
    margin-bottom: 1.4em;
}
.gac-home .gac-hero__inner .gac-btn,
.gac-btn {
    border-radius: var(--gac-radius);
}

@media (max-width: 749px) {
    .gac-home .gac-hero {
        min-height: 460px;
    }
    .gac-home .gac-hero__title {
        font-size: 1.15em;
    }
    .site-header .storefront-primary-navigation > .col-full {
        padding-left: 1em;
        padding-right: 1em;
    }
}

/* Storefront imprime ses couleurs de personnalisation en style inline, apres
   toutes les feuilles : seul !important reprend la main sur le pied de page. */
.site-footer,
.site-footer p,
.site-footer .widget {
    color: #e8e5e0 !important;
}
.site-footer a,
.site-footer a:not(.button),
.site-footer .gac-footer-nav__list a,
.site-footer .site-info,
.site-footer .site-info a {
    color: #e8e5e0 !important;
}
.site-footer .gac-footer-nav__title {
    color: #ffffff !important;
}


/* ============================================================
   Passe de calage
   ============================================================ */

/* En-tete : respirer en haut et en bas */
.site-header .storefront-primary-navigation > .col-full {
    padding-top: 1.2em;
    padding-bottom: 1.2em;
}

/* Hero : bloc a mi-hauteur mais cale a gauche */
.gac-home .gac-hero__overlay {
    justify-content: flex-start;
    padding-left: 3.4em;
    padding-right: 3.4em;
}
.gac-home .gac-hero__inner {
    text-align: left;
}

.single-product div.product .summary > *:first-child {
    margin-top: 0;
}
.single-product .product_title {
    border: 0;
    padding-top: 0;
}

/* Le bouton d'achat reprend la couleur de marque.

   LES ANGLES SONT DROITS. Un rayon posé ici bat en silence les deux règles
   qui posent `0` plus haut - celle de Storefront et la nôtre - parce
   qu'elles ne nomment pas `.single_add_to_cart_button`. */
.single-product form.cart .single_add_to_cart_button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
    background-color: var(--gac-primary);
    color: #fff;
    border-radius: 0;
}
.single-product form.cart .single_add_to_cart_button:hover {
    background-color: var(--gac-primary-dark);
    color: #fff;
}

/* Options de variante : boutons libellés */


/* Pied de page : titre discret, liens en colonne alignes a gauche */
.gac-footer-nav {
    text-align: left;
    padding: 2.5em 0 1em;
}
.gac-footer-nav__title {
    font-size: .8em;
    letter-spacing: .14em;
    margin-bottom: 1.2em;
}
.gac-footer-nav__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 240px));
    justify-content: start;
    gap: .55em 3em;
}
@media (max-width: 749px) {
    .gac-footer-nav__list { grid-template-columns: 1fr; }
}

/* Titre du hero */
.gac-home .gac-hero__title {
    font-size: 1.25em;
    letter-spacing: .02em;
    padding: .35em .6em;
}
@media (max-width: 749px) {
    .gac-home .gac-hero__title { font-size: 1em; }
}

/* ============================================================
   Recherche : modale avec resultats produits en direct
   ============================================================ */
.gac-account {
    display: inline-flex;
    align-items: center;
    padding: .5em;
    color: var(--gac-ink);
    line-height: 0;
}
.gac-account:hover { color: var(--gac-primary); }
.site-header .gac-search-toggle { margin-left: auto; }
.site-header .gac-account { margin-left: 0; }


/* Le tiroir et la barre collante sont en position fixe sur tout l'ecran :
   sans cette regle, leur display:flex annule l'attribut hidden et une couche
   invisible avalait tous les clics de l'en-tete. */
.gac-drawer[hidden],
.gac-sticky[hidden] {
    display: none !important;
}

/* Panier : icone fine, compteur en pastille */
.site-header-cart .gac-cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: .5em;
    color: var(--gac-ink);
    line-height: 0;
}
.site-header-cart .gac-cart-link:hover { color: var(--gac-primary); }
.site-header-cart .gac-cart-link::before,
.site-header-cart .gac-cart-link::after {
    display: none;
}
/* La pastille du panier : un rond de 20 px de côté (`aspect-ratio: 1`,
   `border-radius: 50%`), posé à 4,5 px du haut et 2,5 px de la droite de la
   boîte de 44 px de l'icône, chiffre à 10 px centré par `display: flex`.

   Pas de valeurs en `em` du lien : 1,35em de 0,62em donnerait un rond de
   13,4 px, un tiers trop petit, et un chiffre calé par `line-height` et
   `text-align` reste haut et à gauche dans le rond.

   Le sélecteur porte la chaîne complète : Storefront pose
   `.site-header-cart .cart-contents span { display: inline }` dans
   `woocommerce.css`, soit [0,2,1], qui bat `.gac-cart-count` [0,1,0] quel que
   soit l'ordre des feuilles. Sans la chaîne, le `display: flex` est perdu et
   le chiffre redevient une boîte en ligne posée sur la ligne de base. */
.site-header-cart .cart-contents .gac-cart-count {
    position: absolute;
    top: 4.5px;
    right: 2.5px;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    padding: 0 .2em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 10px;
    line-height: 1;
    font-family: 'Inter', sans-serif;
    /* Deux couches, comme la source (cart-bubble.liquid) : le fond dans le
       ::before, le chiffre au-dessus, parce que chacune bouge pour son
       compte au changement du compte (voir « 5. La pastille du panier »).
       `isolation` garde le ::before sous le chiffre et rien d'autre. */
    isolation: isolate;
}

/* ============================================================
   Storefront fait flotter la colonne de droite : tout ce qui
   suit le resume remontait dessous et se superposait, ce qui
   volait les clics des vignettes et des variantes.
   ============================================================ */
.single-product div.product::after {
    content: "";
    display: table;
    clear: both;
}
.single-product .gac-accordion,
.single-product .gac-highlights,
.single-product .related,
.single-product .upsells {
    clear: both;
    float: none;
    width: 100%;
    position: relative;
    z-index: 1;
}
.single-product div.product .summary {
    position: relative;
    z-index: 2;
    /* La source pose 14 px de `padding-block-start` sur le groupe qui ouvre
       sa colonne d'achat (`group-block`, releve du 29/08/2026 a 390 ET
       1440) : le titre commence 14 px sous le haut de la colonne. En
       rembourrage et non en marge : il suit la colonne quand elle est
       collante, exactement comme chez elle. */
    padding-top: 14px;
}
/* Storefront ferme ses flottants par `.single-product div.product
   { position: relative; overflow: hidden }` (woocommerce.css). Le clearfix
   `::after` ci-dessus fait déjà ce travail, et l'`overflow` faisait de
   `div.product` un conteneur de défilement, ce qui interdisait à la colonne
   d'achat de coller. Même spécificité [0,2,1] que la règle de Storefront :
   c'est l'ordre des feuilles qui tranche, la nôtre est chargée après. */
.single-product div.product {
    overflow: visible;
}
/* Le conteneur des deux colonnes, posé par `dgc_colonnes_ouverture()`
   (inc-product.php). Il borne le sticky de la colonne d'achat au bas de la
   mosaïque de photos, comme la rangée de grille de la source : sans lui, le
   bloc contenant serait `div.product` tout entier et la colonne resterait
   épinglée par-dessus l'accordéon, les sections éditoriales et « Vous
   aimerez aussi ». `flow-root` contient les deux flottants sans créer de
   conteneur de défilement - ce que `overflow: hidden` aurait fait. */
.single-product .dgc-fiche__colonnes {
    display: flow-root;
}


.single-product .flex-direction-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}
.single-product .flex-direction-nav a {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.8em;
    height: 2.8em;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    text-indent: -9999px;
    overflow: hidden;
    z-index: 5;
    opacity: 0;
    transition: opacity .2s ease;
}
.single-product .flex-direction-nav .flex-prev { left: .8em; }
.single-product .flex-direction-nav .flex-next { right: .8em; }
.single-product .flex-direction-nav a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: .7em;
    height: .7em;
    border-top: 2px solid var(--gac-ink);
    border-right: 2px solid var(--gac-ink);
    text-indent: 0;
}
.single-product .flex-direction-nav .flex-next::before {
    transform: translate(-65%, -50%) rotate(45deg);
}
.single-product .flex-direction-nav .flex-prev::before {
    transform: translate(-35%, -50%) rotate(-135deg);
}

/* Variantes en photo */

/* Hero : le titre est en inline-block pour que le fond noir epouse le texte,
   le bouton doit donc etre force sur sa propre ligne. */
.gac-home .gac-hero__title {
    display: table;
}
.gac-home .gac-hero__inner .gac-btn {
    display: inline-block;
    margin-top: .4em;
}


/* Pas de lien « Effacer » : une option reste toujours sélectionnée.

   Le champ de quantité N'EST PAS masqué : la fiche en porte un, boîte de
   126 x 52 à gauche du bouton, qui partage donc sa rangée au lieu d'être en
   pleine largeur. Voir .dgc-qte en fin de feuille. */
.single-product form.cart .reset_variations {
    display: none !important;
}

/* Le prix de la variation, sous le sélecteur : un seul prix est affiché,
   celui du haut, et c'est lui qui suit la variante choisie (`lierPrix()` dans
   gac-ui.js). WooCommerce en imprime un second ici. */
.single-product .woocommerce-variation-price {
    display: none;
}

/* Ni compteur de stock ni lien de réinitialisation : une pastille
   « En stock » suffit, sans nombre d'unités. */
.single-product .summary p.stock,
.single-product .woocommerce-variation-availability,
.single-product a.reset_variations {
    display: none !important;
}






/* ============================================================
   Fiche produit : bloc a propos et questions frequentes
   ============================================================ */
.gac-about {
    position: relative;
    margin: 3.5em 0 0;
    padding: 5em 1.5em;
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
}
.gac-about::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(26, 26, 26, .55);
}
.gac-about__inner {
    position: relative;
    max-width: 58rem;
    margin: 0 auto;
}
.gac-about__title {
    color: #fff;
    font-size: 2em;
    margin-bottom: .8em;
}
.gac-about p {
    color: #f2f0ec;
    margin-bottom: 1.2em;
}

.gac-faq {
    margin: 3.5em auto 0;
    max-width: 54rem;
}
.gac-faq__title {
    text-align: center;
    font-size: 1.8em;
    margin-bottom: 1.2em;
}
.gac-accordion--faq .gac-accordion__title {
    text-transform: none;
    letter-spacing: 0;
    font-family: inherit;
    /* 500, comme le reste des questions : les trois FAQ du site partagent le
       même `--font-h5--weight`. */
    font-weight: 500;
}

/* ============================================================
   Volet du panier, refait
   ============================================================ */
.gac-cart-lines {
    list-style: none;
    margin: 0 0 1.5em;
    padding: 0;
}
.gac-cart-line {
    display: flex;
    gap: 15px;
    padding: 1em 0;
    /* Pas de filet entre les lignes : la source n'en peint pas. La vignette
       est a x20 pour un contenu a x16, comme chez elle. */
    border-bottom: 0;
}
.gac-cart-line__media { margin-left: 4px; }
/* La vignette du volet, formule de la source (styles.css de Horizon,
   `.cart-items__table-row` : colonne media a
   `clamp(2.5rem, 15cqi, 7.5rem)`, le conteneur de requete etant
   `.cart-items`, largeur du volet moins son rembourrage). A 400 px de volet
   et 24 px de marges, cela tombe sur 53 px - la meme valeur a 390 qu'a 1440.
   Recopiee telle quelle plutot que figee en pixels. */
.gac-cart-line__media img {
    width: clamp(2.5rem, 15cqi, 7.5rem);
    height: clamp(2.5rem, 15cqi, 7.5rem);
    object-fit: cover;
    display: block;
}
.gac-cart-line__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .25em;
}
.gac-cart-line__name a {
    color: var(--gac-ink);
    font-size: .95em;
    line-height: 1.3;
}
.gac-cart-line__variant {
    color: #767676;
    font-size: .82em;
}
.gac-cart-line__variant p { margin: 0; }
.gac-cart-line__price {
    font-size: .95em;
}
.gac-cart-line__qty {
    display: flex;
    align-items: center;
    gap: .8em;
    margin-top: .3em;
}
.gac-qty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2em;
    height: 2.2em;
    border: 1px solid var(--gac-border);
    border-radius: 2px;
    font-size: .85em;
}
.gac-cart-line__remove {
    color: #999;
    font-size: 1.2em;
    line-height: 1;
    text-decoration: none;
}
.gac-cart-line__remove:hover { color: var(--gac-primary); }

.gac-cart-foot {
    padding-top: .4em;
}
.gac-cart-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 1.05em;
    margin-bottom: .2em;
}
.gac-cart-total strong { font-size: 1.15em; }
.gac-cart-shipping {
    color: #777;
    font-size: .88em;
    margin-bottom: 1.1em;
}
.gac-cart-checkout {
    display: block;
    width: 100%;
    background: var(--gac-ink);
    color: #fff;
    text-align: center;
    padding: 1.05em 1.2em;
    font-size: .95em;
    font-weight: 400;
    letter-spacing: .01em;
    border-radius: 2px;
    text-decoration: none;
}
.gac-cart-checkout:hover {
    background: #000;
    color: #fff;
}
.gac-cart-badges {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4em;
    margin: 1.1em 0 .5em;
    padding: 0;
}
.gac-cart-badges li {
    border: 1px solid var(--gac-border);
    border-radius: 3px;
    padding: .25em .6em;
    font-size: .68em;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #666;
}
.gac-cart-secure {
    text-align: center;
    color: #767676; /* #999 = 2.85:1 sur blanc, illisible */
    font-size: .78em;
    margin: 0;
}

/* Texte des boutons plus fin */
.button,
button,
input[type="submit"],
.gac-btn,
.single-product form.cart .single_add_to_cart_button {
    font-weight: 400;
    letter-spacing: .1em;
}

/* ============================================================
   Barre d'achat collante
   ------------------------------------------------------------
   600 px de large, pas de rayon, une ombre etroite, un
   rembourrage symetrique, et une bascule a 750 px PILE - pas
   767. Sous 750 la photo reste, la barre se colle au bas de la
   fenetre sur toute la largeur, et le bouton se reduit a son
   icone dans un carre de 52 px.
   ============================================================ */
.gac-sticky {
    position: fixed;
    z-index: 7;                /* calc(var(--layer-sticky) - 1), sous l'entete */
    bottom: 20px;
    left: 50%;
    right: auto;
    display: flex;
    align-items: center;
    gap: 14.4px;               /* --gap-md, 0,9rem */
    width: 600px;
    max-width: none;
    background: #fff;
    border: 0;
    border-radius: 0;          /* --style-border-radius-buttons-primary: 0 */
    padding: 11.2px;           /* --padding-sm, 0,7rem, sur les quatre cotes */
    box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
    opacity: 0;
}
.gac-sticky.is-visible {
    opacity: 1;
}
/* PAS DE FILET autour de la barre : seule l'ombre portée l'entoure. C'est
   un choix délibéré, pas un oubli - ne pas ajouter de `::before` peignant un
   filet à la passe suivante. */
.gac-sticky__media {
    flex-shrink: 0;
    aspect-ratio: 1;
    height: 52px;              /* --height-buy-buttons : 16 + 20 + 16 */
    overflow: hidden;
    border-radius: 0;
}
.gac-sticky__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}
.gac-sticky__body {
    flex: 1;
    display: block;
    min-width: 0;
}
.gac-sticky__name {
    display: block;
    font-size: 14px;
    line-height: 22.4px;
    font-weight: 400;
    color: rgb(0 0 0 / .81);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gac-sticky__variant {
    display: block;
    font-size: 14px;
    line-height: 22.4px;
    color: rgb(0 0 0 / .7);    /* --opacity-subdued-text : 70 % */
    margin-top: 2px;           /* --margin-3xs, 0,125rem */
}
.gac-sticky__price {
    font-size: 14px;
    line-height: 22.4px;
    font-weight: 400;
    color: rgb(0 0 0 / .81);
    white-space: nowrap;
}
.gac-sticky__price del {
    color: #aaa;
    margin-left: .35em;
}
.gac-sticky__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4.8px;                /* l'ecart icone-libelle de `.add-to-cart-text` */
    height: 52px;
    background: #000;
    color: #fff;
    border: 0;
    border-radius: 0;
    padding: 16px 24px;
    font-size: 14px;
    line-height: 22.4px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    box-shadow: none;
    white-space: nowrap;
    position: relative;
}

/* --- La bascule est a 750 px, pas a 767 --------------------------- */
@media (max-width: 749px) {
    .gac-sticky {
        bottom: 0;
        width: 100%;
        max-width: none;
        border-radius: 0;
    }
    /* La photo RESTE : c'est notre `display: none` qui la faisait disparaitre. */
    .gac-sticky__media {
        display: block;
    }
    .gac-sticky__button {
        width: 52px;
        padding: 16px;
    }
    .gac-sticky__button .gac-sticky__button-texte {
        display: none;
    }
}

/* --- Sous 390 px, ni titre ni prix barre -------------------------- */
@media (max-width: 389px) {
    .gac-sticky__price del {
        display: none;
    }
    .gac-sticky__name {
        display: none;
    }
    /* Sauf s'il n'y a qu'une option, ou aucune : le titre reste, et c'est la
       variante qui se coupe. */
    .gac-sticky__body[data-singleton="true"] .gac-sticky__name,
    .gac-sticky__body[data-single-option="true"] .gac-sticky__name {
        display: block;
    }
    .gac-sticky__body[data-single-option="true"] .gac-sticky__variant {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Volet du panier : le pied suit la liste des produits, il ne colle PAS en
   bas du volet. La source, elle, l'epingle en bas - c'est un ecart assume
   pour cette boutique (choix d'Alexandre, 29/08/2026) : le bouton
   « Terminer ma commande », les frais de port offerts et la mention de
   paiement securise se lisent juste sous les articles. Le volet entier
   defile quand le panier est long. */
.gac-drawer__body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    /* Les lignes commencent a ~59 px du haut chez la source : pas de
       rembourrage haut sur le corps, 4 px seulement sur la premiere ligne. */
    padding-top: 0;
    padding-bottom: 0;
}
.gac-drawer__body .gac-cart-line {
    padding-top: 4px;
}
.gac-drawer__body > .widget_shopping_cart_content {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}
.gac-drawer__body .gac-cart-lines {
    /* Conteneur de requete de la source (`.cart-items`) : c'est lui que le
       `15cqi` de la vignette mesure. */
    container-type: inline-size;
    flex: 0 0 auto;
    margin-bottom: 0;
    padding-right: .2em;
}
.gac-drawer__body .gac-cart-foot {
    flex: 0 0 auto;
    /* Rythme du pied de la source (releve au calcule le 29/08/2026) :
       filet, 20 px, rangee Total (28), 20 px, bouton de 52, 10 px, cartes de
       24, 16 px de marge basse. */
    padding: 20px 0 16px;
    /* Le seul filet du volet chez la source : 1 px a 6 % de noir au-dessus
       des totaux (`.cart-totals`), pas le gris de --gac-border. */
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: #fff;
}
.gac-drawer .gac-cart-total { margin-bottom: 0; min-height: 28px; }
.gac-drawer .gac-cart-checkout {
    margin-top: 20px;
    /* 52 px de haut comme chez elle : 19 + 14 + 19 (la typographie des
       boutons impose sa hauteur de ligne, on regle par le rembourrage). */
    padding: 19px 32px;
    font-size: 14px;
}
.gac-drawer .gac-cart-badges svg { height: 24px; }
.gac-drawer .gac-cart-badges { margin: 10px 0 0; }
/* Le <p> des boutons de coeur reste vide dans le volet : sa marge decalait
   le bouton de 10 px vers le haut. */
.gac-drawer .woocommerce-mini-cart__buttons { margin: 0; }
/* La vignette est 5 px sous le haut de la ligne chez la source. */
.gac-drawer .gac-cart-line__media { margin-top: 5px; }

/* La pastille du titre du volet : le compte en vert, comme la source -
   rond de 20, chiffre 13, cachee panier vide. */
.gac-drawer__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    border-radius: 50%;
    background: var(--dgc-vert-survol);
    color: #000;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1;
    font-weight: 400;
}
.gac-drawer__count--vide { display: none; }

/* Le total de la ligne, en haut a droite (cart-items__price de la source). */
.gac-cart-line__body { position: relative; }
.gac-cart-line__total {
    position: absolute;
    top: 4px;
    right: 0;
    font-size: 14px;
    line-height: 1;
    color: var(--gac-ink);
}
/* Le nom laisse la place du prix a sa droite, comme chez elle. */
.gac-cart-line__name { padding-right: 56px; display: block; }
.gac-cart-badges li {
    border: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
}
.gac-cart-badges svg {
    height: 22px;
    width: auto;
    display: block;
}

/* ============================================================
   Bandeau de reassurance et bas de pied de page
   ============================================================ */
.gac-trust {
    background: #faf8f7;
    padding: 3em 0;
}
.gac-trust-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2em;
}
.gac-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5em;
}
.gac-trust-item svg { color: var(--gac-ink); }
.gac-trust-title {
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .92em;
}
.gac-trust-text {
    color: #666;
    font-size: .86em;
    line-height: 1.45;
    max-width: 22rem;
}

.gac-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5em;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, .15);
    margin-top: 1.6em;
    padding-top: 1.4em;
}
.gac-footer-logo img {
    height: 34px;
    width: auto;
    filter: invert(1) brightness(2);
}
.gac-footer-pay {
    display: flex;
    align-items: center;
    gap: .8em;
    margin-left: auto;
}
.gac-footer-pay > span {
    color: rgba(255, 255, 255, .7);
    font-size: .8em;
}
.gac-footer-pay ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .4em;
    margin: 0;
    padding: 0;
}
.gac-footer-pay svg {
    height: 24px;
    width: auto;
    display: block;
}
@media (max-width: 900px) {
    .gac-trust-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 749px) {
    .gac-trust-grid { grid-template-columns: 1fr; }
    .gac-footer-bottom { justify-content: center; }
    .gac-footer-pay { margin-left: 0; }
}

/* Bouton de commande : couleur de marque et typographie du site, comme les
   autres boutons. Le noir venait de l'exemple Brelmont. */
.gac-cart-checkout {
    background: var(--gac-primary);
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .95em;
    border-radius: 3px;
}
.gac-cart-checkout:hover {
    background: var(--gac-primary-dark);
}
/* Bandeau de reassurance sur fond blanc */
.gac-trust {
    background: #fff;
    border-top: 1px solid var(--gac-border);
}

/* Produits similaires detaches de l'accordeon. Pas de filet au-dessus : la
   source enchaine la premiere section editoriale et « Vous aimerez aussi »
   sans separateur, le trait venait de nous. */
.single-product .related {
    margin-top: 3.5em;
    padding-top: 2.5em;
}

/* Le bouton du sticky garde la famille du site ; sa couleur, son rayon, son
   corps et son rembourrage sont poses plus haut. Ni capitales, ni
   interlettrage, ni rayon : ne pas en reintroduire ici en `!important`. */
.gac-sticky__button {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Bouton du volet : la regle noire de la premiere version tenait encore */
.gac-drawer .gac-cart-checkout,
.gac-cart-checkout {
    background: var(--gac-primary) !important;
    color: #fff !important;
}
.gac-drawer .gac-cart-checkout:hover,
.gac-cart-checkout:hover {
    background: var(--gac-primary-dark) !important;
}
.gac-cart-line__remove.is-busy { opacity: .4; pointer-events: none; }

/* ============================================================
   Effet au survol des boutons, absent jusqu'ici
   ============================================================ */
.button,
button,
input[type="submit"],
.gac-btn,
.gac-cart-checkout,
.gac-sticky__button,
.single-product form.cart .single_add_to_cart_button,
.dgc-search__view-all {
    transition: background-color .2s ease, color .2s ease, transform .12s ease,
        box-shadow .2s ease;
}
.gac-btn:hover,
.gac-cart-checkout:hover,
.gac-sticky__button:hover,
.single-product form.cart .single_add_to_cart_button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover {
    background-color: var(--gac-primary-dark) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(138, 82, 82, .28);
}
.gac-btn:active,
.gac-sticky__button:active,
.single-product form.cart .single_add_to_cart_button:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* PAS D'AGRANDISSEMENT AU SURVOL.
   La carte ne bouge pas d'un pixel au passage du curseur - pas de mise a
   l'echelle de 3 %, pas de transition. Ce qui change au survol, c'est l'image
   quand le curseur passe sur une pastille de couleur, et c'est le mu-plugin
   des nuanciers qui s'en charge. Aucune capture au repos ne montre cet ecart :
   il se verifie au survol. */
.woocommerce ul.products li.product a img {
    transition: none;
}
.woocommerce ul.products li.product:hover a img {
    transform: none;
}


/* Fil d'Ariane : pas d'icone de maison, aligne sur la marge de contenu */
.woocommerce-breadcrumb .fa,
.woocommerce-breadcrumb i,
.woocommerce-breadcrumb svg,
.woocommerce-breadcrumb .breadcrumb-home-icon,
.rank-math-breadcrumb .fa {
    display: none !important;
}
.woocommerce-breadcrumb::before {
    content: none !important;
}
.woocommerce-breadcrumb {
    padding-left: 0;
    margin-left: 0;
    text-align: left;
}

/* ============================================================
   Barre d'outils de collection : filtres et tri
   ============================================================ */
.gac-toolbar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 8px 0;
    border-bottom: 0;
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 22.4px;
    color: rgba(0, 0, 0, .6);
}
/* Les facettes en ligne : « Disponibilité » et « Prix », a gauche.
   L'ecart entre les deux sommaires vaut 15,6 px REELLEMENT MESURES, et non
   les 20 d'un `gap` declare : les enfants portent leur propre marge negative.
   On reproduit ce qui se voit, pas ce qui est ecrit. */
.gac-toolbar__facettes {
    display: flex;
    align-items: center;
    gap: 15.6px;
    margin-right: 12.8px;
}
.gac-facette { position: relative; }
.gac-facette > summary {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 11.2px 0;
    color: rgba(0, 0, 0, .6);
    cursor: pointer;
    list-style: none;
    font-size: 14px;
    line-height: 22.4px;
}
.gac-facette > summary::-webkit-details-marker { display: none; }
.gac-facette__label {
    margin-right: 4.8px;
    color: rgba(0, 0, 0, .81);
}
/* LE STATUT : la valeur retenue, a cote du libelle de la facette.
   14 px, GRAISSE 500, rgba(0,0,0,.81), 8 px de marge de chaque cote - ce qui
   fait 12,8 apres le libelle (qui porte deja 4,8 de marge droite) et 8 avant
   le chevron. */
.gac-facette__statut {
    margin: 0 8px;
    font-weight: 500;
    color: rgba(0, 0, 0, .81);
    white-space: nowrap;
}
/* Deux cases cochees ne s'enumerent pas : le compte va dans une pastille -
   20 px de haut minimum, coins ronds, fond a 10 % du texte, chiffre de
   13 px. */
.gac-facette__statut--bulle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 20px;
    background: rgba(0, 0, 0, .1);
    font-size: 13px;
    font-weight: 400;
}
/* « Tout effacer », entre les facettes et le compte. 120,2 x 44 chez la
   source, a 32,8 de la derniere facette - dont 12,8 viennent deja de la
   marge droite du bloc des facettes. */
.gac-toolbar__tout-effacer {
    position: relative;
    display: flex;
    align-items: center;
    height: 44px;
    margin-left: 20px;
    padding: 8px 20px;
    color: rgba(0, 0, 0, .6);
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
    transition: color var(--dgc-anim) ease-in-out;
}
.gac-toolbar__tout-effacer:hover {
    color: rgb(0, 0, 0);
    text-decoration: underline;
}
/* Le filet qui separe « Tout effacer » des facettes. Un pixel de large,
   14 px de haut, centre sur la rangee, pose sur le bord gauche du bouton, a
   240/255 de gris - soit notre `--gac-border`. */
.gac-toolbar__tout-effacer::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: 14px;
    transform: translateY(-50%);
    border-left: 1px solid var(--gac-border);
}
.gac-facette[open] > summary .gac-caret { transform: rotate(180deg); }
/* MOUVEMENT. Le chevron tourne en .125s ease-in-out et ANIME SA COULEUR en
   meme temps : ferme il est a rgba(0,0,0,.5) et le sommaire a rgba(0,0,0,.6),
   ouverts les deux passent au noir plein. Pas de rotation seule. */
/* Le commentaire ci-dessus disait deja les deux couleurs, mais rien ne posait
   celle du chevron : il heritait des 60 % du sommaire. Releve le 29/08/2026,
   la source le peint a 50 %. */
.gac-facette > summary .gac-caret { color: rgba(0, 0, 0, .5); }
.gac-facette[open] > summary .gac-caret,
.gac-facette > summary:hover .gac-caret { color: rgb(0, 0, 0); }
/* 13,6 px de cote (`--icon-size-xs`), au bureau comme dans le tiroir : la
   boite de 14 venait de l'attribut du fichier, pas d'un releve. */
.gac-caret {
    width: 13.6px;
    height: 13.6px;
    flex: 0 0 auto;
    transition: transform var(--dgc-anim) ease-in-out, color var(--dgc-anim) ease-in-out;
}
.gac-facette > summary { transition: color var(--dgc-anim) ease-in-out; }
.gac-facette[open] > summary,
.gac-facette[open] > summary .gac-facette__label { color: rgb(0, 0, 0); }
/* MOUVEMENT. Le panneau se DEPLIE : `block-size` de 0 a sa hauteur,
   opacite de 0 a 1 et `padding-block` de 0 a sa valeur, en .2s ease-in-out.
   Il n'apparait pas d'un coup.

   Le panneau est en position absolue, donc `::details-content` ne le clippe
   pas : c'est l'element lui-meme qui doit porter la transition.
   `interpolate-size` autorise l'interpolation vers `auto`, et
   `content-visibility` en `allow-discrete` retarde la disparition jusqu'a la
   fin du repli.

   `:not(:focus-within)` coupe la transition : sans cela le panneau se
   replierait aussi quand la page rend l'element sans geste du visiteur. */
/* GEOMETRIE DU PANNEAU
   -------------------------------------------------------------------
   Pas de filet, coins de 14 px, ombre basse et large. La largeur n'est pas
   fixe : celui de « Disponibilité » se cale sur son contenu (176,9 px) quand
   celui de « Prix » en fait 360.

     panneau Disponibilité   176,9 x 68,8   coins 14   ombre 0 4px 20px .15
       cases 16 x 16 a 12,8 du bord gauche, 12,8 du haut, 11,2 entre les deux
     panneau Prix            360 x 106
       deux champs de 149,1 x 48, « à » de 7,9 entre eux, 13,8 de rembourrage

   MOUVEMENT : LE PLI DU MENU DE TRI.
   ---------------------------------------------------------
   Animer `block-size` de 0 a `auto` repose sur `interpolate-size:
   allow-keywords`. Chrome le connait, Safari et Firefox non : chez eux le
   panneau apparaitrait d'un coup. Et dans un `<details>`, ce pli-la a un
   second defaut : a la fermeture le navigateur pose `content-visibility:
   hidden` sur `::details-content`, les animations d'un sous-arbre saute ne
   progressent pas, et le repli reste gele a son image de depart - le panneau
   garde sa hauteur et son opacite pleine. Invisible, mais l'ouverture
   suivante n'a alors plus rien a deplier : « l'animation ne marche que la
   premiere fois ».

   Le menu de tri deplie `grid-template-rows: 0fr -> 1fr`. Il ne demande
   aucune propriete recente, il n'est pas dans un `<details>`, et il anime a
   chaque coup sur les trois moteurs. On lui prend sa mecanique :

     - le panneau est une grille d'une rangee, de 0fr a 1fr ;
     - `.gac-facette__panneau-inner` clippe le debordement et porte le
       rembourrage - le pli veut un enfant unique ;
     - `visibility` en marche d'escalier retardee garde le panneau hors du
       parcours du clavier une fois replie, et - c'est le meme reglage que le
       menu de tri - ne laisse rien de peint derriere lui. */
.gac-facette__panneau {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 30;
    width: max-content;
    min-width: 120px;
    max-width: 90vw;
    background: #fff;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    transition: grid-template-rows var(--dgc-anim-panneau) ease-in-out,
        opacity var(--dgc-anim-panneau) ease-in-out,
        visibility 0s linear var(--dgc-anim-panneau);
}
.gac-facette[open] > .gac-facette__panneau {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    transition: grid-template-rows var(--dgc-anim-panneau) ease-in-out,
        opacity var(--dgc-anim-panneau) ease-in-out,
        visibility 0s linear;
}
/* CE QUI EMPECHAIT LE PANNEAU DE SE REPLIER PLUS D'UNE FOIS.
   Des que `[open]` tombe, le navigateur pose `content-visibility: hidden` sur
   `::details-content` et gele les animations du sous-arbre. On lui rend le
   rendu : ce n'est pas lui qui cache le panneau ferme, c'est la rangee de
   grille a 0fr, le clip de l'enfant et `visibility`. */
.gac-facette::details-content { content-visibility: visible; }
/* L'enfant qui clippe. Il ne porte AUCUN rembourrage : un rembourrage y
   survivrait au repli - la rangee de grille met sa hauteur de contenu a zero,
   pas ses 25,6 px de rembourrage - et le panneau ferme garderait une bande de
   25,6 px de fond, de coins et d'ombre. Ce sont les enfants qui ecartent, par
   leurs marges. Le plafond de hauteur descend ici (`max-height: 300px`,
   `overflow-y: hidden`). */
.gac-facette__panneau-inner {
    overflow: hidden;
    min-height: 0;
    max-height: 300px;
    padding: 0;
}
/* Le panneau du prix : 360 de large, 13,8 autour des champs, et c'est la
   phrase de plafond qui porte les 8 px du bas. */
.gac-facette__panneau--prix { width: 360px; }
.gac-facette__panneau--prix .gac-filters__range { margin: 13.8px; }
/* AUCUN REMBOURRAGE LATERAL : SES ENFANTS LE PORTENT.
   Panneau Disponibilité avec un filtre actif : 176,9 x 104, les deux lignes
   commencent a 12,8 du bord, et le bloc « Effacer » fait la LARGEUR ENTIERE
   du panneau - c'est son propre rembourrage droit de 12,8 qui ecarte le mot
   du bord.

     avec filtre actif   12,8 | 16 | 11,2 | 16 | 12,8 | 35,2  = 104
     sans filtre actif                                        = 68,8 */
.gac-facette__panneau--dispo .gac-facette__form { margin: 12.8px; }
/* Le bouton n'existe plus que dans le <noscript> du panneau : sans JavaScript,
   cocher une case ne peut pas soumettre toute seule. */
.gac-facette__submit {
    margin-top: 1em;
    width: 100%;
}
/* « Effacer », aligne a droite, 12,8 px a droite et en bas
   (padding 0 12.8px 12.8px 0). Souligne au survol. */
.gac-facette__effacer { margin-top: 0; }
/* Le survol d'un sommaire et le focus : le repli ne s'anime PAS quand le
   geste ne vient pas du visiteur (rendu de la page, redimensionnement).
   `details:not(:focus-within) .details-content { transition: none; }`. */
.gac-facette:not(:focus-within) > .gac-facette__panneau { transition: none; }
/* Une fois ouvert ET focalise, le panneau laisse deborder
   (`&:focus-within { overflow-y: visible; }`), ce qui permet a un champ de
   sortir du cadre. Le clip revient des la fermeture. */
.gac-facette[open] > .gac-facette__panneau-inner:focus-within { overflow: visible; }
/* Le bouton n'existe plus que dans le <noscript> du panneau : sans JavaScript,
   cocher une case ne peut pas soumettre toute seule. */
.gac-facette__submit {
    margin-top: 1em;
    width: 100%;
}
/* « Effacer », aligne a droite, 12,8 px a droite et en bas
   (padding 0 12.8px 12.8px 0). Souligne au survol. */
.gac-facette__effacer {
    display: flex;
    justify-content: flex-end;
    padding: 0 12.8px 12.8px 0;
}
.gac-facette__effacer a {
    color: rgba(0, 0, 0, .81);
    text-decoration: none;
    font-size: 14px;
    line-height: 22.4px;
}
.gac-facette__effacer a:hover { text-decoration: underline; }

/* Le bouton du telephone porte « Filtrer », pas « Afficher les filtres » :
   62 px de large, contre 122 pour le libelle long. */
.gac-toolbar__filters {
    display: none;
    align-items: center;
    gap: 4.8px;
    background: none;
    border: 0;
    padding: 0;
    color: rgba(0, 0, 0, .81);
    cursor: pointer;
    box-shadow: none;
    font-size: 14px;
    line-height: 22.4px;
    letter-spacing: 0;
    text-transform: none;
}
.gac-toolbar__filters:hover { background: none; color: rgba(0, 0, 0, .81); }
/* L'icone est rendue a 20 px de cote (`--icon-size-sm`), pas aux 21 de son
   `viewBox` : le trace se ramene alors a 11,4 de large, comme chez elle. */
.gac-toolbar__filters > svg { width: 20px; height: 20px; flex: 0 0 auto; }
/* Le bouton deborde de 3 px A GAUCHE de la marge de page
   (`.facets-toggle__wrapper { margin-left: var(--icon-offset) }`, -3px) :
   c'est l'air que le dessin de l'icone laisse dans sa boite, repris pour que
   l'encre tombe sur la marge. Et pas de coins arrondis : c'est un bouton nu. */
.gac-toolbar__filters {
    margin-left: -3px;
    border-radius: 0;
}
/* La pastille du nombre de filtres, apres le mot. Le bouton, lui, ne change
   NI de couleur NI de graisse : ce vert en 600 etait une invention. */
.gac-toolbar__compte {
    position: relative;
    display: grid;
    place-content: center;
    width: 20px;
    aspect-ratio: 1;
    flex: 0 0 auto;
    border: 1px solid #fff;
    border-radius: 50%;
    line-height: normal;
    color: rgba(0, 0, 0, .81);
}
.gac-toolbar__compte-fond {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: rgb(0 0 0 / .1);
}
.gac-toolbar__compte-texte {
    position: relative;
    aspect-ratio: 1 / 1;
    font-size: 11px;
    line-height: normal;
    font-weight: 400;
}
/* Le compte est pousse a droite, colle au tri, a 945 px de la derniere
   facette - et non juste apres le bouton des filtres. */
.gac-toolbar__count {
    display: flex;
    align-items: center;
    height: 44px;
    margin-left: auto;
    color: rgba(0, 0, 0, .6);
    font-size: 14px;
    line-height: 22.4px;
}

.gac-sort { position: relative; margin-left: 20px; }
.gac-sort__toggle {
    display: inline-flex;
    align-items: center;
    height: 44px;
    background: none;
    border: 0;
    padding: 11.2px 0;
    color: rgba(0, 0, 0, .6);
    cursor: pointer;
    box-shadow: none;
    font-size: 14px;
    line-height: 22.4px;
    letter-spacing: 0;
    text-transform: none;
}
.gac-sort__toggle:hover,
.gac-facette > summary:hover { background: none; color: rgb(0, 0, 0); }
.gac-sort__label { color: rgba(0, 0, 0, .81); margin-right: 4.8px; }
/* La valeur choisie ne s'affiche qu'au telephone. */
.gac-sort__valeur { display: none; }
.gac-sort__toggle strong { font-weight: 400; }

/* Les deux boutons de densite de grille, 28 x 28. La gouttiere vaut 4,8 au
   bureau et 8 sous 750 px, et la paire deborde de 3 px A DROITE de la marge de
   page - `.column-options-wrapper { margin-right: -3px }` chez elle, l'ecart
   entre le bord de la boite et l'encre du dessin. */
.gac-colonnes {
    display: flex;
    align-items: center;
    gap: 4.8px;
    margin: 0 -3px 0 20px;
    padding: 0;
    border: 0;
}
@media (max-width: 749px) {
    .gac-colonnes { gap: 8px; }
}
/* UNE PAIRE PAR LARGEUR.
   Deux jeux de boutons sont rendus, un seul est montre : « un article par
   ligne / deux » sous 750 px, « grille / vue resserree » au-dessus. Ne pas
   servir la paire du bureau a toutes les largeurs. */
/* La hauteur suit le dessin, elle n'est pas figee : l'icone « un article par
   ligne » a un `viewBox` de 20 x 21 et sa pastille fait donc 29 px de haut
   chez elle, la ou les trois autres en font 28. Un `height: 28px` ecrasait le
   trace d'un vingt-et-unieme. */
.gac-colonnes__option {
    display: none;
    width: 28px;
    min-height: 28px;
    margin: 0;
    cursor: pointer;
}
@media (max-width: 749px) {
    .gac-colonnes__option--tel { display: block; }
}
@media (min-width: 750px) {
    .gac-colonnes__option--bureau { display: block; }
}
/* Le bouton radio ne se cache pas dans un pixel hors du flux : il RECOUVRE
   son etiquette (`inset: 0`), invisible mais cliquable. C'est ce qui lui donne
   sa zone de clic, et c'est ce que `pointer-events: none` lui enleve. Sans
   `position: relative` sur l'etiquette, le `position: absolute` se calerait
   sur un ancetre positionne quelconque. */
.gac-colonnes__option { position: relative; }
.gac-colonnes__option input {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}
/* MOUVEMENT. `.column-picker` transite `background-color` et `color` en
   .125s ease, et le survol de l'etiquette pose un fond a 5 %. Pas de
   changement de couleur d'un coup, pas d'absence de survol. */
.gac-colonnes__pastille {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-height: 28px;
    padding: 4px;
    border-radius: 3.2px;
    color: rgba(0, 0, 0, .5);
    transition: background-color var(--dgc-anim) ease, color var(--dgc-anim) ease;
}
.gac-colonnes__pastille svg { display: block; width: 20px; height: auto; }
.gac-colonnes__option:hover .gac-colonnes__pastille { background-color: rgba(0, 0, 0, .05); }
.gac-colonnes__option input:checked + .gac-colonnes__pastille {
    color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, .05);
}

/* MOUVEMENT. Le menu de tri se deroule : `grid-template-rows` de 0fr a 1fr
   et opacite de 0 a 1, en .2s ease-in-out. Pose en `hidden`, il apparaitrait
   d'un coup, sans rien deplier.

   Le pli exige un enfant unique qui clippe : `.gac-sort__menu-inner`. Le
   rembourrage vertical descend sur cet enfant : laisse sur la liste, il
   resterait visible en 1 em de blanc menu ferme.

   `visibility` en marche d'escalier retardee garde le menu hors du parcours
   du clavier une fois replie. */
/* LE MENU DE TRI, AUX MESURES
   -----------------------------------------------------------
     menu     242,2 de large (max-content, plancher 120), coins 14,
              ombre 0 4px 20px rgba(0,0,0,.15), AUCUN filet
     interieur rembourrage 9,1 tout autour, colonne sans gouttiere
     entree   180 de large minimum, 16em au plus, 30,4 de haut,
              rembourrage 4 / 9,1 / 4 / 4, grille « 20px 1fr », ecart 4,8
     coche    20 x 20, visible seulement sur l'entree choisie
     choisie  graisse 500

   Les deux libelles de date depassent la largeur d'entree et passent sur DEUX
   lignes, ce qui donne au menu sa hauteur de 336,5 : garder le plafond de
   largeur plutot que d'elargir le menu. */
.gac-sort__menu {
    position: absolute;
    right: 0;
    top: 100%;
    background: #fff;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
    padding: 0;
    width: max-content;
    min-width: 120px;
    min-height: 0;
    z-index: 30;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    transition: grid-template-rows var(--dgc-anim-panneau) ease-in-out,
        opacity var(--dgc-anim-panneau) ease-in-out,
        visibility 0s linear var(--dgc-anim-panneau);
}
.gac-sort.is-open .gac-sort__menu {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    transition: grid-template-rows var(--dgc-anim-panneau) ease-in-out,
        opacity var(--dgc-anim-panneau) ease-in-out,
        visibility 0s linear;
}
.gac-sort__menu-inner {
    display: flex;
    flex-direction: column;
    /* Les entrees ne s'etirent PAS a la largeur du menu : chacune prend sa
       largeur propre, entre 180 et 224 (16em). Une entree courte fait 180, une
       entree de date qui passe sur deux lignes fait 224, et c'est elle qui
       donne au menu ses 242,2. Etirees, les bandes de survol feraient 224
       partout. */
    align-items: flex-start;
    grid-row: 1 / span 2;
    gap: 0;
    padding: 9.1px;
    margin: 0;
    overflow: clip;
    min-height: 0;
}
.gac-sort__toggle svg { transition: transform var(--dgc-anim) ease-in-out; }
.gac-sort.is-open .gac-sort__toggle svg { transform: rotate(180deg); }
.gac-sort__toggle { transition: color var(--dgc-anim) ease-in-out; }
.gac-sort.is-open .gac-sort__toggle,
.gac-sort.is-open .gac-sort__label { color: rgb(0, 0, 0); }
.gac-sort__option {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 4.8px;
    align-items: center;
    min-width: 180px;
    max-width: 16em;
    padding: 4px 9.1px 4px 4px;
    color: rgba(0, 0, 0, .81);
    font-size: 14px;
    line-height: 22.4px;
    text-decoration: none;
}
/* Le survol pose un fond a 8 % et arrondit a la moitie du rayon du
   panneau. */
.gac-sort__option:hover {
    border-radius: 7px;
    background-color: rgba(0, 0, 0, .08);
    color: rgba(0, 0, 0, .81);
}
/* La colonne de la coche est toujours la : c'est `visibility` qui decide, pas
   `display`, sinon les libelles se decaleraient d'une entree a l'autre. */
.gac-sort__coche {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    visibility: hidden;
}
.gac-sort__option.is-current .gac-sort__coche { visibility: visible; }
.gac-sort__option.is-current .gac-sort__option-libelle { font-weight: 500; }

/* ============================================================
   LE TIROIR DE FILTRES DU TELEPHONE

   Releve au navigateur sur la source le 29/08/2026, fenetre de 390 px,
   `dialog#filters-drawer` de `blocks/filters.liquid`. Il ne se voit qu'en
   dessous de 750 px : au-dessus, la barre pose ses facettes en ligne et ce
   tiroir n'est jamais ouvert.

   Tout est ecrit en PIXELS. La version precedente venait de Galerie Sac a Dos
   et cascadait en `em` depuis un corps de 12,25 px : le titre sortait a
   12,86, les libelles de case a 11,39 et le bouton du pied a 11. Un `em` dans
   un tiroir suit la police du conteneur, qui n'a pas ete mesuree ; la source,
   elle, pose ses jetons en `rem` sur une racine de 16.

     --drawer-padding   0.7rem + 7px  = 18,2   (le rembourrage lateral)
     --padding-xs       0.5rem        = 8
     --padding-sm       0.7rem        = 11,2
     --padding-md       0.8rem        = 12,8
     --padding-lg       1rem          = 16
     --padding-2xs      0.25rem       = 4
     --gap-sm           0.7rem        = 11,2
     --color-border     rgb(0 0 0 / .06)
   ============================================================ */
.gac-filters {
    position: fixed;
    inset: 0;
    z-index: 9995;
}
.gac-filters[hidden] { display: none !important; }

/* Le fond n'est pas voile de gris : la source ASSOMBRIT ce qu'il y a derriere
   (`::backdrop { backdrop-filter: brightness(.75) }`) et pose 15 % de noir
   par-dessus. Un aplat a 45 % ecrasait la page au lieu de la baisser. */
.gac-filters__scrim {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / .15);
    -webkit-backdrop-filter: brightness(.75);
    backdrop-filter: brightness(.75);
    opacity: 0;
    /* MOUVEMENT. Le tiroir de facettes s'ouvre en .125s ease-in-out - pas en
       .25s ease, soit deux fois plus lentement et sur une autre courbe. */
    transition: opacity var(--dgc-anim) ease-in-out;
}
.gac-filters.is-open .gac-filters__scrim { opacity: 1; }

/* Le panneau vient de GAUCHE et fait `min(95vw, 500px)` : 370,5 px sur un
   ecran de 390, colles au bord gauche, la ou nous en posions 351. Ni ombre ni
   filet - `--shadow-drawer` est vide chez elle et `--style-border-drawer` se
   resout en `none`.

   La classe `dialog-drawer--right` de son balisage ne dit PAS le cote : le
   panneau est mesure a x=0, 20 px de vide a sa droite. Un nom de classe n'est
   pas un releve (releve le 29/08/2026, corrige apres l'avoir cru). */
.gac-filters__panel {
    position: absolute;
    top: 0;
    left: 0;
    height: 100dvh;
    width: min(95vw, 500px);
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: 14px;
    line-height: 22.4px;
    color: rgba(0, 0, 0, .81);
    transform: translateX(-100%);
    transition: transform var(--dgc-anim) ease-in-out;
    box-shadow: none;
}
.gac-filters.is-open .gac-filters__panel { transform: translateX(0); }

/* --- L'en-tete : 60 px, colle en haut, sans filet -------------------- */
.gac-filters__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px 8px 18.2px;
    border: 0;
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
}
/* « Filtrer », et non « Filtres » en capitales interlettrees : c'est un titre
   de niveau h3, Libre Baskerville 32/35,2 comme les titres de section. */
.gac-filters__title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 32px;
    line-height: 35.2px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: rgba(0, 0, 0, .81);
}
/* La pastille du nombre de filtres poses : 21,3 de cote, fond a 10 % de noir,
   13 px sur 14,3. Elle n'existe qu'avec un filtre. */
.gac-filters__bulle {
    height: 21.3px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    aspect-ratio: 1 / 1;
    padding: 0 6px;
    border-radius: 20px;
    background: rgb(0 0 0 / .1);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 14.3px;
    font-weight: 400;
    color: rgba(0, 0, 0, .81);
}
/* La croix est une cible tactile de 44 px qui porte une icone de 13,6 : un
   « × » typographique de 24 x 21 n'a ni le trace ni la surface cliquable. */
.gac-filters__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    box-shadow: none;
    color: rgba(0, 0, 0, .81);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 22.4px;
    text-transform: none;
    letter-spacing: normal;
}
.gac-filters__close svg { width: 13.6px; height: 13.6px; }
.gac-filters__close:hover { background: none; color: rgba(0, 0, 0, .81); }

/* --- Le corps ------------------------------------------------------- */
/* Le corps ecrit a 60 % de noir - c'est la couleur du formulaire du tiroir
   chez elle. Seuls les libelles de section montent a 81 %. */
.gac-filters__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    color: rgba(0, 0, 0, .6);
}

/* --- Les pastilles des filtres poses -------------------------------- */
/* Elles ouvrent le corps du tiroir : une par valeur retenue, la fourchette de
   prix n'en faisant qu'une. Coins a 40 px, fond a 5 % de noir, 10 % au
   survol - c'est la seule chose qui bouge sous le doigt. */
.gac-filters__pastilles {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 18.2px;
    margin: 4.8px 0 12.8px;
}
.gac-filters__pastille {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 11.2px;
    min-width: 48px;
    padding: 8px 12.8px;
    border-radius: 40px;
    background-color: rgb(0 0 0 / .05);
    color: rgba(0, 0, 0, .81);
    font-size: 14px;
    line-height: 22.4px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dgc-anim) ease-in-out;
}
.gac-filters__pastille:hover,
.gac-filters__pastille:focus {
    background-color: rgb(0 0 0 / .1);
    color: rgba(0, 0, 0, .81);
    text-decoration: none;
}
.gac-filters__pastille svg {
    flex: 0 0 auto;
    width: 9.6px;
    height: 9.6px;
}
/* Le montant d'une pastille de prix sort de `wc_price()` : ni gras ni
   couleur de prix, c'est du texte de pastille. */
.gac-filters__pastille .woocommerce-Price-amount {
    font-weight: inherit;
    color: inherit;
}

/* Les sections ne sont pas separees par un filet BAS large comme le tiroir :
   la source pose un filet HAUT devant chacune, tri compris, rentre de
   18,2 px de chaque cote (`:is(.facets__item, .sorting-filter)::before`). */
.gac-filters__group {
    border: 0;
    padding: 0 18.2px;
}
.gac-filters__tri {
    border: 0;
    padding: 0;
}
/* Le filet vit dans la boite de CONTENU, donc deja rentre des 18,2 px du
   groupe ; la rangee de tri, elle, ne porte pas ce rembourrage et le filet s'y
   rentre lui-meme. */
.gac-filters__group::before,
.gac-filters__tri::before {
    content: "";
    display: block;
    height: 0;
    border-top: 1px solid rgb(0 0 0 / .06);
}
.gac-filters__tri::before {
    width: calc(100% - 36.4px);
    margin: 0 auto;
}
.gac-filters__group:last-child { border-bottom: 0; }
.gac-filters__group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    cursor: pointer;
    padding: 11.2px 0;
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 25.6px;
    color: rgba(0, 0, 0, .6);
}
.gac-filters__group > summary .gac-filters__label { color: rgba(0, 0, 0, .81); }
/* L'etat de la section, a droite du libelle : il ne se voit que repliee. */
.gac-filters__statut-boite {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-inline-start: auto;
}
.gac-filters__statut {
    display: flex;
    width: max-content;
    margin-inline-start: auto;
    font-weight: 500;
    color: rgba(0, 0, 0, .81);
}
.gac-filters__group[open] > summary .gac-filters__statut { display: none; }

/* Une section qui porte une valeur passe au noir PLEIN, chevron compris. */
.gac-filters__group.is-active > summary,
.gac-filters__group.is-active > summary .gac-caret { color: #000; }
.gac-filters__group > summary::-webkit-details-marker { display: none; }
/* Le chevron est l'icone de la source, pas deux bordures tournees de 45
   degres : meme trace au bureau et au telephone, a 13,6 px et 50 % de noir. */
.gac-filters__group > summary::after { content: none; }
.gac-filters__group > summary .gac-caret {
    flex: 0 0 auto;
    color: rgba(0, 0, 0, .5);
}
.gac-filters__group[open] > summary .gac-caret { transform: rotate(180deg); }
/* LE PLI. La section ne s'ouvre pas d'un coup : la source anime la hauteur du
   contenu en 0,2 s ease-in-out, avec l'opacite
   (`accordion-custom details::details-content`, `--animation-speed-slow`).
   Elle le fait en `block-size: 0 -> auto` plus `interpolate-size`, que Safari
   et Firefox ne connaissent pas ; `grid-template-rows: 0fr -> 1fr` donne le
   meme resultat sur les trois moteurs.

   `::details-content` doit rester rendu : des que `[open]` tombe, le
   navigateur y pose `content-visibility: hidden` et GELE les animations du
   sous-arbre - le pli ne jouerait qu'une fois. Ce n'est pas lui qui cache la
   section repliee, c'est la rangee de grille a 0fr et le clip de l'enfant. */
.gac-filters__group::details-content { content-visibility: visible; }
.gac-filters__panneau {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows var(--dgc-anim-panneau) ease-in-out,
        opacity var(--dgc-anim-panneau) ease-in-out;
}
.gac-filters__group[open] > .gac-filters__panneau {
    grid-template-rows: 1fr;
    opacity: 1;
}
/* L'enfant qui clippe, sans rembourrage : voir le commentaire du gabarit. */
.gac-filters__panneau-inner {
    overflow: hidden;
    min-height: 0;
}
/* Le rythme vertical d'une section, releve terme par terme : 8 px sous le
   sommaire, puis 8 px sous la derniere ligne et 11,2 px avant le filet
   suivant. Le panneau du prix, lui, ferme sur la phrase de plafond, qui porte
   ces 8 px en marge haute et ne laisse que 11,2 en bas. */
.gac-filters__panneau-corps {
    padding: 8px 0 19.2px;
}
/* Le panneau du prix ne ferme rien lui-meme : ce sont les 11,2 px de
   rembourrage BAS de la phrase de plafond qui portent la fin de la section. */
.gac-filters__panneau--prix .gac-filters__panneau-corps {
    padding-bottom: 0;
}
/* La rangee des deux champs porte 1 px de rembourrage chez elle : sans lui,
   les champs sortent a 149,4 au lieu de 148,9. */
.gac-filters__panneau .gac-filters__range {
    gap: 13.2px;
    padding: 1px;
    width: max-content;
    max-width: 100%;
}
/* Les champs ne sont pas etires non plus : leur largeur propre est celle d'un
   `input` de vingt caracteres, et ils se retractent a egalite quand le tiroir
   est trop etroit. Etires, ils gagnaient 2,9 px chacun au-dela de 640 px. */
.gac-filters__panneau .gac-money {
    flex: 0 1 auto;
    min-width: 0;
}
/* Dans le tiroir la phrase de plafond est a 60 % de noir, sans rembourrage
   lateral, et a 8 px sous les champs - au bureau elle est a 81 %, rentree de
   12,8 px et posee 13,8 px plus bas. */
.gac-filters__panneau--prix .gac-filters__plafond {
    margin: 8px 0 0;
    padding: 8px 0 11.2px;
    color: rgba(0, 0, 0, .6);
}
/* Le « à » est a 60 % de noir dans le tiroir, a 81 % dans le panneau du
   bureau. */
.gac-filters__panneau .gac-filters__range-sep { color: rgba(0, 0, 0, .6); }

/* Les cases du tiroir sont plus aerees que celles du panneau du bureau :
   22 px entre deux lignes, et le libelle a 60 % de noir - c'est la couleur
   du formulaire du tiroir, quand le panneau du bureau ecrit a 81 %. */
.gac-filters__group .gac-check {
    font-size: 14px;
    gap: 0;
    padding: 0;
    color: rgba(0, 0, 0, .6);
}
/* Les 8 px entre la case et le mot sont un rembourrage du LIBELLE chez elle,
   pas une gouttiere de la rangee : la boite du texte commence donc au bord de
   la case. Meme peinture, une boite de moins qui deborde. */
.gac-filters__group .gac-check__texte { padding-left: 8px; }
/* Une case cochee passe en graisse 500. */
.gac-filters__group .gac-check input:checked ~ .gac-check__texte { font-weight: 500; }
.gac-filters__group .gac-check__texte { color: rgba(0, 0, 0, .6); }
.gac-filters__group .gac-check--morte,
.gac-filters__group .gac-check--morte .gac-check__texte { color: rgba(0, 0, 0, .5); }

/* --- Le tri, DANS le tiroir ------------------------------------------ */
/* Sous 750 px la source retire « Trier » de la barre et le pose ici, en
   dernier, derriere le meme filet que les facettes. Le libelle est en 20/32
   (`--font-h4--size`), le champ est un `select` natif aligne a droite. */
.gac-filters__tri-rangee {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11.2px 0 11.2px 18.2px;
    margin-inline-end: 12.8px;
}
.gac-filters__tri .gac-filters__label {
    font-size: 20px;
    line-height: 32px;
    color: rgba(0, 0, 0, .81);
}
/* Le champ n'est pas etire : sa largeur est celle de la plus longue entree du
   menu, et il se retracte quand la rangee ne la tient pas. A 390 px il prend
   donc toute la place laissee par « Trier », a 749 il s'arrete a 349,6. */
.gac-filters__tri-champ {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    overflow: clip;
    padding: 4px 8px;
    border-radius: 0;
}
/* 16 px, et non 14 : le theme pose un plancher de 1rem sur les champs en
   dessous de 1 200 px, la parade contre le zoom automatique d'iOS. */
.gac-filters__tri-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 4px;
    background: #fff;
    padding: 0 9.6px 0 0;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 25.6px;
    color: rgba(0, 0, 0, .6);
    text-align: right;
    text-align-last: right;
    cursor: pointer;
}
.gac-filters__tri-champ svg { flex: 0 0 auto; }

/* --- Le pied : colle en bas, sur un degrade -------------------------- */
/* Ni filet ni colonne : deux boutons cote a cote, separes de 11,2 px, poses
   sur un degrade vers le haut qui laisse deviner la fin de la liste. */
.gac-filters__foot {
    position: sticky;
    bottom: 0;
    order: 1;
    flex-shrink: 0;
    margin-top: auto;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 11.2px;
    padding: 8px 16px 12.8px;
    border: 0;
    background-color: #fff;
    background-image: linear-gradient(
        to top,
        rgb(255 255 255 / .9),
        rgb(255 255 255 / .8),
        rgb(255 255 255 / .4),
        transparent
    );
}
/* La boite reste dans le pied meme sans filtre pose : c'est elle qui prend la
   gouttiere de 11,2 px et laisse 327,3 px au bouton noir. */
.gac-filters__effacer-boite {
    display: block;
    flex: 0 1 auto;
}
/* « Tout effacer » est un bouton SECONDAIRE : pas de fond, un filet noir pose
   en ombre interieure, 120 px de large au minimum. */
.gac-filters__effacer { display: none; }
.gac-filters__effacer.is-active {
    display: block;
    min-width: 120px;
    padding: 16px 24px;
    background: none;
    color: #000;
    border: 0;
    border-radius: 0;
    box-shadow: inset 0 0 0 1px #000;
    font-size: 14px;
    line-height: 22.4px;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
}
/* « Voir 9 articles » : le compte, pas « VOIR RESULTATS » en capitales
   interlettrees. 55 % de large au minimum, 54,4 px de haut. */
.gac-filters__submit {
    flex: 1 1 auto;
    min-width: 55%;
    background: var(--gac-primary);
    color: #fff;
    border: 0;
    border-radius: 0;
    padding: 16px 24px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 22.4px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    box-shadow: none;
}

@media (max-width: 749px) {
    .gac-toolbar { flex-wrap: wrap; gap: .8em 1.2em; }
    .gac-sort { margin-left: 0; flex-basis: 100%; }
    .gac-sort__menu { left: 0; right: auto; min-width: 0; width: 100%; }
}

/* ============================================================
   Galerie produit maison : une image, deux chevrons
   ============================================================ */
.gac-gallery { position: relative; margin-bottom: 1.5em; }
.gac-gallery__stage {
    position: relative;
    overflow: hidden;
    background: #fff;
}
.gac-gallery__slide { display: none; margin: 0; }
.gac-gallery__slide.is-active { display: block; }
.gac-gallery__img {
    display: block;
    width: 100%;
    height: auto;
}
.gac-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.8em;
    height: 2.8em;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s ease;
    z-index: 3;
    padding: 0;
}
.gac-gallery:hover .gac-gallery__nav,
.gac-gallery__nav:focus { opacity: 1; }
/* Un seul visuel dans la rotation : pas de chevrons. Le script pose la classe,
   il n'ecrit plus `display` en ligne. */
.gac-gallery__nav.is-hidden { display: none; }
.gac-gallery__nav::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: .65em;
    height: .65em;
    border-top: 2px solid var(--gac-ink);
    border-right: 2px solid var(--gac-ink);
}
.gac-gallery__nav--prev { left: .9em; }
.gac-gallery__nav--next { right: .9em; }
.gac-gallery__nav--next::before { transform: translate(-65%, -50%) rotate(45deg); }
.gac-gallery__nav--prev::before { transform: translate(-35%, -50%) rotate(-135deg); }
.gac-gallery__dots {
    display: flex;
    justify-content: center;
    gap: .45em;
    margin-top: .9em;
}
.gac-gallery__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #d8d3d0;
    cursor: pointer;
    box-shadow: none;
}
.gac-gallery__dot.is-active { background: var(--gac-ink); }
.gac-gallery__dot:hover { background: var(--gac-primary); }

/* ============================================================
   Corrections de la recette page a page
   ============================================================ */

/* Grille de collection sur quatre colonnes */
.woocommerce ul.products.columns-3 li.product,
.woocommerce ul.products li.product {
    width: 22.05%;
    margin-right: 3.8%;
    float: left;
}
.woocommerce ul.products li.product:nth-child(3n) { margin-right: 3.8%; }
.woocommerce ul.products li.product:nth-child(4n) { margin-right: 0; }
.woocommerce ul.products li.product:nth-child(4n+1) { clear: both; }

/* La barre d'onglets fixe de Storefront est retiree cote PHP ; on neutralise
   aussi la marge qu'elle reservait en bas de page. */
.storefront-handheld-footer-bar { display: none !important; }
body { padding-bottom: 0 !important; }

/* Reserve la place de l'image produit pour eviter le grand blanc au chargement */
.gac-gallery__stage {
    aspect-ratio: 1 / 1;
    background: #f7f5f4;
}
.gac-gallery__slide.is-active { height: 100%; }
.gac-gallery__img {
    height: 100%;
    object-fit: contain;
}

/* ============================================================
   GALERIE DE FICHE AU TELEPHONE : la piste de la source

   Releve du 29/08/2026 sur la source a 390 px : le carrousel est PLEINE
   LARGEUR (bord a bord, 390 px), chaque photo en 1 / 1.25 recadree
   (`object-fit: cover`, 390 x 487,5), les diapositives defilent au doigt
   (scroll-snap, glissees a 0 / 390 / 780), AUCUN chevron, et les pastilles
   sont POSEES SUR l'image : bande absolue de 44 px collee en bas, boutons de
   18 x 18 espaces de 9,6, point de 9 px blanc plein (actif) ou blanc a 30 %
   (repos), cercle interieur de 1,5 px a 40 % de noir.
   ============================================================ */
@media (max-width: 749px) {
    /* Bord a bord : la colonne de page garde ses 16 px, la galerie en sort. */
    .single-product div.product .gac-gallery {
        width: auto;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
    .single-product .gac-gallery__stage {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        aspect-ratio: auto;
        background: transparent;
    }
    .single-product .gac-gallery__stage::-webkit-scrollbar { display: none; }
    .single-product .gac-gallery__slide,
    .single-product .gac-gallery__slide.is-active {
        display: block;
        flex: 0 0 100%;
        height: auto;
        scroll-snap-align: start;
        background: #fff;
    }
    .single-product .gac-gallery__img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1.25;
        object-fit: cover;
        /* PAS de `max-height` ici. Le `constrain_to_viewport` d'Horizon ne
           plafonne la photo que sur le BUREAU : son code mobile dit
           « max-height is disabled », et la mesure au calcule le confirme
           (500x700 : photo de 625 px, sans cap). Releve du 29/08/2026. */
    }
    /* Le glisser a la souris (gac-ui.js) : la source pose `cursor: grab`
       sur sa piste, `grabbing` pendant le geste. */
    .single-product .gac-gallery__stage { cursor: grab; }
    .single-product .gac-gallery__stage.is-dragging { cursor: grabbing; }
    /* Pas de chevrons au telephone : le geste est le defilement. */
    .single-product .gac-gallery__nav { display: none; }
    .single-product .gac-gallery__dots {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 44px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9.6px;
        z-index: 2;
        /* Les pastilles de la source sont BLANCHES et posees en
           `mix-blend-mode: difference` : sombres sur photo claire, claires
           sur photo sombre. Sans ce mode, blanc sur fond clair = invisible. */
        mix-blend-mode: difference;
    }
    .single-product .gac-gallery__dot,
    .single-product .gac-gallery__dot:hover {
        width: 18px;
        height: 18px;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        /* La source pose `margin: calc(var(--size) / -2)` (-4.48 px) sur
           chaque bouton : la cible tactile fait 18 px mais les boutons se
           chevauchent, et le pas de la rangee tombe a 18,5 px (boites a
           x121,1 / 139,6 / 158,2 sur la source a 390). Sans cette marge le
           pas valait 27,6 - releve du 29/08/2026. */
        margin: -4.5px;
    }
    .single-product .gac-gallery__dot::after {
        content: "";
        display: block;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        /* Cercle interieur a 15 % au repos, 40 % sur la pastille choisie -
           `slideshow-controls.liquid` de la source. */
        box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.15);
    }
    .single-product .gac-gallery__dot.is-active::after {
        background: #fff;
        box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.4);
    }
}

@media (max-width: 749px) {
    /* En-tete sur une seule ligne : le bouton MENU rejoint les icones */
    .storefront-primary-navigation > .col-full {
        flex-wrap: nowrap;
        gap: .5em;
    }
    .storefront-primary-navigation .main-navigation {
        order: 0;
        flex: 0 0 auto;
    }
    .storefront-primary-navigation .site-branding {
        flex: 1 1 auto;
        text-align: center;
    }
    .storefront-primary-navigation .gac-search-toggle { order: 2; margin-left: 0; }
    .storefront-primary-navigation .gac-account { order: 3; }
    .storefront-primary-navigation .site-header-cart { order: 4; }
    .main-navigation .menu-toggle {
        margin: 0;
        padding: .4em .5em;
        background: none;
        border: 0;
        color: var(--gac-ink);
        box-shadow: none;
    }

    /* Fil d'Ariane et barre d'annonce : defilement, pas de debordement */
    .woocommerce-breadcrumb,
    .gac-announcement-inner {
        white-space: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .woocommerce-breadcrumb::-webkit-scrollbar,
    .gac-announcement-inner::-webkit-scrollbar { display: none; }

    /* Deux produits par ligne en mobile */
    .woocommerce ul.products li.product {
        width: 48%;
        margin-right: 4%;
    }
    .woocommerce ul.products li.product:nth-child(3n),
    .woocommerce ul.products li.product:nth-child(4n) { margin-right: 4%; }
    .woocommerce ul.products li.product:nth-child(2n) { margin-right: 0; }
    .woocommerce ul.products li.product:nth-child(4n+1) { clear: none; }
    .woocommerce ul.products li.product:nth-child(2n+1) { clear: both; }
}

/* La galerie maison reprend la colonne de gauche de Storefront */
.single-product div.product .gac-gallery {
    float: left;
    width: 41.1765%;
    margin-right: 5.8823%;
    margin-bottom: 2em;
}
@media (max-width: 749px) {
    /* La piste touche l'en-tete chez la source (galerie a y=60, en-tete de
       60) : les 8,4 px de rembourrage haut de `.site-content` de Storefront
       s'enlevent sur la fiche. */
    .single-product .site-content {
        padding-top: 0;
    }
    .single-product div.product .gac-gallery {
        float: none;
        /* Bord a bord, comme la piste de la source : voir le bloc
           « GALERIE DE FICHE AU TELEPHONE » plus haut. Ce bloc-ci est ecrit
           APRES lui : les valeurs doivent etre les memes, sinon ce sont
           elles qui gagnent. */
        width: auto;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
}

@media (max-width: 749px) {

    /* Pas de vide au-dessus du bouton d'achat. La marge HAUTE de .4em qui
       accompagnait cette regle est partie : l'ecart prix -> selecteur est le
       gap de colonne de la source (28/24, voir le rembourrage du formulaire
       plus bas), et ces 5,6 px le faisaient deborder a 31,6. */
    .single-product div.product .summary > form.cart {
        margin-bottom: .4em;
    }
    .single-product form.cart .single_add_to_cart_button { margin-top: 0; }
}

/* L'ecart entre le prix et le selecteur de variantes est le gap de colonne
   de la source : 28 px a partir de 990, 24 en dessous (`--gap-scale` passe a
   0.7 sous 990). Chez nous il se compose de la marge basse du prix (12) et du
   rembourrage haut du formulaire (14, pose par Storefront) : 26 partout.
   Releve du 29/08/2026 : source 28 a 1440, 24 a 390. */
.single-product div.product .summary > form.cart {
    padding-top: 16px;
}
@media (max-width: 989px) {
    .single-product div.product .summary > form.cart {
        padding-top: 12px;
    }
    /* Meme echelle pour l'ecart reassurance -> accordeon : 24 sous 990,
       28 au-dela (le `margin: 28px 0 0` de .gac-accordion reste pour le
       bureau). Source a 390 : 24. */
    .single-product div.product .summary > .gac-accordion {
        margin-top: 24px;
    }
}

@media (max-width: 749px) {
    /* En-tete mobile : burger a gauche, logo au centre, icones a droite.
       Storefront dessine le burger en pseudo-elements a gauche du bouton et
       ajoute le mot MENU par-dessus : seul le pictogramme est conserve. */
    .storefront-primary-navigation > .col-full {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: .3em;
        padding-left: .8em;
        padding-right: .8em;
    }
    .storefront-primary-navigation .main-navigation {
        order: 1;
        flex: 0 0 auto;
        width: auto;
    }
    .storefront-primary-navigation .site-branding {
        order: 2;
        flex: 1 1 auto;
        text-align: center;
        min-width: 0;
    }
    .storefront-primary-navigation .gac-search-toggle { order: 3; margin-left: 0; }
    .storefront-primary-navigation .gac-account { order: 4; }
    .storefront-primary-navigation .site-header-cart { order: 5; }

    .main-navigation .menu-toggle {
        position: relative;
        float: none;
        max-width: none;
        width: 46px;
        height: 46px;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        font-size: 1em;
        overflow: hidden;
    }
    .main-navigation .menu-toggle span {
        display: block;
        text-indent: -9999px;
        overflow: hidden;
    }
    /* Le burger de la source est DEUX lignes de 12 px, epaisses de 1,5,
       aux bouts ronds, espacees de 7 px (svg 14x14 : y 3,5 et 10,5) - pas
       les trois barres de 18 px de Storefront. Releve du 29/08/2026. */
    .site-header .main-navigation .menu-toggle::before,
    .site-header .main-navigation .menu-toggle::after {
        content: "";
        display: block;
        position: absolute;
        left: 50%;
        margin: 0 0 0 -6px;
        width: 12px;
        height: 1.5px;
        border-radius: 0.75px;
        background: rgba(0, 0, 0, 0.81);
        box-shadow: none;
        transition: none;
        /* Storefront ecarte ses barres par translateY(-4px/+4px) et un
           margin-top de -1 : sans cette remise a zero, les deux traits
           s'ecartaient de 15 px au lieu des 7 de la source. */
        transform: none;
    }
    .site-header .main-navigation .menu-toggle::before { top: 19.25px; }
    .site-header .main-navigation .menu-toggle::after { top: 26.25px; bottom: auto; }
    .site-header .main-navigation .menu-toggle span::before {
        content: none;
        display: none;
    }
    .site-header .custom-logo-link img,
    .site-header .custom-logo { max-width: 104px; }
}

/* La maison du fil d'Ariane vient d'un pseudo-element sur le premier lien */
.woocommerce-breadcrumb > a:first-child::before,
.woocommerce-breadcrumb::before,
.woocommerce-breadcrumb::after {
    content: none !important;
    display: none !important;
}

/* Ligne de panier : compteur avec plus et moins, corbeille */
.gac-cart-line__qty {
    display: flex;
    align-items: center;
    gap: .8em;
    margin-top: .5em;
}
.gac-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--gac-border);
    border-radius: 2px;
    overflow: hidden;
}
.gac-stepper__btn {
    background: none;
    border: 0;
    width: 2.1em;
    height: 2.1em;
    line-height: 1;
    font-size: 1em;
    color: var(--gac-ink);
    cursor: pointer;
    box-shadow: none;
    padding: 0;
}
/* Gris NEUTRE : #f5f1f0, herite de l'autre boutique, tirait vers le rose
   dans un theme strictement monochrome. */
.gac-stepper__btn:hover { background: #f5f5f5; color: var(--gac-ink); }
.gac-stepper__value {
    min-width: 2em;
    text-align: center;
    font-size: .92em;
}
.gac-cart-line__remove {
    background: none;
    border: 0;
    padding: .2em;
    color: #999;
    cursor: pointer;
    box-shadow: none;
    line-height: 0;
}
.gac-cart-line__remove:hover { background: none; color: var(--gac-primary); }
.gac-cart-line__remove.is-busy,
.gac-stepper__btn.is-busy { opacity: .4; pointer-events: none; }

/* Les commandes du panier ne sont pas des boutons de marque : la regle
   globale sur button leur donnait le fond rose et la taille d'un CTA. */
.gac-drawer .gac-stepper__btn,
.gac-drawer .gac-cart-line__remove,
.gac-drawer__close {
    background: none !important;
    background-color: transparent !important;
    color: var(--gac-ink) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-family: inherit !important;
    transform: none !important;
}
.gac-drawer .gac-stepper__btn {
    width: 2.2em !important;
    height: 2.2em !important;
    padding: 0 !important;
    font-size: 1.05em !important;
    line-height: 1 !important;
}
.gac-drawer .gac-stepper__btn:hover {
    background: #f5f5f5 !important;
    color: var(--gac-ink) !important;
    box-shadow: none !important;
}
.gac-drawer .gac-cart-line__remove {
    width: auto !important;
    height: auto !important;
    padding: .25em !important;
    color: #999 !important;
}
.gac-drawer .gac-cart-line__remove:hover {
    color: var(--gac-primary) !important;
    background: none !important;
    box-shadow: none !important;
}
.gac-drawer .gac-cart-line__remove svg { display: block; }

/* ============================================================
   Grilles produit en CSS grid.
   Les flottants de Storefront laissaient des trous des que deux
   titres n'avaient pas la meme hauteur, et il fallait un clear
   par nombre de colonnes.
   ============================================================ */
.woocommerce ul.products,
.woocommerce-page ul.products,
.gac-section--products ul.products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.4em 3.2%;
    margin: 0;
    padding: 0;
    list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    content: none;
    display: none;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.gac-section--products ul.products li.product {
    width: auto !important;
    max-width: none;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
}
.woocommerce ul.products li.product a img {
    margin-bottom: .8em;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1em;
    line-height: 1.3;
    padding-bottom: .3em;
}
.woocommerce ul.products li.product .price {
    margin-top: auto;
}

/* Les produits similaires suivent la meme grille */
.single-product .related ul.products,
.single-product .upsells ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .woocommerce ul.products,
    .single-product .related ul.products,
    .single-product .upsells ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.8em 4%;
    }
}

/* ============================================================
   Revision mobile : en-tete, volet de navigation, hero
   ============================================================ */
/* Bascule à 749/750 et non 767/768 : l'en-tête passe de sa rangée
   téléphone unique (60 px) à ses deux rangées de bureau (109,9) exactement à
   750 px. */
@media (max-width: 749px) {
    /* La barre d'annonce quitte l'en-tete sur telephone.

       L'ICONE DE COMPTE, ELLE, RESTE : elle est bien rendue a x300 sur un
       ecran de 390. Elle revient a l'en-tete par la grille posee en fin de
       feuille. */
    .storefront-primary-navigation .gac-account { display: none !important; }

    /* Meme profondeur que la regle de bureau, sinon l'ecart de 1.8em reste
       et pousse le logo sur la loupe. */
    .site-header .storefront-primary-navigation > .col-full {
        gap: .35em;
        padding-left: 1em;
        padding-right: 1em;
    }
    .storefront-primary-navigation .main-navigation {
        order: 1;
        flex: 0 0 auto !important;
        width: auto !important;
    }
    .storefront-primary-navigation .gac-search-toggle {
        order: 1;
        flex: 0 0 auto;
        margin-left: 0;
        margin-right: 0;
    }
    .storefront-primary-navigation .site-header-cart {
        order: 3;
        flex: 0 0 auto;
    }

    /* Le logo est cale au centre de l'ecran, pas au centre de la place qui
       reste : les deux groupes d'icones n'ont pas la meme largeur, et en
       element de flex il finissait decale sur le panier. */
    .storefront-primary-navigation .site-branding {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: auto;
        text-align: center;
        z-index: 1;
    }
    /* Storefront remet margin: 0 sur le panier avec plus de specificite. */
    .storefront-primary-navigation .site-header-cart { margin-left: auto !important; }

    /* Le logo garde sa taille : sans largeur imposee il est le seul element
       compressible de la rangee et tombe a quelques pixels. */
    .site-header .custom-logo-link,
    .site-header .custom-logo-link img,
    .site-header .custom-logo {
        max-width: none;
        width: 112px;
        height: auto;
        display: inline-block;
    }

}

/* Le hero, lui, reste court jusqu'a 1024 : c'est une question de place a
   l'ecran, pas de gabarit d'en-tete. */
@media (max-width: 1024px) {
    .gac-home .gac-hero {
        min-height: 380px;
    }
    .gac-home .gac-hero__overlay {
        padding: 1.6em 1.2em;
    }
}

/* ------------------------------------------------------------
   Volet de navigation mobile

   Refait le 29/08/2026 sur le releve du menu-drawer d'Horizon a 390 px :
   - panneau `min(95vw, 500px)`, blanc, SANS ombre et SANS voile sombre
     (aucun overlay peint chez la source, la page reste visible a cote) ;
   - croix en haut a gauche, icone 14x14 au trait 1.5 dans une cible de
     46x46 posee a 0,7 - la meme place que le burger qu'elle remplace ;
   - la liste commence a y=52 ; entrees Inter 28/38,8, `a` a 4px 0,
     `li` a 12,8 px de marge basse, AUCUN filet separateur ;
   - le sous-menu est TOUJOURS deplie, sans bouton +, sans retrait :
     memes 18,2 px de gauche, entrees 16/25,6 ;
   - pas de lien de compte en pied de volet (utility-links vide chez elle) ;
   - cascade d'ouverture `menu-drawer-nav-open` : 0,2 s, translate(-0.5rem)
     -> 0 et fondu, retard 0,2 s + 0,1 s par entree de premier niveau.
   Les pieces du volet sont posees dans le DOM a toutes les tailles : hors
   mobile elles restent cachees.
   ------------------------------------------------------------ */
.gac-nav__close,
.gac-nav-scrim {
    display: none;
}

/* Le volet coulissant s'arrête à 749 : au-delà, le menu s'affiche en clair
   sur une seconde rangée. La bascule est à 750, pas à 1024. */
@media (max-width: 749px) {
    .gac-nav__close { display: flex; }
    /* Le voile ne peint RIEN (la source n'assombrit pas la page) : il ne
       sert qu'a fermer le volet d'un clic hors panneau. */
    .gac-nav-scrim { display: block; }

    body.gac-nav-open .site-header {
        z-index: 10000;
    }
    .gac-nav-scrim {
        position: fixed;
        inset: 0;
        background: transparent;
        pointer-events: none;
        z-index: 9998;
    }
    .gac-nav-open .gac-nav-scrim {
        pointer-events: auto;
    }

    /* Storefront ships two menus and shows the handheld copy inline under
       the header: it is the unfolded list of every collection. The drawer
       below is built on the main one, so the copy goes. */
    .main-navigation .handheld-navigation {
        display: none !important;
    }

    /* Storefront cache le bouton MENU des 768 px ; la bascule etant a 749,
       il le faut visible sur toute cette plage. */
    .main-navigation .menu-toggle {
        display: block !important;
    }

    /* Pendant un redimensionnement, le panneau passe de son etat bureau
       (en flux, sans transform) a l'etat mobile (fixe, translateX(-100%)) :
       la transition animait ce saut et le volet flashait - ouvert puis
       referme en 0,2 s. gac-ui.js pose la classe le temps du resize. */
    .dgc-resize-en-cours .primary-navigation {
        transition: none !important;
    }
    .storefront-primary-navigation .main-navigation .primary-navigation {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 88%;
        max-width: 380px;
        background: #fff;
        z-index: 9999;
        transform: translateX(-100%);
        /* Ferme, le panneau est hors ecran ET hors de l'arbre accessible :
           sans visibility, ses liens restaient tabulables derriere la page.
           La transition ci-dessous nommait deja visibility - la valeur
           manquait. */
        visibility: hidden;
        /* transform .2s, comme `transition: transform .2s, visibility .2s,
           opacity .2s` du panneau de la source - pas .28s ease. */
        transition: transform .2s, visibility .2s;
        overflow-y: auto;
        display: flex !important;
        flex-direction: column;
        /* La liste commence a 52 px du haut, sous la rangee de la croix. */
        padding: 52px 0 24px;
        box-shadow: none;
    }
    .main-navigation.toggled .primary-navigation {
        transform: translateX(0);
        visibility: visible;
    }

    /* La croix : l'icone de la source (14x14, trait 1.5, bouts ronds) dans
       une cible de 46x46 a 0,7 - la place exacte du burger qu'elle couvre. */
    .gac-nav__close {
        position: absolute;
        top: 7px;
        left: 0;
        width: 46px;
        height: 46px;
        align-items: center;
        justify-content: center;
        background: none;
        border: 0;
        padding: 0;
        color: rgba(0, 0, 0, 0.81);
        cursor: pointer;
    }
    .gac-nav__close svg { display: block; }
    .gac-nav__close:hover,
    .gac-nav__close:focus-visible {
        background: none;
        color: rgba(0, 0, 0, 0.81);
    }

    .storefront-primary-navigation .main-navigation ul.menu,
    .storefront-primary-navigation .main-navigation ul.nav-menu {
        display: block;
        margin: 0;
        padding: 0 18.2px;
        float: none;
        width: auto;
    }
    /* Storefront scopes its own reset to .site-header ...: the overrides
       need the same depth to survive it. AUCUN filet entre les entrees
       (la source n'en peint pas) ; 12,8 px de marge sous chaque entree de
       premier niveau. */
    .site-header .storefront-primary-navigation .main-navigation ul.menu li,
    .site-header .storefront-primary-navigation .main-navigation ul.nav-menu li {
        display: block;
        float: none;
        width: auto;
        position: relative;
        border-bottom: 0;
    }
    .site-header .storefront-primary-navigation .main-navigation ul.menu > li,
    .site-header .storefront-primary-navigation .main-navigation ul.nav-menu > li {
        margin: 0 0 12.8px;
    }


    .storefront-primary-navigation .main-navigation ul.menu li a,
    .storefront-primary-navigation .main-navigation ul.nav-menu li a {
        display: block;
        padding: 4px 0;
        color: rgba(0, 0, 0, 0.81);
        text-transform: none;
        letter-spacing: 0;
        white-space: normal;
    }

    /* Le sous-menu est TOUJOURS deplie chez la source : pas de bouton +,
       pas de retrait, entrees Inter 16/25,6 au meme bord que les parents. */
    .site-header .storefront-primary-navigation .main-navigation ul.menu li > ul.sub-menu,
    .site-header .storefront-primary-navigation .main-navigation ul.nav-menu li > ul.sub-menu {
        display: block;
        position: static;
        float: none;
        width: auto;
        box-shadow: none;
        border: 0;
        background: none;
        margin: 0;
        padding: 0;
        opacity: 1;
        visibility: visible;
    }
    .storefront-primary-navigation .main-navigation ul.sub-menu li a {
        padding: 4px 0;
        font-size: 16px;
        line-height: 25.6px;
        color: rgba(0, 0, 0, 0.81);
    }

    /* Au survol la source passe l'entree en GRAISSE 500 (mesure sur le span
       `menu-drawer__menu-item-text` : 400 -> 500), sans changer la couleur ni
       souligner - entrees principales ET sous-menu. Nos regles de menu de
       bureau (vert + soulignement) ne doivent pas entrer dans le volet. */
    .site-header .storefront-primary-navigation .main-navigation .primary-navigation ul.menu li a:hover,
    .site-header .storefront-primary-navigation .main-navigation .primary-navigation ul.nav-menu li a:hover,
    .site-header .storefront-primary-navigation .main-navigation .primary-navigation ul.menu li a:focus-visible,
    .site-header .storefront-primary-navigation .main-navigation .primary-navigation ul.nav-menu li a:focus-visible {
        color: rgba(0, 0, 0, 0.81);
        text-decoration: none;
        background: none;
        font-weight: 500;
    }
    /* Survoler un sous-menu survole aussi son parent : les regles de bureau
       (`li:hover > a`, `li.focus > a`) verdissaient « Suspensions » pendant
       qu'on parcourait Chambre / Salon. Dans le volet, un parent survole par
       descendance garde sa couleur et sa graisse. */
    .site-header .storefront-primary-navigation .main-navigation .primary-navigation ul.menu li:hover > a,
    .site-header .storefront-primary-navigation .main-navigation .primary-navigation ul.nav-menu li:hover > a,
    .site-header .storefront-primary-navigation .main-navigation .primary-navigation ul.menu li.focus > a,
    .site-header .storefront-primary-navigation .main-navigation .primary-navigation ul.nav-menu li.focus > a {
        color: rgba(0, 0, 0, 0.81);
        text-decoration: none;
        background: none;
    }

    body.gac-nav-open { overflow: hidden; }
    /* Le verrou de defilement DOIT atteindre la fenetre : notre
       `html { overflow-x: clip }` empeche l'overflow du body de se propager
       au viewport, la page continuait de defiler et gardait sa barre - d'ou
       aussi un volet qui semblait plus large que celui de la source. */
    html:has(body.gac-nav-open) { overflow: hidden; }
}

/* ------------------------------------------------------------
   Indicateur de stock au-dessus du bouton d'achat
   ------------------------------------------------------------ */
.gac-stock {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 .9em;
    font-size: .95em;
    color: #333;
}
.gac-stock[hidden] { display: none !important; }
.gac-stock__dot {
    position: relative;
    width: 12px;
    height: 12px;
    margin: 4px;
    border-radius: 50%;
    background: #28a745;
    flex: 0 0 auto;
}
.gac-stock__dot::before {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(40, 167, 69, .2);
}
.gac-stock.is-low .gac-stock__dot { background: #dc3545; }
.gac-stock.is-low .gac-stock__dot::before { background: rgba(220, 53, 69, .2); }


/* PAS D'OMBRE PORTEE COLOREE sur les boutons : `box-shadow: none`.

   Le survol, lui, EST anime - fond `#000` vers `#333` en .125s, et
   `scale: .99; translate: 0 1px` au clic. Ne pas neutraliser ce comportement
   en `!important` : il est pose plus bas, section « les boutons », et un
   bloc d'exception ici gagnerait en silence. */
.gac-btn:hover,
.gac-cart-checkout:hover,
.gac-sticky__button:hover,
.single-product form.cart .single_add_to_cart_button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
    /* Même valeur qu'au repos, et non `none` : un état qui change pour rien
       ressort dans `survols.js` et fait chercher une cause inexistante. */
    box-shadow: inset 0 0 0 0 transparent;
}


/* ------------------------------------------------------------
   Page de connexion : un bloc etroit centre, champs en gelule et un
   seul bouton pleine largeur.
   ------------------------------------------------------------ */
.gac-login {
    max-width: 26rem;
    margin: 3em auto 5em;
    text-align: left;
}
.gac-login__title {
    font-size: 2em;
    margin: 0 0 .2em;
}
.gac-login__sub {
    color: #6b6b6b;
    margin: 0 0 2em;
}
.woocommerce-account .gac-login form.login {
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: 0;
}
.gac-login .form-row {
    margin: 0 0 .9em;
    padding: 0;
}
.gac-login input.input-text {
    width: 100%;
    padding: .95em 1.3em;
    border: 1px solid var(--gac-border);
    border-radius: 40px;
    background: #fff;
    font-size: 1em;
    line-height: 1.3;
}
.gac-login input.input-text:focus {
    border-color: var(--gac-primary);
    outline: none;
    box-shadow: 0 0 0 1px var(--gac-primary);
}
.gac-login__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    margin: .3em 0 1.4em;
    font-size: .95em;
}
.gac-login__remember {
    display: flex;
    align-items: center;
    gap: .5em;
    margin: 0;
}
.gac-login__lost {
    color: var(--gac-primary);
}
.gac-login .gac-login__submit {
    width: 100%;
    border-radius: 40px;
    padding: 1em 1.4em;
    font-size: .95em;
}

/* Le titre de la page reste, mais l'entree en matiere de WooCommerce
   (« Bonjour ... ») et sa navigation n'ont pas lieu d'etre sur un
   formulaire de connexion. */
.woocommerce-account:not(.logged-in) .woocommerce-MyAccount-navigation {
    display: none;
}

/* ------------------------------------------------------------
   En-tete de section : petite ligne capitale au-dessus, puis le grand
   titre.
   ------------------------------------------------------------ */
.gac-section__kicker {
    margin: 0 0 .5em;
    font-size: .82em;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gac-ink);
}
.gac-section--products .gac-section__title {
    margin-top: 0;
}

/* ------------------------------------------------------------
   Bloc de texte long : deux colonnes, photo calee dans un carre de
   marque decale.
   ------------------------------------------------------------ */
.gac-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4em;
    align-items: center;
    text-align: left;
}
.gac-copy .gac-section__title {
    font-size: 1.15em;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: left;
    margin: 0 0 1em;
}
.gac-copy__text p {
    margin: 0 0 1.4em;
}
.gac-copy__media {
    position: relative;
    padding: 2.4em 2.4em 2.4em 0;
}
.gac-copy__media::before {
    content: "";
    position: absolute;
    inset: 0 0 0 3.2em;
    background: var(--gac-primary);
}
.gac-copy__media img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 900px) {
    .gac-copy {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.4em;
    }
    .gac-copy__media {
        padding: 1.6em 1.6em 1.6em 0;
    }
    .gac-copy__media::before {
        inset: 0 0 0 2em;
    }
}

/* WooCommerce colle un lien « Voir le panier » a cote du bouton apres un
   ajout en AJAX. On ne le montre pas : le volet de droite est le retour. */
.added_to_cart,
.wc-forward.added_to_cart {
    display: none !important;
}

/* La colonne de contenu de Storefront reste calee sur une largeur de mise
   en page a barre laterale : la page de compte la reprend en entier pour
   que le bloc de connexion tombe au milieu de l'ecran. */
.woocommerce-account .content-area,
.woocommerce-account .site-main,
.woocommerce-account .entry-content,
.woocommerce-account .entry-content > .woocommerce {
    width: 100%;
    max-width: none;
    float: none;
    margin-left: 0;
    margin-right: 0;
}
.woocommerce-account .entry-header .entry-title {
    text-align: center;
}

/* L'oeil de WooCommerce se fond dans le champ au lieu de deborder en
   carre de couleur. */
.gac-login .password-input {
    display: block;
    position: relative;
}
.gac-login .show-password-input {
    position: absolute;
    top: 50%;
    right: 1.1em;
    transform: translateY(-50%);
    background: none;
    color: #8a8a8a;
    padding: 0;
    border: 0;
}
.gac-login .show-password-input::after {
    content: none;
}

/* ============================================================
   LE TUNNEL ET L'ESPACE CLIENT, REPRIS DE GALERIE SAC A DOS
   ============================================================
   Les quatre boutiques copient les MEMES ecrans Shopify : le tunnel
   `checkout-web` et l'application de compte client. Le dessin, les gestes et
   les transitions sont donc les memes partout, et ce bloc est la copie finie
   de Galerie Sac a Dos - sections « LE TUNNEL ET L'ESPACE CLIENT » de son
   `style.css` (4759-9521 au 06/09/2026), elle-meme reprise de Sveve Lys. On
   reprend le bloc ENTIER, pas des tranches greffees sur un autre socle :
   c'est le choix deja fait pour Brelmont (`brl-tunnel.css`).

   Galerie Sac a Dos plutot que Sveve Lys pour une raison mesurée, pas de
   gout : c'est la version PARAMETREE. Sveve Lys a configure Inter et un gras
   a 700 dans son checkout, et sa couleur de marque est le noir, si bien que
   son releve a fige `#000`, `Inter` et `700` en dur dans chaque regle.
   Galerie Sac a Dos, qui a une couleur de marque, les a sortis en jetons
   (`--co-accent`, `--co-police`, `--co-gras`). Dog Cherie est dans le meme
   cas que lui : couleur de marque, pile systeme, gras a 600.

   CE QUI CHANGE POUR DOG CHERIE, et rien d'autre : les jetons ci-dessous, et
   l'EN-TETE, qui n'est pas une bande mais la premiere rangee de la colonne de
   droite (voir « L'EN-TETE DU TUNNEL » plus bas). Tout le reste est identique
   au caractere pres.

   Les valeurs sont LUES sur la caisse en ligne de dogcherie.co.uk le
   10/09/2026, par Chromium sans ecran a 1440 x 1400, sur le permalien de
   panier `/cart/55482303611266:1` qui mene au checkout - jamais estimees sur
   une capture. `checkoutBranding` de l'API Admin repond ACCESS_DENIED hors
   plan Plus (~/Ecom/archives/dogcherie/raw/checkout_branding.json) : la page
   servie est la seule source.
   ============================================================ */

/* ============================================================
   Le tunnel : caisse et remerciement

   Les nombres qui suivent ne sont pas arrondis « au propre » : 49 px de haut
   pour un champ, 18,9 px d'interligne, 41 px de gouttière gauche, ce sont les
   valeurs peintes.

   Le repère qui commande tout le reste : la césure des deux colonnes tombe
   à `50% + 50px`, et non au milieu. Le contenu de gauche (499 px) est collé
   au bord droit de sa colonne, celui de droite (401 px) au bord gauche de la
   sienne — d'où un bloc de 980 px optiquement centré, mais un fond gris qui
   couvre un peu plus de la moitié droite de la page.
   ============================================================ */

.dgc-tunnel {
    /* LA COULEUR DE MARQUE.

       `--x-default-color-accent` vaut rgb(233,76,120) sur la caisse de Dog
       Cherie - lu au style calcule sur la case cochee, ou checkout-web le
       recopie dans son propre jeton `--_1mmswk91`. Sveve Lys donne
       hsl(0,0%,0%), Galerie Sac a Dos rgb(162,99,99).

       Elle porte le bouton principal (fond mesure rgb(233,76,120) sur
       « Pay now »), le sac de l'en-tete (rgb(233,76,120) en `color` et en
       `stroke`), les liens (« Sign in » et les liens legaux du bas de
       colonne), l'anneau de focus, et tout ce qui est choisi : puce de radio,
       case cochee (`box-shadow: inset 0 0 0 10px`), mode de livraison retenu.
       Elle ne porte PAS le texte : `--x-default-color-text` vaut #000000.

       Le filet du champ FOCALISE se peint a rgb(233,76,122), deux points de
       bleu plus loin : c'est un second jeton de la source, pas une derive de
       mesure. L'ecart est invisible et ne justifie pas un jeton de plus. */
    --co-accent: #E94C78;
    /* Le fond du bouton principal au survol, au focus et au clic : la source
       passe a rgb(196,54,96). Lu au style calcule sur « Pay now », pseudo-etat
       force au survol puis souris enfoncee - les deux donnent la meme valeur,
       la source ne distingue pas le clic du survol. */
    --co-accent-survol: #C43660;

    /* LA POLICE ET LA GRAISSE DU GRAS.

       Dog Cherie ne configure ni police ni graisse dans son checkout, comme
       Galerie Sac a Dos : ses deux ecrans retombent sur les valeurs par
       defaut de l'application. `--x-typography-primary-fonts` resout sur la
       pile systeme et `--x-typography-primary-weight-bold` vaut 600 - les
       deux lus sur la page servie. Sveve Lys, lui, avait pose Inter et 700.

       C'est la difference la plus visible entre les boutiques sur ces ecrans,
       et elle ne se voit sur aucune capture au repos : elle change la largeur
       de chaque mot.

       La pile est recopiee telle que la source la DECLARE : son deuxieme
       terme est `system-ui`, pas `BlinkMacSystemFont`. Les deux resolvent sur
       la meme fonte sur macOS, mais c'est la valeur lue qui s'ecrit.
       Graisse 600 confirmee sur « Contact » (20 px / 24 px / 600). */
    --co-police: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial,
        sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --co-gras: 600;

    /* LA BASE DE 14 PX.

       La source sert ces ecrans en 14 : sa racine est a 10 px et son
       `--x-typography-size-default` vaut 1.4rem (lus tous les deux). La
       feuille portee vient de Sveve Lys, dont tout le site est deja en
       `body { font-size: .875rem }` : la ligne est donc redondante ici, et
       gardee parce qu'elle rend le bloc independant de son socle.

       L'INTERLIGNE EST 18,9 PX, pas les 22,4 px (14 x 1,6) que peint Sveve
       Lys : mesure du 10/09/2026 sur la caisse en ligne, meme valeur sur la
       racine du contenu, sur les libelles, sur les champs et sur le texte
       d'aide. Les blocs qui en veulent un autre le declarent en pixels plus
       bas (« Contact » : 20 px / 24 px / 600). */
    font-size: 14px;
    line-height: 18.9px;

    /* L'erreur, en deux teintes : le filet du champ et le texte du message.
       Mesurees le 10/09/2026 sur l'export en faute, voir « L'ERREUR EST ROSE »
       plus bas. Aucune des deux n'est un rouge. */
    --co-faute: #E94C7A;
    --co-faute-texte: #D53C6B;

    --co-bord: #DEDEDE;
    --co-fond: #F5F5F5;
    --co-fond2: #F6F6F6;
    --co-gris: #707070;
    --co-gris2: #666;
    /* 8 / 12 / 16 px : `--x-border-radius-small`, `-base` et `-large` de la
       source, lus tels quels. Memes valeurs que chez les trois autres. */
    --co-r: 12px;
    --co-r-s: 8px;
    --co-r-l: 16px;
    /* PAS DE BANDE D'EN-TETE. La source de Dog Cherie ne pose pas la bande de
       81 px des trois autres : ses deux colonnes commencent a y=0 et le logo
       est dans la colonne de droite. Mesure du 10/09/2026 a 1440 : colonne
       blanche 0 -> 770, colonne grise 770 -> 1440, « Express checkout » a
       y=40 et logo a y=40. Voir « L'EN-TETE DU TUNNEL » plus bas. */
    --co-tete: 0px;
}

/* ------------------------------------------------------------
   1. Le décor : Storefront rend la page pleine largeur
   ------------------------------------------------------------ */
.dgc-tunnel .dgc-fil-bloc,
.dgc-tunnel .entry-header,
.dgc-tunnel .dgc-announcement-bar,
.dgc-tunnel .site-footer {
    display: none !important;
}
.dgc-tunnel .site-content .col-full,
.dgc-tunnel .content-area,
.dgc-tunnel .site-main,
.dgc-tunnel .entry-content,
.dgc-tunnel #primary {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.dgc-tunnel .site-content {
    margin: 0;
    padding: 0;
}
/* WooCommerce enveloppe le tunnel dans un `div.woocommerce` porteur de 24 px
   de marge basse. Les colonnes montent jusqu'au bas de la fenêtre, et ces
   24 px s'ajouteraient DESSOUS : la page dépasserait de 24 px, donc
   défilerait pour rien, et laisserait une bande claire sous le gris. */
.dgc-tunnel .entry-content > .woocommerce,
.dgc-tunnel .woocommerce,
.dgc-tunnel .hentry,
.dgc-tunnel .site-main,
.dgc-tunnel .content-area {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
/* Storefront flotte #order_review a 38,2 % : le recapitulatif tomberait a
   165 px de large et le nom du produit se couperait lettre par lettre. Il lui
   pose AUSSI un fond blanc, qui dessine un rectangle clair derriere le resume
   au milieu de la colonne grise - le resume se pose a meme le gris. */
.dgc-tunnel #order_review {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.dgc-tunnel #order_review,
.dgc-tunnel #customer_details,
.dgc-tunnel .col2-set,
.dgc-tunnel .col2-set .col-1,
.dgc-tunnel .col2-set .col-2 {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
}

/* ------------------------------------------------------------
   2. L'EN-TETE DU TUNNEL : PAS UNE BANDE, LA PREMIERE RANGEE DE
      LA COLONNE DE DROITE

   C'est le seul ecart de GEOMETRIE entre Dog Cherie et les trois autres
   boutiques sur ces pages, et il est configure cote Shopify, pas dessine.

     - Sveve Lys, Galerie Sac a Dos, Brelmont : une bande pleine largeur de
       81 px, filet en bas, au-DESSUS des deux colonnes. Logo a gauche du
       contenu (180 px) ou centre (160 px).
     - Dog Cherie : aucune bande. Les deux colonnes commencent a y=0, et le
       logo est le premier element de la colonne GRISE, sa gouttiere de 40 px
       comprise. Le sac est a l'autre bout de la meme rangee.

   Mesure du 10/09/2026 sur la caisse en ligne, trois largeurs :

     1440 : colonne blanche 0 -> 770, colonne grise 770 -> 1440. Rangee
            d'en-tete x=810, y=40, 400 de large, grille `336px 24px` avec
            40 px de gouttiere. Logo 200 x 50, sac 24 x 24 a x=1186.
            « Express checkout », en tete de la colonne blanche, est a y=40
            lui aussi : la colonne de gauche ne recule pas.
      999 : une seule colonne. Rangee x=223,5, y=20, 552 de large, meme
            grille `1fr 24px` et meme gouttiere de 40. Logo inchange.
      390 : une seule colonne. Rangee x=14, y=20, 362 de large (gouttieres de
            14), grille `298px 24px`. Logo inchange.

   Le logo est servi a 200 x 50 aux trois largeurs : il ne se reduit pas.
   ------------------------------------------------------------ */
/* Storefront rend son en-tete de site sur ces pages comme sur les autres : il
   ne porte plus rien (inc-checkout.php retire ses accroches), mais sa boite
   et son filet resteraient. La source n'a pas de bande : il disparait. */
.dgc-tunnel .site-header {
    display: none !important;
}
/* La rangee d'en-tete est un ELEMENT DE LA GRILLE du formulaire, pas une
   bande posee devant : c'est ce qui fait commencer le gris a y=0 tout en
   laissant la colonne de gauche demarrer a 40. Elle occupe la deuxieme
   colonne, premiere rangee ; le recapitulatif prend la seconde rangee et la
   colonne de gauche enjambe les deux. */
.dgc-co-tete {
    grid-column: 2;
    grid-row: 1;
    background: var(--co-fond);
    box-shadow: inset 1px 0 0 var(--co-bord);
    /* 40 partout : le contenu de la colonne grise commence a x=810 sur la
       source (logo a 810, vignette et champ de code a 811 avec leur filet de
       1 px), et la colonne demarre a 770. Le trait de separation est peint en
       ombre INTERNE, qui ne pousse pas le contenu - d'ou 40 et non 39.
       RIEN sous la rangee : les 21 px qui la separent de la premiere vignette
       sont portes par le haut du recapitulatif. Mesure du 10/09/2026 :
       logo 40 -> 90, premiere vignette a 111. */
    padding: 40px 40px 0 40px;
}
.dgc-co-tete__bande {
    display: grid;
    /* `minmax(auto, max-content)` et non `auto` : le sac garde ses 24 px meme
       quand le logo deborde. */
    grid-template-columns: minmax(0, 1fr) minmax(auto, max-content);
    align-items: center;
    gap: 40px;
    max-width: 401px;
    padding: 0;
}
.dgc-co-tete__logo {
    display: block;
    box-shadow: none;
}
.dgc-co-tete__logo img {
    display: block;
    width: 200px;
    height: 50px;
    max-height: none;
    border-radius: 0;
}
/* Le sac est AU REPOS dans la couleur de marque chez la source (color et
   stroke a rgb(233,76,120), lus au style calcule), et s'assombrit au survol. */
.dgc-tunnel .dgc-co-tete__panier { color: var(--co-accent); }
.dgc-tunnel .dgc-co-tete__panier:hover,
.dgc-tunnel .dgc-co-tete__panier:focus { color: var(--co-accent-survol); }
.dgc-co-tete__panier {
    display: flex;
    justify-content: flex-end;
}
.dgc-co-tete__panier svg { display: block; }

/* Sous 1000 px la grille passe sur une colonne : la rangee redevient le
   premier element de la page, sur toute la largeur du contenu, a 20 px du
   haut, et perd le fond gris et le filet - la source la sert sur blanc. */
@media (max-width: 999px) {
    .dgc-co-tete {
        grid-column: 1;
        grid-row: auto;
        background: none;
        box-shadow: none;
        padding: 20px 14px 20px;
    }
    .dgc-co-tete__bande { max-width: none; }
}

/* ------------------------------------------------------------
   3. Les deux colonnes
   ------------------------------------------------------------ */
/* Storefront pose un clearfix `form::before { content:""; display:table }`.
   Dans une grille, ce pseudo-élément devient un ÉLÉMENT DE GRILLE : il occupe
   la première case, pousse la colonne de gauche dans la case de droite et
   renvoie le récapitulatif à la ligne suivante. La grille est bonne
   (770 px + 670 px) : c'est le fantôme qui décale tout. */
.dgc-tunnel form.checkout::before,
.dgc-tunnel form.checkout::after,
.dgc-co::before,
.dgc-co::after {
    content: none !important;
    display: none !important;
}
/* ------------------------------------------------------------
   Le squelette de chargement
   ------------------------------------------------------------
   Mesure sur la source : 200 ms d'en-tete seul, 350 ms de montee des paves,
   un temps de pose, puis 140 ms de fondu croise avec le vrai formulaire.
   Les paves sont #E7E7E7 sur la colonne blanche et #CCCCCC sur la grise :
   deux teintes distinctes, pas une meme opacite sur deux fonds. */
.dgc-sq {
    position: fixed;
    top: var(--co-tete);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: calc(50% + 50px) minmax(0, 1fr);
    align-items: stretch;
    pointer-events: none;
    opacity: 0;
}
.dgc-co-attend .dgc-sq {
    animation: dgc-sq-monte 350ms cubic-bezier(0, 0, .2, 1) 200ms both;
}
.dgc-sq__colonne--principale {
    background: #fff;
    padding: 40px 41px 40px 40px;
    --sq-teinte: #E7E7E7;
}
.dgc-sq__colonne--resume {
    background: var(--co-fond);
    padding: 40px 40px 40px 39px;
    box-shadow: inset 1px 0 0 var(--co-bord);
    --sq-teinte: #CCC;
}
.dgc-sq__colonne--principale > .dgc-sq__contenu {
    max-width: 499px;
    margin-left: auto;
}
.dgc-sq__colonne--resume > .dgc-sq__contenu {
    max-width: 401px;
    margin-right: auto;
}
.dgc-sq__pave {
    display: block;
    background: var(--sq-teinte);
    border-radius: var(--co-r-s);
}
.dgc-sq__pave--titre { width: 140px; height: 20px; margin: 24px 0 14px; }
.dgc-sq__contenu > .dgc-sq__pave--titre:first-child { margin-top: 0; }
.dgc-sq__pave--champ { height: 48px; border-radius: var(--co-r); margin-bottom: 10px; }
.dgc-sq__pave--case { width: 260px; height: 16px; margin: 4px 0 0; }
.dgc-sq__paire { display: flex; gap: 10px; }
.dgc-sq__paire > .dgc-sq__pave { flex: 1; }
.dgc-sq__ligne {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}
.dgc-sq__pave--vignette { flex: 0 0 auto; width: 64px; height: 64px; border-radius: var(--co-r-l); }
.dgc-sq__corps { flex: 1; }
.dgc-sq__pave--nom { width: 70%; height: 12px; margin-bottom: 8px; }
.dgc-sq__pave--variante { width: 40%; height: 12px; }
.dgc-sq__pave--prix { flex: 0 0 auto; width: 56px; height: 12px; }
.dgc-sq__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
}
.dgc-sq__total--gros { margin-top: 20px; }
.dgc-sq__pave--libelle { width: 84px; height: 12px; }
.dgc-sq__pave--montant { width: 60px; height: 12px; }
.dgc-sq__total--gros .dgc-sq__pave--libelle { width: 100px; height: 16px; }
.dgc-sq__total--gros .dgc-sq__pave--montant { width: 84px; height: 16px; }

/* Le formulaire n'est masque que si le script tourne. */
.dgc-co-attend .dgc-tunnel form.checkout.dgc-co { opacity: 0; }
.dgc-tunnel form.checkout.dgc-co {
    opacity: 1;
    transition: opacity 140ms linear;
}

@keyframes dgc-sq-monte {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 999, pas 1000 : le vrai tunnel bascule a 999px, et a 1000px pile le
   squelette peignait une colonne sur une page qui en affiche deux. */
@media (max-width: 999px) {
    .dgc-sq {
        grid-template-columns: 1fr;
        grid-template-rows: 64px 1fr;
    }
    .dgc-sq__colonne--resume > .dgc-sq__contenu { display: none; }
    .dgc-sq__colonne--principale { padding: 24px 14px; order: 2; }
    .dgc-sq__colonne--resume { padding: 0; order: 1; }
    .dgc-sq__colonne--principale > .dgc-sq__contenu {
        max-width: 552px;
        margin: 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dgc-co-attend .dgc-sq { animation-duration: 1ms; animation-delay: 0ms; }
    .dgc-tunnel form.checkout.dgc-co { transition-duration: 1ms; }
}

.dgc-co {
    display: grid;
    grid-template-columns: calc(50% + 50px) minmax(0, 1fr);
    /* La rangee d'en-tete prend sa hauteur de contenu, le recapitulatif prend
       le reste. Sans cette ligne les deux rangees se partagent la hauteur de
       la colonne de gauche et le recapitulatif descend d'un demi-ecran sous le
       logo (mesure du 10/09/2026 sur la copie servie : 550 px de vide). */
    grid-template-rows: max-content minmax(0, 1fr);
    align-items: stretch;
    min-height: calc(100vh - var(--co-tete));
    margin: 0;
    max-width: none;
    font-family: var(--co-police);
    font-size: 14px;
    line-height: 18.9px;
    color: #000;
}
/* PLACEMENT EXPLICITE, et il n'est pas facultatif.
   `.dgc-co-tete` est le premier element de la grille et se pose en clair sur
   (colonne 2, rangee 1). Le placement automatique donne alors la rangee 1
   colonne 1 a la colonne principale, puis la rangee 2 COLONNE 1 au
   recapitulatif : les deux colonnes s'empilent, et la colonne grise s'etire
   sur toute la hauteur. Mesure du 10/09/2026 sur la copie servie. */
.dgc-co__colonne--principale {
    grid-column: 1;
    grid-row: 1 / span 2;
    background: #fff;
    padding: 40px 41px 40px 40px;
}
.dgc-co__colonne--principale > .dgc-co__contenu {
    max-width: 499px;
    margin-left: auto;
}
.dgc-co__colonne--resume {
    grid-column: 2;
    grid-row: 2;
    background: var(--co-fond);
    /* 21 px sous la rangee d'en-tete, qui n'en porte aucun : la source pose sa
       premiere vignette a y=111 quand le logo finit a 90 (mesure du
       10/09/2026). 40 a gauche, comme la rangee. */
    padding: 21px 40px 40px 40px;
    /* Le filet qui separe les deux colonnes sur la source : 1 px #DEDEDE.
       En ombre interne plutot qu'en bordure, pour ne pas decaler la grille
       d'un pixel. */
    box-shadow: inset 1px 0 0 var(--co-bord);
}
.dgc-co__colonne--resume > .dgc-co__contenu {
    /* 400 : 48 rem de colonne moins 40 de marge de chaque cote, comme la
       source (mesure sur l'export de sa page). */
    max-width: 400px;
    margin-right: auto;
}

/* ------------------------------------------------------------
   4. Titres et sections
   ------------------------------------------------------------ */
.dgc-co__titre {
    font-family: inherit;
    font-size: 20px;
    line-height: 24px;
    font-weight: var(--co-gras);
    letter-spacing: normal;
    text-transform: none;
    color: #000;
    margin: 0 0 4px;
}
.dgc-co__soustitre {
    font-family: inherit;
    font-size: 16px;
    line-height: 19.2px;
    font-weight: var(--co-gras);
    letter-spacing: normal;
    text-transform: none;
    color: #000;
    /* 14 px sous le titre, pas 4 : dans la grille des champs, le meme ecart
       se compose de la gouttiere de 10 et d'une marge de 4 ; ici le bloc est
       hors grille, la marge porte tout. */
    margin: 24px 0 14px;
}
.dgc-co__titre--paiement { margin-top: 32px; }
/* 14/18,9. Un releve sur capture avait conclu a 13 px, mais les deux fenetres
   n'etaient pas au meme zoom : l'export de sa page, mesure au navigateur,
   donne 14/18,9 et un texte de 344 px — exactement le notre a 14. */
.dgc-co__lead {
    font-size: 14px;
    line-height: 18.9px;
    color: var(--co-gris);
    margin: 0 0 14px;
}

/* ------------------------------------------------------------
   4 bis. Le paiement express, et le « OR » qui le separe du formulaire
   ------------------------------------------------------------
   La source ouvre sa colonne de gauche par un titre « Express checkout »,
   la rangee des portefeuilles, puis un « OR » centre, et seulement ensuite
   « Contact ». Le bloc n'apparait QUE si un portefeuille repond dans le
   navigateur : chez nous c'est le JS de la passerelle Stripe qui en decide,
   au `ready` de son element (dgc_co_express_ferme(), inc-checkout.php).

   D'ou le `:has()` : le titre n'a pas d'existence propre, il suit a la lettre
   la visibilite du separateur, que la passerelle demasque en retirant son
   `display:none` en ligne. Un titre montre en dur serait un titre orphelin
   les jours ou aucun portefeuille ne repond.

   Mesures de la source (export « withshipping+errors », 1440 px) :
   titre 14/18,9/400 #707070 centre, `margin: 0 0 -2px` ; rangee des
   portefeuilles 16 px plus bas, haute de 48 ; « OR » 14/18,9/400 #707070
   dans une boite a `padding: 20px 0`, et « Contact » commence exactement
   au bas de cette boite. Les 14 px de marge laterale du mot sont ceux de
   la source : c'est la place de ses filets, qu'elle ne peint pas ici. */
.dgc-co__express-tete {
    display: none;
}
.dgc-co__express:has(#wc-stripe-express-checkout-button-separator:not([style*="none"])) .dgc-co__express-tete {
    display: block;
}
.dgc-co__express #express-checkout-heading {
    font-family: inherit;
    font-size: 14px;
    line-height: 18.9px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    text-align: center;
    color: var(--co-gris);
    margin: 0 0 -2px;
}
/* 16 px, contre les `margin-top: 1em` que la passerelle ecrit en ligne et
   qui vaudraient 14 px sous notre corps de tunnel. Le style en ligne est
   retire du HTML plutot que battu a coups de `!important` : un style en
   ligne gagne contre toute feuille (regle C4). */
.dgc-co__express #wc-stripe-express-checkout-element {
    margin-top: 16px;
    /* Zero en bas : les 20 px sous les portefeuilles appartiennent au « OR »
       (son `padding: 20px 0`), et une marge heritee de 12 px les repoussait. */
    margin-bottom: 0;
    clear: both;
}
.dgc-co__ou {
    padding: 20px 0;
}
.dgc-co__ou-rangee {
    display: flex;
    justify-content: center;
}
.dgc-co__ou-mot {
    margin: 0 14px;
}
.dgc-co__ou p {
    margin: 0;
    font-size: 14px;
    line-height: 18.9px;
    text-align: center;
}
.dgc-co__ou span {
    color: var(--co-gris);
    font-weight: 400;
}
.dgc-co__entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 4px;
}
.dgc-co__entete .dgc-co__titre { margin: 0; }
.dgc-co__lien {
    font-size: 14px;
    line-height: 18.9px;
    color: #000;
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* Un seul conteneur, plat : address-i18n.js ramasse tous les `.form-row`,
   les trie par `data-priority` et les recolle dans le parent du premier.
   C'est donc `order` qui décide de la place de chaque pièce, jamais l'ordre
   du DOM — voir l'en-tête de woocommerce/checkout/form-billing.php. */
.dgc-co__grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 10px;
}
.dgc-co__grille > .dgc-co__entete { order: 1; }
.dgc-co__grille > #billing_email_field { order: 2; }
.dgc-co__grille > .dgc-case--lettre { order: 3; }
.dgc-co__grille > .dgc-co__titre--livraison { order: 4; margin-top: 22px; }
.dgc-co__grille > #billing_country_field { order: 5; }
.dgc-co__grille > #billing_first_name_field { order: 6; }
.dgc-co__grille > #billing_last_name_field { order: 7; }
.dgc-co__grille > #billing_company_field { order: 8; }
.dgc-co__grille > #billing_address_1_field { order: 9; }
.dgc-co__grille > #billing_address_2_field { order: 10; }
.dgc-co__grille > #billing_postcode_field { order: 11; }
.dgc-co__grille > #billing_city_field { order: 12; }
.dgc-co__grille > #billing_state_field { order: 13; }
.dgc-co__grille > #billing_phone_field { order: 14; }
/* Un champ ajouté par une extension se range juste avant la dernière case,
   plutôt que de remonter en tête avec `order: 0`. */
.dgc-co__grille > .form-row { order: 15; }
.dgc-co__grille > .woocommerce-account-fields { order: 20; }
.dgc-co__grille > .dgc-co__titre,
.dgc-co__grille > .dgc-co__entete,
.dgc-co__grille > .woocommerce-account-fields,
.dgc-co__grille > .dgc-case,
.dgc-co__grille > .dgc-champ--large,
.dgc-co__grille > .clear {
    grid-column: span 2;
}
.dgc-tunnel .woocommerce-billing-fields > h3,
.dgc-tunnel .woocommerce-shipping-fields > h3,
.dgc-tunnel .woocommerce-additional-fields > h3,
.dgc-tunnel .woocommerce-billing-fields__field-wrapper > .clear,
.dgc-tunnel .dgc-co .clear {
    display: none;
}

/* ------------------------------------------------------------
   5. Les champs : 49 px, rayon 12, étiquette flottante

   Jamais étiquette ET substitut : l'étiquette est centrée dans le champ quand
   il est vide, et glisse en 12 px vers le haut dès qu'il porte une valeur ou
   le curseur. Le substitut du navigateur est donc rendu transparent, et c'est
   l'étiquette qui en tient lieu — un seul texte, jamais deux. `:has()` suffit :
   aucun script.
   ------------------------------------------------------------ */
/* Le cadre du champ vit sur `.woocommerce-input-wrapper`, pas sur la ligne.
   WooCommerce insère son message d'erreur DANS la ligne
   (`<p class="checkout-inline-error-message">`, checkout.js ~1121) : avec une
   hauteur fixe de 49 px sur la ligne, le message débordait et recouvrait la
   case à cocher ou le champ suivant. La ligne grandit donc librement, et
   c'est la boîte intérieure qui garde ses 49 px. */
.dgc-co .form-row {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    height: auto;
    box-sizing: border-box;
}
/* `position: static` et non `relative` : l'etiquette est posee en absolu sur
   la ligne, et le cadre — qui vient APRES elle dans le balisage — la
   recouvrait des qu'il devenait positionne. Les champs se peignaient vides.
   Le `z-index` sur l'etiquette tient la meme promesse si une extension
   repositionne le cadre. */
/* Le cadre est porte par le CHAMP, pas par cette boite : Stripe recopie
   l'apparence de ses propres champs sur `#billing_first_name` (voir
   `build/upe-classic.js`). Tant que le cadre vivait ici, il lisait un champ
   sans bordure ni fond et rendait une carte bancaire toute plate, la ou la
   source montre des champs blancs cernes de 1 px. */
.dgc-co .form-row .woocommerce-input-wrapper {
    display: block;
    position: static;
    background: none;
    border: 0;
}
.dgc-co .dgc-champ--moitie-1,
.dgc-co .dgc-champ--moitie-2 { grid-column: span 1; }
/* WooCommerce repose `form-row-first` / `form-row-last` / `form-row-wide` sur
   chaque champ depuis la locale du pays, et Storefront les fait flotter à
   47 %. Dans la grille, c'est `dgc-champ--*` qui décide de la largeur. */
.dgc-co .form-row-first,
.dgc-co .form-row-last,
.dgc-co .form-row-wide {
    float: none;
    width: auto;
    margin-right: 0;
    margin-left: 0;
}
.dgc-co .form-row > label {
    position: absolute;
    left: 10px;
    top: 9px;
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 16.2px;
    font-weight: 400;
    color: var(--co-gris);
    pointer-events: none;
    transform: none;
    z-index: 1;
    transition: top .1s ease, font-size .1s ease, transform .1s ease;
}
.dgc-co .form-row > label .required,
.dgc-co .form-row > label .optional { display: none; }
.dgc-co .form-row input.input-text,
.dgc-co .form-row select,
.dgc-co .form-row textarea {
    width: 100%;
    height: 49px;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid var(--co-bord);
    outline: 0;
    background: #fff;
    border-radius: var(--co-r);
    padding: 21px 10px 6px;
    font-family: inherit;
    font-size: 14px;
    line-height: 18.9px;
    color: #000;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}
.dgc-co .form-row input.input-text::placeholder { color: transparent; }
.dgc-co .form-row:has(input.input-text:placeholder-shown:not(:focus)) > label {
    /* Centré sur la BOÎTE (49 px), pas sur la ligne : celle-ci grandit quand
       un message d'erreur s'y ajoute, et l'étiquette descendait avec elle. */
    top: 24.5px;
    transform: translateY(-50%);
    font-size: 14px;
    line-height: 18.9px;
}
.dgc-co .form-row input.input-text:focus,
.dgc-co .form-row select:focus,
.dgc-co .form-row textarea:focus {
    border-color: var(--co-accent);
    box-shadow: 0 0 0 1px var(--co-accent);
}

/* L'ERREUR EST ROSE, PAS ROUGE.

   Sveve Lys peignait ses erreurs en #D91C1C, et la recopie l'avait gardé. Dog
   Cherie n'a pas de rouge du tout : son champ fautif prend un filet de 1 px
   `rgb(233,76,122)` DOUBLE d'une ombre de 1 px de la meme couleur (donc 2 px a
   l'oeil), et son message une teinte legerement plus sombre,
   `rgb(213,60,107)`. Mesure du 10/09/2026 au style calcule sur l'export
   `checkout-withshipping+errors` : e-mail et code postal en faute donnent tous
   deux ce filet, « City », « First name » et « Address » gardent le #DEDEDE
   ordinaire, et aucun champ n'avait le focus.

   Le filet d'erreur est la meme valeur que l'anneau de focus (#E94C7A, deux
   points de bleu apres l'accent) : la source ne distingue pas les deux. */
.dgc-co .form-row.woocommerce-invalid input.input-text,
.dgc-co .form-row.woocommerce-invalid select,
.dgc-co .form-row.woocommerce-invalid textarea {
    border-color: var(--co-faute);
    box-shadow: 0 0 0 1px var(--co-faute);
}
.dgc-co .checkout-inline-error-message {
    display: block;
    margin: 4px 0 0;
    padding: 0;
    font-size: 14px;
    line-height: 18.9px;
    color: var(--co-faute-texte);
}

/* Le sélecteur de pays : chevron dessiné, étiquette toujours en haut.

   Ces règles supposent un `select` NU. Galerie Sac à Dos vend dans quatre
   pays, et à partir de deux WooCommerce pose la classe `country_select` :
   select2 prenait la main, cachait le vrai `select` et peignait sa propre
   boîte, sur laquelle l'étiquette flottante retombait — le libellé
   « Pays/région » par-dessus « France », vu à l'écran le 2026-08-30.
   `dgc_co_pays_sans_select2()` (inc-checkout.php) coupe select2 sur le
   tunnel et sur l'espace client, et le `select` nu revient. Ne pas
   remettre select2 sans redessiner ce champ. */
/* Le dessin du sprite de la source (`#chevronDown`), 10 x 10 : le carre
   tourne de 45 degres que nous peignions avant sortait plus gras et plus
   grand a l'oeil que son trait de 1,5 px aux bouts ronds. */
.dgc-co .form-row:has(select)::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 24.5px;
    width: 10px;
    height: 10px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="10" height="10"><path fill="none" stroke="%23707070" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke" d="M12 4.75 7.354 9.396a.5.5 0 0 1-.708 0L2 4.75"/></svg>') center / 10px 10px no-repeat;
    transform: translateY(-50%);
    pointer-events: none;
}
.dgc-co .form-row select { padding-right: 30px; }

/* Le bandeau d'erreurs de WooCommerce n'est pas montré : chaque manque
   s'écrit sous le champ concerné, une seule fois. Ce qui reste ici — moyen de
   paiement refusé, aucun mode d'expédition — n'a pas de champ où se poser : on
   le garde, en carte bordee de la teinte de faute en tete de colonne, et
   `dgc-caisse.js` le deplace
   dans la colonne de gauche (sans quoi, enfant direct du formulaire, il occupe
   une case de la grille et pousse les deux colonnes d'un cran). */
.dgc-tunnel .woocommerce-NoticeGroup {
    grid-column: 1 / -1;
    margin: 0 0 24px;
    padding: 16px;
    border: 1px solid var(--co-faute);
    border-radius: var(--co-r);
    background: #fff;
}
.dgc-tunnel .woocommerce-NoticeGroup ul,
.dgc-tunnel .woocommerce-NoticeGroup li {
    margin: 0;
    padding: 0;
    list-style: none;
    background: none;
    border: 0;
    font-size: 14px;
    line-height: 18.9px;
    color: var(--co-faute-texte);
}
.dgc-tunnel .woocommerce-NoticeGroup li + li { margin-top: 4px; }
.dgc-tunnel .woocommerce-NoticeGroup li::before { content: none; }
.dgc-tunnel .woocommerce-NoticeGroup a {
    color: var(--co-faute-texte);
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* Un message déjà posé sous son champ ne se répète pas dans la carte, et une
   carte vide disparaît. */
.dgc-tunnel .woocommerce-NoticeGroup li[data-id] { display: none; }
.dgc-tunnel .woocommerce-NoticeGroup:not(:has(li:not([data-id]))) { display: none; }

/* ------------------------------------------------------------
   6. Les cases à cocher : 20 px, rayon 8, coche blanche sur noir
   ------------------------------------------------------------ */
.dgc-case {
    display: flex;
    align-items: flex-start;
    /* 8 px entre la coche et le texte : mesure au pixel peint sur la source
       (29/08/2026), pour la lettre comme pour la facturation. */
    gap: 8px;
    margin: -1px 0 0;
    font-size: 14px;
    line-height: 18.9px;
    color: #000;
    cursor: pointer;
}
.dgc-case input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}
.dgc-case__boite {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: var(--co-r-s);
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--co-bord);
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow .12s ease, color .12s ease;
}
.dgc-case input:checked + .dgc-case__boite {
    box-shadow: inset 0 0 0 10px var(--co-accent);
    color: #fff;
}
.dgc-case input:focus-visible + .dgc-case__boite {
    outline: 2px solid var(--co-accent);
    outline-offset: 2px;
}
.dgc-case__texte { padding-top: .5px; }
.dgc-tunnel .woocommerce-account-fields .create-account { display: none; }

/* ------------------------------------------------------------
   7. Mode d'expédition
   ------------------------------------------------------------ */
.dgc-co__attente {
    margin: 0;
    background: var(--co-fond);
    border-radius: var(--co-r);
    padding: 16px;
    font-size: 14px;
    line-height: 18.9px;
    color: var(--co-gris);
}
.dgc-co__modes {
    margin: 0;
    padding: 0;
    border: 0;
}
.dgc-co__mode {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--co-bord);
    border-radius: var(--co-r);
    padding: 15px;
    font-size: 14px;
    line-height: 17px;
    cursor: pointer;
}
.dgc-co__mode + .dgc-co__mode { margin-top: -1px; }
/* La source entoure l'option retenue d'un filet NOIR de 1 px, en plus du
   fond gris ; le notre gardait le filet #DEDEDE et ne se distinguait que
   par sa teinte. `z-index` : les options se chevauchent de 1 px, le filet
   noir doit passer au-dessus de celui du voisin. */
.dgc-co__mode.est-choisi {
    background: var(--co-fond2);
    border-color: var(--co-accent);
    position: relative;
    z-index: 1;
}
.dgc-co__mode input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.dgc-co__puce {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--co-bord);
    background: #fff;
}
.dgc-co__mode.est-choisi .dgc-co__puce {
    box-shadow: inset 0 0 0 6px var(--co-accent);
}
/* Le nom et la description s'empilent, collés : la source pose « Standard »
   a y=839,6 et « Free Delivery » a 858,5, soit exactement une ligne de 18,9
   plus bas, sans marge (mesure du 10/09/2026, adresse remplie). Meme corps et
   meme interligne pour les deux, seule la graisse change : 600 pour le nom,
   400 pour la description. */
.dgc-co__mode-texte {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 18.9px;
}
.dgc-co__mode-nom { font-weight: var(--co-gras); }
.dgc-co__mode-desc { font-weight: 400; color: #000; }
/* Le prix est ecrit « Free » dans le DOM et peint en capitales par la
   feuille : `text-transform: uppercase`, mesure du 10/09/2026 sur l'export.
   Notre version imprimait « FREE » en dur - meme rendu, mais un texte
   different pour un lecteur d'ecran ou une recherche dans la page. */
.dgc-co__mode-prix {
    margin-left: auto;
    font-weight: var(--co-gras);
    text-transform: uppercase;
}

/* Le « ? » dans un champ, et sa bulle noire ------------------- */
.dgc-co__aide {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    line-height: 0;
}
.dgc-co__aide-bouton,
.dgc-co__aide-bouton:hover,
.dgc-co__aide-bouton:focus,
.dgc-co__aide-bouton:active {
    display: inline-flex;
    /* 18 px : celui de la ligne Expédition fait 14, celui pose DANS un champ
       en fait 18 sur la source (mesure sur son bouton). */
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--co-gris);
    cursor: pointer;
    transform: none;
}
.dgc-co__aide-bouton svg { display: block; }
.dgc-co__aide-bouton:focus { outline: none; }
.dgc-co__aide-bouton:focus-visible { outline: 2px solid var(--co-accent); outline-offset: 2px; }
.dgc-co__bulle {
    position: absolute;
    /* Centree sur le « ? » : sur la source, la pointe et le milieu de la
       bulle tombent tous deux sur l'axe de l'icone. 10 px la separent du
       haut de l'icone, pointe comprise. Sous 1000 px, la bulle est calee
       au bord droit de la fenetre (voir plus bas) : centree, elle sortait
       de l'ecran et elargissait toute la page. */
    bottom: calc(100% + 10px);
    left: 50%;
    width: max-content;
    /* 164,6 x pad 10, 12/16,2 : relevee dans le DOM de sa caisse le
       29/08/2026 (les valeurs precedentes venaient d'une lecture d'images). */
    max-width: 164.6px;
    padding: 10px;
    border-radius: var(--co-r);
    background: #1A1A1A;
    color: #fff;
    font-size: 12px;
    line-height: 16.2px;
    text-align: center;
    white-space: normal;
}
/* Cachee tant qu'on ne la survole pas ; `visibility` et non `display`, pour
   que la transition ait quelque chose a jouer. */
.dgc-co__bulle {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* La source la fait grandir de 0,95 a 1 en meme temps qu'elle apparait,
       en 133 ms : sa boite gagne 8 px de chaque cote entre l'image 7 et
       l'image 9 du survol. */
    transform: translateX(-50%) scale(.95);
    transform-origin: center bottom;
    transition:
        opacity 133ms cubic-bezier(.3, .5, .5, 1),
        transform 133ms cubic-bezier(.3, .5, .5, 1),
        visibility 0s linear 133ms;
}
.dgc-co__aide:hover .dgc-co__bulle,
.dgc-co__aide-bouton:focus-visible + .dgc-co__bulle {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
    transition-delay: 0s;
}
.dgc-co__bulle::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: #1A1A1A;
    border-bottom: 0;
}

/* ------------------------------------------------------------
   L'adresse de facturation, dans la boite de paiement
   ------------------------------------------------------------
   Mesure sur la source : la case tombe 14 px sous le dernier champ de carte,
   le titre « Adresse de facturation » 14 px plus bas, et les champs reprennent
   exactement la grille du haut de page. */
.dgc-co__facturation { margin-top: 14px; }
.dgc-case--facturation { margin: 0; }
.dgc-co__facturation-champs[hidden] { display: none; }
/* Les 14 px qui separent la case du titre sont poses ICI, en marge interne du
   bloc, et non en marge haute du titre : une marge d'enfant traverse le bloc
   et n'entre pas dans la hauteur que `glisseFacturation()` mesure, si bien que
   l'ouverture s'arretait 14 px trop court puis sautait. */
.dgc-co__facturation-champs { padding-top: 14px; }
.dgc-co__soustitre--facturation { margin: 0 0 10px; }
.dgc-co__grille--facturation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.dgc-co__grille--facturation .form-row {
    position: relative;
    margin: 0;
    padding: 0;
    grid-column: span 2;
}
.dgc-co__grille--facturation .dgc-champ--moitie-1,
.dgc-co__grille--facturation .dgc-champ--moitie-2 { grid-column: span 1; }

/* ------------------------------------------------------------
   8. Paiement
   ------------------------------------------------------------ */
.dgc-co #payment {
    background: none;
    border: 0;
    padding: 0;
    border-radius: 0;
}
.dgc-co #payment ul.payment_methods {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--co-bord);
    border-radius: var(--co-r);
    background: #fff;
    /* PAS de `overflow: hidden` : le filet noir de l'entete est dessine a
       `inset: -1px`, donc PAR-DESSUS le filet gris de la boite. Le rognage
       n'en laissait voir que le bord bas, ce qui donnait un simple trait sous
       l'entete au lieu du cadre de la source. Les coins sont donc arrondis
       piece par piece. */
}
.dgc-co #payment ul.payment_methods > li {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Le fond gris du moyen retenu est peint par le `li`, CARRÉ : il débordait
   des coins arrondis de la boîte (le petit crochet gris aux coins du bas).
   Pas d'`overflow: hidden` sur le `ul` (voir plus haut) : on arrondit le
   fond lui-même. PAS `:last-child` : Stripe laisse en fin de liste des
   moyens qu'il masque en JS (Bancontact), et le rayon partait sur un `li`
   invisible. Un seul moyen visible : rayon partout ; plusieurs
   (`est-multiple`) : le filet entre les lignes garde les coins internes
   droits, seuls les coins externes du premier arrondissent. */
.dgc-co #payment ul.payment_methods > li { border-radius: 11px; }
.dgc-co #payment ul.payment_methods.est-multiple > li { border-radius: 0; }
.dgc-co #payment ul.payment_methods.est-multiple > li:first-child { border-radius: 11px 11px 0 0; }
.dgc-co #payment ul.payment_methods > li + li {
    border-top: 1px solid var(--co-bord);
}
.dgc-co #payment ul.payment_methods > li > input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.dgc-co #payment ul.payment_methods > li:first-child > label {
    border-radius: var(--co-r) var(--co-r) 0 0;
}
.dgc-co #payment ul.payment_methods > li > label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 14px;
    min-height: 50px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 17px;
    font-weight: var(--co-gras);
    color: #000;
    cursor: pointer;
}
.dgc-co #payment ul.payment_methods > li > input[type="radio"]:checked + label {
    background: var(--co-fond2);
}
/* Le moyen retenu porte un filet NOIR autour de son entete. La source le
   dessine en `::before` cale a `inset: -1px`, donc PAR-DESSUS le filet gris
   de la boite et sans rien decaler ; une bordure changerait la hauteur. */
.dgc-co #payment ul.payment_methods > li > input[type="radio"]:checked + label::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    inset: -1px;
    border: 1px solid var(--co-accent);
    border-radius: var(--co-r) var(--co-r) 0 0;
    pointer-events: none;
}
.dgc-co #payment ul.payment_methods > li > label { position: relative; }
/* Storefront dessine son propre bouton radio dans `label::before`, un anneau
   violet à la couleur de WooCommerce. Aucun bouton quand il n'y a qu'un moyen
   de paiement, une pastille noire quand il y en a plusieurs - comme pour les
   modes d'expédition. */
.dgc-co #payment ul.payment_methods > li > label::before,
.dgc-co #payment ul.payment_methods > li > label::after {
    content: none !important;
    display: none !important;
}
/* `:only-child` ne suffit pas : Stripe laisse dans la liste un `li`
   Bancontact qu'il masque ensuite en JS. C'est dgc-caisse.js qui compte les
   moyens VISIBLES et pose `est-multiple`. La source n'affiche aucune pastille
   quand il n'y en a qu'un. */
.dgc-co #payment ul.payment_methods.est-multiple > li > label {
    padding-left: 44px;
    position: relative;
}
.dgc-co #payment ul.payment_methods.est-multiple > li > label::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--co-bord);
    background: #fff;
    margin: 0;
    border: 0;
}
.dgc-co #payment ul.payment_methods.est-multiple > li > input[type="radio"]:checked + label::before {
    box-shadow: inset 0 0 0 6px var(--co-accent);
}
.dgc-co__marques {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    /* 22 px, pas 24 : la source laisse ses vignettes deborder de la rangee,
       ce qui tient son entete a 50 px de haut la ou nous faisions 52. */
    height: 22px;
}
.dgc-co__marques svg {
    display: block;
    width: 38px;
    height: 24px;
}
.dgc-co #payment div.payment_box {
    margin: 0;
    /* 14 px partout et pas de filet sous l'entete : la source ne separe les
       deux qu'a la teinte, #F6F6F6 en haut, #F4F4F4 en bas. */
    padding: 14px;
    background: #F4F4F4;
    border: 0;
    border-radius: 0 0 11px 11px;
    font-size: 14px;
    line-height: 18.9px;
    color: #000;
}
.dgc-co #payment .payment_box::before { display: none; }
/* Le `fieldset` que Stripe pose autour de ses champs : Storefront le peint
   #FBFBFB et lui ajoute 12 px de haut. C'est LUI, le cadre blanc au milieu du
   gris de la boite. La source n'a rien entre le fond et ses champs. */
.dgc-co #payment #wc-stripe-upe-form,
.dgc-co #payment .wc-upe-form {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}
.dgc-co #payment .payment_box p:last-child { margin-bottom: 0; }
.dgc-co #payment .woocommerce-info,
.dgc-co #payment .woocommerce-notice {
    margin: 0;
    padding: 16px;
    background: var(--co-fond);
    border: 0;
    border-radius: var(--co-r);
    color: var(--co-gris);
    font-size: 14px;
    line-height: 18.9px;
}
.dgc-co #payment .woocommerce-info::before { display: none; }
.dgc-co #payment .place-order {
    margin: 14px 0 0;
    padding: 0;
    border: 0;
    background: none;
    height: auto;
}
.dgc-tunnel #place_order,
.dgc-merci__bouton {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 14px !important;
    border: 0;
    border-radius: var(--co-r) !important;
    background: var(--co-accent) !important;
    color: #fff !important;
    font-family: inherit;
    font-size: 16px !important;
    line-height: 21.6px;
    font-weight: var(--co-gras) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    /* LE SURVOL, MESURE SUR L'EXPORT DE LA CAISSE (2026-08-30).
       Le bouton ne change QUE de fond : rgb(162,99,99) -> rgb(129,78,78), en
       .2s ease-in-out. Pas de fondu d'opacite, pas de retrait au clic, pas
       d'ombre. Le releve de Sveve Lys avait lu un `opacity: .85` et un
       `scale(.99)` - sur un bouton noir, un fond assombri et un fondu se
       ressemblent assez pour tromper la mesure ; sur un bouton brun, non.
       La source declare la transition sur six proprietes, on garde sa
       declaration entiere plutot que la seule qui bouge ici.

       VERIFIE SUR DOG CHERIE le 10/09/2026, directement sur « Pay now » de la
       caisse en ligne : fond rgb(233,76,120) au repos, rgb(196,54,96) au
       survol ET souris enfoncee, aucun changement d'opacite ni de transform.
       Meme comportement, autre couleur. */
    transition: color .2s ease-in-out, background-color .2s ease-in-out,
        border-color .2s ease-in-out, box-shadow .2s ease-in-out,
        opacity .2s ease-in-out, transform .2s ease-in-out;
}
.dgc-tunnel #place_order:hover,
.dgc-tunnel #place_order:focus,
.dgc-tunnel #place_order:active,
.dgc-merci__bouton:hover,
.dgc-merci__bouton:focus,
.dgc-merci__bouton:active { background: var(--co-accent-survol) !important; }
.dgc-tunnel #place_order:disabled {
    background: var(--co-fond) !important;
    color: var(--co-gris) !important;
    box-shadow: inset 0 0 0 1px var(--co-bord);
    cursor: default;
}

/* Le paiement en cours.

   WooCommerce couvre le formulaire d'un voile gris et fait tourner sa roue
   au milieu de la page (`blockUI`) : la source ne fait rien de tel. Elle
   laisse la page intacte - la mesure de sa luminance ne bouge pas d'un
   point entre le clic et le changement d'écran - et ne touche qu'au
   bouton. Le voile est donc retiré du tunnel. */
.dgc-tunnel .blockUI.blockOverlay,
.dgc-tunnel .blockUI.blockMsg { display: none !important; }

.dgc-tunnel #place_order.est-en-cours {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    cursor: default;
}
.dgc-co__rouelle {
    display: inline-flex;
    width: 18px;
    height: 18px;
    animation: dgc-co-fondu .5s ease-in-out, dgc-co-tourne .5s linear infinite;
}
.dgc-co__rouelle svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}
/* Storefront habille les `span` de ses boutons (pastille blanche, texte
   gris) : ce libellé-là doit rester du texte nu. */
.dgc-tunnel #place_order .dgc-co__attente {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
}
@keyframes dgc-co-tourne {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
}
@keyframes dgc-co-fondu {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .dgc-co__rouelle { animation: none; }
}

/* ------------------------------------------------------------
   9. Liens légaux du bas de colonne
   ------------------------------------------------------------ */
.dgc-co__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 48px 0 0;
    padding: 15px 0 0;
    border-top: 1px solid var(--co-bord);
}
.dgc-co__legal a,
.dgc-co__legal-lien {
    font-family: inherit;
    font-size: 14px;
    line-height: 18.9px;
    font-weight: 400;
    color: #000;
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* Storefront met ses boutons en capitales et en gras : ces six-la sont des
   liens, ils gardent la casse et la graisse du texte. */
.dgc-co__legal-lien {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
}
.dgc-co__legal-lien:hover,
.dgc-co__legal-lien:focus {
    background: none;
    color: #000;
}


/* ------------------------------------------------------------
   9 bis. Le client connecté : rangée d'e-mail et cartes pliables
   ------------------------------------------------------------
   Le dépliage anime `grid-template-rows` en 0,2 s ease-in-out - les jetons
   `--x-duration-base` / `--x-timing-base` de la source ; le chevron pivote
   dans le même temps. */
.dgc-co-client__email {
    display: flex;
    align-items: center;
    gap: 12px;
    /* 38 px entre le filet de l'en-tête et la rangée : la source respire
       plus que le tunnel anonyme ici. */
    margin: 16px 0 14px;
}
.dgc-co-client__avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f0f0f0;
    outline: 1px solid rgba(0, 0, 0, .08);
    outline-offset: -1px;
    font-size: 14px;
    line-height: 1;
    text-transform: uppercase;
    color: #000;
}
.dgc-co-client__courriel {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    line-height: 18.9px;
}
.dgc-co-client__menu {
    position: relative;
    flex: 0 0 auto;
}
.dgc-co .dgc-co-client__kebab {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: rgba(0, 0, 0, .56);
    cursor: pointer;
}
.dgc-co-client__kebab svg {
    width: 18px;
    height: 18px;
}
.dgc-co-client__popover {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 30;
    display: block;
    padding: 6px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, .06);
    opacity: 1;
    transition: opacity .1333s ease-in-out;
}
.dgc-co-client__popover[hidden] {
    display: none;
}
.dgc-co .dgc-co-client__popover a,
.dgc-co .dgc-co-client__popover button {
    display: block;
    width: max-content;
    margin: 0;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    font-size: 14px;
    line-height: 18.9px;
    font-weight: 400;
    color: #000;
    text-decoration: none;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
}
.dgc-co .dgc-co-client__popover a:hover,
.dgc-co .dgc-co-client__popover button:hover {
    background: #f6f6f6;
    color: #000;
}
.dgc-co-client__cartes {
    /* #dedede en dur, comme le filet des cartes trois lignes plus bas :
       var(--dgc-co-bord) n'etait defini nulle part, seul le repli servait. */
    border: 1px solid #dedede;
    border-radius: 12px;
}
.dgc-co-client__cartes--expedition {
    margin: 14px 0 0;
}
.dgc-co-client__carte + .dgc-co-client__carte {
    border-top: 1px solid #dedede;
}
.dgc-co .dgc-co-client__rangee {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 14px;
    border: 0;
    background: none;
    text-align: left;
    letter-spacing: normal;
    text-transform: none;
    color: #000;
    cursor: pointer;
}
.dgc-co-client__etiquette {
    align-self: start;
    font-size: 14px;
    line-height: 18.9px;
    color: #707070;
}
.dgc-co-client__valeur {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
    line-height: 18.9px;
}
.dgc-co-client__valeur strong {
    font-weight: var(--co-gras);
}
.dgc-co-client__chevron {
    width: 18px;
    height: 18px;
    color: rgba(0, 0, 0, .56);
    transition: transform .2s ease-in-out;
}
.dgc-co-client__rangee[aria-expanded="true"] .dgc-co-client__chevron {
    transform: rotate(180deg);
}
/* Dépliée, la rangée ne garde que son étiquette : le résumé s'efface, c'est
   le contenu du pli qui parle. */
.dgc-co-client__rangee[aria-expanded="true"] .dgc-co-client__valeur {
    display: none;
}
/* Le pli : 0fr → 1fr, la hauteur suit en 0,2 s. */
.dgc-co-client__pli,
.dgc-co-client__formulaire {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .2s ease-in-out;
}
.dgc-co-client__pli.est-ouvert,
.dgc-co-client__formulaire.est-ouvert {
    grid-template-rows: 1fr;
}
.dgc-co-client__pli > .dgc-co-client__boite,
.dgc-co-client__formulaire > .dgc-co-client__boite {
    overflow: hidden;
    min-height: 0;
}
.dgc-co-client__pli > .dgc-co-client__boite {
    padding-inline: 14px;
}
/* Dans la carte du client, l'option d'expédition n'a NI filet ni cadre noir :
   un simple pavé gris arrondi, même retenue. */
.dgc-co-client__boite .dgc-co__mode,
.dgc-co-client__boite .dgc-co__mode.est-choisi {
    border: 0;
    border-radius: 12px;
    background: #f6f6f6;
    box-shadow: none;
}
.dgc-co-client__pli.est-ouvert > .dgc-co-client__boite {
    padding-bottom: 14px;
}
.dgc-co-client__adresse {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border-radius: 12px;
    background: #f6f6f6;
}
.dgc-co-client__adresse-texte {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    line-height: 18.9px;
}
.dgc-co-client__adresse-texte strong,
.dgc-co-client__adresse-texte span {
    display: block;
}
.dgc-co-client__adresse-texte strong span {
    display: inline;
}
/* Une PILULE, et le mot en gras, comme chez elle. */
.dgc-co-client__badge {
    display: inline-block;
    width: fit-content;
    margin-top: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #707070;
    font-size: 12px;
    line-height: 16.2px;
    font-weight: var(--co-gras);
    color: #fff;
}
/* La croix est fine et grande (20 px, trait 1,5), le libellé en 14 Inter sans
   espacement ajouté, et RIEN ne se souligne au survol - la source ne change
   rien à ce bouton. */
.dgc-co .dgc-co-client__autre,
.dgc-co .dgc-co-client__autre:hover,
.dgc-co .dgc-co-client__autre:focus {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 14px 4px 0;
    border: 0;
    background: none;
    font-family: var(--co-police);
    font-size: 14px;
    line-height: 18.9px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    color: #000;
    cursor: pointer;
}
.dgc-co .dgc-co-client__autre svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}
/* Connecté, la source n'a PAS de barre « Résumé de la commande » sous
   l'en-tête : le résumé ne s'ouvre que par la rangée Total du bas. */
.dgc-co--client .dgc-co__barre {
    display: none;
}
/* Connecté, le formulaire se plie sous le résumé : les pièces que la rangée
   d'e-mail remplace disparaissent, le reste attend « Modifier l'adresse » ou
   « Utiliser une adresse différente ». */
.dgc-co--client .dgc-co__entete,
.dgc-co--client .dgc-case--lettre,
.dgc-co--client #billing_email_field,
.dgc-co--client .dgc-co__titre--livraison {
    display: none;
}
.dgc-co--client .dgc-co-client__formulaire > .dgc-co-client__boite {
    padding-top: 14px;
}


/* ------------------------------------------------------------
   10. Le récapitulatif
   ------------------------------------------------------------ */
.dgc-resume {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.dgc-resume__lignes {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
}
/* Storefront habille `.cart_item` et les listes de definition du
   recapitulatif : un cadre autour de chaque ligne et un filet au-dessus du
   total. Ni l'un ni l'autre ici. */
.dgc-resume ul,
.dgc-resume li,
.dgc-resume dl,
.dgc-resume dt,
.dgc-resume dd,
.dgc-resume table,
.dgc-resume tr,
.dgc-resume td,
.dgc-resume th {
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
.dgc-resume__ligne {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}
.dgc-resume__media {
    position: relative;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
}
.dgc-resume__media img {
    display: block;
    width: 64px;
    height: 64px;
    box-sizing: border-box;
    object-fit: cover;
    border: 2px solid #fff;
    border-radius: var(--co-r-l);
    background: #EDEDED;
    margin: 0;
}
/* Une pilule, pas un cercle : sur la source elle est un peu plus large que
   haute (~23 x 21 pour « 1 », mesuré sur capture le 29/08/2026 - le checkout
   ne répondait plus pour une mesure DOM) et s'élargit avec le nombre. */
.dgc-resume__qte {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 21px;
    height: 21px;
    padding: 0 9px;
    box-sizing: border-box;
    border-radius: 999px;
    background: #000;
    color: #fff;
    font-size: 12px;
    line-height: 21px;
    font-weight: var(--co-gras);
    text-align: center;
}
.dgc-resume__corps {
    flex: 1 1 auto;
    padding-top: 4px;
    min-width: 0;
}
.dgc-resume__nom {
    display: block;
    font-size: 14px;
    line-height: 18.9px;
    color: #000;
}
.dgc-resume__variante {
    display: block;
    font-size: 12px;
    line-height: 16.2px;
    color: var(--co-gris2);
}
.dgc-resume__prix {
    flex: 0 0 auto;
    padding-top: 4px;
    font-size: 14px;
    line-height: 18.9px;
    text-align: right;
}
/* 6 px entre les lignes, releve sur l'export de la source : elle en pose 6
   du sous-total a l'expedition, 16 avant le total et 4 avant les economies.
   Les deux ecarts particuliers sont repris en marge sur leur ligne. */
.dgc-resume__totaux {
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 6px;
    column-gap: 16px;
    margin: 20px 0 0;
    padding: 0;
}
.dgc-resume__totaux dt,
.dgc-resume__totaux dd {
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 18.9px;
    font-weight: 400;
    color: #000;
}
.dgc-resume__totaux dd { text-align: right; }
/* #707070, le gris de la source pour ce texte en attente — `--co-gris2`
   (#666) le rendait plus sombre, donc plus lourd à l'œil. */
.dgc-resume__attente { color: var(--co-gris); }

/* ------------------------------------------------------------
   Le code de réduction, dans le récapitulatif
   ------------------------------------------------------------
   Meme champ que ceux de la caisse (49 px, filet 1 px, rayon 12, etiquette
   flottante) et un bouton de la meme hauteur, gris tant que rien n'est tape.
   Le message d'echec se pose SOUS le champ, comme les autres. */
.dgc-resume__code {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 4px;
    /* 21 px au-dessus (les 16 de la derniere ligne s'y fondent), 34 en
       dessous : releves sur la source le 29/08/2026 — « Sous-total » et
       « Total » tombaient 19 px trop haut. */
    margin: 21px 0 34px;
}
/* LE CADRE COMMUN. Le filet, le fond et le rayon vivent ICI, pas sur le
   champ : chez la source le bouton est DANS le cadre, et il n'y a qu'un seul
   filet pour les deux. 400 x 49, filet 1 px #DEDEDE, rayon 12, fond blanc. */
.dgc-resume__code-boite {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    height: 49px;
    box-sizing: border-box;
    border: 1px solid var(--co-bord);
    border-radius: var(--co-r);
    background: #fff;
}
.dgc-resume__code-champ {
    position: relative;
    margin: 0;
    padding: 0;
    min-width: 0;
}
/* Le champ ne porte plus ni filet ni fond : le cadre les porte. Rayon a
   gauche seulement (`12px 0 0 12px`, mesure), pour que le fond de la mise en
   evidence du clavier epouse le coin. */
/* Le `<span class="woocommerce-input-wrapper">` que WooCommerce interpose
   entre la ligne et le champ n'a pas de hauteur propre : sans lui rendre
   celle du cadre, le `height: 100%` du champ se mesurait sur son contenu et
   le champ tombait a 44 px au lieu de 47. */
.dgc-co .dgc-resume__code-champ .woocommerce-input-wrapper {
    display: block;
    height: 100%;
}
/* La mise en evidence du clavier se pose sur le CADRE, pas sur le champ : le
   champ n'a plus que le rayon gauche, et un anneau ne l'entourerait qu'a
   moitie. */
.dgc-co .dgc-resume__code-boite:has(input.input-text:focus) {
    border-color: var(--co-accent);
    box-shadow: 0 0 0 1px var(--co-accent);
}
.dgc-co .dgc-resume__code-champ input.input-text:focus { box-shadow: none; }
.dgc-co .dgc-resume__code-champ input.input-text {
    height: 100%;
    border: 0;
    border-radius: var(--co-r) 0 0 var(--co-r);
    background: none;
    padding: 21px 10px 6px;
}
/* L'etiquette flotte, comme partout ailleurs : vide, la source montre son
   SUBSTITUT en 14 px #707070 et garde l'etiquette a `opacity: 0` ; des qu'on
   tape, l'etiquette apparait en 12/16,2 #707070 a 5,9 px du haut du cadre.
   Mesure du 10/09/2026 : y = 205,9 vide (invisible), 202,9 remplie, cadre a
   196. Le releve du 29/08 qui la disait fixe portait sur une autre boutique. */
.dgc-co .dgc-resume__code-champ > label { top: 5.9px; }
.dgc-co .dgc-resume__code-champ input.input-text::placeholder { color: var(--co-gris); }
.dgc-co .dgc-resume__code-champ input.input-text:not(:placeholder-shown)::placeholder { color: transparent; }
.dgc-co .form-row.dgc-resume__code-champ:has(input.input-text:placeholder-shown:not(:focus)) > label {
    top: 5.9px;
    transform: none;
    font-size: 12px;
    line-height: 16.2px;
    opacity: 0;
}
/* 6 px d'air entre le bouton et trois des quatre cotes du cadre ; rien a
   gauche, le champ vient s'y coller (rembourrage mesure : 6px 6px 6px 0). */
.dgc-resume__code-action {
    padding: 6px 6px 6px 0;
    display: flex;
    align-items: center;
}
.dgc-resume__code-valider {
    height: 35px;
    margin: 0;
    /* 0 en haut et en bas, 10 sur les cotes : le bouton fait 59 x 35 chez la
       source, la ou nous en faisions 67 x 49 et volions sa place au champ. */
    padding: 0 10px;
    border: 0;
    border-radius: var(--co-r);
    background: var(--co-fond);
    color: #000;
    font-family: inherit;
    font-size: 14px;
    line-height: 18.9px;
    font-weight: var(--co-gras);
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--co-bord);
    transition:
        color .2s ease-in-out,
        background-color .2s ease-in-out,
        box-shadow .2s ease-in-out,
        opacity .2s ease-in-out;
}
/* DESACTIVE : exactement le meme bouton, a `opacity: .5` pres. C'est le seul
   etat que les exports montrent (`disabled`, fond #F5F5F5, texte noir 600,
   ombre interieure #DEDEDE, opacite 0,5), et `opacity` figure dans la liste
   de transitions de la source — d'ou l'etat actif ci-dessus, qui est le meme
   a pleine opacite. INFERE, pas mesure : la page exportee est un instantane
   mort, son bouton reste `disabled` meme quand on remplit le champ. */
.dgc-resume__code-valider[disabled],
.dgc-resume__code-valider[disabled]:hover {
    opacity: .5;
    pointer-events: none;
}
/* La puce du code applique, et les lignes qu'il ajoute aux totaux. */
.dgc-resume__puce {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-self: start;
    margin: -6px 0 0;
    padding: 4px 8px;
    border-radius: var(--co-r-s);
    background: #EDEDED;
    font-size: 14px;
    line-height: 16.8px;
    color: #000;
}
.dgc-resume__icone { flex: 0 0 auto; display: block; }
.dgc-resume__puce-x,
.dgc-resume__puce-x:hover,
.dgc-resume__puce-x:focus,
.dgc-resume__puce-x:active {
    display: inline-flex;
    width: 14px;
    height: 14px;
    margin-left: 2px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--co-gris);
    cursor: pointer;
    transform: none;
}
.dgc-resume__puce-x svg { display: block; }
/* Le libelle occupe la LIGNE entiere : dans la grille a deux colonnes il se
   coupait en deux, la ou la source le garde d'un seul tenant. */
.dgc-resume__totaux dt.dgc-resume__reduction-titre {
    grid-column: 1 / -1;
    /* 2 px seulement entre l'intertitre et la ligne du code. */
    margin-bottom: -4px;
}
.dgc-resume__totaux dd.dgc-resume__reduction-titre { display: none; }
.dgc-resume__totaux .dgc-resume__reduction-code {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--co-gris2);
}
.dgc-resume__totaux .dgc-resume__eco {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px !important;
    font-weight: var(--co-gras);
}
.dgc-resume__totaux .dgc-resume__eco-montant {
    margin-top: 8px !important;
    font-weight: var(--co-gras);
}
/* Page de remerciement : la source colle le montant au libelle au lieu de le
   caler a droite, et ne laisse que 4 px sous le total. La ligne tient donc
   dans le seul `dt`, montant compris.

   ── CORRECTION DU 2026-08-30 ─────────────────────────────────────────────
   La CAISSE ecrivait cette ligne en DEUX cellules (`dt` + `dd`), la page de
   remerciement en une seule. Le `grid-column: 1 / -1` prenait donc toute la
   largeur pour le libelle et renvoyait le montant de la caisse seul sur une
   troisieme ligne : « Total », puis « ECONOMIES TOTALES », puis « 8,00 € »
   cale a droite. Vu a l'ecran, avec un bon pose.

   Ce qui a ete corrige, c'est le BALISAGE de la caisse, pas la regle :
   `review-order.php` ecrit maintenant la meme ligne que la page de
   remerciement, montant compris dans le `dt`. Un seul dessin, une seule
   regle, et les deux ecrans tombent pareils - ce qui est le point de tout ce
   chantier. Limiter la regle a la page de remerciement aurait laisse deux
   dessins pour une seule ligne de la source.

   Le defaut vient du portage tel quel de Sveve Lys, dont la caisse fait
   encore la meme chose. Signale, pas corrige la-bas - une boutique a la
   fois. */
.dgc-resume__totaux dt.dgc-resume__eco {
    grid-column: 1 / -1;
    /* 4 px sous le total, la ou l'interligne en pose 6. */
    margin-top: -2px !important;
}
.dgc-resume__totaux dd.dgc-resume__eco { display: none; }
.dgc-resume__eco-somme { font-weight: var(--co-gras); }

.dgc-resume__code-msg {
    grid-column: 1 / -1;
    /* La gouttiere de la grille fait 10 px ; le message se pose a 4 px du
       champ comme les autres, d'ou les 6 px repris. */
    margin: -6px 0 0;
    font-size: 14px;
    line-height: 18.9px;
    color: var(--co-faute-texte);
}

/* ------------------------------------------------------------
   Le « ? » de la ligne Expédition et son panneau
   ------------------------------------------------------------
   Tout est releve sur la caisse de la source le 27/08/2026 : icone de
   14 x 14 en filet de 1,5 peint #666, 4 px apres le mot, sans le moindre
   effet au survol ; panneau de 480 px a rayon 16 pose sur un voile noir a
   60 %. */
.dgc-resume__totaux .dgc-resume__libelle-expedition {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.dgc-resume__aide,
.dgc-resume__aide:hover,
.dgc-resume__aide:focus,
.dgc-resume__aide:active {
    display: inline-flex;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    /* Storefront peint ses boutons en fonce au survol : sans cette remise a
       plat, le « ? » se retrouvait dans un pave noir arrondi. */
    box-shadow: none;
    color: var(--co-gris2);
    cursor: pointer;
    transform: none;
}
.dgc-resume__aide svg { display: block; }

/* Le panneau -------------------------------------------------- */
.dgc-co__panneau {
    /* Le panneau vit dans le pied de page, hors de `.dgc-co` : sans cette
       ligne son titre repartait dans le serif du site. */
    font-family: var(--co-police);
    width: min(480px, calc(100vw - 32px));
    /* 128,5 px au-dessus et au-dessous, releve sur l'export de sa page de
       remerciement : sa feuille y fait 1 029 px de haut dans une fenetre de
       1 285. Avec 96, la notre montait 74 px trop haut. */
    max-height: calc(100vh - 257px);
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: #fff;
    color: #000;
    overflow: hidden;
    box-shadow:
        0 0 0 .5px rgba(0, 0, 0, .07),
        0 4px 7px rgba(0, 0, 0, .04),
        0 8px 32px rgba(0, 0, 0, .16);
}
.dgc-co__panneau:focus { outline: none; }
.dgc-co__panneau::backdrop { background: rgba(0, 0, 0, .6); }

/* Ouverture : le voile en 300 ms, le panneau en 133 ms, meme courbe.
   Fermeture : les deux en 200 ms, ease-in. Valeurs lues sur les animations
   de la source, pas approchees. */
.dgc-co__panneau[open] {
    animation: dgc-panneau-entre 133.3ms cubic-bezier(.3, .5, .5, 1) both;
}
.dgc-co__panneau[open]::backdrop {
    animation: dgc-voile-entre 300ms cubic-bezier(.3, .5, .5, 1) both;
}
.dgc-co__panneau[open].se-ferme {
    animation: dgc-panneau-sort 200ms ease-in both;
}
.dgc-co__panneau[open].se-ferme::backdrop {
    animation: dgc-voile-sort 200ms ease-in both;
}
@keyframes dgc-panneau-entre {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dgc-panneau-sort {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(14px) scale(.98); }
}
@keyframes dgc-voile-entre { from { opacity: 0; } to { opacity: 1; } }
@keyframes dgc-voile-sort { from { opacity: 1; } to { opacity: 0; } }

.dgc-co__panneau-tete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px 0;
}
/* Le panneau d'adresse : les champs du tunnel empilés, la case, puis
   Annuler / Enregistrer - blanc filet et noir plein, 49 px, rayon 12. */
.dgc-co__panneau--adresse {
    /* Il porte la classe `dgc-co` pour les champs : on lui reprend la grille
       et la hauteur de page que cette classe pose sur le FORMULAIRE, et on le
       recentre comme tout `<dialog>`. Le `display` ne se force QUE ouvert :
       forcé à plat, il écrasait le `display: none` du navigateur sur un
       dialog fermé, qui recouvrait alors toute la page. */
    grid-template-columns: none;
    min-height: 0;
    margin: auto;
    inset: 0;
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100vh - 96px);
}
.dgc-co__panneau--adresse[open] {
    display: block;
}
/* Fermé, il redevient invisible : la classe `dgc-co` posait `display: grid`
   plus fort que le `display: none` du navigateur sur un dialog fermé. */
.dgc-co__panneau--adresse:not([open]) {
    display: none;
}
.dgc-co__panneau-corps--adresse {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 20px 20px;
    overflow-y: auto;
}
.dgc-co__panneau-corps--adresse .dgc-case {
    margin: 2px 0;
}
.dgc-co__panneau-actions {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}
.dgc-co__panneau-actions button {
    flex: 1 1 50%;
    min-height: 49px;
    margin: 0;
    padding: 14px;
    border: 0;
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    line-height: 18.9px;
    font-weight: var(--co-gras);
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
}
.dgc-co__panneau-actions .dgc-co__panneau-annuler,
.dgc-co__panneau-actions .dgc-co__panneau-annuler:hover,
.dgc-co__panneau-actions .dgc-co__panneau-annuler:focus {
    color: #000;
    background: #fff;
    box-shadow: inset 0 0 0 1px #dedede;
}
.dgc-co__panneau-actions .dgc-co__panneau-enregistrer,
.dgc-co__panneau-actions .dgc-co__panneau-enregistrer:hover,
.dgc-co__panneau-actions .dgc-co__panneau-enregistrer:focus {
    color: #fff;
    background: var(--co-accent);
    box-shadow: none;
}
/* Un requis laissé vide : le filet passe au rouge du tunnel. */
.dgc-co__panneau--adresse .dgc-champ-manque {
    box-shadow: inset 0 0 0 1.5px #d02e26 !important;
}
.dgc-co__panneau-titre {
    /* `h1, h2, …` pose le serif du site : l'heritage ne suffit pas a le
       reprendre, il faut le redire ici. */
    font-family: inherit;
    margin: 0;
    font-size: 20px;
    line-height: 24px;
    font-weight: var(--co-gras);
    color: #000;
    letter-spacing: normal;
    text-transform: none;
}
.dgc-co__panneau-fermer,
.dgc-co__panneau-fermer:hover,
.dgc-co__panneau-fermer:focus,
.dgc-co__panneau-fermer:active {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #000;
    cursor: pointer;
    transform: none;
}
.dgc-co__panneau-fermer svg { display: block; }
/* `showModal()` pose le focus sur la croix : la source ne peint rien tant
   qu'on n'est pas au clavier, nous affichions un cadre noir a l'ouverture. */
.dgc-co__panneau-fermer:focus { outline: none; }
.dgc-co__panneau-fermer:focus-visible { outline: 2px solid var(--co-accent); outline-offset: 1px; }
.dgc-co__panneau-corps {
    /* 14 px de haut : sur la source, il reste 19 px entre le bas du titre du
       panneau et le haut du premier titre du texte, contre 5 sans cette
       marge. */
    padding: 14px 20px 20px;
    overflow-y: auto;
    max-height: calc(100vh - 96px - 52px);
}
/* Le contenu vient d'une page WordPress : sans cette remise a plat il
   arrivait avec les titres serif du site, deux fois trop gros. */
.dgc-co__panneau-corps h1,
.dgc-co__panneau-corps h2,
.dgc-co__panneau-corps h3,
.dgc-co__panneau-corps h4 {
    font-family: inherit;
    font-size: 16px;
    line-height: 19.2px;
    font-weight: var(--co-gras);
    letter-spacing: normal;
    text-transform: none;
    color: #000;
    margin: 16px 0 0;
}
.dgc-co__panneau-corps p,
.dgc-co__panneau-corps li {
    font-size: 14px;
    line-height: 18.9px;
    font-weight: 400;
    color: #000;
    margin: 14px 0 0;
}
.dgc-co__panneau-corps a {
    color: #000;
    text-decoration: underline;
    box-shadow: none;
}
.dgc-co__panneau-corps ul,
.dgc-co__panneau-corps ol { margin: 14px 0 0; padding-left: 20px; }
.dgc-co__panneau-corps > :first-child { margin-top: 0; }
/* La règle générique `.dgc-resume__totaux dt` (0,1,1) battait
   `.dgc-resume__total-libelle` (0,1,0) : la ligne Total restait en 14/400. */
.dgc-resume__totaux .dgc-resume__total-libelle,
.dgc-resume__totaux .dgc-resume__total {
    font-size: 18px;
    /* 24,3 et non 21 : c'est l'interligne de la source sur cette ligne. */
    line-height: 24.3px;
    font-weight: var(--co-gras);
    /* 16 px au-dessus du total : 6 d'interligne et 10 de marge. */
    margin-top: 10px !important;
}
/* « EUR » se cale sur la LIGNE DE BASE du montant, a 6 px, et non sur un
   `vertical-align` approche : la source aligne les deux en `baseline` dans
   une boite souple. */
.dgc-resume__totaux .dgc-resume__total {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
}
.dgc-resume__total .amount { font-size: 18px; line-height: 24.3px; font-weight: var(--co-gras); }
.dgc-resume__devise {
    font-size: 12px;
    line-height: 16.2px;
    font-weight: 400;
    color: var(--co-gris2);
}

/* ------------------------------------------------------------
   11. Page de remerciement

   Relevé sur l'enregistrement d'une commande de test passée sur la
   source le 27/08/2026, image par image (2150 px de large pour une
   mise en page de 1191 : facteur 1,8). Les valeurs sont arrondies au
   pas de la source - 4, 8, 14, 16, 20, 24, 40, 48.
   ------------------------------------------------------------ */
.dgc-merci__tete {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 40px;
}
.dgc-merci__tetetexte { min-width: 0; }
/* La source ne remplit pas la pastille : un cercle creux, trait de 1,5 px,
   avec la coche du sprite de sa caisse (`sprite.…svg#check`) dedans.

   Elle est a la COULEUR DE MARQUE, pas au noir. Chez Sveve Lys les deux se
   confondent - son accent EST le noir - et le releve avait donc fige un
   `#000` qui, ici, est faux : l'export de la page de remerciement de Galerie
   Sac a Dos peint ce cercle en rgb(162,99,99), mesure au style calcule le
   2026-08-30. C'est le genre d'ecart qu'aucune comparaison de boites ne
   voit, et qu'aucune regle de fond ne rattrape : la coche est un trait, sa
   couleur vient de `color`. */
.dgc-merci__pastille {
    flex: 0 0 auto;
    display: flex;
    width: 48px;
    height: 48px;
    color: var(--co-accent);
}
.dgc-merci__pastille svg { display: block; width: 48px; height: 48px; }
.dgc-merci__numero {
    margin: 0;
    font-size: 14px;
    line-height: 18.9px;
    color: var(--co-gris);
}
.dgc-merci__titre {
    margin: 0;
    font-family: inherit;
    font-size: 20px;
    line-height: 24px;
    font-weight: var(--co-gras);
    letter-spacing: normal;
    text-transform: none;
    color: #000;
}
.dgc-merci__tete--echec { display: block; }
.dgc-merci__carte {
    border: 1px solid var(--co-bord);
    border-radius: var(--co-r);
    padding: 14px;
    margin: 0 0 14px;
    background: #fff;
}
.dgc-merci__carte p {
    margin: 0;
    font-size: 14px;
    line-height: 18.9px;
    color: #000;
}
.dgc-merci__soustitre {
    margin: 0 0 14px;
    font-family: inherit;
    font-size: 16px;
    line-height: 19.2px;
    font-weight: var(--co-gras);
    letter-spacing: normal;
    text-transform: none;
    color: #000;
}

.dgc-merci__grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    /* Empilées, les deux colonnes se touchaient : « Moyen de paiement »
       collait à « Livraison suivie ». La source laisse 16 px là où les deux
       colonnes se suivent (14 entre deux blocs d'une même colonne). */
    row-gap: 16px;
    margin-top: 14px;
}
.dgc-merci__colonne {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.dgc-merci__bloc h3 {
    margin: 0 0 8px;
    font-family: inherit;
    font-size: 14px;
    line-height: 16.8px;
    font-weight: var(--co-gras);
    letter-spacing: normal;
    text-transform: none;
    color: #000;
}
/* Les valeurs sont NOIRES sur la source, pas grises : seul le numero de
   confirmation, au-dessus du « Merci », est en #707070. */
.dgc-merci__bloc p,
.dgc-merci__bloc address {
    margin: 0;
    font-style: normal;
    font-size: 14px;
    line-height: 18.9px;
    color: #000;
    overflow-wrap: anywhere;
}
/* La marque de la carte, puis « •••• 4242 · 249,60 € EUR ». */
.dgc-merci__paiement {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.dgc-merci__marque { display: inline-flex; flex: 0 0 auto; }
.dgc-merci__marque svg { display: block; width: 38px; height: 24px; }

/* La colonne est une pile flex : les marges ne se chevauchent pas. Sans
   cette ligne, le creux sous la derniere carte s'ajoutait aux 24 px du pied
   et le bouton descendait de 14 px. */
.dgc-merci__carte:last-of-type { margin-bottom: 0; }
.dgc-merci__pied {
    display: flex;
    /* Le bouton est premier dans le flux (voir thankyou.php) : `row-reverse`
       le renvoie à droite et laisse l'aide à gauche, comme la source. */
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 24px 0 0;
}
.dgc-merci__aide {
    margin: 0;
    font-size: 14px;
    line-height: 18.9px;
    color: #000;
}
.dgc-merci__aide a {
    color: #000;
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* Le bouton de cette page n'est pas celui de la caisse : meme rayon 12 et
   meme texte 14/700, mais un creux de 21 px tout autour au lieu de la pleine
   largeur. Releve sur l'export de la source : 178,3 x 60,9 px. */
.dgc-merci__bouton {
    width: auto;
    flex: 0 0 auto;
    padding: 21px !important;
    font-size: 14px !important;
    line-height: 18.9px;
}
/* Storefront souligne tous les liens du contenu : le bouton en héritait. */
.dgc-tunnel .dgc-merci__bouton,
.dgc-tunnel .dgc-merci__bouton:hover {
    text-decoration: none !important;
}
.dgc-merci .woocommerce-order-overview,
.dgc-merci .woocommerce-order-details,
.dgc-merci .woocommerce-customer-details {
    display: none;
}

/* Les liens légaux tombent en BAS de la colonne, pas sous le contenu :
   la source les colle au pied de la fenêtre tant que la page n'est pas
   plus haute qu'elle. */
.dgc-tunnel--merci .dgc-co__colonne--principale > .dgc-co__contenu {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.dgc-tunnel--merci .dgc-co__legal { margin-top: auto; }

/* Cette page suit les seuils de la source, pas les 1000 px du tunnel : à
   750 px la carte repasse sur une colonne ET le pied s'empile ; le filet
   légal, lui, ne se resserre qu'à 580 px. Relevé le 29/08/2026 sur
   `export-thankyou`, largeur par largeur. */
@media (max-width: 749px) {
    .dgc-merci__grille { grid-template-columns: minmax(0, 1fr); }
    /* `column` et non `column-reverse` : le bouton est premier dans le flux,
       l'aide tombe donc dessous, centrée, comme la source. */
    .dgc-merci__pied {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }
    .dgc-merci__bouton { width: 100%; }
    .dgc-merci__aide { text-align: center; }
}
@media (min-width: 580px) {
    /* Le gabarit large du filet, que le bloc des 1000 px resserrait trop tôt
       sur cette page-ci. */
    .dgc-tunnel--merci .dgc-co__legal { padding: 15px 0 0; }
}
@media (max-width: 999px) {
    /* 26 px sous la barre de résumé, pas les 20 de la caisse : la source
       ouvre son « Merci » à 171 quand la barre finit à 145. Au-dessus de
       1000 px il n'y a plus de barre, et les deux pages tombent déjà au même
       endroit. */
    .dgc-tunnel--merci .dgc-co__colonne--principale { padding-top: 26px; }
    /* Et 24 px sous le bloc « Merci » au lieu de 40 : la source resserre là
       où la barre de résumé prend déjà de la hauteur. */
    .dgc-merci__tete { margin-bottom: 24px; }
}
@media (min-width: 580px) and (max-width: 999px) {
    /* Le creux sous les liens : 40 px partout, sauf dans cette bande où la
       source n'en laisse que 20. Mesuré largeur par largeur le 29/08/2026. */
    .dgc-tunnel--merci .dgc-co__colonne--principale { padding-bottom: 20px; }
}

/* Les liens légaux collent au bas de la fenêtre tant que la page est plus
   courte qu'elle : `margin-top: auto` ci-dessus ne peut le faire que si la
   colonne connaît sa hauteur. Storefront tient déjà `.hfeed.site` en colonne
   flex sur 100 vh et `.site-content` s'y étire ; il ne manquait que le relais
   sur les huit boîtes qui les séparent de la nôtre. */
.dgc-tunnel--merci .site-content,
.dgc-tunnel--merci .site-content > .col-full,
.dgc-tunnel--merci .content-area,
.dgc-tunnel--merci .site-main,
.dgc-tunnel--merci .site-main > .page,
.dgc-tunnel--merci .entry-content,
.dgc-tunnel--merci .entry-content > .woocommerce,
.dgc-tunnel--merci .dgc-co__colonne--principale {
    display: flex;
    flex-direction: column;
}
.dgc-tunnel--merci .site-content > .col-full,
.dgc-tunnel--merci .content-area,
.dgc-tunnel--merci .site-main,
.dgc-tunnel--merci .site-main > .page,
.dgc-tunnel--merci .entry-content,
.dgc-tunnel--merci .entry-content > .woocommerce,
.dgc-tunnel--merci .woocommerce > .dgc-co,
.dgc-tunnel--merci .dgc-co__colonne--principale,
.dgc-tunnel--merci .dgc-co__colonne--principale > .dgc-co__contenu {
    flex: 1 1 auto;
}

/* L'entrée de la page.

   La source ne recharge rien : sa caisse et son remerciement sont deux
   écrans de la même application. Au passage, le contenu de gauche - lui
   seul, ni l'en-tête ni le récapitulatif, qui ne bougent pas d'un pixel -
   apparaît en fondu. Relevé dans `ThankYou.…css` de checkout-web :
   `opacity 0 → 1`, `--x-duration-base` (200 ms), `--x-timing-base`
   (ease-in-out), et rien d'autre - pas de translation, pas de fondu de
   sortie de la caisse. */
@keyframes dgc-merci-entree {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.dgc-tunnel--merci .dgc-co__colonne--principale > .dgc-co__contenu {
    animation: dgc-merci-entree .2s ease-in-out both;
}
@media (prefers-reduced-motion: reduce) {
    .dgc-tunnel--merci .dgc-co__colonne--principale > .dgc-co__contenu {
        animation: none;
    }
}

/* Le point d'interrogation cerclé après « Expédition », dans le
   récapitulatif : bouton nu, 14 px, gris #666, trait de 1,5 px. */
.dgc-resume__aide {
    display: inline-flex;
    align-items: center;
    margin: 0 0 0 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--co-gris2);
    line-height: 0;
    cursor: pointer;
    vertical-align: -2px;
}
.dgc-resume__aide svg { display: block; width: 14px; height: 14px; }

/* LE PAIEMENT EXPRESS RESTE, ici, CONTRAIREMENT AUX TROIS AUTRES BOUTIQUES.

   Sveve Lys et Galerie Sac a Dos cachaient les deux elements de la passerelle
   (`display: none !important`) parce que LEUR source n'en montre pas. Celle de
   Dog Cherie en montre un : les trois exports du 10/09/2026 portent un titre
   « Express checkout », une rangee de portefeuilles et un « OR » avant
   « Contact ». La regle qui les masquait a donc ete retiree le meme jour, et
   les deux elements sont habilles plus haut (section 4 bis, `.dgc-co__express`).
   Ce qui decide de leur affichage n'est plus une feuille mais la passerelle
   elle-meme, au `ready` de son element - comme chez la source. */

/* Le bouton « Ajouter une réduction » ne vit que sous 1000 px. */
.dgc-co__reduction { display: none; }

/* ------------------------------------------------------------
   12. Les deux barres du gabarit téléphone

   Cachées au-dessus de 1000 px : la colonne de droite les remplace.
   ------------------------------------------------------------ */
.dgc-co__barre,
.dgc-co__barre-bas { display: none; }
.dgc-co__barre-bouton {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: #000;
    font-family: inherit;
    font-size: 14px;
    line-height: 18.9px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    cursor: pointer;
}
/* Storefront grise ses boutons au survol (#333, texte blanc) : la source ne
   survole rien sur ces rangées. */
.dgc-co__barre-bouton:hover,
.dgc-co__barre-bouton:focus,
.dgc-co__barre-bouton:active,
.dgc-co__reduction-bouton:hover,
.dgc-co__reduction-bouton:focus,
.dgc-co__reduction-bouton:active {
    background: none;
    color: #000;
    border: 0;
    box-shadow: none;
    outline: none;
}
.dgc-co__reduction-bouton:hover,
.dgc-co__reduction-bouton:focus,
.dgc-co__reduction-bouton:active {
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--co-bord);
}
.dgc-co__barre-bouton:focus-visible,
.dgc-co__reduction-bouton:focus-visible { outline: 2px solid var(--co-accent); outline-offset: 2px; }
/* Meme dessin que le chevron du selecteur de pays, en noir. */
.dgc-co__chevron {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="10" height="10"><path fill="none" stroke="%23000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke" d="M12 4.75 7.354 9.396a.5.5 0 0 1-.708 0L2 4.75"/></svg>') center / 10px 10px no-repeat;
    transform: none;
    transition: transform .15s ease;
}
.est-ouvert .dgc-co__chevron { transform: rotate(180deg); }
.dgc-co__barre-total { margin-left: auto; font-size: 18px; line-height: 21px; font-weight: var(--co-gras); }

@media (max-width: 999px) {
    .dgc-co {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .dgc-co__barre {
        display: block;
        order: 0;
        background: var(--co-fond);
        /* Le filet sous la barre, ouverte ou fermee (la source le porte sur
           son bouton). */
        border-bottom: 1px solid var(--co-bord);
    }
    .dgc-co__barre .dgc-co__barre-bouton {
        height: 64px;
        padding: 0 14px;
    }
    .dgc-co__colonne--resume {
        order: 1;
        display: none;
        /* 20 px entre la barre et la premiere ligne : la source aere le haut
           du panneau (relevé le 29/08/2026). */
        padding: 20px 14px;
    }
    /* Dans les panneaux du téléphone, 20 px seulement sous le champ de code
       (le 34 est le rythme de la colonne des grandes largeurs). */
    .dgc-co__colonne--resume .dgc-resume__code,
    .dgc-co__resume-bas .dgc-resume__code { margin-bottom: 20px; }
    .dgc-co__colonne--resume.est-ouvert {
        display: block;
        /* Le second filet, sous le panneau deplie : un gris un cran plus
           soutenu que celui de la barre (#D6D6D6, releve le 29/08/2026). */
        border-bottom: 1px solid #D6D6D6;
    }
    .dgc-co__colonne--resume > .dgc-co__contenu {
        max-width: 552px;
        margin: 0 auto;
    }
    .dgc-co__colonne--principale {
        order: 2;
        padding: 20px 14px 40px;
    }
    .dgc-co__colonne--principale > .dgc-co__contenu {
        max-width: 552px;
        margin: 0 auto;
    }
    /* La rangee garde sa grille : mesuree `488px 24px` a 999 et `298px 24px`
       a 390, gouttiere de 40 dans les deux cas, soit exactement
       `minmax(0,1fr) minmax(auto,max-content)`. Elle prend le rang 0 : la
       source la sert AVANT la barre depliable du recapitulatif. */
    .dgc-co-tete {
        order: 0;
        max-width: 580px;
        margin: 0 auto;
        width: 100%;
    }
    .dgc-co-tete__bande {
        max-width: none;
        margin: 0;
    }
    /* Pas de filet au-dessus : la source enchaine paiement (32 px), bouton de
       réduction (14 px), rangée Total (14 px), bouton payer. */
    .dgc-co__barre-bas {
        display: block;
        margin: 32px 0 14px;
        padding: 0;
        border: 0;
    }
    .dgc-co__reduction + .dgc-co__barre-bas { margin-top: 10px; }
    .dgc-co__barre-bas .dgc-co__barre-bouton { gap: 8px; }
    /* 42 px dont 1 px d'air, l'image en 40 arrondie a 12 sur fond #F5F5F5,
       puis 8 px de gouttiere + 8 px de grille = 16 avant le titre. */
    .dgc-co__barre-vignette {
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        padding: 1px 8px 1px 1px;
        box-sizing: content-box;
    }
    .dgc-co__barre-vignette img {
        display: block;
        width: 40px;
        height: 40px;
        object-fit: cover;
        border-radius: 12px;
        background: var(--co-fond);
        position: relative;
        z-index: 1;
    }
    /* La carte glissée derrière, quand le panier passe à plusieurs articles :
       même boîte, décalée de 6 px vers le bas à droite, GRISE et sans ombre.
       (L'export du tunnel ne la contient pas : son panier n'avait qu'un
       article. Valeurs relevées sur capture, 29/08/2026.) */
    .dgc-co__barre-vignette--pile { position: relative; }
    .dgc-co__barre-vignette--pile::after {
        content: "";
        position: absolute;
        top: 6px;
        left: 6px;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: #EDEDED;
        z-index: 0;
    }
    /* Le filet blanc qui détache la vignette de la carte du dessous. */
    .dgc-co__barre-vignette--pile img { box-shadow: 0 0 0 2px #fff; }
    .dgc-co__barre-corps { display: block; }
    .dgc-co__barre-titre { display: block; font-size: 18px; line-height: 21px; font-weight: var(--co-gras); }
    .dgc-co__barre-nb { display: block; font-size: 14px; line-height: 14px; margin-top: 3px; color: var(--co-gris); }
    .dgc-co__barre-somme {
        display: flex;
        align-items: center;
        margin-left: auto;
        font-size: 18px;
        line-height: 18px;
        font-weight: var(--co-gras);
    }
    /* Storefront allege `strong` a 600 : la source pese 700. */
    .dgc-co__barre-somme strong { font-weight: var(--co-gras); }
    /* La devise en pastille grise, comme la source : 10/700 gris sur #F5F5F5,
       coins pleins. */
    .dgc-co__barre-somme .dgc-co__devise {
        display: inline-flex;
        align-items: center;
        height: 19px;
        padding: 0 4px;
        border-radius: 36px;
        background: var(--co-fond);
        font-size: 10px;
        line-height: 10px;
        font-weight: var(--co-gras);
        color: var(--co-gris);
        margin-right: 6px;
    }
    /* La rangée dépliée : le clic sur le total la transforme en titre
       « Résumé de la commande » (20/700), le prix reste à droite, le chevron
       se retourne, et le récapitulatif s'écrit dessous, sur fond blanc —
       vignette, « Total » et « 1 article » s'effacent (source, 29/08/2026). */
    .dgc-co__barre-resume-titre {
        display: none;
        font-size: 20px;
        line-height: 24px;
        font-weight: var(--co-gras);
    }
    .dgc-co__barre-bas.est-ouvert .dgc-co__barre-vignette,
    .dgc-co__barre-bas.est-ouvert .dgc-co__barre-corps { display: none; }
    .dgc-co__barre-bas.est-ouvert .dgc-co__barre-resume-titre { display: block; }
    .dgc-co__barre-bas.est-ouvert .dgc-co__chevron { transform: rotate(180deg); }
    .dgc-co--resume-bas .dgc-co__reduction { display: none; }
    .dgc-co__resume-bas[hidden] { display: none; }
    .dgc-co__resume-bas { margin: 11px 0 14px; }
    /* Dans le panneau bas, pas de marge residuelle sous la rangee : le
       recapitulatif enchaine. Et 32 px au-dessus du titre : le bouton de
       reduction s'efface, la source garde l'ecart du bloc de paiement. */
    .dgc-co--resume-bas .dgc-co__barre-bas { margin-top: 32px; margin-bottom: 0; }
    /* Deplie, la source ne montre le prix qu'au Total du bas : celui de la
       rangee-titre s'efface. */
    .dgc-co__barre-bas.est-ouvert .dgc-co__barre-somme { display: none; }
    /* « Ajouter une réduction » : sous 1000 px seulement — au-dessus, le champ
       vit dans la colonne de droite. Le bouton s'efface au clic et laisse la
       place au champ + « Valider », comme la source. */
    .dgc-co__reduction { display: block; margin: 32px 0 0; }
    .dgc-co__reduction-bouton {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin: 0;
        padding: 9.3px;
        border: 0;
        border-radius: var(--co-r);
        background: #fff;
        box-shadow: inset 0 0 0 1px var(--co-bord);
        color: #000;
        font-family: inherit;
        font-size: 14px;
        line-height: 18.9px;
        font-weight: var(--co-gras);
        letter-spacing: normal;
        text-transform: none;
        cursor: pointer;
    }
    .dgc-co__reduction-bouton svg { display: block; }

    /* Le pied légal colle au bouton sur téléphone : 14 px au-dessus du filet,
       20 px entre le filet et les liens (la source; le 48/15 est le gabarit
       des grandes largeurs). */
    .dgc-co__legal {
        margin-top: 14px;
        /* Pas de rembourrage bas : les 40 px sous les liens sont ceux de la
           colonne, comme la source (60 px sinon). */
        padding: 20px 0 0;
    }

    /* La bulle d'aide, calée au bord droit : centrée sur l'icône, elle
       sortait de la fenêtre et élargissait toute la page (le logo « partait
       vers le bas »). La source la repousse à 10 px du bord, la pointe
       restant sur l'axe de l'icône : bord droit de bulle = icône + 25 px,
       constant à toutes les largeurs (champ à 14 du bord, icône à 12 du
       champ). */
    .dgc-co__aide .dgc-co__bulle {
        left: auto;
        right: -16px;
        transform: scale(.95);
        transform-origin: calc(100% - 25px) bottom;
    }
    .dgc-co__aide:hover .dgc-co__bulle,
    .dgc-co__aide .dgc-co__aide-bouton:focus-visible + .dgc-co__bulle {
        transform: scale(1);
    }
    .dgc-co__aide .dgc-co__bulle::after {
        left: auto;
        right: 20px;
        margin-left: 0;
    }
}

/* Sous 570 px, prénom/nom et code postal/ville s'empilent.

   Tout passe en `grid-column: auto`, jamais `span 2` ni `1 / -1` : un enfant
   qui enjambe encore deux pistes crée une piste IMPLICITE de 0 px, et la
   gouttière de 10 px entre les deux se paie sur la piste explicite — les
   champs `1 / -1` sortaient à 352 px quand les `span 2` faisaient 362. */
@media (max-width: 569px) {
    .dgc-co__grille { grid-template-columns: minmax(0, 1fr); }
    .dgc-co .dgc-champ--moitie-1,
    .dgc-co .dgc-champ--moitie-2,
    .dgc-co__grille > .dgc-co__titre,
    .dgc-co__grille > .dgc-co__entete,
    .dgc-co__grille > .woocommerce-account-fields,
    .dgc-co__grille > .dgc-case,
    .dgc-co__grille > .dgc-champ--large,
    .dgc-co__grille > .clear,
    .dgc-co__grille--facturation .form-row { grid-column: auto; }
}

/* --- Le lissage du tunnel (repris tel quel) ------------------- */

/* ============================================================
   LE LISSAGE DU TEXTE

   Tout le texte peut paraître plus gras qu'attendu à taille,
   graisse et fonte identiques. Ce n'est pas la fonte, c'est le
   LISSAGE :

     body { -webkit-font-smoothing: antialiased }

   En `auto`, macOS applique son lissage sous-pixel, qui épaissit
   chaque glyphe. Aucune mesure de boîte ne peut le voir : à
   graisse égale les largeurs de texte sont les mêmes, seul le
   rendu change.

   Posé sur `body` pour que tout le site en hérite, et non le
   seul bloc où l'écart s'est vu.
   ============================================================ */
body {
    -webkit-font-smoothing: antialiased;
}
/* Sauf le tunnel : sa source (checkout-web) rend en `subpixel-antialiased`,
   la valeur par défaut. L'`antialiased` de la vitrine amincissait chaque
   glyphe - « Payer maintenant » sortait moins gras et moins blanc que le
   sien, à graisse et corps pourtant identiques. Même diagnostic que
   l'espace client, plus bas. */
body.dgc-tunnel {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}
/* ------------------------------------------------------------
   Uniformisation des blocs editoriaux : meme titre, meme ordre
   photo puis texte, dans le bloc voyage comme dans le bloc de
   texte long.
   ------------------------------------------------------------ */
.gac-section--split .gac-section__title,
.gac-copy .gac-section__title {
    font-size: 1.15em;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: left;
    margin: 0 0 1em;
}
.gac-section--split .gac-split__text,
.gac-copy .gac-copy__text {
    text-align: left;
}

/* Sur telephone, la photo passe toujours avant le texte. */
@media (max-width: 900px) {
    .gac-copy {
        display: flex;
        flex-direction: column;
    }
    .gac-copy__media {
        order: -1;
    }
    .gac-split {
        display: flex;
        flex-direction: column;
    }
    .gac-split__media {
        order: -1;
    }
}

/* Le logo garde ses proportions : une regle de Storefront lui impose une
   hauteur fixe, ce qui l'aplatit.

   NE PAS poser `height: auto !important` ici : il gagnerait sur la hauteur
   declaree plus bas et laisserait la boite suivre la proportion de la
   vignette que `srcset` a retenue - 52,1 px avec l'original, 51,8 avec celle
   de 300 px. Le lien, lui, garde `auto` : c'est son rembourrage qui fait sa
   hauteur, et c'est bien Storefront qu'il faut desarmer la. */
.site-header .custom-logo-link {
    height: auto !important;
    max-height: none !important;
}
.site-header .custom-logo-link img,
.site-header .custom-logo {
    max-height: none !important;
}

/* Storefront deroule son propre mini panier au survol de l'icone. Le volet
   de droite le remplace : il ne doit rien se passer avant le clic. */
.site-header-cart .widget_shopping_cart,
.site-header-cart li:nth-child(2) {
    display: none !important;
}

/* Page de connexion : pas de titre de page au-dessus du formulaire, et le
   lien de confidentialite en bas. */
.woocommerce-account:not(.logged-in) .entry-header {
    display: none;
}
.gac-login__privacy {
    margin: 2.5em 0 0;
    text-align: center;
    font-size: .92em;
}
.gac-login__privacy a { color: var(--gac-primary); }

/* La barre d'annonce ne bouge pas quand un volet s'ouvre : elle reste sur
   la page, et ce sont les volets qui passent par-dessus. */
body.gac-nav-open .gac-announcement-bar,
body.gac-drawer-open .gac-announcement-bar {
    z-index: 1;
}

/* La croix du volet est un bouton : les regles generales lui collaient un
   fond de marque et des coins arrondis. */
/* `.gac-filters__close` n'est plus de la liste : la croix du tiroir de
   filtres est ronde chez la source (`border-radius: 50%`), et un
   `border-radius: 0 !important` le lui interdisait. Elle a ses propres regles
   plus haut. */
.gac-nav__close,
.gac-drawer__close {
    background: none !important;
    background-image: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--gac-ink) !important;
}

/* ------------------------------------------------------------
   Volet de filtres : cases carrees, curseur de prix

   Le titre, les sections, le sommaire et le chevron du tiroir sont mesures
   plus haut, avec le reste du tiroir. Le bloc qui les redefinissait ici
   venait de Galerie Sac a Dos : titre a 1,05em, sections separees par un
   filet BAS large comme le tiroir, sommaire en graisse 600 et chevron dessine
   avec deux bordures tournees de 45 degres.
   ------------------------------------------------------------ */

/* Cases a cocher dessinees, pas les cases bleues du navigateur.

   TAILLES ET COULEURS
   -------------------------------------------------------
   22 px de cote et 7 px de coins au telephone, 16 et 5 au-dessus de 750 px,
   avec 8 puis 6 px entre la case et le libelle. Le cadre vaut rgba(0,0,0,.35),
   le libelle rgba(0,0,0,.81), et un libelle grise rgba(0,0,0,.5).

   Le masque ci-dessous est un trace importe, stroke 1,5 : un chevron dessine
   a l'oeil ne tombe jamais sur le meme galbe.
*/
/* Storefront pose `margin-bottom: 1.618em` sur tout `form`, soit 22,65 px a
   14 px de texte : le panneau ferait 104,2 px de haut au lieu de 68,8. Ce
   n'est ni un rembourrage ni un interligne, et aucune mesure du contenu ne le
   montre - c'est la marge du formulaire lui-meme. */
.gac-facette__form { margin: 0; }
/* La ligne fait la hauteur de la case, pas celle du texte :
   `line-height: var(--checkbox-size)` sur `.checkbox__label`. En 22,4 px
   d'interligne, deux lignes ajouteraient 12,8 px au panneau. */
.gac-check {
    --dgc-case: 22px;
    --dgc-case-coins: 7px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    font-size: 14px;
    line-height: var(--dgc-case);
    color: rgba(0, 0, 0, .81);
}
.gac-check__texte { line-height: var(--dgc-case); }
/* 11,2 px entre deux cases dans le panneau du bureau (premiere ligne a
   y=241,9, seconde a y=269,1, cases de 16), 22 px dans le tiroir - releve le
   29/08/2026 : ses deux cases y sont a y=117 et y=161, hautes de 22. */
.gac-facette__panneau .gac-check + .gac-check { margin-top: 11.2px; }
.gac-filters__group .gac-check + .gac-check { margin-top: 22px; }
.gac-check input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
/* MOUVEMENT. Cocher une facette n'est pas un basculement sec : le cadre et
   le fond de la case glissent en .2s ease, la coche monte en opacite en .125s
   ease-in-out, et le libelle change de couleur en .2s ease. Le survol de la
   ligne eclaircit la case avant meme le clic.

   Cadre rgba(0,0,0,.35) au repos et .4 au survol, fond blanc puis
   rgba(0,0,0,.05), libelle rgba(0,0,0,.81) puis .9.

   La coche est peinte en permanence, a opacite nulle : un `content` qui
   n'existe qu'a l'etat coche ne peut pas s'animer. */
.gac-check__box {
    flex: 0 0 auto;
    width: var(--dgc-case);
    height: var(--dgc-case);
    border: 1px solid rgba(0, 0, 0, .35);
    border-radius: var(--dgc-case-coins);
    background: #fff;
    position: relative;
    transition: border-color var(--dgc-anim-panneau) ease,
        background-color var(--dgc-anim-panneau) ease;
}
@media (min-width: 750px) {
    .gac-check { gap: 6px; --dgc-case: 16px; --dgc-case-coins: 5px; }
}
.gac-check:hover .gac-check__box {
    border-color: rgba(0, 0, 0, .4);
    background: rgba(0, 0, 0, .05);
}
.gac-check span:not(.gac-check__box) { transition: color var(--dgc-anim-panneau) ease; }
.gac-check:hover span:not(.gac-check__box) { color: rgba(0, 0, 0, .9); }
.gac-check input:checked + .gac-check__box {
    background: var(--gac-ink);
    border-color: var(--gac-ink);
}
.gac-check:hover input:checked + .gac-check__box { background: rgba(0, 0, 0, .85); }
.gac-check__box::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'><path%20d='M4.75439%2010.7485L7.68601%2014.5888C7.79288%2014.7288%207.84632%2014.7988%207.91174%2014.8242C7.96907%2014.8466%208.03262%2014.8469%208.09022%2014.8253C8.15596%2014.8007%208.21026%2014.7314%208.31886%2014.5927L15.2475%205.74658'%20stroke='black'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/></svg>") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'><path%20d='M4.75439%2010.7485L7.68601%2014.5888C7.79288%2014.7288%207.84632%2014.7988%207.91174%2014.8242C7.96907%2014.8466%208.03262%2014.8469%208.09022%2014.8253C8.15596%2014.8007%208.21026%2014.7314%208.31886%2014.5927L15.2475%205.74658'%20stroke='black'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/></svg>") center / 100% 100% no-repeat;
    opacity: 0;
    transition: opacity var(--dgc-anim) ease-in-out;
}
.gac-check input:checked + .gac-check__box::after { opacity: 1; }
.gac-check input:focus-visible + .gac-check__box {
    outline: 2px solid var(--gac-primary);
    outline-offset: 2px;
}
/* UNE CASE SANS PRODUIT EST MORTE.
   `checkbox--disabled` pose `cursor: not-allowed`, le libelle passe a
   rgba(0,0,0,.5) et la case prend le fond et le filet de champ desactive -
   rgba(0,0,0,.05) pour les deux. */
.gac-check--morte { cursor: not-allowed; }
.gac-check--morte,
.gac-check--morte:hover span:not(.gac-check__box) { color: rgba(0, 0, 0, .5); }
.gac-check--morte .gac-check__box,
.gac-check--morte:hover .gac-check__box {
    background: rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);
}

/* PAS DE CURSEUR DE PRIX : deux champs de saisie et la phrase de plafond,
   rien d'autre. Des regles `.gac-slider*` habilleraient un element qui
   n'existe pas.
*/
/* LES DEUX CHAMPS DE PRIX, AUX MESURES
   -------------------------------------------------------------------
     champ           149,1 x 48, texte a droite, rgb(51,51,51)
     rembourrage     12,8 partout, 32 a gauche pour laisser passer le symbole
     symbole         34,9 x 48, pose DANS le champ a gauche, rgba(51,51,51,.6)
     « à »           7,9 x 48, 13,1 de chaque cote
   Le symbole n'est PAS a cote du champ : c'est un `<label>` en surimpression
   (`top: 0; left: 0`). Un cadre entourant le couple symbole + champ donnerait
   un bloc plus large et un filet de trop - il n'en faut qu'un, autour du champ
   seul. */
.gac-filters__range {
    display: flex;
    align-items: center;
    gap: 13.1px;
}
/* 7,9 x 48 : le « à » occupe toute la hauteur de la rangee et centre son
   texte, il ne fait pas que ses 22,4 px de ligne. */
.gac-filters__range-sep {
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, .81);
}
.gac-money {
    flex: 1 1 0;
    position: relative;
    display: block;
}
.gac-money__sign {
    position: absolute;
    left: 0;
    top: 0;
    padding: 12.8px;
    color: rgba(51, 51, 51, .6);
    pointer-events: none;
}
/* LE CADRE DU CHAMP : UN ANNEAU, PAS UNE BORDURE.
   Les trois etats :

                  repos                     survol ET focus
     cadre        box-shadow 0 0 0 1px      box-shadow 0 0 0 1.5px
                  rgb(223,223,223)          rgb(223,223,223)
     fond         rgba(255,255,255,.78)     rgba(0,0,0,.01)
     coins        4px                       4px
     bordure      aucune                    aucune
     outline      aucun                     decale de 2 px au focus
     transition   box-shadow .125s ease, background-color .125s ease

   Le champ de Storefront - bordure pleine de 1 px, coins vifs, ombre interne
   `0 1px 1px rgba(0,0,0,.125)`, aucun survol, focus qui noircit la bordure et
   grise le fond - est entierement remplace.

   L'anneau plutot que la bordure n'est pas un detail : il grossit de 1 a
   1,5 px au survol SANS deplacer le texte, ce qu'une bordure ne sait pas
   faire. */
.gac-money input {
    /* `block` et non l'`inline-block` par defaut : aligne sur la ligne de base,
       le champ tirait 14 px de descendante sous lui et la rangee faisait 62 px
       au lieu de 48. */
    display: block;
    width: 100%;
    height: 48px;
    border: none;
    outline: none;
    border-radius: 4px;
    padding: 12.8px 12.8px 12.8px 32px;
    box-shadow: 0 0 0 1px rgb(223, 223, 223);
    background-color: rgba(255, 255, 255, .78);
    color: rgb(51, 51, 51);
    text-align: right;
    font-size: 14px;
    line-height: 22.4px;
    -moz-appearance: textfield;
    transition: box-shadow var(--dgc-anim) ease, background-color var(--dgc-anim) ease;
}
.gac-money input:is(:hover, :focus) {
    box-shadow: 0 0 0 1.5px rgb(223, 223, 223);
    background-color: rgba(0, 0, 0, .01);
}
.gac-money input:focus-visible { outline-offset: 2px; }
.gac-money input::-webkit-outer-spin-button,
.gac-money input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Storefront noircit la bordure et grise le fond de tout champ focalise. La
   source ne fait ni l'un ni l'autre : le focus y ressemble au survol. */
.gac-money input:focus {
    border: none;
    background-color: rgba(0, 0, 0, .01);
}

/* ============================================================
   Page panier
   ============================================================ */
.woocommerce-cart .entry-header .entry-title {
    text-align: center;
}
.woocommerce-cart .woocommerce-notices-wrapper:empty { display: none; }

/* The lines sit in the core cart form so woocommerce_cart_actions and the
   update_cart post still work; it is the grid item, min-width keeps it from
   blowing the column out. */
.gac-cart > form.woocommerce-cart-form { min-width: 0; }

.gac-cart {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: 4em;
    align-items: start;
    margin: 2em 0 4em;
}
.gac-cart__head {
    display: grid;
    grid-template-columns: 1fr 10rem 7rem;
    gap: 1.5em;
    padding: 0 0 .9em;
    border-bottom: 1px solid var(--gac-border);
    font-size: .78em;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6b6b6b;
}
.gac-cart__head span:nth-child(2) { text-align: center; }
.gac-cart__head span:nth-child(3) { text-align: right; }

.gac-cart__line {
    display: grid;
    grid-template-columns: 1fr 10rem 7rem;
    gap: 1.5em;
    align-items: center;
    padding: 1.6em 0;
}
.gac-cart__product {
    display: flex;
    align-items: center;
    gap: 1.2em;
    min-width: 0;
}
.gac-cart__media img {
    width: 84px;
    height: auto;
    display: block;
}
.gac-cart__body {
    display: flex;
    flex-direction: column;
    gap: .25em;
    min-width: 0;
}
.gac-cart__name a { color: var(--gac-ink); }
.gac-cart__variant { color: #6b6b6b; font-size: .9em; }
.gac-cart__unit { font-size: .95em; }

.gac-cart__qty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5em;
}
.gac-cart__remove {
    background: none !important;
    border: 0;
    padding: 0;
    font-size: .88em;
    color: #6b6b6b !important;
    text-decoration: underline;
    cursor: pointer;
    letter-spacing: 0;
    text-transform: none;
}
.gac-cart__total { text-align: right; }

.gac-cart__aside {
    padding-top: 2.6em;
}
.gac-cart__grand {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1em;
    margin: 0 0 .3em;
    font-size: 1.15em;
}
.gac-cart__grand strong { font-weight: 600; }
.gac-cart__shipping {
    color: #6b6b6b;
    margin: 0 0 1.6em;
    font-size: .95em;
}

@media (max-width: 900px) {
    .gac-cart {
        grid-template-columns: minmax(0, 1fr);
        gap: 2em;
    }
    .gac-cart__head { display: none; }
    .gac-cart__line {
        grid-template-columns: 1fr auto;
        gap: .8em 1em;
    }
    .gac-cart__product { grid-column: 1 / -1; }
    .gac-cart__qty { align-items: flex-start; }
    .gac-cart__aside { padding-top: 0; }
}

/* La barre d'annonce reste centree tant que son contenu tient : le mode
   defilant ne doit pas la coller a gauche. */
.gac-announcement-inner {
    justify-content: center;
    text-align: center;
}

/* La petite ligne de section est ecrite dans la police de texte de la
   source, pas dans la condensee des titres. */
.gac-section__kicker {
    /* Police de texte, graisse grasse, interlettrage de 1 px, 14 px. */
    font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 1.47;
    color: var(--gac-ink);
}

/* Fond blanc franc : Storefront pose un gris tres clair qui rend la page
   terne. */
body,
.site,
.site-content,
.woocommerce-cart .site-content,
.site-content .col-full {
    background-color: #fff;
}

/* Pas de bandes alternees : les sections s'enchainent sur du blanc. */
.gac-home .gac-section,
.gac-home .gac-section:nth-child(even) {
    background: #fff;
}

/* Titre de section : 30 px et graisse moyenne
   (--heading-h2-font-size: 30px, Inter). */
.gac-section__title {
    font-size: 30px;
    font-weight: 500;
    line-height: 1.25;
}
.gac-section--split .gac-section__title,
.gac-copy .gac-section__title {
    font-size: 1.15em;
    font-weight: 600;
}

/* La barre de defilement de la fenetre. La source la declare `thin`, curseur
   noir a 40 % sur piste blanche ; sans ces deux valeurs le navigateur la laisse
   a l'OS, qui la peint large et sur fond sombre des que macOS est en apparence
   sombre. Releve des deux cotes par `scripts/rendu/defilement.js`. */
html {
    background-color: #fff;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .4) rgb(255, 255, 255);
}



/* Le panier occupe toute la largeur de contenu : Storefront le laissait dans
   sa colonne a 61,8 %, ou les 22 rem du recapitulatif ne laissaient plus
   qu'une dizaine de pixels au nom du produit, coupe lettre par lettre. */
body.woocommerce-cart .content-area,
body.woocommerce-cart .site-main,
body.woocommerce-cart .entry-content,
body.woocommerce-cart .entry-content > .woocommerce {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.gac-cart__product,
.gac-cart__body,
.gac-cart__name {
    min-width: 0;
}
.gac-cart__name,
.gac-cart__variant {
    overflow-wrap: anywhere;
}
@media (max-width: 1100px) {
    .gac-cart {
        grid-template-columns: minmax(0, 1fr) 18rem;
        gap: 2.5em;
    }
}

/* Le bloc de droite du panier reprend telle quelle la fin du volet. */
.gac-cart__aside .gac-cart-checkout {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
}
.gac-cart__aside .gac-cart-badges {
    margin-top: 1.4em;
}

.gac-cart-checkout,
.gac-cart-checkout:hover,
.gac-cart-checkout:focus {
    text-decoration: none !important;
}

/* Pastille du panier : masquée quand il est vide. */
.site-header-cart .cart-contents .gac-cart-count--vide { display: none; }

/* « Le prix le plus élevé est de … », en bas du panneau Prix. */
/* 30,4 px de haut a 13,8 sous les champs, texte de 14 px en
   rgba(0,0,0,.81), rembourrage 0 12,8px 8px - et non un .82em grise. */
.gac-filters__plafond {
    margin: 13.8px 0 0;
    padding: 0 12.8px 8px;
    font-size: 14px;
    line-height: 22.4px;
    color: rgba(0, 0, 0, .81);
    opacity: 1;
}

/* ============================================================================
   Mise en page
   ============================================================================
   Ce qui suit ne se lit pas dans les variables CSS : ce sont des regles de
   mise en page, relevees a l'ecran.
   ========================================================================= */

:root {
    /* Le blanc cassé chaud : rgb(250 248 246). C'est le fond du pied de page
       ET celui des visuels de carte produit. */
    --gac-creme: #faf8f6;
    /* Pas de colonne centrale etroite : les sections occupent la fenetre a
       une gouttiere pres. Storefront plafonne a 1170 px, ce qui laisse un
       quart de fenetre vide a droite sur un ecran large. */
    --gac-largeur-page: 1600px;
}

/* Contenu et pied de page alignes sur l'en-tete. La caisse est exclue : elle
   a son propre gabarit, volontairement etroit. */
body:not(.dgc-checkout).dgc-no-sidebar .site-content > .col-full,
body:not(.dgc-checkout) .site-footer > .col-full {
    max-width: var(--gac-largeur-page);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* ---------------------------------------------------------------- EN-TÊTE
   Le logo est seul sur une première rangée, en grand et en sérif, avec les
   icônes à droite ; la navigation vient en dessous. Pas de rangée unique avec
   un petit logo.

   Le balisage de Storefront enferme le logo et le menu dans un même .col-full,
   les icônes étant à côté. Plutôt que de réécrire l'entête — et de perdre le
   menu mobile et toute la feuille de navigation, scopée sur
   .storefront-primary-navigation — on dissout ce conteneur avec
   display:contents et on réordonne en flex. La largeur maximale déménage sur
   le parent, qui devient le conteneur. */
.site-header .storefront-primary-navigation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0;
    column-gap: 1.2em;
    max-width: var(--gac-largeur-page);
    margin: 0 auto;
    padding: 1.5em 1.5rem 1.1em;
    background: #fff;
}
.site-header .storefront-primary-navigation > .col-full {
    display: contents;
}
/* Selecteurs a quatre classes, et non `.site-branding` tout court : la passe
   « largeurs forcees » plus haut dans ce fichier vise
   `.site-header .storefront-primary-navigation > .col-full > .main-navigation`
   avec `flex: 1 1 auto`. Une regle a une classe perd contre elle quelle que
   soit sa position, et la navigation restait collee sur la premiere rangee.
   `display:contents` ne change rien au filtrage : `> .col-full >` matche
   toujours, c'est bien une question de specificite. */
.site-header .storefront-primary-navigation > .col-full > .site-branding {
    order: 1;
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    float: none;
    margin: 0;
    padding: 0;
    position: static;
    transform: none;
}
.site-header .storefront-primary-navigation > .col-full > .gac-search-toggle {
    order: 2;
    flex: 0 0 auto;
    margin: 0 0 0 auto;
}
.site-header .storefront-primary-navigation > .col-full > .gac-account {
    order: 3;
    flex: 0 0 auto;
    margin: 0;
}
.site-header .storefront-primary-navigation > .col-full > .site-header-cart {
    order: 4;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    float: none;
    margin: 0;
    padding: 0;
}
.site-header .storefront-primary-navigation > .col-full > .main-navigation {
    order: 5;
    flex: 1 0 100%;
    width: 100%;
    max-width: none;
    float: none;
    margin: .55em 0 0;
    padding: 0;
}
.site-header .storefront-primary-navigation > .col-full > .main-navigation
    ul.menu { justify-content: flex-start; }

/* Pas de chevron sur « Suspensions » : l'entree ouvre son sous-menu au
   survol sans le signaler. */
.site-header .main-navigation ul.menu li.menu-item-has-children > a::after,
.site-header .main-navigation ul.nav-menu li.menu-item-has-children > a::after {
    content: none;
}

/* Le logo : le thème source lui donne 213 px de large pour 52 px de haut,
   soit une capitale d'environ 40 px en Libre Baskerville.
   Trois classes : `.site-branding .site-title { font-size: 2em }` vit plus
   haut dans ce fichier et gagnait contre un simple `.site-title`. */
.site-header .site-branding .site-title,
.site-header .site-branding .site-title a,
.site-title,
.site-title a {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: none;
    color: var(--gac-heading);
}

/* La navigation : Inter, casse normale - jamais de capitales espacées. */
.main-navigation ul li a {
    text-transform: none;
    font-weight: 400;
    font-size: .95rem;
    letter-spacing: 0;
    padding: .3em 0;
}
.main-navigation ul.menu > li,
.main-navigation ul.nav-menu > li { margin-right: 1.7em; }

/* ------------------------------------------------------------------- HERO
   Source : image pleine largeur, titre BLANC centré et posé en bas, bouton
   au contour blanc en casse normale. Nous : image bornée par le conteneur,
   titre noir en haut à gauche, bouton noir plein en majuscules. */
.gac-hero {
    /* `left: 50%` vient de la toute premiere version du hero, plus haut dans
       ce fichier. Combine a la marge negative ci-dessous il decalait le bloc
       d'une demi-largeur de conteneur vers la DROITE au lieu de l'etaler :
       c'est le hero en biais des captures. On le neutralise ici plutot que de
       toucher a la vieille regle, que d'autres gabarits utilisent encore. */
    position: relative;
    left: auto;
    width: auto;
    max-width: none;
    /* Pas de 100vw : sur un navigateur a barre de defilement classique il
       depasse de sa largeur et ouvre un defilement horizontal. Les deux
       marges negatives etalent le bloc sans ce defaut. */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: 745px;
    align-items: flex-end;          /* le bloc de texte descend en bas */
    justify-content: center;
    padding: 5.5rem 1.5rem 4.5rem;
    margin-bottom: 3.2em;
}
.gac-hero .wp-block-cover__inner-container { text-align: center; }
/* Quatre classes, et non `.gac-hero__title` : la feuille de blocs de
   Storefront pose `.wp-block-cover .wp-block-cover__inner-container
   h1:not(.has-text-color) { color: #000 }`, soit [0,3,1]. Le titre du hero
   sortait donc en NOIR sur la photo malgre la regle ci-dessous. */
.wp-block-cover.gac-hero .wp-block-cover__inner-container h1.gac-hero__title,
.gac-hero__title {
    color: #fff;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-weight: 400;
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    line-height: 1.18;
    max-width: 20ch;
    margin: 0 auto .9em;
    text-shadow: none;
}
.gac-hero .wp-block-buttons { justify-content: center; }
.gac-hero .wp-block-button__link,
.gac-hero .gac-btn .wp-block-button__link {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .9);
    color: #fff;
    text-transform: none;
    font-weight: 400;
    font-size: .95rem;
    letter-spacing: 0;
    padding: .85em 1.9em;
    border-radius: 0;
}
.gac-hero .wp-block-button__link:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

/* ------------------------------------------------- TITRES DE SECTION + LIEN
   « Toutes les voir » va à droite, sur la même ligne que le titre - pas sous
   le titre, aligné à gauche. */
.gac-section__title {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-weight: 400;
    font-size: 1.55rem;
    margin: 2.6em 0 1.1em;
}
.gac-voir-tout {
    margin: -3.3em 0 1.1em;
    text-align: right;
}
.gac-voir-tout a {
    font-family: 'Inter', sans-serif;
    font-size: .92rem;
    color: var(--gac-ink);
    text-decoration: none;
    border-bottom: 0;   /* ce lien ne se souligne pas */
}

/* -------------------------------------------------------- CARTES PRODUIT
   Source : grand visuel posé sur le crème, titre en Inter, prix dessous.
   Nous : vignette minuscule et titre en sérif — le sérif est réservé aux
   titres de section et au logo. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: .92rem;
    line-height: 1.35;
    text-align: left;
    padding: .8em 0 .2em;
    margin: 0;
}
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .gac-loop-media img {
    background: var(--gac-creme);
    aspect-ratio: 1 / 1;
    object-fit: contain;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 1.4em;
    border-radius: 0;
}
.woocommerce ul.products li.product .price {
    font-family: 'Inter', sans-serif;
    font-size: .92rem;
    font-weight: 400;
    color: var(--gac-ink);
    text-align: left;
    margin: 0 0 .5em;
}
.woocommerce ul.products li.product { text-align: left; }

/* --------------------------------------------------- CARTES DE COLLECTION
   Source : grande carte crème, visuel centré, libellé en pastille blanche
   posée en bas à gauche DANS la carte. Nous : petite photo d'ambiance et un
   lien souligné en sérif dessous. */
.gac-cats-grid .wp-block-column { position: relative; }
.gac-cats-grid figure,
.gac-cats-grid .wp-block-image { margin: 0; }
.gac-cats-grid img {
    width: 100%;
    aspect-ratio: 1 / 1;   /* carre, pas paysage */
    object-fit: contain;
    background: var(--gac-creme);
    padding: 1.6em;
    display: block;
}
.gac-cats-grid .gac-cat__label {
    position: absolute;
    left: 1.2em;
    bottom: 1.2em;
    margin: 0;
}
.gac-cats-grid .gac-cat__label a {
    display: inline-block;
    background: #fff;
    color: var(--gac-ink);
    font-family: 'Inter', sans-serif;
    font-size: .85rem;
    text-decoration: none;
    padding: .55em 1em;
}

/* -------------------------------------------------- LETTRE D'INFORMATION
   Source : bloc centré, champ e-mail en pilule avec une flèche à droite.
   C'est le seul arrondi plein de tout le site. Nous : texte à gauche et un
   bouton noir plein, sans champ. */
.gac-newsletter,
.gac-newsletter * { text-align: center; }
.gac-newsletter__inner { max-width: 620px; margin: 0 auto; }
.gac-newsletter h2 {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-weight: 400;
    font-size: 1.4rem;
    margin-bottom: .7em;
}
.gac-newsletter form {
    display: flex;
    align-items: center;
    max-width: 460px;
    margin: 1.6em auto 0;
    border: 1px solid var(--gac-border);
    border-radius: var(--gac-radius-pill);
    background: #fff;
    overflow: hidden;
}
.gac-newsletter input[type="email"] {
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    padding: 1em 1.4em;
    font-size: .95rem;
}
/* Pas de filet au focus souris, mais le clavier garde l'anneau du theme :
   outline:none seul laissait le champ sans aucune indication au Tab. */
.gac-newsletter input[type="email"]:focus { outline: none; }
.gac-newsletter input[type="email"]:focus-visible {
    outline: 2px solid var(--gac-primary);
    outline-offset: 2px;
}
.gac-newsletter button {
    background: transparent;
    border: 0;
    color: var(--gac-ink);
    padding: .8em 1.2em;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

/* Le champ vient du shortcode de mu-plugins/dgc-newsletter.php. Le bloc
   `.gac-newsletter *` centre tout : on rend son alignement au champ, dont le
   texte de substitution est cale a gauche. */
.gac-newsletter input[type="email"] { text-align: left; }
.gac-newsletter button svg { display: block; }
.gac-newsletter__message {
    margin: .9em 0 0;
    font-size: .9rem;
    color: var(--gac-ink);
}
/* Le piege a robots : hors ecran, jamais annonce. `display:none` ne convient
   pas, plusieurs robots ignorent les champs caches de cette facon. */
.gac-piege {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* --------------------------------------------------------------- LA FAQ
   Source : titre aligné à gauche, chevron à DROITE de chaque ligne. Nous :
   titre centré et le triangle par défaut du navigateur, à gauche.

   `.gac-accordion--faq details` est le TROISIÈME balisage de la même FAQ,
   celui de la page /faq : un groupe de blocs sans conteneur `.gac-faq`
   autour. Il ne recevait aucune de ces règles et gardait le sommaire nu du
   navigateur - 23 px de haut, sans rembourrage, triangle à gauche. Il est
   ajouté à chaque liste de sélecteurs plutôt que redéfini ailleurs : une
   seule définition par propriété, sinon les trois FAQ redivergent. */
.gac-faq__title { text-align: left; }
.gac-faq details > summary,
.gac-accordion--faq details > summary,
.gac-faq-item > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    cursor: pointer;
    padding: 1.05em 0;
}
.gac-faq details > summary::-webkit-details-marker,
.gac-accordion--faq details > summary::-webkit-details-marker,
.gac-faq-item > summary::-webkit-details-marker { display: none; }
.gac-faq details > summary::after,
.gac-accordion--faq details > summary::after,
.gac-faq-item > summary::after {
    content: "";
    flex: 0 0 auto;
    width: .5em;
    height: .5em;
    border: solid currentColor;
    border-width: 0 1px 1px 0;
    transform: rotate(45deg) translateY(-.15em);
    transition: transform .18s ease;
}
.gac-faq details[open] > summary::after,
.gac-accordion--faq details[open] > summary::after,
.gac-faq-item[open] > summary::after {
    transform: rotate(-135deg) translateY(.1em);
}

/* ------------------------------------------------------------ PIED DE PAGE
   Source : fond crème, texte sombre, grand logo sérif à gauche, intitulés en
   casse normale. Nous : fond noir, pas de logo, capitales espacées. */
.site-footer {
    background: var(--gac-creme) !important;
    color: var(--gac-ink) !important;
    padding: 3.5em 0 2em;
}
.site-footer a,
.site-footer .gac-footer-nav__list a,
.site-footer .gac-footer-nav__title { color: var(--gac-ink) !important; }

.gac-footer-logo-texte {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 2.1rem;
    line-height: 1.1;
    color: var(--gac-heading);
    text-decoration: none;
}
.site-footer .gac-footer-nav {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 1fr 1fr;
    gap: 1.6em 2.5em;
    text-align: left;
    padding: 0 0 2em;
}
.site-footer .gac-footer-nav__title {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1.05rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    margin: 0 0 .8em;
}
.site-footer .gac-footer-nav__list {
    display: block;          /* une seule colonne */
    text-align: left;
}
.site-footer .gac-footer-nav__list li { margin: 0 0 .45em; }
.site-footer .gac-footer-nav__list a { font-size: .92rem; }

.gac-footer-bottom { border-top: 0; padding-top: 1.5em; }
.gac-footer-pay { justify-content: flex-end; }
.gac-footer-pay span { display: none; }   /* pas de mention « Nous acceptons » */
.site-footer .gac-copyright,
.site-footer .site-info { text-align: left; font-size: .85rem; }

@media (max-width: 749px) {
    .storefront-primary-navigation { padding: 1em 1.2em .8em; }
}
@media (max-width: 749px) {
    .site-title, .site-title a { font-size: 1.8rem; }
    .gac-hero { min-height: 520px; padding-bottom: 3rem; }
    .site-footer .gac-footer-nav { grid-template-columns: 1fr; }
    .gac-voir-tout { margin: -2.6em 0 1em; }
}

/* ------------------------------------------------ SECTIONS ÉDITORIALES
   Image d'un côté, texte de l'autre, centrés verticalement - jamais en texte
   seul sur toute la largeur. */
.gac-editorial--deux-colonnes {
    gap: 3.5em;
    margin: 3.5em 0;
    /* `!important` a contrecoeur : la feuille du bloc « colonnes » pose
       `.wp-block-columns { align-items: normal !important }`. Aucune
       specificite ne bat un !important, seul un autre !important le peut. */
    align-items: center !important;
}
.gac-editorial--deux-colonnes figure { margin: 0; }
.gac-editorial--deux-colonnes img {
    width: 100%;
    height: auto;
    display: block;
}
.gac-editorial--deux-colonnes .gac-section__title { margin-top: 0; }
.gac-editorial--deux-colonnes p { max-width: 46ch; }

/* ============================================================================
   CALAGE SUR LES JETONS DE THEME
   ----------------------------------------------------------------------------
   Ces valeurs sont lues dans les variables publiees par le theme et dans son
   `base.css`, pas deduites de captures. Une mesure a l'oeil sur une copie
   d'ecran se trompe sur la largeur de page, la taille et la police du texte
   courant, la proportion des visuels de carte et la taille des titres.

   Reperes :
     --narrow-page-width 90rem + --page-margin 40px   (body.page-width-narrow)
     --font-body--family Inter          --font-heading--family Libre Baskerville
     --font-size--paragraph 0.875rem    --line-height--body-loose 1.6
     --font-size--h3 2rem               --font-size--h4 1.25rem
     --font-size--h2 clamp(2.25rem, 4.8vw, 3rem)
     color-scheme-1 : fond #fff, texte rgb(0 0 0 / .81), titres noir plein,
                      bordures rgb(0 0 0 / .06)
     color-scheme-2 : fond rgb(250 248 246) — le pied de page
   ========================================================================= */

:root {
    /* 90rem de contenu + deux marges de 40px. Nous étions à 1600/24 : trop
       large de 80px et deux gouttières trop étroites. */
    --gac-largeur-page: 1520px;
    --gac-marge-page: 40px;
    /* Le texte courant n'est pas gris : c'est du noir à 81 %. */
    --gac-ink: rgb(0 0 0 / .81);
    --gac-border: rgb(0 0 0 / .06);
}

/* La marge de page tombe a 16 px sur telephone
   (`min(1440px, 100% - 32px)` sous 750 px). La declaration est ici et pas
   pres de la grille : une variable redeclaree PLUS BAS dans la feuille gagne
   sur celle d'une requete media placee plus haut, meme quand la requete est
   la seule a s'appliquer. */
@media (max-width: 749px) {
    :root { --gac-marge-page: 16px; }
}

body:not(.dgc-checkout).dgc-no-sidebar .site-content > .col-full,
body:not(.dgc-checkout) .site-footer > .col-full {
    padding-left: var(--gac-marge-page);
    padding-right: var(--gac-marge-page);
}
.site-header .storefront-primary-navigation {
    padding-left: var(--gac-marge-page);
    padding-right: var(--gac-marge-page);
}

/* --------------------------------------------------------------- LE TEXTE
   Le point le plus lourd de conséquences, et le plus discret : le texte
   courant était resté en Source Sans Pro, la pile de Storefront. Aucune règle
   n'avait jamais posé Inter sur le corps du document — les @font-face étaient
   bien là, et `check-rendu.py` vérifiait justement leur présence, pas leur
   emploi. Toutes les phrases du site étaient dans la mauvaise fonte.
   Taille : 0.875rem (14px) et non les 16px par défaut du navigateur. */
body,
button,
input,
select,
textarea,
.woocommerce,
.site-content {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body {
    font-size: .875rem;
    line-height: 1.6;
    color: var(--gac-ink);
}
/* Les champs ne descendent pas sous 1rem, quoi qu'il arrive : en dessous de
   16px, Safari sur iPhone zoome la page à la prise de focus et ne revient pas.
   D'où `font-size: max(1rem, var(--font-paragraph--size))`. */
input,
select,
textarea {
    font-size: max(1rem, .875rem);
}
h1, h2, h3, h4, h5, h6,
.site-title, .site-title a {
    color: var(--gac-heading);
}

/* ----------------------------------------------------------------- LE LOGO
   Une image de 213,75 px de large, pas le nom en toutes lettres. Le même
   fichier sert au pied de page. */
.site-header .storefront-primary-navigation > .col-full > .site-branding .custom-logo-link,
.site-header .site-branding .custom-logo-link { display: block; margin: 0; }
.site-header .site-branding .custom-logo,
.site-header .custom-logo-link img {
    width: 213.75px;
    max-width: 100%;
    height: auto;
    max-height: none;
}
.gac-footer-logo__image { width: 213.75px; height: auto; display: block; }
.gac-footer-logo-texte { display: inline-block; }

/* La navigation : 1rem (--menu-top-level-font-size-desktop). */
.site-header .main-navigation ul li a { font-size: 1rem; }

/* ------------------------------------------------------------------- HERO
   Hauteur : --section-height-large, qui est relative à la fenêtre et non
   fixe — 35rem, puis 70svh au-delà de 40em, 80svh au-delà de 60em.
   Rembourrage : 100px en haut, 72px en bas. Bloc de contenu centré, aligné
   en bas, avec 24px entre le titre et le bouton. */
.gac-hero {
    min-height: 35rem;
    /* Les 100 et 72 px sont ceux du gabarit, et ils passent a l'echelle
       d'espacement comme le reste des sections : 70 et 50,4 px sous 990 px
       (mesure du 28/08/2026 sur le `hero__container` de la source, bascule
       confirmee a 989/990). Nous les gardions fixes. */
    padding-top: max(20px, calc(var(--dgc-spacing-scale) * 100px));
    padding-bottom: max(20px, calc(var(--dgc-spacing-scale) * 72px));
}
@media (min-width: 40em) { .gac-hero { min-height: 70svh; } }
@media (min-width: 60em) { .gac-hero { min-height: 80svh; } }

.gac-hero .wp-block-cover__inner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
}
.wp-block-cover.gac-hero .wp-block-cover__inner-container h1.gac-hero__title {
    font-size: clamp(2.25rem, 4.8vw, 3rem);
    line-height: 1;                 /* --line-height--display-tight */
    letter-spacing: 0;
    max-width: 32.5em;              /* --max-width--body-normal */
    margin: 0;
    text-align: center;
}
.gac-hero .wp-block-buttons { margin: 0; }
.wp-block-cover.gac-hero .wp-block-button__link,
.gac-hero .gac-btn .wp-block-button__link {
    padding: 16px 24px;             /* --button-padding-block / -inline */
    font-size: .875rem;
    line-height: 1.2;
}

/* -------------------------------------------------------- TITRES DE SECTION
   Deux niveaux, pas un :
     h4 = 20px  « Nos collections », « Nos suspensions … », « Rejoignez … »
     h3 = 32px  les deux sections éditoriales et « Foire aux questions »
   Les deux en Libre Baskerville 400, noir plein. */
.gac-section__title {
    font-size: 1.25rem;
    line-height: 1.2;               /* --line-height--display-loose */
    letter-spacing: 0;
    margin: 40px 0 16px;
}
.gac-editorial--deux-colonnes .gac-section__title,
.gac-faq__title {
    font-size: 2rem;
    line-height: 1.1;               /* --line-height--display-normal */
}
.gac-faq__title { margin: 40px 0 16px; }
.gac-editorial--deux-colonnes .gac-section__title { margin: 0 0 12px; }

.gac-voir-tout {
    /* Le lien remonte sur la ligne du titre : 20px x 1.2 de hauteur de ligne
       plus les 16px de marge basse du titre. */
    margin: -40px 0 16px;
    font-size: .875rem;
}

/* ---------------------------------------------------- CARTES DE COLLECTION
   Gouttière de 8px, carte carrée, image en `cover` sur toute la carte : pas
   de fond crème ni de rembourrage, le crème vient des photos elles-mêmes.
   L'étiquette est une pastille blanche à 8px du bord bas gauche. */
.wp-block-columns.gac-cats-grid { gap: 8px; }
.gac-cats-grid .wp-block-column { flex-basis: 0; flex-grow: 1; min-width: 0; }
.gac-cats-grid img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    height: 100%;
    padding: 0;
    background: none;
    display: block;
}
.gac-cats-grid .gac-cat__label { left: 8px; bottom: 8px; }
.gac-cats-grid .gac-cat__label a {
    font-size: .875rem;
    padding: 4px 8px;
    color: var(--gac-ink);
}

/* ------------------------------------------------------------ CARTES PRODUIT
   Proportion 4/5 en `cover` (--gallery-aspect-ratio), sans fond ni marge
   intérieure. Grille de quatre colonnes, 8px entre les colonnes et 24px entre
   les rangées - et non 3,2 % et 2,4em, soit trois à quatre fois trop. 4px
   entre le visuel, le titre et le prix (--product-card-gap). */
.woocommerce ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 8px;
}
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .gac-loop-media img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    background: none;
    border-radius: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
    font-size: .875rem;
    line-height: 1.4;
    padding: 4px 0 0;
}
.woocommerce ul.products li.product .price {
    font-size: .875rem;
    margin: 4px 0 0;
}
.gac-loop-swatches { margin-top: 8px; }

/* ------------------------------------------------- SECTIONS ÉDITORIALES
   Deux colonnes égales, 32px de gouttière, image carrée, texte borné à
   --max-width--body-normal (32,5em), 12px entre le titre et le texte. */
.gac-editorial--deux-colonnes {
    gap: 32px;
    margin: 40px 0;
}
.gac-editorial--deux-colonnes .wp-block-column { flex-basis: 0; flex-grow: 1; min-width: 0; }
.gac-editorial--deux-colonnes img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.gac-editorial--deux-colonnes p {
    max-width: 32.5em;
    margin: 0 0 12px;
}

/* -------------------------------------------------- LETTRE D'INFORMATION
   16px entre les éléments, bloc centré (le seul de la page). */
.gac-newsletter p { margin: 0 auto; max-width: 32.5em; }
/* Le champ occupe la moitie de la largeur de section (--size-style-width: 50%)
   et non une largeur fixe. Son arrondi de 100px est le seul plein du site. */
.gac-newsletter form {
    width: 50%;
    max-width: none;
    margin: 16px auto 0;
}
@media (max-width: 749px) {
    .gac-newsletter form { width: 100%; }
}

/* ------------------------------------------------------------ PIED DE PAGE
   color-scheme-2 : fond rgb(250 248 246). 30px de rembourrage haut. */
.site-footer {
    background: #faf8f6 !important;
    color: var(--gac-ink) !important;
    padding: 30px 0 24px;
}

/* ----------------------------------------------------- RYTHME VERTICAL
   Section par section, `--padding-block-start/-end` et `--gap` :

     hero              100 / 72     gap 24
     collections        48 / 48     gap 12, titre + 16 dessous
     éditorial          40 / 40     gap 32 entre colonnes, 12 en colonne
     grille produit     24 / 24     gap 28
     filet               0 /  0     trait 1px sur 80 % de large
     newsletter         24 / 28     gap 16
     FAQ                30 / 36     gap 32
     pied de page       30

   Ici les blocs se suivent dans un même flux : les rembourrages de section
   deviennent des marges. Les marges verticales adjacentes fusionnent, la
   valeur retenue est donc la plus grande des deux — c'est aussi ce que
   donnerait la somme des rembourrages de deux sections voisines à un cheveu
   près. */

/* 24px au-dessus d'un titre de section, sauf « Nos collections » qui ouvre
   la page sous le hero et en demande 48. Le `:has()` évite d'ajouter une
   classe dans le contenu ; s'il n'est pas reconnu, on garde 24, qui est le
   cas le plus fréquent. */
.gac-section__title { margin: 24px 0 28px; }
.gac-section__title:has(+ .gac-cats-grid) { margin-top: 48px; }
/* Sous 990 la source met ses espacements a l'echelle 0,7 avec un plancher
   (max(24px, 0.7 * N)) : les 48 px au-dessus de « Nos collections »
   deviennent 33,6, et les 28 sous un titre de section tombent au plancher
   de 24. Releve du 29/08/2026 a 390 : cartes 24 px sous le bloc du titre. */
@media (max-width: 989px) {
    .gac-section__title { margin-bottom: 24px; }
    .gac-section__title:has(+ .gac-cats-grid) { margin-top: 33.6px; }
}
.gac-editorial--deux-colonnes .gac-section__title { margin: 0 0 12px; }

.wp-block-columns.gac-cats-grid { margin-bottom: 48px; }
.gac-editorial--deux-colonnes { margin: 40px 0; }
.entry-content > .woocommerce { display: block; margin-bottom: 24px; }

/* Le filet : 1px sur 80 % de la largeur, centré, sans marge propre — les
   sections qu'il sépare apportent la leur. */
.wp-block-separator.gac-divider {
    width: 80%;
    margin: 0 auto;
    border: 0;
    border-top: 1px solid var(--gac-border);
    opacity: 1;
    background: none;
    height: 0;
}

.gac-newsletter { padding: 24px 0 28px; }
.gac-newsletter .gac-section__title { margin: 0 0 16px; }
.gac-faq { padding: 30px 0 36px; }
.gac-faq__title { margin: 0 0 32px; }

/* ------------------------------------------------------- ACCORDÉON FAQ
   Les intitulés se composent en --font-h5 : Inter 500, 1rem, hauteur de ligne
   1.2 - et non dans la police des titres. Filets de séparation
   `1px solid rgb(0 0 0 / .06)` entre chaque ligne ET au-dessus de la première
   et sous la dernière. */
.gac-faq details > summary,
.gac-accordion--faq details > summary,
.gac-faq-item > summary {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.2;
    color: var(--gac-heading);
}
.gac-faq details,
.gac-accordion--faq details,
.gac-faq .gac-faq-item {
    border-top: 1px solid var(--gac-border);
    border-bottom: 0;
}
.gac-faq details:last-of-type,
.gac-accordion--faq details:last-of-type,
.gac-faq .gac-faq-item:last-of-type {
    border-bottom: 1px solid var(--gac-border);
}

/* ============================================================================
   CALAGE SUR MESURES
   ----------------------------------------------------------------------------
   Les valeurs qui suivent sortent du moteur de rendu - boites et styles
   calcules (`scripts/mesures.js`) - et non d'une impression a l'oeil.

   Cibles a 1440x1000 :
     en-tête        109,9 px
     aucune bande vide entre l'en-tête et le hero
     hero           690 px
     titre du hero  sur une seule ligne, non borne a 692 px de large
     bouton du hero rembourrage 16/24
     titres         noir à 81 %
     carte produit  505,3 px
   ========================================================================= */

/* Le hero suit l'en-tête sans intervalle. Storefront ouvre le contenu par un
   rembourrage vertical de 4em, invisible tant que la page commence par du
   texte, béant quand elle commence par une image pleine largeur. */
body.home .site-content > .col-full { padding-top: 0; padding-bottom: 0; }
body.home .entry-content > *:first-child { margin-top: 0; }
body.home .entry-header, body.home .woocommerce > .woocommerce-notices-wrapper:empty { display: none; }

/* L'en-tête fait 110 px : 75 pour la rangée du logo, 35 pour celle de la
   navigation. */
.site-header .storefront-primary-navigation {
    padding-top: 14px;
    padding-bottom: 13px;
}
.site-header .storefront-primary-navigation > .col-full > .main-navigation {
    margin-top: 13px;
}
/* Le logo était calé au centre de sa colonne : `.site-branding` reçoit
   `text-align: center` d'une règle de Storefront et le logo, en flex à
   `1 1 auto`, occupe toute la largeur restante. */
.site-header .storefront-primary-navigation > .col-full > .site-branding { text-align: left; }

/* Le hero occupe 80svh MOINS la hauteur de l'en-tête :
   `min-height: calc(80svh - <en-tête>)`, ce qui donne 690 px pour une fenêtre
   de 1000. 80svh tout court donnerait 110 px de trop. */
:root { --gac-hauteur-entete: 110px; }
/* Sous 750 l'en-tete tient sur UNE rangee de 60 px : avec les 110 du bureau
   le hero perdait 50 px (450 au lieu des 500 de la source a 390, dont le
   `min-height: 35rem` compte l'en-tete). Releve du 29/08/2026. */
@media (max-width: 749px) {
    :root { --gac-hauteur-entete: 60px; }
}
.gac-hero { min-height: calc(35rem - var(--gac-hauteur-entete)); }
@media (min-width: 40em) { .gac-hero { min-height: calc(70svh - var(--gac-hauteur-entete)); } }
@media (min-width: 60em) { .gac-hero { min-height: calc(80svh - var(--gac-hauteur-entete)); } }

/* Le titre du hero tient sur une seule ligne : le conteneur interne du bloc
   de couverture est borné par la largeur de contenu globale de WordPress
   (--wp--style--global--content-size), soit 692 px, alors que le titre doit
   s'étaler sur toute la largeur de page. */
.gac-hero .wp-block-cover__inner-container { max-width: none; }
.wp-block-cover.gac-hero .wp-block-cover__inner-container h1.gac-hero__title {
    max-width: none;
}

/* Le bouton du hero : le fond noir venait du BLOC parent `.gac-btn`, pas du
   lien — le lien était bien transparent par-dessus un rectangle noir. */
.gac-hero .wp-block-button.gac-btn,
.gac-hero .wp-block-button {
    background: none;
    border: 0;
    padding: 0;
}
.wp-block-cover.gac-hero .wp-block-button__link,
.wp-block-cover.gac-hero .gac-btn .wp-block-button__link {
    padding: 16px 24px;
}

/* Les titres ne sont pas au noir plein : ils se posent sur
   `--color-foreground`, noir à 81 %, et le noir plein
   (`--color-foreground-heading`) est réservé au titre du hero. */
.gac-section__title,
.gac-faq__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
    color: var(--gac-ink);
}

/* Les colonnes de collection ne remplissaient pas la rangée : Storefront pose
   une largeur en pourcentage sur `.wp-block-column`, qui l'emporte sur le
   `flex-grow` du bloc. */
.gac-cats-grid > .wp-block-column {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* La carte produit porte 52 px de marge basse héritée de Storefront
   (`margin-bottom: 3.706325903em`), qui s'ajoutent à la gouttière de la
   grille. L'écart entre le visuel, le titre, le prix et les nuanciers vaut
   4 px (--product-card-gap). */
.woocommerce ul.products li.product {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 { padding: 0; margin: 0; }
.woocommerce ul.products li.product .price { margin: 0; }
.gac-loop-swatches { margin-top: 0; }

/* -------------------------------------------------- DERNIERS ÉCARTS MESURÉS
   Repères pris dans le moteur de rendu :
     logo 232 x 52          rangée du logo 75, rangée de navigation 35
     lien de navigation     16 px / 26,74 de hauteur de ligne
     nuancier               26 x 26, gouttière 11,2
     prix de carte          14 px, hauteur de ligne 1                       */

/* La bande blanche de 59 px entre l'en-tête et le hero : Storefront pose une
   marge basse sur #masthead. Invisible sur une page qui commence par du
   texte, béante sur une image pleine largeur. */
.site-header { margin-bottom: 0; }

/* Le logo fait 232 px de large pour 52 de haut (la variable --logo-width de la
   source, 213,75, est un maximum ; le fichier se rend plus large). */
.site-header .site-branding .custom-logo,
.site-header .custom-logo-link img { width: 232px; }

/* 11,2 et non 11 : 0,7rem, et les 0,2 px manquants se retrouvent tels quels
   dans la hauteur totale de l'en-tête. */
.site-header .storefront-primary-navigation { padding-top: 11.2px; padding-bottom: 8px; }
.site-header .storefront-primary-navigation > .col-full > .main-navigation { margin-top: 12px; }
.site-header .main-navigation ul li a {
    font-size: 1rem;
    line-height: 1.671;
    padding: 0;
}

/* Le conteneur du bloc de couverture reste borné à 720 px, et aucune règle de
   feuille ne le déclare — la contrainte vient du gabarit de blocs de
   WordPress, hors de portée d'un sélecteur. D'où le !important, à contrecœur :
   sans lui le titre du hero passe sur deux lignes là où il n'en veut qu'une.
   Le rembourrage latéral de 14 px vient de Storefront et décale le
   centrage. */
.gac-hero .wp-block-cover__inner-container {
    max-width: none !important;
    padding-left: 0;
    padding-right: 0;
}

/* Les colonnes de collection laissaient 80 px à droite : Storefront pose une
   marge en pourcentage sur .wp-block-column, que le `flex-grow` ne compense
   pas — la place perdue est prise avant le partage. */
.gac-cats-grid > .wp-block-column,
.entry-content .gac-cats-grid > .wp-block-column {
    margin-right: 0;
    margin-bottom: 0;
}
.gac-cats-grid figure.wp-block-image { margin-bottom: 0; }

/* Le prix : 14 px, hauteur de ligne 1. */
.woocommerce ul.products li.product .price {
    font-size: .875rem;
    line-height: 1;
}

/* Trois règles que la spécificité de Storefront gagnait encore.
   - #masthead : la marge basse de 59,3 px (4,2358em) résiste à `.site-header`.
   - la marge de colonne : `.wp-block-columns .wp-block-column:not(:last-child)`
     réserve 5,88 % avant le partage en flex, d'où 80 px perdus à droite.
   - le bouton de menu mobile reste dans le flux de la barre de navigation et
     l'épaissit de quatorze pixels sur grand écran. */
#masthead.site-header { margin-bottom: 0; }

.wp-block-columns.gac-cats-grid > .wp-block-column:not(:last-child),
.wp-block-columns.gac-cats-grid > .wp-block-column:last-child {
    margin-right: 0;
    margin-bottom: 0;
}

/* 750 : entre 750 et 767 le bouton MENU resterait affiché et ajouterait sa
   rangée, 122,1 px au lieu de 109,9. */
@media (min-width: 750px) {
    .site-header .main-navigation .menu-toggle { display: none; }
    /* Symétrique : Storefront masque le menu en clair sous 768 px. Sans
       cette ligne la plage 750–767 perdait sa rangée de navigation et
       l'en-tête tombait à 83,2. */
    .site-header .main-navigation .primary-navigation { display: block; }
    /* Et les entrées elles-mêmes : Storefront les met à `display: none`
       sous 768 px, si bien que la liste restait là, haute de zéro. */
    .site-header .main-navigation ul.menu > li,
    .site-header .main-navigation ul.nav-menu > li { display: block; }
    /* Et surtout : Storefront replie la liste avec
       `.handheld-navigation, .nav-menu { max-height: 0; overflow: hidden }`
       et ne la rouvre qu'à 768. La liste était bien là, ses entrées bien
       dimensionnées, et la rangée mesurait zéro. */
    .site-header .main-navigation ul.nav-menu {
        max-height: none;
        overflow: visible;
    }
    /* Le sous-menu de « Suspensions » : Storefront ne le sort du flux qu'à
       partir de 768 lui aussi, il restait donc déplié sous les entrées et
       ajoutait 53,5 px à la rangée. On reprend sa technique — hors écran
       plutôt que `display: none`, pour que le lecteur d'écran le trouve. */
    .site-header .main-navigation ul.nav-menu ul.sub-menu {
        position: absolute;
        left: -9999px;
        z-index: 99999;
    }
    .site-header .main-navigation ul.nav-menu li:hover > ul.sub-menu,
    .site-header .main-navigation ul.nav-menu li.focus > ul.sub-menu {
        left: auto;
    }
}
.site-header .main-navigation ul.menu,
.site-header .main-navigation ul.nav-menu { margin: 0; padding: 0; }

/* Storefront habille les blocs Gutenberg sous `.hentry .entry-content …`,
   soit quatre classes. Toutes nos règles à deux ou trois classes perdaient
   contre lui, en silence. On reprend sa profondeur.
     - le conteneur du bloc de couverture : `width: 50vw` au-delà d'un certain
       écran, d'où les 720 px et le titre du hero sur deux lignes ;
     - la colonne : un rembourrage et une marge en pourcentage qui mangeaient
       80 px à droite de la rangée de collections. */
.hentry .entry-content .wp-block-cover.gac-hero .wp-block-cover__inner-container {
    width: 100%;
    max-width: none;
    padding: 0;
}
.gac-hero {
    /* La marge de page, pas 40 px en dur : la source passe a 16 px sous
       750 px comme le reste de ses sections (mesure du 28/08/2026, son
       `hero__content-wrapper` est a x=16 a 390 et 749, a x=40 a 750). A 40
       partout, le titre perdait 48 px de large sur telephone et se coupait
       en QUATRE lignes la ou la source en fait trois. */
    padding-left: var(--gac-marge-page);
    padding-right: var(--gac-marge-page);
}

.hentry .entry-content .wp-block-columns.gac-cats-grid > .wp-block-column,
.hentry .entry-content .wp-block-columns.gac-cats-grid > .wp-block-column:not(:last-child) {
    padding-right: 0;
    padding-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

/* La rangée de navigation fait 35 px, pour un lien de 16 px et 26,74 de
   hauteur de ligne - pas 40. */
.site-header .main-navigation ul.menu > li,
.site-header .main-navigation ul.nav-menu > li { line-height: 26.74px; }
.site-header .main-navigation ul.menu > li > a,
.site-header .main-navigation ul.nav-menu > li > a {
    display: block;
    padding: 0;
    line-height: 26.74px;
}

/* La marge de 5,88 % sur la première colonne résiste à six classes de
   spécificité et la règle qui la pose reste introuvable — ni dans Storefront,
   ni dans WooCommerce, ni dans les blocs. D'où le !important, assumé : elle
   mange 80 px sur la rangée de collections, la seule de la page à deux
   colonnes, qui n'a que ses 8 px de gouttière. */
.gac-cats-grid > .wp-block-column { margin-right: 0 !important; }
.hentry .entry-content .gac-cats-grid figure.wp-block-image { margin-bottom: 0; }

/* ------------------------------------------------------------ LA FAQ
   L'accordéon occupe toute la largeur de page (1360 px) et chaque ligne fait
   45 px - 1 de filet, 19,2 de texte et 11,2 de rembourrage haut et bas. Ni
   groupe borné à 864 px, ni ligne de 54.
   La hauteur de ligne reste à 1,2 : les questions se composent en 16/19,2, et
   1,4 rendrait 46 px au lieu de 45. Une hauteur de 22,4 est celle du CORPS, pas
   celle de la question. */
.hentry .entry-content .wp-block-group.gac-faq,
.gac-faq {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
.gac-faq details > summary,
.gac-accordion--faq details > summary,
.gac-faq-item > summary {
    padding: 11.2px 0;
    line-height: 1.2;
    /* 44 px de ligne, filet non compris, alors que la ligne de texte n'en fait
       que 19,2 : c'est la boîte de l'icône (21,6) qui ouvre le reste. Sans
       cette mesure la ligne tombe à 41,6. */
    min-height: 44px;
    box-sizing: border-box;
}

/* Le pied de page est une grille de QUATRE colonnes égales de 325 px avec
   20 px de gouttière (4 x 325 + 3 x 20 = 1360) : le logo, les deux listes de
   liens, et une quatrième colonne laissée libre où viennent se ranger les
   moyens de paiement. Trois colonnes inégales décalent les intitulés de plus
   de cent pixels. */
.site-footer .gac-footer-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
/* Le pied a DEUX bascules, et aucune n'est le 767 des habitudes WordPress :
   quatre colonnes au-dessus de 990, DEUX de 750 a 989, une seule en dessous.
   Mesure du 28/08/2026 sur la source, palier par palier : 212 px de colonne a
   990, 445 a 989, 326 a 751, 325 a 750, 717 a 749. Nous restions a quatre
   colonnes jusqu'a 767, d'ou des colonnes de 190 px a 900 ou « Conditions
   generales de vente » passait sur deux lignes. */
@media (max-width: 989px) {
    .site-footer .gac-footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 749px) {
    .site-footer .gac-footer-nav { grid-template-columns: 1fr; }
}

/* Storefront pose 1,618em de marge basse sur chaque bloc `details` : six
   lignes de FAQ, 136 px de trop. Les lignes s'enchaînent sans marge, séparées
   par le seul filet. */
.hentry .entry-content .gac-faq .wp-block-details,
.hentry .entry-content .gac-accordion--faq .wp-block-details,
.gac-faq details,
.gac-accordion--faq details { margin: 0; }
/* Le rembourrage sous la réponse est posé plus bas, avec le reste du rythme
   des paragraphes (« LA RÉPONSE, DÉPLIÉE »). */

/* Le logo commençait 67 px trop à droite : `.col-full` porte le clearfix de
   Storefront, et avec `display: contents` ses pseudo-éléments deviennent des
   cases de flex à part entière, placées avant tout le monde. */
.site-header .storefront-primary-navigation > .col-full::before,
.site-header .storefront-primary-navigation > .col-full::after {
    content: none;
    display: none;
}
.site-header .storefront-primary-navigation { justify-content: flex-start; }

/* Le bouton du hero : pas de bordure mais une ombre interne d'un pixel, et
   une graisse normale. Storefront met du 600. */
.wp-block-cover.gac-hero .wp-block-button__link,
.wp-block-cover.gac-hero .gac-btn .wp-block-button__link {
    font-weight: 400;
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9);
}
/* Même chose sur le conteneur lui-même : il porte aussi un clearfix. */
.site-header .storefront-primary-navigation::before,
.site-header .storefront-primary-navigation::after {
    content: none;
    display: none;
}

/* La pastille du panier doit disparaitre à zéro article. Ne pas viser
   `.cart-contents .gac-cart-count--vide` : la classe est posée sur le <span>
   lui-même, qui est bien DANS le lien mais qu'un sélecteur descendant ne
   suffit pas à couvrir face aux styles de Storefront. */
.site-header .site-header-cart .count.gac-cart-count--vide { display: none; }
/* La pastille construite en JavaScript porte `.gac-cart-count` et non
   `.count` : c'est elle qu'il faut masquer quand le panier est vide. */
.site-header .site-header-cart .gac-cart-count--vide { display: none; }

/* ------------------------------------------------------- PIED DE PAGE, SUITE
   30 px de rembourrage haut, 258 px de colonnes, les moyens de paiement sur
   24 px à 10 px dessous, puis une seconde bande de 39 px pour le copyright —
   381 px en tout. À 522, ces 141 px représentent à eux seuls tout l'écart de
   hauteur de la page. */
/* Le pied de page vise 381 px, en deux bandes (342 + 39) ; celui-ci les
   réunit en un seul bloc de 363. Ne pas rattraper les 18 px par un rembourrage
   bas : trois pages sur quatre s'en trouvent plus mal, de +21 à +28 px. Ces
   18 px compensent, dans le reste de la page, autant de petits excédents. Les
   ajouter ferait joli sur un bloc et faux sur la page. */
.site-footer { padding: 30px 0 0; }
.site-footer .gac-footer-nav { padding-bottom: 0; }
.gac-footer-bottom { margin-top: 10px; padding-top: 0; border-top: 0; }
.gac-footer-pay img,
.gac-footer-pay svg { height: 24px; width: auto; }
.site-footer .gac-copyright,
.site-footer .site-info {
    margin: 0;
    padding: 8px 0 12px;
    font-size: .875rem;
    line-height: 1.4;
}

/* La carte de collection dépassait de 6 px : le lien qui enveloppe l'image
   est en ligne, et la boîte de ligne ajoute la place du jambage sous une
   image pourtant en display:block. */
.gac-cats-grid figure.wp-block-image { line-height: 0; }
.gac-cats-grid figure a { display: block; }

/* ====================================================== PAGE DE COLLECTION
   CINQ colonnes de 259 px avec 16 px de gouttière — et non les quatre colonnes
   de 334 px de l'accueil — et un titre de page de 32 px, posé 24 px sous
   l'en-tête. Ni quatre colonnes, ni titre de 36,7 px, ni 111 px de blanc
   au-dessus. */
/* `body.archive .woocommerce ul.products` ne matche pas : sur une archive
   WooCommerce n'enveloppe pas la grille dans un <div class="woocommerce">,
   c'est le <body> qui porte la classe. Le sélecteur descendant cherchait donc
   un second conteneur qui n'existe pas. */
/* `body.dgc-grille-produits` a remplacé `body.archive, body.post-type-archive-
   product` le 31/08/2026 : ces deux classes-là sont celles de la boutique et
   d'une catégorie, et la page de RECHERCHE, qui sert la même grille, porte
   `body.search`. Elle n'avait donc ni ces colonnes, ni cette gouttière, ni la
   vue resserrée. La classe est posée par `dgc_grille_body_class()`, sur
   exactement les pages qui portent la barre de densité. */
body.dgc-grille-produits ul.products {
    /* Le nombre de colonnes n'est PAS fixe : la grille se remplit avec une
       largeur minimale de colonne - 3 colonnes à 1 100 px de fenêtre, 4 à
       1 280, 5 à 1 440 et au-delà. Un `repeat(5, …)` en dur donne 5 colonnes
       partout, invisible tant qu'on ne mesure qu'à une seule largeur. */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 24px 16px;
}
body.woocommerce-page .site-content > .col-full { padding-top: 0; }
/* LE RYTHME DU HAUT DE COLLECTION, TERME PAR TERME.
   Le commentaire precedent cherchait « la meilleure moyenne » sur un total de
   80 px : un bon total avec la mauvaise decomposition. Releve le 29/08/2026
   sur la source, a 390, 749, 990 et 1440, et identique aux quatre largeurs a
   un dixieme pres :

     titre -> barre    12 px  (le bloc de titre ferme sur 12 de rembourrage)
     barre -> grille    8 px  (la marge basse de la barre)

   Nous avions 0 et 23 : la grille tombait 3 px trop bas au bureau et 7 sur
   telephone, et l'air se voyait entre la barre et la premiere photo. Le
   rembourrage HAUT, lui, passe de 24 a 20 sous 750 px - la source y pose son
   titre a 80 quand nous l'avions a 84. */
.woocommerce-products-header {
    margin: 0;
    padding: 24px 0 12px;
}
@media (max-width: 749px) {
    .woocommerce-products-header { padding-top: 20px; }
}
.woocommerce-products-header__title,
.woocommerce-page h1.page-title {
    font-size: 2rem;
    line-height: 1.1;
    margin: 0;
}
/* Sous 600 px, deux colonnes quoi qu'il arrive : `auto-fill` n'en donnerait
   qu'une, et le téléphone en garde deux. */
@media (max-width: 749px) {
    body.dgc-grille-produits ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   Telephone : la grille de collection sort des marges.

   Sous 750 px la marge de page passe de 40 a 16 px
   (`min(1440px, 100% - 32px)`, voir la variable plus haut) ET la grille sort
   de cette marge : sur un ecran de 390, deux cartes de 189 px collees aux
   bords, 12 px entre elles et entre les rangees, et le texte de la carte
   rentre de 8 px. La photo, elle, va d'un bord a l'autre.

   Garder 40 px de marge a toutes les largeurs donnerait des cartes de
   147 px, 22 % plus etroites, photo comprise. Aucune mesure de hauteur ne
   peut le voir, et c'est le gabarit ou passe l'essentiel du trafic.

   Le selecteur reprend `body.dgc-grille-produits` : la regle de grille juste
   au-dessus le porte, et une declaration de specificite plus faible ne
   changerait rien - ni sur la gouttiere, ni sur les colonnes.

   La bascule est a 750 pile, comme celle de l'en-tete.
   ============================================================ */
@media (max-width: 749px) {
    body.dgc-grille-produits ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-left: calc(-1 * var(--gac-marge-page));
        margin-right: calc(-1 * var(--gac-marge-page));
    }
    body.dgc-grille-produits ul.products li.product .woocommerce-loop-product__title,
    body.dgc-grille-produits ul.products li.product .price {
        padding-left: 8px;
        padding-right: 8px;
    }
    /* Le nuancier porte deja son rembourrage interieur (5,05 px a gauche,
       4,3 a droite) : les 8 px de la carte s'y ajoutent et la premiere
       pastille tombe a 13 px du bord. */
    body.dgc-grille-produits ul.products li.product .gac-loop-swatches {
        padding-left: calc(8px + 5.05px);
        padding-right: calc(8px + 4.3px);
    }
}
/* ------------------------------------------------------ VUE RESSERRÉE
   Ce que le second bouton de densité change, à 1440 :

                        vue par défaut        vue resserrée
     colonnes           5 de 259,2            11 de 109,1
     gouttière          24 x 16               24 x 16 (inchangée)
     photo              260 x 325             110 x 137,5
     titre              caché                 13 px / 16,9, à 8 px sous la photo
     prix               14 px, poids 500      caché

   La règle est `--product-grid-columns-desktop: repeat(auto-fill,
   minmax(6.25rem, 1fr))`, soit 100 px de colonne minimale : à 1 360 px de
   contenu et 16 de gouttière, cela fait bien onze colonnes. Il ne reste de la
   carte que la galerie et un titre réduit.

   Ici la carte est le balisage de Storefront : le titre et le prix sont dans
   le <a>, le nuancier est son frère. Il n'y a donc rien à masquer en bloc, on
   nomme les trois. */
body.dgc-grille-produits ul.products[data-dgc-vue="zoom-out"] {
    grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
}
ul.products[data-dgc-vue="zoom-out"] li.product .price,
ul.products[data-dgc-vue="zoom-out"] li.product .gac-loop-swatches {
    display: none;
}
/* La gouttiere de la carte passe de 4 a 8 px en vue resserree et le titre
   ne porte pas de marge. Les deux s'ajouteraient : 4 de gouttiere plus 8 de
   marge, soit 12 px sous la photo au lieu de 8. */
.woocommerce ul.products[data-dgc-vue="zoom-out"] li.product > a.woocommerce-LoopProduct-link { row-gap: 8px; }
ul.products[data-dgc-vue="zoom-out"] li.product h2.woocommerce-loop-product__title {
    margin: 0;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 400;
    /* Le titre est coupe a TROIS lignes en vue resserree, avec des points de
       suspension (`-webkit-line-clamp: 3`). Sans cela un titre long pousse sa
       rangee et la grille se decale. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Le bouton « un article par ligne » du téléphone :
   `[product-grid-view='mobile-single'] { grid-template-columns: 1fr }` sous
   749 px. Après la règle des 600 px ci-dessus, sinon celle-ci la reprendrait
   à deux colonnes. */
@media (max-width: 749px) {
    body.dgc-grille-produits ul.products[data-dgc-vue="mobile-single"] {
        grid-template-columns: 1fr;
    }
}

/* ======================================================= PAGE DE RECHERCHE
   Le gabarit `search` de la source, deux sections l'une sous l'autre :
   `search-header` (le titre et le champ) puis `search-results` (la meme
   grille qu'une collection). Releve sur la source le 31/08/2026 a 1440, 990,
   750 et 390.

                              1440            390
     rembourrage haut         40              28   (bascule a 990)
     titre                    48 / 48         36 / 36
     champ                    680 x 56,4      358 x 59,6
       ecart au titre         24              24
       ecart a la suite       12,8            12,8
       texte                  14 px           16 px  (bascule a 1200)
       rembourrage            16 / 54         16 / 44,8
     ligne « aucun resultat » 14 / 22,4, opacite 0,7
     section des resultats    40 en haut et en bas, aux quatre largeurs
     titre « Produits »       20 / 24, marge basse 26,6

   Rien de tout cela n'existait : la page n'avait aucune regle a elle. */
.dgc-search-page__header {
    padding-block: 28px 0;
}
@media (min-width: 990px) {
    .dgc-search-page__header { padding-block-start: 40px; }
}
/* `clamp(2.25rem, 4.8vw, 3rem)` est la valeur meme de `--font-size--h2` de la
   source, lue dans sa page : 36 px jusqu'a 750, puis elle grandit avec la
   fenetre jusqu'a 48 a partir de 1000. Le titre de COLLECTION, lui, est a
   32 px fixes - ce sont deux presets differents, ne pas les aligner. */
.dgc-search-page__header .dgc-search-page__title {
    font-size: clamp(2.25rem, 4.8vw, 3rem);
    line-height: 1;
    font-weight: 400;
    color: rgb(0 0 0 / .81);
    margin: 0;
}
/* Colonne alignee a gauche : c'est ce qui fait que la ligne « Aucun
   résultat » ne prend que la largeur de son texte chez la source, et non
   toute la page. */
.dgc-search-page__form {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
/* Le champ occupe la moitie de la largeur de page au bureau, toute la
   largeur sous 750 (`--size-style-width: 50%` et le `max-width: 100%` de sa
   requete media). */
.dgc-search-page__box {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 24px 0 12.8px;
    background-color: #fff;
}
@media (min-width: 750px) {
    .dgc-search-page__box { max-width: 50%; }
}
/* Storefront pose sur `input[type=search]` un fond gris, une bordure interne
   et un `box-shadow` ; le selecteur reprend la balise pour les battre sans
   `!important`. */
.dgc-search-page__box input.dgc-search-page__input {
    width: 100%;
    margin: 0;
    padding: 16px 44.8px;
    font-size: 16px;
    line-height: 1.6;
    color: #333;                            /* --color-input-text */
    background-color: rgb(255 255 255 / .78);
    border: 1px solid #dfdfdf;              /* --color-input-border */
    border-radius: 4px;                     /* --style-border-radius-inputs */
    box-shadow: none;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
}
@media (min-width: 750px) {
    .dgc-search-page__box input.dgc-search-page__input { padding-inline: 54px; }
}
/* 16 px jusqu'a 1200 - la regle que la source garde pour qu'iOS ne zoome pas
   sur un champ au focus - puis 14. */
@media (min-width: 1201px) {
    .dgc-search-page__box input.dgc-search-page__input { font-size: 14px; }
}
/* Meme piege que dans le panneau : `[placeholder]:focus::-webkit-input-
   placeholder { opacity: 0 }` de Storefront efface « Rechercher » des que le
   champ prend le focus, ce que la source ne fait pas. */
.dgc-search-page__box input.dgc-search-page__input::placeholder {
    color: rgb(51 51 51 / .7);
    opacity: 1;
}
.dgc-search-page__box input.dgc-search-page__input:focus::placeholder,
.dgc-search-page__box input.dgc-search-page__input:focus::-webkit-input-placeholder {
    opacity: 1;
    transition: none;
}
.dgc-search-page__input::-webkit-search-decoration,
.dgc-search-page__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}
.dgc-search-page__icon,
.dgc-search-page__reset {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;                            /* --icon-size-lg */
    height: 24px;
    color: #333;
}
.dgc-search-page__icon svg,
.dgc-search-page__reset svg {
    width: 20px;                            /* --icon-size-md */
    height: 20px;
}
.dgc-search-page__icon { left: 12.8px; }
.dgc-search-page__reset { right: 12.8px; }
@media (min-width: 750px) {
    .dgc-search-page__icon { left: 16px; }
    .dgc-search-page__reset { right: 16px; }
}
/* La croix n'apparait que lorsqu'on a tape : c'est le champ non vide qui
   l'appelle, pas un script. `:has()` est la mecanique meme de la source. */
.dgc-search-page__reset {
    border-radius: 100%;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}
.dgc-search-page__box:has(.dgc-search-page__input:not(:placeholder-shown)) .dgc-search-page__reset {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.dgc-search-page__reset:active .dgc-search-page__reset-icon { transform: scale(.9); }
.dgc-search-page__reset-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease;
}
.dgc-search-page__reset-text { display: none; }
.dgc-search-page__no-results { opacity: .7; }
.dgc-search-page__no-results p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}
/* La section des resultats : 40 px en haut et en bas, quelle que soit la
   largeur - ceux du haut separent le champ de la barre d'outils, ou du titre
   « Produits » quand la recherche n'a rien donne. */
body.search .gac-search-results { padding-block: 40px; }
.dgc-search-page__grid-title {
    font-size: 1.25rem;                     /* --font-size--h4 */
    line-height: 1.2;
    font-weight: 400;
    color: rgb(0 0 0 / .81);
    margin: 0 0 26.6px;
}
/* Les pages et les guides qui repondent aussi au terme (ecart assume, voir
   search.php) : une liste sobre, detachee de la grille. */
.gac-search-autres { margin-block: 0 40px; }
.gac-search-autres h2 {
    font-size: 1.25rem;
    line-height: 1.2;
    font-weight: 400;
    color: rgb(0 0 0 / .81);
    margin: 0 0 12.8px;
}
.gac-search-autres ul { margin: 0; padding: 0; list-style: none; }
.gac-search-autres li + li { margin-top: 4px; }

/* 8 px sous la barre, la marge que la source pose sur son `.facets-toggle` -
   pas 23. Le complement est au-dessus, dans le bloc de titre. */
.storefront-sorting { margin-bottom: 8px; }
.woocommerce-page .gac-toolbar { margin-bottom: 0; }

/* ========================================================== FICHE PRODUIT
   À 1440 : la galerie occupe 911 px, la colonne d'information 429, avec 20 px
   entre les deux — soit deux tiers / un tiers et non le 41 / 54 de Storefront.
   Le titre y fait 20 px (et non 36,7), le prix 16 px (et non 30,4), tous deux
   dans la colonne étroite.
     galerie  x40  911 de large
     colonne  x971 429 de large
     titre    y124 20 px Libre Baskerville
     prix     y219 16 px Inter
     panneaux y752 dans la colonne, 429 de large, 45 de haut               */
/* Les deux colonnes ne sont PAS un pourcentage. Releve le 28/08/2026 dans la
   feuille compilee de la source, deux regles et deux bascules :

     @media (min-width: 750px)   grid-template-columns: 1fr min(50vw, var(--sidebar-width))
     @media (min-width: 1200px)  grid-template-columns: 2fr 1fr

   avec `--sidebar-width: 25rem` (400 px, pose en ligne dans sa page) et un
   `--gap: 48px` reparti en rembourrage de 24 px sur chaque colonne - d'ou le
   `- 24px` ci-dessous, nos colonnes n'ayant pas ce rembourrage.

   Les 64,96 / 31,54 % avaient ete cales sur 1440, ou ils tombent juste par
   construction. Partout ailleurs ils derivent : a 1024 sa colonne d'achat
   plafonne a 400 px (376 de contenu) quand la notre suivait la proportion et
   tombait a 298, et tout le texte des panneaux coupait ailleurs.

   Mesures attendues (contenu, hors rembourrage de la source) :
     1440  galerie 883  colonne 429
     1200  galerie 723  colonne 349
     1024  galerie 520  colonne 376
      900  galerie 396  colonne 376
      750  galerie 271  colonne 351                                       */
@media (min-width: 750px) {
    .single-product div.product .gac-gallery,
    .single-product div.product .woocommerce-product-gallery {
        float: left;
        width: calc(100% - min(50vw, 25rem) - 24px);
        margin-right: 0;
    }
    .single-product div.product .summary {
        float: right;
        width: calc(min(50vw, 25rem) - 24px);
        margin-top: 0;
    }
}
@media (min-width: 1200px) {
    .single-product div.product .gac-gallery,
    .single-product div.product .woocommerce-product-gallery {
        width: calc(200% / 3 - 24px);
    }
    .single-product div.product .summary {
        width: calc(100% / 3 - 24px);
    }
}
.single-product .product_title {
    font-size: 1.25rem;
    line-height: 1.2;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-weight: 400;
    color: var(--gac-ink);
    margin: 0 0 12px;
}
/* `.single-product div.product .summary > p.price` [0,4,2], plus haut dans ce
   fichier, impose 1,9rem en Helvetica Neue. Il faut la même profondeur. */
.single-product div.product .summary > p.price,
.single-product div.product .summary > p.price .amount,
.single-product div.product .summary .price,
.single-product div.product .summary .price .amount {
    font-size: 1rem;
    line-height: 1.4;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 400;
    color: var(--gac-ink);
}

/* ============================== GALERIE DE FICHE PRODUIT : DEUX COLONNES
   Pas une image à la fois : toutes les photos du produit sont empilées dans
   une grille de DEUX colonnes de 439,3 px, en 4/5, avec 4 px de gouttière — à
   x40, huit visuels, quatre rangées, 2 216 px de haut. La colonne d'achat, à
   droite, est collante et accompagne le défilement.

   Il n'y a donc ni chevrons ni diaporama : on voit tout d'un coup. Le survol
   d'un nuancier continue de mettre en avant la photo de la variante — la
   classe `is-active` reste posée, elle sert de simple accentuation. */
@media (min-width: 750px) {
    .single-product .gac-gallery__stage {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* 4 px de gouttiere sur la grille de la galerie. */
        gap: 4px;
        overflow: visible;
        /* PAS DE FOND CREME sur la grille. Un `background: #f7f5f4` y peindrait la
           gouttiere de la couleur meme du fond des photos : les quatre pixels
           de blanc entre chaque visuel disparaitraient, les photos se
           toucheraient, et deux rangees se liraient comme une seule image. La
           grille reste transparente et le blanc va sur la tuile
           (`.media-gallery__grid` transparent, `li` en #fff).
           Pas de `aspect-ratio: 1 / 1` non plus : sur une grille de quatre
           rangees il n'a pas de sens. */
        background: transparent;
        aspect-ratio: auto;
    }
    /* Le blanc est sur la tuile, pas sur le conteneur : la place de la photo
       reste reservee pendant le chargement, sans peindre la gouttiere. */
    .single-product .gac-gallery__slide,
    .single-product .gac-gallery__slide.is-active {
        display: block;
        background: #fff;
    }
    .single-product .gac-gallery__img {
        aspect-ratio: 4 / 5;
        object-fit: cover;
        width: 100%;
        height: auto;
    }
    /* La grille montre toutes les photos d'un coup : ni chevrons ni pastilles
       a cette largeur. Des pastilles se liraient comme des photos a passer
       sous un panorama qui les montre deja toutes. */
    .single-product .gac-gallery__nav,
    .single-product .gac-gallery__dots { display: none; }
    /* PAS DE LISERÉ sur la photo active.
       `is-active` est posé au chargement, pas seulement au survol d'un
       nuancier : un `outline` ici mettrait en permanence un filet gris d'un
       pixel sur le premier visuel. Il se voit à l'œil et aucune mesure de
       hauteur ne peut le montrer - un `outline` ne prend pas de place.
       La classe reste posée : le script s'en sert, elle ne dessine rien. */
    /* LES DEUX COLONNES NE DÉFILENT PAS ENSEMBLE.
       Relevé sur la source le 26/08/2026 : `.product-details` y porte
       `sticky-content--desktop` (réglage `sticky_details_desktop: true` de
       `templates/product.json`) et `media-gallery` porte `sticky-content`,
       tous deux `position: sticky; top: var(--sticky-header-offset, 0)`.
       L'en-tête de Dog Cherie n'est pas collant : l'offset vaut 0, et la
       colonne d'achat de la source se cale bien à 0, pas à 20.
       La plus haute des deux colonnes ne bouge pas (son bloc contenant fait
       sa propre hauteur), la plus courte s'épingle : c'est ce décalage entre
       les photos qui défilent et le bloc d'achat qui reste que la source
       donne à voir, et que nous n'avions pas. */
    .single-product div.product .summary,
    .single-product div.product .gac-gallery {
        position: sticky;
        top: 0;
    }
}

/* Les titres de section de la fiche produit valent 20 px, comme sur
   l'accueil - pas 19, 22 ou 23 selon la section. */
.single-product .gac-highlight h2,
.single-product .gac-highlight__text > h2:first-child,
.single-product .related > h2,
.single-product .related h2:first-child,
.single-product .gac-newsletter--produit .gac-section__title,
.single-product .up-sells > h2 {
    font-size: 1.25rem;
    line-height: 1.2;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-weight: 400;
    color: var(--gac-ink);
}
.single-product .gac-newsletter--produit { padding: 8px 0 36px; }
.single-product .gac-newsletter--produit p { margin: 0 auto; max-width: 32.5em; }

/* Rembourrages des sections de la fiche produit :
     1re section éditoriale   30 / 0   gouttière 32
     « Vous aimerez aussi »   24 / 12  gouttière 28
     2e section éditoriale    0  / 30  gouttière 32
   Storefront en pose de 130 à 250 de plus. */
.single-product .gac-highlights { margin: 0; }
.single-product .gac-highlight {
    margin: 0;
    padding: 30px 0 0;
    gap: 32px;
}
.single-product .gac-highlight + .gac-highlight { padding: 0 0 30px; }
.single-product .gac-highlight__media img { aspect-ratio: 1 / 1; object-fit: cover; }
.single-product .related,
.single-product .up-sells {
    margin: 0;
    padding: 24px 0 12px;
}
.single-product .related > h2,
.single-product .up-sells > h2 { margin: 0 0 28px; }
.single-product .related ul.products,
.single-product .up-sells ul.products { margin: 0; }

/* Le bloc de recommandations garde QUATRE colonnes de 331 px avec 24/12 de
   gouttière, même quand la fiche n'a que trois produits associés : la
   quatrième case reste vide plutôt que d'élargir les cartes. Trois colonnes
   porteraient les cartes à 448 px et le bloc à 637 au lieu de 479. */
.single-product .related ul.products,
.single-product .up-sells ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 12px;
}

/* Sous 750 la source empile ses rangees de produits sur DEUX colonnes,
   « Vous aimerez aussi » compris - nous gardions quatre cartes de 89 px a
   390. Meme bascule que les rangees de l'accueil (releve du 29/08/2026). */
@media (max-width: 749px) {
    .single-product .related ul.products,
    .single-product .up-sells ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* La gouttiere de RANGEE tombe a 12 sous la bascule chez la source
           (12/12 mesures a 390, 24/12 a 1440) - nous gardions 24. */
        gap: 12px;
    }
}

/* L'interieur des cartes de recommandation, releve sur la source le
   29/08/2026 (fiche salon-design, 390 ET 1440) : 12 px sous le visuel, titre
   Inter 14/22,4 en 400, puis 7 px et le prix en 12/14,4 graisse 500, 8,4 px
   sous le prix. La typographie des COLLECTIONS (titre 500, prix 14) vient
   d'un autre releve et reste : un releve vaut pour le gabarit ou il a ete
   fait - meme partage que la section du panier (.dgc-reco). */
.single-product .related ul.products li.product a.woocommerce-LoopProduct-link,
.single-product .up-sells ul.products li.product a.woocommerce-LoopProduct-link {
    /* Le lien est un flex colonne avec 4 px de gap ailleurs : ici les ecarts
       sont portes par les marges seules (12 sous le visuel, 7 avant le prix),
       sinon le gap s'ajoute et donne 16 et 11. */
    gap: 0;
}
.single-product .related ul.products li.product a img,
.single-product .up-sells ul.products li.product a img {
    display: block;
    margin: 0 0 12px;
}
.single-product .related ul.products li.product .woocommerce-loop-product__title,
.single-product .up-sells ul.products li.product .woocommerce-loop-product__title {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 22.4px;
}
.single-product .related ul.products li.product .price,
.single-product .up-sells ul.products li.product .price {
    margin: 7px 0 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 14.4px;
}
.single-product .related ul.products li.product,
.single-product .up-sells ul.products li.product {
    padding-bottom: 8.4px;
}

/* Pas de nuanciers sur les cartes de « Vous aimerez aussi » : le visuel, le
   titre et le prix, rien d'autre — quatre cartes de 479 px. Avec nuanciers
   elles font 510. Les grilles d'accueil et de collection les gardent. */
.single-product .related .gac-loop-swatches,
.single-product .up-sells .gac-loop-swatches { display: none; }

/* Les deux colonnes d'une section éditoriale de fiche produit ne sont pas
   égales : 547 px pour l'image (carrée) et 781 pour le texte, 32 de gouttière
   — soit 1 360 en tout. En 50/50 l'image monte à 664 de côté et la section à
   694 px au lieu de 577, deux fois sur la page.
   Les unités `fr` répartissent l'espace APRÈS la gouttière : 547fr / 781fr
   donne exactement 547 et 781. */
.single-product .gac-highlight {
    display: grid;
    grid-template-columns: 547fr 781fr;
    align-items: center;
}
.single-product .gac-highlight--reverse { grid-template-columns: 781fr 547fr; }
/* La seconde section porte son rembourrage en bas, pas en haut. Elle vit dans
   son propre conteneur `.gac-highlights`, posé après les recommandations :
   `:nth-of-type(2)` ne la désignait pas, chacune étant la première du sien. */
.single-product .related ~ .gac-highlights .gac-highlight { padding: 0 0 30px; }

/* Sous 750 px la source empile : son conteneur de section porte la classe
   `mobile-column`, sa rangee passe en colonne, l'image prend toute la largeur
   et le texte passe DESSOUS - dans les deux sections, sans alternance. Mesure
   du 26/08/2026 sur suspension-luminaire-chambre-cocooning :

              largeur   direction     image                texte
     source    749      column        x16 y1622 l717 h717  x16 y2363 l717
     source    750      row-reverse   x444 y856 l266       x40 y848 l380
     source    390      column        x16 y1288 l358 h358  x16 y1670 l358

   La bascule est a 750 px pile, celle du theme de la source, pas le 767 des
   habitudes WordPress. Ses espacements, eux, changent a 990 px, une bascule
   distincte : voir le bloc juste en dessous.

   Ces declarations doivent etre ICI, apres la grille de bureau : elle
   pese [0,2,0] et la regle mobile generique `.gac-highlight` posee 6 600
   lignes plus haut, a [0,1,0], perdait en silence - les deux colonnes
   restaient cote a cote a 390 px. */
@media (max-width: 989px) {
    /* Les espacements de la source retrecissent sous 990 px : `base.css` y
       fait passer `--gap-scale` de `--spacing-scale-default` (1.0) a
       `--spacing-scale-md` (0.7). La gouttiere `max(24px, scale * 32px)`
       tombe donc a 24, et le rembourrage `max(20px, scale * 30px)` a 21.
       Mesure du 26/08/2026 : gouttiere 24 a 750, 767 et 900, 32 a 1024. */
    .single-product .gac-highlight,
    .single-product .gac-highlight--reverse {
        gap: 24px;
        padding-top: 21px;
    }
    .single-product .gac-highlight + .gac-highlight,
    .single-product .related ~ .gac-highlights .gac-highlight {
        padding-top: 0;
        padding-bottom: 21px;
    }
}

@media (max-width: 749px) {
    .single-product .gac-highlight,
    .single-product .gac-highlight--reverse {
        grid-template-columns: 1fr;
    }
    /* L'image passe en tete des deux cotes : la source n'alterne plus une fois
       empilee. */
    .single-product .gac-highlight--reverse .gac-highlight__media { order: 0; }
}

/* Les sections éditoriales de l'accueil portent leur espace en REMBOURRAGE,
   pas en marge : une marge fusionnerait avec celle du bloc voisin et donnerait
   40 px au lieu de 88 (48 de rembourrage bas pour la section précédente, 40 de
   rembourrage haut pour celle-ci). En rembourrage, les deux s'ajoutent. */
.gac-editorial--deux-colonnes {
    margin: 0;
    padding: 40px 0;
}

/* Interlignage des colonnes du pied de page : 26,4 px d'une entrée à la
   suivante, décomposés en 1,6 de hauteur de ligne
   (`--font-paragraph--line-height`, soit 22,4 px) plus les 4 px de
   `menu_spacing` du bloc. Pas « 1,4 et 7 px de marge » : le total est le même,
   mais chaque entrée est alors 3 px trop plate. */
.site-footer .gac-footer-nav__list li,
.site-footer .gac-footer-nav__list li a {
    font-size: .875rem;
    line-height: 1.6;
}
.site-footer .gac-footer-nav__list li { margin: 0 0 4px; }

/* Storefront pose 36,65 px de marge basse sur #primary ET sur #main : 73 px
   de blanc entre la dernière section et le pied de page, qui n'en veut aucun.
   Sans cette remise à zéro, le pied démarre 65 px trop bas sur toutes les
   pages. */
.site-content #primary,
.site-content #main,
.site-content .content-area { margin-bottom: 0; }

/* Le titre d'une carte produit fait 22,4 px de haut (14 px de texte, hauteur
   de ligne 1,6), pas 19,6 : deux pixels et demi par carte, quatre rangées par
   page. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 { line-height: 1.6; }

/* 32 px entre la dernière grille et le pied de page sur les pages de
   boutique. Retirés partout, la page de collection passe en dessous. */
/* 32 px avant le pied de page sur les ARCHIVES seulement : la fiche produit
   n'en a pas, et cette règle posée large lui en ajouterait. */
body.archive .site-content > .col-full { padding-bottom: 32px; }

/* Entre le dernier panneau de la FAQ et le pied de page : 37 px. Sans cette
   remise à zéro on en a 96 - le rembourrage bas de la FAQ plus les marges que
   Storefront pose sur l'article et sur `.entry-content`. */
body.home .hentry,
body.home .entry-content,
body.home .entry-content > *:last-child { margin-bottom: 0; }
.gac-faq { padding-bottom: 37px; }

/* Intérieur d'une carte produit :
     visuel 325 · 4 · titre 44,8 · 4 · prix 19,6 · 4 · nuanciers 39 = 440,4
   Le lien qui enveloppe visuel, titre et prix doit porter la gouttière : sans
   elle, les 4 px du `li` ne séparent que le lien des nuanciers. Et le prix
   garde une hauteur de ligne de 1,4, pas de 1. Quatorze pixels par carte, sur
   chaque rangée de chaque grille. */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.woocommerce ul.products li.product .price { line-height: 1.4; }

/* Le prix d'une carte n'a pas la même hauteur de ligne partout : 14,4 px
   dans les grilles de l'accueil, 19,6 px sur la page de collection. Le
   composant est le même, le rendu dépend du contexte — on reproduit les deux
   plutôt que d'arbitrer une moyenne. */
.entry-content .woocommerce ul.products li.product .price { line-height: 1.03; }
body.dgc-grille-produits ul.products li.product .price { line-height: 1.4; }

/* Entre le filet et le titre de la FAQ : 31 px (son rembourrage haut de 30).
   Sans remise à zéro on en a 79, le bloc de groupe héritant d'une marge haute
   de Storefront par-dessus son rembourrage. */
.gac-faq, .gac-faq--home { margin-top: 0; }
.entry-content > .wp-block-separator.gac-divider + .wp-block-group { margin-top: 0; }

/* Le texte d'une section éditoriale de fiche produit occupe toute sa colonne
   de 781 px. Le borner à 32,5em (455 px) ajoute des lignes et fait remonter le
   titre dans un bloc centré verticalement : 270 px de haut au lieu de 176. */
.single-product .gac-highlight__text p,
.single-product .gac-highlight__text { max-width: none; }

/* La page panier n'a pas de titre de page : elle ouvre directement sur
   « Votre panier est vide ». Un H1 de 36,7 px et sa marge ajouteraient 64 px. */
body.woocommerce-cart .entry-header,
body.woocommerce-cart h1.entry-title,
body.woocommerce-checkout .entry-header,
body.woocommerce-checkout h1.entry-title { display: none; }

/* Panier vide : titre en 20 px, tout centré, et le bouton « Continuer les
   achats » sous une ligne de rappel de connexion. */
.gac-panier-vide__titre {
    font-size: 1.25rem;
    line-height: 1.2;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-weight: 400;
    color: var(--gac-ink);
    margin: 0 0 17.4px;
}
.gac-panier-vide__compte { margin: 0 0 14px; font-size: .875rem; }

/* Le bouton « Continuer les achats », releve sur la source le 27/08/2026 :
   un simple `<a class="button">` de 200x54, Inter 14/22,4 en 400, blanc sur
   noir, rembourrage 16/32, aucun arrondi, ni capitales ni interlettrage.

   Nous en avions DEUX empiles : l'enveloppe `.gac-btn` peignait un cadre noir
   en capitales interlettrees, et le lien a l'interieur remettait un fond gris
   #eee avec un texte #333 en graisse 600. Le bouton du bloc est habille par
   une pile de regles generiques (Storefront, WooCommerce, `wp-element-button`)
   qu'on ne maitrise pas : les proprietes qui lui donnent son dessin sont
   forcees, au repos comme au survol. */
.gac-panier-vide__cta,
.gac-panier-vide__cta.wp-block-button {
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: 0 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}
.gac-panier-vide__cta .wp-block-button__link,
.gac-panier-vide__cta .wp-block-button__link:hover,
.gac-panier-vide__cta .wp-block-button__link:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 54px;
    padding: 16px 32px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #000 !important;
    box-shadow: none !important;
    font-family: Inter, -apple-system, 'Helvetica Neue', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 22.4px !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    color: #fff !important;
    scale: none;
    translate: none;
    transform: none;
}
.gac-panier-vide__cta .wp-block-button__link:hover {
    background: var(--gac-primary-dark) !important;
}

/* Positions cibles, relevees sur la source : titre a 214 px du haut de page,
   ligne de compte a 255, bouton a 305, rangee de suggestions a 439. */
.wp-block-woocommerce-empty-cart-block { padding-top: 104px; }
.wp-block-woocommerce-empty-cart-block .gac-panier-vide__titre { margin-bottom: 17px; }
.wp-block-woocommerce-empty-cart-block .wp-block-buttons { margin: 27px 0 80px; }
.wp-block-woocommerce-empty-cart-block .gac-section__title { margin-top: 0; }

/* Grille de suggestions du panier : des cartes de 334x489 sur quatre
   colonnes. Le bloc de WooCommerce en sort quatre de 342x610, avec sa propre
   mise en forme (note, bouton) qu'on n'affiche pas.

   Gouttière de 8 px, et non 12 : c'est celle de la source (`gap: 24px 8px`),
   et c'est la seule qui donne les 334 px de carte que ce commentaire annonce
   depuis le début - 4x334 + 3x8 font exactement les 1360 de la page. À 12 la
   carte tombait à 331. Corrigé le 27/08/2026 en alignant la page panier. */
.wc-block-grid__products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.wc-block-grid__product {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}
.wc-block-grid__product-image { margin: 0; }
.wc-block-grid__product-image img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    width: 100%;
    height: auto;
    margin: 0;
}
.wc-block-grid__product-title {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: .875rem;
    line-height: 1.6;
    font-weight: 400;
    color: var(--gac-ink);
    margin: 0;
    padding: 0;
}
.wc-block-grid__product-price {
    font-size: .875rem;
    line-height: 1.4;
    color: var(--gac-ink);
    margin: 0;
}
.wc-block-grid__product-rating,
.wc-block-grid__product-add-to-cart,
.wc-block-grid__product-onsale { display: none; }

/* Pas de nuanciers sur les suggestions du panier non plus : visuel, titre et
   prix, et la carte fait 489 px. Avec la rangée de nuanciers elle monte à
   560. */
body.woocommerce-cart .gac-loop-swatches { display: none; }

/* Espacement entre paragraphes : `--font-paragraph--spacing: 0.5em`, soit
   7 px ; Storefront en met 1,618em, soit 22,6. Sur trois paragraphes de section
   éditoriale, 31 px de trop — et le bloc étant centré verticalement, son titre
   remonte d'autant. */
.single-product .gac-highlight__text p,
.gac-editorial--deux-colonnes p { margin: 0 0 .5em; }

/* La galerie porte 1,5em de marge basse héritée de la première version en
   diaporama : le bloc produit faisait 2 258 px contre 2 216. En grille de
   deux colonnes la marge n'a plus d'objet, la colonne d'achat étant à côté. */
.single-product div.product .gac-gallery { margin-bottom: 0; }
/* Le pied de page touche la derniere section, sur la page panier comme chez
   la source : sa rangee « Vous aimerez aussi » finit sur le pied, sans un
   pixel entre les deux. La marge basse de l'article (59,3 px, Storefront) et
   le rembourrage bas de `.col-full` (32) en ajoutaient 91.

   Le `padding-bottom: 32px` pose ici valait quand la page s'arretait au
   recapitulatif ; depuis qu'elle finit par une section a 48 px de rembourrage
   bas, il fait double emploi. */
body.woocommerce-cart .site-content > .col-full { padding-bottom: 0; }
body.woocommerce-cart .site-main > article.hentry { margin-bottom: 0; }

/* L'icone du panier ne grise pas quand on EST sur la page panier. Storefront
   marque l'entree de menu courante :

       .site-header ul.menu li.current-menu-item > a { color: #747474 }

   et le lien du panier vit dans `ul#site-header-cart`, donc dans un
   `ul.menu`. Sur la page panier, et la seulement, l'icone passait de
   rgb(0 0 0 / .81) a un gris clair. La source ne change rien : son icone
   reste a rgb(0 0 0 / .81) sur toutes les pages, page panier comprise. */
.site-header ul.menu li.current-menu-item > a.cart-contents,
.site-header .site-header-cart li.current-menu-item > a {
    color: var(--gac-ink);
}

/* `.col-full` est en `content-box` chez Storefront : le plafond de 1 520 px
   s'applique à la boîte de contenu et les 80 px de rembourrage s'ajoutent
   par-dessus, soit 1 520 de contenu au lieu de 1 440. Rien ne se voit tant
   qu'on mesure à 1 440 de fenêtre — la limite n'est jamais atteinte. Au-dessus,
   toute la page s'élargit : cartes de 374 px au lieu de 354, textes qui se
   replient autrement, 200 px d'écart sur l'accueil. Les marges automatiques
   recentrent la page. */
.site-content > .col-full,
.site-footer > .col-full,
.site-header > .col-full {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   L'EN-TÊTE, ÉLÉMENT PAR ÉLÉMENT  (`scripts/rendu/entete.js`)

   La hauteur totale peut tomber juste — 110,8 contre 109,9 — avec cinq
   erreurs qui se compensent dedans. C'est le piège du contrôle par le
   total : un en-tête dont le logo est 8 px trop haut, le menu 2 px trop
   petit et les icônes 10 px trop étroites mesure la bonne hauteur. Il faut
   descendre au logo, au mot et au glyphe.

   Cibles à 1 440 :
     en-tête     h 109,9, AUCUNE bordure basse
     logo        a.header-logo  y11,2 h64  p 8px 0 4px  image 232x52 à y19,2
     menu        nav.menu-list  x40 y75,2 l510 h26,7
     lien        16 px, hauteur de ligne 26,74, span à p 0 10px, AUCUN écart
                 entre les entrées ; le premier déborde de 10 px à gauche
                 pour que le MOT, lui, tombe sur la gouttière de 40
     icônes      trois boîtes de 44x44 jointives, glyphes de 22x22,
                 bord droit à 1408 — 8 px au-delà de la gouttière

   Ce qui suit est scindé en deux : ce qui vaut à toute largeur, puis la
   géométrie de bureau. La disposition téléphone a sa propre mise au point,
   plus bas.
   ============================================================ */

/* --- Vrai à toute largeur ------------------------------------------- */

/* Pas de trait gris sous l'en-tête : AUCUNE bordure (`0px none`), à aucune
   largeur. Un liseré de 1 px n'est pas un arrondi, il se voit. */
.site-header {
    border-bottom: 0;
}

/* Les icônes font 44x44, à toute largeur — sur téléphone, 44 est aussi la
   cible tactile recommandée. Le glyphe fait 22.

   Le lien du panier demande un sélecteur plus fort : `ul#site-header-cart`
   porte AUSSI la classe `menu`, si bien que la règle générique des liens de
   menu `.site-header .storefront-primary-navigation ul.menu > li > a`
   [0,3,3] l'attrape avec son `.6em 0`. Arbitré par
   `python3 scripts/cascade.py --largeur 1440`, pas à l'estime. */
.site-header .gac-search-toggle,
.site-header .gac-account {
    padding: 11px;
    box-sizing: content-box;
}
.site-header .storefront-primary-navigation ul.site-header-cart > li > a.cart-contents {
    display: block;
    padding: 11px;
    box-sizing: content-box;
}
.site-header .gac-search-toggle svg,
.site-header .site-header-cart .cart-contents svg {
    width: 22px;
    height: 22px;
}

/* Le compte fait exception. La source exclut son bouton de la règle qui pose
   22x22 (`.header-actions__action:not(.account-button) svg`) et laisse le
   glyphe à sa taille propre, 15x17. Il paraît donc un peu plus petit que la
   loupe et le sac, et c'est voulu. */
.site-header .gac-account svg {
    width: 15px;
    height: 17px;
}

/* Connecté, le glyphe cède la place à l'avatar : un disque de 28 px portant
   l'initiale du client en 14 (la moitié du disque), anneau intérieur de 1 px
   à 8 % de noir. Au survol le disque grossit de 5 % et l'anneau devient une
   ombre portée - la MÊME propriété box-shadow, pas un cumul. */
.site-header .gac-account--avatar,
.site-header .gac-account--avatar:hover,
.site-header .gac-account--avatar:focus {
    color: #fff;
}
.gac-account__initiale {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #000;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    transition: scale .1333s ease-in-out, box-shadow .1333s ease-in-out;
}
.gac-account--avatar:hover .gac-account__initiale {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    scale: 1.05;
}

/* --- Géométrie de bureau -------------------------------------------- */

/* 750 et non 768 : c'est là que la bascule tombe. */
@media (min-width: 750px) {

    /* 1. Le logo. Pas de marge sous lui : le lien du logo porte un rembourrage
       haut de 8 et bas de 4, et la rangée se referme dessus. Reprendre le même
       rembourrage sur le même élément plutôt que de compenser ailleurs — collé
       8 px trop haut, les 12 px de battement passent sous lui en marge de la
       navigation. */
    .site-header .storefront-primary-navigation > .col-full > .site-branding .custom-logo-link {
        display: block;
        padding: 8px 0 4px;
    }
    .site-header .storefront-primary-navigation > .col-full > .main-navigation {
        margin-top: 0;
    }

    /* La hauteur du logo ne doit pas dépendre de la vignette choisie. En
       `height: auto`, la boîte suit la proportion du fichier retenu par
       `srcset` : 52,1 px avec l'original (1140x256), 51,8 avec la vignette de
       300x67, dont l'arrondi de génération a une proportion très légèrement
       différente. L'en-tête bouge alors selon la densité de l'écran. La boîte
       fait 232 x 52 : on la déclare. */
    .site-header .site-branding .custom-logo,
    .site-header .custom-logo-link img {
        height: 52px;
        object-fit: contain;
    }

    /* 2. La taille des mots du menu. `font-size: 1rem` seul ne suffit pas :
       une règle plus spécifique posée plus haut (`… ul.menu > li > a`) impose
       `1em`, et `1em` hérite ici de 14 px — Storefront met la racine du thème
       à 87,5 %. Le menu entier tourne alors à 14 au lieu de 16 :
       « Suspensions » fait 82 px au lieu de 94, et les cinq entrées perdent
       26 px à elles toutes. On écrit la valeur en pixels : c'est une mesure,
       pas une proportion à faire vivre. */
    .site-header .main-navigation ul.menu > li > a,
    .site-header .main-navigation ul.nav-menu > li > a {
        font-size: 16px;
        line-height: 26.74px;
        /* Le rembourrage est DANS l'entrée, pas entre elles. */
        padding: 0 10px;
    }

    /* 3. L'espacement du menu. Des entrées jointives dont le texte respire de
       10 px de chaque côté - et non 26,6 px d'écart entre des entrées collées
       à leur texte. Ce n'est pas le même résultat : ainsi le survol couvre la
       moitié de l'écart. */
    .site-header .main-navigation ul.menu,
    .site-header .main-navigation ul.nav-menu {
        gap: 0;
        /* Sans ce décalage, le premier rembourrage de 10 px pousserait tout
           le menu à droite de la gouttière. On décale la liste entière : le
           MOT retombe sur 40, aligné avec le logo au-dessus. */
        margin-left: -10px;
    }

    /* 4. Le débord de 8 px du trio d'icônes. Deux sélecteurs échouent avant
       celui-ci, et cascade.py a nommé le gagnant : la règle de largeurs
       forcées de la rangée,
       `… > .col-full > .site-header-cart` [0,4,0], remet `margin: 0`. Il
       faut reprendre exactement sa forme et y ajouter le type — [0,4,1].

       Pourquoi une marge NÉGATIVE déplace quoi que ce soit alors que la
       loupe porte `margin-left: auto` : la marge automatique absorbe tout
       l'espace libre, donc le bord droit de la MARGE du dernier élément se
       cale sur la gouttière à 1 400 ; avec −8 px, son bord de BOÎTE tombe à
       1 408, à sa place. C'est le glyphe qui est aligné sur la page, pas la
       boîte de 44 qui l'entoure. */
    .site-header .storefront-primary-navigation {
        column-gap: 0;
    }
    .site-header .storefront-primary-navigation > .col-full > ul.site-header-cart {
        margin-right: -8px;
    }
}

/* ============================================================
   L'EN-TÊTE SUR TÉLÉPHONE  (`node scripts/rendu/entete.js / 390`)

   L'en-tête de bureau dissout `.col-full` avec `display: contents` et
   réordonne en flex. Fait à TOUTE largeur, cela désactive en silence la
   mise au point mobile écrite plus haut : ses sélecteurs à deux classes
   (`.storefront-primary-navigation > .col-full`) perdent contre les
   nouveaux à trois, et le téléphone reçoit le gabarit de bureau rétréci —
   logo à gauche, burger rejeté tout à droite, icône de compte masquée,
   40 px de gouttière sur un écran de 390.

   Cibles à 390 :
     rangée unique de 60 px, `header__columns` en grille
                 44px 44px 212px 44px 44px, rembourrage 0 2px 0 0
     burger      x0   l44      loupe      x44  l44
     logo        colonne centrale, image 143 x 32, centrée
     compte      x300 l44      panier     x344 l44   (bord droit 388)

   L'icône de compte reste affichée sur téléphone : c'est la grille qui fait
   la place, il n'y a pas à la masquer.
   ============================================================ */

@media (max-width: 749px) {

    /* La grille, à l'identique. `display: contents` sur `.col-full` fait des
       petits-enfants les cases de cette grille.

       Chaque case porte AUSSI `grid-row: 1`. Sans cela le placement
       automatique ouvre une rangée dès qu'un élément réclame une colonne
       déjà dépassée dans l'ordre du DOM — et le balisage de Storefront
       donne le logo (colonne 3) avant le burger (colonne 1). L'en-tête fait
       alors 118,8 px sur trois rangées au lieu de 60 sur une. */
    .site-header .storefront-primary-navigation {
        display: grid;
        grid-template-columns: 44px 44px 1fr 44px 44px;
        align-items: center;
        column-gap: 0;
        row-gap: 0;
        max-width: none;
        margin: 0;
        padding: 0 2px 0 0;
        min-height: 60px;
    }

    /* Chaque élément à sa colonne. Sélecteurs à quatre classes : c'est le
       niveau qu'il faut pour repasser devant la passe « largeurs forcées »
       et devant le gabarit de bureau de la sixième passe. */
    .site-header .storefront-primary-navigation > .col-full > .main-navigation {
        grid-column: 1;
        grid-row: 1;
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 0;
        flex: none;
    }
    .site-header .storefront-primary-navigation > .col-full > .gac-search-toggle {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        justify-self: center;
    }
    /* La cellule centre son contenu elle-même : `text-align: center` ne
       suffisait pas, le lien du logo est en bloc et occupait le bord gauche
       de la colonne, l'image de 143 px débordant vers la droite. */
    .site-header .storefront-primary-navigation > .col-full > .site-branding {
        grid-column: 3;
        grid-row: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        margin: 0;
        padding: 0;
        flex: none;
    }
    .site-header .storefront-primary-navigation > .col-full > .site-branding .custom-logo-link {
        display: block;
        width: 143px;
        max-width: 143px;
        padding: 0;
        /* Sans cela le lien mesure 38,4 px pour une image de 32 : les 6,4 px
           sont la ligne de base réservée à une image en ligne, et le logo se
           retrouve 3,2 px trop haut dans une rangée par ailleurs juste. */
        line-height: 0;
    }
    /* Rendue à l'en-tête : elle s'affiche aussi sur téléphone. */
    .site-header .storefront-primary-navigation > .col-full > .gac-account {
        grid-column: 4;
        grid-row: 1;
        display: flex !important;
        margin: 0;
        justify-self: center;
    }
    .site-header .storefront-primary-navigation > .col-full > .site-header-cart {
        grid-column: 5;
        grid-row: 1;
        margin: 0;
        padding: 0;
        justify-self: center;
    }

    /* Le burger occupe sa colonne, centré dedans. */
    .site-header .main-navigation .menu-toggle {
        margin: 0 auto;
    }

    /* Le logo : 143 x 32, pas 112 x 25. Pas de plafond de 104 px : la colonne
       centrale fait 212. */
    .site-header .custom-logo-link {
        display: inline-block;
        max-width: none;
        padding: 0;
    }
    .site-header .custom-logo-link img,
    .site-header .site-branding .custom-logo {
        width: 143px;
        max-width: 143px;
        height: 32px;
        object-fit: contain;
    }
}

/* ============================================================
   LES ANIMATIONS DE SURVOL

   Un simple passage au noir sans transition ne suffit pas. État par état :

     menu, au repos          rgba(0,0,0,.81)
     menu, un item survolé   TOUS les liens passent à rgba(0,0,0,.7)…
     l'item survolé          …sauf lui : #97C58F, souligné, décalé de 6 px
     déroulant               bandeau PLEINE LARGEUR sous l'en-tête, blanc,
                             déroulé par `clip-path` en .36s ease-out-cubic,
                             contenu en fondu .27s, entrées à la même
                             gouttière que la page (40 px), 16 px,
                             `padding: 4px 0`
     entrée du déroulant     rgba(0,0,0,.7) ET **graisse 500**
     bouton principal        #000 → #333 en .125s ease-in-out
     bouton, au clic         `scale: .99; translate: 0 1px`
     lien de texte           #97C58F, soulignement effacé

   Le vert est `--color-primary-hover` du schéma de couleurs 2 :
   `color: rgb(151,197,143); text-decoration: underline;
   text-underline-offset: 6px`. La graisse vient de `.wrap-text:hover
   { font-weight: 500 }` — `.wrap-text` étant le `span` qui enveloppe le
   texte de chaque entrée du déroulant.
   ============================================================ */

:root {
    /* `--color-primary-hover` du schéma 2. Ce n'est PAS une couleur de
       marque au sens large : elle ne sert qu'au survol. */
    --dgc-vert-survol: #97c58f;
    --dgc-anim: .125s;
    --dgc-anim-lent: .36s;
    --dgc-courbe: cubic-bezier(.33, 1, .68, 1);
    /* `--animation-speed-slow` : les panneaux qui se deplient (facettes, tri,
       accordeons) prennent .2s la ou un survol prend .125s. A ne pas confondre
       avec `--dgc-anim-lent`, qui vaut .36s et sert au deroulant du menu. */
    --dgc-anim-panneau: .2s;
}

/* --- 1. Le menu principal ------------------------------------------- */

.site-header .main-navigation ul.menu > li > a,
.site-header .main-navigation ul.nav-menu > li > a {
    transition: color var(--dgc-anim) ease-in-out;
    text-decoration-thickness: 1px;
    /* 2 px au repos, 6 au survol. Invisible tant qu'il n'y a pas de trait,
       mais c'est la valeur cible. */
    text-underline-offset: 2px;
}

/* Survoler UNE entrée éteint les autres. C'est ce qui donne l'impression
   d'éclairage : ce n'est pas l'item survolé qui s'allume, ce sont ses voisins
   qui reculent. `:has()` ferait l'affaire ; ici la liste elle-même suffit
   comme point d'accroche. */
.site-header .main-navigation ul.menu:hover > li > a,
.site-header .main-navigation ul.nav-menu:hover > li > a,
.site-header .main-navigation ul.menu:focus-within > li > a,
.site-header .main-navigation ul.nav-menu:focus-within > li > a {
    color: rgba(0, 0, 0, .7);
}

.site-header .main-navigation ul.menu > li > a:hover,
.site-header .main-navigation ul.nav-menu > li > a:hover,
.site-header .main-navigation ul.menu > li > a:focus-visible,
.site-header .main-navigation ul.nav-menu > li > a:focus-visible,
.site-header .main-navigation ul.menu > li:hover > a,
.site-header .main-navigation ul.nav-menu > li:hover > a {
    color: var(--dgc-vert-survol);
    text-decoration: underline;
    text-decoration-color: var(--dgc-vert-survol);
    text-underline-offset: 6px;
}

/* --- 2. Le déroulant, en bandeau pleine largeur ---------------------- */

@media (min-width: 750px) {

    /* L'ancre du panneau devient l'en-tête, pas l'entrée de menu : c'est ce
       qui permet au bandeau de faire toute la largeur de la fenêtre. */
    .site-header .storefront-primary-navigation .main-navigation ul.menu > li.menu-item-has-children,
    .site-header .storefront-primary-navigation .main-navigation ul.nav-menu > li.menu-item-has-children {
        position: static;
    }

    .site-header .storefront-primary-navigation .main-navigation ul.menu > li > ul.sub-menu,
    .site-header .storefront-primary-navigation .main-navigation ul.nav-menu > li > ul.sub-menu {
        /* Storefront le range à `left: -9999px` et le ramène à `left: auto`
           au survol : une position ne s'anime pas, d'où l'apparition sèche.
           On le laisse en place et on le dévoile par découpe. */
        left: 0;
        right: 0;
        top: calc(100% - 1px);
        width: auto;
        min-width: 0;
        max-width: none;
        margin: 0;
        /* Le bandeau fait toute la fenetre, mais son contenu se cale sur la
           gouttiere de l'en-tete, pas sur un 40 px fixe : « Chambre » doit
           s'aligner sur « Suspensions » a toutes les largeurs (a 1440 / 1680 /
           2000, la gouttiere vaut 40, 120, 280). Un rembourrage fixe ne suit
           que la premiere de ces trois valeurs, et le panneau part a gauche
           des que la fenetre depasse 1520. */
        padding: 0 max(var(--gac-marge-page),
            calc((100% - var(--gac-largeur-page)) / 2 + var(--gac-marge-page))) 28px;
        background: #fff;
        border: 0;
        box-shadow: 0 4px 20px rgba(0, 0, 0, .15);

        /* Le bandeau se déroule vers le bas. Les valeurs négatives à gauche,
           à droite et en bas élargissent la zone conservée : sans elles la
           découpe rognerait aussi l'ombre portée. */
        clip-path: inset(0 -40px 100% -40px);
        transition: clip-path var(--dgc-anim-lent) var(--dgc-courbe),
            visibility 0s linear var(--dgc-anim-lent);
        visibility: hidden;
    }

    /* `a:hover ~ ul` autant que `li:hover > ul` : le panneau s'accroche au
       LIEN. Avec une vraie souris les deux reviennent au même, mais pas pour
       un outil qui force la pseudo-classe — et une règle qui ne se laisse pas
       mesurer est une règle qu'on ne contrôlera plus.
       Combinateur `~` et non `+` : Storefront glisse un bouton `.gac-nav__more`
       entre le lien et sa liste, le frère ADJACENT n'est donc pas la bonne
       cible. */
    .site-header .storefront-primary-navigation .main-navigation ul.menu > li > a:hover ~ ul.sub-menu,
    .site-header .storefront-primary-navigation .main-navigation ul.nav-menu > li > a:hover ~ ul.sub-menu,
    .site-header .storefront-primary-navigation .main-navigation ul.menu > li > a:focus ~ ul.sub-menu,
    .site-header .storefront-primary-navigation .main-navigation ul.nav-menu > li > a:focus ~ ul.sub-menu,
    .site-header .storefront-primary-navigation .main-navigation ul.menu > li:hover > ul.sub-menu,
    .site-header .storefront-primary-navigation .main-navigation ul.nav-menu > li:hover > ul.sub-menu,
    .site-header .storefront-primary-navigation .main-navigation ul.menu > li:focus-within > ul.sub-menu,
    .site-header .storefront-primary-navigation .main-navigation ul.nav-menu > li:focus-within > ul.sub-menu {
        left: 0;
        clip-path: inset(0 -40px -40px -40px);
        visibility: visible;
        transition: clip-path var(--dgc-anim-lent) var(--dgc-courbe),
            visibility 0s;
    }

    /* Le contenu arrive en fondu, un peu plus vite que le bandeau. */
    .site-header .storefront-primary-navigation .main-navigation ul.sub-menu > li {
        opacity: 0;
        transition: opacity .27s ease-in-out;
        float: none;
        width: auto;
    }
    .site-header .storefront-primary-navigation .main-navigation ul.menu > li > a:hover ~ ul.sub-menu > li,
    .site-header .storefront-primary-navigation .main-navigation ul.nav-menu > li > a:hover ~ ul.sub-menu > li,
    .site-header .storefront-primary-navigation .main-navigation ul.menu > li:hover > ul.sub-menu > li,
    .site-header .storefront-primary-navigation .main-navigation ul.nav-menu > li:hover > ul.sub-menu > li,
    .site-header .storefront-primary-navigation .main-navigation ul.menu > li:focus-within > ul.sub-menu > li,
    .site-header .storefront-primary-navigation .main-navigation ul.nav-menu > li:focus-within > ul.sub-menu > li {
        opacity: 1;
    }

    /* Les entrées : 16 px, alignées sur la gouttière de la page - et non
       12,25 px dans une boîte grise de 200 px. */
    .site-header .storefront-primary-navigation .main-navigation ul.sub-menu > li > a {
        display: block;
        /* Calé sur le texte, pas sur le bandeau : sinon la cible de survol fait
           1 360 px de large et le gras s'allume en passant n'importe où dans
           la bande. « Chambre » fait 69 px. */
        width: fit-content;
        padding: 4px 0;
        font-size: 16px;
        line-height: 25.6px;
        color: rgba(0, 0, 0, .81);
        background: none;
        border: 0;
        transition: color var(--dgc-anim) ease-in-out;
    }
    /* La mise en gras au survol vient d'une règle ajoutée à la main dans la
       section d'en-tête, pas du thème : `.wrap-text:hover { font-weight: 500 }`. */
    .site-header .storefront-primary-navigation .main-navigation ul.sub-menu > li > a:hover,
    .site-header .storefront-primary-navigation .main-navigation ul.sub-menu > li > a:focus-visible {
        color: rgba(0, 0, 0, .7);
        font-weight: 500;
        text-decoration: none;
    }
}

/* Storefront voile de gris l'entree de sous-menu qui porte le focus :
   `ul.menu ul li.focus { background-color: rgba(0,0,0,.025) }`, et son
   `navigation.js` pose cette classe `focus` au clic. D'ou un bandeau plus
   fonce en travers du panneau deroulant - sur toute sa largeur, la `li`
   faisant la largeur du panneau et non celle du mot - apres un clic sur une
   entree du menu. Le meme voile est prevu au survol, sur le lien. Seules la
   graisse et la couleur de l'entree changent : aucun fond, ni au survol, ni
   au clic. */
.site-header .main-navigation ul.sub-menu li.focus,
.site-header .main-navigation ul.sub-menu li:hover > a,
.site-header .main-navigation ul.sub-menu a:hover,
.site-header .main-navigation ul.sub-menu a:focus {
    background-color: transparent;
}

/* --- 3. L'en-tête ne porte pas d'ombre au repos ---------------------- */

/* Aucune ombre sous l'en-tête : elle n'apparaît qu'avec le déroulant, et
   c'est le bandeau qui la porte (`--shadow-popover`). Pas de voile permanent
   de 4 px. */
.site-header {
    box-shadow: none;
}

/* --- 4. Les boutons -------------------------------------------------- */

/* `color, box-shadow, background-color` en .125s ease-in-out — pas .2s — et
   PAS de `transform` au survol. Le mouvement est réservé au clic. */
.button,
button,
input[type="submit"],
.gac-btn,
.gac-btn .wp-block-button__link,
.gac-cart-checkout,
.gac-sticky__button,
.single-product form.cart .single_add_to_cart_button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.dgc-search__view-all,
.gac-filters__submit {
    transition: color var(--dgc-anim) ease-in-out,
        box-shadow var(--dgc-anim) ease-in-out,
        background-color var(--dgc-anim) ease-in-out,
        border-color var(--dgc-anim) ease-in-out,
        scale var(--dgc-anim) var(--dgc-courbe),
        translate var(--dgc-anim) var(--dgc-courbe);
}

/* Le bouton s'enfonce au clic : `.add-to-cart-button:active { scale: .99;
   translate: 0 1px }`. C'est un demi-pixel de mouvement, et c'est ce qui
   fait qu'un bouton répond au doigt plutôt que de changer de couleur. */
.button:active,
.gac-btn .wp-block-button__link:active,
.gac-sticky__button:active,
.single-product form.cart .single_add_to_cart_button:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active {
    scale: .99;
    translate: 0 1px;
}

/* PAS d'enfoncement sur « Terminer ma commande », ni dans le volet ni sur la
   page panier. Le relevé qui a donné `scale: .99; translate: 0 1px` a été fait
   sur le bouton d'AJOUT AU PANIER de la source, et la liste de sélecteurs a
   ete etendue au bouton de commande sans le remesurer. Verifie le 27/08/2026,
   volet ouvert, bouton maintenu enfonce : la source rend `scale: none`,
   `translate: none`, `transform: none`, et sa seule transition declaree est
   `color, border-color` en 0s. Le seul changement au clic est le fond, qui
   passe a #333 - et c'est le survol, pas le clic.

   La regle est reposee ici, APRES celle qui l'a attrapee : une declaration
   plus haut dans la feuille ne suffirait pas a annuler la sienne. */
.gac-cart-checkout:active,
.gac-cart-checkout:focus,
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart__submit-button:active {
    scale: none;
    translate: none;
    transform: none;
}

/* Les liens de texte. Deux comportements DIFFÉRENTS, à ne pas confondre :

   - « Toutes les voir » (`.link`) ne va PAS au vert. Il n'est pas souligné au
     repos, et son seul changement au survol est le passage de rgba(0,0,0,.81)
     à du noir plein.
   - un lien DANS un paragraphe, lui, passe au vert de survol et voit son
     soulignement s'effacer :
     `p a:hover { text-decoration-color: transparent; color: var(--color-primary-hover) }`. */
.hentry .entry-content p.gac-voir-tout a,
.gac-voir-tout a {
    text-decoration: none;
    /* 14 px, pas 0,92rem (14,7) : la boîte ferait 104 px de large au lieu de
       94. */
    font-size: 14px;
    transition: color var(--dgc-anim) ease-in-out;
}
.hentry .entry-content p.gac-voir-tout a:hover,
.gac-voir-tout a:hover {
    color: #000;
    text-decoration: none;
}
/* `p:not(.gac-voir-tout)` : « Toutes les voir » EST un paragraphe, et sans
   cette exclusion la règle du vert l'attrapait — [0,5,2] contre [0,2,1], elle
   gagnait sans discussion et le lien partait au vert au lieu du noir. */
.hentry .entry-content p:not(.gac-voir-tout) a:not(.button):not(.wp-block-button__link),
.hentry .entry-content li a:not(.button):not(.wp-block-button__link) {
    color: rgb(0 0 0 / .81);
    text-decoration-line: underline;
    text-decoration-color: rgb(0 0 0 / .81);
    /* Les deux nombres du soulignement de la source ; `auto` ne les donne pas. */
    text-decoration-thickness: .075em;
    text-underline-offset: .125em;
    transition: color var(--dgc-anim) ease-in-out,
        text-decoration-color var(--dgc-anim) ease-in-out;
}
/* Le survol NE PASSE PAS AU VERT. Relevé le 27/08/2026 sur toutes les pages de
   texte de la source : le lien s'assombrit de `rgb(0 0 0 / .81)` à noir plein
   et son soulignement DISPARAÎT EN FONDU, par `text-decoration-color`, en
   .125 s. Le vert de `primary_hover` est celui du menu ; la source ne le pose
   nulle part sur un lien de texte courant.

   Par `text-decoration-color` et non `text-decoration-line` : une ligne ne
   s'anime pas, elle saute. */
.hentry .entry-content p:not(.gac-voir-tout) a:not(.button):not(.wp-block-button__link):hover,
.hentry .entry-content p:not(.gac-voir-tout) a:not(.button):not(.wp-block-button__link):focus-visible,
.hentry .entry-content li a:not(.button):not(.wp-block-button__link):hover,
.hentry .entry-content li a:not(.button):not(.wp-block-button__link):focus-visible {
    color: rgb(0 0 0);
    text-decoration-line: underline;
    text-decoration-color: transparent;
}

/* Le bouton du hero est un bouton SECONDAIRE : fond transparent, filet blanc
   d'un pixel posé en ombre intérieure, et au survol un voile blanc à 8 %.
   Nous ne changions rien du tout au survol. */
.gac-hero .wp-block-button__link:hover,
.gac-hero .gac-btn .wp-block-button__link:hover {
    background-color: rgba(255, 255, 255, .08);
    color: #fff;
}

/* La pastille du panier. La boutique la force au vert avec un compteur noir,
   en dur dans le CSS de sa section d'en-tête :
   `.cart-bubble__background { background-color: rgb(151,197,143) !important }`
   `.cart-bubble__text-count { color: rgb(0,0,0) !important }`.
   Nous l'avions à l'encre du texte, chiffre blanc. */
.site-header .site-header-cart .cart-contents .gac-cart-count,
.site-header .site-header-cart .count {
    color: #000;
}
.site-header .site-header-cart .count {
    background: var(--dgc-vert-survol);
}
/* Le fond de la pastille construite en JavaScript est sa couche du dessous
   (cart-bubble__background), celle que l'animation fait grossir sans toucher
   au chiffre. */
.site-header .site-header-cart .cart-contents .gac-cart-count::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--dgc-vert-survol);
    z-index: -1;
}

/* --- 5. La typographie des boutons ----------------------------------- */

/* Le bouton d'ajout au panier et celui du hero sont identiques :
     police 14 px, graisse 400, casse NORMALE, interlettrage normal,
     rembourrage 16 px / 24 px, et le filet posé en ombre intérieure.
   Ni 14,7 px, ni CAPITALES, ni 1,47 px d'interlettrage, ni le rembourrage
   13,97 / 17,64 que Storefront calcule en `em` : « Ajouter au panier » ne se
   lirait pas du tout pareil. */
/* Ne PAS viser `button` tout court, même avec des exceptions : cela attrape
   la barre d'outils de collection — « Afficher les filtres » et le tri sont des
   `button` sans classe de bouton — qui passent de 40 à 54,6 px de haut, soit
   29 px sur la page de collection. On ne liste QUE les boutons d'action. */
.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.single-product form.cart .single_add_to_cart_button,
.gac-cart-checkout,
.gac-sticky__button,
.gac-hero .wp-block-button__link {
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    padding: 16px 24px;
}

/* Le filet du bouton : pas de `border` mais un liseré en ombre INTÉRIEURE,
   ce qui évite que la bordure s'ajoute à la taille de la boîte. Sur le bouton
   principal il est de la couleur du fond, donc invisible ; sur le secondaire
   c'est lui qui fait tout le contour. */
.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.single-product form.cart .single_add_to_cart_button {
    border: 0;
    box-shadow: inset 0 0 0 1px currentColor;
    box-shadow: inset 0 0 0 0 transparent;
}
.gac-hero .wp-block-button__link {
    border: 0;
    box-shadow: inset 0 0 0 1px #fff;
}

/* Le survol du bouton principal : `#000` vers `#333`
   (`--color-primary-button-hover-background`). Posé ici, en fin de feuille,
   parce que trois règles antérieures se disputent la propriété — dont une avec
   `!important` qui la ramène à la couleur de repos. */
.gac-btn:hover,
.gac-btn .wp-block-button__link:hover,
.gac-cart-checkout:hover,
.gac-sticky__button:hover,
.single-product form.cart .single_add_to_cart_button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover,
/* Les trois derniers n'avaient que le voile annulé plus haut pour tout
   survol : sans eux, le panneau de filtres et la recherche resteraient
   inertes sous le curseur. */
.woocommerce #respond input#submit.alt:hover,
.gac-filters__submit:hover,
.dgc-search__view-all:hover {
    background-color: var(--gac-primary-dark);
    color: #fff;
}
/* Le bouton du hero est secondaire : il garde son voile blanc, pas le #333. */
.gac-hero .wp-block-button__link:hover,
.gac-hero .gac-btn .wp-block-button__link:hover {
    background-color: rgba(255, 255, 255, .08);
}

/* La hauteur du bouton : 52 px, soit 16 + 20 + 16. Un interlignage de 22,65
   (hérité en `em` de Storefront) donnerait 55. */
.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.single-product form.cart .single_add_to_cart_button,
.gac-cart-checkout {
    line-height: 20px;
}
/* Le bouton du hero, lui, est à 22,4 (1,6 x 14), pas à 20 : 54,4 px de haut
   contre 52 pour le bouton d'achat, qui est en grille avec une hauteur
   imposée. Deux boutons, deux interlignages. */
.gac-hero .wp-block-button__link {
    line-height: 22.4px;
}


/* ============================================================
   FICHE PRODUIT — LA COLONNE D'ACHAT
   Pièce par pièce (`scripts/rendu/fiche.js`). Toutes les valeurs
   de ce bloc sont des mesures, aucune n'est estimée.

   Ce que la hauteur totale cache : le bloc galerie+achat peut
   mesurer 2 230 px contre 2 216 — 0,6 %, vert depuis six passes —
   en logeant un sélecteur de variantes entièrement différent, une
   note d'avis absente, un sélecteur de quantité absent, un encart
   téléphone absent, un second prix en trop et une ligne de stock
   en trop. Les erreurs se compensent, exactement comme celles de
   l'en-tête.
   ============================================================ */

/* --- La barre d'avis, entre le titre et le prix ------------- */
.dgc-rbar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    /* Douze pixels sous le titre : ils viennent de la marge basse du `h1`.
       En ajouter ici les DOUBLERAIT — une marge d'élément en ligne ne
       fusionne pas avec celle de son voisin de bloc. */
    margin: 0 0 14.2px;
}
.dgc-rbar__etoiles {
    display: flex;
    gap: 2px;
}
.dgc-rbar__etoile {
    font-size: 16px;
    line-height: 1;
    color: var(--gac-etoile-vide, #ccc);
}
.dgc-rbar__etoile.is-pleine {
    color: var(--gac-etoile, #97c58f);
}
/* La dernière étoile remplie au pourcentage exact : un dégradé découpé sur
   le caractère. Pas de coupe au demi — 4,6 donne une étoile remplie à 60 %. */
.dgc-rbar__etoile.is-partielle {
    background: linear-gradient(to right,
        var(--gac-etoile, #97c58f) var(--dgc-part, 50%),
        var(--gac-etoile-vide, #ccc) var(--dgc-part, 50%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.dgc-rbar__compte {
    font-weight: 500;
    color: #333;
}
.dgc-rbar__sep {
    color: #ccc;
}
.dgc-rbar__note {
    font-weight: 600;
    color: #333;
}

/* --- Le titre : deux lignes équilibrées --------------------- */
/* Les lignes d'un titre s'équilibrent : « Suspension Luminaire / pour
   Chambre Cocooning » et non « Suspension Luminaire pour Chambre /
   Cocooning ». Même police, même corps, même largeur : c'est l'algorithme de
   coupe qui diffère. */
.single-product .product_title {
    text-wrap: balance;
}

/* --- Le sélecteur de variantes ------------------------------ */
/* Deux rendus, et le nom de l'option ne dit pas lequel : voir
   `theme/inc-variantes.php`. La gouttière de 11,2 px est commune. */
.dgc-option {
    display: flex;
    flex-wrap: wrap;
    gap: 11.2px;
    margin: 0;
    padding: 0;
}
.dgc-option__puce {
    background: #fff;
    border-radius: 0;
    cursor: pointer;
    box-shadow: none;
    padding: 0;
    transition: border-color .125s ease-in-out, outline-color .125s ease-in-out;
}

/* Boutons libellés : 45,5 px de haut, 12,8 de rembourrage latéral.
   Le rembourrage vertical déclaré vaut 8, mais une hauteur minimale de cible
   tactile s'impose : 45,5 mesurés, soit 22,4 de texte et 11,5 de part et
   d'autre. On reproduit la mesure. */
.dgc-option--bouton .dgc-option__puce {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 45.5px;
    padding: 8px 12.8px;
    border: 1px solid rgba(0, 0, 0, .13);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 22.4px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: #000;
}
.dgc-option--bouton .dgc-option__puce.is-active {
    border-color: #000;
    background: #000;
    color: #fff;
}
/* Sous 750 la source grossit ses boutons libelles : rembourrage 11,2 x 16
   au lieu de 8 x 12,8, soit 71,8 x 46,8 pour « 60cm » au lieu de 65,4 x 45,5.
   Releve du 29/08/2026 au calcule : 749 -> 11.2px 16px, 750 -> 8px 12.8px. */
@media (max-width: 749px) {
    .dgc-option--bouton .dgc-option__puce {
        padding: 11.2px 16px;
    }
}

/* Pastilles d'image : carrés de 100 px, filet très clair, et un
   liseré à 2 px de distance pour la valeur choisie — un `outline`,
   pas une bordure : une bordure décalerait la grille de 2 px. */
.dgc-option--image .dgc-option__puce {
    width: 100px;
    height: 100px;
    border: 0;
    line-height: 0;
    outline: 1px solid transparent;
    outline-offset: 2px;
}
/* Le liseré doit survivre au CLIC : plus haut dans cette feuille,
   `button:focus:not(:focus-visible) { outline: none }` retire l'anneau du
   focus pris à la souris, et il emportait celui-ci avec lui - la pastille
   choisie n'était plus encadrée dès qu'on la choisissait. On repose donc le
   contour dans l'état focus lui-même, `outline-style` compris. */
.dgc-option--image .dgc-option__puce.is-active,
.dgc-option--image .dgc-option__puce.is-active:focus,
.dgc-option--image .dgc-option__puce.is-active:focus:not(:focus-visible) {
    outline: 1px solid rgba(0, 0, 0, .81);
    outline-offset: 2px;
}
.dgc-option__image {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, .08);
    background-size: cover;
    background-position: center;
}
/* Une combinaison impossible reste cliquable : le clic bascule alors
   l'autre option plutôt que de bloquer. Elle est seulement estompée. */
.dgc-option__puce.is-indisponible {
    opacity: .45;
}

/* --- La rangée d'achat : quantité puis bouton --------------- */
/* Quantité et bouton CÔTE À CÔTE : boîte de quantité 126 x 52, onze pixels
   de gouttière, puis le bouton sur le reste. Ni quantité absente, ni bouton
   pleine largeur. */
.single-product .woocommerce-variation-add-to-cart,
.single-product form.cart:not(.variations_form),
.single-product form.cart.grouped_form {
    display: flex;
    align-items: center;
    gap: 11.2px;
}
/* Les trois `<input type="hidden">` du formulaire deviennent des cases de
   flex : invisibles mais comptées, elles prenaient trois gouttières de
   11,2 px sur la largeur du bouton, qui tombait à 257 au lieu de 292. */
.single-product .woocommerce-variation-add-to-cart > input[type="hidden"],
.single-product form.cart > input[type="hidden"] {
    display: none;
}
/* ET LES PSEUDO-ÉLÉMENTS DE CLEARFIX AVEC EUX. Storefront pose
   `::before` et `::after` en `display: table` sur cette rangée pour refermer
   ses flottants ; passée en flex, chacun devient une case de largeur nulle
   qui consomme quand même sa gouttière — 11,2 px avant la quantité, 11,2
   après le bouton. C'est le même piège que sur `.col-full`, où ils
   décalaient le logo de 67 px, et sur les colonnes du pied de page.
   Troisième fois : chercher les pseudo-éléments AVANT de chercher ailleurs
   dès qu'une rangée passée en flex se décale d'une gouttière exactement.

   La règle à battre est
     `.single-product div.product .variations_button::before` — [0,3,1],
   dans `storefront/assets/css/woocommerce/woocommerce.css`. Une première
   version écrite en [0,2,1] a été servie sans le moindre effet : il faut
   `div.product` dans le sélecteur pour arriver à égalité, et c'est la
   position — la feuille de l'enfant charge après — qui départage ensuite. */
.single-product div.product .woocommerce-variation-add-to-cart::before,
.single-product div.product .woocommerce-variation-add-to-cart::after,
.single-product div.product form.cart:not(.variations_form)::before,
.single-product div.product form.cart:not(.variations_form)::after {
    display: none;
}
/* `div.product` encore : Storefront pose `margin-right: .875em` sur
   `.quantity` depuis `.woocommerce div.product form.cart .quantity`. Ces
   12,25 px s'ajoutent à la gouttière de flex — 24 px entre la quantité et le
   bouton là où il en faut 11,2. */
.single-product div.product form.cart .quantity.dgc-qte {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: 126px;
    height: 52px;
    border: 1px solid rgb(223, 223, 223);
    border-radius: 0;
    background: rgba(255, 255, 255, .78);
    margin: 0;
}
.dgc-qte__bouton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: #333;
    cursor: pointer;
}
.dgc-qte__bouton:hover,
.dgc-qte__bouton:focus {
    background: none;
    color: #000;
}
.single-product form.cart .quantity.dgc-qte input.qty {
    width: 36px;
    min-width: 0;
    height: auto;
    padding: 1px 2px;
    border: 0;
    background: none;
    box-shadow: none;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 22.4px;
    color: #333;
    -moz-appearance: textfield;
}
.single-product form.cart .quantity.dgc-qte input.qty::-webkit-outer-spin-button,
.single-product form.cart .quantity.dgc-qte input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* `div.product` dans le sélecteur : Storefront pose une marge gauche sur ce
   bouton depuis `.woocommerce div.product form.cart .button`. Sans ce niveau
   de spécificité, la marge survit et la rangée montre 24 px de gouttière au
   lieu de 11,2 — le bouton tombe à 280 px au lieu de 292. */
.single-product div.product form.cart .single_add_to_cart_button {
    flex: 1 1 auto;
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4.8px;
    height: 52px;
    margin: 0;
}
/* L'icône devant le libellé. Elle est portée par le LIBELLÉ, pas par le
   bouton : chez la source elle vit dans `.add-to-cart-text`, donc elle
   disparaît avec le mot, d'un seul tenant, quand la coche arrive. Posée sur
   le bouton, elle s'effaçait à part et restait visible en fantôme pendant
   que la coche grandissait. Le sélecteur de repli sert le cas où le script
   n'a pas encore enveloppé le libellé. */
.single-product form.cart .single_add_to_cart_button > .dgc-atc__texte::before,
.single-product form.cart .single_add_to_cart_button:not(:has(.dgc-atc__texte))::before {
    content: "";
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: var(--dgc-icone-panier) center / contain no-repeat;
    mask: var(--dgc-icone-panier) center / contain no-repeat;
}
/* Trait de 1,5 px dans une boite de 20 : le cabas avec le petit plus, celui
   que porte deja la barre collante. Les deux boutons montrent la MEME icone -
   pas un caddie a roulettes d'un cote et un cabas de l'autre. */
:root {
    /* Le `stroke-linejoin` est sur le PREMIER tracé seulement, comme dans le
       fragment de la source : le second n'a que des bouts, pas d'angle. */
    --dgc-icone-panier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath stroke-linejoin='round' d='M16.608 9.421V6.906H3.392v8.016c0 .567.224 1.112.624 1.513.4.402.941.627 1.506.627H8.63M8.818 3h2.333c.618 0 1.212.247 1.649.686a2.35 2.35 0 0 1 .683 1.658v1.562H6.486V5.344c0-.622.246-1.218.683-1.658A2.33 2.33 0 0 1 8.82 3'/%3E%3Cpath d='M14.608 12.563v5m2.5-2.5h-5'/%3E%3C/svg%3E");
}

/* --- Le bandeau de confiance -------------------------------- */
/* Trois colonnes, une coche, du texte en casse normale à 14 px. Nous
   dessinions une icône au-dessus d'un libellé en CAPITALES de 9,2 px,
   forme héritée de Galerie Sac à Dos. */
.dgc-confiance {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    padding: 12px 4px 0 10px;
    /* 40 px sous le bouton : 14 de marge basse du formulaire (Storefront) plus
       14 ici plus les 12 de rembourrage. */
    margin: 14px 0 0;
}
.dgc-confiance__case {
    display: flex;
    justify-content: center;
}
.dgc-confiance__texte {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.25;
    font-size: 14px;
    color: #000;
    text-align: center;
}
.dgc-confiance__texte::before {
    content: "\2713";
}
/* Le CSS de l'editeur de la source garde la rangee horizontale sur mobile
   mais resserre : `@media (max-width: 768px) { gap: 12px; font-size: 13px }`.
   Le seuil est 768 chez elle - c'est du CSS marchand, pas le 750 du theme.
   Sans lui nos cases faisaient 98,7 px au lieu de 106,7 et le bandeau 64,5
   de haut au lieu de 60,8 (releve du 29/08/2026 a 390). */
@media (max-width: 768px) {
    .dgc-confiance { gap: 12px; }
    .dgc-confiance__texte { font-size: 13px; }
}

/* --- L'encart téléphone ------------------------------------- */
/* Le badge fait 42 % de la colonne et son rapport 7,0287 fixe la
   hauteur ; douze pixels plus bas, la phrase de contact sur le crème. */
.dgc-tel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 28px 0 0;
}
/* ECART ASSUME. L'ecart entre la rangee d'achat et ce bandeau vaut 36,6 px
   ici : 14 px de rembourrage bas du formulaire plus 22,65 de marge basse, la
   marge de 14 du bandeau fusionnant dedans. La valeur de reference serait 28.
   Le choix de l'ecart plus large est delibere : ne pas le « corriger » a la
   passe suivante en croyant rattraper une reference. */
@media (max-width: 749px) {
    /* ECART ASSUME. Un ecart uniforme de 24 px poserait le badge du numero
       bien plus pres de la boite de contact (12 px) que du bandeau de
       confiance : sur la colonne empilee du telephone, le desequilibre se
       voit. D'ou 12 px au-dessus comme en dessous, delibere : ne pas le
       « corriger » a la passe suivante. */
    .single-product div.product .summary > .dgc-tel {
        margin-top: 12px;
    }
}
.dgc-tel__badge {
    display: block;
    width: 42%;
    height: auto;
}
.dgc-tel__texte {
    width: 100%;
    padding: 8px 12px;
    background: #faf8f6;
}
.dgc-tel__texte p {
    margin: 0;
    font-size: 14px;
    line-height: 22.4px;
    text-align: center;
}

/* ============================================================
   Barre de collection au téléphone — bascule à 750 px

   À 750 px les facettes sont encore en ligne, à 740 on passe au bouton
   « Filtrer ». C'est la même bascule que l'en-tête, et pas 767/768.

   En dessous : une rangée de 44 px avec le bouton « Filtrer » (icône 20 px +
   le mot, 62 × 22,4) à gauche et les deux boutons de densité à droite. Ni le
   compte, ni le tri.
   ============================================================ */
@media (max-width: 749px) {
    /* La rangee fait 44 px, la cible tactile de la source
       (`.facets-toggle { height: var(--minimum-touch-target) }`), et pas la
       hauteur de son contenu : la pastille « un article par ligne » en fait 29
       et porterait la rangee a 45. */
    .gac-toolbar { height: 44px; }
    .gac-toolbar__facettes { display: none; }
    .gac-toolbar__filters { display: inline-flex; }
    .gac-toolbar__count { display: none; }
    .gac-sort { display: none; }
    .gac-colonnes { margin-left: auto; }
}

/* Le titre de collection est du noir à 81 %, comme le texte courant — pas du
   noir plein : rgba(0,0,0,.81) à 32 px. */
.woocommerce-products-header__title.page-title {
    color: rgba(0, 0, 0, .81);
}

/* Le titre de carte est en graisse 500, pas 400. Même boîte (259,2 × 44,8),
   même taille (14/22,4), même couleur — seule la graisse change. Elle se voit
   quand même : le texte en 500 est plus large, et le titre passe à la ligne
   après « pour » au lieu de tenir jusqu'à « Chambre ». */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-weight: 500;
}

/* ============================================================
   Collection vide — « Aucun produit trouvé. »

   Deux collections du catalogue sont vides côté vitrine : leurs produits
   existent mais ne sont pas publiés. WooCommerce y sert son encart bleu
   « Aucun produit ne correspond à votre sélection. » et pas de barre d'outils
   du tout ; il faut au contraire garder la barre, écrire « 0 article », puis
   poser ce bloc centré.

   À 1 440 px :

     bloc   rembourrage 64 px haut et bas, texte centré, hauteur 223,6
     titre  48 px / interligne 48, Libre Baskerville, rgba(0,0,0,.81)
     phrase 14 px / 22,4, marge haute 14 px
     lien   même taille, même couleur que la phrase

   Le titre porte une classe utilitaire `h2` ; sans elle, seule la balise
   compte et l'on hérite des 28 px de Storefront, soit un bloc de 71 px au lieu
   de 224.
   ============================================================ */
/* Le bloc est une COLONNE CENTREE chez la source, avec 12 px entre le titre
   et la phrase et la marge de page sur les cotes - pas un bloc pleine largeur
   au texte centre. L'ecart se voyait de 11,2 px sur la hauteur totale (212,4
   au lieu de 223,6), la phrase remontant d'autant. Releve le 31/08/2026, sur
   la page de recherche cette fois : « faq » repond des pages et aucun produit,
   ce qui pose ce bloc-la. */
.main-collection-grid__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;                              /* --padding-sm */
    padding: 64px var(--gac-marge-page, 40px);
    text-align: center;
}
.main-collection-grid__empty .main-collection-grid__empty-title {
    margin: 0;
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: 48px;
    font-weight: 400;
    line-height: 48px;
    color: rgba(0, 0, 0, .81);
}
.main-collection-grid__empty p {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 22.4px;
    color: rgba(0, 0, 0, .81);
}
.main-collection-grid__empty a {
    color: rgba(0, 0, 0, .81);
}

/* ============================================================
   Pied de page collé en bas quand la page est courte

   À 1 440 × 1 000 sur une collection vide, le <main> mesure 509,4 px pour
   394,6 px de contenu, et le pied de page commence exactement à 619 — soit
   1 000 moins ses 380,7 px de haut. Le pied de page reste au bas de l'écran
   tant que le contenu ne remplit pas la fenêtre.

   Sans cela il remonte coller le contenu : 163 px d'écart sur les deux
   collections vides, et le même défaut sur toute page courte (404, recherche
   sans résultat).

   Pas de valeur calée en dur : une cale de 115 px serait juste à 1 000 px de
   haut et fausse partout ailleurs. C'est le montage en colonne qui porte la
   règle.
   ============================================================ */
/* Le montage porte sur `#page` et non sur `body` : Storefront enveloppe TOUT
   dans `<div id="page">`, en-tête et pied de page compris, si bien qu'une
   colonne posée sur le corps n'avait qu'un seul enfant et ne changeait rien.
   Premier essai sans effet, 163 px d'écart inchangés. */
#page.site {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
}
#page > #content.site-content {
    flex: 1 0 auto;
}
#page > #colophon {
    flex: 0 0 auto;
}

/* `text-wrap: pretty` et non `auto`. Même police, même graisse, même boîte,
   même largeur de texte au pixel (301 px) — mais le point de retour à la ligne
   change : la coupe tombe après « pour » et non après « Chambre ». Cela se voit
   sur cinq cartes de neuf et ne se mesure dans aucune hauteur, les deux titres
   tenant sur deux lignes. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    text-wrap: pretty;
}

/* ============================================================
   Le survol du bouton du hero
   ============================================================

   Un voile blanc à 8 %, posé en .125s, sans mouvement - et non le rectangle
   entier qui se remplit d'un #333 OPAQUE monté du bas en .3s.

   Attention à l'endroit où la règle se pose : le balisage du hero est celui
   de Gutenberg,

       <div class="wp-block-button gac-btn"><a class="wp-block-button__link">

   La classe `gac-btn` est donc sur le DIV, pas sur le lien. Un voile montant
   posé sur `.gac-btn::after` s'applique au div, remplit sa boîte de #333, et
   le lien transparent le laisse voir - alors que toutes les règles « le
   bouton du hero est secondaire » visent `.wp-block-button__link` et ne
   peuvent pas l'atteindre.

   Valeurs du bouton secondaire :
     --color-secondary-button-hover-background: rgb(255 255 255 / 0.08)
     --color-secondary-button-hover-border:     rgb(255 255 255 / 1.0)
     transition .125s ease-in-out
   Le `:active` (`scale: .99; translate: 0 1px`) n'appartient qu'au bouton
   d'ajout au panier : le bouton secondaire ne bouge pas au clic. */
.gac-hero .gac-btn::after,
.gac-hero .wp-block-button::after {
    content: none;
}
.gac-hero .gac-btn,
.gac-hero .gac-btn:hover,
.gac-hero .wp-block-button:hover {
    /* `!important` a contrecoeur : la règle héritée de Galerie Sac à Dos
       (« Effet au survol des boutons, absent jusqu'ici ») pose son #333 en
       `!important` sur `.gac-btn:hover`. Sans lui, la spécificité ne suffit
       pas et le rectangle continue de se remplir. */
    background: none !important;
}
.gac-hero .gac-btn .wp-block-button__link:active,
.gac-hero .wp-block-button__link:active {
    scale: 1;
    translate: none;
}
/* Le bouton ne saute PAS d'un pixel au clic. Le piège est le même que le
   voile montant, au même endroit : `.gac-btn:active { transform:
   translateY(1px) }` porte sur le BLOC parent, pas sur le lien, puisque la
   classe `gac-btn` est sur le div.

   Le bouton secondaire n'a aucune règle `:active` : `scale: .99` /
   `translate: 0 1px` n'appartiennent qu'au bouton d'ajout au panier. Sous le
   doigt, la seule chose qui change reste le voile blanc du survol. */
.gac-hero .gac-btn:active,
.gac-hero .wp-block-button:active {
    transform: none;
}

/* Deux valeurs de repos, prises sur la page rendue et non sur une feuille
   lue à l'oeil :

     box-shadow   rgb(255 255 255)  et non rgba(255, 255, 255, .9)
     line-height  22.4px (1.6)      et non 1.2

   Un filet à 90 % vient d'un relevé fait sur une capture, où le fond passe au
   travers ; et la boîte fait alors 48,8 px de haut au lieu de 54,39
   (16 + 22,4 + 16). C'est la seule ligne du bouton qui peut ne pas être à sa
   hauteur, et elle se voit dès qu'on pose les deux côte à côte. */
.gac-hero .wp-block-button__link,
.gac-hero .gac-btn .wp-block-button__link,
.wp-block-cover.gac-hero .wp-block-button__link,
.wp-block-cover.gac-hero .gac-btn .wp-block-button__link {
    box-shadow: inset 0 0 0 1px #fff;
    line-height: 22.4px;
}

/* ============================================================
   LE MOUVEMENT DE LA GRILLE DE COLLECTION
   Ce qui suit reproduit ce qui se joue VRAIMENT au geste, et non ce qu'une
   feuille declare : la moitie des regles de carte est eteinte par les
   interrupteurs `card-hover-effect-none` et
   `<slideshow-component disabled="true">`.
   ============================================================ */

/* CE QU'ON NE REPRODUIT PAS, ET POURQUOI.

   1. Le zoom de la photo au survol (`.card-hover-effect-subtle-zoom`) : le
      `<body>` porte `card-hover-effect-none`. Aucune des regles de levee,
      d'echelle ou de zoom ne s'applique.
   2. Les deux fleches qui glissent (`arrowsSlideIn`) : sur la carte d'une
      collection, `slideshow-component` porte `disabled="true"`, et
      `base.css` met alors `slideshow-arrows { display: none }`. L'animation
      demarre bien, mais sur un element invisible. Elle se voit sur
      l'accueil, pas ici.
   3. La bascule de densite de grille ne change pas la grille : pas de
      fonction, donc pas d'animation a reproduire. */

/* L'ARRIVEE DES CARTES.

   `results-list[initialized] .product-grid__item` : `opacity: 0;
   transform: translateY(10px)` en `@starting-style`, et la transition les
   ramene en .125s ease-in-out. Chaque carte AJOUTEE apres le premier rendu
   monte donc en fondu - c'est ce qu'on voit en descendant sur une collection
   paginee en defilement infini.

   Le garde-fou : l'attribut n'est pose qu'apres le premier rendu, sinon les
   34 cartes de la premiere page s'animeraient aussi au chargement. Elles ne
   doivent pas bouger. */
ul.products[data-dgc-anime] > li.product {
    transition: opacity var(--dgc-anim) ease-in-out,
        transform var(--dgc-anim) ease-in-out;
}
@starting-style {
    ul.products[data-dgc-anime] > li.product {
        opacity: 0;
        transform: translateY(10px);
    }
}

/* LE CHANGEMENT DE FILTRE OU DE TRI.

   Le rendu cible ne recharge pas : la grille sortante s'efface, la nouvelle
   monte en fondu apres .15s d'attente, et les cartes qui restent glissent a
   leur nouvelle place.

   Ici la page se recharge - c'est l'architecture, WooCommerce rend la grille
   au serveur. La transition de vue INTER-DOCUMENT donne le meme film sans
   rien changer au fonctionnement : le navigateur photographie l'ancienne
   page, charge la nouvelle, et joue le meme fondu.

   L'OPT-IN N'EST PAS ICI. `@view-transition { navigation: auto }` est imprime
   par `dgc-survol-carte.php` dans la page, et seulement sur une page de
   collection. Une transition inter-document exige que les DEUX pages y
   consentent : la regle posee dans cette feuille vaudrait pour tout le site,
   et une fiche produit ou un panier se mettrait a arriver en fondu. Aucun
   passage d'une page a l'autre ne doit s'animer, et un mouvement en trop est
   une erreur au meme titre qu'un mouvement en moins. Le script du meme
   fichier annule en plus ce qui reste (collection vers une AUTRE
   collection). */

::view-transition-group(dgc-grille) { z-index: 1; }
::view-transition-new(dgc-grille) {
    animation-name: dgcFondMontant;
    animation-delay: .15s;
    animation-duration: var(--dgc-anim);
    animation-timing-function: ease-in-out;
}
@keyframes dgcFondMontant {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Le survol d'une carte : la photo suivante prend la place de la premiere,
   et revient quand le curseur s'en va. La bascule est SECHE, sans fondu.
   Le mecanisme vit dans `dgc-survol-carte.php`. */


/* ============================================================
   LE MOUVEMENT

   Un thème juste au pixel à seize largeurs peut être mort au
   toucher : une recette qui photographie une page immobile ne voit
   ni ce que déclenche un clic, ni ce qui se joue au chargement.

   Valeurs de référence :

     --animation-speed          0.125s   ease-in-out
     --animation-speed-medium   0.15s
     --animation-speed-slow     0.2s
     --drawer-animation-speed   0.2s
     timing « fade in »         cubic-bezier(.16, 1, .3, 1)
     timing « fade out »        cubic-bezier(.4, 0, .2, 1)
     timing « rebond »          cubic-bezier(.34, 1.56, .64, 1)
     ease-out-quad              cubic-bezier(.32, .72, 0, 1)

   CE QUI N'EST PAS ICI, ET POURQUOI. Des flèches qui glissent sur la
   galerie des cartes (`arrowsSlideIn`), un soulèvement des cartes au
   survol et une transition entre pages sont bien DÉCLARÉS, mais les
   trois sont ÉTEINTS : `slideshow-component` porte `disabled="true"`,
   le corps porte `card-hover-effect-none`, et
   `data-page-transition-enabled="false"`. Une règle qu'un
   interrupteur éteint n'est pas à reproduire.
   ============================================================ */

:root {
    --dgc-mouv: .125s;
    --dgc-mouv-moyen: .15s;
    --dgc-mouv-lent: .2s;
    --dgc-mouv-entrant: cubic-bezier(.16, 1, .3, 1);
    --dgc-mouv-sortant: cubic-bezier(.4, 0, .2, 1);
    --dgc-mouv-rebond: cubic-bezier(.34, 1.56, .64, 1);
    --dgc-mouv-quad: cubic-bezier(.32, .72, 0, 1);
    /* Les trois courbes que le panneau de recherche ajoute, relevees au
       calcule sur la source : --animation-timing-hover,
       --animation-timing-default et --animation-timing-active. */
    --dgc-mouv-survol: cubic-bezier(.25, .46, .45, .94);
    --dgc-mouv-defaut: cubic-bezier(0, 0, .2, 1);
    --dgc-mouv-actif: cubic-bezier(.5, 0, .75, 0);
}

@keyframes dgc-grossit {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}
@keyframes dgc-monte-en-fondu {
    0%   { transform: translateY(-1em); opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
}
@keyframes dgc-remonte {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes dgc-descend-en-fondu {
    0%   { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(8px); }
}
@keyframes dgc-entre-par-le-bas {
    0%   { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
@keyframes dgc-sort-par-le-bas {
    0%   { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(20px); opacity: 0; }
}
@keyframes dgc-entree-tiroir {
    0%   { visibility: hidden; opacity: 0; transform: translateX(-.5rem); }
    100% { visibility: visible; opacity: 1; transform: translateX(0); }
}

/* --- 1. La FAQ s'ouvre, elle n'apparaît pas -------------------------- */

/* `accordion-custom details::details-content` s'anime sur la hauteur,
   l'opacité et le rembourrage, en 0,2s. Avec la seule rotation du chevron, la
   réponse surgit d'un bloc.

   `interpolate-size: allow-keywords` est la clé : sans lui `block-size: auto`
   n'est pas une valeur animable et la transition ne joue pas. Là où le
   navigateur ne connaît pas `::details-content` (Firefox à ce jour), la règle
   est simplement ignorée et l'accordéon retrouve son comportement d'avant.
   Aucune régression.

   Portée à `.gac-accordion__item` seulement : le pied de page ouvre ses
   colonnes dans des `<details open>` qui ne doivent pas s'animer. */
.gac-accordion__item::details-content {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    interpolate-size: allow-keywords;
    transition:
        content-visibility var(--dgc-mouv-lent) allow-discrete,
        opacity var(--dgc-mouv-lent) ease-in-out,
        block-size var(--dgc-mouv-lent) ease-in-out;
}
.gac-accordion__item[open]::details-content {
    block-size: auto;
    opacity: 1;
}
/* `overflow-y: clip` sert à la fermeture ; laissé en place sur un panneau
   ouvert, il rognerait le liseré de focus d'un lien de la réponse. */
.gac-accordion__item[open]::details-content:focus-within {
    overflow-y: visible;
}

/* --- 5. La pastille du panier réagit à chaque ajout ------------------ */

/* Le rond grossit de 20 % puis revient, et le chiffre tombe d'une hauteur
   de ligne, le tout en 0,125s (header-actions.liquid : `grow` sur
   .cart-bubble__background, `move-and-fade` depuis --start-y -1em sur
   .cart-bubble__text, --animation-speed et --animation-easing, sans garde de
   mouvement réduit chez la source). Le fond est le ::before : le rond seul
   grossit, le chiffre seul tombe. Joué à CHAQUE changement du compte, en
   plus comme en moins, une fois la réponse du serveur arrivée (gac-ui.js
   pastilleEntete), et la classe tombe à l'animationend du chiffre. */
.gac-cart-count.is-anime::before {
    animation: dgc-grossit var(--dgc-mouv) ease-in-out;
}
.gac-cart-count.is-anime .gac-cart-count__chiffre {
    transform: translateY(-1em);   /* --start-y, posé avant que l'animation parte */
    animation: dgc-monte-en-fondu var(--dgc-mouv) ease-in-out;
}
/* Même remarque de spécificité que sur le rond : en `display: inline`, imposé
   par Storefront, la boîte du chiffre ne prenait pas la translation verticale
   de `dgc-monte-en-fondu` - `transform` ne s'applique pas à une boîte en
   ligne. Le chiffre ne montait donc jamais. */
.site-header-cart .cart-contents .gac-cart-count__chiffre {
    display: block;
    position: relative;
}

/* --- 6. Le tiroir mobile déplie ses entrées -------------------------- */

@media (max-width: 749px) {
    /* Les entrées entrent l'une après l'autre, 0,1s d'écart, une fois le
       panneau arrivé (`--drawer-animation-speed`, 0,2s) - et non déjà en
       place quand le panneau se pose. Un index par entrée ferait l'affaire ;
       `nth-child` donne le même résultat sans toucher au balisage de
       Storefront. */
    .site-header .storefront-primary-navigation .main-navigation.toggled ul.menu > li,
    .site-header .storefront-primary-navigation .main-navigation.toggled ul.nav-menu > li {
        animation: dgc-entree-tiroir var(--dgc-mouv-lent) ease-in-out backwards;
    }
    .site-header .storefront-primary-navigation .main-navigation.toggled ul.menu > li:nth-child(1) { animation-delay: .2s; }
    .site-header .storefront-primary-navigation .main-navigation.toggled ul.menu > li:nth-child(2) { animation-delay: .3s; }
    .site-header .storefront-primary-navigation .main-navigation.toggled ul.menu > li:nth-child(3) { animation-delay: .4s; }
    .site-header .storefront-primary-navigation .main-navigation.toggled ul.menu > li:nth-child(4) { animation-delay: .5s; }
    .site-header .storefront-primary-navigation .main-navigation.toggled ul.menu > li:nth-child(n + 5) { animation-delay: .6s; }
}

/* --- 8. Le respect de « moins d'animations » ------------------------- */

/* Les effets de survol sont enfermés dans
   `@media (prefers-reduced-motion: no-preference)` : le système d'un visiteur
   qui a demandé moins de mouvement doit être suivi. */
@media (prefers-reduced-motion: reduce) {
    .gac-cart-count.is-anime::before,
    .gac-cart-count.is-anime .gac-cart-count__chiffre,
    .site-header .storefront-primary-navigation .main-navigation.toggled ul.menu > li,
    .site-header .storefront-primary-navigation .main-navigation.toggled ul.nav-menu > li {
        animation: none;
    }
}

/* ============================================================
   LE MOUVEMENT DE LA FICHE PRODUIT
   Les quatre points ci-dessous sont ce que les sections precedentes
   ne couvrent pas.
   ============================================================ */

/* CE QU'ON NE REPRODUIT PAS, ET POURQUOI.

   La fiche porte quatre interrupteurs :

     body class="card-hover-effect-none"    le soulèvement des cartes
     data-page-transition-enabled="false"   la transition entre pages
     data-product-transition="false"        idem sur la fiche
     data-add-to-cart-animation="false"     la photo qui vole vers le panier

   ATTENTION AU DERNIER, il est trompeur. Il ne commande que
   `#animateFlyToCart()` :

     const animationEnabled = this.dataset.addToCartAnimation === 'true';
     if (animationEnabled && !event.target.closest('.quick-add-modal')) {
       this.#animateFlyToCart();
     }
     this.animateAddToCart();

   `animateAddToCart()` est appelé HORS du test : il pose
   `data-added="true"` sur le bouton pendant 800 ms dans tous les cas. La
   coche qui éclate est donc bien jouée, et c'est l'animation la plus
   visible de la page. Un interrupteur ne se lit pas à son nom.

   Les flèches de galerie (`arrowsSlideIn`) ne sont pas ici non plus : la
   galerie est rendue en grille (`media-gallery--grid`,
   `data-presentation="grid"`), sans `<slideshow-arrows>`. Les chevrons sont
   déjà masqués au-dessus de 768 px pour la même raison. */

/* --- 1. La pastille de variante glisse ------------------------------ */

/* Options en boutons libellés. Choisir une autre valeur ne fait pas sauter
   le fond noir : il GLISSE d'un bouton à l'autre. Le procédé vaut d'être
   compris, parce qu'aucun élément ne traverse réellement la gouttière :
   CHAQUE bouton porte sa propre pastille, masquée par `overflow: clip`, et
   celles des boutons non choisis sont poussées de ±(100 % + 1 px). Celle du
   bouton qu'on quitte sort par un bord pendant que celle du bouton visé entre
   par l'autre. L'oeil recolle les deux en un seul mouvement.

   Le `+1px` couvre la bordure, sans quoi un liseré du fond reste visible au
   bord du cadre. */
.dgc-option--bouton .dgc-option__puce {
    position: relative;
    overflow: clip;
    /* Le fond noir passe à la pastille : le bouton reste blanc, sans quoi
       il n'y aurait rien à faire glisser. */
    background: #fff;
    transition:
        border-color var(--dgc-mouv) ease-in-out,
        color var(--dgc-mouv) ease-in-out;
}
.dgc-option__pilule {
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: 0;
    right: 0;
    background: #000;
    border-radius: inherit;
    pointer-events: none;
    transform: translateX(var(--dgc-pilule-decalage, 0));
    /* PAS DE TRANSITION ICI : voir la regle `.is-active > .pilule` plus
       bas. Une transition posee sur toutes les pastilles faisait traverser
       son bouton a CHACUNE de celles qui separent l'ancienne valeur de la
       nouvelle. Choisir 120cm quand 70cm etait pris allumait ainsi les
       quatre boutons du milieu. */
}
.dgc-option__texte {
    position: relative;
    z-index: 2;
    pointer-events: none;
}
/* Un bouton AVANT le bouton choisi : sa pastille sort par la droite.
   Un bouton APRÈS : elle sort par la gauche. Le choisi garde 0. */
.dgc-option--bouton .dgc-option__puce:not(.is-active):has(~ .is-active) {
    --dgc-pilule-decalage: calc(100% + 1px);
}
.dgc-option--bouton .dgc-option__puce.is-active ~ .dgc-option__puce {
    --dgc-pilule-decalage: calc(-100% - 1px);
}
/* La largeur du bloc qui glisse ne change pas en route. Sans cela, une
   pastille de 118 px qui arrive dans un bouton de 132 se dilate pendant le
   trajet. Les deux boutons sont mesurés en JavaScript et l'on prend le
   `max()` : `gac-ui.js` pose les deux mesures sur le groupe. */
/* SEULES DEUX PASTILLES GLISSENT : celle du bouton qu'on prend et celle
   du bouton qu'on quitte. Toutes les autres sautent d'un bord a l'autre
   sans transition, hors cadre, donc sans rien montrer.

   `transform 0.125s` sur le bouton coche, `transform 0s` sur les autres :

     .variant-option__button-label:has([data-previous-checked='true'],
       [data-current-checked='true']) .variant-option__button-label__pill
       { transition-property: transform }

   ou `data-current-checked` est notre `is-active` et `data-previous-checked`
   notre `was-active`.

   La largeur figee au `max()` des deux boutons est le second role de ces
   deux classes : sans elle, une pastille de 118 px qui arrive dans un
   bouton de 132 se dilate pendant le trajet. */
.dgc-option--bouton .dgc-option__puce.is-active > .dgc-option__pilule,
.dgc-option--bouton .dgc-option__puce.was-active > .dgc-option__pilule {
    width: max(
        var(--dgc-pilule-largeur-courante, 100%),
        var(--dgc-pilule-largeur-precedente, 100%)
    );
    right: auto;
    transition: transform var(--dgc-mouv) ease-in-out;
}
/* Le bouton choisi n'a plus de fond propre : c'est la pastille qui le
   peint. La règle plus haut dans la feuille pose `background: #000`, elle
   est annulée ici pour que la pastille reste visible par-dessus. */
.dgc-option--bouton .dgc-option__puce.is-active {
    background: #fff;
    border-color: #000;
    color: #fff;
}
/* Le cadre du bouton est un `::before` pose PAR-DESSUS la pastille : sans
   lui, le rectangle noir qui glisse mangerait le filet, que `overflow:
   clip` empeche de redessiner autrement.

   IL NE SE DEROULE PAS. Ne pas lui faire suivre la pastille par un
   `clip-path` anime : le `::before` d'un bouton libelle vaut toujours
   `inset(0px)`, seule sa COULEUR bouge, en .125s - `clip-path: inset(0px)`
   et `transition: border-color 0.125s`, sur le bouton coche comme sur les
   autres. La variable `--clip` de `base.css` ne pilote pas ce `::before` :
   elle ne sert qu'au `::after` du cas « variante indisponible ».

   Anime, le cadre ajouterait un second balayage a chaque bouton traverse -
   le meme defaut que la pastille juste au-dessus, et deux fois plus visible
   parce qu'un filet noir sur fond blanc ne se cache nulle part. */
.dgc-option--bouton .dgc-option__puce::before {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid rgba(0, 0, 0, .13);
    border-radius: inherit;
    pointer-events: none;
    z-index: 3;
    transition: border-color var(--dgc-mouv) ease-in-out;
}
.dgc-option--bouton .dgc-option__puce.is-active::before {
    border-color: #000;
}

/* --- 2. La boîte de quantité s'éclaircit au survol ------------------- */

/* `.quantity-selector { transition: background-color .125s ease-in-out }`
   et `:hover { background-color: var(--color-input-hover-background) }`.
   Dans le schéma de couleurs 1, celui du bloc produit, cette valeur vaut
   `rgb(0 0 0 / 0.01)` contre `rgb(255 255 255 / 0.78)` au repos. C'est un
   pour cent : posé parce que mesuré, pas parce qu'il se voit. */
.single-product div.product form.cart .quantity.dgc-qte {
    transition: background-color var(--dgc-mouv) ease-in-out;
}
.single-product div.product form.cart .quantity.dgc-qte:hover {
    background: rgba(0, 0, 0, .01);
}

/* --- 3. Le bouton d'ajout : la coche qui éclate ---------------------- */

/* L'animation la plus visible de la fiche. Au clic, `data-added="true"`
   reste 800 ms sur le bouton, puis part.

   Ce qui se joue alors, dans l'ordre :

     --text-speed .26   le libellé se referme en cercle, se floute, descend
     --check-speed .2   la coche apparaît : opacité, échelle, flou
     --tick-speed .1    le crochet grossit d'un coup (x1,75)
     --ring-speed .2    l'anneau s'efface en s'élargissant
     --burst-speed .32  huit traits partent en étoile

   Les retards s'enchaînent depuis `--base-delay` (un quart de la vitesse
   du texte) et `--step-delay` (3). On reprend les formules telles quelles
   plutôt que des millisecondes rondes : c'est le même calcul. */
.single-product form.cart .single_add_to_cart_button,
.gac-sticky__button {
    --text-speed: .26;
    --base-delay: calc(var(--text-speed) * .25);
    --tick-speed: .1;
    --ring-speed: .2;
    --check-speed: .2;
    --burst-speed: .32;
    --step-delay: 3;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
}
/* Le libellé devient un bloc qu'on peut faire disparaître d'un seul
   tenant. L'icône de panier, dessinée en `::before` sur le bouton, reste
   dehors : elle est traitée plus bas. */
.dgc-atc__texte {
    display: inline-flex;
    gap: 4.8px;
    align-items: center;
    justify-content: center;
    --atc-opacity: 0;
    --atc-destination: -1em;
    clip-path: circle(100% at 50% 50%);
    transition-property: clip-path, opacity, filter, translate;
    transition-duration: calc(var(--text-speed) * .6s), calc(var(--text-speed) * 1s);
    transition-timing-function: ease-out;
}
.dgc-atc__ajoute {
    --atc-opacity: 1;
    --atc-destination: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dgc-atc__eclat {
    width: 30px;
    height: 30px;
    opacity: 0;
    overflow: visible;
}
.dgc-atc__eclat :is(.ring, .line, .check, .burst, .tick) {
    transform-box: fill-box;
    transform-origin: center;
}
.dgc-atc__eclat .check {
    opacity: .2;
    scale: .8;
    filter: blur(2px);
    transform: translateZ(0);
}
.dgc-atc__eclat .burst {
    rotate: 20deg;
}
.dgc-atc__eclat g {
    transform-origin: center;
    rotate: calc(var(--index) * (360 / 8) * 1deg);
}
.dgc-atc__eclat .line {
    stroke-dasharray: 1.5 1.5;
    stroke-dashoffset: -1.5;
    translate: 0 -180%;
}
/* SEUL LE LIBELLE GLISSE. `animation-name: atc-slide` est declare sur les
   DEUX elements, mais `animation-duration` seulement sur
   `.add-to-cart-text` : sur la coche, l'animation tourne en 0 s et ne deplace
   rien. Reproduire la duree sur les deux emmene `translate: -50% -50%` vers
   `0 0` et decentre la coche vers le bas et la droite. La coche reste au
   centre du bouton. */
[data-added="true"] .dgc-atc__texte {
    animation: dgc-atc-glisse var(--dgc-mouv) ease-in-out forwards;
}
@keyframes dgc-atc-glisse {
    100% {
        opacity: var(--atc-opacity, 1);
        translate: 0 var(--atc-destination, 0);
    }
}
[data-added="true"] .dgc-atc__texte {
    clip-path: circle(0% at 50% 50%);
    filter: blur(2px);
    opacity: 0;
    translate: 0 4px;
}
[data-added="true"] .dgc-atc__eclat {
    opacity: 1;
}
[data-added="true"] .dgc-atc__eclat .check {
    opacity: 1;
    scale: 1;
    filter: blur(0);
    transition-property: opacity, scale, filter;
    transition-duration: calc(var(--check-speed) * 1s);
    transition-delay: calc(var(--base-delay) * 1s);
    transition-timing-function: var(--dgc-mouv-quad);
}
[data-added="true"] .dgc-atc__eclat .tick {
    scale: 1.75;
    transition-property: scale;
    transition-duration: calc(var(--tick-speed) * 1s);
    transition-delay: calc((var(--base-delay) + (var(--check-speed) * (var(--step-delay) * 1.1))) * 1s);
    transition-timing-function: ease-out;
}
[data-added="true"] .dgc-atc__eclat .ring {
    opacity: 0;
    scale: 1;
    transition-property: opacity, scale;
    transition-duration: calc(var(--ring-speed) * 1s);
    transition-delay: calc((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s);
    transition-timing-function: var(--dgc-mouv-quad);
}
[data-added="true"] .dgc-atc__eclat .line {
    stroke-dashoffset: 1.5;
    transition-property: stroke-dashoffset;
    transition-duration: calc(var(--burst-speed) * 1s);
    transition-delay: calc((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s);
    transition-timing-function: var(--dgc-courbe);
}
/* L'icône n'a plus de règle propre ici : elle est dans le libellé, elle
   part avec lui. Voir le commentaire de `--dgc-icone-panier`. */

/* --- 4. La barre d'achat collante monte du bas ----------------------- */

/* Elle entre de tout en dessous du cadre :
   `transform: translate(-50%) translateY(calc(100% + 40px))` puis `0`, en
   .3s cubic-bezier(.32,.72,0,1). Une montee de 14 px en .2s ease fait le
   meme geste avec une course dix fois plus courte. */
.gac-sticky {
    transform: translate(-50%, calc(100% + 40px));
    transition:
        opacity .3s var(--dgc-mouv-quad),
        transform .3s var(--dgc-mouv-quad);
}
.gac-sticky.is-visible {
    transform: translate(-50%, 0);
}
/* `hidden` la met en `display: none`, et un element non rendu n'a pas de
   style de depart : retirer l'attribut et poser `is-visible` d'un coup
   n'anime rien. La barre ne glisse alors JAMAIS - une regle juste dans la
   feuille et morte a l'ecran, que seule une mesure du milieu de la
   transition peut montrer (`scripts/rendu/mouvement.js`). `gac-ui.js`
   affiche d'abord et anime a la frame suivante ; `@starting-style` couvre le
   cas ou la barre est posee deja visible. */
@starting-style {
    .gac-sticky.is-visible {
        transform: translate(-50%, calc(100% + 40px));
        opacity: 0;
    }
}

/* --- 5. Le chevron d'accordéon ---------------------------------- */

/* `summary .svg-wrapper { transition: transform var(--animation-speed)
   var(--animation-easing) }`, soit .125s ease-in-out. Nous étions à .2s
   ease : deux fois trop lent, et pas la même courbe. */
.gac-accordion__chevron {
    transition: rotate var(--dgc-mouv) ease-in-out;
}
.gac-faq details > summary::after,
.gac-accordion--faq details > summary::after,
.gac-faq-item > summary::after {
    transition: transform var(--dgc-mouv) ease-in-out;
}

/* --- 6. Moins de mouvement pour qui l'a demandé ---------------------- */

@media (prefers-reduced-motion: reduce) {
    /* La pastille porte sa transition sur `.is-active > .dgc-option__pilule` :
       la nommer seule ne suffit pas a l'eteindre, cette regle-la etant plus
       specifique. */
    .dgc-option__pilule,
    .dgc-option--bouton .dgc-option__puce.is-active > .dgc-option__pilule,
    .dgc-option--bouton .dgc-option__puce.was-active > .dgc-option__pilule,
    .dgc-option--bouton .dgc-option__puce::before,
    .dgc-atc__texte,
    .gac-sticky {
        transition-duration: 0s;
    }
    [data-added="true"] .dgc-atc__texte {
        animation: none;
    }
}

/* ------------------------------------------------------- PIED DE PAGE (2)
   Élément par élément : la typographie des colonnes, le survol des liens, la
   place des moyens de paiement, la ligne de copyright et le calage vertical
   du logo. */

/* Intitulés de colonne : en `h4`, soit Libre Baskerville 400 à 1,25rem sur
   1,2 d'interligne. Le `summary` est une case de flex avec 11,2px de
   rembourrage haut et bas - 46,4px de haut en tout - puis 4px avant la
   première entrée. À 16,8px sur 1,6 sans rembourrage, les intitulés sont trop
   petits et la colonne remonte d'une douzaine de pixels. */
.site-footer .gac-footer-nav__title {
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    line-height: 1.2;
    padding: 11.2px 0;
    margin: 0;
}
.site-footer .gac-footer-nav__list {
    margin-top: 4px;
}

/* Entrées : paragraphe à 0,875rem sur 1,6, et 4px entre deux entrées - pas
   0,92rem sur 1,4 avec 6,9px. */
.site-footer .gac-footer-nav__list li {
    margin: 0;
}
.site-footer .gac-footer-nav__list li + li {
    margin-top: 4px;
}
/* Le soulignement est là mais transparent : les `a` gardent la décoration du
   navigateur et `text-decoration-color: transparent` l'efface. Rien ne se
   voit, ni au repos ni au survol - mais le poser évite qu'une règle future la
   révèle d'un seul côté. */
.site-footer .gac-footer-nav__list a {
    text-decoration: underline;
    text-decoration-color: transparent;
}

/* Survol : RIEN ne change. Les entrées sont des `a` dans un
   `li class="paragraph"` ; ni `:is(h1..h6, p) > a:hover` ni la règle de
   soulignement des paragraphes ne les atteint, donc la couleur et le
   soulignement transparent restent tels quels sous le pointeur.
   Aucune règle de survol sur ce pied de page : celles d'un pied de page noir
   repasseraient le texte en blanc, illisible sur le fond crème. */

/* Moyens de paiement : sortis de la grille par `order: 99;
   grid-column: 1 / -1; margin-top: 10px` - ils occupent une rangée à eux
   seuls sous les colonnes, et la liste y est centrée avec 10px de gouttière.
   Pas collés à droite. */
.site-footer .gac-footer-nav {
    padding-bottom: 20px;
}
.gac-footer-bottom {
    justify-content: center;
    margin-top: 0;
    padding: 10px 0;
}
.gac-footer-pay {
    width: 100%;
    margin-left: 0;
    justify-content: center;
}
.gac-footer-pay ul {
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Ligne de copyright : 0,75rem sur 1,6 en rgb(0 0 0 / .6), sans filet, dans
   une bande de 10px de rembourrage. Pas de #e8e5e0 à 75% d'opacité hérité
   d'un pied de page noir - un texte quasi invisible sur le fond crème. */
.site-footer {
    padding-bottom: 10px;
}
.site-footer .site-info {
    border-top: 0;
    margin-top: 0;
    padding: 0;
    font-size: .75rem;
    line-height: 1.6;
    opacity: 1;
    color: rgb(0 0 0 / .6) !important;
}

/* Logo : centré verticalement sur la hauteur de la rangée - l'image est
   étirée sur toute la rangée et `object-fit: contain` la recentre. Pas collé
   en haut. `align-self` suffit, le pied de page est une grille. */
.site-footer .gac-footer-logo-texte {
    display: block;
    align-self: center;
    padding-top: 0;
}

/* ============================================================
   Les deux filets de l'accueil, le champ de la lettre d'information,
   et la graisse
   ============================================================ */

/* --- 1. Les filets étaient dans la page, et invisibles --------------- */

/* Les deux blocs `wp:separator` posés par `scripts/dgc-separateurs.php` sont
   bien dans le contenu, mais Storefront gagne la cascade sur les trois
   déclarations qui les font exister :

     .hentry .entry-content .wp-block-separator          [0,3,0]  border: 0
                                                                  margin: 0 auto 1.41575em
     .hentry .entry-content .wp-block-separator:not(…)   [0,5,0]  max-width: 10%
                                                                  (les deux :not()
                                                                  comptent chacun
                                                                  pour une classe)

   Un `.wp-block-separator.gac-divider` pèse [0,2,0] : le trait n'a alors ni
   bordure ni largeur (136 px, soit 10 % de la colonne) et porte 20 px de
   marge basse - ce sont eux qui poussent le titre de la FAQ 19 px trop bas,
   alors qu'une règle plus haut dans la feuille croit déjà l'avoir remise à
   zéro. Le préfixe `.hentry .entry-content`, la balise et un `:not()` mettent
   à [0,5,1] et rendent la main.

   Largeur : les filets visent 80 % de la fenêtre, sans plafond - 1152 px à
   1440, 1536 à 1920. Ils vivent dans `.entry-content`, large de la fenêtre
   moins les deux marges de 40 px : 80 % de (100 % + 80px) redonne exactement
   80 vw, à toutes les largeurs et sans dépendre de la gouttière d'ascenseur,
   contrairement à `80vw`. */
.hentry .entry-content hr.wp-block-separator.gac-divider:not(.is-style-dots) {
    width: calc(80% + 64px);
    max-width: none;
    margin: 0 auto;
    border: 0;
    border-top: 1px solid var(--gac-border);
    height: 0;
    background: none;
    opacity: 1;
    overflow: visible;
}

/* --- 2. Le champ de la lettre d'information, au pixel --------------- */

/* Jeton par jeton :

     groupe   680 x 60   bordure 1px --color-input-border rgb(223 223 223)
                         fond rgb(255 255 255 / .78), arrondi 100px
     champ    620 x 58   Inter 400 14px/22,4  rembourrage 16px 28px
                         texte --color-input-text rgb(51 51 51), pas d'ombre
     bouton    42 x 42   marge 8px, arrondi 100px, flèche 24 x 24, pleine
                         (`fill: currentColor`), pas de bordure

   Trois écarts se voient à l'oeil :

   - un double trait en haut du champ ET un trait vertical devant la flèche :
     l'ombre intérieure de Storefront sur les champs
     (`box-shadow: inset 0 1px 1px rgb(0 0 0 / .125)`), qui dessine un liseré
     sur les quatre côtés du champ à l'intérieur de la pilule ;
   - la flèche dans un bouton rectangulaire de 62 x 48 avec 3px d'arrondi,
     hérité des boutons du thème, au lieu du rond de 42 ;
   - la pilule 3 px trop courte : c'est le bouton qui donne sa hauteur au
     groupe (42 + 2 x 8 de marge = 58, plus les bordures = 60), et non
     `align-items: center` qui laisserait le champ décider.

   La bordure est celle des champs (rgb(223 223 223)), pas `--gac-border`
   (noir à 6 %) : c'est un jeton distinct, et le champ est le seul élément qui
   le porte sur cette page. */
.gac-newsletter form {
    align-items: normal;
    border-color: rgb(223 223 223);
    background: rgb(255 255 255 / .78);
}
.gac-newsletter input[type="email"] {
    font-size: 14px;
    line-height: 1.6;
    padding: 16px 28px;
    color: rgb(51 51 51);
    box-shadow: none;
}
.gac-newsletter input[type="email"]::placeholder {
    color: rgb(51 51 51 / .7);
    opacity: 1;
}
.gac-newsletter button {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 42px;
    height: 42px;
    margin: 8px;
    padding: 0;
    border-radius: var(--gac-radius-pill);
    overflow: hidden;
    color: rgb(51 51 51);
    font-size: 14px;
    letter-spacing: normal;
    text-transform: none;
}
.gac-newsletter button svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}
/* Au survol, la flèche passe à 70 % d'opacité de sa couleur, en .125s. La
   transition sur `color` vient déjà des boutons du thème, à la même durée. */
.gac-newsletter button:hover {
    color: rgb(51 51 51 / .7);
}

/* Le titre de ce bloc vaut 20 px (--font-size--h4), comme sur la fiche
   produit - pas 1,4rem, soit 22,4. */
.gac-newsletter h2 {
    font-size: 1.25rem;
}

/* --- 3. La graisse des titres de carte, sur l'accueil --------------- */

/* Le titre de carte est en 500 sur les pages de COLLECTION, et en 400 sur
   l'accueil - même police, même taille, même couleur. Poser 500 partout rend
   les seize cartes de l'accueil trop grasses : accueil 400 / 334 x 22,
   collection 500 / 259 x 45. */
body.home .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-weight: 400;
}

/* --- 4. L'étiquette des tuiles de collection ------------------------ */

/* Storefront pose `h1 a, h2 a, … h6 a { font-weight: 300 }` : sans mention
   de graisse, le libellé sort en 300 dans un lien porté par un `h3`. Il
   s'écrit en 400, hauteur de ligne 1,6, ce qui donne une pastille de 226 x 30
   au lieu de 226 x 25.

   La pastille est par ailleurs à 16 px du bord de la tuile, pas à 8 : son
   conteneur porte 16 px de rembourrage. */
.gac-cats-grid .gac-cat__label { left: 16px; bottom: 16px; }
.gac-cats-grid .gac-cat__label a {
    font-weight: 400;
    line-height: 1.6;
}

/* --- 5. Les intitulés de la FAQ ne sont pas au noir plein ----------- */

/* `var(--gac-heading)` est le noir plein, réservé au titre du hero. Les
   intitulés d'accordéon sont sur `--color-foreground`, noir à 81 %, comme
   tout le texte de la page - au noir plein ils paraissent plus gras.

   Hauteur de ligne : 1,2 (19,2 px), et la ligne mesure quand même 44 px,
   parce que le chevron y est plus haut que le texte. Atteindre la hauteur par
   la hauteur de LIGNE (1,4, soit 22,4) donne une ligne de 44,8 et un texte
   plus aéré. On pose les deux valeurs séparément : la hauteur de la ligne est
   ce que le chevron impose. */
.gac-faq details > summary,
.gac-faq-item > summary {
    color: var(--gac-ink);
    line-height: 1.2;
    min-height: 44px;
}

/* --- 6. Les paragraphes ne coupent pas au même endroit --------------- */

/* `text-wrap: pretty` sur la classe de texte courant : 36 des paragraphes de
   l'accueil, 30 de la fiche produit, 9 de la collection. En `auto`, les
   retours à la ligne diffèrent à largeur de bloc identique. Cela se voit le
   plus sur le paragraphe de la lettre d'information : même boîte de 455 px,
   mêmes trois lignes, mais « des » passe en fin de première ligne au lieu de
   la tête de la deuxième.

   `pretty` ne change ni la police, ni la taille, ni la largeur : il ne change
   que le choix du point de coupe, en évitant les lignes orphelines. */
p {
    text-wrap: pretty;
}

/* ============================================================
   LA RÉPONSE, DÉPLIÉE
   (`scripts/rendu/faq.js` ouvre le premier panneau des trois FAQ
   du site et mesure ce qui n'existe qu'une fois ouvert)

   Mesurer la FAQ FERMÉE - largeur de l'accordéon, hauteur de
   ligne, filets - ne dit rien de son ouverture, et c'est là
   qu'elle diverge le plus. Il faut cliquer.

   Cibles :

     colonne de la réponse   32,5em, soit 455 px à 14 px
                             (`--max-width--body-normal`)
     sous la question        0 px : le texte commence au filet
     entre deux paragraphes  14 px (7 de marge basse + 7 de haute)
     sous le dernier         11,2 px, le rembourrage du panneau

   Sans cela la réponse tient toute la largeur de page - 1360 px,
   des lignes de 180 caractères contre 60 - commence 24 px sous
   la question (la marge de bloc de WordPress,
   `:where(.is-layout-flow) > *`), et ne montre qu'un seul
   paragraphe si la réponse a été importée d'un bloc.
   ============================================================ */

/* La colonne de texte. `--max-width--body-normal` vaut 32,5em, lus sur un
   élément à 14 px : 455 px. En em et non en px, pour que la colonne suive le
   corps si le texte grossit. */
.gac-faq details > p,
.gac-accordion--faq details > p,
.gac-faq details > .gac-accordion__body,
.gac-accordion--faq details > .gac-accordion__body {
    max-width: 32.5em;
}

/* La fiche produit enveloppe sa réponse dans un `div` : il portait les
   52rem et le 1,6em de rembourrage bas de l'accordéon des
   caractéristiques, qui n'a rien à voir avec la FAQ. */
.gac-faq details > .gac-accordion__body,
.gac-accordion--faq details > .gac-accordion__body {
    padding: 0 0 11.2px;
}

/* Le rythme des paragraphes. Rien au-dessus du premier : le texte démarre
   au filet de la question. */
.gac-faq details p,
.gac-accordion--faq details p {
    margin: 0;
}
.gac-faq details p + p,
.gac-accordion--faq details p + p {
    margin-top: 14px;
}
/* Les 11,2 px sous la réponse sont un REMBOURRAGE, pas une marge : la marge
   basse du dernier paragraphe se propagerait hors du panneau au lieu de le
   grandir (`::details-content` la laisse passer), et le filet suivant
   resterait collé au texte. */
.gac-faq details > p:last-child,
.gac-accordion--faq details > p:last-child {
    padding-bottom: 11.2px;
}

/* La page /faq : l'accordéon y prend toute la largeur de page, 1360 px,
   comme sur l'accueil et sur la fiche. Les pages de texte sont bornées à 46rem
   et centrées (736 px) - à raison pour « À propos », dont la colonne est bornée
   aussi, mais pas ici : la question et son chevron y seraient serrés dans la
   moitié de la page. La classe est posée par `dgc_faq_page_body_class()` sur
   les pages qui portent une FAQ.
   Le sélecteur reprend celui du plafond - `body.page:not(.home)
   :not(.woocommerce-page)`, quatre classes - et lui ajoute la nôtre : deux
   classes seules perdent la cascade et la page reste à 736 px. */
body.dgc-page-faq.page:not(.home):not(.woocommerce-page) .entry-content {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Le rythme de la page : 32 px entre un titre de rubrique et son accordéon,
   72 px entre la fin d'une rubrique et le titre de la suivante. Nous en
   avions 28 et 24. */
.gac-accordion--faq {
    margin-top: 32px;
}
.gac-accordion--faq + .gac-section__title {
    margin-top: 72px;
}

/* ============================================================
   LE LISSAGE DU TEXTE

   Tout le texte peut paraître plus gras qu'attendu à taille,
   graisse et fonte identiques. Ce n'est pas la fonte, c'est le
   LISSAGE :

     body { -webkit-font-smoothing: antialiased }

   En `auto`, macOS applique son lissage sous-pixel, qui épaissit
   chaque glyphe. Aucune mesure de boîte ne peut le voir : à
   graisse égale les largeurs de texte sont les mêmes, seul le
   rendu change.

   Posé sur `body` pour que tout le site en hérite, et non le
   seul bloc où l'écart s'est vu.
   ============================================================ */
body {
    -webkit-font-smoothing: antialiased;
}
/* Sauf le tunnel : sa source (checkout-web) rend en `subpixel-antialiased`,
   la valeur par défaut. L'`antialiased` de la vitrine amincissait chaque
   glyphe - « Payer maintenant » sortait moins gras et moins blanc que le
   sien, à graisse et corps pourtant identiques. Même diagnostic que
   l'espace client, plus bas. */
body.dgc-tunnel {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}

/* ============================================================
   Volet du panier : le panier vide
   ============================================================
   Relevé sur svevelys.com le 26/08/2026, fenêtre 1280 x 900, Chromium.
   La source n'y montre ni intitulé « Panier » ni filet : la croix seule,
   hors flux, et un bloc centré - titre 20/24 en Libre Baskerville, rappel
   de connexion 14/22,4 en Inter, bouton noir 16/32.

   Le centrage vient de la même mécanique qu'elle : sa croix est hors flux,
   son en-tête ne pèse donc que son rembourrage haut (20 px) et le bloc se
   centre dans le reste. Le centre tombe à H/2 + 10, vérifié à 700, 800,
   900 et 1000 px de haut. */
.gac-drawer__panel:has( .gac-cart-empty ) .gac-drawer__head {
    display: block;
    padding: 20px 0 0;
    border-bottom: 0;
}
.gac-drawer__panel:has( .gac-cart-empty ) .gac-drawer__title {
    display: none;
}
.gac-drawer__panel:has( .gac-cart-empty ) .gac-drawer__close {
    position: absolute;
    top: 11.2px;
    right: 4.8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
}
.gac-drawer__panel:has( .gac-cart-empty ) .gac-drawer__body {
    justify-content: center;
    padding: 0;
    overflow-y: auto;
}
.gac-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.gac-cart-empty__titre {
    margin: 0 0 12.8px;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    color: var(--gac-ink);
}
/* Le rembourrage est dissymétrique chez la source : son volet pose
   « padding-inline: var(--padding-xl) var(--padding-2xl) », soit 20 puis
   24 px. Le titre, lui, est hors de cette boîte et prend toute la largeur. */
.gac-cart-empty__corps {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-inline: 20px 24px;
}
.gac-cart-empty__compte {
    margin: 0 0 14px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 22.4px;
    color: var(--gac-ink);
}
.gac-cart-empty__compte a {
    color: inherit;
    text-decoration: underline;
    /* La source souligne à .125em du texte, avec une plume de .075em. */
    text-underline-offset: .125em;
    text-decoration-thickness: .075em;
}
/* La bascule de la source est à 750 px, la même que celle de l'en-tête. Sous
   cette largeur son volet prend toute la fenêtre, sa croix remonte à 4,8 px
   et son rembourrage redevient symétrique - relevé à 390 px de large. */
.gac-drawer__panel {
    width: 100%;
}
@media (min-width: 750px) {
    .gac-drawer__panel {
        width: min(400px, 95vw);
    }
}
@media (max-width: 749px) {
    .gac-drawer__panel:has( .gac-cart-empty ) .gac-drawer__close {
        top: 4.8px;
    }
    .gac-cart-empty__corps {
        padding-inline: 20px;
    }
}
.gac-cart-empty__cta,
.gac-drawer .gac-cart-empty__cta {
    margin-top: 12.8px;
    padding: 16px 32px;
    border-radius: 0;
    background: var(--gac-primary);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
}
.gac-drawer .gac-cart-empty__cta:hover {
    background: var(--gac-primary-dark);
    color: #fff;
}
/* La croix elle-même fait 13,6 px de côté chez la source (--icon-size-xs). */
.gac-drawer__close svg {
    display: block;
    width: 13.6px;
    height: 13.6px;
}

/* ============================================================
   Volet du panier rempli : la typographie de la source
   ============================================================
   Relevé sur svevelys.com le 26/08/2026, fenêtre 1280 x 900, panier à un
   article. La mise en page reste la nôtre - Alexandre la préfère - mais
   les corps, les interlignes et les couleurs sont ceux de la source.

   Notre échelle était en `em` et se composait de parent en parent : le
   nom d'article tombait à 12,25 px pour 16 chez elle, le prix à 11,64
   pour 14, la quantité à 11,27 pour 14. Les valeurs sont donc posées en
   pixels, comme la source les publie (--font-size--md: 1rem,
   --font-size--sm: .875rem, --line-height--body-loose: 1.6). */
.gac-drawer__title {
    font-family: 'Libre Baskerville', Georgia, serif;
    /* `.h4` chez la source : --font-size--h4 vaut 1.25rem et
       --line-height--display-loose vaut 1.2, soit 20 px sur 24. */
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: normal;
    text-transform: none;
    color: var(--gac-ink);
}
.gac-drawer .gac-cart-line__name,
.gac-drawer .gac-cart-line__name a {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 25.6px;
    color: var(--gac-ink);
}
.gac-drawer .gac-cart-line__variant,
.gac-drawer .gac-cart-line__price {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22.4px;
    /* La source pose ses textes secondaires à 70 % du noir, pas un gris. */
    color: rgba(0, 0, 0, .7);
}
.gac-drawer .gac-stepper__value {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22.4px;
    color: #333;
}
.gac-drawer .gac-cart-total {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 22.4px;
    color: var(--gac-ink);
}
/* Le total de la source n'est PAS gras : son `--font-weight-bold` vaut 400,
   l'Inter du thème n'ayant qu'une graisse. Et son MONTANT est en 18/18
   (`cart-totals__total-value`), le libelle « Total » restant en 14 -
   remesure au calcule le 29/08/2026. */
.gac-drawer .gac-cart-total strong {
    font-size: 18px;
    font-weight: 400;
    line-height: 18px;
}
.gac-drawer .gac-cart-shipping,
.gac-drawer .gac-cart-secure {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 22.4px;
    color: rgba(0, 0, 0, .7);
}
/* La mention de paiement securise n'est qu'une note de bas de volet : plus
   petite, plus claire et plus fine que le reste, et separee des cartes. */
.gac-drawer .gac-cart-secure {
    font-family: 'Helvetica Neue', 'Inter', Helvetica, Arial, sans-serif;
    font-size: 11.5px;
    line-height: 16px;
    font-weight: 300;
    letter-spacing: .01em;
    color: rgba(0, 0, 0, .45);
}
.gac-drawer .gac-cart-badges { margin-bottom: 14px; }
/* Le bouton de commande : 14 px sur 14, et surtout AUCUN arrondi - la
   source publie `button_border_radius_primary: 0`, et nos 2 px se
   voyaient contre le 0 du bouton « Continuer les achats » du panier vide. */
.gac-drawer .gac-cart-checkout,
.gac-cart-checkout {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: normal;
    border-radius: 0 !important;
}

/* La poubelle de la source : une cible de 44 px, le couvercle qui se
   soulève au survol et se repose au clic. Les deux tracés bougent
   séparément, c'est tout l'intérêt de son icône en deux morceaux. */
.gac-drawer .gac-cart-line__remove {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--gac-ink) !important;
    border-radius: 0 !important;
    font-size: 14px;
    line-height: 14px;
}
.remove-icon-top,
.remove-icon-bottom {
    transition: transform var(--dgc-mouv) ease-in-out;
}
/* La page panier partage la regle du volet : le meme geste, le meme glyphe,
   les memes nombres. `dgc-panier.js` y pose le SVG a deux traces du volet,
   parce que le bloc rend le sien en React et qu'un masque CSS d'une seule
   piece ne peut pas ouvrir son couvercle. */
.gac-cart-line__remove:hover .remove-icon-top,
.wc-block-cart-item__remove-link:hover .remove-icon-top {
    transform: translate(-1.5px, 1.5px) rotate(-15deg);
}
.gac-cart-line__remove:is(:hover, :active) .remove-icon-bottom,
.wc-block-cart-item__remove-link:is(:hover, :active) .remove-icon-bottom {
    transform: translateY(1.5px);
}

/* ============================================================
   Retrait d'une ligne, et le panier qui se vide
   ============================================================
   Deux animations distinctes chez la source, relevées dans son
   `styles.css` le 26/08/2026 :

   1. la ligne : le couvercle de la poubelle saute
      (`removeButtonClickedIconTop`), puis, après un délai d'une vitesse
      d'animation, la rangée se replie en deux vitesses (`removeRow`) ;
   2. le volet : si le panier devient vide, tout le contenu est échangé
      par une transition de vue - l'ancien recule et s'efface, le nouveau
      monte de 128 px en se dépliant, et le bouton noir garde sa place
      pendant que son libellé se fond de « Terminer ma commande » vers
      « Continuer les achats ».

   La source déclenche la seconde par un TYPE de transition de vue
   (`:active-view-transition-type(empty-cart-drawer)`). Le type n'est pas
   porté partout ; la classe posée sur `html` par gac-ui.js fait la même
   sélection et marche dès que `startViewTransition` existe. */
:root {
    /* Les deux ressorts de la source, recopiés tels quels. */
    --dgc-ressort-280-duree: .4648s;
    --dgc-ressort-280: linear(0, 0.0044, 0.0164 1.85%, 0.085 4.63%, 0.4571 14.81%, 0.575 18.52%, 0.6505, 0.7148 24.07%, 0.7849, 0.8393, 0.8809 35.18%, 0.9189, 0.9453 44.44%, 0.9662, 0.9793 55.55%, 0.9894 62.95%, 0.995 71.28%, 0.9982 82.39%, 0.9997 99.98%);
    --dgc-ressort-300-duree: .498s;
    --dgc-ressort-300: linear(0, 0.0033 0.81%, 0.027 2.42%, 0.0916 4.84%, 0.4745 15.32%, 0.6422 20.97%, 0.7175, 0.7789, 0.8283 30.64%, 0.876, 0.9111 38.71%, 0.941, 0.9611 48.39%, 0.9707, 0.978 54.84%, 0.9885 62.1%, 0.9949 70.97%, 0.9982 82.26%, 0.9997 100%);
}
.gac-cart-line.is-removing .remove-icon-bottom {
    transform: translateY(0);
}
.gac-cart-line.is-removing .remove-icon-top {
    animation: dgc-couvercle var(--dgc-mouv) ease-in-out forwards;
}
@keyframes dgc-couvercle {
    50%  { transform: translateY(-1.5px); }
    100% { transform: translate(0); }
}
/* La hauteur de départ est posée par le script : une hauteur `auto`
   ne s'anime pas, et la source lit la sienne dans `--row-height`. */
.gac-cart-line.is-removing {
    overflow: hidden;
    animation: dgc-replie-ligne calc(var(--dgc-mouv) * 2) ease-in-out forwards;
    animation-delay: var(--dgc-mouv);
}
@keyframes dgc-replie-ligne {
    0% {
        height: var(--dgc-hauteur-ligne);
    }
    100% {
        opacity: 0;
        height: 0;
        /* La rangée de la source n'a pas de rembourrage haut ; la nôtre si,
           et il faut le reprendre sans quoi la ligne garde 16 px de vide. */
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: 0;
        border-color: transparent;
    }
}

/* --- Le volet qui passe au panier vide ------------------------------- */
html.dgc-vt-panier-vide .gac-drawer__body {
    view-transition-name: dgc-panier-contenu;
}
html.dgc-vt-panier-vide .gac-drawer__close {
    view-transition-name: dgc-panier-croix;
}
html.dgc-vt-panier-vide .gac-cart-checkout,
html.dgc-vt-panier-vide .gac-cart-empty__cta {
    view-transition-name: dgc-panier-action;
}
html.dgc-vt-panier-vide .gac-cart-checkout > .button-text,
html.dgc-vt-panier-vide .gac-cart-empty__cta > .button-text {
    view-transition-name: dgc-panier-action-texte;
}
::view-transition-old(dgc-panier-contenu) {
    transform-origin: 50% 33%;
    animation: dgc-contenu-sortant var(--dgc-ressort-280-duree) var(--dgc-ressort-280) forwards;
}
::view-transition-new(dgc-panier-contenu) {
    transform-origin: top center;
    animation: dgc-contenu-entrant var(--dgc-ressort-280-duree) var(--dgc-ressort-280) forwards;
}
@keyframes dgc-contenu-sortant {
    to { scale: .92; opacity: 0; }
}
@keyframes dgc-contenu-entrant {
    0% { scale: 1.05; translate: 0 128px; filter: blur(1px); opacity: 0; }
}
::view-transition-old(dgc-panier-action),
::view-transition-new(dgc-panier-action) {
    height: 100%;
}
/* Le libellé ne s'étire pas avec le bouton : il garde sa taille et se
   fond, `object-fit: none` plus un débord d'un cadratin. */
::view-transition-old(dgc-panier-action-texte),
::view-transition-new(dgc-panier-action-texte) {
    height: 100%;
    object-fit: none;
    overflow: clip;
    overflow-clip-margin: 1em;
}
::view-transition-old(dgc-panier-action-texte) {
    animation: dgc-action-texte var(--dgc-mouv) ease-in-out reverse forwards;
}
::view-transition-new(dgc-panier-action-texte) {
    animation: dgc-action-texte var(--dgc-mouv) ease-in-out forwards;
}
@keyframes dgc-action-texte {
    0%  { filter: blur(3px); opacity: 0; }
    to  { filter: none; opacity: 1; }
}
::view-transition-group(dgc-panier-action),
::view-transition-group(dgc-panier-action-texte) {
    animation-duration: var(--dgc-ressort-300-duree);
    animation-timing-function: var(--dgc-ressort-300);
}

/* =========================================================================
   PAGE PANIER - le gabarit de la source, posé sur le bloc `woocommerce/cart`
   =========================================================================

   Relevé le 27/08/2026 sur `https://svevelys.com/cart`, panier de trois
   lignes, Chromium sans écran, douze largeurs (390 → 2000). Tous les nombres
   de cette section viennent de ce relevé ; aucun n'est estimé.

   À 1440 px :

     .cart-page          x40  w1400   grid  [952px 400px]  gap 0 48px
                         padding-top 24px, et le bord DROIT touche la fenêtre
     .cart-page__title   y134 h25     h1 Libre Baskerville 20/24 + pastille 24
     .cart-page__items   y175 margin-top 16
     ligne               grid [120px 1fr 1fr 96px], column-gap 14.4,
                         padding-bottom 24, margin-bottom 24,
                         border-bottom 1px rgb(0 0 0 / .06) - sauf la dernière
     visuel              120x150, object-fit cover, aucun arrondi
     titre de ligne      Inter 16/25.6, rgb(0 0 0 / .81), pas de soulignement,
                         margin-top -4.8 (la moitié de l'interligne, retirée)
     variantes           Inter 14/22.4, rgb(0 0 0 / .7), margin-top 2
     prix unitaire       Inter 14, rgb(0 0 0 / .7), margin-top 2
     compteur            105x36, filet 1px #dfdfdf, rayon 4, fond blanc à 78 %
     corbeille           44x44, glyphe 20x20, trait 1,5
     total de ligne      Inter 14/14, aligné à droite, en HAUT de la ligne
     récapitulatif       400px, fond #faf8f6, COLLANT (top 0),
                         padding 12.8px 40px 32px, gap 32
     filet du total      1px #dfdfdf, padding-top 20, margin-top 2
     bouton              320x52, noir, blanc, Inter 14, rayon 0, padding 16/32
     cartes              5 marques de 38x24, gouttière 8, centrées, 10 sous
                         le bouton

   Les deux bascules :

     - fenêtre 750 px : la colonne de droite apparaît, la page passe de
       « 100% - 32 » centrée à « marge gauche 40, bord droit collé » ;
     - COLONNE des lignes 750 px (donc fenêtre ~1210) : la quantité quitte sa
       propre colonne et passe sous le titre. C'est bien la largeur de la
       COLONNE qui décide, pas celle de la fenêtre - vérifié à 1199 (3 zones)
       et 1250 (4 zones), soit une colonne de 712 puis 762 px. D'où la
       requête de conteneur ci-dessous plutôt qu'une requête média.

   Pourquoi ces sélecteurs sont si longs : les feuilles du bloc panier
   écrivent `.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row`,
   soit [0,3,1]. Un `body.woocommerce-cart .wc-block-cart-items__row` [0,2,1]
   pose bien son `display: grid` - parce que le bloc le déclare aussi - et
   perd en silence ses `grid-template-columns`. Le préfixe
   `body.woocommerce-cart .wc-block-cart.wc-block-cart` porte chaque règle à
   [0,4,1] : la valeur est alors celle qu'on écrit, pas celle qu'on croit
   écrire. La classe est doublée à dessein - à [0,3,1] on est À ÉGALITÉ avec
   les feuilles du bloc, et c'est alors l'ordre de chargement qui tranche,
   dans un sens pour une feuille et dans l'autre pour la suivante : les
   colonnes de la ligne passaient, la corbeille restait à 24 px soulignée.

   Ce qui n'est PAS de la source, et pourquoi :

     - « Ajouter des codes promo », « Sous-total » et « Livraison suivie » :
       la source n'a rien de tout cela (son tunnel Shopify calcule les frais
       plus tard). Alexandre les garde, ils prennent la typographie du
       récapitulatif et le même filet.
     - le titre « Cart » n'est pas traduit : c'est celui de la SOURCE, non
       traduit chez elle non plus. Même décision que pour le panier vide. Le
       bandeau « You may also like », lui, est passé en français le
       06/09/2026 (« Vous aimerez aussi », pas de base 014).
   ========================================================================= */

/* -- Le conteneur : deux colonnes, et le bord droit collé à la fenêtre ---- */

/* La marge droite de `.col-full` est annulée jusqu'au bord de la fenêtre.
   `50% - 50vw` vaut exactement moins la gouttière droite, quelle que soit la
   largeur, parce que `.col-full` est centrée. Le `width: auto` est
   indispensable : le bloc se déclare `width: 100%`, et une marge négative sur
   une largeur figée ne déplace que la boîte, elle ne l'élargit pas. Le débord
   éventuel de la largeur de l'ascenseur est coupé par l'`overflow-x: clip`
   posé en tête de cette feuille. */
@media (min-width: 750px) {
    body.woocommerce-cart .wp-block-woocommerce-cart {
        width: auto;
        margin-right: calc(50% - 50vw);
    }
}

body.woocommerce-cart .wc-block-cart.wc-block-cart {
    display: grid;
    /* La colonne de droite fait 400 px de contenu PLUS ce que la page gagne
       en marge au-delà de 1440 : 400 à 1440, 440 à 1600, 640 à 2000. */
    grid-template-columns: minmax(0, 1fr) calc(400px + max(0px, 100vw - 100% - 40px));
    column-gap: 48px;
    align-items: start;
    /* 20 px sous 990, 24 au-delà : c'est la bascule d'espacement du thème de
       la source (`--gap-scale`), et non celle de la mise en page à 750. */
    padding-top: 20px;
    margin: 0;
}

@media (min-width: 990px) {
    body.woocommerce-cart .wc-block-cart.wc-block-cart {
        padding-top: 24px;
    }
}

/* Le fond crème occupe TOUTE la hauteur de la colonne, pendant que le
   récapitulatif, lui, reste collant en haut. Deux éléments dans la même case
   de grille : un pseudo qui s'étire, le vrai bloc qui colle. */
body.woocommerce-cart .wc-block-cart::before {
    content: '';
    grid-area: 1 / 2 / 2 / 3;
    align-self: stretch;
    background: var(--gac-creme);
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart__main {
    grid-area: 1 / 1 / 2 / 2;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0;
    /* La bascule des lignes se lit sur CETTE largeur, pas sur la fenêtre. */
    container-type: inline-size;
    container-name: dgc-panier;
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart__sidebar {
    grid-area: 1 / 2 / 2 / 3;
    align-self: start;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    /* Le bloc déclare `width: 35%` sur son aparté : dans une grille, cela
       rétrécit la colonne du récapitulatif au tiers de sa case. */
    width: auto;
    min-width: 0;
    max-width: none;
    /* Le contenu du récapitulatif fait 320 px À TOUTE largeur : au-delà de
       1440 c'est le rembourrage DROIT qui absorbe le débord, la colonne
       s'élargit mais le bouton ne bouge pas. `100%` d'un rembourrage se lit
       sur la case de grille, donc sur la largeur de la colonne. */
    /* 37,8 px en haut, pas 12,8 : chez la source le recapitulatif est decale
       de 25 px sous le haut de son panneau, avant meme son propre
       rembourrage. Le filet du total tombe alors a 40 du haut du panneau et
       le Total a 61, comme elle. */
    padding: 37.8px max(40px, calc(100% - 360px)) 32px 40px;
    margin: 0;
    background: none;
    border: 0;
}

/* -- Le titre et sa pastille -------------------------------------------- */

body.woocommerce-cart .wc-block-cart.wc-block-cart .dgc-panier__titre {
    display: inline-flex;
    align-items: center;
    gap: 11.2px;
    margin: 0;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    color: var(--gac-ink);
    text-transform: none;
    letter-spacing: normal;
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .dgc-panier__pastille {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgb(0 0 0 / .1);
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .dgc-panier__compte {
    font-family: Inter, -apple-system, 'Helvetica Neue', sans-serif;
    font-size: 13px;
    line-height: 13px;
    color: var(--gac-ink);
}

/* -- Le tableau des lignes ---------------------------------------------- */

body.woocommerce-cart .wc-block-cart.wc-block-cart table.wc-block-cart-items {
    display: block;
    width: 100%;
    margin: 16px 0 0;
    padding: 0;
    border: 0;
    border-collapse: collapse;
    background: none;
}

body.woocommerce-cart .wc-block-cart.wc-block-cart table.wc-block-cart-items > caption,
body.woocommerce-cart .wc-block-cart.wc-block-cart table.wc-block-cart-items > thead {
    display: none;
}

body.woocommerce-cart .wc-block-cart.wc-block-cart table.wc-block-cart-items > tbody {
    display: block;
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-items__row {
    display: grid;
    /* Sous 750 px de colonne : visuel 15 %, détails, total. La quantité
       descend sous les détails, comme chez la source. */
    grid-template-columns: 15% minmax(0, 1fr) 96px;
    column-gap: 14.4px;
    align-items: start;
    margin: 0 0 24px;
    padding: 0 0 24px;
    border: 0;
    border-bottom: 1px solid rgb(0 0 0 / .06);
    background: none;
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-items__row:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__image,
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__product,
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__total {
    display: block;
    width: auto;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    vertical-align: top;
}

/* Le visuel : 4/5, coupé, sans arrondi. */
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__image a,
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__image img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: .8;
    object-fit: cover;
    border-radius: 0;
}

/* Les trois blocs de la colonne des détails, dans l'ordre de la source :
   titre, variantes, prix unitaire. Le bloc les sort dans un autre ordre
   (titre, prix, variantes) : c'est `order` qui remet la suite. */
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Le bloc pose 4 px entre ses lignes ; la source n'en pose aucun et
       espace par les marges de 2 px de chaque bloc. */
    row-gap: 0;
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-product-name {
    order: 1;
    margin: -4.8px 0 0;
    font-family: Inter, -apple-system, 'Helvetica Neue', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 25.6px;
    color: var(--gac-ink);
    text-decoration: none;
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-product-name:hover,
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-product-name:focus {
    text-decoration: none;
    color: var(--gac-ink);
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-product-metadata {
    order: 2;
    margin: 2px 0 0;
    font-size: 14px;
    line-height: 22.4px;
    color: rgb(0 0 0 / .7);
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-product-metadata .wc-block-components-product-details {
    margin: 0;
    font-size: 14px;
    line-height: 22.4px;
    color: rgb(0 0 0 / .7);
}

/* La source n'écrit que la VALEUR de l'option, et sépare deux valeurs par une
   virgule et une espace. Le bloc écrit « Taille: 40cm / Couleur: Noir ». */
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-product-details__name {
    display: none;
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-product-details [aria-hidden="true"] {
    font-size: 0;
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-product-details [aria-hidden="true"]::after {
    content: ', ';
    font-size: 14px;
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__prices {
    order: 3;
    margin: 2px 0 0;
    font-size: 14px;
    line-height: 22.4px;
    color: rgb(0 0 0 / .7);
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__prices .wc-block-components-product-price,
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__prices .wc-block-components-formatted-money-amount {
    font-size: 14px;
    font-weight: 400;
    line-height: 22.4px;
    color: rgb(0 0 0 / .7);
}

/* -- Compteur et corbeille ---------------------------------------------- */

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__quantity {
    order: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    margin: 0;
    padding: 0;
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-quantity-selector {
    display: flex;
    align-items: center;
    width: 105px;
    min-width: 0;
    max-width: none;
    height: 36px;
    margin: 0;
    border: 1px solid #dfdfdf;
    border-radius: 4px;
    background: rgb(255 255 255 / .78);
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-quantity-selector::after {
    content: none;
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-quantity-selector__button {
    order: 1;
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 4px 0 0 4px;
    background: none;
    /* Le glyphe est celui de la source (trait de 1,5 dans un cadre de 14) :
       le signe typographique du bloc est masqué et remplacé par le tracé. */
    font-size: 0;
    color: #333;
    opacity: 1;
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-quantity-selector__button--plus {
    order: 3;
    border-radius: 0 4px 4px 0;
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-quantity-selector__button::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    margin: 0 auto;
    background: currentColor;
    -webkit-mask: var(--dgc-panier-moins) no-repeat center / 14px 14px;
    mask: var(--dgc-panier-moins) no-repeat center / 14px 14px;
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-quantity-selector__button--plus::before {
    -webkit-mask-image: var(--dgc-panier-plus);
    mask-image: var(--dgc-panier-plus);
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-quantity-selector__input {
    order: 2;
    width: 33px;
    min-width: 0;
    height: 24px;
    padding: 1px 2px;
    border: 0;
    background: none;
    box-shadow: none;
    font-family: Inter, -apple-system, 'Helvetica Neue', sans-serif;
    font-size: 14px;
    line-height: 22.4px;
    color: #333;
    text-align: center;
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__remove-link {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0;
    color: var(--gac-ink);
    text-decoration: none;
}

/* La corbeille est celle de la source, posee par `dgc-panier.js` (deux traces,
   pour que le couvercle s'ouvre au survol). Tant qu'elle n'est pas la - script
   pas encore execute, ou garde en cache par un navigateur -, on ne montre PAS
   celle du bloc : c'est une poubelle PLEINE, d'un tout autre dessin, et la
   voir arriver puis changer est pire que de l'attendre. */
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__remove-link svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* `cart.css` du bloc remplit le glyphe : il pose `fill: currentcolor` sur le
   SVG de ce bouton. Sur l'icone du bloc, qui est PLEINE, cela ne se voit pas ;
   sur celle de la source, qui n'est qu'un TRACE, cela peint tout l'interieur
   en noir - une poubelle pleine avec un couvercle de travers. Le remplissage
   revient a `none`, le trait reste la couleur du texte. */
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__remove-link svg,
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__remove-link svg path {
    fill: none;
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__remove-link svg path {
    stroke: currentColor;
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__remove-link svg:not(:has(.remove-icon-top)) {
    visibility: hidden;
}

/* -- Le total de la ligne ------------------------------------------------ */

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__total {
    text-align: right;
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__total .wc-block-components-product-price,
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__total .wc-block-components-formatted-money-amount {
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    color: var(--gac-ink);
}

/* -- La colonne des lignes au-dessus de 750 px de LARGE ------------------ */

@container dgc-panier (min-width: 750px) {
    body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-items__row {
        grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr) 96px;
    }

    /* La cellule des détails couvre les deux colonnes du milieu, et sa grille
       interne les redécoupe : détails à gauche, quantité à droite. Les deux
       moitiés tombent alors exactement sur les 346,4 px de la source. */
    body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__product {
        grid-column: 2 / 4;
    }

    body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__wrap {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 14.4px;
        align-items: start;
    }

    body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-product-name     { grid-area: 1 / 1 / 2 / 2; }
    body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-product-metadata { grid-area: 2 / 1 / 3 / 2; }
    body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__prices           { grid-area: 3 / 1 / 4 / 2; }
    body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__quantity         { grid-area: 1 / 2 / 4 / 3; }
}

/* -- Le récapitulatif ---------------------------------------------------- */

/* La source n'écrit pas de titre au-dessus de son total. */
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart__totals-title {
    display: none;
}

/* Aucun bouton de paiement express chez la source
   (settings_data.json : show_accelerated_checkout_buttons false). Le bloc
   est masqué plein ou vide : avec des clés Stripe qui l'autorisent, il
   dessinait un bouton Link vert et un filet « OU » au-dessus du bouton noir
   (pile locale, 06/09/2026 ; la production ne l'avait pas). */
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart__payment-options {
    display: none;
}

/* Le filet du total : UN seul, en tete du recapitulatif, comme la source
   (`1px solid rgb(223 223 223)`, 20 px de rembourrage haut, 2 px de marge).

   Il etait pose sur le bloc des sous-totaux, qui est VIDE tant que l'adresse
   n'est pas saisie - et un bloc vide ne peint pas sa bordure. Le porter par le
   recapitulatif lui-meme le rend independant de ce que WooCommerce decide
   d'afficher dedans : sous-total, livraison, ou rien du tout. */
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block {
    display: flex;
    flex-direction: column;
    padding: 20px 0 0;
    margin: 2px 0 0;
    border: 0;
    border-top: 1px solid #dfdfdf;
}

/* Remise à zéro des enveloppes de total. ATTENTION à l'ordre : le pli des
   codes promo PORTE lui aussi cette classe, et une règle de même poids écrite
   plus bas gagne. C'est ce qui a mangé son rembourrage bas au premier essai -
   le total remontait se coller au pli, sans filet entre les deux. */
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper {
    padding: 0;
    margin: 0;
    border: 0;
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper::after {
    content: none;
}

/* Le pli des codes promo, en tête, sans cadre ni fond. */
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-coupon-form-block {
    padding: 0 0 20px;
    margin: 0;
    border: 0;
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-totals-coupon .wc-block-components-panel__button {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    margin: 0;
    font-family: Inter, -apple-system, 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22.4px;
    color: var(--gac-ink);
    text-align: left;
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-totals-coupon .wc-block-components-panel__button-icon {
    order: 2;
    margin-left: auto;
    fill: var(--gac-ink);
}

/* Le filet du total : celui de la source, remonté au-dessus des trois lignes
   puisque la copie en a deux de plus. */


body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-item {
    padding: 0;
    margin: 0 0 8px;
    font-family: Inter, -apple-system, 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22.4px;
    color: var(--gac-ink);
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-item__label,
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-item__value,
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-item__value * {
    font-size: 14px;
    font-weight: 400;
    line-height: 22.4px;
    color: var(--gac-ink);
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-footer-item {
    /* 4,8 px sous le total, et non les 8 du bloc : c'est l'ecart que la source
       laisse entre sa derniere ligne et le bouton (4,8 + 32 de gouttiere).
       Rien au-dessus : quand il y a un sous-total et une livraison, ce sont
       leurs 8 px de marge basse qui les separent du total. */
    margin: 0 0 4.8px;
}

/* Tant que l'adresse n'est pas saisie, WooCommerce ne rend NI sous-total NI
   livraison : le bloc qui porte le filet est vide, et le total flottait sans
   sa règle. Elle passe alors sur le bloc suivant. */


/* La source n'ajoute aucune note sous son total ; la copie garde « Frais de
   port offerts », la ligne du volet (mini-cart.php .gac-cart-shipping :
   Inter 14 / 22,4, noir a 70 %, collee sous le total), decision d'Alexandre
   du 06/09/2026. Le texte du bloc est ramene a celui du volet par
   dgc_panier_libelles (inc-panier.php). */
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__description {
    display: block;
    margin: 0;
    padding: 0;
}
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__description p {
    margin: 0;
    font-family: Inter, -apple-system, 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22.4px;
    color: rgb(0 0 0 / .7);
}

/* -- Le bouton et les cartes -------------------------------------------- */

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart__submit {
    display: block;
    position: static;
    padding: 0;
    margin: 0;
    background: none;
    box-shadow: none;
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart__submit-container {
    padding: 0;
    margin: 0;
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart__submit-button {
    display: grid;
    place-items: center;
    /* 52 px de haut, bordure comprise, et le contenu centré : la source pose
       une hauteur EXPLICITE. Ses 16 + 22,4 + 16 feraient 54,4 - le libellé
       déborde de 2,4 px de la boîte de contenu, et `align-content: center` le
       recentre. Sans la hauteur, notre bouton faisait 54. */
    box-sizing: border-box;
    align-content: center;
    width: 100%;
    height: 52px;
    min-height: 0;
    padding: 16px 32px;
    border: 0;
    border-radius: 0;
    background: #000;
    font-family: Inter, -apple-system, 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22.4px;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    color: #fff;
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart__submit-button:hover,
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart__submit-button:focus {
    background: var(--gac-primary-dark);
    color: #fff;
    text-decoration: none;
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .dgc-panier__paiement {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .dgc-panier__paiement li {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

body.woocommerce-cart .wc-block-cart.wc-block-cart .dgc-panier__paiement svg {
    display: block;
    width: 38px;
    height: 24px;
}

/* La même note qu'au bas du volet, sous les cartes : petite, claire et fine. */
body.woocommerce-cart .wc-block-cart.wc-block-cart .dgc-panier__securise {
    margin: 14px 0 0;
    text-align: center;
    font-family: 'Helvetica Neue', 'Inter', Helvetica, Arial, sans-serif;
    font-size: 11.5px;
    line-height: 16px;
    font-weight: 300;
    letter-spacing: .01em;
    color: rgba(0, 0, 0, .45);
}

/* -- Le bouton pendant la navigation et pendant une mise à jour ---------- */

/* Au clic le bloc masque le libellé et fait tourner un anneau dans le bouton
   jusqu'à la réponse de la page de caisse (cart.css
   .wc-block-cart__submit-button--loading). Le bouton de la source est un
   simple submit de formulaire : rien n'y bouge pendant que le navigateur
   navigue (cart-summary.liquid, relevé le 06/09/2026). */
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart__submit-button--loading .wc-block-components-button__text { visibility: visible; }
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart__submit-button .wc-block-components-spinner { display: none; }
/* Pendant une mise à jour le bloc passe le bouton en aria-disabled et son
   texte à 50 % : la source ne touche pas à son bouton (cart-items-disabled
   ne coupe que le pointeur des lignes). */
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart__submit-button[aria-disabled="true"],
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart__submit-button[aria-disabled="true"] .wc-block-components-button__text,
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart__submit-button:disabled {
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
}

/* -- Retrait d'une ligne (component-cart-items.js removeRow) ------------- */

/* La ligne s'affaisse (2 x --animation-speed après un retard d'une vitesse)
   et le couvercle rebondit une fois : les mêmes images-clés que le volet
   (dgc-replie-ligne, dgc-couvercle). L'attribut est posé au clic par
   dgc-panier.js ; un attribut et non une classe, parce que React réécrit le
   className de la ligne dès qu'il la marque is-disabled. */
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-items__row[data-dgc-retrait] {
    overflow: hidden;
    animation: dgc-replie-ligne calc(var(--dgc-mouv) * 2) ease-in-out forwards;
    animation-delay: var(--dgc-mouv);
}
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-items__row[data-dgc-retrait] .remove-icon-bottom { transform: translateY(0); }
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-items__row[data-dgc-retrait] .remove-icon-top {
    animation: dgc-couvercle var(--dgc-mouv) ease-in-out forwards;
}

/* -- Chatoiement pendant la requête (text-component de base.css) --------- */

/* Dégradé -85deg, texte à --opacity-50 et clair à --opacity-10 sur
   --color-foreground-rgb (0 0 0), balayage --shimmer-speed 1,25 s linéaire,
   couleur et copie en fondu de --animation-speed-slow 0,2 s. Posé par
   dgc-panier.js : `data-dgc-valeur` porte le montant à chatoyer,
   `data-dgc-shim` le temps de la requête, sur le total de la ligne changée ;
   le total du panier, lui, est remplacé par le bloc par un squelette gris le
   temps de la requête : il reçoit le dernier montant connu et chatoie tant
   qu'il existe. Les sélecteurs nomment les deux éléments en entier : la
   règle du total de ligne plus haut (cinq classes) pose la couleur sur le
   montant intérieur, et une règle plus courte perdait. */
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__total .wc-block-components-product-price,
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-skeleton__element {
    --dgc-shim-texte: rgb(0 0 0 / .5);
    --dgc-shim-clair: rgb(0 0 0 / .1);
    position: relative;
}
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__total .wc-block-components-product-price {
    display: block;                                 /* text-component : une boîte pour le ::after */
}
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__total .wc-block-components-product-price .wc-block-components-formatted-money-amount,
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value .wc-block-components-formatted-money-amount {
    transition: color var(--dgc-mouv-lent) ease;    /* --animation-speed-slow */
}
/* text-component::after : la copie du montant, transparente au repos, qui
   chatoie une fois `shimmer` posé et s'efface en fondu quand il tombe. */
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__total .wc-block-components-product-price::after,
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-skeleton__element::after {
    content: attr(data-dgc-valeur);
    position: absolute;
    inset: 0;
    color: transparent;
    opacity: 0;
    transition: opacity var(--dgc-mouv-lent) ease-in-out;
    pointer-events: none;
    background-image: linear-gradient(-85deg, var(--dgc-shim-texte) 10%, var(--dgc-shim-clair) 50%, var(--dgc-shim-texte) 90%);
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 200% 100%;
    background-position: 100% 0;
    transform: none;                                /* le bloc glisse son ::after de -100 % */
    text-align: inherit;
}
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__total .wc-block-components-product-price[data-dgc-shim] .wc-block-components-formatted-money-amount,
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-skeleton__element {
    color: transparent;
}
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__total .wc-block-components-product-price[data-dgc-shim]::after,
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-skeleton__element::after {
    opacity: 1;
    animation: dgc-chatoie 1.25s infinite linear;   /* --shimmer-speed */
}
/* La nouvelle valeur revient en fondu (text-component : la couleur repart
   de transparent quand le chatoiement tombe). `data-dgc-fondu` est posé à
   l'arrivée du montant et retiré à l'image suivante. */
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__total .wc-block-components-product-price[data-dgc-fondu] .wc-block-components-formatted-money-amount,
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value[data-dgc-fondu] .wc-block-components-formatted-money-amount {
    color: transparent;
    transition: none;
}
/* Le squelette du bloc : plus de boîte grise ni de débordement caché, la
   typographie du montant (14 / 22,4 Inter 400, comme la ligne Total) ; le
   ::before tient la largeur, le ::after chatoie dessus. */
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-skeleton__element {
    display: block;
    width: auto !important;                         /* le bloc écrit 45px en ligne */
    height: auto !important;                        /* et 1em */
    margin: 0;
    padding: 0;
    overflow: visible;
    background: none;
    border-radius: 0;
    font-family: Inter, -apple-system, 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22.4px;
    text-align: end;
}
body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-skeleton__element::before {
    content: attr(data-dgc-valeur);
}
@keyframes dgc-chatoie {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
    body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-item__total .wc-block-components-product-price[data-dgc-shim]::after,
    body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-skeleton__element::after,
    body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-items__row[data-dgc-retrait],
    body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart-items__row[data-dgc-retrait] .remove-icon-top { animation: none; }
}

/* -- Avant que React monte : la page elle-même, imprimée par PHP --------- */

/* cart.css peint les enveloppes vides du bloc en dalles grises tant que la
   racine est `.is-loading` (15em sur les lignes, 200px sur le récapitulatif,
   colonnes 65/35) : un bloc gris flashait pendant les ~300 ms avant le
   montage de React, puis tout sautait en place ; et le squelette du bloc
   restait 2 s de plus (inc-panier.php). La source n'a aucun loader sur cette
   page : /cart arrive rendu, rien n'y bouge ensuite. inc-panier.php imprime
   donc, juste après le bloc, le balisage même que React va monter, rempli
   depuis le panier serveur (dgc_panier_prerendu) : les règles ci-dessus le
   posent exactement comme le vrai, et la relève ne change rien à l'écran
   (diff de pixels à 0 sur Chromium et WebKit, 1440 et 390, le 06/09/2026).
   La copie part dès que le bloc tient son contenu, ou lâche `.is-loading`. */
body.woocommerce-cart .wp-block-woocommerce-cart.is-loading > .wp-block-woocommerce-filled-cart-block:not(.wc-block-cart) { display: none; }
body.woocommerce-cart .wp-block-woocommerce-cart.is-loading.dgc-panier--vide > .wp-block-woocommerce-empty-cart-block { display: block; }
body.woocommerce-cart .wp-block-woocommerce-cart:not(.is-loading) + .dgc-panier-prerendu,
body.woocommerce-cart .wp-block-woocommerce-cart:has(.wc-block-cart) + .dgc-panier-prerendu { display: none; }
/* La copie est un frère du bloc et joue ses deux rôles à la fois : elle
   reçoit les marges de la RACINE du bloc (34 px sous elle, voir plus bas, et
   la marge droite négative de « Le conteneur » au-dessus de 750), que la
   règle `.wc-block-cart.wc-block-cart { margin: 0 }` lui retirait sinon. Et
   la racine, vide tant qu'elle charge, ne garde pas ses 34 px : le bandeau
   sous le panier serait descendu de 34 px puis remonté au montage. */
body.woocommerce-cart .wc-block-cart.wc-block-cart.dgc-panier-prerendu {
    margin: 0 0 34px;
}
body.woocommerce-cart .wp-block-woocommerce-cart.is-loading:not(.dgc-panier--vide) {
    margin-bottom: 0;
}
@media (min-width: 750px) {
    body.woocommerce-cart .wc-block-cart.wc-block-cart.dgc-panier-prerendu {
        width: auto;
        margin-right: calc(50% - 50vw);
    }
}

/* -- Une seule colonne sous 750 px -------------------------------------- */

@media (max-width: 749px) {
    body.woocommerce-cart .wc-block-cart.wc-block-cart {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
    }

    body.woocommerce-cart .wc-block-cart::before {
        content: none;
    }

    body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart__main {
        grid-area: auto;
    }

    body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart__sidebar {
        grid-area: auto;
        position: static;
        /* 18 px sous les badges de paiement : avec les 48 px du haut de
           `.dgc-reco`, ca fait les 66 px que la source laisse entre eux et le
           titre « Vous aimerez aussi » (releve a 390 px le 29/08/2026 ; nous
           etions a 80). */
        padding: 12.8px 0 18px;
    }

    /* Sous 750 px la source grossit la VALEUR du total seule (18/18, son
       jeton --font-size--lg) ; le libellé « Total » reste en 14/22,4 et la
       valeur redescend à 14 au-dessus de 750. Relevé au style calculé sur
       svevelys.com/cart à 390 et 1440 px, le 29/08/2026. */
    body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
    body.woocommerce-cart .wc-block-cart.wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value * {
        font-size: 18px;
        line-height: 18px;
    }
}

/* -- « You may also like », sous le panier ------------------------------ */

/* La source la sert pleine largeur SOUS le panier, dans les deux états :
   panier vide et panier rempli. Une seule section les couvre donc tous les
   deux (voir scripts/dgc-panier-reco.php) - deux sections auraient divergé
   au premier correctif. */
/* La source ne met AUCUN nuancier sur les cartes du bandeau « Vous aimerez
   aussi » du panier, ni sur la grille de la 404 (releve du 29/08/2026).
   Hors du contexte `.woocommerce`, les notres rendaient d'ailleurs en
   boutons noirs de 66 px, sans style. */
.dgc-reco .gac-loop-swatches,
.dgc-404-produits .gac-loop-swatches {
    display: none;
}

/* Sous 750 la grille de la 404 se cale sur la marge de page de 16 px, comme
   chez la source (cartes a x16, 173 px de large) - le col-full de Storefront
   la laissait a 36 px du bord, cartes de 153. Releve du 29/08/2026. */
@media (max-width: 749px) {
    .dgc-404-page .col-full {
        margin-left: 16px;
        margin-right: 16px;
        width: auto;
    }
}

.dgc-reco {
    padding: 48px 0;
}

.dgc-reco__tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 28px;
}

.dgc-reco__titre {
    margin: 0;
}

/* Le lien porte `gac-voir-tout`, la classe que le site emploie deja sur
   l'accueil : il herite donc de SON dessin et de SON survol - noir plein, sans
   soulignement. Une seconde regle ecrite ici le faisait passer au VERT au
   survol, parce que la regle des liens de paragraphe
   (`p a:hover { color: var(--dgc-vert-survol) }`) reprenait la main. Une meme
   piece, une seule regle : c'est ce qui garde les pages coherentes.

   Seule la position lui est propre : sur l'accueil le lien se remonte sous le
   titre par une marge negative, ici il est deja dans une rangee flex. */
.dgc-reco__tete .gac-voir-tout {
    margin: 0;
    text-align: right;
}

/* La carte, relevée sur la source : 334x489, gouttière interne de 4 px,
   visuel 334x418 (4/5), titre Inter 14/22,4 en 400, prix Inter 12/14,4 en
   500, le tout aligné à gauche.

   Trois pièges, tous payés ici :

   1. le prix hérite d'un `margin: 0 auto`. Dans une carte en colonne flex,
      une marge automatique sur l'axe transversal RETIRE l'étirement et CENTRE
      la boîte : le texte était bien aligné à gauche, dans une boîte de 54 px
      posée au milieu de la carte. C'est la marge qu'il faut reprendre, pas
      l'alignement ;
   2. la carte porte une BORDURE transparente de 8 px à gauche et à droite -
      c'est la gouttière du bloc de WooCommerce. Elle rognait 16 px sur chaque
      visuel (318 au lieu de 334) sans apparaître dans aucun rembourrage ;
   3. les marges basses du visuel (12), de l'image (1,618em) et du titre
      (0,54em) viennent de règles à [0,3,0] et [0,2,2] : les remises à zéro
      déjà écrites plus haut, à [0,1,0], ne les voyaient pas. D'où le
      sélecteur en quatre classes. */
.entry-content .dgc-reco .wc-block-grid__products .wc-block-grid__product {
    border: 0;
    text-align: left;
}

.entry-content .dgc-reco .wc-block-grid__product .wc-block-grid__product-link {
    display: block;
}

.entry-content .dgc-reco .wc-block-grid__product .wc-block-grid__product-image {
    margin: 0 0 4px;
}

.entry-content .dgc-reco .wc-block-grid__product .wc-block-grid__product-image img {
    margin: 0;
}

.entry-content .dgc-reco .wc-block-grid__product .wc-block-grid__product-title {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 22.4px;
    text-align: left;
}

.entry-content .dgc-reco .wc-block-grid__product .wc-block-grid__product-price {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 14.4px;
    text-align: left;
}

/* La grille servie est un code court `[products]` : ce sont les cartes de
   boucle du thème, pas celles du bloc. Leur typographie a été relevée sur une
   page de COLLECTION (titre en 500, prix en 14) ; sur le panier la source
   écrit le titre en 400 et le prix en 12/500. Un relevé vaut pour le gabarit
   où il a été fait - l'écart se corrige donc ICI, sans toucher aux
   collections. */
.entry-content .dgc-reco ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px;
    font-weight: 400;
    line-height: 22.4px;
}

.entry-content .dgc-reco ul.products li.product .price {
    font-size: 12px;
    font-weight: 500;
    line-height: 14.4px;
}

/* Deux colonnes sous 750, comme la source (deux cartes de 175 sur une page de
   358, gouttière de 8). La règle générale de grille du thème,
   `.woocommerce ul.products { grid-template-columns: repeat(4, …) }`, est
   écrite SANS requête média et APRÈS celle du téléphone : à égalité de poids
   c'est la dernière qui gagne, et la grille restait à quatre colonnes de
   85 px. On la reprend ici pour la seule section du panier. */
@media (max-width: 749px) {
    .entry-content .dgc-reco ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 8px;
    }
}

/* Les trois glyphes du panier, repris CARACTÈRE POUR CARACTÈRE des fragments
   de la source (`cart-items__remove`, `quantity-minus`, `quantity-plus`).
   Seule substitution : `stroke-width="var(--icon-stroke-width)"` par sa
   valeur CALCULÉE sur la boutique, 1,5 - le thème publie 1px dans ses
   fichiers, la page la surcharge à 1.5px, et c'est la page qui gagne.
   Ils servent de masque : la couleur reste celle du texte. */
:root {
    --dgc-panier-moins: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M2.75 7H11.25'/%3E%3C/svg%3E");
    --dgc-panier-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M2.75 7H11.25'/%3E%3Cpath d='M7 2.75L7 11.25'/%3E%3C/svg%3E");
}

/* ============================================================
   LE PANNEAU DE RECHERCHE
   Recopie de `search-modal` de la source, relevee le 27/08/2026 sur
   svevelys.com a 1440 et a 390 px : balisage, geometrie, couleurs,
   animations d'ouverture, de fermeture, d'arrivee et de sortie des
   resultats.

   Les valeurs sont ecrites en pixels, jamais dans le jeton `rem` de la
   source : notre base `rem` n'est pas forcement la sienne, et un nombre
   juste chez elle deviendrait faux ici. Le nom du jeton d'origine est en
   commentaire a cote, pour qu'une passe suivante puisse le reverifier.
   ============================================================ */

.dgc-search {
    /* Les jetons d'Horizon dont ce composant depend, resolus au calcule
       sur la source. `--product-corner-radius` et `--card-corner-radius`
       sont des REGLAGES de la boutique, poses en style en ligne sur
       `predictive-search-component` : 0 et 4 px ici. */
    --dgc-s-radius: 14px;                   /* --style-border-radius-popover */
    --dgc-s-radius-input: 4px;              /* --style-border-radius-inputs */
    --dgc-s-trait: rgb(0 0 0 / .06);        /* --color-border */
    --dgc-s-fond: #fff;                     /* --color-background */
    --dgc-s-encre: rgb(0 0 0 / .81);        /* --color-foreground */
    --dgc-s-carte-fond: rgb(0 0 0 / .05);   /* --card-bg-hover */
    --dgc-s-carte-trait: rgb(0 0 0 / .3);   /* --card-border-hover */
    --dgc-s-produit-radius: 0px;            /* --product-corner-radius */
    --dgc-s-carte-radius: 4px;              /* --card-corner-radius */
    --dgc-s-modal-h: 65dvh;                 /* --modal-max-height */
    /* « Approx set the top so when the content is at max height, the modal
       is centered » : le commentaire est de la source, la formule aussi. */
    --dgc-s-modal-top: calc(50dvh - var(--dgc-s-modal-h) / 2 - 32px);

    padding: 0;
    border: 0;
    margin-inline: auto;
    background: var(--dgc-s-fond);
    color: var(--dgc-s-encre);
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    box-shadow: 0 4px 20px rgb(0 0 0 / .15);    /* --shadow-popover */
    transform-origin: bottom center;
}

/* Un `<dialog>` ferme est `display: none` par la feuille du navigateur ;
   ouvert, la source le passe en `flex`. */
.dgc-search[open] {
    display: flex;
}

@media screen and (min-width: 750px) {
    .dgc-search {
        /* `--modal-width: 66dvw`, plafonne par `max-width:
           var(--normal-content-width)`, soit 42rem = 672 px. Le plafond
           est ce qui decide a partir de 1019 px de large. */
        width: 66dvw;
        max-width: 672px;
        margin-block-start: var(--dgc-s-modal-top);
        border-radius: var(--dgc-s-radius);
        overflow: hidden;
    }
}

/* Sous la bascule le panneau prend toute la fenetre, sans arrondi et sans
   voile : `.dialog-modal { height: 100dvh; width: 100dvw }` plus
   `.search-modal__content::backdrop { display: none }`. */
@media screen and (max-width: 749px) {
    .dgc-search {
        width: 100dvw;
        height: 100dvh;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }
    .dgc-search::backdrop {
        display: none;
    }
}

/* --- L'ouverture et la fermeture ------------------------------------- */

/* Elle monte de 20 px en fondu, en 300 ms, et repart vers le bas en 200 ms.
   L'assombrissement du fond n'est pas un voile pose par-dessus : c'est un
   `backdrop-filter: brightness()` sur le `::backdrop`, plus 15 % de noir. */
.dgc-search[open] {
    animation: dgc-search-entree 300ms var(--dgc-mouv-quad) forwards;
}
.dgc-search.is-closing {
    animation: dgc-search-sortie 200ms var(--dgc-mouv-quad) forwards;
}
.dgc-search::backdrop {
    background: rgb(0 0 0 / .15);           /* --backdrop-opacity sur --color-shadow-rgb */
    -webkit-backdrop-filter: brightness(1);
    backdrop-filter: brightness(1);
    transition: backdrop-filter var(--dgc-mouv) ease-in-out;
}
.dgc-search[open]::backdrop {
    animation: dgc-search-voile var(--dgc-mouv) ease-in-out forwards;
    transition: opacity var(--dgc-mouv) ease-in-out;
}
.dgc-search.is-closing::backdrop {
    opacity: 0;
}

@keyframes dgc-search-entree {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@keyframes dgc-search-sortie {
    from { transform: translateY(0);    opacity: 1; }
    to   { transform: translateY(20px); opacity: 0; }
}
@keyframes dgc-search-voile {
    from { -webkit-backdrop-filter: brightness(1);   backdrop-filter: brightness(1); }
    to   { -webkit-backdrop-filter: brightness(.75); backdrop-filter: brightness(.75); }
}

/* --- La coquille ----------------------------------------------------- */

.dgc-search__panel {
    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--dgc-s-fond);
    z-index: 4;                             /* --layer-heightened */
}

.dgc-search__form {
    position: relative;
    width: 100%;
    align-self: flex-start;
    margin: 0;
}

/* --- La ligne de saisie ---------------------------------------------- */

.dgc-search__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 4;
    width: 100%;
    align-items: center;
    background-color: var(--dgc-s-fond);
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--dgc-s-trait);
}
@media screen and (min-width: 750px) {
    .dgc-search__header { padding: 4px 4px 0; }   /* --padding-2xs */
}
@media screen and (max-width: 749px) {
    .dgc-search__header {
        padding: 4px 11.2px;                /* --padding-2xs --padding-sm */
        /* Sous la bascule la ligne de saisie prend une ombre quand la liste
           defile sous elle : la transition est declaree meme quand l'ombre
           vaut `none`. */
        box-shadow: none;
        transition: box-shadow .2s ease;
    }
}

/* Un filet vertical separe « Effacer » de la croix, et seulement quand
   « Effacer » est visible. */
.dgc-search__header:has(.dgc-search__reset:not([hidden]))::before {
    content: '';
    position: absolute;
    right: 55.2px;                          /* --padding-sm + --minimum-touch-target */
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--dgc-s-trait);
}
@media screen and (min-width: 750px) {
    .dgc-search__header:has(.dgc-search__reset:not([hidden]))::before {
        right: 48px;                        /* --padding-2xl * 2 */
    }
}

.dgc-search__header-inner {
    background: var(--dgc-s-fond);
    color: var(--dgc-s-encre);
    border: 0 solid var(--dgc-s-trait);
    border-radius: var(--dgc-s-radius);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
@media screen and (max-width: 749px) {
    .dgc-search__header-inner { border-radius: var(--dgc-s-radius-input); }
}

/* Storefront pose `input:focus { outline: 2px solid #7f54b3 }` — le violet
   de WooCommerce — sur tous les champs, et une ombre interieure sur tous
   les `input`. Ni l'un ni l'autre n'existe sur la source : son champ n'a ni
   cadre, ni ombre, ni contour, et le focus ne se signale nulle part dans
   cette ligne. */
.dgc-search .dgc-search__input {
    border: 0;
    border-radius: var(--dgc-s-radius-input);
    padding-block: 11.2px;                  /* --padding-sm */
    padding-inline: 40px 0;                 /* --margin-lg + --icon-size-lg */
    margin: 0;
    font-size: 16px;                        /* --font-size--md */
    line-height: 1.6;
    width: 100%;
    color: var(--dgc-s-encre);
    background: transparent;
    box-shadow: none;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.dgc-search .dgc-search__input:is(:focus, :focus-visible, :focus-within, :hover) {
    outline: none;
    box-shadow: none;
    background: transparent;
    border-color: var(--dgc-s-trait);
}
/* Deux regles de Storefront effacaient « Rechercher » : `input[type=search]
   ::placeholder { color: #616161 }`, plus specifique que la classe, et
   surtout `[placeholder]:focus::-webkit-input-placeholder { opacity: 0 }`,
   qui le fait disparaitre une demi-seconde apres l'ouverture — puisque le
   champ prend le focus tout seul. La source, elle, garde son texte de
   substitution visible tant qu'on n'a pas tape. */
.dgc-search input.dgc-search__input::placeholder {
    color: rgb(0 0 0 / .7);                 /* --opacity-subdued-text */
    opacity: 1;
}
.dgc-search input.dgc-search__input:focus::placeholder {
    opacity: 1;
    transition: none;
}
.dgc-search input.dgc-search__input:focus::-webkit-input-placeholder {
    opacity: 1;
    transition: none;
}
.dgc-search__input::-webkit-search-decoration,
.dgc-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* La loupe est POSITIONNEE PAR RAPPORT A L'EN-TETE, pas au champ : `left`
   part de `.predictive-search-form__header`, qui est `sticky` donc
   positionne. `top: auto` laisse la position statique, celle que le
   centrage vertical du conteneur flex lui donne deja. */
.dgc-search__icon {
    position: absolute;
    left: 20px;                             /* --margin-xl */
    top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;                            /* --icon-size-lg */
    height: 24px;
    color: rgb(0 0 0 / .6);
    pointer-events: none;
}
@media screen and (min-width: 750px) {
    .dgc-search__icon { left: 12.8px; }     /* --margin-md */
}
.dgc-search__icon > svg {
    width: 22px;                            /* --icon-size-md */
    height: 22px;
}

/* « Effacer » n'est pas retire du flux quand il est cache : la source le
   laisse en `display: flex` et l'eteint a l'opacite et a la visibilite. Sa
   place reste donc prise, et la croix ne bouge pas quand on tape. */
.dgc-search .dgc-search__reset {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;                        /* --minimum-touch-target */
    height: 44px;
    padding: 0;
    margin: 0 4.8px 0 0;                    /* --margin-2xs */
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--dgc-s-encre);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: normal;
    text-transform: none;
    opacity: .68;
    overflow: hidden;
    cursor: pointer;
    box-shadow: none;
    transition:
        opacity var(--dgc-mouv-moyen) var(--dgc-mouv-sortant),
        visibility var(--dgc-mouv-moyen) var(--dgc-mouv-sortant);
}
@media screen and (max-width: 749px) {
    .dgc-search .dgc-search__reset { margin-inline-end: 12.8px; }  /* --margin-md */
}
.dgc-search .dgc-search__reset:hover {
    background: transparent;
    color: var(--dgc-s-encre);
}
.dgc-search .dgc-search__reset:active {
    transform: scale(.9);
    transition: transform 100ms var(--dgc-mouv-actif);
}
.dgc-search .dgc-search__reset[hidden] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.dgc-search .dgc-search__close {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;                            /* --minimum-touch-target */
    height: 44px;
    margin: 0 0 0 11.2px;                   /* --margin-sm */
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--dgc-s-encre);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: normal;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
    transition:
        color var(--dgc-mouv) ease-in-out,
        box-shadow var(--dgc-mouv) ease-in-out,
        background-color var(--dgc-mouv) ease-in-out;
}
@media screen and (max-width: 749px) {
    .dgc-search .dgc-search__close {
        padding-inline-start: 8px;          /* --margin-xs */
        margin-inline-start: 0;
    }
}
.dgc-search .dgc-search__close:hover {
    background: transparent;
    color: var(--dgc-s-encre);
}
.dgc-search .dgc-search__close:active {
    transform: scale(.8);
    transition: transform 100ms var(--dgc-mouv-actif);
}
.dgc-search__close-icon,
.dgc-search__close-icon > svg {
    display: block;
    width: 13.6px;                          /* --icon-size-xs */
    height: 13.6px;
}

/* --- Le tiroir des resultats ----------------------------------------- */

/* Il est pose SOUS la ligne de saisie, en absolu : c'est pour ca que la
   ligne reste immobile quand la liste change de hauteur. */
/* `.search-modal__content :is(.predictive-search-dropdown,
   .predictive-search-form__content-wrapper) { position: relative }` : dans la
   modale le tiroir est DANS LE FLUX, et c'est lui qui donne sa hauteur au
   panneau. L'absolu de la declaration generale ne sert qu'au deroulant de
   l'en-tete, que cette boutique n'utilise pas. */
.dgc-search__wrapper {
    position: relative;
    width: 100%;
    z-index: 2;                             /* --layer-raised */
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--dgc-s-radius) var(--dgc-s-radius);
    transition: box-shadow var(--dgc-mouv) ease-in-out;
    transform: translateZ(0);
    will-change: transform, opacity;
    overflow: hidden;
}
@media screen and (min-width: 750px) {
    .dgc-search__wrapper {
        max-height: var(--dgc-s-modal-h);
        height: fit-content;
    }
}
@media screen and (max-width: 749px) {
    .dgc-search__wrapper { border-radius: 0; }
}

.dgc-search__content {
    max-height: var(--dgc-s-modal-h);
    overflow-y: auto;
    background-color: var(--dgc-s-fond);
    scrollbar-width: none;
}
.dgc-search__content::-webkit-scrollbar { display: none; }
@media screen and (max-width: 749px) {
    /* Le parent porte deja le defilement : sans ce plafond, deux barres se
       superposent pendant l'animation d'ouverture. */
    .dgc-search__content { max-height: 100%; }
}

/* Le bouton « Tout afficher » flotte au-dessus de la liste : elle se
   termine par 64 px de vide pour qu'il ne recouvre jamais une carte. */
.dgc-search__wrapper:has([data-search-results]):not(:has(.dgc-search__no-results)) > .dgc-search__content {
    padding-block-end: 64px;                /* --padding-6xl */
}

.dgc-search__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
@media screen and (min-width: 750px) {
    .dgc-search__footer {
        padding-block: 8px 16px;            /* --padding-xs --padding-lg */
        background-image: linear-gradient(
            to top,
            rgb(255 255 255 / .9),
            rgb(255 255 255 / .8),
            rgb(255 255 255 / .4),
            transparent
        );
    }
}
@media screen and (max-width: 749px) {
    .dgc-search__footer { padding-block: 24px; }   /* --padding-2xl */
}
.dgc-search__panel:has([data-search-results]):not(:has(.dgc-search__no-results)) .dgc-search__footer {
    display: block;
}

.dgc-search .dgc-search__view-all {
    display: grid;
    width: fit-content;
    margin: auto;
    padding: 16px 24px;                     /* --button-padding-block --button-padding-inline */
    border: 0;
    border-radius: 0;
    background-color: var(--gac-primary);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    z-index: 2;
    transition:
        transform var(--dgc-mouv-moyen) var(--dgc-mouv-rebond),
        box-shadow var(--dgc-mouv-moyen) var(--dgc-mouv-survol);
    transform-origin: center;
}
.dgc-search .dgc-search__view-all:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgb(0 0 0 / .05);
}
.dgc-search .dgc-search__view-all:active {
    transform: scale(.97);
    transition: transform 100ms var(--dgc-mouv-actif);
    box-shadow: none;
}

/* --- La liste elle-meme ---------------------------------------------- */

.dgc-search__dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
}

/* `container-type: inline-size` n'est pas decoratif : la grille passe a
   quatre colonnes sur la largeur du PANNEAU, pas sur celle de la fenetre,
   et les cartes de collection sont dimensionnees en `cqi`. */
.dgc-search__inner {
    flex-grow: 1;
    overflow-y: auto;
    padding-block: 16px;                    /* --padding-lg */
    container-type: inline-size;
    color: var(--dgc-s-encre);
}

.dgc-search__products {
    padding-inline: 20px;                   /* --padding-xl */
}

.dgc-search .dgc-search__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-block: 11.2px 8px;               /* --margin-sm --margin-xs */
    font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    color: var(--dgc-s-encre);
}
.dgc-search .dgc-search__title:first-of-type {
    margin-block-start: 0;
}
@media screen and (max-width: 749px) {
    .dgc-search .dgc-search__title { margin-block: 16px 11.2px; }  /* --margin-lg --margin-sm */
}

.dgc-search .dgc-search__clear {
    padding: 0;
    margin: 0 0 0 11.2px;                   /* --margin-sm */
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--dgc-s-encre);
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: normal;
    text-transform: none;
    opacity: .68;
    cursor: pointer;
    transition: opacity var(--dgc-mouv-moyen) ease-in-out;
}
.dgc-search .dgc-search__clear:hover {
    background: none;
    color: var(--dgc-s-encre);
    opacity: 1;
}

/* « Recemment consulte(s) » se replie quand on l'efface : la hauteur tombe
   a zero en .35s, l'opacite en .25s, et le bloc monte de 10 px. */
.dgc-search__recent {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transform-origin: top center;
    transform: translateY(0);
    transition:
        max-height .35s cubic-bezier(.4, 0, .2, 1),
        opacity .25s cubic-bezier(.4, 0, .2, 1);
}
.dgc-search__recent > * {
    transition: opacity .25s cubic-bezier(.4, 0, .2, 1);
}
.dgc-search__recent.is-removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition:
        max-height .35s cubic-bezier(.4, 0, .2, 1),
        opacity .25s cubic-bezier(.4, 0, .2, 1),
        transform .25s cubic-bezier(.4, 0, .2, 1);
}
.dgc-search__recent .dgc-search__card {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity .25s cubic-bezier(.4, 0, .2, 1),
        transform .25s cubic-bezier(.4, 0, .2, 1);
}
.dgc-search__recent.is-removing .dgc-search__card {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

.dgc-search .dgc-search__list {
    list-style: none;
    margin: 0;
    animation-duration: var(--dgc-mouv-moyen);
    /* De la place pour que le liseré de focus d'une carte reste visible. */
    padding-block-start: 1px;
}
.dgc-search .dgc-search__list--products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14.4px;                            /* --gap-md */
    padding-inline: 0;
    padding-block-end: 11.2px;              /* --padding-sm */
    transition: height var(--dgc-mouv-moyen) ease-in-out;
}
@container (min-width: 550px) {
    .dgc-search .dgc-search__list--products {
        grid-template-columns: repeat(4, 1fr);
    }
}
.dgc-search .dgc-search__list--products:last-child {
    padding-block-end: 16px;                /* --padding-lg */
}
@media screen and (min-width: 750px) {
    .dgc-search .dgc-search__list--products:last-child {
        padding-block-end: 11.2px;          /* --padding-sm */
    }
}

.dgc-search__card {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    scroll-snap-align: start;
    margin: 0;
    transition:
        transform var(--dgc-mouv-moyen) var(--dgc-mouv-defaut),
        background-color var(--dgc-mouv-moyen) var(--dgc-mouv-survol),
        border-color var(--dgc-mouv-moyen) var(--dgc-mouv-survol);
}
.dgc-search__card:active {
    transform: scale(.97);
    transition: transform 100ms var(--dgc-mouv-actif);
}

/* Au survol la carte prend un fond et six pixels de rembourrage, repris par
   une marge negative de meme valeur : la grille ne bouge pas d'un pixel. */
.dgc-search__card--product:hover {
    background-color: var(--dgc-s-carte-fond);
    border-radius: var(--dgc-s-produit-radius);
    padding: 6px;                           /* --padding-2xs + 2 */
    margin: -6px;
}
.dgc-search__card--product:is([aria-selected='true'].is-keyboard, :focus-visible, :has(.dgc-rcard__link:focus-visible)) {
    background-color: var(--dgc-s-carte-fond);
    padding: 5px;                           /* --padding-2xs + 1 */
    margin: -5px;
    outline: 1px solid var(--dgc-s-trait);
    border-radius: calc(var(--dgc-s-produit-radius) + 1px);
}

/* --- La carte, dessin repris de `resource-card` ---------------------- */

.dgc-rcard {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    row-gap: 8px;                           /* --padding-xs */
    height: 100%;
    text-decoration: none;
    opacity: 0;
    animation: dgc-search-parait var(--dgc-mouv-moyen) var(--dgc-mouv-entrant) forwards;
}
.dgc-rcard__link {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.dgc-rcard__media {
    position: relative;
}
/* Storefront arrondit toutes les images du site de 3 px dans sa remise a
   zero. La source n'arrondit rien ici. */
.dgc-search .dgc-rcard__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 0;
    margin: 0;
    transition: none;
}
.dgc-search .dgc-rcard__image--secondary {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
/* Le passage a la seconde photo est SEC, pas un fondu : la source ne pose
   aucune transition sur ces deux images, elle bascule les deux opacites. */
.dgc-rcard:has(.dgc-rcard__image--secondary):is(:hover, :focus-within) .dgc-rcard__image--secondary {
    opacity: 1;
}
.dgc-rcard:has(.dgc-rcard__image--secondary):is(:hover, :focus-within) .dgc-rcard__image:not(.dgc-rcard__image--secondary) {
    opacity: 0;
}
@media (hover: none) {
    .dgc-search .dgc-rcard__image--secondary { display: none; }
}
.dgc-rcard__image-placeholder {
    padding: 11.2px;                        /* --padding-sm */
    aspect-ratio: 4 / 5;
    background-color: rgb(0 0 0 / .05);
    word-break: break-word;
}
.dgc-rcard__content {
    display: flex;
    flex-direction: column;
    gap: 2px;                               /* --padding-3xs */
    color: var(--dgc-s-encre);
}
.dgc-search .dgc-rcard__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    word-break: break-word;
    overflow-wrap: break-word;
}
.dgc-search .dgc-rcard__content .price,
.dgc-search .dgc-rcard__content .woocommerce-Price-amount {
    font-size: 14px;
    font-weight: 500;
    color: var(--dgc-s-encre);
    white-space: nowrap;
}
.dgc-search .dgc-rcard__content del {
    opacity: .55;
    margin-right: .3em;
}
.dgc-search .dgc-rcard__subtext {
    margin: 0;
    font-size: 14px;
    line-height: 1.2;
    color: rgb(0 0 0 / .7);                 /* --opacity-subdued-text */
}

/* --- Le carrousel des collections ------------------------------------ */

.dgc-search__carousel {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-block: 1px 11.2px;              /* --padding-sm */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    transition: opacity var(--dgc-mouv-moyen) var(--dgc-mouv-entrant);
}
.dgc-search__carousel::-webkit-scrollbar { display: none; }
.dgc-search__resource-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 32px;
    padding-inline: 20px;                   /* --padding-xl */
}
.dgc-search .dgc-search__resource-header .dgc-search__title {
    margin-block: 0;
    width: auto;
}
.dgc-search__slides {
    display: flex;
    gap: 14.4px;                            /* --gap-md */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* De l'air autour des diapositives pour que le survol d'une carte ne
       soit pas rogne par le defilement, repris par une marge negative. */
    padding-block: 20px;
    margin-block: -20px;
    padding-inline: 20px;                   /* gutters « start end » */
}
.dgc-search__slides::-webkit-scrollbar { display: none; }

.dgc-search__card--collection {
    width: 60cqi;
    max-height: 100%;
    padding: 11.2px;                        /* --padding-sm */
    border: 1px solid var(--dgc-s-trait);
    border-radius: var(--dgc-s-carte-radius);
    overflow: hidden;
}
@media screen and (min-width: 750px) {
    .dgc-search__card--collection { width: 27.5cqi; }
}
.dgc-search__card--collection:hover {
    border-color: var(--dgc-s-carte-trait);
    background-color: var(--dgc-s-carte-fond);
}
.dgc-rcard__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4.8px;                             /* --gap-2xs */
}
.dgc-search .dgc-rcard__collection-image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    /* `calc(var(--card-corner-radius) - var(--padding-xs) / 2)`, soit 0 ici. */
    border-radius: 0;
    margin: 0;
}

.dgc-search__arrows {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    min-height: 44px;                       /* --minimum-touch-target */
}
@media screen and (max-width: 749px) {
    .dgc-search__arrows { display: none; }
}
.dgc-search .dgc-search__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 8px;                         /* --padding-xs */
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--dgc-s-encre);
    font-family: inherit;
    font-size: 14px;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    transition:
        color var(--dgc-mouv) ease-in-out,
        background-color var(--dgc-mouv) ease-in-out;
}
.dgc-search .dgc-search__arrow:hover {
    background: none;
    color: var(--dgc-s-encre);
}
.dgc-search .dgc-search__arrow[disabled] {
    opacity: .5;
    cursor: not-allowed;
}
.dgc-search__arrow-icon,
.dgc-search__arrow-icon > svg {
    display: block;
    width: 13.6px;                          /* --icon-size-xs */
    height: 13.6px;
}
.dgc-search__arrow--prev .dgc-search__arrow-icon > svg { transform: rotate(90deg); }
.dgc-search__arrow--next .dgc-search__arrow-icon > svg { transform: rotate(-90deg); }

/* --- L'absence de resultat ------------------------------------------- */

.dgc-search .dgc-search__no-results {
    animation-delay: 100ms;
    transition: opacity var(--dgc-mouv-moyen) var(--dgc-mouv-entrant);
}
.dgc-search .dgc-search__no-results:last-child {
    margin-block: 16px;                     /* --margin-lg */
    text-align: center;
}

/* --- L'arrivee et le depart des resultats ---------------------------- */

/* Chaque carte monte de 8 px en fondu avec un rebond, et les cinq
   premieres sont decalees de 30, 60, 90, 120 puis 150 ms. La liste
   elle-meme part a 50 ms, le carrousel a 150. */
.dgc-search__no-results,
.dgc-search__carousel,
.dgc-search__list--products .dgc-search__card {
    animation: dgc-remonte var(--dgc-mouv-moyen) var(--dgc-mouv-rebond) backwards;
}
.dgc-search__list--products .dgc-search__card:nth-child(1) { animation-delay: 30ms; }
.dgc-search__list--products .dgc-search__card:nth-child(2) { animation-delay: 60ms; }
.dgc-search__list--products .dgc-search__card:nth-child(3) { animation-delay: 90ms; }
.dgc-search__list--products .dgc-search__card:nth-child(4) { animation-delay: 120ms; }
.dgc-search__list--products .dgc-search__card:nth-child(n + 5) { animation-delay: 150ms; }
.dgc-search__list--products { animation-delay: 50ms; }
/* La carte du carrousel est deja portee par l'animation du carrousel. */
.dgc-search__carousel .dgc-search__card { animation: none; }
.dgc-search__carousel .dgc-rcard { animation-delay: 0ms; }

/* Et ils repartent en fondu vers le bas quand on retape, au lieu de
   disparaitre net : sans ce temps de sortie la cascade d'entree est mangee
   par le saut du contenu precedent. */
.dgc-search__dropdown.is-removing .dgc-search__carousel,
.dgc-search__dropdown.is-removing .dgc-search__no-results {
    animation: dgc-descend-en-fondu var(--dgc-mouv-moyen) var(--dgc-mouv-sortant) forwards;
}
.dgc-search__dropdown.is-removing .dgc-search__card {
    animation: dgc-disparait var(--dgc-mouv-moyen) var(--dgc-mouv-sortant) forwards;
}

@keyframes dgc-search-parait {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes dgc-disparait {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .dgc-search[open],
    .dgc-search.is-closing,
    .dgc-search[open]::backdrop,
    .dgc-search__no-results,
    .dgc-search__carousel,
    .dgc-search__list--products .dgc-search__card,
    .dgc-rcard,
    .dgc-search__dropdown.is-removing .dgc-search__card,
    .dgc-search__dropdown.is-removing .dgc-search__carousel {
        animation: none;
        opacity: 1;
    }
}

/* ============================================================
   Fonds gris du theme parent, que la source n'a nulle part.

   Storefront pose `#fbfbfb` sur `fieldset` et `fieldset legend` dans la meme
   regle que ses cellules de tableau. La barre de filtres de la collection en
   heritait un fond gris que la source, elle, laisse blanc.
   ============================================================ */
.gac-colonnes,
.gac-colonnes legend,
.gac-facettes fieldset,
.gac-facettes fieldset legend {
    background-color: transparent;
}

/* =========================================================================
   PAGES DE CONTENU : « À propos », FAQ, Contact et les politiques
   -------------------------------------------------------------------------
   Relevé le 27/08/2026 sur https://svevelys.com, à 1440 px, Chromium.

   La source sert ces pages avec DEUX gabarits distincts, et Storefront n'en
   connaît aucun :

   - « À propos », FAQ et Contact sortent du thème Horizon, section
     `page-width-content` : colonne de `--normal-content-width` (42rem, soit
     672 px), centrée dans la page, 30 px d'air au-dessus du titre ;
   - les politiques sortent du gabarit de Shopify lui-même :
     `.shopify-policy__container { max-width: 65ch; margin: 0 auto;
     padding-inline: 20px; padding-block: var(--padding-xl) }`, soit 534 px de
     texte à 1440.

   Storefront servait les deux dans la même colonne de 46rem, titre hors
   colonne sur 1360 px, corps en 36,65 px aligné à gauche. Les classes de corps
   viennent de `inc-pages.php`.

   Ce bloc est en fin de feuille pour passer devant les règles génériques de
   contenu écrites plus haut, à spécificité égale.
   ====================================================================== */

/* -- La colonne ---------------------------------------------------------- */

/* Les pages du thème : chaque bloc est ramené à 42rem et centré, mais le
   CONTENEUR garde la largeur de la page. C'est ce qui permet au formulaire de
   contact de faire ses 50 % de la page (680 px) alors que le texte au-dessus
   tient dans 672 - deux largeurs différentes sur la même page, comme la
   source. Un plafond posé sur `.entry-content` elle-même l'interdirait. */
body.dgc-contenu--page:not(.dgc-page-faq).page:not(.home):not(.woocommerce-page) .entry-content {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
body.dgc-contenu--page:not(.dgc-page-faq) .entry-content > * {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}
/* Le formulaire de contact est l'exception : chez la source c'est une SECTION
   à part, large de 50 % de la page (680 px à 1440) et non des 672 px de la
   colonne de texte. L'exception se pose ici, où le plafond est écrit :
   `.contact-form` seule ([0,1,0]) perdrait contre lui. */
body.dgc-contenu--page .entry-content > .contact-form {
    max-width: none;
    width: 100%;
}
@media (min-width: 750px) {
    body.dgc-contenu--page .entry-content > .contact-form {
        width: 50%;
    }
}

/* La FAQ garde sa pleine largeur pour l'accordéon (voir `dgc_faq_page_body_class`
   dans inc-ui.php) : seul le titre est dans la colonne, et il est traité avec
   les autres en-têtes plus bas. */

/* Les politiques : l'en-tête et le corps sont les deux moitiés d'un même
   conteneur chez la source, donc la colonne se pose sur l'article. Le `ch` est
   celui de la source, et il tombe juste à condition que l'élément qui le porte
   soit à 14 px d'Inter comme le sien. */
body.dgc-contenu--politique .hentry {
    max-width: 65ch;
    margin: 0 auto;
    padding: 20px;
    font-size: 14px;
}
/* Le gabarit des politiques ne connaît PAS la marge de page : son conteneur
   est centré dans la fenêtre entière et ne porte que ses 20 px. Tant qu'il
   tient dans la colonne, la marge de Storefront ne se voit pas - elle est
   symétrique. En dessous de 606 px de fenêtre le conteneur touche les bords,
   et les 16 px de marge rétrécissent le texte de 350 à 318. On les retire donc
   sur ces pages, où `.col-full` ne contient rien d'autre que l'article. */
/* Le sélecteur reprend celui qui pose la marge - `body:not(.dgc-checkout).dgc-no-sidebar`,
   soit quatre classes - sans quoi il perd sans un mot. */
body:not(.dgc-checkout).dgc-no-sidebar.dgc-contenu--politique .site-content > .col-full {
    padding-left: 0;
    padding-right: 0;
}
body.dgc-contenu--politique.page:not(.home):not(.woocommerce-page) .entry-content,
body.dgc-contenu--politique .entry-header {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Les espacements de section de la source ont UNE bascule, à 990 px - pas
   celle du gabarit, qui est à 750. En dessous, `--spacing-scale` passe de 1 à
   0,7 et `--gap-scale` avec : la gouttière tombe de 32 à 24, et chaque
   rembourrage de section à 0,7 fois sa valeur, plancher à 20 px. Balayé le
   27/08/2026 à 390, 749, 750, 900, 989, 990, 1024 et 1440 : une seule bascule,
   à 990. */
body.dgc-contenu {
    --dgc-gap-contenu: 32px;
}
@media (max-width: 989px) {
    body.dgc-contenu {
        --dgc-gap-contenu: 24px;
    }
}

/* L'air au-dessus du titre : 30 px chez le thème (21 sous 990), 20 px chez le
   gabarit des politiques (`--padding-xl`), qui les pose en haut ET en bas. */
body.dgc-contenu--page .hentry {
    padding-top: 30px;
    /* Storefront ajoute 4,236em (59,3 px) sous l'article. Le rembourrage bas de
       la section suffit chez la source, qui colle son pied juste après. */
    margin-bottom: 0;
}
@media (max-width: 989px) {
    body.dgc-contenu--page .hentry {
        padding-top: 21px;
    }
    /* La FAQ fait exception : ses 30 px ne viennent pas du rembourrage de
       section (qui vaut 0 ici) mais du bloc titre lui-même, une valeur brute
       que l'échelle d'espacement ne touche pas. Elle reste à 30 partout. */
    body.dgc-page--faq .hentry {
        padding-top: 30px;
    }
}

/* Le bas de page, mesuré section par section sur la source à 1440 px, le
   27/08/2026 : « À propos » 30/80 en une section, « Contact » 30/0 puis 32/84,
   la FAQ 0/0 puis 0/48 puis 24/24 - ses deux rubriques sont DEUX sections, et
   c'est leur 48 + 24 qui font les 72 px entre l'accordéon et le titre suivant.
   Le bas de la page vaut donc 24, pas 48. */
body.dgc-page--a-propos           .hentry { padding-bottom: 80px; }
body.dgc-page--politique-paiement .hentry { padding-bottom: 80px; }
body.dgc-page--retractation       .hentry { padding-bottom: 80px; }
body.dgc-page--faq      .hentry { padding-bottom: 24px; }
body.dgc-page--contact  .hentry { padding-bottom: 84px; }
@media (max-width: 989px) {
    body.dgc-page--a-propos           .hentry { padding-bottom: 56px; }
    body.dgc-page--politique-paiement .hentry { padding-bottom: 56px; }
    body.dgc-page--retractation       .hentry { padding-bottom: 56px; }
    body.dgc-page--faq      .hentry { padding-bottom: 20px; }
    body.dgc-page--contact  .hentry { padding-bottom: 58.8px; }
}

/* -- Le titre de page ---------------------------------------------------- */

/* Chez la source le titre est DANS la colonne, centré, et en `h3` de sa
   grille typographique (2rem) - pas dans le `h1` de 36,65 px que Storefront
   pose sur toute la largeur. */
body.dgc-contenu .entry-header {
    margin: 0;
    padding: 0;
    border: 0;
}
body.dgc-contenu h1.entry-title {
    max-width: 42rem;
    margin: 0 auto;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-weight: 400;
    font-size: 2rem;
    color: rgb(0 0 0 / .81);
    text-align: center;
    text-wrap: balance;
}
/* 1,1 sur les pages du thème, 1,2 sur les politiques : ce ne sont pas les
   mêmes présélections. L'écart de 32 px sous le titre est la gouttière de la
   section (`--gap`), celui de 8 px le `margin-block-end` du bloc titre. */
body.dgc-contenu--page h1.entry-title {
    line-height: 1.1;
    margin-bottom: 0;
}
/* Les 32 px sous le titre sont la GOUTTIÈRE de la section chez la source
   (`--gap: max(24px, 32px)`), pas une marge : une marge fusionnerait avec
   celle du premier paragraphe et ne donnerait plus 32. */
body.dgc-contenu--page .entry-content {
    padding-top: var(--dgc-gap-contenu);
}
body.dgc-contenu--politique h1.entry-title {
    max-width: none;
    line-height: 1.2;
    margin-bottom: 8px;
    /* `balance` vient du bloc titre du THÈME ; le gabarit des politiques, lui,
       est celui de Shopify et laisse `auto`. */
    text-wrap: auto;
}

/* -- Le texte courant ---------------------------------------------------- */

/* Les intertitres. La source ne les habille pas par leur balise mais par la
   CLASSE que son éditeur pose (`<h2 class="h4">`, `<h3 class="h5">`), et le
   corps du texte importé la porte : elle est recopiée telle quelle. Un titre
   SANS classe retombe sur la présélection de sa balise - le seul du catalogue
   est le `h3` de « Conformité et garantie légale » des CGV, en 32 px.

   Le rembourrage bas vaut `0.25em` de la taille dans les trois cas (8, 5 et
   4 px), le haut 40 px. Relevé le 27/08/2026.

   `margin-block` et non `margin` : le raccourci écraserait le `margin-inline:
   auto` qui centre le bloc dans sa colonne, et le titre partirait à gauche.

   `.gac-section__title` est exclu : les rubriques de la FAQ ne viennent pas du
   texte importé, elles sont à nous et gardent leur propre règle. */
body.dgc-contenu .entry-content :is(h2, h3, h4, h5, h6):not(.gac-section__title) {
    color: rgb(0 0 0 / .81);
    letter-spacing: 0;
    margin-block: 40px 8px;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 1.1;
    text-transform: none;
}
body.dgc-contenu .entry-content :is(h2, h3, h4, h5, h6):not(.gac-section__title).h4 {
    font-size: 1.25rem;
    line-height: 1.2;
    margin-block-end: 5px;
}
body.dgc-contenu .entry-content :is(h2, h3, h4, h5, h6):not(.gac-section__title).h5 {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.2;
    margin-block-end: 4px;
}
/* Le premier bloc du corps ne porte pas la marge haute : chez la source, l'air
   au-dessus vient du bloc titre, pas de lui. La règle doit passer devant celle
   des intertitres, d'où le sélecteur aussi long. */
body.dgc-contenu .entry-content > :is(h2, h3, h4, h5, h6, p, ul, ol, div, table):first-child {
    margin-block-start: 0;
}

/* Les listes : 21 px de retrait, 14 px sous la liste, et un `<p>` de puce sans
   marge. Une liste VIDE compte : `contact-information` en porte une, et ses
   14 px de marge basse décalent tout ce qui suit. */
body.dgc-contenu .entry-content :is(ul, ol) {
    margin-block: 0 14px;
    /* Storefront décale ses listes par une marge de 42 px et ne les rembourre
       pas ; la source fait l'inverse, 21 px de rembourrage et aucune marge. Il
       faut donc remettre la marge à zéro, sans quoi les deux s'ajoutent. */
    margin-inline: 0;
    padding-inline-start: 21px;
    padding-inline-end: 0;
}
body.dgc-contenu .entry-content li > p {
    margin-block: 0;
}

/* Le tableau des catégories de données de la politique de confidentialité.
   Storefront lui pose 14 px / 19,8 px de rembourrage, un fond gris très clair
   sur une ligne sur deux et une marge basse ; la source ne peint rien et
   rembourre de 11,2 x 12,8. */
body.dgc-contenu .entry-content table {
    margin-block: 0;
    border: 0;
    /* Storefront sépare les cellules ; la source les fusionne, et la rangée y
       fait alors 45,27 px au lieu de 44,77. */
    border-collapse: collapse;
}
body.dgc-contenu .entry-content :is(td, th) {
    padding: 11.2px 12.8px;
    background-color: transparent;
    text-align: start;
    /* Un filet BAS de 1 px, transparent. `getComputedStyle` de la source rend
       « 0px none » sur ses cellules, et pourtant l'arithmétique de ses rangées
       ne tombe juste qu'avec un bord bas de 1 px : sous `border-collapse:
       collapse` il ajoute une demi-largeur en haut et une en bas de chaque
       rangée. Sans lui, 45,27 devient 44,77 et 529,97 devient 528,97, et les
       2 px se propagent aux quarante blocs qui suivent le tableau. Reproduit
       en transparent : même géométrie, rien de peint. Mesuré le 27/08/2026,
       cause non expliquée. */
    border: 0;
    border-bottom: 1px solid transparent;
    /* `middle` est la valeur par défaut d'une cellule, que Storefront remplace
       par `top` : la colonne de droite, plus courte, se cale au milieu de sa
       rangée chez la source et en haut chez nous - 113 px d'écart. */
    vertical-align: middle;
}

body.dgc-contenu .entry-content p,
body.dgc-contenu .entry-content li {
    /* `text-wrap: pretty` est de notre fait : la source laisse `auto` sur ce
       texte-là, et les mots ne tombent donc pas au même endroit. */
    text-wrap: auto;
}
body.dgc-contenu .entry-content > p {
    margin-block: 14px;
    color: rgb(0 0 0 / .81);
}
body.dgc-contenu .entry-content > p:last-child {
    margin-bottom: 0;
}

/* L'image de « À propos » : pleine colonne, sans marge ni arrondi. Le thème
   parent arrondit toutes les images de 3 px (voir le balayage de propriétés
   du 26/08/2026) ; la source n'arrondit rien. */
body.dgc-contenu .entry-content p > img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border-radius: 0;
}

/* -- La FAQ -------------------------------------------------------------- */

body.dgc-page-faq .entry-content .gac-accordion--faq summary {
    color: rgb(0 0 0 / .81);
}
/* Le titre de rubrique de la source est un bloc de texte à la LARGEUR DE SON
   CONTENU (87 px pour « Produits »), pas une bande de 1360. Invisible tant
   qu'il n'a ni fond ni filet, mais c'est ce qu'elle pose. */
body.dgc-page-faq .entry-content > .gac-section__title {
    width: fit-content;
    text-wrap: balance;
    margin-bottom: 0;
}
/* La gouttière entre la rubrique et son accordéon est celle de la section
   (32 px, 24 sous 990). Elle est portée par l'accordéon, dont la marge haute
   fusionne avec celle du titre : les deux doivent donc suivre la variable,
   sinon la plus grande des deux gagne et la bascule ne se voit pas. */
body.dgc-page-faq .entry-content > .gac-accordion--faq {
    margin-top: var(--dgc-gap-contenu);
}
/* Entre le bas d'un accordéon et la rubrique suivante, la source empile le
   rembourrage bas d'une section et le rembourrage haut de la suivante :
   48 + 24 au-dessus de 990, 33,6 + 20 en dessous. */
body.dgc-page-faq .entry-content > .gac-accordion--faq + .gac-section__title {
    margin-top: 72px;
}
@media (max-width: 989px) {
    body.dgc-page-faq .entry-content > .gac-accordion--faq + .gac-section__title {
        margin-top: 53.6px;
    }
}

/* -------------------------------------------------------------------------
   LE CHEVRON DES ACCORDÉONS
   -------------------------------------------------------------------------
   Relevé le 27/08/2026. Le nôtre était dessiné à la main : un carré de .5em
   avec deux bordures de 1 px, tourné de 45°. Celui de la source est le SVG
   `icon-caret` du thème - `M11 5.5L7 9.5L3 5.5` dans un `viewBox` de 14, tracé
   à 1,5 unité, bouts et jointures arrondis - posé dans une boîte de
   13,59 x 20 px (`--icon-size-xs`, 0.85rem) collée à droite par une marge
   automatique, SANS gouttière.

   Ce n'est pas qu'une question de dessin : notre chevron plus sa gouttière de
   1em prenaient 27 px de large là où la source en prend 13,6. À 390 px, la
   question « Que faire si mon colis arrive endommagé… » passait sur trois
   lignes au lieu de deux.

   Le tracé est repris tel quel dans un masque, et coloré par `currentColor`
   comme le `stroke="currentColor"` de la source. La rotation d'ouverture est
   la sienne : 0 -> 180°, en .125 s ease-in-out.
   ---------------------------------------------------------------------- */
.gac-faq details > summary,
.gac-accordion--faq details > summary,
.gac-faq-item > summary {
    gap: 0;
    justify-content: normal;
}
.gac-faq details > summary::after,
.gac-accordion--faq details > summary::after,
.gac-faq-item > summary::after {
    content: "";
    flex: 0 1 auto;
    width: 13.5938px;
    height: 20px;
    margin-left: auto;
    border: 0;
    transform: none;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M11 5.5L7 9.5L3 5.5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M11 5.5L7 9.5L3 5.5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform var(--dgc-mouv) ease-in-out;
}
.gac-faq details[open] > summary::after,
.gac-accordion--faq details[open] > summary::after,
.gac-faq-item[open] > summary::after {
    transform: rotate(180deg);
}

/* ==========================================================================
   PAGE 404
   --------------------------------------------------------------------------
   Relevé sur la source le 28/08/2026, au navigateur, à 390, 750, 990 et 1440,
   plus `templates/404.json` et `sections/main-404.liquid` du thème archivé.

   Deux sections, et rien d'autre : Storefront en servait cinq, dont un
   formulaire de recherche et un encart « Catégories de produit » que la source
   n'a nulle part.

   Les nombres viennent de la source, aucun n'est estimé :

     - hauteur minimale : `--section-height-small` vaut 15rem sous 40em, 40svh
       à partir de 40em et 50svh à partir de 60em, et la règle qui la pose vit
       dans un `@media (min-width: 750px)`. Sous 750 la section fait donc la
       hauteur de son contenu ;
     - rembourrage : `max(20px, var(--spacing-scale) * 100px)`, l'échelle
       passant de 0,7 à 1 à 990 px - 70 puis 100 ;
     - gouttière : 20 px, écrite telle quelle dans la page (pas de plancher à
       24 sur cette section-là) ;
     - le titre est en 32/35,2 à TOUTES les largeurs, sans clamp, plafonné à
       32,5em de sa propre taille, soit 1040 px ; la phrase à 32,5em de 14 px,
       soit 455, avec 16 px de rembourrage bas.
   ========================================================================== */
.dgc-404 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: max(20px, calc(var(--dgc-404-echelle, .7) * 100px));
}
.dgc-404__contenu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
}
.dgc-404__titre {
    width: 100%;
    max-width: min(100%, 32.5em);
    margin: 0;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.1;
    text-align: center;
    text-wrap: pretty;
    color: rgba(0, 0, 0, .81);
}
.dgc-404__texte {
    width: 100%;
    max-width: min(100%, 32.5em);
    /* La source pose 16 px SOUS la phrase, en rembourrage : une marge
       s'échapperait du conteneur flex et ne pousserait pas le bouton. */
    margin: 0;
    padding-block-end: 16px;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    text-wrap: pretty;
    color: rgba(0, 0, 0, .81);
}
.dgc-404 .dgc-404__cta {
    width: fit-content;
    margin: 0;
}

/* La bascule de hauteur minimale est celle de la source, à 750 puis 960 -
   pas celle des espacements, qui est à 990. Trois bascules distinctes sur le
   même site : les relever, ne pas les supposer. */
@media screen and (min-width: 750px) {
    .dgc-404 {
        min-height: 40svh;
    }
}
@media screen and (min-width: 960px) {
    .dgc-404 {
        min-height: 50svh;
    }
}
@media screen and (min-width: 990px) {
    .dgc-404 {
        --dgc-404-echelle: 1;
    }
}

/* La rangée « Vous aimerez aussi » (« Discover something new » chez la
   source, titre repris de sa fiche produit le 06/09/2026) : section `product-list` de la
   source, 48/48 de rembourrage, 36 de gouttière sous le titre, quatre
   colonnes à 12 px, 24 px entre les rangées. Sous 750 : deux colonnes et
   12 px partout. */
.dgc-404-produits {
    padding-block: max(20px, calc(var(--dgc-404-echelle, .7) * 48px));
}
.dgc-404-produits .gac-section__header {
    margin: 0;
    /* La source cale ce titre sur la marge de page, à gauche : c'est le titre
       de section de sa vitrine, pas un en-tête centré. */
    text-align: left;
}
.dgc-404-produits .gac-section__title {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
}
.dgc-404-produits .woocommerce {
    margin-top: max(24px, calc(var(--dgc-404-echelle, .7) * 36px));
}
.dgc-404-produits ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
@media screen and (min-width: 750px) {
    .dgc-404-produits ul.products {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px 12px;
    }
}

/* ==========================================================================
   ESPACE CLIENT
   --------------------------------------------------------------------------
   Relevé sur les exports de la source le 28/08/2026, au navigateur, à 1440 et
   à 390. La source ne sert pas son compte depuis son thème : c'est une
   application React hébergée par Shopify, dont l'échelle est celle de
   `checkout-web` - racine à 10 px, donc `--x-border-radius-base` = 12 px,
   `--x-border-radius-large` = 16 px, `--x-spacing-base` = 14 px,
   `--x-duration-base` = 200 ms.

   Les nombres à virgule (37,5 - 9,33 - 18,9) sont ceux de la source, pas des
   approximations : son corps de texte est 14 px sur 1,35, ce qui donne 18,9 de
   ligne, et ses boutons 9,33 de rembourrage.

   Le point à confirmer, faute d'export : l'INTÉRIEUR des panneaux d'édition,
   que la source n'ouvre qu'au clic.
   ========================================================================== */

.dgc-compte {
    /* Meme couleur de marque que le tunnel : les deux ecrans sont servis
       par la meme application Shopify. Voir --co-accent, plus haut. */
    /* Meme pile et meme gras que le tunnel : meme application. */
    --co-police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
        sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --co-gras: 600;

    /* LA BASE DE 14 PX.

       Sveve Lys ne pose rien sur ces deux ecrans : tout son site est deja en
       `body { font-size: .875rem }`, et ils en heritent. Galerie Sac a Dos est
       en 16 px, et sans cette ligne chaque conteneur du tunnel et du compte
       partait 2 px trop gros - releve par scripts/rendu/tunnel-compte.js.
       La source, elle, sert ces ecrans en 14 : sa racine est a 10 px et son
       `--x-typography-size-default` vaut 1.4rem.

       L'INTERLIGNE EST 18,9 PX, pas les 22,4 px (14 x 1,6) que peint Sveve
       Lys. Mesure du 10/09/2026 sur l'ecran de connexion servi
       (shopify.com/authentication/91667202434/login) : libelle « Email »,
       sous-titre « Sign in or create an account », bouton et liens sont tous
       en 14 / 18,9, le titre « Sign in » en 20 / 24 / 600. Meme valeur que la
       caisse, deux applications distinctes mais une meme base. Les blocs qui
       en veulent un autre le declarent en pixels plus bas. */
    font-size: 14px;
    line-height: 18.9px;

    /* LA COULEUR DE MARQUE DE L'APPLICATION DE COMPTE.

       Meme valeur que le tunnel, et VERIFIEE, pas supposee :
       `--x-default-color-accent` resout a rgb(233,76,120) sur l'ecran de
       connexion servi par shopify.com/authentication/91667202434/login, lu au
       style calcule le 10/09/2026. Les deux ecrans sortent de la meme
       configuration de marque, mais ce sont deux applications distinctes. */
    --dgc-cp-accent: #E94C78;

    --dgc-cp-bord: #dfdfdf;
    --dgc-cp-gris: rgba(0, 0, 0, .56);
    --dgc-cp-fond: #f6f6f6;
    /* Relevée telle quelle sur la carte de la source, pas reconstruite depuis
       son jeton `--x-box-shadow-small` : elle n'a que deux couches. */
    --dgc-cp-ombre:
        0 0 0 .5px rgba(0, 0, 0, .08),
        0 2px 12px 0 rgba(0, 0, 0, .08);
    background: #fff;
}

/* Le pied de page de la source est collé en bas de la fenêtre, à 20 px du
   bord, même quand la page est courte : relevé à 963,8 sur une fenêtre de
   1000. Sans cette colonne, il remonte sous le contenu. */
.dgc-compte .site {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
}
.dgc-compte #content {
    flex: 1 0 auto;
}

/* ------------------------------------------------- L'EN-TÊTE
   Conteneur de 1200 px centré, 16 px de rembourrage : le contenu va donc de
   136 à 1304 sur une fenêtre de 1440. Logo 180 x 40,4, pastille de 31,5 sur
   `#f6f6f6`. Hauteur 72,4 = 16 + 40,4 + 16. */
.dgc-compte .site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    margin: 0;
    padding: 0;
    border: 0;
    color: #000;
    background: #fff;
    box-shadow: none;
}
.dgc-compte .site-header .col-full {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
}
.dgc-compte .site-header .storefront-primary-navigation,
.dgc-compte .site-header .dgc-search-toggle,
.dgc-compte .site-header .dgc-account,
.dgc-compte .site-header .site-header-cart,
.dgc-compte .site-header .site-branding,
.dgc-compte .site-header .main-navigation {
    display: none !important;
}

/* Le retrait au défilement : la source publie
   `--header-transition-duration: .2s` et `--header-transition-timing:
   ease-out` sur son conteneur, et pilote `--header-hidden`. */
.dgc-compte-tete {
    transition: transform .2s ease-out;
}
.dgc-compte-tete.est-cachee {
    transform: translateY(calc(-1 * var(--dgc-tete-hauteur, 72px)));
}
.dgc-compte-tete__bande {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1200px;
    margin-inline: auto;
    padding: 16px;
}
.dgc-compte-tete--seul .dgc-compte-tete__bande {
    justify-content: center;
    padding-block: 40px 16px;
}
.dgc-compte-tete__logo {
    display: block;
    line-height: 0;
}
.dgc-compte-tete__logo img {
    display: block;
    /* 200 x 50, et non les 160 de Galerie Sac a Dos ni les 180 de Sveve Lys :
       les trois applications de compte ont le meme en-tete, seule la boite du
       logo change. Mesure du 10/09/2026 sur l'ecran de connexion servi, ou le
       logo est centre (x=620 sur une page de 1440, y=40). C'est le meme
       fichier et la meme taille qu'au tunnel. */
    width: 200px;
    height: 50px;
}
.dgc-compte-tete__pastille {
    display: grid;
    place-items: center;
    width: 31.5px;
    height: 31.5px;
    border-radius: 50%;
    color: var(--dgc-cp-gris);
    background: var(--dgc-cp-fond);
    /* L'anneau : un filet de 1 px à 8 % de noir posé à l'INTÉRIEUR du disque,
       en outline rentré d'un pixel comme la source, pas en border qui
       changerait la boîte. */
    outline: 1px solid rgba(0, 0, 0, .08);
    outline-offset: -1px;
    text-decoration: none;
}
.dgc-compte-tete__icone {
    display: block;
    width: 31.5px;
    height: 31.5px;
}
.dgc-compte-tete__initiale {
    font-size: 15.7631px;
    line-height: 21.2802px;
    color: #000;
}

/* ------------------------------------------------- LA GRILLE
   `fit-content(20rem) minmax(0, 1fr)` avec 64 px de gouttière, la colonne de
   contenu plafonnée à 64rem et CENTRÉE dans sa piste. Sous 1000 px la grille
   bascule en une colonne et le menu passe à l'horizontale au-dessus du
   contenu - voir le bloc media plus bas. La bascule de la source est jouée
   en script, pas en feuille : son gabarit statique ne la montre pas. */
.dgc-compte .site-main,
.dgc-compte .content-area {
    margin: 0;
    padding: 0;
    width: 100%;
    float: none;
}
/* Le conteneur du contenu est nomme par un selecteur a quatre classes dans
   notre propre feuille (`body:not(.dgc-checkout).dgc-no-sidebar .site-content
   > .col-full`) : une regle a deux classes perdait sans un mot, et la page
   partait a 40 px du bord au lieu de 136. */
body.dgc-compte:not(.dgc-checkout).dgc-no-sidebar .site-content > .col-full,
.dgc-compte .col-full {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 16px;
}
.dgc-compte .hentry,
.dgc-compte .entry-content,
.dgc-compte .page-content {
    margin: 0;
    padding: 0;
    max-width: none;
}
.dgc-compte .entry-header,
.dgc-compte .dgc-fil-bloc {
    display: none;
}
/* `fit-content(20rem)` chez la source. Ici c'est `max-content` sur le menu
   lui-meme : Storefront pose `overflow-wrap: break-word` sur ses liens, ce qui
   ramene le `min-content` de la piste a la largeur d'UNE lettre - le menu
   sortait sur douze pixels de large, une lettre par ligne. */
.dgc-compte__grille {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 64px;
    align-items: start;
    /* Les 24 px d'air sous l'en-tête portent sur les DEUX colonnes : chez la
       source le premier mot du menu et le premier titre du contenu sont à la
       même ordonnée, 97,4. */
    padding-top: 24px;
}
.dgc-compte__contenu {
    width: auto;
    float: none;
}
.dgc-compte__colonne {
    /* 64rem chez la source, dont la racine est a 10 px : 640 px, et non les
       1024 qu'un `64rem` donnerait dans notre feuille. */
    max-width: 640px;
    margin-inline: auto;
}

/* ------------------------------------------------- LE MENU
   Deux mots, Inter 20/24 gras, 6 px entre eux, l'inactif à 56 % de noir. Le
   `nav` déborde de 5 px à gauche pour loger son cadre de mise au point : c'est
   ce qui met sa piste à 70,8 et le contenu à 270,8. */
.dgc-compte .dgc-compte__menu {
    width: max-content;
    max-width: 20rem;
    /* Le `nav` déborde de 5 px en haut et à gauche pour loger son cadre de
       mise au point : sans ces deux retraits, le premier mot descend de 5 px
       et la colonne de contenu part 5 px trop à droite. */
    margin: -5px 0 0 -5px;
    padding: 5px 5px 14px;
    border: 0;
    float: none;
}
.dgc-compte__menu ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.dgc-compte__menu li {
    margin: 0;
}
/* Le thème habille son menu de compte par
   `.hentry .entry-content .woocommerce-MyAccount-navigation ul li… a`, soit
   cinq classes : une règle à deux perdait, et chaque entrée gardait ses
   0,875em de rembourrage vertical. On reprend son sélecteur, en le nommant. */
.dgc-compte .hentry .entry-content .woocommerce-MyAccount-navigation.dgc-compte__menu ul li a,
.dgc-compte .dgc-compte__menu a {
    display: inline-block;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    overflow-wrap: normal;
    font-size: 20px;
    font-weight: var(--co-gras);
    line-height: 24px;
    color: var(--dgc-cp-gris);
    text-decoration: none;
    white-space: nowrap;
}
.dgc-compte .hentry .entry-content .dgc-compte__menu ul li.is-active > a,
.dgc-compte .hentry .entry-content .dgc-compte__menu ul li a[aria-current="page"],
.dgc-compte .dgc-compte__menu li.is-active > a,
.dgc-compte .dgc-compte__menu a[aria-current="page"] {
    color: #000;
}
/* Storefront numerote et encadre les entrees de son menu de compte, et
   WooCommerce leur pose un filet : la source n'a que deux mots. */
.dgc-compte .dgc-compte__menu li::before,
.dgc-compte .dgc-compte__menu li::after,
.dgc-compte .dgc-compte__menu a::before,
.dgc-compte .dgc-compte__menu a::after {
    content: none;
    display: none;
}
.dgc-compte .hentry .entry-content .dgc-compte__menu ul li,
.dgc-compte .hentry .entry-content .dgc-compte__menu ul,
.dgc-compte .dgc-compte__menu li,
.dgc-compte .dgc-compte__menu ul {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    list-style: none;
}

/* ------------------------------------------------- LA BASCULE
   Sous 1000 px : une seule colonne, les deux mots du menu à l'horizontale
   au-dessus du contenu, 16 px entre eux, et le menu suit le MÊME gabarit
   centré de 640 que la colonne de contenu - ses 5 px de rembourrage de cadre
   de mise au point en plus de chaque côté, d'où le plafond à 650. */
@media (max-width: 999px) {
    /* 16 d'air sous l'en-tête et 28 entre le menu et le contenu : le menu
       monte de 9 px et le contenu de 21 par rapport aux valeurs de bureau. */
    .dgc-compte__grille {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding-top: 16px;
    }
    .dgc-compte .dgc-compte__menu {
        /* Pas de rembourrage latéral ici : les mots s'alignent sur le bord du
           contenu, et le cadre de mise au point vit hors de la boîte. */
        width: 100%;
        max-width: 640px;
        margin: -5px auto 0;
        padding: 5px 0 0;
    }
    .dgc-compte__menu ul {
        flex-direction: row;
        gap: 16px;
    }
}
/* Sous 750 px : la déconnexion s'empile, son bouton prend toute la largeur
   et le lien se centre dessous ; les liens du pied se centrent aussi. */
@media (max-width: 749px) {
    .dgc-compte .dgc-compte__deconnexion {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }
    .dgc-compte .dgc-compte__deconnexion .dgc-compte__bouton {
        width: 100%;
    }
    .dgc-compte .dgc-compte__deconnexion .dgc-compte__lien {
        text-align: center;
    }
    .dgc-compte-pied {
        justify-content: center;
    }
}

/* ------------------------------------------------- LES BLOCS DU PROFIL
   24 px entre les blocs, 32 px avant la déconnexion : ce sont deux
   gouttières distinctes dans l'arbre de la source, pas l'arrondi d'une
   seule. */
.dgc-compte__sections {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.dgc-compte__blocs {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.dgc-compte__bloc {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.dgc-compte__bloc--sans-bouton {
    gap: 14px;
}
.dgc-compte__tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 37.5px;
}
.dgc-compte__bloc--sans-bouton .dgc-compte__tete {
    min-height: 40px;
}
.dgc-compte .dgc-compte__titre,
.dgc-compte .woocommerce-MyAccount-content .dgc-compte__titre {
    margin: 0;
    font-family: inherit;
    font-size: 16px;
    font-weight: var(--co-gras);
    line-height: 19.2px;
    letter-spacing: normal;
    text-transform: none;
    color: #000;
}

/* ------------------------------------------------- LES CARTES
   Pas de bordure : un anneau d'un demi-pixel et l'ombre `--x-box-shadow-small`
   de la source. Rayon 16. */
.dgc-compte__carte {
    background: #fff;
    border: 0;
    border-radius: 16px;
    box-shadow: var(--dgc-cp-ombre);
}
.dgc-compte__liste {
    margin: 0;
}
.dgc-compte__ligne {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 14px;
    padding: 16px;
    margin: 0;
}
/* La source n'avait qu'une ligne à l'export : le filet entre deux lignes suit
   celui des cartes de détail d'une commande, où il est mesuré. */
.dgc-compte__ligne + .dgc-compte__ligne {
    border-top: 1px solid var(--dgc-cp-bord);
}
.dgc-compte__ligne dt,
.dgc-compte__ligne dd {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 18.9px;
}
.dgc-compte__ligne dd {
    text-align: right;
}
.dgc-compte__carte--adresse {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 72px;
    padding: 16px;
}
.dgc-compte__pastille {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: var(--dgc-cp-gris);
    background: var(--dgc-cp-fond);
}
.dgc-compte__pastille svg {
    display: block;
    width: 18px;
    height: 18px;
}
.dgc-compte__vide {
    margin: 0;
    font-size: 14px;
    line-height: 18.9px;
    color: var(--dgc-cp-gris);
}
.dgc-compte__adresse {
    margin: 0;
    font-size: 14px;
    font-style: normal;
    line-height: 18.9px;
}
.dgc-compte__carte--reglage {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 16px;
}
.dgc-compte__icone {
    display: block;
    color: var(--dgc-cp-gris);
}
.dgc-compte__icone svg {
    display: block;
    width: 18px;
    height: 18px;
}
.dgc-compte__reglage-nom {
    font-size: 14px;
    line-height: 18.9px;
}

/* L'interrupteur, lu dans la feuille de la source et non deviné.
   -----------------------------------------------------------------------
   Piste de 40 x 24, rayon 36, filet de 1 px. La pastille est un
   pseudo-élément, et les DEUX états en changent la taille, la couleur ET la
   place - ce n'est pas une pastille blanche qui glisse :

     éteint  piste #FFFFFF, filet #DEDEDE, pastille de 14 en #707070 à 4 px
             du bord gauche ;
     allumé  piste et filet noirs, pastille de 20 en blanc à 17 px, plus une
             coche de 10 px au filet de 1,4 non mis à l'échelle.

   Les tailles sortent de ses variables : `(14 * 14) / 14` et `(14 * 20) / 14`
   sur un corps de 14 px. La bascule dure `--x-duration-fast`, 133,3 ms. */
.dgc-compte__interrupteur {
    position: relative;
    width: 40px;
    height: 24px;
    padding: 0;
    border: 1px solid #dedede;
    border-radius: 36px;
    background: #fff;
    cursor: pointer;
    transition: background-color .1333s ease-in-out, border-color .1333s ease-in-out;
}
.dgc-compte__interrupteur[aria-checked="true"] {
    border-color: var(--dgc-cp-accent);
    background: var(--dgc-cp-accent);
}
.dgc-compte__interrupteur-bouton {
    position: absolute;
    top: 50%;
    left: 4px;
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    /* La coche est du meme brun que l'interrupteur allume, pas noire : c'est
       la couleur de marque qui la dessine, comme la pastille de la page de
       remerciement. Sur Sveve Lys, dont l'accent est le noir, les deux se
       confondaient. */
    color: var(--dgc-cp-accent);
    background: #707070;
    transform: translateY(-50%);
    transition: left .1333s ease-in-out, width .1333s ease-in-out, height .1333s ease-in-out, background-color .1333s ease-in-out;
}
.dgc-compte__interrupteur[aria-checked="true"] .dgc-compte__interrupteur-bouton {
    left: 17px;
    width: 20px;
    height: 20px;
    background: #fff;
}
.dgc-compte__interrupteur-bouton svg {
    display: block;
    width: 10px;
    height: 10px;
    opacity: 0;
    transition: opacity .1333s ease-in-out;
}
.dgc-compte__interrupteur[aria-checked="true"] .dgc-compte__interrupteur-bouton svg {
    opacity: 1;
}

/* ------------------------------------------------- LES BOUTONS
   Rembourrage 9,33, rayon 12, un filet INTÉRIEUR de 1 px : la source pose son
   cadre en `box-shadow: inset`, pas en `border`, ce qui laisse la boîte à
   37,5 exactement. */
.dgc-compte .dgc-compte__bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 9.33px;
    border: 0;
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: var(--co-gras);
    line-height: 18.9px;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    color: #000;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--dgc-cp-bord);
    cursor: pointer;
    transition: background-color .1333s ease-in-out;
}
.dgc-compte .hentry .entry-content a.dgc-compte__bouton,
.dgc-compte .hentry .entry-content a.dgc-compte__bouton:hover,
.dgc-compte .hentry .entry-content a.dgc-compte__lien,
.dgc-compte a.dgc-compte__bouton,
.dgc-compte a.dgc-compte__bouton:hover {
    text-decoration: none;
}
/* La source ne change RIEN au survol de ces boutons - constaté par Alexandre
   le 28/08/2026. Le gris que j'avais posé était une invention. */
.dgc-compte .dgc-compte__bouton:hover,
.dgc-compte .dgc-compte__bouton:focus,
.dgc-compte .dgc-compte__bouton:active {
    color: #000;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--dgc-cp-bord);
}
.dgc-compte .dgc-compte__bouton--large {
    padding: 14px;
}
.dgc-compte__deconnexion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}
.dgc-compte .dgc-compte__lien {
    font-size: 14px;
    font-weight: 400;
    line-height: 18.9px;
    color: #000;
    text-decoration: none;
}
.dgc-compte .dgc-compte__lien:hover {
    text-decoration: underline;
}

/* ------------------------------------------------- LA LISTE DES COMMANDES
   Une carte par commande, et la carte EST le lien. Quatre colonnes de
   vignettes quelle que soit leur nombre : trois articles laissent la
   quatrième case vide, comme sur la source. */
.dgc-commandes {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.dgc-commandes__item {
    margin: 0;
}
.dgc-commande-carte {
    position: relative;
    padding: 16px;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--dgc-cp-ombre);
}
.dgc-commande-carte__lien {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}
.dgc-commande-carte__corps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.dgc-commande-carte__vignettes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.dgc-commande-carte__vignette {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 12px;
    background: var(--dgc-cp-fond);
}
.dgc-commande-carte__vignette img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
}
/* Le bouton est aligné sur le BAS du bloc, pas centré : mesuré à 285,3 contre
   un bloc qui finit à 322,8, soit exactement sa propre hauteur. */
.dgc-commande-carte__pied {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}
.dgc-commande-carte__statut {
    margin: 0;
    font-family: inherit;
    font-size: 20px;
    font-weight: var(--co-gras);
    line-height: 24px;
    letter-spacing: normal;
    text-transform: none;
    color: #000;
}
.dgc-commande-carte__meta {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 18.9px;
    color: var(--dgc-cp-gris);
}
.dgc-commande-carte__meta .amount,
.dgc-commande-carte__meta bdi {
    color: inherit;
    font-weight: inherit;
}
.dgc-commande-carte__racheter {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
}
.dgc-commandes__pagination {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

/* ------------------------------------------------- LE DÉTAIL D'UNE COMMANDE */
.dgc-commande {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.dgc-commande__tete {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 8px;
    row-gap: 0;
}
.dgc-commande__retour {
    display: block;
    margin-top: 4.3px;
    color: #000;
}
.dgc-commande__retour svg {
    display: block;
    width: 18px;
    height: 18px;
}
.dgc-commande__titre {
    margin: 0;
    font-family: inherit;
    font-size: 20px;
    font-weight: var(--co-gras);
    line-height: 24px;
    letter-spacing: normal;
    text-transform: none;
    color: #000;
}
.dgc-commande__date {
    margin: 2.5px 0 0;
    font-size: 14px;
    line-height: 18.9px;
    color: var(--dgc-cp-gris);
}
.dgc-commande__racheter {
    grid-row: 1 / span 2;
    grid-column: 3;
    align-self: start;
}
.dgc-commande__etat {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 16px;
}
.dgc-commande__etat-icone {
    flex: 0 0 auto;
    color: var(--dgc-cp-gris);
}
.dgc-commande__etat-icone svg {
    display: block;
    width: 18px;
    height: 18px;
}
.dgc-commande__etat-titre {
    margin: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: var(--co-gras);
    line-height: 16.8px;
    letter-spacing: normal;
    text-transform: none;
    color: #000;
}
.dgc-commande__etat-texte,
.dgc-commande__etat-date {
    display: block;
    margin: 0;
    font-size: 14px;
    line-height: 18.9px;
    color: #000;
}
.dgc-commande__resume {
    padding: 16px;
}
.dgc-commande__lignes {
    display: flex;
    flex-direction: column;
    /* 84,9 px de pas mesurés pour une vignette de 64 : la gouttière vaut donc
       20,9, et non 20 comme le jeton d'espacement le laisserait croire. */
    gap: 20.9px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.dgc-commande__ligne {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 15px;
    margin: 0;
}
.dgc-commande__vignette {
    position: relative;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--dgc-cp-fond);
    box-shadow: 0 1px 1.75px 0 rgba(0, 0, 0, .12), 0 -.5px 1.5px 0 rgba(0, 0, 0, .09), 0 3px 4px 0 rgba(0, 0, 0, .03);
}
.dgc-commande__vignette img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 2px solid #fff;
    border-radius: 16px;
    object-fit: contain;
}
/* La pastille de quantité déborde de 4 px du coin haut droit de la vignette :
   `--x-product-thumbnail-badge-offset: .4rem` chez la source. */
.dgc-commande__quantite {
    position: absolute;
    top: -4px;
    right: -4px;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 16.2px;
    color: #fff;
    background: #000;
}
.dgc-commande__nom {
    display: block;
    font-size: 14px;
    line-height: 18.9px;
    color: #000;
}
.dgc-commande__variante {
    display: block;
    font-size: 12px;
    line-height: 16.2px;
    color: var(--dgc-cp-gris);
}
.dgc-commande__prix {
    margin: 0;
    font-size: 14px;
    line-height: 18.9px;
    text-align: right;
    color: #000;
}
.dgc-commande__totaux {
    margin: 29.9px 0 0;
}
.dgc-commande__total-ligne {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
}
.dgc-commande__total-ligne + .dgc-commande__total-ligne {
    margin-top: 6px;
}
.dgc-commande__total-ligne dt,
.dgc-commande__total-ligne dd {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 18.9px;
    color: #000;
}
.dgc-commande__total-ligne--gros {
    margin-top: 15.9px !important;
    align-items: center;
}
.dgc-commande__total-ligne--gros dd {
    display: flex;
    align-items: baseline;
    gap: 5.9px;
}
.dgc-commande__total-ligne--gros strong {
    font-size: 18px;
    font-weight: var(--co-gras);
    line-height: 24.3px;
}
.dgc-commande__devise {
    border: 0;
    text-decoration: none;
}
.dgc-commande__taxes {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 16.2px;
    color: var(--dgc-cp-gris);
}
.dgc-commande__details {
    padding: 0;
}
.dgc-commande__detail {
    padding: 16px;
}
.dgc-commande__detail + .dgc-commande__detail {
    border-top: 1px solid var(--dgc-cp-bord);
}
.dgc-commande__detail dl {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    column-gap: 40px;
    margin: 0;
}
.dgc-commande__detail dt,
.dgc-commande__detail dd {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 18.9px;
}
.dgc-commande__detail dt {
    color: var(--dgc-cp-gris);
}
.dgc-commande__detail dd p {
    margin: 0;
    font-size: 14px;
    line-height: 18.9px;
}
.dgc-commande__paiement-meta {
    color: var(--dgc-cp-gris);
}

/* ------------------------------------------------- LES PANNEAUX
   Même mécanique que dans le tunnel : un `<dialog>` natif ouvert par
   `showModal()`, donc avec son `::backdrop`, sa couche supérieure, son piège à
   focus et la touche Échap. */
.dgc-compte__panneau {
    width: min(560px, calc(100vw - 32px));
    max-height: min(80svh, 720px);
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--dgc-cp-ombre);
    overflow: auto;
    animation: dgc-compte-entre .2s ease-out;
}
.dgc-compte__panneau::backdrop {
    background: rgba(0, 0, 0, .28);
    animation: dgc-compte-voile .2s ease-out;
}
.dgc-compte__panneau.se-ferme,
.dgc-compte__panneau.se-ferme::backdrop {
    animation: dgc-compte-sort .2s ease-out forwards;
}
@keyframes dgc-compte-entre {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
}
@keyframes dgc-compte-voile {
    from { opacity: 0; }
}
@keyframes dgc-compte-sort {
    to { opacity: 0; }
}
.dgc-compte__panneau-tete {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
    background: #fff;
    border-bottom: 1px solid var(--dgc-cp-bord);
}
.dgc-compte__panneau-titre {
    margin: 0;
    font-family: inherit;
    font-size: 16px;
    font-weight: var(--co-gras);
    line-height: 19.2px;
    letter-spacing: normal;
    text-transform: none;
    color: #000;
}
.dgc-compte .dgc-compte__panneau-fermer {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #000;
    background: var(--dgc-cp-fond);
    cursor: pointer;
}
.dgc-compte__panneau-corps {
    padding: 16px;
    font-size: 14px;
    line-height: 22.4px;
}
.dgc-compte__panneau-corps > :first-child {
    margin-top: 0;
}
.dgc-compte__panneau-corps > :last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------- LE PIED DE PAGE
   Six liens de 12 px, soulignés, gouttière 4 x 14, au bas de la fenêtre. */
.dgc-compte .site-footer,
.dgc-compte .site-footer .col-full {
    margin: 0;
    padding: 0;
    border: 0;
    color: #000;
    background: #fff;
    max-width: none;
}
.dgc-compte-pied {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    max-width: 1200px;
    margin-inline: auto;
    padding: 0 16px 20px;
}
.dgc-compte-pied--seul {
    justify-content: center;
}
.dgc-compte .dgc-compte-pied__lien {
    font-family: inherit;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    margin: 0;
    padding: 0;
    border: 0;
    color: #000;
    background: none;
    text-decoration: underline;
    text-decoration-thickness: .075em;
    text-underline-offset: .125em;
    cursor: pointer;
}
.dgc-compte-pied__lien small {
    font-size: 12px;
    line-height: 16.2px;
}
.dgc-compte-pied--seul .dgc-compte-pied__lien {
    font-size: 14px;
    line-height: 18.9px;
    text-decoration: none;
    /* The login screen's lone link is the ACCENT, not black. Measured on the
       source 2026-09-10 (dogcherie.co.uk/account/login, computed style):
       rgb(233, 76, 120) at rest, rgb(196, 54, 96) on hover - the same pair as
       the tunnel's primary button. Only this footer was measured: the six
       12 px links of the signed-in account need a session to read, so they
       keep the black they were given. */
    color: #E94C78;
}
.dgc-compte-pied--seul .dgc-compte-pied__lien:hover,
.dgc-compte-pied--seul .dgc-compte-pied__lien:focus-visible {
    color: #C43660;
}

/* ------------------------------------------------- LA PAGE DE CONNEXION
   Colonne de 379 px, centrée sur la page ET dans la fenêtre ; logo seul en
   haut. Le mot de passe et la rangée « Se souvenir de moi » sont à nous : la
   source envoie un code à six chiffres, ce que WooCommerce ne sait pas faire.
   Alexandre l'a dit avant qu'on commence. */
.dgc-compte--anonyme .dgc-compte__grille,
.dgc-compte--anonyme .woocommerce-MyAccount-navigation {
    display: block;
}
.dgc-connexion {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100svh - 260px);
    padding-block: 40px;
}
.dgc-connexion__colonne {
    width: 379px;
    max-width: 100%;
}
/* 22/26,4 : le `<h1>` de la source mesure 20/24, mais le mot lui-même vit
   dans un `<span>` qui remonte à 22. C'est ce qui se voit. */
.dgc-connexion__titre {
    margin: 0;
    font-family: inherit;
    font-size: 22px;
    font-weight: var(--co-gras);
    line-height: 26.4px;
    letter-spacing: normal;
    text-transform: none;
    color: #000;
}
.dgc-connexion__sous-titre {
    margin: 6px 0 20px;
    font-size: 14px;
    line-height: 18.9px;
    color: var(--dgc-cp-gris);
}
.dgc-connexion__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 20px 0 0;
}
/* Les champs sont ceux des panneaux : 49 px de haut, rayon 12, filet
   `#dedede`, étiquette flottante. La source ne fait PAS de pilule ici -
   `border-radius: 12px` relevé sur son export. */
.dgc-connexion__champ--envoi .dgc-compte__champ-saisie {
    padding-right: 52px;
}
.dgc-connexion__champ--envoi.dgc-compte__champ:has( .dgc-compte__champ-saisie:placeholder-shown ) .dgc-compte__champ-saisie {
    padding-right: 52px;
}
/* Rayon 12 comme le champ qui le porte, pas une pastille ronde : invisible
   tant que le fond est transparent, c'est lui qui dessine le carré arrondi
   noir quand le champ se remplit. */
.dgc-compte .dgc-connexion__fleche {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    color: #000;
    background: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.dgc-connexion__fleche svg {
    display: block;
    width: 18px;
    height: 18px;
}
.dgc-connexion__rappel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 18.9px;
}
.dgc-connexion__memoire {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
/* La case, dessinée comme celle de la source : 20 x 20, rayon 8, filet
   intérieur `#dedede` de 1 px. Le remplissage est la COULEUR de fond, en
   fondu de 133 ms : la coche blanche est une image de fond peinte en
   permanence, et une image de fond passe AU-DESSUS de la couleur mais SOUS un
   box-shadow inset - remplir par l'ombre la recouvrait de noir. Trait de 1,4
   vu peint (1,96 dans la boîte de 14 réduite à 10). */
.dgc-compte .dgc-connexion__memoire .woocommerce-form__input-checkbox {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='m1.5 7.097 3.596 3.602c.104.105.156.157.216.175a.25.25 0 0 0 .16-.004c.059-.022.108-.077.206-.188L12.5 3' fill='none' stroke='%23fff' stroke-width='1.96' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
    box-shadow: inset 0 0 0 1px #dedede;
    cursor: pointer;
    transition: background-color .1333s cubic-bezier(.3, .5, .5, 1), box-shadow .1333s cubic-bezier(.3, .5, .5, 1);
}
.dgc-compte .dgc-connexion__memoire .woocommerce-form__input-checkbox:checked {
    background-color: var(--dgc-cp-accent);
    box-shadow: inset 0 0 0 1px var(--dgc-cp-accent);
}
.dgc-compte .dgc-connexion__oubli {
    color: var(--dgc-cp-gris);
    text-decoration: none;
}
.dgc-compte .dgc-connexion__oubli:hover {
    text-decoration: underline;
}
.dgc-connexion__separateur {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 24px 0;
    font-size: 14px;
    line-height: 18.9px;
    color: var(--dgc-cp-gris);
}
.dgc-connexion__separateur::before,
.dgc-connexion__separateur::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--dgc-cp-bord);
}
.dgc-compte .dgc-connexion__valider {
    width: 100%;
    padding: 14px;
    border: 0;
    border-radius: 36px;
    font-size: 14px;
    font-weight: var(--co-gras);
    line-height: 18.9px;
    color: #fff;
    background: var(--dgc-cp-accent);
    cursor: pointer;
}

/* ------------------------------------------------- LES MESSAGES
   WooCommerce peint ses bandeaux pleine largeur, en vert et en gris, que la
   source n'a nulle part : ils reprennent le dessin des cartes. */
.dgc-compte .woocommerce-message,
.dgc-compte .woocommerce-info,
.dgc-compte .woocommerce-error {
    margin: 0 0 20px;
    padding: 16px;
    border: 0;
    border-radius: 16px;
    font-size: 14px;
    line-height: 18.9px;
    color: #000;
    background: #fff;
    box-shadow: var(--dgc-cp-ombre);
    list-style: none;
}
.dgc-compte .woocommerce-message::before,
.dgc-compte .woocommerce-info::before,
.dgc-compte .woocommerce-error::before {
    content: none;
}

/* ------------------------------------------------- TÉLÉPHONE
   La marge de page passe de 40 à 16. « Acheter à nouveau » reste en haut à
   droite de la rangée de titre À TOUTES LES LARGEURS : ne pas le faire
   descendre sous le titre en étroit. */
@media screen and (max-width: 749px) {
    .dgc-compte .col-full {
        padding-inline: 16px;
    }
}

/* Les titres de l'espace client, repassés devant Storefront.
   -----------------------------------------------------------------------
   Le thème habille les titres par `.hentry .entry-content h1..h6`, soit deux
   classes et un élément : nos règles à une classe passaient dessous, et
   chaque titre de carte sortait dans la préselection du thème au lieu de
   l'Inter 14 à 20 de la source. On reprend son sélecteur, en le nommant. */
.dgc-compte .hentry .entry-content .dgc-compte__titre,
.dgc-compte .hentry .entry-content .dgc-commande__titre,
.dgc-compte .hentry .entry-content .dgc-commande__etat-titre,
.dgc-compte .hentry .entry-content .dgc-commande-carte__statut,
.dgc-compte .hentry .entry-content .dgc-compte__panneau-titre,
.dgc-compte .hentry .entry-content .dgc-connexion__titre {
    font-family: inherit;
    font-weight: var(--co-gras);
    letter-spacing: normal;
    text-transform: none;
    color: #000;
}
.dgc-compte .hentry .entry-content .dgc-compte__titre,
.dgc-compte .hentry .entry-content .dgc-compte__panneau-titre {
    font-size: 16px;
    line-height: 19.2px;
}
.dgc-compte .hentry .entry-content .dgc-commande__titre,
.dgc-compte .hentry .entry-content .dgc-commande-carte__statut {
    font-size: 20px;
    line-height: 24px;
}
.dgc-compte .hentry .entry-content .dgc-connexion__titre {
    font-size: 22px;
    line-height: 26.4px;
}
.dgc-compte .hentry .entry-content .dgc-commande__etat-titre {
    font-size: 14px;
    line-height: 16.8px;
}

/* Le bouton flèche du champ de mot de passe, repassé devant Storefront.
   -----------------------------------------------------------------------
   Le thème peint tous les `button` en noir : sans ce sélecteur nommé, la
   flèche sortait en carré noir à l'intérieur de la pilule. Et WooCommerce
   glisse son œil « afficher le mot de passe » dans le champ, que la source
   n'a pas. */
.dgc-compte .hentry .entry-content button.dgc-connexion__fleche,
.dgc-compte button.dgc-connexion__fleche,
.dgc-compte button.dgc-connexion__fleche:hover,
.dgc-compte button.dgc-connexion__fleche:focus {
    width: 36px;
    min-width: 0;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    color: #000;
    background: none;
    box-shadow: none;
    letter-spacing: normal;
    text-transform: none;
}
/* Champ rempli : le bouton s'encre en noir et la flèche passe en blanc, en
   fondu de 0,2 s (la transition vit sur le bouton). `~` et non `+` :
   WooCommerce peut glisser son œil « afficher le mot de passe » entre la
   saisie et le bouton. */
.dgc-compte .dgc-connexion__champ--envoi .dgc-compte__champ-saisie:not( :placeholder-shown ) ~ button.dgc-connexion__fleche {
    color: #fff;
    background: var(--dgc-cp-accent);
}
.dgc-compte .show-password-input,
.dgc-compte .woocommerce-password-hint,
.dgc-compte .woocommerce-password-strength {
    display: none !important;
}

/* ==========================================================================
   ESPACE CLIENT : LES PANNEAUX D'ÉDITION
   --------------------------------------------------------------------------
   Relevé le 28/08/2026 sur l'export « panneau ouvert » de la source, au
   navigateur. Tous les nombres viennent de là.
   ========================================================================== */
.dgc-compte__panneau--edition {
    width: min(640px, calc(100vw - 32px));
    max-height: min(90svh, 760px);
    padding: 0;
    border: 1px solid var(--dgc-cp-bord);
    border-radius: 16px;
    background: #fff;
    box-shadow:
        0 1px 2px -.5px rgba(0, 0, 0, .05),
        0 2px 4px -1px rgba(0, 0, 0, .08),
        0 3px 6px -1.5px rgba(0, 0, 0, .08),
        0 8px 16px -6px rgba(0, 0, 0, .06),
        0 24px 40px -12px rgba(0, 0, 0, .06),
        0 32px 48px -12px rgba(0, 0, 0, .06),
        0 -.5px 1.5px 0 rgba(0, 0, 0, .09);
}
/* Le voile de la source floute la page derrière, il ne fait pas que
   l'assombrir : `backdrop-filter: blur(6px)`, relevé sur son propre calque. */
.dgc-compte__panneau--edition::backdrop {
    background: rgba(0, 0, 0, .28);
    backdrop-filter: blur(6px);
}
.dgc-compte__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
}
.dgc-compte__panneau--edition .dgc-compte__panneau-tete {
    position: static;
    align-items: flex-start;
    padding: 14px 20px 0;
    border: 0;
}
.dgc-compte .dgc-compte__panneau--edition .dgc-compte__panneau-titre {
    font-size: 20px;
    line-height: 24px;
    padding-right: 34px;
}
.dgc-compte .dgc-compte__panneau--edition .dgc-compte__panneau-fermer {
    width: 26px;
    height: 26px;
    padding: 4px;
    border-radius: 12px;
    color: var(--dgc-cp-gris);
    background: #fff;
}
.dgc-compte__panneau--edition .dgc-compte__panneau-fermer svg {
    display: block;
    width: 18px;
    height: 18px;
}
.dgc-compte__panneau--edition .dgc-compte__panneau-corps {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 20px 14px;
    font-size: 14px;
    line-height: 18.9px;
}
.dgc-compte__paire {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.dgc-compte__champ-bloc {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* L'étiquette ne se translate pas : elle est POSÉE en haut de la boîte, et
   c'est le rembourrage haut de la saisie qui lui fait sa place. */
.dgc-compte__champ {
    position: relative;
    border: 1px solid #dedede;
    border-radius: 12px;
    background: #fff;
}
.dgc-compte__champ-libelle {
    position: absolute;
    top: 5.9px;
    left: 10px;
    margin: 0;
    pointer-events: none;
}
.dgc-compte__champ-libelle span {
    font-size: 12px;
    font-weight: 400;
    line-height: 16.2px;
    color: #707070;
}
.dgc-compte .dgc-compte__champ-saisie {
    display: block;
    width: 100%;
    margin: 0;
    padding: 21.05px 10px 6.05px;
    border: 0;
    border-radius: 12px;
    box-shadow: none;
    font-size: 14px;
    line-height: 18.9px;
    color: #000;
    background: none;
}
.dgc-compte .dgc-compte__champ-saisie:focus {
    outline: 1px solid var(--dgc-cp-accent);
    outline-offset: 0;
}
/* L'étiquette FLOTTE vraiment : champ vide, la source n'affiche que le mot au
   centre (rembourrage 13.55/10) ; rempli, le mot monte et la saisie se décale
   (21.05/10/6.05). Relevé sur son panneau « Ajouter une adresse ». */
.dgc-compte .dgc-compte__champ-saisie:placeholder-shown {
    padding: 13.55px 10px;
}
.dgc-compte__champ:has( .dgc-compte__champ-saisie:placeholder-shown ) .dgc-compte__champ-libelle {
    opacity: 0;
}
.dgc-compte .dgc-compte__champ-saisie::placeholder {
    color: #707070;
    opacity: 1;
}
/* Le champ rempli ne montre plus le mot au centre : il est passé en haut. */
.dgc-compte .dgc-compte__champ-saisie:not(:placeholder-shown)::placeholder {
    color: transparent;
}

/* Le sélecteur de pays : même boîte, plus un chevron à droite. */
.dgc-compte__champ--liste {
    position: relative;
}
.dgc-compte .dgc-compte__champ--liste .dgc-compte__champ-saisie {
    padding: 21.05px 30px 6.05px 10px;
    background: #fff;
    appearance: none;
    -webkit-appearance: none;
}
.dgc-compte__champ-chevron {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: var(--dgc-cp-gris);
    pointer-events: none;
}
.dgc-compte__champ-chevron svg {
    display: block;
    width: 18px;
    height: 18px;
}
.dgc-compte__aide {
    display: block;
    font-size: 12px;
    line-height: 16.2px;
    color: var(--dgc-cp-gris);
}
.dgc-compte__panneau-pied {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    min-height: 46.9px;
}
.dgc-compte .dgc-compte__annuler {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 18.9px;
    letter-spacing: normal;
    text-transform: none;
    color: #000;
    background: none;
    text-decoration: underline;
    text-decoration-thickness: .075em;
    text-underline-offset: .125em;
    cursor: pointer;
}
/* Grisé tant que rien n'a changé, comme la source. Sa couleur ACTIVE n'a pas
   pu être relevée - son export a été pris avant toute modification - et
   reprend ici le bouton de l'espace client. */
.dgc-compte .dgc-compte__enregistrer {
    margin: 0;
    padding: 14px;
    border: 0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: var(--co-gras);
    line-height: 18.9px;
    letter-spacing: normal;
    text-transform: none;
    color: #000;
    background: var(--dgc-cp-fond);
    box-shadow: none;
    cursor: pointer;
}
.dgc-compte .dgc-compte__enregistrer[disabled] {
    color: #000;
    background: var(--dgc-cp-fond);
    opacity: .5;
    cursor: default;
}
.dgc-compte .dgc-compte__enregistrer:not([disabled]) {
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--dgc-cp-bord);
}

/* La carte d'adresse renseignée : nom en gras, badge, adresse sur une ligne,
   chevron à droite. */
/* La carte est un `<button>` : Storefront habille TOUS ses boutons en
   capitales interlettrées. Il faut lui rendre la typographie du texte. */
.dgc-compte button.dgc-compte__carte--lien,
.dgc-compte button.dgc-compte__carte--lien span {
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 18.9px;
    letter-spacing: normal;
    text-transform: none;
}
.dgc-compte button.dgc-compte__carte--lien {
    width: 100%;
    padding: 16px;
    border: 0;
    text-align: left;
    cursor: pointer;
}
.dgc-compte button.dgc-compte__carte--lien .dgc-compte__adresse-nom {
    font-weight: var(--co-gras);
}
.dgc-compte button.dgc-compte__carte--lien .dgc-compte__badge {
    font-size: 12px;
    font-weight: var(--co-gras);
    line-height: 16.2px;
    color: var(--dgc-cp-gris);
}
.dgc-compte .dgc-compte__carte--lien {
    display: flex;
    align-items: center;
    gap: 20px;
    color: #000;
    text-decoration: none;
}
.dgc-compte__carte--lien .dgc-compte__adresse {
    flex: 1 1 auto;
    display: block;
    font-style: normal;
}
.dgc-compte__adresse-nom {
    display: block;
    font-size: 14px;
    font-weight: var(--co-gras);
    line-height: 18.9px;
}
.dgc-compte__badge {
    margin-left: 8px;
    font-size: 12px;
    font-weight: var(--co-gras);
    line-height: 16.2px;
    color: var(--dgc-cp-gris);
}
.dgc-compte__adresse-ligne {
    display: block;
    font-size: 14px;
    line-height: 18.9px;
}
.dgc-compte__chevron {
    flex: 0 0 auto;
    color: var(--dgc-cp-gris);
}
.dgc-compte__chevron svg {
    display: block;
    width: 18px;
    height: 18px;
}

/* Le titre du panneau d'édition est en 20/24, pas en 16 comme un titre de
   bloc : la règle des titres de section, plus spécifique, le rattrapait. */
.dgc-compte .hentry .entry-content .dgc-compte__panneau--edition .dgc-compte__panneau-titre,
.dgc-compte .dgc-compte__panneau--edition .dgc-compte__panneau-titre {
    font-size: 20px;
    line-height: 24px;
}

/* Les liens habillés en bouton, repassés devant la règle de lien du thème.
   -----------------------------------------------------------------------
   `.hentry .entry-content p:not(.dgc-voir-tout) a:not(.button):not(.wp-block-button__link)`
   pèse [0,6,1] avec ses deux `:not()` : elle repeignait « Acheter à nouveau »
   en 81 % de noir et le soulignait. La source le rend en noir plein, sans
   trait. Ces quatre propriétés sont mesurées sur elle, il n'y a rien à
   laisser négocier à la cascade. */
.dgc-compte a.dgc-compte__bouton,
.dgc-compte a.dgc-compte__bouton:hover,
.dgc-compte a.dgc-compte__bouton:focus,
.dgc-compte a.dgc-compte__lien,
.dgc-compte a.dgc-compte__carte--lien {
    color: #000 !important;
    text-decoration: none !important;
}
.dgc-compte a.dgc-compte__lien:hover {
    text-decoration: underline !important;
}

/* ==========================================================================
   DÉTAIL D'UNE COMMANDE : LES CORRECTIONS DU 28/08/2026
   ========================================================================== */

/* La vignette : la source laisse ses photos en `object-fit: contain`, avec les
   bandes crème sur les côtés. Alexandre préfère le cadrage plein - ÉCART
   ASSUMÉ, demandé le 28/08/2026 - mais l'image ne doit pas sortir de la boîte.
   `cover` plus `overflow: hidden` sur le carré : le débordement venait du
   filet blanc de 2 px ajouté à une image déjà à 100 %. */
.dgc-commande__vignette {
    overflow: hidden;
}
/* `height: 100%` ne suffit pas : Storefront pose `img { height: auto }` avec
   plus de poids, et l'image ressortait à 64 x 80. On la cale sur la boîte. */
.dgc-compte .dgc-commande__vignette img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    border-radius: 16px;
    object-fit: cover;
    object-position: center;
}

/* Le total : « Total » est un `<strong>` de 18/24,3, pas un libellé de 14 ;
   « EUR » est un `<span>` de 12/16,2 à 56 % de noir. Un `<abbr>` s'y faisait
   souligner en pointillés par le navigateur. */
.dgc-compte .dgc-commande__total-ligne--gros dt,
.dgc-compte .dgc-commande__total-ligne--gros dt strong {
    font-size: 18px;
    font-weight: var(--co-gras);
    line-height: 24.3px;
    color: #000;
}
.dgc-compte .dgc-commande__devise {
    border: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 16.2px;
    color: var(--dgc-cp-gris);
    text-decoration: none;
}

/* La carte « Nouveautés et offres » : son titre vit DANS la carte, et sa case
   est ronde. */
.dgc-commande__nouvelles {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
}
.dgc-commande__case {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-size: 14px;
    line-height: 18.9px;
    color: #000;
    cursor: pointer;
}
/* La case de la source est un CARRÉ à coins arrondis de 18 px, filet clair -
   pas un rond. Relevé sur les captures d'Alexandre du 28/08/2026. */
.dgc-compte .dgc-commande__case-boite {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--dgc-cp-bord);
    border-radius: 4px;
    background: #fff;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: opacity .1333s ease-in-out;
}
/* Une fois abonné, la source EFFACE la case : il ne reste que la coche nue à
   côté de la phrase, et le geste ne se défait plus. */
.dgc-commande__nouvelles.est-abonne .dgc-commande__case-boite {
    border-color: transparent;
    background: none;
    cursor: default;
}
.dgc-commande__nouvelles.est-abonne .dgc-commande__case {
    cursor: default;
}
.dgc-commande__nouvelles.est-abonne .dgc-commande__case-boite::after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-color: var(--dgc-cp-gris);
    -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12.1 2.8-5.877 8.843a.35.35 0 0 1-.54.054L1.4 7.4'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
    mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12.1 2.8-5.877 8.843a.35.35 0 0 1-.54.054L1.4 7.4'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
}

/* ==========================================================================
   ESPACE CLIENT : LA COULEUR ET LE LISSAGE
   --------------------------------------------------------------------------
   Deux valeurs héritées de la vitrine faisaient tout paraître « pas de la même
   couleur, pas du même gras » alors que chaque taille était juste :

     - le thème écrit son texte courant en `rgba(0, 0, 0, .81)`. L'application
       de compte de la source écrit en NOIR PLEIN ;
     - le thème pose `-webkit-font-smoothing: antialiased` sur le corps, ce qui
       AMINCIT chaque glyphe. L'export de la source rend en
       `subpixel-antialiased`, c'est-à-dire la valeur par défaut du navigateur.

   Aucune boîte ne pouvait le voir : à graisse et à corps égaux les glyphes
   occupent la même place, seul leur remplissage change.
   ========================================================================== */
.dgc-compte,
.dgc-compte .site,
.dgc-compte .site-content,
.dgc-compte .hentry,
.dgc-compte .entry-content {
    color: #000;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}
.dgc-compte .dgc-compte__panneau,
.dgc-compte__panneau {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}

/* ==========================================================================
   ESPACE CLIENT : LES PANNEAUX DE TEXTE LÉGAL
   --------------------------------------------------------------------------
   Le corps du panneau reçoit le contenu d'une page WordPress : sans ces
   règles, il sort dans la typographie ÉDITORIALE du site - titres en Libre
   Baskerville de 32 px, texte en 14/22,4 gris. La source rend ce même texte
   dans la typographie de son application : Inter 14, titres en 14 gras,
   noir plein.
   ========================================================================== */
.dgc-compte .dgc-compte__panneau {
    border-radius: 16px;
    overflow: hidden;
}
.dgc-compte .dgc-compte__panneau-corps {
    max-height: none;
    overflow: visible;
    color: #000;
}
/* Pas de `display` ici : le poser sur le sélecteur nu écrase le
   `display: none` que le navigateur met sur un `<dialog>` fermé, et les six
   panneaux se peignent en bas de page. La mise en page va sur `[open]`. */
.dgc-compte .dgc-compte__panneau:not(.dgc-compte__panneau--edition) {
    padding: 0;
}
/* Chez la source, c'est le PANNEAU ENTIER qui défile - son titre et sa croix
   partent avec le texte, et l'ascenseur commence tout en haut de la boîte. Un
   en-tête collant, comme le nôtre, laisse une bande fixe et fait démarrer la
   barre sous le titre. */
/* `display` UNIQUEMENT sur un panneau OUVERT. Sans le `[open]`, la règle
   écrasait le `display: none` que le navigateur pose sur un `<dialog>` fermé,
   et les six panneaux légaux se peignaient en bas de page, dans le flux. C'est
   le « Coordonnées » fantôme, et il venait de cette ligne. */
.dgc-compte .dgc-compte__panneau:not(.dgc-compte__panneau--edition) {
    width: min(540px, calc(100vw - 32px));
    /* `hidden` sur le dialogue, `auto` sur son enfant : un ascenseur posé
       directement sur la boîte arrondie se peint dans son coin et ronge
       l'arrondi de droite. */
    overflow: hidden;
}
.dgc-compte .dgc-compte__panneau:not(.dgc-compte__panneau--edition)[open] {
    display: block;
}
.dgc-compte__panneau-defile {
    max-height: inherit;
    height: 100%;
    overflow: auto;
}
.dgc-compte .dgc-compte__panneau:not(.dgc-compte__panneau--edition) .dgc-compte__panneau-corps {
    padding: 0 20px 20px;
}
.dgc-compte .dgc-compte__panneau:not(.dgc-compte__panneau--edition) {
    max-height: min(80svh, 720px);
}
.dgc-compte .dgc-compte__panneau:not(.dgc-compte__panneau--edition) .dgc-compte__panneau-tete {
    position: static;
    padding: 20px 20px 14px;
    border: 0;
}
/* La croix de la source est NUE : pas de rond gris derrière, un glyphe de
   18 px en 56 % de noir. */
.dgc-compte .dgc-compte__panneau:not(.dgc-compte__panneau--edition) .dgc-compte__panneau-fermer {
    width: 18px;
    height: 18px;
    padding: 0;
    border-radius: 0;
    color: var(--dgc-cp-gris);
    background: none;
}
.dgc-compte .dgc-compte__panneau:not(.dgc-compte__panneau--edition) .dgc-compte__panneau-fermer svg {
    display: block;
    width: 18px;
    height: 18px;
}
.dgc-compte .dgc-compte__panneau-corps :is(h1, h2, h3, h4, h5, h6) {
    margin: 20px 0 6px;
    font-family: inherit;
    font-size: 14px;
    font-weight: var(--co-gras);
    line-height: 18.9px;
    letter-spacing: normal;
    text-transform: none;
    color: #000;
}
.dgc-compte .dgc-compte__panneau-corps p,
.dgc-compte .dgc-compte__panneau-corps li {
    margin: 0 0 14px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 18.9px;
    color: #000;
}
.dgc-compte .dgc-compte__panneau-corps ul,
.dgc-compte .dgc-compte__panneau-corps ol {
    margin: 0 0 14px;
    padding-inline-start: 21px;
}
.dgc-compte .dgc-compte__panneau-corps a {
    color: #000;
    text-decoration: underline;
    text-decoration-thickness: .075em;
    text-underline-offset: .125em;
}
.dgc-compte .dgc-compte__panneau-corps > :last-child {
    margin-bottom: 0;
}

/* La carte d'adresse ne change RIEN au survol : la source ne bouge que le
   curseur. Storefront, lui, grise le fond de tous ses boutons et leur pose un
   cadre noir - c'est ce qui la faisait virer au gris foncé. */
.dgc-compte button.dgc-compte__carte--lien:hover,
.dgc-compte button.dgc-compte__carte--lien:focus,
.dgc-compte button.dgc-compte__carte--lien:active,
.dgc-compte button.dgc-compte__carte--lien:focus:not(:focus-visible) {
    border: 0;
    outline: none;
    color: #000;
    background: #fff;
    box-shadow: var(--dgc-cp-ombre);
}

/* L'interrupteur ne bouge pas au survol chez la source : Storefront noircit le
   fond de tous ses boutons, et la piste virait au noir sous le curseur. */
.dgc-compte .dgc-compte__interrupteur:hover,
.dgc-compte .dgc-compte__interrupteur:focus,
.dgc-compte .dgc-compte__interrupteur:active {
    border-color: #dedede;
    background: #fff;
    box-shadow: none;
}
.dgc-compte .dgc-compte__interrupteur[aria-checked="true"]:hover,
.dgc-compte .dgc-compte__interrupteur[aria-checked="true"]:focus,
.dgc-compte .dgc-compte__interrupteur[aria-checked="true"]:active {
    border-color: var(--dgc-cp-accent);
    background: var(--dgc-cp-accent);
}
.dgc-compte .dgc-compte__interrupteur:hover .dgc-compte__interrupteur-bouton {
    background: #707070;
}
.dgc-compte .dgc-compte__interrupteur[aria-checked="true"]:hover .dgc-compte__interrupteur-bouton {
    background: #fff;
}

/* La fenêtre de confirmation du désabonnement : plus courte que les panneaux
   d'édition, et son bouton d'action est NOIR PLEIN - c'est le seul de
   l'espace client à l'être. */
/* La fenêtre de confirmation fait la même largeur que les panneaux de texte -
   540 px - et sa phrase tient sur UNE ligne. À 420 elle passait sur deux. */
.dgc-compte__panneau--court {
    width: min(540px, calc(100vw - 32px));
}
.dgc-compte__desabo-texte {
    margin: 0;
    font-size: 14px;
    line-height: 18.9px;
    color: #000;
}
/* Le bouton d'action de cette fenêtre est le seul NOIR PLEIN de l'espace
   client. Il faut passer devant `…__enregistrer:not([disabled])`, dont le
   `:not()` d'attribut compte dans la spécificité : le bouton ressortait blanc
   sur blanc, donc vide. */
.dgc-compte .dgc-compte__enregistrer.dgc-compte__enregistrer--noir,
.dgc-compte .dgc-compte__enregistrer.dgc-compte__enregistrer--noir:hover,
.dgc-compte .dgc-compte__enregistrer.dgc-compte__enregistrer--noir:focus,
.dgc-compte .dgc-compte__enregistrer--noir,
.dgc-compte .dgc-compte__enregistrer--noir:hover,
.dgc-compte .dgc-compte__enregistrer--noir:focus {
    color: #fff;
    background: var(--dgc-cp-accent);
    box-shadow: none;
    opacity: 1;
}

/* ==========================================================================
   LES TROIS DERNIERS ECARTS AVEC SVEVE LYS
   ==========================================================================
   Releves par scripts/rendu/tunnel-compte.js apres le portage, et corriges
   ici plutot que dans le bloc porte : ils ne viennent pas de la source, ils
   viennent de ce que Galerie Sac a Dos a autour d'elle.
   ========================================================================== */

/* 1. LE SUFFIXE DE TVA DU TOTAL — sans objet ici.

   Galerie Sac a Dos retire en PHP le « (dont 16,66 € TVA 20 % estimee pour
   la France) » que WooCommerce ecrit sous le total. Dog Cherie ne calcule
   aucune taxe (toutes ses variantes sont `taxable: false`, prix TTC, voir
   scripts/base/003-reglages-woocommerce.php) : le suffixe n'est jamais
   ecrit, et rien n'est a retirer. A rouvrir le jour ou la TVA s'allume. */

/* 2 et 3. LE MOUVEMENT DES DEUX LIENS DE L'ESPACE CLIENT.

   Sveve Lys ne les habille pas depuis son espace client mais depuis son
   systeme de survol de site, qui n'existe pas ici sous cette forme - et le
   rapatrier en entier changerait toute la vitrine de Galerie Sac a Dos, ce
   qui n'est pas la demande. Les deux valeurs ci-dessous sont donc celles
   RELEVEES au style calcule sur sa page, element par element, et posees ici
   pour ces deux elements seulement. */
.dgc-compte .dgc-connexion__oubli {
    transition: color .125s ease-in-out, text-decoration-color .125s ease-in-out;
}
.dgc-compte .dgc-compte-pied__lien {
    transition:
        color .125s ease-in-out,
        box-shadow .125s ease-in-out,
        background-color .125s ease-in-out,
        border-color .125s ease-in-out,
        scale .125s cubic-bezier(.33, 1, .68, 1),
        translate .125s cubic-bezier(.33, 1, .68, 1);
}

/* 4. LA COLONNE DE CONTENU DES DEUX ECRANS N'EST PAS UNE PAGE DE TEXTE.

   `.page:not(.woocommerce-page) .entry-content { max-width: 46rem }` garde les
   pages de prose lisibles. Son `:not()` vise le BODY, mais le selecteur mord
   sur l'ARTICLE, qui porte `page` sans porter `woocommerce-page` : la page de
   compte y tombait aussi. Avec (0,3,0) contre les (0,2,0) du bloc porte, elle
   gagnait, et le bloc de connexion se centrait dans 736 px au lieu des 1 200
   de la colonne - decale de 232 px vers la gauche par rapport a Sveve Lys,
   mesure par scripts/rendu/tunnel-compte.js. */
body.dgc-compte .hentry .entry-content,
body.dgc-tunnel .hentry .entry-content {
    max-width: none;
}

/* 5. LA GOUTTIERE QUE STOREFRONT DONNE, ET QUE LA VITRINE LUI RETIRE.

   Storefront pose `padding: 0 40px` sur `.col-full` (16 px sous 768). Galerie
   Sac a Dos la remet a zero pour toute la vitrine - ses sections sont a fond
   perdu. L'espace client, lui, a ete mesure chez Sveve Lys AVEC cette
   gouttiere : sans elle, son pied de page collait aux deux bords du telephone
   (390 px de large a x=0, contre 358 a x=16 chez Sveve Lys).

   Le tunnel n'en a pas besoin : ses deux colonnes portent leurs propres
   largeurs, et il tombe deja juste. */
body.dgc-compte .col-full {
    max-width: 1520px;
    padding-left: 40px;
    padding-right: 40px;
}
@media (max-width: 767px) {
    body.dgc-compte .col-full {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* 6. PAS D'EN-TETE CENTRE AU TELEPHONE.

   Galerie Sac a Dos avait ici un bloc qui centrait le logo sous 1000 px
   (`header.alignment: CENTER`). Dog Cherie ne centre pas : mesure du
   10/09/2026 a 999 et a 390, le logo commence au bord GAUCHE du contenu
   (x=223,5 puis x=14) et le sac tient l'autre bout de la meme rangee. Le
   bloc a donc ete retire plutot que renomme. */

/* 6 bis. Et la meme gouttiere dans le pied, ou la regle porte l'emporte.

   `.dgc-compte .site-footer .col-full { padding: 0 }` vient du bloc porte et
   pese (0,3,0) : la regle ci-dessus, en (0,2,1), ne pouvait pas la reprendre.
   Chez Sveve Lys ce meme pied garde pourtant 16 px de chaque cote au
   telephone (releve : 358 px de large a x=16, contre 390 a x=0 chez nous). */
@media (max-width: 767px) {
    body.dgc-compte .site-footer .col-full {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* 7. LES BANDEAUX DE WOOCOMMERCE DANS L'ESPACE CLIENT.

   WooCommerce pose ses avis (`.woocommerce-info`, `-message`, `-error`) en
   tete de la rubrique, et y glisse parfois un `<a class="button">` - ainsi la
   demande de confirmation d'adresse e-mail, en tete de la liste des
   commandes. Rien ne les habillait : la carte prenait le fond gris et le
   filet de Storefront, et le bouton repartait dans la typographie de la
   VITRINE (Oswald, capitales, chasse elargie), au milieu d'un ecran qui n'a
   ni l'une ni les autres.

   Ils reprennent donc la carte et le bouton de l'espace client, tels qu'ils
   sont mesures plus haut. */
.dgc-compte .woocommerce-info,
.dgc-compte .woocommerce-message,
.dgc-compte .woocommerce-error {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 14px;
    padding: 18.67px;
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--dgc-cp-ombre);
    font-size: 14px;
    line-height: 22.4px;
    color: #000;
    list-style: none;
}
/* Storefront pose une pastille coloree en `::before` sur ses avis. La source
   n'a rien devant ce texte. */
.dgc-compte .woocommerce-info::before,
.dgc-compte .woocommerce-message::before,
.dgc-compte .woocommerce-error::before { content: none; display: none; }

.dgc-compte .woocommerce-info .button,
.dgc-compte .woocommerce-message .button,
.dgc-compte .woocommerce-error .button {
    /* Le bouton de la source : rayon 12, filet INTERIEUR de 1 px, texte de
       14 en graisse du gras, ni capitales ni chasse elargie. */
    order: 2;
    margin-left: auto;
    padding: 9.33px 14px;
    border: 0;
    border-radius: 12px;
    background: #fff !important;
    box-shadow: inset 0 0 0 1px var(--dgc-cp-bord);
    font-family: inherit;
    font-size: 14px;
    line-height: 18.9px;
    font-weight: var(--co-gras);
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    color: #000 !important;
    transition: background-color .1333s ease-in-out;
}
.dgc-compte .woocommerce-info .button:hover,
.dgc-compte .woocommerce-message .button:hover,
.dgc-compte .woocommerce-error .button:hover {
    background: var(--dgc-cp-fond) !important;
}
/* Le texte de l'avis garde la place restante et passe avant le bouton. */
.dgc-compte .woocommerce-info > *:not(.button) { order: 1; flex: 1 1 16rem; }
/* ------------------------------------------------------------------------
   LE POINT DE COUPE DES TITRES : `balance`, comme la source

   Relevé le 28/08/2026 sur svevelys.com. Sa feuille compilée pose

       .text-block:not(.text-block--full-width):is(.h1,.h2,.h3,.h4,.h5,.h6)
           { text-wrap: balance }
       .text-block:not(.text-block--full-width):is(.rte,.paragraph)
           { text-wrap: balance; text-wrap: pretty }

   c'est-à-dire `balance` sur TOUT bloc de titre et `pretty` sur tout bloc de
   texte courant. Nous laissions `auto` sur les titres : même police, même
   corps, même boîte, et les mots ne tombent pas au même endroit.

   Le titre du hero, mesuré à 1024 px : la source coupe en 676 + 518 px
   (« Des suspensions luminaires / qui vous ressemblent »), nous coupions en
   896 + 298 (« … qui vous / ressemblent »). Idem à 900 (608 + 466 contre
   806 + 268) et sur les titres de section.

   Les deux titres que la source laisse en `pretty` sont ceux de ses blocs
   `rte` - « Foire aux questions » et « Articles » -, d'où la règle séparée
   sur `.gac-faq__title`. Valeurs prises au style CALCULÉ des deux côtés, pas
   dans la feuille.
   ---------------------------------------------------------------------- */
.gac-hero__title,
.gac-section__title,
.woocommerce-products-header__title,
.single-product .gac-highlight__text > :is(h1, h2, h3),
.single-product .related > h2 {
    text-wrap: balance;
}
/* Les blocs `rte` de la source, eux, restent en `pretty` : le titre de la FAQ
   et le corps de ses panneaux. Ce dernier demande quatre classes, sinon il
   perd contre le `text-wrap: auto` posé plus haut sur tout le texte courant
   des pages de contenu - lequel ne visait que la prose, pas les composants
   qu'elle héberge. */
.gac-faq__title,
body.dgc-contenu .entry-content .gac-accordion__item :is(p, li) {
    text-wrap: pretty;
}
/* Le libelle d'une carte de collection est un bloc `rte` chez elle, donc
   `pretty` la aussi. */
.gac-cat__label {
    text-wrap: pretty;
}
/* Et l'inverse sur le composant d'avis, que notre `p { text-wrap: pretty }`
   attrapait en entier : la source le laisse en `auto`, titre, corps et
   mention comprise. Ce composant n'est pas rendu par le theme de la source,
   d'ou l'absence de sa regle de blocs de texte. */
.gac-avis__titre-avis,
.gac-avis__mention,
.gac-avis__texte,
.gac-avis__texte p,
/* Meme cas sur le panier vide : la ligne « Vous possedez un compte ? » n'est
   pas un bloc de texte du theme chez elle, elle reste en `auto`. */
.gac-panier-vide__compte,
.gac-cart-empty__compte {
    text-wrap: auto;
}

/* ------------------------------------------------------------------------
   LES SECTIONS EDITORIALES DE L'ACCUEIL : deux colonnes EGALES, et la
   bascule a 750

   Mesure du 28/08/2026, rangee par rangee, contre la source :

                     source            nous
     1440 px         664 / 664         624 / 624, 80 px de marge en trop
     1024 px         456 / 456         428 / 428, 55,5 px de marge
      900 px         398 / 398         370 / 370, 48,2 px de marge
      750 px         323 / 323         deja empile
      749 px         empile            empile

   Trois causes, aucune dans la geometrie que nous avions ecrite :

   1. Storefront pose une marge droite EN POURCENTAGE sur toute colonne qui
      n'est pas la derniere (5,88 % de la rangee). Elle s'ajoute a la
      gouttiere et mange 80 px a 1440. La meme marge avait deja ete
      neutralisee sur la grille de collections, jamais ici.
   2. La gouttiere suit l'echelle de la source - 32 px au-dessus de 990,
      24 en dessous - la ou nous gardions 32 partout.
   3. WordPress empile ses colonnes sous 781 px (`flex-basis: 100%
      !important`). La source, elle, empile sous 750 : entre les deux, nous
      montrions une colonne pleine largeur quand elle en montre deux.

   Consequence visible, et c'est par la que le defaut a ete trouve : a
   1024 px son paragraphe coupait en 439 + 88 px et le notre en 395 + 132.
   ---------------------------------------------------------------------- */
.gac-editorial--deux-colonnes {
    gap: max(24px, calc(var(--dgc-gap-scale) * 32px));
}
/* Le prefixe est celui de Storefront, a la lettre : sa regle pese [0,7,1]
   (`body` plus deux `:not()`, `.hentry`, `.entry-content`, la rangee, la
   colonne et `:not(:last-child)`). Une regle a cinq classes, meme ecrite plus
   bas, perdait sans un mot - la marge restait, et la mesure aussi. */
body:not(.page-template-template-fullwidth-php):not(.storefront-full-width-content)
    .hentry .entry-content .wp-block-columns.gac-editorial--deux-colonnes > .wp-block-column,
body:not(.page-template-template-fullwidth-php):not(.storefront-full-width-content)
    .hentry .entry-content .wp-block-columns.gac-editorial--deux-colonnes > .wp-block-column:not(:last-child) {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}
@media (min-width: 750px) {
    /* La regle d'empilement du coeur - `.wp-block-columns:not(.is-not-stacked-on-mobile)
       > .wp-block-column`, [0,3,0] et `!important` - se bat sous 781 px. On la
       reprend avec sa classe et sa negation, plus la notre. */
    .wp-block-columns.gac-editorial--deux-colonnes:not(.is-not-stacked-on-mobile) > .wp-block-column {
        flex-basis: 0 !important;
        flex-grow: 1 !important;
    }
    /* Et le retour a la ligne du conteneur, que le coeur ne coupe qu'a 782 :
       entre 750 et 781 il laisse `flex-wrap: wrap`, donc une colonne un peu
       trop large passe SOUS l'autre alors que la source les tient cote a cote
       des 750. Rien ne se voit aujourd'hui - les deux colonnes tiennent - mais
       c'est un piege qui n'attend qu'un texte plus long. */
    .wp-block-columns.gac-editorial--deux-colonnes {
        flex-wrap: nowrap;
    }
}

/* ------------------------------------------------------------------------
   LA GRILLE DE COLLECTIONS : deux cartes cote a cote JUSQU'A 390

   Mesure du 28/08/2026 : la source garde ses deux cartes a toutes les
   largeurs - 676 px a 1440, 468 a 1024, 355 a 749, 175 a 390, gouttiere de
   8 px partout. Nous empilions sous 781 px (la regle du coeur, deja vue sur
   les sections editoriales) et gardions un rembourrage de 5,88 % pose par
   Storefront, visible entre 750 et 781.

   Consequence sur le texte : sa pastille de libelle se borne a la carte -
   143 px a 390, « Suspension Luminaire Chambre » sur trois lignes - la ou la
   notre gardait ses 226 px sur une seule.
   ---------------------------------------------------------------------- */
.wp-block-columns.gac-cats-grid:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 0 !important;
    flex-grow: 1 !important;
}
body:not(.page-template-template-fullwidth-php):not(.storefront-full-width-content)
    .hentry .entry-content .wp-block-columns.gac-cats-grid > .wp-block-column,
body:not(.page-template-template-fullwidth-php):not(.storefront-full-width-content)
    .hentry .entry-content .wp-block-columns.gac-cats-grid > .wp-block-column:not(:last-child) {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}
/* La pastille se borne au contenu de la carte, soit sa largeur moins les
   deux fois 16 px de rembourrage du `collection-card__content` de la source. */
.gac-cats-grid .gac-cat__label {
    max-width: calc(100% - 32px);
}
/* C'est le lien qui porte le fond blanc et le rembourrage, donc c'est LUI la
   pastille : sans cette ligne il reste a sa largeur de contenu et le texte
   dispose de 111 px au lieu de 127, soit une ligne de plus a 390. */
.gac-cats-grid .gac-cat__label a {
    max-width: 100%;
}

/* ------------------------------------------------------------------------
   LES RANGEES DE PRODUITS DE L'ACCUEIL : deux cartes sous 750

   Meme bascule que la section du panier, et meme cause : la regle generale
   `.woocommerce ul.products { grid-template-columns: repeat(4, ...) }` est
   ecrite sans requete media et plus bas dans la feuille, donc elle gagne.
   La source passe a DEUX colonnes sous 750 - cartes de 354,5 px a 749, 195 a
   430, 175 a 390 - la ou nous en gardions quatre, soit 83,5 px de carte a
   390 px d'ecran. Mesure du 28/08/2026, la grille de la page collection,
   elle, etait deja juste.
   ---------------------------------------------------------------------- */
@media (max-width: 749px) {
    body.home .entry-content .woocommerce ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ------------------------------------------------------------------------
   LE TIROIR DE MENU MOBILE : sa largeur est celle de la source

   Relevee le 28/08/2026, tiroir ferme : 500 px a 749, 409 a 430, 371 a 390,
   soit `min(95vw, 500px)`, avec 18,2 px de rembourrage lateral sur la liste
   (les entrees mesurent 463,6 a 749). Nous servions une largeur de 380 px
   heritee de Storefront, quelle que soit la fenetre.
   ---------------------------------------------------------------------- */
@media (max-width: 749px) {
    /* Le meme prefixe que la regle qui pose 88 % / 380 px plus haut, sinon
       elle gagne : c'est elle qui donnait un tiroir de 380 px a toutes les
       fenetres. */
    .storefront-primary-navigation .main-navigation .primary-navigation {
        width: min(95vw, 500px);
        max-width: none;
    }
    .main-navigation .primary-navigation > ul.menu {
        width: 100%;
        padding-left: 18.2px;
        padding-right: 18.2px;
    }
}

/* ------------------------------------------------------------------------
   LE PANIER VIDE : il ne colle pas au bord, et ses cartes suivent la bascule

   La regle qui pousse le bloc du panier jusqu'au bord droit de la fenetre est
   ecrite pour le panier PLEIN, dont la colonne de recapitulatif y touche.
   Quand le panier est vide, la source revient dans la colonne de page : son
   bandeau de recommandations fait 1360 px a 1440, 944 a 1024, 670 a 750,
   quand le notre en faisait 1400, 984 et 710. Et ses cartes passent a DEUX
   colonnes sous 750, comme partout ailleurs sur le site.
   ---------------------------------------------------------------------- */
@media (min-width: 750px) {
    body.woocommerce-cart .wp-block-woocommerce-cart:has(.wp-block-woocommerce-empty-cart-block) {
        width: 100%;
        margin-right: 0;
    }
}
@media (max-width: 749px) {
    body.woocommerce-cart .wp-block-woocommerce-empty-cart-block ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* 34 px d'air entre le bandeau de recommandations et le pied de page : le
   bloc du panier collait au pied. */
body.woocommerce-cart .wp-block-woocommerce-cart {
    margin-bottom: 34px;
}

/* Le récapitulatif n'écrit qu'UNE ligne, « Total », comme la source. Les
   blocs Sous-total, livraison et codes promo sont retirés du contenu de la
   page (scripts/base/005), mais React les réinsère par défaut quand son
   gabarit ne les nomme pas : la feuille les coupe donc aussi. Le code promo
   se saisit à la caisse, qui garde le sien. */
body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-subtotal-block,
body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-shipping-block,
body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-coupon-form-block {
    display: none;
}

/* ------------------------------------------------------------------------
   LE BANDEAU « Vous aimerez aussi » DU PANIER PLEIN (« You may also like »
   chez la source, en français depuis le 06/09/2026, pas de base 014)

   Posé APRÈS le bloc React (rien d'étranger ne survit dedans), sur les mêmes
   produits que celui du panier vide. Titre en 20/24 serif, « Voir tout » en 14
   à 81 % de noir, sans soulignement, calé à droite de la même rangée. Quand
   c'est l'état VIDE qui est rendu, il se masque : le panier vide porte déjà
   son propre bandeau. */
body.woocommerce-cart .dgc-panier-reco {
    margin: 14px 0 34px;
}
body.woocommerce-cart .wp-block-woocommerce-cart:has( .wc-block-cart__empty-cart__title ) ~ .dgc-panier-reco {
    display: none;
}
.dgc-panier-reco__tete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 16px;
}
.dgc-panier-reco .gac-section__title {
    margin: 0;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: normal;
}
/* Le thème souligne les liens de `.entry-content` avec quatre classes : le
   sélecteur reprend le sien pour que « Voir tout » reste nu. */
.hentry .entry-content .dgc-panier-reco a.dgc-panier-reco__tout,
.dgc-panier-reco .dgc-panier-reco__tout {
    font-size: 14px;
    line-height: 18.9px;
    color: rgba(0, 0, 0, .81);
    text-decoration: none;
}
.hentry .entry-content .dgc-panier-reco a.dgc-panier-reco__tout:hover,
.dgc-panier-reco .dgc-panier-reco__tout:hover {
    text-decoration: underline;
}
/* Deux colonnes sous 750, comme le bandeau du panier vide et tout le site. */
@media (max-width: 749px) {
    .dgc-panier-reco ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ------------------------------------------------------------------------
   `text-rendering` : `auto`, comme la source

   Storefront pose `text-rendering: optimizeLegibility` sur le corps de page.
   La source ne le declare nulle part - `auto` des deux cotes de son thème -
   et le moteur ne coupe alors pas les lignes au meme endroit : sur la
   politique de service, meme largeur de 534 px, meme police, meme texte de
   2 431 caracteres, et 72 lignes chez nous contre 68 chez elle.

   C'est le neuvieme angle : ca ne change aucune mesure de boite, seulement le
   crenage et les ligatures, donc le point de coupe. Releve au style CALCULE
   des deux cotes le 28/08/2026.
   ---------------------------------------------------------------------- */
body,
button,
input,
select,
textarea {
    text-rendering: auto;
}

/* ------------------------------------------------------------------------
   LES ENTREES DU TIROIR MOBILE : 28 px, pas 15,7

   Releve le 28/08/2026 sur `menu-drawer__menu-item`, identique a 390, 430 et
   749 : Inter 400 a 28 px sur 38,8 px, 4 px de rembourrage haut et bas, soit
   une entree de 47 px de haut. Nous servions la taille de texte courant du
   theme parent - 15,68 px sur 26,74 - et le mot « À propos » y faisait 67 px
   de large contre 112 chez elle.
   ---------------------------------------------------------------------- */
@media (max-width: 749px) {
    .storefront-primary-navigation .main-navigation .primary-navigation ul.menu > li > a,
    .storefront-primary-navigation .main-navigation .primary-navigation ul.nav-menu > li > a {
        font-size: 28px;
        line-height: 38.8px;
        font-weight: 400;
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

/* ------------------------------------------------------------------------
   LE TITRE DE RUBRIQUE PARTAGE SA RANGEE AVEC « Toutes les voir »

   Chez la source, les deux sont les deux cases d'un `layout-panel-flex--row`
   a toutes les largeurs : le titre y fait 458 px de large sur le bureau et
   250 a 390 px, ou il se coupe donc en TROIS lignes. Chez nous ce sont deux
   blocs freres du contenu, et le titre prenait toute la largeur - deux lignes
   au lieu de trois, et une hauteur de rangee differente.

   Faute de conteneur commun (les deux blocs viennent du contenu de la page,
   pas d'un gabarit), on borne le titre a la place que le lien laisse : 96 px
   de libelle plus 12 de gouttiere, releves sur la source. Le lien, lui, reste
   remonte par sa marge negative ; son ordonnee exacte a 390 demanderait le
   meme conteneur flex que la source, donc une reprise du contenu.
   ---------------------------------------------------------------------- */
@media (max-width: 749px) {
    .gac-section__title:has(+ .gac-voir-tout) {
        max-width: calc(100% - 108px);
    }
}

/* ------------------------------------------------------------------------
   `overflow-wrap` : `normal` partout, `break-word` sur les titres et le texte

   Storefront pose `word-wrap: break-word` sur le CORPS de page, donc sur tous
   les elements. La source ne le pose que sur ses titres et ses paragraphes -
   releve au calcule le 28/08/2026 : `body`, `main`, `li`, `td`, `a` et `div`
   y sont a `normal`, seuls `h1..h6` et `p` sont a `break-word`.

   Ce n'est pas cosmetique : `break-word` change la largeur MIN-CONTENT d'une
   cellule, donc la repartition automatique des colonnes d'un tableau. Sur la
   politique de confidentialite, meme tableau de 534 px et meme texte, ses
   colonnes faisaient 229 / 306 et les notres 252 / 283, et cinq paragraphes
   s'y coupaient une ligne trop tot ou trop tard.
   ---------------------------------------------------------------------- */
body {
    overflow-wrap: normal;
    word-wrap: normal;
}
:is(h1, h2, h3, h4, h5, h6), p {
    overflow-wrap: break-word;
}

/* Le `<colgroup><col width="280">` que notre import a garde du `body_html`
   n'existe pas dans la page rendue par la source : elle nettoie ses scories
   (`dir="ltr"`, `aria-level`, `role="presentation"`, largeurs de colonne) au
   moment d'ecrire la page. Il figeait les colonnes du tableau de la politique
   de confidentialite a 252 / 283 px la ou l'algorithme automatique en donne
   229 / 306 comme chez elle. Le contenu est desormais nettoye par
   `scripts/dgc-nettoyer-contenu.php` ; cette regle reste le filet pour une
   base qui n'a pas encore recu le script - la production, notamment. */
body.dgc-contenu .entry-content table col {
    width: auto;
}

/* ------------------------------------------------------------------------
   LA RANGEE « titre de rubrique + Toutes les voir »

   Le contenu de l'accueil groupe desormais les deux blocs
   (`scripts/dgc-rubriques-accueil.php`), comme la source les groupe dans son
   `layout-panel-flex--row` : ils sont sur une rangee, alignes en BAS, le
   titre a sa largeur de contenu et le lien colle a droite.

   C'est ce qui manquait pour que le titre se coupe comme chez elle sous
   750 px - 250 px de large et trois lignes a 390 - et pour que le lien suive
   la derniere ligne du titre au lieu d'une marge negative fixe.
   ---------------------------------------------------------------------- */
/* Le bloc groupe de WordPress rend un conteneur INTERNE : c'est lui la
   rangee, pas le bloc lui-meme. */
.gac-rubrique > .wp-block-group__inner-container,
.gac-rubrique:not(:has(> .wp-block-group__inner-container)) {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}
.gac-rubrique .gac-section__title {
    margin-bottom: 0;
    max-width: none;
}
/* La gouttiere entre la rangee de titre et la grille : celle de la section
   flex de la source - 32 px, ramenee a 24 sous 990 par `--gap-scale` (0,7,
   plancher 24). Elle avait disparu au groupement des rubriques : le titre a
   perdu sa marge basse et rien ne l'a remplacee - grille collee au titre, a
   1440 comme a 390. Releve du 29/08/2026 : 29 / 26 px peints chez la source. */
.gac-rubrique {
    margin-bottom: 32px;
}
@media (max-width: 989px) {
    .gac-rubrique {
        margin-bottom: 24px;
    }
}
.gac-rubrique .gac-voir-tout {
    flex: none;
    margin: 0;
    text-align: right;
    /* Son bloc de texte fait 25 px de haut pour un lien de 22 : trois pixels
       de rembourrage bas, qu'il faut reprendre pour que le lien tombe sur la
       derniere ligne du titre et non trois pixels au-dessus. */
    padding-bottom: 3px;
    /* Et quatre pixels de plus vers le bas : chez elle le lien depasse d'un
       pixel SOUS la derniere ligne du titre (dbas -1), chez nous il finissait
       trois pixels au-dessus. La cause exacte est dans l'imbrication de son
       bloc de texte ; la valeur, elle, est mesuree, a 1440, 1024, 750, 749 et
       390 px, le 28/08/2026. */
    margin-bottom: -4px;
}
.gac-rubrique .gac-voir-tout a {
    display: block;
}

/* ------------------------------------------------------------------------
   LA BANDE 750-767 : ce que Storefront ne bascule qu'a 768

   Storefront n'a qu'une seule requete media, `@media (min-width: 768px)`, et
   elle porte toute sa mise en page de bureau - dont le masquage du bouton
   « Ouvrir le menu enfant » de ses sous-menus. Notre bascule est celle de la
   source, a 750 : entre les deux, la navigation est deja en ligne et ce
   bouton reste peint.

   Trouve par `bascules.js` le 28/08/2026 : la copie basculait a 768 la ou la
   source bascule a 750, sur toutes les pages. Dix-huit pixels de large, et
   personne ne mesure jamais a 760.

   RELEVE COMPLET DU 29/08/2026. La bande n'etait pas un cas isole : cette
   feuille portait vingt-deux blocs `@media` a des seuils que la source
   n'ecrit nulle part - 767, 768, 600, 480, 900, 1024, 1100, 569 - herites de
   la migration precedente et du 768 de Storefront. La source, elle, n'a que
   750 (dominant), 990, 1200, 1400, plus 389 sur la fiche et 40em/60em sur la
   hauteur des sections.

   Trois d'entre eux basculaient VRAIMENT quelque chose :

     - la galerie de la fiche restait en carrousel plein cadre, fleches
       comprises, de 750 a 767, alors que la colonne d'achat etait deja passee
       en deux colonnes : une fiche hybride sur dix-huit pixels ;
     - la barre de tri de la collection se depliait a 601, la source a 750 ;
     - le menu du pied passait a deux colonnes d'entrees a 601, la source
       garde une colonne jusqu'a 750.

   Les autres etaient inertes - un bloc plus tardif les recouvrait - mais un
   seuil faux qui ne mord pas aujourd'hui mord au prochain contenu. Tous
   ramenes sur les seuils de la source : 767 -> 749, 768 -> 750, 600 -> 749.

   Comment ca se releve, sans supposer les nombres : `bascules.js` cherche les
   largeurs ou la mise en page change, de chaque cote, et compare les deux
   listes. Puis, pour chaque bloc `@media` de cette feuille, on lit le style
   CALCULE de ses selecteurs a seuil-1 et a seuil : si rien ne bouge, le bloc
   est inerte ; si quelque chose bouge a une largeur ou la source ne bouge pas,
   c'est le defaut.
   ---------------------------------------------------------------------- */
@media (min-width: 750px) {
    .site-header .main-navigation .dropdown-toggle,
    .storefront-primary-navigation .main-navigation .dropdown-toggle {
        display: none;
    }
}

/* Le titre de la lettre d'information est un bloc de texte borne a
   `min(100%, 650px)` et centre, pas une bande pleine largeur : mesure du
   28/08/2026, 650 px a 1440 comme a 750, 358 a 390. Centre a une ligne, ca ne
   se voit pas ; a deux, la coupe n'est pas la meme. */
.gac-newsletter .gac-section__title {
    max-width: min(100%, 650px);
    margin-inline: auto;
}

/* ------------------------------------------------------------------------
   LE PLANCHER DE 16 PX SUR LES CHAMPS, SOUS 1200

   La source pose, dans `base.css` :

     @media screen and (max-width: 1200px) {
       input.paragraph.paragraph, textarea.paragraph.paragraph,
       select.paragraph.paragraph { font-size: max(1rem, var(--font-paragraph--size)); }
     }

   C'est le garde-fou contre le zoom automatique d'iOS : sous 1200 px, un champ
   ne descend jamais sous 16 px, meme quand la typographie du theme est a 14.
   Au-dessus, il reprend les 14 px.

   Le formulaire de contact l'avait deja - il herite de la meme regle par un
   autre chemin. Le champ de la lettre d'information, lui, restait a 14 px a
   toutes les largeurs : mesure du 29/08/2026, 16 px chez elle a 1199 contre
   14 chez nous, et 14 des deux cotes a 1201.
   ---------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .gac-newsletter input[type="email"] {
        font-size: max(1rem, .95rem);
    }
}

/* ------------------------------------------------------------------------
   PIED DE PAGE SOUS 990 : les niveaux de la source

   Releves du 29/08/2026, relatifs au haut du pied :
   - a 900 (2 colonnes) : « Besoin d'aide ? » a 21 (nous 30), logo a 41 ;
   - a 390 (1 colonne) : image du logo a 31, « Besoin d'aide ? » a 109,
     © CENTRE (x143, largeur du texte) la ou nous restions a gauche.
   Le 30 px de rembourrage haut est un releve de bureau : sous 990 la source
   ouvre a 21. Tout le pied etait decale de 9 a 11 px.
   ---------------------------------------------------------------------- */
@media (max-width: 989px) {
    .site-footer { padding-top: 21px; }
    .site-footer .gac-footer-logo-texte {
        align-self: flex-start;
        margin-top: 20px;
    }
}
@media (max-width: 749px) {
    /* Logo du pied a 41 px du haut du bloc chez la source (remesure du
       29/08/2026, identique a 390/500/700), « Besoin d'aide ? » a 109 :
       20 au-dessus du logo, la gouttiere de 20 de la grille fait le reste. */
    .site-footer .gac-footer-logo-texte {
        margin-top: 20px;
        margin-bottom: 0;
    }
    .site-footer .site-info { text-align: center; }
}

/* ------------------------------------------------------------------------
   ACCUEIL SOUS 990 : l'echelle 0,7 de la source sur les sections restantes

   La source reduit ses rembourrages de section a 0,7 (plancher 20) et ses
   gouttieres (plancher 24) sous 990. Plusieurs blocs de l'accueil gardaient
   leurs valeurs de bureau : releve du 29/08/2026 a 700, peints -
   hero->titre 34 (nous 45), cartes->editorial 61 (88), image->titre 24 (58),
   champ newsletter->FAQ 43 (60). Chaque valeur ci-dessous est 0,7 x la
   valeur de bureau, bornee au plancher.
   ---------------------------------------------------------------------- */
@media (max-width: 989px) {
    /* `.gac-hero { margin-bottom: 3.2em }` (44,8 px) gagnait le pliage de
       marges contre les 33,6 du titre : la classe du corps est `home`. */
    .home .gac-hero { margin-bottom: 0; }
    .wp-block-columns.gac-cats-grid { margin-bottom: 33.6px; }
    /* Le 40/40 de l'editorial est un REMBOURRAGE, pas une marge. */
    .gac-editorial--deux-colonnes { padding-block: 28px; }
    .gac-newsletter { padding-top: 20px; padding-bottom: 20px; }
    .gac-faq--home { padding-top: 21px; padding-bottom: 25.9px; }
    .gac-faq--home .gac-faq__title { margin-bottom: 22.4px; }
    /* La FAQ et la newsletter de la FICHE avaient rate la meme echelle :
       30/32/36 restaient pleins sous 990 quand la source peint 21/23,7/25,2.
       Releve du 29/08/2026 a 390 sur salon-design. Le 8 px du haut de la
       newsletter reste : sous le plancher de 20, la source ne le reduit pas. */
    .single-product .gac-faq { padding-top: 21px; padding-bottom: 25.2px; }
    .single-product .gac-faq .gac-faq__title { margin-bottom: 22.4px; }
    /* La marge haute de l'accordeon fusionne avec la marge basse du titre :
       c'est la plus grande qui gagne, il faut donc reduire les DEUX. */
    .single-product .gac-faq .gac-accordion--faq { margin-top: 24px; }
    .single-product .gac-newsletter--produit { padding-bottom: 25.2px; }
    /* « Vous aimerez aussi » suit la meme echelle : rembourrage haut
       max(20, 0.7 x 24) = 20, titre -> grille max(24, 0.7 x 28) = 24.
       Source a 390 : 68 px du haut de section a la premiere carte. */
    .single-product .related,
    .single-product .up-sells { padding-top: 20px; }
    .single-product .related > h2,
    .single-product .up-sells > h2 { margin-bottom: 24px; }
}
/* L'editorial empile ses deux colonnes sous 750 : la gouttiere de 24 du
   conteneur suffit, les marges des colonnes (1em du prefixe Storefront) et
   de la figure (1.41575em) s'y ajoutaient - 58 peints contre 24 chez la
   source. Les prefixes reprennent ceux des regles qui gagnaient. */
@media (max-width: 749px) {
    .hentry .entry-content .wp-block-columns.gac-editorial--deux-colonnes > .wp-block-column {
        margin-bottom: 0;
    }
    .hentry .entry-content .gac-editorial--deux-colonnes figure.wp-block-image {
        margin-bottom: 0;
    }
    /* Texte editorial -> titre de rangee : la source peint 48 (rembourrage
       bas de l'editorial 28 + rembourrage haut de sa section produits,
       24 x 0,7 borne a 20). Nous n'avions que les 28. Releve du 29/08/2026
       a 390 et 700. */
    .gac-rubrique {
        margin-top: 20px;
    }
}