:root {
  --granit: #121110;
  --calcaire: #efebe4;
  --or: #d8a83c;
  --or-clair: #f0cf7a;
  --bronze: #7a5a1f;
  --poussiere: #a39e94;
  --pierre: #5e5850;

  --serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --cols: 8;
  --marge: clamp(1.25rem, 2vw, 2rem);
  --pad: clamp(.75rem, 1.1vw, 1rem);
  --col: calc((100vw - 2 * var(--marge)) / var(--cols));
  --barre-h: 3.5rem;
  --echelle-h: 9px;
  --header-h: calc(var(--barre-h) + var(--echelle-h));
  --marque-fs: calc((100vw - 2 * var(--marge) - 2 * var(--pad)) / 6.05);

  --t-geant: clamp(3.5rem, 8.8vw, 10.5rem);
  --t-display: clamp(3rem, 8.4vw, 9.5rem);
  --t-titre: clamp(2.25rem, min(5.2vw, 10vh), 6rem);
  --t-phrase: clamp(1.375rem, 2.2vw, 2.25rem);

  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-r: cubic-bezier(.16, 1, .3, 1);
}

[data-ton="sombre"] {
  --fond: var(--granit);
  --encre: var(--calcaire);
  --encre-2: var(--poussiere);
  --accent: var(--or);
  --ligne: rgba(239, 235, 228, .075);
  --ligne-forte: rgba(239, 235, 228, .2);
  --graduation: rgba(239, 235, 228, .38);
  --trace: rgba(216, 168, 60, .3);
  --lettre-fond: rgba(216, 168, 60, .07);
  --erreur: #f0a08f;
}
[data-ton="clair"] {
  --fond: var(--calcaire);
  --encre: var(--granit);
  --encre-2: var(--pierre);
  --accent: var(--bronze);
  --ligne: rgba(18, 17, 16, .085);
  --ligne-forte: rgba(18, 17, 16, .22);
  --graduation: rgba(18, 17, 16, .4);
  --trace: rgba(122, 90, 31, .32);
  --lettre-fond: rgba(122, 90, 31, .07);
  --erreur: #9b2c1f;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--granit);
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--granit);
  color: var(--calcaire);
  font: 400 1rem/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

.wp-site-blocks { padding: 0; }
.wp-site-blocks > * { margin-block: 0; }
.lc-main, .lc-main > .wp-block-post-content { margin: 0; }
.lc-main > .wp-block-post-content > * { margin-block: 0; }

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-weight: inherit; font-size: inherit; line-height: inherit; }
[hidden] { display: none !important; }

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

.sr-only,
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: .5rem;
  left: .5rem;
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--or);
  color: var(--granit);
  font: 500 .875rem/1 var(--sans);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.micro {
  font: 500 .75rem/1.3 var(--sans);
  letter-spacing: -.005em;
}
.corps {
  max-width: 34ch;
  font: 400 1rem/1.5 var(--sans);
}
.phrase {
  max-width: 24ch;
  font: 500 var(--t-phrase)/1.12 var(--serif);
  letter-spacing: -.005em;
  text-wrap: balance;
}
.lien {
  display: inline-block;
  margin-top: 1.5rem;
  padding-bottom: .2rem;
  border-bottom: 1px solid var(--accent);
  font: 500 .8125rem/1.3 var(--sans);
  text-decoration: none;
}
.lien:hover { color: var(--accent); }
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  gap: 2rem;
  min-height: 3rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--encre);
  font: 500 .8125rem/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.bouton::after { content: "→"; color: var(--accent); transition: color .3s var(--ease); }
.bouton:hover { background: var(--accent); color: var(--fond); }
.bouton:hover::after { color: var(--fond); }

.marque,
.ecran,
.pied,
.pile > .cartouche {
  padding-inline: var(--marge);
  background-color: var(--fond);
  background-image: linear-gradient(to right, var(--ligne) 1px, transparent 1px);
  background-size: calc((100% - 2 * var(--marge)) / var(--cols)) 100%;
  background-position: var(--marge) 0;
  background-repeat: repeat-x;
  color: var(--encre);
}

.marque { padding-top: .9rem; }
.marque__titre {
  padding-inline: var(--pad);
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
  font: 500 var(--marque-fs)/.78 var(--serif);
  letter-spacing: -.012em;
  text-transform: uppercase;
}

