Symfony Profiler

{% extends 'backfront.html.twig' %}
{% block title %}SIP Academy - Formation en Développement Web et Certifications IT{% endblock %}
{% block body %}
<style>
/* ===== BASE ===== */
a { pointer-events: auto !important; z-index: 9999 !important; }
@media (max-width:768px) {
.about-lectures { width:100%; }
.about-lectures img { width:100%; height:auto; }
.g-recaptcha { transform:scale(0.77); transform-origin:0 0; }
}
/* checkout legacy */
.checkout-area{padding-top:100px;padding-bottom:70px;background-color:#f7f7f7}
.checkout-area .your-order{background:#fff;padding:30px;border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,.1)}
.checkout-area .your-order h3{font-size:24px;margin-bottom:20px;text-transform:uppercase;color:#333}
.checkout-area .your-order table{width:100%;border-collapse:collapse}
.checkout-area .your-order table th{font-weight:600;text-align:left;padding:10px 0;color:#333;border-bottom:1px solid #f2f2f2}
.checkout-area .your-order table td{font-weight:400;text-align:left;padding:10px 0;color:#666;border-bottom:1px solid #f2f2f2}
.checkout-area .your-order table tfoot .order-total th{font-weight:600;padding-top:20px;text-align:right;color:#333}
.checkout-area .your-order table tfoot .cart-subtotal th{border-top:2px solid #f2f2f2;font-weight:400;padding-top:10px;text-align:right;color:#666}
.checkout-area .your-order table a{color:#333;text-decoration:none}
.checkout-area .your-order table a:hover{color:#000;text-decoration:underline}
@media(max-width:767px){
.checkout-area .your-order table td:first-child,.checkout-area .your-order table th:first-child{display:none}
.checkout-area .your-order table td:nth-child(2),.checkout-area .your-order table th:nth-child(2){font-weight:600}
}
/* ===== DESIGN TOKENS PREMIUM ===== */
:root {
--gold: #FFAE27;
--gold-dark: #e09500;
--gold-light: #fff8e6;
--gold-mid: #ffd07a;
--navy: #1e3a8a;
--navy-dark: #152d6e;
--navy-light: #e8edf8;
--navy-mid: #2d52b0;
--text-dark: #0f1f3d;
--text-body: #374151;
--text-muted: #6b7280;
--border-light: #edf0f7;
--surface-white: #ffffff;
--surface-gray: #f6f8fc;
--surface-navy-pale: #f0f4ff;
--r-sm: 10px;
--r-md: 16px;
--r-lg: 24px;
--r-xl: 32px;
--sh-xs: 0 1px 4px rgba(30,58,138,.06);
--sh-sm: 0 4px 16px rgba(30,58,138,.08);
--sh-md: 0 8px 32px rgba(30,58,138,.12);
--sh-lg: 0 20px 60px rgba(30,58,138,.18);
--sh-xl: 0 30px 80px rgba(30,58,138,.25);
}
/* ===== SHARED SECTION HEADER ===== */
.sip-section { padding: 88px 0; }
.sip-section-alt { background: var(--surface-gray); }
.sip-section-navy { background: var(--navy); }
.sip-title-wrap { margin-bottom: 52px; text-align: center; }
.sip-title-wrap.left { text-align: left; }
.sip-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
background: var(--gold-light); color: var(--gold-dark);
font-size: 11px; font-weight: 800; letter-spacing: 2px;
text-transform: uppercase; padding: 5px 16px 5px 10px;
border-radius: 30px; margin-bottom: 14px;
border-left: 3px solid var(--gold);
}
.sip-eyebrow-navy {
background: rgba(255,174,39,.12); color: var(--gold);
border-left-color: var(--gold);
}
.sip-title-wrap h2 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 36px; font-weight: 800; color: var(--text-dark);
margin: 0 0 14px; line-height: 1.18; letter-spacing: -0.5px;
}
.sip-title-wrap.navy h2 { color: #fff; }
.sip-title-wrap p { font-size: 16px; color: var(--text-muted); margin: 0; }
.sip-title-wrap.navy p { color: rgba(255,255,255,.55); }
.sip-rule {
width: 48px; height: 4px; border-radius: 3px;
background: linear-gradient(90deg, var(--gold), var(--gold-mid));
margin: 16px auto 0;
}
.sip-title-wrap.left .sip-rule { margin-left: 0; }
/* ===== SESSIONS — MODERNE & AMÉLIORÉE ===== */
.sessions-section {
padding: 88px 0;
background: linear-gradient(135deg, #f9fafc 0%, #f3f6fb 100%);
}
.s-card {
background: var(--surface-white);
border-radius: var(--r-lg);
border: 1px solid var(--border-light);
box-shadow: 0 2px 8px rgba(30,58,138,.08);
display: flex;
flex-direction: column;
height: 100%;
overflow: visible;
transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease;
position: relative;
}
.s-card:hover {
transform: translateY(-14px);
box-shadow: 0 24px 64px rgba(30,58,138,.2);
border-color: var(--gold);
}
/* Image area — Full height et plus visible */
.s-card-img {
position: relative;
height: 340px;
overflow: hidden;
flex-shrink: 0;
background: linear-gradient(135deg, #f5f8ff 0%, #ffffff 100%);
display: flex;
align-items: center;
justify-content: center;
}
.s-card-img img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
padding: 10px;
box-sizing: border-box;
background: white;
transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.s-card:hover .s-card-img img {
transform: scale(1.05);
}
/* Image gradient overlay subtle */
.s-card-img::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 50%, rgba(15,31,61,.2) 100%);
opacity: 0;
transition: opacity .3s;
}
.s-card:hover .s-card-img::after {
opacity: 1;
}
/* Date badge — en haut à droite visible */
.s-date-box {
position: absolute;
top: 14px;
right: 14px;
z-index: 10;
background: var(--surface-white);
border-radius: 12px;
box-shadow: 0 8px 28px rgba(30,58,138,.3);
width: 74px;
overflow: hidden;
text-align: center;
border: 2.5px solid var(--gold);
transition: all .3s cubic-bezier(.4,0,.2,1);
}
.s-card:hover .s-date-box {
transform: translateY(-4px);
box-shadow: 0 12px 36px rgba(30,58,138,.4);
border-color: var(--gold-dark);
}
.s-date-box-top {
background: linear-gradient(135deg, var(--gold), var(--gold-dark));
padding: 7px 0 6px;
font-size: 10px;
font-weight: 800;
color: #fff;
letter-spacing: 1.3px;
text-transform: uppercase;
}
.s-date-box-num {
padding: 7px 0 9px;
font-size: 26px;
font-weight: 800;
color: var(--navy);
line-height: 1;
background: var(--surface-white);
}
/* Location chip */
.s-location-chip {
position: absolute;
bottom: 14px;
right: 14px;
z-index: 2;
background: rgba(255,255,255,.95);
backdrop-filter: blur(8px);
border-radius: 20px;
padding: 6px 12px;
font-size: 11px;
font-weight: 600;
color: var(--navy);
display: flex;
align-items: center;
gap: 5px;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.s-location-chip i {
color: var(--gold-dark);
font-size: 11px;
flex-shrink: 0;
}
/* Card body — padding normal */
.s-card-body {
padding: 24px;
display: flex;
flex-direction: column;
flex: 1;
}
.s-card-body h3 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 18px;
font-weight: 700;
color: var(--text-dark);
margin: 0 0 12px;
line-height: 1.4;
min-height: auto;
}
.s-card-body h3 a {
color: inherit;
text-decoration: none;
transition: color .2s;
}
.s-card-body h3 a:hover {
color: var(--gold);
}
.s-time-chip {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, var(--gold), var(--gold-mid));
color: var(--navy);
font-size: 12px;
font-weight: 700;
padding: 10px 16px;
border-radius: 30px;
border: none;
margin-bottom: 14px;
align-self: flex-start;
box-shadow: 0 4px 12px rgba(255,174,39,.25);
transition: all .3s cubic-bezier(.4,0,.2,1);
letter-spacing: 0.5px;
}
.s-time-chip:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(255,174,39,.35);
}
.s-time-chip i {
color: var(--navy);
font-size: 13px;
}
.s-desc {
font-size: 14px;
color: var(--text-muted);
line-height: 1.7;
flex: 1;
margin-bottom: 20px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.s-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, var(--navy), var(--navy-dark));
color: #fff;
font-size: 13px;
font-weight: 700;
padding: 12px 24px;
border-radius: 30px;
text-decoration: none;
align-self: flex-start;
margin-top: auto;
transition: all .3s cubic-bezier(.4,0,.2,1);
box-shadow: 0 4px 14px rgba(30,58,138,.25);
border: none;
cursor: pointer;
}
.s-btn:hover {
background: linear-gradient(135deg, var(--navy-dark), var(--navy));
color: #fff;
transform: translateX(4px);
box-shadow: 0 8px 24px rgba(30,58,138,.35);
}
.s-btn-arrow {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--gold);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform .3s;
}
.s-btn:hover .s-btn-arrow {
transform: translateX(3px);
}
.s-btn-arrow i {
font-size: 10px;
color: var(--navy);
}
/* ===== VIDEOS ===== */
.videos-section {
padding: 88px 0;
background: linear-gradient(135deg, var(--navy) 0%, #1a2d7e 50%, var(--navy-dark) 100%);
position: relative;
overflow: hidden;
}
.videos-section::before {
content: '';
position: absolute;
top: -140px;
right: -140px;
width: 480px;
height: 480px;
background: radial-gradient(circle, rgba(255,174,39,.08) 0%, transparent 70%);
border-radius: 50%;
}
.videos-section::after {
content: '';
position: absolute;
bottom: -80px;
left: -80px;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(255,174,39,.06) 0%, transparent 70%);
border-radius: 50%;
}
.v-card {
background: rgba(255,255,255,.08);
border: 1.5px solid rgba(255,255,255,.12);
border-radius: var(--r-lg);
overflow: hidden;
transition: all .3s cubic-bezier(.4,0,.2,1);
position: relative;
}
.v-card:hover {
transform: translateY(-10px);
border-color: var(--gold);
box-shadow: 0 20px 50px rgba(0,0,0,.4);
background: rgba(255,255,255,.1);
}
.v-card video {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
background: #000;
}
.v-card-body {
padding: 18px 20px 22px;
display: flex;
align-items: flex-start;
gap: 14px;
}
.v-play-btn {
width: 42px;
height: 42px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold), var(--gold-dark));
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 6px 16px rgba(255,174,39,.35);
transition: transform .3s;
}
.v-card:hover .v-play-btn {
transform: scale(1.1);
}
.v-play-btn i {
color: #fff;
font-size: 13px;
margin-left: 2px;
}
.v-card-body h4 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14.5px;
font-weight: 700;
color: rgba(255,255,255,.95);
margin: 0;
line-height: 1.4;
}
.v-card-num {
position: absolute;
top: 14px;
right: 14px;
background: rgba(0,0,0,.6);
backdrop-filter: blur(4px);
color: var(--gold);
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 20px;
border: 1px solid rgba(255,174,39,.3);
}
.yt-cta-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--gold);
font-size: 14px;
font-weight: 700;
text-decoration: none;
border: 1.5px solid var(--gold);
padding: 10px 24px;
border-radius: 30px;
margin-top: 20px;
transition: all .3s cubic-bezier(.4,0,.2,1);
background: rgba(255,174,39,.05);
}
.yt-cta-link:hover {
background: var(--gold);
border-color: var(--gold);
color: var(--navy);
transform: translateY(-2px);
}
/* ===== STATISTIQUES — MODERNISÉES ===== */
.fun-factor-area {
padding: 72px 0;
background: linear-gradient(135deg, #f0f5ff 0%, #f9f5ff 100%);
}
.single-fun-factor {
text-align: center;
padding: 40px 30px;
background: var(--surface-white);
border-radius: var(--r-lg);
border: 2px solid transparent;
transition: all .3s cubic-bezier(.4,0,.2,1);
box-shadow: var(--sh-sm);
position: relative;
overflow: hidden;
}
.single-fun-factor::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
opacity: 0;
transition: opacity .3s;
}
.single-fun-factor:hover {
border-color: var(--gold);
box-shadow: var(--sh-lg);
transform: translateY(-8px);
}
.single-fun-factor:hover::before {
opacity: 0.05;
}
.single-fun-factor h2 {
font-size: 48px;
font-weight: 800;
margin: 0 0 8px;
background: linear-gradient(135deg, var(--navy), var(--navy-mid));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
}
.single-fun-factor h2 span {
color: var(--gold);
}
.single-fun-factor h4 {
font-size: 16px;
font-weight: 700;
color: var(--text-dark);
margin: 0;
text-transform: uppercase;
letter-spacing: 1px;
}
/* ===== TESTIMONIALS — REDESIGNED (Cards blanches) ===== */
.testi-section {
padding: 96px 0;
background: linear-gradient(135deg, var(--navy) 0%, #252544 100%);
position: relative;
overflow: hidden;
}
.testi-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.3'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.5;
}
/* Slider */
.testi-outer {
max-width: 1000px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.testi-track {
display: flex;
transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.testi-slide {
min-width: 50%;
padding: 0 16px;
box-sizing: border-box;
}
@media(max-width:768px) {
.testi-slide {
min-width: 100%;
}
}
.testi-card {
background: var(--surface-white);
border: 1px solid var(--border-light);
border-radius: var(--r-lg);
padding: 0;
position: relative;
height: 100%;
transition: all .3s cubic-bezier(.4,0,.2,1);
box-shadow: var(--sh-sm);
overflow: hidden;
display: flex;
flex-direction: column;
}
.testi-card:hover {
border-color: var(--gold);
box-shadow: var(--sh-lg);
transform: translateY(-8px);
}
/* Avatar en haut de la card */
.testi-header {
padding: 24px 24px 0;
display: flex;
align-items: center;
gap: 14px;
border-bottom: 1px solid var(--border-light);
}
.testi-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--gold);
flex-shrink: 0;
}
.testi-meta {
flex: 1;
}
.testi-name {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px;
font-weight: 700;
color: var(--text-dark);
margin: 0 0 2px;
}
.testi-role {
font-size: 12px;
color: var(--gold);
margin: 0;
font-weight: 600;
letter-spacing: .4px;
}
/* Contenu de la card */
.testi-content {
padding: 20px 24px 24px;
display: flex;
flex-direction: column;
flex: 1;
}
.testi-stars {
display: flex;
gap: 4px;
margin-bottom: 12px;
}
.testi-stars i {
color: var(--gold);
font-size: 13px;
}
.testi-text {
font-size: 14px;
color: var(--text-body);
line-height: 1.7;
margin: 0;
flex: 1;
}
.testi-quote-mark {
font-size: 32px;
line-height: 0.8;
color: var(--gold);
font-family: Georgia, serif;
margin: 0 0 8px;
display: block;
opacity: 0.6;
}
/* Controls */
.testi-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-top: 44px;
position: relative;
z-index: 2;
}
.testi-arrow {
width: 48px;
height: 48px;
border-radius: 50%;
border: 1.5px solid var(--border-light);
background: var(--surface-white);
color: var(--navy);
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all .22s cubic-bezier(.4,0,.2,1);
box-shadow: var(--sh-xs);
}
.testi-arrow:hover {
background: var(--gold);
border-color: var(--gold);
color: var(--navy);
transform: scale(1.05);
}
.testi-dots {
display: flex;
gap: 8px;
align-items: center;
}
.testi-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--border-light);
cursor: pointer;
transition: all .25s;
}
.testi-dot.active {
background: var(--gold);
transform: scale(1.4);
}
/* ===== ACTUALITÉS ===== */
.actu-section {
padding: 88px 0;
background: var(--surface-white);
}
.actu-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 40px;
flex-wrap: wrap;
gap: 16px;
}
.actu-arrows {
display: flex;
gap: 10px;
}
.actu-arr {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--surface-gray);
border: 1.5px solid var(--border-light);
color: var(--text-dark);
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all .22s cubic-bezier(.4,0,.2,1);
}
.actu-arr:hover {
background: var(--navy);
border-color: var(--navy);
color: #fff;
transform: translateY(-2px);
}
/* Scroll container */
.actu-rail {
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
cursor: grab;
padding-bottom: 4px;
}
.actu-rail::-webkit-scrollbar {
display: none;
}
.actu-rail:active {
cursor: grabbing;
}
.actu-belt {
display: flex;
gap: 28px;
width: max-content;
}
/* Card — wider, light */
.a-card {
width: 370px;
flex-shrink: 0;
background: var(--surface-white);
border: 1px solid var(--border-light);
border-radius: var(--r-lg);
box-shadow: var(--sh-xs);
overflow: hidden;
display: flex;
flex-direction: column;
transition: all .3s cubic-bezier(.4,0,.2,1);
}
.a-card:hover {
transform: translateY(-8px);
box-shadow: var(--sh-lg);
border-color: var(--gold);
}
/* ===== ACTUALITÉS - IMAGES PERFECT FIT ===== */
.a-card-img {
height: 210px;
overflow: hidden;
position: relative;
flex-shrink: 0;
background: linear-gradient(135deg, #f8faff 0%, #ffffff 100%);
display: flex;
align-items: center;
justify-content: center;
}
.a-card-img a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-decoration: none;
}
.a-card-img img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
object-position: center;
transition: transform .5s cubic-bezier(.4,0,.2,1);
}
/* Garder l'effet zoom au hover */
.a-card:hover .a-card-img img {
transform: scale(1.08);
}
/* Overlay subtil au hover (optionnel) */
.a-card-img::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,174,39,0) 0%, rgba(255,174,39,0.1) 100%);
opacity: 0;
transition: opacity .3s ease;
pointer-events: none;
}
.a-badge {
position: absolute;
top: 14px;
left: 14px;
background: linear-gradient(135deg, var(--gold), var(--gold-dark));
color: var(--navy);
font-size: 10px;
font-weight: 800;
letter-spacing: 1.2px;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 20px;
box-shadow: 0 4px 12px rgba(255,174,39,.3);
}
.a-card-body {
padding: 22px 24px 26px;
display: flex;
flex-direction: column;
flex: 1;
}
.a-meta {
display: flex;
gap: 16px;
font-size: 11.5px;
color: var(--text-muted);
margin-bottom: 12px;
}
.a-meta span {
display: flex;
align-items: center;
gap: 5px;
}
.a-meta i {
color: var(--gold-dark);
}
.a-card-body h3 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 17px;
font-weight: 700;
color: var(--text-dark);
margin: 0 0 12px;
line-height: 1.4;
min-height: 48px;
}
.a-card-body h3 a {
color: inherit;
text-decoration: none;
transition: color .2s;
}
.a-card-body h3 a:hover {
color: var(--gold);
}
.a-excerpt {
font-size: 14px;
color: var(--text-body);
line-height: 1.68;
flex: 1;
margin-bottom: 20px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.a-read {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 700;
color: var(--navy);
text-decoration: none;
margin-top: auto;
align-self: flex-start;
transition: all .2s;
}
.a-read .a-read-icon {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--navy-light);
color: var(--navy);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
transition: all .2s;
}
.a-read:hover {
color: var(--gold-dark);
gap: 12px;
}
.a-read:hover .a-read-icon {
background: var(--gold);
color: var(--navy);
}
/* ===== ABONNEMENTS — MODERNISÉS ===== */
.event-area {
padding: 88px 0;
background: linear-gradient(135deg, #fafbfc 0%, #f5f8ff 100%);
}
.section-title-wrapper {
margin-bottom: 50px;
text-align: center;
}
.section-title {
position: relative;
text-align: center;
}
.section-title h3 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 36px;
font-weight: 800;
color: var(--text-dark);
margin: 0 0 12px 0;
position: relative;
padding-bottom: 20px;
}
.section-title h3::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48px;
height: 4px;
background: linear-gradient(90deg, var(--gold), var(--gold-mid));
border-radius: 2px;
}
.section-title p {
font-size: 15px;
color: var(--text-muted);
margin: 0;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.single-event-item {
background: var(--surface-white);
border: 1px solid var(--border-light);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: 0 2px 10px rgba(30,58,138,.08);
transition: all .3s cubic-bezier(.4,0,.2,1);
display: flex;
flex-direction: column;
height: 100%;
}
.single-event-item:hover {
transform: translateY(-14px);
box-shadow: 0 24px 64px rgba(30,58,138,.2);
border-color: var(--gold);
}
.single-event-image {
position: relative;
height: 280px;
overflow: hidden;
background: linear-gradient(135deg, #f5f8ff 0%, #ffffff 100%);
display: flex;
align-items: center;
justify-content: center;
}
.single-event-image a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: relative;
padding: 10px;
box-sizing: border-box;
}
.single-event-image img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.single-event-item:hover .single-event-image img {
transform: scale(1.05);
}
.single-event-image span {
position: absolute;
top: 12px;
left: 12px;
background: linear-gradient(135deg, var(--gold), var(--gold-dark));
color: var(--navy);
padding: 8px 14px;
border-radius: 6px;
font-weight: 700;
font-size: 9px;
white-space: nowrap;
z-index: 3;
box-shadow: 0 4px 16px rgba(255,174,39,.3);
letter-spacing: 0.8px;
text-transform: uppercase;
transition: all .3s cubic-bezier(.4,0,.2,1);
border: 1px solid rgba(255,255,255,.4);
}
.single-event-item:hover .single-event-image span {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255,174,39,.4);
}
.single-event-text {
padding: 28px;
display: flex;
flex-direction: column;
flex: 1;
}
.single-event-text h3 {
margin: 0 0 14px;
font-size: 24px;
font-weight: 800;
background: linear-gradient(135deg, var(--navy-dark), var(--navy-dark));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-family: 'Plus Jakarta Sans', sans-serif;
}
.single-event-text h3 a {
color: var(--gold);
text-decoration: none;
transition: all .2s;
}
.single-event-text h3 a:hover {
filter: brightness(1.1);
}
.single-item-comment-view {
padding: 16px 18px;
background: linear-gradient(135deg, rgba(255,174,39,.08), rgba(255,174,39,.03));
border-radius: 10px;
border-left: 4px solid var(--gold);
border-top: 1px solid rgba(255,174,39,.2);
margin-bottom: 18px;
font-size: 13px;
color: var(--text-body);
line-height: 1.9;
box-shadow: inset 0 2px 8px rgba(30,58,138,.03);
font-weight: 500;
}
.single-item-comment-view i {
color: var(--gold) !important;
margin-right: 8px;
font-weight: 700;
margin-left: 2px;
}
.single-item-comment-view span {
display: inline-block;
padding: 4px 0;
}
.single-event-text p {
font-size: 13px;
color: var(--text-muted);
margin: 0 0 20px 0;
font-weight: 500;
padding: 8px 12px;
background: var(--surface-gray);
border-radius: 6px;
border-left: 3px solid var(--gold);
}
.single-event-text .button-default {
align-self: flex-start;
margin-top: auto;
padding: 13px 32px;
background: linear-gradient(135deg, var(--navy), var(--navy-dark));
color: #fff;
border-radius: 30px;
text-decoration: none;
font-weight: 700;
font-size: 13px;
transition: all .3s cubic-bezier(.4,0,.2,1);
box-shadow: 0 4px 14px rgba(30,58,138,.25);
border: none;
cursor: pointer;
letter-spacing: 0.5px;
}
.single-event-text .button-default:hover {
background: linear-gradient(135deg, var(--navy-dark), var(--navy));
transform: translateX(5px);
box-shadow: 0 8px 24px rgba(30,58,138,.35);
}
/* ===== BADGE DATE AMÉLIORÉ - COMPLÈTEMENT VISIBLE ===== */
.s-card-img {
position: relative;
height: 340px;
overflow: visible; /* Changé de 'hidden' à 'visible' pour que le badge dépasse */
flex-shrink: 0;
background: linear-gradient(135deg, #f5f8ff 0%, #ffffff 100%);
display: flex;
align-items: center;
justify-content: center;
}
.s-card-img img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
padding: 10px;
box-sizing: border-box;
background: white;
transition: transform .55s cubic-bezier(.4,0,.2,1);
border-radius: var(--r-lg);
}
/* Date badge - ENTIÈREMENT VISIBLE, positionné en bas à gauche de l'image */
.s-date-box {
position: absolute;
bottom: -15px; /* Sort du bas de l'image pour être bien visible */
left: 20px;
z-index: 20;
background: linear-gradient(135deg, var(--gold), var(--gold-dark));
border-radius: 16px;
box-shadow: 0 12px 28px rgba(0,0,0,.25);
width: 80px;
overflow: hidden;
text-align: center;
transition: all .3s cubic-bezier(.4,0,.2,1);
border: 2px solid white;
}
.s-card:hover .s-date-box {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 16px 32px rgba(0,0,0,.3);
}
.s-date-box-top {
background: rgba(0,0,0,0.15);
padding: 6px 0 5px;
font-size: 10px;
font-weight: 800;
color: #fff;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.s-date-box-num {
padding: 6px 0 10px;
font-size: 28px;
font-weight: 800;
color: #fff;
line-height: 1;
background: transparent;
}
/* Location chip - repositionné en bas à droite */
.s-location-chip {
position: absolute;
bottom: -12px; /* Sort légèrement de l'image */
right: 20px;
z-index: 20;
background: rgba(255,255,255,.98);
backdrop-filter: blur(8px);
border-radius: 30px;
padding: 8px 16px;
font-size: 11px;
font-weight: 600;
color: var(--navy);
display: flex;
align-items: center;
gap: 6px;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
box-shadow: 0 8px 20px rgba(0,0,0,.15);
border: 1px solid rgba(255,174,39,.3);
}
.s-location-chip i {
color: var(--gold-dark);
font-size: 11px;
flex-shrink: 0;
}
/* Ajustement du body pour compenser le badge qui dépasse */
.s-card-body {
padding: 32px 24px 24px;
display: flex;
flex-direction: column;
flex: 1;
}
/* ===== SESSIONS — BADGE DATE EN HAUT DE L'IMAGE ===== */
.s-card-img {
position: relative;
height: 340px;
overflow: visible; /* Permet au badge de dépasser */
flex-shrink: 0;
background: linear-gradient(135deg, #f5f8ff 0%, #ffffff 100%);
display: flex;
align-items: center;
justify-content: center;
}
.s-card-img img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
padding: 10px;
box-sizing: border-box;
background: white;
transition: transform .55s cubic-bezier(.4,0,.2,1);
border-radius: var(--r-lg);
}
/* Date badge - POSITIONNÉ EN HAUT DE L'IMAGE (horizontal) */
.s-date-box {
position: absolute;
top: -12px; /* Positionné en haut, dépasse légèrement */
left: 20px;
z-index: 20;
background: linear-gradient(135deg, var(--gold), var(--gold-dark));
border-radius: 40px;
box-shadow: 0 8px 20px rgba(0,0,0,.2);
overflow: hidden;
text-align: center;
transition: all .3s cubic-bezier(.4,0,.2,1);
border: 2px solid white;
display: flex;
flex-direction: row; /* HORIZONTAL */
align-items: center;
padding: 0;
}
.s-card:hover .s-date-box {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(0,0,0,.25);
}
.s-date-box-top {
background: rgba(0,0,0,0.15);
padding: 8px 14px;
font-size: 11px;
font-weight: 800;
color: #fff;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.s-date-box-num {
padding: 8px 16px;
font-size: 20px;
font-weight: 800;
color: #fff;
line-height: 1;
background: transparent;
}
/* Location chip - repositionné en bas à droite (inchangé) */
.s-location-chip {
position: absolute;
bottom: 14px;
right: 14px;
z-index: 20;
background: rgba(255,255,255,.98);
backdrop-filter: blur(8px);
border-radius: 30px;
padding: 8px 16px;
font-size: 11px;
font-weight: 600;
color: var(--navy);
display: flex;
align-items: center;
gap: 6px;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0,0,0,.1);
border: 1px solid rgba(255,174,39,.3);
}
/* 1. Supprimer l'espace en haut et uniformiser l'image */
.s-card-img {
position: relative;
height: 250px; /* Ajustez selon votre besoin */
overflow: hidden;
margin: 0; /* Supprime les marges externes */
padding: 0; /* Supprime les paddings internes */
}
.s-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block; /* Supprime l'espace résiduel sous l'image */
}
/* 2. Aligner Date et Adresse sur la même ligne en bas */
.s-card-bottom-meta {
position: absolute;
bottom: 15px;
left: 15px;
right: 15px;
display: flex;
justify-content: space-between;
align-items: center; /* Force le même niveau vertical pour les deux */
z-index: 5;
}
/* 3. Style compact du Badge Date */
.s-date-box {
width: 50px;
background: white;
border-radius: 6px;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
text-align: center;
line-height: 1;
}
.s-date-box-top {
background: #001f3f; /* Navy */
color: #ffd700; /* Gold */
font-size: 9px;
padding: 3px 0;
font-weight: bold;
border-radius: 6px 6px 0 0;
}
.s-date-box-num {
font-size: 18px;
font-weight: bold;
color: #333;
padding: 4px 0;
}
/* 4. Style du Chip Location (Même hauteur visuelle que la date) */
.s-location-chip {
background: rgba(255, 255, 255, 0.95);
padding: 8px 12px;
border-radius: 30px;
font-size: 11px;
font-weight: 600;
color: #333;
display: flex;
align-items: center;
gap: 6px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
height: fit-content; /* S'adapte pour rester aligné */
}
/* ===== ABONNEMENTS — IMAGE PLUS GRANDE, BADGES SUPPRIMÉS ===== */
.single-event-item {
background: var(--surface-white);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: 0 8px 28px rgba(30,58,138,.12);
transition: all .35s cubic-bezier(.4,0,.2,1);
display: flex;
flex-direction: column;
height: 100%;
position: relative;
}
.single-event-item:hover {
transform: translateY(-12px);
box-shadow: 0 28px 48px rgba(30,58,138,.2);
}
/* IMAGE PLUS GRANDE */
.single-event-image {
position: relative;
height: 300px; /* Augmenté de 240px à 300px */
overflow: hidden;
background: linear-gradient(135deg, #f8faff 0%, #ffffff 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 0px;
}
.single-event-image a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: relative;
}
.single-event-image img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.single-event-item:hover .single-event-image img {
transform: scale(1.05);
}
/* PRIX BADGE UNIQUEMENT (pas d'offre limitée) */
.single-event-image .price-badge {
position: absolute;
top: 16px;
left: 16px;
background: linear-gradient(135deg, var(--gold), var(--gold-dark));
color: var(--navy);
padding: 10px 20px;
border-radius: 40px;
font-weight: 800;
font-size: 16px;
z-index: 3;
box-shadow: 0 6px 16px rgba(255,174,39,.35);
transition: all .3s;
}
.single-event-item:hover .single-event-image .price-badge {
transform: scale(1.05);
}
/* SUPPRESSION du badge offre limitée - commenté/retiré */
.single-event-text {
padding: 24px;
display: flex;
flex-direction: column;
flex: 1;
}
/* Titre */
.single-event-text h3 {
margin: 0 0 8px;
font-size: 22px;
font-weight: 800;
color: var(--text-dark);
font-family: 'Plus Jakarta Sans', sans-serif;
}
/* Prix dans le texte (secondaire) */
.single-event-text .price-text {
font-size: 18px;
font-weight: 700;
color: var(--gold-dark);
margin-bottom: 16px;
display: inline-block;
}
/* Liste des fonctionnalités améliorée */
.features-list {
list-style: none;
padding: 0;
margin: 16px 0 20px;
background: var(--surface-gray);
border-radius: var(--r-md);
padding: 16px 18px;
}
.features-list li {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--text-body);
padding: 8px 0;
border-bottom: 1px solid rgba(0,0,0,.05);
}
.features-list li:last-child {
border-bottom: none;
}
.features-list li i {
color: var(--gold);
width: 18px;
font-size: 12px;
flex-shrink: 0;
}
/* Durée */
.duration-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--navy-light);
padding: 10px 16px;
border-radius: 40px;
margin-bottom: 20px;
width: fit-content;
}
.duration-badge i {
color: var(--gold);
font-size: 13px;
}
.duration-badge span {
font-size: 13px;
font-weight: 600;
color: var(--navy);
}
/* Bouton CTA */
.single-event-text .button-default {
align-self: stretch;
text-align: center;
margin-top: auto;
padding: 14px 24px;
background: linear-gradient(135deg, var(--navy), var(--navy-dark));
color: #fff;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
font-size: 14px;
transition: all .3s cubic-bezier(.4,0,.2,1);
box-shadow: 0 4px 14px rgba(30,58,138,.25);
border: none;
cursor: pointer;
letter-spacing: 0.5px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.single-event-text .button-default:hover {
background: linear-gradient(135deg, var(--navy-dark), var(--navy));
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(30,58,138,.35);
gap: 12px;
}
.single-event-text .button-default i {
font-size: 12px;
transition: transform .2s;
}
.single-event-text .button-default:hover i {
transform: translateX(4px);
}
/* =====================================================
VIDÉOS - SCROLL HORIZONTAL
===================================================== */
.videos-slider-container {
position: relative;
display: flex;
align-items: center;
gap: 15px;
margin-top: 40px;
}
/* Boutons de navigation */
.videos-nav-btn {
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255,255,255,0.15);
backdrop-filter: blur(10px);
border: 1.5px solid rgba(255,174,39,0.5);
color: var(--gold);
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all .3s cubic-bezier(.4,0,.2,1);
flex-shrink: 0;
z-index: 10;
}
.videos-nav-btn:hover {
background: var(--gold);
border-color: var(--gold);
color: var(--navy);
transform: scale(1.1);
}
/* Rail de défilement */
.videos-rail {
flex: 1;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
cursor: grab;
border-radius: var(--r-lg);
}
.videos-rail::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
.videos-rail:active {
cursor: grabbing;
}
/* Belt des vidéos */
.videos-belt {
display: flex;
gap: 24px;
width: max-content;
padding: 15px 5px;
}
/* Carte vidéo individuelle */
.videos-card {
width: 300px;
flex-shrink: 0;
background: rgba(255,255,255,.08);
border: 1.5px solid rgba(255,255,255,.12);
border-radius: var(--r-lg);
overflow: hidden;
transition: all .3s cubic-bezier(.4,0,.2,1);
position: relative;
}
.videos-card:hover {
transform: translateY(-10px);
border-color: var(--gold);
box-shadow: 0 20px 50px rgba(0,0,0,.4);
background: rgba(255,255,255,.1);
}
.videos-card video {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
background: #000;
}
.videos-card-body {
padding: 18px 20px 22px;
display: flex;
align-items: flex-start;
gap: 14px;
}
.videos-play-btn {
width: 42px;
height: 42px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold), var(--gold-dark));
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 6px 16px rgba(255,174,39,.35);
transition: transform .3s;
cursor: pointer;
}
.videos-card:hover .videos-play-btn {
transform: scale(1.1);
}
.videos-play-btn i {
color: #fff;
font-size: 13px;
margin-left: 2px;
}
.videos-card-body h4 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14.5px;
font-weight: 700;
color: rgba(255,255,255,.95);
margin: 0;
line-height: 1.4;
}
.videos-card-num {
position: absolute;
top: 14px;
right: 14px;
background: rgba(0,0,0,.6);
backdrop-filter: blur(4px);
color: var(--gold);
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 20px;
border: 1px solid rgba(255,174,39,.3);
z-index: 2;
}
/* Indicateur de défilement */
.videos-scroll-indicator {
margin-top: 30px;
display: flex;
justify-content: center;
}
.videos-scroll-bar {
width: 60px;
height: 3px;
background: rgba(255,255,255,0.2);
border-radius: 3px;
position: relative;
transition: width .3s;
}
/* Responsive */
@media (max-width: 768px) {
.videos-nav-btn {
width: 38px;
height: 38px;
font-size: 16px;
}
.videos-card {
width: 260px;
}
.videos-card video {
height: 150px;
}
.videos-card-body h4 {
font-size: 12px;
}
.videos-slider-container {
gap: 8px;
}
}
@media (max-width: 576px) {
.videos-card {
width: 240px;
}
.videos-nav-btn {
width: 32px;
height: 32px;
font-size: 14px;
}
}
/* =====================================================
SESSIONS - BOUTONS DE SCROLL (sans modifier le design)
===================================================== */
/* =====================================================
SESSIONS - CORRECTION CARTES BLANCHES
===================================================== */
/* Correction : ajouter le fond blanc et les styles de la carte */
.sessions-card {
width: 350px;
flex-shrink: 0;
background: var(--surface-white); /* Fond blanc */
border: 1px solid var(--border-light); /* Bordure */
border-radius: var(--r-lg); /* Coins arrondis */
overflow: hidden;
transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease;
box-shadow: var(--sh-sm);
}
.sessions-card:hover {
transform: translateY(-8px);
box-shadow: var(--sh-lg);
border-color: var(--gold);
}
/* S'assurer que le contenu de la carte est bien visible */
.sessions-card .s-card-body {
background: var(--surface-white);
}
/* Responsive */
@media (max-width: 992px) {
.sessions-card {
width: 320px;
}
}
@media (max-width: 768px) {
.sessions-card {
width: 280px;
}
}
@media (max-width: 576px) {
.sessions-card {
width: 260px;
}
}
.sessions-slider-container {
position: relative;
display: flex;
align-items: center;
gap: 15px;
margin-top: 40px;
}
/* Boutons de navigation */
.sessions-nav-btn {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--surface-white);
border: 1.5px solid var(--border-light);
color: var(--navy);
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all .3s cubic-bezier(.4,0,.2,1);
flex-shrink: 0;
z-index: 10;
box-shadow: var(--sh-sm);
}
.sessions-nav-btn:hover {
background: var(--gold);
border-color: var(--gold);
color: var(--navy);
transform: scale(1.1);
}
/* Rail de défilement - remplace la row */
.sessions-rail {
flex: 1;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
cursor: grab;
}
.sessions-rail::-webkit-scrollbar {
display: none;
}
.sessions-rail:active {
cursor: grabbing;
}
/* Belt des cartes */
.sessions-belt {
display: flex;
gap: 28px;
width: max-content;
padding: 10px 5px;
}
/* Chaque carte garde sa largeur d'origine */
.sessions-card {
width: 350px;
flex-shrink: 0;
}
/* Responsive */
@media (max-width: 992px) {
.sessions-card {
width: 320px;
}
.sessions-belt {
gap: 20px;
}
}
@media (max-width: 768px) {
.sessions-nav-btn {
width: 38px;
height: 38px;
font-size: 16px;
}
.sessions-slider-container {
gap: 10px;
}
.sessions-card {
width: 280px;
}
}
@media (max-width: 576px) {
.sessions-nav-btn {
width: 34px;
height: 34px;
font-size: 14px;
}
.sessions-card {
width: 260px;
}
.sessions-belt {
gap: 15px;
}
}
/* =====================================================
MESSAGE AUCUNE SESSION
===================================================== */
.no-sessions-message {
text-align: center;
padding: 60px 40px;
background: var(--surface-white);
border-radius: var(--r-lg);
border: 1px solid var(--border-light);
box-shadow: var(--sh-sm);
max-width: 600px;
margin: 0 auto;
}
.no-sessions-icon {
font-size: 64px;
color: var(--gold);
margin-bottom: 20px;
}
.no-sessions-message h3 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 24px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 12px;
}
.no-sessions-message p {
font-size: 15px;
color: var(--text-muted);
margin-bottom: 25px;
line-height: 1.6;
}
.no-sessions-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, var(--navy), var(--navy-dark));
color: #fff;
font-size: 14px;
font-weight: 600;
padding: 12px 28px;
border-radius: 40px;
text-decoration: none;
transition: all .3s cubic-bezier(.4,0,.2,1);
box-shadow: 0 4px 14px rgba(30,58,138,.25);
}
.no-sessions-btn:hover {
background: linear-gradient(135deg, var(--navy-dark), var(--navy));
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(30,58,138,.35);
gap: 14px;
color: #fff;
}
.no-sessions-btn i {
font-size: 16px;
}
/* Responsive */
@media (max-width: 768px) {
.no-sessions-message {
padding: 40px 25px;
}
.no-sessions-icon {
font-size: 48px;
}
.no-sessions-message h3 {
font-size: 20px;
}
.no-sessions-message p {
font-size: 13px;
}
.no-sessions-btn {
font-size: 13px;
padding: 10px 22px;
}
}
</style>

