:root{
    --bg: #0B0C0F;
    --panel: #141519;
    --panel-hover: #1B1D22;
    --stub: #111216;
    --amber: #F2A93B;
    --rust: #D9705B;
    --text: #EDEFF2;
    --muted: #9AA1AC;
    --line: #26292F;
    --green: #3DBE86;
    --orange: #F2994A;
    --red: #E5695A;
    --neon-cyan: #3EF0FF;
    --neon-magenta: #D861FF;
    --neon-glow-soft: rgba(216,97,255,0.28);
    --bg-glow-1: rgba(232,49,150,0.30);
    --bg-glow-2: rgba(61,140,255,0.28);
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:'Outfit', sans-serif;
    -webkit-font-smoothing:antialiased;
    position:relative;
  }
  /* Fond noir : les grands halos rose/bleu ne sont plus affichés (les néons des éléments restent).
     Ce calque sert aux faisceaux lumineux sur téléphone (voir bloc TÉLÉPHONE). */
  body::after{
    display:none;
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    background:
      radial-gradient(ellipse 1000px 1300px at -10% 15%, var(--bg-glow-1), transparent 70%),
      radial-gradient(ellipse 1000px 1300px at 110% 5%, var(--bg-glow-2), transparent 70%),
      radial-gradient(ellipse 350px 450px at -5% 95%, var(--bg-glow-2), transparent 70%),
      radial-gradient(ellipse 350px 450px at 105% 100%, var(--bg-glow-1), transparent 70%);
  }
  body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    background:repeating-linear-gradient(
      180deg,
      rgba(0,217,232,0.012) 0px,
      rgba(0,217,232,0.012) 1px,
      transparent 1px,
      transparent 3px
    );
  }
  .wrap{max-width:1100px;margin:0 auto;padding:20px 20px 80px; position:relative; z-index:1;}

  /* z-index : les menus Devise / Langue passent au-dessus du sélecteur de pays (z-index 100) */
  .topbar{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; position:relative; z-index:150;}
  .topbarControls{display:flex; gap:10px; align-items:center;}
  .topbar .siteLogo{margin:0; max-width:38px; width:38px; height:auto;}
  .brandMark{display:flex; align-items:center; gap:8px;}
  .brandWordmark{height:32px; width:auto; display:block; margin-top:5px;}
  .langSwitch{position:relative;}
  .langButton{
    display:flex; align-items:center; gap:6px;
    background:var(--stub);
    border:1px solid var(--line);
    border-radius:20px;
    padding:8px 14px;
    font-family:'Outfit', sans-serif;
    font-size:13px;
    font-weight:600;
    color:var(--text);
    cursor:pointer;
  }
  .langButton:hover{background:var(--panel-hover);}
  .langButton .caret{font-size:10px; color:var(--muted); margin-left:2px;}
  .langMenu{
    display:none;
    position:absolute;
    top:calc(100% + 6px);
    right:0;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:10px;
    box-shadow:0 6px 18px rgba(18,24,31,0.12);
    min-width:170px;
    max-height:340px;
    overflow-y:auto;
    z-index:20;
  }
  .langGroupLabel{
    padding:9px 14px;
    font-size:11.5px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.04em;
    color:var(--text);
    cursor:pointer;
    display:flex; align-items:center; justify-content:space-between;
    background:var(--stub);
  }
  .langGroupLabel:hover{background:var(--panel-hover);}
  .langGroupLabel .caretSmall{font-size:9px; color:var(--muted); transition:transform .15s ease;}
  .langGroupLabel.open .caretSmall{transform:rotate(180deg);}
  .langMenu.open{display:block;}
  .langOption{
    display:flex; align-items:center; gap:10px;
    padding:10px 14px;
    font-size:13px;
    cursor:pointer;
    color:var(--text);
  }
  .langOption:hover{background:var(--panel-hover);}
  .langOption.active{color:var(--amber); font-weight:600;}
  .langOption .flag{width:27px; height:18px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:18px; line-height:1;}
  .langButton .flag{width:27px; height:18px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:18px; line-height:1;}
  .cflag{width:24px; height:16px; display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; margin-right:8px; flex-shrink:0; font-size:16px; line-height:1;}
  .countryCell{display:flex; align-items:center;}

  header{margin-bottom:28px; text-align:center;}
  .kicker{color:var(--amber); font-size:14px; font-weight:600; margin:0 0 6px;}
  .siteLogo{display:block; margin:0 auto 10px; max-width:90px; width:100%; height:auto;}
  h1{
    font-size:clamp(26px,4vw,38px);
    line-height:1.15;
    margin:0 auto 12px;
    font-weight:800;
    max-width:680px;
    background:linear-gradient(90deg,#29B6F6 0%,#3D7BF0 35%,#6A3DE8 70%,#B23DE8 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    filter:drop-shadow(0 0 10px rgba(106,61,232,0.45)) drop-shadow(0 0 22px rgba(61,123,240,0.3));
  }
  .lede{color:var(--muted); max-width:560px; font-size:15px; line-height:1.55; margin:0 auto;}

  .notice{
    margin-top:40px;
    border:1px dashed var(--line);
    border-radius:10px;
    padding:14px 16px;
    font-size:13px;
    color:var(--muted);
    line-height:1.6;
    background:rgba(242,169,59,0.04);
    max-width:700px;
    margin-left:auto; margin-right:auto;
  }
  .notice b{color:var(--amber); font-weight:600;}

  /* À propos */
  .aboutSection{
    margin-top:50px;
    max-width:620px;
    margin-left:auto; margin-right:auto;
    text-align:center;
  }
  .aboutTitle{
    font-size:clamp(20px,2.6vw,26px);
    font-weight:800;
    margin-bottom:10px;
    background:linear-gradient(90deg,#29B6F6 0%,#3D7BF0 35%,#6A3DE8 70%,#B23DE8 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .aboutText{
    font-size:13.5px;
    color:var(--muted);
    line-height:1.65;
    margin:0;
  }

  /* Vue Guide (cachée par défaut, accessible via #guide) */
  .guideWrap{max-width:760px; margin:0 auto; padding:40px 20px 80px;}
  .backLink{
    display:inline-flex; align-items:center; gap:6px;
    color:var(--muted); text-decoration:none; font-size:13.5px; font-weight:600;
    margin-bottom:28px;
  }
  .backLink:hover{color:var(--text);}
  .guideH1{
    font-size:clamp(24px,4vw,34px);
    font-weight:800;
    margin:0 0 10px;
    background:linear-gradient(90deg,#29B6F6 0%,#3D7BF0 35%,#6A3DE8 70%,#B23DE8 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .guideIntro{color:var(--muted); font-size:14.5px; margin-bottom:34px;}
  .qaItem{
    border:1px solid var(--line);
    border-radius:10px;
    margin-bottom:10px;
    background:var(--panel);
  }
  .qaItem summary{
    padding:14px 18px;
    font-weight:700;
    font-size:14.5px;
    cursor:pointer;
    list-style:none;
  }
  .qaItem summary::-webkit-details-marker{display:none;}
  .qaItem summary:hover{background:var(--panel-hover); border-radius:10px;}
  .qaItem p{margin:0; padding:0 18px 16px; color:var(--muted); font-size:13.5px;}
  .guideCta{
    margin-top:40px; padding:20px; border-radius:12px;
    border:1px solid var(--line); background:var(--panel);
    text-align:center;
  }
  .guideCta a{
    display:inline-block; margin-top:10px;
    background:linear-gradient(90deg,#3D7BF0,#B23DE8);
    color:#fff; text-decoration:none; font-weight:700;
    padding:10px 24px; border-radius:8px; font-size:14px;
  }

  /* FAQ */
  .faqSection{
    margin-top:50px;
    max-width:760px;
    margin-left:auto; margin-right:auto;
  }
  .faqTitle{
    font-size:clamp(22px,3vw,30px);
    font-weight:800;
    text-align:center; margin-bottom:22px;
    background:linear-gradient(90deg,#29B6F6 0%,#3D7BF0 35%,#6A3DE8 70%,#B23DE8 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    filter:drop-shadow(0 0 10px rgba(106,61,232,0.45)) drop-shadow(0 0 22px rgba(61,123,240,0.3));
    cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:10px;
    -webkit-user-select:none; user-select:none;
  }
  .faqTitle .faqTitleChev{
    flex-shrink:0; transition:transform .2s ease;
    stroke:#6A3DE8;
    filter:drop-shadow(0 0 6px rgba(106,61,232,0.5));
  }
  .faqTitle.open .faqTitleChev{ transform:rotate(180deg); }
  #faqList, #geoGuideList{
    max-height:0; overflow:hidden;
    transition:max-height .3s ease;
  }
  #faqList.open, #geoGuideList.open{ max-height:6000px; }
  .faqItem{
    border:1px solid var(--line);
    border-radius:10px;
    margin-bottom:10px;
    background:var(--panel);
    overflow:hidden;
  }
  .faqQ{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:14px 18px;
    cursor:pointer;
    font-weight:700; font-size:14.5px; color:var(--text);
    -webkit-user-select:none; user-select:none;
  }
  .faqQ:hover{ background:var(--panel-hover); }
  .faqQ .chev{ flex-shrink:0; transition:transform .2s ease; color:var(--muted); }
  .faqItem.open .faqQ .chev{ transform:rotate(180deg); }
  .faqA{
    max-height:0; overflow:hidden; transition:max-height .25s ease;
    font-size:13.5px; color:var(--muted); line-height:1.6;
  }
  .faqA-inner{ padding:0 18px 16px; }
  .faqItem.open .faqA{ max-height:400px; }

  /* Footer legal links */
  .siteFooter{ flex-direction:column; gap:14px !important; }
  .footerLegal{
    display:flex; flex-wrap:wrap; justify-content:center; gap:16px;
    font-size:12.5px;
  }
  .footerLegal button, .footerLegal a{
    background:none; border:none; padding:0; margin:0;
    color:var(--muted); font-size:12.5px; font-family:'Outfit',sans-serif;
    cursor:pointer; text-decoration:underline; text-underline-offset:2px;
  }
  .footerLegal button:hover, .footerLegal a:hover{ color:var(--text); }
  /* Texte de présentation des pages par service */
  .seoBlock{ margin:50px auto 0; max-width:720px; text-align:left; color:var(--muted); font-size:14px; line-height:1.7; }
  .seoBlock h2{ font-size:clamp(20px,2.6vw,26px); font-weight:800; margin:0 0 12px; text-align:center;
    background:linear-gradient(90deg,#29B6F6 0%,#3D7BF0 35%,#6A3DE8 70%,#B23DE8 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent; }
  .seoBlock h3{ font-size:15px; color:var(--text); margin:22px 0 6px; }
  .seoBlock p{ margin:0 0 10px; }
  .seoBlock ol{ margin:6px 0 12px; padding-left:22px; }
  .seoBlock li{ margin:3px 0; }
  .seoBlock strong{ color:var(--text); }
  .seoBlock .seoNote{ font-size:12px; opacity:.8; }
  .seoBlock a{ color:#bdafff; text-decoration:none; }
  .seoBlock a:hover{ color:#e6e1ff; text-decoration:underline; }
  .footerCopyright{
    font-size:11.5px;
    color:var(--line);
    text-align:center;
    margin-top:2px;
  }

  /* Legal modal */
  .legalOverlay{
    position:fixed; inset:0; z-index:200;
    background:rgba(10,11,13,0.72);
    display:none; align-items:center; justify-content:center;
    padding:20px;
  }
  .legalOverlay.open{ display:flex; }
  .legalModal{
    background:var(--panel); border:1px solid var(--line); border-radius:14px;
    max-width:640px; width:100%; max-height:80vh;
    display:flex; flex-direction:column;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
  }
  .legalModalHead{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 22px; border-bottom:1px solid var(--line); flex-shrink:0;
  }
  .legalModalHead h3{ margin:0; font-size:17px; color:var(--text); }
  .legalModalClose{
    background:none; border:none; color:var(--muted); cursor:pointer;
    font-size:20px; line-height:1; padding:4px;
  }
  .legalModalClose:hover{ color:var(--text); }
  .legalModalBody{
    padding:20px 22px; overflow-y:auto; font-size:13.5px; color:var(--muted); line-height:1.7;
  }
  .legalModalBody h4{ color:var(--text); font-size:14px; margin:18px 0 6px; }
  .legalModalBody h4:first-child{ margin-top:0; }
  .legalModalBody p{ margin:0 0 10px; }
  .legalModalBody a{ color:#bdafff; text-decoration:underline; text-underline-offset:2px; }
  .legalModalBody a:hover{ color:#e6e1ff; }
  .legalModalBody strong{ color:var(--text); }

  /* Consentement cookies : carte centrée en bas de l'écran (téléphone et ordinateur) */
  .cookieBanner{
    position:fixed; z-index:190;
    left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom));
    margin:0 auto; width:auto; max-width:460px; box-sizing:border-box;
    padding:16px 18px;
    border:1px solid transparent; border-radius:18px;
    background:
      linear-gradient(180deg, rgba(24,22,38,.96), rgba(14,15,22,.96)) padding-box,
      linear-gradient(120deg, rgba(41,182,246,.65), rgba(106,61,232,.55) 50%, rgba(178,61,232,.65)) border-box;
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 32px rgba(106,61,232,.22);
    display:none; flex-direction:column; gap:14px;
    opacity:0; transform:translateY(14px) scale(.98);
    transition:opacity .3s ease, transform .35s cubic-bezier(.22,1,.36,1);
  }
  .cookieBanner.open{ display:flex; }
  .cookieBanner.shown{ opacity:1; transform:none; }
  .cookieHead{ display:flex; align-items:center; gap:13px; }
  .cookieIcon{
    flex:0 0 40px; width:40px; height:40px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(145deg, rgba(61,123,240,.30), rgba(178,61,232,.30));
    border:1px solid rgba(178,110,255,.35);
    box-shadow:0 0 16px rgba(124,77,255,.30);
  }
  .cookieIcon svg{ width:24px; height:24px; display:block; }
  .cookieBanner p{ margin:0; font-size:13px; color:#c9cdd8; line-height:1.5; }
  .cookieBanner .cookieMore{
    background:none; border:none; padding:0; font:inherit; color:#bdafff; white-space:nowrap;
    text-decoration:underline; text-underline-offset:2px; cursor:pointer;
  }
  .cookieBanner .cookieMore:hover{ color:#e6e1ff; }
  .cookieActions{ display:flex; gap:10px; }
  .cookieActions button{
    flex:1; padding:10px 12px; border-radius:11px; cursor:pointer;
    font-family:'Outfit',sans-serif; font-size:13.5px; font-weight:800;
    transition:filter .15s ease, border-color .15s ease, background-color .15s ease, transform .15s ease;
  }
  .cookieActions button:active{ transform:scale(.97); }
  /* Refuser aussi visible et aussi simple qu'Accepter (exigence RGPD / LPD) */
  .cookieActions .cookieRefuse{
    background:rgba(255,255,255,.05); color:var(--text);
    border:1px solid rgba(180,180,210,.28);
  }
  .cookieActions .cookieRefuse:hover{ border-color:rgba(124,77,255,.65); background:rgba(124,77,255,.08); }
  .cookieActions .cookieAccept{
    background:linear-gradient(90deg,#29B6F6,#3D7BF0 30%,#6A3DE8 70%,#B23DE8); color:#fff;
    border:1px solid transparent;
    box-shadow:0 0 18px rgba(106,61,232,.40);
  }
  .cookieActions .cookieAccept:hover{ filter:brightness(1.12); }
  @media (max-width:560px){
    .cookieBanner{ left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); padding:15px 16px; gap:13px; }
    .cookieBanner p{ font-size:12.5px; }
  }

  .vpnHighlight{
    margin-top:60px;
    max-width:700px;
    margin-left:auto; margin-right:auto;
    display:flex; align-items:flex-start; gap:12px;
    border-radius:10px;
    padding:14px 16px;
    background:linear-gradient(135deg, rgba(106,61,232,0.12), rgba(61,123,240,0.06));
    border:1px solid rgba(106,61,232,0.3);
  }
  .vpnHighlight-icon{
    width:32px; height:32px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .vpnHighlight b{color:#B23DE8; font-weight:700;}
  .vpnHighlight span{font-size:13.5px; color:var(--text); line-height:1.55;}

  .siteFooter{
    margin-top:60px;
    padding-top:28px;
    border-top:1px solid var(--line);
    display:flex; flex-direction:column; align-items:center; gap:10px;
    text-align:center;
  }
  .siteFooter .contactLabel{font-size:12px; color:var(--muted); font-weight:600;}
  .contactLink{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--stub);
    border:1px solid var(--line);
    border-radius:20px;
    padding:10px 18px;
    font-family:'Outfit', sans-serif;
    font-size:14px;
    font-weight:600;
    color:var(--text);
    text-decoration:none;
  }
  .contactLink:hover{background:var(--panel-hover);}
  .contactLink svg{width:18px; height:18px; flex-shrink:0;}

  .showMoreWrap{padding:4px 20px 14px;}
  .showMoreBtn{
    width:100%;
    background:var(--stub);
    border:1px dashed var(--line);
    border-radius:8px;
    padding:10px;
    font-family:'Outfit', sans-serif;
    font-size:13px;
    font-weight:600;
    color:var(--amber);
    cursor:pointer;
  }
  .showMoreBtn:hover{background:var(--panel-hover);}

  .layout{
    display:flex;
    flex-direction:column;
    gap:24px;
    margin-top:32px;
    align-items:center;
  }

  .servicesTicker{
    position:relative;
    width:100%;
    max-width:900px;
    margin:-24px auto;
    /* Marge intérieure verticale : la case survolée monte de 3px et son halo n'est plus coupé
       par overflow:hidden (la marge négative garde l'espacement d'origine). */
    padding:24px 0;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
  }
  .servicesTicker.listMode{
    margin:0 auto;
    padding:0;
    overflow:visible;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .servicesTrack{
    display:flex;
    align-items:center;
    gap:10px;
    width:max-content;
    animation:servicesScroll 32s linear infinite;
  }
  /* Pause au survol de la souris uniquement : sur téléphone, le survol reste « collé » après un toucher et arrêtait le défilement */
  @media (hover:hover) and (pointer:fine){ .servicesTrack:hover{animation-play-state:paused;} }
  .servicesTrack.listMode{
    flex-wrap:wrap;
    justify-content:center;
    width:100%;
    max-width:720px;
    margin:0 auto;
    animation:none !important;
    transform:none !important;
  }
  @keyframes servicesScroll{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
  .carouselArrow{display:none;}
  .servicesUnderline{display:none;}
  .stub{
    position:relative;
    background:var(--stub);
    border:1px solid var(--line);
    border-radius:8px;
    padding:14px 22px;
    cursor:pointer;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex-shrink:0;
    white-space:nowrap;
    transition:border-color .15s ease, background .15s ease;
  }
  .stub .name{font-weight:700; font-size:16px; white-space:nowrap; line-height:1.2; text-align:center;}
  .stub .ref{font-family:'Outfit', sans-serif; font-size:10px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .stub.active .ref{color:var(--amber);}
  .badge{
    width:32px; height:32px;
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    color:#fff;
    font-weight:700;
    font-size:12px;
    flex-shrink:0;
    position:relative;
    box-shadow:0 2px 6px rgba(18,24,31,0.18), inset 0 1px 0 rgba(255,255,255,0.25);
    background-blend-mode:overlay;
  }
  .badge::after{
    content:"";
    position:absolute; inset:0;
    border-radius:10px;
    background:linear-gradient(160deg, rgba(255,255,255,0.35), rgba(255,255,255,0) 55%);
    pointer-events:none;
  }
  .stub .info{display:flex; flex-direction:column; gap:2px; min-width:0;}
  .serviceIcon{
    width:26px; height:26px; flex-shrink:0;
    border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 6px rgba(0,0,0,0.25);
  }
  .servicesToggleWrap{display:flex; justify-content:center; width:100%; margin-top:-2px;}
  .servicesToggle{
    border:1px solid transparent;
    color:var(--muted);
    font-weight:600;
    font-family:'Outfit', sans-serif;
    font-size:12px;
    padding:6px 16px;
    border-radius:20px;
    background:transparent;
    cursor:pointer;
    transition:color .15s ease, border-color .15s ease, text-shadow .15s ease;
  }
  /* Survol : texte en dégradé bleu -> violet (comme le titre) et contour violet discret */
  .servicesToggleWrap .servicesToggle:hover{
    color:transparent;
    background:linear-gradient(90deg,#29B6F6 0%,#3D7BF0 35%,#6A3DE8 70%,#B23DE8 100%);
    -webkit-background-clip:text; background-clip:text;
    border-color:rgba(124,77,255,.55);
    text-shadow:none;
    box-shadow:0 0 0 1px rgba(124,77,255,.15), 0 0 14px rgba(124,77,255,.25), 0 0 22px rgba(41,182,246,.10);
    transform:translateY(-1px);
  }

  .board{
    width:100%;
    max-width:900px;   /* même largeur que les onglets et la bande des services */
    margin-left:auto; margin-right:auto;
    background:var(--panel);
    border:1px solid rgba(216,97,255,0.22);
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 0 0 1px rgba(62,240,255,0.05), 0 0 30px rgba(216,97,255,0.07), 0 4px 18px rgba(0,0,0,0.25);
    position:relative;
  }
  .board::before{
    content:"";
    position:absolute; top:0; left:0; right:0;
    height:2px;
    background:linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta));
    opacity:0.55;
  }
  .boardTools{
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:auto;
  }
  .boardSearch{
    background:var(--stub);
    border:1px solid var(--line);
    border-radius:8px;
    padding:7px 12px;
    font-size:13px;
    color:var(--text);
    font-family:'Outfit', sans-serif;
    width:150px;
    transition:border-color .15s ease, width .2s ease;
  }
  .boardSearch:focus{outline:none; border-color:var(--neon-magenta); width:190px;}
  .boardSearch::placeholder{color:var(--muted);}
  .boardShareBtn{
    display:flex; align-items:center; gap:6px;
    background:var(--stub);
    border:1px solid var(--line);
    border-radius:8px;
    padding:7px 12px;
    font-size:12.5px;
    font-weight:600;
    color:var(--muted);
    cursor:pointer;
    font-family:'Outfit', sans-serif;
    transition:border-color .15s ease, color .15s ease;
    white-space:nowrap;
  }
  .boardShareBtn:hover{border-color:var(--neon-cyan); color:var(--text);}
  .noResults{text-align:center; padding:28px 16px; color:var(--muted); font-size:13.5px;}
  @media (max-width:640px){
    .board-head{flex-wrap:wrap;}
    .boardTools{margin-left:0; width:100%;}
    .boardSearch{flex:1; width:auto;}
  }
  .board-head{
    padding:18px 20px;
    border-bottom:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
  }
  .board-head h2{margin:0; font-size:18px; font-weight:600;}
  .board-head .sub{color:var(--muted); font-size:13px;}

  table{width:100%; border-collapse:collapse;}
  thead th{
    text-align:left;
    font-size:12px;
    font-weight:500;
    color:var(--muted);
    padding:10px 20px;
    border-bottom:1px solid var(--line);
  }
  thead th.num, tbody td.num{text-align:right;}
  /* Pas de trait entre les lignes du classement : seul l'en-tête garde son trait */
  tbody td{
    padding:12px 20px;
    border-bottom:none;
    font-size:14px;
  }
  /* Mobile : tableau resserré pour que les 5 colonnes tiennent dans l'écran */
  @media (max-width:640px){
    thead th, tbody td{padding:10px 4px; font-size:12px;}
    thead th{font-size:11px; line-height:1.3;}
    thead th:first-child, tbody td:first-child{padding-left:10px;}
    thead th:last-child, tbody td:last-child{padding-right:10px;}
    td.rank{width:22px;}
    .countryCell{gap:6px;}
    /* Filet de sécurité : si un nom de pays très long élargit le tableau, on peut le faire défiler au lieu de le couper */
    .board{overflow-x:auto;}
    /* Onglets : les intitulés passent sur deux lignes au lieu de sortir de l'écran */
    .tabs .tab{white-space:normal; font-size:13px; line-height:1.25; padding:8px 4px;}
  }
  /* Petits téléphones : le bouton de langue n'affiche que le drapeau pour ne pas sortir de l'écran */
  @media (max-width:380px){
    #langButtonLabel{display:none;}
  }
  tbody tr:hover{background:rgba(18,24,31,0.025);}
  td.rank{
    font-family:'Outfit', sans-serif;
    color:var(--muted);
    font-size:13px;
    width:40px;
  }
  .medal{
    width:23px; height:23px;
    border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    color:#fff;
    font-weight:700;
    font-size:12px;
    font-family:'Outfit', sans-serif;
  }
  /* Rangs 4 et suivants : même largeur que les médailles, chiffre centré, pour qu'ils soient alignés */
  .rankNum{display:inline-flex; justify-content:center; width:26px; font-variant-numeric:tabular-nums;}
  /* Podium : badges hexagonaux néon */
  .rankBadge{display:inline-flex; width:26px; height:26px; vertical-align:middle;}
  .rankBadge svg{width:100%; height:100%; display:block; overflow:visible;}
  .rankBadge.rk1 svg{filter:drop-shadow(0 0 3px rgba(245,197,66,.75)) drop-shadow(0 0 8px rgba(245,197,66,.30));}
  .rankBadge.rk2 svg{filter:drop-shadow(0 0 3px rgba(220,228,240,.55));}
  .rankBadge.rk3 svg{filter:drop-shadow(0 0 3px rgba(205,127,50,.55));}
  /* Meilleure économie : petite étiquette néon "TOP" */
  .topSavingsTag{
    display:inline-flex; align-items:center;
    padding:2px 6px 2px 7px; border-radius:6px;
    font-size:9.5px; font-weight:800; letter-spacing:.12em; line-height:1.2;
    color:#CFC4FF;
    background:linear-gradient(#0E0F15,#0E0F15) padding-box,
               linear-gradient(90deg,#3EF0FF,#7C4DFF,#E25CFF) border-box;
    border:1px solid transparent;
    box-shadow:0 0 8px rgba(124,77,255,.45);
    text-shadow:0 0 6px rgba(124,77,255,.8);
  }
  .medal.gold{background:linear-gradient(135deg,#FFD86B,#B8860B);}
  .medal.silver{background:linear-gradient(135deg,#EDEDED,#9A9A9A);}
  .medal.bronze{background:linear-gradient(135deg,#E3A063,#8B5A2B);}
  /* Prix local : même style que la colonne "≈ CHF / mois" */
  td.price{font-family:'Outfit', sans-serif; color:var(--muted);}
  td.chf{font-family:'Outfit', sans-serif; color:var(--muted);}
  td.save{font-family:'Outfit', sans-serif;}
  .saveInner{display:inline-flex; align-items:center; justify-content:flex-end; gap:5px;}
  .savePct{white-space:nowrap;}
  /* Téléphone : l'étiquette TOP passe au-dessus du pourcentage (sinon le % est renvoyé à la ligne) */
  @media (max-width:560px){
    .saveInner{flex-direction:column; align-items:flex-end; gap:3px;}
    .saveInner .topSavingsTag{font-size:8px; padding:1px 5px 1px 6px; letter-spacing:.1em;}
  }
  .save.tier-green{color:var(--green); font-weight:600;}
  .save.tier-orange{color:var(--orange); font-weight:600;}
  .save.tier-red{color:var(--red); font-weight:600;}
  .flame{display:inline-flex; width:14px; height:14px; flex-shrink:0;}
  .flame svg{width:100%; height:100%; display:block;}
  tr.reference td{color:var(--muted); font-style:italic;}
  tr.reference .save{color:var(--muted); font-style:normal;}

  .board-foot{
    padding:14px 20px;
    font-size:12px;
    color:var(--muted);
    border-top:1px solid var(--line);
    line-height:1.6;
    text-align:center;
  }

  code.editnote{
    color:var(--amber);
    font-family:'Outfit', sans-serif;
  }

  .residenceBar{
    display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
    margin-top:20px;
    width:100%;
  }
  .residenceBar label{font-size:13px; color:var(--muted); font-weight:600;}
  .residenceBar select{
    background:var(--stub);
    border:1px solid var(--line);
    border-radius:8px;
    padding:8px 12px;
    font-family:'Outfit', sans-serif;
    font-size:13px;
    font-weight:600;
    color:var(--text);
    cursor:pointer;
  }

  .tabs{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    width:100%;
    max-width:900px;
    margin:24px auto 0;
    border-bottom:1px solid var(--line);
    gap:0;
  }
  .tab{
    width:100%;
    min-height:44px;
    padding:10px 8px;
    margin-right:0;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:14px;
    font-weight:600;
    color:var(--muted);
    cursor:pointer;
    border-bottom:2px solid transparent;
    background:none;
    border-left:none;
    border-right:none;
    border-top:none;
    font-family:'Outfit', sans-serif;
    white-space:nowrap;
  }
  .tab.active{
    background:linear-gradient(90deg,#29B6F6 0%,#3D7BF0 35%,#6A3DE8 70%,#B23DE8 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    filter:drop-shadow(0 0 6px rgba(106,61,232,0.45))
           drop-shadow(0 0 12px rgba(61,123,240,0.3));
    font-weight:800;
    border-bottom-color:var(--neon-magenta);
    box-shadow:0 1px 0 0 var(--neon-magenta),
               0 2px 8px -1px var(--neon-glow-soft);
  }

  .vpnGrid{
    display:none;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    align-items:stretch;
    gap:14px;
    margin-top:24px;
  }
  .vpnGrid.visible{display:grid;}
  .vpnCard{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:12px;
    padding:18px;
    box-shadow:0 1px 3px rgba(18,24,31,0.05);
    position:relative;
    display:flex;
    flex-direction:column;
    height:100%;
    min-height:300px;
    box-sizing:border-box;
    color:inherit;
    text-decoration:none;
    cursor:pointer;
    transition:
      transform .18s ease,
      border-color .18s ease,
      box-shadow .18s ease,
      background-color .18s ease;
  }
  .vpnCard:hover{
    transform:translateY(-4px);
    border-color:#7C4DFF;
    background:linear-gradient(180deg,rgba(124,77,255,.08),rgba(41,182,246,.035));
    box-shadow:
      0 0 0 1px rgba(124,77,255,.18),
      0 0 18px rgba(124,77,255,.22),
      0 0 34px rgba(41,182,246,.10);
  }
  .vpnCard:focus-visible{
    outline:none;
    transform:translateY(-4px);
    border-color:#29B6F6;
    box-shadow:
      0 0 0 2px rgba(41,182,246,.22),
      0 0 22px rgba(124,77,255,.28);
  }
  .vpnCard.best{border-color:var(--amber);}
  .vpnCard.best:hover{border-color:#7C4DFF;}
  .vpnCard .tag{
    position:absolute;
    top:-10px; left:16px;
    background:var(--amber);
    color:#fff;
    font-size:11px;
    font-weight:600;
    padding:3px 9px;
    border-radius:20px;
  }
  .vpnCard h3{margin:6px 0 2px; font-size:17px;}
  .vpnCard .cardHead{display:flex; align-items:center; gap:12px;}
  .vpnCard .price{
    font-family:'Outfit', sans-serif;
    font-size:26px;
    font-weight:700;
    margin:14px 0 2px;
  }
  .vpnCard .price span{font-size:12px; color:var(--muted); font-family:'Outfit', sans-serif; font-weight:400;}
  .vpnCard ul{list-style:none; margin:12px 0 0; padding:0; font-size:13px; color:var(--muted); display:flex; flex-direction:column; gap:6px;}
  .vpnCard ul li::before{content:"— "; color:var(--line);}
  .vpnCard .vpnCardCta{
    margin-top:auto;
    align-self:flex-end;
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#7C4DFF;
    background:rgba(124,77,255,.08);
    border:1px solid rgba(124,77,255,.20);
    font-size:16px;
    transition:all .18s ease;
  }
  .vpnCard:hover .vpnCardCta{
    color:#29B6F6;
    background:rgba(41,182,246,.10);
    border-color:rgba(41,182,246,.35);
    box-shadow:0 0 12px rgba(124,77,255,.22);
  }
  .vpnCard .best-for{
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid var(--line);
    font-size:12px;
    color:var(--text);
  }
  .verifiedBadge{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    max-width:700px;
    margin:16px auto 20px;
    padding:10px 18px;
    border-radius:20px;
    background:rgba(61,190,134,0.1);
    border:1px solid rgba(61,190,134,0.35);
    color:var(--green);
    font-size:13px;
    font-weight:600;
    text-align:center;
  }
  .verifiedBadge svg{flex-shrink:0;}
  .vpnFoot{
    margin-top:16px;
    font-size:12px;
    color:var(--muted);
    line-height:1.6;
  }

  .plansGrid{
    display:none;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    align-items:stretch;
    gap:14px;
    margin-top:24px;
  }
  .plansGrid.visible{display:grid;}
  .planCard{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:12px;
    padding:16px 18px;
    box-shadow:0 1px 3px rgba(18,24,31,0.05);
    display:flex;
    flex-direction:column;
    height:100%;
    min-height:300px;
    box-sizing:border-box;
  }
  .planCard .cardHead{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
  .planCard h3{margin:0; font-size:15px;}
  .trialBadge{
    display:inline-flex; align-items:center; gap:5px;
    font-size:11px; font-weight:600;
    padding:3px 9px; border-radius:20px;
    margin-bottom:10px;
  }
  .trialBadge.yes{background:rgba(30,138,95,0.12); color:var(--green);}
  .trialBadge.no{background:rgba(91,100,114,0.12); color:var(--muted);}
  .planRow{
    display:flex; justify-content:space-between; align-items:baseline;
    gap:10px;
    padding:7px 0;
    border-top:1px solid var(--line);
    font-size:13px;
  }
  .planRow:first-of-type{border-top:none;}
  .planRow .planName{font-weight:600;}
  .planRow .planQuality{display:block; color:var(--muted); font-size:11.5px; font-weight:400;}
  .planRow .planPrice{font-family:'Outfit', sans-serif; text-align:right; white-space:nowrap;}
  .planRow .planPrice .annual{display:block; color:var(--muted); font-size:11px;}

  /* ============================================================
     Interaction visuelle uniforme — CompareSubs
     ============================================================ */
  .tab,
  .stub,
  .servicesToggle,
  .vpnCard,
  .planCard {
    -webkit-tap-highlight-color: transparent;
  }

  .tab {
    position: relative;
    transition: color .18s ease, filter .18s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .tab:hover {
    color: #fff;
    filter: drop-shadow(0 0 5px rgba(124,77,255,.65)) drop-shadow(0 0 10px rgba(41,182,246,.28));
  }
  /* L'onglet actif garde son texte en dégradé même survolé (et sur mobile, où le survol reste après un toucher) */
  .tabs .tab.active:hover{color:transparent;}
  /* Onglets inactifs survolés (souris uniquement) : même dégradé bleu -> violet que "Découvrir tous les services" */
  @media (hover:hover){
    .tabs .tab:not(.active):hover{
      color:transparent;
      background:linear-gradient(90deg,#29B6F6 0%,#3D7BF0 35%,#6A3DE8 70%,#B23DE8 100%);
      -webkit-background-clip:text; background-clip:text;
      filter:drop-shadow(0 0 5px rgba(106,61,232,.40)) drop-shadow(0 0 10px rgba(61,123,240,.22));
      border-bottom-color:rgba(124,77,255,.55);
    }
  }

  .stub,
  .servicesToggle,
  .planCard {
    transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
  }
  .stub:hover,
  .servicesToggle:hover,
  .planCard:hover {
    transform: translateY(-3px);
    border-color: #7C4DFF;
    background: linear-gradient(180deg, rgba(124,77,255,.09), rgba(41,182,246,.035));
    box-shadow:
      0 0 0 1px rgba(124,77,255,.20),
      0 0 18px rgba(124,77,255,.20),
      0 0 30px rgba(41,182,246,.08);
  }

  .stub.active {
    border-color: #7C4DFF;
    background: linear-gradient(180deg, rgba(124,77,255,.12), rgba(41,182,246,.045));
    box-shadow:
      0 0 0 1px rgba(124,77,255,.24),
      0 0 18px rgba(124,77,255,.22),
      0 0 30px rgba(41,182,246,.08);
  }

  /* Formules et VPN : même grille et même hauteur de base. */
  .vpnGrid,
  .plansGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 14px;
  }

  .vpnCard,
  .planCard {
    min-height: 300px;
    box-sizing: border-box;
    height: 100%;
  }

  .vpnCard {
    border-color: var(--line);
  }
  .vpnCard:hover,
  .vpnCard:focus-visible {
    transform: translateY(-4px);
    border-color: #7C4DFF;
    background: linear-gradient(180deg, rgba(124,77,255,.10), rgba(41,182,246,.04));
    box-shadow:
      0 0 0 1px rgba(124,77,255,.22),
      0 0 20px rgba(124,77,255,.25),
      0 0 36px rgba(41,182,246,.10);
  }

  /* Pas de traits séparateurs ni de tirets dans les cartes. */
  .planRow {
    border-top: none !important;
  }
  .vpnCard ul li::before {
    content: none !important;
  }

  .vpnCard .cardHead {
    display: flex;
    align-items: center;
    min-height: 30px;
  }
  .vpnCard .cardHead h3 {
    margin: 0;
    font-size: 18px;
  }

  @media (max-width: 820px) {
    .vpnGrid,
    .plansGrid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 560px) {
    .vpnGrid,
    .plansGrid {
      grid-template-columns: 1fr;
    }
    .vpnCard,
    .planCard {
      min-height: 260px;
    }
  }

  .vpnCategory{width:100%; margin:0 0 28px;}
  .vpnCategoryTitle{
    display:flex; align-items:center; justify-content:center; gap:10px;
    margin:4px 0 14px; font-size:15px; font-weight:800; letter-spacing:.2px;
    color:#e9e9ff; text-align:center;
  }
  .vpnCategoryTitle::before,.vpnCategoryTitle::after{
    content:""; height:1px; flex:1; max-width:150px;
    background:linear-gradient(90deg,transparent,rgba(117,79,255,.65));
  }
  .vpnCategoryTitle::after{background:linear-gradient(90deg,rgba(41,182,246,.55),transparent);}
  .vpnCategoryCount{
    min-width:24px; height:24px; padding:0 7px; display:inline-flex;
    align-items:center; justify-content:center; border-radius:999px;
    font-size:11px; color:#dcd7ff;
    background:rgba(91,73,180,.16); border:1px solid rgba(121,96,255,.32);
  }
  .vpnCategoryGrid{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;
  }
  .vpnTrialInfo{
    margin:8px 0 12px; padding:9px 10px; border-radius:10px;
    border:1px solid rgba(118,83,255,.28);
    background:linear-gradient(135deg,rgba(41,182,246,.07),rgba(178,61,232,.08));
    font-size:11px; line-height:1.45; color:#ddd9f5;
  }
  .vpnTrialInfo strong{
    color:#b9a6ff; font-weight:800;
  }
  @media (max-width:900px){
    .vpnCategoryGrid{grid-template-columns:repeat(2,minmax(0,1fr));}
  }
  @media (max-width:620px){
    .vpnCategoryGrid{grid-template-columns:1fr;}
    .vpnCategoryTitle::before,.vpnCategoryTitle::after{max-width:60px;}
  }
.vpnTwoColumns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start;width:100%;}.vpnSideColumn{min-width:0;}.vpnSideColumn .vpnCategory{margin:0;}.vpnSideColumn .vpnCategoryGrid{grid-template-columns:repeat(2,minmax(0,1fr));}.vpnCard{height:100%;box-sizing:border-box;}@media(max-width:900px){.vpnTwoColumns{grid-template-columns:1fr;}.vpnSideColumn .vpnCategoryGrid{grid-template-columns:repeat(2,minmax(0,1fr));}}@media(max-width:560px){.vpnSideColumn .vpnCategoryGrid{grid-template-columns:1fr;}}
/* CORRECTION AFFICHAGE VPN — 2 colonnes à gauche + 2 colonnes à droite */
.vpnGrid.visible {
  display: block !important;
  width: 100%;
  margin-top: 24px;
}
.vpnTwoColumns {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 28px;
  width: 100%;
  align-items: start;
}
.vpnSideColumn {
  width: 100%;
  min-width: 0;
}
.vpnSideColumn .vpnCategory {
  width: 100%;
  margin: 0;
}
.vpnSideColumn .vpnCategoryGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px;
  width: 100%;
}
.vpnSideColumn .vpnCard {
  width: 100%;
  min-width: 0;
}
@media (max-width: 820px) {
  .vpnTwoColumns {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 560px) {
  .vpnSideColumn .vpnCategoryGrid {
    grid-template-columns: 1fr !important;
  }
}

/* FINITION VPN — prix mensuel, cartes pleines et halos en quart de cercle */
.vpnCard{
  min-height:330px;
  padding:17px;
  overflow:hidden;
  justify-content:flex-start;
}

/* Halos inspirés du fond du site : un quart de cercle lumineux dans le coin. */
.vpnCard::after{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  border-radius:50%;
  pointer-events:none;
  opacity:.72;
  filter:blur(15px);
  animation:vpnCornerGlow 4.8s ease-in-out infinite;
}

/* Engagements longs : violet depuis le coin inférieur gauche. */
.vpnSideColumn.long .vpnCard::after{
  left:-76px;
  bottom:-76px;
  background:radial-gradient(circle at 100% 100%,
    rgba(216,97,255,.72) 0%,
    rgba(216,97,255,.48) 28%,
    rgba(216,97,255,.20) 54%,
    rgba(216,97,255,0) 74%);
  box-shadow:0 0 42px rgba(216,97,255,.20);
}

/* Engagements courts : bleu depuis le coin inférieur droit. */
.vpnSideColumn.short .vpnCard::after{
  right:-76px;
  bottom:-76px;
  background:radial-gradient(circle at 100% 100%,
    rgba(61,140,255,.72) 0%,
    rgba(61,140,255,.48) 28%,
    rgba(61,140,255,.20) 54%,
    rgba(61,140,255,0) 74%);
  box-shadow:0 0 42px rgba(61,140,255,.20);
}

@keyframes vpnCornerGlow{
  0%,100%{opacity:.58;filter:blur(16px);transform:scale(.96);}
  50%{opacity:.82;filter:blur(13px);transform:scale(1.04);}
}

/* Plus de petite barre/point : le quart de cercle fait toute la finition lumineuse. */
.vpnCard::before{ content:none; }
.vpnCard .price{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:4px;
  margin:12px 0 4px;
}
.vpnCard .price .perMonth{
  font-size:12px; color:var(--muted); font-weight:600; white-space:nowrap;
}
.vpnPlan{
  font-size:12px; color:#d9d5f2; min-height:18px; margin-bottom:10px;
}
.vpnStats{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:2px 0 10px;
}
.vpnStat{
  min-height:52px; padding:9px 8px; box-sizing:border-box;
  border:1px solid rgba(150,150,180,.18); border-radius:9px;
  background:rgba(255,255,255,.025); display:flex; flex-direction:column;
  justify-content:center;
}
.vpnStat span{font-size:15px; font-weight:800; color:#f3f0ff; line-height:1.1;}
.vpnStat small{font-size:10px; color:var(--muted); margin-top:4px;}
.vpnTrialInfo{
  margin:0 0 10px !important; padding:7px 9px !important;
  border-radius:8px !important; font-size:10px !important;
}
.vpnTrialInfo .trialCondition{display:block; margin-top:3px; line-height:1.3;}
.vpnCardNote{
  margin-top:auto; padding:8px 9px; border-radius:8px;
  background:rgba(255,255,255,.025); border:1px solid rgba(150,150,180,.14);
  color:var(--muted); font-size:10px; line-height:1.35;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.vpnVisit{
  margin-top:8px; font-size:10px; font-weight:600; letter-spacing:.02em;
  color:var(--muted); padding:2px 0;
  border-bottom:1px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
/* Pied de carte : badge d'essai dans le coin inférieur gauche, lien à droite */
.vpnCardFoot{
  margin-top:auto; padding-top:8px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  min-height:26px;
}
.vpnCardFoot .vpnVisit{margin:0 0 0 auto; white-space:nowrap;}
.vpnCardFoot .vpn-trial-badge{margin:0 !important; white-space:nowrap; font-size:11px !important; padding:4px 8px !important;}
/* "Le plus complet" : languette collée dans le coin supérieur droit, à l'intérieur de la carte */
.vpnCard .tag{top:0; left:auto; right:0; border-radius:0 11px 0 9px; padding:3px 10px; font-size:10.5px; z-index:1;}
.vpnCard .tag:empty{display:none;}
/* Cartes étroites (tablette, ~200px de large) : badge plus compact ; s'il y a un badge d'essai,
   l'étiquette "Visiter le site" est masquée (toute la carte reste cliquable) */
.vpnCard{container-type:inline-size;}
@container (max-width:190px){
  .vpnCardFoot .vpn-trial-badge{font-size:10px !important; padding:4px 6px !important;}
  .vpnCardFoot .vpn-trial-badge ~ .vpnVisit{display:none;}
}
.vpnCard:hover .vpnVisit{
  color:#e6e1ff;
  border-image:linear-gradient(90deg,#3D7BF0,#B23DE8) 1;
}
@media(max-width:560px){.vpnCard{min-height:300px;}.vpnStats{gap:6px;}}

/* ---- vpn-free-trial-green-final ---- */
.vpn-trial, .vpnTrial, .trial-badge, .free-trial, .freeTrial,
[data-trial], [class*="trial"]{
  color:#55f59a !important;
  border-color:rgba(85,245,154,.35) !important;
}
.vpn-trial-badge{
  display:inline-flex !important;
  align-items:center !important;
  width:max-content !important;
  padding:5px 9px !important;
  margin-top:8px !important;
  border-radius:7px !important;
  background:rgba(45,220,120,.10) !important;
  border:1px solid rgba(85,245,154,.30) !important;
  color:#55f59a !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
}

/* ---- vpn-remove-descriptions-final ---- */
/* Supprime les petites phrases descriptives des cartes VPN */
.vpn-description,
.vpn-desc,
.vpn-subtitle,
.vpn-tagline,
.vpn-note,
.vpn-card-note,
.vpnCardNote,
.vpn-meta,
.vpnTagline,
[class*="vpn-description"],
[class*="vpn-desc"],
[class*="vpn-tagline"],
[class*="vpn-note"]{
  display:none !important;
}

/* ---- vpn-cards-compact-final ---- */
/* Cartes VPN plus compactes : moins de vide sans changer leur largeur */
.vpn-card,
.vpnCard,
.vpn-long-card,
.vpn-short-card,
[data-vpn-card]{
  aspect-ratio:auto !important;
  min-height:0 !important;
  height:auto !important;
  padding-top:18px !important;
  padding-bottom:18px !important;
}

/* Le contenu reste bien espacé, mais la carte s'arrête juste après */
.vpn-card .vpn-trial-badge,
.vpnCard .vpn-trial-badge,
.vpn-long-card .vpn-trial-badge,
.vpn-short-card .vpn-trial-badge{
  margin-bottom:0 !important;
}

/* ---- vpn-equal-size-final ---- */
/* Toutes les cartes VPN ont exactement la même hauteur */
.vpnCategoryGrid{
  align-items:stretch !important;
}
.vpnCard,
.vpn-long-card,
.vpn-short-card{
  height:250px !important;
  min-height:250px !important;
  max-height:250px !important;
  box-sizing:border-box !important;
}
@media(max-width:560px){
  .vpnCard,
  .vpn-long-card,
  .vpn-short-card{
    height:250px !important;
    min-height:250px !important;
    max-height:250px !important;
  }
}

/* ---- vpn-logos-everywhere ---- */
.vpn-logo{
  width:42px !important;
  height:42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 42px !important;
  border-radius:10px !important;
  box-sizing:border-box !important;
}
.vpn-logo-wrap{
  width:42px !important;
  height:42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 42px !important;
}

/* ---- vpn-sort-label-final ---- */
.vpnCategoryTitle{position:relative;display:flex;align-items:center;justify-content:space-between}
.vpnSortLabel{
  font-size:10px !important;
  font-weight:600 !important;
  opacity:.62 !important;
  margin-left:auto !important;
  margin-right:10px !important;
  white-space:nowrap !important;
  letter-spacing:.02em !important;
}

/* ---- all-flags-real-images ---- */
.flag-img-real{
  width:24px !important;
  height:16px !important;
  min-width:24px !important;
  object-fit:contain !important;
  display:inline-block !important;
  vertical-align:middle !important;
  border-radius:2px !important;
  margin-right:7px !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.10) !important;
}
.flag{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:24px !important;
  min-width:24px !important;
  height:16px !important;
}
.countryCell .flag-img-real{
  margin-right:7px !important;
}
.flag-img-real.flag-square{
  width:auto !important;
  min-width:0 !important;
  aspect-ratio:1/1 !important;
}
.flag:has(.flag-square),
.cflag:has(.flag-square),
.residenceSelectedFlag:has(.flag-square),
.residenceCountryFlag:has(.flag-square),
.langOption .flag:has(.flag-square),
.langButton .flag:has(.flag-square){
  width:auto !important;
  min-width:0 !important;
}

/* ---- residence-picker-v2 ---- */
  .residenceBar{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    margin-top:20px;
    width:100%;
  }

  .residenceBar > label{
    font-size:13px;
    color:var(--muted);
    font-weight:600;
  }

  .residencePicker{
    position:relative;
    z-index:100;
  }

  .residencePickerButton{
    min-width:190px;
    min-height:42px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:9px 13px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:22px;
    background:#111216;
    color:var(--text);
    font-family:'Outfit',sans-serif;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
  }

  .residencePickerButton:hover,
  .residencePickerButton[aria-expanded="true"]{
    border-color:rgba(126,92,255,.9);
    background:#16171C;
    box-shadow:0 0 16px rgba(126,92,255,.28), inset 0 0 12px rgba(126,92,255,.07);
  }

  .residencePickerButton:active{ transform:translateY(1px); }

  .residenceSelectedFlag{
    width:24px;
    height:16px;
    min-width:24px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .residenceSelectedFlag img{
    width:24px !important;
    height:16px !important;
    min-width:24px !important;
    object-fit:cover !important;
    display:block !important;
    margin:0 !important;
    border-radius:3px !important;
    box-shadow:0 0 0 1px rgba(255,255,255,.14);
  }

  .residenceSelectedName{
    flex:1;
    text-align:left;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .residencePickerChevron{
    font-size:10px;
    color:var(--muted);
    transition:transform .18s ease;
  }

  .residencePickerButton[aria-expanded="true"] .residencePickerChevron{
    transform:rotate(180deg);
  }

  .residencePickerMenu{
    display:none;
    position:absolute;
    top:calc(100% + 8px);
    left:50%;
    transform:translateX(-50%);
    width:285px;
    max-width:min(285px, calc(100vw - 28px));
    max-height:390px;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:7px;
    background:rgba(17,18,22,.98);
    border:1px solid rgba(255,255,255,.20);
    border-radius:14px;
    box-shadow:0 16px 42px rgba(0,0,0,.42), 0 0 22px rgba(95,84,255,.16);
    backdrop-filter:blur(14px);
  }

  .residencePickerMenu.open{ display:block; }

  .residenceCountryGroup{
    margin:0;
  }

  .residenceCountryGroupTitle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:9px 10px 7px;
    margin:0;
    background:rgba(17,18,22,.98);
    color:var(--muted);
    cursor:pointer;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
  }
  .residenceCountryGroupTitle:hover{color:var(--text);}
  .residenceCountryGroupTitle .caretSmall{font-size:9px; color:var(--muted); transition:transform .15s ease;}
  .residenceCountryGroupTitle.open .caretSmall{transform:rotate(180deg);}

  .residenceCountryOption{
    width:100%;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 10px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:var(--text);
    font-family:'Outfit',sans-serif;
    font-size:13px;
    font-weight:600;
    text-align:left;
    cursor:pointer;
    transition:background .14s ease, color .14s ease, transform .14s ease;
  }

  .residenceCountryOption:hover{
    background:rgba(112,91,255,.18);
    color:#fff;
  }

  .residenceCountryOption.active{
    background:rgba(112,91,255,.24);
    color:#fff;
    box-shadow:inset 2px 0 0 rgba(159,128,255,.95);
  }

  .residenceCountryFlag{
    width:24px;
    height:16px;
    min-width:24px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .residenceCountryFlag img{
    width:24px !important;
    height:16px !important;
    min-width:24px !important;
    object-fit:cover !important;
    display:block !important;
    margin:0 !important;
    border-radius:3px !important;
  }

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

  .residencePickerMenu::-webkit-scrollbar{ width:7px; }
  .residencePickerMenu::-webkit-scrollbar-track{ background:transparent; }
  .residencePickerMenu::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.20);
    border-radius:10px;
  }

  @media (max-width:600px){
    .residenceBar{ gap:8px; }
    .residencePickerButton{ min-width:175px; }
    .residencePickerMenu{
      left:0;
      transform:none;
      width:280px;
      max-width:calc(100vw - 24px);
    }
  }

/* ---- residence-single-flag-css ---- */
  #residenceButtonFlag {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:22px !important;
    min-width:22px !important;
    height:16px !important;
    overflow:hidden !important;
  }
  #residenceButtonFlag .flag-img-real {
    display:block !important;
    width:22px !important;
    min-width:22px !important;
    height:16px !important;
    margin:0 !important;
  }

/* ============================================================
   VERSION SMARTPHONE — regroupe les ajustements pour petits écrans.
   Placé en fin de feuille de style pour passer après les règles ci-dessus.
   ============================================================ */
@media (max-width:560px){
  /* Formules : la carte prend la hauteur de son contenu, sans grand vide */
  .plansGrid .planCard{min-height:0; height:auto;}

  /* VPN : carte compacte sur deux colonnes internes
     [logo + nom | prix] / [durée | prix] / [serveurs + pays] / [essai | lien] */
  .vpnSideColumn .vpnCard{
    height:auto !important; min-height:0 !important; max-height:none !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"head price" "plan price" "stats stats" "foot foot";
    column-gap:12px; row-gap:8px; align-items:center;
    padding:14px !important;
  }
  .vpnCard .cardHead{grid-area:head; min-width:0; gap:10px;}
  .vpnCard .cardHead h3{margin:0; font-size:16px; line-height:1.2;}
  .vpnCard .vpn-logo{width:36px !important; height:36px !important;}
  .vpnCard .price{
    grid-area:price; margin:0; font-size:22px;
    flex-direction:column; align-items:flex-end; gap:0; text-align:right;
  }
  .vpnCard .vpnPlan{grid-area:plan; margin:0; min-height:0;}
  .vpnCard .vpnStats{grid-area:stats; margin:0; gap:6px;}
  .vpnCard .vpnStat{min-height:0; padding:7px 9px; flex-direction:row; align-items:baseline; gap:6px;}
  .vpnCard .vpnStat span{font-size:14px;}
  .vpnCard .vpnStat small{margin-top:0;}
  .vpnCard .vpnTrialInfo, .vpnCard .vpnCardNote{grid-column:1 / -1;}
  .vpnCard .vpnCardFoot{grid-area:foot; margin:0; padding:0;}
  /* Étiquette "Le plus complet" : dans la carte (au-dessus, elle était coupée) */
  .vpnCard .tag{top:10px; left:14px; right:auto; border-radius:20px; padding:3px 9px; font-size:11px;}
  .vpnCard .tag:empty{display:none;}
  .vpnSideColumn .vpnCard.best:has(.tag:not(:empty)){padding-top:38px !important;}
  .vpnCategory{margin-bottom:20px;}

  /* Menus déroulants : toujours entièrement dans l'écran */
  /* Le menu des pays est centré sur toute la ligne "Votre pays de résidence" (donc sur l'écran) */
  .residenceBar{position:relative; z-index:100;}
  .residenceBar .residencePicker{position:static;}
  .residencePickerMenu{
    left:50%; right:auto; transform:translateX(-50%);
    width:320px; max-width:calc(100vw - 32px);
    max-height:min(390px, 55vh);
  }
  .langMenu{max-height:min(340px, 60vh); max-width:calc(100vw - 32px);}
}

/* Téléphones et tablettes : Safari remplit la zone sous l'heure et sous sa barre avec la
   couleur de fond de la page. Fond noir uni partout, donc aucune démarcation. */
@media (hover:none) and (pointer:coarse){
  html{background-color:var(--bg);}
}

/* Faisceaux néon discrets (violet et bleu) sur le fond noir, PC et téléphone. Ils s'effacent en
 haut et en bas de l'écran pour que la zone sous l'heure et sous la barre de Safari reste noire. */
body::after{
  display:block;
  background:
    linear-gradient(118deg, transparent 0 22%, rgba(140,82,255,.20) 26%, rgba(140,82,255,.05) 29%, transparent 33%),
    linear-gradient(118deg, transparent 0 30%, rgba(140,82,255,.10) 31.5%, transparent 33%),
    linear-gradient(62deg, transparent 0 58%, rgba(41,182,246,.17) 62%, rgba(41,182,246,.04) 65%, transparent 69%),
    linear-gradient(62deg, transparent 0 69%, rgba(41,182,246,.09) 70.5%, transparent 72%),
    radial-gradient(ellipse 260px 220px at 0% 30%, rgba(140,82,255,.10), transparent 70%),
    radial-gradient(ellipse 260px 220px at 100% 72%, rgba(41,182,246,.09), transparent 70%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 110px, #000 calc(100% - 130px), transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 110px, #000 calc(100% - 130px), transparent 100%);
  animation:neonBeamsPulse 9s ease-in-out infinite;
}
@keyframes neonBeamsPulse{ 0%,100%{opacity:.75;} 50%{opacity:1;} }

/* ============================================================
   TÉLÉPHONE — fond noir et effets néon discrets
   (placé en dernier pour passer après toutes les règles précédentes)
   ============================================================ */
@media (max-width:560px){
  body::before{display:none;}  /* fines lignes de balayage */

  /* Fin de page : le défilement s'arrête juste sous "© ... Tous droits réservés"
     (plus de grande marge vide, et pas d'effet élastique au-delà) */
  .wrap{padding-bottom:calc(14px + env(safe-area-inset-bottom));}
  html, body{overscroll-behavior-y:none;}


  /* Titre de la FAQ : sans halo (le grand titre et l'onglet actif gardent leur néon, comme sur PC) */
  .faqTitle{filter:none;}
  .faqTitle .faqTitleChev{filter:none;}

  /* Onglets inactifs : pas de lueur au toucher (le survol "colle" sur écran tactile) */
  .tabs .tab:not(.active):hover{filter:none;}

  /* Néon façon PC, compatible Safari iPhone : Safari n'affiche pas le halo "drop-shadow" sur un texte
     en dégradé. Le halo de l'onglet actif est donc une copie du texte (data-glow) placée juste derrière. */
  /* Grand titre : dégradé seul, sans halo sur téléphone */
  h1#txtTitle{filter:none;}

  /* Onglet actif : cadre violet lumineux + soulignement rose + texte dégradé avec halo (comme sur PC) */
  .tabs .tab.active{
    filter:none;
    isolation:isolate;
    border-bottom:2px solid #E25CFF;
    box-shadow:0 2px 10px -2px rgba(226,92,255,.75);
  }
  .tabs .tab.active::before{
    content:"";
    position:absolute; inset:0; z-index:-2;
    border:1px solid rgba(178,110,255,.45);
    border-bottom:none;
    background:linear-gradient(180deg, rgba(106,61,232,.20), rgba(61,123,240,.10));
    box-shadow:0 0 14px rgba(124,77,255,.45), inset 0 0 14px rgba(124,77,255,.20);
    pointer-events:none;
  }
  .tabs .tab.active::after{
    content:attr(data-glow);
    position:absolute; inset:0; z-index:-1;
    display:flex; align-items:center; justify-content:center; text-align:center;
    padding:inherit;
    color:transparent;
    text-shadow:0 0 8px rgba(106,61,232,.9), 0 0 16px rgba(61,123,240,.6);
    pointer-events:none;
  }

  /* Tableau : bordure neutre et ombre simple au lieu du halo violet */
  .board{border-color:rgba(255,255,255,.09); box-shadow:0 4px 18px rgba(0,0,0,.45);}
  .board::before{opacity:.3;}

  /* Services, formules : sélection marquée par la bordure seulement */
  .stub.active, .stub:hover, .servicesToggle:hover, .planCard:hover{
    box-shadow:none; background:var(--stub); transform:none;
  }
  .stub.active{border-color:rgba(124,77,255,.7);}

  /* Cartes VPN : pas de halo flou sur téléphone (quasi invisible et très coûteux à redessiner,
     c'est lui qui faisait saccader l'animation de repli) */
  .vpnCard::after{display:none !important;}

  /* Encadré "Comment en profiter" et sélecteur de pays */
  .vpnHighlight{background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.10);}
  .residencePickerButton:hover,
  .residencePickerButton[aria-expanded="true"]{box-shadow:none; border-color:rgba(126,92,255,.6);}
}

/* Sections VPN repliables : la flèche n'existe que sur téléphone */
.vpnCollapseChev{display:none;}
@media (max-width:560px){
  .vpnCategoryTitle{cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none;}
  .vpnCollapseChev{
    display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px; border-radius:50%;
    font-size:11px; color:var(--muted);
    border:1px solid rgba(255,255,255,.12);
    transition:transform .2s ease;
  }
  .vpnCategory.collapsed .vpnCollapseChev,
  .vpnCategory.collapsing .vpnCollapseChev{transform:rotate(-90deg);}
  .vpnCategoryGrid.vpnAnimating{
    overflow:hidden;
    transition:height .42s cubic-bezier(.4,0,.2,1), opacity .32s ease;
    /* Animation plus fluide : la liste est isolée sur son propre calque, Safari ne redessine qu'elle */
    will-change:height, opacity;
    contain:layout paint;
    transform:translateZ(0);
  }
  .vpnCategoryGrid.vpnAnimating .vpnCard{transition:none !important;}
  .vpnCategory.collapsed .vpnCategoryGrid{display:none;}
  .vpnCategory{transition:margin-bottom .42s cubic-bezier(.4,0,.2,1);}
  .vpnCategory.collapsed, .vpnCategory.collapsing{margin-bottom:8px;}
}

@media (prefers-reduced-motion: reduce){
  body::after{animation:none !important;}
}

/* ============================================================
   SERVICES DÉFILANTS : petite carte aux couleurs de chaque marque
   (icône + nom + prix le plus bas). --brand est défini sur chaque carte.
   ============================================================ */
.servicesTrack .stub{
  --brand:#7C4DFF;
  gap:11px; padding:9px 16px 9px 9px; border-radius:14px;
  justify-content:flex-start; text-align:left;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 16%, transparent), transparent 60%),
    var(--stub);
  /* Halo brillant identique pour tous les services, dans la couleur de chaque marque */
  border:1px solid color-mix(in srgb, var(--brand) 62%, rgba(255,255,255,.10));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 18%, transparent), transparent 70%),
    var(--stub);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--brand) 16%, transparent),
             0 0 12px color-mix(in srgb, var(--brand) 24%, transparent),
             inset 0 1px 0 rgba(255,255,255,.06);
}
.servicesTrack .stub .stubIcon{
  flex:0 0 34px; width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, color-mix(in srgb, var(--brand) 92%, #fff), color-mix(in srgb, var(--brand) 78%, #000));
  box-shadow:0 4px 12px color-mix(in srgb, var(--brand) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
}
.servicesTrack .stub .stubIcon svg{ width:18px; height:18px; display:block; }
.servicesTrack .stub .stubInitials{ font:800 12px 'Outfit',sans-serif; color:#fff; letter-spacing:.02em; }
.servicesTrack .stub .info{ align-items:flex-start; gap:1px; }
.servicesTrack .stub .name{ font-size:15px; line-height:1.15; text-align:left; }
.servicesTrack .stub .stubFrom{ font-size:11px; font-weight:600; color:var(--muted); letter-spacing:.01em; }
.servicesTrack .stub:hover{ transform:translateY(-3px); }
.servicesTrack .stub.active{ transform:none; }
.servicesTrack .stub:hover{
  border-color:color-mix(in srgb, var(--brand) 75%, #fff);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 26%, transparent), transparent 70%),
    var(--stub);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--brand) 34%, transparent),
             0 0 22px color-mix(in srgb, var(--brand) 48%, transparent),
             inset 0 1px 0 rgba(255,255,255,.08);
}

/* Pendant l'animation de fermeture, les cartes doivent pouvoir sortir de la bande */
/* Fondu des bords de la bande : sa largeur (--tickerFade) s'anime en douceur à l'ouverture et à la
   fermeture, au lieu d'apparaître/disparaître d'un coup. Le masque coupe aussi les cartes sur les côtés
   pendant les animations, sans jamais élargir la page (contain:inline-size). */
@property --tickerFade{ syntax:'<length>'; inherits:false; initial-value:60px; }
.servicesTicker{
  --tickerFade:60px;
  min-width:0;
  contain:inline-size;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 var(--tickerFade), #000 calc(100% - var(--tickerFade)), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 var(--tickerFade), #000 calc(100% - var(--tickerFade)), transparent 100%);
  transition:--tickerFade .45s cubic-bezier(.22,1,.36,1);
}
.servicesTicker.listMode{ --tickerFade:0px; }
.servicesTicker.listMode:not(.settled){
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 var(--tickerFade), #000 calc(100% - var(--tickerFade)), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 var(--tickerFade), #000 calc(100% - var(--tickerFade)), transparent 100%);
}
/* Pendant l'animation, rien ne dépasse sur les côtés (sinon la page s'élargit sur téléphone) ;
   contain:inline-size garantit que cette découpe ne change jamais la largeur de la bande. */
.servicesTicker.listMode:not(.settled){ overflow-x:clip; overflow-y:visible; }
/* Grille posée : plus de masque, pour que le halo des cartes ne soit jamais coupé */
.servicesTicker.listMode.settled{ -webkit-mask-image:none; mask-image:none; }
/* Défilement continu : calque dédié sur la carte graphique, pour un mouvement sans à-coups */
.servicesTrack{ will-change:transform; backface-visibility:hidden; }
.servicesTrack.listMode{ will-change:auto; }
@media (max-width:560px){
  .servicesTrack .stub{ padding:8px 14px 8px 8px; gap:9px; }
  .servicesTrack .stub .stubIcon{ flex-basis:30px; width:30px; height:30px; border-radius:9px; }
  .servicesTrack .stub .name{ font-size:14px; }
  /* Téléphone : pas d'ombre lumineuse (le survol « colle » au toucher), seule la bordure marque la sélection */
  .servicesTrack .stub:hover{ transform:none; }
}

/* ============================================================
   TABLEAU DES PRIX : version « Tableau néon » (police Outfit)
   Ordinateur : vrai tableau, sans traits, barre d'économie en dégradé.
   Téléphone : chaque pays sur deux lignes (pays + prix local / prix converti + économie).
   ============================================================ */
.board{
  font-family:'Outfit',system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
  border-radius:20px;
  border:1px solid rgba(216,97,255,.22);
  background:rgba(16,17,22,.92);
  box-shadow:0 0 0 1px rgba(62,240,255,.04), 0 0 38px rgba(106,61,232,.12), 0 12px 34px rgba(0,0,0,.4);
}
.board .board-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:20px 22px;
  background:linear-gradient(90deg, rgba(41,182,246,.07), rgba(178,61,232,.07));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.board .boardTitleWrap{ display:flex; align-items:center; gap:13px; min-width:0; }
.board .boardTitleText{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.board .boardIcon{
  --brand:#E6342A;
  flex:0 0 42px; width:42px; height:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, color-mix(in srgb, var(--brand) 92%, #fff), color-mix(in srgb, var(--brand) 78%, #000));
  box-shadow:0 4px 16px color-mix(in srgb, var(--brand) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
}
.board .boardIcon svg{ width:21px; height:21px; display:block; }
.board .boardIcon:empty{ display:none; }
.board .boardIcon .stubInitials{ font:800 13px 'Outfit',sans-serif; color:#fff; }
.board .board-head h2{ margin:0; font-size:22px; font-weight:700; letter-spacing:-.01em; line-height:1.15; }
.board .board-head .sub{ font-size:13px; color:var(--muted); font-weight:400; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.board .refChip{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  padding:3px 10px 3px 6px; border-radius:999px; font-size:12px; font-weight:500; color:#c9cdd8;
  background:rgba(124,77,255,.12); border:1px solid rgba(124,77,255,.32);
}
.board .refChip strong{ color:var(--text); font-weight:600; }
.board .refChipFlag{ display:inline-flex; width:18px; height:12px; border-radius:3px; overflow:hidden; flex:0 0 18px; box-shadow:0 0 0 1px rgba(255,255,255,.12); }
.board .refChipFlag > *{ width:100% !important; height:100% !important; min-width:0 !important; margin:0 !important; display:block !important; object-fit:cover !important; box-shadow:none !important; }
.board .refChipFlag svg{ width:100%; height:100%; display:block; }

/* Rang : pastilles carrées arrondies, même police (Outfit) que les autres chiffres du tableau */
.board .rankChip{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:9px; box-sizing:border-box;
  font-family:'Outfit',sans-serif; font-weight:600; font-size:14px; line-height:1;
  font-variant-numeric:tabular-nums; color:var(--muted);
}
.board .rankChip.rc1{
  color:#fff; font-weight:700;
  background:linear-gradient(135deg,#29B6F6 0%,#3D7BF0 35%,#6A3DE8 70%,#B23DE8 100%);
  box-shadow:0 0 14px rgba(106,61,232,.55), inset 0 1px 0 rgba(255,255,255,.25);
}
.board .rankChip.rc2{
  color:#fff; font-weight:700;
  border:1px solid transparent;
  background:linear-gradient(135deg, rgba(61,123,240,.22), rgba(178,61,232,.22)) padding-box,
             linear-gradient(#121319,#121319) padding-box,
             linear-gradient(135deg,#29B6F6,#6A3DE8,#B23DE8) border-box;
  box-shadow:0 0 10px rgba(106,61,232,.30);
}
.board .rankChip.rc3{
  color:#e6e1ff; font-weight:700;
  border:1px solid transparent;
  background:linear-gradient(rgba(16,17,22,.95), rgba(16,17,22,.95)) padding-box,
             linear-gradient(135deg, rgba(41,182,246,.75), rgba(178,61,232,.75)) border-box;
}
.board .boardTools{ display:flex; gap:8px; align-items:center; }
.board .boardSearchWrap{
  position:relative; display:flex; align-items:center;
  color:var(--muted);
}
.board .boardSearchWrap svg{ position:absolute; left:13px; pointer-events:none; }
.board .boardSearch{
  height:38px; width:200px; padding:0 14px 0 36px; box-sizing:border-box;
  border-radius:11px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.09);
  color:var(--text); font-family:inherit; font-size:13.5px; font-weight:500;
  transition:border-color .18s ease, width .25s ease, box-shadow .18s ease;
}
.board .boardSearch:focus{ outline:none; width:230px; border-color:rgba(124,77,255,.7); box-shadow:0 0 0 3px rgba(124,77,255,.15); }
.board .boardShareBtn{
  height:38px; padding:0 14px; border-radius:11px; display:inline-flex; align-items:center; gap:8px;
  background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.09); color:var(--text);
  font-family:inherit; font-size:13.5px; font-weight:500; cursor:pointer;
  transition:border-color .18s ease, background-color .18s ease;
}
.board .boardShareBtn:hover{ border-color:rgba(124,77,255,.6); background:rgba(124,77,255,.10); }

.board table{ width:100%; border-collapse:separate; border-spacing:0; }
.board thead th{
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#6f7685;
  text-align:left; padding:14px 12px 10px; border-bottom:none; white-space:nowrap;
}
.board thead th.num, .board tbody td.num{ text-align:right; }
.board thead th:first-child, .board tbody td:first-child{ padding-left:22px; }
.board thead th:last-child, .board tbody td:last-child{ padding-right:22px; }
.board tbody td{ padding:11px 12px; font-size:15px; border-bottom:none; transition:background-color .15s ease; }
.board td.rank{ width:44px; }
.board .rankNum{ color:var(--muted); font-weight:500; font-size:14px; width:28px; }
.board .rankBadge{ width:28px; height:28px; }
.board .countryCell{ display:flex; align-items:center; gap:12px; font-weight:500; min-width:0; }
.board .cflag{ border-radius:4px; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.12); margin-right:0; }
.board .countryCell .flag-img-real{ margin-right:0 !important; border-radius:4px !important; box-shadow:none !important; }
.board td.price{ color:var(--muted); font-weight:400; font-family:inherit; white-space:nowrap; }
.board td.chf{ color:var(--text); font-weight:700; font-size:16px; font-family:inherit; white-space:nowrap; }
.board td.save{ font-family:inherit; font-weight:700; }
.board .saveInner{ display:flex; flex-direction:row; align-items:center; justify-content:flex-end; gap:10px; }
.board .saveTrack{ position:relative; width:110px; height:8px; border-radius:8px; background:rgba(255,255,255,.06); overflow:hidden; flex:0 0 auto; }
.board .saveTrack i{
  position:absolute; left:0; top:0; bottom:0; border-radius:8px;
  background:linear-gradient(90deg,#29B6F6 0%,#3D7BF0 35%,#6A3DE8 70%,#B23DE8 100%);
  box-shadow:0 0 10px rgba(106,61,232,.6);
}
.board .savePct{ min-width:44px; text-align:right; white-space:nowrap; }
.board .topSavingsTag{ flex:0 0 auto; }
.board tr.reference td{ background:rgba(255,255,255,.025); color:var(--muted); font-style:normal; }
.board tr.reference td.chf{ color:var(--muted); }
.board tr.reference .savePct{ color:var(--muted); }
.board .refTag{ font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#bdafff; margin-left:2px; white-space:nowrap; }
@media (hover:hover){
  .board tbody tr:hover td{ background:rgba(124,77,255,.07); }
}
.board .showMoreWrap{ padding:8px 20px 4px; display:flex; justify-content:center; }
.board .showMoreBtn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:10px; border:none; background:transparent;
  color:#cfc4ff; font-family:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.board .showMoreBtn:hover{ background:rgba(124,77,255,.10); color:#e6e1ff; }
.board .showMoreBtn{ width:auto; margin:0 auto; justify-content:center; text-align:center; }
/* Tous les drapeaux dans la même largeur (le drapeau suisse est carré) : les noms restent alignés */
.board .countryCell .cflag{ width:24px !important; min-width:24px !important; flex:0 0 24px; }
.board .showMoreBtn svg{ transition:transform .25s ease; }
.board .showMoreBtn.open svg{ transform:rotate(180deg); }
.board .board-foot{ border-top:none; padding:10px 22px 18px; font-size:11.5px; color:#6f7685; text-align:center; line-height:1.6; }
.board .noResults{ padding:28px 16px; }

/* ---------- Téléphone ---------- */
@media (max-width:640px){
  .board{ border-radius:18px; }
  .board .board-head{ padding:16px 14px; gap:12px; }
  .board .boardIcon{ flex-basis:38px; width:38px; height:38px; border-radius:11px; }
  .board .board-head h2{ font-size:20px; }
  .board .board-head .sub{ font-size:12.5px; }
  .board .boardTools{ width:100%; }
  .board .boardSearchWrap{ flex:1; min-width:0; }
  .board .boardSearch, .board .boardSearch:focus{ width:100%; }
  .board thead{ display:none; }
  .board table, .board tbody{ display:block; }
  .board tbody tr{
    display:grid; grid-template-columns:30px minmax(0,1fr) auto;
    /* Le rang est sur la 1re ligne, aligné avec le drapeau et le nom du pays */
    grid-template-areas:"r w c" ". l s";
    column-gap:10px; row-gap:3px; align-items:center;
    padding:10px 14px;
  }
  /* Le n°1 respire autant que les suivants sous la barre de recherche */
  .board tbody tr:first-child{ padding-top:22px; }
  .board tbody td, .board thead th:first-child, .board tbody td:first-child, .board tbody td:last-child{ padding:0 !important; background:none !important; box-shadow:none !important; }
  .board td.rank{ grid-area:r; width:auto; align-self:center; display:flex; align-items:center; justify-content:center; }
  .board td.ctry{ grid-area:w; min-width:0; }
  .board .cname{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .board td.chf{ grid-area:c; text-align:right; font-size:15.5px; }
  .board td.price{ grid-area:l; text-align:left !important; font-size:12.5px; padding-left:36px !important; }
  .board td.save{ grid-area:s; font-size:14px; }
  .board .saveInner{ gap:8px; }
  .board .saveTrack{ width:56px; height:6px; }
  .board .savePct{ min-width:0; }
  .board .rankChip{ width:26px; height:26px; border-radius:8px; font-size:13px; }
  .board .refChip{ font-size:11.5px; }
  .board tr.reference{ background:rgba(255,255,255,.025); }
  .board td.noResults{ grid-column:1 / -1; padding:24px 10px !important; text-align:center; }
  .board tbody tr:has(.noResults){ display:block; }
  .board .board-foot{ padding:8px 16px 16px; }
}

/* ============================================================
   DA « NÉON » APPLIQUÉE À TOUT LE SITE
   Mêmes codes que le tableau des prix : panneaux sombres à contour violet,
   bandes d'en-tête en dégradé bleu → violet, étiquettes en capitales espacées,
   commandes sombres arrondies, police Outfit, chiffres alignés.
   ============================================================ */
:root{
  --nx-panel: rgba(16,17,22,.92);
  --nx-panel-solid: #101116;
  --nx-border: rgba(216,97,255,.22);
  --nx-shadow: 0 0 0 1px rgba(62,240,255,.04), 0 0 38px rgba(106,61,232,.12), 0 12px 34px rgba(0,0,0,.4);
  --nx-band: linear-gradient(90deg, rgba(41,182,246,.07), rgba(178,61,232,.07));
  --nx-card: rgba(255,255,255,.028);
  --nx-card-border: rgba(255,255,255,.07);
  --nx-control: rgba(0,0,0,.25);
  --nx-control-border: rgba(255,255,255,.09);
  --nx-label: #6f7685;
  --nx-grad: linear-gradient(90deg,#29B6F6 0%,#3D7BF0 35%,#6A3DE8 70%,#B23DE8 100%);
}
body{ font-family:'Outfit',system-ui,sans-serif; font-variant-numeric:tabular-nums; }
button, input, select, textarea{ font-family:inherit; }

/* ---------- En-tête : devise, langue, pays de résidence ---------- */
#mainSiteWrap .langButton,
#mainSiteWrap .residencePickerButton{
  background:var(--nx-control); border:1px solid var(--nx-control-border);
  border-radius:12px; font-weight:500; color:var(--text);
  transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
#mainSiteWrap .langButton:hover,
#mainSiteWrap .residencePickerButton:hover,
#mainSiteWrap .residencePickerButton[aria-expanded="true"]{
  background:rgba(124,77,255,.10); border-color:rgba(124,77,255,.6); box-shadow:none;
}
#mainSiteWrap .langButton .caret, #mainSiteWrap .residencePickerChevron{ color:var(--nx-label); }
#mainSiteWrap .residenceBar label{ color:var(--muted); font-weight:500; }
#mainSiteWrap .lede{ color:var(--muted); font-weight:400; }
#mainSiteWrap h1#txtTitle{ font-weight:700; letter-spacing:-.02em; }

/* Menus déroulants */
#mainSiteWrap .langMenu,
#mainSiteWrap .residencePickerMenu{
  background:rgba(16,17,22,.97); border:1px solid var(--nx-border); border-radius:14px;
  box-shadow:var(--nx-shadow);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  padding:6px;
}
#mainSiteWrap .langOption{ border-radius:9px; font-weight:500; }
#mainSiteWrap .langOption:hover{ background:rgba(124,77,255,.10); }
#mainSiteWrap .langOption.active{ color:#e6e1ff; font-weight:600; background:rgba(124,77,255,.14); }
#mainSiteWrap .langGroupLabel{
  background:transparent; border-radius:9px; color:var(--nx-label);
  font-size:11px; font-weight:600; letter-spacing:.12em;
}
#mainSiteWrap .langGroupLabel:hover{ background:rgba(255,255,255,.04); color:var(--text); }

/* ---------- Bouton « Découvrir tous les services » ---------- */
#mainSiteWrap .servicesToggle{ font-weight:600; }

/* ---------- Onglet VPN : chaque colonne devient un panneau comme le tableau ---------- */
#mainSiteWrap .vpnTwoColumns{ gap:22px; }
#mainSiteWrap .vpnSideColumn .vpnCategory{
  background:var(--nx-panel); border:1px solid var(--nx-border); border-radius:20px;
  box-shadow:var(--nx-shadow); overflow:hidden; margin:0 0 22px;
}
#mainSiteWrap .vpnCategoryTitle{
  margin:0; padding:16px 18px; gap:10px;
  justify-content:flex-start; text-align:left;
  background:var(--nx-band); border-bottom:1px solid rgba(255,255,255,.06);
  font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--text);
}
#mainSiteWrap .vpnCategoryTitle::before,
#mainSiteWrap .vpnCategoryTitle::after{ display:none; }
#mainSiteWrap .vpnCategoryCount{
  order:2; min-width:26px; height:24px; font-size:12px; font-weight:600; color:#e6dcff;
  background:rgba(124,77,255,.14); border:1px solid rgba(124,77,255,.35);
}
#mainSiteWrap .vpnSortLabel{
  order:3; margin-left:auto !important; margin-right:0 !important;
  font-size:11px !important; font-weight:600 !important; letter-spacing:.12em !important;
  text-transform:uppercase; color:var(--nx-label); opacity:1 !important;
}
#mainSiteWrap .vpnCollapseChev{ order:4; }
#mainSiteWrap .vpnSideColumn .vpnCategoryGrid{ padding:14px; gap:12px; }

#mainSiteWrap .vpnCard{
  background:var(--nx-card); border:1px solid var(--nx-card-border); border-radius:16px;
  box-shadow:none;
}
#mainSiteWrap .vpnCard::after{ display:none !important; }   /* plus de halos flous dans les coins */
#mainSiteWrap .vpnCard:hover, #mainSiteWrap .vpnCard:focus-visible{
  transform:translateY(-2px); background:rgba(124,77,255,.06); border-color:rgba(124,77,255,.45);
  box-shadow:0 0 0 1px rgba(124,77,255,.12), 0 8px 22px rgba(0,0,0,.35);
}
#mainSiteWrap .vpnCard.best{
  border:1px solid transparent;
  background:linear-gradient(180deg, rgba(124,77,255,.10), rgba(124,77,255,.02)) padding-box,
             linear-gradient(#14151c,#14151c) padding-box,
             linear-gradient(135deg, rgba(41,182,246,.8), rgba(106,61,232,.8), rgba(178,61,232,.8)) border-box;
  box-shadow:0 0 18px rgba(106,61,232,.18);
}
#mainSiteWrap .vpnCard .tag{
  background:var(--nx-grad); color:#fff; font-weight:700; letter-spacing:.04em;
  box-shadow:0 0 12px rgba(106,61,232,.45);
}
#mainSiteWrap .vpnCard .cardHead h3{ font-weight:700; letter-spacing:-.01em; }
#mainSiteWrap .vpnCard .price{ font-family:'Outfit',sans-serif; font-weight:700; letter-spacing:-.02em; }
#mainSiteWrap .vpnCard .price .perMonth{ color:var(--muted); font-weight:500; }
#mainSiteWrap .vpnPlan{ color:var(--muted); font-weight:500; }
#mainSiteWrap .vpnStat{
  background:var(--nx-control); border:1px solid var(--nx-card-border); border-radius:10px;
}
#mainSiteWrap .vpnStat span{ color:var(--text); font-weight:700; }
#mainSiteWrap .vpnStat small{
  color:var(--nx-label); font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
}
#mainSiteWrap .vpn-trial-badge{
  border-radius:999px !important; font-weight:600 !important;
  background:rgba(61,190,134,.12) !important; border:1px solid rgba(61,190,134,.35) !important; color:#53d79c !important;
}
#mainSiteWrap .vpnVisit{ font-weight:500; }
#mainSiteWrap .vpnFoot, #mainSiteWrap #vpnFootNote{
  color:var(--nx-label); font-size:12px; line-height:1.65; text-align:center; max-width:820px; margin:6px auto 0;
}

/* ---------- Onglet Formules ---------- */
#mainSiteWrap .verifiedBadge{
  display:table; margin:6px auto 22px; max-width:720px;
  padding:9px 16px; border-radius:999px;
  background:rgba(124,77,255,.10); border:1px solid rgba(124,77,255,.32);
  color:#d9d3ff; font-size:13px; font-weight:500; line-height:1.5; text-align:center;
}
#mainSiteWrap .plansGrid{ gap:16px; }
#mainSiteWrap .planCard{
  --brand:#7C4DFF;
  padding:0; overflow:hidden; border-radius:20px;
  background:var(--nx-panel); border:1px solid var(--nx-border); box-shadow:var(--nx-shadow);
  min-height:0; height:auto;
}
#mainSiteWrap .planCard:hover{ transform:none; background:var(--nx-panel); border-color:rgba(124,77,255,.45); }
#mainSiteWrap .planCard .cardHead{
  display:flex; align-items:center; gap:12px; margin:0; padding:14px 16px;
  background:var(--nx-band); border-bottom:1px solid rgba(255,255,255,.06);
}
#mainSiteWrap .planCard h3{ margin:0; font-size:17px; font-weight:700; letter-spacing:-.01em; }
#mainSiteWrap .planIcon{
  flex:0 0 36px; width:36px; height:36px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, color-mix(in srgb, var(--brand) 92%, #fff), color-mix(in srgb, var(--brand) 78%, #000));
  box-shadow:0 4px 12px color-mix(in srgb, var(--brand) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
}
#mainSiteWrap .planIcon svg{ width:18px; height:18px; display:block; }
#mainSiteWrap .planIcon .stubInitials{ font:700 12px 'Outfit',sans-serif; color:#fff; }
#mainSiteWrap .planBody{ padding:14px 14px 16px; display:flex; flex-direction:column; }
#mainSiteWrap .trialBadge{
  align-self:flex-start; margin:0 0 6px; padding:4px 11px; border-radius:999px;
  font-size:12px; font-weight:600;
}
/* (!important : une ancienne règle colorait en vert tout élément dont la classe contient "trial") */
#mainSiteWrap .trialBadge.yes{ background:rgba(61,190,134,.12); color:#53d79c !important; border:1px solid rgba(61,190,134,.35) !important; }
#mainSiteWrap .trialBadge.no{ background:rgba(255,255,255,.04); color:var(--muted) !important; border:1px solid var(--nx-card-border) !important; }
#mainSiteWrap .trialCond{ font-size:12px; color:var(--nx-label) !important; margin:0 0 6px 2px; line-height:1.45; }
#mainSiteWrap .planRows{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
#mainSiteWrap .planRow{
  border-top:none; padding:10px 12px; border-radius:12px;
  background:var(--nx-card); border:1px solid var(--nx-card-border);
  align-items:center; font-size:14px;
}
#mainSiteWrap .planRow .planName{ font-weight:600; }
#mainSiteWrap .planRow .planQuality{ color:var(--nx-label); font-size:12px; margin-top:2px; font-weight:400; }
#mainSiteWrap .planRow .planPrice{ font-family:'Outfit',sans-serif; font-weight:700; font-size:15px; color:var(--text); }
#mainSiteWrap .planRow .planPrice .annual{ color:var(--nx-label); font-weight:500; font-size:11.5px; margin-top:2px; }
#mainSiteWrap #plansEmptyState{ color:var(--muted); }

/* ---------- Encadré « Comment en profiter » ---------- */
#mainSiteWrap .vpnHighlight{
  background:var(--nx-panel); border:1px solid var(--nx-border); border-radius:18px;
  box-shadow:var(--nx-shadow); padding:18px 20px; gap:14px; align-items:center;
  position:relative; overflow:hidden;
}
#mainSiteWrap .vpnHighlight::before{
  content:""; position:absolute; inset:0; background:var(--nx-band); pointer-events:none;
}
#mainSiteWrap .vpnHighlight > *{ position:relative; }
#mainSiteWrap .vpnHighlight-icon{
  flex:0 0 42px; width:42px; height:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(124,77,255,.14); border:1px solid rgba(124,77,255,.35);
}
#mainSiteWrap .vpnHighlight-icon img{ width:24px !important; height:auto; }
#mainSiteWrap .vpnHighlight b{
  background:var(--nx-grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:700;
}
#mainSiteWrap .vpnHighlight span{ color:#c9cdd8; font-size:14px; line-height:1.6; }
/* Bloc centré et symétrique : bouclier, titre, puis texte en dessous */
#mainSiteWrap .vpnHighlight{ flex-direction:column; align-items:center; text-align:center; gap:12px; padding:24px 28px 22px; }
#mainSiteWrap .vpnHighlight b{ display:block; font-size:17px; letter-spacing:-.01em; margin-bottom:6px; }
#mainSiteWrap .vpnHighlight span{ display:block; max-width:560px; margin:0 auto; }
@media (max-width:640px){
  #mainSiteWrap .vpnHighlight{ align-items:center !important; padding:20px 18px 18px !important; }
  #mainSiteWrap .vpnHighlight b{ font-size:16px; }
}

/* ---------- « Pourquoi CompareSubs ? » ---------- */
#mainSiteWrap .aboutTitle{ font-weight:700; letter-spacing:-.02em; }
#mainSiteWrap .aboutText{ font-size:14.5px; line-height:1.7; color:var(--muted); }

/* ---------- Onglets : pas de cadre ni de rectangle, juste le texte en dégradé et le trait dessous ---------- */
#mainSiteWrap .tabs .tab.active,
#mainSiteWrap .tabs .tab.active:hover{
  filter:none !important; box-shadow:none !important; background-color:transparent !important;
  border-bottom:2px solid #D861FF !important; isolation:isolate;
}
#mainSiteWrap .tabs .tab.active::before{ content:none !important; display:none !important; }
#mainSiteWrap .tabs .tab.active::after{
  content:attr(data-glow); position:absolute; inset:0; z-index:-1;
  display:flex; align-items:center; justify-content:center; text-align:center; padding:inherit;
  color:transparent; text-shadow:0 0 10px rgba(106,61,232,.75), 0 0 18px rgba(61,123,240,.45); pointer-events:none;
}
#mainSiteWrap .tabs .tab:not(.active):hover{ box-shadow:none !important; background-color:transparent; }

/* ---------- FAQ ---------- */
#mainSiteWrap .faqTitle{ font-weight:700; letter-spacing:-.02em; filter:drop-shadow(0 0 10px rgba(106,61,232,.30)); }
#mainSiteWrap .faqItem{
  background:var(--nx-panel); border:1px solid var(--nx-card-border); border-radius:14px; margin-bottom:8px;
  transition:border-color .18s ease, background-color .18s ease;
}
/* De l'air entre le titre et la 1re question, et entre les questions */
#mainSiteWrap #faqList .faqItem{ margin-bottom:12px; }
#mainSiteWrap #faqList .faqItem:first-child{ margin-top:16px; }
#mainSiteWrap .faqItem.open{ border-color:rgba(124,77,255,.45); background:linear-gradient(180deg, rgba(124,77,255,.06), rgba(16,17,22,.92) 60%); }
#mainSiteWrap .faqQ{ font-weight:600; font-size:15px; padding:15px 18px; }
#mainSiteWrap .faqQ:hover{ background:rgba(124,77,255,.06); }
#mainSiteWrap .faqQ .chev{
  width:26px; height:26px; padding:5px; box-sizing:border-box; border-radius:8px;
  background:var(--nx-control); border:1px solid var(--nx-control-border); color:#bdafff;
}
#mainSiteWrap .faqA{ font-size:14px; color:var(--muted); line-height:1.7; }
#mainSiteWrap .faqA-inner{ padding:0 18px 16px; }

/* ---------- Bas de page ---------- */
#mainSiteWrap .siteFooter .contactLabel{ color:var(--nx-label); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
#mainSiteWrap .contactLink{
  background:var(--nx-control); border:1px solid var(--nx-control-border); border-radius:12px;
  font-weight:500; transition:border-color .18s ease, background-color .18s ease;
}
#mainSiteWrap .contactLink:hover{ background:rgba(124,77,255,.10); border-color:rgba(124,77,255,.6); }
#mainSiteWrap .contactLink svg{ color:#bdafff; }
#mainSiteWrap .footerLegal button, #mainSiteWrap .footerLegal a{
  text-decoration:none; color:var(--muted); font-weight:500; border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
#mainSiteWrap .footerLegal button:hover, #mainSiteWrap .footerLegal a:hover{ color:var(--text); border-bottom-color:rgba(124,77,255,.6); }
#mainSiteWrap .footerCopyright{ color:#4a4f5a; }

/* ---------- Fenêtres légales ---------- */
.legalOverlay{ background:rgba(6,7,10,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.legalOverlay .legalModal{
  background:var(--nx-panel-solid); border:1px solid var(--nx-border); border-radius:20px;
  box-shadow:var(--nx-shadow); overflow:hidden;
}
.legalOverlay .legalModalHead{ background:var(--nx-band); border-bottom:1px solid rgba(255,255,255,.06); padding:18px 22px; }
.legalOverlay .legalModalHead h3{ font-size:19px; font-weight:700; letter-spacing:-.01em; }
.legalOverlay .legalModalClose{
  width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--nx-control); border:1px solid var(--nx-control-border); color:var(--muted); font-size:18px;
}
.legalOverlay .legalModalClose:hover{ border-color:rgba(124,77,255,.6); color:var(--text); }
.legalOverlay .legalModalBody{ font-size:14px; line-height:1.75; }
.legalOverlay .legalModalBody h4{
  color:var(--nx-label); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; margin:22px 0 6px;
}
.legalOverlay .legalModalBody h4:first-child{ margin-top:0; }

/* ---------- Téléphone ---------- */
@media (max-width:560px){
  #mainSiteWrap .vpnSideColumn .vpnCategoryGrid{ padding:10px; gap:10px; }
  #mainSiteWrap .vpnCategoryTitle{ padding:14px 14px; font-size:15px; }
  #mainSiteWrap .vpnSortLabel{ display:none; }
  #mainSiteWrap .verifiedBadge{ border-radius:14px; font-size:12.5px; }
  #mainSiteWrap .vpnHighlight{ padding:15px 16px; align-items:flex-start; }
  #mainSiteWrap .vpnHighlight span{ font-size:13.5px; }
  #mainSiteWrap .faqQ{ font-size:14.5px; padding:14px 15px; }
  .legalOverlay .legalModal{ border-radius:18px; }
}