/* =====================================================================
   MOTION — SYSTÈME VISUEL BOUTIQUE (un seul pour tout le site)
   Utilisé par : Boutique, Homme, Femme, Collections (Lotus, Stardust),
   pages produit, et toute future collection.
   Les collections ne changent que des VARIABLES (thème), jamais les composants.
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* couleurs */
  --m-ink:#1a1a18;
  --m-mist:#6E6E6B;
  --m-faint:#9A9A9A;
  --m-line:rgba(26,26,24,0.14);
  --m-paper:#FBF8F4;

  /* typographie */
  --m-serif:'Cormorant Garamond',serif;
  --m-sans:'Montserrat',sans-serif;

  /* échelle d'espacement (unique) */
  --m-sp-1:6px;
  --m-sp-2:12px;
  --m-sp-3:18px;
  --m-sp-4:24px;
  --m-sp-5:32px;
  --m-sp-6:44px;
  --m-sp-7:70px;

  /* espacements sémantiques de la fiche produit */
  --m-gap-label-title:var(--m-sp-4);   /* label collection → titre */
  --m-gap-title-price:var(--m-sp-2);   /* titre → prix */
  --m-gap-price-desc:var(--m-sp-4);    /* prix → description */
  --m-gap-desc-options:var(--m-sp-5);  /* description → options */
  --m-gap-optlabel-choices:var(--m-sp-2); /* label d'option → boutons */
  --m-gap-option-option:var(--m-sp-4); /* groupe d'options → suivant */
  --m-gap-options-cta:var(--m-sp-5);   /* options → bouton principal */
  --m-gap-cta-cta:var(--m-sp-2);       /* bouton → bouton */
  --m-gap-cta-details:var(--m-sp-5);   /* bouton → détails */

  /* dimensions des composants */
  --m-info-max:420px;     /* colonne d'infos */
  --m-cta-max:330px;      /* boutons principaux */
  --m-cta-h:52px;
  --m-chip-h:40px;
  --m-chip-min:46px;
  --m-swatch:34px;
  --m-media-ratio:4/5;    /* ratio unique des images produit */
  --m-media-pad:4%;       /* espace autour du produit dans son cadre */

  /* thème par défaut (surchargé par .theme-*) */
  --m-glow:rgba(200,204,214,0.55);
  --m-accent:#A3A8B4;
  --m-bullet:circle(50%);
}

/* ---------- 2. THÈMES DE COLLECTION (variables seulement) ---------- */
.theme-lotus{
  --m-glow:rgba(235,198,204,0.55);
  --m-accent:#EBC6CC;
  --m-bullet:circle(50%);
}
.theme-stardust{
  --m-glow:rgba(200,204,214,0.6);
  --m-accent:#A3A8B4;
  --m-bullet:circle(50%);
}

/* ---------- 3. TYPOGRAPHIE (styles réutilisables) ---------- */
.m-kicker{font-family:var(--m-sans);font-size:9px;font-weight:300;letter-spacing:0.34em;text-transform:uppercase;color:var(--m-faint);}
.m-tag{display:inline-block;font-family:var(--m-sans);font-size:8px;font-weight:300;letter-spacing:0.28em;text-transform:uppercase;color:var(--m-mist);border:1px solid var(--m-line);border-radius:20px;padding:5px 12px;line-height:1.4;}
.m-title{font-family:var(--m-serif);font-weight:300;font-size:46px;line-height:1;letter-spacing:0.005em;color:var(--m-ink);}
.m-price{font-family:var(--m-sans);font-size:11px;font-weight:300;letter-spacing:0.2em;color:var(--m-mist);}
.m-desc{font-family:var(--m-sans);font-size:11.5px;font-weight:300;line-height:1.95;letter-spacing:0.01em;color:var(--m-mist);max-width:var(--m-info-max);}
.m-option-label{font-family:var(--m-sans);font-size:8px;font-weight:300;letter-spacing:0.28em;text-transform:uppercase;color:var(--m-mist);display:flex;justify-content:space-between;gap:var(--m-sp-3);max-width:var(--m-cta-max);}
.m-option-value{font-style:normal;color:var(--m-ink);}
.m-note{font-family:var(--m-sans);font-size:9px;font-weight:300;letter-spacing:0.08em;line-height:1.7;color:var(--m-mist);}
.m-link{display:inline-block;font-family:var(--m-sans);font-size:9px;font-weight:300;letter-spacing:0.28em;text-transform:uppercase;color:var(--m-ink);text-decoration:none;border-bottom:1px solid var(--m-line);padding-bottom:5px;transition:border-color 0.3s;cursor:none;}
.m-link:hover{border-color:var(--m-ink);}

