/* TODO : Réaliser l'import des tokens typographiques de Mobile */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,200..800&family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap");
:root {
  /* Web/Heading 1: Style de texte du titre de la homepage */
  --font-heading-1: "Bricolage Grotesque", sans-serif;
  --fs-heading-1: 22rem;
  --lh-heading-1: normal;
  --ls-heading-1: -0.06em;
  --fw-heading-1: 600;
  --font-width-heading-1: 75;
  --font-opsz-heading-1: 36;
  --font-variation-heading-1:
    "wght" var(--fw-heading-1), "wdth" var(--font-width-heading-1),
    "opsz" var(--font-opsz-heading-1);

  /* Web/Heading 2: Style de texte qui servira de titre de chaque projet dans sa page personnelle */
  --font-heading-2: "Bricolage Grotesque", sans-serif;
  --fs-heading-2: 8rem;
  --lh-heading-2: normal;
  --ls-heading-2: 0em;
  --fw-heading-2: 600;
  --font-width-heading-2: 75;
  --font-opsz-heading-2: 72;
  --font-variation-heading-2:
    "wght" var(--fw-heading-2), "wdth" var(--font-width-heading-2),
    "opsz" var(--font-opsz-heading-2);

  /* Web/Button: Ce style de texte sera utilisé pour les boutons à habillage spéciale */
  --font-button: "Bricolage Grotesque", sans-serif;
  --fs-button: 1.5rem;
  --lh-button: normal;
  --ls-button: 0em;
  --fw-button: 600;
  --font-width-button: 75;
  --font-opsz-button: 72;
  --font-variation-button:
    "wght" var(--fw-button), "wdth" var(--font-width-button),
    "opsz" var(--font-opsz-button);

  /* Web/Post-it Title: Ce style de texte sera utilisé pour les differents titres des cards */
  --font-post-it-title: "Bricolage Grotesque", sans-serif;
  --fs-post-it-title: 2rem;
  --lh-post-it-title: normal;
  --ls-post-it-title: 0em;
  --fw-post-it-title: 600;
  --font-width-post-it-title: 75;
  --font-opsz-post-it-title: 72;
  --font-variation-post-it-title:
    "wght" var(--fw-post-it-title), "wdth" var(--font-width-post-it-title),
    "opsz" var(--font-opsz-post-it-title);

  /* Web/Links: Ce style sera utilisé pour les differents liens*/
  --font-links: "Inter Tight", sans-serif;
  --fs-links: 1rem;
  --lh-links: normal;
  --ls-links: 0em;
  --fw-links: 400;
  --font-width-links: 100%;
  --font-opsz-links: auto;

  /* Web/Body 1: Inter Tight Regular 16 */
  --font-body: "Inter Tight", sans-serif;
  --fs-body: 1rem;
  --lh-body: normal;
  --ls-body: 0em;
  --fw-body: 400;
  --font-width-body: 100%;
  --font-opsz-body: auto;

  /* primary-yellow: Couleur principale du site */
  --primary-yellow: #fbff00;

  /* background-grey: Sert au background du site */
  --background-grey: #d9d9d9;

  /* secondary-grey: Description non renseignée dans Figma */
  --secondary-grey: #c4c4c4;

  /* secondary-yellow: Description non renseignée dans Figma */
  --secondary-yellow: #e5e900;

  --black: #000;
  --white: #ffffff;
  --link-underliner-color: var(--black);
}
html,
body {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

html {
  /* Filet de sécurité pour le rebond élastique (rubber-band) de Safari iOS :
     sans ça, la zone révélée en haut/bas au-delà du contenu peut afficher
     la couleur d'un élément fixed qui traîne derrière (ex: .loader-cache)
     au lieu du fond normal du site. */
  background-color: var(--background-grey);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}
body {
  margin: 0;
  padding: 0;
  background-color: var(--background-grey);
}
@media screen and (min-height: 1440px) {
  html {
    font-size: 20px;
  }
}
@media screen and (min-width: 1259px) {
  .card {
    width: 18rem;
  }
}
@media screen and (max-height: 900px) {
  html {
    font-size: 14px;
  }
}
* {
  box-sizing: border-box;
}

p,
.card__face--back {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  font-optical-sizing: var(--font-opsz-body);
  font-stretch: var(--font-width-body);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  margin: 0;
}

nav a {
  display: inline-flex;
  width: fit-content;
}

.nav__title {
  position: relative;
  display: inline-block;
}

a.active .nav__title::after {
  opacity: 1;
}
.nav__title::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 110%;
  height: 0.4375rem;
  background-color: var(--link-underliner-color);
  mask-image: url("../assets/link__underliner.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
  -webkit-mask-image: url("../assets/link__underliner.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

nav.active {
  top: 0px;
}
a:not(.active):hover .nav__title::after {
  opacity: 0.3;
}
a,
a:link,
a:hover,
a:visited,
a:active {
  color: var(--black);
  font-family: var(--font-links);
  font-size: var(--fs-links);
  font-weight: var(--fw-links);
  font-optical-sizing: var(--font-opsz-links);
  font-stretch: var(--font-width-links);
  letter-spacing: var(--ls-links);
  line-height: var(--lh-links);
  text-decoration: none;
}

nav {
  position: fixed;
  width: 100%;
  z-index: 999;
  transition: 0.5s;
  transform: translateY(0);
}

nav > ul {
  display: flex;
  gap: 2rem;
  justify-content: flex-end;
  padding: 2rem;
  margin: 0;
}
nav.active {
  transform: translateY(-100px);
}
li {
  list-style-type: none;
}

header {
  width: 100dvw;
  /* svh (small viewport height) = la hauteur garantie toujours visible sur
     Safari iOS, même quand dvh se calcule mal sur la barre d'outils au
     premier rendu. Évite que .header__title (bottom:0) tombe sous le pli. */
  height: 100svh;
  position: relative;
}

.index h1 {
  font-family: var(--font-heading-1);
  font-size: var(--fs-heading-1);
  font-weight: var(--fw-heading-1);
  font-optical-sizing: none;
  font-variation-settings: var(--font-variation-heading-1);
  letter-spacing: var(--ls-heading-1);
  line-height: var(--lh-heading-1);
}

.header__title {
  width: 100%;
  position: absolute;
  bottom: 0;
  height: fit-content;
}

header {
  position: relative;
}

header > img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 30vw;
  z-index: 4;
  cursor: pointer;
}

.projectImg {
  cursor: pointer;
}
.chip {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  font-optical-sizing: var(--font-opsz-body);
  font-stretch: var(--font-width-body);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  padding: 0.25rem 0.625rem;
  background-color: var(--white);
  width: fit-content;
  border-radius: 3.5px;
  cursor: default;
  z-index: 5;
  white-space: nowrap;
}

.index header .chip {
  position: absolute;
}

#canvas {
  width: 100dvw;
  height: 100dvh;
  position: relative;
}
.featured {
  cursor: grab;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background-color: var(--primary-yellow);
  border-radius: 6px;
  width: 15rem;
  /* Pas de clip-path à l'état normal : le coin reste géré par le
     border-radius habituel, donc rien de visible tant qu'on ne survole pas
     la carte (voir .card:hover pour la découpe réelle de l'encoche). */
}

#visualizer {
  position: absolute;
  width: 100dvw;
  height: 100dvh;
  top: 0;
  left: 0;
  padding: 2rem;
  display: none;
  z-index: 998;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
[data-draggable="true"] {
  width: fit-content;
  height: fit-content;
}
#visualizer > * {
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: inherit;
}

