/* ══════════════════════════════════════════════════════════════════════════
   Refonte design v9 du site de vente (2026-09-30)
   ══════════════════════════════════════════════════════════════════════════
   Direction artistique validée par Martin : référence drive-turismo.com,
   maquette pub/catalogue.html (dossier design-turismo). Valeurs reprises des
   mesures navigateur de la référence (OBSERVATIONS-NAVIGATEUR.md) : Inter,
   texte #1c1b1f, bordures #e3e3e8, séparateurs #eeeff2, fond #f2f2f2, rayons
   8 / 12 / 16 / 20, menus .14 s / .18 s cubic-bezier(.22,.61,.36,1).

   Chargée APRÈS drm.css, sur les seules pages redessinées (bDsPage, voir
   base.html.twig). Tout est scopé body.ds-page : rien ne peut atteindre une page
   non redessinée.

   Habillage par site : l'accent n'est jamais écrit en dur. --dr-accent suit
   --ds-accent, que base.html.twig calcule par site depuis lz_settings (groupe
   DESIGN, THEME_COLOR du site courant, valeur validée côté serveur), avec le texte
   lisible dessus (--ds-on-accent) et le fond du bouton principal
   (--ds-primary-bg, ColorContrast::primaryBgFor) eux aussi calculés côté
   serveur. Coiffinéa, Framesi, Paul Mitchell, Orvéa : même feuille, couleur de
   leur réglage.

   Classes préfixées dr- ; les ids et classes historiques dont dépend le JS
   existant sont conservés dans le balisage, cette feuille ne s'en sert que pour
   neutraliser l'ancien habillage quand il le faut.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Jetons ─────────────────────────────────────────────────────────────── */
