/* --red (#FF1D1D) ne donne que 3,86:1 avec du texte blanc. Il reste excellent
   en ACCENT sur fond sombre (5,00:1), on ne le remplace donc pas partout :
   uniquement la ou du texte blanc est POSE dessus, ou il passe a
   --rs2-red-fill (#d81616, 5,19:1). */
/* ============================================================
   V2 — HIGH-END UPGRADE (commerce, B2B, micro-interactions)
   ============================================================ */

/* Fondations */
#spBar{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--red),var(--red-2));z-index:100;width:0;transition:width .1s linear}
::selection{background:rgba(255,29,29,.35);color:#fff}
:focus-visible{outline:2px solid var(--red-2);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}html{scroll-behavior:auto}}

/* Nav active (scrollspy) */
.nav-links a.active{color:var(--txt)}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--red);border-radius:2px}

/* Bouton Espace Pro dans le header */
.btn-pro{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem 1.05rem;border-radius:100px;border:1px solid rgba(255,29,29,.45);background:rgba(255,29,29,.08);color:var(--txt);font-weight:700;font-size:.8rem;cursor:pointer;font-family:'Raleway';transition:.3s;white-space:nowrap}
.btn-pro:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn-pro .pdot{width:7px;height:7px;border-radius:50%;background:var(--red)}
body.pro .btn-pro{background:var(--rs2-red-fill,#d81616);border-color:var(--rs2-red-fill,#d81616);color:#fff}
body.pro .btn-pro .pdot{background:#7CFC9B;box-shadow:0 0 8px #7CFC9B}
@media(max-width:640px){/* Le libelle etait masque sans condition : il ne restait qu une pastille
   rouge avec un point vert, que rien ne permettait d identifier. Sur mobile,
   ou la navigation est dans le menu burger, cette pastille EST la porte
   d entree des opticiens : elle doit porter son nom. */
.btn-pro span.lbl{display:inline}}

/* Barre mode Pro */
body.pro .announce{display:none}
.pro-bar{display:none;background:linear-gradient(90deg,#17171c,#101014);border-bottom:1px solid rgba(255,29,29,.4);color:var(--txt-2);text-align:center;font-size:.8rem;padding:.55rem 1rem;font-weight:600;position:relative;z-index:60}
.pro-bar b{color:var(--txt)}
.pro-bar a{color:var(--red-2);text-decoration:underline;cursor:pointer}
body.pro .pro-bar{display:block}
html[data-theme=light] .pro-bar{background:linear-gradient(90deg,#14151a,#1c1d24);color:#c9cad3}
html[data-theme=light] .pro-bar b{color:#fff}

/* Prix pro sur les cartes */
.p-strike{display:none;color:var(--txt-3);text-decoration:line-through;font-size:.85rem;margin-left:.45rem;font-weight:500;font-family:'Raleway'}
body.pro .p-strike{display:inline}

/* Scrim + tiroir panier */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(3px);z-index:88;opacity:0;pointer-events:none;transition:.35s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(430px,94vw);background:var(--bg-2);border-left:1px solid var(--line-2);z-index:89;transform:translateX(105%);transition:.45s var(--ease);display:flex;flex-direction:column;box-shadow:-30px 0 80px -30px rgba(0,0,0,.7)}
.drawer.open{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:1.15rem 1.4rem;border-bottom:1px solid var(--line)}
.drawer-head h3{font-size:1.15rem}
.drawer-items{flex:1;overflow-y:auto;padding:1.2rem 1.4rem;display:flex;flex-direction:column;gap:1.1rem}
.cart-empty{color:var(--txt-3);text-align:center;margin-top:3rem;font-size:.95rem}
.c-item{display:flex;gap:.9rem;align-items:flex-start;position:relative;padding-right:1.4rem}
.c-img{width:76px;height:60px;border-radius:10px;background-size:cover;background-position:center;border:1px solid var(--line);flex-shrink:0}
.c-info{flex:1;font-size:.92rem}
.c-info .cmeta{font-size:.76rem;color:var(--txt-3);display:block;margin:.15rem 0 .55rem}
.c-foot{display:flex;justify-content:space-between;align-items:center}
.c-foot b{font-family:'Raleway'}
.c-del{position:absolute;top:0;right:0;background:none;border:none;color:var(--txt-3);cursor:pointer;font-size:.8rem;padding:.2rem}
.c-del:hover{color:var(--red-2)}
.drawer-foot{border-top:1px solid var(--line);padding:1.15rem 1.4rem;display:flex;flex-direction:column;gap:.5rem}
.d-row{display:flex;justify-content:space-between;font-size:.9rem;color:var(--txt-2)}
.d-row b{color:var(--txt)}
.d-row.total{font-size:1.06rem;font-family:'Raleway';color:var(--txt);padding-top:.55rem;border-top:1px dashed var(--line-2);margin-top:.3rem}
.d-note{font-size:.73rem;color:var(--txt-3);line-height:1.5}

/* Stepper quantité */
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:100px;overflow:hidden;background:rgba(255,255,255,.03)}
.qty button{width:32px;height:34px;background:none;border:none;color:var(--txt);cursor:pointer;font-size:1.05rem;line-height:1;transition:.2s}
.qty button:hover{color:var(--red-2)}
.qty span{min-width:26px;text-align:center;font-weight:700;font-family:'Raleway';font-size:.9rem}

/* Modales génériques */
.modal{position:fixed;inset:0;z-index:92;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.6);backdrop-filter:blur(6px)}
.modal.open{display:flex}
.modal-card{background:var(--bg-2);border:1px solid var(--line-2);border-radius:22px;max-width:560px;width:100%;padding:1.8rem;position:relative;max-height:92vh;overflow:auto;box-shadow:0 50px 120px -40px rgba(0,0,0,.9);animation:fadeUp .4s var(--ease)}
.modal-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--line-2);color:var(--txt);cursor:pointer;font-size:.95rem;line-height:1;z-index:2}
.modal-close:hover{background:var(--red);border-color:var(--red);color:#fff}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}}

/* Configurateur produit (quick view) */
.qv-media{aspect-ratio:16/9;border-radius:14px;background-size:cover;background-position:center;margin-bottom:1.15rem;border:1px solid var(--line)}
.qv-opt{display:flex;gap:.8rem;border:1px solid var(--line-2);border-radius:14px;padding:.95rem 1.05rem;cursor:pointer;transition:.25s;align-items:flex-start;margin:1.15rem 0}
.qv-opt:hover{border-color:var(--red)}
.qv-opt.on{border-color:var(--red);background:rgba(255,29,29,.07)}
.sw.sel{box-shadow:0 0 0 2px var(--bg-2),0 0 0 4px var(--red);transform:scale(1.1)}

/* Onglets B2B */
.tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.7rem 0 1.9rem}
.tab-btn{padding:.62rem 1.25rem;border-radius:100px;border:1px solid var(--line-2);background:transparent;color:var(--txt-2);font-weight:700;cursor:pointer;font-family:'Raleway';font-size:.87rem;transition:.25s}
.tab-btn:hover{color:var(--txt);border-color:var(--red)}
.tab-btn.act{background:var(--rs2-red-fill,#d81616);border-color:var(--rs2-red-fill,#d81616);color:#fff;box-shadow:0 8px 24px -10px var(--red-glow)}
.tab-panel{display:none}
.tab-panel.act{display:block;animation:fadeUp .45s var(--ease)}

/* Simulateur de volume */
.sim-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:start}
input[type=range]{width:100%;accent-color:var(--red);height:32px;cursor:pointer}
.sim-out{display:grid;gap:.55rem}
.sim-row{display:flex;justify-content:space-between;align-items:center;padding:.7rem .95rem;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:11px;font-size:.9rem;color:var(--txt-2)}
.sim-row b{font-family:'Raleway';color:var(--txt);font-size:1rem}
.sim-row.hl{border-color:rgba(255,29,29,.45);background:rgba(255,29,29,.08)}
.sim-row.hl b{color:var(--red-2);font-size:1.15rem}
.palier-track{display:flex;gap:.45rem}
.palier{flex:1;text-align:center;font-size:.7rem;padding:.5rem .3rem;border:1px solid var(--line);border-radius:9px;color:var(--txt-3);line-height:1.5;transition:.25s}
.palier b{font-size:.82rem}
.palier.on{border-color:var(--red);color:var(--red-2);background:rgba(255,29,29,.07)}

/* Devis express */
.dv-table{width:100%;border-collapse:collapse;font-size:.92rem}
.dv-table th{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--txt-3);text-align:left;padding:.55rem .5rem;border-bottom:1px solid var(--line-2);font-family:'Raleway'}
.dv-table td{padding:.85rem .5rem;border-bottom:1px solid var(--line)}
.dv-table td:last-child,.dv-table th:last-child{text-align:right}
.dv-table input{width:82px;padding:.5rem .65rem;border-radius:9px;border:1px solid var(--line-2);background:rgba(0,0,0,.3);color:var(--txt);font-family:'Raleway';font-weight:700;font-size:.92rem}
.dv-table tfoot td{font-family:'Raleway';font-weight:700;border-bottom:none;font-size:1rem}

/* Papier devis */
#devisDoc{background:#fff;color:#14151a;border-radius:14px;padding:1.7rem;font-size:.88rem;line-height:1.55}
#devisDoc .dv-h{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.4rem}
#devisDoc .dv-logo{font-family:'Raleway';font-weight:700;font-size:1.6rem;color:#FF1D1D}
#devisDoc h3{color:#14151a;font-size:1.05rem}
#devisDoc .dv-meta{font-size:.78rem;color:#565863;text-align:right}
.dvp-table{width:100%;border-collapse:collapse;margin:1.1rem 0}
.dvp-table th{text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:#8a8c97;border-bottom:2px solid #14151a;padding:.5rem .4rem}
.dvp-table td{padding:.55rem .4rem;border-bottom:1px solid #e5e6ea;color:#14151a}
.dvp-table th:last-child,.dvp-table td:last-child{text-align:right}
.dvp-tot td{font-weight:700;border-bottom:none}
#devisDoc .dv-foot{font-size:.7rem;color:#8a8c97;border-top:1px solid #e5e6ea;padding-top:.8rem;margin-top:1rem}

/* Formulaires */
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
.f-field{display:flex;flex-direction:column;gap:.4rem}
.f-field label{font-size:.72rem;font-weight:700;color:var(--txt-2);letter-spacing:.07em;text-transform:uppercase;font-family:'Raleway'}
.f-field input,.f-field select{padding:.8rem 1rem;border-radius:12px;border:1px solid var(--line-2);background:rgba(0,0,0,.28);color:var(--txt);font-family:'Raleway';font-size:.94rem;transition:.25s}
.f-field input:focus,.f-field select:focus{outline:none;border-color:var(--red)}
.f-err{color:var(--red-2);font-size:.74rem;display:none;font-weight:600}
.f-field.bad input{border-color:var(--red)}
.f-field.bad .f-err{display:block}
.f-ok{border:1px solid rgba(124,252,155,.35);background:rgba(124,252,155,.06);border-radius:16px;padding:1.6rem;text-align:center}
.f-ok .okic{width:52px;height:52px;border-radius:50%;background:rgba(124,252,155,.12);border:1px solid rgba(124,252,155,.4);display:grid;place-items:center;margin:0 auto 1rem;color:#7CFC9B;font-size:1.4rem}

/* Tableau comparatif */
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.cmp{width:100%;min-width:680px;border-collapse:collapse;font-size:.9rem}
.cmp th,.cmp td{padding:.95rem 1.15rem;border-bottom:1px solid var(--line);text-align:left}
.cmp thead th{font-family:'Raleway';font-size:1rem;background:var(--bg-2)}
.cmp thead th small{display:block;font-size:.72rem;color:var(--red-2);font-weight:600;font-family:'Raleway';margin-top:.15rem}
.cmp tbody tr:hover{background:rgba(255,255,255,.02)}
.cmp td:first-child{color:var(--txt-3);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-family:'Raleway'}
.cmp tr:last-child td{border-bottom:none}
.cmp .chk{color:var(--red-2)}

/* Bande de garanties */
.assure{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.4rem}
.assure-it{display:flex;gap:.85rem;align-items:center;border:1px solid var(--line);border-radius:14px;padding:1.05rem 1.15rem;background:var(--card);font-size:.84rem;color:var(--txt-2);transition:.3s}
.assure-it:hover{border-color:var(--line-2)}
.assure-it b{display:block;color:var(--txt);font-size:.9rem}
.assure-it svg{width:24px;height:24px;color:var(--red-2);flex-shrink:0}

/* Toast */
.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,20px);background:var(--bg-3);border:1px solid var(--line-2);border-left:3px solid var(--red);border-radius:12px;padding:.85rem 1.3rem;z-index:96;opacity:0;transition:.35s var(--ease);font-size:.88rem;font-weight:600;box-shadow:0 20px 50px -18px rgba(0,0,0,.8);pointer-events:none;max-width:min(480px,92vw);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Impression du devis */
@media print{
  body>*{display:none!important}
  #devisM{display:block!important;position:static;background:#fff;padding:0}
  #devisM .modal-card{box-shadow:none;border:none;max-width:none;max-height:none;padding:0;background:#fff}
  #devisM .modal-close,#devisM .dv-actions{display:none!important}
}

/* Thème clair — surcharges des nouveaux composants */
html[data-theme=light] .f-field input,html[data-theme=light] .f-field select,html[data-theme=light] .dv-table input{background:#fff}
html[data-theme=light] .qty{background:rgba(16,18,27,.03)}
html[data-theme=light] .sim-row{background:rgba(16,18,27,.03)}
html[data-theme=light] .modal-close{background:rgba(16,18,27,.05)}
html[data-theme=light] .store input,html[data-theme=light] .news-form input{background:#fff!important}
html[data-theme=light] .cmp tbody tr:hover{background:rgba(16,18,27,.025)}
html[data-theme=light] .drawer{box-shadow:-30px 0 80px -40px rgba(16,18,27,.35)}

/* Responsive nouveaux blocs */
@media(max-width:980px){
  .sim-grid{grid-template-columns:1fr}
  .assure{grid-template-columns:1fr 1fr}
  .f-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .assure{grid-template-columns:1fr}
  .tabs{gap:.4rem}
  .tab-btn{padding:.55rem 1rem;font-size:.8rem}
}

/* Charte RS */
h1,h2,h3,h4,.display{font-weight:800}
.eyebrow,.prod-line{font-weight:700}
.logo img{display:block;filter:drop-shadow(0 2px 10px rgba(255,29,29,.25))}
.btn,.tab-btn{font-weight:700}


/* ==========================================================================
   Accueil sur telephone
   ==========================================================================
   Mesure sur un ecran de 390 px : le premier bouton d appel a l action
   (« Decouvrir la gamme RS ») tombait a 708 px du haut, donc sous la ligne de
   flottaison de la plupart des telephones. Personne ne le voyait sans faire
   defiler. Le budget se repartissait ainsi :
     81 px  bandeau d annonce (3 lignes)
     71 px  en-tete
    141 px  vide, du a .vhero{min-height:96vh;padding-top:7rem}
    187 px  titre en 4 lignes (le plancher du clamp valait 2,7rem = 43,2 px)
    133 px  paragraphe en 5 lignes
   Les regles ci-dessous ramenent le premier bouton autour de 450 px. */

@media (max-width: 560px) {
  /* Le bandeau prenait 10 % du premier ecran pour une mention de preversion. */
  .announce {
    font-size: .72rem;
    letter-spacing: 0;
    line-height: 1.45;
    padding: .4rem .85rem;
  }

  .nav-actions { gap: .3rem; }

  .btn-pro {
    font-size: .74rem;
    gap: .35rem;
    padding: .5rem .7rem;
  }

  /* Le hero n a plus de hauteur minimale imposee : il fait la taille de son
     contenu. Le plancher du titre passe de 2,7rem a 1,95rem, ce qui le ramene
     de 4 lignes a 3. */
  .vhero {
    min-height: 0;
    padding: 1.6rem 0 2.6rem;
  }

  /* A 390 px, 8,6vw donnait 33,5 px et le titre tenait sur 4 lignes ; 7,6vw
     donne 29,6 px et le ramene a 3, sans cesser d etre une accroche. */
  .vhero h1 {
    font-size: clamp(1.8rem, 7.6vw, 2.4rem);
    margin: .6rem auto .9rem;
    max-width: 18ch;
  }

  /* 5 lignes a 16 px, alors que rien ne contraignait la largeur (max-width
     600 px pour 328 disponibles). */
  .vhero-sub {
    font-size: .95rem;
    margin-bottom: 1.3rem;
  }
}

/* Le bandeau de preversion est la premiere chose que lit un visiteur. Sur
   telephone la formulation longue tenait sur 2 lignes ; la courte tient sur
   une seule. La version masquee sort de l arbre d accessibilite : un lecteur
   d ecran n en annonce qu une. */
.announce__short { display: none; }

@media (max-width: 560px) {
  .announce__full { display: none; }
  .announce__short { display: inline; }
}

/* ==========================================================================
   En-tete de l accueil : une seule rangee sur telephone
   ==========================================================================
   Le conteneur est <div class="wrap nav">. Or `.nav` est AUSSI un composant
   Bootstrap, et Bootstrap lui applique flex-wrap:wrap. home-v3.css redefinit
   `.nav` mais ne touche pas a flex-wrap, donc le wrap de Bootstrap gagnait :
   des que le logo et les icones ne tenaient plus cote a cote, l en-tete se
   cassait en deux rangees. Avec le bandeau d annonce, cela faisait trois
   bandes empilees avant le moindre contenu.

   La specificite `body#index .rs2-v3` est necessaire : cette feuille est
   servie hors bundle, donc AVANT le CSS de Bootstrap. */

body#index .rs2-v3 .nav {
  flex-wrap: nowrap;
}

/* Si la place venait a manquer, c est le logo qui se comprime, jamais les
   boutons — un bouton coupe par l overflow-x: clip serait inatteignable. */
body#index .rs2-v3 .nav > .logo {
  flex: 0 1 auto;
  min-width: 0;
}

body#index .rs2-v3 .nav > .nav-actions {
  flex: 0 0 auto;
}

@media (max-width: 560px) {
  /* L espace pro n a rien a faire dans la barre d un client : il reste
     accessible par le menu burger et par le bandeau d annonce juste au-dessus.
     Le budget de la rangee passe de 433 px a 312 px, pour 328 disponibles sur
     un ecran de 360. */
  body#index .rs2-v3 .nav-actions .btn-pro {
    display: none;
  }

  body#index .rs2-v3 header .wrap {
    padding-inline: 16px;
  }

  /* A 26 px le logo n etait plus lisible : la lunette se confondait avec le S
     et la lueur rouge de 10 px de flou l empatait. La place liberee par le
     basculeur de theme, passe dans le menu burger, permet 36 px. */
  body#index .rs2-v3 .logo img {
    filter: drop-shadow(0 1px 4px rgb(255 29 29 / 22%));
    height: 36px;
  }

  body#index .rs2-v3 .nav-actions .theme-toggle {
    display: none;
  }

  body#index .rs2-v3 .nav {
    height: 58px;
  }
}

