/**
 * SODIMABI — Page d'accueil éditable (front)
 *
 * Les couleurs sont déclarées en variables sur .sdh : le thème peut les
 * redéfinir sans toucher à ce fichier.
 */

/* Palette alignée sur celle du thème SODIMABI : vert sauge historique et or
   corrigé pour le contraste. Le thème peut redéfinir ces variables sans
   toucher au module. */
.sdh {
    --sdh-ink: #22262b;
    --sdh-ink-soft: #5b6470;
    --sdh-ink-faint: #8a929c;

    --sdh-green: #96a480;
    --sdh-green-dark: #6f7d5b;
    --sdh-green-deep: #4a5539;
    --sdh-green-pale: #eef1e8;

    --sdh-accent: #fbc732;         /* or vif — aplats uniquement */
    --sdh-accent-dark: #da9400;
    --sdh-accent-text: #8a6200;

    --sdh-surface: #ffffff;
    --sdh-surface-alt: #f7f8f6;
    --sdh-line: #e2e5e9;
    /* Échelle typographique — neuf pas, rapport ~1,19. Identique à celle du
       thème (`_variables.scss`). Toute nouvelle taille vient d'ici. */
    /* RESERVE : 10,9 px, sous le plancher de lisibilite de 12 px.
       Aucun texte ne doit l'employer — voir _variables.scss du theme. */
    --sdh-pas-3xs: 0.68rem;
    --sdh-pas-2xs: 0.76rem;
    --sdh-pas-xs:  0.84rem;
    --sdh-pas-sm:  0.92rem;
    --sdh-pas-md:  1rem;
    --sdh-pas-lg:  1.14rem;
    --sdh-pas-xl:  1.36rem;
    --sdh-pas-2xl: 1.62rem;
    --sdh-pas-3xl: 2.05rem;

    /* Ecart entre deux blocs de la page. UNE valeur, jamais additionnee. */
    --sdh-ecart-bloc: 56px;

    /* Memes deux rayons que le theme : 6 px pour ce qui se clique,
       12 px pour ce qui porte du contenu. */
    --sdh-radius: 6px;
    --sdh-radius-lg: 12px;
    --sdh-gap: 20px;
    --sdh-max: 1320px;   /* aligné sur le conteneur du thème */
}

.sdh * {
    box-sizing: border-box;
}

/* ----------------------------------------------------------------- sections */

/* --- Rythme vertical de la page ---------------------------------------------
   L'ecart entre deux blocs etait une SOMME et non une valeur : 48 px de
   rembourrage bas + 48 px de rembourrage haut = 96 px. La reassurance, avec
   ses 24 px, produisait 72 ; la banniere, avec sa marge de 40, produisait 88.
   Trois ecarts differents la ou il en faut un.

   On separe donc les deux roles :
     `margin-bottom`  l'ECART entre blocs — une seule valeur, jamais additionnee
     `padding`        la respiration INTERNE, reservee aux blocs qui ont un fond

   Un bloc sans fond n'a aucune raison d'avoir un rembourrage vertical : il ne
   se distingue de son voisin que par l'ecart qui les separe. */
.sdh-section {
    max-width: var(--sdh-max);
    /* `margin-bottom` en declaration PROPRE et non dans le raccourci : un
       `var()` glisse au troisieme rang d'un raccourci a trois valeurs ne se
       resolvait pas — la marge retombait sur la valeur de repli de 56 px
       meme quand le jeton valait 36. */
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: var(--sdh-ecart-bloc, 56px);
    padding: 0 20px;
}

.sdh-section:last-child { margin-bottom: 0; }

/* Les blocs qui portent un fond gardent une respiration interne : sans elle
   leur aplat viendrait toucher le texte. */
.sdh-reassurance,
.sdh-section--fond {
    padding-top: 32px;
    padding-bottom: 32px;
}

.sdh-section__head {
    margin-bottom: 24px;
    text-align: center;
}

.sdh-section__title {
    margin: 0;
    font-size: 1.62rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--sdh-ink);
}

.sdh-section__sub {
    margin: 8px 0 0;
    font-size: 1rem;
    color: var(--sdh-ink-soft);
}

.sdh-section__more {
    margin: 24px 0 0;
    text-align: center;
}

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

.sdh-btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: var(--sdh-radius);
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.sdh-btn--primary {
    background: var(--sdh-accent);
    color: #241c00;              /* l'or vif exige un texte sombre : blanc sur
                                    #fbc732 tombe a 1,7:1, illisible */
    border: 1px solid var(--sdh-accent);
}

.sdh-btn--primary:hover,
.sdh-btn--primary:focus {
    background: var(--sdh-accent-dark);
    border-color: var(--sdh-accent-dark);
    color: #fff;
    text-decoration: none;
}

/* Filet doré sous les titres de section : la signature reprise dans tout le site. */
/* Le filet dore sous le titre a ete RETIRE, pas neutralise plus bas : le titre
   portait trois ornements a la fois — un losange devant, ce filet derriere, et
   le trait de separation de l'en-tete de section. Trois marques pour dire une
   seule chose. Le losange reste : c'est la forme du logo, elle n'appartient
   qu'a cette maison. */

.sdh-btn--ghost {
    background: transparent;
    color: var(--sdh-ink);
    border: 1px solid var(--sdh-line);
}

