/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.6;
    color: #1f2937;
    overflow-x: hidden;
}

/* Sportif & Dynamique */
:root {
    --primary_old: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
	--primary: linear-gradient(135deg, #37556c 0%, #81d0d7 100%); 
    --secondary: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --accent: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --dark: #0f172a;
    --light: #f8fafc;
    --shadow: 0 20px 40px rgba(0,0,0,0.1);
    --shadow-hover: 0 30px 60px rgba(0,0,0,0.15);
	--blur: #10BBBB;
	--blurpct: 0.3;
    --anatomik01: #37556c;
    --anatomik02: #81d0d7;
    --anatomik03: #ffffff;
    --anatomik04: #111111;
	--anatomik05: #92F7FC;
}

.btn-primary {
    background: var(--primary);
    border: none;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    display: inline-block;
	min-width: 300px; 
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

/* Navbar moderne */
.navbar {
    --background: rgba(255,255,255,0.95) !important;
    background: var(--anatomik02) !important;
    backdrop-filter: blur(20px);
    padding: 1rem 0;
    transition: all 0.3s ease;
}

.navbar.scrolled {
    padding: 0.5rem 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.navbar-brand {
--    font-size: 1.8rem;
--    font-weight: 800;
--    background: var(--primary);
--    -webkit-background-clip: text;
--    -webkit-text-fill-color: transparent;
--    background-clip: text;
    background-image: url(../images/AnatomikCenterLogoLong.png);
    width: 500px;
    height: 100px;
    display: block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    text-decoration: none;
}


@media (max-width: 768px) {
    /* ne change pas flex-direction ici */
    .navbar-brand {
		background-image: url(../images/AnatomikCenterLogoHaut.png);
		width: 200px;
		height: 70px;
		display: block;
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		text-decoration: none;
	}
}

/* Hero sections dynamiques */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--dark) 0%, #1e3a8a 50%, var(--light) 100%);
    position: relative;
    overflow: hidden;
}


.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
--  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 200'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='50%25' x2='100%25' y2='50%25'%3E%3Cstop offset='0%25' stop-color='%2337556C' stop-opacity='0' /%3E%3Cstop offset='50%25' stop-color='%2381D0D7' stop-opacity='0.8' /%3E%3Cstop offset='100%25' stop-color='%2337556C' stop-opacity='0' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='-500' y='0' width='2000' height='200' fill='url(%23g)'%3E%3Canimate attributeName='x' values='-500;0;-500' dur='4s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/svg%3E") no-repeat center/cover;

--    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 200'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='50%25' x2='100%25' y2='50%25'%3E%3Cstop offset='0%25' stop-color='%2337556C' stop-opacity='0' /%3E%3Cstop offset='50%25' stop-color='%2337556C' stop-opacity='0.8' /%3E%3Cstop offset='100%25' stop-color='%2337556C' stop-opacity='0' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='-500' y='0' width='2000' height='200' fill='url(%23g)'%3E%3Canimate attributeName='x' values='-500;0;-500' dur='4s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/svg%3E") no-repeat center/cover;
 

   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 200'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='50%25' x2='100%25' y2='50%25'%3E%3Cstop offset='0%25' stop-color='%2337556C' stop-opacity='1' /%3E%3Cstop offset='50%25' stop-color='%2337556C' stop-opacity='1' /%3E%3Cstop offset='100%25' stop-color='%2337556C' stop-opacity='1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' width='2000' height='200' fill='url(%23g)'%3E%3Canimate attributeName='x' values='-500;0;-500' dur='4s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/svg%3E") no-repeat center/cover;

 --  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 200'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='50%25' x2='100%25' y2='50%25'%3E%3Cstop offset='0%25' stop-color='%2337556C' stop-opacity='1' /%3E%3Cstop offset='50%25' stop-color='%2337556C' stop-opacity='1' /%3E%3Cstop offset='100%25' stop-color='%2337556C' stop-opacity='1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='-500' y='0' width='2000' height='200' fill='url(%23g)'%3E%3Canimate attributeName='x' values='-500;0;-500' dur='4s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/svg%3E") no-repeat center/cover;
	
--   animation: float 10s ease-in-out ; 
    animation: float 7s ease-in-out ; 
	
--    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" stop-color="%23ffffff" stop-opacity="1"/><stop offset="100%" stop-opacity="0"/></radialGradient></defs><circle cx="300" cy="300" r="200" fill="url(%23a)"><animate attributeName="r" values="200;250;200" dur="3s" repeatCount="indefinite"/></circle><circle cx="700" cy="700" r="150" fill="url(%23a)"><animate attributeName="r" values="150;200;150" dur="4s" repeatCount="indefinite"/></circle></svg>') no-repeat center/cover;
	
--    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" stop-color=var(--blur) stop-opacity="0.3")/><stop offset="100%" stop-opacity="0"/></radialGradient></defs><circle cx="300" cy="300" r="200" fill="url(%23a)"><animate attributeName="r" values="200;250;200" dur="3s" repeatCount="indefinite"/></circle><circle cx="700" cy="700" r="150" fill="url(%23a)"><animate attributeName="r" values="150;200;150" dur="4s" repeatCount="indefinite"/></circle></svg>') no-repeat center/cover;
--    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" stop-color"%2310BBBB") stop-opacity="0.3"/)/><stop offset="100%" stop-opacity="0"/></radialGradient></defs><circle cx="300" cy="300" r="200" fill="url(%23a)"><animate attributeName="r" values="200;250;200" dur="3s" repeatCount="indefinite"/></circle><circle cx="700" cy="700" r="150" fill="url(%23a)"><animate attributeName="r" values="150;200;150" dur="4s" repeatCount="indefinite"/></circle></svg>') no-repeat center/cover;


--    animation: float 20s ease-in-out infinite; 
}

