/* =====================================================================
   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-dot / .quote-card : bloc disponibilité et citation

   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 : meme grammaire que .quote-card (aplat + 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 h3{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);}

.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);}

.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 */
}

/* Citation : aplat rouge plein, texte blanc cassé (AA), bloc pivoté */
.quote-card{
  background:var(--red);
  border:3px solid var(--border);
  border-radius:var(--radius-lg);
  padding:26px;
  font-style:italic;
  color:var(--text-primary);
  font-size:17px;line-height:1.5;
  transform:rotate(-1.6deg);
  box-shadow:9px 9px 0 var(--ink);
  transition:transform .15s var(--ease-snap);
}
.quote-card:hover{transform:rotate(0);}

.response-time strong{color:var(--red);font-weight:700;}

/* ---------- 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,
  .quote-card{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;
  }
}