/* Reset CSS de base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu,
    Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  overflow: hidden; /* Empêche le scroll */
  position: relative;
  height: 100vh;
}

/* Variables pour positionner manuellement la photo et descendre le contenu */
:root {
  --photo-top: 20px; /* Ajustez pour déplacer la photo verticalement */
  --photo-left: 80px; /* Ajustez pour déplacer la photo horizontalement */
  --content-top: 200px; /* Ajustez pour descendre textes + liens + logos */
  /* Offsets verticaux réglables individuellement pour les logos */
  --logo-mail-offset: 6px;
  --logo-linkedin-offset: 0px;
  --logo-github-offset: 3px;
  /* Hauteurs minimales pour stabiliser l'agencement quel que soit le texte */
  --name-min-height: 0px;
  --intro-min-height: 50px;
  /* Couleur d'accent (violet agréable) */
  --accent-color: #7b61ff;
}

/* Image de fond */
.background-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/fond.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
  opacity: 0; /* animée à l'apparition */
  transition: opacity 1200ms ease;
}

/* Image centrée devant le fond */
.name-wrap {
  position: relative;
  display: inline-block;
}
.center-hero {
  position: fixed; /* positionnement manuel indépendant du texte */
  left: var(--photo-left);
  top: var(--photo-top);
  transform: translate(0, 0);
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
  opacity: 0;
  transition: opacity 1200ms ease 300ms;
}
.center-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dégradé noir en overlay pour faire un fondu vers le noir */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 1));
  z-index: -1;
}

/* Contenu principal */
.main-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* Alignement à gauche */
  height: 100vh;
  /* Place toujours le contenu sous la photo (150px de haut + 10px marge) */
  padding: calc(var(--photo-top) + 150px + 10px) 50px 50px; /* Descend tout le contenu */
  text-align: left; /* Texte aligné à gauche */
}
/* Zone stable pour les liens + logos, calée sous l'intro française */
.stable-block {
  margin-top: 28px; /* espace sous l'intro */
}

/* Nom et prénom */
.name {
  font-size: 2.4rem;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  margin-bottom: 10px;
  letter-spacing: 2px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 1200ms ease 300ms, transform 1200ms ease 300ms;
  min-height: var(--name-min-height);
}

/* Phrase de rôle */
.role {
  font-size: 1.5rem;
  color: #949494;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
  margin-bottom: 40px;
  font-weight: 300;
}

/* Texte d'introduction */
.intro-text {
  color: #ffffff;
  max-width: 700px;
  line-height: 1.6;
  margin: 16px 0 28px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 1200ms ease 600ms, transform 1200ms ease 600ms;
  min-height: var(--intro-min-height);
}
.intro-text .accent {
  color: var(--accent-color);
  font-weight: 600;
  transition: color 220ms ease;
}
.intro-text a.accent {
  color: #ffffff;
  text-decoration-line: underline;
  text-decoration-color: rgba(255, 255, 255, 0.7);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
  text-decoration-skip-ink: auto;
  transition: text-decoration-color 200ms ease, color 200ms ease;
}
.intro-text a.accent:visited {
  color: #ffffff;
  text-decoration-line: underline;
  text-decoration-color: rgba(255, 255, 255, 0.7);
}
.intro-text a.accent:hover,
.intro-text a.accent:focus {
  text-decoration-color: transparent; /* disparition subtile au survol */
  color: var(--accent-color); /* fondu vers violet */
}
.name .accent {
  color: var(--accent-color);
  transition: color 220ms ease;
}
/* Avatar cercle */
.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 14px 0 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Espace descriptif */
.description-space {
  min-height: 100px;
  margin-bottom: 50px;
  /* Espace réservé pour texte futur */
}

/* Navigation */
.navigation {
  display: flex;
  flex-direction: column;
  gap: 25px;
  align-items: flex-start; /* Alignement à gauche */
}

.nav-link {
  color: #ffffff; /* blanc par défaut */
  text-decoration: none;
  font-size: 1.5rem; /* plus grand pour les liens */
  font-weight: 500;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  transition: all 0.3s ease;
  position: relative;
  padding: 5px 0;
  opacity: 0;
}
.navigation .nav-link:nth-child(1) {
  transition: opacity 1200ms ease 800ms;
}
.navigation .nav-link:nth-child(2) {
  transition: opacity 1200ms ease 950ms;
}
.navigation .nav-link:nth-child(3) {
  transition: opacity 1200ms ease 1100ms;
}
.navigation .nav-link:nth-child(4) {
  transition: opacity 1200ms ease 1250ms;
}