body.ds-page {
    --dr-texte: #1c1b1f;
    --dr-texte-2: #6a6a6a;
    --dr-texte-3: #6e6e73;
    --dr-placeholder: #8a8a90;
    --dr-bordure: #e3e3e8;
    --dr-sep: #eeeff2;
    --dr-fond: #f2f2f2;
    --dr-hover: #f7f7f8;
    --dr-actif: #f1f1f4;
    --dr-blanc: #ffffff;
    --dr-accent: var(--ds-accent, #0062d6);
    --dr-accent-texte: var(--ds-accent-texte, var(--dr-accent));
    --dr-on-accent: var(--ds-on-accent, #ffffff);
    --dr-primaire: var(--ds-primary-bg, var(--dr-accent));
    --dr-on-primaire: var(--ds-on-primary, #ffffff);
    /* Vert de disponibilité assombri par rapport à la référence (#16a34a = 3,3:1
       sur blanc) pour tenir 4,5:1 sur du texte de 12,5 px. */
    --dr-succes: #15803d;
    --dr-alerte: #8a5a00;
    --dr-danger: #b3261e;
    --dr-favori: #e11d48;

    --dr-r-sm: 8px;
    --dr-r-md: 12px;
    --dr-r-lg: 16px;
    --dr-r-xl: 20px;
    --dr-r-pill: 999px;

    --dr-conteneur: 1400px;
    --dr-entete-barre: 56px;
    --dr-bandeau: 34px;

    --dr-duree-etat: .14s;
    --dr-duree-transform: .18s;
    --dr-duree-composant: .25s;
    --dr-duree-accordeon: .28s;
    --dr-duree-scene: .5s;
    --dr-ease-menu: cubic-bezier(.22, .61, .36, 1);
    --dr-ease-tag: cubic-bezier(.34, 1.56, .64, 1);

    --dr-ombre-menu: 0 8px 28px rgba(0, 30, 60, .12);
    --dr-ombre-carte: 0 8px 24px rgba(17, 24, 39, .08);
}

body.ds-page .dr-icone {
    display: inline-block;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════════════════════
   En-tête FIXE
   ══════════════════════════════════════════════════════════════════════════
   position:fixed, jamais masqué au défilement. #header garde sa classe
   historique ds-header (le JS s'y accroche) : l'ancien position:sticky de
   drm.css est neutralisé ici par une spécificité plus forte (id). */
body.ds-page #header.dr-entete {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    background: var(--dr-blanc);
    border-bottom: 1px solid var(--dr-sep);
    box-shadow: none;
    font-family: var(--ds-font);
    color: var(--dr-texte);
}
body.ds-page #header.dr-entete.headerFixed { box-shadow: 0 1px 0 rgba(17, 24, 39, .02), 0 6px 18px rgba(17, 24, 39, .05); }

/* Place réservée sous l'en-tête fixe : hauteur mesurée par ds-header.js
   (--ds-header-h), repli selon les bandeaux rendus par le serveur. */
body.ds-page .dr-entete-place { height: var(--ds-header-h, var(--dr-entete-barre)); }
body.ds-page .dr-entete-place--utilitaire { height: var(--ds-header-h, calc(var(--dr-entete-barre) + var(--dr-bandeau))); }
body.ds-page .dr-entete-place--message { height: var(--ds-header-h, calc(var(--dr-entete-barre) + var(--dr-bandeau))); }
body.ds-page .dr-entete-place--message.dr-entete-place--utilitaire { height: var(--ds-header-h, calc(var(--dr-entete-barre) + 2 * var(--dr-bandeau))); }

/* Fiche produit mobile (T1b, attribut bDsFiche) : ni en-tête ni place réservée
   sous 769 px. Le tiroir (#ds-header-drawer) est HORS de #header : il reste
   ouvrable par le bouton flottant « Menu » de la fiche. */
@media (max-width: 768px) {
    body.ds-page #header.dr-entete.dr-entete--sans-mobile,
    body.ds-page .dr-entete-place.dr-entete-place--sans-mobile { display: none; }
}

/* WCAG 2.4.11 : seulement les pages qui portent l'en-tête fixe v9 (repérées par la
   place réservée .dr-entete-place que rend ce même en-tête). Ni le tunnel sans
   en-tête, ni le back-office, ni les autres pages ne reçoivent ce décalage. */
html:has(.dr-entete-place) { scroll-padding-top: 96px; }

body.ds-page .dr-entete__message,
body.ds-page .dr-entete__utilitaire {
    height: var(--dr-bandeau);
    font-size: 13px;
    line-height: var(--dr-bandeau);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.ds-page .dr-entete__message {
    padding: 0 16px;
    text-align: center;
    background: var(--dr-texte);
    color: var(--dr-blanc);
}
body.ds-page .dr-entete__utilitaire {
    background: var(--ds-accent-light, var(--dr-fond));
    color: var(--ds-on-accent-light, var(--dr-texte));
}
body.ds-page .dr-entete__utilitaire-conteneur {
    max-width: var(--dr-conteneur);
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
body.ds-page .dr-entete__rattachement { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.ds-page .dr-entete__code { opacity: .75; }
body.ds-page .dr-entete__version { margin-left: auto; opacity: .85; }
body.ds-page .dr-entete a.dr-entete__lien-utilitaire,
body.ds-page .dr-entete a.dr-entete__lien-utilitaire:hover {
    flex: none;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

body.ds-page .dr-entete__barre { height: var(--dr-entete-barre); }
body.ds-page .dr-entete__conteneur {
    max-width: var(--dr-conteneur);
    height: 100%;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body.ds-page .dr-entete a.dr-entete__logo,
body.ds-page .dr-entete a.dr-entete__logo:hover {
    display: flex;
    align-items: center;
    flex: none;
    min-width: 0;
    max-width: 220px;
    height: 100%;
    color: var(--dr-texte);
    text-decoration: none;
}
body.ds-page .dr-entete__logo-img { display: block; max-height: 34px; max-width: 100%; width: auto; height: auto; }
body.ds-page .dr-entete__logo-nom { font-size: 18px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Recherche : barre pleine en haut de page, loupe au défilement ── */
body.ds-page .dr-entete__recherche {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
    margin: 0 24px;
}
body.ds-page #header #form-search-products.dr-entete__form {
    position: relative; /* l'autocomplétion jQuery UI s'ouvre sous le champ */
    display: flex;
    align-items: center;
    gap: 10px;
    width: var(--dr-recherche-l, min(520px, 100%));
    max-width: none;
    height: 40px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--dr-bordure);
    border-radius: var(--dr-r-md);
    background: var(--dr-blanc);
    box-shadow: none;
    transition: width .55s var(--dr-ease-menu), opacity .35s ease, padding .55s var(--dr-ease-menu), border-color .25s ease, box-shadow .25s ease;
}
body.ds-page #header #form-search-products.dr-entete__form:focus-within {
    border-color: var(--dr-texte);
    box-shadow: 0 0 0 1px var(--dr-texte);
}
body.ds-page #header .dr-entete__form .dr-icone { color: var(--dr-texte-2); }
body.ds-page #header input.dr-entete__champ,
body.ds-page #header input.dr-entete__champ:focus {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: none;
    box-shadow: none;
    background: transparent;
    font: inherit;
    font-size: 14.5px;
    color: var(--dr-texte);
}
body.ds-page #header input.dr-entete__champ::placeholder { color: var(--dr-placeholder); opacity: 1; }

body.ds-page #header button.dr-entete__loupe { display: none; } /* bat .dr-entete__bouton (inline-flex) */
body.ds-page #header.dr-entete--replie #form-search-products.dr-entete__form {
    width: 0;
    opacity: 0;
    padding: 0;
    border-color: transparent;
    box-shadow: none;
    pointer-events: none;
    overflow: hidden;
}
body.ds-page #header.dr-entete--replie .dr-entete__loupe {
    display: inline-flex;
    animation: dr-loupe-in .45s var(--dr-ease-menu) both;
}
@keyframes dr-loupe-in {
    0% { opacity: 0; transform: scale(.7); }
    60% { opacity: 1; }
    to { opacity: 1; transform: scale(1); }
}
body.ds-page #header.dr-entete--replie.dr-entete--recherche-ouverte #form-search-products.dr-entete__form {
    width: var(--dr-recherche-l, min(520px, 100%));
    opacity: 1;
    padding: 0 14px;
    border-color: var(--dr-bordure);
    pointer-events: auto;
    overflow: visible;
}
body.ds-page #header.dr-entete--replie.dr-entete--recherche-ouverte .dr-entete__loupe { display: none; }

/* ── Boutons ronds d'icône ── */
body.ds-page .dr-entete__icones { display: flex; align-items: center; gap: 4px; flex: none; }
body.ds-page #header .dr-entete__bouton,
body.ds-page #header a.dr-entete__bouton {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--dr-texte);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dr-duree-etat);
}
body.ds-page #header .dr-entete__bouton:hover,
body.ds-page #header a.dr-entete__bouton:hover { background-color: var(--dr-hover); color: var(--dr-texte); text-decoration: none; }
body.ds-page #header .dr-entete__bouton:focus-visible,
body.ds-page #header .dr-entete__form:focus-within,
body.ds-page .dr-entete__panneau a:focus-visible { outline: none; }
body.ds-page #header .dr-entete__bouton:focus-visible { box-shadow: 0 0 0 2px var(--dr-blanc), 0 0 0 4px var(--dr-accent); }

body.ds-page #header .dr-entete__initiales {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--dr-primaire);
    color: var(--dr-on-primaire);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}

/* Panier : l'ancienne pastille grise (.ds-header-panier) est neutralisée, le
   compteur devient une puce ronde en haut à droite de l'icône. */
body.ds-page #header .dr-entete__panier { gap: 0; }
body.ds-page #header .dr-entete__compteur {
    position: absolute;
    top: 0;
    right: -2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 2px solid var(--dr-blanc);
    border-radius: var(--dr-r-pill);
    background: var(--dr-primaire);
    color: var(--dr-on-primaire);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
body.ds-page #header .dr-entete__compteur.ds-header-panier__count--vide { display: none; }
body.ds-page #header .dr-entete__panier.d-none { display: none !important; }

body.ds-page #header .dr-entete__burger { display: none; border: 0; }

/* ── Menu du compte ── */
body.ds-page .dr-entete__menu { position: relative; }
body.ds-page .dr-entete__panneau {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    min-width: 250px;
    max-width: min(320px, calc(100vw - 24px));
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    padding: 6px;
    background: var(--dr-blanc);
    border: 1px solid var(--dr-sep);
    border-radius: 14px;
    box-shadow: var(--dr-ombre-menu);
    animation: dr-menu-in var(--dr-duree-transform) var(--dr-ease-menu) both;
}
body.ds-page .dr-entete__panneau[hidden] { display: none; }
@keyframes dr-menu-in {
    0% { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}
body.ds-page .dr-entete__panneau-nom {
    padding: 10px 12px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--dr-sep);
    font-size: 13px;
    font-weight: 600;
    color: var(--dr-texte-2);
}
body.ds-page .dr-entete__panneau-titre {
    padding: 12px 12px 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--dr-texte-2);
}
body.ds-page .dr-entete__panneau a.dr-entete__panneau-item,
body.ds-page .dr-entete__panneau a.dr-entete__panneau-item:hover {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 14px;
    color: var(--dr-texte);
    text-decoration: none;
    transition: background-color var(--dr-duree-etat);
}
body.ds-page .dr-entete__panneau a.dr-entete__panneau-item:hover { background-color: var(--dr-hover); }
body.ds-page .dr-entete__panneau a.dr-entete__panneau-item:focus-visible { background-color: var(--dr-hover); box-shadow: inset 0 0 0 2px var(--dr-accent); }
body.ds-page .dr-entete__panneau a.dr-entete__panneau-item--deconnexion,
body.ds-page .dr-entete__panneau a.dr-entete__panneau-item--deconnexion:hover {
    margin-top: 4px;
    border-top: 1px solid var(--dr-sep);
    border-radius: 0 0 9px 9px;
    color: var(--dr-danger);
}
body.ds-page .dr-entete__prix { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; font-size: 13px; color: var(--dr-texte-2); }
body.ds-page .dr-entete__prix label { margin: 0 8px 0 0; cursor: pointer; }

/* ── Recherche en tête du tiroir mobile ── */
body.ds-page .dr-tiroir-recherche { margin: 4px 0 12px; }
body.ds-page #form-search-products-fixed.dr-tiroir-recherche__form {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--dr-bordure);
    border-radius: var(--dr-r-md);
    background: var(--dr-blanc);
}
body.ds-page #form-search-products-fixed.dr-tiroir-recherche__form:focus-within { border-color: var(--dr-texte); box-shadow: 0 0 0 1px var(--dr-texte); }
body.ds-page #form-search-products-fixed .dr-icone { color: var(--dr-texte-2); }
body.ds-page input.dr-tiroir-recherche__champ,
body.ds-page input.dr-tiroir-recherche__champ:focus {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: none;
    box-shadow: none;
    background: transparent;
    font: inherit;
    font-size: 16px; /* 16 px : pas de zoom automatique sur iOS au focus */
    color: var(--dr-texte);
}

/* Entre 769 et 1024 px : la barre de recherche reste dans l'en-tête (drm.css la
   masquait sous 1024 px au profit d'une ligne mobile qui n'existe plus). */
@media (max-width: 1024px) {
    body.ds-page #header #form-search-products.dr-entete__form { display: flex; }
    body.ds-page #header .dr-entete__burger { display: inline-flex; }
    html:has(.dr-entete-place) { scroll-padding-top: 96px; }
}

