/*
  style-extra.css — généré depuis style.css
  CSS des sections absentes de cette landing minimale (FAQ, avis, specs,
  garantie, shipping, comparaison, before/after, exit-intent, etc.).
  Chargé en asynchrone : ne bloque pas le rendu critique (LCP/FCP).
*/

.announce{
  background:linear-gradient(90deg,var(--brand-dark),var(--brand),var(--brand-dark));
  background-size:200% 100%;
  animation:slideBg 9s linear infinite;
  color:#fff; position:relative; z-index:60;
}

@keyframes slideBg{ to{ background-position:200% 0; } }

.announce__in{
  min-height:var(--announce-h);
  display:flex; align-items:center; justify-content:center; gap:14px;
  flex-wrap:wrap; padding-block:8px; text-align:center;
}

.announce__txt{ font-weight:800; font-size:.9rem; }

.announce__txt b{ text-decoration:underline; text-underline-offset:3px; }

.countdown{ display:inline-flex; align-items:center; gap:5px; direction:ltr; }

.cd-box{
  background:rgba(16,23,32,.14); border-radius:8px;
  min-width:40px; padding:4px 6px; text-align:center;
  font-weight:800; font-size:1rem; font-variant-numeric:tabular-nums;
  display:flex; flex-direction:column; line-height:1.05;
}

.cd-box small{ font-size:.52rem; font-weight:700; opacity:.82; letter-spacing:.05em; }

.cd-sep{ font-weight:800; opacity:.7; }

.badge-off{
  background:var(--danger); color:#fff; font-weight:800; font-size:.82rem;
  padding:5px 12px; border-radius:var(--r-pill); box-shadow:0 6px 18px rgba(244,69,60,.34);
}

.pain{ display:grid; gap:18px; }

.pain__col{
  border-radius:var(--r-lg); padding:26px 22px; border:1px solid var(--line);
}

.pain__col--bad{ background:rgba(244,69,60,.05); border-color:rgba(244,69,60,.22); }

.pain__col--good{ background:rgba(40,199,101,.05); border-color:rgba(40,199,101,.24); }

.pain__col h3{ font-size:1.14rem; margin-bottom:18px; display:flex; align-items:center; gap:10px; }

.pain__col--bad h3{ color:#FF7B74; }

.pain__col--good h3{ color:var(--ok); }

.pain__col h3 svg{ width:24px; height:24px; flex:none; }

.pain__list{ display:grid; gap:13px; }

.pain__list li{ display:flex; gap:11px; font-size:.94rem; color:var(--text-2); align-items:flex-start; }

.pain__list li svg{ width:18px; height:18px; flex:none; margin-top:3px; }

.pain__col--bad li svg{ color:var(--danger); }

.pain__col--good li svg{ color:var(--ok); }

.feat{ display:grid; gap:26px; align-items:center; margin-bottom:56px; }

.feat:last-child{ margin-bottom:0; }

.feat__media{
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line-2);
  background:var(--surface); box-shadow:var(--sh-2); position:relative;
}

.feat__media img{ width:100%; aspect-ratio:1/1; object-fit:cover; }

.feat__tag{
  position:absolute; top:14px; inset-inline-start:14px;
  background:var(--glass); backdrop-filter:blur(8px);
  border:1px solid var(--line-2); color:var(--brand-2);
  font-size:.74rem; font-weight:800; padding:6px 13px; border-radius:var(--r-pill);
}

.feat__body h3{ font-size:clamp(1.3rem,4vw,1.75rem); margin-bottom:12px; }

.feat__body h3 em{ font-style:normal; color:var(--brand-ink); }

.feat__body > p{ color:var(--muted); margin-bottom:18px; font-size:1rem; }

.feat__stats{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }

.stat{
  background:var(--surface-2); border:1px solid var(--line-2);
  border-radius:var(--r); padding:12px 18px; flex:1; min-width:118px;
}

.stat b{ display:block; font-size:1.5rem; color:var(--brand-ink); line-height:1.1; }

.stat span{ font-size:.76rem; color:var(--muted); font-weight:700; }

.steps{ display:grid; gap:16px; counter-reset:s; }

.step{
  display:flex; gap:18px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:22px; transition:all var(--t);
}

.step:hover{ border-color:var(--brand-ink); transform:translateX(0) translateY(-3px); }

.step__n{
  flex:none; width:46px; height:46px; border-radius:14px;
  background:linear-gradient(135deg,var(--brand-2),var(--brand));
  color:#fff; display:grid; place-items:center;
  font-size:1.24rem; font-weight:800; box-shadow:var(--sh-brand);
}

