/* =========================================================
   VARIABLES GLOBALES — ONG Fiadanana Madagascar
   ========================================================= */

html, body, a, button, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

:root {
  /* Couleurs */
  --fiadanana-vert: #085604;
  --fiadanana-vert-semi-transparent: #085604d2;
  --fiadanana-vert-clair: #1c9216;
  --fiadanana-vert-fonce: #064104;
  --fiadanana-bleu: #344ee6;
  --fiadanana-bleu-fonce: #2639b8;
  --fiadanana-bleu-fond: #1e73be0d;
  --fiadanana-separator: #eeeeee28;

  /* Bordures & ombres */
  --fiadanana-radius: 14px;
  --fiadanana-radius-sm: 6px;
  --fiadanana-radius-md: 10px;
  --fiadanana-border: #d9d9d9;
  --fiadanana-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  --fiadanana-shadow-hover: 0 10px 24px rgba(0, 0, 0, 0.1);

  /* Polices */
  --font-main: Helvetica, Arial, sans-serif;
  --font-title: "Trebuchet MS", Helvetica, sans-serif;
  --font-lucida: 'LSANSUNI', "Lucida Sans Unicode", "Lucida Grande", sans-serif;

  /* Breakpoints documentaires */
  --bp-xs: 600px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  /* Structure */
  --z-header: 1000;
  --z-header-upper: 1;
  --z-header-bar: 10;
  --z-header-submenu: 20;
  --z-progress-bar: 100000;

  /* Component settings */
  --fs-footer-text: 18px;
  --fs-footer-text-mobile: 16px;
  --fiadanana-activite-ratio: 16 / 10;
  --fiadanana-gallery-shrink: 50px;
  --fiadanana-gallery-gap: 15px;
  --fiadanana-gallery-cols: 4;
  --hero-card-offset-y: 5vh;

  /* =======================================================
     TYPOGRAPHIE — Tailles
     ======================================================= */

  /* Corps de texte */
  --fs-body: 1.25rem; /* 20px */
  --fs-small: 1rem;

  /* Tailles dédiées */
  --fs-page-title: 2.4rem;
  --fs-page-subtitle: 1.25rem;
  --fs-section-title: 3rem;
  --fs-subsection-title: 1.5rem;
  --fs-card-title: 1.25rem;

  /* Titres H2 des cartes — valeur d'origine */
  --fs-home-card-title: 1.4rem;

  --fs-home-card-meta: 1.1rem;
  --fs-home-card-excerpt: 1.15rem;
  --fs-badge: 17px;
  --fs-date-day: 1.9rem;
  --fs-date-month: 1.3rem;
  --fs-button: 15px;
  --fs-section-subtitle: 1.05rem;
  --fs-header-meta: 0.85rem;
  --fs-header-org: 1.1rem;
  --fs-actualites-intro: 1.2rem;
  --fs-body-min: 18px;
  --fs-accordion-title: 1.25rem;

  /* =======================================================
     STYLES UNIFIÉS H1 / H2 / H3
     ======================================================= */

  /* H1 — hero slider + titres de sections */
  --fs-h1: clamp(44px, 4vw, 58px);
  --lh-h1: 1.15;
  --fw-h1: 700;
  --font-h1: var(--font-title);
  --ls-h1: -0.5px;

  /* H2 — titres des cartes */
  --fs-h2: var(--fs-home-card-title);
  --lh-h2: 1.2;
  --fw-h2: 800;
  --font-h2: var(--font-title);
  --ls-h2: -0.5px;

  /* H3 — sous-titres */
  --fs-h3: var(--fs-subsection-title);
  --lh-h3: 1.3;
  --fw-h3: 700;
  --font-h3: var(--font-title);
  --ls-h3: -0.3px;

  /* =======================================================
     ⭐ TITRES DE SECTION HOMEPAGE — taille dédiée
     -------------------------------------------------------
     Ces titres ont leur propre taille, indépendante du H1
     du hero. Sur grand écran : taille précédente (40px).
     Sur mobile : même taille que le H1 (voir media queries
     plus bas).
     ======================================================= */
  --fs-section-header: 40px;
  --lh-section-header: 1.15;
  --fw-section-header: 800;
  --font-section-header: var(--font-title);
  --ls-section-header: -0.6px;

  /* Graisses & interlignes */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.15;
  --lh-normal: 1.35;
  --lh-comfort: 1.6;
}

/* =========================================================
   SURCHARGES MOBILE (≤ 600px)
   ========================================================= */
@media (max-width: 1100px) {
  :root {
    --fiadanana-gallery-cols: 3;
  }
}

@media (max-width: 900px) {
  :root {
    --fiadanana-gallery-cols: 2;
  }
}

@media (max-width: 600px) {
  :root {
    --fs-body: 1.125rem; /* 18px */
    --fs-page-title: 1.8rem;
    --fs-page-subtitle: 1.05rem;
    --fs-section-title: 2rem;
    --fs-subsection-title: 1.25rem;
    --fs-card-title: 1.1rem;

    --fs-home-card-title: 1.2rem;
    --fs-home-card-meta: 1rem;
    --fs-home-card-excerpt: 1.05rem;
    --fs-badge: 15px;
    --fs-date-day: 1.6rem;
    --fs-date-month: 1.1rem;
    --fs-button: 13px;
    --fs-section-subtitle: 0.95rem;
    --fs-header-meta: 0.85rem;
    --fs-header-org: 1.1rem;
    --fs-actualites-intro: 1rem;
    --fiadanana-gallery-cols: 1;
    --fiadanana-gallery-shrink: 0px;
  }
}

/* =========================================================
   H1 — paliers responsives
   ========================================================= */

@media (max-width: 1280px) {
  :root {
    --fs-h1: clamp(36px, 5vw, 48px);
  }
}

@media (max-width: 1024px) {
  :root {
    --fs-h1: clamp(32px, 5.5vw, 42px);
  }
}

@media (max-width: 768px) {
  :root {
    --fs-h1: clamp(32px, 8vw, 38px);
    --hero-card-offset-y: 14px;
    /* ⭐ Titre de section = même taille que le H1 sur mobile */
    --fs-section-header: var(--fs-h1);
  }
}

@media (max-width: 480px) {
  :root {
    --fs-h1: clamp(28px, 8vw, 32px);
    --hero-card-offset-y: 8px;
    --fs-section-header: var(--fs-h1);
  }
}

/* =========================================================
   Police globale du site
   ========================================================= */
* {
  font-family: var(--font-main);
}

/* =========================================================
   RÈGLES GLOBALES H1 / H2 / H3 / P
   ========================================================= */

h1,
.h1 {
  font-family: var(--font-h1);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-h1);
  letter-spacing: var(--ls-h1);
  color: inherit;
  margin: 0 0 20px;
}

h2,
.h2 {
  font-family: var(--font-h2);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-h2);
  letter-spacing: var(--ls-h2);
  color: inherit;
  margin: 0 0 14px;
}

h3,
.h3 {
  font-family: var(--font-h3);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  color: inherit;
  margin: 0 0 12px;
}

p,
.p {
  font-family: var(--font-main);
  font-size: var(--fs-body);
  line-height: var(--lh-comfort);
  font-weight: var(--fw-regular);
  color: inherit;
  margin: 0 0 1em;
}