/*
Theme Name: Miratti
Theme URI: https://mirattibags.com
Author: Maison Miratti
Description: Thème bloc sur mesure de la Maison Miratti. La charte « Tadelakt » vit dans theme.json ; ce fichier ne porte que les finitions que les jetons ne savent pas dire.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.1
License: Proprietary
Text Domain: miratti
*/

/* ── Étiquettes de la Maison ───────────────────────────────── */
.m-etiquette{
  font-weight:500;font-size:.75rem;letter-spacing:.18em;
  text-transform:uppercase;
}
.m-nav{
  font-weight:500;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;
}
.m-nav a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.m-nav a:hover{border-color:var(--wp--preset--color--or-profond)}

/* ── Le bouton filet or (héros, rendez-vous) ───────────────── */
.m-bouton-or a{
  background:transparent !important;
  border:1px solid var(--wp--preset--color--or) !important;
  color:var(--wp--preset--color--or) !important;
  transition:background .25s,color .25s;
}
.m-bouton-or a:hover{
  background:var(--wp--preset--color--or) !important;
  color:var(--wp--preset--color--dossier) !important;
}

/* ── Les actions d'achat prennent le zellige au survol ─────── */
.wp-block-button:not(.m-bouton-or) a:hover,
.wc-block-components-button:hover{
  background:var(--wp--preset--color--zellige) !important;
  border-color:var(--wp--preset--color--zellige) !important;
}

/* ── Prix : chiffres tabulaires, toujours ──────────────────── */
.m-prix,.woocommerce-Price-amount{
  font-variant-numeric:tabular-nums;
  font-weight:500;letter-spacing:.04em;
  color:var(--wp--preset--color--or-profond);
}

/* ── L'étoile : rotation lente en état de chargement ───────── */
.m-etoile svg{width:15px;height:15px;color:var(--wp--preset--color--or)}
.m-etoile--chargement svg{animation:m-tour 8s linear infinite}
@keyframes m-tour{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.m-etoile--chargement svg{animation:none}}

/* ── Packshots détourés : jamais d'étirement ───────────────── */
.m-packshot img{object-fit:contain;mix-blend-mode:multiply}

/* ── Planche II : la grille de la collection ───────────────── */
.m-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;
  background:color-mix(in srgb,var(--wp--preset--color--tannage) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--wp--preset--color--tannage) 12%,transparent)}
.m-carte{position:relative;display:flex;flex-direction:column;background:var(--wp--preset--color--chaux);
  text-decoration:none;color:inherit;padding-bottom:1.3rem;transition:background .3s}
.m-carte-lien{position:absolute;inset:0;z-index:1}
.m-carte:hover{background:var(--wp--preset--color--craie)}
.m-carte-visuel{background:var(--wp--preset--color--craie);padding:1.2rem;display:flex;justify-content:center}
.m-carte-visuel img{height:220px;width:auto;object-fit:contain;transition:transform .6s ease}
.m-carte:hover .m-carte-visuel img{transform:scale(1.05)}
@media (prefers-reduced-motion: reduce){.m-carte:hover .m-carte-visuel img{transform:none}}
.m-carte-infos{display:flex;flex-direction:column;gap:.3rem;padding:1rem 1.3rem 0}
.m-fam{color:var(--wp--preset--color--terre);font-size:.62rem}
.m-carte-nom{font-family:var(--wp--preset--font-family--display);font-weight:500;font-size:1.35rem;
  color:var(--wp--preset--color--tannage)}
.m-coloris{display:flex;gap:.42rem;align-items:center;padding:.5rem 0 .8rem}
.m-coloris i{width:13px;height:13px;border-radius:50%;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--wp--preset--color--tannage) 25%,transparent)}
.m-coloris span{font-size:.7rem;color:var(--wp--preset--color--terre)}
.m-achat{margin-top:auto;padding:.7rem 0;text-align:center;font-weight:500;font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;transition:all .25s}
.m-achat--direct{background:var(--wp--preset--color--tannage);color:var(--wp--preset--color--craie);
  border:1px solid var(--wp--preset--color--tannage)}
.m-carte:hover .m-achat--direct{background:var(--wp--preset--color--zellige);border-color:var(--wp--preset--color--zellige)}
.m-achat--rdv{background:transparent;color:var(--wp--preset--color--tannage);
  border:1px solid color-mix(in srgb,var(--wp--preset--color--tannage) 40%,transparent)}
