/* =========================================================
    v12-03-1450
   ========================================================= */


/* =========================================================
   SHARED PANELS
   Nécessaire au panel contact
   ========================================================= */

.site-panel{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:#000;
  z-index:9998;
}

.site-panel.is-visible{
  display:flex;
}

body.panel-active #main,
body.panel-active footer{
  visibility:hidden;
  pointer-events:none;
}


/* =========================================================
   CONTACT PANEL
   ========================================================= */

#panel-contact{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:#000;
  z-index:9998;
}

#panel-contact.is-visible{
  display:flex;
  animation:fadeInPanel 1000ms forwards;
}

#panel-contact.is-hiding{
  animation:fadeOutPanel 1000ms forwards;
}

@keyframes fadeInPanel{
  from{ opacity:0; }
  to{ opacity:1; }
}

@keyframes fadeOutPanel{
  from{ opacity:1; }
  to{ opacity:0; }
}


/* =========================================================
   CONTACT FRAME
   Real-image-ratio fit
   - landscape image: contact_frame169.webp
   - portrait tall:   contact_frame209.webp
   - portrait std:    contact_frame1959.webp
   No crop, max viewport fill
   ========================================================= */

.contact-frame{
  position:relative;
  margin:auto;
  isolation:isolate;
  overflow:visible;
  transform:translateZ(0);

  width:min(100vw, calc(100dvh * (1920 / 1080)));
  height:min(100dvh, calc(100vw * (1080 / 1920)));
  aspect-ratio:1920 / 1080;

  background:
    url("/assets/images/contact_frame169.webp")
    center center / 100% 100%
    no-repeat;
}


/* =========================================================
   DESKTOP / LANDSCAPE LAYOUT
   ========================================================= */

#contact-form{
  position:absolute;
  top:24%;
  bottom:19.2%;
  left:18.2%;
  right:18.2%;

  display:flex;
  flex-direction:column;
  gap:5.1%;

  z-index:5;
  overflow:hidden;
  contain:layout paint;
}

.contact-field{
  position:relative;
  width:100%;
  min-width:0;
}

.contact-field.small{
  flex:0 0 14%;
}

.contact-field.large{
  flex:1 1 auto;
  min-height:0;
}


/* =========================================================
   FIELD SHELL
   Gothic rectangular fields
   ========================================================= */

.field-inner{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;

  border:1px solid rgba(184,150,80,0.72);
  border-radius:0;

  background:
    linear-gradient(
      to bottom,
      rgba(14,14,14,0.84),
      rgba(4,4,4,0.92)
    );

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    inset 0 0 22px rgba(184,150,80,0.04),
    0 0 0 1px rgba(0,0,0,0.35);

  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    filter .25s ease;
}

.field-inner::before,
.field-inner::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

.field-inner::before{
  background:
    linear-gradient(135deg, rgba(184,150,80,0.58) 0 12px, transparent 12px) top left / 16px 16px no-repeat,
    linear-gradient(225deg, rgba(184,150,80,0.58) 0 12px, transparent 12px) top right / 16px 16px no-repeat,
    linear-gradient(315deg, rgba(184,150,80,0.58) 0 12px, transparent 12px) bottom right / 16px 16px no-repeat,
    linear-gradient(45deg, rgba(184,150,80,0.58) 0 12px, transparent 12px) bottom left / 16px 16px no-repeat;
  opacity:.42;
}

.field-inner::after{
  inset:1px;
  border:1px solid rgba(255,255,255,0.04);
}

.contact-field.small .field-inner,
.contact-field.large .field-inner{
  border-radius:0;
}

.contact-field:focus-within .field-inner{
  border-color:#B89650;
  box-shadow:
    0 0 8px rgba(184,150,80,0.28),
    0 0 22px rgba(184,150,80,0.12),
    inset 0 0 0 1px rgba(184,150,80,0.16),
    inset 0 0 24px rgba(184,150,80,0.05);
}


/* =========================================================
   LABELS
   ========================================================= */

