/* ============================================================
   ASSV Côte d'Ivoire — speciale.css
   CSS partagé pour les pages spéciales Assinie 2026
   (essankro.html, adiake.html, allohore.html)
   ============================================================ */

/* PAGE LAYOUT */
.page { max-width: 1000px; width: 100%; margin: 0 auto; background: #1A1A1A; }

/* HEADER */
.header { background: linear-gradient(135deg, #1A1A1A 0%, #2A1A15 100%); padding: clamp(15px,4vw,25px) clamp(15px,4vw,35px) clamp(12px,3vw,22px); border-bottom: 4px solid #E63916; position: relative; overflow: hidden; }
.header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient(45deg, transparent, transparent 30px, rgba(230,57,22,0.03) 30px, rgba(230,57,22,0.03) 60px); }
.header-content { position: relative; z-index: 1; }
.event-badge { display:inline-block; background-color:#E63916; color:#ffffff; font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:3px; font-size: clamp(9px,2vw,12px); padding: 4px 12px; }
.header h1 { font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase; line-height:1; font-size: clamp(28px,6vw,52px); margin: 8px 0 3px; }
.header h1 span { color:#E63916; }
.stage-subtitle { font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:2px; font-size: clamp(13px,3vw,20px); color: rgba(255,255,255,0.6); }
.stage-number { position: absolute; right: clamp(15px,4vw,40px); top: 50%; transform: translateY(-50%); font-family:'Oswald',sans-serif; font-weight:700; font-size: clamp(60px,15vw,110px); color: rgba(230,57,22,0.1); line-height: 1; z-index: 0; }

/* METRICS */
.metrics-bar { display: grid; grid-template-columns: repeat(3,1fr); background: #2A2A2A; border-bottom: 1px solid rgba(255,255,255,0.08); }
@media (min-width: 600px) { .metrics-bar { grid-template-columns: repeat(6,1fr); } }
.metric { padding: clamp(10px,2.5vw,20px) clamp(8px,2vw,12px); text-align: center; border-right: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); transition: background .2s; }
.metric:last-child { border-right: none; }
@media (min-width: 600px) { .metric { border-bottom: none; } }
.metric-value { font-family:'Oswald',sans-serif; font-weight:600; color:#ffffff; line-height:1.1; font-size: clamp(20px,4vw,28px); }
.metric-value .unit { font-size: clamp(10px,2vw,14px); font-weight: 400; color: rgba(255,255,255,0.5); }
.metric-label { font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:1.5px; font-size: clamp(8px,1.8vw,10px); color: rgba(255,255,255,0.45); margin-top: 3px; }
.metric-icon { font-size: clamp(11px,2.5vw,14px); margin-bottom: 3px; display: block; opacity: 0.5; }

/* METRICS HOVER */
.metric:hover { background: rgba(230,57,22,0.05); }
.metric:hover .metric-value { color: #F7A828; }
.metric:hover .metric-icon { opacity: 1; }

/* COMMENT */
.comment-box { margin: 0 clamp(15px,4vw,35px); padding: clamp(12px,3vw,16px) clamp(14px,3vw,20px); background: rgba(230,57,22,0.06); border-left: 4px solid #E63916; border-radius: 0 6px 6px 0; margin-top: clamp(12px,3vw,20px); }
.comment-title { font-family:'Oswald',sans-serif; font-weight:600; color:#E63916; text-transform:uppercase; letter-spacing:2px; font-size: clamp(9px,2vw,11px); margin-bottom: 6px; }
.comment-text { font-family:'Barlow',sans-serif; line-height:1.7; font-size: clamp(12px,2.5vw,13px); color: rgba(255,255,255,0.75); }

/* SECTIONS */
.section { padding: clamp(15px,3vw,20px) clamp(15px,4vw,35px); }
.section-title { font-family:'Oswald',sans-serif; font-weight:600; color:#E63916; text-transform:uppercase; display:flex; align-items:center; gap:10px; font-size: clamp(10px,2.2vw,13px); letter-spacing: 3px; margin-bottom: clamp(10px,2.5vw,16px); }
.section-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, #E63916, transparent); }

/* SECTION REVEAL (scroll animation) */
.section-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.section-reveal.visible { opacity: 1; transform: none; }

/* ELEVATION */
.elevation-container { background: rgba(255,255,255,0.03); border-radius: 8px; padding: clamp(12px,3vw,20px); }
.elevation-chart { width: 100%; height: clamp(120px,25vw,180px); }
.elevation-svg { width: 100%; height: 100%; }
.alt-markers { display:flex; justify-content:space-between; padding-top:4px; }
.alt-marker-km { font-family:'Oswald',sans-serif; font-size: clamp(8px,1.8vw,11px); color: rgba(255,255,255,0.35); }
.elev-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px clamp(12px,3vw,25px); margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.06); }
@media (min-width: 500px) { .elev-stats { grid-template-columns: repeat(4,1fr); } }

/* ELEV STAT — apparition décalée */
.elev-stat { display:flex; align-items:center; gap:6px; opacity: 0; transform: translateY(8px); animation: statIn .4s ease forwards; }
.elev-stat:nth-child(1) { animation-delay: 1.8s; }
.elev-stat:nth-child(2) { animation-delay: 1.95s; }
.elev-stat:nth-child(3) { animation-delay: 2.1s; }
.elev-stat:nth-child(4) { animation-delay: 2.25s; }
@keyframes statIn { to { opacity: 1; transform: none; } }

.elev-stat-icon { font-size: clamp(13px,2.5vw,16px); }
.elev-stat-value { font-family:'Oswald',sans-serif; font-weight:500; color:#ffffff; font-size: clamp(14px,2.8vw,17px); }
.elev-stat-label { font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:1px; font-size: clamp(7px,1.5vw,9px); color: rgba(255,255,255,0.4); }

/* ELEVATION SVG — tracé animé */
.elev-line-anim { stroke-dasharray: 3000; stroke-dashoffset: 3000; animation: drawElev 2s cubic-bezier(.4,0,.2,1) forwards; animation-delay: .3s; }
@keyframes drawElev { to { stroke-dashoffset: 0; } }
.elev-fill-anim { opacity: 0; animation: fillFadeIn .8s ease forwards; animation-delay: 1.8s; }
@keyframes fillFadeIn { to { opacity: 1; } }

/* TERRAIN GRID */
.terrain-grid { display: grid; grid-template-columns: 1fr; gap: 15px; }
@media (min-width: 600px) { .terrain-grid { grid-template-columns: 1fr 1fr; } }
.terrain-breakdown, .difficulty-panel { background: rgba(255,255,255,0.03); border-radius: 8px; padding: clamp(15px,3vw,22px); }
.terrain-bar-container { margin-bottom: 10px; }
.terrain-bar-header { display:flex; justify-content:space-between; align-items:center; margin-bottom: 4px; }
.terrain-bar-label { font-family:'Barlow Condensed',sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:1px; font-size: clamp(11px,2.2vw,13px); color: rgba(255,255,255,0.8); }
.terrain-bar-pct { font-family:'Oswald',sans-serif; font-weight:500; font-size: clamp(12px,2.5vw,15px); color: rgba(255,255,255,0.6); }
.terrain-bar-track { height: 6px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.terrain-bar-fill { height: 100%; border-radius: 4px; width: 0; transition: width 1s cubic-bezier(.4,0,.2,1); }

/* DIFFICULTY */
.difficulty-panel { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.difficulty-gauge { width: clamp(140px,30vw,180px); height: clamp(75px,16vw,100px); margin-bottom: 10px; }
.gauge-svg { width: 100%; height: 100%; }
.difficulty-label { font-family:'Oswald',sans-serif; font-weight:600; color:#F7A828; text-transform:uppercase; font-size: clamp(20px,4vw,26px); }
.difficulty-desc { font-size: clamp(10px,2vw,12px); color: rgba(255,255,255,0.5); text-align: center; max-width: 220px; line-height: 1.4; margin-top: 4px; }

/* SLOPE */
.slope-container { background: rgba(255,255,255,0.03); border-radius: 8px; padding: clamp(12px,3vw,20px); }
.slope-chart { width: 100%; height: clamp(40px,10vw,65px); }
.slope-legend { display:flex; justify-content:center; flex-wrap:wrap; gap: clamp(8px,2vw,18px); margin-top: 8px; }
.slope-legend-item { display:flex; align-items:center; gap:4px; font-family:'Barlow Condensed',sans-serif; font-size: clamp(9px,1.8vw,11px); color: rgba(255,255,255,0.6); }
.slope-legend-dot { border-radius: 2px; width: clamp(7px,1.5vw,10px); height: clamp(7px,1.5vw,10px); }

/* SLOPE BARS — animation d'apparition */
@keyframes barIn { from { opacity: 0; transform: scaleY(0); } to { opacity: 0.85; transform: scaleY(1); } }

/* ============================================================
   LIGHT THEME — spéciales
   ============================================================ */
body.light-theme .page { background: #F5F5F5; }
body.light-theme .header { background: linear-gradient(135deg, #F0F0F0 0%, #F5EAE8 100%); }
body.light-theme .stage-subtitle { color: rgba(0,0,0,.5); }
body.light-theme .metrics-bar { background: #E8E8E8; border-color: rgba(0,0,0,.08); }
body.light-theme .metric { border-color: rgba(0,0,0,.07); }
body.light-theme .metric-value { color: #1A1A1A; }
body.light-theme .metric-value .unit { color: rgba(0,0,0,.45); }
body.light-theme .metric-label { color: rgba(0,0,0,.5); }
body.light-theme .metric:hover { background: rgba(230,57,22,.04); }
body.light-theme .metric:hover .metric-value { color: #E63916; }
body.light-theme .comment-box { background: rgba(230,57,22,.05); }
body.light-theme .comment-text { color: rgba(0,0,0,.75); }
body.light-theme .elevation-container { background: rgba(0,0,0,.04); }
body.light-theme .alt-marker-km { color: rgba(0,0,0,.35); }
body.light-theme .elev-stats { border-color: rgba(0,0,0,.08); }
body.light-theme .elev-stat-value { color: #1A1A1A; }
body.light-theme .elev-stat-label { color: rgba(0,0,0,.45); }
body.light-theme .terrain-breakdown, body.light-theme .difficulty-panel { background: rgba(0,0,0,.04); }
body.light-theme .terrain-bar-label { color: rgba(0,0,0,.8); }
body.light-theme .terrain-bar-pct { color: rgba(0,0,0,.6); }
body.light-theme .terrain-bar-track { background: rgba(0,0,0,.1); }
body.light-theme .difficulty-desc { color: rgba(0,0,0,.5); }
body.light-theme .slope-container { background: rgba(0,0,0,.04); }
body.light-theme .slope-legend-item { color: rgba(0,0,0,.6); }
body.light-theme .data-note { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.12); color: rgba(0,0,0,.4); }
body.light-theme .data-note strong { color: rgba(0,0,0,.6); }
body.light-theme .fiche-footer { background: #E2E2E2; border-color: rgba(0,0,0,.08); }
body.light-theme .footer-left { color: rgba(0,0,0,.4); }

/* DATA NOTE */
.data-note { background: rgba(255,255,255,0.03); border-left: 3px solid rgba(255,255,255,0.1); padding: clamp(8px,2vw,10px) clamp(10px,2.5vw,15px); font-size: clamp(8px,1.8vw,10px); color: rgba(255,255,255,0.35); line-height: 1.6; margin: 0 clamp(15px,4vw,35px) clamp(10px,2.5vw,15px); }
.data-note strong { color: rgba(255,255,255,0.5); }

/* FOOTER */
.fiche-footer { background: #2A2A2A; padding: clamp(10px,2.5vw,16px) clamp(15px,4vw,35px); display:flex; justify-content:space-between; align-items:center; border-top: 1px solid rgba(255,255,255,0.06); flex-wrap:wrap; gap: 5px; }
.footer-left { font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:2px; font-size: clamp(7px,1.5vw,10px); color: rgba(255,255,255,0.3); }
.footer-right { font-family:'Oswald',sans-serif; font-weight:600; color:#E63916; text-transform:uppercase; letter-spacing:2px; font-size: clamp(9px,2vw,13px); }