/*

Common breakpoints for widths of devices :
	- 320px - 480px : Mobile
	- 481px - 768px : Tablet, iPad
	- 769px - 1024px : Laptop, small screen
	- 1025px - 1200px : Desktop, large screen
	- 1201px and more : Extra large screen, TV

So let's use : 480px and 1024px !

*/

/*===== BIG screen size : desktop (ONLY !) =====*/

@media screen and (min-width : 1025px) {
	
	
	
}


/*===== MEDIUM screen size : tablet, mobile-landscape (AND below !) =====*/

@media screen and (max-width : 1024px) {
	
	/* The side menu hover opener is a desktop affordance : on small (touch) screens it is
	   useless (no hover) and its invisible fixed strip covers the right edge of the screen,
	   swallowing the taps meant for the elements underneath (like the page navigation close button) */
	.side_navigation_menu_opener {
		display : none ;
	}
	
	/* General */
	:root {
		--pageNavigationWidth : 200px ;
		
		--musicVideoMinHeight : 125px ;
	}
	
	.top_navigation_menu {
		display : none ;
	}
	
	header {
		justify-content : center ;	/* Pourquoi pas en style.css ??? */
	}
	
	.hamburger,
	.side_navigation_menu {
		visibility : visible !important ;
	}
	
	dialog {
		min-height : 250px ;
		min-width : 375px ;
	}
	
	.dialog_header {
		height : 60px ;
		width : 100% ;
	}

	.dialog_title {
		max-width: calc(100% - 30px - (20px * 2) - 30px) ;
	}

	.dialog_close {
		height : auto ;
		width : auto ;
		
		font-size : 1em ;
	}
	
}


/*===== SMALL screen size : mobile-portrait =====*/