.step h3{ font-size:1.04rem; margin-bottom:6px; }

.step p{ color:var(--muted); font-size:.92rem; }

.step__time{
  display:inline-flex; align-items:center; gap:6px; margin-top:9px;
  font-size:.75rem; font-weight:800; color:var(--ok);
  background:var(--ok-soft); border:1px solid rgba(40,199,101,.28);
  padding:4px 11px; border-radius:var(--r-pill);
}

.specs{
  border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; background:var(--surface);
}

.specs tr{ border-bottom:1px solid var(--line); }

.specs tr:last-child{ border-bottom:0; }

.specs tr:nth-child(odd){ background:rgba(255,255,255,.014); }

.specs td{ padding:15px 20px; font-size:.94rem; }

.specs td:first-child{ color:var(--muted); font-weight:700; width:52%; }

.specs td:last-child{ color:var(--text); font-weight:800; }

.specs tr:hover{ background:var(--brand-soft); }

.boxgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }

.boxitem{
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:15px; transition:all var(--t);
}

.boxitem:hover{ border-color:var(--brand-ink); background:var(--surface-2); }

.boxitem__ico{
  flex:none; width:40px; height:40px; border-radius:11px;
  background:var(--brand-soft); color:var(--brand-ink);
  display:grid; place-items:center; border:1px solid rgba(255,90,31,.2);
}

.boxitem__ico svg{ width:20px; height:20px; }

.boxitem span{ font-size:.87rem; font-weight:700; line-height:1.35; }

.compare-wrap{ overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--line); }

.compare{ min-width:520px; background:var(--surface); }

.compare th,.compare td{ padding:15px 16px; text-align:center; border-bottom:1px solid var(--line); font-size:.9rem; }

.compare thead th{
  background:var(--surface-2); font-weight:800; font-size:.86rem;
  position:sticky; top:0;
}

.compare thead th:nth-child(2){ background:var(--brand-soft); color:var(--brand-2); }

.compare tbody td:first-child,.compare thead th:first-child{
  text-align:start; font-weight:700; color:var(--text-2); min-width:180px;
}

.compare tbody td:nth-child(2){ background:rgba(255,90,31,.055); font-weight:800; color:#fff; }

.compare tbody tr:last-child td{ border-bottom:0; }

.compare .yes{ color:var(--ok); }

.compare .no{ color:var(--danger); }

.compare svg{ width:19px; height:19px; display:inline-block; vertical-align:middle; }

.compare__crown{
  display:inline-flex; align-items:center; gap:6px; justify-content:center;
}

.ba{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line-2); aspect-ratio:16/10; user-select:none;
  box-shadow:var(--sh-2); cursor:ew-resize; background:var(--surface);
  max-width:820px; margin-inline:auto;
}

.ba__layer{ position:absolute; inset:0; }

.ba__layer img{ width:100%; height:100%; object-fit:cover; }

.ba__layer--after{ clip-path:inset(0 0 0 50%); }

.ba__label{
  position:absolute; bottom:14px; z-index:3;
  background:var(--glass); backdrop-filter:blur(8px);
  border:1px solid var(--line-2); padding:7px 15px;
  border-radius:var(--r-pill); font-size:.8rem; font-weight:800;
}

.ba__label--before{ inset-inline-start:14px; color:#FF7B74; }

.ba__label--after{ inset-inline-end:14px; color:var(--ok); }

.ba__handle{
  position:absolute; top:0; bottom:0; left:50%; width:3px;
  background:#fff; z-index:4; transform:translateX(-50%);
  box-shadow:0 0 20px rgba(16,23,32,.25);
}

.ba__knob{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%;
  background:#fff; color:var(--bg); display:grid; place-items:center;
  box-shadow:0 6px 20px rgba(16,23,32,.21);
}

.ba__knob svg{ width:22px; height:22px; }

.videoblock{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line-2); background:var(--surface);
  aspect-ratio:16/9; box-shadow:var(--sh-3); max-width:900px; margin-inline:auto;
}

.videoblock img,.videoblock video,.videoblock iframe{ width:100%; height:100%; object-fit:cover; border:0; }

.rev-summary{
  display:grid; gap:20px; align-items:center;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:24px; margin-bottom:26px;
}

.rev-score{ text-align:center; }

.rev-score b{ font-size:3.2rem; font-weight:800; line-height:1; display:block; }

.rev-score .stars{ justify-content:center; margin-block:8px; }

.rev-score span{ color:var(--muted); font-size:.85rem; }

.rev-bars{ display:grid; gap:8px; }

