/* =====================================================================
   Massinissa Belkassam — page personnelle
   Feuille de style unique · sombre & premium · sans dépendance.
   Tout est piloté par variables CSS dans :root pour ajustement facile.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Variables — palette, typo, rythme
   --------------------------------------------------------------------- */
:root {
  /* Fonds */
  --bg:            #0e0e10;   /* fond principal */
  --bg-alt:        #171719;   /* sections alternées */

  /* Textes */
  --text:          #f5f3ee;   /* texte principal */
  --text-soft:     #9b988f;   /* texte secondaire */

  /* Accent doré chaud (par défaut) */
  --accent:        #e6b450;
  /* Alternatives à tester — décommenter UNE ligne pour remplacer :
     --accent: #c87f4a;   (cuivre)
     --accent: #7a8b6f;   (vert sauge profond) */

  /* Bordures discrètes */
  --line:          rgba(255, 255, 255, 0.08);
  --line-strong:   rgba(255, 255, 255, 0.16);

  /* Voile du hero (dégradé haut → bas) */
  --hero-veil-top:    rgba(10, 10, 12, 0.55);
  --hero-veil-bottom: rgba(10, 10, 12, 0.78);

  /* Typographie */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Rythme */
  --maxw:        1120px;
  --maxw-narrow:  720px;
  --gutter:      clamp(1.25rem, 5vw, 3rem);
  --section-y:   clamp(4.5rem, 11vw, 9rem);

  /* Transition discrète unique */
  --t: 220ms ease;
}

/* ---------------------------------------------------------------------
   2. Reset léger & base
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Défilement « full-page » : chaque section accroche le haut de l'écran. */
  scroll-snap-type: y mandatory;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.6vw + 0.9rem, 1.0625rem);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--accent); text-decoration: none; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  margin: 0;
}

/* Conteneurs */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--maxw-narrow); }

/* Chaque grande zone est un « panneau » plein écran qui accroche au scroll.
   min-height (et non height) : si le contenu dépasse la hauteur d'écran,
   le panneau grandit et reste entièrement lisible (pas de rognage). */
.hero,
.section,
.footer {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.section {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* marge verticale généreuse, laisse la place à la flèche en bas */
  padding-block: clamp(5rem, 12vh, 8rem);
}
.section--apropos    { background: var(--bg); }
.section--interets   { background: var(--bg); }
.section--massinissa { background: var(--bg-alt); }

.section__title {
  font-size: clamp(1.5rem, 1rem + 1.8vw, 2.25rem);
  color: var(--text);
  margin-bottom: 1.75rem;
  letter-spacing: -0.01em;
}
.section__title--center { text-align: center; }

/* Accessibilité : focus visible homogène */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Lien d'évitement */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: #0e0e10;
  padding: 0.6rem 1rem;
  font-weight: 600;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* ---------------------------------------------------------------------
   3. Hero
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;            /* viewport mobile fiable */
  display: flex;
  flex-direction: column;
  padding-inline: var(--gutter);
  color: var(--text);
  isolation: isolate;
  overflow: hidden;

  /* Fond du hero en deux couches superposées :
       1) le voile sombre dégradé (toujours présent, pour la lisibilité) ;
       2) la photo, injectée par le JS via la variable --hero-photo
          (photo tirée au hasard dans img/hero/ à chaque chargement).
     Si --hero-photo n'est pas défini (aucune photo / JS off), on retombe
     sur un dégradé de secours élégant. Voir img/README. */
  background-image:
    linear-gradient(var(--hero-veil-top), var(--hero-veil-bottom)),
    var(--hero-photo, radial-gradient(120% 120% at 70% 20%, #26262b 0%, #141417 55%, #0e0e10 100%));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Barre supérieure */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: clamp(1.25rem, 3vw, 2rem);
}
.brand {
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.5vw + 0.95rem, 1.2rem);
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.01em;
}

/* Sélecteur de langue */
.lang-switch { display: flex; gap: 0.15rem; }
.lang-btn {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  padding: 0.35rem 0.5rem;
  transition: color var(--t);
}
.lang-btn:hover { color: var(--text); }
.lang-btn[aria-current="true"] { color: var(--accent); }

/* Contenu central */
.hero__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 22ch;
  padding-block: 2rem;
}
.eyebrow {
  margin: 0 0 1rem;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hero__title {
  font-size: clamp(2.6rem, 5.5vw + 1rem, 5.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  max-width: 18ch;
}
.hero__subtitle {
  margin: 0;
  color: var(--text-soft);
  font-size: clamp(1.05rem, 0.5vw + 1rem, 1.35rem);
  max-width: 34ch;
}

/* Indicateur de scroll — présent en bas de chaque section, centré */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(1.1rem, 3vh, 2rem);
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  color: var(--text-soft);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(14, 14, 16, 0.35);
  transition: color var(--t), border-color var(--t);
  animation: bob 2.4s ease-in-out infinite;
  z-index: 5;
}
.scroll-hint:hover { color: var(--text); border-color: var(--line-strong); }
.scroll-hint svg {
  width: 1.1rem; height: 1.1rem;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Variante « retour en haut » : on retourne le chevron */
.scroll-hint--up svg { transform: rotate(180deg); }

/* L'animation conserve le centrage horizontal (translateX -50%) */
@keyframes bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(4px); }
}

