/* ===== Frallinge — feuille de style (mobile first) ===== */
@font-face { font-family: "Marianne"; src: url("/static/fonts/Marianne-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Marianne"; src: url("/static/fonts/Marianne-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Marianne"; src: url("/static/fonts/Marianne-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Marianne"; src: url("/static/fonts/Marianne-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }

:root {
  --bleu: #1e1b4b; --bleu-2: #312e81; --bleu-clair: #e0e7ff;
  --ambre: #d99a00; --ambre-clair: #fff4d6;
  --vert: #15803d; --vert-clair: #dcfce7;
  --rouge: #b91c1c; --rouge-clair: #fee2e2;
  --fond: #f4f4f6; --carte: #ffffff; --texte: #18181b; --gris: #6b7280; --bord: #e4e4e7;
  --rayon: 10px; --ombre: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.05);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Marianne", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; color: var(--texte); background: var(--fond); min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--bleu-2); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; font-weight: 700; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1rem; margin-top: 1rem; color: var(--gris); text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; }
p { margin: 0 0 .75rem; }
small, .petit { font-size: .85em; }
.aide { color: var(--gris); font-size: .9rem; }
.surtitre { color: var(--gris); text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; font-weight: 500; margin-bottom: .25rem; }
.sous { color: var(--gris); font-size: 1rem; }
.inline { display: inline; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos { color: var(--vert); } .neg { color: var(--rouge); }

/* --- entête / pied --- */
.entete { background: var(--carte); border-bottom: 1px solid var(--bord); position: sticky; top: 0; z-index: 10; }
.entete-int { max-width: 1140px; margin: 0 auto; padding: .5rem 16px; display: flex; align-items: center; gap: .75rem 1.25rem; flex-wrap: wrap; }
.marque img { display: block; }
.nav { display: flex; gap: .25rem; flex-wrap: wrap; order: 3; width: 100%; }
.nav a { text-decoration: none; color: var(--texte); padding: .35rem .6rem; border-radius: 6px; font-size: .9rem; font-weight: 500; }
.nav a.actif, .nav a:hover { background: var(--bleu-clair); color: var(--bleu); }
.qui { margin-left: auto; display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.qui .nom { font-weight: 500; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 760px) { .nav { order: 0; width: auto; margin-left: 1rem; } .qui .nom { max-width: none; } }
.contenu { flex: 1; width: 100%; max-width: 1140px; margin: 0 auto; padding: 1.25rem 16px 2.5rem; }
.pied { border-top: 1px solid var(--bord); padding: 1rem 16px; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--gris); max-width: 1140px; margin: 0 auto; width: 100%; }

/* --- composants --- */
.carte { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 1.1rem; margin-bottom: 1rem; }
.grille-2 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .grille-2 { grid-template-columns: 1fr 1fr; } .grille-2 > .carte { margin-bottom: 0; } .grille-2 { margin-bottom: 1rem; } }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .55rem 1rem; border-radius: 8px; border: 1px solid var(--bord); background: var(--carte); color: var(--texte); font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; transition: background .15s, transform .05s; }
.btn:hover { background: #fafafa; } .btn:active { transform: translateY(1px); }
.btn-primaire { background: var(--bleu); color: #fff; border-color: var(--bleu); } .btn-primaire:hover { background: var(--bleu-2); }
.btn-secondaire { background: var(--bleu-clair); color: var(--bleu); border-color: transparent; }
.btn-danger { color: var(--rouge); } .btn-danger:hover { background: var(--rouge-clair); }
.btn-large { padding: .85rem 1.4rem; font-size: 1.05rem; width: 100%; }
@media (min-width: 560px) { .btn-large { width: auto; } }
.btn-petit { padding: .25rem .5rem; font-size: .85rem; }
.btn-lien { border: none; background: none; color: var(--gris); padding: .25rem .4rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.message { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; background: var(--bleu-clair); color: var(--bleu); border-left: 4px solid var(--bleu-2); }
.message.ok { background: var(--vert-clair); color: #14532d; border-color: var(--vert); }
.message.erreur { background: var(--rouge-clair); color: #7f1d1d; border-color: var(--rouge); }
.etiq { display: inline-block; font-size: .75rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; background: var(--bord); color: var(--gris); text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }
.etiq-business { background: var(--ambre-clair); color: #92400e; } .etiq-chance { background: #f3e8ff; color: #6b21a8; } .etiq-ok { background: var(--vert-clair); color: var(--vert); }
.puce { display: inline-block; background: var(--fond); border: 1px solid var(--bord); border-radius: 999px; padding: .15rem .6rem; margin: .15rem .2rem .15rem 0; font-size: .9rem; }
.puce.capital { background: #f3e8ff; border-color: #e9d5ff; }
.choix-tour { margin-bottom: .5rem; }
.liste { padding-left: 1.2rem; margin: 0 0 .5rem; } .liste li { margin-bottom: .35rem; }
input, select { font: inherit; padding: .5rem .65rem; border: 1px solid var(--bord); border-radius: 8px; background: #fff; width: 100%; }
label { display: block; font-weight: 500; font-size: .95rem; }
.ligne { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.ligne input { flex: 1; min-width: 180px; }
.form-col { display: grid; gap: .6rem; }

/* --- titre de page / frise --- */
.titre-page { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1.25rem; }
.frise { list-style: none; margin: 0; padding: 0; display: flex; gap: .4rem; }
.frise li { display: flex; flex-direction: column; align-items: center; gap: .2rem; min-width: 56px; opacity: .55; }
.frise li.fait, .frise li.courant { opacity: 1; }
.frise .num { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; background: var(--bord); color: var(--gris); }
.frise li.fait .num { background: var(--vert); color: #fff; }
.frise li.courant .num { background: var(--bleu); color: #fff; box-shadow: 0 0 0 4px var(--bleu-clair); }
.frise li.courant.ouvert .num { background: var(--ambre); }
.frise .lbl { font-size: .7rem; color: var(--gris); white-space: nowrap; }

/* --- KPIs --- */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-bottom: 1rem; }
@media (min-width: 760px) { .kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
.kpi { border-radius: var(--rayon); padding: .9rem 1rem; box-shadow: var(--ombre); display: flex; flex-direction: column; gap: .15rem; background: var(--carte); border-top: 4px solid var(--bleu); }
.kpi .lbl { font-size: .8rem; color: var(--gris); font-weight: 500; }
.kpi strong { font-size: 1.45rem; letter-spacing: -.01em; }
.kpi .aide { font-size: .78rem; }
.kpi.treso { border-top-color: #2563eb; } .kpi.ca { border-top-color: var(--ambre); } .kpi.capital { border-top-color: #7c3aed; } .kpi.score { border-top-color: var(--vert); }

/* --- attente --- */
.carte.action { background: linear-gradient(135deg, var(--bleu) 0%, var(--bleu-2) 100%); color: #fff; }
.carte.action h2 { color: #fff; } .carte.action .aide { color: #c7d2fe; } .carte.action a:not(.btn) { color: #fff; }
.carte.action .btn-primaire { background: #fff; color: var(--bleu); border-color: #fff; }
.sablier { display: flex; gap: .4rem; margin: .75rem 0; }
.sablier span { width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: .4; animation: pulse 1.4s infinite; }
.sablier span:nth-child(2) { animation-delay: .2s; } .sablier span:nth-child(3) { animation-delay: .4s; }
@keyframes pulse { 0%, 80%, 100% { opacity: .3; transform: scale(.8); } 40% { opacity: 1; transform: scale(1.1); } }

/* --- graphe --- */
.graphe { width: 100%; height: auto; max-height: 280px; display: block; }
.graphe .grille { stroke: var(--bord); stroke-width: 1; } .graphe .zero { stroke: var(--gris); stroke-width: 1; stroke-dasharray: 4 3; }
.graphe .axe { font-size: 11px; fill: var(--gris); }
.legende { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--gris); margin: .25rem 0 .75rem; }
.leg i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }

/* --- tableaux --- */
.defilement { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -1.1rem; padding: 0 1.1rem; }
.tableau { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tableau th, .tableau td { padding: .5rem .5rem; border-bottom: 1px solid var(--bord); text-align: left; vertical-align: top; }
.tableau th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); }
.tableau tfoot th { font-size: .92rem; text-transform: none; color: var(--texte); }
.tableau.compact td, .tableau.compact th { white-space: nowrap; }
.tableau tr.moi { background: var(--ambre-clair); }
.tableau .narratif { margin: .2rem 0 0; font-weight: 400; color: #3f3f46; font-size: .88rem; }
.tableau.effets tr.type-base { background: #fafafa; } .tableau.effets tr.type-chance { background: #faf5ff; }
.tableau.effets td:first-child { min-width: 220px; }
.tableau .actions { white-space: nowrap; } .tableau .actions form { display: inline; }

/* --- crise / chance / bilan --- */
.carte.crise { border-left: 6px solid var(--rouge); }
.flash { padding-left: 1.2rem; } .flash li { margin-bottom: .5rem; }
.analyse summary { cursor: pointer; font-weight: 700; } .analyse p { margin-top: .5rem; }
.carte.chance { background: linear-gradient(135deg, #4c1d95, #5b21b6); color: #fff; }
.carte.chance h2, .carte.chance .surtitre { color: #fff; } .carte.chance .surtitre { color: #ddd6fe; }
.resultat-chance { background: rgba(255,255,255,.14); border-radius: 8px; padding: .6rem .8rem; }
.calcul { margin: .75rem 0 0; display: grid; gap: .3rem; }
.calcul div { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px dashed var(--bord); }
.calcul dt { color: #3f3f46; } .calcul dd { margin: 0; font-weight: 700; white-space: nowrap; }
.calcul .total { border-bottom: none; border-top: 2px solid var(--texte); padding-top: .5rem; font-size: 1.05rem; }
.calcul small { display: block; color: var(--gris); font-weight: 400; font-size: .8rem; }

/* --- options (cartes d'investissement) --- */
.options { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 600px) { .options { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .options { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } }
.option { position: relative; display: block; cursor: pointer; }
.option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option-int { display: flex; flex-direction: column; gap: .35rem; height: 100%; border: 2px solid var(--bord); border-radius: var(--rayon); padding: .9rem; background: #fff; transition: border-color .15s, box-shadow .15s; }
.option:hover .option-int { border-color: #c7c9d1; }
.option input:focus-visible + .option-int { outline: 3px solid var(--bleu-clair); }
.option.choisie .option-int, .option input:checked + .option-int { border-color: var(--bleu); box-shadow: 0 0 0 3px var(--bleu-clair); }
.option.business.choisie .option-int { border-color: var(--ambre); box-shadow: 0 0 0 3px var(--ambre-clair); }
.option-tete { display: flex; justify-content: space-between; font-size: .8rem; }
.option-id { font-weight: 700; color: var(--gris); } .option-cout { font-weight: 700; color: var(--bleu); }
.option-titre { font-weight: 700; font-size: 1.02rem; line-height: 1.25; }
.option-resume { font-size: .9rem; }
.option-details { margin: 0; padding-left: 1.1rem; font-size: .85rem; color: #3f3f46; }
.option-promesse { font-size: .85rem; color: var(--vert); font-weight: 500; margin-top: auto; }
.option-coche { display: none; font-size: .8rem; font-weight: 700; color: var(--bleu); }
.option.choisie .option-coche { display: block; }

/* --- budget --- */
.budget-grille { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .budget-grille { grid-template-columns: 1fr 1fr; } }
.budget #levee { max-width: 200px; font-size: 1.1rem; }
.budget .btn-large { margin-top: 1rem; }
#b-reste.neg { color: var(--rouge); }

/* --- fin --- */
.carte.final.gagne { border-left: 6px solid var(--vert); } .carte.final.perdu { border-left: 6px solid var(--rouge); }

/* --- login --- */
.page-login .contenu { display: flex; align-items: center; justify-content: center; background: url("/static/img/background.jpg") center/cover no-repeat, linear-gradient(135deg, #1e1b4b, #4c1d95 60%, #0ea5e9); max-width: none; padding: 2rem 16px; }
.login-carte { background: rgba(255,255,255,.94); border-radius: 14px; padding: 1.6rem; max-width: 520px; width: 100%; box-shadow: var(--ombre); }
.login-carte h1 { font-size: 2.2rem; margin-top: .5rem; }
.logos { display: flex; gap: 1.25rem; align-items: center; }
.login-carte .btn-large { width: 100%; margin: .75rem 0 .5rem; }
.dev { margin-top: 1.25rem; font-size: .9rem; color: var(--gris); } .dev summary { cursor: pointer; }
.form-dev { display: grid; gap: .5rem; margin-top: .5rem; }

/* --- admin --- */
.actions-tete { display: flex; gap: .5rem; flex-wrap: wrap; }
.tours-admin { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.tours-admin li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem .8rem; border: 1px solid var(--bord); border-radius: 8px; }
.tours-admin li.ouvert { background: var(--vert-clair); border-color: #86efac; }
.tours-admin .aide { display: block; }
.barres { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; font-size: .85rem; }
.barres li { display: grid; grid-template-columns: 1fr 100px 28px; align-items: center; gap: .5rem; }
.barres span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barres i { display: block; height: 10px; background: var(--bleu-clair); border-radius: 5px; position: relative; }
.barres i { background: linear-gradient(90deg, var(--bleu-2), var(--bleu-2)); min-width: 2px; }
.barres b { text-align: right; }
.podium { padding-left: 1.2rem; }
.liste-sessions { list-style: none; padding: 0; margin: 0; }
.liste-sessions li { padding: .4rem 0; border-bottom: 1px solid var(--bord); }
.liste-sessions li.courante { font-weight: 700; }
.tableau.joueurs td, .tableau.joueurs th { white-space: nowrap; }