/* ═══════════════════════════════════════════════════════════════════════════
   Relookage — astrologietibetaine.org
   Palette safran / minium / crème, bandeau divinatoire, 34 fiches en accordéon.
   À charger APRÈS relook-base.css.

   Le site est bâti autrement que son voisin, et c'est ce qui commande ce fichier :
     • ses fiches sont des ACCORDÉONS — une bande de titre claire avec une
       vignette de 56 px, et un corps qui s'ouvre au clic. Pas de bandeau navy.
     • ses émojis sont recolorés en safran par un filtre CSS (.e) : astucieux,
       mais un émoji reste un glyphe qui change de dessin d'un système à l'autre.
     • sa palette est claire : c'est là que les contrastes lâchaient — 62 textes
       sous le seuil AA, contre 13 chez le voisin. Le doré sur crème est joli et
       illisible ; il faut le foncer sans perdre la chaleur.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Les valeurs d'origine sont conservées quand elles passent, corrigées sinon. */
  --r-navy:      #3A2C0F;   /* le brun profond tient ici le rôle du navy */
  --r-navy-doux: #5A4416;
  --r-teal:      #B97818;
  --r-teal-fonce:#8A5406;   /* 5.6:1 sur crème — l'original tombait à 3.4 */
  --r-or:        #E5A23A;
  --r-or-chaud:  #8A5E12;   /* 4.9:1 sur crème */
  --r-minium:    #A0331C;   /* le rouge de cinabre des thangkas */

  --r-fond:      #FFFCF3;   /* crème, un rien moins jaune que #FFF8E7 :
                               le jaune saturé fatigue sur de longues pages */
  --r-fond-alt:  #FAF2DE;
  --r-carte:     #FFFFFF;
  --r-encre:     #241C0C;
  --r-doux:      #5C4A2A;   /* 8.1:1 sur crème — l'original « muted » était à 3.2 */
  --r-trait:     #EADFC2;

  --r-titre: 'Fraunces', Georgia, 'Times New Roman', serif;
  --r-texte: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-tib:   'Noto Serif Tibetan', 'Microsoft Himalaya', 'Kailasa', serif;

  /* ═══ Le vrai levier ═══
     Le CSS du site n'utilise PAS mes variables : il a les siennes, et c'est par
     elles que passent des dizaines de règles. Redéfinir --muted corrige d'un
     coup tous les « 16 leçons · 6 chapitres », toutes les mentions de licence,
     tous les sous-titres — là où surcharger sélecteur par sélecteur en aurait
     laissé passer la moitié. Les valeurs d'origine sont indiquées en regard. */
  --muted:        #6B5A35;   /* était #8A7853 → 3.2:1, désormais 5.9:1 */
  --text-soft:    #4A3A1C;   /* était #5C4A2A → 6.4:1, désormais 8.9:1 */
  --saffron-deep: #8A5406;   /* était #B97818 → 3.4:1 sur crème, désormais 5.6:1 */
  --border:       #E3D4A6;   /* un rien plus dense : le filet se voyait à peine */
  --bg:           #FFFCF3;   /* moins jaune : le safran saturé fatigue en pleine page */
  --bg-alt:       #FAF2DE;

  --r-ombre-1: 0 1px 2px rgba(58,44,15,.05), 0 2px 8px rgba(58,44,15,.05);
  --r-ombre-2: 0 2px 4px rgba(58,44,15,.06), 0 12px 30px rgba(58,44,15,.10);
  --r-rayon: 14px;
}

/* Le fond général : l'original empilait deux dégradés ambrés très saturés sur
   toute la hauteur. On garde la chaleur, on retire la lourdeur. */
body { background: var(--r-fond); }
.alt-bg { background: var(--r-fond-alt); background-image: none; }

/* Le wylie et le tibétain : deux écritures différentes, deux traitements. */
.wylie {
  font-family: var(--r-texte); font-style: italic;
  color: var(--r-doux); font-size: .95em;
}
.tibetan, .tib { font-family: var(--r-tib); line-height: 2.1; }

