/* ============================================================
   FO_SKIN_NEW.CSS — camping-car-love.com
   Desktop (> 1200px) : layout original conservé intact
   Mobile (≤ 1200px)  : responsive intégré
   ============================================================ */

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

body {
  background: white url(../images/template/fond.png) repeat-x center top;
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 0.8em;
  margin: 0;
  padding: 0;
  color: #71655D;
}

#template-fond {
  float: left;
  width: 1043px;
  background: url(../images/template/fond2.png) no-repeat top center;
  padding-left: 50px;
}

#h1 {
  float: left;
  margin-top: 15px;
  margin-left: 10px;
}

#h2 {
  float: right;
  background: url(../images/template/header.png) no-repeat top center;
  width: 420px;
  height: 127px;
}

#menu-root,
#h3 {
  float: left;
  width: 990px;
  text-align: center;
  background: url(../images/template/barre.png) repeat-x top center;
  height: 31px;
  padding-top: 6px;
  border-radius: 10px;
  color: white;
  font-size: 17px;
  margin-top: 10px;
}

#menu-root {
  background: url(../images/template/barre2.png) repeat-x top center;
}

#h3 b {
  font-size: 20px;
}

#template-header {
  float: left;
  width: 990px;
}

#template-body {
  float: left;
  width: 990px;
  padding-top: 10px;
  padding-bottom: 10px;
}

#template-centre {
  float: right;
  width: 680px;
}

#template-droite {
  float: left;
  width: 160px;
}

#footer-centre {
  float: left;
  width: 820px;
}

#template-gauche {
  float: left;
  width: 300px;
}

#conteneur {
  position: relative;
  width: 1093px;
  margin: 0 auto;
}

#template-pied {
  position: relative;
  width: 995px;
  margin: 0 auto;
}

#conteneur_footer {
  float: left;
  background: transparent url(../images/template/footer.png) repeat-x scroll right top;
  width: 100%;
  margin-top: 20px;
  height: 250px;
}

.qqch {
  background: none;
  clear: both;
  font-size: 0.01em;
}

/* ===== CLEARFIX ===== */
#conteneur::after,
#template-fond::after,
#template-header::after,
#template-body::after,
div.centrer::after {
  content: "";
  display: table;
  clear: both;
}


/* ============================================================
   RESPONSIVE — mobile ≤ 1200px
   ============================================================ */