.card__thumbnail {
  width: fit-content;
  height: fit-content;
}

.card__thumbnail img {
  width: fit-content;
  height: fit-content;
  border-radius: 6px;
}

.card__content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.card__title {
  margin: 0;
  font-family: var(--font-post-it-title);
  font-size: var(--fs-post-it-title);
  font-weight: var(--fw-post-it-title);
  font-optical-sizing: none;
  font-variation-settings: var(--font-variation-post-it-title);
  letter-spacing: var(--ls-post-it-title);
  line-height: var(--lh-post-it-title);
}

a.button {
  font-family: var(--font-post-it-title);
  font-size: var(--fs-post-it-title);
  font-weight: var(--fw-post-it-title);
  font-optical-sizing: none;
  font-variation-settings: var(--font-variation-post-it-title);
  letter-spacing: var(--ls-post-it-title);
  line-height: var(--lh-post-it-title);
  padding: 1rem 2.5rem;
  background-color: var(--white);
  border-radius: 6px;
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
}

.card__categories {
  display: flex;
  gap: 0.75rem;
}

.card__corner {
  position: absolute;
  right: 0;
  bottom: 0;
}

.card img {
  width: 100%;
}

.card .card__decoration-in {
  fill: var(--primary-yellow);
}

.card .card__decoration-out {
  fill: none;
}