.sdh-btn--ghost:hover,
.sdh-btn--ghost:focus {
    border-color: var(--sdh-accent);
    color: var(--sdh-accent-dark);
    text-decoration: none;
}

/* ----------------------------------------------------------------- bannière */
/*
   La bannière n'est pas une vitrine : c'est le poste d'entrée d'un acheteur qui
   revient. 5 188 comptes, 6 442 commandes, 6 lignes en moyenne — ce visiteur
   sait ce qu'il veut. On lui donne donc le champ de saisie par référence dès le
   premier écran, et on garde le catalogue pour ceux qui découvrent.

   Fond ENCRE et non vert : le bandeau de service et le menu occupent déjà le
   haut de la page en vert sauge. Un troisième aplat vert aurait fait une masse.
   Le vert revient en accent, sur le losange, et l'or sur les repères.
*/
.sdh-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(118deg, #1b1f23 0%, var(--sdh-ink) 46%, #2b3138 100%);
    border-radius: var(--sdh-radius-lg);
    /* Meme ecart que tous les autres blocs : la banniere n'a pas de statut
       particulier dans le rythme vertical. */
    margin-bottom: var(--sdh-ecart-bloc, 56px);
}

/* Losange du logo, en très grand et détouré : il tient la moitié droite de la
   composition au lieu de l'ornementer. Il déborde volontairement du cadre —
   une forme coupée se lit comme un motif, une forme entière comme une image. */
.sdh-hero__losange {
    position: absolute;
    top: 50%;
    right: -80px;
    width: 460px;
    height: 460px;
    transform: translateY(-50%) rotate(45deg);
    border: 1px solid rgba(150, 164, 128, .38);
    border-radius: var(--sdh-radius-lg);
    pointer-events: none;
    z-index: 0;
}

.sdh-hero__losange::before,
.sdh-hero__losange::after {
    content: '';
    position: absolute;
    border: 1px solid rgba(150, 164, 128, .2);
    border-radius: 4px;
}

.sdh-hero__losange::before { inset: 48px; }
.sdh-hero__losange::after  { inset: 80px; border-color: rgba(251, 199, 50, .18); }

.sdh-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.sdh-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(27, 31, 35, .93) 0%, rgba(27, 31, 35, .74) 52%, rgba(27, 31, 35, .5) 100%);
    z-index: 1;
}

.sdh-hero--has-image .sdh-hero__losange { opacity: .5; }

/* La grille : le discours à gauche, l'action à droite. */
.sdh-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 366px;
    align-items: center;
    gap: 48px;
    max-width: var(--sdh-max);
    margin: 0 auto;
    padding: 48px 32px 48px;
}

.sdh-hero--small  .sdh-hero__inner { padding: 32px 32px 32px; }
.sdh-hero--medium .sdh-hero__inner { padding: 40px 32px 40px; }

/* Surtitre : petit losange plein puis capitales espacées — la signature
   typographique reprise partout ailleurs sur le site. */
.sdh-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--sdh-accent);
}

.sdh-hero__marque {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    background: var(--sdh-accent);
    transform: rotate(45deg);
}

.sdh-hero__title {
    margin: 0 0 16px;
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-size: clamp(2.1rem, 3.6vw, 3.15rem);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -.015em;
    color: #fff;
    /* `balance` évite la ligne orpheline d'un seul mot en bas d'un titre. */
    text-wrap: balance;
}

.sdh-hero__text {
    margin: 0 0 24px;
    max-width: 46ch;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
}

.sdh-hero__text strong { color: #fff; font-weight: 700; }
.sdh-hero__text p:last-child { margin-bottom: 0; }

.sdh-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
}

.sdh-hero .sdh-btn--primary {
    background: var(--sdh-accent);
    border-color: var(--sdh-accent);
    color: var(--sdh-ink);
    min-height: 48px;
    padding: 12px 24px;
    font-weight: 700;
}

.sdh-hero .sdh-btn--primary:hover,
.sdh-hero .sdh-btn--primary:focus {
    background: #fff;
    border-color: #fff;
    color: var(--sdh-ink);
}

/* Le téléphone : chez ce client, une commande sur deux commence par un appel.
   Il mérite mieux qu'une ligne de pied de page. */
.sdh-hero__tel {
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-decoration: none;
    border-left: 1px solid rgba(255, 255, 255, .2);
    padding-left: 20px;
}

