/*
Theme Name: Globe Ranger
Theme URI: https://globe-ranger.fr
Author: Bilal
Description: Thème sur-mesure pour Globe Ranger, le guide convivial du safari en Afrique. Carnet de voyage chaleureux, pensé pour rendre le safari accessible à tous.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: globe-ranger
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  /* Couleurs — palette "savane conviviale" */
  --gr-bg: #F1E6D0;            /* fond papier kraft / carnet de voyage */
  --gr-bg-alt: #E8DABF;        /* fond alterné, un ton plus soutenu */
  --gr-card: #FBF6EA;          /* fond des cartes, plus clair que le fond */
  --gr-ink: #2B2318;           /* texte principal, brun encre chaude */
  --gr-ink-soft: #5A4E3C;      /* texte secondaire */
  --gr-green: #4A5D3A;         /* vert acacia — couleur d'ancrage */
  --gr-green-dark: #34432A;
  --gr-rust: #B14B2E;          /* terre cuite / brique — accent chaleureux */
  --gr-gold: #D9A441;          /* or savane — accent lumineux */
  --gr-teal: #5C7A80;          /* bleu-gris crépuscule — touche de fraîcheur */
  --gr-cream-text: #FBF6EA;    /* texte clair sur fond foncé */

  /* Typographie */
  --gr-font-display: 'Fredoka', sans-serif;
  --gr-font-body: 'Karla', sans-serif;
  --gr-font-hand: 'Caveat', cursive;

  /* Échelle */
  --gr-radius-s: 10px;
  --gr-radius-m: 18px;
  --gr-radius-l: 28px;
  --gr-shadow: 0 10px 30px rgba(43, 35, 24, 0.12);
  --gr-shadow-soft: 0 4px 14px rgba(43, 35, 24, 0.08);
  --gr-container: 1180px;
  --gr-space: 1rem;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--gr-bg);
  color: var(--gr-ink);
  font-family: var(--gr-font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; height: auto; }
a { color: var(--gr-rust); text-decoration: none; }
a:hover { color: var(--gr-green-dark); }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5 {
  font-family: var(--gr-font-display);
  color: var(--gr-ink);
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 600;
}
h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1.1em; }
.container {
  max-width: var(--gr-container);
  margin: 0 auto;
  padding: 0 24px;
}
:focus-visible {
  outline: 3px solid var(--gr-teal);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   3. BOUTONS & BADGES
   ========================================================================== */

.gr-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--gr-font-display);
  font-weight: 600;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--gr-rust);
  color: var(--gr-cream-text);
  border: 2px solid var(--gr-rust);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.gr-btn:hover { background: var(--gr-green-dark); border-color: var(--gr-green-dark); color: #fff; transform: translateY(-2px); }
.gr-btn--outline { background: transparent; color: var(--gr-ink); border-color: var(--gr-ink); }
.gr-btn--outline:hover { background: var(--gr-ink); color: var(--gr-bg); }
.gr-btn--sm { padding: 9px 18px; font-size: 0.9rem; }

.gr-eyebrow {
  display: inline-block;
  font-family: var(--gr-font-hand);
  font-size: 1.3rem;
  color: var(--gr-rust);
  transform: rotate(-2deg);
  margin-bottom: 0.2em;
}

.gr-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--gr-green);
  color: #fff;
}

/* ==========================================================================
   4. HEADER
   ========================================================================== */

.gr-header {
  background: var(--gr-bg);
  border-bottom: 3px dashed rgba(43,35,24,0.18);
  position: sticky;
  top: 0;
  z-index: 50;
}
.gr-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: var(--gr-container);
  margin: 0 auto;
}
.gr-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--gr-font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--gr-ink);
}
.gr-logo img { max-height: 46px; width: auto; border-radius: 0; }
.gr-logo .gr-logo__mark { flex-shrink: 0; }
.gr-nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--gr-ink);
  border-radius: var(--gr-radius-s);
  padding: 8px 10px;
  cursor: pointer;
}
.gr-nav-toggle span, .gr-nav-toggle span::before, .gr-nav-toggle span::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--gr-ink);
  position: relative;
  transition: 0.2s;
}
.gr-nav-toggle span::before, .gr-nav-toggle span::after { content: ""; position: absolute; left: 0; }
.gr-nav-toggle span::before { top: -7px; }
.gr-nav-toggle span::after { top: 7px; }

