/* ============================================================
   ALG CLUB — Refonte v3 (19.10.2026), validée par ALG sur la toile Design.
   Dernière couche de style : elle l'emporte sur app.css et espace.css.
   Principes (docs/refonte-visuelle.md) :
   - noirs teintés, sections séparées par des filets plutôt que des cartes ;
   - Maharlika pour les titres, Garet 400 pour le texte, libellés en minuscules ;
   - vert ALG pour l'action, menthe pour les liens et les valeurs positives,
     beige pour un seul élément « maintenant » par écran ;
   - aucune lueur, aucun dégradé décoratif, aucun texte en capitales espacées.
   ============================================================ */

/* ---------- Base ---------- */
html { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
body { background: var(--alg-bg); background-image: none; }
body::after { display: none; }   /* plus de grain filmique */
::selection { background: var(--alg-selection); color: var(--alg-text); }
a { color: var(--alg-mint); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--alg-mint) 40%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible, button:focus-visible, .tab:focus-visible, a:focus-visible, .seg button:focus-visible { outline: 2px solid var(--alg-mint); outline-offset: 3px; box-shadow: none; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 300; padding: 10px 16px; border-radius: 10px; background: var(--alg-text); color: var(--alg-bg); text-decoration: none; }
.skip:focus { top: 16px; }
.num, .tnum { font-variant-numeric: tabular-nums; }

/* ---------- Coquille : barre latérale + contenu ---------- */
.w { max-width: none; margin: 0; padding: 0; display: flex; min-height: 100dvh; }
.side {
  flex: 0 0 248px; position: sticky; top: 0; align-self: flex-start; height: 100dvh; overflow-y: auto;
  box-sizing: border-box; padding: 30px 14px 22px; display: flex; flex-direction: column; gap: 30px;
  background: var(--alg-bg-deep); border-right: 1px solid var(--alg-border);
}
.side-brand { padding: 0 12px; display: flex; flex-direction: column; gap: 6px; }
.side .logo { width: 128px; height: 21px; background-position: left center; }
.logo-sub, .side .logo-sub { margin: 0; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--alg-text-3); }
.shell { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
main#contenu { flex: 1; width: 100%; max-width: 1240px; box-sizing: border-box; }

/* Navigation verticale (les boutons gardent role="tab" et go()) */
.tabs { display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; overflow: visible; }
.nav-g { padding: 18px 12px 6px; font-size: 12px; color: var(--alg-text-3); }
.nav-g:first-child { padding-top: 0; }
.tab {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border-radius: 10px;
  font-size: 15px; font-weight: 400; color: var(--alg-text-2); text-align: left; background: transparent;
}
.tab:hover { color: var(--alg-text); background: var(--alg-hover); }
.tab.on { color: var(--alg-text); background: var(--alg-selected); }
.tab.on::after { display: none; }
.tab[hidden] { display: none; }
.nav-ic { width: 18px; height: 18px; flex: 0 0 18px; }
.side-foot { margin-top: auto; padding: 16px 12px 0; border-top: 1px solid var(--alg-border); display: flex; flex-direction: column; gap: 2px; }
.side-name { color: var(--alg-text); }
.side-role { font-size: 13px; color: var(--alg-text-3); }
.side-out { align-self: flex-start; margin-top: 8px; min-height: 32px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--alg-text-2); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--alg-text-2) 40%, transparent); text-underline-offset: 3px; cursor: pointer; }
.side-out:hover { color: var(--alg-text); }

/* Barre du haut : état d'enregistrement à gauche, actions à droite */
.hdr {
  position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 56px; background: var(--header-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--alg-border);
}
.hdr-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.hdr .hdr-out { display: none; }
.hdr-help { min-width: 44px; padding: 0 !important; }
.eye-sw { width: auto; height: 44px; padding: 0 14px; gap: 8px; border-radius: 10px; border: 1px solid var(--alg-line); background: transparent; color: var(--alg-text); font: inherit; font-size: 14px; }
.eye-sw:hover { border-color: var(--alg-text-3); background: transparent; }
.eye-sw svg { width: 17px; height: 17px; }
.eye-lb { white-space: nowrap; }
.theme-sw { box-shadow: none; }

