@charset "UTF-8";
:root{
    color-scheme:light;
    --ink:#1c7bca;
    --muted:#637875;
    --line:#dbe4e0;
    --accent:#c6ef87;
    --bg: #FCFCFB;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--ink);
    background:var(--bg);
    font-synthesis:none;
    --header-height: 60px;
}
*::-webkit-scrollbar {
  display: none;
}
* {
  -ms-overflow-style: none; 
  scrollbar-width: none;  
    
}

html,
body {
	overscroll-behavior-y: none;
}

*{box-sizing:border-box}
body{
    margin:0;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    -webkit-tap-highlight-color:transparent
}
body::after {
	content: "";
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;

	height: env(safe-area-inset-bottom);

	background: var(--bg);

	z-index: 1000;
	pointer-events: none;
}
button,input{font:inherit}
button,a,input{touch-action:manipulation}
button{cursor:pointer}a{color:inherit}
button:focus-visible,a:focus-visible{outline:3px solid #548a62;outline-offset:4px}

.app-header {
	/*position: ;
	top: env(safe-area-inset-top);
	left: 0;
	right: 0;*/

    margin-top: env(safe-area-inset-top);
	height: var(--header-height);
	box-sizing: border-box;

	padding: 6px 20px;

	background: var(--ink);
	z-index: 1000;
    display: flex;
    width: 100%;
}


/* zone système en haut */
.app-header::before, body:before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;

	height: env(safe-area-inset-top);

	background: var(--ink);
}

.brand{
    display:flex;
    gap:12px;
    align-items:center;
    font-weight:750;
    font-size:18px;
    text-decoration:none;
    color: #fff;
}
.brand IMG {
    width:42px;
    height:42px;
}

.brand small{display:block;font-size:11px;letter-spacing:1px;font-weight:450;color:#c8dad0;margin-top:3px}
.brand-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--accent);color:var(--ink);font-size:26px;font-weight:850}
.version{
    border:1px solid #4c6861;
    padding:5px 9px;
    border-radius:6px;
    font-size:11px;color:#d3e4d7;
    margin-left: auto;
}
main{
    width:min(940px,100%);
    padding:0;
    margin:0 auto;
    flex:1;
    
}

.card{
    background:#fff;
    padding:20px;
}
.login-card{
    max-width:440px;margin:25px auto
}
.eyebrow{
    font-size:10px;
    letter-spacing:1.8px;
    font-weight:750;
    color:#668375;
    margin:0 0 14px
}
h1{font-size:32px;letter-spacing:-1px;line-height:1.18;margin:0 0 12px}
h2{font-size:23px;letter-spacing:-.5px}
.intro,.muted{color:var(--muted);line-height:1.6}
.intro{margin-bottom:30px}
label{display:block;font-weight:650;font-size:13px;margin:20px 0 8px}

input:not([type=hidden]){
    display:block;
    width:100%;
    border:1px solid red;
    padding:5px 14px;
    background:#fbfcfa;
    color:var(--ink);
    font-size:16px
}
input:focus{outline:none}

