/* Styles propres à huit-colonnes/index.html (partagés par la version anglaise). */
:root {
  --bg: #f4f1ea; --bg2: #fffdf8; --ink: #121110; --muted: #5f5a52; --line: rgba(18,17,16,.14);
  --accent: #c8102e; --accent-ink: #fff;
  --display: "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif; --display-weight: 800; --display-stretch: 100%; --display-track: -.02em;
}
.phero .fond { background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), rgba(18,17,16,.05) calc(12.5% - 1px) 12.5%); }
.kin { font-size: clamp(3.2rem, 7vw, 6.8rem); line-height: .95; }
.tourne { margin-top: 22px; font: 600 clamp(1.1rem, 1.6vw, 1.4rem) "Roboto Flex", sans-serif; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tourne .fen { display: inline-block; height: 1.5em; overflow: hidden; vertical-align: bottom; }
.tourne .fen span { display: block; height: 1.5em; line-height: 1.5em; color: var(--accent); font-family: var(--display); font-style: italic; font-size: 1.15em; font-weight: 700; }

.scene .nav { position: absolute; left: 0; top: 8%; width: 92%; }
.scene .tel { right: 0; bottom: 2%; width: clamp(170px, 15vw, 230px); }
.direct { position: absolute; left: -2%; right: 34%; bottom: 14%; z-index: 3; display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 10px; padding: 10px 12px; overflow: hidden; box-shadow: 0 20px 40px -14px rgba(0,0,0,.3); }
.direct b { flex: none; background: var(--accent); color: #fff; font: 800 .72rem "Roboto Flex", sans-serif; letter-spacing: .08em; padding: 4px 8px; border-radius: 4px; }
.direct b::before { content: "● "; animation: cligne 1.2s infinite; }
@keyframes cligne { 50% { opacity: .2; } }
.direct .fil { display: flex; gap: 36px; white-space: nowrap; font: 600 .82rem "Roboto Flex", sans-serif; animation: defile 22s linear infinite; }
.direct .fil span { color: var(--muted); } .direct .fil span i { font-style: normal; color: var(--accent); margin-right: 6px; }

.langues { display: grid; grid-template-columns: repeat(8, 1fr); border-top: 3px double var(--ink); border-bottom: 3px double var(--ink); }
.langues div { padding: 26px 10px 30px; text-align: center; border-left: 1px solid var(--line); }
.langues div:first-child { border-left: 0; }
.langues b { white-space: nowrap; display: block; font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 2.4rem); line-height: 1.1; }
.langues span { display: block; margin-top: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.langues div:hover b { color: var(--accent); }
.rubriques { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 40px; }
.rubriques span { padding: 12px 20px; border: 1.5px solid var(--ink); font-weight: 700; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; transition: background .2s, color .2s; }
.rubriques span:hover { background: var(--ink); color: var(--bg); }
.etape { border-radius: 4px; border-top: 4px solid var(--ink); }
.etape::before { color: var(--accent); }
.une { border-radius: 4px; overflow: hidden; box-shadow: 0 50px 100px -40px rgba(0,0,0,.45), 0 0 0 1px var(--line); }
@media (max-width: 960px) { .langues { grid-template-columns: repeat(4, 1fr); } .langues div:nth-child(5) { border-left: 0; } .langues div:nth-child(n+5) { border-top: 1px solid var(--line); } }