style.css

:root {
    --mexican-pink: #e42d8cff;
    --pistachio: #9fc36aff;
    --picton-blue: #00a9deff;
    --midnight-blue: #101f75ff;
    --silver: #c4c5c7ff;
    --dim-gray: #707176ff;
    --white: #ffffffff;
    --main-color: #101f75ff;
    --amaranth-red : #D3212CFF;
    --yellow-orange: #FF980EFF;
    --shamrock-green: #069C56FF;
    --tufts-blue: #3a8aceff;
}

* {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

.partner, .partner *{
    --main-color: var(--dim-gray);
}

.young, .young *{
    --main-color: var(--mexican-pink);
}

.referent, .referent *{
    --main-color: var(--pistachio);
}

.green{
    --main-color: var(--shamrock-green);
}

.red{
    --main-color: var(--amaranth-red);
}

.consultant{
    --main-color: var(--picton-blue);
}

.orange{
    --main-color: var(--yellow-orange);
}

.grey {
    --main-color: var(--silver);
}

/* General Styles */

h1.main-title {
    font-size: 2rem;
    margin: 2rem 0;
}

h2.subtitle {
    font-size: 1.5rem;
    margin: 1.5rem 0;
}

h3.h3-description {
    font-size: 1rem;
    margin: 1rem 0;
    color: var(--main-color);
}

p.text {
    font-size: 1rem;
    margin: 1rem 0;
    line-height: 1.5rem;
}

p.box-text {
    font-size: 1rem;
    margin: 0.5rem 0;
    line-height: 1.5rem;
}

a.link {
    color: var(--midnight-blue);
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 1em;
}

a.link:hover {
    background-color: rgba(112, 113, 118, 0.2);
}

a.link-btn {
    padding: 1em 2em;
    text-decoration: none;
    color: #fff;
    background-color: var(--main-color);
    border-radius: 0.5rem;
    height: min-content;
}

section, main {
    padding: 1em 0;
}

li {
    list-style: none;
}

i.color-icn {
    color: var(--main-color);
}

/* Containers */

.large-container {
    max-width: 1280px;
    margin: 0 auto;
    width: 85%;
}

.medium-container {
    max-width: 800px;
    margin: 0 auto;
    width: 85%;
}

.small-container {
    max-width: 600px;
    margin: 0 auto;
    width: 85%;
}

/* Header Body*/

header {
    background-color: var(--silver);
    padding: 1em 0;
    background: radial-gradient(at bottom left,rgba(255,255,255,1) 0%, var(--silver) 100%);
}

h1.xl-title {
    font-size: 5rem;
    text-transform: uppercase;
}

h1.xl-title {
    color: var(--main-color);
}

h2.slogan {
    letter-spacing: 5px;
    font-size: 2rem;
}

.header-logo {
    margin: -10em;
    padding: 10em;
    background: radial-gradient(circle,rgba(255,255,255,1) 10%, rgba(255,255,255,0) 50%);
}

.header-body {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    color: #fff;
}

.header-logo img {
    height: 10rem;
}

.header-status {
    display: flex;
    justify-content: end;
    gap: 1em;
}

#logout-btn {
    color: red;
}

#register-btn {
    background-color: var(--midnight-blue);
    color: #fff;
}

.header-text {
    display: flex;
    flex-direction: column;
    align-items: end;
}

/* Header Navigation */

.header-nav {
    margin-top: 1em;
}

.nav-list {
    display: flex;
    justify-content: center;
    gap: 1em;
}

.nav-item {
    padding: 1em 0;
}

.nav-link {
    font-size: 14pt;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1em 2em;
    font-weight: 900;
}

.nav-item:hover > .nav-link {
    color: #fff;
}

.nav-item > a {
    color: var(--main-color);
}

.nav-item:hover {
    background-color: var(--main-color);
}

.nav-item.active {
    background-color: var(--main-color);
}

.nav-item.active a {
    color: #fff;
}

/* Cards Section */

section#cards {
    background-color: var(--silver);
}

