/* =============================================================
   Draft Studio — GLUE WordPress
   -------------------------------------------------------------
   CE FICHIER N'EST PAS DU DESIGN : il fait le pont entre le
   design (tokens/base/home.css, copies fidèles des maquettes)
   et l'ossature WordPress/WooCommerce/Storefront.
   Ne JAMAIS mettre ici du style « maquette » : il vit dans
   base.css / home.css. Ici, seulement de l'intégration.
   ============================================================= */

/* ── BADGES « PAYPAL » MASQUÉS TEMPORAIREMENT ────────────────────
   Le paiement PayPal n'est pas (encore) en place. Les badges PAYPAL
   du pied, du volet panier, de la page panier et du checkout sont
   masqués via cette seule règle. Le markup reste en place (classe
   `ds-chip--paypal`) → pour RÉAFFICHER PayPal le jour venu, il suffit
   de SUPPRIMER cette règle. */
.ds-chip--paypal { display: none !important; }

/* ── En-tete STICKY ──────────────────────────────────────────────
   Storefront pose overflow-x:hidden sur body et .site, ce qui CASSE
   position:sticky. On repasse en `clip` (pas de scroll horizontal,
   mais le sticky refonctionne). Le bandeau promo (.ds-utility) n'est
   PAS sticky : il defile et disparait, puis l'en-tete se colle en haut. */
html { scroll-padding-top: var(--header-h, 75px); scroll-behavior: smooth; }

/* Message d'inscription newsletter (sur la bande paper du design). */
.ds-newsletter__msg { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--ds-ink); }
.ds-newsletter__msg--err { color: #b23b3b; }
/* !important car Storefront recharge parfois sa feuille apres la notre. */
html, body, .site, #page { overflow-x: clip !important; }
.ds-header { position: -webkit-sticky !important; position: sticky !important; top: 0; z-index: 60; }
/* Connecte : decale l'en-tete sticky SOUS la barre d'admin WordPress. */
body.admin-bar .ds-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .ds-header { top: 46px; }
}
/* Idem pour le volet panier (position:fixed top:0) : sinon son en-tete
   passe SOUS la barre d'admin et se retrouve coupe. */
body.admin-bar .ds-cart { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .ds-cart { top: 46px; }
}
/* Pas d'ombre/degrade sous l'en-tete au scroll (demande de Manu). */

/* ── Page d'accueil : rendu pleine largeur (hors gabarit Storefront) ── */
.ds-main { display: block; }
/* Neutralise d'éventuels paddings/maxwidth hérités quand le contenu
   bloc est rendu directement dans la coque DS. */
.ds-main > .entry-content,
.ds-main > article,
.ds-main > .entry-content > * { margin: 0; }

/* Les blocs natifs (alignfull) doivent porter eux-mêmes le fond ;
   le <main> reste neutre noir. */
.ds-main { background: var(--ds-black); }

/* ── Pages de contenu composées en BLOCS NATIFS (modèle « Bientôt
   disponible ») ────────────────────────────────────────────────
   Le studio, etc. : le corps est fait de blocs WP natifs (Titre,
   Paragraphe, Liste, Image) à l'intérieur d'un Groupe .ds-article.
   Le design (content.css) habille déjà h2/h3/p/ul. On ne fait ici
   que raccorder le bloc Image natif au slot photo du design
   (.ds-article__img : coins arrondis, pleine largeur, marges) afin
   que le front reste identique. */
.ds-article .wp-block-image { margin: 34px 0; }
.ds-article .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 15px;
}
/* Le Groupe natif ne doit ajouter ni fond ni marge parasite : .ds-page
   et .ds-article portent déjà tout le style du design. */
.ds-article.wp-block-group,
.ds-page.wp-block-group { margin: 0; }
/* Guide des tailles / Composition : article plus large (820px au design,
   contre 760px par défaut). Appliqué via la classe du Groupe .ds-article. */
.ds-article.ds-article--wide { max-width: 820px; }

/* ── En-tête : compteur panier WooCommerce (live via fragments) ── */
.ds-header__icons .ds-iconbtn .badge { line-height: 1; }

/* ── En-tête : menu mobile ──────────────────────────────────────────────
   Desktop (≥900) : nav inline, burger + volet off-canvas masqués (inchangé).
   Mobile (≤900) : burger à l'extrême droite (dernière icône, après le panier)
   + volet off-canvas par la droite qui overlay le site assombri. */
.ds-header__burger { display: none; }
.ds-mnav, .ds-mnav-scrim { display: none; }

@media (max-width: 900px) {
  /* On garde la hauteur var(--header-h)=75px (héritée de base.css) pour que
     l'index capsule collant (top:var(--header-h)) affleure le header sans
     laisser d'espace. */
  .ds-header__left { gap: 12px; }
  .ds-header__wordmark { font-size: 22px; }
  /* burger à droite (dernière icône du groupe .ds-header__icons, après le
     panier) → il ouvre le volet qui glisse par la droite. */
  .ds-header__burger {
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; color: var(--ds-paper); cursor: pointer; padding: 4px; margin: 0;
  }
  /* la nav inline est remplacée par le volet off-canvas */
  .ds-header__nav { display: none; }

  /* Voile (scrim) qui assombrit le site derrière le volet */
  .ds-mnav-scrim {
    display: block; position: fixed; inset: 0; z-index: 95;
    background: rgba(0,0,0,0.55);
    opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s ease;
  }
  /* Volet off-canvas droit */
  .ds-mnav {
    display: flex; flex-direction: column;
    position: fixed; top: 0; right: 0; left: auto; bottom: 0; z-index: 96;
    width: min(340px, 84vw);
    background: var(--ds-black); border-left: 2px solid var(--ds-paper);
    color: var(--ds-paper);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
    overflow-y: auto;
  }
  body.ds-mnav-open .ds-mnav { transform: translateX(0); }
  body.ds-mnav-open .ds-mnav-scrim { opacity: 1; visibility: visible; }
  body.ds-mnav-open { overflow: hidden; }

  .ds-mnav__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 22px; border-bottom: 2px solid var(--ds-paper); flex-shrink: 0;
  }
  .ds-mnav__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ds-paper); }
  .ds-mnav__brand img { height: 30px; width: auto; }
  .ds-mnav__brand span {
    font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; font-size: 19px; white-space: nowrap;
  }
  .ds-mnav__brand { flex-shrink: 1; min-width: 0; }
  .ds-mnav__close { flex-shrink: 0; }
  .ds-mnav__close {
    background: none; border: none; color: var(--ds-paper);
    font-size: 30px; line-height: 1; font-weight: 300; cursor: pointer;
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: background .12s;
  }
  .ds-mnav__close:hover { background: rgba(250,250,250,0.10); }

  .ds-mnav__menu { padding: 10px 22px; }
  .ds-mnav__menu ul { list-style: none; margin: 0; padding: 0; }
  .ds-mnav__menu li { margin: 0; }
  .ds-mnav__menu a {
    display: block; padding: 18px 0; border-bottom: 1px solid rgba(250,250,250,0.12);
    text-decoration: none; color: var(--ds-paper);
    font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.03em; font-size: 22px;
  }
  .ds-mnav__menu a:hover { color: rgba(250,250,250,0.7); }

  .ds-mnav__foot { margin-top: auto; padding: 18px 22px 26px; display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
  .ds-mnav__link {
    display: flex; align-items: center; gap: 12px; padding: 12px 0;
    text-decoration: none; color: var(--ds-paper);
    font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
  }
  .ds-mnav__link:hover { color: rgba(250,250,250,0.7); }
}

