/* ============================================================
   IMPERIAL DOG & CAT — home v2
   Mobile first. Deux breakpoints : 768px et 1024px.
   Mise en page : CSS Grid + Flexbox uniquement, sans JS.
   JS limité aux effets : apparitions (assets/js/home-v2.js) et repli
   du header transparent pour Firefox (_partials/hv2-header-repli.tpl).
   Chargée uniquement sur l'accueil (templates/index.tpl), après la base commune
   (polices, variables, boutons, bandeau du guide) : site-v2/accueil-commun.css.
   Toutes les règles sont préfixées par .home-v2.
   ============================================================ */

/* ---------- Police de la signature du fondateur (bloc histoire) ---------- */

/* Signature du fondateur (bloc histoire) */
@font-face {
  font-family: "Great Vibes";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/great-vibes-latin.woff2") format("woff2");
}

/* ============================================================
   HÉROS
   ============================================================ */

/* Maquette client du 23/10 (capture, pas de CSS source) : fond sombre et or.
   Teintes relevées sur la capture, donc estimées. Palette limitée au héros :
   le reste de la page garde crème et terracotta tant que rien d'autre n'est décidé. */
.home-v2__hero {
  --hv2-hero-forest:     #161B11;
  --hv2-hero-gold:       #D3B881;
  --hv2-hero-gold-btn:   #CEAD67;
  --hv2-hero-gold-hover: #DBBF80;
  --hv2-hero-ivory:      #F8F7EE;
  --hv2-hero-ink:        #1C1A12;

  display: grid;
  background: var(--hv2-hero-forest);
  color: var(--hv2-hero-ivory);
}

.home-v2__hero-media { min-height: 0; }

/* !important : custom.css du thème impose img { height: auto !important } */
.home-v2__hero-media img {
  width: 100%;
  height: 100% !important;
  min-height: 220px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* Mobile : texte sous la photo, le groupe (à droite dans l'image) est recentré */
  object-position: 95% 50%;
}

/* Texte remonté : moins d'espace au-dessus qu'en dessous */
.home-v2__hero-body { padding-block: clamp(28px, 5vw, 48px) var(--hv2-section); }

/* Texte calé à gauche de l'écran, comme la maquette, et non dans le conteneur
   centré de 1240 px qui le poussait vers le milieu sur grand écran */
.home-v2__hero .home-v2__shell {
  max-width: none;
  padding-inline: clamp(20px, 6.5vw, 128px);
}

.home-v2__hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 48rem;
}

.home-v2__hero-title {
  margin: 0;
  font-family: var(--hv2-serif);
  font-size: clamp(3.5rem, 1.6rem + 5.6vw, 7.5rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.home-v2__hero-title-accent { display: block; color: var(--hv2-hero-gold); }

.home-v2__hero-lede {
  margin: 0;
  max-width: 27rem;
  color: rgba(248, 247, 238, 0.78);
  text-wrap: pretty;
}

/* Filet or sous le paragraphe */
.home-v2__hero-lede::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 1px;
  margin-top: 24px;
  background: var(--hv2-hero-gold);
}

/* Côte à côte quand la place le permet, empilés sinon : le retour à la ligne
   du flex suffit, sans media query */
.home-v2__hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.home-v2 .home-v2__btn--gold { background: var(--hv2-hero-gold-btn); color: var(--hv2-hero-ink); }
.home-v2 .home-v2__btn--gold:hover { background: var(--hv2-hero-gold-hover); color: var(--hv2-hero-ink); }

.home-v2 .home-v2__btn--outline-light { border-color: rgba(248, 247, 238, 0.6); color: var(--hv2-hero-ivory); }
.home-v2 .home-v2__btn--outline-light:hover { border-color: var(--hv2-hero-gold); color: var(--hv2-hero-gold); }

/* Contour de focus terracotta peu visible sur fond sombre */
.home-v2 .home-v2__hero a:focus-visible { outline-color: var(--hv2-hero-gold); }

.home-v2__hero-help {
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-v2__hero-help svg { flex: none; color: var(--hv2-hero-gold); }

.home-v2__hero-help p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgba(248, 247, 238, 0.78);
}

/* Spécificité égale à .home-v2 a:not(.home-v2__btn) : gagne par l'ordre */
.home-v2 .home-v2__hero-help a { font-weight: 700; color: var(--hv2-hero-gold); }
.home-v2 .home-v2__hero-help a:hover { color: var(--hv2-hero-ivory); }

/* Apparition du contenu : fondu et légère montée, décalés élément par élément.
   CSS seul, sans JS. Rien n'est masqué hors animation : si elle ne joue pas,
   le texte reste visible. Coupée quand l'utilisateur réduit les animations. */
@keyframes hv2-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .home-v2__hero-copy > * { animation: hv2-rise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  .home-v2__hero-copy > :nth-child(2) { animation-delay: 0.15s; }
  .home-v2__hero-copy > :nth-child(3) { animation-delay: 0.3s; }
  .home-v2__hero-copy > :nth-child(4) { animation-delay: 0.45s; }
}

/* ============================================================
   BANDEAU RÉASSURANCE HAUT
   ============================================================ */

.home-v2__usps {
  background: var(--hv2-sand);
  border-block: 1px solid var(--hv2-line);
  padding-block: clamp(36px, 4.4vw, 60px);
}

.home-v2__usps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.home-v2__usp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.home-v2__usp svg { color: var(--hv2-clay); }

.home-v2__usp h2 {
  margin: 0;
  max-width: 11ch;
  font-family: var(--hv2-serif);
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.25;
}

.home-v2__usp p {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(0.875rem, 0.82rem + 0.2vw, 0.9375rem);
  line-height: 1.6;
  color: var(--hv2-ink-soft);
}

/* ============================================================
   NOTRE HISTOIRE
   ============================================================ */

.home-v2__story { padding-block: var(--hv2-section); }

.home-v2__story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

.home-v2__story-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.home-v2__story-copy p {
  margin: 0;
  max-width: 36rem;
  color: var(--hv2-ink-soft);
  text-wrap: pretty;
}

.home-v2__signature {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 0;
}

.home-v2__signature-name {
  font-family: var(--hv2-script);
  font-size: clamp(2.25rem, 1.9rem + 1.2vw, 2.875rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--hv2-ink);
}

.home-v2__signature-role {
  font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hv2-ink-soft);
}

