:root {
  --body-width: 1000px;
  --orange: #e3744f;
  --green: #75ce5a;
  --blue: #629bd0;
  --yellow: #fac05e;
  --purple: #d572c9;
  --white: #faebd7;
  --black: #1c1b1b;
  /* https://coolors.co/faebd7-1c1b1b-d572c9-fac05e-629bd0-75ce5a-e3744f-d85858 */
  --border: 3px solid var(--black);
  --main-border: 3px solid var(--main-color);
  --margin: 20px;
  --gap: 40px;
  --body-padding: 15%;
  --transition: all 0.2s ease-in-out;

  --height-header: 4rem;
}
@font-face {
  font-family: "Logo";
  src: url("../fonts/Chole!-V01.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Alegreya";
  src: url("../fonts/Alegreya-VariableFont_wght.ttf") format("truetype");
  font-weight: 500 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Alegreya Italic";
  src: url("../fonts/Alegreya-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 500 900;
  font-style: italic;
  font-display: swap;
}



* {
  box-sizing: border-box;
}
html {
  font-size: 18px;
  background-color: var(--white);
  color: var(--black);
  font-family: Alegreya;
  font-weight: 500;
}
body {
  line-height: 135%;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: var(--gap);
  grid-row-gap: var(--gap);
  padding-left: var(--body-padding);
  padding-right: var(--body-padding);
}
.grid > * {
  min-width: 0;
}
.center {
  align-items: center;
  padding-top: var(--height-header);
  padding-bottom: var(--height-header);
}
menu {
  width: 100%;
  position: sticky;
  top: 0;
  padding-top: var(--margin);
  padding-bottom: var(--margin);
  background-color: var(--white);
  border-bottom: var(--border);
  align-items: center;
  z-index: 100;
}
.menulink {
  display: flex;
  gap: 10px;
  font-weight: 720;
}

a:not(.logo, .item), button {
  position: relative;
  color: var(--black);
  text-decoration: none;
  cursor: pointer;
  border-bottom: var(--border);
  transition: var(--transition);
  word-break: break-word;
}
a.item{
  color: var(--black);
  text-decoration: none;
  cursor: pointer;
}

button{
  background: none;
  font-family: inherit;
  font-weight: 720;
  font-size: inherit;
  line-height: inherit;
}
button:hover{
    box-shadow: inset 0 -1.5em 0 var(--main-color);
}
a:not(.logo):hover, button:hover {
  box-shadow: inset 0 -1.2em 0 var(--main-color);
}
a:not(.logo).button:hover  {
  box-shadow: inset 0 -1.5em 0 var(--main-color);
}

dd:hover a:not(.logo){
  box-shadow: inset 0 -1.2em 0 var(--main-color);
}
dd:hover a:not(.logo).button{
  box-shadow: inset 0 -1.5em 0 var(--main-color);}

/* Common button-like style */
a[href^="mailto:"],
a[href^="tel:"],
a[href^="/@/page/"],
a[href^="/@/file/"],
a[href^="#"] {
  padding: 0px 3px 1px 3px;
  border: var(--border);
  width: fit-content;
  display: inline-block;
  text-decoration: none;
}

/* Hover effect */
a[href^="mailto:"]:hover,
a[href^="tel:"]:hover,
a[href^="/@/page/"]:hover,
a[href^="/@/file/"]:hover,
a[href^="#"]:hover {
  box-shadow: inset 0 -1.5em 0 var(--main-color) !important;
}

/* Hover effect */
q p a[href^="mailto:"]:hover,
q p a[href^="tel:"]:hover,
q p a[href^="/@/page/"]:hover,
q p a[href^="/@/file/"]:hover,
q p a[href^="#"]:hover {
    box-shadow: inset 0 -1.5em 0 var(--white) !important;
}

q p a:hover{
    box-shadow: inset 0 -1.2em 0 var(--white) !important;
}



/* Remove the box-shadow hover effect from .item links */
a.item:hover, nav a:hover{
  box-shadow: none !important;
}

/* Keep your custom sliding background effect on span/time inside .item */
.item span,
.item time,
nav a {
  position: relative;
  z-index: 0;
  overflow: clip;
}

.item span::before,
.item time::before,
nav a::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateY(100%);
  transition: var(--transition);
  z-index: -1;
}

/* Different background colors by template */
.article time::before, nav a.article::before {
  background-color: var(--orange);
}
.design span::before, nav a.design::before {
  background-color: var(--purple);
}
.typeface a span::before, nav a.typeface::before {
  background-color: var(--blue);
}

typeface a {
  border-bottom: none;
}
.typeface a:hover span::before,
a.item:hover span::before,
a.item:hover time::before,
nav a:hover::before {
  transform: translateY(0%);
}

nav{
  padding-top: var(--margin);
  padding-bottom: var(--margin);
  border-top: var(--border);
}
nav .prev{
    grid-column: 0/1;
}
nav .next{
  grid-column: 3/4;
}
nav a{
  border: var(--border) !important;
  display: block !important;
  padding: 0px 3px 1px 3px !important;
  height: fit-content;
}


#contact {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#contact:hover {
  box-shadow: inset 0 -1.5em 0 var(--green); 
}
#about:hover{
  box-shadow: inset 0 -1.5em 0 var(--yellow); 
}
.button {
  padding: 0px 3px 1px 3px;
  border: var(--border);
  width: fit-content;
}
.soloquote h6 {
  margin-bottom: 0;
}
.soloquote .button {
  margin: auto;
  font-weight: 720;
}
.soloquote .button:hover {
  box-shadow: inset 0 -1.5em 0 var(--white);
}
.soloquote img{
  margin :auto;
  width: 200px;
}
header {
  background-color: var(--main-color);
  align-items: end;
  height: calc(100svh - var(--height-header));
  padding-bottom: var(--height-header);
  border-bottom: var(--border);
  margin-bottom: var(--height-header);
  padding-top: var(--margin);
}
.logofont{
    grid-column: 1/3;
}
#filters {
  display: inline-flex;
  gap: 10px;
}
label {
  white-space: nowrap;
  display: flex;
  align-items: center;
}
label select{
  font-family: inherit;
  border: 3px solid var(--black);
  background-color: var(--main-color);
  color: var(--white);
}
.hero-img {
  aspect-ratio: 1/1;
  width: 100%;
}
.hero-img img{
  object-fit: cover;
  height: 100%;
}
.hero-drawing img{
  border-radius: 0;
}

