/* Style Perso */
/* ======================================
   STYLE FCM — version consolidée (2025)
   ====================================== */

/* === Style Perso de base === */
html, body {
  color: #053754;
  background: url("./images/fond-forum-lfp-fifa-manager-18.jpg") no-repeat fixed;
}

.site_logo {
  background-image: url("./images/site_logo.png");
  width: 260px;
  left: 100px;
}

.wrap {
  border: none;
  border-radius: 7px;
  margin: -12px auto 0;
  max-width: 1152px;
  padding: 0;
  background: transparent !important;
}

/* === Structure du forum === */
.forabg {
  margin-bottom: 10px;
  padding: 0;
  clear: both;
  border-radius: 0;
  background-color: #dc1f27;
}

li.header dt, li.header dd {
  line-height: 1em;
  font-size: 12px;
  padding: 10px 0;
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  background-color: #de1f27;
}

li.header dl.row-item dt .list-inner {
  padding: 0 50px 0 10px;
}

.navbar {
  padding: 3px 10px;
  border-radius: 0;
  margin-top: 0;
  background-color: #282828;
  color: #fff;
}

.page-body {
  margin-top: 0;
  clear: both;
  background-color: #f2f2f2;
  padding-top: 5px;
}

.action-bar {
  font-size: 11px;
  margin: 4px 0;
  padding-right: 10px;
}

p {
  line-height: 1.3em;
  font-size: 1.1em;
  margin-bottom: 1.5em;
  padding: 0 10px;
}

h2 {
  color: #28313F;
  padding-left: 10px;
}

ul.topiclist li {
  display: block;
  list-style: none;
  margin: 0;
  background-color: #fff;
}

ul.forums {
  background: linear-gradient(to bottom, #D2E0EB 0%, #EEF5F9 100%);
  margin-top: -5px;
}

.icon, .button .icon {
  display: inline-block;
  font-family: FontAwesome;
  font-size: 14px;
  line-height: 1;
}

.navbar a {
  color: #fff;
  background-color: #282828;
}

#nav-main.nav-main.linklist {
  padding: 10px 0;
  font-size: 12px;
  font-weight: bold;
}

ul.linklist > li {
  float: left;
  font-size: 1.1em;
  line-height: 2.2em;
  list-style: none;
  margin-right: 5px;
  padding-top: 1px;
  width: auto;
}

#quick-links {
  margin-right: 12px;
}

.forumbg, .bg1, .bg2 {
  background-color: #fff;
  margin-top: 10px;
  padding: 0;
  border-radius: 0;
  clear: both;
}

.action-bar .button {
  margin: 0 5px 0 10px;
  float: left;
}

h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1.05em;
  padding-left: 10px;
}

li.row:hover {
  background-color: #e8e8e8;
}

.attach-image img {
  border: none;
}

/* ======================================
   SECTION : Bannière et navigation
   ====================================== */

/* --- Bannière FCM --- */
#page-header .headerbar {
  background: url("./images/bannieress.png") no-repeat center top !important;
  background-size: contain !important;
  background-color: #000;
  height: 173px !important;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

#page-header .headerbar .inner {
  display: none !important;
}

/* --- Coller la barre noire au bandeau --- */
#page-header .navbar,
#page-header .navbar .inner {
  background: #000 !important;
  margin-top: -3px !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

#page-header,
#page-header .headerbar {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* --- Correction du margin-collapsing --- */
#page-body {
  border-top: 1px solid transparent;
  margin-top: -1px;
}

/* ======================================
   SECTION : Barre de recherche
   ====================================== */

.fcm-search-inline {
  display: inline-block;
  float: right;
  margin: -2px 10px 0 12px;
}

.fcm-search-inline form {
  display: flex;
  align-items: center;
  gap: 4px;
}

.fcm-search-inline .inputbox.search.tiny {
  width: 210px;
  height: 30px;
  padding: 4px 6px;
  box-sizing: border-box;
}

.fcm-search-inline .button2,
.fcm-search-inline .button-adv {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 1px solid #ccc;
  background: #fff;
  box-sizing: border-box;
  vertical-align: middle;
  cursor: pointer;
  text-decoration: none;
}