/* Photos et cadres en portrait (demande de Sarobidy, la maquette était en 4/3) :
   deux cadres côte à côte dès le mobile, droits ; un portrait pleine largeur
   par ligne rallongerait la page d'environ 1000 px */
.home-v2__story-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.home-v2__polaroid {
  position: relative;
  margin: 0;
  padding: 12px 12px 34px;
  background: #FFFDF9;
  border: 1px solid var(--hv2-line);
  box-shadow: 0 14px 30px rgba(51, 39, 32, 0.12);
  transition: scale 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease;
}

/* Survol (demande de Sarobidy) : le polaroïd grandit légèrement et son ombre s'allonge.
   Propriété scale (et non transform) : l'inclinaison et l'apparition tiennent transform.
   z-index 1 : passe devant son voisin ; le badge, déclaré après, reste au-dessus. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .home-v2__polaroid:hover {
    z-index: 1;
    scale: 1.04;
    box-shadow: 0 22px 40px rgba(51, 39, 32, 0.18);
  }
}

/* Le ratio est porté par <picture> (ajouté au partiel pour le webp) : sans
   cela, une photo absente prend la hauteur de son attribut height au lieu
   du ratio voulu. L'image remplit le cadre, photo présente ou non. */
.home-v2__polaroid picture {
  display: block;
  aspect-ratio: 3 / 4;
}

.home-v2__polaroid img {
  width: 100%;
  height: 100% !important; /* custom.css : img { height: auto !important } */
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* Sous 768 px : badge centré sous les deux cadres */
.home-v2__seal { grid-column: 1 / -1; justify-self: center; }

/* ============================================================
   NOS GAMMES
   ============================================================ */

.home-v2__ranges {
  background: var(--hv2-sand);
  border-block: 1px solid var(--hv2-line);
  padding-block: var(--hv2-section);
}

.home-v2__ranges-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.home-v2__range {
  display: grid;
  min-height: 260px;
  border: 1px solid var(--hv2-line);
  border-radius: 3px;
  overflow: hidden;
  background: var(--hv2-sand-deep);
}

.home-v2__range-media { grid-column: 1; grid-row: 1; }

/* <picture> ajouté au partiel (webp) : il prend toute la hauteur de la carte,
   l'image le remplit — photo présente ou non (placeholder) */
.home-v2__range-media picture { display: block; height: 100%; }

.home-v2__range-media img {
  width: 100%;
  height: 100% !important; /* custom.css : img { height: auto !important } */
  min-height: 260px;
  object-fit: cover;
  /* L'animal est à droite de la photo, le texte à gauche : quand la carte
     est plus étroite que la photo (mobile), on garde l'animal */
  object-position: 72% 30%;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Survol (et focus clavier) : la carte se soulève, la photo zoome doucement
   dans son cadre ; le texte ne change pas de taille. translate et non
   transform : l'apparition anime transform et le garde à son état final. */
.home-v2__range { transition: translate 0.35s ease, box-shadow 0.35s ease; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .home-v2__range:is(:hover, :focus-within) {
    translate: 0 -6px;
    box-shadow: 0 16px 30px -20px rgba(51, 39, 32, 0.45);
  }
  .home-v2__range:is(:hover, :focus-within) .home-v2__range-media img { transform: scale(1.05); }
}

.home-v2__range-body {
  grid-column: 1;
  grid-row: 1;
  /* Au-dessus de la photo : zoomée au survol (transform), elle passerait
     devant le texte et le bouton, qui ne sont pas positionnés */
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 14px;
  padding: clamp(22px, 3vw, 34px);
  background: linear-gradient(to top,
    rgba(39, 30, 24, 0.92) 0%,
    rgba(39, 30, 24, 0.82) 42%,
    rgba(39, 30, 24, 0.28) 78%,
    rgba(39, 30, 24, 0) 100%);
}

.home-v2__range-title {
  margin: 0;
  max-width: 12ch;
  font-family: var(--hv2-serif);
  font-size: clamp(1.375rem, 0.9rem + 1.6vw, 1.875rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #FFF8F0;
}

/* Filet sous le titre de gamme (ajout à la maquette) : décor qui s'allonge
   à l'apparition, le texte ne bouge pas */
.home-v2__range-title::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-top: 12px;
  background: #D98040;
  transform-origin: left;
}

.home-v2__range-body p {
  margin: 0;
  max-width: 26ch;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #E8DCCC;
}

/* ============================================================
   NOS ENGAGEMENTS
   ============================================================ */

.home-v2__pledges { padding-block: var(--hv2-section); }

.home-v2__pledges-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 3.5vw, 44px);
}

