/*
Theme Name: DAA International Child
Theme URI: https://daainternational.org
Template: hello-elementor
Description: Thème enfant du thème gratuit Hello Elementor, appliquant la charte graphique MasterBrand DAA International (Brandbook 2026 v1.0) et fournissant une bibliothèque d'éléments réutilisables (boutons, cartes satellites, badge Sovereign Trust Index, bloc floutage tactique, motif African Network Pattern, etc.). À installer sur chaque site de l'écosystème DAA (daainternational.org, developperautrement.net, daacademy.org, odacity.org, developperautrement.cm), avec la variable --daa-accent-secondaire ajustée par satellite.
Version: 1.1.0
Author: DAA International
Text Domain: daa-child
*/

/* ==========================================================================
   1. VARIABLES DE MARQUE — CHARTE GRAPHIQUE MASTERBRAND DAA (Brandbook 2026)
   Ces valeurs doivent être répliquées à l'identique dans Elementor
   (Site Settings > Global Colors / Global Fonts) pour que les widgets
   natifs Elementor (non couverts par ce fichier) restent cohérents.
   ========================================================================== */
:root{
  /* Palette principale (commune à tous les satellites) */
  --daa-bleu-nuit: #0D1B2A;
  --daa-or: #C8A84B;
  --daa-blanc: #FFFFFF;

  /* Couleurs neutres (Brandbook 2026, section 04) */
  --daa-gris-graphite: #444444;
  --daa-gris-clair: #D9D9D9;

  /* Couleurs satellites officielles (Brandbook 2026, section 04) */
  --daa-vert-emeraude: #1D6B4A;   /* DAA Media */
  --daa-bleu-ardoise: #3A5068;    /* DAA Academy */
  --daa-terracotta: #8B4A2A;      /* DAA Connect */
  --daa-rouge-bourgogne: #7A2942; /* DAA Cameroun (hors Brandbook — proposé pour compléter la palette satellite) */

  /* Palette secondaire active — À AJUSTER PAR SATELLITE avant mise en prod :
     DAA International (hub) : #0D1B2A (pas de secondaire, garder l'or seul)
     DAA Media (.net)        : var(--daa-vert-emeraude)
     DAA Academy             : var(--daa-bleu-ardoise)
     DAA Connect (odacity)   : var(--daa-terracotta)
     DAA Cameroun (.cm)      : var(--daa-rouge-bourgogne) */
  --daa-accent-secondaire: var(--daa-vert-emeraude);

  /* Typographie — Montserrat uniquement, partout (Brandbook 2026, section 05).
     Repli : Arial. Lora et Inter ne sont plus utilisées. */
  --daa-font-titres: 'Montserrat', Arial, sans-serif;
  --daa-font-corps: 'Montserrat', Arial, sans-serif;

  /* Espacements standard */
  --daa-radius: 6px;
  --daa-ombre: 0 8px 24px rgba(13, 27, 42, 0.12);
}

body, p, li, blockquote {
  font-family: var(--daa-font-corps);
}
h1, h2, h3, h4, h5, h6, .elementor-heading-title {
  font-family: var(--daa-font-titres);
}

/* ==========================================================================
   2. HEADER COMMUN
   Structure attendue (construite dans Elementor Theme Builder si Pro,
   sinon en haut de chaque page) : logo à gauche, nav au centre,
   lien "DAA International" à droite. Fond bleu nuit sur tous les sites.
   ========================================================================== */
.daa-header{
  background: var(--daa-bleu-nuit);
}
.daa-header .daa-header__lien-hub{
  color: var(--daa-or);
  font-family: var(--daa-font-titres);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--daa-or);
  padding: 8px 18px;
  border-radius: 999px;
  transition: all .2s ease;
}
.daa-header .daa-header__lien-hub:hover{
  background: var(--daa-or);
  color: var(--daa-bleu-nuit);
}
.daa-header nav a{
  color: var(--daa-blanc);
  font-family: var(--daa-font-titres);
  font-weight: 500;
}
.daa-header nav a:hover{
  color: var(--daa-or);
}

/* ==========================================================================
   3. FOOTER COMMUN
   Bloc "L'écosystème DAA" + tagline + réseaux sociaux DAA International.
   ========================================================================== */
.daa-footer{
  background: var(--daa-bleu-nuit);
  color: var(--daa-blanc);
  padding: 64px 0 32px;
}
.daa-footer a{
  color: var(--daa-or);
  text-decoration: none;
}
.daa-footer a:hover{
  text-decoration: underline;
}
.daa-footer__tagline{
  font-family: var(--daa-font-titres);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-top: 32px;
}
.daa-footer__ecosysteme-titre{
  font-family: var(--daa-font-titres);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--daa-or);
  margin-bottom: 12px;
}

/* ==========================================================================
   4. BOUTONS DAA
   Classes à ajouter manuellement dans l'onglet "Avancé > CSS Classes"
   de n'importe quel bouton Elementor.
   ========================================================================== */
.daa-btn{
  display: inline-block;
  padding: 14px 32px;
  border-radius: 4px;
  font-family: var(--daa-font-titres);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: all .2s ease;
  cursor: pointer;
}
.daa-btn-primaire{
  background: var(--daa-or);
  color: var(--daa-bleu-nuit) !important;
  border: 2px solid var(--daa-or);
}
.daa-btn-primaire:hover{
  background: transparent;
  color: var(--daa-or) !important;
}
.daa-btn-secondaire{
  background: transparent;
  color: var(--daa-blanc) !important;
  border: 2px solid var(--daa-blanc);
}
.daa-btn-secondaire:hover{
  background: var(--daa-blanc);
  color: var(--daa-bleu-nuit) !important;
}