/* ---------------------------------------------------------------------
   4. À propos
   --------------------------------------------------------------------- */
.lead {
  font-size: clamp(1.15rem, 0.6vw + 1.05rem, 1.45rem);
  line-height: 1.65;
  color: var(--text);
  margin: 0;
}
.lead a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity var(--t);
}
.lead a:hover { opacity: 0.8; }

/* ---------------------------------------------------------------------
   5. Centres d'intérêt — grille de cartes
   --------------------------------------------------------------------- */
.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);          /* lignes fines entre cartes */
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.card {
  background: var(--bg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  transition: background var(--t);
}
.card:hover { background: var(--bg-alt); }
.card__icon {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  color: var(--accent);
}
.card__icon svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.card__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--text);
}
.card__text {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.98rem;
  line-height: 1.5;
}

/* Note sous la grille */
.interets__note {
  margin: clamp(1.75rem, 4vw, 2.5rem) auto 0;
  max-width: 60ch;
  text-align: center;
  color: var(--text-soft);
  font-size: clamp(1rem, 0.4vw + 0.95rem, 1.1rem);
  line-height: 1.65;
}

/* ---------------------------------------------------------------------
   6. Massinissa — section éditoriale
   --------------------------------------------------------------------- */
.massinissa { text-align: left; }
.massinissa__title {
  font-size: clamp(3rem, 9vw, 7rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 1.5rem;
  line-height: 0.95;
}
.massinissa__text {
  font-size: clamp(1.1rem, 0.5vw + 1.05rem, 1.4rem);
  line-height: 1.7;
  color: var(--text);
  max-width: 56ch;
  margin: 0 0 1.75rem;
}

/* Lien fléché élégant (Wikipédia) */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--t);
}
.link-arrow:hover { border-color: var(--accent); }
.link-arrow svg {
  width: 1rem; height: 1rem;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t);
}
.link-arrow:hover svg { transform: translate(2px, -2px); }

/* ---------------------------------------------------------------------
   7. Liens / pied de page
   --------------------------------------------------------------------- */
.footer {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding-block: clamp(5rem, 12vh, 8rem);
}
.links {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1rem;
}
.links a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-soft);
  font-weight: 500;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: color var(--t), border-color var(--t), background var(--t);
}
.links a:hover {
  color: var(--text);
  border-color: var(--line-strong);
  background: var(--bg-alt);
}
.links svg {
  width: 1.15rem; height: 1.15rem;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
/* LinkedIn : pictogramme plein (pas en trait) */
.links a[aria-label="LinkedIn"] svg { fill: currentColor; stroke: none; }

.copyright {
  margin: 0;
  text-align: center;
  color: var(--text-soft);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

/* Leurre anti-spam inséré dans l'adresse e-mail affichée : invisible à
   l'écran, ignoré au copier-coller et par les lecteurs d'écran, mais
   présent dans le DOM pour polluer toute extraction automatique. */
.email-text .nospam { display: none; }

/* ---------------------------------------------------------------------
   8. Responsive
   --------------------------------------------------------------------- */
@media (max-width: 820px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .grid { grid-template-columns: 1fr; }
  .hero__inner { max-width: none; }
}

/* Sur petits écrans ou écrans courts (mobiles, contenu plus haut que l'écran),
   on relâche l'accroche obligatoire pour garder un défilement naturel et tout
   le contenu accessible. Les flèches restent fonctionnelles (ancres). */
@media (max-width: 600px), (max-height: 640px) {
  html { scroll-snap-type: none; }
}

/* ---------------------------------------------------------------------
   9. Préférence de mouvement réduit
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}