/*
Theme Name: RT2S
Theme URI: https://www.rt2s.org
Author: RT2S - Radio Télévision Du Sine Saloum
Description: Thème éditorial sur-mesure pour RT2S, structuré autour du positionnement territorial Nioro du Rip → Sine-Saloum → Sénégal → Afrique → Monde.
Version: 0.1.0
Text Domain: rt2s
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
  /* Couleurs de base */
  --rt2s-sable: #FFFFFF;       /* fond principal */
  --rt2s-sable-clair: #FFFFFF; /* fond des cartes / zones surélevées — homogène avec le fond principal */
  --rt2s-encre: #241F1C;       /* texte principal, noir chaud */
  --rt2s-encre-douce: #55504A; /* texte secondaire, métadonnées */

  /* Couleur de marque : indigo, référence à la teinture wax */
  --rt2s-indigo: #1E3A5F;
  --rt2s-indigo-clair: #EAF0F5;

  /* Accent savane : liens actifs, boutons, focus */
  --rt2s-ocre: #C98A2C;

  /* Réservé exclusivement aux tags "Local" / urgent — usage rare et volontaire */
  --rt2s-terre: #A63D2F;

  /* Puces de zones territoriales (cercle Nioro du Rip → Monde) */
  --rt2s-zone-nioro: #A63D2F;
  --rt2s-zone-sine-saloum: #C98A2C;
  --rt2s-zone-senegal: #1E3A5F;
  --rt2s-zone-afrique: #3D6B4C;
  --rt2s-zone-monde: #55504A;

  /* Typographie */
  --rt2s-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --rt2s-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Échelle typographique (base 1rem = 16px) */
  --rt2s-text-xs: 0.8125rem;
  --rt2s-text-sm: 0.9375rem;
  --rt2s-text-base: 1.0625rem;
  --rt2s-text-lg: 1.375rem;
  --rt2s-text-xl: 2rem;
  --rt2s-text-2xl: 2.75rem;

  /* Rythme / espacement */
  --rt2s-space-1: 0.5rem;
  --rt2s-space-2: 1rem;
  --rt2s-space-3: 1.5rem;
  --rt2s-space-4: 2.5rem;
  --rt2s-space-5: 4rem;

  --rt2s-max-width: 1180px;
  --rt2s-border: 1px solid rgba(36, 31, 28, 0.12);
}

/* ==========================================================================
   2. Reset minimal
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--rt2s-sable);
  color: var(--rt2s-encre);
  font-family: var(--rt2s-font-body);
  font-size: var(--rt2s-text-base);
  line-height: 1.55;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--rt2s-indigo); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--rt2s-ocre);
  outline-offset: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--rt2s-font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--rt2s-space-2);
  color: var(--rt2s-encre);
}

p { margin: 0 0 var(--rt2s-space-2); max-width: 70ch; }

ul { margin: 0; padding: 0; list-style: none; }

button { font-family: inherit; cursor: pointer; }

/* ==========================================================================
   3. Layout container
   ========================================================================== */

.rt2s-container {
  max-width: var(--rt2s-max-width);
  margin-inline: auto;
  padding-inline: var(--rt2s-space-3);
}

@media (max-width: 640px) {
  .rt2s-container { padding-inline: var(--rt2s-space-2); }
  :root { --rt2s-text-2xl: 2rem; --rt2s-text-xl: 1.5rem; }
}

/* ==========================================================================
   4. Puce de zone territoriale
   Utilisée sur les cartes d'article et les en-têtes de catégorie pour
   matérialiser le cercle Nioro du Rip → Sine-Saloum → Sénégal → Afrique → Monde.
   Ce n'est pas de la décoration : la couleur code l'information de zone.
   ========================================================================== */

.rt2s-zone {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--rt2s-text-xs);
  font-weight: 600;
  padding: 0.2em 0.65em;
  border-radius: 999px;
  background: var(--rt2s-sable-clair);
  color: var(--rt2s-encre-douce);
}

.rt2s-zone::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--rt2s-zone-couleur, var(--rt2s-encre-douce));
}

