/* ==========================================================================
   Configurateur — complete site.css, qui fournit deja la palette,
   l'entete, le pied et les boutons.
   ========================================================================== */

:root { --scene-max: 560px; }

/* ------------------------------------------------------- fond blanc franc
   Le configurateur garde la palette claire, meme quand le systeme est en
   mode sombre. Ce n'est pas un choix d'esthetique : nos pieces sont
   detourees d'une planche sur fond blanc, et il leur reste toujours un bord
   a demi transparent. Sur fond sombre ce bord dessine un lisere clair tres
   visible ; sur fond blanc il se confond avec la page et disparait. Les
   grandes marques posent leurs montres sur du blanc pour exactement cette
   raison. */
.page-configurateur {
  --encre:       #16151a;
  --encre-doux:  #6d6862;
  --encre-pale:  #9b958c;
  --fond:        #ffffff;
  --fond-carte:  #ffffff;
  --fond-creux:  #f4f2ee;
  --trait:       #e4e0d9;
  --trait-fin:   #eeebe5;
  background: #ffffff;
  color: var(--encre);
}

.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 412px;
  max-width: 1500px; margin: 0 auto;
  align-items: start;
}

/* ------------------------------------------------------------------- scene */
.scene {
  background: #fff;
  position: sticky; top: var(--haut-entete);
  display: grid; place-items: center;
  padding: 34px 24px 48px;
  min-height: calc(100vh - var(--haut-entete));
}

.montre {
  position: relative;
  width: min(100%, var(--scene-max));
  aspect-ratio: 1400 / 1800;
  filter: drop-shadow(0 22px 38px rgba(22,21,26,.12));
}
.montre img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
}
/* Les calques ne s'allument qu'une fois tous decodes : on ne voit jamais
   une montre a moitie habillee, ni le fond a travers un calque manquant. */
.montre.prete img.visible { opacity: 1; }

/* Les aiguilles se posent sur le cadran, elles n'y sont pas collees.
   Sur une vraie montre, les aiguilles flottent un demi-millimetre au-dessus
   du cadran et y jettent une ombre courte, decalee vers le bas a droite par
   l'eclairage du studio. Sans elle, l'aiguille a l'air d'un autocollant :
   c'est exactement ce qui separait notre rendu de celui des marques.
   `drop-shadow` suit la forme reelle du calque, pas son rectangle. */
.montre img[data-calque="aiguilles"] {
  filter: drop-shadow(3px 6px 5px rgba(20, 16, 10, .34));
}
.montre img[data-calque="trotteuse"] {
  filter: drop-shadow(2px 4px 4px rgba(20, 16, 10, .28));
}

.scene-pied {
  margin-top: 18px; text-align: center;
  font-size: 12.5px; color: var(--encre-pale); letter-spacing: .05em;
}

/* ------------------------------------------------------------------ volet */
.volet {
  background: var(--fond-carte);
  border-left: 1px solid var(--trait-fin);
  min-height: 100vh;
  padding: 28px 30px 150px;
}

.volet-entete { display: grid; gap: 6px; margin-bottom: 20px; }
.volet-label {
  font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--encre-pale); font-weight: 600;
}
.selecteur-modele {
  appearance: none; width: 100%;
  border: 1px solid var(--trait); background: var(--fond);
  color: var(--encre); border-radius: var(--rayon-s);
  padding: 11px 38px 11px 14px; font: inherit; font-size: 14.5px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--encre-doux) 50%),
                    linear-gradient(135deg, var(--encre-doux) 50%, transparent 50%);
  background-position: calc(100% - 19px) 53%, calc(100% - 14px) 53%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  transition: border-color var(--transition);
}
.selecteur-modele:hover { border-color: var(--encre-doux); }

.titre-modele {
  font-family: var(--serif); font-weight: 500;
  margin: 0 0 6px; font-size: 27px; letter-spacing: -.015em;
}
.sous-titre { margin: 0 0 24px; color: var(--encre-doux); font-size: 13.5px; }

/* ----------------------------------------------------------------- groupes */
.groupe { padding: 20px 0; border-top: 1px solid var(--trait-fin); }
.groupe:first-of-type { border-top: 0; padding-top: 0; }

.groupe-entete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 13px;
}
.groupe-titre {
  font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--encre-pale);
}
.groupe-valeur { font-size: 13.5px; font-weight: 500; text-align: right; }

/* onglets : familles d'une meme couche (ventilo/lisse, metal/cuir…) */
.onglets { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.onglet {
  flex: 1 1 auto; min-width: 74px; padding: 9px 12px;
  border: 1px solid var(--trait); background: transparent; color: var(--encre-doux);
  border-radius: var(--rayon-s); font: inherit; font-size: 12.5px; cursor: pointer;
  transition: all var(--transition);
}
.onglet:hover { border-color: var(--encre-doux); }
.onglet[aria-selected="true"] {
  background: var(--encre); color: var(--fond-carte);
  border-color: var(--encre); font-weight: 500;
}

/* pastilles de couleur */
.pastilles { display: flex; flex-wrap: wrap; gap: 9px; }
.pastille {
  width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--trait); border-radius: 50%;
  cursor: pointer; position: relative;
  transition: transform var(--transition), box-shadow var(--transition);
}
.pastille:hover { transform: scale(1.09); }
.pastille[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--fond-carte), 0 0 0 4px var(--encre);
}
.pastille:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

