/* ══════════════════════════════════════════════════════════════════════════
   Fiche produit, refonte design v9 (T1b, 2026-09-30)
   ══════════════════════════════════════════════════════════════════════════
   Maquette validée pub/fiche.html (dossier design-turismo), desktop et mobile.
   Chargée par la seule fiche produit (bloc stylesheetsDsPage de base.html.twig),
   après drm.css et drm-v9.css dont elle réutilise les jetons --dr-*. Tout est
   scopé body.ds-page.

   Points de rupture de la maquette : 992 px (panneau sous la galerie, plus
   collant), 768 px (fiche mobile : image pleine largeur, boutons flottants,
   feuille arrondie, barre basse fixe). */

body.ds-page.dr-page-fiche {
    --dr-fiche-carte: clamp(340px, 36%, 440px);
    --dr-fiche-top: calc(var(--ds-header-h, var(--dr-entete-barre)) + 10px);
    background: var(--dr-blanc);
}

body.ds-page .dr-fiche-page { background: var(--dr-blanc); padding: 0; font-family: var(--ds-font); color: var(--dr-texte); }
body.ds-page .dr-fiche-conteneur { max-width: var(--dr-conteneur); margin: 0 auto; padding: 24px 32px 0; }
body.ds-page .dr-fiche__ariane .ds-ariane { margin-bottom: 16px; font-size: 13px; color: var(--dr-texte-2); }
body.ds-page .dr-fiche__ariane .ds-ariane__item a { color: var(--dr-texte-2); text-decoration: underline; text-underline-offset: 2px; }
body.ds-page .dr-fiche__ariane .ds-ariane__item a:hover { color: var(--dr-texte); }

/* ── Grille : galerie + contenu à gauche, panneau collant à droite ───────── */
body.ds-page .dr-fiche__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--dr-fiche-carte);
    grid-template-rows: auto 1fr;
    column-gap: 40px;
    align-items: start;
}
body.ds-page .dr-fiche__galerie { grid-column: 1; grid-row: 1; min-width: 0; }
body.ds-page .dr-fiche__contenu { grid-column: 1; grid-row: 2; min-width: 0; }
body.ds-page .dr-fiche__panneau { grid-column: 2; grid-row: 1 / span 2; }

/* ── Galerie ────────────────────────────────────────────────────────────── */
body.ds-page .dr-galerie__principale {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--dr-fond);
    border: 1px solid var(--dr-sep);
    border-radius: var(--dr-r-lg);
}
body.ds-page .dr-galerie__principale:focus-visible { outline: 2px solid var(--dr-accent); outline-offset: 2px; }
body.ds-page .dr-galerie__image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: opacity var(--dr-duree-composant) ease;
}
body.ds-page .dr-galerie__image--transition { opacity: .15; }
body.ds-page .dr-galerie__vide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--dr-texte-2);
    font-size: 14px;
}
body.ds-page .dr-galerie__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--dr-texte);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    transform: translateY(-50%);
    cursor: pointer;
    transition: background-color var(--dr-duree-etat);
}
body.ds-page .dr-galerie__nav:hover { background: var(--dr-blanc); }
body.ds-page .dr-galerie__nav:focus-visible { outline: 2px solid var(--dr-accent); outline-offset: 2px; }
body.ds-page .dr-galerie__nav--prev { left: 14px; }
body.ds-page .dr-galerie__nav--next { right: 14px; }
body.ds-page .dr-galerie__compteur {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 5px 10px;
    border-radius: var(--dr-r-md);
    background: rgba(0, 0, 0, .6);
    color: var(--dr-blanc);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}
body.ds-page .dr-galerie__points { display: none; }

body.ds-page .dr-galerie__vignettes {
    display: flex;
    gap: 10px;
    margin: 12px 0 0;
    padding: 0 0 4px;
    list-style: none;
    overflow-x: auto;
}
body.ds-page .dr-galerie__vignette {
    display: block;
    width: 76px;
    height: 66px;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: var(--dr-r-sm);
    background: var(--dr-blanc);
    cursor: pointer;
}
body.ds-page .dr-galerie__vignette img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
body.ds-page .dr-galerie__vignette--on { border-color: var(--dr-texte); }
body.ds-page .dr-galerie__vignette:focus-visible { outline: 2px solid var(--dr-accent); outline-offset: 2px; }