.nav-link {
  transition: color 220ms ease;
}
.nav-link:hover {
  color: var(--accent-color);
}

.nav-link::after {
  display: none;
}

/* Rangée d'icônes sociales sur une seule ligne */
.socials-row {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-top: 0px;
  opacity: 0; /* masqué au départ */
  pointer-events: none; /* non cliquable avant apparition */
  transition: opacity 1200ms ease 1500ms; /* après les liens */
}
.socials-row .logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.socials-row .logo[aria-label="Contact par mail"] .mail-icon {
  transform: translateY(var(--logo-mail-offset));
}
.socials-row .logo[aria-label="LinkedIn"] .social-icon {
  transform: translateY(var(--logo-linkedin-offset));
}
.socials-row .logo[aria-label="GitHub"] .social-icon {
  transform: translateY(var(--logo-github-offset));
}

/* apparition des logos après les liens */
.is-loaded .socials-row {
  opacity: 1;
  pointer-events: auto;
}

/* Media queries pour responsive */
@media (max-width: 768px) {
  body { overflow-y: auto; height: auto; }
  .center-hero {
    position: static !important;   /* revient dans le flux, ne suit pas au scroll */
    margin: 16px auto 12px;
    left: auto; top: auto;
    transform: none;
    width: 130px;
    height: 130px;
    border-width: 4px;
  }
  .main-content {
    padding: 20px 20px 24px;      /* plus d'espace haut inutile puisque la photo est dans le flux */
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    min-height: 100vh;
    gap: 12px;
  }
  /* Espace exact de 2rem entre le texte et les liens (compense le gap mobile) */
  .intro-text { margin-bottom: 0; }
  .stable-block { margin-top: calc(2rem - 12px); }

  .name {
    font-size: 2.2rem;
    letter-spacing: 1px;
  }

  .role {
    font-size: 1.2rem;
    margin-bottom: 30px;
  }

  .description-space {
    min-height: 80px;
    margin-bottom: 40px;
  }

  .nav-link {
    font-size: 1.05rem;
  }
  .mail-icon, .social-icon { transform: none !important; }
}

@media (max-width: 480px) {
  body { overflow-y: auto; height: auto; }
  .center-hero { position: static !important; margin: 14px auto 10px; left: auto; top: auto; transform: none; width: 120px; height: 120px; }
  .main-content { padding: 16px 16px 20px; }

  .name { font-size: 1.9rem; }
  .role { font-size: 1rem; }
  .nav-link { font-size: 1rem; }

  .navigation { gap: 20px; align-items: center; }
  .socials-row { justify-content: center; }
  .mail-icon, .social-icon { transform: none !important; }
}

/* iPhone SE / écrans très étroits: avatar dans le flux pour éviter tout chevauchement */
@media (max-width: 380px) {
  /* Fixe la photo pour qu'elle ne bouge jamais au scroll en mobile étroit */
  .center-hero { position: static !important; margin: 12px auto 10px; left: auto; top: auto; transform: none; }
  /* Laisse la place sous l'image fixe */
  .main-content { padding-top: 12px; gap: 10px; }
  /* Ajuste la marge pour conserver exactement 2rem avec un gap de 10px */
  .intro-text { margin-bottom: 0; }
  .stable-block { margin-top: calc(2rem - 10px); }
}

/* Icône mail dans la nav */
.mail-icon {
  vertical-align: middle;
  transform: translateY(20rem); /* ajuste légèrement vers le bas */
}
.social-icon {
  vertical-align: middle;
}