h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
  display: inline-block;
  will-change: transform;
  white-space: nowrap;
}

/* Optional: for better font rendering and smoother animations */
h1, h2, h3, h4, h5, h6 {
  will-change: transform;
  line-height: 118%;
  opacity: 0;
  font-size: 2rem;
}
h3{
  opacity: 1;
}

h2 {
  font-weight: 720;
  margin-top: var(--margin);
  margin-bottom: var(--margin);
}
h3 {
  font-weight: 720;
  margin-top: calc(var(--margin) * 2);
  margin-bottom: var(--margin);
  grid-column: span 3;
}
h4 {
  font-weight: 720;
  margin-top: calc(var(--margin) * 2);
  margin-bottom: var(--margin);
  grid-column: span 3;
}
h5{
  font-weight: 720;
}
h6 {
  margin-bottom: var(--margin);
}
header h1 {
  grid-column: 1/3;
}
.design-box h1{
  grid-column: span 2;
}
h1 time {
  font-size: 1rem;
  display: inline;
  margin-left: var(--margin);
  white-space: nowrap;
}
header time::before {
  content: "[ ";
  display: inline;
}
header time::after {
  content: " ]";
  display: inline;
}
article {
  padding-bottom: calc(var(--height-header)*2);
}
.text-box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: var(--gap);
  padding-left: var(--body-padding);
  padding-right: var(--body-padding);
  margin-bottom: var(--margin);
}
.design-box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: var(--gap);
  padding-left: var(--body-padding);
  padding-right: var(--body-padding);
  margin-bottom: var(--height-header);
}
.text-img-box {
  display : flex;
  gap: var(--gap);
  flex-direction: row;
    grid-column: span 3;
}
.text-img-box div:first-child {
  flex: 2;
}

