:root{
    --ink:#141C26;
    --ink-soft:#4E5D6C;
    --paper:#EAF1F1;
    --panel:#FFFFFF;
    --line:rgba(20,28,38,0.13);
    --live:#E8402C;
    --live-dark:#C22E1D;
    --teal:#12879E;
    --teal-soft:rgba(18,135,158,0.12);
    --bs-body-font-family:'Inter',sans-serif;
    --bs-body-color:var(--ink);
    --bs-body-bg:var(--paper);
    --bs-border-color:var(--line);
    --bs-link-color:var(--ink);
    --bs-link-hover-color:var(--live);
  }
  html,
body
 {
	
	transition: opacity 1s ease;
	scroll-behavior: smooth;
 }
  body{ -webkit-font-smoothing:antialiased;  opacity:0; }
  a{ text-decoration:none; }
  .display-font{ font-family:'Syne',sans-serif; font-weight:700; letter-spacing:-0.01em; }
  .mono{ font-family:'IBM Plex Mono',monospace; }
  :focus-visible{ outline:2px solid var(--live); outline-offset:2px; }

  .eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--live); }
  .eyebrow::before{ content:""; width:16px; height:2px; background:var(--live); display:inline-block; margin-right:8px; vertical-align:middle; }
  .eyebrow.on-dark{ color:#fff; opacity:.9; }
  .eyebrow.on-dark::before{ background:#fff; }
  .eyebrow.teal{ color:var(--teal); }
  .eyebrow.teal::before{ background:var(--teal); }

  .btn{ font-weight:600; border-radius:3px; transition:transform .15s ease, box-shadow .15s ease; }
  .btn-live{ background:var(--live); border:1.5px solid var(--live); color:#fff; }
  .btn-live:hover{ background:var(--live-dark); border-color:var(--live-dark); color:#fff; transform:translateY(-2px); box-shadow:0 6px 16px rgba(232,64,44,0.3); }
  .btn-outline-light-custom{ border:1.5px solid #fff; color:#fff; background:transparent; }
  .btn-outline-light-custom:hover{ background:#fff; color:var(--ink); }

  .live-dot{ width:8px; height:8px; border-radius:50%; background:var(--live); display:inline-block; position:relative; flex-shrink:0; margin-right:6px; }
  .live-dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--live); animation:pulse 1.8s ease-out infinite; }
  @keyframes pulse{ 0%{transform:scale(1); opacity:.7;} 100%{transform:scale(2.8); opacity:0;} }
  .live-dot.white{ background:#fff; } .live-dot.white::after{ background:#fff; }

  .viewfinder{ position:relative; }
  .vf-tl,.vf-tr,.vf-bl,.vf-br{ content:""; position:absolute; width:18px; height:18px; z-index:3; }
  .vf-tl{ top:10px; left:10px; border-top:2px solid rgba(255,255,255,0.85); border-left:2px solid rgba(255,255,255,0.85); }
  .vf-tr{ top:10px; right:10px; border-top:2px solid rgba(255,255,255,0.85); border-right:2px solid rgba(255,255,255,0.85); }
  .vf-bl{ bottom:10px; left:10px; border-bottom:2px solid rgba(255,255,255,0.85); border-left:2px solid rgba(255,255,255,0.85); }
  .vf-br{ bottom:10px; right:10px; border-bottom:2px solid rgba(255,255,255,0.85); border-right:2px solid rgba(255,255,255,0.85); }

  /* ================= NAVBAR ================= */
  .site-navbar{ background:rgba(234,241,241,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
  .navbar-brand img{ height:30px; width:auto; }
  .logo-fallback{ font-weight:800; font-size:20px; display:flex; align-items:center; }
  .navbar-nav .nav-link{ font-weight:600; color:var(--ink-soft); margin:0 12px; position:relative; }
  .navbar-nav .nav-link::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--live); transition:width .2s ease; }
  .navbar-nav .nav-link:hover{ color:var(--ink); }
  .navbar-nav .nav-link:hover::after{ width:100%; }
   .navbar-nav .nav-link.active{ color:var(--ink); }
  .navbar-nav .nav-link.active::after{ width:100%; }
  .lang-switch a{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-soft); padding:4px 7px; border-radius:3px; }
  .lang-switch a.active{ background:var(--ink); color:#fff; }

  /* ================= HERO ================= */
  .hero{
    position:relative; min-height:100vh; display:flex; align-items:center; height:100%;
    background:
      linear-gradient(180deg, rgba(20,28,38,0.35) 0%, rgba(20,28,38,0.78) 100%),
      linear-gradient(160deg, #0E4C5C 0%, #12879E 45%, #6FC9C9 100%);
  }
  .hero #search {margin-top:7%}
  .hero h1{ color:#fff; font-size:clamp(32px,4.6vw,54px); line-height:1.03; max-width:16ch; }
  .hero h1 .accent{ color:#FFD873; }
  .hero-lede{ color:rgba(255,255,255,0.82); font-size:17px; max-width:48ch; line-height:1.6; }

  .search-panel{ background:rgba(20,28,38,0.55); border:1px solid rgba(255,255,255,0.22); backdrop-filter:blur(10px); border-radius:10px; padding:22px 24px; max-width:800px; }
  .search-cat{
    font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,0.7);
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2); padding:8px 14px; border-radius:20px; cursor:pointer;
  }
  .search-cat.active{ background:#fff; color:var(--ink); border-color:#fff; }
  .search-panel .form-label{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,0.55); }
  .search-panel .form-control, .search-panel .form-select{
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.25); border-radius:5px; color:#fff; box-shadow:none;
  }
  .search-panel .form-control::placeholder{ color:rgba(255,255,255,0.45); }
  .search-panel .form-control:focus, .search-panel .form-select:focus{ border-color:var(--live); box-shadow:none; background:rgba(255,255,255,0.08); color:#fff; }
  .search-panel .form-select option{ color:#111; }

  /* ================= SECTIONS ================= */
  .section{ padding:76px 0; }
  .section-head{ max-width:640px; margin-bottom:40px; }
  .section-head p{ color:var(--ink-soft); font-size:15.5px; line-height:1.6; }

  .cat-card{ position:relative; height:270px; border-radius:10px; overflow:hidden; display:flex; align-items:flex-end; padding:22px; color:#fff; }
  .cat-card .scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,28,38,0.05) 20%, rgba(20,28,38,0.88) 100%); }
  .cat-card .content{ position:relative; z-index:2; width:100%; }
  .cat-card h3{ font-size:22px; margin-bottom:6px; }
  .cat-card .count{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:rgba(255,255,255,0.75); display:flex; align-items:center; }

  .live-section{ background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .cam-card{ background:var(--ink); border-radius:8px; overflow:hidden; border:1px solid var(--line); height:100%; }
  .cam-thumb{ position:relative; height:190px; display:flex; align-items:flex-end; padding:14px; }
  .cam-thumb .live-badge{
    position:relative; z-index:3; display:flex; align-items:center; background:rgba(20,28,38,0.65);
    padding:5px 10px; border-radius:20px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:#fff;
  }
  .cam-thumb .osd{
    position:absolute; z-index:3; top:14px; right:14px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:rgba(255,255,255,0.85);
    text-align:right; line-height:1.5; background:rgba(20,28,38,0.45); padding:5px 9px; border-radius:4px;
  }
  .cam-body{ padding:14px 16px 16px; }
  .cam-cat{ font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--teal); background:var(--teal-soft); padding:3px 8px; border-radius:3px; display:inline-block; margin-bottom:8px; }
  .cam-title{ color:#fff; font-size:16.5px; font-weight:600; margin-bottom:4px; }
  .cam-loc{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:rgba(255,255,255,0.5); }

  .step-num{ width:46px; height:46px; border-radius:50%; border:1.5px solid var(--ink); display:flex; align-items:center; justify-content:center; font-family:'Syne',sans-serif; font-weight:700; font-size:18px; margin-bottom:18px; }
  .step h3{ font-size:18px; margin-bottom:8px; }
  .step p{ font-size:14px; color:var(--ink-soft); line-height:1.6; }

  .propose{ background:linear-gradient(135deg, var(--ink) 0%, #1E3A47 100%); border-radius:10px; padding:48px 44px; color:#fff; }
  .propose h3{ color:#fff; font-size:26px; margin:12px 0 10px; }
  .propose p{ color:rgba(255,255,255,0.68); font-size:15px; line-height:1.6; margin:0; }

  footer{ padding:56px 0 28px; }
  .foot-col h4{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
  .foot-col a, .foot-col div{ display:block; font-size:14px; margin-bottom:10px; color:var(--ink); }
  .foot-col a:hover{ color:var(--live); }
  .foot-contact div{ font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink-soft); }
  .foot-bottom .mono{ font-size:11.5px; color:var(--ink-soft); }
.sticky-top { position:fixed; width:100%;}
.hero video {position:absolute; display:block;
        width:100%;
        height:100%;
		position:absolute;
z-index:1;}
#map2 {height:90vh; border-radius:15px; }
.searchwebcam {padding:10px; margin:0 auto; text-align:center; left:0; right:0; border-radius:15px; width:80%; z-index:1000;bottom:40px; position:absolute;background: rgba(20, 28, 38, 1);
border: 1px solid rgba(255, 255, 255, 0.22);}
  @media (max-width:991.98px){ .hero{ min-height:auto; padding:48px 0; } 
#map2 {height:35vh; border-radius:0px;}
.searchwebcam { position:relative; bottom:0px; width:100%; border-radius:0; margin-top:0px; margin-bottom:0px;}
  }
  
  /* ================= BREADCRUMB / TITLE ================= */
.page-head{ background:var(--ink); padding:20px 0 26px; }
.breadcrumb-mono{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:rgba(255,255,255,0.5); margin-bottom:12px; }
.breadcrumb-mono a{ color:rgba(255,255,255,0.75); }
.breadcrumb-mono a:hover{ color:#fff; }
.page-head h1{ color:#fff; font-size:clamp(26px,3.4vw,38px); margin-bottom:8px; }
.cat-badge{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--teal); background:rgba(18,135,158,0.22); padding:4px 10px; border-radius:3px; display:inline-block; margin-right:10px;
}
.live-pill{
  font-family:'IBM Plex Mono',monospace; font-size:11px; color:rgba(255,255,255,0.8); display:inline-flex; align-items:center;
}

/* ================= BOUTON OUTLINE SUR FOND CLAIR ================= */
.btn-outline-ink{ border:1.5px solid var(--ink); color:var(--ink); background:transparent; }
.btn-outline-ink:hover{ background:var(--ink); color:#fff; }

/* ================= PHOTO / LECTEUR WEBCAM ================= */
.cam-player{
  position:relative; height:460px; border-radius:10px; overflow:hidden; border:1px solid var(--ink);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.10), transparent 45%),
    linear-gradient(135deg,#0E3446 0%, #12879E 55%, #3FAFA0 100%);
}
.cam-player .live-badge{
  position:absolute; z-index:4; top:16px; left:16px; display:flex; align-items:center; background:rgba(20,28,38,0.65);
  padding:6px 12px; border-radius:20px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:#fff;
}
.cam-player .osd{
  position:absolute; z-index:4; top:16px; right:16px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:rgba(255,255,255,0.9);
  text-align:right; line-height:1.6; background:rgba(20,28,38,0.5); padding:8px 12px; border-radius:5px;
}
.play-core{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:3;
}
.play-core .ring{
  width:74px; height:74px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.5); display:flex; align-items:center; justify-content:center;
  background:rgba(20,28,38,0.35); backdrop-filter:blur(3px);
}
.play-core .ring::before{
  content:""; width:0; height:0; border-top:11px solid transparent; border-bottom:11px solid transparent; border-left:18px solid #fff; margin-left:5px;
}
.cam-player .player-bar{
  position:absolute; z-index:4; left:16px; right:16px; bottom:14px; display:flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; color:rgba(255,255,255,0.85);
}
.player-track{ flex:1; height:3px; background:rgba(255,255,255,0.25); border-radius:2px; position:relative; }
.player-track::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:100%; background:var(--live); border-radius:2px; }

/* ================= CONDITIONS ACTUELLES ================= */
.quick-conditions{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:18px; }
.qc-card{ background:var(--ink); border-radius:8px; padding:14px 16px; color:#fff; }
.qc-card .k{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:4px; }
.qc-card .v{ font-family:'Syne',sans-serif; font-weight:700; font-size:22px; }
.qc-card .v small{ font-family:'IBM Plex Mono',monospace; font-weight:400; font-size:12px; color:rgba(255,255,255,0.55); }

/* ================= SIDEBAR (adresse, coordonnées, CTA) ================= */
.side-card{ background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:24px; }
.side-card h3{ font-size:19px; margin-bottom:14px; }
.side-addr{ font-size:14.5px; color:var(--ink-soft); line-height:1.5; margin-bottom:18px; }
.side-coords div{ font-family:'IBM Plex Mono',monospace; font-size:13.5px; color:var(--ink-soft); margin-bottom:6px; }
.side-coords .lbl{ color:var(--ink); font-weight:600; margin-right:6px; }
.side-updated{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-soft); display:flex; align-items:center; margin-top:16px;
}

/* ================= CARTE DU SPOT ================= */
.map-card{ border-radius:10px; overflow:hidden; border:1px solid var(--ink); }
#spot-map{ width:100%; height:320px; }

/* ================= TABLEAU DE PRÉVISIONS ================= */
.forecast-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
table.forecast{ border-collapse:separate; border-spacing:0; width:max-content; }
table.forecast th, table.forecast td{
  font-family:'IBM Plex Mono',monospace; font-size:12px; text-align:center; padding:10px 12px; white-space:nowrap; border-bottom:1px solid var(--line);
}
table.forecast thead th{ color:var(--ink-soft); font-weight:600; background:var(--panel); }
table.forecast .day-row th{
  text-align:left; font-family:'Syne',sans-serif; font-weight:700; font-size:13px; color:var(--ink); background:var(--teal-soft);
  border-bottom:1px solid var(--line);
}
table.forecast .row-label{
  position:sticky; left:0; z-index:2; background:var(--panel); text-align:left; font-weight:600; color:var(--ink); min-width:120px;
  border-right:1px solid var(--line);
}
table.forecast .day-row .row-label{ background:var(--teal-soft); }
table.forecast tbody td.hcell{ color:#fff; font-weight:500; }