:root{--blue:#0b4f8a;--blue-dark:#062f55;--orange:#f6a31a;--bg:#f4f7fb;--text:#102033;--muted:#6c7a89;--card:#fff;--radius:22px;--shadow:0 18px 50px rgba(7,35,66,.16)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}a{text-decoration:none;color:inherit}.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,4vw,56px);color:white;background:linear-gradient(to bottom,rgba(0,0,0,.45),rgba(0,0,0,0));transition:.25s}.site-header.scrolled,.site-header.solid{background:rgba(6,47,85,.96);box-shadow:0 10px 30px rgba(0,0,0,.18);backdrop-filter:blur(10px)}.brand{display:flex;align-items:center;gap:12px;font-weight:800}.brand-mark{width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:24px}.brand small{display:block;font-weight:500;opacity:.78;font-size:.78rem}.main-nav{display:flex;gap:22px;align-items:center;font-weight:650}.main-nav a.active,.main-nav a:hover{color:var(--orange)}.menu-toggle{display:none;border:0;background:rgba(255,255,255,.18);color:white;border-radius:12px;padding:10px 12px;font-size:22px}.hero{position:relative;min-height:100vh;display:grid;place-items:center;overflow:hidden;color:white}.hero-image{position:absolute;inset:0;background-image:url("../img/hero/ete.jpg");background-size:cover;background-position:center;transform:scale(1.04)}.hero-overlay{position:absolute;inset:0;background:linear-gradient(120deg,rgba(2,20,39,.74),rgba(2,20,39,.22),rgba(2,20,39,.76))}.hero-content{position:relative;z-index:1;width:min(1120px,92vw);padding-top:80px}.eyebrow{text-transform:uppercase;letter-spacing:.16em;color:var(--orange);font-weight:800;font-size:.78rem}.hero h1{font-size:clamp(2.8rem,7vw,6.4rem);line-height:.95;margin:10px 0 18px;max-width:900px}.hero-subtitle{font-size:clamp(1.05rem,2vw,1.35rem);max-width:700px;opacity:.92}.current-card{margin-top:34px;width:min(640px,100%);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);box-shadow:var(--shadow);border-radius:var(--radius);padding:24px;backdrop-filter:blur(12px)}.current-card .label{font-size:.78rem;opacity:.74}.current-card h2{margin:.1rem 0 0;font-size:1.4rem}.current-temp{font-size:4rem;font-weight:900;line-height:1;margin:10px 0}.current-temp sup{font-size:1.5rem}.current-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}.current-grid span{background:rgba(255,255,255,.12);padding:10px;border-radius:14px}.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}.btn{border:0;border-radius:999px;padding:13px 20px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:8px}.btn.primary{background:var(--orange);color:#1b2630}.btn.ghost{background:rgba(255,255,255,.14);color:white;border:1px solid rgba(255,255,255,.28)}.simple-page{padding:120px clamp(20px,6vw,80px)}.quick-links{width:min(1120px,92vw);margin:-70px auto 70px;position:relative;z-index:5;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.quick-card{background:var(--card);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);transition:.25s}.quick-card:hover{transform:translateY(-6px)}.quick-card span{font-size:2.4rem}.quick-card strong{display:block;font-size:1.25rem;margin:10px 0 4px}.quick-card small{color:var(--muted)}.section-title,.content-grid{width:min(1120px,92vw);margin:0 auto}.section-title h2{font-size:clamp(2rem,4vw,3.2rem);margin:0 0 22px}.map-layout{width:min(1200px,94vw);margin:0 auto 70px;display:grid;grid-template-columns:300px 1fr;background:white;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);min-height:620px}.map-panel{padding:24px;background:#fff;border-right:1px solid #e7edf4}.map-panel label{display:block;margin:14px 0;color:#1f334a}.map-panel hr{border:0;border-top:1px solid #e7edf4;margin:24px 0}.info-panel{background:#f0f5fa;border-radius:16px;padding:16px;color:#284057}.home-map{min-height:620px}.content-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;margin-bottom:70px}.panel-card{background:white;border-radius:var(--radius);box-shadow:var(--shadow);padding:26px}.webcam-preview{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.webcam-card{position:relative;overflow:hidden;border-radius:18px;background:#dfe7ef;min-height:180px}.webcam-card img{width:100%;height:180px;object-fit:cover;display:block}.webcam-card span{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.62);color:white;border-radius:999px;padding:6px 10px;font-size:.85rem}.metar-item{border-bottom:1px solid #e7edf4;padding:12px 0}.muted{color:var(--muted)}.site-footer{background:var(--blue-dark);color:white;text-align:center;padding:34px}.marker-temp{background:white;border:2px solid var(--blue);border-radius:999px;padding:5px 9px;font-weight:900;color:var(--blue-dark);box-shadow:0 7px 18px rgba(0,0,0,.24)}.marker-webcam{background:#111;color:white;border-radius:999px;padding:6px 9px;font-weight:900}.marker-metar{background:#e9f4ff;border:2px solid #3182ce;border-radius:999px;padding:6px 9px;font-weight:900;color:#0b4f8a}@media(max-width:850px){.menu-toggle{display:block}.main-nav{position:absolute;top:76px;left:16px;right:16px;display:none;flex-direction:column;align-items:stretch;background:rgba(6,47,85,.98);padding:18px;border-radius:18px}.main-nav.open{display:flex}.quick-links{grid-template-columns:1fr 1fr;margin-top:-40px}.current-grid{grid-template-columns:1fr 1fr}.map-layout{grid-template-columns:1fr}.map-panel{border-right:0;border-bottom:1px solid #e7edf4}.content-grid{grid-template-columns:1fr}}@media(max-width:520px){.quick-links{grid-template-columns:1fr}.current-temp{font-size:3.1rem}.webcam-preview{grid-template-columns:1fr}}
.current-details{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 14px}.current-details span{background:rgba(255,255,255,.08);padding:9px 10px;border-radius:12px;font-size:.9rem}.live-line{display:flex;align-items:center;gap:8px}.live-dot{width:10px;height:10px;border-radius:50%;background:#a0aec0;box-shadow:0 0 0 4px rgba(160,174,192,.18)}.live-dot.online{background:#48bb78;box-shadow:0 0 0 4px rgba(72,187,120,.2)}.live-dot.stale{background:#f6a31a;box-shadow:0 0 0 4px rgba(246,163,26,.2)}.station-live-popup{min-width:220px}.station-live-popup h3{margin:0 0 8px;color:var(--blue-dark)}.station-live-popup .popup-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.station-live-popup .popup-grid span{background:#f0f5fa;padding:7px;border-radius:9px}@media(max-width:850px){.current-details{grid-template-columns:1fr 1fr}}@media(max-width:520px){.current-details{grid-template-columns:1fr}}

.vigilance-section{width:min(1120px,92vw);margin:0 auto 70px}
.vigilance-card{background:white;border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;border-left:12px solid #a0aec0}
.vigilance-card[data-level="green"]{border-left-color:#38a169}
.vigilance-card[data-level="yellow"]{border-left-color:#ecc94b}
.vigilance-card[data-level="orange"]{border-left-color:#ed8936}
.vigilance-card[data-level="red"]{border-left-color:#e53e3e}
.vigilance-main{display:flex;align-items:center;gap:16px}
.vigilance-dot{width:24px;height:24px;border-radius:50%;background:#a0aec0;box-shadow:0 0 0 8px rgba(160,174,192,.15)}
.vigilance-card[data-level="green"] .vigilance-dot{background:#38a169;box-shadow:0 0 0 8px rgba(56,161,105,.14)}
.vigilance-card[data-level="yellow"] .vigilance-dot{background:#ecc94b;box-shadow:0 0 0 8px rgba(236,201,75,.15)}
.vigilance-card[data-level="orange"] .vigilance-dot{background:#ed8936;box-shadow:0 0 0 8px rgba(237,137,54,.15)}
.vigilance-card[data-level="red"] .vigilance-dot{background:#e53e3e;box-shadow:0 0 0 8px rgba(229,62,62,.15)}
.vigilance-label{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.vigilance-main h3{margin:.1rem 0;font-size:2rem}
.vigilance-details{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0}
.vigilance-details>div{background:#f0f5fa;border-radius:14px;padding:14px}
.vigilance-details span{display:block;color:var(--muted);font-size:.82rem;margin-bottom:4px}
.vigilance-message{padding:16px;border-radius:14px;background:#f8fafc;color:#2d3748}
@media(max-width:700px){.vigilance-details{grid-template-columns:1fr}}

.marker-mf{
  background:#eaf4ff;
  border:2px solid #2b6cb0;
  border-radius:999px;
  padding:6px 10px;
  font-weight:900;
  color:#0b3d68;
  box-shadow:0 7px 18px rgba(0,0,0,.24);
}
.mf-popup{min-width:230px}
.mf-popup h3{margin:0 0 2px;color:#0b3d68}
.mf-sector{margin:0 0 10px;color:#6c7a89}
.mf-popup-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0}
.mf-popup-grid span{background:#f0f5fa;padding:7px;border-radius:9px}

:root{--blue:#1769aa;--dark:#083653;--surface:#fff;--muted:#667;--radius:20px;--shadow:0 12px 34px rgba(8,54,83,.12)}body{background:#eef3f7}.site-header{position:sticky;top:0;z-index:1100;background:rgba(8,54,83,.96)}.official-logo{height:58px;max-width:210px}

.hero-s7{
  padding:110px max(5vw,24px) 50px;
  color:#fff;
  background:
  linear-gradient(
    90deg,
    rgba(8,54,83,.60) 0%,
    rgba(8,54,83,.40) 45%,
    rgba(8,54,83,.20) 100%
),
  url("../img/fond.jpg") center center / cover no-repeat;
}}

.hero-s7 h1{font-size:clamp(3rem,8vw,6rem);margin:.1em 0}
.section,.standard-page{width:min(1180px,calc(100% - 32px));margin:40px auto}.standard-page{padding-top:10px}.narrow{max-width:820px}.eyebrow{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:#5b8aa5}.priority-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.priority-card,.content-card,.bulletin-box,.map-sidebar,.home-map{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow)}.priority-card,.content-card,.map-sidebar{padding:24px}.vigilance-panel,.external-thumb{min-height:120px;padding:18px;border-radius:15px;background:#f4f7fa;margin:16px 0}.external-thumb{display:grid;place-content:center;text-align:center;background:linear-gradient(135deg,#253c4e,#5d7382);color:#fff}.button{display:inline-flex;justify-content:center;padding:11px 18px;border:0;border-radius:999px;background:var(--blue);color:#fff;text-decoration:none;font-weight:800}.button.danger{background:#c62828}.button.secondary{background:#e8f0f5;color:#083653}.adsense-slot{min-height:110px;display:grid;place-items:center;border:1px dashed #9aa;background:#fafcfd;border-radius:18px}.section-row{display:flex;justify-content:space-between;align-items:end;gap:20px}.map-layout{display:grid;grid-template-columns:1fr 290px;gap:22px}.home-map{min-height:620px}.map-sidebar{display:grid;gap:12px;align-self:start}.info-panel{padding:12px;background:#f2f6f8;border-radius:12px}.bulletin-box{padding:34px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#0b416c,#1769aa);color:#fff}.conditions-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.conditions-grid article,.webcam-card{background:#fff;border-radius:16px;box-shadow:0 8px 20px rgba(8,54,83,.08)}.conditions-grid article{padding:18px;display:grid;gap:10px}.conditions-grid strong{font-size:1.6rem}.webcam-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.webcam-card{overflow:hidden}.webcam-card img{width:100%;aspect-ratio:16/10;object-fit:cover}.webcam-card div{padding:14px}.contact-form{display:grid;gap:16px}.contact-form label{display:grid;gap:6px}.contact-form input,.contact-form textarea{padding:12px;border:1px solid #bbb;border-radius:10px}.honeypot{position:absolute;left:-9999px}.privacy{grid-template-columns:auto 1fr!important}.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}.chips a{padding:8px 13px;background:#e8f0f5;border-radius:999px;text-decoration:none}.site-footer{padding:30px;background:#082f49;color:#fff;text-align:center}@media(max-width:900px){.priority-grid,.map-layout{grid-template-columns:1fr}.conditions-grid{grid-template-columns:repeat(2,1fr)}.webcam-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.section-row,.bulletin-box{align-items:flex-start;flex-direction:column}.conditions-grid,.webcam-grid{grid-template-columns:1fr}.home-map{min-height:500px}.button{width:100%}.official-logo{height:48px}}

/* ==========================================================
   SPRINT 7.1 — CORRECTIF MISE EN PAGE
   Panneau à gauche, grande carte à droite
   ========================================================== */

.section,
.standard-page {
  width: min(1450px, calc(100% - 30px));
}

.map-layout {
  display: grid !important;
  grid-template-columns: 310px minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.map-sidebar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  min-width: 0 !important;
}

.map-wrapper {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  padding: 10px !important;
  background: #fff !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 40px rgba(18,46,68,.12) !important;
}

.home-map {
  width: 100% !important;
  height: 760px !important;
  min-height: 760px !important;
  border-radius: 16px !important;
}

.priority-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
}

.priority-card {
  display: block !important;
  background: #fff !important;
  border-radius: 22px !important;
  padding: 24px !important;
  box-shadow: 0 14px 40px rgba(18,46,68,.12) !important;
}

.adsense-slot {
  min-height: 110px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px dashed #9aa !important;
  border-radius: 18px !important;
  background: #fafcfd !important;
}

@media (max-width: 900px) {
  .map-layout {
    grid-template-columns: 1fr !important;
  }

  .map-sidebar {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .map-wrapper {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .home-map {
    height: 540px !important;
    min-height: 540px !important;
  }

  .priority-grid {
    grid-template-columns: 1fr !important;
  }
}


/* SPRINT 7.2 — LOGO LOCAL ET WEBCAMS EXTERNES */

.official-brand{
  min-width:180px;
}

.official-logo{
  display:block;
  width:auto;
  height:64px;
  max-width:230px;
  object-fit:contain;
}

.webcam-external-placeholder{
  display:grid;
  place-content:center;
  gap:8px;
  width:100%;
  min-height:230px;
  padding:20px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 30%),
    linear-gradient(135deg,#173e5b,#3f708f);
  color:#fff;
  text-align:center;
}

.webcam-external-placeholder span{
  font-size:2.4rem;
}

.webcam-external-placeholder small{
  color:#d8e8f2;
}

.webcam-warning{
  padding:8px 10px;
  border-radius:10px;
  background:#fff4d6;
  color:#735300 !important;
  font-size:.8rem !important;
}

.marker-webcam.external{
  background:#315f7c;
  border-color:#fff;
}

.webcam-map-popup .webcam-external-placeholder{
  min-height:150px;
  margin-top:8px;
  border-radius:10px;
}

.webcam-popup-media,
.webcam-info-media{
  display:block;
  width:100%;
  max-height:250px;
  margin-top:8px;
  object-fit:contain;
  border-radius:10px;
  background:#111;
}

.webcam-card .webcam-external-placeholder{
  min-height:260px;
}

@media (max-width:700px){
  .official-logo{
    height:50px;
    max-width:170px;
  }
}


/* SPRINT 7.3 — CORRECTIF CARTE SMARTPHONE */

@media (max-width: 900px) {
  .map-section {
    width: min(100% - 16px, 1450px);
  }

  .map-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .map-sidebar {
    order: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 14px !important;
  }

  .map-sidebar h3,
  .map-sidebar .info-panel,
  .map-sidebar .button {
    grid-column: 1 / -1 !important;
  }

  .map-sidebar label {
    min-width: 0 !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    background: var(--surface-soft) !important;
    font-size: .9rem !important;
  }

  .map-wrapper {
    order: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 6px !important;
  }

  .home-map {
    width: 100% !important;
    height: 520px !important;
    min-height: 520px !important;
    max-height: none !important;
    display: block !important;
  }
}

@media (max-width: 600px) {
  .map-sidebar {
    grid-template-columns: 1fr !important;
  }

  .map-sidebar h3,
  .map-sidebar .info-panel,
  .map-sidebar .button {
    grid-column: auto !important;
  }

  .home-map {
    height: 460px !important;
    min-height: 460px !important;
  }

  .section-heading-row .button {
    width: 100% !important;
  }
}


/* SPRINT 7.4 — RÉSEAUX SOCIAUX */

.social-home-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:32px;
  padding:clamp(24px,4vw,42px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:
    radial-gradient(circle at 90% 10%,rgba(255,255,255,.18),transparent 26%),
    linear-gradient(135deg,#0a416d,#1769aa);
  color:#fff;
  box-shadow:var(--shadow);
}

.social-home-card .eyebrow{
  color:#bde3ff;
}

.social-home-card h2{
  margin:.15em 0;
  font-size:clamp(2rem,4vw,3.2rem);
}

.social-home-card p{
  max-width:680px;
}

.social-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}

.social-links-home{
  justify-content:flex-end;
}

.social-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:46px;
  padding:10px 17px;
  border:1px solid rgba(255,255,255,.32);
  border-radius:999px;
  background:rgba(255,255,255,.11);
  color:#fff;
  font-weight:850;
  text-decoration:none;
  transition:
    transform .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.social-button:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.2);
  box-shadow:0 10px 22px rgba(0,0,0,.15);
}

.social-icon{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#fff;
}

.social-icon svg{
  width:17px;
  height:17px;
  fill:var(--blue-dark);
  stroke:var(--blue-dark);
  stroke-width:1.8;
}

.social-icon svg .play{
  fill:#fff;
  stroke:none;
}

.social-youtube .social-icon{
  background:#e62117;
}

.social-youtube .social-icon svg{
  fill:#fff;
  stroke:#fff;
}

.social-instagram .social-icon{
  background:
    radial-gradient(circle at 30% 100%,#ffd600 0 20%,#ff7a00 38%,#ff0169 58%,#d300c5 74%,#7638fa 100%);
}

.social-instagram .social-icon svg{
  fill:none;
  stroke:#fff;
}

.social-facebook .social-icon{
  background:#1877f2;
}

.social-facebook .social-icon svg{
  fill:#fff;
  stroke:none;
}

.social-button-disabled{
  opacity:.62;
  cursor:not-allowed;
}

.social-config-status{
  margin:12px 0 0;
  color:#e8f5ff;
  font-size:.83rem;
  text-align:center;
}

.social-footer-block{
  display:grid;
  gap:14px;
  margin-bottom:24px;
}

.social-footer-block h2{
  margin:0;
  font-size:1rem;
  color:#fff;
}

.site-footer .social-button{
  background:rgba(255,255,255,.08);
}

@media (max-width:800px){
  .social-home-card{
    grid-template-columns:1fr;
  }

  .social-links-home{
    justify-content:flex-start;
  }
}

@media (max-width:600px){
  .social-links,
  .social-links-home{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }

  .social-button{
    width:100%;
  }
}


/* SPRINT 7.5 — LOGOS SOCIAUX OFFICIELS DANS L’EN-TÊTE */
.header-social{
  display:flex;
  align-items:center;
  gap:9px;
  margin-right:auto;
  margin-left:16px;
}
.header-social-link{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  box-shadow:0 4px 13px rgba(0,0,0,.2);
  transition:transform .2s ease, box-shadow .2s ease;
}
.header-social-link:hover,
.header-social-link:focus-visible{
  transform:translateY(-2px) scale(1.06);
  box-shadow:0 7px 18px rgba(0,0,0,.26);
}
.header-social-link svg{width:21px;height:21px;display:block}
.header-social-link.facebook{background:#1877f2}
.header-social-link.facebook svg{fill:#fff}
.header-social-link.instagram{background:radial-gradient(circle at 30% 105%,#ffd600 0 18%,#ff7a00 36%,#ff0169 58%,#d300c5 76%,#7638fa 100%)}
.header-social-link.instagram svg{fill:none;stroke:#fff;stroke-width:1.9}
.header-social-link.youtube{background:#ff0000}
.header-social-link.youtube svg{fill:#fff}
.header-social-link.youtube .play{fill:#ff0000}
.priority-grid-single{grid-template-columns:minmax(0,1fr)}
.priority-grid-single .priority-card{max-width:none}
@media(max-width:1000px){
  .header-social{margin-left:10px;gap:6px}
  .header-social-link{width:34px;height:34px}
  .header-social-link svg{width:19px;height:19px}
}
@media(max-width:650px){
  .site-header{padding-left:12px;padding-right:12px}
  .official-logo{max-width:145px;height:auto}
  .header-social{margin-left:7px;gap:5px}
  .header-social-link{width:31px;height:31px}
  .header-social-link svg{width:17px;height:17px}
}
@media(max-width:430px){
  .official-logo{max-width:118px}
  .header-social-link{width:29px;height:29px}
  .header-social-link svg{width:16px;height:16px}
}

/* =====================================================
   VIGILANCE METEO-FRANCE
===================================================== */

.vigilance-wrapper {
  width: 100%;
}

.vigilance-card {
  --vigilance-color: #94a3b8;
  --vigilance-soft: rgba(148, 163, 184, 0.15);

  position: relative;
  display: grid;
  grid-template-columns: auto 1px minmax(220px, 1fr) auto;
  align-items: center;
  gap: 28px;

  min-height: 138px;
  padding: 24px 28px;

  background: #ffffff;
  border: 2px solid var(--vigilance-color);
  border-left-width: 10px;
  border-radius: 24px;

  box-shadow:
    0 14px 35px rgba(15, 23, 42, 0.08),
    0 3px 10px rgba(15, 23, 42, 0.04);

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

/* Couleurs selon le niveau */

.vigilance-card[data-level="green"] {
  --vigilance-color: #38a169;
  --vigilance-soft: rgba(56, 161, 105, 0.14);
}

.vigilance-card[data-level="yellow"] {
  --vigilance-color: #f2c94c;
  --vigilance-soft: rgba(242, 201, 76, 0.18);
}

.vigilance-card[data-level="orange"] {
  --vigilance-color: #f2994a;
  --vigilance-soft: rgba(242, 153, 74, 0.18);
}

.vigilance-card[data-level="red"] {
  --vigilance-color: #eb5757;
  --vigilance-soft: rgba(235, 87, 87, 0.18);
}

.vigilance-card[data-level="unknown"] {
  --vigilance-color: #94a3b8;
  --vigilance-soft: rgba(148, 163, 184, 0.15);
}

/* Partie niveau */

.vigilance-status {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 235px;
}

.vigilance-dot {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;

  border-radius: 50%;
  background: var(--vigilance-color);

  box-shadow:
    0 0 0 10px var(--vigilance-soft),
    inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

.vigilance-label {
  display: block;
  margin-bottom: 6px;

  color: #64748b;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#vigilanceLevel {
  margin: 0;

  color: #0f172a;
  font-size: clamp(1.8rem, 3vw, 2.65rem);
  font-weight: 800;
  line-height: 1;
}

/* Séparation verticale */

.vigilance-separator {
  width: 1px;
  height: 76px;
  background: #e2e8f0;
}

/* Phénomènes */

.vigilance-phenomena-block {
  min-width: 0;
}

.vigilance-phenomena {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.vigilance-phenomenon {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 9px 13px;

  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;

  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
}

.vigilance-phenomenon-icon {
  font-size: 1.15rem;
  line-height: 1;
}

/* Bouton */

.vigilance-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;

  min-height: 54px;
  padding: 0 20px;

  color: #1746b8;
  background: #f8fbff;
  border: 1px solid #b9cdfb;
  border-radius: 15px;

  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;

  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.vigilance-link:hover {
  transform: translateY(-2px);
  background: #eef5ff;
  border-color: #8fb0f5;
  box-shadow: 0 8px 18px rgba(23, 70, 184, 0.12);
}

.vigilance-link-icon {
  font-size: 1.2rem;
}

.vigilance-link-arrow {
  font-size: 1.5rem;
  line-height: 1;
}

/* Source sous le cadre */

.vigilance-source {
  display: flex;
  align-items: center;
  gap: 9px;

  margin-top: 12px;
  padding-left: 18px;

  color: #64748b;
  font-size: 0.88rem;
}

.vigilance-source-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 22px;
  height: 22px;

  border: 2px solid #94a3b8;
  border-radius: 7px;

  font-size: 0.72rem;
  font-weight: 800;
}

/* Animation discrète en orange et rouge */

.vigilance-card[data-level="orange"] .vigilance-dot,
.vigilance-card[data-level="red"] .vigilance-dot {
  animation: vigilancePulse 3s ease-in-out infinite;
}

@keyframes vigilancePulse {
  0%,
  100% {
    box-shadow:
      0 0 0 10px var(--vigilance-soft),
      inset 0 1px 1px rgba(255, 255, 255, 0.4);
  }

  50% {
    box-shadow:
      0 0 0 17px transparent,
      inset 0 1px 1px rgba(255, 255, 255, 0.4);
  }
}

/* Tablette */

@media (max-width: 950px) {
  .vigilance-card {
    grid-template-columns: auto 1px 1fr;
  }

  .vigilance-link {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* Smartphone */

@media (max-width: 640px) {
  .vigilance-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;

    min-height: 0;
    padding: 22px 20px;

    border-radius: 20px;
  }

  .vigilance-status {
    min-width: 0;
  }

  .vigilance-dot {
    width: 46px;
    height: 46px;
    flex-basis: 46px;

    box-shadow:
      0 0 0 8px var(--vigilance-soft),
      inset 0 1px 1px rgba(255, 255, 255, 0.4);
  }

  .vigilance-separator {
    width: 100%;
    height: 1px;
  }

  .vigilance-link {
    width: 100%;
    min-height: 50px;
  }

  .vigilance-source {
    padding-left: 8px;
  }
}