/* ============================================================
   responsive.css — afpsecourisme.fr  (thème licorne)
   Couche responsive ADDITIONNELLE, chargée APRÈS style.css.
   Objectif : sur smartphone, empiler les blocs verticalement
   (les uns au-dessous des autres au lieu de côte à côte).

   Réversible : retirer la ligne <link ... responsive.css> dans
   header.php pour revenir exactement à l'état d'origine.

   Breakpoint aligné sur le thème : mobile = max-width 767px
   (à 767px le thème passe déjà .container en 100%).

   Étape 1 — Page d'accueil + garde-fous globaux.
   Créé le 2026-06-26.
   ============================================================ */

/* ---- Garde-fou global (toutes tailles) : médias jamais plus
        larges que leur conteneur. Sans effet visible sur desktop. ---- */
img,
iframe,
video,
table {
	max-width: 100%;
}

/* ---- #top_bar : son .container hérite du width:1400/1240px FIXE de
        .container (il ne définit que max-width), donc il déborde sur les
        écrans plus étroits. On le rend fluide (centré, ≤1400px). ---- */
#top_bar .container {
	width: auto !important;
	max-width: 1400px !important;
	box-sizing: border-box !important;
}

/* ===========================================================
   MOBILE : empilement vertical (≤ 767px)
   =========================================================== */
