/* =========================================================
   contact.css — formulaire de contact (/contact/)
   Posé sur galerie.css : même identité que l'accueil et la galerie (noir, Montserrat / Roboto).
   ========================================================= */

.ct{
    max-width:640px;
    margin:0 auto;
    padding:24px 32px 88px;
}
.ct-title{
    margin:0 0 12px;
    font-family:"Montserrat", system-ui, sans-serif;
    font-weight:800;
    font-size:32px;
    letter-spacing:.02em;
}
.ct-intro,
.ct-alt,
.ct-back{
    margin:0 0 32px;
    color:rgba(255,255,255,.6);
    font-size:15px;
    line-height:1.6;
}
.ct-alt{ margin:32px 0 0; font-size:14px; }
.gx .ct-alt a,
.gx .ct-back a{ color:#fff; border-bottom:1px solid rgba(255,255,255,.3); }
.gx .ct-alt a:hover,
.gx .ct-back a:hover{ border-color:#fff; }

.ct-form{ display:grid; gap:18px; }
.ct-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.ct-field{ display:grid; gap:7px; }
.ct-field span{
    font-size:13px;
    font-weight:500;
    letter-spacing:.03em;
    color:rgba(255,255,255,.8);
}
.ct-field small{ margin-left:6px; font-weight:400; color:rgba(255,255,255,.4); }
.ct-field input,
.ct-field textarea{
    width:100%;
    padding:12px 14px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:8px;
    background:#16181c;
    color:#fff;
    font:inherit;
    font-size:15px;
    line-height:1.5;
    transition:border-color .2s, background .2s;
}
.ct-field textarea{ resize:vertical; min-height:150px; }
.ct-field input:focus,
.ct-field textarea:focus{
    outline:none;
    border-color:rgba(255,255,255,.6);
    background:#1b1e23;
}

.ct-btn{
    justify-self:start;
    padding:13px 30px;
    border:0;
    border-radius:999px;
    background:#fff;
    color:#0b0c0e;
    font-family:"Montserrat", system-ui, sans-serif;
    font-weight:700;
    font-size:14px;
    letter-spacing:.06em;
    cursor:pointer;
    transition:transform .2s, opacity .2s;
}
.ct-btn:hover{ transform:translateY(-1px); opacity:.9; }
.ct-btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* champ piège, invisible pour les visiteurs, rempli par les robots */
.ct-trap{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }

.ct-errors{
    margin:0 0 24px;
    padding:14px 18px 14px 34px;
    border:1px solid rgba(248,113,113,.45);
    border-radius:8px;
    background:rgba(248,113,113,.08);
    color:#fecaca;
    font-size:14px;
    line-height:1.6;
}
.ct-ok{
    margin:0 0 24px;
    padding:16px 18px;
    border:1px solid rgba(134,239,172,.4);
    border-radius:8px;
    background:rgba(134,239,172,.08);
    color:#bbf7d0;
    font-size:15px;
}

@media screen and (max-width:600px){
    .ct{ padding:8px 16px 64px; }
    .ct-title{ font-size:26px; }
    .ct-row{ grid-template-columns:1fr; }
}