/* ==========================================================================
   CONTACT
   Fenêtre « messagerie » légèrement inclinée : lignes blanches pour le mail
   et GitHub, formulaire sombre en dessous.
   Même apparence qu'avant ; seuls les espacements s'adaptent à la hauteur
   de la fenêtre pour que l'écran ne défile pas.
   ========================================================================== */

#contact::before{background:
  repeating-linear-gradient(0deg,var(--line-faint) 0 1px,transparent 1px 30px),
  repeating-linear-gradient(90deg,var(--line-faint) 0 1px,transparent 1px 30px),
  linear-gradient(100deg,var(--veil) 0 58%,var(--veil-soft) 58.2% 100%)}

.ct-panel{flex:none;display:grid;gap:clamp(.5rem,1.2vh,.8rem);width:100%;max-width:48rem;transform:rotate(-1.2deg);transform-origin:0 0}
.ct-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;padding:clamp(.5rem,1.2vh,.75rem) 1rem;background:var(--paper);color:var(--ink);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);animation:rowIn .36s var(--ease-out) both;animation-delay:calc(var(--i) * 60ms)}
.ct-tag{font:italic 900 .82rem/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--paper);background:var(--blade);
  padding:.42rem .85rem;clip-path:polygon(10% 0,100% 0,90% 100%,0 100%)}
.ct-row + .ct-row .ct-tag{background:var(--ink)}
.ct-val{min-width:0;overflow-wrap:anywhere;font:600 1.06rem/1.3 var(--f-body);color:var(--ink);text-decoration:none;user-select:all}
a.ct-val{user-select:auto}
a.ct-val:hover{text-decoration:underline}
.ct-copy{padding:.5rem .95rem;border:0;cursor:pointer;background:var(--ink);color:var(--paper);font:italic 800 .85rem/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase}

.ct-form{display:grid;gap:.35rem;padding:clamp(14px,2.6vh,34px) clamp(18px,3vw,34px);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));animation:pdIn .4s .12s var(--ease-out) both}
.ct-form label{margin-top:clamp(.2rem,.9vh,.55rem);font:italic 800 .85rem/1.2 var(--f-display);letter-spacing:.15em;text-transform:uppercase;color:var(--foam)}
.ct-form label:first-child{margin-top:0}
.ct-form input,.ct-form textarea{width:100%;padding:clamp(.5rem,1.1vh,.7rem) .85rem;border:0;border-bottom:2px solid var(--line);border-radius:0;
  background:var(--field);color:var(--paper);font:500 1rem/1.4 var(--f-body)}
.ct-form textarea{height:clamp(3.4rem,13vh,7.5rem);resize:none}
.ct-form input::placeholder,.ct-form textarea::placeholder{color:var(--paper);opacity:.45}
.ct-form input:focus-visible,.ct-form textarea:focus-visible{outline:2px solid var(--foam);outline-offset:0;border-bottom-color:var(--foam)}
.ct-send{justify-self:start;margin-top:clamp(.4rem,1.4vh,1rem)}
.ct-status{margin:.2rem 0 0;min-height:1.4em;font:500 .93rem/1.5 var(--f-body);color:var(--foam)}

@media (max-width:640px){
  .ct-panel{transform:none}
  .ct-row{grid-template-columns:minmax(0,1fr) auto;gap:.4rem .8rem}
  .ct-row .ct-tag{grid-column:1/-1;justify-self:start}
  .ct-row a.ct-val{grid-column:1/-1}
  .ct-val{font-size:.98rem}
}
@media (max-height:700px){
  .ct-form textarea{height:3.2rem}
  .ct-status{min-height:0}
  .ct-row{padding-block:.4rem}
}