@media (max-width: 359.98px) {
  body#index .rs2-v3 .logo img { height: 31px; }
  body#index .rs2-v3 .nav-actions { gap: .2rem; }
  body#index .rs2-v3 .nav-actions .icon-btn { padding: 8px; }
}

/* Cibles tactiles de l en-tete : les boutons mesuraient 21x21 px, sous le
   minimum de 24x24 du WCAG 2.5.8. Ce minimum vaut a toutes les largeurs, pas
   seulement sur telephone. Le remplissage les porte a 41 px ; la marge
   negative annule l effet sur la hauteur de la rangee. */
body#index .rs2-v3 .nav-actions .icon-btn {
  margin-block: -10px;
  padding: 10px;
}

body#index .rs2-v3 .nav-actions .burger {
  padding: 9px 7px;
}

/* Entree « theme » du menu burger : elle doit se lire comme les liens voisins,
   qui sont des <a>. */
.mm-theme {
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  color: inherit;
  cursor: pointer;
  font-family: 'Raleway', inherit;
  font-size: 1.5rem;
  font-weight: 600;
  padding: 1rem 0;
  text-align: left;
  width: 100%;
}


/* ==========================================================================
   Accueil — mise a la maquette de septembre 2026
   ========================================================================== */

/* --- Banniere d'accueil ---------------------------------------------------
   Le texte etait centre sur une video plein cadre : le titre se lisait par
   dessus les verres, et la video pesait pour un plan fixe. La maquette pose le
   texte a gauche et le produit a droite, bord gauche fondu dans le fond. */