<div class="slider-area">
<div class="hero-slider owl-carousel">
{% for ban in ban %}
<div class="single-slider" style="background-image:url('{{ asset('uploads/banniere/'~ ban.image) }}')">
<div class="hero-slider-content">
<h1>{{ ban.titre }}</h1>
<p>{{ ban.description }}</p>
<div class="slider-btn" style="-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-delay:1200ms;animation-delay:1200ms;">
<a class="button-default" href="{{ ban.lienboutou }}" target="_blank">Voir plus</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>

<div class="about-area mt-95">
<div class="container">
<div class="row">
<div class="col-lg-7">
<div class="about-container">
<h3>{{ setting.description1 }}</h3>
<p style="text-align:justify">{{ setting.description2 }}</p>
<a class="button-default" href="{{ path('app_about') }}">plus de détails</a>
</div>
</div>
<div class="col-lg-5">
<div class="about-image-area img-full">
<img src="{{ asset('uploads/apropos/' ~ setting.imageapropos) }}" alt="">
</div>
</div>
</div>
</div>
</div>
<!-- =====================================================
SESSIONS — MODERNE & AMÉLIORÉE
===================================================== -->
<!-- =====================================================
SESSIONS — AVEC BOUTONS DE SCROLL
===================================================== -->
<!-- =====================================================
SESSIONS — AVEC BOUTONS DE SCROLL ET MESSAGE SI VIDE
===================================================== -->
<section class="sessions-section">
<div class="container">
<div class="sip-title-wrap">
<h2>Prochaines Sessions</h2>
<p>Rejoignez nos prochaines sessions de formation en présentiel et à distance</p>
<div class="sip-rule"></div>
</div>
{% if evenements is empty %}

