/* ============================================================
   M&K — Composants
   ============================================================ */

/* --- Logo ------------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.02em;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1.32rem;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--noir);
  text-decoration: none;
  white-space: nowrap;
}
.logo__amp {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.24em;
  line-height: 0;
  color: inherit;   /* monochrome : l'esperluette suit la couleur du logo */
  padding-inline: 0.04em;
  transform: translateY(0.02em);
}
.logo--grand { font-size: clamp(2.4rem, 7vw, 4.2rem); }
.fond-noir .logo, .entete--sur-hero:not(.entete--pose) .logo { color: var(--sur-noir); }
.fond-noir .logo__amp,
.entete--sur-hero:not(.entete--pose) .logo__amp { color: inherit; }

/* --- En-tête ---------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: var(--z-entete);
  background: var(--papier);
  border-bottom: 1px solid var(--trait);
  transition:
    background var(--d-moyen) var(--doux),
    border-color var(--d-moyen) var(--doux),
    color var(--d-moyen) var(--doux);
}
.entete--sur-hero {
  background: transparent;
  border-bottom-color: transparent;
  color: var(--sur-noir);
}
.entete--sur-hero.entete--pose {
  background: var(--papier);
  border-bottom-color: var(--trait);
  color: var(--graphite);
}
.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  min-height: var(--hauteur-entete);
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav a {
  position: relative;
  font-size: var(--t-petit);
  letter-spacing: var(--chasse-nav);
  text-decoration: none;
  padding-block: 0.6rem;
  color: inherit;
  opacity: 0.82;
  transition: opacity var(--d-court) var(--doux);
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0.25rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-moyen) var(--sortie);
}
.nav a:hover { opacity: 1; }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
.nav a[aria-current='page'] { opacity: 1; }
.nav a[aria-current='page']::after { transform: scaleX(1); }

/* La navigation est poussée à droite : elle rejoint les icônes,
   et le logo garde le coin gauche à lui seul. */
.entete__nav { margin-left: auto; }
.entete__actions { display: flex; align-items: center; gap: var(--e-2); }

.icone-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 44px;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
  position: relative;
  transition: opacity var(--d-court) var(--doux);
}
.icone-bouton:hover { opacity: 0.6; }
.icone { width: 20px; height: 20px; display: block; }

.pastille {
  position: absolute;
  top: 4px; right: 2px;
  min-width: 17px; height: 17px;
  padding-inline: 4px;
  display: grid;
  place-items: center;
  background: var(--oxblood);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pastille--pulse { animation: pastille 460ms var(--sortie); }
@keyframes pastille {
  0% { transform: scale(0.5); }
  55% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

.entete__menu { display: none; }
@media (max-width: 899px) {
  .entete__nav { display: none; }
  .entete__menu { display: inline-flex; }
}

/* --- Menu mobile ------------------------------------------------ */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  transition: opacity var(--d-moyen) var(--doux);
}
.menu--ouvert { opacity: 1; }
.menu__panneau {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(88vw, 420px);
  background: var(--noir);
  color: var(--sur-noir);
  /* La marge basse tient compte de la barre d'accueil de l'iPhone :
     sans elle, le dernier lien du menu passe dessous et devient
     impossible à toucher. */
  padding: var(--e-5) var(--e-6) calc(var(--e-8) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--e-6);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--d-moyen) var(--sortie);
  box-shadow: var(--ombre-couche);
}
.menu--ouvert .menu__panneau { transform: none; }
.menu__tete { display: flex; align-items: center; justify-content: space-between; }
.menu__liens { display: flex; flex-direction: column; }
.menu__liens a {
  font-family: var(--serif);
  font-size: 1.9rem;
  line-height: 1.25;
  letter-spacing: var(--chasse-titre);
  color: var(--sur-noir);
  text-decoration: none;
  padding-block: var(--e-3);
  border-bottom: 1px solid var(--trait-noir);
  transition: padding-left var(--d-moyen) var(--sortie);
}
.menu__liens a:hover { padding-left: var(--e-3); }
.menu__pied { margin-top: auto; color: var(--sur-noir-doux); font-size: var(--t-petit); }