.card:hover {
  cursor: grab;
  /* Découpe l'encoche du coin bas-droit (2rem, taille de .card__corner).
     Les 3 autres coins sont chanfrés à 6px pour ne pas les carrer pendant
     que le clip-path est actif (border-radius est ignoré partout où il
     s'applique). Pas de transition : bascule immédiate. */
  clip-path: polygon(
    6px 0,
    calc(100% - 6px) 0,
    100% 6px,
    100% calc(100% - 2rem),
    calc(100% - 2rem) 100%,
    6px 100%,
    0 calc(100% - 6px),
    0 6px
  );
}

.card:hover .card__decoration-in {
  fill: var(--secondary-yellow);
}

#canvas-index a {
  position: absolute;
}

.button .card__decoration-in,
.button .card__decoration-out {
  fill: var(--white);
  transition: 0.3s;
}

.button:hover .card__decoration-in {
  fill: var(--secondary-grey);
}
.button:hover .card__decoration-out {
  fill: var(--background-grey);
}

.card__corner {
  width: 2rem;
  height: 2rem;
}

.button .card__corner {
  width: 2rem;
  height: 2rem;
}

#informative {
  position: absolute;
  /* Position fixe, identique sur toutes les pages (index, about, ...).
     Anciennement posé en JS (main.js) par un système indexé sur l'ordre des
     .chip dans <header>, ce qui variait selon la page. */
  top: 60%;
  left: 52%;
  opacity: 0;
  z-index: 5;
  transition: opacity 0.3s;
  background-color: var(--primary-yellow);
}

#informative.active {
  opacity: 1;
}

footer {
  width: 100dvw;
  height: 100dvh;
  padding: 3.5rem;
}

.footer__container {
  /* Taille réelle du corner (top:0;right:0;width:20%;height:fit-content
     avec un viewBox carré 50x50 => sa hauteur rendue = 20% de la LARGEUR du
     conteneur). Un % en Y d'un clip-path se résout contre la hauteur, donc
     on recalcule cette valeur en px via calc() à partir de la largeur réelle
     (100dvw moins le padding du footer, 3.5rem de chaque côté ici ;
     surchargé en mobile où le padding du footer change). */
  --footer-notch: calc((100dvw - 7rem) * 0.2);

  background-color: var(--primary-yellow);
  width: 100%;
  height: 100%;
  border-radius: 6px 15rem 0.5rem 0.5rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Découpe une vraie encoche transparente en haut-à-droite (là où le
     corner tourné à -90deg vient recouvrir), pour laisser voir le fond
     réel du site au lieu d'une couleur approximée. Les 3 autres coins
     reprennent leur border-radius d'origine en chanfrein pour ne pas les
     carrer (6px en haut-gauche, 0.5rem en bas). */
  clip-path: polygon(
    6px 0,
    calc(100% - var(--footer-notch)) 0,
    100% var(--footer-notch),
    100% calc(100% - 0.5rem),
    calc(100% - 0.5rem) 100%,
    0.5rem 100%,
    0 calc(100% - 0.5rem),
    0 6px
  );
}

.footer__container .card__corner {
  top: 0;
  right: 0;
  width: 20%;
  height: fit-content;
  transform: rotate(-90deg);
}

footer .card__decoration-in {
  fill: var(--secondary-yellow);
}

/* Ne peint plus jamais rien : la transparence réelle vient du clip-path de
   .footer__container ci-dessus. */
footer .card__decoration-out {
  fill: none;
}

.footer__title {
  width: 100%;
  position: absolute;
  bottom: -2rem;
  left: 50%;
  transform: translateX(-50%);
}

.footer__title > path {
  fill: var(--secondary-yellow);
}

.footer__informations {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
}

footer .chip {
  width: fit-content;
  height: fit-content;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: fit-content;
}

.footer__header {
  padding: 3rem;
  display: flex;
  gap: 2rem;
}

.categorie {
  width: 1.45rem;
  height: 1.45rem;
  background-color: var(--white);
  padding: 0.38rem;
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.categorie img {
  width: fit-content;
}

.portfolio header {
  width: 100dvw;
  height: fit-content;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 998;
}

.work-detail #board div {
  position: absolute;
}

