/* ==========================================================================
   Créations V3 (maquette validée creations-v3)
   « Mes créations. » et le cube de Marco, le cube en écrin qui dévoile Shop Pépite,
   puis CLESS GAME RP, Glace Pétard et Rappel, chacun avec sa couleur, et la fin sur Genève.
   Classes posées par creations.js sur <html> :
   « immersion » (la mise en scène au défilement), « scene3d » (le cube est dessiné), « sans3d » (pas de 3D).
   Sans « immersion » (moins de mouvement, pas de 3D, script en panne), la page est simple :
   les univers les uns sous les autres, chacun sur sa couleur, la barre au milieu.
   ========================================================================== */

.page-creations { --nuit-creations: #050506; }

/* Le fond change de couleur avec chaque univers. Un aplat, jamais un dégradé. */
.fond { position: fixed; inset: 0; z-index: 0; background: var(--nuit-creations); }
/* La toile suit la fenêtre visible (sculpture.js dessine à sa taille) : sur iPhone, 100vh dépasse quand les barres de Safari sont affichées */
.scene { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
html:not(.anime) .scene { position: absolute; bottom: auto; height: 100vh; height: 100svh; }
.sans3d .scene { display: none; }

/* L'écrin : le bordeaux qui se répand dans le fond, et le pull que le cube cachait. Rien ne grossit. */
.flot { position: fixed; inset: 0; z-index: 0; background: #2a070c; opacity: 0; pointer-events: none; }
.coeur { position: fixed; z-index: 0; left: 50%; top: 50%; height: min(38vmin, 300px); width: auto; max-width: none; translate: -50% -50%; opacity: 0; visibility: hidden; pointer-events: none; }
html:not(.immersion) .flot, html:not(.immersion) .coeur { display: none; }

/* 1. Le haut de page */
.entete { position: relative; z-index: 4; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--gouttiere) 12vh; }
.entete h1 { margin: 0 0 24px; font-size: clamp(3.4rem, 8vw, 8.4rem); line-height: .95; letter-spacing: -.055em; text-wrap: wrap; }
.entete p { margin: 0 0 34px; max-width: 34em; font-size: 18px; line-height: 1.55; color: var(--doux); }
.sommaire { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 34px; font-size: 17px; font-weight: 600; }
.sommaire a { display: inline-block; padding-block: 4px; text-decoration: none; border-bottom: 1px solid rgb(242 244 248 / .35); transition: border-color .25s; }
.sommaire a:hover { border-color: var(--clair); }
/* Le titre attend sa police pour monter. Si le script ne démarre jamais, il s'affiche au bout de 4 s. */
html.anime:not(.titre-pret) .entete > * { visibility: hidden; animation: titre-secours 0s linear 4s forwards; }
@keyframes titre-secours { to { visibility: visible; } }

/* 2. Les univers. Page simple : les uns sous les autres, chacun sur sa couleur.
   Avec l'immersion : chacun reste en place pendant qu'on le parcourt, sur le fond qui change de couleur. */
.univers { position: relative; z-index: 4; background: var(--fond-univers); }
.univers__scene { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); align-items: center; gap: 4vw; padding: 96px var(--gouttiere) 84px; }
.immersion .univers { height: 300vh; background: none; }
/* Le sommaire mène à Shop Pépite quand le cube est grand ouvert */
.immersion #p-pepite { scroll-margin-top: -115vh; }
.immersion .univers__scene { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
.univers__texte { position: relative; z-index: 2; }
.univers__nom { font-size: clamp(3rem, 6.6vw, 7.4rem); }
.u-cless .univers__nom { font-size: clamp(3.4rem, 7.8vw, 8.6rem); }
.univers__fait { margin-bottom: 22px; max-width: 30em; opacity: .8; }
.univers__note { display: flex; align-items: center; gap: 8px; margin: 0 0 22px; opacity: .7; }
.univers__note .icone { width: 18px; height: 18px; fill: currentColor; flex: none; }
.univers__media { position: relative; justify-self: end; width: 100%; max-width: calc((100vh - 200px) * 1.6); }

/* Les écrans où la page de chaque site défile */
.ecran { position: relative; overflow: hidden; background: #eeedea; }
.ecran--ordi { aspect-ratio: 16 / 10; border-radius: 8px; }
.ecran--tel { position: absolute; width: 22%; aspect-ratio: 390 / 844; left: 3%; bottom: -8%; border-radius: 18px; outline: 6px solid #16181d; }
.calque { position: absolute; inset: 0; pointer-events: none; }
.calque img { width: 100%; max-width: none; will-change: transform; -webkit-user-drag: none; }

/* La barre de Shop Pépite : à gauche le squelette de la page, à droite le site fini */
.comparer .ecran { touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.calque--idee { clip-path: inset(0 calc(100% - var(--coupe, 50%)) 0 0); }
.barre { position: absolute; top: 0; bottom: 0; left: var(--coupe, 50%); width: 2px; margin-left: -1px; background: var(--clair); pointer-events: none; }
.ecran--ordi .barre::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--clair); }
.poignee { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; color: #0c0d10; }
.poignee .icone { width: 22px; height: 22px; fill: currentColor; }
.ecran--tel .poignee { display: none; }
.etiquette { position: absolute; z-index: 2; top: 12px; padding: 6px 10px; border-radius: 6px; background: #0c0d10; color: var(--clair); font-size: 13px; font-weight: 600; pointer-events: none; transition: opacity .25s; }
.etiquette--idee { left: 12px; }
.etiquette--fini { right: 12px; }
.ecran--tel .etiquette { display: none; }
.curseur { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.comparer:has(.curseur:focus-visible) .barre { outline: 2px solid #2f6bff; outline-offset: 3px; }

/* Shop Pépite */
.u-pepite .ecran--ordi { outline: 1px solid rgb(243 235 221 / .25); }

/* CLESS GAME RP : la bande-annonce du jeu en grand, sans le son */
.film { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: #0b0b0c; }
.film video { width: 100%; height: 100%; object-fit: cover; filter: saturate(.6) contrast(1.05); }

/* Glace Pétard : ses gros contours noirs */
.u-glace .univers__note { opacity: 1; }
.u-glace .ecran { outline: 3px solid #140b22; }
.u-glace .ecran--ordi { border-radius: 12px; }

/* Rappel : le téléphone seul */
.u-rappel .univers__media { display: flex; justify-content: center; }
.u-rappel .ecran--tel { position: relative; inset: auto; width: auto; height: min(70vh, 640px); border-radius: 22px; outline: 1px solid rgb(241 243 238 / .2); }

@media (max-width: 900px) {
  .entete { padding: 0 var(--gouttiere) 14vh; }
  .entete p { font-size: 16px; }
  .sommaire { flex-direction: column; gap: 12px; }
  .univers__scene { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-content: start; gap: 18px; padding: 72px var(--gouttiere) 92px; }
  .univers__media { order: -1; justify-self: center; width: auto; max-width: none; height: 44vh; display: flex; justify-content: center; }
  .univers__nom { margin-bottom: 10px; font-size: clamp(2.6rem, 12vw, 4rem); }
  .u-cless .univers__nom { font-size: clamp(3rem, 14vw, 4.6rem); }
  .univers__type { font-size: 16px; margin-bottom: 8px; }
  .univers__fait { font-size: 15px; margin-bottom: 12px; }
  .univers__note { margin-bottom: 12px; }
  .ecran--ordi { display: none; }
  .ecran--tel, .u-rappel .ecran--tel { position: relative; inset: auto; width: auto; height: 100%; }
  .ecran--tel .poignee { display: flex; }
  .ecran--tel .etiquette { display: block; }
  .ecran--tel .barre::after { content: ""; position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: var(--clair); }
  .poignee .icone { width: 18px; height: 18px; }
  .etiquette { top: 8px; padding: 4px 8px; font-size: 11px; }
  .etiquette--idee { left: 8px; }
  .etiquette--fini { right: 8px; }
  .u-cless .univers__scene { grid-template-rows: auto auto; align-content: center; }
  .u-cless .univers__media { width: 100%; height: auto; }
  .film { width: 100%; }
}