.reglet {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--fond);
  color: var(--encre);
  transition: background-color .45s var(--ease), color .45s var(--ease);
}
.admin-bar .reglet { top: var(--wp-admin--admin-bar--height, 0px); }
.reglet__barre {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  align-items: center;
  height: var(--barre-h);
  padding-inline: var(--marge);
}
.reglet__logo {
  grid-column: 1;
  justify-self: start;
  padding-left: var(--pad);
  transition: opacity .4s var(--ease), transform .5s var(--ease), visibility 0s;
}
.reglet__logo img { width: auto; height: 2rem; }
.js .reglet:not(.is-colle) .reglet__logo {
  visibility: hidden;
  opacity: 0;
  transform: translateY(.4rem);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
}
.reglet__nav { grid-column: 2 / -1; }
.reglet__nav ul { display: grid; grid-template-columns: repeat(calc(var(--cols) - 1), minmax(0, 1fr)); }
.reglet__nav li { position: relative; grid-column: var(--nav-col, auto); grid-row: 1; }
.reglet__nav a {
  display: block;
  padding: .9rem var(--pad);
  font: 500 .75rem/1 var(--sans);
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
}
.reglet__nav a:hover { color: var(--accent); }
.reglet__nav li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--echelle-h) * -1 + 1px);
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.reglet__nav li.is-actif::after,
.reglet__nav li:has(> a[aria-current="page"])::after { transform: none; }
.reglet__nav li.is-actif a,
.reglet__nav a[aria-current="page"] { color: var(--accent); }
.reglet__menu {
  display: none;
  grid-column: -2 / -1;
  justify-self: end;
  align-items: center;
  gap: .65rem;
  min-height: 2.75rem;
  padding: 0 var(--pad);
  border: 0;
  background: none;
  cursor: pointer;
  font: 500 .75rem/1 var(--sans);
}
.reglet__menu-icone { position: relative; width: 1.1rem; height: 1.1rem; }
.reglet__menu-icone::before,
.reglet__menu-icone::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--accent);
  transition: transform .35s var(--ease);
}
.reglet__menu-icone::before { transform: translateY(-3px); }
.reglet__menu-icone::after { transform: translateY(3px); }
.reglet__menu[aria-expanded="true"] .reglet__menu-icone::before { transform: rotate(45deg); }
.reglet__menu[aria-expanded="true"] .reglet__menu-icone::after { transform: rotate(-45deg); }
.reglet__echelle {
  position: relative;
  height: var(--echelle-h);
  margin-inline: var(--marge);
  border-top: 1px solid var(--ligne-forte);
  background-image:
    linear-gradient(to right, var(--graduation) 1px, transparent 1px),
    linear-gradient(to right, var(--graduation) 1px, transparent 1px);
  background-size: calc(100% / var(--cols)) 100%, calc(100% / var(--cols) / 5) 40%;
  background-repeat: repeat-x;
}
.reglet__progression {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: var(--or);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

.menu-panel {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 39;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  white-space: nowrap;
  padding: 1.5rem var(--marge) 2rem;
  overflow-y: auto;
  background-color: var(--granit);
  background-image: linear-gradient(to right, rgba(239, 235, 228, .075) 1px, transparent 1px);
  background-size: calc((100% - 2 * var(--marge)) / 4) 100%;
  background-position: var(--marge) 0;
  color: var(--calcaire);
}
.menu-panel li { border-bottom: 1px solid rgba(239, 235, 228, .14); }
.menu-panel a {
  display: grid;
  grid-template-columns: 25% 1fr;
  align-items: baseline;
  padding-block: .9rem;
  font: 500 clamp(2rem, 9vw, 3rem)/1 var(--serif);
  text-decoration: none;
}
.menu-panel a span { color: var(--or); font: 500 .75rem/1 var(--sans); }
.menu-panel a[aria-current="page"] { color: var(--or); }
.menu-panel .micro { color: var(--poussiere); }
.menu-open { overflow: hidden; }

.ecran {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--header-h);
  overflow: clip;
}
.ecran > * { min-width: 0; }
.ecran__pied {
  grid-column: 1 / -1;
  grid-row: -2;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  padding: 1.25rem 0 .9rem;
  color: var(--encre-2);
}
.ecran__pied span { padding-left: var(--pad); }
.ecran__pied span:nth-child(2) { grid-column: 5; }

.trace {
  position: absolute;
  inset: 0 var(--marge);
  width: calc(100% - 2 * var(--marge));
  height: 100%;
  pointer-events: none;
}
.trace line { stroke: var(--trace); stroke-width: 1; vector-effect: non-scaling-stroke; }

