/*
Theme Name: FCCO – Fondation Cœur de Compassion
Theme URI: https://fondation-coeur-compassion.org
Author: SmartCom Agency
Author URI: https://smartcom-agency.fr
Description: Thème WordPress institutionnel premium pour la Fondation Cœur de Compassion (FCCO). Lutte contre la drépanocytose, dépistage, don de sang, accompagnement des patients et aide sociale. Rapide, accessible (WCAG AA), SEO-friendly, Gutenberg & ACF Pro ready. Optimisé o2switch / cPanel / PHP 8+.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fcco
Tags: nonprofit, foundation, charity, accessibility-ready, custom-colors, custom-logo, custom-menu, featured-images, block-styles, wide-blocks, translation-ready
*/

/* =========================================================================
   FCCO DESIGN SYSTEM — Tokens (CSS Custom Properties)
   Source : logo FCCO (bleu institutionnel, rouge santé, rose compassion)
   ========================================================================= */

:root {
  /* ---- Couleurs de marque (primitives) ---- */
  --fcco-blue-50:  #eaf2fb;
  --fcco-blue-100: #c9def4;
  --fcco-blue-200: #97c0ea;
  --fcco-blue-300: #5e9bdc;
  --fcco-blue-400: #2f78cc;
  --fcco-blue-500: #1b5fb4; /* Bleu institutionnel — Primary */
  --fcco-blue-600: #154c92;
  --fcco-blue-700: #103b72;
  --fcco-blue-800: #0b2a52;
  --fcco-blue-900: #071a33;

  --fcco-red-50:   #fdeaea;
  --fcco-red-100:  #f9c7c7;
  --fcco-red-200:  #f09494;
  --fcco-red-300:  #e35d5d;
  --fcco-red-400:  #d63838;
  --fcco-red-500:  #c1272d; /* Rouge santé — Secondary */
  --fcco-red-600:  #a01e25;
  --fcco-red-700:  #7c161c;

  --fcco-pink-50:  #fde8f3;
  --fcco-pink-100: #fbc4e0;
  --fcco-pink-200: #f58bc2;
  --fcco-pink-300: #ec4ca0;
  --fcco-pink-400: #e0218a; /* Rose compassion — Accent */
  --fcco-pink-500: #c5197a;
  --fcco-pink-600: #9f1361;

  /* ---- Neutres ---- */
  --fcco-white:    #ffffff;
  --fcco-gray-50:  #f7f9fb; /* Gris très clair */
  --fcco-gray-100: #eef1f5;
  --fcco-gray-200: #e0e5ec;
  --fcco-gray-300: #c7ced9;
  --fcco-gray-400: #9aa4b2;
  --fcco-gray-500: #6b7280;
  --fcco-gray-600: #4b5563;
  --fcco-gray-700: #374151;
  --fcco-gray-800: #1f2937;
  --fcco-gray-900: #0f172a;

  /* ---- Sémantique ---- */
  --color-primary:        var(--fcco-blue-500);
  --color-primary-hover:  var(--fcco-blue-600);
  --color-primary-active: var(--fcco-blue-700);
  --color-secondary:        var(--fcco-red-500);
  --color-secondary-hover:  var(--fcco-red-600);
  --color-accent:           var(--fcco-pink-400);
  --color-accent-hover:     var(--fcco-pink-500);

  --color-success: #2e9e5b;
  --color-warning: #f4a100;
  --color-error:   #d62828;
  --color-info:    var(--fcco-blue-400);

  --color-text:        var(--fcco-gray-800);
  --color-text-muted:  var(--fcco-gray-500);
  --color-text-invert: var(--fcco-white);
  --color-bg:          var(--fcco-white);
  --color-bg-subtle:   var(--fcco-gray-50);
  --color-border:      var(--fcco-gray-200);

  --overlay-dark:  rgba(7, 26, 51, 0.62);   /* dark overlay sur images héro */
  --overlay-blue:  linear-gradient(135deg, rgba(27,95,180,0.92), rgba(16,59,114,0.92));
  --gradient-brand: linear-gradient(135deg, var(--fcco-blue-500) 0%, var(--fcco-pink-400) 100%);
  --gradient-health: linear-gradient(135deg, var(--fcco-red-500) 0%, var(--fcco-pink-400) 100%);

  /* ---- Typographie ---- */
  --font-heading: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-h1: clamp(2.25rem, 1.6rem + 3.2vw, 4rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem);
  --fs-h3: clamp(1.375rem, 1.1rem + 1.3vw, 1.875rem);
  --fs-h4: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --fs-body-lg: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.65;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* ---- Espacement (échelle 4px) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Rayons / Ombres ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.14);
  --shadow-focus: 0 0 0 3px rgba(27, 95, 180, 0.45);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 820px;
  --header-h: 84px;
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================================
   RESET & BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Empêche tout débordement horizontal (ex. menu off-canvas) sans casser le header sticky. */