.sdh-hero__tel-cle {
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

.sdh-hero__tel-num {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.sdh-hero__tel:hover .sdh-hero__tel-num { color: var(--sdh-accent); }

/* ----- carte de saisie par référence ----- */
/*
   C'est le geste central du site : 2 993 produits portent une référence, et
   l'acheteur la lit sur un bon papier ou dans un tableur. Le champ poste
   directement vers la commande rapide, qui vérifie, ajoute au panier et propose
   une correction si la référence est fautive.
*/
.sdh-ref {
    background: #fff;
    border-radius: var(--sdh-radius-lg);
    padding: 24px 24px 20px;
    /* Niveau 3 de l'echelle d'elevation du theme (`$ombre-3`). */
    box-shadow: 0 16px 40px rgba(34, 38, 43, .16), 0 4px 10px rgba(34, 38, 43, .06);
    /* Filet doré en tête : le même repère que les titres de section. */
    border-top: 2px solid var(--sdh-accent);
}

.sdh-ref__titre {
    margin: 0 0 4px;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.14rem;
    font-weight: 600;
    color: var(--sdh-ink);
}

.sdh-ref__aide {
    margin: 0 0 16px;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--sdh-ink-soft);
}

.sdh-ref__ligne {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px;
    gap: 8px;
}

.sdh-ref__champ,
.sdh-ref__qte {
    /* Action principale : meme hauteur que « Ajouter au panier » ($ctrl-l). */
    min-height: 48px;
    padding: 8px 12px;
    border: 1px solid var(--sdh-line);
    border-radius: var(--sdh-radius);
    font-family: 'Archivo', -apple-system, sans-serif;
    font-size: 0.92rem;
    color: var(--sdh-ink);
    background: #fff;
}

.sdh-ref__champ {
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
}

.sdh-ref__champ::placeholder { color: var(--sdh-ink-faint); opacity: 1; }
.sdh-ref__qte { text-align: center; font-variant-numeric: tabular-nums; }

.sdh-ref__champ:focus,
.sdh-ref__qte:focus {
    border-color: var(--sdh-green);
    box-shadow: 0 0 0 3px rgba(150, 164, 128, .2);
    outline: 2px solid var(--sdh-accent-text);
    outline-offset: 2px;
}

.sdh-ref__btn {
    grid-column: 1 / -1;
    min-height: 48px;
    margin-top: 2px;
    border: 1px solid var(--sdh-ink);
    border-radius: var(--sdh-radius);
    background: var(--sdh-ink);
    color: #fff;
    font-family: 'Archivo', -apple-system, sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.sdh-ref__btn:hover,
.sdh-ref__btn:focus-visible {
    background: var(--sdh-green-deep);
    border-color: var(--sdh-green-deep);
}

.sdh-ref__lien {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin-top: 12px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--sdh-accent-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sdh-ref__lien:hover { color: var(--sdh-ink); }

/* ----- bandeau de preuves ----- */
/* Trois faits vérifiables, lus en base pour les chiffres. Pas de promesse
   décorative : ce sont les trois questions qu'un acheteur pose au téléphone. */
.sdh-hero__preuves {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, .14);
    background: rgba(0, 0, 0, .22);
}

.sdh-hero__preuves li {
    flex: 1 1 240px;
    padding: 16px 20px;
    font-size: 0.84rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .74);
    border-right: 1px solid rgba(255, 255, 255, .1);
}

.sdh-hero__preuves li:last-child { border-right: none; }
.sdh-hero__preuves strong { color: #fff; font-weight: 700; }

/* Le premier li s'aligne sur la colonne de texte du bloc au-dessus. */
@media (min-width: 1204px) {
    .sdh-hero__preuves { padding-left: max(32px, (100% - var(--sdh-max)) / 2 + 32px); }
    .sdh-hero__preuves li:first-child { padding-left: 0; }
}

@media (max-width: 1100px) {
    .sdh-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        padding: 40px 24px 32px;
    }
    .sdh-hero__losange { right: -80px; opacity: .55; }
    .sdh-ref { max-width: 420px; }
}

@media (max-width: 767px) {
    .sdh-hero { border-radius: 0; margin-bottom: var(--sdh-ecart-bloc, 36px); }
    .sdh-hero__inner { padding: 32px 16px 24px; gap: 24px; }
    .sdh-hero__losange { display: none; }
    .sdh-hero__title { font-size: clamp(1.62rem, 7vw, 2.1rem); }
    .sdh-hero__text { margin-bottom: 20px; }
    .sdh-hero__actions { flex-direction: column; align-items: stretch; gap: 12px; }
    .sdh-hero .sdh-btn--primary { justify-content: center; }
    .sdh-hero__tel { border-left: none; border-top: 1px solid rgba(255,255,255,.2); padding: 12px 0 0; }
    .sdh-ref { max-width: none; padding: 20px 16px 16px; }
    .sdh-hero__preuves li { flex: 1 1 100%; border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); }
    .sdh-hero__preuves li:last-child { border-bottom: none; }
}

/* ---------------------------------------------------------------- catégories */