/* ── En-tête smartphone (≤600) : tout sur UNE ligne sans chevauchement.
   Ordre gauche→droite : logo « D » · wordmark « DRAFT STUDIO » · icône compte
   · icône panier · burger. On réduit logo/wordmark/marges/icônes pour que la
   marque (à gauche) et le groupe d'icônes (à droite) tiennent côte à côte même
   sur les écrans étroits (~320px). PC inchangé (borné ≤600). ── */
@media (max-width: 600px) {
  .ds-header { padding: 0 16px; }
  .ds-header__brand { gap: 9px; }
  .ds-header__brand img { width: 32px; height: 32px; }
  .ds-header__wordmark { font-size: 21px; }
  .ds-header__icons { gap: 12px; }
  .ds-header__icons .ds-iconbtn svg { width: 22px; height: 22px; }
  .ds-header__burger { padding: 2px; }
  .ds-header__burger svg { width: 22px; height: 22px; }
}
@media (max-width: 360px) {
  .ds-header__wordmark { font-size: 18px; }
  .ds-header__icons { gap: 10px; }
}

/* ── Bandeau promo (.ds-utility) : sur mobile le texte ne tient pas → 1 seule
   ligne DÉFILANTE (marquee). On affiche la 2e copie et on translate le track
   de -50% (= largeur d'un groupe) en boucle sans couture. ≤720px seulement →
   desktop/tablette large gardent le bandeau centré statique (inchangé). ── */
@media (max-width: 720px) {
  .ds-utility { justify-content: flex-start; }
  .ds-utility__track { width: max-content; animation: ds-utility-marquee 24s linear infinite; }
  .ds-utility__group { flex-shrink: 0; padding-right: 28px; }
  .ds-utility__group + .ds-utility__group { display: flex; } /* révèle la 2e copie */
}
@keyframes ds-utility-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ds-utility__track { animation: none; }
}

/* ── Newsletter : on réutilise le formulaire [ds_notify] dans la
   bande « paper » du design. Pont visuel minimal. ── */
