/* =========================================================
   SOCIAL ICONS (INLINE SVG)
========================================================= */
.footer-socials {
  display: flex;
  gap: 30px;
  margin-top: 8px;
  color: #FFFDF9;
}

.social-link {
  width: 35px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  transition: color 0.25s ease;
}

.social-icon {
  width: 35px;
  height: 35px;
  display: block;
  fill: currentColor;
  transition: transform 0.25s ease;
}

.social-link:hover {
  color: #E7483F;
}

.social-link:hover .social-icon {
  transform: translateY(-2px);
}


/* =========================================================
   A PROPOS — CONTENU UNIQUEMENT (sans header/footer)
   Scope: .about-page
========================================================= */

/* ====== Safe base (contenu) ====== */
.about-page{
  --container: 1440px;
  --pad-x: 60px;
  --pad-x-m: 16px;

  --gap: 0px;
  --col-left: 600px;
  --col-right: 709px;

  --title-size: 90px;
}

.about-page img{
  display:block;
  max-width:100%;
  height:auto;
}

/* IMPORTANT: évite le “desktop miniaturisé” si un parent force une largeur */
.about-page{
  max-width: 100%;
  overflow-x: hidden;
}

/* =========================================================
   HERO
========================================================= */

.about-hero{
  padding: 140px 0 0;
}

.about-grid{
  display: grid;
  grid-template-columns: var(--col-left) var(--col-right);
  column-gap: var(--gap);
  align-items: start;
}

/* Titre */
.about-title{
  grid-column: 1 / 2;
  margin: 0 0 28px 0;
  font-size: var(--title-size);
  line-height: 0.92;
  letter-spacing: -0.03em;
  font-weight: 700;
}

/* Intro (chevauche l’image en desktop) */
.about-intro{
  grid-column: 1 / 2;

  width: 420px;
  max-width: 100%;

  font-size: 12px;
  line-height: 1.55;
  letter-spacing: 0.01em;

  position: relative;
  z-index: 5;

  margin-right: -260px; /* chevauchement */
  background: #FFFDF9;
  padding: 12px 12px;
  backdrop-filter: blur(6px);
}

.about-intro p + p{ margin-top: 12px; }

/* Image */
.about-portrait{
  grid-column: 2 / 3;

  width: 100%;
  max-width: var(--col-right);
  height: 580px;

  background: #FFFDF9;
  overflow: hidden;
}

.about-portrait img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   CV
========================================================= */

.about-cv{
  padding: 70px 0 100px;
}

.about-cv-grid{
  display: grid;
  grid-template-columns: var(--col-left) var(--col-right);
  column-gap: var(--gap);
  align-items: start;
}

.about-spacer{
  grid-column: 1 / 2; /* colonne vide */
}

.about-cv-content{
  grid-column: 2 / 3;
  width: 100%;
  max-width: var(--col-right);
}

.cv-block + .cv-block{ margin-top: 18px; }

.cv-title{
  margin: 0 0 8px 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.95;
}

.cv-list{
  margin: 0;
  padding-left: 18px;
  list-style: disc;

  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  opacity: 0.9;
}

.cv-list li{ margin-bottom: 6px; }

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1024px){
  .about-page{
    --pad-x: 24px;
    --gap: 28px;
  }

  /* si tu utilises frame-1440 dans le contenu, on adapte le padding ici */
  .about-page .frame-1440{
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
  }

  .about-title{
    font-size: clamp(48px, 7vw, 78px);
  }

  .about-portrait{
    height: 520px;
  }
}

@media (max-width: 900px){

  /* padding mobile du contenu */
  .about-page .frame-1440{
    padding-left: var(--pad-x-m);
    padding-right: var(--pad-x-m);
  }

  .about-hero{ padding: 64px 0 0; }

  /* HERO en 1 colonne */
  .about-grid{
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 20px;
  }

  .about-title{
    grid-column: 1 / -1;
    margin: 0;
    font-size: clamp(36px, 10vw, 56px);
    line-height: 1.05;
  }

  .about-intro{
    grid-column: 1 / -1;
    width: 100%;
    margin-right: 0;          /* stop chevauchement */
    background: transparent;  /* plus lisible */
    padding: 0;
    backdrop-filter: none;
  }

  .about-portrait{
    grid-column: 1 / -1;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;    /* mets 1/1 si tu veux plus carré */
  }

  /* CV en 1 colonne */
  .about-cv{ padding: 48px 0 80px; }

  .about-cv-grid{
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 18px;
  }

  .about-spacer{ display: none; }

  .about-cv-content{
    grid-column: 1 / -1;
    max-width: 100%;
  }
}

@media (max-width: 480px){
  .about-title{ font-size: 34px; }
}

/* =========================================================
   ALIGNEMENT CONTENU avec header/footer
   (à coller tout en bas de apropos.css)
========================================================= */

/* ton container contenu doit matcher le container du header/footer */
.about-page .frame-1440{
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 60px;
  padding-right: 60px;
}

/* en mobile : mêmes marges que le reste du site */
@media (max-width: 900px){
  .about-page .frame-1440{
    padding-left: 16px;
    padding-right: 16px;
  }
}