/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:67 Unexpected "\"simplify\""
Line 19:29 Unexpected "`"
Line 20:68 Unexpected "`"
Line 25:3 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from snippet stylesheet tags */
/* START_SNIPPET:availability-alert (INDEX:107) */
{%- comment -%}
    EVERY BACKGROUND RULE BELOW IS SCOPED — deliberately, do not "simplify" it away.
    theme.css ships `button, [type="button"], [type="reset"], [type="submit"] {
    background: transparent }`. `[type="button"]` is an ATTRIBUTE selector, so it weighs
    exactly as much as a class: a bare `.aa-door { background:#000 }` ties with it and
    loses on source order, because theme.css loads after the compiled stylesheet blocks.
    The symptom is a button whose text colour applies while its background does not —
    black text on black, or white on white, visible only on :hover. Scoping to
    `.availability-alert-modal .aa-door` wins on specificity without `!important`.
  {%- endcomment -%}
  .availability-alert {
    margin: 14px 0 0;
  }
  .availability-alert .availability-alert__trigger {
    width: 100%;
    min-height: 44px;
    padding: 12px;
    background: #fff;
    border: 1px solid #000;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
  }
  .availability-alert .availability-alert__trigger:hover {
    background: #f5f5f5;
  }

  .availability-alert-modal .aa-view {
    display: none;
  }
  .availability-alert-modal .aa-view.is-active {
    display: block;
  }

  .availability-alert-modal .aa-door {
    display: block;
    width: 100%;
    text-align: left;
    padding: 14px;
    margin-bottom: 8px;
    background: #fff;
    border: 1px solid #000;
    cursor: pointer;
  }
  .availability-alert-modal .aa-door:hover {
    background: #f5f5f5;
  }
  .availability-alert-modal .aa-door--primary {
    background: #000;
    color: #fff;
  }
  .availability-alert-modal .aa-door--primary:hover {
    background: #1a1a1a;
  }
  .aa-door__label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .aa-door__hint {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    opacity: 0.65;
  }

  .aa-form {
    display: block;
  }
  .aa-label {
    display: block;
    margin: 14px 0 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
  }
  .aa-sizes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
  }
  .availability-alert-modal .aa-size {
    min-height: 44px;
    padding: 8px 2px;
    background: #fff;
    border: 1px solid #e2e8f0;
    font-size: 13px;
    cursor: pointer;
  }
  .availability-alert-modal .aa-size:hover {
    background: #f5f5f5;
  }
  .availability-alert-modal .aa-size.is-selected {
    background: #000;
    border-color: #000;
    color: #fff;
    font-weight: 700;
  }
  .availability-alert-modal .aa-input {
    width: 100%;
    min-height: 44px;
    padding: 10px;
    border: 1px solid #cbd5e1;
    font-size: 16px;
  }
  .availability-alert-modal .aa-submit {
    width: 100%;
    min-height: 44px;
    margin-top: 14px;
    padding: 12px;
    background: #fff;
    border: 1px solid #000;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
  }
  .availability-alert-modal .aa-submit--primary {
    background: #000;
    color: #fff;
  }
  .availability-alert-modal .aa-submit[disabled] {
    opacity: 0.4;
    cursor: default;
  }
  .aa-claim {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
  }
  .aa-note,
  .aa-status,
  .aa-done {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: #64748b;
  }
  .aa-done {
    font-size: 13px;
    color: #000;
  }
  .aa-how {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid #cbd5e1;
    font-size: 12px;
    color: #64748b;
  }
  .aa-how summary {
    cursor: pointer;
    min-height: 32px;
  }
  .aa-how__steps {
    margin: 10px 0 0;
    padding-left: 18px;
    line-height: 1.6;
  }
/* END_SNIPPET:availability-alert */