.home-v2__pledge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

/* Taille et ratio portés par <picture> (ajouté au partiel pour le webp) :
   une photo absente (placeholder) garde ainsi le 4/3 */
.home-v2__pledge picture {
  display: block;
  width: 100%;
  max-width: 230px;
  aspect-ratio: 4 / 3;
}

.home-v2__pledge img {
  width: 100%;
  height: 100% !important; /* custom.css : img { height: auto !important } */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}

/* Filet au-dessus de chaque titre (ajout à la maquette, comme pour les
   gammes) : décor qui s'élargit depuis le centre à l'apparition */
.home-v2__pledge h3::before {
  content: "";
  display: block;
  width: 2rem;
  height: 2px;
  margin: 0 auto 12px;
  background: var(--hv2-clay);
}

.home-v2__pledge h3 {
  margin: 0;
  max-width: 18ch;
  font-family: var(--hv2-serif);
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.25;
}

.home-v2__pledge p {
  margin: 0;
  max-width: 30ch;
  font-size: clamp(0.875rem, 0.82rem + 0.2vw, 0.9375rem);
  line-height: 1.65;
  color: var(--hv2-ink-soft);
}

/* ============================================================
   NOS PRODUITS PHARES (ajout hors maquette, à valider par le client)
   Produits : catégorie « Accueil » via ps_featuredproducts (home/produits.tpl).
   ============================================================ */

.home-v2__picks {
  background: var(--hv2-sand);
  border-block: 1px solid var(--hv2-line);
  padding-block: var(--hv2-section);
}

/* 1 carte par ligne sur mobile (demande de Sarobidy), 2 dès 768 px, 4 dès 1024 px.
   Colonnes explicites : auto-fit donnait 3 + 1 cartes vers 1024 px */
.home-v2__picks-grid {
  display: grid;
  grid-template-columns: minmax(0, 20rem);
  justify-content: center;
  gap: clamp(16px, 2.5vw, 32px);
}

@media (min-width: 768px) {
  .home-v2__picks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
}

