/* ======================================================
   OSMEO – Feuille de styles principale
   Fidèle à la maquette HTML de référence
   ====================================================== */

:root {
  --color-primary:#1a6dab; --color-primary-dark:#135490;
  --color-accent:#8dc63f;  --color-accent-dark:#72a530;
  --color-dark:#1a2b3c;    --color-white:#ffffff;
  --color-light-bg:#f7f9fc;--color-text:#333333;
  --color-text-light:#5a6a7a; --color-border:#dde4ed;
  --font-h:'Barlow Condensed',sans-serif; --font-b:'Barlow',sans-serif;
  --r-sm:6px; --r-md:12px; --r-full:9999px;
  --sh-sm:0 2px 8px rgba(26,45,60,.08); --sh-md:0 6px 24px rgba(26,45,60,.14);
  --tr:.25s ease; --hh:72px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-b);color:var(--color-text);background:#fff;overflow-x:hidden;line-height:1.65}
h1,h2,h3,h4{font-family:var(--font-h);font-weight:700;line-height:1.2;color:var(--color-dark)}
h1{font-size:clamp(2rem,5.5vw,3.75rem);font-weight:800}
h2{font-size:clamp(1.5rem,3.5vw,2.25rem)}
h3{font-size:clamp(1.1rem,2.5vw,1.4rem)}
a{color:var(--color-primary);text-decoration:none;transition:color var(--tr)}
ul{list-style:none}
img,svg{max-width:100%;height:auto;display:block}
p{margin-bottom:1rem} p:last-child{margin-bottom:0}
.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}
.tc{text-align:center}
.sl{display:inline-block;font-family:var(--font-h);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent);margin-bottom:.75rem}
.sl-lt{color:rgba(255,255,255,.65)}
.su{width:48px;height:3px;background:var(--color-accent);border-radius:var(--r-full);margin:.75rem 0 2rem}
.tc .su{margin-left:auto;margin-right:auto}
.sh{margin-bottom:3rem} .sh h2{margin-bottom:.5rem}
.ss{font-size:1.0625rem;color:var(--color-text-light);max-width:640px;margin:0 auto .75rem}

/* ── Boutons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font-h);font-weight:700;font-size:.9375rem;border-radius:var(--r-full);border:2px solid transparent;cursor:pointer;transition:all var(--tr);white-space:nowrap;letter-spacing:.02em;padding:.85rem 2rem}
.btn:hover{transform:translateY(-2px)}
.btn-ac{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}
.btn-ac:hover{background:var(--color-accent-dark);color:#fff;box-shadow:0 6px 20px rgba(141,198,63,.4)}
.btn-ow{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.btn-ow:hover{background:#fff;color:var(--color-dark)}
.btn-pr{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.btn-pr:hover{background:var(--color-primary-dark);color:#fff;box-shadow:0 6px 20px rgba(26,109,171,.35)}
.btn-ol{background:transparent;color:var(--color-primary);border-color:var(--color-primary)}
.btn-ol:hover{background:var(--color-primary);color:#fff}
.btn-fl{width:100%} .btn-sm{padding:.5rem 1.25rem;font-size:.875rem}

/* ── Logo image ── */
.logo-img{height:44px;width:auto;display:block;transition:opacity var(--tr)}
.site-header:not(.sc) .logo-img{filter:brightness(0) invert(1)}
.site-header.sc .logo-img{filter:none}
.ft-logo-img{height:36px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.85}

/* ── Header ── */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--hh);background:transparent;transition:background var(--tr),box-shadow var(--tr)}
.site-header.sc{background:#fff;box-shadow:var(--sh-sm)}
.hi{display:flex;align-items:center;gap:1.5rem;height:100%}
.header-actions{display:flex;align-items:center;gap:.75rem;margin-left:auto}
.logo{display:flex;flex-direction:column;text-decoration:none;flex-shrink:0}
nav{margin-left:auto}
.nl{display:flex;align-items:center;gap:2rem}
.nl a{font-family:var(--font-h);font-weight:600;font-size:.9rem;color:rgba(255,255,255,.9);transition:color var(--tr);position:relative}
.nl a::after{content:'';position:absolute;bottom:-3px;left:0;right:0;height:2px;background:var(--color-accent);transform:scaleX(0);transition:transform var(--tr)}
.nl a:hover::after{transform:scaleX(1)}
.nl a:hover{color:var(--color-accent)}
.site-header.sc .nl a{color:var(--color-text)}
.site-header.sc .nl a:hover{color:var(--color-primary)}

/* ── Switcher langue ── */

.lang-sw button{font-family:var(--font-h);font-size:.8rem;font-weight:700;padding:4px 10px;border-radius:var(--r-sm);color:rgba(255,255,255,.65);background:none;border:1.5px solid transparent;cursor:pointer;transition:all var(--tr)}
.lang-sw button.active,.lang-sw button:hover{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.3)}
.site-header.sc .lang-sw button{color:var(--color-text-light)}
.site-header.sc .lang-sw button.active,.site-header.sc .lang-sw button:hover{background:var(--color-light-bg);color:var(--color-primary);border-color:var(--color-border)}