/* Boutons ronds flottants : sur desktop seul le favori reste (haut droit). */
body.ds-page .dr-galerie__flottants {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}
body.ds-page .dr-galerie__flottants-droite { display: flex; gap: 10px; margin-left: auto; }
body.ds-page .dr-flottant,
body.ds-page a.dr-flottant {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--dr-texte);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    cursor: pointer;
    pointer-events: auto;
    text-decoration: none;
    transition: background-color var(--dr-duree-etat), transform var(--dr-duree-transform);
}
body.ds-page .dr-flottant:hover,
body.ds-page a.dr-flottant:hover { background: var(--dr-blanc); color: var(--dr-texte); text-decoration: none; }
body.ds-page .dr-flottant:focus-visible { outline: 2px solid var(--dr-accent); outline-offset: 2px; }
body.ds-page .dr-flottant--favori[aria-pressed="true"] { color: var(--dr-favori); }
body.ds-page .dr-flottant--favori[aria-pressed="true"] .dr-icone { fill: currentColor; }
body.ds-page .dr-galerie__flottants .dr-flottant--retour,
body.ds-page .dr-galerie__flottants .dr-flottant--mobile { display: none; }

/* ── Panneau de commande : bloc blanc collant ──────────────────────────── */
body.ds-page .dr-fiche__panneau {
    position: sticky;
    top: var(--dr-fiche-top);
    align-self: start;
    max-height: calc(100vh - var(--dr-fiche-top) - 16px);
    overflow-y: auto;
    padding: 24px;
    background: var(--dr-blanc);
    border: 1px solid var(--dr-sep);
    border-radius: var(--dr-r-lg);
    scrollbar-width: thin;
}
body.ds-page .dr-panneau__marque { margin: 0 0 6px; font-size: 13px; color: var(--dr-texte-2); }
body.ds-page .dr-panneau__titre {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--dr-texte);
}
body.ds-page .dr-panneau__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--dr-sep);
    font-size: 12.5px;
    color: var(--dr-texte-2);
}
body.ds-page .dr-panneau__mono { font-variant-numeric: tabular-nums; color: var(--dr-texte); }