.sdh-grid {
    display: grid;
    gap: var(--sdh-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* `minmax(0, 1fr)` ET NON `1fr`.
   `1fr` vaut `minmax(auto, 1fr)` : une colonne dont le contenu a une largeur
   minimale superieure a sa part l'emporte, et TOUTES les autres se resserrent
   pour la compenser. Mesure sur la grille des produits phares, quatre colonnes
   dans 1 100 px : les cartes sortaient a 201, 220, 249 et 208 px. Les images
   etant carrees, elles heritaient de ces hauteurs — et les titres, les prix et
   les boutons se decalaient d'une carte a l'autre. */
.sdh-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sdh-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sdh-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sdh-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sdh-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Contour remplace par une elevation : voir `_base.scss` du theme. Vingt-huit
   tuiles cernees d'un filet gris sur un fond gris font une grille de cases ;
   la meme grille posee par la lumiere fait une page. */
.sdh-cat__link {
    display: block;
    height: 100%;
    border: 1px solid rgba(34, 38, 43, .07);
    box-shadow: 0 1px 2px rgba(34, 38, 43, .05), 0 1px 1px rgba(34, 38, 43, .03);
    border-radius: var(--sdh-radius);
    background: var(--sdh-surface);
    overflow: hidden;
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.sdh-cat__link:hover,
.sdh-cat__link:focus {
    border-color: var(--sdh-accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(27, 36, 48, .09);
    text-decoration: none;
}

.sdh-cat__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* CARRE et non 4:3. Mesure : six visuels sur huit sont des photos produit
       carrees (250x250). Dans un cadre 4:3 elles ne remplissaient que 72 % et
       laissaient 32 px de blanc de chaque cote — c'est ce qui donnait
       l'impression d'outils perdus dans le vide. En carre elles remplissent
       le cadre, et les deux images de categorie (480x360) n'y perdent qu'une
       bande discrete. */
    /* 4:3 ET NON CARRE. A quatre colonnes dans 1 140 px, le carre donnait
       265 px de photo pour 45 px de nom : la tuile devenait une vitrine alors
       qu'elle sert a NAVIGUER. Sur 28 univers, trois seulement ont une photo
       propre ; les autres empruntent un article au hasard de leur rayon, et
       vingt-cinq articles sans rapport les uns avec les autres, montres en
       grand, ne font pas une grille — ils font un fouillis. Le visuel redevient
       une vignette, le nom reprend le dessus. */
    aspect-ratio: 4 / 3;
    background: #fff;
    overflow: hidden;
}

.sdh-cat__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Une photo d'outil issue de la catégorie : fond blanc et cadrage « contain »,
   car ce sont des prises de vue sur fond clair. Le losange en filigrane — la
   forme du logo SODIMABI — rattache la vignette à la marque et distingue
   discrètement ce visuel de repli d'une vraie photo de catégorie. */
/* FOND BLANC, et c'est la photo qui commande. Un aplat gris clair semblait plus
   soigne, mais les visuels du client sont des JPEG a fond blanc, pas des PNG
   detoures : sur un gris, on voyait le rectangle blanc de la photo DANS le
   cadre — deux fonds emboites au lieu d'un. Le blanc se fond avec eux ; le
   cadre vient de la bordure de la tuile, pas du fond. */
.sdh-cat__media--produit {
    background: #fff;
    padding: 10px;
}

.sdh-cat__media--produit img {
    object-fit: contain;
}

/* Le losange decoratif pose en bas a droite de chaque vignette a ete retire :
   un petit carre sur pointe, dans un coin, se lit comme une commande — et il
   n'en etait pas une. */

/* Reste des catégories sans aucun visuel exploitable : monogramme sur aplat
   de marque, pour que l'absence reste un parti pris et non un manque. */
.sdh-cat__media--vide {
    background:
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, .05) 0 10px,
            transparent 10px 20px),
        linear-gradient(150deg, var(--sdh-green) 0%, var(--sdh-green-dark) 100%);
}

.sdh-cat__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: var(--sdh-accent);
    color: #241c00;
    font-size: 1.62rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

.sdh-cat__name {
    display: block;
    padding: 12px 16px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--sdh-ink);
    text-align: center;
}

/* ------------------------------------------------------------------ produits */

.sdh-products__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sdh-gap);
}

/* Les miniatures viennent du thème : on ne contraint que la largeur. */
.sdh-products__grid > * {
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    max-width: none;
    flex: none;
}

/* `min-width: 0` sur la seule carte ne suffit pas : la contrainte doit
   redescendre jusqu'à l'image. Mesuré à 320 px — deux colonnes de 123 px, une
   vignette servie en 133 px : l'image imposait sa taille à la miniature (135),
   qui poussait la page de 3 px vers la droite. Le défilement horizontal sur un
   écran de 320 px se remarque immédiatement. */
.sdh-products__grid .product-miniature,
.sdh-products__grid .thumbnail-container,
.sdh-products__grid .thumbnail-top,
.sdh-products__grid .thumbnail,
.sdh-products__grid picture,
.sdh-products__grid .product-description {
    min-width: 0;
    max-width: 100%;
}

/* ET L'ARTICLE DOIT REMPLIR SA COLONNE.
   Meme piege que dans la liste dense : Classic pose `display: flex` sur la
   colonne, l'`article` devient un element flex et se resserre sur son contenu.
   Les colonnes de la grille etaient bien egales (275 px), mais les cartes
   sortaient a 201, 220, 249 et 208 — et comme le visuel est carre, il heritait
   de ces largeurs en hauteur : titres, prix et boutons se decalaient d'une
   carte a l'autre sur toute la rangee. */
.sdh-products__grid .product-miniature {
    width: 100%;
    flex: 1 1 auto;
}

.sdh-products__grid img {
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------------- réassurance */

/* Le fond de ce bloc est defini plus bas, en un seul endroit. */

.sdh-reassurance__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sdh-gap);
    max-width: var(--sdh-max);
    margin: 0 auto;
    padding: 0 20px;
    list-style: none;
}

.sdh-reassurance__item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

/* Icônes SVG en ligne : dimensions imposées au conteneur ET au svg, pour
   qu'aucun contenu de repli ne puisse élargir la colonne. */
.sdh-reassurance__icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sdh-green-dark);
    overflow: hidden;
}

.sdh-reassurance__icon svg {
    width: 26px;
    height: 26px;
    display: block;
}

.sdh-reassurance__title {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--sdh-ink);
}