@media screen and (max-width : 480px) {
	
	/* General */
	:root {
		--pageNavigationWidth : 0px ;
		--pageNavigationHeight : 350px ;	/* Fallback, overridden below with dvh */
		--pageNavigationHeightMin : calc(52px + env(safe-area-inset-bottom, 0px)) ;
		
		--sliderMenuHeight : 45px ;
		
		--musicVideoMinHeight : 30vh ;
	}
	
	/* Disables pull-to-refresh but allows overscroll glow effects. */
	.page_navigation_main {
		overscroll-behavior-y : contain ;
	}
	
	/* Navigation */
	.side_navigation_menu {
		--navigationMenuWidth : 200px ;
	}
	
	.side_navigation_menu_item {
		height : 60px ;
	}
		.side_navigation_menu_item:hover {
			transform : translateX(3px) ;
		}
	
	.side_navigation_menu_item_foreground {
		justify-content : center ;
	}
	
	.side_navigation_menu_item_icon_container {
		display : none ;
	}
	
	.side_navigation_menu_item_title {
		margin-left : 0 ;
		
		font-size : 1.2em ;
	}
	
	/* Main */
	main {
		margin-top : var(--headerHeight) ;
	}
	
	.page_navigation_list {
		margin : 5px 5px 15px 5px ;
	}
	
	.container_page {
		margin-bottom : var(--pageNavigationHeightMin) ;
		margin-left : 0px ;
		
		height : 100% ;
	}
		.container_page.equilibrium_state {
			margin-left : 0px ;
		}
	
	/* Native-app bottom bar / sheet :
	   - anchored with "bottom : 0" and revealed with a transform, so nothing here
	     depends on the viewport height (--appHeight) : the bar no longer jitters
	     when the mobile URL bar collapses or expands during the scroll
	   - collapsed, exactly the header (the app bar) stays visible : no list item
	     can peek out */
	.container_page_navigation {
		/* Content-adaptive : the sheet is as tall as its list (bounded below) */
		height : auto ;
		width : 100% ;
		top : auto ;
		bottom : 0 ;
		left : 0 ;
		
		background-color : var(--surface2) ;
		/* Square corners when collapsed (app bar) : rounded corners would let the raw
		   page content show through the two corner notches. The sheet gets its rounded
		   corners when opened, over the dimmed backdrop */
		border-top-left-radius : 0 ;
		border-top-right-radius : 0 ;
		border-top : 1px solid var(--borderColor) ;
		
		box-shadow : 0 -12px 32px rgba(0, 0, 0, 0.55) ;
		
		z-index : 9999 ;
		
		overflow : hidden ;
		
		opacity : unset ;
		translate : unset ;
		
		transform : translateY(calc(100% - var(--pageNavigationHeightMin))) ;
		transition : transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), border-radius 0.3s cubic-bezier(0.32, 0.72, 0, 1) ;
	}
		/* The base ".equilibrium" rule (added by JS on the first scroll) redefines the
		   transitions without "transform" : it must be overridden here, otherwise the
		   sheet loses its animation as soon as the user has scrolled once */
		.container_page_navigation.equilibrium,
		.container_page_navigation.equilibrium_state {
			transition : transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), border-radius 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 1s ease-in-out, translate 1s ease-in-out ;
		}
		.container_page_navigation.opened {
			transform : translateY(0) ;
			border-top-left-radius : 16px ;
			border-top-right-radius : 16px ;
		}
		
		.back_to_top {
		width : 36px ;
		line-height : 36px ;
		font-size : 20px ;
		right : 14px ;
	}
	
	/* On touch, the hover state sticks after a tap : neutralized */
		.page_navigation_close:hover {
			background : none ;
			color : inherit ;
		}
		
		/* The close button appears instantly (no animation) */
		.page_navigation_close {
			transform : none ;
			transition : none ;
		}
		.container_page_navigation.opened .page_navigation_close {
			opacity : 1 ;
			pointer-events : auto ;
		}
	
	.container_page_navigation.opened .page_navigation_title {
		color : inherit ;
		text-shadow : 0 0 5px var(--textColor) ;
	}
	
	.page_navigation_heading.active {
		background : unset ;
		color : unset ;
	}
		.page_navigation_heading.active:hover {
			background : unset ;
			color : var(--colorHover) ;
		}
	
	.big_anchor {
		scroll-margin-top : calc(var(--headerHeight) + 20px) ;
	}
	.anchor {
		scroll-margin-top : calc(var(--headerHeight) + 10px) ;
	}
	
	/* App-bar caption look : clearly distinct from the navigation items */
	.page_navigation_title {
		margin : 4px 0 8px 0 ;
		
		font-size : 0.78em ;
		font-weight : 600 ;
		letter-spacing : 0.16em ;
		color : var(--colorMuted) ;
	}
	
	.container_page_navigation.opened .page_navigation_header {
		height : 52px ;
		padding-bottom : 0 ;
		border-bottom : 1px solid var(--borderSubtle) ;
	}
	/* While the sheet follows the finger, its transition must not fight the drag */
	.container_page_navigation.dragging {
		transition : none ;
	}
	
	.page_navigation_header {
		display : flex ;
		padding-bottom : env(safe-area-inset-bottom, 0px) ;
		
		cursor : pointer ;
		user-select : none ;
		-webkit-user-select : none ;
		
		transition : opacity 0.2s ease, transform 0.2s ease, background 0.2s ease ;
	}
	
	.page_navigation_main {
		height : auto ;
		max-height : calc(min(65dvh, 420px) - 52px) ;
		padding-bottom : env(safe-area-inset-bottom, 0px) ;
		overscroll-behavior : contain ;
	}
	
	/* Scrolling the page behind collapses the sheet (see the scroll listener) : the
	   page stays scrollable on purpose, like with the main navigation menu */
	
	/* Dim the page behind the sheet. Driven by a variable so the dimming can follow
	   the finger during a drag. Lives inside <main> (a stacking context, z-index 1) :
	   attached to <body> it would sit above the sheet and swallow its taps */
	main:has(.container_page_navigation)::after {
		content : "" ;
		position : fixed ;
		inset : 0 ;
		z-index : 9998 ;
		
		background : rgba(0, 0, 0, 0.45) ;
		opacity : var(--pageNavigationDim, 0) ;
		pointer-events : none ;
		transition : opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1) ;
	}
	main:has(.container_page_navigation.opened) {
		--pageNavigationDim : 1 ;
	}
	main:has(.container_page_navigation.opened)::after {
		pointer-events : auto ;
	}
	main.page_navigation_dim_dragging::after {
		transition : none ;
	}
	
	.container_title.menu_opened {
		transform : translateX(-100px) ;
	}
	
	/* Hero */
	.hero {
		min-height : calc(80vh - var(--headerHeight)) ;
		
		font-size : 1.1em ;
	}
	
	/* Articles */
	article {
		--paddingVertical : 5% ;
		--paddingHorizontal : 1% ;
		
		min-height : calc(80vh - var(--headerHeight)) ;
		
		flex-wrap : wrap ;
	}
	
	.article_preview {
		width : 100% ;
		
		margin-top : 20px ;
	}
	
	.article_text {
		width : 100% ;
	}
	
	/* Slider */
	.slider {
		width : 100% ;
		overflow : hidden ;
	}

	.slider_menu {
		width : 100% ;
		height : var(--sliderMenuHeight) ;
		position : fixed ;
		z-index : 12 ;
		
		display : flex ;
		flex-direction : row ;
		flex-wrap : nowrap ;
		justify-content : space-between ;
		align-items : center ;
		
		background-color : rgba(16, 16, 16, 0.85) ;		/* #101010 */
		border-bottom : 1px solid var(--borderColor) ;
		
		user-select : none ;
	}
	
	.slider_menu_items_container {
		width : 100% ;
		overflow-x : auto ;
		
		display : flex ;
		flex-direction : row ;
		flex-wrap : nowrap ;
		justify-content : space-between ;
		align-items : center ;
	}
	
	.slider_menu_item {
		margin : 5px 3px ;
		padding : 5px 12px ;
		
		display : flex ;
		flex-direction : row ;
		flex-wrap : nowrap ;
		justify-content : center ;
		align-items : center ;
		
		background : #404040 ;
		border-radius : 20px ;
		
		font-size : 0.95em ;
		
		transition : background 0.1s ease, color 0.1s ease, box-shadow 0.1s ease ;
	}
		.slider_menu_item:first-of-type {
			margin-left : calc(3px + 5px) ;
		}
		.slider_menu_item:last-of-type {
			margin-right : calc(3px + 5px) ;
		}
		.slider_menu_item.active {
			background : var(--backgroundWhite) ;
			color : var(--colorBlack) ;
			
			pointer-events : none ;
		}
		.slider_menu_item:hover {
			box-shadow : 0 0 3px #808080 ;
		}
	
	.slider_menu_effect {
		position : absolute ;
		bottom : 0 ;
		left : 0 ;
		
		height : 2px ;
		width : 0 ;
		
		background : var(--backgroundWhite) ;
		
		transition : width 0.2s ease, transform 0.1s ease ;
	}
	
	.slider_menu_items_container::-webkit-scrollbar {
		width : 0 ;
		height : 0 ;
	}
	.slider_menu_items_container::-webkit-scrollbar-thumb,
	.slider_menu_items_container::-webkit-scrollbar-track {
		background: transparent ;
	}
	/* Hide scrollbar for Chrome, Safari and Opera */
	.slider_menu_items_container::-webkit-scrollbar {
		display : none ;
	}
	/* Hide scrollbar for IE, Edge and Firefox */
	.slider_menu_items_container {
		-ms-overflow-style : none ;		/* IE and Edge */
		scrollbar-width : none ;		/* Firefox */
	}

	.slides {
		margin-top : var(--sliderMenuHeight) ;
		display : flex ;

		overflow-x : auto ;
		scroll-snap-type : x mandatory ;
		scroll-behavior : smooth ;
	}

	.slides::-webkit-scrollbar {
		width : 0 ;
		height : 0 ;
	}
	.slides::-webkit-scrollbar-thumb,
	.slides::-webkit-scrollbar-track {
		background: transparent ;
	}
	/* Hide scrollbar for Chrome, Safari and Opera */
	.slides::-webkit-scrollbar {
		display : none ;
	}
	/* Hide scrollbar for IE, Edge and Firefox */
	.slides {
		-ms-overflow-style : none ;		/* IE and Edge */
		scrollbar-width : none ;		/* Firefox */
	}

	.slides > section {
		position : relative ;
		scroll-snap-align : start ;
		flex-shrink : 0 ;
		height : calc(var(--appHeight) - var(--headerHeight) - var(--sliderMenuHeight) - var(--pageNavigationHeightMin)) ;
		width : 100% ;
		overflow-y : auto ;
		overflow-x : hidden ;
		
		scroll-behavior : smooth ;
	}
	
	/* Don't need button navigation */
	@supports (scroll-snap-type) {
		.slider_menu_item {
			display : none ;
		}
	}
	
	section:not(:last-child) footer {
		display : block ;
	}
	
	.social_networks > .username {
		display : none ;
	}
	
	/* Dialogs */
	dialog {
		min-height : 500px ;
		min-width : 350px ;
	}
	
	.dialog_header {
		height : 60px ;
		width : 100% ;
	}

	.dialog_title {
		max-width: calc(100% - 30px - (20px * 2) - 30px) ;
	}

	.dialog_close {
		height : auto ;
		width : auto ;
		
		font-size : 0.7em ;
	}
	
}

