/* [project]/app/theme.css [app-client] (css) */
:root {
  --encre: #1b1b18;
  --ivoire: #f2eee6;
  --oxblood: #652b33;
  --laiton: #9a835f;
  --fond: var(--ivoire);
  --fond-creux: color-mix(in srgb, var(--ivoire) 94%, var(--encre));
  --fond-sombre: var(--encre);
  --fond-sombre-creux: color-mix(in srgb, var(--encre) 92%, var(--ivoire));
  --texte: var(--encre);
  --texte-doux: color-mix(in srgb, var(--encre) 66%, var(--ivoire));
  --texte-tenu: color-mix(in srgb, var(--encre) 46%, var(--ivoire));
  --sur-sombre: var(--ivoire);
  --sur-sombre-doux: color-mix(in srgb, var(--ivoire) 70%, var(--encre));
  --sur-sombre-tenu: color-mix(in srgb, var(--ivoire) 46%, var(--encre));
  --filet: 1px solid color-mix(in srgb, var(--encre) 16%, transparent);
  --filet-appuye: 1px solid color-mix(in srgb, var(--encre) 30%, transparent);
  --filet-clair: 1px solid color-mix(in srgb, var(--ivoire) 20%, transparent);
  --filet-laiton: 1px solid color-mix(in srgb, var(--laiton) 60%, transparent);
  --titre: "Cormorant Garamond", "Times New Roman", Times, serif;
  --courant: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --e1: .5rem;
  --e2: 1rem;
  --e3: 1.75rem;
  --e4: 2.75rem;
  --e5: 4.25rem;
  --e6: 6.5rem;
  --e7: 9.5rem;
  --section: clamp(4.5rem, 9vw, 9rem);
  --section-large: clamp(6rem, 13vw, 13rem);
  --cadre: min(80rem, 100% - 2.5rem);
  --cadre-large: min(96rem, 100% - 2.5rem);
  --cadre-etroit: min(46rem, 100% - 2.5rem);
  --barre-mobile: calc(3.9rem + env(safe-area-inset-bottom, 0px));
  --glisse: .5s cubic-bezier(.22, 1, .36, 1);
  --souple: .3s cubic-bezier(.22, 1, .36, 1);
}

@media (min-width: 60rem) {
  :root {
    --barre-mobile: 0px;
  }
}

/* [project]/app/globals.css [app-client] (css) */
:root {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  --anneau: var(--oxblood);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  background: var(--fond);
  color: var(--texte);
  font-family: var(--courant);
  font-synthesis-weight: none;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: clip;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img, picture, svg, iframe {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
}

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

[data-sombre] {
  --anneau: var(--laiton);
}

::selection {
  background: var(--oxblood);
  color: var(--ivoire);
}

.evitement {
  z-index: 300;
  background: var(--encre);
  color: var(--ivoire);
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: transform var(--souple);
  padding: .7rem 1.1rem;
  font-size: .75rem;
  position: fixed;
  top: .75rem;
  left: .75rem;
  transform: translateY(-300%);
}

.evitement:focus {
  transform: translateY(0);
}

.titre {
  font-family: var(--titre);
  letter-spacing: -.012em;
  text-wrap: balance;
  font-weight: 300;
  line-height: 1.04;
}

.titre em {
  font-style: italic;
  font-weight: 300;
}

.t-geant {
  font-size: clamp(2.9rem, 8.5vw, 6.5rem);
}

.t-grand {
  font-size: clamp(2.3rem, 5.2vw, 4rem);
}

.t-moyen {
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
}

.t-petit {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.2;
}

.label {
  font-family: var(--courant);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--texte-tenu);
  font-size: .68rem;
  font-weight: 500;
}

[data-sombre] .label {
  color: var(--laiton);
}

.label-filet {
  align-items: center;
  gap: .85rem;
  display: inline-flex;
}

.label-filet:before {
  content: "";
  background: var(--laiton);
  width: 2.25rem;
  height: 1px;
}

.chapo {
  color: var(--texte-doux);
  font-size: clamp(1.05rem, .98rem + .35vw, 1.22rem);
  line-height: 1.68;
}

.courant {
  color: var(--texte-doux);
}

[data-sombre] .chapo, [data-sombre] .courant {
  color: var(--sur-sombre-doux);
}

.mesure {
  max-width: 34rem;
}

.mesure-large {
  max-width: 46rem;
}

.cadre {
  width: var(--cadre);
  margin-inline: auto;
}

.cadre-large {
  width: var(--cadre-large);
  margin-inline: auto;
}

.cadre-etroit {
  width: var(--cadre-etroit);
  margin-inline: auto;
}

.section {
  padding-block: var(--section);
}

.section-large {
  padding-block: var(--section-large);
}

.sombre {
  background: var(--fond-sombre);
  color: var(--sur-sombre);
}

.creux {
  background: var(--fond-creux);
}

.bouton {
  min-height: 3rem;
  font-family: var(--courant);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  transition: background-color var(--souple), color var(--souple),
    border-color var(--souple);
  border: 1px solid #0000;
  justify-content: center;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.9rem;
  font-size: .74rem;
  font-weight: 500;
  display: inline-flex;
}

.bouton--bordeaux {
  background: var(--oxblood);
  color: var(--ivoire);
  border-color: var(--oxblood);
}

.bouton--bordeaux:hover {
  background: color-mix(in srgb, var(--oxblood) 82%, var(--encre));
  border-color: color-mix(in srgb, var(--oxblood) 82%, var(--encre));
}

.bouton--encre {
  border-color: color-mix(in srgb, var(--encre) 38%, transparent);
  color: var(--encre);
}

.bouton--encre:hover {
  background: var(--encre);
  color: var(--ivoire);
  border-color: var(--encre);
}

.bouton--ivoire {
  border-color: color-mix(in srgb, var(--ivoire) 55%, transparent);
  color: var(--ivoire);
}

.bouton--ivoire:hover {
  background: var(--ivoire);
  color: var(--encre);
  border-color: var(--ivoire);
}

.lien {
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: color var(--souple), background-size var(--glisse);
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  align-items: center;
  gap: .6rem;
  padding-block: .35rem;
  font-size: .78rem;
  font-weight: 500;
  display: inline-flex;
}

.lien:hover {
  color: var(--oxblood);
}

[data-sombre] .lien:hover {
  color: var(--laiton);
}

.cliche {
  background: color-mix(in srgb, var(--encre) 8%, var(--ivoire));
  position: relative;
  overflow: hidden;
}

.cliche img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.r-portrait {
  aspect-ratio: 4 / 5;
}

.r-haut {
  aspect-ratio: 3 / 4;
}

.r-paysage {
  aspect-ratio: 4 / 3;
}

.r-large {
  aspect-ratio: 16 / 9;
}

.r-carre {
  aspect-ratio: 1;
}

@media (hover: hover) and (pointer: fine) {
  .zoom img {
    transition: transform .7s cubic-bezier(.22, 1, .36, 1);
  }

  .zoom:hover img {
    transform: scale(1.02);
  }
}

.horsEcran {
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

[data-parait] {
  opacity: 1;
}

html[data-js="oui"] [data-parait] {
  opacity: 0;
  transition: opacity .7s, transform .7s cubic-bezier(.22, 1, .36, 1);
  transform: translateY(12px);
}

html[data-js="oui"] [data-parait="vu"] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html[data-js="oui"] [data-parait] {
    opacity: 1;
    transition: none;
    transform: none;
  }

  *, :before, :after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/*# sourceMappingURL=app_0efnvju._.css.map*/