<div class="no-sessions-message">
<div class="no-sessions-icon">
<i class="fa fa-calendar-times-o"></i>
</div>
<h3>Aucune session programmée pour le moment</h3>
<p>De nouvelles sessions seront bientôt disponibles. Revenez prochainement ou contactez-nous pour plus d'informations.</p>
</div>
{% else %}

<div class="sessions-slider-container">
<button class="sessions-nav-btn sessions-prev" id="sessionsPrev">
<i class="fa fa-chevron-left"></i>
</button>
<div class="sessions-rail" id="sessionsRail">
<div class="sessions-belt">
{% for evenement in evenements %}
<div class="sessions-card">
<div class="s-card-img" style="position: relative; overflow: hidden; height: 250px;">
<a href="{{ path('app_details_session',{'slug':evenement.slug}) }}">
{% if evenement.image %}
<img src="{{ asset('uploads/evenement/'~ evenement.image) }}" alt="{{ evenement.titre }}" style="width: 100%; height: 100%; object-fit: cover; display: block;">
{% else %}
<img src="{{ asset('assets2/img/placeholder.jpg') }}" alt="Image" style="width: 100%; height: 100%; object-fit: cover; display: block;">
{% endif %}
</a>
</div>
<div class="s-card-body">
<h3><a href="{{ path('app_details_session',{'slug':evenement.slug}) }}">{{ evenement.titre }}</a></h3>
<span class="s-time-chip">
<i class="fa fa-clock-o"></i>
{{ evenement.starttime|date('d/m · H:i') }} → {{ evenement.endtime|date('d/m · H:i') }}
</span>
<div class="s-desc">
{{ evenement.descriptionshort|striptags|slice(0, 200)|raw }}
{% if evenement.descriptionshort|striptags|length > 200 %}...{% endif %}
</div>
<a class="s-btn" href="{{ path('app_details_session',{'slug':evenement.slug}) }}">
Voir les détails
<span class="s-btn-arrow"><i class="fa fa-arrow-right"></i></span>
</a>
</div>
</div>
{% endfor %}
</div>
</div>
<button class="sessions-nav-btn sessions-next" id="sessionsNext">
<i class="fa fa-chevron-right"></i>
</button>
</div>
{% endif %}
</div>
</section>
<!-- =====================================================
VIDÉOS — MODERNE
===================================================== -->
<!-- =====================================================
VIDÉOS — MODERNE AVEC SCROLL HORIZONTAL
===================================================== -->
<section class="videos-section">
<div class="container" style="position:relative;z-index:1">
<div class="sip-title-wrap navy" style="text-align:center">
<h2 style="color:#fff">Dernières Vidéos</h2>
<p style="color:rgba(255,255,255,.5)">Découvrez nos contenus pédagogiques en vidéo</p>
<div class="sip-rule" style="margin:16px auto 0"></div>
<a href="{{ setting.lienyoutube }}" class="yt-cta-link" target="_blank">
<i class="fa fa-youtube-play"></i> Voir toutes les vidéos sur YouTube
</a>
</div>