/* ── Hero ── */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:var(--color-dark)}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center top}
.hero-ill{position:absolute;right:5%;top:50%;transform:translateY(-50%);width:42%;max-width:580px;opacity:.2}
.hero-ov{position:absolute;inset:0;background:linear-gradient(120deg,rgba(26,43,60,.92) 0%,rgba(26,109,171,.55) 100%);z-index:1}
.hc{position:relative;z-index:2;padding-top:calc(var(--hh) + 5rem);padding-bottom:7rem;max-width:860px}
.hbadge{display:inline-block;background:rgba(141,198,63,.18);border:1px solid rgba(141,198,63,.5);color:var(--color-accent);font-family:var(--font-h);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 14px;border-radius:var(--r-full);margin-bottom:1.25rem}
.htitle{color:#fff;margin-bottom:2rem}
.htitle strong{color:var(--color-accent);font-weight:900}
.hben{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem 1.25rem;margin-bottom:2.5rem;max-width:860px}
.hb{display:flex;align-items:center;gap:.75rem}
.hbi{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:46px;height:46px}
.hbi img{width:46px;height:46px;object-fit:contain;display:block}
.hbt{color:rgba(255,255,255,.88);font-size:.875rem;line-height:1.4}
.hbt strong{display:block;color:#fff;font-weight:700}
.hcta{display:flex;gap:1rem;flex-wrap:wrap}
.wave{position:absolute;bottom:-1px;left:0;right:0;z-index:2;line-height:0}
.wave svg{width:100%;display:block}

/* ── Stats ── */
.sec-stats{background:#fff;padding:5rem 0}
.sg{display:grid;grid-template-columns:repeat(3,1fr)}
.si{text-align:center;padding:2.5rem 2rem;position:relative}
.si+.si::before{content:'';position:absolute;left:0;top:20%;bottom:20%;width:1px;background:var(--color-border)}
.sn{display:flex;align-items:baseline;justify-content:center;gap:2px;margin-bottom:.5rem}
.sc2{font-family:var(--font-h);font-size:clamp(2.5rem,6vw,4rem);font-weight:800;color:var(--color-primary);line-height:1}
.sf{font-family:var(--font-h);font-size:1.5rem;font-weight:800;color:var(--color-accent)}
.slabel{font-size:.9375rem;color:var(--color-text-light);font-weight:500}

/* ── About ── */
.sec-about{background:var(--color-light-bg);padding:7rem 0}
.ag{display:grid;grid-template-columns:1fr .85fr;gap:5rem;align-items:center}
.at h2{margin-bottom:.25rem} .at h2 strong{color:var(--color-primary)}
.h2l{font-weight:400;color:var(--color-text-light);font-size:1.25rem}
.at p{color:var(--color-text-light);line-height:1.75}
.aimgs{position:relative;display:flex;align-items:center;justify-content:center}






/* ── Features ── */
.sec-feat{background:#fff;padding:7rem 0}
.fg{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.fc{background:#fff;border:1px solid var(--color-border);border-radius:var(--r-md);padding:2rem 1.75rem;box-shadow:var(--sh-sm);transition:transform var(--tr),box-shadow var(--tr)}
.fc:hover{transform:translateY(-6px);box-shadow:var(--sh-md)}
.fi{width:60px;height:60px;background:var(--color-light-bg);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;color:var(--color-primary);margin-bottom:1.25rem}
.ft{font-size:1.05rem;font-weight:700;color:var(--color-accent-dark);margin-bottom:.5rem}
.fd{font-size:.9375rem;color:var(--color-text-light);line-height:1.65;margin:0}

/* ── Testimonial ── */
.sec-test{position:relative;background:var(--color-dark);padding:7rem 0;overflow:hidden}
.tqbg{position:absolute;top:-20px;left:-20px;width:280px;pointer-events:none;opacity:.5}
.tin{position:relative;z-index:1;max-width:820px;margin:0 auto;text-align:center}
.th{color:#fff;margin-bottom:.5rem}
.tsu{width:48px;height:3px;background:var(--color-accent);border-radius:var(--r-full);margin:.75rem auto 2.5rem}
.tq{font-size:clamp(1rem,2vw,1.18rem);line-height:1.8;color:rgba(255,255,255,.88);font-style:italic;margin-bottom:2rem}
.tau{display:flex;align-items:center;justify-content:center;gap:1rem}
.tav{width:60px;height:60px;border-radius:50%;overflow:hidden;border:2px solid var(--color-accent);flex-shrink:0;background:rgba(26,109,171,.3);display:flex;align-items:center;justify-content:center}
.tn{display:block;font-family:var(--font-h);font-weight:700;color:var(--color-accent);font-size:1rem;text-align:left}
.tr2{display:block;color:rgba(255,255,255,.55);font-size:.875rem;text-align:left}
.tcta{margin-top:2.5rem}

/* ── Solutions ── */
.sec-sol{background:var(--color-light-bg);padding:7rem 0}
.sw{color:var(--color-text-light);font-weight:600;font-size:1.05rem;margin:0 auto 3rem;max-width:600px;text-align:center}
.scards{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:860px;margin:0 auto}
.sc3{background:#fff;border-radius:var(--r-md);border:2px solid var(--color-border);padding:2.5rem;display:flex;flex-direction:column;gap:1.25rem;position:relative;transition:box-shadow var(--tr)}
.sc3:hover{box-shadow:var(--sh-md)}
.sc3-ft{border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent)}
.sbadge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--color-accent);color:#fff;font-family:var(--font-h);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 14px;border-radius:var(--r-full);white-space:nowrap}
.sch{text-align:center}
.sico{width:60px;height:60px;background:var(--color-light-bg);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;color:var(--color-primary);margin:0 auto 1rem}
.sc3-ft .sico{color:var(--color-accent)}
.stit{font-size:1.35rem;font-weight:800;color:var(--color-primary);margin-bottom:4px}
.sc3-ft .stit{color:var(--color-accent-dark)}
.ssub{font-size:.875rem;color:var(--color-text-light);margin:0}
.slist{flex:1;display:flex;flex-direction:column;gap:.6rem}
.slist li{display:flex;align-items:flex-start;gap:8px;font-size:.9rem;color:var(--color-text);line-height:1.5}
.ck{flex-shrink:0;color:var(--color-accent);margin-top:1px}

/* ── Section vidéo ── */
.sec-video{background:var(--color-dark);padding:7rem 0;position:relative;overflow:hidden}
.sec-video::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(26,109,171,.18) 0%,transparent 70%)}
.video-wrap{position:relative;z-index:1;max-width:860px;margin:0 auto}
.video-frame{position:relative;padding-bottom:56.25%;border-radius:var(--r-md);overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.5)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:none}
.video-caption{text-align:center;margin-top:1.5rem;color:rgba(255,255,255,.55);font-size:.9rem}
.video-caption a{color:var(--color-accent);font-weight:600}

/* ── Galerie photo ── */
.sec-gallery{background:#0f1c2b;padding:7rem 0}
.gallery-intro{max-width:560px;margin:0 auto 3.5rem;text-align:center}
.gallery-intro .sl-lt{color:var(--color-accent)}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,240px);gap:8px;border-radius:var(--r-md);overflow:hidden}
.gi{overflow:hidden;position:relative;background:var(--color-dark)}
.gi:nth-child(1){grid-column:span 2;grid-row:span 2}
.gi img,.gi .gi-ph{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s cubic-bezier(.25,.46,.45,.94),filter .4s ease}
.gi img{filter:brightness(.82) contrast(1.08) saturate(.7)}
.gi:hover img{filter:brightness(1) contrast(1) saturate(1);transform:scale(1.05)}
.gi-ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a3a5c 0%,#0d2235 100%)}
.gi-ph svg{opacity:.25}
.gi::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,20,35,.6) 0%,transparent 55%);pointer-events:none;transition:opacity .4s}
.gi:hover::after{opacity:0}
.gallery-cta{text-align:center;margin-top:2.5rem}



