/* Fotorder — habillage du moteur d'aperçu 3D
   Charte : anthracite #1F1F1F, corail #FF3B68, bleu #2563EB, jaune #FFD447, blanc #FFFFFF.
   Angles doux, boutons sveltes, zones tactiles confortables. */

.fot3d {
  position: relative;
  width: 100%;
  /* Fond de scène légèrement dégradé : un objet blanc ou très clair
     (mug, tirage, cube) doit rester détaché du cadre, sinon il « disparaît »
     sur du blanc. Le dégradé reste neutre et sans couleur : la photographie
     et l'objet restent seuls en valeur. */
  background:
    radial-gradient(circle at 50% 34%, #FFFFFF 0%, #EBF0F6 52%, #D8E0EA 100%);
  border: 1px solid rgba(31, 31, 31, 0.12);
  border-radius: var(--radius-card, 14px);
  overflow: hidden;
  touch-action: pan-y;
  aspect-ratio: 1 / 1;
  min-height: 240px;
}
@media (min-width: 768px) {
  .fot3d { aspect-ratio: 4 / 3; }
}

/* M07 (audit) — REPLI POUR LES NAVIGATEURS SANS « aspect-ratio ».
   Le cadre n'a AUCUNE hauteur propre : la scène 3D, l'image de secours et
   l'indicateur de chargement sont tous en position absolue, et sa hauteur
   venait donc uniquement de `aspect-ratio`. Sur un navigateur qui ne connaît
   pas cette propriété (Safari 14 et antérieurs, Chrome 87, Firefox 86), le
   cadre mesurait 0 px de haut : l'aperçu 3D était INVISIBLE, sans aucune
   erreur ni message — le client aurait vu un objet impossible à personnaliser
   sans comprendre pourquoi.
   Ce repli réserve exactement la même place au moyen d'un bloc de
   remplissage, uniquement sur les navigateurs concernés. */
@supports not (aspect-ratio: 1 / 1) {
  .fot3d { height: 0; padding-bottom: 100%; }
}
@media (min-width: 768px) {
  @supports not (aspect-ratio: 1 / 1) {
    .fot3d { padding-bottom: 75%; }
  }
}

/* M07 (audit) — « inset » remplacé par ses quatre côtés.
   `inset` n'est pas reconnu par les mêmes navigateurs que `aspect-ratio`
   (Safari 14, Chrome 87, Firefox 65) : dans ce cas la scène, l'image de
   secours et l'indicateur de chargement n'étaient PAS positionnés, donc
   invisibles même une fois la hauteur du cadre rétablie. Écrire les quatre
   côtés produit exactement le même résultat, et fonctionne partout. */
.fot3d-stage {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.fot3d-stage canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* image de secours : l'aperçu actuel reste affiché si la 3D est impossible */
.fot3d-fallback {
  position: absolute;
  /* M07 (audit) : `inset` déplié (voir la note sur .fot3d-stage). */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #FFFFFF;
}

/* Le canvas est transparent : il laisse voir le fond de scène ci-dessus.
   Le cadre reçoit un liseré bas très léger, comme une ligne de table,
   pour que l'objet ne « flotte » pas dans le vide. */
.fot3d-stage::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 16%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(31, 31, 31, 0.10), transparent);
  pointer-events: none;
}

/* indicateur de chargement */
.fot3d-loading {
  position: absolute;
  /* M07 (audit) : `inset` déplié (voir la note sur .fot3d-stage) — cet élément
     n'a aucune largeur/hauteur propre, il serait resté invisible sur les
     navigateurs qui ne reconnaissent pas `inset`. */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: #1F1F1F;
  font-size: var(--fs-small, 13px);
  z-index: 3;
}
.fot3d-loading[hidden] { display: none; }
.fot3d-spin {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(31, 31, 31, 0.15);
  border-top-color: #FF3B68;
  animation: fot3d-turn 0.9s linear infinite;
}
@keyframes fot3d-turn { to { transform: rotate(360deg); } }
.fot3d-bar {
  width: 128px;
  height: 4px;
  border-radius: 2px;
  background: rgba(31, 31, 31, 0.12);
  overflow: hidden;
}
.fot3d-bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: #FF3B68;
  transition: width 0.25s ease;
}