.field-label{
  position:absolute;
  z-index:4;

  left:4.8%;
  top:50%;
  transform:translateY(-50%);

  font-family:"NewTegomin", serif;
  font-size:clamp(15px, 1.35vw, 24px);
  line-height:1;
  letter-spacing:0.02em;
  color:#8e7440;

  pointer-events:none;
  opacity:1;
  transition:opacity .22s ease;
}

.contact-field.filled .field-label{
  opacity:0;
}

.contact-field.large .field-label{
  top:4.8%;
  transform:none;
}


/* =========================================================
   REQUIRED ASTERISK
   ========================================================= */

.field-asterisk{
  position:absolute;
  z-index:4;

  right:3.4%;
  top:50%;
  transform:translateY(-50%);

  width:clamp(18px, 1.45vw, 30px);
  aspect-ratio:1;

  background:
    url("/assets/images/asterisk.webp")
    center / contain
    no-repeat;

  filter:
    drop-shadow(0 0 2px rgba(255,0,0,0.25))
    drop-shadow(0 0 6px rgba(255,60,0,0.55));

  opacity:0.8;
  transition:opacity .22s ease;
  pointer-events:none;
}

.contact-field.valid .field-asterisk{
  opacity:0;
}

.contact-field.large .field-asterisk{
  top:4.8%;
  transform:none;
}


/* =========================================================
   INPUTS / TEXTAREA
   ========================================================= */

.contact-field input,
.contact-field textarea{
  position:absolute;
  inset:0;
  z-index:3;

  width:100%;
  height:100%;

  background:transparent;
  border:none;
  outline:none;
  box-shadow:none;

  font-family:"NewTegomin", serif;
  font-size:clamp(16px, 1.15vw, 22px);
  line-height:1.45;
  color:#ffffff;

  text-shadow:
    0 0 2px rgba(255,255,255,0.12),
    0 0 6px rgba(255,255,255,0.04);

  caret-color:#B89650;
  resize:none;

  transition:
    color .25s ease,
    text-shadow .25s ease,
    filter .25s ease;
}

.contact-field input{
  padding:0 6.4% 0 4.8%;
}

.contact-field textarea{
  padding:0 6.4% 4.2% 4.8%;
  overflow:auto;
}

.contact-field.large textarea{
  padding-top:1%;
  padding-right:6.4%;
  padding-bottom:4.2%;
  padding-left:4.8%;
}

.contact-field input::selection,
.contact-field textarea::selection{
  background:rgba(184,150,80,0.22);
  color:#ffffff;
}


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.submit-wrapper{
  position:absolute;
  left:50%;
  bottom:1%;
  transform:translateX(-50%);

  width:clamp(180px, 28vw, 420px);

  z-index:8;
}

.submit-button{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:1200 / 292;

  border:none;
  background:none;
  padding:0;
  margin:0;

  cursor:url("/assets/cursors/cursor-hover.cur") 12 12, pointer;
}

.submit-button img{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;
  object-fit:contain;

  transition:
    opacity 0.35s cubic-bezier(.4,0,.2,1),
    filter 0.35s cubic-bezier(.4,0,.2,1);

  pointer-events:none;

  -webkit-mask-image: radial-gradient(
    ellipse 95% 85% at center,
    rgba(0,0,0,1) 72%,
    rgba(0,0,0,0.85) 82%,
    rgba(0,0,0,0.45) 90%,
    rgba(0,0,0,0) 100%
  );

  mask-image: radial-gradient(
    ellipse 95% 85% at center,
    rgba(0,0,0,1) 72%,
    rgba(0,0,0,0.85) 82%,
    rgba(0,0,0,0.45) 90%,
    rgba(0,0,0,0) 100%
  );
}

.btn-off{
  z-index:1;
  opacity:0.86;
}

.btn-on{
  z-index:2;
  opacity:0;
  filter:brightness(1.08);
}

.submit-button:hover .btn-on,
.submit-button:focus-visible .btn-on{
  opacity:0.86;
}

.submit-button:hover .btn-off,
.submit-button:focus-visible .btn-off{
  opacity:0.86;
}

