/* ==========================================================================
   Atelier Henri Dejeant — page d'accueil
   Thème enfant hummingbird-child · assets/css/hd.css
   Lié directement depuis templates/_partials/head.tpl.
   Tout est préfixé .hd- et portée sous .hd-page pour ne rien casser ailleurs.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Polices auto-hébergées (RGPD) — fichiers dans assets/fonts/

   Six graisses, et seulement celles qui servent :
     Newsreader 300         les grands titres
     Newsreader 300 italic  « journal déchiré » dans le héros
     Newsreader 400         le texte courant
     Archivo 400            les champs de formulaire et les liens du pied
     Archivo 500            les cartels, boutons, libellés et le menu
     Archivo 700            les titres de blocs du pied et le logo
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Newsreader HD";
  src: url("../fonts/newsreader-v26-latin-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader HD";
  src: url("../fonts/newsreader-v26-latin-300italic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader HD";
  src: url("../fonts/newsreader-v26-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo HD";
  src: url("../fonts/archivo-v25-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo HD";
  src: url("../fonts/archivo-v25-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo HD";
  src: url("../fonts/archivo-v25-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* L'en-tête et le pied héritent de --hd-sans défini sur :root par
   layout-editorial.css, qui vaut Inter et vient de Google. On le ramène
   sur la police de l'atelier pour que tout le site parle d'une voix. */
:root { --hd-sans: "Archivo HD", system-ui, -apple-system, "Segoe UI", sans-serif; }

/* --------------------------------------------------------------------------
   Jetons
   -------------------------------------------------------------------------- */
.hd-page {
  --hd-ground:    #F1F1EC;
  --hd-ground-2:  #E8E8E1;
  --hd-rule:      #CDCDC3;
  --hd-ink:       #17181A;
  --hd-ink-soft:  #5B5D57;
  --hd-ink-faint: #8A8C84;
  --hd-glow:      #EDC488;
  --hd-glow-core: #FFE7BC;

  --hd-serif: "Newsreader HD", Georgia, "Times New Roman", serif;
  --hd-sans:  "Archivo HD", system-ui, -apple-system, "Segoe UI", sans-serif;

  --hd-max: 1260px;
  --hd-gutter: clamp(20px, 5vw, 72px);

  background: var(--hd-ground);
  color: var(--hd-ink);
  font-family: var(--hd-serif);
  font-size: 17px;
  line-height: 1.62;
}

/* La home est pleine largeur : on neutralise les marges du thème parent. */
.page-content--home.hd-page { padding: 0; margin: 0; }

.hd-wrap {
  width: 100%;
  max-width: var(--hd-max);
  margin-inline: auto;
  padding-inline: var(--hd-gutter);
}

/* --------------------------------------------------------------------------
   Typographie
   -------------------------------------------------------------------------- */
.hd-page h1,
.hd-page h2,
.hd-page h3 {
  margin: 0;
  font-family: var(--hd-serif);
  font-weight: 300;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.hd-display {
  font-size: clamp(2.5rem, 6.2vw, 5rem);
  line-height: 1.03;
}
.hd-display em { font-style: italic; font-weight: 300; }

.hd-h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.08; }
.hd-h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.2; }

.hd-page p { margin: 0 0 1em; max-width: 62ch; }
.hd-page p:last-child { margin-bottom: 0; }

.hd-lede {
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.55;
  color: var(--hd-ink-soft);
  max-width: 46ch;
}
.hd-muted { color: var(--hd-ink-soft); }
.hd-mt { margin-top: .7rem; }

.hd-cartel {
  display: block;
  font-family: var(--hd-sans);
  font-size: .695rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hd-ink-faint);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.hd-page .hd-btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--hd-sans);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .95em 1.6em;
  border: 1px solid var(--hd-ink);
  border-radius: 0;
  background: var(--hd-ink);
  color: var(--hd-ground);
  text-decoration: none;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.hd-page .hd-btn:hover { background: transparent; color: var(--hd-ink); }

.hd-page .hd-btn--ghost {
  background: transparent;
  color: var(--hd-ink);
  border-color: var(--hd-rule);
}
.hd-page .hd-btn--ghost:hover {
  background: var(--hd-ink);
  color: var(--hd-ground);
  border-color: var(--hd-ink);
}

.hd-page a:focus-visible,
.hd-page button:focus-visible {
  outline: 2px solid var(--hd-ink);
  outline-offset: 3px;
}

/* Nommé hd-home-actions et non hd-actions : .hd-actions existe déjà dans
   layout-editorial.css, où il porte la zone compte/panier de l'en-tête. */
.hd-home-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --------------------------------------------------------------------------
   Héros
   -------------------------------------------------------------------------- */
.hd-hero { padding-block: clamp(2.4rem, 6vw, 5rem) clamp(2.8rem, 7vw, 5.6rem); }

.hd-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hd-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  align-items: flex-start;
}
/* L'en-tête éditorial fixe .hd-logo etc. ; rien ici ne doit en sortir. */
@media (max-width: 900px) {
  .hd-hero__grid { grid-template-columns: 1fr; }
}

.hd-rise { animation: hd-rise .9s cubic-bezier(.2,.7,.25,1) both; }
.hd-rise-2 { animation-delay: .09s; }
.hd-rise-3 { animation-delay: .18s; }
.hd-rise-4 { animation-delay: .27s; }
@keyframes hd-rise { from { transform: translateY(14px); } to { transform: none; } }

/* --------------------------------------------------------------------------
   Emplacements photo
   -------------------------------------------------------------------------- */
.hd-shot {
  position: relative;
  background: var(--hd-ground-2);
  border: 1px solid var(--hd-rule);
  color: var(--hd-ink-faint);
  aspect-ratio: 4 / 5;
  max-width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.hd-shot--wide { aspect-ratio: 5 / 4; }
.hd-shot--tall { aspect-ratio: 3 / 4; }

.hd-shot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  width: 120%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(.72);
  background: radial-gradient(circle,
      color-mix(in srgb, var(--hd-glow-core) 88%, transparent) 0%,
      color-mix(in srgb, var(--hd-glow) 55%, transparent) 28%,
      transparent 62%);
  opacity: .34;
  transition: opacity .8s ease, transform .8s ease;
}
.hd-shot:hover::before { opacity: .82; transform: translate(-50%, -50%) scale(.95); }

.hd-shot svg { position: relative; width: 58%; height: auto; }
.hd-shot svg * { vector-effect: non-scaling-stroke; }

.hd-shot img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hd-shot__note {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: .6rem .8rem;
  font-family: var(--hd-sans);
  font-size: .58rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--hd-ink-faint);
  background: color-mix(in srgb, var(--hd-ground) 78%, transparent);
  border-top: 1px solid var(--hd-rule);
  border-right: 1px solid var(--hd-rule);
}

/* --------------------------------------------------------------------------
   Bandeau de faits
   -------------------------------------------------------------------------- */
.hd-facts { border-block: 1px solid var(--hd-rule); }

.hd-facts__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hd-fact {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding-block: clamp(1.4rem, 2.6vw, 2.2rem);
  padding-inline: 0 clamp(1rem, 3vw, 2.6rem);
}
.hd-fact + .hd-fact {
  border-left: 1px solid var(--hd-rule);
  padding-inline: clamp(1rem, 3vw, 2.6rem);
}
.hd-fact__value { font-size: 1.12rem; line-height: 1.35; }

@media (max-width: 820px) {
  .hd-facts__grid { grid-template-columns: 1fr; }
  .hd-fact + .hd-fact {
    border-left: 0;
    border-top: 1px solid var(--hd-rule);
    padding-inline: 0;
  }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.hd-section { padding-block: clamp(3.2rem, 8vw, 6.6rem); }
.hd-section--tight { padding-top: 0; }

.hd-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.8rem, 3.5vw, 3rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hd-rule);
}
.hd-sec-foot { margin-top: clamp(2rem, 4vw, 3.2rem); }

/* --------------------------------------------------------------------------
   Grille produit — habillage du miniature Hummingbird
   -------------------------------------------------------------------------- */
.hd-products .products,
.hd-products .product-list,
.hd-products .row {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
  gap: clamp(1.6rem, 3vw, 2.8rem) clamp(1.2rem, 2.4vw, 2rem);
  margin: 0;
}
.hd-products [class*="col-"] { width: 100%; max-width: 100%; padding: 0; flex: none; }
.hd-products h2,
.hd-products .products-section-title { display: none; }

.hd-products .product-miniature {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  height: auto;
}
.hd-products .product-miniature__inner {
  display: flex;
  flex-direction: column;
  gap: .95rem;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.hd-products .product-miniature__top {
  position: relative;
  background: var(--hd-ground-2);
  border: 1px solid var(--hd-rule);
  border-radius: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  transition: border-color .4s ease;
}
.hd-products .product-miniature:hover .product-miniature__top { border-color: var(--hd-ink-faint); }
.hd-products .product-miniature__top img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  mix-blend-mode: multiply;
}

/* Cartel : nom à gauche, prix à droite sur la même ligne, puis les
   déclinaisons, puis l'action. Les enfants de __infos remontent dans la
   grille via display:contents, donc chacun est placé explicitement —
   sinon les nuanciers prennent la colonne du prix. */
.hd-products .product-miniature__bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .35rem 1rem;
  align-items: baseline;
  padding: 0;
}
.hd-products .product-miniature__infos { display: contents; }

.hd-products .product-miniature__title {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--hd-serif);
  font-size: 1.22rem;
  line-height: 1.2;
  font-weight: 300;
  color: var(--hd-ink);
  text-decoration: none;
}
.hd-products .product-miniature__prices {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-family: var(--hd-sans);
  font-size: .9rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--hd-ink);
}
.hd-products .product-miniature__price { font-size: .9rem; font-weight: 400; }
.hd-products .product-miniature__variants {
  grid-column: 1 / -1;
  grid-row: 2;
}
.hd-products .product-miniature__actions {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: .45rem;
}
/* Sur l'accueil on ne choisit pas la quantité : on regarde, on clique. */
.hd-products .quantity-button { display: none !important; }
.hd-products .product-miniature__actions .btn {
  font-family: var(--hd-sans);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 0;
  border: 1px solid var(--hd-rule);
  background: transparent;
  color: var(--hd-ink-soft);
  padding: .7em 1.2em;
}
.hd-products .product-miniature__actions .btn:hover {
  background: var(--hd-ink);
  border-color: var(--hd-ink);
  color: var(--hd-ground);
}

/* --------------------------------------------------------------------------
   La matière
   -------------------------------------------------------------------------- */
.hd-matiere {
  background: var(--hd-ground-2);
  border-block: 1px solid var(--hd-rule);
}
.hd-matiere__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hd-matiere .hd-shot { background: var(--hd-ground); }
@media (max-width: 900px) {
  .hd-matiere__grid { grid-template-columns: 1fr; }
}

.hd-recette {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  border-top: 1px solid var(--hd-rule);
}
.hd-recette li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding-block: .72rem;
  border-bottom: 1px solid var(--hd-rule);
}
.hd-part {
  font-family: var(--hd-sans);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hd-ink-faint);
}

/* --------------------------------------------------------------------------
   Le geste
   -------------------------------------------------------------------------- */
.hd-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 186px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.4rem);
}
.hd-step {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hd-rule);
}
.hd-step:first-child { border-top: 2px solid var(--hd-ink); }
.hd-step__n {
  font-family: var(--hd-sans);
  font-size: .7rem;
  letter-spacing: .18em;
  color: var(--hd-ink-faint);
  font-variant-numeric: tabular-nums;
}
.hd-step h3 { font-size: 1.18rem; }
.hd-step p { font-size: .95rem; color: var(--hd-ink-soft); margin: 0; }

/* --------------------------------------------------------------------------
   Professionnels
   -------------------------------------------------------------------------- */
.hd-pro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.8rem, 4vw, 3rem);
  border: 1px solid var(--hd-rule);
  background: var(--hd-ground-2);
}
@media (max-width: 820px) {
  .hd-pro { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Lettre
   -------------------------------------------------------------------------- */
.hd-lettre {
  background: var(--hd-ink);
  color: var(--hd-ground);
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--hd-rule);
}
.hd-lettre .hd-cartel { color: color-mix(in srgb, var(--hd-ground) 55%, transparent); }
.hd-lettre .hd-h2 { color: var(--hd-ground); }
.hd-lettre__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: center;
}
@media (max-width: 820px) {
  .hd-lettre__grid { grid-template-columns: 1fr; }
}
/* Le module d'inscription apporte ses propres fonds clairs et ses cartes.
   On neutralise tout ce qui n'est pas un champ ou un bouton, sans toucher
   aux textes de consentement, qui doivent rester lisibles. */
.hd-lettre__form,
.hd-lettre__form div,
.hd-lettre__form section,
.hd-lettre__form form,
.hd-lettre__form aside,
.hd-lettre__form label,
.hd-lettre__form p,
.hd-lettre__form span {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
}
.hd-lettre__form > div,
.hd-lettre__form > section,
.hd-lettre__form > div > div { padding: 0 !important; margin: 0 !important; }

.hd-lettre__form h1,
.hd-lettre__form h2,
.hd-lettre__form h3,
.hd-lettre__form h4 { display: none !important; }

.hd-lettre__form form {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  align-items: center;
}

.hd-lettre__form p,
.hd-lettre__form label {
  font-family: var(--hd-sans);
  font-size: .74rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--hd-ground) 60%, transparent) !important;
  max-width: none;
}

.hd-lettre__form input[type="email"],
.hd-lettre__form input[type="text"] {
  flex: 1 1 200px;
  min-width: 0;
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--hd-ground) 40%, transparent) !important;
  border-radius: 0 !important;
  color: var(--hd-ground) !important;
  font-family: var(--hd-sans);
  font-size: .88rem;
  padding: .8em .2em;
}
.hd-lettre__form input::placeholder {
  color: color-mix(in srgb, var(--hd-ground) 45%, transparent) !important;
}
.hd-lettre__form input:focus {
  outline: none;
  border-bottom-color: var(--hd-glow) !important;
  box-shadow: none !important;
}
.hd-lettre__form button,
.hd-lettre__form .btn,
.hd-lettre__form input[type="submit"] {
  font-family: var(--hd-sans);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-radius: 0 !important;
  background: var(--hd-ground) !important;
  border: 1px solid var(--hd-ground) !important;
  color: var(--hd-ink) !important;
  padding: .9em 1.6em;
  cursor: pointer;
}
.hd-lettre__form button:hover,
.hd-lettre__form .btn:hover {
  background: none !important;
  color: var(--hd-ground) !important;
}

/* --------------------------------------------------------------------------
   Révélations au défilement
   Translation seule : tout le contenu est lisible dès le premier rendu.
   -------------------------------------------------------------------------- */
.hd-reveal { transition: transform .85s cubic-bezier(.2,.7,.25,1); }
.hd-js .hd-reveal:not(.hd-in) { transform: translateY(18px); }

@media (prefers-reduced-motion: reduce) {
  .hd-page *,
  .hd-page *::before,
  .hd-page *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
  }
  .hd-js .hd-reveal:not(.hd-in) { transform: none; }
}

/* ==========================================================================
   PAGE CONTACT
   Le formulaire vient du module contactform : on neutralise son habillage
   Bootstrap puis on le rhabille, plutôt que de surcharger son gabarit —
   celui-ci est hors de portée d'écriture pour l'instant.
   ========================================================================== */

.hd-contact { padding-block: clamp(2.2rem, 5vw, 4rem) clamp(3rem, 7vw, 5.5rem); }

.hd-contact__head { max-width: 62ch; }
.hd-contact__head .hd-lede { max-width: 54ch; }

.hd-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  margin-top: clamp(2.2rem, 5vw, 3.6rem);
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--hd-rule);
}
@media (max-width: 900px) {
  .hd-contact__grid { grid-template-columns: 1fr; }
}

/* ---------- colonne de repères ---------- */

.hd-contact__aside {
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 3vw, 2.4rem);
}
.hd-contact__block { display: flex; flex-direction: column; gap: .7rem; }

.hd-contact__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hd-rule);
}
.hd-contact__list li {
  padding-block: .62rem;
  border-bottom: 1px solid var(--hd-rule);
  font-size: .97rem;
  line-height: 1.45;
}
.hd-contact__small { font-size: .95rem; line-height: 1.55; }

/* Le module d'informations de contact apporte ses cartes et ses icônes. */
.hd-contact__info,
.hd-contact__info div,
.hd-contact__info section,
.hd-contact__info ul,
.hd-contact__info li,
.hd-contact__info p,
.hd-contact__info span {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  color: var(--hd-ink) !important;
  font-family: var(--hd-serif) !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
}
.hd-contact__info h1,
.hd-contact__info h2,
.hd-contact__info h3,
.hd-contact__info h4,
.hd-contact__info .material-icons,
.hd-contact__info i,
.hd-contact__info svg { display: none !important; }

.hd-contact__info ul { display: flex !important; flex-direction: column; gap: .8rem; }
.hd-contact__info a {
  color: var(--hd-ink) !important;
  text-decoration: none;
  border-bottom: 1px solid var(--hd-rule);
  overflow-wrap: anywhere;
}
.hd-contact__info a:hover { border-bottom-color: var(--hd-ink); }

/* ---------- le formulaire ---------- */

.hd-contact__form,
.hd-contact__form div,
.hd-contact__form section,
.hd-contact__form form,
.hd-contact__form fieldset {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.hd-contact__form > div,
.hd-contact__form > section,
.hd-contact__form > div > div { padding: 0 !important; }

/* Le module réimprime le titre de la page : un seul suffit. */
.hd-contact__form h1,
.hd-contact__form h2 { display: none !important; }

.hd-contact__form form {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.hd-contact__form label,
.hd-contact__form .form-control-label {
  font-family: var(--hd-sans) !important;
  font-size: .695rem !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--hd-ink-faint) !important;
  margin: 0 0 .5rem !important;
  display: block;
}

.hd-contact__form input[type="text"],
.hd-contact__form input[type="email"],
.hd-contact__form input[type="tel"],
.hd-contact__form select,
.hd-contact__form textarea {
  width: 100%;
  background: color-mix(in srgb, var(--hd-ground-2) 60%, transparent) !important;
  border: 1px solid var(--hd-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--hd-ink) !important;
  font-family: var(--hd-sans) !important;
  font-size: .95rem !important;
  line-height: 1.5;
  padding: .85em 1em !important;
  transition: border-color .3s ease, background .3s ease;
}
.hd-contact__form textarea { min-height: 11rem; resize: vertical; }

.hd-contact__form input::placeholder,
.hd-contact__form textarea::placeholder {
  color: var(--hd-ink-faint) !important;
}

.hd-contact__form input:focus,
.hd-contact__form select:focus,
.hd-contact__form textarea:focus {
  outline: none;
  border-color: var(--hd-ink) !important;
  background: transparent !important;
}

.hd-contact__form input[type="file"] {
  font-family: var(--hd-sans) !important;
  font-size: .88rem !important;
  color: var(--hd-ink-soft) !important;
  padding: .7em 0 !important;
}

/* La mention « optionnel » et les messages d'aide */
.hd-contact__form small,
.hd-contact__form .form-control-comment {
  font-family: var(--hd-sans) !important;
  font-size: .72rem !important;
  color: var(--hd-ink-faint) !important;
  display: block;
  margin-top: .35rem;
}

/* Le bouton d'envoi : bleu Bootstrap par défaut, on le ramène au noir. */
.hd-contact__form button,
.hd-contact__form input[type="submit"],
.hd-contact__form .btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  font-family: var(--hd-sans) !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  padding: .95em 1.8em !important;
  border: 1px solid var(--hd-ink) !important;
  border-radius: 0 !important;
  background: var(--hd-ink) !important;
  color: var(--hd-ground) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background .35s ease, color .35s ease;
}
.hd-contact__form button:hover,
.hd-contact__form input[type="submit"]:hover,
.hd-contact__form .btn:hover {
  background: transparent !important;
  color: var(--hd-ink) !important;
}

/* Champ obligatoire et messages d'erreur du module */
.hd-contact__form .required,
.hd-contact__form sup { color: var(--hd-ink-soft) !important; }
.hd-contact__form .alert,
.hd-contact__form .js-contact-form-alert {
  border: 1px solid var(--hd-rule) !important;
  padding: .9rem 1.1rem !important;
  font-family: var(--hd-sans) !important;
  font-size: .9rem !important;
}

/* ==========================================================================
   PIED DE PAGE
   Le gabarit vit maintenant dans le thème enfant (templates/_partials/footer.tpl).
   Ces règles passent après layout-editorial.css et corrigent sa mise en page :
   les blocs de liens des modules portent des classes de colonnes Bootstrap
   (col-md-6 col-lg-3) qui se battaient avec la grille.
   ========================================================================== */

.ft-main__inner {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 2.85fr) !important;
  gap: clamp(2rem, 4vw, 4rem) !important;
}

.ft-links {
  grid-column: auto !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
  gap: 2.2rem 2rem !important;
}

/* Neutralise les classes de colonnes Bootstrap portées par chaque bloc. */
.ft-links > * {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
}

/* Coupure normale, aux espaces. anywhere écrasait la largeur minimale des
   colonnes et hachait les mots au milieu. */
