/* La Clique — les écrans « en savoir plus » (méthode, parcours, ordinateur virtuel, Clic, contact)
   Tirés des maquettes approuvées par Gabriel (13 octobre 2026). Les animations se coupent si l'appareil demande moins de mouvement. */
.ec{max-width:1240px;margin:0 auto;padding:64px 24px 48px;position:relative;isolation:isolate}
.ec::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);z-index:-1;background:var(--fond,none);pointer-events:none}
.ec-sur{margin:0;display:inline-flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.12em}
.ec-sur i{width:8px;height:8px;animation:ecPulse 2.4s ease-in-out infinite}
.ec-titre{margin:0;font-size:clamp(2.2rem,4.4vw,4rem);line-height:1.03;letter-spacing:-.02em;font-weight:700}
.ec-intro{margin:0;font-size:clamp(1rem,1.4vw,1.19rem);line-height:1.6;color:#c8d6ea;max-width:56ch}
.ec-mono{margin:0;font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.1em;color:#93a8c6}
.ec-btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font:inherit;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;border:0;background:linear-gradient(90deg,#00ffff,#8338ec);color:#02121c;transition:transform .25s,box-shadow .25s}
.ec-btn:hover{transform:translateY(-2px);box-shadow:0 0 28px rgba(0,255,255,.55);color:#02121c}
.ec-btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.28);color:#e6f1ff;font-weight:500}
.ec-btn.ghost:hover{color:#fff}
.ec-btn.blanc{background:#fff;color:#07142e}
.ec-float{animation:ecFloat 5s ease-in-out infinite}
.ec-bulle{padding:12px 14px;border-radius:18px 18px 4px 18px;background:rgba(6,14,30,.94);border:1px solid rgba(0,255,255,.45);font-size:14px;line-height:1.4;color:#e6f1ff}
.ec-dash{stroke-dasharray:6 8;animation:ecDash 1.6s linear infinite}
@keyframes ecFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes ecPulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes ecDash{to{stroke-dashoffset:-40}}
@keyframes ecScan{0%{transform:translateY(-100%)}100%{transform:translateY(420%)}}
@keyframes ecSpark{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
@keyframes ecPing{0%{transform:scale(.8);opacity:1}100%{transform:scale(2.4);opacity:0}}
@keyframes ecBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes ecBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.015)}}
@keyframes ecRing{0%{transform:translate(-50%,0) scale(.7);opacity:.8}100%{transform:translate(-50%,0) scale(1.5);opacity:0}}
@keyframes ecPop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

/* ---------- 01 La méthode ---------- */
#methode{--fond:radial-gradient(60% 40% at 88% 0%,rgba(0,255,255,.13),transparent 70%),radial-gradient(45% 35% at 0% 100%,rgba(131,56,236,.16),transparent 70%)}
.me-haut{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:center}
.me-haut>div:first-child{display:flex;flex-direction:column;gap:22px}
.me-photo{position:relative;height:470px}
.me-cadre{position:absolute;inset:0 0 0 30px;clip-path:polygon(0 0,calc(100% - 40px) 0,100% 40px,100% 100%,40px 100%,0 calc(100% - 40px));background:linear-gradient(160deg,rgba(0,255,255,.9),rgba(131,56,236,.7));padding:2px}
.me-cadre>div{position:relative;width:100%;height:100%;clip-path:polygon(0 0,calc(100% - 39px) 0,100% 39px,100% 100%,39px 100%,0 calc(100% - 39px));overflow:hidden;background:#050a18}
.me-cadre img{width:100%;height:100%;object-fit:cover;filter:saturate(1.15) contrast(1.05)}
.me-scan{position:absolute;left:0;right:0;top:0;height:22%;background:linear-gradient(180deg,transparent,rgba(0,255,255,.12),transparent);animation:ecScan 3.8s linear infinite}
.me-badge{position:absolute;left:0;top:46px;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;background:rgba(6,14,30,.92);border:1px solid rgba(0,255,255,.4);box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 22px rgba(0,255,255,.18)}
.me-clic{position:absolute;right:-10px;bottom:34px;width:270px;display:flex;gap:10px;align-items:flex-end;animation-delay:-2.5s}
.me-clic img{height:110px;width:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.me-etapes{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.me-etapes>svg{position:absolute;left:0;right:0;top:50px;width:100%}
.me-etape{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left;font:inherit;color:#e6f1ff;padding:24px;border-radius:18px;background:rgba(8,18,36,.7);border:1px solid rgba(255,255,255,.12);cursor:pointer;transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s,background .3s}
.me-etape:hover{transform:translateY(-4px);border-color:rgba(0,255,255,.6)}
.me-etape .n{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;font-family:'JetBrains Mono',monospace;font-size:15px;background:#02050c;border:1.5px solid var(--c);color:var(--c);box-shadow:0 0 8px var(--c)}
.me-etape b{display:block;font-size:22px;margin-top:18px}
.me-etape span:last-child{display:block;font-size:15px;line-height:1.55;color:#a9bad2;margin-top:8px}
.me-etape.on{background:linear-gradient(160deg,rgba(0,255,255,.14),rgba(131,56,236,.14));border-color:var(--c);box-shadow:0 0 30px color-mix(in srgb,var(--c) 22%,transparent)}
.me-etape.on .n{box-shadow:0 0 22px var(--c)}
.me-ex{margin-top:28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid rgba(0,255,255,.22);background:rgba(8,18,36,.6);clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%);min-height:420px}
.me-ex-txt{padding:40px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.me-ex-txt h3{margin:0;font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1.15}
.me-ex-txt p:last-child{margin:0;font-size:17px;line-height:1.6;color:#c8d6ea;max-width:46ch}
.me-ex-vis{position:relative;overflow:hidden;border-left:1px solid rgba(0,255,255,.18);min-height:320px}
.me-vue{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:30px}
.me-vue.on{display:flex;animation:ecPop .4s ease}
.me-vue img.fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.me-pastille{position:absolute;left:24px;bottom:24px;padding:8px 14px;border-radius:999px;background:rgba(2,5,12,.8);border:1px solid rgba(0,255,255,.4);font-size:14px}
.me-schema{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.me-schema .bloc{display:flex;flex-direction:column;align-items:center;gap:10px;width:110px;font-size:14px;color:#c8d6ea}
.me-schema .bloc span{width:84px;height:84px;border-radius:22px;border:1.5px solid var(--c);display:flex;align-items:center;justify-content:center;box-shadow:0 0 20px color-mix(in srgb,var(--c) 30%,transparent)}
.me-terme{width:100%;max-width:440px;padding:28px;border-radius:20px;background:linear-gradient(160deg,rgba(131,56,236,.25),rgba(0,52,255,.15));border:1px solid rgba(131,56,236,.6)}
.me-puce{padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.2);font-size:13px}
.me-fen{width:100%;max-width:480px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.18);box-shadow:0 20px 50px rgba(0,0,0,.5);background:#f3f3f3;color:#1b1b1b;font-family:'Segoe UI',system-ui,sans-serif}
.me-cta{position:relative;margin-top:56px;min-height:230px;clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%);overflow:hidden;display:flex;align-items:center}
.me-cta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.me-cta-in{position:relative;width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:28px 56px}
.me-cta-in img{height:150px;width:auto;transform:scaleX(-1)}
.ec-etoile{position:absolute;width:10px;height:10px;background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);box-shadow:0 0 12px #00ffff;animation:ecSpark 3.2s ease-in-out infinite}

/* ---------- 02 Les parcours ---------- */
#parcours{--fond:radial-gradient(50% 35% at 50% 0%,rgba(57,255,20,.08),transparent 70%),radial-gradient(45% 35% at 100% 60%,rgba(255,0,255,.10),transparent 70%)}
.pa-base{position:relative;margin-top:48px;padding:36px;border:1px solid rgba(0,255,255,.35);background:linear-gradient(120deg,rgba(0,255,255,.08),rgba(131,56,236,.10));clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,0 100%);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:36px;align-items:center}
.pa-cours{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.pa-c{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px;min-height:220px;text-decoration:none;color:#e6f1ff;background:rgba(2,5,12,.7);overflow:hidden;transition:transform .3s,border-color .3s}
.pa-c:hover{transform:translateY(-3px);border-color:rgba(0,255,255,.7) !important;color:#e6f1ff}
.pa-c img{position:absolute;right:-6px;bottom:-8px;height:120px;width:auto}
.pa-lien{position:relative;height:110px}
.pa-lien svg{position:absolute;inset:0;width:100%;height:100%}
.pa-lien span{position:absolute;left:50%;top:66px;transform:translateX(-50%);font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.1em;color:#93a8c6;background:#02050c;padding:0 10px;white-space:nowrap}
.pa-metiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pa-m{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;font:inherit;color:inherit;padding:0;text-align:left;background:rgba(8,18,36,.85);overflow:hidden;clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%);border:1px solid rgba(255,255,255,.14);cursor:pointer;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.pa-m:hover{transform:translateY(-6px)}
.pa-m.on{border-color:var(--c);box-shadow:0 0 34px color-mix(in srgb,var(--c) 33%,transparent)}
.pa-m .ph{position:relative;display:block;height:330px;overflow:hidden}
.pa-m .ph img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.1);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.pa-m:hover .ph img{transform:scale(1.06)}
.pa-m .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,5,12,.1) 40%,rgba(2,5,12,.95))}
.pa-m .tag{position:absolute;z-index:1;left:16px;top:16px;padding:5px 12px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;color:#02050c;background:var(--c)}
.pa-m .bt{position:absolute;z-index:1;right:16px;top:16px;padding:5px 12px;border-radius:999px;background:rgba(2,5,12,.75);border:1px solid rgba(255,255,255,.25);font-size:13px;color:#e6f1ff}
.pa-m .nom{position:absolute;z-index:1;left:22px;bottom:18px;font-size:30px;font-weight:700;color:#fff}
.pa-m .txt{display:block;flex:1 1 auto;padding:18px 22px 22px;font-size:16px;line-height:1.55;color:#c8d6ea}
.pa-appr{margin-top:28px;padding:30px 34px;border:1px solid rgba(255,255,255,.12);background:rgba(8,18,36,.7);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:30px;align-items:center}
.pa-puces{display:flex;flex-wrap:wrap;gap:10px}
.pa-puces span{padding:10px 16px;border-radius:999px;font-size:15px;border:1px solid var(--c);color:#e6f1ff;background:rgba(2,5,12,.6);box-shadow:inset 0 0 12px color-mix(in srgb,var(--c) 13%,transparent);animation:ecPop .35s ease both}

/* ---------- 03 L'ordinateur virtuel ---------- */
#ordi{--fond:radial-gradient(50% 40% at 80% 20%,rgba(255,0,255,.12),transparent 70%),radial-gradient(40% 35% at 10% 90%,rgba(0,255,255,.10),transparent 70%)}
.or-haut{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:56px;align-items:start}
.or-haut>div:first-child{display:flex;flex-direction:column;gap:18px;padding-top:10px}
.or-apps{display:flex;flex-direction:column;gap:10px}
.or-app{font:inherit;color:#e6f1ff;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;min-height:64px;background:transparent;border:1px solid rgba(255,255,255,.12);cursor:pointer;text-align:left;transition:transform .25s,border-color .25s,background .25s}
.or-app:hover{transform:translateX(4px)}
.or-app>i{flex:none;width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 4px var(--c)}
.or-app.on{background:rgba(255,255,255,.06);border-color:var(--c);box-shadow:0 0 22px color-mix(in srgb,var(--c) 20%,transparent)}
.or-app.on>i{box-shadow:0 0 14px var(--c)}
.or-app b{display:block;font-size:17px;font-weight:600}
.or-app small{display:block;font-size:13px;color:#a9bad2}
.or-ecran{position:relative}
.or-coque{border-radius:22px;padding:12px;background:linear-gradient(160deg,#1b2128,#0b0e12);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(255,0,255,.12)}
.or-bureau{position:relative;height:560px;border-radius:12px;overflow:hidden;font-family:'Segoe UI',system-ui,sans-serif}
.or-bureau>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(2px) saturate(1.2) brightness(.8)}
.or-fen{position:absolute;left:50%;top:40px;transform:translateX(-50%);width:88%;height:420px;background:#f3f3f3;color:#1b1b1b;border-radius:10px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.55);display:flex;flex-direction:column}
.or-fen-barre{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;background:#e6e9ef;font-size:13px}
.or-vue{flex:1;display:none;min-height:0}
.or-vue.on{display:flex;animation:ecPop .35s ease}
.or-taches{position:absolute;left:0;right:0;bottom:0;height:52px;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(238,242,248,.85);backdrop-filter:blur(20px)}
.or-taches span{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.or-taches span i{width:20px;height:20px;border-radius:6px;background:var(--c)}
.or-taches span.on{background:rgba(0,0,0,.08);box-shadow:inset 0 -3px 0 #0b57d0}
.or-clic{position:absolute;right:-36px;bottom:-40px;display:flex;align-items:flex-end;gap:8px}
.or-clic .ec-bulle{max-width:200px}
.or-clic img{height:130px;width:auto}
.ping{position:absolute;width:14px;height:14px}
.ping::before,.ping::after{content:"";position:absolute;border-radius:50%;background:#ff00ff}
.ping::before{inset:0;animation:ecPing 1.6s ease-out infinite}
.ping::after{inset:3px}
.caret{animation:ecBlink 1s steps(1) infinite}
.or-tuiles{margin-top:80px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.or-tuile{padding:26px;border:1px solid rgba(255,255,255,.12);background:rgba(8,18,36,.7);display:flex;gap:16px;align-items:flex-start;transition:transform .3s,border-color .3s}
.or-tuile:hover{transform:translateY(-4px);border-color:rgba(255,0,255,.6)}
.or-tuile svg{flex:none}
.or-tuile b{display:block;font-size:19px;font-weight:600}
.or-tuile p{margin:6px 0 0;font-size:15px;line-height:1.5;color:#a9bad2}

/* ---------- 04 Clic ---------- */
#clic{--fond:radial-gradient(40% 50% at 30% 55%,rgba(0,255,255,.16),transparent 70%),radial-gradient(40% 40% at 90% 10%,rgba(198,255,51,.08),transparent 70%)}
.cl-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:center}
.cl-scene{position:relative;height:640px}
.cl-sol{position:absolute;left:50%;bottom:40px;width:420px;max-width:90%;height:90px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(0,255,255,.45),transparent);filter:blur(4px)}
.cl-anneau{position:absolute;left:50%;bottom:40px;width:420px;max-width:90%;height:90px;border-radius:50%;border:2px solid rgba(0,255,255,.6);animation:ecRing 3s ease-out infinite}
.cl-faisceau{position:absolute;left:50%;top:0;width:520px;max-width:100%;height:600px;transform:translateX(-50%);background:conic-gradient(from 180deg at 50% 0%,transparent 160deg,rgba(0,255,255,.10) 175deg,rgba(0,255,255,.18) 180deg,rgba(0,255,255,.10) 185deg,transparent 200deg)}
.cl-perso{position:absolute;left:0;right:0;bottom:70px;display:flex;justify-content:center}
.cl-perso img{height:470px;width:auto;max-width:100%;object-fit:contain;transform-origin:50% 100%;animation:ecBreathe 4.5s ease-in-out infinite;filter:drop-shadow(0 20px 40px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(0,255,255,.25))}
.cl-dit{position:absolute;right:0;top:40px;max-width:280px;padding:16px 18px;border-radius:22px 22px 22px 6px;background:rgba(6,14,30,.95);border:1px solid rgba(0,255,255,.5);box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 24px rgba(0,255,255,.2);font-size:17px;line-height:1.45;animation:ecPop .45s cubic-bezier(.2,1.3,.4,1)}
.cl-droite{display:flex;flex-direction:column;gap:20px}
.cl-crans{display:flex;flex-direction:column;gap:8px;margin-top:6px;padding:0;list-style:none}
.cl-crans li{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.08);opacity:.5;transition:all .3s}
.cl-crans li .n{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:13px;background:rgba(255,255,255,.08)}
.cl-crans li b{font-size:16px;font-weight:600}
.cl-crans li em{margin-left:auto;font-style:normal;font-size:14px;color:#93a8c6}
.cl-crans li.ouvert{opacity:1;background:rgba(0,255,255,.08);border-color:rgba(0,255,255,.45)}
.cl-crans li.ouvert .n{background:#00ffff;color:#02050c}
.cl-crans li.prochain{opacity:1;border:1px dashed rgba(131,56,236,.7)}
.cl-poses{display:flex;gap:10px;flex-wrap:wrap}
.cl-pose{width:84px;height:84px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:18px;cursor:pointer;background:rgba(8,18,36,.8);border:1px solid rgba(255,255,255,.14);transition:transform .25s,border-color .25s,background .25s}
.cl-pose:hover{transform:translateY(-4px)}
.cl-pose.on{background:rgba(0,255,255,.12);border:1.5px solid #00ffff;box-shadow:0 0 18px rgba(0,255,255,.35)}
.cl-pose img{height:62px;width:auto}

/* ---------- 05 Contact ---------- */
/* (13 oct.) « display:grid » enlevé ici : il forçait le Contact à s'afficher sous tous les écrans. Il est mis seulement quand l'écran Contact est ouvert (#contact.ec.on, plus bas). */
#contact.ec{max-width:none;padding:0;min-height:calc(100dvh - 150px);grid-template-columns:minmax(0,760fr) minmax(0,680fr)}
.co-photo{position:relative;overflow:hidden;min-height:520px}
.co-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.15)}
.co-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,5,12,.15) 0%,rgba(2,5,12,.55) 70%,#02050c 100%),linear-gradient(180deg,transparent 55%,rgba(2,5,12,.92))}
.co-txt{position:absolute;z-index:1;left:clamp(24px,7vw,100px);right:24px;bottom:80px;max-width:520px;display:flex;flex-direction:column;gap:16px}
.co-droite{position:relative;padding:72px clamp(24px,7vw,100px) 120px 24px;display:flex;align-items:flex-start}
.co-form{position:relative;width:100%;max-width:560px;display:flex;flex-direction:column;gap:16px;padding:34px;background:rgba(8,18,36,.82);border:1px solid rgba(0,255,255,.28);backdrop-filter:blur(12px);clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,28px 100%,0 calc(100% - 28px));box-shadow:0 30px 80px rgba(0,0,0,.5)}
.co-form fieldset{border:0;padding:0;margin:0;display:flex;gap:8px;flex-wrap:wrap}
.co-form legend{font-size:14px;color:#a9bad2;margin-bottom:8px}
.co-pour{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.2);font-size:14px;cursor:pointer}
.co-pour:has(input:checked){border-color:#00ffff;background:rgba(0,255,255,.12)}
.co-pour input{accent-color:#00ffff}
.co-deux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.co-form label.ch{display:flex;flex-direction:column;gap:6px;font-size:14px}
.co-form input[type=text],.co-form input[type=email],.co-form textarea{font:inherit;font-size:16px;color:#e6f1ff;background:rgba(120,150,210,.1);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:13px 16px}
.co-form textarea{border-radius:18px;resize:vertical}
.co-clic{position:absolute;right:clamp(0px,4vw,60px);bottom:-10px;height:170px;width:auto;filter:drop-shadow(0 10px 20px rgba(0,0,0,.6));pointer-events:none}

/* ---------- Tablettes et cellulaires ---------- */
@media (max-width:980px){
  .me-haut,.or-haut,.cl-grille,.pa-base,.pa-appr,.me-ex{grid-template-columns:minmax(0,1fr)}
  .me-haut{gap:40px}
  .me-photo{height:380px}
  .me-etapes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .me-etapes>svg{display:none}
  .me-ex-vis{border-left:0;border-top:1px solid rgba(0,255,255,.18);min-height:340px}
  .pa-metiers,.or-tuiles{grid-template-columns:minmax(0,1fr)}
  .pa-lien{height:60px}
  .pa-lien svg{display:none}
  .pa-lien span{top:20px}
  .or-clic{right:0;bottom:-60px}
  .or-tuiles{margin-top:96px}
  .cl-scene{height:460px}
  .cl-perso img{height:330px}
  #contact.ec{grid-template-columns:minmax(0,1fr)}
  .co-photo{min-height:420px}
  .co-droite{padding:24px 16px 150px}
}
@media (max-width:600px){
  .ec{padding:40px 16px 40px}
  .me-photo{height:320px}
  .me-cadre{left:0}
  .me-badge{top:16px;left:10px}
  .me-clic{right:0;bottom:-30px;width:230px}
  .me-clic img{height:84px}
  .me-etapes{grid-template-columns:minmax(0,1fr)}
  .me-etape{display:grid;justify-content:stretch;grid-template-columns:52px minmax(0,1fr);column-gap:14px;align-items:center;padding:16px}
  .me-etape b{margin-top:0}
  .me-etape span:last-child{grid-column:1/-1}
  .me-ex-txt{padding:26px 22px}
  .me-cta-in{padding:24px 22px}
  .me-cta-in img{height:110px}
  .pa-base{padding:24px 20px}
  .pa-cours{grid-template-columns:minmax(0,1fr)}
  .pa-c{min-height:160px}
  .pa-c img{height:96px}
  .pa-m .ph{height:240px}
  .pa-appr{padding:22px}
  .or-bureau{height:440px}
  .or-fen{width:94%;top:16px;height:350px}
  .or-fen .cache-cell{display:none !important}
  .or-vue>div[style*=grid]{grid-template-columns:minmax(0,1fr) !important}
  .or-clic img{height:96px}
  .or-clic .ec-bulle{max-width:160px;font-size:13px}
  .cl-scene{height:400px}
  .cl-perso img{height:280px}
  .cl-dit{max-width:210px;font-size:15px;top:10px}
  .co-deux{grid-template-columns:minmax(0,1fr)}
  .or-indice{position:static !important;max-width:none !important;margin-top:4px}
  .or-ping{display:none}
  .co-photo{min-height:600px}
  .co-txt{bottom:28px}
  .co-form{padding:24px 20px}
  .co-clic{height:120px}
}
@media (prefers-reduced-motion:reduce){
  .ec *,.ec *::before,.ec *::after{animation:none !important;transition:none !important}
}
.ecrans-corps > #contact.ec{padding:0 !important}
.ecrans-corps > #contact.ec.on{display:grid}
.ecrans-corps{overflow-x:hidden}

/* Cartes des cours de la base (13 oct.) : sujets en pastilles, bouton Commencer, progression, Cours 102 verrouillé tant que L'Alphabet n'est pas fini */
.pa-c{gap:8px !important;min-height:0 !important}
.pa-c img{display:none !important}
.pa-c-num{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em}
.pa-c-titre{font-size:26px;font-weight:700}
.pa-c-meta{font-family:'JetBrains Mono',monospace;font-size:13px;color:#a9bad2}
.pa-c-prog{display:flex;align-items:center;gap:10px;margin-top:2px}
.pa-c-prog[hidden]{display:none}
.pa-c-prog i{flex:1;height:5px;border-radius:9px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.pa-c-prog i::after{content:"";position:absolute;inset:0;width:var(--p,0%);background:linear-gradient(90deg,#00ffff,#8338ec);box-shadow:0 0 10px rgba(0,255,255,.6);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.pa-c-prog b{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;color:#c8d6ea;white-space:nowrap}
.pa-c-sujets{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 6px}
.pa-c-sujets span{padding:5px 11px;border-radius:999px;border:1px solid rgba(0,255,255,.28);background:rgba(0,255,255,.05);font-size:13px;color:#d6e6fa;opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease,border-color .25s,background .25s}
.ecrans-corps > #parcours.on .pa-c-sujets span{opacity:1;transform:none}
.pa-c-sujets span:nth-child(2){transition-delay:.05s}.pa-c-sujets span:nth-child(3){transition-delay:.1s}.pa-c-sujets span:nth-child(4){transition-delay:.15s}.pa-c-sujets span:nth-child(5){transition-delay:.2s}.pa-c-sujets span:nth-child(6){transition-delay:.25s}
.pa-c[data-cours="algebre"] .pa-c-sujets span{border-color:rgba(180,140,255,.35);background:rgba(131,56,236,.08)}
.pa-c:hover .pa-c-sujets span{border-color:rgba(0,255,255,.55)}
.pa-c-btn{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px;border-radius:999px;font-weight:700;font-size:15px;color:#02121c;
  background:linear-gradient(90deg,#00ffff,#8338ec,#00ffff);background-size:200% 100%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);transition:background-position .6s ease,box-shadow .25s,transform .2s}
.pa-c-btn svg{transition:transform .25s ease}
.pa-c:hover .pa-c-btn{background-position:100% 0;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85),0 8px 26px rgba(0,255,255,.35)}
.pa-c:hover .pa-c-btn svg{transform:translateX(4px)}
.pa-c:focus-visible{outline:2px solid #00ffff;outline-offset:3px}
.pa-c-verrou{display:none}
/* Verrouillé : carte ternie, bouton gris avec un cadenas */
.pa-c.verrou{cursor:not-allowed;border-color:rgba(255,255,255,.14) !important}
.pa-c.verrou:hover{transform:none}
.pa-c.verrou .pa-c-titre,.pa-c.verrou .pa-c-meta,.pa-c.verrou .pa-c-sujets{opacity:.5;filter:saturate(.3)}
.pa-c.verrou .pa-c-btn{display:none}
.pa-c.verrou .pa-c-verrou{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:999px;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#93a8c6;font-size:14px;font-weight:600}
.pa-c.verrou .pa-c-verrou svg{flex:none;transform-origin:50% 30%}
@keyframes paSecoue{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}}
.pa-c.verrou:hover .pa-c-verrou svg,.pa-c.verrou.secoue .pa-c-verrou svg{animation:paSecoue .55s ease}
.pa-c.verrou.secoue .pa-c-verrou{border-color:rgba(198,255,51,.6);color:#e6f1ff}
@media (prefers-reduced-motion:reduce){.pa-c-sujets span{opacity:1;transform:none;transition:none}.pa-c-prog i::after{transition:none}.pa-c.verrou .pa-c-verrou svg{animation:none !important}}
@media (max-width:820px){.pa-c-titre{font-size:22px}}