.ds-newsletter .ds-notify { margin: 0; max-width: 520px; text-align: left; }
.ds-newsletter .ds-notify-msg { color: var(--ds-ink); }
.ds-newsletter .ds-notify-msg.err { color: #b23b3b; }
.ds-newsletter .ds-notify-legal { color: rgba(38,38,38,0.55); opacity: 1; }
.ds-newsletter .ds-notify-form .ds-notify-input {
  border: 1px solid rgba(38,38,38,0.12) !important;
  border-radius: 8px 0 0 8px !important;
  height: 64px; padding: 0 22px !important;
}
.ds-newsletter .ds-notify-form .ds-notify-btn {
  width: 56px; border-radius: 0 8px 8px 0 !important;
  background: #ededed !important;
}

/* ── Responsive global : stacke les grilles 2 colonnes du design ── */
@media (max-width: 860px) {
  .ds-hero { padding-left: 24px; padding-right: 24px; min-height: 0; }
  .ds-stats { grid-template-columns: repeat(2, 1fr); }
  .ds-stats__cell:nth-child(2) { border-right: none; }
  .ds-feat { grid-template-columns: 1fr; height: auto; }
  .ds-collection__row { grid-template-columns: 1fr; }
  .ds-newsletter { grid-template-columns: 1fr; padding-left: 24px; padding-right: 24px; }
  .ds-footer { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .ds-footer { grid-template-columns: 1fr; }
}

/* ── Cars collection : blocs produit (.ds-pb) + index capsule ──
   Le design est desktop (2 colonnes media|achat). Sur mobile on empile :
   media TOUJOURS en haut (on neutralise l'alternance --reverse), panneau
   d'achat dessous. Coins arrondis report­és haut/bas. Borné ≤860 → PC intact. */
@media (max-width: 860px) {
  /* minmax(0,1fr) (pas 1fr) : autorise la colonne à descendre sous le
     min-content du panneau d'achat, sinon le bloc déborde le viewport. */
  .ds-pb { grid-template-columns: minmax(0, 1fr); }
  .ds-pb__media,
  .ds-pb--reverse .ds-pb__media {
    order: 1; border-radius: 24px 24px 0 0; min-height: 360px;
  }
  .ds-pb__buy,
  .ds-pb--reverse .ds-pb__buy {
    order: 2; border-radius: 0 0 24px 24px; padding: 32px 24px;
  }
  /* grilles internes du panneau d'achat : autoriser le rétrécissement */
  .ds-pb__chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ds-pb__sizes { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  /* titre 56px + prix 30px nowrap débordent le panneau étroit : on réduit
     et on autorise le prix à passer sous le nom au besoin. */
  .ds-pb__head { flex-wrap: wrap; gap: 4px 16px; }
  .ds-pb__name { font-size: 40px; }
  .ds-pb__price { font-size: 24px; }
  /* Bouton « Choisir une taille / Ajouter au panier » : peu de place à côté du
     stepper → typo réduite + flèche masquée (choix Manu, « supprimer la flèche
     s'il n'y a pas la place »). */
  .ds-pb__add { font-size: 14px; letter-spacing: 0.02em; gap: 0; padding: 0 8px; }
  .ds-pb__add svg { display: none; }

  /* Index capsule « 01 Sideways · 02 Engine… » : 1 ligne défilable (swipe). */
  .ds-index {
    display: flex; grid-template-columns: none;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .ds-index::-webkit-scrollbar { display: none; }
  .ds-index__cell { flex: 0 0 auto; min-width: 62%; }
}

/* ── Bandeau marquee : rien à ajouter, géré par base.css ── */

/* =============================================================
   PONTS BLOCS NATIFS  ↔  DESIGN
   -------------------------------------------------------------
   Les motifs de la home utilisent des blocs WordPress (group,
   columns, button, image) qui injectent leurs propres classes
   .wp-block-*. On les fait coller au design (base.css/home.css).
   ============================================================= */

/* Marque (en-tete + pied) : wordmark en capitales */
.ds-header__wordmark,
.ds-footer__brand span { text-transform: uppercase; }
.ds-iconbtn { text-decoration: none; }
.ds-header__brand { text-decoration: none; }

/* En-tete : menu WP (ul>li>a) mis en ligne comme le design */
.ds-header__nav ul,
.ds-header__nav .ds-header__menu {
  display: flex; align-items: center; gap: 28px;
  list-style: none; margin: 0; padding: 0;
}
.ds-header__nav li { margin: 0; }

/* HERO : bouton natif -> pilule du design */
.ds-hero__ctas .wp-block-buttons,
.ds-hero__ctas .wp-block-button { margin: 0; }
.ds-hero__ctas .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px; padding: 0 30px;
  background: var(--ds-paper); color: var(--ds-ink);
  border: none; border-radius: 6px;
  font-family: var(--font-display); font-weight: 500; font-size: 16px; letter-spacing: .02em;
  text-decoration: none; white-space: nowrap;
  transition: background .12s ease, color .12s ease, transform .1s;
}
.ds-hero__ctas .wp-block-button__link:hover { background: #e6e6e6; color: var(--ds-ink); }
.ds-hero__ctas .wp-block-button__link:active { transform: scale(.97); }

/* STATS : 4 colonnes natives -> bande du design */
.ds-stats.wp-block-columns {
  display: flex; gap: 0; margin: 0;
  border-top: 2px solid var(--ds-paper);
  background: var(--ds-black);
  padding: 0 var(--gut);
}
.ds-stats .ds-stats__cell {
  padding: 28px 24px; margin: 0;
  border-right: 1px solid rgba(250,250,250,.15);
  display: flex; flex-direction: column; gap: 6px;
}
.ds-stats .ds-stats__cell:last-child { border-right: none; }
.ds-stats .ds-stats__cell .v,
.ds-stats .ds-stats__cell .l { margin: 0; }

/* COLLECTION — produit vedette (2 colonnes natives) */
.ds-feat.wp-block-columns {
  display: flex; gap: 0; margin: 0 0 18px;
  border-radius: 16px; overflow: hidden; background: var(--ds-ink);
  align-items: stretch; min-height: 380px;
}
.ds-feat .wp-block-column { margin: 0; }
.ds-feat__media { display: flex; }
.ds-feat__media .wp-block-image { margin: 0; height: 100%; width: 100%; }
.ds-feat__media .wp-block-image img {
  width: 100%; height: 100%; min-height: 380px;
  object-fit: cover; background: #d7d9dc; padding: 0;
}
.ds-feat__panel p { margin: 0; }
.ds-feat__badge { margin: 0; }

/* COLLECTION — 3 tuiles (3 colonnes natives) */
.ds-collection__row.wp-block-columns { display: flex; gap: 18px; margin: 0; }
.ds-collection__row .ds-tile { margin: 0; border-radius: 16px; overflow: hidden; background: var(--ds-ink); display: flex; flex-direction: column; }
.ds-tile .wp-block-image { margin: 0; }
.ds-tile .wp-block-image img {
  width: 100%; height: 300px; object-fit: cover;
  background: #d7d9dc; padding: 0;
}
.ds-tile__panel p { margin: 0; }

/* NEWSLETTER : 2 colonnes natives -> bande paper du design */
.ds-newsletter.wp-block-columns {
  display: flex; gap: 50px; align-items: center; margin: 0;
  background: var(--ds-paper); color: var(--ds-ink);
  padding: 70px var(--gut);
}
.ds-newsletter .wp-block-column { margin: 0; }
.ds-newsletter__title { margin: 0 0 14px; }
.ds-newsletter__sub { margin: 0; }

/* Pastilles coloris (core/html) */
.ds-coll-dots { display: flex; gap: 8px; margin-top: 12px; }

/* ── BOUTIQUE ────────────────────────────────────────────────────
   Le panneau QuickAdd est rendu en HTML statique (pas de rendu
   conditionnel React) : on le montre/cache via la classe .is-open. */
/* QuickAdd : à l'ouverture, le panneau REMPLACE le bouton (comme le design,
   qui rend conditionnellement l'un OU l'autre). */
.ds-qa__panel { display: none; }
.ds-qa.is-open .ds-qa__btn { display: none; }
.ds-qa.is-open .ds-qa__panel { display: flex; }

/* Grille collection (home) : image mise en avant du produit, ou zone grise
   PROPRE quand le produit n'a pas encore d'image (sans icône ni texte).
   Les dimensions viennent des classes design .ds-feat__img / .ds-tile__img. */
.ds-imglink { display: block; height: 100%; }
.ds-coll-img { display: block; object-fit: cover; }
.ds-imgph { display: block; background: #d7d9dc; }
.ds-imgph--tile { height: 300px; }

/* Newsletter : bouton enveloppe (un style Storefront écrasait le #ededed). */
.ds-newsletter__form button { background: #ededed !important; color: var(--ds-ink) !important; }
.ds-newsletter__form button:hover { background: #e0e0e0 !important; }
.ds-newsletter__form button svg { fill: var(--ds-ink); }

/* ── Volet panier : état « occupé » ──────────────────────────────
   Le serveur peut mettre 1-4 s a repondre (WooCommerce + calcul
   livraison). On donne un retour visuel immediat : voile + spinner. */
.ds-cart.is-busy::before {
  content: "";
  position: absolute; inset: 0; z-index: 5;
  background: rgba(10, 10, 10, 0.45);
  backdrop-filter: blur(1px);
}
.ds-cart.is-busy::after {
  content: "";
  position: absolute; top: 50%; left: 50%; z-index: 6;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 3px solid rgba(250, 250, 250, 0.25);
  border-top-color: var(--ds-paper, #fafafa);
  border-radius: 50%;
  animation: ds-spin 0.7s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* Les blocs group ajoutent parfois un conteneur interne : pleine largeur */
.wp-block-group__inner-container { width: 100%; }
/* HERO : centrage vertical robuste meme avec conteneur interne */
.ds-hero.wp-block-group { display: flex; align-items: center; }
.ds-hero.wp-block-group > .wp-block-group__inner-container,
.ds-hero.wp-block-group > .ds-hero__body { width: 100%; }

/* =============================================================
   NEUTRALISATION DES STYLES STOREFRONT/WOOCOMMERCE
   -------------------------------------------------------------
   Storefront + WooCommerce posent leurs propres styles sur les
   <button> et <input> (padding, fond blanc, box-shadow, height).
   Le design comptait sur les valeurs PAR DEFAUT du navigateur ;
   on RE-affirme donc les valeurs des maquettes, avec une
   specificite (0,2,0) qui gagne quel que soit l'ordre de chargement.
   ============================================================= */

/* ── QuickAdd : la grille de tailles doit tenir sur une ligne (7 cols) ── */
.ds-qa .ds-qa__sizes { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ds-qa .ds-qa__size {
  height: 38px; padding: 0; min-width: 0; box-sizing: border-box; line-height: 1;
  background: transparent; color: var(--ds-paper);
  border: 1.5px solid var(--ds-paper); border-radius: 8px; box-shadow: none;
  font-family: var(--font-display); font-weight: 500; font-size: 13px;
}
.ds-qa .ds-qa__size:hover:not(:disabled) { background: var(--ds-paper); color: var(--ds-ink); }
.ds-qa .ds-qa__size:disabled { opacity: .3; text-decoration: line-through; }
/* Pastilles coloris : restent des cercles (pas le padding bouton Storefront). */
.ds-qa .ds-qa__dot {
  width: 20px; height: 20px; min-width: 0; padding: 0; box-shadow: none;
  border: 1.5px solid var(--ds-paper); border-radius: 50%;
}
.ds-qa .ds-qa__dot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ds-ink), 0 0 0 3.5px var(--ds-paper); }

/* ── Volet panier : structure flex du design ──────────────────────
   Le JS rend ship/items/foot DANS [data-ds-cart-content]. On le rend
   transparent au flux (display:contents) pour que ces 3 zones soient
   des enfants directs du flex column .ds-cart → pied colle en bas,
   liste scrollable, etat vide centre (comme la maquette). */
.ds-cart__content { display: contents; }

/* Champ code promo du volet : transparent + bordure (pas le fond blanc Woo). */
.ds-cart .ds-cart__coupon input {
  background: transparent; color: var(--ds-paper); box-shadow: none;
  border: 1.5px solid rgba(250,250,250,0.3); border-radius: 8px;
}
.ds-cart .ds-cart__coupon input::placeholder { color: rgba(250,250,250,0.4); }
.ds-cart .ds-cart__coupon input:focus { outline: none; border-color: var(--ds-paper); }

/* ── Volet panier : liste des lignes réellement défilable ──────────────
   Les .ds-cart__item sont dans un flex column à hauteur bornée (flex:1) :
   par défaut flex-shrink:1 les ÉCRASE pour tout caser (illisible dès qu'il y
   a beaucoup de lignes). On fige leur hauteur → la liste déborde et .ds-cart__
   items (overflow:auto) scrolle. Bénin sur desktop (identique tant que ça tient). */
.ds-cart__item { flex-shrink: 0; }

/* ── Volet panier sur smartphone : le panneau fait 440px et débordait le
   viewport (contenu coupé à gauche/droite sur les tél < 440px). Pleine
   largeur ≤480px. Borné → desktop (440px) intact. ── */
@media (max-width: 480px) {
  .ds-cart { width: 100vw; border-left: none; }
}

/* ── Champs de formulaire des pages DS (contact, auth, compte, panier,
   checkout) : Storefront impose un fond clair + ombre sur <input>. On
   re-affirme le design (transparent + bordure fine), !important pour
   gagner sur le parent quel que soit l'ordre. On EXCLUT cases a cocher /
   radios (gardent accent-color) et on ne touche PAS <select> (qui porte
   l'image du chevron) ni <textarea> (deja corrects). ── */
.ds-field input:not([type="checkbox"]):not([type="radio"]),
.ds-coupon input,
.ds-authform .ds-field input {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ds-paper) !important;
  border: 1.5px solid rgba(250, 250, 250, 0.3) !important;
  border-radius: 8px !important;
}
.ds-field input:not([type="checkbox"]):not([type="radio"]):focus,
.ds-coupon input:focus {
  border-color: var(--ds-paper) !important;
  outline: none !important;
}
.ds-field input::placeholder { color: rgba(250, 250, 250, 0.35) !important; }
.ds-coupon input::placeholder { color: rgba(250, 250, 250, 0.4) !important; }

/* ── Tables du design (guide des tailles, commandes du compte) :
   Storefront impose un fond blanc + zébrures + texte sombre. On remet
   le tableau transparent et les couleurs du design (content.css/account.css
   gardent bordures + tailles ; ici on ne force QUE fond + couleur texte). ── */
.ds-sizetable, .ds-sizetable thead, .ds-sizetable tbody,
.ds-sizetable tr, .ds-sizetable th, .ds-sizetable td,
.ds-orders, .ds-orders thead, .ds-orders tbody,
.ds-orders tr, .ds-orders th, .ds-orders td {
  background: transparent !important;
}
.ds-sizetable td { color: rgba(250, 250, 250, 0.78) !important; }
.ds-sizetable thead th, .ds-sizetable tbody th { color: var(--ds-paper) !important; }
.ds-orders td { color: rgba(250, 250, 250, 0.85) !important; }
.ds-orders th { color: rgba(250, 250, 250, 0.5) !important; }

/* ── COMPTE WooCommerce (habillé au design account.css) ──────────
   Les items de nav et cartes sont des <a> : pas de soulignement.
   Les formulaires WooCommerce non maquettés (édition d'adresse) sont
   remis au thème sombre dans le panneau du compte. ── */
.ds-acct-nav__item, .ds-acct-card, .ds-addr__edit, .ds-orders .ds-pill { text-decoration: none !important; }
.ds-acct-nav__item:hover { text-decoration: none !important; }

/* ⚠️ Storefront pose `width:17.6%/76.4%` + `float` + `margin-right` sur
   .woocommerce-MyAccount-navigation / -content : dans notre grille .ds-account
   (250px 1fr) la nav tombe à ~44px (le fond ne couvre que les icônes, les
   libellés débordent) et le panneau ne remplit pas sa colonne. On laisse la
   grille piloter : largeur auto, pas de float, pas de marge. */
.ds-account .ds-acct-nav,
.ds-account .ds-acct-panel,
.ds-account .woocommerce-MyAccount-navigation,
.ds-account .woocommerce-MyAccount-content {
  width: auto !important; float: none !important; margin-left: 0 !important; margin-right: 0 !important;
}

/* Formulaire d'édition d'adresse (template WC par défaut) : champs sombres. */
.ds-acct-panel .woocommerce-address-fields input,
.ds-acct-panel .woocommerce-address-fields select,
.ds-acct-panel form .form-row input.input-text,
.ds-acct-panel form .form-row select,
.ds-acct-panel form .form-row textarea {
  background: transparent !important;
  color: var(--ds-paper) !important;
  border: 1.5px solid rgba(250, 250, 250, 0.3) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  height: 50px; padding: 0 14px;
}
.ds-acct-panel form .form-row textarea { height: auto; padding: 12px 14px; }
.ds-acct-panel .woocommerce-address-fields label,
.ds-acct-panel form .form-row label {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(250, 250, 250, 0.6);
}
.ds-acct-panel .button, .ds-acct-panel .woocommerce-Button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 26px; background: var(--ds-paper); color: var(--ds-ink) !important;
  border: none; border-radius: 6px; font-family: var(--font-display); font-weight: 500;
  text-decoration: none; cursor: pointer; margin-top: 10px;
}
.ds-acct-panel .button:hover, .ds-acct-panel .woocommerce-Button:hover { background: #e6e6e6; }
/* select2 (pays) — laissé au thème, fond sombre. */
.ds-acct-panel .select2-container--default .select2-selection--single {
  background: transparent; border: 1.5px solid rgba(250,250,250,0.3); height: 50px;
}

/* Bouton Google (Nextend) : aligne son rendu sur la maquette .ds-google. */
.ds-authform .nsl-container { margin-top: 4px; }
.ds-authform .nsl-container .nsl-button { border-radius: 6px !important; height: 56px !important; }

/* ── Onglets d'auth (.ds-tab = <button>) ──────────────────────────────
   Storefront stylise les <button> (fond, bordure, padding, surbrillance au
   survol) -> le hover des onglets devenait incorrect. On rétablit l'onglet
   « nu » du design (transparent, pas de bordure/ombre) sur tous les états.
   + « Mot de passe oublié » sur UNE seule ligne (sinon il passe à la ligne
   même en design pur : onglets flex:1 dans une carte de 470px). */
.ds-auth .ds-tab,
.ds-auth .ds-tab:hover,
.ds-auth .ds-tab:focus,
.ds-auth .ds-tab:active {
  background: none !important; background-color: transparent !important;
  border: none !important; box-shadow: none !important; outline: none !important;
  white-space: nowrap; position: relative; overflow: visible;
}
/* On garde la couleur du design : texte estompé au repos, paper au survol/actif. */
.ds-auth .ds-tab:hover, .ds-auth .ds-tab.is-active { color: var(--ds-paper) !important; }
/* Trait épais de l'onglet ACTIF (maquette : gros trait blanc sous l'onglet).
   Rendu via box-shadow inset = robuste (le ::after du design à bottom:-1.5px
   ne ressortait pas en live — cascade/positionnement Storefront). */
.ds-auth .ds-tab.is-active { box-shadow: inset 0 -3px 0 0 var(--ds-paper) !important; }
.ds-auth .ds-tab.is-active::after { display: none; }

/* =============================================================
   ⚠️ NEUTRALISATION GLOBALE DU CSS DYNAMIQUE CLAIR DE STOREFRONT
   -------------------------------------------------------------
   Storefront GÉNÈRE (selon la couleur de fond du Customizer, qui est
   claire) un CSS qui éclaircit tables, fieldsets, #order_review, #payment,
   payment_box, place-order… Sur notre site NOIR, ça blanchit des pans
   entiers (récap checkout, méthodes de paiement, tableaux). On force le
   fond transparent partout dans la coque sombre .ds-main (le fond sombre
   vient des cartes du design : .ds-review, .ds-sect, .ds-page…).
   ============================================================= */
.ds-main table:not(.has-background) th,
.ds-main table:not(.has-background) tbody td,
.ds-main table:not(.has-background) tbody tr:nth-child(2n) td,
.ds-main fieldset,
.ds-main fieldset legend,
.ds-main #order_review,
.ds-main #payment,
.ds-main #payment .payment_methods > li:not(.woocommerce-notice),
.ds-main #payment .payment_methods > li:not(.woocommerce-notice):hover,
.ds-main #payment .payment_methods > li .payment_box,
.ds-main #payment .place-order {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.ds-main fieldset { border-color: rgba(250, 250, 250, 0.15) !important; }

/* ── CHECKOUT WooCommerce (habillé au design) ───────────────────
   On garde le rendu WC (champs, paiement WooPayments, bouton) et on
   l'habille : grille 2 colonnes, champs sombres, paiement et bouton
   « Commander » au design. ── */

/* ⚠️ Storefront (woocommerce.css) FLOTTE le checkout :
   `#order_review{width:41%;float:right;clear:right}`, `.col2-set{float:left}`,
   `.form-row-first/last{float}`… → ça casse notre grille. On annule tout
   ça (!important) et on impose la grille .ds-checkout. */
.ds-checkout { display: grid !important; grid-template-columns: 1fr 400px; gap: 30px; align-items: start; }
/* WooCommerce/WooPayments injecte parfois un enfant direct du <form> (champ
   caché, conteneur express) qui occuperait la 1re cellule et décalerait tout.
   On PLACE explicitement les 2 colonnes ; les éléments parasites se rangent
   ailleurs (invisibles). */
.ds-checkout > .ds-checkout__main { grid-column: 1; grid-row: 1; }
.ds-checkout > .ds-review { grid-column: 2; grid-row: 1; }
/* Tout autre enfant direct (champ caché, bloc express WooPayments…) : pleine
   largeur, ne casse plus les 2 colonnes. */
.ds-checkout > *:not(.ds-checkout__main):not(.ds-review) { grid-column: 1 / -1; }
.ds-checkout > input[type="hidden"] { display: none; }
.ds-checkout #order_review,
.ds-checkout #order_review_heading,
.ds-checkout #customer_details,
.ds-checkout .ds-checkout__main,
.ds-checkout .ds-review,
.ds-checkout .col2-set,
.ds-checkout .woocommerce-checkout-review-order {
  width: auto !important; float: none !important; clear: none !important; margin-right: 0 !important;
}
.ds-checkout .form-row,
.ds-checkout .form-row-first,
.ds-checkout .form-row-last,
.ds-checkout .form-row-wide { float: none !important; width: auto !important; margin-right: 0 !important; }
.ds-checkout .form-row-wide { grid-column: 1 / -1; }
@media (max-width: 980px) {
  .ds-checkout { grid-template-columns: 1fr !important; }
  /* sinon le récap garde grid-column:2 (placement desktop) et part hors écran */
  .ds-checkout > .ds-checkout__main,
  .ds-checkout > .ds-review { grid-column: 1 !important; grid-row: auto !important; }
}

/* ⚠️ Storefront génère un CSS DYNAMIQUE (couleurs du Customizer) du type
   `#order_review{background:#fff}` qui BLANCHIT toute la colonne droite. On
   force le fond transparent (la carte sombre vient de .ds-review). Idem pour
   les tables/box internes. */
.ds-checkout #order_review,
.ds-checkout .woocommerce-checkout-review-order,
.ds-checkout #order_review table,
.ds-checkout #order_review .shop_table,
.ds-checkout #order_review tbody,
.ds-checkout #order_review tfoot,
.ds-checkout #order_review tr,
.ds-checkout #order_review th,
.ds-checkout #order_review td {
  background: transparent !important; background-color: transparent !important;
  box-shadow: none !important; color: var(--ds-paper);
}
.ds-checkout .woocommerce-billing-fields__field-wrapper,
.ds-checkout .woocommerce-shipping-fields__field-wrapper,
.ds-checkout .woocommerce-additional-fields__field-wrapper {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.ds-checkout .form-row { margin: 0; padding: 0; float: none; width: auto; }
.ds-checkout .form-row-wide,
.ds-checkout .form-row.notes,
.ds-checkout .form-row.woocommerce-validated.form-row-wide { grid-column: 1 / -1; }
.ds-checkout .woocommerce-billing-fields > h3,
.ds-checkout .woocommerce-additional-fields > h3,
.ds-checkout #ship-to-different-address {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: 0.05em; text-transform: uppercase; margin: 0 0 14px; color: var(--ds-paper);
}
.ds-checkout #ship-to-different-address { margin: 20px 0 12px; }
.ds-checkout .form-row > label {
  display: block; margin-bottom: 7px;
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(250, 250, 250, 0.6);
}
.ds-checkout .form-row .required { color: rgba(250, 250, 250, 0.6); border: none; }
.ds-checkout .form-row input.input-text,
.ds-checkout .form-row textarea,
.ds-checkout .form-row select {
  width: 100%; height: 50px; padding: 0 14px;
  background: transparent !important; color: var(--ds-paper) !important;
  border: 1.5px solid rgba(250, 250, 250, 0.3) !important; border-radius: 8px !important;
  box-shadow: none !important; font-family: var(--font-sans); font-size: 15px;
}
.ds-checkout .form-row textarea { height: auto; min-height: 90px; padding: 12px 14px; }
.ds-checkout .form-row input.input-text:focus,
.ds-checkout .form-row textarea:focus { border-color: var(--ds-paper) !important; outline: none; }
.ds-checkout .form-row input::placeholder, .ds-checkout .form-row textarea::placeholder { color: rgba(250, 250, 250, 0.35); }
/* select2 (pays) du checkout : conteneur sombre. */
.ds-checkout .select2-container--default .select2-selection--single {
  background: transparent; border: 1.5px solid rgba(250, 250, 250, 0.3); border-radius: 8px; height: 50px;
}
.ds-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ds-paper); line-height: 50px; }
.ds-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 48px; }

/* Méthodes de livraison dans le récap. */
.ds-checkout__shipping ul#shipping_method { margin: 0; padding: 0; list-style: none; width: 100%; }
.ds-checkout__shipping #shipping_method li { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.ds-checkout__shipping label { color: rgba(250, 250, 250, 0.85); }

/* Bloc paiement : voir « Section 4 » plus bas (cartes .ds-opt + .ds-pay-card). */
.ds-checkout .woocommerce-terms-and-conditions-wrapper { margin: 16px 0; font-size: 13px; color: rgba(250, 250, 250, 0.7); }
.ds-checkout .woocommerce-terms-and-conditions-wrapper a { color: var(--ds-paper); }
.ds-checkout #payment .form-row.place-order { margin: 16px 0 0; padding: 0; }
.ds-checkout #place_order {
  width: 100%; height: 64px; font-size: 19px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ds-paper); color: var(--ds-ink) !important; border: none; border-radius: 6px;
  font-family: var(--font-display); font-weight: 500; cursor: pointer; box-shadow: none;
  transition: background .12s;
}
.ds-checkout #place_order:hover { background: #e6e6e6; }

/* Section 3 — cartes Mode de livraison : le radio natif est masqué, la
   carte .ds-opt (label) sert de cible cliquable (cf. shop.css pour .ds-opt). */
.ds-opt { cursor: pointer; }
.ds-opt__input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

/* ── Section 4 · Méthodes de paiement ──────────────────────────────────
   Maquette : chaque passerelle = carte-option .ds-opt (radio rond custom +
   libellé + sous-titre) ; quand sélectionnée, panneau .ds-pay-card dessous
   avec les champs hébergés (élément Stripe de WooPayments = conforme PCI).
   Le markup vient de woocommerce/checkout/payment-method.php. .ds-opt,
   .ds-opt__radio/__body/__label/__meta et .ds-pay-card = styles design (shop.css). */

/* ⚠️ Storefront (CSS dynamique) pose un fond clair sur #payment et ses <li> :
   on force le sombre du design. */
.ds-checkout #payment, .ds-checkout .ds-payment { background: transparent !important; }
.ds-payment ul.payment_methods,
.ds-checkout #payment ul.payment_methods {
  border: none; padding: 0; margin: 14px 0 0; list-style: none;
  display: flex; flex-direction: column; gap: 10px;
}
/* La passerelle = wrapper transparent (radio masqué + carte + panneau empilés). */
.ds-payment li.wc_payment_method,
.ds-checkout #payment .payment_methods > li:not(.woocommerce-notice) {
  display: flex; flex-direction: column; gap: 12px;
  background: transparent !important; background-color: transparent !important;
  border: none; border-radius: 0; padding: 0; margin: 0;
}
/* État sélectionné de la carte = radio masqué :checked + .ds-opt
   (mirroir de shop.css .ds-opt.is-sel). */
