/* =========================================================
   LKB STUDIO : scènes de l'accueil (voir scenes.js)
   Une scène = un écran. Grosse typographie élargie, un seul objet fort par écran.
   ========================================================= */
.scenes { overflow-x: clip; }
.sc { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-block: clamp(64px, 11vh, 96px); }
.sc > .wrap { width: 100%; }
.sc em { font-style: normal; color: var(--magenta-vif); }
.grand-texte, .cree {
  font-weight: 800; font-stretch: var(--large); letter-spacing: -.035em; line-height: .98;
}

/* 1 · Bonjour */
.sc-intro { align-items: flex-end; padding-bottom: clamp(56px, 10vh, 120px); margin-top: calc(-72px - env(safe-area-inset-top, 0px)); overflow: hidden; }
.sc-intro::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 45% 55% at 78% 50%, rgba(206, 11, 188, .16), transparent 70%),
              radial-gradient(ellipse 35% 45% at 70% 40%, rgba(58, 155, 230, .12), transparent 70%);
}
.particules { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-texte { position: relative; pointer-events: none; }
.frappe { margin: 0; font-weight: 800; font-stretch: var(--large); font-size: clamp(42px, 8vw, 128px); line-height: .9; letter-spacing: -.045em; display: flex; align-items: flex-end; }
.curseur { display: inline-block; width: .08em; height: .82em; margin-left: .06em; background: var(--magenta-vif); vertical-align: baseline; animation: clignote 1s steps(1) infinite; }
.prompt .curseur { width: 2px; height: 1.1em; }
@keyframes clignote { 50% { opacity: 0; } }
.intro-2 { margin: 10px 0 0; font-weight: 700; font-stretch: 112%; font-size: clamp(26px, 3.6vw, 52px); letter-spacing: -.02em; line-height: 1.05; overflow: hidden; }
.intro-3 { margin: 22px 0 0; max-width: 46ch; color: var(--doux); font-size: clamp(16px, 1.4vw, 18.5px); }
.indice { position: absolute; right: max(24px, calc((100% - var(--col)) / 2)); bottom: clamp(56px, 10vh, 120px); display: flex; align-items: center; gap: 12px; color: var(--doux); text-decoration: none; font-size: 14px; }
.indice i { width: 1px; height: 48px; background: linear-gradient(var(--magenta-vif), transparent); animation: descend 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes descend { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* 2 · On crée … */
.sc-cree { min-height: 80vh; }
.cree { margin: 0; font-size: clamp(48px, 9vw, 150px); display: flex; flex-wrap: wrap; column-gap: .25em; }
.tambour { display: inline-block; height: 1.02em; overflow: hidden; vertical-align: top; }
.tambour-piste { display: flex; flex-direction: column; }
.tambour-piste span { display: block; height: 1.02em; line-height: 1.02; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.sous-cree { margin: 32px 0 0; max-width: 34ch; font-size: clamp(19px, 2vw, 26px); font-weight: 600; line-height: 1.3; }

/* 3 · La roue des métiers */
.roue-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.roue { perspective: 1200px; height: min(520px, 62vh); display: grid; place-items: center; overflow: hidden;
  -webkit-mask: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.roue-axe { position: relative; width: 100%; height: 2.2em; transform-style: preserve-3d; font-size: clamp(24px, 2.6vw, 40px); }
.rayon { position: absolute; inset: 0; display: flex; align-items: center; font-weight: 800; font-stretch: var(--large); letter-spacing: -.02em; line-height: 1.05;
  color: rgba(243, 239, 255, .22); backface-visibility: hidden; transition: color .3s; }
.rayon.actif { color: var(--texte); }
.fiches-metier { list-style: none; margin: 0; padding: 0; display: grid; }
.fiche-metier { grid-area: 1 / 1; padding: 36px; border-radius: 24px; background: var(--nuit); border: 1px solid var(--ligne); }
.fiche-metier .num { color: var(--magenta-vif); font-weight: 600; font-size: 15px; }
.fiche-metier h3 { margin: 10px 0 14px; font-weight: 800; font-stretch: 112%; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.05; letter-spacing: -.02em; }
.fiche-metier p { margin: 0 0 18px; color: var(--doux); font-size: 17px; }
.fiche-metier .prix { display: inline-block; margin-top: 20px; font-weight: 700; }

/* 4 · Les projets */
.sc-projets { flex-direction: column; align-items: stretch; justify-content: center; gap: clamp(20px, 4vh, 40px); overflow: hidden; }
.projets-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 48px; }
.projets-tete p { margin: 0; color: var(--doux); max-width: 46ch; }
.piste-projets { padding-left: max(24px, calc((100% - var(--col)) / 2)); }
.rail { display: flex; gap: 28px; width: max-content; padding-right: 48px; }
.diapo { width: min(62vw, 760px); flex: none; text-decoration: none; display: grid; gap: 18px; }
.diapo .vue { height: min(46vh, 460px); border-radius: 24px; border: 1px solid var(--ligne); }
.diapo:hover .vue { border-color: var(--ligne-forte); }
.diapo-infos span { color: var(--doux); font-size: 14px; }
.diapo-infos h3 { margin: 6px 0 6px; display: flex; align-items: center; gap: 10px; font-weight: 800; font-stretch: 112%; font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -.02em; }
.diapo-infos h3 svg { width: 20px; height: 20px; color: var(--magenta-vif); }
.diapo-infos p { margin: 0; color: var(--doux); }

/* 5 · La méthode + garanties */
.ia-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.ia-titre { font-size: clamp(32px, 3.9vw, 58px); line-height: 1.04; }
.ia-titre span { display: block; overflow: hidden; }
.ia-texte { margin: 24px 0 0; color: var(--doux); font-size: 18px; max-width: 44ch; }
.ia-scene { display: grid; gap: 28px; }
.prompt { display: flex; align-items: center; gap: 4px; min-height: 64px; padding: 14px 14px 14px 22px; border-radius: 999px; background: var(--nuit); border: 1px solid var(--ligne-forte); box-shadow: 0 0 0 6px rgba(206, 11, 188, .08), 0 30px 60px -30px rgba(206, 11, 188, .5); font-size: 16px; }
.prompt-texte { flex: 1; min-width: 0; }
.envoi { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--magenta); color: #fff; margin-left: auto; }
.envoi svg { width: 18px; height: 18px; }
.pastilles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.pastilles li { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 12px 12px; border-radius: 999px; background: var(--texte); color: var(--encre); font-weight: 700; font-size: 16px; }
.pastilles svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--magenta); color: #fff; }

/* 6 · Contact */
.sc-contact { overflow: hidden; }
.porte-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 28px; text-align: center; padding-inline: 16px; }
.scenes-anim .porte-scene { display: flex; }
.porte-titre { margin: 0; font-weight: 800; font-stretch: var(--large); font-size: clamp(40px, 7vw, 104px); line-height: 1; letter-spacing: -.04em; }
.porte { width: 110px; height: 110px; flex: none; border-radius: 50%; background: var(--magenta); display: grid; place-items: center; color: #fff; box-shadow: 0 0 0 12px rgba(206, 11, 188, .14), 0 30px 70px -20px rgba(206, 11, 188, .7); }
.porte svg { width: 38px; height: 38px; animation: rebond 1.6s ease-in-out infinite; }
.porte-indice { margin: 0; color: var(--doux); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
@keyframes rebond { 50% { transform: translateY(8px); } }
.sc-contact .contact { position: relative; z-index: 1; }

/* Sans animation (GSAP absent ou « réduire les animations ») : tout est posé, rien n'est caché */
html:not(.scenes-anim) .rayon { position: static; display: block; color: var(--texte); }
html:not(.scenes-anim) .roue { height: auto; -webkit-mask: none; mask: none; }
html:not(.scenes-anim) .roue-axe { height: auto; display: grid; gap: 12px; }
html:not(.scenes-anim) .fiches-metier { gap: 16px; }
html:not(.scenes-anim) .fiche-metier { grid-area: auto; }
html:not(.scenes-anim) .piste-projets { overflow-x: auto; scroll-snap-type: x mandatory; }
html:not(.scenes-anim) .diapo { scroll-snap-align: start; }

/* Téléphone */
@media (max-width: 760px) {
  .sc { padding-block: 72px; }
  .sc-intro { align-items: flex-end; padding-bottom: 48px; }
  .indice { display: none; }
  .roue-grille, .ia-grille { grid-template-columns: 1fr; gap: 32px; }
  .roue { display: none; }
  html:not(.scenes-anim) .roue { display: none; }
  .fiches-metier { gap: 16px; }
  .fiche-metier { grid-area: auto; padding: 26px; }
  .piste-projets { overflow-x: auto; scroll-snap-type: x mandatory; padding-left: 16px; }
  .rail { padding-right: 16px; gap: 16px; }
  .diapo { width: 82vw; scroll-snap-align: start; }
  .diapo .vue { height: 56vw; }
  .prompt { border-radius: 24px; align-items: flex-end; }
}

/* Roue désactivée (écran trop bas) : fiches empilées */
.sans-roue .roue { display: none; }
.sans-roue .roue-grille { grid-template-columns: 1fr; }
.sans-roue .fiches-metier { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.sans-roue .fiche-metier { grid-area: auto; }

@media (max-width: 760px) {
  .lien-contact span { font-size: 15px; }
}

/* Projets non épinglés (écran trop bas) : on les fait glisser à la main */
.rail-libre .piste-projets { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.rail-libre .diapo { scroll-snap-align: start; }

/* =========================================================
   Intro du logo (intro.js) : plein écran au-dessus du site, une fois par visite
   ========================================================= */
.avec-intro, .avec-intro body { overflow: hidden; }
.intro-logo { --il-taille: min(max(42vmin, 54vw), 340px); position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; pointer-events: auto; }
.il-fond {
  --trou: 0px;
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(138, 79, 216, .18), transparent 55%), var(--encre);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--trou), #000 calc(var(--trou) + 1px));
  mask: radial-gradient(circle at 50% 50%, transparent var(--trou), #000 calc(var(--trou) + 1px));
}
.il-scene { position: relative; width: 100%; height: 100%; display: grid; place-items: center; pointer-events: none; }
.il-logo { position: relative; width: var(--il-taille); aspect-ratio: 1; will-change: transform; }
.il-anneau, .il-lettres, .il-piece { position: absolute; inset: 0; width: 100%; height: 100%; }
.il-nom, .il-sous { position: absolute; left: 0; right: 0; text-align: center; margin: 0; overflow: hidden; }
.il-nom { top: calc(50% + var(--il-taille) / 2 + 28px); font-weight: 800; font-stretch: var(--large); font-size: clamp(28px, 4vw, 46px); letter-spacing: -.02em; }
.il-nom span { display: inline-block; }
.il-sous { top: calc(50% + var(--il-taille) / 2 + 28px + clamp(50px, 5.6vw, 66px)); color: var(--doux); font-size: clamp(14px, 1.3vw, 16px); letter-spacing: .08em; text-transform: uppercase; }
.il-passer {
  position: absolute; right: 24px; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 2;
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--ligne-forte); background: rgba(11, 7, 32, .6);
  color: var(--doux); font: inherit; font-size: 14px; cursor: pointer;
}
.il-passer:hover { color: var(--texte); border-color: var(--doux); }

/* =========================================================
   Effets transverses (voir scenes.js)
   ========================================================= */
/* Barre de progression */
.progression { position: fixed; left: 0; top: 0; z-index: 60; width: 100%; height: 3px; background: var(--degrade); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
html:not(.scenes-anim) .progression { display: none; }

/* Bulle « Voir le projet » qui suit la souris */
.bulle-voir { display: none; position: fixed; left: 0; top: 0; z-index: 55; width: 112px; height: 112px; border-radius: 50%; place-items: center; text-align: center;
  background: var(--magenta); color: #fff; font-weight: 700; font-size: 14px; line-height: 1.15; padding: 18px; pointer-events: none; box-shadow: 0 18px 40px -12px rgba(206, 11, 188, .6); }
@media (pointer: fine) and (min-width: 761px) { .scenes-anim .bulle-voir { display: grid; } }
@media (pointer: fine) and (min-width: 761px) { .scenes-anim .diapo { cursor: none; } }

/* Bandeau des métiers */
.bandeau { position: relative; padding-block: clamp(24px, 5vh, 56px); overflow: hidden; border-block: 1px solid var(--ligne); display: grid; gap: 6px; }
.bandeau-ligne { overflow: hidden; }
.bandeau-piste { display: flex; align-items: center; width: max-content; gap: .5em; white-space: nowrap; font-weight: 800; font-stretch: var(--large); letter-spacing: -.03em; font-size: clamp(34px, 6vw, 92px); line-height: 1.05; will-change: transform; }
.bandeau-piste span { padding-inline: .1em; }
.bandeau-piste i { font-style: normal; font-size: .5em; color: var(--magenta-vif); }
.bandeau-ligne.contour .bandeau-piste span { color: transparent; -webkit-text-stroke: 1.5px rgba(243, 239, 255, .45); }
.bandeau-ligne.contour .bandeau-piste i { color: var(--lagon); }

/* Titres découpés en mots */
.masque { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.masque > span { display: inline-block; }

/* Images des projets : un peu plus grandes que le cadre pour l'effet de profondeur */
.diapo .vue.image > img { will-change: transform; }
.diapo .vue { transition: border-color .3s, transform .5s cubic-bezier(.2, .8, .2, 1); }
.diapo:hover .vue { transform: scale(.985); }

/* Accroche : la 2e ligne aussi grande que la 1re, en dégradé */
.intro-2.grande { margin: 0; font-weight: 800; font-stretch: var(--large); font-size: clamp(42px, 8vw, 128px); line-height: .98; letter-spacing: -.045em; padding-bottom: .06em;
  background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Réseaux sous la phrase d'accueil */
.intro-actions { position: relative; z-index: 1; margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.intro-reseaux { position: relative; z-index: 1; pointer-events: auto; margin: 0; display: flex; align-items: center; gap: 10px; }
.intro-reseaux a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--ligne-forte); color: var(--texte); transition: background .2s, border-color .2s, color .2s; }
.intro-reseaux a:hover { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.intro-reseaux svg { width: 20px; height: 20px; }
.intro-reseaux span { margin-left: 6px; color: var(--doux); font-size: 14px; }

/* Décor de fond commun à toutes les scènes : trois lueurs floues qui dérivent, une trame qui s'efface sur les bords, du grain */
.decor { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.decor::before { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 72px 72px; -webkit-mask: radial-gradient(ellipse 70% 60% at 50% 45%, #000, transparent 75%); mask: radial-gradient(ellipse 70% 60% at 50% 45%, #000, transparent 75%); }
.decor::after { content: ""; position: absolute; inset: -50%; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.lueur { position: absolute; width: 58vmax; height: 58vmax; border-radius: 50%; filter: blur(60px); opacity: .5; will-change: transform; }
.l1 { left: 45%; top: -20%; background: radial-gradient(circle, rgba(206, 11, 188, .55), transparent 65%); animation: derive 26s ease-in-out infinite alternate; }
.l2 { left: -20%; top: 30%; background: radial-gradient(circle, rgba(58, 155, 230, .45), transparent 65%); animation: derive 32s ease-in-out -8s infinite alternate-reverse; }
.l3 { left: 30%; top: 70%; background: radial-gradient(circle, rgba(138, 79, 216, .5), transparent 65%); animation: derive 38s ease-in-out -15s infinite alternate; }
@keyframes derive { 0% { translate: 0 0; scale: 1; } 50% { translate: 8vw -6vh; scale: 1.15; } 100% { translate: -6vw 8vh; scale: .9; } }
.bandeau { position: relative; }
@media (max-width: 760px) { .lueur { width: 90vmax; height: 90vmax; opacity: .4; } .decor::before { background-size: 48px 48px; } }
@media (prefers-reduced-motion: reduce) { .lueur { animation: none; } }

/* Pastille des projets d'exemple */
.pastille-demo { display: inline-block; margin-left: 10px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--ligne-forte); color: var(--texte); font-size: 12px; font-weight: 600; letter-spacing: .04em; vertical-align: 1px; }