@-ms-viewport {
	width: device-width;
}

@viewport {
	width: device-width;
}

html{
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

.for-mobile{
	display: none;
}



/*  < 768 : Smartphone (iPad = 768)
------------------------------------*/
@media screen and (max-width: 767px) {

	/* Container fluide */
	.site {
		width: auto;
		max-width: 100%;
	}

	/* Header : grid 3 colonnes — hamburger | LOGO centré | contact.
	   Les colonnes 1 et 3 sont égales (1fr) donc le logo (col 2 auto) est
	   géométriquement au milieu peu importe la largeur des deux boutons. */
	.site-header {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		height: auto;
		padding: 6px 10px;
		margin-bottom: 0;
	}
	.site-header .home-link,
	.site-header-jp {
		display: none;
	}
	#navbar {
		justify-self: start;
	}
	#header_logo {
		position: relative;
		top: auto;
		right: auto;
		z-index: 102;
		text-align: center;
		padding: 0;
	}
	#header_logo img {
		width: 120px;
		max-width: 100%;
		height: auto;
		display: block;
	}

	/* Lien Contact à droite (même hauteur que le bouton hamburger). */
	.header-contact-link {
		display: flex;
		align-items: center;
		justify-self: end;
		height: 44px;
		padding: 0 10px;
		font-size: 16px;
		line-height: 1;
		color: #555;
		text-decoration: none;
	}

	/* Navigation : hamburger toggle + menu en overlay.
	   On force position:static pour que l'overlay absolu prenne .site-header
	   comme ancre (pleine largeur) plutôt que .main-navigation (étroit dans
	   la grid du header). */
	.main-navigation {
		position: static;
		margin: 0;
	}

	/* Bouton hamburger : "Menu" à côté d'une icône 3 lignes
	   qui se transforme en croix au clic.
	   Même hauteur que .header-contact-link pour alignement vertical. */
	.menu-toggle {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;
		height: 44px;
		padding: 0 10px;
		font-size: 16px;
		font-weight: normal;
		line-height: 1;
		cursor: pointer;
		background: transparent;
		border: 0;
		user-select: none;
	}
	.menu-toggle-icon {
		position: relative;
		display: block;
		width: 22px;
		height: 2px;
		background: #141412;
		transition: background 0.15s ease;
	}
	.menu-toggle-icon::before,
	.menu-toggle-icon::after {
		content: "";
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background: #141412;
		transition: transform 0.25s ease;
	}
	.menu-toggle-icon::before {
		top: -7px;
	}
	.menu-toggle-icon::after {
		top: 7px;
	}
	.main-navigation.toggled-on .menu-toggle-icon {
		background: transparent;
	}
	.main-navigation.toggled-on .menu-toggle-icon::before {
		transform: translateY(7px) rotate(45deg);
	}
	.main-navigation.toggled-on .menu-toggle-icon::after {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* Menu caché par défaut, en overlay positionné par rapport au header.
	   Le menu prend 80% de la largeur ; un voile blanc translucide couvre
	   les 20% restants et tout le contenu en dessous. */
	.nav-menu {
		display: none;
	}
	.main-navigation.toggled-on .nav-menu {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		width: 80%;
		z-index: 100;
		background: #fff;
		box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.12);
	}
	.main-navigation.toggled-on::before {
		content: "";
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		background: rgba(255, 255, 255, 0.7);
		pointer-events: none;
	}

	/* Le hamburger et le lien contact restent au-dessus du voile (le logo
	   a déjà son z-index défini plus haut dans son propre bloc). */
	.menu-toggle,
	.header-contact-link {
		position: relative;
		z-index: 102;
	}

	ul.nav-menu {
		padding: 0;
	}
	.nav-menu li {
		display: block;
		border-top: 1px solid #eae0cc;
	}
	.nav-menu li a {
		padding: 14px 16px;
		font-size: 16px;
	}

	/* Sous-menus masqués sur mobile : seules les 3 entrées top-level
	   apparaissent dans l'overlay. */
	.nav-menu .sub-menu,
	.nav-menu .children {
		display: none;
	}

	/* Contenu pleine largeur, sidebar empilée dessous */
	.home .site-main .content-area,
	.page .site-main .content-area,
	.blog .site-main .content-area,
	.single-post .site-main .content-area {
		margin-right: 0;
	}
	.site-main .content-area {
		padding: 0 10px;
	}
	.site-main .sidebar-container {
		position: static;
		width: auto;
		padding: 0 10px;
		margin-top: 20px;
	}

	/* La home a un padding-horizontal en plus sur desktop (style.css),
	   on le neutralise sur mobile pour éviter le double padding. */
	.home .site-main {
		padding-left: 0;
		padding-right: 0;
		padding-top: 5px;
	}

	/* Activités (home) : compact */
	.activites .activite {
		gap: 10px;
	}
	.activite_thumb img {
		width: 64px;
		height: 64px;
	}

	/* Tailles de titres réduites */
	.page-id-35 article .entry-title,
	.single-activite article .entry-title {
		font-size: 26px;
	}
	.site-title {
		font-size: 36px;
	}
	h2 {
		font-size: 20px;
		padding: 16px 0;
	}

	/* Images flottantes : on délève le float pour ne pas casser la lecture */
	.entry-content img.alignleft,
	.entry-content img.alignright,
	.entry-content .wp-caption.alignleft,
	.entry-content .wp-caption.alignright {
		float: none;
		display: block;
		margin: 10px auto;
	}

	/* Tableaux/captions très larges (genre tableaux des kana) :
	   scroll horizontal plutôt que débordement. */
	.entry-content .wp-caption {
		max-width: 100% !important;
		width: auto !important;
		overflow-x: auto;
	}
	.entry-content table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}

	/* Footer */
	.site-footer {
		height: auto;
		padding: 12px;
		font-size: 13px;
	}

	/* Encadré [info] : reprend toute la largeur dispo */
	.cdj-info {
		display: block;
	}
}