/* app.css — Lanora Highland, assemblé depuis la maquette (structure + peau) */
/* Lanora London, modele 02 "Highland Heritage", structure.css
   Layout uniquement : grilles, espacements, tailles, ruptures, etats. Couleurs et polices vivent dans peau.css.

   DESKTOP SPECS (1440x900)
   Container 1320px, gouttieres 48px (16px mobile). Header 96px (64px mobile), bandeau factuel 34px.
   Systeme d'espacement (px) : 4 8 12 16 24 32 48 64 96 128  ->  --s1 ... --s10
   Echelle typographique (px) : 12 (minimum absolu, libelles) 13 15 17 19 22 27 34 42 54 68 84  ->  --fs-2xs ... --fs-7xl
   Interlignes : display 1.02, titres 1.12, texte 1.6, libelles 1.
   Lettrage : petites capitales espacees .16em (nav, eyebrows, boutons), display -.01em, texte 0.
   Transitions 180ms / 240ms, desactivees sous prefers-reduced-motion.
   Images : ratio 3:4 constant, object-fit cover, object-position top, jamais deformees.
   Panier : panneau lateral .ll-sidecart (420px, glisse de la droite en 250ms, en-tete et pied fixes, milieu scrollable) ; cart.html sert de repli. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; color: inherit; }
a { text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }

:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --fs-2xs: 12px; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 17px; --fs-lg: 19px; --fs-xl: 22px;
  --fs-2xl: 27px; --fs-3xl: 34px; --fs-4xl: 42px; --fs-5xl: 54px; --fs-6xl: 68px; --fs-7xl: 84px;
  --lh-display: 1.02; --lh-heading: 1.12; --lh-body: 1.6;
  --track: .16em; --track-wide: .24em;
  --container: 1320px; --gutter: 16px; --header-h: 64px;
  --t-fast: 180ms; --t-base: 240ms; --ease: cubic-bezier(.4, 0, .2, 1);
  --radius: 2px;
}
@media (min-width: 1024px) { :root { --gutter: 48px; --header-h: 96px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; scroll-behavior: auto !important; }
}

.ll-wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.ll-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===================== libelles, filets, monogramme ===================== */
.ll-eyebrow { display: inline-flex; align-items: center; gap: var(--s3); font-size: var(--fs-2xs); line-height: 1; letter-spacing: var(--track-wide); text-transform: uppercase; }
.ll-eyebrow::before { display: none; } /* trait décoratif retiré le 11/09 à la demande de Mamadou */
.ll-eyebrow--plain::before { display: none; }
.ll-rule { width: 48px; height: 5px; border-top: 1px solid; border-bottom: 1px solid; margin: var(--s4) 0 var(--s5); }
.ll-rule--center { margin-left: auto; margin-right: auto; }
.ll-monogram { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid; font-size: var(--fs-sm); letter-spacing: .08em; }
.ll-num { font-size: var(--fs-3xl); line-height: 1; }

/* ===================== bandeau factuel ===================== */
.ll-bar { display: flex; align-items: center; justify-content: center; gap: var(--s4); height: 34px; padding: 0 var(--s4); font-size: var(--fs-2xs); letter-spacing: var(--track); text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.ll-bar__sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; flex: 0 0 auto; }
.ll-bar span:nth-child(n+4) { display: none; }
@media (min-width: 1024px) { .ll-bar span:nth-child(n+4) { display: inline; } }

/* ===================== header ===================== */
.ll-header { position: sticky; top: 0; z-index: 40; }
/* minmax(0,1fr) force les deux colonnes a la MEME largeur meme quand leur contenu differe
   (burger seul a gauche vs recherche+compte+sac a droite) ; en 1fr simple, la colonne dont le
   contenu est plus large pousse sa part au-dela de sa fraction et decale le logo central. */
.ll-header__inner { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; height: var(--header-h); padding: 0 var(--s2); }
.ll-header__side { display: flex; align-items: center; gap: var(--s1); }
.ll-header__side--right { justify-content: flex-end; }
.ll-logo { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; padding: var(--s1) var(--s3); min-height: 44px; }
.ll-logo__name { font-size: var(--fs-xl); letter-spacing: .18em; text-transform: uppercase; }
.ll-logo__city { font-size: 12px; letter-spacing: .34em; text-transform: uppercase; margin-top: 5px; padding-left: .34em; }
.ll-nav { display: none; }
.ll-nav__item { position: relative; }
.ll-nav__link { display: inline-flex; align-items: center; height: 44px; padding: 0 var(--s3); font-size: var(--fs-xs); letter-spacing: var(--track); text-transform: uppercase; border-bottom: 1px solid transparent; transition: color var(--t-fast) var(--ease); }
.ll-nav__link--text { height: 44px; display: inline-flex; align-items: center; padding: 0 var(--s3); font-size: var(--fs-xs); letter-spacing: var(--track); text-transform: uppercase; }
.ll-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: none; position: relative; border-radius: 50%; transition: background var(--t-fast) var(--ease); }
.ll-icon-btn__count { position: absolute; top: 3px; right: 1px; font-size: 12px; line-height: 1; width: 19px; height: 19px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ll-header__burger { display: inline-flex; }
/* mega menu collections */
.ll-mega { position: absolute; left: 50%; top: 100%; transform: translateX(-50%) translateY(6px); min-width: 560px; padding: var(--s5) var(--s6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s6); opacity: 0; visibility: hidden; transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility 0s linear var(--t-base); }
.ll-nav__item:hover .ll-mega, .ll-nav__item:focus-within .ll-mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition-delay: 0s; }
.ll-mega__link { display: flex; align-items: center; min-height: 44px; padding: var(--s2) 0; font-size: var(--fs-sm); transition: padding-left var(--t-fast) var(--ease); }
.ll-mega__link:hover { padding-left: var(--s2); }
.ll-mega__head { grid-column: 1 / -1; font-size: var(--fs-2xs); letter-spacing: var(--track-wide); text-transform: uppercase; padding-bottom: var(--s3); margin-bottom: var(--s2); border-bottom: 1px solid; }
/* search line */
.ll-search { display: none; padding: var(--s3) var(--gutter) var(--s4); }
.ll-search.is-open { display: block; }
.ll-search__field { display: flex; align-items: center; gap: var(--s3); max-width: 640px; margin: 0 auto; height: 48px; padding: 0 var(--s4); border: 1px solid; }
.ll-search__field input { flex: 1; min-width: 0; border: 0; background: transparent; height: 100%; outline: 0; font-size: var(--fs-base); }
@media (min-width: 1024px) {
  .ll-header__inner { padding: 0 var(--s6); }
  .ll-header__burger { display: none; }
  .ll-nav { display: flex; align-items: center; gap: var(--s2); }
  .ll-logo__name { font-size: var(--fs-2xl); }
  .ll-logo__city { font-size: 12px; letter-spacing: .4em; padding-left: .4em; margin-top: 7px; }
}
/* drawer mobile */
.ll-drawer { position: fixed; inset: 0; z-index: 60; visibility: hidden; }
.ll-drawer.is-open { visibility: visible; }
.ll-drawer__scrim { position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-base) var(--ease); }
.ll-drawer.is-open .ll-drawer__scrim { opacity: 1; }
.ll-drawer__panel { position: absolute; top: 0; left: 0; bottom: 0; width: 84%; max-width: 360px; padding: var(--s4) var(--s5) var(--s6); overflow-y: auto; transform: translateX(-100%); transition: transform var(--t-base) var(--ease); display: flex; flex-direction: column; }
.ll-drawer.is-open .ll-drawer__panel { transform: translateX(0); }
.ll-drawer__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s5); }
.ll-drawer__link { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font-size: var(--fs-lg); border-bottom: 1px solid; }
.ll-drawer__sub { display: block; min-height: 44px; padding: var(--s3) 0 var(--s3) var(--s4); font-size: var(--fs-base); }
.ll-drawer__foot { margin-top: auto; padding-top: var(--s5); font-size: var(--fs-sm); line-height: 1.7; }

/* ===================== boutons ===================== */
.ll-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 52px; padding: 0 var(--s6); border: 1px solid; border-radius: var(--radius); font-size: var(--fs-xs); letter-spacing: var(--track); text-transform: uppercase; white-space: nowrap; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.ll-btn:active { transform: translateY(1px); }
.ll-btn--block { width: 100%; }
.ll-btn--sm { height: 44px; padding: 0 var(--s5); }
.ll-btn svg { transition: transform var(--t-fast) var(--ease); }
.ll-btn:hover svg { transform: translateX(3px); }
.ll-link { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-xs); letter-spacing: var(--track); text-transform: uppercase; padding: var(--s2) 0; border-bottom: 1px solid; min-height: 44px; }
.ll-link svg { transition: transform var(--t-fast) var(--ease); }
.ll-link:hover svg { transform: translateX(3px); }

/* ===================== hero (photo pleine largeur + panneau plein pour le texte) ===================== */
.ll-hero { position: relative; width: 100%; height: 620px; overflow: hidden; }
.ll-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.ll-hero__panel { position: absolute; left: var(--s4); right: var(--s4); bottom: var(--s4); padding: var(--s5) var(--s5) var(--s6); display: flex; flex-direction: column; align-items: flex-start; }
.ll-hero__title { font-size: var(--fs-3xl); line-height: var(--lh-display); letter-spacing: -.01em; margin: var(--s4) 0 var(--s3); max-width: 15ch; }
.ll-hero__sub { font-size: var(--fs-sm); line-height: 1.55; max-width: 40ch; margin-bottom: var(--s5); }
.ll-hero__meta { position: absolute; right: var(--s4); top: var(--s4); display: none; font-size: var(--fs-2xs); letter-spacing: var(--track); text-transform: uppercase; padding: 6px var(--s3); }
@media (min-width: 1024px) {
  .ll-hero { height: 760px; }
  .ll-hero__panel { left: var(--gutter); right: auto; bottom: var(--s8); width: 560px; padding: var(--s7) var(--s7) var(--s7); }
  .ll-hero__title { font-size: var(--fs-5xl); max-width: 14ch; }
  .ll-hero__sub { font-size: var(--fs-md); }
  .ll-hero__meta { display: block; right: var(--gutter); top: var(--s6); }
}

/* ===================== sections ===================== */
.ll-section { padding: var(--s8) 0; }
.ll-section--tight { padding: var(--s7) 0; }
.ll-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); }
.ll-section__title { font-size: var(--fs-2xl); line-height: var(--lh-heading); letter-spacing: -.01em; margin-top: var(--s3); }
.ll-section__intro { font-size: var(--fs-base); line-height: var(--lh-body); max-width: 56ch; margin-top: var(--s3); }
@media (min-width: 1024px) {
  .ll-section { padding: var(--s9) 0; }
  .ll-section--tight { padding: var(--s8) 0; }
  .ll-section__head { margin-bottom: var(--s6); }
  .ll-section__title { font-size: var(--fs-4xl); }
}

/* ===================== bento collections (12 colonnes, 2 rangees, 5 tuiles, aucune case vide) ===================== */
.ll-bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); padding: 0 var(--gutter); }
.ll-bento__tile { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; }
.ll-bento__tile--large { grid-column: 1 / -1; aspect-ratio: 4 / 5; }
.ll-bento__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform 700ms var(--ease); }
.ll-bento__tile:hover .ll-bento__img { transform: scale(1.04); }
.ll-bento__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(18, 26, 46, .55), rgba(18, 26, 46, 0) 58%); }
.ll-bento__label { position: absolute; left: var(--s3); bottom: var(--s3); right: var(--s3); display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3) var(--s4) var(--s4); }
.ll-bento__index { font-size: var(--fs-2xs); letter-spacing: var(--track-wide); text-transform: uppercase; }
.ll-bento__title { font-size: var(--fs-lg); line-height: var(--lh-heading); }
.ll-bento__count { font-size: var(--fs-xs); letter-spacing: .06em; }
@media (min-width: 1024px) {
  .ll-bento { grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(2, 320px); gap: var(--s4); }
  .ll-bento__tile { aspect-ratio: auto; grid-column: span 3; }
  .ll-bento__tile--large { grid-column: span 6; grid-row: span 2; aspect-ratio: auto; }
  .ll-bento__label { left: var(--s4); bottom: var(--s4); right: var(--s4); padding: var(--s4) var(--s5) var(--s5); }
  .ll-bento__title { font-size: var(--fs-xl); }
  .ll-bento__tile--large .ll-bento__title { font-size: var(--fs-3xl); }
}

/* ===================== bloc matiere (2 colonnes photo / texte + 3 faits) ===================== */
.ll-material { display: grid; grid-template-columns: 1fr; }
.ll-material__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.ll-material__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.ll-material__caption { position: absolute; left: var(--s4); bottom: var(--s4); font-size: var(--fs-2xs); letter-spacing: var(--track); text-transform: uppercase; padding: var(--s2) var(--s3); }
.ll-material__body { padding: var(--s7) var(--gutter); display: flex; flex-direction: column; justify-content: center; }
.ll-material__title { font-size: var(--fs-2xl); line-height: var(--lh-heading); letter-spacing: -.01em; margin-top: var(--s3); }
.ll-material__text { font-size: var(--fs-base); line-height: var(--lh-body); margin: var(--s4) 0 var(--s6); max-width: 52ch; }
.ll-facts { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid; }
.ll-fact { display: grid; grid-template-columns: minmax(96px, max-content) 1fr; column-gap: var(--s5); row-gap: var(--s2); align-items: baseline; padding: var(--s4) 0; border-bottom: 1px solid; }
.ll-fact__num { font-size: var(--fs-xl); line-height: 1; white-space: nowrap; }
.ll-fact__label { font-size: var(--fs-sm); line-height: 1.5; }
@media (min-width: 1024px) {
  .ll-material { grid-template-columns: 1fr 1fr; min-height: 640px; }
  .ll-material__media { aspect-ratio: auto; }
  .ll-material__body { padding: var(--s9) var(--s9); }
  .ll-material__title { font-size: var(--fs-4xl); }
  .ll-fact { grid-template-columns: minmax(140px, max-content) 1fr; padding: var(--s5) 0; }
  .ll-fact__num { font-size: var(--fs-2xl); }
}

/* ===================== grille produits + carte ===================== */
.ll-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s6) var(--s3); }
.ll-card { display: block; position: relative; }
.ll-card__media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.ll-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: opacity 400ms var(--ease), transform 700ms var(--ease); }
.ll-card__img--alt { opacity: 0; }
.ll-card__badge { position: absolute; left: var(--s2); top: var(--s2); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 6px var(--s2); line-height: 1; z-index: 1; }
.ll-card__body { padding-top: var(--s3); }
.ll-card__wool { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--s1); }
.ll-card__title { font-size: var(--fs-sm); line-height: 1.4; margin-bottom: 3px; }
.ll-card__price { font-size: var(--fs-sm); margin-bottom: var(--s2); }
.ll-card__swatches { display: flex; align-items: center; gap: 5px; }
.ll-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.ll-card__more { font-size: 12px; letter-spacing: .04em; }
@media (min-width: 1024px) {
  .ll-grid { grid-template-columns: repeat(4, 1fr); gap: var(--s7) var(--s5); }
  .ll-card__badge { left: var(--s3); top: var(--s3); }
  .ll-card:hover .ll-card:hover .ll-card__img--alt { opacity: 1; }
  .ll-card:hover .ll-card__img--main { transform: scale(1.02); }
  .ll-card__title { font-size: var(--fs-base); }
  .ll-card__price { font-size: var(--fs-base); }
}

/* ===================== how to choose (3 cartes numerotees) ===================== */
.ll-choose { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
.ll-choose__card { display: flex; flex-direction: column; padding: var(--s5); border: 1px solid; min-height: 100%; transition: transform var(--t-base) var(--ease); }
.ll-choose__card:hover { transform: translateY(-2px); }
.ll-choose__index { font-size: var(--fs-2xs); letter-spacing: var(--track-wide); text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--s4); border-bottom: 1px solid; margin-bottom: var(--s4); }
.ll-choose__title { font-size: var(--fs-xl); line-height: var(--lh-heading); margin-bottom: var(--s3); }
.ll-choose__text { font-size: var(--fs-sm); line-height: var(--lh-body); flex: 1; }
.ll-choose__link { margin-top: var(--s4); }
@media (min-width: 1024px) {
  .ll-choose { grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
  .ll-choose__card { padding: var(--s6); }
}

/* ===================== bande manifeste (couleur de marque) ===================== */
.ll-manifesto { padding: var(--s8) var(--gutter); text-align: center; }
.ll-manifesto__inner { max-width: 780px; margin: 0 auto; }
.ll-manifesto__quote { font-size: var(--fs-2xl); line-height: 1.25; letter-spacing: -.005em; }
.ll-manifesto__by { margin-top: var(--s5); font-size: var(--fs-2xs); letter-spacing: var(--track-wide); text-transform: uppercase; }
@media (min-width: 1024px) {
  .ll-manifesto { padding: var(--s10) var(--gutter); }
  .ll-manifesto__quote { font-size: var(--fs-4xl); }
}

/* ===================== sizing & fit ===================== */
.ll-sizing { display: grid; grid-template-columns: 1fr; gap: var(--s6); }
.ll-sizing > *, .ll-about > *, .ll-material > *, .ll-newsletter__inner > *, .ll-bloc > *, .ll-checkout > *, .ll-cart > * { min-width: 0; }
.ll-sizing__text { font-size: var(--fs-base); line-height: var(--lh-body); max-width: 48ch; margin-top: var(--s4); }
.ll-sizing__note { font-size: var(--fs-sm); line-height: 1.6; margin-top: var(--s4); padding-left: var(--s4); border-left: 2px solid; }
.ll-table { font-size: var(--fs-sm); }
.ll-table th, .ll-table td { text-align: left; padding: var(--s3) 6px; border-bottom: 1px solid; white-space: nowrap; }
.ll-table th:last-child, .ll-table td:last-child { padding-right: 0; }
.ll-table th { font-size: var(--fs-2xs); letter-spacing: var(--track); text-transform: uppercase; font-weight: 500; }
.ll-table td:first-child, .ll-table th:first-child { padding-left: 0; }
.ll-table__scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.ll-table__scroll table { min-width: 100%; }
.ll-table__foot { font-size: var(--fs-xs); margin-top: var(--s3); line-height: 1.6; }
@media (min-width: 1024px) {
  .ll-sizing { grid-template-columns: 5fr 7fr; gap: var(--s9); align-items: start; }
  .ll-table th, .ll-table td { padding: var(--s4) var(--s3); }
}

/* ===================== lookbook (bande horizontale 5 photos) ===================== */
.ll-lookbook { display: flex; gap: var(--s2); overflow-x: auto; padding: 0 var(--gutter); scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.ll-lookbook::-webkit-scrollbar { display: none; }
.ll-look { flex: 0 0 72%; scroll-snap-align: start; position: relative; display: block; }
.ll-look__media { aspect-ratio: 3 / 4; overflow: hidden; }
.ll-look__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform 700ms var(--ease); }
.ll-look:hover .ll-look__media img { transform: scale(1.03); }
.ll-look__cap { display: flex; flex-direction: column; gap: 3px; padding-top: var(--s2); font-size: var(--fs-xs); line-height: 1.45; }
.ll-look__cap span:first-child { overflow-wrap: anywhere; }
.ll-look__cap span:last-child { white-space: nowrap; }
@media (min-width: 1024px) {
  .ll-lookbook { gap: var(--s4); }
  .ll-look { flex: 1 1 0; min-width: 0; }
}

/* ===================== newsletter ===================== */
.ll-newsletter { padding: var(--s8) var(--gutter); }
.ll-newsletter__inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: var(--s5); }
.ll-newsletter__title { font-size: var(--fs-2xl); line-height: var(--lh-heading); margin-top: var(--s3); }
.ll-newsletter__text { font-size: var(--fs-base); line-height: var(--lh-body); margin-top: var(--s3); max-width: 44ch; }
.ll-newsletter__form { display: flex; flex-direction: column; gap: var(--s3); }
.ll-newsletter__form input { height: 52px; padding: 0 var(--s4); border: 1px solid; background: transparent; border-radius: var(--radius); min-width: 0; }
.ll-newsletter__legal { font-size: var(--fs-xs); line-height: 1.6; }
@media (min-width: 1024px) {
  .ll-newsletter { padding: var(--s9) var(--gutter); }
  .ll-newsletter__inner { grid-template-columns: 1fr 1fr; gap: var(--s9); align-items: center; }
  .ll-newsletter__form { flex-direction: row; }
  .ll-newsletter__form input { flex: 1; }
}

/* ===================== footer ===================== */
.ll-footer { padding: var(--s8) 0 var(--s5); }
.ll-footer__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding-bottom: var(--s6); border-bottom: 1px solid; margin-bottom: var(--s6); }
.ll-footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s4); margin-bottom: var(--s7); }
.ll-footer__col--brand { grid-column: 1 / -1; }
.ll-footer__heading { font-size: var(--fs-2xs); letter-spacing: var(--track-wide); text-transform: uppercase; margin-bottom: var(--s4); }
.ll-footer__link { display: flex; align-items: center; font-size: var(--fs-sm); padding: 10px 0; min-height: 44px; transition: opacity var(--t-fast) var(--ease); }
.ll-footer__text { font-size: var(--fs-sm); line-height: 1.7; max-width: 36ch; }
.ll-footer__legal { font-size: var(--fs-xs); line-height: 1.7; max-width: 72ch; }
.ll-footer__bottom { display: flex; flex-direction: column; gap: var(--s3); font-size: var(--fs-xs); padding-top: var(--s5); border-top: 1px solid; margin-top: var(--s5); }
.ll-footer__pay { display: flex; gap: var(--s2); flex-wrap: wrap; }
.ll-footer__pay span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 8px; border: 1px solid; line-height: 1; }
@media (min-width: 1024px) {
  .ll-footer { padding: var(--s9) 0 var(--s6); }
  .ll-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s7); }
  .ll-footer__col--brand { grid-column: auto; }
  .ll-footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ===================== collection ===================== */
