/* ==========================================================================
   Agence Rose — design tokens
   Source : BrandGuidelines-AgenceRose.pdf v1.0 (05.2026) + SVG logos
   Toute valeur ici est RELEVÉE dans la charte, aucune n'est inventée.
   ========================================================================== */

:root {
  /* --- Palette (charte p.18) ------------------------------------------- */
  --ar-rose:          #FF40B4;  /* couleur primaire, la signature          */
  --ar-mure:          #2B001A;  /* fond sombre le plus profond             */
  --ar-prune:         #410027;  /* fond sombre principal des pages         */
  --ar-jaune:         #FFF763;  /* accent haute énergie                    */
  --ar-orange:        #FF4400;  /* accent / états d'erreur dans la charte  */
  --ar-nude:          #EBEBE3;  /* fond clair neutre                       */
  --ar-rose-poudre:   #FFEBF7;  /* fond clair rosé (relevé dans les SVG)   */

  /* Opacités autorisées : 50 / 20 / 5 % — uniquement sur prune et rose.
     ⚠ Interdit d'altérer l'opacité des AUTRES couleurs (charte p.23).     */
  --ar-prune-50: color-mix(in srgb, var(--ar-prune) 50%, transparent);
  --ar-prune-20: color-mix(in srgb, var(--ar-prune) 20%, transparent);
  --ar-prune-05: color-mix(in srgb, var(--ar-prune)  5%, transparent);
  --ar-rose-50:  color-mix(in srgb, var(--ar-rose)  50%, transparent);
  --ar-rose-20:  color-mix(in srgb, var(--ar-rose)  20%, transparent);
  --ar-rose-05:  color-mix(in srgb, var(--ar-rose)   5%, transparent);

  /* --- Paires texte/fond validées (charte p.21) ------------------------- */
  /* Seules ces 4 associations sont explicitement approuvées.              */
  /* prune sur rose · rose poudré sur prune · prune sur orange · prune sur rose poudré */

  /* --- Typographie (charte p.25 à 31) ---------------------------------- */
  --ar-font-display: "Agence Rose", "Fredoka", system-ui, sans-serif; /* titres : police custom (décision Martin 22/09/26), Fredoka en repli glyphes */
  --ar-font-text:    "Google Sans", system-ui, sans-serif;    /* tout le reste */
  --ar-font-logo:    "Agence Rose", var(--ar-font-display);   /* wordmark seul */

  /* Interlignage / interlettrage imposés */
  --ar-lh-display:  0.90;   /* display headline : 90 %                     */
  --ar-lh-tight:    1.00;   /* headlines : 100 %                           */
  --ar-lh-normal:   1.10;   /* subheads, tagline, headline courant : 110 % */
  --ar-lh-body:     1.20;   /* body, captions : 120 %                      */
  --ar-tracking:   -0.02em; /* -2 % partout SAUF captions et body à 0      */
  --ar-tracking-0:  0;

  /* Échelle relevée sur la composition type (charte p.31) */
  --ar-size-display: 48px;  /* Fredoka SemiBold, lh 90 %, -2 %             */
  --ar-size-sub:     24px;  /* Google Sans Regular, lh 120 %, -2 %         */
  --ar-size-head:    16px;  /* Google Sans Medium, lh 110 %, -2 %          */
  --ar-size-body:    12px;  /* Google Sans Regular, lh 120 %, 0 %          */
  --ar-size-tagline: 12px;  /* Fredoka Medium, lh 110 %, -2 %              */

  /* --- Formes & effets (charte p.19) ------------------------------------ */
  /* Les inner shadows sont un marqueur d'identité, pas une décoration.    */
  --ar-radius:      80px;   /* plancher imposé : 80 px                     */
  --ar-radius-max: 150px;   /* plafond imposé : 150 px                     */
  --ar-radius-pill: 999px;  /* pilules de valeurs / tags (charte p.06)     */

  /* inner shadow : X 0 · Y 0 · blur 60 à 100 · spread 0 · opacité 100 %
     contour 1 px de la même couleur                                       */
  --ar-glow-60:  inset 0 0 60px  var(--ar-rose);
  --ar-glow-100: inset 0 0 100px var(--ar-rose);

  /* --- Logo (charte p.12) ---------------------------------------------- */
  --ar-logo-min-digital: 20px;  /* hauteur minimale écran                  */
  /* zone de protection = 100 % de la hauteur du logo, sur les 4 côtés     */
}

/* ==========================================================================
   Polices — self-hosting, fichiers dans assets/fonts/ (woff2 sous-ensemble
   latin + accents français, produits depuis brand assets/Typos/, licence OFL)
   ========================================================================== */

@font-face { font-family: "Fredoka"; font-weight: 500; font-display: swap;
  src: url("assets/fonts/Fredoka-Medium.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 600; font-display: swap;
  src: url("assets/fonts/Fredoka-SemiBold.woff2") format("woff2"); }

@font-face { font-family: "Google Sans"; font-weight: 400; font-display: swap;
  src: url("assets/fonts/GoogleSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "Google Sans"; font-weight: 500; font-display: swap;
  src: url("assets/fonts/GoogleSans-Medium.woff2") format("woff2"); }

/* Police custom, 118 glyphes : latin complet + accents français, une seule graisse.
   Déclarée sur toute la plage 100-900 : le navigateur l'emploie à tout font-weight
   SANS fabriquer de faux gras. Manquent : ’ « » % € · œ, servis par Fredoka en repli. */
@font-face { font-family: "Agence Rose"; font-weight: 100 900; font-display: swap;
  src: url("assets/fonts/AgenceRose-Regular.woff2") format("woff2"); }

/* ==========================================================================
   Interdits explicites de la charte — à ne jamais franchir
   --------------------------------------------------------------------------
   · aucune couleur hors palette                       (p.18)
   · aucun dégradé non défini dans la charte           (p.23)
   · le logo n'est jamais recoloré hors palette        (p.23)
   · le logo n'est ni tourné, ni étiré, ni ombré,
     ni contouré, ni rendu semi-transparent            (p.16)
   · pas de vectorisation inutile du texte             (p.32)
   · interlignage jamais tassé ni excessivement espacé (p.32)
   ========================================================================== */