<div class="videos-slider-container">
<button class="videos-nav-btn videos-prev" id="videosPrev">
<i class="fa fa-chevron-left"></i>
</button>
<div class="videos-rail" id="videosRail">
<div class="videos-belt">
{% for v in video %}
<div class="videos-card">
<span class="videos-card-num">0{{ loop.index }}</span>
<video controls preload="metadata">
<source src="{{ asset('uploads/video/' ~ v.videov) }}">
</video>
<div class="videos-card-body">
<div class="videos-play-btn">
<i class="fa fa-play"></i>
</div>
<h4>{{ v.titre }}</h4>
</div>
</div>
{% endfor %}
</div>
</div>
<button class="videos-nav-btn videos-next" id="videosNext">
<i class="fa fa-chevron-right"></i>
</button>
</div>

<div class="videos-scroll-indicator">
<div class="videos-scroll-bar"></div>
</div>
</div>
</section>

{# =====================================================
REMPLACER tout le bloc <div class="fun-factor-area">...</div>
par ce code
===================================================== #}
<section class="stats-section">
<div class="container">
<div class="stats-inner">
<div class="stat-card stat-gold" data-bar="85">
<div class="stat-top">
<div class="stat-icon-wrap stat-icon-gold">
<i class="fa fa-users"></i>
</div>
<div class="stat-trend">
<i class="fa fa-arrow-up"></i> Actifs
</div>
</div>
<div class="stat-number">
<span class="stat-count" data-target="{{ setting.membres }}">0</span>
<span class="stat-plus">+</span>
</div>
<div class="stat-label">Membres</div>
<div class="stat-bar-wrap">
<div class="stat-bar stat-bar-gold"></div>
</div>
</div>
<div class="stat-card stat-navy" data-bar="72">
<div class="stat-top">
<div class="stat-icon-wrap stat-icon-navy">
<i class="fa fa-graduation-cap"></i>
</div>
<div class="stat-trend stat-trend-navy">
<i class="fa fa-arrow-up"></i> Certifiées
</div>
</div>
<div class="stat-number">
<span class="stat-count" data-target="{{ setting.nbrformation }}">0</span>
<span class="stat-plus">+</span>
</div>
<div class="stat-label">Formations</div>
<div class="stat-bar-wrap">
<div class="stat-bar stat-bar-navy"></div>
</div>
</div>
<div class="stat-card stat-gold" data-bar="60">
<div class="stat-top">
<div class="stat-icon-wrap stat-icon-gold">
<i class="fa fa-star"></i>
</div>
<div class="stat-trend">
<i class="fa fa-arrow-up"></i> Experts
</div>
</div>
<div class="stat-number">
<span class="stat-count" data-target="{{ setting.formateurs }}">0</span>
<span class="stat-plus">+</span>
</div>
<div class="stat-label">Formateurs</div>
<div class="stat-bar-wrap">
<div class="stat-bar stat-bar-gold"></div>
</div>
</div>
<div class="stat-card stat-navy" data-bar="45">
<div class="stat-top">
<div class="stat-icon-wrap stat-icon-navy">
<i class="fa fa-globe"></i>
</div>
<div class="stat-trend stat-trend-navy">
<i class="fa fa-arrow-up"></i> International
</div>
</div>
<div class="stat-number">
<span class="stat-count" data-target="{{ setting.pays }}">0</span>
<span class="stat-plus">+</span>
</div>
<div class="stat-label">Pays</div>
<div class="stat-bar-wrap">
<div class="stat-bar stat-bar-navy"></div>
</div>
</div>
</div>
</div>
</section>
{# =====================================================
CSS À AJOUTER dans le bloc <style> de votre fichier
===================================================== #}
<style>
.stats-section {
padding: 80px 0;
background: linear-gradient(135deg, #f6f8fc 0%, #f0f4ff 100%);
position: relative;
overflow: hidden;
}
.stats-section::before {
content: '';
position: absolute;
top: -120px; right: -120px;
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(255,174,39,.07) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.stats-section::after {
content: '';
position: absolute;
bottom: -80px; left: -80px;
width: 300px; height: 300px;
background: radial-gradient(circle, rgba(30,58,138,.06) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.stats-inner {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
position: relative;
z-index: 1;
}
@media (max-width: 992px) { .stats-inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .stats-inner { grid-template-columns: 1fr 1fr; gap: 14px; } }
.stat-card {
background: #fff;
border-radius: 20px;
padding: 28px 24px 24px;
position: relative;
overflow: hidden;
border: 1px solid #edf0f7;
box-shadow: 0 2px 10px rgba(30,58,138,.06);
transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.stat-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
border-radius: 20px 20px 0 0;
}
.stat-gold::before { background: linear-gradient(90deg, #FFAE27, #ffd07a); }
.stat-navy::before { background: linear-gradient(90deg, #1e3a8a, #2d52b0); }
.stat-card:hover {
transform: translateY(-10px);
box-shadow: 0 24px 56px rgba(30,58,138,.16);
border-color: rgba(255,174,39,.4);
}
.stat-gold:hover { border-color: rgba(255,174,39,.5); }
.stat-navy:hover { border-color: rgba(30,58,138,.3); }
.stat-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 18px;
}
.stat-icon-wrap {
width: 52px; height: 52px;
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
font-size: 22px;
transition: transform .3s ease;
}
.stat-card:hover .stat-icon-wrap { transform: scale(1.1) rotate(-5deg); }
.stat-icon-gold { background: #fff8e6; color: #FFAE27; }
.stat-icon-navy { background: #e8edf8; color: #1e3a8a; }
.stat-trend {
font-size: 10px;
font-weight: 700;
letter-spacing: .8px;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 20px;
display: flex;
align-items: center;
gap: 4px;
background: #fff8e6;
color: #e09500;
}
.stat-trend-navy {
background: #e8edf8;
color: #1e3a8a;
}
.stat-trend i { font-size: 9px; }
.stat-number {
line-height: 1;
margin-bottom: 6px;
display: flex;
align-items: flex-start;
gap: 2px;
}
.stat-count {
font-size: 52px;
font-weight: 800;
color: #0f1f3d;
line-height: 1;
font-family: 'Plus Jakarta Sans', sans-serif;
transition: color .3s;
}
.stat-gold:hover .stat-count { color: #FFAE27; }
.stat-navy:hover .stat-count { color: #1e3a8a; }
.stat-plus {
font-size: 32px;
font-weight: 800;
color: #FFAE27;
margin-top: 6px;
line-height: 1;
}
.stat-label {
font-size: 13px;
font-weight: 700;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 1.2px;
margin-bottom: 16px;
}
.stat-bar-wrap {
height: 4px;
background: #edf0f7;
border-radius: 2px;
overflow: hidden;
}
.stat-bar {
height: 100%;
border-radius: 2px;
width: 0;
transition: width 1.4s cubic-bezier(.4,0,.2,1);
}
.stat-bar-gold { background: linear-gradient(90deg, #FFAE27, #ffd07a); }
.stat-bar-navy { background: linear-gradient(90deg, #1e3a8a, #2d52b0); }
/* =====================================================
STATISTIQUES - VERSION MOBILE AMÉLIORÉE
===================================================== */
/* Styles de base pour mobile */
@media (max-width: 768px) {
.stats-section {
padding: 50px 20px;
}
.stats-inner {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.stat-card {
padding: 18px 15px 18px;
border-radius: 16px;
}
/* Réduction de la taille des icônes */
.stat-icon-wrap {
width: 42px;
height: 42px;
font-size: 18px;
border-radius: 12px;
}
/* Réduction de la taille des chiffres */
.stat-count {
font-size: 32px;
}
.stat-plus {
font-size: 24px;
margin-top: 4px;
}
/* Réduction du label */
.stat-label {
font-size: 10px;
letter-spacing: 0.8px;
margin-bottom: 12px;
}
/* Ajustement du trend badge */
.stat-trend {
font-size: 8px;
padding: 3px 8px;
}
.stat-trend i {
font-size: 7px;
}
/* Espacement réduit */
.stat-top {
margin-bottom: 12px;
}
.stat-number {
margin-bottom: 4px;
}
}
/* Pour les très petits écrans (moins de 480px) */
@media (max-width: 480px) {
.stats-section {
padding: 40px 15px;
}
.stats-inner {
gap: 12px;
}
.stat-card {
padding: 14px 12px 14px;
}
.stat-icon-wrap {
width: 38px;
height: 38px;
font-size: 16px;
}
.stat-count {
font-size: 28px;
}
.stat-plus {
font-size: 20px;
margin-top: 3px;
}
.stat-label {
font-size: 9px;
margin-bottom: 10px;
}
.stat-trend {
font-size: 7px;
padding: 2px 6px;
}
.stat-bar-wrap {
height: 3px;
}
}
/* Pour les écrans moyens (tablettes) */
@media (min-width: 769px) and (max-width: 1024px) {
.stats-inner {
gap: 20px;
}
.stat-card {
padding: 24px 20px 20px;
}
.stat-count {
font-size: 42px;
}
.stat-icon-wrap {
width: 48px;
height: 48px;
font-size: 20px;
}
}
/* Version horizontale pour mobile en mode paysage */
@media (max-width: 768px) and (orientation: landscape) {
.stats-section {
padding: 40px 20px;
}
.stats-inner {
gap: 15px;
}
.stat-count {
font-size: 30px;
}
}
/* Ajustements supplémentaires pour une meilleure lisibilité */
.stat-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Supprimer l'effet hover sur mobile pour éviter les problèmes de toucher */
@media (max-width: 768px) {
.stat-card:hover {
transform: translateY(-5px);
}
.stat-card:active {
transform: translateY(-3px);
transition: transform 0.05s;
}
}
/* Optimisation des animations sur mobile */
@media (max-width: 768px) {
.stat-card::before {
height: 3px;
}
.stat-bar {
transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}
}
/* Version compacte pour les très petits écrans */
@media (max-width: 380px) {
.stats-inner {
gap: 10px;
}
.stat-card {
padding: 12px 10px 12px;
}
.stat-icon-wrap {
width: 34px;
height: 34px;
font-size: 14px;
}
.stat-count {
font-size: 24px;
}
.stat-plus {
font-size: 18px;
margin-top: 2px;
}
.stat-label {
font-size: 8px;
margin-bottom: 8px;
}
}
/* =====================================================
VIDÉOS - SCROLL HORIZONTAL (Largeur augmentée + espace latéral)
===================================================== */
/* Ajout d'espace latéral pour toute la section */
.videos-section {
padding: 88px 0 !important;
position: relative;
overflow: hidden;
}
/* Container avec plus d'espace sur les côtés */
.videos-section .container {
padding-left: 40px !important;
padding-right: 40px !important;
max-width: 1400px !important;
width: 100% !important;
}
/* Ajustement pour mobile */
@media (max-width: 768px) {
.videos-section .container {
padding-left: 20px !important;
padding-right: 20px !important;
}
}
.videos-slider-container {
position: relative;
display: flex;
align-items: center;
gap: 15px;
margin-top: 40px;
width: 100%;
}
/* Boutons de navigation - repositionnés légèrement */
.videos-nav-btn {
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255,255,255,0.15);
backdrop-filter: blur(10px);
border: 1.5px solid rgba(255,174,39,0.5);
color: var(--gold);
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all .3s cubic-bezier(.4,0,.2,1);
flex-shrink: 0;
z-index: 10;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.videos-nav-btn:hover {
background: var(--gold);
border-color: var(--gold);
color: var(--navy);
transform: scale(1.1);
}
/* Rail de défilement - prend tout l'espace disponible */
.videos-rail {
flex: 1;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
cursor: grab;
border-radius: var(--r-lg);
width: 100%;
}
.videos-rail::-webkit-scrollbar {
display: none;
}
.videos-rail:active {
cursor: grabbing;
}
/* Belt des vidéos */
.videos-belt {
display: flex;
gap: 25px;
width: max-content;
padding: 10px 5px;
}
/* ===== CARTE VIDÉO - LARGEUR AUGMENTÉE ===== */
.videos-card {
width: 300px; /* Augmenté de 260px à 300px */
flex-shrink: 0;
background: rgba(255,255,255,.1);
border: 1.5px solid rgba(255,255,255,.15);
border-radius: var(--r-lg);
overflow: hidden;
transition: all .3s cubic-bezier(.4,0,.2,1);
position: relative;
backdrop-filter: blur(2px);
}
.videos-card:hover {
transform: translateY(-10px);
border-color: var(--gold);
box-shadow: 0 25px 50px rgba(0,0,0,.4);
background: rgba(255,255,255,.12);
}
/* VIDÉO - hauteur ajustée proportionnellement */
.videos-card video {
width: 100%;
height: 185px; /* Augmenté de 160px à 185px */
object-fit: cover;
display: block;
background: #000;
}
.videos-card-body {
padding: 16px 18px 20px;
display: flex;
align-items: flex-start;
gap: 14px;
}
.videos-play-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold), var(--gold-dark));
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 6px 16px rgba(255,174,39,.35);
transition: transform .3s;
cursor: pointer;
}
.videos-card:hover .videos-play-btn {
transform: scale(1.1);
}
.videos-play-btn i {
color: #fff;
font-size: 12px;
margin-left: 2px;
}
.videos-card-body h4 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 700;
color: rgba(255,255,255,.95);
margin: 0;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.videos-card-num {
position: absolute;
top: 12px;
right: 12px;
background: rgba(0,0,0,.75);
backdrop-filter: blur(4px);
color: var(--gold);
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 20px;
border: 1px solid rgba(255,174,39,.4);
z-index: 2;
}
/* Indicateur de défilement */
.videos-scroll-indicator {
margin-top: 30px;
display: flex;
justify-content: center;
}
.videos-scroll-bar {
width: 60px;
height: 3px;
background: rgba(255,255,255,0.25);
border-radius: 3px;
position: relative;
transition: width .3s;
}
/* ===== RESPONSIVE ===== */
/* Tablette */
@media (max-width: 992px) {
.videos-section .container {
padding-left: 30px !important;
padding-right: 30px !important;
}
.videos-card {
width: 280px;
}
.videos-card video {
height: 170px;
}
.videos-belt {
gap: 20px;
}
}
/* Mobile large */
@media (max-width: 768px) {
.videos-section .container {
padding-left: 15px !important;
padding-right: 15px !important;
}
.videos-nav-btn {
width: 40px;
height: 40px;
font-size: 16px;
}
.videos-slider-container {
gap: 10px;
}
.videos-card {
width: 260px;
}
.videos-card video {
height: 155px;
}
.videos-card-body {
padding: 14px 15px 16px;
gap: 12px;
}
.videos-play-btn {
width: 36px;
height: 36px;
}
.videos-play-btn i {
font-size: 11px;
}
.videos-card-body h4 {
font-size: 13px;
}
.videos-card-num {
font-size: 10px;
padding: 3px 8px;
top: 10px;
right: 10px;
}
.videos-belt {
gap: 18px;
}
}
/* Mobile standard */
@media (max-width: 576px) {
.videos-section .container {
padding-left: 12px !important;
padding-right: 12px !important;
}
.videos-nav-btn {
width: 36px;
height: 36px;
font-size: 14px;
}
.videos-card {
width: 240px;
}
.videos-card video {
height: 140px;
}
.videos-card-body {
padding: 12px 12px 14px;
gap: 10px;
}
.videos-play-btn {
width: 32px;
height: 32px;
}
.videos-play-btn i {
font-size: 10px;
}
.videos-card-body h4 {
font-size: 12px;
}
.videos-belt {
gap: 15px;
}
}
/* Petit mobile */
@media (max-width: 480px) {
.videos-section .container {
padding-left: 10px !important;
padding-right: 10px !important;
}
.videos-nav-btn {
width: 32px;
height: 32px;
font-size: 12px;
}
.videos-slider-container {
gap: 8px;
}
.videos-card {
width: 220px;
}
.videos-card video {
height: 130px;
}
.videos-card-body h4 {
font-size: 11px;
}
}
/* Version paysage sur mobile */
@media (max-width: 768px) and (orientation: landscape) {
.videos-section .container {
padding-left: 20px !important;
padding-right: 20px !important;
}
.videos-card {
width: 250px;
}
.videos-card video {
height: 145px;
}
}
/* Grand écran (>= 1400px) */
@media (min-width: 1400px) {
.videos-section .container {
padding-left: 60px !important;
padding-right: 60px !important;
max-width: 1600px !important;
}
.videos-card {
width: 320px;
}
.videos-card video {
height: 200px;
}
.videos-belt {
gap: 30px;
}
}
/* =====================================================
SESSIONS - VERSION MOBILE CORRIGÉE
===================================================== */
@media (max-width: 768px) {
/* Section */
.sessions-section {
padding: 40px 0;
overflow-x: hidden;
}
/* Container principal - largeur complète */
.sessions-slider-container {
display: flex;
align-items: center;
gap: 5px;
margin-top: 20px;
padding: 0 5px;
width: 100%;
}
/* Boutons de navigation - compacts */
.sessions-nav-btn {
width: 32px !important;
height: 32px !important;
font-size: 12px !important;
flex-shrink: 0;
background: white;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
margin: 0 !important;
position: relative;
left: auto !important;
right: auto !important;
transform: none !important;
}
/* Rail de défilement */
.sessions-rail {
flex: 1;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
cursor: grab;
}
/* Belt des cartes */
.sessions-belt {
display: flex;
gap: 12px;
padding: 5px;
width: max-content;
}
/* CARTE - Taille minimisée pour être complètement visible */
.sessions-card {
width: 260px !important;
flex-shrink: 0;
scroll-snap-align: start;
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
/* Image - hauteur réduite */
.s-card-img {
height: 140px !important;
}
.s-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Corps de la carte - padding réduit */
.s-card-body {
padding: 10px !important;
}
/* Titre */
.s-card-body h3 {
font-size: 13px !important;
margin-bottom: 6px !important;
line-height: 1.3;
min-height: auto;
}
/* Chip date/heure */
.s-time-chip {
font-size: 9px !important;
padding: 4px 8px !important;
margin-bottom: 8px !important;
gap: 4px;
}
.s-time-chip i {
font-size: 8px !important;
}
/* Description - limitée à 2 lignes */
.s-desc {
font-size: 10px !important;
line-height: 1.4 !important;
margin-bottom: 8px !important;
-webkit-line-clamp: 2;
}
/* Bouton */
.s-btn {
font-size: 10px !important;
padding: 5px 10px !important;
gap: 4px;
}
.s-btn-arrow {
width: 14px;
height: 14px;
}
.s-btn-arrow i {
font-size: 7px;
}
/* Message vide */
.no-sessions-message {
padding: 25px 15px;
margin: 0 10px;
}
.no-sessions-icon {
font-size: 36px;
}
.no-sessions-message h3 {
font-size: 16px;
}
.no-sessions-message p {
font-size: 11px;
}
}
/* Très petits mobiles (480px et moins) */
@media (max-width: 480px) {
.sessions-card {
width: 240px !important;
}
.s-card-img {
height: 130px !important;
}
.s-card-body h3 {
font-size: 12px !important;
}
.s-time-chip {
font-size: 8px !important;
padding: 3px 6px !important;
}
.s-desc {
font-size: 9px !important;
-webkit-line-clamp: 2;
}
.s-btn {
font-size: 9px !important;
padding: 4px 8px !important;
}
.sessions-nav-btn {
width: 28px !important;
height: 28px !important;
font-size: 10px !important;
}
.sessions-belt {
gap: 8px;
}
}
/* Mobiles très étroits (moins de 380px) */
@media (max-width: 380px) {
.sessions-card {
width: 220px !important;
}
.s-card-img {
height: 120px !important;
}
.s-card-body h3 {
font-size: 11px !important;
}
}
/* Version paysage mobile */
@media (max-width: 768px) and (orientation: landscape) {
.sessions-card {
width: 240px !important;
}
.s-card-img {
height: 130px !important;
}
.sessions-belt {
gap: 10px;
}
}
/* Suppression des effets hover sur mobile */
@media (hover: none) and (pointer: coarse) {
.sessions-card:hover {
transform: none !important;
}
.s-card:hover {
transform: none !important;
}
.sessions-nav-btn:hover {
transform: scale(1.05) !important;
}
}
</style>
{# =====================================================
JS À AJOUTER juste avant </script> de fermeture
(ou dans le bloc script existant en bas du fichier)
===================================================== #}
<script>
(function(){
function animateCount(el, target, dur){
var start = 0;
var steps = Math.ceil(dur / 16);
var inc = target / steps;
var t = setInterval(function(){
start = Math.min(start + inc, target);
el.textContent = Math.round(start).toLocaleString();
if(start >= target) clearInterval(t);
}, 16);
}
var section = document.querySelector('.stats-section');
if(!section) return;
var triggered = false;
function runStats(){
if(triggered) return;
triggered = true;
document.querySelectorAll('.stat-card').forEach(function(card){
var barPct = parseInt(card.dataset.bar) || 0;
var counter = card.querySelector('.stat-count');
var bar = card.querySelector('.stat-bar');
var target = parseInt(counter ? counter.dataset.target : 0) || 0;
if(counter) animateCount(counter, target, 1500);
if(bar) setTimeout(function(){ bar.style.width = barPct + '%'; }, 150);
});
}
if('IntersectionObserver' in window){
new IntersectionObserver(function(entries){
if(entries[0].isIntersecting) runStats();
}, { threshold: 0.25 }).observe(section);
} else {
runStats();
}
})();
</script>
<!-- =====================================================
TÉMOIGNAGES — REDESIGNED (Cards blanches)
===================================================== -->
<section class="testi-section">
<div class="container" style="position:relative;z-index:1">
<div class="sip-title-wrap navy" style="text-align:center">
<span class="sip-eyebrow sip-eyebrow-navy"><i class="fa fa-heart" style="font-size:11px"></i>Témoignages</span>
<h2 style="color:#fff">Ce que disent nos apprenants</h2>
<p style="color:rgba(255,255,255,.5)">Plus de {{ setting.membres }}+ apprenants nous font confiance</p>
<div class="sip-rule" style="margin:16px auto 0"></div>
</div>
<div class="testi-outer">
<div class="testi-track" id="testiTrack">
{% for temoii in temoi %}
<div class="testi-slide">
<div class="testi-card">
{# Header avec avatar et infos #}
<div class="testi-header">
<img class="testi-avatar" src="{{ asset('uploads/temoignage/' ~ temoii.image) }}" alt="{{ temoii.prenom }}">
<div class="testi-meta">
<p class="testi-name">{{ temoii.prenom }} {{ temoii.nom }}</p>
<p class="testi-role">{{ temoii.poste }}</p>
</div>
</div>
{# Contenu testimonial #}
<div class="testi-content">
<span class="testi-quote-mark">"</span>
<div class="testi-stars">
<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
</div>
<p class="testi-text">{{ temoii.description }}</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="testi-controls">
<button class="testi-arrow" id="testiPrev">←</button>
<div class="testi-dots" id="testiDots"></div>
<button class="testi-arrow" id="testiNext">→</button>
</div>
</div>
</section>
<!-- =====================================================
ACTUALITÉS — MODERNE
===================================================== -->
<section class="actu-section">
<div class="container">
<div class="actu-header">
<div class="sip-title-wrap left" style="margin-bottom:0">
<div id="actualites"></div>
<span class="sip-eyebrow"><i class="fa fa-newspaper-o" style="font-size:11px"></i>Blog</span>
<h2>Dernières Actualités</h2>
<div class="sip-rule"></div>
</div>
<div class="actu-arrows">
<button class="actu-arr" id="actuPrev">←</button>
<button class="actu-arr" id="actuNext">→</button>
</div>
</div>
<div class="actu-rail" id="actuRail">
<div class="actu-belt">
{% for actualite in actualites %}
<div class="a-card">
<div class="a-card-img">
<a href="{{ path('app_details_actualite',{'slug':actualite.slug}) }}">
<img src="{{ asset('uploads/actualite/'~ actualite.image) }}" alt="{{ actualite.titre }}">
</a>
</div>
<div class="a-card-body">
<div class="a-meta">
<span><i class="fa fa-calendar-o"></i>{{ actualite.date|date('d M Y') }}</span>
<span><i class="fa fa-eye"></i>{{ actualite.nbvue }}</span>
<span><i class="fa fa-comment-o"></i>{{ actualite.nbcommentaire }}</span>
</div>
<h3><a href="{{ path('app_details_actualite',{'slug':actualite.slug}) }}">{{ actualite.titre }}</a></h3>
<p class="a-excerpt">
{{ actualite.desccourt|striptags|slice(0, 200)|raw }}
{% if actualite.desccourt|striptags|length > 200 %}...{% endif %}
</p>
<a href="{{ path('app_details_actualite',{'slug':actualite.slug}) }}" class="a-read">
Lire la suite
<span class="a-read-icon"><i class="fa fa-arrow-right"></i></span>
</a>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</section>
<!-- =====================================================
ABONNEMENTS — IMAGE AGRANDIE, SANS BADGE OFFRE LIMITÉE
===================================================== -->
<div class="event-area">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="section-title-wrapper">
<div class="section-title">
<h3>NOS ABONNEMENTS</h3>
<p>Choisissez le plan qui vous convient et accédez à des formations de qualité professionnelle</p>
</div>
</div>
</div>
</div>
<div class="row">
{% for evenement in off %}
<div class="col-lg-4 col-md-6 mb-4">
<div class="single-event-item">
<div class="single-event-image">
<a href="{{ path('app_details_offres',{'slug':evenement.slug}) }}">
<img src="{{ asset('uploads/affiche/'~ evenement.affiche) }}" alt="{{ evenement.titre }}">
</a>
{# UNIQUEMENT le badge prix (pas d'offre limitée) #}
</div>
<div class="single-event-text">
<h3>{{ evenement.titre }}</h3>
<div class="price-text">{{ evenement.prix }} DT</div>
<ul class="features-list">
{% for tt in evenement.formation %}
<li>
<i class="fa fa-check-circle"></i>
<span>Promo {{ tt.titre }}</span>
</li>
{% endfor %}
{% if evenement.option5 %}
<li>
<i class="fa fa-check-circle"></i>
<span>{{ evenement.option5 }}</span>
</li>
{% endif %}
{% if evenement.option4 %}
<li>
<i class="fa fa-check-circle"></i>
<span>{{ evenement.option4 }}</span>
</li>
{% endif %}
</ul>
<div class="duration-badge">
<i class="fa fa-clock-o"></i>
<span>Durée: {{ evenement.duree }}</span>
</div>
<a class="button-default" href="{{ path('app_details_offres',{'slug':evenement.slug}) }}">
Découvrir l'offre
<i class="fa fa-arrow-right"></i>
</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<script>
function fireSweetAlert(){ Swal.fire({icon:'success',title:'Vous désormais inscrit au newsletters',showConfirmButton:false,timer:2800}) }
function fireSweetAlert2(){ Swal.fire({icon:'success',title:'Vous êtes déjà inscrit',showConfirmButton:false,timer:2800}) }
function fireSweetAlert3(){ Swal.fire({icon:'success',title:'Vous devez entrez votre email',showConfirmButton:false,timer:2800}) }
function addNewsletter(){
var email=document.getElementById("email").value;
if(email!==""){
$.ajax({type:"POST",url:"{{ path('app_newsletter_new_ajax') }}",data:{email:email},
success:function(data){ if(data===1){fireSweetAlert();}else{fireSweetAlert2();} }
});
}else{fireSweetAlert3();}
}
/* panier fix */
document.querySelector('.search-menu a').addEventListener('click',function(e){
e.preventDefault();
window.location.href="{{ path('panier_voir') }}";
});
/* ============================================
TESTIMONIALS — auto-play, 2 par vue
============================================ */
(function(){
var track=document.getElementById('testiTrack');
var dotsW=document.getElementById('testiDots');
if(!track) return;
var slides=track.querySelectorAll('.testi-slide');
var total=slides.length;
var perView=window.innerWidth<=768?1:2;
var current=0;
var timer;
function maxIdx(){ return Math.max(0,total-perView); }
/* build dots */
function buildDots(){
dotsW.innerHTML='';
for(var i=0;i<=maxIdx();i++){
var d=document.createElement('span');
d.className='testi-dot'+(i===0?' active':'');
(function(idx){ d.addEventListener('click',function(){goTo(idx);resetTimer();}); })(i);
dotsW.appendChild(d);
}
}
buildDots();
function updateDots(){
dotsW.querySelectorAll('.testi-dot').forEach(function(d,i){
d.classList.toggle('active',i===current);
});
}
function goTo(idx){
current=Math.max(0,Math.min(idx,maxIdx()));
track.style.transform='translateX(-'+(current*(100/perView))+'%)';
updateDots();
}
function next(){ goTo(current>=maxIdx()?0:current+1); }
function prev(){ goTo(current<=0?maxIdx():current-1); }
document.getElementById('testiNext').addEventListener('click',function(){next();resetTimer();});
document.getElementById('testiPrev').addEventListener('click',function(){prev();resetTimer();});
function startTimer(){ timer=setInterval(next,4500); }
function resetTimer(){ clearInterval(timer);startTimer(); }
startTimer();
window.addEventListener('resize',function(){
perView=window.innerWidth<=768?1:2;
current=0; buildDots(); goTo(0);
});
})();
/* ============================================
ACTUALITÉS — scroll + drag
============================================ */
(function(){
var rail=document.getElementById('actuRail');
if(!rail) return;
var STEP=398;
document.getElementById('actuNext').addEventListener('click',function(){ rail.scrollBy({left:STEP,behavior:'smooth'}); });
document.getElementById('actuPrev').addEventListener('click',function(){ rail.scrollBy({left:-STEP,behavior:'smooth'}); });
/* drag */
var down=false,sx,sl;
rail.addEventListener('mousedown',function(e){ down=true; sx=e.pageX-rail.offsetLeft; sl=rail.scrollLeft; });
rail.addEventListener('mouseleave',function(){ down=false; });
rail.addEventListener('mouseup',function(){ down=false; });
rail.addEventListener('mousemove',function(e){
if(!down) return; e.preventDefault();
rail.scrollLeft=sl-(e.pageX-rail.offsetLeft-sx);
});
})();
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-9C4DLY6W7X"></script>
<script>
window.dataLayer=window.dataLayer||[];
function gtag(){dataLayer.push(arguments);}
gtag('js',new Date());
gtag('config','G-9C4DLY6W7X');
</script>
<script>
/* ============================================
VIDÉOS - SCROLL HORIZONTAL AVEC CALCUL AUTO
============================================ */
(function(){
var rail = document.getElementById('videosRail');
if(!rail) return;
var nextBtn = document.getElementById('videosNext');
var prevBtn = document.getElementById('videosPrev');
// Fonction pour calculer la largeur de défilement dynamique
function getScrollAmount() {
var firstCard = document.querySelector('.videos-card');
var railElement = document.getElementById('videosRail');
if(firstCard && railElement) {
var cardWidth = firstCard.offsetWidth;
// Récupérer le gap depuis le style computed
var belt = document.querySelector('.videos-belt');
var gap = belt ? parseInt(getComputedStyle(belt).gap) || 25 : 25;
return cardWidth + gap;
}
return 325; // valeur par défaut (300px + 25px gap)
}
// Fonction pour faire défiler
function scrollLeft() {
var amount = getScrollAmount();
rail.scrollBy({
left: -amount,
behavior: 'smooth'
});
setTimeout(updateScrollIndicator, 300);
setTimeout(checkButtonsVisibility, 350);
}
function scrollRight() {
var amount = getScrollAmount();
rail.scrollBy({
left: amount,
behavior: 'smooth'
});
setTimeout(updateScrollIndicator, 300);
setTimeout(checkButtonsVisibility, 350);
}
// Mettre à jour l'indicateur de défilement
function updateScrollIndicator() {
var scrollBar = document.querySelector('.videos-scroll-bar');
if(!scrollBar) return;
var maxScroll = rail.scrollWidth - rail.clientWidth;
var currentScroll = rail.scrollLeft;
if(maxScroll > 0) {
var percentage = (currentScroll / maxScroll) * 100;
var barWidth = (percentage * 0.6);
scrollBar.style.width = Math.max(20, Math.min(60, barWidth)) + 'px';
} else {
scrollBar.style.width = '60px';
}
}
// Vérifier et cacher/afficher les boutons si nécessaire
function checkButtonsVisibility() {
if(!nextBtn || !prevBtn) return;
var maxScroll = rail.scrollWidth - rail.clientWidth;
var currentScroll = rail.scrollLeft;
// Désactiver bouton gauche si au début
if(currentScroll <= 10) {
prevBtn.style.opacity = '0.4';
prevBtn.style.cursor = 'not-allowed';
prevBtn.disabled = true;
} else {
prevBtn.style.opacity = '1';
prevBtn.style.cursor = 'pointer';
prevBtn.disabled = false;
}
// Désactiver bouton droit si à la fin
if(currentScroll >= maxScroll - 10) {
nextBtn.style.opacity = '0.4';
nextBtn.style.cursor = 'not-allowed';
nextBtn.disabled = true;
} else {
nextBtn.style.opacity = '1';
nextBtn.style.cursor = 'pointer';
nextBtn.disabled = false;
}
}
// Boutons click
if(nextBtn) {
nextBtn.addEventListener('click', function() {
if(!nextBtn.disabled) {
scrollRight();
}
});
}
if(prevBtn) {
prevBtn.addEventListener('click', function() {
if(!prevBtn.disabled) {
scrollLeft();
}
});
}
// DRAG TO SCROLL
var isDown = false;
var startX;
var scrollLeftPos;
rail.addEventListener('mousedown', function(e) {
isDown = true;
rail.style.cursor = 'grabbing';
startX = e.pageX - rail.offsetLeft;
scrollLeftPos = rail.scrollLeft;
e.preventDefault();
});
rail.addEventListener('mouseleave', function() {
isDown = false;
rail.style.cursor = 'grab';
setTimeout(checkButtonsVisibility, 100);
});
rail.addEventListener('mouseup', function() {
isDown = false;
rail.style.cursor = 'grab';
setTimeout(checkButtonsVisibility, 100);
});
rail.addEventListener('mousemove', function(e) {
if(!isDown) return;
e.preventDefault();
var x = e.pageX - rail.offsetLeft;
var walk = (x - startX) * 1.5;
rail.scrollLeft = scrollLeftPos - walk;
updateScrollIndicator();
checkButtonsVisibility();
});
// Écouter l'événement scroll
rail.addEventListener('scroll', function() {
updateScrollIndicator();
checkButtonsVisibility();
});
// Recalculer au redimensionnement
window.addEventListener('resize', function() {
setTimeout(function() {
updateScrollIndicator();
checkButtonsVisibility();
}, 200);
});
// Initialisation
setTimeout(function() {
updateScrollIndicator();
checkButtonsVisibility();
}, 500);
// Touches clavier
document.addEventListener('keydown', function(e) {
var videosSection = document.querySelector('.videos-section');
if(videosSection && (videosSection.contains(document.activeElement) || document.activeElement === document.body)) {
if(e.key === 'ArrowLeft') {
if(prevBtn && !prevBtn.disabled) scrollLeft();
e.preventDefault();
} else if(e.key === 'ArrowRight') {
if(nextBtn && !nextBtn.disabled) scrollRight();
e.preventDefault();
}
}
});
})();
</script>
<script>
/* ============================================
SESSIONS - SCROLL AVEC BOUTONS
============================================ */
(function(){
var rail = document.getElementById('sessionsRail');
if(!rail) return;
var nextBtn = document.getElementById('sessionsNext');
var prevBtn = document.getElementById('sessionsPrev');
function getScrollAmount() {
var firstCard = document.querySelector('.sessions-card');
if(firstCard) {
var cardWidth = firstCard.offsetWidth;
var belt = document.querySelector('.sessions-belt');
var gap = belt ? parseInt(getComputedStyle(belt).gap) || 28 : 28;
return cardWidth + gap;
}
return 380;
}
function scrollLeft() {
rail.scrollBy({ left: -getScrollAmount(), behavior: 'smooth' });
setTimeout(checkButtonsVisibility, 350);
}
function scrollRight() {
rail.scrollBy({ left: getScrollAmount(), behavior: 'smooth' });
setTimeout(checkButtonsVisibility, 350);
}
function checkButtonsVisibility() {
if(!nextBtn || !prevBtn) return;
var maxScroll = rail.scrollWidth - rail.clientWidth;
var currentScroll = rail.scrollLeft;
prevBtn.style.opacity = currentScroll <= 10 ? '0.4' : '1';
prevBtn.style.cursor = currentScroll <= 10 ? 'not-allowed' : 'pointer';
prevBtn.disabled = currentScroll <= 10;
nextBtn.style.opacity = currentScroll >= maxScroll - 10 ? '0.4' : '1';
nextBtn.style.cursor = currentScroll >= maxScroll - 10 ? 'not-allowed' : 'pointer';
nextBtn.disabled = currentScroll >= maxScroll - 10;
}
if(nextBtn) nextBtn.addEventListener('click', function() { if(!nextBtn.disabled) scrollRight(); });
if(prevBtn) prevBtn.addEventListener('click', function() { if(!prevBtn.disabled) scrollLeft(); });
// Drag to scroll
var isDown = false, startX, scrollLeftPos;
rail.addEventListener('mousedown', function(e) {
isDown = true;
rail.style.cursor = 'grabbing';
startX = e.pageX - rail.offsetLeft;
scrollLeftPos = rail.scrollLeft;
e.preventDefault();
});
rail.addEventListener('mouseleave', function() { isDown = false; rail.style.cursor = 'grab'; });
rail.addEventListener('mouseup', function() { isDown = false; rail.style.cursor = 'grab'; setTimeout(checkButtonsVisibility, 100); });
rail.addEventListener('mousemove', function(e) {
if(!isDown) return;
e.preventDefault();
var walk = (e.pageX - rail.offsetLeft - startX) * 1.5;
rail.scrollLeft = scrollLeftPos - walk;
checkButtonsVisibility();
});
rail.addEventListener('scroll', checkButtonsVisibility);
window.addEventListener('resize', function() { setTimeout(checkButtonsVisibility, 200); });
setTimeout(checkButtonsVisibility, 500);
})();
</script>
{% endblock %}

templates/home/index.html.twig line 1