body#index .rs2-v3 .vhero{
  align-items:center;
  display:flex;
  justify-content:flex-start;
  min-height:min(88vh,46rem);
  padding:6.5rem 0 4rem;
  text-align:left
}
body#index .rs2-v3 .vhero-photo{
  bottom:0;
  margin:0;
  position:absolute;
  right:0;
  top:0;
  width:min(64%,72rem);
  z-index:1
}
body#index .rs2-v3 .vhero-photo img{
  display:block;
  height:100%;
  /* Sans ce degrade, la photo s'arrete par une arete verticale au milieu du
     titre. */
  mask-image:linear-gradient(90deg,transparent,#000 34%);
  object-fit:cover;
  object-position:58% center;
  width:100%
}
/* Halo rouge cote produit : il prolonge celui de la photo pour que la limite
   du cliche ne se devine pas. */
body#index .rs2-v3 .vhero-glow{
  background:radial-gradient(circle at 72% 48%,rgba(255,29,29,.17),transparent 52%);
  inset:0;
  pointer-events:none;
  position:absolute;
  z-index:2
}
body#index .rs2-v3 .vhero-inner{
  max-width:var(--maxw);
  padding:0 24px;
  position:relative;
  width:100%;
  z-index:3
}
body#index .rs2-v3 .vhero-inner>*{max-width:34rem}
/* La rangee d'arguments est plus large que la colonne de texte : a 34 rem le
   troisieme passait a la ligne. */
