/* =====================================================================
   PAGE CONTACT — contact.html
   ---------------------------------------------------------------------
     .contact-grid    : deux colonnes (appel a l'action a gauche, infos a droite)
     .contact-cta     : le bloc email principal, aplat rouge et ombre dure
     .contact-side    : la colonne de droite
     .connect-item    : les liens Email / LinkedIn / GitHub, avec le
                        balayage rouge qui entre au survol
     .availability    : la ligne de disponibilité et sa pastille verte

   ATTENTION : .connect-item a besoin de overflow:hidden pour découper
   son balayage (::after), qui est garé hors-cadre a gauche. Sans lui,
   les bandes rouges débordent sur la colonne voisine.

   NOTE : le site est statique, sans serveur pour traiter un envoi. Plutot
   qu'un formulaire mailto qui echoue silencieusement chez les visiteurs
   sur webmail, on affiche l'adresse en clair et on assume le lien direct.
   ===================================================================== */

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:8px;align-items:start;}

/* Bloc principal : filet rouge épais à gauche + ombre dure */
.contact-cta{
  background:var(--surface-alt);
  border:3px solid var(--border);
  border-left:9px solid var(--red);
  border-radius:var(--radius-lg);
  padding:34px;
  box-shadow:11px 11px 0 var(--red);
  transform:rotate(-.7deg);
  transition:transform .15s var(--ease-snap);
}
.contact-cta:hover{transform:rotate(0);}
.contact-cta h2{font-size:32px;margin-bottom:14px;}
.contact-cta p{
  color:var(--text-secondary);
  margin-bottom:26px;
  max-width:46ch;
}
/* L'adresse peut deborder sur petit ecran : on autorise la coupure */
.contact-cta .btn{
  max-width:100%;
  word-break:break-word;
  text-transform:none;
  letter-spacing:.02em;
}

.contact-side{display:flex;flex-direction:column;gap:28px;}
.contact-side .card{transform:rotate(.9deg);}
.contact-side .card:nth-child(even){transform:rotate(-1.1deg);}
.contact-side .card h2{margin-bottom:4px;}

.connect-list{display:flex;flex-direction:column;gap:14px;margin-top:20px;}
.connect-item{
  position:relative;
  isolation:isolate;
  overflow:hidden;                    /* decoupe le balayage hors-cadre */
  display:flex;align-items:center;gap:16px;
  background:var(--surface-alt);
  border-left:7px solid var(--red);   /* accent rouge en aplat franc */
  border-radius:var(--radius-md);
  padding:14px 16px;
  transition:transform .13s var(--ease-snap), color .13s var(--ease-snap);
}
.connect-item::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--red);
  clip-path:polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  transform:translateX(-103%);
  transition:transform .16s var(--ease-hard);
}
.connect-item:hover{transform:translateX(6px);}
.connect-item:hover::after{transform:translateX(0);}
.connect-item .card-icon{width:36px;height:36px;border-radius:0;transform:rotate(-4deg);}
.connect-item .label{
  font-size:12px;color:var(--text-faint);
  text-transform:uppercase;letter-spacing:.09em;
}
.connect-item:hover .label{color:var(--text-primary);}
.connect-item .value{font-size:15px;font-weight:700;color:var(--text-primary);}

.contact-side .availability{margin-top:12px;color:var(--text-secondary);}
.availability-dot{
  width:12px;height:12px;border-radius:50%;
  background:var(--green);
  display:inline-block;margin-right:10px;
  box-shadow:0 0 0 3px rgba(37,224,122,.22);   /* halo net, sans flou */
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  /* La colonne d'infos passe sous le bloc email */
  .contact-grid{grid-template-columns:1fr;}
}
@media (max-width: 860px){
  .contact-side .card,
  .contact-cta{transform:rotate(0);}
  .contact-cta{padding:26px;box-shadow:8px 8px 0 var(--red);}
  /* L'adresse email est longue : sur mobile le bouton prend toute la
     largeur et reduit son texte, sinon il deborde de la carte. */
  .contact-cta .btn{
    width:100%;
    padding:15px 22px;
    font-size:15px;
    letter-spacing:0;
  }
}