.ds-payment .ds-opt__input:checked + .ds-opt { border-color: var(--ds-paper); background: rgba(250, 250, 250, 0.04); }
.ds-payment .ds-opt__input:checked + .ds-opt .ds-opt__radio { border-color: var(--ds-paper); }
.ds-payment .ds-opt__input:checked + .ds-opt .ds-opt__radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ds-paper); }
.ds-payment .ds-opt__input:focus-visible + .ds-opt { border-color: rgba(250, 250, 250, 0.6); }
/* Libellé + sous-titre empilés (la maquette utilise des blocs). */
.ds-payment .ds-opt__label, .ds-payment .ds-opt__meta { display: block; }
/* Icônes de marque (get_icon) : absentes de la maquette (texte seul). */
.ds-payment li.wc_payment_method > .ds-opt img { display: none !important; }
/* Panneau .ds-pay-card = champs Stripe hébergés, en sombre. */
.ds-payment .payment_box.ds-pay-card,
.ds-checkout #payment .payment_box.ds-pay-card {
  margin: 0; background: transparent !important; color: rgba(250, 250, 250, 0.7);
  font-size: 13px; line-height: 1.5;
}
.ds-payment .ds-pay-card::before { display: none; }
.ds-payment .ds-pay-card input.input-text,
.ds-payment .ds-pay-card .wc-credit-card-form-card-number,
.ds-payment .ds-pay-card .wcpay-card-mount,
.ds-payment .ds-pay-card .wc-block-components-text-input input {
  background: transparent !important; color: var(--ds-paper) !important;
  border: 1.5px solid rgba(250, 250, 250, 0.3) !important; border-radius: 8px !important;
}