.primary,.secondary{border:0;border-radius:10px;font-weight:700;padding:14px 18px}
.primary{width:100%;display:flex;justify-content:space-between;background:var(--ink);color:white;margin-top:28px}
.primary:hover{background:#28514b}
.secondary{border:1px solid var(--line);background:white;font-size:13px;padding:11px 14px}
.notice,.error{font-size:14px;line-height:1.6;border-radius:10px;padding:14px}
.notice{background:#f1f6e7;border:1px solid #d9e6c7}
.error{background:#fff0ec;color:#983e30;border:1px solid #f1c6bc}
.welcome{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:26px}
.welcome h1{font-size:28px}
.welcome .eyebrow{margin-bottom:8px}
.empty-state{text-align:center;padding:48px 24px}
.empty-state p{margin:10px auto;max-width:410px;line-height:1.6}
.match-icon{display:grid;place-items:center;margin:auto;background:#e9f3de;width:64px;height:64px;border-radius:20px;font-size:38px;color:#4d7550}
footer{
    text-align:center;
    padding:20px 18px calc(24px + env(safe-area-inset-bottom));
    font-size:11px;
    color:var(--muted)
}

/* Recherche de matchs — v0.2 */
[hidden]{display:none!important}
.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
button:disabled,input:disabled,select:disabled{opacity:.55;cursor:wait}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:16px}
.section-title h2{margin:0}
.section-title .eyebrow{margin-bottom:9px}
.icon-button{
    width:44px;
    height:44px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#f3f7ef;
    color:var(--ink);
    font-size:27px
}


.search-field{
    position:relative;
    display:flex;
    align-items:center;
    border-bottom: 1px solid #dedede;
}
.search-field > span{
    position:absolute;
    left:14px;
    font-size:27px;
    pointer-events:none;
    margin-top: -3px;
}
.search-field input{
    padding-left:43px;
    padding-right:45px;
    border: 0;
    background: #fff;
    /*height: 40px;*/
}
.search-field input::-webkit-search-cancel-button{display:none}

.clear-button{
    position:absolute;
    right:0;
    top:0;
    width:38px;
    background:transparent;
    border:0;
    font-size:24px;
    color:var(--muted)
}
.filter-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.filter-row>div{min-width:0}
.filter-row label{font-size:12px;margin-top:18px}

select{
    width:100%;
    min-width:0;
    font:inherit;
    font-size:14px;
    padding:11px 26px 11px 10px;
    border:1px solid var(--line);
    border-radius:9px;
    color:var(--ink);
    background:#fff
}
select:focus-visible{
    outline:2px solid #548a62;
    outline-offset:2px
}
.load-status{
    font-size:12px;
    color:var(--muted);
    margin:17px 0 0
}

.search-card {
	position: sticky;
	top: env(safe-area-inset-top);;
	z-index: 50;
	padding-top: 20px;
	background: #fff;
    
}
.search-card .error{
    margin-top:15px
}
.session-link{
    display:inline-block;
    margin-top:12px
}
.results-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:5px 10px 14px;
    gap:12px
}
.results-heading h2{
    font-size:17px;
    margin:0
}
.results-heading span{
    font-size:12px;
    color:var(--muted)
}


.games-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
    padding: 0 10px;
}

.game-card {
	display: block;

	width: 100%;
	min-width: 0;

	padding: 13px 14px 14px;

	border: 1px solid #e4e7ec;
	border-radius: 16px;

	background: #fff;
	color: #101828;

	text-align: left;

	box-shadow: none;
}

.game-meta {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;

	margin: 0 0 3px;

	font-size: .72rem;
}

.game-meta-main {
	min-width: 0;
}

.game-date {
	display: block;

	font-weight: 800;
	color: #101828;
}

.game-serie {
	display: block;

	margin-top: 2px;

	font-size: .68rem;
	font-weight: 500;

	color: #667085;
}

.game-status {
	flex: 0 0 auto;

	padding: 3px 10px;

	border-radius: 999px;

	font-size: .65rem;
	font-weight: 750;

	white-space: nowrap;
}

.game-teams {
	display: grid;
	gap: 7px;

	margin-top: 11px;
}

.game-team-row {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr) auto;
	align-items: center;
	gap: 9px;
}

.game-team-logo {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 28px;
	height: 28px;

	border: 1px solid #d0d5dd;
	border-radius: 9px;

	background: #fff;

	font-size: .62rem;
	font-weight: 800;

	color: #101828;

	overflow: hidden;
}

.game-team-logo img {
	width: 100%;
	height: 100%;
	padding: 3px;

	object-fit: contain;
}

.game-team-name {
	min-width: 0;

	font-size: .82rem;
	font-weight: 500;

	color: #344054;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.game-team-score {
	min-width: 18px;

	text-align: right;

	font-size: .88rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;

	color: #344054;
}

.score-badge {
	display: inline-flex;
	align-items: center;

	padding: 4px 8px;

	border-radius: 999px;

	background: #f2f4f7;
	color: #667085;

	font-size: .65rem;
	font-weight: 750;
}


