/** Shopify CDN: Minification failed

Line 81:0 Unexpected "}"

**/
/* ============================================================================
   Fiche produit editable Curv : feuille de base.
   Chargee par snippets/curv-pdp-base.liquid (template produit uniquement).
   Fichier statique : contrairement aux {% stylesheet %} des sections, il reste
   toujours applique, editeur de theme compris.
   Contenu :
   1. Variables, italique d'origine, apparition au defilement
   2. Anti-collisions avec base.css du theme (hors couches)
   3. Largeur du theme (en-tete et pied de page)
   4. Carrousels natifs et points de pagination
   5. Regles venues des sections (barre fixe, quantite, histoires, avis)
   6. Lisibilite : paragraphes agrandis (demande Stephane, 16/10/2026)
   ============================================================================ */

/* 1. Variables et apparition au defilement --------------------------------- */

.instant { --font-sans: 'Inter', sans-serif; --font-heading: 'Inter Tight', sans-serif; --font-serif: 'Newsreader', serif; }

.instant .italic { font-family: 'Curv Best Kept Inter', Inter, sans-serif; }

@keyframes ic-reveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ic-reveal { animation: ic-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
}

/* 2. Anti-collisions avec base.css ------------------------------------------
   base.css du theme est charge hors couches CSS : en light DOM il ecrase tout
   le CSS compile (qui vit dans des @layer), quelle que soit la specificite.
   On neutralise ses classes globales et on re-arme ce qui est utilise.
   :where() laisse la specificite a (0,1,0) : au-dessus de base.css, sous .instant. */

.instant .grid { grid-template-areas: none; }
.instant .grid:not([class*="grid-cols"]) { grid-template-columns: none; }
:where(.instant) .flex { gap: normal; }

/* base.css garde .hidden en !important : variantes utilisees sur des elements .hidden. */
@media (min-width: 40rem) {
  .instant .sm\:flex { display: flex !important; }
  .instant .sm\:block { display: block !important; }
}
@media (min-width: 64rem) {
  .instant .lg\:block { display: block !important; }
  .instant .lg\:grid { display: grid !important; }
}
.instant .group[data-open] .group-data-\[open\]\:inline { display: inline !important; }

/* La police d'icones Tabler du theme poserait un glyphe en double : coupe sous .instant. */
.instant .ti::before { content: none !important; }
/* Le reset du CSS compile met les svg en block et les contraint en largeur : dans un texte,
   l'icone passait a la ligne ou s'ecrasait. On force la taille carree de la police (1em)
   et on empeche les icones flex de se faire compresser par le texte a cote (caracteristiques). */
.instant .ti { flex-shrink: 0; }
.instant .ti > svg { display: inline-block; width: 1em; height: 1em; }
/* Icones des Caracteristiques : moitie de la taille (40 px etait trop gros, demande Stephane). */
.instant .curv-spec i.ti { font-size: 20px; }

/* 3. Largeur du theme -------------------------------------------------------
   Meme mecanisme que l'en-tete et le pied de page : --page-width et
   --page-margin viennent du corps (page-width-narrow : 1440 px de contenu + 40 px). */

.instant .max-w-\[1440px\] { max-width: var(--page-width, 1520px) !important; padding-inline: var(--page-margin, 40px) !important; }

/* Barre d'achat fixe masquee sur le pied de page (comportement Wopilo). */
[data-ic-sticky].curv-at-footer { transform: translateY(110%) !important; }

/* 4. Carrousels natifs ------------------------------------------------------
   Le repli du CSS compile (swiper non defini) devient defilable. */

.instant swiper-container:not(:defined) { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; }
.instant swiper-container::-webkit-scrollbar { display: none; }
/* Galerie mobile : une image a la fois, calee sur chaque image avec l'apercu de la suivante. */
.instant swiper-container[data-curv-mobile-gallery] { scroll-snap-type: x mandatory; }
/* Slides a largeur propre : le repli natif met width:auto, on restaure la largeur voulue. */
}


/* Points de pagination natifs. */
.instant .curv-dots { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 5; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.instant .curv-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(4, 28, 45, 0.25); }
.instant .curv-dots span.on { background: var(--swiper-pagination-color, #041c2d); }
.instant [data-overlay="gallery-zoom"] .curv-dots { bottom: 0; }

/* 5. Regles venues des sections -------------------------------------------- */

/* Barre d'achat fixe (curv-pdp-product-main). */
.ic-sticky { transform: translateY(110%); transition: transform 300ms ease; }
.ic-sticky[data-visible="true"] { transform: translateY(0); }

/* Quantite (curv-pdp-product-main). */
.ic-qty::-webkit-outer-spin-button, .ic-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ic-qty { -moz-appearance: textfield; }

/* Contenu des accordeons (curv-pdp-product-main). */
.curv-acc-content li + li { margin-top: 4px; }

/* Histoires (curv-pdp-histoires). */
.ic-fade { -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent); mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent); }
.ic-histoires[data-open] .ic-fade { -webkit-mask-image: none; mask-image: none; }

