/* Retours préprod du 27/10 — lot « hero » : accueil (/accueil-site/), héros bureau. Mobile inchangé.
   R-31 switch « Transport express / Déménagement » (Figma 17638:11633 / instance 20188:36481)
   R-32 fond du héros (Figma 20188:36470) */

/* zone commune fond + camions (structure posée par pages/accueil.py) : même boîte que la carte, sur tous les formats */
.pks-hero--accueil .pks-hero-fond-zone{position:absolute!important;inset:0;width:auto!important;max-width:none!important;min-height:0!important;
  padding:0!important;margin:0!important;z-index:0;overflow:hidden;container-type:size;pointer-events:none;}

@media (min-width:768px){
  /* ---------- R-31 : switch ---------- */
  :is(.pks-hero--accueil,.pks-e-carte) .pks-onglets{--n-tabs-icon-size:20px;}
  /* conteneur 393 × 48 : fond blanc 18 %, contour blanc 50 % 1 px intérieur (ombre interne = trait « inside » de Figma,
     n'ajoute pas de hauteur), verre (flou d'arrière-plan Figma 16 = blur CSS 8 px) */
  :is(.pks-hero--accueil,.pks-e-carte) .pks-onglets .e-n-tabs-heading{gap:8px!important;padding:0!important;height:48px;border:0!important;border-radius:100px;
    background:rgba(255,255,255,.18)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)!important;
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
  /* onglets 192,5 × 48, rayon 50, contour 1 px (compté dans les 48), espacement icône-libellé 8 */
  :is(.pks-hero--accueil,.pks-e-carte) .pks-onglets .e-n-tab-title{box-sizing:border-box;width:192.5px!important;flex:0 0 192.5px!important;height:48px;
    padding:11px 4px!important;border-radius:50px!important;gap:8px!important;justify-content:center!important;box-shadow:none!important;white-space:nowrap;}
  :is(.pks-hero--accueil,.pks-e-carte) .pks-onglets .e-n-tab-title-text{white-space:nowrap;}
  :is(.pks-hero--accueil,.pks-e-carte) .pks-onglets .e-n-tab-title[aria-selected="true"]{background:rgba(255,255,255,.2)!important;border:1px solid #1D4ED8!important;}
  :is(.pks-hero--accueil,.pks-e-carte) .pks-onglets .e-n-tab-title[aria-selected="false"]{background:transparent!important;border:1px solid transparent!important;}
  :is(.pks-hero--accueil,.pks-e-carte) .pks-onglets .e-n-tab-title-text{font-size:16px!important;line-height:24px!important;font-weight:500;}
  /* icône : cadre 24, pictogramme 20 (glyphe 15 × 16,7), trait 2 px réels (2,4 dans la grille 24 réduite à 20) */
  :is(.pks-hero--accueil,.pks-e-carte) .pks-onglets .e-n-tab-icon{width:24px;height:24px;justify-content:center;}
  :is(.pks-hero--accueil,.pks-e-carte) .pks-onglets .e-n-tab-icon svg path{stroke-width:2.4px;}
  :is(.pks-hero--accueil,.pks-e-carte) .pks-onglets .e-n-tab-title[aria-selected="false"] .e-n-tab-icon svg path{stroke:#09090B;}
  /* onglet actif : trait en dégradé #1D4ED8 → #2BD889 (dégradé défini par js/retours-hero.js) */
  :is(.pks-hero--accueil,.pks-e-carte) .pks-onglets .e-n-tab-title[aria-selected="true"] .e-n-tab-icon svg path{stroke:url(#pks-degrade-onglet);}

  /* ---------- R-32 : fond ---------- */
  /* a) tant que l'image Figma n'est pas importée : carte de Léa (cadrage inchangé, camions sur leurs routes),
        haut du héros uni jusque sous le sous-titre, fondu vers la carte entre 360 et 255 px du bas (relevé sur
        l'image Figma), voile bleuté (teinte relevée : fond de carte #F6FAFD → #D7E3F7, routes #CCE0F3 → #BBD2F2) */
  .pks-hero--accueil .pks-hero-fond--lea img{-webkit-mask-image:none!important;mask-image:none!important;}
  .pks-hero--accueil .pks-hero-fond--lea{-webkit-mask-image:linear-gradient(to top,#000 255px,transparent 360px);mask-image:linear-gradient(to top,#000 255px,transparent 360px);}
  .pks-hero--accueil .pks-hero-fond--lea::after{content:"";position:absolute;inset:0;background:rgba(157,184,237,.35);pointer-events:none;}

  /* b) image Figma importée (pages/accueil.py la pose) : elle couvre la carte, centrée ; les calques des camions
        prennent exactement sa boîte et suivent les trajets des variantes « Camion sur route — Gauche / Droite »
        (en % du cadre 1408 × 852 = l'image) */
  .pks-hero--accueil:has(.pks-hero-fond--figma) .pks-hero-fond--lea{display:none!important;}
  .pks-hero--accueil .pks-hero-fond--figma,
  .pks-hero--accueil:has(.pks-hero-fond--figma) .pks-camion-calque{position:absolute!important;inset:auto!important;left:50%!important;top:50%!important;
    width:max(100cqw,calc(100cqh * 2689 / 1627))!important;max-width:none!important;height:auto!important;aspect-ratio:2689/1627!important;
    margin:calc(max(100cqh,calc(100cqw * 1627 / 2689)) / -2) 0 0 calc(max(100cqw,calc(100cqh * 2689 / 1627)) / -2)!important;}
  .pks-hero--accueil .pks-hero-fond--figma img{width:100%!important;height:100%!important;object-fit:cover;-webkit-mask-image:none!important;mask-image:none!important;display:block;}
  .pks-hero--accueil:has(.pks-hero-fond--figma) .pks-camion--gauche{animation:pks-trajet-f-gauche 13.51s linear infinite;}
  .pks-hero--accueil:has(.pks-hero-fond--figma) .pks-camion--droite{animation:pks-trajet-f-droite 13.5s linear infinite;}
  .pks-hero--accueil:has(.pks-hero-fond--figma) .pks-camion--droite .pks-camion{transform:none;}
}
@keyframes pks-trajet-f-gauche{0.00%{transform:translate(2.06%,70.19%)}4.17%{transform:translate(3.76%,71.13%)}8.33%{transform:translate(5.75%,72.18%)}12.50%{transform:translate(7.74%,73.24%)}16.67%{transform:translate(9.73%,73.94%)}20.83%{transform:translate(11.72%,74.65%)}25.00%{transform:translate(13.71%,75.00%)}29.17%{transform:translate(15.63%,75.35%)}33.33%{transform:translate(16.62%,78.52%)}37.50%{transform:translate(17.76%,82.16%)}41.67%{transform:translate(18.61%,85.80%)}45.83%{transform:translate(19.03%,89.55%)}50.00%{transform:translate(19.39%,93.19%)}54.17%{transform:translate(19.03%,89.55%)}58.33%{transform:translate(18.61%,85.80%)}62.50%{transform:translate(17.76%,82.16%)}66.67%{transform:translate(16.62%,78.52%)}70.83%{transform:translate(15.62%,75.35%)}75.00%{transform:translate(13.71%,75.00%)}79.17%{transform:translate(11.72%,74.65%)}83.33%{transform:translate(9.73%,73.94%)}87.50%{transform:translate(7.74%,73.24%)}91.67%{transform:translate(5.75%,72.18%)}95.83%{transform:translate(3.76%,71.13%)}100%{transform:translate(2.06%,70.19%)}}
@keyframes pks-trajet-f-droite{0.00%{transform:translate(86.36%,65.61%)}5.00%{transform:translate(85.94%,70.78%)}10.00%{transform:translate(84.73%,73.71%)}15.00%{transform:translate(82.95%,76.64%)}20.00%{transform:translate(81.53%,79.34%)}25.00%{transform:translate(80.61%,82.16%)}30.00%{transform:translate(80.40%,85.09%)}35.00%{transform:translate(80.68%,87.68%)}40.00%{transform:translate(81.25%,89.32%)}45.00%{transform:translate(80.04%,91.67%)}50.00%{transform:translate(78.27%,94.60%)}55.00%{transform:translate(80.04%,91.67%)}60.00%{transform:translate(81.25%,89.32%)}65.00%{transform:translate(80.68%,87.68%)}70.00%{transform:translate(80.40%,85.09%)}75.00%{transform:translate(80.61%,82.16%)}80.00%{transform:translate(81.53%,79.34%)}85.00%{transform:translate(82.95%,76.64%)}90.00%{transform:translate(84.73%,73.71%)}95.00%{transform:translate(85.94%,70.78%)}100%{transform:translate(86.36%,65.61%)}}
@media (prefers-reduced-motion:reduce){ .pks-hero--accueil .pks-camion--gauche, .pks-hero--accueil .pks-camion--droite{animation:none!important;} }