body#index .rs2-v3 .vhero .hero-badges{max-width:46rem}
body#index .rs2-v3 .vhero h1{
  font-size:clamp(2.5rem,5.4vw,4.6rem);
  letter-spacing:-.045em;
  line-height:1.02;
  margin:1rem 0 1.3rem;
  max-width:11ch;
  text-shadow:none
}
body#index .rs2-v3 .vhero-lead{
  color:var(--txt-2);
  display:block;
  font-size:.62em;
  font-weight:500;
  letter-spacing:-.02em;
  margin-top:.35em
}
body#index .rs2-v3 .vhero-sub{
  font-size:clamp(.98rem,1.4vw,1.1rem);
  margin:0 0 2rem;
  max-width:30rem;
  text-shadow:none
}
body#index .rs2-v3 .vhero .hero-cta{justify-content:flex-start;margin-bottom:2.2rem}
body#index .rs2-v3 .vhero .hero-badges{gap:1.1rem 2rem}
body#index .rs2-v3 .hero-badge{gap:.65rem}
body#index .rs2-v3 .hero-badge-ic{
  align-items:center;
  border:1px solid rgba(255,29,29,.5);
  border-radius:50%;
  color:var(--red-2);
  display:inline-flex;
  flex:0 0 2rem;
  height:2rem;
  justify-content:center;
  width:2rem
}
body#index .rs2-v3 .hero-badge-ic svg{height:1.05rem;width:1.05rem}
/* Signature de la maquette, en bas a droite du cadre. */
body#index .rs2-v3 .vhero-sign{
  bottom:clamp(1.6rem,4vw,3rem);
  color:var(--txt-3);
  font-size:.6rem;
  font-weight:800;
  letter-spacing:.26em;
  line-height:1.8;
  margin:0;
  position:absolute;
  right:max(calc(50vw - var(--maxw)/2 + 24px),24px);
  text-align:right;
  text-transform:uppercase;
  z-index:4
}