@media screen and (max-width: 767px) {

	/* Aucun scroll horizontal parasite */
	html,
	body {
		overflow-x: hidden;
	}

	img,
	iframe,
	video {
		height: auto;
	}

	/* --- Colonnes WPBakery : pleine largeur, empilées --- */
	.vc_row .wpb_column,
	.vc_row .vc_column_container,
	.vc_row [class*="vc_col-sm-"] {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
	}

	/* --- Rangées flex WPBakery (equal-height / content-middle) :
	       passage en colonne -> les colonnes se mettent
	       les unes SOUS les autres --- */
	.vc_row-flex,
	.vc_row-o-equal-height {
		flex-direction: column !important;
	}

	.vc_row-flex > .wpb_column,
	.vc_row-o-equal-height > .wpb_column {
		flex: 1 1 100% !important;
		width: 100% !important;
	}

	/* --- Grille avis Google (2 colonnes) non gérée en mobile --- */
	.skco-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ===========================================================
   MENU BURGER MOBILE + TABLETTE (≤ 1023px)
   Le thème utilise le burger jusqu'à 1023px, avec les mêmes bugs
   sur tablette que sur mobile. On couvre donc toute la plage.
   Le thème force, HORS media query (ligne ~7695 de style.css),
   .header_center en position absolue + pointer-events:none +
   .menu-main-menu-container en display:flex !important. Résultat :
   le menu ne se cache jamais et le n° de tel flotte en haut.
   On neutralise ce calque ici et on reconstruit un vrai menu
   déroulant vertical, piloté par le toggle JS existant (.active).
   Le préfixe #global_header donne la spécificité nécessaire pour
   battre les !important desktop (et on est chargés après eux).
   =========================================================== */
@media screen and (max-width: 1023px) {

	/* L'en-tête s'empile : logo+burger sur une ligne, menu en dessous.
	   box-sizing pour que le padding 4% soit inclus dans le 100% et que
	   le burger (à droite) ne soit pas rogné hors de l'écran. */
	#global_header .container {
		flex-wrap: wrap !important;
		box-sizing: border-box !important;
		max-width: 100% !important;
	}

	/* Recherche secondaire masquée (cohérent mobile + tablette) */
	#global_header .header_right {
		display: none !important;
	}

	/* header_center passe DANS LE FLUX, pleine largeur, sous l'en-tête.
	   Quand le menu s'ouvre, il pousse le contenu et prend toute la place
	   (au lieu du calque absolu plein écran du desktop). */
	#global_header .header_center {
		position: static !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
		flex: 0 0 auto !important;
		width: 100vw !important;          /* pleine largeur écran */
		max-width: 100vw !important;
		margin-left: calc(-50vw + 50%) !important;  /* full-bleed : sort du padding du conteneur */
		margin-right: calc(-50vw + 50%) !important;
		display: block !important;
		pointer-events: auto !important;
	}

	/* Menu caché par défaut, déroulé quand le JS ajoute .active */
	#global_header .header_center .menu-main-menu-container {
		display: none !important;
		width: 100% !important;
		pointer-events: auto !important;
	}
	#global_header .header_center .menu-main-menu-container.active {
		display: block !important;
	}

	/* Liste verticale, pleine largeur, lisible */
	#global_header .header_center .menu {
		flex-direction: column !important;
		width: 100% !important;
		padding: 8px 0 12px !important;
		margin: 0 !important;
		justify-content: flex-start !important;
		pointer-events: auto !important;
		background: #fff !important;
		box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14) !important;
		border-top: 3px solid #cb2228 !important;
	}
	#global_header .header_center .menu li {
		width: 100% !important;
		position: static !important;   /* annule le contact-btn en absolu */
		transform: none !important;
		margin: 0 !important;
		float: none !important;
		padding-left: 20px !important;
	}
	#global_header .header_center .menu li.menu-item-193 {
		padding-left: 0 !important;
	}
	#global_header .header_center .menu li a {
		display: flex !important;
		align-items: center !important;
		padding: 16px 24px !important;
		font-size: 17px !important;
		line-height: 1.3 !important;
		color: #1e2130 !important;
		border-top: 1px solid #eef0f3 !important;
		text-align: left !important;
	}
	#global_header .header_center .menu > li:first-child a {
		border-top: none !important;
	}
	/* item actif / appui */
	#global_header .header_center .menu li.current-menu-item > a,
	#global_header .header_center .menu li > a:hover {
		background: #f7f8fa !important;
		color: #cb2228 !important;
	}
	/* « Demander un devis » mis en avant comme bouton rouge */
	#global_header .header_center .menu li.menu-devis-btn a {
		margin: 12px 24px 4px !important;
		padding: 14px 20px !important;
		background: #cb2228 !important;
		color: #fff !important;
		text-align: center !important;
		border-radius: 6px !important;
		border-top: none !important;
		font-weight: 600 !important;
	}
	#global_header .header_center .menu li.menu-devis-btn a::before,
	#global_header .header_center .menu li.menu-devis-btn a::after {
		display: none !important;
	}

	/* --- Burger VISIBLE et cliquable ---
	   (le thème met l'icône en blanc -> invisible sur fond clair) */
	#global_header #logo {
		justify-content: space-between !important;
		flex-wrap: nowrap !important;
	}
	.burger {
		display: flex !important;
		width: auto !important;
		flex: 0 0 auto !important;
		align-items: center !important;
		justify-content: center !important;
		min-width: 44px !important;
		min-height: 44px !important;
		font-size: 28px !important;
		padding-right: 0 !important;
		pointer-events: auto !important;
		cursor: pointer !important;
	}
	/* On masque les icônes FontAwesome (qui ne se chargent pas) et on
	   dessine le burger / la croix en pur CSS -> aucune dépendance. */
	.burger i {
		display: none !important;
	}

	/* --- Icône hamburger (3 traits) : span .menu_open quand actif --- */
	.burger .menu_open.active {
		display: block !important;
		position: relative !important;
		width: 44px !important;
		height: 44px !important;
		/* trait du milieu, centré */
		background: linear-gradient(#cb2228, #cb2228) center / 26px 3px no-repeat !important;
	}
	.burger .menu_open.active::before,
	.burger .menu_open.active::after {
		content: "" !important;
		position: absolute !important;
		left: 9px !important;
		width: 26px !important;
		height: 3px !important;
		background: #cb2228 !important;
		border-radius: 2px !important;
	}
	.burger .menu_open.active::before { top: 14px !important; }  /* trait haut */
	.burger .menu_open.active::after  { top: 27px !important; }  /* trait bas */

	/* --- Icône croix (X) : span .menu_close quand actif --- */
	.burger .menu_close.active {
		display: block !important;
		position: relative !important;
		width: 44px !important;
		height: 44px !important;
		background: none !important;
	}
	.burger .menu_close.active::before,
	.burger .menu_close.active::after {
		content: "" !important;
		position: absolute !important;
		top: 50% !important;
		left: 9px !important;
		width: 26px !important;
		height: 3px !important;
		background: #cb2228 !important;
		border-radius: 2px !important;
	}
	.burger .menu_close.active::before { transform: translateY(-50%) rotate(45deg) !important; }
	.burger .menu_close.active::after  { transform: translateY(-50%) rotate(-45deg) !important; }

	/* --- Retrait du numéro de téléphone en haut (mobile) --- */
	#global_header .header_center .menu li.menu-contact-btn {
		display: none !important;
	}
}