.ft-links a,
.ft-links li,
.ft-links p {
  overflow-wrap: break-word;
  hyphens: manual;
}
/* Seule exception : l'adresse e-mail, un seul mot trop long pour la colonne. */
.ft-links a[href^="mailto"] { overflow-wrap: anywhere; }

/* Titres de blocs. Celui de « Votre compte » porte son texte dans un lien,
   d'où sa couleur claire héritée du thème : on cible les deux. */
.ft-links .footer-block__title,
.ft-links .footer-block__title a,
.ft-links h1,
.ft-links h2,
.ft-links h3,
.ft-links h4 {
  font-family: var(--hd-sans) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
  color: #1A1A18 !important;
  -webkit-text-fill-color: #1A1A18;
  opacity: 1 !important;
  text-decoration: none !important;
}
.ft-links .footer-block__title {
  margin: 0 0 1.3rem !important;
  padding: 0 !important;
}

/* Colonne marque */
.ft-brand__note {
  font-family: var(--hd-sans);
  font-size: 0.78rem;
  line-height: 1.6;
  color: #888;
  margin: 0 0 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid #E8E5E0;
  max-width: 34ch;
}
.ft-brand__handle {
  font-family: var(--hd-sans);
  font-size: 0.78rem;
  color: #888;
  margin-left: 0.25rem;
}

@media (max-width: 900px) {
  .ft-main__inner { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .ft-links { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* ==========================================================================
   EN-TÊTE
   Le gabarit vit maintenant dans le thème enfant
   (templates/_partials/header.tpl). Ces règles passent après
   layout-editorial.css, qui reste la base.
   ========================================================================== */

/* La marque à gauche, le menu à sa suite, les actions poussées à droite. */
.hd-header__inner { gap: 1.25rem !important; }
.hd-nav { flex: 1 1 auto; min-width: 0; }
.hd-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* Le séparateur pendait dans le vide après le panier : il est retiré du
   gabarit, on neutralise aussi la règle qui le dessinait. */
.hd-actions-sep { display: none !important; }

/* La recherche est maintenant dans le groupe d'actions, plus au milieu. */
.hd-search { display: flex; align-items: center; }
.hd-search form { margin: 0; }

/* Le sélecteur de langue affichait un chevron détaché de son libellé. */
.hd-actions .ps-languageselector,
.hd-actions .language-selector {
  display: flex !important;
  align-items: center;
}
.hd-actions .ps-languageselector select,
.hd-actions .language-selector select {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-right: 1.2em !important;
  font-family: var(--hd-sans, system-ui);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  cursor: pointer;
}

/* Le menu : un seul niveau, en petites capitales, comme les cartels. */
.hd-nav .ps-mainmenu__desktop ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.2rem);
}
.hd-nav .ps-mainmenu__desktop li { margin: 0 !important; padding: 0 !important; }
.hd-nav .ps-mainmenu__desktop a {
  font-family: var(--hd-sans, system-ui) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: #1A1A18 !important;
  text-decoration: none !important;
  white-space: nowrap;
  padding-block: 0.4em;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.hd-nav .ps-mainmenu__desktop a:hover { border-bottom-color: #1A1A18 !important; }

/* --------------------------------------------------------------------------
   Menu mobile
   Le module rend deux choses côte à côte : le menu desktop, et le panneau
   latéral #mobileMenu. Les deux arrivent dans .hd-nav.

   Hummingbird neutralise volontairement le comportement Bootstrap du panneau
   (position: static, visibility: visible) pour l'intégrer à son propre
   en-tête. Dans le nôtre, ça le faisait s'afficher en pleine page, par-dessus
   le contenu. On le masque donc sur grand écran, et on lui rend son
   comportement de panneau latéral sur petit écran.
   -------------------------------------------------------------------------- */

/* Le module apporte son propre bouton burger ; le nôtre est déjà dans la
   zone d'actions. Un seul suffit. */
.ps-mainmenu__mobile-toggle { display: none !important; }

@media (min-width: 1320px) {
  #mobileMenu { display: none !important; }
  .hd-menu-toggle { display: none !important; }
}

@media (max-width: 1319.98px) {
  /* Le menu desktop se masque tout seul (d-none d-xl-block), mais .hd-nav
     ne doit pas disparaître : le panneau vit dedans. */
  .hd-nav { flex: 0 0 auto; }

  #mobileMenu {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100% !important;
    width: min(86vw, 22rem) !important;
    max-width: none !important;
    padding: 1.25rem !important;
    background: #fff !important;
    border-right: 1px solid #E8E5E0 !important;
    overflow-y: auto;
    z-index: 1045;
    visibility: hidden !important;
    transform: translateX(-100%) !important;
    transition: transform .32s cubic-bezier(.2,.7,.25,1), visibility .32s !important;
    display: flex !important;
    flex-direction: column;
    gap: 1.5rem;
  }
  #mobileMenu.show {
    visibility: visible !important;
    transform: none !important;
  }
  #mobileMenu .offcanvas-header {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 0 !important;
  }
  #mobileMenu .menu__link,
  #mobileMenu .menu a {
    font-family: var(--hd-sans) !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.13em !important;
    text-transform: uppercase !important;
    color: #1A1A18 !important;
    padding-block: 0.75rem !important;
    border-bottom: 1px solid #E8E5E0;
  }
  #mobileMenu .menu__list { list-style: none !important; padding: 0 !important; }
  #mobileMenu .ps-mainmenu__additionnals {
    margin-top: auto;
    padding: 0 !important;
    border-top: 1px solid #E8E5E0;
    padding-top: 1rem !important;
  }
}

/* --------------------------------------------------------------------------
   En-tête : zone d'actions en texte, sans icônes
   Les glyphes Material pleins (rond du compte, caddie) lisaient comme des
   boutons dans un en-tête par ailleurs tout en filets et petites capitales.
   On les retire et on ramène tout au texte, sur une seule ligne.
   -------------------------------------------------------------------------- */

.hd-actions .material-icons { display: none !important; }

.hd-actions,
.hd-actions a,
.hd-actions button,
.hd-actions select,
.hd-actions span {
  font-family: var(--hd-sans) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: #1A1A18 !important;
  text-decoration: none !important;
}

.hd-actions { gap: 0 !important; }

/* Chaque bloc d'action devient un simple mot, séparé par un point médian. */
.hd-actions > *:not(.hd-mobile-only):not(.hd-menu-toggle) {
  display: flex !important;
  align-items: center;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 0.85rem !important;
  margin: 0 !important;
  position: relative;
}
/* Les séparateurs sont insérés par hd.js entre deux éléments réellement
   visibles : une règle CSS de voisinage ne sait pas sauter un conteneur
   masqué, ce qui produisait un point orphelin en début et en fin de ligne. */
.hd-sep {
  color: #C9C6BE;
  letter-spacing: 0;
  padding: 0 .55rem;
  user-select: none;
}
.hd-actions > *:last-child:not(.hd-mobile-only):not(.hd-menu-toggle) { padding-right: 0 !important; }

/* Les blocs internes des modules ne doivent plus rien dessiner. */
.hd-actions .header-block,
.hd-actions .header-block__action-btn,
.hd-actions .ps-customersignin,
.hd-actions .blockcart {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  align-items: center;
  gap: 0.35em;
}

/* La pastille du panier redevient un simple nombre entre parenthèses. */
.hd-actions .header-block__badge,
.hd-actions .cart-products-count {
  position: static !important;
  background: none !important;
  color: #1A1A18 !important;
  border: 0 !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 0 0 0.35em !important;
  font-size: 0.72rem !important;
  line-height: inherit !important;
  display: inline !important;
  font-variant-numeric: tabular-nums;
}
.hd-actions .header-block__badge::before,
.hd-actions .cart-products-count::before { content: "("; }
.hd-actions .header-block__badge::after,
.hd-actions .cart-products-count::after { content: ")"; }

/* Sélecteurs de langue et de devise : du texte, pas un formulaire. */
.hd-actions select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer;
}
.hd-actions .dropdown-toggle::after,
.hd-actions .expand-more,
.hd-actions [class*="chevron"] { display: none !important; }

.hd-actions a:hover,
.hd-actions button:hover { opacity: 0.55; }

/* Le compteur du panier restait calé en exposant : il garde de Hummingbird
   un positionnement de pastille (vertical-align et décalages) que
   position: static ne suffit pas à annuler. On remet tout à plat et on
   aligne sur la même ligne de base que le mot. */
.hd-actions a,
.hd-actions button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3em;
}
.hd-actions .header-block__badge,
.hd-actions .cart-products-count,
.hd-actions [class*="badge"] {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  vertical-align: baseline !important;
  align-self: center !important;
  line-height: 1 !important;
  margin: 0 !important;
  font-size: inherit !important;
}

/* Alignement du compteur du panier, version qui ne suppose rien.
   Panier vide, le module rend un <span> et non un <a> : on cible la classe,
   pas la balise. Et on laisse la hauteur de ligne s'hériter, au lieu de la
   forcer à 1, ce qui décalait le chiffre vers le haut. */
.hd-actions .header-block__action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3em !important;
  padding: 0 !important;
  position: static !important;
}
.hd-actions .header-block__badge {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  vertical-align: baseline !important;
}

/* --------------------------------------------------------------------------
   Menu : flèche des entrées à sous-menu
   Le module ajoute un bouton déroulant dès qu'une catégorie a des enfants.
   Sa flèche Material est trop grosse et détachée du libellé.
   -------------------------------------------------------------------------- */
.hd-nav .ps-mainmenu__tree-item-wrapper {
  display: inline-flex !important;
  align-items: center;
  gap: 0.1em;
}
.hd-nav .ps-mainmenu__tree-dropdown-toggle {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center;
  color: #8A8C84 !important;
}
.hd-nav .ps-mainmenu__tree-dropdown-toggle .material-icons,
.hd-nav .ps-mainmenu__tree-dropdown-toggle i {
  display: inline-block !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
  color: inherit !important;
}
.hd-nav .ps-mainmenu__tree-dropdown-toggle::after { display: none !important; }
.hd-nav .ps-mainmenu__tree-item:hover .ps-mainmenu__tree-dropdown-toggle {
  color: #1A1A18 !important;
}

/* ==========================================================================
   PAGES DE CONTENU (CMS) — La matière, L'atelier
   Une colonne de lecture mesurée, un serif de presse, et une hiérarchie
   nette. Le contenu venant de l'éditeur du back-office, tout est stylé
   par sélecteur d'élément à l'intérieur de .hd-cms__body.
   ========================================================================== */

.hd-cms {
  padding-block: clamp(2.2rem, 5vw, 4.2rem) clamp(3rem, 7vw, 6rem);
  padding-inline: var(--hd-gutter);
}

/* ---------- en-tête de page ---------- */
.hd-cms__head {
  max-width: 34rem;
  margin: 0 auto clamp(2.4rem, 5vw, 4rem);
  padding-bottom: clamp(1.4rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--hd-rule);
  text-align: center;
}
.hd-cms__title {
  margin: 0;
  font-family: var(--hd-serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
}

/* ---------- colonne de lecture ---------- */
.hd-cms__body {
  max-width: 34rem;      /* ~68 caractères, la mesure confortable */
  margin-inline: auto;
}

.hd-cms__body > * { max-width: none; }

.hd-cms__body p {
  margin: 0 0 1.3em;
  font-size: 1.08rem;
  line-height: 1.68;
  color: var(--hd-ink);
  max-width: none;
}

/* Le chapeau : le premier paragraphe porte l'entrée en matière. */
.hd-cms__body > p:first-child {
  font-size: clamp(1.14rem, 1.7vw, 1.32rem);
  line-height: 1.5;
  color: var(--hd-ink-soft);
  margin-bottom: 2.2em;
}

/* Intertitres. Ils sont nombreux — souvent des questions — donc ils
   doivent respirer au-dessus et se coller à leur réponse en dessous. */
.hd-cms__body h2 {
  margin: 2.6em 0 .7em;
  font-family: var(--hd-serif);
  font-weight: 300;
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  line-height: 1.16;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.hd-cms__body h2:first-child { margin-top: 0; }

/* Un filet court au-dessus de chaque intertitre : rythme la page sans
   la découper en blocs. */
.hd-cms__body h2::before {
  content: "";
  display: block;
  width: 2.4rem;
  height: 1px;
  background: var(--hd-ink);
  margin-bottom: 1.1em;
}

.hd-cms__body h3 {
  margin: 2em 0 .5em;
  font-family: var(--hd-sans);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hd-ink-faint);
}

.hd-cms__body ul,
.hd-cms__body ol {
  margin: 0 0 1.4em;
  padding-left: 1.2em;
}
.hd-cms__body li { margin-bottom: .5em; line-height: 1.6; }

.hd-cms__body a {
  color: var(--hd-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hd-rule);
  transition: border-color .25s ease;
}
.hd-cms__body a:hover { border-bottom-color: var(--hd-ink); }

.hd-cms__body img {
  display: block;
  width: 100%;
  height: auto;
  margin: 2.2em 0;
  border: 1px solid var(--hd-rule);
}

.hd-cms__body blockquote {
  margin: 2.2em 0;
  padding-left: 1.4rem;
  border-left: 1px solid var(--hd-ink);
  font-size: 1.22rem;
  line-height: 1.45;
  color: var(--hd-ink-soft);
}

/* ---------- pied de page ---------- */
.hd-cms__foot {
  max-width: 34rem;
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  padding-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid var(--hd-rule);
}
.hd-cms__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: .8rem;
}
.hd-cms__links a {
  font-family: var(--hd-sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--hd-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: .2em;
  transition: border-color .25s ease;
}
.hd-cms__links a:hover { border-bottom-color: var(--hd-ink); }

/* --------------------------------------------------------------------------
   En-tête responsive
   layout-editorial.css masque .hd-menu-toggle par défaut et n'a qu'une seule
   rupture, à 768px. Résultat : entre 768 et 1200, le menu avait disparu
   (Bootstrap le masque sous xl) sans qu'aucun burger ne le remplace.
   -------------------------------------------------------------------------- */

@media (max-width: 1319.98px) {
  .hd-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    order: 99;
    padding: 0 0 0 .85rem !important;
    margin: 0 !important;
    background: none !important;
    border: 0 !important;
  }
  .hd-menu-toggle .material-icons {
    display: block !important;
    font-size: 1.35rem !important;
    color: var(--hd-ink, #1A1A18) !important;
  }
}

/* Les conteneurs de relocalisation ne dessinent rien tant qu'ils sont vides. */
.hd-mobile-slot:empty { display: none !important; }
.hd-mobile-slot {
  display: flex !important;
  align-items: center;
  padding: 0 0 0 .85rem !important;
}

/* Sous 720px, l'en-tête garde la marque, le panier et le burger. Le reste
   est dans le tiroir, où PrestaShop déplace langue, devise et contact. */
@media (max-width: 720px) {
  .hd-actions #_desktop_ps_languageselector,
  .hd-actions .ps-languageselector,
  .hd-actions #_desktop_ps_currencyselector,
  .hd-actions .ps-currencyselector,
  .hd-actions #_desktop_ps_customersignin,
  .hd-actions .ps-customersignin { display: none !important; }

  .hd-actions > *::before { content: none !important; }
  .hd-logo__sub { display: none; }
}

/* --------------------------------------------------------------------------
   Corrections de la rupture à 768px de layout-editorial.css

   Deux règles y cassaient tout sous 768 pixels :
     .hd-nav { display: none }  → or le tiroir #mobileMenu vit dans .hd-nav,
       donc le menu mobile disparaissait entièrement ;
     #_desktop_ps_shoppingcart masqué au profit de .hd-mobile-only, classe
       que nous n'utilisons plus — le panier disparaissait donc aussi.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .hd-nav { display: block !important; }

  .hd-actions #_desktop_ps_shoppingcart,
  .hd-actions .ps-shoppingcart {
    display: flex !important;
    align-items: center;
  }

  .hd-menu-toggle { display: inline-flex !important; }
}

/* --------------------------------------------------------------------------
   Contenu du tiroir : une liste verticale
   Les entrées s'affichaient côte à côte et débordaient, parce que la règle
   du menu horizontal s'appliquait aussi ici. Elle est maintenant réservée
   au menu de bureau ; le tiroir reprend une colonne.
   -------------------------------------------------------------------------- */

#mobileMenu .ps-mainmenu__mobile { width: 100%; }

#mobileMenu .menu {
  position: static !important;
  left: auto !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}
#mobileMenu .menu--current,
#mobileMenu .js-menu-current { display: block !important; }

#mobileMenu ul,
#mobileMenu .menu__list {
  display: block !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}
#mobileMenu li {
  display: block !important;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

#mobileMenu .menu__title {
  font-family: var(--hd-sans) !important;
  font-size: .675rem !important;
  font-weight: 500 !important;
  letter-spacing: .17em !important;
  text-transform: uppercase !important;
  color: #8A8C84 !important;
  margin: 0 0 .6rem !important;
  padding: 0 !important;
}

#mobileMenu a {
  display: block !important;
  font-family: var(--hd-sans) !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  color: #1A1A18 !important;
  text-decoration: none !important;
  padding: .9rem 0 !important;
  border-bottom: 1px solid #E8E5E0 !important;
  white-space: normal !important;
}
#mobileMenu a:hover { opacity: .55; }

/* Le bouton de fermeture, calé à droite. */
#mobileMenu .offcanvas-header { padding: 0 0 .5rem !important; }
#mobileMenu .btn-close {
  margin-left: auto !important;
  padding: .5rem !important;
  opacity: .5;
}
#mobileMenu .btn-close:hover { opacity: 1; }

/* ==========================================================================
   FIL D'ARIANE
   Conservé pour sa valeur en données structurées — c'est lui qui produit le
   chemin de navigation dans Google — mais ramené dans la langue du site :
   plus de bande colorée, plus de bleu, des petites capitales discrètes.
   ========================================================================== */

#wrapper .breadcrumb,
.breadcrumb {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 1.5rem clamp(20px, 5vw, 72px) 0 !important;
  max-width: none;
}

#wrapper .breadcrumb ol,
.breadcrumb ol,
.breadcrumb ul {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .55rem;
  list-style: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  max-width: 1260px;
}

#wrapper .breadcrumb li,
.breadcrumb li {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--hd-sans, system-ui) !important;
  font-size: .64rem !important;
  font-weight: 500 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: #8A8C84 !important;
}

/* Le séparateur de Bootstrap est remplacé par un point médian. */
#wrapper .breadcrumb li + li::before,
.breadcrumb li + li::before {
  content: "·" !important;
  color: #C9C6BE !important;
  float: none !important;
  padding: 0 !important;
  letter-spacing: 0 !important;
}

