/* ==========================================================================
   Vianumi — design tokens (V0, identité PROVISOIRE)
   --------------------------------------------------------------------------
   Seul fichier à modifier pour changer couleurs, typos, rayons, espacements.
   Le reste du CSS n'utilise que les variables « sémantiques » (section 2).

   Origine : couleurs et formes du logo (assets/logo.svg) et design system
   esquissé par Olivier. Contrastes vérifiés (WCAG 2.x) le 12/10/2026,
   ratios indiqués en commentaire.
   ========================================================================== */

/* --- Polices auto-hébergées (sous-ensemble latin, licence SIL OFL 1.1) --- */
@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ------------------------------------------------------------------------
     1. Palette brute (issue du logo). Ne pas utiliser directement dans le CSS
        des pages : passer par les variables sémantiques ci-dessous.
     ------------------------------------------------------------------------ */
  --vn-vert-profond: #14342B; /* « via » + ordinateur */
  --vn-teal:         #12A594; /* « numi » + cœur — décoratif uniquement (3,07:1 sur blanc) */
  --vn-teal-clair:   #46B99D; /* dégradé du chemin — décoratif sur fond clair */
  --vn-teal-fonce:   #0F766B; /* dérivé : teal lisible pour du texte (5,49:1 sur blanc) */
  --vn-teal-nuit:    #0B5C53; /* dérivé : survol (7,87:1 sur blanc) */
  --vn-creme:        #FBF8F3; /* fond de page chaleureux */
  --vn-blanc:        #FFFFFF;
  --vn-menthe:       #EEF7F4; /* fond de section alternée (teinte du teal) */
  --vn-menthe-vive:  #DDF1EA; /* pastilles, encadrés */
  --vn-gris-vert:    #3F5A52; /* texte secondaire (7,09:1 sur crème) */
  --vn-bordure:      #C9DED6; /* traits décoratifs, jamais porteurs de sens */
  --vn-givre:        #CFE6DE; /* texte secondaire sur vert profond (10,3:1) */
  --vn-ecume:        #8EDCC7; /* liens sur vert profond (8,49:1) */

  /* ------------------------------------------------------------------------
     2. Variables sémantiques (celles qu'utilise site.css)
     ------------------------------------------------------------------------ */
  /* Fonds */
  --color-bg:            var(--vn-creme);
  --color-surface:       var(--vn-blanc);
  --color-surface-alt:   var(--vn-menthe);
  --color-badge-bg:      var(--vn-menthe-vive);

  /* Textes — tous ≥ 4,5:1 sur bg, surface et surface-alt */
  --color-text:          var(--vn-vert-profond); /* 12,7:1 sur crème */
  --color-text-muted:    var(--vn-gris-vert);    /* 7,1:1 sur crème */
  --color-heading:       var(--vn-vert-profond);
  --color-accent-text:   var(--vn-teal-fonce);   /* 5,2:1 sur crème */

  /* Liens */
  --color-link:          var(--vn-teal-fonce);
  --color-link-hover:    var(--vn-vert-profond);

  /* Boutons */
  --color-btn-bg:        var(--vn-teal-fonce);   /* texte blanc 5,49:1 */
  --color-btn-bg-hover:  var(--vn-teal-nuit);    /* texte blanc 7,87:1 */
  --color-btn-text:      var(--vn-blanc);
  --color-btn2-text:     var(--vn-vert-profond); /* bouton secondaire (contour) */
  --color-btn2-border:   var(--vn-vert-profond);

  /* Décor (jamais pour du texte) */
  --color-accent:        var(--vn-teal);
  --color-accent-soft:   var(--vn-teal-clair);
  --color-border:        var(--vn-bordure);

  /* Focus clavier */
  --color-focus:         var(--vn-teal-fonce);
  --color-focus-inverse: var(--vn-teal-clair);   /* 5,6:1 sur vert profond */

  /* Sections inversées (contact, pied de page) */
  --color-inverse-bg:    var(--vn-vert-profond);
  --color-inverse-text:  var(--vn-blanc);        /* 13,5:1 */
  --color-inverse-muted: var(--vn-givre);        /* 10,3:1 */
  --color-inverse-link:  var(--vn-ecume);        /* 8,5:1 */
  --color-inverse-accent: var(--vn-teal-clair);  /* 5,6:1 */

  /* Dégradé du chemin en pointillés du logo */
  --gradient-chemin: linear-gradient(90deg, var(--vn-vert-profond) 0%, var(--vn-teal-clair) 30%, var(--vn-teal) 100%);

  /* ------------------------------------------------------------------------
     3. Typographie
     ------------------------------------------------------------------------ */
  --font-heading: "Fredoka", "Century Gothic", "Avenir Next", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --weight-heading: 700;
  --weight-body:    400;
  --weight-strong:  600;

  /* Corps de base 18 px (1.125rem) : respecte le réglage de taille du navigateur */
  --text-sm:   1rem;      /* 16 px — mentions, jamais en dessous */
  --text-base: 1.125rem;  /* 18 px */
  --text-lg:   1.25rem;   /* 20 px — chapeaux */
  --text-h3:   1.375rem;  /* 22 px */
  --text-h2:   clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);  /* 28 → 36 px */
  --text-h1:   clamp(2.125rem, 1.6rem + 2.6vw, 3.25rem); /* 34 → 52 px */

  --leading-body:    1.6;
  --leading-heading: 1.15;
  --measure:         65ch; /* largeur de lecture maximale */

  /* ------------------------------------------------------------------------
     4. Formes — arrondis repris du logo (écran rx 5/34, police ronde)
     ------------------------------------------------------------------------ */
  --radius-sm:   0.5rem;  /* 8 px  — pastilles, petits éléments */
  --radius-md:   1rem;    /* 16 px — boutons, encadrés */
  --radius-lg:   1.5rem;  /* 24 px — cartes */
  --radius-pill: 999px;   /* pastille « Lancement en janvier 2027 » */

  --border-width: 2px;
  --focus-width:  3px;
  --focus-offset: 3px;

  /* Pointillés du logo (rond, espacé) */
  --dots-size:    6px;
  --dots-gap:     18px;

  --shadow-card: 0 1px 0 rgb(20 52 43 / 0.06), 0 8px 24px rgb(20 52 43 / 0.08);

  /* ------------------------------------------------------------------------
     5. Espacements (échelle 4/8) et mise en page
     ------------------------------------------------------------------------ */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4.5rem;   /* 72 */
  --space-section: clamp(3rem, 2rem + 4vw, 6rem);

  --container:     72rem;   /* 1152 px */
  --gutter:        1rem;    /* 16 px sur mobile */
  --tap-min:       3rem;    /* 48 px — cible cliquable minimale */
  --logo-height:   3rem;    /* hauteur du logo dans l'en-tête */
}