/* ===========================================================
   SECTION HERO « Formation Santé & Sécurité au travail » (≤767px)
   Le thème force les colonnes du banner à 50% de large en
   !important HORS media query (style.css ~8353). Résultat :
   même empilées, elles ne prennent que la moitié de la largeur.
   On repasse chaque colonne en pleine largeur.
   =========================================================== */
@media screen and (max-width: 767px) {

	.banner .vc_column_container:first-child,
	.banner .vc_column_container:last-child,
	.banner > .wpb_column,
	.banner .vc_col-sm-2\/5,
	.banner .vc_col-sm-3\/5 {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	/* Le contenu interne respire sur toute la largeur */
	.banner .vc_column-inner {
		width: 100% !important;
	}
}

/* ===========================================================
   AJUSTEMENTS SECTIONS HOME (≤767px)
   - .row_mission : empilement vertical (display:flex requis pour
     que flex-direction:column ait un effet, le thème ne la met
     pas en flex)
   - .row_indicateurs (les chiffres) : pleine largeur de l'écran
   =========================================================== */
@media screen and (max-width: 767px) {

	.row_mission {
		display: flex !important;
		flex-direction: column !important;
	}

	.row_mission .padd_left {
		padding-left: 0% !important;
	}

	.row_mission .big_padd_right {
		padding-left: 0px !important;
		padding-right: 0% !important;
	}

	/* Bouton mission centré */
	.btn_mission {
		display: flex !important;
		width: fit-content !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Eyebrow (sur-titre) centré */
	.section_eyebrow {
		text-align: center !important;
	}

	/* .lq_left centré (au lieu de collé à droite) */
	.lq_left {
		justify-content: center !important;
	}

	/* .fcat-hero h1 : interligne réduit */
	.fcat-hero h1 {
		line-height: 30px !important;
	}

	/* .fcat-card : padding horizontal */
	.fcat-card {
		padding-right: 4% !important;
		padding-left: 4% !important;
	}

	/* .fcat-card-name : taille de police */
	.fcat-card-name {
		font-size: 21px !important;
	}

	/* .fcat-section-head : titre au-dessus, sous-titre en dessous, centrés, écart réduit */
	.fcat-section-head {
		flex-direction: column !important;
		align-items: center !important;
		gap: 4px !important;
		text-align: center !important;
	}

	/* .footer_devis_inner : width retirée + padding + max-width */
	.footer_devis_inner {
		width: auto !important;
		padding: 0% 3% !important;
		max-width: 100% !important;
	}

	/* .footer_main_grid : padding gauche (box-sizing pour que le padding
	   soit inclus dans la largeur et ne déborde pas) */
	#footer .footer_main_grid {
		padding-left: 8% !important;
		box-sizing: border-box !important;
		max-width: 100% !important;
	}

	/* ===== Page contact : sections en 100%, jamais de débordement ===== */
	.cp-page,
	.cp-hero,
	.cp-hero-inner,
	.cp-body,
	.cp-coords-wrap,
	.cp-coords-card,
	.cp-form-card,
	.cp-cf7-grid {
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	.cp-coord-content,
	.cp-coord-value {
		min-width: 0 !important;
		overflow-wrap: anywhere !important;
	}

	.cat-block__list a {
		flex-direction: column;
		align-items: inherit !important;
	}

	/* Cat-block de la section Secourisme centré horizontalement */
	.row_secourisme .cat-block {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* --- Anti-débordement horizontal des cat-blocks ---
	   Les items de la grille (.cat-block__image / .cat-block__list)
	   ont min-width:auto par défaut : ils s'élargissent à la taille
	   de leur contenu (tags en flex-wrap qui ne wrappent pas faute de
	   largeur contrainte) -> dépassement de l'écran.
	   min-width:0 laisse la piste 1fr contraindre la largeur. */
	.cat-block {
		max-width: 100% !important;
	}
	.cat-block__image,
	.cat-block__list {
		min-width: 0 !important;
		max-width: 100% !important;
	}
	.cat-block__list {
		overflow-x: hidden !important;
	}
	a.cat-row {
		min-width: 0 !important;
		max-width: 100% !important;
	}
	.cat-row__title {
		min-width: 0 !important;
		overflow-wrap: anywhere !important;
	}

	/* --- Confinement strict de toute la zone catalogue formation :
	   aucun descendant ne peut dépasser la largeur de son parent,
	   d'où que vienne le débordement. --- */
	.row_formation,
	.row_formation * {
		max-width: 100% !important;
	}
	.row_formation,
	.cat-block,
	.cat-block__list {
		overflow-x: hidden !important;
	}
	a.cat-row {
		flex-wrap: wrap !important;
	}
	.cat-row__tags {
		flex-shrink: 1 !important;
		min-width: 0 !important;
	}
	.cat-row__title {
		word-break: break-word !important;
	}

	.row_indicateurs {
		margin-left: calc(-50vw + 50%) !important;
		margin-right: calc(-50vw + 50%) !important;
		box-sizing: border-box !important;
		overflow-x: hidden !important;
	}
}

/* ===========================================================
   BANNER — barre de stats + cartes « mission » (≤767px)
   =========================================================== */
@media screen and (max-width: 767px) {

	/* .banner_stats_row : un wrapper parent porte du padding qui
	   l'empêche de prendre toute la largeur -> on retire ce padding
	   sur le(s) conteneur(s) qui contient la barre de stats, et on
	   force la barre en pleine largeur. */
	/* .banner_stats_row : pleine largeur de l'écran (full-bleed),
	   indépendamment du padding des wrappers parents */
	.banner_stats_row {
		margin-left: calc(-50vw + 50%) !important;
		margin-right: calc(-50vw + 50%) !important;
		box-sizing: border-box !important;
		overflow-x: hidden !important;
	}

	/* .mission_cards : conteneur centré sur toute la largeur écran,
	   espace au-dessus, cartes à 80% de l'écran et centrées */
	.mission_cards {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		margin-left: calc(-50vw + 50%) !important;
		margin-right: calc(-50vw + 50%) !important;
		margin-top: 30px !important;
		box-sizing: border-box !important;
		overflow-x: hidden !important;
	}
	.mission_cards .mission_card {
		width: 80vw !important;
		max-width: 80vw !important;
		box-sizing: border-box !important;
	}
}

/* ===========================================================
   Section « NOTRE CATALOGUE » (home) — padding latéral
   (intro + rangées de formations) — mobile + tablette ≤1023px
   =========================================================== */
@media screen and (max-width: 1023px) {

	.row_formations_intro,
	.row_formation {
		padding-left: 4% !important;
		padding-right: 4% !important;
		box-sizing: border-box !important;
	}

	/* .lq_left centré aussi sur tablette */
	.lq_left {
		justify-content: center !important;
	}

	/* .lq_right : padding latéral sur tablette */
	.lq_right {
		padding-left: 4% !important;
		padding-right: 4% !important;
		box-sizing: border-box !important;
	}
}

/* ===========================================================
   FOOTER — padding latéral sur tablette (≤1023px)
   =========================================================== */
@media screen and (max-width: 1023px) {

	.footer_devis_inner {
		padding-left: 4% !important;
		padding-right: 4% !important;
		box-sizing: border-box !important;
	}

	#footer .footer_main_grid {
		padding-left: 4% !important;
		padding-right: 4% !important;
		box-sizing: border-box !important;
	}
}

/* ===========================================================
   FOOTER — tablette (768-1023px) : logo seul au-dessus
   (toute la largeur), puis les 3 autres colonnes égales
   alignées sur une rangée de 3
   =========================================================== */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	#footer .footer_main_grid {
		grid-template-columns: 1fr 1fr 1fr !important;
	}
	/* le logo s'étale sur toute la largeur, au-dessus */
	#footer .footer_main_grid .footer_col_logo {
		grid-column: 1 / -1 !important;
	}
}