.team-label{
    display:block;
    font-size:10px;text-transform:uppercase;
    letter-spacing:1px;
    color:var(--muted);
    margin-bottom:10px
}

.score-caption{
    text-align:center;
    font-size:11px;
    color:var(--muted);
    margin:10px 0 28px
}
.match-facts{
    border-top:1px solid var(--line);
    padding-top:10px
}
.fact{
    display:grid;
    grid-template-columns:110px 1fr;
    gap:12px;
    font-size:14px;
    padding:9px 0
}
.fact dt{
    color:var(--muted)}
.fact dd{
    margin:0;
    font-weight:600;
    overflow-wrap:anywhere
}
.detail-notice{
    margin-top:23px;font-size:12px
}


/* =========================================================
   COMPOSITIONS
========================================================= */
.composition-tabs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)) 80px;

	gap: 4px;

	margin: 0;
	padding: 4px;

	background: #fff;
}

.composition-tab {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 6px;

	min-width: 0;
	min-height: 32px;

	padding: 6px 10px;

	border: 0;
	border-radius: 999px;

	background: #ebebeb;
	color: #667085;

	font: inherit;
	font-size: .78rem;
	font-weight: 600;

	white-space: nowrap;
	overflow: hidden;

	box-shadow: none;
}

.composition-tab.active {
	background: #111;
	color: #fff;
	box-shadow: none;
}

.composition-tab-team {
	display: block;

	min-width: 0;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.composition-tab-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 22px;
	height: 22px;
	padding: 0 6px;

	border-radius: 999px;

	background: #c5c5c5;
	color: #fff;
}

.composition-tab.active .composition-tab-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 22px;
	height: 22px;
	padding: 0 6px;

	border-radius: 999px;

	background: #505050;
	color: #fff;
}

.composition-tab-final {
	white-space: nowrap;
}


/* =========================================================
   PANELS
========================================================= */


.composition-list {
	display: grid;
	gap: 8px;

	padding: 2px 10px 20px;

	background: transparent;
	overflow: visible;
    
    border-bottom: 1px solid #dedede;
    margin-bottom: 20px;
}

.composition-list.composition-list-official {
    border: 0;
    padding-bottom: 0;
}


.composition-player {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr) auto 40px;
	align-items: center;
	gap: 10px;

	min-height: 62px;

	padding: 8px 10px 8px 10px;

	border: 1px solid #e8eaed;
	border-radius: 15px;

	background: #fff;
}

.composition-player-number {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 44px;
	height: 44px;

	border-radius: 12px;

	background: #eef6fc;
	color: var(--ink);

	font-size: 1rem;
	font-weight: 850;
	font-variant-numeric: tabular-nums;
}

.composition-player-identity {
	display: flex;
	flex-direction: column;
	justify-content: center;

	min-width: 0;
}

.composition-player-firstname,
.composition-player-lastname {
	display: block;

	color: #1d2939;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.composition-player-firstname {
	font-size: .82rem;
	font-weight: 500;
	line-height: 1.15;
}

.composition-player-lastname {
	margin-top: 2px;

	font-size: .92rem;
	font-weight: 800;
	line-height: 1.15;
}

.composition-player-badges {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 5px;

	white-space: nowrap;
}
.composition-player-badge {
    background: #000;
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: grid;
    text-align: center;
    align-content: center;
    font-size: .68rem;
}
.composition-player-age {
	color: #000000;
	font-size: .72rem;
	font-weight: 700;
	white-space: nowrap;
    text-align: right;
}







/* =========================================================
   EMPTY / ERROR
========================================================= */

.composition-empty {
	margin: 0;

	padding: 28px 18px;

	border: 1px dashed #d0d5dd;
	border-radius: 16px;

	background: #fafafa;

	text-align: center;

	font-size: .9rem;
	color: #667085;
}

.composition-error {
	margin: 10px 0;

	padding: 11px 13px;

	border: 1px solid #fecdca;
	border-radius: 12px;

	background: #fef3f2;

	font-size: .85rem;
	font-weight: 600;

	color: #b42318;
}