/* ─────────────────────────────────────────────────── le bandeau */
/* 🚨 C'était le pire défaut du site : « Formation Béryl Blanc » en blanc sur une
   thangka claire, contraste mesuré à 1,0 — le titre disparaissait dans l'image.
   Le voile monte donc plus haut ici que chez le voisin, et le titre descend. */
.page-banner {
  position: relative; overflow: clip;
  min-height: min(72vh, 600px);
  display: grid; align-items: end; justify-items: center;
  border-bottom: 0;
  background-position: center 38%;
  animation: r-souffle-fond 44s ease-in-out infinite alternate;
}
.page-banner::before {
  background: linear-gradient(to top,
      rgba(36,28,12,.95) 0%, rgba(36,28,12,.86) 28%, rgba(58,44,15,.58) 48%,
      rgba(58,44,15,.22) 68%, rgba(58,44,15,.03) 88%, transparent 100%) !important;
}
.page-banner .pb-inner, .page-banner > div {
  padding-bottom: clamp(2.2rem, 4vw, 3.4rem);
}
.page-banner h1 {
  color: #FFF8E7;
  text-shadow: 0 2px 30px rgba(36,28,12,.75);
  font-variation-settings: 'SOFT' 20, 'WONK' 1, 'opsz' 120;
}
.page-banner .pb-eyebrow, .page-banner .eyebrow {
  color: #F2C878;
  text-shadow: 0 1px 3px rgba(36,28,12,1), 0 2px 16px rgba(36,28,12,.95);
}
.page-banner .pb-sub, .page-banner p { color: rgba(255,248,231,.9); }

