/* =============================================================
   BIÈRE DE BIÈRE À BASE DE BIÈRES — Thème bleu marine
   Chargé APRÈS styles.css sur millesime.html : reprend toute la
   structure du site et ne fait que redéfinir les couleurs, plus
   les quelques composants propres à cette page.
   ============================================================= */

/* ---------- 1. Palette marine ----------
   Les jetons « --green-* » pilotent la couleur principale dans
   styles.css : on les redirige vers le bleu marine pour que tous
   les composants partagés suivent sans être dupliqués. */
body.theme-navy {
  --navy-900: #0a1628;
  --navy-800: #0f2140;
  --navy-700: #1a3260;   /* bleu marine principal */
  --navy-600: #234177;
  --navy-500: #2d528f;

  --green-900: var(--navy-900);
  --green-800: var(--navy-800);
  --green-700: var(--navy-700);
  --green-600: var(--navy-600);
  --green-500: var(--navy-500);
  --green:     var(--navy-700);

  --bg:        #eef1f6;   /* gris bleuté */
  --surface-2: #e6eaf2;
  --line:      #dfe4ec;
  --line-2:    #cdd4e0;

  --dark-2:    var(--navy-900);
  --ink:       #121a2a;
  --ink-soft:  #4c5568;

  /* Aucun doré sur cette page : les jetons « --gold-* » deviennent
     du bleu marine. Les variantes claires (300 / 100), utilisées sur
     fond sombre, prennent une teinte marine éclaircie pour rester
     lisibles sur le bleu. */
  --gold-900:  var(--navy-900);
  --gold:      var(--navy-700);
  --gold-300:  #a9bbdc;
  --gold-100:  #dbe4f3;
  --line-gold: #a9bbdc33;
}

/* ---------- 2. Ajustements des couleurs codées en dur ---------- */
.theme-navy .hero {
  background:
    radial-gradient(70% 55% at 80% 28%, #ffffff 0%, transparent 60%),
    linear-gradient(180deg, #f6f8fb 0%, #e3e8f1 100%);
}
.theme-navy .hero__bottle {
  background: radial-gradient(78% 68% at 50% 40%, #1d3561 0%, #0f1f3c 60%, #081325 100%);
  box-shadow: var(--shadow-dark), inset 0 0 0 1px rgba(169,187,220,.18);
}
/* La photo a déjà son propre fond marine : elle remplit tout le cadre,
   sans marge intérieure, halo ni fondu. */
.theme-navy .hero__bottle { padding: 0; overflow: hidden; }
.theme-navy .hero__halo { display: none; }
.theme-navy .hero__bottle img {
  display: block;
  width: min(52vh, 460px);
  aspect-ratio: 2 / 3; height: auto;
  object-fit: cover;
  filter: none;
  -webkit-mask-image: none; mask-image: none;
}
@media (max-width: 860px) {
  .theme-navy .hero__bottle img { width: min(70vw, 300px); }
}
.theme-navy .btn--gold,
.theme-navy .nav__links .btn--gold { --fg-btn: #fff; color: #fff; }
.theme-navy .btn--gold:hover { --bg-btn: var(--navy-600); }
.theme-navy ::selection { background: var(--navy-700); color: #fff; }
.theme-navy .form input:focus { box-shadow: 0 0 0 3px rgba(26,50,96,.14); }
.theme-navy .footer { color: #c3cbdb; }
.theme-navy .footer__legal { color: #8e9ab1; }

/* ---------- 3. Hero : sous-titre « à base de bières » ---------- */
.hero__sub {
  display: block; margin-top: .5rem;
  font-family: var(--f-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.4rem, 3vw, 2.2rem); color: var(--gold);
  letter-spacing: 0;
}

/* Étape du millésime en plusieurs paragraphes */
.tl p + p { margin-top: .8rem; }

/* ---------- 4. Assemblage : les bières qui convergent ---------- */
.blend { background: var(--surface); }
.blend__diagram { max-width: 820px; margin: 3rem auto 0; color: var(--navy-700); }
.blend__diagram svg { width: 100%; height: auto; display: block; overflow: visible; }
.blend__diagram text { font-family: var(--f-heritage); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; fill: var(--ink-soft); }
.blend__diagram .blend__label { font-family: var(--f-display); font-size: 20px; font-weight: 900; letter-spacing: 0; text-transform: none; fill: var(--navy-700); }
.blend__diagram .blend__flow { stroke-dasharray: 5 7; animation: flow 1.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -24; } }
.blend__caption { text-align: center; color: var(--ink-faint); font-style: italic; margin-top: 1.4rem; }

/* ---------- 5. Concept : quatre piliers ---------- */
.theme-navy .values { background: var(--bg); }
.theme-navy .values__grid--4 { grid-template-columns: repeat(4, 1fr); }
.theme-navy .values__grid--4 .value { background: var(--surface); }
@media (max-width: 1000px) { .theme-navy .values__grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .theme-navy .values__grid--4 { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }