:root{
  --bg:#ffffff;
  --surface:#f5f7fb;
  --card:#ffffff;
  --text:#1a2238;
  --muted:#6b7280;
  --accent:#187ac7;   /* teal légèrement assombri */
  --accent2:#004ea2; /* bleu plus contrasté */
  --danger:#dc2626;
  --ok:#16a34a;
  --shadow: 0 10px 25px rgba(0,0,0,.08);
  --radius: 14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color:var(--text);
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1100px; margin:0 auto; padding:18px}
.site-header{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.9);
  border-bottom:1px solid #e5e7eb;
}
.header-row{display:flex; gap:14px; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:10px; color:var(--text)}
.brand-logo{width:42px; height:42px}
.brand-title{font-weight:800; letter-spacing:.2px}
.brand-subtitle{font-size:.86rem; color:var(--muted)}

.nav{display:flex; gap:12px; align-items:center}
.nav a{
  padding:10px 10px; border-radius:10px; color:var(--muted);
}
.nav a.active, .nav a:hover{
  color:var(--text);
  background: #eef2f7;
  text-decoration:none;
}

.nav-toggle{
  display:none;
  background:transparent; border:1px solid rgba(255,255,255,.18);
  color:var(--text); border-radius:12px;
  padding:10px 12px; cursor:pointer;
}

.site-main{padding:18px 0}
.card{
  background: var(--card);
  border:1px solid #e5e7eb;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}
.card:hover{
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}
.section{padding:18px; margin:18px 0}
.section-head{display:flex; align-items:center; justify-content:space-between; gap:14px}
.h3{font-size:1.15rem; margin:.2rem 0}

.hero{display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:stretch}
.hero h1{margin:.2rem 0 .6rem 0; font-size:2rem}
.lead{color:var(--muted); line-height:1.35}
.muted{color:var(--muted)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 14px; border-radius:12px; border:1px solid #d1d5db;
  background: #ffffff; color:var(--text);
  cursor:pointer; text-decoration:none;
}
.btn:hover{
    background: linear-gradient(90deg, #fd8f05, #e4531e);
    text-decoration:none
}
.btn-primary{
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  color:#ffffff;
  border:0;
  font-weight:800;
}
.btn-ghost{background:transparent}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px}

.price-card{
  background: #ffffff;
  border:1px solid #e5e7eb;
  border-radius: 14px;
  padding:14px;
}
.price-title{font-weight:800}
.price-amount{font-size:1.3rem; margin:.35rem 0 .6rem 0}
.price-card ul{margin:0; padding-left:18px; color:var(--muted)}

.featured{display:grid; grid-template-columns: 1.1fr .9fr; gap:18px}
.video-wrap{position:relative; padding-top:56.25%; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.10)}
.video-wrap iframe{position:absolute; inset:0; width:100%; height:100%}
.video-placeholder{
  height: 260px; display:grid; place-items:center;
  border-radius:14px; border:1px dashed rgba(255,255,255,.22);
  color:var(--muted);
}

.carousel{display:flex; gap:14px; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:8px}
.carousel-item{scroll-snap-align:start; min-width:220px}
.sponsor-card{
  padding:14px; border-radius:14px;
  background: #ffffff;
  border:1px solid #e5e7eb;
  display:flex; flex-direction:column; gap:10px; align-items:center;
}
.sponsor-logo{width:140px; height:80px; object-fit:contain}
.sponsor-name{font-weight:800; text-align:center}
.carousel-controls{display:flex; gap:8px}

.form{display:flex; flex-direction:column; gap:14px}
.field label{display:block; margin-bottom:6px; color:var(--muted)}
input, textarea, select{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid #d1d5db;
  background: #ffffff;
  color:var(--text);
}
.field-error{margin-top:6px; color: var(--danger); font-size:.95rem}
.checkbox label{display:flex; gap:10px; align-items:center}
.form-actions{margin-top:10px}

.alert{
  padding:12px 14px;
  border-radius:14px;
  margin:12px 0;
  background: #f9fafb;
  border:1px solid #e5e7eb;
}
.alert.error{border-color: rgba(255,90,106,.45)}
.alert.success{border-color: rgba(69,224,139,.45)}

.tools{display:flex; gap:10px; align-items:center}
.input{max-width:320px}
.select{max-width:260px}

.grid-cards{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px}
.company-card{
  text-align:left;
  padding:14px;
  border-radius:14px;
  background: #ffffff;
  border:1px solid #e5e7eb;
  cursor:pointer;
}
.company-card:hover{background: #f9fafb;}
.company-logo{width:100%; height:80px; object-fit:contain; margin-bottom:8px}
.company-name{font-weight:800}
.company-link{margin-top:6px; font-size:.95rem; color:var(--accent)}

.modal[hidden]{display:none}
.modal{position:fixed; inset:0; z-index:50}
.modal-backdrop{position:absolute; inset:0; background: rgba(0,0,0,.3);}
.modal-card{
  position:relative;
  max-width:920px;
  margin: 6vh auto;
  background: #ffffff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow: var(--shadow);
  padding:18px;
}
.modal-close{
  position:absolute; top:10px; right:10px;
  border-radius:12px; padding:8px 10px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:var(--text);
  cursor:pointer;
}
.modal-head{display:flex; gap:14px; align-items:center}
.company-logo-lg{width:120px; height:70px; object-fit:contain}
.no-scroll{overflow:hidden}

.sponsor-wide{
  display:grid;
  grid-template-columns: 160px 1fr auto;
  gap:14px;
  padding:14px;
  border-radius:14px;
  background: #ffffff;
  border:1px solid #e5e7eb;
  align-items:start;
}
.sponsor-logo-lg{width:160px; height:90px; object-fit:contain}
.badge{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  color:var(--muted);
  height:fit-content;
}

.site-footer{
  border-top:1px solid #e5e7eb;
  padding:18px 0;
  color:var(--muted);
}
.footer-row{display:flex; justify-content:space-between; gap:18px}
.footer-small{max-width:520px; text-align:right}

/* Responsive */
@media (max-width: 980px){
  .grid-cards{grid-template-columns: repeat(3, 1fr);}
  .hero{grid-template-columns:1fr}
  .featured{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .grid-cards{grid-template-columns: repeat(2, 1fr);}
  .grid-2, .grid-3{grid-template-columns:1fr}
  .nav-toggle{display:inline-flex}
  .nav{
    display:none;
    position:absolute;
    right:18px; top:66px;
    flex-direction:column;
    background: rgba(11,18,32,.95);
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    padding:10px;
    min-width: 260px;
  }
  .nav.open{display:flex}
  .footer-row{flex-direction:column}
  .footer-small{text-align:left}
  .sponsor-wide{grid-template-columns:1fr}
}