.clock {
  --color-white: #ffffff;
  --color-bg: #073b4c;
  --color-1: #ef476f;
  --color-2: #ffd166;
  --color-3: #06d6a0;
  --color-4: #118ab2;
  display: flex;
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.number {
  position: relative;
  display: grid;
  justify-content: center;
  align-items: center;
  width: 3ch;
  height: 2lh;
  border-radius: 0.5em;
  background: linear-gradient(var(--white) 50%, var(--white) 50%);
  box-shadow: 0 0 1px rgba(var(--color-black), .3);
  font-size: x-small;
  font-weight: bold;
  text-align: center;
  color: var(--black);

  + .number {
    margin-left: 0.25em;
  }

  &:nth-child(2n) {
    + .number {
      margin-left: 1em;
    }
  }

  .base,
  .flap {
    grid-row: 1 / 1;
    grid-column: 1 / 1;
  }
}

.base {
  display: grid;

  .top,
  .bottom {
    position: relative;
    grid-row: 1 / 1;
    grid-column: 1 / 1;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      width: 100%;
      height: 2px;
    }
  }

  .top {
    clip-path: inset(0 0 50% 0);

    &::after {
      top: calc(50%);
      background-color: var(--white);
    }
  }

  .bottom {
    clip-path: inset(50% 0 0 0);

    &::after {
      bottom: calc(50%);
      background-color: var(--white);
    }
  }
}

.flap {
  display: none;
  backface-visibility: hidden;

  &.show {
    display: block;
    animation: flip .6s ease-in-out 0s 1 normal forwards;
  }

  &.front,
  &.back {
    &::before {
      content: attr(data-content);
    }

    &::after {
      content: '';
      position: absolute;
      left: 0;
      width: 100%;
      height: 2px;
    }
  }
}

.front {
  clip-path: inset(0 0 50% 0);
  transform: rotateX(0deg);
  background-color: var(--white);
  border-radius: 0.5em 0.5em 0 0;

  &::after {
    top: calc(50%);
    background-color: var(--white);
  }

  &.show {
    animation-name: flip-top;
  }
}

.back {
  clip-path: inset(50% 0 0 0);
  transform: rotateX(-180deg);
  background-color: var(--white);
  border-radius: 0 0 0.5em 0.5em;

  &::after {
    bottom: calc(50%);
    background-color: var(--white);
  }

  &.show {
    animation-name: flip-bottom;
  }
}

@keyframes flip-top {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(180deg);
  }
}

@keyframes flip-bottom {
  from {
    transform: rotateX(-180deg);
  }
  to {
    transform: rotateX(0deg);
  }
}
.decks__index {
  height: 100%;
  width: 100%;
  max-width: unset;
}
h1 {
  width: 100%;
  font-size: 288pt;
  position: fixed;
  opacity: .1;
  margin: 0;
  top: 0;
}
.decks {
  overflow-x: auto;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  padding: 10rem;
  gap: 1rem;
  scroll-snap-type: x mandatory;

  a {
    text-decoration: none;
   }

  .deck {
    position: relative;
    scroll-snap-align: center;
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--white--true);

    width: 36rem;
    aspect-ratio: 210/297;
    border-radius: 10px;
    padding: 1rem;
    &:hover {
      h2 { color: var(--color); font-size: 9pt; opacity: 0.1; }
      img {filter: grayscale(0); opacity: 1;}
    }

    h2 {
      color: var(--color-contrast);
      font-size: 48pt;
      padding: .5em;
      padding-right: 0;
      margin: 0;
      position: relative;
      z-index: 1;

      mix-blend-mode: multiply;
      max-width: 50%;
    }
    a.btn {
      --color: inherit;
      background-color: var(--color);
      color: var(--color-contrast);
      font-size: x-small;
    }
  }

  .deck .deck__image {
    object-fit: contain;
    object-position: center center;
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    width: 100%;

    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    z-index: 0;

    filter: grayscale(1);
    opacity: .4;
    transition: filter 250ms, opacity 250ms;
  }
}


@media (max-width: 48rem) {
   .decks{ padding: 2rem;}
  }
form {
  max-width: 48ch;
  margin: 0 auto;

  .field:has(input[type="email"]:placeholder-shown) label,
  .field:has(input[type="password"]:placeholder-shown) label,
  .field:has(input[type="text"]:placeholder-shown) label,
  .field:has(textarea:placeholder-shown) label {
    opacity: 0; top: 1em;
    transition: opacity 150ms, top 150ms;
  }
  .field input::placeholder {
    font-size: smaller;
  }
  .field.big {
    input {
      font-size: large !important;
    }
  }
  .field:has(textarea) {
    height: 100%;
  }

  .field:has(input[type="email"]) label,
  .field:has(input[type="password"]) label,
  .field:has(input[type="text"]) label,
  .field:has(textarea) label
  {
    background: white;
    padding: .25em 0.5em 0em 0.5em;
    border-radius: 4px 4px 0px 0px;

    font-size: x-small;

    border: 1px solid #ccc;
    border-bottom: 0px;
    position: relative;
    z-index: 0;
    left: calc(10px - 0.5em);
    opacity: 1; top: 0em;
    transition: opacity 250ms, top 250ms, font-size 250ms;

  }

  input {
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 10px;
    width: 100%;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    transition: border-color 0.3s ease;

    &:focus {
      border-color: #007bff;
      outline: none;
    }
  }

  input[type="submit"] {
    background-color: #007bff;
    border: none;
    padding: 10px 20px;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    &:hover {
      background-color: #0056b3;
    }
  }
  textarea {
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 10px;
    width: 100%;
    height: 100%;
    min-height: 48rem;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
    font-family: inherit;
    &:focus {
      border-color: #007bff;
      outline: none;
    }
  }
}

