/* ==========================================================================
   EMSense – Advertorial landing page
   ========================================================================== */

:root{
  --navy:        #02122E;   /* headings                       */
  --body:        #00183A;   /* body copy                      */
  --green:       #349B76;   /* byline name                    */
  --green-cta:   #00C249;   /* CTA buttons                    */
  --green-bar:   #24AA2F;   /* rating bars                    */
  --blue:        #1064E8;   /* links / byline rule            */
  --line:        #E7E7E7;   /* hairlines & card borders       */
  --track:       #EAEAEA;   /* rating bar track               */
  --box-grey:    #F8F8F8;   /* score box                      */
  --box-blue:    #EDF3FD;   /* bullet / reference callouts    */
  --box-cyan:    #EAFAFA;   /* final CTA box                  */
  --footer-bg:   #CCE0EB;
  --footer-tx:   #667075;
  --footer-lk:   #347AB7;

  --wrap:        1120px;
  --article:     744px;
  --sidebar:     350px;
  --gap:         26px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:#fff;
  color:var(--body);
  font-family:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:18px;
  line-height:26px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block;border:0;}
a{color:inherit;}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;}

/* ==========================================================================
   LANGUAGE SWITCHING
   Each translatable block exists twice; only the active language is shown.
   ========================================================================== */
[data-lang="fr"] [data-l="en"],
[data-lang="en"] [data-l="fr"]{display:none !important;}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{position:relative;border-bottom:1px solid var(--line);}
.site-header__inner{
  display:flex;flex-direction:column;align-items:center;
  padding:12px 20px 15px;
}