/* ── Contact ── */
.sec-contact{background:var(--color-light-bg);padding:7rem 0}
.cg{display:grid;grid-template-columns:1fr 1.2fr;gap:5rem;align-items:start}
.ci h2{margin-bottom:.25rem}
.cit{font-size:1.0625rem;color:var(--color-text-light);line-height:1.7;margin-bottom:1.75rem}
.cil{display:flex;flex-direction:column;gap:.85rem;margin-bottom:1.75rem}
.cil li{display:flex;align-items:center;gap:.75rem;font-size:.9375rem;color:var(--color-text)}
.cil li svg{color:var(--color-accent);flex-shrink:0}
.cfw{background:#fff;border-radius:var(--r-md);padding:2.5rem;box-shadow:var(--sh-md)}
.fr{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.fg2{flex:1;min-width:140px}
input,select,textarea{width:100%;padding:.75rem 1rem;border:1.5px solid var(--color-border);border-radius:var(--r-sm);font-family:var(--font-b);font-size:.9375rem;color:var(--color-text);background:#fff;transition:border-color var(--tr),box-shadow var(--tr);appearance:none}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(26,109,171,.12)}
textarea{min-height:110px;resize:vertical}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235a6a7a'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:2.5rem}
.fgdpr{font-size:.78rem;color:var(--color-text-light);margin-top:.75rem}

/* ── Footer ── */
.site-footer{background:var(--color-dark);color:rgba(255,255,255,.75)}
.ft-top{padding:5rem 0 2.5rem}
.ftg{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem}
.fd2{font-size:.88rem;color:rgba(255,255,255,.55);line-height:1.7;margin:1rem 0 1.25rem}

.flang button{font-family:var(--font-h);font-size:.78rem;font-weight:700;padding:3px 8px;border-radius:var(--r-sm);color:rgba(255,255,255,.5);background:none;border:1.5px solid transparent;cursor:pointer;transition:all var(--tr)}
.flang button.active,.flang button:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.2)}
.fct{font-family:var(--font-h);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent);margin-bottom:1rem}
.flinks{display:flex;flex-direction:column;gap:.6rem}
.flinks a{font-size:.88rem;color:rgba(255,255,255,.6)}
.flinks a:hover{color:#fff}
.fc2t{font-size:.88rem;color:rgba(255,255,255,.55);margin-bottom:1rem}
.fb{border-top:1px solid rgba(255,255,255,.08);padding:1.25rem 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.fcp,.flgl{font-size:.78rem;color:rgba(255,255,255,.4);margin:0}
.flgl a{color:rgba(255,255,255,.55);text-decoration:underline}

/* ── Animations ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.anim{animation:fadeUp .7s ease both}
.d1{animation-delay:.1s} .d2{animation-delay:.25s} .d3{animation-delay:.4s}
.sa{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
.sa.vis{opacity:1;transform:translateY(0)}

/* ── Responsive ── */
@media(max-width:992px){
  nav,.hcta-cta{display:none}
  .ag,.cg{grid-template-columns:1fr;gap:2.5rem}
  .aimgs{order:-1} 
    
  .fg{grid-template-columns:repeat(2,1fr)}
  .scards{grid-template-columns:1fr;max-width:440px}
  .hben{grid-template-columns:repeat(2,1fr);max-width:100%}
  .ftg{grid-template-columns:1fr 1fr;gap:2rem}
  .gallery-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,200px)}
  .gi:nth-child(1){grid-column:span 2;grid-row:span 1}
}
@media(max-width:768px){
  .sg{grid-template-columns:1fr}
  .si+.si::before{display:none}
  .si{border-bottom:1px solid var(--color-border)}
  .hben{grid-template-columns:1fr} .hcta{flex-direction:column;align-items:flex-start}
  .fg{grid-template-columns:1fr} .ftg{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .gi{height:220px}
  .gi:nth-child(1){grid-column:span 1}
}
@media(prefers-reduced-motion:reduce){
  .anim,.sa{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
}

/* ── Galerie – lightbox ── */
.gi { cursor: zoom-in; }
.lbx-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10,18,28,.95);
  align-items: center;
  justify-content: center;
  animation: lbxIn .22s ease;
}
.lbx-overlay.active { display: flex; }
@keyframes lbxIn { from{opacity:0} to{opacity:1} }
.lbx-inner {
  position: relative;
  max-width: 92vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.lbx-img {
  max-width: 92vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: 0 24px 80px rgba(0,0,0,.7);
  animation: lbxPop .28s cubic-bezier(.25,.46,.45,.94);
}
@keyframes lbxPop { from{transform:scale(.92);opacity:0} to{transform:scale(1);opacity:1} }
.lbx-close {
  position: absolute;
  top: -2.5rem;
  right: 0;
  background: none;
  border: none;
  color: rgba(255,255,255,.7);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--tr), transform var(--tr);
  padding: .25rem .5rem;
}
.lbx-close:hover { color: #fff; transform: scale(1.2); }
.lbx-nav { display: flex; align-items: center; gap: 1rem; }
.lbx-btn {
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.2);
  color: #fff;
  border-radius: var(--r-full);
  padding: .5rem 1.25rem;
  font-family: var(--font-h);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--tr);
}
.lbx-btn:hover { background: rgba(255,255,255,.22); }
.lbx-btn:disabled { opacity: .3; cursor: default; }
.lbx-counter {
  color: rgba(255,255,255,.55);
  font-family: var(--font-h);
  font-size: .8rem;
  font-weight: 600;
  min-width: 4rem;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   Structure :
       a.gt-current-wrapper           → bouton affiché (ex: FR ▾)
       ul.sub-menu                    → dropdown des langues
           a.glink                    → lien langue
           a.gt-current-lang          → langue active
   ════════════════════════════════════════════════════════════════ */

/* ── Conteneur parent ────────────────────────────────────────── */
  position: relative;
  list-style: none;
}