.ll-banner { position: relative; display: grid; grid-template-columns: 1fr; height: 300px; overflow: hidden; }
.ll-banner__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ll-banner__img--second { display: none; }
.ll-banner__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(18, 26, 46, .78), rgba(18, 26, 46, .1) 70%); }
.ll-banner__content { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--gutter) var(--s6); }
.ll-banner__title { font-size: var(--fs-3xl); line-height: var(--lh-display); margin-top: var(--s3); }
.ll-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: var(--fs-xs); letter-spacing: .04em; }
.ll-crumbs a, .ll-cart__name, .ll-checkout__legal a, .ll-checkout__guest a, .ll-steps__step { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; }
.ll-crumbs svg { opacity: .6; }
.ll-collection-intro { padding: var(--s6) 0 var(--s5); }
.ll-collection-intro__text { font-size: var(--fs-base); line-height: var(--lh-body); max-width: 66ch; }
.ll-collection-intro__text + .ll-collection-intro__text { margin-top: var(--s3); }
.ll-toolbar { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4) 0; border-top: 1px solid; border-bottom: 1px solid; margin-bottom: var(--s6); }
.ll-toolbar__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.ll-toolbar__count { font-size: var(--fs-xs); letter-spacing: var(--track); text-transform: uppercase; white-space: nowrap; }
.ll-sort { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-xs); letter-spacing: .06em; }
.ll-sort select { height: 44px; border: 0; background: transparent; border-bottom: 1px solid; font-size: var(--fs-sm); padding-right: var(--s2); }
.ll-filters { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ll-filters__group { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.ll-filters__label { font-size: 12px; letter-spacing: var(--track); text-transform: uppercase; margin-right: var(--s1); white-space: nowrap; }
.ll-filters__group + .ll-filters__group { padding-left: var(--s3); border-left: 1px solid; }
@media (max-width: 1023px) { .ll-filters__group { width: 100%; } .ll-filters__group + .ll-filters__group { padding-left: 0; border-left: 0; padding-top: var(--s2); } .ll-filters__label { width: 100%; margin-bottom: -2px; } }
.ll-pill { flex: 0 0 auto; height: 44px; min-width: 48px; justify-content: center; padding: 0 var(--s4); border: 1px solid; border-radius: 22px; font-size: var(--fs-xs); letter-spacing: .04em; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.ll-pill .ll-dot { width: 10px; height: 10px; }
.ll-empty { grid-column: 1 / -1; padding: var(--s6) 0; font-size: var(--fs-base); }
.ll-pagination { display: flex; align-items: center; justify-content: center; gap: var(--s2); margin-top: var(--s7); }
.ll-pagination__btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid; background: transparent; font-size: var(--fs-sm); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.ll-pagination__btn[disabled] { opacity: .35; cursor: default; }
.ll-about { display: grid; grid-template-columns: 1fr; gap: var(--s5); }
.ll-about__text { font-size: var(--fs-base); line-height: var(--lh-body); max-width: 60ch; }
.ll-about__text + .ll-about__text { margin-top: var(--s3); }
.ll-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ll-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4); border: 1px solid; font-size: var(--fs-xs); letter-spacing: .06em; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
@media (min-width: 1024px) {
  .ll-banner { grid-template-columns: 1fr 1fr; height: 440px; }
  .ll-banner__img--second { display: block; }
  .ll-banner__content { padding: 0 var(--gutter) var(--s7); }
  .ll-banner__title { font-size: var(--fs-5xl); }
  .ll-collection-intro { padding: var(--s7) 0 var(--s6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); }
  .ll-collection-intro__text + .ll-collection-intro__text { margin-top: 0; }
  .ll-toolbar { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--s4) 0; }
  .ll-toolbar__row { flex: 0 0 auto; }
  .ll-filters { flex: 1 1 auto; row-gap: var(--s2); }
  .ll-about { grid-template-columns: 7fr 5fr; gap: var(--s9); align-items: start; }
}

/* ===================== fiche produit (structure Luventa) =====================
   Ordre : galerie | resume ; puis 3 blocs editoriaux alternes ; puis Good to know ; puis You may also like. */
.ll-pdp-crumbs { padding: var(--s4) var(--gutter) 0; }
.ll-pdp { display: grid; grid-template-columns: 1fr; }
/* galerie */
.ll-gallery { position: relative; }
.ll-gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.ll-gallery__track::-webkit-scrollbar { display: none; }
.ll-gallery__slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 3 / 4; overflow: hidden; position: relative; }
.ll-gallery__slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.ll-gallery__zoom { position: absolute; right: var(--s3); bottom: var(--s3); width: 44px; height: 44px; border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center; }
.ll-gallery__counter { position: absolute; left: var(--s3); top: var(--s3); font-size: var(--fs-2xs); letter-spacing: var(--track); padding: 5px 8px; line-height: 1; }
.ll-gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); padding: var(--s2) var(--gutter) 0; }
/* 5e vignette (vue de dos, 29/09) : une seule ligne meme si le lot de vignettes visible n'est pas en tete du DOM (couleur non defaut). Detection par presence, pas par position. */
.ll-gallery__thumbs:has(> .ll-gallery__thumb:not([hidden]) ~ .ll-gallery__thumb:not([hidden]) ~ .ll-gallery__thumb:not([hidden]) ~ .ll-gallery__thumb:not([hidden]) ~ .ll-gallery__thumb:not([hidden])) { grid-template-columns: repeat(5, 1fr); }
.ll-gallery__thumb { aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid transparent; padding: 0; background: none; opacity: .68; transition: border-color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
.ll-gallery__thumb.is-active, .ll-gallery__thumb:hover { opacity: 1; }
.ll-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.ll-lightbox { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: var(--s4); }
.ll-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ll-lightbox__close { position: absolute; top: var(--s4); right: var(--s4); width: 48px; height: 48px; border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center; }
/* resume */
.ll-pdp__info { padding: var(--s5) var(--gutter) var(--s8); }
.ll-pdp__title { font-size: var(--fs-2xl); line-height: var(--lh-heading); letter-spacing: -.01em; max-width: 26ch; }
.ll-pdp__cat { font-size: var(--fs-2xs); letter-spacing: var(--track-wide); text-transform: uppercase; margin-top: var(--s3); }
.ll-stock { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); margin-top: var(--s3); }
.ll-stock__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.ll-pdp__price { font-size: var(--fs-2xl); line-height: 1; margin-top: var(--s3); }
.ll-keyfeat { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid; font-size: var(--fs-sm); line-height: var(--lh-body); }
.ll-keyfeat__label { margin-bottom: var(--s3); }
.ll-keyfeat p + p { margin-top: var(--s2); }
.ll-option { margin-top: var(--s5); }
.ll-option__label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); font-size: var(--fs-2xs); letter-spacing: var(--track); text-transform: uppercase; margin-bottom: var(--s3); }
.ll-option__label b { font-weight: 500; letter-spacing: .04em; text-transform: none; font-size: var(--fs-sm); }
.ll-swatches { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ll-swatch { width: 44px; height: 44px; border-radius: 50%; border: 1px solid transparent; padding: 0; background: none; position: relative; display: inline-flex; align-items: center; justify-content: center; transition: border-color var(--t-fast) var(--ease); }
.ll-swatch::after { content: ''; width: 30px; height: 30px; border-radius: 50%; background: var(--sw); }
.ll-swatch[data-nophoto="1"]::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; border: 1px dashed currentColor; opacity: .5; }
.ll-sizes { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ll-size { min-width: 56px; height: 48px; padding: 0 var(--s4); border: 1px solid; border-radius: var(--radius); font-size: var(--fs-sm); letter-spacing: .06em; background: transparent; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.ll-size.is-off { cursor: not-allowed; }
.ll-option__hint { font-size: var(--fs-xs); margin-top: var(--s3); line-height: 1.5; }
.ll-spec__link { border: 0; background: none; padding: 0; font-size: var(--fs-xs); letter-spacing: .04em; text-transform: none; border-bottom: 1px solid; display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; line-height: 1.2; }
.ll-buyrow { display: flex; align-items: stretch; gap: var(--s3); margin-top: var(--s6); }
.ll-buyrow .ll-btn { height: 56px; flex: 1 1 auto; min-width: 0; padding: 0 var(--s4); }
.ll-buyrow .ll-qty { height: 56px; flex: 0 0 auto; }
.ll-after { margin-top: var(--s4); border-top: 1px solid; }
.ll-after__row { display: grid; grid-template-columns: 24px 1fr; gap: var(--s3); align-items: start; padding: var(--s3) 0; border-bottom: 1px solid; font-size: var(--fs-sm); line-height: 1.5; }
.ll-after__row svg { margin-top: 1px; }
.ll-after__row b { font-weight: 500; }
/* Full specification (accordeon ferme) */
.ll-spec-sum { margin-top: var(--s5); }
.ll-spec { border-top: 1px solid; }
.ll-spec__row { display: grid; grid-template-columns: 116px 1fr; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid; font-size: var(--fs-sm); line-height: 1.5; }
.ll-spec__label { font-size: var(--fs-2xs); letter-spacing: var(--track); text-transform: uppercase; padding-top: 3px; }
.ll-spec__value { min-width: 0; overflow-wrap: anywhere; }
/* 4 benefices en 2x2 */
.ll-benef__label { display: block; margin-top: var(--s6); margin-bottom: var(--s3); }
.ll-benef { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid; }
.ll-benef__item { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s4); }
.ll-benef__t { font-size: var(--fs-2xs); letter-spacing: var(--track); text-transform: uppercase; }
.ll-benef__d { font-size: var(--fs-xs); line-height: 1.5; }
/* product_meta */
.ll-meta { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid; font-size: var(--fs-xs); letter-spacing: .04em; }
.ll-meta b { font-weight: 500; text-transform: uppercase; letter-spacing: var(--track); margin-right: var(--s2); }
.ll-meta a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; border-bottom: 1px solid; }
/* accordeons partages */
.ll-accordion__item { border-top: 1px solid; }
.ll-accordion__item:last-child { border-bottom: 1px solid; }
.ll-accordion__trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--s3); min-height: 56px; padding: var(--s3) 0; border: 0; background: none; text-align: left; font-size: var(--fs-base); }
.ll-accordion__icon { flex: 0 0 auto; transition: transform var(--t-base) var(--ease); }
.ll-accordion__item.is-open .ll-accordion__icon { transform: rotate(180deg); }
.ll-accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-base) var(--ease); }
.ll-accordion__item.is-open .ll-accordion__panel { grid-template-rows: 1fr; }
.ll-accordion__panel > div { overflow: hidden; }
.ll-accordion__inner { padding: 0 0 var(--s4); font-size: var(--fs-sm); line-height: var(--lh-body); max-width: 68ch; }
.ll-accordion__inner p + p { margin-top: var(--s3); }
.ll-accordion__inner .ll-accordion__trigger { font-size: var(--fs-sm); min-height: 52px; }
/* 3 blocs editoriaux alternes */
.ll-blocs { display: flex; flex-direction: column; }
.ll-bloc { display: grid; grid-template-columns: 1fr; }
.ll-bloc__media { aspect-ratio: 4 / 3; overflow: hidden; }
.ll-bloc__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.ll-bloc__body { padding: var(--s6) var(--gutter) var(--s7); display: flex; flex-direction: column; justify-content: center; }
.ll-bloc__title { font-size: var(--fs-xl); line-height: var(--lh-heading); margin-bottom: var(--s4); max-width: 22ch; }
.ll-bloc__body p { font-size: var(--fs-sm); line-height: var(--lh-body); max-width: 54ch; }
.ll-bloc__body p + p { margin-top: var(--s3); }
/* BEFORE YOU ORDER */
.ll-acc { padding: var(--s7) 0 var(--s8); }
.ll-acc__inner { max-width: 880px; margin: 0 auto; padding: 0 var(--gutter); }
.ll-acc__head { margin-bottom: var(--s5); }
.ll-acc__title { font-size: var(--fs-2xl); line-height: var(--lh-heading); margin-top: var(--s3); }
/* panneau guide des tailles */
.ll-panel { position: fixed; inset: 0; z-index: 65; visibility: hidden; }
.ll-panel.is-open { visibility: visible; }
.ll-panel__scrim { position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-base) var(--ease); }
.ll-panel.is-open .ll-panel__scrim { opacity: 1; }
.ll-panel__box { position: absolute; top: 0; right: 0; bottom: 0; width: 100%; max-width: 480px; padding: var(--s5) var(--s5) var(--s7); overflow-y: auto; transform: translateX(100%); transition: transform var(--t-base) var(--ease); }
.ll-panel.is-open .ll-panel__box { transform: translateX(0); }
.ll-panel__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s5); }
.ll-panel__title { font-size: var(--fs-xl); }
.ll-panel__text { font-size: var(--fs-sm); line-height: var(--lh-body); margin-bottom: var(--s5); }
/* barre collante mobile */
.ll-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); transform: translateY(110%); transition: transform var(--t-base) var(--ease); }
.ll-sticky.is-visible { transform: translateY(0); }
.ll-sticky__meta { display: flex; flex-direction: column; flex: 0 0 auto; }
.ll-sticky__name { font-size: var(--fs-2xs); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ll-sticky__price { font-size: var(--fs-lg); white-space: nowrap; line-height: 1.2; }
.ll-sticky .ll-btn { flex: 1; height: 48px; padding: 0 var(--s4); }
@media (min-width: 1024px) {
  .ll-pdp-crumbs { padding: var(--s5) var(--gutter) 0; }
  .ll-pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); padding: var(--s5) var(--gutter) var(--s8); max-width: var(--container); margin: 0 auto; align-items: start; }
  .ll-gallery { position: sticky; top: auto; bottom: var(--s5); }
  .ll-gallery__track { display: block; overflow: hidden; }
  .ll-gallery__slide { display: none; width: 100%; }
  .ll-gallery__slide.is-active { display: block; }
  .ll-gallery__thumbs { padding: var(--s3) 0 0; gap: var(--s3); }
  .ll-pdp__info { padding: 0; }
  .ll-pdp__title { font-size: var(--fs-3xl); }
  .ll-pdp__price { font-size: var(--fs-3xl); }
  .ll-benef__item { padding: var(--s5); }
  .ll-meta { flex-direction: row; flex-wrap: wrap; gap: var(--s6); }
  .ll-bloc { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .ll-bloc__media { aspect-ratio: auto; height: 520px; }
  .ll-bloc--right .ll-bloc__media { order: 2; }
  .ll-bloc__body { padding: var(--s8) var(--s9); }
  .ll-bloc__title { font-size: var(--fs-2xl); }
  .ll-acc { padding: var(--s8) 0 var(--s9); }
  .ll-acc__title { font-size: var(--fs-3xl); }
  .ll-sticky { display: none; }
}

/* ===================== panier lateral coulissant (structure Luventa) =====================
   Glisse depuis la droite sur un voile sombre, corps fige, en-tete et pied fixes, zone du milieu seule a defiler. */
.ll-sidecart { position: fixed; inset: 0; z-index: 62; visibility: hidden; }
.ll-sidecart.is-open { visibility: visible; }
.ll-sidecart__scrim { position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-base) var(--ease); }
.ll-sidecart.is-open .ll-sidecart__scrim { opacity: 1; }
.ll-sidecart__panel { position: absolute; top: 0; right: 0; bottom: 0; width: 92%; max-width: 420px; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 250ms var(--ease); }
.ll-sidecart.is-open .ll-sidecart__panel { transform: translateX(0); }
.ll-sidecart__top { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s3) var(--s3) var(--s5); border-bottom: 1px solid; }
.ll-sidecart__title { font-size: var(--fs-md); letter-spacing: .02em; }
.ll-sidecart__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 var(--s5); }
.ll-sidecart__empty { padding: var(--s6) 0; font-size: var(--fs-sm); }
.ll-sidecart__empty a { border-bottom: 1px solid; }
.ll-sidecart__lines { display: block; }
.ll-sidecart__line { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--s3); padding: var(--s4) 0; border-bottom: 1px solid; align-items: start; }
.ll-sidecart__thumb { aspect-ratio: 3 / 4; overflow: hidden; display: block; }
.ll-sidecart__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.ll-sidecart__info { display: flex; flex-direction: column; min-width: 0; }
.ll-sidecart__name { display: flex; align-items: center; min-height: 44px; font-size: var(--fs-sm); line-height: 1.35; overflow-wrap: anywhere; }
.ll-sidecart__variant { font-size: var(--fs-xs); }
.ll-sidecart__row { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s2); flex-wrap: wrap; }
.ll-sidecart__price { font-size: var(--fs-sm); white-space: nowrap; }
.ll-sidecart__reco { padding: var(--s5) 0 var(--s6); }
.ll-sidecart__recolist { display: flex; gap: var(--s3); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; margin: var(--s4) calc(-1 * var(--s5)) 0; padding: 0 var(--s5); }
.ll-sidecart__recolist::-webkit-scrollbar { display: none; }
.ll-sidecart__reco-item { flex: 0 0 132px; display: flex; flex-direction: column; gap: 5px; position: relative; }
.ll-sidecart__reco-thumb { aspect-ratio: 3 / 4; overflow: hidden; display: block; }
.ll-sidecart__reco-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.ll-sidecart__reco-name { display: flex; align-items: center; min-height: 44px; font-size: var(--fs-xs); line-height: 1.35; }
.ll-sidecart__reco-price { font-size: var(--fs-xs); }
.ll-sidecart__reco-add { position: absolute; right: 0; top: 0; width: 44px; height: 44px; border: 0; display: inline-flex; align-items: center; justify-content: center; }
.ll-sidecart__foot { flex: 0 0 auto; padding: var(--s4) var(--s5) var(--s5); border-top: 1px solid; }
.ll-sidecart__sum { display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--fs-md); }
.ll-sidecart__ship { font-size: var(--fs-xs); line-height: 1.5; margin: var(--s2) 0 var(--s4); }
.ll-sidecart__trust { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-xs); line-height: 1.4; margin-top: var(--s3); }
.ll-sidecart__trust svg { flex: 0 0 auto; }

/* ===================== panier ===================== */
.ll-cart { padding: var(--s6) 0 var(--s8); }
.ll-cart__title { font-size: var(--fs-2xl); line-height: var(--lh-heading); }
.ll-cart__sub { font-size: var(--fs-sm); margin-top: var(--s2); }
.ll-cart__list { margin-top: var(--s5); border-top: 1px solid; }
.ll-cart__item { display: grid; grid-template-columns: 104px 1fr; gap: var(--s4); padding: var(--s5) 0; border-bottom: 1px solid; }
.ll-cart__thumb { aspect-ratio: 3 / 4; overflow: hidden; }
.ll-cart__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.ll-cart__body { display: flex; flex-direction: column; min-width: 0; }
.ll-cart__row1 { display: flex; justify-content: space-between; gap: var(--s3); align-items: flex-start; }
.ll-cart__name { font-size: var(--fs-base); line-height: 1.35; }
.ll-cart__linePrice { font-size: var(--fs-base); white-space: nowrap; }
.ll-cart__meta { font-size: var(--fs-xs); line-height: 1.7; margin-top: var(--s1); }
.ll-cart__meta > span { display: block; }
.ll-cart__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: auto; padding-top: var(--s3); flex-wrap: wrap; }
.ll-qty { display: inline-flex; align-items: center; border: 1px solid; border-radius: var(--radius); }
.ll-qty button { width: 44px; height: 44px; border: 0; background: none; display: inline-flex; align-items: center; justify-content: center; transition: background var(--t-fast) var(--ease); }
.ll-qty span { width: 32px; text-align: center; font-size: var(--fs-sm); }
.ll-cart__actions { display: flex; gap: var(--s4); }
.ll-textbtn { border: 0; background: none; padding: 0; min-height: 44px; font-size: var(--fs-xs); letter-spacing: .06em; border-bottom: 1px solid; transition: opacity var(--t-fast) var(--ease); display: inline-flex; align-items: center; }
.ll-summary { margin-top: var(--s6); padding: var(--s5); }
.ll-summary__title { font-size: var(--fs-md); margin-bottom: var(--s4); display: flex; justify-content: space-between; align-items: center; }
.ll-summary__row { display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--fs-sm); padding: var(--s2) 0; }
.ll-summary__row small { display: block; font-size: var(--fs-xs); margin-top: 2px; }
.ll-summary__row--total { font-size: var(--fs-lg); padding-top: var(--s4); margin-top: var(--s2); border-top: 1px solid; }
.ll-summary__note { font-size: var(--fs-xs); line-height: 1.6; margin-top: var(--s3); }
.ll-summary__cta { margin-top: var(--s5); }
.ll-summary__reassure { margin-top: var(--s4); font-size: var(--fs-xs); line-height: 1.7; }
.ll-summary__reassure div { display: grid; grid-template-columns: 20px 1fr; gap: var(--s2); align-items: start; padding: 3px 0; }
.ll-summary__reassure svg { margin-top: 3px; }
.ll-summary__pay { display: flex; gap: var(--s2); margin-top: var(--s4); flex-wrap: wrap; }
.ll-summary__pay span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 8px; border: 1px solid; line-height: 1; }
@media (min-width: 1024px) {
  .ll-cart { padding: var(--s8) 0 var(--s9); display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--s9); align-items: start; }
  .ll-cart__head { grid-column: 1 / -1; }
  .ll-cart__item { grid-template-columns: 140px 1fr; gap: var(--s5); }
  .ll-summary { margin-top: 0; padding: var(--s6); position: sticky; top: calc(var(--header-h) + var(--s5)); }
}

/* ===================== checkout ===================== */
.ll-checkout { padding: var(--s5) 0 var(--s8); }
.ll-steps { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-2xs); letter-spacing: var(--track); text-transform: uppercase; margin-bottom: var(--s5); flex-wrap: wrap; }
.ll-steps__step { display: inline-flex; align-items: center; gap: var(--s2); }
.ll-steps__n { width: 24px; height: 24px; border-radius: 50%; border: 1px solid; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; letter-spacing: 0; }
.ll-steps__sep { width: 24px; height: 1px; background: currentColor; opacity: .4; }
.ll-checkout__title { font-size: var(--fs-2xl); line-height: var(--lh-heading); }
.ll-checkout__guest { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); font-size: var(--fs-sm); margin: var(--s3) 0 var(--s5); flex-wrap: wrap; }
.ll-fieldset { margin-bottom: var(--s6); }
.ll-fieldset__legend { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-2xs); letter-spacing: var(--track-wide); text-transform: uppercase; margin-bottom: var(--s4); }
.ll-fieldset__legend::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .2; }
.ll-field { position: relative; margin-bottom: var(--s3); }
.ll-field input { width: 100%; height: 56px; padding: 22px var(--s4) 6px; border: 1px solid; border-radius: var(--radius); background: transparent; outline: 0; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.ll-field label { position: absolute; left: var(--s4); top: 18px; font-size: var(--fs-base); pointer-events: none; transition: transform var(--t-fast) var(--ease), font-size var(--t-fast) var(--ease), top var(--t-fast) var(--ease); transform-origin: left top; }
.ll-field input:focus + label, .ll-field input:not(:placeholder-shown) + label { top: 7px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.ll-field__hint { font-size: var(--fs-xs); margin-top: 6px; }
.ll-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.ll-radio-card { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4); border: 1px solid; border-radius: var(--radius); margin-bottom: var(--s3); cursor: pointer; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.ll-radio-card__left { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.ll-radio-card__left input { width: 22px; height: 22px; margin: 0; flex: 0 0 auto; }
.ll-radio-card__text { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); }
.ll-radio-card__text small { font-size: var(--fs-xs); }
.ll-radio-card__logos { display: flex; gap: 6px; flex: 0 0 auto; }
.ll-radio-card__logos span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 7px; border: 1px solid; line-height: 1; }
.ll-radio-card__price { white-space: nowrap; font-size: var(--fs-sm); }
.ll-card-fields { padding: var(--s4); margin-top: calc(-1 * var(--s3) + 2px); margin-bottom: var(--s3); border: 1px solid; border-top: 0; }
.ll-checkout__summary { padding: var(--s5); margin-top: var(--s6); }
.ll-checkout__summary-head { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-md); margin-bottom: var(--s4); }
.ll-lineitem { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-bottom: 1px solid; font-size: var(--fs-sm); }
.ll-lineitem__thumb { aspect-ratio: 3 / 4; overflow: hidden; }
.ll-lineitem__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.ll-lineitem__name { line-height: 1.35; }
.ll-lineitem__meta { display: block; font-size: var(--fs-xs); margin-top: 2px; }
.ll-checkout__security { display: grid; grid-template-columns: 20px 1fr; gap: var(--s2); align-items: start; font-size: var(--fs-xs); line-height: 1.6; margin-top: var(--s4); }
.ll-checkout__legal { display: flex; flex-wrap: wrap; gap: var(--s3); font-size: var(--fs-xs); margin-top: var(--s4); }
.ll-checkout__legal a { border-bottom: 1px solid; }
@media (min-width: 1024px) {
  .ll-checkout { padding: var(--s7) 0 var(--s9); display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: var(--s9); align-items: start; }
  .ll-checkout__head { grid-column: 1 / -1; }
  .ll-checkout__summary { margin-top: 0; padding: var(--s6); position: sticky; top: calc(var(--header-h) + var(--s5)); }
  .ll-checkout__summary-head button { display: none; }
}
@media (max-width: 1023px) { .ll-checkout__summary-body.is-collapsed { display: none; } }