.submit-button span{
  position:absolute;
  inset:0;
  z-index:3;

  display:flex;
  align-items:center;
  justify-content:center;

  font-family:"Centaur", serif;
  font-size:clamp(20px, 1.7vw, 32px);
  letter-spacing:0.08em;
  color:#f3eee2;
  text-shadow:
    0 0 6px rgba(0,0,0,0.55),
    0 0 18px rgba(184,150,80,0.08);

  pointer-events:none;
}


/* =========================================================
   FIRE PILLARS
   Desktop / landscape base placement
   Same ratio on both sides
   Fixed to 90% of viewport height
   Native ratio: 467 / 1404
   ========================================================= */

.pillar{
  position:absolute;
  bottom:8.2%;
  overflow:visible;
  pointer-events:none;
  z-index:7;
  opacity:0.98;
  transform:translateZ(0);

  height:90vh;
  aspect-ratio:467 / 1404;
}

.pillar-left{
  left:3%;
}

.pillar-right{
  right:3%;
}

.pillar-apng,
.pillar canvas[data-apng-src]{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  user-select:none;
  pointer-events:none;
}


/* =========================================================
   HONEYPOT
   ========================================================= */

.hp{
  position:absolute;
  left:-9999px;
  opacity:0;
  pointer-events:none;
}


/* =========================================================
   CONTACT TOAST
   ========================================================= */

.contact-toast{
  position:absolute;
  left:50%;
  top:18%;
  transform:translate(-50%, -8px);

  width:min(560px, 78vw);
  min-width:min(420px, 72vw);
  min-height:220px;
  padding:22px 24px 20px;

  border:1px solid rgba(184,150,80,0.72);
  border-radius:12px;

  background:rgba(0,0,0,0.88);
  backdrop-filter:blur(10px);

  box-shadow:
    0 0 12px rgba(184,150,80,0.20),
    0 0 32px rgba(184,150,80,0.10),
    inset 0 0 0 1px rgba(184,150,80,0.08);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:
    opacity 300ms ease,
    transform 300ms ease,
    visibility 300ms ease;

  z-index:9;
}

.contact-toast.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%, 0);
}

.contact-toast-close{
  position:absolute;
  top:10px;
  right:10px;
  z-index:3;

  width:34px;
  height:34px;
  display:grid;
  place-items:center;

  border:1px solid rgba(184,150,80,0.52);
  border-radius:50%;
  background:rgba(0,0,0,0.56);

  color:#e9debf;
  font-family:"Centaur", serif;
  font-size:24px;
  line-height:1;

  cursor:url("/assets/cursors/cursor-hover.cur") 12 12, pointer;
  transition:
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease,
    color .22s ease,
    transform .22s ease;
}

.contact-toast-close:hover,
.contact-toast-close:focus-visible{
  border-color:#B89650;
  background:rgba(18,18,18,0.92);
  color:#fff4d6;
  box-shadow:
    0 0 8px rgba(184,150,80,0.28),
    0 0 18px rgba(184,150,80,0.14);
  transform:scale(1.04);
}

