/* Design system du portfolio : la seule source des couleurs, typos, espacements et mouvements.
   ADN : la bannière « Éditorial luxe ». Couleurs = celles du site (rose/violet, noir, blanc). */
:root{
  /* couleurs */
  --bg:#0D0D0D;
  --bg-2:#141414;
  --text:#F5F5F0;
  --muted:#F5F5F0;
  --accent:#A6178C;                 /* magenta */
  --accent-2:#5C1150;               /* magenta sombre, dégradés */
  --accent-text:#DA5CC2;            /* accent éclairci : contraste AA sur fonds sombres */
  --rose:#E879CF;                   /* italiques et survols, comme « histoires » */
  --rose-pale:#FFC6EF;              /* petits italiques des bandeaux */
  --live:#5DD48A;                   /* pastille « disponible » */
  --accent-grad:linear-gradient(135deg,var(--accent-2),var(--accent));
  --accent-soft:rgba(166,23,140,.16);
  --glow:radial-gradient(60% 50% at 85% 20%,rgba(166,23,140,.16),transparent 70%);
  --card:#1E1E1E;
  --line:#2A2A2A;
  --rule:rgba(245,245,240,.16);     /* filets éditoriaux */
  --text-soft:rgba(245,245,240,.75);

  /* typographie */
  --serif:'Bodoni Moda',Georgia,serif;          /* réservé à la bannière d'accueil */
  --display:'Montserrat',sans-serif;
  --body:'Inter',sans-serif;
  --fs-name:clamp(120px,27vw,520px);       /* « Manal. » */
  --fs-title:clamp(36px,4.6vw,76px);       /* titres de section (Montserrat), finissent par un point magenta */
  --fs-project:clamp(24px,2.8vw,44px);     /* noms de projets (Montserrat) */
  --fs-lead:clamp(17px,1.4vw,21px);        /* accroches (Inter) */
  --fs-body:17px;
  --fs-small:15px;
  --fs-label:11px;
  --fs-sheet:clamp(18px,1.7vw,24px);       /* réponses de la fiche « Ce que je recherche » */
  --track-label:.22em;

  /* espacements : échelle fixe */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px; --sp-11:192px;
  --section-y:clamp(96px,12vw,200px);
  --gutter:clamp(20px,3.4vw,52px);          /* marges latérales, identiques à la bannière */
  --maxw:1180px;
  --maxw-wide:1680px;

  /* formes : coupe nette pour les images, pilule pour les boutons */
  --r-0:0;
  --r-pill:999px;

  /* mouvement : deux courbes, trois durées */
  --ease:cubic-bezier(.22,.61,.36,1);       /* ancien easing, encore utilisé par les pages pas refaites */
  --ease-out:cubic-bezier(.16,1,.3,1);      /* révélations */
  --ease-io:cubic-bezier(.76,0,.24,1);      /* lignes et rideaux */
  --dur-micro:.35s;
  --dur-reveal:.75s;
  --dur-line:1s;
  --stagger:.05s;
}