/* ==========================================================
   PORTFOLIO THELMA TSIKIFY — STYLES GÉNÉRAUX
   Les styles de chaque section seront ajoutés à l'étape 2,
   dans css/components/.
   ========================================================== */

/* ==========================================================
   1. VARIABLES (valeurs relevées dans Figma)
   ========================================================== */

:root {
  /* Couleurs */
  --vert-olive: #38471f;      /* fond du Hero, titre Compétences, bouton « En savoir plus » */
  --vert-mousse: #485631;     /* fondus verts, bouton « voir le projet » vert */
  --creme: #fff9f0;           /* fonds À propos / Pause / Contact, textes clairs */
  --rose: #fecad6;            /* fond Compétences, panneau projet, bouton rose */
  --marron: #2f1c0d;          /* titre « Me contacter », panneau projet */
  --gris-bouton: #d9d9d9;     /* boutons « Télécharger mon CV » et « voir le site » */
  --noir: #000000;

  /* Typographies
     Police script : Aston Script Pro Bold (« T » du logo, « Thelma », lettrines À et M) */
  --police-script: "Aston Script Pro", cursive;
  /* Taille des majuscules script par rapport au texte qui les entoure */
  --police-script-echelle: 0.9;
  /* Même principe pour les grandes lettrines des titres (A, M) */
  --lettrine-echelle: 1.2;
  --police-capitales: "Arsenal SC", serif;
  --police-navigation: "Proza Libre", sans-serif;
  --police-texte: "Inter", sans-serif;
  --police-titre-gras: "Erica One", sans-serif;
  --police-serif: "Inria Serif", serif;
  --police-mono: "Intel One Mono", monospace;

  /* Largeur de référence de la maquette Figma (en pixels) */
  --largeur-maquette: 1440;
  /* Au-delà de cette largeur d'écran, la composition ne grandit plus : elle est centrée */
  --largeur-max: 1200px;
}

/* ==========================================================
   2. BASE
   ========================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--creme);
  color: var(--noir);
  font-family: var(--police-texte);
  /* Inter garde la même forme quelle que soit la taille, comme dans Figma */
  font-optical-sizing: none;
}

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

/* Texte lisible uniquement par les lecteurs d'écran */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================
   3. PLACEMENT FIDÈLE À FIGMA
   Chaque section de la maquette mesure 1440 px de large dans Figma.
   --u vaut « 1 pixel Figma » : la largeur de la section divisée par 1440.
   Ainsi, toute la composition s'agrandit ou rétrécit avec l'écran
   en gardant exactement les proportions de la maquette.

   Utilisation dans le HTML, avec les coordonnées lues dans Figma :
   <img class="figma" style="--x: 835; --y: 167; --w: 574; --h: 772;">

   Sur les grands écrans, --u ne dépasse pas --largeur-max / 1440 :
   la composition garde sa taille et se centre (--marge de chaque côté),
   tandis que les fonds de section continuent sur toute la largeur.
   Chaque section indique sa hauteur Figma dans --hauteur.
   ========================================================== */

.section-figma {
  position: relative;
  overflow: hidden;
  container-type: inline-size;   /* rend 100cqw = largeur de la section */
  --u: calc(min(100cqw, var(--largeur-max)) / 1440);
  --marge: calc((100cqw - 1440 * var(--u)) / 2);
  /* aspect-ratio suit la largeur ; au-delà de --largeur-max, la hauteur s'arrête.
     min-width empêche aspect-ratio de rétrécir aussi la largeur de la section. */
  max-height: calc(var(--hauteur) * var(--largeur-max) / 1440);
  min-width: 100%;
}

.figma {
  position: absolute;
  left: calc(var(--marge) + var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
}

/* Hauteur imposée seulement quand --h est renseigné */
.figma[style*="--h"] {
  height: calc(var(--h) * var(--u));
}

/* Les visiteurs qui ont demandé moins d'animations dans leur système
   ne voient aucun mouvement automatique. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}