/* showp-redesign.css */
/* Redesign profil Oulfa - version stable */

/* =========================
   VARIABLES
========================= */

:root {
  --oulfa-orange: #f78f07;
  --oulfa-orange-dark: #d97900;
  --oulfa-bg: #e7e5e5;
  --oulfa-soft-bg: #eeeeee;
  --oulfa-card: #ffffff;
  --oulfa-text: #222222;
  --oulfa-muted: #666666;
  --oulfa-border: #dddddd;
  --oulfa-blue: #265286;
  --oulfa-radius: 14px;
  --oulfa-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

* {
  box-sizing: border-box;
}

/* =========================
   BASE
========================= */

html,
body {
  background: var(--oulfa-bg) !important;
  color: var(--oulfa-text);
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px;
  line-height: 1.45;
}

body {
  margin: 0;
}

a {
  color: var(--oulfa-orange);
  text-decoration: none;
}

a:hover {
  color: var(--oulfa-orange-dark);
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
}

/* =========================
   CONTENEUR GENERAL
========================= */

.zerogrid,
.main,
.main2 {
  max-width: 1080px !important;
  width: calc(100% - 32px) !important;
  margin: 0 auto !important;
}

/* =========================
   HEADER
========================= */

.header-row,
.header-row2,
.menu-row {
  background: #d9d7d7 !important;
}

header {
  background: #d9d7d7;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.main-menu {
  display: flex;
  justify-content: center;
  gap: 18px;
  padding: 12px 0 !important;
}

.main-menu li {
  padding: 0 !important;
}

.main-menu li a {
  color: #555 !important;
  font-size: 13px !important;
  font-weight: 600;
}

.main-menu li.active a,
.main-menu li a:hover {
  color: var(--oulfa-orange) !important;
}

/* =========================
   ZONE CONTENU
========================= */

#content,
#contentcool,
#content-tall {
  background: var(--oulfa-bg) !important;
  padding: 24px 0 60px !important;
}

/* =========================
   CARTES PRINCIPALES
========================= */

.section-profil,
.section-profil1,
.section-profil_two,
.slider-wrapper,
.slider-wrapper2,
.slider-wrapper-dept,
.line_outerbis,
.line_outerbis1 {
  background: var(--oulfa-card) !important;
  border: 1px solid var(--oulfa-border) !important;
  border-radius: var(--oulfa-radius) !important;
  box-shadow: var(--oulfa-shadow) !important;
  padding: 18px !important;
  margin: 0 auto 18px !important;
  width: 100% !important;
}

/* =========================
   TITRES PROFIL
========================= */

.titre-pseudo {
  color: #222 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 28px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 8px !important;
}

.info-titre-pseudo {
  color: var(--oulfa-muted) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  height: auto !important;
  white-space: normal !important;
}

/* =========================
   PHOTOS
========================= */

.section-profil img,
.section-profil1 img,
.section-profil_two img {
  border-radius: 12px;
  object-fit: cover;
}

.img-border {
  border: 1px solid var(--oulfa-border) !important;
  border-radius: 12px !important;
  padding: 6px !important;
  background: #fff;
}

/* =========================
   COLONNES PROFIL - VERSION STABLE
   On garde l'ancien système float
========================= */

.group-profil,
.group2,
.groupdetails {
  display: block !important;
  gap: 0 !important;
}

.group-profil:after,
.group2:after,
.groupdetails:after,
.sectiondetails:after {
  content: "";
  display: table;
  clear: both;
}

.col-profil,
.col2,
.coldetailsbis {
  float: left !important;
  box-sizing: border-box;
}

/* Fiche profil principale */
.section-profil .span_3_of-profil,
.section-profil1 .span_3_of-profil {
  width: 26% !important;
  margin-right: 2% !important;
}

.section-profil .span_2_of-profil,
.section-profil1 .span_2_of-profil {
  width: 34% !important;
  margin-right: 2% !important;
}

.section-profil .span_1_of-profil,
.section-profil1 .span_1_of-profil {
  width: 36% !important;
}

/* Photo principale */
.section-profil .span_3_of-profil img,
.section-profil1 .span_3_of-profil img {
  width: 100% !important;
  max-width: 230px !important;
  height: auto !important;
  border-radius: 12px !important;
}

/* =========================
   DETAILS PROFIL
========================= */

.sectiondetails {
  display: block !important;
  clear: both;
  margin-top: 8px !important;
}

.span_2_of_3details {
  width: 42% !important;
  background: transparent !important;
  border: 0 !important;
  padding: 2px 4px !important;
  color: #666 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
}

