/* ============================================================
   PHONOMAKER — Configurateur · écran mobile
   ------------------------------------------------------------
   Le configurateur suppose un grand écran : aperçu en direct à
   gauche, options à droite, dépôt de fichiers. Sous 1000 px on
   affiche donc un écran d'accueil dédié plutôt qu'une version
   tassée et frustrante.

   Le basculement est fait en CSS pur (pas de JS, pas de
   détection d'agent) : le bon écran est déjà là au premier
   rendu, sans clignotement.

   Le configurateur est réellement inaccessible sous le seuil : il n'est
   ni affiché, ni monté. La seule façon d'y accéder est d'élargir la
   fenêtre, ce qui le fait apparaître immédiatement.

   Seuils retenus :
     · < 1000 px   → écran mobile (téléphones, tablettes en portrait)
     · >= 1000 px  → configurateur complet (tablette paysage, ordinateur)
   ============================================================ */

.pm-cfgm { display: none; }

@media (max-width: 999px) {
  #phonomaker-config-root { display: none !important; }
  .pm-cfgm { display: block; }
}

.pm-cfgm {
  background: var(--pm-paper, #F0E7D2);
  color: var(--pm-ink, #1A1815);
  padding: 44px 22px 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pm-cfgm * { box-sizing: border-box; }

/* ---------- Disque qui tourne ---------- */
.pm-cfgm-disc {
  width: min(210px, 54vw);
  aspect-ratio: 1/1;
  margin: 0 auto 30px;
  border-radius: 50%;
  position: relative;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.045) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 34% 28%, #33302b 0%, #1A1815 46%, #0d0c0b 100%);
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.55), 0 0 0 1.5px rgba(26,24,21,.9);
  animation: pm-cfgm-spin 7s linear infinite;
}
/* étiquette centrale */
.pm-cfgm-disc::before {
  content: "";
  position: absolute; inset: 32%;
  border-radius: 50%;
  background: var(--pm-orange, #CF3417);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
/* trou central */
.pm-cfgm-disc::after {
  content: "";
  position: absolute; inset: 47.4%;
  border-radius: 50%;
  background: var(--pm-paper, #F0E7D2);
}
@keyframes pm-cfgm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pm-cfgm-disc { animation: none; }
}

/* ---------- Textes ---------- */
.pm-cfgm-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font: 700 10.5px/1 "Inter", system-ui, sans-serif;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--pm-orange, #CF3417);
  margin-bottom: 14px;
}
.pm-cfgm-eyebrow::before {
  content: ""; width: 22px; height: 2px;
  background: var(--pm-orange, #CF3417);
}
.pm-cfgm-h1 {
  font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  font-size: clamp(30px, 8.4vw, 46px);
  line-height: .95;
  text-transform: uppercase;
  margin: 0 0 16px;
  letter-spacing: .005em;
}
.pm-cfgm-lead {
  font: 400 15px/1.6 "Inter", system-ui, sans-serif;
  color: #3A352E;
  max-width: 420px;
  margin: 0 auto 26px;
}

/* ---------- Ce que permet le configurateur ---------- */
.pm-cfgm-list {
  list-style: none;
  margin: 0 auto 30px;
  padding: 18px 18px 16px;
  max-width: 420px;
  text-align: left;
  border: 1.5px solid var(--pm-ink, #1A1815);
  background: #E7DCC0;
  box-shadow: 3px 3px 0 0 var(--pm-orange, #CF3417);
}
.pm-cfgm-list li {
  display: flex; gap: 10px; align-items: flex-start;
  font: 500 13.5px/1.45 "Inter", system-ui, sans-serif;
  color: #3A352E;
  padding: 6px 0;
}
.pm-cfgm-list li::before {
  content: "→";
  color: var(--pm-orange, #CF3417);
  font-weight: 700;
  flex: 0 0 auto;
}

/* ---------- Actions ---------- */
.pm-cfgm-actions {
  display: flex; flex-direction: column; gap: 10px;
  max-width: 420px; margin: 0 auto;
}
.pm-cfgm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 12.5px/1 "Inter", system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 16px 20px;
  border: 1.5px solid var(--pm-ink, #1A1815);
  background: var(--pm-ink, #1A1815);
  color: var(--pm-paper, #F0E7D2);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 3px 3px 0 0 var(--pm-orange, #CF3417);
  transition: transform .15s cubic-bezier(.22,.61,.36,1), box-shadow .15s;
  width: 100%;
}
.pm-cfgm-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 0 var(--pm-orange, #CF3417); }
.pm-cfgm-btn--ghost {
  background: transparent;
  color: var(--pm-ink, #1A1815);
  box-shadow: 3px 3px 0 0 var(--pm-ink, #1A1815);
}
.pm-cfgm-btn.is-done { background: #2F8F4A; border-color: #2F8F4A; }

/* ---------- Mention de bas d'écran ---------- */
.pm-cfgm-foot {
  max-width: 420px;
  margin: 26px auto 0;
  font: 500 12px/1.5 "Inter", system-ui, sans-serif;
  color: #6B655A;
}