/* ── Bouton langue courante ──────────────────────────────────── */
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  font-family:   var(--font-h);
  font-size:     .8rem;
  font-weight:   700;
  letter-spacing:.06em;
  padding:       4px 10px 4px 12px;
  border-radius: var(--r-sm);
  border:        1.5px solid rgba(255,255,255,.3);
  color:         #fff;
  background:    rgba(255,255,255,.12);
  cursor:        pointer;
  transition:    background var(--tr), border-color var(--tr), color var(--tr);
  white-space:   nowrap;
  text-decoration: none;
}

/* Flèche ▾ après le code langue */
  content:   '▾';
  font-size: .65rem;
  opacity:   .75;
  margin-left: 2px;
  transition: transform var(--tr);
}

  transform: rotate(180deg);
}

  background:    rgba(255,255,255,.22);
  border-color:  rgba(255,255,255,.45);
}

/* ── État scrollé : header blanc ────────────────────────────── */
  color:         var(--color-text);
  background:    var(--color-light-bg);
  border-color:  var(--color-border);
}
  background:    #e8eef6;
  border-color:  var(--color-primary);
  color:         var(--color-primary);
}

/* ── Dropdown ────────────────────────────────────────────────── */
  display:        none;
  position:       absolute;
  top:            calc(100% + 8px);
  right:          0;
  left:           auto;
  min-width:      90px;
  background:     #fff;
  border-radius:  var(--r-md);
  box-shadow:     0 8px 24px rgba(26,43,60,.18);
  border:         1px solid var(--color-border);
  padding:        6px;
  z-index:        9999;
  list-style:     none;
  margin:         0;
  overflow:       hidden;
  animation:      gtDropIn .18s ease;
}

@keyframes gtDropIn {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0);    }
}

/* Afficher au survol ET au focus-within (accessibilité clavier) */
  display: block;
}

/* ── Items du dropdown ───────────────────────────────────────── */
  list-style: none;
  margin: 0;
}

  display:       block;
  padding:       7px 14px;
  border-radius: var(--r-sm);
  font-family:   var(--font-h);
  font-size:     .82rem;
  font-weight:   600;
  letter-spacing:.04em;
  color:         var(--color-text);
  text-decoration: none;
  transition:    background var(--tr), color var(--tr);
  white-space:   nowrap;
}

  background: var(--color-light-bg);
  color:      var(--color-primary);
}

/* Langue active : fond bleu discret + coche */
  background: rgba(26,109,171,.08);
  color:      var(--color-primary);
  font-weight: 700;
}

  content:      '✓ ';
  color:        var(--color-accent);
  font-size:    .75rem;
}

  background: rgba(26,109,171,.14);
}

/* ── Séparateur entre items ──────────────────────────────────── */
  border-top: 1px solid var(--color-border);
  margin-top: 3px;
  padding-top: 3px;
}

/* ── Supprimer les styles par défaut du menu WordPress ──────── */
  float: none;
  width: auto;
}

  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   WPML — Switcher de langue
   ════════════════════════════════════════════════════════════════ */