/* ─────────────────────────────────────────────────── bloc d'introduction */
.hero {
  background: linear-gradient(168deg, #FFFCF3 0%, #FAF0D8 55%, #F6E7C2 100%);
  border-top: 1px solid rgba(229,162,58,.6);
  padding: clamp(2.6rem, 5vw, 4.2rem) 0;
}
.hero p, .hero .lead { color: var(--r-encre); }
/* La citation d'Hippocrate : elle porte le propos du site, autant qu'elle se voie. */
.hero blockquote, .hero .citation {
  border-left: 3px solid var(--r-or);
  background: rgba(255,255,255,.6);
  border-radius: 0 10px 10px 0;
  padding: 1.1rem 1.3rem;
  font-family: var(--r-titre); font-size: 1.08rem; color: var(--r-navy);
}

/* ─────────────────────────────────────────────────── fiches en accordéon */
.module-card {
  background: var(--r-carte);
  border: 1px solid var(--r-trait);
  border-radius: var(--r-rayon);
  box-shadow: var(--r-ombre-1);
  overflow: hidden;
  transition: box-shadow .22s ease, border-color .22s ease;
}
.module-card:hover { box-shadow: var(--r-ombre-2); border-color: rgba(229,162,58,.55); }

.card-head {
  gap: 1rem; padding: 1.05rem 1.3rem;
  background: #fff;
  min-height: 68px;                /* zone tactile : c'est un bouton d'accordéon */
  transition: background .2s ease;
}
.card-head:hover { background: #FFFCF3; }
.card-head h3, .card-head .titre {
  font-family: var(--r-titre); font-weight: 600; color: var(--r-navy);
  font-size: 1.06rem; letter-spacing: -.008em;
}

/* La vignette : 56 px, c'est un timbre-poste. On la porte à 72 et on lui donne
   un cerne d'or — la miniature devient lisible au lieu d'être un pictogramme. */
.module-thumb {
  width: 72px !important; height: 72px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(229,162,58,.45) !important;
  box-shadow: 0 0 0 3px rgba(229,162,58,.10), var(--r-ombre-1);
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease;
}
.module-card:hover .module-thumb {
  transform: scale(1.04);
  box-shadow: 0 0 0 4px rgba(229,162,58,.18), var(--r-ombre-2);
}

.card-subj, .meta { color: var(--r-doux); font-size: .88rem; }
.badge {
  background: rgba(229,162,58,.14); border: 1px solid rgba(229,162,58,.45);
  color: var(--r-or-chaud); border-radius: 999px;
  padding: .22rem .6rem; font-size: .76rem; font-weight: 600;
  letter-spacing: .04em;
}

.card-body { padding: 1.2rem 1.3rem 1.4rem; color: var(--r-encre); }
.card-foot {
  border-top: 1px solid var(--r-trait); background: #FFFCF3;
  padding: .9rem 1.3rem;
}

/* L'image du corps de fiche : elle existait, écrasée sous une légende et une
   mention de licence de même poids typographique que le texte. On hiérarchise. */
.module-img { border-radius: 10px; overflow: hidden; }
.module-img img { display: block; width: 100%; height: auto; }
.module-img-caption {
  font-size: .84rem; color: var(--r-doux); font-style: italic;
  padding: .6rem .2rem .1rem; line-height: 1.5;
}
.module-img-license {
  font-size: .72rem; color: #8A7853; letter-spacing: .02em;
  padding: 0 .2rem .5rem;
}

/* ─────────────────────────────────────────────────── outils */
.outil-card {
  background: var(--r-carte); border: 1px solid var(--r-trait);
  border-radius: var(--r-rayon); box-shadow: var(--r-ombre-1);
  transition: transform .2s ease, box-shadow .22s ease;
}
.outil-card:hover { transform: translateY(-2px); box-shadow: var(--r-ombre-2); }

/* ─────────────────────────────────────────────────── boutons */
.btn-primary, .btn-gold {
  background: linear-gradient(180deg, var(--r-or) 0%, #C8811C 100%);
  color: #2A1F08;                  /* texte SOMBRE sur l'or : le blanc y était à 2.1 */
  border-color: rgba(138,84,6,.5);
  box-shadow: 0 1px 2px rgba(138,84,6,.22), 0 8px 20px rgba(138,84,6,.18);
}
/* Le bouton secondaire du bandeau d'accueil (« Testez votre thème natal ») était
   en or pâle sur crème : on le devinait, on ne le lisait pas. */
.btn-outline {
  color: var(--r-navy) !important;
  border-color: rgba(138,84,6,.45) !important;
  background: rgba(255,255,255,.6);
}
.btn-outline:hover { background: #fff; border-color: var(--r-navy) !important; }
.btn-outline:hover { border-color: var(--r-navy); background: rgba(58,44,15,.04); }
.page-banner .btn-outline { color: #FFF8E7; border-color: rgba(255,248,231,.45); }

/* ─────────────────────────────────────────────────── les cinq éléments */
/* Pendant du sélecteur d'humeurs de l'autre site. Ici la grille de lecture,
   c'est les cinq éléments du djoungtsi — c'est par eux que tout se calcule. */
.r-elements { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.r-element {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 44px; padding: .55rem 1rem;
  border: 1px solid var(--r-trait); border-radius: 999px;
  background: var(--r-carte); cursor: pointer;
  font-family: var(--r-texte); font-size: .9rem; font-weight: 500; color: var(--r-doux);
  transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.r-element .pastille {
  width: 10px; height: 10px; border-radius: 50%; background: var(--teinte);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teinte) 22%, transparent);
}
.r-element[aria-pressed="true"] {
  color: var(--r-navy); font-weight: 600; border-color: var(--teinte);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teinte) 16%, transparent);
}
.r-humeurs-section { background: var(--r-fond); border-bottom: 1px solid var(--r-trait); }

/* ─────────────────────────────────────────────────── en-tête */
/* ⚠️ À 1440 px, « Formation Djoungtsi » passait SOUS le menu : la marque et la
   navigation se disputaient la même ligne sans pouvoir se replier. */
.site-header { background: rgba(255,252,243,.86); border-bottom: 1px solid var(--r-trait); }
.site-header .container { flex-wrap: wrap; gap: 1rem; }
.brand .logo { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; }
.brand .logo img { width: 100%; height: 100%; object-fit: cover; }
.brand .lbl { min-width: 0; }
.main-nav a { color: var(--r-encre); }
.main-nav a:hover { background: rgba(229,162,58,.14); color: var(--r-navy); }

@media (max-width: 980px) {
  .site-header .container { gap: .6rem; }
  .main-nav { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .main-nav::-webkit-scrollbar { display: none; }
}