#wrapper .breadcrumb a,
.breadcrumb a {
  color: #8A8C84 !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
#wrapper .breadcrumb a:hover,
.breadcrumb a:hover {
  color: #1A1A18 !important;
  border-bottom-color: #1A1A18;
}

/* La page courante, dernier maillon : un ton plus sombre, sans lien. */
#wrapper .breadcrumb li:last-child,
.breadcrumb li:last-child { color: #5B5D57 !important; }

/* Sur les pages de contenu, le titre est déjà centré et large : le fil
   d'Ariane se fait plus discret encore et ne pousse pas la page. */
.hd-cms { padding-top: clamp(1.4rem, 3.5vw, 2.6rem); }

/* --------------------------------------------------------------------------
   Fil d'Ariane, correction : une seule bande
   Le fond bleuté n'était pas sur la liste mais sur son conteneur,
   nav.breadcrumb__wrapper. Et la bande blanche qui suivait venait du fond
   de #wrapper. On rend le conteneur transparent et on met le corps de page
   sur le fond crayeux : l'en-tête reste blanc, tout le reste est d'un seul
   tenant.
   -------------------------------------------------------------------------- */

#wrapper { background: #F1F1EC; }

.breadcrumb__wrapper {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 1.4rem 0 0 !important;
}

/* Aligné exactement sur l'en-tête : même largeur, même gouttière. */
.breadcrumb__wrapper .container {
  max-width: 1280px !important;
  padding-inline: 2rem !important;
  margin-inline: auto;
}

#wrapper ol.breadcrumb,
.breadcrumb__wrapper ol.breadcrumb {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

/* Les pages de contenu n'ont plus besoin de porter leur propre fond,
   ni de compenser la bande disparue. */
.hd-cms { background: none; padding-top: clamp(1.8rem, 4vw, 3rem); }

/* ==========================================================================
   MISE AU POINT (FOCUS)
   Le thème dessine un anneau bleu en forme de parenthèses, visible dès le
   clic à la souris. On le neutralise sur :focus — donc au clic — et on le
   remplace par un filet noir sur :focus-visible, c'est-à-dire uniquement
   pour qui navigue au clavier. Supprimer les deux serait inaccessible.
   ========================================================================== */

.hd-header a:focus,
.hd-header button:focus,
.hd-header select:focus,
.hd-nav a:focus,
.hd-actions a:focus,
.hd-actions button:focus,
.hd-actions select:focus,
.breadcrumb__wrapper a:focus,
.ft-main a:focus,
.ft-bottom a:focus,
#mobileMenu a:focus,
#mobileMenu button:focus,
.ps-mainmenu__tree-link:focus,
.ps-mainmenu__tree-dropdown-toggle:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  background-image: none !important;
}

.hd-header a:focus::before,
.hd-header a:focus::after,
.ps-mainmenu__tree-link:focus::before,
.ps-mainmenu__tree-link:focus::after {
  content: none !important;
}

/* Navigation au clavier : un filet noir, discret et net. */
.hd-header a:focus-visible,
.hd-header button:focus-visible,
.hd-header select:focus-visible,
.hd-nav a:focus-visible,
.hd-actions a:focus-visible,
.hd-actions button:focus-visible,
.hd-actions select:focus-visible,
.breadcrumb__wrapper a:focus-visible,
.ft-main a:focus-visible,
.ft-bottom a:focus-visible,
#mobileMenu a:focus-visible,
#mobileMenu button:focus-visible,
.ps-mainmenu__tree-link:focus-visible,
.ps-mainmenu__tree-dropdown-toggle:focus-visible {
  outline: 1px solid #1A1A18 !important;
  outline-offset: .35em !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* --------------------------------------------------------------------------
   Dès que le burger apparaît, langue, devise et compte passent dans le
   tiroir. Le panier, lui, reste toujours visible dans la barre : un panier
   caché est un panier oublié.
   -------------------------------------------------------------------------- */
@media (max-width: 1319.98px) {
  .hd-actions #_desktop_ps_languageselector,
  .hd-actions .ps-languageselector,
  .hd-actions #_desktop_ps_currencyselector,
  .hd-actions .ps-currencyselector,
  .hd-actions #_desktop_ps_customersignin,
  .hd-actions .ps-customersignin { display: none !important; }
}

/* Liens ajoutés en bas du tiroir : compte, langue, devise. */
#mobileMenu .hd-drawer-extra {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid #E8E5E0;
  display: flex;
  flex-direction: column;
}
#mobileMenu .hd-drawer-extra > * { border-bottom: 0 !important; }

/* --------------------------------------------------------------------------
   Seuil du menu de bureau
   Bootstrap affiche le menu dès 1200px, mais quatre entrées françaises
   longues demandent environ 1320px. Entre les deux, la liste passait à la
   ligne et disloquait l'en-tête. On interdit le retour à la ligne et on
   masque le menu de bureau sous 1320, où le burger prend le relais.
   -------------------------------------------------------------------------- */
.hd-nav .ps-mainmenu__desktop ul { flex-wrap: nowrap !important; }

@media (max-width: 1319.98px) {
  .hd-nav .ps-mainmenu__desktop,
  .ps-mainmenu--desktop .ps-mainmenu__desktop { display: none !important; }
}

/* --------------------------------------------------------------------------
   Tiroir : finitions du bas
   Les petits traits verticaux entre les entrées venaient des séparateurs que
   le thème dessine pour le menu de bureau. Le bloc du bas n'est plus collé
   en pied — avec quatre entrées, ça laissait un grand vide — et le
   sélecteur de langue perd son cadre de formulaire.
   -------------------------------------------------------------------------- */

#mobileMenu li::before,
#mobileMenu li::after,
#mobileMenu .ps-mainmenu__tree-item::before,
#mobileMenu a::before { content: none !important; display: none !important; }

#mobileMenu .ps-mainmenu__additionnals:empty { display: none !important; }
#mobileMenu .ps-mainmenu__additionnals {
  margin-top: 0 !important;
  border-top: 0 !important;
  padding: 0 !important;
}

#mobileMenu .hd-drawer-extra {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid #E8E5E0;
  gap: .2rem;
}

#mobileMenu .hd-drawer-extra select,
#mobileMenu select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: .9rem 0 !important;
  margin: 0 !important;
  width: auto !important;
  font-family: var(--hd-sans) !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  color: #1A1A18 !important;
  cursor: pointer;
}
#mobileMenu .hd-drawer-extra .expand-more,
#mobileMenu [class*="chevron"] { display: none !important; }

/* ==========================================================================
   PAGES DE LISTING — catégorie, recherche, nouveautés
   La grille est enveloppée dans .hd-products, donc elle hérite du format
   cartel déjà défini pour l'accueil. Ne restent ici que l'en-tête de page
   et les commandes de tri et de pagination.
   ========================================================================== */

.hd-listing {
  padding-block: clamp(1.8rem, 4vw, 3rem) clamp(3rem, 7vw, 5.5rem);
  padding-inline: var(--hd-gutter);
  max-width: calc(var(--hd-max) + 2 * var(--hd-gutter));
  margin-inline: auto;
}

/* ---------- en-tête ---------- */

.hd-listing__head {
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
}
.hd-listing__head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hd-rule);
}
.hd-listing__title {
  margin: 0;
  font-family: var(--hd-serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
}

/* La description de la catégorie : une colonne de lecture, pas toute la
   largeur de la grille. */
.hd-listing__desc {
  max-width: 58ch;
  margin-top: clamp(1.2rem, 2.5vw, 1.8rem);
}
.hd-listing__desc p {
  margin: 0 0 .9em;
  font-size: 1.04rem;
  line-height: 1.62;
  color: var(--hd-ink-soft);
  max-width: none;
}
.hd-listing__desc p:last-child { margin-bottom: 0; }
.hd-listing__desc a {
  color: var(--hd-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hd-rule);
}

.hd-listing__cover {
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--hd-rule);
}
.hd-listing__cover img { display: block; width: 100%; height: auto; }

/* Sous-catégories : des liens en petites capitales, pas des vignettes. */
.hd-subcats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-top: clamp(1.2rem, 2.5vw, 1.8rem);
}
.hd-subcats a {
  font-family: var(--hd-sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--hd-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hd-rule);
  padding-bottom: .25em;
  transition: border-color .25s ease;
}
.hd-subcats a:hover { border-bottom-color: var(--hd-ink); }

/* ---------- barre de comptage et de tri ---------- */

.hd-products .products__selection {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.hd-products .products__count,
.hd-products .products__count span {
  font-family: var(--hd-sans) !important;
  font-size: .695rem !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--hd-ink-faint) !important;
}
.hd-products .products__sort { display: flex; align-items: baseline; gap: .6rem; }

.hd-products .products__sort label,
.hd-products .products__sort .sort-by {
  font-family: var(--hd-sans) !important;
  font-size: .695rem !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--hd-ink-faint) !important;
  margin: 0 !important;
}
.hd-products .products__sort select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hd-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: .3em 1.2em .3em 0 !important;
  font-family: var(--hd-sans) !important;
  font-size: .78rem !important;
  color: var(--hd-ink) !important;
  cursor: pointer;
}
.hd-products .products__sort select:focus {
  outline: none;
  border-bottom-color: var(--hd-ink) !important;
}
.hd-products .products__filter-button {
  font-family: var(--hd-sans) !important;
  font-size: .7rem !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  border: 1px solid var(--hd-rule) !important;
  background: none !important;
  color: var(--hd-ink) !important;
  padding: .6em 1.1em !important;
}

/* ---------- bas de liste et pagination ---------- */

.hd-products .pagination,
.hd-products .products__bottom,
#js-product-list-bottom {
  margin-top: clamp(2rem, 4vw, 3.2rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--hd-rule);
}
#js-product-list-bottom,
.hd-products .pagination__summary,
.hd-products .pagination div,
.hd-products .pagination p {
  font-family: var(--hd-sans) !important;
  font-size: .695rem !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--hd-ink-faint) !important;
}
.hd-products .pagination ul { list-style: none; display: flex; gap: .3rem; padding: 0; margin: 0; }
.hd-products .pagination a,
.hd-products .pagination .disabled span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--hd-rule);
  border-radius: 0 !important;
  background: none !important;
  color: var(--hd-ink) !important;
  font-family: var(--hd-sans) !important;
  font-size: .75rem !important;
  text-decoration: none;
}
.hd-products .pagination .current a,
.hd-products .pagination .active a {
  background: var(--hd-ink) !important;
  border-color: var(--hd-ink) !important;
  color: var(--hd-ground) !important;
}

/* ---------- catégorie vide ---------- */
.hd-listing__empty {
  padding-block: clamp(2rem, 5vw, 4rem);
  max-width: 46ch;
}

/* ==========================================================================
   PAGE PRODUIT — harmonisation
   product-editorial.css apporte sa propre charte : Playfair Display chargée
   depuis Google, Inter, et une palette à elle. Sa structure est bonne, donc
   on ne la réécrit pas : on rebranche ses variables sur celles du site.
   Une seule voix typographique, et deux requêtes vers Google en moins.
   ========================================================================== */

:root {
  --pe-serif: "Newsreader HD", Georgia, "Times New Roman", serif;
  --pe-sans:  "Archivo HD", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pe-bg:        #F1F1EC;
  --pe-bg-light:  #E8E8E1;
  --pe-border:    #CDCDC3;
  --pe-ink:       #17181A;
  --pe-muted:     #8A8C84;
  /* Les cinq teintes de la charte produit sont conservées : ce sont les
     coloris réels des pièces, pas une décoration. */
}

/* Le nom du produit : Newsreader en 300, comme tous les titres du site.
   Playfair était utilisée en 700, d'où son poids très différent. */
.pe-product-name,
.page-product .pe-product-name {
  font-family: var(--pe-serif) !important;
  font-weight: 300 !important;
  letter-spacing: -0.015em;
}

/* Le sur-titre « Atelier Henri Dejeant » au-dessus de la photo répétait la
   marque de l'en-tête, deux centimètres plus haut. Même correction que sur
   les pages de contenu. */
.pe-brand-header { display: none !important; }

/* La description était centrée : au-delà de deux lignes, un texte centré se
   lit mal, l'œil ne retrouve pas le début de la ligne suivante. */
.pe-description-short,
.pe-description-short__inner {
  text-align: left !important;
}
.pe-description-short__inner {
  max-width: 62ch;
  margin-inline: auto;
  font-family: var(--pe-serif) !important;
  font-size: 1.08rem !important;
  line-height: 1.66 !important;
}

/* Les libellés et valeurs des caractéristiques : sans-serif structurel pour
   le libellé, serif pour la valeur — la même grammaire que les cartels. */
.pe-features__label,
.pe-section-title,
.pe-category,
.pe-price-sub,
.pe-editorial-grid__label {
  font-family: var(--pe-sans) !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
}
.pe-features__value {
  font-family: var(--pe-serif) !important;
  font-weight: 400 !important;
  font-size: 1.05rem !important;
}
.pe-price {
  font-family: var(--pe-serif) !important;
  font-weight: 400 !important;
}

/* Le bouton d'ajout au panier était une pilule très arrondie. Tous les
   boutons du site sont à angles droits. */
.pe-add-to-cart,
.pe-sticky-bar .pe-add-to-cart,
.pe-sticky-bar button,
.pe-sticky-bar .btn {
  border-radius: 0 !important;
  font-family: var(--pe-sans) !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  padding: 1em 2.2em !important;
  background: var(--pe-ink) !important;
  border: 1px solid var(--pe-ink) !important;
  color: #F1F1EC !important;
  box-shadow: none !important;
  transition: background .35s ease, color .35s ease;
}
.pe-add-to-cart:hover,
.pe-sticky-bar .pe-add-to-cart:hover {
  background: transparent !important;
  color: var(--pe-ink) !important;
}

/* Le fil d'Ariane et la largeur de page : la page produit se limitait à
   1000px, plus étroit que le reste du site. On l'aligne. */
.page-product .columns-container.container { max-width: 1280px !important; }

/* ==========================================================================
   BOOTSTRAP — HARMONISATION GLOBALE
   Jusqu'ici je corrigeais le bleu au cas par cas. On le traite à la source,
   par les variables de Bootstrap 5.3 : les composants du thème, des modules
   et des modales suivent tous, y compris ceux qu'on n'a pas encore vus.
   ========================================================================== */

:root {
  --bs-link-color: #17181A;
  --bs-link-color-rgb: 23, 24, 26;
  --bs-link-hover-color: #5B5D57;
  --bs-link-hover-color-rgb: 91, 93, 87;
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-pill: 0;
  --bs-focus-ring-color: rgba(23, 24, 26, .25);
}

/* Bootstrap 5.3 fixe la couleur de chaque bouton dans ses propres variables,
   au niveau de la classe : redéfinir --bs-primary ne suffit donc pas. */
.btn-primary {
  --bs-btn-bg: #17181A;
  --bs-btn-border-color: #17181A;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: #17181A;
  --bs-btn-hover-color: #17181A;
  --bs-btn-active-bg: #5B5D57;
  --bs-btn-active-border-color: #5B5D57;
  --bs-btn-disabled-bg: #8A8C84;
  --bs-btn-disabled-border-color: #8A8C84;
}
.btn-outline-primary {
  --bs-btn-color: #17181A;
  --bs-btn-border-color: #CDCDC3;
  --bs-btn-hover-bg: #17181A;
  --bs-btn-hover-border-color: #17181A;
  --bs-btn-hover-color: #F1F1EC;
  --bs-btn-active-bg: #17181A;
  --bs-btn-active-border-color: #17181A;
}
.btn-secondary {
  --bs-btn-bg: transparent;
  --bs-btn-color: #17181A;
  --bs-btn-border-color: #CDCDC3;
  --bs-btn-hover-bg: #17181A;
  --bs-btn-hover-color: #F1F1EC;
  --bs-btn-hover-border-color: #17181A;
}

/* Tous les boutons du site sont à angles droits et en petites capitales. */
.btn {
  border-radius: 0 !important;
  font-family: var(--hd-sans, system-ui) !important;
  font-size: .78rem !important;
  font-weight: 500 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  padding: .9em 1.6em !important;
}

/* ==========================================================================
   MODALES — panier, images, aperçu rapide
   ========================================================================== */

.modal-content {
  border-radius: 0 !important;
  border: 1px solid #CDCDC3 !important;
  background: #F1F1EC !important;
  box-shadow: 0 24px 60px rgba(23, 24, 26, .14) !important;
}

.modal-header {
  border-bottom: 1px solid #CDCDC3 !important;
  padding: 1.4rem 1.6rem !important;
  align-items: center;
}

.modal-title,
#blockcart-modal .modal-title {
  font-family: var(--hd-serif, Georgia, serif) !important;
  font-weight: 300 !important;
  font-size: 1.45rem !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em;
  color: #17181A !important;
}

.modal-body { padding: 1.6rem !important; }
.modal-footer {
  border-top: 1px solid #CDCDC3 !important;
  padding: 1.2rem 1.6rem !important;
  gap: .75rem;
}

/* Le nom du produit ajouté, en serif ; les lignes de total en sans. */
#blockcart-modal .product-name,
#blockcart-modal h6,
#blockcart-modal strong {
  font-family: var(--hd-serif, Georgia, serif) !important;
  font-weight: 400 !important;
  font-size: 1.12rem !important;
}
#blockcart-modal .cart-content,
#blockcart-modal .cart-content *,
#blockcart-modal .product-quantity,
#blockcart-modal .product-price,
#blockcart-modal .product-attribute {
  font-family: var(--hd-sans, system-ui) !important;
  font-size: .92rem !important;
}
#blockcart-modal .cart-content-btn,
#blockcart-modal .modal-footer { justify-content: space-between; }

/* L'image du produit ajouté : angles droits, filet fin. */
#blockcart-modal img {
  border-radius: 0 !important;
  border: 1px solid #CDCDC3;
}

/* La croix de fermeture : discrète, sans pastille. */
.modal .btn-close {
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: .45;
}
.modal .btn-close:hover { opacity: 1; }

/* ==========================================================================
   CORRECTIF — boutons d'icône et de quantité
   Ma règle globale .btn appliquait un fort rembourrage et des petites
   capitales à TOUS les boutons, y compris les petits boutons d'icône :
   le sélecteur de quantité se disloquait, le moins passant au-dessus du plus.
   ========================================================================== */

