/* ============================================================
   travel.css — version : tanuki-dev.500
   Bundle CSS TravelCourse
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   1. TRAVELFRONTEND — layout grid + variables globales
   ══════════════════════════════════════════════════════════════ */

        /* ===== VARIABLES GLOBALES ===== */
        :root {
            --menu-top-height: 35px;
            --menu-bottom-height: 35px;
            --map-width: 200px;
            --below-columns-row-height: 30px;
            --workspace-padding: 5px;
            --gap-between-rows: 5px;
            --gap-between-columns: 10px;
            --full-radius: 0px;
            --thumbnail-radius: 8px;
            --thumbnail-overlay-radius: 10px;
            --button-font-size: 1.2rem;
            
            /* Couleurs */
            --body-bg: #F4F5ED;
            --menu-bg: #F4F5ED;
            --menu-side-bg: #F4F5ED;
            --workspace-bg: #F4F5ED;
            --slide-bg: #533483;
            --right-column-bg: linear-gradient(135deg, #e94560, #c12a45);
            --tags-bg: #F4F5ED;
            --story-bg: #F4F5ED;
            --stage-bg: #F4F5ED;
            --endstory-bg: #F4F5ED;
			/* COULEUR TEXTE */
            --text-row-color: #333333;
            --text-body-color: #0000FF;
            --button-color: #000000;
            --button-color-hover: #0000FF;
			/*==== Encadrement Boite =====*/
            --box-shadow-value: 0 0px 0px rgba(0,0,0,0.2);
        }

        /* ═══════════════════════════════════════════════
           MOBILE MODE — breakpoint 700px
           Below 700px: stacked layout, map hidden,
           larger touch targets, no side-by-side header
           ═══════════════════════════════════════════════ */
        @media (max-width: 700px) {
            :root {
                --map-width: 0px;
                --below-columns-row-height: 20px;
                --menu-top-height: 30px;
                --menu-bottom-height: 42px;
                --workspace-padding: 0px;
                --gap-between-rows: 4px;
                --gap-between-columns: 0px;
                --button-font-size: 0.9rem;
            }

            /* ── Top bar: kill all gaps, allow full shrink ── */
            .menu-top {
                padding: 0 2px;
            }
            .top-left-group {
                gap: 0;
                flex-shrink: 0;
            }
            .top-right-group {
                gap: 0;
                margin-left: auto;
                min-width: 0;
                overflow: hidden;
                flex-shrink: 1;
            }
            .top-icons {
                gap: 0;
                flex-wrap: nowrap;
                overflow-x: auto;
                overflow-y: hidden;
                scrollbar-width: none;
                min-width: 0;
            }
            .top-icons::-webkit-scrollbar { display: none; }

            /* All icon buttons: no fixed width, scale with container */
            .icon-btn {
                font-size: clamp(0.65rem, 2.8vw, 0.9rem);
                padding: 2px 1px;
                min-width: 0;
                flex-shrink: 1;
            }

            /* Bottom bar buttons — flex:1, 6 buttons fit ≥ 300px */
            .menu-bottom .icon-btn {
                font-size: clamp(0.65rem, 2.5vw, 0.9rem);
                min-width: 0;
                flex: 1 1 0;
                padding: 2px 0;
            }

            /* Bottom icons: fill full width, evenly spaced */
            .bottom-icons {
                gap: 0;
                justify-content: space-evenly;
                width: 100%;
                flex: 1;
            }
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            height: 100vh;
            height: 100dvh;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow: hidden;
            color: var(--text-body-color);
        }
#app {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  grid-template-areas:
    "top"
    "main"
    "bottom";
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  max-width: 100vw;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}
        /* === STYLE ICON-BTN === */
        .icon-btn {
            background: none;
            border: none;
            color: var(--button-color);
            cursor: pointer;
            font-size: var(--button-font-size);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            padding: 4px 2px;
            text-align: center;
            position: relative;
            min-width: 0;
            flex-shrink: 1;
        }

        /* Style pour les boutons de texte (menu 1.1) */
        .text-btn {
            background: none;
            border: none;
            color: var(--button-color);
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: 500;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px 12px;
            border-radius: 4px;
            font-family: inherit;
        }

        .text-btn:hover {
            color: var(--button-color-hover);
            background: rgba(0,0,0,0.05);
            transform: scale(1.05);
        }

        .text-btn:active {
            transform: scale(0.95);
        }

        /* Style pour les icônes personnalisées (images) */
        .icon-btn .custom-icon {
            width: 1.2rem;
            height: 1.2rem;
            object-fit: contain;
            display: block;
        }

        /* Style spécifique pour le logo tanuki */
        #gosettings .custom-icon {
            width: 1.4rem;
            height: 1.4rem;
            transition: all 0.3s ease;
        }

        /* Effet au survol pour le logo tanuki */
        #gosettings:hover .custom-icon {
            transform: scale(1.1) rotate(5deg);
        }

        /* Si l'icône personnalisée existe, on cache l'icône FontAwesome par défaut */
        .icon-btn.has-custom-icon i {
            display: none;
        }

        .icon-btn:hover {
            transform: scale(1.1);
            background: rgba(255,255,255,0.3);
        }
        .icon-btn:active {
            transform: scale(0.85);
            background: rgba(255,255,255,0.5);
        }

        /* === NOUVELLE STRUCTURE EN GRILLE === */
        /* Conteneur principal en grille */
        /* .app-grid removed — grid now on #app */

        /* Menu Top - occupe toute la première ligne sur toutes les colonnes */
        .menu-top {
            grid-area: top;
            background-color: var(--menu-bg);
            display: flex;
            align-items: center;
            justify-content: flex-start;  /* left anchor; right group uses margin-left:auto */
            padding: 0 8px;
            height: var(--menu-top-height);
            box-shadow: var(--box-shadow-value);
            z-index: 10;
            min-width: 0;
            width: 100%;
            box-sizing: border-box;
            overflow: hidden;
        }

        /* Menu Left - colonne 1, ligne 2 */
        .menu-left {
            grid-column: 1;
            grid-row: 2;
            background-color: var(--menu-side-bg);
            width: var(--menu-left-width);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 25px;
            padding: 20px 0;
            box-shadow: var(--box-shadow-value);
            z-index: 10;
        }

        /* Zone de travail principale - colonne 2, ligne 2 */
        .main-container {
            grid-area: main;
            background-color: var(--workspace-bg);
            padding: var(--workspace-padding);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            min-height: 0;
            min-width: 0;       /* allow flex shrink below content width */
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

        /* Menu Right - colonne 3, ligne 2 (optionnel, pour future utilisation) */
        .menu-right {
            grid-column: 3;
            grid-row: 2;
            background-color: var(--menu-side-bg);
            width: var(--menu-right-width);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 25px;
            padding: 20px 0;
            box-shadow: var(--box-shadow-value);
            z-index: 10;
        }

        /* Menu Bottom - occupe toute la dernière ligne */
        .menu-bottom {
            grid-area: bottom;
            background-color: var(--menu-bg);
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            gap: 0;
            padding: 0;
            height: var(--menu-bottom-height);
            box-shadow: var(--box-shadow-value);
            z-index: 10;
            min-width: 0;
            width: 100%;
            box-sizing: border-box;
            overflow: hidden;
        }

        /* Ajustements responsifs */
        @media (max-width: 700px) {
            .text-btn {
                font-size: 0.75rem;
                padding: 4px 8px;
            }

            /* ── Header: full width, mobile height ── */
            #header { display: flex; height: 200px; }

            /* ── Slide column: full width ── */
            #header .slide-column {
                width: 100%;
                height: 100%;
                flex: 1;
            }

            /* ── Top icons: smaller gap, scrollable ── */
            .top-icons {
                gap: 0;
            }

            /* ── Bottom icons: evenly distributed, no fixed gap ── */
            .bottom-icons {
                gap: 0;
                justify-content: space-evenly;
            }

            /* ── Stage map: full width on mobile ── */
            .stage-map {
                width: 100%;
                height: 240px;
                margin: 0;
            }
        }

        /* === RESTE DU STYLE CONSERVÉ === */
        .menu-top .icon-btn:hover {
            color: var(--button-color-hover);
        }
        
        .top-left-group {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .top-right-group {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-left: auto;   /* always pushed to the right */
        }

        .top-icons {
            display: flex;
            gap: 20px;
            align-items: center;
        }

        .menu-bottom .icon-btn:hover {
            color: var(--button-color-hover);
        }
        .bottom-icons {
            display: flex;
            gap: 0;
            align-items: center;
            min-width: 0;
            width: 100%;
            justify-content: space-evenly;
            flex: 1;
        }

        .menu-left .icon-btn:hover {
            color: var(--button-color-hover);
        }

        .menu-right .icon-btn:hover {
            color: var(--button-color-hover);
        }
		
		
.title-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1px 0;
}

