/* Auto Cleane — bannière avant/après interactive */
.ac-hero{position:relative;width:100%;isolation:isolate;background:#050805;color:#f8faf7;overflow:hidden;border-bottom:1px solid rgba(130,255,20,.65)}
.ac-hero__scene{position:relative;min-height:300px;height:300px;overflow:hidden;background:#050805}
.ac-hero__photo{position:absolute;inset:0;overflow:hidden}
.ac-hero__photo img{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;object-position:center 53%;display:block}
.ac-hero__photo--clean{z-index:0}
.ac-hero__photo--dirty{z-index:1;clip-path:inset(0 50% 0 0)}
.ac-hero__shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.64) 23%,rgba(0,0,0,.14) 47%,rgba(0,0,0,.10) 65%,rgba(0,0,0,.76) 100%),linear-gradient(0deg,rgba(0,0,0,.35),transparent 25%,transparent 75%,rgba(0,0,0,.12))}
.ac-hero__brand{position:absolute;z-index:3;left:clamp(18px,3.2vw,70px);top:11%;width:min(34%,570px);text-shadow:0 2px 16px #000}
.ac-hero__logo-mark{position:absolute;left:0;top:-15px;font-size:clamp(34px,5vw,84px);font-weight:1000;font-style:italic;line-height:1;color:#7dff16;opacity:.95;text-shadow:0 0 22px rgba(118,255,0,.7)}
.ac-hero__brand-name{position:relative;margin-top:clamp(36px,5vw,82px);font-size:clamp(28px,4.2vw,76px);line-height:.9;letter-spacing:-.055em;font-weight:1000;font-style:italic;white-space:nowrap}
.ac-hero__brand-name span{color:#77f51b}
.ac-hero__brand-sub{margin-top:12px;font-size:clamp(9px,1vw,17px);letter-spacing:.13em;font-weight:800;white-space:nowrap}
.ac-hero__since{display:flex;align-items:center;gap:12px;margin-top:12px;color:#7cff19;font-size:clamp(10px,1.1vw,19px);font-weight:900;letter-spacing:.18em;white-space:nowrap}
.ac-hero__since span{height:2px;background:#7cff19;flex:1;box-shadow:0 0 9px #7cff19}
.ac-hero__features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(20px,3vw,52px);border-top:1px solid rgba(124,255,25,.25)}
.ac-hero__feature{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 5px 0;border-right:1px solid rgba(255,255,255,.18);gap:4px}
.ac-hero__feature:last-child{border-right:0}
.ac-hero__feature-icon{font-size:clamp(23px,2.5vw,42px);line-height:1.1;color:#7cff19}
.ac-hero__feature b{font-size:clamp(8px,.78vw,13px);line-height:1.2}
.ac-hero__feature small{font-size:clamp(7px,.65vw,11px);line-height:1.35;font-weight:700}
.ac-hero__copy{position:absolute;z-index:3;right:clamp(18px,3.3vw,74px);top:19%;width:min(25%,490px);text-shadow:0 2px 16px #000}
.ac-hero__eyebrow{font-size:clamp(8px,.75vw,13px);font-weight:900;letter-spacing:.2em;color:#8aff26;margin:0 0 15px}
.ac-hero__copy h1{margin:0;font-size:clamp(20px,2.25vw,42px);line-height:1.08;font-weight:950;letter-spacing:-.025em}
.ac-hero__copy h1 span{color:#7cff19}
.ac-hero__script{font-family:"Brush Script MT","Segoe Script",cursive;font-style:italic;font-size:clamp(25px,3.1vw,55px);line-height:1;margin:24px 0 0;white-space:nowrap}
.ac-hero__underline{width:72%;height:5px;margin:10px 0 0 10%;background:#7cff19;transform:rotate(-5deg);border-radius:100%;box-shadow:0 0 15px rgba(124,255,25,.8)}
.ac-hero__hint{font-size:clamp(9px,.78vw,13px);line-height:1.4;color:#e2eadf;margin:24px 0 16px}
.ac-hero__cta{display:inline-flex;align-items:center;gap:18px;background:linear-gradient(135deg,#9cff35,#4fca08);color:#071004;text-decoration:none;font-size:clamp(9px,.8vw,13px);font-weight:950;padding:13px 18px;border-radius:8px;box-shadow:0 0 22px rgba(114,255,0,.22);transition:transform .2s,filter .2s}
.ac-hero__cta:hover{transform:translateY(-2px);filter:brightness(1.08)}
.ac-hero__cta span{font-size:20px}
.ac-hero__labels{position:absolute;z-index:4;inset:12px 0 auto;display:flex;justify-content:space-between;pointer-events:none}
.ac-hero__label{font-size:11px;font-weight:950;letter-spacing:.2em;padding:7px 12px;background:rgba(0,0,0,.72);border:1px solid rgba(124,255,25,.55);border-radius:3px}
.ac-hero__label--dirty{margin-left:calc(50% - 70px)}
.ac-hero__label--clean{margin-right:calc(50% - 70px);color:#9aff4a}
.ac-hero__divider{position:absolute;z-index:5;top:0;bottom:0;left:50%;width:3px;transform:translateX(-50%);background:#a3ff36;box-shadow:0 0 10px #70ff00,0 0 30px rgba(112,255,0,.8);pointer-events:none}
.ac-hero__handle{position:absolute;z-index:6;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border:3px solid #a5ff39;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:4px;background:#050805;color:#8cff20;font-size:30px;font-weight:900;box-shadow:0 0 0 5px rgba(0,0,0,.5),0 0 24px rgba(124,255,25,.75);pointer-events:none}
.ac-hero__range{position:absolute;z-index:7;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.ac-hero__range:focus-visible{opacity:.01;outline:3px solid #a5ff39;outline-offset:-5px}
.ac-hero__bottom-line{position:absolute;z-index:8;left:0;right:0;bottom:0;height:2px;background:#82ff1b;box-shadow:0 0 15px #82ff1b;pointer-events:none}
@media(max-width:900px){
 .ac-hero__scene{height:350px;min-height:350px}
 .ac-hero__photo img{object-position:center center}
 .ac-hero__brand{top:7%;left:4%;width:43%}
 .ac-hero__copy{top:auto;bottom:8%;right:4%;width:43%}
 .ac-hero__brand-name{font-size:clamp(26px,5.3vw,48px)}
 .ac-hero__brand-sub{white-space:normal;line-height:1.3}
 .ac-hero__features{margin-top:20px}
 .ac-hero__feature small{font-size:8px}
 .ac-hero__copy h1{font-size:clamp(19px,3.6vw,32px)}
 .ac-hero__script{font-size:clamp(26px,4vw,38px);margin-top:14px}
 .ac-hero__hint{margin-top:16px}
}
@media(max-width:560px){
 .ac-hero__scene{height:400px;min-height:400px}
 .ac-hero__photo img{object-position:center center}
 .ac-hero__shade{background:linear-gradient(180deg,rgba(0,0,0,.83) 0%,rgba(0,0,0,.4) 36%,rgba(0,0,0,.12) 54%,rgba(0,0,0,.88) 100%)}
 .ac-hero__brand{left:18px;right:18px;top:22px;width:auto}
 .ac-hero__logo-mark{font-size:35px;top:-7px}
 .ac-hero__brand-name{margin-top:34px;font-size:clamp(31px,9vw,44px)}
 .ac-hero__brand-sub{font-size:9px;letter-spacing:.08em;margin-top:7px}
 .ac-hero__since{font-size:11px;margin-top:8px}
 .ac-hero__features{margin-top:12px}
 .ac-hero__feature{padding:7px 2px 0}
 .ac-hero__feature-icon{font-size:23px}
 .ac-hero__feature b{font-size:7px}
 .ac-hero__feature small{font-size:6px}
 .ac-hero__copy{left:18px;right:18px;bottom:22px;top:auto;width:auto}
 .ac-hero__eyebrow{margin-bottom:8px;font-size:9px}
 .ac-hero__copy h1{font-size:clamp(24px,7.2vw,34px)}
 .ac-hero__script{font-size:34px;margin-top:10px}
 .ac-hero__underline{height:4px;margin-top:5px}
 .ac-hero__hint{font-size:10px;margin:13px 0 10px}
 .ac-hero__cta{font-size:10px;padding:11px 13px}
 .ac-hero__labels{top:10px}
 .ac-hero__label{font-size:8px;padding:5px 7px}
 .ac-hero__label--dirty{margin-left:calc(50% - 58px)}
 .ac-hero__label--clean{margin-right:calc(50% - 58px)}
 .ac-hero__handle{width:44px;height:44px;font-size:24px}
}
@media(prefers-reduced-motion:reduce){.ac-hero__cta{transition:none}}



/* Mise en page compacte du bandeau */
.ac-hero__brand-name { margin-top: 0; }
.ac-hero__features { margin-top: 12px; }
.ac-hero__copy { top: 12%; }
.ac-hero__eyebrow { margin-bottom: 8px; }
.ac-hero__script { margin-top: 8px; }
.ac-hero__hint { margin-top: 8px; margin-bottom: 0; }

@media(max-width:900px) {
  .ac-hero__copy { top: auto; bottom: 16px; }
  .ac-hero__brand-name { margin-top: 0; }
}

@media(max-width:560px) {
  .ac-hero__brand { top: 12px; }
  .ac-hero__brand-name { margin-top: 0; font-size: 30px; }
  .ac-hero__brand-sub { margin-top: 5px; }
  .ac-hero__since { margin-top: 5px; }
  .ac-hero__features { margin-top: 7px; }
  .ac-hero__feature-icon { font-size: 19px; }
  .ac-hero__copy { left: 12px; right: 12px; bottom: 12px; }
  .ac-hero__copy h1 { font-size: 22px; }
  .ac-hero__script { font-size: 25px; margin-top: 4px; }
  .ac-hero__hint { font-size: 9px; margin-top: 5px; }
}

/* MOBILE : bandeau compact, ordinateur inchangé */
@media (max-width: 560px) {
  .ac-hero__scene {
    height: 240px !important;
    min-height: 240px !important;
  }

  .ac-hero__brand {
    top: 8px !important;
  }

  .ac-hero__brand-name {
    margin-top: 0 !important;
    font-size: 23px !important;
    line-height: 1.05 !important;
  }

  .ac-hero__brand-sub {
    margin-top: 2px !important;
    font-size: 8px !important;
  }

  .ac-hero__since {
    margin-top: 3px !important;
    font-size: 9px !important;
  }

  .ac-hero__features {
    margin-top: 5px !important;
  }

  .ac-hero__feature-icon {
    font-size: 15px !important;
  }

  .ac-hero__copy {
    left: 10px !important;
    right: 10px !important;
    bottom: 8px !important;
  }

  .ac-hero__eyebrow {
    margin-bottom: 3px !important;
    font-size: 8px !important;
  }

  .ac-hero__copy h1 {
    font-size: 17px !important;
    line-height: 1.05 !important;
    margin: 0 !important;
  }

  .ac-hero__script {
    font-size: 20px !important;
    line-height: 1.05 !important;
    margin-top: 2px !important;
  }

  .ac-hero__hint {
    font-size: 8px !important;
    margin-top: 3px !important;
  }
}

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

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

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

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


/* Auto Cleane : bannière panoramique responsive */
.ac-banner {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #000;
    line-height: 0;
}
.ac-banner img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    margin: 0;
}
@media (max-width: 600px) {
    .ac-banner img {
        width: 100%;
        height: auto;
    }
}

/* Bannière panoramique compacte */
.ac-banner {
    display: block !important;
    width: 100% !important;
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000 !important;
    line-height: 0 !important;
}
.ac-banner img {
    display: block !important;
    width: 100% !important;
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
}
@media (max-width: 600px) {
    .ac-banner,
    .ac-banner img {
        height: 65px !important;
        min-height: 65px !important;
        max-height: 65px !important;
    }
}

/* Afficher toute la bannière sans aucun recadrage */
.ac-banner {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    background: #000 !important;
}
.ac-banner img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
}
@media (max-width: 600px) {
    .ac-banner,
    .ac-banner img {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
}

/* Bannière Auto Cleane : taille réduite, image entière */
.ac-banner {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    line-height: 0 !important;
}
.ac-banner img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
}

/* Sur mobile, limiter la hauteur sans déformer l'image */
@media (max-width: 600px) {
    .ac-banner img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
}

/* FIX : réduire réellement la bannière sur ordinateur */
.ac-banner {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 300px !important;
    min-height: 0 !important;
    max-height: 300px !important;
    overflow: hidden !important;
    background: #000 !important;
    line-height: 0 !important;
}
.ac-banner img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 300px !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* Bannière adaptée aux écrans mobiles */
@media (max-width: 600px) {
    .ac-banner {
        height: auto !important;
        max-height: none !important;
    }
    .ac-banner img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }
}

/* BANNIÈRE AUTOCLEANE : pleine largeur sur ordinateur */
.ac-banner {
    display: block !important;
    width: 100% !important;
    height: 260px !important;
    min-height: 260px !important;
    max-height: 260px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000 !important;
    line-height: 0 !important;
}

.ac-banner img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
}

/* Sur mobile : garder toute l'image */
@media (max-width: 600px) {
    .ac-banner {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .ac-banner img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
}