/* Lanora London, modele 02 "Highland Heritage", peau.css
   Maison de laine britannique : ivoire ecru, bleu nuit, bordeaux d'action, vert mousse en touche (10 % max).
   Grands titres en Didone (Playfair Display), libelles en petites capitales espacees (Jost).
   Ce fichier ne porte que couleurs, polices et etats visuels ; la structure vit dans structure.css. */

@font-face { font-family: 'Playfair Display'; src: url('../fonts/PlayfairDisplay.ttf') format('truetype'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('../fonts/Jost.ttf') format('truetype'); font-weight: 300 600; font-style: normal; font-display: swap; }

:root {
  --bg: #F1EBE0;
  --soft: #E3DACB;
  --ink: #121A2E;
  --action: #7A2A36;
  --onaction: #F1EBE0;
  --accent: #5E6B48;
  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --text: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --line: rgba(18, 26, 46, .16);
  --line-strong: rgba(18, 26, 46, .5);
  --line-light: rgba(241, 235, 224, .18);
  --muted: #4A5165;          /* texte secondaire sur ivoire, contraste 6.4:1 */
  --action-hover: #66202B;
  --ink-hover: #1E2A48;
}

/* ---------- base ---------- */
body { background: var(--bg); color: var(--ink); font-family: var(--text); font-weight: 400; font-size: var(--fs-base); line-height: var(--lh-body); }
h1, h2, h3, .ll-display { font-family: var(--display); font-weight: 500; color: inherit; }
.ll-num, .ll-fact__num, .ll-manifesto__quote, .ll-pdp__price, .ll-sticky__price, .ll-summary__row--total, .ll-bento__title, .ll-panel__title, .ll-bloc__title, .ll-acc__title, .ll-choose__title { font-family: var(--display); font-weight: 500; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
a:hover { color: var(--action); }
.ll-muted { color: var(--muted); }
.ll-photo, .ll-hero__img, .ll-card__img, .ll-bento__img, .ll-look__media img, .ll-material__media img, .ll-banner__img, .ll-gallery__slide img, .ll-gallery__thumb img, .ll-bloc__media img, .ll-cart__thumb img, .ll-lineitem__thumb img { filter: saturate(.92); }

/* ---------- libelles, filets, monogramme ---------- */
.ll-eyebrow { color: var(--accent); font-weight: 500; }
.ll-eyebrow--ink { color: var(--ink); }
.ll-eyebrow--light { color: var(--soft); }
.ll-rule { border-color: var(--accent); }
.ll-rule--light { border-color: var(--soft); }
.ll-monogram { font-family: var(--display); border-color: var(--line-strong); color: var(--ink); }
.ll-monogram--light { border-color: var(--soft); color: var(--bg); }

/* ---------- bandeau factuel ---------- */
.ll-bar { background: var(--ink); color: var(--bg); font-weight: 500; }

/* ---------- header ---------- */
.ll-header { background: var(--bg); border-bottom: 1px solid var(--line); }
.ll-logo { color: var(--ink); }
.ll-logo:hover { color: var(--ink); }
.ll-logo__name { font-family: var(--display); font-weight: 500; }
.ll-logo__city { font-weight: 500; color: var(--accent); }
.ll-nav__link { color: var(--ink); font-weight: 500; }
.ll-nav__link:hover, .ll-nav__item:hover > .ll-nav__link { color: var(--ink); border-bottom-color: var(--ink); }
.ll-icon-btn { color: var(--ink); }
.ll-icon-btn:hover { background: var(--soft); color: var(--ink); }
.ll-icon-btn__count { background: var(--action); color: var(--onaction); font-weight: 500; }
.ll-mega { background: var(--bg); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(18, 26, 46, .12); }
.ll-mega__head { color: var(--accent); border-color: var(--line); font-weight: 500; }
.ll-mega__link { color: var(--ink); }
.ll-mega__link:hover { color: var(--action); }
.ll-search { background: var(--bg); border-bottom: 1px solid var(--line); }
.ll-search__field { border-color: var(--ink); color: var(--ink); }
.ll-search__field input::placeholder { color: var(--muted); }
.ll-drawer__scrim { background: rgba(18, 26, 46, .55); }
.ll-drawer__panel { background: var(--bg); color: var(--ink); }
.ll-drawer__link { color: var(--ink); border-color: var(--line); font-family: var(--display); }
.ll-drawer__sub { color: var(--muted); }
.ll-drawer__foot { color: var(--muted); }

/* ---------- boutons ---------- */
.ll-btn { font-weight: 500; }
.ll-btn--primary { background: var(--action); border-color: var(--action); color: var(--onaction); }
.ll-btn--primary:hover { background: var(--action-hover); border-color: var(--action-hover); color: var(--onaction); }
.ll-btn--ink { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.ll-btn--ink:hover { background: var(--ink-hover); border-color: var(--ink-hover); color: var(--bg); }
.ll-btn--outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.ll-btn--outline:hover { background: var(--ink); color: var(--bg); }
.ll-btn--light { background: var(--bg); border-color: var(--bg); color: var(--ink); }
.ll-btn--light:hover { background: var(--soft); border-color: var(--soft); color: var(--ink); }
.ll-btn--ghost { background: transparent; border-color: var(--bg); color: var(--bg); }
.ll-btn--ghost:hover { background: var(--bg); color: var(--ink); }
.ll-link { color: var(--ink); border-color: var(--ink); font-weight: 500; }
.ll-link:hover { color: var(--action); border-color: var(--action); }
.ll-link--light { color: var(--bg); border-color: var(--soft); }
.ll-link--light:hover { color: var(--bg); border-color: var(--bg); }

/* ---------- hero ---------- */
.ll-hero { background: var(--soft); }
.ll-hero__panel { background: var(--ink); color: var(--bg); }
.ll-hero__title { font-weight: 500; color: var(--bg); }
.ll-hero__sub { color: var(--soft); font-weight: 300; }
.ll-hero__panel .ll-eyebrow { color: var(--soft); }
.ll-hero__meta { background: var(--bg); color: var(--ink); font-weight: 500; }

/* ---------- sections ---------- */
.ll-section--soft { background: var(--soft); }
.ll-section--ink { background: var(--ink); color: var(--bg); }
.ll-section__intro { color: var(--muted); }

/* ---------- bento ---------- */
.ll-bento__tile { background: var(--soft); color: var(--bg); }
.ll-bento__tile:hover { color: var(--bg); }
.ll-bento__label { background: var(--ink); }
.ll-bento__index { color: var(--soft); font-weight: 500; }
.ll-bento__title { color: var(--bg); }
.ll-bento__count { color: var(--soft); }

/* ---------- bloc matiere ---------- */
.ll-material { background: var(--soft); }
.ll-material__media { background: var(--soft); }
.ll-material__caption { background: var(--bg); color: var(--ink); font-weight: 500; }
.ll-material__text { color: var(--muted); }
.ll-facts { border-color: var(--line-strong); }
.ll-fact { border-color: var(--line); }
.ll-fact__num { color: var(--ink); }
.ll-fact__label { color: var(--ink); }

/* ---------- cartes ---------- */
.ll-card { color: var(--ink); }
.ll-card:hover { color: var(--ink); }
.ll-card__media { background: var(--soft); }
.ll-card__badge { background: var(--bg); color: var(--ink); font-weight: 500; }
.ll-card__wool { color: var(--accent); font-weight: 500; }
.ll-card__title { font-weight: 400; }
.ll-card__price { font-weight: 500; }
.ll-card__more { color: var(--muted); }
.ll-dot { background: var(--sw); box-shadow: inset 0 0 0 1px rgba(18, 26, 46, .3), 0 0 0 1px rgba(18, 26, 46, .07); }

/* ---------- how to choose ---------- */
.ll-choose__card { background: var(--bg); border-color: var(--line); color: var(--ink); }
.ll-choose__card:hover { border-color: var(--line-strong); }
.ll-choose__index { color: var(--accent); border-color: var(--line); font-weight: 500; }
.ll-choose__text { color: var(--muted); }

/* ---------- manifeste ---------- */
.ll-manifesto { background: var(--action); color: var(--onaction); }
.ll-manifesto__by { color: var(--soft); font-weight: 500; }
.ll-manifesto .ll-rule { border-color: rgba(241, 235, 224, .55); }

/* ---------- sizing ---------- */
.ll-sizing__text { color: var(--muted); }
.ll-sizing__note { border-color: var(--accent); color: var(--ink); }
.ll-table th { color: var(--muted); border-color: var(--line-strong); }
.ll-table td { border-color: var(--line); }
.ll-table td:first-child { font-weight: 500; }
.ll-table__foot { color: var(--muted); }

/* ---------- lookbook ---------- */
.ll-look { color: var(--ink); }
.ll-look:hover { color: var(--ink); }
.ll-look__media { background: var(--soft); }
.ll-look__cap span:last-child { color: var(--muted); }

/* ---------- newsletter ---------- */
.ll-newsletter { background: var(--soft); }
.ll-newsletter__text, .ll-newsletter__legal { color: var(--muted); }
.ll-newsletter__form input { border-color: var(--ink); color: var(--ink); background: var(--bg); }
.ll-newsletter__form input::placeholder { color: var(--muted); }

/* ---------- footer ---------- */
.ll-footer { background: var(--ink); color: var(--bg); }
.ll-footer__top, .ll-footer__bottom { border-color: var(--line-light); }
.ll-footer__heading { color: var(--soft); font-weight: 500; }
.ll-footer__link { color: var(--bg); opacity: .85; }
.ll-footer__link:hover { color: var(--bg); opacity: 1; }
.ll-footer__text, .ll-footer__legal { color: var(--soft); }
.ll-footer__bottom { color: var(--soft); }
.ll-footer__pay span { border-color: var(--line-light); color: var(--soft); }
.ll-footer a:hover { color: var(--bg); }

/* ---------- collection ---------- */
.ll-banner { background: var(--soft); color: var(--bg); }
.ll-banner .ll-crumbs { color: var(--soft); }
.ll-banner .ll-crumbs a:hover { color: var(--bg); }
.ll-banner__title { font-weight: 500; }
.ll-collection-intro__text { color: var(--muted); }
.ll-collection-intro__text strong { color: var(--ink); font-weight: 500; }
.ll-toolbar { border-color: var(--line); }
.ll-toolbar__count { color: var(--muted); font-weight: 500; }
.ll-sort { color: var(--muted); }
.ll-sort select { color: var(--ink); border-color: var(--ink); }
.ll-filters__label { color: var(--muted); font-weight: 500; }
.ll-filters__group + .ll-filters__group { border-color: var(--line); }
.ll-pill { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.ll-pill:hover { border-color: var(--ink); }
.ll-pill.is-active { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.ll-empty { color: var(--muted); }
.ll-pagination__btn { border-color: var(--line-strong); color: var(--ink); }
.ll-pagination__btn.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ll-pagination__btn:not([disabled]):hover { background: var(--soft); }
.ll-about__text { color: var(--muted); }
.ll-chip { border-color: var(--line-strong); color: var(--ink); }
.ll-chip:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ll-chip.is-current { background: var(--soft); border-color: var(--soft); }

/* ---------- fiche produit ---------- */
.ll-pdp-crumbs .ll-crumbs { color: var(--muted); }
.ll-pdp-crumbs .ll-crumbs a:hover { color: var(--action); }
.ll-gallery__slide { background: var(--soft); }
.ll-gallery__zoom { background: rgba(241, 235, 224, .92); color: var(--ink); }
.ll-gallery__zoom:hover { background: var(--bg); }
.ll-gallery__counter { background: rgba(241, 235, 224, .92); color: var(--ink); font-weight: 500; }
.ll-gallery__thumb { background: var(--soft); border-color: var(--line); }
.ll-gallery__thumb.is-active { border-color: var(--ink); }
.ll-lightbox { background: rgba(18, 26, 46, .92); }
.ll-lightbox__close { background: var(--bg); color: var(--ink); }
.ll-pdp__cat { color: var(--accent); font-weight: 500; }
.ll-stock { color: var(--ink); }
.ll-stock__dot { background: var(--accent); }
.ll-pdp__price { color: var(--ink); }
.ll-keyfeat { border-color: var(--line-strong); color: var(--muted); }
.ll-option__label { color: var(--muted); font-weight: 500; }
.ll-option__label b { color: var(--ink); }
.ll-swatch { border-color: transparent; color: var(--ink); }
.ll-swatch:hover { border-color: var(--line-strong); }
.ll-swatch.is-selected { border-color: var(--ink); }
.ll-swatch::after { box-shadow: inset 0 0 0 1px rgba(18, 26, 46, .14); }
.ll-size { border-color: var(--line-strong); color: var(--ink); }
.ll-size:hover { border-color: var(--ink); }
.ll-size.is-selected { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.ll-size.is-off { color: var(--muted); border-color: var(--line); opacity: .55; background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(18,26,46,.06) 6px 7px); }
.ll-option__hint { color: var(--muted); }
.ll-spec__link { color: var(--action); border-color: var(--action); font-weight: 500; }
.ll-spec__link:hover { color: var(--action-hover); }
.ll-after { border-color: var(--line-strong); }
.ll-after__row { border-color: var(--line); color: var(--ink); }
.ll-after__row svg { color: var(--accent); }
.ll-spec { border-color: var(--line-strong); }
.ll-spec__row { border-color: var(--line); }
.ll-spec__label { color: var(--muted); font-weight: 500; }
.ll-benef { border-color: var(--line-strong); background: var(--line); }
.ll-keyfeat__label, .ll-benef__label { color: var(--accent); }
.ll-benef__item { background: var(--bg); }
.ll-benef__t { color: var(--accent); font-weight: 500; }
.ll-benef__d { color: var(--muted); }
.ll-meta { border-color: var(--line); color: var(--muted); }
.ll-meta b { color: var(--ink); }
.ll-meta a { color: var(--ink); border-color: var(--line-strong); }
.ll-accordion__item { border-color: var(--line); }
.ll-accordion__trigger { color: var(--ink); font-family: var(--display); }
.ll-accordion__trigger:hover { color: var(--action); }
.ll-accordion__inner { color: var(--muted); }
.ll-bloc { background: var(--bg); }
.ll-bloc:nth-child(even) { background: var(--soft); }
.ll-bloc__media { background: var(--soft); }
.ll-bloc__body p { color: var(--muted); }
.ll-acc { background: var(--soft); }
.ll-sticky { background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(18, 26, 46, .08); }
.ll-sticky__name { color: var(--accent); }
.ll-panel__scrim { background: rgba(18, 26, 46, .55); }
.ll-panel__box { background: var(--bg); color: var(--ink); }
.ll-panel__text { color: var(--muted); }

/* ---------- panier lateral ---------- */
.ll-sidecart__scrim { background: rgba(18, 26, 46, .55); }
.ll-sidecart__panel { background: var(--bg); color: var(--ink); box-shadow: -18px 0 48px rgba(18, 26, 46, .18); }
.ll-sidecart__top { border-color: var(--line); }
.ll-sidecart__title { font-family: var(--display); font-weight: 500; }
.ll-sidecart__line { border-color: var(--line); }
.ll-sidecart__thumb, .ll-sidecart__reco-thumb { background: var(--soft); }
.ll-sidecart__thumb img, .ll-sidecart__reco-thumb img { filter: saturate(.92); }
.ll-sidecart__name, .ll-sidecart__reco-name { color: var(--ink); }
.ll-sidecart__name:hover, .ll-sidecart__reco-name:hover { color: var(--action); }
.ll-sidecart__variant, .ll-sidecart__reco-price, .ll-sidecart__ship, .ll-sidecart__trust, .ll-sidecart__empty { color: var(--muted); }
.ll-sidecart__price { font-weight: 500; }
.ll-sidecart__reco-add { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.ll-sidecart__reco-add:hover { background: var(--ink); color: var(--bg); }
.ll-sidecart__foot { background: var(--soft); border-color: var(--line-strong); }
.ll-sidecart__sum { font-family: var(--display); }
.ll-sidecart__trust svg { color: var(--accent); }

/* ---------- panier ---------- */
.ll-cart__sub { color: var(--muted); }
.ll-cart__list, .ll-cart__item { border-color: var(--line); }
.ll-cart__thumb { background: var(--soft); }
.ll-cart__meta { color: var(--muted); }
.ll-cart__linePrice { font-weight: 500; }
.ll-qty { border-color: var(--line-strong); }
.ll-qty button:hover { background: var(--soft); }
.ll-textbtn { color: var(--ink); border-color: var(--line-strong); }
.ll-textbtn:hover { color: var(--action); border-color: var(--action); }
.ll-summary { background: var(--soft); }
.ll-summary__row small, .ll-summary__note, .ll-summary__reassure { color: var(--muted); }
.ll-summary__row--total { border-color: var(--line-strong); color: var(--ink); }
.ll-summary__reassure svg { color: var(--accent); }
.ll-summary__pay span { border-color: var(--line-strong); color: var(--ink); }

/* ---------- checkout ---------- */
.ll-steps { color: var(--muted); font-weight: 500; }
.ll-steps__step.is-active { color: var(--ink); }
.ll-steps__step.is-active .ll-steps__n { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ll-steps__step.is-done .ll-steps__n { border-color: var(--accent); color: var(--accent); }
.ll-checkout__guest { color: var(--muted); }
.ll-checkout__guest a { color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.ll-fieldset__legend { color: var(--accent); font-weight: 500; }
.ll-field input { border-color: var(--line-strong); color: var(--ink); }
.ll-field input:focus { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.ll-field label { color: var(--muted); }
.ll-field__hint { color: var(--muted); }
.ll-radio-card { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.ll-radio-card:hover { border-color: var(--ink); }
.ll-radio-card.is-selected { border-color: var(--ink); background: var(--soft); }
.ll-radio-card__text small { color: var(--muted); }
.ll-radio-card__logos span { border-color: var(--line-strong); }
.ll-card-fields { border-color: var(--ink); background: var(--soft); }
.ll-radio-card input, .ll-checkbox input { accent-color: var(--action); }
.ll-checkout__summary { background: var(--soft); }
.ll-lineitem { border-color: var(--line); }
.ll-lineitem__thumb { background: var(--bg); }
.ll-lineitem__meta, .ll-checkout__security, .ll-checkout__legal { color: var(--muted); }
.ll-checkout__security svg { color: var(--accent); }
.ll-checkout__legal a { color: var(--ink); border-color: var(--line-strong); }
.ll-checkout__legal a:hover { color: var(--action); }

/* ============ PAGES DE SERVICE / LÉGALES (mise en page Luventa, tokens Highland) ============ */
body.page:not(.woocommerce-page):not(.home) .entry-content,
body.single-post .entry-content{max-width:820px;margin:0 auto!important;padding:8px 20px 48px!important;box-sizing:border-box;overflow-wrap:break-word;font-family:var(--text);font-size:16px;line-height:1.7;color:#3f3a32}
body.page .entry-title,body.single-post .entry-title{max-width:820px;margin:32px auto 6px;padding:0 20px;font-family:var(--display);color:var(--ink);font-weight:600;line-height:1.12;font-size:clamp(30px,5vw,44px)}
body.page:not(.home) .entry-content h2{font-family:var(--display);color:var(--ink);font-weight:600;font-size:clamp(19px,2.6vw,24px);line-height:1.2;margin:30px 0 8px}
body.page:not(.home) .entry-content h3{font-family:var(--display);color:var(--ink);font-weight:600;font-size:18px;margin:22px 0 6px}
body.page:not(.home) .entry-content p{margin:0 0 14px}
body.page:not(.home) .entry-content a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(94,107,72,.5)}
body.page:not(.home) .entry-content a:hover{color:var(--action)}
body.page:not(.home) .entry-content ul,body.page:not(.home) .entry-content ol{margin:0 0 14px;padding-left:22px}
body.page:not(.home) .entry-content li{margin:4px 0}
/* bloc contact/who-we-are en bas des pages légales (équivalent lv-contact-legal) */
.entry-content .legal,.entry-content .lo-legal,.entry-content .lo-contact{margin:46px 0 8px;padding:30px 28px;border:1px solid rgba(18,26,46,.14);border-radius:4px;background:var(--soft)}
.entry-content .legal h2,.entry-content .legal h3{margin:0 0 18px}
.entry-content .legal .grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px}
.entry-content .legal .eyebrow,.entry-content .legal .et{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--accent);margin-bottom:6px}
.entry-content .legal p{margin:0;font-size:15.5px;line-height:1.6}
@media(max-width:700px){.entry-content .legal{padding:22px 16px}.entry-content .legal .grille{grid-template-columns:1fr;gap:16px}}
/* About Us (page 11, classes lo-ab*) : mise en page éditoriale, tokens Highland */
.entry-content .lo-ab{max-width:none;width:100%}
.entry-content .lo-ab-hero figcaption{padding:60px 28px 24px;font-family:var(--display);color:var(--ink)}
.entry-content .lo-ab-bloc{margin:26px 0}
.entry-content .lo-ab-intro{font-size:18px;line-height:1.6;color:var(--ink)}
.entry-content .lo-ab-prat{background:var(--soft);border-radius:4px;padding:24px}
.entry-content .sign{font-family:var(--display);font-style:italic;color:var(--ink)}

/* Template page maison (.ll-page) : pleine largeur claire, colonne centrée, pas de flottant Storefront */
main.ll-page{display:block;width:100%;max-width:none;float:none;background:var(--bg);padding:0 0 20px}
main.ll-page .ll-page__article{background:var(--bg)}
main.ll-page .ll-page__head{max-width:820px;margin:0 auto;padding:36px 20px 0}
main.ll-page .entry-title{margin:0}
body.page main.ll-page .entry-content{background:transparent;color:#3f3a32}

/* ===== corrections resets Storefront + pied de page (VH 07/09) ===== */
/* Storefront ecrase un svg seul dans un bouton flex : le burger et la loupe de l en-tete tombaient a 2 px de large
   et se lisaient comme un petit point gris. On empeche le retrecissement. */
.ll-icon-btn > svg, .ll-header button > svg, .ll-drawer button > svg, .ll-sidecart button > svg, .ll-qty button > svg { flex: 0 0 auto; }
/* Pied de page sombre : le mot LANORA heritait de --ink (bleu nuit) sur fond bleu nuit, il etait invisible. */
.ll-footer .ll-logo, .ll-footer .ll-logo:hover { color: var(--bg); }
/* Direction C (11/09/2026) : LONDON en creme sur marine, jamais l'olive (contraste 3,03:1, illisible) — voir logo.css */

/* ===== pages legales : blocs pratiques et tableaux (VH 07/09) ===== */
/* .grille > .c > b + span : sans display:block les six lignes se collaient (« Wool coats onlyLong coats... »). */
.entry-content .grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 26px}
.entry-content .grille .c b{display:block;font-family:var(--display);font-weight:500;font-size:16px;line-height:1.3;margin-bottom:6px;color:var(--ink)}
.entry-content .grille .c span{display:block;font-size:15px;line-height:1.6;color:var(--ink)}
@media(max-width:700px){.entry-content .grille{grid-template-columns:1fr;gap:16px}}
/* Tableaux des pages legales : Storefront les peint en blancs froids (#F8F8F8/#FDFDFD), hors palette. */
.entry-content table{width:100%;border-collapse:collapse;background:transparent;margin:0 0 18px}
.entry-content table th{background:var(--soft);color:var(--ink);font-family:var(--text);font-weight:600;font-size:13px;letter-spacing:.04em;text-align:left;padding:12px 14px;border:1px solid rgba(18,26,46,.14)}
.entry-content table td{background:transparent;color:var(--ink);font-size:15px;padding:12px 14px;border:1px solid rgba(18,26,46,.14)}
.entry-content table tr:nth-child(even) td{background:rgba(227,218,203,.35)}

/* ===== page panier Highland (VH 07/09) ===== */
/* Le panier vit dans le gabarit de page maison : il lui faut la gouttiere et la largeur du site. */
body.woocommerce-cart main.ll-page .ll-page__head{max-width:var(--container);padding:36px var(--gutter) 0}
body.woocommerce-cart main.ll-page .entry-content{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.ll-cart .quantity{display:inline-flex}
.ll-cart .quantity .qty{width:72px;height:44px;text-align:center;border:1px solid var(--line-strong);background:var(--bg);color:var(--ink);font:15px/1 var(--text);border-radius:var(--radius)}
.ll-cart__update{display:flex;justify-content:flex-end;gap:var(--s4);padding:var(--s4) 0 0}
.ll-cart__meta .product-price{color:var(--muted)}
/* Storefront fait flotter .cart_totals sur 48 % : la carte recap n occupait qu un tiers de sa colonne. */
.ll-cart .cart-collaterals{width:100%}
.ll-cart .cart-collaterals .ll-summary,.ll-cart .cart_totals{float:none;width:100%;background:var(--soft);border:1px solid var(--line);border-radius:var(--radius)}
.ll-summary__title{font-family:var(--display);font-weight:500}
.ll-summary .checkout-button,.ll-summary a.button,.ll-summary .wc-proceed-to-checkout a{display:flex;align-items:center;justify-content:center;width:100%;background:var(--action);color:var(--onaction);border:0;border-radius:var(--radius);font:600 13px/1 var(--text);letter-spacing:.1em;text-transform:uppercase;padding:18px 24px;text-align:center}
.ll-summary .checkout-button:hover,.ll-summary .wc-proceed-to-checkout a:hover{filter:brightness(1.08);color:var(--onaction)}
.ll-summary__pay span{border:1px solid var(--line-strong);color:var(--muted)}
.ll-summary__reassure svg{color:var(--accent)}

/* ===== fiche produit : correctifs VH 07/09 (2e passe) ===== */
/* .ll-pdp etait en grid-template-columns:1fr : le minimum automatique d une piste 1fr est min-content,
   donc la colonne montait a 416 px sur un ecran de 390 et .ll-product (overflow:hidden) COUPAIT le texte
   a droite sans creer de debordement mesurable. minmax(0,1fr) borne la piste a la largeur reelle. */
@media (max-width: 1023px) { .ll-pdp { grid-template-columns: minmax(0, 1fr); } }
.ll-pdp__info { min-width: 0; }
.ll-pdp__info > *, .ll-variations, .ll-variations * { min-width: 0; }
/* Storefront pose button::after{display:none} : la pastille de couleur, dessinee en ::after, disparaissait
   et il ne restait qu un cercle vide. */
.ll-swatch::after { display: block; }
/* Bouton d ajout au panier tant qu une taille n est pas choisie : Storefront le passe a opacity .5 !important,
   il se lisait comme un bouton rose delave et casse. Etat desactive explicite et lisible a la place. */
.ll-btn--primary.disabled, .ll-btn--primary:disabled, button.single_add_to_cart_button.disabled { opacity: 1 !important; background: #8E5A62; color: var(--onaction); cursor: not-allowed; }

/* ===== collection + tableau des tailles : correctifs VH 07/09 (2e passe) ===== */
/* Fil d Ariane du hero : les liens prenaient le violet de lien visite du navigateur. */
.ll-crumbs a, .ll-crumbs a:visited { color: inherit; text-decoration: none; }
.ll-banner .ll-crumbs, .ll-banner .ll-crumbs a, .ll-banner .ll-crumbs a:visited { color: var(--bg); }
.ll-banner .ll-crumbs a:hover { color: var(--bg); text-decoration: underline; }
/* Barre de filtres en desktop : avec le vrai catalogue (8 couleurs, 6 tailles, 3 filtres laine) les trois
   groupes se repliaient en trois lignes decalees au milieu de la barre. Ils prennent maintenant leur propre
   ligne pleine largeur, sous le compteur et le tri. Ecart assume avec la maquette, qui avait moins de pastilles. */
@media (min-width: 1024px) {
  .ll-toolbar { flex-wrap: wrap; }
  .ll-toolbar__row:first-child { order: 0; flex: 1 1 auto; }
  .ll-toolbar__row:last-child { order: 1; flex: 0 0 auto; }
  .ll-filters { order: 2; flex: 1 0 100%; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--line); }
}
/* Tableau des tailles de l accueil : Storefront peint th/td en blancs froids sur le creme. */
/* Storefront pose table:not(.has-background) th{background-color:#f8f8f8} : plus specifique que .ll-table th
   et charge apres app.css, le tableau des tailles ressortait en blanc froid sur le creme. */
table.ll-table:not(.has-background), table.ll-table:not(.has-background) th, table.ll-table:not(.has-background) td { background-color: transparent; }
@media (max-width: 1023px) { .ll-table__scroll { padding-left: 2px; } .ll-table td:first-child, .ll-table th:first-child { padding-left: 2px; } }

/* ===== correctifs VH 07/09 (3e passe) ===== */
/* Le champ nombre natif sert de porteur de valeur au stepper maison : il restait VISIBLE a cote du +,
   on lisait « - 1 + » puis un second carre gris avec 1. On le masque a l oeil sans le retirer du formulaire. */
.ll-buyrow .ll-qty > input.ll-qty__input { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Storefront remplace le lien de suppression par une croix Font Awesome (text-indent:-9999px + ::before).
   Dans le panier Highland on veut le mot « Remove ». */
.ll-cart__actions a.remove { text-indent: 0; width: auto; height: auto; font-size: var(--fs-xs); line-height: 1.4; color: var(--muted); background: none; }
.ll-cart__actions a.remove::before, .ll-cart__actions a.remove::after { content: none; display: none; }
.ll-cart__actions a.remove:hover { color: var(--action); background: none; }
/* Prix unitaire de la ligne panier : le balisage de prix WooCommerce est fait de spans imbriques,
   ils passaient tous en block et coupaient « £ / 219.00 / each » sur trois lignes. */
.ll-cart__meta .product-price, .ll-cart__meta .product-price * { display: inline; white-space: nowrap; }
/* Tableau des tailles : Storefront peint aussi une ligne sur deux (nth-child(2n)) en #fbfbfb. */
table.ll-table:not(.has-background) tbody td, table.ll-table:not(.has-background) tbody tr:nth-child(2n) td { background-color: transparent; }
/* Puce de la collection en cours : elle n avait pas de bordure et flottait entre des puces encadrees. */
.ll-chip.is-current { background: var(--ink); color: var(--bg); border-color: var(--ink); }
/* Panier lateral : la ligne quantite/prix/suppression se repliait sur les articles au prix long, et le
   dernier article passait sous le pied fixe. */
.ll-sidecart__row { flex-wrap: nowrap; }
.ll-sidecart__row > * { min-width: 0; }
.ll-sidecart__body { padding-bottom: var(--s6); }

/* ===== correctifs VH 07/09 (4e passe) ===== */
/* Le tiroir est une colonne flex : ses blocs se comprimaient sous leur contenu des qu on ajoutait des liens,
   « Size guide » se dessinait par-dessus « Wool Blend Coats ». On interdit le retrecissement, le panneau defile. */
.ll-drawer__panel > * { flex: 0 0 auto; }
.ll-drawer__foot { margin-top: var(--s6); }
/* Le lien de suppression du panier portait .ll-textbtn, dont le border-bottom courait plus large que le mot
   et laissait un filet orphelin sous « Remove ». */
.ll-cart__actions a.remove { border-bottom: 0; display: inline-flex; width: auto; min-width: 0; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }

/* ===== .ll-textbtn : filet detache (VH 07/09) ===== */
/* .ll-textbtn a min-height:44px (zone tactile) ET border-bottom : le filet se dessinait au bas de la boite,
   a une quinzaine de pixels SOUS le mot, comme un trait orphelin. Souligne du texte a la place. */
.ll-textbtn { border-bottom: 0; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ll-textbtn:hover { text-decoration-color: var(--action); }

/* ===== page panier : entete, stepper, reco (VH 07/09, 6e passe) ===== */
/* Le titre de la page vient maintenant du gabarit panier (« Your bag, N coats. »), celui de page.php ferait doublon. */
body.woocommerce-cart main.ll-page .ll-page__head { display: none; }
body.woocommerce-cart main.ll-page .entry-content { padding-top: 28px; }
/* display:block faisait collapser le filet ::before de l accroche : il faut garder le flex. */
.ll-cart__head .ll-eyebrow { display: flex; margin-bottom: 10px; }
.ll-cart__main { min-width: 0; }
.ll-cart__back { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; }
.ll-cart__update { display: flex; justify-content: flex-end; gap: var(--s4); padding: var(--s4) 0 0; }
/* Le champ nombre natif sert de porteur de valeur au stepper du panier, comme sur la fiche produit. */
.ll-cart .ll-qty > input.ll-qty__input, .ll-cart .ll-qty .quantity { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ll-cart .ll-qty { position: relative; }
/* « Update cart » : gris pale sur creme, on le prenait pour un bouton desactive. */
.ll-btn--ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--ink); background: none; color: var(--ink); font: 600 12px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.ll-btn--ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ll-cart__reco { padding: var(--s7) 0 var(--s8); }
@media (min-width: 1024px) {
  .ll-cart__main { grid-column: 1; }
  .ll-cart__aside { grid-column: 2; }
}
/* Panier lateral : le pied fixe tranchait la derniere ligne en plein milieu de sa case quantite. */
.ll-sidecart__body { padding-bottom: var(--s8); }

/* Panier vide habille Highland. */
.ll-cart--empty .ll-empty { padding: var(--s5) 0; font-size: var(--fs-base); }
.ll-cart--empty .ll-empty a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
@media (min-width: 1024px) { .ll-cart--empty { grid-template-columns: minmax(0, 1fr); } }

/* ===== « Update cart » masque (VH 07/09, 8e passe) ===== */
/* WooCommerce laisse « Update cart » DESACTIVE tant qu aucune quantite n a bouge : le bouton s affichait
   a 50 %% d opacite et se lisait comme un element casse. Le stepper le pilote pour l utilisateur, donc on le
   sort de la vue sans le retirer du formulaire (js/cart.js a besoin de le cliquer). */
.ll-cart__update [data-ll-cart-update] { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ll-cart__update { position: relative; padding: 0; }

/* ===================== RANGEMENT 10/09 — correctifs Vision Humain ===================== */

/* 1. [hidden] battu par nos regles de classe (display:grid / inline-flex).
   Consequence : « Clear filters » s affichait sans filtre actif, et la bande de vignettes
   de la galerie s affichait avec UNE seule photo (la maquette la masque sous 2 photos). */
[hidden] { display: none !important; }

/* 2. Un svg seul dans un bouton flex est ecrase a ~2 px (bug deja corrige ailleurs, la loupe
   de la galerie avait ete oubliee : le bouton rond etait vide). Regle rendue generale. */
button > svg, a > svg, .ll-gallery__zoom > svg { flex: 0 0 auto; }

/* 3. Titre des pages de service decale de 20 px vers la droite par rapport au texte :
   .ll-page__head porte deja la gouttiere, .entry-title en rajoutait une. */
main.ll-page .entry-title { margin: 0; padding: 0; }

/* 4. Page panier : le style de lien du contenu de page (souligne) debordait sur les cartes
   produit de « You may also like » — titre, collection et prix apparaissaient soulignes. */
body.woocommerce-cart .entry-content a.ll-card,
body.woocommerce-cart .entry-content a.ll-card:hover { text-decoration: none; }

/* 5. Fiche produit : PayPal reserve deux blocs vides sous le bouton (.ppcp-messages 24 px +
   .ppc-button-wrapper 104 px). Tant que le compte n est pas relie ils dessinent un trou de 128 px
   au bas de la buy box, et la maquette Highland ne prevoit AUCUN bouton express sur la fiche.
   A rouvrir si Mamadou veut le bouton PayPal express sur la fiche produit. */
body.single-product .ll-pdp__info > .ppcp-messages,
body.single-product .ll-pdp__info > .ppc-button-wrapper { display: none; }

/* 6. Barre de filtres de collection : la regle du 07/09 poussait les filtres sur leur propre ligne,
   ce qui laissait le compteur seul en haut et un grand vide au milieu. On revient a la maquette :
   compteur a gauche, filtres au centre (ils bouclent), tri a droite. */
@media (min-width: 1024px) {
  .ll-toolbar { flex-wrap: nowrap; align-items: flex-start; }
  .ll-toolbar__row:first-child { order: 0; flex: 0 0 auto; padding-top: 6px; }
  .ll-toolbar__row:last-child { order: 2; flex: 0 0 auto; padding-top: 2px; }
  .ll-filters { order: 1; flex: 1 1 auto; padding: 0 var(--s6); margin-top: 0; border-top: 0; }
}

/* ============================================================================
   DNVB 10/09 — chaque page au niveau d'une page de grande marque.
   Références lues : Toteme, Aligne, Reformation, Everlane (captures dnvb-ref).
   Principes retenus : un seul conteneur, un seul ratio d'image, cartes sans bruit,
   blancs réguliers, corps de texte à 16 px, une seule couleur d'accent.
   ============================================================================ */

/* ---- 0. échelle de lecture : le corps passe de 15 à 16 px en desktop ---- */
@media (min-width: 1024px) {
  :root { --fs-base: 16px; --fs-sm: 14px; }
}

/* ---- 1. notices WooCommerce : palette Highland, plus jamais d'orange ---- */
.woocommerce-error, .woocommerce-info, .woocommerce-message, .wc-block-components-notice-banner {
  background: var(--soft) !important; border: 0 !important; border-left: 2px solid var(--action) !important;
  border-radius: 0 !important; color: var(--ink) !important;
  font: 400 var(--fs-sm)/1.6 var(--text) !important; list-style: none !important;
  padding: 14px 20px 14px 44px !important; margin: 0 0 var(--s5) !important; position: relative;
}
.woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before {
  color: var(--action) !important; background: none !important; top: 14px !important; left: 18px !important;
  font-size: 14px !important; line-height: 1.6 !important; margin: 0 !important;
}
.woocommerce-error li, .woocommerce-info li, .woocommerce-message li { margin: 0; }
.woocommerce-message .button, .woocommerce-error .button, .woocommerce-info .button { display: none !important; }

/* ---- 2. carte produit : hauteurs égales, prix aligné, aucun bruit ---- */
.ll-grid { align-items: stretch; }
.ll-grid > .ll-card { display: flex; flex-direction: column; height: 100%; }
.ll-card__media { flex: 0 0 auto; }
.ll-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding-top: var(--s4); }
.ll-card__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.8em; margin-bottom: var(--s2);
}
.ll-card__price { margin-top: auto; margin-bottom: var(--s2); }
.ll-card__swatches { margin-top: 0; }
/* La mention de composition sort de la photo : une ligne discrète sous le prix, comme la mention matière d'Arket. */
.ll-card__badge {
  position: static; background: none !important; color: var(--muted) !important; padding: 0;
  margin-top: var(--s2); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}
.ll-card__body .ll-card__badge { display: block; }
.ll-card__media .ll-card__badge { display: none; }
.ll-card__wool { color: var(--muted); font-size: 11px; letter-spacing: .16em; }

/* ---- 3. un seul conteneur : tout démarre sur la même verticale ---- */
@media (min-width: 1024px) {
  .ll-newsletter { padding-inline: 0; }
  .ll-newsletter__inner { max-width: var(--container); padding-inline: var(--gutter); }
  .ll-lookbook { padding-inline: calc(max(0px, (100% - var(--container)) / 2) + var(--gutter)); }
}

/* ---- 4. héros d'accueil : plus de pavé plein, un voile dégradé ---- */
.ll-hero__panel { background: transparent !important; }
.ll-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(18, 26, 46, .78), rgba(18, 26, 46, .30) 46%, rgba(18, 26, 46, .06) 78%);
}
.ll-hero__panel { z-index: 1; }
.ll-hero__meta { z-index: 1; background: transparent !important; color: var(--bg) !important; opacity: .8; padding: 0; }
@media (min-width: 1024px) {
  .ll-hero::after {
    background: linear-gradient(90deg, rgba(18, 26, 46, .74) 0%, rgba(18, 26, 46, .38) 42%, rgba(18, 26, 46, .04) 72%);
  }
  .ll-hero__panel { padding-left: 0; padding-right: 0; left: calc(max(0px, (100% - var(--container)) / 2) + var(--gutter)); }
}

/* ---- 5. bannière de collection : une seule image, pas de couture ---- */
@media (min-width: 1024px) {
  .ll-banner { grid-template-columns: 1fr; height: 520px; }
  .ll-banner__img--second { display: none; }
  .ll-banner__content { padding-inline: calc(max(0px, (100% - var(--container)) / 2) + var(--gutter)); }
}
@media (max-width: 1023px) { .ll-banner { height: 380px; } }
.ll-banner__scrim { background: linear-gradient(to top, rgba(18, 26, 46, .80), rgba(18, 26, 46, .22) 58%, rgba(18, 26, 46, .04) 82%); }
.ll-banner .ll-crumbs, .ll-banner .ll-crumbs a { color: rgba(241, 235, 224, .88); }

/* ---- 6. barre d'outils de collection : le compteur ne reste plus seul ---- */
.ll-toolbar__count { color: var(--muted); }
.ll-collection-intro__text:nth-child(2) { font-size: var(--fs-sm); color: var(--muted); }

/* ---- 7. fiche produit ---- */
@media (min-width: 1024px) {
  /* La galerie tient à l'écran pendant qu'on lit la colonne d'achat : plus de crème vide à gauche. */
  .ll-gallery { position: sticky; top: calc(var(--header-h) + var(--s5)); bottom: auto; align-self: start; }
  .ll-pdp { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s9); }
  /* Les trois blocs éditoriaux se lisent tous de la même façon. */
  .ll-bloc__body { align-self: center; padding: var(--s8) var(--s8); }
  .ll-bloc__media { height: 560px; }
}
/* Un seul compteur de photo, et seulement s'il y a plusieurs photos visibles, quelle que soit
   leur position dans le DOM (correctif 29/09 nuit : l'ancienne regle ne testait que la position 2). */
.ll-gallery__track:not(:has(.ll-gallery__slide:not([hidden]) ~ .ll-gallery__slide:not([hidden]))) .ll-gallery__counter { display: none; }
/* La pastille blanche était invisible sur le crème. */
.ll-swatch::after { box-shadow: inset 0 0 0 1px rgba(18, 26, 46, .22); }
/* Une seule couleur d'accent par page : le bordeaux est réservé au bouton d'achat. */
.ll-spec__link, .ll-option__label a { color: var(--ink); border-bottom-color: rgba(18, 26, 46, .35); }
/* « Good to know » : même conteneur que le reste de la page, un seul filet en bas. */
.ll-acc__inner { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.ll-acc .ll-acc__item:last-child, .ll-acc .ll-accordion > *:last-child { border-bottom: 0; }
.ll-acc .ll-acc__panel .ll-acc__item { padding-inline: 0; width: 100%; }

/* ---- 8. panier ---- */
.ll-cart__head .ll-cart__sub { margin-top: var(--s3); }
.ll-summary__title .ll-monogram { display: none; }        /* le monogramme déséquilibrait le titre */
.ll-summary__pay { display: none; }                        /* deux rectangles « PAYPAL » « CARD » : du bruit */
@media (min-width: 1024px) {
  .ll-cart { gap: var(--s8); grid-template-columns: minmax(0, 1fr) 400px; }
  .ll-cart__list { margin-top: var(--s5); }
  .ll-cart__item { padding: var(--s5) 0; }
  .ll-cart__foot { margin-top: var(--s4); }
}

/* ---- 9. pied de page : dense, comme celui d'une maison de mode ---- */
.ll-footer__pay { display: none; }
@media (min-width: 1024px) {
  .ll-footer__link { padding: 5px 0; min-height: 0; }
  .ll-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--s7); }
}
.ll-footer__facts { display: grid; gap: 6px; margin-top: var(--s5); font-size: var(--fs-xs); line-height: 1.7; color: rgba(241, 235, 224, .74); }

/* ---- 10. pages de service : mise en page éditoriale, listes à puces, tableaux ---- */
body.page:not(.woocommerce-page):not(.home) .entry-content { font-size: 16px; line-height: 1.75; }
body.page:not(.home) .entry-content h2 {
  margin: 56px 0 14px; padding-top: 24px; border-top: 1px solid rgba(18, 26, 46, .14);
}
body.page:not(.home) .entry-content h2:first-child { margin-top: 8px; padding-top: 0; border-top: 0; }
body.page:not(.home) .entry-content h3 { margin: 30px 0 8px; }
body.page:not(.home):not(.woocommerce-page) .entry-content ul { padding-left: 0; list-style: none; }
body.page:not(.home):not(.woocommerce-page) .entry-content ul > li { position: relative; padding-left: 22px; margin: 8px 0; }
body.page:not(.home):not(.woocommerce-page) .entry-content ul > li::before {
  content: ''; position: absolute; left: 0; top: .78em; width: 10px; height: 1px; background: var(--accent);
}
body.page:not(.home) .entry-content ol { padding-left: 20px; }
body.page:not(.home) .entry-content ol > li { margin: 8px 0; }
/* Tableaux : filets fins, en-tête en petites capitales, empilés en mobile. */
.entry-content table th {
  background: transparent; border: 0; border-bottom: 1px solid var(--ink);
  font: 500 11px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; padding: 14px 14px 12px;
}
.entry-content table td { border: 0; border-bottom: 1px solid rgba(18, 26, 46, .14); padding: 16px 14px; }
.entry-content table tr:nth-child(even) td { background: transparent; }
/* Blocs pratiques : filets au lieu d'un aplat beige (un seul aplat par page). */
.entry-content .lo-ab-prat, .entry-content .legal, .entry-content .lo-legal, .entry-content .lo-contact {
  background: transparent; border: 0; border-top: 1px solid rgba(18, 26, 46, .16);
  border-bottom: 1px solid rgba(18, 26, 46, .16); border-radius: 0; padding: 34px 0;
}

/* ---- 11. accordéons des pages de service (montés par js/service.js) ---- */
.ll-svc-acc { border-top: 1px solid rgba(18, 26, 46, .14); margin: 18px 0 28px; }
.ll-svc-acc > details { border-bottom: 1px solid rgba(18, 26, 46, .14); }
.ll-svc-acc > details > summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s5); padding: 18px 0; min-height: 48px;
  font: 500 16px/1.4 var(--text); color: var(--ink);
}
.ll-svc-acc > details > summary::-webkit-details-marker { display: none; }
.ll-svc-acc > details > summary::after {
  content: ''; flex: 0 0 auto; width: 9px; height: 9px; margin-top: 4px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); transition: transform var(--t-fast) var(--ease);
}
.ll-svc-acc > details[open] > summary::after { transform: rotate(-135deg); }
.ll-svc-acc > details > .ll-svc-acc__body { padding: 0 0 22px; max-width: 66ch; }
.ll-svc-acc > details > .ll-svc-acc__body > *:first-child { margin-top: 0; }

/* ---- 12. sommaire des pages de service : bande de liens, collante en haut ---- */
.ll-toc { margin: 0 0 30px; padding: 0 0 14px; border-bottom: 1px solid rgba(18, 26, 46, .16); }
.ll-toc__title { font: 500 11px/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.ll-toc a { display: inline-block; padding: 6px 0; margin-right: 26px; font-size: 14px; color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; }
.ll-toc a:hover { color: var(--ink); border-bottom-color: var(--ink); }
@media (min-width: 1024px) {
  .ll-toc { position: sticky; top: var(--header-h); z-index: 5; background: var(--bg); padding-top: 12px; }
}
body.page:not(.home) .entry-content h2[id] { scroll-margin-top: calc(var(--header-h) + 70px); }

/* ---- 13. caisse : en-tête et pied de page allégés, on ne sort pas par erreur ---- */
body.woocommerce-checkout .ll-bar,
body.woocommerce-checkout .ll-header__side--left .ll-nav,
  body.woocommerce-checkout .ll-header__burger,
body.woocommerce-checkout .ll-header__side--right .ll-icon-btn:not([data-ll-cart-open]),
body.woocommerce-checkout .ll-footer__grid,
body.woocommerce-checkout .ll-footer__top,
body.woocommerce-checkout .ll-newsletter { display: none !important; }
body.woocommerce-checkout .ll-header__inner { justify-content: center; }
body.woocommerce-checkout .ll-footer { padding: var(--s6) 0 var(--s5); }
@media (max-width: 640px) {
  .ll-checkout .ll-steps__sep { display: none; }
  .ll-checkout .ll-steps { gap: var(--s2) var(--s4); font-size: 11px; }
}

/* ---- 14. page contact : cartes de contact et bloc de réponses ---- */
body.page-id-12 .entry-content > h3 {
  font: 500 11px/1 var(--text); letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin: 44px 0 16px; font-family: var(--text);
}
body.page-id-12 .entry-content > ul {
  display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(18, 26, 46, .16);
  border: 1px solid rgba(18, 26, 46, .16); padding: 0; margin: 0 0 8px;
}
body.page-id-12 .entry-content > ul > li {
  background: var(--bg); padding: 22px 24px; margin: 0; list-style: none;
}
body.page-id-12 .entry-content > ul > li::before { display: none; }
body.page-id-12 .entry-content > ul > li strong {
  display: block; font: 500 11px/1 var(--text); letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
body.page-id-12 .entry-content > ul > li a {
  font-family: var(--display); font-size: 19px; line-height: 1.35; text-decoration: none;
  display: inline-block; min-height: 32px;
}
body.page-id-12 .entry-content > ul > li em { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; font-style: normal; }
@media (min-width: 760px) {
  body.page-id-12 .entry-content > ul { grid-template-columns: 1fr 1fr; }
}
.ll-help { margin: 52px 0 8px; border-top: 1px solid rgba(18, 26, 46, .16); padding-top: 28px; }
.ll-help__title { font: 500 11px/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.ll-help__grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.ll-help__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: 16px 0; min-height: 52px; border-bottom: 1px solid rgba(18, 26, 46, .12);
  font-size: 15px; color: var(--ink); text-decoration: none !important;
}
.ll-help__link::after { content: '→'; color: var(--muted); }
.ll-help__link:hover { color: var(--action); }
@media (min-width: 760px) { .ll-help__grid { grid-template-columns: 1fr 1fr; column-gap: 48px; } }

/* ---- 15. panier mobile : barre basse « Total · Checkout » ---- */
.ll-cartbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(18, 26, 46, .08);
  transform: translateY(110%); transition: transform var(--t-base) var(--ease);
}
.ll-cartbar.is-visible { transform: translateY(0); }
.ll-cartbar__total { font-family: var(--display); font-size: var(--fs-lg); white-space: nowrap; }
.ll-cartbar__btn { flex: 1; height: 48px; display: inline-flex; align-items: center; justify-content: center; }
@media (min-width: 1024px) { .ll-cartbar { display: none; } }

/* ---- 16. pages de service : chapeau de tête, bande d'étapes, faits ---- */
body.page:not(.home) .entry-content p.ll-lead {
  font-size: 18px; line-height: 1.65; color: var(--ink);
  border-left: 2px solid var(--accent); padding-left: 22px; margin: 0 0 18px;
}
.entry-content ol.ll-steps-band {
  list-style: none; counter-reset: llstep; padding: 0; margin: 26px 0 30px;
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: rgba(18, 26, 46, .16);
  border-top: 1px solid rgba(18, 26, 46, .16); border-bottom: 1px solid rgba(18, 26, 46, .16);
}
.entry-content ol.ll-steps-band > li {
  counter-increment: llstep; background: var(--bg); padding: 26px 24px; margin: 0;
  font-size: 15px; line-height: 1.65;
}
.entry-content ol.ll-steps-band > li::before {
  content: 'Step ' counter(llstep); display: block; margin-bottom: 10px;
  font: 500 11px/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}
@media (min-width: 760px) { .entry-content ol.ll-steps-band { grid-template-columns: repeat(3, 1fr); } }

/* Bande de faits (livraison) et bandeau éditorial (à propos), posés par le gabarit. */
.ll-facts-band {
  display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(18, 26, 46, .16);
  border-top: 1px solid rgba(18, 26, 46, .16); border-bottom: 1px solid rgba(18, 26, 46, .16);
  margin: 4px 0 34px;
}
.ll-facts-band > div { background: var(--bg); padding: 28px 24px; }
.ll-facts-band b { display: block; font-family: var(--display); font-weight: 500; font-size: 26px; line-height: 1.1; margin-bottom: 8px; color: var(--ink); }
.ll-facts-band span { font-size: 14px; line-height: 1.6; color: var(--muted); }
@media (min-width: 760px) { .ll-facts-band { grid-template-columns: repeat(3, 1fr); } }

.ll-page-hero { margin: 0 0 36px; }
.ll-page-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; aspect-ratio: 21 / 9; }
.ll-page-hero figcaption { margin-top: 10px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 760px) { .ll-page-hero img { aspect-ratio: 4 / 3; } }

/* ---- 17. finitions des pages de service (relecture visuelle) ---- */
/* Le sommaire porte déjà un filet : le premier h2 ne doit pas en ajouter un second. */
body.page:not(.home) .entry-content .ll-toc + h2 { border-top: 0; padding-top: 0; margin-top: 30px; }
/* Bande d'étapes : filets francs plutôt qu'un fond qui déborde. */
.entry-content ol.ll-steps-band { background: transparent; gap: 0; }
.entry-content ol.ll-steps-band > li + li { border-left: 1px solid rgba(18, 26, 46, .16); }
@media (max-width: 759px) {
  .entry-content ol.ll-steps-band > li + li { border-left: 0; border-top: 1px solid rgba(18, 26, 46, .16); }
}
/* Même traitement pour la bande de faits. */
.ll-facts-band { background: transparent; gap: 0; }
.ll-facts-band > div + div { border-left: 1px solid rgba(18, 26, 46, .16); }
@media (max-width: 759px) {
  .ll-facts-band > div + div { border-left: 0; border-top: 1px solid rgba(18, 26, 46, .16); }
}
/* Page contact : même logique de filets pour la grille de coordonnées. */
body.page-id-12 .entry-content > ul { background: transparent; gap: 0; }
body.page-id-12 .entry-content > ul > li { border-top: 1px solid rgba(18, 26, 46, .16); }
body.page-id-12 .entry-content > ul > li:first-child { border-top: 0; }
@media (min-width: 760px) {
  body.page-id-12 .entry-content > ul > li:nth-child(2) { border-top: 0; }
  body.page-id-12 .entry-content > ul > li:nth-child(even) { border-left: 1px solid rgba(18, 26, 46, .16); }
}

/* ---- 18. tuiles collections : le cartouche marine mangeait la photo en mobile
        (retour Mamadou 10/09). Mobile : légende SOUS la photo, image entière, non assombrie.
        Desktop : le cartouche reste, plus petit, plus bas, à la largeur de son texte. ---- */
@media (max-width: 1023px) {
  .ll-bento { gap: var(--s6) var(--s3); }
  .ll-bento__tile { aspect-ratio: auto; overflow: visible; background: transparent; }
  .ll-bento__img {
    position: static; width: 100%; height: auto; aspect-ratio: 3 / 4;
    object-fit: cover; object-position: 50% 0;
  }
  .ll-bento__tile--large .ll-bento__img { aspect-ratio: 4 / 5; }
  .ll-bento__tile:hover .ll-bento__img { transform: none; }
  .ll-bento__scrim { display: none; }
  .ll-bento__label {
    position: static; background: transparent; padding: var(--s3) 0 0;
    left: auto; right: auto; bottom: auto; gap: 3px;
  }
  .ll-bento__index { display: none; }
  .ll-bento__title { color: var(--ink); font-size: var(--fs-base); line-height: 1.3; }
  .ll-bento__count { color: var(--muted); font-size: 12px; letter-spacing: .06em; }
}
@media (min-width: 1024px) {
  .ll-bento__label {
    right: auto; width: auto; max-width: calc(100% - var(--s8));
    padding: var(--s3) var(--s5) var(--s4); bottom: var(--s4);
  }
  .ll-bento__title { font-size: var(--fs-md); }
  .ll-bento__tile--large .ll-bento__title { font-size: var(--fs-xl); }
  .ll-bento__index { font-size: 11px; }
  .ll-bento__scrim { display: none; }
}

/* ---- 19. héros : lisibilité du sous-titre et de la légende ---- */
.ll-hero::after {
  background: linear-gradient(to top, rgba(18, 26, 46, .86), rgba(18, 26, 46, .46) 52%, rgba(18, 26, 46, .08) 80%);
}
.ll-hero__sub { color: rgba(241, 235, 224, .94); text-shadow: 0 1px 12px rgba(18, 26, 46, .45); }
.ll-hero__title { text-shadow: 0 1px 18px rgba(18, 26, 46, .35); }
.ll-hero__meta {
  top: auto; bottom: var(--s5); opacity: .72; text-shadow: 0 1px 10px rgba(18, 26, 46, .6);
}
@media (min-width: 1024px) {
  .ll-hero::after {
    background: linear-gradient(90deg, rgba(18, 26, 46, .80) 0%, rgba(18, 26, 46, .52) 38%, rgba(18, 26, 46, .10) 68%, rgba(18, 26, 46, .04) 100%);
  }
  .ll-hero__meta { bottom: var(--s6); right: calc(max(0px, (100% - var(--container)) / 2) + var(--gutter)); }
}

/* ---- 20. fiche produit : « At a glance » en liste à filets, plus de doublon de livraison ---- */
.ll-benef { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
.ll-benef__item {
  padding: var(--s4) 0 !important; border: 0 !important; border-bottom: 1px solid var(--line) !important;
  background: transparent !important; display: grid; gap: 4px;
}
.ll-benef__t { font-weight: 500; font-size: var(--fs-sm); }
.ll-benef__d { font-size: var(--fs-xs); line-height: 1.6; color: var(--muted); }
@media (min-width: 1024px) { .ll-benef__item { padding: var(--s4) 0 !important; } }

/* ---- 21. barre d'outils de collection : le select natif jurait à côté des pastilles dessinées ---- */
.ll-sort select {
  -webkit-appearance: none; appearance: none; padding-right: 22px; color: var(--ink);
  letter-spacing: .06em; background-color: transparent; background-repeat: no-repeat;
  background-position: right 0 center; background-size: 12px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23121A2E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.ll-sort select:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }

/* ---- 22. panier : « Remove » à côté du sélecteur de quantité, pas à l'autre bout de la ligne ---- */
.ll-cart__foot { justify-content: flex-start; gap: var(--s5); }
.ll-cart__actions { margin-left: 0; }
@media (min-width: 1024px) { .ll-cart__foot { gap: var(--s6); } }

/* ---- 23. collection : les filtres derrière un bouton en mobile, bannière mieux cadrée ---- */
.ll-banner__img { object-position: 50% 10%; }
.ll-filterbtn { display: none; }
@media (max-width: 1023px) {
  .ll-filterbtn {
    display: inline-flex; align-items: center; gap: var(--s2); align-self: flex-start;
    height: 44px; padding: 0 var(--s5); border: 1px solid var(--line-strong); background: transparent;
    border-radius: 22px; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink);
  }
  .ll-filterbtn[aria-expanded="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .ll-toolbar .ll-filters { display: none; }
  .ll-toolbar .ll-filters.is-open { display: flex; }
}

/* ---- 24. « At a glance » : liste à filets, sans aplat gris hors palette ----
   Correctif juge 10/09 : .ll-benef de la fiche vit maintenant dans .ll-pdp__full (sorti de la
   colonne d'achat, cf. content-single-product.php) ; le selecteur suit, sinon ces regles ne
   matchent plus rien et « At a glance » retombe sur .ll-benef__t{color:var(--accent)} (olive,
   ligne ~837), incoherent avec la couleur marine utilisee ailleurs sur la fiche. */
.ll-pdp__full .ll-benef, .ll-pdp__info .ll-benef {
  background: transparent !important; border: 0 !important;
  border-top: 1px solid var(--line) !important; gap: 0;
}
.ll-pdp__full .ll-benef__t, .ll-pdp__info .ll-benef__t {
  text-transform: none; letter-spacing: 0; color: var(--ink); font-size: var(--fs-sm); font-weight: 500;
}

/* ---- 25. Un seul ratio d'image sur tout le site : 4/5 (11/09).
        Les nouveaux packshots sont en 4:5 ; les cadres en 3:4 les rognaient.
        Règle DNVB relevée sur Toteme, Aligne, Everlane : un seul ratio, partout. ---- */
.ll-card__media,
.ll-look__media,
.ll-gallery__slide,
.ll-gallery__thumb,
.ll-sidecart__thumb,
.ll-sidecart__reco-thumb,
.ll-cart__thumb,
.ll-lineitem__thumb { aspect-ratio: 4 / 5; }
@media (max-width: 1023px) {
  .ll-bento__img, .ll-bento__tile--large .ll-bento__img { aspect-ratio: 4 / 5; }
}

/* ---- 26. Héros : sous-titre lisible sur la nouvelle photo en mobile (retour 11/09) ---- */
@media (max-width: 1023px) {
  .ll-hero::after {
    background: linear-gradient(to top,
      rgba(18, 26, 46, .94) 0%,
      rgba(18, 26, 46, .88) 26%,
      rgba(18, 26, 46, .64) 48%,
      rgba(18, 26, 46, .28) 70%,
      rgba(18, 26, 46, .06) 90%);
  }
  .ll-hero__panel { background: transparent; }
  .ll-hero__sub { color: #F1EBE0; text-shadow: 0 1px 14px rgba(18, 26, 46, .75); }
  .ll-hero__title { text-shadow: 0 2px 20px rgba(18, 26, 46, .6); }
  .ll-hero__panel .ll-eyebrow { color: #F1EBE0; }
}

/* ===================== URGENT 10/09 (retour Mamadou en direct, mobile) =====================
   Bande NOIRE ~100 px au bas de la banniere de collection (Long Wool Coats, mobile 390 px) :
   .ll-banner est en display:grid, une seule ligne implicite. Meme avec .ll-banner{height:380px}
   explicite et .ll-banner__img{height:100%}, le comportement par defaut d une grille (min-height:auto
   sur l item) force la ligne a grandir jusqu a la hauteur INTRINSEQUE de l image (928x1152 -> 484 px
   a 390 px de large), 104 px de plus que le cadre. .ll-banner garde overflow:hidden et affiche son
   fond (--soft, sombre en mode hero) sous le degrade .ll-banner__scrim -> bande sombre au bas du cadre.
   Diagnostic confirme au DOM (CDP getComputedStyle) : hauteur rendue de l image = 484.125px avant correctif,
   380px (= la hauteur du cadre) apres. Fichiers image eux-memes verifies : aucune bande noire dans les PNG.
   Correctif : neutraliser le minimum implicite sur toute la famille d images en objet-fit:cover
   (meme liste que le filtre saturate ci-dessus), pas seulement la banniere. */
.ll-photo, .ll-hero__img, .ll-card__img, .ll-bento__img, .ll-look__media img, .ll-material__media img,
.ll-banner__img, .ll-gallery__slide img, .ll-gallery__thumb img, .ll-bloc__media img, .ll-cart__thumb img,
.ll-lineitem__thumb img, .ll-sidecart__thumb img, .ll-sidecart__reco-thumb img {
  min-height: 0; min-width: 0;
}

/* ===================== JUGE PASSE 1 vs DNVB-REF — CORRECTIFS TRANSVERSAUX (10/09, apres-midi) =====================
   Liste : data/woolcoat-uk/captures-integration/vh-check/dnvb-10sept/JUGE-PASSE-1-LISTE-CORRECTIFS.md
   Les 10 regles sont reprises TELLES QUE DONNEES par le juge ; 3 d'entre elles visaient un nom de
   classe qui n'existe pas dans ce theme (verifie par grep sur le DOM reel) -> une regle equivalente
   sur le VRAI selecteur a ete ajoutee juste apres, commentee "selecteur reel". */

/* 1. prix alignes sur les cartes (swatches a hauteur fixe, meme avec/sans "+N") */
.ll-card__swatches{min-height:20px}
.ll-card__more{line-height:20px}

/* 2. radios/cases de la caisse en bordeaux (etaient en violet Woo #7F54B3) */
.woocommerce-checkout input[type=radio],
.woocommerce-checkout input[type=checkbox],
.ll-checkout input[type=radio],
.ll-checkout input[type=checkbox]{accent-color:var(--action)}

/* 3. sous-accordeon de la fiche (Good to know > Questions > FAQ) : ne doit pas etre borne ni tronque.
   Le theme n'a pas de classe .ll-svc-acc sur la fiche (elle n'existe que sur la page FAQ, generee par
   service.js) : la fiche imbrique deux .ll-accordion (ll_render_accordion appele dans un item d'un
   autre ll_render_accordion) -> selecteur reel : */
.ll-svc-acc .ll-svc-acc{max-width:none;width:100%}
.ll-svc-acc .ll-svc-acc__body{max-width:72ch}
.ll-accordion .ll-accordion{max-width:none;width:100%}
.ll-accordion .ll-accordion .ll-accordion__inner{max-width:72ch}
.ll-accordion__panel,.ll-accordion__panel>div{min-height:0}

/* 4. en-tete de section mobile : le lien "ALL COLLECTIONS" percute le titre */
@media(max-width:900px){
  .ll-section__head{flex-direction:column;align-items:flex-start;gap:14px}
  .ll-section__head .ll-link{white-space:nowrap}
}

/* 5. rail "porte" (lookbook) et mosaique (bento) dans le conteneur en mobile */
@media(max-width:1023px){.ll-lookbook{padding-inline:var(--gutter);scroll-padding-left:var(--gutter)}}
.ll-section--tight .ll-bento{padding-inline:var(--gutter)}

/* 6. longueur de ligne des pages de service : 97 -> 68 caracteres + H3 plus lisibles */
body.page:not(.home) .entry-content>p,
body.page:not(.home) .entry-content>ul,
body.page:not(.home) .entry-content>ol{max-width:68ch}
body.page:not(.home) .entry-content h3{font-size:20px;margin-top:38px}

/* 7. case "Deliver to a different address ?" : 380px de vide entre le libelle et la case.
   .ll-checkbox n'existe pas dans ce theme : l'element reel est le <h3 id="ship-to-different-address">
   genere par WooCommerce (verifie sur le HTML reel du /checkout/) -> selecteur reel, en dernier dans
   la cascade pour couper court aux tentatives precedentes (checkout.css, sections 2 et 12). */
.ll-checkbox{display:flex;justify-content:flex-start;align-items:center;gap:12px}
.ll-checkbox input{order:-1;margin:0}
body.woocommerce-checkout .ll-checkout .woocommerce-shipping-fields>h3{display:block!important;width:auto!important}
body.woocommerce-checkout .ll-checkout .woocommerce-shipping-fields>h3 label{
  display:inline-flex!important;align-items:center!important;justify-content:flex-start!important;
  gap:12px!important;width:auto!important;float:none!important;
}
body.woocommerce-checkout .ll-checkout .woocommerce-shipping-fields>h3 label input[type="checkbox"]{
  order:0!important;float:none!important;margin:0!important;flex:0 0 auto;
}
body.woocommerce-checkout .ll-checkout .woocommerce-shipping-fields>h3 label span{flex:0 0 auto}

/* 8. soulignements orphelins (fiche, tri, liens legaux caisse) : vrai underline au lieu du border-bottom */
.ll-meta a,.ll-checkout__legal a,.ll-sort a{border-bottom:0;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* 9. pilules de filtres a l'angle droit de la charte (--radius:2px) partout */
.ll-pill{border-radius:var(--radius)}

/* 10. voile du hero mobile : l'eyebrow illisible sur la partie claire de la photo.
   .ll-hero__scrim n'existe pas : le voile reel est .ll-hero::after (verifie css/app.css) -> */
@media(max-width:900px){
  .ll-hero__scrim{background:linear-gradient(to top,rgba(18,26,46,.74) 0%,rgba(18,26,46,.46) 40%,rgba(18,26,46,0) 72%)}
  .ll-hero::after{background:linear-gradient(to top,rgba(18,26,46,.74) 0%,rgba(18,26,46,.46) 40%,rgba(18,26,46,0) 72%)}
}

/* ===================== JUGE 10/09 — fiche : specs/At-a-glance/meta en pleine largeur =====================
   Sortis de .ll-pdp__info (colonne d'achat) pour finir le vide de 526px sous la galerie en ordinateur
   (voir woocommerce/content-single-product.php). Pleine largeur, sous la grille galerie/achat. */
.ll-pdp__full{border-top:1px solid var(--line);margin-top:var(--s7);padding-top:var(--s6)}
.ll-pdp__full-grid{display:grid;grid-template-columns:1fr;gap:var(--s6)}
.ll-pdp__full .ll-meta{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line)}
@media(min-width:1024px){
  .ll-pdp__full{margin-top:var(--s9);padding-top:var(--s7)}
  .ll-pdp__full-grid{grid-template-columns:1fr 1fr;gap:var(--s9)}
}

/* ===================== JUGE 10/09 — barre de filtres collante sous le header, en mobile =====================
   "Filters (n)" + "Sort" restent visibles au lieu de refaire defiler 460px de filtres avant le 1er manteau. */
@media(max-width:1023px){
  .ll-toolbar{position:sticky;top:var(--header-h);z-index:20;background:var(--bg);padding-top:var(--s3);padding-bottom:var(--s3)}
}

/* ===================== JUGE 10/09 — reste par page (fixes CSS surs, sans toucher texte/politique) ===================== */

/* Accueil : bandeau d'annonce mobile — le 2e separateur reste affiche meme quand la 3e mention
   est masquee (nth-child compte aussi les <i> separateurs) -> orpheline collee au bord droit. */
@media (max-width: 1023px) { .ll-bar > i:nth-child(4) { display: none; } }
/* legende "WOOL SURFACE, CLOSE VIEW" a 16px du bord (var(--s4)) au lieu de 24px (var(--s6)) voulus. */
.ll-material__caption { left: var(--s6); bottom: var(--s6); }

/* Shop / Categorie : bannieres tranchees sous le menton -> cadrage plus bas ; fil d'Ariane desktop
   gris sur zone claire -> blanc + voile un peu plus prolonge vers le haut. */
.ll-banner__img { object-position: 50% 38%; }
.ll-banner__scrim { background: linear-gradient(to top, rgba(18, 26, 46, .86) 0%, rgba(18, 26, 46, .5) 48%, rgba(18, 26, 46, .12) 78%, rgba(18, 26, 46, .02) 94%); }
.ll-banner .ll-crumbs, .ll-banner .ll-crumbs a, .ll-banner .ll-crumbs a:visited { color: #F1EBE0; }
/* titre de carte : interligne resserre (etait 1.4, gonflait l'ecart titre/prix pour les titres 1 ligne). */
.ll-card__title { line-height: 1.35; min-height: 2.7em; }
/* note de bas de page collection en olive (--accent) hors charte texte -> gris texte standard. */
.ll-collection-about .ll-about__text, .ll-about .ll-about__text[style] { color: var(--muted); }

/* Fiche : "At a glance" + colonne d'achat unifies sur --ink/--muted (etaient en --accent olive
   par endroits, cf. .ll-pdp__cat). Fil d'Ariane mobile pris a la marge -> petite reserve a droite. */
.ll-pdp__cat { color: var(--muted); }
@media (max-width: 1023px) { .ll-pdp-crumbs .ll-crumbs { padding-right: var(--s3); flex-wrap: nowrap; overflow: hidden; text-overflow: ellipsis; } }
/* blocs editoriaux : texte cale au centre verticalement dans une gouttiere identique des 2 cotes. */
.ll-bloc__body { display: flex; flex-direction: column; justify-content: center; }
.ll-bloc__body > *:first-child { margin-top: 0; }
@media (min-width: 1024px) { .ll-bloc { display: flex; align-items: center; } .ll-bloc__body { max-width: 460px; margin-inline: auto; } }
/* bouton ATC pleine largeur en mobile, quantite juste au-dessus. */
@media (max-width: 639px) {
  .ll-form [data-ll-buyrow] { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .ll-form [data-ll-buyrow] .single_add_to_cart_button { width: 100%; }
}

/* Panier : filet orphelin sous l'eyebrow "MORE WOOL COATS" (etait "OTHER COLLECTIONS", deja
   corrige dans cart.php) ; soulignement de CONTINUE SHOPPING qui demarre sous le chevron. */
.ll-cart-page .ll-section { border-top: 0; }
.ll-cart__back, a.ll-cart__back { text-decoration: underline; text-underline-offset: 3px; }
.ll-cart__back svg, a.ll-cart__back svg { text-decoration: none; }
/* "Nothing in your bag yet" : isoler le seul mot en gras n'ajoute rien, poids uniforme. */
.ll-cart-empty__title strong, .ll-empty-cart strong { font-weight: inherit; }

/* Caisse : trou de 120px entre "+ Add a delivery note" et PAYMENT -> ramene a une respiration normale ;
   "Show summary" sur 2 lignes en mobile ; note du champ PHONE hors cadre ; EXPIRY/CVV cote a cote des 390px ;
   iframe de carte a la bonne hauteur ; puce radio unifiee (anneau bordeaux partout, PayPal/Apple Pay compris). */
.ll-checkout .ll-checkout__payslot { margin-top: var(--s6); }
.ll-checkout .ll-field__hint { margin: -2px 0 var(--s3); }
@media (max-width: 640px) {
  .ll-checkout .ll-cosum__toggle, .ll-checkout__summary-head button { white-space: nowrap; }
  .ll-checkout .ll-checkout__summary-head { flex-wrap: nowrap; gap: var(--s2); }
}
.ll-checkout .wc-credit-card-form-card-expiry, .ll-checkout .wc-credit-card-form-card-cvc { min-width: 0; }
@media (min-width: 390px) {
  .ll-checkout .wc-credit-card-form { grid-template-columns: 1fr 1fr; }
}
.ll-checkout .wc_payment_methods li.wc_payment_method input[type="radio"] { accent-color: var(--action); }

/* ===================== JUGE 10/09 — FAQ + Livraison ===================== */
/* FAQ : colonne d'accordeons 784 -> 640px (confort de lecture, aligne sur le reste des pages de service). */
.ll-svc-acc { max-width: 640px; }
/* Sommaire (table of contents) : petites capitales discretes, soulignement au survol/actif seulement. */
.ll-toc a { text-decoration: none; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.ll-toc a:hover, .ll-toc a:focus-visible, .ll-toc a.is-active { text-decoration: underline; text-underline-offset: 3px; }
/* Livraison : bande de 3 faits, hauteur egale meme si un libelle fait 2 lignes. */
.ll-facts-band span { min-height: 2.6em; display: block; }

/* ================================================================
   27. PASSE FINALE 10/09 — À propos : gabarit composé
   La page enregistrée porte déjà ses porte-images `.lo-ab-bloc > .im`, restés VIDES :
   4 087 px de texte sans un seul visuel. inc/ll-about.php les remplit (photos du lookbook
   déjà en médiathèque), intercale une bande 21/9 pleine largeur et promeut en citation les
   phrases courtes qui closent déjà un bloc. Aucun texte enregistré n'est modifié.
   ================================================================ */

/* Bandeau de tête : pleine largeur, pas 490 px dans la colonne de texte.
   `calc(100vw - 32px)` garde 16 px de garde de chaque côté : jamais de débordement horizontal,
   barre de défilement comprise. */
.ll-page-hero--bleed,
.entry-content .lo-ab-band {
  width: min(1240px, calc(100vw - 32px));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}
.ll-page-hero--bleed { margin-top: 28px; margin-bottom: 46px; }
.entry-content .lo-ab-band { margin-top: 60px; margin-bottom: 60px; }
.entry-content .lo-ab-band img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 30%;
}
@media (max-width: 760px) {
  .entry-content .lo-ab-band img { aspect-ratio: 3 / 2; }
  .ll-page-hero--bleed { margin-top: 20px; margin-bottom: 34px; }
  .entry-content .lo-ab-band { margin-top: 44px; margin-bottom: 44px; }
}

/* Chapô : la page ouvre sur une colonne étroite, comme une page « our story » de grande marque. */
.entry-content .lo-ab-intro { max-width: 62ch; margin: 0 auto; text-align: left; }
.entry-content .lo-ab-intro > h2 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.15; margin: 6px 0 18px; }
.entry-content .lo-ab-intro > p.eyebrow {
  font: 500 11px/1 var(--text); letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 14px;
}

/* Blocs alternés image / texte : la colonne s'élargit pour ne pas étrangler la photo. */
.entry-content .lo-ab-bloc {
  width: min(1140px, calc(100vw - 32px)); max-width: none;
  margin-left: 50%; transform: translateX(-50%);
  margin-top: 64px; margin-bottom: 64px;
  display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center;
}
.entry-content .lo-ab-bloc > .im { margin: 0; }
.entry-content .lo-ab-bloc > .im img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 28%;
}
.entry-content .lo-ab-bloc > .tx > h3 { margin-top: 0; font-size: clamp(21px, 2.4vw, 26px); line-height: 1.2; }
.entry-content .lo-ab-bloc > .tx > p { max-width: 62ch; }
@media (min-width: 900px) {
  .entry-content .lo-ab-bloc { grid-template-columns: 1fr 1fr; gap: 72px; margin-top: 96px; margin-bottom: 96px; }
  .entry-content .lo-ab-bloc.inv > .im { order: 2; }
  .entry-content .lo-ab-bloc.inv > .tx { order: 1; }
}
@media (max-width: 899px) {
  /* La photo passe au-dessus du texte, jamais entre le titre et son paragraphe. */
  .entry-content .lo-ab-bloc > .im { order: 1; }
  .entry-content .lo-ab-bloc > .tx { order: 2; }
  .entry-content .lo-ab-bloc > .im img { aspect-ratio: 4 / 5; }
}

/* Citations : phrases déjà écrites, remontées en Playfair. Aucun texte ajouté. */
body.page:not(.home) .entry-content p.ll-pull {
  font-family: var(--display); font-weight: 400; font-style: normal;
  font-size: clamp(21px, 2.3vw, 26px); line-height: 1.35; color: var(--ink);
  margin: 26px 0 6px; max-width: 22ch;
  border-left: 0; padding-left: 0;
}
body.page:not(.home) .entry-content p.ll-pull--lead {
  max-width: 24ch; margin: 40px auto 8px; text-align: center;
  font-size: clamp(25px, 3vw, 30px); line-height: 1.3;
  padding: 34px 0 0; border-top: 1px solid rgba(18, 26, 46, .16);
}
@media (min-width: 900px) {
  .entry-content .lo-ab-bloc > .tx > p.ll-pull { max-width: 20ch; }
}

/* Le pavé « what that means in practice » et le pied « who we are » retrouvent le rythme des blocs. */
.entry-content .lo-ab-prat { margin-top: 72px; }
.entry-content .lo-ab-fin { margin-top: 56px; }
.entry-content .lo-ab-fin > h3 { margin-top: 0; }
.entry-content .lo-ab-fin p.legal { font-size: 13px; line-height: 1.6; color: var(--muted); margin-top: 18px; }
.entry-content .sign { margin-top: 22px; }

/* ================================================================
   28. PASSE FINALE 10/09 — accordéon imbriqué : l'état ouvert ne doit pas fuir
   `.ll-accordion__item.is-open .ll-accordion__panel` (ligne ~420) est un sélecteur de
   DESCENDANCE : ouvrir « Questions » dans « Good to know » dépliait d'un coup les 5
   sous-questions qu'il contient, panneau ET chevron. On borne l'état au niveau direct.
   ================================================================ */
.ll-accordion__item.is-open .ll-accordion__item:not(.is-open) > .ll-accordion__panel { grid-template-rows: 0fr; }
.ll-accordion__item.is-open .ll-accordion__item:not(.is-open) > .ll-accordion__trigger .ll-accordion__icon { transform: none; }

/* 29. Angles droits partout (--radius : 2 px) : le bouton « Filters » et les pilules de filtre
   restaient les deux seuls éléments arrondis à 22 px de tout le site. */
.ll-pill, .ll-filterbtn { border-radius: var(--radius); }

/* ================================================================
   30. PASSE FINALE 10/09 — boutique et catégorie : voir un manteau dans le premier écran
   Mesuré en 390 px : bannière 380 + intro 230 + barre 138 => 1er manteau à 879 px.
   Aligne montre le sien à 155 px, Everlane à ~300. Le texte de collection descend sous la
   grille (il reste sur la page, au même endroit qu'une grande marque le met), la bannière
   revient à 320 px. Aucun texte n'est modifié ni supprimé.
   ================================================================ */
@media (max-width: 1023px) {
  .ll-banner { height: 320px; }
  .ll-wrap:has(> .ll-collection-intro) { display: flex; flex-direction: column; }
  .ll-wrap:has(> .ll-collection-intro) > .ll-collection-intro {
    order: 90; padding: var(--s7) 0 0; margin-top: var(--s6);
    border-top: 1px solid var(--line);
  }
  .ll-wrap:has(> .ll-collection-intro) > .ll-toolbar { order: 1; }
  .ll-wrap:has(> .ll-collection-intro) > .ll-grid { order: 2; }
}

/* ================================================================
   31. PASSE FINALE 10/09 — juge accueil / boutique / catégorie (mesures au DOM)
   ================================================================ */

/* 31.1 La mosaïque « collections » débordait la grille : x=48 / 1344 px de large quand tout le
   reste de l'accueil part de x=108 sur 1224 px. 60 px de trop de chaque côté. */
@media (min-width: 1024px) { .ll-bento { max-width: var(--container); margin-inline: auto; } }

/* 31.2 Rail « porté » : le 4e titre passait sur 2 lignes et son prix descendait de 17 px.
   Chez Toteme et Aligne les prix d'une rangée sont toujours sur la même ligne. */
.ll-look__cap span:first-child { display: block; min-height: 2.8em; }

/* 31.3 Filet du lien « How to choose » : 326 px de soulignement pour 167 px de texte (+95 %).
   Le même composant, en tête de section, fait exactement la largeur de son libellé. */
.ll-choose__link { align-self: flex-start; }

/* 31.4 Titre « matière » : 3 lignes dont la dernière ne portait que « of. ». */
.ll-material h2, .ll-section__title { text-wrap: balance; }

/* 31.5 Rythme vertical : 192 à 224 px entre deux sections transparentes voisines (Aligne : ~100).
   On ne touche pas aux sections qui changent de fond, leur respiration est voulue. */
@media (min-width: 1024px) {
  .ll-section + .ll-section:not(.ll-section--soft):not(.ll-section--ink) { padding-top: 64px; }
  .ll-section:not(.ll-section--soft):not(.ll-section--ink):has(+ .ll-section:not(.ll-section--soft):not(.ll-section--ink)) { padding-bottom: 64px; }
}

/* 31.6 Le lien de tête de section flottait 8 px au-dessus de la ligne de base de son H2
   (min-height 44 px + padding-bottom). La cible tactile reste entière en mobile. */
@media (min-width: 1024px) { .ll-section__head .ll-link { padding-bottom: 0; min-height: 0; } }

/* 31.7 BOUTIQUE ET CATÉGORIE — 970 px avant le premier manteau en 1440 px (108 % de l'écran).
   Références mesurées : Toteme 217, Aligne 256, Nobody's Child 483. Aucune des trois n'affiche
   ses filtres dépliés. On replie les 18 pastilles derrière le bouton « Filters » déjà écrit
   pour le mobile, et la bannière revient à 340 px. */
@media (min-width: 1024px) {
  .ll-banner { height: 340px; }
  .ll-toolbar { flex-wrap: wrap; row-gap: var(--s3); }
  .ll-filterbtn {
    display: inline-flex; align-items: center; gap: var(--s2); order: 1;
    height: 44px; padding: 0 var(--s5); border: 1px solid var(--line-strong); background: transparent;
    border-radius: var(--radius); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink); cursor: pointer;
  }
  .ll-filterbtn[aria-expanded="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .ll-toolbar .ll-filters { display: none; }
  .ll-toolbar .ll-filters.is-open { display: flex; flex: 1 0 100%; order: 5; padding: var(--s4) 0 0; margin: 0; }
  .ll-toolbar__row:first-child { order: 0; }
  .ll-toolbar__row:last-child { order: 2; }
}

/* 31.8 Le H1 et le fil d'Ariane de la bannière étaient indentés de 48 px (ordinateur) et de
   16 px (mobile) par rapport à la grille : .ll-banner__content posait un gutter que le .ll-wrap
   qu'il contient pose déjà. */
.ll-banner__content { padding-left: 0; padding-right: 0; }
@media (min-width: 1024px) { .ll-banner__content { padding-inline: 0; } }

/* 31.9 Bannière : la source est un portrait 900×1200 servi dans un cadre 2,77 ; à 38 % le visage
   du mannequin tombait hors cadre. */
.ll-banner__img { object-position: 50% 15%; }

/* 31.10 Mobile : barre d'outils sur une seule ligne (Filters à gauche, Sort à droite) — elle
   empilait 138 px là où Aligne tient en 44 et Everlane en 34. */
@media (max-width: 1023px) {
  .ll-toolbar { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-block: 12px; }
  .ll-toolbar__row:last-child { margin: 0; }
  .ll-toolbar .ll-filters.is-open { flex: 1 0 100%; order: 5; }
}

/* 31.11 Mobile : le libellé de collection d'une carte passait à 2 lignes sur certaines cartes,
   décalant de 17,6 px le titre et le prix de la carte voisine dans la même rangée. */
@media (max-width: 767px) { .ll-card__wool { min-height: 2.94em; } }

/* 31.12 Le corps de carte pesait 161 px pour 360 px d'image (69 % en mobile) quand Toteme,
   Aligne et Everlane tiennent en 48 à 55 px. On resserre l'échelle sans rien retirer :
   le pourcentage de laine reste une information de marque. */
@media (min-width: 1024px) {
  .ll-card__title, .ll-card__price { font-size: 14px; line-height: 1.35; }
  .ll-card__body .ll-card__badge { margin-top: 4px; }
}

/* ================================================================
   32. PASSE FINALE 10/09 — juge des pages de service (mesures au DOM)
   ================================================================ */

/* 32.G1 Longueur de ligne réelle. `max-width:68ch` rendait 680 px : le `ch` est la largeur du
   « 0 » (10 px), la lettre moyenne de Jost 16 px n'en fait que 7,45 → 91 caractères par ligne.
   Aligne en tient 67. On mesure en pixels, et on n'a plus qu'UNE colonne de texte. */
body.page:not(.woocommerce-page):not(.home) .entry-content {
  max-width: 600px; font-size: 17px; line-height: 1.7; padding-bottom: 72px !important;
}
body.page:not(.home) .entry-content > p,
body.page:not(.home) .entry-content > ul,
body.page:not(.home) .entry-content > ol,
body.page:not(.home) .entry-content p.ll-lead { max-width: none; }
.ll-svc-acc, .ll-svc-acc > details > .ll-svc-acc__body { max-width: none; }

/* 32.G2 Les bandes (sommaire, faits, étapes, tableaux) sortent de la colonne de texte au lieu
   de créer un quatrième bord droit. Avant : 4 bords à 1110 / 1078 / 1010 / 970 px. */
body.page:not(.woocommerce-page):not(.home) .ll-toc,
body.page:not(.woocommerce-page):not(.home) .entry-content .ll-facts-band,
body.page:not(.woocommerce-page):not(.home) .entry-content table {
  width: min(780px, calc(100vw - 40px)); max-width: none;
  margin-left: 50%; transform: translateX(-50%);
}
body.page:not(.woocommerce-page):not(.home) .entry-content ol.ll-steps-band {
  width: min(1000px, calc(100vw - 40px)); max-width: none;
  margin-left: 50%; transform: translateX(-50%); padding-left: 0;
}

/* 32.G3 Les liens du sommaire étaient soulignés en permanence : la règle qui l'interdit
   (.ll-toc a) perdait contre `body.page:not(.home) .entry-content a{text-decoration:underline}`. */
body.page:not(.home) .entry-content .ll-toc a { text-decoration: none; }
body.page:not(.home) .entry-content .ll-toc a:hover,
body.page:not(.home) .entry-content .ll-toc a:focus-visible,
body.page:not(.home) .entry-content .ll-toc a.is-active { text-decoration: underline; text-underline-offset: 3px; }

/* 32.G4 232 px morts entre le dernier mot et le pied de page (marge Storefront héritée). */
main.ll-page .ll-page__article { margin-bottom: 0; }
main.ll-page { padding-bottom: 0; }

/* 32.G5 Hiérarchie inversée en mobile : H2 clamp → 19 px, H3 fixe à 20 px. */
@media (max-width: 759px) {
  body.page:not(.home) .entry-content h3 { font-size: 16px; letter-spacing: .02em; }
}

/* 32.1 Sommaire : une grille, pas un paragraphe de liens (8 liens sur 3 lignes déséquilibrées). */
body.page:not(.woocommerce-page):not(.home) .ll-toc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 28px; }
.ll-toc__title { flex: 0 0 100%; margin-bottom: 2px; }
.ll-toc a { margin-right: 0; padding: 4px 0; }
@media (max-width: 759px) {
  body.page:not(.woocommerce-page):not(.home) .ll-toc { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .ll-toc__title { grid-column: 1 / -1; }
  .ll-toc a { padding: 10px 0; border-bottom: 1px solid rgba(18, 26, 46, .10); }
}

/* 32.2 CONTACT : les 4 intertitres sortaient en Playfair 20 px capitales (la règle maison en
   11 px Jost perdait contre `body.page:not(.home) .entry-content h3`). */
body.page-id-12 .entry-content > h3 {
  font-size: 11px !important; font-family: var(--text) !important; font-weight: 500 !important;
  line-height: 1; letter-spacing: .16em; color: var(--accent); margin: 44px 0 16px;
}

/* 32.3 LIVRAISON : bande de faits alignée sur le texte en mobile (contenu à x=44 au lieu de 20)
   et tableau à colonnes fixes, sans le seul rectangle blanc de la page. */
@media (max-width: 759px) { .ll-facts-band > div { padding: 20px 0; } }
body.page:not(.woocommerce-page):not(.home) .entry-content table { table-layout: fixed; }
body.page:not(.woocommerce-page):not(.home) .entry-content table th { vertical-align: bottom; }
body.page:not(.woocommerce-page):not(.home) .entry-content table td,
body.page:not(.woocommerce-page):not(.home) .entry-content table tr:nth-child(even) td { background: transparent; }
/* Sous 600 px un tableau à 3 colonnes de 110 px est illisible : il devient une liste étiquetée
   (les libellés viennent des <th>, posés en data-label par js/service.js — aucun texte ajouté). */
@media (max-width: 599px) {
  body.page:not(.woocommerce-page):not(.home) .entry-content table,
  body.page:not(.woocommerce-page):not(.home) .entry-content tbody,
  body.page:not(.woocommerce-page):not(.home) .entry-content tr,
  body.page:not(.woocommerce-page):not(.home) .entry-content td { display: block; width: 100%; }
  body.page:not(.woocommerce-page):not(.home) .entry-content thead { position: absolute; left: -9999px; }
  body.page:not(.woocommerce-page):not(.home) .entry-content td {
    border: 0; border-bottom: 1px solid rgba(18, 26, 46, .14); padding: 12px 0;
  }
  body.page:not(.woocommerce-page):not(.home) .entry-content td[data-label]::before {
    content: attr(data-label); display: block;
    font: 500 11px/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
  }
}

/* 32.4 RETOURS : bande d'étapes alignée (le <ol> gardait le padding-left des listes) et
   paragraphes moins compacts dans la section la plus dense. */
@media (max-width: 759px) { .entry-content ol.ll-steps-band > li { padding: 22px 0; } }
body.page-id-18 .entry-content > p { margin-bottom: 18px; }
/* Une liste à un seul élément n'est pas une liste. */
body.page:not(.home):not(.woocommerce-page) .entry-content ul:has(> li:only-child) { padding-left: 0; }
body.page:not(.home):not(.woocommerce-page) .entry-content ul > li:only-child { padding-left: 0; }
body.page:not(.home):not(.woocommerce-page) .entry-content ul > li:only-child::before { display: none; }

/* 32.5 À PROPOS : un seul bord pour les pleines largeurs (bande de tête et blocs partageaient
   deux bords, 100 et 150 px), et un seul traitement de citation (une centrée à 30 px, deux à
   gauche à 26 px). Le débord de 4 px des blocs en mobile (358 px contre 350 px de texte) part. */
.ll-page-hero--bleed,
.entry-content .lo-ab-band,
.entry-content .lo-ab-bloc { width: min(1140px, calc(100vw - 40px)); }
.entry-content .lo-ab-intro { max-width: none; }
body.page:not(.home) .entry-content p.ll-pull--lead {
  text-align: left; margin-left: 0; margin-right: 0;
  font-size: clamp(24px, 2.2vw, 30px); max-width: 18ch;
}
body.page:not(.home) .entry-content p.ll-pull { max-width: 18ch; }
@media (min-width: 900px) { .entry-content .lo-ab-bloc > .tx > p.ll-pull { max-width: 18ch; } }
/* Deux rythmes seulement : 96 px entre blocs, 48 px à l'intérieur. */
.entry-content .lo-ab-band { margin-top: 96px; margin-bottom: 96px; }
.entry-content .lo-ab-prat { margin-top: 96px; }
.entry-content .lo-ab-fin { margin-top: 48px; }
@media (max-width: 899px) {
  .entry-content .lo-ab-band { margin-top: 56px; margin-bottom: 56px; }
  .entry-content .lo-ab-bloc { margin-top: 56px; margin-bottom: 56px; }
  .entry-content .lo-ab-prat { margin-top: 56px; }
}

/* ================================================================
   33. PASSE FINALE 10/09 — juge fiche / panier (mesures au DOM)
   ================================================================ */

/* 33.1 Trou de 193 px (mobile) et 209 px (ordinateur) entre le bas de la colonne d'achat et le
   bloc pleine largeur qui suit. Références : 48-64 px en mobile, 96-120 px en ordinateur.
   Et le pavé SKU / CATÉGORIE / MARQUE collait à 0 px de l'image suivante (référence ≥ 64 px). */
.ll-pdp__info { padding-bottom: var(--s4); }
.ll-pdp__full { margin-top: 0; padding-top: var(--s6); padding-bottom: var(--s6); }
@media (min-width: 1024px) { .ll-pdp__full { padding-top: var(--s7); padding-bottom: var(--s7); } }

/* 33.2 Blocs éditoriaux : l'image ne faisait que 31 % de la largeur, avec 265 px de crème vide
   entre elle et un texte de 332 px. Les références partagent 50/50, gouttière 60-96 px. */
@media (min-width: 1024px) {
  .ll-bloc { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .ll-bloc__media { height: 560px; width: auto; }
  .ll-bloc__body { max-width: none; margin-inline: 0; padding: var(--s8) var(--s9); }
  .ll-bloc__title, .ll-bloc__body p { max-width: 520px; }
}
/* Mobile : un manteau long dans un cadre 4/3 paysage, comme partout ailleurs sur le site. */
@media (max-width: 1023px) { .ll-bloc__media { aspect-ratio: 4 / 5; } }

/* 33.3 Colonne gauche du bloc pleine largeur : 564 px de large pour 58 px de contenu.
   « Full specification » repasse sur toute la largeur, sous « At a glance ». */
.ll-pdp__full-grid { grid-template-columns: 1fr; }

/* 33.4 Sélecteur de quantité mobile : boîte de 358 px pour des commandes de 120 px. */
@media (max-width: 900px) { .ll-qty { width: 126px; } }

/* 33.5 Les barres fixes (achat sur la fiche, total au panier) recouvraient en permanence les
   73 derniers pixels du document. */
@media (max-width: 1023px) {
  body.single-product { padding-bottom: 76px; }
  body.woocommerce-cart { padding-bottom: 76px; }
}

/* 33.6 Bandeau de crédit PayPal : 24 à 26 px de boîte vide, et c'est un message promotionnel
   (doctrine GMC : aucune promotion nulle part). */
.ppcp-messages, [data-pp-message], .ppcp-messages-container { display: none !important; }

/* 33.7 La liste « Good to know » finissait dans le vide : le filet du dernier item était retiré
   par une règle antérieure (.ll-acc .ll-accordion > *:last-child). Et le panneau ouvert étalait
   544 px de texte sur une ligne de 1 224 px. */
.ll-acc .ll-accordion { border-bottom: 1px solid var(--line); max-width: 860px; }
@media (min-width: 1024px) { .ll-acc { padding: var(--s8) 0; } }

/* 33.8 Pied de page mobile : la colonne « Contact and legal » était piégée dans 171 px,
   son titre passait sur 2 lignes et l'adresse se cassait. */
@media (max-width: 1023px) { .ll-footer__grid > div:last-child { grid-column: 1 / -1; } }

/* 33.9 PANIER — le filet et la grande marge des titres de pages légales fuyaient sur /cart/ et
   /checkout/ : un trait orphelin de 160-208 px apparaissait au-dessus de « You may also like »
   alors que le même titre n'en a aucun sur la fiche. */
body.woocommerce-cart .entry-content h2,
body.woocommerce-checkout .entry-content h2 { border-top: 0; padding-top: 0; margin-top: var(--s3); }

/* 33.10 Cartes du panier : le libellé de collection sur 2 lignes décalait de 18 px le titre,
   le prix et les pastilles de la carte voisine. */
.ll-card__cat { display: block; min-height: 2.6em; }

/* 33.11 Vide de 308 px sous la liste du panier en ordinateur. */
@media (min-width: 1024px) { .ll-cart { padding-bottom: var(--s7); } }

/* 33.12 « At a glance » avant « Full specification » une fois les deux colonnes fondues en une,
   et une mesure de lecture pour le pavé de spécifications. */
.ll-pdp__full-grid { gap: var(--s6); }
.ll-pdp__full-grid > .ll-pdp__full-col:first-child { order: 2; }
.ll-pdp__full-grid > .ll-pdp__full-col { max-width: 860px; }
.ll-pdp__full .ll-meta { max-width: 860px; }

/* ---- 34. Page 404 à la peau Highland (404.php) ---- */
.ll-404 { padding: var(--s8) 0 var(--s9); }
.ll-404__inner { max-width: 640px; }
.ll-404__title { font-family: var(--display); font-weight: 500; font-size: clamp(28px, 4vw, 44px); line-height: 1.12; margin: var(--s3) 0 var(--s4); color: var(--ink); }
.ll-404__text { font-size: var(--fs-base); line-height: var(--lh-body); color: var(--muted); max-width: 46ch; }
.ll-404__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5); margin: var(--s6) 0 var(--s7); }
.ll-404__help { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); padding-top: var(--s4); }
@media (min-width: 760px) { .ll-404__help { grid-template-columns: 1fr 1fr; column-gap: var(--s7); } }

/* 35. À propos : un seul traitement de citation (une était centrée à 30 px, les deux autres
   à gauche à 26 px). Même corps, même alignement, seul le filet distingue celle du chapô. */
body.page:not(.home) .entry-content p.ll-pull,
body.page:not(.home) .entry-content p.ll-pull--lead {
  font-size: clamp(24px, 2.2vw, 30px); line-height: 1.3; text-align: left; max-width: 18ch;
}

/* 36. Le filet et la marge des titres de pages légales fuyaient toujours sur /cart/ et /checkout/ :
   la règle 33.9 avait une spécificité INFÉRIEURE (0,2,2) à celle qu'elle devait battre (0,3,2).
   Le `:not(.home)` remet les deux sélecteurs à égalité, et l'ordre de source tranche. */
body.page.woocommerce-cart:not(.home) .entry-content h2,
body.page.woocommerce-checkout:not(.home) .entry-content h2,
body.woocommerce-cart:not(.home) .entry-content h2,
body.woocommerce-checkout:not(.home) .entry-content h2 {
  border-top: 0; padding-top: 0; margin-top: var(--s3);
}

/* ================================================================
   37. PASSE 3 (10/09) — juge accueil / boutique / catégorie, passe 2
   ================================================================ */

/* 37.1 Le texte du héros démarrait à x=40 en mobile alors que toute la page part de x=16. */
@media (max-width: 768px) { .ll-hero__panel { padding-inline: 0; } }

/* 37.2 Le bloc « matière » dépassait la ligne de droite de la page de 12 px (1344 contre 1332). */
@media (min-width: 1024px) { .ll-material__body { padding-right: 108px; } }

/* 37.3 et 37.4 Hauteurs de garde exactes : un libellé sur 2 lignes vaut 2 x 17,6 px sur les cartes
   et 2 x 17,4 px sur le rail « porté ». Les valeurs posées en `em` tombaient 3 px et 2 px court. */
.ll-card__wool { min-height: 35.2px; }
.ll-look__cap span:first-child { display: block; min-height: 34.8px; }

/* 37.5 Micro-capitales à interligne nul : « 91% WOOL » avait line-height 11 px pour 11 px de corps,
   jambages rasés. Le plancher typographique du site est 12 px. */
.ll-card__badge, .ll-card__wool { font-size: 12px; line-height: 1.5; }

/* 37.6 BARRE D'OUTILS — le bouton « Filters » flottait au centre (x=584 en 1440, x=64 en 390) :
   `justify-content:space-between` avec deux enfants de largeur nulle (le compteur masqué et le
   panneau de filtres replié). Aligne pose son « FILTER » sur la gouttière gauche. */
.ll-toolbar { justify-content: flex-start; gap: var(--s5); }
.ll-toolbar > .ll-toolbar__row:first-child:not(:has(> *:not([hidden]))) { display: none; }
.ll-toolbar > .ll-toolbar__row:last-child { margin-left: auto; }

/* 37.7 La 2e colonne de l'introduction s'arrêtait 52 px avant la marge (bord droit en dents de scie
   sous un filet qui, lui, va jusqu'au bout). */
@media (min-width: 769px) {
  .ll-collection-intro { grid-template-columns: 1fr 1fr; }
  .ll-collection-intro__text { max-width: none; }
}

/* 37.8 740 px avant le premier manteau en 1440 px (Toteme 193, Aligne 254). Le texte d'introduction
   descend sous la grille en ordinateur comme il le fait déjà en mobile : il reste sur la page,
   à l'endroit où les grandes marques le mettent. */
@media (min-width: 1024px) {
  .ll-wrap:has(> .ll-collection-intro) { display: flex; flex-direction: column; }
  .ll-wrap:has(> .ll-collection-intro) > .ll-collection-intro {
    order: 90; padding: var(--s7) 0 0; margin-top: var(--s6); border-top: 1px solid var(--line);
  }
  .ll-wrap:has(> .ll-collection-intro) > .ll-toolbar { order: 1; }
  .ll-wrap:has(> .ll-collection-intro) > .ll-grid { order: 2; }
}

/* 37.9 Le voile de bannière était si chargé qu'on ne distinguait plus la photo dessous. */
.ll-banner__scrim {
  background: linear-gradient(to top,
    rgba(18, 26, 46, .72) 0%, rgba(18, 26, 46, .28) 48%,
    rgba(18, 26, 46, .10) 78%, rgba(18, 26, 46, .02) 94%);
}

/* 37.10 Les pastilles de collections avaient le bord droit en escalier (1322 / 1293 / 1204). */
@media (min-width: 769px) { .ll-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); } }

/* 37.11 Un titre de carte sur quatre finissait par une ellipse en mobile. */
@media (max-width: 768px) { .ll-card__title { -webkit-line-clamp: 3; min-height: 52.7px; } }

/* ================================================================
   38. PASSE 3 (10/09) — juge fiche / panier / caisse, passe 2
   ================================================================ */

/* 38.1 Quatre blocs de 860 px collés à gauche dans un conteneur de 1224 px : 364 px de vide à
   droite, quatre fois de suite sous la fiche. */
.ll-pdp__full-grid, .ll-pdp__full .ll-meta, .ll-acc .ll-accordion { max-width: 860px; margin-inline: auto; }
.ll-pdp__full-grid > .ll-pdp__full-col { max-width: none; }
/* Le panneau ouvert s'arrêtait 316 px avant son propre chevron. */
.ll-accordion__inner { max-width: none; }

/* 38.2 87 px de crème sous la colonne d'achat : la rangée de vignettes faisait 206 px pour
   des vignettes de 156 x 194. Elles reviennent à 96 x 120, la galerie tombe à hauteur d'écran. */
@media (min-width: 1024px) {
  .ll-gallery__thumbs { grid-template-columns: repeat(4, 96px); }
  .ll-gallery__thumb { width: 96px; }
  /* 5e vignette (29/09) : la colonne galerie (~658px) tient 5×96px + 4 gaps de 12px (528px) sans reduire la taille. */
  .ll-gallery__thumbs:has(> .ll-gallery__thumb:not([hidden]) ~ .ll-gallery__thumb:not([hidden]) ~ .ll-gallery__thumb:not([hidden]) ~ .ll-gallery__thumb:not([hidden]) ~ .ll-gallery__thumb:not([hidden])) { grid-template-columns: repeat(5, 96px); }
}
/* Mobile : la galerie mangeait 600 px avant le prix (il tombait 39 px sous la ligne de flottaison). */
@media (max-width: 768px) {
  .ll-gallery__thumbs { grid-template-columns: repeat(4, 56px); }
  .ll-gallery__thumb { width: 56px; }
  .ll-pdp-crumbs, .single-product .ll-crumbs { display: none; }
  /* 5e vignette (29/09) : 5×56px + 4 gaps de 8px (312px) tient dans les ~358px disponibles, sans reduire la taille. */
  .ll-gallery__thumbs:has(> .ll-gallery__thumb:not([hidden]) ~ .ll-gallery__thumb:not([hidden]) ~ .ll-gallery__thumb:not([hidden]) ~ .ll-gallery__thumb:not([hidden]) ~ .ll-gallery__thumb:not([hidden])) { grid-template-columns: repeat(5, 56px); }
}

/* 38.3 Un seul corps pour les titres de section : ils sortaient en 42 px sur la fiche (plus gros
   que le H1 produit à 34) et en 24 px sur le panier. */
.ll-section__title { font-size: 27px; }
@media (min-width: 1024px) { .ll-section__title { font-size: 34px; } }

/* 38.4 L'en-tête démarrait à x=32 quand tout le contenu part de x=108. */
.ll-header__inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* 38.5 Quantité et bouton décalés de 12 px dans la colonne d'achat. */
.ll-buyrow { padding-inline: 0; justify-content: flex-start; }

/* 38.6 Le bouton « Add to cart » tombait à y=893 pour un écran de 900 : le bloc de 201 px des
   caractéristiques s'intercalait entre le prix et les tailles. Il passe après l'achat. */
.ll-pdp__info { display: flex; flex-direction: column; }
.ll-pdp__info > * { order: 1; }
.ll-pdp__info > .ll-keyfeat { order: 1; } /* 11/09 : structure Luventa, description courte AVANT les options */

/* 38.7 2 px de crème sous le pied de page marine (barre d'achat de 73 px, padding de 76). */
@media (max-width: 1023px) { body.single-product { padding-bottom: 73px; } }

/* 38.8 PANIER : le récapitulatif était presque de la couleur de la page. */
.ll-summary { border: 1px solid var(--line); }

/* ================================================================
   39. PASSE 3 (10/09) — juge des pages de service, passe 2
   Le « bord unique » n'avait pas pris : les bandes sorties de la colonne créaient TROIS longueurs
   de filet (560 / 780 / 1000) et le H1 restait à 780. Aligne aligne tout, filets compris.
   ================================================================ */
body.page:not(.woocommerce-page):not(.home) .ll-toc,
body.page:not(.woocommerce-page):not(.home) .entry-content .ll-facts-band,
body.page:not(.woocommerce-page):not(.home) .entry-content table,
body.page:not(.woocommerce-page):not(.home) .entry-content ol.ll-steps-band {
  width: auto; max-width: none; margin-left: 0; transform: none;
}
body.page:not(.woocommerce-page):not(.home) main.ll-page .ll-page__head { max-width: 600px; }

/* 39.1 FAQ : le dernier accordéon d'une section et le titre suivant portaient deux filets jumeaux
   à 56 px l'un de l'autre — une bande vide encadrée, quatre fois par page. */
.ll-svc-acc > details:last-child { border-bottom: 0; }
/* Sommaire : son propre filet doublait celui du dernier lien en mobile, et un lien seul sur sa
   dernière ligne laissait un trait qui s'arrête au milieu. */
@media (max-width: 759px) {
  body.page:not(.woocommerce-page):not(.home) .ll-toc { border-bottom: 0; padding-bottom: 0; }
  .ll-toc a:last-child:nth-child(even) { grid-column: 1 / -1; }
}
/* Sommaire en grille aussi en ordinateur : en `flex` il sortait sur 3 lignes de longueurs inégales. */
@media (min-width: 760px) {
  body.page:not(.woocommerce-page):not(.home) .ll-toc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 24px; }
  .ll-toc__title { grid-column: 1 / -1; }
}
/* LIVRAISON : deux filets pleine largeur à 30 px l'un de l'autre. */
.ll-toc:has(+ .ll-facts-band) { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--s4); }
/* La bande de faits était la plus grosse typo de la page après le H1, en mobile. */
@media (max-width: 759px) { .ll-facts-band b { font-size: 20px; } }

