/* Packler — lot « retours-apropos » (retours préprod du 27/10 : R-13, R-15, R-16). Chargée après site.css et lot-c.css. */

/* ---------- R-13 « Pourquoi Packler » : colonne de texte de 788 px (Figma 20124:38681), centrée ; bouton 40 px dessous ---------- */
.elementor-element.pks-c-pourquoi{width:100%!important;max-width:788px!important;margin-left:auto;margin-right:auto;}

/* ---------- R-16 « Bouton Play » (Figma 20192:10038 / survol 20192:10039) : verre 56 px, pastille bleue 40 px, triangle blanc ---------- */
.elementor-element.pks-c-play{width:56px!important;height:56px;box-sizing:border-box;border-radius:100px;background:rgba(255,255,255,.3);
  border:1px solid rgba(255,255,255,.5);box-shadow:0 8px 24px rgba(9,9,11,.16);position:relative;flex:none;}
.pks-c-play::before{content:"";position:absolute;left:7px;top:7px;width:40px;height:40px;border-radius:50%;background:#1D4ED8;transition:background-color .25s ease-out;}
/* triangle du SVG Figma : (19,6 ; 18,5) (36,4 ; 29,5) (19,6 ; 40,5) dans le bouton de 56 px, bordure de 1 px déduite */
.pks-c-play::after{content:"";position:absolute;left:18.6px;top:17.5px;width:16.8px;height:22px;border:0!important;background:#fff;
  -webkit-clip-path:polygon(0 0,100% 50%,0 100%);clip-path:polygon(0 0,100% 50%,0 100%);}
@media (hover:hover){
  /* l'état de survol est celui du bouton (prototype : ON_HOVER sur « Bouton Play »), pas de toute l'affiche */
  .pks-c-lecteur:hover .pks-c-play:not(:hover)::before{background:#1D4ED8;}
  .pks-c-lecteur:hover .pks-c-play:not(:hover)::after{background:#fff;}
  .pks-c-lecteur .pks-c-play:hover::before{background:#fff;}
  .pks-c-lecteur .pks-c-play:hover::after{background:linear-gradient(101deg,#1D4ED8 0%,#2BD889 129%);}
}

/* ---------- R-15 « Nos valeurs » (Figma « Bloc / Valeurs / Parcours » 19815:4363, variantes Étape 01 à 05) ----------
   Carte 1240 x 600, rayon 32, marge intérieure 140 / 80 ; arcs centrés à 240 px du bord droit et 520 px du haut ;
   progression sur l'arc de 860 px, de 9 h à 12 h par pas de 22,5° ; jalons de 12 px, celui de la valeur affichée = 22 px ;
   visuel rond révélé 190 -> 380 px ; fond clair (étapes impaires) / blanc filet (étapes paires) ; 0,8 s, courbe (.22,1,.36,1). */
@property --pks-vp-arc{syntax:"<angle>";inherits:true;initial-value:0deg;}
.pks-vp{--pks-vp-duree:.8s;--pks-vp-courbe:cubic-bezier(.22,1,.36,1);--pks-vp-arc:0deg;}
.pks-vp[data-etape="2"]{--pks-vp-arc:22.5deg;} .pks-vp[data-etape="3"]{--pks-vp-arc:45deg;}
.pks-vp[data-etape="4"]{--pks-vp-arc:67.5deg;} .pks-vp[data-etape="5"]{--pks-vp-arc:90deg;}

.elementor-element.pks-vp{position:relative;overflow:hidden;isolation:isolate;box-sizing:border-box;border-radius:32px;background-color:var(--pks-clair);
  box-shadow:inset 0 0 0 1.5px rgba(221,233,252,0);height:600px;padding:140px 0 0 80px!important;
  transition:--pks-vp-arc var(--pks-vp-duree) var(--pks-vp-courbe),background-color var(--pks-vp-duree) var(--pks-vp-courbe),box-shadow var(--pks-vp-duree) var(--pks-vp-courbe);}
.elementor-element.pks-vp.pks-vp--js{position:sticky!important;}
.pks-vp:is([data-etape="2"],[data-etape="4"]){background-color:#fff;box-shadow:inset 0 0 0 1.5px var(--pks-bord);}
.pks-vp:focus{outline:none;}
.pks-vp:focus-visible{outline:2px solid var(--pks-bleu);outline-offset:4px;}

/* contenu : pastille + titre + texte (la pastille est commune aux 5 étapes) */
.elementor-element.pks-vp-contenu{position:relative;z-index:1;width:460px!important;max-width:100%;gap:24px;}
.elementor-element.pks-vp-etapes{display:grid!important;grid-template-columns:minmax(0,1fr);}
.elementor-element.pks-vp-etape{grid-area:1/1;gap:24px;}
.pks-vp-etape .pks-c-texte{max-width:440px;}
.pks-vp--js .pks-vp-etape{opacity:0;visibility:hidden;transition:opacity calc(var(--pks-vp-duree) * .4) ease-out,visibility 0s linear calc(var(--pks-vp-duree) * .4);}
.pks-vp--js .pks-vp-etape.est-actif{opacity:1;visibility:visible;
  transition:opacity calc(var(--pks-vp-duree) * .75) var(--pks-vp-courbe) calc(var(--pks-vp-duree) * .25),visibility 0s;}
/* sans script : les 5 valeurs les unes sous les autres */
.pks-vp:not(.pks-vp--js){height:auto;min-height:600px;padding-bottom:80px!important;}
.pks-vp:not(.pks-vp--js) .pks-vp-etapes{display:flex!important;flex-direction:column;gap:48px;}

/* décor : boîte de l'arc 1 (1100 px), tout le reste se place dedans */
.elementor-element.pks-vp-deco{position:absolute!important;right:-310px;top:-30px;width:1100px!important;height:1100px;max-width:none!important;
  z-index:0;pointer-events:none;padding:0!important;}
.elementor-element.pks-vp-arc, .elementor-element.pks-vp-progres{position:absolute!important;width:auto!important;max-width:none!important;border-radius:50%;box-sizing:border-box;}
.elementor-element.pks-vp-arc{border:1.5px solid;transition:border-color var(--pks-vp-duree) var(--pks-vp-courbe);}
.pks-vp-arc--1{inset:0;border-color:rgba(29,78,216,.10)!important;}
.pks-vp-arc--2{inset:120px;border-color:rgba(29,78,216,.22)!important;}
.pks-vp-arc--3{inset:240px;border-color:rgba(29,78,216,.16)!important;}
.pks-vp-arc--4{inset:360px;border-color:rgba(29,78,216,.12)!important;}
.pks-vp:is([data-etape="2"],[data-etape="4"]) .pks-vp-arc--1{border-color:rgba(147,197,253,.25)!important;}
.pks-vp:is([data-etape="2"],[data-etape="4"]) .pks-vp-arc--2{border-color:rgba(147,197,253,.50)!important;}
.pks-vp:is([data-etape="2"],[data-etape="4"]) .pks-vp-arc--3{border-color:rgba(147,197,253,.40)!important;}
.pks-vp:is([data-etape="2"],[data-etape="4"]) .pks-vp-arc--4{border-color:rgba(147,197,253,.30)!important;}
/* progression : anneau (rayon intérieur 0,994) rempli de 9 h vers 12 h */
.elementor-element.pks-vp-progres{inset:120px;--pks-vp-trait:2.6px;
  background:conic-gradient(from 270deg,#1D4ED8 0deg var(--pks-vp-arc),transparent var(--pks-vp-arc));
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - var(--pks-vp-trait)),#000 calc(100% - var(--pks-vp-trait) + .5px));
          mask:radial-gradient(closest-side,transparent calc(100% - var(--pks-vp-trait)),#000 calc(100% - var(--pks-vp-trait) + .5px));}
/* jalons sur l'arc de 860 px (centre 550 ; 550 de la boîte, rayon 430) à 0 / 22,5 / 45 / 67,5 / 90° */
.elementor-element.pks-vp-jalon{position:absolute!important;width:12px!important;height:12px;margin:-6px 0 0 -6px;max-width:none!important;padding:0!important;
  box-sizing:border-box;border-radius:50%;background:#93C5FD;border:2px solid #fff;z-index:1;
  transition:width var(--pks-vp-duree) var(--pks-vp-courbe),height var(--pks-vp-duree) var(--pks-vp-courbe),margin var(--pks-vp-duree) var(--pks-vp-courbe),background-color var(--pks-vp-duree) var(--pks-vp-courbe);}
.pks-vp-jalon--1{left:120px;top:550px;} .pks-vp-jalon--2{left:152.7px;top:385.4px;} .pks-vp-jalon--3{left:245.9px;top:245.9px;}
.pks-vp-jalon--4{left:385.4px;top:152.7px;} .pks-vp-jalon--5{left:550px;top:120px;}
.pks-vp .pks-vp-jalon--1, .pks-vp:is([data-etape="2"],[data-etape="3"],[data-etape="4"],[data-etape="5"]) .pks-vp-jalon--2,
.pks-vp:is([data-etape="3"],[data-etape="4"],[data-etape="5"]) .pks-vp-jalon--3, .pks-vp:is([data-etape="4"],[data-etape="5"]) .pks-vp-jalon--4,
.pks-vp[data-etape="5"] .pks-vp-jalon--5{background:#1D4ED8;}
.pks-vp:not([data-etape]) .elementor-element.pks-vp-jalon--1, .pks-vp[data-etape="1"] .elementor-element.pks-vp-jalon--1,
.pks-vp[data-etape="2"] .elementor-element.pks-vp-jalon--2, .pks-vp[data-etape="3"] .elementor-element.pks-vp-jalon--3,
.pks-vp[data-etape="4"] .elementor-element.pks-vp-jalon--4, .pks-vp[data-etape="5"] .elementor-element.pks-vp-jalon--5{width:22px!important;height:22px;margin:-11px 0 0 -11px;}
/* visuel révélé, centré sur les arcs : 190 / 237,5 / 285 / 332,5 / 380 px */
.elementor-element.pks-vp-revele{position:absolute!important;left:50%;top:50%;width:190px!important;max-width:none!important;transform:translate(-50%,-50%);margin:0!important;
  transition:width var(--pks-vp-duree) var(--pks-vp-courbe);}
.pks-vp[data-etape="2"] .elementor-element.pks-vp-revele{width:237.5px!important;}
.pks-vp[data-etape="3"] .elementor-element.pks-vp-revele{width:285px!important;}
.pks-vp[data-etape="4"] .elementor-element.pks-vp-revele{width:332.5px!important;}
.pks-vp[data-etape="5"] .elementor-element.pks-vp-revele{width:380px!important;}
.pks-vp-revele img{display:block;width:100%!important;max-width:none!important;height:auto!important;aspect-ratio:1/1;object-fit:cover;border-radius:50%;
  border:6px solid #fff;box-sizing:border-box;}

/* bureau plus étroit que la maquette (1200-1439) : le décor reste calé à droite ; le texte se resserre pour s'arrêter
   avant l'arc (jalon 1 à 670 px du bord droit, + 24 px d'air) — 460 px dès que la carte atteint 1240 px */
@media (min-width:1200px){
  .elementor-element.pks-vp-contenu{width:min(460px, calc(100% - 694px))!important;}
}

/* tablette et mobile (Format=Mobile 350 x 632) : texte au-dessus, arc en dessous, calé en bas à droite ; 0,45 s ease-in-out */
@media (max-width:1199px){
  .pks-vp{--pks-vp-duree:.45s;--pks-vp-courbe:cubic-bezier(.42,0,.58,1);}
  .elementor-element.pks-vp{height:auto;min-height:632px;padding:32px 24px 250px!important;border-radius:24px;}
  .pks-vp:not(.pks-vp--js){padding-bottom:250px!important;}
  .elementor-element.pks-vp-contenu{width:100%!important;max-width:460px;gap:32px;}
  .elementor-element.pks-vp-etape{gap:16px;}
  .pks-vp-etape .pks-c-texte{max-width:none;}
  /* arc 1 de 440 px, centre à 70 px du bord droit et 60 px du bas */
  .elementor-element.pks-vp-deco{right:-150px;top:auto;bottom:-160px;width:440px!important;height:440px;}
  .elementor-element.pks-vp-arc{border-width:1px;}
  .pks-vp-arc--2, .elementor-element.pks-vp-progres{inset:48px;}
  .pks-vp-arc--3{inset:96px;} .pks-vp-arc--4{inset:144px;}
  .elementor-element.pks-vp-progres{--pks-vp-trait:1.2px;}
  .elementor-element.pks-vp-jalon{border-width:1.2px;}
  .pks-vp-jalon--1{left:48px;top:220px;} .pks-vp-jalon--2{left:61.1px;top:154.2px;} .pks-vp-jalon--3{left:98.4px;top:98.4px;}
  .pks-vp-jalon--4{left:154.2px;top:61.1px;} .pks-vp-jalon--5{left:220px;top:48px;}
  .pks-vp .elementor-element.pks-vp-revele, .pks-vp[data-etape] .elementor-element.pks-vp-revele{width:100px!important;}
  .pks-vp-revele img{border-width:3.6px;}
}

/* animations réduites : changement immédiat, le bloc reste lisible et le défilement n'est jamais retenu */
@media (prefers-reduced-motion:reduce){
  .elementor-element.pks-vp, .pks-vp *{transition-duration:.01s!important;transition-delay:0s!important;}
}