@media (max-width: 1200px) {

  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  /* --- Conteneurs principaux --- */
  #conteneur {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    position: static !important;
  }

  #template-fond {
    float: none !important;
    width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
    background-image: none !important;
  }

  #template-header {
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #template-body {
    float: none !important;
    width: 100% !important;
    padding: 8px !important;
    box-sizing: border-box !important;
  }

  /* --- Header logo --- */
  #h1 {
    float: none !important;
    margin: 10px auto !important;
    text-align: center !important;
    width: 100% !important;
  }

  #h1 img {
    max-width: 220px !important;
    height: auto !important;
  }

  /* --- Zone login #h2 --- */
  #h2 {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    background-image: none !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  #login {
    float: none !important;
    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  .password-register {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 6px 0 !important;
    text-align: center !important;
  }

  input#email,
  input#password,
  input.input-register {
    float: none !important;
    display: block !important;
    width: 90% !important;
    max-width: 320px !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    padding: 8px !important;
    margin: 4px auto !important;
  }

  input.button-ok,
  .button-ok {
    display: block !important;
    float: none !important;
    margin: 10px auto !important;
    width: 90% !important;
    max-width: 320px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  /* Liens mot de passe / inscription */
  .link-password-register {
    float: none !important;
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }

  .link-password-register a {
    font-size: 14px !important;
    margin: 0 !important;
    display: block !important;
  }

  .link-password-register a:last-child {
    font-size: 15px !important;
    font-weight: bold !important;
    color: white !important;
    background: #FF0365 !important;
    padding: 8px 20px !important;
    border-radius: 20px !important;
    text-decoration: none !important;
  }

  /* --- Langues --- */
  #list_langues {
    float: none !important;
    text-align: center !important;
    width: 100% !important;
    margin: 8px 0 !important;
  }

  #list_langues li {
    display: inline-block !important;
    float: none !important;
    margin: 0 8px !important;
  }

  /* --- Bandeau h3 --- */
  #h3 {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    line-height: 1.5 !important;
  }

  #h3 b {
    font-size: 15px !important;
    white-space: normal !important;
    display: inline !important;
  }

  /* --- Menu connecté --- */
  #menu-root {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 6px 4px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    overflow: visible !important;
  }

  #menu-root li {
    float: none !important;
    height: auto !important;
    padding: 2px 0 !important;
    margin-bottom: 2px !important;
  }

  #menu-root li a {
    float: none !important;
    display: inline-block !important;
    height: auto !important;
    font-size: 12px !important;
    padding: 4px 6px !important;
    white-space: nowrap !important;
  }

  #menu-root li.menu_1 {
    margin-left: 0 !important;
  }

  /* ---- PAGE ACCUEIL ---- */

  div.centrer {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #home_video {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    margin: 0 0 8px 0 !important;
  }

  #home_video img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  #home_box_1 {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    padding: 10px !important;
    margin-top: 8px !important;
    background-image: none !important;
    background-color: #f9f3ee !important;
    border-radius: 8px !important;
    border: 1px solid #CAC2BA !important;
    text-align: center !important;
  }

  #home_box_1 h1,
  #home_box_1 p {
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  #home_box_1 span[style*="font-size:22px"],
  #home_box_1 span[style*="font-size: 22px"] {
    font-size: 17px !important;
  }

  #home_box_1 span[style*="font-size:18px"],
  #home_box_1 span[style*="font-size: 18px"] {
    font-size: 14px !important;
  }

  #home_box_2 {
    float: none !important;
    width: 100% !important;
    clear: both !important;
    box-sizing: border-box !important;
    margin-top: 10px !important;
    text-align: center !important;
  }

  #home_box_2 img {
    max-width: 280px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  #home_box_3 {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    padding: 10px !important;
    margin-top: 10px !important;
    border-radius: 8px !important;
  }

  #home_box_3 .title {
    display: block !important;
    height: auto !important;
    min-height: 35px !important;
    margin-top: 0 !important;
    padding: 8px !important;
    overflow: visible !important;
  }

  #home_box_4 {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    padding: 10px !important;
    margin-top: 10px !important;
    border-radius: 8px !important;
  }

  /* ---- COLONNES ---- */

  #template-centre {
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #template-gauche {
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 12px !important;
  }

  .box {
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Bandeau titre des box */
  .title {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 35px !important;
    margin-top: 0 !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .title span {
    float: none !important;
    display: inline-block !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* ---- FORMULAIRE INSCRIPTION ---- */
  /* Approche : on convertit la table en liste de blocs label+input */

  form.register {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  form.register table,
  form.register tbody,
  form.register tfoot {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  form.register tr {
    display: block !important;
    width: 100% !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
  }

  form.register th {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    font-weight: bold !important;
    font-size: 13px !important;
    padding: 0 0 4px 0 !important;
    box-sizing: border-box !important;
    vertical-align: top !important;
  }

  form.register td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  form.register input[type="text"],
  form.register input[type="email"],
  form.register input[type="password"] {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    padding: 10px 8px !important;
    height: 44px !important;
    border: 1px solid #BEBEBE !important;
    border-radius: 4px !important;
    background: white !important;
    color: #636363 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  form.register select {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    padding: 10px 8px !important;
    height: 44px !important;
    border: 1px solid #BEBEBE !important;
    border-radius: 4px !important;
    background: white !important;
    color: #636363 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  form.register input[type="checkbox"] {
    width: auto !important;
    height: auto !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
  }

  form.register input[type="submit"] {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    background: #FF0365 !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  /* ---- FORMULAIRE CONNEXION (#register-connexion) ---- */
  #register-connexion {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #register-connexion tbody {
    display: block !important;
    width: 100% !important;
  }

  #register-connexion tr {
    display: block !important;
    width: 100% !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
  }

  #register-connexion td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #register-connexion .text-form {
    display: block !important;
    float: none !important;
    width: 100% !important;
    text-align: left !important;
    font-weight: bold !important;
    font-size: 13px !important;
    color: #71655D !important;
    margin-bottom: 4px !important;
    padding-right: 0 !important;
  }

  #register-connexion input[type="text"],
  #register-connexion input[type="password"],
  #register-connexion .input-register {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    padding: 10px 8px !important;
    height: 44px !important;
    border: 1px solid #BEBEBE !important;
    border-radius: 4px !important;
    background: white !important;
    color: #636363 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  #register-connexion input[type="submit"],
  #register-connexion .button-ok {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    background: #FF0365 !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    float: none !important;
    margin: 4px 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  /* ---- BOUTONS PROFIL ---- */
  .envoyer_message,
  .envoyer_favoris,
  .envoyer_flash {
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 6px 0 !important;
  }

  .envoyer_message a,
  .envoyer_favoris a,
  .envoyer_flash a {
    float: none !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 12px 10px !important;
    height: auto !important;
    background-image: none !important;
    background-color: #d8d8d8 !important;
    border-radius: 6px !important;
    border: 1px solid #b0b0b0 !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: bold !important;
    color: #333 !important;
  }

  /* ---- AGENDA ---- */
  #calendar {
    float: none !important;
    margin-left: 0 !important;
    width: 100% !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  #inlineDatepicker {
    overflow-x: auto !important;
    max-width: 100% !important;
    display: block !important;
  }

  /* ---- IMAGES ---- */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ---- TABLEAU INFOS PERSO ---- */
  #infos-perso {
    width: 100% !important;
    float: none !important;
  }

  /* ---- VIGNETTES ---- */
  ul.advert-list {
    display: flex !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  ul.advert-list li {
    float: none !important;
    width: 33.33% !important;
    box-sizing: border-box !important;
    padding: 3px !important;
  }

  .vignette {
    width: 100% !important;
    margin-right: 0 !important;
  }

  .vignette_img {
    width: 100% !important;
    height: auto !important;
  }

  .vignette_img img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  .vignette_pseudo,
  .vignette_pseudo_1,
  .vignette_pseudo_2,
  .vignette_pseudo_3 {
    float: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    text-align: center !important;
    background-position: top center !important;
    padding-top: 20px !important;
    margin: 3px 0 !important;
    font-size: 11px !important;
    box-sizing: border-box !important;
  }

  /* ---- FORMULAIRE RECHERCHE ---- */
  #search_box,
  #search_box tbody,
  #search_box tr,
  #search_box th,
  #search_box td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
  }

  #search_box th {
    text-align: left !important;
    padding: 10px 0 4px 0 !important;
    font-weight: bold !important;
    font-size: 13px !important;
  }

  #search_box td {
    padding: 0 0 8px 0 !important;
  }

  #search_type,
  #search_pseudo,
  #search_dep {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    min-height: 40px !important;
    display: block !important;
  }

  #search_age_min,
  #search_age_max {
    width: 46% !important;
    display: inline-block !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    min-height: 40px !important;
  }

  #search_box input[type="submit"],
  .button-valider {
    width: 100% !important;
    height: 46px !important;
    background: #FF0365 !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    display: block !important;
    margin-top: 4px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  /* ---- IFRAME TCHAT ---- */
  #frame-shootbox {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ---- FOOTER ---- */
  #conteneur_footer {
    height: auto !important;
    min-height: 0 !important;
    background-image: none !important;
    background-color: #f0ebe6 !important;
    margin-top: 10px !important;
  }

  #template-pied {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px !important;
  }

  #footer-copyright {
    width: 100% !important;
    background-image: none !important;
    height: auto !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  h1, h2, h3 {
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ===== TRÈS PETITS MOBILES ≤ 480px ===== */
@media (max-width: 480px) {

  #menu-root li a {
    font-size: 11px !important;
    padding: 3px 4px !important;
  }

  ul.advert-list li {
    width: 50% !important;
  }
}

/* ===== FIX DÉFINITIF BANDEAUX .title ===== */
@media (max-width: 1200px) {

  /* Remplace l'image de fond trop petite (27px) par une couleur CSS */
  .box .title,
  .box_rose .title,
  .box_noir .title {
    background-image: none !important;
    background-color: #b0b0b0 !important;
    height: auto !important;
    min-height: 34px !important;
    margin-top: 0 !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    float: none !important;
    overflow: visible !important;
  }

  .box_rose .title {
    background-color: #e8005a !important;
  }

  .box_noir .title {
    background-color: #333333 !important;
  }

  .box .title span,
  .box_rose .title span,
  .box_noir .title span {
    float: none !important;
    display: block !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: bold !important;
    color: white !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
}