/* ===========================================================
   MENU — plage 1024-1099px uniquement : tout sur UNE ligne.
   À partir de 1100px on laisse le rendu desktop natif du thème.
   .header_right (menu main-right) est vide → on libère sa
   place pour le menu principal, qu'on empêche de se replier.
   =========================================================== */
@media screen and (min-width: 1024px) and (max-width: 1099px) {
	/* colonne droite vide → masquée pour récupérer l'espace */
	#global_header .header_right {
		display: none !important;
	}
	#global_header #logo {
		flex: 0 0 18% !important;
		max-width: 18% !important;
	}
	#global_header .header_center {
		flex: 0 0 82% !important;
	}
	/* le thème ajoute justify-content:center à partir de 1150px
	   (bloc 1150-1300) → recentre le logo. On l'aligne à gauche. */
	#global_header .container {
		justify-content: flex-start !important;
	}

	/* le menu reste sur une seule ligne */
	#global_header .header_center .menu {
		flex-wrap: nowrap !important;
	}
	#global_header .menu li {
		padding: 0 5px !important;
	}
	#global_header .menu li a {
		font-size: 13px !important;
	}

	/* tél masqué sur cette plage (1024-1099) faute de place ;
	   reste présent sur tablette/mobile (burger, ≤1023) et ≥1100px. */
	#global_header .menu li.menu-contact-btn {
		display: none !important;
	}

	/* devis : sorti du position:absolute, remis dans la ligne, poussé à droite */
	#global_header .menu li.menu-devis-btn {
		position: static !important;
		transform: none !important;
		right: auto !important;
		top: auto !important;
		order: 98 !important;
		margin-left: auto !important;
	}
}