/* 39.2 CONTACT : le cartouche de coordonnées avait deux colonnes inégales (285 / 273) et une
   cellule de 139 px pour 51 px de contenu. Et l'interlettrage des intertitres disparaissait en
   mobile (0,02em contre 0,16em), la règle générale battant la règle de page. */
body.page-id-12 .entry-content > h3 { letter-spacing: .16em !important; }
@media (min-width: 760px) { body.page-id-12 .entry-content > ul { grid-template-columns: 1fr 1fr; align-items: start; } }
@media (max-width: 759px) { body.page-id-12 .entry-content > ul { grid-template-columns: 1fr; } }

/* 39.3 Hiérarchie mobile : H3 à 16 px sous un corps à 17-18 px — un titre plus petit que son
   paragraphe. H2 19 / H3 17 / corps 16 remet l'échelle à l'endroit. */
@media (max-width: 759px) {
  body.page:not(.woocommerce-page):not(.home) .entry-content { font-size: 16px; }
  body.page:not(.home) .entry-content h3 { font-size: 17px; }
  .entry-content .lo-ab-intro { font-size: 17px; }
}

/* 39.4 À PROPOS : les citations sortaient plus grosses que les titres (30 px contre 24) et,
   bornées à 18ch, laissaient 210 px de vide avec des coupures bancales. */
