/* Coach IA · formulaires à choix visuels (programme, séance, ajustement).
   Les <select> restent dans le DOM, masqués : assets/js/app/47-ai-choice-fields.js
   dessine les cartes, le sélecteur segmenté et les pastilles. */

/* ── Feuille ─────────────────────────────────────────────── */
html #ai-program-overlay .ai-program-sheet{
  background:radial-gradient(120% 46% at 50% -8%,rgba(var(--accent-rgb),.2),transparent 62%),linear-gradient(180deg,#101014,#0b0b0e 60%)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  box-shadow:0 -24px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06)!important}
html #ai-program-overlay .ai-program-head{
  padding:16px 16px 14px!important;border-bottom:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(13,13,16,.96),rgba(13,13,16,.82))!important}
html #ai-program-overlay .ai-program-head>button{
  min-width:0;min-height:36px;padding:0 14px;border:1px solid rgba(255,255,255,.12);border-radius:99px;
  background:rgba(255,255,255,.05);color:var(--text2);font:700 12px 'Barlow',sans-serif;letter-spacing:.2px}
html #ai-program-overlay .ai-program-head>button:active{background:rgba(255,255,255,.1)}
html #ai-program-overlay .ai-program-head b{
  font:900 clamp(20px,6vw,26px)/1.02 'Barlow Condensed',sans-serif!important;letter-spacing:.3px;text-transform:uppercase;white-space:normal!important}
html #ai-program-overlay .ai-program-intro{
  margin:18px 18px 4px;color:var(--muted);font-size:14px;line-height:1.5}
html #ai-program-overlay .ai-program-form{gap:26px;padding:12px 18px 0}

/* ── Champs ──────────────────────────────────────────────── */
html #ai-program-overlay .audit-essential{display:flex;flex-direction:column;gap:26px}
html #ai-program-overlay .ai-choice-field{position:relative;display:flex;flex-direction:column;gap:11px;
  color:var(--muted);font:800 11px/1.2 'Barlow',sans-serif;letter-spacing:1.5px;text-transform:uppercase}
html #ai-program-overlay .audit-advanced>.ai-choice-field{margin:0 0 24px}
html #ai-program-overlay .ai-choice-native{
  position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;margin:0;padding:0!important;
  border:0!important;opacity:0;overflow:hidden;clip:rect(0 0 0 0);pointer-events:none}
html #ai-program-overlay .ai-choice button{
  font-family:'Barlow',sans-serif;letter-spacing:0;text-transform:none;-webkit-tap-highlight-color:transparent;
  transition:transform var(--mo-fast,110ms) ease,background-color var(--mo-quick,170ms) ease,border-color var(--mo-quick,170ms) ease,box-shadow var(--mo-quick,170ms) ease,color var(--mo-quick,170ms) ease}
html #ai-program-overlay .ai-choice button:active{transform:scale(.97)}
html #ai-program-overlay .ai-choice button:focus-visible{outline:2px solid rgba(var(--accent-rgb),.85);outline-offset:2px}

html #ai-program-overlay .ai-choice-standalone{margin:4px 0 8px}

