/*
 * Theme Name:  ARCHÉA-tt5
 * Theme URI:   https://blog.archea.re
 * Description: Thème enfant TT5 — Projet KARO — Souveraineté alimentaire, La Réunion
 * Template:    twentytwentyfive
 * Version:     1.2
 * Author:      ARCHÉA — Christophe Bresso, René Siegfried
 * License:     CC BY-SA 4.0
 */

/* ════════════════════════════════════════════════════════════
   0. VARIABLES — SOURCE DE VÉRITÉ UNIQUE
   ════════════════════════════════════════════════════════════ */
:root {
  /* Primaires */
  --primary-dark:   #1A7A5C;
  --primary:        #2D8C6E;
  --primary-light:  #52B788;
  --primary-lighter:#A8D5C2;
  --primary-lightest:#D6EDE5;
  /* Secondaires */
  --secondary:      #0082A0;
  --secondary-light:#DCF2F6;
  --secondary-dark: #005F78;
  /* Accents */
  --accent-1:       #D03500; /* Lave,ex : #C4440A */
  --accent-2:       #DA763F; /* Ocre,ex : #D4813A */
  --accent-3:       #F5E6D3; /* Ocre clair */
  /* Fond et Texte */
  --base:           #2C2420; /* Noir chaud */
  --contrast:       #FAF9F6; /* Blanc cassé */
  /* Neutres */
  --neutral-dark:   #4A4540;
  --neutral:        #9A9590;
  --neutral-light:  #EAE7E0;
  /* Typo */
  --font-titre: 'Inter', 'Liberation Sans', Arial, sans-serif;
  --font-corps: 'Atkinson Hyperlegible', Arial, sans-serif;
  /* Ombres & Transitions */
  --shadow-sm:  0 1px  8px rgba(0,0,0,.35);
  --shadow-md:  0 3px 16px rgba(0,0,0,.45);
  --shadow-lg:  0 6px 28px rgba(0,0,0,.55);
  --transition: 0.18s ease;
}

/* ════════════════════════════════════════════════════════════
   1. RESET HÉRITAGE TT5 — GESTION DE LA TRANSPARENCE
   ════════════════════════════════════════════════════════════ */

/* On force le body à utiliser la couleur de fond globale (Noir chaud) */
body {
  background-color: var(--base) !important;
  color: var(--contrast);
}

/* * On force la transparence UNIQUEMENT sur les enveloppes structurelles 
 * de WordPress, pour éviter que TT5 n'injecte un fond blanc. 
 * On évite le sélecteur universel (*) pour ne pas casser vos cartes colorées.
 */
.wp-site-blocks,
.wp-block-template-part,
main,
.entry-content,
.wp-block-post-content {
  background-color: transparent !important;
}

/* Reset navigation pour éviter les blocs blancs parasites */
.wp-block-navigation,
.wp-block-navigation .wp-block-navigation__container,
.wp-block-navigation .wp-block-navigation-item,
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-navigation > ul,
.wp-block-navigation > ul > li {
  background-color: transparent !important;
  color: var(--contrast);
}

/* Reset couleurs par défaut TT5 sur liens globaux */
a { color: var(--primary-lighter); }
a:hover { color: var(--primary-light); text-decoration: none; }
a:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 2px; }

/* ════════════════════════════════════════════════════════════
   2. EN-TÊTE
   ════════════════════════════════════════════════════════════ */
.wp-block-template-part[data-area="header"],
header.wp-block-template-part {
  background-color: var(--base);
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: var(--shadow-md);
}

/* Barre tricolore — signature visuelle ARCHÉA */
.wp-block-template-part[data-area="header"]::before,
header.wp-block-template-part::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(
    to right,
    var(--accent-1) 0% 40%,
    var(--secondary) 40% 70%,
    var(--primary-dark) 70% 100%
  );
}

.wp-block-site-title a {
  font-family: var(--font-titre) !important;
  font-weight: 300 !important;
  text-transform: uppercase;
  text-decoration: none !important;
}
.wp-block-site-tagline { color: var(--neutral); }

/* ════════════════════════════════════════════════════════════
   3. TYPOGRAPHIE SECONDAIRE
   ════════════════════════════════════════════════════════════ */
p, li, td, th { color: var(--contrast); }
strong, b { color: var(--contrast); font-weight: 700; }
em, i { color: var(--primary-lighter); }
small { font-size: 0.78rem; color: var(--neutral); }

/* Filet coloré sur titres — classes utilitaires mises à jour */
.archea-h-lave  { border-left: 3px solid var(--accent-1); padding-left: 0.75rem; color: var(--accent-1) !important; }
.archea-h-lagon { border-left: 3px solid var(--secondary); padding-left: 0.75rem; color: var(--secondary) !important; }
.archea-h-foret { border-left: 3px solid var(--primary-dark); padding-left: 0.75rem; color: var(--primary-light) !important; }
.archea-h-ocre  { border-left: 3px solid var(--accent-2); padding-left: 0.75rem; color: var(--accent-2) !important; }

/* ════════════════════════════════════════════════════════════
   4. BLOCS GUTENBERG (Survol rapide des corrections couleurs)
   ════════════════════════════════════════════════════════════ */