.m-carte:hover .m-achat--rdv{border-color:var(--wp--preset--color--or-profond);color:var(--wp--preset--color--or-profond)}

/* ── Planche III : la fiche ────────────────────────────────── */
/* La galerie et les pastilles sont habillées par miratti-core :
   le mécanisme doit tourner aussi sur le thème hérité de la production. */
.single-product div.product .product_title{font-family:var(--wp--preset--font-family--display);
  font-weight:500;font-size:clamp(1.9rem,3vw,2.6rem);color:var(--wp--preset--color--tannage)}
.single-product div.product p.price{font-size:1.35rem}
.m-ctas{display:flex;gap:.7rem;flex-wrap:wrap;margin:1rem 0}
.m-cta{flex:1;min-width:170px;padding:.9rem 1rem;text-align:center;font-weight:500;font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:all .25s}
.m-cta--plein{background:var(--wp--preset--color--tannage);color:var(--wp--preset--color--craie);
  border:1px solid var(--wp--preset--color--tannage)}
.m-cta--plein:hover{background:var(--wp--preset--color--or-profond);border-color:var(--wp--preset--color--or-profond);
  color:var(--wp--preset--color--craie)}
.m-cta--ligne{background:transparent;color:var(--wp--preset--color--tannage);
  border:1px solid color-mix(in srgb,var(--wp--preset--color--tannage) 40%,transparent)}
.m-cta--ligne:hover{border-color:var(--wp--preset--color--zellige);color:var(--wp--preset--color--zellige)}
.m-revers{display:flex;align-items:center;gap:.5rem;font-family:var(--wp--preset--font-family--display);
  font-style:italic;color:var(--wp--preset--color--terre);font-size:.95rem}

/* ── Contact Advisor ───────────────────────────────────────── */
.m-form{display:flex;flex-direction:column;gap:1.1rem;max-width:520px}
.m-form label{display:flex;flex-direction:column;gap:.35rem;font-weight:500;font-size:.75rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--wp--preset--color--terre)}
.m-form input,.m-form select,.m-form textarea{
  font-family:var(--wp--preset--font-family--maison);font-size:1rem;padding:.8rem .9rem;
  border:1px solid color-mix(in srgb,var(--wp--preset--color--tannage) 30%,transparent);
  background:var(--wp--preset--color--craie);color:var(--wp--preset--color--tannage)}
.m-form input:focus,.m-form select:focus,.m-form textarea:focus{
  outline:none;border-color:var(--wp--preset--color--or-profond)}
.m-form button{cursor:pointer;border:none}
.m-form-wa{font-size:.9rem;color:var(--wp--preset--color--terre)}
.m-form-wa a{color:var(--wp--preset--color--zellige);font-weight:500}
.m-form-merci{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem;
  border:1px solid var(--wp--preset--color--or);padding:1.6rem;max-width:520px}

/* ── Le porté — la collection dans la rue ─────────────────── */
.m-porte{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.m-porte figure{margin:0;aspect-ratio:4/5;overflow:hidden}
.m-porte img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}
.m-porte figure:hover img{transform:scale(1.04)}
@media (max-width:781px){.m-porte{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion: reduce){.m-porte figure:hover img{transform:none}}

/* ── La Maison — l'atelier en quatre temps ────────────────── */
.m-atelier{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
  max-width:1180px;margin:2.6rem auto 0;padding:0 clamp(16px,4vw,32px)}
.m-atelier figure{margin:0;aspect-ratio:4/3;overflow:hidden}
.m-atelier img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.92);transition:filter .4s ease}
.m-atelier figure:hover img{filter:saturate(1.05)}
@media (max-width:781px){.m-atelier{grid-template-columns:repeat(2,1fr)}}

/* Le porté et la Maison forment un seul passage sombre : pas d'interstice. */
#le-porte{margin-bottom:0}
#la-maison{margin-top:0}

/* Prix sur demande : la place du prix, le ton de la Maison. */
.m-prix--demande{font-family:var(--wp--preset--font-family--display);font-style:italic;
  font-variant-numeric:normal;letter-spacing:.02em}