/* ── Configurateur de variantes ─────────────────────────────────────────── */
body.ds-page .dr-config.ds-declinaisons { display: block; gap: 0; padding: 0; border: none; }
body.ds-page .dr-config__titre { margin: 0 0 14px; font-size: 15.5px; font-weight: 600; }
body.ds-page .dr-groupe.ds-declinaisons__groupe { display: block; margin-bottom: 18px; }
body.ds-page .dr-groupe__entete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
body.ds-page .dr-groupe__label { font-size: 15px; font-weight: 600; color: #3a3a3f; }
body.ds-page .dr-groupe__choix { font-size: 13px; color: var(--dr-texte-2); text-align: right; }

body.ds-page .dr-groupe__filtre {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    margin-bottom: 10px;
    padding: 0 12px;
    border: 1px solid var(--dr-bordure);
    border-radius: var(--dr-r-md);
    color: var(--dr-texte-2);
    transition: border-color var(--dr-duree-etat);
}
body.ds-page .dr-groupe__filtre:focus-within { border-color: var(--dr-texte); }
body.ds-page .dr-groupe__champ {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 14px;
    color: var(--dr-texte);
}
body.ds-page .dr-groupe__champ::placeholder { color: var(--dr-placeholder); }

body.ds-page .dr-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.ds-page .dr-options--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.ds-page .dr-options__item { min-width: 0; }
body.ds-page .dr-groupe--replie .dr-options__item--extra:not(.dr-options__item--on) { display: none; }
body.ds-page .dr-options__item--filtre-cache { display: none !important; }

body.ds-page .dr-option.ds-pastille {
    width: 100%;
    min-width: 0;
    height: 52px;
    min-height: 0;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dr-bordure);
    border-radius: var(--dr-r-md);
    background: var(--dr-blanc);
    box-shadow: none;
    color: var(--dr-texte);
    font: 400 15px/1.2 var(--ds-font);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--dr-duree-transform), background-color var(--dr-duree-etat);
}
body.ds-page .dr-options--compact .dr-option.ds-pastille { font-size: 14px; }
body.ds-page .dr-option__texte { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ds-page .dr-option.ds-pastille:hover { background: var(--dr-hover); }
body.ds-page .dr-option.ds-pastille:focus-visible { outline: 2px solid var(--dr-accent); outline-offset: 2px; }
/* Sélection : bordure noire 2 px (maquette), padding compensé pour que le
   texte ne bouge pas d'un pixel. */
body.ds-page .dr-option.ds-pastille.ds-pastille--active {
    border: 2px solid var(--dr-texte);
    padding: 0 5px;
    box-shadow: none;
    font-weight: 600;
}
/* Rupture : grisée et barrée, jamais masquée ; reste sélectionnable, la fiche
   de la déclinaison explique elle-même la rupture. */
body.ds-page .dr-option.ds-pastille.dr-option--rupture { color: var(--dr-texte-3); background: var(--dr-fond); border-style: dashed; }
body.ds-page .dr-option.ds-pastille.dr-option--rupture .dr-option__texte { text-decoration: line-through; text-decoration-thickness: 1px; }
body.ds-page .dr-option.ds-pastille.dr-option--rupture.ds-pastille--active { border-style: solid; border-color: var(--dr-texte-3); }

body.ds-page .dr-groupe__vide { margin: 8px 0 0; font-size: 13px; color: var(--dr-texte-2); }
body.ds-page .dr-groupe__voir {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 0;
    border: none;
    background: none;
    color: var(--dr-texte);
    font: 600 14px/1.2 var(--ds-font);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
body.ds-page .dr-groupe__voir .dr-icone { transition: transform var(--dr-duree-etat); }
body.ds-page .dr-groupe__voir[aria-expanded="true"] .dr-icone { transform: rotate(180deg); }
body.ds-page .dr-groupe__voir[hidden] { display: none; }
body.ds-page .dr-groupe__voir:focus-visible { outline: 2px solid var(--dr-accent); outline-offset: 2px; border-radius: 4px; }
body.ds-page .dr-config .ds-declinaisons__erreur:not(.ds-sr-only) { margin: 0 0 12px; font-size: 13px; color: var(--dr-danger); }

/* ── Prix, disponibilité, achat ────────────────────────────────────────── */
body.ds-page .dr-panneau__prix {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px 16px;
    margin-top: 4px;
    padding: 16px 0;
    border-top: 1px solid var(--dr-sep);
}
body.ds-page .dr-panneau__prix .ds-fiche__prix-libelle { font-size: 12px; color: var(--dr-texte-2); }
body.ds-page .dr-panneau__prix .ds-fiche__prix { font-size: 28px; font-weight: 700; color: var(--dr-texte); letter-spacing: -.01em; }
body.ds-page .dr-panneau__prix .ds-fiche__prix--indispo { font-size: 18px; color: var(--dr-texte-2); font-weight: 600; }
body.ds-page .dr-panneau__prix .ds-fiche__prix-mention { font-size: 13px; font-weight: 400; color: var(--dr-texte-2); }
body.ds-page .dr-panneau__dispo { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
body.ds-page .dr-dispo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; }
body.ds-page .dr-dispo--ok { color: var(--dr-succes); }
body.ds-page .dr-dispo--rupture { color: var(--dr-danger); }
body.ds-page .dr-dispo__qte { font-size: 12px; color: var(--dr-texte-2); }

body.ds-page .dr-achat.ds-fiche__achat { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 10px; }
body.ds-page .dr-achat .ds-qte { height: 52px; border-radius: var(--dr-r-md); }
body.ds-page .dr-achat .ds-fiche__ajout,
body.ds-page .dr-achat > .ds-btn {
    flex: 1 1 auto;
    min-width: 0;
    height: 52px;
    border-radius: var(--dr-r-md);
    font-size: 15.5px;
    font-weight: 600;
}
body.ds-page .dr-achat .ds-fiche__ajout:disabled { height: auto; min-height: 52px; padding: 10px 16px; line-height: 1.3; }

body.ds-page .dr-fiche__panneau .ds-encart { margin-top: 4px; }

body.ds-page .dr-panneau__info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px 0;
    border-top: 1px solid var(--dr-sep);
    font-size: 12.5px;
    color: var(--dr-texte-2);
}
body.ds-page .dr-panneau__info:first-of-type { margin-top: 16px; }
body.ds-page .dr-panneau__info .dr-icone { color: var(--dr-texte); margin-top: 1px; }
body.ds-page .dr-panneau__liens { margin: 12px 0 0; font-size: 13px; }
body.ds-page .dr-panneau__liens a { color: var(--dr-texte); text-decoration: underline; text-underline-offset: 2px; }
body.ds-page .dr-panneau__message { margin: 12px 0 0; font-size: 13px; font-weight: 600; }
body.ds-page .dr-panneau__admin { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 12px 0 0; font-size: 12px; color: var(--dr-texte-2); }

/* Barre basse : mobile seulement. */
body.ds-page .dr-fiche-barre { display: none; }

/* ── Contenu sous la galerie ───────────────────────────────────────────── */
body.ds-page .dr-section { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--dr-sep); animation: dr-fiche-reveal .3s ease-out both; }
@keyframes dr-fiche-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
body.ds-page .dr-section h2 { margin: 0 0 14px; font-size: 16px; font-weight: 700; color: var(--dr-texte); }
body.ds-page .dr-description { font-size: 14.5px; line-height: 1.65; color: var(--dr-texte-2); overflow-wrap: anywhere; }
body.ds-page .dr-description p { margin: 0 0 10px; }
body.ds-page .dr-description--vide { font-style: italic; }
body.ds-page .dr-carac { margin: 0; }
body.ds-page .dr-carac__ligne { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--dr-sep); font-size: 14px; }
body.ds-page .dr-carac dt { color: var(--dr-texte-2); font-weight: 400; }
body.ds-page .dr-carac dd { margin: 0; color: var(--dr-texte); overflow-wrap: anywhere; }
body.ds-page .dr-documents { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.ds-page a.dr-document { color: var(--dr-texte); font-size: 14px; text-decoration: underline; text-underline-offset: 2px; }

/* ── D'autres produits : bande grise pleine largeur ─────────────────────── */
body.ds-page .ds-fiche__section.ds-fiche__assos {
    margin: 56px 0 0;
    padding: 40px 0 48px;
    background: var(--dr-fond);
    border-top: 1px solid var(--dr-sep);
    border-radius: 0;
}
body.ds-page .dr-autres__int { max-width: var(--dr-conteneur); margin: 0 auto; padding: 0 32px; }
body.ds-page .dr-autres__titre { margin: 0 0 20px; font-size: 22px; font-weight: 700; color: var(--dr-texte); }
body.ds-page .dr-autres__piste.ds-carousel__track { gap: 22px; padding-bottom: 8px; }
body.ds-page .dr-autres__piste.ds-carousel__track > .ds-carte { flex: 0 0 300px; scroll-snap-align: start; }

/* ── Conseiller + questions fréquentes ─────────────────────────────────── */
body.ds-page .dr-aide {
    max-width: var(--dr-conteneur);
    margin: 0 auto;
    padding: 56px 32px 40px;
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
}
body.ds-page .dr-aide--seul { grid-template-columns: minmax(0, 1fr); }
body.ds-page .dr-aide--seul .dr-conseiller { max-width: 460px; }
body.ds-page .dr-conseiller {
    padding: 32px 36px;
    border: 1px solid var(--dr-sep);
    border-radius: var(--dr-r-xl);
    background: var(--dr-blanc);
    box-shadow: 0 8px 28px rgba(0, 30, 60, .06);
}
body.ds-page .dr-conseiller__pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: var(--dr-fond);
    color: var(--dr-texte);
}
body.ds-page .dr-conseiller h2 { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: var(--dr-texte); }
body.ds-page .dr-conseiller__texte { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: var(--dr-texte-2); }
body.ds-page .dr-conseiller__tel {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    color: var(--dr-texte);
}
body.ds-page .dr-conseiller__tel::before {
    content: "";
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .2);
}
body.ds-page .dr-conseiller__libelle { margin: 0 0 22px 17px; font-size: 13px; color: var(--dr-texte-2); }
body.ds-page a.dr-conseiller__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    border-radius: var(--dr-r-pill);
    background: var(--dr-primaire);
    color: var(--dr-on-primaire);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: filter var(--dr-duree-etat);
}
body.ds-page a.dr-conseiller__cta:hover { color: var(--dr-on-primaire); text-decoration: none; filter: brightness(.92); }
body.ds-page a.dr-conseiller__cta:focus-visible { outline: 2px solid var(--dr-texte); outline-offset: 3px; }