.osmeo-wpml-switcher {
  display:     flex;
  align-items: center;
  gap:         4px;
  flex-shrink: 0;
}
.osmeo-wpml-lang {
  display:         block;
  font-family:     var(--font-h);
  font-size:       .8rem;
  font-weight:     700;
  letter-spacing:  .06em;
  padding:         4px 10px;
  border-radius:   var(--r-sm);
  color:           rgba(255,255,255,.65);
  background:      none;
  border:          1.5px solid transparent;
  cursor:          pointer;
  transition:      background var(--tr), color var(--tr), border-color var(--tr);
  text-decoration: none;
  white-space:     nowrap;
}
.osmeo-wpml-lang:hover {
  background:   rgba(255,255,255,.18);
  color:        #fff;
  border-color: rgba(255,255,255,.3);
}
.osmeo-wpml-lang.active {
  background:   rgba(255,255,255,.18);
  color:        #fff;
  border-color: rgba(255,255,255,.3);
}
.site-header.sc .osmeo-wpml-lang {
  color: var(--color-text-light);
}
.site-header.sc .osmeo-wpml-lang.active,
.site-header.sc .osmeo-wpml-lang:hover {
  background:   var(--color-light-bg);
  color:        var(--color-primary);
  border-color: var(--color-border);
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATION — Bulles photo flottantes (section About)
   ════════════════════════════════════════════════════════════════ */


@keyframes floatBubble {
  0%, 100% { transform: translateY(0) translateX(0); }
  25%      { transform: translateY(-14px) translateX(6px); }
  50%      { transform: translateY(4px) translateX(-4px); }
  75%      { transform: translateY(-8px) translateX(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .aimg-m, 
}

/* ═══════════════════════════════════════════════════════════════
   BACK TO TOP
   ════════════════════════════════════════════════════════════════ */
@media (max-width:640px) {
}

/* ═══════════════════════════════════════════════════════════
   WPML / LANG SWITCHER — EN | FR côte à côte (style maquette)
   ═══════════════════════════════════════════════════════════ */
.osmeo-lang {
  display:     flex;
  align-items: center;
  gap:         4px;
  flex-shrink: 0;
}
.osmeo-lang__btn {
  display:         block;
  font-family:     var(--font-h);
  font-size:       .8rem;
  font-weight:     700;
  letter-spacing:  .08em;
  padding:         4px 10px;
  border-radius:   var(--r-sm);
  color:           rgba(255,255,255,.6);
  background:      transparent;
  border:          1.5px solid transparent;
  cursor:          pointer;
  text-decoration: none;
  transition:      background var(--tr), color var(--tr), border-color var(--tr);
  white-space:     nowrap;
}
.osmeo-lang__btn:hover {
  background:   rgba(255,255,255,.18);
  color:        #fff;
  border-color: rgba(255,255,255,.3);
}
.osmeo-lang__btn.is-active {
  background:   rgba(255,255,255,.18);
  color:        #fff;
  border-color: rgba(255,255,255,.3);
}
/* Header scrollé (fond blanc) */
.site-header.sc .osmeo-lang__btn        { color: var(--color-text-light); }
.site-header.sc .osmeo-lang__btn:hover,
.site-header.sc .osmeo-lang__btn.is-active {
  background:   var(--color-light-bg);
  color:        var(--color-primary);
  border-color: var(--color-border);
}
/* Footer */
.site-footer .osmeo-lang { margin-top: .75rem; }
.site-footer .osmeo-lang__btn        { color: rgba(255,255,255,.45); }
.site-footer .osmeo-lang__btn:hover,
.site-footer .osmeo-lang__btn.is-active { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); }

/* ═══════════════════════════════════════════════════════════
   ANIMATION — Bulles flottantes (photos section About)
   ═══════════════════════════════════════════════════════════ */


@keyframes floatBubble {
  0%, 100% { transform: translateY(0) translateX(0); }
  25%      { transform: translateY(-14px) translateX(6px); }
  50%      { transform: translateY(4px) translateX(-4px); }
  75%      { transform: translateY(-8px) translateX(-8px); }
}
@media (prefers-reduced-motion: reduce) { .aimg-m,  }

/* ═══════════════════════════════════════════════════════════
   BACK TO TOP
   ═══════════════════════════════════════════════════════════ */

/* Form message */
.form-ok  { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
.form-err { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

/* ── Messages formulaire contact ── */
.form-msg { padding:.75rem 1rem; border-radius:6px; margin-bottom:1rem; font-weight:600; }
.form-msg--ok  { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
.form-msg--err { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

/* Back to top */

/* Animations bulles photos About */


@keyframes floatBubble{0%,100%{transform:translateY(0) translateX(0)}25%{transform:translateY(-14px) translateX(6px)}50%{transform:translateY(4px) translateX(-4px)}75%{transform:translateY(-8px) translateX(-8px)}}
@media(prefers-reduced-motion:reduce){.aimg-m,}

/* Formulaire messages */
.form-msg--ok{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.form-msg--err{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}

/* ═══════════════════════════════════════════════════════════
   WPML — Switcher de langue EN | FR (style maquette)
   ═══════════════════════════════════════════════════════════ */
.osmeo-lang {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.osmeo-lang__btn {
  display: block;
  font-family: var(--font-h);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 4px 9px;
  border-radius: var(--r-sm);
  color: rgba(255,255,255,.6);
  background: transparent;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--tr), color var(--tr), border-color var(--tr);
  white-space: nowrap;
}
.osmeo-lang__btn:hover {
  background: rgba(255,255,255,.18);
  color: #fff;
  border-color: rgba(255,255,255,.3);
}
.osmeo-lang__btn.is-active {
  background: rgba(255,255,255,.18);
  color: #fff;
  border-color: rgba(255,255,255,.3);
}
/* Header scrollé (fond blanc) */
.site-header.sc .osmeo-lang__btn        { color: var(--color-text-light); }
.site-header.sc .osmeo-lang__btn:hover,
.site-header.sc .osmeo-lang__btn.is-active {
  background: var(--color-light-bg);
  color: var(--color-primary);
  border-color: var(--color-border);
}
/* Footer */
.site-footer .osmeo-lang { margin: .25rem 0; }
.site-footer .osmeo-lang__btn        { color: rgba(255,255,255,.45); border-color: transparent; }
.site-footer .osmeo-lang__btn:hover,
.site-footer .osmeo-lang__btn.is-active {
  background: rgba(255,255,255,.12);
  color: #fff;
  border-color: rgba(255,255,255,.2);
}

/* ── Switcher WPML injecté dans le menu (li.menu-item-gtranslate) ── */
li.menu-item-gtranslate { position: relative; list-style: none; }

/* Bouton langue courante masqué — on affiche directement le sous-menu */
li.menu-item-gtranslate > a.gt-current-wrapper { display: none; }

/* Sous-menu : toujours visible, côte à côte */
li.menu-item-gtranslate > ul.sub-menu,
li.menu-item-gtranslate > ul.dropdown-menu {
  display: flex !important;
  position: static !important;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
  animation: none !important;
}
li.menu-item-gtranslate-child { list-style: none; margin: 0; }
li.menu-item-gtranslate-child > a.glink {
  display: block;
  font-family: var(--font-h);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 4px 9px;
  border-radius: var(--r-sm);
  color: rgba(255,255,255,.6);
  background: transparent;
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: background var(--tr), color var(--tr), border-color var(--tr);
  white-space: nowrap;
}
li.menu-item-gtranslate-child > a.glink:hover { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.3); }
li.menu-item-gtranslate-child > a.gt-current-lang { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.3); }
.site-header.sc li.menu-item-gtranslate-child > a.glink { color: var(--color-text-light); }
.site-header.sc li.menu-item-gtranslate-child > a.glink:hover,
.site-header.sc li.menu-item-gtranslate-child > a.gt-current-lang { background: var(--color-light-bg); color: var(--color-primary); border-color: var(--color-border); }
li.menu-item-gtranslate > ul.sub-menu li { float: none; width: auto; }

/* ═══════════════════════════════════════════════════════════
   BACK TO TOP
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   GRAVITY FORMS — Intégration visuelle dans le thème Osmeo
   ═══════════════════════════════════════════════════════════ */
.gf-wrapper .gform_wrapper { margin: 0; }
.gf-wrapper .gform_body    { margin: 0; }

/* Champs */
.gf-wrapper .gfield input,
.gf-wrapper .gfield select,
.gf-wrapper .gfield textarea {
  width: 100%;
  padding: .75rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-sm);
  font-family: var(--font-b);
  font-size: .9375rem;
  color: var(--color-text);
  background: #fff;
  transition: border-color var(--tr), box-shadow var(--tr);
  box-sizing: border-box;
}
.gf-wrapper .gfield input:focus,
.gf-wrapper .gfield select:focus,
.gf-wrapper .gfield textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26,109,171,.12);
}
.gf-wrapper .gfield textarea { min-height: 120px; resize: vertical; }

/* Labels */
.gf-wrapper .gfield_label {
  font-family: var(--font-h);
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: .35rem;
  display: block;
}
.gf-wrapper .gfield_required { color: var(--color-accent); }

/* Bouton soumettre */
.gf-wrapper .gform_button,
.gf-wrapper input[type="submit"],
.gf-wrapper .gform_button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: .875rem 2rem !important;
  background: #8dc63f !important;
  color: #1a2b3c !important;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .04em;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--tr), transform .15s;
}
.gf-wrapper .gform_button:hover,
.gf-wrapper input[type="submit"]:hover {
  background: #7ab232;
  transform: translateY(-1px);
}

/* Messages de confirmation / erreur */
.gf-wrapper .gform_confirmation_message {
  padding: 1rem 1.25rem;
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
  border-radius: var(--r-md);
  font-weight: 600;
}
.gf-wrapper .validation_error {
  padding: .75rem 1rem;
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: var(--r-sm);
  margin-bottom: 1rem;
}
.gf-wrapper .gfield_error input,
.gf-wrapper .gfield_error select,
.gf-wrapper .gfield_error textarea {
  border-color: #ef4444;
}

/* Espacement entre les champs */
.gf-wrapper .gform_fields { display: flex; flex-direction: column; gap: 1rem; }
.gf-wrapper .gfield { margin: 0; padding: 0; }

/* ═══════════════════════════════════════════════════════════
   MENU BURGER — Mobile
   ═══════════════════════════════════════════════════════════ */

/* Bouton burger */
.mobile-nav-footer { display: none !important; }

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
  z-index: 1002;
}
.burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease;
}
.site-header.sc .burger span { background: var(--color-dark); }

