/* ==========================================================================
   ARCHILOGI — DESIGN TOKENS V4  |  Source : maquettes Camille Libeyre (Adobe XD)
   Mise à jour : 2026-04-15
   ========================================================================== */

/* Outfit : géométrique, single-story, closest free alternative to Avenir */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap');

:root {

  /* -----------------------------------------------------------------------
     COULEURS — palette extraite des specs XD
  ----------------------------------------------------------------------- */

  /* Brique (couleur principale) */
  --v4-brick:          #AC4320;
  --v4-brick-dark:     #9E5336;   /* badge, accents secondaires */
  --v4-brick-ghost:    rgba(172, 67, 32, 0.10); /* hover léger */

  /* Texte */
  --v4-text:           #333538;   /* titres, corps principal */
  --v4-text-light:     #707070;   /* sous-titres, labels secondaires */
  --v4-text-placeholder: #949495; /* placeholders inputs */
  --v4-text-on-brick:  #FBF6F4;   /* texte sur fond brique */

  /* Fonds */
  --v4-bg-page:        #F7F6F7;   /* fond global de page */
  --v4-bg-card-active: #FBF6F4;   /* carte sélectionnée (chaud) */
  --v4-bg-card:        #FEFEFE;   /* cartes, modal, inputs */
  --v4-bg-icon-circle: #F5F5F5;   /* cercle fond icône */

  /* Bordures */
  --v4-border-active:  #AC4320;   /* bordure carte/état actif */
  --v4-border-card:    #E3E1E1;   /* bordure inputs et cartes inactives */
  --v4-border-btn:     #707070;   /* bordure bouton inactif */
  --v4-border-modal:   #F5F5F5;   /* bordure modale */

  /* Statuts */
  --v4-green:          #4CAF50;   /* badge "EN COURS" */
  --v4-green-dark:     #388E3C;

  /* -----------------------------------------------------------------------
     TYPOGRAPHIE
     Avenir n'est pas disponible gratuitement en web font.
     Nunito (Google Fonts) est le fallback choisi : géométrique, humaniste,
     poids 900 proche d'Avenir Black/Heavy.
  ----------------------------------------------------------------------- */

  --v4-font: 'Outfit', system-ui, -apple-system, Arial, sans-serif;

  /* Tailles extraites des specs XD */
  --v4-fs-hero:   70px;   /* H1 page d'accueil */
  --v4-fs-card:   40px;   /* titre de carte rôle */
  --v4-fs-sub:    24px;   /* sous-titre page */
  --v4-fs-badge:  16px;   /* badge BIENVENUE */
  --v4-fs-btn:    20px;   /* texte bouton */
  --v4-fs-body:   17px;   /* corps de carte */
  --v4-fs-small:  15px;   /* légendes / footer features */

  /* Poids */
  --v4-fw-regular: 400;
  --v4-fw-medium:  500;
  --v4-fw-semi:    600;
  --v4-fw-bold:    700;
  --v4-fw-black:   900;   /* équivalent Avenir Black/Heavy */

  /* -----------------------------------------------------------------------
     COMPOSANTS — valeurs extraites des specs XD
  ----------------------------------------------------------------------- */

  /* Carte rôle */
  --v4-card-radius:    14px;
  --v4-card-shadow:    0px 3px 6px rgba(0, 0, 0, 0.16);
  --v4-card-border-w:  2px;

  /* Boutons */
  --v4-btn-height:     59px;
  --v4-btn-radius:     13px;

  /* Inputs */
  --v4-input-height:   59px;
  --v4-input-radius:   13px;
  --v4-input-border:   2px solid var(--v4-border-card);

  /* Header */
  --v4-header-height:  103px;

  /* Icône cercle */
  --v4-icon-circle-size: 141px;

  /* -----------------------------------------------------------------------
     ESPACEMENT
  ----------------------------------------------------------------------- */
  --v4-gap-cards:  32px;   /* gap entre les 3 cartes rôles */
  --v4-pad-card:   40px;   /* padding interne carte */
  --v4-max-w:      1200px; /* largeur max du contenu */

  /* -----------------------------------------------------------------------
     TRANSITIONS
  ----------------------------------------------------------------------- */
  --v4-tr: 0.2s ease;

}