.wp-block-quote {
  background-color: var(--neutral-dark) !important;
  border-left: 4px solid var(--accent-2) !important;
}
.wp-block-pullquote {
  background-color: var(--primary-dark) !important;
  border-color: var(--accent-2) !important;
}
.wp-block-code, pre, code {
  background-color: var(--neutral-dark) !important;
  color: var(--primary-lighter) !important;
}

/* Boutons */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background-color: var(--accent-1) !important;
  color: var(--secondary-dark) !important;
  border: none !important;
  
}
.wp-block-button.is-style-outline .wp-block-button__link {
  border: 2px solid var(--secondary) !important;
  color: var(--primary-lighter) !important;
}
.wp-block-button:hover .wp-block-button__link {
  background-color: var(--secondary-dark) !important;
  color: var(--contrast) !important;
}
.wp-block-button{
  font-weight: 100 !important;
  font-size: 0.725rem !important;
  padding: 0 !important;
}

.wp-block-button.fond-transparent .wp-block-button__link {
    background-color: transparent !important;
    border: none;
    
}

.wp-block-button.fond-transparent .wp-block-button__link .wp-element-button {
    color: var(--base);
}
/* Optionnel : Changer la couleur au survol pour que l'utilisateur sache qu'on peut cliquer */
.wp-block-button.fond-transparent .wp-block-button__link:hover {
    color: var(--accent-2) !important;
    background-color: transparent !important;
}
/* Neutralisation complète du conteneur et de la liste WordPress */
.wp-block-latest-posts,
.wp-block-latest-posts *,
.latest-posts-archea,
.wp-block-latest-posts__list,
.wp-block-latest-posts > li {
  background-color: transparent !important;
  box-shadow: none !important; /* On enlève les ombres globales du bloc */
}

/* Application des couleurs de police et typographies d'ARCHÉA */
.wp-block-latest-posts li,
.wp-block-latest-posts li a {
  font-family: var(--font-corps);
  color: var(--contrast) !important; /* Votre blanc cassé */
  transition: color var(--transition);
}

/* Effet au survol des titres d'articles */
.wp-block-latest-posts li a:hover,
.wp-block-latest-posts li a:focus {
  color: var(--primary-light) !important; /* Le vert s'illumine au survol */
}

/* Neutralisation du bloc de requête global et de sa grille */
.wp-block-query,
.wp-block-post-template,
.wp-block-post {
  background-color: transparent !important;
  color: var(--contrast) !important;
}

/* Si vous voulez donner un style "carte flottante discrète" à chaque article de la boucle */
.wp-block-post {
  background-color: var(--neutral-dark) !important; /* Évite le blanc, reste dans le sombre */
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

/* Interaction de la carte au survol */
.wp-block-post:hover {
  transform: translateY(-4px);
  border-color: var(--primary-dark);
  box-shadow: var(--shadow-md);
}

/* Forcer la couleur du titre de l'article dans la boucle */
.wp-block-post-title a {
  font-family: var(--font-titre);
  color: var(--contrast) !important;
  text-decoration: none;
}

.wp-block-post-title a:hover {
  color: var(--primary-light) !important;
}

.fond-transparent {
  background-color: transparent !important;
}

/* ════════════════════════════════════════════════════════════
   5. COMPOSANTS UTILITAIRES ARCHÉA
   ════════════════════════════════════════════════════════════ */
/* Notes */
.archea-note--info .archea-note-bar { background: var(--accent-2); }
.archea-note--info .archea-note-body { background: rgba(212,129,58,.15); }

/* Stats */
.archea-stat-card--lave { background: rgba(196,68,10,.18); }
.archea-stat-card--lave .archea-stat-val { color: var(--accent-1); }

/* Timeline */
.archea-timeline::before { background: linear-gradient(to bottom, var(--accent-1), var(--secondary), var(--primary-dark)); }
.archea-timeline-item::before { background: var(--accent-1); border-color: var(--base); }

/* Cover Dark (encadré sombre) */
.archea-cover-dark {
  background-color: var(--neutral-dark);
  border-radius: 3px;
  padding: 2rem 2.5rem;
  position: relative;
  overflow: hidden;
}
.archea-cover-dark::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(to right, var(--accent-1) 40%, var(--secondary) 40% 70%, var(--primary-dark) 70%);
}

/* ════════════════════════════════════════════════════════════
   6. PIED DE PAGE
   ════════════════════════════════════════════════════════════ */
.wp-block-template-part[data-area="footer"],
footer.wp-block-template-part {
  background-color: var(--base);
  border-top: 1px solid var(--secondary);
  margin-top: 4rem;
}
footer p, footer li, footer span { color: var(--neutral) !important; }

/* ════════════════════════════════════════════════════════════
   CORRECTION ALTERNANCE IMAGES/TEXTES SUR MOBILE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 782px) {
  
  /* Force le bloc colonnes ciblé à inverser l'ordre de ses enfants */
  .wp-block-columns.archea-reverse-mobile {
    display: flex !important;
    flex-direction: column-reverse !important;
  }

  /* Optionnel : Ajustement de l'espacement une fois empilés */
  .wp-block-columns.archea-reverse-mobile .wp-block-column {
    margin-bottom: var(--wp--preset--spacing--md);
  }
  .wp-block-columns.archea-reverse-mobile .wp-block-column:first-child {
    margin-bottom: 0; /* Évite un double espace sous l'image */
  }
}