.langbar{
  position:absolute;top:50%;right:20px;transform:translateY(-50%);
  display:flex;gap:4px;padding:3px;
  border:1px solid var(--line);border-radius:999px;background:#fff;
}
.langbar__btn{
  appearance:none;border:0;cursor:pointer;
  padding:5px 13px;border-radius:999px;background:transparent;
  font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.4px;
  color:#6B7075;line-height:1;
  transition:background .15s ease,color .15s ease;
}
.langbar__btn:hover{color:var(--navy);}
.langbar__btn[aria-pressed="true"]{background:var(--navy);color:#fff;}
.langbar__btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.site-header__logo{width:147px;height:32px;}
.site-header__tag{
  margin-top:8px;
  font-size:12px;line-height:1;font-weight:700;
  color:var(--navy);
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:38px 0 60px;
  display:flex;
  align-items:flex-start;
  gap:var(--gap);
}
.article{width:var(--article);min-width:0;flex:0 1 var(--article);}
.sidebar{width:var(--sidebar);flex:0 0 var(--sidebar);position:sticky;top:24px;}

/* ==========================================================================
   ARTICLE TYPOGRAPHY
   ========================================================================== */
.article__title{
  font-size:40px;line-height:48px;font-weight:800;
  color:var(--navy);letter-spacing:-.2px;
}
.article h2{
  font-size:32px;line-height:38px;font-weight:700;
  color:var(--navy);
  margin:32px 0 12px;
}
.article > p{margin:0 0 26px;}
.article strong{font-weight:700;color:var(--body);}
.article em{font-style:italic;}

/* ---------- byline ---------- */
.byline{display:flex;align-items:center;margin:20px 0 26px;}
.byline__avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:0 0 48px;}
.byline__rule{width:2px;height:40px;background:var(--blue);margin:0 12px;flex:0 0 2px;}
.byline__meta{display:flex;flex-direction:column;}
.byline__name{font-size:20px;line-height:28px;font-weight:700;color:var(--green);}
.byline__date{font-size:19px;line-height:26px;color:#6B7075;}

/* ---------- images ---------- */
.figure{margin:0 0 24px;}
.figure img{width:100%;}

/* ---------- callout lists ---------- */
.callout{
  background:var(--box-blue);
  font-size:16px;line-height:22px;
  padding:16px 16px 16px 50px;
  margin:0 0 26px;
}
.callout li{margin:0 0 4px;}
.callout li:last-child{margin-bottom:0;}

.refs__title{font-size:20px;line-height:26px;font-weight:700;color:var(--green);margin:23px 0 18px;}
.refs{font-size:18px;line-height:26px;padding:16px 18px 16px 42px;word-break:break-all;}
.refs li{margin-bottom:0;}

/* ---------- rules ---------- */
.rule{border:0;border-top:1px solid var(--line);margin:16px 0;height:0;}
.rule--tight{margin:20px 0;}
.rule--section{margin:24px 0 0;}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:18px;line-height:22px;font-weight:700;letter-spacing:.3px;
  text-decoration:none;border-radius:6px;
  padding:17px 20px;min-height:56px;
  transition:filter .15s ease,transform .15s ease;
}
.btn--green{background:var(--green-cta);color:#fff;}
.btn--green:hover{filter:brightness(1.06);}
.btn--green:active{transform:translateY(1px);}

.cta-inline{padding:0 16px;margin:16px 0;}

/* ==========================================================================
   FINAL CTA BOX
   ========================================================================== */
.cta-box{background:var(--box-cyan);padding:31px 40px 26px;margin:24px 0;text-align:center;}
.cta-box__title{
  font-size:28px;line-height:34px;font-weight:700;color:var(--navy);
  margin:0 0 26px;
}
.cta-box__img{width:320px;max-width:100%;margin:0 auto 24px;}
.cta-box__btn{max-width:524px;margin:0 auto;min-height:0;}
.cta-box__note{font-size:16px;line-height:24px;font-weight:700;color:var(--navy);margin:13px 0 0;}

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.reviews{padding:0 23px;}
.review{padding:24px 0;border-bottom:1px solid #E5E5E5;}
.review__head{display:flex;align-items:center;gap:16px;margin-bottom:16px;}
.review__avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:0 0 48px;}
.review__id{display:flex;flex-direction:column;justify-content:center;gap:5px;}
.review__stars{width:104px;height:16px;}
.review__name{font-size:16px;line-height:22px;color:var(--body);}
.review__text{font-size:20px;line-height:26px;font-style:italic;margin:0;}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */
.sidebar__title{font-size:20px;line-height:28px;font-weight:800;color:var(--navy);}

.score{background:var(--box-grey);border-radius:8px;padding:10px 16px 16px;text-align:center;}
.score__value{font-size:56px;line-height:66px;font-weight:700;color:var(--navy);letter-spacing:1px;}
.score__count{font-size:16px;line-height:24px;color:var(--navy);}

.bars{margin-top:20px;}
.bars__row{display:flex;align-items:center;gap:19px;height:28px;}
.bars__row img{width:100px;height:20px;flex:0 0 100px;}
.bar{flex:1 1 auto;height:6px;border-radius:3px;background:var(--track);overflow:hidden;}
.bar__fill{display:block;height:100%;border-radius:3px;background:var(--green-bar);}

.promo{border:1px solid var(--line);border-radius:8px;padding:24px;text-align:center;}
.promo__img{width:249px;max-width:100%;margin:0 auto 20px;}
.promo__link{
  display:block;
  font-size:20px;line-height:26px;font-weight:700;
  color:var(--blue);text-decoration:underline;text-underline-offset:3px;
}
.promo__text{font-size:18px;line-height:26px;color:var(--body);margin:8px 0 18px;}
.promo__btn{width:100%;}


/* ==========================================================================
   LEGAL / CONTENT PAGES
   ========================================================================== */
.site-header__home{display:block;text-decoration:none;}

.legal{
  max-width:860px;margin:0 auto;padding:34px 20px 70px;
  font-size:17px;line-height:27px;
}
.legal__back{
  display:inline-block;margin-bottom:26px;
  font-size:15px;font-weight:600;color:var(--blue);text-decoration:none;
}
.legal__back:hover{text-decoration:underline;}

.legal h1{font-size:38px;line-height:46px;font-weight:800;color:var(--navy);margin:0 0 10px;letter-spacing:-.2px;}
.legal h2{font-size:23px;line-height:31px;font-weight:700;color:var(--navy);margin:38px 0 12px;}
.legal h2:first-child{margin-top:0;}
.legal p{margin:0 0 16px;}
.legal ul,.legal ol{margin:0 0 18px;padding-left:24px;}
.legal li{margin:0 0 8px;}
.legal strong{font-weight:700;}
.legal a{color:var(--blue);}
.legal code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em;background:var(--box-blue);padding:1px 5px;border-radius:4px;
}

.legal__updated{font-size:15px;color:#6B7075;margin:0 0 34px;padding-bottom:22px;border-bottom:1px solid var(--line);}
.legal__lead{font-size:19px;line-height:29px;margin-bottom:28px;}
.legal__note{
  background:var(--box-blue);border-left:3px solid var(--blue);
  padding:14px 18px;margin:20px 0;font-size:16px;line-height:25px;
}

/* tables (legal bases, cookie categories) */
.legal__tablewrap{overflow-x:auto;margin:0 0 22px;-webkit-overflow-scrolling:touch;}
.legal__table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px;line-height:23px;}
.legal__table th,.legal__table td{border:1px solid var(--line);padding:11px 14px;text-align:left;vertical-align:top;}
.legal__table th{background:var(--box-blue);font-weight:700;color:var(--navy);}

/* contact page cards */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 34px;}
.contact-card{border:1px solid var(--line);border-radius:10px;padding:22px 24px;}
.contact-card h2{margin:0 0 10px;font-size:18px;line-height:26px;}
.contact-card p{margin:0 0 8px;font-size:16px;line-height:25px;}
.contact-card p:last-child{margin-bottom:0;}
.contact-card__big{font-size:18px;font-weight:700;word-break:break-word;}


