/* ==========================================================================
   SKYVISION : design tokens des outils gratuits (copie de maquettes/tokens.css du 25/09/2026)
   Relevés le 2026-09-25 sur le site live (CSS calculé + feuille Webflow) :
     A = https://skyvision-agency.com/fr                      (accueil)
     B = https://skyvision-agency.com/fr/services/amazon-dsp  (page service)
   Feuille source : skyvision-agency-db24fe.webflow.682d6c53727e1a42ddfafe9b.72abd07c6.opt.min.css
   Détail, pages et exclusions : DESIGN-TOKENS.md (même dossier).
   Rien n'est inventé : chaque valeur a été lue sur A ou B, sauf mention « proposition ».
   ========================================================================== */

/* --------------------------------------------------------------------------
   Polices
   Le site charge depuis le CDN Webflow :
     - « Satoshi Variable » (ttf variable, graisses 300 à 900)
     - « Syne » 500 (woff2) et 700 (ttf)
   Ici : fichiers locaux uniquement, servis depuis /fonts/ (copie de 02-marketing/_shared/fonts).
   Aucun repli sur le CDN du site : les maquettes ne font aucune requête externe
   (revue du 2026-09-25). Satoshi 600 à 800 n'existe pas en local et n'est jamais appelé.
   -------------------------------------------------------------------------- */