body.page:not(.home) .entry-content p.ll-pull,
body.page:not(.home) .entry-content p.ll-pull--lead {
  font-size: 24px; max-width: none;
}
@media (max-width: 759px) {
  body.page:not(.home) .entry-content p.ll-pull,
  body.page:not(.home) .entry-content p.ll-pull--lead { font-size: 20px; }
}
/* La photo de tête était un portrait 900 px agrandi de 27 % et recadré sur la tête du modèle. */
.ll-page-hero--bleed img { object-position: 50% 26%; }

/* 39.5 RETOURS : la ligne la plus longue du site (77 caractères, médiane 66, cible 75). */
body.page-id-18 .entry-content { max-width: 580px; }

/* 40. Pied de page mobile repliable (js/lanora.js plie les colonnes de liens sous 768 px). */
.ll-footer__fold { border-top: 1px solid rgba(241, 235, 224, .18); }
.ll-footer__heading--sum {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  min-height: 52px; margin: 0; padding: 0;
}
.ll-footer__heading--sum::-webkit-details-marker { display: none; }
.ll-footer__heading--sum::after {
  content: ''; width: 8px; height: 8px; margin-left: auto;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--t-fast) var(--ease);
}
.ll-footer__fold[open] > .ll-footer__heading--sum::after { transform: rotate(-135deg) translate(-2px, -2px); }
.ll-footer__foldbody { padding-bottom: var(--s4); }
@media (max-width: 768px) {
  .ll-footer__grid.is-folded { grid-template-columns: 1fr; gap: 0; margin-bottom: var(--s5); }
  .ll-footer__grid.is-folded > .ll-footer__col--brand { margin-bottom: var(--s5); }
  .ll-footer__grid.is-folded > div:last-child { grid-column: auto; }
}