.text-img-box .reveal{
flex : 1;
}
p {
  grid-column: 1/3;
}
p:not(:first-of-type) {
  margin-top: var(--margin);
}
/* Shared style for UL and OL */
ul, ol {
  display: block;
  grid-column: 1 / 3;
  list-style: inside;
  margin-top: var(--margin);
  color: var(--text-color);
}

/* Marker color for both UL and OL */
ul li::marker,
ol li::marker {
  color: var(--main-color);
  font-weight: 720;
}

/* UL specific styling */
ul li {
  margin-bottom: 0.5em;
}

/* OL specific styling with custom numbering */
ol {
  counter-reset: custom-counter;
}

ol li {
  counter-increment: custom-counter;
  margin-bottom: 0.5em;
}

ol li::marker {
  content: counter(custom-counter, decimal-leading-zero) ".  ";
  color: var(--main-color);
  font-weight: 720;
}

i {
  font-family: AlegreyaItal;
}
code{
    padding-left: var(--margin);
    display: block;
}
q {
  display: block;
  grid-column: 1/3;
  margin-top: var(--margin);
  padding-left: var(--margin);
}
q::before,
q::after, code::after, code::before {
  color: var(--main-color);
}
q::before, code::before {
  content: "❝ ";
}
q::after, code::after{
  content: " ❞";
}
q p{
  display: inline-block;
}

figure {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: var(--gap);
  padding-left: var(--body-padding);
  padding-right: var(--body-padding);
  margin-bottom: var(--margin);
}

img {
  width: 100%;
  vertical-align: bottom;
}
.square img {
  border-radius: 0;
}

    figure .reveal{
    height: auto;
    display: block;
    grid-column: 1 / 3;
    }
    .reveal {
      height: fit-content;
      position: relative;
      overflow: hidden;
      display: block;
      background-color: var(--main-color); /* container always visible */
      visibility: visible;
        border-radius: calc(var(--margin) / 2);
    }
    a .reveal{
      border-radius: 0;
    }

    .reveal img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: cover;
      clip-path: inset(100% 0 0 0); /* image starts fully clipped from bottom */
      transform: scale(1.3);         /* zoomed in */
      transition: none;
      position: relative;
      z-index: 1;
    }
.type figure{
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  padding: 0;
  margin: 0;
}

figcaption.font-family-name {
font-weight: 720;
}
credit.font-details {
  margin-bottom: 10px;
}
figcaption {
  grid-column: 3 / 4;
  color: var(--main-color);
}
figcaption div {
  position: sticky;
  top: calc(var(--height-header) + var(--margin));
}
fn {
  font-weight: 720;
}
figcaption a {
  border-bottom: var(--main-border) !important;
  color: var(--main-color) !important;
}
figcaption a:hover {
  box-shadow: inset 0 -1.2em 0 var(--black) !important; 
}
credit {
  display: block;
  opacity: 50%;
  color: var(--main-color);
}
credit div {
  display: inline-flex;
}
.video-block iframe {
  width: 100%;
  aspect-ratio: 16/9;
    height: 100%;
}
#bibliographie {
  border-top: var(--border);
  padding-bottom: calc(var(--height-header)*2);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: var(--gap);
  padding-left: var(--body-padding);
  padding-right: var(--body-padding);
}
#bibliographie ul {
  grid-column: 1/3;
  list-style: inside;
}
#bibliographie li::marker {
  color: var(--main-color);
}
.logo {
  font-family: Logo;
  font-size: 2rem;
  white-space: nowrap; /* Prevent line breaks */
  color: var(--black) !important;
  text-decoration: none !important;
  grid-column: 1/3;
}



.checkbox-container {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  padding-left: 1em;
  user-select: none;
}
.checkbox-container input[type="checkbox"] {
  opacity: 0;
  position: absolute;
}
.checkbox-container .checkmark {
  position: absolute;
  left: 0;
  width: 0.8em;
  height: 0.8em;
  border: var(--border)
}
/* If value = typeface and checked → blue background */
.checkbox-container input[type="checkbox"][value="typeface"]:checked + .checkmark {
  background-color: var(--blue);
}
/* If value = color and checked → red background */
.checkbox-container input[type="checkbox"][value="design"]:checked + .checkmark {
  background-color: var(--purple);
}/* If value = color and checked → red background */
.checkbox-container input[type="checkbox"][value="article"]:checked + .checkmark {
  background-color: var(--orange);
}