/* Satoshi : statiques locales. Pas de 600 à 800 en local (non utilisés, voir shared.css). */
@font-face {
  font-family: "Satoshi";
  src: url("/fonts/Satoshi_Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/fonts/Satoshi_Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/fonts/Satoshi_Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/fonts/Satoshi_Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/fonts/Satoshi_Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/fonts/Satoshi_MediumItalic.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
}

/* Syne : le site n'utilise que 500 et 700. Les autres graisses locales sont déclarées
   pour dépannage, mais à éviter si l'on veut coller au rendu du site. */
@font-face {
  font-family: "Syne";
  src: url("/fonts/Syne_Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Syne";
  src: url("/fonts/Syne_Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Syne";
  src: url("/fonts/Syne_SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Syne";
  src: url("/fonts/Syne_Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Syne";
  src: url("/fonts/Syne_ExtraBold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------------------
   Variables
   Entre crochets : nom de la variable Webflow d'origine, quand elle existe.
   -------------------------------------------------------------------------- */
:root {
  /* ---- Couleurs de marque (variables :root du site) ---- */
  --sv-navy:        #04131c;               /* [--brand-color--primary-blue] fond sombre dominant, texte sur clair */
  --sv-navy-nav:    #20254c;               /* [--brand-color--blue-navbar] pilule de navigation, intérieur du bouton de nav, bord FAQ (B) */
  --sv-gold:        #febd68;               /* [--brand-color--primary-yellow] flèche des boutons, hover liens, pastilles réseaux */
  --sv-purple:      #735dd0;               /* [--brand-color--primary-purple] fin du dégradé, contour champ clair, onglet actif (B) */
  --sv-gray:        rgba(242, 244, 248, 0.95); /* [--brand-color--gray] = #f2f4f8f2 : cartes et onglets sur fond clair */
  --sv-white:       #ffffff;               /* [--brand-color--white] */

  /* ---- Couleurs secondaires codées en dur (relevées sur A/B) ---- */
  --sv-ink-violet:      #07041c;           /* bloc newsletter (A, B) */
  --sv-slate-glass:     rgba(30, 41, 59, 0.95); /* intérieur carte témoignage, avec flou 20px (A) */
  --sv-card-dark:       rgba(4, 19, 28, 0.4);   /* carte chiffre clé sur fond nébuleuse (A) */
  --sv-card-dark-border:#082436;           /* bord 1px carte chiffre clé (A) */
  --sv-tab-border:      #e4e9f1;           /* bord 1px onglets services (A) */
  --sv-star:            #fbbf24;           /* étoiles des avis (A) */
  --sv-text-tab-muted:  #222222;           /* texte onglet méthode inactif (B) */

  /* ---- Rôles (alias des valeurs ci-dessus) ---- */
  --sv-bg-dark:         var(--sv-navy);
  --sv-bg-light:        var(--sv-white);
  --sv-surface-light:   var(--sv-gray);
  --sv-text-on-dark:    var(--sv-white);
  --sv-text-on-light:   var(--sv-navy);
  --sv-link-hover:      var(--sv-gold);
  --sv-accent-icon:     var(--sv-gold);

  /* ---- Dégradés (tous or -> violet) ---- */
  --sv-gradient:          linear-gradient(90deg, #febd68, #735dd0);   /* bord des boutons, filet du pied de page, hover texte */
  --sv-gradient-vertical: linear-gradient(180deg, #febd68, #735dd0);  /* bord du cercle-flèche des boutons */
  --sv-gradient-title:    linear-gradient(84deg, #febd68, #735dd0);   /* .gradient-text : « Ads » du H1, « Ebook offert » */
  --sv-gradient-stat:     linear-gradient(86deg, #febd68, #735dd0);   /* chiffres clés */
  --sv-gradient-soft:     linear-gradient(90deg, rgba(254, 189, 104, 0.5), rgba(110, 68, 255, 0.5)); /* capsules « Mieux que… » (A) */
  --sv-gradient-success:  linear-gradient(90deg, rgba(254, 189, 104, 0.76), rgba(115, 93, 208, 0.55)); /* message « Merci ! » formulaire */
  --sv-gradient-gold-frame: linear-gradient(135deg, #c9a05f 0%, #e8c491 25%, #f5d9a8 50%, #e8c491 75%, #c9a05f 100%); /* cadre 3px carte témoignage */
  --sv-overlay-navy:      linear-gradient(rgba(4, 19, 28, 0.75), rgba(4, 19, 28, 0.75)); /* voile sur image « tech » (A) */
  --sv-overlay-gray:      linear-gradient(rgba(242, 244, 248, 0.86), rgba(242, 244, 248, 0.86)); /* voile clair sur image, carte services (A) */

  /* ---- Typographie ---- */
  --sv-font-title: "Syne", Arial, sans-serif;                        /* [--brand-typography--font-title] */
  --sv-font-text:  "Satoshi", "Satoshi Variable", Arial, sans-serif; /* [--brand-typography--font-text] = "Satoshi Variable",Arial,sans-serif */

  /* Tailles, valeurs de base (écrans 992 à 1919 px). Surcharges responsive plus bas. */
  --sv-fs-h1:        5rem;      /* 80px  [--brand-text-size--h1-80px]  H1 accueil, Syne 700 */
  --sv-fs-h1-page:   4rem;      /* 64px  H1 page service (B), Syne 500, interligne 1.1 */
  --sv-fs-h2:        3rem;      /* 48px  [--brand-text-size--h2-60px]  Syne 500 */
  --sv-fs-h3:        1.5rem;    /* 24px  [--brand-text-size--h3-25px]  Syne 500 */
  --sv-fs-h3-alt:    1.875rem;  /* 30px  [--brand-text-size--text-large-30px] .heading-style-h3 (B) */
  --sv-fs-h4:        1.25rem;   /* 20px  .heading-style-h4, Syne 600 */
  --sv-fs-xxl:       3.125rem;  /* 50px  [--brand-text-size--text-xxl-50px] */
  --sv-fs-stat:      3.125rem;  /* 50px  .stats_number mesuré (A) : 50px en 1440, 64px en 768, 56px en 390 */
  --sv-fs-xl:        2.5rem;    /* 40px  [--brand-text-size--text-xl-40px] */
  --sv-fs-cta:       2.5rem;    /* 40px  .cta_text du pied de page (A) : 40px en 1440/768, 30px en 390 */
  --sv-fs-medium:    1.125rem;  /* 18px  [--brand-text-size--text-medium-18px] sous-titre hero */
  --sv-fs-regular:   1rem;      /* 16px  [--brand-text-size--text-size-regular] corps */
  --sv-fs-15:        0.9375rem; /* 15px  liens nav, liens pied de page, textes de cartes */
  --sv-fs-14:        0.875rem;  /* 14px  mentions pied de page, champs de formulaire */
  --sv-fs-small:     0.88rem;   /* 14.08px [--brand-text-size--text-small-14px] libellés de boutons */

  --sv-lh-1:    1;     /* [--brand-text-line-height--line-height-1]   H1, H2 */
  --sv-lh-1-2:  1.2;   /* [--brand-text-line-height--line-height-1-3] H3 */
  --sv-lh-1-5:  1.5;   /* [--brand-text-line-height--line-height-1-5] corps */
  --sv-ls-title: -1px; /* H1 */
  --sv-ls-caps:   1px; /* libellés de boutons (MAJUSCULES), liens nav */

  --sv-fw-text: 400;
  --sv-fw-text-medium: 500;
  --sv-fw-title: 500;
  --sv-fw-title-bold: 700;

  /* ---- Espacements ---- */
  --sv-gutter:          3rem;    /* 48px [.padding-global] ; 2rem sous 767px */
  --sv-container:       80rem;   /* 1280px [.container-large] */
  --sv-container-medium:64rem;   /* 1024px [.container-medium] */
  --sv-section-large:   6.25rem; /* 100px [.padding-section-large] ; 6rem <=991, 4rem <=767 */
  --sv-section-medium:  5rem;    /* 80px  [.padding-section-medium] */
  --sv-section-small:   2rem;    /* 32px  [.padding-section-small] */
  --sv-hero-top:        12rem;   /* 192px mesuré sur A en 1440 ; 128px à 768 et 390 */
  --sv-nav-top:         20px;    /* navbar fixe, top 20px */
  --sv-space-1: 4px;
  --sv-space-2: 8px;
  --sv-space-3: 12px;
  --sv-space-4: 16px;
  --sv-space-5: 24px;
  --sv-space-6: 32px;
  --sv-space-7: 48px;
  --sv-space-8: 64px;
  --sv-space-9: 96px;

  /* ---- Rayons ---- */
  --sv-radius-pill:    30px;      /* boutons, navbar, champs, grandes cartes services */
  --sv-radius-circle:  90px;      /* cercle-flèche 30px, pastilles réseaux 40px */
  --sv-radius-card:    20px;      /* cartes (chiffres, bénéfices, contenu), bloc newsletter, FAQ (B), onglet actif (B) */
  --sv-radius-tab:     25px;      /* onglets services, contenu témoignage */
  --sv-radius-frame:   28px;      /* cadre doré témoignage */
  --sv-radius-video:   32px;      /* bloc vidéo témoignage */
  --sv-radius-capsule: 4.375rem;  /* 70px capsules « Mieux que… » */
  --sv-radius-thumb:   8px;       /* vignettes vidéo */

  /* ---- Ombres et effets (le site en utilise très peu) ---- */
  --sv-shadow-avatar:   0 4px 12px 0 rgba(0, 0, 0, 0.3);        /* avatar témoignage */
  --sv-glow-gold:       0 0 16px 0 rgba(201, 160, 95, 0.6);     /* puce de pagination active */
  --sv-glow-purple:     20px 20px 300px 20px #735dd0;           /* halo derrière l'ebook */
  --sv-shadow-dropdown: 0 -13px 50px 3px rgba(17, 23, 156, 0.07); /* menu langue */
  --sv-blur-glass:      blur(20px);                              /* backdrop-filter carte témoignage */

  /* ---- Composants (valeurs brutes) ---- */
  --sv-btn-height:        40px;
  --sv-btn-border:        1.5px;   /* épaisseur du bord dégradé */
  --sv-btn-arrow-size:    30px;
  --sv-input-height:      40px;
  --sv-input-border-dark: 1px solid #ffffff;   /* champ sur fond sombre */
  --sv-input-border-light:2px solid #735dd0;   /* champ sur fond clair */
  --sv-nav-height:        55px;    /* 62px en mobile */

  /* ---- Mouvement ---- */
  --sv-ease-btn:  cubic-bezier(0.455, 0.03, 0.515, 0.955); /* .button-5, 0.3s */
  --sv-dur-btn:   0.3s;
  --sv-dur-color: 0.2s;
}

/* Surcharges responsive, reprises des media queries du site */
@media screen and (max-width: 991px) {
  :root {
    --sv-fs-h2: 2.8rem;
    --sv-fs-h3: 1.5rem;
    --sv-fs-h3-alt: 1.5rem;
    --sv-fs-xxl: 3rem;
    --sv-fs-stat: 4rem;       /* 64px mesuré en 768 */
    --sv-section-large: 6rem;
    --sv-hero-top: 8rem;
  }
}
@media screen and (max-width: 767px) {
  :root {
    --sv-fs-h2: 2rem;
    --sv-fs-h3: 1.3rem;
    --sv-fs-h3-alt: 1.875rem;
    --sv-fs-xxl: 3.125rem;
    --sv-fs-stat: 3.5rem;     /* .stats_number { font-size: 3.5rem } <=767 */
    --sv-fs-medium: 1.15rem;
    --sv-gutter: 2rem;
    --sv-section-large: 4rem;
  }
}
@media screen and (max-width: 479px) {
  :root {
    --sv-fs-h1: 3.5rem;       /* 56px mesuré sur A en 390 */
    --sv-fs-h1-page: 2.5rem;  /* 40px mesuré sur B en 390 */
    --sv-fs-h2: 2.15rem;
    --sv-fs-h3: 1.3rem;
    --sv-fs-h3-alt: 1.4rem;
    --sv-fs-xxl: 1.8rem;
    --sv-fs-xl: 1.6rem;
    --sv-fs-cta: 1.875rem;    /* 30px mesuré en 390 */
    --sv-fs-small: 0.85rem;
    --sv-fs-medium: 1.15rem;
  }
}
@media screen and (min-width: 1920px) {
  :root {
    --sv-fs-h1: 6rem;
    --sv-fs-h2: 4.5rem;
    --sv-fs-h3: 2.2rem;
    --sv-fs-h3-alt: 2rem;
    --sv-fs-xxl: 3.5rem;
    --sv-fs-medium: 2rem;
    --sv-fs-regular: 1.4rem;
    --sv-fs-small: 1.2rem;
    --sv-container: 100rem;
  }
}