/* Le socle des trois expériences de « Commence ici » : la peau et les composants de sa page en ligne
   (liste d'attente v32, www.mtsedits.com/groupe). */
:root{--fond:#090a22;--carte:#11133a;--filet:rgba(170,160,255,.13);--accent:#a78bff;--peche:#c4b2ff;--bouton:#7b4dff;
 --texte:#c8c9ef;--doux:#9496c8;--contenu:960px}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:Inter,system-ui,sans-serif;font-optical-sizing:auto;font-size:17px;line-height:1.6;color:var(--texte);
 background:var(--fond);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(60% 40% at 50% 0%,rgba(123,77,255,.28),transparent 70%),
 radial-gradient(50% 35% at 100% 40%,rgba(90,60,255,.12),transparent 70%),
 radial-gradient(60% 40% at 0% 80%,rgba(123,77,255,.12),transparent 70%)}
h1,h2,h3{color:#fff;font-weight:500;text-wrap:balance}
.l{width:100%;max-width:var(--contenu);margin:0 auto;padding:0 20px}

/* le héros, sans cadre, la grille en fond */
.hero-nu{position:relative;overflow:hidden}
.hero-nu::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
 background-image:linear-gradient(rgba(170,160,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(170,160,255,.08) 1px,transparent 1px);
 background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,#000,transparent 75%);
 mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,#000,transparent 75%)}
.hero-nu>*{position:relative;z-index:1}
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 20px 40px}
.pastille{display:inline-flex;align-items:center;gap:9px;padding:4px 14px 4px 4px;border-radius:100px;
 background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:13px;font-weight:600;letter-spacing:.02em}
.pastille img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.hero h1{margin:24px auto 20px;max-width:12em;font-size:clamp(33px,4.6vw,56px);line-height:1.05;letter-spacing:-.04em}
.encadre{display:inline-block;padding:0 .18em;border-radius:12px;background:rgba(123,77,255,.22);
 box-shadow:inset 0 0 0 1.5px rgba(167,139,255,.7);color:#fff}
.hero p{max-width:31em;font-size:18px;margin-bottom:28px}

/* le bouton : violet, texte blanc, halo violet, la flèche dans un rond */
.bouton{position:relative;display:inline-flex;text-decoration:none;border-radius:100px;isolation:isolate}
.bouton .halo{position:absolute;inset:-2px;border-radius:100px;background:var(--bouton);filter:blur(16px);opacity:.55;z-index:0;
 animation:respire 3.2s ease-in-out infinite}
.bouton .libelle{position:relative;z-index:1;display:inline-flex;align-items:center;height:58px;padding:0 66px 0 30px;
 border-radius:100px;background:var(--bouton);color:#fff;font-weight:600;font-size:17px;letter-spacing:-.005em;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.18),0 10px 24px -8px rgba(43,43,255,.55);
 transition:transform .2s,background .2s}
.bouton:hover .libelle{transform:translateY(-1px);background:#8f66ff}
.rond-fleche{position:absolute;right:7px;top:50%;margin-top:-22px;display:grid;place-items:center;width:44px;height:44px;
 border-radius:50%;background:rgba(255,255,255,.18);transition:background .25s,transform .35s cubic-bezier(.23,1,.32,1)}
.bouton:hover .rond-fleche{background:#fff;color:var(--bouton);transform:rotate(-45deg)}
@keyframes respire{0%,100%{transform:scale(.92);opacity:.28}50%{transform:scale(1.08);opacity:.6}}
.coches{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:22px;font-size:15px;color:#fff}
.coches li{display:flex;align-items:center;gap:8px}
.coches svg{color:var(--accent);flex:none}

/* la vidéo de MTS, quand elle l'aura enregistrée */
.video{max-width:760px;margin:8px auto 0;aspect-ratio:16/9;border-radius:24px;border:1px dashed rgba(167,139,255,.4);
 background:rgba(17,19,58,.5);display:grid;place-items:center;text-align:center;color:var(--doux);font-size:15px;padding:16px}

/* les sections */
.bloc{margin-top:96px}
.bloc>h2{text-align:center;font-size:clamp(30px,3.3vw,44px);line-height:1.1;letter-spacing:-.03em;margin-bottom:12px}
.bloc>.sous{text-align:center;max-width:32em;margin:0 auto 36px}

/* les étapes : les cartes à pastille-icône de la page */
.etapes{list-style:none;display:grid;gap:14px}
@media(min-width:760px){.etapes{grid-template-columns:1fr 1fr}}
.etape{display:flex;flex-direction:column;gap:22px;padding:26px;border-radius:24px;background:var(--carte);border:1px solid var(--filet)}
.etape .tete{display:flex;align-items:center;gap:14px}
.pastille-ico{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:14px;
 background:rgba(123,77,255,.18);color:var(--peche)}
.etape .num{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--doux)}
.etape h3{font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.etape p{font-size:16px;line-height:1.55;margin-top:6px}
.salon{color:#fff;font-weight:600}
.capture{margin-top:auto;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#fff}
.capture img{display:block;width:100%;height:auto}

/* le groupe : l'accordéon des questions de la page */
.faq-simple{max-width:760px;margin:0 auto}
.faq-simple details{border-bottom:1px solid var(--filet);padding:20px 0}
.faq-simple details:first-child{border-top:1px solid var(--filet)}
.faq-simple summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
 padding:4px 0;color:#fff;font-size:18px;font-weight:500;letter-spacing:-.01em}
.faq-simple summary::-webkit-details-marker{display:none}
.plus{flex:none;position:relative;width:32px;height:32px;border-radius:50%;background:rgba(123,77,255,.18);
 border:1.5px solid rgba(167,139,255,.6)}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;
 background:#fff;transition:transform .25s}
.plus::after{transform:rotate(90deg)}
details[open] .plus{background:rgba(123,77,255,.3)}
details[open] .plus::after{transform:rotate(0)}
.faq-simple ul{list-style:none;display:grid;gap:12px;padding-top:14px}
.faq-simple li{position:relative;padding-left:26px;font-size:16px}
.faq-simple li svg{position:absolute;left:0;top:4px;color:var(--accent)}

/* la fin : la carte à lueur et sa grille */
.fin{position:relative;overflow:hidden;margin:96px auto 64px;max-width:var(--contenu);padding:72px 24px;text-align:center;
 border-radius:32px;border:1px solid rgba(170,160,255,.16);
 background:radial-gradient(ellipse 60% 90% at 50% 120%,rgba(123,77,255,.45),transparent 70%),var(--carte)}
.fin::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
 background-image:linear-gradient(rgba(190,170,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(190,170,255,.09) 1px,transparent 1px);
 background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,#000,transparent 75%);
 mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,#000,transparent 75%)}
.fin>*{position:relative;z-index:1}
.fin h2{max-width:14em;margin:0 auto 32px;font-size:clamp(30px,4vw,52px);line-height:1.06;letter-spacing:-.035em}
@media(max-width:599px){.fin{margin:72px 12px 40px;padding:56px 20px;border-radius:26px}.bloc{margin-top:72px}}
@media(prefers-reduced-motion:reduce){.bouton .halo{animation:none}}