@media (max-width:900px){
  body#index .rs2-v3 .vhero{
    display:block;
    min-height:0;
    padding:0 0 2.6rem
  }
  body#index .rs2-v3 .vhero-photo{
    aspect-ratio:16/9;
    inset:auto;
    position:relative;
    width:100%
  }
  body#index .rs2-v3 .vhero-photo img{mask-image:linear-gradient(#000 60%,transparent);object-position:center}
  body#index .rs2-v3 .vhero-inner{margin-top:-2.5rem}
  body#index .rs2-v3 .vhero-inner>*{max-width:none}
  body#index .rs2-v3 .vhero-sign{display:none}
  body#index .rs2-v3 .vhero .hero-badges{flex-direction:column;gap:.8rem}
}

/* --- Cartes produit -------------------------------------------------------
   Le paragraphe descriptif laisse la place a trois atouts a pictogramme, et le
   bouton « Decouvrir » a la pastille flechee de la maquette. */

body#index .rs2-v3 .prod-body{padding-bottom:4.6rem;position:relative}
body#index .rs2-v3 .prod-price{font-size:1.5rem;margin:.15rem 0 .9rem}
body#index .rs2-v3 .swatches{margin-bottom:1.15rem}
body#index .rs2-v3 .prod-atouts{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  list-style:none;
  margin:0;
  padding:0
}
body#index .rs2-v3 .prod-atouts li{
  align-items:center;
  color:var(--txt-2);
  display:flex;
  font-size:.84rem;
  gap:.65rem
}
body#index .rs2-v3 .prod-atout-ic{
  align-items:center;
  border:1px solid rgba(255,29,29,.45);
  border-radius:50%;
  color:var(--red-2);
  display:inline-flex;
  flex:0 0 1.65rem;
  height:1.65rem;
  justify-content:center;
  width:1.65rem
}
body#index .rs2-v3 .prod-atout-ic svg{height:.9rem;width:.9rem}
body#index .rs2-v3 .prod-go{
  align-items:center;
  background:var(--red-fill);
  border-radius:50%;
  bottom:1.4rem;
  box-shadow:0 8px 26px -10px var(--red-glow);
  color:#fff;
  display:flex;
  height:2.9rem;
  justify-content:center;
  position:absolute;
  right:1.4rem;
  transition:.3s var(--ease);
  width:2.9rem
}
body#index .rs2-v3 .prod-go:hover{background:var(--red-fill-2);transform:translateY(-2px)}
body#index .rs2-v3 .prod-go svg{height:1.15rem;width:1.15rem}
body#index .rs2-v3 .prod-go:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* --- Comparatif -----------------------------------------------------------
   La maquette annonce chaque ligne par un pictogramme rouge et remplace
   « Choisir » par « Voir le modele ». */