@media (max-width:640px){
  .legal{padding:24px 16px 48px;font-size:16px;line-height:26px;}
  .legal h1{font-size:28px;line-height:36px;}
  .legal h2{font-size:20px;line-height:28px;margin-top:30px;}
  .legal__lead{font-size:17px;line-height:27px;}
  .contact-grid{grid-template-columns:1fr;}
}


/* ==========================================================================
   STICKY MOBILE OFFER BAR
   Slides up once the hero has scrolled away; steps aside when the reader
   reaches the real offer box or the footer.
   ========================================================================== */
.stickycta{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:none;align-items:center;gap:12px;
  padding:10px 14px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  backdrop-filter:saturate(180%) blur(10px);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 20px rgba(2,18,46,.10);
  transform:translateY(110%);
  visibility:hidden;
  transition:transform .28s ease,visibility 0s linear .28s;
}
.stickycta.is-visible{
  transform:translateY(0);
  visibility:visible;
  transition:transform .28s ease,visibility 0s;
}
.stickycta__img{width:40px;height:40px;object-fit:contain;flex:0 0 40px;}
.stickycta__price{display:flex;flex-direction:column;line-height:1.2;flex:0 0 auto;}
.stickycta__amount{font-size:16px;font-weight:800;color:var(--navy);white-space:nowrap;}
.stickycta__off{font-size:12px;font-weight:700;color:#E8114B;white-space:nowrap;}
.stickycta__btn{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--green-cta);color:#fff;text-decoration:none;
  font-size:15px;line-height:19px;font-weight:700;letter-spacing:.3px;
  padding:13px 10px;border-radius:6px;min-height:48px;
}
.stickycta__btn:active{transform:translateY(1px);}
.stickycta__btn:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}

@media (max-width:1023px){ .stickycta{display:flex;} }
@media (max-width:359px){ .stickycta__img{display:none;} }
@media (prefers-reduced-motion:reduce){
  .stickycta,.stickycta.is-visible{transition:none;}
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--footer-bg);padding:40px 20px 60px;}
.site-footer__inner{max-width:940px;margin:0 auto;text-align:center;}
.site-footer__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;}
.site-footer__nav a{
  font-size:15px;line-height:22px;font-weight:700;
  color:var(--footer-lk);text-decoration:none;
}
.site-footer__nav a:hover{text-decoration:underline;}
.site-footer__copy{font-size:15px;line-height:22px;color:var(--footer-tx);margin:20px 0 0;}
.site-footer__note{
  font-size:14px;line-height:22px;color:var(--footer-tx);
  margin:22px 0 0;
}
.site-footer__note--caps{font-weight:700;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .wrap{padding-left:20px;padding-right:20px;}
}

@media (max-width:1023px){
  .wrap{flex-direction:column;gap:36px;padding-top:28px;}
  .article,.sidebar{width:100%;flex:1 1 auto;max-width:700px;margin:0 auto;}
  .sidebar{position:static;}
}

@media (max-width:640px){
  body{font-size:17px;line-height:25px;}

  .site-header__inner{padding:12px 78px 13px;}
  .langbar{right:12px;}
  .langbar__btn{padding:5px 10px;font-size:12px;}
  .wrap{padding:22px 16px 40px;}
  .article__title{font-size:29px;line-height:36px;}
  .article h2{font-size:24px;line-height:30px;margin:28px 0 12px;}
  .article p{margin-bottom:22px;}

  .byline__avatar,.review__avatar{width:44px;height:44px;flex-basis:44px;}
  .byline__name{font-size:18px;line-height:24px;}
  .byline__date{font-size:16px;line-height:22px;}

  .callout{padding:18px 18px 18px 38px;}
  .refs{font-size:15px;line-height:23px;word-break:normal;overflow-wrap:anywhere;}

  .btn{font-size:16px;line-height:21px;padding:14px 16px;min-height:52px;}
  .cta-inline{padding:0;}

  .cta-box{padding:26px 18px 28px;margin-left:-16px;margin-right:-16px;}
  .cta-box__title{font-size:21px;line-height:29px;}
  .cta-box__img{width:240px;}
  .cta-box__btn{max-width:100%;}

  .reviews{padding:0;}
  .review__text{font-size:16px;line-height:24px;}

  .score__value{font-size:48px;line-height:58px;}
  .bars__row{gap:14px;}
  .bars__row img{width:88px;height:18px;flex-basis:88px;}

  .promo__link{font-size:18px;line-height:24px;}
  .promo__text{font-size:16px;line-height:24px;}

  .site-footer{padding:34px 16px 46px;}
  .site-footer__nav{gap:6px 14px;}
  .site-footer__nav a{font-size:12px;}
  .site-footer__note{font-size:13px;line-height:21px;}
}