.rt2s-zone--nioro-du-rip { --rt2s-zone-couleur: var(--rt2s-zone-nioro); }
.rt2s-zone--sine-saloum { --rt2s-zone-couleur: var(--rt2s-zone-sine-saloum); }
.rt2s-zone--senegal { --rt2s-zone-couleur: var(--rt2s-zone-senegal); }
.rt2s-zone--afrique { --rt2s-zone-couleur: var(--rt2s-zone-afrique); }
.rt2s-zone--monde { --rt2s-zone-couleur: var(--rt2s-zone-monde); }

/* ==========================================================================
   5. Skip link
   ========================================================================== */

.rt2s-skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--rt2s-indigo);
  color: #fff;
  padding: var(--rt2s-space-1) var(--rt2s-space-2);
  z-index: 100;
}

.rt2s-skip-link:focus {
  left: var(--rt2s-space-2);
  top: var(--rt2s-space-2);
}

/* ==========================================================================
   6. En-tête
   ========================================================================== */

.rt2s-header {
  border-bottom: var(--rt2s-border);
  background: var(--rt2s-sable-clair);
}

.rt2s-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rt2s-space-3);
  padding-block: var(--rt2s-space-2);
}

.rt2s-header__brand { margin-right: auto; }

.rt2s-header__site-name {
  font-family: var(--rt2s-font-display);
  font-size: var(--rt2s-text-lg);
  color: var(--rt2s-encre);
}

.rt2s-header__tagline {
  margin: 0;
  font-size: var(--rt2s-text-xs);
  color: var(--rt2s-encre-douce);
}

.rt2s-menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rt2s-space-3);
}

.rt2s-header__nav .rt2s-menu a {
  color: #fff;
  background: var(--rt2s-terre);
  font-weight: 500;
  font-size: var(--rt2s-text-sm);
  padding: 0.4em 1em;
  border-radius: 999px;
  display: inline-block;
}

.rt2s-header__nav .rt2s-menu a:hover { color: #fff; background: #8C3226; text-decoration: none; }

.rt2s-menu a {
  color: var(--rt2s-encre);
  font-weight: 500;
  font-size: var(--rt2s-text-sm);
}

.rt2s-menu a:hover { color: var(--rt2s-indigo); }

.rt2s-header__search {
  display: flex;
  gap: 0.5rem;
}

.rt2s-header__search input {
  border: var(--rt2s-border);
  border-radius: 6px;
  padding: 0.4em 0.7em;
  font-size: var(--rt2s-text-sm);
  background: #fff;
}

.rt2s-header__search button {
  border: none;
  background: var(--rt2s-indigo);
  color: #fff;
  border-radius: 6px;
  padding: 0.4em 0.9em;
  font-size: var(--rt2s-text-sm);
}

/* ==========================================================================
   7. Hero (à la une)
   ========================================================================== */

.rt2s-main { padding-block: var(--rt2s-space-4); }

.rt2s-hero {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--rt2s-space-4);
  margin-bottom: var(--rt2s-space-5);
}

.rt2s-hero__media img { border-radius: 4px; }

.rt2s-hero__title { font-size: var(--rt2s-text-2xl); margin-top: var(--rt2s-space-1); }

.rt2s-hero__excerpt { color: var(--rt2s-encre-douce); }

.rt2s-hero__list-item {
  padding-block: var(--rt2s-space-2);
  border-bottom: var(--rt2s-border);
}

.rt2s-hero__list-title { font-size: var(--rt2s-text-lg); margin: 0.3em 0 0; }

@media (max-width: 860px) {
  .rt2s-hero { grid-template-columns: 1fr; }
}

/* ==========================================================================
   8. Bandeaux de zone territoriale
   ========================================================================== */

.rt2s-zone-band { margin-bottom: var(--rt2s-space-5); }

.rt2s-zone-band__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 2px solid var(--rt2s-encre);
  padding-bottom: var(--rt2s-space-1);
  margin-bottom: var(--rt2s-space-3);
}

.rt2s-zone-band__title { font-size: var(--rt2s-text-xl); margin: 0; }

.rt2s-zone-band__link { font-size: var(--rt2s-text-sm); }

.rt2s-zone-band__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--rt2s-space-3);
}

@media (max-width: 860px) {
  .rt2s-zone-band__grid { grid-template-columns: repeat(2, 1fr); }
}

.rt2s-card {
  background: var(--rt2s-sable-clair);
  border: var(--rt2s-border);
  border-radius: 4px;
  overflow: hidden;
}

