/* ============================================================================
   BOAZ Create — Tokens de design
   ----------------------------------------------------------------------------
   Valeurs extraitees de la maquette Figma "BOAZ Create" (page Composants et
   frame "Aucun module Selectionne", 1470x836) via l'API Figma, et non estimees
   a l'oeil : couleurs, familles et tailles de police, rayons, geometrie des
   zones proviennent directement des noeuds du fichier.

   Ce fichier ne fait que DECLARER les variables. Il ne change rien a l'affichage
   tant que les composants ne les consomment pas : la refonte s'applique zone par
   zone. Charge avant boaz-create.css pour rester surchargeable.
   ============================================================================ */

:root {

  /* ---------------------------------------------------------------- Couleurs
     Note du designer dans le fichier : "les couleurs sont declinees a partir
     des couleurs du logo". */

  /* Bleu de marque et ses declinaisons */
  --bc-blue: #0082B2;            /* accent principal : boutons, actifs, sliders */
  --bc-blue-light: #0099D1;      /* variante claire (survol) */
  --bc-blue-700: #006B92;
  --bc-blue-800: #005473;
  --bc-blue-900: #003D54;

  /* Textes */
  --bc-text: #002634;            /* titres et texte principal */
  --bc-text-strong: #020232;     /* saisie utilisateur dans les champs */
  --bc-text-muted: #4F4F8B;      /* texte secondaire */
  --bc-text-subtle: #7575A4;     /* libelles, texte tertiaire */

  /* Surfaces */
  --bc-surface: #FFFFFF;         /* fond des panneaux et des barres */
  --bc-surface-field: #E7EEFC;   /* fond des champs (recherche, dimensions) */
  --bc-surface-selected: #D9F0F8;/* element selectionne (pilule de langue) */
  --bc-surface-tint: #E5F5FA;    /* fond bleute tres clair */
  --bc-surface-accent: #BFE5F3;  /* aplat bleu clair */
  --bc-slider-track: #C3D5F7;    /* piste de slider non remplie */

  /* Bordures — 1px #E7EEFC est LA bordure des panneaux et des sections */
  --bc-border: #E7EEFC;
  --bc-border-subtle: #C0C0D6;   /* filets fins : liseré des sous-rubriques */
  --bc-focus-ring: #99D6ED;      /* second contour, plus clair, des champs actifs */
  --bc-border-strong: #7575A4;
  --bc-border-width: 1px;

  /* Icones : couleur par defaut de la librairie Phosphor */
  --bc-icon: #343330;

  /* Relief. Dans Figma c'est une ombre portee DURE (flou 0), decalee de 2px vers
     le bas avec 2px d'etalement : cela donne 4px sous l'element, 2px sur les cotes
     et rien au-dessus. C'est ce qui rend la "petite bordure grise en bas et sur les
     cotes" demandee dans les specifications. Identique sur les panneaux et les barres. */
  --bc-shadow: 0 2px 0 2px #9B9BBD;

  /* ------------------------------------------------------------ Typographie
     Note du designer : "la font Space Grotesk n'a ete conservee que pour
     certains elements precis (les donnees/valeurs d'informations de modules et
     les chiffres-cles), la font Geist a ete utilisee pour le reste". */

  --bc-font: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bc-font-data: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Echelle relevee dans le fichier (taille / interligne) */
  --bc-text-11: 11px;   --bc-lh-11: 14px;
  --bc-text-12: 12px;   --bc-lh-12: 16px;
  --bc-text-13: 13px;   --bc-lh-13: 17px;
  --bc-text-14: 14px;   --bc-lh-14: 18px;   /* taille de corps la plus frequente */
  --bc-text-16: 16px;   --bc-lh-16: 21px;
  --bc-text-20: 20px;   --bc-lh-20: 26px;   /* titres */

  /* Space Grotesk : chiffres-cles de la barre d'information et donnees modules */
  --bc-data-12: 12px;   --bc-lh-data-12: 15px;
  --bc-data-16: 16px;   --bc-lh-data-16: 20px;
  --bc-data-18: 18px;   --bc-lh-data-18: 20px;
  --bc-data-20: 20px;   --bc-lh-data-20: 22px;   /* chiffres de la barre d'information */

  --bc-weight-regular: 400;
  --bc-weight-medium: 500;
  --bc-weight-bold: 700;

  /* ----------------------------------------------------------------- Rayons
     8px domine largement, puis 6px. 10px pour les panneaux, 12px pour la barre
     d'information, 32px pour les pilules. L'existant est a 15px : la tache
     "reduire l'intensite d'arrondi" correspond a ce passage. */

  --bc-radius-xs: 4px;
  --bc-radius-sm: 6px;
  --bc-radius: 8px;              /* valeur par defaut */
  --bc-radius-panel: 10px;       /* panneaux gauche et droit */
  --bc-radius-bar: 12px;         /* barre d'information */
  --bc-radius-pill: 32px;        /* pilules et boutons arrondis */

  /* ---------------------------------------------------- Geometrie des zones
     Mesures relevees sur la frame de reference (1470x836). */

  --bc-gutter: 10px;             /* marge entre les panneaux et le bord (etait 20px) */
  --bc-panel-width: 225px;       /* panneaux gauche ET droit (le gauche etait 255px) */
  /* La maquette elargit le panneau droit pour la X-Tower. Valeur relevee au pixel
     sur le PNG de la maquette (~314px a 2px pres), l API Figma etant limitee au
     moment de la mesure : a confirmer contre le fichier. */
  --bc-panel-width-large: 315px;
  --bc-topbar-height: 56px;
  --bc-topbar-padding-x: 24px;
  --bc-topbar-gap: 16px;
  --bc-controlbar-height: 40px;
  --bc-controlbar-gap: 10px;
  --bc-modal-padding: 24px;      /* padding interieur des modales de la refonte */

  /* Page d'accueil : nombre de colonnes des quatre vignettes. Le compte est
     impose plutot que laisse a un auto-fit, qui donnait un vilain 3 + 1 en
     passant. La suite voulue est 4 en ligne, puis 4 en carre, puis 4 en
     colonne : ce token ne prend donc que les valeurs 4, 2 et 1. */
  --home-cartes-colonnes: 4;

  /* Bornes verticales des panneaux gauche et droit.
     Decision du 02/09/2026 : les deux barres etant a taille fixe, plutot que de
     les laisser chevaucher les panneaux sur les ecrans etroits, on raccourcit les
     panneaux pour qu'ils ne partagent aucune bande horizontale avec elles. Le
     chevauchement devient alors impossible quelle que soit la largeur, sans avoir
     a calculer un seuil de collision.
     A pleine taille on garde la disposition de la maquette (panneaux sur toute la
     hauteur) ; le raccourcissement n'intervient qu'aux paliers, en deux temps,
     car la barre du bas (652px) entre en collision avant celle du haut (558px). */
  --bc-panel-top: var(--bc-gutter);
  --bc-panel-bottom: var(--bc-gutter);

  /* Empilement : au-dessus de la scene 3D, sous les modales Bootstrap (1050). */
  --bc-z-panel: 900;
  --bc-z-bar: 900;
  --bc-z-popover: 1000;
}