/* vignettes : boitiers */
.vignettes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.vignette {
  border: 1px solid var(--trait); border-radius: 11px;
  background: var(--fond); cursor: pointer; padding: 9px 5px 7px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font: inherit; font-size: 10.5px; color: var(--encre-doux);
  transition: all var(--transition);
}
.vignette:hover { border-color: var(--encre-doux); }
.vignette[aria-pressed="true"] {
  border-color: var(--encre); color: var(--encre); font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--encre);
}
.vignette .apercu {
  width: 100%; height: 64px;
  /* Le PNG est un canevas 1400x1800 ou le boitier occupe le centre, un peu
     decale vers la droite a cause de la couronne. On cadre sur ce centre et
     on zoome juste ce qu'il faut pour que le boitier entier tienne dans la
     vignette : un boitier coupe en arc ne se reconnait pas. */
  background-size: auto 152%; background-position: 53% 51%;
  background-repeat: no-repeat;
}
.vignette-nom {
  display: block; width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: center;
}

/* bandeau du mouvement deduit */
.mouvement {
  margin-top: 12px; padding: 13px 15px;
  background: var(--fond); border: 1px solid var(--trait-fin);
  border-radius: 11px; display: flex; gap: 12px; align-items: flex-start;
}
.mouvement .puce {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--or); margin-top: 7px;
}
.mouvement-nom { font-size: 13px; font-weight: 600; }
.mouvement-detail { font-size: 12.5px; color: var(--encre-doux); margin-top: 2px; }

/* --------------------------------------------------------- barre de prix */
.barre-prix {
  position: sticky; bottom: 0;
  margin: 28px -30px -150px;
  padding: 18px 30px calc(18px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--fond-carte) 93%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--trait);
  display: flex; align-items: center; gap: 16px;
}
.prix-bloc { flex: 1; min-width: 0; }
.prix-label {
  font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--encre-pale);
}
.prix-montant {
  font-family: var(--serif);
  font-size: 22px; font-weight: 500; letter-spacing: -.02em;
  white-space: nowrap;
}
.prix-detail { font-size: 11.5px; color: var(--encre-pale); }

.bouton-ajout {
  flex: none; padding: 14px 24px;
  background: var(--encre); color: var(--fond-carte);
  border: 0; border-radius: 11px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500;
  transition: opacity var(--transition);
}
.bouton-ajout:hover { opacity: .86; }
.bouton-ajout:active { transform: translateY(1px); }

/* ---------------------------------------------------------------- modale */
.modale-fond {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(10,9,12,.5);
  display: grid; place-items: center; padding: 24px;
  backdrop-filter: blur(3px);
}
.modale {
  background: var(--fond-carte); color: var(--encre);
  border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: 28px; width: min(100%, 440px);
  max-height: 84vh; overflow-y: auto;
}
.modale-titre { font-family: var(--serif); font-size: 22px; margin: 0 0 18px; }
.recap { margin: 0 0 18px; display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; }
.recap dt { font-size: 12.5px; color: var(--encre-pale); }
.recap dd { margin: 0; font-size: 14px; text-align: right; }
.modale-prix {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 14px; border-top: 1px solid var(--trait-fin); margin-bottom: 16px;
}
.modale-prix span { font-size: 12.5px; color: var(--encre-pale); }
.modale-prix strong { font-family: var(--serif); font-size: 22px; font-weight: 500; }
.modale-note { font-size: 12.5px; color: var(--encre-pale); margin: 0 0 18px; }
.modale .bouton-ajout { width: 100%; }

/* ---------------------------------------------------------------- mobile */
@media (max-width: 1000px) {
  .page { grid-template-columns: 1fr; }
  .scene {
    position: static; min-height: 0;
    padding: 18px 16px 6px;
    --scene-max: 370px;
  }
  .volet {
    border-left: 0; border-top: 1px solid var(--trait-fin);
    min-height: 0; padding: 22px 18px 140px;
    border-radius: 22px 22px 0 0; margin-top: -16px;
    position: relative; z-index: 2;
  }
  /* Sur mobile la barre quitte le flux et se colle au bas de l'ecran :
     en sticky elle se figeait la ou elle etait inseree. */
  .barre-prix {
    position: fixed; left: 0; right: 0; bottom: 0;
    margin: 0; padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    z-index: 30; box-shadow: 0 -2px 22px rgba(0,0,0,.08);
  }
}

@media (max-width: 420px) {
  .prix-montant { font-size: 22px; }
  .bouton-ajout { padding: 13px 18px; font-size: 13px; }
  .pastille { width: 34px; height: 34px; }
  .vignettes { grid-template-columns: repeat(3, 1fr); }
}


/* Le bouton de devis est un lien : on lui redonne l'allure d'un bouton. */
.modale a.bouton-ajout {
  display: flex; justify-content: center; text-decoration: none;
  width: 100%; margin-top: 4px;
}
.modale button.bouton-ajout { width: 100%; }
.modale-note { font-size: 13px; }

/* --- Commande ------------------------------------------------------------ */
.modale-prix { font-size: 20px; font-weight: 600; margin: 14px 0 4px; }
.modale-erreur {
  margin: 10px 0 12px; padding: 10px 12px; border-radius: 8px;
  background: #fbeaea; color: #8a1c1c; font-size: 13.5px; line-height: 1.45;
}
.bouton-ajout:disabled { opacity: .55; cursor: progress; }
.modale .bouton-secours { margin-top: 8px; background: #1f6f43; }
.modale .bouton-fermer { margin-top: 8px; background: transparent; color: var(--encre-doux); }
.modale [hidden] { display: none !important; }