/* =================================================================== */
/* ===         FICHIER CSS ODYSSEUS - VERSION 3.4 (NETTOYÉ)        === */
/* =================================================================== */

/* =========================================== */
/* === 1. STYLES POUR L'ÉCRAN D'INTRODUCTION === */
/* =========================================== */
#ecran-introduction { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; background-color: #000; font-family: 'Segoe UI', sans-serif; }
#ecran-introduction .scene { position: relative; width: 100%; height: 100%; overflow: hidden; }
#ecran-introduction .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; background-image: url("../Media/LOGO_MARQUE_SLOGAN.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; }
#ecran-introduction .door-left, #ecran-introduction .door-right { position: absolute; top: 0; width: 50vw; height: 100vh; background-repeat: no-repeat; background-size: cover; z-index: 2; transition: transform 3.2s ease-in-out; }
#ecran-introduction .door-left { left: 0; background-image: url("../Media/Porte_gauche.webp"); background-position: right center; }
#ecran-introduction .door-right { right: 0; background-image: url("../Media/Porte_droite.webp"); background-position: left center; }
#ecran-introduction .ouvert .door-left { transform: translateX(-100%); }
#ecran-introduction .ouvert .door-right { transform: translateX(100%); }
#ecran-introduction .btn-wrapper { position: absolute; bottom: 5vh; left: 50%; transform: translateX(-50%); z-index: 10; }
#ecran-introduction .btn-odysseus { background-color: #005f73; border: none; color: #fff; font-weight: bold; font-size: 1.2em; padding: 1em 2em; border-radius: 50px; cursor: pointer; transition: background-color 0.3s ease; }
#ecran-introduction .btn-odysseus:hover { background-color: #0a9396; }
#ecran-introduction .fade { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: black; opacity: 0; pointer-events: none; transition: opacity 1s ease-in-out; z-index: 100; }
#ecran-introduction .fade.visible { opacity: 1; }
#ecran-introduction .intro-odysseus-marbre { position: absolute; left: 50%; top: 10vh; transform: translateX(-50%); z-index: 10; width: 45vw; max-width: 420px; min-width: 300px; padding: 1.8em 1.5em; font-size: 1.1rem; line-height: 1.6; text-align: center; font-family: 'Georgia', serif; font-weight: 600; background: url('../Media/marbre-blanc.webp') center/cover no-repeat; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); border: 2px solid #C4971E; color: #C4971E; text-shadow: 0 1px 0 #fff, 0 -1px 1px rgba(0, 0, 0, 0.3); }
@media screen and (max-width: 768px) { #ecran-introduction .background { background-image: url("../Media/OdysseusMob.webp"); } #ecran-introduction .door-left { background-image: url("../Media/PorteGaucheMob.webp"); } #ecran-introduction .door-right { background-image: url("../Media/PorteDroiteMob.webp"); } }
@media screen and (max-width: 480px) { #ecran-introduction .intro-odysseus-marbre { top: 5vh; width: 85vw; font-size: 1rem; padding: 1.2em; } }
/* Anti-FOUC pour l'écran d'introduction */
.intro-skipped #ecran-introduction {
  display: none !important;
}
.intro-skipped #contenu-principal {
  display: block !important;
}



#backToTop { position: fixed; bottom: 2em; right: 1.5em; padding: 0.6em 0.9em; font-size: 1.2rem; background-color: var(--doré); color: var(--blanc-pur); border: none; border-radius: 50%; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); display: none; z-index: 100; transition: opacity 0.3s ease, transform 0.3s ease; }
#backToTop:hover { background-color: #a88d2f; transform: scale(1.1); }
.main-header { display: flex; align-items: center; justify-content: space-between; background: var(--crème); padding: 0.8em 1.5em; position: relative; width: 100%; }
.nav-logo-link { flex: 1 0 150px; display: flex; justify-content: flex-start; }
.nav-logo { max-height: 55px; width: auto; }
.main-nav { flex: 2 1 auto; display: flex; justify-content: center; }
.nav-links { display: flex; gap: 1.4em; list-style: none; margin: 0; padding: 0; }
.nav-links a { font-weight: bold; color: var(--bleu-nuit); font-size: 1.1rem; text-decoration: none; transition: color 0.3s; white-space: nowrap; }
/* =========================================================
   ACCESSIBILITÉ — BARRE FLOTTANTE GLOBALE (toutes pages)
   ========================================================= */