.span_1_of_3details {
  width: 58% !important;
  background: transparent !important;
  border: 0 !important;
  padding: 2px 4px !important;
  color: #222 !important;
  font-size: 13px !important;
}

.span_1_of_3details a,
.sectiondetails a {
  color: var(--oulfa-orange) !important;
  font-weight: 700 !important;
}

/* =========================
   TEXTE DESCRIPTION
========================= */

.section-profil-aboutme,
.aboutme-member {
  background: #fafafa !important;
  border-radius: 12px;
  padding: 14px !important;
  color: #333 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* =========================
   BOUTONS
========================= */

.button,
.oulfaButon-blue,
input[type="submit"],
button {
  border-radius: 999px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
}

.button,
.button.orange {
  background: linear-gradient(135deg, var(--oulfa-orange), var(--oulfa-orange-dark)) !important;
  border: 1px solid var(--oulfa-orange-dark) !important;
  color: #fff !important;
}

.oulfaButon-blue {
  background: linear-gradient(135deg, #4375b8, var(--oulfa-blue)) !important;
  border: 1px solid var(--oulfa-blue) !important;
  color: #fff !important;
}

/* =========================
   FORMULAIRE INSCRIPTION
========================= */

.mis-en-forme-titre,
.mis-en-forme-titre-mobile {
  border-radius: 14px !important;
  overflow: hidden !important;
}

form.inscription-rapide input,
form.inscription-rapide select {
  border-radius: 8px !important;
  border: 1px solid #d7d7d7 !important;
  height: 28px !important;
  font-size: 13px !important;
}

form.inscription-rapide button {
  border-radius: 999px !important;
}

/* =========================
   FORMULAIRES GENERAUX
========================= */

input,
select,
textarea {
  border: 1px solid #d7d7d7 !important;
  border-radius: 9px !important;
  padding: 8px 10px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--oulfa-orange) !important;
  box-shadow: 0 0 0 3px rgba(247, 143, 7, 0.18) !important;
  outline: none !important;
}

/* =========================
   MINIATURES
========================= */

ul.picSmall li a.thumb,
ul.picGallery li a.thumb {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #ddd !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

ul.picSmall li a.thumb:hover,
ul.picGallery li a.thumb:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* =========================
   BLOC REGION / PROFILS SIMILAIRES
========================= */

.sectionsearch {
  background: #fff !important;
  border: 1px solid var(--oulfa-border) !important;
  border-radius: var(--oulfa-radius) !important;
  box-shadow: var(--oulfa-shadow) !important;
  overflow: hidden !important;
  margin-bottom: 18px !important;
}

.span_1_of_3search,
.span_2_of_3search,
.span_3_of_3search {
  background: #fff !important;
  border: 0 !important;
}

.flat-button,
.medium,
.medium1,
.medium2 {
  border-radius: 8px !important;
  background: #fff !important;
  border: 1px solid var(--oulfa-orange) !important;
  color: var(--oulfa-orange-dark) !important;
  font-weight: 700 !important;
}

.flat-button:hover,
.medium:hover,
.medium1:hover,
.medium2:hover {
  background: var(--oulfa-orange) !important;
  color: #fff !important;
}

/* =========================
   ANNONCES EN BAS
========================= */

.section-profil_two,
.section-profil1 {
  min-height: auto !important;
}

/* Image à gauche */
.section-profil_two .span_3_of-profil_two,
.section-profil1 .span_3_of-profil_two {
  width: 210px !important;
  margin-right: 18px !important;
}

/* Texte à droite */
.section-profil_two .span_2_of-profil_two,
.section-profil1 .span_2_of-profil_two {
  width: calc(100% - 240px) !important;
}

/* Colonne éventuelle */
.section-profil_two .span_1_of-profil_two,
.section-profil1 .span_1_of-profil_two {
  width: auto !important;
}

.section-profil_two img,
.section-profil1 .span_3_of-profil_two img {
  max-width: 200px !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 12px !important;
}

.section-profil_two p,
.section-profil1 p {
  margin-bottom: 8px !important;
}

.pseudo-list,
.pseudo-list-search {
  color: #111 !important;
  font-weight: 800 !important;
}

.pseudo-list:hover,
.pseudo-list-search:hover {
  color: var(--oulfa-orange) !important;
}

/* =========================
   PUBLICITES
========================= */

iframe,
ins,
.adsbygoogle,
[id*="ad"],
[class*="ad-"],
[class*="ads"] {
  max-width: 100% !important;
}

.ad-container,
.pub-container,
.bloc-pub {
  background: transparent !important;
  margin: 18px auto !important;
  text-align: center !important;
  overflow: hidden !important;
  clear: both !important;
}

/* =========================
   RESPONSIVE
========================= */

@media only screen and (max-width: 768px) {
  .zerogrid,
  .main,
  .main2 {
    width: calc(100% - 20px) !important;
  }

  #content,
  #contentcool,
  #content-tall {
    padding-top: 12px !important;
  }

  .section-profil,
  .section-profil1,
  .section-profil_two,
  .slider-wrapper,
  .slider-wrapper2,
  .slider-wrapper-dept,
  .line_outerbis,
  .line_outerbis1 {
    padding: 14px !important;
    border-radius: 12px !important;
  }

  .col-profil,
  .col2,
  .coldetailsbis,
  .section-profil .span_3_of-profil,
  .section-profil .span_2_of-profil,
  .section-profil .span_1_of-profil,
  .section-profil1 .span_3_of-profil,
  .section-profil1 .span_2_of-profil,
  .section-profil1 .span_1_of-profil,
  .section-profil_two .span_3_of-profil_two,
  .section-profil_two .span_2_of-profil_two,
  .section-profil_two .span_1_of-profil_two,
  .section-profil1 .span_3_of-profil_two,
  .section-profil1 .span_2_of-profil_two,
  .section-profil1 .span_1_of-profil_two {
    float: none !important;
    width: 100% !important;
    margin-right: 0 !important;
  }

  .section-profil .span_3_of-profil,
  .section-profil1 .span_3_of-profil {
    text-align: center !important;
    margin-bottom: 16px !important;
  }

  .section-profil .span_3_of-profil img,
  .section-profil1 .span_3_of-profil img {
    max-width: 260px !important;
  }

  .span_2_of_3details,
  .span_1_of_3details {
    float: left !important;
    width: 50% !important;
  }

  .titre-pseudo {
    font-size: 23px !important;
  }

  .main-menu {
    display: none;
  }
}

@media only screen and (max-width: 480px) {
  .zerogrid,
  .main,
  .main2 {
    width: calc(100% - 12px) !important;
  }

  .section-profil,
  .section-profil1,
  .section-profil_two,
  .slider-wrapper,
  .slider-wrapper2,
  .slider-wrapper-dept,
  .line_outerbis,
  .line_outerbis1 {
    padding: 12px !important;
  }

  .span_2_of_3details,
  .span_1_of_3details {
    width: 100% !important;
    float: none !important;
  }

  .span_2_of_3details {
    margin-top: 6px !important;
  }

  .titre-pseudo {
    font-size: 21px !important;
  }
}
/* =========================
   PATCH V9 - FINITIONS DESKTOP
========================= */

/* Largeur un peu plus confortable avec les pubs latérales */
.zerogrid,
.main,
.main2 {
  max-width: 1040px !important;
}

/* Évite les débordements avec pubs latérales */
html,
body {
  overflow-x: hidden !important;
}

/* Titre principal de la fiche */
#content h1,
#content h2,
#contentcool h1,
#contentcool h2 {
  font-family: Arial, Helvetica, sans-serif !important;
  color: #222 !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
}

