/* ============================================================
   Balancier — composants applicatifs
   ============================================================ */

/* ============ ACCUEIL ============ */
.hero{
  min-height:calc(100vh - var(--hud-h));
  display:grid;align-items:center;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(24px,5vw,64px);
  padding-block:clamp(40px,7vw,90px);
}
@media (max-width:940px){
  .hero{grid-template-columns:1fr;text-align:center}
  .hero .hero-copy{order:2}
  .hero .hero-visual{order:1}
  .hero .lead{margin-inline:auto}
  .hero .hero-cta{justify-content:center}
}
.hero h1{margin-block:14px 18px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero-visual{position:relative;display:grid;place-items:center;min-height:min(62vh,520px)}
.hero-visual .halo{
  position:absolute;width:min(78%,440px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(232,182,76,.28),transparent 66%);
  filter:blur(28px);animation:pulseGlow 5s ease-in-out infinite;
}
.hero-carousel{position:relative;width:min(100%,430px);aspect-ratio:1;display:grid;place-items:center}
.hero-carousel .slot{
  position:absolute;inset:0;display:grid;place-items:center;
  opacity:0;transform:scale(.9) rotate(-6deg);
  transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);
}
.hero-carousel .slot.on{opacity:1;transform:none}
.hero-carousel svg{width:min(100%,400px);height:auto;filter:drop-shadow(0 34px 60px rgba(0,0,0,.75))}
.hero-tag{
  position:absolute;bottom:2%;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  padding:8px 16px;border-radius:999px;
  background:rgba(12,14,20,.86);border:1px solid var(--line-strong);
  backdrop-filter:blur(10px);font-size:.82rem;
}

.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:36px}
.stat{padding:16px 18px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.stat b{display:block;font-family:var(--font-display);font-size:1.7rem;letter-spacing:-.03em;line-height:1}
.stat span{font-size:.78rem;color:var(--t3)}

.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px}
.flow-card{
  position:relative;padding:24px 22px 26px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);overflow:hidden;
  transition:transform .2s cubic-bezier(.2,.9,.3,1.2),border-color .2s;
}
.flow-card:hover{transform:translateY(-5px);border-color:var(--line-strong)}
.flow-card .n{
  font-family:var(--font-mono);font-size:2.6rem;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(232,182,76,.55);
  margin-bottom:12px;display:block;
}
.flow-card h3{margin-bottom:7px}
.flow-card p{font-size:.88rem;color:var(--t2)}

/* ============ QUESTIONNAIRE ============ */
.quiz{max-width:900px;margin-inline:auto;padding-block:clamp(24px,4vw,44px)}
.q-card{animation:fadeUp .45s cubic-bezier(.2,.8,.2,1) both}
.q-counter{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.16em;color:var(--t3);text-transform:uppercase}
.q-title{margin:10px 0 8px;font-size:clamp(1.5rem,3.4vw,2.25rem)}
.q-help{color:var(--t2);font-size:.94rem;margin-bottom:26px;max-width:60ch}
.q-nav{display:flex;align-items:center;gap:12px;margin-top:32px;flex-wrap:wrap}
.q-hint{font-size:.78rem;color:var(--t3);display:flex;align-items:center;gap:6px}
kbd{
  display:inline-block;padding:2px 7px;border-radius:6px;min-width:22px;text-align:center;
  background:var(--surface-2);border:1px solid var(--line-strong);border-bottom-width:2px;
  font-family:var(--font-mono);font-size:.72rem;color:var(--t2);
}

/* Curseur avec description vivante */
.spectrum{display:grid;gap:6px}
.spectrum-ends{display:flex;justify-content:space-between;font-size:.84rem;color:var(--t2);font-weight:600}
.spectrum-read{
  margin-top:14px;padding:14px 18px;border-radius:var(--r);
  background:var(--gold-soft);border:1px solid rgba(232,182,76,.3);
  font-size:.92rem;color:#f2d597;
}

/* Bandes de budget */
.budget-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:10px}
.budget-opt{
  padding:18px 14px;border-radius:var(--r);text-align:center;
  background:var(--surface);border:1px solid var(--line);
  transition:transform .16s cubic-bezier(.2,.9,.3,1.2),border-color .18s,background .18s;
}
.budget-opt:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.budget-opt b{display:block;font-family:var(--font-display);font-size:1.12rem;letter-spacing:-.02em}
.budget-opt span{font-size:.74rem;color:var(--t3)}
.budget-opt[aria-pressed="true"]{
  border-color:var(--gold);
  background:linear-gradient(160deg,rgba(232,182,76,.18),rgba(232,182,76,.05));
  box-shadow:0 0 0 1px rgba(232,182,76,.4);
}

/* ============ ÉTAPE SPECS : aperçu live ============ */
.specs-layout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);
  gap:clamp(20px,3vw,40px);align-items:start;
}
@media (max-width:1000px){.specs-layout{grid-template-columns:1fr}}
.preview-rail{position:sticky;top:calc(var(--hud-h) + 18px)}
@media (max-width:1000px){
  .preview-rail{
    position:sticky;top:var(--hud-h);z-index:40;
    background:rgba(7,8,12,.9);backdrop-filter:blur(16px);
    margin-inline:calc(var(--pad) * -1);padding:12px var(--pad);
    border-bottom:1px solid var(--line);
  }
  .preview-rail .preview-inner{display:grid;grid-template-columns:132px 1fr;gap:14px;align-items:center}
  .preview-rail .card{padding:0;background:none;border:0;backdrop-filter:none}
}
.preview-stage{
  position:relative;display:grid;place-items:center;
  padding:10px;border-radius:var(--r-lg);
  background:radial-gradient(circle at 50% 34%,rgba(255,255,255,.07),transparent 62%);
}
.preview-stage svg{width:100%;height:auto;filter:drop-shadow(0 26px 46px rgba(0,0,0,.7))}
.preview-specs{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}

/* Poignet : aide à la taille */
.wrist-vis{display:grid;place-items:center;padding:8px 0}
.wrist-vis svg{width:100%;max-width:440px;height:auto}
.size-verdict{
  margin-top:10px;padding:12px 16px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--surface);font-size:.86rem;color:var(--t2);
}
.size-verdict b{color:var(--t1)}

/* ============ ARÈNE (élimination) ============ */
/* La montre est ce qu'on juge : elle doit occuper l'écran, pas le partager
   avec ses métadonnées. La colonne latérale est passée de 370 à 250 px et le
   jeu de cartes de 64 à 74 % de la hauteur — la photo y gagne environ le
   double de surface. */
.arena{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,292px);
  gap:clamp(16px,2.2vw,26px);align-items:start;
  padding-block:clamp(14px,2.2vw,26px);
}
@media (max-width:1180px){.arena{grid-template-columns:1fr}}

/* La hauteur se calcule sur ce qui reste, pas sur un pourcentage de la
   fenêtre : au-dessus il y a le bandeau d'étapes et le titre, en dessous les
   cinq boutons de jugement. Un simple « 74vh » les poussait sous la ligne de
   flottaison — il fallait défiler pour juger, ce qui est absurde. */
.deck{position:relative;height:clamp(380px,calc(100vh - 332px),720px);perspective:1400px}
.deck-card{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(170deg,#12141d,#0a0c12);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow);
  will-change:transform,opacity;
  touch-action:pan-y;
  user-select:none;-webkit-user-select:none;
}
.deck-card[data-depth="1"]{transform:translateY(16px) scale(.955);opacity:.72;filter:brightness(.78)}
.deck-card[data-depth="2"]{transform:translateY(30px) scale(.912);opacity:.4;filter:brightness(.6)}
.deck-card[data-depth="3"]{transform:translateY(42px) scale(.875);opacity:.16;filter:brightness(.5)}
.deck-card.animating{transition:transform .38s cubic-bezier(.3,.8,.4,1),opacity .38s}
.deck-card .card-art{
  position:relative;flex:1 1 auto;min-height:0;
  display:grid;place-items:center;padding:10px;
  background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.085),transparent 64%);
}
.deck-card .card-art svg.watch{height:100%;width:auto;max-width:100%;filter:drop-shadow(0 24px 40px rgba(0,0,0,.7))}
.deck-card .card-art .wfig.is-photo img{
  border-radius:var(--r);box-shadow:0 24px 44px rgba(0,0,0,.6);
}
.deck-card .card-meta{
  flex:0 0 auto;
  padding:13px 20px 15px;
  background:linear-gradient(180deg,rgba(10,12,18,0),rgba(10,12,18,.96) 34%);
  border-top:1px solid var(--line);
}
/* La phrase éditoriale donne son caractère à la carte, mais elle ne doit pas
   pousser la photo vers le haut : deux lignes, puis on coupe. Le texte entier
   reste lisible dans la fiche détaillée (bouton ⓘ). */
.deck-why{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.deck-brand{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.deck-model{font-family:var(--font-display);font-size:clamp(1.15rem,2.4vw,1.6rem);letter-spacing:-.025em;margin:3px 0 9px;line-height:1.15}
.deck-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.deck-why{font-size:.83rem;color:var(--t2);line-height:1.45}
.deck-price{
  position:absolute;top:14px;right:14px;z-index:3;
  padding:7px 14px;border-radius:999px;
  background:rgba(8,10,15,.82);border:1px solid var(--line-strong);
  backdrop-filter:blur(10px);
  font-family:var(--font-mono);font-size:.84rem;color:var(--gold);
}
.deck-rank{
  position:absolute;top:14px;left:14px;z-index:3;
  padding:7px 12px;border-radius:999px;
  background:rgba(8,10,15,.82);border:1px solid var(--line-strong);
  backdrop-filter:blur(10px);font-size:.74rem;color:var(--t2);
}
.deck-rank b{color:var(--lime)}
/* Estampilles OUI / NON pendant le swipe */
.stamp{
  position:absolute;top:26%;z-index:5;
  padding:10px 22px;border-radius:14px;
  font-family:var(--font-display);font-weight:700;font-size:1.55rem;letter-spacing:.06em;
  border:3px solid currentColor;opacity:0;pointer-events:none;
  transition:opacity .12s;
}
.stamp-yes{left:26px;color:var(--lime);transform:rotate(-14deg)}
.stamp-no{right:26px;color:var(--rose);transform:rotate(14deg)}

.deck-actions{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px;flex-wrap:wrap}
.act{
  width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;font-size:1.4rem;
  background:var(--surface-2);border:1px solid var(--line-strong);
  transition:transform .16s cubic-bezier(.2,.9,.3,1.2),background .2s,box-shadow .2s,border-color .2s;
}
.act:hover{transform:translateY(-4px) scale(1.06)}
.act:active{transform:scale(.94)}
.act-no:hover{border-color:var(--rose);color:var(--rose);box-shadow:0 12px 30px -12px rgba(251,111,132,.8)}
.act-yes:hover{border-color:var(--lime);color:var(--lime);box-shadow:0 12px 30px -12px rgba(140,224,106,.8)}
.act-love{width:70px;height:70px;font-size:1.6rem}
.act-love:hover{border-color:var(--gold);color:var(--gold);box-shadow:0 12px 34px -12px rgba(232,182,76,.9)}
.act-sm{width:46px;height:46px;font-size:1rem}

/* Panneau latéral de l'arène */
.side-block{margin-bottom:16px}
.side-title{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--t3);margin-bottom:11px;
}
.taste-bars{display:grid;gap:9px}
.taste-bar{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:center;font-size:.78rem;color:var(--t2)}
.mini-list{display:grid;gap:8px}
.mini{
  display:grid;grid-template-columns:38px 1fr auto;gap:9px;align-items:center;
  padding:7px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--line);
  transition:border-color .18s,background .18s;text-align:left;width:100%;
}
/* Dans la colonne rétrécie de l'arène, un nom long se casse sur trois lignes
   et déforme la rangée. On coupe plutôt : le classement se lit d'un coup
   d'œil, le nom complet est dans la fiche. */
.mini .m-name,.mini .m-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini:hover{border-color:var(--line-strong);background:var(--surface-2)}
.mini svg{width:100%;height:auto}
.mini .m-name{font-size:.82rem;font-weight:600;line-height:1.2}
.mini .m-sub{font-size:.7rem;color:var(--t3)}
.mini .m-score{font-family:var(--font-mono);font-size:.76rem;color:var(--gold)}

