/* La Clique — finitions haut de gamme (13 octobre 2026, demandées par Gabriel)
   Une micro-interaction faite à la main par section, discrète. Tout se coupe :
   - sur écran tactile (pas de curseur) ;
   - si l'appareil demande moins de mouvement.
   Polices : Space Grotesk, JetBrains Mono (et Oswald à l'accueil). Jamais Inter. */

/* ---------- Typo plus raffinée ---------- */
.ec-titre,.cm-hero .c-title,.me-ex-txt h3{text-wrap:balance;font-feature-settings:"ss01","kern"}
.ec-intro,.cm-ana-txt p,.cm-def,.pa-m .txt,.or-tuile p{text-wrap:pretty}
::selection{background:rgba(0,255,255,.28);color:#fff}
.ec a:focus-visible,.ec button:focus-visible,.ec input:focus-visible,.ec textarea:focus-visible,
.cm-wrap a:focus-visible,.cm-wrap button:focus-visible{outline:2px solid #00ffff;outline-offset:3px}

/* ---------- Le curseur : un anneau fin qui suit, et grossit sur ce qui se clique ---------- */
.fx-curseur{position:fixed;left:0;top:0;z-index:2147483000;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;
  border:1px solid rgba(0,255,255,.55);pointer-events:none;opacity:0;
  transition:width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1),margin .35s cubic-bezier(.2,.8,.2,1),opacity .3s,border-color .3s,background .3s}
.fx-curseur.vu{opacity:1}
.fx-curseur.sur{width:52px;height:52px;margin:-26px 0 0 -26px;border-color:rgba(0,255,255,.85);background:rgba(0,255,255,.06)}
.fx-curseur.appui{width:22px;height:22px;margin:-11px 0 0 -11px}
html.fx-tactile .fx-curseur{display:none}

/* ---------- Apparition douce quand ça entre à l'écran ---------- */
.fx-rv{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.fx-rv.fx-in{opacity:1;transform:none}

/* 01 La méthode — la photo s'incline à peine vers la souris */
.me-photo{perspective:1200px}
.me-cadre,.me-badge,.me-clic{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.me-photo.fx-on .me-cadre{transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg))}
.me-photo.fx-on .me-badge{transform:translate3d(var(--px,0),var(--py,0),0)}
.me-photo.fx-on .me-clic{transform:translate3d(calc(var(--px,0) * -1),calc(var(--py,0) * -1),0)}

/* 02 Les parcours — une lueur suit le curseur sur les cartes */
.pa-m,.pa-c{position:relative}
.pa-m::before,.pa-c::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(260px circle at var(--sx,50%) var(--sy,50%),color-mix(in srgb,var(--c,#00ffff) 22%,transparent),transparent 65%);mix-blend-mode:screen}
.pa-m:hover::before,.pa-c:hover::before{opacity:1}

/* 03 L'ordinateur virtuel — profondeur : le fond et la fenêtre glissent un peu */
.or-bureau>img{transition:transform .7s cubic-bezier(.2,.8,.2,1);transform:scale(1.06) translate3d(var(--bx,0),var(--by,0),0)}
.or-fen{transition:transform .7s cubic-bezier(.2,.8,.2,1);transform:translateX(-50%) translate3d(var(--fx,0),var(--fy,0),0)}

/* 04 Clic — il se penche vers ta souris */
.cl-perso{transition:transform .8s cubic-bezier(.2,.8,.2,1);transform:translateX(var(--lx,0)) rotate(var(--lr,0deg));transform-origin:50% 100%}
.cl-faisceau{transition:transform .8s cubic-bezier(.2,.8,.2,1);transform:translateX(-50%) rotate(var(--fr,0deg));transform-origin:50% 0}

/* 05 Contact — le bouton est aimanté */
.co-form .ec-btn{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.co-form .ec-btn.fx-aimant{transform:translate3d(var(--mx,0),var(--my,0),0)}

/* Page d'un cours — la photo du défi bouge à peine, et le schéma se dessine */
.cm-hero>img{transition:transform 1s cubic-bezier(.2,.8,.2,1);transform:scale(1.07) translate3d(var(--hx,0),var(--hy,0),0)}
.cm-ana-sch svg .l,.cm-ana-sch svg .a,.cm-ana-sch svg .d,.cm-ana-sch svg .m,.cm-ana-sch svg .g,.cm-ana-sch svg .r{stroke-dasharray:600;stroke-dashoffset:600;animation:fxTrace 1.6s cubic-bezier(.4,0,.2,1) .2s forwards}
@keyframes fxTrace{to{stroke-dashoffset:0}}

/* ==========================================================
   Passage cellulaire : ce qui se cache, se compacte, se redimensionne
   ========================================================== */
@media (max-width:600px){
  /* Caché : les décors qui doublent ce qui est déjà là (Clic est déjà en haut à droite) */
  .me-clic,.me-cta-in img,.co-clic,.or-clic .ec-bulle,.cm-chips span:not(.c-badge),.ec-etoile,.me-etapes>svg{display:none !important}
  /* Compact */
  .ec-titre{font-size:clamp(1.9rem,8.4vw,2.3rem) !important;line-height:1.06}
  .ec-intro{font-size:15.5px !important}
  .ec-sur{font-size:11.5px}
  .ec-btn{min-height:48px;padding:0 20px;font-size:15px}
  .me-photo{height:260px}
  .me-badge{padding:9px 12px;border-radius:12px}
  .me-badge svg{width:26px;height:26px}
  .me-etape{padding:14px 16px;border-radius:14px}
  .me-etape .n{width:40px;height:40px;font-size:13px}
  .me-etape b{font-size:18px}
  .me-etape span:last-child{font-size:14px}
  .me-etapes{gap:10px}
  .me-ex{min-height:0}
  .me-ex-txt h3{font-size:22px}
  .me-ex-txt p:last-child{font-size:15px}
  .me-ex-vis{min-height:260px}
  .me-cta{min-height:0;margin-top:36px}
  .me-cta-in{padding:22px 20px}
  .me-cta-in .ec-btn{width:100%;justify-content:center}
  .me-cta-in>div:last-child{width:100%}
  /* Les métiers défilent de côté au lieu de s'empiler */
  .pa-metiers{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:4px 16px 12px;scrollbar-width:none}
  .pa-metiers::-webkit-scrollbar{display:none}
  .pa-m{flex:0 0 82%;scroll-snap-align:center}
  .pa-m .ph{height:210px}
  .pa-m .nom{font-size:24px}
  .pa-m .txt{font-size:14.5px;padding:14px 18px 18px}
  .pa-base h3{font-size:30px !important}
  .pa-c{min-height:132px;padding:18px}
  .pa-c>span:nth-child(2){font-size:22px !important}
  .pa-c img{height:84px}
  .pa-puces span{padding:8px 12px;font-size:13.5px}
  .pa-appr p[id=paApprNom]{font-size:22px !important}
  /* Les applis en rangée qui défile, sans la ligne d'aide */
  .or-apps{flex-direction:row;overflow-x:auto;margin:0 -16px;padding:2px 16px 6px;scrollbar-width:none}
  .or-apps::-webkit-scrollbar{display:none}
  .or-app{flex:none;min-height:44px;padding:8px 14px;border-radius:999px;gap:8px}
  .or-app small{display:none}
  .or-app b{font-size:15px}
  .or-bureau{height:380px}
  .or-fen{height:300px}
  .or-clic{bottom:-30px}
  .or-tuiles{gap:10px;margin-top:64px}
  .or-tuile{padding:16px}
  .or-tuile b{font-size:17px}
  .or-tuile p{font-size:14px}
  /* Clic : la scène rapetisse, ses humeurs défilent de côté */
  .cl-scene{height:330px}
  .cl-perso{bottom:50px}
  .cl-perso img{height:240px}
  .cl-sol,.cl-anneau{bottom:30px;height:60px}
  .cl-dit{max-width:190px;font-size:14px;padding:12px 14px}
  .cl-crans li{padding:9px 12px;gap:10px}
  .cl-crans li b{font-size:15px}
  .cl-poses{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:2px 16px 8px;scrollbar-width:none}
  .cl-poses::-webkit-scrollbar{display:none}
  .cl-pose{flex:none;width:68px;height:68px;border-radius:14px}
  .cl-pose img{height:50px}
  /* Contact : la photo laisse plus de place au formulaire */
  .co-photo{min-height:430px}
  .co-txt{bottom:22px;gap:10px}
  .co-txt>p:nth-of-type(2){font-size:16px !important}
  .co-form{gap:12px}
  .co-pour{min-height:38px;padding:0 12px;font-size:13.5px}
  /* Page d'un cours */
  .cm-hero{min-height:210px}
  .cm-hero .c-title{font-size:26px}
  .cm-ana-sch .schema svg{max-height:150px}
  .cm-mot{font-size:23px !important}
  .cm-ana{gap:14px}
}
@media (max-width:380px){
  .ec-titre{font-size:1.75rem !important}
  .pa-m{flex-basis:88%}
}

@media (prefers-reduced-motion:reduce){
  .fx-rv{opacity:1 !important;transform:none !important;transition:none !important}
  .fx-curseur{display:none}
  .cm-ana-sch svg *{animation:none !important;stroke-dashoffset:0 !important}
  .me-cadre,.me-badge,.me-clic,.or-bureau>img,.or-fen,.cl-perso,.cl-faisceau,.cm-hero>img,.co-form .ec-btn{transition:none !important}
}