footer {
    position: relative; /* makes canvas stay inside footer */
  border-top: var(--border);
  background-color: var(--green);
  min-height: calc(100svh - var(--height-header) + 3px);
  padding-bottom: calc(var(--margin) * 2);
}
.footer-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}
.footer-list img{
  width: 200px;
}
.footer-contact {
  grid-column: 1/3;
}
footer dt {
  margin-top: var(--margin);
      width: fit-content;

}
footer dd {
  font-weight: 800;
    width: fit-content;
}
#profil-picture {
  grid-column: 1/3;
}
#profil-picture img {
  object-fit: cover;
  height: 100%
}
  #footer-canvas {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Don't block clicks */
    z-index: 0;
  }

.list {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  grid-column-gap: var(--gap);
  padding-left: var(--body-padding);
  padding-right: var(--body-padding);
  border-top: var(--border);
  padding-bottom: calc(var(--margin) * 2);
}
.list dt {
  grid-column: 1/2;
  margin-top: var(--margin);
}
.list dd {
  grid-column: 2/4;
  margin-top: var(--margin);
}
.list dt:first-of-type,
.list dd:first-of-type {
  margin-top: 0;
}


 .quote-text.with-image {
  margin-top: var(--height-header);
}
.soloquote {
  border-top: var(--border);
  min-height: calc(100svh - var(--height-header) + 3px);
  align-content: center;
  text-align: center;
  background-color: var(--main-color);
}
.soloquote q::before,
q::after {
  color: var(--white);
}
.soloquote * {
  grid-column: 1 / -1;
}
.soloquote q {
  padding-left: 0;
}
.home {
  padding-top: var(--height-header);
  padding-bottom: calc(var(--height-header)*2);
  align-items: end;
}
.type{
    align-items: end;
}

.item {
  flex-direction: column;
  border: var(--border);
  will-change: transform;
}
.item img{
  border-radius: 0;
}
.article {
  display: flex;
  justify-content: space-between;
}
.article h6{
  padding: calc(var(--margin) / 2);
}
.article time{
  padding: calc(var(--margin) / 2);
  display: block;
  border-top: var(--border);
}
.design {
  padding: 0;
}
.item span {
  font-size: 1rem;
  padding: calc(var(--margin) / 2);
  display: block;
  font-weight: 720;
  border-top: var(--border);
}
.typeface {
  border: none;
}
.typeface a{
  border: none;
}
.typeface .typeface-block{
  margin-bottom: 10px;
}
.typeface span{
  border: inherit;
  border: var(--border);
}
.typeface-block{
    color: black;
  pointer-events: auto;
  white-space: pre-wrap;
  outline: none;
  box-sizing: border-box;
  word-break: break-word; /* <-- Permet de couper les mots si nécessaire */
  background-size: 100% 100%;
  padding: 60px;
  padding-top: 80px;
  padding-bottom: 80px;
}
.typeface-block p{
  word-break: break-word; /* <-- Permet de couper les mots si nécessaire */
  margin-top: 0;
} 
.columns-1{
columns: 1;
gap: var(--margin);
}
.columns-2{
columns: 2;
gap: var(--margin);
}
.columns-3{
columns: 3;
gap: var(--margin);
}
.column1{
  grid-column: 1/2;
  gap: var(--margin);
}
.span1{
  grid-column: span 1;
}
.column2{
  grid-column: 1/3;
}
.span2{
  grid-column: span 2;
}
.column3{
  grid-column: 1/-1;
}
.span3{
  grid-column: span 3;
}
.bordertop{
  border-top: var(--border);
}
[contenteditable="true"]:active,
[contenteditable="true"]:focus {
  border: none;
  outline: none;
}
#characteregrid{
  padding-bottom: calc(var(--height-header)*2);
  grid-row-gap: 0;
}
#currentletter{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10rem;
  background-color: var(--main-color);
  height: 40vh;
  padding-top: var(--margin);
}
.sticky{
  position: sticky;
  top: calc(var(--height-header) + var(--margin));
  height: fit-content;
}
#charGrid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  font-size: 1.5rem;
}
.char-box {
border: 2px var(--black) solid;
padding: 10px;
text-align: center;
box-sizing: content-box;
}
.char-box:hover {
  background-color: var(--main-color);
  color: var(--white);
  cursor: pointer;
}