/* Burger → croix */
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Overlay sombre */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,20,35,.6);
  z-index: 999;
  backdrop-filter: blur(2px);
}
.nav-overlay.is-open { display: block; }

/* Responsive ≤ 992px */
@media (max-width: 992px) {
  .burger { display: flex; }
  .header-actions { display: none; }

  /* Panneau nav mobile */
  #site-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(320px, 85vw);
    height: 100%;
    background: var(--color-dark);
    z-index: 1001;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    padding: 5rem 2rem 2rem;
    transition: right .35s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    box-shadow: -8px 0 32px rgba(0,0,0,.4);
  }
  #site-nav.is-open { right: 0; }

  /* Items du menu mobile */
  #site-nav .nl {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
  }
  #site-nav .nl li { width: 100%; border-bottom: 1px solid rgba(255,255,255,.08); }
  #site-nav .nl a {
    display: block;
    padding: 1rem 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: rgba(255,255,255,.85);
  }
  #site-nav .nl a::after { display: none; }
  #site-nav .nl a:hover { color: var(--color-accent); }

  /* Switcher de langue + CTA dans le panneau */
  .mobile-nav-footer {
    display: flex !important;
    margin-top: auto;
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-top: 1px solid rgba(255,255,255,.1);
  }
  .mobile-nav-footer .osmeo-lang { justify-content: flex-start; }
  .mobile-nav-footer .btn { width: 100%; text-align: center; justify-content: center; }
}


