/*  ---------  styleplus.css : skin6-f5kmb (dérivée de skin6-papinou-06) -----------
    Thème CLAIR, sobre et moderne, radio / technique. Vert-bleu profond (teal) + orange du logo.
    Toutes les personnalisations sont ici : ne pas modifier style.css (régénéré par Config Look).
    Pour changer la palette, modifiez uniquement les variables de :root.
*/

:root {
  --bg:       #ecf1f0;   /* fond du site */
  --surface:  #ffffff;   /* cartes / zone principale */
  --surface-2:#f4f8f7;   /* fonds secondaires */
  --tint:     #d8eae8;   /* survol, lignes actives */
  --line:     #cddad8;   /* bordures */
  --text:     #1b2a2a;
  --muted:    #5a6e6d;
  --teal:     #0d5c63;   /* accent principal */
  --teal-dark:#083f45;   /* titres latéraux, bas de page */
  --orange:   #f26a1b;   /* orange du logo F5KMB */
  --radius:   10px;
  --shadow:   0 2px 8px rgba(8, 63, 69, .13);
  --font:     "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */
html, body { background-color: var(--bg) !important; color: var(--text); }
body { letter-spacing: .01em !important; font-family: var(--font); -webkit-font-smoothing: antialiased; }
.tbl, .tblbox, .box, p.box, .box a, .item, .item a, ul.item li.item, .rubr, p.rubr,
.titre, .titre a, .titrebox, .quest, .rep, .phcomment, .phimgs, .galcounter,
.lirubr, .lirubr2, .farubr, .farubr2, .dnrubr, .dnrubr2, .phrubr, .phrubr2,
.cal, td.cal0, td.cal1, td.cal2, td.cal3, td.cal4, td.cals, td.calevt,
nav.menuIcons ul li a span, .navbar ul.navbar-nav a.nav-link, .nav-link,
.forum, .forum2, .d-trhfr, #footer, .copyright, input.bouton, button, input.texte, select {
  font-family: var(--font) !important;
}
a, a.titre { transition: color .15s ease, background-color .15s ease; }
a:hover { color: var(--orange); }
h1, h2, h3, h4 { color: var(--teal-dark); font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--line); height: 0; }

/* ---------- Bandeaux (remplace le gris #C3C6CB) ---------- */
.T0entrow0, .T1entrow0, .T0entrow3, .T1entrow3 { background-color: transparent; }
.T0entrow0 { padding: 5px; }
.T0entrow3 { padding: 0 0 5px; }
.T0entrow6 { display: none; }

/* ---------- Zone principale ---------- */
#MainContent {
  margin: 0 auto 50px;
  background: var(--surface) !important;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
#LeftBoxes, #CenterBoxes, #RightBoxes, #AboveBoxes, #EditoBoxes, #UnderBoxes,
#BlogLeftBoxes, #BlogRightBoxes { background: transparent !important; }

