/* Modernized stagiaires.css */
/* ── Reset & base ── */
*,*::before,*::after{box-sizing:border-box}
.stag-main{max-width:1200px;margin:auto;padding:2.5rem 1.5rem 4rem}
.stag-desc{font: size 17px; line-height: 1.7; color:#ececec; max-width:650px; margin: 0 auto 2rem; text-align:center}
/* Grid */
.stag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:28px}
/* Card */
.stag-card{
background:#fff;border-radius:22px;border:1px solid rgba(0,0,0,.06);
overflow:hidden;display:flex;flex-direction:column;position:relative;
transition:.35s ease;box-shadow:0 8px 25px rgba(0,0,0,.05);animation:fadeUp .45s both}
.stag-card:before{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(255,255,255,.35),transparent);
opacity:0;transition:.35s;pointer-events:none}
.stag-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 45px rgba(0,0,0,.12)}
.stag-card:hover:before{opacity:1}
.card-top{
height:115px;
background:linear-gradient(135deg,var(--accent-bg),color-mix(in srgb,var(--accent-bar) 22%,white));
display:flex;justify-content:center;align-items:center;position:relative}
.card-avatar{
width:72px;height:72px;border-radius:50%;
background:var(--accent-bar);color:#fff;
font-size:24px;font-weight:700;
display:flex;align-items:center;justify-content:center;
border:5px solid #fff;
box-shadow:0 10px 25px rgba(0,0,0,.18);
transition:.35s}
.stag-card:hover .card-avatar{transform:scale(1.08) rotate(4deg)}
.card-accent-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--accent-bar)}
.card-body{padding:22px;flex:1}
.card-name{font-size:19px;font-weight:700;color:#202124;margin-bottom:4px}
.card-role{font-size:14px;color:#6f7278;margin-bottom:18px}
.card-role:after{content:"";display:block;width:45px;height:3px;border-radius:10px;background:var(--accent-bar);margin-top:10px;opacity:.4}
.card-quote{
font-size:14px;line-height:1.8;color:#555;
padding-left:18px;position:relative;
display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.card-quote:before{content:"❝";position:absolute;left:0;top:-6px;font-size:28px;color:var(--accent-bar);opacity:.35}
.card-tag{display:inline-flex;margin-top:16px;padding:6px 14px;border-radius:30px;font-size:12px;font-weight:700}
.card-footer{
padding:16px 22px;border:none;border-top:1px solid #f2f2f2;
display:flex;justify-content:space-between;align-items:center;
background:#fafafa;font-weight:600;color:#666;cursor:pointer;transition:.3s}
.card-arrow{transition:.3s}
.stag-card:hover .card-footer{color:var(--accent-bar);background:#fff}
.stag-card:hover .card-arrow{transform:translateX(8px)}
/* Profile */
.profil-wrap{max-width:820px;margin:auto}
.profil-header,.profil-section{
background:#fff;border-radius:22px;border:1px solid rgba(0,0,0,.06);
box-shadow:0 8px 25px rgba(0,0,0,.04)}
.profil-band{height:95px;background:linear-gradient(135deg,var(--accent-bg),#fff);position:relative}
.profil-band:after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--accent-bar)}
.profil-header-body{display:flex;gap:20px;padding:0 28px 28px;align-items:flex-end;margin-top:-35px}
.profil-avatar{width:78px;height:78px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;font-weight:700;border:5px solid #fff}
.profil-info{padding-top:38px}
.profil-name{font-size:28px;font-weight:700}
.profil-section{padding:24px;margin-top:18px}
.skill-pill{padding:8px 16px;border-radius:30px;background:#f4f6f8;font-weight:600}
@keyframes fadeUp{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@media(max-width:768px){
.stag-grid{grid-template-columns:1fr}
.profil-header-body{flex-direction:column;align-items:flex-start}
}

/* Modal avis stagiaires */
.avis-modal{
	display: none;
	position: fixed;
	inset: 0;
	align-items: center;
	justify-content: center;
	z-index: 2200;
}
.avis-modal::before{
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.45);
}
.avis-modal.show{ display: flex; }
.avis-modal .avis-modal-content{
	position: relative;
	z-index: 1;
	background: #ffffff;
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(2,8,23,0.3);
	max-width: 820px;
	width: calc(100% - 40px);
	padding: 20px 22px;
}
.avis-close{
	position: absolute;
	right: 12px;
	top: 12px;
	background: transparent;
	border: none;
	font-size: 20px;
	cursor: pointer;
	color: #444;
}
.avis-header{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding-top:8px }
.avis-avatar{ width:84px; height:84px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:22px; color:#fff; background:#222 }
.avis-infos{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:12px }
.avis-infos > div{ display:flex; align-items:center; gap:8px; color:#555 }
.avis-quote{ margin-top:16px; background:#f8f9fb; border-radius:10px; padding:14px; color:#333 }

@media (max-width: 640px) {
	.avis-modal .avis-modal-content{ width: calc(100% - 24px); padding: 14px; }
	.avis-avatar{ width:64px; height:64px; font-size:18px }
	.avis-infos{ gap:8px }
}