/* Principe de fonctionnement — grille responsive */
.principe-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  align-items: start;
}
.kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 900px) {
  .principe-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .principe-grid figure { order: -1; }
}
@media (max-width: 576px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .kpi-grid > div { padding: 1rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE FIXES — Mobile (corrections capture écran mobile)
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero ── */
@media (max-width: 992px) {
  .hc { padding-top: calc(var(--hh) + 3.5rem); padding-bottom: 4rem; }
  .htitle { font-size: clamp(1.8rem, 6vw, 2.8rem); }
  .hben { grid-template-columns: repeat(2, 1fr); }
  .hcta { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .hcta .btn { width: 100%; text-align: center; justify-content: center; }
  .hero { min-height: auto; }
}

@media (max-width: 576px) {
  .hben { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .hb { gap: .5rem; }
  .hbi { width: 36px; height: 36px; }
  .hbi img { width: 36px; height: 36px; }
  .hbt { font-size: .78rem; }
}

/* ── Principe (section avec grille inline non responsive) ── */
@media (max-width: 992px) {
}

@media (max-width: 576px) {
}

/* ── Stats ── */
@media (max-width: 576px) {
  .sg { grid-template-columns: 1fr; gap: 0; }
  .si { padding: 1.5rem 0; }
  .si + .si::before { display: none; }
  .si { border-bottom: 1px solid var(--color-border); }
}

/* ── About — image circles ── */
@media (max-width: 992px) {
  .aimgs { order: -1; }
  
  
  
  
  
}

@media (max-width: 576px) {
  
  
  
  
  
}

/* ── Features cards ── */
@media (max-width: 992px) {
  .fg { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
  .fg { grid-template-columns: 1fr; }
}

/* ── Solutions ── */
@media (max-width: 992px) {
  .scards { grid-template-columns: 1fr; max-width: 100%; }
  .sc3 { padding: 1.75rem; }
}

/* ── Galerie ── */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 6px;
  }
  .gi:nth-child(1) { grid-column: span 2; height: 200px; }
  .gi:nth-child(n+2) { height: 150px; }
}

@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .gi:nth-child(1) { grid-column: span 1; height: 200px; }
  .gi { height: 180px; }
}

/* ── Contact formulaire ── */
@media (max-width: 768px) {
  /* Les paires de champs passent en colonne */
  .fr {
    flex-direction: column !important;
  }
  /* Prefix + tel passent en ligne (garder) */
  .fr > .fg2:has(select[name="indicatif"]) {
    flex-direction: row;
  }
  /* Select indicatif moins large sur mobile */
  select[name="indicatif"] {
    flex: 0 0 90px !important;
  }
  /* Champs full width */
  .fg2 { width: 100%; }
}

/* ── Footer ── */
@media (max-width: 768px) {
  .ftg {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .ftg > div:first-child {
    grid-column: span 2;
  }
}

@media (max-width: 480px) {
  .ftg {
    grid-template-columns: 1fr;
  }
  .ftg > div:first-child {
    grid-column: span 1;
  }
}

/* ── Gravity Forms mobile ── */
@media (max-width: 768px) {
  .gf-wrapper .gform_fields { gap: .75rem; }
  .gf-wrapper .gform_button,
  .gf-wrapper input[type="submit"] {
    padding: .75rem 1.5rem !important;
  }
}

/* ── Textes généraux mobile ── */
@media (max-width: 576px) {
  h2 { font-size: clamp(1.4rem, 5vw, 2rem); }
  .sec-about, .sec-feat, .sec-sol, .sec-contact, .sec-gallery {
    padding: 4rem 0;
  }
  .sec-test { padding: 4rem 0; }
  #principe { padding: 4rem 0 !important; }
  #video { padding: 4rem 0 !important; }
  .sh { margin-bottom: 2rem; }
  .sc3 { padding: 1.5rem; }
}

/* ── Débordements généraux ── */
* { box-sizing: border-box; }
.container { width: 100%; }
img { max-width: 100%; height: auto; }

/* ── Video wrapper ── */
@media (max-width: 768px) {
  .video-frame { border-radius: var(--r-sm); }
  .video-caption { font-size: .85rem; }
}

/* ── Témoignage ── */
@media (max-width: 576px) {
  .tq { font-size: 1rem; }
  .th { font-size: clamp(1.3rem, 5vw, 1.8rem); }
  .tau { gap: .75rem; }
}

/* ── Burger header actions visibility ── */
@media (max-width: 992px) {
  .header-actions { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   CORRECTIONS — Burger / GF / WPML footer / Divers
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Burger aligné à droite (push avec margin-left:auto) ── */
@media (max-width: 992px) {
  .burger { margin-left: auto; }
  /* S'assurer que le nav WP ne bloque pas l'espace */
  .site-header nav:not(#site-nav) { display: none !important; }
}

/* ── 2. Cacher le sélecteur de langue WPML en double (footer automatique) ── */
/* WPML peut injecter son widget automatiquement — on le masque proprement */
.wpml-ls-legacy-list-horizontal,
.wpml-ls-legacy-dropdown,
.wpml-ls-statics-footer,
#lang_sel_footer,
.lang_sel_footer,
#lang-footer,
.wpml-ls:not(.osmeo-lang) {
  display: none !important;
}
/* Sauf dans notre switcher .osmeo-lang */
.osmeo-lang .wpml-ls { display: flex !important; }

/* ── 3. Gravity Forms — masquer le titre du formulaire ── */
.gform_wrapper .gform_title,
.gform_wrapper h3.gform_title,
.gf-wrapper .gform_title {
  display: none !important;
}
/* Aussi masquer la description optionnelle GF */
.gf-wrapper .gform_description {
  display: none !important;
}

/* ── 4. Gravity Forms bouton vert (toutes variantes GF) ── */
.gform_wrapper .gform_footer input.button,
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_page_footer input.button,
.gform_wrapper .gform_page_footer input[type="submit"],
.gform_wrapper input.gform_button[type="submit"],
.gf-wrapper .gform_button,
.gf-wrapper input[type="submit"] {
  background-color: #8dc63f !important;
  background: #8dc63f !important;
  color: #1a2b3c !important;
  border-color: #8dc63f !important;
}
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gf-wrapper .gform_button:hover,
.gf-wrapper input[type="submit"]:hover {
  background-color: #7ab232 !important;
  background: #7ab232 !important;
}

/* ── Back to top — règle unique consolidée ── */
#osmeo-back-to-top {
  position:   fixed !important;
  bottom:     28px !important;
  right:      28px !important;
  width:      48px;
  height:     48px;
  border-radius: 50%;
  background: var(--color-primary);
  color:      #fff;
  border:     none;
  display:    flex;
  align-items:     center;
  justify-content: center;
  cursor:     pointer;
  box-shadow: 0 4px 16px rgba(26,43,60,.35);
  opacity:    0 !important;
  visibility: hidden !important;
  transform:  translateY(10px);
  transition: opacity .3s, transform .3s, visibility .3s, background .2s;
  z-index:    9999 !important;
}
#osmeo-back-to-top.visible {
  opacity:    1 !important;
  visibility: visible !important;
  transform:  translateY(0) !important;
}
#osmeo-back-to-top:hover {
  background: var(--color-accent);
}
@media (max-width: 640px) {
  #osmeo-back-to-top {
    bottom: 18px !important;
    right:  18px !important;
    width:  44px;
    height: 44px;
  }
}
/* ═══════════════════════════════════════════════════════════
   CLUSTER 4 BULLES — Section Notre technologie
   Disposition :
     [1 grande]          [2 petite]
          [4 petite]  [3 grande]
   ═══════════════════════════════════════════════════════════ */
.acluster {
  position: relative;
  width: 440px;
  height: 480px;
  flex-shrink: 0;
}

/* Base commune à toutes les bulles */
.aimg {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--color-accent);
  box-shadow: 0 8px 28px rgba(26,43,60,.18);
  background: var(--color-light-bg);
}
.aimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bulle 1 — grande, haut gauche */
.aimg-1 {
  width:  240px;
  height: 240px;
  top:    60px;
  left:   0;
  animation: floatBubble 6s ease-in-out infinite;
}
/* Bulle 2 — petite, haut droite */
.aimg-2 {
  width:  160px;
  height: 160px;
  top:    0;
  right:  30px;
  animation: floatBubble 5s ease-in-out infinite;
  animation-delay: -1.5s;
}
/* Bulle 3 — grande, bas droite */
.aimg-3 {
  width:  230px;
  height: 230px;
  bottom: 0;
  right:  0;
  animation: floatBubble 7s ease-in-out infinite;
  animation-delay: -3s;
}
/* Bulle 4 — petite, bas gauche */
.aimg-4 {
  width:  145px;
  height: 145px;
  bottom: 40px;
  left:   20px;
  animation: floatBubble 5.5s ease-in-out infinite;
  animation-delay: -2s;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .acluster { width: 380px; height: 420px; }
  .aimg-1   { width: 210px; height: 210px; top: 50px; left: 0; }
  .aimg-2   { width: 138px; height: 138px; top: 0;    right: 20px; }
  .aimg-3   { width: 200px; height: 200px; bottom: 0; right: 0; }
  .aimg-4   { width: 125px; height: 125px; bottom: 35px; left: 15px; }
}
@media (max-width: 992px) {
  .aimgs    { order: -1; }
  .acluster { width: 340px; height: 370px; margin: 0 auto; }
  .aimg-1   { width: 185px; height: 185px; top: 45px; left: 0; }
  .aimg-2   { width: 120px; height: 120px; top: 0;    right: 15px; }
  .aimg-3   { width: 180px; height: 180px; bottom: 0; right: 0; }
  .aimg-4   { width: 110px; height: 110px; bottom: 30px; left: 10px; }
}
@media (max-width: 576px) {
  .acluster { width: 280px; height: 300px; }
  .aimg-1   { width: 150px; height: 150px; top: 35px; left: 0; }
  .aimg-2   { width:  95px; height:  95px; top: 0;    right: 10px; }
  .aimg-3   { width: 145px; height: 145px; bottom: 0; right: 0; }
  .aimg-4   { width:  88px; height:  88px; bottom: 25px; left: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .aimg-1, .aimg-2, .aimg-3, .aimg-4 { animation: none; }
}