body#index .rs2-v3 .cmp-row-ic{
  color:var(--red-2);
  display:inline-flex;
  flex:0 0 auto;
  margin-right:.6rem;
  vertical-align:-.28em
}
body#index .rs2-v3 .cmp-row-ic svg{height:1.05rem;width:1.05rem}

/* --- Atouts des sections technologie --------------------------------------
   La maquette remplace les paires titre + paragraphe par un libelle unique
   precede d'un cercle rouge : la section respire, et l'oeil retient trois ou
   quatre points au lieu de deux blocs de texte. */
body#index .rs2-v3 .feat-points{
  display:grid;
  gap:.9rem 2rem;
  list-style:none;
  margin:1.8rem 0 0;
  padding:0
}
body#index .rs2-v3 .feat-points--duo{grid-template-columns:repeat(2,minmax(0,1fr))}
body#index .rs2-v3 .feat-points li{
  align-items:center;
  color:var(--txt-2);
  display:flex;
  font-size:.92rem;
  gap:.75rem
}
body#index .rs2-v3 .feat-point-ic{
  align-items:center;
  border:1px solid rgba(255,29,29,.45);
  border-radius:50%;
  color:var(--red-2);
  display:inline-flex;
  flex:0 0 2.1rem;
  height:2.1rem;
  justify-content:center;
  width:2.1rem
}
body#index .rs2-v3 .feat-point-ic svg{height:1.1rem;width:1.1rem}

