/* ============================================================
   TERRAIN-THEME.CSS — Design System SOS Terrain
   Haute-Correze Communaute — Remontee Operationnelle
   Mobile-first, BIG touch targets, outdoor/glove use
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --hcc-dark-blue: #283E5D;
  --hcc-dark-blue-light: #3A5478;
  --hcc-dark-blue-dark: #1B2C42;
  --hcc-orange: #E67E22;
  --hcc-orange-light: #F39C12;
  --hcc-orange-dark: #D35400;
  --hcc-magenta: #AF337E;
  --hcc-magenta-light: #C94F96;
  --hcc-magenta-dark: #8A2864;
  --hcc-bg: #F5F6F8;
  --hcc-card: #FFFFFF;
  --hcc-text: #1A1A2E;
  --hcc-text-secondary: #5A5F7A;
  --hcc-text-muted: #8B90A5;
  --hcc-border: #E2E4EA;
  --hcc-border-light: #F0F1F4;
  --hcc-success: #27AE60;
  --hcc-warning: #F39C12;
  --hcc-danger: #E74C3C;
  --hcc-info: #3498DB;
  --urgency-haute: #E74C3C;
  --urgency-moyenne: #F39C12;
  --urgency-faible: #3498DB;
  --urgency-info: #95A5A6;
  --shadow-sm: 0 1px 3px rgba(40,62,93,.08);
  --shadow-md: 0 4px 12px rgba(40,62,93,.1);
  --shadow-lg: 0 8px 30px rgba(40,62,93,.12);
  --shadow-xl: 0 16px 48px rgba(40,62,93,.15);
  --space-xs: .25rem;
  --space-sm: .5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-size-xs: .8rem;
  --font-size-sm: .9rem;
  --font-size-base: 1.05rem;
  --font-size-lg: 1.2rem;
  --font-size-xl: 1.35rem;
  --font-size-2xl: 1.6rem;
  --font-size-3xl: 2.1rem;
  --font-size-4xl: 2.6rem;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 50%;
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --nav-height: 56px;
  --container-max: 1200px;
  --container-narrow: 800px;
  --touch-min: 48px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:1.6;color:var(--hcc-text);background:var(--hcc-bg);min-height:100vh;-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
a{color:var(--hcc-dark-blue);text-decoration:none;transition:color var(--transition-fast)}
a:hover{color:var(--hcc-orange)}

h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.25;color:var(--hcc-text)}
h1{font-size:var(--font-size-3xl);letter-spacing:-.02em}
h2{font-size:var(--font-size-2xl)}
h3{font-size:var(--font-size-xl)}

.text-muted{color:var(--hcc-text-muted)}.text-secondary{color:var(--hcc-text-secondary)}.text-center{text-align:center}.text-sm{font-size:var(--font-size-sm)}

.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--space-md)}
.container--narrow{max-width:var(--container-narrow)}

/* --- Nav --- */
.nav{background:var(--hcc-dark-blue);height:var(--nav-height);position:sticky;top:0;z-index:1000;box-shadow:var(--shadow-md)}
.nav__inner{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-md);display:flex;align-items:center;justify-content:space-between;height:100%}
.nav__logo{height:30px;width:auto}
.nav__brand{display:flex;align-items:center;gap:var(--space-sm);color:#fff;font-weight:700;font-size:var(--font-size-base)}
.nav__tagline{color:var(--hcc-orange);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.nav__links{display:flex;align-items:center;gap:var(--space-md);list-style:none}
.nav__links a{color:rgba(255,255,255,.8);font-size:var(--font-size-sm);font-weight:500;min-height:var(--touch-min);display:flex;align-items:center;padding:0 var(--space-sm)}
.nav__links a:hover,.nav__links a.active{color:#fff}
.nav__toggle{display:none;background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:var(--space-sm);min-width:var(--touch-min);min-height:var(--touch-min)}
@media(max-width:768px){
  .nav__toggle{display:block}
  .nav__links{display:none;position:absolute;top:var(--nav-height);left:0;right:0;background:var(--hcc-dark-blue);flex-direction:column;padding:var(--space-lg);gap:var(--space-md);box-shadow:var(--shadow-lg)}
  .nav__links.open{display:flex}
}

/* --- Hero --- */
.hero{background:linear-gradient(135deg,var(--hcc-dark-blue) 0%,var(--hcc-dark-blue-dark) 60%,#1a2538 100%);color:#fff;padding:var(--space-2xl) 0 var(--space-xl);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-50%;right:-20%;width:600px;height:600px;background:radial-gradient(circle,rgba(230,126,34,.15) 0%,transparent 70%);border-radius:50%}
.hero__content{position:relative;z-index:1;max-width:var(--container-narrow);margin:0 auto;text-align:center;padding:0 var(--space-md)}
.hero__logo{height:44px;margin:0 auto var(--space-md)}
.hero h1{color:#fff;margin-bottom:var(--space-sm)}
.hero__subtitle{font-size:var(--font-size-lg);color:rgba(255,255,255,.85);margin-bottom:var(--space-lg);line-height:1.6}
.hero__badge{display:inline-block;background:rgba(230,126,34,.2);color:var(--hcc-orange-light);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-xl);font-size:var(--font-size-sm);font-weight:600;margin-bottom:var(--space-md);border:1px solid rgba(230,126,34,.3)}

/* --- Buttons (BIG for gloves) --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:.9rem 2rem;font-family:var(--font-family);font-size:var(--font-size-lg);font-weight:700;border:2px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);text-decoration:none;line-height:1.4;min-height:var(--touch-min);user-select:none;-webkit-user-select:none}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0);box-shadow:var(--shadow-sm)}
.btn--primary{background:var(--hcc-orange);color:#fff;border-color:var(--hcc-orange)}
.btn--primary:hover{background:var(--hcc-orange-light);border-color:var(--hcc-orange-light);color:#fff}
.btn--secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn--secondary:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.btn--outline{background:transparent;color:var(--hcc-dark-blue);border-color:var(--hcc-dark-blue)}
.btn--outline:hover{background:var(--hcc-dark-blue);color:#fff}
.btn--dark{background:var(--hcc-dark-blue);color:#fff;border-color:var(--hcc-dark-blue)}
.btn--dark:hover{background:var(--hcc-dark-blue-light);color:#fff}
.btn--magenta{background:var(--hcc-magenta);color:#fff;border-color:var(--hcc-magenta)}
.btn--success{background:var(--hcc-success);color:#fff;border-color:var(--hcc-success)}
.btn--danger{background:var(--hcc-danger);color:#fff;border-color:var(--hcc-danger)}
.btn--lg{padding:1.1rem 2.5rem;font-size:var(--font-size-xl);border-radius:var(--radius-lg);min-height:56px}
.btn--xl{padding:1.3rem 3rem;font-size:var(--font-size-2xl);border-radius:var(--radius-lg);min-height:64px;width:100%}
.btn--sm{padding:.5rem 1.2rem;font-size:var(--font-size-sm);min-height:var(--touch-min)}
.btn--block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none!important}

/* --- Cards --- */
.card{background:var(--hcc-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--hcc-border-light);padding:var(--space-lg);transition:all var(--transition-base)}
.card:hover{box-shadow:var(--shadow-md)}
.card--clickable{cursor:pointer}
.card--clickable:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.card--clickable:active{transform:translateY(0);box-shadow:var(--shadow-sm)}
.card__icon{width:56px;height:56px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin-bottom:var(--space-sm)}
.card__icon--orange{background:rgba(230,126,34,.12);color:var(--hcc-orange)}
.card__icon--blue{background:rgba(40,62,93,.1);color:var(--hcc-dark-blue)}
.card__icon--magenta{background:rgba(175,51,126,.1);color:var(--hcc-magenta)}
.card__title{font-size:var(--font-size-lg);font-weight:700;margin-bottom:var(--space-xs)}
.card__text{color:var(--hcc-text-secondary);line-height:1.6;font-size:var(--font-size-sm)}
.card-grid{display:grid;gap:var(--space-md)}
.card-grid--3{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.card-grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card-grid--4{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}

/* --- Urgency badges --- */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--radius-xl);font-size:var(--font-size-xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.badge--haute{background:rgba(231,76,60,.12);color:var(--urgency-haute)}
.badge--moyenne{background:rgba(243,156,18,.12);color:var(--urgency-moyenne)}
.badge--faible{background:rgba(52,152,219,.12);color:var(--urgency-faible)}
.badge--info{background:rgba(149,165,166,.12);color:var(--urgency-info)}
.badge--success{background:rgba(39,174,96,.12);color:var(--hcc-success)}

/* --- Status pipeline --- */
.status-bar{display:flex;gap:2px;margin:var(--space-sm) 0}
.status-bar__step{flex:1;height:6px;border-radius:3px;background:var(--hcc-border);transition:background var(--transition-base)}
.status-bar__step--done{background:var(--hcc-success)}
.status-bar__step--active{background:var(--hcc-orange)}
.status-labels{display:flex;gap:2px;margin-top:4px}
.status-labels span{flex:1;text-align:center;font-size:.65rem;color:var(--hcc-text-muted);font-weight:500}
.status-labels span.active{color:var(--hcc-orange);font-weight:700}
.status-labels span.done{color:var(--hcc-success)}

/* --- Forms (BIG for gloves) --- */
.form-group{margin-bottom:var(--space-lg)}
.form-label{display:block;font-weight:700;margin-bottom:var(--space-sm);color:var(--hcc-text);font-size:var(--font-size-lg)}
.form-select,.form-input,.form-textarea{width:100%;padding:.9rem 1rem;font-family:var(--font-family);font-size:var(--font-size-lg);color:var(--hcc-text);background:var(--hcc-card);border:2px solid var(--hcc-border);border-radius:var(--radius-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);appearance:none;min-height:var(--touch-min)}
.form-select:focus,.form-input:focus,.form-textarea:focus{outline:none;border-color:var(--hcc-orange);box-shadow:0 0 0 3px rgba(230,126,34,.15)}
.form-textarea{resize:vertical;min-height:100px}
.form-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235A5F7A' d='M6 8.825L.35 3.175 1.525 2 6 6.475 10.475 2l1.175 1.175z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}

/* --- Photo upload zone --- */
.photo-zone{display:flex;gap:var(--space-md);flex-wrap:wrap}
.photo-btn{width:120px;height:120px;border:3px dashed var(--hcc-border);border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-base);background:var(--hcc-card);color:var(--hcc-text-muted);font-size:2.5rem}
.photo-btn:hover,.photo-btn:active{border-color:var(--hcc-orange);color:var(--hcc-orange);background:rgba(230,126,34,.05)}
.photo-btn span{font-size:var(--font-size-xs);margin-top:4px}
.photo-wrapper{position:relative;width:120px;height:120px}
.photo-wrapper img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-lg);border:2px solid var(--hcc-success)}
.photo-wrapper .remove-photo{position:absolute;top:-8px;right:-8px;width:28px;height:28px;background:var(--hcc-danger);color:#fff;border:none;border-radius:var(--radius-full);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700}

/* --- Timer --- */
.timer{display:inline-flex;align-items:center;gap:var(--space-sm);background:rgba(230,126,34,.1);color:var(--hcc-orange-dark);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-xl);font-size:var(--font-size-sm);font-weight:700;font-variant-numeric:tabular-nums}

/* --- Stats cards --- */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-md);margin-bottom:var(--space-xl)}
.stat-card{background:var(--hcc-card);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-sm);border:1px solid var(--hcc-border-light);text-align:center}
.stat-card__value{font-size:var(--font-size-4xl);font-weight:900;color:var(--hcc-dark-blue);line-height:1}
.stat-card__label{font-size:var(--font-size-sm);color:var(--hcc-text-secondary);margin-top:var(--space-xs);font-weight:500}
.stat-card--orange .stat-card__value{color:var(--hcc-orange)}
.stat-card--success .stat-card__value{color:var(--hcc-success)}
.stat-card--danger .stat-card__value{color:var(--hcc-danger)}

