/* ---- Petit Desktop / Tablette / Laptop (entre 990px et 1700px) ----
Disposition selon la taille de l'écran : Sur iPad Pro pas de menu burger par exemple */
@media (max-width: 1700px) {
	/* ---- Général ---- */
	.wrapper {
		width: 100%;
		padding: 0 3rem;
	}
	/* ---- Gouttières des sections pleine largeur ----
	padding-inline = gauche + droite uniquement.
	Le padding vertical défini dans style.css reste intact. */
	#hero {padding-inline: 3rem;} /* 0 → 3rem : le texte ne colle plus aux bords */
	#cta-intro {padding-inline: 3rem;}
	#quote {padding-inline: 5rem;}
	#quote-starwars {
		font-size: 3.2rem; /* 4rem → 3.2rem */
		line-height: 1.5; /* unité relative → s'adapte à la nouvelle taille */
	}
	/* Galerie en 2x2 sur tablette */
	#cta-gallery {
		flex-wrap: wrap;
		height: auto;
	}
	#cta-gallery img {
		width: 50%;
		height: auto;
	}
}
/* ---- Petite Tablette / Mobile (entre 0px et 990px) ----
Sur iPad Air menu burger et disposition similaire au mobile par exemple */
@media (max-width: 990px) {
	/* ---- Général ---- */
	.wrapper {width: 100%;}
	/* ---- Header ---- */
	header {
		position: relative; /* position: relative : nécessaire pour que la nav en position:absolute se positionne par rapport au header et non à la page entière */
		height: 7rem;
		padding: 0 2rem;
	}
	#logofull {
		width: 100%;
		align-items: center;
        padding: 0;
	}
	header p {display: none;}
	/* ---- Burger visible ---- */
	#burger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 0.6rem;
		cursor: pointer;
	}
	#burger span {
		display: block;
		width: 2.8rem;
		height: 0.3rem;
		background: var(--blanc);
		border-radius: 0.2rem;
		transition: all 0.3s ease; /* transition : anime tous les changements CSS en 0.3s avec accélération/décélération (ease) → animation burger → croix */
	}
	/* ---- Animation burger → croix ---- 
    Sélecteur + (adjacent) : cible #burger directement après le checkbox coché
    Sélecteur ~ (général) : cible nav qui est un frère du checkbox coché
    Ces deux sélecteurs exigent l'ordre HTML : input → label → nav */
	#burger-toggle:checked+#burger span:nth-child(1) {transform: translateY(0.9rem) rotate(45deg);} /* translateY : déplace le trait vers le bas, rotate : le pivote à 45°. Combiné avec le 3ème trait pivoté à -45° → forme une croix × */
	#burger-toggle:checked+#burger span:nth-child(2) {opacity: 0;} /* trait du milieu disparaît */
	#burger-toggle:checked+#burger span:nth-child(3) {transform: translateY(-0.9rem) rotate(-45deg);} 
	/* ---- Menu déroulant ---- */
	header nav {
		display: none;
		position: absolute; /* position: absolute : sort la nav du flux, elle s'affiche par-dessus le contenu sans décaler les autres éléments */
		top: 7rem; /* positionné exactement sous le header (7rem de haut) */
		left: 0;
		width: 100%;
		background: var(--bleu);
		padding: 0 2rem;
		z-index: 100; /* z-index élevé : la nav s'affiche au-dessus de tous les éléments */
	}
	#burger-toggle:checked~nav {display: flex;} /* ~nav : affiche la nav quand le checkbox est coché */
	header nav ul {
		flex-direction: column;
		width: 100%;
		gap: 0;
        padding: 0;
	}
	header nav li {border-bottom: 1px solid rgba(255, 255, 255, 0.15);}
	header nav li:last-child {border-bottom: none;}
	header nav a {
		display: block;
		font-size: 2rem;
		padding: 1.8rem 0;
		line-height: 1;
	}
	/* ---- Hero ---- */
	#hero {
		gap: 3rem;
		padding: 5rem 2rem;
		min-height: auto;
	}
	#hero-title {
		gap: 1.5rem;
		flex-wrap: wrap;
		justify-content: center;
	}
	#hero-title img {
		width: 7rem;
		height: 7rem;
	}
	#hero-title h1 {
		font-size: 4.5rem;
		line-height: 1.2;
	}
	#hero-text {
		font-size: 1.8rem;
		width: 100%;
	}
	/* ---- CTA ---- */
	#cta {
        padding-top: 0;
        gap: 0;
    }
	#cta-intro {
		padding: 4rem 2rem;
		gap: 3rem;
	}
	#cta-text p {font-size: 1.8rem;}
	#cta-intro a {
		width: 100%;
		max-width: 35rem;
	}
	#cta-gallery {
		flex-wrap: wrap;
		height: auto;
	}
	#cta-gallery img {
		width: 100%;
		height: auto;
	}
	/* ---- Quote ---- */
	#quote {padding: 4rem 2rem;}
	#quote-text {
		gap: 3rem;
		max-width: 100%;
	}
	#quote-starwars {
		font-size: 2rem;
		line-height: 3.2rem;
	}
	/* ---- Footer ---- */
	footer{padding: 2rem 0;}
	#mention-full {
		flex-direction: column;
		align-items: center;
		width: 100%;
		gap: 2rem;
		padding: 3rem 2rem;
		font-size: 1.6rem;
	}
	#mention {
		justify-content: center;
		flex-wrap: wrap;
		text-align: center;
	}
	#mention a{font-size: 1.6rem;}
	#socials {
		justify-content: center;
		width: 100%;
	}
	footer nav {width: auto;}
	footer nav ul {
		justify-content: center;
		padding: 0;
	}
	footer nav img {
		width: 5rem;
		height: 5rem;
		object-fit: contain; /* object-fit: contain : affiche l'image entière dans le carré sans recadrage, en respectant le ratio original */
	}
}