/* ---- Style général de la page ---- */
html {
	font-size: 62.5%;
	font-family: 'Nunito', sans-serif;
	color: var(--blanc);
}
/* ---- Définition des classes flex et wrapper ---- */
.flex {display: flex;}
.wrapper {
	width: 170rem;
	justify-content: space-between;
}
/* ---- Burger caché sur desktop ---- */
#burger-toggle {display: none;}
#burger {display: none;}
/* ---- Header ---- */
header {
	padding: 2.8rem 0;
	width: 100%;
	background: var(--bleu);
	align-items: center;
	justify-content: center;
}
#logofull {align-items: center;}
header #logo {
	align-items: center;
	gap: 2rem;
}
header #logo img {
	width: 4.4rem;
	height: 5.4rem;
}
header p {font-size: 2rem;}
header nav {width: 41rem;}
header nav ul {
	list-style-type: none;
	gap: 1.6rem;
}
header nav a {
	text-decoration: none;
	color: var(--blanc);
	font-size: 2rem;
	transition: all 0.3s ease;
}
header nav a.active {font-weight: 700;}
header nav a:hover{color: var(--violetclair);}
/* ---- Hero ---- */
#hero {
	width: 100%;
	padding: 15.2rem 0 14.6rem;
	background: url("../img/tag-motif.png") repeat;
	flex-direction: column;
	align-items: center;
	gap: 6.6rem;
}
#hero-title {
	align-items: center;
	gap: 2.4rem;
}
#hero-title img {
	height: 12.9rem;
	width: 12.9rem;
}
#hero-title h1 {
	font-size: 8rem;
	letter-spacing: 0.32rem;
	line-height: 12.9rem;
}
#hero-text {
	max-width: 110rem;
	width: 100%;
	font-size: 3rem;
	text-align: center;
	letter-spacing: 0.02em;
}
/* ---- CTA ---- */
#cta {
	padding-top: 13.2rem;
    gap: 15rem;
	width: 100%;
	flex-direction: column;
	align-items: center;
	background: var(--blanc);
}
/* ---- Intro du CTA ---- */
#cta-intro {
	max-width: 112rem;
	width: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4.6rem;
}
#cta-text {
	width: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2.6rem;
}
#cta-text h2 {
	color: var(--violetclair);
	font-size: 2.4rem;
	letter-spacing: 0.1rem;
	font-weight: 800;
}
#cta-text p {
	color: var(--bleu);
	font-size: 2.4rem;
	line-height: 3.6rem;
	text-align: center;
	letter-spacing: -0.01rem;
}
#cta-intro a {
	padding: 3.2rem 4.4rem;
	justify-content: center;
	align-items: center;
	text-align: center;
	text-decoration: none;
	border-radius: 5rem;
	color: var(--bleu);
	font-size: 2.4rem;
	font-weight: 700;
	letter-spacing: 0.02rem;
	background: var(--bleuturquoise);
	transition: all 0.3s ease;
}
#cta-intro a:hover{
	background: var(--bleu-hover);
	color: var(--bleu-text-hover);
}
/* ---- Galerie du CTA ---- */
#cta-gallery {
	width: 100%;
	height: 33.4rem;
	background: var(--gris);
}
#cta-gallery img {
	width: 25%;
	height: 33.4rem;
	object-fit: cover; /* object-fit: cover : remplit le conteneur en conservant le ratio, avec recadrage */
	opacity: 0.9;
	transition: opacity 200ms ease-out;
}
#cta-gallery img:hover {opacity: 1;}
/* ---- Quote ---- */
#quote {
	padding-block: 17.9rem;
	align-items: center;
	width: 100%;
	background: url("../img/tag-motif.png") repeat;
	flex-direction: column;
}
#quote-text {
	flex-direction: column;
	gap: 9.9rem;
	max-width: 139.4rem;
	width: 100%;
}
#quote-starwars {
	font-size: 4rem;
	line-height: 6.6rem;
}
#author {
	font-size: 1.8rem;
	letter-spacing: 0.16rem;
}
#author::before {
  content: "\2014\00A0"; /* tiret cadratin + espace insécable */
  font-weight: bold;
}
/* ---- Footer ---- */
footer {
	width: 100%;
	padding: 9rem 0;
    justify-content: center;
    align-items: center;
	font-size: 2.4rem;
	background: var(--blanc);
}
#mention-full {align-items: center;}
footer p {color: var(--gris);}
#mention a {
	text-decoration: underline;
	color:var(--noir);
	font-size: 2.4rem;
	text-underline-offset: 15px; /* text-underline-offset : décale le soulignement vers le bas de 15px ici */
	transition: all 0.3s ease;
}
#mention a:hover {text-underline-offset: 10px;} /* anime le soulignement au survol et remonte légèrement la barre à 10px */
footer nav ul {
	list-style-type: none;
	gap: 0.8rem;
	padding: 0;
}
footer nav {width: 26rem;}
footer nav img {
	width: 5.9rem;
	height: 5.9rem;
}