/* « + J'ai un code promo » dans le récap. */
.ds-review__coupon-toggle { display: inline-block; color: var(--ds-paper); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; cursor: pointer; }
.ds-review__coupon { margin-top: 12px; }
.ds-review__coupon .ds-coupon { gap: 8px; }

/* Conditions + bouton « Payer » (.ds-place géré par shop.css). */
.ds-place { margin-top: 4px; }
.ds-place .woocommerce-terms-and-conditions-wrapper { margin: 0 0 14px; }

/* La maquette bake « (optionnel) » dans les libellés -> on masque le
   « (facultatif) » auto-ajouté par WooCommerce aux champs optionnels. */
.ds-checkout .optional { display: none !important; }

/* Coupon du récap : champ sombre + bouton EN LIGNE (pas blanc, pas en dessous). */
.ds-review__coupon .ds-coupon, .ds-page form.checkout_coupon { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; }
.ds-review__coupon input, .ds-page form.checkout_coupon input.input-text {
  flex: 1; min-width: 0; height: 48px; padding: 0 14px;
  background: transparent !important; color: var(--ds-paper) !important;
  border: 1.5px solid rgba(250, 250, 250, 0.3) !important; border-radius: 8px !important; box-shadow: none !important;
}
.ds-review__coupon input::placeholder { color: rgba(250, 250, 250, 0.4) !important; }
.ds-review__coupon .ds-pill, .ds-page form.checkout_coupon .ds-pill { flex-shrink: 0; height: 48px; padding: 0 22px; }