/* --- Table --- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);background:var(--hcc-card)}
.table{width:100%;border-collapse:collapse;font-size:var(--font-size-sm)}
.table th,.table td{padding:var(--space-sm) var(--space-md);text-align:left;border-bottom:1px solid var(--hcc-border-light)}
.table th{background:var(--hcc-bg);font-weight:700;color:var(--hcc-text);font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.04em;position:sticky;top:0}
.table tr:hover{background:rgba(40,62,93,.03)}
.table td img{width:40px;height:40px;object-fit:cover;border-radius:var(--radius-sm)}

/* --- Filters --- */
.filters{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-bottom:var(--space-lg);align-items:center}
.filter-chip{padding:var(--space-xs) var(--space-md);border-radius:var(--radius-xl);border:2px solid var(--hcc-border);background:var(--hcc-card);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all var(--transition-fast);min-height:var(--touch-min);display:flex;align-items:center}
.filter-chip:hover,.filter-chip.active{border-color:var(--hcc-orange);background:rgba(230,126,34,.08);color:var(--hcc-orange-dark)}

/* --- Confirmation overlay --- */
.confirmation{position:fixed;inset:0;background:rgba(26,26,46,.85);display:flex;align-items:center;justify-content:center;z-index:2000;padding:var(--space-lg);backdrop-filter:blur(4px)}
.confirmation__card{background:var(--hcc-card);border-radius:var(--radius-xl);padding:var(--space-2xl);text-align:center;max-width:400px;width:100%;box-shadow:var(--shadow-xl)}
.confirmation__icon{font-size:4rem;margin-bottom:var(--space-md)}
.confirmation__code{font-size:var(--font-size-3xl);font-weight:900;color:var(--hcc-dark-blue);background:var(--hcc-bg);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);display:inline-block;margin:var(--space-md) 0;letter-spacing:.05em;font-variant-numeric:tabular-nums}