/* ===== SMALL SCREENS : fit-to-width ===== */

@media screen and (max-width : 480px) {
	
	/* Footer : compact icons on a single row (30px icon + padding = 44px touch target) */
	.social_networks a {
		margin : 2px 4px ;
		padding : 7px ;
	}
	.social_networks img {
		width : 30px ;
		height : 30px ;
	}
	
	/* The hero emphasize effect scales the header beyond the viewport on phones
	   (scale : var(--heroHeaderZoomMax), up to 1.5) and the artwork gets cut by the
	   hero clipping : neutralized, the artwork fits the screen exactly */
	.hero_header {
		--heroHeaderZoomMax : 1 !important ;	/* The page stylesheets declare it later with a higher specificity */
	}
	
	/* The hero artworks have intrinsic pixel widths larger than a phone : scaled with
	   zoom (layout included), sized to fit down to 340px screens */
	.programming .hero_title {
		zoom : 0.62 ;
	}
	.radiology .hero_title {
		zoom : 0.72 ;
	}
	
	/* The Home writing canvas has fixed pixel dimensions : scaled proportionally */
	.hero_animated_title {
		max-width : 100% ;
	}
	.hero_animated_title canvas {
		max-width : 100% ;
		height : auto ;
	}
	
	main .hero .hero_description {
		min-width : 0 ;
		min-height : 0 ;
		max-width : 90vw ;
		padding : 18px 24px ;
	}
	
	/* The testimonial dialog wrapper sizes itself on its video : bounded */
	my-dialog {
		display : block ;
		max-width : 100% ;
	}
	
	/* Dialogs : a 600px minimum cannot fit a phone */
	dialog {
		min-width : 0 ;
		width : 94vw ;
		max-width : 94vw ;
	}
	
	/* No article media may exceed the screen width */
	article img,
	article video,
	article iframe {
		max-width : 100% ;
	}
	
	/* Illustrations keep some distance from the screen edges */
	.article_preview {
		max-width : 88vw ;
		margin-left : auto ;
		margin-right : auto ;
	}
	
	/* The preview images fill their plate (they looked lost at their natural size) */
	.article_preview > img {
		width : 100% ;
		height : auto ;
	}
}



