:root
{
	--pink:#ec2778;
	--ink:#141216;
	--cream:#fffaf2;
	--paper:#fff;
--line:#eadfd6}

*
{
box-sizing:border-box}

body
{
	margin:0;
	background:var(--cream);
	color:var(--ink);
font:16px/1.5 Arial,sans-serif}

a
{
color:inherit}



.top {
    display:flex;
    align-items:center;
    gap:40px;
    padding:20px;
    flex-wrap:wrap; /* indispensable pour le responsive */
}


.logo {
    width:170px;
}

.ruban {
    background:#111;
    color:white;
    padding:15px 45px;
    border-radius:5px;
    font-size:24px;
    font-weight:bold;
}


.reseaux h2
{
	font-size:35px;
    text-align:center
}

.cartes
{
	display:flex;
	justify-content:center;
	gap:30px;
}





.carte
{
	background:white;
	padding:20px;
	border-radius:20px;
	display:flex;
	align-items:center;
	gap:20px;
	text-decoration:none;
	color:#111;
	box-shadow:0 5px 20px #0002;
}

.carte img
{
	width:70px;
}

.instagram b
{
	color:#d92b8b;
}

.facebook b
{
	color:#1877f2;
}




/******** FOOTER ********/


footer {
margin-top:70px;
background:#050505;
color:white;
padding:35px;
border-radius:50% 50% 0 0;
text-align:center
}


.wrap
{
	width:min(1100px,calc(100% - 32px));
margin:auto}

.site-head
{
padding:26px 0 14px}

.nav
{
	display:flex;
	align-items:center;
	justify-content:space-between;
gap:20px}

.brand
{
	font-size:27px;
	font-weight:900;
	text-decoration:none;
letter-spacing:-1px}

.brand i
{
	color:var(--pink);
font-style:normal}

.nav-links
{
	display:flex;
	gap:20px;
font-weight:700}

.nav-links a
{
text-decoration:none}

.hero
{
	text-align:center;
padding:28px 0 38px}

.tag
{
	display:inline-block;
	background:#151317;
	color:#fff;
	padding:9px 17px;
	border-radius:6px;
	font-size:13px;
	font-weight:bold;
letter-spacing:.08em}

.hero h1
{
	font-size:clamp(38px,6vw,64px);
	line-height:1.03;
	letter-spacing:-.06em;
margin:21px 0 12px}

.hero h1 em
{
	color:var(--pink);
font-style:normal}

.lead
{
	max-width:600px;
	margin:auto;
color:#625a59}

.show-card
{
	display:grid;
	grid-template-columns:minmax(250px,.9fr) 1.1fr;
	gap:50px;
	background:#fff;
	border-radius:28px;
	padding:35px;
	box-shadow:0 16px 45px #30131b12;
margin:14px auto 70px}

.poster-block
{
	background:#fff7ec;
	border-radius:18px;
padding:18px}

.label
{
	display:inline-block;
	margin:0 0 16px;
	padding:10px 16px;
	background:var(--pink);
	color:white;
	border-radius:8px;
	font-weight:900;
font-size:14px}

.poster
{
	width:100%;
	aspect-ratio:3/4;
	object-fit:cover;
	display:block;
	border-radius:12px;
	box-shadow:0 6px 16px #0002;
background:#f3e9df}

.show-info
{
align-self:center}

.show-info h2
{
	font-size:clamp(28px,4vw,45px);
	line-height:1.05;
margin:0 0 20px}

.detail
{
	display:flex;
	gap:14px;
	margin:18px 0;
	font-size:20px;
font-weight:700}

.detail b
{
font-size:28px}

.time
{
	display:inline-block;
	background:#111;
	color:#fff;

	border-radius:8px;

	padding:8px 16px;
	margin-top:10px;

	font-size:20px;
	font-weight:900;
	letter-spacing:.05em;
}

.button
{
	display:inline-block;
	background:var(--pink);
	color:white;
	border:0;
	border-radius:30px;
	padding:15px 23px;
	text-decoration:none;
	font-weight:900;
	cursor:pointer;
font-size:16px}

.button:hover
{
	filter:brightness(.94);
transform:translateY(-1px)}

.button.alt
{
background:#19171a}

.social
{
	padding-bottom:65px;
text-align:center}

.social h2
{
font-size:30px}

.social-grid
{
	display:flex;
	justify-content:center;
	gap:16px;
flex-wrap:wrap}

.social-card
{
	display:flex;
	text-align:left;
	align-items:center;
	gap:12px;
	background:#fff;
	border-radius:16px;
	padding:16px 20px;
	text-decoration:none;
	box-shadow:0 6px 18px #0000000b;
min-width:230px}

.social-card strong
{
display:block}

.bubble
{
	width:42px;
	height:42px;
	display:grid;
	place-items:center;
	border-radius:50%;
	background:#f9d7e5;
	color:var(--pink);
font-size:22px}

.empty
{
	background:#fff;
	border-radius:22px;
	padding:45px;
	text-align:center;
margin:10px auto 70px}

.site-foot
{
	background:#151317;
	color:#fff;
	text-align:center;
	padding:28px;
margin-top:20px}

.admin-body
{
background:#f7f4f0}

.admin-head
{
	background:#19171a;
	color:#fff;
padding:16px 0}

.admin-head a
{
color:#fff}

.admin-main
{
padding:32px 0 60px}

.panel
{
	background:#fff;
	border-radius:16px;
	padding:24px;
	margin:18px 0;
box-shadow:0 4px 18px #0000000c}

.flash
{
	background:#e7f7ed;
	border-left:4px solid #269756;
	padding:12px;
margin:12px 0}

.danger
{
	background:#fff0f2;
border-left-color:#d53053}

.grid
{
	display:grid;
	grid-template-columns:repeat(2,1fr);
gap:16px}

.full
{
grid-column:1/-1}

label
{
	display:block;
	font-weight:bold;
	font-size:14px;
margin-bottom:5px}

input,textarea,select
{
	width:100%;
	border:1px solid #d9d1cb;
	border-radius:8px;
	padding:11px;
	font:inherit;
background:#fff}

textarea
{
min-height:100px}

.check
{
	display:flex;
	gap:8px;
align-items:center}

.check input
{
width:auto}

.cards
{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:18px}

.admin-card
{
	background:#fff;
	border:1px solid var(--line);
	border-radius:14px;
overflow:hidden}

.admin-card img
{
	width:100%;
	height:200px;
	object-fit:cover;
background:#f4ede7}

.admin-card div
{
padding:16px}


.admin-table{
    width:100%;
    border-collapse:collapse;
    margin-top:20px;
}

.admin-table th,
.admin-table td{
    padding:10px 12px;
    border-bottom:1px solid var(--line);
    text-align:left;
}

.admin-table th{
    background:#f8f8f8;
}

.badge{
    display:inline-block;
    padding:4px 10px;
    border-radius:30px;
    font-size:12px;
    font-weight:bold;
}

.badge-green{
    background:#dcfce7;
    color:#15803d;
}

.badge-yellow{
    background:#fef3c7;
    color:#92400e;
}

.badge-red{
    background:#fee2e2;
    color:#991b1b;
}

.badge-gray{
    background:#e2e8f0;
    color:#475569;
}

.small
{
	color:#716a66;
font-size:14px}

.actions
{
	display:flex;
	gap:8px;
	flex-wrap:wrap;
margin-top:14px}

.muted
{
color:#756d68}

.ticket
{
	max-width:650px;
	margin:35px auto;
	border:2px dashed var(--pink);
	background:#fff;
	padding:30px;
	border-radius:20px;
text-align:center}

.code
{
	font:700 25px monospace;
letter-spacing:2px}

.table
{
	width:100%;
border-collapse:collapse}

.table th,.table td
{
	text-align:left;
	padding:11px;
border-bottom:1px solid var(--line)}



.checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
    cursor: pointer;
    font-weight: normal;
}

.checkbox-row input {
    width: auto;
    margin: 0;
    flex-shrink: 0;
}

.checkbox-row span {
    font-size: 14px;
    line-height: 1.3;
}

.stats-bar{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:15px;
margin:25px 0;
}


.stat-box span{
font-size:30px;
font-weight:900;
display:block;
color:var(--pink);
}

.stat-box{
    background:white;
    border:1px solid var(--line);
    border-radius:12px;
    padding:18px;
}

.stat-box label{
    display:block;
    color:#666;
    margin-bottom:8px;
}

.stat-box span{
    font-size:28px;
    font-weight:900;
    color:var(--pink);
}

.panel canvas{
max-height:350px;
}


.brand-column{
    display:flex;
    flex-direction:column;
    align-items:center;
    flex-shrink:0;
}

.header-menu{
    margin-top:10px;
}

.header-menu a{
    display:inline-block;
    text-decoration:none;
    font-weight:bold;
    color:#444;
    padding:7px 18px;
    border-radius:20px;
    transition:.2s;
}

.header-menu a:hover{
    background:var(--pink);
    color:white;
}

.show-type{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:18px;

    font-size:13px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;

    color:#666;

    border-bottom:2px solid var(--pink);
    padding-bottom:4px;
}

.troupe-image {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:300px;
}

.troupe-image img {
    width:100%;
    max-width:650px;
    height:auto;
    object-fit:contain;
    display:block;
}


.duration{
    opacity:.75;
    font-size:.92rem;
    margin-left:.4rem;
}



.badge{
    display:inline-block;
    padding:5px 10px;
    border-radius:20px;
    font-size:13px;
    font-weight:bold;
}


.badge-green{
    background:#dcfce7;
    color:#15803d;
}


.badge-yellow{
    background:#fef3c7;
    color:#b45309;
}


.badge-red{
    background:#fee2e2;
    color:#991b1b;
}



.filter-box{
    margin-bottom:20px;
}


.filter-box select{
    max-width:350px;
}


.table td{
    vertical-align:middle;
}


/* ===========================================================
   Pages Billetterie (annulation / contrôle)
   =========================================================== */

.page-center{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:25px;
}

.page-card{
    width:min(430px,100%);
    background:#fff;
    border-radius:22px;
    padding:35px;
    text-align:center;
    box-shadow:0 10px 35px rgba(0,0,0,.12);
}

.page-card.glass{
    background:rgba(0,0,0,.35);
    color:white;
    backdrop-filter:blur(10px);
}

.page-logo{
    width:120px;
    margin-bottom:20px;
}

.page-icon{
    font-size:60px;
    margin-bottom:10px;
}

.page-card h1{
    margin:0 0 18px;
}

.card-details{
    background:#f8f2ec;
    border-radius:12px;
    padding:15px;
    margin:20px 0;
    text-align:left;
}

.page-card.glass .card-details{
    background:rgba(255,255,255,.15);
}

.card-details p{
    margin:6px 0;
}

.warning-box{
    background:#fff1f2;
    border-left:4px solid var(--pink);
    padding:12px;
    text-align:left;
    margin:20px 0;
}

.page-btn{
    display:block;
    width:100%;
    padding:14px;
    border-radius:30px;
    text-decoration:none;
    font-weight:bold;
    margin-top:15px;
}

.page-btn-pink{
    background:var(--pink);
    color:white;
}

.page-btn-dark{
    background:#19171a;
    color:white;
}

.page-btn-green{
    background:#4ade80;
    color:#052e16;
}

.login-box{
    margin-top:20px;
    padding-top:15px;
    border-top:1px solid rgba(255,255,255,.25);
    font-size:13px;
}

.login-box input[type=password]{
    width:65%;
}

.error-text{
    color:#fca5a5;
}

.panel h1{
    margin-top:0;
    margin-bottom:30px;
}

.panel h2{
    margin-top:35px;
    margin-bottom:10px;
    color:var(--pink);
    font-size:22px;
}

.panel ul{
    padding-left:22px;
    margin:12px 0 20px;
}

.panel li{
    margin:6px 0;
}

.panel p{
    color:#4f4947;
}


@media(max-width:720px)
{
	.show-card
	{
		grid-template-columns:1fr;
		gap:22px;
	padding:20px}

	.grid
	{
	grid-template-columns:1fr}

	.full
	{
	grid-column:auto}



    .nav-links {
        flex-direction:column;
        align-items:center;
        gap:8px;
    }

	.show-info h2
	{
	font-size:34px}

	.table
	{
	font-size:13px}

	.table th:nth-child(3),.table td:nth-child(3)
	{
	display:none}

    .cartes {
    flex-direction:column;
    margin:20px;
}



    .top {
        gap:20px;
        justify-content:center; /* ok sur mobile */
    }

.nav{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}

.brand-column{
    display:flex;
    flex-direction:column;
    align-items:center;
    flex-shrink:0;
}

.logo{
    width:95px;
}

.header-menu{
    margin-top:6px;
}

.header-menu a{
    display:block;
    font-size:13px;
    padding:5px 12px;
    text-align:center;
}

.ruban{
    flex:1;
    width:auto;
    font-size:15px;
    padding:12px 15px;
    text-align:center;
    line-height:1.25;
}


}