/* ============ RECHERCHE INTERNET ============ */
.search-box{display:flex;gap:8px;flex-wrap:wrap}
.search-input{
  flex:1;min-width:200px;
  padding:12px 16px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line-strong);
  font-size:.9rem;
}
.search-input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan-soft)}
.sugg-queries{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.sugg{
  padding:6px 12px;border-radius:999px;font-size:.76rem;
  background:var(--cyan-soft);border:1px solid rgba(72,201,240,.3);color:#a5dff5;
  transition:transform .15s,background .18s;text-align:left;
}
.sugg:hover{transform:translateY(-2px);background:rgba(72,201,240,.22)}
.results{display:grid;gap:9px;margin-top:16px}
.result{
  display:block;padding:13px 15px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);
  transition:border-color .18s,background .18s,transform .16s;
}
.result:hover{border-color:var(--cyan);background:var(--surface-2);transform:translateX(3px)}
.result .r-title{font-size:.9rem;font-weight:600;line-height:1.3;color:var(--t1)}
.result .r-url{font-size:.72rem;color:var(--cyan);margin-top:3px;word-break:break-all}
.result .r-desc{font-size:.79rem;color:var(--t2);margin-top:6px;line-height:1.45}
.search-status{
  display:flex;align-items:center;gap:9px;
  font-size:.8rem;color:var(--t3);padding:10px 0;
}
.notice{
  padding:12px 15px;border-radius:var(--r);font-size:.82rem;line-height:1.5;
  background:rgba(72,201,240,.08);border:1px solid rgba(72,201,240,.24);color:#a9d9ec;
}
.notice.warn{background:rgba(232,182,76,.08);border-color:rgba(232,182,76,.26);color:#e8cd93}

/* ============ RÉSULTAT ============ */
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:end}
@media (max-width:760px){.podium{grid-template-columns:1fr}}
.podium-card{
  padding:18px;border-radius:var(--r-lg);text-align:center;
  background:var(--surface);border:1px solid var(--line);
  transition:transform .2s cubic-bezier(.2,.9,.3,1.2),border-color .2s;
}
.podium-card:hover{transform:translateY(-5px);border-color:var(--line-strong)}
.podium-card.first{
  border-color:rgba(232,182,76,.5);
  background:linear-gradient(170deg,rgba(232,182,76,.13),rgba(232,182,76,.02));
  box-shadow:0 22px 60px -26px rgba(232,182,76,.7);
}
.hero-watch{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(20px,4vw,50px);align-items:center;
}
@media (max-width:860px){.hero-watch{grid-template-columns:1fr}}
.spec-table{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.spec-cell{padding:14px 16px;background:#0c0e15}
.spec-cell dt{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);font-family:var(--font-mono)}
.spec-cell dd{font-size:.94rem;margin-top:4px;font-weight:500}
.match-grid{display:grid;gap:11px}
.match-line{display:grid;grid-template-columns:130px 1fr 44px;gap:12px;align-items:center;font-size:.84rem}
.match-line .mv{font-family:var(--font-mono);font-size:.78rem;color:var(--gold);text-align:right}

/* ============ DEAL / PRIX ============ */
.deal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:13px}
.deal-card{
  display:flex;flex-direction:column;gap:8px;
  padding:18px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);
  transition:transform .18s cubic-bezier(.2,.9,.3,1.2),border-color .2s,background .2s;
}
.deal-card:hover{transform:translateY(-4px);border-color:var(--gold);background:var(--surface-2)}
.deal-card .d-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.deal-card .d-logo{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--surface-3);border:1px solid var(--line-strong);
  font-family:var(--font-display);font-weight:700;font-size:.9rem;
}
.deal-card h4{font-family:var(--font-display);font-size:1rem;letter-spacing:-.01em}
.deal-card p{font-size:.8rem;color:var(--t3);line-height:1.45;flex:1}
.deal-card .d-go{font-size:.78rem;color:var(--gold);display:flex;align-items:center;gap:5px}
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:999px;font-size:.66rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
}
.badge-off{background:rgba(140,224,106,.16);color:var(--lime)}
.badge-occ{background:rgba(72,201,240,.16);color:var(--cyan)}
.badge-cote{background:rgba(157,123,245,.16);color:#bfa7fb}

.price-scale{
  position:relative;height:86px;margin:26px 0 10px;
  border-radius:var(--r);background:var(--surface);border:1px solid var(--line);
}
/* Piste interne : repères et zone se positionnent tous en % de CETTE boîte,
   sinon les pourcentages et les marges en pixels ne coïncident pas. */
.price-scale .ps-track{position:absolute;left:26px;right:26px;top:0;bottom:0}
.price-scale .bar{position:absolute;left:0;right:0;top:46px;height:6px;border-radius:999px;background:rgba(255,255,255,.1)}
.price-scale .zone{position:absolute;top:46px;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--lime),var(--gold))}
.price-scale .pin{position:absolute;top:30px;width:2px;height:38px;background:var(--t1);border-radius:2px}
.price-scale .pin span{
  position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  white-space:nowrap;font-family:var(--font-mono);font-size:.72rem;color:var(--t1);
}
.price-scale .pin.left span{left:0;transform:none}
.price-scale .pin.right span{left:auto;right:0;transform:none}
.price-scale .zone-label{
  position:absolute;top:60px;font-size:.68rem;color:var(--t3);
  transform:translateX(-50%);white-space:nowrap;
}
.checklist{display:grid;gap:9px}
.check-item{
  display:flex;gap:11px;align-items:flex-start;
  padding:12px 14px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);
  text-align:left;width:100%;transition:border-color .18s,background .18s;
}
.check-item:hover{border-color:var(--line-strong)}
.check-item .box{
  width:20px;height:20px;border-radius:6px;flex:none;margin-top:1px;
  border:1.5px solid var(--line-strong);display:grid;place-items:center;
  font-size:.7rem;color:transparent;transition:background .18s,border-color .18s,color .18s;
}
.check-item[aria-pressed="true"] .box{background:var(--lime);border-color:var(--lime);color:#0b1806}
.check-item[aria-pressed="true"] .ci-title{text-decoration:line-through;color:var(--t3)}
.check-item .ci-title{font-size:.88rem;font-weight:600}
.check-item .ci-desc{font-size:.78rem;color:var(--t3);margin-top:2px;line-height:1.45}

/* ============ ÉTATS VIDES ============ */
.empty{
  display:grid;place-items:center;gap:14px;text-align:center;
  padding:clamp(34px,7vw,72px) 20px;
  border:1px dashed var(--line-strong);border-radius:var(--r-lg);
}
.empty .big{font-size:2.6rem;opacity:.65}

/* ============ PIED DE PAGE ============ */
.foot{
  border-top:1px solid var(--line);padding-block:30px;margin-top:50px;
  font-size:.8rem;color:var(--t3);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;
}
.foot a{color:var(--t2)}
.foot a:hover{color:var(--gold)}

/* ============ MODALE ============ */
.modal-back{
  position:fixed;inset:0;z-index:150;
  background:rgba(4,5,9,.78);backdrop-filter:blur(10px);
  display:grid;place-items:center;padding:var(--pad);
  animation:fadeIn .22s both;
}
.modal{
  width:min(760px,100%);max-height:86vh;overflow:auto;
  background:#0c0e15;border:1px solid var(--line-strong);
  border-radius:var(--r-xl);padding:clamp(20px,3vw,32px);
  box-shadow:var(--shadow);animation:fadeUp .3s cubic-bezier(.2,.8,.2,1) both;
}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}

/* Les raccourcis clavier n'existent pas sur un écran tactile :
   on affiche à la place l'instruction qui, elle, s'applique. */
.kbd-hint .touch-only{display:none}
@media (hover:none) and (pointer:coarse){
  .kbd-hint .keys-only{display:none}
  .kbd-hint .touch-only{display:inline}
}

/* ============ VISUEL D'UNE MONTRE ============
   La photo réelle est l'affichage normal. Le rendu vectoriel ne sert plus
   qu'à occuper la place pendant la résolution, et de repli quand aucune
   photo n'existe pour ce modèle. */
.wfig{
  position:relative;margin:0;width:100%;height:100%;
  min-height:0;min-width:0;overflow:hidden;
  display:grid;place-items:center;
}
/* Dans une grille centrée, la hauteur de la case est indéfinie : un
   « max-height:100% » sur l'image n'y contraint rien et la photo déborde
   sur le texte. On donne donc à la figure une taille définie. */
/* width/height à 100% l'emporteraient sur « inset » et annuleraient le calage. */
.deck-card .card-art .wfig{position:absolute;inset:16px;width:auto;height:auto}
/* « height:auto » ci-dessus casse la chaîne des pourcentages : le conteneur
   du vectoriel ne peut plus mesurer « height:100% » contre rien, il prend la
   hauteur naturelle du dessin (1285 px pour une carte de 287) et le
   « overflow:hidden » de .wfig rogne tout le bas — on ne voyait qu'un bout du
   bracelet. En le positionnant sur les bords de la figure, sa boîte redevient
   définie et le « max-height:100% » du SVG s'applique enfin. */
.deck-card .card-art .wfig .wfig-svg{position:absolute;inset:0}
.wfig .wfig-svg{
  width:100%;height:100%;display:grid;place-items:center;
  transition:opacity .35s ease;
}
.wfig .wfig-svg svg{max-height:100%;width:auto;max-width:100%}
/* La photo se superpose au rendu vectoriel plutôt que de le remplacer dans
   le flux : « object-fit: contain » sur une boîte définie évite à la fois le
   débordement et le rognage, quel que soit le format de la photo. */
.wfig img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;border-radius:14px;
  opacity:0;transition:opacity .45s ease;
  /* L'image couvre toute la figure, crédit compris : sans ça elle
     intercepte les clics et le bouton « photo suivante » devient
     inatteignable. Elle n'est de toute façon pas interactive. */
  pointer-events:none;
}
.wfig.is-photo img{opacity:1}
/* On masque le vectoriel sans le retirer du flux : c'est lui qui donne sa
   taille à la figure, et « display:none » la ferait s'effondrer à zéro. */
.wfig.is-photo .wfig-svg{visibility:hidden}
.wfig.is-loading .wfig-svg{opacity:.4}
.wfig.is-loading::after{
  content:"";position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  width:22px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  background-size:200% 100%;animation:shimmer 1.1s infinite linear;
}
.wfig-credit{
  position:relative;z-index:2;
  display:block;margin-top:7px;font-size:.68rem;color:var(--t3);
  text-align:center;line-height:1.35;
}
.wfig-credit a{color:var(--cyan)}
.wfig-credit a:hover{text-decoration:underline}
.wfig-fallback{
  display:block;margin-top:7px;font-size:.68rem;color:var(--t3);text-align:center;
}

/* Provenance d'une montre venue du marché plutôt que du catalogue. */
.deck-source{
  position:absolute;top:56px;left:14px;z-index:3;
  padding:5px 11px;border-radius:999px;
  background:rgba(72,201,240,.16);border:1px solid rgba(72,201,240,.4);
  backdrop-filter:blur(10px);
  font-size:.7rem;color:#a5dff5;white-space:nowrap;
}
.wfig-next{
  font:inherit;font-size:.68rem;color:var(--cyan);
  background:none;border:0;padding:0;text-decoration:underline;cursor:pointer;
}
.wfig-next:hover{color:var(--gold)}

/* Le triangle natif des <details> jure avec le reste : on le remplace par le
   mot « voir », qui bascule en « masquer » une fois ouvert. */
details.side-block summary::-webkit-details-marker{display:none}
details.side-block summary::marker{content:""}
details.side-block[open] summary .dim::after{content:""}
details.side-block[open] summary .dim{visibility:hidden}
details.side-block[open] summary::after{content:"masquer";font-size:.72rem;color:var(--t3)}

/* ============ ÉTAPE 5 — LE PRIX ============
   On est sur le point de dépenser plusieurs milliers d'euros pour cette
   montre : elle occupe la moitié de l'écran, et la réponse chiffrée qu'on
   est venu chercher est à côté d'elle, pas trois sections plus bas. */
.deal-hero{
  display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);
  gap:clamp(20px,3vw,40px);align-items:center;
  padding-block:clamp(18px,3vw,36px);
}
@media (max-width:860px){.deal-hero{grid-template-columns:1fr;gap:18px}}
.deal-hero .dh-photo{
  aspect-ratio:1;border-radius:var(--r-lg);overflow:hidden;
  background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.07),transparent 65%),#0f1118;
  border:1px solid var(--line);display:grid;place-items:center;padding:12px;
}
.deal-hero .dh-photo .wfig{width:100%;height:100%}
.dh-titre{font-family:var(--font-display);font-size:clamp(1.5rem,3.2vw,2.3rem);
  letter-spacing:-.025em;line-height:1.1;margin:2px 0 4px}

/* Les deux prix sont la réponse : ils se lisent de loin. */
.prix-duo{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,38px);margin-bottom:18px}
.pr-bloc{display:flex;flex-direction:column;gap:2px}
.pr-etiq{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--t3)}
.pr-val{font-family:var(--font-display);font-size:clamp(1.35rem,2.8vw,2rem);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1}
.pr-accent{color:var(--gold)}
.pr-gain{color:var(--lime)}
.pr-chaud{color:var(--rose)}

/* Les conseils restent disponibles mais ne coûtent plus deux écrans de
   défilement à qui veut simplement les liens d'achat. */
