@media screen and (max-width: 700px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden;
    }

    body {
        background-image: none !important;
        background: #ffffff !important;
        font-size: 15px;
        line-height: 1.4;
    }

    .bdpSide {
        display: none !important;
    }

    .bdpMain {
        width: 100% !important;
        max-width: 100% !important;
        padding: 5px !important;
        box-sizing: border-box !important;
    }

    .bdpToolbar {
        width: 100% !important;
        height: auto !important;
        display: block;
    }

    .bdpMain table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed;
    }

    .bdpMain td,
    .bdpMain div,
    .bdpMain p {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word;
    }

    .bdpMain img {
        max-width: 100% !important;
        height: auto !important;
    }

    h1 {
        font-size: 20px !important;
        line-height: 1.2;
    }

    input[type="submit"] {
        font-size: 13px !important;
        padding: 6px 7px !important;
        margin: 2px !important;
    }
}

@media screen and (max-width: 700px) {

    /* =================================
       HOME : annonces + calendrier
       ================================= */

    .homeTopBlocks,
    .homeTopBlocks tbody,
    .homeTopBlocks tr {
        display: block !important;
        width: 100% !important;
    }

    .homeTopBlocks .homeTopBlock {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /*
       Les deux titres deviennent chacun
       le titre de leur bloc.
    */
    .homeTopBlocks > tbody > tr:first-child .homeTopBlock {
        padding: 10px !important;
        font-size: 15px !important;
        text-align: center !important;
    }

    /*
       Tables internes annonces / agenda
    */
    .homeTopBlocks .homeTopBlock table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
    }

    .homeTopBlocks .homeTopBlock td {
        width: auto !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }


    /* =================================
       BOUTONS DU FORUM
       ================================= */

    .homeForumButtons {
        width: 100% !important;
        margin: 10px 0 !important;
    }

    .homeForumButtons td {
        width: 50% !important;
    }


    /* =================================
       LISTE DES FORUMS
       ================================= */

    .homeForumList {
        width: 100% !important;
        table-layout: auto !important;
    }

    .homeForumList td {
        width: auto !important;
        max-width: none !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    /*
       Colonne numéro
    */
    .homeForumList td:first-child {
        width: 28px !important;
        white-space: nowrap !important;
    }

    /*
       Colonne nombre de messages
    */
    .homeForumList td:last-child {
        width: 55px !important;
        white-space: nowrap !important;
    }

}

/* =========================================================
   TOOLBAR MOBILE
   ========================================================= */

/* Cachée sur ordinateur */
.bdpMobileToolbar {
	display: none;
}


@media screen and (max-width: 700px) {

	/* On cache l'ancienne toolbar image */
	.bdpToolbar {
		display: none !important;
	}

	/* On affiche le menu mobile */
	.bdpMobileToolbar {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr);
		gap: 5px;

		width: 100%;
		box-sizing: border-box;

		padding: 5px 0 10px 0;
	}

	.bdpMobileToolbar a {
		display: flex;
		align-items: center;
		justify-content: center;

		min-height: 40px;

		padding: 5px 6px;

		box-sizing: border-box;

		background: #C5CAD8;

		border: 1px solid #AEB5C7;

		text-align: center;

		font-size: 14px;
		font-weight: bold;

		text-decoration: none;

		color: #003366;
	}

	.bdpMobileToolbar a:visited {
		color: #003366;
	}

	.bdpMobileToolbar a:active {
		background: #AEB5C7;
	}

}

@media screen and (max-width:700px) {

    /* ==============================
       FORUM : RECHERCHE
       ============================== */

    .forumSearch {
        width: 100% !important;
        table-layout: fixed !important;
    }

    .forumSearch td {
        width: 50% !important;
        padding: 6px !important;
        box-sizing: border-box !important;
        vertical-align: top !important;
    }

    .forumSearch input[type="text"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
    }


    /* ==============================
       BOUTONS
       ============================== */

    .forumButtons {
        width: 100% !important;
        margin: 10px 0 !important;
    }

    .forumButtons td {
        width: 50% !important;
        padding: 3px !important;
    }


    /* ==============================
       LISTE DES SUJETS
       ============================== */

    .forumTopics {
        width: 100% !important;
        table-layout: auto !important;
    }

    .forumTopics td {
        width: auto !important;
        max-width: none !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        vertical-align: top !important;
    }

    .forumTopicNumber {
        width: 30px !important;
        min-width: 30px !important;
        white-space: nowrap !important;
    }

    .forumTopicCount {
        width: 58px !important;
        min-width: 58px !important;
        white-space: nowrap !important;
        text-align: right !important;
    }

    .forumTopicTitle {
        width: auto !important;
    }

    .forumTopicTitle a {
        display: block !important;
        width: 100% !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

}

/* =========================================================
   PETITES ANNONCES - FORMULAIRE
   ========================================================= */

@media screen and (max-width:700px) {

    .bargainForm {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }

    .bargainForm td {
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    /*
       Colonne des libellés :
       Type, Rubrique, Titre, Contact...
    */
    .bargainForm tr > td:first-child:not([colspan]) {
        width: 120px !important;
        max-width: 120px !important;
        padding-left: 6px !important;
        padding-right: 5px !important;
        vertical-align: top !important;
    }

    /*
       Champs texte
    */
    .bargainForm input[type="text"],
    .bargainForm input[type="password"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
    }

    /*
       Zones de texte
    */
    .bargainForm textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
        resize: vertical;
    }

    /*
       Listes déroulantes
    */
    .bargainForm select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
    }

    /*
       Les radios Offre / Demande / Echange
       doivent pouvoir passer à la ligne
    */
    .bargainForm input[type="radio"] {
        width: auto !important;
        max-width: none !important;
        margin-left: 4px !important;
        margin-right: 3px !important;
    }

}

/* =========================================================
   FORUM NEW - FORMULAIRE MOBILE
   ========================================================= */

@media screen and (max-width:700px) {

    .forumNewForm {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }

    .forumNewForm td {
        box-sizing: border-box !important;
        max-width: 100% !important;
        vertical-align: top !important;
    }

    /* Colonne de gauche : "Votre nick", "Votre texte", etc. */
    .forumNewForm tr > td:first-child:not([colspan]) {
        width: 120px !important;
        max-width: 120px !important;
        padding: 5px !important;
    }

    /* Colonne de droite */
    .forumNewForm tr > td:nth-child(2) {
        width: auto !important;
        max-width: none !important;
    }

    /* Tous les champs texte */
    .forumNewForm input[type="text"],
    .forumNewForm input[type="password"],
    .forumNewForm input:not([type]) {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
    }

    /* Grande zone "Votre texte" */
    .forumNewForm textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
        resize: vertical;
    }

    /* Bouton */
    .forumNewForm input[type="submit"] {
        width: auto !important;
        max-width: 100% !important;
    }
}