.sdh-reassurance__text {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--sdh-ink-soft);
}

/* ----------------------------------------------------------------- éditorial */

.sdh-editorial__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.sdh-editorial--image-left .sdh-editorial__media  { order: 1; }
.sdh-editorial--image-left .sdh-editorial__body   { order: 2; }
.sdh-editorial--image-right .sdh-editorial__media { order: 2; }
.sdh-editorial--image-right .sdh-editorial__body  { order: 1; }

/* Sans visuel, le texte prend une mesure de lecture centree — 760 px, soit une
   soixantaine de signes par ligne — plutot que de s'etirer sur 1 100. Mais une
   colonne de texte seule au milieu d'un fond gris se lit comme un oubli : on lui
   donne une surface, au meme rayon et a la meme elevation que les autres blocs
   de la page. Elle devient un bloc voulu, pas un vide. */
.sdh-editorial__inner:not(:has(.sdh-editorial__media)) {
    grid-template-columns: 1fr;
    max-width: 860px;
    margin: 0 auto;
    padding: 40px 48px;
    background: #fff;
    border: 1px solid rgba(34, 38, 43, .07);
    border-radius: var(--sdh-radius-lg);
    box-shadow: 0 1px 2px rgba(34, 38, 43, .05), 0 1px 1px rgba(34, 38, 43, .03);
}

@media (max-width: 575px) {
    .sdh-editorial__inner:not(:has(.sdh-editorial__media)) { padding: 24px 20px; }
}

.sdh-editorial__media img {
    width: 100%;
    height: auto;
    border-radius: var(--sdh-radius);
    display: block;
}

.sdh-editorial__body .sdh-section__title {
    text-align: left;
    margin-bottom: 16px;
}

.sdh-editorial__text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--sdh-ink-soft);
    margin-bottom: 20px;
}

.sdh-editorial__text p:last-child {
    margin-bottom: 0;
}

.sdh-editorial__text strong {
    color: var(--sdh-ink);
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1024px) {
    .sdh-grid--4,
    .sdh-grid--5,
    .sdh-grid--6           { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sdh-products__grid    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sdh-reassurance__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sdh-editorial__inner  { gap: 32px; }
}

@media (max-width: 768px) {
    .sdh-section           { padding: 0 16px; }
    .sdh-reassurance,
    .sdh-section--fond     { padding-top: 24px; padding-bottom: 24px; }
    .sdh-section__title    { font-size: 1.36rem; }
    .sdh-grid--3,
    .sdh-grid--4,
    .sdh-grid--5,
    .sdh-grid--6           { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sdh-products__grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .sdh-editorial__inner  { grid-template-columns: 1fr; }
    /* Sur mobile le visuel passe toujours au-dessus du texte. */
    .sdh-editorial--image-left .sdh-editorial__media,
    .sdh-editorial--image-right .sdh-editorial__media { order: 1; }
    .sdh-editorial--image-left .sdh-editorial__body,
    .sdh-editorial--image-right .sdh-editorial__body  { order: 2; }

    .sdh-hero--has-image.sdh-hero--large  { min-height: 400px; }
    .sdh-hero--has-image.sdh-hero--medium { min-height: 300px; }
    .sdh-hero__inner  { padding: 40px 16px; }
}

@media (max-width: 480px) {
    /* DEUX colonnes et non une. Mesure a 390 px : huit tuiles empilees une par
       une occupaient 3 274 px, soit quatre ecrans avant d'atteindre la section
       suivante. En deux colonnes chaque tuile fait 171 px — la taille d'une
       vignette de catalogue, largement lisible — et la section tombe a moitie.
       Une colonne unique n'est justifiee que lorsque le contenu de la tuile a
       besoin de la largeur ; ici c'est une photo carree et deux mots. */
    .sdh-grid,
    .sdh-products__grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .sdh-reassurance__list { grid-template-columns: 1fr; }
    .sdh-hero--has-image.sdh-hero--large { min-height: 320px; }

    /* Les intitules d'univers passent sous la photo, sur deux lignes au plus. */
    .sdh-cat__pied {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 8px 10px;
    }
    .sdh-cat__name { font-size: 0.84rem; }
}

@media (prefers-reduced-motion: reduce) {
    .sdh-cat__link,
    .sdh-btn { transition: none; }
    .sdh-cat__link:hover { transform: none; }
}

/* --- Tuiles d'univers : des sources d'image hétérogènes ---------------------
   Mesuré : deux tuiles reçoivent une bannière de 870x217 et six une photo
   produit de 250x250. Le cadrage « cover » écrasait les premières et rognait
   les secondes. Un fond blanc et un cadrage « contain » traitent les deux de
   la même façon : le visuel respire, et le cadre reste identique d'une tuile
   à l'autre — c'est la régularité du cadre qui fait la grille, pas l'image. */
.sdh-cat__media {
    background: #fff;
    padding: 12px;
}

.sdh-cat__media img {
    object-fit: contain;
    /* Une bannière très large ne doit pas occuper toute la hauteur de la
       tuile : on la laisse se poser au centre, à sa taille. */
    max-height: 100%;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
}

/* Le liséré intérieur donne un cadre net à des photos détourées sur blanc,
   qui autrement flottent dans le vide. */
.sdh-cat__media::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--sdh-line, #e2e5e9);
    border-radius: inherit;
    pointer-events: none;
}

/* --- Retouches de bannière, mesurées ---------------------------------------- */

/* Le surtitre est un flex : sans cette ligne il s'étirait sur 662 px alors que
   son texte en fait 280. Ça n'a pas d'effet visible en soi, mais un survol ou
   un focus sur toute la largeur, si. */
.sdh-hero__eyebrow { width: fit-content; }

/* Sur mobile la bannière atteignait 843 px — un écran entier avant le premier
   contenu. Le bandeau de preuves y passait à 170 px en trois lignes pleines ;
   il devient une bande qui défile, comme les rayons d'un catalogue. */
@media (max-width: 767px) {
    .sdh-hero__preuves {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .sdh-hero__preuves::-webkit-scrollbar { display: none; }

    /* Une bande qui defile sans rien qui l'annonce se lit comme une bande
       coupee : a 390 px, la deuxieme mention s'arrete au milieu de « offerte
       des 9... » et rien ne dit qu'il y a une suite. Le fondu au bord droit est
       l'indice habituel, et il coute un seul masque — pas d'element en plus,
       pas de JavaScript. Le masque s'applique a la fenetre de defilement, donc
       le fondu reste au bord quel que soit le defilement. */
    .sdh-hero__preuves {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    }

    .sdh-hero__preuves li {
        flex: 0 0 auto;
        max-width: 250px;
        padding: 12px 16px;
        border-bottom: none;
        border-right: 1px solid rgba(255, 255, 255, .1);
        scroll-snap-align: start;
        font-size: 0.84rem;
    }

    .sdh-hero__inner { padding: 24px 16px 20px; }
    .sdh-hero__title { margin-bottom: 12px; }
    .sdh-hero__text { margin-bottom: 16px; font-size: 0.92rem; }
}

/* --- En-têtes de section ----------------------------------------------------
   Un titre centré avec son filet sous le nez est le réglage par défaut de tous
   les thèmes du monde. Ici le titre tient la gauche, le lien « tout voir » la
   droite : c'est une mise en page de catalogue, et le lien devient atteignable
   sans traverser la grille. */
.sdh-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 24px;
    text-align: left;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sdh-line);
}