/* --- Steps indicator --- */
.steps{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);margin-bottom:var(--space-xl)}
.step-dot{width:12px;height:12px;border-radius:var(--radius-full);background:var(--hcc-border);transition:all var(--transition-base)}
.step-dot--active{background:var(--hcc-orange);width:36px;border-radius:6px}
.step-dot--done{background:var(--hcc-success)}

/* --- GPS indicator --- */
.gps-status{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:600}
.gps-status--searching{background:rgba(243,156,18,.12);color:var(--hcc-warning)}
.gps-status--found{background:rgba(39,174,96,.12);color:var(--hcc-success)}
.gps-status--error{background:rgba(231,76,60,.12);color:var(--hcc-danger)}
.gps-pulse{width:10px;height:10px;border-radius:50%;background:currentColor;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}

/* --- Section --- */
.section{padding:var(--space-xl) 0}
.section__title{font-size:var(--font-size-2xl);font-weight:800;margin-bottom:var(--space-lg)}

/* --- Chart containers --- */
.chart-container{background:var(--hcc-card);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-sm);border:1px solid var(--hcc-border-light);margin-bottom:var(--space-lg)}
.chart-container canvas{max-height:300px}

/* --- Admin lock --- */
.admin-lock{position:fixed;inset:0;background:var(--hcc-dark-blue);display:flex;align-items:center;justify-content:center;z-index:9999}
.admin-lock__card{background:var(--hcc-card);border-radius:var(--radius-xl);padding:var(--space-2xl);text-align:center;max-width:380px;width:90%;box-shadow:var(--shadow-xl)}
.admin-lock__card h2{margin-bottom:var(--space-lg)}
.admin-lock__input{font-size:var(--font-size-3xl);text-align:center;letter-spacing:.3em;font-weight:900;text-transform:uppercase}

/* --- Footer --- */
.footer{background:var(--hcc-dark-blue);color:rgba(255,255,255,.7);padding:var(--space-xl) 0;text-align:center;font-size:var(--font-size-sm)}
.footer a{color:var(--hcc-orange-light)}
.footer__logo{height:28px;margin:0 auto var(--space-sm);opacity:.7}

/* --- Offline banner --- */
.offline-banner{display:none;background:var(--hcc-warning);color:#fff;text-align:center;padding:var(--space-xs) var(--space-md);font-size:var(--font-size-sm);font-weight:700}
body.offline .offline-banner{display:block}

/* --- Responsive --- */
@media(max-width:600px){
  :root{--font-size-3xl:1.7rem;--font-size-4xl:2rem;--space-2xl:2rem}
  .card-grid--3{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .hero{padding:var(--space-xl) 0 var(--space-lg)}
}
@media(max-width:380px){
  .card-grid--3{grid-template-columns:1fr}
}

/* --- Utility --- */
.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mt-xl{margin-top:var(--space-xl)}
.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.mb-xl{margin-bottom:var(--space-xl)}
.hidden{display:none!important}.w-full{width:100%}.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.flex-wrap{flex-wrap:wrap}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}