/* ==========================================================================
   Charte graphique Calcul Animaux — tokens & fondations
   Source : design system « Terracotta bienveillant » (Claude Design)
   Les variables --global-palette1..9 sont générées par Kadence (palette globale).
   Ce fichier ajoute : alias sémantiques, couleurs d'état, teintes d'accent,
   rayons, ombres, espacements, focus, et fondations typographiques.
   ========================================================================== */

:root {
  /* Alias sémantiques sur la palette Kadence */
  --ca-accent: var(--global-palette1);
  --ca-accent-hover: var(--global-palette2);
  --ca-title: var(--global-palette3);
  --ca-text: var(--global-palette4);
  --ca-muted: var(--global-palette5);
  --ca-border: var(--global-palette6);
  --ca-bg-alt: var(--global-palette7);
  --ca-bg-card: var(--global-palette8);
  --ca-bg: var(--global-palette9);

  /* Teintes d'accent (zone de résultat, chips d'icônes, hover secondaire) */
  --ca-accent-soft: #FAE7DC;
  --ca-accent-softer: #FCF2EB;

  /* Couleurs sémantiques */
  --ca-success: #15803D;  --ca-success-bg: #E9F5EE;
  --ca-warning: #9C6503;  --ca-warning-bg: #FBF3DF;
  --ca-danger:  #B42318;  --ca-danger-bg:  #FCEBE8;

  /* Rayons */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* Ombres (teintées brun, jamais de noir pur) */
  --shadow-sm: 0 1px 2px rgba(44, 34, 26, 0.06);
  --shadow-card: 0 1px 2px rgba(44, 34, 26, 0.05), 0 4px 16px rgba(44, 34, 26, 0.07);
  --shadow-raised: 0 2px 4px rgba(44, 34, 26, 0.06), 0 10px 28px rgba(44, 34, 26, 0.11);

  /* Échelle d'espacement (base 4) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  /* Largeurs */
  --content-width: 1160px;
  --content-narrow: 760px;

  /* Typo : familles + taille du chiffre de résultat */
  --font-heading: 'Bricolage Grotesque', 'Helvetica Neue', sans-serif;
  --font-body: 'Source Sans 3', 'Helvetica Neue', sans-serif;
  --text-result: clamp(44px, 3vw + 32px, 56px);

  /* Focus clavier : double anneau blanc + accent */
  --ca-focus-ring: 0 0 0 2px var(--global-palette9), 0 0 0 4px var(--global-palette1);
}

/* Chiffres tabulaires — à appliquer sur toute valeur calculée */
.ca-tnum, .ca-resultat, .ca-resultat-chiffre {
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Chiffre clé de la zone de résultat */
.ca-resultat-chiffre {
  font-family: var(--font-heading);
  font-size: var(--text-result);
  font-weight: 800;
  line-height: 1;
  color: var(--ca-title);
}

/* Liens : souligné doux, accent au survol */
.entry-content a:not(.button):not(.kb-button) {
  color: var(--ca-accent);
  text-decoration-color: color-mix(in srgb, var(--ca-accent) 35%, transparent);
  text-underline-offset: 2px;
}
.entry-content a:not(.button):not(.kb-button):hover {
  color: var(--ca-accent-hover);
  text-decoration-color: currentColor;
}

::selection { background: var(--ca-accent-soft); }

/* Titres : text-wrap équilibré */
h1, h2, h3, h4 { text-wrap: pretty; }

/* Focus visible sur tout élément interactif */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, [role='button']:focus-visible {
  outline: none;
  box-shadow: var(--ca-focus-ring);
  border-radius: var(--radius-sm);
}

/* Animation signature : pop d'apparition de la zone de résultat (350 ms) */
@keyframes ca-result-pop {
  0% { opacity: 0; transform: scale(0.96) translateY(6px); }
  70% { opacity: 1; transform: scale(1.015) translateY(0); }
  100% { opacity: 1; transform: scale(1); }
}
.ca-resultat-pop { animation: ca-result-pop 350ms cubic-bezier(0.34, 1.2, 0.64, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .ca-resultat-pop { animation: none; }
}

/* Emplacements monétisation futurs (pub display / affiliation).
   Prévus dès maintenant, invisibles tant qu'ils sont vides :
   il suffira d'y injecter le contenu sans retoucher les gabarits. */
.ca-slot-pub, .ca-slot-partenaire { display: block; }
.ca-slot-pub:empty, .ca-slot-partenaire:empty { display: none; }