.sdh-section__intitule { min-width: 0; }

.sdh-section__title {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    text-align: left;
    font-size: 1.62rem;
    line-height: 1.15;
}

/* Le losange remplace le filet : c'est la forme du logo, elle n'appartient
   qu'à cette maison. */
.sdh-section__title::before {
    content: '';
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    background: var(--sdh-accent);
    transform: rotate(45deg);
}


.sdh-section__sub {
    margin: 6px 0 0 20px;
    text-align: left;
    font-size: 0.92rem;
    color: var(--sdh-ink-soft);
}

.sdh-section__lien {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    flex: 0 0 auto;
    font-family: 'Archivo', -apple-system, sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sdh-accent-text);
    text-decoration: none;
}

.sdh-section__fleche {
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 150ms ease;
}

.sdh-section__lien:hover { color: var(--sdh-ink); }
.sdh-section__lien:hover .sdh-section__fleche { transform: rotate(45deg) translate(2px, -2px); }

/* --- Tuiles d'univers -------------------------------------------------------
   Le nom seul ne dit rien de ce qu'il y a derrière. Le nombre de références
   répond à la première question que pose un acheteur devant un univers. */
.sdh-cat__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--sdh-line);
    border-radius: var(--sdh-radius-lg);
    background: #fff;
    overflow: hidden;
    text-decoration: none;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.sdh-cat__link:hover,
.sdh-cat__link:focus-visible {
    border-color: var(--sdh-green);
    /* Niveau 2 de l'echelle d'elevation du theme (`$ombre-2`). */
    box-shadow: 0 4px 12px rgba(34, 38, 43, .08), 0 2px 4px rgba(34, 38, 43, .04);
    transform: translateY(-2px);
}

.sdh-cat__pied {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    margin-top: auto;
    border-top: 1px solid var(--sdh-line);
    /* Deux lignes de nom au plus, et TOUJOURS la place pour deux : sans cette
       reserve, « Fonte cire perdue By "GALLONI" » repoussait le bas de sa tuile
       de 21 px et cassait l'alignement de toute la rangee. */
    min-height: 62px;
    align-items: center;
}

.sdh-cat__name {
    text-align: left;
    font-family: 'Archivo', -apple-system, sans-serif;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sdh-ink);
    padding: 0;
    margin: 0;
}

.sdh-cat__compte {
    flex: 0 0 auto;
    font-size: .76rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .03em;
    color: var(--sdh-ink-soft);
    white-space: nowrap;
}

.sdh-cat__link:hover .sdh-cat__name { color: var(--sdh-green-deep); }

/* --- Réassurance ------------------------------------------------------------
   Elle flottait sur le fond de page, sans limite ni rythme. Un aplat la sépare
   de ce qui l'entoure, et des séparateurs verticaux donnent aux quatre
   promesses le même poids.

   LE VERT DE LA MAISON PREND UN CHAMP, PAS UNE RAYURE. Il occupait l'en-tête en
   aplat saturé, bord à bord, en haut de chaque page : il criait avant que la
   page n'ait rien dit. Il a laissé la place à une teinte claire là-haut et se
   réinstalle ici, au milieu du parcours, sur les quatre promesses de la maison.
   L'encre sur ce vert donne 5,74:1 — au-dessus du seuil AA de 4,5. */
