/* ═══════════════════════════════════════════════════════════════
   L'ASSISTANT DE DESSIN — habillage
   ═══════════════════════════════════════════════════════════════
   L'assistant occupe toute la page quand il est ouvert : on ne dessine
   pas une montre en regardant autre chose. Il reprend les tokens de la
   maison, sans rien inventer — c'est la même boutique, pas un module
   invité.
   ═══════════════════════════════════════════════════════════════ */

#cfg-assistant{
  position:fixed;inset:0;z-index:120;overflow-y:auto;overscroll-behavior:contain;
  background:var(--papier,#fff);
  padding:clamp(18px,3vw,40px) var(--gouttiere) clamp(40px,6vw,80px)}
#cfg-assistant[hidden]{display:none}
body.cfg-assistant-on{overflow:hidden}

#cfg-assistant > *{max-width:960px;margin-inline:auto}

/* ── Le fil des questions ─────────────────────────────────────── */
.as-entete{display:flex;align-items:center;gap:14px;
  padding-block:6px clamp(22px,3vw,38px)}
.as-fil{display:flex;gap:6px;flex:0 0 auto}
.as-fil i{display:block;width:26px;height:3px;background:var(--trait);
  transition:background .3s var(--ease)}
.as-fil i.on{background:var(--laque)}
.as-rang{font-size:0.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--encre-tres-doux);font-weight:500}

.as-question h2{font-family:var(--display);font-size:clamp(1.7rem,4.2vw,2.6rem);
  text-transform:uppercase;line-height:1;letter-spacing:.01em;text-wrap:balance}
.as-sous{margin-top:12px;color:var(--encre-doux);font-weight:300;
  font-size:.94rem;max-width:46ch}
.as-second-titre{margin-top:clamp(26px,3.4vw,40px);
  font-size:0.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--encre-tres-doux);font-weight:600}