.pane { padding: 36px 56px 72px; animation: none; }

/* ---------- Titres et texte ---------- */
.h2 { margin: 0; font-family: var(--alg-font-display); font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--alg-text); }
.h3 { margin: 0; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--alg-text-2); }
.sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.sec-sub { margin: 6px 0 0; font-size: 13px; color: var(--alg-text-2); }
.ks { font-size: 13px; color: var(--alg-text-3); }
.ctit { font-family: var(--alg-font-display); font-size: 22px; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.25; color: var(--alg-text); margin-bottom: 16px; }
.ctit::before { display: none; }
.klb, .esp-eyebrow, .su-day, .su-pat-h, .su-fiche h4, .pf-edit th, .esp-admin-tag, .fo-tm { letter-spacing: 0; text-transform: none; font-weight: 400; }
.klb { font-size: 13px; color: var(--alg-text-2); }
.esp-eyebrow { font-size: 13px; color: var(--alg-text-3); }
.esp-h1 { font-family: var(--alg-font-display); font-weight: 400; font-size: 44px; line-height: 1.1; }
.esp-h2 { font-family: var(--alg-font-display); font-weight: 400; font-size: 26px; }
.lnk { display: inline-flex; align-items: center; min-height: 32px; padding: 0; border: 0; background: none; font: inherit; color: var(--alg-mint); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--alg-mint) 40%, transparent); text-underline-offset: 3px; cursor: pointer; }
.lnk:hover { text-decoration-color: currentColor; }

/* ---------- Boutons ---------- */
.btn { min-height: 44px; padding: 0 18px; border-radius: 10px; font-family: var(--alg-font-sans); font-size: 15px; font-weight: 400; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.btn:active { transform: none; }
.bp { background: var(--alg-emerald); color: #ffffff; border: 0; }
.bp:hover { background: var(--alg-emerald-hover, #31684d); color: #ffffff; box-shadow: none; border-color: transparent; }
.bg2 { background: transparent; color: var(--alg-text); border: 1px solid var(--alg-line); }
.bg2:hover { background: transparent; border-color: var(--alg-text-3); color: var(--alg-text); }
.btn-shiny, .btn-shiny:hover { background: var(--alg-emerald); box-shadow: none; }
.btn-shiny::before, .btn-shiny::after { display: none; }
.bedit, .bdel, .bhide, .esp-iconbtn { min-width: 36px; min-height: 36px; border-radius: 8px; }

/* ---------- Cartes : chaque bloc sur un fond (retour d'ALG du 20.10 : plus lisible) ---------- */
.card, .k, .fo-card, .fo-q, .su-hero, .fo-resume, .fo-win {
  background: var(--alg-surface); box-shadow: none;
}
.card::before, .k::before, .k.gk::before { display: none; }
.card { border-radius: 14px; padding: 24px; margin: 0 0 20px; border: 1px solid var(--alg-border); }
.kgrid { gap: 16px; margin-bottom: 20px; }
.k { border-radius: 14px; padding: 20px 22px; border: 1px solid var(--alg-border); }
.k.gk { background: var(--alg-surface); border-color: var(--alg-gold-line, var(--alg-border-strong)); }
.kv { font-size: 30px; line-height: 1.2; }
.kv.g { color: var(--alg-mint); }
.kv.gold { color: var(--alg-text); }
.trend, .tfl-dn { border-radius: 999px; }
.tup { background: transparent; color: var(--alg-mint); padding-left: 0; }
.tfl { background: transparent; color: var(--alg-text-2); padding-left: 0; }

/* Tableaux : registre à filets fins */
.tbl th { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--alg-text-2); padding: 10px 12px 10px 0; border-bottom: 1px solid var(--alg-border-strong); background: none; }
.tbl td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--alg-border); }
.tbl tbody tr:hover td { background: var(--alg-hover-faint); }
.ta-r, .tbl th.ta-r, .tbl td.ta-r { text-align: right; }
.badge { background: transparent; border: 1px solid var(--alg-border-strong); color: var(--alg-text-2); border-radius: 999px; font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 400; }

/* Champs */
.fl { font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--alg-text-2); }
input:not([type]), input[type=text], input[type=number], input[type=password], input[type=email], input[type=month], input[type=date], input[type=datetime-local], input[type=url], select, textarea.esp-ta {
  min-height: 44px; border-radius: 10px; background: var(--alg-surface-2); border: 1px solid var(--alg-line); color: var(--alg-text); box-shadow: none;
}
input:focus, select:focus, textarea.esp-ta:focus, input[type=date]:focus, input[type=datetime-local]:focus, input[type=url]:focus { border-color: var(--alg-mint); box-shadow: none; outline: none; }
.fw.on { background: var(--alg-surface); border: 1px solid var(--alg-border); border-radius: 14px; box-shadow: none; }