.gr-primary-nav ul { display: flex; gap: 6px; align-items: center; }
.gr-primary-nav a {
  color: var(--gr-ink);
  font-family: var(--gr-font-display);
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  transition: background 0.15s;
}
.gr-primary-nav a:hover { background: var(--gr-bg-alt); color: var(--gr-green-dark); }
.gr-primary-nav .gr-btn { margin-left: 6px; }

@media (max-width: 860px) {
  .gr-nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; }
  .gr-primary-nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--gr-bg);
    border-bottom: 3px dashed rgba(43,35,24,0.18);
    padding: 12px 24px 20px;
  }
  .gr-primary-nav.is-open { display: block; }
  .gr-primary-nav ul { flex-direction: column; align-items: flex-start; gap: 2px; }
  .gr-primary-nav .gr-btn { margin: 10px 0 0; }
}

/* ==========================================================================
   5. TRAIL DIVIDER (élément de signature légère)
   ========================================================================== */

.gr-trail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 0;
  opacity: 0.65;
}
.gr-trail .gr-trail__line {
  flex: 1;
  max-width: 220px;
  height: 0;
  border-top: 3px dotted var(--gr-green);
}
.gr-trail svg { flex-shrink: 0; }

/* ==========================================================================
   6. HERO
   ========================================================================== */

.gr-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 140% at 15% 0%, #E7B15E 0%, #D9A441 28%, #C2703A 58%, #7A5A34 100%);
  color: var(--gr-cream-text);
}
.gr-hero__inner {
  max-width: var(--gr-container);
  margin: 0 auto;
  padding: 76px 24px 96px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}
