/* ============================================================
   PROFIL - fiche personnelle (photo pleine hauteur à droite)
   Chargé uniquement sur quentin-renaud.html.
   ============================================================ */

.profil-page{
  position:relative;
  /* la colonne de droite est réservée à la photo */
  padding-right:calc(38% + 4rem);
}

/* ---------- Photo, calée en haut à droite ---------- */
.profil-photo{
  position:absolute;top:0;right:0;
  width:38%;height:100%;max-height:1000px;
  overflow:hidden;
}
.profil-photo img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 18%;
}
/* léger fondu vers le fond, pour éviter une coupe trop nette en bas */
.profil-photo::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:22%;
  background:linear-gradient(to bottom, transparent, var(--slate-deep));
  pointer-events:none;
}

/* ---------- En-tête ---------- */
.profil-label{
  font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;font-family:var(--blair);font-weight:300;
  color:#fff;margin-bottom:1.4rem;
}
.profil-page h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.4rem, 5vw, 4rem);line-height:1.05;
  color:var(--teal-light);
  margin-bottom:4.5rem;
}

/* ---------- Deux colonnes : latérale + contenu ---------- */
.profil-grid{
  display:grid;grid-template-columns:250px minmax(0,1fr);
  gap:3.5rem;align-items:start;
}
.profil-side{position:sticky;top:8.5rem;}

/* Fiche contact téléchargeable */
.vcard{
  display:inline-flex;flex-direction:column;gap:.7rem;
  margin:3rem 0 2.5rem;
}
.vcard__icon{
  display:flex;align-items:center;justify-content:center;
  width:54px;height:54px;
  border:1px solid rgba(255,255,255,.5);
  color:#fff;
  transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.vcard__icon svg{width:24px;height:24px;}
.vcard:hover .vcard__icon{
  background:var(--teal-light);border-color:var(--teal-light);color:#20283a;
}
.vcard__txt{
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--blair);font-weight:300;
  color:rgba(255,255,255,.7);
  transition:color .25s ease;
}
.vcard:hover .vcard__txt{color:var(--teal-light);}

/* Blocs Contact / Bureau */
.profil-block{margin-bottom:2.5rem;}
.profil-block h2{
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-family:var(--blair);font-weight:300;
  color:#fff;margin-bottom:1rem;
}
/* Seuls les liens sont en flex (icône + libellé). Les lignes d'adresse
   restent en flux normal, sinon un <sup> deviendrait un élément flex. */
.profil-block a{
  display:flex;align-items:center;gap:.7rem;
  font-size:.95rem;font-weight:300;line-height:1.9;
  color:var(--teal-light);
}
.profil-block span{
  display:block;
  font-size:.95rem;font-weight:300;line-height:1.9;
  color:rgba(255,255,255,.7);
}
.profil-block a{transition:opacity .25s ease;}
.profil-block a:hover{opacity:.65;}
.profil-block svg{width:16px;height:16px;flex-shrink:0;}

/* ---------- Contenu ---------- */
.profil-main section{margin-bottom:4rem;scroll-margin-top:8rem;}
.profil-main section:last-child{margin-bottom:0;}
.profil-sub{
  font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;font-family:var(--blair);font-weight:300;
  color:#fff;margin-bottom:1.4rem;
}
.profil-bio{margin-top:2.5rem;}
.profil-bio p{
  font-size:1rem;font-weight:300;line-height:1.9;color:rgba(255,255,255,.75);
}
.profil-bio p + p{margin-top:1.2rem;}
.profil-bio strong{color:#fff;font-weight:400;}
.profil-bio em{font-style:italic;color:var(--teal-light);}

.profil-links{display:flex;flex-direction:column;}
.profil-links a{
  padding:1.1rem 0;border-bottom:1px solid rgba(255,255,255,.12);
  font-size:.98rem;font-weight:300;color:rgba(255,255,255,.8);
  transition:padding .3s var(--ease-out), color .25s ease;
}
.profil-links a:first-child{border-top:1px solid rgba(255,255,255,.12);}
.profil-links a:hover{padding-left:.7rem;color:var(--teal-light);}
.profil-links .date{
  display:block;margin-bottom:.3rem;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--blair);font-weight:300;
  color:rgba(255,255,255,.45);
}

.profil-main .hero-cta{animation:none;opacity:1;margin-top:1.5rem;}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .profil-page{padding-right:calc(34% + 2rem);}
  .profil-photo{width:34%;}
  .profil-grid{grid-template-columns:210px minmax(0,1fr);gap:2.5rem;}
}
@media (max-width:900px){
  .profil-page{padding-right:1.4rem;}
  /* la photo repasse dans le flux, en tête de page */
  .profil-photo{
    position:relative;width:100%;max-width:320px;height:auto;max-height:none;
    aspect-ratio:3/4;margin-bottom:2.5rem;
  }
  .profil-photo::after{display:none;}
  .profil-page h1{margin-bottom:2.5rem;}
  .profil-grid{grid-template-columns:1fr;gap:2.5rem;}
  .profil-side{position:static;}
  .vcard{margin:2rem 0;}
}