@font-face {
  font-family: "Switzer";
  src: url("build/fonts/Switzer-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --papier: #FAF8F4;
  --surface: #FFFFFF;
  --filet: #E3DED4;
  --filet-fort: #1A1917;
  --texte: #1A1917;
  --texte-doux: #6B665E;
  --accent: #A94E28;
  --accent-fond: rgba(169, 78, 40, 0.08);
  --duree: 0.2s;
}

[data-theme=dark] {
  --papier: #191816;
  --surface: #211F1D;
  --filet: #33302C;
  --filet-fort: #4A463F;
  --texte: #F2EFE9;
  --texte-doux: #A29C92;
  --accent: #D9764E;
  --accent-fond: rgba(217, 118, 78, 0.12);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1, h2, h3, p, ul, figure {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

body {
  background: var(--papier);
  color: var(--texte);
  font-family: "Switzer", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

h1, h2, h3 {
  font-family: "Switzer", system-ui, sans-serif;
  font-weight: 500;
  line-height: 1.05;
  color: var(--texte);
}

h1 {
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  letter-spacing: -0.035em;
}

h2 {
  font-size: clamp(1.7rem, 3.5vw, 2.3rem);
  letter-spacing: -0.025em;
}

h3 {
  font-size: 1rem;
  letter-spacing: 0;
  font-weight: 500;
}

.etiquette {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--texte-doux);
  text-transform: lowercase;
}

.etiquette--accent {
  color: var(--accent);
}

a {
  color: var(--texte);
  text-decoration: none;
  transition: color var(--duree) ease;
}

a:hover {
  color: var(--accent);
}

.lien-fleche {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  font-size: 0.9rem;
}

.lien-fleche--discret {
  color: var(--texte);
  border-bottom-color: var(--filet);
}
.lien-fleche--discret:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.bouton {
  display: inline-block;
  background: var(--texte);
  color: var(--papier);
  border: none;
  border-radius: 0;
  padding: 0.75rem 1.5rem;
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background var(--duree) ease;
}
.bouton:hover {
  background: var(--accent);
  color: var(--papier);
}

.container {
  width: min(1180px, 100% - 3rem);
  margin-inline: auto;
}

.section {
  padding-block: 3rem;
  border-top: 1px solid var(--filet-fort);
}

.section--sans-filet {
  border-top: none;
}

.section-titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}
.site-header {
  border-bottom: 1px solid var(--filet-fort);
  background: var(--papier);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
  padding-block: 1.1rem;
}

.logo {
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: var(--texte);
  flex-shrink: 0;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-left: auto;
}

.nav-lien {
  font-size: 0.85rem;
  color: var(--texte-doux);
  border-bottom: 1.5px solid transparent;
  padding-bottom: 2px;
  transition: color var(--duree) ease, border-color var(--duree) ease;
}
.nav-lien:hover {
  color: var(--texte);
}
.nav-lien.est-actif {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: 1.75rem;
}

.theme-bascule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  color: var(--texte-doux);
  cursor: pointer;
  transition: color var(--duree) ease;
}
.theme-bascule:hover {
  color: var(--accent);
}
.theme-bascule svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icone-lune {
  display: none;
}

.icone-soleil {
  display: block;
}

[data-theme=dark] .icone-lune {
  display: block;
}
[data-theme=dark] .icone-soleil {
  display: none;
}

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.burger .barre {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--texte);
  transition: transform var(--duree) ease, opacity var(--duree) ease;
}
.burger[aria-expanded=true] .barre:first-child {
  transform: translateY(3px) rotate(45deg);
}
.burger[aria-expanded=true] .barre:last-child {
  transform: translateY(-3px) rotate(-45deg);
}

@media (max-width: 900px) {
  .burger {
    display: flex;
  }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    padding: 1rem 1.5rem 1.75rem;
    background: var(--papier);
    border-bottom: 1px solid var(--filet-fort);
  }
  .nav.est-ouvert {
    display: flex;
  }
  .nav-lien {
    width: 100%;
    padding-block: 0.7rem;
    border-bottom: 1px solid var(--filet);
    font-size: 1rem;
  }
  .nav-lien.est-actif {
    border-bottom-color: var(--filet);
  }
  .site-header {
    position: relative;
  }
}
.site-footer {
  border-top: 1px solid var(--filet-fort);
  margin-top: 5rem;
}