@media (max-width: 768px) {
    body.ds-page .dr-entete__conteneur,
    body.ds-page .dr-entete__utilitaire-conteneur { padding: 0 16px; }
    body.ds-page .dr-entete__recherche,
    body.ds-page #header .dr-entete__loupe,
    body.ds-page #header.dr-entete--replie .dr-entete__loupe { display: none !important; }
    body.ds-page #header .dr-entete__bouton,
    body.ds-page #header a.dr-entete__bouton { width: 44px; height: 44px; } /* cible tactile de 44 px */
    body.ds-page .dr-entete__icones { gap: 0; }
    body.ds-page a.dr-entete__logo,
    body.ds-page .dr-entete a.dr-entete__logo { max-width: 46vw; margin-right: auto; }
    body.ds-page .dr-entete__logo-img { max-height: 30px; }
    body.ds-page .dr-entete__lien-utilitaire { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Pied de page (absent de la maquette, dessiné dans la même direction)
   ══════════════════════════════════════════════════════════════════════════ */
body.ds-page #footer.dr-pied {
    margin-top: 0;
    padding: 0;
    background: var(--dr-blanc);
    border-top: 1px solid var(--dr-sep);
    color: var(--dr-texte);
    font-family: var(--ds-font);
}
body.ds-page .dr-pied__conteneur {
    max-width: var(--dr-conteneur);
    margin: 0 auto;
    padding: 48px 32px 28px;
}
body.ds-page .dr-pied__grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px 40px;
}
body.ds-page .dr-pied__col { min-width: 0; }
body.ds-page .dr-pied__titre {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--dr-texte);
}
body.ds-page .dr-pied__liens { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
body.ds-page .dr-pied__liens li { display: flex; margin: 0; }
body.ds-page .dr-pied a,
body.ds-page .dr-pied a:hover {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    font-size: 14px;
    color: var(--dr-texte-2);
    text-decoration: none;
    transition: color var(--dr-duree-etat);
}
body.ds-page .dr-pied a:hover { color: var(--dr-texte); text-decoration: underline; text-underline-offset: 3px; }
body.ds-page .dr-pied a:focus-visible { outline: 2px solid var(--dr-accent); outline-offset: 2px; border-radius: 4px; }
body.ds-page .dr-pied__contact { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--dr-texte-2); }
body.ds-page .dr-pied__entreprise { font-weight: 600; color: var(--dr-texte); }
body.ds-page .dr-pied__ligne { display: inline-flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
body.ds-page .dr-pied a.dr-pied__ligne { align-items: center; }
body.ds-page .dr-pied__ligne .dr-icone { margin-top: 2px; color: var(--dr-texte-2); }
body.ds-page .dr-pied__horaires { font-size: 14px; color: var(--dr-texte-2); }
body.ds-page .dr-pied__mention {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 28px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--dr-sep);
    font-size: 13px;
    color: var(--dr-texte-2);
}
body.ds-page .dr-pied__site { font-weight: 600; color: var(--dr-texte); }
@media (max-width: 768px) {
    body.ds-page .dr-pied__conteneur { padding: 36px 16px 24px; }
    body.ds-page .dr-pied__grille { grid-template-columns: 1fr; gap: 28px; }
    body.ds-page .dr-pied a,
    body.ds-page .dr-pied a:hover { min-height: 44px; }
    body.ds-page .dr-pied__mention { flex-direction: column; margin-top: 28px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Catalogue
   ══════════════════════════════════════════════════════════════════════════ */
body.ds-page .dr-page-catalogue {
    background: var(--dr-fond);
    color: var(--dr-texte);
    padding: 24px 0 64px;
}
body.ds-page .dr-page-catalogue__conteneur {
    max-width: var(--dr-conteneur);
    margin: 0 auto;
    padding: 0 32px;
}
body.ds-page .dr-page-catalogue .ds-ariane { margin: 0 0 12px; }

/* Bannière : image seule, pleine largeur, coins arrondis, sans bouton. */
body.ds-page .dr-banniere {
    width: 100%;
    margin: 0 0 24px;
    border-radius: var(--dr-r-lg);
    overflow: hidden;
    background: var(--dr-blanc);
    border: 1px solid var(--dr-sep);
}
body.ds-page .dr-banniere__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1336 / 300;
    object-fit: cover;
}

/* Recherche sous la bannière : mobile seulement sur le catalogue, toujours sur
   la page de résultats (champ pré-rempli). */
body.ds-page .dr-recherche-page { display: none; margin: 0 0 20px; }
body.ds-page .dr-recherche-page--toujours { display: block; }
body.ds-page .dr-recherche-page__form {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 56px;
    max-width: 720px;
    padding: 0 18px;
    border: 1px solid var(--dr-bordure);
    border-radius: var(--dr-r-lg);
    background: var(--dr-blanc);
}
body.ds-page .dr-recherche-page__form:focus-within { border-color: var(--dr-texte); box-shadow: 0 0 0 1px var(--dr-texte); }
body.ds-page .dr-recherche-page__form .dr-icone { color: var(--dr-texte-2); }
body.ds-page input.dr-recherche-page__champ,
body.ds-page input.dr-recherche-page__champ:focus {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: none;
    box-shadow: none;
    background: transparent;
    font: inherit;
    font-size: 17px;
    color: var(--dr-texte);
}
body.ds-page input.dr-recherche-page__champ::placeholder { color: var(--dr-placeholder); opacity: 1; }

/* Barre : titre + compteur à gauche, tri et affichage à droite. */
body.ds-page .dr-barre {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 20px;
}
body.ds-page .dr-barre__texte { min-width: 0; }
body.ds-page .dr-page-catalogue h1.dr-barre__titre {
    margin: 0 0 2px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--dr-texte);
}
body.ds-page .dr-page-catalogue h1.dr-barre__titre--seul { margin-bottom: 20px; }
body.ds-page .dr-compteur {
    margin: 0;
    font-size: 14.5px;
    color: var(--dr-texte-2);
    animation: dr-compteur-in .18s ease-out both;
}
body.ds-page .dr-compteur b { font-weight: 600; color: var(--dr-texte); }
@keyframes dr-compteur-in {
    0% { opacity: .35; transform: translateY(-3px); }
    to { opacity: 1; transform: none; }
}
body.ds-page .dr-barre__description { margin: 8px 0 0; max-width: 760px; font-size: 14px; line-height: 1.55; color: var(--dr-texte-2); }
body.ds-page .dr-barre__actions { display: flex; align-items: center; gap: 10px; flex: none; }

body.ds-page .dr-bouton-outil {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--dr-bordure);
    border-radius: var(--dr-r-md);
    background: var(--dr-blanc);
    font: inherit;
    font-size: 13.5px;
    color: var(--dr-texte);
    cursor: pointer;
    transition: border-color var(--dr-duree-transform), background-color var(--dr-duree-etat);
}
body.ds-page .dr-bouton-outil:hover { background: var(--dr-hover); }
body.ds-page .dr-bouton-outil[aria-expanded="true"] { border-color: var(--dr-texte); }
body.ds-page .dr-bouton-outil:focus-visible { outline: 2px solid var(--dr-accent); outline-offset: 2px; }
body.ds-page .dr-tri__valeur { color: var(--dr-texte-2); }
body.ds-page .dr-tri { position: relative; }
body.ds-page .dr-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    min-width: 230px;
    padding: 6px;
    background: var(--dr-blanc);
    border: 1px solid var(--dr-bordure);
    border-radius: var(--dr-r-md);
    box-shadow: var(--dr-ombre-menu);
    animation: dr-menu-in var(--dr-duree-transform) var(--dr-ease-menu) both;
}
body.ds-page .dr-menu[hidden] { display: none; }
body.ds-page .dr-menu a.dr-menu__ligne,
body.ds-page .dr-menu a.dr-menu__ligne:hover {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 14px;
    color: var(--dr-texte);
    text-decoration: none;
}
body.ds-page .dr-menu a.dr-menu__ligne:hover { background: var(--dr-hover); }
body.ds-page .dr-menu a.dr-menu__ligne:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--dr-accent); }
body.ds-page .dr-menu__coche { opacity: 0; color: var(--dr-accent-texte); }
body.ds-page .dr-menu a.dr-menu__ligne--on { font-weight: 600; }
body.ds-page .dr-menu__ligne--on .dr-menu__coche { opacity: 1; }