.sdh-reassurance {
    background: var(--sdh-green);
    /* La respiration interne vient du bloc « section a fond » plus haut :
       on ne la redefinit pas ici, sous peine de reintroduire deux valeurs. */
    border-radius: var(--sdh-radius-lg);
    padding-left: 24px;
    padding-right: 24px;
}

.sdh-reassurance .sdh-section__head { border-bottom-color: rgba(34, 38, 43, .18); }

/* Sur un fond colore, un gris devient une troisieme teinte parasite : les
   textes secondaires et les separateurs passent en encre translucide.
   Les classes sont en ANGLAIS — `__text`, `__title` — comme le reste du
   gabarit. Les viser en francais laissait le gris `#5b6470` sur le vert :
   2,26:1 mesure, tres en dessous du seuil AA de 4,5. */
.sdh-reassurance .sdh-reassurance__title { color: var(--sdh-ink); }
/* ENCRE PLEINE, PAS TRANSLUCIDE. L'encre a 82 % se compose avec le vert et
   retombe a 4,17:1 — sous le seuil. Sur un fond colore, la hierarchie se fait
   a la graisse et a la taille, jamais a la transparence : elle y coute toujours
   du contraste. */
.sdh-reassurance .sdh-reassurance__text {
    color: var(--sdh-ink);
    font-weight: 400;
}

.sdh-reassurance .sdh-reassurance__title { font-weight: 700; }

/* L'icone aussi : le vert profond sur le vert de la maison ne donne que
   2,99:1. Un pictogramme porte de l'information — il suit le seuil de 3:1 des
   elements non textuels (WCAG 1.4.11), et l'encre le depasse largement. */
.sdh-reassurance .sdh-reassurance__icon,
.sdh-reassurance .sdh-reassurance__icon svg,
.sdh-reassurance svg { color: var(--sdh-ink); }

.sdh-reassurance__item + .sdh-reassurance__item { border-left-color: rgba(34, 38, 43, .18); }

.sdh-reassurance__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}

.sdh-reassurance__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 4px 24px;
    border-right: 1px solid rgba(74, 85, 57, .18);
}

.sdh-reassurance__item:first-child { padding-left: 0; }
.sdh-reassurance__item:last-child { border-right: none; padding-right: 0; }

.sdh-reassurance__icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid rgba(74, 85, 57, .22);
    border-radius: var(--sdh-radius);
    color: var(--sdh-green-deep);
}

.sdh-reassurance__icon svg { width: 20px; height: 20px; }

.sdh-reassurance__title {
    margin: 0 0 2px;
    font-family: 'Archivo', -apple-system, sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--sdh-ink);
}

.sdh-reassurance__text {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--sdh-ink-soft);
}

@media (max-width: 991px) {
    .sdh-reassurance__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 0; }
    .sdh-reassurance__item:nth-child(2n) { border-right: none; padding-right: 0; }
    .sdh-reassurance__item:nth-child(odd) { padding-left: 0; }
}

@media (max-width: 575px) {
    /* La respiration verticale vient du bloc « section a fond » ; on ne touche
       ici qu aux marges laterales. */
    .sdh-reassurance { padding-left: 16px; padding-right: 16px; }
    .sdh-reassurance__list { grid-template-columns: 1fr; gap: 16px; }
    .sdh-reassurance__item { border-right: none; padding: 0; }
    .sdh-section__head { align-items: flex-start; flex-direction: column; }
}

/* --- « Ce que les ateliers rachètent » --------------------------------------
   Une LISTE numérotée, pas une grille de vignettes : c'est un classement, et
   un classement se lit de haut en bas. La grille de cartes aurait dit « voici
   six produits » ; la liste dit « voici l'ordre dans lequel ils repartent ».

   Le compteur de commandes est la seule chose qui donne son autorité à ce
   bloc : « repris dans 665 commandes » vaut mieux que « best-seller ». */
.sdh-reassort__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--sdh-line);
}

.sdh-reassort__ligne {
    position: relative;
    display: grid;
    grid-template-columns: 32px 56px minmax(0, 1fr) 140px 96px;
    align-items: center;
    gap: 0 16px;
    padding: 12px 8px;
    border-bottom: 1px solid var(--sdh-line);
    background: #fff;
    transition: background-color 150ms cubic-bezier(.2, .7, .35, 1);
}

.sdh-reassort__ligne:hover { background: var(--sdh-green-pale); }

/* Le rang en chiffres clairs : il ordonne sans crier. */
.sdh-reassort__rang {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.36rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--sdh-green-dark);
    text-align: center;
}

.sdh-reassort__visuel {
    display: block;
    width: 56px;
    height: 56px;
    background: var(--sdh-surface-alt);
    border: 1px solid var(--sdh-line);
    border-radius: var(--sdh-radius);
    overflow: hidden;
}

.sdh-reassort__visuel img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.sdh-reassort__corps { min-width: 0; }

/* Le pseudo-element du nom couvre la rangee entiere : la cible passe de
   144x19 px — sous le minimum de 24 px du critere WCAG 2.5.8 — a la rangee
   complete, sans ajouter un pixel de hauteur. Le visuel, deja marque
   `aria-hidden` et `tabindex="-1"`, n'a pas besoin de repasser au-dessus. */