/* Choix segmentés */
.seg { background: transparent; border: 1px solid var(--alg-border-strong); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { min-height: 34px; padding: 0 12px; border-radius: 7px; font-size: 13px; color: var(--alg-text-2); background: transparent; }
.seg button:hover { color: var(--alg-text); }
.seg button.on { background: var(--alg-selected-2); color: var(--alg-text); box-shadow: none; }
.seg[hidden] { display: none; }

/* Vides et états */
.empty { color: var(--alg-text-2); }
.empty-icon { display: none; }
.sp { font-size: 13px; }
.dot { background: var(--alg-mint); }
.demo-banner { background: var(--alg-surface); border-bottom: 1px solid var(--alg-border); color: var(--alg-text-2); box-shadow: none; padding: 10px 16px; }

/* Barres de données : une seule teinte, bout arrondi */
.esp-bar { height: 6px; background: var(--alg-track); border-radius: 0 3px 3px 0; }
.esp-bar > i, .esp-bar.gold > i { background: var(--alg-bar); border-radius: 0 3px 3px 0; }
.hbar-track { background: var(--alg-track); }
.hbar-fill { background: var(--alg-bar); box-shadow: none; }

/* ---------- Synthèse ---------- */
.sy-statement { margin: 0 0 48px; max-width: 24ch; font-family: var(--alg-font-display); font-weight: 400; font-size: 46px; line-height: 1.16; color: var(--alg-text-2); text-wrap: balance; }
.sy-statement .st-v { color: var(--alg-text); white-space: nowrap; }
.sy-statement .st-up { color: var(--alg-mint); white-space: nowrap; }
.sy-statement .st-dn { color: var(--alg-text); white-space: nowrap; }
.sy-grid { display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: flex-start; }
.sy-main { flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 52px; }
.sy-aside { flex: 1 1 290px; min-width: 0; display: flex; flex-direction: column; }
.sy-aside > .h2 { margin-bottom: 14px; }
.sy-sec { margin: 0; }
.sy-area-wrap { position: relative; height: 260px; margin-top: 14px; }
.sy-evo-empty { padding: 18px 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; }
.sy-evo-empty[hidden] { display: none; }
.sy-empty-t { margin: 0; color: var(--alg-text); }
.topbar .ctit, .topbar > span.ctit, .topbar > div > .ctit { font-size: 22px; color: var(--alg-text); }   /* titres de section des onglets hérités */
.tbl .badge { white-space: nowrap; }
.sy-evo-empty:not([hidden]) { display: flex; align-items: flex-start; text-align: left; }
.chiffres { margin-top: 8px; }
.chiffres[hidden] { display: none; }
.chiffres summary { cursor: pointer; color: var(--alg-text-2); font-size: 13px; min-height: 32px; display: inline-flex; align-items: center; }
.chiffres summary:hover { color: var(--alg-text); }
.chiffres .tbl { margin-top: 6px; font-size: 14px; }

/* Registre : libellé, barre, part, montant */
.row { display: flex; align-items: center; gap: 16px; min-height: 44px; box-sizing: border-box; padding: 10px 0; border-bottom: 1px solid var(--alg-border); }
.row:hover { background: var(--alg-hover-faint); }
.row .l { flex: 1 1 160px; min-width: 0; }
.row .l-sub { color: var(--alg-text-2); }
.row .p { width: 44px; text-align: right; color: var(--alg-text-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.row .v { min-width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
.row .v.pos { color: var(--alg-mint); }
.row .v.neg { color: var(--alg-text); }
.row.row-last { border-bottom: 0; }
.row.hid { opacity: .6; }
.row .bar { flex: 0 1 240px; height: 8px; display: flex; background: var(--alg-track); border-radius: 0 4px 4px 0; }
.row .bar > span { min-width: 2px; background: var(--alg-bar); border-radius: 0 4px 4px 0; }
.sy-bilan { display: flex; flex-direction: column; }
.sy-bilan > .h2 { margin-bottom: 22px; }
.led-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 18px 0 6px; }
.sy-bilan > .h2 + .led-head { padding-top: 0; }
.led-empty { margin: 0; padding: 10px 0; color: var(--alg-text-2); border-bottom: 1px solid var(--alg-border); }
.led-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 22px; padding-top: 12px; border-top: 3px double var(--alg-rule-strong); }
.led-total-l { font-family: var(--alg-font-display); font-size: 22px; }
.led-total-v { font-family: var(--alg-font-display); font-size: 26px; }
.sy-flux > .h2 { margin-bottom: 8px; }
.sy-flux .flux-bar { display: flex; gap: 2px; height: 10px; margin-top: 18px; background: none; border-radius: 0; overflow: visible; }
.sy-flux .flux-bar[hidden], .sy-flux .flux-foot[hidden] { display: none; }
.flux-bar-exp { background: var(--alg-line); border-radius: 4px 0 0 4px; }
.flux-bar-sav { background: var(--alg-bar); border-radius: 0 4px 4px 0; }
.sy-flux .flux-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 8px; font-size: 13px; color: var(--alg-text-2); }
.sy-flux .flux-foot > span:first-child { white-space: nowrap; }
#flux-runway { margin: 10px 0 0; }
#flux-runway:empty { display: none; }

/* À venir */
.next { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px 0; border-top: 1px solid var(--alg-border); }
.next:empty { display: none; }
.next p { margin: 0; }
.next-when { font-family: var(--alg-font-display); font-size: 24px; line-height: 1.25; color: var(--alg-gold); }
.next-sub { color: var(--alg-text-2); }
.next-act { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 4px; }

/* ---------- Connexion : la marque à gauche, le formulaire à droite ---------- */
.auth-overlay { background: var(--alg-bg); }
.auth-card { background: var(--alg-surface); box-shadow: none; border: 1px solid var(--alg-border); animation: none; }   /* écran de changement de mot de passe */
.auth-split { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: stretch; padding: 0; overflow-y: auto; }
body.authed .auth-split { display: none; }
.auth-side { flex: 0 0 56%; min-width: 0; box-sizing: border-box; padding: 48px 64px; display: flex; flex-direction: column; justify-content: space-between; gap: 64px; background: var(--alg-bg-deep); border-right: 1px solid var(--alg-border); }
.auth-side-top { font-size: 13px; color: var(--alg-text-3); }
.auth-side-brand { display: flex; flex-direction: column; gap: 18px; }
.auth-word { margin: 0; font-family: var(--alg-font-display); font-size: 112px; line-height: 0.92; letter-spacing: 0.01em; color: var(--alg-text); }
.auth-tag { margin: 0; max-width: 36ch; font-size: 17px; color: var(--alg-text-2); }
.auth-split .auth-card { flex: 0 1 400px; align-self: center; width: auto; max-width: 400px; margin: 48px auto; padding: 0 32px; box-sizing: content-box; background: none; box-shadow: none; border: 0; display: flex; flex-direction: column; gap: 20px; text-align: left; }
.auth-split .auth-card::before { display: none; }
.auth-split .auth-brand { display: none; }
.auth-sub, .auth-split .auth-sub { margin: 0 0 4px; font-family: var(--alg-font-display); font-weight: 400; font-size: 44px; line-height: 1.05; letter-spacing: 0; text-transform: none; color: var(--alg-text); text-align: left; }
.auth-field { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.auth-field .fl { font-size: 14px; color: var(--alg-text-2); }
.auth-field input { min-height: 52px; font-size: 16px; background: var(--alg-bg); }
.auth-forgot { align-self: flex-end; min-height: 32px; display: inline-flex; align-items: center; font-size: 14px; }
#au-submit { width: 100%; min-height: 50px; font-size: 16px; }
.auth-foot { display: block; margin: 0; text-align: left; font-size: 14px; color: var(--alg-text-3); }
.auth-msg { text-align: left; }
@media (max-width: 1100px) {
  .auth-side { flex-basis: 100%; padding: 28px 16px; gap: 24px; border-right: 0; border-bottom: 1px solid var(--alg-border); }
  .auth-word { font-size: 64px; }
  .auth-split .auth-card { margin: 32px auto; padding: 0 16px; }
}

/* ---------- Formation : leçon en cours à gauche, parcours à droite ---------- */
.fo-head { align-items: flex-start; margin-bottom: 40px; }
.fo-head .esp-p { margin-top: 10px; max-width: 68ch; }
.fo-cols { display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: flex-start; }
.fo-now { flex: 3 1 480px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.fo-now .fo-thumb { width: 100%; min-height: 0; aspect-ratio: 16 / 9; flex: none; margin: 4px 0 8px; border-radius: 14px; overflow: hidden; background: var(--alg-surface); border: 1px solid var(--alg-border); }
.fo-now .fo-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fo-now .fo-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 999px; background: var(--alg-text); color: var(--alg-bg); display: flex; align-items: center; justify-content: center; box-shadow: none; border: 0; }
.fo-now .fo-play .esp-ic { width: 22px; height: 22px; margin-left: 3px; }
.fo-now .h2 { font-size: 32px; }
.fo-now-act { margin-top: 6px; }
.fo-path { flex: 2 1 320px; min-width: 0; }
.fo-path > .h2 { margin-bottom: 12px; }
.fo-mods, .fo-ls3 { list-style: none; margin: 0; padding: 0; }
.fo-mods > li { border-top: 1px solid var(--alg-border); }
.fo-mods .mod { display: flex; align-items: baseline; gap: 14px; width: 100%; min-height: 52px; padding: 14px 0; border: 0; background: none; font: inherit; color: var(--alg-text); text-align: left; cursor: pointer; }
.fo-mods .mod.locked { cursor: default; color: var(--alg-text-3); }
.fo-mods .mod .n { font-family: var(--alg-font-display); font-size: 20px; color: var(--alg-text-3); min-width: 28px; }
.fo-mods .mod .t { flex: 1; }
.fo-mods .mod .st { font-size: 13px; color: var(--alg-text-2); white-space: nowrap; }
.fo-mods .mod .st.done { color: var(--alg-mint); }
.fo-mods .mod .st.cur { color: var(--alg-text); }
.fo-mods .mod:not(.locked):hover .t { text-decoration: underline; text-underline-offset: 3px; }
.fo-ls3 { margin: -4px 0 12px 42px; }
.fo-ls3 .les { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 14px; color: var(--alg-text-2); text-align: left; cursor: pointer; }
.fo-ls3 button.les:hover { color: var(--alg-text); background: var(--alg-hover); }
.fo-ls3 .les.on { color: var(--alg-text); background: var(--alg-selected); }
.fo-ls3 .les.locked { cursor: default; color: var(--alg-text-3); }
.fo-ls3 .les .d { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.fo-ls3 .les.ok .d .esp-ic { width: 14px; height: 14px; color: var(--alg-mint); }
.fo-soon { padding: 20px 0; border-top: 1px solid var(--alg-border); }
/* Leçon, quiz et fin de parcours */
.fo-resume { border: 1px solid var(--alg-border); border-radius: 14px; }
.fo-resume::before, .fo-card.cur::before, .fo-win::before, .su-hero::before { display: none; }
.fo-video { background: var(--alg-surface); }
.fo-q { border-top: 1px solid var(--alg-border); border-radius: 0; }
.fo-q.wrong { box-shadow: none; border-top-color: var(--alg-warning); }
.fo-opt { border-radius: 10px; border: 1px solid var(--alg-border-strong); background: transparent; }
.fo-opt[aria-pressed="true"] { border-color: var(--alg-mint); background: var(--alg-selected-3); }
.fo-l.on { background: var(--alg-selected); }

/* ---------- Mon suivi ---------- */
.su-hero { border-radius: 14px; background: var(--alg-surface); border: 0; }
.su-hero .su-next .esp-h2, .su-next-when { color: var(--alg-gold); }
.su-call { border-top: 1px solid var(--alg-border); }
.su-call:first-child { border-top: 0; }
.su-notes { background: none; padding: 0; border: 0; color: var(--alg-text-2); }
.su-fiche h4 { font-size: 13px; color: var(--alg-text-3); }

/* ---------- Équipe : le tableau défile plutôt que d'écraser les champs ---------- */
.eq-tbl { min-width: 1180px; }
.eq-tbl select[data-k="role"] { min-width: 112px; }
.eq-tbl select[data-k="coach_id"] { min-width: 160px; }
.eq-tbl input[data-k="google_email"] { min-width: 230px; }
.eq-tbl .esp-check { white-space: nowrap; }

/* ---------- Portefeuille OMEGA : 5 colonnes, une par catégorie ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pf-head { align-items: flex-start; margin-bottom: 36px; }
.pf-head .esp-p { margin-top: 10px; max-width: 64ch; }
.pf-comment { margin: 0 0 36px; padding: 16px 0 0; background: none; border-radius: 0; border-top: 1px solid var(--alg-border); max-width: 72ch; }
.pf-comment .h3 { margin-bottom: 6px; }
.pf-comment p { margin: 0; color: var(--alg-text); }
.pf-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px 28px; align-items: start; }
.pf-col { min-width: 0; border-top: 1px solid var(--alg-border-strong); padding-top: 14px; }
.pf-col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.pf-col-t { margin: 0; font-family: var(--alg-font-display); font-weight: 400; font-size: 22px; line-height: 1.25; }
.pf-list { list-style: none; margin: 0; padding: 0; }
.pf-it { padding: 14px 0; border-bottom: 1px solid var(--alg-border); }
.pf-it-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pf-name { min-width: 0; overflow-wrap: anywhere; }
.pf-sym { margin-left: 4px; font-size: 13px; color: var(--alg-text-3); }
.pf-act { flex: none; display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--alg-border-strong); font-size: 13px; color: var(--alg-text-2); }
.pf-act.achat { color: var(--alg-mint); border-color: color-mix(in srgb, var(--alg-mint) 45%, transparent); }
.pf-act.vente { color: var(--alg-text); border-color: var(--alg-line); }
.pf-dl { margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; }
.pf-dl > div { display: flex; flex-direction: column; gap: 1px; }
.pf-dl dt { font-size: 12px; color: var(--alg-text-3); }
.pf-dl dd { margin: 0; font-size: 14px; }
.pf-note { margin: 8px 0 0; font-size: 13px; color: var(--alg-text-2); }
.pf-empty-cat { margin: 0; padding: 14px 0; font-size: 14px; color: var(--alg-text-3); border-bottom: 1px solid var(--alg-border); }
.pf-empty { padding: 20px 0; border-top: 1px solid var(--alg-border); }
.pf-histsec { margin-top: 56px; }
.pf-histsec .h2 { margin-bottom: 12px; }
.pf-hist time { min-width: 170px; }
.pf-edsec { padding: 24px 0; border-top: 1px solid var(--alg-border); }
.pf-edsec .sec-head { margin-bottom: 12px; }
.pf-edit { min-width: 900px; }
.pf-edit th { font-size: 13px; font-weight: 400; color: var(--alg-text-2); padding: 6px 8px 6px 0; }
.pf-edit td { padding: 4px 8px 4px 0; }
.pf-edit input, .pf-edit select { min-height: 40px; width: 100%; }
.pf-edit .pf-in-sym { width: 90px; }
.pf-edit .pf-in-pct { width: 90px; }
.pf-edcomment { margin-top: 24px; max-width: 72ch; }
.pf-edfoot { margin-top: 24px; }

/* ---------- Téléphone et tablette ---------- */
@media (max-width: 960px) {
  .w { flex-direction: column; }
  .side { position: static; height: auto; flex: none; align-self: stretch; min-width: 0; padding: 18px 16px 0; gap: 14px; border-right: 0; border-bottom: 1px solid var(--alg-border); overflow: visible; }
  .side-brand { padding: 0; }
  .tabs { flex-direction: row; min-width: 0; max-width: 100%; overflow-x: auto; gap: 4px; padding-bottom: 10px; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .nav-g { display: none; }
  .tab { width: auto; flex: 0 0 auto; padding: 0 12px; white-space: nowrap; }
  .tab .nav-ic { display: none; }
  .side-foot { display: none; }
  .hdr { padding: 10px 16px; }
  .hdr .hdr-out { display: inline-flex; }
  .pane { padding: 24px 16px 56px; }
  .sy-statement { font-size: 32px; margin-bottom: 32px; }
  .k { border-left: 0; padding: 12px 0; border-top: 1px solid var(--alg-border); }
  .k:first-child { border-top: 0; }
}
@media (max-width: 560px) {
  .eye-lb, .hdr-help, .hdr-csv { display: none; }
  .hdr-r { gap: 8px; flex-wrap: nowrap; }
  .hdr .btn { padding: 0 12px; font-size: 14px; }
  .eye-sw { width: 44px; padding: 0; justify-content: center; }
  .row .bar { display: none; }
  .row .v { min-width: 80px; }
  .esp-h1 { font-size: 32px; }
}

/* ---------- Retours d'ALG du 20.10 ---------- */
/* Contenu centré dans la page, sans vide à droite sur grand écran */
main#contenu { margin-inline: auto; }
/* Garet n'a qu'une graisse : pas de faux gras fabriqué par le navigateur */
html { font-synthesis-weight: none; }
/* Formulaires revenus, dépenses, actifs, dettes : le montant garde la place d'être lu */
.fg4 > :has(> .amt-cur) { min-width: 200px; }
.amt-cur { grid-template-columns: minmax(96px, 1fr) 84px; }
/* Les actions du patrimoine n'ont rien à faire sur Formation, Portefeuille, Événements, Suivi, Clients, Équipe */
body[data-tab="hi"] .hdr-snap, body[data-tab="fo"] .hdr-snap, body[data-tab="pf"] .hdr-snap, body[data-tab="ev"] .hdr-snap, body[data-tab="ms"] .hdr-snap, body[data-tab="cl"] .hdr-snap, body[data-tab="eq"] .hdr-snap,
body[data-tab="fo"] .hdr-csv, body[data-tab="pf"] .hdr-csv, body[data-tab="ev"] .hdr-csv, body[data-tab="ms"] .hdr-csv, body[data-tab="cl"] .hdr-csv, body[data-tab="eq"] .hdr-csv,
body[data-tab="fo"] .hdr-priv, body[data-tab="ev"] .hdr-priv, body[data-tab="eq"] .hdr-priv { display: none; }
input[type=search] { min-height: 44px; border-radius: 10px; background: var(--alg-surface-2); border: 1px solid var(--alg-line); color: var(--alg-text); box-shadow: none; padding: 0 12px; font: inherit; font-size: 14px; box-sizing: border-box; }
input[type=search]:focus { border-color: var(--alg-mint); outline: none; }

/* ---------- Menus déroulants : flèche dessinée, à distance du bord (tout le site) ---------- */
select {
  -webkit-appearance: none; appearance: none;
  padding-left: 12px; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238f8c80' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 12px;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer;
}
select:disabled { cursor: not-allowed; opacity: .6; }
select[multiple], select[size] { background-image: none; padding-right: 12px; }
.amt-cur select { padding-left: 10px; padding-right: 28px; background-position: right 9px center; }
/* Formulaires à 4 champs : passent à la ligne plutôt que de couper les menus */
.fg4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ---------- Formation › Gérer les contenus : liste courte, éditeur toujours à l'écran ---------- */
.fo-adm { align-items: flex-start; }
.fo-adm-tree { flex: 1 1 400px; max-width: 520px; }
.fo-adm-edit { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; }
.fo-tr { grid-template-columns: auto minmax(0,1fr) auto auto; gap: 6px; }
.fo-tr.les { grid-template-columns: minmax(0,1fr) auto auto; padding-left: 34px; }
.fo-tog { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--alg-text-3); cursor: pointer; }
.fo-tog:hover { color: var(--alg-text); background: var(--alg-hover); }
.fo-tog .esp-ic { width: 16px; height: 16px; transition: transform .15s ease; transform: rotate(-90deg); }
.fo-tog[aria-expanded="true"] .esp-ic { transform: none; }
.fo-tr-b { flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 6px; }
.fo-tr-b span:first-child { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.fo-tr-b .esp-meta { font-size: 12px; }
.fo-tr:hover, .fo-tr.sel { background: var(--alg-hover); }
.fo-tr.sel { background: var(--alg-selected); }
.fo-tr.sel .fo-tr-b span:first-child { color: var(--alg-text); }
/* Réordonner : au survol, au clavier ou sur la ligne choisie, pas en permanence */
.fo-tr-mv { opacity: 0; transition: opacity .12s ease; }
.fo-tr:hover .fo-tr-mv, .fo-tr.sel .fo-tr-mv, .fo-tr-mv:focus-within { opacity: 1; }
.fo-pill { font-size: 11px; letter-spacing: 0; padding: 2px 8px; }
.fo-pill:not(.pub) { border-style: dashed; }
@media (max-width: 1100px) { .fo-adm-edit { position: static; max-height: none; overflow: visible; } .fo-adm-tree { max-width: none; } }
@media (hover: none) { .fo-tr-mv { opacity: 1; } }
@keyframes fo-flash { from { box-shadow: 0 0 0 2px var(--alg-gold); } to { box-shadow: 0 0 0 2px transparent; } }
.fo-adm-edit.fo-flash > * { animation: fo-flash .9s ease-out; border-radius: 14px; }
@media (prefers-reduced-motion: reduce) { .fo-adm-edit.fo-flash > * { animation: none; } }

/* Formulaires d'ajout / modification (Patrimoine, Budget) : titre et repère quand ils s'ouvrent */
.fw-t { margin: 0 0 12px; font-weight: 500; color: var(--alg-text); }
@keyframes fw-flash { from { box-shadow: 0 0 0 2px var(--alg-gold); } to { box-shadow: 0 0 0 2px transparent; } }
.fw.on.fw-flash { animation: fw-flash .9s ease-out; }
@media (prefers-reduced-motion: reduce) { .fw.on.fw-flash { animation: none; } }