.rev-bar{ display:flex; align-items:center; gap:10px; font-size:.82rem; }

.rev-bar .lbl{ width:38px; color:var(--muted); font-weight:700; flex:none; direction:ltr; }

.rev-bar .track{ flex:1; height:7px; background:var(--surface-3); border-radius:var(--r-pill); overflow:hidden; }

.rev-bar .fill{ height:100%; background:var(--gold); border-radius:var(--r-pill); transition:width 1s var(--e); }

.rev-bar .pct{ width:40px; text-align:end; color:var(--muted); font-weight:700; flex:none; direction:ltr; }

.reviews{ display:grid; gap:16px; }

.review{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:22px; transition:all var(--t);
}

.review:hover{ border-color:var(--line-2); box-shadow:var(--sh-2); transform:translateY(-3px); }

.review__head{ display:flex; align-items:center; gap:12px; margin-bottom:13px; }

.avatar{
  flex:none; width:46px; height:46px; border-radius:50%;
  background:linear-gradient(135deg,var(--brand-2),var(--brand-dark));
  color:#fff; display:grid; place-items:center; font-weight:800; font-size:1.05rem;
}

.review__meta{ flex:1; min-width:0; }

.review__meta b{ display:block; font-size:.95rem; }

.review__meta span{ font-size:.78rem; color:var(--muted); }

.badge-verified{
  display:inline-flex; align-items:center; gap:5px;
  background:var(--ok-soft); color:var(--ok); border:1px solid rgba(40,199,101,.28);
  font-size:.68rem; font-weight:800; padding:4px 9px; border-radius:var(--r-pill);
  flex:none;
}

.badge-verified svg{ width:11px; height:11px; }

.review .stars{ margin-bottom:10px; }

.review p{ color:var(--text-2); font-size:.93rem; }

.review__photo{
  margin-top:14px; border-radius:12px; overflow:hidden;
  border:1px solid var(--line-2); max-width:180px; cursor:zoom-in;
  transition:transform var(--t-fast);
}

.review__photo:hover{ transform:scale(1.03); }

.review__photo img{ width:100%; aspect-ratio:1; object-fit:cover; }

.review__date{ margin-top:12px; font-size:.74rem; color:var(--dim); }

.guarantee{
  background:linear-gradient(150deg,rgba(255,90,31,.1),var(--surface));
  border:1px solid rgba(255,90,31,.28); border-radius:var(--r-xl);
  padding:34px 24px; text-align:center; position:relative; overflow:hidden;
}

.guarantee::before{
  content:""; position:absolute; top:-40%; inset-inline-end:-15%;
  width:60%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(255,90,31,.18),transparent 70%);
}

.guarantee__seal{
  position:relative; width:96px; height:96px; margin-inline:auto; margin-bottom:20px;
  border-radius:50%; background:linear-gradient(135deg,var(--brand-2),var(--brand-dark));
  display:grid; place-items:center; color:#fff; box-shadow:var(--sh-brand);
}

.guarantee__seal svg{ width:46px; height:46px; }

.guarantee h2{ font-size:clamp(1.4rem,4.4vw,2.05rem); margin-bottom:12px; position:relative; }

.guarantee p{ color:var(--text-2); max-width:600px; margin-inline:auto; position:relative; }

.guarantee__row{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
  margin-top:26px; position:relative;
}

.guarantee__item{
  background:var(--glass); border:1px solid var(--line-2);
  border-radius:var(--r); padding:16px 12px;
}

.guarantee__item svg{ width:26px; height:26px; color:var(--brand-ink); margin-inline:auto; margin-bottom:8px; }

.guarantee__item b{ display:block; font-size:.9rem; margin-bottom:3px; }

.guarantee__item span{ font-size:.75rem; color:var(--muted); }

.faq{ display:grid; gap:11px; max-width:820px; margin-inline:auto; }

.faq__item{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; transition:border-color var(--t);
}

.faq__item.is-open{ border-color:var(--brand-ink); }

.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px 20px; text-align:start; font-weight:800; font-size:.98rem;
  transition:color var(--t-fast);
}

.faq__q:hover{ color:var(--brand-ink); }

.faq__ico{
  flex:none; width:28px; height:28px; border-radius:9px;
  background:var(--surface-3); display:grid; place-items:center;
  transition:all var(--t); color:var(--muted);
}

.faq__item.is-open .faq__ico{ background:var(--brand); color:#fff; transform:rotate(45deg); }

.faq__ico svg{ width:15px; height:15px; }

.faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--e); }

.faq__item.is-open .faq__a{ grid-template-rows:1fr; }