.composition-player-identity {
	display: flex;
	flex-direction: column;
	justify-content: center;

	min-width: 0;
}




/* =========================================================
   OFFICIELS
========================================================= */

.composition-official {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr) 40px;
	align-items: center;
	gap: 10px;
}

.composition-official-role {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 28px;

	padding: 4px 8px;

	border-radius: 9px;

	background: #f2f4f7;

	font-size: .69rem;
	font-weight: 800;

	color: #475467;
}

.composition-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;

	min-height: 36px;
	margin: 4px 2px 10px;
}

.composition-toolbar-status {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.composition-fetch-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;

	font-size: .76rem;
	font-weight: 600;

	color: #667085;
}

.composition-spinner {
	display: inline-block;

	width: 14px;
	height: 14px;

	border: 2px solid #d0d5dd;
	border-top-color: #3e50b4;
	border-radius: 50%;

	animation: composition-spin .7s linear infinite;
}

@keyframes composition-spin {
	to {
		transform: rotate(360deg);
	}
}

.composition-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;

	min-height: 110px;

	font-size: .85rem;
	font-weight: 600;

	color: #667085;
}

.composition-sheet-state {
	display: inline-flex;
	align-items: center;

	padding: 5px 9px;

	border-radius: 999px;

	font-size: .7rem;
	font-weight: 800;
}

.composition-sheet-state.is-pending {
	background: #fff7ed;
	color: #c2410c;
}

.composition-sheet-state.is-valid {
	background: #ecfdf3;
	color: #027a48;
}

.composition-sheet-state.is-closed {
	background: #eef2ff;
	color: #3e50b4;
}

.composition-refresh {
	display: inline-flex;
	align-items: center;
	gap: 5px;

	border: 0;
	border-radius: 10px;

	padding: 7px 10px;

	background: #eef2ff;

	font: inherit;
	font-size: .76rem;
	font-weight: 800;

	color: #3e50b4;

	cursor: pointer;
}

.composition-refresh:disabled {
	opacity: .45;
	cursor: default;
}

.composition-final-pending {
	padding: 30px 18px;

	border: 1px dashed #d0d5dd;
	border-radius: 16px;

	text-align: center;

	font-size: .85rem;
	color: #667085;
}

.composition-refresh-fab {
	position: fixed;

	right: calc(50% - 24px);
	top: calc(env(safe-area-inset-bottom) + 40px);

	z-index: 50;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 48px;
	height: 48px;

	padding: 0;

	border: 0;
	border-radius: 50%;

	background: #6a89cc;
	color: #fff;

	box-shadow:
		0 5px 14px rgba(16, 24, 40, .18),
		0 2px 5px rgba(16, 24, 40, .12);

	font: inherit;
	font-size: 1.55rem;
	font-weight: 500;

	cursor: pointer;

	-webkit-tap-highlight-color: transparent;
}

.composition-refresh-fab:hover {
	transform: translateY(-1px);
}

.composition-refresh-fab:active {
	transform: scale(.95);
}

.composition-refresh-fab:disabled {
	cursor: default;
}

.composition-refresh-fab[hidden] {
	display: none;
}

.composition-refresh-icon {
	display: block;
	line-height: 1;
}

.composition-refresh-fab.is-loading
.composition-refresh-icon {
	animation: composition-refresh-spin .7s linear infinite;
}

@keyframes composition-refresh-spin {
	to {
		transform: rotate(360deg);
	}
}

.final-sheet-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;

	min-height: 150px;

	padding: 24px 18px;

	border: 1px dashed #d0d5dd;
	border-radius: 16px;

	text-align: center;
}

.final-sheet-empty-title {
	font-size: .9rem;
	color: #344054;
}

.final-sheet-empty-text {
	max-width: 320px;

	font-size: .78rem;
	line-height: 1.4;

	color: #98a2b3;
}


.final-sheet {
	overflow: hidden;

	border-radius: 16px;

	background: #fff;
}

.final-sheet-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;

	padding: 13px 14px;

	border-bottom: 1px solid #edf0f3;
}