/* Fiche principale plus équilibrée */
.section-profil,
.section-profil1,
.section-profil_two {
  overflow: hidden !important;
}

/* Profil principal : photo / identité / détails */
.section-profil .span_3_of-profil,
.section-profil1 .span_3_of-profil {
  width: 32% !important;
  margin-right: 2% !important;
}

.section-profil .span_2_of-profil,
.section-profil1 .span_2_of-profil {
  width: 35% !important;
  margin-right: 2% !important;
}

.section-profil .span_1_of-profil,
.section-profil1 .span_1_of-profil {
  width: 29% !important;
}

.section-profil .span_3_of-profil img,
.section-profil1 .span_3_of-profil img {
  max-width: 250px !important;
}

/* Nom profil */
.titre-pseudo {
  font-size: 27px !important;
  margin-top: 4px !important;
}

/* Détails plus serrés */
.span_2_of_3details,
.span_1_of_3details {
  line-height: 1.35 !important;
  margin-bottom: 3px !important;
}

/* Bloc phrase sous le profil */
.section-profil-aboutme,
.aboutme-member {
  margin-top: 14px !important;
  border-left: 4px solid #f78f07 !important;
}

/* =========================
   ANNONCES DU BAS PLUS COMPACTES
========================= */

.section-profil_two {
  padding: 16px 20px !important;
  min-height: 0 !important;
}

.section-profil_two .span_3_of-profil_two {
  width: 180px !important;
  margin-right: 22px !important;
}

