/* Business Architecte — design tokens
 * Source de vérité : 2 R-Ressources/branding/palette.html
 * Énergie : autorité calme, sérénité, structure organique.
 * Règle charte (universelle Mélodie) : noir + blanc + rouge + bleu + vert sont les 5 PRIMITIVES.
 */

:root {
  /* 1. Couleurs primitives (5 obligatoires) */
  --color-black: #1e4b7a;        /* bleu marine = "noir" BA */
  --color-white: #fbfaf9;        /* cream = "blanc" BA */
  --color-red:   #b5483a;        /* rouge famille */
  --color-blue:  #1e4b7a;        /* bleu architecte (= color-black) */
  --color-green: #5f8d76;        /* vert sauge */

  /* 2. Boutons CTA */
  --cta-bg:         #d98d4f;
  --cta-bg-hover:   #9c5e2d;
  --cta-text:       #2A3350;
  --cta-text-hover: #fbfaf9;
  --cta-link:       #9c5e2d;
  --cta-link-hover: #9c5e2d;

  /* 3. Sections (4) */
  --section-1-bg:        #1e4b7a;
  --section-1-text:      #fbfaf9;
  --section-1-highlight: #98deb8;

  --section-2-bg:        #fbfaf9;
  --section-2-text:      #2A3350;
  --section-2-highlight: #4c7260;

  --section-3-bg:        #dddacc;
  --section-3-text:      #2A3350;
  --section-3-highlight: #3a5749;

  --section-4-bg:        #85c3a2;
  --section-4-text:      #2A3350;
  --section-4-highlight: #224163;

  /* Typographie */
  --font-heading:    'Archivo Narrow', 'Inter', system-ui, sans-serif;
  --font-body:       'Inter', system-ui, sans-serif;
  --font-size-base:  18px;
  --line-height:     1.6;

  /* Layout */
  --max-width-main:    90rem;
  --max-width-medium:  60rem;
  --max-width-normal:  50rem;
  --max-width-small:   41.5rem;
  --radius-large:      10px;
  --radius-small:      0px;

  --google-fonts-href: 'https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap';
  --brand-name:      'Business Architecte';
  --brand-signature: 'Mélodie';

  /* Tokens étendus BA */
  --prim-noir:         #2A3350;            /* le vrai "noir" BA (plus sombre que bleu marine) */
  --charte-terracotta: #d98d4f;            /* signature hors familles de base */

  /* Gradients signatures (3 — rouge, vert, bleu) */
  --gradient-red:        linear-gradient(135deg, #8a3a22, #d98d4f);  /* rouge foncé → terracotta */
  --gradient-red-hover:  linear-gradient(135deg, #d98d4f, #8a3a22);  /* inversé pour hover */
  --gradient-green:  linear-gradient(135deg, #3a5749, #98deb8);     /* sauge foncé → pastel */
  --gradient-blue:   linear-gradient(135deg, #1e4b7a, #5f8d76);     /* architecte → sauge */

  /* === alias legacy === */
  --color-bg:                  var(--color-white);
  --color-bg-dark:             var(--color-black);
  --color-bg-light:            var(--color-white);
  --color-highlight-on-dark:   var(--section-1-highlight);
  --color-highlight-on-light:  var(--section-2-highlight);
  --color-cta-bg:              var(--cta-bg);
  --color-cta-text:            var(--cta-text);
}

/* ============================================
   COMPOSANTS — extraits de palette.html (2026-05-26)
   Permet de rendre les sections correctement sans la palette.html.
   ============================================ */

/* Boutons */
.btn-cta {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.85rem 1.5rem;
  border: none;
  border-radius: var(--radius-large);
  cursor: pointer;
  background: var(--gradient-red);
  color: var(--color-white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: filter .2s, transform .15s;
  text-decoration: none;
  display: inline-block;
}
.btn-cta:hover {
  background: var(--gradient-red-hover);
  color: var(--color-white);
}
.btn-link {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.85rem 0.25rem;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--cta-link);
  text-decoration: none;
  transition: color .2s;
}
.btn-link:hover {
  color: var(--cta-link-hover);
  text-decoration: underline;
  text-underline-offset: 4px;
}