@import './variables.css';
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');
/* Force application des nouvelles fonts - sauf icônes */
body, p, span, div, a, button, input, textarea, select {
font-family: var(--font-text) !important;
}
h1, h2, h3, h4, h5, h6,
.mastermind-modern-title,
.trainer-section-title,
.event-mastermind-title {
font-family: var(--font-title) !important;
}
/* Préserver les fonts des icônes */
i, .fa, .fas, .fab, .far, .fal, .fad, .mastermind-modern-icon i {
font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
}
/* ===== CUSTOM FONT PRESTIGE SIGNATURE ===== */
@font-face {
font-family: 'PrestigeSignature';
src: local('Prestige Signature Script - Demo'),
local('PrestigeSignatureScript'),
url('../Assets/font/Prestige%20Signature%20Script%20-%20Demo.ttf') format('truetype'),
url('../Assets/font/Prestige Signature Script - Demo.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Exception pour footer script - DOIT utiliser Prestige Signature */
.footer-script {
font-family: 'PrestigeSignature', cursive !important;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-text);
background-color: var(--color-dark-blue);
color: var(--color-light);
font-size: clamp(16px, 2vw, 20px);
line-height: 1.7;
overflow-x: hidden;
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 2rem;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-title);
color: var(--color-gold);
font-weight: 800;
}
.section-title {
text-align: center;
font-size: 1.5rem;
margin-bottom: 2rem;
text-transform: uppercase;
}
/* Header with Parallax */
.header {
min-height: 100vh;
height: 100vh;
background: #f7f7f7;
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background: url('../Assets/img/MM_cleanup.jpg') center/contain no-repeat;
background-size: 80%;
}
.header::before {
content: '';
position: absolute;
inset: 0;
opacity: 0.70;
z-index: 0;
pointer-events: none;
}
.header-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: none;
z-index: 1;
}
.header-content {
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: space-between;
gap: 2.5rem;
text-align: left;
}
.logo {
margin-left: 2.5rem;
margin-right: 0;
border: 3px solid var(--color-light);
padding: 2rem;
background-color: var(--color-black-50);
font-size: 1.7rem;
font-weight: bold;
letter-spacing: 2px;
transition: var(--transition-smooth);
color: var(--color-light);
}
.logo:hover {
transform: scale(1.05);
box-shadow: 0 0 25px rgba(255, 165, 0, 0.5);
}
.logo-icon {
border: 2px solid var(--color-light);
border-radius: var(--radius-round);
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto 1rem;
font-weight: normal;
color: var(--color-gold);
}
.logo-subtext {
font-size: 0.85rem;
letter-spacing: 4px;
margin-top: 0.5rem;
color: var(--color-gold);
}
.header-slogan {
font-size: 1.05rem;
color: var(--color-dark-blue);
background: var(--color-white-85);
padding: 1.5rem 2rem;
border-radius: 18px;
max-width: 520px;
font-family: var(--font-title);
font-weight: 600;
box-shadow: 0 2px 12px rgba(212,175,55,0.07);
}
@media (max-width: 900px) {
.header-content {
flex-direction: column;
align-items: center;
text-align: center;
gap: 1.2rem;
}
.logo {
margin-left: 0;
}
.header-slogan {
padding: 1rem 1.2rem;
font-size: 0.9rem;
max-width: 100%;
}
}
/* Programme Section */
.section-separator {
width: 100%;
height: 32px;
background: url('data:image/svg+xml;utf8,') center/cover no-repeat;
margin: 0 auto;
border: none;
display: block;
}
.programme-section {
position: relative;
background: url('data:image/svg+xml;utf8,');
background-size: 300px 300px;
background-repeat: repeat;
padding: 4rem 0 2rem 0;
}
.programme-split {
display: flex;
gap: 3.5rem;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
}
.programme-left {
flex: 2 1 340px;
min-width: 280px;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.programme-cards-vertical {
display: flex;
flex-direction: column;
gap: 2rem;
}
.programme-divider {
width: 2px;
min-height: 320px;
background: repeating-linear-gradient(
to bottom,
#ffd600,
#ffd600 8px,
transparent 8px,
transparent 18px
);
border-radius: 2px;
align-self: stretch;
margin: 0 2.5rem;
opacity: 0.35;
}
.programme-right {
flex: 1 1 220px;
min-width: 200px;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.1rem;
justify-content: flex-start;
text-align: center;
}
.programme-photo {
width: 120px;
height: 120px;
border-radius: var(--radius-round);
object-fit: cover;
border: 4px solid var(--color-gold);
box-shadow: 0 2px 8px rgba(26,35,126,0.10);
margin-bottom: 0.5rem;
background: #fff;
}
.programme-apropos {
font-size: 0.87rem;
color: var(--color-text-primary);
background: #fffbe6;
border-radius: var(--radius-md);
padding: 0.7em 1.1em;
box-shadow: 0 2px 8px rgba(212,175,55,0.07);
margin-top: 0.2em;
font-family: var(--font-text);
}
.section-badge {
display: inline-block;
background: var(--color-gold);
color: var(--color-dark-blue);
font-size: 0.95rem;
font-weight: bold;
border-radius: var(--radius-xl);
padding: 0.2em 1em;
margin-right: 0.7em;
letter-spacing: 1px;
vertical-align: middle;
}
.programme-cards {
display: flex;
gap: 2rem;
margin-top: 2rem;
flex-wrap: wrap;
}
.programme-card {
background: var(--color-dark-grey);
border-radius: 16px;
box-shadow: 0 4px 24px rgba(0,0,0,0.10);
padding: 2rem 1.5rem 1.5rem 1.5rem;
flex: 1 1 260px;
min-width: 240px;
transition: transform 0.2s, box-shadow 0.2s;
position: relative;
}
.programme-card:hover {
transform: translateY(-6px) scale(1.03);
box-shadow: 0 8px 32px rgba(212,175,55,0.13);
}
.programme-card h3 {
color: var(--color-gold);
font-size: 1.05rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.7em;
}
.programme-card ul {
list-style: none;
padding: 0;
}
.programme-card li {
color: var(--color-light);
font-size: 0.92rem;
margin-bottom: 0.7em;
display: flex;
align-items: center;
gap: 0.7em;
}
.programme-card i {
color: var(--color-gold);
font-size: 0.95em;
min-width: 1.2em;
}
.programme-footnotes {
margin-top: 2.5rem;
}
@media (max-width: 1000px) {
.programme-split {
flex-direction: column;
gap: 2.5rem;
}
.programme-divider {
display: none;
}
.programme-right {
flex-direction: row;
justify-content: center;
gap: 1.5rem;
margin-top: 1.5rem;
text-align: left;
}
.programme-photo {
margin-bottom: 0;
}
}
@media (max-width: 600px) {
.programme-right {
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.7rem;
}
}
/* Programme Section */
.programme { padding: 3rem 0; }
.programme h2 {
font-size: 1.3rem;
margin-bottom: 1rem;
}
.programme-content {
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
.programme-details ul {
list-style: none;
margin-bottom: 2rem;
}
.programme-details ul li {
margin-bottom: 0.5rem;
padding-left: 1.5rem;
position: relative;
}
.programme-details ul li::before {
content: '•';
color: var(--color-gold);
position: absolute;
left: 0;
font-size: 1rem;
top: -2px;
}
.smiley-container {
display: flex;
align-items: center;
justify-content: center;
}
.smiley {
width: 120px;
height: 120px;
border: 4px solid var(--color-gold);
border-radius: var(--radius-round);
position: relative;
}
.smiley::before, .smiley::after {
content: '';
position: absolute;
background: var(--color-gold);
border-radius: var(--radius-round);
}
.smiley::before { /* Left eye */
width: 12px;
height: 12px;
top: 35px;
left: 30px;
}
.smiley::after { /* Right eye */
width: 12px;
height: 12px;
top: 35px;
right: 30px;
}
.footnote {
font-size: 0.8rem;
color: #aaa;
margin-top: 1rem;
}
.footnote-center {
text-align: center;
font-size: 0.8rem;
color: #aaa;
margin-top: 2rem;
}
/* Offres Section */
.offres-section {
background: none;
padding: 3.5rem 0 3rem 0;
}
.offres {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
align-items: stretch;
}
.offre {
position: relative;
background: var(--color-dark-grey);
border-radius: 14px;
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
overflow: hidden;
text-align: center;
display: flex;
flex-direction: column;
transition: box-shadow 0.25s, transform 0.18s, filter 0.2s;
}
.offre:hover {
box-shadow: 0 12px 32px rgba(212,175,55,0.18);
transform: translateY(-4px) scale(1.02);
}
.offre::after {
content: '';
display: block;
position: absolute;
inset: 0;
background: rgba(255,199,44,0.12);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
z-index: 1;
}
.offre:hover::after {
opacity: 1;
}
.offre-img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.offre-content {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.offre h3 {
font-size: 1.15rem;
margin-bottom: 1rem;
color: var(--color-gold);
}
.offre p {
flex-grow: 1;
margin-bottom: 1.5rem;
color: var(--color-light);
}
.offre .tarif {
font-weight: bold;
font-size: 1rem;
color: var(--color-gold);
}
.offre .offre-btn {
display: block;
width: 100%;
max-width: 220px;
margin: 1.5rem auto 0 auto;
background: var(--gradient-gold-yellow);
color: var(--color-text-primary);
font-family: var(--font-title);
font-weight: 700;
font-size: 0.92rem;
padding: 15px 0;
border: none;
border-radius: 28px;
box-shadow: 0 2px 12px rgba(26,35,126,0.10);
text-align: center;
text-decoration: none;
letter-spacing: 0.5px;
transition: background 0.3s, color 0.2s, box-shadow 0.2s, transform 0.18s;
cursor: pointer;
}
.offre .offre-btn:hover, .offre:hover .offre-btn {
background: var(--gradient-gold-yellow-reverse);
color: var(--color-dark-blue);
box-shadow: 0 6px 24px rgba(212,175,55,0.18);
transform: translateY(-2px) scale(1.04);
}
/* Financement Section */
.financement-section {
background: none;
padding: 3.5rem 0 3rem 0;
}
.financement-content {
display: flex;
gap: 2rem;
align-items: center;
}
.financement-details { flex: 2; }
.financement-aside {
flex: 1;
text-align: center;
border-left: 1px solid var(--color-dark-grey);
padding-left: 2rem;
}
.financement-item {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
gap: 1rem;
margin-bottom: 1.5rem;
}
.financement-item h3 { font-size: 1rem }
.financement-item p { flex-grow: 1; }
.stars {
font-size: 2.1rem;
color: var(--color-gold);
line-height: 1;
margin-bottom: 1rem;
}
.stars .fa-star {
margin: 0 0.2rem;
transition: transform 0.2s ease;
}
.stars:hover .fa-star {
transform: scale(1.2) rotate(15deg);
}
.financement-aside p {
font-size: 0.95rem;
font-weight: bold;
color: var(--color-gold);
}
/* Liens Section */
.liens-section { padding: 3rem 0; }
.liens-container {
display: flex;
justify-content: space-around;
text-align: center;
}
.lien-item {
color: var(--color-gold);
text-decoration: none;
position: relative;
transition: color 0.2s;
}
.lien-item:hover {
color: var(--color-yellow-bg);
}
.lien-item::after {
content: '';
display: block;
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 2px;
background: linear-gradient(90deg, var(--color-gold), var(--color-yellow-bg));
transform: scaleX(0);
transition: transform 0.3s;
}
.lien-item:hover::after {
transform: scaleX(1);
}
.lien-icon {
width: 100px;
height: 100px;
border: 2px solid var(--color-gold);
border-radius: var(--radius-round);
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
margin: 0 auto 1rem;
transition: var(--transition-smooth);
}
.lien-item:hover .lien-icon {
background-color: var(--color-gold);
color: var(--color-dark-blue);
transform: rotate(360deg);
}
/* Parrainage Section */
.parrainage-section {
background: linear-gradient(90deg, var(--color-yellow-bg) 60%, #fffbe6 100%);
color: #222;
text-align: center;
padding: 4rem 2rem;
}
.parrainage-section h2 {
color: var(--color-dark-blue);
font-size: 1.7rem;
}
.parrainage-section p {
margin: 0.5rem 0;
font-size: 1rem;
}
.parrainage-highlight {
font-weight: bold;
font-size: 1rem;
margin-top: 1rem;
}
/* Contact Section */
.contact-section {
padding: 4rem 0;
background: linear-gradient(120deg, #232b3e 80%, var(--color-dark-grey) 100%);
}
.section-subtitle {
text-align: center;
max-width: 600px;
margin: 0 auto 3rem;
font-size: 0.95rem;
}
.contact-content-wrapper {
display: flex;
gap: 3rem;
}
.contact-form-container {
flex: 2;
}
.form-notice {
font-size: 0.7rem;
background-color: var(--color-white-10);
padding: 0.5rem;
border-radius: 5px;
margin-bottom: 1rem;
text-align: center;
}
.form-notice a {
color: var(--color-gold);
font-weight: bold;
}
.form-group {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
}
.contact-form-container input, .contact-form-container textarea {
width: 100%;
padding: 0.8rem;
background-color: var(--color-dark-blue);
border: 1px solid #555;
border-radius: 5px;
color: var(--color-light);
font-family: var(--font-text);
}
.contact-form-container input:focus, .contact-form-container textarea:focus {
outline: none;
border-color: var(--color-gold);
}
.btn-submit {
background: var(--gradient-gold-yellow);
color: var(--color-text-primary);
border: none;
padding: 1rem 2.5rem;
font-family: var(--font-title);
font-weight: bold;
font-size: 0.92rem;
cursor: pointer;
border-radius: 30px;
transition: background 0.3s, color 0.2s, box-shadow 0.2s, transform 0.18s;
box-shadow: 0 2px 12px rgba(26,35,126,0.10);
display: flex;
align-items: center;
justify-content: center;
gap: 0.7em;
position: relative;
min-width: 220px;
}
.btn-submit .btn-text {
display: inline-block;
transition: opacity 0.2s;
}
.btn-submit .btn-loader {
display: inline-block;
margin-left: 0.7em;
vertical-align: middle;
width: 22px;
height: 22px;
opacity: 0;
transition: opacity 0.2s;
pointer-events: none;
}
.btn-submit.loading .btn-text {
opacity: 0.3;
}
.btn-submit.loading .btn-loader {
opacity: 1;
}
.btn-submit:not(.loading) .btn-loader {
visibility: hidden;
}
.btn-submit:hover {
background: var(--gradient-gold-yellow-reverse);
color: var(--color-dark-blue);
box-shadow: 0 6px 24px rgba(212,175,55,0.18);
transform: translateY(-2px) scale(1.04);
}
.contact-info-container {
flex: 1;
text-align: center;
}
.contact-photo {
width: clamp(120px, 30vw, 320px);
height: clamp(120px, 30vw, 320px);
border-radius: var(--radius-round);
object-fit: cover;
border: 6px solid var(--color-gold);
margin-bottom: 1.5rem;
box-shadow: 0 8px 32px var(--color-black-18);
transition: transform 0.4s cubic-bezier(.4,2,.3,1), box-shadow 0.3s;
position: relative;
z-index: 1;
}
.contact-photo:hover {
transform: scale(1.07);
box-shadow: 0 0 40px 0 var(--color-gold), 0 8px 32px var(--color-black-18);
}
.contact-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.contact-info-item {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 0.5rem;
}
.contact-info-item i {
color: var(--color-gold);
}
/* Footer */
footer {
background: #181e2a;
text-align: center;
padding: 1.5rem;
}
footer a {
color: var(--color-gold);
text-shadow: 0 0 8px var(--color-gold);
}
footer a:hover {
color: var(--color-yellow-bg);
text-shadow: 0 0 16px var(--color-gold);
}
/* Responsive */
@media (max-width: 900px) {
.contact-content-wrapper, .financement-content {
flex-direction: column;
}
.financement-aside { border-left: none; padding-left: 0; border-top: 1px solid var(--color-dark-grey); padding-top: 2rem;}
.offres {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.programme-content { flex-direction: column; }
.header { height: 50vh; }
.logo { padding: 1.5rem; font-size: 1.1rem;}
.liens-container { flex-direction: column; gap: 2rem; }
.form-group { flex-direction: column; }
}
@media (max-width: 600px) {
.offres {
grid-template-columns: 1fr;
}
}
/* Avis Section */
.avis-section {
background: repeating-linear-gradient(135deg, #232b3e, #232b3e 40px, #2c3e50 40px, #2c3e50 80px);
padding: 2.5rem 0 1.5rem 0;
}
.avis-section .section-title {
margin-bottom: 2.5rem;
}
.avis-carousel {
display: flex;
flex-direction: column;
align-items: center;
}
.avis-slide {
display: none;
transition: opacity 0.5s;
}
.avis-slide.active {
display: block;
}
.avis-card {
background: var(--color-dark-grey);
border-radius: 18px;
box-shadow: 0 4px 24px rgba(0,0,0,0.10);
padding: 2.7rem 2.7rem 2.2rem 2.7rem;
position: relative;
min-height: 220px;
display: flex;
flex-direction: row;
align-items: flex-start;
text-align: left;
}
.avis-photo {
position: absolute;
top: -45px;
left: -45px;
width: 90px;
height: 90px;
border-radius: var(--radius-round);
overflow: hidden;
border: 4px solid var(--color-gold);
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.10);
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.avis-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.avis-content {
margin-left: 70px;
width: 100%;
display: block;
text-align: left;
align-items: unset;
}
.avis-stars {
color: var(--color-gold);
font-size: 1.1rem;
margin-bottom: 0.7rem;
}
.avis-stars i {
transition: transform 0.2s, color 0.2s, text-shadow 0.2s;
}
.avis-stars i:hover, .avis-stars i.active {
color: var(--color-gold);
transform: scale(1.2) rotate(-10deg);
text-shadow: 0 0 8px var(--color-gold);
}
.avis-comment {
font-size: 1.05rem;
color: var(--color-light);
margin-bottom: 0.7rem;
font-style: italic;
}
.avis-author {
color: var(--color-gold);
font-weight: bold;
font-size: 0.98rem;
}
.avis-controls {
display: flex;
justify-content: center;
gap: 1.5rem;
margin-top: 1.5rem;
}
.avis-controls button {
background: var(--color-gold);
border: none;
border-radius: var(--radius-round);
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-dark-blue);
font-size: 0.95rem;
cursor: pointer;
transition: background 0.2s;
}
.avis-controls button:hover {
background: var(--color-yellow-bg);
}
@media (max-width: 600px) {
.avis-card {
padding: 2.5rem 0.5rem 1.5rem 0.5rem;
font-size: 0.85rem;
flex-direction: row;
align-items: flex-start;
text-align: left;
}
.avis-photo {
position: absolute;
top: -25px;
left: -25px;
width: 60px;
height: 60px;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.avis-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.avis-content {
margin-left: 25px;
text-align: left;
align-items: unset;
}
}
.contact-flex {
display: flex;
gap: 3rem;
align-items: center;
justify-content: center;
}
.contact-photo-col, .contact-form-col {
background: linear-gradient(135deg, rgba(33,42,62,0.98) 60%, rgba(55,60,80,0.92) 100%);
border-radius: 18px;
box-shadow: 0 8px 32px var(--color-black-18);
}
.contact-photo-col {
padding: 2.5rem 1.5rem;
min-width: 320px;
max-width: 350px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.contact-photo-col h3 {
margin-top: 1.5rem;
font-size: 1.7rem;
color: var(--color-gold);
}
.contact-photo-col p {
color: var(--color-light);
margin-bottom: 1.2rem;
}
.contact-form-col {
padding: 3rem 2.5rem;
min-width: 320px;
display: flex;
flex-direction: column;
align-items: center;
}
.contact-form-col form {
width: 100%;
max-width: 420px;
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.contact-form-col .form-group {
display: flex;
gap: 1rem;
}
.contact-form-col input, .contact-form-col textarea {
position: relative;
z-index: 1;
width: 100%;
padding: 1.1rem 1.2rem;
background: rgba(255,255,255,0.08);
border: 2px solid #555;
border-radius: var(--radius-xs);
color: var(--color-light);
font-family: var(--font-text);
font-size: 0.95rem;
box-shadow: 0 0 0 0px rgba(212,175,55,0);
transition: border-color 0.35s cubic-bezier(.4,2,.3,1), box-shadow 0.45s cubic-bezier(.4,2,.3,1), background 0.2s;
}
.contact-form-col input::after, .contact-form-col textarea::after {
content: '';
position: absolute;
left: -6px; top: -6px; right: -6px; bottom: -6px;
border-radius: var(--radius-md);
pointer-events: none;
box-shadow: 0 0 0 0px rgba(212,175,55,0.35);
opacity: 0;
transition: box-shadow 0.45s cubic-bezier(.4,2,.3,1), opacity 0.45s cubic-bezier(.4,2,.3,1);
z-index: 2;
}
.contact-form-col input:focus::after, .contact-form-col textarea:focus::after {
box-shadow: 0 0 0 8px rgba(212,175,55,0.35);
opacity: 1;
}
/* Définition .btn-submit #2 supprimée - voir définition principale ligne 656 */
@media (max-width: 900px) {
.contact-flex {
flex-direction: column;
gap: 2rem;
}
.contact-photo-col, .contact-form-col {
max-width: 100%;
min-width: 0;
width: 100%;
}
.contact-form-col {
padding: 2rem 1rem;
}
}
#particles-js {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: 100%;
height: 100%;
z-index: 0;
}
#backToTop {
position: fixed;
right: 2rem;
bottom: 2rem;
width: 54px;
height: 54px;
border-radius: var(--radius-round);
background: linear-gradient(135deg, var(--color-gold), var(--color-yellow-bg));
color: var(--color-dark-blue);
border: none;
box-shadow: 0 4px 24px var(--color-black-18);
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 1000;
opacity: 0.92;
transition: background 0.2s, color 0.2s, opacity 0.2s;
}
#backToTop:hover {
background: var(--color-gold);
color: var(--color-dark-blue);
opacity: 1;
}
.faq-section {
background: linear-gradient(120deg, #232b3e 80%, var(--color-yellow-bg)22 100%);
padding: 4rem 0 2rem 0;
}
.faq-accordion {
max-width: 700px;
margin: 0 auto;
}
.faq-item {
background: var(--color-dark-grey);
border-radius: var(--radius-md);
margin-bottom: 1.2rem;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
overflow: hidden;
}
.faq-question {
width: 100%;
background: none;
border: none;
color: var(--color-gold);
font-family: var(--font-title);
font-size: 1rem;
font-weight: bold;
padding: 1.2rem 2.5rem 1.2rem 1.5rem;
min-height: 56px;
text-align: left;
cursor: pointer;
position: relative;
transition: background 0.2s;
display: flex;
align-items: center;
}
.faq-question::after {
content: '\25BC';
position: absolute;
right: 1.5rem;
top: 50%;
transform: translateY(-50%) rotate(0deg);
font-size: 0.95rem;
color: var(--color-gold);
transition: transform 0.3s;
}
.faq-question[aria-expanded="true"]::after {
transform: translateY(-50%) rotate(180deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
background: var(--color-white-04);
color: var(--color-light);
font-size: 0.92rem;
padding: 0 1.5rem;
transition: max-height 0.4s cubic-bezier(.4,2,.3,1), padding 0.3s;
}
.faq-question[aria-expanded="true"] + .faq-answer {
max-height: 200px;
padding: 1rem 1.5rem 1.5rem 1.5rem;
}
/* Switch dark/light */
.theme-switch {
position: fixed;
top: 1.5rem;
right: 1.5rem;
z-index: 2000;
background: var(--color-dark-grey);
border-radius: 30px;
padding: 0.4rem 1.2rem;
display: flex;
align-items: center;
gap: 0.7rem;
box-shadow: 0 2px 12px rgba(0,0,0,0.10);
cursor: pointer;
color: var(--color-gold);
font-weight: bold;
font-size: 0.95rem;
border: 2px solid var(--color-gold);
transition: background 0.2s, color 0.2s;
}
.theme-switch input {
margin-left: 0.5rem;
}
body.light-theme {
background: #f7f7f7;
color: #222;
}
body.light-theme .contact-photo-col, body.light-theme .contact-form-col, body.light-theme .faq-item {
background: #fff;
color: #222;
}
body.light-theme .offre {
background: #fff;
color: #222;
}
body.light-theme h1, body.light-theme h2, body.light-theme h3, body.light-theme h4, body.light-theme h5, body.light-theme h6 {
color: var(--color-orange);
}
body.light-theme .btn-submit {
background: linear-gradient(90deg, var(--color-orange), var(--color-gold));
color: #fff;
}
body.light-theme .btn-submit:hover {
background: var(--color-gold);
color: #222;
}
body.light-theme .faq-question {
color: var(--color-orange);
}
body.light-theme .faq-answer {
background: #f7f7f7;
color: #222;
}
body.light-theme .avis-card {
background: #fff;
color: #222;
}
body.light-theme .avis-stars {
color: var(--color-orange);
}
.programme-centered {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.programme-centered .section-title {
text-align: center;
}
.programme-centered .programme-cards {
justify-content: center;
align-items: stretch;
width: 100%;
}
@media (max-width: 900px) {
.programme-centered .programme-cards {
flex-direction: column;
align-items: center;
}
}
.decouverte-section {
background: #fffbe6;
padding: 4rem 0 3rem 0;
box-shadow: 0 4px 32px rgba(212,175,55,0.04);
}
.decouverte-content {
max-width: 1100px;
margin: 0 auto;
padding: 0 1.5rem;
}
.decouverte-title {
text-align: center;
font-size: 1.95rem;
margin-bottom: 2.2rem;
color: var(--color-dark-blue);
font-family: var(--font-title);
font-weight: 800;
letter-spacing: 1px;
}
.decouverte-flex {
display: flex;
gap: 3.5rem;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.decouverte-video-wrapper {
flex: 2 1 900px;
min-width: 340px;
display: flex;
justify-content: center;
align-items: center;
}
.decouverte-video-wrapper video {
width: 100%;
max-width: 1100px;
min-height: 400px;
aspect-ratio: 16/9;
border-radius: 28px;
box-shadow: 0 8px 32px rgba(26,35,126,0.13);
background: #000;
border: 3px solid var(--color-gold);
}
.decouverte-info {
flex: 1 1 420px;
min-width: 260px;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.7rem;
text-align: center;
justify-content: center;
}
.decouverte-date {
font-size: 1.05rem;
color: var(--color-gold);
font-weight: bold;
margin-bottom: 0.2rem;
display: flex;
align-items: center;
gap: 0.5em;
justify-content: center;
width: 100%;
}
.decouverte-date i {
color: var(--color-orange);
font-size: 1em;
}
.decouverte-info .decouverte-text {
color: var(--color-dark-blue);
font-size: 0.92rem;
margin-bottom: 0.5rem;
line-height: 1.7;
font-family: var(--font-text);
}
.decouverte-info .decouverte-btn {
margin: 1.5rem auto 0.7rem auto;
background: var(--gradient-gold-yellow);
color: var(--color-text-primary);
font-weight: bold;
padding: 20px 48px;
border: none;
border-radius: 30px;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s, box-shadow 0.2s;
box-shadow: 0 2px 8px rgba(26,35,126,0.10);
text-decoration: none;
display: block;
}
.decouverte-info .decouverte-btn:hover {
background: var(--gradient-gold-yellow-reverse);
box-shadow: 0 4px 16px rgba(26,35,126,0.18);
}
.decouverte-temoignage {
background: var(--color-soft-white);
color: var(--color-dark-blue);
border-left: 4px solid var(--color-gold);
padding: 1em 1.5em;
border-radius: var(--radius-md);
font-style: italic;
font-size: 0.92rem;
margin-top: 0.7rem;
box-shadow: 0 2px 8px rgba(212,175,55,0.07);
max-width: 350px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 1200px) {
.decouverte-video-wrapper video {
max-width: 90vw;
width: 100%;
height: auto;
aspect-ratio: 16/9;
}
}
@media (max-width: 900px) {
.decouverte-flex {
flex-direction: column;
gap: 2.2rem;
}
.decouverte-video-wrapper video {
max-width: 90vw;
width: 100%;
height: auto;
aspect-ratio: 16/9;
}
}
@media (max-width: 600px) {
.decouverte-section {
padding: 2.2rem 0 1.5rem 0;
}
.decouverte-title {
font-size: 1.1rem;
margin-bottom: 1.2rem;
}
.decouverte-video-wrapper video {
max-width: 90vw;
width: 100%;
height: auto;
border-radius: var(--radius-md);
aspect-ratio: 16/9;
}
.decouverte-temoignage {
font-size: 0.98rem;
padding: 0.7em 0.7em;
}
}
.decouverte-timeline-wrapper {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 2.5rem;
margin: 2.5rem 0 2rem 0;
flex-wrap: wrap;
}
.decouverte-timeline {
display: flex;
align-items: center;
gap: 2.2rem;
background: var(--color-white-04);
border-radius: 16px;
padding: 1.2rem 2rem;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.timeline-step {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
transition: transform 0.18s, box-shadow 0.18s;
position: relative;
}
.timeline-step:hover, .timeline-step:focus {
transform: translateY(-6px) scale(1.08);
box-shadow: 0 4px 18px rgba(212,175,55,0.13);
}
.timeline-icon {
background: linear-gradient(135deg, var(--color-gold) 60%, var(--color-yellow-bg) 100%);
color: var(--color-dark-blue);
border-radius: var(--radius-round);
width: 54px;
height: 54px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.7rem;
margin-bottom: 0.5rem;
box-shadow: 0 2px 8px rgba(212,175,55,0.10);
border: 2px solid var(--color-gold);
transition: box-shadow 0.18s, border 0.18s;
}
.timeline-step:hover .timeline-icon {
box-shadow: 0 0 0 4px rgba(212,175,55,0.18);
border: 2px solid var(--color-yellow-bg);
}
.timeline-label {
color: var(--color-gold);
font-weight: bold;
font-size: 0.92rem;
text-align: center;
}
.timeline-video-preview {
min-width: 260px;
max-width: 340px;
width: 100%;
aspect-ratio: 16/9;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 24px rgba(0,0,0,0.13);
background: #181e2a;
display: flex;
align-items: center;
justify-content: center;
}
#timelineVideo {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 900px) {
.decouverte-timeline-wrapper {
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.timeline-video-preview {
min-width: 180px;
max-width: 98vw;
aspect-ratio: 16/9;
}
}
@media (max-width: 600px) {
.decouverte-timeline {
gap: 1.1rem;
padding: 0.7rem 0.2rem;
}
.timeline-icon {
width: 48px;
height: 48px;
font-size: 0.9rem;
display: flex;
align-items: center;
justify-content: center;
}
.timeline-label {
font-size: 0.95rem;
}
.timeline-video-preview {
min-width: 120px;
border-radius: var(--radius-sm);
}
}
.decouverte-gallery-btn {
margin-top: 1.2rem;
background: linear-gradient(90deg, var(--color-gold), var(--color-yellow-bg));
color: var(--color-dark-blue);
border: none;
border-radius: var(--radius-3xl);
padding: 0.85rem 2.2rem;
font-family: var(--font-title);
font-weight: bold;
font-size: 0.92rem;
cursor: pointer;
box-shadow: 0 2px 12px rgba(0,0,0,0.10);
letter-spacing: 1px;
transition: background 0.2s, color 0.2s, box-shadow 0.2s;
text-decoration: none;
display: inline-block;
}
.decouverte-gallery-btn:hover {
background: var(--color-gold);
color: var(--color-dark-blue);
box-shadow: 0 4px 24px rgba(255,199,44,0.18);
}
.badge-decouverte {
position: absolute;
top: 18px;
right: 18px;
background: var(--gradient-gold-yellow);
color: var(--color-text-primary);
font-weight: bold;
padding: 8px 18px;
border-radius: 30px;
font-size: 0.95rem;
box-shadow: 0 2px 8px rgba(26,35,126,0.10);
text-decoration: none;
transition: transform 0.2s, box-shadow 0.2s;
z-index: 2;
display: inline-block;
display: flex;
align-items: center;
gap: 0.5em;
}
.badge-decouverte i {
margin-right: 0.3em;
color: #ffb300;
font-size: 1.1em;
}
.badge-decouverte:hover {
transform: scale(1.07) translateY(-2px);
box-shadow: 0 4px 16px rgba(26,35,126,0.18);
background: var(--gradient-gold-yellow-reverse);
}
#btn-journee-decouverte {
position: fixed;
bottom: 32px;
right: 32px;
z-index: 1000;
background: var(--gradient-gold-yellow);
color: var(--color-text-primary);
font-weight: bold;
border: none;
border-radius: 30px;
padding: 16px 28px;
font-size: 0.95rem;
box-shadow: 0 4px 24px rgba(26,35,126,0.18);
cursor: pointer;
display: flex;
align-items: center;
gap: 0.7em;
transition: transform 0.2s, box-shadow 0.2s;
}
#btn-journee-decouverte:hover {
transform: scale(1.07) translateY(-2px);
box-shadow: 0 8px 32px rgba(26,35,126,0.25);
background: var(--gradient-gold-yellow-reverse);
}
#btn-journee-decouverte i {
color: #ffb300;
font-size: 1.2em;
}
.popup-journee {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(33, 42, 62, 0.75);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
}
.popup-content {
background: #fffbe6;
color: var(--color-text-primary);
border-radius: 18px;
padding: 2.5rem 2rem 2rem 2rem;
max-width: 400px;
width: 90vw;
box-shadow: 0 8px 32px rgba(26,35,126,0.18);
position: relative;
text-align: center;
animation: popupIn 0.3s;
}
@keyframes popupIn {
from { transform: scale(0.8); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.popup-close {
position: absolute;
top: 18px;
right: 18px;
background: none;
border: none;
font-size: 2rem;
color: var(--color-text-primary);
cursor: pointer;
transition: color 0.2s;
}
.popup-close:hover {
color: #ffb300;
}
.popup-content h2 {
margin-bottom: 1rem;
font-size: 1.3rem;
color: var(--color-text-primary);
display: flex;
align-items: center;
gap: 0.5em;
justify-content: center;
}
.popup-content .decouverte-btn {
margin-top: 1.5rem;
}
@media (max-width: 600px) {
#btn-journee-decouverte {
bottom: 16px;
right: 16px;
padding: 12px 18px;
font-size: 1rem;
}
.popup-content {
padding: 1.2rem 0.5rem 1.2rem 0.5rem;
}
}
.scroll-down-indicator {
position: absolute;
left: 50%;
bottom: 32px;
transform: translateX(-50%);
font-size: 2.1rem;
color: #ffd600;
animation: bounceDown 1.5s infinite cubic-bezier(.4,1.6,.4,1);
z-index: 10;
cursor: pointer;
opacity: 0.85;
}
@keyframes bounceDown {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(18px); }
}
.decouverte-flex {
display: flex;
gap: 2.5rem;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.decouverte-video-wrapper {
flex: 1 1 340px;
min-width: 260px;
display: flex;
justify-content: center;
}
.decouverte-video-wrapper video {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 18px;
box-shadow: 0 8px 32px rgba(26,35,126,0.15);
background: #000;
}
.decouverte-info {
flex: 1 1 320px;
min-width: 260px;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.2rem;
}
.decouverte-title {
text-align: left;
font-size: 1.5rem;
margin-bottom: 1.5rem;
color: var(--color-text-primary);
}
.decouverte-date {
font-size: 0.98rem;
color: #ffb300;
font-weight: bold;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5em;
}
.decouverte-date i {
color: #ffd600;
font-size: 1.2em;
}
.decouverte-info .decouverte-text {
color: var(--color-dark-blue);
font-size: 0.92rem;
margin-bottom: 0.5rem;
}
.decouverte-info .decouverte-btn {
margin: 1.2rem 0 0.5rem 0;
}
.decouverte-temoignage {
background: var(--color-soft-white);
color: var(--color-text-primary);
border-left: 4px solid #ffd600;
padding: 0.8em 1.2em;
border-radius: var(--radius-sm);
font-style: italic;
font-size: 1rem;
margin-top: 0.7rem;
}
@media (max-width: 900px) {
.decouverte-flex {
flex-direction: column;
gap: 1.5rem;
}
.decouverte-title {
text-align: center;
}
.decouverte-info {
align-items: center;
text-align: center;
}
}
button, .offre-btn, .btn-submit {
transition: background 0.3s, color 0.2s, box-shadow 0.2s, transform 0.18s;
}
button:active, .offre-btn:active, .btn-submit:active {
transform: scale(0.97);
}
button:focus, .offre-btn:focus, .btn-submit:focus, a:focus {
outline: 2px solid #ffd600;
outline-offset: 2px;
box-shadow: 0 0 0 3px rgba(255,214,0,0.18);
}
html {
scroll-behavior: smooth;
}
.about-section {
background: #fffbe6;
padding: 6rem 0 5rem 0;
position: relative;
overflow: hidden;
}
.about-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: row;
align-items: flex-end;
gap: 4.5rem;
justify-content: center;
position: relative;
z-index: 2;
}
.about-text.glass-bg {
flex: 2 1 420px;
min-width: 260px;
background: var(--color-white-85);
box-shadow: 0 8px 32px rgba(212,175,55,0.09);
border-radius: 28px 48px 18px 38px/38px 18px 48px 28px;
padding: 3.2rem 2.7rem 2.7rem 3.5rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
justify-content: center;
position: relative;
left: -40px;
z-index: 2;
}
.about-title {
color: var(--color-gold);
font-family: var(--font-title);
font-size: 1.95rem;
font-weight: 800;
margin-bottom: 1.2rem;
text-align: left;
letter-spacing: 1px;
}
.about-photo-wrapper {
flex: 1 1 340px;
min-width: 220px;
display: flex;
align-items: flex-end;
justify-content: flex-end;
position: relative;
right: -40px;
z-index: 1;
}
.about-photo {
width: 480px;
height: 480px;
border-radius: 38% 62% 60% 40%/60% 38% 62% 40%;
object-fit: cover;
border: 6px solid var(--color-gold);
box-shadow: 0 8px 32px var(--color-dark-blue-13);
background: #fff;
display: block;
transform: rotate(3deg) scale(1.04);
}
.about-text.glass-bg {
background: var(--color-dark-blue-82);
color: #fff;
}
@media (max-width: 1100px) {
.about-photo {
width: 280px;
height: 280px;
}
}
@media (max-width: 600px) {
.about-photo {
width: 140px;
height: 140px;
}
}
@media (max-width: 900px) {
.about-content {
flex-direction: column-reverse;
align-items: center;
gap: 2.2rem;
padding: 0 1vw;
}
.about-photo-wrapper {
right: 0;
justify-content: center;
}
.about-text.glass-bg {
left: 0;
padding: 1.2rem 0.7rem;
align-items: center;
text-align: center;
}
.about-title {
text-align: center;
}
}
@media (max-width: 600px) {
.about-photo {
width: 120px;
height: 120px;
}
.about-text.glass-bg {
padding: 0.7rem 0.2rem;
}
}
.contact-presentation {
font-size: 0.96rem;
color: var(--color-text-primary);
margin: 0.7rem 0 0.7rem 0;
line-height: 1.5;
font-family: var(--font-text);
text-align: left;
max-width: 420px;
width: 100%;
background: #fffbe6;
border-radius: var(--radius-md);
padding: 1.1em 1.5em;
box-shadow: 0 2px 8px rgba(212,175,55,0.07);
display: block;
}
@media (max-width: 900px) {
.contact-presentation {
text-align: center;
max-width: 100%;
padding: 1em 0.5em;
}
}
.contact-apropos {
background: linear-gradient(90deg, #fffbe6 80%, #ffd600 100%);
color: var(--color-text-primary);
border-radius: 18px;
padding: 0.7em 1.2em;
margin: 0.7em 0 1.1em 0;
font-size: 0.92rem;
font-family: var(--font-text);
box-shadow: 0 2px 8px rgba(212,175,55,0.07);
text-align: center;
font-weight: 500;
display: block;
}
.contact-apropos strong {
color: var(--color-gold);
font-weight: 700;
}
.programme-card-portrait {
background: #fff;
border-radius: 22px;
box-shadow: 0 8px 32px rgba(26,35,126,0.10), 0 2px 8px rgba(212,175,55,0.07);
padding: 2.2rem 1.5rem 1.5rem 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.1rem;
min-width: 220px;
max-width: 320px;
margin: 0 auto;
transition: box-shadow 0.25s, transform 0.18s;
animation: fadeInCard 0.7s cubic-bezier(.4,1.6,.4,1);
}
@keyframes fadeInCard {
from { opacity: 0; transform: translateY(30px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.programme-card-portrait .programme-photo {
margin-bottom: 0.5rem;
box-shadow: 0 2px 8px rgba(26,35,126,0.10);
}
.programme-card-portrait h3 {
color: var(--color-dark-blue);
font-size: 1.25rem;
margin-bottom: 0.2rem;
margin-top: 0;
}
.programme-card-portrait .programme-apropos {
background: #fffbe6;
border-radius: var(--radius-sm);
padding: 0.5em 1em;
font-size: 0.85rem;
color: var(--color-text-primary);
box-shadow: none;
margin-top: 0.1em;
}
@media (max-width: 900px) {
.programme-card-portrait {
max-width: 100%;
padding: 1.2rem 0.5rem 1.2rem 0.5rem;
}
}
.programme-linkedin {
display: inline-flex;
align-items: center;
gap: 0.5em;
margin-top: 0.7em;
color: #0a66c2;
font-weight: 600;
font-size: 1.05rem;
text-decoration: none;
background: #f4f8fc;
border-radius: 18px;
padding: 0.4em 1em;
transition: background 0.2s, color 0.2s, box-shadow 0.2s;
box-shadow: 0 1px 4px rgba(10,102,194,0.07);
}
.programme-linkedin i {
font-size: 1.2em;
}
.programme-linkedin:hover {
background: #eaf3fb;
color: #004182;
box-shadow: 0 2px 8px rgba(10,102,194,0.13);
}
/* --- Découverte Hero Section --- */
.decouverte-header {
min-height: 100vh;
height: 100vh;
position: relative;
display: flex;
/* au lieu de center / center : */
align-items: flex-start; /* en haut */
justify-content: flex-end; /* à droite */
background: none;
padding: 3rem 3rem 0 3rem; /* petit espace par rapport aux bords */
}
.decouverte-header .header-overlay {
position: absolute;
inset: 0;
background: url('../Assets/img/finalPhoto.jpg') no-repeat ;
background-size: 100%;
background-position: center center;
opacity: 0.85;
z-index: 0;
}
.decouverte-hero {
position: relative;
z-index: 2;
display: flex;
align-items: flex-start;
justify-content: flex-end;
width: 65%;
padding: 0;
min-height: auto;
margin: 0; /* plus de centrage auto */
}
.decouverte-hero-content {
display: flex;
flex-direction: column;
align-items: flex-end; /* contenu aligné à droite */
gap: 3rem;
width: 100%;
}
.decouverte-hero-text {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
/* Titre principal hero */
.decouverte-hero-title {
font-family: var(--font-title);
font-size: 3.5rem;
font-weight: 900;
margin-bottom: 2rem;
line-height: 1.1;
color: var(--color-dark-blue);
text-shadow: 0 4px 20px var(--color-black-40);
letter-spacing: -0.02em;
text-align: center;
}
.hero-main-message {
text-align: right; /* texte aligné à droite */
font-family: var(--font-text);
font-size: 1.2rem;
font-weight: 500;
line-height: 1.7;
color: var(--color-dark-blue);
text-align: center;
background: var(--color-card);
padding: 1rem 1rem;
border-radius: var(--radius-3xl);
box-shadow:
0 20px 60px var(--color-black-15),
0 0 0 1px var(--color-gold-10);
border: 2px solid var(--color-gold-20);
margin: 0;
position: relative;
transition: var(--transition-default);
}
.hero-main-message:hover {
transform: translateY(-3px);
box-shadow:
0 25px 70px var(--color-black-20),
0 0 0 2px var(--color-gold-30);
}
.hero-emphasis {
color: var(--color-gold);
font-weight: 700;
position: relative;
}
.hero-emphasis::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, var(--color-gold), transparent);
border-radius: 2px;
}
.hero-benefits {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
max-width: 600px;
}
.hero-benefit-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.5rem;
background: var(--color-gold-10);
border-radius: var(--radius-lg);
border: 2px solid var(--color-gold-30);
backdrop-filter: blur(5px);
transition: var(--transition-default);
}
.hero-benefit-item:hover {
background: var(--color-gold-20);
border-color: var(--color-gold);
transform: translateX(10px);
}
.hero-benefit-icon {
width: 20px;
height: 20px;
color: var(--color-gold);
font-size: 1.2rem;
flex-shrink: 0;
}
.hero-benefit-item span {
font-family: var(--font-text);
font-size: 1.1rem;
font-weight: 600;
color: var(--color-dark-blue);
}
/* Container pour la description hero */
.decouverte-hero-desc {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2rem;
max-width: 1200px;
margin-bottom: 0;
padding-top: 0;
}
.decouverte-hero-btn {
display: block;
margin: 2rem auto 0 auto;
}
.decouverte-hero-logo {
display: flex;
justify-content: flex-start;
align-items: center;
width: 75%;
padding-left: 3rem;
}
.decouverte-hero-logo .logoCercleVertueux {
max-width: 250px;
height: auto;
filter: drop-shadow(0 10px 30px var(--color-black-20));
transition: var(--transition-default);
}
.decouverte-hero-logo .logoCercleVertueux:hover {
transform: scale(1.05);
filter: drop-shadow(0 15px 40px var(--color-gold-30));
}
.decouverte-hero-logo .logo {
background: linear-gradient(135deg, var(--color-black-80) 0%, var(--color-dark-blue-90) 100%);
border: 4px solid var(--color-gold);
color: var(--color-gold);
font-size: 2.8rem;
padding: 3.5rem 3rem;
min-width: 300px;
border-radius: var(--radius-3xl);
box-shadow: 0 15px 50px var(--color-black-40);
text-align: center;
backdrop-filter: blur(15px);
position: relative;
overflow: hidden;
}
.decouverte-hero-logo .logo::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, var(--color-gold), var(--color-orange), var(--color-gold));
border-radius: var(--radius-3xl);
z-index: -1;
animation: borderGlow 3s ease-in-out infinite;
}
@keyframes borderGlow {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; }
}
/* Actions du hero */
.decouverte-hero-actions {
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: flex-start;
margin-top: 1rem;
}
.hero-cta-main {
font-size: 1.1rem !important;
padding: 1.4rem 3rem !important;
box-shadow: 0 12px 40px var(--color-gold-40) !important;
}
.hero-cta-secondary {
color: var(--color-white-90) !important;
font-size: 0.95rem !important;
text-shadow: 0 2px 8px var(--color-black-30);
}
.hero-cta-secondary:hover {
color: var(--color-gold) !important;
text-shadow: 0 2px 12px rgba(212, 175, 55, 0.6);
}
@media (max-width: 768px) {
.decouverte-hero-actions {
align-items: center;
text-align: center;
}
.hero-cta-main {
font-size: 0.95rem !important;
padding: 1.2rem 2.5rem !important;
}
/* Responsive pour le titre hero */
.decouverte-hero-title {
font-size: 2.5rem;
line-height: 1.2;
margin-bottom: 1.5rem;
}
.decouverte-hero-desc {
gap: 1.5rem;
max-width: 100%;
padding: 0 1rem;
}
.hero-main-message {
font-size: 1.1rem;
padding: 1.5rem 1.8rem;
border-radius: var(--radius-lg);
}
.hero-benefits {
max-width: 100%;
}
.hero-benefit-item {
padding: 0.8rem 1.2rem;
border-radius: var(--radius-md);
}
.hero-benefit-item:hover {
transform: translateX(5px);
}
.hero-benefit-item span {
font-size: 1rem;
}
}
.decouverte-hero-logo .logo-icon {
border: 2px solid var(--color-gold);
color: var(--color-gold);
}
.decouverte-hero-logo .logo-subtext {
color: var(--color-gold);
}
/* Responsive amélioré pour tablettes */
@media (max-width: 1024px) and (min-width: 769px) {
.decouverte-hero {
gap: 2.5rem;
padding: 0 2vw;
margin-top: 80px;
}
.decouverte-hero-title {
font-size: 3rem;
}
.decouverte-hero-desc {
font-size: 1.1rem;
padding: 1.8rem 2rem;
}
}
/* Mobile et petites tablettes */
@media (max-width: 900px) {
.decouverte-header {
min-height: 100vh;
height: auto;
}
.decouverte-hero {
flex-direction: column-reverse;
align-items: center;
gap: 2rem;
min-height: 70vh;
padding: 0 clamp(1rem, 4vw, 2rem);
margin-top: 60px;
}
.decouverte-hero-logo {
margin-top: 0;
align-items: center;
justify-content: center;
padding-left: 0;
}
.decouverte-hero-btn {
margin: 2rem auto 0 auto;
}
.decouverte-hero-logo .logo {
font-size: clamp(1.5rem, 4vw, 2rem);
padding: clamp(1.5rem, 4vw, 2rem) clamp(1rem, 3vw, 1.2rem);
min-width: clamp(130px, 35vw, 150px);
}
.decouverte-hero-text {
margin-top: 0;
text-align: center;
}
.decouverte-hero-title {
font-size: clamp(2.2rem, 7vw, 2.8rem);
}
.decouverte-hero-desc {
font-size: clamp(1rem, 3vw, 1.1rem);
padding: clamp(1.2rem, 4vw, 1.8rem);
}
}
/* Très petits écrans */
@media (max-width: 600px) {
.decouverte-header {
min-height: 85vh;
height: auto;
}
.decouverte-hero {
padding: 0 1rem;
gap: 1.5rem;
margin-top: 50px;
}
.decouverte-hero-title {
font-size: clamp(1.8rem, 6vw, 2.2rem);
line-height: 1.2;
margin-bottom: 1rem;
}
.decouverte-hero-desc {
font-size: clamp(0.9rem, 3.5vw, 1rem);
line-height: 1.5;
margin-bottom: 1.5rem;
padding: clamp(1rem, 3vw, 1.2rem);
border-radius: var(--radius-md);
}
.decouverte-hero-logo .logo {
font-size: clamp(0.9rem, 3vw, 1.2rem);
padding: clamp(1rem, 3vw, 1.2rem) clamp(0.8rem, 2.5vw, 1rem);
min-width: clamp(100px, 30vw, 120px);
}
}
/* Optimisations mobile pour les sections */
.section-mastermind {
padding: 2rem 0 3rem 0;
}
.mastermind-modern-title {
font-size: 1.5rem;
line-height: 1.3;
margin-bottom: 1rem;
}
.mastermind-modern-lead {
font-size: 2rem;
line-height: 1.6;
}
.mastermind-modern-card {
padding: 1.5rem 1rem;
margin-bottom: 1rem;
}
.mastermind-modern-card h3 {
font-size: 1.1rem;
margin-bottom: 0.8rem;
}
.mastermind-modern-card p {
font-size: 0.95rem;
line-height: 1.5;
}
/* Optimisations pour la section événement */
.section-event-mastermind {
padding: 2rem 0;
}
.event-mastermind-title {
font-size: 1.3rem;
margin-bottom: 0.5rem;
}
.event-mastermind-subtitle {
font-size: 0.9rem;
padding: 0.3em 0.8em;
}
.event-mastermind-info {
padding: 1rem 0.8rem;
font-size: 2rem;
margin-bottom: 0.8rem;
}
.event-mastermind-icon {
font-size: 1.2rem;
margin-right: 0.8rem;
}
.event-mastermind-link {
font-size: 1rem;
padding: 0.8em 1.2em;
margin-top: 1rem;
width: 100%;
text-align: center;
}
/* Optimisations pour les témoignages */
.section-tester-modern {
padding: 2rem 0;
}
.tester-modern-title {
font-size: 1.15rem;
line-height: 1.3;
margin-bottom: 1rem;
}
.tester-modern-lead {
font-size: 1rem;
line-height: 1.5;
margin-bottom: 1.5rem;
}
.tester-modern-btn {
font-size: 1rem;
padding: 0.8em 1.5em;
width: 100%;
max-width: 280px;
}
.tester-modern-testimonial {
padding: 1.2rem 0.8rem;
margin-bottom: 1rem;
}
.tester-modern-photo {
width: 60px;
height: 60px;
margin-bottom: 0.8rem;
}
.tester-modern-text {
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 0.8rem;
}
.tester-modern-author {
font-size: 0.85rem;
}
.tester-modern-job {
font-size: 0.8rem;
}
/* Optimisations générales */
.section-title {
font-size: 1.5rem;
margin: 1.5rem 0;
}
/* Amélioration de l'espacement sur mobile */
.mastermind-modern-flex,
.event-mastermind-2col,
.tester-modern-2col {
gap: 1.5rem;
padding: 0 1rem;
}
/* Optimisation des images */
.event-mastermind-photo {
min-height: 140px;
max-height: 180px;
border-radius: var(--radius-md);
}
.mastermind-modern-video iframe {
min-height: 250px;
border-radius: var(--radius-md);
}
.section-mastermind {
position: relative;
overflow: hidden;
background: #fffbe6;
padding: 4rem 0 5rem 0;
z-index: 1;
}
.mastermind-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: row;
gap: 3.5rem;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding: 0 2vw;
position: relative;
z-index: 2;
}
.mastermind-video-card {
flex: 1 1 420px;
min-width: 320px;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(-3deg) translateY(-30px);
box-shadow: 0 12px 48px rgba(212,175,55,0.13), 0 2px 16px rgba(33,42,62,0.10);
background: #fff;
border-radius: 28px;
padding: 1.2rem 1.2rem 1.7rem 1.2rem;
margin-right: -40px;
}
.mastermind-video-card video {
width: 100%;
max-width: 420px;
border-radius: 18px;
box-shadow: 0 4px 24px var(--color-dark-blue-13);
background: #000;
}
.glass-bg {
background: rgba(255,255,255,0.75);
box-shadow: 0 8px 32px rgba(212,175,55,0.07);
border-radius: 22px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 2.5rem 2.2rem;
border: 1.5px solid rgba(212,175,55,0.13);
}
.mastermind-text.glass-bg {
flex: 2 1 480px;
min-width: 280px;
color: var(--color-text-primary);
font-size: 0.96rem;
font-family: var(--font-text);
display: flex;
flex-direction: column;
gap: 1.2rem;
justify-content: center;
background: rgba(255,255,255,0.75);
}
.mastermind-text h2 {
color: var(--color-gold);
font-family: var(--font-title);
font-size: 1.9rem;
margin-bottom: 1.2rem;
font-weight: 800;
}
.mastermind-text p {
margin-bottom: 0.7rem;
line-height: 1.7;
}
.gold {
color: var(--color-gold);
font-weight: bold;
background: linear-gradient(90deg, #ffd600 60%, #fffbe6 100%);
border-radius: 6px;
padding: 0 0.2em;
}
@media (max-width: 900px) {
.mastermind-container {
flex-direction: column;
gap: 2.2rem;
padding: 0 1vw;
}
.mastermind-video-card {
margin-right: 0;
margin-bottom: 1.5rem;
transform: none;
padding: 0.7rem 0.7rem 1.2rem 0.7rem;
}
.glass-bg {
padding: 1.2rem 0.7rem;
}
}
@media (max-width: 600px) {
.glass-bg {
padding: 0.7rem 0.2rem;
}
}
.mastermind-wrap {
position: relative;
overflow: hidden;
max-width: 1100px;
margin: 0 auto;
}
.mastermind-video-float {
float: left;
width: 520px;
max-width: 60vw;
margin: 0 2rem 1.5rem 0;
shape-outside: ellipse(48% 48% at 50% 50%);
-webkit-shape-outside: ellipse(48% 48% at 50% 50%);
border-radius: 28px;
box-shadow: 0 12px 48px rgba(212,175,55,0.13), 0 2px 16px rgba(33,42,62,0.10);
background: #fff;
}
.mastermind-video-float video {
width: 100%;
display: block;
border-radius: 18px;
background: #000;
}
.mastermind-text.glass-bg {
overflow: visible;
min-height: 340px;
}
@media (max-width: 1200px) {
.mastermind-video-float {
width: 380px;
max-width: 90vw;
}
}
@media (max-width: 900px) {
.mastermind-video-float {
float: none;
width: 100%;
max-width: 100%;
margin: 0 0 1.5rem 0;
shape-outside: none;
border-radius: 18px;
}
.mastermind-wrap {
max-width: 100%;
padding: 0 0.5rem;
}
.mastermind-text.glass-bg {
min-height: unset;
}
}
/* --- Navbar --- */
.navbar {
width: 100%;
background: #fffbe6;
border-bottom: 1.5px solid var(--color-gold);
box-shadow: 0 2px 12px rgba(212,175,55,0.04);
position: sticky;
top: 0;
z-index: 100;
}
.navbar-container {
width: 100%;
max-width: 1600px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.7rem 4vw;
}
.navbar-logo {
display: flex;
align-items: center;
font-family: var(--font-title);
font-weight: 800;
font-size: 1.1rem;
color: var(--color-gold);
text-decoration: none;
letter-spacing: 2px;
gap: 0.7em;
}
.navbar-logo .logo-icon {
border: 2px solid var(--color-gold);
border-radius: var(--radius-round);
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
font-weight: normal;
color: var(--color-gold);
margin-right: 0.5em;
font-size: 1.1em;
}
/* Bouton hamburger */
.navbar-toggle {
display: none;
flex-direction: column;
justify-content: space-around;
width: 30px;
height: 30px;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
z-index: 101;
transition: var(--transition-default);
}
.hamburger-line {
width: 100%;
height: 3px;
background: var(--color-gold);
border-radius: 2px;
transition: var(--transition-default);
transform-origin: center;
}
.hamburger-line--open:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.hamburger-line--open:nth-child(2) {
opacity: 0;
}
.hamburger-line--open:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
.navbar-links {
display: flex;
align-items: center;
gap: 1.5em;
margin: 0;
padding: 0;
}
.navbar-link {
color: white;
font-family: var(--font-title);
font-weight: 700;
text-decoration: none;
font-size: 0.92rem;
padding: 0.5em 1em;
border-radius: var(--radius-xs);
transition: var(--transition-default);
}
.navbar-link:hover {
background: var(--color-gold);
color: var(--color-dark-blue);
transform: translateY(-2px);
}
.navbar-phone {
display: flex;
align-items: center;
gap: 0.5em;
color: white;
font-family: var(--font-title);
font-weight: 600;
text-decoration: none;
font-size: 0.9rem;
padding: 0.5em 1em;
border-radius: var(--radius-xs);
transition: var(--transition-default);
border: 2px solid transparent;
}
.navbar-phone:hover {
background: var(--color-gold-10);
border-color: var(--color-gold);
transform: translateY(-2px);
}
.navbar-contact-btn {
display: flex;
align-items: center;
gap: 0.5em;
background: var(--color-gold);
color: var(--color-dark-blue);
font-family: var(--font-title);
font-weight: 700;
font-size: 0.9rem;
padding: 0.7em 1.5em;
border: none;
border-radius: var(--radius-3xl);
cursor: pointer;
transition: var(--transition-default);
box-shadow: 0 4px 15px var(--color-gold-30);
}
.navbar-contact-btn:hover {
background: var(--color-dark-blue);
color: var(--color-gold);
transform: translateY(-3px);
box-shadow: 0 6px 20px var(--color-gold-40);
}
/* Responsive pour le menu hamburger */
@media (max-width: 1024px) {
/* Empêcher le scroll horizontal */
body {
overflow-x: hidden;
width: 100%;
}
html {
overflow-x: hidden;
width: 100%;
}
.navbar-toggle {
display: flex;
}
.navbar-links {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100vh;
background: rgba(255, 251, 230, 0.95);
backdrop-filter: blur(10px);
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2rem;
transform: translateX(100%);
transition: transform 0.3s ease;
z-index: 100;
margin: 0;
padding: 2rem;
box-sizing: border-box;
}
.navbar-links--open {
transform: translateX(0);
}
.navbar-link,
.navbar-phone,
.navbar-contact-btn {
opacity: 0;
transform: translateY(20px);
transition: var(--transition-default);
margin: 0.5rem 0;
}
.navbar-links--open .navbar-link,
.navbar-links--open .navbar-phone,
.navbar-links--open .navbar-contact-btn {
opacity: 1;
transform: translateY(0);
}
.navbar-links--open .navbar-link:nth-child(1) { transition-delay: 0.1s; }
.navbar-links--open .navbar-link:nth-child(2) { transition-delay: 0.2s; }
.navbar-links--open .navbar-link:nth-child(3) { transition-delay: 0.3s; }
.navbar-links--open .navbar-link:nth-child(4) { transition-delay: 0.4s; }
.navbar-links--open .navbar-phone { transition-delay: 0.5s; }
.navbar-links--open .navbar-contact-btn { transition-delay: 0.6s; }
.navbar-link {
font-size: 1.2rem;
padding: 1rem 2rem;
text-align: center;
border-radius: var(--radius-md);
min-width: 200px;
}
.navbar-phone {
font-size: 1.1rem;
padding: 1rem 2rem;
text-align: center;
border-radius: var(--radius-md);
min-width: 200px;
}
.navbar-contact-btn {
font-size: 1.1rem;
padding: 1rem 2rem;
border-radius: var(--radius-md);
min-width: 200px;
}
/* Animation du bouton hamburger */
.navbar-toggle:hover .hamburger-line {
background: #fff;
}
.navbar-toggle:focus {
outline: 2px solid var(--color-gold);
outline-offset: 2px;
border-radius: 4px;
}
}
/* Amélioration pour les très petits écrans */
@media (max-width: 480px) {
.navbar-container {
padding: 0.5rem 3vw;
}
.navbar-logo {
font-size: 1rem;
}
.navbar-links li a {
font-size: 1.1rem;
padding: 0.8rem 1.5rem;
min-height: 48px;
display: flex;
align-items: center;
}
.navbar-toggle {
width: 44px;
height: 44px;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.hamburger-line {
height: 2.5px;
width: 24px;
}
}
/* --- Home Header --- */
.home-header {
background: linear-gradient(120deg, #fffbe6 80%, #ffd600 100%);
padding: 5rem 0 4rem 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 70vh;
}
.home-header-content {
display: flex;
flex-direction: column;
align-items: center;
background: var(--color-white-85);
border-radius: 22px;
box-shadow: 0 8px 32px rgba(212,175,55,0.07);
padding: 3rem 2.5rem;
max-width: 420px;
width: 100%;
}
.home-photo {
width: 160px;
height: 160px;
border-radius: var(--radius-round);
object-fit: cover;
border: 5px solid var(--color-gold);
box-shadow: 0 4px 24px rgba(33,42,62,0.10);
margin-bottom: 1.5rem;
background: #fff;
}
.home-title {
font-family: var(--font-title);
color: var(--color-gold);
font-size: 1.9rem;
font-weight: 800;
margin-bottom: 0.5rem;
text-align: center;
}
.home-subtitle {
color: var(--color-dark-blue);
font-size: 0.98rem;
font-weight: 600;
margin-bottom: 1.2rem;
text-align: center;
}
.home-desc {
color: var(--color-text-primary);
font-size: 0.92rem;
text-align: center;
margin-bottom: 0;
}
@media (max-width: 600px) {
.home-header-content {
padding: 1.5rem 0.5rem;
}
.home-photo {
width: 90px;
height: 90px;
}
.home-title {
font-size: 1.1rem;
}
}
.home-header-flex {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 3.5rem;
max-width: 1100px;
margin: 0 auto;
padding: 3rem 2vw;
}
.home-photo-large {
width: 320px;
height: 320px;
border-radius: var(--radius-round);
object-fit: cover;
border: 7px solid var(--color-gold);
box-shadow: 0 8px 32px rgba(212,175,55,0.13);
background: #fff;
display: block;
}
.home-header-text {
flex: 1 1 320px;
min-width: 220px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
background: var(--color-white-85);
border-radius: 22px;
box-shadow: 0 8px 32px rgba(212,175,55,0.07);
padding: 2.5rem 2rem;
max-width: 420px;
}
.home-header-text .home-title {
text-align: left;
}
.home-header-text .home-subtitle {
text-align: left;
}
.home-header-text .home-desc {
text-align: left;
}
@media (max-width: 900px) {
.home-header-flex {
flex-direction: column;
gap: 2rem;
padding: 2rem 1vw;
}
.home-photo-large {
width: 160px;
height: 160px;
}
.home-header-text {
align-items: center;
text-align: center;
padding: 1.5rem 0.5rem;
}
.home-header-text .home-title,
.home-header-text .home-subtitle,
.home-header-text .home-desc {
text-align: center;
}
}
.dark-navbar {
background: #181c20;
border-bottom: 1.5px solid #222;
}
.dark-navbar .navbar-logo,
.dark-navbar .navbar-links li a {
color: #fff;
}
.dark-navbar .navbar-links li a:hover, .dark-navbar .navbar-links li a.active {
background: #fff;
color: #181c20;
}
.home-hero-split {
background: #181c20;
min-height: 90vh;
width: 100%;
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: space-between;
position: relative;
overflow: hidden;
}
.hero-content {
flex: 1 1 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 0 0 0 8vw;
z-index: 2;
min-width: 340px;
}
.hero-title {
color: #fff;
font-family: var(--font-title);
font-size: 3.2rem;
font-weight: 900;
line-height: 1.08;
margin-bottom: 1.5rem;
text-transform: uppercase;
}
.hero-title-em {
font-style: italic;
font-weight: 900;
color: var(--color-gold);
background: none;
}
.hero-subtitle {
color: #1a8cff;
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 2.2rem;
letter-spacing: 1px;
}
.hero-btn {
display: inline-block;
color: #fff;
border: 2px solid #fff;
background: transparent;
font-family: var(--font-title);
font-weight: 700;
font-size: 0.92rem;
padding: 1rem 2.2rem;
border-radius: var(--radius-xs);
text-decoration: none;
letter-spacing: 1px;
transition: background 0.2s, color 0.2s, border 0.2s, box-shadow 0.2s;
margin-top: 0.5rem;
box-shadow: 0 2px 12px rgba(33,42,62,0.10);
}
.hero-btn:hover {
background: #fff;
color: #181c20;
border-color: #fff;
box-shadow: 0 8px 32px rgba(212,175,55,0.07);
}
.hero-btn-arrow {
margin-left: 0.7em;
font-size: 1.2em;
vertical-align: middle;
}
.hero-photo-container {
flex: 1 1 50%;
display: flex;
align-items: center;
justify-content: flex-end;
position: relative;
overflow: hidden;
}
.hero-photo-large {
width: 100%;
max-width: 700px;
min-width: 340px;
height: 100vh;
object-fit: cover;
object-position: right center;
border-radius: 0 0 0 60%/100%;
box-shadow: -12px 0 48px var(--color-black-18);
background: #222;
display: block;
}
@media (max-width: 1100px) {
.hero-photo-large {
max-width: 480px;
min-width: 220px;
height: 70vh;
}
.hero-content {
padding-left: 3vw;
}
}
@media (max-width: 900px) {
.home-hero-split {
flex-direction: column-reverse;
min-height: 70vh;
}
.hero-photo-container {
justify-content: center;
width: 100%;
min-height: 220px;
}
.hero-photo-large {
width: 100vw;
max-width: 100vw;
min-width: 0;
height: 320px;
border-radius: 0 0 40% 40%/20% 20% 100% 100%;
object-position: center top;
}
.hero-content {
align-items: center;
text-align: center;
padding: 2rem 2vw 2.5rem 2vw;
}
}
@media (max-width: 600px) {
.hero-title {
font-size: 1.3rem;
}
.hero-photo-large {
height: 180px;
}
}
.inspire-section {
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
}
.inspire-img-wrapper {
position: relative;
width: 100vw;
min-height: 320px;
max-height: 420px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.inspire-img {
width: 100%;
min-height: 320px;
max-height: 420px;
object-fit: cover;
object-position: center;
filter: brightness(0.65) saturate(1.1);
display: block;
}
.inspire-quote {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-family: var(--font-title);
font-size: 1.9rem;
font-weight: 800;
text-align: center;
text-shadow: 0 4px 32px rgba(0,0,0,0.45), 0 1px 0 #222;
letter-spacing: 1px;
padding: 1.2rem 2.5rem;
background: rgba(33,42,62,0.32);
border-radius: 22px;
max-width: 90vw;
}
@media (max-width: 900px) {
.inspire-img-wrapper, .inspire-img {
min-height: 180px;
max-height: 220px;
}
.inspire-quote {
font-size: 1rem;
padding: 0.7rem 1rem;
}
}
.services-section {
background: linear-gradient(120deg, #fffbe6 60%, var(--color-light) 100%);
padding: 5rem 0 4rem 0;
text-align: center;
}
.services-title {
text-align: center;
font-family: var(--font-title);
color: var(--color-gold);
font-size: 2.7rem;
font-weight: 900;
margin-bottom: 3.2rem;
letter-spacing: 1.5px;
}
.services-cards {
display: flex;
flex-direction: row;
gap: 2.5rem;
justify-content: center;
align-items: stretch;
max-width: 1200px;
margin: 0 auto;
flex-wrap: wrap;
}
.service-card {
background: rgba(255,255,255,0.82);
border-radius: 32px;
box-shadow: 0 8px 32px rgba(33,42,62,0.09);
padding: 3rem 2.2rem 2.5rem 2.2rem;
flex: 1 1 320px;
min-width: 260px;
max-width: 340px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 1.5rem;
border: 1.5px solid #ffe08244;
transition: box-shadow 0.2s, transform 0.18s, background 0.2s;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.service-card:hover {
box-shadow: 0 16px 48px rgba(212,175,55,0.15);
transform: translateY(-6px) scale(1.04);
background: var(--color-white-95);
}
.service-card h3 {
color: var(--color-gold);
font-size: 1.32rem;
font-family: var(--font-title);
font-weight: 900;
margin-bottom: 0.7rem;
text-align: center;
letter-spacing: 0.5px;
}
.service-card p {
color: var(--color-text-primary);
font-size: 0.96rem;
margin-bottom: 1.2rem;
flex-grow: 1;
text-align: center;
}
.service-link {
display: inline-block;
background: var(--gradient-gold-yellow);
color: var(--color-text-primary);
font-family: var(--font-title);
font-weight: 800;
font-size: 0.92rem;
padding: 1em 2.2em;
border-radius: 24px;
text-decoration: none;
box-shadow: 0 2px 8px rgba(212,175,55,0.07);
transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.18s;
border: none;
margin-top: 0.5rem;
letter-spacing: 1px;
width: 220px;
text-align: center;
}
.service-link:hover {
background: var(--gradient-gold-yellow-reverse);
color: var(--color-dark-blue);
box-shadow: 0 8px 32px rgba(212,175,55,0.13);
transform: translateY(-2px) scale(1.06);
}
@media (max-width: 900px) {
.services-cards {
flex-direction: column;
gap: 2rem;
align-items: center;
}
.service-card {
max-width: 100%;
width: 100%;
align-items: center;
text-align: center;
}
}
.navbar-img-logo {
height: 36px;
width: auto;
display: inline-block;
vertical-align: middle;
margin-right: 0.7em;
}
.hero-fade {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s cubic-bezier(.4,2,.3,1);
}
.hero-fade.visible {
opacity: 1;
transform: none;
}
.hero-photo-container {
position: relative;
}
.hero-photo-gradient {
display: none;
}
.hero-title, .hero-title-em, .hero-subtitle, .hero-btn {
text-shadow: none;
}
.inspire-quote.fade-in {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s cubic-bezier(.4,2,.3,1);
}
.inspire-quote.fade-in.visible {
opacity: 1;
transform: none;
}
.inspire-img-wrapper {
will-change: transform;
}
.service-card .service-icon {
font-size: 1.95rem;
color: var(--color-gold);
margin-bottom: 1.1rem;
}
.service-link-arrow {
margin-left: 0.5em;
transition: transform 0.3s;
}
.service-link:hover .service-link-arrow {
transform: translateX(6px);
}
.service-card:hover {
box-shadow: 0 16px 48px rgba(212,175,55,0.22), 0 2px 16px rgba(33,42,62,0.10);
}
.contact-main {
background: #fffbe6;
min-height: 100vh;
padding: 0;
}
.contact-section {
padding: 5rem 0 4rem 0;
background: #fffbe6;
}
.contact-container {
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: row;
gap: 3.5rem;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
}
.contact-form-col, .contact-info-col {
background: #fff;
border-radius: 22px;
box-shadow: 0 8px 32px rgba(212,175,55,0.07);
padding: 2.7rem 2.2rem;
min-width: 320px;
max-width: 420px;
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
}
.contact-title {
color: var(--color-gold);
font-family: var(--font-title);
font-size: 2rem;
font-weight: 800;
margin-bottom: 1.2rem;
}
.contact-form {
width: 100%;
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.form-group {
width: 100%;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.contact-form input, .contact-form textarea {
width: 100%;
padding: 1rem 1.2rem;
background: #fffbe6;
border: 1.5px solid #ffd600;
border-radius: var(--radius-xs);
color: var(--color-text-primary);
font-family: var(--font-text);
font-size: 0.92rem;
box-shadow: 0 0 0 0px rgba(212,175,55,0);
transition: border-color 0.3s, box-shadow 0.3s;
}
.contact-form input:focus, .contact-form textarea:focus {
outline: none;
border-color: var(--color-gold);
box-shadow: 0 0 0 3px rgba(212,175,55,0.13);
}
/* Définition .btn-submit #3 supprimée - voir définition principale ligne 656 */
.contact-info-title {
color: var(--color-gold);
font-family: var(--font-title);
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 1.2rem;
}
.contact-info-item {
display: flex;
align-items: center;
gap: 0.7em;
color: var(--color-text-primary);
font-size: 0.92rem;
margin-bottom: 1.1rem;
}
.contact-info-item i {
color: var(--color-gold);
font-size: 1.2em;
}
.contact-info-item a {
color: var(--color-gold);
text-decoration: underline;
}
@media (max-width: 900px) {
.contact-container {
flex-direction: column;
gap: 2rem;
align-items: center;
}
.contact-form-col, .contact-info-col {
max-width: 100%;
min-width: 0;
width: 100%;
align-items: center;
text-align: center;
}
.contact-info-item {
justify-content: center;
}
}
.contact-info-photo-wrapper {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 1.2rem;
width: 100%;
}
.contact-info-photo {
width: 260px;
height: 260px;
border-radius: var(--radius-round);
object-fit: cover;
object-position: center 35%;
border: 3px solid var(--color-gold);
box-shadow: 0 2px 12px rgba(212,175,55,0.13);
background: #fff;
transition: transform 0.25s, box-shadow 0.25s;
margin: 0 auto;
display: block;
}
.contact-info-photo:hover {
transform: scale(1.06);
box-shadow: 0 4px 24px rgba(212,175,55,0.18);
}
.interest-section {
background: var(--color-soft-white);
padding: 5rem 0 4rem 0;
text-align: center;
}
.interest-title {
color: var(--color-gold);
font-family: var(--font-title);
font-size: 2rem;
font-weight: 900;
margin-bottom: 1.5rem;
letter-spacing: 1px;
}
.interest-subtitle {
color: var(--color-text-primary);
font-size: 1.15rem;
font-family: var(--font-title);
font-weight: 600;
margin-bottom: 0;
letter-spacing: 0.5px;
}
@media (max-width: 600px) {
.interest-title {
font-size: 1.1rem;
}
.interest-subtitle {
font-size: 1rem;
}
}
.interest-block-section {
background: #fffbe6;
padding: 5rem 0 4rem 0;
display: flex;
justify-content: center;
align-items: center;
}
.interest-block {
background: #fff;
border-radius: 28px;
box-shadow: 0 8px 32px rgba(212,175,55,0.09);
padding: 3.2rem 2.5rem 2.7rem 2.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.7rem;
min-width: 320px;
max-width: 480px;
width: 100%;
}
.interest-badge {
display: inline-flex;
align-items: center;
background: var(--color-gold);
color: var(--color-dark-blue);
font-size: 0.95rem;
font-weight: bold;
border-radius: var(--radius-xl);
padding: 0.3em 1.2em 0.3em 1em;
margin-bottom: 0.7em;
letter-spacing: 1px;
box-shadow: 0 2px 8px rgba(212,175,55,0.07);
gap: 0.7em;
}
.interest-badge i {
color: var(--color-dark-blue);
font-size: 1.2em;
}
.interest-title {
color: var(--color-text-primary);
font-family: var(--font-title);
font-size: 2rem;
font-weight: 900;
margin-bottom: 0.5rem;
letter-spacing: 1px;
text-align: center;
}
.interest-subtitle {
color: var(--color-dark-grey);
font-size: 0.98rem;
font-family: var(--font-title);
font-weight: 600;
margin-bottom: 0.5rem;
letter-spacing: 0.5px;
text-align: center;
}
.interest-btn {
display: inline-block;
background: var(--gradient-gold-yellow);
color: var(--color-text-primary);
font-family: var(--font-title);
font-weight: 800;
font-size: 1rem;
padding: 1.1em 2.7em;
border-radius: 30px;
text-decoration: none;
box-shadow: 0 2px 12px rgba(212,175,55,0.13);
transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.18s;
border: none;
margin-top: 1.2rem;
letter-spacing: 1px;
}
.interest-btn:hover {
background: var(--gradient-gold-yellow-reverse);
color: var(--color-dark-blue);
box-shadow: 0 8px 32px rgba(212,175,55,0.18);
transform: translateY(-2px) scale(1.04);
}
@media (max-width: 600px) {
.interest-block {
padding: 1.2rem 0.5rem;
min-width: 0;
max-width: 100%;
}
.interest-title {
font-size: 0.95rem;
}
.interest-subtitle {
font-size: 0.95rem;
}
.interest-btn {
font-size: 1rem;
padding: 0.8em 1.2em;
}
}
.section-separator-color {
width: 100%;
height: 48px;
background: linear-gradient(90deg, #ffd600 0%, var(--color-dark-blue) 100%);
border: none;
display: block;
margin: 0 auto 0 auto;
box-shadow: 0 6px 24px rgba(33,42,62,0.10);
border-bottom: 4px solid var(--color-gold);
}
.testimonials-section {
background: #fffbe6;
padding: 5rem 0 4rem 0;
padding-left: 0;
padding-right: 0;
}
.testimonials-title {
text-align: center;
color: var(--color-gold);
font-family: var(--font-title);
font-size: 1.9rem;
font-weight: 900;
margin-bottom: 3rem;
letter-spacing: 1px;
}
.testimonials-list {
display: flex;
flex-direction: column;
gap: 3.5rem;
max-width: 900px;
margin: 0 auto;
}
.testimonial {
display: flex;
align-items: center;
gap: 2.5rem;
justify-content: center;
}
.testimonial-left {
flex-direction: row;
}
.testimonial-right {
flex-direction: row-reverse;
}
.testimonial-photo {
width: 110px;
height: 110px;
border-radius: var(--radius-round);
object-fit: cover;
border: 4px solid var(--color-gold);
box-shadow: 0 2px 12px rgba(212,175,55,0.13);
background: #fff;
display: block;
}
.testimonial-content {
background: #fff;
border-radius: 22px;
box-shadow: 0 4px 24px rgba(212,175,55,0.07);
padding: 2.2rem 2rem;
min-width: 220px;
max-width: 420px;
width: 100%;
display: flex;
flex-direction: column;
gap: 1.1rem;
align-items: flex-start;
}
.testimonial-text {
color: var(--color-text-primary);
font-size: 0.96rem;
font-style: italic;
margin-bottom: 0.7rem;
}
.testimonial-author {
color: var(--color-gold);
font-weight: bold;
font-size: 0.92rem;
}
@media (max-width: 900px) {
.testimonials-list {
gap: 2rem;
}
.testimonial {
flex-direction: column !important;
gap: 1.2rem;
align-items: center;
}
.testimonial-content {
align-items: center;
text-align: center;
padding: 1.2rem 0.7rem;
}
}
.interest-testimonials-row {
display: flex;
flex-direction: row;
gap: 3.5rem;
align-items: flex-start;
justify-content: center;
max-width: 1400px;
margin: 0 auto 0 auto;
padding: 5rem 0 4rem 0;
}
.interest-block-section, .testimonials-side {
flex: 1 1 0;
min-width: 320px;
max-width: 540px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
background: none;
box-shadow: none;
padding: 0;
}
.testimonials-side {
padding-left: 0;
}
@media (max-width: 1100px) {
.interest-testimonials-row {
gap: 1.5rem;
padding: 2.5rem 0 2rem 0;
}
.interest-block-section, .testimonials-side {
max-width: 100%;
}
}
@media (max-width: 900px) {
.interest-testimonials-row {
flex-direction: column;
gap: 2.5rem;
padding: 2rem 0 1.5rem 0;
}
.interest-block-section, .testimonials-side {
align-items: center;
padding: 0;
}
}
.testimonials-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.2rem 2.2rem;
max-width: 900px;
margin: 0 auto;
align-items: stretch;
}
@media (max-width: 900px) {
.testimonials-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
}
.interest-block-in-grid {
margin: 0;
align-items: center;
justify-content: center;
box-shadow: 0 8px 32px rgba(212,175,55,0.09);
background: #fff;
border-radius: 28px;
padding: 2.2rem 1.5rem 2rem 1.5rem;
display: flex;
flex-direction: column;
gap: 1.3rem;
min-width: 0;
max-width: 100%;
width: 100%;
grid-column: 1 / span 1;
}
.testimonials-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.2rem 2.2rem;
max-width: 900px;
margin: 0 auto;
align-items: stretch;
}
.testimonials-grid > .testimonial:last-child {
grid-column: 1 / span 2;
justify-content: center;
}
@media (max-width: 900px) {
.testimonials-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.interest-block-in-grid {
padding: 1.2rem 0.5rem;
}
.testimonials-grid > .testimonial:last-child {
grid-column: auto;
}
}
.testimonials-grid-3lignes {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
gap: 2.2rem 2.2rem;
max-width: 900px;
margin: 0 auto;
align-items: stretch;
}
@media (max-width: 900px) {
.testimonials-grid-3lignes {
grid-template-columns: 1fr;
grid-template-rows: none;
gap: 2rem;
}
.interest-block-in-grid {
padding: 1.2rem 0.5rem;
}
}
.testimonials-grid-3cols {
width: 100vw;
max-width: 1100px;
margin: 0 auto;
padding: 0;
display: grid;
grid-template-columns: 1fr 1.1fr 1fr;
gap: 2.2rem 2.2rem;
align-items: stretch;
}
.testimonials-col {
display: flex;
flex-direction: column;
gap: 2.2rem;
align-items: center;
justify-content: center;
}
.testimonials-col-center {
align-items: center;
justify-content: center;
min-width: 320px;
max-width: 480px;
width: 100%;
display: flex;
}
@media (max-width: 1100px) {
.testimonials-grid-3cols {
max-width: 100vw;
gap: 1.2rem 0.5rem;
}
}
@media (max-width: 900px) {
.testimonials-grid-3cols {
grid-template-columns: 1fr;
gap: 2rem;
}
.testimonials-col, .testimonials-col-center {
flex-direction: column;
align-items: center;
max-width: 100%;
min-width: 0;
width: 100%;
}
}
/* --- Témoignages flottants autour du bloc central --- */
.testimonials-float-section {
background: #fffbe6;
padding: 6rem 0 6rem 0;
position: relative;
overflow: visible;
}
.testimonials-float-container {
position: relative;
width: 100%;
min-height: 700px;
max-width: 1100px;
margin: 0 auto;
display: block;
padding: 80px 0;
}
/* Ajout d'un conteneur pour les avis du haut et du bas */
.testimonials-float-top,
.testimonials-float-bottom {
display: flex;
flex-direction: row;
gap: 2.5rem;
width: 100%;
justify-content: center;
position: absolute;
left: 0;
right: 0;
pointer-events: none;
}
.testimonials-float-top {
top: 0;
z-index: 5;
}
.testimonials-float-bottom {
bottom: 0;
z-index: 5;
}
.testimonials-float-top .testimonial-float,
.testimonials-float-bottom .testimonial-float {
position: static;
margin-top: 0;
margin-bottom: 0;
}
@media (max-width: 900px) {
.testimonials-float-top, .testimonials-float-bottom {
flex-direction: column;
gap: 1.2rem;
position: static;
}
}
.interest-block-float {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
background: #fff;
border-radius: 38px;
box-shadow: 0 12px 48px rgba(212,175,55,0.13), 0 2px 16px rgba(33,42,62,0.10);
padding: 4.5rem 3.5rem 4rem 3.5rem;
min-width: 380px;
max-width: 540px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 2.2rem;
font-size: 1.25rem;
text-align: center;
font-family: var(--font-title);
font-weight: 700;
font-size: 1.5rem;
}
.interest-block-float .interest-title {
font-size: 2.7rem;
margin-bottom: 1.2rem;
}
.interest-block-float .interest-subtitle {
font-size: 1.2rem;
font-weight: 500;
color: var(--color-text-primary);
margin-bottom: 0.7rem;
}
.interest-block-float .interest-btn {
font-size: 1rem;
padding: 1.1em 2.5em;
border-radius: 32px;
margin-top: 1.2rem;
}
/* Positionnement des avis autour du bloc central */
.testimonial-float {
position: absolute;
width: 340px;
max-width: 90vw;
z-index: 10;
pointer-events: none;
margin: 0;
}
.testimonial-float-topleft {
top: 12%;
left: 10%;
transform: translate(-30%, -60%);
}
.testimonial-float-topright {
top: 12%;
right: 10%;
transform: translate(30%, -60%);
}
.testimonial-float-bottomleft {
bottom: 12%;
left: 10%;
transform: translate(-30%, 60%);
}
.testimonial-float-bottomright {
bottom: 12%;
right: 10%;
transform: translate(30%, 60%);
}
.testimonial-float .testimonial {
pointer-events: auto;
}
@media (max-width: 1100px) {
.testimonials-float-container {
min-height: 900px;
}
.interest-block-float {
min-width: 0;
max-width: 90vw;
padding: 2.2rem 0.7rem 2rem 0.7rem;
font-size: 0.95rem;
}
.testimonial-float {
width: 90vw;
max-width: 98vw;
}
.testimonial-float-topleft {
top: 8%; left: 2%; transform: translate(0, -60%); }
.testimonial-float-topright {
top: 8%; right: 2%; transform: translate(0, -60%); }
.testimonial-float-bottomleft {
bottom: 8%; left: 2%; transform: translate(0, 60%); }
.testimonial-float-bottomright {
bottom: 8%; right: 2%; transform: translate(0, 60%); }
}
@media (max-width: 900px) {
.testimonials-float-container {
min-height: unset;
height: auto;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 2.2rem;
}
.interest-block-float {
position: static;
transform: none;
margin: 0 auto;
min-width: 0;
max-width: 100%;
padding: 2.2rem 0.7rem 2rem 0.7rem;
font-size: 0.95rem;
}
.testimonial-float {
position: static;
width: 100%;
max-width: 100%;
margin: 1.2rem 0;
transform: none;
display: flex;
justify-content: center;
}
}
.testimonials-float-container-square {
display: grid;
grid-template-areas:
". top ."
"left center right"
". bottom .";
grid-template-columns: 1fr auto 1fr;
grid-template-rows: auto auto auto;
align-items: center;
justify-items: center;
gap: 3.5rem 5.5rem;
max-width: 1100px;
margin: 0 auto;
padding: 5rem 0 5rem 0;
position: relative;
}
.interest-block-float-square {
grid-area: center;
background: #fff;
border-radius: 38px;
box-shadow: 0 12px 48px rgba(212,175,55,0.13), 0 2px 16px rgba(33,42,62,0.10);
padding: 4.5rem 3.5rem 4rem 3.5rem;
min-width: 380px;
max-width: 540px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 2.2rem;
font-size: 1.25rem;
text-align: center;
font-family: var(--font-title);
font-weight: 700;
font-size: 1.5rem;
z-index: 2;
}
.testimonial-float-square {
max-width: 340px;
width: 100%;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
}
.testimonial-float-top { grid-area: top; }
.testimonial-float-right { grid-area: right; }
.testimonial-float-bottom { grid-area: bottom; }
.testimonial-float-left { grid-area: left; }
@media (max-width: 1100px) {
.testimonials-float-container-square {
gap: 2.2rem 1.2rem;
padding: 2.5rem 0 2.5rem 0;
}
.interest-block-float-square {
min-width: 0;
max-width: 90vw;
padding: 2.2rem 0.7rem 2rem 0.7rem;
font-size: 0.95rem;
}
.testimonial-float-square {
max-width: 98vw;
}
}
@media (max-width: 900px) {
.testimonials-float-container-square {
display: flex;
flex-direction: column;
align-items: center;
gap: 2.2rem;
padding: 1.5rem 0 1.5rem 0;
}
.interest-block-float-square {
min-width: 0;
max-width: 100%;
padding: 2.2rem 0.7rem 2rem 0.7rem;
font-size: 0.95rem;
}
.testimonial-float-square {
max-width: 100%;
width: 100%;
margin: 1.2rem 0;
}
}
.testimonials-columns-container {
display: grid;
grid-template-columns: 1fr 1.1fr 1fr;
gap: 3.5rem 2.5rem;
align-items: center;
justify-items: center;
max-width: 1100px;
margin: 0 auto;
padding: 5rem 0 5rem 0;
}
.testimonials-col {
display: flex;
flex-direction: column;
gap: 2.5rem;
align-items: center;
justify-content: center;
}
.testimonials-col-center {
align-items: center;
justify-content: center;
min-width: 320px;
max-width: 480px;
width: 100%;
display: flex;
}
.interest-block-float-square {
width: 100%;
max-width: 480px;
min-width: 320px;
margin: 0 auto;
}
@media (max-width: 1100px) {
.testimonials-columns-container {
gap: 2rem 0.5rem;
padding: 2.5rem 0 2.5rem 0;
}
.testimonials-col-center {
max-width: 100%;
min-width: 0;
width: 100%;
}
.interest-block-float-square {
max-width: 90vw;
min-width: 0;
padding: 2.2rem 0.7rem 2rem 0.7rem;
}
}
@media (max-width: 900px) {
.testimonials-columns-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 2.2rem;
padding: 1.5rem 0 1.5rem 0;
}
.testimonials-col {
max-width: 100%;
width: 100%;
gap: 1.2rem;
}
.testimonials-col-center {
max-width: 100%;
min-width: 0;
width: 100%;
margin: 0 auto;
}
.interest-block-float-square {
max-width: 100%;
min-width: 0;
padding: 2.2rem 0.7rem 2rem 0.7rem;
}
}
/* Minimaliste Mes services */
.minimal-services-list {
background: none;
border: none;
box-shadow: none;
border-radius: 0;
display: flex;
justify-content: center;
align-items: stretch;
gap: 2.5rem;
flex-wrap: wrap;
padding: 2.5rem 0 2.5rem 0;
max-width: 1200px;
margin: 0 auto;
}
.minimal-service {
background: #fff;
border-radius: 18px;
box-shadow: 0 4px 24px rgba(33,42,62,0.10);
border: 1.5px solid var(--color-border);
min-width: 260px;
max-width: 320px;
flex: 1 1 280px;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.7rem;
padding: 2.2rem 1.5rem 2.2rem 1.5rem;
margin: 0;
text-align: center;
transition: box-shadow 0.2s, transform 0.18s;
min-height: 440px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.minimal-service:hover {
box-shadow: 0 12px 32px rgba(33,42,62,0.16);
transform: translateY(-4px) scale(1.03);
}
.minimal-service .service-icon {
font-size: 1.9rem;
color: var(--color-gold);
margin-bottom: 0.5rem;
margin-top: 0.2rem;
}
.minimal-service h3 {
color: var(--color-text-primary);
font-family: var(--font-title);
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.2rem;
letter-spacing: 0.2px;
text-align: center;
}
.minimal-service-desc {
color: var(--color-dark-grey);
font-size: 1.05rem;
margin-bottom: 0.3rem;
}
.minimal-service-text {
color: #222;
font-size: 0.85rem;
margin-bottom: 0.7rem;
margin-top: 0.2rem;
line-height: 1.6;
text-align: center;
}
.minimal-service-link {
display: inline-block;
background: var(--color-gold);
color: #fff;
font-family: var(--font-title);
font-weight: 700;
font-size: 0.92rem;
text-decoration: none;
border-radius: var(--radius-xs);
padding: 0.7em 2.2em;
box-shadow: 0 2px 12px rgba(33,42,62,0.10);
border: none;
margin-top: auto;
letter-spacing: 0.5px;
transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.18s;
}
.minimal-service-link:hover {
background: #b89b2c;
color: #fff;
box-shadow: 0 6px 24px rgba(212,175,55,0.18);
transform: translateY(-2px) scale(1.04);
}
@media (max-width: 900px) {
.minimal-services-list {
flex-direction: column;
align-items: center;
gap: 2rem;
padding: 1.2rem 0;
}
.minimal-service {
max-width: 100%;
min-width: 0;
width: 100%;
padding: 2rem 0.7rem 2rem 0.7rem;
min-height: 360px;
}
}
.logoCercleVertueux {
width: 400px;
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
filter: drop-shadow(0 8px 25px var(--color-black-30));
transition: transform 0.3s ease;
}
.logoCercleVertueux:hover {
transform: scale(1.05);
}
.mastermind-modern-grid {
display: flex;
flex-direction: column;
align-items: center;
gap: 2.5rem;
max-width: 1100px;
margin: 0 auto 3.5rem auto;
padding: 2.5rem 1rem 2.5rem 1rem;
}
.mastermind-modern-intro {
text-align: center;
max-width: 700px;
margin: 0 auto 1.5rem auto;
font-size: 1.2rem;
}
.mastermind-modern-title {
font-family: var(--font-title);
color: var(--color-gold);
font-size: 1.95rem;
font-weight: 800;
margin-bottom: 0.7rem;
letter-spacing: 1px;
}
.mastermind-modern-lead {
color: var(--color-text-primary);
font-size: 1.1rem;
font-weight: 500;
letter-spacing: 0.01em;
}
.mastermind-modern-cards {
display: flex;
gap: 2.2rem;
justify-content: center;
align-items: stretch;
width: 100%;
flex-wrap: wrap;
}
.mastermind-modern-card {
background: #fff;
border-radius: 18px;
box-shadow: 0 4px 24px rgba(33,42,62,0.10);
border: 1.5px solid var(--color-border);
min-width: 240px;
max-width: 340px;
flex: 1 1 280px;
display: flex;
flex-direction: column;
align-items: center;
padding: 2.2rem 1.5rem 2.2rem 1.5rem;
text-align: center;
transition: box-shadow 0.2s, transform 0.18s;
position: relative;
}
.mastermind-modern-card:hover {
box-shadow: 0 12px 32px rgba(33,42,62,0.16);
transform: translateY(-4px) scale(1.03);
}
.mastermind-modern-icon {
font-size: 1.95rem;
color: var(--color-gold);
margin-bottom: 0.7rem;
display: block;
}
.mastermind-modern-card h3 {
color: var(--color-text-primary);
font-family: var(--font-title);
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.5rem;
letter-spacing: 0.2px;
}
.mastermind-modern-card p {
color: var(--color-dark-grey);
font-size: 1.05rem;
margin-bottom: 0;
line-height: 1.6;
}
/* Responsive amélioré pour les cartes mastermind */
@media (max-width: 1024px) and (min-width: 769px) {
.mastermind-modern-cards {
gap: 1.8rem;
}
.mastermind-modern-card {
max-width: 320px;
padding: 2.2rem 1.5rem;
}
.mastermind-modern-card h3 {
font-size: 1.15rem;
}
}
@media (max-width: 900px) {
.mastermind-modern-cards {
flex-direction: column;
align-items: center;
gap: 1.8rem;
}
.mastermind-modern-card {
max-width: 100%;
min-width: 0;
width: clamp(280px, 90%, 500px);
padding: 2.2rem clamp(1rem, 4vw, 1.5rem);
}
.mastermind-modern-card h3 {
font-size: clamp(1.1rem, 3.5vw, 1.25rem);
}
.mastermind-modern-card p {
font-size: clamp(0.95rem, 3vw, 1.1rem);
line-height: 1.6;
}
.mastermind-modern-icon {
font-size: clamp(1.8rem, 5vw, 2.2rem);
}
}
.mastermind-modern-flex {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 1.5rem;
max-width: 1100px;
margin: 0 auto 2.5rem auto;
padding: 2.5rem 1rem 1.5rem 1rem;
}
.mastermind-modern-intro {
flex: 2 1 340px;
min-width: 260px;
max-width: 520px;
text-align: left;
margin: 0;
}
.mastermind-modern-video {
flex: 1 1 340px;
min-width: 260px;
display: flex;
align-items: center;
justify-content: center;
}
.mastermind-modern-video video {
width: 100%;
max-width: 420px;
min-height: 240px;
aspect-ratio: 16/9;
border-radius: 22px;
box-shadow: 0 8px 32px var(--color-dark-blue-13);
background: #000;
border: 3px solid var(--color-gold);
display: block;
}
@media (max-width: 900px) {
.mastermind-modern-flex {
flex-direction: column;
gap: 2rem;
padding: 1.2rem 0.5rem 1.2rem 0.5rem;
}
.mastermind-modern-intro, .mastermind-modern-video {
max-width: 100%;
min-width: 0;
width: 100%;
text-align: center;
}
.mastermind-modern-video video {
max-width: 100vw;
min-height: 180px;
}
}
/* ===== SECTION TÉMOIGNAGES MODERN ===== */
.section-tester-modern {
background: linear-gradient(135deg, #f8faff 0%, #e8f2ff 100%);
padding: 5rem 0;
width: 100%;
position: relative;
overflow: hidden;
}
/* Éléments décoratifs */
.section-tester-modern::before {
content: '';
position: absolute;
top: -100px;
right: -150px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 70%);
border-radius: var(--radius-round);
z-index: 0;
}
.section-tester-modern .section-title {
color: var(--color-gold);
font-family: var(--font-title);
font-size: 3rem;
font-weight: 800;
text-align: center;
margin: 0 0 4rem 0 !important;
letter-spacing: 1.5px;
position: relative;
z-index: 1;
}
.section-tester-modern .section-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-orange) 100%);
border-radius: 2px;
}
/* ===== CONTAINER PRINCIPAL ===== */
.tester-modern-container {
max-width: 80%;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 1;
}
/* ===== GRILLE TÉMOIGNAGES (HAUT) ===== */
/* Carousel wrapper */
.testimonials-carousel-wrapper {
position: relative;
max-width: 1200px;
margin: 0 auto 3rem auto;
padding: 0 4rem;
overflow: hidden;
}
/* Carousel container - avec overflow visible pour permettre les ombres */
.tester-modern-testimonials-carousel {
display: flex;
overflow: visible;
padding: 1rem 0;
transition: transform 0.5s ease-in-out;
width: 100%;
}
/* Ancien grid gardé pour compatibilité */
.tester-modern-testimonials-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
margin-bottom: 5rem;
}
.tester-modern-testimonial {
background: var(--color-card);
border: 2px solid var(--color-border);
border-radius: var(--radius-xl);
padding: 1.8rem 1.5rem;
box-shadow: 0 8px 30px var(--color-dark-blue-10);
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 1.2rem;
transition: var(--transition-smooth);
position: relative;
overflow: hidden;
}
/* Style spécifique pour les témoignages dans le carousel */
.tester-modern-testimonials-carousel .tester-modern-testimonial {
min-width: 100%;
max-width: 100%;
flex-shrink: 0;
box-sizing: border-box;
}
.tester-modern-testimonial::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, var(--color-gold) 0%, var(--color-orange) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.tester-modern-testimonial:hover {
transform: translateY(-5px);
box-shadow: 0 15px 50px rgba(33, 42, 62, 0.15);
}
.tester-modern-testimonial:hover::before {
opacity: 1;
}
/* Photo profil */
.tester-modern-photo {
width: 80px;
height: 80px;
border-radius: var(--radius-round);
object-fit: cover;
border: 3px solid var(--color-gold);
box-shadow: 0 4px 15px var(--color-gold-20);
background: var(--color-card);
flex-shrink: 0;
transition: var(--transition-smooth);
}
.tester-modern-photo:hover {
transform: scale(1.1);
box-shadow: 0 8px 25px var(--color-gold-30);
}
/* Contenu témoignage */
.tester-modern-content {
display: flex;
flex-direction: column;
gap: 0.6rem;
flex: 1;
min-width: 0;
}
/* Texte témoignage */
.tester-modern-text {
color: var(--color-text-secondary);
font-family: var(--font-text);
font-size: 1.1rem;
line-height: 1.5;
font-style: italic;
margin: 0;
position: relative;
}
.tester-modern-text::before {
content: '"';
position: absolute;
left: -15px;
top: -8px;
font-size: 2.1rem;
color: var(--color-gold);
opacity: 0.3;
font-family: serif;
}
/* Auteur */
.tester-modern-author {
color: var(--color-text-primary);
font-family: var(--font-title);
font-weight: 700;
font-size: 0.8rem;
margin: 0;
line-height: 1.2;
}
.tester-modern-job {
color: var(--color-gold);
font-family: var(--font-text);
font-weight: 500;
font-size: 0.7rem;
display: block;
margin-top: 0.1rem;
opacity: 0.9;
line-height: 1.1;
}
/* ===== BLOC CTA CENTRÉ (BAS) ===== */
.tester-modern-cta-section {
text-align: center;
position: relative;
}
.tester-modern-cta-box {
background: var(--gradient-primary);
border: none;
box-shadow: 0 15px 50px var(--color-gold-30);
border-radius: var(--radius-3xl);
padding: 3.5rem 3rem;
max-width: 650px;
margin: 0 auto;
position: relative;
overflow: hidden;
transition: var(--transition-smooth);
}
.tester-modern-cta-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-orange) 100%);
}
.tester-modern-cta-box:hover {
transform: translateY(-5px);
box-shadow: 0 20px 60px rgba(33, 42, 62, 0.2);
}
.tester-modern-title-container {
margin-bottom: 1.5rem;
}
.tester-modern-title {
color: white;
font-family: var(--font-title);
font-size: 2.1rem;
font-weight: 800;
line-height: 1.2;
margin-bottom: 0.5rem;
letter-spacing: 1px;
text-shadow: 0 2px 10px var(--color-black-20);
}
.tester-modern-title:last-child {
color: var(--color-gold);
margin-bottom: 0;
}
.tester-modern-lead {
color: var(--color-text-secondary);
font-family: var(--font-text);
font-size: 0.95rem;
line-height: 1.6;
font-weight: 400;
margin-bottom: 2rem;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
/* Bouton CTA principal */
.tester-modern-btn {
background: linear-gradient(135deg, var(--color-yellow-bg) 0%, var(--color-orange) 100%);
color: var(--color-text-primary);
font-family: var(--font-title);
font-weight: 800;
font-size: 1rem;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 1.2rem 3rem;
border-radius: 50px;
border: none;
text-decoration: none;
display: inline-block;
box-shadow: 0 8px 30px rgba(255, 199, 44, 0.3);
position: relative;
overflow: hidden;
transition: var(--transition-smooth);
cursor: pointer;
z-index: 1;
margin-bottom: 2rem;
}
.tester-modern-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.6s ease;
z-index: -1;
}
.tester-modern-btn:hover {
background: linear-gradient(135deg, var(--color-orange) 0%, var(--color-yellow-bg) 100%);
color: var(--color-dark-blue);
transform: translateY(-3px) scale(1.02);
box-shadow: 0 15px 50px rgba(255, 199, 44, 0.4);
}
.tester-modern-btn:hover::before {
left: 100%;
}
.tester-modern-btn:active {
transform: translateY(-1px) scale(0.98);
}
/* Boutons de navigation du carousel */
.testimonial-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: white;
border: 2px solid var(--color-gold);
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
color: var(--color-gold);
font-size: 1.2rem;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.testimonial-nav-btn:hover {
background: var(--color-gold);
color: white;
transform: translateY(-50%) scale(1.1);
box-shadow: 0 6px 20px rgba(212,175,55,0.3);
}
.testimonial-prev {
left: 0;
}
.testimonial-next {
right: 0;
}
/* Dots de pagination */
.testimonials-dots {
display: flex;
justify-content: center;
gap: 0.6rem;
margin-top: 1.5rem;
}
.testimonial-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid var(--color-gold);
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
}
.testimonial-dot:hover {
background: var(--color-gold);
transform: scale(1.2);
}
.testimonial-dot.active {
background: var(--color-gold);
transform: scale(1.2);
}
/* Mobile - masquer les dots complètement */
@media (max-width: 768px) {
.testimonials-dots {
display: none;
}
}
/* ===== FLÈCHE VERS LE BAS ===== */
.tester-modern-arrow {
display: flex;
justify-content: center;
margin-top: 2rem;
}
.arrow-down {
width: 40px;
height: 40px;
border-radius: var(--radius-round);
background: var(--gradient-primary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition-smooth);
box-shadow: 0 4px 15px var(--color-gold-30);
position: relative;
animation: bounce 2s infinite;
}
.arrow-down:hover {
transform: translateY(-3px) scale(1.1);
box-shadow: 0 8px 25px var(--color-gold-40);
}
.arrow-down i {
color: var(--color-dark-blue);
font-size: 1rem;
font-weight: bold;
}
/* Animation de rebond */
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-5px);
}
60% {
transform: translateY(-3px);
}
}
/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1200px) {
.tester-modern-container {
padding: 0 1.5rem;
}
.section-tester-modern .section-title {
font-size: 2.1rem;
}
.tester-modern-testimonials-grid {
gap: 1.5rem;
}
.tester-modern-title {
font-size: 2rem;
}
}
@media (max-width: 900px) {
.section-tester-modern {
padding: 3.5rem 0;
}
.section-tester-modern .section-title {
font-size: 1.7rem;
margin-bottom: 2rem !important;
}
/* Carousel responsive */
.testimonials-carousel-wrapper {
padding: 0 2.8rem;
}
.testimonial-nav-btn {
width: 38px;
height: 38px;
font-size: 0.95rem;
}
.tester-modern-testimonials-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
margin-bottom: 3rem;
}
.tester-modern-testimonial {
padding: 0.5rem 0.5rem 0.3rem 0.5rem;
flex-direction: column;
text-align: center;
align-items: center;
gap: 0.3rem;
min-height: auto;
height: auto;
}
.tester-modern-content {
text-align: center;
gap: 0.2rem;
width: 100%;
}
.tester-modern-photo {
width: 50px;
height: 50px;
align-self: center;
border-width: 2px;
margin-bottom: 0.3rem;
}
.tester-modern-text {
font-size: 0.85rem;
line-height: 1.4;
margin-bottom: 0.3rem;
}
.tester-modern-text::before {
font-size: 1.5rem;
left: -10px;
top: -5px;
}
.tester-modern-author {
font-size: 0.75rem;
margin-bottom: 0.1rem;
}
.tester-modern-job {
font-size: 0.65rem;
margin-bottom: 0;
}
.testimonial-photo-wrapper {
width: 60px;
height: 60px;
}
.linkedin-overlay i {
font-size: 24px;
}
.tester-modern-cta-box {
padding: 2.5rem 2rem;
}
.tester-modern-title {
font-size: 1.5rem;
}
.tester-modern-lead {
font-size: 1rem;
}
.tester-modern-btn {
font-size: 0.95rem;
padding: 1rem 2.5rem;
}
}
/* Responsive amélioré pour les témoignages */
@media (max-width: 768px) and (min-width: 481px) {
.section-tester-modern {
padding: 4.5rem 0;
}
.section-tester-modern .section-title {
font-size: clamp(1.8rem, 5vw, 2.2rem);
margin-bottom: 3rem !important;
}
.tester-modern-testimonials-grid {
grid-template-columns: 1fr;
gap: 2rem;
padding: 0 1.5rem;
}
}
@media (max-width: 600px) {
.section-tester-modern {
padding: 3rem 0;
}
.section-tester-modern .section-title {
font-size: clamp(1.3rem, 5vw, 1.6rem);
margin-bottom: 1.5rem !important;
}
.tester-modern-container {
padding: 0 1rem;
}
/* Carousel très petits écrans */
.testimonials-carousel-wrapper {
padding: 0 2.2rem;
}
.testimonial-nav-btn {
width: 44px;
height: 44px;
font-size: 0.9rem;
display: flex;
align-items: center;
justify-content: center;
}
.tester-modern-testimonials-grid {
gap: 1.2rem;
margin-bottom: 2.5rem;
}
.tester-modern-testimonial {
padding: 0.5rem 0.5rem 0.2rem 0.5rem;
border-radius: var(--radius-lg);
min-height: auto;
height: auto;
}
.tester-modern-photo {
width: 45px;
height: 45px;
border-width: 2px;
margin-bottom: 0.3rem;
}
.testimonial-photo-wrapper {
width: 45px;
height: 45px;
}
.linkedin-overlay i {
font-size: 16px;
}
.tester-modern-text {
font-size: clamp(0.85rem, 2vw, 0.95rem);
padding-left: 0;
line-height: 1.35;
margin-bottom: 0.2rem;
}
.tester-modern-text::before {
font-size: 1.3rem;
left: -8px;
top: -4px;
}
.tester-modern-author {
font-size: clamp(0.75rem, 2vw, 0.85rem);
margin-bottom: 0.1rem;
}
.tester-modern-job {
font-size: clamp(0.75rem, 1.8vw, 0.8rem);
margin-bottom: 0;
}
.tester-modern-cta-box {
padding: 2rem 1.5rem;
border-radius: var(--radius-xl);
}
.tester-modern-title {
font-size: 1.3rem;
}
.tester-modern-lead {
font-size: 0.95rem;
}
.tester-modern-btn {
font-size: 1rem;
padding: 0.9rem 2rem;
letter-spacing: 1px;
}
.arrow-down {
width: 35px;
height: 35px;
}
.arrow-down i {
font-size: 1rem;
}
}
@media (max-width: 400px) {
.section-tester-modern {
padding: 3rem 0;
}
.section-tester-modern .section-title {
font-size: 1.3rem;
}
.tester-modern-cta-box {
padding: 1.5rem 1rem;
}
.tester-modern-title {
font-size: 1.1rem;
}
.tester-modern-btn {
padding: 0.8rem 1.5rem;
font-size: 0.9rem;
}
.tester-modern-testimonial {
padding: 0.8rem 1rem;
}
}
/* ===== AMÉLIORATIONS ACCESSIBILITÉ ===== */
.tester-modern-btn:focus,
.tester-modern-photo:focus,
.arrow-down:focus {
outline: 3px solid var(--color-gold);
outline-offset: 3px;
}
/* Animation d'entrée */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.tester-modern-testimonial {
animation: fadeInUp 0.6s ease forwards;
}
.tester-modern-testimonial:nth-child(1) { animation-delay: 0.1s; }
.tester-modern-testimonial:nth-child(2) { animation-delay: 0.2s; }
.tester-modern-testimonial:nth-child(3) { animation-delay: 0.3s; }
.tester-modern-testimonial:nth-child(4) { animation-delay: 0.4s; }
.tester-modern-cta-box {
animation: fadeInUp 0.6s ease forwards;
animation-delay: 0.5s;
}
/* Amélioration des liens LinkedIn */
.tester-modern-testimonial a {
text-decoration: none;
display: inline-block;
transition: var(--transition-smooth);
}
/* Wrapper pour la photo avec overlay */
.testimonial-photo-wrapper {
position: relative;
width: 80px;
height: 80px;
flex-shrink: 0;
}
.testimonial-photo-link {
position: relative;
display: block;
width: 100%;
height: 100%;
border-radius: var(--radius-round);
overflow: hidden;
}
/* Overlay LinkedIn */
.linkedin-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 119, 181, 0.9);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
border-radius: var(--radius-round);
z-index: 2;
}
.linkedin-overlay i {
color: white;
font-size: 32px;
transform: scale(0.8);
transition: transform 0.3s ease;
}
.testimonial-photo-link:hover .linkedin-overlay {
opacity: 1;
}
.testimonial-photo-link:hover .linkedin-overlay i {
transform: scale(1);
}
.testimonial-photo-link:hover .tester-modern-photo {
transform: scale(1.05);
filter: blur(3px);
}
.tester-modern-testimonial a:hover .tester-modern-photo {
transform: scale(1.1);
}
/* Wrapper pour photo avec logo LinkedIn */
.testimonial-photo-wrapper {
position: relative;
display: inline-block;
cursor: pointer;
}
/* Logo LinkedIn overlay */
.linkedin-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #0077B5;
border-radius: var(--radius-round);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.testimonial-photo-wrapper:hover .linkedin-overlay {
opacity: 1;
}
.linkedin-overlay i {
font-size: 2.8rem;
color: white;
}
/* Amélioration de l'effet au survol */
.testimonial-photo-wrapper:hover .tester-modern-photo {
transform: scale(1.05);
}
/* ===== SECTION ÉVÉNEMENT MASTERMIND ===== */
.section-event-mastermind {
background: var(--color-dark-blue);
padding: 10rem 0;
width: 100%;
box-shadow: 0 8px 48px var(--color-dark-blue-13);
position: relative;
overflow: hidden;
}
/* Éléments décoratifs */
.section-event-mastermind::before {
content: '';
position: absolute;
top: -60px;
left: -80px;
width: 220px;
height: 220px;
background: radial-gradient(circle, var(--color-gold) 0%, var(--color-dark-blue) 80%);
opacity: 0.08;
border-radius: var(--radius-round);
z-index: 0;
}
.section-event-mastermind::after {
content: '';
position: absolute;
bottom: -80px;
right: -100px;
width: 320px;
height: 320px;
background: radial-gradient(circle, var(--color-gold) 0%, var(--color-dark-blue) 80%);
opacity: 0.10;
border-radius: var(--radius-round);
z-index: 0;
}
/* Container principal */
.event-mastermind-2col {
display: flex;
align-items: stretch;
justify-content: center;
gap: 4rem;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 1;
}
/* ===== COLONNE INFORMATIONS ===== */
.event-mastermind-infoscol {
flex: 1 1 500px;
min-width: 400px;
max-width: 650px;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 2rem;
padding-top: 2rem;
}
/* Header */
.event-mastermind-header {
text-align: center;
}
.event-mastermind-title {
font-family: var(--font-title);
color: var(--color-gold);
font-size: 3.2rem;
font-weight: 900;
letter-spacing: 2.5px;
margin-bottom: 1rem;
text-shadow: 0 2px 12px rgba(33, 42, 62, 0.3);
line-height: 1.1;
}
.event-mastermind-subtitle {
font-family: var(--font-title);
color: var(--color-card);
font-size: 1.15rem;
font-weight: 700;
border: 3px solid var(--color-gold);
border-radius: var(--radius-lg);
display: inline-block;
padding: 0.8rem 1.5rem;
letter-spacing: 1.5px;
background: rgba(35, 47, 75, 0.9);
box-shadow: 0 4px 20px rgba(212, 175, 55, 0.15);
transition: var(--transition-smooth);
}
.event-mastermind-subtitle:hover {
background: var(--color-gold-10);
box-shadow: 0 6px 30px rgba(212, 175, 55, 0.25);
}
/* Informations événement */
.event-mastermind-infos {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
width: 100%;
max-width: 600px;
}
@media (max-width: 768px) {
.event-mastermind-infoscol {
min-width: 320px;
max-width: 100%;
}
.event-mastermind-infos {
grid-template-columns: 1fr;
gap: 1rem;
max-width: 100%;
}
.event-mastermind-ctas {
margin-top: 1.5rem;
}
.event-mastermind-ctas .trainer-cta-secondary,
.event-mastermind-link {
font-size: 0.95rem;
padding: 1rem 2rem;
}
}
.event-mastermind-info {
display: flex;
align-items: center;
background: linear-gradient(135deg, #2a3a5e 0%, #1f2a45 100%);
border-radius: 18px;
padding: 1.8rem 2.2rem;
border-left: 5px solid var(--color-gold);
box-shadow: 0 8px 30px rgba(33, 42, 62, 0.3);
transition: var(--transition-smooth);
position: relative;
overflow: hidden;
}
.event-mastermind-info::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.3s ease;
}
.event-mastermind-info:hover {
transform: translateY(-3px);
box-shadow: 0 8px 35px var(--color-gold-20);
border-left-color: var(--color-yellow-bg);
}
.event-mastermind-info:hover::before {
opacity: 1;
}
.event-mastermind-icon {
color: var(--color-gold);
font-size: 1.8rem;
margin-right: 1.5rem;
flex-shrink: 0;
width: 2.5rem;
text-align: center;
}
.event-mastermind-content {
flex: 1;
}
.event-mastermind-label {
color: var(--color-card);
font-family: var(--font-title);
font-weight: 700;
font-size: 1.05rem;
margin-bottom: 0.4rem;
letter-spacing: 0.4px;
}
.event-mastermind-value {
color: var(--color-gold);
font-family: var(--font-text);
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.3px;
}
/* Section des boutons CTA */
.event-mastermind-ctas {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
margin-top: 1rem;
}
.event-mastermind-ctas .trainer-cta-secondary {
color: var(--color-gold) !important;
font-size: 0.9rem;
font-weight: 500;
background: transparent;
padding: 0.6rem 1rem;
border: none;
border-bottom: 1px solid var(--color-gold);
text-decoration: none;
transition: color 0.3s ease;
text-align: center;
letter-spacing: 0.2px;
cursor: pointer;
font-family: var(--font-text);
}
.event-mastermind-ctas .trainer-cta-secondary:hover {
color: var(--color-card) !important;
}
/* Bouton d'inscription */
.event-mastermind-link {
background: var(--gradient-primary);
color: white !important;
font-family: var(--font-title);
font-weight: 800;
font-size: 1.1rem;
text-decoration: none;
border-radius: 40px;
padding: 1.2rem 2.5rem;
display: inline-block;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
box-shadow: 0 12px 35px rgba(212, 175, 55, 0.6);
transition: var(--transition-smooth);
position: relative;
overflow: hidden;
text-shadow: 0 2px 5px var(--color-black-30);
z-index: 10;
animation: pulseGlow 3s ease-in-out infinite;
width: 100%;
max-width: 280px;
}
.event-mastermind-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, var(--color-white-30), transparent);
transition: left 0.6s ease;
}
.event-mastermind-link:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 10px 40px rgba(255, 199, 44, 0.4);
background: linear-gradient(135deg, var(--color-orange) 0%, var(--color-yellow-bg) 100%);
}
.event-mastermind-link:hover::before {
left: 100%;
}
/* Animation de pulsation dorée pour attirer l'attention */
@keyframes pulseGlow {
0% {
box-shadow: 0 12px 35px var(--color-gold-40);
}
50% {
box-shadow: 0 12px 40px var(--color-gold-50);
}
100% {
box-shadow: 0 12px 35px var(--color-gold-40);
}
}
/* ===== COLONNE PHOTOS ===== */
.event-mastermind-photoscol {
flex: 1.8 1 700px;
min-width: 450px;
display: flex;
align-items: center;
justify-content: center;
}
.event-mastermind-photos {
display: flex;
justify-content: center;
gap: 1.5rem;
width: 100%;
max-width: 800px;
}
.event-mastermind-photo {
width: 100%;
aspect-ratio: 4/3;
min-height: 320px;
max-height: 450px;
border-radius: var(--radius-3xl);
object-fit: contain;
border: 5px solid var(--color-gold);
box-shadow: 0 12px 40px var(--color-gold-30);
background: var(--color-card);
transition: var(--transition-smooth);
cursor: pointer;
filter: brightness(1) contrast(1.1);
position: relative;
overflow: hidden;
}
.event-mastermind-photo::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--color-gold-10) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.3s ease;
}
.event-mastermind-photo:hover {
transform: scale(1.05) rotate(-1deg);
box-shadow: 0 15px 50px rgba(212, 175, 55, 0.35);
border-color: var(--color-yellow-bg);
filter: brightness(1.05) contrast(1.1);
}
.event-mastermind-photo:hover::before {
opacity: 1;
}
.event-mastermind-photo:nth-child(even):hover {
transform: scale(1.05) rotate(1deg);
}
.event-photo-container {
position: relative;
border-radius: var(--radius-xl);
overflow: hidden;
margin-bottom: 1.5rem;
width: 100%;
max-width: 960px;
box-shadow:
0 10px 40px var(--color-black-20),
0 0 0 1px var(--color-gold-10);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
background: linear-gradient(135deg, rgba(212, 175, 55, 0.05), var(--color-dark-blue-05));
}
.event-photo-container:hover {
transform: translateY(-5px);
box-shadow:
0 20px 60px var(--color-black-30),
0 0 0 2px var(--color-gold-30);
}
.event-photo-container video {
width: 100%;
height: auto;
display: block;
transition: transform 0.4s ease;
}
.event-photo-container:hover video {
transform: scale(1.02);
}
/* Contrôles vidéo personnalisés */
.event-photo-container video::-webkit-media-controls-panel {
background: linear-gradient(to top, var(--color-black-80), transparent);
}
/* ===== NEW LAYOUT: Container & Cards ===== */
.event-mastermind-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.event-mastermind-header {
text-align: center;
width: 100%;
}
.event-mastermind-photos {
gap: 1.5rem;
width: 100%;
max-width: 900px;
}
.event-mastermind-cards {
display: flex;
gap: 2.2rem;
justify-content: center;
align-items: stretch;
width: 100%;
flex-wrap: wrap;
}
.event-mastermind-card {
background: linear-gradient(135deg, #2a3a5e 0%, #1f2a45 100%);
border-radius: var(--radius-lg);
box-shadow: 0 6px 20px rgba(33, 42, 62, 0.3);
border-left: 4px solid var(--color-gold);
min-width: 150px;
max-width: 200px;
flex: 1 1 160px;
display: flex;
flex-direction: column;
align-items: center;
padding: 0.5rem 0.5rem;
text-align: center;
transition: var(--transition-default);
position: relative;
overflow: hidden;
}
.event-mastermind-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.3s ease;
}
.event-mastermind-card:hover {
transform: translateY(-8px) scale(1.03);
box-shadow: 0 15px 40px var(--color-gold-40);
border-left-color: var(--color-yellow-bg);
}
.event-mastermind-card:hover::before {
opacity: 1;
}
.event-mastermind-card-icon {
font-size: 2rem;
color: var(--color-gold);
margin-bottom: 0.8rem;
display: block;
}
.event-mastermind-card h3 {
font-family: var(--font-title);
font-size: 1rem;
font-weight: 700;
color: var(--color-gold);
margin-bottom: 0.6rem;
letter-spacing: 0.5px;
}
.event-mastermind-card p {
font-family: var(--font-text);
font-size: 0.95rem;
font-weight: 600;
color: var(--color-light);
margin: 0;
}
.event-mastermind-ctas {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
width: 100%;
max-width: 400px;
}
/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1024px) {
.event-mastermind-2col {
gap: 3rem;
padding: 0 1.5rem;
}
.event-mastermind-infoscol {
max-width: 450px;
}
.event-mastermind-photoscol {
min-width: 350px;
}
}
@media (max-width: 900px) {
.section-event-mastermind {
padding: 6rem 0;
}
.event-mastermind-2col {
flex-direction: column;
gap: 4rem;
align-items: center;
text-align: center;
}
.event-mastermind-infoscol {
max-width: 100%;
min-width: auto;
}
.event-mastermind-header {
text-align: center;
}
.event-mastermind-title {
font-size: 2.1rem;
}
/* Responsive pour les overlays photos */
.event-photo-info {
top: 10px;
right: 10px;
width: 24px;
height: 24px;
font-size: 12px;
}
.event-photo-text {
padding: 1.5rem;
}
.event-photo-text h4 {
font-size: 1.2rem;
margin-bottom: 0.6rem;
}
.event-photo-text p {
font-size: 0.85rem;
line-height: 1.4;
}
.event-mastermind-subtitle {
font-size: 1.1rem;
padding: 0.6rem 1.2rem;
}
.event-mastermind-photoscol {
min-width: auto;
width: 100%;
}
.event-mastermind-photos {
max-width: 600px;
gap: 2rem;
}
}
@media (max-width: 600px) {
.section-event-mastermind {
padding: 4rem 0;
}
.event-mastermind-2col {
padding: 0 1rem;
gap: 3rem;
}
.event-mastermind-title {
font-size: 2rem;
letter-spacing: 1.5px;
}
.event-mastermind-subtitle {
font-size: 0.95rem;
padding: 0.5rem 1rem;
letter-spacing: 1px;
}
.event-mastermind-info {
padding: 1.3rem 1.5rem;
flex-direction: column;
text-align: center;
gap: 0.8rem;
}
.event-mastermind-icon {
margin-right: 0;
margin-bottom: 0.5rem;
}
.event-mastermind-photos {
grid-template-columns: 1fr;
gap: 1.2rem;
max-width: 350px;
}
.event-mastermind-photo {
min-height: 220px;
max-height: 320px;
border-radius: var(--radius-lg);
}
.event-mastermind-link {
font-size: 1rem;
padding: 0.8rem 2rem;
}
}
@media (max-width: 400px) {
.event-mastermind-title {
font-size: 1.15rem;
}
.event-mastermind-subtitle {
font-size: 1rem;
}
.event-mastermind-info {
padding: 1rem;
}
.event-mastermind-photos {
max-width: 400px;
}
}
/* ===== ANIMATIONS ET AMÉLIORATIONS ===== */
/* Animation d'entrée pour les éléments */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.event-mastermind-info {
animation: fadeInUp 0.6s ease forwards;
}
.event-mastermind-info:nth-child(1) { animation-delay: 0.1s; }
.event-mastermind-info:nth-child(2) { animation-delay: 0.2s; }
.event-mastermind-info:nth-child(3) { animation-delay: 0.3s; }
.event-mastermind-photo:nth-child(1) { animation-delay: 0.4s; }
.event-mastermind-photo:nth-child(2) { animation-delay: 0.5s; }
.event-mastermind-photo:nth-child(3) { animation-delay: 0.6s; }
.event-mastermind-photo:nth-child(4) { animation-delay: 0.7s; }
/* Focus states pour l'accessibilité */
.event-mastermind-link:focus,
.event-mastermind-photo:focus {
outline: 3px solid var(--color-gold);
outline-offset: 3px;
}
/* États actifs */
.event-mastermind-link:active {
transform: translateY(-1px) scale(0.98);
}
.event-mastermind-photo:active {
transform: scale(1.02);
}
/* Responsive pour logoCercleVertueux */
@media (max-width: 900px) {
.logoCercleVertueux {
width: 450px;
margin: 3rem auto;
display: block;
}
}
@media (max-width: 600px) {
.logoCercleVertueux {
width: 350px;
margin: 2.5rem auto;
display: block;
}
}
@media (max-width: 480px) {
.logoCercleVertueux {
width: 250px;
margin: 2rem auto;
display: block;
}
}
@media (max-width: 900px) {
section,
.section-mastermind,
.section-event-mastermind,
.section-tester-modern {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
.mastermind-modern-card {
margin-bottom: 2rem;
padding: 2rem 1.2rem 2rem 1.2rem;
}
.event-mastermind-info {
margin-bottom: 1.2rem;
padding: 1.2rem 1rem 1.2rem 1rem;
}
.event-mastermind-link {
margin-top: 2rem;
margin-bottom: 1.5rem;
padding: 1.1em 2em;
width: 90%;
max-width: 350px;
font-size: 0.95rem;
}
.tester-modern-testimonial {
margin-bottom: 2rem;
padding: 1.5rem 1rem;
}
}
@media (max-width: 600px) {
section,
.section-mastermind,
.section-event-mastermind,
.section-tester-modern {
margin-left: 0.7rem;
margin-right: 0.7rem;
}
.mastermind-modern-card {
margin-bottom: 2.5rem;
padding: 2rem 0.7rem 2rem 0.7rem;
}
.event-mastermind-info {
margin-bottom: 1.5rem;
padding: 1.3rem 0.7rem 1.3rem 0.7rem;
}
.event-mastermind-link {
margin-top: 2.2rem;
margin-bottom: 1.7rem;
padding: 1.2em 1.2em;
width: 100%;
max-width: 320px;
font-size: 0.98rem;
}
.tester-modern-testimonial {
margin-bottom: 2.2rem;
padding: 1.7rem 0.7rem;
}
}
.tester-modern-title-container {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.tester-modern-title-container .tester-modern-title {
text-align: center;
margin: 0;
}
/* ===== SECTION QUI SUIS-JE - VERSION MODERNE ===== */
.section-trainer-hero {
background-color: var(--color-dark-blue);
background-image:
radial-gradient(900px 600px at 20% 15%, rgba(255,255,255,0.06), transparent 60%),
radial-gradient(700px 500px at 80% 85%, var(--color-white-04), transparent 60%),
linear-gradient(135deg, #1b2c4a 0%, #15243b 50%, #0f1b2f 100%);
padding: 6rem 0;
position: relative;
overflow: hidden;
}
/* Éléments décoratifs flottants */
.section-trainer-hero::before {
content: '';
position: absolute;
top: -10%;
left: -5%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 60%);
border-radius: var(--radius-round);
animation: float 20s ease-in-out infinite;
}
.section-trainer-hero::after {
content: '';
position: absolute;
bottom: -10%;
right: -5%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(26, 35, 126, 0.05) 0%, transparent 60%);
border-radius: var(--radius-round);
animation: float 25s ease-in-out infinite reverse;
}
@keyframes float {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(30px, -30px) scale(1.05); }
66% { transform: translate(-20px, 20px) scale(0.95); }
}
/* Titre principal */
.trainer-section-title {
font-family: var(--font-title);
font-size: 3rem;
font-weight: 900;
text-align: center;
background: linear-gradient(135deg, var(--color-gold) 0%, #f4d03f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0 0 1rem 0;
letter-spacing: 2px;
position: relative;
z-index: 1;
}
.trainer-subtitle {
text-align: center;
font-family: var(--font-text);
font-size: 1.1rem;
color: var(--color-white-80);
margin-bottom: 4rem;
font-weight: 500;
letter-spacing: 0.5px;
}
/* ===== CONTAINER PRINCIPAL ===== */
.trainer-hero-container {
max-width: 1500px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 1;
}
.trainer-hero-content {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 4rem;
align-items: center;
}
/* ===== SECTION PHOTO HERO ===== */
.trainer-photo-hero {
position: relative;
width: 100%;
aspect-ratio: 14/11;
border-radius: 30px;
overflow: hidden;
box-shadow: 0 25px 80px rgba(33, 42, 62, 0.15);
background: linear-gradient(45deg, #f0f4f8, #d6e7f0);
}
.trainer-photo-hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
45deg,
var(--color-gold-10) 0%,
transparent 30%,
transparent 70%,
rgba(26, 35, 126, 0.05) 100%
);
z-index: 2;
}
.trainer-photo-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: scale-down;
object-position: center;
opacity: 0;
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
transform: scale(1.05);
}
/* Ajustement spécifique pour Image1 (photo horizontale) */
.trainer-photo-slide[src*="Image1.png"] {
object-fit: cover;
object-position: center top;
transform: scale(1.15);
}
.trainer-photo-slide[src*="Image1.png"].active {
transform: scale(1.1);
}
.trainer-photo-slide.active {
opacity: 1;
transform: scale(1);
}
/* Navigation du carousel */
.trainer-nav-container {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 1rem;
z-index: 10;
}
.trainer-nav-btn {
width: 50px;
height: 50px;
border-radius: var(--radius-round);
background: var(--color-white-95);
backdrop-filter: blur(20px);
border: 1px solid var(--color-white-20);
color: var(--color-text-primary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition-smooth);
box-shadow: 0 8px 25px var(--color-black-10);
}
.trainer-nav-btn:hover {
background: var(--color-card);
transform: scale(1.1);
box-shadow: 0 12px 35px var(--color-black-15);
}
.trainer-nav-btn i {
font-size: 0.95rem;
font-weight: bold;
}
/* Dots indicateurs */
.trainer-dots {
display: flex;
gap: 0.5rem;
}
.trainer-dot {
width: 12px;
height: 12px;
border-radius: var(--radius-round);
background: rgba(255, 255, 255, 0.6);
cursor: pointer;
transition: var(--transition-smooth);
border: none;
}
.trainer-dot.active {
background: var(--color-gold);
transform: scale(1.2);
}
/* Caption flottant */
.trainer-caption-float {
position: absolute;
top: 30px;
left: 30px;
/* background: var(--color-white-95);
backdrop-filter: blur(20px); */
/* padding: 1rem 1.5rem;
border-radius: var(--radius-xl); */
font-family: var(--font-title);
font-weight: 700;
color: var(--color-text-primary);
font-size: 1rem;
/* box-shadow: 0 8px 25px var(--color-black-10);
border: 1px solid var(--color-white-20); */
transition: var(--transition-smooth);
z-index: 5;
}
/* Caption en blanc pour l'image spécifique */
.trainer-caption-float.white-caption {
color: #ffffff !important;
}
/* Badge certification */
.trainer-certification-badge {
position: absolute;
top: 20px;
right: 20px;
background: var(--gradient-primary);
color: var(--color-dark-blue);
padding: 0.8rem 1.2rem;
border-radius: var(--radius-3xl);
font-family: var(--font-title);
font-weight: 800;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 8px 25px var(--color-gold-30);
z-index: 5;
animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
/* ===== SECTION CONTENU ===== */
.trainer-content-card {
background: var(--color-white-95);
backdrop-filter: blur(20px);
border: 1px solid var(--color-white-30);
border-radius: var(--radius-3xl);
padding: 2rem 2rem;
box-shadow: 0 20px 60px var(--color-dark-blue-10);
position: relative;
overflow: hidden;
height: fit-content;
align-self: center;
}
.trainer-content-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-orange) 100%);
}
.trainer-name {
font-family: var(--font-title);
font-size: 1.5rem;
font-weight: 900;
color: var(--color-gold);
margin-bottom: 0.3rem;
letter-spacing: 1px;
}
.trainer-role {
font-family: var(--font-text);
font-size: 1rem;
color: var(--color-gold);
font-weight: 700;
margin-bottom: 1.2rem;
text-transform: uppercase;
letter-spacing: 2px;
}
.trainer-story {
font-family: var(--font-text);
font-size: 1rem;
line-height: 1.6;
color: #333;
margin-bottom: 1.2rem;
}
.trainer-story-highlight {
color: var(--color-text-primary);
font-weight: 700;
border-radius: var(--radius-xs);
display: inline-block;
}
/* Stats intégrées */
.trainer-stats-inline {
display: flex;
gap: 1.5rem;
margin: 1rem 0;
flex-wrap: wrap;
}
.trainer-stat-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.trainer-stat-number {
font-family: var(--font-title);
font-size: 1.3rem;
font-weight: 900;
color: var(--color-gold);
}
.trainer-stat-label {
font-family: var(--font-text);
font-size: 0.85rem;
color: var(--color-text-secondary);
font-weight: 600;
}
/* Promise section */
.trainer-promise {
background: linear-gradient(135deg, rgba(26, 35, 126, 0.05) 0%, rgba(212, 175, 55, 0.05) 100%);
padding: 1rem;
border-radius: var(--radius-md);
border-left: 4px solid var(--color-gold);
margin: 1rem 0;
}
.trainer-promise-text {
font-family: var(--font-title);
font-size: 2rem;
font-weight: 700;
color: var(--color-text-primary);
font-style: italic;
margin: 0;
line-height: 1.2;
letter-spacing: 1px;
}
/* Actions */
.trainer-actions-modern {
display: flex;
flex-direction: column;
gap: 0.8rem;
margin-top: 1.2rem;
}
.trainer-cta-primary {
background: var(--gradient-primary);
color: var(--color-dark-blue);
padding: 0.8rem 1.8rem;
border-radius: 50px;
text-decoration: none;
font-family: var(--font-title);
font-weight: 800;
font-size: 0.95rem;
text-align: center;
letter-spacing: 1px;
box-shadow: 0 8px 25px var(--color-gold-30);
transition: var(--transition-smooth);
position: relative;
overflow: hidden;
}
.trainer-cta-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, var(--color-white-30), transparent);
transition: left 0.6s ease;
}
.trainer-cta-primary:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 15px 40px var(--color-gold-40);
}
.trainer-cta-primary:hover::before {
left: 100%;
}
.trainer-cta-secondary {
color: var(--color-text-primary);
text-decoration: none;
font-family: var(--font-text);
font-weight: 600;
text-align: center;
transition: var(--transition-smooth);
padding: 0.5rem;
}
.trainer-cta-secondary:hover {
color: var(--color-gold);
}
/* Social proof */
.trainer-social-proof {
text-align: center;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(26, 35, 126, 0.1);
}
.trainer-social-text {
font-family: var(--font-text);
font-size: 0.85rem;
color: var(--color-text-secondary);
font-style: italic;
}
.trainer-social-number {
color: var(--color-gold);
font-weight: 700;
}
/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1200px) {
.trainer-hero-content {
gap: 3rem;
}
.trainer-section-title {
font-size: 3rem;
}
.trainer-content-card {
padding: 2.5rem 2rem;
}
}
@media (max-width: 900px) {
.section-trainer-hero {
padding: 4rem 0;
}
.trainer-section-title {
font-size: 2.1rem;
margin-bottom: 0.5rem;
}
.trainer-subtitle {
font-size: 0.95rem;
margin-bottom: 3rem;
}
.trainer-hero-content {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.trainer-photo-hero {
aspect-ratio: 4/3;
order: 1;
}
.trainer-content-card {
order: 2;
padding: 2rem 1.5rem;
}
.trainer-name {
font-size: 1.5rem;
text-align: center;
}
.trainer-role {
text-align: center;
font-size: 1rem;
}
.trainer-story {
font-size: 1rem;
text-align: center;
}
.trainer-stats-inline {
justify-content: center;
gap: 1.5rem;
}
.trainer-nav-btn {
width: 45px;
height: 45px;
}
.trainer-caption-float {
top: 20px;
left: 20px;
padding: 0.8rem 1.2rem;
font-size: 0.9rem;
}
.trainer-certification-badge {
top: 15px;
right: 15px;
padding: 0.6rem 1rem;
font-size: 0.75rem;
}
}
@media (max-width: 600px) {
.section-trainer-hero {
padding: 3rem 0;
}
.trainer-hero-container {
padding: 0 1rem;
}
.trainer-section-title {
font-size: 2rem;
}
.trainer-subtitle {
font-size: 1rem;
}
.trainer-hero-content {
gap: 2rem;
}
.trainer-content-card {
padding: 1.5rem 1rem;
border-radius: var(--radius-xl);
}
.trainer-name {
font-size: 1.3rem;
}
.trainer-role {
font-size: 0.9rem;
margin-bottom: 1.5rem;
}
.trainer-story {
font-size: 0.95rem;
line-height: 1.6;
}
.trainer-stats-inline {
flex-direction: column;
gap: 1rem;
align-items: center;
}
.trainer-stat-item {
flex-direction: column;
text-align: center;
gap: 0.2rem;
}
.trainer-nav-container {
bottom: 15px;
gap: 0.8rem;
}
.trainer-nav-btn {
width: 40px;
height: 40px;
}
.trainer-caption-float {
position: static;
margin-bottom: 1rem;
text-align: center;
}
.trainer-certification-badge {
position: static;
display: inline-block;
margin-bottom: 1rem;
}
}
@media (max-width: 400px) {
.trainer-section-title {
font-size: 1.5rem;
}
.trainer-content-card {
padding: 1.2rem 0.8rem;
}
.trainer-cta-primary {
padding: 0.8rem 1.5rem;
font-size: 0.9rem;
}
}
/* ===== AMÉLIORATIONS ACCESSIBILITÉ ===== */
.trainer-nav-btn:focus,
.trainer-dot:focus,
.trainer-cta-primary:focus,
.trainer-cta-secondary:focus {
outline: 3px solid var(--color-gold);
outline-offset: 3px;
}
/* Préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
.trainer-photo-slide,
.trainer-nav-btn,
.trainer-cta-primary {
transition: none;
}
.section-trainer-hero::before,
.section-trainer-hero::after,
.trainer-certification-badge {
animation: none;
}
}
/* Dark blue gradient backgrounds for sections */
.section-event-mastermind {
background-color: var(--color-dark-blue);
background-image:
radial-gradient(900px 600px at 80% 15%, rgba(255,255,255,0.06), transparent 60%),
radial-gradient(700px 500px at 20% 85%, var(--color-white-04), transparent 60%),
linear-gradient(135deg, #1b2c4a 0%, #15243b 50%, #0f1b2f 100%);
}
/* Reusable dark gradient section (Tailwind: bg-gradient-to-br from-slate-800 via-slate-900 to-blue-900) */
.section-dark-gradient {
background-color: #0f172a; /* slate-900 fallback */
background-image: linear-gradient(to bottom right, #1f2937 0%, #0f172a 50%, #1e3a8a 100%);
min-height: 100vh; /* min-h-screen */
display: flex; /* flex */
align-items: center; /* items-center */
padding: 4rem 1rem; /* py-16 px-4 */
}
/* Light gradient background (white nuances like dark variant) */
.section-light-gradient {
background-color: var(--color-card);
background-image:
radial-gradient(900px 600px at 80% 15%, rgba(0,0,0,0.06), transparent 60%),
radial-gradient(700px 500px at 20% 85%, var(--color-black-04), transparent 60%),
linear-gradient(135deg, var(--color-card) 0%, #f7f9fc 50%, #eef3ff 100%);
}
/* === AMÉLIORATIONS GLOBALES RESPONSIVE === */
/* Amélioration des boutons tactiles pour mobile */
@media (max-width: 768px) {
button:not(.exclude-responsive), .btn:not(.exclude-responsive), a[role="button"]:not(.exclude-responsive) {
min-height: 44px;
padding: clamp(0.6rem, 3vw, 1rem) clamp(1rem, 4vw, 1.5rem);
font-size: clamp(0.9rem, 3.5vw, 1.1rem);
}
/* Amélioration des espacements pour mobile */
.container:not(.exclude-responsive), .section-container:not(.exclude-responsive) {
padding-left: clamp(1rem, 4vw, 2rem);
padding-right: clamp(1rem, 4vw, 2rem);
}
}
/* Optimisations pour très petits écrans */
@media (max-width: 400px) {
button:not(.exclude-responsive), .btn:not(.exclude-responsive), a[role="button"]:not(.exclude-responsive) {
min-height: 48px;
font-size: clamp(0.85rem, 4vw, 1rem);
padding: clamp(0.7rem, 4vw, 1.2rem) clamp(1.2rem, 5vw, 2rem);
}
/* Réduction des espacements sur très petits écrans */
section:not(.exclude-responsive) {
padding-top: clamp(2rem, 8vw, 3rem);
padding-bottom: clamp(2rem, 8vw, 3rem);
}
}
/* Optimisations pour grandes tablettes */
@media (min-width: 1025px) and (max-width: 1200px) {
.container:not(.exclude-responsive) {
max-width: 1024px;
margin: 0 auto;
}
}
/* === MODAL DE CONTACT === */
.contact-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--color-black-70);
backdrop-filter: blur(5px);
z-index: 1000;
justify-content: center;
align-items: center;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.contact-modal-content {
background: var(--color-light);
border-radius: var(--radius-xl);
width: 90%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 60px var(--color-black-30);
animation: slideUp 0.3s ease;
border: 2px solid var(--color-gold);
}
@keyframes slideUp {
from {
transform: translateY(50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.contact-modal-header {
padding: 2rem 2rem 1rem 2rem;
border-bottom: 2px solid var(--color-gold-20);
display: flex;
justify-content: space-between;
align-items: center;
}
.contact-modal-header h3 {
margin: 0;
color: var(--color-dark-blue);
font-family: var(--font-title);
font-size: 1.5rem;
font-weight: 800;
}
.contact-modal-close {
background: none;
border: none;
font-size: 1.5rem;
color: var(--color-dark-blue);
cursor: pointer;
padding: 0.5rem;
border-radius: var(--radius-round);
transition: var(--transition-default);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.contact-modal-close:hover {
background: var(--color-gold);
color: var(--color-light);
transform: rotate(90deg);
}
.contact-modal-body {
padding: 1rem 2rem 2rem 2rem;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.contact-form-group {
display: flex;
flex-direction: column;
}
.contact-form-group label {
font-family: var(--font-title);
font-weight: 600;
color: var(--color-dark-blue);
margin-bottom: 0.5rem;
font-size: 0.95rem;
}
.contact-form-group input,
.contact-form-group select,
.contact-form-group textarea {
padding: 0.8rem 1rem;
border: 2px solid var(--color-gold-30);
border-radius: var(--radius-sm);
font-family: var(--font-text);
font-size: 1rem;
background: #fff;
transition: var(--transition-default);
}
.contact-form-group input:focus,
.contact-form-group select:focus,
.contact-form-group textarea:focus {
outline: none;
border-color: var(--color-gold);
box-shadow: 0 0 0 3px var(--color-gold-10);
}
.contact-form-group textarea {
resize: vertical;
min-height: 100px;
}
.contact-form-actions {
display: flex;
gap: 1rem;
justify-content: flex-end;
margin-top: 1rem;
}
.contact-btn-secondary {
padding: 0.8rem 1.5rem;
background: transparent;
color: var(--color-dark-blue);
border: 2px solid var(--color-gold-30);
border-radius: var(--radius-3xl);
font-family: var(--font-title);
font-weight: 600;
cursor: pointer;
transition: var(--transition-default);
}
.contact-btn-secondary:hover {
background: var(--color-gold-10);
border-color: var(--color-gold);
}
.contact-btn-primary {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.8rem 1.5rem;
background: var(--color-gold);
color: var(--color-dark-blue);
border: none;
border-radius: var(--radius-3xl);
font-family: var(--font-title);
font-weight: 700;
cursor: pointer;
transition: var(--transition-default);
box-shadow: 0 4px 15px var(--color-gold-30);
}
.contact-btn-primary:hover {
background: var(--color-dark-blue);
color: var(--color-gold);
transform: translateY(-2px);
box-shadow: 0 6px 20px var(--color-gold-40);
}
/* Bouton CTA vers témoignages depuis mastermind */
.mastermind-testimonials-cta {
text-align: center;
margin-top: 3rem;
padding: 0 2rem;
}
.mastermind-testimonials-cta .trainer-cta-secondary {
color: var(--color-gold);
font-size: 1.1rem;
font-weight: 700;
background: var(--color-white-10);
padding: 1rem 2rem;
border-radius: var(--radius-3xl);
border: 2px solid var(--color-gold);
transition: var(--transition-default);
display: inline-block;
backdrop-filter: blur(10px);
}
.mastermind-testimonials-cta .trainer-cta-secondary:hover {
background: var(--color-gold);
color: var(--color-dark-blue);
transform: translateY(-2px);
box-shadow: 0 8px 25px var(--color-gold-40);
}
/* Responsive pour la modal */
@media (max-width: 768px) {
.contact-modal-content {
width: 95%;
margin: 1rem;
}
.mastermind-testimonials-cta {
margin-top: 2rem;
padding: 0 1rem;
}
.mastermind-testimonials-cta .trainer-cta-secondary {
font-size: 1rem;
padding: 0.8rem 1.5rem;
border-radius: var(--radius-xl);
}
.contact-modal-header {
padding: 1.5rem 1.5rem 1rem 1.5rem;
}
.contact-modal-header h3 {
font-size: 1.3rem;
}
.contact-modal-body {
padding: 1rem 1.5rem 1.5rem 1.5rem;
}
.contact-form-actions {
flex-direction: column-reverse;
gap: 0.8rem;
}
.contact-btn-secondary,
.contact-btn-primary {
width: 100%;
justify-content: center;
}
}
/* ===== CONTRAINTES POUR GRANDS ÉCRANS ===== */
@media (min-width: 1921px) {
/* Limite la largeur maximale du contenu pour éviter les lignes trop longues */
.container {
max-width: 1600px;
}
/* Limite la longueur des lignes de texte pour une meilleure lisibilité */
p:not(.exclude-line-length),
li:not(.exclude-line-length) {
max-width: 75ch;
}
/* Centre le contenu sur les écrans ultra-larges */
body > section {
max-width: 2400px;
margin-left: auto;
margin-right: auto;
}
/* Optimise les grids pour les grands écrans */
.testimonials-grid,
.offres,
.programme-cards-vertical {
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
max-width: 1800px;
margin-left: auto;
margin-right: auto;
}
}