.row-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;
}

.card {
    display: flex;
    flex-direction: column;
    background: #fff;
    width: 250px;
    border-radius: 20px;
    box-shadow: -1px 15px 30px -12px black;
    margin: 1rem 0;
    text-align: center;
}

.card__step-number {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 3px;
    padding-top: 20px;
}

.card__step-number-1 {
    color: var(--mexican-pink);
}

.card__step-number-2 {
    color: var(--pistachio);
}

.card__step-number-3 {
    color: var(--picton-blue);
}

.card__unit-name {
    font-size: 1.5rem;
    font-weight: 900;
    margin-bottom: 5px;
}

.card__unit-description {
    padding: 20px;
    color: var(--dim-gray);
}

/* Partners Section */

.partners__list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 1em;
    z-index: 99;
}

.partner__logo {
    flex: 0 0 25%;
    padding: 10px;
    box-sizing: border-box;
}

.partner__logo img{
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: contain;
    mix-blend-mode: color-burn;
}

section.partners .medium-container {
    background-color: transparent;
}

/* Forms Styles */

.input-group {
    display: flex;
    flex-direction: column;
    margin: 1.5rem 0;
}

.input-group input {
    margin-top: 0.5rem;
    padding: 0.5em 1em;
    background-color: #ECECEC;
    font-size: 1em;
    border: none;
    border-bottom: 2px solid var(--main-color);
    border-radius: 5px 5px 0 0;
}

.input-group textarea {
    margin-top: 0.5rem;
    padding: 0.5em 1em;
    background-color: #ECECEC;
    font-size: 1em;
    border: none;
    border-bottom: 2px solid var(--main-color);
    resize: none;
    border-radius: 5px 5px 0 0;
}

.checkbox-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.checkbox-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    width: 45%;
}

.checkbox-group input[type=checkbox] {
    margin: 0.5rem 0;
}

input[type=checkbox] {
    accent-color: var(--main-color);
    font-size: 1em;
    zoom: 1.5;
}

button {
    font-size: 1.25rem;
    padding: 0.75rem 2rem;
    line-height: 2rem;
    min-height: 3.5rem;
    color: var(--white);
    background-color: var(--main-color);
    margin-top: 1.5rem;
    border: none;
    cursor: pointer;
}

.center {
    display: flex;
    flex-direction: column;
    align-content: center;    
}

.text-center {
    text-align: center;
}

/* index.html Page */

section.index-part1{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    background: linear-gradient(to right, var(--white), var(--silver));
}

section.index-part1 h2 {
    text-align: center;
}

.enter-btn {
    text-decoration: none;
    color: red;
    text-transform: uppercase;
    font-size: 2em;
}

section.index-part1 .large-container{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 80vh;
}

section.index-part2 .large-container{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 10vh;
}

/* Subnav Style */

.subnav {
    border-bottom: 1px var(--silver) solid;
    background-color: var(--white);
    padding-top: 1rem;
    margin-top: -1rem;
}

.subnav .medium-container {
    padding: 0;
}

.subnav-list {
    display: flex;
    flex-direction: row;
}

.subnav-item {
    padding: 0.75rem 0;
}

.subnav-item.active {
    border-bottom: 2px solid var(--mexican-pink);
}

.subnav-link {
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: var(--main-color);
}

.subnav-item.active .subnav-link {
    font-weight: bolder;
}

/* Valid/Waiting Cards */

.title-btn {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.box {
    border: 1px solid var(--main-color);
    border-radius: 6px;
    padding: 1rem;
    margin: 1rem 0;
}

#cv-box {
    opacity: 0.5;
}

.two-columns {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    margin: 1em 0;
}

.column {
    flex-grow: 1;
    flex-basis: 0;
}

.pill {
    border: 1px solid var(--main-color);
    border-radius: 0.75rem;
    width: min-content;
    padding: 4px 8px;
    font-size: 0.75rem;
    background-color: var(--main-color);
    color: #fff;
    margin: 4px 0px;
    white-space: nowrap;
}

.reference-status {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
}

.reference-id {
    display: flex;
    justify-content: end;
}

.ref-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

p.legend {
    font-size: 0.75rem;
    color: var(--dim-gray);
    margin-top: 0.4rem;
    
}

.inline-skills {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    margin-top: 0.5em;
    flex-wrap: wrap;
}

.inline-skills .checkbox-group {
    width: 25%;
}

.reference-info {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

/* Copy Link Bar */

.copy-link-bar {
    display: flex;
    align-items: stretch;
}

.text-link {
    flex-grow: 1;
    padding: 10px;
    font-size: 1rem;
    border-radius: 8px 0 0 8px;
    border: solid 1px var(--dim-gray); /* Retire la bordure */
    outline: none; /* Retire l'effet de mise en évidence */
    box-shadow: none; /* Retire l'ombre */
    background-color: transparent; /* Définit la couleur de fond comme transparente */
}

.copy-button {
    padding: 5px 10px;
    font-size: 1rem;
    margin: 0;
    border: 1px #000 var(--main-color);
    border-radius: 0px 8px 8px 0;
}

.grey-button {
    background-color: gray;
    color: white;
    cursor: not-allowed;
  }

/* Delete Button */

.del-btn {
    display: flex;
    justify-content: end;
}

.del-btn a {
    color: var(--amaranth-red);
}

/* CV Page */

section.mycv {
    background-color: var(--silver);
    min-height: 100vh;
    padding: 0;
}

.mycv-page {
    width: 16cm;
    min-height: 26.7cm;
    background-color: #fff;
    padding: 2.5cm;
}

.mycv-page h1 {
    margin-top: 0;
}

/* Errors messages */

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-white {
    background-image: linear-gradient(to bottom,#FFFFFF,#F9F9F9);
    border-top-color: #d8d8d8;
    border-bottom-color: #bdbdbd;
    border-left-color: #cacaca;
    border-right-color: #cacaca;
    color: #404040;
    padding-left: 61px;
    position: relative;
}

.alert-white .icon {
    text-align: center;
    width: 45px;
    height: 100%;
    position: absolute;
    top: -1px;
    left: -1px;
    border: 1px solid #bdbdbd;
}

.alert-white .icon:after {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    display: block;
    content: '';
    width: 10px;
    height: 10px;
    border: 1px solid #bdbdbd;
    position: absolute;
    border-left: 0;
    border-bottom: 0;
    top: 50%;
    right: -6px;
    margin-top: -5px;
    background: var(--white);
}

.alert-white.rounded {
    border-radius: 3px;
    -webkit-border-radius: 3px;
}

.alert-white.rounded .icon {
    border-radius: 3px 0 0 3px;
    -webkit-border-radius: 3px 0 0 3px;
}

.alert-white .icon i {
    font-size: 20px;
    color: var(--white);
    left: 12px;
    margin-top: -10px;
    position: absolute;
    top: 50%;
}

.alert-white.alert-warning .icon,.alert-white.alert-warning .icon:after {
    border-color: var(--yellow-orange);
    background: var(--yellow-orange);
}

.alert-white.alert-success .icon,.alert-white.alert-success .icon:after {
    border-color: var(--shamrock-green);
    background: var(--shamrock-green);
}

.alert-white.alert-info .icon,.alert-white.alert-info .icon:after {
    border-color: var(--tufts-blue);
    background: var(--tufts-blue);
}

.alert-white.alert-danger .icon,.alert-white.alert-danger .icon:after {
    border-color: var(--amaranth-red);
    background: var(--amaranth-red);
}

@media only screen and (max-width: 993px) {
    .large-container, .medium-container {
        width: 90%;
    }

    .header > .large-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .nav-list {
        display: none;
    }

}

@media only screen and (max-width: 450px) {

    .header-logo {
        max-width: 50%;
    }

    .header-logo img {
        height: 50px;
    }

    #logo-slogan {
        font-size: 12pt;
    }
}

@media print {
    .hide-on-print {
        display: none !important;
    }
}