/*
 * File: site-shared.css - Variables + bandeau titre Topologicon (index + intro)
 * Desc: Même police et même style « Topologicon » que .title-center .main-title dans l’app.
 * Version 1.0.1
 * Copyright 2025 DNAvatar.org - Arnaud Maignan
 * Licensed under Apache License 2.0 with Commons Clause.
 * Date: March 21, 2026 UTC+1
 * Logs:
 *   - v1.0.1: En-tête licence aligné projet
 *   - v1.0.0: :root partagé ; .title-container / .main-title / .title-left+Lanturlu ; variante .intro-header
 */

:root {
  --header-height: clamp(70px, 22vw, 110px);
  --page-bg: #1a1a2e;
  --theme-band-bg: #d9230f;
  --theme-band-border: #a31a0b;
  --theme-band-text: #fbc02d;
  --carte-title-color: rgb(251, 192, 45);
  --carte-title-text-shadow: rgb(163, 26, 11) 1px 1px 0px, rgba(0, 0, 0, 0.2) 2px 2px 4px;
}

/* ── Bande titre (index.html) ── */
.title-container {
  display: grid;
  grid-template-columns: 10% 80% 10%;
  align-items: stretch;
  padding: 0;
  background: var(--theme-band-bg);
  border-bottom: 5px solid var(--theme-band-border);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 10;
  height: var(--header-height);
  min-height: 80px;
  flex-shrink: 0;
}

.title-left,
.title-center,
.title-right {
  flex: 1;
}

.title-center {
  text-align: center;
  padding-bottom: 10px;
}

.title-center .main-title {
  display: block;
  font-family: 'Times New Roman', Times, serif;
  font-size: calc(var(--header-height) * 0.3);
  line-height: 1;
  color: var(--theme-band-text);
  margin: 0;
  text-shadow: 2px 2px 0px #a31a0b, 3px 3px 6px rgba(0, 0, 0, 0.4);
  letter-spacing: 1px;
  font-weight: 700;
}

.title-center .main-title .title-line-1,
.title-center .main-title .title-line-2,
.title-center .main-title .title-line-3 {
  display: inline-block;
}

.title-line-1 {
  font-size: 0.5em;
  margin-bottom: 0.6em;
  display: block;
}

.title-line-2 {
  font-size: 0.9em;
}

.title-line-3 {
  font-size: 0.5em;
}

.title-left {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  align-self: stretch;
  height: calc(var(--header-height) * 0.8);
  margin-top: calc(var(--header-height) * 0.17);
  margin-left: calc(var(--header-height) * 1.2);
  transform: scaleX(-1);
  transform-origin: center center;
}

.lanturlu-img {
  height: calc(var(--header-height) * 0.86);
  width: auto;
  margin-right: 0;
  margin-bottom: -4px;
}

#languageSelectorRight {
  margin-left: -5px;
}

/* ── intro.html : une colonne + sous-titre sous le même titre ── */
.title-container.intro-header {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  justify-items: center;
  align-items: center;
  height: auto;
  min-height: var(--header-height);
  padding: 0.65rem 1rem 1rem;
}

.title-container.intro-header .title-center {
  grid-row: 1;
  width: 100%;
  padding-bottom: 0.35rem;
}

.intro-header-tagline {
  grid-row: 2;
  margin: 0;
  max-width: 36rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
  font-family: sans-serif;
  font-size: clamp(0.8rem, 2.5vw, 0.95rem);
  line-height: 1.45;
  font-weight: 400;
}