body.ds-page .dr-faq h2 { margin: 0 0 8px; font-size: 24px; font-weight: 700; color: var(--dr-texte); }
body.ds-page .dr-faq__item { border-bottom: 1px solid var(--dr-sep); }
body.ds-page .dr-faq__titre { margin: 0; font: inherit; }
body.ds-page .dr-faq__tete {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 30px 0;
    border: none;
    background: none;
    color: var(--dr-texte);
    font: 600 20px/1.35 var(--ds-font);
    text-align: left;
    cursor: pointer;
}
body.ds-page .dr-faq__tete:focus-visible { outline: 2px solid var(--dr-accent); outline-offset: 2px; border-radius: 4px; }
body.ds-page .dr-faq__plus {
    width: 30px;
    height: 30px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--dr-actif);
    color: var(--dr-texte);
    transition: transform var(--dr-duree-composant);
}
body.ds-page .dr-faq__item--ouvert .dr-faq__plus { transform: rotate(45deg); }
body.ds-page .dr-faq__corps {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows var(--dr-duree-accordeon) var(--dr-ease-menu), visibility 0s linear var(--dr-duree-accordeon);
}
body.ds-page .dr-faq__item--ouvert .dr-faq__corps { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--dr-duree-accordeon) var(--dr-ease-menu), visibility 0s; }
body.ds-page .dr-faq__clip { overflow: hidden; min-height: 0; }
body.ds-page .dr-faq__texte { max-width: 760px; padding: 0 0 26px; font-size: 15px; line-height: 1.6; color: var(--dr-texte-2); overflow-wrap: anywhere; }
body.ds-page .dr-faq__suite {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 26px 0;
    border: none;
    background: none;
    color: var(--dr-texte);
    font: 600 20px/1.3 var(--ds-font);
    cursor: pointer;
}
body.ds-page .dr-faq__suite[hidden] { display: none; }