/* Paiement : case « enregistrer la carte » / méthodes enregistrées =
   absentes de la maquette. */
.ds-payment .woocommerce-SavedPaymentMethods-saveNew,
.ds-payment .wc-saved-payment-methods + p,
.ds-payment p.save-payment-method,
.ds-payment .woocommerce-SavedPaymentMethods + .form-row { display: none !important; }

/* Coupon checkout + prompt connexion invité (rendus AVANT le .ds-page par
   WooCommerce) : on les habille et on leur donne la gouttière du design. */
.ds-main .woocommerce-form-coupon-toggle,
.ds-main > .woocommerce > .woocommerce-info,
.ds-main .woocommerce-form-login-toggle {
  padding: 16px var(--gut) 0; margin: 0;
}
.ds-main .woocommerce-form-coupon-toggle .woocommerce-info,
.ds-main .woocommerce-form-login-toggle .woocommerce-info {
  background: var(--ds-ink); border: none; border-radius: 10px; padding: 14px 18px;
  color: rgba(250, 250, 250, 0.75); font-size: 14px;
}
.ds-main .woocommerce-info::before { display: none; }
.ds-main .showcoupon, .ds-main .woocommerce-info a { color: var(--ds-paper); }
.ds-page .checkout_coupon { background: var(--ds-ink); border: none; border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; }
.ds-page .checkout_coupon .form-row { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ds-page .checkout_coupon .button {
  display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 22px;
  background: var(--ds-paper); color: var(--ds-ink) !important; border: none; border-radius: 8px;
  font-family: var(--font-display); font-weight: 500; cursor: pointer;
}
/* Form de connexion invité au checkout (si affiché) : champs sombres. */
.ds-page form.woocommerce-form-login .input-text {
  background: transparent !important; color: var(--ds-paper) !important;
  border: 1.5px solid rgba(250, 250, 250, 0.3) !important; border-radius: 8px !important; height: 50px;
}

/* ── Newsletter : input transparent dans la boite paper (pas le fond Woo). ── */
.ds-newsletter__form input {
  background: transparent; border: none; box-shadow: none; outline: none;
}
/* Enveloppe du bouton : un style svg herite l'ecrasait (~11px de large).
   On force la taille des maquettes et on empeche le flex de la comprimer. */
.ds-newsletter__form button svg {
  width: 20px; height: 20px; flex-shrink: 0;
}

/* ====================================================================
   Page « Cars collection » (ProductBlock) — raccords Storefront/Woo
   ==================================================================== */
/* Icône loupe : Storefront/Woo écrase la largeur du <svg> à 0 → rétablie
   (la vraie icône Material zoom_in de la maquette devient visible). */
.ds-pb__zoom svg { width: 22px; height: 22px; flex-shrink: 0; }
/* 7 pavés tailles : colonnes ÉGALES sur toute la largeur du texte. Storefront
   ajoute du padding aux <button> → 1fr (= minmax(auto,1fr)) gonflait « 2XL/3XL ».
   minmax(0,1fr) + padding neutralisé = 7 colonnes identiques (comme le design). */
.ds-pb__sizes { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ds-pb__sizes .ds-size { padding: 0; min-width: 0; }
/* Index capsule (Sideways/Engine/Formula/Stunt) : sticky juste sous le header. */
.ds-index { position: -webkit-sticky; position: sticky; top: var(--header-h, 75px); z-index: 55; }
body.admin-bar .ds-index { top: calc(var(--header-h, 75px) + 32px); }
@media screen and (max-width: 782px) { body.admin-bar .ds-index { top: calc(var(--header-h, 75px) + 46px); } }
/* Ancre produit (#p-…) : dégager le header (75px) + l'index sticky (~86px)
   pour que le bloc ciblé apparaisse dessous, pas masqué. */
.ds-pb { scroll-margin-top: calc(var(--header-h, 75px) + 90px); }
body.admin-bar .ds-pb { scroll-margin-top: calc(var(--header-h, 75px) + 90px + 32px); }

/* Sous-titre du héros (home + cars) : les phrases SEO sont longues → on lève
   le max-width:480px du design pour qu'elles tiennent sur UNE ligne au desktop
   (retour à la ligne naturel seulement sur petit écran). */
.ds-hero__sub { max-width: none; }

/* Phrase d'intro de la page Cars collection (SEO + accroche), entre l'index
   capsule et le 1er produit. Fond de page sombre → texte clair. UNE ligne au
   desktop (pas de max-width), retour à la ligne seulement sur petit écran. */
.ds-cars-intro {
  margin: 0 0 34px;
  color: rgba(250, 250, 250, 0.72);
  font-size: 17px;
  line-height: 1.55;
  text-transform: uppercase;   /* cohérence avec le titre capitales de l'accueil */
  letter-spacing: 0.02em;
}
@media (max-width: 600px) {
  .ds-cars-intro { font-size: 15px; margin-bottom: 26px; }
}

/* « × » de fermeture du volet panier : Storefront impose du padding/une largeur
   aux <button> → le border-radius:50% s'appliquait à un rectangle = ovale moche
   au survol. On reforce un carré 36×36 (cercle parfait) + padding neutralisé. */
.ds-cart__close {
  width: 36px !important;
  height: 36px !important;
  min-width: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  flex: 0 0 auto;
}

/* Pavé produit VEDETTE (home) : une vraie image (hauteur intrinsèque) faisait
   grandir la rangée de la grille .ds-feat → le panneau s'étirait au-delà des
   380px et le bas (pastilles coloris + bouton « Ajouter ») était coupé par
   overflow:hidden. On verrouille la rangée à la hauteur du pavé : l'image
   remplit en object-fit:cover, le panneau garde sa hauteur, tout reste visible.
   (Les tuiles ont déjà une hauteur d'image fixe .ds-tile__img:300px.) */
.ds-feat { grid-template-rows: minmax(0, 1fr); }
@media (max-width: 860px) { .ds-feat { grid-template-rows: auto; } }

/* ── Héro : image de fond plein cadre (optionnelle, éditable dans le bloc) ──
   Si une image est définie : elle couvre tout le héro (object-fit:cover) avec
   un voile sombre par-dessus (dégradé plus marqué à gauche, où est le texte)
   pour garder « From Sketch To Street » lisible. Sans image : héro inchangé. */
.ds-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.ds-hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.38) 55%, rgba(0,0,0,0.24) 100%);
}
.ds-hero--has-bg .ds-hero__body { position: relative; z-index: 2; }