body.ds-page .dr-parpage__select {
    height: 40px;
    padding: 0 30px 0 12px;
    border: 1px solid var(--dr-bordure);
    border-radius: var(--dr-r-md);
    background: var(--dr-blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236a6a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    font-size: 13.5px;
    color: var(--dr-texte);
    cursor: pointer;
}
body.ds-page .dr-parpage__select:focus-visible { outline: 2px solid var(--dr-accent); outline-offset: 2px; }
body.ds-page .dr-parpage { margin: 0; }

body.ds-page .dr-affichage { display: inline-flex; margin: 0; border: 1px solid var(--dr-bordure); border-radius: var(--dr-r-md); background: var(--dr-blanc); overflow: hidden; }
body.ds-page .dr-affichage__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 38px;
    border: 0;
    background: transparent;
    color: var(--dr-texte-2);
    cursor: pointer;
    transition: background-color var(--dr-duree-etat), color var(--dr-duree-etat);
}
body.ds-page .dr-affichage__btn + .dr-affichage__btn { border-left: 1px solid var(--dr-bordure); }
body.ds-page .dr-affichage__btn:hover { background: var(--dr-hover); color: var(--dr-texte); }
body.ds-page .dr-affichage__btn--on { background: var(--dr-actif); color: var(--dr-texte); }
body.ds-page .dr-affichage__btn:focus-visible { outline: 2px solid var(--dr-accent); outline-offset: -2px; }

body.ds-page .dr-bandeau { margin-bottom: 20px; }

/* ── Disposition : colonne de filtres + grille ── */
body.ds-page .dr-disposition { display: flex; gap: 32px; align-items: flex-start; }
body.ds-page .dr-contenu { flex: 1; min-width: 0; }
body.ds-page .dr-actions-mobile,
body.ds-page .dr-rail__feuille-tete,
body.ds-page .dr-rail__feuille-pied,
body.ds-page .dr-rail__groupe--tri { display: none; }
body.ds-page .dr-voile[hidden] { display: none; }

body.ds-page .dr-rail {
    position: sticky;
    top: calc(var(--ds-header-h, 56px) + 24px);
    flex: none;
    align-self: flex-start;
    width: 300px;
    max-height: calc(100vh - var(--ds-header-h, 56px) - 48px);
    overflow-y: auto;
    padding: 22px 20px 20px;
    background: var(--dr-blanc);
    border: 1px solid var(--dr-sep);
    border-radius: var(--dr-r-lg);
    scrollbar-width: thin;
}
@media (min-width: 1280px) {
    body.ds-page .dr-rail { width: 340px; }
}
/* Aucun groupe de filtre à proposer (ni catégorie, ni marque, ni statut) : pas de
   colonne vide en desktop ; le tiroir mobile garde le tri. */
@media (min-width: 1025px) {
    body.ds-page .dr-rail--tri-seul { display: none; }
}
body.ds-page .dr-rail__entete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
body.ds-page .dr-page-catalogue h2.dr-rail__titre { margin: 0; font-size: 16px; font-weight: 700; color: var(--dr-texte); }
body.ds-page .dr-rail a.dr-rail__reinit,
body.ds-page .dr-rail a.dr-rail__reinit:hover {
    font-size: 13px;
    color: var(--dr-texte-2);
    text-decoration: underline;
    text-underline-offset: 2px;
}
body.ds-page .dr-rail a.dr-rail__reinit:hover { color: var(--dr-texte); }
body.ds-page .dr-rail__groupe { margin-bottom: 18px; }
body.ds-page .dr-rail__label { margin-bottom: 7px; font-size: 14px; font-weight: 600; color: var(--dr-texte); }

body.ds-page .dr-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--dr-bordure);
    border-radius: var(--dr-r-md);
    background: var(--dr-blanc);
    font: inherit;
    font-size: 14.5px;
    color: var(--dr-texte);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--dr-duree-transform);
}
body.ds-page .dr-select > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ds-page .dr-select__chevron { color: #8a8a90; transition: transform var(--dr-duree-etat); }
body.ds-page .dr-select:hover { border-color: #c9c9cf; }
body.ds-page .dr-select[aria-expanded="true"] { border-color: var(--dr-texte); }
body.ds-page .dr-select[aria-expanded="true"] .dr-select__chevron { transform: rotate(180deg); }
body.ds-page .dr-select:focus-visible { outline: 2px solid var(--dr-accent); outline-offset: 2px; }

body.ds-page .dr-rail__deroulant[hidden] { display: none; }
body.ds-page .dr-rail__deroulant { animation: dr-menu-in var(--dr-duree-transform) var(--dr-ease-menu) both; }
body.ds-page .dr-rail__liste {
    margin-top: 6px;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--dr-bordure);
    border-radius: var(--dr-r-md);
}
body.ds-page .dr-rail__liste--ouverte { max-height: none; }
body.ds-page .dr-rail a.dr-rail__ligne,
body.ds-page .dr-rail a.dr-rail__ligne:hover {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--dr-sep);
    background: var(--dr-blanc);
    font-size: 14px;
    color: var(--dr-texte);
    text-decoration: none;
    transition: background-color var(--dr-duree-etat);
}
body.ds-page .dr-rail a.dr-rail__ligne:last-child { border-bottom: 0; }
body.ds-page .dr-rail a.dr-rail__ligne:hover { background: var(--dr-hover); }
body.ds-page .dr-rail a.dr-rail__ligne:active { background: var(--dr-actif); }
body.ds-page .dr-rail a.dr-rail__ligne:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--dr-accent); }
body.ds-page .dr-rail a.dr-rail__ligne--enfant { padding-left: 28px; }
body.ds-page .dr-rail a.dr-rail__ligne--petit-enfant { padding-left: 42px; font-size: 13.5px; }
body.ds-page .dr-rail a.dr-rail__ligne--on { font-weight: 600; }
body.ds-page .dr-rail__nom { flex: 1; min-width: 0; }
body.ds-page .dr-rail__nombre { font-size: 12.5px; color: var(--dr-texte-2); font-variant-numeric: tabular-nums; }
/* opacity et non visibility : un enfant en visibility:visible resterait peint
   quand le tiroir fermé est en visibility:hidden. */
body.ds-page .dr-rail__coche { opacity: 0; color: var(--dr-accent-texte); }
body.ds-page .dr-rail__ligne--on .dr-rail__coche { opacity: 1; animation: dr-coche-in .18s var(--dr-ease-tag) both; }
@keyframes dr-coche-in {
    0% { opacity: 0; transform: scale(.55); }
    to { opacity: 1; transform: scale(1); }
}