.footer-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.75rem;
  flex-wrap: wrap;
  padding-block: 1.75rem;
}

.footer-nom {
  font-size: 0.95rem;
  color: var(--texte);
}

.footer-role {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--texte-doux);
}

.footer-liens {
  display: flex;
  gap: 1.75rem;
}
.footer-liens a {
  font-size: 0.85rem;
  color: var(--texte-doux);
}
.footer-liens a:hover {
  color: var(--accent);
}

.footer-mention {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  color: var(--texte-doux);
}

@media (max-width: 640px) {
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .footer-liens {
    flex-direction: column;
    gap: 0.5rem;
  }
}
.accroche {
  padding-block: 5rem 3rem;
}

.accroche-role {
  margin-top: 0.9rem;
}

.accroche-texte {
  max-width: 46ch;
  margin-top: 1.75rem;
  color: var(--texte-doux);
}

.accroche-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin-top: 1.75rem;
}

.page-entete {
  padding-block: 3rem 1.75rem;
}
.page-entete .etiquette {
  margin-top: 0.75rem;
}

.grille-oeuvres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}

.carte-oeuvre a {
  display: block;
}
.carte-oeuvre .etiquette {
  margin-top: 0.7rem;
}

.carte-oeuvre-visuel {
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--filet);
}
.carte-oeuvre-visuel img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: opacity var(--duree) ease;
}

.carte-oeuvre:hover .carte-oeuvre-visuel img {
  opacity: 0.85;
}

.carte-oeuvre-titre {
  margin-block: 0.25rem 0.15rem;
  font-size: 0.95rem;
  letter-spacing: 0;
}

.carte-oeuvre:hover .carte-oeuvre-titre {
  color: var(--accent);
}

.etat-vide {
  padding-block: 5rem;
  text-align: center;
  color: var(--texte-doux);
}

@media (max-width: 900px) {
  .grille-oeuvres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .accroche {
    padding-block: 3rem 1.75rem;
  }
}
@media (max-width: 640px) {
  .grille-oeuvres {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .accroche-actions {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
}
.filtres-barre {
  border-block: 1px solid var(--filet-fort);
}

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  padding-block: 0.9rem;
}

.filtre {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--texte-doux);
  border-bottom: 1.5px solid transparent;
  padding-bottom: 2px;
}
.filtre:hover {
  color: var(--texte);
}
.filtre.est-actif {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.filtre-nb {
  margin-left: 0.35rem;
  opacity: 0.6;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--filet);
}
.pagination a {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  color: var(--texte-doux);
  padding: 0.2rem 0.4rem;
}
.pagination a:hover {
  color: var(--texte);
}
.pagination a.est-actif {
  color: var(--accent);
  border-bottom: 1.5px solid var(--accent);
}

.erreur-404 {
  padding-block: 5rem;
}
.erreur-404 p {
  margin-top: 1rem;
  color: var(--texte-doux);
}

.pres-hero {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
  padding-block: 3rem;
}

.pres-portrait {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--filet);
}
.pres-portrait img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.pres-intro h1 {
  margin-top: 0.7rem;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}
.pres-intro p {
  margin-top: 1rem;
  color: var(--texte-doux);
}

.pres-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin-top: 1.75rem;
}

.pres-blocs {
  border-top: 1px solid var(--filet-fort);
}

.pres-blocs-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pres-bloc {
  padding-block: 1.75rem;
}
.pres-bloc p:last-child {
  margin-top: 0.75rem;
  max-width: 42ch;
}
.pres-bloc:first-child {
  padding-right: 3rem;
  border-right: 1px solid var(--filet);
}
.pres-bloc:last-child {
  padding-left: 3rem;
}

.pres-valeurs {
  border-top: 1px solid var(--filet-fort);
}

.pres-valeurs-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pres-valeur {
  padding: 1.75rem 1rem 1.75rem 0;
  border-right: 1px solid var(--filet);
}
.pres-valeur:last-child {
  border-right: none;
}
.pres-valeur h3 {
  margin-block: 0.5rem 0.25rem;
  font-size: 0.95rem;
  letter-spacing: 0;
}
.pres-valeur p:last-child {
  font-size: 0.85rem;
  color: var(--texte-doux);
  line-height: 1.55;
}