/* --- Boutons ---------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 48px;
  padding: 0.85rem 1.9rem;
  background: var(--noir);
  color: var(--papier);
  border: 1px solid var(--noir);
  font-size: var(--t-petit);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--d-moyen) var(--doux),
    color var(--d-moyen) var(--doux),
    border-color var(--d-moyen) var(--doux);
}
.bouton:hover { background: transparent; color: var(--noir); }
.bouton:active { transform: translateY(1px); }
.bouton[disabled], .bouton[aria-disabled='true'] {
  background: var(--trait);
  border-color: var(--trait);
  color: var(--gris);
  cursor: not-allowed;
  pointer-events: none;
}
.bouton[aria-busy='true'] { color: transparent; position: relative; }
.bouton[aria-busy='true']::after {
  content: '';
  position: absolute;
  width: 15px; height: 15px;
  border: 1.5px solid rgba(244, 243, 240, 0.35);
  border-top-color: var(--papier);
  border-radius: 50%;
  animation: rotation 640ms linear infinite;
}
@keyframes rotation { to { transform: rotate(360deg); } }

.bouton--clair { background: var(--papier); color: var(--noir); border-color: var(--papier); }
.bouton--clair:hover { background: transparent; color: var(--papier); }
.bouton--ligne { background: transparent; color: var(--noir); border-color: var(--trait-fort); }
.bouton--ligne:hover { background: var(--noir); color: var(--papier); border-color: var(--noir); }
.bouton--large { width: 100%; }

/* --- Filet structurel ------------------------------------------- */
.couture-verticale { border-left: 1px solid var(--trait); padding-left: var(--e-5); }

/* --- Article (vignette produit) ---------------------------------
   Pas de carte : une image, trois lignes, rien autour.          */
.grille-produits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: var(--e-6) var(--e-5);
}
@media (min-width: 1200px) {
  .grille-produits { gap: var(--e-8) var(--e-5); }
}

.article { position: relative; }
.article__visuel {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--fond-image);
  margin-bottom: var(--e-3);
}
.article__image {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  transition: opacity var(--d-moyen) var(--doux), transform var(--d-long) var(--sortie);
}
/* La bascule au survol n'a lieu que s'il existe une seconde vue.
   Sans ce garde-fou, une pièce à une seule image disparaîtrait au survol. */
.article__image--second { opacity: 0; }
.article__visuel--bascule:hover .article__image--premier,
.article:focus-within .article__visuel--bascule .article__image--premier { opacity: 0; }
.article__visuel--bascule:hover .article__image--second,
.article:focus-within .article__visuel--bascule .article__image--second { opacity: 1; transform: scale(1.03); }

.article__lien { text-decoration: none; color: inherit; }
.article__lien::after { content: ''; position: absolute; inset: 0; }
.article__nom { font-size: 0.95rem; font-weight: 500; color: var(--noir); line-height: 1.35; }
.article__matiere { font-size: var(--t-petit); color: var(--gris); }
.article__prix { font-size: 0.95rem; margin-top: var(--e-1); }

.etiquette {
  position: absolute;
  top: var(--e-3); left: var(--e-3);
  z-index: 1;
  padding: 0.28rem 0.55rem;
  background: var(--papier);
  color: var(--noir);
  border: 1px solid var(--noir);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1;
}

/* --- Champs de formulaire --------------------------------------- */
.champ { display: flex; flex-direction: column; gap: 0.4rem; }
.champ label { font-size: var(--t-petit); font-weight: 500; color: var(--noir); }
.champ input, .champ textarea, .champ select {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  background: transparent;
  border: 1px solid var(--trait-fort);
  color: var(--graphite);
  transition: border-color var(--d-court) var(--doux);
}
.champ textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.champ input::placeholder, .champ textarea::placeholder { color: var(--gris); }
.champ input:hover, .champ textarea:hover { border-color: var(--gris); }
.champ input:focus, .champ textarea:focus, .champ select:focus { border-color: var(--noir); }
.champ--fautif input, .champ--fautif textarea { border-color: var(--erreur); }
.erreur { font-size: var(--t-mini); color: var(--erreur); min-height: 1.1em; }
.champ__aide { font-size: var(--t-mini); color: var(--gris); }