body.ds-page .dr-rail__etiquettes { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; }
body.ds-page .dr-etiquette {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px 13px;
    border: 1px solid var(--dr-bordure);
    border-radius: var(--dr-r-pill);
    background: var(--dr-blanc);
    font-size: 13px;
    color: var(--dr-texte);
    animation: dr-etiquette-in .18s var(--dr-ease-tag) both;
}
body.ds-page .dr-etiquette a,
body.ds-page .dr-etiquette a:hover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: var(--dr-texte-2);
}
body.ds-page .dr-etiquette a:hover { background: var(--dr-hover); color: var(--dr-texte); }
@keyframes dr-etiquette-in {
    0% { opacity: 0; transform: scale(.86); }
    to { opacity: 1; transform: scale(1); }
}
body.ds-page .dr-rail__panier { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
body.ds-page .dr-rail__panier.hidden { display: none; }

/* ── Grille de cartes ── */
body.ds-page .dr-contenu .ds-product-grid.dr-grille {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
}
@media (max-width: 1279px) {
    body.ds-page .dr-contenu .ds-product-grid.dr-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

/* ── Carte produit (composant partagé : catalogue, recherche, favoris,
   habituels, carrousels) ── */
body.ds-page .ds-carte.dr-carte {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--dr-blanc);
    border: 1px solid var(--dr-sep);
    border-radius: var(--dr-r-lg);
    overflow: hidden;
    box-shadow: none;
    transition: box-shadow var(--dr-duree-composant), transform var(--dr-duree-composant);
    animation: dr-carte-in var(--dr-duree-scene) ease-out both;
}
@keyframes dr-carte-in {
    0% { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}
body.ds-page .ds-carte.dr-carte:hover { border-color: var(--dr-sep); box-shadow: var(--dr-ombre-carte); transform: translateY(-2px); }
body.ds-page .ds-carte.dr-carte:has(.dr-carte__lien:focus-visible) { outline: 2px solid var(--dr-accent); outline-offset: 2px; }

body.ds-page .dr-carte__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--dr-blanc);
    border-bottom: 1px solid var(--dr-sep);
    overflow: hidden;
}
/* L'image REMPLIT le bloc média (consigne Martin). */
body.ds-page .dr-carte__img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}
body.ds-page .dr-carte__img-vide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--dr-hover);
    color: #b4b4ba;
}
body.ds-page .dr-carte__badges {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 56px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    pointer-events: none;
}
body.ds-page .dr-carte__badge {
    padding: 5px 10px;
    border-radius: var(--dr-r-sm);
    background: var(--dr-primaire);
    color: var(--dr-on-primaire);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
}
body.ds-page .dr-carte__badge--promo { background: var(--dr-danger); color: #ffffff; }
body.ds-page .dr-carte__badge--pro { background: var(--dr-texte); color: #ffffff; }

body.ds-page .ds-carte.dr-carte .dr-carte__favori {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 1px 3px rgba(17, 24, 39, .12);
    color: var(--dr-texte);
    cursor: pointer;
    transition: transform var(--dr-duree-transform);
}
body.ds-page .ds-carte.dr-carte .dr-carte__favori:hover { transform: scale(1.06); }
body.ds-page .ds-carte.dr-carte .dr-carte__favori:focus-visible { outline: 2px solid var(--dr-accent); outline-offset: 2px; }
body.ds-page .ds-carte.dr-carte .dr-carte__favori[aria-pressed="true"] { color: var(--dr-favori); }
body.ds-page .ds-carte.dr-carte .dr-carte__favori[aria-pressed="true"] .dr-icone { fill: currentColor; animation: dr-coeur-in .3s ease-out; }
@keyframes dr-coeur-in {
    0% { opacity: 0; transform: scale(.8) rotate(-10deg); }
    50% { opacity: .8; transform: scale(1.2) rotate(5deg); }
    to { opacity: 1; transform: scale(1); }
}

body.ds-page .dr-carte__corps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    padding: 16px 20px 18px;
}
body.ds-page .dr-carte__marque { font-size: 13px; color: var(--dr-texte-2); }
body.ds-page .ds-carte.dr-carte h3.dr-carte__nom {
    margin: 0;
    font-family: var(--ds-font);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--dr-texte);
}
/* Lien étendu : le pseudo-élément couvre toute la carte ; cœur, quantité et
   bouton d'ajout sont posés au-dessus (z-index 2). */
body.ds-page .ds-carte.dr-carte a.dr-carte__lien,
body.ds-page .ds-carte.dr-carte a.dr-carte__lien:hover {
    color: var(--dr-texte);
    text-decoration: none;
    outline: none;
}
body.ds-page .ds-carte.dr-carte a.dr-carte__lien::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
body.ds-page .dr-carte__chips { display: flex; flex-wrap: wrap; gap: 6px; }
body.ds-page .dr-carte__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: var(--dr-r-pill);
    background: var(--dr-fond);
    font-size: 12px;
    line-height: 1.3;
    color: var(--dr-texte-2);
}
body.ds-page .dr-carte__pastille { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
body.ds-page .dr-carte__dispo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--dr-succes); }
body.ds-page .dr-carte__dispo--faible { color: var(--dr-alerte); }
body.ds-page .dr-carte__dispo--rupture { color: var(--dr-danger); }

body.ds-page .dr-carte__prix {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--dr-sep);
}
body.ds-page .dr-carte__montant { font-size: 20px; font-weight: 700; color: var(--dr-texte); font-variant-numeric: tabular-nums; }
body.ds-page .dr-carte__unite { font-size: 12.5px; font-weight: 400; color: var(--dr-texte-2); }
body.ds-page .dr-carte__prix-ancien { font-size: 13px; color: var(--dr-texte-2); }
body.ds-page .dr-carte__prix-indispo { font-size: 14px; color: var(--dr-texte-2); }
body.ds-page .dr-carte__apartir { font-size: 12.5px; font-weight: 400; color: var(--dr-texte-2); }

body.ds-page .dr-carte__achat {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: auto; /* sans prix affiché, le bloc d'achat s'ancre en bas */
}
body.ds-page .dr-carte__prix + .dr-carte__achat { margin-top: 4px; }
body.ds-page .ds-carte.dr-carte .ds-qte { height: 44px; }
body.ds-page .ds-carte.dr-carte .ds-qte,
body.ds-page .ds-carte.dr-carte .ds-qte__btn,
body.ds-page .ds-carte.dr-carte .ds-qte__champ { border-color: var(--dr-bordure); }
body.ds-page .ds-carte.dr-carte .ds-qte { border-radius: var(--dr-r-md); }
body.ds-page .ds-carte.dr-carte .dr-carte__ajouter {
    flex: 1;
    min-width: 0;
    height: 44px;
    border-radius: var(--dr-r-md);
    font-weight: 600;
}

/* Carte dans un carrousel (fiche, panier) : même composant, média carré. */
body.ds-page .ds-carousel__track > .ds-carte.dr-carte { animation: none; }

/* Mode liste : la même carte disposée en ligne. */
body.ds-page .dr-contenu .ds-product-grid.dr-grille--liste {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--dr-sep);
    border-radius: var(--dr-r-lg);
    background: var(--dr-blanc);
    overflow: hidden;
}
body.ds-page .dr-grille--liste .ds-carte.dr-carte {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border: 0;
    border-top: 1px solid var(--dr-sep);
    border-radius: 0;
    animation: none;
}
body.ds-page .dr-grille--liste .ds-carte.dr-carte:first-child { border-top: 0; }
body.ds-page .dr-grille--liste .ds-carte.dr-carte:hover { transform: none; box-shadow: none; background: var(--dr-hover); }
body.ds-page .dr-grille--liste .dr-carte__media { aspect-ratio: 1 / 1; border: 1px solid var(--dr-sep); border-radius: var(--dr-r-md); }
body.ds-page .dr-grille--liste .dr-carte__badges { display: none; }
body.ds-page .dr-grille--liste .ds-carte.dr-carte .dr-carte__favori { top: 4px; right: 4px; width: 28px; height: 28px; }
body.ds-page .dr-grille--liste .dr-carte__corps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-auto-flow: row;
    align-items: center;
    gap: 4px 20px;
    padding: 0;
}
body.ds-page .dr-grille--liste .dr-carte__corps > * { grid-column: 1; }
body.ds-page .dr-grille--liste .dr-carte__prix { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 0; border: 0; justify-content: flex-end; }
body.ds-page .dr-grille--liste .dr-carte__achat { grid-column: 2; grid-row: 3 / span 2; margin: 0; }