.final-sheet-title {
	font-size: .88rem;
	color: #1d2939;
}

.final-sheet-date {
	font-size: .72rem;
	color: #98a2b3;
}

.final-sheet-content {
	padding: 16px 14px;
}

.final-sheet-message {
	margin: 0;

	font-size: .85rem;
	color: #667085;
}



.final-penalties {
	margin-top: 14px;

	text-align: center;

	font-size: .76rem;
	font-weight: 700;

	color: #667085;
}

.final-date {
	margin-top: 14px;

	text-align: center;

	font-size: .72rem;

	color: #98a2b3;
}


.final-warning-card {
	margin-bottom: 10px;
	padding: 12px 14px;

	border-radius: 14px;

	background: #fff7ed;

	font-size: .8rem;

	color: #c2410c;
}

.detail-score {
	min-width: 64px;

	font-size: 2rem;
	font-weight: 850;
	line-height: 1;

	letter-spacing: -1px;

	color: #fff;
}

.final-section {
	margin-bottom: 10px;

	overflow: hidden;

	border: 1px solid #e4e7ec;
	border-radius: 15px;

	background: #fff;
}

.final-section-title {
	margin: 0;

	padding: 10px 13px;

	border-bottom: 1px solid #edf0f3;

	background: #f9fafb;

	font-size: .72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .035em;

	color: #667085;
}

.final-section-body {
	padding: 12px 13px;
}

.final-section-text {
	margin: 0;

	font-size: .82rem;
	line-height: 1.45;

	color: #344054;
}

.final-section-text + .final-section-text {
	margin-top: 5px;
}

.final-section.is-warning {
	border-color: #fed7aa;
}

.final-section.is-warning
.final-section-title {
	background: #fff7ed;
	color: #c2410c;
}


/* =========================================================
   SIGNATURES
========================================================= */

.final-signatures-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.final-signature-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;

	min-height: 76px;

	padding: 10px 6px;

	border-right: 1px solid #edf0f3;
}

.final-signature-item:last-child {
	border-right: 0;
}

.final-signature-label {
	font-size: .72rem;
	font-weight: 700;

	color: #667085;
}

.final-signature-check {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 28px;
	height: 28px;

	border-radius: 50%;

	font-size: .82rem;
	font-weight: 900;
}

.final-signature-check.is-ok {
	background: #ecfdf3;
	color: #027a48;
}

.final-signature-check.is-missing {
	background: #f2f4f7;
	color: #98a2b3;
}


/* =========================================================
   FOOTER
========================================================= */

.final-sheet-footer {
	padding: 13px 4px 5px;

	text-align: center;

	font-size: .72rem;

	color: #98a2b3;
}


.player-event {
	display: inline-flex;
	align-items: center;
	gap: 4px;

	min-height: 27px;

	padding: 0 6px;

	border-radius: 8px;

	background: #f2f4f7;

	font-size: .68rem;
	font-weight: 800;

	color: #475467;

	white-space: nowrap;
}

.player-event-goal {
	background: #ecfdf3;
	color: #027a48;
}

.player-event-injury {
	background: #fff1f3;
	color: #c01048;
}

.player-event-card {
	padding-inline: 6px;
}

.player-card {
	display: block;

	width: 10px;
	height: 14px;

	border-radius: 2px;
}

.player-card.is-yellow {
	background: #fdb022;
}

.player-card.is-red {
	background: #d92d20;
}

.player-event-minute {
	font-size: .66rem;
}


#detail-screen {
	height: calc(
		100svh
		- env(safe-area-inset-top)
		- env(safe-area-inset-bottom)
        - 10px
	);
    
	display: flex;
	flex-direction: column;

	min-height: 0;
	overflow: hidden;
}
.composition-slider {
	position: relative;
	width: 100%;

	flex: 1 1 0;
	min-height: 0;

	overflow: hidden;
	touch-action: pan-y;   
}

.composition-track {
	display: flex;

	width: 100%;
	height: 100%;

	transform: translate3d(0, 0, 0);
	transition: transform .28s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;    
}