/* ============================================================================
   POINTS DE RUPTURE
   ----------------------------------------------------------------------------
   Les seuils ne peuvent pas etre stockes dans des variables : une condition de
   media query n'accepte pas var(). Les valeurs sont donc ecrites en dur, mais
   TOUS les @media du projet sont regroupes ici, et ils ne font que redefinir des
   tokens. Le reste du CSS n'a jamais besoin de savoir qu'un palier existe.

   Pour ajouter un palier : un bloc @media de plus ici, et rien ailleurs.
   Pour deplacer un seuil : une seule valeur a changer, ici.

   Seuils retenus (a confirmer avec le client, cf. tache Asana "Responsive") :
     1130px : en dessous, la barre du bas commence a chevaucher les panneaux,
              et les quatre vignettes de l'accueil passent en carre
     1024px : iPad paysage et petits laptops
      560px : en dessous, les vignettes de l'accueil s'empilent en colonne
   ============================================================================ */

@media (max-width: 1130px) {
  :root {
    --bc-gutter: 8px;
    --bc-topbar-padding-x: 16px;
    --bc-topbar-gap: 12px;
    --bc-modal-padding: 20px;
    /* Les quatre vignettes de l'accueil ne tiennent plus sur une ligne sans
       devenir etroites : elles passent en carre. */
    --home-cartes-colonnes: 2;
    /* Seule la barre du bas gene a cette largeur. */
    --bc-panel-bottom: calc(var(--bc-gutter) * 2 + var(--bc-controlbar-height));
  }
}

@media (max-width: 1024px) {
  :root {
    --bc-gutter: 6px;
    --bc-topbar-padding-x: 12px;
    --bc-topbar-gap: 8px;
    --bc-panel-width: 200px;
    --bc-modal-padding: 16px;
    /* Les deux barres genent a cette largeur. */
    --bc-panel-top: calc(var(--bc-gutter) * 2 + var(--bc-topbar-height));
    --bc-panel-bottom: calc(var(--bc-gutter) * 2 + var(--bc-controlbar-height));
  }
}

/* Palier propre a la page d'accueil : en dessous, deux vignettes cote a cote
   deviennent trop etroites pour leur libelle, elles s'empilent. */
@media (max-width: 560px) {
  :root {
    --home-cartes-colonnes: 1;
  }
}