.contact-toast-body{
  width:100%;
  min-height:176px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.contact-toast-message{
  margin:0;
  padding:0 24px;

  color:#f3eee2;
  text-align:center;
  white-space:pre-line;

  font-family:"NewTegomin", serif;
  font-size:clamp(14px, 1.15vw, 22px);
  line-height:1.5;
}

.contact-toast-plane{
  width:min(220px, 52%);
  aspect-ratio:640 / 360;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.toast-plane-apng,
.contact-toast-plane canvas[data-apng-src]{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  max-width:none;
  pointer-events:none;
}


/* =========================================================
   PORTRAIT SYSTEM
   Safe fallback first:
   - default portrait = 19.5:9 frame
   - narrower portrait = 20:9 frame
   This avoids failures caused by browser chrome changing viewport ratio
   ========================================================= */

@media (orientation:portrait){

  .contact-frame{
    width:min(100vw, calc(100dvh * (945 / 2048)));
    height:min(100dvh, calc(100vw * (2048 / 945)));
    aspect-ratio:945 / 2048;
    margin:auto;

    background:
      url("/assets/images/contact_frame1959.webp")
      center center / 100% 100%
      no-repeat;
  }

  #contact-form{
    position:absolute;
    top:15.6%;
    left:13.1%;
    width:73.8%;
    height:66.9%;

    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:8.4% 8.4% 1fr;
    grid-template-areas:
      "name"
      "email"
      "message";
    row-gap:3.8%;

    z-index:5;
    overflow:visible;
  }

  .contact-field{
    width:100%;
    min-width:0;
    margin:0;
  }

  .contact-field.small,
  .contact-field.large{
    flex:auto;
  }

  .contact-field-name{ grid-area:name; }
  .contact-field-email{ grid-area:email; }
  .contact-field-message{
    grid-area:message;
    min-height:0;
  }

  .contact-field-name,
  .contact-field-email,
  .contact-field-message{
    height:100%;
  }

  .field-label{
    left:5%;
    font-size:clamp(12px, 2vw, 18px);
  }

  .field-asterisk{
    right:4%;
    width:clamp(16px, 2vw, 26px);
  }

  .contact-field input,
  .contact-field textarea{
    font-size:clamp(13px, 2vw, 18px);
  }

  .contact-field input{
    padding:0 8.8% 0 5%;
  }

  .contact-field textarea{
    padding:0 8.8% 4.2% 5%;
  }

  .contact-field.large textarea{
    padding-top:6.5%;
  }

  .contact-field.large .field-label{
    top:5%;
    transform:none;
  }

  .contact-field.large .field-asterisk{
    top:5%;
    transform:none;
  }

  .submit-wrapper{
    width:65%;
    min-width:0;
    max-width:none;
    left:50%;
    bottom:9%;
    transform:translateX(-50%);
  }

  .submit-button span{
    font-size:clamp(13px, 2vw, 18px);
  }

  .pillar{
    position:absolute;
    z-index:7;
    height:auto;
    width:50%;
    max-width:none;
    bottom:0%;
  }

  .pillar-left{
    left:-30%;
  }

  .pillar-right{
    right:-30%;
  }
}


/* =========================================================
   PORTRAIT EXTRA-TALL
   Applied only on genuinely narrow portrait viewports
   ========================================================= */

@media (orientation:portrait) and (max-aspect-ratio:0.455){

  .contact-frame{
    width:min(100vw, calc(100dvh * (921 / 2048)));
    height:min(100dvh, calc(100vw * (2048 / 921)));
    aspect-ratio:921 / 2048;

    background:
      url("/assets/images/contact_frame209.webp")
      center center / 100% 100%
      no-repeat;
  }

  #contact-form{
    top:15.8%;
    left:12.8%;
    width:74.4%;
    height:66.8%;

    grid-template-rows:8.2% 8.2% 1fr;
    row-gap:3.6%;
  }

  .contact-field.large .field-label{
    top:5%;
    transform:none;
  }

  .contact-field.large .field-asterisk{
    top:5%;
    transform:none;
  }

  .submit-wrapper{
    width:60%;
    left:50%;
    bottom:9%;
    transform:translateX(-50%);
  }

  .pillar{
    width:50%;
    bottom:0%;
  }

  .pillar-left{
    left:-20%;
  }

  .pillar-right{
    right:-20%;
  }
}


/* =========================================================
   SMALL SCREENS
   ========================================================= */

@media (max-width:620px){
  .contact-toast{
    top:15%;
    min-width:min(86vw, 420px);
    width:min(86vw, 420px);
    min-height:190px;
    padding:18px 14px 16px;
  }

  .contact-toast-close{
    top:8px;
    right:8px;
    width:30px;
    height:30px;
    font-size:22px;
  }

  .contact-toast-message{
    padding:0 18px;
    font-size:clamp(13px, 3.2vw, 17px);
  }

  .contact-toast-plane{
    width:min(180px, 58%);
  }
}