/* =====================================
   ✅ CSS GLOBAL FINANCE TUTORING
   ===================================== */

/* 🔵 MISE EN PAGE GÉNÉRALE */
body {
  background: #f4f4f4;
  font: 18px Verdana, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 🔵 CONTAINER */
#container {
  margin: 0 auto;
  width: 95%;
  max-width: 1400px;
  background: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  flex: 1;
}

/* 🔵 HEADER */
#header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 0;
  height: 200px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

#header img {
  max-width: 90%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 🔵 NAVIGATION MENU */
#navigation {
  width: 100%;
  background: #ffffff;
  padding: 10px 0;
  border-bottom: 2px solid #ddd;
  text-align: center;
}

#navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

#navigation li {
  margin: 0 10px;
}

#navigation a {
  display: inline-block;
  padding: 10px 15px;
  color: black;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
}

#navigation a:hover,
#navigation .current a {
  background: #800020 !important;
  color: white !important;
  border-radius: 5px;
}

/* 🔵 CONTENU PRINCIPAL */
#content {
  padding: 30px;
  max-width: 1100px;
  margin: auto;
  text-align: left;
}

/* 🔵 LISTES */
ul {
  padding-left: 20px;
  margin-top: 0;
  list-style-type: disc;
}

ul ul {
  margin-left: 20px;
  margin-top: 2px;
  list-style-type: circle;
}

/* 🔵 TITRES ET TEXTES */
h1 {
  font-weight: bold !important;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  color: #2c3e50;
  margin-top: 10px;
  margin-bottom: 5px;
}

.price {
  font-size: 18px;
  font-weight: bold;
  color: #800020;
}

.cas-pratique {
  font-weight: bold;
  color: #c0392b;
  margin-top: 10px;
}

/* 🔵 FOOTER */
#footer {
  width: 100%;
  background: #ffffff;
  text-align: left;
  padding: 10px 15px;
  border-top: 2px solid #ddd;
  font-size: 12px;
}

/* 🔵 ONGLET NAVIGATION */
.tabs {
  display: flex;
  justify-content: center;
  border-bottom: 2px solid #ddd;
  gap: 10px;
  flex-wrap: wrap;
}

.tab {
  flex: 1;
  padding: 12px;
  cursor: pointer;
  background: #d3d3d3;
  color: #666;
  text-align: center;
  max-width: 33.33%;
  font-weight: 600;
  transition: all 0.3s ease;
}

.tab.active {
  background: #800020;
  color: white;
  font-weight: bold;
}

.content {
  display: none;
  padding: 20px;
  background: #fff;
  color: #000;
  border-radius: 5px;
  border: 1px solid #800020;
  margin: 10px auto;
  max-width: 400px;
  text-align: left;
}

.tab.active .content {
  display: block;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* 🔵 LIENS */
a {
  color: #800020;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  color: #000000;
}

/* 🔵 BOUTON MENU (Mobile uniquement) */
.menu-toggle {
  display: none;
  padding: 12px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  background: #800020;
  color: white;
  cursor: pointer;
}

/* 🔵 MENU MOBILE */
.menu-mobile {
  display: none;
  width: 100%;
  background: white;
  border-top: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  position: relative;
  text-align: center;
}

.menu-mobile.active {
  display: block !important;
}

.menu-mobile a {
  display: block;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  color: #800020;
  font-weight: bold;
  text-decoration: none;
  background: #fff;
}

.menu-mobile a:hover {
  background: #f5f5f5;
}

/* 🔵 RESPONSIVE MOBILE */
@media screen and (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  #navigation ul {
    display: none !important;
  }

  #header img {
    max-width: 80%;
  }

  #footer {
    padding: 8px 10px;
    font-size: 10px;
  }

  #content {
    padding: 20px;
    width: 100%;
  }
}

/* 🔵 VERSION DESKTOP */
@media screen and (min-width: 769px) {
  .menu-toggle {
    display: none;
  }

  .menu-mobile {
    display: none !important;
  }
}