#micro-nav {
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 999;
}

nav {
  height: fit-content;
}

#micro-nav li {
  display: flex;
  padding: 0.5rem 0.75rem;
  background-color: var(--white);
  width: fit-content;
  gap: 0.5rem;
  border-radius: 6px;
  align-items: center;
}

#micro-nav {
  padding: 6rem 0 0 4rem;
}

.micro-nav__item {
  cursor: pointer;
  transition: 0.3s;
}

.micro-nav__item.active {
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.25);
}

a.featured,
a.project {
  display: block;
  width: fit-content;
  position: absolute;
}

#canvas a {
  z-index: 2;
}

#canvas {
  z-index: 1;
}

a.project.notActive {
  display: none;
}

.admin .follower {
  display: none;
}
.login > .row {
  align-items: center;
  height: 100vh;
}
.main-info {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.main-info__title {
  font-family: var(--font-heading-2);
  font-size: var(--fs-heading-2);
  font-weight: var(--fw-heading-2);
  font-optical-sizing: none;
  font-variation-settings: var(--font-variation-heading-2);
  letter-spacing: var(--ls-heading-2);
  line-height: 80%;
  text-align: center;
}

.main-info__tiny-desc {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-style: italic;
  font-weight: var(--fw-body);
  font-optical-sizing: var(--font-opsz-body);
  font-stretch: var(--font-width-body);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
}

.work-detail header {
  display: flex;
  padding: 3rem;
  align-items: flex-end;
  justify-content: flex-end;
  overflow: hidden;
  position: relative;
}

.description {
  padding: 1.5rem;
  background-color: var(--white);
  border-radius: 6px;
  width: 25%;
  height: fit-content;
  position: relative;
  z-index: 998;
}

.project-img {
  border-radius: 6px;
  max-height: 14vh;
  position: absolute;
}

#board {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

header .chip-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40vw;
  height: 40vw;
  z-index: 2;
}

.follower {
  opacity: 0;
  transition: opacity 0.3s;
  position: fixed;
  z-index: 999;
}

.follower.active {
  opacity: 1;
}

[data-draggable="true"] {
  width: fit-content;
  height: fit-content;
  cursor: grab;
}

.work-detail main {
  display: none;
}

.contact {
  position: fixed;
  width: 100dvw;
  height: 100dvh;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.3);
}

.contact h2,
#sentence_resume span {
  font-family: var(--font-heading-2);
  font-size: 4.5rem;
  font-weight: var(--fw-heading-2);
  font-optical-sizing: none;
  font-variation-settings: var(--font-variation-heading-2);
  letter-spacing: var(--ls-heading-2);
  line-height: 80%;
  margin: 0;
}
#sentence_resume span {
  font-size: 3rem !important;
}
.contact__container {
  background-color: var(--primary-yellow);
  padding: 2rem;
  border-radius: 6px;
  width: fit-content;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
  clip-path: polygon(
    6px 0,
    calc(100% - 2rem) 0,
    100% 2rem,
    100% calc(100% - 6px),
    calc(100% - 6px) 100%,
    6px 100%,
    0 calc(100% - 6px),
    0 6px
  );
}

.contact > .contact__container > .card__corner > .card__decoration-out {
  fill: var(--secondary-yellow) !important;
}
.contact .card__corner {
  top: 0;
  right: 0;
  transform: rotate(90deg);
}

.contact__container > .card__corner .card__decoration-in {
  fill: #adadad;
}

/* Ne peint plus jamais rien : la transparence réelle vient du clip-path de
   .contact__container ci-dessus. */
.contact__container > .card__corner .card__decoration-out {
  fill: none;
}
form > .individual {
  display: flex;
  width: 100%;
  gap: 1rem;
  align-items: center;
}

#contact-form label {
  text-wrap: nowrap;
}
#contact-form input {
  width: 100%;
}

.mail-container > div,
.object-container > div,
.message-container > div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#contact-form input[type="text"] {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
}

[name="f_message"] {
  padding: 0.5rem;
  font-family: var(--font-body);
  border: none;
}

#contact-form .button {
  position: relative !important;
  transform: translateX(-50%);
  width: fit-content;
  left: 50%;
  bottom: auto;
}

#contact-form {
  position: relative;
}

