/* =========================================================
   VARINUS — sections sous le hero (refonte 2026-10-10)
   ---------------------------------------------------------
   Maquette « Varinus sections » : les styles de mise en page sont EN LIGNE
   dans index.html ; ce fichier ne garde que les animations, le RTL, le mobile
   et les survols. Tout est préfixé par [data-root] pour ne toucher ni au menu
   ni au hero (styles.css a déjà ses propres règles a, [data-reveal]…).
   ========================================================= */
[data-root] *{box-sizing:border-box}
[data-root] a{color:#C8FA3C;text-decoration:none}
[data-root] a:hover{color:#EDEFEA}
[data-root] summary{list-style:none;cursor:pointer}
[data-root] summary::-webkit-details-marker{display:none}
[data-root] details[open] [data-plus]{transform:rotate(45deg)}
[data-root] :focus-visible{outline:2px solid #C8FA3C;outline-offset:3px}

/* Apparitions : styles.css cache tout [data-reveal] jusqu'à .is-visible (son
   observateur, main.js, ignore désormais [data-root]) ; ici c'est data-in,
   posé par js/sections.js. */
[data-root] [data-reveal]{opacity:1;transform:none;will-change:auto;transition:opacity .9s cubic-bezier(.2,.7,.2,1),translate .9s cubic-bezier(.2,.7,.2,1)}
[data-root] [data-reveal]:not([data-in]){opacity:0;translate:0 28px}
[data-root] [data-bar]{scale:0 1;transform-origin:0 50%;transition:scale 1.4s cubic-bezier(.2,.7,.2,1) .25s}
[data-root] [data-in] [data-bar],[data-root] [data-bar][data-in]{scale:1 1}
html[dir=rtl] [data-root] [data-bar]{transform-origin:100% 50%}
[data-root] [data-draw]{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s cubic-bezier(.3,.6,.2,1) .3s}
[data-root] [data-in] [data-draw]{stroke-dashoffset:0}
[data-root] [data-ring]{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.8s cubic-bezier(.2,.7,.2,1) .2s}
[data-root] [data-timer]{stroke-dasharray:100;animation:vtimer 9s linear infinite}
[data-root] [data-float]{animation:vfloat 7s ease-in-out infinite}
[data-root] [data-scanline]{animation:vscan 3.4s ease-in-out infinite}
[data-root] [data-pulse]{animation:vpulse 1.8s ease-in-out infinite}
[data-root] [data-skel]{background:linear-gradient(90deg,#151815 0%,#1e221d 50%,#151815 100%);background-size:200% 100%;animation:vshim 1.6s linear infinite}
[data-root] [data-annual-save]:empty{display:none}

@media (max-width:640px){
  [data-root] [data-chipwrap]{flex-wrap:wrap!important;gap:12px!important;padding-bottom:0!important}
  [data-root] [data-chip]{position:static!important;width:auto!important;flex:1 1 150px!important;margin-top:4px}
}
[data-root] [data-mobonly]{display:none!important}
[data-root] [data-scanslider]{scrollbar-width:none}
[data-root] [data-scanslider]::-webkit-scrollbar{display:none}
@media (max-width:640px){
  [data-root] [data-mobonly]{display:flex!important}
  [data-root] [data-stores]{flex-direction:column;align-items:stretch!important;width:100%;max-width:340px}
  [data-root] [data-stores]>a{justify-content:center;padding:14px 22px!important}
  [data-root] [data-scanslider]{display:flex!important;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scroll-snap-type:x mandatory;gap:16px!important;align-items:center!important;margin-inline:calc(-1 * clamp(20px,5vw,48px));padding-inline:clamp(20px,5vw,48px);scroll-padding-inline:clamp(20px,5vw,48px)}
  [data-root] [data-scanslider]>*{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
  /* Épinglage (js/sections.js) : c'est la page qui pilote le slider, plus de
     balayage ni d'aimantation. `overflow:clip` au lieu de `hidden` sur les
     ancêtres : `hidden` en fait des conteneurs de défilement et casse sticky. */
  [data-root]{overflow-x:clip!important}
  [data-root] #scan{overflow:clip!important}
  [data-root] [data-scanpin]{position:relative}
  [data-root] [data-scanstick]{position:sticky}
  [data-root] [data-scanpin] [data-scanslider]{overflow-x:hidden!important;scroll-snap-type:none!important;touch-action:pan-y!important;
    /* overflow-x:hidden coupe aussi en hauteur : de la marge pour le téléphone
       qui « flotte » (−14 px) et son cadre */
    padding-block:32px 24px!important;margin-top:16px!important}
  /* Pastille « Score du jour » : posée SUR le bas du téléphone dans le slider
     (sous le téléphone, elle allongeait la diapositive, coupée en bas). */
  [data-root] [data-scanslider] [data-chipwrap]{padding-bottom:0!important}
  [data-root] [data-scanslider] [data-chip]{position:absolute!important;inset-inline-start:auto!important;left:50%!important;right:auto!important;
    bottom:24px!important;transform:translateX(-50%) scale(.86);width:max-content!important;flex:none!important;margin-top:0!important}
}

@keyframes vfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes vscan{0%{top:6%}50%{top:90%}100%{top:6%}}
@keyframes vtimer{from{stroke-dashoffset:0}to{stroke-dashoffset:100}}
@keyframes vpulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes vshim{from{background-position:200% 0}to{background-position:-200% 0}}

/* Arabe : polices arabes, pas de capitales ni d'interlettrage */
html[dir=rtl] [data-root] [data-i18n],html[dir=rtl] [data-root] [data-i18n-html]{font-family:'IBM Plex Sans Arabic',sans-serif!important}
html[dir=rtl] [data-root] [data-f=h],html[dir=rtl] [data-root] [data-f=h] [data-i18n]{font-family:Cairo,sans-serif!important;text-transform:none!important;letter-spacing:0!important;line-height:1.2!important}
html[dir=rtl] [data-root] [data-f=k]{letter-spacing:0!important;text-transform:none!important}

@media (prefers-reduced-motion:reduce){
  [data-root] [data-reveal]{opacity:1!important;translate:none!important;transition:none!important}
  [data-root] [data-bar]{scale:1 1!important;transition:none!important}
  [data-root] [data-draw]{stroke-dashoffset:0!important;transition:none!important}
  [data-root] [data-ring]{transition:none!important}
  [data-root] [data-float],[data-root] [data-scanline],[data-root] [data-pulse],[data-root] [data-timer],[data-root] [data-skel]{animation:none!important}
}

/* Mobile : le TÉLÉPHONE d'abord, le texte ensuite, dans toutes les sections
   (user 2026-10-10). Sections à deux colonnes + Scan (slider épinglé en tête). */
@media (max-width:640px){
  [data-root] section:not(#scan) > div[style*="max-width:1240px"]:has(> div [data-phone]){flex-wrap:wrap!important}
  [data-root] section:not(#scan) > div[style*="max-width:1240px"] > div:has([data-phone]){order:-1}
  [data-root] #scan > div[style*="max-width:1240px"]{display:flex;flex-direction:column}
  [data-root] #scan [data-scanpin]{order:-1}
  [data-root] #scan > div[style*="max-width:1240px"] > div:first-child{margin-top:24px}
  /* Pastilles d'en-tête de section sur UNE ligne (« Apple Watch · Live Activity · Stories » passait à la ligne) */
  [data-root] div[data-reveal][style*="inline-flex"][style*="999px"]:has(> [data-f=k]){font-size:10.5px!important;letter-spacing:.08em!important;white-space:nowrap;max-width:100%}
}

/* Survols */
[data-root] [data-h="1"]:hover,[data-root] [data-h="2"]:hover,[data-root] [data-h="3"]:hover,[data-root] [data-h="4"]:hover{border-color:rgba(200,250,60,.45)!important}
[data-root] [data-h="5"]:hover,[data-root] [data-h="6"]:hover{border-color:rgba(255,255,255,.18)!important}
[data-root] [data-h="7"]:hover{border-color:rgba(92,200,240,.4)!important}
[data-root] [data-h="8"]:hover{transform:translateY(-2px)!important;color:#0B0C0B!important}
[data-root] [data-h="9"]:hover{color:#C8FA3C!important}
[data-root] [data-h="10"]:hover{border-color:rgba(200,250,60,.4)!important;transform:translateY(-4px)!important}
[data-root] [data-h="11"]:hover{background:#C8FA3C!important;color:#0B0C0B!important;border-color:#C8FA3C!important}
[data-root] [data-h="12"]:hover{border-color:#EDEFEA!important;color:#EDEFEA!important}
[data-root] [data-h="13"]:hover{transform:translateY(-2px)!important;box-shadow:0 14px 40px -12px rgba(200,250,60,.6)!important;color:#0B0C0B!important}
[data-root] [data-h="14"]:hover{transform:translateY(-2px)!important;color:#0B0C0B!important}
[data-root] [data-h="15"]:hover{border-color:#EDEFEA!important;transform:translateY(-2px)!important;color:#EDEFEA!important}
[data-root] [data-h="16"]:hover,[data-root] [data-h="17"]:hover,[data-root] [data-h="18"]:hover,[data-root] [data-h="19"]:hover,
[data-root] [data-h="20"]:hover,[data-root] [data-h="21"]:hover,[data-root] [data-h="22"]:hover,[data-root] [data-h="23"]:hover{color:#C8FA3C!important}