@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --bg:#fdfaf6;--surface:#fffefc;--surface-2:#e9f1f8;--raised:#d9e8f2;
  --line:#c9dce9;--ink:#182530;--muted:#6d8495;
  --accent:#e8460f;--accent-ink:#ffffff;
  --good:#3d7a3a;--good-bg:#e2efdf;
  --warn:#c1580f;--warn-bg:#f9e6d4;
  --light:#2c6ba8;--light-bg:#e0ecf6;
  --font-display:'Oswald',sans-serif;
}
*{box-sizing:border-box;}
html,body{height:100%;overflow:hidden;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'IBM Plex Sans',system-ui,sans-serif;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){*{transition:none!important;}}

/* 100vh déborde de l'écran visible sur mobile (barre d'adresse Chrome) -
   on utilise la hauteur de fenêtre "dynamique" quand le téléphone la
   supporte, avec 100vh en repli sur les navigateurs plus anciens. */
#app{max-width:480px;margin:0 auto;height:100vh;height:100dvh;background:var(--surface);display:flex;flex-direction:column;overflow:hidden;}
.view{display:none;flex-direction:column;flex:1;min-height:0;overflow-y:auto;}
.view.active{display:flex;}

.statusbar-spacer{height:env(safe-area-inset-top,0);}
.appbar{padding:14px 18px 10px;display:flex;align-items:center;gap:10px;}
.appbar h1,.appbar h2{font-family:var(--font-display);font-weight:600;font-size:1.5rem;margin:0;color:var(--ink);text-transform:uppercase;letter-spacing:.02em;}
.appbar .sub{color:var(--muted);font-size:.78rem;margin-top:1px;}
.back-btn{background:var(--surface-2);border:1px solid var(--line);border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;flex-shrink:0;}
/* Bouton en haut à droite de l'appbar (ex. ouvrir la synchronisation) - a la
   demande de Christine, pour ne pas occuper en permanence de la place dans
   l'ecran journal comme le faisait l'ancienne section fixe. */
.appbar-btn{margin-left:auto;background:var(--surface-2);border:1px solid var(--line);border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;flex-shrink:0;font-size:1.05rem;line-height:1;}

.stat-row{display:flex;gap:8px;padding:0 16px 8px;}
.stat-tile{flex:1;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:11px;display:flex;flex-direction:column;gap:2px;}
/* La tuile "séances / mois" est un <button> (ouvre le graphique par mois, à
   la demande de Christine) - on annule les styles par défaut d'un bouton
   pour qu'elle reste identique aux deux autres tuiles (record, total). */
.stat-tile-clickable{font-family:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none;}
.stat-tile .n{font-family:var(--font-display);font-weight:600;font-size:1.65rem;color:var(--accent);font-variant-numeric:tabular-nums;}
.stat-tile .l{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}

.tools-row{display:flex;align-items:center;gap:8px;padding:0 16px 8px;}
.search-field{flex:1;display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:9px 12px;color:var(--muted);font-size:.85rem;}
.search-field input{border:none;background:none;outline:none;flex:1;font-size:.85rem;color:var(--ink);font-family:inherit;}
.search-field svg{flex-shrink:0;}

.import-cta{margin:2px 16px 4px;padding:12px;border-radius:14px;border:1.5px dashed var(--line);color:var(--muted);font-size:.78rem;display:flex;gap:10px;align-items:center;}
.import-cta svg{flex-shrink:0;color:var(--accent);}