/* ── Pagination (gabarit ds-pagination existant) ── */
body.ds-page .dr-contenu .ds-pagination { margin-top: 32px; }
body.ds-page .dr-contenu .ds-pagination__lien,
body.ds-page .dr-contenu .ds-pagination__saut { border-color: var(--dr-bordure); border-radius: var(--dr-r-md); color: var(--dr-texte); }
body.ds-page .dr-contenu a.ds-pagination__lien:hover,
body.ds-page .dr-contenu a.ds-pagination__saut:hover { background: var(--dr-hover); color: var(--dr-texte); }
/* La page courante garde son fond au survol : la règle :hover de drm.css,
   plus spécifique, la passait en gris clair sous un texte blanc (1,08:1). */
body.ds-page .dr-contenu .ds-pagination__lien--actif,
body.ds-page .dr-contenu .ds-pagination__lien--actif:hover {
    background: var(--dr-primaire);
    border-color: var(--dr-primaire);
    color: var(--dr-on-primaire);
}

/* ── Tablette et mobile : colonne de filtres en tiroir ── */
@media (max-width: 1024px) {
    body.ds-page .dr-page-catalogue { padding-top: 16px; }
    body.ds-page .dr-disposition { display: block; }
    body.ds-page .dr-barre__actions .dr-tri { display: none; }
    body.ds-page .dr-actions-mobile { display: flex; gap: 12px; margin: 0 0 18px; }
    body.ds-page .dr-bouton-mobile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        flex: 1;
        height: 56px;
        padding: 0 18px;
        border: 1px solid var(--dr-texte);
        border-radius: var(--dr-r-md);
        background: var(--dr-blanc);
        font: inherit;
        font-size: 17px;
        font-weight: 600;
        color: var(--dr-texte);
        cursor: pointer;
    }
    body.ds-page .dr-bouton-mobile:focus-visible { outline: 2px solid var(--dr-accent); outline-offset: 2px; }

    body.ds-page .dr-voile {
        position: fixed;
        inset: 0;
        z-index: 1045;
        background: rgba(0, 0, 0, .42);
        opacity: 0;
        transition: opacity var(--dr-duree-accordeon);
    }
    body.ds-page .dr-voile--visible { opacity: 1; }

    body.ds-page .dr-rail {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1050;
        width: auto;
        max-height: 88vh;
        padding: 0 18px 0;
        border: 0;
        border-radius: var(--dr-r-xl) var(--dr-r-xl) 0 0;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, .12);
        transform: translateY(100%);
        visibility: hidden;
        transition: transform var(--dr-duree-accordeon) var(--dr-ease-menu), visibility 0s linear var(--dr-duree-accordeon);
        overscroll-behavior: contain;
    }
    body.ds-page .dr-rail.dr-rail--ouvert {
        transform: translateY(0);
        visibility: visible;
        transition: transform var(--dr-duree-accordeon) var(--dr-ease-menu), visibility 0s;
    }
    body.ds-page .dr-rail__feuille-tete {
        position: sticky;
        top: 0;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 -18px 16px;
        padding: 16px 18px 12px;
        background: var(--dr-blanc);
        border-bottom: 1px solid var(--dr-sep);
        font-size: 16px;
        font-weight: 600;
    }
    body.ds-page .dr-rail__fermer {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 50%;
        background: var(--dr-actif);
        color: var(--dr-texte);
        cursor: pointer;
    }
    body.ds-page .dr-rail__fermer:focus-visible { outline: 2px solid var(--dr-accent); outline-offset: 2px; }
    body.ds-page .dr-rail__groupe--tri { display: block; }
    body.ds-page .dr-rail__feuille-pied {
        position: sticky;
        bottom: 0;
        z-index: 3;
        display: block;
        margin: 18px -18px 0;
        padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
        background: var(--dr-blanc);
        border-top: 1px solid var(--dr-sep);
    }
    body.ds-page .dr-rail__appliquer {
        width: 100%;
        height: 50px;
        border: 0;
        border-radius: 14px;
        background: var(--dr-primaire);
        color: var(--dr-on-primaire);
        font: inherit;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }
    body.ds-page .dr-rail__appliquer:focus-visible { outline: 2px solid var(--dr-texte); outline-offset: 2px; }
    body.ds-page.dr-sans-defilement { overflow: hidden; }
}

@media (max-width: 768px) {
    body.ds-page .dr-page-catalogue__conteneur { padding: 0 16px; }
    body.ds-page .dr-banniere { margin-bottom: 18px; }
    body.ds-page .dr-recherche-page { display: block; }
    body.ds-page .dr-barre { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
    body.ds-page .dr-page-catalogue h1.dr-barre__titre { font-size: 20px; }
    body.ds-page .dr-compteur { font-size: 20px; font-weight: 700; color: var(--dr-texte); }
    body.ds-page .dr-barre__actions { display: none; }
    body.ds-page .dr-contenu .ds-product-grid.dr-grille { grid-template-columns: 1fr; gap: 18px; }
    /* Une carte par ligne : image moins haute (4/3) pour qu'un écran montre plus d'un produit. */
    body.ds-page .dr-carte__media { aspect-ratio: 4 / 3; }
    body.ds-page .ds-carte.dr-carte h3.dr-carte__nom { font-size: 19px; }
    /* « Ajouter » avec libellé : il garde sa largeur de contenu, la quantité prend le reste
       (avant, la quantité à 100 % poussait le bouton hors de la carte, libellé rogné). */
    body.ds-page .ds-carte.dr-carte .dr-carte__achat > .ds-qte-bloc { flex: 1 1 0; min-width: 0; }
    body.ds-page .ds-carte.dr-carte .dr-carte__achat .ds-qte { width: 100%; }
    body.ds-page .ds-carte.dr-carte .dr-carte__ajouter:not(.dr-carte__ajouter--icone) { flex: none; width: auto; padding: 0 20px; }
    /* Sous 769 px la liste redevient la grille de cartes (même composant). */
    body.ds-page .dr-contenu .ds-product-grid.dr-grille--liste { display: grid; grid-template-columns: 1fr; gap: 18px; border: 0; background: transparent; }
    body.ds-page .dr-grille--liste .ds-carte.dr-carte { display: flex; padding: 0; border: 1px solid var(--dr-sep); border-radius: var(--dr-r-lg); }
    body.ds-page .dr-grille--liste .dr-carte__media { aspect-ratio: 4 / 3; border: 0; border-bottom: 1px solid var(--dr-sep); border-radius: 0; }
    body.ds-page .dr-grille--liste .dr-carte__corps { display: flex; padding: 16px 20px 18px; }
    body.ds-page .dr-grille--liste .dr-carte__badges { display: flex; }
    body.ds-page .dr-grille--liste .dr-carte__prix { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--dr-sep); justify-content: flex-start; }
}