/* =========================
   Toggle de langue (manip FR/EN)
   ========================= */
   .lang-toggle {
    /* Dimensions générales (inchangées si tu veux) */
    --w: 96px;                 /* largeur piste */
    --h: 36px;                 /* hauteur piste */
    --pad: 4px;
    --thumb-w: 48px;           /* largeur du rectangle mobile */
    --thumb-h: 30px;           /* hauteur du rectangle mobile */
  
    /* >>> Réglages MANUELS des positions du thumb (en pixels) <<< */
    --thumb-left-fr: 0px;      /* position de départ (FR) */
    --thumb-left-en: 44px;     /* position d'arrivée (EN) */
  
    /* Ajustements fins des libellés si besoin */
    --fr-x: 0px;
    --en-x: 0px;
  
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    width: var(--w);
    height: var(--h);
    background: #000;
    border-radius: 999px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0;
    transition: opacity 1200ms ease 300ms;
    border: 3px solid #fff;
  }
  
  .lang-track {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;                 /* centrage propre des labels */
    align-items: center;           /* centre verticalement */
    justify-content: space-between;
    padding: 0 var(--pad);
  }
  
  .lang-seg {
    flex: 0 0 calc(50% - var(--pad));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    z-index: 2;
    user-select: none;
    pointer-events: none;
    line-height: 1;
  }
  .seg-fr { transform: translateX(var(--fr-x)); }
  .seg-en { transform: translateX(var(--en-x)); }
  
  .lang-thumb {
    position: absolute;
    top: 50%;
    left: var(--thumb-left-fr);    /* ← départ MANUEL */
    width: var(--thumb-w);
    height: var(--thumb-h);
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    box-shadow: 0 0 0 2px #fff;
    transition: left 220ms ease;
    pointer-events: none;
    z-index: 1;
  }
  .lang-thumb::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.1);
    transition: background 220ms ease;
  }
  
  /* Arrivée EN MANUELLE */
  .lang-toggle.is-en .lang-thumb { left: var(--thumb-left-en); }
  
  /* Accent langue active (inchangé) */
  .lang-toggle:not(.is-en) .seg-fr { color: var(--accent-color); opacity: 0.95; }
  .lang-toggle:not(.is-en) .seg-en { opacity: 0.7; }
  .lang-toggle.is-en .seg-fr { opacity: 0.7; }
  .lang-toggle.is-en .seg-en { color: var(--accent-color); opacity: 0.95; }
  

/* Accent langue active */
.lang-toggle:not(.is-en) .seg-fr { color: var(--accent-color); opacity: 0.95; }
.lang-toggle:not(.is-en) .seg-en { opacity: 0.7; }
.lang-toggle.is-en .seg-fr { opacity: 0.7; }
.lang-toggle.is-en .seg-en { color: var(--accent-color); opacity: 0.95; }

/* Icônes sociales en bas à gauche, plus grandes et plus transparentes */
.socials-row {
  position: static;
}
.social-icon,
.mail-icon {
  width: 40px;
  height: 40px;
  opacity: 0; /* apparaissent après les liens */
  transition: opacity 1200ms ease 1500ms, filter 200ms ease,
    transform 200ms ease;
}
.socials-row .nav-link {
  padding: 0;
}
.socials-row .nav-link:hover::after {
  width: 0;
}
.socials-row .nav-link:hover .social-icon,
.socials-row .nav-link:hover .mail-icon,
.socials-row .logo:hover .social-icon,
.socials-row .logo:hover .mail-icon {
  opacity: 1;
  filter: none;
}

/* Couleur des logos: gris #949494 par défaut → blanc au survol */
.social-icon {
  fill: #ffffff;
  transition: fill 250ms ease;
}
.mail-icon {
  stroke: #ffffff;
  transition: stroke 250ms ease;
}
.social-icon {
  transition: fill 220ms ease;
}
.mail-icon {
  transition: stroke 220ms ease;
}
.socials-row .nav-link:hover .social-icon,
.socials-row .logo:hover .social-icon {
  fill: var(--accent-color);
}
.socials-row .nav-link:hover .mail-icon,
.socials-row .logo:hover .mail-icon {
  stroke: var(--accent-color);
}

/* Réglage vertical individuel (sans toucher au HTML) */
.mail-icon {
  transform: translateY(var(--logo-mail-offset));
}
.socials-row a[aria-label="LinkedIn"] .social-icon {
  transform: translateY(var(--logo-linkedin-offset));
}
.socials-row a[aria-label="GitHub"] .social-icon {
  transform: translateY(var(--logo-github-offset));
}

/* Modal Mail */
.mail-modal {
  display: none;
}

.mail-modal.is-open {
  display: block;
}

.mail-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.mail-modal__content {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #1e1f22; /* gris foncé agréable */
  color: #fff;
  border-radius: 14px;
  width: min(90vw, 420px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.mail-modal__header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 18px;
  /* pas de séparation */
  position: relative;
}

.mail-modal__title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  text-align: center;
  width: 100%;
  color: var(--accent-color);
  transition: color 200ms ease;
}

.mail-modal__close {
  background: transparent;
  color: #fff;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  position: absolute;
  right: 12px;
  top: 8px;
}

.mail-modal__actions {
  display: grid;
  gap: 10px;
  padding: 14px 18px 18px;
}

.mail-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #111;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  justify-content: center; /* centre l'icône et le texte */
  width: 100%;
  text-align: center;
  font-size: 1.05rem;
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}

.mail-action__icon {
  display: inline-block;
}

.mail-link-btn {
  width: 100%;
  text-align: center;
  background: #0a0a0a;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 1.05rem;
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}