.pliable{
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);padding:14px 18px;margin-bottom:12px;
}
.pliable > summary{
  cursor:pointer;list-style:none;display:flex;flex-direction:column;gap:2px;
}
.pliable > summary::-webkit-details-marker{display:none}
.pliable > summary::marker{content:""}
.pliable .pl-titre{font-family:var(--font-display);font-size:1.05rem}
.pliable .pl-titre::before{content:"▸ ";color:var(--gold)}
.pliable[open] .pl-titre::before{content:"▾ "}
.pliable .pl-note{font-size:.78rem;color:var(--t3)}
.pliable:hover{border-color:var(--line-strong)}

/* ============ LE PODIUM DE L'ARÈNE ============
   C'est le résultat des choix : les montres qui ressortent du goût qu'on
   vient d'exprimer. Des vignettes de 38 px n'en montraient rien. On donne
   donc une vraie photo à la première — celle qui compte — et deux photos
   côte à côte aux suivantes, ce qui tient dans la colonne sans pousser les
   boutons de jugement hors de l'écran. */
.podium{display:flex;flex-direction:column;gap:10px}

.pod-card{
  display:block;width:100%;text-align:left;padding:0;overflow:hidden;
  border-radius:var(--r);background:var(--surface);border:1px solid var(--line);
  transition:border-color .18s,transform .18s,background .18s;
}
.pod-card:hover{border-color:var(--gold);background:var(--surface-2);transform:translateY(-2px)}
.pod-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.pod-photo{position:relative;width:100%;background:#0f1118;display:grid;place-items:center;aspect-ratio:4/3}
.pod-photo .wfig{width:100%;height:100%}
.pod-photo img{width:100%;height:100%;object-fit:contain}

.pod-rang{
  position:absolute;top:6px;left:6px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--font-mono);font-size:.7rem;font-weight:700;
  background:rgba(7,8,12,.85);border:1px solid var(--line-strong);color:var(--t2);backdrop-filter:blur(6px);
}
/* Les trois sont montrées à la même taille : c'est le numéro doré qui dit
   laquelle mène, pas la surface qu'elle occupe. */