/* Cartes (objectif, type de séance) */
.ai-choice-cards{display:grid;gap:9px}
.ai-choice-cards button{
  display:grid;grid-template-columns:46px minmax(0,1fr) 24px;align-items:center;gap:13px;width:100%;min-height:68px;
  padding:11px 14px 11px 11px;border:1px solid rgba(255,255,255,.09);border-radius:18px;
  background:linear-gradient(160deg,#18181d,#111115);color:var(--text);text-align:left}
.ai-choice-cards .ai-choice-ico{display:grid;width:46px;height:46px;place-items:center;border-radius:14px;
  background:rgba(var(--accent-rgb),.12);color:var(--accent-soft);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.16)}
.ai-choice-cards .ai-choice-ico svg{width:26px;height:26px}
.ai-choice-cards button>span{display:flex;min-width:0;flex-direction:column}
.ai-choice-cards b{font:800 18px/1.05 'Barlow Condensed',sans-serif;letter-spacing:.4px;text-transform:uppercase}
.ai-choice-cards small{margin-top:4px;color:var(--muted);font:500 12.5px/1.3 'Barlow',sans-serif;letter-spacing:0;text-transform:none}
.ai-choice-radio{position:relative;width:24px;height:24px;border:2px solid rgba(255,255,255,.2);border-radius:50%}
.ai-choice-radio::after{content:'';position:absolute;inset:4px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .25s var(--mo-out,cubic-bezier(.22,1,.36,1))}
.ai-choice-cards button[aria-checked=true]{
  border-color:rgba(var(--accent-rgb),.75);
  background:radial-gradient(120% 150% at 0 0,rgba(var(--accent-rgb),.26),transparent 62%),linear-gradient(160deg,#1b1a20,#121216);
  box-shadow:0 14px 30px -14px rgba(var(--accent-rgb),.75),inset 0 0 0 1px rgba(var(--accent-rgb),.22)}
.ai-choice-cards button[aria-checked=true] .ai-choice-ico{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 8px 18px -8px rgba(var(--accent-rgb),.8)}
.ai-choice-cards button[aria-checked=true] .ai-choice-radio{border-color:var(--accent);background:var(--accent)}
.ai-choice-cards button[aria-checked=true] .ai-choice-radio::after{transform:scale(1)}

/* Sélecteur segmenté (niveau, jours, durée, énergie…) */
.ai-choice-segment{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));padding:4px;
  border:1px solid rgba(255,255,255,.09);border-radius:18px;background:#09090b;box-shadow:inset 0 2px 8px rgba(0,0,0,.4)}
.ai-choice-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/var(--n));border-radius:14px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 8px 20px -8px rgba(var(--accent-rgb),.85),inset 0 1px 0 rgba(255,255,255,.25);
  transform:translateX(calc(var(--i,0)*100%));transition:transform .38s var(--mo-out,cubic-bezier(.22,1,.36,1))}