/* ---------- 4. BOUTON (système unique) ---------- */
.m-btn{display:flex;align-items:center;justify-content:center;width:100%;max-width:var(--m-cta-max);height:var(--m-cta-h);padding:0 20px;
  font-family:var(--m-sans);font-size:9px;font-weight:400;letter-spacing:0.28em;text-transform:uppercase;text-align:center;text-decoration:none;
  border:1px solid var(--m-ink);border-radius:0;background:var(--m-ink);color:var(--m-paper);
  transition:background 0.3s ease,color 0.3s ease,border-color 0.3s ease,opacity 0.3s ease;cursor:none;}
.m-btn:hover{background:transparent;color:var(--m-ink);}
.m-btn--ghost{background:transparent;color:var(--m-ink);}
.m-btn--ghost:hover{background:var(--m-ink);color:var(--m-paper);}
.m-btn:disabled,.m-btn.is-disabled{background:transparent;color:var(--m-faint);border-color:var(--m-line);pointer-events:none;}
.m-btn + .m-btn{margin-top:var(--m-gap-cta-cta);}

/* ---------- 5. OPTIONS (taille, coupe, vue, couleur…) ---------- */
.m-options{margin-top:var(--m-gap-desc-options);}
.m-option + .m-option{margin-top:var(--m-gap-option-option);}
.m-choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--m-gap-optlabel-choices);}

/* bouton d'option texte — TAILLES, COUPE, VUE : un seul composant */
.m-chip{min-width:var(--m-chip-min);height:var(--m-chip-h);padding:0 14px;border:1px solid var(--m-line);border-radius:0;background:transparent;
  font-family:var(--m-sans);font-size:9px;font-weight:400;letter-spacing:0.2em;text-transform:uppercase;color:var(--m-ink);
  transition:background 0.25s ease,color 0.25s ease,border-color 0.25s ease;cursor:none;}
.m-chip:hover{border-color:var(--m-ink);}
.m-chip.is-selected{background:var(--m-ink);border-color:var(--m-ink);color:var(--m-paper);}
.m-chip.is-unavailable,.m-chip:disabled{color:var(--m-faint);border-color:var(--m-line);background:transparent;pointer-events:none;
  background-image:linear-gradient(to top right,transparent calc(50% - 0.5px),var(--m-line) calc(50% - 0.5px),var(--m-line) calc(50% + 0.5px),transparent calc(50% + 0.5px));}

/* pastille de couleur */
.m-swatch{width:var(--m-swatch);height:var(--m-swatch);padding:4px;border-radius:50%;border:1px solid var(--m-line);background:transparent;transition:border-color 0.25s ease;cursor:none;}
.m-swatch span{display:block;width:100%;height:100%;border-radius:50%;}
.m-swatch:hover{border-color:var(--m-mist);}
.m-swatch.is-selected{border-color:var(--m-ink);}
.m-swatch.is-unavailable,.m-swatch:disabled{opacity:0.35;pointer-events:none;}
.m-choices--swatches{gap:14px;}

/* ---------- 6. DÉTAILS PRODUIT ---------- */
.m-details{list-style:none;margin-top:var(--m-gap-cta-details);border-top:1px solid var(--m-line);max-width:var(--m-info-max);}
.m-details li{font-family:var(--m-sans);font-size:10px;font-weight:300;letter-spacing:0.08em;color:var(--m-mist);padding:13px 0;border-bottom:1px solid var(--m-line);display:flex;gap:12px;align-items:center;}
.m-details li::before{content:'';width:6px;height:6px;flex-shrink:0;background:var(--m-accent);clip-path:var(--m-bullet);transition:background 0.6s ease;}
.m-details + .m-note{margin-top:var(--m-sp-3);}

/* ---------- 7. MÉDIA PRODUIT (cadre unique) ---------- */
.m-media{position:relative;aspect-ratio:var(--m-media-ratio);width:100%;}
.m-media::before{content:'';position:absolute;inset:10% 8%;border-radius:50%;background:radial-gradient(closest-side,var(--m-glow),transparent);filter:blur(28px);transition:background 0.8s ease;pointer-events:none;}
.m-media img{position:absolute;inset:var(--m-media-pad);width:calc(100% - 2 * var(--m-media-pad));height:calc(100% - 2 * var(--m-media-pad));
  object-fit:contain;object-position:center;transform:scale(var(--m-media-scale,1));
  transition:opacity 0.7s ease,transform 0.9s cubic-bezier(0.16,1,0.3,1);}
.m-media img.is-hidden{opacity:0;transform:scale(calc(var(--m-media-scale,1) * 0.97));}
.m-media canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;}

