/* =====================================================================
   VARIABLES DE BASE — combocombo
   ---------------------------------------------------------------------
   C'est LE fichier à ouvrir pour changer l'apparence générale du site.
   Modifie les valeurs ci-dessous, rien d'autre n'est nécessaire ici.
   ===================================================================== */

:root {

  /* --- COULEURS --------------------------------------------------- */
  --color-bg:      #EBEBEB;   /* fond du site                        */
  --color-text:    #ffffff;   /* date + boutons (affichés en difference) */
  --color-accent:  #ff4d2e;   /* couleur d'accent                    */

  /* --- TYPOGRAPHIE ------------------------------------------------ */
  --font-main: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Date (en haut de page) */
  --font-date:           "Instrument Sans", Helvetica, Arial, sans-serif;
  --font-size-date:      13px;
  --date-weight:         400;
  --date-letter-spacing: normal;
  --date-margin-top:     16px;     /* écart entre la date et le haut   */
  --date-blend-mode:     difference;  /* fusion de la date sur le fond */

  /* --- BOUTONS (liens en bas de page) ---------------------------- */
  --btn-radius:        4px;
  --btn-border-color:  #ffffff;    /* liseret blanc                     */
  --btn-gap:           8px;        /* espace entre les deux boutons     */
  --btn-margin-bottom: 16px;       /* écart entre les boutons et le bas */
  --footnote-margin-bottom: 16px;  /* écart entre la ligne d'info et le bas */
                                   /* (la ligne d'info est SOUS les boutons) */
  --btn-blend-mode:    difference; /* fusion de la rangée de boutons    */

  /* --- CURSEUR (croix « + », ordinateur) -------------------------- */
  --cursor-size:      22px;   /* taille de la croix                  */
  --cursor-thickness: 2px;    /* épaisseur des traits de la croix    */

  /* --- LOGO ------------------------------------------------------- */
  /* Largeur du logo sur ordinateur (s'adapte : min / idéal / max)    */
  --logo-width: clamp(150px, 32vw, 360px);
  /* Largeur du logo sur mobile / tablette tactile                    */
  --logo-width-mobile: 80vw;
  /* Mode de fusion du logo (difference = inversion sur le fond/images) */
  /* Valeurs possibles : difference, normal, exclusion, multiply...     */
  --logo-blend-mode: difference;

  /* --- ESPACEMENTS ------------------------------------------------ */
  --footer-padding: 30px;     /* marge sur les côtés (date + boutons) */

  /* --- PAGE ABOUT : TAILLES DE FONTS ------------------------------ */
  /* C'est ICI que tu changes les tailles ET les interlignes de la
     page About. Chaque size est un clamp(MIN, FLUIDE, MAX) qui
     s'ajuste entre mobile et grand écran. Chaque leading est un
     multiplicateur (line-height) — ex. 1.5 = 150 %.                 */

  /* --- TAILLES --- */
  --about-hero-size:    clamp(32px, 6.1vw, 147px);  /* gros titre du haut */
  --about-body-size:    clamp(17px, 1.5vw, 30px);   /* paragraphes        */
  --about-label-size:   13px;                        /* "Services" / "Selected clients" / "Contact" */
  --about-list-size:    clamp(22px, 2.4vw, 32px);   /* items Services + Selected clients */
  --about-contact-size: clamp(14px, 1.2vw, 17px);   /* items Contact      */
  --about-cta-size:     clamp(20px, 2.5vw, 56px);   /* lien "Request our deck" */

  /* --- INTERLIGNES (line-height) --- */
  --about-hero-leading:    0.9;
  --about-body-leading:    1.15;
  --about-label-leading:   1.2;
  --about-list-leading:    0.95;
  --about-contact-leading: 1.45;
  --about-cta-leading:     1.45;

  /* --- MISE EN PAGE (largeurs / marges / alignement) --- */
  --about-content-max-width: 1140px;     /* largeur max de toute la colonne */
  --about-hero-max-width:    40ch;        /* largeur max du Hero (en chars) */
  --about-body-max-width:    100ch;       /* largeur max des paragraphes    */
  --about-padding-x:         25px;        /* marge gauche/droite avec les bords */
  --about-padding-y:         22px;        /* marge haut/bas                 */
  --about-align:             flex-start;  /* "center" ou "flex-start" (=gauche) */

}