.title-table td {
	/* BRUNO */
    padding: 0px 12px;
    vertical-align: middle;
}

.travel-title {
    font-weight: bold;
    font-size: 1.2rem;
}

.stage-title {
	/* BRUNO */
    font-size: 1.1rem;
	font-weight: bold;
    color: #666;
}

/* Colonne 2 (Boutons sur 25% de l'écran) */
.table-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start; /* Aligne les boutons à droite de la colonne */
}

/* Ajustement de la taille des boutons pour qu'ils tiennent dans 25% de l'espace */
.tag-filter-btn {
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 15px;
    background-color: #fff;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background-color .15s, color .15s, border-color .15s;
}

.tag-filter-btn.active {
    background-color: var(--button-color, #c8972a);
    border-color: var(--button-color, #c8972a);
    color: #fff;
}

.tag-filter-btn:hover:not(.active) {
    background-color: #f0f0f0;
    border-color: #aaa;
}
.table-time {
    font-size: 0.85rem;
    color: #333;
    font-weight: 500;
    text-align: right; /* Aligne le temps à droite */
}	
		
		
		
		       /* === SLIDESHOW - THUMBNAILS SUR L'IMAGE === */
        .slide-column {
            flex: 1;
            background: var(--slide-bg);
            border-radius: var(--full-radius);
            box-shadow: var(--box-shadow-value);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            position: relative;
            padding: 0;
        }

        .hero-container {
            flex: 1;
            position: relative;
            overflow: hidden;
            background: #000;
            min-height: 0;
            cursor: pointer;
        }

        .hero-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .hero-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 0 15px;
            pointer-events: none;
            z-index: 3;
        }

        .hero-nav.single-image {
            display: none;
        }

        .hero-nav-btn {
            background: rgba(0,0,0,0.5);
            border: none;
            color: white;
            width: 40px;
            height: 40px;
            border-radius: var(--full-radius);
            cursor: pointer;
            transition: all 0.3s ease;
            pointer-events: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }

        .hero-nav-btn:hover {
            background: rgba(0,0,0,0.8);
            transform: scale(1.1);
        }

        .thumbnails-overlay {
            position: absolute;
            bottom: 5px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            gap: 12px;
            padding: 10px;
            border-radius: var(--thumbnail-overlay-radius);
            margin: 0 20px;
            z-index: 3;
            flex-wrap: wrap;
        }

        .thumbnails-overlay.single-image {
            display: none;
        }

        .thumbnail {
            width: 55px;
            height: 55px;
            border-radius: var(--thumbnail-radius);
            cursor: pointer;
            overflow: hidden;
            border: 2px solid transparent;
            transition: all 0.3s ease;
            flex-shrink: 0;
        }

        .thumbnail:hover {
            transform: translateY(-3px);
            border-color: rgba(255,255,255,0.8);
        }

        .thumbnail.active {
            border-color: #ffd166;
            transform: scale(1.05);
            box-shadow: 0 0 10px rgba(255,209,102,0.5);
        }

        .thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
		
		
		       /* ===== LIGHTBOX STYLES ===== */
        .lightbox {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            z-index: 10000;
            display: none;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
            backdrop-filter: blur(8px);
        }

        .lightbox.active {
            display: flex;
            opacity: 1;
        }

        .lightbox-content {
            position: relative;
            max-width: 90%;
            max-height: 90%;
            text-align: center;
        }

        .lightbox-image {
            max-width: 100%;
            max-height: 85vh;
            object-fit: contain;
            border-radius: 8px;
            box-shadow: 0 0 30px rgba(0,0,0,0.5);
            animation: lightboxZoom 0.3s ease;
        }

        @keyframes lightboxZoom {
            from {
                transform: scale(0.9);
                opacity: 0;
            }
            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        .lightbox-close {
            position: absolute;
            top: 20px;
            right: 40px;
            color: white;
            font-size: 40px;
            cursor: pointer;
            background: none;
            border: none;
            transition: transform 0.2s ease;
            z-index: 10001;
        }

        .lightbox-close:hover {
            transform: scale(1.2);
            color: #ffd166;
        }

        .lightbox-prev, .lightbox-next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0,0,0,0.6);
            color: white;
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 24px;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10001;
        }

        .lightbox-prev.single-image, .lightbox-next.single-image {
            display: none;
        }

        .lightbox-prev {
            left: 20px;
        }

        .lightbox-next {
            right: 20px;
        }

        .lightbox-prev:hover, .lightbox-next:hover {
            background: rgba(0,0,0,0.9);
            transform: translateY(-50%) scale(1.1);
            color: #ffd166;
        }

        .lightbox-counter {
            position: absolute;
            bottom: 20px;
            left: 0;
            right: 0;
            text-align: center;
            color: white;
            font-size: 14px;
            background: rgba(0,0,0,0.5);
            padding: 8px;
            width: fit-content;
            margin: 0 auto;
            border-radius: 20px;
            font-family: monospace;
            z-index: 10001;
        }

        .lightbox-counter.single-image {
            display: none;
        }
		
		
		
        /* === ZONE DE TRAVAIL === */
        .workspace {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: var(--gap-between-rows);
            min-height: 0;
            height: 100%;
        }

        .top-section {
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            gap: var(--gap-between-rows);
        }

        .header {
            display: flex;
            gap: var(--gap-between-columns);
            height: var(--map-width);
        }

        #header { display: flex; }

        /* === COLONNE MILIEU === */
       

        /* === COLONNE DROITE AVEC CARTE LEAFLET === */
        .map-column {
            width: var(--map-width);
            background: var(--right-column-bg);
            border-radius: var(--full-radius);
            box-shadow: var(--box-shadow-value);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            padding: 0;
        }

        .map-title {
            background: rgba(0,0,0,0.5);
            color: white;
            padding: 8px;
            text-align: center;
            font-size: 0.8rem;
            font-weight: bold;
            flex-shrink: 0;
        }

        #mymap {
            flex: 1;
            width: 100%;
            min-height: 0;
            background: #ccc;
        }

        .tags-row {
            background: var(--tags-bg);
            height: var(--below-columns-row-height);
            border-radius: var(--full-radius);
            box-shadow: var(--box-shadow-value);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 13px;
            font-weight: bold;
            gap: 10px;
        }

        .stage-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: var(--gap-between-rows);
            overflow-y: auto;
            overflow-x: hidden;
            min-height: 0;
            scrollbar-width: thin;          /* Firefox: thin scrollbar */
            -webkit-overflow-scrolling: touch; /* iOS momentum scroll */
        }
        .stage-container::-webkit-scrollbar {
            width: 4px;
        }
        .stage-container::-webkit-scrollbar-thumb {
            background: rgba(0,0,0,0.2);
            border-radius: 2px;
        }

        @media (max-width: 700px) {
            .stage-container::-webkit-scrollbar {
                width: 0;                   /* hide scrollbar on mobile */
            }
            .stage-container {
                scrollbar-width: none;      /* Firefox mobile */
            }
        }

        .story-row {
            flex: var(--new-row-ratio);
            background: var(--story-bg);
            padding: 20px;
            color: var(--text-row-color);
            border-radius: var(--full-radius);
            overflow-y: auto;
            min-height: 0;
            box-shadow: var(--box-shadow-value);
        }

        .stage-row {
            background: var(--stage-bg);
            padding: 1px 20px;
            color: var(--text-row-color);
            border-radius: var(--full-radius);
            min-height: 0;
            box-shadow: var(--box-shadow-value);
        }
		
        .stage-map {
            display: block;
            height: 300px;
            width: 300px;
            margin: 0 auto;         /* center horizontally */
            padding: 0;
            background: var(--stage-bg);
            border-radius: var(--full-radius);
            box-shadow: var(--box-shadow-value);
            overflow: hidden;
            flex-shrink: 0;
        }

        .endstory-row {
            flex: var(--bottom-row-ratio);
            background: var(--endstory-bg);
            padding: 20px;
            color: var(--text-row-color);
            border-radius: var(--full-radius);
            overflow-y: auto;
            min-height: 0;
            box-shadow: var(--box-shadow-value);
        }

        .title-row {
            font-size: 1.2em;
            font-weight: bold;
            margin-bottom: 10px;
            border-bottom: 2px solid rgba(255,255,255,0.3);
            display: inline-block;
            padding-bottom: 5px;
            color: var(--text-row-color);
        }

        .text-row {
            margin-top: 10px;
            color: var(--text-row-color);
            white-space: pre-line;
        }
        
        .tags-row {
            margin-top: 10px;
            color: var(--text-row-color);
        }

        .mode-text {
            font-size: 0.85rem;
            background: rgba(0,0,0,0.3);
            padding: 4px 10px;
            border-radius: var(--full-radius);
        }
		