.retour { font-size: var(--t-petit); min-height: 1.3em; }
.retour--succes { color: var(--succes); }
.fond-noir .retour--succes { color: #8FC59D; }

.fond-noir .champ label { color: var(--sur-noir); }
.fond-noir .champ input, .fond-noir .champ textarea {
  border-color: #4A4741; color: var(--sur-noir);
}
.fond-noir .champ input::placeholder { color: var(--sur-noir-doux); }
.fond-noir .champ input:focus { border-color: var(--papier); }

/* --- Pastilles de choix (taille, couleur) ------------------------ */
.choix { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.choix__option {
  position: relative;
  min-width: 52px;
  min-height: 44px;
  padding: 0.55rem 0.8rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--trait-fort);
  background: transparent;
  font-size: var(--t-petit);
  font-weight: 500;
  color: var(--graphite);
  cursor: pointer;
  transition: border-color var(--d-court) var(--doux), color var(--d-court) var(--doux);
}
.choix__option:hover:not([disabled]) { border-color: var(--noir); color: var(--noir); }
.choix__option[aria-pressed='true'] {
  border-color: var(--noir);
  background: var(--noir);
  color: var(--papier);
}
.choix__option[disabled] {
  color: var(--gris);   /* la taille reste lisible ; la barre oblique dit qu'elle est épuisée */
  border-color: var(--trait);
  cursor: not-allowed;
}
/* Barre oblique : la taille existe mais n'est pas disponible. */
.choix__option[disabled]::after {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(to top right,
    transparent calc(50% - 0.5px), var(--trait) calc(50% - 0.5px),
    var(--trait) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

.choix--couleurs .choix__option { min-width: 44px; padding: 0.4rem; gap: 0.5rem; }
.pastille-couleur {
  width: 22px; height: 22px;
  border: 1px solid rgba(0, 0, 0, 0.22);
  display: block;
}

/* --- Quantité ---------------------------------------------------- */
.qte { display: inline-flex; align-items: center; border: 1px solid var(--trait-fort); }
.qte button {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  color: var(--graphite);
  transition: background var(--d-court) var(--doux);
}
.qte button:hover:not([disabled]) { background: var(--papier-2); color: var(--noir); }
.qte button[disabled] { color: var(--trait-fort); cursor: not-allowed; }
.qte-valeur {
  min-width: 40px;
  text-align: center;
  font-size: var(--t-petit);
  font-weight: 500;
  color: var(--noir);
}

/* --- Divulgation (guide des tailles, livraison) ------------------ */
.volet { border-top: 1px solid var(--trait); }
.volet:last-of-type { border-bottom: 1px solid var(--trait); }
.volet summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-4) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--t-petit);
  font-weight: 500;
  color: var(--noir);
  min-height: 48px;
}
.volet summary::-webkit-details-marker { display: none; }
.volet__signe { position: relative; width: 12px; height: 12px; flex: none; }
.volet__signe::before, .volet__signe::after {
  content: '';
  position: absolute;
  background: var(--noir);
  transition: transform var(--d-moyen) var(--sortie);
}
.volet__signe::before { inset: 5.5px 0 5.5px 0; height: 1px; }
.volet__signe::after { inset: 0 5.5px 0 5.5px; width: 1px; }
.volet[open] .volet__signe::after { transform: scaleY(0); }
.volet__corps { padding-bottom: var(--e-5); font-size: var(--t-petit); color: var(--graphite); }
.volet__corps p + p { margin-top: var(--e-3); }

/* --- Tableau (guide des tailles, panier) ------------------------- */
.tableau { font-size: var(--t-petit); }
.tableau th, .tableau td {
  padding: 0.62rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--trait);
}
.tableau th { font-weight: 500; color: var(--noir); }
.tableau tbody tr:last-child th, .tableau tbody tr:last-child td { border-bottom: 0; }
.tableau td { color: var(--graphite); }

/* --- Notifications ---------------------------------------------- */
.toasts {
  position: fixed;
  left: var(--gouttiere);
  /* Au-dessus de la barre d'accueil de l'iPhone, sinon la
     confirmation « ajouté au panier » s'affiche à moitié cachée. */
  bottom: calc(var(--e-5) + env(safe-area-inset-bottom));
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  pointer-events: none;
  max-width: min(30rem, calc(100vw - 2 * var(--gouttiere)));
}
.toast {
  padding: var(--e-3) var(--e-5);
  background: var(--noir);
  color: var(--papier);
  font-size: var(--t-petit);
  border-left: 2px solid var(--oxblood-clair);
  box-shadow: var(--ombre-flottant);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--d-moyen) var(--sortie), transform var(--d-moyen) var(--sortie);
}
.toast--vu { opacity: 1; transform: none; }
.toast--erreur { border-left-color: #D98A78; }

/* --- Pied de page ------------------------------------------------ */
.pied { background: var(--noir); color: var(--sur-noir-doux); padding-block: var(--e-8) var(--e-6); }
.pied__haut {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--e-7) var(--e-5);
  padding-bottom: var(--e-7);
}
.pied__marque { grid-column: 1 / -1; max-width: 26rem; }
@media (min-width: 900px) { .pied__marque { grid-column: span 2; } }
.pied h3 {
  font-family: var(--sans);
  font-size: var(--t-mini);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--sur-noir);
  margin-bottom: var(--e-4);
}
.pied ul { display: flex; flex-direction: column; gap: 0.6rem; }
.pied ul a {
  font-size: var(--t-petit);
  color: var(--sur-noir-doux);
  text-decoration: none;
  transition: color var(--d-court) var(--doux);
}
.pied ul a:hover { color: var(--sur-noir); }
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3) var(--e-5);
  justify-content: space-between;
  padding-top: var(--e-5);
  border-top: 1px solid var(--trait-noir);
  font-size: var(--t-mini);
}

