/* ==========================================================================
   CONTACT — DÉCLINAISON (même logique que Projets/Compétences/Bio)
   Classes dédiées : stancreation-contact-*
   ========================================================================== */

   :root {
    --stancreation-contact-bg: rgb(226, 190, 154);
    /* bleu nuit */
  }
  
  /* ✅ remplace "page-template-..." par la classe body réelle de ta page contact */
  body.page-template-page-contact {
    background-color: var(--stancreation-contact-bg);
  }
  
  
  
  /* =========================
       1) WRAPPER + HERO
       ========================= */
  .stancreation-contact {
    position: relative;
    z-index: 2;
  }
  
  /* HERO */
  .stancreation-contact-hero {
    position: relative;
    z-index: 2;
    padding: 10% 13% 0 13%;
  }
  
  .stancreation-contact-hero-contenu {
    max-width: var(--container);
    margin: 0 auto;
  }
  
  .stancreation-contact-titre {
    margin: 0 0 1.2rem 0;
    text-align: right;
  }
  
  /* SVG sous H1 (même spacing que Compétences) */
  .stancreation-contact-hero-svg {
    margin-bottom: clamp(1.8rem, 3.2vw, 2.8rem);
  }
  
  .stancreation-contact-hero-svg svg {
    display: block;
    width: 100%;
    height: auto;
  }
  
  /* Texte intro (mêmes règles que competences-texte) */
  .stancreation-contact-texte {
    margin: 0 40% 5% 0;
    max-width: 100ch;
    text-align: left;
  }
  
  /* =========================
       2) FORMULAIRE
       ========================= */
  .stancreation-contact-form {
    position: relative;
    z-index: 2;
    padding: 0 13% 5% 30%;
  }
  
  .stancreation-contact-form-contenu {
    max-width: var(--container);
    margin: 0 auto;
  }
  
  /* CF7 base */
  .stancreation-contact-form .wpcf7,
  .stancreation-contact-form .wpcf7 form {
    width: 100%;
    margin: 0;
  }
  
  /* ======================================================
       CHAMPS — style sobre, cohérent, premium
    ====================================================== */
  .stancreation-contact-form label {
    display: block;
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 300;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    letter-spacing: 0;
    text-transform: none;
    color: black;
    margin: 0 0 -1% 0;
  }
  
  .stancreation-contact-form label {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* espace texte ↔ champ */
  }
  
  .stancreation-contact-form input[type="text"],
  .stancreation-contact-form input[type="email"],
  .stancreation-contact-form input[type="tel"],
  .stancreation-contact-form textarea {
    width: 100%;
    background: transparent;
    border: .08rem solid rgba(0, 0, 0, 0.75);
    outline: none;
    border-radius: 0;
    padding: .9rem 1rem;
    box-sizing: border-box;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    font-weight: 300;
    color: #000000;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
  }
  
  .stancreation-contact-form textarea {
    min-height: clamp(12rem, 26vh, 18rem);
    resize: vertical;
  }
  
  .stancreation-contact-form input::placeholder,
  .stancreation-contact-form textarea::placeholder {
    color: rgba(0, 0, 0, 0.45);
  }
  
  .stancreation-contact-form input:focus,
  .stancreation-contact-form textarea:focus {
    border-color: #000000;
    background: rgba(255, 255, 255, .06);
    transform: translateY(-1px);
  }
  
  /* ======================================================
       SUBMIT — cohérent avec tes boutons
    ====================================================== */


  .stancreation-contact-form input[type="submit"] {
    display: inline-block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    background: transparent;
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 100;
    text-transform: uppercase;
    text-align: center;
    border: 1px solid #000;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    cursor: pointer;
  }
  
  .stancreation-contact-form input[type="submit"]:hover {
    background: black;
    color: white;
    border: 1px solid #000;
  }
  
  .stancreation-contact-form input[type="submit"]:active {
    transform: translateY(0);
  }
  

  
  /* ======================================================
       MESSAGES CF7
    ====================================================== */
  .stancreation-contact-form .wpcf7-not-valid-tip {
    margin-top: .4rem;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: .9rem;
    font-weight: 300;
    color: rgba(255, 160, 160, .95);
  }
  
  .stancreation-contact-form .wpcf7-response-output {
    margin: 1.6rem 0 0;
    padding: 1rem 1.2rem;
    border: .08rem solid rgba(255, 255, 255, .55);
    background: rgba(0, 0, 0, .22);
  
    font-family: "Poppins", system-ui, sans-serif;
    font-size: .95rem;
    font-weight: 300;
    color: rgba(255, 255, 255, .92);
  }
  
  /* =========================
       3) RESPONSIVE
       ========================= */
  @media (max-width: 1100px) {
    .stancreation-contact-hero {
      padding: 20% 13% 0 13%;
    }
  
    .stancreation-contact-form {
      padding: 0 13% 0 13%;
    }
  
    .stancreation-contact-texte {
      margin: 0 0 2.5rem 0;
      max-width: 70ch;
    }
  }
  
  
  .stancreation-contact-form-champ p {
    margin-top: 5%;
  }
  



  /* ==========================================================================
   CONTACT — SVG SOUS H1 (même logique que BIO)
   ========================================================================== */