.faq__a > div{ overflow:hidden; }

.faq__a p{ padding:0 20px 20px; color:var(--muted); font-size:.93rem; }

.ship{ display:grid; gap:16px; }

.ship__card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:24px;
}

.ship__card h3{ display:flex; align-items:center; gap:11px; font-size:1.05rem; margin-bottom:16px; }

.ship__card h3 svg{ width:22px; height:22px; color:var(--brand-ink); flex:none; }

.ship__list{ display:grid; gap:11px; }

.ship__list li{ display:flex; gap:10px; font-size:.92rem; color:var(--text-2); align-items:flex-start; }

.ship__list li svg{ width:17px; height:17px; color:var(--ok); flex:none; margin-top:3px; }

.modal{
  position:fixed; inset:0; z-index:210; display:none;
  background:rgba(6,9,12,.82); backdrop-filter:blur(8px);
  place-items:center; padding:20px;
}

.modal.is-open{ display:grid; animation:fadeIn .25s var(--e); }

.modal__card{
  position:relative; width:100%; max-width:460px; text-align:center;
  background:linear-gradient(160deg,var(--surface-2),var(--surface));
  border:1px solid var(--line-2); border-radius:var(--r-xl);
  padding:34px 24px; box-shadow:var(--sh-3);
  animation:slideUp .4s var(--e);
}

.modal__x{
  position:absolute; top:14px; inset-inline-end:14px;
  width:34px; height:34px; border-radius:50%; color:var(--muted);
  background:var(--surface-3); display:grid; place-items:center;
  transition:all var(--t-fast);
}

.modal__x:hover{ background:var(--danger); color:#fff; }

.modal__x svg{ width:15px; height:15px; }

.modal__ico{
  width:76px; height:76px; margin-inline:auto; margin-bottom:18px;
  border-radius:50%; background:linear-gradient(135deg,var(--brand-2),var(--brand-dark));
  display:grid; place-items:center; color:#fff; box-shadow:var(--sh-brand);
}

.modal__ico svg{ width:36px; height:36px; }

.modal__card h3{ font-size:1.45rem; margin-bottom:11px; }

.modal__card p{ color:var(--muted); margin-bottom:20px; font-size:.95rem; }

.modal__card .btn{ width:100%; }

.modal__skip{
  display:block; margin-top:13px; font-size:.82rem;
  color:var(--dim); text-decoration:underline;
}

.wa-float{
  position:fixed; inset-inline-start:14px; z-index:75;
  bottom:calc(var(--mobilebar-h) + 14px);
  width:52px; height:52px; border-radius:50%;
  background:#25D366; color:#08240F; place-items:center;
  box-shadow:0 10px 28px rgba(37,211,102,.42);
  transition:transform var(--t-fast);
  animation:waPulse 2.6s infinite;
  
  display:none;
}

.wa-float:hover{ transform:scale(1.09); }

.wa-float svg{ width:27px; height:27px; }

@keyframes waPulse{
  0%{ box-shadow:0 10px 28px rgba(37,211,102,.42), 0 0 0 0 rgba(37,211,102,.55); }
  70%{ box-shadow:0 10px 28px rgba(37,211,102,.42), 0 0 0 18px rgba(37,211,102,0); }
  100%{ box-shadow:0 10px 28px rgba(37,211,102,.42), 0 0 0 0 rgba(37,211,102,0); }
}

@media (min-width:480px){
  .boxgrid{ grid-template-columns:repeat(2,1fr); }
  .guarantee__row{ grid-template-columns:repeat(4,1fr); }
}

@media (min-width:640px){
  .pain{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .reviews{ grid-template-columns:repeat(2,1fr); }
  .boxgrid{ grid-template-columns:repeat(3,1fr); }
  .ship{ grid-template-columns:1fr 1fr; }
  .rev-summary{ grid-template-columns:200px 1fr; }
}

@media (min-width:900px){
  .boxgrid{ grid-template-columns:repeat(3,1fr); }
  .feat{ grid-template-columns:1fr 1fr; gap:44px; }
  .feat--rev .feat__media{ order:2; }
  .feat--rev .feat__body{ order:1; }
  .reviews{ grid-template-columns:repeat(3,1fr); }
}

@media (min-width:1024px){
  .wa-float{ display:grid; bottom:20px; inset-inline-start:20px; width:58px; height:58px; }
  .wa-float svg{ width:30px; height:30px; }
  .steps{ grid-template-columns:repeat(4,1fr); }
  .boxgrid{ grid-template-columns:repeat(3,1fr); }
}