.ai-choice-segment button{position:relative;z-index:1;display:flex;min-height:50px;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  padding:6px 4px;border:0;border-radius:14px;background:transparent;color:var(--muted);font-weight:700;font-size:13px;line-height:1.2;text-align:center}
.ai-choice-segment button[aria-checked=true]{color:#fff}
.ai-choice-num{font:900 23px/1 'Barlow Condensed',sans-serif;letter-spacing:.2px}
.ai-choice-segment small{font:700 9.5px/1 'Barlow',sans-serif;letter-spacing:.6px;text-transform:uppercase;opacity:.75}

/* Pastilles (matériel, zones, organisation…) */
.ai-choice-chips{display:flex;flex-wrap:wrap;gap:8px}
.ai-choice-chips button{min-height:44px;padding:0 16px;border:1px solid rgba(255,255,255,.1);border-radius:99px;
  background:linear-gradient(160deg,#18181d,#121216);color:var(--text2);font-weight:600;font-size:14px;line-height:1.15;text-align:left}
.ai-choice-chips button[aria-checked=true]{border-color:transparent;color:#fff;font-weight:700;
  background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 10px 22px -10px rgba(var(--accent-rgb),.85),inset 0 1px 0 rgba(255,255,255,.22)}

/* ── Personnaliser davantage ─────────────────────────────── */
html #ai-program-overlay .audit-advanced{margin:0;padding:0;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:rgba(255,255,255,.025)}
html #ai-program-overlay .audit-advanced>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:54px;padding:0 18px;
  color:var(--text2);font:700 14px 'Barlow',sans-serif;list-style:none;cursor:pointer}
html #ai-program-overlay .audit-advanced>summary::-webkit-details-marker{display:none}
html #ai-program-overlay .audit-advanced>summary::after{content:'';width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--mo-out,cubic-bezier(.22,1,.36,1))}
html #ai-program-overlay .audit-advanced[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
html #ai-program-overlay .audit-advanced[open]{padding-bottom:6px}
html #ai-program-overlay .audit-advanced>.ai-choice-field{margin:6px 16px 24px}
html #ai-program-overlay .audit-advanced>.ai-choice-field:last-child{margin-bottom:18px}

/* ── Récapitulatif et bouton ─────────────────────────────── */
.ai-choice-recap{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:13px 14px;border:1px solid rgba(var(--accent-rgb),.22);
  border-radius:17px;background:radial-gradient(120% 160% at 0 0,rgba(var(--accent-rgb),.16),transparent 60%),rgba(var(--accent-rgb),.05)}
.ai-choice-recap[hidden]{display:none}
.ai-choice-recap>span{width:100%;color:var(--accent-soft);font:800 10px/1 'Barlow',sans-serif;letter-spacing:1.4px;text-transform:uppercase}
.ai-choice-recap>b{padding:6px 11px;border-radius:99px;background:rgba(255,255,255,.07);color:var(--text);font:700 13px/1.1 'Barlow',sans-serif;animation:aiChoicePop .35s var(--mo-out,cubic-bezier(.22,1,.36,1)) both}
html #ai-program-overlay .ai-program-generate{
  position:sticky;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:3;min-height:58px;margin-top:2px;border-radius:19px;overflow:hidden;
  background:linear-gradient(135deg,var(--accent-soft),var(--accent) 55%,var(--accent2));
  font:900 17px/1 'Barlow Condensed',sans-serif;letter-spacing:1px;text-transform:uppercase;
  box-shadow:0 16px 34px -10px rgba(var(--accent-rgb),.75),0 0 0 6px rgba(11,11,14,.72),inset 0 1px 0 rgba(255,255,255,.3)!important}
html #ai-program-overlay .ai-program-generate:not(:disabled)::after{content:'';position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);animation:aiChoiceSheen 4.5s ease-in-out 1.2s infinite}
html #ai-program-overlay .ai-program-generate:active{transform:scale(.985)}

/* ── Entrée ──────────────────────────────────────────────── */
html #ai-program-overlay .audit-essential>.ai-choice-field,html #ai-program-overlay .audit-advanced{animation:aiChoiceRise .55s var(--mo-out,cubic-bezier(.22,1,.36,1)) both}
html #ai-program-overlay .audit-essential>.ai-choice-field:nth-child(2){animation-delay:.05s}
html #ai-program-overlay .audit-essential>.ai-choice-field:nth-child(3){animation-delay:.1s}
html #ai-program-overlay .audit-essential>.ai-choice-field:nth-child(4){animation-delay:.15s}
html #ai-program-overlay .audit-essential>.ai-choice-field:nth-child(5){animation-delay:.2s}
html #ai-program-overlay .audit-essential>.ai-choice-field:nth-child(n+6){animation-delay:.25s}
html #ai-program-overlay .audit-advanced{animation-delay:.3s}
@keyframes aiChoiceRise{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes aiChoicePop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes aiChoiceSheen{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@media(prefers-reduced-motion:reduce){
  html #ai-program-overlay .audit-essential>.ai-choice-field,html #ai-program-overlay .audit-advanced,.ai-choice-recap>b{animation:none}
  html #ai-program-overlay .ai-program-generate::after{animation:none;display:none}
  .ai-choice-thumb,.ai-choice-radio::after,html #ai-program-overlay .ai-choice button{transition:none}
}
@media(max-width:360px){
  .ai-choice-cards button{grid-template-columns:40px minmax(0,1fr) 22px;gap:10px}
  .ai-choice-cards .ai-choice-ico{width:40px;height:40px}
  .ai-choice-cards b{font-size:16px}
  .ai-choice-num{font-size:20px}
}