/* Tablette portrait (600 à 768 px) : deux cartes par ligne au lieu d'une carte de 630 px de large. */
@media (min-width: 600px) and (max-width: 768px) {
    body.ds-page .dr-contenu .ds-product-grid.dr-grille,
    body.ds-page .dr-contenu .ds-product-grid.dr-grille--liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    body.ds-page .ds-carte.dr-carte,
    body.ds-page .dr-compteur,
    body.ds-page .dr-etiquette,
    body.ds-page .dr-menu,
    body.ds-page .dr-rail__deroulant,
    body.ds-page .dr-entete__panneau,
    body.ds-page #header.dr-entete--replie .dr-entete__loupe { animation: none; }
    body.ds-page #header #form-search-products.dr-entete__form,
    body.ds-page .dr-rail,
    body.ds-page .dr-voile,
    body.ds-page .ds-carte.dr-carte { transition: none; }
    body.ds-page .ds-carte.dr-carte:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Salve 02/10 (lot 13) : retours M2, M3, M5, M11 et cosmétiques de l'audit.
   ══════════════════════════════════════════════════════════════════════════ */

/* Logo du site : hauteur fixe, largeur déduite des proportions. Un SVG sans
   attributs width/height (Framesi) n'a pas de taille propre : avec width et
   height à auto dans un lien qui se contracte, il était rendu à 0 px. */
body.ds-page .dr-entete__logo-img { height: 34px; max-height: 34px; width: auto; max-width: 100%; }
@media (max-width: 768px) {
    body.ds-page .dr-entete__logo-img { height: 30px; max-height: 30px; }
}

/* M2 : langue derrière une icône planète, avec le code de la langue courante. */
body.ds-page #header .dr-entete__langue-btn {
    width: auto;
    min-width: 36px;
    gap: 4px;
    padding: 0 8px;
    border-radius: var(--dr-r-pill);
}
body.ds-page #header .dr-entete__langue-code { font-size: 12px; font-weight: 600; letter-spacing: .02em; }
body.ds-page .dr-entete__panneau--langue { min-width: 180px; }
body.ds-page .dr-entete__panneau a.dr-entete__panneau-item--actif { font-weight: 600; }
body.ds-page .dr-entete__panneau a.dr-entete__panneau-item--actif::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--dr-texte);
}
@media (max-width: 768px) {
    body.ds-page #header .dr-entete__langue-btn { width: auto; min-width: 40px; padding: 0 6px; }
    body.ds-page #header .dr-entete__langue-code { display: none; }
}

/* M5 : bulle de ses propres messages (Mes demandes). Elle prenait la couleur
   claire du thème (--ds-accent-light), sombre sur certains sites : auteur à
   1,16:1 et texte à 2,76:1. Fond neutre teinté de l'accent, texte sombre fixe :
   le contraste ne dépend plus de la couleur du site. */
