/* =====================================================
   LA COMTE
   Vert tendre, or de biere, terre. Aucune tension, aucune
   urgence. C'est la seule page ou rien ne bat, ou rien ne
   pese, et ou aucune porte ne se referme derriere toi.
   ===================================================== */

body.comte {
  --accent: #C9A227;
  --accent-halo: rgba(201, 162, 39, 0.30);
  --second: #7BA05B;
  --lueur: rgba(201, 162, 39, 0.07);
  --nuit: #141006;
  --nuit-2: #1D1809;
  --nuit-3: #26200E;
  --ligne: rgba(201, 162, 39, 0.18);
  --parchemin: #F4EBD4;
  --brume: rgba(244, 235, 212, 0.64);
  --brume-faible: rgba(244, 235, 212, 0.38);
}

/* --- La fumée de pipe, en fond --- */
.fumee { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.bouffee {
  position: absolute;
  bottom: -12%;
  left: var(--x);
  width: var(--taille);
  height: var(--taille);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 235, 212, 0.07), transparent 68%);
  filter: blur(10px);
  animation: monte-fumee var(--duree) linear infinite;
  animation-delay: var(--retard);
}
@keyframes monte-fumee {
  0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 0.5; }
  100% { transform: translate(var(--derive), -118vh) scale(2.1); opacity: 0; }
}

/* --- Les collines --- */
.hero-comte {
  position: relative;
  overflow: hidden;
  padding-top: clamp(50px, 8vh, 100px);
  padding-bottom: clamp(90px, 16vh, 180px);
}
.collines { position: absolute; inset: 0; z-index: 0; pointer-events: none; color: var(--second); opacity: 0.55; }
.collines-svg { width: 100%; height: 100%; }
.porte-ronde { color: var(--accent); stroke: var(--accent); filter: drop-shadow(0 0 12px var(--accent-halo)); }
.fenetre {
  filter: drop-shadow(0 0 14px rgba(242, 200, 106, 0.7));
  animation: chandelle 5s ease-in-out infinite;
  animation-delay: calc(var(--i) * 700ms);
}
@keyframes chandelle {
  0%, 100% { opacity: 0.42; }
  50%      { opacity: 0.85; }
}
.hero-comte .conteneur { position: relative; z-index: 2; }

.hero-tengwar-ct {
  font-family: var(--f-tengwar);
  font-size: clamp(2.2rem, 5.4vw, 4rem);
  color: var(--accent);
  margin: 28px 0 10px;
  line-height: 1.5;
  text-shadow: 0 0 40px var(--accent-halo);
}

/* --- Blocs --- */
.comte main { position: relative; z-index: 2; }
.comte .bloc { padding: clamp(50px, 9vh, 120px) 0; border-top: 1px solid var(--ligne); }
.comte .reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s ease, transform 1s ease; }
.comte .reveal.in-view { opacity: 1; transform: none; }

.comte .encart { border-left: 2px solid var(--ligne); padding: 4px 0 4px 24px; margin-top: 44px; }
.comte .encart h3 {
  font-family: var(--f-display);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin: 0 0 10px;
}
.comte .encart p { color: var(--brume); font-size: 1.04rem; margin: 0 0 14px; line-height: 1.64; }
.comte .encart p:last-child { margin-bottom: 0; }
.comte .encart-fort { border-left-color: var(--accent); }

/* --- Ce qu'ils font de leurs journées --- */
.vie-grille { margin-top: 46px; }
.vie-grille > [class*='col-'] { padding-bottom: 8px; }
.carte-ct {
  height: calc(100% - 24px);
  padding: 30px 28px 26px;
  background: linear-gradient(160deg, var(--nuit-2), var(--nuit));
  border: 1px solid var(--ligne);
  border-radius: 6px;
  margin-bottom: 24px;
  transition: border-color 400ms, transform 400ms;
}
.carte-ct:hover { border-color: var(--accent); transform: translateY(-3px); }
.ct-nom {
  font-family: var(--f-display);
  font-size: 1.34rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ligne);
}
.ct-texte { color: var(--brume); font-size: 1.02rem; line-height: 1.62; margin: 0; }

/* --- La pipe --- */
.pipe-cadre { display: flex; justify-content: center; align-items: center; padding: 20px; height: 100%; }
.pipe-svg {
  width: 100%;
  max-width: 300px;
  height: auto;
  color: #A87A4A;
  overflow: visible;
}
.braise {
  filter: drop-shadow(0 0 16px rgba(226, 138, 46, 0.9));
  animation: braise-ct 3s ease-in-out infinite;
}
@keyframes braise-ct {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}
.volute {
  stroke: var(--parchemin);
  opacity: 0;
}
.pipe-cadre.in-view .volute {
  animation: volute-monte 5s ease-in-out infinite;
  animation-delay: calc(var(--i) * 1.4s);
}
@keyframes volute-monte {
  0%   { opacity: 0; transform: translateY(6px); }
  35%  { opacity: 0.42; }
  100% { opacity: 0; transform: translateY(-26px); }
}

@media (max-width: 991px) {
  .pipe-cadre { margin-top: 30px; }
}
@media (max-width: 767px) {
  .comte .encart { padding-left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .bouffee, .fenetre, .braise, .volute { animation: none; }
  .comte .reveal { opacity: 1; transform: none; }
  .volute { opacity: 0.3; }
}