/* 41. Deux réglages tombés à côté à la passe 3 :
   le tableau reprenait sa largeur de contenu (919 au lieu de 1000) une fois sorti du full-bleed,
   et la colonne de la page Retours n'était pas assez spécifique pour battre la règle générale. */
body.page:not(.woocommerce-page):not(.home) .entry-content table { width: 100%; }
/* Retours : la colonne à 580 px désalignait le H1 (440) du texte (450) — la ligne la plus longue
   passe par le corps de texte, pas par la largeur de colonne. */
body.page.page-id-18:not(.woocommerce-page):not(.home) .entry-content { max-width: 600px; font-size: 16.5px; }

/* ================================================================
   42. PASSE 4 (10/09) — dernière boucle de jugement
   ================================================================ */

/* 42.1 HÉROS — le voile faible posé par le correctif « urgent » (bloc §10, ligne ~1650) annulait
   le voile fort du §26 : sous-titre mesuré à 3,63:1 en mobile et 4,20:1 en ordinateur, pour un
   minimum lisible de 4,5:1. On repose le voile fort, en dernier dans la cascade. */
@media (max-width: 900px) {
  .ll-hero::after {
    background: linear-gradient(to top,
      rgba(18, 26, 46, .94) 0%, rgba(18, 26, 46, .88) 26%,
      rgba(18, 26, 46, .64) 48%, rgba(18, 26, 46, .28) 70%, rgba(18, 26, 46, .06) 90%);
  }
}
@media (min-width: 1024px) {
  .ll-hero::after {
    background: linear-gradient(to top, rgba(18, 26, 46, .86) 0%, rgba(18, 26, 46, .62) 38%,
      rgba(18, 26, 46, .22) 72%, rgba(18, 26, 46, .04) 92%);
  }
}
/* La légende de matière, en bas à droite, était à 1,77:1 : elle recevait 80 % d'opacité sur la
   partie claire de la photo, hors de portée du voile qui monte du bas. */
