/* 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); }
}
/* Immersive project gallery: image first, quiet chrome, generous touch targets. */
body .image-preview.image-preview { --viewer-bg:#171816; --viewer-text:#f4f1e9; --viewer-muted:#b8b9b2; --viewer-accent:#d8b869; box-sizing:border-box; width:100%; max-width:none; height:100dvh; max-height:none; padding:0; margin:auto; border:0; border-radius:0; color:var(--viewer-text); background:var(--viewer-bg); box-shadow:0 30px 100px #0008; overflow:hidden; font-family:Manrope, sans-serif; }
.image-preview[open] { display:grid; grid-template-rows:minmax(0,1fr) auto; }
.image-preview::backdrop { background:rgb(9 11 9 / 90%); backdrop-filter:blur(12px); }
.image-preview .viewer-toolbar { position:absolute; z-index:3; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0; padding:12px 16px; background:linear-gradient(#171816c9,transparent); pointer-events:none; }
.image-preview .viewer-eyebrow { display:block; color:var(--viewer-accent); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.image-preview .viewer-status { margin:5px 0 0; font-size:13px; color:var(--viewer-muted); }
.image-preview .viewer-actions { pointer-events:auto; display:flex; gap:8px; }
.image-preview button, .image-preview .viewer-original { display:grid; place-items:center; width:48px; height:48px; min-height:48px; padding:0; border:1px solid #ffffff24; border-radius:50%; background:#171816b8; color:var(--viewer-text); cursor:pointer; transition:background .18s,border-color .18s; text-decoration:none; }
.image-preview button:hover, .image-preview .viewer-original:hover { background:#ffffff18; border-color:var(--viewer-accent); }
.image-preview :is(button,a):focus-visible { outline:2px solid var(--viewer-accent); outline-offset:4px; }
.image-preview .viewer-stage { position:relative; display:flex; align-items:center; justify-content:center; min-height:0; padding:8px; touch-action:pan-y pinch-zoom; }
.image-preview .viewer-image { display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; border-radius:4px; box-shadow:0 8px 40px #0005; transition:opacity .15s; }
.image-preview .is-loading .viewer-image { opacity:0; }
.image-preview .viewer-stage button { position:absolute; top:50%; transform:translateY(-50%); z-index:2; }
.image-preview .viewer-previous { left:24px; }
.image-preview .viewer-next { right:24px; }
.image-preview .viewer-loading { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(80%,400px); margin:0; text-align:center; font-size:14px; color:var(--viewer-muted); pointer-events:none; }
.image-preview .viewer-footer { min-width:0; padding:0 12px max(4px,env(safe-area-inset-bottom)); text-align:center; }
.image-preview .viewer-thumbnails { display:flex; width:max-content; max-width:100%; margin:0 auto; gap:10px; padding:6px; overflow-x:auto; scrollbar-width:thin; scrollbar-color:#666 transparent; }
.image-preview .viewer-thumbnail { flex:0 0 64px; width:64px; height:48px; border-radius:6px; overflow:hidden; opacity:.5; }
.image-preview .viewer-thumbnail img { display:block; width:100%; height:100%; max-height:none; object-fit:cover; }
.image-preview .viewer-thumbnail[aria-pressed="true"] { opacity:1; border:2px solid var(--viewer-accent); }
.image-preview .viewer-thumbnail:hover, .image-preview .viewer-thumbnail:focus-visible { opacity:1; }
.image-preview [hidden] { display:none!important; }
html.viewer-open { overflow:hidden; scrollbar-gutter:auto; }
body.viewer-open { overflow:hidden; }
@media(max-width:600px) {
 body .image-preview.image-preview { width:100%; height:100dvh; border:0; border-radius:0; }
 .image-preview .viewer-toolbar { padding:calc(12px + env(safe-area-inset-top)) 16px 12px; }
 .image-preview .viewer-stage { padding:4px; }

 .image-preview .viewer-previous { left:8px; }
 .image-preview .viewer-next { right:8px; }
 .image-preview .viewer-footer { padding:0 8px max(4px,env(safe-area-inset-bottom)); }
 .image-preview .viewer-thumbnail { flex-basis:56px; width:56px; }
}
@media(prefers-reduced-motion:reduce) { .image-preview.image-preview, .image-preview.image-preview::backdrop { animation:none!important; } .image-preview * { transition:none!important; } }

/* 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) {
  @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; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: 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}

/* Restoration phase follows the selected full-size gallery image. */
.image-preview .viewer-state{position:absolute;z-index:3;top:24px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;justify-content:center;max-width:calc(100% - 160px);padding:9px 18px;background:#856331;color:#fff;border:1px solid #c6ac82;font:700 12px/1.5 'Manrope',Arial,sans-serif;letter-spacing:1.3px;text-transform:uppercase;white-space:nowrap;pointer-events:none;box-shadow:0 2px 12px #0003}
.image-preview .viewer-state[hidden]{display:none}
@media(max-width:599px){.image-preview .viewer-state{top:auto;bottom:14px;max-width:calc(100% - 100px);font-size:11px;padding:7px 14px}}