/* ==========================================================================
   Media Pluriel — atelier 3D (v1.8) : fiches produit et page Personnaliser.
   Chargée seulement sur ces pages. Tokens : tokens.css. Aucune police en plus :
   Saira, IBM Plex Sans (fonts.css) et des polices présentes sur tous les appareils.
   ========================================================================== */

/* ---- Scène ---------------------------------------------------------------- */
.atelier-3d {
  position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  background-color: var(--mp-papier);
  background-image: repeating-linear-gradient(45deg, rgba(20, 80, 146, .035) 0 1px, transparent 1px 7px),
                    repeating-linear-gradient(-45deg, rgba(20, 80, 146, .035) 0 1px, transparent 1px 7px);
  clip-path: polygon(0 0, calc(100% - 56px) 0, 100% 97px, 100% 100%, 0 100%);
}
.atelier-3d > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.fiche__visuel .atelier-3d > img { clip-path: none; }
.atelier-3d--actif > img { display: none; }
.atelier-3d__toile { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; outline: none; }
.atelier-3d--saisi .atelier-3d__toile { cursor: grabbing; }
.atelier-3d:has(.atelier-3d__toile:focus-visible) { outline: var(--mp-trait-focus) solid var(--mp-focus); outline-offset: 2px; clip-path: none; }
.atelier-3d__aide {
  position: absolute; left: var(--mp-espace-4); bottom: var(--mp-espace-4); z-index: 1; display: none; align-items: center; gap: 10px; margin: 0;
  padding: 8px 14px 8px 10px; background: var(--mp-blanc); color: var(--mp-bleu-nuit);
  font-family: var(--mp-police-titre); font-stretch: var(--mp-largeur-titre); font-weight: 600; font-size: 13px; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(35, 31, 32, .08); pointer-events: none; transition: opacity .4s ease, transform .4s ease;
}
.atelier-3d--actif .atelier-3d__aide { display: inline-flex; }
.atelier-3d--manipule .atelier-3d__aide { opacity: 0; transform: translateY(6px); }
.atelier-3d__aide svg { width: 30px; height: 18px; flex: none; }
.atelier-3d__nom {
  position: absolute; left: var(--mp-espace-4); top: 14px; z-index: 1; margin: 0; pointer-events: none;
  font-family: var(--mp-police-titre); font-stretch: var(--mp-largeur-titre); font-weight: 700; font-size: 13px; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--mp-bleu-nuit);
}
.atelier-3d__lancer { position: absolute; left: 50%; bottom: var(--mp-espace-5); transform: translateX(-50%); z-index: 1; }
/* v1.9 : calcul d'un textile, choix sans aperçu 3D (la photo reste affichée) */
.atelier-3d__etat {
  position: absolute; left: var(--mp-espace-4); right: var(--mp-espace-4); bottom: var(--mp-espace-4); z-index: 2; margin: 0;
  padding: 10px 14px; background: var(--mp-blanc); color: var(--mp-bleu-nuit); font-size: 14px; line-height: 20px;
  box-shadow: 0 1px 2px rgba(35, 31, 32, .08);
}
.atelier-3d--sans-apercu > img { display: block; }
.atelier-3d--sans-apercu .atelier-3d__toile, .atelier-3d--sans-apercu .atelier-3d__aide { visibility: hidden; }
.perso__zones { display: grid; gap: var(--mp-espace-3); }
.perso__zones-liste { display: grid; gap: var(--mp-espace-2); }
.atelier-3d__barre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-espace-2); margin-top: var(--mp-espace-3); }
.atelier-3d__barre-titre { margin-right: var(--mp-espace-1); font-family: var(--mp-police-titre); font-stretch: var(--mp-largeur-display); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--mp-ardoise); }
.atelier-vues { display: flex; flex-wrap: wrap; gap: var(--mp-espace-2); }
.atelier-3d__barre [data-atelier-telecharger] { margin-left: auto; }
.atelier-3d__clavier { margin-top: var(--mp-espace-2); font-size: 13px; color: var(--mp-ardoise); }
@media (max-width: 559px) {
  .atelier-3d__aide { left: 10px; bottom: 10px; padding: 6px 10px 6px 8px; font-size: 11px; gap: 6px; }
  .atelier-3d__aide svg { width: 22px; height: 14px; }
  .atelier-3d__nom { left: 10px; top: 10px; font-size: 11px; }
  .atelier-3d__clavier { display: none; }
}