.section-profil_two .span_2_of-profil_two {
  width: calc(100% - 215px) !important;
}

.section-profil_two .span_1_of-profil_two {
  width: auto !important;
}

.section-profil_two img {
  max-width: 170px !important;
  max-height: 170px !important;
  object-fit: cover !important;
}

.section-profil_two p,
.section-profil_two div {
  line-height: 1.45 !important;
}

.section-profil_two br + br {
  display: none !important;
}

/* Pseudos annonces */
.section-profil_two .pseudo-list,
.section-profil_two .pseudo-list-search {
  font-size: 16px !important;
  font-weight: 800 !important;
}

/* =========================
   BLOCS GOOGLE AUTO ADS
========================= */

.google-auto-placed,
.adsbygoogle {
  clear: both !important;
  margin: 16px auto !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Pour éviter que la pub flottante du bas cache le contenu */
#content,
#contentcool,
#content-tall {
  padding-bottom: 100px !important;
}

/* =========================
   RESPONSIVE PATCH
========================= */

@media only screen and (max-width: 768px) {
  .section-profil .span_3_of-profil,
  .section-profil .span_2_of-profil,
  .section-profil .span_1_of-profil,
  .section-profil1 .span_3_of-profil,
  .section-profil1 .span_2_of-profil,
  .section-profil1 .span_1_of-profil,
  .section-profil_two .span_3_of-profil_two,
  .section-profil_two .span_2_of-profil_two,
  .section-profil_two .span_1_of-profil_two {
    float: none !important;
    width: 100% !important;
    margin-right: 0 !important;
  }

  .section-profil_two img {
    max-width: 100% !important;
    max-height: none !important;
  }
}
/* =========================
   PATCH V10 - STABILISATION PAGE + ADS
========================= */

/* Conteneur central plus stable */
.zerogrid,
.main,
.main2 {
  max-width: 980px !important;
  width: calc(100% - 28px) !important;
}

/* Réduit les grands espaces blancs */
.section-profil,
.section-profil1,
.section-profil_two,
.slider-wrapper,
.slider-wrapper2,
.slider-wrapper-dept,
.line_outerbis,
.line_outerbis1,
.sectionsearch {
  margin-bottom: 14px !important;
}

/* Fiche principale moins étalée verticalement */
.section-profil {
  padding: 16px 18px !important;
}

/* Photo profil principale */
.section-profil .span_3_of-profil img,
.section-profil1 .span_3_of-profil img {
  max-width: 210px !important;
}

/* Titre profil */
.titre-pseudo {
  font-size: 24px !important;
}

/* Détails profil plus lisibles */
.span_2_of_3details,
.span_1_of_3details {
  font-size: 12px !important;
  line-height: 1.28 !important;
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}

/* Annonces du bas plus compactes */
.section-profil_two {
  padding: 14px 18px !important;
}

.section-profil_two .span_3_of-profil_two {
  width: 155px !important;
  margin-right: 18px !important;
}

.section-profil_two .span_2_of-profil_two {
  width: calc(100% - 180px) !important;
}

.section-profil_two img {
  max-width: 145px !important;
  max-height: 145px !important;
  object-fit: cover !important;
}

.section-profil_two .pseudo-list,
.section-profil_two .pseudo-list-search {
  font-size: 14px !important;
}

.section-profil_two,
.section-profil_two p,
.section-profil_two div,
.section-profil_two span {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

/* Encadrement des pubs automatiques Google */
.google-auto-placed,
.adsbygoogle {
  display: block !important;
  clear: both !important;
  max-width: 100% !important;
  margin: 12px auto !important;
  overflow: hidden !important;
}

/* Les pubs ne doivent pas coller aux cartes */
.section-profil + .google-auto-placed,
.section-profil1 + .google-auto-placed,
.section-profil_two + .google-auto-placed,
.slider-wrapper + .google-auto-placed,
.slider-wrapper2 + .google-auto-placed {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

/* Bloc "Voir plus" Google un peu moins envahissant */
div[aria-label="Voir plus"],
div:has(> div[aria-label="Voir plus"]) {
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Mobile */
@media only screen and (max-width: 768px) {
  .zerogrid,
  .main,
  .main2 {
    width: calc(100% - 16px) !important;
  }

  .section-profil_two .span_3_of-profil_two,
  .section-profil_two .span_2_of-profil_two {
    width: 100% !important;
    margin-right: 0 !important;
  }

  .section-profil_two img {
    max-width: 180px !important;
    max-height: 180px !important;
  }
}