*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;color:#e6f2ff;background:#0b1423}
.container{width:min(1160px,92vw);margin:0 auto;padding:18px}

.site-header{position:sticky;top:0;z-index:100;background:rgba(8,14,22,.92);backdrop-filter:blur(8px);border-bottom:1px solid rgba(120,200,255,.18)}
.site-header .container{display:flex;align-items:center;gap:16px}
.site-header nav{margin-left:auto;display:flex;gap:18px}
.site-header nav a{color:#cfeaff;text-decoration:none;opacity:.9}
.header-cta{margin-left:12px;padding:10px 14px;border-radius:10px;background:linear-gradient(180deg,#12b0ff,#0980cb);color:#fff;text-decoration:none}

header .brand{
    height:90px;
    width:auto;
    filter:drop-shadow(0 0 12px rgba(0,170,255,.55));
}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 30%, rgba(0,140,255,.08), transparent 60%),url("../assets/h2o_logo_international.png") center 15% / 45vw auto no-repeat;opacity:.18;pointer-events:none}

.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center;margin:24px auto 6px}
.hero-title{color:#0fb4ff;font-size:42px;line-height:1.05;margin:0 0 10px}
.badge.card{display:inline-block;padding:10px 12px;margin:10px 0 16px;border-radius:12px}
.hero-ctas{display:flex;gap:12px}
.btn-primary,.btn-secondary{padding:10px 14px;border-radius:10px;border:0;cursor:pointer;text-decoration:none}
.btn-primary{background:linear-gradient(180deg,#12b0ff,#0980cb);color:#fff}
.btn-secondary{background:rgba(14,22,34,.85);color:#cfeaff;border:1px solid rgba(120,200,255,.25)}
.hero-photo img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 0 35px rgba(0,180,255,.35)}

.card,.spec-item,.video-card{background:linear-gradient(180deg, rgba(15,30,48,.65), rgba(8,14,22,.8));border:1px solid rgba(130,200,255,.22);border-radius:16px;box-shadow:0 0 0 1px rgba(120,180,255,.12) inset,0 12px 30px rgba(0,0,0,.35),0 0 28px rgba(0,170,255,.12)}

.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px auto}
.spec-item{padding:16px;display:flex;flex-direction:column;gap:8px}
.spec-item b{color:#bfe6ff}

.config-wrap{margin:36px 0 24px}
.config-grid{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:center}
.config-orbit{--R:240px;position:relative;width:600px;height:600px;margin:auto;border-radius:30px;background:radial-gradient(circle at 50% 40%, rgba(0,140,255,.12), rgba(10,18,28,.65));box-shadow: inset 0 0 40px rgba(0,160,255,.2), 0 10px 30px rgba(0,0,0,.35)}
.config-orbit .case-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:260px;height:auto;border-radius:14px;box-shadow:0 0 35px rgba(0,180,255,.30)}
.orb{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120px;height:120px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background: radial-gradient(circle, rgba(0,150,255,.18) 0%, rgba(12,22,38,.78) 65%);border:1px solid rgba(120,200,255,.25);backdrop-filter: blur(6px);box-shadow:0 0 18px rgba(0,170,255,.25);color:#dff3ff;text-shadow:0 1px 2px rgba(0,0,0,.35);cursor:pointer;user-select:none}

.config-orbit .orbit-ring{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  transform:translate(-50%,-50%);
  transform-origin:50% 50%;
  animation:orbitSpin 48s linear infinite;
}

@keyframes orbitSpin{
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to{   transform:translate(-50%,-50%) rotate(360deg); }
}
.orb span{font-size:.82rem;line-height:1.1;text-align:center}
.orb.active{background: radial-gradient(circle, rgba(24,180,255,.28), rgba(14,26,44,.9) 60%);box-shadow:0 0 28px rgba(24,180,255,.45), 0 0 0 1px rgba(130,220,255,.35) inset}
.orb-cta{width:140px;height:140px;font-weight:700;letter-spacing:.2px}

.deg-30{transform: translate(-50%,-50%) rotate(30deg) translate(var(--R)) rotate(-30deg)}
.deg-140{transform: translate(-50%,-50%) rotate(140deg) translate(var(--R)) rotate(-140deg)}
.deg-180{transform: translate(-50%,-50%) rotate(180deg) translate(var(--R)) rotate(-180deg)}
.deg-210{transform: translate(-50%,-50%) rotate(210deg) translate(var(--R)) rotate(-210deg)}
.deg-220{transform: translate(-50%,-50%) rotate(220deg) translate(var(--R)) rotate(-220deg)}
.deg-260{transform: translate(-50%,-50%) rotate(260deg) translate(var(--R)) rotate(-260deg)}
.deg-300{transform: translate(-50%,-50%) rotate(300deg) translate(var(--R)) rotate(-300deg)}
.deg-330{transform: translate(-50%,-50%) rotate(330deg) translate(var(--R)) rotate(-330deg)}
.config-panel{padding:18px;border-radius:18px;background:linear-gradient(180deg, rgba(15,30,48,.65), rgba(8,14,22,.82));border:1px solid rgba(120,200,255,.2);box-shadow:0 10px 28px rgba(0,0,0,.35)}
.pill-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.pill-group{display:flex;gap:8px}
.pill{padding:8px 12px;border-radius:999px;border:1px solid rgba(120,200,255,.25);background:rgba(10,16,26,.6);color:#cfeaff}
.pill.active{background:linear-gradient(180deg,#12b0ff,#0980cb);color:#fff;border-color:transparent}
.qty input{width:68px;padding:6px 8px;border-radius:8px;border:1px solid rgba(120,200,255,.25);background:rgba(10,16,26,.6);color:#e9f6ff}
.total{font-size:1.25rem;font-weight:700;margin:10px 0 14px}
.cta-row{display:flex;gap:12px}

.gallery .gallery-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.imgph{height:140px;display:flex;align-items:center;justify-content:center;color:#8fcfff}

.videos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px auto}
.videos-grid .video-card{padding:10px}
.videos-grid iframe{width:100%;height:240px;border-radius:12px;box-shadow:0 0 22px rgba(0,170,255,.25);display:block}

.sponsors{position:sticky;bottom:0;z-index:50;background:linear-gradient(180deg, rgba(8,14,22,.85), rgba(8,14,22,.95));border-top:1px solid rgba(120,200,255,.2);backdrop-filter: blur(6px);padding:32px 0 10px}
.marquee{overflow:hidden;white-space:nowrap;padding:18px 0}
.marquee-track{display:inline-flex;gap:48px;align-items:center;animation:scroll 18s linear infinite}
.marquee img{height:38px;width:auto;filter: drop-shadow(0 0 12px rgba(0,170,255,.5));opacity:.96}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}


footer{padding:24px 0;color:#9fd4ff}

.brand-wrap{display:flex;align-items:center;gap:10px}
.brand-tagline{text-transform:uppercase;letter-spacing:.08em;font-size:.9rem;color:#9fd4ff;opacity:.95}


/* === V9 refinements === */
.spec-item b{
  color:#0fb4ff;
}

.gallery .gallery-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.sponsors .container{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

.sponsors-title{
    font-size:1.4rem;      /* 40% plus gros */
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#9fd4ff;
    opacity:.95;
    margin-bottom:10px;
}




/* === V10 refinements === */

/* Galerie terrain: cartes remplies proprement */
.gallery .gallery-row{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
}
.gallery .gallery-row .card{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(120,200,255,.25);
  box-shadow:0 14px 30px rgba(0,0,0,.75);
}
.gallery .gallery-row img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* Responsive galerie */
@media (max-width: 1100px){
  .gallery .gallery-row{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
}
@media (max-width: 800px){
  .gallery .gallery-row{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 520px){
  .gallery .gallery-row{
    grid-template-columns:1fr;
  }
}

/* Vidéos: cartes un peu plus compactes pour bien tenir en 3x3 */
.videos-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  max-width:1200px;
  margin:18px auto 40px;
}
.video-card{
  padding:8px;
  border-radius:16px;
}
.video-card iframe{
  width:100%;
  aspect-ratio:16/9;
  border-radius:10px;
}

/* Responsive vidéos */
@media (max-width: 1000px){
  .videos-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 620px){
  .videos-grid{
    grid-template-columns:1fr;
  }
}


/* === V11 refinements === */

/* Galerie terrain: cartes remplies proprement en 4x2 desktop */
.gallery .gallery-row{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
}
.gallery .gallery-row .card{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(120,200,255,.25);
  box-shadow:0 14px 30px rgba(0,0,0,.75);
}
.gallery .gallery-row img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* Responsive galerie */
@media (max-width: 1100px){
  .gallery .gallery-row{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
}
@media (max-width: 800px){
  .gallery .gallery-row{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 520px){
  .gallery .gallery-row{
    grid-template-columns:1fr;
  }
}

/* Vidéos: cartes plus compactes pour un vrai 3x3 */
.videos-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  max-width:1200px;
  margin:18px auto 40px;
}
.videos-grid .video-card{
  padding:8px;
  border-radius:16px;
}
.videos-grid iframe{
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  border-radius:10px;
  display:block;
}

/* Responsive vidéos */
@media (max-width: 1000px){
  .videos-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 620px){
  .videos-grid{
    grid-template-columns:1fr;
  }
}

/* --- Strip ONG compact --- */

.sponsors{
    position:sticky;
    bottom:0;
    z-index:50;
    background:linear-gradient(180deg, rgba(8,14,22,.90), rgba(8,14,22,.98));
    border-top:1px solid rgba(120,200,255,.2);
    backdrop-filter: blur(6px);
    padding: 2px 0 0;          /* plus écrasé */
}

.sponsors .container{
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.sponsors-title{
    font-size: 1.5rem;         /* un peu plus petit */
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9fd4ff;
    opacity: .95;
    margin-bottom: 0;
}

.marquee{
    position: relative;
    overflow: hidden;
    width: 100%;
}

.marquee-track{
    display: flex;
    align-items: center;
    gap: 24px;                  /* plus serré */
    padding: 0 8px;             /* quasi aucun padding */
    animation: marquee 26s linear infinite;
}

.marquee-track img{
    height: 58px;               /* logos un peu plus petits */
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(0,0,0,0.45));
}

@keyframes marquee{
    0%   { transform: translateX(0); }
    100% { transform: translateX(-80%); }
}

/* Mobile */
@media (max-width: 768px){
    .marquee-track{
        gap: 18px;
        padding: 0 6px;
        animation-duration: 22s;
    }
    .marquee-track img{
        height: 46px;
    }
}

/* ========== CONFIGURATEUR H2O 2.0 – VERSION STABLE & SHARP ========== */

/* ========== CONFIGURATEUR H2O 2.0 – VERSION PROPRE ========== */

.config-section{
  margin-top:60px;
}

.config-layout{
  display:grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr);
  gap:26px;
  padding:26px 28px;
  border-radius:28px;
  background:radial-gradient(circle at top, rgba(0,180,255,0.10), transparent 60%);
  box-shadow:0 22px 60px rgba(0,0,0,0.7);
  position:relative;
}

/* Bloc visuel */
.config-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.config-main-card{
  position:relative;
  width:340px;
  height:260px;
  border-radius:24px;
  overflow:hidden;
  background:#000;
  box-shadow:0 26px 60px rgba(0,0,0,.85);
}

.config-main-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Orbit des options */
.config-options-orbit{
  position:absolute;
  inset:0;
  pointer-events:none; /* clics seulement sur les boutons */
}

.config-option{
  position:absolute;
  width:170px;
  min-height:68px;
  padding:8px 14px;
  border-radius:22px;
  border:1px solid rgba(120,200,255,.35);
  background:rgba(4,18,36,.86);
  backdrop-filter:blur(8px);
  color:#e6f3ff;
  box-shadow:0 10px 30px rgba(0,0,0,.65);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:3px;
  text-align:center;
  font-size:.78rem;
  cursor:pointer;
  pointer-events:auto;
}

.config-option-label{
  font-weight:600;
}

.config-option-sub{
  font-size:.70rem;
  opacity:.8;
}

/* Effet sélectionné */
.config-option.is-selected{
  background:radial-gradient(circle at top, rgba(30,180,255,.35), rgba(6,16,32,.96));
  border-color:rgba(160,230,255,.95);
  box-shadow:0 20px 50px rgba(0,210,255,.65);
}

/* Positions précises */
.opt-top-left{
  top:14%;
  left:-6px;
  transform:translateY(-50%);
}

.opt-top{
  top:6%;
  left:50%;
  transform:translate(-50%,-50%);
}

.opt-top-right{
  top:14%;
  right:-6px;
  transform:translateY(-50%);
}

.opt-right{
  top:50%;
  right:-28px;
  transform:translateY(-50%);
}

.opt-bottom-right{
  bottom:6%;
  right:16px;
  transform:translateY(50%);
}

.opt-bottom-left{
  bottom:6%;
  left:16px;
  transform:translateY(50%);
}

.opt-left{
  top:50%;
  left:-28px;
  transform:translateY(-50%);
}

/* Résumé */
.config-summary{
  border-radius:22px;
  background:rgba(3,10,22,.96);
  border:1px solid rgba(120,210,255,.45);
  box-shadow:0 26px 80px rgba(0,0,0,.85);
  padding:18px 20px 18px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.config-summary-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.config-summary-title{
  font-size:1rem;
  font-weight:600;
}

.config-summary-sub{
  font-size:.82rem;
  color:rgba(200,225,250,.8);
  max-width:520px;
}

/* Toggle mode */
.config-mode-toggle{
  display:inline-flex;
  padding:3px;
  border-radius:999px;
  background:rgba(6,18,36,.95);
  border:1px solid rgba(120,210,255,.55);
}

.config-mode-btn{
  border:none;
  background:transparent;
  color:rgba(200,225,250,.8);
  font-size:.78rem;
  padding:6px 12px;
  border-radius:999px;
  cursor:pointer;
}

.config-mode-btn.is-active{
  background:linear-gradient(120deg,#00c6ff,#0090ff);
  color:#fff;
}

/* Body résumé */
.config-summary-body{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  flex-wrap:wrap;
}

.config-price-block{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.config-qty-label{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(180,205,235,.85);
}

.config-qty-input{
  width:80px;
  padding:6px 8px;
  border-radius:8px;
  border:1px solid rgba(120,200,255,.35);
  background:rgba(6,14,28,.95);
  color:#e6f3ff;
  margin-bottom:4px;
}

.config-price-label{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(180,205,235,.85);
}

.config-price-value{
  font-size:1.35rem;
  font-weight:700;
  color:#1ec4ff;
}

.config-price-note{
  font-size:.75rem;
  color:rgba(190,215,240,.8);
  max-width:360px;
}

.config-actions{
  display:flex;
  gap:10px;
}

.config-btn-ghost{
  border-radius:999px;
  border:1px solid rgba(120,210,255,.7);
  background:transparent;
  font-size:.85rem;
}

.config-btn-main{
  border-radius:999px;
  font-size:.9rem;
}

/* Tags & récap choix */
.config-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
  font-size:.75rem;
  color:rgba(190,215,240,.9);
}

.config-tags li{
  padding:4px 9px;
  border-radius:999px;
  border:1px solid rgba(80,140,210,.7);
  background:rgba(6,20,40,.95);
}

.config-choices-list{
  margin-top:4px;
  font-size:.78rem;
  color:rgba(190,215,240,.9);
}

.config-choices-list div{
  margin:2px 0;
}

/* Menu contextuel */
.config-menu-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
}

.config-menu{
  width:min(420px,92vw);
  background:rgba(3,10,22,.98);
  border-radius:20px;
  border:1px solid rgba(120,210,255,.6);
  box-shadow:0 28px 80px rgba(0,0,0,.9);
  padding:18px 20px 20px;
}

.config-menu h3{
  margin:0 0 4px;
  font-size:1rem;
}

.config-menu p{
  margin:0 0 10px;
  font-size:.8rem;
  color:rgba(190,215,240,.85);
}

.config-menu-options{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:12px;
}

.config-menu-option-btn{
  border-radius:999px;
  border:1px solid rgba(120,210,255,.45);
  background:rgba(6,18,36,.95);
  color:#e6f3ff;
  padding:8px 12px;
  font-size:.82rem;
  text-align:left;
  cursor:pointer;
}

.config-menu-option-btn span{
  display:block;
}

.config-menu-option-btn small{
  font-size:.7rem;
  opacity:.8;
}

.config-menu-option-btn.is-active{
  background:linear-gradient(130deg,#00c0ff,#0080ff);
  border-color:transparent;
}

.config-menu-close{
  width:100%;
  text-align:center;
}

/* Responsive */
@media(max-width:900px){
  .config-layout{
    grid-template-columns:1fr;
  }
  .config-visual{
    order:2;
  }
  .config-summary{
    order:1;
  }
}

@media(max-width:700px){
  .config-layout{
    padding:18px 14px;
  }
  .config-main-card{
    width:270px;
    height:210px;
  }
  .opt-left{ left:-10px; }
  .opt-right{ right:-10px; }
  .config-option{
    width:150px;
  }
}
/* === CONFIGURATEUR : état sélectionné === */

.config-option.is-selected{
  background:radial-gradient(circle at top, rgba(0,200,255,.35), rgba(0,40,80,.98));
  border:1px solid rgba(160,230,255,.95);
  box-shadow:0 0 0 1px rgba(0,255,255,.4) inset,
             0 0 26px rgba(0,210,255,.7);
}

/* Petit caption sous la valise */
.config-main-caption{
  position:absolute;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  padding:4px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.65);
  color:#e6f7ff;
  font-size:.78rem;
}

/* Résumé : quantité */

.config-qty-label{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(190,215,240,.8);
}

.config-qty-input{
  margin:4px 0 10px;
  width:80px;
  padding:6px 8px;
  border-radius:8px;
  border:1px solid rgba(120,200,255,.35);
  background:rgba(4,10,22,.95);
  color:#e6f5ff;
}

/* Modal d’options */

.config-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:250;
}
.config-modal[hidden]{ display:none; }

.config-modal-inner{
  min-width:260px;
  max-width:360px;
  padding:18px 18px 14px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(8,16,28,.98), rgba(4,10,20,.98));
  border:1px solid rgba(120,210,255,.6);
  box-shadow:0 24px 70px rgba(0,0,0,.85);
}

.config-modal-sub{
  font-size:.82rem;
  color:rgba(200,225,245,.85);
  margin:4px 0 10px;
}

.config-modal-choices{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:12px;
}

.config-modal-choice{
  width:100%;
  border-radius:999px;
  border:1px solid rgba(120,200,255,.45);
  background:rgba(6,18,32,.95);
  padding:7px 10px;
  font-size:.85rem;
  color:#e6f7ff;
  text-align:left;
  cursor:pointer;
}
.config-modal-choice span{
  display:inline-block;
}
.config-modal-choice small{
  opacity:.75;
  font-size:.72rem;
  margin-left:6px;
}
.config-modal-choice.is-active{
  background:linear-gradient(120deg,#00c6ff,#0090ff);
  border-color:transparent;
}

.config-modal-actions{
  display:flex;
  justify-content:flex-end;
}
/* Sécuriser l’affichage du bouton "Aucun" dans le popup */
.config-modal-choices .config-modal-choice {
  display: flex;
  justify-content: space-between;
  align-items: center;
  visibility: visible;
  opacity: 1;
}

.config-modal-choices .config-modal-choice:first-child {
  /* "Aucun" – on force qu’il soit visible */
  background: rgba(5, 25, 45, 0.95);
}