/* babysitter-individuelle.css */
header, footer
{
background: var(--bleu-leger);	
}

.profile-page
{
max-width: 1100px;
margin: 0 auto;
padding: 16px;
color: var(--bleu);
}

/* HERO */
.profile-hero
{
display: flex;
flex-direction: column;
gap: 16px;
background: var(--bleu-leger);
border-radius: var(--radius);
padding: 16px;
border: 1px solid var(--border);
}

.profile-hero-image img
{
display: block;
width: 100%;
height: 400px;
object-fit: cover;
object-position: center;
border-radius: var(--radius);
}

.profile-heading h1
{
margin: 0;
font-size: 1.5rem;
line-height: 1.2;
padding-bottom: 12px;
}

/* TRUST BADGES */
.trust-badges
{
display: flex;
flex-wrap: wrap;
gap: 8px;
padding-bottom: 12px;
}

.trust-badge
{
background: #fff;
border: 1px solid var(--border);
padding: 6px 10px;
border-radius: 999px;
font-size: 0.8rem;
}

/* QUICK INFOS */
.profile-quickinfos
{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding-bottom: 12px;
}

.quickinfo-card
{
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 10px;
text-align: center;
}

.quickinfo-label
{
display: block;
font-size: 0.75rem;
color: var(--gris-fonce);
}

.quickinfo-card strong
{
font-size: 0.9rem;
}

/* CTA HERO */
.profile-cta
{
display: flex;
flex-direction: column;
gap: 10px;
padding-bottom: 12px;
max-width: 300px;
margin: 0 auto;
}

.profile-main-button
{
background: var(--vert);
color: #fff;
text-align: center;
padding: 12px 16px;
border-radius: 999px;
text-decoration: none;
font-weight: 700;
width: 100%;
box-sizing: border-box;
}

.profile-secondary-button
{
background: #fff;
color: var(--bleu);
text-align: center;
padding: 12px 16px;
border-radius: 999px;
border: 1px solid var(--border);
text-decoration: none;
font-weight: 600;
width: 100%;
box-sizing: border-box;
}

.profile-agency-note
{
font-size: 0.85rem;
color: var(--gris-fonce);
margin: 0;
}

/* SECTIONS */
.profile-section
{
margin-top: 24px;
}

.profile-section h2
{
font-size: 1.2rem;
margin-bottom: 12px;
}

/* TEXTES */
.profile-text
{
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px;
}

.profile-text p
{
margin: 0 0 10px;
line-height: 1.55;
}

/* AGENCE REASSURANCE */
.agency-section
{
margin-top: 28px;
background: var(--vert-leger-2);
padding: 16px;
border-radius: var(--radius);
border: 1px solid var(--border);
}

.agency-grid
{
display: flex;
flex-direction: column;
gap: 12px;
}

.agency-card
{
background: #fff;
border-radius: var(--radius);
padding: 12px;
border: 1px solid var(--border);
}

/* PLANNING */
.babysitter-planning
{
margin-top: 16px;
overflow-x: auto;
}

.planning-grid
{
width: 100%;
font-size: 12px;
color: var(--bleu);
}

.planning-row
{
display: grid;
grid-template-columns: 56px repeat(7, 1fr);
align-items: center;
}

.planning-row span
{
text-align: center;
}

.time-slot
{
text-align: left;
}

.slot
{
width: 25px;
height: 25px;
margin: 2px auto;
border-radius: 4px;
background: #d9dee8;
}

.slot.on
{
background: var(--vert);
}

/* SECURITE */
.security-grid
{
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}

.security-card
{
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 10px;
}

/* CTA FINAL */
.final-cta
{
margin-top: 28px;
padding: 16px;
background: var(--bleu-leger);
border-radius: var(--radius);
text-align: center;
border: 1px solid var(--border);
}

.final-cta-button
{
display: block;
margin-top: 12px;
background: var(--bleu);
color: #fff;
padding: 12px;
border-radius: 999px;
text-decoration: none;
font-weight: 700;
}

.final-secondary-button
{
display: block;
margin-top: 10px;
background: #fff;
border: 1px solid var(--border);
padding: 12px;
border-radius: 999px;
text-decoration: none;
color: var(--bleu);
}

/* STICKY MOBILE CTA */
.mobile-contact-bar
{
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-top: 1px solid var(--border);
padding: 10px;
text-align: center;
z-index: 999;
}

.mobile-contact-button
{
display: block;
background: var(--vert);
color: #fff;
padding: 12px;
border-radius: 999px;
text-decoration: none;
font-weight: 700;
}

#map
{
width: 100%;
height: 280px;
border-radius: var(--radius);
border: 1px solid var(--border);
overflow: hidden;
margin-top: 10px;
}

/* LANGUES → DRAPEAUX */
.languages-flags
{
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
width: 100%;
height: 100%;
}

.language-flag
{
display: block;
width: 22px;
height: 16px;
object-fit: cover;
border-radius: 3px;
border: 1px solid rgba(0,0,0,0.08);
transition: transform 0.15s ease;
}

.language-flag:hover
{
transform: scale(1.2);
}

/* DESKTOP */
@media (min-width: 1024px)
{
.profile-hero
	{
	flex-direction: row;
	gap: 24px;
	}

.profile-hero-image
	{
	flex: 0 0 320px;
	}

.profile-quickinfos
	{
	grid-template-columns: repeat(5, 1fr);
	}

.agency-grid, .activities-grid
	{
	flex-direction: row;
	}

.agency-card, .activity-card
	{
	flex: 1;
	}

.security-grid
	{
	grid-template-columns: repeat(2, 1fr);
	}

.mobile-contact-bar
	{
	display: none;
	}

#map
	{
	height: 360px;
	}

.language-flag
	{
	width: 24px;
	height: 18px;
	}

.planning-grid
	{
	min-width: 420px;
	}

.planning-row
	{
	grid-template-columns: 70px repeat(7, 1fr);
	}

.slot
	{
	width: 50%;
	height: 26px;
	margin: 4px auto;
	}
}