/* =============================================================
   POPUP « GUIDE DES TAILLES » (raccourci Cars collection)
   -------------------------------------------------------------
   Markup + styles PORTÉS VERBATIM du design (home.jsx SizeGuideModal
   / styles/home.css .ds-sgm*). Seule adaptation React→vanilla :
   rendu masqué par défaut, affiché via .is-open (le composant React
   n'était monté que lorsqu'ouvert). Le panneau est déjà responsive
   (width:min(460px,100%) + max-height + scroll) → OK mobile.
   ============================================================= */
.ds-noscroll { overflow: hidden; }

.ds-sgm {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.6);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.ds-sgm.is-open { display: flex; animation: ds-sgm-fade .18s ease; }
@keyframes ds-sgm-fade { from { opacity: 0; } to { opacity: 1; } }
.ds-sgm__panel {
  position: relative;
  width: min(460px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--ds-paper);
  color: var(--ds-ink);
  border-radius: 16px;
  padding: 34px 34px 30px;
  animation: ds-sgm-rise .24s cubic-bezier(.2,.8,.2,1);
}
@keyframes ds-sgm-rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.ds-sgm__close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; cursor: pointer;
  font-size: 30px; line-height: 1; font-weight: 300; color: var(--ds-ink);
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
}
.ds-sgm__close:hover { opacity: 0.55; }
.ds-sgm__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 24px; text-transform: uppercase; letter-spacing: -0.01em;
  margin: 0 0 6px;
  /* Le thème sombre met les titres (h3) en blanc ; ici le panneau est clair
     → on réaffirme l'encre foncée du design. */
  color: var(--ds-ink);
}
.ds-sgm__sub { font-size: 13px; color: rgba(38,38,38,0.62); margin: 0 0 20px; }
.ds-sgm__tablewrap { margin-bottom: 16px; }
.ds-sgm__table { width: 100%; border-collapse: collapse; }
.ds-sgm__table th, .ds-sgm__table td {
  padding: 11px 8px; text-align: center; font-size: 14px;
  border-bottom: 1px solid rgba(38,38,38,0.12);
}
.ds-sgm__table thead th {
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-ink);
  border-bottom: 1.5px solid rgba(38,38,38,0.35);
}
.ds-sgm__table tbody th {
  font-family: var(--font-display); font-weight: 700; text-align: left; color: var(--ds-ink);
}
.ds-sgm__table tbody td { color: rgba(38,38,38,0.72); }
.ds-sgm__table tbody tr:last-child th, .ds-sgm__table tbody tr:last-child td { border-bottom: none; }
.ds-sgm__tip {
  font-size: 13px; line-height: 1.55; color: rgba(38,38,38,0.7);
  background: rgba(38,38,38,0.05); border-radius: 10px;
  padding: 13px 15px; margin: 0 0 22px;
}
.ds-sgm__full {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ds-ink); text-decoration: none;
}
.ds-sgm__full svg { width: 16px; height: 16px; transition: transform .2s ease; }
.ds-sgm__full:hover svg { transform: translateX(4px); }