/* ==========================================================================
   5. CARTE SATELLITE DAA
   Pour présenter DAA Media / DAA Academy / DAA Connect / DAA Cameroun
   sur daainternational.org, ou une offre/fiche bailleur sur OdaFunding.
   ========================================================================== */
.daa-carte{
  border: 1px solid rgba(13,27,42,0.1);
  border-radius: var(--daa-radius);
  padding: 32px;
  background: var(--daa-blanc);
  transition: box-shadow .2s ease, transform .2s ease;
}
.daa-carte:hover{
  box-shadow: var(--daa-ombre);
  transform: translateY(-2px);
}
.daa-carte__badge{
  display: inline-block;
  background: var(--daa-bleu-nuit);
  color: var(--daa-or);
  font-family: var(--daa-font-titres);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}

/* ==========================================================================
   6. BLOC FLOUTAGE TACTIQUE
   Le contenu premium reste visuellement présent mais flouté,
   avec un cadenas doré. Ne jamais remplacer par un mur vide.
   Utiliser via le shortcode [daa_floutage] (voir functions.php)
   ou en appliquant manuellement les classes ci-dessous à deux
   conteneurs Elementor imbriqués (position relative / absolue).
   ========================================================================== */
.daa-floutage{
  position: relative;
  overflow: hidden;
  border-radius: var(--daa-radius);
}
.daa-floutage__contenu{
  filter: blur(6px);
  user-select: none;
  pointer-events: none;
}
.daa-floutage__overlay{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: rgba(13,27,42,0.55);
  color: var(--daa-blanc);
}
.daa-floutage__cadenas{
  font-size: 28px;
  color: var(--daa-or);
  margin-bottom: 8px;
}
.daa-floutage__overlay p{
  font-family: var(--daa-font-titres);
  font-size: 14px;
  margin: 0;
}

/* ==========================================================================
   7. BADGE SOVEREIGN TRUST INDEX (🌍 1 à 5)
   Utiliser via le shortcode [daa_trust_index level="4"]
   ========================================================================== */
.daa-trust-index{
  font-size: 20px;
  letter-spacing: 3px;
  white-space: nowrap;
}
.daa-trust-index__empty{
  opacity: 0.25;
  filter: grayscale(1);
}

/* ==========================================================================
   8. BLOC CTA NEWSLETTER (L'Essentiel)
   ========================================================================== */
.daa-cta-newsletter{
  background: var(--daa-bleu-nuit);
  color: var(--daa-blanc);
  border-radius: var(--daa-radius);
  padding: 40px;
  text-align: center;
}
.daa-cta-newsletter h3{
  color: var(--daa-blanc);
  margin-top: 0;
}
.daa-cta-newsletter p{
  color: rgba(255,255,255,0.75);
}

/* ==========================================================================
   9. MOTIF GRAPHIQUE — AFRICAN NETWORK PATTERN
   Filigrane discret (nœuds + lignes), jamais en compétition avec le
   contenu (Brandbook 2026, section 07). Deux variantes :
   .daa-motif-reseau       → nœuds or, pour fonds Bleu Nuit / sombres
   .daa-motif-reseau--clair → nœuds bleu nuit, pour fonds blancs / clairs
   Usage : ajouter la classe au conteneur Elementor (onglet Avancé > CSS
   Classes). L'opacité est déjà intégrée à la couleur du motif (alpha des
   codes hexadécimaux ci-dessous) : ne pas ajouter `opacity` sur le
   conteneur lui-même, cela atténuerait aussi le contenu.
   ========================================================================== */
.daa-motif-reseau,
.daa-motif-reseau--clair{
  position: relative;
}
.daa-motif-reseau::before,
.daa-motif-reseau--clair::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 120px 120px;
}
.daa-motif-reseau > *,
.daa-motif-reseau--clair > *{
  position: relative;
  z-index: 1;
}
.daa-motif-reseau::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='10' cy='10' r='2.5' fill='%23C8A84B2E'/%3E%3Ccircle cx='70' cy='40' r='2.5' fill='%23C8A84B2E'/%3E%3Ccircle cx='30' cy='90' r='2.5' fill='%23C8A84B2E'/%3E%3Ccircle cx='100' cy='100' r='2.5' fill='%23C8A84B2E'/%3E%3Cline x1='10' y1='10' x2='70' y2='40' stroke='%23C8A84B2E' stroke-width='1'/%3E%3Cline x1='70' y1='40' x2='100' y2='100' stroke='%23C8A84B2E' stroke-width='1'/%3E%3Cline x1='30' y1='90' x2='70' y2='40' stroke='%23C8A84B2E' stroke-width='1'/%3E%3Cline x1='30' y1='90' x2='100' y2='100' stroke='%23C8A84B2E' stroke-width='1'/%3E%3C/svg%3E");
}
.daa-motif-reseau--clair::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='10' cy='10' r='2.5' fill='%230D1B2A1A'/%3E%3Ccircle cx='70' cy='40' r='2.5' fill='%230D1B2A1A'/%3E%3Ccircle cx='30' cy='90' r='2.5' fill='%230D1B2A1A'/%3E%3Ccircle cx='100' cy='100' r='2.5' fill='%230D1B2A1A'/%3E%3Cline x1='10' y1='10' x2='70' y2='40' stroke='%230D1B2A1A' stroke-width='1'/%3E%3Cline x1='70' y1='40' x2='100' y2='100' stroke='%230D1B2A1A' stroke-width='1'/%3E%3Cline x1='30' y1='90' x2='70' y2='40' stroke='%230D1B2A1A' stroke-width='1'/%3E%3Cline x1='30' y1='90' x2='100' y2='100' stroke='%230D1B2A1A' stroke-width='1'/%3E%3C/svg%3E");
}