#no-selection{
  width: 200px;
  display: none;
  margin: auto;
  grid-column: span 3;
  border: none;
}

.font-resume{
  background-color: var(--main-color);
  border-top: var(--border);
  padding-top: var(--margin);
  padding-bottom: var(--margin);
  align-items: baseline;
  margin-bottom: var(--height-header);
  border-bottom: var(--border);
  width: 100%;
  display: flex;
  padding-left: var(--body-padding);
  padding-right: var(--body-padding);
}
.font-resume h5{
    flex: initial;
    margin-right: var(--margin);
}
.font-resume .font-list{
display: inline-flex;
gap: 10px;
flex: 1;
flex-wrap: wrap;
font-size: 1.7rem;
line-height: 1.5rem;
}
.font-list{
  color: white;
}

em{
  font-family: Alegreya Italic;
}
strong{
  font-weight: 720;
}

@media (max-width: 1920px) {

}
@media (max-width: 1400px) {
  :root{
      --body-padding: var(--gap);
  }
}
@media (max-width: 880px) {

    .font-resume{
      flex-direction: column;
      gap: var(--margin);
  }
    :root{
      --body-padding: 25px;
  }
  .grid, .text-box {
    grid-template-columns: 1fr;
  }
  .grid *, .text-box * {
    grid-column: 1/-1;
  }
  #menu{
    gap: 15px;
  }
  .typeface-block{
  padding: 30px;
  padding-top: 40px;
  padding-bottom: 40px;
}
/* Optional: for better font rendering and smoother animations */
h1, h2, h3, h4, h5, h6 {
  font-size: 1.7rem;
}
.text-img-box{
  display: block;
}
.text-img-box .reveal{
margin-top: var(--body-padding);
}
header time{
  display: block;
  margin-left: 0;
}
header {
  display: flex !important;
  flex-direction: column-reverse;
}
header h1 {
  width: 100%;
}
.hero-img{
    margin-right: auto;
    width: auto;
}
.profil{
  flex-direction: column;
  display: flex;
}
#profil-picture img{
  height: auto;
}
html{
  font-size: 16px;
}
.design-box{
  display: block;
}
figure{
  gap: 10px;

}
figure .reveal{
    grid-column: 1 / -1;
}
figure figcaption {
  grid-column: 1 / -1;
}
.type figure{
  flex-direction: column;
}
#currentletter{
  display: none;
}
#currentletterParent{
top: calc(var(--height-header) + var(--margin) + var(--margin));
margin-bottom: var(--margin);
margin-top: 0;
}
#charGrid{
  grid-column: inherit;
  width: calc(100vw - var(--body-padding) * 2);
}
.char-box{
    grid-column: inherit;

}
.flex-mobile-type {
  flex-direction: column-reverse;
  display: flex;
  gap: 10px;
}

#menu {
  display: grid;
  grid-template-columns: 1fr 1fr; /* two columns */
  grid-template-rows: auto auto; /* two rows */
  gap: 10px;
  align-items: center;
}

/* Logo in first column, first row */
#menu > .logo {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  justify-self: start;
}

/* Menu links in second column, first row */
#menu > .menulink {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  justify-self: end;

  display: flex;
  gap: 10px;
  flex-wrap: nowrap; /* don't wrap by default */
}

/* Filters span full width in second row and centered */
#menu > #filters {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  justify-self: center;
  display: flex;
  gap: 10px;
  flex-wrap: wrap; /* let filters wrap if needed */
  justify-content: center;
}

#bibliographie ul {
  grid-column: 1/-1;
}

nav .prev, nav .next{
  grid-column: 1/-1;
}
nav .next{
      margin-left: auto;
}
}

/* Responsive: When screen is narrow, stack menu links under logo */
@media (max-width: 385px) {
  #menu {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  #menu > .logo {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    justify-self: center;
  }
  #menu > .menulink {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    justify-self: center;
    flex-wrap: wrap; /* allow menu links to wrap */
  }
  #menu > #filters {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }

}