.gr-hero__note {
  font-family: var(--gr-font-hand);
  font-size: 1.6rem;
  color: #FFF3DE;
  display: inline-block;
  transform: rotate(-2deg);
  margin-bottom: 6px;
}
.gr-hero h1 { color: #fff; text-shadow: 0 2px 14px rgba(43,35,24,0.25); }
.gr-hero p.gr-lede { font-size: 1.15rem; max-width: 46ch; color: #FDF3E1; }
.gr-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.gr-hero__actions .gr-btn--outline { border-color: #fff; color: #fff; }
.gr-hero__actions .gr-btn--outline:hover { background: #fff; color: var(--gr-rust); }

.gr-hero__stamp {
  justify-self: end;
  background: var(--gr-card);
  color: var(--gr-ink);
  border-radius: 50%;
  width: 220px; height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: rotate(6deg);
  box-shadow: var(--gr-shadow);
  border: 3px dashed var(--gr-rust);
  font-family: var(--gr-font-display);
  padding: 20px;
}
.gr-hero__stamp strong { display: block; font-size: 1.15rem; }
.gr-hero__stamp span { font-family: var(--gr-font-hand); font-size: 1.5rem; color: var(--gr-rust); }

@media (max-width: 780px) {
  .gr-hero__inner { grid-template-columns: 1fr; padding: 52px 24px 64px; }
  .gr-hero__stamp { justify-self: center; margin-top: 20px; }
}

/* ==========================================================================
   7. SECTIONS GÉNÉRIQUES
   ========================================================================== */

.gr-section { padding: 64px 0; }
.gr-section--alt { background: var(--gr-bg-alt); }
.gr-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 34px;
  flex-wrap: wrap;
}
.gr-section__head p { color: var(--gr-ink-soft); max-width: 52ch; margin: 0; }

/* Intro "qui sommes-nous" */
.gr-intro {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: center;
}
.gr-intro__photo {
  border-radius: var(--gr-radius-l);
  overflow: hidden;
  box-shadow: var(--gr-shadow);
  border: 6px solid var(--gr-card);
  transform: rotate(-1.5deg);
}
.gr-intro__photo img { aspect-ratio: 4/5; object-fit: cover; }
@media (max-width: 780px) { .gr-intro { grid-template-columns: 1fr; } }

/* ==========================================================================
   8. CARTES ARTICLES (façon polaroid)
   ========================================================================== */

.gr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px;
}
.gr-card {
  background: var(--gr-card);
  border-radius: var(--gr-radius-m);
  overflow: hidden;
  box-shadow: var(--gr-shadow-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  flex-direction: column;
}
.gr-card:hover { transform: translateY(-4px) rotate(-0.5deg); box-shadow: var(--gr-shadow); }
.gr-card__media { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.gr-card__media img { width: 100%; height: 100%; object-fit: cover; }
.gr-card__media .gr-tag { position: absolute; top: 12px; left: 12px; }
.gr-card__body { padding: 18px 20px 22px; flex: 1; display: flex; flex-direction: column; }
.gr-card__body h3 { margin-bottom: 8px; }
.gr-card__body h3 a { color: var(--gr-ink); }
.gr-card__body h3 a:hover { color: var(--gr-rust); }
.gr-card__excerpt { color: var(--gr-ink-soft); font-size: 0.96rem; flex: 1; }
.gr-card__meta { font-family: var(--gr-font-hand); font-size: 1.15rem; color: var(--gr-rust); margin-top: 10px; }

/* ==========================================================================
   9. TIMBRES DE DESTINATION (élément signature)
   ========================================================================== */

.gr-stamps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px 24px;
}
.gr-stamp {
  display: block;
  text-align: center;
  color: var(--gr-ink);
}
.gr-stamp__circle {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px dashed var(--gr-rust);
  padding: 10px;
  margin-bottom: 14px;
  transition: transform 0.2s ease;
  background: var(--gr-card);
}
.gr-stamp:nth-child(2n) .gr-stamp__circle { border-color: var(--gr-green); transform: rotate(-3deg); }
.gr-stamp:nth-child(3n) .gr-stamp__circle { border-color: var(--gr-gold); transform: rotate(2deg); }
.gr-stamp:nth-child(4n) .gr-stamp__circle { border-color: var(--gr-teal); transform: rotate(-2deg); }
.gr-stamp:hover .gr-stamp__circle { transform: scale(1.04) rotate(0deg); }
.gr-stamp__circle img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.gr-stamp__label {
  font-family: var(--gr-font-display);
  font-weight: 600;
  font-size: 1.05rem;
}
.gr-stamp__sub {
  font-family: var(--gr-font-hand);
  color: var(--gr-rust);
  font-size: 1.1rem;
  display: block;
}

/* ==========================================================================
   10. CTA / POSTCARD BLOCKS
   ========================================================================== */

.gr-postcard {
  background: var(--gr-green);
  color: #fff;
  border-radius: var(--gr-radius-l);
  padding: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  position: relative;
  border: 2px dashed rgba(255,255,255,0.35);
}
.gr-postcard h2, .gr-postcard p { color: #fff; }
.gr-postcard p { color: #EFE9D6; max-width: 48ch; margin: 0; }
.gr-postcard .gr-btn { background: #fff; color: var(--gr-green-dark); border-color: #fff; }
.gr-postcard .gr-btn:hover { background: var(--gr-gold); border-color: var(--gr-gold); color: var(--gr-ink); }

/* ==========================================================================
   11. NEWSLETTER
   ========================================================================== */

.gr-newsletter {
  background: var(--gr-card);
  border-radius: var(--gr-radius-l);
  padding: 42px;
  text-align: center;
  border: 3px dashed var(--gr-gold);
}
.gr-newsletter h2 { margin-bottom: 6px; }
.gr-newsletter p { color: var(--gr-ink-soft); max-width: 50ch; margin: 0 auto 22px; }
.gr-newsletter form {
  display: flex;
  gap: 10px;
  max-width: 440px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.gr-newsletter input[type="email"] {
  flex: 1;
  min-width: 220px;
  padding: 13px 18px;
  border-radius: 999px;
  border: 2px solid var(--gr-ink);
  font-family: var(--gr-font-body);
  font-size: 1rem;
  background: #fff;
}
.gr-newsletter .gr-form-note { font-size: 0.82rem; color: var(--gr-ink-soft); margin-top: 12px; }
.gr-form-success { color: var(--gr-green-dark); font-weight: 700; }
.gr-form-error { color: var(--gr-rust); font-weight: 700; }

/* ==========================================================================
   12. LISTE "CONSEILS"
   ========================================================================== */

.gr-tips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 4px 32px;
}
.gr-tips li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px dashed rgba(43,35,24,0.2);
}
.gr-tips li svg { flex-shrink: 0; margin-top: 4px; }
.gr-tips a { color: var(--gr-ink); font-family: var(--gr-font-display); font-weight: 500; font-size: 1.05rem; }
.gr-tips a:hover { color: var(--gr-rust); }

/* ==========================================================================
   13. FOOTER
   ========================================================================== */

.gr-footer {
  background: var(--gr-green-dark);
  color: #EFE9D6;
  padding: 60px 0 30px;
}
.gr-footer a { color: #EFE9D6; }
.gr-footer a:hover { color: var(--gr-gold); }
.gr-footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.gr-footer h4 {
  color: var(--gr-gold);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}
.gr-footer li { margin-bottom: 4px; }
.gr-footer li::before { content: "✓ "; color: var(--gr-gold); }
.gr-footer .gr-newsletter { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.3); }
.gr-footer .gr-newsletter h2, .gr-footer .gr-newsletter p { color: #fff; }
.gr-footer .gr-newsletter input[type="email"] { border-color: rgba(255,255,255,0.5); }
.gr-footer__bottom {
  border-top: 1px dashed rgba(255,255,255,0.2);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.88rem;
  color: #C9C2AC;
}
@media (max-width: 780px) { .gr-footer__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   14. SINGLE ARTICLE
   ========================================================================== */

.gr-article-header { max-width: 760px; margin: 0 auto 32px; text-align: center; }
.gr-article-header .gr-tag { margin-bottom: 14px; }
.gr-article-meta {
  font-family: var(--gr-font-hand);
  font-size: 1.25rem;
  color: var(--gr-rust);
  margin-top: 10px;
}
.gr-article-cover {
  border-radius: var(--gr-radius-l);
  overflow: hidden;
  margin-bottom: 40px;
  box-shadow: var(--gr-shadow);
}
.gr-article-cover img { width: 100%; max-height: 480px; object-fit: cover; }
.gr-article-body {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.08rem;
}
.gr-article-body h2 { margin-top: 1.6em; }
.gr-article-body h3 { margin-top: 1.3em; }
.gr-article-body a { text-decoration: underline; text-decoration-color: var(--gr-gold); text-decoration-thickness: 2px; }
.gr-article-body img { border-radius: var(--gr-radius-m); margin: 1.5em 0; }
.gr-article-body blockquote {
  border-left: 4px solid var(--gr-rust);
  margin: 1.8em 0;
  padding: 4px 0 4px 22px;
  font-family: var(--gr-font-hand);
  font-size: 1.3rem;
  color: var(--gr-ink-soft);
}
.gr-article-body ul, .gr-article-body ol { padding-left: 1.4em; margin-bottom: 1.2em; }
.gr-article-body li { list-style: revert; margin-bottom: 0.4em; }
.gr-article-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.8em 0;
	font-size: 0.95rem;
	border-radius: var(--gr-radius-s);
	overflow: hidden;
}
.gr-article-body th, .gr-article-body td {
	padding: 12px 16px;
	border: 1px solid rgba(43,35,24,0.15);
	text-align: left;
}
.gr-article-body th {
	background: var(--gr-green);
	color: #fff;
	font-family: var(--gr-font-display);
	font-weight: 600;
}
.gr-article-body tr:nth-child(even) td { background: var(--gr-bg-alt); }

/* Fil d'ariane */
.gr-breadcrumbs {
	font-size: 0.86rem;
	color: var(--gr-ink-soft);
	margin-bottom: 18px;
	text-align: center;
}
.gr-breadcrumbs a { color: var(--gr-ink-soft); text-decoration: underline; text-decoration-color: var(--gr-gold); }
.gr-breadcrumbs a:hover { color: var(--gr-rust); }

/* ==========================================================================
   15. ARCHIVES & PAGES SIMPLES
   ========================================================================== */

.gr-archive-header { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.gr-page-body { max-width: 760px; margin: 0 auto; }
.gr-pagination { display: flex; justify-content: center; gap: 10px; margin-top: 40px; }
.gr-pagination a, .gr-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; border-radius: 50%;
  background: var(--gr-card); font-family: var(--gr-font-display); font-weight: 600;
}
.gr-pagination .current { background: var(--gr-rust); color: #fff; }

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

.gr-404 { text-align: center; padding: 90px 0; }
.gr-404 .gr-eyebrow { font-size: 1.8rem; }

/* Search form */
.gr-search-form { display: flex; gap: 8px; max-width: 420px; margin: 30px auto 0; }
.gr-search-form input[type="search"] {
  flex: 1; padding: 12px 16px; border-radius: 999px; border: 2px solid var(--gr-ink);
  font-family: var(--gr-font-body);
}