/* ===== Flairat v2 : hero percutant, bento méthode, icônes 3D, bandeau CTA, footer géant, verre liquide, tarifs floutés ===== */

/* --- HERO --- */
.hero2{position:relative;background:#020304;padding:130px 0 70px;overflow:hidden;isolation:isolate}
.hero2 .hgrid{position:absolute;inset:0;z-index:0;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 80%)}
.hero2 .hglow{position:absolute;border-radius:50%;filter:blur(120px);z-index:0;pointer-events:none}
.hero2 .hg1{width:620px;height:520px;left:-220px;top:-120px;background:#0d6d73;opacity:.55}
.hero2 .hg2{width:560px;height:560px;right:-200px;bottom:-200px;background:#f28447;opacity:.35}
.hero2:after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(transparent,var(--bg));z-index:0;pointer-events:none}
.hwrap{display:grid;gap:34px;align-items:center;max-width:1260px}
.htxt{position:relative;z-index:2}
.hero2 h1{font-weight:850;font-size:clamp(2.75rem,11.4vw,6.1rem);line-height:.94;letter-spacing:-.055em;margin-top:22px}
.hero2 h1 .gt{display:block;filter:drop-shadow(0 0 40px rgba(242,132,71,.35))}
.hero2 h1 .kick{display:block;font-size:max(.8rem,.17em);letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--teal-l);line-height:1.3;margin-bottom:.5em}
.hero2 .tag{font-family:Montserrat,sans-serif;font-weight:600;letter-spacing:.32em;text-transform:uppercase;font-size:.72rem;color:var(--orange-l);margin-top:20px}
.hero2 .lead{color:#b9c3c8;max-width:52ch;font-size:clamp(1.02rem,2.3vw,1.2rem);margin-top:14px}
.hero2 .lead b{color:#fff}
.hero2 .cta{justify-content:flex-start;margin-top:28px}
.btn-xl{font-size:1.12rem;padding:1.05em 1.9em;font-weight:700}
.hero2 .btn-sun.btn-xl{box-shadow:0 0 0 1px rgba(255,209,131,.35),0 18px 60px -10px rgba(242,132,71,.9),inset 0 1px 0 rgba(255,255,255,.45)}
.hcall{margin-top:14px;color:var(--mute);font-size:.95rem}
.hcall a{color:#fff;font-weight:700;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.hero2 .ticks{justify-content:flex-start;margin-top:22px}
.hdog{position:relative;z-index:1;width:min(84vw,520px);aspect-ratio:1;margin:0 auto}
.hdog .ring{position:absolute;inset:-14px;border-radius:50%;background:conic-gradient(from 200deg,#5fc4c4,#03515d,#f28447,#ffd183,#5fc4c4);filter:blur(1px);opacity:.9;box-shadow:0 0 80px rgba(95,196,196,.35),0 0 120px rgba(242,132,71,.3)}
.hdog .ring:after{content:"";position:absolute;inset:4px;border-radius:50%;background:#020304}
.dogc{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#0b0d10}
.dogc img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;z-index:3;padding:9px 15px;border-radius:999px;font-size:.85rem;font-weight:600;color:#fff;white-space:nowrap;background:rgba(10,12,14,.62);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 30px rgba(0,0,0,.45)}
.badge b{font-weight:850;background:var(--sun);-webkit-background-clip:text;background-clip:text;color:transparent;margin-right:4px}
.badge.b1{left:-4%;top:14%}.badge.b2{right:-4%;top:46%}.badge.b3{left:10%;bottom:4%}
@media (prefers-reduced-motion:no-preference){.badge{animation:bob 6s ease-in-out infinite alternate}.badge.b2{animation-delay:-2s}.badge.b3{animation-delay:-4s}}
@keyframes bob{to{transform:translateY(-10px)}}
@media (min-width:1000px){
  .hero2{padding:150px 0 90px;min-height:min(100vh,940px);display:flex;align-items:center}
  .hero2>.wrap{width:100%}
  .hwrap{grid-template-columns:1.22fr .78fr;gap:40px}
  .hero2 h1{font-size:clamp(4.4rem,6.1vw,6.1rem)}
}
.vit{padding:10px 0 40px}
.vit .showcase{margin:0 auto}

/* --- ICÔNES 3D --- */
.i3d{width:64px;height:64px;position:relative;display:grid;place-items:center}
.i3d:before{content:"";position:absolute;inset:8% 8% -6%;border-radius:50%;background:radial-gradient(closest-side,rgba(95,196,196,.35),transparent);filter:blur(10px);z-index:0}
.g.o .i3d:before{background:radial-gradient(closest-side,rgba(242,132,71,.35),transparent)}
.i3d img{position:relative;z-index:1;width:100%;height:100%;filter:drop-shadow(0 10px 14px rgba(0,0,0,.45));transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.g:hover .i3d img{transform:translateY(-4px) rotate(-4deg) scale(1.06)}
.g.big .i3d{width:84px;height:84px}
/* icônes SVG restantes : rendu "verre 3D" */
.ico{background:radial-gradient(120% 90% at 30% 10%,rgba(255,255,255,.55),transparent 42%),linear-gradient(150deg,#7fd8d6,#1a8890 45%,#03515d);box-shadow:inset 0 2px 1px rgba(255,255,255,.55),inset 0 -6px 12px rgba(0,0,0,.35),0 10px 22px -6px rgba(0,0,0,.6),0 0 26px rgba(63,143,144,.45)}
.ico.o{background:radial-gradient(120% 90% at 30% 10%,rgba(255,255,255,.6),transparent 42%),linear-gradient(150deg,#ffd183,#fb986f 45%,#e2553f);box-shadow:inset 0 2px 1px rgba(255,255,255,.6),inset 0 -6px 12px rgba(120,30,10,.35),0 10px 22px -6px rgba(0,0,0,.6),0 0 26px rgba(242,132,71,.45)}
.ico svg{filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}

/* --- MÉTHODE BENTO --- */
.mbento{list-style:none;display:grid;gap:18px;margin-top:44px;grid-template-columns:1fr}
.mbento .g{padding:28px}
.mbento .n{position:absolute;top:22px;right:26px;font-weight:850;font-size:2.4rem;line-height:1;letter-spacing:-.05em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.9}
.t-flair{background:radial-gradient(90% 70% at 85% 0%,rgba(95,196,196,.28),transparent 60%),radial-gradient(70% 60% at 0% 100%,rgba(242,132,71,.22),transparent 60%),rgba(12,16,18,.7)}
.t-flair .i3d-xl{width:150px;height:150px;filter:drop-shadow(0 18px 24px rgba(0,0,0,.5)) drop-shadow(0 0 40px rgba(95,196,196,.35))}
.t-flair h3{font-size:clamp(1.7rem,3.4vw,2.5rem)!important;margin-top:20px}
.t-flair p{font-size:1.05rem;max-width:44ch}
.t-flair .n{font-size:4rem}
.t-poison{background:linear-gradient(145deg,#f26f62,#fb986f 45%,#ffd183);border-color:rgba(255,209,131,.5)}
.t-poison h3,.t-poison p{color:#1d0f08!important}
.t-poison p{opacity:.85}
.t-poison .stat{display:flex;align-items:baseline;gap:10px;position:relative}
.t-poison .stat b{font-size:clamp(4rem,9vw,6rem);font-weight:900;line-height:.85;letter-spacing:-.06em;color:#1d0f08}
.t-poison .stat span{font-weight:700;color:#3a1c0e;font-size:1rem;max-width:8ch;line-height:1.1}
.t-poison .i3d{position:absolute;right:20px;top:20px;width:80px;height:80px}
.t-poison:before{background:radial-gradient(400px 200px at var(--mx,80%) var(--my,0%),rgba(255,255,255,.35),transparent 70%)}
.t-reb{background:radial-gradient(80% 80% at 100% 0%,rgba(242,132,71,.22),transparent 60%),var(--glass)}
.t-suivi{background:radial-gradient(80% 80% at 0% 0%,rgba(74,141,183,.28),transparent 60%),var(--glass)}
@media (min-width:720px){
  .mbento{grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(150px,auto)}
  .t-flair{grid-column:span 6}
  .t-visite,.t-chasse{grid-column:span 3}
  .t-poison,.t-reb,.t-suivi{grid-column:span 2}
}
@media (min-width:1000px){
  .mbento{grid-template-areas:"flair flair flair visite visite visite" "flair flair flair chasse chasse chasse" "poison poison reb reb suivi suivi"}
  .t-flair{grid-area:flair;display:flex;flex-direction:column;justify-content:flex-end;min-height:440px}
  .t-flair .i3d-xl{position:absolute;right:30px;top:26px;width:180px;height:180px}
  .t-flair .n{left:28px;right:auto;top:26px}
  .t-visite{grid-area:visite}.t-chasse{grid-area:chasse}.t-poison{grid-area:poison}.t-reb{grid-area:reb}.t-suivi{grid-area:suivi}
  .t-flair .list,.t-flair p{max-width:62%}
}

/* --- TARIFS FLOUTÉS --- */
.plock{position:relative}
.js .plock.is-locked .prices,.js .plock.is-locked .launch{filter:blur(10px) saturate(.8);-webkit-user-select:none;user-select:none;cursor:pointer}
.js .plock .prices,.js .plock .launch{transition:filter .8s cubic-bezier(.2,.7,.2,1)}
.js .plock.is-locked .pbox:focus-visible,.js .plock.is-locked .launch:focus-visible{outline:3px solid var(--orange-l);outline-offset:4px}
.plock-ov{display:none}
.js .plock-ov{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;position:absolute;inset:0;z-index:5;padding-top:clamp(60px,12vw,140px);pointer-events:none;transition:opacity .5s}
.plock-c{position:sticky;top:clamp(110px,38vh,360px);display:flex;flex-direction:column;align-items:center;gap:12px}
.js .plock-ov .plock-btn{pointer-events:auto;font-size:1.1rem;padding:1em 1.8em}
.plock-note{color:#e7ecee;font-size:.92rem;text-align:center;text-shadow:0 2px 12px #000;padding:0 20px;margin:0}
.js .plock:not(.is-locked) .plock-ov{opacity:0;visibility:hidden}

/* --- BANDEAU CTA --- */
.ctaband{padding:30px 0 70px}
.cb-in{position:relative;margin:0 12px;border-radius:32px;overflow:hidden;padding:clamp(56px,9vw,120px) 0;text-align:center;
  background:radial-gradient(60% 80% at 20% 0%,rgba(255,255,255,.18),transparent 60%),linear-gradient(120deg,#03515d 0%,#137a82 28%,#7aa7a6 50%,#f6a27a 72%,#f28447 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 40px 100px -30px rgba(242,132,71,.5)}
.cb-in:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,.18) 1px,transparent 1px);background-size:18px 18px;opacity:.5;-webkit-mask-image:linear-gradient(transparent,#000);mask-image:linear-gradient(transparent,#000)}
.cb-shine{position:absolute;inset:-50%;background:conic-gradient(from 0deg,transparent 0 70%,rgba(255,255,255,.18) 80%,transparent 90%);pointer-events:none}
@media (prefers-reduced-motion:no-preference){.cb-shine{animation:spin 14s linear infinite}}
@keyframes spin{to{transform:rotate(1turn)}}
.cb-k{position:relative;font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:#04262b}
.ctaband h2{position:relative;font-size:clamp(2.6rem,9.5vw,8rem);line-height:.92;letter-spacing:-.06em;font-weight:900;color:#fff;margin-top:18px;text-shadow:0 6px 40px rgba(0,0,0,.25)}
.ctaband h2 span{color:#1a0e07}
.cb-btns{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:36px}
.btn-dark{background:#07090b;color:#fff;border-color:rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 16px 40px -10px rgba(0,0,0,.6)}
.btn-dark:hover{background:#000}
.btn-dark:focus-visible{outline:3px solid #fff;outline-offset:3px}
.cb-s{position:relative;margin-top:18px;color:#0b2a2e;font-weight:600}
@media (min-width:1000px){.cb-in{margin:0 24px}}

/* --- FOOTER GÉANT --- */
footer.f2{padding:64px 0 0;overflow:hidden}
.f2 .fgrid{gap:30px}
.f2 .fzones li{color:#c9d1d5}
.f2 .fzones b{color:#fff}
@media (min-width:720px){.f2 .fgrid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.f2 .fgrid{grid-template-columns:1.5fr 1fr 1.2fr 1.3fr}}
.fword{position:relative;z-index:0;text-align:center;font-family:Montserrat,Inter,sans-serif;font-weight:900;font-size:21.5vw;line-height:.78;letter-spacing:-.04em;margin:34px 0 -0.06em;white-space:nowrap;user-select:none;pointer-events:none;
  background:linear-gradient(180deg,rgba(95,196,196,.55) 0%,rgba(242,132,71,.35) 55%,rgba(5,5,7,0) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.f2 .copy{position:relative;z-index:1}

/* --- VERRE LIQUIDE (loupe) --- */
[data-lens]{position:relative}
.lens{position:absolute;left:0;top:0;width:190px;height:190px;margin:-95px 0 0 -95px;border-radius:50%;overflow:hidden;pointer-events:none;z-index:4;opacity:0;transform:scale(.6);transition:opacity .25s,transform .35s cubic-bezier(.2,.9,.3,1.3);will-change:left,top}
.lens.on{opacity:1;transform:scale(1)}
.lens .lz{position:absolute;inset:-12px;background-repeat:no-repeat;filter:url(#flairat-refract) saturate(1.15) contrast(1.05)}
.lens:after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(42% 26% at 34% 16%,rgba(255,255,255,.32),rgba(255,255,255,0) 70%),radial-gradient(closest-side,transparent 84%,rgba(255,255,255,.12) 94%,rgba(255,255,255,.4) 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5),inset 0 -10px 24px rgba(95,196,196,.35),inset 0 10px 24px rgba(242,132,71,.25),0 18px 40px rgba(0,0,0,.45)}
[data-lens].lens-active{cursor:none}
.showcase .cap{z-index:5}