.product {
  .product__form {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    @media (max-width: 48rem) {
      grid-template-columns: unset;
      grid-template-rows: unset;
    }
    gap: 2rem;
    .text, .illustration {
      width: 100%;
    }
    .illustration {
      display: grid;
      gap: 1rem;
      grid-template: auto min-content min-content / min-content auto;
      img {
        grid-column: 1 / span 2;
        width: 100%;
        @media (max-width: 48rem) {
         max-height: 72rem;
        }
        height: 100%;
      }
      .form-control-file {
        grid-column: 1 / span 2;
      }
    }
  }
}
.header {
  display: flex;
  align-items: center;
  gap: 1ex;
  padding-top: 0.25lh;
  padding-bottom: 0.5lh;
}
.header .infos {
  max-width: 18rem;
}
.title {
  align-self: center;
  flex-grow: 1;
  font-size: large;
  font-weight: bold;
  color: var(--black);
}

.title i {
  margin-right: 1.25ch;
  margin-left: 0.75ch;
}
.profile, .experiences {
  padding: 3em;
}
@media (max-width: 48rem) {
  .profile, .experiences {
    padding: 3em 1em;
  }
}

.job {
  display: grid;
  grid-template: auto auto / 3rem auto auto;
  gap: 0.5lh;
  padding-bottom: 0.75lh;
  margin-top: 0.25lh;
}

.job .infos {
  flex-direction: column;
  align-items: flex-end;
}

.job .society,
.job .role {
  font-weight: bold;
  font-size: medium;
}

.job .society {
  font-size: large;
}

.job img {
  height: 3em;
  aspect-ratio: 1;
  object-fit: contain;
  margin-right: 1ch;
  justify-self: center;
  align-self: center;
}

.job .description {
  color: var(--gray);
  padding-top: 0.25lh;
  grid-column: span 3;
  margin-left: 3.5rem;
}

.infos {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
}

.infos:has(.info--text) {
  margin-top: 0.25lh;
}

.info--label,
.info--text {
  font-weight: bold;
  font-size: xx-small;
  padding: 0.125lh 0.5lh;
  margin: 0.25px;
}
.info--label {
  border-radius: 2px;
}

.info--text.blue {
  color: var(--blue);
}

.info--text.orange {
  color: var(--purple);
}

.info--text.black {
  color: var(--black);
}

.info--text.red {
  color: var(--red);
}
.info--label.blue {
  background: var(--green);
  color: var(--blue);
}

.info--label.orange {
  background: var(--yellow);
  color: var(--purple);
}

.info--label.black {
  background: var(--black);
  color: var(--white);
}

.info--label.red {
  background: var(--red);
  color: var(--white);
}


.products {
  flex-direction: column;
}

.products table td, .products table th {
  padding: 1rem;
}
.products table th {
  text-align: left;
}
.products, .product {
  max-width: 72rem;
  width: 100%;
  padding: 3rem;
  box-sizing: border-box;
  color: var(--black);
}

.product {
  .illustration {
    border-radius: 1mm;
  }
  .illustration img {
    object-fit: contain;
    max-width: 100%;
    z-index: 0;
    position: relative;
    mix-blend-mode: multiply;
    height: 100%;
    @media (max-width: 48rem) {
      height: 48rem;
    }
  }
  .illustration {
    display: flex;
    height: calc(100vh - 12rem);
  }
  .text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  @media (max-width: 48rem) {
    .illustration {
      max-width: 100%;
      height: auto;
    }
    img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
    .text {
      width: 100%;
      order: 2;
    }
  }
}

.product.even {
  display: grid;
  grid-template-columns: 24rem auto;
  gap: 2rem;
  grid-auto-flow: dense; /* Assure un remplissage dense */
  direction: rtl; /* Inverse l'ordre des éléments */
  .text, .pagination {
    direction: ltr; /* Inverse l'ordre des éléments */
  }
}
.product.odd {
  display: grid;
  gap: 2rem;
  grid-template-columns: 24rem auto;
}