.composition-track.is-dragging {
	transition: none;
}
.composition-panel {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;

	overflow-y: auto;
	overflow-x: hidden;    
}


body.is-match-detail .app-header {
	display: none;
}

body.is-match-detail main {
	padding-top: env(safe-area-inset-top);
}

body.is-match-detail #detail-screen {
	height: calc(
		100svh
		- env(safe-area-inset-top)
		- env(safe-area-inset-bottom)
	);
}



.match-detail {
	flex: 0 0 auto;
	padding: 12px 12px 16px;

	/*border-radius: 24px;*/

	background: var(--ink);
	color: #fff;
}

/* série + référence + état */

.detail-kicker {
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
	align-items: center;
	justify-content: space-between;
	gap: 10px;

	margin-bottom: 12px;
}

.detail-meta {
	display: flex;
	align-items: center;
	gap: 6px;

	min-width: 0;
}

.detail-kicker .eyebrow {
	margin: 0;

	font-size: .66rem;
	font-weight: 650;
	letter-spacing: .02em;

	color: rgba(255,255,255,.80);
}

.match-reference {
	font-size: .61rem;
	color: rgba(255,255,255,.48);
}

.match-reference::before {
	content: "·";
	margin-right: 6px;
}

.match-state-badge,
.match-state-badge.is-pending,
.match-state-badge.is-valid,
.match-state-badge.is-closed {
	flex-shrink: 0;

	padding: 5px 9px;

	border-radius: 999px;

	background: rgba(255,255,255,.14);
	color: #fff;

	font-size: .62rem;
	font-weight: 750;
    
    text-align: center;
}


/* HOME / SCORE / AWAY */

.match-teams {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		88px
		minmax(0, 1fr);

	align-items: center;
	gap: 8px;

	padding: 4px 0 0;

	text-align: center;
}

.detail-team {
	min-width: 0;
}

.detail-team img {
	width: 54px;
	height: 54px;

	padding: 5px;

	border-radius: 14px;

	background: #fff;
	object-fit: contain;

	mix-blend-mode: normal;
}

.detail-team strong {
	display: block;

	font-size: .78rem;
	font-weight: 750;
	line-height: 1.15;

	color: #fff;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


/* centre */

.match-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	min-width: 0;
}

.detail-score {
	font-size: 2rem;
	font-weight: 900;
	line-height: 1;

	letter-spacing: -1px;
	color: #fff;
}

.detail-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;

	margin: 7px 0 0;

	line-height: 1.15;
	color: rgba(255,255,255,.72);
}

.detail-date-short {
	font-size: .61rem;
	font-weight: 500;
}

.detail-date-time {
	font-size: .68rem;
	font-weight: 750;
	color: #fff;
}

body:has(#detail-screen:not([hidden])) .app-header {
	display: none;
}

body:has(#detail-screen:not([hidden])) main {
	padding-top: env(safe-area-inset-top);
}

.final-action-empty {
	display: flex;
	align-items: center;

	min-height: 46px;

	padding: 10px 14px;

	color: #8a8175;

	font-size: .78rem;
}
/* =========================================================
   RÉSUMÉ
========================================================= */

#composition-panel-final {
	padding: 4px 10px 18px;
}


/* ---------- sections ---------- */

.final-summary-card {
	margin: 0 0 14px;

	border: 0;
	border-radius: 0;

	background: transparent;

	overflow: visible;
}

.final-summary-title {
	display: flex;
	align-items: center;
	gap: 7px;

	/*min-height: 30px;*/

	margin: 0;
	padding: 0 0 5px 15px;

	border: 0;

	background: transparent;

	font-size: .78rem;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;

	color: #344054;
}

.final-summary-body {
	min-height: 0;
	padding: 0;

	border: 1px solid #e4e7ec;
	border-radius: 16px;

	background: #fff;

	overflow: hidden;
}


/* ---------- cartes / blessures ---------- */

.final-actions-list {
	min-height: 0;
}

