/* ==========================================================================
   COMPOSEUR — barre de recherche sous « Les charms » (custom-charms-recherche.js)
   Tailles en px (le rem du thème dépend de la largeur d'écran). Charte : Encre #3A343C.
   ========================================================================== */
.ody-charms-recherche {
  margin: 6px 0 12px;
  font-family: 'Manrope', sans-serif;
}
.ody-charms-recherche__label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; /* lu par les lecteurs d'écran seulement */
}
.ody-charms-recherche__champ-wrap {
  position: relative;
  max-width: 300px;
}
.ody-charms-recherche__loupe {
  position: absolute;
  left: 11px;
  top: 50%;
  width: 13px;
  height: 13px;
  transform: translateY(-50%);
  color: #7a737c;
  pointer-events: none;
}
.ody-charms-recherche input.ody-charms-recherche__champ {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 32px;
  padding: 0 10px 0 30px !important;
  border: 1px solid rgba(58, 52, 60, 0.3) !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #3a343c !important;
  font: 400 16px/1.2 'Manrope', sans-serif !important; /* 16px : pas de zoom auto sur iPhone */
  -webkit-appearance: none;
  appearance: none;
}
/* Croix « effacer » : le navigateur la dessine en bleu par défaut (iPhone/Safari, Chrome) →
   redessinée en Encre, trait fin, comme les icônes du site. */
.ody-charms-recherche input.ody-charms-recherche__champ::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 11px;
  height: 30px; /* toute la hauteur du champ, X dessiné au centre : l'iPhone calait la croix en haut */
  margin: 0 2px 0 8px;
  align-self: center;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' fill='none' stroke='%233A343C' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}
.ody-charms-recherche input.ody-charms-recherche__champ::placeholder {
  color: #9a939b;
}
.ody-charms-recherche input.ody-charms-recherche__champ:focus {
  outline: none;
  border-color: #3a343c !important;
}
.ody-charms-recherche__vide {
  margin: 10px 0 0;
  font-size: 14px;
  color: #6e4a5a;
}
.ody-charms-recherche__vide[hidden] {
  display: none;
}
/* Vignettes qui ne correspondent pas à la recherche (s'ajoute au filtre métal du thème) */
.wooco_component_product_selection_item.ody-charm-hors-recherche {
  display: none !important;
}

/* Téléphone : la barre fixe du bas (prix + « Ajouter au panier », ~83 px) recouvrait la
   dernière rangée de charms (la colonne ne prévoyait que ~68 px dessous). */
@media (max-width: 767px) {
  .is-custom-product .single-product__summary {
    padding-bottom: 120px !important;
  }
}

/* ==========================================================================
   COMPOSEUR — APERÇU AGRANDI SUR TÉLÉPHONE (30/09, v4)
   1) Cadre : le thème le fixe à 50rem de haut sur téléphone alors que la zone des charms
      (`.charms-buttons-wrapper`) fait 60rem → les charms longs accrochés en bas
      (crocodile…) étaient coupés. Cadre porté à 55rem (v2 à 60rem jugé trop grand) :
      l'emplacement le plus bas est vers 45rem (Vestige, Cascade) → ~10rem pour ce qui pend.
   2) Zoom 1,2 de TOUTE la boîte (image du support + emplacements des charms ensemble →
      proportions strictement identiques), ancré EN HAUT au centre. Mesures (rem, dans la
      zone des charms) : emplacements de 10,9 (haut, Horizon) à 45,4 (bas, Chaîne de corps),
      une image de charm reste TOUJOURS dans le carré de son emplacement (object-fit cover).
      Le haut du cadre passe SOUS la barre fixe du menu (~11,3rem) : ancré en haut, le charm
      le plus haut arrive à 13rem (visible), le plus bas à 54,5rem (< 55, visible).
      (v3 ancré en bas : charms 1 et 7 de l'Horizon cachés sous le menu, perles trop hautes.)
      clip-path = ce qui déborde après zoom : bas (1 − 1/1,2) = 16,67 %, côtés 8,33 %, haut 0.
   Désactivé en mode calage (`?calage` / `?showsupports`), où les positions sont lues en pixels.
   ========================================================================== */
@media (max-width: 767px) {
  .is-custom-product .single-product__images {
    height: 55rem;
  }
  html:not(.odyssee-show-new-supports) .is-custom-product .single-product__images {
    transform: scale(1.2);
    transform-origin: 50% 0;
    clip-path: inset(0 8.33% 16.67% 8.33%);
  }
  /* Vestige et Cascade : leurs emplacements sont les plus bas (jusqu'à ~45rem) et un charm
     long (crocodile) touchait le bas du cadre → on les REMONTE de 6rem (leurs charms
     commencent vers 31–34rem : grande marge en haut). y écran = 1,2·y − 6.
     clip-path recalculé pour rester exactement dans le cadre : haut 6/1,2 = 5rem = 9,09 %,
     bas 55 − (55+6)/1,2 = 4,17rem = 7,58 %. */
  html:not(.odyssee-show-new-supports) .is-custom-product .single-product__images:has(.charms-buttons-wrapper.is-collier-vestige),
  html:not(.odyssee-show-new-supports) .is-custom-product .single-product__images:has(.charms-buttons-wrapper.is-collier-cascade) {
    transform: translateY(-6rem) scale(1.2);
    clip-path: inset(9.09% 8.33% 7.58% 8.33%);
  }
}