/* La Clique — accueil (look de la maquette « La Clique — style pro »). */
body{margin:0;background:#02050c}
a{color:#00ffff}a:hover{color:#9ffcff}
.cut{clip-path:polygon(0 0,82% 0,100% 12%,100% 94%,95% 100%,5% 100%,0 94%)}
.cutsm{clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
.nav a{color:#c8d6ea;text-decoration:none;transition:color .2s,text-shadow .2s}.nav a:hover{color:#ffffff;text-shadow:0 0 12px rgba(0,255,255,.8)}
/* Éclairs et lueurs du ciel */
@keyframes flashA{0%,57%,100%{opacity:0}58%{opacity:.95}59%{opacity:.15}60.5%{opacity:1}63.5%{opacity:0}}
@keyframes flashSky{0%,57%,100%{opacity:0}58%{opacity:.7}59%{opacity:.1}60.5%{opacity:.85}66%{opacity:0}}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,18px)}}
.bolt{position:absolute;pointer-events:none;opacity:0;overflow:visible;filter:drop-shadow(0 0 4px #bff6ff) drop-shadow(0 0 16px #00ffff)}
.boltA{animation:flashA 7s linear infinite}
.boltB{animation:flashA 11s linear 3.5s infinite}
.skyA{animation:flashSky 7s linear infinite}
.skyB{animation:flashSky 11s linear 3.5s infinite}
/* Étoiles : des éclats irréguliers qui flashent, pas des ronds */
@keyframes glint{0%{opacity:0;scale:.3}6%{opacity:1;scale:1.15}11%{opacity:.35;scale:.8}17%{opacity:.95;scale:1}28%,100%{opacity:0;scale:.35}}
.spark{position:absolute;width:0;height:0;pointer-events:none;box-shadow:0 0 2px 1px rgba(255,255,255,.95),0 0 9px 3px rgba(0,255,255,.55);animation:glint 4.2s ease-in-out infinite}
.spark::before,.spark::after{content:"";position:absolute;left:0;top:0;transform:translate(-50%,-50%);border-radius:50%}
.spark::before{width:18px;height:1.3px;background:linear-gradient(90deg,transparent,rgba(225,250,255,.95) 45%,rgba(225,250,255,.95) 55%,transparent)}
.spark::after{width:1.2px;height:11px;background:linear-gradient(transparent,rgba(225,250,255,.9) 45%,rgba(225,250,255,.9) 55%,transparent)}
.spark.big::before{width:30px}.spark.big::after{height:18px}
.spark.small::before{width:10px}.spark.small::after{height:6px}
.spark.pk{box-shadow:0 0 2px 1px rgba(255,255,255,.95),0 0 10px 3px rgba(255,0,255,.7)}.spark.pk::before,.spark.pk::after{filter:drop-shadow(0 0 3px #ff00ff)}
.spark.gr{box-shadow:0 0 2px 1px rgba(255,255,255,.95),0 0 10px 3px rgba(57,255,20,.65)}.spark.gr::before,.spark.gr::after{filter:drop-shadow(0 0 3px #39ff14)}
.spark.t2{animation-duration:3.1s}.spark.t3{animation-duration:5.6s}.spark.t4{animation-duration:2.6s}
.glow-drift{animation:drift 14s ease-in-out infinite}
/* Logo : le petit éclair du bouclier s'allume avec l'orage */
@keyframes zap{0%,57%,100%{filter:none}58%,61%{filter:drop-shadow(0 0 6px #00ffff) brightness(1.6)}}
.zap{animation:zap 7s linear infinite}
.brand:hover svg{filter:drop-shadow(0 0 8px rgba(0,255,255,.9))}
/* Boutons */
@keyframes sheen{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.btn-glow{transition:transform .2s ease,box-shadow .25s ease}
.btn-glow:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(0,255,255,.55),0 10px 34px rgba(0,255,255,.45)}
.btn-glow:active{transform:translateY(0) scale(.98)}
.btn-glow svg{transition:transform .2s ease}.btn-glow:hover svg{transform:translateX(4px)}
.sheen{background-size:200% 100% !important;animation:sheen 6s linear infinite}
/* Cartes et blocs */
.lift{transition:transform .3s cubic-bezier(.2,.8,.2,1),filter .3s}
.lift:hover{transform:translateY(-6px);filter:brightness(1.18) saturate(1.25)}
.lift2{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.lift2:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(0,255,255,.5),0 30px 90px rgba(0,255,255,.22) !important}
.cell{transition:background .25s}.cell:hover{background:#0b1a33 !important}
.cell span:nth-child(2){transition:color .25s}.cell:hover span:nth-child(2){color:#00ffff}
/* Panneau de mission qui flotte */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes grow{0%{width:30%}100%{width:74%}}
@keyframes pulseBorder{0%,100%{border-color:rgba(198,255,51,.35)}50%{border-color:#c6ff33;box-shadow:0 0 14px rgba(198,255,51,.35)}}
.float{animation:float 6s ease-in-out infinite}
.grow{animation:grow 3.8s ease-in-out infinite alternate}
.trying{animation:pulseBorder 1.4s ease-in-out infinite}
/* Lueur qui suit la souris */
.spot{position:absolute;inset:0;pointer-events:none;background:radial-gradient(340px circle at var(--mx,72%) var(--my,28%),rgba(0,255,255,.18),transparent 62%);mix-blend-mode:screen;transition:background .08s}
.neon{text-shadow:0 0 18px rgba(0,255,255,.55),0 0 42px rgba(131,56,236,.35)}
/* Bouton « Commencer L'Alphabet » : touche de blanc sur le contour et les lettres */
.edge{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.62),0 0 16px rgba(255,255,255,.14);-webkit-text-stroke:.6px rgba(255,255,255,.55);paint-order:stroke fill}
.edge.btn-glow:hover{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85),0 0 0 1px rgba(0,255,255,.55),0 10px 34px rgba(0,255,255,.45)}
/* Timbre « 100 % québécois » qui vient se coller */
@keyframes stamp{0%{opacity:0;transform:translate(-40px,-60px) scale(2.3) rotate(-22deg)}55%{opacity:1;transform:translate(0,0) scale(.9) rotate(-5deg)}72%{transform:scale(1.05) rotate(-7deg)}86%{transform:scale(.98) rotate(-6deg)}100%{opacity:1;transform:scale(1) rotate(-6deg)}}
@keyframes ring{0%,54%{opacity:0;transform:translate(-50%,-50%) scale(.6)}60%{opacity:.75}100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}
.qc-stamp{transform-origin:60% 60%;animation:stamp 1.15s cubic-bezier(.3,.7,.3,1) 1.3s both;transition:transform .3s ease}
.qc-stamp:hover{transform:scale(1.06) rotate(-3deg) !important}
.qc-ring{position:absolute;left:50%;top:50%;width:120%;height:150%;border-radius:50%;border:2px solid rgba(0,255,255,.55);box-shadow:0 0 24px rgba(0,255,255,.4);pointer-events:none;animation:ring 1.15s ease-out 1.3s both}
@media (max-width:820px){.qc-stamp{width:104px !important;right:16px !important;bottom:18px !important}.hero-grid{padding-bottom:110px !important}}
/* Transition vers la connexion */
.page > *:not(.auth){transition:transform .75s cubic-bezier(.77,0,.18,1),filter .75s ease}
.page-open > *:not(.auth){transform:scale(.96);filter:blur(4px) brightness(.5)}
.auth{position:fixed;inset:0;z-index:50;overflow-y:auto;background:#02040a;color:#e6f1ff;clip-path:circle(0px at var(--ox,92%) var(--oy,42px));visibility:hidden;transition:clip-path .8s cubic-bezier(.77,0,.18,1),visibility 0s linear .8s}
.auth.open{clip-path:circle(150vmax at var(--ox,92%) var(--oy,42px));visibility:visible;transition:clip-path .8s cubic-bezier(.77,0,.18,1),visibility 0s}
.auth .stg{opacity:0;transform:translateY(18px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.auth.open .stg{opacity:1;transform:none}
.auth.open .d1{transition-delay:.32s}.auth.open .d2{transition-delay:.40s}.auth.open .d3{transition-delay:.48s}.auth.open .d4{transition-delay:.54s}.auth.open .d5{transition-delay:.60s}.auth.open .d6{transition-delay:.70s}
.auth .beam{opacity:0;transform:translateX(-25%) rotate(-24deg);transition:opacity 1.2s ease .2s,transform 1.4s cubic-bezier(.2,.8,.2,1) .2s}
.auth.open .beam{opacity:1;transform:rotate(-24deg)}
.auth .beam2{opacity:0;transition:opacity 1.2s ease .4s}.auth.open .beam2{opacity:1}
.glass-btn,.glass-field{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);transition:border-color .25s,background .25s,box-shadow .25s}
.glass-btn:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.07)}
.glass-field:focus-within{border-color:#00ffff;box-shadow:0 0 0 3px rgba(0,255,255,.18)}
.glass-field input::placeholder{color:#7d8fab}
.login-btn{background:linear-gradient(90deg,#0034ff 0%,#bfe6ff 52%,#00ffff 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 10px 30px rgba(0,52,255,.35);transition:transform .2s ease,box-shadow .25s ease,filter .25s}
.login-btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 14px 40px rgba(25,200,255,.45)}
.login-btn:active{transform:scale(.98)}
/* Bascule connexion <-> inscription */
.view{transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1),visibility 0s}
.view.off-left,.view.off-right{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,transform .5s ease,visibility 0s linear .5s}
.view.off-left{transform:translateX(-56px)}.view.off-right{transform:translateX(56px)}
.link-btn{font:inherit;color:#e6f1ff;background:none;border:0;padding:10px 4px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.link-btn:hover{color:#00ffff}
.seg{height:5px;border-radius:5px;background:rgba(255,255,255,.12);transition:background .3s ease,box-shadow .3s ease}
.seg.s1{background:#ff0080;box-shadow:0 0 10px rgba(255,0,128,.5)}.seg.s2{background:#c6ff33;box-shadow:0 0 10px rgba(198,255,51,.45)}
.seg.s3{background:#00ffff;box-shadow:0 0 10px rgba(0,255,255,.5)}.seg.s4{background:#39ff14;box-shadow:0 0 12px rgba(57,255,20,.55)}
.pw0{color:#93a8c6}.pw1{color:#ff5aa8}.pw2{color:#d9ff7a}.pw3{color:#00ffff}.pw4{color:#39ff14}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}
@media (max-width:820px){.nav{display:none !important}.hero-grid{grid-template-columns:minmax(0,1fr) !important;padding-top:92px !important;padding-bottom:64px !important}.hide-sm{display:none !important}}

/* Ajouts pour le vrai site */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.auth-msg{margin:0;min-height:0;font-size:14px;line-height:1.45;color:#c8d6ea;text-align:center}
.auth-msg:empty{display:none}
.auth-msg.ok{color:#39ff14}.auth-msg.err{color:#ff5aa8}
.login-btn[disabled]{opacity:.6;cursor:wait}
:focus-visible{outline:2px solid #00ffff;outline-offset:3px}
/* Onglets en haut de la fenêtre : on voit tout de suite « Se connecter » ET « Créer un compte » */
.auth-tabs{display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14)}
.auth-tabs button{font:inherit;font-size:14px;font-weight:600;color:#c8d6ea;background:none;border:0;border-radius:999px;padding:0 14px;min-height:38px;cursor:pointer;white-space:nowrap;transition:background .25s,color .25s}
.auth-tabs button:hover{color:#fff}
.auth-tabs button.on{background:linear-gradient(90deg,#0034ff,#00ffff);color:#04122a}
@media (max-width:360px){.auth-tabs button{padding:0 10px;font-size:13px}}
/* Écrans pas très hauts (portables) : on enlève le sous-titre pour que tout entre sans défiler */
@media (max-height:740px){#auth .view > .stg.d2 > p{display:none}#auth .view{gap:10px !important}}

/* Clic vivant (js/clic-accueil.js) : en bas à gauche, il respire, saute quand on clique et parle dans une bulle */
.clic-live{position:fixed;left:14px;bottom:10px;z-index:40;font-family:'Space Grotesk',system-ui,'Segoe UI',sans-serif;display:flex;align-items:flex-end;pointer-events:none;transition:opacity .4s ease,visibility .4s}
.clic-live.cache{opacity:0;visibility:hidden}
@keyframes clicRespire{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.02)}}
@keyframes clicHop{0%{transform:translateY(0)}35%{transform:translateY(-24px) rotate(-7deg)}68%{transform:translateY(0) scale(1.07,.93)}100%{transform:none}}
.clic-perso{pointer-events:auto;position:relative;width:96px;height:100px;padding:0;border:0;background:none;cursor:pointer;transform-origin:50% 100%;animation:clicRespire 4s ease-in-out infinite;filter:drop-shadow(0 6px 14px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(0,255,255,.35));transition:filter .25s}
.clic-perso:hover{filter:drop-shadow(0 6px 14px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(0,255,255,.75))}
.clic-perso.hop{animation:clicHop .6s cubic-bezier(.3,1.5,.5,1)}
.clic-perso img{display:block;width:100%;height:100%;object-fit:contain;transform:rotate(var(--tilt,0deg));transition:transform .5s ease}
.clic-perso::after{content:"";position:absolute;left:16%;right:16%;bottom:-5px;height:12px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,255,255,.5),transparent);z-index:-1}
.clic-perso:focus-visible{outline:2px solid #00ffff;outline-offset:4px;border-radius:14px}
.clic-bulle{pointer-events:auto;position:absolute;left:104px;bottom:44px;width:min(310px,calc(100vw - 134px));box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:10px 34px 10px 10px;background:rgba(6,14,30,.94);border:1px solid rgba(0,255,255,.45);border-radius:18px 18px 18px 4px;box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 22px rgba(0,255,255,.18);backdrop-filter:blur(8px);color:#e6f1ff;font:inherit;font-size:15px;line-height:1.4}
.clic-bulle[hidden]{display:none}
@keyframes clicPop{from{opacity:0;transform:translate(-8px,8px) scale(.9)}to{opacity:1;transform:none}}
.clic-bulle.pop{animation:clicPop .35s cubic-bezier(.2,1.4,.4,1)}
.clic-bulle p{margin:0}
.clic-faces{flex:none;display:flex}
.clic-faces img{width:54px;height:54px;border-radius:50%;object-fit:cover;border:2px solid rgba(0,255,255,.5);box-shadow:0 0 12px rgba(0,255,255,.3)}
.clic-faces img[hidden]{display:none}
.clic-x{position:absolute;top:4px;right:4px;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:rgba(255,255,255,.65);font-size:18px;line-height:1;cursor:pointer}
.clic-x:hover{color:#fff;background:rgba(255,255,255,.08)}
@media (max-width:640px){.clic-live{left:8px;bottom:6px}.clic-perso{width:66px;height:70px}.clic-bulle{left:72px;bottom:30px;width:min(280px,calc(100vw - 92px));font-size:14px;gap:10px}.clic-faces img{width:44px;height:44px}}
@media (prefers-reduced-motion:reduce){.clic-perso,.clic-perso.hop,.clic-bulle.pop{animation:none !important}}

/* L'accueil = un seul écran « wow » : pas de défilement. Le reste s'ouvre dans des écrans par-dessus. */
html.accueil,html.accueil body{height:100%;overflow:hidden;overscroll-behavior:none}
#haut{height:100vh;height:100dvh;display:flex;flex-direction:column;justify-content:center}
#haut .hero-grid{width:100%;box-sizing:border-box;padding-top:96px !important;padding-bottom:96px !important}
#haut h1{font-size:clamp(2.3rem,min(5.4vw,9.5vh),4.6rem) !important}
@media (max-height:760px) and (min-width:821px){#haut .hero-grid{padding-top:84px !important;padding-bottom:70px !important;gap:40px !important}#haut .hero-grid > div:first-child{gap:16px !important}}
.btn-menu{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,0.3);background:rgba(2,5,12,0.25);backdrop-filter:blur(6px);color:#e6f1ff;cursor:pointer}
.btn-menu:hover{border-color:#00ffff}
.btn-menu:focus-visible{outline:2px solid #00ffff;outline-offset:2px}
@media (max-width:820px){
  .btn-menu{display:inline-flex}
  /* Cellulaire : le texte en haut, puis une rangée du bas réservée à Clic (à gauche) et au timbre (à droite) */
  #haut{justify-content:flex-start}
  #haut .hero-grid{padding-top:max(84px,11vh) !important;padding-bottom:0 !important}
  #haut .hero-grid > div:first-child{gap:clamp(12px,2.2vh,22px) !important}
  #haut h1{font-size:clamp(2.1rem,min(10.5vw,6.4vh),3.4rem) !important}
  #haut .hero-grid p:not(:first-child){font-size:clamp(15px,2.3vh,18px) !important}
  #haut .hero-grid a{min-height:48px !important}
}

.ecrans{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;color:#e6f1ff;font-family:'Space Grotesk',system-ui,sans-serif;
  background:radial-gradient(60% 40% at 85% 0%,rgba(0,255,255,.10),transparent 70%),radial-gradient(50% 40% at 0% 100%,rgba(131,56,236,.12),transparent 70%),#02050c;
  opacity:0;visibility:hidden;transform:translateY(28px) scale(.985);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s linear .45s}
.ecrans.open{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s}
.ecrans-barre{flex:none;display:flex;align-items:center;gap:10px;padding:12px max(16px,calc((100vw - 1240px)/2 + 24px));border-bottom:1px solid rgba(0,255,255,.14);background:rgba(2,5,12,.8);backdrop-filter:blur(10px)}
.ecrans-retour{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:transparent;color:#e6f1ff;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.ecrans-retour:hover{border-color:#00ffff;box-shadow:0 0 14px rgba(0,255,255,.35)}
.ecrans-onglets{flex:1;min-width:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.ecrans-onglets::-webkit-scrollbar{display:none}
.ecrans-onglets a{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 15px;border-radius:999px;color:#c8d6ea;text-decoration:none;font-size:15px;white-space:nowrap;transition:background .25s,color .25s}
.ecrans-onglets a:hover{color:#fff}
.ecrans-onglets a.on{background:linear-gradient(90deg,#0034ff,#00ffff);color:#04122a;font-weight:600}
.ecrans-onglets a:last-child{margin-right:28px}
.ecrans-corps{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.ecrans-corps > section{display:none;padding-top:44px !important;padding-bottom:130px !important}
.ecrans-corps > section.on{display:block;animation:ecranEntre .45s cubic-bezier(.2,.8,.2,1)}
@keyframes ecranEntre{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ecrans .btn-menu{display:none}
@media (max-width:820px){.ecrans-barre{padding:10px 12px}.ecrans-onglets a{font-size:14px;padding:0 13px}.ecrans-corps > section{padding-top:28px !important}}
@media (prefers-reduced-motion:reduce){.ecrans,.ecrans.open{transition:none}.ecrans-corps > section.on{animation:none}}
/* Cellulaire : Clic prend la place qu'il y a (plus grand sur les grands écrans), sans jamais toucher au texte */
@media (max-width:640px){
  .clic-live{--cw:clamp(66px,12.5vh,112px)}
  .clic-perso{width:var(--cw) !important;height:calc(var(--cw) * 1.05) !important}
  .clic-bulle{left:calc(var(--cw) + 6px) !important;bottom:calc(var(--cw) * .42) !important;width:min(280px,calc(100vw - var(--cw) - 24px)) !important}
}
.brand span{white-space:nowrap}
@media (max-width:420px){
  header .brand span{letter-spacing:.16em !important;font-size:14px !important}
  header > div{gap:8px !important;padding-left:16px !important;padding-right:16px !important}
  header > div > div{gap:8px !important}
  #btnConnexion{padding:0 14px !important;font-size:14px !important}
}
/* Dans les écrans « en savoir plus », Clic monte dans la barre du haut (à droite) : il reste là, sans cacher le texte */
.ecrans-barre{padding-right:max(80px,calc((100vw - 1240px)/2 + 24px)) !important}
html.ecran-ouvert .clic-live{left:auto;right:12px;bottom:auto;top:4px}
html.ecran-ouvert .clic-perso{width:56px !important;height:58px !important}
html.ecran-ouvert .clic-perso::after{display:none}
html.ecran-ouvert .clic-bulle{left:auto !important;right:4px !important;bottom:auto !important;top:66px !important;width:min(310px,calc(100vw - 32px)) !important;border-radius:18px 4px 18px 18px}

/* La bulle de Clic sur l'accueil : pas de petite photo dedans (on voit déjà Clic à côté) */
.clic-bulle{padding:12px 36px 12px 16px !important}
.clic-perso img[hidden]{display:none !important}

/* Écran « La méthode » (approuvé par Gabriel le 13 oct.) : un seul Clic, grand, et sa bulle façon bande dessinée.
   - Le deuxième Clic dans la photo est enlevé.
   - Ordi : Clic en haut à droite, juste sous la barre ; la bulle est à gauche de sa tête, la pointe s'arrête à côté de lui
     (elle ne passe jamais par-dessus l'image de Clic). La bulle n'est jamais en dessous de lui.
   - Cellulaire : Clic dans le coin vide en haut à droite de la photo ; sa bulle ne cache que « Voir les parcours ».
   Règle de Gabriel : si Clic ou sa bulle cache quelque chose, c'est une seule chose, et pas importante. */
.me-clic{display:none !important}
/* Le Clic décoratif de la bannière « Commence par le premier défi » est enlevé partout (14 oct.) : un seul Clic par écran. */
.me-cta-in img{display:none !important}
html.ecran-ouvert:has(#methode.on) .clic-live{top:62px;right:16px;--cw:200px}
html.ecran-ouvert:has(#methode.on) .clic-perso{width:var(--cw) !important;height:calc(var(--cw) * 1.04) !important}
html.ecran-ouvert:has(#methode.on) .clic-bulle{
  left:auto !important;top:auto !important;
  right:calc(var(--cw) * .9) !important;bottom:calc(100% - var(--cw) * .3) !important;
  width:max-content !important;max-width:min(330px,calc(100vw - var(--cw) * .9 - 40px)) !important;
  padding:16px 40px 16px 22px !important;border-radius:36px !important;border-color:rgba(0,255,255,.65) !important}
html.ecran-ouvert:has(#methode.on) .clic-bulle::before{
  content:"";position:absolute;top:calc(100% - 2px);right:8px;width:calc(var(--cw) * .17);height:calc(var(--cw) * .17);pointer-events:none;
  background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' preserveAspectRatio='none'%3E%3Cpath d='M4 0 Q20 30 58 58 Q30 22 30 0 Z' fill='%23060e1e'/%3E%3Cpath d='M4 0 Q20 30 58 58 Q30 22 30 0' fill='none' stroke='%2300ffff' stroke-opacity='.65' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
@keyframes clicPopBD{from{opacity:0;transform:translate(8px,8px) scale(.9)}to{opacity:1;transform:none}}
html.ecran-ouvert:has(#methode.on) .clic-bulle.pop{animation:clicPopBD .35s cubic-bezier(.2,1.4,.4,1);transform-origin:90% 100%}
@media (max-width:640px){
  html.ecran-ouvert:has(#methode.on) .clic-live{top:470px;right:6px;--cw:clamp(100px,31vw,124px)}
  html.ecran-ouvert:has(#methode.on) .clic-bulle{font-size:14px !important;padding:12px 34px 12px 16px !important;border-radius:28px !important;bottom:calc(100% - var(--cw) * .1) !important}
}
@media (prefers-reduced-motion:reduce){html.ecran-ouvert:has(#methode.on) .clic-bulle.pop{animation:none !important}}

/* Accueil sur ordi (approuvé par Gabriel le 13 oct.) : Clic plus gros en bas à gauche, sous les boutons,
   avec sa bulle de BD à droite de sa tête ; le texte du haut monte un peu pour lui laisser de la place.
   Sa bulle reste affichée sur l'accueil (js/clic-accueil.js). Le cellulaire ne change pas. */
@media (min-width:821px){
  /* (15 oct.) La place pour Clic sous les boutons est gardée seulement quand Clic est là (connecté) ; sinon le texte reste centré. */
  html.connecte:not(.ecran-ouvert) #haut .hero-grid{padding-top:96px !important;padding-bottom:210px !important}
  html:not(.ecran-ouvert) .clic-live{left:max(24px,calc((100vw - 1240px)/2 + 10px));bottom:14px;--cw:170px}
  html:not(.ecran-ouvert) .clic-perso{width:var(--cw) !important;height:calc(var(--cw) * 1.04) !important}
  html:not(.ecran-ouvert) .clic-bulle{
    left:calc(var(--cw) * .9) !important;bottom:calc(var(--cw) * .66) !important;
    width:max-content !important;max-width:360px !important;
    padding:16px 40px 16px 22px !important;border-radius:36px !important;border-color:rgba(0,255,255,.65) !important;font-size:16px}
  html:not(.ecran-ouvert) .clic-bulle::before{
    content:"";position:absolute;top:calc(100% - 2px);left:10px;width:calc(var(--cw) * .17);height:calc(var(--cw) * .17);pointer-events:none;transform:scaleX(-1);
    background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' preserveAspectRatio='none'%3E%3Cpath d='M4 0 Q20 30 58 58 Q30 22 30 0 Z' fill='%23060e1e'/%3E%3Cpath d='M4 0 Q20 30 58 58 Q30 22 30 0' fill='none' stroke='%2300ffff' stroke-opacity='.65' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
}
@media (min-width:821px) and (max-height:760px){
  html:not(.ecran-ouvert) .clic-live{--cw:136px;bottom:8px}
  html:not(.ecran-ouvert) .clic-bulle{font-size:15px;padding:12px 36px 12px 18px !important}
}

/* Cellulaire, accueil (13 oct., demandé par Gabriel) : la bulle de Clic monte un peu pour ne plus cacher le timbre « 100 % québécois ».
   Elle arrive juste au-dessus du timbre. */
@media (max-width:640px){
  html:not(.ecran-ouvert) .clic-bulle{bottom:calc(var(--cw) * .42 + 56px) !important}
}

/* ESSAI — écran « Les parcours » : Clic en grand à droite du titre (ordi), à côté de « La base » (cellulaire).
   Bulle façon BD AU-DESSUS de sa tête (dessin de Gabriel) : la pointe descend vers le haut de sa tête sans toucher l'image. */
html.ecran-ouvert:has(#parcours.on) .clic-live{top:196px;right:max(16px,calc((100vw - 1240px) / 2 - 20px));--cw:200px}
html.ecran-ouvert:has(#parcours.on) .clic-perso{width:var(--cw) !important;height:calc(var(--cw) * 1.04) !important}
html.ecran-ouvert:has(#parcours.on) .clic-bulle{
  left:auto !important;top:auto !important;
  right:calc(var(--cw) * .42) !important;bottom:calc(100% + 26px) !important;
  width:max-content !important;max-width:min(340px,calc(100vw - var(--cw) * .42 - 40px)) !important;
  padding:16px 40px 16px 22px !important;border-radius:36px !important;border-color:rgba(0,255,255,.65) !important}
html.ecran-ouvert:has(#parcours.on) .clic-bulle::before{
  content:"";position:absolute;top:calc(100% - 2px);right:22px;width:30px;height:24px;pointer-events:none;
  background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' preserveAspectRatio='none'%3E%3Cpath d='M6 0 Q22 26 40 58 Q36 24 48 0 Z' fill='%23060e1e'/%3E%3Cpath d='M6 0 Q22 26 40 58 Q36 24 48 0' fill='none' stroke='%2300ffff' stroke-opacity='.65' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
html.ecran-ouvert:has(#parcours.on) .clic-bulle.pop{animation:clicPopBD .35s cubic-bezier(.2,1.4,.4,1);transform-origin:85% 100%}
@media (max-width:640px){
  html.ecran-ouvert:has(#parcours.on) .clic-live{top:calc(var(--base-top,346px) + 60px);right:12px;--cw:100px}
  html.ecran-ouvert:has(#parcours.on) .clic-bulle{font-size:14px !important;padding:12px 34px 12px 16px !important;border-radius:28px !important}
}
@media (max-width:370px){html.ecran-ouvert:has(#parcours.on) .clic-live{--base-top:360px}}

/* Écrans « La méthode » et « Les parcours », ordi ET cell (14 oct.) : Clic est placé DANS la section (voir clic-accueil.js)
   pour glisser avec la page sans saccade, tout en continuant de flotter. Il garde la même position qu'avant à l'arrivée :
   - en haut : la section commence sous la barre d'onglets (69 px sur ordi, 65 px sur cell), d'où le décalage ;
   - à droite : sur grand écran, la section est centrée (1240 px max), on compense la marge de chaque côté. */
.ec > .clic-live.dans-ecran{position:absolute;margin-top:-69px;margin-right:calc(-1 * max(0px, (100vw - 1288px) / 2))}
@media (max-width:640px){.ec > .clic-live.dans-ecran{margin-top:-65px;margin-right:0}}

/* Écran « L'ordinateur virtuel » (approuvé par Gabriel le 14 oct.) : un seul Clic, grand.
   - Le Clic décoratif (.or-clic) et le petit Clic du haut sont remplacés par le vrai Clic, placé dans le coin
     en bas à droite du faux ordinateur (voir clic-accueil.js, classe dans-ordi) : il glisse avec la page, sans saccade.
   - Ordi : bulle façon BD AU-DESSUS de sa tête, comme sur « Les parcours ».
   - Cell : bulle à côté de sa tête (à gauche), elle ne cache que la barre des tâches du faux ordinateur. */
.or-clic{display:none !important}
.or-ecran > .clic-live.dans-ordi{position:absolute;top:auto;left:auto;right:-22px;bottom:-46px;--cw:180px;z-index:5}
.clic-live.dans-ordi .clic-perso{width:var(--cw) !important;height:calc(var(--cw) * 1.04) !important}
.clic-live.dans-ordi .clic-bulle{
  left:auto !important;top:auto !important;
  right:calc(var(--cw) * .42) !important;bottom:calc(100% + 26px) !important;
  width:max-content !important;max-width:min(320px,calc(100vw - var(--cw) * .42 - 40px)) !important;
  padding:16px 40px 16px 22px !important;border-radius:36px !important;border-color:rgba(0,255,255,.65) !important}
.clic-live.dans-ordi .clic-bulle::before{
  content:"";position:absolute;top:calc(100% - 2px);right:22px;width:30px;height:24px;pointer-events:none;
  background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' preserveAspectRatio='none'%3E%3Cpath d='M6 0 Q22 26 40 58 Q36 24 48 0 Z' fill='%23060e1e'/%3E%3Cpath d='M6 0 Q22 26 40 58 Q36 24 48 0' fill='none' stroke='%2300ffff' stroke-opacity='.65' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
.clic-live.dans-ordi .clic-bulle.pop{animation:clicPopBD .35s cubic-bezier(.2,1.4,.4,1);transform-origin:85% 100%}
@media (max-width:640px){
  .or-ecran > .clic-live.dans-ordi{right:-6px;bottom:-34px;--cw:100px}
  .clic-live.dans-ordi .clic-bulle{right:calc(var(--cw) * .82) !important;bottom:calc(var(--cw) * .5) !important;
    max-width:min(230px,calc(100vw - var(--cw) * .82 - 40px)) !important;font-size:14px !important;padding:12px 34px 12px 16px !important;border-radius:28px !important}
  .clic-live.dans-ordi .clic-bulle::before{top:auto;bottom:10px;right:-20px;width:24px;height:22px;
    background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q30 30 60 46 Q28 40 0 40 Z' fill='%23060e1e'/%3E%3Cpath d='M0 8 Q30 30 60 46 Q28 40 0 40' fill='none' stroke='%2300ffff' stroke-opacity='.65' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
  .clic-live.dans-ordi .clic-bulle.pop{transform-origin:100% 80%}
}

/* Écran « Clic » (approuvé par Gabriel le 14 oct.) : le grand Clic de l'écran reste ; le petit Clic de la barre est caché. Un seul Clic. */
html.ecran-ouvert:has(#clic.on) .clic-live{display:none !important}

/* Écran « Contact » (approuvé par Gabriel le 14 oct.) : un seul Clic, grand, comme sur « L'ordinateur virtuel ».
   - Le Clic décoratif (.co-clic) et le petit Clic du haut sont remplacés par le vrai Clic, placé dans l'espace prévu
     sous le formulaire, à droite (classe dans-contact, voir clic-accueil.js) : il glisse avec la page.
   - Sa bulle est à côté de sa tête (à gauche), dans l'espace vide sous le formulaire : elle ne cache rien d'important. */
.co-clic{display:none !important}
.co-droite > .clic-live.dans-contact{position:absolute;top:auto;left:auto;right:clamp(0px,2vw,30px);bottom:34px;--cw:160px;z-index:5}
.clic-live.dans-contact .clic-perso{width:var(--cw) !important;height:calc(var(--cw) * 1.04) !important}
.clic-live.dans-contact .clic-bulle{
  left:auto !important;top:auto !important;
  right:calc(var(--cw) * .86) !important;bottom:calc(var(--cw) * .42) !important;
  width:max-content !important;max-width:min(300px,calc(100vw - var(--cw) * .86 - 40px)) !important;
  padding:16px 40px 16px 22px !important;border-radius:36px !important;border-color:rgba(0,255,255,.65) !important}
.clic-live.dans-contact .clic-bulle::before{content:"";position:absolute;top:auto;bottom:14px;right:-22px;width:26px;height:22px;pointer-events:none;
  background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q30 30 60 46 Q28 40 0 40 Z' fill='%23060e1e'/%3E%3Cpath d='M0 8 Q30 30 60 46 Q28 40 0 40' fill='none' stroke='%2300ffff' stroke-opacity='.65' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
.clic-live.dans-contact .clic-bulle.pop{animation:clicPopBD .35s cubic-bezier(.2,1.4,.4,1);transform-origin:100% 80%}
@media (max-width:640px){
  .co-droite > .clic-live.dans-contact{right:10px;bottom:6px;--cw:110px}
  .clic-live.dans-contact .clic-bulle{right:calc(var(--cw) * .84) !important;bottom:calc(var(--cw) * .4) !important;max-width:min(230px,calc(100vw - var(--cw) * .84 - 40px)) !important;
    font-size:14px !important;padding:12px 34px 12px 16px !important;border-radius:28px !important}
}

/* Règle de Gabriel (15 oct.) : Clic n'est pas là avant la connexion, ni sur l'accueil ni dans les écrans « en savoir plus ».
   Il apparaît et se présente une fois la personne connectée (classe « connecte » sur <html>, voir js/clic-accueil.js). */
html:not(.connecte) .clic-live{display:none !important}

/* L'accueil prend la hauteur vraiment visible (15 oct.) : sur le cellulaire de Gabriel, 100dvh dépassait sous l'écran
   et le bas de l'accueil (Clic, le timbre) était coupé. On prend la plus petite hauteur : celle mesurée par
   js/accueil.js (--haut-h) ou la petite hauteur d'écran (100svh, barres du navigateur affichées). */
#haut{height:min(100svh,var(--haut-h,100svh))}
html.accueil,html.accueil body{height:min(100svh,var(--haut-h,100svh))}
.qc-stamp{margin-bottom:env(safe-area-inset-bottom,0px)}

/* Accueil sur cellulaire, une fois connecté (15 oct., demandé par Gabriel) : Clic est placé à droite, juste sous
   « Voir les parcours » (classe dans-accueil, voir clic-accueil.js), au lieu d'être collé au bas de l'écran.
   Sa bulle est à côté de sa tête (à gauche), dans l'espace vide sous les boutons : elle ne cache rien.
   Elle part du haut de Clic et s'allonge vers le bas, donc elle ne remonte jamais sur les boutons.
   La pointe s'arrête au bord de Clic, sous sa main levée : elle ne passe jamais par-dessus son image.
   Sa taille suit la hauteur de l'écran pour qu'il ne touche jamais au timbre « 100 % québécois ». */
#haut div:has(> .clic-live.dans-accueil){position:relative}
#haut .clic-live.dans-accueil{position:absolute;left:auto;right:-6px;top:calc(100% + 12px);bottom:auto;--cw:clamp(84px,min(28vw,15vh),124px);z-index:5}
.clic-live.dans-accueil .clic-perso{width:var(--cw) !important;height:calc(var(--cw) * 1.04) !important}
.clic-live.dans-accueil .clic-bulle{
  left:auto !important;bottom:auto !important;
  right:calc(var(--cw) + 14px) !important;top:calc(var(--cw) * .06) !important;
  width:max-content !important;max-width:min(260px,calc(100vw - var(--cw) - 48px)) !important;
  font-size:14px !important;padding:12px 34px 12px 16px !important;border-radius:28px !important;border-color:rgba(0,255,255,.65) !important}
.clic-live.dans-accueil .clic-bulle::before{content:"";position:absolute;top:calc(var(--cw) * .44);bottom:auto;right:-21px;width:22px;height:20px;pointer-events:none;
  background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q30 30 60 46 Q28 40 0 40 Z' fill='%23060e1e'/%3E%3Cpath d='M0 8 Q30 30 60 46 Q28 40 0 40' fill='none' stroke='%2300ffff' stroke-opacity='.65' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
.clic-live.dans-accueil .clic-bulle.pop{animation:clicPopBD .35s cubic-bezier(.2,1.4,.4,1);transform-origin:100% 50%}
@media (prefers-reduced-motion:reduce){.clic-live.dans-accueil .clic-bulle.pop{animation:none !important}}

/* Message « section réservée » en haut de la fenêtre de connexion (15 oct., demandé par Gabriel, voir js/accueil.js) */
.auth-acces{margin:0;display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:14px;border:1px solid rgba(0,255,255,.45);background:rgba(0,255,255,.08);box-shadow:0 0 18px rgba(0,255,255,.12);color:#e6f1ff;font-size:15px;line-height:1.45}
.auth-acces b{color:#fff}
.auth-acces[hidden]{display:none}

/* Ligne « Crée ton compte gratuit (ou connecte-toi) pour… » en haut de la fenêtre de connexion,
   quand on veut entrer dans une section réservée (15 oct., demandé par Gabriel, voir js/accueil.js) */
.auth-acces{margin:0;padding:12px 16px;border-radius:14px;border:1px solid rgba(0,255,255,.45);background:rgba(0,255,255,.08);box-shadow:0 0 18px rgba(0,255,255,.12);color:#e6f1ff;font-size:15px;line-height:1.45;text-align:center}
.auth-acces[hidden]{display:none}

/* Fenêtre de connexion (15 oct., demandé par Gabriel) : on voit clairement si la connexion a marché ou non.
   Le bouton tourne et dit « Connexion… » pendant l'attente ; le résultat s'affiche dans un encadré. */
.auth-msg.err,.auth-msg.ok{padding:11px 14px;border-radius:14px;font-size:15px;line-height:1.45}
.auth-msg.err{border:1px solid rgba(255,90,168,.65);background:rgba(255,0,128,.10);color:#ffd3e7;box-shadow:0 0 16px rgba(255,0,128,.12)}
.auth-msg.err::before{content:"⚠ ";color:#ff5aa8;font-weight:700}
.auth-msg.ok{border:1px solid rgba(57,255,20,.55);background:rgba(57,255,20,.08);color:#d9ffd0;box-shadow:0 0 16px rgba(57,255,20,.10)}
.auth-msg.ok::before{content:"✓ ";color:#39ff14;font-weight:700}
@keyframes lcTourne{to{transform:rotate(360deg)}}
.login-btn[aria-busy="true"]::before{content:"";display:inline-block;width:15px;height:15px;margin-right:10px;vertical-align:-2px;border:2px solid rgba(4,18,42,.3);border-top-color:#04122a;border-radius:50%;animation:lcTourne .8s linear infinite}

/* Cellulaire (15 oct., demandé par Gabriel) : les blocs descendent pour remplir l'écran au lieu de laisser un trou en bas.
   - Fenêtre de connexion : de « Connecte-toi à ton compte » jusqu'au bouton, le bloc est poussé vers le bas.
     (Quand le formulaire est plus long que l'écran, comme l'inscription, rien ne change : il défile.)
   - Accueil, pas connecté : de « Cybersécurité » à « Voir les parcours », le bloc est centré entre le bouton
     « Se connecter » et le timbre « 100 % québécois ». Connecté, il reste en haut pour laisser la place à Clic dessous. */
@media (max-width:820px){
  #auth .view > .stg.d2:first-child{margin-top:auto !important}
  #auth .view{padding-bottom:clamp(8px,3vh,32px)}
  /* Les écrans cachés de la fenêtre (inscription quand on est sur connexion, etc.) ne comptent plus dans la hauteur :
     sinon le plus long (l'inscription) étire tout et le bouton « Se connecter » se retrouve sous le bas de l'écran. */
  #auth .view.off-left,#auth .view.off-right{position:absolute;top:0;left:0;right:0}
  #auth div:has(> #viewLogin){position:relative}
  /* (suite, 15 oct.) Gabriel : le bloc remonte un peu, en plein centre entre le bouton « Se connecter »
     (bas à 64 px) et le haut du timbre (90 px au-dessus du bas de l'écran). */
  html:not(.connecte) #haut .hero-grid{margin-top:auto !important;margin-bottom:auto !important;padding-top:64px !important;padding-bottom:90px !important}
}