/* .app-grid removed — grid now on #app */

		

        @media (max-width: 700px) {
            .thumbnail {
                width: 40px;
                height: 40px;
            }
            .thumbnails-overlay {
                gap: 6px;
                padding: 6px;
                bottom: 10px;
                margin: 0 8px;
            }
            .hero-nav-btn {
                width: 32px;
                height: 32px;
                font-size: 1rem;
            }
            #gosettings .custom-icon {
                width: 1.2rem;
                height: 1.2rem;
            }
        }

       /* ============================================================
   fluid.css — Layout mode optionfluid:yes
   version   : tanuki-dev.4.06
   timestamp : 2026-04-13T22:07:53Z
   Basé sur le framework 8.html
   ============================================================ */

:root {
  --header-height: 200px;
  --hero-height:   200px;
  --bottom-height: 140px;
  --sidebar-width: 40px;
  --topbar-height: 40px;
}

@media (max-width: 500px) {
  :root { --header-height: 130px; --hero-height: 130px; }
}
@media (max-width: 375px) {
  :root { --header-height: 110px; --hero-height: 110px; }
}

/* ── BODY en mode fluid ── */
body

/* ── HEADER FIXE ── */


/* HERO — colonne gauche */


/* THUMBS — en bas du hero, commence à sidebar-width */