.ll-hero__meta { opacity: 1; }

/* 42.2 BANNIÈRES — fil d'Ariane à 2,43:1 (catégorie) et 3,38:1 (boutique) sur des photos claires.
   Toteme ne pose jamais son fil d'Ariane sur une photo (9,25:1). On renforce le tiers bas, là où
   le texte se trouve, sans reperdre la photo dans la moitié haute. */
.ll-banner__scrim {
  background: linear-gradient(to top,
    rgba(18, 26, 46, .84) 0%, rgba(18, 26, 46, .62) 30%,
    rgba(18, 26, 46, .20) 70%, rgba(18, 26, 46, .02) 94%);
}

/* 42.3 Les pastilles de collections restaient en escalier en mobile (41 px de vide à droite) :
   la grille n'avait été posée qu'au-dessus de 769 px. */
.ll-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }

/* 42.4 FICHE — trois bords gauches : 108 (titres et galerie), 290 (accordéon) et 338 (spécifications).
   `.ll-pdp__full-grid` porte AUSSI `.ll-wrap`, dont la gouttière de 48 px se cumulait à sa propre
   largeur bornée. Et « Good to know. » se retrouvait 182 px à gauche des items qu'il titre. */
.ll-wrap.ll-pdp__full-grid { padding-inline: 0; }
.ll-acc__head { max-width: 860px; margin-inline: auto; padding-inline: 0; }