/* ✅ Espace supplémentaire autour du logo */
#header {
  padding-top: 30px;
  padding-bottom: 30px;
  box-sizing: border-box;
}

@media screen and (max-width: 768px) {
  #header {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}


/* ✅ Empêche le logo d’être tronqué */
#header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 0;
  min-height: 220px; /* ↔️ adapte si besoin */
  overflow: visible;
  box-sizing: border-box;
}

#header img {
  max-height: 180px; /* ✂️ contrôle la taille sans dépasser */
  height: auto;
  width: auto;
  display: block;
}

#header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 0;
  min-height: 220px;
  box-sizing: border-box;
  overflow: visible;
}

#header img {
  max-width: 100%;
  max-height: 300px;
  height: auto;
  width: auto;
  display: block;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .card, .mod-content, .mod-article, .your-custom-class {
    padding: 10px !important;
    margin: 0 auto !important;
    width: 95% !important;
    box-sizing: border-box;
  }

  .mod-content h2, .mod-content p {
    text-align: left !important;
  }
}

@media screen and (max-width: 768px) {
  .content {
    max-width: 100% !important;
    margin: 10px auto !important;
    padding: 15px !important;
    box-sizing: border-box;
    border-radius: 12px;
  }

  .mod-content, .mod-article {
    padding: 10px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  .mod-content h2, .mod-content p, .content h2, .content p {
    text-align: left !important;
  }
}
body {
  overflow-x: hidden;
}

/* Styles généraux (desktop + mobile par défaut) */
.banner-text {
  color: white; /* ou une autre couleur bien contrastée avec ton fond rouge */
  font-size: 2rem;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .prix-formation {
    color: white !important;
  }
}


/* ====== ARTICLES CFA (scopés au contenu Jimdo) ====== */

/* Wrap + titres */
#content .ft-wrap { max-width:900px; margin:2rem auto; padding:2rem; background:#fff; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,.06); }
#content .ft-wrap h1 { font-size:2rem; margin:0 0 .5rem; }
#content .ft-wrap h2.ft-section-title { font-size:1.6rem; margin:1.5rem 0 .75rem; color:#D60000; font-weight:700; }
/* Typo / listes */
#content .ft-wrap p { margin:.6rem 0; }
#content .ft-wrap ul, #content .ft-wrap ol { margin:.6rem 0 .8rem 1.2rem; }
#content .ft-wrap li { margin:.3rem 0; }
/* Badges / boîtes / boutons */
#content .kbd { background:#f3f3f3; border:1px solid #ccc; padding:2px 6px; border-radius:4px; font-family:monospace; }
#content .note { background:#fef2f2; border-left:4px solid #D60000; padding:12px; border-radius:6px; }
#content .chip { display:inline-block; background:#ffe9e9; color:#D60000; font-size:12px; padding:4px 10px; border-radius:20px; font-weight:600; }
#content .btn { display:inline-block; background:#222; color:#fff !important; padding:12px 18px; border-radius:6px; text-decoration:none; font-weight:700; }
#content .btn:hover { background:#A50000 !important; }
/* Cards */
#content .card { background:#fff; border:1px solid #e0e0e0; border-radius:12px; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,.06); margin:1rem 0; }
#content .card img { width:100%; height:200px; object-fit:cover; border-bottom:4px solid #D60000; display:block; }
#content .card .body { padding:20px; }
/* Sommaire dans .note */
#content .ft-wrap .note a { color:#800020; font-weight:700; text-decoration:none; }
#content .ft-wrap .note a:hover { text-decoration:underline; }
/* Ancrages sous header */
#content .ft-section-title { scroll-margin-top: 90px; }
/* Mobile */
@media (max-width:768px){
  #content .ft-wrap { padding:1.25rem; }
  #content .card img { height:180px; }
}
/* Évite d’impacter d’autres blocs .content */
#container .tabs .content { border:1px solid #800020; }

/* Supprime tout éventuel contour parasite autour de la zone principale */
#content { border:0 !important; }