:root {
  --vert: #083320; --vert2: #1C5539; --vert-pale: #9DB5A7; --fond: #F4F6F3; --carte: #FFFFFF;
  --encre: #10231A; --gris: #4A5A51; --trait: #DDE5DF; --bord: #C9D8CF; --bleu: #0055A4; --rouge: #EF4135; --alerte: #A3271C;
  --titre: Montserrat, system-ui, sans-serif; --texte: 'IBM Plex Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fond); color: var(--encre); font-family: var(--texte); font-size: 15px; line-height: 1.5; -webkit-text-size-adjust: 100%; }
h1, h2, h3 { font-family: var(--titre); font-weight: 700; margin: 0; line-height: 1.25; }
h1 { font-size: 24px; } h2 { font-size: 17px; } h3 { font-size: 15px; }
p { margin: 0; }
a { color: var(--vert); }
.chargement { padding: 40px 16px; text-align: center; color: var(--gris); }

.entete { background: var(--vert); color: #fff; padding: calc(18px + env(safe-area-inset-top, 0px)) 16px 20px; }
.entete .dedans, .contenu, .onglets .dedans { max-width: 720px; margin: 0 auto; }
.large .entete .dedans, .large .contenu, .large .onglets .dedans { max-width: 1120px; }
.marque { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.marque svg { width: 64px; height: 25px; flex: none; }
.marque .nom { font-family: var(--titre); font-weight: 700; font-size: 15px; letter-spacing: .22em; }
.marque .nom span { font-weight: 600; }
.tricolore { display: flex; width: 54px; height: 4px; margin-top: 5px; }
.tricolore i { flex: 1; } .tricolore i:nth-child(1) { background: var(--bleu); } .tricolore i:nth-child(2) { background: #fff; } .tricolore i:nth-child(3) { background: var(--rouge); }
.entete p { color: #C9D8CF; font-size: 14px; margin-top: 4px; }

.onglets { background: var(--carte); border-bottom: 1px solid var(--trait); position: sticky; top: 0; z-index: 5; }
.onglets .dedans { display: flex; }
.onglets button { flex: 1; min-height: 48px; border: 0; border-bottom: 3px solid transparent; background: none; font: 600 14px var(--texte); color: var(--gris); cursor: pointer; }
.onglets button[aria-current="page"] { color: var(--vert); border-bottom-color: var(--vert); }

.contenu { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.carte { background: var(--carte); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.carte.sombre { background: var(--vert); color: #fff; }
.carte.sombre .discret { color: #C9D8CF; }
.carte.lien { cursor: pointer; border: 0; text-align: left; font: inherit; color: inherit; width: 100%; }
.surtitre { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.sombre .surtitre { color: #C9D8CF; }
.discret { color: var(--gris); font-size: 14px; }
.petit { font-size: 13px; }
.ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.colonne { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pastille { display: inline-block; background: var(--fond); color: var(--vert); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.sombre .pastille { background: #fff; }
.pastille.attente { background: #EEF1EE; color: var(--gris); }
.pastille.alerte { background: #FBEAE7; color: var(--alerte); }

.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.tuile { background: var(--fond); border-radius: 10px; padding: 10px; }
.tuile .lib { font-size: 12px; color: var(--gris); }
.tuile .val { font-family: var(--titre); font-weight: 700; font-size: 18px; }
.tuile .val small { font-size: 12px; font-weight: 500; }
.compteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.compteurs .carte { gap: 2px; } .compteurs .val { font-family: var(--titre); font-weight: 700; font-size: 28px; }

.reps { display: flex; flex-direction: column; gap: 6px; }
.rep { display: grid; grid-template-columns: 22px 46px 1fr 40px; align-items: center; gap: 8px; font-size: 13px; }
.rep .n { color: var(--gris); } .rep .t { font-weight: 600; } .rep .e { text-align: right; font-weight: 600; }
.piste { position: relative; height: 14px; background: var(--fond); border-radius: 4px; }
.piste::before { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: var(--vert); }
.piste i { position: absolute; top: 0; bottom: 0; background: var(--vert); border-radius: 3px; }
.piste i.hors { background: var(--vert-pale); }
.legende { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--gris); }
.legende span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--vert); margin-right: 6px; }
.legende span.hors::before { background: var(--vert-pale); }
.legende span.sens::before { display: none; }
[hidden] { display: none !important; }

.retour p + p { margin-top: 10px; }
.retour h3 { font-size: 15px; margin: 16px 0 6px; color: #fff; letter-spacing: .01em; }
.carte.pale { background: #DDEAE2; color: var(--encre); }
.carte.pale h2 { color: var(--vert); }
.pale .retour h3 { color: var(--vert); }
.pale .retour p { color: var(--encre); }
.pale .source { border-top-color: #B9CEC1; color: var(--gris); }
.sombre .retour p { font-size: 16px; }
.retour h3:first-child { margin-top: 0; }
.retour p { margin: 0; }
.source { border-top: 1px solid var(--vert2); padding-top: 10px; font-size: 12px; color: #C9D8CF; }

label { font-size: 14px; color: var(--gris); display: block; margin-bottom: 6px; }
input[type=text], input[type=number], input[type=date], input[type=time], input[type=password], select, textarea {
  width: 100%; min-height: 48px; border: 1px solid var(--bord); border-radius: 10px; padding: 10px 12px; font: 400 16px var(--texte); color: var(--encre); background: #fff; }
textarea { resize: vertical; min-height: 84px; }
.champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.bouton { min-height: 48px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--vert); color: #fff; font: 600 15px var(--titre); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.bouton.second { background: #fff; color: var(--vert); border: 1px solid var(--vert); }
.bouton.danger { background: #fff; color: var(--alerte); border: 1px solid var(--alerte); }
.bouton.petit { min-height: 44px; padding: 0 14px; font-size: 13px; }
.bouton:disabled { opacity: .5; cursor: default; }
.sombre .bouton { background: #fff; color: var(--vert); }
.choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 6px; }
.choix button { min-height: 44px; border: 1px solid var(--bord); background: #fff; border-radius: 10px; font: 600 13px var(--texte); color: var(--encre); cursor: pointer; padding: 0 4px; }
.choix button[aria-pressed="true"] { background: var(--vert); border-color: var(--vert); color: #fff; }
.bascule { display: inline-flex; background: #fff; border: 1px solid var(--bord); border-radius: 10px; padding: 3px; gap: 3px; }
.bascule button { min-height: 44px; padding: 0 14px; border: 0; background: none; border-radius: 8px; font: 600 13px var(--texte); color: var(--encre); cursor: pointer; }
.bascule button[aria-pressed="true"] { background: var(--vert); color: #fff; }
.note { border-top: 1px solid var(--trait); padding-top: 10px; }
.note .date { font-size: 12px; font-weight: 600; color: var(--gris); }
.message { border-radius: 10px; padding: 12px 14px; font-size: 14px; background: #EEF1EE; }
.message.alerte { background: #FBEAE7; color: var(--alerte); }
.defile { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
th { text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); font-weight: 600; padding: 8px 10px; }
td { padding: 10px; border-top: 1px solid var(--trait); vertical-align: top; }
.deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.accueil { max-width: 460px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.badge { width: 150px; height: 150px; margin: 8px auto 0; display: block; }
details summary { cursor: pointer; font-weight: 600; color: var(--vert); min-height: 44px; display: flex; align-items: center; }

/* Graphiques et tableaux d'une séance */
.bloc-graph { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--trait); padding-top: 14px; }
.carte h3 { font-size: 15px; }
.graph { width: 100%; min-height: 20px; }
.graph svg { display: block; overflow: visible; font-family: var(--texte); touch-action: pan-y; }
.graph rect[data-i], .graph circle[data-i] { cursor: pointer; }
.info-graph { font-size: 13px; font-weight: 600; min-height: 20px; color: var(--encre); }
.legende-phases { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--gris); }
.legende-phases i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }
.phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.phase { background: var(--fond); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.phase-titre { font-family: var(--titre); font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.phase-ligne { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.phase-ligne span { color: var(--gris); } .phase-ligne strong { text-align: right; }
table.tours { min-width: 560px; font-size: 13px; font-variant-numeric: tabular-nums; }
table.tours td { padding: 7px 8px; white-space: nowrap; } table.tours th { padding: 6px 8px; }
table.tours td:first-child i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 8px; }
table.tours tr.ph-effort td { font-weight: 600; } table.tours tr.ph-recup td { color: var(--gris); }
table.tours tr.actif td { background: #EAF1EC; } table.tours tbody tr { cursor: pointer; }
.jauge { display: inline-block; width: 46px; height: 6px; background: var(--fond); border-radius: 3px; margin-right: 8px; vertical-align: middle; }
.jauge b { display: block; height: 100%; border-radius: 3px; }
.zones-barre { display: flex; gap: 2px; height: 16px; border-radius: 4px; overflow: hidden; }
.zones-barre i { min-width: 3px; }
.zones-liste { display: flex; flex-direction: column; gap: 4px; font-size: 13px; margin-top: 4px; }
.zones-liste div { display: grid; grid-template-columns: 14px 1fr auto 42px; align-items: center; gap: 6px; }
.zones-liste i { width: 10px; height: 10px; border-radius: 2px; border: 1px solid #B4CCBF; }
.zones-liste em { font-style: normal; color: var(--gris); text-align: right; }
.repli summary { font-size: 14px; }

.retour h3 { display: flex; align-items: center; gap: 8px; }
.retour h3 svg { width: 20px; height: 20px; flex: none; }

/* Programme du club */
.seance-club .quand { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; color: var(--vert); }
.seance-club .quand span { color: var(--gris); font-size: 14px; }
.seance-club h2 { font-size: 18px; }
.seance-club .detail-club { white-space: pre-line; margin: 0; }
.seance-club.passee { opacity: .6; }

.seance-club.prochaine { outline: 2px solid var(--vert); }
.seance-club p { margin: 0; }
.niveaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.niveaux > div { background: #EEF3EF; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.niveaux span, .ton-allure span { font-size: 13px; color: var(--gris); }
.ton-allure { background: var(--vert); color: #fff; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.ton-allure span { color: #C9D8CF; } .ton-allure b { font-family: var(--titre); font-size: 20px; }
.cycle { margin-top: 8px; } .cycle h2 { color: var(--vert); font-size: 17px; } .cycle p { margin: 2px 0 0; }
.repli .pile { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.repli p { margin: 8px 0 0; }

/* Scène d'attente pendant la rédaction de l'analyse */
.scene-attente { background: var(--vert); border-radius: 14px; overflow: hidden; margin-top: 12px; }
.scene-attente svg { display: block; width: 100%; height: 162px; }
.scene-attente p { margin: 0; padding: 10px 14px 10px; color: #fff; font-family: var(--titre); font-weight: 600; font-size: 14px; text-align: center; min-height: 3em; }
.scene-attente .decor-loin { animation: defile-loin 24s linear infinite; }
.scene-attente .sol { animation: defile-sol .9s linear infinite; }
.scene-attente .decor-proche { animation: defile-proche 16.2s linear infinite; }
.scene-attente .tricolore { margin: -4px auto 14px; }
@keyframes defile-proche { to { transform: translateX(-1080px); } }
.scene-attente .coureur { animation: foulee .35s ease-in-out infinite alternate; }
.scene-attente .ombre { transform-origin: 180px 101px; animation: ombre .35s ease-in-out infinite alternate; }
.scene-attente .cuisse { animation: cuisse .7s linear infinite; }
.scene-attente .tibia { animation: tibia .7s linear infinite; }
.scene-attente .bras { animation: bras .7s ease-in-out infinite; }
.scene-attente .b { animation-delay: -.35s; }
.scene-attente .cuisse.b, .scene-attente .tibia.b, .scene-attente .bras.b { opacity: .55; }
@keyframes defile-loin { to { transform: translateX(-360px); } }
@keyframes defile-sol { to { transform: translateX(-60px); } }
@keyframes foulee { from { transform: translateY(1px); } to { transform: translateY(-3px); } }
@keyframes ombre { from { transform: scaleX(1); } to { transform: scaleX(.8); } }
@keyframes cuisse { 0% { transform: rotate(-42deg); } 50% { transform: rotate(32deg); } 100% { transform: rotate(-42deg); } }
@keyframes tibia { 0% { transform: rotate(12deg); } 25% { transform: rotate(4deg); } 50% { transform: rotate(45deg); } 75% { transform: rotate(95deg); } 100% { transform: rotate(12deg); } }
@keyframes bras { 0% { transform: rotate(38deg); } 50% { transform: rotate(-38deg); } 100% { transform: rotate(38deg); } }
@media (prefers-reduced-motion: reduce) { .scene-attente * { animation: none !important; } }

/* À propos : notice et nouveautés */
.notice { display: flex; flex-direction: column; gap: 8px; }
.notice .chapitre { border: 1px solid var(--trait); border-radius: 12px; padding: 12px 14px; background: #fff; }
.notice .chapitre > summary { font-family: var(--titre); font-weight: 700; color: var(--vert); cursor: pointer; }
.notice .chapitre[open] > summary { margin-bottom: 8px; }
.notice p { margin: 0 0 8px; } .notice ul, .notice ol { margin: 0 0 10px; padding-left: 22px; } .notice li { margin-bottom: 4px; }
.notice a { color: var(--vert2); font-weight: 600; word-break: break-word; }
.notice table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 460px; } .notice th { text-align: left; background: #EEF3EF; padding: 8px; } .notice td { padding: 8px; border-top: 1px solid var(--trait); vertical-align: top; }
.maj ul { margin: 6px 0 0; padding-left: 20px; } .maj li { margin-bottom: 5px; } .maj + .maj { margin-top: 6px; border-top: 1px solid var(--trait); padding-top: 12px; }
.onglets .dedans { overflow-x: auto; } .onglets button { white-space: nowrap; padding: 0 8px; font-size: 13.5px; }

.points { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; } .accueil a { color: var(--vert2); font-weight: 600; }

/* Formulaires : rien ne déborde, même le champ date de l'iPhone */
.champs > div { min-width: 0; } .champs.paire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
input[type=date], input[type=time] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; text-align: left; }
input[type=date]::-webkit-date-and-time-value { text-align: left; }
.pastille-nb { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 5px; border-radius: 9px; background: var(--rouge); color: #fff; font-size: 11px; line-height: 18px; text-align: center; vertical-align: 1px; }

/* Nouveautés signalées et « Mon évolution » */
.neuf { color: var(--rouge); font-weight: 700; }
.discret-clair { color: #C9D8CF; font-size: 13px; margin: -4px 0 6px; }

/* Questions à l'agent IA coach */
.echange { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.echange .q { margin: 0; align-self: flex-end; max-width: 88%; background: var(--vert); color: #fff; border-radius: 14px 14px 4px 14px; padding: 10px 14px; }
.echange .r { align-self: flex-start; max-width: 94%; background: #EEF3EF; border-radius: 14px 14px 14px 4px; padding: 10px 14px; } .echange .r p { margin: 0; } .echange .r p + p { margin-top: 8px; }
/* Impression et PDF d'une analyse : on ne garde que le contenu */
@media print {
  .onglets, #retour, #questions textarea, #b-q, #ecrire, #b-partager, #b-pdf, #m-partage, .scene-attente, .info-graph { display: none !important; }
  body { background: #fff; } .carte { break-inside: avoid; box-shadow: none; border: 1px solid #DDE5DF; } .contenu { max-width: none; }
  .entete, .carte.sombre, .ton-allure { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Les trois volets d'une séance */
.volets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.volets button { min-height: 48px; border: 1px solid var(--vert); background: #fff; color: var(--vert); border-radius: 999px; font: 600 14px var(--titre); cursor: pointer; padding: 0 6px; }
.volets button[aria-selected="true"] { background: var(--vert); color: #fff; }
.cache { display: none !important; }
@media print { .volets { display: none !important; } }

/* ---------- Refonte visuelle : identité, cartes, séance, navigation, animations, mode sombre ---------- */
:root {
  --t-end: #2E7D5B; --t-end-f: #E3EEE7; --t-end-t: #1C5539;
  --t-frac: #0055A4; --t-frac-f: #E1ECF8; --t-frac-t: #00428A;
  --t-prog: #6B47A8; --t-prog-f: #EEE7F7; --t-prog-t: #5B3A8C;
  --t-course: #C8372C; --t-course-f: #FBE4E2; --t-course-t: #A3271C;
  --n-ok-f: #E3EEE7; --n-ok-t: #1C5539; --n-partiel-f: #FCEBD7; --n-partiel-t: #8A4B00; --n-revoir-f: #FBE4E2; --n-revoir-t: #A3271C;
  --lent: #C26A12; --bande: rgba(46,125,91,.14); --liseret-blanc: #C9D8CF; --ombre: 0 6px 22px rgba(8,51,32,.10);
}
.entete { position: relative; overflow: hidden; isolation: isolate; }
.filigrane { position: absolute; right: -70px; bottom: -8px; width: 340px; color: #fff; opacity: .08; z-index: -1; pointer-events: none; }
.filigrane svg { display: block; width: 100%; height: auto; }
@media (min-width: 760px) { .filigrane { right: calc(50% - 470px); } }
.carte { border-radius: 18px; }
.liseret { display: flex; width: 36px; height: 3px; margin-top: 6px; } .liseret i { flex: 1; }
.liseret i:nth-child(1) { background: var(--bleu); } .liseret i:nth-child(2) { background: var(--liseret-blanc); } .liseret i:nth-child(3) { background: var(--rouge); }
.titre-section { font-size: 18px; padding: 6px 4px 0; }

/* Accueil : la semaine et les cartes de séances */
.semaine { box-shadow: var(--ombre); gap: 10px; }
.semaine-km { display: flex; align-items: baseline; gap: 6px; }
.semaine-km b { font: 800 34px/1 var(--titre); } .semaine-km span { color: var(--gris); font-weight: 600; font-size: 15px; }
.lien-fort { font-size: 13px; font-weight: 600; color: var(--vert2); }
.sem-graph { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; height: 88px; align-items: end; }
.sem-graph i { display: block; height: var(--h, 6%); background: var(--bord); border-radius: 6px 6px 3px 3px; transform-origin: bottom; animation: monte .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 40ms); }
.sem-graph i.courante { background: var(--vert2); }
.sem-noms { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; font-size: 10px; color: var(--gris); text-align: center; margin-top: -4px; }
.pile-seances { display: flex; flex-direction: column; gap: 12px; }
.carte-seance { border: 1px solid var(--trait); animation: glisse .45s ease both; animation-delay: calc(var(--i, 0) * 50ms); }
.cs-haut { display: flex; gap: 12px; align-items: center; } .cs-haut .colonne { flex: 1; }
.cs-bas { display: flex; gap: 8px; flex-wrap: wrap; }
.mini { width: 96px; height: 44px; flex: none; }
.mini.t-end { color: var(--t-end); } .mini.t-frac { color: var(--t-frac); } .mini.t-prog { color: var(--t-prog); } .mini.t-course { color: var(--t-course); }
.mini .trace { stroke-dasharray: 1; animation: trace .9s ease .15s both; }
.etiquette { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; }
.etiquette svg { width: 14px; height: 14px; flex: none; }
.etiquette.t-end { background: var(--t-end-f); color: var(--t-end-t); } .etiquette.t-frac { background: var(--t-frac-f); color: var(--t-frac-t); }
.etiquette.t-prog { background: var(--t-prog-f); color: var(--t-prog-t); } .etiquette.t-course { background: var(--t-course-f); color: var(--t-course-t); }
.etiquette.n-ok { background: var(--n-ok-f); color: var(--n-ok-t); } .etiquette.n-partiel { background: var(--n-partiel-f); color: var(--n-partiel-t); } .etiquette.n-revoir { background: var(--n-revoir-f); color: var(--n-revoir-t); }

/* Séance : en-tête */
.tete-seance { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: -6px 0 8px; flex-wrap: wrap; }
.retour-entete { background: none; border: 0; color: #fff; font: 600 14px var(--texte); display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0; cursor: pointer; }
.retour-entete svg, .puce-meteo svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.retour-entete svg { width: 20px; height: 20px; } .puce-meteo svg { width: 16px; height: 16px; stroke-width: 1.8; }
.puce-meteo { font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.12); display: inline-flex; gap: 6px; align-items: center; }
.etiquette-entete { display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; margin-bottom: 8px; background: #9FD8B8; color: #062217; }
.etiquette-entete.t-frac { background: #9CC4F0; } .etiquette-entete.t-prog { background: #CDB8F0; } .etiquette-entete.t-course { background: #F6B3AC; }
.gros-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-top: 16px; }
@media (min-width: 600px) { .gros-chiffres { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gc-val { display: flex; align-items: baseline; gap: 4px; } .gc-val b { font: 800 30px/1 var(--titre); font-variant-numeric: tabular-nums; }
.gc-val span { font-size: 14px; font-weight: 600; color: #C9D8CF; } .gc-lib { font-size: 12px; color: #C9D8CF; margin-top: 3px; }

/* Séance : trois volets en pilule */
.volets { background: var(--carte); border-radius: 999px; padding: 5px; gap: 4px; box-shadow: var(--ombre); }
.volets button { border: 0; background: transparent; color: var(--gris); font-weight: 700; font-size: 13px; min-height: 44px; }
.volets button[aria-selected="true"] { background: var(--vert); color: #fff; }

/* Séance : résumé avec jauge */
.resume-tete { display: flex; gap: 14px; align-items: center; }
.jauge-reussite { width: 64px; height: 64px; flex: none; }
.jauge-reussite.n-ok { color: #7FD1A6; } .jauge-reussite.n-partiel { color: #F2A54A; } .jauge-reussite.n-revoir { color: #F29085; }
.jauge-reussite .arc { animation: remplit 1s ease .2s both; }
.resume-niveau { font: 800 18px var(--titre); } .resume-verdict { font-size: 13px; font-weight: 600; color: #C9D8CF; }
.retiens { background: rgba(255,255,255,.1); border-radius: 14px; padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; }
.retiens svg { width: 20px; height: 20px; flex: none; margin-top: 1px; fill: none; stroke: #fff; stroke-width: 1.8; }

/* Séance : répétitions face à la zone visée */
.reps-graph svg { display: block; width: 100%; height: auto; }
.reps-graph .bande { fill: var(--bande); }
.reps-graph rect.b-dans { fill: var(--t-end); } .reps-graph rect.b-lent { fill: var(--lent); } .reps-graph rect.b-vite { fill: var(--t-frac); }
.reps-graph rect[class^="b-"] { transform-box: fill-box; transform-origin: bottom; animation: monte .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 35ms); }
.reps-num { display: grid; gap: 2px; font-size: 10px; color: var(--gris); text-align: center; margin-top: -6px; }
.legende-reps { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--gris); }
.legende-reps span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.l-dans::before { background: var(--t-end); } .l-lent::before { background: var(--lent); } .l-vite::before { background: var(--t-frac); }
.legende-reps .l-bande::before { width: 14px; background: var(--bande); border: 1px dashed var(--t-end); }

/* Séance : analyse détaillée en parties repliables */
.carte.detaillee { padding: 16px 10px 12px; } .detaillee > h2 { padding: 0 6px 6px; }
.parties { display: flex; flex-direction: column; }
.partie { border-top: 1px solid var(--trait); }
.partie > summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 6px; color: var(--encre); font: 600 15px var(--texte); }
.partie > summary::-webkit-details-marker { display: none; }
.partie-ico { width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.partie-ico svg { width: 20px; height: 20px; }
.p0 .partie-ico, .p1 .partie-ico, .p5 .partie-ico { background: var(--n-ok-f); color: var(--n-ok-t); }
.p2 .partie-ico { background: var(--n-partiel-f); color: var(--n-partiel-t); } .p3 .partie-ico { background: var(--t-frac-f); color: var(--t-frac-t); } .p4 .partie-ico { background: var(--t-prog-f); color: var(--t-prog-t); }
.partie-titre { flex: 1; }
.chevron { width: 18px; height: 18px; fill: none; stroke: var(--gris); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.partie[open] .chevron { transform: rotate(90deg); }
.partie .retour { padding: 0 8px 14px 54px; } .partie .retour p { color: var(--encre); }
.detaillee .source { color: var(--gris); border-top-color: var(--trait); margin: 4px 6px 0; }

/* Barre d'onglets : en bas sur téléphone, avec icônes */
.onglets button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; position: relative; }
.ico-onglet { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 719px) {
  .onglets { position: fixed; top: auto; bottom: 0; left: 0; right: 0; border-bottom: 0; border-top: 1px solid var(--trait); padding-bottom: env(safe-area-inset-bottom, 0px); z-index: 20; box-shadow: 0 -4px 16px rgba(8,51,32,.06); }
  .onglets .dedans { overflow: visible; }
  .onglets button { flex-direction: column; gap: 2px; min-height: 60px; border-bottom: 0; font-size: 11px; padding: 0 2px; }
  .onglets button::after { content: ''; width: 18px; height: 3px; border-radius: 2px; background: transparent; }
  .onglets button[aria-current="page"]::after { background: var(--vert); }
  .ico-onglet { width: 24px; height: 24px; }
  .onglets .pastille-nb { position: absolute; top: 5px; left: calc(50% + 5px); margin: 0; }
  .contenu { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}

/* Toucher : léger enfoncement */
.bouton, .carte.lien, .volets button, .onglets button, .retour-entete, .partie > summary { transition: transform .12s ease; }
.bouton:active, .carte.lien:active, .volets button:active, .onglets button:active, .retour-entete:active { transform: scale(.97); }

@keyframes monte { from { transform: scaleY(0); } }
@keyframes glisse { from { opacity: 0; transform: translateY(10px); } }
@keyframes trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes remplit { from { stroke-dasharray: 0 200; } }
@media (prefers-reduced-motion: reduce) {
  .sem-graph i, .carte-seance, .mini .trace, .reps-graph rect, .jauge-reussite .arc { animation: none !important; }
  .bouton, .carte.lien, .volets button, .onglets button, .chevron { transition: none !important; }
}
@media print { .filigrane, .retour-entete { display: none !important; } .partie .retour { padding-left: 8px; } .partie:not([open]) > .retour { display: block; } }

/* Mode sombre, selon le réglage du téléphone */
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0A1711; --carte: #12241A; --encre: #E8F0EA; --gris: #A6BAAE; --trait: #22392C; --bord: #2F4A3C; --vert: #7FD1A6; --vert2: #7FD1A6; --vert-pale: #3F6E57; --alerte: #F29085;
    --t-end: #6CC59A; --t-end-f: #1D3A2A; --t-end-t: #9FD8B8; --t-frac: #6FA8E8; --t-frac-f: #14304F; --t-frac-t: #9CC4F0;
    --t-prog: #B39AE6; --t-prog-f: #2D2343; --t-prog-t: #CDB8F0; --t-course: #F08A7E; --t-course-f: #3D1D1A; --t-course-t: #F6B3AC;
    --n-ok-f: #1D3A2A; --n-ok-t: #9FD8B8; --n-partiel-f: #3A2A14; --n-partiel-t: #F2C48A; --n-revoir-f: #3D1D1A; --n-revoir-t: #F6B3AC;
    --lent: #E0954A; --bande: rgba(127,209,166,.18); --liseret-blanc: #E8F0EA; --ombre: 0 6px 22px rgba(0,0,0,.35);
    color-scheme: dark;
  }
  .entete, .scene-attente { background: #062217; }
  .carte.sombre, .ton-allure { background: #163A28; }
  .sombre .pastille, .sombre .bouton { background: #fff; color: #083320; }
  .bouton { background: #2E7D5B; color: #fff; }
  .bouton.second, .bouton.danger, .choix button, .bascule, .notice .chapitre { background: transparent; }
  .volets button[aria-selected="true"], .choix button[aria-pressed="true"], .bascule button[aria-pressed="true"] { background: #2E7D5B; border-color: #2E7D5B; color: #fff; }
  .onglets button[aria-current="page"] { border-bottom-color: var(--vert); }
  input[type=text], input[type=number], input[type=date], input[type=time], input[type=password], select, textarea { background: #0F1F17; color: var(--encre); }
  .message, .pastille.attente { background: #183026; color: var(--encre); }
  .message.alerte, .pastille.alerte { background: #3D1D1A; color: #F6B3AC; }
  .carte.pale { background: #163126; } .pale .source { border-top-color: #2F4A3C; }
  .niveaux > div, .notice th, .echange .r { background: #183026; }
  .echange .q { background: #2E7D5B; }
  table.tours tr.actif td { background: #1D3A2A; }
  .zones-liste i { border-color: #2F4A3C; }
  /* Couleurs des graphiques dessinés par l'appli */
  .graph [fill="#083320"] { fill: #7FD1A6; } .graph [stroke="#083320"] { stroke: #7FD1A6; }
  .graph [fill="#3F7459"] { fill: #5FAE87; } .graph [stroke="#3F7459"] { stroke: #5FAE87; }
  .graph [fill="#86AC97"] { fill: #3F6E57; } .graph [fill="#C3D2C9"] { fill: #2F4A3C; } .graph [fill="#6E9A82"] { fill: #3F6E57; }
  .graph [fill="#10231A"], .graph [fill="#4A5A51"] { fill: #A6BAAE; } .graph [stroke="#10231A"] { stroke: #E8F0EA; }
  .graph [stroke="#DDE5DF"] { stroke: #22392C; } .graph [fill="#DDE5DF"] { fill: #22392C; }
  .graph [stroke="#1C5539"] { stroke: #7FD1A6; } .graph [fill="#1C5539"] { fill: #7FD1A6; }
  .graph [stroke="#fff"] { stroke: #12241A; }
  i[style*="#083320"], b[style*="#083320"] { background: #7FD1A6 !important; } i[style*="#3F7459"], b[style*="#3F7459"] { background: #5FAE87 !important; }
  i[style*="#86AC97"] { background: #3F6E57 !important; } i[style*="#C3D2C9"] { background: #2F4A3C !important; }
  i[style*="#DCE8E1"] { background: #203A2C !important; } i[style*="#B4CCBF"] { background: #2F5442 !important; } i[style*="#7FA892"] { background: #4C8A6C !important; }
}

/* Séance pas encore consultée */
.badge-nouveau { display: inline-flex; align-items: center; gap: 5px; background: var(--rouge); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; padding: 3px 8px 3px 6px; border-radius: 999px; margin-right: 8px; vertical-align: 1px; }
.badge-nouveau i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pouls 1.6s ease-in-out infinite; }
.carte-seance.non-lue { border-color: var(--rouge); box-shadow: 0 0 0 1px var(--rouge) inset; }
.carte-seance.non-lue h2 { font-weight: 800; }
@keyframes pouls { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .badge-nouveau i { animation: none; } }
@media (prefers-color-scheme: dark) { .badge-nouveau { background: #D9473C; } }

/* Listes dans les analyses */
.retour ul.puces { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; } .retour ul.puces + p, .retour p + ul.puces { margin-top: 8px; }
.carte.sombre .retour ul.puces li { font-size: 16px; }

/* Mes allures */
.allures { display: flex; flex-direction: column; }
.allure { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--trait); }
.allures .allure:first-child, .carte > .allure { border-top: 0; }
.allure-val { font: 800 20px/1.1 var(--titre); white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--vert2); text-align: right; }
.allure-val span { font-weight: 600; color: var(--gris); margin: 0 2px; } .allure-val small { font: 600 12px var(--texte); color: var(--gris); margin-left: 2px; }
.allure-val.petit-val { font-size: 17px; }
.zones-fc { display: flex; flex-direction: column; gap: 6px; }
.zone-fc { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 12px; font-size: 14px; }
.zone-fc b { font-family: var(--titre); font-variant-numeric: tabular-nums; }
.zone-fc.z0 { background: #EEF3EF; } .zone-fc.z1 { background: #DCE8E1; } .zone-fc.z2 { background: #B4CCBF; } .zone-fc.z3 { background: #7FA892; color: #062217; } .zone-fc.z4 { background: #3F7459; color: #fff; }
@media (prefers-color-scheme: dark) {
  .zone-fc.z0 { background: #183026; } .zone-fc.z1 { background: #203A2C; } .zone-fc.z2 { background: #2F5442; } .zone-fc.z3 { background: #4C8A6C; color: #fff; } .zone-fc.z4 { background: #7FD1A6; color: #062217; }
}
@media (max-width: 719px) { .onglets button { font-size: 10.5px; } }

/* Courses autour de Douvrin */
.volets.deux { grid-template-columns: repeat(2, 1fr); }
.filtres-courses { grid-template-columns: repeat(4, 1fr); }
.filtres-dist { grid-template-columns: repeat(3, 1fr); }
.filtres-groupe { display: flex; flex-direction: column; gap: 4px; }
.source-courses { gap: 8px; }
.source-courses p { margin: 0; }
.mois-course { margin: 10px 2px 0; font-size: 15px; color: var(--vert); }
a.carte.course { text-decoration: none; color: inherit; gap: 6px; border: 1px solid transparent; transition: border-color .15s; }
a.carte.course:hover { border-color: var(--vert-pale); }
a.carte.course h3 { margin: 0; font-size: 16px; line-height: 1.3; }
a.carte.course.annulee h3 { text-decoration: line-through; opacity: .6; }
.course .quand { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ligne-pastilles { display: flex; gap: 6px; flex-wrap: wrap; }

/* 1000 pattes : logo dans le bandeau et mille-pattes qui court (repris de leur site) */
.source-courses { position: relative; overflow: hidden; padding: 10px 14px 30px; }
.source-courses p { position: relative; z-index: 0; font-size: 13px; }
.piste-1000pattes { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; pointer-events: none; z-index: 1; }
.coureur-1000pattes { position: absolute; bottom: -2px; left: 0; width: 185px; height: 161px; transform-origin: bottom center;
  background: url("https://nord-pas-de-calais.1000pattes.guide/wp-content/themes/astra-child/assets/images/spritesheet_1000pattes.png") left center repeat-x;
  animation: pattes-pas .3s steps(3) infinite, pattes-course 14s linear infinite; }
@keyframes pattes-pas { 100% { background-position: -561px center; } }
@keyframes pattes-course {
  0% { left: -150px; transform: scale(.28) scaleX(-1); }
  47% { left: calc(100% - 20px); transform: scale(.28) scaleX(-1); }
  50% { left: calc(100% - 20px); transform: scale(.28) scaleX(1); }
  97% { left: -150px; transform: scale(.28) scaleX(1); }
  100% { left: -150px; transform: scale(.28) scaleX(-1); }
}
@media (prefers-reduced-motion: reduce) { .coureur-1000pattes { animation: none; left: -55px; transform: scale(.28) scaleX(-1); } }

/* Pastilles « Aujourd'hui » / « Demain » aux couleurs du logo 1000 pattes (jaune, vert, rose) */
.pastille.pattes-auj { background: #E8D808; color: #2F4A1C; box-shadow: inset 0 0 0 1.5px #F80878; }
.pastille.pattes-demain { background: #98B848; color: #1F3317; }

/* Écran de connexion : aide à la création du compte Intervals.icu */
.nouveau-compte summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.nouveau-compte summary::-webkit-details-marker { display: none; }
.nouveau-compte summary::after { content: "+"; font: 600 20px var(--titre); color: var(--vert); }
.nouveau-compte[open] summary::after { content: "–"; }
.etapes-compte { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.nouveau-compte p { margin: 8px 0 0; }