/* bouton de retour à la vue initiale (point 9 de la mission) */
.fot3d-reset {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: #1F1F1F;
  background: #FFFFFF;
  border: 1px solid rgba(31, 31, 31, 0.16);
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(31, 31, 31, 0.08);
}
.fot3d-reset:hover { background: rgba(31, 31, 31, 0.04); }
.fot3d-reset:active { transform: translateY(1px); }
.fot3d-reset:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }
.fot3d-reset svg { width: 15px; height: 15px; flex: none; }

/* aide à la manipulation.
   M05 : posée AU-DESSUS du bouton « Ajuster ma photo » (qui occupe le coin
   bas gauche). Superposés, les deux textes se chevauchaient — visible sur
   capture. */
.fot3d-hint {
  position: absolute;
  left: 10px;
  bottom: 54px;
  z-index: 4;
  padding: 5px 10px;
  font-size: 12px;
  color: #1F1F1F;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(31, 31, 31, 0.12);
  border-radius: 8px;
  pointer-events: none;
}
@media (max-width: 767px) {
  .fot3d-hint { display: none; }
}

/* ---------------------------------------------------------------
   M03 — barre de réglages de la photographie (points 8, 9, 11)
   Le client place, agrandit, réduit et tourne sa photographie DANS la
   zone imprimable. Chaque réglage est borné par les limites réelles de
   la zone : rien ne peut déborder.

   M05 : cette barre n'apparaît plus en permanence. Elle s'ouvre avec
   « Ajuster ma photo » et se referme avec « Voir le résultat ». Avant,
   deux modes contradictoires cohabitaient à l'écran (tourner l'objet et
   régler la photo en même temps) : c'était confus sur téléphone.
   --------------------------------------------------------------- */
.fot3d-photo {
  position: relative;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px;
  background: #FFFFFF;
  border: 1px solid rgba(31, 31, 31, 0.14);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(31, 31, 31, 0.08);
}
.fot3d-photo[hidden] { display: none; }
.fot3d-reset { z-index: 6; }