#contact-form .button > .card__decoration-out {
  fill: var(--background-grey) !important;
}

#contact-form .button > .card__decoration-in {
  fill: var(--primary-yellow) !important;
}
.header__name--first,
.header__name--last {
  height: 2rem !important;
  width: auto;
  opacity: 1;
  transition: 0.4s;
  transform: translateY(0px);
}
.contact {
  display: none;
}

.about header {
  position: relative;
}

.flex__names {
  display: flex;
  justify-content: space-between;
  margin: 0 1rem;
  width: calc(100% - 2rem);
  position: fixed;
  top: 50%;
  height: fit-content;
  transform: translateY(-50%);
  opacity: 1;
  transition: opacity 0.3s ease;
}

.flex__names.disabled {
  opacity: 0;
}

.flex__names.sticky {
  display: flex;
  justify-content: space-between;
  margin: 0 1rem;
  width: calc(100% - 2rem);
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  bottom: 0;
}

#sentence_resume > * {
  opacity: 0;
  transform: translateY(-1rem);
  transition:
    transform 0.5s,
    opacity 1s;
}

#discipline {
  display: inline-block;
  transition: all 0.5s;
  text-wrap: nowrap;
}

#sentence_resume .active {
  opacity: 1;
  transform: translateY(0px);
}

#sentence_resume {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  justify-content: center;
}
.presentation-section {
  width: 100dvw;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__name--first.disabled,
.header__name--last.disabled {
  transform: translateY(-1rem);
  opacity: 0;
}
.break {
  flex-basis: 100%;
  height: 0;
}

body.about h2 {
  font-family: var(--font-heading-1);
  font-size: 3rem;
}

.presentation__container {
  display: flex;
  align-items: center;
  justify-content: center;
}

body.about.fixed {
  overflow-y: hidden;
}
.word-hidder,
.hidder-name {
  overflow: hidden;
}

.skills-section {
  height: 100dvh;
  width: 100dvw;
}

.card__skill {
  aspect-ratio: 0.8/1;
  width: 20rem;
  border-radius: 0.5rem;
  position: relative;
  perspective: 1000px;
  cursor: pointer;
  z-index: 1;
}

.card__skill.front {
  z-index: 99;
}
.card__face > img {
  background-color: white;
  width: fit-content;
  padding: 0.4rem;
  border-radius: 0.5rem;
}

.flipped {
  transform: rotateY(180deg);
  z-index: 99;
}
.card__skill--title {
  font-family: var(--font-post-it-title);
  font-size: var(--fs-post-it-title);
  font-weight: var(--fw-post-it-title);
  font-optical-sizing: none;
  font-variation-settings: var(--font-variation-post-it-title);
  letter-spacing: var(--ls-post-it-title);
  line-height: var(--lh-post-it-title);
  text-align: center;
}

.card__face--front {
  background-color: var(--primary-yellow);
  height: 100%;
  width: 100%;
  border-radius: 0.5rem;
  box-shadow: -4px 4px 8.6px 0 rgba(0, 0, 0, 0.1);
}

.card__face--back {
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  border-radius: 0.5rem;
  box-shadow: -4px 4px 8.6px 0 rgba(0, 0, 0, 0.1);
  transform: rotateY(180deg);
}

.card__skill--inner {
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s;
  position: relative;
}
.skills-section {
  position: relative;
}

.card-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
}

.card__skill:nth-child(1) {
  transform: rotate(-6deg) translate(3rem, 2rem);
}

.card__skill:nth-child(3) {
  transform: rotate(8deg) translate(-3rem, 3rem);
}

.software-container {
  display: flex;
  gap: 1.5rem;
  bottom: 0;
  left: 50%;
  width: fit-content;
  position: absolute;
  transform: translate(-50%, -50%);
}

.software-container__individual {
  background-color: white;
  width: 4rem;
  aspect-ratio: 1;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition:
    0.7s transform ease,
    0.5s opacity ease;
  transform: translateY(1rem);
  cursor: pointer;
}