.fcm-search-inline .button2 i.icon,
.fcm-search-inline .button-adv i.icon {
  font-size: 15px;
  color: #222 !important;
}

.fcm-search-inline .button2:hover,
.fcm-search-inline .button-adv:hover {
  background: #e6e6e6;
  border-color: #999;
}

@media (max-width: 700px) {
  .fcm-search-inline {
    float: none;
    display: block;
    margin: 6px 0 0 0;
    text-align: left;
  }
}

/* ======================================
   SECTION : Finitions visuelles
   ====================================== */

.page-body .navbar,
.page-body .navbar .inner {
  background: #000 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.page-body .navbar::before,
.page-body .navbar::after {
  content: none !important;
  display: none !important;
}

.page-body .navbar .linklist {
  padding: 4px 8px !important;
}


/* --- Bannière FCM responsive (centrée + WebP) --- */

/* Desktop par défaut */
#page-header .headerbar {
  background: url("./images/bannieress.webp") no-repeat center center !important;
  background-size: cover !important;          /* couvre tout l’espace visible */
  background-position: center center !important;
  background-color: #000;
  width: 100%;
  aspect-ratio: 1400 / 173;                   /* ratio desktop : 1400x173 */
  height: auto !important;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

#page-header .headerbar .inner {
  display: none !important;
}

/* Tablette */
@media (max-width: 1024px) {
  #page-header .headerbar {
    background-image: url("./images/banniere-tablette.webp") !important;
    background-position: center center !important;
    background-size: cover !important;
    aspect-ratio: 1200 / 220;                 /* ratio tablette */
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Mobile */
@media (max-width: 480px) {
  #page-header .headerbar {
    background-image: url("./images/banniere-mobile.webp") !important;
    background-position: center center !important;
    background-size: cover !important;
    aspect-ratio: 800 / 200;                  /* ratio mobile */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* supprime tout décalage du menu sous la bannière */
  #page-header .navbar {
    margin-top: 0 !important;
    top: 0 !important;
  }
}


/* Bannière en <img> : jamais rognée, responsive */
#page-header .headerbar {
  background: #000;
  padding: 0;
  border: 0;
  margin: 0;
}
#page-header .headerbar .inner {
  display: none !important;
}

.fcm-banner {
  display: block;
  margin: 0;
}
.fcm-banner img {
  display: block;
  width: 100%;
  height: auto;   /* conserve toujours les proportions */
}


/* === Remettre le cartouche auteur À GAUCHE (modèle prosilver) === */

/* 0) Annule nos essais précédents */
.post { display: block !important; }
.post > .inner { display: block !important; }
.postprofile, .postbody { order: 0 !important; }

/* 1) Profil à gauche */
.postprofile {
  float: left !important;
  width: 240px;                 /* ajuste 200–260px selon tes avatars */
  margin: 0 15px 0 0 !important;
  text-align: center;
  border: none !important;
}

/* 2) Corps du message à droite */
.postbody {
  float: none !important;       /* on sort du float droit de certains thèmes */
  width: auto !important;
  margin: 0 0 0 255px !important; /* = largeur profil (240) + marge droite (15) */
  padding: 0 !important;
  box-sizing: border-box;
}

/* 3) Nettoyage des flottants */
.post:after {
  content: "";
  display: table;
  clear: both;
}

/* 4) Responsive : en-dessous de 700px on repasse vertical */
@media (max-width: 700px) {
  .postprofile {
    float: none !important;
    width: auto !important;
    margin: 0 0 10px 0 !important;
    text-align: center;
  }
  .postbody {
    margin-left: 0 !important;
    width: auto !important;
  }
}


/* === Ajustement fin du corps du message === */

/* On force le texte à se placer à côté du profil, pas en dessous */
.post {
  position: relative;
  overflow: hidden;
}

/* Profil à gauche */
.postprofile {
  float: left !important;
  width: 230px;                  /* largeur fixe du profil */
  margin: 0 15px 0 0 !important; /* espace entre profil et message */
  text-align: center;
}