.btn-touchspin,
.btn-square-icon,
.js-touchspin,
.quantity-button .btn,
.bootstrap-touchspin .btn,
[class*="touchspin"] .btn,
.modal .btn-close,
.btn-close {
  padding: 0 !important;
  font-size: 1rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  min-width: 2.4rem;
  height: 2.4rem;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.btn-close { min-width: 2rem; height: 2rem; }

/* Le sélecteur de quantité : une ligne, trois cases jointives. */
.quantity-button,
.bootstrap-touchspin,
[class*="touchspin"] {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  border: 1px solid var(--hd-rule, #CDCDC3);
  background: #fff;
}
.quantity-button .btn,
.bootstrap-touchspin .btn {
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--hd-ink, #17181A) !important;
}
.quantity-button input,
.bootstrap-touchspin input,
input[name="qty"],
.js-cart-line-product-quantity {
  width: 3rem !important;
  text-align: center;
  border: 0 !important;
  border-inline: 1px solid var(--hd-rule, #CDCDC3) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-family: var(--hd-sans, system-ui) !important;
  font-size: .9rem !important;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   PANIER ET TUNNEL DE COMMANDE
   ========================================================================== */

#cart .page-content h1,
#checkout h1,
.page-cart h1,
#cart-summary h1,
.cart-grid h1,
.cart-summary h1,
#cart .h1, #cart h2, #cart .h2,
.cart-summary .h3,
#js-checkout-summary h2,
.card-block h2,
.checkout-step h2 {
  font-family: var(--hd-serif, Georgia, serif) !important;
  font-weight: 300 !important;
  letter-spacing: -0.012em !important;
  text-transform: none !important;
}

.card,
.cart-container .card {
  background: none !important;
  border: 1px solid var(--hd-rule, #CDCDC3) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.cart-summary-line,
.cart-item,
.cart-overview { font-family: var(--hd-sans, system-ui); }

/* --------------------------------------------------------------------------
   Le récapitulatif de commande
   Il était encadré d'un filet, mais le thème parent ne prévoit aucune marge
   intérieure sur .cart-summary : les lignes et le bouton touchaient le bord.
   S'ajoutaient un filet sous le total, la marge de .cart-summary__total et
   celle de .cart-summary__actions — d'où la bande vide avant le bouton — puis
   un <hr> juste sous le cadre, qui doublait le trait.

   On retire le cadre. Le récapitulatif se lit comme le reste du site : des
   filets, pas de carte. Un trait clair ouvre la liste, un trait plein annonce
   le total, le bouton respire en dessous.
   -------------------------------------------------------------------------- */

.cart-summary {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Le titre « Récapitulatif », à la même distance que les autres titres. */
.cart-grid__aside-wrapper > h2 {
  margin-block-end: 1.1rem !important;
}

/* Les sous-totaux : un filet clair en tête, plus de marge sous le bloc. */
.cart-summary__subtotals {
  border-block-start: 1px solid var(--hd-rule, #CDCDC3);
  margin-block-end: 0 !important;
}

.cart-summary__line {
  padding-block: .72rem !important;
  font-family: var(--hd-sans, system-ui);
  font-size: .9rem;
}

.cart-summary__label { color: var(--hd-soft, #5B5D57); }
.cart-summary__value {
  color: var(--hd-ink, #17181A);
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums;
}

/* Le total : un trait plein au-dessus, rien en dessous, et le montant en
   romain comme les prix des cartels. */
.cart-summary__total {
  border-block: 0 !important;
  border-block-start: 1px solid var(--hd-ink, #17181A) !important;
  padding-block: 0 !important;
  margin-block-end: 0 !important;
}

.cart-summary__total .cart-summary__line {
  padding-block: .95rem !important;
}

.cart-summary__line--bold { font-weight: 500 !important; }

.cart-summary__total .cart-summary__label { color: var(--hd-ink, #17181A); }

.cart-summary__total .cart-summary__value {
  font-family: var(--hd-serif, Georgia, serif);
  font-size: 1.22rem;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
}

/* Le bouton : pleine largeur, mais détaché du dernier filet. */
.cart-summary__actions {
  padding-block-start: 1.5rem !important;
}

.cart-summary__actions .btn { width: 100%; }

/* Le code promo, quand il est actif : même grammaire de filets. */
.cart-summary__voucher { margin-block-end: 0 !important; }
.cart-voucher__accordion {
  border-block-end: 1px solid var(--hd-rule, #CDCDC3) !important;
  margin-block-end: 0 !important;
}

/* Le <hr> du gabarit parent tombait juste sous le cadre : trait en double. */
.cart-grid__aside-wrapper > hr {
  display: none !important;
}

/* Les garanties du module de réassurance, détachées du bouton. */
.cart-grid__aside-wrapper .block-reassurance,
.cart-grid__aside-wrapper [class*="reassurance"] {
  margin-block-start: 2.2rem;
}

/* ==========================================================================
   MESSAGES ET NOTIFICATIONS
   Le bandeau rose de Bootstrap chevauchait l'en-tête.
   ========================================================================== */

.toast-container,
[data-ps-target="toast-container"] {
  top: auto !important;
  bottom: 1.5rem !important;
  right: 1.5rem !important;
  z-index: 1080;
}

.toast,
.alert {
  border-radius: 0 !important;
  border: 1px solid var(--hd-rule, #CDCDC3) !important;
  background: #F1F1EC !important;
  color: var(--hd-ink, #17181A) !important;
  box-shadow: 0 16px 40px rgba(23, 24, 26, .12) !important;
  font-family: var(--hd-sans, system-ui) !important;
  font-size: .9rem !important;
  line-height: 1.5;
  padding: 1rem 1.2rem !important;
}
/* Un message d'erreur garde un filet rouge sur son bord, sans fond criard. */
.alert-danger,
.toast.bg-danger,
.alert-warning {
  border-left: 3px solid #9B2C1F !important;
  background: #F1F1EC !important;
  color: var(--hd-ink, #17181A) !important;
}
.alert-success,
.toast.bg-success { border-left: 3px solid #4A6B4A !important; }

/* --------------------------------------------------------------------------
   Pied de page : l'adresse e-mail
   Deux problèmes. Sa couleur venait de theme.css, prévue pour un pied
   sombre, et mes règles ne l'atteignaient pas : ce lien n'est pas dans
   .footer-block__list mais dans le module de coordonnées. Et la colonne
   était trop étroite pour ses vingt-quatre caractères, d'où la coupure au
   milieu du mot.
   -------------------------------------------------------------------------- */

/* Colonnes un peu plus larges : l'adresse tient désormais sur une ligne. */
.ft-links {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

/* Couleur forcée sur tous les liens du pied, quel que soit le module. */
.ft-main a,
.ft-main a span,
.ft-links a,
.ft-links a span,
.ft-main a[href^="mailto"],
.ft-main a[href^="tel"],
.ft-main .text-muted,
.ft-main [class*="muted"] {
  color: #5B5D57 !important;
  -webkit-text-fill-color: #5B5D57;
  opacity: 1 !important;
  text-decoration: none !important;
}
.ft-main a:hover,
.ft-main a:hover span {
  color: #17181A !important;
  -webkit-text-fill-color: #17181A;
}

/* L'adresse e-mail : un cran plus petite, et coupure seulement en dernier
   recours plutôt qu'au milieu du mot. */
.ft-main a[href^="mailto"] {
  font-size: .82rem !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* L'icône d'enveloppe du module, alignée sur la première ligne. */
.ft-main .material-icons,
.ft-links .material-icons {
  font-size: 1rem !important;
  color: #17181A !important;
  vertical-align: baseline;
  margin-right: .4em;
}

/* L'adresse e-mail est retirée du pied : elle est déjà accessible par la
   page contact et par l'entrée Contactez-nous de la colonne voisine, et sa
   longueur d'un seul tenant déformait la colonne. L'adresse postale reste —
   c'est un signal de confiance et un repère pour les recherches locales. */
.ft-main a[href^="mailto"] { display: none !important; }
.ft-main li:has(a[href^="mailto"]),
.ft-main div:has(> a[href^="mailto"]) { display: none !important; }

/* --------------------------------------------------------------------------
   Pied de page : l'adresse dans la colonne marque

   Deux pièges. Les blocs du module portent des classes de colonnes Bootstrap
   (col-md-6 col-lg-3) : dans la colonne marque, ça les réduisait à une
   centaine de pixels, d'où la coupure tous les deux mots. Et forcer chaque
   élément en bloc empilait les fragments d'adresse sur six lignes.

   On neutralise les colonnes, on passe le tout en flux continu, et on
   sépare les segments par une virgule. Même taille et même couleur que la
   ligne de délai juste au-dessus.
   -------------------------------------------------------------------------- */

.ft-links {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.ft-brand__address {
  margin: 0 0 1.6rem;
  font-family: var(--hd-sans, system-ui);
  font-size: 0.78rem;
  line-height: 1.7;
  color: #888;
  max-width: 38ch;
}

/* Les classes de colonnes Bootstrap portées par le bloc du module. */
.ft-brand__address > *,
.ft-brand__address [class*="col-"] {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
}

/* Titre, icônes et bouton de replis : rien à garder ici. */
.ft-brand__address h1,
.ft-brand__address h2,
.ft-brand__address h3,
.ft-brand__address h4,
.ft-brand__address .footer-block__title,
.ft-brand__address [class*="title"],
.ft-brand__address .material-icons,
.ft-brand__address i,
.ft-brand__address button { display: none !important; }

/* Flux continu : tout en ligne, même fonte, même couleur. */
.ft-brand__address div,
.ft-brand__address section,
.ft-brand__address ul,
.ft-brand__address li,
.ft-brand__address p,
.ft-brand__address span {
  display: inline !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  line-height: inherit !important;
  color: inherit !important;
}
.ft-brand__address .footer-block__content,
.ft-brand__address ul { display: inline !important; }

/* Une virgule entre les segments, jamais avant le premier. */
.ft-brand__address li + li::before,
.ft-brand__address p + p::before { content: ", "; }

/* ==========================================================================
   FICHE PRODUIT : LA BARRE D'ACHAT ET LE PANNEAU DE MENU
   --------------------------------------------------------------------------
   Sur mobile, la barre collante du bas (nuancier + Ajouter au panier) passait
   par-dessus le panneau de menu ouvert.

   Ce n'est pas une bataille de z-index ordinaire. Le panneau est un enfant de
   <header class="js-sticky-header">, qui est en position sticky avec
   z-index: 1021. Ce header crée donc un contexte d'empilement, et le
   z-index: 1045 du panneau ne vaut qu'à l'intérieur de ce contexte : face à
   la barre, c'est 1021 contre 1040. La barre gagne.

   On repasse la barre sous le header. Le voile de l'offcanvas, lui, est posé
   sur le <body> à 1040 : il recouvre alors la barre comme le reste de la page,
   ce qui est le comportement attendu.
   ========================================================================== */

.pe-sticky-bar { z-index: 1020 !important; }

/* ==========================================================================
   FICHE PRODUIT — MISE EN ACCORD AVEC LE RESTE DU SITE
   --------------------------------------------------------------------------
   La fiche produit venait d'un autre chantier : deux fonds crème différents,
   des filets plus foncés, une pilule noire pour le bouton, et cinq barres de
   couleur en travers de la page. Rien de tout ça n'existe ailleurs sur le
   site. On ramène la fiche sur la même grammaire : un seul fond craie, des
   filets fins, des angles droits.
   ========================================================================== */

/* Un seul fond pour toute la page, comme partout ailleurs. */
:root { --pe-bg-light: #F1F1EC; }

/* Les barres de couleur sont retirées du gabarit. La règle reste au cas où
   un module en réinjecterait. */
.pe-colorbar { display: none !important; }

/* La bande d'information : plus un bloc teinté, un simple filet. */
.pe-info-bar {
  background: none !important;
  border-block-end: 1px solid var(--pe-border) !important;
  padding-block: 2.2rem 1.6rem !important;
}

.pe-features,
.pe-description-short {
  background: none !important;
}

/* --------------------------------------------------------------------------
   La barre du bas : nom du modèle, couleur, prix, bouton.

   Elle était en ligne flexible, et chaque élément se plaçait comme il pouvait :
   le nom flottait plus bas que le nuancier, le prix se détachait du bouton, et
   l'espace entre les blocs venait des marges du thème parent plutôt que d'un
   rythme décidé.

   On passe à une grille nommée. Quatre cases sur une ligne en grand écran ;
   deux lignes en dessous de 1100px ; trois en dessous de 620px, le bouton
   prenant alors toute la largeur. Les quatre cases sont alignées sur leur
   milieu, ce qui remet le nom, le nuancier et le prix sur le même axe.
   -------------------------------------------------------------------------- */

.pe-sticky-bar {
  background: #F1F1EC !important;
  border-block-start: 1px solid var(--pe-border) !important;
  padding: .9rem 2rem !important;
}

.pe-sticky-bar form { margin: 0; }

.pe-sticky-bar__inner {
  display: grid !important;
  /* Le vide est placé volontairement AVANT le prix : le nom et le nuancier
     restent groupés à gauche, le prix et le bouton à droite. Avec la colonne
     souple au milieu, la couleur se retrouvait à égale distance des deux,
     flottant au centre sans raison. */
  grid-template-columns: minmax(0, auto) auto minmax(0, 1fr) auto;
  grid-template-areas: "name variants price buy";
  align-items: center;
  column-gap: 2.2rem !important;
  row-gap: .9rem !important;
  max-width: 1280px !important;
  margin-inline: auto;
}

.pe-bar__id            { grid-area: name; min-width: 0; max-width: 28ch; }
.pe-sticky-bar__variants { grid-area: variants; min-width: 0; flex: none !important; }
.pe-bar__price         { grid-area: price; justify-self: end; }
.pe-sticky-bar__actions { grid-area: buy; }

/* Le nom du modèle */
.pe-bar__name {
  margin: 0;
  font-family: var(--pe-serif);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--pe-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* La couleur choisie et le nuancier sur UNE seule ligne.

   La version précédente empilait un libellé au-dessus des pastilles : le
   bloc faisait deux lignes quand tout le reste de la barre en faisait une,
   et le nom du modèle se retrouvait centré sur rien. Le mot COULEUR est
   d'ailleurs superflu à côté de cinq pastilles de couleur — on garde la
   valeur, qui est l'information utile. */

/* Les conteneurs intermédiaires du thème — le formulaire, le bloc d'actions,
   le conteneur du bouton — portaient leurs propres marges. La barre mesurait
   133px de haut pour une ligne de contenu, et le bouton flottait 16px plus
   haut que le reste. On les remet à zéro. */
.pe-sticky-bar .js-product-actions,
.pe-sticky-bar .product__actions,
.pe-sticky-bar form,
.pe-sticky-bar .pe-sticky-bar__actions,
.pe-sticky-bar .product__add-to-cart-container,
.pe-sticky-bar .product-add-to-cart {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

.pe-sticky-bar .pe-sticky-bar__actions {
  display: flex !important;
  align-items: center;
}

.pe-sticky-bar__variants .product__variants {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 1.2rem;
  margin: 0 !important;
  padding: 0 !important;
}

.pe-sticky-bar__variants .product-variant {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: .85rem;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
}

.pe-sticky-bar__variants .product-variant__label {
  display: flex !important;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
}

.pe-sticky-bar__variants .product-variant__legend { display: none !important; }

.pe-sticky-bar__variants .product-variant__selected {
  display: inline !important;
  font-family: var(--pe-sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--pe-ink);
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

/* Le nuancier.

   Les pastilles portaient trois anneaux superposés — celui du thème parent,
   celui de la pastille intérieure et le mien — d'où la cible concentrique.
   On remet tout à plat, puis on redessine une seule bague : fine et grise au
   repos, pleine et sombre sur la couleur choisie. Rien d'autre. */

.pe-sticky-bar__variants .product-variant__colors {
  display: flex !important;
  align-items: center;
  gap: .45rem !important;
  margin: 0 !important;
  flex-wrap: wrap;
}

.pe-sticky-bar__variants .product-variant__color {
  margin: 0 !important;
  padding: 0 !important;
  display: block;
}

.pe-sticky-bar__variants .input-color__label,
.pe-sticky-bar__variants .input-color__label .color,
.pe-sticky-bar__variants .input-color__label--active,
.pe-sticky-bar__variants .input-color__label .color.active {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.pe-sticky-bar__variants .input-color__label {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(23, 24, 26, .18) !important;
  transition: box-shadow .18s ease;
}

.pe-sticky-bar__variants .input-color__label .color {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-size: cover;
  background-position: center;
}

.pe-sticky-bar__variants .input-color__label:hover {
  box-shadow: 0 0 0 1px rgba(23, 24, 26, .5) !important;
}

.pe-sticky-bar__variants .input-color__input:checked + .input-color__label,
.pe-sticky-bar__variants .input-color__label.input-color__label--active {
  box-shadow: 0 0 0 1.5px var(--pe-ink) !important;
}

/* Le prix, aligné sur le milieu de la barre et collé au bouton */
.pe-bar__price {
  font-family: var(--pe-serif);
  font-size: 1.24rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--pe-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Le bouton. La pilule venait de product-editorial.css, avec une spécificité
   de .pe-add-to-cart.btn : il faut monter d'un cran pour la reprendre.
   Angles droits, capitales espacées, inversion au survol — les boutons du
   reste du site. */
.pe-sticky-bar .pe-add-to-cart.btn,
.pe-sticky-bar .btn.btn-primary {
  border-radius: 0 !important;
  background: var(--pe-ink) !important;
  border: 1px solid var(--pe-ink) !important;
  color: #F1F1EC !important;
  font-family: var(--pe-sans) !important;
  font-size: .76rem !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 1.02em 2.3em !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transition: background .3s ease, color .3s ease;
}

.pe-sticky-bar .pe-add-to-cart.btn:hover:not(:disabled),
.pe-sticky-bar .btn.btn-primary:hover:not(:disabled) {
  background: transparent !important;
  color: var(--pe-ink) !important;
}

/* Deux lignes.

   La version précédente coupait à 1100px et mettait le nuancier à gauche,
   le bouton à droite, sur la même ligne. Entre les deux : une colonne souple
   de plusieurs centaines de pixels, donc un trou. Et rien ne le justifiait,
   puisque la ligne unique tenait encore : mesurée dans la page, la barre a
   besoin d'environ 820px pour ses quatre blocs (nom, nuancier, prix, bouton).

   On garde donc la ligne unique jusqu'à 1000px — une marge de sécurité pour
   les noms de couleur longs — puis on ne casse qu'UNE fois : la ligne
   d'identité reste entière (nom, nuancier, prix), et le bouton passe dessous
   sur toute la largeur. Aucun vide fabriqué, et la même logique de bande
   pleine que l'état étroit qu'on garde plus bas. */
@media (max-width: 1000px) {
  .pe-sticky-bar__inner {
    grid-template-columns: minmax(0, auto) auto minmax(0, 1fr);
    grid-template-areas:
      "name variants price"
      "buy  buy      buy";
    column-gap: 1.6rem !important;
    row-gap: .85rem !important;
  }

  .pe-sticky-bar__actions { justify-self: stretch; }

  .pe-sticky-bar .pe-add-to-cart.btn,
  .pe-sticky-bar .btn.btn-primary {
    width: 100%;
    justify-content: center;
  }
}

/* Trois lignes : le nuancier prend sa propre ligne quand le nom, la couleur
   et le prix ne tiennent plus côte à côte. */
@media (max-width: 760px) {
  .pe-sticky-bar { padding: .8rem 1.25rem !important; }

  .pe-sticky-bar__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name     price"
      "variants variants"
      "buy      buy";
    row-gap: .8rem !important;
  }

  .pe-sticky-bar__actions { justify-self: stretch; }

  .pe-sticky-bar .pe-add-to-cart.btn,
  .pe-sticky-bar .btn.btn-primary {
    width: 100%;
    justify-content: center;
    padding: 1.05em 1.4em !important;
  }

  .pe-bar__name  { font-size: 1.05rem; }
  .pe-bar__price { font-size: 1.12rem; }
}

/* --------------------------------------------------------------------------
   Le message « Votre panier contient N de ces articles »

   Deux problèmes, pas un seul. Le premier était le cadre et l'ombre : une
   carte, alors que le site ne pose que des bandes. Le second, celui qui
   faisait vraiment de travers : ce message est enfermé dans un conteneur
   Bootstrap centré, large de 540 px, au milieu d'une page qui, elle, occupe
   toute la largeur. La bande commençait donc bien après le fil d'Ariane.

   On neutralise ce conteneur pour ce seul cas, et la bande prend la largeur
   de la page, alignée sur la même marge de 2rem que le fil d'Ariane et la
   bande d'information de la fiche.
   -------------------------------------------------------------------------- */

main .container:has(> .alert),
.wrapper .container:has(> .alert) {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin-inline: 0 !important;
}

.alert.alert-info,
.alert.alert-dismissible {
  position: relative;
  width: 100%;
  margin: 0 !important;
  /* Pas de filets : le fond suffit à détacher la bande de la page, et la
     photo qui suit doit venir se poser directement dessous. Un filet en plus
     du fond, c'est le cadre qu'on cherchait à enlever. */
  border: 0 !important;
  border-radius: 0 !important;
  background: #E8E8E1 !important;
  box-shadow: none !important;
  color: var(--hd-ink, #17181A) !important;
  font-family: var(--hd-sans, system-ui) !important;
  font-size: .88rem !important;
  line-height: 1.5;
  padding: .95rem 4rem .95rem 2rem !important;
}

/* La croix de fermeture : discrète, alignée sur la marge droite de la page,
   sans le carré gris de Bootstrap. */
.alert.alert-dismissible .btn-close {
  position: absolute;
  inset-block-start: 50% !important;
  inset-inline-end: 2rem !important;
  transform: translateY(-50%);
  margin: 0 !important;
  padding: 0 !important;
  width: 1.5rem;
  height: 1.5rem;
  min-width: 0;
  background-color: transparent !important;
  border: 0 !important;
  opacity: .45;
}

.alert.alert-dismissible .btn-close:hover { opacity: 1; }

/* ==========================================================================
   LES AVIS PRODUIT
   --------------------------------------------------------------------------
   « Commentaires (0) — aucun avis pour le moment » annonce au visiteur que
   personne n'a encore acheté. Sur une pièce à 264 €, c'est l'inverse de l'effet
   recherché.

   Le bloc est donc masqué par défaut et n'apparaît qu'à partir du premier
   avis réellement publié. Le module reste actif : les avis continuent d'être
   collectés, ils s'afficheront d'eux-mêmes le jour où il y en a.
   ========================================================================== */

.product-comments-wrapper { display: none; }

.product-comments-wrapper:has(.product-comment-list-item:not(#empty-product-comment)) {
  display: block;
  border-block-start: 1px solid var(--pe-border, #CDCDC3);
  margin-block-start: 3rem;
  padding: 2.6rem 2rem 3rem;
}

#product-comments-list-header .h2,
#product-comments-list-header h2,
.product-comments-wrapper .h2 {
  font-family: var(--pe-serif, Georgia, serif) !important;
  font-weight: 300 !important;
  font-size: 1.6rem !important;
  letter-spacing: -0.012em !important;
  text-transform: none !important;
  margin-block-end: 1.6rem !important;
}

.product-comments-wrapper .product-comment-list-item {
  border-block-start: 1px solid var(--pe-border, #CDCDC3);
  padding-block: 1.4rem !important;
}

/* ==========================================================================
   EN-TÊTE EN LARGEUR RÉDUITE
   --------------------------------------------------------------------------
   Deux défauts liés.

   Le libellé « Panier » porte les classes Bootstrap d-none d-md-flex : il
   disparaît sous 768px. Comme le parti pris de cet en-tête est le texte sans
   icône, et que les icônes ont été retirées, il ne restait plus que « (5) »
   suspendu dans le vide. On force le libellé à rester lisible.

   Le libellé était masqué par layout-editorial.css, la feuille héritée du
   chantier précédent, qui visait un en-tête à icônes. Elle le cache deux fois
   en !important, dont une avec une spécificité de trois classes : il faut
   monter au même niveau pour la reprendre.

   Le compte, lui, est repris en bas du tiroir dès que le burger apparaît :
   inutile de le laisser aussi dans la barre, où son libellé était masqué de
   la même façon — un lien invisible mais cliquable.
   ========================================================================== */

/* Le libellé porte la classe utilitaire Bootstrap d-none, et Hummingbird
   range Bootstrap dans une couche de cascade (@layer utilities). Un
   !important déclaré DANS une couche l'emporte sur un !important écrit hors
   couche, quelle que soit la spécificité : un sélecteur d'identifiant ne
   suffisait pas. On écrit donc la règle dans la même couche, où elle passe
   après celle de Bootstrap. */
@layer utilities {
  .hd-header .hd-actions .header-block__title,
  .hd-actions .blockcart .header-block__title,
  .hd-actions .ps-shoppingcart .header-block__title {
    display: inline !important;
  }
}

@media (max-width: 1319.98px) {
  .hd-actions #_mobile_ps_customersignin,
  .hd-actions #_desktop_ps_customersignin { display: none !important; }
}

/* Les langues au bas du tiroir : deux liens, pas un menu déroulant. */
#mobileMenu .hd-drawer-langs {
  display: flex;
  gap: 1.1rem;
  margin-top: .9rem;
}

#mobileMenu .hd-drawer-langs a {
  font-family: var(--hd-sans, system-ui);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8A8C84;
  text-decoration: none;
  border-bottom: 0 !important;
  padding: 0;
}

#mobileMenu .hd-drawer-langs a:hover { color: #17181A; }

#mobileMenu .hd-drawer-langs a.is-current {
  color: #17181A;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ==========================================================================
   FICHE PRODUIT — DEUX DERNIERS ÉCARTS
   ========================================================================== */

/* 1. La couleur écrite passe APRÈS le nuancier.
      Avant, elle le précédait : comme les noms n'ont pas la même longueur —
      Ivoire, Noir de carbone — les pastilles se déplaçaient à chaque
      changement, et l'œil perdait celle qu'il venait de viser. Le nuancier
      est maintenant fixe, c'est le texte qui s'allonge à droite.
      On garde l'ordre du code, où la légende précède le groupe de boutons
      pour les lecteurs d'écran ; seul l'affichage est inversé. */
.pe-sticky-bar__variants .product-variant__colors { order: 1; }
.pe-sticky-bar__variants .product-variant__label  { order: 2; }

/* 2. Le texte de présentation était en Archivo, la police des libellés,
      alors que tous les textes de lecture du site sont en Newsreader — le
      chapô de l'accueil, les étapes du geste, les pages de contenu. La règle
      visait le conteneur, mais le paragraphe à l'intérieur recevait sa propre
      police. On vise aussi les enfants, et on reprend exactement les valeurs
      du chapô de l'accueil : 18px, interligne 1,55, gris de lecture. */
.pe-description-short__inner,
.pe-description-short__inner p,
.pe-description-short__inner li,
.pe-description-short__inner span:not([class]),
.pe-description-short__inner div {
  font-family: var(--pe-serif) !important;
  font-size: 1.125rem !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: #5B5D57 !important;
}

.pe-description-short__inner strong,
.pe-description-short__inner b {
  font-weight: 500 !important;
  color: var(--pe-ink) !important;
}

/* ==========================================================================
   L'ENCART D'ÉDITION
   --------------------------------------------------------------------------
   Sous les caractéristiques, un bloc qui explique le procédé de la pièce.
   Il change selon la caractéristique « Édition » saisie en back-office, et
   ne s'affiche pas du tout si elle est absente.

   Une bande pleine largeur sur le fond soutenu, un schéma au trait à gauche,
   le texte à droite sur une colonne de lecture mesurée. Le schéma est dessiné
   en SVG dans le gabarit : il hérite de la couleur du texte, donc il suit la
   palette sans image à charger.
   ========================================================================== */

.pe-edition {
  background: #E8E8E1;
  border-block: 1px solid var(--pe-border, #CDCDC3);
  padding-block: 3.4rem;
  padding-inline: 2rem;
}

.pe-edition__inner {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  align-items: center;
  gap: 2.4rem 3.5rem;
  max-width: 62rem;
  margin-inline: auto;
}

.pe-edition__figure {
  color: var(--pe-ink, #17181A);
  opacity: .9;
}

.pe-edition__figure svg {
  display: block;
  width: 100%;
  height: auto;
}

.pe-edition__over {
  font-family: var(--pe-sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pe-muted, #8A8C84);
  margin: 0 0 1rem;
}

.pe-edition__title {
  font-family: var(--pe-serif);
  font-weight: 300;
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--pe-ink, #17181A);
  margin: 0 0 1rem;
  text-wrap: balance;
}

.pe-edition__body {
  font-family: var(--pe-serif);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.6;
  color: #5B5D57;
  max-width: 52ch;
  margin: 0;
}

/* En étroit, le schéma passe au-dessus et se réduit : il illustre, il ne
   doit pas occuper la moitié de l'écran. */
@media (max-width: 760px) {
  .pe-edition {
    padding-block: 2.6rem;
    padding-inline: 1.25rem;
  }

  .pe-edition__inner {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .pe-edition__figure { max-width: 11rem; }
}

/* ==========================================================================
   UNE SEULE GOUTTIÈRE
   --------------------------------------------------------------------------
   Quatre bords gauches cohabitaient sur la même page : l'en-tête posait son
   contenu à 85px du bord, le fil d'Ariane aussi, le corps des pages de liste
   à 70, et le pied à 53. Trois valeurs pour une seule colonne de lecture.

   On prend l'en-tête comme référence, puisque c'est lui qui donne le ton en
   haut de page : une boîte de 1280 centrée, 32px de marge intérieure. Le
   corps des listes et le pied s'y alignent.
   ========================================================================== */

.page-content.hd-listing,
.hd-listing {
  max-width: 1280px !important;
  margin-inline: auto !important;
  padding-inline: 32px !important;
}

/* Le pied posait déjà sa gouttière sur le conteneur extérieur. J'y avais
   ajouté une seconde marge sur le conteneur intérieur : au-dessus de 1344px
   la largeur maximale absorbait l'erreur et tout semblait aligné, mais en
   dessous les deux marges s'additionnaient et le pied rentrait de 32px de
   trop. On ne touche donc pas à la marge extérieure ; on cale seulement la
   largeur du bloc intérieur sur celle du contenu de l'en-tête, 1216px. */
.ft-main__inner,
.ft-bottom__inner {
  max-width: 1216px;
  padding-inline: 0;
}

@media (max-width: 640px) {
  .page-content.hd-listing,
  .hd-listing {
    padding-inline: 20px !important;
  }

  .ft-main,
  .ft-bottom {
    padding-inline: 20px !important;
  }

  /* L'en-tête passait à 16px en étroit, quatre pixels de moins que le reste. */
  .hd-header__inner {
    padding-inline: 20px !important;
  }
}

/* ==========================================================================
   PAGE DE LISTE ET PIED — MISE EN COHÉRENCE
   Sept écarts relevés dans le code, corrigés ensemble.
   ========================================================================== */

/* 1. Le prix. Il était en Archivo dans la liste et en Newsreader sur la fiche.
      Même information, même voix. */
.hd-products .product-miniature__prices,
.hd-products .product-miniature__prices *,
.hd-products .product-price-and-shipping,
.hd-products .product-price-and-shipping *,
.hd-products .product__price,
.hd-products .price {
  font-family: var(--hd-serif, Georgia, serif) !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--hd-ink, #17181A) !important;
  font-variant-numeric: tabular-nums;
}

/* 2. Les pastilles de couleur : carrées de 24px ici, rondes de 20px sur la
      fiche. On garde les rondes, et la même bague. */
.hd-products .input-color__label,
.hd-products .product-variant__color .color,
.hd-products a.color,
.hd-products .color {
  border: 0 !important;
  outline: 0 !important;
  border-radius: 999px !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  box-shadow: 0 0 0 1px rgba(23, 24, 26, .18) !important;
  background-size: cover !important;
  background-position: center !important;
}

.hd-products .input-color__input:checked + .input-color__label,
.hd-products .input-color__label--active,
.hd-products .color.active {
  box-shadow: 0 0 0 1.5px var(--hd-ink, #17181A) !important;
}

.hd-products .variant-links,
.hd-products .product-miniature__variants ul,
.hd-products .product-variant__colors {
  display: flex !important;
  gap: .45rem !important;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

/* 3. Les boîtes blanches. C'étaient les seuls blancs purs d'une page craie,
      et elles attiraient l'œil sur des commandes secondaires. */
.hd-listing .btn-outline-primary,
.hd-listing .btn-tertiary,
.hd-listing .dropdown-menu,
.hd-products .btn,
.quantity-button,
.products__sort-dropdown-button,
.products__filter-button {
  background: #F1F1EC !important;
  border: 1px solid var(--hd-rule, #CDCDC3) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--hd-ink, #17181A) !important;
}

/* 4 et 5. Le compteur en double et le tri.
   « 1 PIÈCE » est déjà en tête de page ; « IL Y A 1 PRODUIT. » le répétait
   juste en dessous, avec un autre mot que celui du site. Et trier une liste
   d'une poignée de pièces ne sert à rien. Le conteneur reste en place, vide :
   PrestaShop s'en sert pour recharger la liste en AJAX. */
.hd-products .products__selection { display: none !important; }

/* 6. Aperçu rapide : une fenêtre qui reprend en petit ce que la fiche montre
      en grand. Un clic de plus et une seconde mise en page à maintenir. */
.product-miniature__quickview-button,
.product-miniature__quickview-touchscreen,
.hd-products [data-link-action="quickview"],
.hd-products .quick-view {
  display: none !important;
}

/* 7. Le pied écrivait son texte en gris 888 — la valeur de la feuille du
      chantier précédent — alors que le gris de lecture du site est 5B5D57.
      Le pied paraissait délavé par rapport au reste. */
.ft-brand__desc,
.ft-brand__note,
.ft-links a,
.ft-links li a,
.ft-main .footer-block__list a,
.ft-main .footer-block__content a {
  color: #5B5D57 !important;
}

.ft-brand__desc,
.ft-brand__note {
  font-size: .9rem !important;
  line-height: 1.7 !important;
}

/* --------------------------------------------------------------------------
   La vignette : ni panier, ni œil.

   Le bouton d'ajout au panier posait un vrai problème, pas seulement
   graphique : la pièce existe en cinq teintes, et ce bouton engage la teinte
   par défaut sans que le visiteur ait choisi. Le rôle d'une vignette est de
   mener à la pièce, pas de vendre à sa place.

   L'œil d'aperçu rapide survivait à ma règle précédente : la classe réelle
   est product-miniature__quickview-touch, pas -touchscreen. Corrigé.
   -------------------------------------------------------------------------- */

.hd-products .product-miniature__actions,
.hd-products .product-miniature__add,
.hd-products .quantity-button,
.product-miniature__quickview-touch {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Les pastilles d'état sur les vignettes

   PrestaShop pose une étiquette « Neuf » sur les produits récents, en bleu
   Bootstrap — la seule couleur saturée de tout le site. Sur un catalogue de
   quelques pièces, elle n'apprend rien : tout y est récent. Et elle disparaît
   d'elle-même au bout de quelques jours, ce qui en fait un signal qui ment
   par omission ensuite.

   Masquée partout. Si une vraie mention de nouveauté devient utile, elle
   prendra la forme d'un cartel en petites capitales, pas d'une pastille
   colorée.
   -------------------------------------------------------------------------- */

.product-flags,
.product-miniature .product-flags,
.hd-products .product-flags,
.pe-page .product-flags {
  display: none !important;
}

/* ==========================================================================
   LES PHOTOS PRODUIT, AU FORMAT DES PHOTOS RÉELLES
   --------------------------------------------------------------------------
   Tes photos sont en portrait — 2263 × 2828 pixels pour l'une d'elles, soit
   du 4/5. Or tous les formats d'image de la boutique sont carrés, et
   PrestaShop comblait la différence en ajoutant du blanc à gauche et à
   droite. Les bandes blanches n'étaient donc pas un défaut de mise en page :
   elles étaient cuites dans les fichiers générés.

   Deux corrections. Côté PrestaShop, la génération conserve maintenant le
   format d'origine au lieu de compléter en blanc. Côté thème, les
   emplacements adoptent le portrait plutôt que d'y forcer un carré.
   ========================================================================== */

/* La grille éditoriale passe du carré au 4/5, le format de tes prises de vue. */
.pe-editorial-grid__item {
  aspect-ratio: 4 / 5 !important;
}

/* La bande pleine largeur reste horizontale, mais moins écrasée qu'en 16/9 :
   une photo verticale y perdait presque toute la pièce au recadrage. */
.pe-fullwidth-photo {
  aspect-ratio: 3 / 2 !important;
}

/* Les vignettes de liste : un format fixe et un recadrage, plutôt que des
   images de hauteurs différentes qui dérèglent la grille. */
.hd-products .product-miniature__image-link,
.hd-products .product-miniature__image {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.hd-products .product-miniature__image-link img,
.hd-products .product-miniature__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center;
}

/* ==========================================================================
   LE BLOC « AUTRES PRODUITS » DE LA FICHE
   --------------------------------------------------------------------------
   Il arrivait tel que le thème parent le rend : des cartes blanches, un titre
   en Inter — une troisième police, qui n'existe nulle part ailleurs sur le
   site — des pastilles carrées, un sélecteur de quantité et un bouton panier.

   Les vignettes sont exactement les mêmes que celles des pages de liste, à la
   classe près. hd.js leur ajoute donc .hd-products, et tout le format cartel
   déjà écrit s'applique. Il ne reste ici que l'habillage de la section.
   ========================================================================== */

.ps-categoryproducts,
.ps-crossselling,
.ps-accessories,
.ps-viewedproduct {
  background: none;
  border-block-start: 1px solid var(--pe-border, #CDCDC3);
  padding: 3.2rem 2rem 3.6rem;
}

.ps-categoryproducts .module-products,
.ps-crossselling .module-products,
.ps-accessories .module-products,
.ps-viewedproduct .module-products {
  max-width: 1280px;
  margin-inline: auto;
}

/* Le titre : même voix que les titres de section du site. */
.ps-categoryproducts .section-title,
.ps-crossselling .section-title,
.ps-accessories .section-title,
.ps-viewedproduct .section-title,
.module-products .section-title {
  font-family: var(--pe-serif, Georgia, serif) !important;
  font-weight: 300 !important;
  font-size: 1.6rem !important;
  line-height: 1.15 !important;
  letter-spacing: -0.012em !important;
  text-transform: none !important;
  color: var(--pe-ink, #17181A) !important;
  margin: 0 0 1.8rem !important;
}

/* La grille du module n'est pas celle du thème : on la reprend. */
.module-products .products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2.4rem 1.8rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

@media (max-width: 640px) {
  .ps-categoryproducts,
  .ps-crossselling,
  .ps-accessories,
  .ps-viewedproduct {
    padding-inline: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   La photo pleine largeur : vraiment pleine largeur.

   Un rapport fixe ne garantit rien : si la photo est plus verticale que le
   rapport demandé, elle remplit la hauteur et laisse du vide sur les côtés.
   On fixe donc une hauteur, on laisse la largeur courir d'un bord à l'autre,
   et on recadre en haut et en bas — ce qui est le comportement voulu pour un
   bandeau.
   -------------------------------------------------------------------------- */

.pe-fullwidth-photo {
  aspect-ratio: auto !important;
  width: 100%;
  height: clamp(380px, 58vh, 720px);
  overflow: hidden;
}

.pe-fullwidth-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block;
}

/* ==========================================================================
   PAGE D'ACCUEIL — VERSION ÉDITIONS
   --------------------------------------------------------------------------
   La page raconte maintenant trois façons de faire avant de montrer les
   pièces, et sépare les luminaires, le mobilier et les pièces uniques — qui
   ne se vendent pas de la même manière.

   Rien ici ne touche l'en-tête ni le pied de page.
   ========================================================================== */

/* --- fonds de section ---------------------------------------------------- */
.hd-page .hd-section--paper { background: var(--hd-ground-2); }

.hd-page .hd-section--ink {
  background: #191A1C;
  color: #ECECE6;
}
.hd-section--ink .hd-cartel { color: #7C7E79; }
.hd-section--ink .hd-lede,
.hd-section--ink .hd-muted { color: #A8AAA4; }
.hd-section--ink .hd-sec-head { border-bottom-color: #34373B; }
.hd-section--ink .hd-step { border-top-color: #34373B; }
.hd-section--ink .hd-step:first-child { border-top-color: #ECECE6; }
.hd-section--ink .hd-step p { color: #A8AAA4; }

.hd-sec-head__aside { max-width: 36ch; margin: 0; }

/* --- lien souligné ------------------------------------------------------- */
.hd-page .hd-link {
  font-family: var(--hd-sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  white-space: nowrap;
}

/* --- bouton clair, pour les fonds sombres et photographiques ------------- */
.hd-page .hd-btn--light {
  border-color: rgba(255, 255, 255, .75);
  color: #fff;
  background: transparent;
}
.hd-page .hd-btn--light:hover {
  background: #fff;
  color: #17181A;
}
.hd-cartel--light { color: rgba(255, 255, 255, .72) !important; }

/* --------------------------------------------------------------------------
   Héros photographique

   L'ancien héros montrait un dessin au trait à la place de la photo. Il y a
   maintenant de vraies images : la lampe devant les balles de papier dit la
   matière en une seconde, ce qu'aucune phrase ne fait aussi vite.
   -------------------------------------------------------------------------- */
.hd-hero2 {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(84vh, 740px);
  overflow: hidden;
  background: #20211F;
}
.hd-hero2__img { position: absolute; inset: 0; }
.hd-hero2__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}
.hd-hero2__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(15,16,15,.42) 0%, rgba(15,16,15,.10) 38%, rgba(15,16,15,.78) 100%);
}
.hd-hero2__in {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  color: #fff;
}
.hd-hero2__in .hd-display { color: #fff; }
.hd-hero2__in .hd-cartel { margin-bottom: 1.2rem; }
.hd-hero2__sub {
  max-width: 48ch;
  margin: 1.5rem 0 2.2rem;
  color: rgba(255, 255, 255, .88);
  font-family: var(--hd-serif);
  font-size: clamp(1.08rem, 1.6vw, 1.35rem);
  line-height: 1.5;
}
.hd-hero2__note {
  position: absolute;
  right: var(--hd-gutter);
  bottom: 1.3rem;
  margin: 0;
  color: rgba(255, 255, 255, .6);
  font-family: var(--hd-sans);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
@media (max-width: 720px) { .hd-hero2__note { display: none; } }

/* --------------------------------------------------------------------------
   Manifeste et chiffres
   -------------------------------------------------------------------------- */
.hd-manif {
  display: grid;
  gap: clamp(2rem, 4vw, 3.4rem);
  padding-top: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 900px) {
  .hd-manif { grid-template-columns: 1.25fr .75fr; align-items: start; }
}
.hd-manif__lead {
  font-family: var(--hd-serif);
  font-size: clamp(1.25rem, 2.1vw, 1.7rem);
  line-height: 1.45;
  max-width: 34ch;
  margin: 0 0 1.2rem;
}
.hd-manif__text .hd-muted {
  font-family: var(--hd-sans);
  font-size: .98rem;
  line-height: 1.7;
  max-width: 46ch;
  margin: 0 0 1.5rem;
}
.hd-stats {
  display: grid;
  gap: 1.4rem;
  border-left: 1px solid var(--hd-rule);
  padding-left: clamp(1.4rem, 3vw, 2.4rem);
}
.hd-stat b {
  display: block;
  font-family: var(--hd-serif);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
}
.hd-stat span {
  font-family: var(--hd-sans);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hd-ink-faint);
}

/* --------------------------------------------------------------------------
   Les trois éditions
   -------------------------------------------------------------------------- */
.hd-ed {
  display: grid;
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: center;
  padding-block: clamp(2.6rem, 5vw, 4.4rem);
  border-top: 1px solid var(--hd-rule);
}
@media (min-width: 960px) {
  .hd-ed { grid-template-columns: 1fr 1fr; }
  .hd-ed--flip .hd-ed__media { order: 2; }
}
.hd-ed__num {
  font-family: var(--hd-serif);
  font-size: .95rem;
  color: var(--hd-ink-faint);
  margin: 0;
}
.hd-ed__title { margin: .45rem 0 1.2rem; }
.hd-ed__diagram { color: var(--hd-ink); margin-bottom: 1.4rem; }
.hd-ed__diagram svg { width: 100%; max-width: 220px; height: auto; display: block; }
.hd-ed__body {
  font-family: var(--hd-sans);
  font-size: .98rem;
  line-height: 1.7;
  color: var(--hd-ink-soft);
  max-width: 46ch;
  margin: 0;
}
.hd-ed__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.7rem 0;
  padding-block: 1.05rem;
  border-block: 1px solid var(--hd-rule);
}
.hd-ed__facts dt {
  font-family: var(--hd-sans);
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--hd-ink-faint);
  margin-bottom: .3rem;
}
.hd-ed__facts dd {
  margin: 0;
  font-family: var(--hd-serif);
  font-size: 1.02rem;
  line-height: 1.25;
}

/* La mosaïque : une grande image, deux petites. Les vignettes sont celles
   des produits de l'édition, pas des images décoratives. */
.hd-ed__media {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
}
.hd-ed__media figure { margin: 0; overflow: hidden; background: var(--hd-ground-2); }
.hd-ed__media figure a { display: block; width: 100%; height: 100%; }
.hd-ed__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hd-ed__media figure:nth-child(1) { grid-row: span 2; aspect-ratio: 4 / 5; }
.hd-ed__media figure:nth-child(2),
.hd-ed__media figure:nth-child(3) { aspect-ratio: 1; }

/* --------------------------------------------------------------------------
   Bandeau de matière
   -------------------------------------------------------------------------- */
.hd-band {
  margin-top: clamp(2.4rem, 5vw, 4rem);
  overflow: hidden;
  height: clamp(200px, 26vw, 330px);
}
.hd-band img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --------------------------------------------------------------------------
   Mobilier
   -------------------------------------------------------------------------- */
.hd-furn { display: grid; gap: clamp(1.8rem, 4vw, 3.2rem); align-items: center; }
@media (min-width: 960px) { .hd-furn { grid-template-columns: 1.3fr .7fr; } }
.hd-furn__img { aspect-ratio: 16 / 11; overflow: hidden; background: var(--hd-ground); }
.hd-furn__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hd-furn__copy a { text-decoration: none; color: inherit; }
.hd-furn__text {
  font-family: var(--hd-sans);
  font-size: .96rem;
  line-height: 1.7;
  color: var(--hd-ink-soft);
  margin-top: .9rem;
}
.hd-furn__text p { margin: 0 0 .7em; }
.hd-furn__price {
  font-family: var(--hd-serif);
  font-size: 1.5rem;
  margin: 0 0 1.5rem;
}
.hd-speclist { list-style: none; padding: 0; margin: 1.5rem 0 1.8rem; }
.hd-speclist li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .58rem 0;
  border-bottom: 1px solid var(--hd-rule);
  font-size: .92rem;
}
.hd-speclist li span:first-child {
  font-family: var(--hd-sans);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hd-ink-faint);
  align-self: center;
}

/* --------------------------------------------------------------------------
   Pièces uniques
   -------------------------------------------------------------------------- */
.hd-uniq { display: grid; gap: 12px; }
@media (min-width: 860px) { .hd-uniq { grid-template-columns: repeat(3, 1fr); } }
.hd-uniq figure { margin: 0; overflow: hidden; background: #101112; }
.hd-uniq figure a { display: block; width: 100%; height: 100%; }
.hd-uniq img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 860px) {
  .hd-uniq figure:nth-child(1) { grid-row: span 2; aspect-ratio: 3 / 4; }
  .hd-uniq figure:nth-child(2) { grid-column: span 2; aspect-ratio: 2 / 1; }
  .hd-uniq figure:nth-child(3),
  .hd-uniq figure:nth-child(4) { aspect-ratio: 1; }
}
@media (max-width: 859px) { .hd-uniq figure { aspect-ratio: 4 / 3; } }

.hd-sizes {
  display: flex;
  gap: 2.2rem;
  flex-wrap: wrap;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.3rem;
  border-top: 1px solid #34373B;
}
.hd-size b {
  display: block;
  font-family: var(--hd-serif);
  font-size: 1.7rem;
  font-weight: 300;
  line-height: 1;
}
.hd-size span {
  font-family: var(--hd-sans);
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #7C7E79;
}
.hd-size--end { margin-left: auto; }
@media (max-width: 720px) { .hd-size--end { margin-left: 0; } }

/* --------------------------------------------------------------------------
   Palette
   -------------------------------------------------------------------------- */
.hd-pal {
  display: grid;
  gap: clamp(1.2rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.hd-swatch b {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(23, 24, 26, .16);
  margin-bottom: .85rem;
}
.hd-swatch strong {
  display: block;
  font-family: var(--hd-serif);
  font-weight: 400;
  font-size: 1.05rem;
}
.hd-swatch span {
  font-family: var(--hd-sans);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hd-ink-faint);
}

/* --------------------------------------------------------------------------
   Presse
   -------------------------------------------------------------------------- */
.hd-quotes { display: grid; gap: clamp(1.8rem, 3.5vw, 3rem); }
@media (min-width: 860px) { .hd-quotes { grid-template-columns: repeat(3, 1fr); } }
.hd-quote { margin: 0; }
.hd-quote p {
  font-family: var(--hd-serif);
  font-size: 1.2rem;
  line-height: 1.45;
  font-style: italic;
  margin: 0 0 .9rem;
}
.hd-quote cite {
  font-style: normal;
  font-family: var(--hd-sans);
  font-size: .64rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--hd-ink-faint);
}

/* --------------------------------------------------------------------------
   Matière — la photo remplace le dessin
   -------------------------------------------------------------------------- */
.hd-matiere__img { overflow: hidden; aspect-ratio: 3 / 2; background: var(--hd-ground-2); }
.hd-matiere__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --------------------------------------------------------------------------
   Mosaïques : s'adapter au nombre réel de pièces

   Une édition peut n'avoir qu'un ou deux produits — c'est le cas aujourd'hui
   de l'injection artisanale. La grille à trois cases laissait alors un trou.
   -------------------------------------------------------------------------- */
.hd-ed__media:not(:has(figure:nth-child(2))) { grid-template-columns: 1fr; }
.hd-ed__media:not(:has(figure:nth-child(2))) figure:nth-child(1) {
  grid-row: auto;
  aspect-ratio: 4 / 5;
}

.hd-ed__media:has(figure:nth-child(2)):not(:has(figure:nth-child(3))) {
  grid-template-columns: 1fr 1fr;
}
.hd-ed__media:has(figure:nth-child(2)):not(:has(figure:nth-child(3))) figure:nth-child(1) {
  grid-row: auto;
}
.hd-ed__media:has(figure:nth-child(2)):not(:has(figure:nth-child(3))) figure:nth-child(2) {
  aspect-ratio: 4 / 5;
}

@media (min-width: 860px) {
  .hd-uniq:not(:has(figure:nth-child(4))) { grid-template-columns: repeat(2, 1fr); }
  .hd-uniq:not(:has(figure:nth-child(4))) figure { grid-row: auto; grid-column: auto; aspect-ratio: 4 / 5; }
  .hd-uniq:not(:has(figure:nth-child(3))) { grid-template-columns: repeat(2, 1fr); }
  .hd-uniq:not(:has(figure:nth-child(2))) { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Palette : la vraie matière plutôt qu'un aplat

   Les cinq teintes sont désormais montrées par une photo de surface. Un aplat
   de couleur mentait sur le produit : la matière est mouchetée de fibres et de
   points sombres, c'est précisément ce qu'un acheteur veut voir avant de
   choisir.
   -------------------------------------------------------------------------- */
.hd-swatch b {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(23, 24, 26, .18);
}

/* ==========================================================================
   LA LETTRE — REPRISE

   Le module d'inscription rend une carte blanche : <section class="…
   bg-body-tertiary py-3 py-lg-4">. Sur la bande sombre, ça donnait un
   rectangle clair posé au milieu, avec un titre invisible parce que clair sur
   blanc, et le texte légal en gris foncé.

   Les règles précédentes visaient juste, mais elles étaient écrites hors
   couche : bg-body-tertiary et text-body-secondary sont des utilitaires
   Bootstrap déclarés DANS @layer utilities, avec !important. Un !important
   hors couche perd contre un !important en couche, quelle que soit la
   spécificité. Il faut donc écrire au même endroit.

   Le site n'utilise pas de cadres, mais des bandes : le formulaire est
   transparent, un simple champ souligné et un bouton plein.
   ========================================================================== */
@layer utilities {
  .hd-lettre__form section,
  .hd-lettre__form .bg-body-tertiary,
  .hd-lettre__form .container,
  .hd-lettre__form .row,
  .hd-lettre__form form,
  .hd-lettre__form div {
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .hd-lettre__form section,
  .hd-lettre__form .container,
  .hd-lettre__form .row,
  .hd-lettre__form .col-lg-4,
  .hd-lettre__form .col-lg-6 {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  /* Le titre du module fait doublon avec celui de la section. */
  .hd-lettre__form .h3,
  .hd-lettre__form h3 { display: none !important; }

  /* Mention de désinscription : lisible, mais discrète. */
  .hd-lettre__form p,
  .hd-lettre__form .text-body-secondary,
  .hd-lettre__form .fs-6 {
    color: color-mix(in srgb, #F1F1EC 58%, transparent) !important;
    font-family: var(--hd-sans) !important;
    font-size: .76rem !important;
    line-height: 1.55 !important;
    margin: 0 !important;
  }
}

/* La ligne champ + bouton, et l'espacement sous elle. */
.hd-lettre__form .d-flex {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin-bottom: 1.1rem !important;
  width: 100%;
  max-width: 420px;
}

.hd-lettre__form input[type="email"],
.hd-lettre__form input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, #F1F1EC 38%, transparent) !important;
  border-radius: 0 !important;
  color: #F1F1EC !important;
  font-family: var(--hd-sans);
  font-size: .9rem;
  letter-spacing: .01em;
  padding: .95em .1em;
  height: auto;
}
.hd-lettre__form input::placeholder {
  color: color-mix(in srgb, #F1F1EC 50%, transparent) !important;
  opacity: 1;
}
.hd-lettre__form input:focus {
  outline: none;
  border-bottom-color: var(--hd-glow) !important;
  box-shadow: none !important;
}

.hd-lettre__form button,
.hd-lettre__form input[type="submit"],
.hd-lettre__form .btn {
  flex: none;
  align-self: stretch;
  background: #F1F1EC !important;
  color: #17181A !important;
  border: 1px solid #F1F1EC !important;
  border-radius: 0 !important;
  font-family: var(--hd-sans) !important;
  font-size: .68rem !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  padding: 0 1.9em !important;
  margin-left: .9rem;
  box-shadow: none !important;
  transition: background .3s ease, color .3s ease;
}
.hd-lettre__form button:hover,
.hd-lettre__form input[type="submit"]:hover,
.hd-lettre__form .btn:hover {
  background: transparent !important;
  color: #F1F1EC !important;
}

/* Les messages de retour du module, succès comme erreur. */
.hd-lettre__form .alert {
  background: none !important;
  border: 0 !important;
  border-left: 2px solid var(--hd-glow) !important;
  border-radius: 0 !important;
  color: #F1F1EC !important;
  padding: .3rem 0 .3rem .9rem !important;
  margin-top: .9rem !important;
  font-size: .82rem !important;
}

@media (max-width: 560px) {
  .hd-lettre__form .d-flex { flex-wrap: wrap; }
  .hd-lettre__form button,
  .hd-lettre__form input[type="submit"],
  .hd-lettre__form .btn {
    margin-left: 0;
    margin-top: .9rem;
    width: 100%;
    padding-block: 1.05em !important;
  }
}

/* ==========================================================================
   PAGINATION

   Le thème parent affiche des boutons Bootstrap : encadrés, bleus, dans la
   police du système. Sur une page de catégorie qui n'a par ailleurs aucun
   cadre, ça saute aux yeux.

   On garde la structure du parent — pagination__container, pagination__number
   et pagination__nav — et on refait l'habillage : un filet unique sur toute la
   largeur, le décompte à gauche, les numéros à droite, en Archivo comme les
   autres libellés du site. La page courante est soulignée plutôt qu'encadrée.
   ========================================================================== */
.hd-page .products__pagination { margin-top: clamp(2.5rem, 5vw, 4rem); }

.hd-page .pagination__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 1.2rem;
  border-top: 1px solid var(--hd-rule);
}

.hd-page .pagination__number {
  font-family: var(--hd-sans);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hd-ink-faint);
}

.hd-page .pagination__nav { margin-left: auto; }

.hd-page .pagination {
  display: flex;
  align-items: center;
  gap: .15rem;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
}
.hd-page .pagination .page-item { margin: 0; }

.hd-page .pagination .page-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--hd-sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--hd-ink-faint);
  padding: .45rem .75rem;
  line-height: 1;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}
.hd-page .pagination .page-link:hover:not(:disabled),
.hd-page .pagination .page-link:focus-visible:not(:disabled) {
  color: var(--hd-ink);
  outline: none;
}

/* La page courante : soulignée, pas encadrée. */
.hd-page .pagination .page-item.active .page-link {
  color: var(--hd-ink);
  border-bottom-color: var(--hd-ink);
}

.hd-page .pagination .page-link:disabled,
.hd-page .pagination .page-link.disabled {
  opacity: .3;
  cursor: default;
}

.hd-page .pagination .page-link .material-icons {
  font-size: 1.05rem;
  line-height: 1;
}

/* Précédent et Suivant : le mot seul suffit, la flèche fait doublon à sa
   gauche comme à sa droite. On garde la flèche, on retire le mot en dessous
   de la largeur où les deux tiennent sans se serrer. */
@media (max-width: 720px) {
  .hd-page .pagination .page-link.previous span,
  .hd-page .pagination .page-link.next span { display: none !important; }
  .hd-page .pagination__container { justify-content: space-between; }
}

/* Un bouton mort n'a rien à faire sur la page.

   Sur la première page, Précédent ne mène nulle part : le thème parent le
   rendait quand même, désactivé, avec le cadre par défaut du navigateur.
   Plutôt que d'habiller une commande inerte, on la retire — il reste la
   flèche du sens où l'on peut aller. Idem pour Suivant sur la dernière page. */
.hd-page .pagination .page-item:has(.page-link:disabled),
.hd-page .pagination .page-item:has(.page-link.disabled) { display: none; }

/* Filet de sécurité pour les navigateurs sans :has() */
.hd-page .pagination .page-link:disabled,
.hd-page .pagination .page-link.disabled {
  display: none;
}

/* Et aucun cadre résiduel au clic : le repère visuel est le soulignement. */
.hd-page .pagination .page-link:focus,
.hd-page .pagination .page-link:focus-visible,
.hd-page .pagination .page-link:active {
  outline: none;
  box-shadow: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  background: none;
}
.hd-page .pagination .page-link:focus-visible {
  border-bottom-color: var(--hd-ink);
  color: var(--hd-ink);
}

/* ==========================================================================
   PAGES DE RAYON ET DE FAMILLE — Luminaires, Mobilier, Invider, Splitt…

   Un rayon présente ses familles en quinconce, sans lister leurs pièces :
   la grille qui suit les rassemble toutes, pour qu'on n'ait pas à traverser
   la page entière avant d'atteindre le dernier modèle.

   Une famille présente sa tête, ses pièces avec leurs dimensions, le geste
   qui les a faites, le nuancier, puis les familles voisines.

   Tout est sous .hd-page, comme le reste du fichier : rien ne fuit ailleurs.
   ========================================================================== */

/* ---------- bandes pleine largeur de la boîte de contenu ----------
   .hd-listing pose 32px de marge intérieure (20px en étroit). Une bande
   colorée doit les reprendre à l'envers pour aller d'un bord à l'autre,
   sans jamais dépasser : la boîte ne sort pas de la fenêtre, la bande non
   plus. Pas de 100vw ici, qui aurait ajouté la largeur de l'ascenseur. */
.hd-page .hd-fam--paper,
.hd-page .hd-geste {
  margin-inline: -32px;
  padding-inline: 32px;
}
@media (max-width: 640px) {
  .hd-page .hd-fam--paper,
  .hd-page .hd-geste {
    margin-inline: -20px;
    padding-inline: 20px;
  }
}

/* ---------- bascule d'une famille à l'autre ---------- */

.hd-page .hd-bascule {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .9rem;
  padding-bottom: 1rem;
  margin-bottom: clamp(1.6rem, 3.5vw, 2.6rem);
  border-bottom: 1px solid var(--hd-rule);
}
.hd-page .hd-bascule a {
  font-family: var(--hd-sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--hd-ink-faint);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: .25em;
  transition: color .25s ease, border-color .25s ease;
}
.hd-page .hd-bascule a:hover { color: var(--hd-ink); }
.hd-page .hd-bascule__parent { margin-right: .2rem; }
.hd-page .hd-bascule__sep {
  font-family: var(--hd-sans);
  font-size: .7rem;
  color: var(--hd-rule);
  margin-right: .4rem;
}
.hd-page .hd-bascule__lien--ici {
  color: var(--hd-ink);
  border-bottom-color: var(--hd-ink);
}

/* ---------- en-têtes de section ---------- */

.hd-page .hd-sec__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hd-rule);
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.hd-page .hd-sec__head > div { min-width: 0; }
.hd-page .hd-sec__title {
  margin: .35rem 0 0;
  font-family: var(--hd-serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -.015em;
}
.hd-page .hd-sec__head--pieces {
  margin-top: clamp(2.2rem, 5vw, 3.6rem);
}

/* ---------- bloc famille ---------- */

.hd-page .hd-familles { margin-top: clamp(1.6rem, 3.5vw, 2.6rem); }

.hd-page .hd-fam {
  padding-block: clamp(2.2rem, 4.4vw, 3.6rem);
  border-top: 1px solid var(--hd-rule);
}
.hd-page .hd-familles .hd-fam:first-child { border-top: 0; padding-top: 0; }
.hd-page .hd-fam--paper { background: var(--hd-ground-2); border-top-color: transparent; }

.hd-page .hd-fam--tete {
  padding-top: 0;
  padding-bottom: clamp(2.2rem, 4.4vw, 3.4rem);
  border-top: 0;
}

.hd-page .hd-fam__top {
  display: grid;
  gap: clamp(1.6rem, 3.6vw, 3.2rem);
  align-items: center;
}
@media (min-width: 960px) {
  .hd-page .hd-fam__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .hd-page .hd-fam--flip .hd-fam__media { order: -1; }
  .hd-page .hd-fam--tete .hd-fam__top { align-items: end; }
}

.hd-page .hd-fam__num {
  margin: 0 0 .45rem;
  font-family: var(--hd-serif);
  font-size: .95rem;
  color: var(--hd-ink-faint);
}
.hd-page .hd-fam__title {
  margin: 0 0 .9rem;
  font-family: var(--hd-serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.06;
  letter-spacing: -.015em;
}
.hd-page .hd-fam__title--h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 200; }
.hd-page .hd-fam__title a { color: inherit; text-decoration: none; }
.hd-page .hd-fam__title a:hover { text-decoration: underline; text-underline-offset: .12em; }

.hd-page .hd-fam__desc { max-width: 46ch; }
.hd-page .hd-fam__desc p {
  margin: 0 0 .85em;
  color: var(--hd-ink-soft);
  max-width: none;
}
.hd-page .hd-fam__desc p:first-child {
  font-size: clamp(1.08rem, 1.5vw, 1.28rem);
  line-height: 1.5;
}
.hd-page .hd-fam__desc p:not(:first-child) {
  font-family: var(--hd-sans);
  font-size: .95rem;
  line-height: 1.7;
}
.hd-page .hd-fam__desc p:last-child { margin-bottom: 0; }

/* ---------- les chiffres d'une famille ---------- */

.hd-page .hd-faits {
  display: flex;
  gap: clamp(1.6rem, 3vw, 2.6rem);
  flex-wrap: wrap;
  padding-block: 1.05rem;
  border-block: 1px solid var(--hd-rule);
  margin-block: clamp(1.3rem, 2.6vw, 1.9rem);
}
.hd-page .hd-fait b {
  display: block;
  font-family: var(--hd-serif);
  font-weight: 300;
  font-size: 1.55rem;
  line-height: 1;
  white-space: nowrap;
}
.hd-page .hd-fait span {
  display: block;
  margin-top: .35rem;
  font-family: var(--hd-sans);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--hd-ink-faint);
}

/* ---------- le quinconce ----------
   Décalage vertical des visuels plutôt qu'une grille en damier : ça tient
   encore quand une famille n'a qu'une ou deux photos. */

.hd-page .hd-fam__media {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  align-items: start;
}
.hd-page .hd-fam__media figure {
  margin: 0;
  overflow: hidden;
  background: var(--hd-ground);
}
.hd-page .hd-fam--paper .hd-fam__media figure { background: var(--hd-ground); }
.hd-page .hd-fam__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
.hd-page .hd-fam__media a { display: block; height: 100%; }
.hd-page .hd-fam__media figure:hover img { transform: scale(1.03); }

.hd-page .hd-fam__media--1 figure:nth-child(1) { grid-column: 1 / 7; aspect-ratio: 4 / 3; }

.hd-page .hd-fam__media--2 figure:nth-child(1) { grid-column: 1 / 5; aspect-ratio: 5 / 4; }
.hd-page .hd-fam__media--2 figure:nth-child(2) {
  grid-column: 5 / 7;
  aspect-ratio: 3 / 4;
  margin-top: clamp(1.2rem, 3vw, 2.4rem);
}

.hd-page .hd-fam__media--3 figure:nth-child(1) { grid-column: 1 / 5; aspect-ratio: 1; }
.hd-page .hd-fam__media--3 figure:nth-child(2) {
  grid-column: 5 / 7;
  aspect-ratio: 3 / 4;
  margin-top: clamp(1.4rem, 4vw, 3rem);
}
.hd-page .hd-fam__media--3 figure:nth-child(3) {
  grid-column: 2 / 5;
  aspect-ratio: 16 / 10;
  margin-top: -6%;
}

/* En étroit, les décalages se lisent mal : les visuels reprennent le rang. */
@media (max-width: 720px) {
  .hd-page .hd-fam__media { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hd-page .hd-fam__media figure,
  .hd-page .hd-fam__media--2 figure:nth-child(1),
  .hd-page .hd-fam__media--2 figure:nth-child(2),
  .hd-page .hd-fam__media--3 figure:nth-child(1),
  .hd-page .hd-fam__media--3 figure:nth-child(2),
  .hd-page .hd-fam__media--3 figure:nth-child(3) {
    grid-column: auto;
    aspect-ratio: 1;
    margin-top: 0;
  }
  .hd-page .hd-fam__media--3 figure:nth-child(1) { grid-column: 1 / 3; aspect-ratio: 16 / 10; }
  .hd-page .hd-fam__media--1 figure:nth-child(1) { grid-column: 1 / 3; aspect-ratio: 4 / 3; }
}

/* ---------- la ligne ajoutée sous chaque cartel ----------
   Sur une page de famille, les dimensions : c'est la seule chose qui sépare
   une Sista d'une Mom. Sur un rayon, l'Édition. */

.hd-page .hd-cartel__ligne {
  margin: .3rem 0 0;
  font-family: var(--hd-sans);
  font-size: .72rem;
  line-height: 1.45;
  color: var(--hd-ink-faint);
  max-width: none;
}

/* ---------- le geste ---------- */

.hd-page .hd-geste {
  background: #1E2023;
  color: #ECECE6;
  padding-block: clamp(2.4rem, 5vw, 4rem);
  margin-top: clamp(2.4rem, 5vw, 4rem);
}
.hd-page .hd-geste .hd-cartel { color: rgba(236, 236, 230, .52); }
.hd-page .hd-geste__title {
  margin: .4rem 0 1.1rem;
  font-family: var(--hd-serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.1;
  color: #F4F4EE;
  letter-spacing: -.015em;
}
.hd-page .hd-geste .rich-text { max-width: 52ch; }
.hd-page .hd-geste .rich-text p {
  margin: 0 0 .9em;
  font-family: var(--hd-sans);
  font-size: .97rem;
  line-height: 1.75;
  color: rgba(236, 236, 230, .78);
  max-width: none;
}
.hd-page .hd-geste .rich-text p:last-child { margin-bottom: 0; }
.hd-page .hd-geste a { color: #F4F4EE; }

/* ---------- le nuancier ---------- */

.hd-page .hd-teintes { margin-top: clamp(2.4rem, 5vw, 4rem); }
.hd-page .hd-pal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: clamp(.9rem, 2vw, 1.6rem);
}
.hd-page .hd-pal__teinte b {
  display: block;
  aspect-ratio: 1;
  border-radius: 999px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(23, 24, 26, .16);
  margin-bottom: .7rem;
}
.hd-page .hd-pal__teinte span {
  font-family: var(--hd-sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hd-ink-soft);
}
.hd-page .hd-pal__note {
  margin: clamp(1.4rem, 3vw, 2rem) 0 0;
  max-width: 66ch;
  font-family: var(--hd-sans);
  font-size: .92rem;
  line-height: 1.7;
  color: var(--hd-ink-soft);
}
.hd-page .hd-pal__note .hd-link { margin-left: .5rem; white-space: nowrap; }

/* ---------- les familles voisines ---------- */

.hd-page .hd-soeurs { margin-top: clamp(2.4rem, 5vw, 4rem); }
.hd-page .hd-soeurs__grid {
  display: grid;
  gap: clamp(1.2rem, 2.4vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.hd-page .hd-soeur { display: block; color: inherit; text-decoration: none; }
.hd-page .hd-soeur__img {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--hd-ground-2);
  margin-bottom: .8rem;
}
.hd-page .hd-soeur__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
.hd-page .hd-soeur:hover .hd-soeur__img img { transform: scale(1.04); }
.hd-page .hd-soeur__nom {
  margin: 0;
  font-family: var(--hd-serif);
  font-weight: 300;
  font-size: 1.35rem;
  line-height: 1.15;
}
.hd-page .hd-soeur__meta {
  margin: .35rem 0 0;
  font-family: var(--hd-sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hd-ink-faint);
  max-width: none;
}

/* ---------- fil d'Ariane et bascule ----------
   Les deux se suivaient en disant la même chose : « Accueil · Luminaires ·
   Amba », puis « Luminaires / Invider Amba Splitt Kokiy ». Deux lignes de
   navigation empilées, le nom de la famille écrit deux fois.

   Là où la bascule est présente — les pages de famille —, elle remplace le
   fil : elle porte le même chemin remontant, et en plus le moyen de passer
   d'une famille à l'autre. Partout ailleurs, le fil reste.

   Le balisage Schema.org du fil d'Ariane est écrit dans la tête du document,
   pas ici : Google continue de le lire. */
body:has(.hd-bascule) .breadcrumb__wrapper { display: none; }

.hd-page .hd-bascule:first-child { margin-top: -.4rem; }

/* ==========================================================================
   TIROIR MOBILE ET PANIER — trois corrections
   ========================================================================== */

/* ---------- 1. Le panier vide ne s'annonce plus ----------
   « PANIER (0) » occupait une place dans un bandeau déjà court sans rien
   apprendre. Le module pose lui-même la classe « inactive » quand le panier
   est vide, et la repose à chaque rafraîchissement : le lien réapparaît donc
   tout seul dès la première pièce ajoutée, sans recharger la page. */
.hd-actions .ps-shoppingcart .blockcart.inactive,
.hd-actions .blockcart.cart-preview.inactive { display: none !important; }

/* ---------- 2. Le chevron orphelin ----------
   La règle qui remet les entrées du tiroir en bloc — nécessaire, sinon la
   liste s'affichait en ligne — empilait aussi le bouton d'ouverture des
   sous-catégories sous son intitulé : une ligne vide avec une simple flèche.

   Plutôt que de rétablir le glissement de panneaux de Hummingbird, on
   supprime le bouton : le tiroir ne compte que quatre entrées et quatre
   familles, tout tient à l'écran. Un dépliage n'y ajouterait qu'un geste. */
#mobileMenu .menu__toggle-child { display: none !important; }

/* Et la liste des familles disparaît du tiroir : on passe de toute façon par
   la page du rayon, qui les présente une par une. Quatre entrées, rien
   d'autre. */
#mobileMenu .menu--child { display: none !important; }

/* ---------- 3. Le « FR » solitaire ----------
   PrestaShop déplace le sélecteur de langue du bandeau vers le tiroir sous
   une certaine largeur. Le tiroir affiche déjà FR · EN en bas, en toutes
   lettres : le menu déroulant faisait doublon, réduit à un « FR » flottant
   au milieu de rien. La devise est unique, son sélecteur ne sert pas. */
#mobileMenu .ps-mainmenu__selects,
#mobileMenu #_mobile_ps_languageselector,
#mobileMenu #_mobile_ps_currencyselector { display: none !important; }
#mobileMenu .ps-mainmenu__additionnals:has(.ps-mainmenu__selects):not(:has(#_mobile_ps_contactinfo > *)) {
  display: none !important;
}

/* ---------- 4. Plus sobre encore : plus de séparateurs ----------
   Un trait vertical entre les entrées du menu, un point médian entre les
   actions : deux signes pour marquer une coupure que l'espace marquait
   déjà. On les retire et on écarte un peu plus les mots — c'est l'espace
   qui sépare, comme dans le reste du site.

   Le trait du menu vient de layout-editorial.css, le point médian est posé
   par hd.js ; les deux se neutralisent ici, à un seul endroit. */
.hd-nav li + li::before {
  content: none !important;
  display: none !important;
}
.hd-nav .ps-mainmenu__desktop ul { gap: clamp(1.7rem, 3.2vw, 3.2rem) !important; }

.hd-actions .hd-sep { display: none !important; }
.hd-actions > *:not(.hd-mobile-only):not(.hd-menu-toggle) { padding: 0 1rem !important; }
.hd-actions > *:first-child:not(.hd-mobile-only):not(.hd-menu-toggle) { padding-left: 0 !important; }
.hd-actions > *:last-child:not(.hd-mobile-only):not(.hd-menu-toggle) { padding-right: 0 !important; }

/* ---------- 5. Le choix de la langue ----------
   Le gabarit du module est surchargé dans le thème enfant : deux liens au
   lieu d'une liste déroulante. Il ne reste plus qu'à les habiller comme le
   reste du bandeau. La langue en cours est en noir, l'autre en gris. */
.hd-actions .hd-langs {
  display: flex !important;
  align-items: center;
  gap: .55rem;
}
.hd-actions .hd-langs__item {
  font-family: var(--hd-sans) !important;
  font-size: .72rem !important;
  font-weight: 500 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  color: #8A8C84 !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent;
  padding-bottom: .15em;
  transition: color .25s ease, border-color .25s ease;
}
.hd-actions a.hd-langs__item:hover { color: #1A1A18 !important; opacity: 1; }
.hd-actions .hd-langs__item--ici {
  color: #1A1A18 !important;
  border-bottom-color: #1A1A18;
}

/* Panier vide : l'enveloppe reste dans le code — c'est la cible du
   rafraîchissement après un ajout — mais elle ne prend plus de place.

   Le témoin est « inactive », la classe que le module pose lui-même sur le
   bloc intérieur. Une classe posée sur l'enveloppe ne conviendrait pas :
   ps_shoppingcart.js ne remplace que .blockcart après un ajout, l'enveloppe
   garderait sa classe et le panier ne reviendrait jamais. Avec :has(), la
   règle suit l'état réel du bloc, sans recharger la page. */
.hd-actions #_desktop_ps_shoppingcart:has(.blockcart.inactive),
.hd-actions #_mobile_ps_shoppingcart:has(.blockcart.inactive),
.hd-actions .ps-shoppingcart:has(.blockcart.inactive) {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ---------- 6. Le bandeau, symétrique ----------
   Le nom du site déborde à gauche du corps de la page ; les actions à
   droite devaient déborder d'autant. Elles s'arrêtaient une centaine de
   pixels trop tôt, à cause de trois choses invisibles au bout de la ligne :
   deux conteneurs vides réservés au mobile, gardant chacun 16 px de marge de
   chaque côté, et le bouton du menu, masqué mais pas retiré.

   On retire ce qui est vide ou inutile à cette largeur, et l'écart entre les
   mots passe par gap plutôt que par des marges internes : un élément masqué
   ne laisse alors aucun vide, et le dernier mot visible — Connexion ou
   Panier — tombe exactement sur le bord, en miroir du logo. */
.hd-actions > div.hd-mobile-slot:empty { display: none !important; }

.hd-actions { gap: 2rem !important; }
.hd-actions > *:not(.hd-mobile-only):not(.hd-menu-toggle),
.hd-actions > *:first-child:not(.hd-mobile-only):not(.hd-menu-toggle),
.hd-actions > *:last-child:not(.hd-mobile-only):not(.hd-menu-toggle) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (min-width: 1320px) {
  .hd-actions > button.hd-menu-toggle { display: none !important; }
}
@media (max-width: 1319.98px) {
  .hd-actions { gap: 1.25rem !important; }
}

/* ==========================================================================
   ACCUEIL — refonte de septembre 2026 (préfixe hx-)
   Les sections réutilisent les briques du site (hd-section, hd-sec-head,
   hd-cartel, hd-h2, hd-lede, hd-link, hd-btn) ; ne sont définies ici que
   les pièces nouvelles de la maquette validée.
   ========================================================================== */

/* Le H1 est la petite ligne qui décrit ; le grand titre reste un paragraphe. */
.hd-page .hx-h1 {
  font-family: var(--hd-sans);
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin: 0 0 1.2rem;
  max-width: 44ch;
}
.hx-home .hd-hero2 .hd-display { margin: 0; }

.hx-aside { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; max-width: 27rem; }
.hx-aside .hd-lede { font-size: 1rem; }
.hx-aside-quote { margin: 0; font-family: var(--hd-serif); font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-style: italic; font-weight: 300; color: var(--hd-ink-soft); }
.hx-h3 { margin: 0 0 .6rem; font-family: var(--hd-serif); font-size: 1.45rem; font-weight: 400; line-height: 1.2; }
.hx-h3 a { color: inherit; text-decoration: none; }
.hx-home .hd-lede { font-family: var(--hd-sans); font-size: .95rem; line-height: 1.7; max-width: 62ch; }
.hx-note { font-family: var(--hd-sans); font-size: .75rem; line-height: 1.6; color: var(--hd-ink-faint); margin: 0; }
.hx-center { display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, 3.2rem); }

/* Citations signées */
.hx-quote { margin: 0; border-left: 1px solid currentColor; padding-left: clamp(1rem, 2vw, 1.75rem); display: flex; flex-direction: column; gap: .8rem; }
.hx-quote blockquote { margin: 0; font-family: var(--hd-serif); font-style: italic; font-weight: 300; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.4; }
.hx-quote--big blockquote { font-size: clamp(1.6rem, 2.9vw, 2.5rem); line-height: 1.3; }
.hx-quote figcaption { font-family: var(--hd-sans); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--hd-ink-faint); }
.hd-section--ink .hx-quote figcaption { color: #8E908A; }

/* Interlude */
.hx-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.hx-intro__txt { display: flex; flex-direction: column; gap: 1.1rem; }

/* Mosaïque Invider */
.hx-mosaic3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(170px, 21vw, 300px)); gap: 12px; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.hx-mosaic3 a { display: block; overflow: hidden; }
.hx-mosaic3 img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.hx-mosaic3 a:hover img { transform: scale(1.02); }
.hx-mosaic3__big { grid-column: span 2; grid-row: span 2; }
.hx-duo-txt { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 5fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.hx-duo-txt__sizes { display: flex; flex-direction: column; gap: 1rem; }

/* Rangée de chiffres (hauteurs, prix) */
.hx-sizes { display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem; align-items: flex-end; border-top: 1px solid var(--hd-rule); padding-top: 1.3rem; }
.hd-section--ink .hx-sizes { border-top-color: #34373B; margin-top: clamp(2rem, 4vw, 3rem); }
.hx-sizes div { display: flex; flex-direction: column; gap: .45rem; }
.hx-sizes b { font-family: var(--hd-serif); font-size: 1.8rem; font-weight: 300; line-height: 1; }
.hx-sizes span { font-family: var(--hd-sans); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--hd-ink-faint); }
.hd-section--ink .hx-sizes span { color: #8E908A; }
.hx-sizes__end { margin-left: auto; align-items: flex-end; text-align: right; }

/* Teintes */
.hx-swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.8rem, 2vw, 1.5rem); }
.hx-swatches figure { margin: 0; display: flex; flex-direction: column; gap: .8rem; }
.hx-swatches img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 999px 999px 0 0; display: block; }
.hx-swatches figcaption { font-family: var(--hd-serif); font-size: 1.25rem; }
.hx-swatches small { display: block; font-family: var(--hd-sans); font-size: .72rem; color: var(--hd-ink-faint); margin-top: .3rem; }
.hx-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; border-top: 1px solid var(--hd-rule); padding-top: 1.4rem; margin-top: clamp(2rem, 4vw, 3.5rem); }
.hd-page .hx-bar p { margin: 0; font-family: var(--hd-serif); font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 300; max-width: none; }

/* Mobilier : la citation sous la fiche */
.hx-furn-quote { margin-top: clamp(2rem, 4vw, 3rem); max-width: 40rem; margin-left: auto; }

/* Le geste */
.hx-geste { padding-bottom: 0 !important; }
.hx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1.2rem, 2.5vw, 2rem); }
.hx-steps li { display: flex; flex-direction: column; gap: .7rem; border-top: 1px solid var(--hd-ink); padding-top: 1.3rem; }
.hx-steps__n { font-family: var(--hd-sans); font-size: .68rem; letter-spacing: .16em; color: #8A5A22; }
.hx-steps__t { font-family: var(--hd-serif); font-size: 1.45rem; }
.hx-steps__d { font-family: var(--hd-sans); font-size: .88rem; line-height: 1.65; color: var(--hd-ink-soft); }
.hx-band { height: clamp(220px, 29vw, 420px); margin-top: clamp(3rem, 5vw, 4.5rem); overflow: hidden; }
.hx-band img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Pièces uniques */
.hx-uniq-txt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(2rem, 4vw, 3rem); align-items: start; }
.hx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: clamp(2rem, 4vw, 3rem); }
.hx-from { font-family: var(--hd-sans); font-size: .82rem; color: #A8AAA4; }

/* MoldingPulp */
.hx-mp { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.hx-mp__side { display: flex; flex-direction: column; gap: 1.2rem; }
.hd-page .hx-mp__lead { margin: 0; font-family: var(--hd-serif); font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 300; line-height: 1.5; color: var(--hd-ink-soft); }
.hx-mp__img { aspect-ratio: 4 / 5; overflow: hidden; margin-top: .5rem; }
.hx-mp__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hx-qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 3.5vw, 3rem) clamp(1.5rem, 3vw, 2.5rem); align-content: start; }
.hx-qa__item { border-top: 1px solid var(--hd-ink); padding-top: 1.2rem; }
.hx-qa__links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 1rem 2rem; }

/* Lampes injectées */
.hx-inj { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.hx-inj__img { aspect-ratio: 5 / 4; overflow: hidden; }
.hx-inj__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hx-inj__txt { display: flex; flex-direction: column; gap: 1.5rem; }
.hx-tech { border-top: 1px solid var(--hd-rule); }
.hx-tech div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.2rem; padding: .75rem 0; border-bottom: 1px solid var(--hd-rule); font-family: var(--hd-sans); font-size: .88rem; }
.hx-tech span:first-child { color: var(--hd-ink-faint); }

/* Commander */
.hx-facts-wrap { padding-bottom: clamp(4rem, 8vw, 7rem); }
.hx-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.2rem, 2.5vw, 2rem); }
.hx-facts div { display: flex; flex-direction: column; gap: .6rem; border-top: 1px solid var(--hd-ink); padding-top: 1.2rem; }
.hx-facts b { font-family: var(--hd-serif); font-size: 1.7rem; font-weight: 300; }
.hx-facts span { font-family: var(--hd-sans); font-size: .82rem; line-height: 1.55; color: var(--hd-ink-soft); }

/* Presse et boutiques */
.hx-shops { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.hx-shops div { display: flex; flex-direction: column; gap: .35rem; }
.hx-shops b { font-family: var(--hd-serif); font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 300; }
.hx-shops span { font-family: var(--hd-sans); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: #8E908A; }
.hx-press { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); border-top: 1px solid #34373B; padding-top: clamp(1.5rem, 3vw, 2.5rem); margin-bottom: clamp(2rem, 4vw, 3rem); }
.hx-press__q { margin: 0; }
.hd-page .hx-press__q p { margin: 0; font-family: var(--hd-serif); font-style: italic; font-weight: 300; font-size: 1.15rem; line-height: 1.45; }
.hx-press__q cite { display: block; margin-top: .9rem; font-family: var(--hd-sans); font-style: normal; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: #8E908A; }
.hd-page .hx-light { color: #ECECE6; }

@media (max-width: 1024px) {
  .hx-intro, .hx-mp, .hx-inj, .hx-uniq-txt { grid-template-columns: minmax(0, 1fr); }
  .hx-duo-txt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hx-duo-txt__sizes { grid-column: 1 / -1; }
  .hx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-shops { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx-press { grid-template-columns: minmax(0, 1fr); }
  .hx-furn-quote { margin-left: 0; }
}
@media (max-width: 700px) {
  .hx-duo-txt, .hx-qa, .hx-steps { grid-template-columns: minmax(0, 1fr); }
  .hx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx-shops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-mosaic3 { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .hx-mosaic3 a { aspect-ratio: 1 / 1; }
  .hx-mosaic3__big { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 3 !important; }
  .hx-sizes__end { margin-left: 0; align-items: flex-start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .hx-mosaic3 img { transition: none; } }

/* Accueil — photos de l'atelier (dossier « diver ») */
.hx-intro__main { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem); }
.hx-intro__img { aspect-ratio: 4 / 5; overflow: hidden; align-self: center; }
.hx-intro__img img, .hx-uniq-txt__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hx-uniq-txt { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; }
.hx-uniq-txt__col { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.5rem); }
.hx-uniq-txt__img { aspect-ratio: 3 / 4; overflow: hidden; }
@media (max-width: 1024px) { .hx-intro__img, .hx-uniq-txt__img { max-width: 30rem; } }
.hx-fig { margin: clamp(2rem, 4vw, 3rem) 0; }
.hx-fig img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   POINTS DE VENTE (page Magasins)
   Même largeur que l'en-tête : 1280px avec 32px de gouttière.
   ========================================================================== */
.page-content.hd-stores {
  max-width: 1280px !important;
  margin-inline: auto !important;
  padding: clamp(1.6rem, 4vw, 3rem) 32px clamp(3rem, 7vw, 5rem) !important;
  background: none;
}
.page-stores #center-column,
.page-stores .center-column { max-width: none; padding: 0; }
.hd-stores__head { max-width: 46rem; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.hd-stores__title {
  font-family: var(--hd-serif); font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.08; letter-spacing: -.01em;
  margin: 0 0 .8rem; text-wrap: balance;
}
.hd-stores__lede { color: var(--hd-ink-soft); font-size: 1.05rem; margin: 0; }
.hd-stores__group {
  font-family: var(--hd-sans); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--hd-ink-soft); margin: clamp(2rem, 5vw, 3.2rem) 0 1.2rem; padding-top: 1rem;
  border-top: 1px solid var(--hd-rule);
}
.hd-stores__grid {
  display: grid; gap: clamp(1.6rem, 3vw, 2.6rem) clamp(1.2rem, 2.4vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
}
.hd-store { display: flex; flex-direction: column; min-width: 0; }
.hd-store__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--hd-ground-2); margin-bottom: .9rem; }
.hd-store__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hd-store__name { font-family: var(--hd-serif); font-weight: 400; font-size: 1.3rem; line-height: 1.2; margin: 0; }
.hd-store__city {
  font-family: var(--hd-sans); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--hd-ink-soft); margin: .3rem 0 .6rem !important;
}
.hd-store__address { font-style: normal; font-size: .95rem; line-height: 1.5; color: var(--hd-ink); margin: 0 0 .6rem; }
.hd-store__links { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: 0 0 .5rem !important; font-family: var(--hd-sans); font-size: .85rem; }
.hd-store__links a { color: var(--hd-ink); text-decoration: underline; text-decoration-color: var(--hd-rule); text-underline-offset: 3px; }
.hd-store__links a:hover { text-decoration-color: var(--hd-ink); }
.hd-store__hours { font-family: var(--hd-sans); font-size: .85rem; border-top: 1px solid var(--hd-rule); margin-top: auto; }
.hd-store__hours summary {
  cursor: pointer; list-style: none; padding: .55rem 0; color: var(--hd-ink-soft);
  display: flex; justify-content: space-between; align-items: center;
}
.hd-store__hours summary::-webkit-details-marker { display: none; }
.hd-store__hours summary::after { content: "+"; font-size: 1rem; line-height: 1; }
.hd-store__hours[open] summary::after { content: "–"; }
.hd-store__hours table { width: 100%; border-collapse: collapse; margin-bottom: .5rem; }
.hd-store__hours th { font-weight: 500; padding: .15rem 1rem .15rem 0; width: 3.5rem; color: var(--hd-ink-soft); }
.hd-store__hours td { padding: .15rem 0; font-variant-numeric: tabular-nums; }
.hd-store__note { font-size: .9rem; color: var(--hd-ink-soft); margin-top: .5rem !important; }
.hd-stores__foot { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 1.2rem; border-top: 1px solid var(--hd-rule); }
.hd-stores__foot a { color: var(--hd-ink); }
@media (max-width: 640px) {
  .page-content.hd-stores { padding-inline: 20px !important; }
}

/* ---------- Carte des points de vente ---------- */
.hd-map { margin: 0 0 clamp(1rem, 3vw, 1.6rem); }
.hd-map__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.hd-map__switch { display: inline-flex; border: 1px solid var(--hd-ink); }
.hd-map__switch button {
  font-family: var(--hd-sans); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  background: transparent; color: var(--hd-ink); border: 0; padding: .55rem 1.05rem; cursor: pointer;
}
.hd-map__switch button + button { border-left: 1px solid var(--hd-ink); }
.hd-map__switch button.is-on { background: var(--hd-ink); color: var(--hd-ground); }
.hd-map__count { font-family: var(--hd-sans); font-size: .78rem; color: var(--hd-ink-soft); margin: 0 !important; }
.hd-map__canvas {
  height: clamp(340px, 46vw, 520px); width: 100%;
  background: var(--hd-ground-2); border: 1px solid var(--hd-rule);
}
/* fond de carte réchauffé pour s'accorder au papier du site */
.hd-map__canvas .leaflet-tile-pane { filter: grayscale(1) sepia(.22) contrast(.82) brightness(1.08); opacity: .92; }
.hd-map__canvas.leaflet-container { font-family: var(--hd-sans); }

/* repère : une petite lampe allumée */
.hd-pin-wrap { background: none; border: 0; }
.hd-pin {
  display: block; width: 14px; height: 14px; margin: 4px; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--hd-glow-core) 0 30%, var(--hd-glow) 55%, #C98A3A 100%);
  box-shadow: 0 0 0 2px var(--hd-ink), 0 0 14px 4px rgba(237, 196, 136, .75);
  transition: transform .2s ease, box-shadow .2s ease;
}
.leaflet-marker-icon:hover .hd-pin,
.leaflet-marker-icon:focus .hd-pin { transform: scale(1.35); box-shadow: 0 0 0 2px var(--hd-ink), 0 0 22px 8px rgba(237, 196, 136, .9); }

/* groupes */
.hd-cluster-wrap { background: none; border: 0; }
.hd-cluster {
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--hd-ink); color: var(--hd-glow-core);
  font-family: var(--hd-sans); font-size: .8rem; font-weight: 600;
  box-shadow: 0 0 0 4px rgba(23, 24, 26, .14), 0 0 18px 2px rgba(237, 196, 136, .55);
}
.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow { transition: transform .3s ease-out, opacity .3s ease-in; }

/* bulle */
.hd-popup .leaflet-popup-content-wrapper { border-radius: 0; padding: 0; background: var(--hd-ground); box-shadow: 0 10px 30px rgba(23, 24, 26, .18); }
.hd-popup .leaflet-popup-content { margin: 0; width: auto !important; }
.hd-popup .leaflet-popup-tip { background: var(--hd-ground); }
.hd-pop { display: flex; gap: .8rem; padding: .7rem; align-items: center; }
.hd-pop img { width: 72px; height: 72px; object-fit: cover; flex: none; }
.hd-pop__txt strong { display: block; font-family: var(--hd-serif); font-weight: 400; font-size: 1.1rem; line-height: 1.2; color: var(--hd-ink); }
.hd-pop__txt span { display: block; font-family: var(--hd-sans); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hd-ink-soft); margin-top: .2rem; }
.hd-pop__txt p { display: flex; gap: .9rem; margin: .45rem 0 0 !important; font-family: var(--hd-sans); font-size: .8rem; }
.hd-pop__txt a { color: var(--hd-ink) !important; text-decoration: underline; text-decoration-color: var(--hd-rule); text-underline-offset: 3px; }

/* commandes */
.hd-map__canvas .leaflet-bar { border: 0; box-shadow: none; }
.hd-map__canvas .leaflet-bar a {
  width: 34px; height: 34px; line-height: 32px; border-radius: 0 !important;
  background: var(--hd-ground); color: var(--hd-ink); border: 1px solid var(--hd-ink); font-weight: 400;
}
.hd-map__canvas .leaflet-bar a + a { border-top: 0; }
.hd-map__canvas .leaflet-bar a:hover { background: var(--hd-ink); color: var(--hd-ground); }
.hd-map__canvas .leaflet-control-attribution { background: rgba(241, 241, 236, .8); font-size: 10px; color: var(--hd-ink-soft); }
.hd-map__canvas .leaflet-control-attribution a { color: var(--hd-ink-soft); }

/* fiche mise en lumière depuis la carte */
.hd-store { transition: box-shadow .4s ease, background .4s ease; }
.hd-store.is-lit { box-shadow: 0 0 0 1px var(--hd-ink), 0 0 0 10px var(--hd-ground), 0 0 30px 12px rgba(237, 196, 136, .55); background: var(--hd-ground); }

/* ==========================================================================
   PAGE L'ATELIER (CMS 7) — parcours, matière, geste, questions, visite
   Mise en page large, calée sur l'en-tête (1280px, gouttière 32px).
   ========================================================================== */
.hd-cms.hd-cms--7 { max-width: 1280px; margin-inline: auto; padding-inline: 32px; }
.hd-cms--7 .hd-cms__head { max-width: none; margin: 0 0 1.2rem; padding: 0; border: 0; text-align: left; }
.hd-cms--7 .hd-cms__title { font-size: clamp(2.6rem, 6.4vw, 4.8rem); }
.hd-cms--7 .hd-cms__body { max-width: none; }
.hd-cms--7 .hd-cms__foot { max-width: none; }
.hd-cms--7 .hd-cms__body img { margin: 0; border: 0; }
.hd-cms--7 .hd-cms__body h2::before { display: none; }
.hd-cms--7 .hd-cms__body figure { margin: 0; }

.hd-cms--7 .hx-atl-lede {
  max-width: 46rem; font-size: clamp(1.15rem, 1.9vw, 1.42rem) !important; line-height: 1.5 !important;
  color: var(--hd-ink-soft) !important; margin: 0 0 clamp(1.6rem, 4vw, 2.6rem) !important;
}
.hd-cms--7 .hx-atl-hero img { aspect-ratio: 21 / 9; object-fit: cover; width: 100%; }

/* sommaire collant */
.hd-cms--7 .hx-atl-toc {
  position: sticky; top: 0; z-index: 20; background: var(--hd-ground);
  display: flex; gap: clamp(1.2rem, 3vw, 2.6rem); overflow-x: auto; white-space: nowrap;
  padding: 1rem 0; margin-top: clamp(1.2rem, 3vw, 2rem); border-bottom: 1px solid var(--hd-rule);
}
.hd-cms--7 .hx-atl-toc a {
  font-family: var(--hd-sans); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  border: 0 !important; color: var(--hd-ink-soft);
}
.hd-cms--7 .hx-atl-toc a:hover, .hd-cms--7 .hx-atl-toc a.is-on { color: var(--hd-ink); }

/* sections : étiquette à gauche, contenu à droite */
.hd-cms--7 .hx-atl-sec {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 0 clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(3rem, 7vw, 6rem); border-bottom: 1px solid var(--hd-rule); scroll-margin-top: 3.5rem;
}
.hd-cms--7 .hx-atl-sec--last { border-bottom: 0; }
.hd-cms--7 .hx-atl-sec > * { grid-column: 2; min-width: 0; }
.hd-cms--7 .hx-atl-sec__head { grid-column: 1; grid-row: 1 / span 6; align-self: start; position: sticky; top: 4.6rem; }
.hd-cms--7 .hx-atl-kicker {
  font-family: var(--hd-sans); font-size: .7rem !important; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--hd-ink-faint) !important; margin: 0 0 .8rem !important;
}
.hd-cms--7 .hx-atl-sec__head h2 { margin: 0; font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.12; }

/* frise */
.hd-cms--7 .hx-tl { list-style: none; margin: 0; padding: 0; }
.hd-cms--7 .hx-tl__item {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) minmax(0, 15rem); gap: 1.6rem 2rem;
  padding: 2rem 0; border-top: 1px solid var(--hd-rule); margin: 0;
}
.hd-cms--7 .hx-tl__item:first-child { border-top: 0; padding-top: 0; }
.hd-cms--7 .hx-tl__date {
  font-family: var(--hd-serif); font-size: clamp(1.6rem, 2.6vw, 2.2rem) !important; font-weight: 300;
  line-height: 1 !important; margin: 0 !important; color: var(--hd-ink); font-variant-numeric: oldstyle-nums;
}
.hd-cms--7 .hx-tl__txt h3, .hd-cms--7 .hx-steps h3, .hd-cms--7 .hx-qa h3 {
  font-family: var(--hd-serif); font-size: 1.28rem; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--hd-ink); margin: 0 0 .5rem;
}
.hd-cms--7 .hx-tl__txt p { font-size: 1.02rem; margin: 0; }
.hd-cms--7 .hx-tl__fig img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* matière */
.hd-cms--7 .hx-atl-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(1.6rem, 4vw, 3.2rem); align-items: start; }
.hd-cms--7 .hx-atl-split__fig img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.hd-cms--7 .hx-ingr { list-style: none; padding: 0; margin: 1.6rem 0 0; }
.hd-cms--7 .hx-ingr li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 1rem; padding: .9rem 0; border-top: 1px solid var(--hd-rule); margin: 0; }
.hd-cms--7 .hx-ingr strong { font-family: var(--hd-serif); font-weight: 400; font-size: 1.08rem; }
.hd-cms--7 .hx-ingr span { font-family: var(--hd-sans); font-size: .86rem; line-height: 1.5; color: var(--hd-ink-soft); }
.hd-cms--7 .hx-atl-note { font-family: var(--hd-sans); font-size: .78rem !important; letter-spacing: .12em; text-transform: uppercase; margin-top: 1.2rem !important; border-top: 1px solid var(--hd-ink); padding-top: .9rem; }

/* geste */
.hd-cms--7 .hx-atl-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.hd-cms--7 .hx-atl-trio img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.hd-cms--7 .hx-steps { list-style: none; counter-reset: pas; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; }
.hd-cms--7 .hx-steps li { counter-increment: pas; margin: 0; padding-top: .9rem; border-top: 1px solid var(--hd-ink); }
.hd-cms--7 .hx-steps li::before { content: "0" counter(pas); display: block; font-family: var(--hd-sans); font-size: .7rem; letter-spacing: .14em; color: var(--hd-ink-faint); margin-bottom: .6rem; }
.hd-cms--7 .hx-steps p { font-size: .96rem; line-height: 1.6; margin: 0; }
.hd-cms--7 .hx-atl-wide { margin: 2.2rem 0 0 !important; max-width: 46rem; font-size: 1.12rem !important; }

/* questions */
.hd-cms--7 .hx-qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(1.6rem, 4vw, 3rem); }
.hd-cms--7 .hx-qa__item { border-top: 1px solid var(--hd-rule); padding-top: 1rem; }
.hd-cms--7 .hx-qa p { font-size: 1rem; margin: 0; }

/* visite */
.hd-cms--7 .hx-atl-visit p { max-width: 46rem; }
.hd-cms--7 .hx-atl-links { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem !important; }
.hd-cms--7 .hx-atl-btn {
  font-family: var(--hd-sans); font-size: .72rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  border: 1px solid var(--hd-ink) !important; padding: .85rem 1.3rem; color: var(--hd-ink); transition: background .2s, color .2s;
}
.hd-cms--7 .hx-atl-btn:first-child { background: var(--hd-ink); color: var(--hd-ground) !important; }
.hd-cms--7 .hx-atl-btn:hover { background: var(--hd-ink); color: var(--hd-ground) !important; }

@media (max-width: 1000px) {
  .hd-cms--7 .hx-atl-sec { grid-template-columns: minmax(0, 1fr); }
  .hd-cms--7 .hx-atl-sec > *, .hd-cms--7 .hx-atl-sec__head { grid-column: 1; grid-row: auto; position: static; }
  .hd-cms--7 .hx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .hd-cms.hd-cms--7 { padding-inline: 20px; }
  .hd-cms--7 .hx-atl-hero img { aspect-ratio: 4 / 3; }
  .hd-cms--7 .hx-tl__item { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .hd-cms--7 .hx-atl-split, .hd-cms--7 .hx-qa, .hd-cms--7 .hx-steps { grid-template-columns: minmax(0, 1fr); }
  .hd-cms--7 .hx-atl-trio { grid-template-columns: repeat(3, 70%); overflow-x: auto; scroll-snap-type: x mandatory; }
  .hd-cms--7 .hx-atl-trio figure { scroll-snap-align: start; }
  .hd-cms--7 .hx-ingr li { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}
@media (prefers-reduced-motion: no-preference) { html:has(.hd-cms--7) { scroll-behavior: smooth; } }

.hd-cms--7 .hx-atl-sec > * + * { margin-top: 1.6rem; }
.hd-cms--7 .hx-atl-sec > .hx-atl-sec__head + * { margin-top: 0; }
@media (max-width: 1000px) { .hd-cms--7 .hx-atl-sec > .hx-atl-sec__head + * { margin-top: 1.4rem; } }

/* ==========================================================================
   Tunnel de commande
   Le tunnel vient du thème parent avec sa police et ses bleus Bootstrap.
   On lui donne les jetons de l'atelier, sans toucher au balisage.
   ========================================================================== */
#checkout {
  --hd-ground:    #F1F1EC;
  --hd-ground-2:  #E8E8E1;
  --hd-rule:      #CDCDC3;
  --hd-ink:       #17181A;
  --hd-ink-soft:  #5B5D57;
  --hd-ink-faint: #8A8C84;
  --hd-serif: "Newsreader HD", Georgia, "Times New Roman", serif;
  --hd-sans:  "Archivo HD", system-ui, -apple-system, "Segoe UI", sans-serif;

  background: var(--hd-ground);
  color: var(--hd-ink);
  font-family: var(--hd-serif);
  accent-color: var(--hd-ink);
}

#checkout p,
#checkout li,
#checkout label,
#checkout td,
#checkout th,
#checkout .form-label,
#checkout .form-text,
#checkout .cart-summary__label,
#checkout .cart-summary__value { font-family: var(--hd-serif); }

#checkout h1,
#checkout h2,
#checkout h3,
#checkout .h3,
#checkout .page-title-section { font-family: var(--hd-serif); font-weight: 400; letter-spacing: -.01em; }

/* ---------- fil des étapes ---------- */
#checkout .checkout-steps {
  background: var(--hd-ground);
  border-bottom: 1px solid var(--hd-rule);
}
#checkout .checkout-steps__title,
#checkout .checkout-steps__step a,
#checkout .checkout-steps__step {
  font-family: var(--hd-sans);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hd-ink-faint);
}
#checkout .checkout-steps__step--current,
#checkout .checkout-steps__step--current .checkout-steps__title { color: var(--hd-ink); }
#checkout .checkout-steps__step a { text-decoration: none; }
#checkout .checkout-steps__step a:hover { color: var(--hd-ink); }
#checkout .checkout-steps__number { display: none; }

/* ---------- titres de section ---------- */
#checkout .step__title hr,
#checkout .step__title .h3 { border-color: var(--hd-rule); }
#checkout .step__title hr { margin-block: .9rem 1.4rem; }

/* ---------- cartes : adresses, transporteurs, paiements ---------- */
#checkout .form-check,
#checkout .delivery-option,
#checkout .payment-option,
#checkout .address-item,
#checkout .address-selector .form-check {
  background: transparent;
  border-color: var(--hd-rule);
  border-radius: 0;
}
#checkout .address-selector .form-check,
#checkout .address-item {
  border: 1px solid var(--hd-rule);
  padding: 1.1rem 1.2rem;
}
#checkout .address-selector .form-check:has(input:checked),
#checkout .address-item:has(input:checked) {
  border-color: var(--hd-ink);
  background: var(--hd-ground-2);
}
#checkout .delivery-options,
#checkout .delivery-option {
  background: transparent;
  border-radius: 0;
}
#checkout .delivery-option { border-bottom: 1px solid var(--hd-rule); }
#checkout .delivery-option:has(input:checked) { background: var(--hd-ground-2); }
#checkout .carrier-logo,
#checkout .delivery-option img { background: transparent; mix-blend-mode: multiply; }

/* ---------- liens de service ---------- */
#checkout .address-item a,
#checkout .address-selector a { color: var(--hd-ink-soft); text-decoration: none; border-bottom: 1px solid var(--hd-rule); }
#checkout .address-item a:hover,
#checkout .address-selector a:hover { color: var(--hd-ink); border-color: var(--hd-ink); }
#checkout a.text-danger,
#checkout .text-danger { color: var(--hd-ink-soft) !important; }
#checkout a.text-danger:hover { color: #8E2B20 !important; }

/* ---------- boutons ---------- */
#checkout .btn {
  border-radius: 0;
  font-family: var(--hd-sans);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .85rem 1.5rem;
}
#checkout .btn-primary,
#checkout .btn-basic {
  background: var(--hd-ink);
  border-color: var(--hd-ink);
  color: #fff;
}
#checkout .btn-primary:hover,
#checkout .btn-basic:hover { background: transparent; color: var(--hd-ink); }
#checkout .btn-outline-primary,
#checkout .btn-secondary,
#checkout .btn-default {
  background: transparent;
  border: 1px solid var(--hd-ink);
  color: var(--hd-ink);
}
#checkout .btn-outline-primary:hover,
#checkout .btn-secondary:hover { background: var(--hd-ink); color: #fff; }
#checkout .btn-link { text-transform: none; letter-spacing: 0; color: var(--hd-ink-soft); }

/* ---------- champs ---------- */
#checkout .form-control,
#checkout select,
#checkout textarea {
  border-radius: 0;
  border-color: var(--hd-rule);
  background: #fff;
  font-family: var(--hd-serif);
  color: var(--hd-ink);
}
#checkout .form-control:focus,
#checkout select:focus,
#checkout textarea:focus {
  border-color: var(--hd-ink);
  box-shadow: none;
}
#checkout .form-label,
#checkout .form-check-label { color: var(--hd-ink); }
#checkout .form-text { color: var(--hd-ink-faint); }

/* ---------- onglets invité / connexion ---------- */
#checkout .nav-underline .nav-link {
  font-family: var(--hd-sans);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hd-ink-faint);
  border-bottom-color: transparent;
}
#checkout .nav-underline .nav-link.active {
  color: var(--hd-ink);
  border-bottom-color: var(--hd-ink);
}

/* ---------- récapitulatif ---------- */
#checkout .checkout-grid__aside .cart-summary,
#checkout .checkout__summary-accordion,
#checkout .checkout__summary-accordion-item,
#checkout .cart-summary__top,
#checkout .cart-summary__subtotals,
#checkout .cart-summary__total {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
#checkout .checkout-grid__aside .cart-summary {
  border: 1px solid var(--hd-rule);
  padding: 1.1rem 1.2rem;
}
#checkout .cart-summary__products-number,
#checkout .checkout__summary-accordion-header {
  font-family: var(--hd-sans);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hd-ink-soft);
}
#checkout .cart-summary__line { border: 0; padding-block: .3rem; }
#checkout .cart-summary__label { color: var(--hd-ink-soft); }
#checkout .cart-summary__value { font-variant-numeric: tabular-nums; }
#checkout .cart-summary__total,
#checkout .cart-summary__line--bold {
  border-top: 1px solid var(--hd-rule);
  margin-top: .6rem;
  padding-top: .7rem;
  font-size: 1.05rem;
}
#checkout .cart-summary-product__img,
#checkout .cart-summary-product__image { border: 1px solid var(--hd-rule); }

/* ---------- réassurance sous le récapitulatif ---------- */
#checkout .block-reassurance,
#checkout .blockreassurance_product { background: transparent; border-top: 1px solid var(--hd-rule); }

/* ---------- messages ---------- */
#checkout .alert {
  border-radius: 0;
  border-color: var(--hd-rule);
  background: var(--hd-ground-2);
  color: var(--hd-ink);
  font-family: var(--hd-serif);
}

/* Le bandeau « Afficher les détails » arrivait en blanc sur le crème : on le
   remet sur le fond de la page, avec un simple filet au-dessus et en dessous. */
#checkout .checkout__summary-accordion,
#checkout .checkout__summary-accordion-wrapper,
#checkout .checkout__summary-accordion-item,
#checkout .checkout__summary-accordion-header,
#checkout .cart-summary__products-accordion,
#checkout .accordion,
#checkout .accordion-item,
#checkout .accordion-button,
#checkout .accordion-button:not(.collapsed),
#checkout .accordion-collapse,
#checkout .accordion-body,
#checkout .cart-summary__top {
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#checkout .accordion-button:not(.collapsed) { color: var(--hd-ink); }
#checkout .accordion-button:focus { box-shadow: none !important; border-color: var(--hd-rule); }
#checkout .checkout__summary-accordion-item,
#checkout .accordion-item { border: 0; }
#checkout .checkout__summary-accordion-header,
#checkout .accordion-button {
  padding-inline: 0;
  border-top: 1px solid var(--hd-rule);
  border-bottom: 1px solid var(--hd-rule);
}