/* ===== MOBILE LANDSCAPE (short viewports) ===== */

@media screen and (max-width : 1024px) and (max-height : 540px) {
	
	/* The hero emphasize scale is far too large for a short viewport */
	.hero_header {
		--heroHeaderZoomMax : 1 !important ;
	}
	
	/* Breathing room : the article CTA must never touch the next article */
	article {
		padding-bottom : 40px ;
	}
	
	/* Fixed-height artworks scaled to the short viewport */
	.research_book {
		zoom : 0.55 ;
	}
	.model_container {
		width : min(500px, 70vh) ;
		height : min(500px, 70vh) ;
	}
	.article_review {
		zoom : 0.8 ;
	}
	
	dialog {
		height : min(94dvh, 900px) ;
	}
}


@media screen and (max-width : 480px) {
	article {
		width : calc(100% - 20px) ;
		margin : 16px auto ;
		padding : 22px 16px ;
		border-radius : 16px ;
		gap : 18px ;
	}
	
	/* Wrapped column : the illustration takes the full row again (the desktop
	   42% basis would shrink it) */
	article > .article_preview {
		flex : 1 1 100% ;
		min-width : 0 ;
		min-height : 0 ;
		max-width : 88vw ;
	}
	
	/* The 390px desktop height is too tall on a phone screen */
	.article_preview > iframe,
	.article_preview > video {
		height : 300px ;
	}
}