/* =============================================================
   FOCUS — AUCUN CADRE VISIBLE (demande Manu, 2026-07-01)
   -------------------------------------------------------------
   Storefront pose un outline violet #7f54b3 (rgb 127,84,179) sur
   :focus des liens/boutons. Manu veut ZÉRO cadre actif, partout,
   aucune couleur. On retire l'outline sur tous les éléments et
   tous les états de focus. (On ne touche PAS aux box-shadow : ce
   sont des éléments de design, ex. trait de l'onglet actif.)
   NB accessibilité : supprime l'indicateur de focus clavier.
   ============================================================= */
*:focus,
*:focus-visible,
*:focus-within {
  outline: none !important;
}

/* =============================================================
   PIED : bloc légal (menu ds_footer_legal + ligne © / paiements)
   -------------------------------------------------------------
   .ds-footer__legal = conteneur pleine largeur en COLONNE : le menu
   légal (aligné à droite) PUIS la barre © / moyens de paiement. Le
   trait (border-top) est sur la barre → il passe juste sous le menu
   (petit écart), plus de grosse marge. Éditable dans BO > Apparence
   > Menus (repli = pages légales). Mobile : menu aligné à gauche + wrap.
   ============================================================= */
.ds-footer .ds-footer__legal {
  grid-column: 1 / -1;
  margin-top: 30px; padding-top: 0; border-top: none;
  display: flex; flex-direction: column; align-items: stretch;
  justify-content: flex-start; gap: 18px;
}
.ds-footer .ds-footer__legalbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
  padding-top: 22px; border-top: 1px solid rgba(250,250,250,0.10);
  font-size: 12px; color: var(--ds-paper); letter-spacing: 0.05em;
}
.ds-footer .ds-footer__legallist {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: row; flex-wrap: wrap;
  justify-content: flex-end; align-items: center; gap: 10px 22px;
}
.ds-footer .ds-footer__legallist li { margin: 0; }
.ds-footer .ds-footer__legallist a {
  color: var(--ds-paper); text-decoration: none;
  font-size: 12px; letter-spacing: 0.05em; opacity: 0.7;
}
.ds-footer .ds-footer__legallist a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 560px) {
  .ds-footer .ds-footer__legallist { justify-content: flex-start; }
}