/* Original Art & Métaux styling with fluid layouts and readable device typography. */
:root { font-size: 100%; --gold: #e0ba65; --ink: #777; --line: #d7d7d7; --paper: #ebebeb; }
* { box-sizing: border-box; }
body { margin: 0; background: white; color: var(--ink); font-family: Arial, Helvetica, sans-serif; font-size: 1.125rem; line-height: 1.6; }
img { display: block; max-width: 100%; height: auto; }
a { color: #777; text-underline-offset: .15em; }
a:hover { color: #555; }
button, input, textarea, summary { font: inherit; }
button, summary { cursor: pointer; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #a07830; outline-offset: 3px; }
p { margin: 0 0 1em; max-width: 65ch; }
h1, h2, h3 { font-family: 'Century Gothic', Arial, sans-serif; line-height: 1.25; margin: 0 0 16px; }
h1 { font-size: 1.75rem; color: #666; }
h2 { color: var(--gold); font-size: 1.375rem; }
h3 { font-size: 1.25rem; }
#main.site-shell { width: min(955px, calc(100% - 40px)); margin-inline: auto; position: relative; }
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0 12px; position: relative; z-index: 10; }
.brand { flex: 0 0 159px; }
.brand img { width: 159px; }
.header-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 15px; font-size: 1rem; text-transform: uppercase; }
.header-contact .tel { color: #bc9242; }
.header-contact a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.header-contact .tel a { font-weight: 700; color: inherit; }
.header-contact .lang { padding-left: 15px; border-left: 1px dotted var(--line); }
.header-contact .site { flex: 0 0 100%; text-align: right; }
.site-nav { flex: 0 0 100%; background: #ebebeb; }
.nav-toggle { padding: 10px 15px; min-height: 48px; font-size: 1rem; font-weight: 700; list-style-position: inside; }
.nav-items { padding: 0 0 8px; }
.nav-link { display: block; min-height: 48px; padding: 10px 15px; color: #777; font-size: 1rem; text-decoration: none; }
summary.nav-link { display: list-item; list-style-position: inside; }
.nav-link:hover, .nav-link[aria-current] { color: #9c762e; background: #e0e0e0; }
.nav-group { position: relative; }
.nav-submenu { padding-left: 16px; background: #f5f5f5; }
@media (max-width: 899px) {
  .main-site .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
  .main-site .brand { grid-column: 1; grid-row: 1; }
  .main-site .header-contact { grid-column: 1 / -1; grid-row: 2; }
  .main-site .site-nav { grid-column: 2; grid-row: 1; position: relative; justify-self: end; }
  .main-site .nav-items {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(320px, calc(100vw - 32px));
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 10px 28px rgb(0 0 0 / 14%);
  }
}
#main .center { margin-top: 0; }
#main .center .box { box-sizing: content-box; }
#main .center > img, #main .center .box > img { width: 100%; height: 100%; }
.page-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-block: 25px; }
.intro, .gallery-section, .contact-form { min-width: 0; }
.intro { max-width: 65ch; }
.prose { display: flow-root; }
.button, .submit { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 10px 14px; background: var(--gold); color: #fff; border: 0; text-decoration: none; font-size: 1rem; line-height: 1.5; text-transform: uppercase; text-align: center; }
.button:hover, .submit:hover { color: white; background: #caa75a; }
.gallery-section, .contact-form { border-top: 1px dotted var(--line); padding-top: 24px; }
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 10px; }
.project-card, .comparison-card { min-width: 0; position: relative; }
.gallery-link { display: block; color: #777; text-decoration: none; position: relative; }
.project-card img { width: 100%; aspect-ratio: 138 / 130; object-fit: contain; border: 1px solid var(--line); background: white; }
.card-caption { display: block; padding-top: 6px; font-size: .875rem; line-height: 1.5; }
.home-page .gallery-link { display: flex; flex-direction: column; height: 100%; }
.home-page .card-caption { position: static; flex: 1; background: var(--gold); color: #493915; padding: 10px 8px; font-size: .875rem; text-transform: uppercase; text-align: center; overflow-wrap: anywhere; }
.comparison-grid { grid-template-columns: minmax(0, 1fr); }
.comparison-link { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
figure { margin: 0; min-width: 0; position: relative; }
.comparison-link img { width: 100%; aspect-ratio: 138 / 130; object-fit: contain; border: 1px solid var(--line); background: white; }
figcaption { position: absolute; top: -5px; right: 5px; padding: 7px 6px; background: var(--gold); color: white; font-size: .875rem; text-transform: uppercase; }
.gallery-link:hover img { opacity: .88; }
.formulaire form { display: grid; gap: 6px; }
.field-label { font-size: 1rem; }
.cont_t { margin-bottom: 16px; min-width: 0; }
.text_f { width: 100%; min-width: 0; min-height: 48px; padding: 10px; border: 0; background: #dbdbdb; color: #555; font-size: 1.125rem; line-height: 1.5; }
textarea.text_f { min-height: 200px; resize: vertical; }
.submit { justify-self: end; cursor: pointer; }
iframe { width: 100%; min-height: 200px; border: 0; }
.note_rouge { color: #a52424; }
.site-footer { border-top: 1px dotted var(--line); padding: 12px 0; color: #979797; font-size: .875rem; line-height: 1.8; text-align: center; text-transform: uppercase; }
.site-footer a { color: inherit; text-decoration: none; }
.religious-site { background: url('../artreligieux/images/bg_body.gif') repeat-x top; color: #666; }
.religious-site .site-header { padding-block: 24px; }
.religious-banner img { width: 100%; aspect-ratio: 956 / 339; object-fit: contain; }
.religious-site .intro ul { padding-left: 1.25em; }
.religious-site .intro h2 { margin-top: 24px; }
.religious-site > .site-footer { background: #dab25a; color: #fff; padding: 12px 20px; border: 0; }
.religious-grid .project-card img { aspect-ratio: 4 / 3; }
@media (min-width: 768px) {
  body { font-size: 1.25rem; }
  .comparison-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 994px) {
  #main .center { height: clamp(190px, 28vw, 269px); }
  #main .center .box { height: 100%; box-sizing: border-box; }
  #main .center > img, #main .center .box > img { object-fit: cover; }
  #main .center .element, #main .center .element_acc { left: 2%; width: 56%; height: 100%; background-size: contain; background-position: center bottom; background-repeat: no-repeat; }
  #main .center .slogan { left: auto; right: 4%; top: 30%; width: 34% !important; height: 50% !important; background-size: contain; background-repeat: no-repeat; background-position: center; }
}
@media (min-width: 900px) {
  .site-header { display: grid; grid-template-columns: 159px minmax(0, 1fr); gap: 0 20px; min-height: 112px; padding: 8px 0 11px; }
  .brand { grid-row: 1 / 3; align-self: end; margin-left: 7px; }
  .header-contact { font-size: 1rem; }
  .site-nav { justify-self: end; }
  .nav-toggle { display: none; }
  .nav-items { display: flex; padding: 0; }
  .nav-link { text-transform: uppercase; padding: 10px 12px; }
  .nav-submenu { position: absolute; top: 100%; right: 0; width: max-content; max-width: 340px; padding: 0; background: #ebebeb; }
  .nav-submenu .nav-link { text-transform: none; }
  .page-content { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 20px; }
  .home-page .page-content { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .gallery-section, .contact-form { border-top: 0; border-left: 1px dotted var(--line); padding: 0 0 0 20px; }
  .religious-site .page-content { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .religious-site .site-header { display: flex; }
  .religious-site .brand { margin: 0; }
  .religious-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479px) {
  #main.site-shell { width: calc(100% - 32px); }
  .site-header { justify-content: center; }
  .header-contact { justify-content: center; text-align: center; gap: 4px 12px; }
  .header-contact .site { text-align: center; }
  .home-page .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid:not(.comparison-grid):not(.religious-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .religious-grid { grid-template-columns: minmax(0, 1fr); }
}
.image-preview { width: min(1000px, calc(100% - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 16px; border: 1px solid var(--line); color: var(--ink); background: #fff; }
.image-preview::backdrop { background: rgb(0 0 0 / 82%); }
.viewer-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.viewer-toolbar button, .viewer-navigation button { min-height: 48px; padding: 10px 16px; font-size: 1rem; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.viewer-status { font-size: 1rem; margin: 0; }
.image-preview img { width: 100%; max-height: calc(100dvh - 230px); object-fit: contain; }
.viewer-caption { font-size: 1rem; margin: 12px 0; }
.viewer-navigation { display: flex; justify-content: space-between; gap: 12px; }
body.viewer-open { overflow: hidden; }
/* Keep the original small project thumbnails compact when the tablet layout stacks. */
@media (min-width: 768px) and (max-width: 899px) {
  .home-page .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Subtle dropdown motion, matching the original navigation's colors. */
.nav-link { transition: background-color 160ms ease, color 160ms ease; }
.nav-group[open] > .nav-submenu { animation: nav-reveal 180ms ease-out; }
@keyframes nav-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-link { transition: none; }
  .nav-group[open] > .nav-submenu { animation: none; }
}

/* Keep an opaque outgoing page under the new page throughout the incoming fade. */
:root { --motion-ease: cubic-bezier(.22, 1, .36, 1); }
@keyframes page-enter-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes page-enter-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .motion-revealed { animation: page-enter-rise 620ms var(--motion-ease) var(--reveal-delay, 0ms) backwards; }
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  .appointment-banner { view-transition-name: appointment-banner; }
  ::view-transition-group(*) { animation-duration: 500ms; animation-timing-function: cubic-bezier(.25,.8,.25,1); }
  ::view-transition-image-pair(root) { isolation: isolate; overflow: clip; }
  ::view-transition-old(root) { animation: none; opacity: 1; transform: none; mix-blend-mode: normal; z-index: 1; }
  ::view-transition-new(root) { animation: page-navigation-fade 500ms cubic-bezier(.25,.8,.25,1) both; opacity: 1; mix-blend-mode: normal; z-index: 2; }
  ::view-transition-old(site-header), ::view-transition-old(appointment-banner) { animation: none; opacity: 1; }
  ::view-transition-new(site-header), ::view-transition-new(appointment-banner) { animation: none; opacity: 1; mix-blend-mode: normal; }
  .page-transition-arrival .motion-revealed { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .motion-revealed { animation: none; }
}

@keyframes page-navigation-fade { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
html { scrollbar-gutter:stable; }

.navigation-stage{position:fixed;inset:0;width:100%;height:100%;border:0;margin:0;background:#fff;z-index:2147483000;visibility:hidden;pointer-events:none;opacity:0}
#navigation-error{position:fixed;bottom:20px;left:20px;right:20px;z-index:2147483001;padding:16px;background:#fff;border:1px solid #92702e;color:#353535}