html { overflow-x: clip; }
body { overflow-x: clip; }

img, picture, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--transition); }
a:hover { color: var(--color-primary-hover); }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: var(--lh-tight); font-weight: var(--fw-bold); color: var(--fcco-gray-900); }
h1 { font-size: var(--fs-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.015em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
p { line-height: var(--lh-base); }
.lead, .body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-snug); color: var(--color-text-muted); }
small, .text-small { font-size: var(--fs-small); }

ul, ol { padding-left: 1.25rem; }

/* =========================================================================
   ACCESSIBILITÉ
   ========================================================================= */
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; word-wrap: normal !important;
}
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 9999;
  background: var(--color-primary); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: var(--shadow-focus); }

/* =========================================================================
   LAYOUT
   ========================================================================= */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: clamp(3rem, 7vw, 6rem); }
.section--subtle { background: var(--color-bg-subtle); }
.section--brand { background: var(--overlay-blue); color: #fff; }
.section__header { max-width: 720px; margin: 0 auto clamp(2rem,4vw,3.5rem); text-align: center; }
.section__eyebrow { display: inline-block; font-family: var(--font-heading); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8125rem; color: var(--color-accent); margin-bottom: var(--space-3); }
.section--brand .section__eyebrow { color: var(--fcco-pink-100); }
.section__title { margin-bottom: var(--space-4); }
.grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* =========================================================================
   BOUTONS
   ========================================================================= */
.btn {
  --btn-bg: var(--color-primary); --btn-fg: #fff; --btn-bg-hover: var(--color-primary-hover);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-heading); font-weight: 600; font-size: 1rem; line-height: 1;
  padding: 0.875rem 1.75rem; border-radius: var(--radius-full); border: 2px solid transparent;
  background: var(--btn-bg); color: var(--btn-fg); cursor: pointer; text-decoration: none;
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
  box-shadow: var(--shadow-sm);
}
.btn:hover { background: var(--btn-bg-hover); color: var(--btn-fg); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn--secondary { --btn-bg: var(--color-secondary); --btn-bg-hover: var(--color-secondary-hover); }
.btn--accent { --btn-bg: var(--color-accent); --btn-bg-hover: var(--color-accent-hover); }
.btn--donate { --btn-bg: var(--color-accent); --btn-bg-hover: var(--color-accent-hover); box-shadow: 0 8px 22px rgba(224,33,138,0.35); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--color-primary); border-color: var(--color-primary); box-shadow: none; }
.btn--ghost:hover { --btn-bg: var(--color-primary); --btn-fg: #fff; }
.btn--on-dark { --btn-bg: #fff; --btn-fg: var(--fcco-blue-700); --btn-bg-hover: var(--fcco-gray-100); }
.btn--lg { font-size: 1.0625rem; padding: 1.0625rem 2.25rem; }
.btn--block { display: flex; width: 100%; }

/* =========================================================================
   CARTES
   ========================================================================= */
.card {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2rem); box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--fcco-blue-100); }
.card__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--radius-md); margin-bottom: var(--space-4); background: var(--fcco-blue-50); color: var(--color-primary); }
.card__title { margin-bottom: var(--space-2); font-size: var(--fs-h4); }
.card__text { color: var(--color-text-muted); }
.card--media { padding: 0; overflow: hidden; }
.card--media img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.card--media .card__body { padding: clamp(1.25rem,3vw,1.75rem); }

.badge { display: inline-block; padding: 0.3rem 0.75rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; background: var(--fcco-blue-50); color: var(--color-primary); }

/* =========================================================================
   FORMULAIRES
   ========================================================================= */
label { font-weight: 600; font-size: var(--fs-small); display: block; margin-bottom: var(--space-2); }
input, textarea, select {
  width: 100%; font: inherit; padding: 0.75rem 1rem; border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm); background: #fff; color: var(--color-text); transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--shadow-focus); }
.field { margin-bottom: var(--space-4); }

/* =========================================================================
   UTILITAIRES
   ========================================================================= */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.flow > * + * { margin-top: var(--space-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.cluster--center { justify-content: center; }
.visually-hidden { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; overflow: hidden; }

/* Animations on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* WordPress core alignment */
.alignwide { max-width: 1100px; margin-inline: auto; }
.alignfull { width: 100%; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption-text, figcaption { font-size: var(--fs-small); color: var(--color-text-muted); margin-top: var(--space-2); text-align: center; }