/* ── Les choix ────────────────────────────────────────────────── */
.as-choix{display:grid;gap:10px;margin-top:clamp(18px,2.6vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.as-choix button{display:block;text-align:left;cursor:pointer;
  background:#fff;border:1px solid var(--trait);
  padding:clamp(16px,2vw,22px);min-height:64px;
  transition:border-color .22s var(--ease),background-color .22s var(--ease)}
.as-choix button b{display:block;font-family:var(--display);font-size:1.18rem;
  text-transform:uppercase;letter-spacing:.03em;line-height:1.1}
.as-choix button span{display:block;margin-top:6px;font-size:.86rem;
  font-weight:300;color:var(--encre-doux);line-height:1.45}
.as-choix button.on{border-color:var(--encre);background:var(--encre);color:#fff}
.as-choix button.on span{color:rgba(255,255,255,.76)}
@media (hover:hover) and (pointer:fine){
  .as-choix button:hover{border-color:var(--encre)}
}

/* ── Les pastilles de couleur ─────────────────────────────────── */
.as-pastilles{display:grid;gap:10px;margin-top:clamp(18px,2.6vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr))}
.as-pastilles button{display:flex;align-items:center;gap:11px;cursor:pointer;
  background:#fff;border:1px solid var(--trait);padding:11px 14px;min-height:52px;
  font-size:.86rem;transition:border-color .22s var(--ease)}
.as-pastilles button i{display:block;width:24px;height:24px;border-radius:50%;
  flex:0 0 24px;box-shadow:inset 0 0 0 1px rgba(17,17,20,.14)}
.as-pastilles button.on{border-color:var(--encre);box-shadow:inset 0 0 0 1px var(--encre)}
@media (hover:hover) and (pointer:fine){
  .as-pastilles button:hover{border-color:var(--encre)}
}

/* ── Les trois pistes ─────────────────────────────────────────── */
.as-pistes{display:grid;gap:14px;margin-top:clamp(18px,2.6vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.as-piste{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--trait)}
/* Le cadre du visuel : carré, et les calques s'y superposent au centre.
   `contain` sur le conteneur évite qu'un calque mal dimensionné pendant
   son chargement ne déborde sur la carte voisine. */
/* Le cadre est un BOUTON depuis le 18/09/2026 : il ouvre la montre en
   grand. Il n'en porte aucune marque de bouton — ni bordure, ni fond :
   c'est la loupe, en bas à droite, qui dit le geste. */
.as-visuel{position:relative;aspect-ratio:1;background:var(--creme);
  overflow:hidden;display:block;width:100%;padding:0;border:0;
  cursor:zoom-in;font:inherit;color:inherit;text-align:inherit}
/* Les calques vivent dans une pile à eux : le cadre garde la loupe d'un
   redessin à l'autre, et la pile s'agrandit d'un bloc sans qu'aucune
   géométrie de calque ne soit recalculée. */
.as-pile{position:absolute;inset:0;transform:scale(1.3);
  transition:transform .6s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .as-visuel:hover .as-pile{transform:scale(1.36)}
}
.as-loupe{
  position:absolute;right:10px;bottom:10px;z-index:2;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);border:1px solid var(--trait);
  color:var(--encre);
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease)}
.as-loupe svg{width:17px;height:17px;display:block}
@media (hover:hover) and (pointer:fine){
  .as-visuel:hover .as-loupe{background:var(--encre);border-color:var(--encre);color:#fff}
}
/* Les calques sont des packshots avec beaucoup de vide autour : à 100 % de la
   case, la montre n'occupait qu'une fraction du carré et il fallait zoomer la
   page pour la juger. On agrandit la pile dans son cadre — `overflow:hidden`
   sur `.as-visuel` rogne le vide, pas la montre. */
.as-calque{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:134%;display:block;pointer-events:none}

.as-piste-txt{padding:clamp(14px,1.8vw,20px);flex:1 1 auto}
.as-parti{display:block;font-size:0.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--laque);font-weight:600}
.as-piste-txt b{display:block;margin-top:8px;font-family:var(--display);
  font-size:1.24rem;text-transform:uppercase;letter-spacing:.02em;line-height:1.1}
.as-dit{display:block;margin-top:7px;font-size:.85rem;font-weight:300;
  color:var(--encre-doux);line-height:1.45}
.as-prix{display:block;margin-top:12px;font-size:1.05rem;font-weight:500;
  font-variant-numeric:tabular-nums}

.as-aller{cursor:pointer;border:0;border-top:1px solid var(--trait);
  background:var(--encre);color:#fff;min-height:52px;width:100%;
  font-size:0.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  transition:background-color .22s var(--ease)}
.as-aller:disabled{background:var(--creme);color:var(--encre-tres-doux);
  cursor:default}
@media (hover:hover) and (pointer:fine){
  .as-aller:not(:disabled):hover{background:var(--laque)}
}

/* ── Les retouches ────────────────────────────────────────────── */
.as-retouches{margin-top:clamp(26px,3.4vw,44px);
  border-top:1px solid var(--trait);padding-top:clamp(20px,2.6vw,30px)}
.as-retouches-titre{display:block;font-size:0.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--encre-tres-doux);font-weight:600}
.as-retouches-liste{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.as-retouches-liste button{cursor:pointer;background:#fff;
  border:1px solid var(--trait);border-radius:999px;padding:11px 17px;
  min-height:44px;font-size:.84rem;color:var(--encre);
  transition:border-color .22s var(--ease),background-color .22s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .as-retouches-liste button:hover{border-color:var(--encre);background:var(--creme)}
}

/* ── Le pied ──────────────────────────────────────────────────── */
.as-pied{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  justify-content:space-between;margin-top:clamp(24px,3vw,38px)}
.as-retour,.as-sortir{cursor:pointer;background:none;border:0;padding:12px 0;
  min-height:44px;font-size:.82rem;color:var(--encre-doux);
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--trait);transition:color .22s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .as-retour:hover,.as-sortir:hover{color:var(--laque)}
}

