/* AUTO-GENERATED — scoped under .atelierbyperry-wrapper.
 * Source: configurator.css
 * Do not edit — modify the source CSS then re-run dev/scope-css.py
 */
.atelierbyperry-wrapper{
  --brand: 255 158 193; --brand2: 179 136 255; --brand3: 255 213 171;
  --bg:#fff; --card:#fff; --fg:#0a0a0a; --muted:#6b7280; --border:#e4e4e7; --soft:#f6f7f8;
  --accent:#0a0a0a; --accent-contrast:#fff; --ring: rgba(2,132,199,.35);
  --tab-bg:#fff; --tab-fg:var(--fg); --tab-active-bg:var(--accent); --tab-active-fg:var(--accent-contrast);
  --range-track:#e5e7eb; --range-thumb:var(--accent);
  --transition-speed: 0.3s;
}

.atelierbyperry-wrapper[data-theme="dark"]{
  --bg:#0a0a0a; --card:#1a1a1a; --fg:#f4f4f5; --muted:#a1a1aa; --border:#27272a; --soft:#18181b;
  --accent:#f4f4f5; --accent-contrast:#0a0a0a; --ring: rgba(147,197,253,.35);
  --tab-bg:#1a1a1a; --tab-fg:var(--fg); --tab-active-bg:var(--accent); --tab-active-fg:var(--accent-contrast);
  --range-track:#3f3f46; --range-thumb:var(--accent);
}

/* Transitions fluides pour le theme - exclure les animations de transform */
.atelierbyperry-wrapper *, .atelierbyperry-wrapper *::before, .atelierbyperry-wrapper *::after{
  transition: background-color var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1),
              border-color var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1),
              color var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Elements avec transitions complètes (incluant transform) */