@media (max-width: 48rem) {
  .product.odd,
  .product.even {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
}

.prev-link, .next-link {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-decoration: none;
  color: var(--black);
  height: 7mm;
  width: 7mm;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;

}

.prev-link {
  left: -3rem;
}
.next-link {
  right: -3rem;
}
@media (max-width: 60rem) {

  .prev-link {
    left: 1rem;
  }
  .next-link {
    right: 1rem;
  }
}
.pagination {
  position: absolute;
  bottom: 1rem;
  right: 50%;
  width: 0rem;
  white-space: nowrap;
  font-size: xx-small;
}

.product.even:not(:has(.text)) .illustration, .product.odd:not(:has(.text)) .illustration {
      background-color: var(--white--true);
      grid-column: 1 / span 2 !important;
      grid-row: 1 / span 2;
      justify-content: center;
      box-sizing: border-box;
      align-self: center;
      justify-self: center;
      border: 1pt solid var(--white);
      box-shadow: var(--shadow);
      border-radius: var(--radius);
      width: fit-content;
      overflow: hidden;
  }
.product.even:not(:has(.text)), .product.odd:not(:has(.text)) {
  background-color: var(--white);
  img {
    max-height: fit-content;
  }
}
.profile {
  .me {
    font-size: var(--x-large);
    font-weight: bold;
  }
  .who__where {
    color: var(--grey);
    i, .who__job {
      color: var(--black);
    }
    .who__job {
      font-size: var(--large);
    }
  }
  .formations__more {
    display: grid;
    grid-template-columns : 2fr 3fr;
    gap: 3lh;
    * {
      /* box-shadow: inset 0em 0em 0em 1px rgba(0,0,0,.1); */
    }
    .formations * {
      box-shadow: none;
    }
  }
  .skills {
    display: grid; grid-template: auto auto / 1fr 1fr;
    span { display: inline-flex; align-items: center; gap: 0.5ch;}
    img { height: 1.25lh; aspect-ratio: 1;}
    color: var(--grey);
    .header {
      margin-bottom: 0.5lh;
      grid-column: span 2;
    }
    .title {
      color: var(--black);
      font-weight: bold;
    }
    .design .title, .code .title {
      font-size: var(--small);
      margin-bottom: 0.5lh;
    }
    .design, .code {
      padding-right: 1lh;
    }
  }
}
.atout {
  margin-bottom: 0.5lh;
}
.atouts, .langues, .passions {
  padding-bottom: 0.5lh;
  .header {
    margin-bottom: 0.5lh;
    color: var(--black);
  }
  div {
    display: flex;
    justify-content: space-between;
    color: var(--grey);
    i { color: var(--black); }
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

:root {
  --white: #f6f6f6;
  --white--true: #fff;
  --black: #4a4f55;
  --black--true: black;
  --black--shadow: rgba(0, 0, 0, 0.1);
  --gray: #535353;
  --grey: var(--gray);
  --blue: #1370ed;
  --red: #ec0018;
  --darkblue: #090058;
  --green: #00ee9a;
  --yellow: #ffb700;
  --purple: #530097;
  --orange: lab(73 32 71 / 100%);
  --large: 1.25rem;
  --x-large: 1.75rem;
  --small: 0.8rem;
  --x-small: 0.75rem;
  --shadow: 0.5px 0.5px 1px var(--black--shadow), 2px 2px 6px var(--black--shadow), 7px 7px 23px var(--black--shadow), 30px 30px 60px var(--black--shadow);
  --shadow--inset: inset 0.5px 0.5px 1px var(--black--shadow), inset 2px 2px 6px var(--black--shadow), inset 7px 7px 23px var(--black--shadow), inset 30px 30px 60px var(--black--shadow);
  --radius: 1em;
  --width: 48rem;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 9pt;
}

* {
  box-sizing: border-box;
}

img {
  -webkit-user-drag: none;
  user-drag: none;
  -moz-user-drag: none;
    user-select: none;
}

body {
  background: var(--white);
  height: 100dvh;
  margin: 0;
}

a.link {
  text-decoration: none;
  color: var(--blue);
  font-weight: bold;
}
a.btn {
  --color:  var(--blue);
  position: relative;
  text-decoration: none;
  color: var(--color);
  z-index: 1;
  background-color: color(from var(--color) srgb r g b / 0.15);
  font-size: large;
  padding: 0.25em 0.5em;
  border-radius: 4px;
  transition: background-color 150ms;
  &:hover {
    background-color: color(from var(--color) srgb r g b / 0.25);
  }
}
a.btn.work {
  --color:  var(--grey);
  font-size: medium;
}
main {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 72rem;
  background: var(--white--true);
  border-radius: var(--radius);
  position: relative;
}
@media (max-width: 48rem) {
  main {
    box-shadow: none;
    border-radius: 0rem;
  }
  body {
    margin: 0;
  }
}

.nav {
  position: fixed;
  z-index: 10;
  height: 7mm;
  padding: 1rem;
  box-sizing: border-box;
  backdrop-filter: blur(1mm);

  border-radius: 1rem;
  display: flex;
  gap: 1rem;
}
nav.bottom.right {
  bottom: 0rem;
  right: 0rem;
  transform: rotate(-90deg) translate(100%, -7mm);
  transform-origin: top right;
}
nav.top.right {
  top: 0rem;
  right: 0rem;
  transform: rotate(-90deg) translate(7mm, 0%);
  transform-origin: bottom right;
}