/* Pagination des avis (curv-pdp-avis). */
.ic-reviews[data-page="1"] [data-ic-page]:not([data-ic-page="1"]),
.ic-reviews[data-page="2"] [data-ic-page]:not([data-ic-page="2"]),
.ic-reviews[data-page="3"] [data-ic-page]:not([data-ic-page="3"]) { display: none; }

/* 6. Lisibilite : paragraphes et icones agrandis (demande Stephane, 16/10/2026) ---
   Les tailles d'origine venaient de la page compilee (9 a 13 px pour les textes).
   [class] porte la specificite a (0,3,0) : au-dessus des utilitaires compiles,
   sans dependre de l'ordre de chargement. */

.instant .text-\[8px\][class] { font-size: 11px; }
.instant .text-\[9px\][class] { font-size: 12px; }
.instant .text-\[10px\][class] { font-size: 13px; }
.instant .text-\[11px\][class] { font-size: 15px; }
.instant .text-\[12px\][class] { font-size: 15px; }
.instant .text-\[13px\][class] { font-size: 16px; }
.instant .text-\[14px\][class] { font-size: 17px; }

/* Icones : toutes les tailles au-dessus. */
.instant .text-base[class] { font-size: 22px; }
.instant .text-lg[class] { font-size: 24px; }
.instant .text-xl[class] { font-size: 32px; }
.instant .text-2xl[class] { font-size: 40px; }
.instant .text-3xl[class] { font-size: 48px; }

/* 7. Miniatures de la galerie (cliquables) ---------------------------------- */