@media (max-width: 900px) {
  .pres-hero {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .pres-portrait {
    max-width: 200px;
  }
  .pres-blocs-grille {
    grid-template-columns: 1fr;
  }
  .pres-bloc:first-child {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid var(--filet);
  }
  .pres-bloc:last-child {
    padding-left: 0;
  }
  .pres-valeurs-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pres-valeur:nth-child(2n) {
    border-right: none;
  }
  .pres-valeur:nth-child(-n+2) {
    border-bottom: 1px solid var(--filet);
  }
}
@media (max-width: 640px) {
  .pres-valeurs-grille {
    grid-template-columns: 1fr;
  }
  .pres-valeur {
    border-right: none;
    border-bottom: 1px solid var(--filet);
  }
  .pres-valeur:last-child {
    border-bottom: none;
  }
}
.comp-groupe {
  margin-bottom: 3rem;
}
.comp-groupe > .etiquette {
  display: block;
  margin-bottom: 0.4rem;
}

.comp-ligne {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--filet);
}
.comp-ligne:last-child {
  border-bottom: none;
}

.comp-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.comp-logo img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.comp-nom {
  flex: 1;
  font-size: 0.95rem;
}

.comp-niveau {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--texte-doux);
  white-space: nowrap;
}

.contact-bloc {
  border-top: 1px solid var(--filet-fort);
}

.contact-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 3rem;
  padding-block: 1.75rem;
}

.contact-form-colonne {
  padding-right: 3rem;
  border-right: 1px solid var(--filet);
}

.champ {
  margin-bottom: 1.75rem;
}
.champ label {
  display: block;
  margin-bottom: 0.4rem;
}

.champs-double {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
}

.champ input,
.champ textarea {
  width: 100%;
  padding: 0.4rem 0;
  border: none;
  border-bottom: 1px solid var(--filet-fort);
  border-radius: 0;
  background: transparent;
  color: var(--texte);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color var(--duree) ease;
}
.champ input:focus,
.champ textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
  border-bottom-width: 1.5px;
}

.champ textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.7;
}

.pot-de-miel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.message {
  padding: 0.75rem 1rem;
  margin-bottom: 1.75rem;
  font-size: 0.9rem;
  border-left: 2px solid;
  border-radius: 0;
}

.message--ok {
  border-left-color: var(--accent);
  background: var(--accent-fond);
  color: var(--texte);
}

.message--erreur {
  border-left-color: #B3261E;
  background: rgba(179, 38, 30, 0.08);
  color: var(--texte);
}

.contact-infos .etiquette {
  display: block;
  margin-bottom: 0.25rem;
}

.contact-valeur {
  margin-bottom: 1.75rem;
  font-size: 0.95rem;
}
.contact-valeur a {
  color: var(--accent);
}

@media (max-width: 900px) {
  .contact-grille {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .contact-form-colonne {
    padding-right: 0;
    border-right: none;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--filet);
  }
}
@media (max-width: 640px) {
  .champs-double {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
.oeuvre-entete {
  padding-block: 1.75rem 1rem;
}

.oeuvre-retour {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--texte-doux);
}
.oeuvre-retour:hover {
  color: var(--accent);
}

.oeuvre-entete h1 {
  margin-top: 0.8rem;
}

.oeuvre-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin-top: 0.7rem;
}

.oeuvre-visuel {
  padding-block: 1.75rem;
}
.oeuvre-visuel img {
  width: 100%;
  cursor: zoom-in;
  transition: opacity var(--duree) ease;
}
.oeuvre-visuel a:hover img {
  opacity: 0.9;
}

.oeuvre-description {
  padding-block: 1rem 1.75rem;
}
.oeuvre-description p:last-child {
  margin-top: 0.6rem;
  color: var(--texte-doux);
  max-width: 60ch;
}

.oeuvre-swiper {
  padding-bottom: 1.75rem;
}
.oeuvre-swiper .swiper-slide {
  height: auto;
}
.oeuvre-swiper .swiper-slide img {
  width: 100%;
  aspect-ratio: 4/3;
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--filet);
  cursor: zoom-in;
}
.oeuvre-swiper .swiper-slide .etiquette {
  display: block;
  margin-top: 0.5rem;
}
.oeuvre-swiper .swiper-button-prev,
.oeuvre-swiper .swiper-button-next {
  color: var(--texte);
  width: 28px;
  height: 28px;
}
.oeuvre-swiper .swiper-button-prev::after,
.oeuvre-swiper .swiper-button-next::after {
  font-size: 1rem;
  font-weight: 500;
}/*# sourceMappingURL=style.css.map */