/* Normalize */
*, ::before, ::after {box-sizing: border-box; margin: 0; padding: 0;}
body * {font-family: 'Poppins', sans-serif; color: #000000; font-size: 16px;}
section {margin-bottom: 40px;}
section:before, section:after {display: block;  background-color: #ffffff; background-size: cover;}
p {margin-bottom: 20px; line-height: 150%;}
img {max-width: 100%; height: auto;}
a {text-decoration: underline; color: #15939d;}
a:hover {text-decoration: none;}
a.url-link {overflow-wrap: anywhere;}
ul {padding-left: 19px;}
ul li {margin-bottom: 10px;}
ul li::marker {color: #15939d;}

/* title */
h2 {font-size: 24px; font-weight: 600; color: #006b74; line-height: 133%; margin-bottom: 30px;}
h3 {font-size: 20px; font-weight: 500; margin-bottom: 10px;}

/* Colors */
.bg-eminence {background-color: #66257F;}
.bg-yellow {background-color: #f6c900;}
.bg-viridian-green {background-color: #15939d;}
.bg-usafa-blue {background-color: #004f9f;}
.bg-debian-red {background-color: #dc0355;}
.bg-rose-garnet {background-color: #870047;}

/* Buttons */
.button {display: flex; align-items: center; gap: 10px; padding: 20px 30px; font-weight: 600; text-decoration: none; color: #006b74; border: 1px solid #006b74; border-radius: 40px;}
.button::after {content: '\F138'; font-family: 'bootstrap-icons'; transition: all ease-in-out 0.2s;}
.button:hover::after {margin-left: 10px;}
.button-small {font-size: 12px; background-color: #006b74; color: #ffffff; padding: 5px 15px; display: inline-block; margin-bottom: 10px; border: 0;}
.button-small:after {display: none;}

.container {max-width: 1120px; margin-right: auto; margin-left: auto;}
.tac {text-align: center;}
.dflex {display: flex;}
.flex1 {flex: 1; width: 50%;}
.flex2 {flex: 2; width: 50%;}
.flex3 {flex: 3; width: 50%;}
.title-medium {font-size: 20px; font-weight: 500;}
.small {font-size: 12px;}

nav ul {list-style-type: none; padding-left: 0; }

header {padding: 20px 0; border-bottom: 1px solid #84CCD6; position: fixed; top: 0; width: 100%; z-index: 2; background-color: #FFFFFF;}
header .container {display: flex; justify-content: space-between; align-items: center;}
header .btn-menu {display: flex; align-items: center; gap: 15px; text-decoration: none; color: #15939D;}
header .btn-menu::before {content: url('../img/icone-maindanslamain.png'); line-height: 0;}

.mfp-container {padding: 0;}
.popup-menu {width: 100vw; height: 100vh; overflow: auto; padding: 80px 0; background-color: #ffffff;}
.popup-menu .container {display: flex; gap: 80px;}
.popup-menu .container .mobile {display: none;}
.popup-menu .container .dflex {margin-bottom: 60px;}
.popup-menu ul li {margin-bottom: 20px;}

main {margin-top: 75px;}

footer {margin-top: 90px;}
footer p a {color: inherit;}
footer nav {padding: 55px 0;}
footer nav ul {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;}
footer nav ul li {margin-bottom: 0;}

section.site-header {padding-top: 55px;}
section.site-header .dflex {display: flex; align-items: center; gap: 40px;}
section.site-header-home .mobile {display: none;} 
section.site-header h1 {font-size: 32px; font-weight: 600; color: #006b74; line-height: 133%; margin-bottom: 30px;}

.owl-carousel {display: flex!important; flex-direction: row-reverse; align-items: center; gap: 20px;}
.owl-carousel .owl-dots {display: flex; flex-direction: column; gap: 8px;}
.owl-carousel .owl-dots .owl-dot {width: 8px; height: 8px; border-radius: 8px; background-color: #cccccc;}
.owl-carousel .owl-dots .owl-dot.active {background-color: #84ccd6;}

section.thematiques {background-color: #84ccd6;}
section.thematiques:before {content: ''; background-image: url('/assets/img/top-thematiques.svg'); aspect-ratio: 1280 / 106;}
section.thematiques:after {content: ''; background-image: url('/assets/img/bottom-thematiques.svg'); aspect-ratio: 1280 / 107;}
section.thematiques .container {display: flex; align-items: center; gap: 20px; }

.buttons-thematiques {display: flex; flex-direction: column; align-items: flex-start; gap: 30px;}
.buttons-thematiques .button {color: #FFFFFF; border: 0;}
.buttons-thematiques .button::after {content: '\F138'; font-family: 'bootstrap-icons';}

section.outils {padding: 70px 0;} 

.wrapper-cards {display: flex; flex-wrap: wrap; gap: 60px;}
.wrapper-cards .tool-card {display: flex; align-items: flex-start; gap: 30px; width: calc(50% - 30px);}
.wrapper-cards .tool-card > img {width: 150px;}
.wrapper-cards .tool-card .title-small {font-size: 14px; color: #006b74; font-weight: 700;}
 
.bloc-view {display: flex; gap: 10px;}
.bloc-view a {transition: all ease-in-out 0.2s;}
.bloc-view a:hover {opacity: 0.6;}

section.sources {background-color: #84ccd6;}
section.sources:before {content: ''; background-image: url('/assets/img/top-sources.svg'); aspect-ratio: 1280 / 96;}
section.sources:after {content: ''; background-image: url('/assets/img/bottom-sources.svg'); aspect-ratio: 1280 / 106;}
section.sources ul {list-style-type: none; padding-left: 0; margin-bottom: 50px;}
section.sources a {color: #000000;}

/* Thematic colors  */
.eminence .site-header h1 {color: #66257F;}
.eminence .tool-card .button-small {background-color: #66257F;}
.eminence section.fiches:before {background-image: url('/assets/img/top-fiches-eminence.svg');}
.eminence section.fiches:after {background-image: url('/assets/img/bottom-fiches-eminence.svg');}

.usafa-blue .site-header h1 {color: #004f9f;}
.usafa-blue .tool-card .button-small {background-color: #004f9f;}
.usafa-blue section.fiches:before {background-image: url('/assets/img/top-fiches-usafa-blue.svg');}
.usafa-blue section.fiches:after {background-image: url('/assets/img/bottom-fiches-usafa-blue.svg');}

.yellow .site-header h1 {color: #f6c900;}
.yellow .tool-card .button-small {background-color: #f6c900;}
.yellow section.fiches:before {background-image: url('/assets/img/top-fiches-yellow.svg');}
.yellow section.fiches:after {background-image: url('/assets/img/bottom-fiches-yellow.svg');}

.debian-red .site-header h1 {color: #dc0355;}
.debian-red .tool-card .button-small {background-color: #dc0355;}
.debian-red section.fiches:before {background-image: url('/assets/img/top-fiches-debian-red.svg');}
.debian-red section.fiches:after {background-image: url('/assets/img/bottom-fiches-debian-red.svg');}

.viridian-green .site-header h1 {color: #15939d;}
.viridian-green .tool-card .button-small {background-color: #15939d;}
.viridian-green section.fiches:before {background-image: url('/assets/img/top-fiches-viridian-green.svg');}
.viridian-green section.fiches:after {background-image: url('/assets/img/bottom-fiches-viridian-green.svg');}

.rose-garnet .site-header h1 {color: #870047;}
.rose-garnet .tool-card .button-small {background-color: #870047;}
.rose-garnet section.fiches:before {background-image: url('/assets/img/top-fiches-rose-garnet.svg');}
.rose-garnet section.fiches:after {background-image: url('/assets/img/bottom-fiches-rose-garnet.svg');}

section.fiches:before {content: ''; aspect-ratio: 1280 / 107;}
section.fiches:after {content: ''; aspect-ratio: 1280 / 107;}

@media screen and (max-width: 1200px) {
  .container {padding-left: 3vw; padding-right: 3vw;}
}
@media screen and (max-width: 1000px) {
  .flex2, .flex3 {flex: 1;}
  .popup-menu .container {gap: 30px;}
}
@media screen and (max-width: 900px) {
  .popup-menu .container > div:nth-child(1) {width: 300px;}
}
@media screen and (max-width: 800px) {
  header .container > img {display: none;}
  .flex1, .flex2, .flex3 {width: 100%;}
  section.site-header {padding-top: 40px;}
  section.site-header .dflex {flex-direction: column;}
  section.site-header-home .dflex {flex-direction: column-reverse;}
  section.site-header-home .desktop {display: none;}
  section.site-header-home .mobile {display: block; max-width: 90%; margin: 10px auto;}
  .owl-carousel {display: block!important;}
  .owl-carousel .owl-dots {flex-direction: row; justify-content: center;}
  section.thematiques .container {flex-direction: column; padding-top: 20px; padding-bottom: 20px;}
  section.thematiques img {display: block; margin: 20px auto 0 auto;}
  section.outils {padding: 0;}
  section.sources .container {padding-top: 20px; padding-bottom: 20px;}
  .wrapper-cards .tool-card {width: 100%;}
  footer {margin-top: 40px;}
  footer nav ul {justify-content: space-evenly;}
  .popup-menu .container {flex-direction: column-reverse;}
  .popup-menu .container .mobile {display: flex;}
  .popup-menu .container .desktop {display: none;}
  .buttons-thematiques {gap: 15px;}
  .button {width: 100%; position: relative; padding: 10px 50px 10px 20px;}
  .button::after {position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
  .button-small {width: auto; padding: 5px 15px;}
}
@media screen and (max-width: 500px) {
  section.outils .wrapper-cards .tool-card {flex-direction: column;}
  section.fiches .wrapper-cards .tool-card {gap: 20px;}
  section.fiches .wrapper-cards .tool-card > img {max-width: 40%;}
  footer nav ul {flex-direction: column; align-items: flex-start;}
  section.sources ul a {overflow-wrap: anywhere;}
}