.rt2s-card__media img { aspect-ratio: 16 / 10; object-fit: cover; }

.rt2s-card__body { padding: var(--rt2s-space-2); }

.rt2s-card__title { font-size: var(--rt2s-text-base); margin: 0.4em 0; }

.rt2s-card__meta { font-size: var(--rt2s-text-xs); color: var(--rt2s-encre-douce); margin: 0; }

/* ==========================================================================
   9. Bloc Radio / Télévision en direct
   ========================================================================== */

.rt2s-live {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rt2s-space-3);
  margin-bottom: var(--rt2s-space-5);
}

.rt2s-live__card {
  background: var(--rt2s-indigo);
  color: #fff;
  padding: var(--rt2s-space-3);
  border-radius: 4px;
}

.rt2s-live__card h2 { color: #fff; margin-bottom: 0.2em; }

.rt2s-live__card p { color: var(--rt2s-indigo-clair); margin: 0; }

.rt2s-live__card:hover { text-decoration: none; opacity: 0.92; }

@media (max-width: 640px) {
  .rt2s-live { grid-template-columns: 1fr; }
}

/* ==========================================================================
   10. Pied de page
   ========================================================================== */

.rt2s-footer {
  background: var(--rt2s-encre);
  color: var(--rt2s-sable-clair);
  margin-top: var(--rt2s-space-5);
}

.rt2s-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--rt2s-space-3);
  padding-block: var(--rt2s-space-4);
}

.rt2s-footer a { color: var(--rt2s-sable-clair); }

.rt2s-footer__nav { display: flex; flex-direction: column; gap: 0.5em; }

.rt2s-footer__socials { display: flex; gap: var(--rt2s-space-2); margin-top: var(--rt2s-space-1); }

.rt2s-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-block: var(--rt2s-space-2);
  font-size: var(--rt2s-text-xs);
}

@media (max-width: 640px) {
  .rt2s-footer__inner { grid-template-columns: 1fr; }
}

/* ==========================================================================
   11. Fil d'Ariane et filtre thématique (category.php)
   ========================================================================== */

.rt2s-breadcrumb {
  font-size: var(--rt2s-text-sm);
  color: var(--rt2s-encre-douce);
  margin-bottom: var(--rt2s-space-2);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}

.rt2s-archive-header { margin-bottom: var(--rt2s-space-3); }

.rt2s-filter {
  display: flex;
  align-items: center;
  gap: var(--rt2s-space-2);
  margin-bottom: var(--rt2s-space-3);
  flex-wrap: wrap;
}

.rt2s-filter__label { font-size: var(--rt2s-text-sm); color: var(--rt2s-encre-douce); }

.rt2s-filter__list { display: flex; gap: var(--rt2s-space-2); flex-wrap: wrap; }

.rt2s-filter__list a {
  font-size: var(--rt2s-text-sm);
  border: var(--rt2s-border);
  border-radius: 999px;
  padding: 0.25em 0.85em;
}

.rt2s-post-list--archive { display: flex; flex-direction: column; gap: var(--rt2s-space-3); }

.rt2s-card--row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--rt2s-space-3);
  background: transparent;
  border-bottom: var(--rt2s-border);
  border-radius: 0;
  padding-bottom: var(--rt2s-space-3);
}