/* ===========================================================
   LOGO — plage 1150-1300px : le thème met
   #global_header .container en justify-content:center, ce qui
   décentre le logo (qui passe derrière le menu en position
   absolue). On le réaligne à gauche, comme en desktop ≥1350.
   =========================================================== */
@media screen and (min-width: 1150px) and (max-width: 1300px) {
	#global_header .container {
		justify-content: flex-start !important;
	}
}

/* ===========================================================
   MENU — plage 1100-1199px : les 4 catégories se replient sur
   2 lignes (place centrale trop juste entre les réserves de
   160px). On force une seule ligne + on comprime légèrement.
   =========================================================== */
@media screen and (min-width: 1100px) and (max-width: 1199px) {
	.header_center .menu {
		flex-wrap: nowrap !important;
	}
	.header_center .menu li:not(.menu-contact-btn):not(.menu-devis-btn) a {
		font-size: 12px !important;
		white-space: nowrap !important;
	}
	.header_center .menu li:not(.menu-contact-btn):not(.menu-devis-btn) a::before {
		width: 24px !important;
		height: 24px !important;
		margin-right: 3px !important;
	}
	.header_center .menu li:not(.menu-contact-btn):not(.menu-devis-btn) {
		padding: 0 4px !important;
	}
}

/* ===========================================================
   PLAGE 1024-1350px — conteneur fluide homogène + gouttières
   Le thème force déjà .container à 100% sur 1024-1300, mais
   saute à 1240px fixe sur 1301-1350. On uniformise toute la
   plage et on ajoute des gouttières latérales constantes.
   =========================================================== */
@media screen and (min-width: 1024px) and (max-width: 1350px) {
	body .container {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 32px !important;
		padding-right: 32px !important;
		box-sizing: border-box !important;
	}
	/* header & barre supérieure gèrent leur propre largeur */
	#global_header .container,
	#top_panel .container {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* garde-fou : aucun scroll horizontal parasite */
	html, body {
		overflow-x: hidden !important;
	}

	/* .row_mission est une rangée WPBakery stretch_row : le JS lui
	   pose un left:-32px inline (compense la gouttière). On l'annule. */
	.row_mission {
		left: auto !important;
	}
	/* son fond (calque Ultimate VC) doit couvrir 100% de l'écran
	   (full-bleed) malgré la gouttière de 32px du conteneur. */
	.row_mission .upb_row_bg {
		left: 50% !important;
		right: auto !important;
		width: 100vw !important;
		margin-left: -50vw !important;
	}

	/* .row_sessions (stretch_row) : on annule l'étirement JS pour la
	   recentrer proprement dans le conteneur (gouttières symétriques). */
	.row_sessions {
		left: auto !important;
		right: auto !important;
		width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Même traitement pour la rangée « Ils parlent de l'AFPS SECOURISME »
	   (avis Google). Son el_class "padd" est trop générique → on la cible
	   via le conteneur du widget avis (.ar-reviews-wrap). */
	.vc_row.padd:has(.ar-reviews-wrap) {
		left: auto !important;
		right: auto !important;
		width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* ===========================================================
   ≥ 1351px — garde-fou anti-scroll horizontal.
   Au-dessus de 1350px, les rangées stretch_row WPBakery (width
   100vw posée par le JS, qui inclut la barre de défilement)
   provoquent un léger débordement. On le neutralise comme sur
   la plage 1024-1350.
   =========================================================== */
@media screen and (min-width: 1351px) {
	html, body {
		overflow-x: hidden !important;
	}
}