html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}

ul {
  list-style: none;
}

button, input, select {
  margin: 0;
}

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

img, video {
  height: auto;
}

iframe {
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td, th {
  padding: 0;
}

/* COLOR */
.index > div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ct_keys_concepts h2, .plans .ct_plans > div h2 {
  font-size: 1.6rem;
  font-family: "LOREAL-Essentielle-Bold", "Arial", sans-serif;
  color: #000000;
}

footer ul, .data_privacy, .legal_mentions, .sitemap, .ct_keys_concepts, .plans, .home, header .ct__banner, header nav, .filAriane {
  width: 100%;
  max-width: 1440px;
  margin: auto;
}

@font-face {
  font-family: "LOREAL-Essentielle-Black";
  src: url("webfonts/LOREAL-Essentielle-Black.woff2") format("woff2"), url("webfonts/LOREAL-Essentielle-Black.ttf") format("truetype");
}
@font-face {
  font-family: "LOREAL-Essentielle-BlackItalic";
  src: url("webfonts/LOREAL-Essentielle-BlackItalic.woff2") format("woff2"), url("webfonts/LOREAL-Essentielle-BlackItalic.ttf") format("truetype");
}
@font-face {
  font-family: "LOREAL-Essentielle-Bold";
  src: url("webfonts/LOREAL-Essentielle-Bold.woff2") format("woff2"), url("webfonts/LOREAL-Essentielle-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "LOREAL-Essentielle-BoldItalic";
  src: url("webfonts/LOREAL-Essentielle-BoldItalic.woff2") format("woff2"), url("webfonts/LOREAL-Essentielle-BoldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "LOREAL-Essentielle-Italic";
  src: url("webfonts/LOREAL-Essentielle-Italic.woff2") format("woff2"), url("webfonts/LOREAL-Essentielle-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "LOREAL-Essentielle-Light";
  src: url("webfonts/LOREAL-Essentielle-Light.woff2") format("woff2"), url("webfonts/LOREAL-Essentielle-Light.ttf") format("truetype");
}
@font-face {
  font-family: "LOREAL-Essentielle-LightItalic";
  src: url("webfonts/LOREAL-Essentielle-LightItalic.woff2") format("woff2"), url("webfonts/LOREAL-Essentielle-LightItalic.ttf") format("truetype");
}
@font-face {
  font-family: "LOREAL-Essentielle-Regular";
  src: url("webfonts/LOREAL-Essentielle-Regular.woff2") format("woff2"), url("webfonts/LOREAL-Essentielle-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "LOREAL-Heritage-Regular";
  src: url("webfonts/LOREAL-Heritage-Regular.woff2") format("woff2"), url("webfonts/LOREAL-Heritage-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "LOREAL-Royale-Bold";
  src: url("webfonts/LOREAL-Royale-Bold.woff2") format("woff2"), url("webfonts/LOREAL-Royale-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "LOREAL-Royale-Regular";
  src: url("webfonts/LOREAL-Royale-Regular.woff2") format("woff2"), url("webfonts/LOREAL-Royale-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "BodoniLTPro-Book";
  src: url("webfonts/3216F9_0_0.eot");
  src: url("webfonts/3216F9_0_0.eot?#iefix") format("embedded-opentype"), url("webfonts/3216F9_0_0.woff2") format("woff2"), url("webfonts/3216F9_0_0.woff") format("woff"), url("webfonts/3216F9_0_0.ttf") format("truetype");
}
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

main {
  flex: 1;
}

.hors-ecran {
  position: absolute;
  left: -99999rem;
}

.hide {
  display: none;
}

.evitement {
  z-index: 10000;
  top: 0;
  position: fixed;
  overflow: hidden;
  width: 1px;
  height: 1px;
  display: inline-block;
  white-space: nowrap;
}
.evitement:focus {
  width: fit-content;
  height: fit-content;
}

h1, h2, .title {
  color: #3D3D3D;
  font-size: 4.2rem;
  font-family: "LOREAL-Royale-Bold", "Arial", sans-serif;
}

strong {
  font-family: "LOREAL-Essentielle-Bold", "Arial", sans-serif;
}

p, li, td {
  font-family: "LOREAL-Essentielle-Light", "Arial", sans-serif;
  font-size: 1.4rem;
  color: #3D3D3D;
}

.filAriane {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.filAriane ul {
  display: flex;
  gap: 1rem;
  font-size: 1.1rem;
  font-family: "LOREAL-Essentielle-Light", "Arial", sans-serif;
}
.filAriane ul a {
  color: #3D3D3D;
  font-family: "LOREAL-Essentielle-Bold", "Arial", sans-serif;
}

.index {
  width: 100%;
  height: 100vh;
  background: url("https://invest-assets.loreal.com/perenne/images/index__map.svg") no-repeat top left;
  background-size: cover;
}
.index > div {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  width: 100%;
}
.index h1 {
  font-family: "LOREAL-Essentielle-Regular", "Arial", sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  text-align: center;
}
.index h2 {
  font-family: "LOREAL-Royale-Regular", "Arial", sans-serif;
  font-weight: 700;
  font-size: 4.2rem;
  text-align: center;
}
.index .list__select_regions {
  display: flex;
  justify-content: center;
  gap: 2rem;
  width: 100%;
  max-width: 1040px;
}
.index .list__select_regions li:focus-within .sublist__select_country {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.index .list__select_regions button {
  width: 126px;
  padding: 0.8rem;
  border: 1px solid #3D3D3D;
  background-color: #ffffff;
  display: block;
  text-align: center;
  line-height: 1.6rem;
  font-size: 1.6rem;
  cursor: pointer;
  color: #3D3D3D;
  transition: 0.2s ease-out;
  font-family: "LOREAL-Essentielle-Light", "Arial", sans-serif;
}
.index .list__select_regions button:hover, .index .list__select_regions button:focus-within {
  background-color: #3D3D3D;
  color: #ffffff;
  font-weight: 900;
}
.index .list__select_regions .sublist__select_country {
  display: none;
  gap: 4rem;
  position: absolute;
  left: 0;
  background-color: #ffffff;
  padding: 4rem;
  width: 100%;
  max-width: 1040px;
  margin-top: 4rem;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.index .list__select_regions .sublist__select_country li {
  text-align: center;
}
.index .list__select_regions .sublist__select_country a {
  font-family: "LOREAL-Essentielle-Light", "Arial", sans-serif;
  font-size: 1.6rem;
  color: #3D3D3D;
  text-decoration: none;
}
.index .list__select_regions .sublist__select_country a::after {
  content: "";
  display: block;
  width: 0px;
  height: 1px;
  background-color: #000000;
  margin: auto;
  transition: 0.3s ease;
}
.index .list__select_regions .sublist__select_country a:hover {
  color: #000000;
  font-weight: 700;
}
.index .list__select_regions .sublist__select_country a:hover::after {
  width: 100%;
}

.link_banner {
  text-decoration: none;
  display: block;
}

header #menu__toggle, header #menu__btn {
  display: none;
}
header nav {
  padding: 2.4rem 10rem;
  display: flex;
  align-items: center;
  gap: 9.4rem;
}
header nav ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
}
header nav ul li:nth-child(4) {
  background-color: #CDC4BA;
  padding: 0.8rem 1.6rem;
  text-align: center;
  border-radius: 1.6rem;
}
header nav ul li:nth-child(5) {
  background-color: #B98135;
  padding: 0.8rem 1.6rem;
  text-align: center;
  border-radius: 1.6rem;
}
header nav ul li:nth-child(5) a {
  color: #ffffff;
}
header nav ul a {
  font-family: "LOREAL-Essentielle-Regular", "Arial", sans-serif;
  font-size: 1.4rem;
  text-decoration: none;
  color: #000000;
}
header nav ul a:hover {
  font-family: "LOREAL-Essentielle-Bold", "Arial", sans-serif;
}
header nav ul a.active {
  font-family: "LOREAL-Essentielle-Bold", "Arial", sans-serif;
}
header .ct__banner {
  display: flex;
  align-items: stretch;
}
header .ct__banner div:first-child {
  padding: 2rem 4rem 2rem 10rem;
  background-color: #583B50;
  display: flex;
  justify-content: center;
  flex-direction: column;
  min-width: 500px;
}
header .ct__banner div:first-child span {
  display: block;
  text-transform: uppercase;
}
header .ct__banner div:first-child span:nth-child(1) {
  font-family: "LOREAL-Essentielle-Black", "Arial", sans-serif;
  color: #ffffff;
  font-size: 3.2rem;
}
header .ct__banner div:first-child span:nth-child(2) {
  font-family: "LOREAL-Essentielle-Black", "Arial", sans-serif;
  color: #B98135;
  font-size: 2.4rem;
}
header .ct__banner div:first-child span:nth-child(3) {
  font-family: "LOREAL-Essentielle-Bold", "Arial", sans-serif;
  color: #ffffff;
  font-size: 2.4rem;
}
header .ct__banner div:last-child {
  background: url("https://invest-assets.loreal.com/perenne/images/bannieres_site/banner_loreal_perene.jpg") no-repeat center;
  background-size: cover;
  width: 100%;
  min-height: 300px;
}

h1, .title {
  color: #3D3D3D;
  font-size: 4.2rem;
  font-family: "LOREAL-Royale-Bold", "Arial", sans-serif;
}

.home .ct_message_ceo {
  padding: 4rem 20rem;
}
.home .home__message_ceo {
  display: flex;
  align-items: center;
  gap: 4rem;
  padding: 0 8rem;
}
.home .home__message_ceo div:last-child {
  background-color: #F5F5F5;
  padding: 4rem;
}
.home blockquote, .home blockquote p {
  font-size: 1.4rem;
  font-family: "LOREAL-Essentielle-Light", "Arial", sans-serif;
}
.home blockquote p, .home blockquote p p {
  margin-bottom: 1.4rem;
}
.home .home_key_numbers {
  background-color: #F5F5F5;
  padding: 4rem 20rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.home .home_key_numbers ul {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-top: 0.5px solid rgba(61, 61, 61, 0.5);
  border-bottom: 0.5px solid rgba(61, 61, 61, 0.5);
  padding: 4rem;
}
.home .home_key_numbers ul li {
  text-align: center;
  color: #B98135;
  font-size: 1.4rem;
  font-family: "LOREAL-Essantielle-Regular", "Arial", sans-serif;
}
.home .home_key_numbers ul li .key_numbers_title {
  font-size: 4.2rem;
  font-family: "LOREAL-Royale-Bold", "Arial", sans-serif;
}
.home .home_key_numbers ul li strong {
  font-size: 1.6rem;
  font-family: "LOREAL-Essantielle-Bold", "Arial", sans-serif;
}

.plans {
  padding: 2rem 20rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.plans .ct_plans {
  display: flex;
  gap: 4rem;
}
.plans .ct_plans nav ul {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.plans .ct_plans nav ul li {
  border: 1px solid #3D3D3D;
  padding: 0.8rem;
  text-align: center;
}
.plans .ct_plans nav ul li a {
  font-size: 1.6rem;
  font-family: "LOREAL-Essentielle-Black", "Arial", sans-serif;
  color: #3D3D3D;
  text-decoration: none;
}
.plans .ct_plans nav ul li.active {
  background-color: #3D3D3D;
}
.plans .ct_plans nav ul li.active a {
  color: #ffffff;
}
.plans .ct_plans > div {
  background-color: #F5F5F5;
  padding: 4rem;
  width: 100%;
}
.plans .ct_plans > div .plan_numbers {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.plans .ct_plans > div .plan_numbers ul {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 4rem;
  border-top: 0.5px solid rgba(61, 61, 61, 0.5);
  border-bottom: 0.5px solid rgba(61, 61, 61, 0.5);
}
.plans .ct_plans > div .plan_numbers ul li {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: center;
  width: 33%;
}
.plans .ct_plans > div .plan_numbers ul li img {
  display: block;
  margin: auto;
}
.plans .ct_plans > div .plan_numbers ul li span {
  color: #B98135;
  font-size: 4.2rem;
  font-family: "LOREAL-Royale-Bold", "Arial", sans-serif;
}
.plans .ct_plans > div .plan_numbers ul li p {
  font-family: "LOREAL-Essentielle-Bold", "Arial", sans-serif;
  font-size: 1.6rem;
  text-transform: uppercase;
}
.plans .ct_perf_docs {
  display: flex;
  gap: 4rem;
  margin-top: 4rem;
}
.plans .ct_perf_docs > div {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.plans .ct_perf_docs > div:last-child {
  width: 100%;
}
.plans .ct_perf_docs p {
  font-size: 1.4rem;
  font-family: "LOREAL-Essentielle-Light", "Arial", sans-serif;
}
.plans .ct_perf_docs .performance {
  background-color: #ffffff;
  padding: 2rem;
  height: 222px;
  width: 222px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 0.8rem;
}
.plans .ct_perf_docs .performance p {
  font-family: "LOREAL-Essentielle-Bold", "Arial", sans-serif;
  font-size: 1.6rem;
}
.plans .ct_perf_docs .performance .big-pourcent {
  color: #B98135;
  font-size: 4.2rem;
  font-family: "LOREAL-Royale-Bold", "Arial", sans-serif;
}
.plans .ct_perf_docs ul {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.plans .ct_perf_docs ul li {
  display: flex;
  gap: 1rem;
  align-items: center;
  background-color: #E9E6E1;
  padding: 1rem;
  border-radius: 0.8rem;
  width: 100%;
}
.plans .ct_perf_docs ul li span {
  font-size: 1.6rem;
  font-family: "LOREAL-Essentielle-Bold", "Arial", sans-serif;
  display: block;
  width: 100%;
}
.plans .ct_perf_docs ul li a {
  font-size: 1.4rem;
  color: #000000;
  text-decoration: none;
  display: block;
  font-family: "LOREAL-Essentielle-Light", "Arial", sans-serif;
  background-color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: 0.8rem;
  color: #3D3D3D;
}
.plans .ct_perf_docs ul li a:last-child {
  background-color: #CDC4BA;
}

.ct_keys_concepts {
  padding: 4rem 20rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.ct_keys_concepts > div {
  background-color: #F5F5F5;
  padding: 4rem;
  gap: 4rem;
  display: flex;
}
.ct_keys_concepts > div div {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.sitemap {
  padding: 4rem 20rem;
}
.sitemap ul {
  padding: 2rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.sitemap ul li {
  list-style-type: disc;
}
.sitemap ul a {
  color: #3D3D3D;
  font-size: 1.6rem;
  font-family: "LOREAL-Essentielle-Light", "Arial", sans-serif;
}

.data_privacy, .legal_mentions {
  padding: 4rem 20rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.data_privacy h2, .legal_mentions h2 {
  font-size: 1.8rem;
}
.data_privacy ul > li, .legal_mentions ul > li {
  list-style-type: disc;
}
.data_privacy li, .legal_mentions li {
  margin-left: 2rem;
}
.data_privacy table, .legal_mentions table {
  border: 1px solid #3D3D3D;
}
.data_privacy th, .legal_mentions th {
  font-family: "LOREAL-Essentielle-Bold", "Arial", sans-serif;
  font-size: 1.6rem;
  background-color: #F5F5F5;
}
.data_privacy td, .data_privacy th, .legal_mentions td, .legal_mentions th {
  vertical-align: top;
  padding: 1rem;
  border: 1px solid #3D3D3D;
}

footer {
  border-top: 1px solid rgba(61, 61, 61, 0.5);
}
footer ul {
  padding: 2rem 14rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
footer ul li, footer ul a {
  font-size: 1rem;
  color: #3D3D3D;
  font-family: "LOREAL-Essentielle-Light", "Arial", sans-serif;
  text-decoration: none;
}

/*# sourceMappingURL=styles.css.map */