/* TOP-BAR — 40px en haut du hero */


/* MINI-MAP — colonne droite carré */


/* ── STAGE — zone scrollable centrale ── */


/* ── SIDEBAR gauche ── */


/* ── BOTTOM fixe ── */


/* story-bar en haut, nav-bar en bas — ordre garanti */


/* STORY dans bottom */


/* NAV-BAR dans bottom */


/* Badge état dans nav-bar */


/* ── PROGRESSION dans stage ── */


/* ── ICON BTN générique ── */


/* ── LIGHTBOX ── */


/* Screen adaptations */
body.screen-tablet 
body.screen-mobile 

/* ============================================================
   DESIGN — fond, police, couleurs
   ============================================================ */

/* Google Fonts — Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

body

body

body

/* Cacher la barre de progression (cachée, pas supprimée) */
body

/* ============================================================
   ALIGNEMENT — polices et fonds cohérents
   ============================================================ */


/* story-bar — même police que question-text */
body

body

/* fluid-bottom — décalé de la largeur de la sidebar */


/* fluid-stage-content — unifié intro et étapes */


/* ── FLUID MAP ZONE — remplace fluid-stage quand carte active ── */


/* ══════════════════════════════════════════════════════════════
   3. STYLE — styles globaux
   ══════════════════════════════════════════════════════════════ */
/* version: tanuki-dev.4.06 | timestamp: 2026-04-13T22:07:53Z | checksum: b435dc9b4e1a3957b39d0cfe82a3a127 */
/* version: 5 | timestamp: 2026-04-13T22:07:53Z | checksum: 3f5aa7ddb1337f85726c64d87c1b2f56
/* ============================================================
   VARIABLES & RESET
   ============================================================ */