/* Les quatre fonctions de l'application sont des pastilles bordees. */
body#index .rs2-v3 .feat-points--chips{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem
}
body#index .rs2-v3 .feat-points--chips li{
  border:1px solid var(--line-2);
  border-radius:.9rem;
  font-size:.82rem;
  padding:.7rem 1rem
}
body#index .rs2-v3 .feat-points--chips .feat-point-ic{flex:0 0 1.75rem;height:1.75rem;width:1.75rem}
body#index .rs2-v3 .feat-points--chips .feat-point-ic svg{height:.95rem;width:.95rem}

/* Pastilles de telechargement : l'aspect des badges de la maquette, mais sans
   lien — aucune des deux applications n'est publiee a ce jour. */
body#index .rs2-v3 .feat-stores{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
body#index .rs2-v3 .feat-store{
  border:1px solid var(--line-2);
  border-radius:.9rem;
  display:flex;
  flex-direction:column;
  font-size:1rem;
  font-weight:700;
  line-height:1.25;
  padding:.6rem 1.15rem
}
body#index .rs2-v3 .feat-store small{
  color:var(--txt-3);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase
}

@media (max-width:640px){
  body#index .rs2-v3 .feat-points--duo{grid-template-columns:minmax(0,1fr)}
}

/* --- Bande d'inscription ---------------------------------------------------
   Trois defauts corriges d'un coup.

   Le bloc portait DEUX titres : « Rejoignez l'aventure RS » venant de la page,
   et « Recevez nos offres speciales » venant du module PrestaShop, l'un sous
   l'autre. Le second est masque ici : la bande a deja son accroche.

   Le champ et le bouton flottaient separement sur toute la largeur, le champ
   reduit a un filet clair sur une photo sombre. Ils forment desormais une
   seule capsule, fond assombri et contour net, le bouton pose dedans.

   Enfin la bande etait un cadre arrondi pose au milieu de la page, avec la
   photo d'une boite qui passait derriere le texte. Elle va maintenant d'un
   bord a l'autre, degrade rouge a gauche pour le texte, produit a droite. */