.access-toolbar{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;

  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;

  border: 2px solid var(--doré);
  border-radius: 999px;
  background: rgba(30, 31, 43, 0.94);
  backdrop-filter: blur(6px);
}

/* Boutons */
.access-toolbar button{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: transparent;
  color: #ffffff;
  font-size: 18px;
  line-height: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition: transform 0.15s ease;
}

/* Hover léger */
.access-toolbar button:hover{
  transform: scale(1.05);
}

/* Focus clavier (WCAG) */
.access-toolbar button:focus-visible{
  outline: 3px solid var(--doré);
  outline-offset: 3px;
}

/* Mobile : un poil plus compact */
@media (max-width: 480px){
  .access-toolbar{
    right: 12px;
    bottom: 12px;
    padding: 8px 10px;
  }
}

@media (max-width: 1024px) { .nav-links { gap: 1em; } .nav-links a { font-size: 1rem; } }
@media (max-width: 900px) { .main-header { flex-direction: column; padding: 0.7em 1em; } .main-nav { order: 2; width: 100%; margin: 0.8em 0; } .nav-logo-link { order: 0; } .nav-links { justify-content: center; flex-wrap: wrap; } }
.burger-btn { display: none; flex-direction: column; justify-content: space-around; width: 30px; height: 30px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 2000; }
.burger-btn span { width: 30px; height: 3px; background-color: var(--bleu-nuit); border-radius: 10px; transition: all 0.3s linear; position: relative; transform-origin: 1px; }
.mobile-menu { position: fixed; top: 0; left: 0; width: 300px; height: 100vh; background-color: var(--crème); box-shadow: 2px 0 10px rgba(0,0,0,0.2); transform: translateX(-100%); transition: transform 0.3s ease-in-out; z-index: 1999; padding: 1em; display: flex; flex-direction: column; }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-header { display: flex; justify-content: flex-end; align-items: center; padding-bottom: 1em; border-bottom: 1px solid var(--gris-clair); }
.close-menu-btn { background: none; border: none; font-size: 2.5rem; cursor: pointer; color: var(--bleu-nuit); }
.mobile-nav ul { list-style: none; padding: 0; margin: 1em 0; }
.mobile-nav ul li a { display: block; padding: 1em; font-size: 1.2rem; font-weight: bold; color: var(--bleu-nuit); text-decoration: none; border-radius: 8px; }
.mobile-nav ul li a:hover { background-color: var(--rose-tendre); }
@media (max-width: 900px) { .burger-btn { display: flex; position: absolute; top: 50%; left: 15px; transform: translateY(-50%); } .main-nav { display: none; } .main-header { justify-content: center; } .nav-logo-link { flex: 0 1 auto; } .access-toolbar { position: static; order: 3; width: 100%; justify-content: center; margin-top: 0.5em; } }
.hero { background-color: var(--bleu-nuit); color: var(--blanc-pur); text-align: center; padding: 5em 1em; border-radius: 12px; margin: 2em 0; }
.jo-avatar { width: 160px; max-width: 100%; height: auto; border-radius: 50%; display: block; margin: 0 auto 1rem auto; }
.hero h1 { font-size: 2.5em; margin-bottom: 0.5em; }
.hero p { font-size: 1.2em; margin-bottom: 1.5em; }
.section.jo-enhanced { background: linear-gradient(120deg, #fbeeee 0%, var(--crème) 100%); padding: 4em 1em; }
.jo-wrapper { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2em; }
.jo-image img { width: 180px; height: 180px; border-radius: 50%; box-shadow: 0 10px 30px rgba(0,0,0,0.2); object-fit: cover; transition: transform 0.3s ease; }
.jo-image img:hover { transform: scale(1.05); }
.jo-text { max-width: 500px; text-align: center; }
.jo-text h2 { font-size: 2rem; color: var(--bleu-nuit); }
.jo-text p { font-size: 1.1rem; line-height: 1.6; color: #222; }
.fade-in { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease-out forwards; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
.chroniques-cards { background-color: var(--crème); padding: 3em 1em; text-align: center; }
.card-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 2em; margin-top: 2em; }
.mystic-card { background: linear-gradient(145deg, var(--rose-tendre), #fff); border-radius: 20px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); padding: 2em; width: 280px; transition: transform 0.4s ease, box-shadow 0.4s ease; display: flex; flex-direction: column; align-items: center; text-align: center; }
.mystic-card:hover { transform: scale(1.03); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15); }
.mystic-card h2 { color: var(--link-color); margin-bottom: 0.5em; font-size: 1.3rem; }
.mystic-card p { font-size: 1rem; line-height: 1.5; color: #333; margin-bottom: 1.5em; }
.mystic-card .cta-button { background-color: var(--accent-color); color: var(--blanc-pur); padding: 0.6em 1.5em; border-radius: 20px; font-weight: bold; text-decoration: none; transition: background-color 0.3s ease; }
.mystic-card .cta-button:hover { background-color: #a88d2f; }

/* === SECTION TÉMOIGNAGES - CORRECTION FINALE ET STABLE v4.0 === */
.temoignages-carousel {
  padding: 4em 1em;
  background-color: var(--crème);
}
.carousel-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  max-width: 600px; /* Un peu plus d'espace pour l'ombre */
  margin: 0 auto;
}
.carousel {
  /* Ce conteneur va héberger les cartes superposées */
  position: relative;
  width: 100%;
  min-height: 180px; /* Empêche le conteneur de s'effondrer au chargement */
}
.card {
  /* Toutes les cartes sont superposées et invisibles par défaut */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--blanc-pur);
  border-radius: 20px;
  padding: 2em;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s ease-in-out; /* Animation de fondu */
  visibility: hidden;
}
.card.active {
  /* La carte active devient visible et prend sa place dans le flux */
  opacity: 1;
  visibility: visible;
  position: relative; /* CRUCIAL : Permet au parent de prendre la hauteur de cette carte */
}
.card p {
  font-size: 1.2rem;
  font-style: italic;
  color: var(--bleu-nuit);
  margin-bottom: 1em;
}
.card span {
  font-weight: bold;
  color: var(--doré);
}
.arrow {
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: var(--bleu-nuit);
  transition: color 0.3s ease;
}
.arrow:hover, .arrow:focus {
  color: var(--doré);
  outline: none;
}

.univers-immersif { background-color: var(--rose-tendre); padding: 3em 1em; text-align: center; }
.univers-immersif .intro { color: var(--texte); font-size: 1.1rem; margin-bottom: 2em; }
.media-wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5em; align-items: center; }

/* ======================================================= */
/* === SECTION VIDÉO - VERSION CORRIGÉE ET STABILISÉE v4.0 === */
/* ======================================================= */

.video-bloc {
  position: relative;
  width: 100%;
  max-width: 560px; /* La largeur maximale de votre bloc vidéo */
  margin: 0 auto; /* Pour centrer le bloc dans son conteneur flex */
  aspect-ratio: 16 / 9; /* Réserve l'espace et empêche le CLS */
  background-color: #000; /* Un fond pendant le chargement pour éviter un flash blanc */
  border-radius: 12px;
  overflow: hidden; /* Assure que tout ce qui est à l'intérieur respecte les coins arrondis */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.video-facade,
.video-bloc iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-facade {
  cursor: pointer;
}

.video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Assure que l'image remplit l'espace sans se déformer */
  transition: transform 0.3s ease;
}

.video-facade:hover img {
  transform: scale(1.05);
}

.video-facade .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  border: 3px solid white;
  transition: background-color 0.3s ease;
}

.video-facade .play-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 0 15px 26px;
  border-color: transparent transparent transparent white;
}

.video-facade:hover .play-button {
  background-color: rgba(191, 162, 64, 0.8);
}

.audio-bloc { max-width: 400px; width: 100%; background-color: var(--blanc-pur); padding: 1.5em; border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); }
.audio-bloc p { margin-bottom: 1em; font-weight: bold; color: var(--bleu-nuit); }
.mission-odysseus { background-color: var(--crème); padding: 3.5em 1em; }
.mission-odysseus h2 { font-size: 2rem; color: var(--bleu-nuit); margin-bottom: 1rem; }
.mission-odysseus p { font-size: 1.1rem; max-width: 700px; margin: 0 auto; color: var(--texte); line-height: 1.7; }
.univers-description { max-width: 700px; margin: 2em auto 0; padding: 1em; font-size: 1.05rem; line-height: 1.7; text-align: center; color: var(--bleu-nuit); }
.univers-description em { color: var(--doré); font-style: italic; }
.jo-mission { background-color: var(--crème); padding: 3em 1em; clear: both; overflow: hidden; }
.jo-mission-wrapper { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 2em; max-width: 800px; margin: 0 auto; text-align: left; }
.jo-mission-image img { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.jo-mission-text { flex: 1; text-align: left; }
.jo-mission-text h2 { font-size: 2rem; margin-bottom: 1rem; color: var(--bleu-nuit); }
.jo-mission-text p em { display: block; margin-bottom: 1em; color: var(--doré); font-style: italic; font-weight: normal; }
.jo-mission-text em { color: var(--doré); font-style: italic; }
.lettrine-grande { float: left; font-size: 3rem; line-height: 1; padding-right: 0.2em; font-family: Georgia, serif; font-weight: bold; color: var(--doré); }
section + section { margin-top: 0 !important; }
.mission-odysseus { text-align: center; }
.mission-odysseus h2, .jo-mission-text h2, .univers-immersif h2, .chroniques-cards h2 { position: relative; text-align: center; margin-bottom: 1.5em; }
section h2 { font-size: 2rem; color: var(--bleu-nuit); text-align: center; margin-bottom: 1.5em; position: relative; }
section h2::after { content: ""; display: block; width: 60px; height: 3px; background-color: var(--doré); margin: 0.5em auto 0; border-radius: 3px; }
.hero-page { background-color: var(--bleu-nuit); color: var(--blanc-pur); text-align: center; padding: 3em 1em; margin-bottom: 0; }
.hero-page h1 { font-size: 2.5rem; margin: 0; }
.hero-page p { font-size: 1.1rem; margin-top: 1em; }
.page-content { max-width: var(--max-width); margin: 0 auto; padding: 2em 1em; background-color: var(--blanc-pur); border-radius: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05); }
.page-content p { font-size: 1.05rem; line-height: 1.8; color: var(--texte); margin-bottom: 1.5em; }
.page-content h2 { font-size: 2rem; color: var(--bleu-nuit); margin-top: 2em; text-align: center; position: relative; }
.page-content h2::after { content: ""; display: block; width: 60px; height: 3px; background-color: var(--doré); margin: 0.5em auto 0; border-radius: 3px; }
.cta-section { background-color: var(--rose-tendre); text-align: center; padding: 3em 1em; margin-top: 3em; }
.cta-section p { font-size: 1.2rem; color: var(--texte); margin-bottom: 1.5em; }
.cta-section .cta-button { background-color: var(--doré); color: var(--blanc-pur); padding: 0.8em 2em; border-radius: 25px; font-weight: bold; text-decoration: none; transition: background-color 0.3s ease; }
.cta-section .cta-button:hover { background-color: #a88d2f; }
.concept-header { position: relative; height: 300px; overflow: hidden; }
.concept-header img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.7); }
.overlay-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--blanc-pur); text-align: center; }
.overlay-text h1 { font-size: 2.8rem; margin: 0; text-shadow: 2px 2px 8px rgba(0,0,0,0.4); }
.concept-section { background-color: var(--crème); padding: 3em 1em; text-align: center; }
.concept-section.alt { background-color: var(--rose-tendre); }
.concept-section h2 { font-size: 2rem; color: var(--bleu-nuit); margin-bottom: 1em; position: relative; }
.concept-section h2::after { content: ""; display: block; width: 60px; height: 3px; background-color: var(--doré); margin: 0.5em auto 0; border-radius: 3px; }
.objectifs-list { display: grid; grid-template-columns: repeat(2, minmax(300px, 1fr)); gap: 1.5em; list-style: none; padding: 0; margin: 2em auto; max-width: 1000px; }
.objectifs-list li { background-color: var(--card-bg); color: var(--link-color); padding: 1.2em 1.5em; border-radius: 12px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); font-size: 1.05rem; font-weight: bold; display: flex; align-items: center; gap: 0.8em; transition: transform 0.3s ease; }
.objectifs-list li:hover { transform: translateY(-4px); }
@media (max-width: 768px) { .objectifs-list { grid-template-columns: 1fr; } }
.timeline-list { list-style: none; padding: 0; margin: 2em auto; max-width: 700px; text-align: left; }
.timeline-list li { margin-bottom: 1em; border-left: 4px solid var(--doré); padding-left: 1em; color: var(--bleu-nuit); font-size: 1.05rem; }
.timeline { background-color: var(--crème); padding: 3em 1em; }
.odysseus-aide { background-color: var(--crème); padding: 3em 1em; text-align: center; }
.odysseus-aide h2 { font-size: 2rem; color: var(--bleu-nuit); margin-bottom: 2em; position: relative; }
.odysseus-aide h2::after { content: ""; display: block; width: 60px; height: 3px; background-color: var(--doré); margin: 0.5em auto 0; border-radius: 3px; }
.audiences-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5em; }
.audience-card { width: 220px; background-color: var(--rose-tendre); padding: 2em 1em; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); font-size: 1.4rem; font-weight: 500; color: var(--bleu-nuit); display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform 0.3s ease; }
.audience-card:hover { transform: translateY(-5px); }
.audience-card strong { margin-top: 0.6em; font-size: 1rem; color: var(--bleu-nuit); }
.audience-card span { margin-top: 0.4em; font-size: 0.9rem; line-height: 1.4; color: #333; font-weight: normal; }
@media (max-width: 768px) { .audience-card { width: 100%; max-width: 280px; } }
.founder-note { background-color: var(--crème); padding: 3em 1em; text-align: center; }
.founder-card { max-width: 800px; margin: auto; background-color: var(--rose-tendre); padding: 3em 2em; border-radius: 16px; position: relative; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05); }
.quote-mark { font-size: 4rem; line-height: 0.8; color: var(--doré); position: absolute; top: 0.4em; left: 1em; font-family: Georgia, serif; }
.founder-text { font-size: 1.2rem; line-height: 1.8; color: var(--bleu-nuit); margin-bottom: 1.5em; }
.founder-name { font-weight: bold; color: var(--doré); font-size: 1rem; }
.vision-block { background-color: var(--crème); padding: 3em 1em; text-align: center; }
.vision-block h2 { font-size: 2rem; color: var(--bleu-nuit); margin-bottom: 1.5em; position: relative; }
.vision-block h2::after { content: ""; display: block; width: 60px; height: 3px; background-color: var(--doré); margin: 0.5em auto 0; border-radius: 3px; }
.intro-vision { max-width: 700px; margin: 0 auto 3em auto; font-size: 1.1rem; color: var(--texte); line-height: 1.7; }
.founder-card.compact { max-width: 700px; margin: 0 auto; background-color: var(--rose-tendre); padding: 2.5em 2em; border-radius: 16px; position: relative; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04); text-align: left; }
.founder-card.compact .quote-mark { font-size: 4rem; color: var(--doré); position: absolute; top: -0.5em; left: 0.6em; line-height: 1; opacity: 0.4; }
.symbolic-map { background-color: var(--rose-tendre); padding: 3em 1em; text-align: center; }
.symbolic-map h2 { font-size: 2rem; margin-bottom: 2em; color: var(--bleu-nuit); }
.symbolic-map img { max-width: 600px; width: 90%; height: auto; margin: 0 auto; display: block; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); }
@media (max-width: 500px) { .symbolic-map img { max-width: 90%; } }
.poles-section { margin: 3em 0; text-align: center; }
.section-title { font-size: 2em; color: var(--bleu-nuit); margin-bottom: 0.5em; }
.section-intro { max-width: 700px; margin: 0 auto 2em; color: var(--texte); }
.poles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2em; }
.pole-card { background: var(--blanc-pur); border: 2px solid var(--doré); border-radius: 16px; padding: 1.5em; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 0 10px rgba(0,0,0,0.05); }
.pole-card:hover { transform: translateY(-5px); box-shadow: 0 0 20px rgba(0,0,0,0.1); }
.pole-card h3 { color: var(--bleu-nuit); margin-top: 1em; }
.pole-card p { font-size: 0.95em; color: var(--texte); }
.pole-icon { width: 100%; height: 160px; object-fit: cover; border-radius: 12px; }
.contact-page .section-intro { max-width: 700px; margin: 0 auto 2em; font-size: 1.1em; text-align: center; color: var(--texte); }
.contact-hero { background-color: var(--bleu-nuit); color: var(--blanc-pur); text-align: center; padding: 3em 1em; }
.contact-hero h1 { font-size: 2.5em; margin-bottom: 0.5em; }
.contact-hero p { font-size: 1.2em; line-height: 1.6; max-width: 700px; margin: 0 auto; }
.thank-you-section { text-align: center; margin: 3em 1em; }
.thank-you-img { max-width: 240px; width: 100%; height: auto; margin-bottom: 1.5em; }
.thank-you-text { font-size: 1.1em; color: var(--bleu-nuit); }
/* --- MODIFIÉ --- Espacement des sections de la page équipe --- */
.team-section, .partners-section { background-color: var(--crème); padding: 2.5em 1em; text-align: center; } /* AVANT: 3em 1em */
.team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2em; }
/* --- MODIFIÉ --- Hauteur des cartes --- */
.team-card { background-color: var(--blanc-pur); border: 1px solid var(--gris-clair); border-radius: 16px; padding: 1.5em; width: 260px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform 0.3s ease; min-height: auto; } /* AVANT: min-height: 440px, padding: 2em, width: 280px */
.team-card:hover { transform: translateY(-5px); }
.team-card img { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; margin-bottom: 1em; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); }
/* --- AJOUTÉ --- Règle spécifique pour le logo Klona --- */
.team-card.logo-card img.partner-logo {
    border-radius: 8px; 
    box-shadow: none; 
    object-fit: contain; 
    width: 80%; 
    height: 120px; 
}
.team-card h3 { font-size: 1.2rem; color: var(--bleu-nuit); margin-bottom: 0.2em; }
.team-card .role { font-weight: bold; color: var(--doré); font-size: 0.9rem; margin-bottom: 0.8em; }
.team-card .bio { font-size: 0.9rem; color: var(--texte); line-height: 1.5; flex-grow: 1; }
.partners-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; /* <<< LA CORRECTION EST ICI */
  gap: 2em; margin-top: 2em; }