/* START_SNIPPET:localization-selector (INDEX:127) */
/* Le drapeau de langue s'aligne sur la hauteur des images de drapeau du
     sélecteur pays, pour que les deux contrôles se lisent comme une paire. */
  .prego-locale-flag {
    display: inline-flex;
    align-items: center;
  }

  .prego-flag {
    width: 18px;
    height: 12px;
    display: block;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%);
  }

  /* Le chevron du thème est dessiné sur une grille de 10 unités avec un trait de
     1.5, puis agrandi à 18px par --icon-max-width : le trait atteint ~2,7px et
     paraît grossier à côté du drapeau, lui rendu au pixel près. On le ramène à la
     hauteur du texte et on affine le trait proportionnellement. Portée limitée aux
     déclencheurs de localisation : les icônes du reste du thème ne bougent pas. */
  .prego-localization-trigger .icon-chevron-down {
    width: 12px;
  }

  .prego-localization-trigger .icon-chevron-down path {
    stroke-width: 1.1;
  }
/* END_SNIPPET:localization-selector */

/* START_SNIPPET:prego-color-badge (INDEX:138) */
.prego-color-dot {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.15);
    pointer-events: none;
  }

  .prego-color-dot--card {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    width: 14px;
    height: 14px;
  }

  .prego-color-dots {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: flex;
    gap: 4px;
  }
/* END_SNIPPET:prego-color-badge */

/* START_SNIPPET:prego-delivery-promise (INDEX:140) */
.prego-delivery-promise {
    display: grid;
    gap: 6px;
    margin: 16px 0 8px;
    font-size: 13px;
    line-height: 1.4;
  }
  .prego-delivery-promise__item {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .prego-delivery-promise__item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #065F46;
  }
/* END_SNIPPET:prego-delivery-promise */