@media (min-width: 1024px) {
  .home-v2__picks-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.home-v2__pick {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-bottom: clamp(16px, 2vw, 22px);
  background: var(--hv2-cream);
  border: 1px solid var(--hv2-line);
  border-radius: 3px;
  text-align: center;
  transition: translate 0.35s ease, box-shadow 0.35s ease;
}

/* Contenu sous la photo : marges intérieures (la photo, elle, va bord à bord) */
.home-v2__pick > :not(.home-v2__pick-media) { margin-inline: clamp(12px, 1.6vw, 18px); }

/* Photo bord à bord en haut de la carte, sur tous les écrans (sur mobile aussi, demande de
   Sarobidy : la photo remplit la carte). Cadre 5/7 : les miniatures sont des carrés où
   PrestaShop a ajouté des bandes blanches de 12 à 14 % de chaque côté de photos en 3/4 ;
   en « cover » dans ce cadre, les bandes sortent du cadre, la photo reste */
.home-v2__pick-media {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 2px 2px 0 0;
}

.home-v2__pick-media img {
  width: 100%;
  height: auto !important; /* custom.css : img { height: auto !important } */
  aspect-ratio: 5 / 7;
  object-fit: cover;
  background-color: #fff;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Favoris, comparaison, aperçu : colonne de ronds en haut à droite de la photo (hors de
   l'étiquette du sac), toujours visibles (utilisables au toucher). Boutons de leofeature
   ramenés à la charte. */
.home-v2__pick-tools {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.home-v2__pick-tools > div { margin: 0; }

.home-v2 .home-v2__pick-tool,
.home-v2__pick-tools .btn-product {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(251, 247, 239, 0.94);
  box-shadow: 0 2px 8px rgba(51, 39, 32, 0.18);
  color: var(--hv2-ink);
  line-height: 1;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Couleur des icônes : ces boutons sont des liens, et la règle générale des liens de
   l'accueil (.home-v2 a:not(.home-v2__btn), spécificité 0,2,1 / 0,3,1 au survol) les teintait
   en terracotta — invisible sur le fond terracotta du survol. Règles à 0,3,1 / 0,4,1. */
.home-v2 .home-v2__pick-tools :is(a, button):is(.home-v2__pick-tool, .btn-product) { color: var(--hv2-ink); }
.home-v2 .home-v2__pick-tools :is(a, button):is(.home-v2__pick-tool, .btn-product):is(:hover, :focus-visible, .added) {
  background: var(--hv2-clay);
  color: #fff;
}
.home-v2 .home-v2__pick-tools :is(a, button) :is(i, svg) { color: inherit; }

/* Couleurs propres (demande de Sarobidy) : cœur rouge, comparer et aperçu terracotta ;
   au survol, le rond prend la couleur de l'icône, l'icône passe en blanc.
   Déclarées après les règles communes, à spécificité égale : elles l'emportent. */
.home-v2 .home-v2__pick-tools :is(a, button):is(.home-v2__pick-tool, .btn-product) { color: var(--hv2-clay-ink); }
.home-v2 .home-v2__pick-tools :is(a, button).leo-wishlist-button { color: #C8322B; }
.home-v2 .home-v2__pick-tools :is(a, button).leo-wishlist-button:is(:hover, :focus-visible) {
  background: #C8322B;
  color: #fff;
}
/* Déjà dans la liste de souhaits (.added, posé par leofeature) : rond crème, cœur plein rouge */
.home-v2 .home-v2__pick-tools :is(a, button).leo-wishlist-button.added:not(:hover, :focus-visible) {
  background: rgba(251, 247, 239, 0.94);
  color: #C8322B;
}

/* Cœur en contour (Material Icons « favorite_border », U+E87E) tant que le produit n'est pas
   dans la liste, plein (« favorite », U+E87D) une fois ajouté. leofeature écrit toujours le cœur
   plein : son caractère est masqué et remplacé ici, dans les cartes de l'accueil seulement. */
.home-v2 .home-v2__pick-tools .leo-wishlist-button i.material-icons { font-size: 0; }
.home-v2 .home-v2__pick-tools .leo-wishlist-button i.material-icons::before {
  content: "\e87e";
  font-size: 18px;
  line-height: 18px;
}
.home-v2 .home-v2__pick-tools .leo-wishlist-button.added i.material-icons::before { content: "\e87d"; }

/* Icônes de leofeature centrées dans le rond : leur conteneur interne remplit le bouton,
   l'icône n'hérite plus de la hauteur de ligne ni des marges de .btn / .material-icons */
.home-v2__pick-tools .btn-product { position: relative; }
.home-v2__pick-tools .btn-product > [class*="-bt-content"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
}
.home-v2__pick-tools .btn-product .material-icons {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  font-size: 18px;
  line-height: 18px;
  text-align: center;
  color: inherit;
}
.home-v2 .home-v2__pick-tool svg { width: 18px; height: 18px; }
.home-v2__pick-tools .name-btn-product { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.home-v2__pick-tools .cssload-speeding-wheel { display: none; }

.home-v2__pick-title {
  margin: 0;
  font-family: var(--hv2-serif);
  font-size: clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem);
  font-weight: 500;
  line-height: 1.3;
  text-wrap: balance;
}

/* Le lien du nom couvre toute la carte ; boutons, quantité et panier passent au-dessus */
.home-v2 .home-v2__pick-title a { color: var(--hv2-ink); text-decoration: none; }
.home-v2 .home-v2__pick-title a::after { content: ""; position: absolute; z-index: 1; inset: 0; }
.home-v2 .home-v2__pick-title a:focus-visible { outline: none; }
.home-v2__pick:has(.home-v2__pick-title a:focus-visible) { outline: 2px solid var(--hv2-clay); outline-offset: 3px; }

.home-v2__pick-price {
  margin-top: auto;
  margin-bottom: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--hv2-clay-ink);
}

.home-v2__pick-regular {
  margin-right: 0.4em;
  font-weight: 400;
  color: var(--hv2-ink-soft);
}

/* Bouton panier de leofeature : barre en bas de la photo. Écran avec souris : elle glisse
   depuis le bord inférieur au survol ou au focus clavier (translate, sans fondu) ; écran
   tactile : toujours visible (pas de survol possible) */
.home-v2__pick-buy {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
}

@media (hover: hover) {
  .home-v2__pick-buy { translate: 0 100%; transition: translate 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); }
  .home-v2__pick:is(:hover, :focus-within) .home-v2__pick-buy { translate: 0 0; }
}

.home-v2__pick-buy .button-container,
.home-v2__pick-buy form { margin: 0; }

.home-v2__pick-buy .leo-bt-cart {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: var(--hv2-clay);
  color: #FFF8F0;
  font: 700 0.6875rem var(--hv2-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: none;
  transition: background-color 0.2s ease;
}

.home-v2__pick-buy .leo-bt-cart:hover { background: var(--hv2-clay-dark); color: #FFF8F0; }
.home-v2__pick-buy .leo-bt-cart .leo-bt-cart-content { display: inline-flex; align-items: center; gap: 8px; }
.home-v2__pick-buy .leo-bt-cart .material-icons { font-size: 18px; color: inherit; }

.home-v2 .home-v2__pick-tool:focus-visible,
.home-v2__pick-tools .btn-product:focus-visible { outline: 2px solid var(--hv2-clay); outline-offset: 2px; }
.home-v2__pick-buy .leo-bt-cart:focus-visible { outline: 2px solid #FFF8F0; outline-offset: -4px; }

.home-v2__picks-more {
  margin: clamp(28px, 3.5vw, 44px) 0 0;
  text-align: center;
}

/* Survol : la carte se soulève, la photo zoome dans son cadre (translate : le transform
   est tenu par l'apparition, comme pour les gammes) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .home-v2__pick:hover { translate: 0 -4px; box-shadow: 0 14px 26px -20px rgba(51, 39, 32, 0.45); }
  .home-v2 .home-v2__pick:hover .home-v2__pick-title a { color: var(--hv2-clay-ink); }
  .home-v2__pick:hover .home-v2__pick-media img { transform: scale(1.04); }
}

/* ============================================================
   BANDEAU GARANTIES (sombre)
   ============================================================ */

.home-v2__promise {
  background: var(--hv2-night);
  color: #FFF8F0;
  padding-block: clamp(34px, 3.5vw, 46px);
}

.home-v2__promise-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.home-v2__promise-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* Icônes agrandies (demande de Sarobidy) : 30 px au lieu des 22 px des attributs du partiel */
.home-v2__promise-item svg { flex: none; width: 30px; height: 30px; margin-top: 1px; color: #D98040; }

.home-v2__promise-item h2 {
  margin: 0 0 3px;
  font-family: var(--hv2-sans);
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
  font-weight: 700;
  line-height: 1.3;
}

.home-v2__promise-item p {
  margin: 0;
  font-size: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  line-height: 1.5;
  color: var(--hv2-night-soft);
}

/* ============================================================
   BREAKPOINT 1 — 768px
   ============================================================ */

@media (min-width: 768px) {

  .home-v2__usps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .home-v2__story-media { gap: 16px; }
  /* --hv2-tilt : inclinaison réutilisée par l'apparition (keyframes hv2-settle) */
  .home-v2__polaroid--a { --hv2-tilt: -2.2deg; transform: rotate(-2.2deg); }
  /* Placement explicite : sinon la grille place d'abord le badge (explicite)
     en colonne 2 ligne 1, et le polaroïd b, en placement auto, part à la ligne */
  .home-v2__polaroid--b { --hv2-tilt: 1.6deg; transform: rotate(1.6deg); margin-top: 26px; grid-column: 2; grid-row: 1; }

  /* position + z-index : le polaroïd b, transformé, se peindrait par-dessus */
  .home-v2__seal {
    position: relative;
    z-index: 1;
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    justify-self: end;
    margin: 0 -14px -40px 0;
  }

  .home-v2__ranges-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .home-v2__range-body {
    justify-content: center;
    background: linear-gradient(to right,
      rgba(39, 30, 24, 0.93) 0%,
      rgba(39, 30, 24, 0.84) 46%,
      rgba(39, 30, 24, 0.22) 80%,
      rgba(39, 30, 24, 0) 100%);
  }

  .home-v2__pledges-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .home-v2__promise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 36px; }
}

/* ============================================================
   BREAKPOINT 2 — 1024px
   ============================================================ */

@media (min-width: 1024px) {

  /* Héros : la photo et le texte partagent la même cellule de grille.
     La hauteur est portée par le bloc (ou par le texte s'il est plus haut),
     jamais par la photo : dans le flux, son ratio imposait width × 941/1672,
     soit 1075 px de haut à 1910 px de large. */
  .home-v2__hero { min-height: clamp(500px, 44vw, 780px); }

  .home-v2__hero-media,
  .home-v2__hero-body { grid-column: 1; grid-row: 1; }

  .home-v2__hero-media { position: relative; overflow: hidden; }

  /* Cadrage remonté (40 %) : garde les têtes quand le bloc est plus large que la photo */
  .home-v2__hero-media img {
    position: absolute;
    inset: 0;
    min-height: 0;
    aspect-ratio: auto;
    height: 100% !important;
    object-position: 50% 40%;

    /* Photos du 2026-10-30 et du 2026-11-02 : le groupe est déjà à droite dans l'image (demande du client).
       L'élargissement de 1024-1200 px (clamp(100%, 100% + (1200px - 100vw), 118%), calé à
       gauche) qui poussait l'ancien groupe vers la droite est retiré : il coupait le chat
       et le bras du fondateur à 1024 px. */
    width: 100%;
    max-width: none !important; /* custom.css : img { max-width: 100% !important } */
  }

  /* Voile sombre à gauche, sous le texte ; le sujet reste net à droite.
     Padding bas plus grand que le haut : le texte est remonté au-dessus du centre. */
  /* position: relative pour passer au-dessus de la photo, elle-même positionnée */
  .home-v2__hero-body {
    position: relative;
    display: flex;
    align-items: center;
    padding-block: clamp(40px, 4vw, 64px) clamp(72px, 8vw, 128px);
    /* Arrêts en max(%, px) : sur les écrans étroits (1024-1200 px), où le texte occupe
       la moitié de la largeur, la zone sombre s'étend sous lui ; au-delà, les % l'emportent
       et le voile est inchangé */
    background: linear-gradient(90deg,
      rgba(22, 27, 17, 0.94) 0%,
      rgba(22, 27, 17, 0.86) max(30%, 360px),
      rgba(22, 27, 17, 0.55) max(46%, 540px),
      rgba(22, 27, 17, 0.15) max(62%, 700px),
      rgba(22, 27, 17, 0) max(75%, 820px));
  }

  .home-v2__usps-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }

  .home-v2__usp { padding-inline: 28px; border-left: 1px solid var(--hv2-line); }
  .home-v2__usp:first-child { border-left: 0; }

  /* Colonne photos élargie (maquette : 0.92fr / 1.08fr) : cartes ~11 % plus grandes */
  .home-v2__story-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }

  .home-v2__range { min-height: 300px; }
  .home-v2__range-body p { max-width: 22ch; }

  .home-v2__pledges-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .home-v2__promise-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
}

/* ============================================================
   APPARITIONS AU DÉFILEMENT — sections sous le héros
   Chaque groupe se joue UNE fois, quand il entre dans l'écran :
   assets/js/home-v2.js (IntersectionObserver) lui ajoute .is-in,
   qui passe --hv2-play à running pour lui et ses descendants.
   Avant cela, les animations sont en pause sur leur première image
   (fill-mode both). Groupes : .home-v2__usps, __story-copy,
   __story-media, __heading, __range, __pledge, __promise.
   - sans JS, ou utilisateur qui réduit les animations : le script ne
     pose pas .hv2-reveal sur .home-v2, rien n'est en pause, tout
     s'affiche normalement, sans effet ;
   - cascade : animation-delay en longhand uniquement (le shorthand
     remettrait animation-play-state à running).
   ============================================================ */

/* Le contenu reste toujours net et visible : pas d'opacity, de flou ni de
   scale sur le texte ou les contenus. Le décor se dessine ; le contenu
   (titres, textes, cartes) glisse jusqu'à sa place, sans fondu (choix de
   Sarobidy, 2026-10-26). */
@keyframes hv2-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

@keyframes hv2-grow-x {
  from { transform: scaleX(0); }
  to   { transform: none; }
}

@keyframes hv2-grow-y {
  from { transform: scaleY(0); }
  to   { transform: none; }
}

/* Le polaroïd se pose : il monte un peu et prend son inclinaison finale
   (--hv2-tilt, 0 sous 768 px où il est droit). Aucun fondu, photo visible. */
@keyframes hv2-settle {
  from { transform: translateY(48px) rotate(0deg); }
  to   { transform: rotate(var(--hv2-tilt, 0deg)); }
}

/* Le contenu monte jusqu'à sa place, opaque du début à la fin */
@keyframes hv2-slide-up {
  from { transform: translateY(var(--hv2-slide, 32px)); }
  to   { transform: none; }
}

@media (prefers-reduced-motion: no-preference) {

  .hv2-reveal { --hv2-ease: cubic-bezier(0.22, 0.61, 0.36, 1); }
  .hv2-reveal .is-in { --hv2-play: running; }

  /* Réassurances : chaque atout monte, puis son icône se dessine trait
     par trait (pathLength="1" dans le partiel) */
  .hv2-reveal .home-v2__usp > * {
    --hv2-slide: 26px;
    animation: hv2-slide-up 0.7s var(--hv2-ease) both;
    animation-play-state: var(--hv2-play, paused);
  }
  .hv2-reveal .home-v2__usp:nth-child(2) > * { animation-delay: 0.12s; }
  .hv2-reveal .home-v2__usp:nth-child(3) > * { animation-delay: 0.24s; }
  .hv2-reveal .home-v2__usp:nth-child(4) > * { animation-delay: 0.36s; }

  .hv2-reveal .home-v2__usp :is(path, circle, ellipse) {
    stroke-dasharray: 1;
    animation: hv2-draw 0.9s ease-out 0.2s both;
    animation-play-state: var(--hv2-play, paused);
  }
  .hv2-reveal .home-v2__usp:nth-child(2) :is(path, circle, ellipse) { animation-delay: 0.32s; }
  .hv2-reveal .home-v2__usp:nth-child(3) :is(path, circle, ellipse) { animation-delay: 0.44s; }
  .hv2-reveal .home-v2__usp:nth-child(4) :is(path, circle, ellipse) { animation-delay: 0.56s; }

  /* Dès 1024 px : les filets séparateurs descendent du haut. Le filet passe
     de la bordure (maquette) à un pseudo-élément pour pouvoir s'allonger. */
  @media (min-width: 1024px) {
    .hv2-reveal .home-v2__usp { position: relative; border-left-color: transparent; }

    .hv2-reveal .home-v2__usp:not(:first-child)::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: -1px;
      width: 1px;
      background: var(--hv2-line);
      transform-origin: top;
      animation: hv2-grow-y 0.8s var(--hv2-ease) 0.1s both;
      animation-play-state: var(--hv2-play, paused);
    }
  }

  /* Notre histoire : intitulé, titre, paragraphes, signature puis bouton */
  .hv2-reveal .home-v2__story-copy > * {
    animation: hv2-slide-up 0.75s var(--hv2-ease) both;
    animation-play-state: var(--hv2-play, paused);
  }
  .hv2-reveal .home-v2__story-copy > :nth-child(2) { animation-delay: 0.1s; }
  .hv2-reveal .home-v2__story-copy > :nth-child(3) { animation-delay: 0.2s; }
  .hv2-reveal .home-v2__story-copy > :nth-child(4) { animation-delay: 0.3s; }
  .hv2-reveal .home-v2__story-copy > :nth-child(5) { animation-delay: 0.4s; }
  .hv2-reveal .home-v2__story-copy > :nth-child(6) { animation-delay: 0.5s; }

  /* Les polaroïds se posent l'un après l'autre, puis le badge monte et son
     cercle extérieur se trace (pathLength="1") */
  .hv2-reveal .home-v2__polaroid {
    animation: hv2-settle 0.9s var(--hv2-ease) both;
    animation-play-state: var(--hv2-play, paused);
  }
  .hv2-reveal .home-v2__polaroid--b { animation-delay: 0.18s; }

  .hv2-reveal .home-v2__seal {
    animation: hv2-slide-up 0.7s var(--hv2-ease) 0.45s both;
    animation-play-state: var(--hv2-play, paused);
  }
  .hv2-reveal .home-v2__seal-ring {
    stroke-dasharray: 1;
    animation: hv2-draw 1.1s ease-out 0.55s both;
    animation-play-state: var(--hv2-play, paused);
  }

  /* En-têtes centrés (Nos gammes, Nos engagements) : intitulé puis titre */
  .hv2-reveal .home-v2__heading > * {
    --hv2-slide: 24px;
    animation: hv2-slide-up 0.7s var(--hv2-ease) both;
    animation-play-state: var(--hv2-play, paused);
  }
  .hv2-reveal .home-v2__heading > :nth-child(2) { animation-delay: 0.12s; }

  /* Nos gammes : la carte monte, puis le filet sous son titre s'allonge et
     la flèche du bouton se trace (pathLength="1") */
  .hv2-reveal .home-v2__range {
    --hv2-slide: 44px;
    animation: hv2-slide-up 0.8s var(--hv2-ease) both;
    animation-play-state: var(--hv2-play, paused);
  }
  .hv2-reveal .home-v2__range-title::after {
    animation: hv2-grow-x 0.6s var(--hv2-ease) 0.4s both;
    animation-play-state: var(--hv2-play, paused);
  }
  .hv2-reveal .home-v2__range .home-v2__btn path {
    stroke-dasharray: 1;
    animation: hv2-draw 0.5s ease-out 0.65s both;
    animation-play-state: var(--hv2-play, paused);
  }
  .hv2-reveal .home-v2__range + .home-v2__range { animation-delay: 0.15s; }
  .hv2-reveal .home-v2__range + .home-v2__range .home-v2__range-title::after { animation-delay: 0.55s; }
  .hv2-reveal .home-v2__range + .home-v2__range .home-v2__btn path { animation-delay: 0.8s; }

  /* Nos engagements : les cartes montent l'une après l'autre, puis le filet
     au-dessus de chaque titre s'élargit depuis le centre */
  .hv2-reveal .home-v2__pledge {
    --hv2-slide: 36px;
    animation: hv2-slide-up 0.75s var(--hv2-ease) both;
    animation-play-state: var(--hv2-play, paused);
  }
  .hv2-reveal .home-v2__pledge h3::before {
    animation: hv2-grow-x 0.6s var(--hv2-ease) 0.35s both;
    animation-play-state: var(--hv2-play, paused);
  }
  .hv2-reveal .home-v2__pledge:nth-child(2) { animation-delay: 0.12s; }
  .hv2-reveal .home-v2__pledge:nth-child(3) { animation-delay: 0.24s; }
  .hv2-reveal .home-v2__pledge:nth-child(4) { animation-delay: 0.36s; }
  .hv2-reveal .home-v2__pledge:nth-child(2) h3::before { animation-delay: 0.47s; }
  .hv2-reveal .home-v2__pledge:nth-child(3) h3::before { animation-delay: 0.59s; }
  .hv2-reveal .home-v2__pledge:nth-child(4) h3::before { animation-delay: 0.71s; }

  /* Guide de choix : photo, texte puis bouton montent en cascade, puis la flèche se trace */
  .hv2-reveal .home-v2__guide-inner > * {
    --hv2-slide: 22px;
    animation: hv2-slide-up 0.7s var(--hv2-ease) both;
    animation-play-state: var(--hv2-play, paused);
  }
  .hv2-reveal .home-v2__guide-inner > :nth-child(2) { animation-delay: 0.1s; }
  .hv2-reveal .home-v2__guide-inner > :nth-child(3) { animation-delay: 0.2s; }
  .hv2-reveal .home-v2__guide-cta path {
    stroke-dasharray: 1;
    animation: hv2-draw 0.5s ease-out 0.5s both;
    animation-play-state: var(--hv2-play, paused);
  }

  /* Produits phares : les cartes montent l'une après l'autre, puis la flèche du bouton se trace */
  .hv2-reveal .home-v2__pick {
    --hv2-slide: 32px;
    animation: hv2-slide-up 0.75s var(--hv2-ease) both;
    animation-play-state: var(--hv2-play, paused);
  }
  .hv2-reveal .home-v2__pick:nth-child(2) { animation-delay: 0.12s; }
  .hv2-reveal .home-v2__pick:nth-child(3) { animation-delay: 0.24s; }
  .hv2-reveal .home-v2__pick:nth-child(4) { animation-delay: 0.36s; }
  .hv2-reveal .home-v2__picks-more path {
    stroke-dasharray: 1;
    animation: hv2-draw 0.5s ease-out 0.2s both;
    animation-play-state: var(--hv2-play, paused);
  }

  /* Bandeau garanties : chaque garantie monte, puis son icône se dessine */
  .hv2-reveal .home-v2__promise-item {
    --hv2-slide: 22px;
    animation: hv2-slide-up 0.7s var(--hv2-ease) both;
    animation-play-state: var(--hv2-play, paused);
  }
  .hv2-reveal .home-v2__promise-item :is(path, circle) {
    stroke-dasharray: 1;
    animation: hv2-draw 0.9s ease-out 0.2s both;
    animation-play-state: var(--hv2-play, paused);
  }
  .hv2-reveal .home-v2__promise-item:nth-child(2) { animation-delay: 0.12s; }
  .hv2-reveal .home-v2__promise-item:nth-child(3) { animation-delay: 0.24s; }
  .hv2-reveal .home-v2__promise-item:nth-child(4) { animation-delay: 0.36s; }
  .hv2-reveal .home-v2__promise-item:nth-child(2) :is(path, circle) { animation-delay: 0.32s; }
  .hv2-reveal .home-v2__promise-item:nth-child(3) :is(path, circle) { animation-delay: 0.44s; }
  .hv2-reveal .home-v2__promise-item:nth-child(4) :is(path, circle) { animation-delay: 0.56s; }
}

/* ============================================================
   TRACES DE PATTES DERRIÈRE LE CURSEUR (home-v2.js, demande de Sarobidy)
   Exception au préfixe .home-v2 : les empreintes sont ajoutées à <body> ; la feuille
   n'est chargée que sur l'accueil, aucune fuite possible. Pur décor : le fondu est
   permis (la règle « jamais d'opacity » vise le contenu). Sous le header (z-index 1030).
   ============================================================ */

.hv2-paw {
  position: fixed;
  z-index: 1020;
  pointer-events: none;
  color: #B05315;
  animation: hv2-paw-fade 0.9s ease-out forwards;
}

.hv2-paw svg { display: block; }

@keyframes hv2-paw-fade {
  from { opacity: 0.45; }
  to   { opacity: 0; }
}

/* ============================================================
   HERO SOUS LE HEADER TRANSPARENT (≥ 1024 px)
   Le header posé sur la photo (transparent en haut, crème à 40 px) est commun
   à l'accueil et aux pages à bandeau photo : header-v2.css, fin du fichier.
   Ici, seulement ce qui revient au hero : le header sort du flux, le hero
   remonte sous lui et son contenu descend de sa hauteur (≈ 115 px : 30 + logo
   55 + 30) ; dégradé sombre en haut de la photo pour le logo blanc et le menu
   ivoire. Mêmes conditions que le header : animation-timeline: scroll(), ou
   repli Firefox (.hv2-hdr-js posée par _partials/hv2-header-repli.tpl).
   ============================================================ */

@media (min-width: 1024px) {
  @supports (animation-timeline: scroll()) {
    #index .home-v2__hero { min-height: calc(clamp(500px, 44vw, 780px) + 115px); }
    #index .home-v2__hero-body { padding-top: calc(115px + clamp(24px, 3vw, 48px)); }

    #index .home-v2__hero-media::after {
      content: "";
      position: absolute;
      inset: 0 0 auto 0;
      height: 220px;
      background: linear-gradient(to bottom, rgba(22, 27, 17, 0.62), rgba(22, 27, 17, 0));
      pointer-events: none;
    }

    /* Ancres de section (liens directs, futur menu) : le titre ne passe pas sous le header compact */
    #index :is(#produits, #histoire, #valeurs) { scroll-margin-top: 96px; }
  }

  .hv2-hdr-js #index .home-v2__hero { min-height: calc(clamp(500px, 44vw, 780px) + 115px); }
  .hv2-hdr-js #index .home-v2__hero-body { padding-top: calc(115px + clamp(24px, 3vw, 48px)); }

  .hv2-hdr-js #index .home-v2__hero-media::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 220px;
    background: linear-gradient(to bottom, rgba(22, 27, 17, 0.62), rgba(22, 27, 17, 0));
    pointer-events: none;
  }

  .hv2-hdr-js #index :is(#produits, #histoire, #valeurs) { scroll-margin-top: 96px; }
}