/* ==========================================================================
   Mise en page — mobile d'abord, puis tablette (≥768px) et laptop (≥1024px).
   Valeurs reprises des maquettes Figma « mobile » et « laptop ».
   ========================================================================== */

/* Largeur maximale sur très grands écrans : profil et page projet centrés.
   Les grilles de l'accueil occupent toute la largeur, comme Pinterest (marges de 16px). */
.profile,
.page-project main {
  max-width: 1440px;
  margin-inline: auto;
}

/* ---------- Hero / profil ---------- */
.profile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-m);
  padding: var(--sp-m) 16px var(--sp-l);
}

.profile__actions {
  order: -1;            /* mobile : langue et icônes passent au-dessus */
  align-self: flex-end;
}

.profile__identity {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);   /* 8px sur mobile (choix de Louise) */
}

.profile__photo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.profile__titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile__name {
  font: var(--text-name);
  letter-spacing: var(--text-name-ls);
}

.profile__fullname { display: block; } /* retour à la ligne avant le nom complet */

.profile__role {
  font: var(--text-role);
  letter-spacing: var(--text-role-ls);
}

/* Étiquettes du profil : infos clés en un coup d'œil, grises, sans effet au survol (choix de Louise, 01/11/2026) */
.profile__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.profile__tags li {
  padding: 8px 12px;
  border-radius: 12px;    /* comme les étiquettes des pages projet */
  background: var(--color-placeholder);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.profile__bio {
  font: var(--text-body);
  line-height: 1.6;       /* même respiration que les textes des projets (choix de Louise, 26/10/2026) */
}

/* ---------- Zone onglets + contenu (accueil) ---------- */
.page-home main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-m);
  padding: var(--sp-2xs) 8px var(--sp-m);   /* 8px du bord sur mobile, comme la maquette */
}

.panel { width: 100%; }
.panel:focus-visible { outline-offset: 8px; }

/* Dès 3 colonnes de 220px, marges de 16px comme Pinterest */
@media (min-width: 724px) {
  .page-home main { padding-inline: 16px; }
}

/* ---------- Tablette ---------- */
@media (min-width: 768px) {
  .profile {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 64px 32px 36px;
  }
  .profile__actions { order: 0; align-self: flex-start; }
  .profile__identity { max-width: 560px; }   /* 415px dans la maquette ; élargi pour un bloc moins haut (choix de Louise, 31/10/2026) */
  .profile__head { gap: 22px; }
  .profile__photo { width: 111px; height: 111px; }

  .page-home main { padding: var(--sp-m) 16px; gap: var(--sp-l); }
}

/* ---------- Laptop ---------- */
@media (min-width: 1024px) {
  .profile { padding: 96px 32px 36px; }   /* même marge que l'en-tête des pages projet : les icônes ne bougent plus (choix de Louise, 01/11/2026) */
}