:root {
  --ink:       #1a1209;
  --parchment: #f5ead6;
  --parch2:    #ede0c4;
  --parch3:    #d9c89a;
  --purple:    #6C3FC5;
  --purple-lt: #8B5CF6;
  --purple-dk: #4a2b8a;
  --gold:      #c8972a;
  --gold-lt:   #e8b84b;
  --red-err:   #8b2020;
  --green-ok:  #1a5c2a;
  --radius:    10px;
  --shadow:    0 4px 24px rgba(30,15,0,0.13);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* body styles defined above */

/* #app layout defined above */

/* ============================================================
   HEADER COMMUN
   ============================================================ */


.header-btns {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ============================================================
   BOUTONS
   ============================================================ */
.btn {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1.5px solid;
  transition: all 0.18s;
}

.btn-primary {
  background: var(--purple);
  color: #fff;
  border-color: var(--purple-dk);
}

.btn-primary:hover { background: var(--purple-dk); }

.btn-secondary {
  background: transparent;
  color: var(--purple);
  border-color: var(--purple);
}

.btn-secondary:hover { background: var(--purple); color: #fff; }

.btn-gold:hover { background: #a07820; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--parch3);
  font-size: 0.75rem;
}

.btn-ghost:hover { border-color: var(--purple); color: var(--purple); }

/* ============================================================
   ERROR
   ============================================================ */
.error-box {
  background: #fff0f0;
  border: 1.5px solid #f0c0c0;
  border-radius: var(--radius);
  padding: 1.5rem;
  color: var(--red-err);
  font-size: 1rem;
  text-align: center;
}

/* ============================================================
   MODAL ADVISE — conseils pratiques
   ============================================================ */


/* Éléments markdown dans la modal */
.adv-h1 {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--purple-dk);
  margin: 1rem 0 0.4rem;
  letter-spacing: 0.04em;
}

.adv-h2 {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--purple);
  margin: 0.8rem 0 0.3rem;
}

.adv-p {
  margin: 0 0 0.6rem;
}

.adv-spacer { margin: 0.3rem 0; }

.adv-ul {
  margin: 0 0 0.75rem 1.25rem;
  padding: 0;
}

.adv-ul li { margin-bottom: 0.35rem; }

.adv-hr {
  border: none;
  border-top: 1px solid var(--parch3);
  margin: 1rem 0;
}


/* ============================================================
   IMAGE HEADER + BOUTONS MEDIA (audio / vidéo)
   ============================================================ */

/* Image principale dans le header de la question */
.question-header-img {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  display: block;
  /* entre titre-top et story-wrap : pas de radius haut, radius bas si pas de narration */
  border-top: 1.5px solid var(--parch3);
  border-bottom: 1.5px solid var(--parch3);
}

/* Bouton de lancement media */
.step-media-btn-wrap {
  margin-top: 0.6rem;
}

.step-media-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.9rem;
  border-radius: 99px;
  border: 1.5px solid;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--parch2);
}

.step-media-btn-video {
  color: var(--purple-dk);
  border-color: var(--purple-lt);
}

.step-media-btn-video:hover {
  background: #f0eaff;
  border-color: var(--purple);
}

.step-media-btn-audio {
  color: #7a5c00;
  border-color: #e8d87a;
  background: #fffbe6;
}

.step-media-btn-audio:hover {
  background: #fff3c0;
  border-color: #c8972a;
}

/* Contenu media déroulant */
.step-media-content {
  margin-top: 0.5rem;
  border-radius: var(--radius);
  overflow: hidden;
}

/* Wrapper vidéo 16/9 */
.step-video-wrap {
  position: relative;
  padding-top: 56.25%;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
}

.step-video-wrap iframe,
.step-video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Barre de boutons media sous le titre de la question */
.question-media-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.6rem 1.75rem 0.2rem;
  background: var(--parch2);
  border-bottom: 1px solid var(--parch3);
}

/* Boutons icône émoji dans adventure-header */
.btn-icon {
  background: none;
  border: 1.5px solid var(--parch3);
  border-radius: 8px;
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.3rem 0.45rem;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-icon:hover:not(:disabled) {
  background: var(--parch2);
  border-color: var(--purple);
  transform: scale(1.08);
}

.btn-icon-active {
  border-color: var(--gold, #c8972a);
  background: #fff9e6;
}

.btn-icon-active:hover {
  background: #fff3c0 !important;
  border-color: #c8972a !important;
}

.btn-icon-disabled {
  opacity: 0.35;
  cursor: not-allowed !important;
  filter: grayscale(0.5);
}

/* ============================================================
   HELP MODAL — même format que advise-modal
   ============================================================ */


.help-wip {
  font-style: italic;
  color: #aaa;
  text-align: center;
  padding: 2rem 0;
}

/* ============================================================
   SETTINGS MODAL — même format que help/advise modal
   ============================================================ */

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--parch3);
}
.settings-row:last-child { border-bottom: none; }

.settings-label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  cursor: pointer;
}

.settings-label-title {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  color: var(--ink);
}

.settings-label-desc {
  font-size: 0.78rem;
  color: #888;
  font-style: italic;
}

/* Toggle switch */
.settings-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}

.settings-toggle input { opacity: 0; width: 0; height: 0; }

.settings-toggle-slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 24px;
  transition: background 0.2s;
}

.settings-toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.settings-toggle input:checked + .settings-toggle-slider { background: var(--purple); }
.settings-toggle input:checked + .settings-toggle-slider::before { transform: translateX(20px); }


/* settings-modal overlay (utilise advise-modal-box pour le contenu) */
.settings-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1100;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* Footer dans le body de la modale settings */
.settings-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-top: 0.75rem;
  margin-top: 0.5rem;
  border-top: 1.5px solid var(--parch3);
}