/* 42.5 FICHE mobile — le prix était le dernier élément visible de la première fenêtre : la rangée
   de vignettes (96 px) passait avant le bloc d'achat. Toteme les met après le bouton. */
@media (max-width: 767px) {
  .ll-pdp .ll-gallery { display: flex; flex-direction: column; }
  .ll-pdp .ll-gallery__thumbs { order: 9; }
}

/* 42.6 PANIER — l'échelle typographique du panier était un cran sous celle du site : le titre
   « You may also like » sortait en 34 px sur la fiche et en 24 px sur le panier, parce que la
   règle des pages légales (`body.page:not(.home) .entry-content h2`, spécificité 0,3,3) battait
   la règle de composant `.ll-section__title` (0,1,0). */
body .entry-content h2.ll-section__title { font-size: 27px; }
@media (min-width: 1024px) { body .entry-content h2.ll-section__title { font-size: 34px; } }
body .entry-content h2.ll-summary__title { font-size: var(--fs-md); }

/* 42.7 LIVRAISON — bande vide de 56 px encadrée de deux filets jumeaux (le filet bas de la bande
   de faits et le filet haut du premier titre). Un seul filet par frontière, comme chez Aligne. */
.ll-facts-band + h2 { border-top: 0 !important; padding-top: 0 !important; }
/* Les valeurs de la bande étaient la plus grosse typo de la page après le H1, aux deux tailles. */
.ll-facts-band b { font-size: 20px; }
@media (min-width: 760px) { .ll-facts-band b { font-size: 22px; } }

/* 42.8 RETOURS — colonnes d'étapes de 226 / 167 / 167 px : `1fr` vaut `minmax(auto,1fr)` et
   l'adresse e-mail, mot insécable de 226 px, imposait sa largeur. Et les 3 cellules étaient
   étirées à 296 px pour un contenu de 110, laissant 180 px de crème dans une boîte bordée. */
.entry-content ol.ll-steps-band { align-items: start; }
@media (min-width: 760px) { .entry-content ol.ll-steps-band { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.entry-content ol.ll-steps-band a { overflow-wrap: anywhere; }

/* 42.9 CONTACT — même piège de grille (285 / 273 px, trait vertical 9 px à droite du centre),
   et les liens du bloc d'aide portaient des filets de 256 px sur une page dont tous les autres
   filets font 560. */
@media (min-width: 760px) {
  body.page-id-12 .entry-content > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}
body.page-id-12 .entry-content > ul > li a { overflow-wrap: anywhere; }
.ll-help__grid { grid-template-columns: 1fr; column-gap: 0; }
@media (min-width: 760px) { .ll-help__grid { grid-template-columns: 1fr; } }

/* 42.10 FAQ — le titre de section restait pris entre deux filets pleine largeur à 72 px l'un de
   l'autre, cinq fois par page : son propre filet haut et celui de l'accordéon qui le suit. */
.ll-svc-acc { border-top: 0; }

/* 42.11 À PROPOS — 200 px de crème au-dessus ET au-dessous du texte de chaque bloc (photo 534x668
   contre une colonne de texte de 263 px), quatre fois. La photo passe au carré et le texte se cale
   en haut : le regard ne perd plus le fil entre l'image et son paragraphe. */
@media (min-width: 900px) {
  .entry-content .lo-ab-bloc { align-items: start; }
  .entry-content .lo-ab-bloc > .im img { aspect-ratio: 1 / 1; }
  .entry-content .lo-ab-bloc > .tx { padding-top: 6px; }
}

/* ================================================================
   43. FINITIONS DE CLÔTURE (10/09) — dernier tour de mesure
   ================================================================ */

/* 43.1 🚨 RÉGRESSION PANIER — la barre basse `.ll-cartbar` (fixe, 73 px) recouvrait la ligne
   « Total » dès l'ouverture de /cart/ en mobile, et faisait doublon avec le bouton « Checkout »
   100 px plus bas. Une page dont le seul travail est d'afficher un total ne doit pas le cacher.
   Elle reste utile sur la fiche produit ; elle disparaît du panier. */
body.woocommerce-cart .ll-cartbar { display: none !important; }
@media (max-width: 1023px) { body.woocommerce-cart { padding-bottom: 0; } }

/* 43.2 Titres de section du panier : la règle des pages légales (0,3,2) battait encore la règle
   de composant. Même sélecteur, un cran plus haut. */
body.page:not(.home) .entry-content h2.ll-section__title { font-size: 27px; }
@media (min-width: 1024px) { body.page:not(.home) .entry-content h2.ll-section__title { font-size: 34px; } }
body.page:not(.home) .entry-content h2.ll-summary__title { font-size: var(--fs-md); }

/* 43.3 BOUTIQUE ET CATÉGORIE — grille à 4 colonnes : 33 manteaux laissaient une carte orpheline
   et 936 x 420 px de crème vide, et 9 manteaux un trou en plein milieu de page. À 3 colonnes,
   33 = 11 rangées pleines et 9 = 3 rangées pleines, et la photo passe de 288 à 392 px
   (Toteme sert la sienne en 333 px au même 1440). */
@media (min-width: 1200px) { .ll-grid { grid-template-columns: repeat(3, 1fr); } }

/* 43.4 ACCUEIL — le titre du héros était le texte le moins contrasté du site (3,78:1) : il tombe
   pile sur le palier à 38 %. Le palier descend à 55 %, le bas du voile ne bouge pas. */
@media (min-width: 1024px) {
  .ll-hero::after {
    background: linear-gradient(to top, rgba(18, 26, 46, .86) 0%, rgba(18, 26, 46, .62) 55%,
      rgba(18, 26, 46, .24) 80%, rgba(18, 26, 46, .04) 95%);
  }
}
/* Le voile mobile, lui, était devenu trop lourd : le manteau disparaissait dans un aplat marine
   sur les 40 % bas (luminance 170 en haut, 35 en bas ; Aligne 103 -> 46). Le sous-titre a
   10,61:1 de marge pour une cible de 4,5. */
@media (max-width: 900px) {
  .ll-hero::after {
    background: linear-gradient(to top,
      rgba(18, 26, 46, .78) 0%, rgba(18, 26, 46, .68) 26%,
      rgba(18, 26, 46, .46) 48%, rgba(18, 26, 46, .22) 70%, rgba(18, 26, 46, .05) 90%);
  }
}

/* 43.5 Le fil d'Ariane tenait 4,57:1 sur la photo de « Long Wool Coats » mais retombait à 4,09
   sur « 100% Wool Coats », plus claire. Six centièmes de plus sur le tiers bas suffisent. */
.ll-banner__scrim {
  background: linear-gradient(to top,
    rgba(18, 26, 46, .90) 0%, rgba(18, 26, 46, .68) 30%,
    rgba(18, 26, 46, .22) 70%, rgba(18, 26, 46, .02) 94%);
}

/* 43.6 RETOURS — `align-items:start` a mis les traits verticaux de la bande d'étapes en escalier
   (147 px contre 246). Les cellules reprennent la même hauteur, et l'adresse e-mail cesse de se
   couper en plein domaine. */
.entry-content ol.ll-steps-band { align-items: stretch; }
.entry-content ol.ll-steps-band a { font-size: 15px; }

/* 43.7 CONTACT — l'e-mail voulait 239 px dans une cellule qui en offre 233 : un « k » orphelin
   passait à la ligne. La colonne est à l'équilibre, c'est le corps qui descend. */
body.page-id-12 .entry-content > ul a { font-size: 17px; }

/* 43.8 À PROPOS — la photo carrée a laissé 179 à 219 px de crème sous le texte, trois fois.
   Le texte se centre : le vide se partage au lieu de tomber tout entier en bas. */
@media (min-width: 900px) { .entry-content .lo-ab-bloc > .tx { align-self: center; } }

/* 43.9 LIVRAISON — les valeurs de la bande restaient plus grosses que les titres en mobile
   (20 px contre 19), et le sommaire lui collait à 22 px quand toutes les autres frontières
   de la page respirent à 56. */
@media (max-width: 759px) { .ll-facts-band b { font-size: 18px; } }
.ll-toc:has(+ .ll-facts-band) { margin-bottom: 36px; }

/* 43.10 Hiérarchie mobile des pages de service : H2 à 19 px pour un corps à 16, soit x1,19.
   Aligne tient x1,85 en mobile. */
@media (max-width: 759px) {
  body.page:not(.home) .entry-content h2 { font-size: 22px; }
}

/* 43.11 FICHE — « Size guide in cm » portait deux traits : le soulignement du lien et le filet
   de sa rangée, 20 px plus bas. */
.ll-sizes__guide, .ll-size-guide-link, .ll-pdp__info a[href*="size"] { text-decoration: none; }

/* --- Correctif 11/09 (Claude) : lien dans les notices Woo illisible (blanc sur beige) */
.woocommerce-error a, .woocommerce-message a, .woocommerce-info a,
.wc-block-components-notice-banner a { color: var(--action) !important; text-decoration: underline; text-underline-offset: 3px; }

/* --- Détails de la fiche (11/09, Claude) : bloc « Details » ouvert, une seule colonne, marges de page respectées ;
   remplace l'accordéon « Full specification » et le bloc « At a glance ». */
.ll-pdp__full { margin-top: var(--s6); }
.ll-pdp__full .ll-wrap { padding-inline: var(--gutter); }
.ll-pdp__full-grid { display: block; }
.ll-details { max-width: 720px; }
.ll-details__label { display: block; margin-bottom: var(--s3); }
.ll-details .ll-spec { border-top: 1px solid; }
.ll-details .ll-spec__row { grid-template-columns: 128px 1fr; }
@media (max-width: 640px) { .ll-details .ll-spec__row { grid-template-columns: 104px 1fr; } }
.ll-details .ll-spec__label { letter-spacing: .08em; font-size: 11px; }
.ll-details .ll-spec__row { grid-template-columns: 132px 1fr; }
@media (max-width: 640px) { .ll-details .ll-spec__row { grid-template-columns: 118px 1fr; } }

/* --- Fiche produit, structure Luventa (11/09, Claude) : carte Full specification repliée + 3 bénéfices --- */
.ll-speccard { margin-top: var(--s5); border: 1px solid var(--line); border-radius: var(--radius); }
.ll-speccard__btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: 14px var(--s4); border: 0; background: none; text-align: left; font-family: var(--display); font-size: var(--fs-md); color: var(--ink); cursor: pointer; }
.ll-speccard__meta { display: flex; align-items: center; gap: var(--s3); }
.ll-speccard__count { font-family: var(--text); font-size: 11px; letter-spacing: .06em; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); }
.ll-speccard__plus { font-family: var(--text); font-size: 22px; line-height: 1; color: var(--ink); transition: transform var(--t-base) var(--ease); }
.ll-speccard[data-open="1"] .ll-speccard__plus { transform: rotate(45deg); }
.ll-speccard__panel { padding: 0 var(--s4) var(--s3); }
.ll-speccard .ll-spec { border-top: 1px solid var(--line); }
.ll-speccard .ll-spec__row { grid-template-columns: 118px 1fr; }
.ll-speccard .ll-spec__label { letter-spacing: .08em; font-size: 11px; }
.ll-benef3 { margin-top: var(--s3); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); padding: var(--s4) var(--s3); border: 1px solid var(--line); border-radius: var(--radius); }
.ll-benef3__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; min-width: 0; }
.ll-benef3__icon { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink); }
.ll-benef3__icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ll-benef3__t { font-family: var(--display); font-size: var(--fs-sm); color: var(--ink); line-height: 1.25; }
.ll-benef3__d { font-size: 11px; line-height: 1.4; }
.ll-pdp__full { margin-top: var(--s5); padding-top: 0; border-top: 0; }

/* ===================== 28. TIROIR PANIER — trois zones, un seul rythme (11/09, retour Mamadou)
   « le panier n'est pas uniforme, il n'y a pas d'espace délimitant le haut et le bas ».
   Mesuré au DOM avant correction (390 px) : en-tête à 24 px du bord à gauche mais 12 px à droite ;
   filet de l'article en retrait de 24 px alors que celui de l'en-tête et celui du pied vont bord à
   bord ; bouton « + » de 44 px POSÉ DANS la photo des suggestions (et coupé en deux par le bord du
   tiroir sur la 3e carte) ; sélecteur de quantité encadré de 125 x 46 px ; prix de la ligne 12 px
   plus haut que le nom (le nom porte un min-height de 44 px et se centre dedans) ; le même total
   écrit trois fois en 80 px de haut.
   Référence relevée sur Aligne, Reformation, Toteme : trois zones, filets 1 px BORD À BORD, quantité
   sans chrome, suppression par un mot souligné, suggestions sans rien posé sur la photo, texte
   toujours SOUS l'image, une carte volontairement coupée par le bord pour dire que ça défile. */

/* 28.1 En mobile le tiroir prend tout l'écran : le liseré de 31 px qui restait à gauche n'était ni
   un plein écran ni un vrai voile, juste une bande. */
@media (max-width: 640px) {
  .ll-sidecart__panel { width: 100%; max-width: none; }
}

/* 28.2 En-tête : même marge des deux côtés (la cible tactile de la croix déborde en négatif). */
.ll-sidecart__top { padding: 20px var(--s5); border-bottom: 1px solid var(--line); }
.ll-sidecart__top .ll-icon-btn { margin-right: -10px; }
.ll-sidecart__title { font-family: var(--display); font-weight: 500; font-size: var(--fs-md); letter-spacing: 0; }
.ll-sidecart__count { color: var(--muted); }

/* 28.3 Corps : une seule gouttière, 24 px, et la zone suggestions ancrée en bas de ce qui défile. */
.ll-sidecart__body { padding: 0 var(--s5) var(--s5); display: flex; flex-direction: column; overflow-x: hidden; }

/* 28.4 Ligne article : filet bord à bord, prix aligné sur la PREMIÈRE ligne du nom. */
.ll-sidecart__line {
  grid-template-columns: 76px minmax(0, 1fr) auto; gap: var(--s4);
  margin: 0 calc(-1 * var(--s5)); padding: 20px var(--s5);
  border-bottom: 1px solid var(--line); align-items: start;
}
.ll-sidecart__thumb { width: 76px; }
.ll-sidecart__name { display: block; min-height: 0; font-size: 14px; line-height: 1.35; }
.ll-sidecart__variant { margin-top: 4px; font-size: var(--fs-xs); line-height: 1.4; }
.ll-sidecart__price { font-size: 14px; line-height: 1.35; font-weight: 500; }
.ll-sidecart__row { margin-top: var(--s3); gap: var(--s4); align-items: center; flex-wrap: nowrap; }

/* 28.5 Quantité sans chrome : trois signes, pas un formulaire (Aligne, Reformation). */
.ll-sidecart__row .ll-qty { border: 0; border-radius: 0; }
.ll-sidecart__row .ll-qty button { width: 28px; height: 28px; color: var(--muted); }
.ll-sidecart__row .ll-qty button:hover { background: none; color: var(--ink); }
.ll-sidecart__row .ll-qty span { width: 26px; font-size: var(--fs-sm); font-weight: 500; }

/* 28.6 Suppression : un mot souligné, pas une croix. */
.ll-sidecart__line .ll-textbtn {
  min-height: 28px; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); border-bottom-color: var(--line-strong);
}
.ll-sidecart__line .ll-textbtn:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* 28.7 Suggestions : zone à part, son propre filet bord à bord, ancrée juste au-dessus du pied
   (sans ça le tiroir paraissait cassé en deux quand il n'y a qu'un manteau). */
.ll-sidecart__reco {
  margin: auto calc(-1 * var(--s5)) 0; padding: var(--s5) var(--s5) var(--s2);
  border-top: 1px solid var(--line);
}
.ll-sidecart__recolist {
  margin: var(--s4) calc(-1 * var(--s5)) 0; padding: 0 var(--s5); gap: var(--s3);
  scroll-padding-left: var(--s5); scroll-snap-type: x proximity; scroll-behavior: smooth;
}
/* 2,2 cartes visibles : la troisième est coupée par le bord, c'est le signal de défilement. */
.ll-sidecart__reco-item {
  flex: 0 0 calc((100% - 14.4px) / 2.2); scroll-snap-align: start;
  position: static; gap: 0;
}
.ll-sidecart__reco-thumb { aspect-ratio: 4 / 5; }
.ll-sidecart__reco-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 0; margin-top: var(--s2); font-size: var(--fs-sm); line-height: 1.35;
}
.ll-sidecart__reco-price { margin-top: 2px; font-size: var(--fs-xs); }
/* Le bouton d'ajout sort de la photo et passe SOUS la carte, discret. */
.ll-sidecart__reco-add {
  position: static; width: 100%; height: 36px; margin-top: 10px;
  font: 500 11px/1 var(--text); letter-spacing: .12em; text-transform: uppercase;
  background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong);
}
.ll-sidecart__reco-add:hover { background: var(--ink); color: var(--bg); }

/* 28.8 Pied : bord supérieur franc, deux lignes courtes, le total une seule fois (sur le bouton). */
.ll-sidecart__foot { padding: 20px var(--s5) var(--s5); border-top: 1px solid var(--line-strong); }
.ll-sidecart__sum { font-family: var(--text); font-size: 14px; align-items: baseline; }
.ll-sidecart__sum + .ll-sidecart__sum { margin-top: var(--s2); }
.ll-sidecart__sum > span:first-child {
  font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.ll-sidecart__sum > span:last-child { font-weight: 500; color: var(--ink); }
.ll-sidecart__ship { margin: var(--s3) 0 var(--s4); font-size: var(--fs-xs); }
.ll-sidecart__trust { margin-top: var(--s3); }

/* 28.9 Deux filets à 5 px l'un de l'autre entre le dernier article et « You may also like » :
   le bord bas de la ligne article ET le bord haut de la zone suggestions. Un seul suffit, celui
   qui ouvre la zone (il reste en place même quand le panier ne tient qu'une ligne). */
.ll-sidecart__lines > .ll-sidecart__line:last-child { border-bottom: 0; }

/* 28.10 Les boutons « Add » ne tombaient pas à la même hauteur d'une carte à l'autre : un nom sur
   une ligne contre un nom sur deux. On réserve les deux lignes dans tous les cas. */
.ll-sidecart__reco-name { min-height: 2.7em; }

/* Guide des tailles FOURNISSEUR (02/10/2026, meta _ll_size_chart) : 4-5 colonnes visibles sans scroll, mobile 342 px compris. */
.ll-table--chart { width: 100%; table-layout: fixed; }
.ll-table__scroll .ll-table--chart { min-width: 0; }
.ll-table--chart th, .ll-table--chart td { white-space: normal; padding-left: 4px; padding-right: 4px; vertical-align: bottom; overflow-wrap: anywhere; hyphens: auto; }
.ll-table--chart th:first-child, .ll-table--chart td:first-child { width: 3.4em; }
.ll-table--chart th { line-height: 1.3; }
.ll-table--chart td { font-variant-numeric: tabular-nums; }
/* 02/10 VH : pas de césure en plein mot dans les en-têtes (SHOULD/ER) ; les en-têtes ne coupent qu'aux espaces. */
.ll-table--chart th { overflow-wrap: normal; word-break: normal; hyphens: none; letter-spacing: .04em; }
@media (max-width: 480px) { .ll-table--chart th { letter-spacing: .02em; font-size: 10px; } .ll-table--chart th:first-child, .ll-table--chart td:first-child { width: 3em; } }
/* 02/10 VH : taille XXXL jamais coupée (colonne Size). */
.ll-table--chart td:first-child, .ll-table--chart th:first-child { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
@media (max-width: 480px) { .ll-table--chart th:first-child, .ll-table--chart td:first-child { width: 3.5em; } }

/* ===== 17/10/2026 — corrections audit VH (data/woolcoat-uk/corrections-17oct) ===== */
/* Taille obligatoire : message et contour quand on clique sans taille. */
.ll-size-need { margin: var(--s2) 0 0; font-size: var(--fs-xs); font-weight: 500; color: var(--action); }
.ll-size-need[hidden] { display: none; }
.ll-option.is-needed .ll-size:not(.is-off) { border-color: var(--action); }
/* Mobile : titre + prix dans le 1er écran. Les vignettes sous la photo prenaient ~86 px ; sur mobile on
   change de photo en glissant (compteur « 1 / 4 » sur chaque photo, comme les fiches DNVB). PC inchangé. */
@media (max-width: 1023px) {
  .ll-gallery__thumbs { display: none !important; }
  .ll-pdp__info { padding-top: var(--s4); }
}