/* ── ≤ 992 px : panneau sous la galerie, plus collant ──────────────────── */
@media (max-width: 992px) {
    body.ds-page .dr-fiche__layout { display: flex; flex-direction: column; }
    body.ds-page .dr-fiche__galerie { order: 1; width: 100%; }
    body.ds-page .dr-fiche__panneau {
        order: 2;
        /* Pas de z-index : la barre basse (position fixed) vit dans ce
           panneau, un contexte d'empilement ici la ferait passer sous le
           contenu positionné qui suit. */
        position: relative;
        top: auto;
        width: 100%;
        max-height: none;
        overflow: visible;
        margin-top: -16px;
        border-radius: var(--dr-r-lg) var(--dr-r-lg) 0 0;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, .06);
    }
    body.ds-page .dr-fiche__contenu { order: 3; width: 100%; }
    body.ds-page .dr-aide { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 40px 16px 16px; }
    body.ds-page .dr-faq__tete { font-size: 17px; padding: 22px 0; }
}

/* ── ≤ 768 px : fiche mobile ──────────────────────────────────────────── */
@media (max-width: 768px) {
    body.ds-page.dr-page-fiche { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
    body.ds-page .dr-fiche-conteneur { padding: 0; }
    /* Fil d'Ariane gardé dans le HTML (référencement), masqué à l'écran. */
    body.ds-page .dr-fiche__ariane {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    body.ds-page .dr-galerie__principale { aspect-ratio: 1 / 1; border: none; border-radius: 0; }
    body.ds-page .dr-galerie__vignettes,
    body.ds-page .dr-galerie__compteur { display: none; }
    body.ds-page .dr-galerie__nav { width: 34px; height: 34px; top: auto; bottom: 26px; transform: none; }
    body.ds-page .dr-galerie__nav--prev { left: 16px; }
    body.ds-page .dr-galerie__nav--next { right: 16px; }
    body.ds-page .dr-galerie__points {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 38px;
        z-index: 2;
        display: flex;
        justify-content: center;
        gap: 7px;
        pointer-events: none;
    }
    body.ds-page .dr-galerie__point {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: rgba(0, 0, 0, .25);
        transition: background-color var(--dr-duree-etat), transform var(--dr-duree-etat);
    }
    body.ds-page .dr-galerie__point--on { background: var(--dr-texte); transform: scale(1.15); }
    body.ds-page .dr-galerie__flottants { top: 16px; left: 16px; right: 16px; }
    body.ds-page .dr-galerie__flottants .dr-flottant--retour,
    body.ds-page .dr-galerie__flottants .dr-flottant--mobile { display: inline-flex; }

    body.ds-page .dr-fiche__panneau {
        margin-top: -24px;
        padding: 30px 18px 24px;
        border: none;
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, .08);
    }
    /* Teintes : à 4 colonnes de 78 px, « 10.0 Blond platine » devenait « 10.0 Bl... ». Deux colonnes
       (trois dès 480 px), libellé sur deux lignes au besoin : on lit la teinte entière. */
    body.ds-page .dr-options--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.ds-page .dr-options--compact .dr-option.ds-pastille { height: auto; min-height: 48px; padding: 8px 10px; }
    body.ds-page .dr-options--compact .dr-option__texte { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    body.ds-page .dr-panneau__dispo { align-items: flex-start; }
    /* L'ajout passe dans la barre basse ; la quantité reste dans la feuille. */
    body.ds-page .dr-achat .dr-achat__cta { display: none; }
    body.ds-page .dr-achat .ds-qte { width: 100%; justify-content: space-between; }
    body.ds-page .dr-achat .ds-qte-bloc { flex: 1; }
    body.ds-page .dr-achat .ds-qte__champ { flex: 1; width: auto; }
    body.ds-page .dr-panneau__prix .ds-fiche__prix { font-size: 26px; }

    body.ds-page .dr-fiche-barre {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1050;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
        background: var(--dr-blanc);
        border-top: 1px solid var(--dr-sep);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .05);
    }
    body.ds-page .dr-fiche-barre__prix { min-width: 0; display: flex; flex-direction: column; }
    body.ds-page .dr-fiche-barre__prix .ds-fiche__prix-libelle,
    body.ds-page .dr-fiche-barre__prix .ds-fiche__prix-public,
    body.ds-page .dr-fiche-barre__prix .ds-fiche__prix-ttc,
    body.ds-page .dr-fiche-barre__prix .ds-fiche__remise { display: none; }
    body.ds-page .dr-fiche-barre__prix .ds-fiche__prix { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.15; color: var(--dr-texte); }
    body.ds-page .dr-fiche-barre__prix .ds-fiche__prix-mention { font-size: 12px; font-weight: 400; color: var(--dr-texte-2); }
    body.ds-page .dr-fiche-barre__cta {
        flex: none;
        height: 54px;
        padding: 0 22px;
        border: none;
        border-radius: var(--dr-r-md);
        background: var(--dr-primaire);
        color: var(--dr-on-primaire);
        font: 600 16px/1.2 var(--ds-font);
        cursor: pointer;
    }
    body.ds-page .dr-fiche-barre__cta:focus-visible { outline: 2px solid var(--dr-texte); outline-offset: 2px; }

    body.ds-page .dr-fiche__contenu { padding: 0 16px; }
    body.ds-page .ds-fiche__section.ds-fiche__assos { margin-top: 32px; }
    body.ds-page .dr-autres__int { padding: 0 16px; }
    body.ds-page .dr-autres__piste.ds-carousel__track > .ds-carte { flex-basis: 260px; }
    /* Carte de 260 px : quantité et « Ajouter » ne tiennent pas côte à côte,
       ils passent l'un sous l'autre (sinon débordement de la carte). */
    body.ds-page .dr-autres__piste .dr-carte__achat { flex-direction: column; align-items: stretch; }
    body.ds-page .dr-autres__piste .dr-carte__achat .ds-qte-bloc,
    body.ds-page .dr-autres__piste .dr-carte__achat .ds-qte { width: 100%; }
    body.ds-page .dr-autres__piste .dr-carte__achat .ds-qte { justify-content: space-between; }
    body.ds-page .dr-autres__piste .dr-carte__achat .ds-qte__champ { flex: 1; width: auto; min-width: 0; }
    body.ds-page .dr-conseiller { padding: 26px 22px; }
    body.ds-page .dr-carac__ligne { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    body.ds-page .dr-section { animation: none; }
    body.ds-page .dr-galerie__image,
    body.ds-page .dr-faq__corps,
    body.ds-page .dr-faq__plus,
    body.ds-page .dr-groupe__voir .dr-icone { transition: none; }
}

/* ── R36 : quantité par déclinaison ─────────────────────────────────────── */
body.ds-page .dr-decl { margin: 8px 0 18px; }
body.ds-page .dr-decl__aide { margin: -8px 0 12px; font-size: 13px; color: var(--dr-texte-2); }
body.ds-page .dr-decl__liste { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--dr-sep); max-height: 520px; overflow-y: auto; }
body.ds-page .dr-decl__ligne {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 6px 14px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--dr-sep);
}
body.ds-page .dr-decl__ligne--saisie { background: rgba(0, 0, 0, 0.03); }
body.ds-page .dr-decl__ligne[hidden] { display: none; }
/* Référence affichée : même langage que la pastille de variante sélectionnée
   (bordure noire 2 px, coins arrondis) plus une étiquette « Affichée ».
   Padding réduit de la bordure pour garder les colonnes alignées. */