/* ---- Boutons de l'atelier : vues, produits, modèles ------------------------ */
.atelier-vue, .atelier-produit, .atelier-bouton {
  min-height: 40px; padding: 0 14px; border: 1px solid var(--mp-gris-trait); border-radius: var(--mp-rayon-1);
  background: var(--mp-blanc); color: var(--mp-noir); font: 500 15px/1.2 var(--mp-police-texte); cursor: pointer;
}
.atelier-vue:hover, .atelier-produit:hover, .atelier-bouton:hover { background: var(--mp-bleu-pale); }
.atelier-vue[aria-pressed="true"], .atelier-produit[aria-pressed="true"] { background: var(--mp-bleu); border-color: var(--mp-bleu); color: var(--mp-blanc); }
.atelier-bouton--fort { border-color: var(--mp-bleu); color: var(--mp-bleu); font-weight: 600; }
.atelier-produit { min-height: 36px; padding: 0 12px; font-size: 14px; }
.atelier-vue:focus-visible, .atelier-produit:focus-visible, .atelier-bouton:focus-visible { outline: var(--mp-trait-focus) solid var(--mp-focus); outline-offset: 2px; }
.atelier-produits__groupe { display: grid; gap: var(--mp-espace-2); }
.atelier-produits__groupe + .atelier-produits__groupe { margin-top: var(--mp-espace-4); }
.atelier-produits__titre, .atelier-commandes__titre {
  margin: 0; font-family: var(--mp-police-titre); font-stretch: var(--mp-largeur-display); font-weight: 700; font-size: 12px; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--mp-ardoise);
}
.atelier-produits__liste, .atelier-modeles { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- Commandes : couleurs ------------------------------------------------- */
.atelier-commandes { display: grid; gap: var(--mp-espace-5); margin-top: var(--mp-espace-5); }
.atelier-commandes__bloc { display: grid; gap: var(--mp-espace-2); }
.atelier-teintes { display: flex; flex-wrap: wrap; gap: 6px; }
.atelier-teinte {
  display: inline-flex; align-items: center; gap: var(--mp-espace-2); min-height: 40px; padding: 6px 12px 6px 8px;
  border: 1px solid var(--mp-gris-trait); border-radius: var(--mp-rayon-1); background: var(--mp-blanc); color: var(--mp-noir); font: 400 14px/1.2 var(--mp-police-texte); cursor: pointer;
}
.atelier-teinte:hover { background: var(--mp-bleu-pale); }
.atelier-teinte[aria-checked="true"], .atelier-teinte--choisie { border-color: var(--mp-bleu); box-shadow: inset 0 0 0 1px var(--mp-bleu); background: var(--mp-bleu-pale); font-weight: 600; }
.atelier-teinte:focus-visible, .atelier-teinte--libre:focus-within { outline: var(--mp-trait-focus) solid var(--mp-focus); outline-offset: 2px; }
.atelier-teinte__pastille { width: 20px; height: 20px; border-radius: 50%; flex: none; background: var(--teinte, #FFFFFF); box-shadow: inset 0 0 0 1px rgba(35, 31, 32, .25); }
.atelier-teinte--compacte { padding: 6px; min-width: 40px; justify-content: center; }
.atelier-teinte__selecteur { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; flex: none; }
.atelier-teinte__selecteur::-webkit-color-swatch-wrapper { padding: 0; }
.atelier-teinte__selecteur::-webkit-color-swatch { border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(35, 31, 32, .25); }
.atelier-teinte__selecteur::-moz-color-swatch { border: 0; border-radius: 50%; }

/* ---- Marquage du visiteur ------------------------------------------------- */
.atelier-perso { border-top: 1px solid var(--mp-beton); border-bottom: 1px solid var(--mp-beton); }
.atelier-perso__ouvrir {
  display: flex; align-items: center; gap: var(--mp-espace-2); min-height: 52px; cursor: pointer; list-style: none;
  font-family: var(--mp-police-titre); font-stretch: var(--mp-largeur-titre); font-weight: 700; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; color: var(--mp-bleu);
}
.atelier-perso__ouvrir::-webkit-details-marker { display: none; }
.atelier-perso__ouvrir::after { content: "+"; margin-left: auto; font-size: 24px; line-height: 1; }
.atelier-perso[open] > .atelier-perso__ouvrir::after { content: "–"; }
.atelier-perso__ouvrir:focus-visible { outline: var(--mp-trait-focus) solid var(--mp-focus); outline-offset: 2px; }
.atelier-perso > .perso { padding-bottom: var(--mp-espace-5); }
.perso { display: grid; gap: var(--mp-espace-5); }
.perso__titre { margin: 0; font-family: var(--mp-police-titre); font-stretch: var(--mp-largeur-titre); font-weight: 800; font-size: 22px; line-height: 1.15; color: var(--mp-bleu); }
.perso__note { margin: 0; font-size: 14px; line-height: 20px; color: var(--mp-ardoise); }
.perso__titre + .perso__note { margin-top: calc(-1 * var(--mp-espace-3)); }
.perso__bloc { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: var(--mp-espace-3); }
.perso__bloc legend { padding: 0; margin-bottom: var(--mp-espace-3); }
.segments { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; border: 1px solid var(--mp-gris-trait); border-radius: var(--mp-rayon-1); overflow: hidden; }
.segment { position: relative; display: block; }
.segment + .segment { border-left: 1px solid var(--mp-gris-trait); }
.segment input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segment span { display: flex; align-items: center; min-height: 40px; padding: 0 14px; background: var(--mp-blanc); font: 500 14px/1.2 var(--mp-police-texte); }
.segment input:hover + span { background: var(--mp-bleu-pale); }
.segment input:checked + span { background: var(--mp-bleu); color: var(--mp-blanc); font-weight: 600; }
.segment input:focus-visible + span { outline: var(--mp-trait-focus) solid var(--mp-focus); outline-offset: -3px; }
.perso__image { display: grid; gap: var(--mp-espace-2); padding: var(--mp-espace-3); background: var(--mp-papier); }
.perso__fichier { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-espace-2) var(--mp-espace-3); }
.bouton-fichier {
  position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--mp-bleu); border-radius: var(--mp-rayon-1);
  background: var(--mp-blanc); color: var(--mp-bleu); font: 600 14px/1 var(--mp-police-texte); cursor: pointer;
}
.bouton-fichier:hover { background: var(--mp-bleu-pale); }
.bouton-fichier input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.bouton-fichier:focus-within { outline: var(--mp-trait-focus) solid var(--mp-focus); outline-offset: 2px; }
.perso__fichier-nom { font-size: 14px; color: var(--mp-ardoise); overflow-wrap: anywhere; }
.case { display: inline-flex; align-items: center; gap: var(--mp-espace-2); font-size: 14px; cursor: pointer; }
.case input { width: 18px; height: 18px; margin: 0; accent-color: var(--mp-bleu); }
.case:has(input:disabled) { color: var(--mp-gris-trait); cursor: default; }
.perso__erreur { margin: 0; padding: var(--mp-espace-2) var(--mp-espace-3); border-left: 3px solid var(--mp-erreur); background: #FCEDEC; color: var(--mp-erreur); font-size: 14px; }
.perso__texte { min-height: 72px; resize: vertical; }
.perso__grille { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--mp-espace-3); align-items: end; }
.perso__grille--egale { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.perso__champ { display: grid; gap: 6px; font-size: 14px; color: var(--mp-ardoise); }
.perso__champ .champ__saisie { min-height: 44px; padding: 8px 10px; font-size: 15px; }
.perso__styles { display: flex; gap: var(--mp-espace-1); }
.perso__style {
  width: 44px; height: 44px; border: 1px solid var(--mp-gris-trait); border-radius: var(--mp-rayon-1); background: var(--mp-blanc); color: var(--mp-noir);
  font: 400 17px/1 Georgia, "Times New Roman", serif; cursor: pointer;
}
.perso__style:hover { background: var(--mp-bleu-pale); }
.perso__style[aria-pressed="true"] { background: var(--mp-bleu); border-color: var(--mp-bleu); color: var(--mp-blanc); }
.perso__style:focus-visible { outline: var(--mp-trait-focus) solid var(--mp-focus); outline-offset: 2px; }
.perso__style--gras span { font-weight: 700; }
.perso__style--italique span { font-style: italic; }
.perso__style--souligne span { text-decoration: underline; }
.perso__style--contour span { color: transparent; -webkit-text-stroke: 1.2px var(--mp-noir); font: 700 18px/1 var(--mp-police-titre); }
.perso__style--contour[aria-pressed="true"] span { -webkit-text-stroke-color: var(--mp-blanc); }
.perso__taille { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.perso__taille input { flex: 1; min-width: 0; accent-color: var(--mp-bleu); }
.perso__taille output { min-width: 3.6em; text-align: right; font-variant-numeric: tabular-nums; color: var(--mp-noir); }
[data-perso-reinitialiser] { justify-self: start; }
@media (max-width: 400px) { .perso__grille, .perso__grille--egale { grid-template-columns: minmax(0, 1fr); } }

/* ---- Page Personnaliser --------------------------------------------------- */
.atelier-page { padding: var(--mp-espace-3) 0 var(--mp-espace-8); }
.atelier-page__entete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--mp-espace-3) var(--mp-espace-6); margin-bottom: var(--mp-espace-6); }
.atelier-page__titre { font-family: var(--mp-police-titre); font-stretch: var(--mp-largeur-display); font-weight: 800; font-size: clamp(1.75rem, 2.2vw + 1.4rem, 3rem); line-height: 1.08; text-transform: uppercase; color: var(--mp-bleu); text-wrap: balance; }
.atelier-page__intro { max-width: 32em; color: var(--mp-ardoise); }
.atelier-page__in { display: grid; gap: var(--mp-espace-6); align-items: start; }
.atelier-page__scene { min-width: 0; }
.atelier-page__scene .atelier-3d { aspect-ratio: 1 / 0.8; }
.atelier-page__scene .atelier-3d > img { padding: 8%; }
.atelier-page__produits { margin-top: var(--mp-espace-5); padding-top: var(--mp-espace-4); border-top: 1px solid var(--mp-beton); }
.atelier-page__produits .petit-titre { margin-bottom: var(--mp-espace-3); }
.atelier-page__panneau { min-width: 0; display: grid; gap: var(--mp-espace-5); }
.atelier-page__produit { padding-top: var(--mp-espace-4); border-top: 2px solid var(--mp-noir); }
.atelier-page__nom { font-family: var(--mp-police-titre); font-stretch: var(--mp-largeur-titre); font-weight: 800; font-size: 26px; line-height: 1.15; color: var(--mp-bleu); }
.atelier-page__detail { margin-top: var(--mp-espace-1); color: var(--mp-ardoise); }
.atelier-page__panneau .atelier-commandes { margin-top: 0; }
.atelier-page__actions { display: grid; gap: var(--mp-espace-3); padding-top: var(--mp-espace-4); border-top: 1px solid var(--mp-beton); }
.atelier-page__actions .bouton { justify-self: start; }
@media (min-width: 960px) {
  .atelier-page__in { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--mp-espace-7); }
}
@media (prefers-reduced-motion: reduce) { .atelier-3d__aide { transition: none; } }