:root {
  --stancreation-contact-svg-delay: .55s;

  --stancreation-contact-svg-line-dur: .75s;
  --stancreation-contact-svg-square-dur: .55s;

  --stancreation-contact-svg-line-gap: .12s;
  --stancreation-contact-svg-square-gap: .18s;
}

.stancreation-contact-hero-svg {
  margin-bottom: clamp(1.8rem, 3.2vw, 2.8rem);
}

/* rotation demandée : SUR LE SVG ENTIER */
.stancreation-contact-hero-svg.is-rotate-180 svg{
  transform: rotate(180deg);
  transform-origin: center;
}

.stancreation-contact-hero-svg svg{
  display:block;
  width:100%;
  height:auto;
}

/* INIT */
.stancreation-contact-hero-svg #sc-line-1,
.stancreation-contact-hero-svg #sc-line-2{
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
}

.stancreation-contact-hero-svg #sc-square{
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: translateY(.35rem) scale(.7);
  will-change: transform, opacity;
}

/* ENTRÉE */
body.stancreation-contact-loaded .stancreation-contact-hero-svg #sc-line-1{
  animation: scContactLineGrow var(--stancreation-contact-svg-line-dur) cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: var(--stancreation-contact-svg-delay);
}

body.stancreation-contact-loaded .stancreation-contact-hero-svg #sc-line-2{
  animation: scContactLineGrow var(--stancreation-contact-svg-line-dur) cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: calc(var(--stancreation-contact-svg-delay) + var(--stancreation-contact-svg-line-gap));
}

body.stancreation-contact-loaded .stancreation-contact-hero-svg #sc-square{
  animation: scContactSquarePop var(--stancreation-contact-svg-square-dur) cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: calc(
    var(--stancreation-contact-svg-delay)
    + var(--stancreation-contact-svg-line-gap)
    + var(--stancreation-contact-svg-square-gap)
  );
}

/* SORTIE */
body.stancreation-transition-active .stancreation-contact-hero-svg #sc-line-1,
body.stancreation-transition-active .stancreation-contact-hero-svg #sc-line-2{
  animation: scContactLineOut .35s cubic-bezier(.22,.61,.36,1) forwards;
}

body.stancreation-transition-active .stancreation-contact-hero-svg #sc-square{
  animation: scContactSquareOut .35s cubic-bezier(.22,.61,.36,1) forwards;
}

/* KEYFRAMES uniques (pas de conflit avec projets/bio/competences) */
@keyframes scContactLineGrow { to { transform: scaleX(1); } }
@keyframes scContactLineOut  { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@keyframes scContactSquarePop{
  0%   { opacity:0; transform: translateY(.35rem) scale(.7); }
  70%  { opacity:1; transform: translateY(0) scale(1.08); }
  100% { opacity:1; transform: translateY(0) scale(1); }
}

@keyframes scContactSquareOut{
  from { opacity:1; transform: translateY(0) scale(1); }
  to   { opacity:0; transform: translateY(.35rem) scale(.7); }
}