.pod-card:first-child .pod-rang{background:var(--gold);color:#181103;border-color:transparent}
.pod-score{
  position:absolute;bottom:6px;right:6px;padding:2px 7px;border-radius:999px;
  font-family:var(--font-mono);font-size:.66rem;font-weight:700;color:var(--lime);
  background:rgba(7,8,12,.85);border:1px solid rgba(140,224,106,.35);backdrop-filter:blur(6px);
}
.pod-texte{padding:8px 10px 10px}
.pod-marque{font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--t3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod-nom{font-size:.88rem;font-weight:600;line-height:1.25;margin-top:1px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pod-vide{padding:18px 10px;text-align:center;font-size:.76rem;color:var(--t3)}

/* Le compteur d'envies, discret mais lisible depuis n'importe quelle étape. */
.hud-wish{white-space:nowrap}

/* ---- les trois piliers dans l'en-tête ---- */
.hud-piliers{display:flex;align-items:center;gap:6px;margin-left:auto}
.hud-piliers-seuls .hud-piliers{margin-left:auto}
.hud-pilier{
  --c:var(--t2);--c-soft:var(--surface-2);
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;border-radius:999px;
  font-size:.82rem;font-weight:600;color:var(--t2);white-space:nowrap;
  border:1px solid transparent;
  transition:color .2s,background .2s,border-color .2s;
}
.hud-pilier.p-trouver{--c:var(--c-trouver);--c-soft:var(--c-trouver-soft)}
.hud-pilier.p-desirer{--c:var(--c-desirer);--c-soft:var(--c-desirer-soft)}
.hud-pilier.p-porter{--c:var(--c-porter);--c-soft:var(--c-porter-soft)}
.hud-pilier svg{
  width:17px;height:17px;flex:none;
  fill:none;stroke:var(--c);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.hud-pilier:hover{color:var(--t1);background:var(--surface-2)}
.hud-pilier.ici{color:var(--t1);background:var(--c-soft);border-color:color-mix(in srgb,var(--c) 40%,transparent)}
.hud-pilier .hp-n{
  min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  display:inline-grid;place-items:center;
  background:var(--c);color:#0b0d14;font-size:.68rem;font-weight:800;
}
/* sur téléphone, les libellés tombent : l'icône et le compteur suffisent */
@media (max-width:620px){
  .hud-pilier{padding:7px 9px}
  .hud-pilier .hp-label{display:none}
}
.hud-wish .wish-n{
  display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  margin-left:4px;border-radius:999px;background:var(--gold);color:#181103;
  font-family:var(--font-mono);font-size:.68rem;font-weight:700;
}
@media (max-width:720px){.hud-wish{padding-inline:9px}}

/* ============ LA LISTE D'ENVIES ============
   Trois provenances cohabitent : le catalogue, une annonce réelle, et ce
   qu'on a noté à la main. Chacune porte son étiquette — sans quoi on ne
   sait plus d'où vient une ligne au bout de trois semaines. */
.wish-ajout{padding:clamp(14px,2vw,20px)}
.wish-onglets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.wo{
  padding:7px 14px;border-radius:999px;font-size:.84rem;font-weight:600;
  background:var(--surface);border:1px solid var(--line);color:var(--t2);
}
.wo:hover{background:var(--surface-2);color:var(--t1)}
.wo[aria-selected="true"]{background:var(--gold-soft);border-color:var(--gold);color:var(--gold)}
.wo:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.wish-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.wish-form label{display:flex;flex-direction:column;gap:5px;font-size:.78rem;color:var(--t3)}
.wish-form .search-input{width:100%}

.wish-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.wish-carte{
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r);background:var(--surface);border:1px solid var(--line);
  transition:border-color .18s;
}
.wish-carte:hover{border-color:var(--line-strong)}
.wc-photo{position:relative;aspect-ratio:4/3;background:#0f1118;display:grid;place-items:center;padding:8px}
.wc-photo .wfig{width:100%;height:100%}
.wc-photo img{width:100%;height:100%;object-fit:contain}
.wc-vide{font-size:1.8rem;color:var(--t3)}
.wc-origine{
  position:absolute;top:7px;left:7px;padding:2px 8px;border-radius:999px;
  font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:rgba(7,8,12,.85);border:1px solid var(--line-strong);backdrop-filter:blur(6px);
}
.wc-origine.est-cat{color:var(--gold);border-color:rgba(232,182,76,.4)}
.wc-origine.est-marche{color:var(--cyan);border-color:rgba(72,201,240,.4)}
.wc-origine.est-libre{color:var(--violet);border-color:rgba(157,123,245,.4)}
.wc-aff{
  position:absolute;bottom:7px;right:7px;padding:2px 8px;border-radius:999px;
  font-family:var(--font-mono);font-size:.66rem;font-weight:700;color:var(--lime);
  background:rgba(7,8,12,.85);border:1px solid rgba(140,224,106,.35);backdrop-filter:blur(6px);
}
.wc-corps{padding:12px 14px 14px;display:flex;flex-direction:column;flex:1}
.wc-marque{font-size:.63rem;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.wc-modele{font-family:var(--font-display);font-size:.98rem;line-height:1.2;margin:2px 0 6px}
.wc-prix{font-family:var(--font-mono);font-size:.86rem;color:var(--gold);font-variant-numeric:tabular-nums}
.wc-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:12px}
.wc-actions .btn{font-size:.74rem;padding:6px 10px}
.wc-sup:hover{color:var(--rose);border-color:rgba(251,111,132,.45)}

/* Les résultats du marché n'ont pas de rendu vectoriel : juste leur photo. */
.mini .mini-img{width:100%;aspect-ratio:1;background:#0f1118;border-radius:8px;overflow:hidden;
  display:grid;place-items:center}
.mini .mini-img img{width:100%;height:100%;object-fit:contain}

/* ---- outils photo de la liste d'envies ---- */
.photo-zone{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;margin-top:16px}
.pz-apercu{
  width:120px;aspect-ratio:1;border-radius:var(--r-sm);background:#0f1118;
  border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;flex:0 0 auto;
}
.pz-apercu img{width:100%;height:100%;object-fit:contain}
.pz-vide{font-size:.72rem;color:var(--t3);text-align:center;padding:8px}
.pz-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.pz-fichier{cursor:pointer}
.pz-candidates{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
/* le champ « coller un lien » et son bouton, sur une ligne */
.aj-ligne{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.aj-ligne .search-input{flex:1 1 220px;min-width:0}
.pz-candidates img{
  width:74px;height:74px;object-fit:contain;background:#0f1118;cursor:pointer;
  border:2px solid var(--line);border-radius:var(--r-sm);transition:border-color .15s;
}
.pz-candidates img:hover{border-color:var(--line-strong)}
.pz-candidates img.choisie{border-color:var(--gold)}

/* ---- ce que la carte dit en plus ---- */
.wish-carte.est-acquise{opacity:.72}
.wish-carte.est-acquise:hover{opacity:1}
.wc-prio{
  position:absolute;top:7px;right:7px;padding:2px 7px;border-radius:999px;
  font-size:.66rem;letter-spacing:.04em;
  background:rgba(7,8,12,.85);border:1px solid var(--line-strong);backdrop-filter:blur(6px);
}
.wc-prio.p1{color:var(--t2)}
.wc-prio.p2{color:var(--gold)}
.wc-prio.p3{color:var(--gold);border-color:var(--gold);background:var(--gold-soft)}
.wc-acquise{
  position:absolute;bottom:7px;left:7px;padding:2px 8px;border-radius:999px;
  font-size:.64rem;font-weight:700;color:var(--lime);
  background:rgba(7,8,12,.85);border:1px solid rgba(140,224,106,.4);backdrop-filter:blur(6px);
}
.wc-ecart{font-size:.72rem;margin-top:6px}
.wc-ecart.atteint{color:var(--lime)}
.wc-ecart.au-dessus{color:var(--t3)}
.wc-note{
  font-size:.74rem;color:var(--t2);margin-top:8px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ---- la fiche d'une envie ---- */
/* Les deux fiches (envies, collection) partagent le même habillage. La
   fiche de la collection n'en avait pas : elle prenait celui du
   navigateur — liseré blanc, marges, et débordement sur iPhone. */
dialog.fiche{border:none;padding:0;background:transparent;color:inherit;max-width:min(94vw,900px);width:100%;overflow:visible}
dialog.fiche::backdrop{background:rgba(4,5,8,.88);backdrop-filter:blur(4px)}
.fe-fermer{
  position:absolute;top:10px;right:10px;z-index:5;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;font-size:1rem;cursor:pointer;
  background:rgba(20,22,30,.9);border:1px solid var(--line-strong);color:var(--t1);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.fe-fermer:hover{border-color:var(--gold)}
/* Dans une fiche, un champ suit sa colonne : le « min-width:200px » des
   barres de recherche faisait déborder les champs côte à côte. */
.fe-corps .search-input{min-width:0;width:100%}
.fm-autre-jour{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--t3);flex:1 1 200px}
.fm-autre-jour .search-input{flex:1}
.fe-corps{
  background:var(--bg-2);border:1px solid var(--line-strong);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow);max-height:90vh;overflow-y:auto;
}
.fe-haut{display:grid;grid-template-columns:260px minmax(0,1fr);gap:22px;padding:22px}
@media (max-width:720px){.fe-haut{grid-template-columns:1fr}}
.fe-photo{
  aspect-ratio:1;border-radius:var(--r);background:#0f1118;border:1px solid var(--line);
  display:grid;place-items:center;overflow:hidden;padding:8px;
}
.fe-photo img{width:100%;height:100%;object-fit:contain}
.fe-outils{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.fe-outils .btn{font-size:.76rem;padding:6px 11px}
.fe-titre{font-family:var(--font-display);font-size:1.35rem;line-height:1.2;margin:2px 0 4px}
/* un contenu de fiche sur une seule colonne : même marge que .fe-haut */
.fe-simple{padding:22px}
.fe-groupe{margin-bottom:16px}
.fe-groupe h3{
  font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--gold);
  margin-bottom:8px;
}
.fe-choix{display:flex;flex-wrap:wrap;gap:7px}
.fe-opt{
  padding:6px 12px;border-radius:999px;font-size:.78rem;font-weight:600;
  background:var(--surface);border:1px solid var(--line);color:var(--t2);
}
.fe-opt:hover{background:var(--surface-2);color:var(--t1)}
.fe-opt.actif{background:var(--gold-soft);border-color:var(--gold);color:var(--gold)}
.fe-opt:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.fe-ligne .search-input{max-width:190px}
.fe-note{width:100%;resize:vertical;font-family:var(--font);line-height:1.5}
.fe-actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 22px 22px;justify-content:flex-end}

/* ---- le cœur « mes envies », posable sur n'importe quel visuel ---- */
.avec-envie{position:relative}
.btn-envie{
  position:absolute;top:8px;right:8px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 9px;border-radius:999px;line-height:1;
  background:rgba(7,8,12,.82);border:1px solid var(--line-strong);
  color:var(--t2);backdrop-filter:blur(6px);
  transition:color .15s,border-color .15s,background .15s,transform .15s;
}
.btn-envie:hover{color:var(--rose);border-color:rgba(251,111,132,.5);transform:scale(1.06)}
.btn-envie:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn-envie.dedans{color:var(--rose);border-color:rgba(251,111,132,.55);background:rgba(251,111,132,.14)}
.btn-envie .be-coeur{font-size:1rem}
.btn-envie .be-texte{font-size:.72rem;font-weight:600}
/* En ligne, dans une barre d'actions plutôt qu'en pastille flottante. */
.btn-envie.en-ligne{position:static;padding:8px 14px;background:var(--surface-2);backdrop-filter:none}

/* Variantes de position selon l'hôte du cœur. */
.btn-envie.sur-carte{top:10px;right:10px}
/* Sous la pastille de prix, pas à côté : à droite elles se chevauchent dès
   qu'un prix dépasse quatre chiffres. */
.deck-card .btn-envie.sur-carte{top:58px;right:14px}
/* .pod-card est un bloc sans position : sans cette ligne, le cœur se cale
   sur un ancêtre lointain et sort de sa carte. */
.pod-card{position:relative}
.pod-card .btn-envie.sur-carte{top:6px;right:6px;padding:3px 7px}
.btn-envie.sur-mini{top:4px;right:4px;padding:3px 7px}
.mini.avec-envie{position:relative}

/* ============ MA COLLECTION ============ */
.col-stats[hidden]{display:none}
.col-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:18px}
.cs-tuile{
  padding:14px 16px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:2px;
}
.cs-tuile b{font-family:var(--font-display);font-size:clamp(1.2rem,2.4vw,1.7rem);
  font-variant-numeric:tabular-nums;line-height:1.1}
.cs-tuile span{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.cs-tuile em{font-size:.74rem;font-style:normal;color:var(--t2);margin-top:3px}
.cs-tuile.bon b{color:var(--lime)}
.cs-tuile.attention b{color:var(--gold)}
.cs-tuile.souci b{color:var(--rose)}

/* --- cartes de l'inventaire --- */
.col-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.col-carte{
  display:flex;flex-direction:column;overflow:hidden;cursor:pointer;
  border-radius:var(--r);background:var(--surface);border:1px solid var(--line);
  transition:border-color .18s,transform .18s;
}
.col-carte:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.col-carte:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.col-carte.portee{border-color:rgba(140,224,106,.45)}
.col-carte.oubliee .cc-photo{opacity:.55}
.col-carte.entretien.urgent{border-color:rgba(251,111,132,.5)}
.col-carte.entretien.bientot{border-color:rgba(232,182,76,.45)}
.cc-photo{position:relative;aspect-ratio:4/3;background:#0f1118;display:grid;place-items:center;padding:8px}
.cc-photo img{width:100%;height:100%;object-fit:contain}
.cc-photo .wfig{width:100%;height:100%}
.cc-badge{
  position:absolute;top:8px;left:8px;padding:2px 8px;border-radius:999px;
  font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:rgba(7,8,12,.85);backdrop-filter:blur(6px);border:1px solid var(--line-strong);
}
.cc-badge.portee{color:var(--lime);border-color:rgba(140,224,106,.45)}
.cc-badge.oubli{color:var(--rose);border-color:rgba(251,111,132,.4)}
.cc-corps{padding:12px 14px 14px;display:flex;flex-direction:column;flex:1}
.cc-mesures{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.cc-mesures span{display:flex;flex-direction:column;font-size:.64rem;color:var(--t3);
  letter-spacing:.04em;text-transform:uppercase}
.cc-mesures b{font-family:var(--font-mono);font-size:.92rem;color:var(--t1);
  font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0}
.cc-dernier{font-size:.72rem;color:var(--t3);margin-top:8px}
.ent-etat{font-size:.78rem;color:var(--t2);margin-top:6px}
.col-carte.entretien.urgent .ent-etat{color:var(--rose)}
.col-carte.entretien.bientot .ent-etat{color:var(--gold)}

/* --- calendrier --- */
.calendrier{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-jour-nom{text-align:center;font-size:.66rem;color:var(--t3);padding-bottom:4px;
  letter-spacing:.08em;text-transform:uppercase}
.cal-case{
  aspect-ratio:1;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);
  padding:5px;display:flex;flex-direction:column;justify-content:space-between;min-height:44px;
}
.cal-case.vide{background:none;border:none}
.cal-case.jour{border-color:var(--gold)}
.cal-case.futur{opacity:.4}
.cal-num{font-size:.68rem;color:var(--t3);font-variant-numeric:tabular-nums}
.cal-points{display:flex;flex-wrap:wrap;gap:2px}
.cal-points i{width:7px;height:7px;border-radius:50%}
.cal-legende{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.cl-item{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;color:var(--t2)}
.cl-item i{width:9px;height:9px;border-radius:50%}
.cl-item b{font-family:var(--font-mono);color:var(--t1)}

/* --- analyse --- */
.an-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px}
.an-bloc{padding:16px 18px}
.g-barres{display:flex;flex-direction:column;gap:7px}
.gb-ligne{display:grid;grid-template-columns:96px 1fr 58px;gap:9px;align-items:center;font-size:.76rem}
.gb-lab{color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gb-piste{height:7px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.gb-piste i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--gold),var(--cyan))}
.gb-val{font-family:var(--font-mono);font-size:.74rem;color:var(--t1);text-align:right;
  font-variant-numeric:tabular-nums}
.an-anneau{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.g-anneau{width:140px;height:140px;flex:0 0 auto}
.ga-haut{fill:var(--t1);font-size:20px;font-weight:700;font-family:var(--font-display)}
.ga-bas{fill:var(--t3);font-size:9px;letter-spacing:.06em;text-transform:uppercase}
.an-legende{display:flex;flex-direction:column;gap:6px;font-size:.76rem;color:var(--t2);min-width:0}
.an-legende span{display:flex;align-items:center;gap:7px}
.an-legende i{width:9px;height:9px;border-radius:2px;flex:0 0 auto}
.an-legende b{font-family:var(--font-mono);color:var(--t1);margin-left:auto}
.g-courbe{width:100%;height:60px;margin:10px 0 4px}

/* --- fiche d'une montre possédée --- */
.fm-mesures{display:flex;gap:14px;margin-top:12px;flex-wrap:wrap}
.fm-mesures div{display:flex;flex-direction:column}
.fm-mesures b{font-family:var(--font-display);font-size:1.1rem;font-variant-numeric:tabular-nums}
.fm-mesures span{font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;color:var(--t3)}
.fm-actions-port{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
.fm-actions-port .search-input{max-width:165px}
.fm-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.fm-champ{display:flex;flex-direction:column;gap:4px;font-size:.74rem;color:var(--t3)}
.fm-champ .search-input{width:100%}
.wo-sec{font-size:.78rem;padding:5px 11px}

/* =====================================================================
   ACCUEIL — trois portes à égalité
   Refonte du 27 septembre 2026. Le site n'est plus seulement un
   diagnostic : il gère aussi les envies et la collection. L'accueil met
   donc les trois au même niveau, une couleur chacun (voir base.css), et
   chaque carte s'adapte à l'état du visiteur — vide pour qui découvre,
   vivante pour qui revient, jusqu'à noter son port du jour sans quitter
   la page.
   ===================================================================== */
.acc-hero{padding-block:clamp(32px,6vw,72px) clamp(24px,3.5vw,40px);text-align:center}
.acc-eyebrow{
  display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center;
  font-size:.8rem;letter-spacing:.04em;color:var(--t2);
  padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);
}
.acc-titre{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.035em;line-height:.98;
  font-size:clamp(2.4rem,6.6vw,5.2rem);margin:20px 0 16px;
  display:flex;flex-wrap:wrap;justify-content:center;gap:0 .28em;
}
.acc-titre .v{display:inline-block}
.acc-titre .v-trouver{color:var(--c-trouver)}
.acc-titre .v-desirer{color:var(--c-desirer)}
.acc-titre .v-porter{color:var(--c-porter)}
.acc-sauts{display:none}
.acc-lead{max-width:640px;margin:0 auto;color:var(--t2);font-size:clamp(1rem,2.2vw,1.2rem);line-height:1.55}
.c-trouver{color:var(--c-trouver)}
.c-desirer{color:var(--c-desirer)}
.c-porter{color:var(--c-porter)}

/* ---------- les trois portes ---------- */
.acc-portes{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  padding-bottom:clamp(48px,8vw,96px);
}
.porte{
  --c:var(--c-trouver);--c-soft:var(--c-trouver-soft);
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;gap:12px;
  padding:22px;border-radius:var(--r-lg);
  background:
    radial-gradient(120% 70% at 50% -10%,var(--c-soft),transparent 60%),
    var(--bg-2);
  border:1px solid var(--line);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
  overflow:hidden;
}
.porte.p-desirer{--c:var(--c-desirer);--c-soft:var(--c-desirer-soft)}
.porte.p-porter{--c:var(--c-porter);--c-soft:var(--c-porter-soft)}
.porte::before{            /* un filet de couleur en haut, comme une tranche */
  content:"";position:absolute;left:22px;right:22px;top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--c),transparent);opacity:.8;
}
.porte:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 45%,transparent);
  box-shadow:0 30px 70px -30px color-mix(in srgb,var(--c) 45%,transparent)}
.porte:focus-within{border-color:var(--c)}
.porte-tete{display:flex;align-items:center;gap:10px}
.porte-ico{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:var(--c-soft);border:1px solid color-mix(in srgb,var(--c) 35%,transparent);
}
.porte-ico svg,.cy-ico svg,.fn-ico svg{width:22px;height:22px;fill:none;stroke:var(--c);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.porte-verbe{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--c)}
.porte-nom{margin-left:auto;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.porte-titre{font-family:var(--font-display);font-size:clamp(1.25rem,2.2vw,1.5rem);line-height:1.2;letter-spacing:-.015em;margin:4px 0 0}
.porte-lien{color:var(--t1);text-decoration:none}
/* Le lien s'étire sur toute la carte : un clic n'importe où suffit. Les
   boutons posés dessus (port du jour, raccourcis) passent au-dessus. */
.porte-lien::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.porte-lien:focus-visible{outline:none}
.porte-lien:focus-visible::after{outline:2px solid var(--c);outline-offset:-2px}
.porte-texte{color:var(--t2);font-size:.95rem;line-height:1.5;margin:0}
.porte-texte strong{color:var(--t1)}
.porte-visuel{position:relative;height:200px;margin:4px 0;border-radius:var(--r);
  background:rgba(0,0,0,.25);border:1px solid var(--line)}
.porte-pied{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:4px}
.porte-meta{font-size:.8rem;color:var(--t3);display:flex;align-items:center;gap:8px;min-width:0}
.porte-cta{
  margin-left:auto;flex:none;font-weight:600;font-size:.9rem;color:var(--bg);
  background:var(--c);padding:9px 16px;border-radius:999px;
  display:inline-flex;gap:6px;align-items:center;
}
.porte-cta .fl{transition:transform .2s ease}
.porte:hover .porte-cta .fl{transform:translateX(3px)}
.barre{display:inline-block;width:70px;height:5px;border-radius:5px;background:var(--surface-3);overflow:hidden}
.barre i{display:block;height:100%;background:var(--c);border-radius:5px}

/* Trouver : la vitrine qui tourne */
.vis-trouver .vt-slot{position:absolute;inset:10px 10px 26px;opacity:0;transform:scale(.96);transition:opacity .8s ease,transform .8s ease}
.vis-trouver .vt-slot.on{opacity:1;transform:none}
.vis-trouver .vt-nom{position:absolute;left:0;right:0;bottom:-20px;text-align:center;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.vis-trouver .vt-seule{position:absolute;inset:10px}
.porte-visuel .wfig img{border-radius:10px}

/* Désirer : trois raccourcis, ou l'éventail des envies */
.raccourcis{position:relative;z-index:2;display:grid;gap:8px;padding:10px;min-height:100%;align-content:center}
/* Les trois raccourcis ne tiennent pas en 180 px sur un téléphone : la
   case grandit plutôt que de les laisser déborder. */
.porte-visuel.vis-desirer{height:auto;min-height:200px}
.racc{
  display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;
  padding:9px 12px;border-radius:12px;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);color:var(--t1);
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.racc:hover,.racc:focus-visible{background:var(--c-soft);border-color:color-mix(in srgb,var(--c) 50%,transparent);transform:translateX(3px);outline:none}
.racc-ico{grid-row:span 2;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--c-soft)}
.racc-ico svg,.tu-ico svg{width:18px;height:18px;fill:none;stroke:var(--c);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.racc b{font-size:.88rem;font-weight:600}
.racc span:last-child{font-size:.74rem;color:var(--t3)}
.eventail{position:absolute;inset:0;display:grid;place-items:center}
.ev-carte{
  position:absolute;width:118px;height:150px;border-radius:14px;overflow:hidden;
  background:#fff;border:1px solid var(--line-strong);box-shadow:0 18px 40px -12px rgba(0,0,0,.8);
  transform:translateX(calc((var(--i) - 1.5) * 62px)) rotate(calc((var(--i) - 1.5) * 7deg));
  transition:transform .35s ease;
  z-index:calc(10 - var(--i));   /* la plus désirée par-dessus */
}
.ev-carte img{width:100%;height:100%;object-fit:contain}
.ev-carte .wfig img{border-radius:0}
.porte:hover .ev-carte{transform:translateX(calc((var(--i) - 1.5) * 72px)) rotate(calc((var(--i) - 1.5) * 9deg)) translateY(-4px)}
.vide-montre{font-size:2rem;opacity:.5}

/* Porter : le mois d'exemple, ou le port du jour en un toucher */
.mois-demo{position:absolute;inset:18px 22px;display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-content:center}
.mj{aspect-ratio:1;border-radius:8px;background:var(--surface-2);border:1px solid var(--line)}
.mj.c1{background:color-mix(in srgb,var(--c-porter) 70%,transparent);border-color:transparent}
.mj.c2{background:color-mix(in srgb,var(--c-trouver) 70%,transparent);border-color:transparent}
.mj.c3{background:color-mix(in srgb,var(--c-desirer) 70%,transparent);border-color:transparent}
.port-accueil{position:relative;z-index:2;height:100%;padding:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-content:center}
.pa-montre{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:6px 4px 7px;border-radius:12px;cursor:pointer;min-width:0;
  background:var(--surface);border:1px solid var(--line);color:var(--t2);font:inherit;
  transition:border-color .2s ease,background .2s ease,transform .15s ease;
}
.pa-montre:hover{border-color:color-mix(in srgb,var(--c) 50%,transparent);transform:translateY(-2px)}
.pa-montre:active{transform:scale(.96)}
.pa-montre:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.pa-photo{width:100%;height:56px;display:grid;place-items:center;border-radius:8px;background:#fff;overflow:hidden}
.pa-photo img{width:100%;height:100%;object-fit:contain}
.pa-photo .wfig img{border-radius:0}
.pa-nom{font-size:.7rem;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa-montre.portee{border-color:var(--c);background:var(--c-soft);color:var(--t1)}
.pa-montre.portee::after{
  content:"✓";position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-size:.75rem;font-weight:700;
  background:var(--c);color:var(--bg);box-shadow:0 0 0 3px var(--bg-2);
}
.pa-montre.vient{animation:pa-pose .5s ease}
@keyframes pa-pose{0%{transform:scale(.9)}60%{transform:scale(1.06)}100%{transform:none}}
.pa-plus{position:relative;z-index:2;display:grid;place-items:center;border-radius:12px;border:1px dashed var(--line-strong);color:var(--t2);text-decoration:none;font-weight:600}
.pa-plus:hover{border-color:var(--c);color:var(--t1)}

/* ---------- ce qui change ---------- */
.acc-difference{
  display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center;
  /* Encadré : il remplace le retrait latéral de .wrap par le sien, on le
     rend donc plus étroit que la page au lieu de le coller aux bords. */
  width:calc(100% - 2 * var(--pad));max-width:calc(var(--maxw) - 2 * var(--pad));
  padding:clamp(28px,6vw,64px) clamp(20px,4vw,48px);margin-bottom:clamp(48px,8vw,96px);
  border-radius:var(--r-xl);border:1px solid var(--line);
  background:
    radial-gradient(60% 80% at 0% 0%,var(--c-trouver-soft),transparent 70%),
    radial-gradient(60% 80% at 100% 100%,var(--c-porter-soft),transparent 70%),
    var(--bg-2);
}
.diff-texte h2{font-family:var(--font-display);font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.15;letter-spacing:-.02em;margin:8px 0 14px}
.diff-texte p.muted{line-height:1.6;margin:0}
.cycle{list-style:none;margin:0;padding:0;display:grid;gap:14px;position:relative}
.cycle::before{content:"";position:absolute;left:23px;top:30px;bottom:30px;width:2px;
  background:linear-gradient(var(--c-trouver),var(--c-desirer),var(--c-porter));opacity:.5}
.cy{--c:var(--c-trouver);--c-soft:var(--c-trouver-soft);
  position:relative;display:grid;grid-template-columns:48px 1fr;column-gap:14px;align-items:center}
.cy-desirer{--c:var(--c-desirer);--c-soft:var(--c-desirer-soft)}
.cy-porter{--c:var(--c-porter);--c-soft:var(--c-porter-soft)}
.cy-ico{grid-row:span 2;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg-2);border:1.5px solid var(--c);box-shadow:0 0 0 5px var(--c-soft)}
.cy b{font-family:var(--font-display);color:var(--c);font-size:1.05rem}
.cy span:last-child{color:var(--t2);font-size:.92rem}

/* ---------- ce que chaque espace fait ---------- */
.acc-fonctions{display:grid;gap:clamp(28px,5vw,48px);padding-bottom:clamp(32px,6vw,64px)}
.fn-bloc{--c:var(--c-trouver);--c-soft:var(--c-trouver-soft)}
.fn-desirer{--c:var(--c-desirer);--c-soft:var(--c-desirer-soft)}
.fn-porter{--c:var(--c-porter);--c-soft:var(--c-porter-soft)}
.fn-tete{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.fn-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none;background:var(--c-soft)}
.fn-verbe{margin:0;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c);font-weight:600}
.fn-tete h3{margin:2px 0 0;font-family:var(--font-display);font-size:clamp(1.15rem,2.4vw,1.45rem);letter-spacing:-.01em}
.fn-lien{margin-left:auto;flex:none;color:var(--c);font-weight:600;font-size:.9rem;text-decoration:none;
  padding:8px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--c) 40%,transparent)}
.fn-lien:hover{background:var(--c-soft)}
.fn-tuiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tuile{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line)}
.tu-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--c-soft);margin-bottom:4px}
.tuile b{font-size:.95rem}
.tuile span:last-child{font-size:.84rem;color:var(--t2);line-height:1.45}
.acc-fin{padding-block:0 clamp(32px,6vw,64px)}