.final-action-row {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;

	min-height: 58px;

	padding: 9px 12px;

	border-bottom: 1px solid #edf0f3;
}

.final-action-row:last-child {
	border-bottom: 0;
}

.final-action-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 26px;
	height: 32px;
}

.final-action-info {
	min-width: 0;
    
}

.final-action-player {
	font-size: .8rem;
	font-weight: 800;

	color: #101828;
   display: inline-flex;
}
.final-action-player-num {
    display: inline-flex;
    color: #7a7a7a;
    font-size: 12px;
    margin-left: 10px;
}

.final-action-team {
	display: block;
	margin-top: 2px;

	font-size: .69rem;
	font-weight: 500;
	text-transform: none;

	color: #667085;
}

.final-action-minute {
	font-size: .74rem;
	font-weight: 700;

	color: #475467;

	white-space: nowrap;
}


/* ---------- vide ---------- */

.final-sheet-empty {
	display: flex;
	align-items: center;
	gap: 9px;

	min-height: 46px;

	padding: 10px 14px;

	border: 1px solid #e4e7ec;
	border-radius: 16px;

	background: #fff;

	font-size: .78rem;
	color: #8a8175;

	text-align: left;
}
.final-summary-empty {
    font-size: .78rem;
	color: #8a8175;
}



/* ---------- match arrêté / rapport ---------- */

.final-status-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;

	margin: 0 0 14px;
}

.final-status-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 7px;

	min-height: 76px;

	padding: 11px 14px;

	border: 1px solid #e4e7ec;
	border-radius: 16px;

	background: #fff;
}

.final-status-label {
	font-size: .76rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;

	color: #344054;
}

.final-status-value {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 53px;
	height: 23px;

	padding: 0 10px;

	border-radius: 999px;

	font-size: .7rem;
	font-weight: 800;
}

.final-status-value.is-no {
	background: #d1f0cd;
	color: #087c24;
}

.final-status-value.is-yes,
.final-status-value.is-alert {
	background: #fee4e2;
	color: #b42318;
}

.final-status-dot {
	display: none;
}


/* ---------- commentaire ---------- */

.final-summary-line {
	padding: 13px 14px;

	font-size: .78rem;
	line-height: 1.4;

	color: #667085;
}


/* ---------- signatures ---------- */

.final-signatures-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));

	border: 1px solid #e4e7ec;
	border-radius: 16px;

	background: #fff;

	overflow: hidden;
}

.final-signature-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 9px;

	min-height: 86px;

	padding: 10px 6px;

	border-right: 1px solid #e4e7ec;
}

.final-signature-item:last-child {
	border-right: 0;
}

.final-signature-label {
	font-size: .74rem;
	font-weight: 500;

	color: #344054;
}

.final-signature-check {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 34px;
	height: 34px;

	border-radius: 50%;

	font-size: 1rem;
	font-weight: 800;
}

.final-signature-check.is-ok {
	background: #cdecc9;
	color: #078324;
}

.final-signature-check.is-missing {
	background: #f2f4f7;
	color: #98a2b3;
}


/* ---------- footer ---------- */

.final-sheet-footer {
	padding: 2px 4px 8px;

	text-align: center;

	font-size: .68rem;
	color: #98a2b3;
}

.final-summary-card > .final-actions-list,
.final-summary-card > .final-summary-body {
	border: 1px solid #e4e7ec;
	border-radius: 16px;

	background: #fff;

	overflow: hidden;
}

.final-summary-card > .final-actions-list:empty,
.final-summary-card > .final-summary-body:empty {
	min-height: 46px;
}
.final-actions-list .final-action-row {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;

	min-height: 58px;
	padding: 9px 12px;

	border-bottom: 1px solid #edf0f3;
}

.final-actions-list .final-action-row:last-child {
	border-bottom: 0;
}
.final-summary-body {
	padding: 12px 14px;
}

.final-summary-line {
	margin: 0;

	font-size: .78rem;
	line-height: 1.4;

	color: #667085;
}

.final-action-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 26px;
	height: 32px;
}