/* START_SNIPPET:prego-homepage-fixes (INDEX:142) */
/* --- Fix invisible "Seconde Main" tab (Contrast) --- */
  .tabs .tab:not(.tab--active),
  .tabs__item:not(.is-active),
  [role="tab"][aria-selected="false"] {
    color: #666;
    opacity: 1;
  }
  .tabs .tab:not(.tab--active):hover,
  .tabs__item:not(.is-active):hover,
  [role="tab"][aria-selected="false"]:hover {
    color: #321e1e;
  }

  /* --- Hero CTA improvements (Fitts's Law + Contrast) --- */


  /* --- Slideshow: text top-left, button bottom-left --- */




  /* --- Global section title (Prego) --- */
  .mannequins-section-header {
    text-align: center;
    padding: 0 0 1.25rem;
    margin: 0;
  }

  .mannequins-section-title {
    font-family: var(--text-font-family, sans-serif);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #999;
    margin: 0;
  }





  /* --- Slideshow button hover: fill white, text black --- */
  .slideshow .button--outline {
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  .slideshow .button--outline:hover {
    background-color: #ffffff;
    color: #000000;
  }

  /* --- Filtre couleurs : map FR → hex ---
     Le thème injecte option_value (ex. "Bleu Marine") en clair dans
     linear-gradient(to right, X, X). CSS ne reconnaît que les noms anglais,
     donc tout terme FR (blanc, bleu, gris, marron, noir, vert…) produit
     un gradient invalide → swatch transparent. On force --swatch-background
     vers un hex valide en matchant l'inline style écrit par le thème.
     !important nécessaire : on remplace une déclaration inline. */
  .color-swatch[style*="right, beige,"]        { --swatch-background: linear-gradient(to right, #f5f5dc, #f5f5dc) !important; }
  .color-swatch[style*="right, blanc,"]        { --swatch-background: linear-gradient(to right, #ffffff, #ffffff) !important; border: 1px solid #ddd; }
  .color-swatch[style*="right, blanc crème,"]  { --swatch-background: linear-gradient(to right, #fffdd0, #fffdd0) !important; border: 1px solid #ddd; }
  .color-swatch[style*="right, bleu,"]         { --swatch-background: linear-gradient(to right, #1e40af, #1e40af) !important; }
  .color-swatch[style*="right, bleu ciel,"]    { --swatch-background: linear-gradient(to right, #87ceeb, #87ceeb) !important; }
  .color-swatch[style*="right, bleu clair,"]   { --swatch-background: linear-gradient(to right, #93c5fd, #93c5fd) !important; }
  .color-swatch[style*="right, bleu marine,"]  { --swatch-background: linear-gradient(to right, #1e3a8a, #1e3a8a) !important; }
  .color-swatch[style*="right, gris,"]         { --swatch-background: linear-gradient(to right, #808080, #808080) !important; }
  .color-swatch[style*="right, gris clair,"]   { --swatch-background: linear-gradient(to right, #d1d5db, #d1d5db) !important; }
  .color-swatch[style*="right, gris foncé,"]   { --swatch-background: linear-gradient(to right, #4b5563, #4b5563) !important; }
  .color-swatch[style*="right, kaki,"]         { --swatch-background: linear-gradient(to right, #78866b, #78866b) !important; }
  .color-swatch[style*="right, kaki foncé,"]   { --swatch-background: linear-gradient(to right, #4b5320, #4b5320) !important; }
  .color-swatch[style*="right, marron,"]       { --swatch-background: linear-gradient(to right, #6f4e37, #6f4e37) !important; }
  .color-swatch[style*="right, noir,"]         { --swatch-background: linear-gradient(to right, #000000, #000000) !important; }
  .color-swatch[style*="right, rose,"]         { --swatch-background: linear-gradient(to right, #ec4899, #ec4899) !important; }
  .color-swatch[style*="right, vert,"]         { --swatch-background: linear-gradient(to right, #16a34a, #16a34a) !important; }
  .color-swatch[style*="right, vert sapin,"]   { --swatch-background: linear-gradient(to right, #1d4d2e, #1d4d2e) !important; }
  .color-swatch[style*="right, violet,"]       { --swatch-background: linear-gradient(to right, #7c3aed, #7c3aed) !important; }
/* END_SNIPPET:prego-homepage-fixes */

/* START_SNIPPET:prego-price-anchor (INDEX:146) */
/* Fiche produit : le prix natif reste en évidence, l'ancre se met à sa droite sur la même ligne */
  .product__price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 4px; }
  .product__price .product__tax { flex-basis: 100%; }

  .prego-anchor { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
  /* Gris discret, sans barré : la référence marque s'efface derrière le prix de
     vente par la TAILLE et la teinte, pas par une rature. */
  .prego-anchor__retail { color: #8a8a82; font-size: 15px; }

  .prego-anchor--compact { gap: 6px; }
  .prego-anchor--compact .prego-anchor__retail { font-size: 12px; }

  /* Cartes collection : UNE seule ligne de prix, dans l'encre du thème. Pas de teinte
     promo, pas de gras — sur une grille de 5, la hiérarchie vient de la position (sous
     le titre) et de l'air autour, pas de la couleur. L'ancre « prix conseillé » et le
     tag promo ne sortent plus sur les cartes : ils restent sur la fiche produit, où la
     mention légale (prego-price-legend) les accompagne. */
  product-card .price-list { align-items: baseline; column-gap: 8px; row-gap: 2px; flex-wrap: wrap; }
  /* Encre NOIRE, pas `rgb(var(--text-color))`. Le schéma de couleurs résout ce
     token en #321e1e — un brun chaud qui, sur une grille de cartes, lisait comme
     une teinte terracotta appliquée aux prix. Le titre garde le token du schéma ;
     seul le prix passe en noir, parce que c'est le chiffre qu'on doit pouvoir
     comparer d'une carte à l'autre sans que la teinte s'en mêle. */
  product-card .price-list sale-price {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.15;
    color: #000;
  }

  /* Aligner les PRIX horizontalement d'une carte à l'autre : on réserve TOUJOURS
     2 lignes de titre (un titre court garde l'espace vide en dessous) + on clampe à
     2 lignes max → le prix démarre au même niveau sur toute la rangée, titre 1 ou 2
     lignes. C'est l'« espace constant entre titre et prix » voulu. */
  product-card .product-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: 2.4em;
    line-height: 1.2;
  }

  /* Fiche produit : prix de vente en NOIR, à sa taille native (le plus gros).
     C'était #c2410c, une terracotta qui faisait lire le prix comme une promotion
     permanente — la teinte du rabais appliquée à un prix plein. Le noir laisse la
     hiérarchie à la taille et à la graisse, qui sont déjà là. Le conseillé reste
     gris. `!important` conservé (dette existante) : il neutralise la règle du
     thème sur `sale-price`, et le retirer demande une vérification visuelle qui
     n'entre pas dans ce changement. */
  .product__price .price__regular .price-item,
  .product__price .price__sale .price-item--sale,
  .product__price sale-price {
    color: #000 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.1;
  }

  /* Fiche : la reference conseillee passe sur SA PROPRE LIGNE, sous le prix + la promo,
     libellee et discrete → toutes les infos restent, mais aerees (2 lignes). */
  .product__price .prego-anchor {
    flex-basis: 100%;
    white-space: normal;
    gap: 6px;
    margin-top: 2px;
  }
  .product__price .prego-anchor__label { color: #8a8a82; font-size: 13px; }
  .product__price .prego-anchor__retail { font-size: 13px; }
/* END_SNIPPET:prego-price-anchor */

/* START_SNIPPET:prego-price-legend (INDEX:147) */
.prego-price-legend {
    font-size: 11px;
    color: #b0b0b0;
    line-height: 1.4;
    margin-top: 16px;
  }
/* END_SNIPPET:prego-price-legend */

/* START_SNIPPET:prego-product-card-badge (INDEX:149) */
/* Une seule encre — celle du schéma de couleurs de la carte (rgb(var(--text-color))),
       jamais un hex en dur. Les états se distinguent par le REMPLISSAGE (plein / filet),
       pas par la teinte : c'est ce qui tient le rendu sobre quand la grille passe à
       5 colonnes, et ça survit à un changement de schéma sans retouche. */
    /* Ancrage des badges de taille (les pastilles Neuf / Seconde main qui occupaient le
       coin haut-droit ont été retirées).

       Le retrait est `var(--product-card-inner-padding)` — le MÊME token que
       `.badge-list` du thème (theme.css). C'est ce qui met les badges Prego sur la
       grille des badges natifs (« En rupture », remise, badge libre) au lieu d'un 8px
       codé en dur qui s'en décalait de 8px, et de 16px au-delà de 1600px où le token
       passe à 1.5rem. Ne pas re-durcir en pixels.

       `display:flex` n'est pas décoratif, il est structurel : un conteneur bloc
       positionnerait son <span> dans une line box calculée sur le strut du parent
       (font-size héritée, pas les 10px du badge) et le décalerait vers le bas. En flex,
       l'enfant est collé au bord. Ne pas repasser un de ces blocs en display:block. */
    .prego-card-size-badges {
      position: absolute;
      display: flex;
      gap: 3px;
      z-index: 2;
    }
    .prego-card-size-badges {
      bottom: var(--product-card-inner-padding);
      left: var(--product-card-inner-padding);
      flex-wrap: wrap;
    }
    .prego-card-badge {
      padding: 2px 6px;
      border: 1px solid rgb(var(--text-color));
      border-radius: 0;
      font-size: 10px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      line-height: 1.4;
      white-space: nowrap;
    }
    /* Les tailles restent en filet. Le seul badge PLEIN de la carte est « Nouveauté »,
       défini dans product-badges.liquid — deux badges pleins alourdiraient tout. */
    .prego-card-badge--size {
      background: rgb(var(--background));
      color: rgb(var(--text-color));
    }
    .prego-card-badge--cond-neuf,
    .prego-card-badge--cond-occasion {
      background: rgb(var(--background));
      color: rgb(var(--text-color));
    }
    /* Taille disponible en neuf ET en seconde main : coin marqué à l'encre diluée.
       L'information reste lisible sans introduire de seconde couleur. */
    .prego-card-badge--cond-both {
      background: linear-gradient(135deg, rgb(var(--background)) 50%, rgb(var(--text-color) / 0.12) 50%);
      color: rgb(var(--text-color));
    }
    /* Mobile : 2 cartes par rangée — les badges rétrécissent, mais le RETRAIT reste le
       token (donc toujours aligné sur les badges natifs). Le thème descend lui aussi
       `.badge` de 10px à 9px sous 700px : on suit la même échelle. */
    @media screen and (max-width: 699px) {
      .prego-card-size-badges {
        gap: 2px;
      }
      .prego-card-badge {
        padding: 1px 4px;
        font-size: 9px;
        letter-spacing: 0.06em;
      }
    }
/* END_SNIPPET:prego-product-card-badge */

/* START_SNIPPET:prego-product-overrides (INDEX:150) */
.product__vendor.prego-vendor {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 4px;
  }

  /* The theme sizes .h3 fluidly (up to ~44px on a wide screen) while the price is capped,
     which flips the hierarchy: on a resale page the price is the deciding information.
     Capping the title at 36px keeps the title/price ratio at 1.2 for every width — the
     price carries the matching clamp in snippets/prego-price-anchor.liquid, so the two
     move together and neither can drift.

     Margin in em, not px: 30px was 1.04em on mobile but only 0.69em on desktop, so the
     page breathed LESS as the screen grew.

     .product__title.h3 (0,2,0) beats the theme's .h3 (0,1,0) whatever the load order. */
  .product__title.h3 {
    font-size: clamp(1.8rem, 1.596rem + 0.873vw, 2.25rem);
    margin-bottom: 0.9em;
    display: block;
  }

  /* Kept as a real thematic break, drawn as nothing. It used to be an <hr> rendered then
     hidden with opacity:0 purely to keep its margins — an invisible line that screen
     readers still announced. */
  .product__separator {
    border: 0;
    height: 0;
    margin-block: 20px;
  }
/* END_SNIPPET:prego-product-overrides */

/* START_SNIPPET:prego-trust-strip (INDEX:154) */
.prego-trust-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 24px 0 8px;
    padding: 16px 0;
    border-top: 1px solid #e5e5e5;
  }
  .prego-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    line-height: 1.3;
    color: #666;
  }
  .prego-trust-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #065F46;
  }
  @media (max-width: 699px) {
    .prego-trust-strip {
      grid-template-columns: 1fr;
      gap: 8px;
    }
  }
/* END_SNIPPET:prego-trust-strip */

/* START_SNIPPET:prego-trustpilot (INDEX:155) */
.prego-tp {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
  }
  .prego-tp--start { align-items: flex-start; }
  .prego-tp--center { align-items: center; }
  .prego-tp--end { align-items: flex-end; }

  .prego-tp--at-pdp { margin: 4px 0 16px; }
  .prego-tp--at-cart,
  .prego-tp--at-cart-drawer { margin: 12px 0 0; }
  .prego-tp--at-footer { margin: 8px 0 0; }
  .prego-tp--at-account { margin: 24px 0 0; }

  .prego-tp__heading {
    margin: 0;
    color: rgb(var(--text-color) / 0.7);
  }

  /* Reserve the box: the TrustBox iframe arrives async and must not shift the page. */
  .prego-tp__box { width: 100%; }
  .prego-tp__box--micro-star,
  .prego-tp__box--micro-combo,
  .prego-tp__box--micro-trustscore { min-height: 24px; }
  .prego-tp__box--review-collector { min-height: 52px; }
  .prego-tp__box--starter { min-height: 130px; }
  .prego-tp__box--mini { min-height: 150px; }
/* END_SNIPPET:prego-trustpilot */

/* START_SNIPPET:product-badges (INDEX:160) */
/* Nouveauté : seul badge PLEIN de la carte — c'est l'accroche commerciale, et elle est
     rare (~10 % du catalogue à 30 jours), donc elle porte l'emphase. L'état et la taille
     sont des caractéristiques et restent en filet. Encre du schéma de couleurs, jamais un
     hex en dur : le badge suit le thème sans retouche. */
  .badge--new {
    background: rgb(var(--text-color));
    color: rgb(var(--background));
  }
/* END_SNIPPET:product-badges */