/* ---------- Logo / bandeau ---------- */
#header img, div.logo img { border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------- Boîtes centrales : cartes ---------- */
.titre, .titre a {
  background: var(--teal) !important;
  color: #fff !important;
  font-variant: small-caps;
  font-weight: 600;
  letter-spacing: .04em;
}
.titre {
  border-left: 4px solid var(--orange);
  border-radius: 6px 6px 0 0;
  padding: 8px 12px;
}
.tbl {
  background: var(--surface) !important;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 12px 16px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.tblover { background: var(--surface-2) !important; }
.tbl.DDL69, .tbl.DDH74, .tbl.DDV90 { background-color: transparent !important; border: 0; box-shadow: none; }

/* ---------- Boîtes latérales ---------- */
.titrebox {
  background: var(--teal-dark) !important;
  color: #fff !important;
  font-variant: small-caps;
  font-weight: 600;
  letter-spacing: .04em;
  border-bottom: 3px solid var(--orange);
  border-radius: 6px 6px 0 0;
  padding: 8px 12px;
}
.tblbox {
  background: var(--surface-2) !important;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 10px 12px;
}
.htable, .htable1 { margin-bottom: 14px; }
.box a:hover, .item a:hover, p.rubr:hover { color: var(--orange); }
ul.item li.item { border-radius: 4px; }
ul.item li.item:hover { background: var(--tint); }
.curr_item, ul.item li.curr_item a { background: var(--teal) !important; color: #fff !important; border-radius: 4px; }

/* ---------- Menu horizontal (icônes / sections) ---------- */
nav.menuIcons { background: var(--surface) !important; border-bottom: 3px solid var(--teal); box-shadow: var(--shadow); border-radius: var(--radius) var(--radius) 0 0; }
nav.menuIcons ul li a span { background: transparent; color: var(--teal-dark); padding: 4px 12px; border-radius: 6px; font-weight: 600; }
nav.menuIcons ul li a:hover span { background: var(--teal); color: #fff; }
nav.menuIcons ul li a span.active { background: var(--tint); color: var(--teal-dark); }
.mi-title { color: var(--teal-dark); }
.menuIcons.navbar .navbar-toggler { border-color: var(--teal); }

/* ---------- Menus déroulants Bootstrap ---------- */
.navbar.ddl a.navbar-brand, .navbar.ddh a.navbar-brand,
.navbar ul.navbar-nav a.nav-link, .nav-link,
.navbar.ddh .dropdown-item, .navbar.ddh .nav-item,
.navbar.ddv .dropdown-item, .navbar.ddv .nav-item { background-color: var(--teal-dark); color: #fff; }
.navbar.ddl a.navbar-brand:hover, .navbar ul.navbar-nav a.nav-link:hover,
.navbar.ddl a.navbar-brand:focus, .navbar.ddh a.navbar-brand:hover,
.navbar ul.navbar-nav a.nav-link:focus,
.navbar.ddh .dropdown-item:hover, .navbar.ddh .nav-item:hover,
.navbar.ddv .dropdown-item:hover, .navbar.ddv .nav-item:hover,
li .dropdown-item a:hover, li .nav-item a:hover { background-color: var(--teal); color: #fff; }
.navbar.ddv { background-color: var(--teal-dark) !important; padding: 1.5rem 0 !important; border-radius: var(--radius); }
.dropdown-menu {
  color: #fff !important;
  background-color: var(--teal-dark) !important;
  padding: 5px !important;
  border: 0 !important;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.navbar.ddl .dropdown-menu {
  background-color: var(--surface) !important;
  border: 3px solid var(--teal-dark) !important;
  border-radius: 0 0 var(--radius) var(--radius);
}
.navbar.ddl .dropdown-menu > div, .navbar.ddl .dropdown-menu > div p { font-size: 1.8rem; color: var(--text); }
.navbar.ddl.DDL69 { max-width: 760px; margin: auto; }
.navbar.ddh.DDH74 { max-width: 640px; margin: auto; }
.DDH74 ul.dropdown-menu { width: 262px; }
.nav-item.dropdown.DDH74 { margin: 0 !important; }

/* ---------- Menu latéral coulissant ---------- */
.smlogo { margin: 1.5rem 2.2rem 1.5rem -2px !important; padding: 2rem 0.5rem !important;
  background-color: var(--teal-dark); border: 2px solid #fff; color: #fff; }
.sidenav, .sideconnect { background-color: var(--teal-dark); border-left: 3px solid var(--orange); }
.sidenav li a div { background: var(--surface-2); color: var(--text); border: 2px solid #fff; }
.sidenav li a:hover div { background: var(--orange); color: #fff; border-color: #fff; }

/* ---------- Icônes en haut à droite (connexion, déconnexion, menu 3 barres) ----------
   Le conteneur .tblbox.SMI doit rester transparent (sinon il reçoit le fond/cadre des boîtes latérales),
   et les icônes, blanches à l'origine, passent en teal foncé pour rester visibles sur le fond clair. */
.tblbox.SMI { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.sidemenu div, .sidemenu div a, .sidemenu i { color: var(--teal-dark) !important; background-color: transparent !important; }
.sidemenu div.sidetexte:hover, .sidemenu div.sidetexte a:hover, .sidemenu div.sideicon:hover, .sidemenu div.sideicon:hover i { color: var(--orange) !important; }
.sidemenu div.sideicon { border: 1px solid var(--teal) !important; border-radius: 6px; }

/* ---------- Fil d'Ariane ---------- */
.ariane, div.ariane span.arianeOff { color: var(--muted); }
div.ariane span.arianeOn a { color: var(--teal); }

/* ---------- Boutons, formulaires ---------- */
input.bouton, button, .btn-info, .btn-primary {
  background: var(--teal);
  color: #fff;
  border: 1px solid var(--teal) !important;
  border-radius: 6px;
  padding: 6px 14px;
  transition: all .15s ease;
}
input.bouton:hover, button:hover, .btn-info:hover, .btn-primary:hover {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange) !important;
}
.btn-group-lg > .btn, .btn-lg { border: 1px solid var(--teal) !important; border-radius: 6px; }
input.texte, select, textarea, .form-control, .form-control-lg {
  background: #fff;
  border: 1px solid var(--line) !important;
  border-radius: 6px;
}
.form-control, .form-control-lg { font-size: 1.7rem; }
.form-control:focus, input.texte:focus, textarea:focus, select:focus {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 3px rgba(13, 92, 99, .2);
  outline: 0;
}
fieldset { border: 1px solid var(--line); border-radius: 8px; }
legend { color: var(--teal-dark) !important; }

/* ---------- Onglets Bootstrap ---------- */
.nav-tabs .nav-link { background: var(--teal-dark); border-radius: 6px 6px 0 0; }
.nav-tabs .nav-link:hover { background: var(--teal) !important; color: #fff !important; }
.nav-tabs .nav-link.active { background: var(--tint) !important; color: var(--teal-dark) !important; }
.tab-content div.container { border-color: var(--line); border-radius: 0 0 var(--radius) var(--radius); }

/* ---------- Forum ---------- */
.forum, .forum a, .forum2, .d-trhfr, .thheadsubjectW, .thheadbodyW { background: var(--teal-dark); color: #fff; }
.thheadsubjectW, .thheadbodyW a { color: #fff !important; }
.quest { background: var(--tint); }
.rep { background: var(--surface-2); }
.Code, .hljs { border-left: 4px solid var(--teal) !important; border-radius: 4px; }
blockquote.citation { border-left: 4px solid var(--orange) !important; }

/* ---------- Liens / FAQ / Téléchargements / Photos ---------- */
.lititlecat, .licatlink, .fatitlecat, .facatlink, .dntitlecat, .dncatdwnl {
  background: var(--teal-dark); color: #fff; border: 0; border-radius: 6px;
}
.lirubr, .farubr, .dnrubr, .phrubr { background: var(--tint); border-radius: 4px; }
.lirubr2, .farubr2, .dnrubr2, .phrubr2 { background: var(--surface-2); border-radius: 4px; }
.lisubrubr { line-height: 3rem; background-color: var(--surface-2) !important; }
.bord2 { border: 1px dotted var(--line); }
.phimg { border: 1px solid var(--line) !important; border-radius: 6px; transition: transform .15s ease; }
.phimg:hover { transform: translateY(-2px); border-color: var(--teal) !important; }

/* ---------- Calendrier (texte foncé sur fond clair : lisible partout) ---------- */
.cal, tr.cal, select.cal { background: var(--tint); color: var(--text); }
td.cal0, td.cal1 { background: var(--surface); }
td.cal2 { background: var(--orange); color: #fff; font-weight: 600; }
td.cal3, td.cal4 { background: var(--surface-2); color: var(--muted); }
td.cals { color: var(--teal-dark); font-weight: 600; }
td.calevt, td.calevt a { background: var(--teal); color: #fff; }
.leftNavCalW i, .rightNavCalW i, .cal3BlogW i { color: var(--teal-dark); }

/* ---------- Divers ---------- */
.overpop .rssNews i, .itemrss a i, .overpop .rssBlog i, .overpop .rssArt i { color: var(--orange); }
div.quote span.labelcita { display: none; }
ul.keyword div { background: var(--teal-dark); }

/* ---------- Bas de page ---------- */
#BottomBoxes { margin: 50px auto 0; background: var(--teal-dark) !important; border-top: 3px solid var(--orange); }
#BottomBoxes .titre, #BottomBoxes .tbl, #BottomBoxes .titrebox,
#BottomBoxes .tblbox { padding: 5px 20px !important; background: transparent !important; border: 0; box-shadow: none; }
#BottomBoxes .titrebox, #BottomBoxes .titre { border-left: 0; }
.B0entrow1, .B1entrow1 { padding: 20px 40px !important; }
/* Texte clair sur fond teal foncé. !important : bat aussi les couleurs saisies dans les boîtes. */
#BottomBoxes * { color: #e8f3f2 !important; }
#BottomBoxes a, #BottomBoxes a * { color: #ffc79a !important; }
#BottomBoxes a:hover, #BottomBoxes a:hover * { color: #fff !important; }
#BottomBoxes input, #BottomBoxes select, #BottomBoxes textarea, #BottomBoxes button,
#BottomBoxes button *, #BottomBoxes .input-group-text, #BottomBoxes .input-group-text * { color: var(--text) !important; }
/* Boutons teal du bas de page (Mon compte, Mon courrier, Déconnexion, Envoyer...) : même orange clair que les liens */
#BottomBoxes button.btn-info, #BottomBoxes button.btn-info *, #BottomBoxes .btn-primary,
#BottomBoxes input.bouton, #BottomBoxes input[type=submit], #BottomBoxes input[type=button] { color: #ffc79a !important; }
#BottomBoxes button.btn-info:hover, #BottomBoxes button.btn-info:hover *, #BottomBoxes .btn-primary:hover,
#BottomBoxes input.bouton:hover, #BottomBoxes input[type=submit]:hover, #BottomBoxes input[type=button]:hover { color: #fff !important; }
#footer, #skinCopyright { background: #052e33 !important; }
#footer .copyright, #footer a, #footer span, #skinCopyright a, #skinCopyright span { color: #cfe3e2 !important; }
#footer a:hover, #skinCopyright a:hover { color: #fff !important; }

/* ---------- Tablette ---------- */
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .B0entrow2 .col-md-3 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 100%; }
}

/* ---------- Mobile ---------- */
@media screen and (max-width: 760px), screen and (max-device-width: 760px) {
  #MainContent { border-radius: 0; border-left: 0; border-right: 0; }
  #CenterBoxes { padding-left: 0 !important; }
  .titre, .titrebox { padding: 10px 12px; }
  .tbl, .tblbox { padding: 10px 12px; }
  #BottomBoxes .titre, #BottomBoxes .tbl, #BottomBoxes .titrebox,
  #BottomBoxes .tblbox { padding: 10px 12px !important; }
  .B0entrow1, .B1entrow1 { padding: 10px 12px !important; }
  nav.menuIcons ul li a span { display: block; }
}