/* ═══════════════════════════════════════════════════════════════════════════
   Relookage — medecinetibetaine.org
   Palette navy / turquoise / or, bandeau à la thangka, 91 fiches de modules.
   À charger APRÈS relook-base.css.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* La palette d'origine est juste — navy, turquoise, or. On ne la remplace
     pas, on la corrige : les valeurs claires ne passaient pas le contraste AA. */
  --r-navy:      #000B33;
  --r-navy-doux: #12224E;
  --r-teal:      #23B79E;
  --r-teal-fonce:#0E7B69;   /* AA sur fond clair ; l'original tombait à 2.5 */
  --r-or:        #D4A24C;
  --r-or-chaud:  #8A5E12;   /* 4.9:1 sur parchemin — #A9761F plafonnait à 3.5 */

  --r-fond:      #FBFAF6;   /* parchemin, un rien plus chaud que le blanc cassé */
  --r-fond-alt:  #F4F1E8;
  --r-carte:     #FFFFFF;
  --r-encre:     #14172B;
  --r-doux:      #4E5468;   /* 7.4:1 sur parchemin — l'original était à 2.2 */
  --r-trait:     #E6E1D3;

  --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;

  /* Élévations très basses : l'ombre lourde est l'autre marqueur de 2018. */
  --r-ombre-1: 0 1px 2px rgba(20,23,43,.04), 0 2px 8px rgba(20,23,43,.04);
  --r-ombre-2: 0 2px 4px rgba(20,23,43,.05), 0 12px 32px rgba(20,23,43,.08);
  --r-rayon: 14px;
}

/* ─────────────────────────────────────────────────── le bandeau */
/* ⚠️ Le bandeau à la thangka est .mtt-banner ; .hero est le bloc navy qui le
   SUIT (chapeau, prix, boutons). Les confondre peignait la planche derrière le
   texte d'introduction, qui devenait illisible. Deux éléments, deux traitements. */
.mtt-banner {
  position: relative; overflow: clip;
  min-height: min(72vh, 620px);
  display: grid; align-items: end; justify-items: center;
  border-bottom: 0;
  background-position: center 42%;
}
/* La planche respire : elle n'est plus assombrie d'un bout à l'autre. */
.mtt-banner::before {
  /* Le voile monte un peu plus haut que le strict nécessaire : le sur-titre
     doré tombait sur une zone claire de la thangka et devenait illisible. */
  background: linear-gradient(to top,
      rgba(0,11,51,.94) 0%, rgba(0,11,51,.84) 26%, rgba(0,11,51,.55) 46%,
      rgba(0,11,51,.20) 66%, rgba(0,11,51,.02) 88%, transparent 100%) !important;
}
/* Un souffle très lent : perceptible sans être remarqué. */
.mtt-banner::after {
  content: ''; position: absolute; inset: -2%; z-index: 0;
  background: inherit; background-size: cover; background-position: inherit;
  animation: r-souffle 40s ease-in-out infinite alternate;
  opacity: 0;                    /* le mouvement est porté par l'élément lui-même */
}
.mtt-banner { animation: r-souffle-fond 40s ease-in-out infinite alternate; }
@keyframes r-souffle-fond {
  from { background-size: 104%; }
  to   { background-size: 112%; }
}
.mtt-banner .mb-inner { padding-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.mtt-banner .mb-eyebrow {
  color: #F0C877;                       /* plus clair que l'or de marque : il doit
                                           tenir sur une image, pas sur du papier */
  text-shadow: 0 1px 3px rgba(0,11,51,1), 0 2px 16px rgba(0,11,51,.95);
}
.mtt-banner h1 {
  color: #fff; text-shadow: 0 2px 34px rgba(0,11,51,.62);
  font-variation-settings: 'SOFT' 20, 'WONK' 1, 'opsz' 120;
}
.mtt-banner .mb-sub { color: rgba(255,255,255,.9); }
/* Le filet d'or remplace la bordure pleine largeur de 3 px. */
.mtt-banner .mb-inner::before {
  content: ''; display: block; width: 60px; height: 2px; margin: 0 auto 1.3rem;
  background: linear-gradient(90deg, rgba(212,162,76,0), var(--r-or), rgba(212,162,76,0));
}

/* ─────────────────────────────────────────────────── bloc d'introduction */
/* Pas d'image ici : du texte long sur une photo ne se lit pas. Un dégradé
   profond, et le filet d'or comme couture avec le bandeau. */
.hero {
  background: linear-gradient(165deg, var(--r-navy) 0%, #0B2A4A 52%, #0E4F52 100%);
  border-top: 1px solid rgba(212,162,76,.55);
  padding: clamp(2.8rem, 5vw, 4.4rem) 0;
}
.hero .lead, .hero p { color: rgba(255,255,255,.9); }
.hero h1, .hero h2 { color: #fff; }
.hero .meta-row, .hero .meta-row * { color: rgba(255,255,255,.78); }
.hero .price-badge {
  background: rgba(212,162,76,.14); border: 1px solid rgba(212,162,76,.5);
  color: var(--r-or); border-radius: 999px;
}

/* La zone d'image de la fiche : elle existait, elle était vide. On y pose un
   DÉTAIL de planche — jamais la planche entière, qui à 300 px n'est qu'une
   bouillie. Le cadrage change d'une fiche à l'autre pour que la grille ne se
   répète pas visuellement. */
.module-card .r-media {
  position: relative;
  transition: background-size .7s cubic-bezier(.2,.7,.3,1);
  border-bottom: 1px solid rgba(212,162,76,.35);
}
.module-card:hover .r-media { background-size: auto, 118% !important; }

/* La bande de titre reste une bande de titre : pleine, lisible, sans image.
   Poser le texte sur la thangka le rendait décoratif et illisible à la fois. */
.module-card .head {
  position: relative;
  padding: 1.05rem 1.15rem .95rem;
}

.module-card .head .code {
  font-family: 'Inter', monospace; font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--r-or);
}
.module-card .head h3, .module-card .head .titre { color: #fff; margin: .3rem 0 .2rem; }
.module-card .head .tib { color: rgba(255,255,255,.72); font-size: .95rem; }
.module-card .body { padding: 1.15rem; color: var(--r-doux); font-size: .95rem; }
.module-card .foot {
  padding: .85rem 1.15rem; border-top: 1px solid var(--r-trait);
  background: #FCFBF7; font-size: .87rem; color: var(--r-doux);
}
.modules-grid { display: grid; gap: 1.35rem; }