.sdh-reassort__nom::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.sdh-reassort__nom {
    display: block;
    overflow-wrap: anywhere;
    font-family: 'Archivo', -apple-system, sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sdh-ink);
    text-decoration: none;
}

.sdh-reassort__ligne:hover .sdh-reassort__nom { color: var(--sdh-green-deep); }

.sdh-reassort__ref {
    display: block;
    /* Une reference n'a ni espace ni trait d'union : « PAPEN180/1200 » ne peut
       se couper nulle part et sortait de 19 px de sa colonne a 320 px de large,
       par-dessus le prix voisin. Ni rognee ni debordant la page : elle se
       posait simplement sur ce qui l'entourait. */
    overflow-wrap: anywhere;
    margin-top: 2px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: .05em;
    font-variant-numeric: tabular-nums;
    color: var(--sdh-ink-soft);
}

.sdh-reassort__preuve {
    font-size: 0.84rem;
    color: var(--sdh-ink-soft);
    font-variant-numeric: tabular-nums;
}

.sdh-reassort__preuve strong {
    color: var(--sdh-ink);
    font-weight: 700;
}

.sdh-reassort__prix {
    text-align: right;
    font-family: 'Archivo', -apple-system, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--sdh-ink);
}

@media (max-width: 767px) {
    .sdh-reassort__ligne {
        grid-template-columns: 24px 48px minmax(0, 1fr) auto;
        row-gap: 4px;
        padding: 12px 4px;
    }
    .sdh-reassort__rang { font-size: 1rem; }
    .sdh-reassort__visuel { width: 48px; height: 48px; }
    .sdh-reassort__preuve { grid-column: 3; font-size: 0.76rem; }
    .sdh-reassort__prix { grid-column: 4; grid-row: 1; }
}

/* --- « Les maisons que nous représentons » ----------------------------------
   Treize fabricants en base, aucun visible jusqu'ici. Le logo n'existe que
   pour une partie d'entre eux : les autres reçoivent un cartouche
   typographique, de sorte que l'absence de logo reste un parti pris. */
.sdh-marques__liste {
    display: grid;
    /* `auto-fill` avec un minimum de 160 px retombait a UNE colonne sous
       380 px : les douze maisons occupaient alors 1 534 px, plus que toute
       autre section. Un cartouche de marque n'a pas besoin de 160 px. */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sdh-marques__lien {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    min-height: 96px;
    padding: 16px 12px;
    background: #fff;
    border: 1px solid rgba(34, 38, 43, .07);
    box-shadow: 0 1px 2px rgba(34, 38, 43, .05), 0 1px 1px rgba(34, 38, 43, .03);
    border-radius: var(--sdh-radius-lg);
    text-decoration: none;
    transition: border-color 150ms cubic-bezier(.2,.7,.35,1),
                box-shadow 150ms cubic-bezier(.2,.7,.35,1);
}

.sdh-marques__lien:hover,
.sdh-marques__lien:focus-visible {
    border-color: var(--sdh-green);
    box-shadow: 0 4px 12px rgba(34, 38, 43, .08), 0 2px 4px rgba(34, 38, 43, .04);
}

/* LES LOGOS ETAIENT RENDUS A 40 PX DANS UNE TUILE DE 101.
   Les fichiers font 452x452 et le sigle y occupe 86 % de la surface — ils n'ont
   rien a gagner d'un recadrage, contrairement aux photos produit. Ils avaient
   juste besoin de place : a 40 px de haut, « Proxxon » ou « Kern » se
   reduisaient a une tache de trente pixels, illisible. Les trois maisons sans
   fichier, rendues en toutes lettres a cote, se lisaient dix fois mieux que les
   neuf qui en avaient un. */
.sdh-marques__logo {
    width: 100%;
    max-width: 132px;
    height: 56px;
    object-fit: contain;
}

/* Cartouche typographique quand le logo manque : le nom devient la marque. */
.sdh-marques__nom {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.14rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--sdh-ink);
    text-align: center;
    line-height: 1.15;
}

.sdh-marques__compte {
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
    color: var(--sdh-ink-soft);
}

.sdh-marques__lien:hover .sdh-marques__nom { color: var(--sdh-green-deep); }

@media (max-width: 575px) {
    .sdh-marques__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .sdh-marques__lien  { min-height: 76px; padding: 10px 6px; gap: 6px; }
    .sdh-marques__logo  { max-width: 84px; max-height: 30px; }
    .sdh-marques__nom   { font-size: 0.92rem; }
    .sdh-marques__compte { font-size: 0.76rem; }
}

/* Sur mobile, l'ecart se resserre : la page fait deja 6 000 px de haut, et un
   ecart de 56 px repete six fois y ajouterait un tiers d'ecran pour rien. */
@media (max-width: 767px) {
    /* Sur `.sdh` et NON sur `:root` : les jetons du module sont declares sur
       `.sdh`, qui les redeclarait donc a 56 px pour tout ce qu'il contient.
       La surcharge posee sur la racine etait bien lue jusqu'a `.page-home`,
       puis ecrasee un cran plus bas. */
    .sdh { --sdh-ecart-bloc: 36px; }
}