.software-container__individual > img {
  max-width: 2rem;
  max-height: 2rem;
}
.card__face {
  padding: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.software-container__individual.active {
  opacity: 1;
  transform: translateY(0);
}

.projectImage-vis {
  border-radius: 1rem;
}
@media screen and (max-height: 900px) {
  .card {
    width: 12rem;
  }
}

@media screen and (max-width: 768px) {
  :root {
    /* Web/Heading 1: Style de texte du titre de la homepage */
    --font-heading-1: "Bricolage Grotesque", sans-serif;
    --fs-heading-1: 22rem;
    --lh-heading-1: normal;
    --ls-heading-1: -0.06em;
    --fw-heading-1: 600;
    --font-width-heading-1: 75;
    --font-opsz-heading-1: 36;
    --font-variation-heading-1:
      "wght" var(--fw-heading-1), "wdth" var(--font-width-heading-1),
      "opsz" var(--font-opsz-heading-1);

    /* Web/Heading 2: Style de texte qui servira de titre de chaque projet dans sa page personnelle */
    --font-heading-2: "Bricolage Grotesque", sans-serif;
    --fs-heading-2: 4rem;
    --lh-heading-2: normal;
    --ls-heading-2: 0em;
    --fw-heading-2: 600;
    --font-width-heading-2: 75;
    --font-opsz-heading-2: 72;
    --font-variation-heading-2:
      "wght" var(--fw-heading-2), "wdth" var(--font-width-heading-2),
      "opsz" var(--font-opsz-heading-2);

    /* Button: Ce style de texte sera utilisé pour les boutons à habillage spéciale */
    --font-button: "Bricolage Grotesque", sans-serif;
    --fs-button: 1.43rem;
    --lh-button: normal;
    --ls-button: 0em;
    --fw-button: 600;
    --font-width-button: 75;
    --font-opsz-button: 74;
    --font-variation-button:
      "wght" var(--fw-button), "wdth" var(--font-width-button),
      "opsz" var(--font-opsz-button);

    /* Post-it Title: Ce style de texte sera utilisé pour les differents titres des cards */
    --font-post-it-title: "Bricolage Grotesque", sans-serif;
    --fs-post-it-title: 2rem;
    --lh-post-it-title: normal;
    --ls-post-it-title: 0em;
    --fw-post-it-title: 600;
    --font-width-post-it-title: 75;
    --font-opsz-post-it-title: 74;
    --font-variation-post-it-title:
      "wght" var(--fw-post-it-title), "wdth" var(--font-width-post-it-title),
      "opsz" var(--font-opsz-post-it-title);

    /* Web/Links: Ce style sera utilisé pour les differents liens*/
    --font-links: "Inter Tight", sans-serif;
    --fs-links: 1rem;
    --lh-links: normal;
    --ls-links: 0em;
    --fw-links: 400;
    --font-width-links: 100%;
    --font-opsz-links: auto;

    /* Web/Body 1: Inter Tight Regular 16 */
    --font-body: "Inter Tight", sans-serif;
    --fs-body: 1rem;
    --lh-body: normal;
    --ls-body: 0em;
    --fw-body: 400;
    --font-width-body: 100%;
    --font-opsz-body: auto;
  }
  .follower {
    display: none;
  }

  #header__image {
    width: 70vw;
  }

  .card {
    padding: 0.75rem;
  }

  header .chip-container {
    width: 80vw;
    height: 80vw;
    z-index: 98;
  }

  .contact__container {
    min-width: 80%;
  }
  .card__corner {
    width: 1.5rem;
    height: 1.5rem;
  }

  .card .card__decoration-in {
    fill: var(--secondary-yellow);
  }
  .card .card__decoration-out {
    fill: var(--background-grey);
  }

  .categorie {
    padding: 0.5rem;
    width: 1.75rem;
    height: 1.75rem;
    box-sizing: border-box;
  }

  .card__categories {
    gap: 0.5rem;
  }

  .categorie img {
    width: 100%;
  }

  /* #canvas {
    padding: 0 7%;
  } */

  .featured {
    left: 0;
  }

  .featured:nth-child(2) {
    right: 0;
  }

  #canvas {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 5rem 2rem 2rem 2rem;
    height: auto;
    align-items: center;
  }

  a.featured {
    position: static;
  }

  nav {
    background-color: var(--background-grey);
  }

  .card {
    width: 100%;
  }

  .card img {
    height: auto;
  }

  .header__title {
    bottom: 1dvh;
  }

  a.button {
    transform: none;
    width: fit-content;
    position: static;
    margin: 1rem;
  }

  footer {
    padding: 1rem;
  }

  .footer__container {
    /* Recalcul avec le padding mobile du footer (1rem au lieu de 3.5rem). */
    --footer-notch: calc((100dvw - 2rem) * 0.2);
  }

  .button .card__corner {
    display: none;
  }

  .footer__title {
    height: fit-content;
    bottom: 0;
  }

  .footer__informations {
    padding: 1rem;
  }
  .footer__informations > * {
    font-size: 0.75rem;
  }

  .footer__container {
    border-radius: 0.5rem 6rem 0.5rem 0.5rem;
  }

  .footer__header {
    padding: 6rem 2rem;
  }

  #micro-nav {
    /* La nav (fixed) a maintenant un fond opaque (background-grey) sur
       mobile : la marge du haut doit être assez grande pour passer sous
       elle, pas juste esthétique. 5rem était trop juste (nav ≈ 2rem
       padding haut + bas + hauteur du texte ≈ 5.2rem) et provoquait un
       chevauchement. */
    padding: 7rem 1rem 1rem 1rem;
    gap: 1rem;
    justify-content: center;
  }

  #micro-nav * {
    font-size: clamp(0.45rem, 0.4rem + 0.8vw, 1rem);
  }

  #micro-nav img {
    width: 1rem;
  }

  a.project {
    position: static;
  }

  .portfolio header {
    position: relative;
    left: auto;
    top: auto;
  }

  .work-detail header {
    padding: 1rem;
    flex-direction: column;
  }
  .description {
    width: calc(100% - 2rem);
    position: absolute;
    bottom: 1rem;
  }

  #visualizer {
    padding: 1rem;
  }

  .work-detail header #board {
    display: none;
  }

  .work-detail main {
    display: block;
    padding: 1rem;
  }
  .portfolio #canvas {
    padding-top: 2rem;
  }
  main #board {
    display: flex;
    flex-direction: column;
    position: static;
    gap: 0.5rem;
  }

  .main-info {
    width: calc(100% - 2rem);
  }

  .project-img {
    position: static;
    max-height: none;
  }

  .projectImg,
  .project-img {
    width: 100%;
  }

  .work-detail #board div {
    position: static;
  }

  .footer__links:nth-child(2) {
    display: none;
  }

  .skills-section,
  .flex__names {
    display: none;
  }

  #sentence_resume span {
    font-size: 2.5rem !important;
  }
}