.mail-link-btn:hover,
.mail-action:hover {
  background: #151515;
}
.mail-link-btn:hover {
  color: var(--accent-color);
}
/* Couleurs spécifiques par service */
#open-gmail:hover {
  color: #ea4335;
}
#open-outlook:hover {
  color: #0078d4;
}
.mail-action:hover {
  color: var(--accent-color);
}

/* Toast de confirmation de copie */
.toast {
  position: fixed;
  left: 50%;
  bottom: -80px; /* démarre hors écran */
  transform: translateX(-50%);
  background: #111;
  color: #7b61ff; /* vert */
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 220px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: all 300ms ease;
  z-index: 1000;
}

.toast.toast--show {
  bottom: 24px;
  opacity: 1;
}

/* État visible après charge */
.is-loaded .background-image {
  opacity: 0.2;
}
.is-loaded .center-hero,
.is-loaded .name,
.is-loaded .intro-text,
.is-loaded .navigation .nav-link,
.is-loaded .social-icon,
.is-loaded .mail-icon {
  opacity: 1;
  transform: none;
}
.is-loaded .lang-toggle {
  opacity: 1;
}

/* ==========================
   CV/Resume widget (desktop)
   ========================== */
.cv-widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1500;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 10px 12px 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  backdrop-filter: saturate(1.05) blur(4px);
  opacity: 0;                /* fondu d'apparition comme les logos */
  pointer-events: none;      /* évite les clics avant apparition */
  transition: opacity 1200ms ease 1500ms;
}
.cv-widget__title {
  color: #fff;
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
}
.cv-widget__row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cv-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #fff;
  gap: 6px;
}
.cv-item img {
  width: 48px;
  height: 56px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35));
  transition: transform 160ms ease, filter 160ms ease;
  will-change: transform;
}

.cv-item:hover img,
.cv-item:focus-visible img {
  transform: scale(1.07);
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.4));
}
.cv-label { font-weight: 800; }

@media (max-width: 900px) {
  .cv-widget {
    position: static;
    left: auto; right: auto; bottom: auto;
    transform: none;
    margin: 24px auto 16px;
    display: flex;
    flex-direction: column;        /* Titre au-dessus des icônes */
    align-items: center;           /* Centre horizontalement */
    text-align: center;
    padding: 8px 10px;
    pointer-events: auto;
  }
  .cv-widget__row {
    display: flex;
    gap: 14px;
    justify-content: center;       /* Centre les deux documents */
  }
  .cv-widget__title { margin-bottom: 6px; text-align: center; font-weight: 800; }
}

/* Apparition avec le reste au chargement */
.is-loaded .cv-widget {
  opacity: 1;
  pointer-events: auto;
}

/* (Animations scroll mobile supprimées) */

/* Plus d'espace entre le texte d'intro et les liens en mode téléphone */
@media (max-width: 768px) {
  .intro-text { margin-bottom: 26px !important; }
  .stable-block { margin-top: 32px !important; }
}
@media (max-width: 480px) {
  .intro-text { margin-bottom: 30px !important; }
  .stable-block { margin-top: 36px !important; }
}

/* === Patch final: espace net sous 378px === */
@media (max-width: 378px) {
  /* 1) Pilotage unique par le conteneur */
  :root {
    --mobile-links-spacing-378: 2rem;  /* espace voulu entre texte et liens */
    --mobile-stack-gap-378: 10px;      /* gap vertical du conteneur */
  }
  .main-content {
    gap: var(--mobile-stack-gap-378);
    height: auto;
    min-height: auto;
  }

  /* 2) Fallback si flex-gap non supporté (vieux iOS) */
  .main-content > * { margin: 0 !important; }
  .main-content > * + * { margin-top: var(--mobile-stack-gap-378) !important; }

  /* 3) Empêche les anciens réglages de rétrécir l'espace */
  .intro-text { margin-bottom: 0 !important; }
  .stable-block { margin-top: calc(var(--mobile-links-spacing-378) - var(--mobile-stack-gap-378)) !important; }

  /* 4) Rien ne sort du flux (sécurité anti-chevauchement) */
  .intro-text, .stable-block {
    position: static !important;
    top: auto !important;
    transform: none !important;
  }
  /* override: spacing between intro and .navigation only */
  .stable-block { margin-top: 0 !important; }
  .navigation { margin-top: calc(var(--mobile-links-spacing-378) - var(--mobile-stack-gap-378)) !important; }
}

/* === Final mobile spacing override === */
@media (max-width: 768px) {
  .intro-text { margin-bottom: 5rem !important; }
}
@media (max-width: 378px) {
  .intro-text { margin-bottom: 1rem !important; }
}