@media (max-width: 640px) {
  .rt2s-card--row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   12. Page article (single.php)
   ========================================================================== */

.rt2s-single { max-width: 76ch; margin-inline: auto; }

.rt2s-single__badges {
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
  margin-bottom: var(--rt2s-space-1);
}

.rt2s-tag {
  font-size: var(--rt2s-text-xs);
  color: var(--rt2s-encre-douce);
  border: var(--rt2s-border);
  border-radius: 999px;
  padding: 0.2em 0.65em;
}

.rt2s-single__title { font-size: var(--rt2s-text-2xl); }

.rt2s-single__meta { color: var(--rt2s-encre-douce); font-size: var(--rt2s-text-sm); }

.rt2s-single__media { margin: var(--rt2s-space-3) 0; }
.rt2s-single__media img { border-radius: 4px; }

.rt2s-single__content { font-size: var(--rt2s-text-base); }
.rt2s-single__content p { max-width: none; }

.rt2s-single__share {
  display: flex;
  align-items: center;
  gap: var(--rt2s-space-2);
  margin-top: var(--rt2s-space-3);
  padding-top: var(--rt2s-space-2);
  border-top: var(--rt2s-border);
  font-size: var(--rt2s-text-sm);
}

.rt2s-single__share a {
  border: var(--rt2s-border);
  border-radius: 999px;
  padding: 0.25em 0.85em;
}

/* ==========================================================================
   13. Lecteur Radio Live / Télévision
   ========================================================================== */

.rt2s-live-page { max-width: 76ch; margin-inline: auto; }

.rt2s-player { margin-block: var(--rt2s-space-3); }

.rt2s-player audio { width: 100%; }

.rt2s-player--video {
  position: relative;
  padding-top: 56.25%;
  border-radius: 4px;
  overflow: hidden;
}

.rt2s-player--video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.rt2s-player--offline {
  background: var(--rt2s-sable-clair);
  border-radius: 4px;
  padding: var(--rt2s-space-3);
  text-align: center;
  color: var(--rt2s-encre-douce);
}

/* ==========================================================================
   14. Page Contact
   ========================================================================== */

.rt2s-contact-page { max-width: 60ch; margin-inline: auto; }

.rt2s-contact__details { margin-bottom: var(--rt2s-space-3); font-size: var(--rt2s-text-lg); }

.rt2s-form { display: flex; flex-direction: column; gap: var(--rt2s-space-2); }

.rt2s-form__row { display: flex; flex-direction: column; gap: 0.35em; }

.rt2s-form__row label { font-size: var(--rt2s-text-sm); font-weight: 500; }

.rt2s-form__row input,
.rt2s-form__row textarea {
  border: var(--rt2s-border);
  border-radius: 6px;
  padding: 0.6em 0.8em;
  font-family: inherit;
  font-size: var(--rt2s-text-base);
  background: #fff;
}

.rt2s-form__honeypot { position: absolute; left: -9999px; }

.rt2s-form button {
  align-self: flex-start;
  border: none;
  background: var(--rt2s-indigo);
  color: #fff;
  border-radius: 6px;
  padding: 0.6em 1.4em;
  font-size: var(--rt2s-text-base);
}

.rt2s-form-notice {
  padding: 0.7em 1em;
  border-radius: 6px;
  margin-bottom: var(--rt2s-space-2);
}

.rt2s-form-notice--success { background: #E4F1E8; color: #245C36; }
.rt2s-form-notice--error { background: #F6E4E1; color: var(--rt2s-terre); }

/* ==========================================================================
   15. Page auteur
   ========================================================================== */

.rt2s-author-header {
  display: flex;
  align-items: center;
  gap: var(--rt2s-space-2);
}

.rt2s-author-header img { border-radius: 50%; }

/* ==========================================================================
   16. Page 404
   ========================================================================== */

.rt2s-404 {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
  padding-block: var(--rt2s-space-4);
}

.rt2s-404__search { justify-content: center; margin-block: var(--rt2s-space-3); }

.rt2s-404__zones {
  display: flex;
  justify-content: center;
  gap: var(--rt2s-space-2);
  flex-wrap: wrap;
}

/* ==========================================================================
   17. Espaces publicitaires
   ========================================================================== */

.rt2s-ad {
  text-align: center;
}

.rt2s-ad__label {
  display: block;
  font-size: var(--rt2s-text-xs);
  color: var(--rt2s-encre-douce);
  margin-bottom: 0.4em;
}

.rt2s-ad img { margin-inline: auto; border-radius: 4px; }

.rt2s-ad--header {
  background: var(--rt2s-sable-clair);
  border-bottom: var(--rt2s-border);
  padding-block: var(--rt2s-space-2);
  position: sticky;
  top: 0;
  z-index: 40;
}

.rt2s-ad--header img { max-height: 120px; width: auto; }

.rt2s-ad--sidebar {
  background: var(--rt2s-sable-clair);
  border-radius: 4px;
  padding: var(--rt2s-space-2);
  margin-bottom: var(--rt2s-space-3);
}

.rt2s-ad--article {
  background: var(--rt2s-sable-clair);
  border-radius: 4px;
  padding: var(--rt2s-space-2);
  margin-top: var(--rt2s-space-3);
}