/* code de l'admin*/
.logger {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.logger-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.backer:hover {
  text-decoration: underline;
}
.admin .card {
  width: fit-content;
  cursor: default;
}

.admin h2 {
  font-family: var(--font-post-it-title);
  font-size: var(--fs-post-it-title);
  line-height: var(--lh-post-it-title);
  letter-spacing: var(--ls-post-it-title);
  font-weight: var(--fw-post-it-title);
  margin: 0;
}

form {
  font-family: var(--font-post-it-title);
  display: flex;
  gap: 1rem;
  flex-direction: column;
}

input {
  border: none;
}

.info {
  background-color: white;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  font-family: var(--font-post-it-title);
}

form .btn {
  border: none;
  padding: 0.5rem;
  cursor: pointer;
}

.alert {
  padding: 1rem;
  font-family: var(--font-post-it-title);
}

.alert-danger {
  border: 2px solid red;
  border-radius: 0.5rem;
  background-color: #e76e6e67;
}

.admin > main {
  padding: 5rem 10rem;
}

.card__container {
  display: flex;
}

.card__admin > .card {
  width: 100%;
}

.dashboard main > .card {
  width: 100%;
}

.cat main {
  height: 100vh;
}

.cat .card {
  width: 100%;
}

.icon__admin {
  width: 1rem !important;
  height: auto;
}

.admin .micro-nav__item {
  box-shadow: 0px 0px 0.5rem rgba(0, 0, 0, 0.162);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  width: fit-content;
  border-radius: 0.5rem;
}

.admin .micro-nav__item img {
  width: 1rem !important;
}

.admin .micro-nav__item p {
  margin: 0;
}

.loader-cache {
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  background-color: var(--primary-yellow);
  transform: translateY(-100dvh);
  transition:
    transform 0.6s ease,
    visibility 0.6s ease;
  pointer-events: none;
  z-index: 9999;
  /* En plus du transform : évite que Safari iOS peigne encore sa couleur
     dans la zone de rebond élastique (rubber-band) quand il est inactif. */
  visibility: hidden;
}

.loader-cache.active {
  transform: translateY(0);
  visibility: visible;
}