body.ds-page .dr-decl__ligne--courante {
    margin: 6px 0;
    padding: 8px 10px;
    border: 2px solid var(--dr-texte);
    border-radius: var(--dr-r-md);
}
body.ds-page .dr-decl__titre { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
body.ds-page .dr-decl__badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--dr-texte);
    color: var(--dr-blanc);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
body.ds-page .dr-decl__ligne--indispo .dr-decl__nom,
body.ds-page .dr-decl__ligne--indispo .dr-decl__ref,
body.ds-page .dr-decl__ligne--indispo .dr-decl__prix { color: var(--dr-texte-2); }
body.ds-page .dr-decl__infos { display: flex; flex-direction: column; min-width: 0; }
body.ds-page .dr-decl__nom { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
body.ds-page .dr-decl__ref { font-size: 12px; color: var(--dr-texte-2); font-variant-numeric: tabular-nums; }
body.ds-page .dr-decl__prix { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
body.ds-page .dr-decl__stepper { height: 40px; width: 124px; border-radius: var(--dr-r-md); }
body.ds-page .dr-decl__stepper .ds-qte__champ { width: 44px; text-align: center; }
body.ds-page .dr-decl__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
body.ds-page .dr-decl__total { margin: 0; min-height: 1.2em; font-size: 13.5px; color: var(--dr-texte-2); }
body.ds-page .dr-decl__ajout { min-height: 48px; padding: 0 22px; }
@media (max-width: 575px) {
    body.ds-page .dr-decl__ligne { grid-template-columns: minmax(0, 1fr) auto; }
    body.ds-page .dr-decl__prix { grid-column: 2; grid-row: 1; }
    body.ds-page .dr-decl__qte { grid-column: 1 / -1; }
    body.ds-page .dr-decl__stepper { width: 100%; height: 44px; justify-content: space-between; }
    body.ds-page .dr-decl__stepper .ds-qte__champ { flex: 1; width: auto; }
    body.ds-page .dr-decl__liste { max-height: none; }
    body.ds-page .dr-decl__ajout { width: 100%; }
}

/* Teintes en trois colonnes entre 480 et 768 px. */
@media (min-width: 480px) and (max-width: 768px) {
    body.ds-page .dr-options--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}