/* --- Transitions de page ---------------------------------------- */
.page-entree { animation: entree 420ms var(--sortie) both; }
@keyframes entree { from { opacity: 0; } to { opacity: 1; } }
.page-sortie { opacity: 0; transition: opacity 170ms var(--doux); }
@media (prefers-reduced-motion: reduce) {
  .page-entree { animation: none; }
  .page-sortie { opacity: 1; }
}

/* --- États vides / chargement ------------------------------------ */
.etat-vide {
  padding: var(--e-9) var(--e-4);
  text-align: center;
  border-top: 1px solid var(--trait);
}
.etat-vide .titre-2 { margin-bottom: var(--e-3); }
.etat-vide p { color: var(--gris); margin-inline: auto; max-width: 34rem; }
.etat-vide .bouton { margin-top: var(--e-5); }

.squelette {
  background: linear-gradient(90deg, var(--papier-2) 0%, #E1DFDA 50%, var(--papier-2) 100%);
  background-size: 200% 100%;
  animation: balayage 1.3s ease-in-out infinite;
}
@keyframes balayage { to { background-position: -200% 0; } }

/* Bouton secondaire sur fond noir : contour discret, aucun aplat. */
.bouton--fantome {
  background: transparent;
  color: var(--sur-noir);
  border-color: #4A4741;
}
.bouton--fantome:hover { background: var(--papier); color: var(--noir); border-color: var(--papier); }

/* Logo posé sur un fond sombre : menu, pied de page, sections noires. */
.logo--clair,
.menu__panneau .logo,
.pied .logo { color: var(--sur-noir); }
.logo--clair .logo__amp,
.menu__panneau .logo__amp,
.pied .logo__amp { color: inherit; }

/* Le logo est un lien : sa zone cliquable doit tenir sous le pouce. */
.entete .logo { padding-block: 0.72rem; }

/* Bouton de taille à deux lignes : l'âge, puis la hauteur en
   centimètres — c'est elle qui décide vraiment de la justesse. */
.choix__option--double {
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.7rem;
  line-height: 1.2;
}
.choix__hauteur {
  font-size: var(--t-mini);
  font-weight: 400;
  color: var(--gris);
  font-variant-numeric: tabular-nums;
}
.choix__option--double[aria-pressed='true'] .choix__hauteur { color: var(--trait); }
.choix__option--double[disabled] .choix__hauteur { color: var(--trait-fort); }

/* --- Barre d'achat mobile --------------------------------------
   Sur téléphone, le bouton d'achat est à 1 300 px du haut de la
   fiche produit. Cette barre le ramène sous le pouce dès qu'il
   sort du champ. Sur grand écran elle n'a pas lieu d'être : la
   colonne d'informations y est déjà collante. */
.achat-rapide {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-toast);
  display: none;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-3) var(--gouttiere);
  padding-bottom: calc(var(--e-3) + env(safe-area-inset-bottom));
  background: var(--papier);
  border-top: 1px solid var(--trait);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(110%);
  transition: transform var(--d-moyen) var(--sortie);
}
@media (max-width: 899px) {
  .achat-rapide:not([hidden]) { display: flex; }
}
.achat-rapide--visible { transform: none; }

.achat-rapide__texte {
  display: flex;
  flex: 1 1 auto;       /* pousse le bouton contre le bord droit */
  flex-direction: column;
  min-width: 0;            /* sans ça, un nom long pousse le bouton hors écran */
  line-height: 1.2;
}
.achat-rapide__nom {
  font-size: var(--t-petit);
  color: var(--gris);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.achat-rapide__prix { font-size: var(--t-3); }
.achat-rapide__bouton { flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .achat-rapide { transition: none; }
}

/* --- Mention « maquette » ----------------------------------------
   Sous la galerie d'une fiche produit, quand la vue montrée est un
   rendu et non une photographie. Discrète mais lisible : c'est une
   information due à l'acheteur, pas une note de bas de page. */
.produit__maquette {
  margin: var(--e-3) 0 0;
  padding-left: var(--e-3);
  border-left: 2px solid var(--trait-fort);
  font-size: var(--t-petit);
  line-height: 1.5;
  color: var(--gris);
  max-width: 52ch;
}