/* ── Le bouton qui l'ouvre, dans l'atelier ────────────────────── */
#cfg-assistant-ouvrir{display:inline-flex;align-items:center;gap:11px;
  cursor:pointer;background:var(--encre);color:#fff;border:1px solid var(--encre);
  padding:15px 26px;min-height:52px;
  font-size:0.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  transition:background-color .24s var(--ease)}
#cfg-assistant-ouvrir[hidden]{display:none}
#cfg-assistant-ouvrir i{font-style:normal;font-size:.9rem;opacity:.75}
@media (hover:hover) and (pointer:fine){
  #cfg-assistant-ouvrir:hover{background:var(--laque);border-color:var(--laque)}
}
.cfg-accompagne{margin-top:clamp(20px,2.6vw,32px);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.cfg-accompagne p{font-size:.9rem;font-weight:300;color:var(--encre-doux);
  max-width:38ch;line-height:1.5}

@media(prefers-reduced-motion:reduce){
  #cfg-assistant *{transition:none!important}
}

/* ── Le bouton qui valide une question à réponses multiples ───── */
.as-suivant{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
  margin-top:clamp(20px,2.6vw,30px)}
.as-suivant button{cursor:pointer;background:var(--encre);color:#fff;border:0;
  padding:15px 26px;min-height:52px;
  font-size:0.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  transition:background-color .22s var(--ease)}
.as-suivant button:disabled{background:var(--creme);color:var(--encre-tres-doux);
  cursor:default}
@media (hover:hover) and (pointer:fine){
  .as-suivant button:not(:disabled):hover{background:var(--laque)}
}
.as-compte{font-size:.82rem;color:var(--encre-doux);font-weight:300}

/* Le rang d'une couleur : première, deuxième, troisième — l'ordre compte,
   il dit laquelle on verra d'abord. */
.as-pastilles button em{margin-left:auto;font-style:normal;
  font-size:0.66rem;font-weight:600;color:#fff;background:var(--encre);
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  flex:0 0 20px}

/* ── Le budget ───────────────────────────────────────────────── */
.as-budget{margin-top:clamp(22px,3vw,34px)}
.as-budget-duo{display:grid;gap:12px;margin-top:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.as-champ label{display:block;font-size:0.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--encre-tres-doux);font-weight:600}
.as-champ-boite{display:flex;align-items:center;gap:8px;margin-top:8px;
  border:1px solid var(--trait);background:#fff;padding:0 14px;min-height:52px}
.as-champ-boite input{flex:1 1 auto;min-width:0;border:0;background:none;
  font-size:1.05rem;font-weight:500;color:var(--encre);padding:0;
  font-variant-numeric:tabular-nums}
.as-champ-boite input:focus{outline:none}
.as-champ-boite:focus-within{border-color:var(--encre)}
.as-unite{color:var(--encre-tres-doux);font-size:1rem;flex:0 0 auto}
.as-mensualite{margin-top:12px;font-size:.88rem;font-weight:300;
  color:var(--encre-doux);line-height:1.5;max-width:52ch}

/* La mensualité sous le prix d'une piste. */
.as-mois{display:block;margin-top:4px;font-size:.8rem;font-weight:300;
  color:var(--encre-doux)}

/* ── Les souhaits écrits ─────────────────────────────────────── */
.as-dire{margin-top:clamp(22px,3vw,32px)}
.as-dire label{display:block;font-size:0.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--encre-tres-doux);font-weight:600}
.as-dire-ligne{display:flex;flex-wrap:wrap;gap:9px;margin-top:11px}
.as-dire-ligne input{flex:1 1 220px;min-width:0;border:1px solid var(--trait);
  background:#fff;padding:0 15px;min-height:52px;font-size:.92rem;color:var(--encre)}
.as-dire-ligne input:focus{outline:none;border-color:var(--encre)}
.as-dire-ligne button{cursor:pointer;background:#fff;border:1px solid var(--encre);
  color:var(--encre);padding:0 22px;min-height:52px;
  font-size:0.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  transition:background-color .2s var(--ease),color .2s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .as-dire-ligne button:hover{background:var(--encre);color:#fff}
}
.as-echo{margin-top:10px;font-size:.85rem;font-weight:300;color:var(--encre-doux);
  line-height:1.5}


/* ── Le visuel en grand ───────────────────────────────────────
   Trois cents pixels de côté ne suffisent pas à juger un cadran : la
   même pile de calques, à la même règle d'échelle, se pose plein
   écran. C'est le geste qu'offre déjà l'atelier sur sa montre. */
.as-zoom{position:fixed;inset:0;z-index:140;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,3vw,40px)}
.as-zoom[hidden]{display:none}
.as-zoom-voile{position:absolute;inset:0;background:rgba(11,11,13,.82);
  animation:as-voile .28s var(--ease) both}
@keyframes as-voile{from{opacity:0}}
.as-zoom-boite{position:relative;z-index:1;width:min(94vw,720px);
  max-height:100%;overflow:auto;background:var(--papier);
  animation:as-monte .34s var(--ease) both}
@keyframes as-monte{from{opacity:0;transform:translateY(12px)}}
.as-zoom-scene{position:relative;aspect-ratio:1;background:var(--creme);
  overflow:hidden}
.as-zoom-scene .as-pile{transform:scale(1.18)}
.as-zoom-nom{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:8px 18px;
  padding:clamp(14px,2vw,20px) clamp(16px,2.2vw,24px);
  border-top:1px solid var(--trait)}
.as-zoom-nom b{font-family:var(--display);font-size:1.3rem;
  text-transform:uppercase;letter-spacing:.02em;line-height:1}
.as-zoom-nom span{font-size:1.05rem;font-weight:500;
  font-variant-numeric:tabular-nums}
.as-zoom-fermer{position:absolute;top:10px;right:10px;z-index:2;cursor:pointer;
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);border:1px solid var(--trait);
  color:var(--encre);font-size:1.5rem;line-height:1;
  transition:background .25s var(--ease),color .25s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .as-zoom-fermer:hover{background:var(--encre);border-color:var(--encre);color:#fff}
}
body.as-zoom-on{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  .as-zoom-voile,.as-zoom-boite{animation:none}
  .as-pile{transition:none}
}

/* ── Le garde-fou du budget ───────────────────────────────────
   « J'ai piégé le configurateur : chrono et squelette avec 9 000 €,
   et il m'a proposé du 11 850 €. » Le plancher se dit maintenant au
   moment où le budget se saisit, avec le chiffre exact et de quoi
   changer d'avis — relever le budget, ou lâcher une contrainte. */
.as-garde{margin-top:clamp(16px,2vw,22px);padding:clamp(14px,1.8vw,18px) clamp(16px,2vw,20px);
  background:var(--creme);border-left:2px solid var(--trait)}
.as-garde[hidden]{display:none}
.as-garde-alerte{border-left-color:var(--laque);background:var(--laque-doux)}
.as-garde-mot{font-size:.88rem;font-weight:300;color:var(--encre-doux);line-height:1.5}
.as-garde-alerte .as-garde-mot{color:var(--encre)}
.as-garde-actes{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.as-garde-actes button{cursor:pointer;background:#fff;border:1px solid var(--encre);
  padding:10px 16px;min-height:44px;
  font-size:0.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  transition:background .22s var(--ease),color .22s var(--ease)}
.as-garde-actes button:first-child{background:var(--encre);color:#fff}
@media (hover:hover) and (pointer:fine){
  .as-garde-actes button:hover{background:var(--laque);border-color:var(--laque);color:#fff}
}