/* L'ancre #photo des envies fait clignoter la zone visée. */
.clignote{animation:clignote 1.6s ease}
@keyframes clignote{0%,100%{box-shadow:none}30%,70%{box-shadow:0 0 0 3px var(--c-desirer)}}

@media (max-width:980px){
  .acc-sauts{display:flex;justify-content:center;gap:8px;margin-top:22px}
  .saut{
    --c:var(--c-trouver);--c-soft:var(--c-trouver-soft);
    flex:1;max-width:150px;display:flex;flex-direction:column;align-items:center;gap:6px;
    padding:12px 6px;border-radius:16px;text-decoration:none;color:var(--t1);font-weight:600;font-size:.85rem;
    background:var(--c-soft);border:1px solid color-mix(in srgb,var(--c) 40%,transparent);
  }
  .saut.s-desirer{--c:var(--c-desirer);--c-soft:var(--c-desirer-soft)}
  .saut.s-porter{--c:var(--c-porter);--c-soft:var(--c-porter-soft)}
  .saut svg{width:22px;height:22px;fill:none;stroke:var(--c);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .saut:active{transform:scale(.97)}
  .acc-portes{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .acc-difference{grid-template-columns:1fr}
  .fn-tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .eb-suite{display:none}
  .acc-titre{margin:16px 0 12px}
  .porte{padding:18px}
  .porte-visuel{height:180px}
  .fn-tete{flex-wrap:wrap}
  .fn-lien{margin-left:60px}
  .fn-tuiles{grid-template-columns:1fr 1fr;gap:8px}
  .tuile{padding:12px}
}
@media (prefers-reduced-motion:reduce){
  .porte,.ev-carte,.racc,.pa-montre{transition:none}
  .porte:hover{transform:none}
}

/* =====================================================================
   RECHERCHE D'AJOUT — la même barre dans les envies et la collection
   (BalancierAjout.monteRecherche). La couleur suit la page : --c est posé
   par .rch-envies ou .rch-collection.
   ===================================================================== */
.rch{--c:var(--gold);--c-soft:var(--gold-soft)}
.rch.rch-envies{--c:var(--c-desirer);--c-soft:var(--c-desirer-soft)}
.rch.rch-collection{--c:var(--c-porter);--c-soft:var(--c-porter-soft)}
.rch svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.rch-barre{
  display:flex;align-items:center;gap:10px;padding:6px 6px 6px 16px;border-radius:16px;
  background:var(--bg-2);border:1.5px solid var(--line-strong);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.rch-barre:focus-within{border-color:var(--c);box-shadow:0 0 0 4px var(--c-soft)}
.rch-loupe{color:var(--t3);display:flex}
.rch-barre:focus-within .rch-loupe{color:var(--c)}
.rch-champ{
  flex:1;min-width:0;background:none;border:0;outline:none;color:var(--t1);
  font:inherit;font-size:1.05rem;padding:10px 0;
}
.rch-champ::placeholder{color:var(--t3)}
.rch-champ::-webkit-search-cancel-button{filter:invert(.7)}
.rch-appareil{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;cursor:pointer;flex:none;
  background:var(--c-soft);color:var(--c);border:1px solid color-mix(in srgb,var(--c) 35%,transparent);
  transition:transform .15s ease;
}
.rch-appareil svg{width:21px;height:21px}
.rch-appareil:hover{transform:scale(1.05)}
.rch-appareil:active{transform:scale(.95)}

.rch-gestes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.rch-geste{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;
  text-align:left;padding:12px 14px;border-radius:14px;cursor:pointer;font:inherit;color:var(--t1);
  background:var(--surface);border:1px solid var(--line);transition:border-color .2s ease,background .2s ease;
}
.rch-geste svg{grid-row:span 2;width:22px;height:22px;color:var(--c)}
.rch-geste b{font-size:.9rem}
.rch-geste span{font-size:.75rem;color:var(--t3)}
.rch-geste:hover{border-color:color-mix(in srgb,var(--c) 45%,transparent);background:var(--c-soft)}
.rch-exemples{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:12px 0 0;font-size:.78rem;color:var(--t3)}
.rch-exemples .chip{cursor:pointer;font:inherit;font-size:.78rem}
.rch-exemples .chip:hover{color:var(--t1);border-color:var(--c)}

.rch-tete{margin:16px 0 8px;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.rch-liste{display:grid;gap:6px}
.rch-ligne{
  display:grid;grid-template-columns:52px minmax(0,1fr) auto auto;gap:12px;align-items:center;
  padding:6px 10px 6px 6px;border-radius:12px;cursor:pointer;text-align:left;font:inherit;color:var(--t1);
  background:var(--surface);border:1px solid var(--line);transition:border-color .15s ease,background .15s ease;
}
.rch-ligne:hover{border-color:color-mix(in srgb,var(--c) 45%,transparent);background:var(--surface-2)}
.rch-ligne:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.rch-vignette{width:52px;height:52px;border-radius:9px;overflow:hidden;background:#fff;display:grid;place-items:center}
.rch-vignette img{width:100%;height:100%;object-fit:contain}
.rch-vignette .wfig img{border-radius:0}
.rch-nom{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.rch-nom b{font-size:.86rem}
.rch-nom span,.rch-nom small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rch-nom span{font-size:.84rem;color:var(--t2)}
.rch-nom small{font-size:.7rem;color:var(--t3);font-family:var(--font-mono)}
.rch-prix{font-family:var(--font-mono);font-size:.8rem;color:var(--t2)}
.rch-action{font-size:.78rem;font-weight:600;color:var(--c);padding:6px 10px;border-radius:999px;background:var(--c-soft);white-space:nowrap}
.rch-ligne.deja{cursor:default;opacity:.75}
.rch-ligne.deja .rch-action{background:none;color:var(--lime)}
.rch-ligne.vient{animation:pa-pose .45s ease}
.rch-sortie{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.rch-sortie .btn{display:inline-flex;gap:6px;align-items:center}
.rch-sortie .btn svg{width:16px;height:16px}
.rch-web .search-status,.rch-resultats .search-status{margin-top:14px;display:flex;gap:8px;align-items:center}
.rch-web .notice,.rch-resultats .notice{margin-top:14px}
.rch-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.rch-photos button{aspect-ratio:1;border-radius:12px;overflow:hidden;background:#fff;border:2px solid transparent;cursor:pointer;padding:0}
.rch-photos button:hover{border-color:var(--c)}
.rch-photos img{width:100%;height:100%;object-fit:contain}

.rch-fiche{margin-top:16px;padding:16px;border-radius:16px;border:1px solid color-mix(in srgb,var(--c) 40%,transparent);background:var(--c-soft)}
.rch-fiche-tete{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.rch-fiche-tete b{font-family:var(--font-display);font-size:1.05rem}
.rch-fiche-tete a{color:var(--c)}
.rch-fiche-tete .btn{margin-left:auto}
.rch-fiche .btn-primary{margin-top:14px}
.rch-erreur{color:var(--rose);margin-top:10px}

@media (max-width:620px){
  .rch-gestes{grid-template-columns:1fr}
  .rch-ligne{grid-template-columns:46px minmax(0,1fr) auto;gap:10px}
  .rch-vignette{width:46px;height:46px}
  .rch-prix{display:none}
  .rch-champ{font-size:1rem}
}

/* =====================================================================
   RÉGLAGES EN DIRECT (pilote.js) — arène et résultat
   Une barre qui résume, deux boutons « moins cher / plus cher » à portée
   de pouce, et un panneau qui s'ouvre pour tout le reste.
   ===================================================================== */
.pilote{margin-bottom:16px;border-radius:var(--r);border:1px solid var(--line);background:var(--bg-2);overflow:hidden}
.pilote.ouvert{border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.pilote.vide{border-color:color-mix(in srgb,var(--rose) 50%,transparent)}
.pl-barre{display:flex;align-items:stretch;gap:0}
.pl-ouvrir{
  flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:none;border:0;color:var(--t2);font:inherit;text-align:left;cursor:pointer;
}
.pl-ouvrir:hover{background:var(--surface)}
.pl-ico{font-size:1.05rem;color:var(--gold)}
.pl-resume{display:flex;flex-wrap:wrap;gap:5px 5px;align-items:center;font-size:.8rem;min-width:0}
.pl-resume b{color:var(--t1);font-weight:600;margin-right:2px}
.pl-resume span{white-space:nowrap;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--t2)}
.pl-chevron{margin-left:auto;color:var(--t3);transition:transform .2s ease}
.pilote.ouvert .pl-chevron{transform:rotate(180deg)}
.pl-vite{display:flex;border-left:1px solid var(--line)}
.pl-rapide{
  background:none;border:0;color:var(--gold);font:inherit;font-size:.8rem;font-weight:600;
  padding:0 14px;cursor:pointer;white-space:nowrap;
}
.pl-rapide+.pl-rapide{border-left:1px solid var(--line)}
.pl-rapide:hover{background:var(--gold-soft)}
.pl-rapide:active{transform:scale(.97)}

.pl-panneau[hidden]{display:none}
.pl-panneau{padding:4px 16px 16px;border-top:1px solid var(--line);display:grid;gap:16px}
.pl-compte{margin-top:12px;font-size:.88rem;color:var(--t2)}
.pl-compte b{color:var(--gold);font-family:var(--font-display);font-size:1.05rem}
.pl-compte.zero b{color:var(--rose)}
.pl-tete{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.pl-tete b{font-size:.86rem}
.pl-val{font-family:var(--font-mono);font-size:.82rem;color:var(--gold)}

/* deux curseurs superposés sur une même piste */
.pl-double{position:relative;height:28px}
.pl-double::before{content:"";position:absolute;left:0;right:0;top:12px;height:4px;border-radius:4px;background:var(--surface-3)}
.pl-plage{position:absolute;top:12px;height:4px;border-radius:4px;background:var(--gold)}
.pl-double input{
  position:absolute;inset:0;width:100%;margin:0;background:none;pointer-events:none;
  -webkit-appearance:none;appearance:none;z-index:2;
}
.pl-double input::-webkit-slider-runnable-track{background:none;height:28px}
.pl-double input::-moz-range-track{background:none}
.pl-double input::-webkit-slider-thumb{
  -webkit-appearance:none;pointer-events:auto;width:22px;height:22px;margin-top:3px;border-radius:50%;
  background:var(--t1);border:3px solid var(--gold);cursor:grab;box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.pl-double input::-moz-range-thumb{
  pointer-events:auto;width:16px;height:16px;border-radius:50%;
  background:var(--t1);border:3px solid var(--gold);cursor:grab;
}
.pl-double input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--gold-soft)}
.pl-pas{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.pl-pas .chip,.pl-chip{cursor:pointer;font:inherit;font-size:.8rem}
.pl-chips{display:flex;flex-wrap:wrap;gap:6px}
.pl-chip[aria-pressed="true"]{background:var(--gold-soft);border-color:var(--gold);color:var(--t1)}

.pl-couleurs{display:flex;flex-wrap:wrap;gap:6px}
.pl-couleur{
  display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 5px;border-radius:999px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);color:var(--t2);font:inherit;font-size:.8rem;
}
.pl-couleur span{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.pl-couleur[aria-pressed="true"]{border-color:var(--gold);color:var(--t1);background:var(--gold-soft)}
.pl-note{margin:8px 0 0}
.pl-pied{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

@media (max-width:620px){
  .pl-barre{flex-wrap:wrap}
  .pl-ouvrir{flex-basis:100%}
  .pl-vite{flex-basis:100%;border-left:0;border-top:1px solid var(--line)}
  .pl-rapide{flex:1;padding:10px}
  .pl-double input::-webkit-slider-thumb{width:26px;height:26px;margin-top:1px}
}
.pl-apercu:empty{display:none}
.pl-apercu-titre{margin:0 0 8px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.pl-apercu-liste{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.pl-ap{display:flex;flex-direction:column;gap:4px;min-width:0}
.pl-ap-img{height:84px;border-radius:10px;overflow:hidden;background:#fff;display:grid;place-items:center}
.pl-ap-img .wfig img{border-radius:0}
.pl-ap-nom{font-size:.72rem;line-height:1.25;color:var(--t2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pl-ap-nom b{color:var(--t1);margin-right:4px}
.pl-ap-prix{font-family:var(--font-mono);font-size:.72rem;color:var(--gold)}
.pl-ap-decl{font-size:.66rem;color:var(--cyan)}
@media (max-width:620px){
  .pl-apercu-liste{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:110px;overflow-x:auto;padding-bottom:4px}
}
/* Sur téléphone, « Recommencer » débordait de l'en-tête : il n'en reste
   que la flèche. */
.hud-reset-ico{display:none}
@media (max-width:620px){
  #hud-reset{padding:6px 10px}
  #hud-reset .hud-reset-txt{display:none}
  #hud-reset .hud-reset-ico{display:inline;font-size:1rem}
}

/* ---- collection : les cartes reprennent celles des envies ---- */
.col-montre.portee{border-color:rgba(140,224,106,.5)}
.col-montre.oubliee .wc-photo{opacity:.6}
.cc-ligne{font-size:.74rem;color:var(--t3);margin-top:6px}
.cc-porter{width:100%;justify-content:center}
.cc-porter.actif{border-color:var(--lime);color:var(--lime);background:rgba(140,224,106,.1)}
.col-depuis-envies{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.col-depuis-envies summary{cursor:pointer;font-size:.88rem;color:var(--t2)}
.col-depuis-envies summary:hover{color:var(--t1)}

/* =====================================================================
   PHOTO EN GRAND (UI.agrandit) — un clic sur n'importe quelle photo de
   montre du site. Fond noir, photo à la taille de l'écran ; un second
   clic zoome à l'endroit visé.
   ===================================================================== */
.wfig,.ph-cadre,.wc-photo img,.rch-vignette img,.pz-apercu img,.mini-img img,.pl-ap-img img,.ep-apercu img{cursor:zoom-in}
[data-pas-zoom] .wfig,[data-pas-zoom] img{cursor:inherit}
html.agrandi-ouvert{overflow:hidden}
.agrandi{
  position:fixed;inset:0;z-index:500;background:rgba(3,4,7,.96);
  display:flex;flex-direction:column;animation:ag-entre .18s ease;
}
@keyframes ag-entre{from{opacity:0}to{opacity:1}}
.ag-scene{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;
  padding:clamp(8px,3vw,40px);touch-action:none}
.ag-media{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;user-select:none;
  transition:transform .25s ease;border-radius:6px;background:#fff}
.agrandi.zoome .ag-media{cursor:zoom-out;transition:transform .25s ease,transform-origin 0s}
.ag-svg{width:min(80vw,80vh);height:min(80vw,80vh);background:none;display:grid;place-items:center;cursor:default}
.ag-svg svg{width:100%;height:100%}
.ag-fermer{
  position:absolute;top:max(12px,env(safe-area-inset-top));right:12px;z-index:2;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);
  background:rgba(20,22,30,.85);color:var(--t1);font-size:1.1rem;cursor:pointer;
}
.ag-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:48px;height:64px;border-radius:14px;border:1px solid var(--line-strong);
  background:rgba(20,22,30,.7);color:var(--t1);font-size:1.8rem;cursor:pointer;
}
.ag-prec{left:12px}.ag-suiv{right:12px}
.ag-fermer:hover,.ag-nav:hover{background:rgba(40,44,58,.95)}
.ag-legende{
  display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;align-items:baseline;
  padding:12px 16px max(14px,env(safe-area-inset-bottom));font-size:.84rem;color:var(--t2);text-align:center;
}
.ag-legende b{color:var(--t1);font-family:var(--font-display);font-size:1rem}
.ag-legende a{color:var(--cyan)}
.ag-aide{color:var(--t3);font-size:.76rem}
.agrandi.zoome .ag-aide{visibility:hidden}
@media (max-width:620px){
  .ag-nav{width:40px;height:52px;font-size:1.5rem}
  .ag-scene{padding:4px}
}
@media (prefers-reduced-motion:reduce){.agrandi{animation:none}.ag-media{transition:none}}
/* Sur téléphone, le titre de la liste et son tri s'empilent : côte à côte,
   le résumé se réduisait à un mot par ligne. */
@media (max-width:620px){
  #v-inventaire .slider-head,.wish-liste-tete{flex-direction:column;align-items:stretch}
  #v-inventaire .slider-head select{max-width:none!important}
}

/* =====================================================================
   COLLECTION — LE TABLEAU DE BORD
   ===================================================================== */
.tableau{padding:clamp(16px,2.4vw,24px);display:grid;gap:18px;
  background:radial-gradient(80% 120% at 0% 0%,var(--c-porter-soft),transparent 60%),var(--surface)}
.tb-haut{display:grid;grid-template-columns:auto auto 1fr;gap:clamp(16px,4vw,48px);align-items:end}
.tb-lab{margin:0;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.tb-montant{margin:4px 0 2px;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(2rem,5vw,3.2rem);line-height:1;color:var(--t1)}
.tb-gain .tb-montant{font-size:clamp(1.6rem,4vw,2.4rem)}
.tb-gain.hausse .tb-montant,.tb-gain.hausse .tb-pct{color:var(--lime)}
.tb-gain.baisse .tb-montant,.tb-gain.baisse .tb-pct{color:var(--rose)}
.tb-pct{margin:0;font-size:.86rem;font-weight:600}
.tb-origine,.tb-vide{margin:0;font-size:.74rem;color:var(--t3);max-width:34ch}
.tb-mosaique{display:flex;justify-content:flex-end;align-self:center}
.tb-pastille{width:58px;height:58px;border-radius:50%;overflow:hidden;background:#fff;
  border:3px solid var(--bg-2);margin-left:-16px;display:grid;place-items:center;flex:none}
.tb-pastille img{width:100%;height:100%;object-fit:cover}
.tb-pastille .wfig{width:100%;height:100%}
.tb-pastille .wfig img{object-fit:cover;border-radius:0}
.tb-plus{background:var(--surface-3);color:var(--t1);font-weight:700;font-size:.85rem}
.tb-tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.tb-tuile{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:10px;align-items:center;
  padding:10px 12px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line);min-width:0}
.tb-ico{grid-row:span 3;font-size:1.2rem;align-self:start;margin-top:2px}
.tb-tuile em{font-style:normal;font-size:.72rem;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-tuile b{font-family:var(--font-display);font-size:1.1rem;line-height:1.1}
.tb-tuile span:not(.tb-ico){font-size:.72rem;color:var(--t3);line-height:1.25}
.tb-tuile.bon b{color:var(--lime)}
.tb-tuile.souci b{color:var(--rose)}
.tb-portes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.tb-porte{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border-radius:14px;
  background:var(--bg-2);border:1px solid var(--line-strong);color:var(--t1);font:inherit;text-align:left;
  cursor:pointer;text-decoration:none;transition:border-color .15s,transform .15s,background .15s;
}
.tb-porte span{font-size:1.3rem;margin-bottom:4px}
.tb-porte b{font-size:.9rem}
.tb-porte em{font-style:normal;font-size:.72rem;color:var(--t3)}
.tb-porte:hover{border-color:var(--c-porter);transform:translateY(-2px);background:var(--c-porter-soft)}
.tb-porte.p-porter{border-color:color-mix(in srgb,var(--c-porter) 55%,transparent);background:var(--c-porter-soft)}
.tb-porte.p-info{border-color:color-mix(in srgb,var(--gold) 55%,transparent);background:var(--gold-soft)}
.tb-porte.p-info:hover{border-color:var(--gold);background:var(--gold-soft)}
.tb-porter{border-top:1px solid var(--line);padding-top:14px}
.tb-choix{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;--c:var(--c-porter);--c-soft:var(--c-porter-soft)}
@media (max-width:760px){
  .tb-haut{grid-template-columns:1fr 1fr}
  .tb-mosaique{grid-column:1/-1;justify-content:flex-start;padding-left:16px}
  .tb-portes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tb-portes .tb-porte:first-child{grid-column:1/-1}
}
@media (max-width:420px){
  .tb-haut{grid-template-columns:1fr}
  .tb-tuiles{grid-template-columns:1fr 1fr}
}

/* =====================================================================
   INFOGRAPHIE DE LA COLLECTION (infographie.html)
   Une affiche : gros chiffres, blocs numérotés, et les photos des
   montres dans les graphiques eux-mêmes.
   ===================================================================== */
.ig-retour{margin:18px 0 0;font-size:.86rem}
.ig-retour a{color:var(--t2);text-decoration:none}
.ig-retour a:hover{color:var(--t1)}
#infographie{display:grid;gap:clamp(18px,3vw,28px);padding-bottom:30px}
/* Sans ce min-width, la carte de chaleur (53 semaines) élargit toute la
   grille au lieu de défiler dans son cadre : la page débordait sur téléphone. */
#infographie>*,.ig-poignet>*,.ig-style>*,.ig-palette>*{min-width:0}

/* toute photo de l'infographie : sur fond blanc, recadrée proprement */
.ig-photo{display:block;width:100%;height:100%;background:#fff;overflow:hidden}
.ig-photo>img{width:100%;height:100%;object-fit:cover}
.ig-photo .wfig{width:100%;height:100%}
.ig-photo .wfig img{object-fit:cover;border-radius:0}

/* ---- la une ---- */
.ig-une{position:relative;border-radius:var(--r-xl);overflow:hidden;min-height:clamp(300px,42vw,440px);
  display:flex;align-items:flex-end;margin-top:14px;border:1px solid var(--line)}
.ig-collage{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;opacity:.55;filter:saturate(.9)}
.ig-collage-case{border-radius:0}
.ig-une::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,8,12,.15) 0%,rgba(7,8,12,.75) 55%,rgba(7,8,12,.97) 100%)}
.ig-une-texte{position:relative;z-index:1;padding:clamp(20px,4vw,44px);width:100%}
.ig-une h1{font-family:var(--font-display);font-size:clamp(2rem,6vw,4.2rem);letter-spacing:-.03em;line-height:1;margin:10px 0 22px}
.ig-chiffres{display:flex;flex-wrap:wrap;gap:clamp(16px,4vw,48px)}
.ig-chiffres div{display:flex;flex-direction:column}
.ig-chiffres b{font-family:var(--font-display);font-size:clamp(1.5rem,3.6vw,2.6rem);line-height:1.05;color:var(--gold)}
.ig-chiffres .hausse b{color:var(--lime)}
.ig-chiffres .baisse b{color:var(--rose)}
.ig-chiffres span{font-size:.8rem;color:var(--t2)}

/* ---- les blocs ---- */
.ig-bloc{padding:clamp(18px,3vw,32px);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.ig-tete{display:flex;gap:16px;align-items:flex-start;margin-bottom:20px}
.ig-num{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,4vw,3rem);line-height:.9;
  color:transparent;-webkit-text-stroke:1.5px var(--gold);flex:none}
.ig-tete h2{font-family:var(--font-display);font-size:clamp(1.3rem,2.6vw,1.9rem);letter-spacing:-.02em;margin:0 0 6px}
.ig-tete p{margin:0;color:var(--t2);font-size:.92rem;line-height:1.5;max-width:70ch}
.ig-tete p b{color:var(--t1)}
.ig-sous{margin:0 0 8px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}

/* ---- treemap ---- */
.ig-treemap{position:relative;width:100%;border-radius:14px;overflow:hidden;background:var(--bg-2)}
.ig-tm-marque{position:absolute;box-sizing:border-box;border:2px solid var(--bg);background:color-mix(in srgb,var(--c) 30%,var(--bg-2))}
.ig-tm-montre{position:absolute;overflow:hidden;border-radius:6px;cursor:zoom-in}
.ig-tm-photo{position:absolute;inset:0}
.ig-tm-nom{position:absolute;left:0;right:0;bottom:0;padding:18px 8px 6px;font-size:.7rem;line-height:1.2;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.75));pointer-events:none;display:flex;justify-content:space-between;gap:6px}
.ig-tm-nom b{font-family:var(--font-mono);white-space:nowrap}
.ig-tm-lab{position:absolute;left:0;right:0;bottom:0;height:26px;padding:0 8px;display:flex;align-items:center;justify-content:space-between;
  gap:6px;font-size:.78rem;background:var(--c);color:#0b0c10;overflow:hidden;white-space:nowrap}
.ig-tm-lab b{overflow:hidden;text-overflow:ellipsis}
.ig-tm-lab span{font-family:var(--font-mono);font-weight:700}
.ig-legende{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:.8rem;color:var(--t2)}
.ig-legende i,.ig-an-legende i,.ig-pile-leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.ig-legende b{color:var(--t1)}

/* ---- payé → aujourd'hui ---- */
.ig-halteres{display:grid;gap:10px}
.ig-h-ligne{display:grid;grid-template-columns:52px minmax(110px,190px) 1fr 120px;gap:14px;align-items:center}
.ig-h-photo{width:52px;height:52px;border-radius:12px}
.ig-h-nom{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.ig-h-nom b{font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-h-nom span{font-size:.72rem;color:var(--t3)}
.ig-h-piste{position:relative;height:22px;border-radius:11px;background:var(--surface-2)}
.ig-h-barre{position:absolute;top:8px;height:6px;border-radius:3px}
.ig-h-ligne.hausse .ig-h-barre{background:linear-gradient(90deg,rgba(140,224,106,.25),var(--lime))}
.ig-h-ligne.baisse .ig-h-barre{background:linear-gradient(90deg,var(--rose),rgba(251,111,132,.25))}
.ig-h-paye,.ig-h-vaut{position:absolute;top:3px;width:16px;height:16px;margin-left:-8px;border-radius:50%}
.ig-h-paye{background:var(--t3);border:2px solid var(--bg)}
.ig-h-ligne.hausse .ig-h-vaut{background:var(--lime);box-shadow:0 0 0 4px rgba(140,224,106,.2)}
.ig-h-ligne.baisse .ig-h-vaut{background:var(--rose);box-shadow:0 0 0 4px rgba(251,111,132,.2)}
.ig-h-chiffres{display:flex;flex-direction:column;text-align:right}
.ig-h-chiffres b{font-family:var(--font-display);font-size:1.05rem}
.ig-h-ligne.hausse .ig-h-chiffres b{color:var(--lime)}
.ig-h-ligne.baisse .ig-h-chiffres b{color:var(--rose)}
.ig-h-chiffres span{font-size:.7rem;color:var(--t3);font-family:var(--font-mono)}

/* ---- au poignet ---- */
.ig-poignet{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(18px,4vw,40px);align-items:center}
.ig-podium{display:grid;grid-template-columns:1fr 1.25fr 1fr;align-items:end;gap:10px}
.ig-pod{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.ig-pod-1{order:2}.ig-pod-2{order:1}.ig-pod-3{order:3}
.ig-pod-photo{aspect-ratio:1;border-radius:18px;border:3px solid var(--line-strong)}
.ig-pod-1 .ig-pod-photo{border-color:var(--gold);box-shadow:0 10px 40px -10px rgba(232,182,76,.5)}
.ig-pod-rang{position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-weight:700;font-size:.85rem;background:var(--surface-3);color:var(--t1)}
.ig-pod-1 .ig-pod-rang{background:var(--gold);color:#181103}
.ig-pod b{font-family:var(--font-display);font-size:1.4rem;margin-top:6px}
.ig-pod-1 b{color:var(--gold);font-size:1.8rem}
.ig-pod span:last-child{font-size:.76rem;color:var(--t2);line-height:1.2}
.ig-anneau{display:flex;flex-direction:column;align-items:center;gap:12px}
.ig-anneau svg{width:min(240px,100%)}
.ig-an-haut{font-family:var(--font-display);font-size:30px;font-weight:700;fill:var(--t1)}
.ig-an-bas{font-size:11px;fill:var(--t3)}
.ig-an-legende{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;font-size:.76rem;color:var(--t2)}
.ig-an-legende b{color:var(--t1)}
.ig-chaleur-cadre{margin-top:26px;overflow-x:auto;padding-bottom:4px}
.ig-chaleur-mois,.ig-chaleur{display:grid;grid-template-columns:repeat(var(--n),minmax(11px,1fr));gap:3px;min-width:calc(var(--n) * 12px)}
.ig-chaleur-mois{font-size:.64rem;color:var(--t3);margin-bottom:4px}
.ig-chaleur-mois span{white-space:nowrap}
.ig-chaleur div{display:grid;grid-template-rows:repeat(7,1fr);gap:3px}
.ig-chaleur i{aspect-ratio:1;border-radius:3px;background:var(--surface-2)}
.ig-chaleur i.p{box-shadow:0 0 6px -1px currentColor}

/* ---- coût par port ---- */
.ig-cpp{display:grid;gap:8px}
.ig-cpp-ligne{display:grid;grid-template-columns:40px minmax(100px,200px) 1fr auto;gap:12px;align-items:center}
.ig-cpp-photo{width:40px;height:40px;border-radius:50%}
.ig-cpp-nom{font-size:.84rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-cpp-piste{height:14px;border-radius:7px;background:var(--surface-2);overflow:hidden}
.ig-cpp-piste i{display:block;height:100%;border-radius:7px}
.ig-cpp-ligne b{font-family:var(--font-mono);font-size:.86rem;min-width:70px;text-align:right}

/* ---- à l'échelle ---- */
.ig-echelle{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(14px,3vw,28px);padding:10px 0}
.ig-rond{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;max-width:170px}
.ig-rond-img{display:block;border-radius:50%;overflow:hidden;border:2px solid var(--line-strong);box-shadow:0 8px 24px -8px rgba(0,0,0,.8)}
.ig-rond.hors .ig-rond-img{border-color:var(--rose);border-style:dashed}
.ig-rond b{font-family:var(--font-mono);font-size:.84rem;color:var(--gold)}
.ig-rond span:last-child{font-size:.72rem;color:var(--t3);line-height:1.2}
.ig-regle{position:relative;height:30px;margin:18px 12px 8px;border-top:2px solid var(--line-strong)}
.ig-regle span{position:absolute;top:-8px;height:14px;border-radius:7px;background:var(--c-porter-soft);border:1px solid var(--c-porter)}
.ig-regle i{position:absolute;top:-6px;width:10px;height:10px;margin-left:-5px;border-radius:50%;border:2px solid var(--bg)}
.ig-regle em{position:absolute;top:10px;font-style:normal;font-size:.68rem;color:var(--t3);transform:translateX(-50%);white-space:nowrap}

/* ---- la palette ---- */
.ig-palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 32px}
.ig-pile{display:flex;height:34px;border-radius:10px;overflow:hidden;gap:2px;background:var(--bg);border:1px solid var(--line-strong)}
.ig-pile i{min-width:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.ig-pile-leg{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font-size:.76rem;color:var(--t2)}
.ig-pile-leg b{color:var(--t1)}
.ig-pile-leg i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}

/* ---- le style ---- */
.ig-style{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center}
.ig-radar{width:100%;max-width:420px;margin:0 auto;overflow:visible}
.ig-ra-grille{fill:none;stroke:rgba(255,255,255,.08)}
.ig-ra-axe{stroke:rgba(255,255,255,.08)}
.ig-ra-lab{font-size:10px;fill:var(--t2)}
.ig-ra-coll{fill:rgba(232,182,76,.28);stroke:var(--gold);stroke-width:2}
.ig-ra-gout{fill:none;stroke:var(--cyan);stroke-width:2;stroke-dasharray:5 4}
.ig-familles{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.ig-fam{display:flex;flex-direction:column;align-items:center;padding:14px 8px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line);text-align:center}
.ig-fam span{font-size:1.6rem}
.ig-fam b{font-family:var(--font-display);font-size:1.5rem;color:var(--gold);line-height:1.1}
.ig-fam em{font-style:normal;font-size:.72rem;color:var(--t2)}
.ig-leg-radar{margin:10px 0 0;font-size:.76rem;color:var(--t2);display:flex;gap:14px;align-items:center}
.ig-leg-radar span{display:inline-block;width:18px;height:3px;margin-right:6px;vertical-align:middle}
.ig-leg-radar .c{background:var(--gold)}
.ig-leg-radar .g{background:repeating-linear-gradient(90deg,var(--cyan) 0 5px,transparent 5px 9px)}

/* ---- le fil du temps ---- */
.ig-temps{position:relative;padding:0 30px}
.ig-temps-courbe{width:100%;height:110px;display:block}
.ig-temps-axe{position:relative;height:200px;border-top:2px solid var(--line-strong)}
.ig-temps-axe em{position:absolute;top:-22px;font-style:normal;font-size:.7rem;color:var(--t3);transform:translateX(-50%)}
.ig-temps-axe em::after{content:"";position:absolute;left:50%;top:18px;width:1px;height:8px;background:var(--line-strong)}
.ig-temps-pt{position:absolute;top:calc(10px + var(--r) * 62px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;width:90px;text-align:center}
.ig-temps-pt::before{content:"";position:absolute;top:calc(-10px - var(--r) * 62px);left:50%;width:1px;height:calc(10px + var(--r) * 62px);background:var(--gold);opacity:.5}
.ig-temps-photo{width:44px;height:44px;border-radius:50%;border:2px solid var(--gold)}
.ig-temps-pt span{font-size:.64rem;line-height:1.2;color:var(--t2)}
.ig-temps-pt b{color:var(--gold);font-weight:600}

/* ---- ce qui manque ---- */
.ig-idees{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.ig-idee{position:relative;display:flex;flex-direction:column;gap:3px;padding:12px;border-radius:16px;background:var(--bg-2);border:1px dashed var(--line-strong)}
.ig-idee-style{font-size:.72rem;color:var(--gold);letter-spacing:.04em;text-transform:uppercase;padding-right:34px}
.ig-idee-photo{aspect-ratio:1;border-radius:12px;margin:6px 0}
.ig-idee-photo .wfig img,.ig-idee-photo>img{object-fit:contain}
.ig-idee b{font-size:.74rem;color:var(--t3);text-transform:uppercase;letter-spacing:.06em}
.ig-idee span:not(.ig-idee-style){font-size:.9rem;line-height:1.2}
.ig-idee em{font-style:normal;font-family:var(--font-mono);font-size:.84rem;color:var(--gold)}

@media (max-width:760px){
  .ig-collage{grid-template-columns:repeat(4,1fr)}
  .ig-h-ligne{grid-template-columns:44px 1fr auto;row-gap:6px}
  .ig-h-photo{width:44px;height:44px}
  .ig-h-piste{grid-column:1/-1;order:5}
  .ig-poignet,.ig-style,.ig-palette{grid-template-columns:1fr}
  .ig-cpp-ligne{grid-template-columns:36px 1fr auto}
  .ig-cpp-piste{grid-column:1/-1;order:5}
  .ig-temps{padding:0 20px}
  .ig-temps-pt{width:70px}
}

/* =====================================================================
   COMPTES — le bouton d'en-tête et la fenêtre de connexion (compte.js)
   ===================================================================== */
.hud-compte{
  display:inline-flex;align-items:center;gap:8px;margin-left:10px;padding:4px 12px 4px 4px;flex:none;
  border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--t1);
  font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s;
}
.hud-compte:hover{border-color:var(--gold);background:var(--gold-soft)}
.hc-avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--surface-3);color:var(--t1);font-family:var(--font-display);font-size:.9rem}
.hc-avatar svg{width:15px;height:15px}
.hud-compte.connecte .hc-avatar{background:linear-gradient(135deg,var(--gold),var(--cyan));color:#101114}
.hud-compte.connecte{position:relative}
.hud-compte.connecte::after{content:"";position:absolute;left:24px;top:4px;width:9px;height:9px;border-radius:50%;
  background:var(--lime);box-shadow:0 0 0 2px var(--bg)}
.hud-compte.en-cours::after{background:var(--gold);animation:hc-pulse 1s ease infinite}
.hud-compte.souci::after{background:var(--rose)}
@keyframes hc-pulse{50%{opacity:.3}}
@media (max-width:620px){
  .hud-compte{padding:3px;margin-left:6px}
  .hud-compte .hc-txt{display:none}
}

.cpt-choix{display:grid;gap:10px}
.cpt-fournisseur{
  display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border-radius:12px;
  background:#fff;color:#1f1f1f;border:1px solid #dadce0;font:inherit;font-weight:600;font-size:.95rem;cursor:pointer;
}
.cpt-fournisseur svg{width:20px;height:20px}
.cpt-fournisseur.apple{background:#000;color:#fff;border-color:#000}
.cpt-fournisseur:hover{filter:brightness(.96)}
.cpt-ou{display:flex;align-items:center;gap:10px;color:var(--t3);font-size:.78rem;margin:6px 0}
.cpt-ou::before,.cpt-ou::after{content:"";flex:1;height:1px;background:var(--line-strong)}
.cpt-email{display:flex;gap:8px;flex-wrap:wrap}
.cpt-email .search-input{flex:1 1 200px;min-width:0}
.cpt-msg{margin:14px 0 0;padding:10px 12px;border-radius:10px;background:var(--surface-2);font-size:.88rem;color:var(--t2)}
.cpt-msg b{color:var(--t1)}
.cpt-carte{display:flex;gap:14px;align-items:center;padding:14px;border-radius:14px;background:var(--surface-2);margin-bottom:12px}
.cpt-carte div{display:flex;flex-direction:column;min-width:0}
.cpt-carte b{overflow:hidden;text-overflow:ellipsis}
.cpt-carte span{font-size:.8rem;color:var(--t2)}
.cpt-avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:none;font-family:var(--font-display);
  font-size:1.3rem;font-weight:700;background:linear-gradient(135deg,var(--gold),var(--cyan));color:#101114}
.cpt-etat{margin:0 0 8px;font-size:.88rem;font-weight:600}
.cpt-etat.ok{color:var(--lime)}
.cpt-etat.souci{color:var(--rose)}
.cpt-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cpt-danger{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.cpt-danger summary{cursor:pointer;font-size:.82rem;color:var(--t3)}
.cpt-rouge{border-color:rgba(251,111,132,.5);color:var(--rose)}

/* =====================================================================
   PHOTOS : recadrées, agrandies, modifiées
   ===================================================================== */
.ph-cadre{display:block;width:100%;height:100%;background:#fff}
.wc-image{width:100%;height:100%;display:grid;place-items:center}
.wc-image .ph{width:100%;height:100%;object-fit:contain}

/* La règle du clic : dans une carte ou un bouton, la photo appartient à
   la carte (curseur « main ») ; seule une photo isolée agrandit (loupe). */
:is(button,a[href],[role="button"],[data-carte]) :is(.wfig,img,.ph){cursor:inherit}
.wish-carte{cursor:pointer}

/* ⤢ Agrandir : dans le coin de la photo d'une carte */
.wc-photo{position:relative}
.ag-bouton{
  position:absolute;right:8px;bottom:8px;z-index:3;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;cursor:zoom-in;padding:0;
  background:rgba(7,8,12,.62);border:1px solid rgba(255,255,255,.22);color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:.8;transition:opacity .15s,transform .15s,background .15s;
}
.ag-bouton svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.wish-carte:hover .ag-bouton,.ag-bouton:focus-visible{opacity:1}
.ag-bouton:hover{transform:scale(1.1);background:rgba(7,8,12,.85)}
@media (hover:none){.ag-bouton{opacity:1}}

/* L'éditeur de photo des fiches (envies et collection) */
.ep-apercu{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#fff;
  display:grid;place-items:center;border:1px solid var(--line)}
.ep-apercu .wfig{width:100%;height:100%}
.ep-apercu>img.ph{width:100%;height:100%;object-fit:contain}
.ep-apercu .pz-vide{color:#6b7387}
.ep-outils{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ep-note{margin-top:6px;min-height:1em}
.ep .pz-candidates img{width:78px;height:78px}

/* La fenêtre de recadrage */
.rc-fond{position:fixed;inset:0;z-index:600;background:rgba(3,4,7,.9);display:grid;place-items:center;padding:16px;
  animation:ag-entre .15s ease}
.rc-boite{width:min(640px,100%);background:var(--bg-2);border:1px solid var(--line-strong);border-radius:20px;padding:16px;display:grid;gap:12px}
.rc-tete{display:flex;flex-direction:column;gap:2px}
.rc-tete b{font-family:var(--font-display);font-size:1.1rem}
.rc-vue{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#fff;cursor:grab;touch-action:none;
  box-shadow:inset 0 0 0 2px var(--gold)}
.rc-vue:active{cursor:grabbing}
.rc-img{position:absolute;left:0;top:0;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
.rc-grille{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,transparent calc(33.33% - .5px),rgba(0,0,0,.18) calc(33.33% - .5px),rgba(0,0,0,.18) calc(33.33% + .5px),transparent calc(33.33% + .5px),
      transparent calc(66.66% - .5px),rgba(0,0,0,.18) calc(66.66% - .5px),rgba(0,0,0,.18) calc(66.66% + .5px),transparent calc(66.66% + .5px)),
    linear-gradient(0deg,transparent calc(33.33% - .5px),rgba(0,0,0,.18) calc(33.33% - .5px),rgba(0,0,0,.18) calc(33.33% + .5px),transparent calc(33.33% + .5px),
      transparent calc(66.66% - .5px),rgba(0,0,0,.18) calc(66.66% - .5px),rgba(0,0,0,.18) calc(66.66% + .5px),transparent calc(66.66% + .5px))}
.rc-zoom{display:flex;align-items:center;gap:10px;color:var(--t2)}
.rc-zoom input{flex:1;accent-color:var(--gold)}
.rc-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rc-erreur{position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center;color:#333}
/* Loupe et recadrage sont des <dialog> modaux (pour passer au-dessus d'une
   fiche) : on efface l'habillage par défaut du navigateur. */
dialog.agrandi,dialog.rc-fond{
  width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;color:inherit;
}
dialog.rc-fond{padding:16px}
dialog.agrandi:not([open]),dialog.rc-fond:not([open]){display:none}
dialog.agrandi::backdrop,dialog.rc-fond::backdrop{background:transparent}

/* =====================================================================
   FICHES SUR TÉLÉPHONE : plein écran, une colonne, croix en haut
   ===================================================================== */
@media (max-width:620px){
  dialog.fiche{max-width:100%;width:100%;height:100dvh;max-height:100dvh;margin:0}
  .fe-corps{border-radius:0;border:0;height:100dvh;max-height:100dvh;
    padding-top:calc(52px + env(safe-area-inset-top));-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .fe-fermer{position:fixed;top:calc(10px + env(safe-area-inset-top));right:12px}
  .fe-haut{padding:16px;gap:18px}
  .fe-simple{padding:16px}
  .fe-actions{padding:0 16px calc(20px + env(safe-area-inset-bottom))}
  .fm-grille{grid-template-columns:1fr 1fr;gap:10px}
  .fm-grille .fm-champ:has(textarea){grid-column:1/-1}
  /* un champ seul sur sa ligne prend toute la largeur */
  .fm-grille>.fm-champ:last-child:nth-child(odd){grid-column:1/-1}
  .fm-actions-port{flex-direction:column;align-items:stretch}
  .fm-actions-port .btn{justify-content:center}
  .fm-actions-port .search-input{max-width:none}
  .fm-autre-jour{flex:none}
  .fe-groupe h3{margin-top:4px}
}
/* iPhone : sous 16 px, Safari zoome la page dès qu'on touche un champ, et
   la mise en page semble alors décalée ou coupée. */
@media (max-width:620px){
  input,select,textarea,.search-input{font-size:16px}
  input[type="date"]{min-height:46px;-webkit-appearance:none;appearance:none;text-align:left}
  input[type="date"]::-webkit-date-and-time-value{text-align:left}
}
/* Une zone de texte n'est pas une barre de recherche : coins arrondis, pas en pilule. */
textarea.search-input{border-radius:16px}

/* Page de confidentialité : un texte à lire, colonne étroite */
.texte-legal{max-width:760px}
.texte-legal h1{font-family:var(--font-display);font-size:clamp(1.7rem,4vw,2.4rem);margin:8px 0 10px}
.texte-legal h2{font-family:var(--font-display);font-size:1.15rem;margin:28px 0 8px;color:var(--gold)}
.texte-legal p,.texte-legal li{color:var(--t2);line-height:1.65}
.texte-legal strong{color:var(--t1)}
.texte-legal ul{padding-left:20px;display:grid;gap:6px}
.texte-legal a{color:var(--cyan)}
.foot a{color:inherit}