/* jaune */
.final-action-icon.is-yellow-card::before {
	content: "";

	width: 15px;
	height: 24px;

	border-radius: 4px;

	background: #fdb022;

	box-shadow:
		0 0 0 3px #fff,
		0 0 0 5px #fef0c7;
}

/* rouge */
.final-action-icon.is-red-card::before {
	content: "";

	width: 15px;
	height: 24px;

	border-radius: 4px;

	background: #f04438;
	box-shadow:
		0 0 0 3px #fff,
		0 0 0 5px #fee4e2;
}
.final-action-row {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
}


/* =========================================================
   HOME
========================================================= */

body:not(.is-match-detail) {
	background: #f5f7fa;
}


/* ---------- HEADER ---------- */

body:not(.is-match-detail) .app-header {
	background: #fff;
	box-shadow: none;
}

body:not(.is-match-detail) .app-header::before {
	background: #fff;
}

body:not(.is-match-detail) .brand {
	color: #101828;
}

body:not(.is-match-detail) .brand img {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

body:not(.is-match-detail) .brand small {
	margin-top: 1px;

	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .03em;

	color: #667085;
}

/* la version, on ne la veut plus visuellement */
body:not(.is-match-detail) .version {
	display: none;
}


/* ---------- CONTENU HOME ---------- */




/* ---------- TABS HOME ---------- */

.home-tabs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px;

	margin-bottom: 4px;
	padding: 4px 4px 10px;

	background: #fff;
}

.home-tab {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;

	min-height: 34px;

	padding: 8px 12px;

	border: 0;
	border-radius: 12px;

	background: transparent;

	font: inherit;
	font-size: .82rem;
	font-weight: 700;

	color: #667085;
    
    transition:
		background .18s ease,
		color .18s ease;
}

.home-tab.active {
	background: #101828;
	color: #fff;
}

.home-tab-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 22px;
	height: 22px;

	padding: 0 6px;

	border-radius: 999px;

	background: #f2f4f7;
	color: #344054;

	font-size: .68rem;
	font-weight: 800;
}

.home-tab.active .home-tab-count {
	background: rgba(255,255,255,.18);
	color: #fff;
}

.home-tab-count:empty {
	display: none;
}


/* ---------- PANELS ---------- */

.home-panel {
	min-width: 0;
}

.home-panel[hidden] {
	display: none !important;
}


/* ---------- LISTES ---------- */

.home-games-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;    
}


.game-status.is-visited {
	background: #f2f4f7;
	color: #667085;
}


.home-slider {
	width: 100%;
	min-height: calc(100dvh - 190px);
	overflow: hidden;
	touch-action: pan-y;
}

.home-track {
	display: flex;
	width: 100%;
	align-items: flex-start;

	transform: translate3d(0, 0, 0);

	transition:
		transform .28s cubic-bezier(.22, .75, .2, 1);

	will-change: transform;
}

.home-panel {
	flex: 0 0 100%;
	width: 100%;
	min-width: 0;
}


.game-card-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.game-status.is-visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 24px;
	height: 24px;

	border-radius: 50%;

	background: #f2f4f7;
	color: #667085;

	font-size: .78rem;
	font-weight: 800;
}

.game-favorite {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 30px;
	height: 30px;

	padding: 0;
	border: 0;
	border-radius: 50%;

	background: transparent;
	color: #98a2b3;

	font: inherit;
	font-size: 1.35rem;
	line-height: 1;

	cursor: pointer;
    
	-webkit-tap-highlight-color: transparent;
}

.game-favorite.is-active {
	color: #f5a623;
}

.game-favorite:active {
	transform: scale(.88);
}

.detail-favorite {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 34px;
	height: 34px;

	margin: 0 auto 4px;

	padding: 0;
	border: 0;
	border-radius: 50%;

	background: transparent;
	color: #98a2b3;

	font: inherit;
	font-size: 1.55rem;
	line-height: 1;

	cursor: pointer;

	-webkit-tap-highlight-color: transparent;
}

.detail-favorite.is-active {
	color: #f5a623;
}

.detail-favorite:active {
	transform: scale(.88);
}