.filet-guide {
  position: fixed;
  top: 0;
  left: var(--marge);
  z-index: 30;
  width: 1px;
  height: clamp(2.5rem, 9vh, 5rem);
  background: var(--or);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s var(--ease);
}

.cartouche {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  align-items: end;
  row-gap: .6rem;
  padding-bottom: clamp(2rem, 6vh, 4rem);
}
.cartouche::before {
  content: "";
  grid-column: 1 / -1;
  height: 1px;
  margin-bottom: 1.1rem;
  background: var(--ligne-forte);
}
.pile > .cartouche { padding-top: clamp(3.5rem, 10vh, 6rem); }
.cartouche__num {
  grid-column: 1;
  padding-left: var(--pad);
  color: var(--accent);
  font: 500 clamp(2.5rem, 3.6vw, 3.75rem)/.8 var(--serif);
  font-variant-numeric: lining-nums;
}
.cartouche__titre {
  grid-column: 2 / 5;
  padding-left: var(--pad);
  font: 500 clamp(1.75rem, 2.6vw, 2.75rem)/1 var(--serif);
  letter-spacing: -.01em;
}
.cartouche__texte { grid-column: 5 / 8; padding-left: var(--pad); color: var(--encre-2); }
.cartouche__repere { grid-column: 8; padding-left: var(--pad); color: var(--encre-2); }