/* Message à droite du profil */
.postbody {
  margin-left: 245px !important; /* largeur profil + marge droite */
  width: auto !important;
  float: none !important;
  display: block !important;
  padding: 0 !important;
  box-sizing: border-box;
  vertical-align: top;
}

/* Contenu interne (texte, citations, etc.) */
.postbody .content {
  margin: 0 !important;
  padding: 0 !important;
}

/* Aligne le haut du texte et du pseudo */
.postprofile,
.postbody {
  vertical-align: top !important;
}

/* Nettoyage des flottants */
.post:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive : profil au-dessus du message sur mobile */
@media (max-width: 700px) {
  .postprofile {
    float: none !important;
    width: auto !important;
    margin: 0 0 10px 0 !important;
    text-align: center;
  }
  .postbody {
    margin-left: 0 !important;
    width: auto !important;
  }
}


/* === Post : profil à gauche déjà ok — on fixe l'empilement du header === */

/* Le conteneur texte devient la référence pour un positionnement absolu */
.postbody {
  position: relative !important;
}

/* Boutons en haut-droite, hors du flux (ne poussent plus l'auteur vers le bas) */
.postbody .post-buttons,
.post .post-buttons {
  position: absolute !important;
  right: 0;
  top: 0;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Titre compact */
.postbody h3 {
  margin: 0 80px 2px 0 !important;  /* 80px ≈ largeur occupée par les boutons */
  padding: 0 !important;
  line-height: 1.2;
}

/* Ligne “par Auteur …” juste sous le titre, sans clear */
.postbody .author,
.postbody p.author {
  clear: none !important;
  margin: 2px 80px 8px 0 !important; /* même réserve 80px côté boutons */
  padding: 0 !important;
  line-height: 1.3;
}

/* Corps de texte sans marge haute inutile */
.postbody .content { margin-top: 0 !important; }

/* Optionnel : espace entre les petits boutons */
.postbody .post-buttons .button { margin-left: 4px; }


/* === Alignement fin du contenu du message === */

/* Supprime TOUT l'espace vertical en haut du bloc texte */
.postbody .content,
.postbody > div {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* On s'assure que le texte commence bien à hauteur du pseudo */
.postbody {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Ajuste l'espacement entre le titre et le corps */
.postbody h3 + .author + .content {
  margin-top: 4px !important;  /* tu peux réduire à 0 si tu veux tout coller */
}

/* Sécurité : empêche le contenu de descendre si un clear traîne */
.postbody .content::before {
  content: none !important;
  display: none !important;
}


/* --- Post : profil à gauche + contenu aligné en haut --- */

/* Profil à gauche (valeurs à garder si ok de ton côté) */
.postprofile { float:left !important; width:230px; margin:0 15px 0 0 !important; text-align:center; }

/* Corps du message à droite */
.postbody { margin-left:245px !important; float:none !important; position:relative; }

/* 1) Empêche le contenu de “clear” le profil (cause du décalage) */
.postbody .content,
.postbody div.content {
  clear: none !important;
  margin-top: 4px !important;   /* petit espace sous la ligne author */
  padding-top: 0 !important;
}

/* 2) La ligne "par X …" ne nettoie pas non plus les floats */
.postbody .author,
.postbody p.author { clear: none !important; margin: 2px 0 6px 0 !important; }

/* 3) Les boutons ne poussent plus le header (optionnel si déjà fait) */
.postbody .post-buttons { float:right !important; margin:0 !important; padding:0 !important; }

/* 4) Nettoyage des flottants */
.post:after { content:""; display:table; clear:both; }


/* === Responsive : empiler profil + message sur mobile/tablette === */
@media (max-width: 1024px) {
  /* on sort du layout 2 colonnes */
  .post { display: block !important; }

  /* profil au-dessus, pleine largeur */
  .postprofile {
    float: none !important;
    width: auto !important;
    margin: 0 0 10px 0 !important;
    text-align: left;              /* ou center si tu préfères */
  }
  /* avatar qui ne déborde pas */
  .postprofile .avatar img,
  .postprofile img.avatar {
    max-width: 120px;              /* ajuste 100–140px selon goût */
    height: auto;
  }

  /* message en dessous, pleine largeur */
  .postbody {
    margin-left: 0 !important;
    width: auto !important;
    float: none !important;
    position: static !important;
  }

  /* boutons : reviennent dans le flux, juste au-dessus du texte */
  .postbody .post-buttons,
  .post .post-buttons {
    position: static !important;
    float: right !important;       /* ou left si tu préfères */
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
  }

  /* titre/auteur sans réserve à droite (plus de boutons en absolu) */
  .postbody h3,
  .postbody .author { 
    margin-right: 0 !important;
  }

  /* le contenu démarre tout de suite */
  .postbody .content {
    clear: none !important;
    margin-top: 4px !important;
    padding-top: 0 !important;
  }
}
/* === Mobile / Tablette : éviter que le texte soit rogné à droite === */
@media (max-width: 1024px) {
  /* rien ne doit rogner le contenu sur les petits écrans */
  .post { overflow: visible !important; }

  /* le bloc texte prend toute la largeur disponible, sans débordement */
  .postbody,
  .postbody .content {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-right: 0 !important;
    padding-right: 12px !important;   /* petit air à droite pour ne rien couper */
  }

  /* au cas où un long mot/URL pousse la ligne hors cadre */
  .postbody .content {
    overflow-wrap: anywhere;           /* ou word-break: break-word; */
  }

  /* on s'assure que le titre/auteur n’ajoutent pas de réserve à droite */
  .postbody h3,
  .postbody .author { margin-right: 0 !important; }
}


/* === Mobile / Tablette : ne pas couper le texte à GAUCHE === */
@media (max-width: 1024px) {
  /* sortir de toute découpe */
  .post { overflow: visible !important; }

  /* annule totalement le layout 2 colonnes */
  .postbody {
    margin-left: 0 !important;
    float: none !important;
    position: static !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* donne un petit air à GAUCHE et à droite pour éviter toute coupe */
  .postbody,
  .postbody .content {
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* au cas où un style traîne un décalage textuel */
  .postbody .content { text-indent: 0 !important; overflow-wrap: anywhere; }
  .postbody .content * { margin-left: 0 !important; }
}


/* === Mobile / Tablette : recentrer légèrement le profil === */
@media (max-width: 1024px) {
  /* on ajoute une marge ou un padding à gauche du profil */
  .postprofile {
    padding-left: 12px !important;  /* petit espace pour que l’avatar respire */
    padding-right: 12px !important;
  }

  /* si tu préfères centrer complètement le profil */
  .postprofile {
    /*text-align: center !important;*/
  }

  /* avatar : limite la taille pour ne pas écraser le texte */
  .postprofile .avatar img,
  .postprofile img.avatar {
    max-width: 120px;
    height: auto;
    border-radius: 6px;             /* optionnel, pour un rendu plus doux */
  }
}

/* Remonter la colonne smileys + le bloc "BBCode activé..." */
#smiley-box,
#smiley-box + .panel {
  margin-top: -90px;
}

@media (max-width: 700px) {
  #smiley-box,
  #smiley-box + .panel {
    margin-top: 0;
  }
}

/* 1) Badge EN LIGNE sur l’avatar (toujours) */
.postprofile .avatar-container { position: relative; }
.post.online .postprofile .avatar-container::after{
  content: "EN LIGNE";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 50;
  padding: 2px 6px;
  font-size: 10px;
  line-height: 1.2;
  border-radius: 3px;
  background: #4caf50;
  color: #fff;
}


/* Supprimer le ruban "EN LIGNE" en image (badge de droite) */
.post.online,
.post.online > .inner {
  background-image: none !important;
}

/* Au cas où l'image est sur l'entête */
.post.online .postbody h3,
.post.online .postbody h3 a,
.post.online .post-buttons {
  background-image: none !important;
}


/* Centrage reCAPTCHA sur la page d'inscription */
#register .g-recaptcha{
  display:block;
  width:100%;
  text-align:center;
}

#register .g-recaptcha > div{
  width:304px;
  margin:0 auto;
}