@media (max-width: 1200px) {



}

@media (max-width: 992px) {

	.top-header .bloc {
		grid-template-columns: 100%;
		text-align: center;
	}

	.top-header .bloc .content {
		order: 2;
	}

	#overlay {
	    position: fixed;
	    width: 100%;
	    height: 100%;
	    background-color: #000;
	    bottom: 0;
	    left: 0;
	    opacity: .5;
	}

	.navbar-nav > ul.menu {
	    position: fixed;
	    display: block;
	    width: 40%;
	    height: 100%;
	    background-color: #FFF;
	    left: -1000px;
	    bottom: 0;
	    margin-left: 0;
	    z-index: 99999;
	    transition: .5s;
	    padding-top: 70px;
	}

	.navbar-nav > ul.menu.show {
		left: 0;
		transition: .5s;
	}

	#menu_button {
		display: block;
		cursor: pointer;
		font-size: 24px;
    	line-height: normal;
	}

	.navbar-nav {
		justify-content: space-between;
		margin: 0;
	}

	.navbar-nav .nav-link {
		padding: 0;
		font-size: 18px;
	}

	.navbar-nav .nav-item.buttons {
		flex-direction: column;
	}

	.navbar-nav .nav-item.buttons .nav-link {
		margin: 0;
		margin-bottom: 15px;
		text-align: center;
	}

	.navbar-nav .nav-item.buttons .nav-link:last-child {
		margin-bottom: 0;
	}

	.navbar-nav > ul li {
		padding: 15px 15px;
    	border-bottom: 1px solid #f1f1f1;
	}

	.responsive-table {
		overflow-x: auto;
	}

	.bloc-audit form {
		width: 100%;
	}

	.navbar-nav .nav-item.buttons .nav-link .fa-circle {
		position: relative;
	    top: -1px;
	    left: -2px;
	}

	.top-header .image {
		width: 70%;
    	margin: auto;
	}

	.top-header .bloc .content:after {
		left: 0;
	}

	#close {
		display: block !important;
		position: absolute;
	    top: 17px;
	    right: 15px;
	    font-size: 23px;
	    color: #6478ff;
	}

}

@media (max-width: 767px) {

	.navbar-nav > ul.menu {
		width: 80%;
	}

	.top-header .bloc .content:after {
		content: unset;
	}

	.top-header:before {
		width: 180px;
    	height: 180px;
    	left: -90px;
    	top: unset;
    	bottom: -50px;
	}

	.top-header:after {
	    width: 600px;
	    height: 600px;
	    border-radius: 600px;
	    left: 50%;
	    top: -310px;
	    transform: translateX(-50%);
	}

	.top-header .header-title {
		font-size: 30px;
		line-height: normal;
	}

	.top-header .header-title span {
		font-size: 24px;
		margin-top: 10px;
	}

	.top-header .bloc {
		position: relative;
    	top: -50px;
	}

	.top-header .image {
		margin-bottom: 30px;
	}

	.card-header {
		text-align: center;
		padding: 20px 15px;
	}

	.card-title {
		margin-bottom: 0;
	}

	.card-body {
		padding: 20px 15px;
	}

	.content-body {
		padding-top: 0;
	}

	.content-body .container-fluid {
		padding: 30px 15px;
	}

	#funnel_chart {
		width: 100%;
	}

	.canvasjs-chart-canvas {
		width: 100%;
		height: auto;
		height: 130px;
	}

	.graph-cadre {
		overflow-x: scroll;
	}

	.textes .content {
		width: 90%;
	}

	.textes .element {
		padding: 70px 0 40px;
	}

	.textes .element:before {
		left: 15px;
		top: 20px;
	}

	.textes .element,
	.top-header {
		margin-bottom: 50px;
	}

}

@media (max-width: 380px) {

	.top-header .bloc {
		top: 0;
	}

}
/* ═══════════════════════════════════════════════════════════════════════
   REFONTE MOBILE 2026-07 — anti-débordement + confort tactile (global)
   Chargé partout via includes/header.php (avec cache-buster asset_v).
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
    html, body { overflow-x: hidden; max-width: 100%; }
    img, svg, video, canvas, iframe { max-width: 100%; }

    /* Tableaux (hors DataTables) : scroll horizontal au lieu de casser la page */
    table:not(.dataTable) {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .dataTables_wrapper, .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Barre d'outils par site (hub rapport / liste) : scroll horizontal propre */
    .stn-bar {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
    }
    .stn-bar::-webkit-scrollbar { height: 4px; }
    .stn-bar::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 4px; }

    /* Conteneurs applicatifs : marges réduites, jamais plus large que l'écran */
    .board-container, .container, .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
        max-width: 100% !important;
    }

    /* Cartes : ne jamais imposer une largeur fixe qui déborde */
    .card, .new-audit-card { max-width: 100% !important; }

    /* Cibles tactiles confortables */
    .btn, .nav-btn, button, .chart-tab { min-height: 40px; }
}

/* Mobile — retour à la ligne des rangées flex de contenu + empilement grilles widgets */
@media (max-width: 820px) {
    .card [style*="display:flex"],
    .card [style*="display: flex"],
    .board-container [style*="display:flex"],
    .board-container [style*="display: flex"] { flex-wrap: wrap !important; }

    .sq-grid { grid-template-columns: 1fr !important; }
    .sq-grid > div:last-child { min-width: 0 !important; text-align: left !important; }
}

/* Mobile — rapport : la section logo passe en colonne, le lien "Modifier…" ne déborde plus */
@media (max-width: 820px) {
    .logo-section { flex-wrap: wrap; }
    .change_logo { flex-basis: 100%; }
    .change_logo a { white-space: normal; word-break: break-word; }
    .audit-date { margin-left: 0; display: block; margin-top: 4px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MENU MOBILE — panneau vertical plein écran (bat mycss.css .navbar-nav{row})
   responsive.css est chargé APRÈS mycss.css → ces règles gagnent.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    .navbar-nav {
        position: fixed !important;
        top: var(--navbar-height, 70px) !important;
        left: 0 !important; right: 0 !important;
        /* .modern-navbar a un backdrop-filter -> il devient le bloc conteneur du
           position:fixed enfant. On fixe une hauteur explicite au lieu de bottom:0. */
        height: calc(100vh - var(--navbar-height, 70px)) !important;
        height: calc(100dvh - var(--navbar-height, 70px)) !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: auto !important;
        background: var(--secondary-bg, #fff) !important;
        padding: 14px !important;
        gap: 4px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: 1000 !important;
        box-shadow: 0 12px 34px rgba(2,6,23,.18);
    }
    .navbar-nav.open { transform: translateX(0) !important; }

    /* items empilés, pleine largeur */
    .navbar-nav > li,
    .navbar-nav > .nav-dropdown { width: 100% !important; }
    .navbar-nav .nav-link {
        width: 100% !important;
        justify-content: flex-start !important;
        padding: 13px 14px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
        white-space: normal !important;
    }
    /* sous-menus : liste indentée déroulée sous leur parent */
    .navbar-nav .nav-dropdown-menu {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
        padding: 2px 0 8px 14px !important;
        min-width: 0 !important;
        width: 100% !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    .navbar-nav .nav-dropdown-menu .nav-link { font-size: 14px !important; }
    .nav-dropdown-caret { display: none !important; }
}