body#index .rs2-v3 .cta-band{
  align-items:center;
  /* En « cover », la photo 2/1 posee sur une bande de 5/1 est agrandie jusqu'a
     ne montrer qu'une tranche demesuree du produit. On la dimensionne par sa
     hauteur et on l'ancre a droite : le produit se lit entier, le degrade
     couvre la moitie gauche ou se pose le texte. */
  background-color:#0d0e12 !important;
  background-image:
    linear-gradient(100deg,rgba(122,14,18,.94) 0%,rgba(40,10,14,.86) 44%,rgba(13,14,18,.72) 72%),
    url('../img/v3/hero-xpro.webp?v=20260907') !important;
  background-position:center,right center !important;
  background-repeat:no-repeat,no-repeat !important;
  background-size:cover,auto 128% !important;
  border:0;
  border-radius:0;
  display:grid;
  gap:1.6rem clamp(1.5rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,24rem) minmax(0,.9fr);
  margin-inline:calc(50% - 50vw);
  padding:clamp(2.2rem,4.5vw,3.4rem) max(calc(50vw - 50%),24px);
  text-align:left;
  width:100vw
}
/* Troisieme colonne vide : elle degage la partie droite de la bande pour la
   photo, que le formulaire recouvrirait sinon. */
body#index .rs2-v3 .cta-band::after{content:"";display:block}
body#index .rs2-v3 .cta-band::before{display:none}
body#index .rs2-v3 .cta-band h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin:0 0 .6rem}
body#index .rs2-v3 .cta-band-copy p{color:var(--txt-2);margin:0;max-width:30rem}

body#index .rs2-v3 .cta-band .ps-emailsubscription{background:transparent;padding:0}
body#index .rs2-v3 .cta-band .ps-emailsubscription .container{max-width:none;padding:0;width:100%}
body#index .rs2-v3 .cta-band .ps-emailsubscription .row{margin:0;width:100%}
body#index .rs2-v3 .cta-band .rs2-newsletter__copy{display:none}
body#index .rs2-v3 .cta-band .ps-emailsubscription form{flex:1 1 auto;max-width:none;padding:0;width:100%}

body#index .rs2-v3 .cta-band .ps-emailsubscription form>.d-flex{
  background:rgba(6,7,10,.55);
  border:1px solid rgba(255,255,255,.26);
  border-radius:999px;
  gap:0 !important;
  margin-bottom:.75rem !important;
  padding:.32rem .32rem .32rem 1.25rem
}
body#index .rs2-v3 .cta-band input[type="email"]{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:#fff;
  font-size:.95rem;
  min-height:2.9rem;
  padding:0
}
body#index .rs2-v3 .cta-band input[type="email"]::placeholder{color:rgba(255,255,255,.55)}
body#index .rs2-v3 .cta-band input[type="submit"]{
  background:var(--red-fill);
  border:0;
  border-radius:999px;
  color:#fff;
  flex:0 0 auto;
  font-weight:700;
  min-height:2.9rem;
  padding-inline:1.6rem;
  transition:.3s var(--ease)
}
body#index .rs2-v3 .cta-band input[type="submit"]:hover{background:var(--red-fill-2)}
body#index .rs2-v3 .cta-band .ps-emailsubscription form>p{
  color:var(--txt-3);
  font-size:.72rem;
  line-height:1.5;
  margin:0;
  padding-inline:1.25rem
}

@media (max-width:900px){
  body#index .rs2-v3 .cta-band{
    background-position:center;
    grid-template-columns:minmax(0,1fr);
    text-align:left
  }
  body#index .rs2-v3 .cta-band::after{display:none}
}