/* ---------- 8. FICHE PRODUIT (ProductPage) ---------- */
.m-product{max-width:1120px;margin:0 auto;padding:var(--m-sp-7) 32px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--m-sp-7);align-items:center;}
.m-product + .m-product{border-top:1px solid var(--m-line);}
.m-gallery{width:100%;max-width:520px;justify-self:center;}
.m-info{max-width:var(--m-info-max);}
.m-info .m-title{margin-top:var(--m-gap-label-title);}
.m-info .m-price{margin-top:var(--m-gap-title-price);}
.m-info .m-desc{margin-top:var(--m-gap-price-desc);}
.m-actions{margin-top:var(--m-gap-options-cta);}
.m-desc + .m-actions{margin-top:var(--m-gap-desc-options);}

/* ---------- 9. EN-TÊTE DE COLLECTION + GRILLE + CARTE ---------- */
.m-shop{max-width:1180px;margin:0 auto;padding:130px 32px 100px;}
.m-collection + .m-collection{margin-top:var(--m-sp-7);padding-top:var(--m-sp-7);border-top:1px solid var(--m-line);}
.m-collection-head{text-align:center;margin-bottom:var(--m-sp-6);}
.m-collection-title{font-family:var(--m-serif);font-weight:300;font-size:40px;line-height:1.1;letter-spacing:0.02em;color:var(--m-ink);margin-top:var(--m-sp-2);}
.m-collection-head .m-link{margin-top:var(--m-sp-3);}

.m-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,340px));justify-content:center;gap:var(--m-sp-5) var(--m-sp-4);}
.m-card{display:block;text-decoration:none;color:inherit;cursor:none;}
.m-card .m-media img.m-alt{opacity:0;}
.m-card:hover .m-media img.m-alt{opacity:1;}
.m-card:hover .m-media img.m-main.has-alt{opacity:0;}
.m-card:hover .m-media img{transform:scale(calc(var(--m-media-scale,1) * 1.03));}
.m-card-badge{position:absolute;top:12px;left:12px;z-index:3;background:rgba(251,248,244,0.75);}
.m-card-meta{text-align:center;padding-top:var(--m-sp-2);}
.m-card-name{font-family:var(--m-serif);font-weight:300;font-size:24px;line-height:1.15;color:var(--m-ink);}
.m-card-meta .m-price{margin-top:var(--m-sp-1);font-size:10px;}

/* ---------- 10. FORMULAIRE « ME PRÉVENIR » ---------- */
.m-notify{max-width:560px;margin:0 auto;padding:var(--m-sp-6) 24px 100px;text-align:center;}
.m-notify-title{font-family:var(--m-serif);font-weight:300;font-size:clamp(28px,4vw,40px);line-height:1.15;}
.m-notify .m-desc{margin:var(--m-sp-2) auto 0;}
.m-notify-form{display:flex;max-width:var(--m-info-max);margin:var(--m-sp-4) auto 0;border:1px solid var(--m-ink);}
.m-notify-form input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--m-ink);font-family:var(--m-sans);font-size:11px;letter-spacing:0.05em;padding:0 16px;height:var(--m-cta-h);}
.m-notify-form input::placeholder{color:var(--m-faint);}
.m-notify-form .m-btn{width:auto;max-width:none;border:none;}
.m-notify-msg{margin-top:var(--m-sp-3);min-height:16px;}

/* ---------- 11. RESPONSIVE ---------- */
/* Tablette / iPad / petit laptop */
@media (max-width:1024px){
  .m-product{gap:var(--m-sp-6);padding:var(--m-sp-6) 28px;}
  .m-title{font-size:40px;}
  .m-shop{padding:110px 24px 90px;}
}
/* Tablette portrait + téléphone : empilement image → infos → options → bouton → détails */
@media (max-width:860px){
  .m-product{grid-template-columns:1fr;gap:var(--m-sp-5);padding:var(--m-sp-6) 22px;}
  .m-gallery{max-width:440px;}
  .m-info{max-width:none;text-align:center;}
  .m-desc,.m-details,.m-btn,.m-option-label{margin-left:auto;margin-right:auto;}
  .m-choices{justify-content:center;}
  .m-option-label{justify-content:center;}
  .m-details li{justify-content:center;}
  .m-title{font-size:38px;}
  .m-collection-title{font-size:32px;}
  .m-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--m-sp-4) var(--m-sp-2);}
}
@media (max-width:520px){
  .m-shop{padding:96px 14px 70px;}
  .m-product{padding:var(--m-sp-5) 18px;}
  .m-title{font-size:34px;}
  .m-card-name{font-size:19px;}
  .m-collection-title{font-size:28px;}
  .m-card-badge{top:8px;left:8px;padding:4px 9px;font-size:7px;}
}
@media (prefers-reduced-motion:reduce){
  .m-media img,.m-media::before,.m-details li::before{transition:none;}
}