/* ============================================================
   SLIDESHOW — images multiples dans une question/étape
   ============================================================ */
.question-slideshow {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
  max-height: 320px;
}

.slideshow-img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slideshow-img.active {
  display: block;
  opacity: 1;
}

.slideshow-prev,
.slideshow-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.45);
  color: #fff;
  border: none;
  padding: 0.4rem 0.7rem;
  font-size: 1.1rem;
  cursor: pointer;
  border-radius: var(--radius);
  z-index: 2;
  transition: background 0.2s;
  line-height: 1;
}
.slideshow-prev:hover,
.slideshow-next:hover { background: rgba(0,0,0,0.7); }

.slideshow-prev { left: 0.5rem; }
.slideshow-next { right: 0.5rem; }

.slideshow-dots {
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  z-index: 2;
}

.slideshow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background 0.2s;
}

.slideshow-dot.active { background: #fff; }

/* ============================================================
   FONT AWESOME — icônes dans les boutons
   ============================================================ */
.btn i, .btn-icon i {
  font-family: 'Font Awesome 6 Free', 'Cinzel', serif;
  font-weight: 900;
  font-size: 0.9rem;
  line-height: 1;
}

.btn-icon i {
  font-size: 1rem;
}


/* ══════════════════════════════════════════════════════════════
   4. TRAVEL-FRONT — styles page d'accueil TravelCourse
   ══════════════════════════════════════════════════════════════ */
/* ============================================================
   travel-front.css
   version   : tanuki-dev.4.11
   Styles for the TravelCourse fluid front page.
   Loaded by travel-front.js via <link> injection.
   ============================================================ */

/* ── Header ── */
.tc-logo         { height: 40px; width: auto; margin-bottom: 6px; }
.tc-front-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.tc-front-title  { flex: 1; }
.tc-subtitle     { font-size: 0.85rem; color: var(--muted-color, #888); margin-top: 2px; }

/* ── Stats bar ── */
.tc-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 10px; }
.tc-stat  { font-size: 0.78rem; display: flex; align-items: center; gap: 4px;
             color: var(--muted-color, #888); }
.tc-stat i { font-size: 11px; }

/* ── Difficulty stars ── */
.tc-difficulty { font-size: 0.75rem; color: #c4541a; letter-spacing: 1px; }

/* ── Tags ── */
.tc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tc-tag  { width: 26px; height: 26px; border-radius: 6px;
            background: var(--bg-secondary, #f0ede6);
            border: 1px solid var(--border-color, #ccc);
            display: flex; align-items: center; justify-content: center; }
.tc-tag i { font-size: 11px; color: var(--muted-color, #888); }

/* ── Description ── */
.tc-description { font-size: 0.85rem; line-height: 1.6;
                   color: var(--text-color, #333); margin-bottom: 14px; }

/* ── Stage list ── */
.tc-stages-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

.tc-stage-card  { display: flex; align-items: center; gap: 10px;
                   background: var(--bg-secondary, #f5f2eb);
                   border: 1px solid var(--border-color, #cdc8be);
                   border-radius: 10px; padding: 10px 12px;
                   cursor: pointer; transition: border-color .15s; }
.tc-stage-card:hover           { border-color: var(--accent-color, #5b8cff); }
.tc-stage-card--current        { border-color: #5b8cff; background: #e8f0fe; }
.tc-stage-card--done           { border-left: 3px solid #2d9e5a; }

.tc-stage-num { width: 28px; height: 28px; border-radius: 50%;
                 background: var(--border-color, #cdc8be);
                 display: flex; align-items: center; justify-content: center;
                 font-size: 12px; font-weight: 700; flex-shrink: 0; }
.tc-stage-card--current .tc-stage-num { background: #5b8cff; color: #fff; }
.tc-stage-card--done    .tc-stage-num { background: #2d9e5a; color: #fff; }

.tc-stage-body  { flex: 1; min-width: 0; }
.tc-stage-title { font-size: 0.9rem; font-weight: 600; margin-bottom: 3px;
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-stage-meta  { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.tc-meta-item   { font-size: 0.72rem; color: var(--muted-color, #888);
                   display: flex; align-items: center; gap: 3px; }
.tc-meta-item i { font-size: 10px; }
.tc-stage-resume { font-size: 0.75rem; color: var(--muted-color, #888);
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tc-stage-arrow { color: var(--muted-color, #bbb); font-size: 12px; flex-shrink: 0; }

/* ── Footer ── */
.tc-front-footer { display: flex; gap: 8px; justify-content: flex-end;
                    flex-wrap: wrap; padding-top: 4px; }


/* ══════════════════════════════════════════════════════════════
   5. TC ADDITIONS — ajouts release 413
   ══════════════════════════════════════════════════════════════ */

.icon-btn:disabled,
.icon-btn.disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}

.icon-btn.btn-intro-start {
  background: var(--purple, #533483);
  color: #fff;
  box-shadow: 0 2px 8px rgba(83,52,131,0.4);
  animation: pulse-start 2s ease-in-out infinite;
}
@keyframes pulse-start {
  0%, 100% { box-shadow: 0 2px 8px rgba(83,52,131,0.4); }
  50%       { box-shadow: 0 4px 16px rgba(83,52,131,0.7); }
}

/* ── Tag styles ── */
.tag-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    background: var(--tag-bg, rgba(0,0,0,0.08));
    color: var(--tag-color, #555);
    font-size: 0.78rem;
    font-weight: 500;
    margin: 2px 3px;
}
.tag-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--tag-bg, rgba(0,0,0,0.08));
    color: var(--tag-color, #555);
    font-size: 0.85rem;
    margin: 2px;
    cursor: default;
}
.tag-icon:hover {
    background: var(--tag-hover-bg, rgba(0,0,0,0.15));
}

/* ── Stage duration badge ── */
.stage-duration {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--tag-color, #777);
    background: var(--tag-bg, rgba(0,0,0,0.07));
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
    vertical-align: middle;
}
.stage-duration i {
    font-size: 0.7rem;
}

/* ── Travel title badge (in tagsh, shown during stage) ── */
.tc-title-badge {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--tag-color, #555);
    background: var(--tag-bg, rgba(0,0,0,0.07));
    padding: 3px 12px;
    border-radius: 12px;
    letter-spacing: 0.02em;
}


/* ══════════════════════════════════════════════════════════
   SPOT TABLE — Mobile card layout (≤ 700px)
   Desktop : standard 3-column table (Title | Tags | Desc)
   Mobile  : each row becomes a card:
             line 1 — title · gps btn · url btn · tags
             line 2 — rate (stars)
             line 3 — address / phone / email (if present)
             line 4 — description
   ══════════════════════════════════════════════════════════ */

/* ── Stage overview — button-like cards ── */
.tc-stage-btn { -webkit-tap-highlight-color: transparent; }
.tc-stage-btn:hover {
  border-color: #c8972a !important;
  box-shadow: 0 3px 10px rgba(200,151,42,.18) !important;
  transform: translateY(-1px);
}
.tc-stage-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0,0,0,.10) !important;
}

/* ── SPOT Tables — outer card per spot row ── */
#SPOT-Table, #SPOTcoffee-Table, #SPOTeat-Table, #SPOTbuy-Table, #SPOTvisit-Table {
  width: 100%;
  /* separate (not collapse) so border-radius on rows/cells is honored */
  border-collapse: separate;
  border-spacing: 0 10px;   /* vertical gap between spot cards */
}

#SPOT-Table thead, #SPOTcoffee-Table thead, #SPOTeat-Table thead,
#SPOTbuy-Table thead, #SPOTvisit-Table thead { display: none; }

#SPOT-Table > tbody > tr,
#SPOTcoffee-Table > tbody > tr,
#SPOTeat-Table > tbody > tr,
#SPOTbuy-Table > tbody > tr,
#SPOTvisit-Table > tbody > tr {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

#SPOT-Table > tbody > tr > td,
#SPOTcoffee-Table > tbody > tr > td,
#SPOTeat-Table > tbody > tr > td,
#SPOTbuy-Table > tbody > tr > td,
#SPOTvisit-Table > tbody > tr > td {
  padding: 0;
  border: 1px solid #e8e3dc;
  border-left: none;
  border-right: none;
  overflow: hidden;
}

/* rounded outer corners — applied to the first/last cell of each row */
#SPOT-Table > tbody > tr > td:first-child,
#SPOTcoffee-Table > tbody > tr > td:first-child,
#SPOTeat-Table > tbody > tr > td:first-child,
#SPOTbuy-Table > tbody > tr > td:first-child,
#SPOTvisit-Table > tbody > tr > td:first-child {
  border-left: 0px solid #e8e3dc;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
#SPOT-Table > tbody > tr > td:last-child,
#SPOTcoffee-Table > tbody > tr > td:last-child,
#SPOTeat-Table > tbody > tr > td:last-child,
#SPOTbuy-Table > tbody > tr > td:last-child,
#SPOTvisit-Table > tbody > tr > td:last-child {
  border-right: 0px solid #e8e3dc;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* single-cell rows: round all four corners */
#SPOT-Table > tbody > tr > td:only-child,
#SPOTcoffee-Table > tbody > tr > td:only-child,
#SPOTeat-Table > tbody > tr > td:only-child,
#SPOTbuy-Table > tbody > tr > td:only-child,
#SPOTvisit-Table > tbody > tr > td:only-child {
  border: 0px solid #e8e3dc;
  border-radius: 10px;
}

/* highlighted row */
tr.spot-highlighted > td { background: #c8972a !important; }

/* ── stage-access ── */
.stage-access {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-row-color, #555);
  opacity: 0.85;
  margin-top: 6px;
  white-space: pre-line;
}


/* Conteneur Flex pour mettre le titre à gauche et les boutons à droite */
.title-flex-container {
    display: flex;
    justify-content: space-between; /* Aligne le titre à gauche et les boutons à droite */
    align-items: center;           /* Centre verticalement le titre et les boutons */
    width: 100%;
    margin-bottom: 10px;           /* Espace optionnel avant la ligne "Titre Stage" */
}

/* Optionnel : Ajustement des marges des boutons pour qu'ils ne collent pas */
.table-buttons {
    display: flex;
    gap: 1px;                      /* Crée un espace régulier entre chaque bouton icon */
}
/* ── story-block ── */
.story-block {
  margin-top: 14px;
  background: var(--story-bg, rgba(255,255,255,0.06));
  border-radius: var(--full-radius, 8px);
  padding: 10px 14px 12px;
}

.story-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-row-color, #555);
  margin-bottom: 8px;
  opacity: 0.75;
}

.story-header i {
  font-size: 0.9rem;
  color: var(--button-color, #c8972a);
  flex-shrink: 0;
}

.story-block .text-row {
  margin-top: 0;
}

/* ── access-block ── */
.access-block {
  margin-top: 14px;
  background: var(--story-bg, rgba(255,255,255,0.06));
  border-radius: var(--full-radius, 8px);
  padding: 10px 14px 12px;
}

.access-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-row-color, #555);
  margin-bottom: 8px;
  opacity: 0.75;
}

.access-header i {
  font-size: 0.9rem;
  color: var(--button-color, #c8972a);
  flex-shrink: 0;
}

.access-block .stage-access {
  margin-top: 0;
}

/* ── SPOT table ── */
.SPOT-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.SPOT-data-table th {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 2px solid rgba(255,255,255,0.15);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-row-color);
  opacity: 0.6;
}
.SPOT-data-table td {
  padding: 8px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  vertical-align: top;
  color: var(--text-row-color);
}
.SPOT-data-table tr:last-child td { border-bottom: none; }

/* ── Custom map markers ── */
.custom-marker {
  background: transparent !important;
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.custom-marker i {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #fff;
  z-index: 2;
}
.marker-bg {
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid rgba(0,0,0,0.2);
}
.marker-bg.orange { background: #c8972a; }
.marker-bg.green  { background: #2d9e5a; }
.marker-bg.red    { background: #c0392b; }
.marker-bg.gray   { background: #888; }
.marker-bg.gold   { background: #f0a500; }
.marker-bg.blue   { background: #2980b9; }
.marker-bg.tag-restaurant { background: #e05c2a; }
.marker-bg.tag-bar        { background: #7b3fa6; }
.marker-bg.tag-shop       { background: #2980b9; }
.marker-bg.tag-museum     { background: #16a085; }
.marker-bg.tag-temple     { background: #c0392b; }
.marker-bg.tag-hotel      { background: #2d6a9f; }
.marker-bg.tag-castle     { background: #6c3483; }
.marker-bg.tag-subway     { background: #1a6b3c; }
.marker-bg.tag-bus        { background: #117a65; }
.marker-bg.tag-other      { background: #717d7e; }

/* ── advise-block ── */
.advise-block {
  margin-top: 14px;
  background: var(--story-bg, rgba(255,255,255,0.06));
  border-radius: var(--full-radius, 8px);
  padding: 10px 14px 12px;
}

.advise-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-row-color, #555);
  margin-bottom: 8px;
  opacity: 0.75;
}

.advise-header i {
  font-size: 0.9rem;
  color: var(--button-color, #c8972a);
  flex-shrink: 0;
}

.advise-block .text-row {
  margin-top: 0;
}

/* ── Spot row highlighted from map click ── */
tr.spot-highlighted td {
  background: #c8972a !important;
  color: #fff !important;
  transition: background .25s;
}
tr.spot-highlighted td a,
tr.spot-highlighted td small,
tr.spot-highlighted td span,
tr.spot-highlighted td i {
  color: rgba(255,255,255,0.85) !important;
}

/* ── Category blocks (street_coffee, eat_restaurant, buy_browse, visit_view) ── */
.street_coffee-block,
.eat_restaurant-block,
.buy_browse-block,
.visit_view-block {
  margin-top: 14px;
  background: var(--story-bg, rgba(255,255,255,0.06));
  border-radius: var(--full-radius, 8px);
  padding: 10px 14px 12px;
}

.street-coffee-header,
.eat_restaurant-header,
.buy_browse-header,
.visit_view-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-row-color, #555);
  margin-bottom: 8px;
  opacity: 0.75;
}

.street-coffee-header i,
.eat_restaurant-header i,
.buy_browse-header i,
.visit_view-header i {
  font-size: 0.9rem;
  color: var(--button-color, #c8972a);
  flex-shrink: 0;
}

.street_coffee-block .text-row,
.eat_restaurant-block .text-row,
.buy_browse-block .text-row,
.visit_view-block .text-row {
  margin-top: 0;
  margin-bottom: 8px;
}

/* ── Bouton goadvise masqué temporairement ── */
#goadvise {
  display: none !important;
}

/* ── Travel loading splash (markup in index.html, controlled by travelcourse.js) ── */
#tc-splash{position:fixed;inset:0;z-index:99999;background:#1a1712;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .4s ease;opacity:1;}
#tc-splash.tc-hide{opacity:0;pointer-events:none;}
.tc-splash-box{text-align:center;color:#f0ece4;font-family:'Segoe UI',system-ui,sans-serif;padding:24px;}
.tc-splash-spinner{width:46px;height:46px;margin:0 auto 22px;border-radius:50%;
  border:4px solid rgba(240,236,228,.18);border-top-color:#c8972a;
  animation:tc-spin 1s linear infinite;}
@keyframes tc-spin{to{transform:rotate(360deg);}}
.tc-splash-label{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:#cbb27a;margin-bottom:8px;}
.tc-splash-title{font-size:1.3rem;font-weight:700;max-width:80vw;margin:0 auto;line-height:1.3;}