.curv-thumb { flex: 0 0 auto; width: 64px; height: 64px; overflow: hidden; border-radius: 8px; border: 2px solid rgba(4, 28, 45, 0.15); background: #fff; padding: 0; cursor: pointer; }
.curv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.curv-thumb[data-active="true"] { border-color: #55defc; }
.curv-thumb:focus-visible { outline: 2px solid #041c2d; outline-offset: 2px; }

/* 8. Reglages mobile et divers (demandes Stephane, 16/10) ------------------- */

/* Pastilles story : alignees a gauche sur ordinateur ; plus grosses et reparties en mobile. */
@media (max-width: 639px) {
  .instant .curv-stories > button { flex: 1 1 0; width: auto; min-width: 0; }
  .instant .curv-story-circle { width: 80px; height: 80px; }
}

/* Packs : image en haut, puis titre, puis prix ; ligne sur ordinateur. */
.instant .curv-bundle { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
@media (min-width: 640px) { .instant .curv-bundle { flex-direction: row; text-align: left; gap: 12px; } }

/* Notes flottantes du design : pleine largeur sous 1024 px. */
@media (max-width: 1023px) { .instant .curv-note { max-width: none; } }

/* Section des 3 chiffres : coussin detoure en grand, colle au bord droit de l'ecran (demande Stephane, ref. wopilo). */
.instant .curv-stats-band { position: relative; }
/* Largeur du contenu portee ici : la classe max-w-[1440px] subit un padding !important des regles anti-collision. */
.instant .curv-stats-content[class] { max-width: 1440px; margin-inline: auto; }
.instant .curv-stats-media { position: absolute; right: 0; top: 50%; transform: translateY(-52%); width: clamp(300px, 28vw, 520px); pointer-events: none; }
.instant .curv-stats-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 28px 42px rgba(0, 0, 0, .35)); }
@media (min-width: 1024px) { .instant .curv-stats-content[class] { padding-right: clamp(240px, 25vw, 470px); } }
@media (max-width: 1023px) {
  .instant .curv-stats-media { position: static; width: clamp(200px, 55vw, 300px); margin: 22px 16px 0 auto; transform: none; }
}

/* Bandeau praticiens (mobile) : deux lignes, image a gauche + titre a droite, puis le paragraphe en pleine largeur (demande Stephane). */
.instant .curv-pract-mobile { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 10px; }
.instant .curv-pract-mobile .curv-pract-img { grid-column: 1; grid-row: 1; }
.instant .curv-pract-mobile .curv-pract-title { grid-column: 2; grid-row: 1; }
.instant .curv-pract-mobile .curv-pract-text { grid-column: 1 / -1; grid-row: 2; margin: 0; }
/* Le bandeau praticiens ne vit que sur mobile : masque explicite en desktop (la regle display:grid ci-dessus ecrasait lg:hidden). */
@media (min-width: 1024px) { .instant .curv-pract-mobile { display: none; } }

/* Barre fixe : badge de confiance colle au bouton (petit espace) ; au-dessus sur mobile. */
.instant .curv-sticky-inner { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.instant .curv-sticky-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.instant .curv-sticky-right { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.instant .curv-sticky-badge { justify-content: center; }
@media (min-width: 640px) {
  .instant .curv-sticky-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
  .instant .curv-sticky-right { flex-direction: row; align-items: center; justify-content: flex-end; gap: 8px; width: auto; margin-left: auto; }
  .instant .curv-sticky-badge { justify-content: flex-start; }
}

/* Etoiles de notation : l'ambre d'origine est conserve dans le theme bleu (demande Stephane). */
.instant .text-\[\#ffa800\][class] { color: #ffa800; }

/* CTA « Un design innovant » : petit fond bleu clair (classe arbitraire absente de la CSS compilee). */
.instant .bg-\[\#F4FDFF\][class] { background-color: #F4FDFF; }

/* Barres et etoiles de repartition : ambre d'origine conserve (classe absente de la CSS compilee). */
.instant .bg-\[\#ffa800\][class] { background-color: #ffa800; }
.instant .curv-pros-card { border: 1px solid rgba(5, 29, 45, .09); }

/* Espacement des carrousels natifs : column-gap selon le space-between d'origine. */
.instant swiper-container:not(:defined)[space-between="28"] { column-gap: 28px; }
.instant swiper-container:not(:defined)[space-between="20"] { column-gap: 20px; }
.instant swiper-container:not(:defined)[space-between="16"] { column-gap: 16px; }
.instant swiper-container:not(:defined)[space-between="14"] { column-gap: 14px; }
.instant swiper-container:not(:defined)[space-between="10"] { column-gap: 10px; }
.instant swiper-container:not(:defined)[space-between="8"] { column-gap: 8px; }

/* Carrousels natifs : curseur de glissement a la souris. */
@media (hover: hover) { .instant swiper-container:not(:defined) { cursor: grab; } .instant swiper-container.curv-drag { cursor: grabbing; scroll-behavior: auto; } }

/* Bundles (packs) : apparence pilotee par les variables de la section produit. */
.instant .curv-bundle { background: var(--bundle-bg, #fff); border-color: var(--bundle-bd, #041c2d); border-width: var(--bundle-bw, 2px); border-radius: var(--bundle-radius, 12px); }
.instant .curv-bundle[aria-pressed="true"][class][class] { background: var(--bundle-sel-bg, #f4fdff); border-color: var(--bundle-sel-bd, #55defc); border-width: var(--bundle-sel-bw, 2px); }
.instant [data-ic-bundle] > span.absolute { background: var(--bundle-badge-bg, #fffcf4); color: var(--bundle-badge-text, #041c2d); }

/* Largeurs des slides de TOUS les carrousels du site (un seul bloc, ordre garanti). */
.instant swiper-container:not(:defined)[slides-per-view="auto"] > swiper-slide[class*="w-[85vw]"] { width: 85vw; }
.instant swiper-container:not(:defined)[slides-per-view="auto"] > swiper-slide[class*="w-[80vw]"] { width: 80vw; }
.instant swiper-container:not(:defined)[slides-per-view="auto"] > swiper-slide[class*="w-[78vw]"] { width: 78vw; }
.instant swiper-container:not(:defined)[slides-per-view="auto"] > swiper-slide[class*="w-[260px]"] { width: 260px; }
.instant swiper-container:not(:defined)[slides-per-view="auto"] > swiper-slide[class*="w-[85%]"] { width: 85%; }
@media (min-width: 40rem) {
.instant swiper-container:not(:defined)[slides-per-view="auto"] > swiper-slide[class*="sm:w-[340px]"] { width: 340px; }
.instant swiper-container:not(:defined)[slides-per-view="auto"] > swiper-slide[class*="sm:w-[46%]"] { width: 46%; }
.instant swiper-container:not(:defined)[slides-per-view="auto"] > swiper-slide[class*="sm:w-[calc((100%-16px)/2)]"] { width: calc((100% - 16px) / 2); }
.instant swiper-container:not(:defined)[slides-per-view="auto"] > swiper-slide[class*="sm:w-[calc((100%-10px)/2)]"] { width: calc((100% - 10px) / 2); }
.instant swiper-container:not(:defined)[slides-per-view="auto"] > swiper-slide[class*="sm:w-[320px]"] { width: 320px; }
}
@media (min-width: 48rem) {
.instant swiper-container:not(:defined)[slides-per-view="auto"] > swiper-slide[class*="md:w-[300px]"] { width: 300px; }
.instant swiper-container:not(:defined)[slides-per-view="auto"] > swiper-slide[class*="md:w-[calc((100%-32px)/3)]"] { width: calc((100% - 32px) / 3); }
}
@media (min-width: 64rem) {
.instant swiper-container:not(:defined)[slides-per-view="auto"] > swiper-slide[class*="lg:w-[calc((100%-28px)/3)]"] { width: calc((100% - 28px) / 3); }
.instant swiper-container:not(:defined)[slides-per-view="auto"] > swiper-slide[class*="lg:w-[calc((100%-32px)/3)]"] { width: calc((100% - 32px) / 3); }
.instant swiper-container:not(:defined)[slides-per-view="auto"] > swiper-slide[class*="lg:w-[calc((100%-20px)/3)]"] { width: calc((100% - 20px) / 3); }
.instant swiper-container:not(:defined)[slides-per-view="auto"] > swiper-slide[class*="lg:w-[334px]"] { width: 334px; }
.instant swiper-container:not(:defined)[slides-per-view="auto"] > swiper-slide[class*="lg:w-[31.5%]"] { width: 31.5%; }
}