.partners-logos img { max-width: 140px; height: auto; opacity: 0.9; transition: transform 0.3s ease, opacity 0.3s ease; }
.partners-logos img:hover { transform: scale(1.05); opacity: 1; }

.victoires-section { padding: 3em 2em; background-color: var(--crème); }
.victoires-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 4em; align-items: flex-start; }
.victoire-bloc { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 340px; width: 100%; box-sizing: border-box; gap: 1.2em; }
.medaille-img { width: 100%; max-width: 140px; height: auto; margin-bottom: 0.2em; }
.medaille-contenu { display: flex; flex-direction: column; align-items: center; gap: 1em; padding: 0 1em; }
.logo-victoire { max-width: 120px; height: auto; margin: 0 auto; }
.medaille-contenu h3 { font-size: 1.2rem; font-weight: 700; margin: 0; color: var(--bleu-nuit); }
.medaille-contenu p { font-size: 1.05rem; line-height: 1.6; margin: 0; color: var(--texte); max-width: 280px; }
.logo-handitech { max-width: 160px; margin-bottom: 0.5em; }
.contact-container-flex { display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: 3em; padding: 3em 1em; background: var(--crème); }
.contact-card.small { max-width: 420px; width: 100%; padding: 2em 2.5em; border-radius: 16px; border: 1px solid #e0e0e0; box-shadow: 0 8px 30px rgba(0,0,0,0.06); background: var(--blanc-pur); }
.contact-card.small h2 { font-size: 1.8rem; text-align: center; margin-top: 0; margin-bottom: 0.5em; color: var(--bleu-nuit); }
.contact-card.small .contact-text { text-align: center; font-size: 1rem; color: var(--texte); margin-bottom: 2em; line-height: 1.5; }
.contact-form { display: flex; flex-direction: column; gap: 1.2em; }
.contact-form label { font-weight: bold; color: var(--bleu-nuit); margin-bottom: -0.8em; }
.contact-form input, .contact-form textarea { width: 100%; padding: 0.8em; font-size: 1rem; border-radius: 8px; border: 1px solid var(--gris-clair); transition: border-color 0.3s; }
.contact-form .cta-button { margin-top: 1em; align-self: center; }
.contact-thanks { max-width: 380px; width: 100%; text-align: center; padding-top: 2em; }
.contact-thanks .thank-you-img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin-bottom: 1.5em; box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
.contact-thanks .thank-you-text { font-size: 1.1rem; color: var(--texte); line-height: 1.7; }
.team-stars { background: var(--crème); padding: 3em 1em; }
.team-grid-fun { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5em; }
.team-aura-card { background: linear-gradient(135deg, var(--rose-tendre), var(--blanc-pur)); border: 1px solid var(--doré); border-radius: 20px; padding: 2em; width: 100%; max-width: 280px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.07); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; align-items: center; }
.team-aura-card:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(191, 162, 64, 0.2); }
.team-aura-card img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; margin-bottom: 1.5em; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); border: 3px solid var(--blanc-pur); }
.team-aura-card h3 { font-size: 1.3rem; margin-bottom: 0.2em; color: var(--bleu-nuit); }
.team-aura-card .role { font-weight: bold; font-size: 0.9rem; color: var(--doré); margin-bottom: 1em; min-height: 2.5em; }
.team-aura-card .bio { font-size: 0.95rem; color: var(--texte); line-height: 1.5; }
.soutiens-section { padding-bottom: 0; }
.soutiens-titre { font-size: 2.2em; text-align: center; margin-bottom: 1.5em; color: var(--bleu-nuit); }
.partners-stars { background: var(--crème); padding: 3em 1em; text-align: center; }
.partners-stars h2 { font-size: 2rem; margin-bottom: 2em; color: var(--bleu-nuit); }
.logo-circle { display: flex; flex-wrap: wrap; justify-content: center; gap: 3em; align-items: center; }
.logo-circle img { height: auto; width: auto; max-height: 80px; max-width: 160px; object-fit: contain; transition: transform 0.3s ease; }
.logo-circle img:hover { transform: scale(1.08); }
.partenaires-tech { background-color: var(--rose-tendre); padding: 3em 1em; text-align: center; color: var(--bleu-nuit); }
.partenaires-tech h2 { font-size: 2em; margin-bottom: 0.5em; }
.partenaires-tech .intro { font-size: 1.1em; margin-bottom: 2em; max-width: 800px; margin-left: auto; margin-right: auto; }
.logos-tech { display: flex; flex-wrap: wrap; justify-content: center; gap: 3em; align-items: center; }
.logos-tech .logo-item img { height: auto; width: auto; max-height: 80px; max-width: 160px; transition: transform 0.3s ease; display: block; margin: 0 auto; }
.logos-tech .logo-item img:hover { transform: scale(1.05); }
footer.site-footer { background-color: var(--crème); padding: 2em 1em; font-size: 0.9em; color: var(--bleu-nuit); margin-top: 3em; }
footer.site-footer .footer-container { max-width: var(--max-width); margin: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1em; }
footer.site-footer .footer-logo img { max-height: 50px; width: auto; }
footer.site-footer .footer-links ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 2em; justify-content: center; }
footer.site-footer .footer-links a:hover { color: var(--doré); }
footer.site-footer .footer-contact { text-align: right; }
@media (max-width: 768px) { footer.site-footer .footer-container { flex-direction: column; text-align: center; } footer.site-footer .footer-contact { text-align: center; } }

/* =======================================================
   PAGE FORMATION – suppression du voile de section luxe
   ======================================================= */

/* On force les sections de la page formation à être au-dessus
   et on supprime le pseudo-élément de voile */
.formation-page section {
  position: relative;
  z-index: 1;
}

.formation-page section::before {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 1 !important;
  z-index: auto !important;
}

/* =======================================================
   PAGE FORMATION – largeur améliorée des cartes intervenants
   ======================================================= */

/* On élargit la grille des profils */
.formation-page .team-aura-grid {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); /* ancien min: 280px */
  gap: 2.5rem;
}

/* On élargit un peu les cartes elles-mêmes */
.formation-page .team-aura-card {
  padding: 2.6rem 2.4rem !important;  /* espace interne plus confortable */
  max-width: 520px;                   /* limite haute élégante */
  margin-left: auto;
  margin-right: auto;                 /* centrage propre */
}

/* =========================================================
   ACCESSIBILITÉ — TEXTE VISUELLEMENT CACHÉ (SR-ONLY)
   ========================================================= */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}