.atelierbyperry-wrapper .chip, .atelierbyperry-wrapper .tab-btn, .atelierbyperry-wrapper .opt-card, .atelierbyperry-wrapper .swatch, .atelierbyperry-wrapper .btn-primary, .atelierbyperry-wrapper .btn-ghost, .atelierbyperry-wrapper .icon-btn, .atelierbyperry-wrapper .opt-img{
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.atelierbyperry-wrapper *{ font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.atelierbyperry-wrapper, .atelierbyperry-wrapper{ height: 100%; overflow: hidden; background: var(--bg); color: var(--fg); }
    .atelierbyperry-wrapper .grad-brand{ background: linear-gradient(135deg, rgb(var(--brand2)) 0%, rgb(var(--brand)) 45%, rgb(var(--brand3)) 100%); }

    .atelierbyperry-wrapper .chip{ border-radius:9999px; border:1px solid var(--border); padding:.4rem .7rem; font-size:.875rem; font-weight:600; background:var(--card); color:var(--fg); white-space:nowrap; cursor:pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
    .atelierbyperry-wrapper .chip:hover{ transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
    .atelierbyperry-wrapper .chip:active{ transform: translateY(0); }
    .atelierbyperry-wrapper .chip-active{ background:var(--tab-active-bg); color:var(--tab-active-fg); border-color:var(--tab-active-bg); }

    .atelierbyperry-wrapper .tab-btn{ border-radius:9999px; border:1px solid var(--border); padding:.35rem .7rem; font-size:.8rem; font-weight:600; background:var(--tab-bg); color:var(--tab-fg); cursor:pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
    .atelierbyperry-wrapper .tab-btn:hover{ transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
    .atelierbyperry-wrapper .tab-btn:active{ transform: translateY(0); }
    .atelierbyperry-wrapper .tab-btn.active{ background:var(--tab-active-bg); color:var(--tab-active-fg); border-color:var(--tab-active-bg); }
    .atelierbyperry-wrapper .tab-panel{ display:none; height:100%; }
    .atelierbyperry-wrapper .tab-panel.active{ display:block; animation: fadeIn 0.3s ease; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.atelierbyperry-wrapper .viewer-box{ position:relative; height:100%; overflow:hidden; border-radius:1rem; background:var(--soft); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.atelierbyperry-wrapper .viewer-expanded{ position:fixed !important; left:0; right:0; top:4rem; bottom:0; z-index:60; border-radius:0 !important; background:var(--bg); animation: expandViewer 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.atelierbyperry-wrapper .viewer-expanded .viewer-box{ border-radius:0 !important; height:100% !important; }

@keyframes expandViewer {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

    .atelierbyperry-wrapper .opt-card{ border:1px solid var(--border); border-radius:1rem; padding:.6rem; display:flex; gap:.75rem; align-items:center; background:var(--card); color:var(--fg); height:64px; min-width:140px; flex:1; transition:all .2s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; }
    /* Dans un grid de choix (#shapeChoices, #holeChoices, etc.), retirer le min-width pour permettre aux cartes de s'adapter à la largeur du panel (380px desktop). */
    .atelierbyperry-wrapper [id$="Choices"] .opt-card{ min-width:0; }
    /* Grille 1-colonne pour largeur / alliage / couleur (empilement vertical pleine largeur). */
    .atelierbyperry-wrapper .grid-1col{ display:grid; grid-template-columns:1fr; gap:.75rem; }
    .atelierbyperry-wrapper .grid-1col .opt-card{ min-width:0; width:100%; }
    .atelierbyperry-wrapper .opt-card:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); border-color: var(--accent); }
    .atelierbyperry-wrapper .opt-card:active{ transform: scale(0.98); }
    .atelierbyperry-wrapper .opt-card[data-active="true"]{ background:var(--tab-active-bg) !important; color:var(--tab-active-fg) !important; border-color:var(--tab-active-bg) !important; }
    .atelierbyperry-wrapper .opt-card[data-active="true"] *{ color:var(--tab-active-fg) !important; opacity:1 !important; }
    .atelierbyperry-wrapper .opt-card[data-active="true"] .text-zinc-500, .atelierbyperry-wrapper .opt-card[data-active="true"] .text-zinc-600, .atelierbyperry-wrapper .opt-card[data-active="true"] .text-xs, .atelierbyperry-wrapper .opt-card[data-active="true"] span, .atelierbyperry-wrapper .opt-card[data-active="true"] div{ color:var(--tab-active-fg) !important; }

    .atelierbyperry-wrapper .opt-img{ width:48px; height:48px; border-radius:.75rem; overflow:hidden; border:1px solid var(--border); background:var(--bg); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
    .atelierbyperry-wrapper .opt-card:hover .opt-img{ transform: scale(1.1) rotate(2deg); }
    .atelierbyperry-wrapper .opt-img img{ width:90%; height:90%; object-fit:contain; display:block; }
    .atelierbyperry-wrapper[data-theme="dark"] .opt-img{ background: var(--soft); }
    .atelierbyperry-wrapper[data-theme="dark"] .opt-img img{ filter: brightness(0) invert(1); opacity: 0.9; }
    .atelierbyperry-wrapper .swatch{ width:48px; height:48px; border-radius:9999px; border:1px solid var(--border); flex-shrink:0; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; }
    .atelierbyperry-wrapper .swatch:hover{ transform: scale(1.15) rotate(5deg); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
    .atelierbyperry-wrapper .swatch:active{ transform: scale(0.95); }
    .atelierbyperry-wrapper #step-1 .opt-img{ width:40px; height:40px; } .atelierbyperry-wrapper #step-1 .swatch{ width:40px; height:40px; }

    .atelierbyperry-wrapper .thumb{ height:64px; width:64px; border-radius:.75rem; border:1px solid var(--border); overflow:hidden; flex:0 0 auto; background:var(--card); }
    @media (min-width:1024px){ .atelierbyperry-wrapper .thumb{ height:110px; width:110px; } }
    .atelierbyperry-wrapper .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

    .atelierbyperry-wrapper .no-scrollbar::-webkit-scrollbar{ display:none; } .atelierbyperry-wrapper .no-scrollbar{ scrollbar-width:none; }

    .atelierbyperry-wrapper .slider-row{ display:flex; align-items:center; gap:.5rem; }
    .atelierbyperry-wrapper .slider-row label{ flex:0 0 auto; min-width:8rem; white-space:nowrap; font-weight:600; }
    .atelierbyperry-wrapper .slider-row input[type="range"]{ flex:1 1 auto; min-width:0; accent-color:var(--accent); background:transparent; }
    .atelierbyperry-wrapper .slider-val{ flex:0 0 auto; min-width:84px; display:flex; gap:.25rem; align-items:baseline; justify-content:flex-end; }
    .atelierbyperry-wrapper input[type="text"], .atelierbyperry-wrapper input[type="email"], .atelierbyperry-wrapper select, .atelierbyperry-wrapper textarea{ background:var(--card); color:var(--fg); border:1px solid var(--border); }
    .atelierbyperry-wrapper input:focus, .atelierbyperry-wrapper select:focus, .atelierbyperry-wrapper textarea:focus{ outline:none; box-shadow:0 0 0 4px var(--ring); }
    .atelierbyperry-wrapper input[type="range"]{ -webkit-appearance:none; appearance:none; background:transparent; }
    .atelierbyperry-wrapper input[type="range"]::-webkit-slider-runnable-track{ height:6px; background:var(--range-track); border-radius:999px; }
    .atelierbyperry-wrapper input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:999px; background:var(--range-thumb); border:2px solid var(--accent-contrast); margin-top:-5px; cursor:pointer; }
    .atelierbyperry-wrapper input[type="range"]::-moz-range-track{ height:6px; background:var(--range-track); border-radius:999px; }
    .atelierbyperry-wrapper input[type="range"]::-moz-range-thumb{ width:16px; height:16px; border-radius:9999px; background:var(--range-thumb); border:2px solid var(--accent-contrast); cursor:pointer; border:none; }

    .atelierbyperry-wrapper .btn-primary{ background:var(--accent); color:var(--accent-contrast); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
    .atelierbyperry-wrapper .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(168,85,247,0.3); }
    .atelierbyperry-wrapper .btn-primary:active{ transform: translateY(0) scale(0.98); }
    .atelierbyperry-wrapper .btn-ghost{ background:transparent; color:var(--fg); border-color:var(--border); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
    .atelierbyperry-wrapper .btn-ghost:hover{ background: var(--soft); }
    .atelierbyperry-wrapper .chip:focus-visible, .atelierbyperry-wrapper .tab-btn:focus-visible, .atelierbyperry-wrapper .opt-card:focus-visible, .atelierbyperry-wrapper select:focus-visible, .atelierbyperry-wrapper input:focus-visible, .atelierbyperry-wrapper textarea:focus-visible{ outline: none; box-shadow:0 0 0 4px var(--ring); }

    .atelierbyperry-wrapper .icon-btn{ display:inline-flex; align-items:center; justify-content:center; height:36px; width:36px; border-radius:9999px; border:1px solid var(--border); background:var(--card); color:var(--fg); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; }
    .atelierbyperry-wrapper .icon-btn:hover{ background: var(--soft); transform: scale(1.1); }
    .atelierbyperry-wrapper .icon-btn:active{ transform: scale(0.95); }
    .atelierbyperry-wrapper .icon-btn:hover{ background:var(--soft); }
    .atelierbyperry-wrapper .icon-btn[aria-pressed="true"]{ background:var(--tab-active-bg); color:var(--tab-active-fg); border-color:var(--tab-active-bg); }

    @media (max-width:1023px){
      .atelierbyperry-wrapper .mobile-rows{ display:grid; grid-template-rows:45dvh 1fr; height:calc(100dvh - 4rem); }
    }

/* Utilities */
.atelierbyperry-wrapper .tabular-nums{ font-variant-numeric: tabular-nums; }
.atelierbyperry-wrapper .transition-colors{ transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }

/* Skeleton loaders */
.atelierbyperry-wrapper .skeleton{ background: linear-gradient(90deg, var(--soft) 25%, var(--border) 50%, var(--soft) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 0.75rem; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.atelierbyperry-wrapper .skeleton-card{ height: 64px; width: 100%; }
.atelierbyperry-wrapper .skeleton-text{ height: 1rem; width: 100%; margin: 0.25rem 0; }

/* Monochrome emoji styling */
.atelierbyperry-wrapper #emojiMenuGrid button{
  font-variant-emoji: text;
  filter: grayscale(1);
  -webkit-text-fill-color: currentColor;
}

.atelierbyperry-wrapper[data-theme="dark"] #emojiMenuGrid button:hover{
  background-color: var(--soft) !important;
}
.atelierbyperry-wrapper #emojiMenuGrid button{
  font-variant-emoji: text;
  filter: grayscale(1);
  -webkit-text-fill-color: currentColor;
}

.atelierbyperry-wrapper[data-theme="dark"] #emojiMenuGrid button:hover{
  background-color: var(--soft) !important;
}

/* Dark mode overrides for Tailwind classes */
.atelierbyperry-wrapper[data-theme="dark"] .bg-white{ background-color: var(--card) !important; }
.atelierbyperry-wrapper[data-theme="dark"] .bg-white\/80{ background-color: rgba(26, 26, 26, 0.8) !important; }
.atelierbyperry-wrapper[data-theme="dark"] .bg-white\/95{ background-color: rgba(26, 26, 26, 0.95) !important; }
.atelierbyperry-wrapper[data-theme="dark"] .bg-white\/60{ background-color: rgba(26, 26, 26, 0.6) !important; }
.atelierbyperry-wrapper[data-theme="dark"] .text-zinc-500{ color: var(--muted) !important; }
.atelierbyperry-wrapper[data-theme="dark"] .text-zinc-600{ color: var(--muted) !important; }
.atelierbyperry-wrapper[data-theme="dark"] .border{ border-color: var(--border) !important; }
.atelierbyperry-wrapper[data-theme="dark"] .border-b{ border-bottom-color: var(--border) !important; }
.atelierbyperry-wrapper[data-theme="dark"] .border-t{ border-top-color: var(--border) !important; }
.atelierbyperry-wrapper[data-theme="dark"] .shadow-sm{ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important; }
.atelierbyperry-wrapper[data-theme="dark"] .shadow-lg{ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3) !important; }
.atelierbyperry-wrapper[data-theme="dark"] .shadow-xl{ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important; }
.atelierbyperry-wrapper[data-theme="dark"] .bg-zinc-50{ background-color: var(--soft) !important; }
.atelierbyperry-wrapper[data-theme="dark"] .hover\:bg-zinc-50:hover{ background-color: var(--soft) !important; }
.atelierbyperry-wrapper[data-theme="dark"] .bg-zinc-100{ background-color: var(--soft) !important; }
.atelierbyperry-wrapper[data-theme="dark"] .bg-zinc-900{ background-color: var(--card) !important; }
.atelierbyperry-wrapper[data-theme="dark"] .backdrop-blur{ backdrop-filter: blur(12px) !important; }
.atelierbyperry-wrapper[data-theme="dark"] .rounded-3xl.bg-white{ background-color: var(--card) !important; }
.atelierbyperry-wrapper[data-theme="dark"] .rounded-2xl.bg-white{ background-color: var(--card) !important; }
.atelierbyperry-wrapper[data-theme="dark"] .rounded-xl.bg-white{ background-color: var(--card) !important; }
.atelierbyperry-wrapper[data-theme="dark"] .text-lg, .atelierbyperry-wrapper[data-theme="dark"] .text-xl, .atelierbyperry-wrapper[data-theme="dark"] .text-sm, .atelierbyperry-wrapper[data-theme="dark"] .text-xs, .atelierbyperry-wrapper[data-theme="dark"] h2, .atelierbyperry-wrapper[data-theme="dark"] h3{ color: var(--fg) !important; }
.atelierbyperry-wrapper[data-theme="dark"] .font-bold, .atelierbyperry-wrapper[data-theme="dark"] .font-semibold{ color: var(--fg) !important; }
.atelierbyperry-wrapper[data-theme="dark"] #price{ color: var(--fg) !important; }
.atelierbyperry-wrapper[data-theme="dark"] .bg-black{ background-color: var(--accent) !important; }
.atelierbyperry-wrapper[data-theme="dark"] .text-white{ color: var(--accent-contrast) !important; }
.atelierbyperry-wrapper[data-theme="dark"] .bg-black\/40{ background-color: rgba(0, 0, 0, 0.7) !important; }
.atelierbyperry-wrapper[data-theme="dark"] input::placeholder, .atelierbyperry-wrapper[data-theme="dark"] textarea::placeholder{ color: var(--muted) !important; opacity: 0.7; }
.atelierbyperry-wrapper[data-theme="dark"] input, .atelierbyperry-wrapper[data-theme="dark"] select, .atelierbyperry-wrapper[data-theme="dark"] textarea{ background-color: var(--card) !important; color: var(--fg) !important; border-color: var(--border) !important; }
.atelierbyperry-wrapper[data-theme="dark"] button{ color: var(--fg); }
.atelierbyperry-wrapper[data-theme="dark"] .btn-ghost{ color: var(--fg) !important; }
.atelierbyperry-wrapper[data-theme="dark"] .btn-primary{ background-color: var(--accent) !important; color: var(--accent-contrast) !important; }
.atelierbyperry-wrapper[data-theme="dark"] svg{ color: inherit; opacity: 0.9; }
.atelierbyperry-wrapper[data-theme="dark"] .opacity-70{ opacity: 0.7 !important; }
.atelierbyperry-wrapper[data-theme="dark"] strong{ color: var(--fg) !important; }
.atelierbyperry-wrapper[data-theme="dark"] ul, .atelierbyperry-wrapper[data-theme="dark"] li{ color: var(--fg); }

/* Slider range - fix pour le mode sombre */
.atelierbyperry-wrapper[data-theme="dark"] input[type="range"]{ background: transparent !important; }
.atelierbyperry-wrapper[data-theme="dark"] input[type="range"]::-webkit-slider-runnable-track{ background: var(--range-track) !important; }
.atelierbyperry-wrapper[data-theme="dark"] input[type="range"]::-moz-range-track{ background: var(--range-track) !important; }

/* Position du trou - fix texte actif en mode sombre */
.atelierbyperry-wrapper[data-theme="dark"] .opt-card[data-active="true"]{ background-color: var(--accent) !important; color: var(--accent-contrast) !important; }
.atelierbyperry-wrapper[data-theme="dark"] .opt-card[data-active="true"] *{ color: var(--accent-contrast) !important; }

/* Chip active - fix pour le mode sombre */
.atelierbyperry-wrapper[data-theme="dark"] .chip-active{ background-color: var(--accent) !important; color: var(--accent-contrast) !important; border-color: var(--accent) !important; }


/* Utility classes for animations */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
  20%, 40%, 60%, 80% { transform: translateX(2px); }
}

.atelierbyperry-wrapper .animate-pulse{ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.atelierbyperry-wrapper .animate-shake{ animation: shake 0.5s cubic-bezier(0.4, 0, 0.2, 1); }

/* Loading state */
.atelierbyperry-wrapper .loading{ pointer-events: none; opacity: 0.6; cursor: not-allowed; }
.atelierbyperry-wrapper .loading::after{ content: ''; position: absolute; inset: 0; background: var(--card); opacity: 0.5; border-radius: inherit; }

/* Touch feedback for mobile */
@media (hover: none) and (pointer: coarse) {
  .atelierbyperry-wrapper .opt-card:active, .atelierbyperry-wrapper .chip:active, .atelierbyperry-wrapper .tab-btn:active, .atelierbyperry-wrapper .swatch:active, .atelierbyperry-wrapper .icon-btn:active{
    transform: scale(0.95);
    background: var(--soft);
  }

  .atelierbyperry-wrapper .btn-primary:active{
    transform: scale(0.95);
  }

  /* Larger touch targets on mobile */
  .atelierbyperry-wrapper .opt-card, .atelierbyperry-wrapper .chip, .atelierbyperry-wrapper .tab-btn, .atelierbyperry-wrapper .swatch, .atelierbyperry-wrapper .icon-btn{
    min-height: 44px;
    min-width: 44px;
  }

  /* Pinch-to-zoom hint on viewer */
  .atelierbyperry-wrapper .viewer-box::before{
    content: '👆 Pincer pour zoomer';
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    pointer-events: none;
    opacity: 0;
    animation: hintFade 3s ease-in-out;
    z-index: 10;
  }

  @keyframes hintFade {
    0%, 100% { opacity: 0; }
    10%, 80% { opacity: 1; }
  }
}

/* Progress bar animations */
.atelierbyperry-wrapper #configProgress{
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
}

/* Success feedback when 100% complete */
@keyframes successPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}

.atelierbyperry-wrapper .progress-complete{
  animation: successPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Toast notifications */
.atelierbyperry-wrapper .toast-container{
  position: fixed;
  bottom: 5rem;
  right: 1rem;
  z-index: 100;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
  pointer-events: none;
}

.atelierbyperry-wrapper .toast{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 280px;
  max-width: 380px;
  pointer-events: auto;
  animation: toastSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.atelierbyperry-wrapper .toast.toast-success{ border-left: 3px solid #10b981; }
.atelierbyperry-wrapper .toast.toast-info{ border-left: 3px solid #3b82f6; }
.atelierbyperry-wrapper .toast.toast-warning{ border-left: 3px solid #f59e0b; }
.atelierbyperry-wrapper .toast.toast-error{ border-left: 3px solid #ef4444; }

.atelierbyperry-wrapper .toast-icon{ flex-shrink: 0; width: 1.25rem; height: 1.25rem; }
.atelierbyperry-wrapper .toast-success .toast-icon{ color: #10b981; }
.atelierbyperry-wrapper .toast-info .toast-icon{ color: #3b82f6; }
.atelierbyperry-wrapper .toast-warning .toast-icon{ color: #f59e0b; }
.atelierbyperry-wrapper .toast-error .toast-icon{ color: #ef4444; }

.atelierbyperry-wrapper .toast-message{ flex: 1; font-size: 0.875rem; color: var(--fg); }
.atelierbyperry-wrapper .toast-close{
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.atelierbyperry-wrapper .toast-close:hover{ opacity: 1; }

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toastSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.atelierbyperry-wrapper .toast.toast-exit{
  animation: toastSlideOut 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* ── Barre de chargement du viewer 3D ─────────────────────────────────────
   #loader_spiner est l'overlay (affiché/masqué par window.viewerLoader et par
   le moteur médaillon). Couvre #threeD ; barre indéterminée par défaut,
   déterminée quand .determinate est posé (progression GLB). */
.atelierbyperry-wrapper #threeD{ position: relative; }
.atelierbyperry-wrapper #loader_spiner{
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(250, 249, 247, 0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.atelierbyperry-wrapper[data-theme="dark"] #loader_spiner{ background: rgba(10, 10, 12, 0.62); }
.atelierbyperry-wrapper .viewer-loader{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(260px, 64%);
  text-align: center;
}
.atelierbyperry-wrapper .viewer-loader-label{
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg, #1c1b1a);
  opacity: 0.75;
  margin-bottom: 12px;
}
.atelierbyperry-wrapper .viewer-loader-track{
  height: 3px;
  border-radius: 2px;
  background: rgba(128, 128, 128, 0.22);
  overflow: hidden;
}
.atelierbyperry-wrapper .viewer-loader-fill{
  height: 100%;
  width: 40%;
  border-radius: 2px;
  background: var(--accent, #c9a878);
}
/* Indéterminé : segment qui glisse en boucle. */
.atelierbyperry-wrapper #loader_spiner:not(.determinate) .viewer-loader-fill{
  width: 38%;
  animation: viewerLoaderSlide 1.15s ease-in-out infinite;
}
@keyframes viewerLoaderSlide {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(320%); }
}
/* Déterminé : largeur = progression, transition douce. */
.atelierbyperry-wrapper #loader_spiner.determinate .viewer-loader-fill{
  animation: none;
  transform: none;
  transition: width 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .atelierbyperry-wrapper #loader_spiner:not(.determinate) .viewer-loader-fill{ animation-duration: 2.4s; }
}

/* --- Guide des longueurs de collier ------------------------------- */
.atelierbyperry-wrapper .length-guide-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.atelierbyperry-wrapper .length-guide-fig{
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.75rem;
  background: var(--soft);
}
.atelierbyperry-wrapper .length-guide-svg{
  width: 100%;
  max-width: 220px;
  height: auto;
  color: var(--fg);
}
.atelierbyperry-wrapper .length-guide-arcs path{
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0.85;
}
.atelierbyperry-wrapper .length-guide-arcs text{
  fill: var(--accent);
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
}
.atelierbyperry-wrapper .length-guide-cap{
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fg);
}
.atelierbyperry-wrapper .length-guide-legend{
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.atelierbyperry-wrapper .length-guide-legend li{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
.atelierbyperry-wrapper .length-guide-legend strong{
  color: var(--fg);
}
.atelierbyperry-wrapper .length-guide-dot{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 0.6875rem;
  font-weight: 700;
}
@media (max-width: 480px) {
  .atelierbyperry-wrapper .length-guide-grid{ grid-template-columns: 1fr; }
}

/* Guide des tailles (bracelet / bague) — réutilise length-guide-* */
.atelierbyperry-wrapper .size-guide-fig{
  margin: 0 auto;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.75rem;
}
.atelierbyperry-wrapper .size-guide-loop{
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.4;
  stroke-linecap: round;
}
.atelierbyperry-wrapper .size-guide-loop-back{
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 4 6;
  opacity: 0.5;
}
.atelierbyperry-wrapper .size-guide-note{
  margin: 0.9rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
}