body.ds-page .ds-demande-msg--moi {
    background: #f3f5f4;
    background: color-mix(in srgb, var(--ds-accent) 7%, #ffffff);
    border-color: var(--ds-grey-15, #e6e6e8);
    border-left: 3px solid var(--ds-accent);
}
body.ds-page .ds-demande-msg--moi .ds-demande-msg__auteur,
body.ds-page .ds-demande-msg--eux .ds-demande-msg__auteur { color: #55555c; }
body.ds-page .ds-demande-msg--moi .ds-demande-msg__texte { color: var(--dr-texte); }

/* Contrastes mesurés (C1-08) : séparateur du fil d'Ariane, points de la
   pagination, bouton désactivé « Choisissez : Teinte ». */
body.ds-page .ds-ariane__sep { color: var(--ds-grey-60, #6b6b72); }
body.ds-page .ds-pagination__ecart { color: var(--ds-grey-60, #6b6b72); }
body.ds-page .ds-btn--primary:disabled,
body.ds-page .ds-btn--primary.disabled { color: #5c5c63; }

/* M11 : dans les listes du compte, l'ajout au panier tient dans une icône (le
   bouton garde la largeur que lui donne la carte : une grande cible, jamais coupée). */
body.ds-page .dr-carte__ajouter.dr-carte__ajouter--icone { padding: 0 10px; justify-content: center; }
body.ds-page .dr-carte__ajouter--icone .dr-icone { flex: none; }

/* Bandeau utilitaire (couleur du site) : le code client et la version étaient
   atténués par opacité, sous le seuil de 4,5:1 sur certains fonds. */
body.ds-page .dr-entete__code,
body.ds-page .dr-entete__version { opacity: 1; }
/* La confirmation « Ajouté » garde la coche seule dans le bouton icône. */
body.ds-page .dr-carte__ajouter--icone .ds-btn__confirmation { font-size: 0; gap: 0; }

/* Logo du site sur les pages de connexion : hauteur fixe, comme l'en-tête (SVG sans taille propre). */
body.ds-page .ds-auth-marque img { height: 44px; max-height: 44px; width: auto; max-width: 220px; }

/* ── Lots A1 (2026-10-07) puis N1 (2026-10-08) : sites de marque vendus aux particuliers ── */
/* « Nos produits » : bouton à icône de grille, groupé avec la recherche au centre de la barre
   (grille 1fr auto 1fr : la recherche reste centrée sur la page, plus de décalage). Option A de
   nav/OPTIONS-NOS-PRODUITS.md. L'accent vient du site (--dr-accent), jamais écrit en dur ; le
   libellé reste noir (contraste), l'accent ne porte que l'icône, le fond et le filet.
   Sous 769 px le bouton reste visible dans la barre, entre le logo et le panier. */
body.ds-page .dr-entete__conteneur--grille {
    /* largeur de la recherche : pleine à 460 px, elle cède de la place aux icônes quand la fenêtre se resserre
       (mesuré à 769, 900 et 1024 px, connecté avec favoris, langue et panier : aucun recouvrement) */
    --dr-recherche-l: clamp(160px, calc(100vw - 690px), 460px);
    display: grid;
    column-gap: 16px;
    /* colonnes latérales jamais plus étroites que leur contenu : le groupe central reste centré dès qu'il y a la place */
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    align-items: center;
}
body.ds-page .dr-entete__conteneur--grille .dr-entete__logo { justify-self: start; }
body.ds-page .dr-entete__conteneur--grille .dr-entete__icones { justify-self: end; }
body.ds-page .dr-entete__centre { display: flex; align-items: center; min-width: 0; }
body.ds-page .dr-entete__centre .dr-entete__recherche { flex: none; margin: 0 0 0 12px; transition: margin .55s var(--dr-ease-menu); }
body.ds-page #header.dr-entete--replie:not(.dr-entete--recherche-ouverte) .dr-entete__centre .dr-entete__recherche { margin-left: 0; }
body.ds-page .dr-entete__nav { display: flex; align-items: center; flex: none; }
body.ds-page .dr-entete a.dr-entete__nav-lien {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px 0 14px;
    border: 1px solid #e6dede; /* repli sans color-mix */
    border: 1px solid color-mix(in srgb, var(--dr-accent) 22%, #ffffff);
    border-radius: var(--dr-r-md);
    background: #f7f4f4; /* repli sans color-mix */
    background: color-mix(in srgb, var(--dr-accent) 8%, #ffffff);
    color: var(--dr-texte);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--dr-duree-etat), border-color var(--dr-duree-etat);
}
body.ds-page .dr-entete a.dr-entete__nav-lien .dr-icone { flex: none; color: var(--ds-accent-texte, var(--dr-accent)); }
body.ds-page .dr-entete a.dr-entete__nav-lien:hover {
    background: color-mix(in srgb, var(--dr-accent) 14%, #ffffff);
    border-color: color-mix(in srgb, var(--dr-accent) 40%, #ffffff);
    color: var(--dr-texte);
    text-decoration: none;
}
body.ds-page .dr-entete a.dr-entete__nav-lien--actif,
body.ds-page .dr-entete a.dr-entete__nav-lien--actif:hover { border-color: var(--dr-accent); color: var(--dr-texte); }
body.ds-page .dr-entete a.dr-entete__nav-lien:focus-visible { outline: 2px solid var(--dr-accent); outline-offset: 2px; }
@media (max-width: 768px) {
    /* Une seule ligne de flex : logo, « Nos produits », panier, compte, menu. Favoris et langue
       quittent la barre (favoris : menu du compte et tiroir ; langue : tiroir). */
    body.ds-page .dr-entete__conteneur--grille { display: flex; column-gap: 0; }
    body.ds-page .dr-entete__centre { flex: none; margin-left: 8px; }
    body.ds-page .dr-entete a.dr-entete__nav-lien { height: 44px; gap: 6px; padding: 0 10px 0 9px; font-size: 14px; }
    /* Le logo cède la place quand la barre est pleine (il était figé et débordait sous le bouton). */
    body.ds-page #header .dr-entete__conteneur--grille a.dr-entete__logo { flex: 1 1 0; min-width: 0; margin-right: 0; }
    body.ds-page #header .dr-entete__conteneur--grille .dr-entete__logo-img:not([src$="/uploads/sites/paul-mitchell.svg"]) {
        min-width: 0;
        object-fit: contain;
        object-position: left center;
    }
    body.ds-page #header .dr-entete__conteneur--grille .dr-entete__favoris,
    body.ds-page #header .dr-entete__conteneur--grille .dr-entete__langue { display: none; }
}
/* Écran très étroit (320 à 359 px) : le bouton garde l'icône de grille et son nom accessible,
   le libellé s'efface visuellement pour laisser sa place au logo. */
@media (max-width: 359px) {
    body.ds-page .dr-entete a.dr-entete__nav-lien { width: 44px; padding: 0; justify-content: center; }
    body.ds-page .dr-entete__nav-texte {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* Lot N1 : langue courante du tiroir. */
body.ds-page .ds-header-drawer__lien.langue-option[aria-current="true"] { font-weight: 700; }

/* Logo Paul Mitchell : le fichier (159 x 80) porte le monogramme à gauche et une signature
   en petits caractères à droite, illisible à 34 px de haut. On n'affiche que le monogramme,
   plus grand, sans toucher au fichier. Ne vise que le fichier historique du site. */
body.ds-page .dr-entete__logo-img[src$="/uploads/sites/paul-mitchell.svg"] {
    height: 46px;
    max-height: 46px;
    width: 47px;
    object-fit: cover;
    object-position: left center;
}
@media (max-width: 768px) {
    body.ds-page .dr-entete__logo-img[src$="/uploads/sites/paul-mitchell.svg"] { height: 38px; max-height: 38px; width: 39px; }
}

/* Lot NOTIFICATIONS (R54) : point rouge « du nouveau depuis votre dernière visite » sur les menus de suivi. */
.dc-pastille {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-left: 8px;
    border-radius: 50%;
    background: #d92d20;
    vertical-align: middle;
    flex: none;
}

/* Bannières de réseau défilantes (lot R41). Zone au rapport fixe : 1336 / 300 sur ordinateur (le rendu de la bannière du
   site), 2 / 1 sous 768 px (une bannière lisible sur téléphone). Les images remplissent la zone en recadrant (cover). */
body.ds-page .dr-bannieres {
    position: relative;
    width: 100%;
    margin: 0 0 24px;
    border-radius: var(--dr-r-lg);
    overflow: hidden;
    background: var(--dr-blanc);
    border: 1px solid var(--dr-sep);
}
body.ds-page .dr-bannieres__piste { position: relative; width: 100%; aspect-ratio: 1336 / 300; }
body.ds-page .dr-bannieres__slide,
body.ds-page .dr-bannieres__slide picture { display: block; width: 100%; height: 100%; }
body.ds-page .dr-bannieres__slide[hidden] { display: none; }
body.ds-page .dr-bannieres__img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.ds-page .dr-bannieres__slide--entree { animation: dr-bannieres-entree 0.5s ease; }
@keyframes dr-bannieres-entree { from { opacity: 0.2; } to { opacity: 1; } }
/* Commandes sur les bords et en bas à droite : le centre de la bannière reste libre pour son texte. */
body.ds-page .dr-bannieres__commandes { position: absolute; inset: 0; pointer-events: none; }
body.ds-page .dr-bannieres__commandes[hidden],
body.ds-page .dr-bannieres__commandes [hidden] { display: none; }
body.ds-page .dr-bannieres__commandes > *,
body.ds-page .dr-bannieres__bas > * { pointer-events: auto; }
body.ds-page .dr-bannieres__bas {
    position: absolute;
    right: 10px;
    bottom: 8px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 8px 2px 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--dr-sep);
    pointer-events: auto;
}
body.ds-page .dr-bannieres__btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--dr-texte);
    cursor: pointer;
}
body.ds-page .dr-bannieres__btn:hover { background: var(--dr-hover); }
body.ds-page .dr-bannieres__btn--prec,
body.ds-page .dr-bannieres__btn--suiv {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--dr-sep);
}
body.ds-page .dr-bannieres__btn--prec:hover,
body.ds-page .dr-bannieres__btn--suiv:hover { background: #fff; }
body.ds-page .dr-bannieres__btn--prec { left: 10px; }
body.ds-page .dr-bannieres__btn--suiv { right: 10px; }
body.ds-page .dr-bannieres__points { display: flex; align-items: center; }
body.ds-page .dr-bannieres__point {
    width: 24px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
}
body.ds-page .dr-bannieres__point::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #b8b8be;
    transition: width 0.2s ease, background-color 0.2s ease;
}
body.ds-page .dr-bannieres__point[aria-current="true"]::before { width: 22px; background: var(--dr-accent); }
body.ds-page .dr-bannieres__btn:focus-visible,
body.ds-page .dr-bannieres__point:focus-visible { outline: 2px solid var(--dr-accent); outline-offset: 1px; }
@media (max-width: 767.98px) {
    body.ds-page .dr-bannieres { margin-bottom: 18px; }
    body.ds-page .dr-bannieres__piste { aspect-ratio: 2 / 1; }
}
/* Accueil du client connecté : même largeur que les blocs en dessous (1200 px, marges 24 puis 16). */
body.ds-page .dr-bannieres--accueil { width: calc(100% - 48px); max-width: 1152px; margin: 20px auto 0; }
@media (max-width: 767.98px) {
    body.ds-page .dr-bannieres--accueil { width: calc(100% - 32px); margin: 16px auto 0; }
}
@media (prefers-reduced-motion: reduce) {
    body.ds-page .dr-bannieres__slide--entree { animation: none; }
    body.ds-page .dr-bannieres__point::before { transition: none; }
}

/* Connexion : bandeau au-dessus de la carte, plus large qu'elle (880 px au plus), même arrondi que la carte. */
body.ds-page .ds-auth-page--bandeau { flex-direction: column; justify-content: flex-start; align-items: center; gap: 24px; }
body.ds-page .ds-auth-page--bandeau .dr-bannieres--connexion { max-width: 880px; margin: 0; }
@media (max-width: 767.98px) {
    body.ds-page .ds-auth-page--bandeau { gap: 16px; }
}

/* Cibles tactiles de 44 px sur téléphone et tablette (revue responsive du 31/10) : le cœur des
   cartes (34 px) et les flèches de carrousel (36 px) passent à 44 px. Écrans de 320 px : en-tête
   à 40 px pour laisser sa place au logo. */
@media (max-width: 768px) {
    body.ds-page .ds-carte.dr-carte .dr-carte__favori,
    body.ds-page .dr-grille--liste .ds-carte.dr-carte .dr-carte__favori { width: 44px; height: 44px; top: 6px; right: 6px; }
    body.ds-page .ds-carte.dr-carte .ds-qte__champ { flex: 1; width: auto; min-width: 0; }
    body.ds-page .ds-carousel__fleche { width: 44px; height: 44px; }
}
@media (max-width: 340px) {
    body.ds-page #header .dr-entete__bouton,
    body.ds-page #header a.dr-entete__bouton { width: 40px; height: 40px; }
}

/* Pages de connexion et « mot de passe oublié » : le gris de la page continue jusqu'en bas de
   la fenêtre quand la carte est courte (avant, bande blanche sous la carte sur téléphone). */
body.ds-page:has(.ds-auth-page) { background: var(--ds-grey-05); }