/* ==========================================================================
   RÉGLAGES GÉNÉRAUX DU SITE (charte graphique Beyio V1, oct. 2026,
   mise à jour avec la nouvelle identité du 24/10/2026)
   Toutes les couleurs, polices, tailles et durées sont ici.
   Changer une valeur ici la change partout sur le site.
   ========================================================================== */

:root {
  /* --- Couleurs des trois marques (nouvelle identité, 24/10/2026) --- */
  --turquoise: #00cdb6;     /* Beyio : couleur du logo (relevée dans le fichier reçu, code exact à confirmer) */
  --studio: #f2afb1;        /* Beyio Studio (code donné par le client) */
  --system: #b6b2e8;        /* Beyio System (code donné par le client) */

  /* --- Couleurs de Beyio sur le site : le turquoise du logo est trop clair pour du texte,
     les verts ci-dessous en sont les versions lisibles (même teinte) --- */
  --green: #00a086;         /* Vert principal : mots en couleur des titres, chiffres, pictogrammes */
  --green-light: #89d4bf;   /* Vert secondaire : bandeaux, filets, boutons secondaires */
  --green-bright: var(--turquoise); /* Turquoise du logo (écran) : survols */
  --rose: var(--studio);    /* Rose : une touche (traits à la main, ruban adhésif, étoiles), jamais un fond complet */
  --beige: #f5f1e8;         /* Beige clair : couleur dominante du site */
  --night: #00191f;         /* Vert nuit : titres et boutons (jamais en fond : le site reste clair) */
  --black: #08080b;         /* Noir profond */
  --white: #ffffff;

  /* Dégradé signature : réservé à la feuille, au ruban et aux grands aplats. Jamais sur du texte. */
  --degrade-signature: linear-gradient(45deg, #89d4bf, #00a086);

  /* --- Nuances dérivées (lisibilité sur fonds clairs) --- */
  --green-ink: #007563;          /* vert principal assombri : petits textes verts lisibles */
  --green-tint: #e3f2ec;         /* vert secondaire très clair : fonds de section, encadrés */
  --green-tint-strong: #cde9de;
  --text: #2f3a3c;               /* texte courant */
  --text-soft: #5d696b;          /* légendes, textes secondaires */
  --line: #e2ddd1;               /* filets sur fond beige */
  --error: #b3261e;

  /* Nuances dérivées des couleurs des pôles, même teinte, pour la lisibilité sur blanc */
  --studio-strong: #c76c6f;      /* 3,6:1 (3,1:1 sur sa teinte) : pictogrammes, mots en couleur des grands titres */
  --studio-ink: #b8474a;         /* 5,2:1 : petits textes en couleur */
  --studio-bright: #e29799;      /* survols */
  --studio-tint: #fceaeb;        /* fonds de section, encadrés */
  --studio-tint-strong: #faddde;
  --system-strong: #847fba;
  --system-ink: #6964ab;
  --system-bright: #a4a0d7;
  --system-tint: #ecebf9;
  --system-tint-strong: #e0dff5;

  /* --- Couleur d'accent : celle du pôle affiché ---
     Les composants n'utilisent pas les verts directement, mais ces variables :
     vert pour Beyio (par défaut), rose pour Beyio Studio, lavande pour Beyio System
     (voir [data-pole] en bas de ce fichier). */
  --accent: var(--green);                   /* icônes, pointillés, mots en couleur des grands titres */
  --accent-light: var(--green-light);       /* boutons secondaires, bandeaux */
  --accent-bright: var(--green-bright);     /* survols */
  --accent-ink: var(--green-ink);           /* petits textes en couleur, lisibles */
  --accent-tint: var(--green-tint);         /* fonds de section, encadrés */
  --accent-tint-strong: var(--green-tint-strong);
  --accent-on-tint: var(--green-ink);       /* mots en couleur d'un grand titre posé sur la teinte (≥ 3:1) */

  /* --- Polices de la charte (voir fonts.css) --- */
  --font-display: 'Mona Sans', Verdana, sans-serif;   /* H1 et H2 */
  --font-display-stretch: 125%;
  --font-display-weight: 600;
  --font-body: 'Host Grotesk', Arial, sans-serif;     /* tout le reste */

  /* --- Tailles (mobile → ordinateur), charte --- */
  --fs-h1: clamp(2.125rem, 1.63rem + 2.02vw, 3.25rem);    /* 34 → 52 px */
  --fs-h2: clamp(1.625rem, 1.4rem + 0.9vw, 2.125rem);     /* 26 → 34 px */
  --fs-h3: clamp(1.375rem, 1.21rem + 0.67vw, 1.75rem);    /* 22 → 28 px */
  --fs-card: 1.375rem;                                     /* titres de cartes : H3 à sa taille mobile (22 px) */
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.34vw, 1.25rem);  /* texte d'introduction : 17 → 20 px */
  --fs-body: clamp(1rem, 0.945rem + 0.225vw, 1.125rem);    /* 16 → 18 px */
  --fs-small: 0.875rem;                                    /* légende : 14 px */

  /* --- Mise en page --- */
  --mesure: 680px;          /* largeur maximale d'une ligne de texte */
  --container: 1240px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 8vw, 7rem);
  --header-h: 84px;

  /* --- Arrondis (charte : 24 px pour cartes, images et encadrés) --- */
  --radius-sm: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* --- Ombres --- */
  --shadow-card: 0 1px 2px rgba(0, 25, 31, 0.05), 0 12px 28px -16px rgba(0, 25, 31, 0.2);

  /* --- Mouvement (charte) : survol et appui --- */
  --duree: 200ms;
  --courbe: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 1279px) {
  :root {
    --header-h: 70px;
  }
}

/* Couleurs des pôles : sur leurs pages, dans leur panneau du mégamenu et sur leurs cartes
   de l'accueil (attribut data-pole), l'accent du site prend la couleur du pôle. */
[data-pole='studio'] {
  --accent: var(--studio-strong);
  --accent-light: var(--studio);
  --accent-bright: var(--studio-bright);
  --accent-ink: var(--studio-ink);
  --accent-tint: var(--studio-tint);
  --accent-tint-strong: var(--studio-tint-strong);
  --accent-on-tint: var(--studio-strong);   /* 3,1:1 sur sa teinte */
}

[data-pole='system'] {
  --accent: var(--system-strong);
  --accent-light: var(--system);
  --accent-bright: var(--system-bright);
  --accent-ink: var(--system-ink);
  --accent-tint: var(--system-tint);
  --accent-tint-strong: var(--system-tint-strong);
  --accent-on-tint: var(--system-strong);   /* 3,1:1 sur sa teinte */
}