.fot3d-pbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 34px;
  min-width: 38px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #1F1F1F;
  background: #FFFFFF;
  border: 1px solid rgba(31, 31, 31, 0.16);
  border-radius: 8px;
  cursor: pointer;
}
.fot3d-pbtn svg { width: 16px; height: 16px; flex: none; }
.fot3d-pbtn:hover { background: rgba(31, 31, 31, 0.05); }
.fot3d-pbtn:active { transform: translateY(1px); }
.fot3d-pbtn:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }
/* le réglage principal de la photographie porte le corail de la charte */
.fot3d-less,
.fot3d-more { color: #FF3B68; border-color: rgba(255, 59, 104, 0.35); }
.fot3d-less:hover,
.fot3d-more:hover { background: rgba(255, 59, 104, 0.07); }
.fot3d-orient,
.fot3d-mode { color: #2563EB; border-color: rgba(37, 99, 235, 0.32); }
.fot3d-orient:hover,
.fot3d-mode:hover { background: rgba(37, 99, 235, 0.07); }

@media (max-width: 420px) {
  .fot3d-photo { gap: 5px; padding: 5px; }
  .fot3d-pbtn { height: 32px; min-width: 34px; padding: 5px 8px; font-size: 12px; }
}

/* mention d'information quand la 3D n'est pas disponible */
.fot3d-note {
  margin: 8px 0 0;
  font-size: var(--fs-small, 13px);
  color: #1F1F1F;
  opacity: 0.75;
}

/* ---------------------------------------------------------------
   Aperçu 2D explicite (M04, point 12)
   Un objet qui n'a pas encore de modèle 3D validé est montré en 2D,
   clairement annoncé : jamais de fausse 3D, jamais d'objet inventé.
   --------------------------------------------------------------- */
.fot3d-2d {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1px solid rgba(31, 31, 31, 0.14);
}
.fot3d-2d img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* l'image ne doit jamais dépasser le cadre, même si le conteneur est étroit */
  flex: none;
}
.fot3d-2d-badge {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1F1F1F;
  background: #FFD447;
  border-radius: 6px;
}

/* ===============================================================
   M05 — EXPÉRIENCE MOBILE
   Deux modes, jamais mélangés : on tourne l'objet, OU on ajuste la
   photo. Les commandes de chaque mode sont regroupées, et rien ne
   recouvre le bouton « Ajouter au panier » ni le menu du bas de page.
   =============================================================== */

/* --- points de vue prédéfinis (face, dos, côté, dessus) --- */
.fot3d-views {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 8px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.fot3d-views[hidden] { display: none; }

.fot3d-vbtn {
  height: 30px;
  padding: 5px 12px;
  font-family: inherit;
  font-size: var(--fs-mini, 12px);
  font-weight: 600;
  color: #1F1F1F;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(31, 31, 31, 0.16);
  border-radius: 8px;
  cursor: pointer;
}
/* la vue affichée est repérée en bleu : c'est une commande de navigation,
   pas une action commerciale (le corail reste réservé à l'achat). */
.fot3d-vbtn:hover { background: rgba(37, 99, 235, 0.07); }
.fot3d-vbtn.on,
.fot3d-vbtn[aria-pressed="true"] {
  color: #FFFFFF;
  background: #2563EB;
  border-color: #2563EB;
}
.fot3d-vbtn:active { transform: translateY(1px); }
.fot3d-vbtn:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }

/* --- « Ajuster ma photo » : commande principale de la personnalisation --- */
.fot3d-adjust {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  background: #FF3B68;
  border: 1px solid #FF3B68;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(255, 59, 104, 0.28);
}
.fot3d-adjust:hover { background: #E62E58; border-color: #E62E58; }
.fot3d-adjust:active { transform: translateY(1px); }
.fot3d-adjust:focus-visible { outline: 2px solid #1F1F1F; outline-offset: 2px; }
.fot3d-adjust[hidden] { display: none; }
.fot3d-adjust svg { width: 16px; height: 16px; flex: none; }

/* « Voir le résultat » referme le mode édition : même couleur que l'action
   qu'il termine, pour que la sortie du mode soit évidente. */
.fot3d-done {
  color: #FFFFFF;
  background: #FF3B68;
  border-color: #FF3B68;
}
.fot3d-done:hover { background: #E62E58; border-color: #E62E58; }
.fot3d-done svg { width: 15px; height: 15px; flex: none; }

/* --- mode édition : le doigt déplace la photo ---
   touch-action: pan-y (et non « none ») : le défilement VERTICAL de la page
   reste possible partout, y compris pendant l'ajustement. Seuls les gestes
   horizontaux sont détournés pour déplacer la photographie (point 12). */
.fot3d-editing .fot3d-stage { touch-action: pan-y; cursor: grab; }
.fot3d-editing.fot3d-dragging .fot3d-stage { cursor: grabbing; }
/* en édition, les réglages prennent la place du bas, et le cadre indique
   qu'on travaille sur la photographie. */
.fot3d-editing { border-color: rgba(255, 59, 104, 0.45); }
.fot3d-editing .fot3d-hint { display: none; }

/* --- avertissements de qualité (point 11) ---
   Placés SOUS le cadre, dans le flux de la page : ils ne peuvent donc
   jamais recouvrir l'aperçu, le bouton d'achat ni le menu du bas. */
.fot3d-warn { margin: 10px 0 0; display: grid; gap: 6px; }
.fot3d-warn[hidden] { display: none; }
.fot3d-warn-line {
  margin: 0;
  padding: 8px 12px;
  font-size: var(--fs-small, 13px);
  line-height: 1.45;
  color: #1F1F1F;
  border-radius: 8px;
}
/* information : repère bleu discret */
.fot3d-warn-info {
  background: rgba(37, 99, 235, 0.06);
  border-left: 3px solid #2563EB;
}
/* avertissement : le jaune de la charte signale la mise en garde sans
   jamais porter de texte (le texte reste anthracite : contraste conforme). */
.fot3d-warn-alert {
  background: rgba(255, 212, 71, 0.18);
  border-left: 3px solid #FFD447;
}

@media (max-width: 420px) {
  .fot3d-vbtn { height: 28px; padding: 4px 9px; }
  .fot3d-adjust { height: 34px; padding: 7px 12px; font-size: 12px; }
  .fot3d-views { gap: 5px; }
}