.hero::after {
     content: '';
    position: absolute;
	top: 0;
--    left: 80em;
    right: 20em;
    bottom: 0;
	background: url("../images/logo-cercle.webp") no-repeat center/contain;
	opacity: 0;
	animation: showLogo 2s ease-in-out forwards;
	animation-delay: 2s; /* même durée que 'float' */
--	animation: showLogo 0.5s ease-in-out forwards;
--	animation-delay: 10s; /* même durée que 'float' */
	width:	20em;
}

@media (max-width: 1000px) { 
	.hero::after {
		content: '';
		position: absolute;
		top: -23em; 
		--left: 18em;
		right: 1em;
		bottom: 0;
		background: url(../images/logo-cercle.webp) no-repeat center / contain;
		opacity: 0;
		animation: showLogo 2s ease-in-out forwards;
		animation-delay: 2s;
		width: 5em;
	}
}

@keyframes showLogo {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero h1 {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 900; 
--    background: linear-gradient(135deg, var(--anatomik01) 0%, #e0f2fe 100%);
    background: linear-gradient(135deg, var(--anatomik05) 0%, var(--anatomik02) 100%); 

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.5rem;
    animation: slideInUp 1s ease-out;
}

@media (max-width: 768px) {
	.hero h1 { 
		font-size: clamp(3rem, 8vw, 6rem);
		font-weight: 900; 
	--    background: linear-gradient(135deg, var(--anatomik01) 0%, #e0f2fe 100%);
		background: linear-gradient(135deg, var(--anatomik05) 0%, var(--anatomik02) 100%); 

		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		margin-bottom: 1.5rem;
		animation: slideInUp 1s ease-out;
	}
}


@keyframes slideInUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Cards sportives */
.card-sport {
    border: none;
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    height: 100%;
}

.card-sport:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: var(--shadow-hover);
}

.card-sport .card-body {
    padding: 2.5rem;
}

/* Sections */
.section {
    padding: 8rem 0;
}

.section-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    text-align: center;
    margin-bottom: 4rem;
    background: var(--anatomik01);

--    background: var(--primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Parallax */
.parallax {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

/* Footer */
.footer {
    background: var(--dark);
    color: #cbd5e1;
    padding: 4rem 0 2rem;
}

/* Animations scroll */
.fade-in {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
    .hero { min-height: 90vh; }
    .section { padding: 4rem 0; }
    .social{flex: 0 0 auto;width: 40%;}
    .coordinates{flex: 0 0 auto;width: 60%;}
}

.social{
  flex: 0 0 auto;
  width: 40%;
}
.coordinates{
  flex: 0 0 auto;
  width: 60%;
}



.text-anatomik01 {
    --bs-text-opacity: 1;
    --color: rgba(var(--anatomik05), var(--bs-text-opacity)) !important; 
	color: var(--anatomik03); 
}

img.toplogo {
    width:400px;
}

.vignette img.card-img-top {
    width: 49.4%; 
}

.cabinet-photos {
    display: flex;
    gap: 1rem;
}
.cabinet-photos img {
    width: 50%;
    height: auto;
}

@media (max-width: 768px) {
    /* ne change pas flex-direction ici */
    .cabinet-photos {
        flex-direction: row;
    }
}


.kine-photos {
    display: flex;
    gap: 1rem;
}
.kine-photos img {
    width: 13.25%;
    height: auto;
}

@media (max-width: 768px) {
    /* ne change pas flex-direction ici */
    .kine-photos {
        flex-direction: row;
    }
}

li.nav-item {
    font-size: 1.3em;
}

.evidence {
	color: var(--anatomik02); 
}

.img-clickable {
  cursor: pointer;
}