.list{padding:6px 16px 16px;display:flex;flex-direction:column;gap:9px;overflow-y:auto;flex:1;min-height:0;}
.empty-state{margin:24px 16px;text-align:center;color:var(--muted);font-size:.88rem;line-height:1.6;}
.session-card{background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;text-align:left;position:relative;}
.session-card-main{background:none;border:none;padding:0;display:flex;flex-direction:column;gap:6px;text-align:left;cursor:pointer;width:100%;}
.session-card:hover{border-color:var(--accent);}
.session-delete{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.session-delete:hover{color:var(--warn);border-color:var(--warn);}
.session-top{display:flex;justify-content:space-between;align-items:baseline;padding-right:30px;}
.session-date{font-family:'IBM Plex Mono';font-size:.74rem;color:var(--muted);}
.session-meta{color:var(--muted);font-size:.76rem;}
.session-title{font-weight:600;font-size:.93rem;color:var(--ink);}
.chip-row{display:flex;gap:6px;flex-wrap:wrap;}
.chip{font-size:.66rem;padding:3px 9px;border-radius:100px;font-weight:500;border:1px solid var(--line);color:var(--muted);}
.chip.warn{background:var(--warn-bg);color:var(--warn);border-color:transparent;}
.chip.good{background:var(--good-bg);color:var(--good);border-color:transparent;}

.export-row{display:flex;gap:16px;margin:2px 16px 4px;}
.export-link{font-size:.76rem;color:var(--accent);font-weight:600;background:none;border:none;cursor:pointer;text-align:left;padding:0;}
/* Section synchronisation (js/sync.js). Chaque règle `display` posée sur un
   id togglé en `.hidden` par le JS a son pendant `#id[hidden]{display:none}`
   juste en dessous - un id l'emporte toujours sur [hidden] en spécificité
   CSS, c'est ce qui avait causé le bug du formulaire "nouvel exercice" qui
   restait visible malgré [hidden]. Ne pas ajouter de règle display sur un id
   togglé sans son override [hidden]. */
.sync-hint{font-size:.76rem;color:var(--muted);margin:0;}
.sync-code-row{display:flex;align-items:center;gap:8px;}
.sync-code-row code{flex:1;font-size:.78rem;padding:8px 10px;background:var(--bg);border-radius:8px;word-break:break-all;}
#sync-setup,#sync-active{display:flex;flex-direction:column;gap:8px;}
#sync-setup[hidden],#sync-active[hidden]{display:none;}

.bottomnav{display:flex;border-top:1px solid var(--line);background:var(--surface);padding:8px 4px calc(10px + env(safe-area-inset-bottom,0));}
.navitem{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font-size:.63rem;font-weight:600;background:none;border:none;cursor:pointer;}
.navitem.sel{color:var(--accent);}
.navitem svg{width:19px;height:19px;}

.field-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;}
.field{display:flex;flex-direction:column;gap:5px;margin:0 16px 12px;}
.field[hidden]{display:none;}
.field input,.field select,.field textarea{background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:10px 12px;font-size:.88rem;color:var(--ink);font-family:inherit;}
.field textarea{resize:vertical;min-height:44px;}
.exo-note textarea{background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:9px 11px;font-size:.83rem;color:var(--ink);font-family:inherit;resize:vertical;min-height:40px;width:100%;box-sizing:border-box;}
.exo-note{display:flex;flex-direction:column;gap:5px;}
.stepper{display:flex;align-items:center;gap:10px;}
.stepper input{flex:1;text-align:center;font-weight:700;font-size:1rem;-moz-appearance:textfield;}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.stepper-btn{width:40px;height:40px;flex-shrink:0;border-radius:11px;border:1px solid var(--line);background:var(--surface-2);color:var(--accent);font-size:1.3rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.stepper-btn:active{background:var(--raised);}

.scroll{overflow-y:auto;padding:0 16px 14px;display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;}

.lib-cat-row{display:flex;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;min-height:34px;padding:0 16px 8px;scrollbar-width:none;}
.lib-cat-row[hidden]{display:none;}
.filter-group{display:flex;flex-direction:column;gap:2px;}
.filter-group[hidden]{display:none;}
.filter-group-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;padding:0 16px;}
.lib-cat-row::-webkit-scrollbar{display:none;}
.lib-cat-chip{flex-shrink:0;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);font-size:.76rem;font-weight:600;line-height:1.3;padding:7px 13px;border-radius:100px;cursor:pointer;white-space:nowrap;}
.lib-cat-chip.sel{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.lib-status{padding:0 16px 6px;font-size:.78rem;color:var(--muted);}
.lib-grid{padding:0 16px 10px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1;min-height:0;}
.lib-item{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:9px 38px 9px 12px;display:flex;align-items:center;gap:11px;cursor:pointer;text-align:left;position:relative;}
.lib-fav-btn{position:absolute;top:8px;right:8px;background:none;border:none;padding:2px;color:var(--line);cursor:pointer;line-height:0;}
.lib-fav-btn.on{color:#e8a90f;}
.acc-fav-btn{position:static;}
.lib-item-usage{font-size:.68rem;color:var(--muted);}
.lib-detail-fav{align-self:flex-start;background:var(--surface-2);border:1px solid var(--line);border-radius:100px;padding:6px 14px;font-size:.8rem;font-weight:600;color:var(--muted);cursor:pointer;}
.lib-detail-fav.on{color:#e8a90f;border-color:#e8a90f;background:#fbf1dc;}
.lib-detail-name-row{display:flex;align-items:center;gap:8px;}
.lib-detail-name-row h3,.lib-detail-name-row h2{flex:1;min-width:0;}
.lib-detail-rename-btn{flex-shrink:0;background:var(--surface-2);border:1px solid var(--line);border-radius:50%;width:30px;height:30px;color:var(--muted);cursor:pointer;}
.lib-detail-rename-actions{display:flex;gap:8px;margin-top:6px;}
.lib-detail-rename-actions .primary-btn,.lib-detail-rename-actions .ghost-btn{flex:1;padding:9px;}
/* Import de séance depuis une photo (lecture IA) - voir js/ai.js et
   renderAiImportReview dans js/app.js. Une "carte" par exercice détecté,
   avec ce qui a été lu sur la photo, un choix d'exercice de bibliothèque à
   valider, et la possibilité d'exclure la ligne. */
.ai-import-row{border:1px solid var(--line);border-radius:14px;padding:12px;margin:0 16px 10px;display:flex;flex-direction:column;gap:8px;background:var(--surface-2);}
.ai-import-row-raw{font-size:.78rem;color:var(--muted);}
.ai-import-row-raw b{color:var(--ink);}
.ai-import-row-main{display:flex;gap:10px;align-items:flex-start;}
.ai-import-row-gif{width:72px;height:72px;border-radius:10px;background:var(--raised);border:1px solid var(--line);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.ai-import-row-gif img{width:100%;height:100%;object-fit:cover;}
.ai-import-row-noGif{font-size:.62rem;color:var(--muted);text-align:center;padding:0 4px;}
.ai-import-row-fields-wrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;}
.ai-import-row-fields{display:flex;gap:8px;}
.ai-import-row-fields select{flex:2;}
.ai-import-row-fields input[type="number"]{flex:1;min-width:0;}
.ai-import-row select,.ai-import-row input{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:.85rem;color:var(--ink);font-family:inherit;}
/* Nom de l'exercice actuellement rattaché à la ligne du brouillon (remplace
   l'ancien menu déroulant à choix limité - demande de Christine du
   13/09/2026, le menu ne montrait ni gif ni filtres). */
.ai-import-row-selected-name{font-size:.85rem;font-weight:600;color:var(--ink);text-transform:capitalize;}
.ai-import-row-selected-name .ai-import-row-selected-type{font-weight:400;color:var(--muted);text-transform:none;}
.ai-import-row-noselect{font-weight:400;font-style:italic;color:var(--muted);}
.ai-import-row-pick-btn{align-self:flex-start;padding:6px 10px;font-size:.72rem;}
.ai-import-row-exclude-label{display:flex;align-items:center;gap:6px;font-size:.76rem;color:var(--muted);}
.ai-import-row.excluded{opacity:.5;}
.lib-item:hover{border-color:var(--accent);}
.lib-item-thumb{width:92px;height:92px;border-radius:10px;background:var(--raised);border:1px solid var(--line);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.lib-item-thumb img{width:100%;height:100%;object-fit:cover;}
.lib-item-name{flex:1;min-width:0;font-size:.85rem;font-weight:600;color:var(--ink);text-transform:capitalize;}
.lib-item-sub{font-size:.72rem;color:var(--muted);text-transform:capitalize;flex-shrink:0;}
.lib-detail-gif{width:100%;border-radius:14px;overflow:hidden;background:var(--raised);min-height:120px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.lib-detail-gif img{width:100%;display:block;}
.lib-detail-noGif{color:var(--muted);font-size:.82rem;padding:24px;text-align:center;}
.lib-detail-meta{font-size:.76rem;color:var(--muted);text-transform:capitalize;}
.lib-detail-instr{font-size:.85rem;color:var(--ink);line-height:1.5;}
.result-item-withgif{display:flex;align-items:center;gap:10px;}
.result-item-withgif img{width:56px;height:56px;border-radius:8px;object-fit:cover;flex-shrink:0;}
.session-delete-btn{margin:6px 16px 0;}

/* ---------- Progrès ---------- */
#progress-list-wrap,#progress-detail-wrap{display:flex;flex-direction:column;flex:1;min-height:0;}
#progress-list-wrap[hidden],#progress-detail-wrap[hidden]{display:none;}
.progress-item{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;text-align:left;}
.progress-item:hover{border-color:var(--accent);}
.progress-item-name{font-weight:600;font-size:.88rem;color:var(--ink);}
.progress-item-count{font-size:.72rem;color:var(--muted);flex-shrink:0;white-space:nowrap;}

.progress-record{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;}
.progress-record .l{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
.progress-record .n{font-family:var(--font-display);font-weight:600;font-size:1.5rem;color:var(--accent);font-variant-numeric:tabular-nums;}

.progress-chart-wrap{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 8px 6px;}
.progress-chart-wrap svg{display:block;width:100%;height:auto;overflow:visible;}
.progress-tooltip{position:absolute;pointer-events:none;background:var(--ink);color:var(--surface);font-size:.72rem;font-weight:600;padding:5px 9px;border-radius:8px;white-space:nowrap;transform:translate(-50%,-100%);top:0;left:0;opacity:0;transition:opacity .1s ease;font-family:'IBM Plex Mono';}
.progress-tooltip.show{opacity:1;}
.progress-table-toggle{align-self:flex-start;background:none;border:none;color:var(--accent);font-size:.78rem;font-weight:600;cursor:pointer;padding:0;text-align:left;}
.progress-table{width:100%;border-collapse:collapse;font-size:.8rem;}
.progress-table th{text-align:left;color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;font-weight:600;padding:6px 4px;border-bottom:1px solid var(--line);}
.progress-table td{padding:7px 4px;border-bottom:1px solid var(--line);color:var(--ink);font-family:'IBM Plex Mono';}
.progress-empty{margin:24px 16px;text-align:center;color:var(--muted);font-size:.85rem;line-height:1.6;}

.acc-list{display:flex;flex-direction:column;gap:8px;}
.acc-item{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.acc-item.open{border-color:var(--accent);}
.acc-head{width:100%;background:none;border:none;padding:12px 13px;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;text-align:left;}
.acc-head-main{display:flex;flex-direction:column;gap:3px;min-width:0;}
.acc-name{font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--ink);text-transform:uppercase;letter-spacing:.01em;}
.acc-sub{font-size:.75rem;color:var(--muted);font-family:'IBM Plex Mono';}
.acc-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.status-pill{font-size:.63rem;padding:3px 8px;border-radius:100px;font-weight:600;white-space:nowrap;}
.status-pill.ok{background:var(--good-bg);color:var(--good);}
.status-pill.unknown{background:var(--warn-bg);color:var(--warn);}
.chevron{transition:transform .2s ease;color:var(--muted);flex-shrink:0;}
.acc-item.open .chevron{transform:rotate(180deg);color:var(--accent);}
.acc-panel{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.acc-item.open .acc-panel{max-height:1200px;}
.acc-body{padding:2px 13px 14px;display:flex;flex-direction:column;gap:11px;border-top:1px solid var(--line);}

.gif-row{display:flex;align-items:center;gap:10px;}
.gif-thumb{width:84px;height:84px;border-radius:12px;background:var(--raised);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0;overflow:hidden;}
.gif-thumb img{width:100%;height:100%;object-fit:cover;}
.gif-meta{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.gif-meta .t{font-size:.78rem;color:var(--ink);}
.link-btn{background:none;border:none;color:var(--accent);font-size:.76rem;font-weight:600;cursor:pointer;padding:0;text-align:left;}

.history-line{font-size:.75rem;color:var(--muted);background:var(--surface);border:1px dashed var(--line);border-radius:9px;padding:8px 11px;line-height:1.45;}
.history-line b{color:var(--ink);}

.reps-stepper,.session-tours-row{display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:9px 13px;}
.session-tours-row{margin:0 16px 12px;}
.stepper-ctrl{display:flex;align-items:center;gap:12px;}
.stepper-ctrl button{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-size:1rem;cursor:pointer;}
.stepper-ctrl .num{font-family:'IBM Plex Mono';font-size:1.05rem;font-weight:600;min-width:2.4ch;text-align:center;font-variant-numeric:tabular-nums;color:var(--ink);}

.exo-actions-row{display:flex;gap:8px;}
.exo-action-btn{flex:1;background:none;border:1px solid var(--line);color:var(--muted);border-radius:11px;padding:9px;font-size:.8rem;font-weight:600;cursor:pointer;}
.exo-action-btn.exo-action-danger,.ghost-btn.exo-action-danger{color:var(--warn);border-color:var(--warn-bg);}

.weight-block{display:flex;flex-direction:column;gap:6px;}
.seg{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:3px;gap:3px;flex-wrap:wrap;}
.seg button{flex:1;min-width:48px;background:none;border:none;color:var(--muted);padding:7px 4px;border-radius:8px;font-size:.78rem;font-family:'IBM Plex Mono';cursor:pointer;}
.seg button.sel{background:var(--surface-2);color:var(--ink);font-weight:600;}
.libre-row{display:none;align-items:center;gap:7px;}
.libre-row.open{display:flex;}
.libre-row input{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:7px 9px;font-family:'IBM Plex Mono';font-size:.82rem;color:var(--ink);}
.libre-row span{font-size:.76rem;color:var(--muted);font-family:'IBM Plex Mono';}
.weight-total{font-family:'IBM Plex Mono';font-size:.75rem;color:var(--muted);text-align:right;}
.bodyweight-note{font-size:.8rem;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 12px;}

.rounds-wrap{display:flex;flex-direction:column;gap:8px;}
.round-row{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;}
.round-label{font-size:.78rem;font-weight:600;color:var(--ink);}
.rounds-compact-wrap{display:flex;flex-direction:column;gap:6px;}
.round-compact{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:7px 10px;display:flex;flex-direction:column;gap:6px;}
.rc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.rc-label{font-size:.74rem;font-weight:600;color:var(--ink);white-space:nowrap;}
.rc-weight{font-family:'IBM Plex Mono';font-size:.7rem;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:100px;padding:3px 10px;cursor:pointer;white-space:nowrap;}

.feel-row{display:flex;gap:7px;}
.feel-btn{flex:1;padding:9px 4px;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:.72rem;font-weight:600;cursor:pointer;text-align:center;}
.feel-btn.sel-light{background:var(--light-bg);color:var(--light);border-color:transparent;}
.feel-btn.sel-good{background:var(--good-bg);color:var(--good);border-color:transparent;}
.feel-btn.sel-warn{background:var(--warn-bg);color:var(--warn);border-color:transparent;}
.feel-row.compact-feel{gap:5px;}
.feel-row.compact-feel .feel-btn{padding:5px 2px;font-size:.65rem;border-radius:8px;}

.add-lib-btn{align-self:stretch;text-align:center;background:var(--surface);border:1px dashed var(--line);border-radius:10px;padding:10px 12px;font-size:.82rem;color:var(--accent);font-weight:600;cursor:pointer;}

.bottom-bar{position:sticky;bottom:0;background:var(--surface);padding:12px 16px calc(16px + env(safe-area-inset-bottom,0));border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;}
.primary-btn{background:var(--accent);color:var(--accent-ink);border:none;border-radius:12px;padding:13px;font-size:.9rem;font-weight:600;cursor:pointer;}
.primary-btn:hover{filter:brightness(1.08);}
.ghost-btn{background:none;border:1px solid var(--line);color:var(--muted);border-radius:12px;padding:9px;font-size:.83rem;cursor:pointer;}

.fab{position:fixed;right:calc(50% - 240px + 22px);bottom:calc(84px + env(safe-area-inset-bottom,0));width:52px;height:52px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;border:none;box-shadow:0 10px 22px -8px var(--accent);font-size:1.5rem;cursor:pointer;z-index:5;}
@media (max-width:524px){.fab{right:22px;}}

.modal-backdrop{position:fixed;inset:0;background:rgba(24,37,48,.45);display:none;align-items:flex-end;justify-content:center;z-index:20;}
.modal-backdrop.open{display:flex;}
/* La modale de recherche d'exercice peut désormais s'ouvrir PAR-DESSUS la
   modale d'import IA (choisir un exercice depuis une ligne du brouillon,
   voir openAiImportExercisePicker dans js/app.js) - sans ce z-index plus
   élevé, les deux modales étant à égalité (z-index:20) et #exercise-modal
   venant avant #ai-import-modal dans le HTML, c'est l'import IA qui
   restait au-dessus et interceptait les clics. */
#exercise-modal{z-index:21;}
.modal{background:var(--surface);border-radius:20px 20px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom,0));width:100%;max-width:480px;max-height:80vh;overflow-y:auto;display:flex;flex-direction:column;gap:12px;}
.modal h3{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.02em;margin:0;font-size:1.15rem;}
.result-item{background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:10px 12px;cursor:pointer;font-size:.86rem;}
.result-item:hover{border-color:var(--accent);}
.result-item+.result-item{margin-top:6px;}
.result-item-new{border-style:dashed;color:var(--accent);font-weight:600;}
#new-exercise-form{display:flex;flex-direction:column;gap:10px;margin-top:8px;}
#new-exercise-form[hidden]{display:none;}