.or { color: var(--or); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .or {
    background-image:
      linear-gradient(100deg, transparent 40%, rgba(255, 246, 220, .85) 50%, transparent 60%),
      url(../images/texture-or.webp),
      linear-gradient(170deg, #f6dc8e 0%, #d8a83c 45%, #b98a2c 70%, #f0cf7a 100%);
    background-size: 300% 100%, 22rem auto, 100% 100%;
    background-position: 130% 0, 40% 45%, 0 0;
    background-repeat: no-repeat, repeat, no-repeat;
    background-blend-mode: normal, soft-light, normal;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  [data-ton="clair"] .or {
    background-image:
      linear-gradient(100deg, transparent 40%, rgba(255, 240, 205, .55) 50%, transparent 60%),
      url(../images/texture-or.webp),
      linear-gradient(170deg, #a07a2c 0%, #7a5a1f 50%, #5e4516 75%, #94702a 100%);
  }
  .or.is-shining { animation: eclat 2.4s var(--ease) both; }
}
[data-ton="clair"] .or { color: var(--bronze); }
@keyframes eclat {
  from { background-position: 130% 0, 40% 45%, 0 0; }
  to { background-position: -30% 0, 40% 45%, 0 0; }
}

.a-completer { padding: 0 .25em; background: rgba(216, 168, 60, .28); color: var(--encre); }

.pied {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  padding-block: 1rem 1.25rem;
  border-top: 1px solid var(--ligne-forte);
  color: var(--encre-2);
}
.pied__signature { grid-column: 1 / 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pied__liens { grid-column: 4 / 8; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pied__credit { grid-column: 8; }
.pied__signature span,
.pied__liens a,
.pied__credit { padding-left: var(--pad); }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--accent); text-decoration: underline; }
.pied p a { color: var(--encre); }
.pied a[aria-current="page"] { color: var(--encre); }
body:has(.rgaa-wp-toolbar) .pied { padding-bottom: 5.5rem; }

.r-ligne { display: block; clip-path: inset(-.3em -.5em -.3em -.5em); }
.r-ligne__in { display: block; }
.r-sans-anim .r-ligne__in { transition: none !important; }

.anim main .revele-lignes:not(.r-pret):not(.r-fini) { opacity: 0; }
.anim main .revele-escalier > span:not(.sr-only):not(.r-ligne) { opacity: 0; }
.anim .r-ligne__in {
  transform: translateY(150%);
  transition: transform 1.15s var(--ease-r);
  transition-delay: calc(var(--d, 0ms) + var(--i, 0) * 85ms);
}
.anim .is-revele .r-ligne__in { transform: none; }

.anim main .revele-monte {
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity 1s var(--ease) var(--d, 0ms), transform 1.3s var(--ease-r) var(--d, 0ms);
}
.anim main .revele-monte.is-revele { opacity: 1; transform: none; }

.anim main .revele-image { overflow: hidden; }
.anim main .revele-image img {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.16);
  transition: clip-path 1.5s var(--ease-r) var(--d, 0ms), transform 1.9s var(--ease-r) var(--d, 0ms), scale 1.1s var(--ease-r);
}
.anim main .revele-image.is-revele img { clip-path: inset(0 0 0 0); transform: none; }

.anim main .revele-cartouche::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s var(--ease-r);
}
.anim main .revele-cartouche.is-revele::before { transform: none; }

.anim [data-parallaxe],
.anim [data-parallaxe-x] { will-change: translate; }
.anim [data-parallaxe-image] { overflow: hidden; }
.anim [data-parallaxe-image] img { scale: 1.2; will-change: translate; }

@media (max-width: 1099px) {
  :root { --t-phrase: clamp(1.25rem, 2.6vw, 2rem); }
}

@media (max-width: 900px) {
  .reglet__nav { display: none; }
  .reglet__menu { display: inline-flex; }
}

@media (max-width: 760px) {
  :root {
    --cols: 4;
    --t-geant: 14vw;
    --t-display: 15vw;
    --t-titre: 12vw;
    --t-phrase: 1.375rem;
  }
  .ecran { grid-template-rows: none; grid-auto-rows: auto; min-height: 0; padding-top: 1.5rem; padding-bottom: 0; }
  .ecran > * { grid-column: 1 / -1; grid-row: auto; }
  .ecran__pied { grid-row: auto; margin-top: 2.5rem; }
  .ecran__pied span:nth-child(2) { grid-column: 3; }

  .cartouche__titre,
  .cartouche__texte { grid-column: 2 / -1; }
  .cartouche__repere { display: none; }

  .pied { display: flex; flex-direction: column; align-items: center; padding-block: 2.5rem 2rem; text-align: center; }
  .pied__liens { order: 1; grid-template-columns: repeat(2, auto); grid-template-rows: repeat(2, auto); grid-auto-flow: column; justify-content: center; gap: .8rem 2.5rem; text-align: left; }
  .pied__signature { order: 2; display: block; margin-top: 3rem; }
  .pied__signature span + span::before { content: " — "; }
  .pied__credit { order: 3; margin-top: .4rem; }
  .pied__signature span,
  .pied__liens a,
  .pied__credit { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (forced-colors: active) {
  .or { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
}

#menu-principal:focus,
#pied:focus,
#contenu:focus { outline: none; }

:root:has(> body.rgaa-wp-text-minus2),
:root:has(> body.rgaa-wp-zoom-minus2) { font-size: 85%; }
:root:has(> body.rgaa-wp-text-minus1),
:root:has(> body.rgaa-wp-zoom-minus1) { font-size: 92.5%; }
:root:has(> body.rgaa-wp-text-1),
:root:has(> body.rgaa-wp-zoom-1) { font-size: 112.5%; }
:root:has(> body.rgaa-wp-text-2),
:root:has(> body.rgaa-wp-zoom-2) { font-size: 125%; }
body[class*="rgaa-wp-zoom-"] > :not([class*="rgaa-wp"]) { zoom: 1 !important; }
body[class*="rgaa-wp-text-"] :is(main, .wp-site-blocks) { font-size: inherit !important; }

body.rgaa-wp-dyslexia {
  --serif: "OpenDyslexic", Arial, Verdana, sans-serif;
  --sans: "OpenDyslexic", Arial, Verdana, sans-serif;
}

body.rgaa-wp-reduce-motion-active :is([data-parallaxe], [data-parallaxe-x], [data-parallaxe-image] img) { translate: none !important; }
body.rgaa-wp-reduce-motion-active :is(.revele-lignes, .revele-monte, .revele-escalier > span, .revele-image img, .r-ligne__in) { opacity: 1 !important; transform: none !important; clip-path: none !important; }
body.rgaa-wp-reduce-motion-active .revele-cartouche::before { transform: none !important; }
body.rgaa-wp-reduce-motion-active .or.is-shining { animation: none !important; }
body.rgaa-wp-dyslexia {
  --t-geant: clamp(2.25rem, 5.6vw, 6.5rem);
  --t-display: clamp(2rem, 5.2vw, 6rem);
  --t-titre: clamp(1.75rem, min(3.6vw, 7vh), 4rem);
  --t-phrase: clamp(1.25rem, 1.7vw, 1.75rem);
}
body.rgaa-wp-dyslexia .escalier__lignes > span:not(.sr-only) { white-space: normal; }
body.rgaa-wp-dyslexia .lc-texte--monumental { font-size: clamp(2.75rem, 9vw, 10rem); white-space: normal; }
@media (max-width: 760px) {
  body.rgaa-wp-dyslexia {
    --t-geant: 9vw;
    --t-display: 10vw;
    --t-titre: 8.5vw;
  }
}