/* ========================================================= LOIRE & SOUND — feuille de style principale ========================================================= */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* En donnant un fond au , on empeche la propagation du fond du vers le canevas : le fond du body est alors peint dans SA propre boite, dont la hauteur est celle de tout le document. C'est ce qui permet d'etirer l'image en un seul exemplaire du haut jusqu'en bas de la page. */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--fond); } img, svg, video { display: block; max-width: 100%; } /* La regle du navigateur pour l'attribut `hidden` est `[hidden]{display:none}`, de specificite (0,1,0) — exactement celle d'une classe. Toute regle de classe posant un `display` et ecrite APRES dans la feuille l'emporte donc, et l'element reste visible malgre son attribut. C'est ce qui rendait le voile de paiement permanent. On tranche une bonne fois. */ [hidden] { display: none !important; } button, input { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } ul { list-style: none; } /* ---------- Tokens ---------- */ :root { --fond: #2a3031; /* teinte de fond de assets/background.png */ --noir: #17191a; --noir-2: #202324; --noir-3: #2a2d2e; --blanc: #ffffff; --creme: #dcecf2; --or: #e2ac5f; --or-clair: #edc487; --or-fonce: #cf9440; --bleu: #8ecae6; --bleu-fonce: #4e7fbd; --bleu-pale: #a9d4e8; --violet: #3d2bf5; --grad-or: linear-gradient(160deg, var(--or-clair) 0%, var(--or) 45%, var(--or-fonce) 100%); --grad-bleu: linear-gradient(140deg, #a7d3e2 0%, #7fb2d4 45%, #5b8fc9 100%); --titre: "Archivo", "Arial Narrow", sans-serif; --texte: "Outfit", "Helvetica Neue", Arial, sans-serif; --max: 1320px; --pad: clamp(1.25rem, 5vw, 4.5rem); --r-sm: 12px; --r-md: 22px; --r-lg: 34px; --ease: cubic-bezier(.22, 1, .36, 1); } /* ---------- Base ---------- */ body { font-family: var(--texte); /* background.png en UN SEUL exemplaire, etire sur toute la largeur et sur toute la hauteur du document. Les pourcentages se resolvent ici contre la boite du , qui contient tout le contenu : l'image couvre donc la page entiere, du premier au dernier pixel. */ min-height: 100vh; background-color: var(--fond); background-image: url("../assets/background.png"); background-repeat: no-repeat; background-position: center top; background-size: 100% 100%; color: var(--blanc); line-height: 1.55; overflow-x: hidden; } body.no-scroll { overflow: hidden; } .shell { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); } ::selection { background: var(--or); color: var(--noir); } /* Barre de défilement */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--fond); } ::-webkit-scrollbar-thumb { background: #3a3e3f; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--or); } /* ---------- Typographie ---------- */ .titre-section { font-family: var(--titre); font-weight: 800; font-style: italic; text-transform: uppercase; line-height: .88; letter-spacing: -.01em; } .titre-section .l1 { display: block; font-size: clamp(2.6rem, 6.5vw, 5.2rem); } .titre-section .l2 { display: block; font-size: clamp(1.7rem, 4.2vw, 3.4rem); padding-left: .12em; } .titre-pivot { transform: rotate(-6deg); transform-origin: left center; } /* ========================================================= Logo & marque Le lettrage est une image (assets/logo-texte.png, 639x237, blanc sur fond transparent). Elle est dimensionnee par sa LARGEUR seule : la hauteur suit grace au rapport declare dans les attributs width/height, ce qui evite tout saut de mise en page pendant le chargement. ========================================================= */ .hero__logo img, .pied__marque img, .entete-page__marque img { width: 100%; height: auto; } /* Marque ronde de l'en-tete (assets/ptit-logo.png, 88x59, blanc sur fond transparent). Elle se pose directement sur le fond sombre : pas de pastille blanche derriere, contrairement a la version dessinee qu'elle remplace. A 46 px d'affichage pour 88 px de source, elle reste nette sur les ecrans a haute densite. */ .pastille { width: clamp(36px, 3.4vw, 48px); flex: none; transition: transform .4s var(--ease), opacity .3s; } .pastille img { width: 100%; height: auto; } .pastille:hover { transform: rotate(-12deg) scale(1.1); } /* ========================================================= Bouton de menu « égaliseur » Au repos : cinq barres qui dansent en continu. Au survol (et menu ouvert) : l'icône pivote d'un quart de tour, b2 et b4 s'effacent, et les trois barres restantes continuent de s'animer à l'horizontale. --------------------------------------------------------- Géométrie (viewBox 10 10 80 80) : pas régulier de 18 (x = 14 / 32 / 50 / 68 / 86), épaisseur 7, hauteurs 43,75 / 62,5 / 43,75 / 34,4 / 43,75. Les barres b1, b3 et b5 sont rigoureusement identiques et centrées sur y = 50 : ce sont elles qui forment le burger, sans correction de longueur. ========================================================= */ .menu-son { width: 50px; height: 50px; padding: 2px; background: none; border: 0; cursor: pointer; color: var(--blanc); transition: color .3s, transform .4s var(--ease); } .menu-son:hover { transform: scale(1.06); } .menu-son:focus-visible { outline: 2px solid var(--or); outline-offset: 6px; border-radius: 6px; } .menu-son .son { width: 100%; height: 100%; overflow: visible; transform-origin: 50% 50%; transition: transform .6s var(--ease); } .menu-son path { transform-box: fill-box; transform-origin: 50% 50%; /* les barres du logo sont centrées */ animation: son var(--duree) ease-in-out var(--retard) infinite alternate; /* `translate` doit figurer ici, dans l'etat de repos : declaree seulement dans la regle :hover, elle animait a l'aller mais claquait au retour, puisque la regle survolee ne s'applique plus des que la souris sort. */ transition: opacity .35s var(--ease), translate .5s var(--ease); will-change: transform; } @keyframes son { from { transform: scaleY(var(--bas)); } to { transform: scaleY(var(--haut)); } } /* Rythme propre à chaque barre. Les durées ne sont volontairement pas multiples entre elles : la figure ne se répète jamais à l'identique. `--haut` est plafonné selon la hauteur d'origine de la barre, pour qu'aucune ne sorte du viewBox en pleine amplitude (b2, la plus longue, est celle qui a le moins de marge). */ .menu-son .b1 { --duree: .78s; --retard: -.42s; --bas: .42; --haut: 1.42; } .menu-son .b2 { --duree: .92s; --retard: -.20s; --bas: .34; --haut: 1.20; } .menu-son .b3 { --duree: .66s; --retard: -.55s; --bas: .46; --haut: 1.38; } .menu-son .b4 { --duree: .85s; --retard: -.33s; --bas: .40; --haut: 1.55; } .menu-son .b5 { --duree: 1.14s; --retard: -.68s; --bas: .44; --haut: 1.34; } /* --- Menu ouvert : quart de tour, et l'on ne garde que les trois barres du milieu, b2 b3 b4. Elles occupent deja x = 32, 50 et 68 : l'espacement de 18 est celui du SVG, il n'y a plus rien a deplacer. Ce sont donc b1 et b5, les deux extremes, qui s'effacent. ----- */ .menu-son.ouvert .son { transform: rotate(90deg); } .menu-son.ouvert { color: var(--or); } .menu-son.ouvert .b1, .menu-son.ouvert .b5 { opacity: 0; } /* Le burger s'agite, menu ouvert comme au survol : c'est la même icône vivante, l'ouverture ne l'immobilise pas. Tempo et retard communs pour que les trois traits respirent ensemble. */ .menu-son.ouvert path { --duree: .7s; --retard: 0s; } /* b2, b3 et b4 n'ont pas la même longueur d'origine — 62,5, 43,75 et 34,375 — puisqu'elles dessinent un égaliseur. Chacune est donc ramenée à la longueur de b3 par son propre facteur (43,75 divisé par sa longueur : 0,700 / 1 / 1,273), puis animée entre 0,85 et 1,15 de cette valeur commune. Les trois traits restent ainsi rigoureusement égaux à chaque instant. */ .menu-son.ouvert .b2 { --bas: 0.595; --haut: 0.805; } .menu-son.ouvert .b3 { --bas: 0.850; --haut: 1.150; } .menu-son.ouvert .b4 { --bas: 1.082; --haut: 1.464; } /* --- Survol : rigoureusement la même figure animée. Le clic ne change donc rien au dessin, il ouvre le menu et passe l'icône à l'or. Réservé aux pointeurs qui survolent vraiment : au doigt, `:hover` reste collé après la frappe et bloquerait l'icône dans cet état alors que le menu est refermé. --------------------------------- */ @media (hover: hover) { .menu-son:hover .son { transform: rotate(90deg); } .menu-son:hover .b1, .menu-son:hover .b5 { opacity: 0; } .menu-son:hover path { --duree: .7s; --retard: 0s; } .menu-son:hover .b2 { --bas: 0.595; --haut: 0.805; } .menu-son:hover .b3 { --bas: 0.850; --haut: 1.150; } .menu-son:hover .b4 { --bas: 1.082; --haut: 1.464; } } /* ========================================================= En-tête ========================================================= */ .entete { position: fixed; inset: 0 0 auto 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.35rem var(--pad); transition: background-color .4s var(--ease), padding .4s var(--ease); } .entete.compacte { background: rgba(42, 48, 49, .82); backdrop-filter: blur(14px); padding-block: .8rem; border-bottom: 1px solid rgba(255,255,255,.07); } .entete__droite { display: flex; align-items: center; gap: 1.6rem; } .menu-mobile { position: fixed; inset: 0; z-index: 80; background: url("../assets/background.png") center / cover no-repeat, var(--fond); display: flex; flex-direction: column; justify-content: center; gap: .4rem; padding: var(--pad); clip-path: circle(0% at 100% 0%); transition: clip-path .7s var(--ease); pointer-events: none; } .menu-mobile.ouvert { clip-path: circle(150% at 100% 0%); pointer-events: auto; } .menu-mobile a { font-family: var(--titre); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: clamp(2rem, 11vw, 3.6rem); line-height: 1.05; opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s; } .menu-mobile.ouvert a { opacity: 1; transform: none; } .menu-mobile a:hover { color: var(--or); } /* Seule navigation du site : elle doit indiquer ou l'on se trouve. */ .menu-mobile a[aria-current="page"] { color: var(--or); } .menu-mobile a[aria-current="page"]::after { content: ""; display: inline-block; vertical-align: .28em; width: .3em; height: .12em; margin-left: .3em; background: currentColor; border-radius: 2px; } .menu-mobile a:nth-child(1) { transition-delay: .12s; } .menu-mobile a:nth-child(2) { transition-delay: .18s; } .menu-mobile a:nth-child(3) { transition-delay: .24s; } .menu-mobile a:nth-child(4) { transition-delay: .3s; } .menu-mobile a:nth-child(5) { transition-delay: .36s; } /* ========================================================= Boutons ========================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; padding: .95rem 2rem; border-radius: 999px; border: 1px solid transparent; font-size: .95rem; font-weight: 500; cursor: pointer; transition: transform .35s var(--ease), background .35s, color .35s, border-color .35s; } .btn:hover { transform: translateY(-3px); } .btn:active { transform: translateY(0); } .btn svg { width: 18px; height: 18px; flex: none; } .btn--creme { background: var(--creme); color: var(--noir); } .btn--creme:hover { background: var(--blanc); } .btn--fantome { border-color: rgba(255,255,255,.35); color: var(--blanc); } .btn--fantome:hover { background: var(--blanc); color: var(--noir); border-color: var(--blanc); } .btn--or { background: var(--grad-or); color: var(--noir); font-weight: 600; } .btn--noir { background: var(--noir); color: var(--blanc); } .btn--blanc { background: var(--blanc); color: var(--noir); } .btn--bloc { width: 100%; } /* Retour */ .retour { display: inline-flex; align-items: center; gap: .8rem; background: var(--blanc); color: var(--noir); padding: .8rem 1.7rem .8rem 1.2rem; border-radius: 999px; font-size: .92rem; transition: transform .35s var(--ease), gap .35s var(--ease); } .retour:hover { transform: translateX(-6px); gap: 1.1rem; } .retour svg { width: 16px; height: 16px; } /* ========================================================= HERO ========================================================= */ .hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; isolation: isolate; } .hero__fond { position: absolute; inset: -8% 0 0 0; z-index: -2; } .hero__fond::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 8%, rgba(142,202,230,.55), transparent 62%), linear-gradient(180deg, #16232b 0%, #21414f 38%, #16242c 100%); } /* Video de fond. `object-fit: cover` la fait remplir le cadre sans deformation, quel que soit le rapport de l'ecran. Le degrade du ::before reste visible tant que la video n'est pas chargee. */ .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .hero__voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,20,24,.62) 0%, rgba(14,20,24,.22) 32%, rgba(14,20,24,.34) 60%, rgba(14,20,24,.72) 100%); } .hero__logo { width: clamp(230px, 42vw, 620px); z-index: 2; animation: apparition 1.4s var(--ease) both; filter: drop-shadow(0 6px 26px rgba(0,0,0,.45)); } .hero__accroche { position: absolute; left: var(--pad); bottom: 22%; max-width: 22ch; font-size: .95rem; opacity: .78; letter-spacing: .04em; z-index: 2; animation: apparition 1.4s .5s var(--ease) both; } @keyframes apparition { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } } .hero__defiler { position: absolute; left: 50%; bottom: 12%; translate: -50% 0; display: grid; place-items: center; gap: .6rem; font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; opacity: .6; z-index: 2; } .hero__defiler i { display: block; width: 1px; height: 46px; background: linear-gradient(180deg, currentColor, transparent); animation: chute 2s ease-in-out infinite; } @keyframes chute { 0%,100% { transform: scaleY(.35); transform-origin: top; } 50% { transform: scaleY(1); } } /* ========================================================= Bandeau défilant ========================================================= */ .bandeau { /* Une marge negative egale a la MOITIE de la hauteur place la coupure entre les deux sections exactement au centre du bandeau. L'inclinaison decale ensuite ses bords de (largeur x 1.06 / 2) x tan(1.4deg), soit 1,3 vw : il suffit donc que la demi-hauteur depasse cette valeur pour qu'aucun coin de section ne ressorte. La hauteur etant elle aussi en vw, le rapport reste constant a toutes les largeurs d'ecran. (Le padding utilise ici auparavant peignait le bandeau plus haut : c'est la marge seule qui produit le chevauchement.) */ --h: clamp(52px, 4vw, 120px); position: relative; z-index: 5; height: var(--h); margin-block: calc(var(--h) / -2); display: flex; align-items: center; background: var(--bleu-pale); color: var(--noir); transform: rotate(-1.4deg) scale(1.06); overflow: hidden; white-space: nowrap; box-shadow: 0 14px 40px rgba(0,0,0,.35); } .bandeau--or { background: var(--grad-or); } .bandeau--inverse { transform: rotate(1.4deg) scale(1.06); } .bandeau__piste { display: inline-flex; flex: none; gap: 3rem; animation: glisse 26s linear infinite; } .bandeau:hover .bandeau__piste { animation-play-state: paused; } .bandeau__piste span { font-family: var(--titre); font-weight: 700; font-style: italic; font-size: clamp(1rem, 1.9vw, 1.7rem); line-height: 1.1; text-transform: uppercase; letter-spacing: .01em; display: inline-flex; align-items: center; gap: 3rem; } .bandeau__piste span::after { content: "◆"; font-size: .5em; opacity: .55; } @keyframes glisse { to { transform: translateX(-50%); } } /* ========================================================= Section événements ========================================================= */ .evenements { position: relative; background: transparent; padding: clamp(5rem, 11vw, 9rem) 0 clamp(4rem, 8vw, 7rem); overflow: hidden; } .evenements > .shell { position: relative; z-index: 1; } .carrousel { position: relative; margin-top: clamp(2.5rem, 5vw, 4rem); /* `overflow-x: auto` force le navigateur a rogner aussi la verticale : la carte soulevee au survol etait coupee. On reserve donc la place dans la piste elle-meme, en haut pour le soulevement et en bas pour l'ombre portee. */ --marge-haut: 30px; --marge-bas: 46px; --hauteur-points: 3.4rem; } .carrousel__piste { display: flex; gap: clamp(1rem, 2.2vw, 2rem); overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--marge-haut) 2px var(--marge-bas); scrollbar-width: none; } .carrousel__piste::-webkit-scrollbar { display: none; } .arche { flex: 0 0 clamp(220px, 27vw, 330px); aspect-ratio: 33 / 41; scroll-snap-align: center; position: relative; border-radius: 999px 999px 999px 4px; background: var(--grad-or); overflow: hidden; cursor: pointer; box-shadow: 0 18px 40px rgba(0,0,0,.42); transition: transform .55s var(--ease); } .arche:hover { transform: translateY(-12px) scale(1.02); } .arche { backface-visibility: hidden; } /* Le `mix-blend-mode: luminosity` d'origine servait a teinter les visuels de remplacement. Avec de vraies photos il les ternissait, et surtout il forçait une composition separee : en fin de transition, la couche fusionnee se recalait sur les coins arrondis et laissait une frange visible. La teinte doree est desormais peinte dans le voile, sans fusion. */ .arche__img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .92; transition: transform .8s var(--ease), opacity .5s; } .arche:hover .arche__img { transform: scale(1.09); opacity: 1; } .arche__voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(226,172,95,.30) 0%, rgba(226,172,95,.06) 34%, rgba(24,18,8,.55) 70%, rgba(20,15,6,.9) 100%); } .arche__txt { position: absolute; inset: auto 0 0 0; padding: 1.6rem 1.5rem; color: var(--blanc); } .arche__date { display: inline-block; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; background: rgba(0,0,0,.42); padding: .3rem .7rem; border-radius: 999px; margin-bottom: .6rem; backdrop-filter: blur(4px); } .arche__nom { font-family: var(--titre); font-weight: 800; font-size: 1.5rem; text-transform: uppercase; line-height: 1; } .arche__lieu { font-size: .82rem; opacity: .82; margin-top: .25rem; } .carrousel__fleche { /* centrees sur les cartes, en retirant les marges de la piste et la hauteur des points de pagination */ position: absolute; z-index: 3; top: calc(var(--marge-haut) + (100% - var(--marge-haut) - var(--marge-bas) - var(--hauteur-points)) / 2); translate: 0 -50%; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: rgba(42,48,49,.6); backdrop-filter: blur(8px); display: grid; place-items: center; cursor: pointer; transition: background .3s, transform .3s var(--ease), border-color .3s; } .carrousel__fleche:hover { background: var(--blanc); color: var(--noir); border-color: var(--blanc); transform: scale(1.08); } .carrousel__fleche svg { width: 18px; height: 18px; } .carrousel__fleche--prec { left: calc(var(--pad) * -.55); } .carrousel__fleche--suiv { right: calc(var(--pad) * -.55); } .carrousel__points { display: flex; justify-content: center; gap: .6rem; height: 10px; margin-top: 2.4rem; } .carrousel__points button { width: 10px; height: 10px; border: 0; padding: 0; cursor: pointer; background: rgba(255,255,255,.3); rotate: 45deg; border-radius: 2px; transition: background .3s, scale .3s var(--ease); } .carrousel__points button[aria-current="true"] { background: var(--or); scale: 1.35; } /* ========================================================= Section mise en avant (bleue) ========================================================= */ .avant { position: relative; background: var(--grad-bleu); color: var(--blanc); padding: clamp(5rem, 11vw, 9rem) 0; overflow: hidden; } .avant::after { content: ""; position: absolute; right: -8%; bottom: -22%; width: 34vw; aspect-ratio: 1; background: var(--violet); opacity: .85; border-radius: 62% 38% 60% 40% / 55% 52% 48% 45%; filter: blur(2px); } .avant__grille { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; } .avant__visuel { position: relative; aspect-ratio: 4 / 5; background: linear-gradient(150deg, var(--violet), #6d3ef0 55%, #b48ef7); border-radius: 62% 4% 62% 4%; overflow: hidden; /* Le coin haut-droit du visuel est le seul angle vif de la forme (border-radius 62% 4% 62% 4%) : le texte cale a droite y trouve toute sa place, contrairement au coin haut-gauche tres arrondi. */ display: grid; align-content: start; justify-items: end; gap: .3rem; text-align: right; padding: clamp(2rem, 5vw, 4rem) clamp(2rem, 4vw, 3.4rem); box-shadow: 0 40px 90px rgba(20,10,80,.35); transition: transform .7s var(--ease); } .avant__visuel:hover { transform: rotate(-2deg) scale(1.02); } .avant__visuel::after { content: ""; position: absolute; inset: auto -20% -30% 20%; aspect-ratio: 1; background: repeating-radial-gradient(circle at 30% 70%, rgba(255,255,255,.16) 0 2px, transparent 2px 12px); } .avant__nom { font-family: var(--titre); font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.6rem); text-transform: uppercase; color: #f0a6a0; } .avant__role { font-style: italic; font-weight: 500; letter-spacing: .04em; line-height: 1.25; } .avant__titre { font-family: var(--titre); font-weight: 800; font-size: clamp(2.6rem, 7vw, 5rem); text-transform: uppercase; line-height: .9; margin-bottom: 1.6rem; } .avant__texte { font-size: 1rem; opacity: .95; max-width: 54ch; margin-bottom: 2rem; } .avant__actions { display: flex; flex-wrap: wrap; gap: 1rem; } /* ========================================================= Section artistes en éventail ========================================================= */ .eventail { position: relative; background: transparent; padding: clamp(5rem, 11vw, 9rem) 0; overflow: hidden; } .eventail > .shell { position: relative; z-index: 1; } .eventail__intro { text-align: center; margin-bottom: clamp(3rem, 6vw, 5rem); } .eventail__intro p { opacity: .65; max-width: 46ch; margin: 1rem auto 0; } .eventail__cartes { display: flex; justify-content: center; align-items: center; gap: clamp(.5rem, 1.6vw, 1.6rem); flex-wrap: wrap; perspective: 1200px; } .vedette { position: relative; flex: 0 0 clamp(150px, 19vw, 250px); aspect-ratio: 3 / 4.1; border-radius: var(--r-md); overflow: hidden; cursor: pointer; box-shadow: 0 26px 56px rgba(0,0,0,.5); /* `rotate` et `translate` sont des proprietes distinctes de `transform` : absentes de cette liste, elles basculaient d'un coup pendant que le `transform` s'animait — d'ou le sursaut en quittant le survol. `box-shadow` en revanche en est volontairement exclue : une ombre animee repeint une large zone floue a chaque image. */ transition: transform .6s var(--ease), rotate .6s var(--ease), translate .6s var(--ease); backface-visibility: hidden; } .vedette:nth-child(1) { rotate: -7deg; translate: 0 -14px; } .vedette:nth-child(2) { rotate: -3deg; translate: 0 26px; } .vedette:nth-child(3) { rotate: 4deg; translate: 0 20px; } .vedette:nth-child(4) { rotate: 8deg; translate: 0 -18px; } .vedette:hover { rotate: 0deg; transform: translateY(-22px) scale(1.06); z-index: 3; } .vedette__img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .8s var(--ease); } .vedette:hover .vedette__img { transform: scale(1.08); } .vedette__voile { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.78) 100%); } .vedette__txt { position: absolute; inset: auto 0 1.2rem 0; text-align: center; } .vedette__nom { font-family: var(--titre); font-weight: 800; text-transform: uppercase; font-size: clamp(1.3rem, 2.4vw, 2rem); color: var(--or); line-height: 1; text-shadow: 0 3px 14px rgba(0,0,0,.6); } .vedette__ville { font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; opacity: .9; } .eventail__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.2rem; margin-top: clamp(3rem, 6vw, 5rem); } /* ========================================================= Partenaires ========================================================= */ .partenaires { background: transparent; padding: clamp(3rem, 7vw, 6rem) 0 clamp(4rem, 9vw, 7rem); position: relative; z-index: 1; } .partenaires h2 { text-align: center; font-size: clamp(1.1rem, 2.2vw, 1.5rem); font-weight: 400; opacity: .85; margin-bottom: clamp(2rem, 4vw, 3.4rem); } .partenaires h2 em { font-weight: 700; font-style: italic; } .partenaires__liste { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(1.5rem, 4vw, 3.6rem); } .partenaires__liste span { font-family: var(--titre); font-weight: 700; font-size: clamp(.95rem, 1.6vw, 1.25rem); letter-spacing: .04em; text-transform: uppercase; opacity: .45; filter: grayscale(1); transition: opacity .35s, transform .35s var(--ease); } .partenaires__liste span:hover { opacity: 1; transform: scale(1.08); } /* ========================================================= Pied de page ========================================================= */ .pied { background: transparent; border-top: 1px solid rgba(255,255,255,.08); padding: clamp(3.5rem, 8vw, 6rem) 0 2.5rem; } .pied__grille { display: grid; grid-template-columns: 1.1fr .9fr .8fr 1.2fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; } .pied__marque { width: clamp(170px, 21vw, 260px); } .pied__socials { display: flex; gap: 1.3rem; margin-top: 2rem; } .pied__socials a { opacity: .8; transition: opacity .3s, transform .3s var(--ease); } .pied__socials a:hover { opacity: 1; transform: translateY(-4px); color: var(--bleu); } .pied__socials svg { width: 20px; height: 20px; } .pied__desc { font-weight: 600; line-height: 1.4; } .pied__villes { font-style: italic; opacity: .5; font-size: .9rem; margin-top: .6rem; } .pied__tel { display: inline-block; margin-top: 1.2rem; text-decoration: underline; text-underline-offset: 4px; transition: color .3s; } .pied__tel:hover { color: var(--or); } .pied__liens { display: grid; gap: .9rem; } .pied__liens a { display: flex; align-items: center; gap: .8rem; border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-sm); padding: .9rem 1.2rem; font-size: .95rem; opacity: .85; transition: background .3s, opacity .3s, border-color .3s, transform .3s var(--ease); } .pied__liens a:hover { background: rgba(255,255,255,.07); opacity: 1; border-color: rgba(255,255,255,.4); transform: translateX(5px); } .pied__liens svg { width: 18px; height: 18px; } .bulletin h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 400; margin-bottom: 1.6rem; } .bulletin label { display: block; font-size: 1.05rem; margin-bottom: .7rem; opacity: .9; } .bulletin__ligne { display: flex; gap: .8rem; flex-wrap: wrap; } .bulletin input { flex: 1 1 200px; min-width: 0; background: var(--noir-3); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-sm); padding: .95rem 1.1rem; transition: border-color .3s, background .3s; } .bulletin input::placeholder { color: rgba(255,255,255,.35); } .bulletin input:focus { outline: none; border-color: var(--bleu); background: #26292a; } .bulletin button { background: var(--bleu); color: var(--noir); border: 0; border-radius: var(--r-sm); padding: .95rem 1.8rem; font-weight: 600; cursor: pointer; transition: background .3s, transform .3s var(--ease); } .bulletin button:hover { background: var(--blanc); transform: translateY(-2px); } .bulletin__note { font-size: .8rem; opacity: .45; margin-top: .9rem; } .pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .8rem; opacity: .45; } .pied__bas nav { display: flex; gap: 1.4rem; flex-wrap: wrap; } .pied__bas a:hover { opacity: 1; text-decoration: underline; } /* ========================================================= Page GENRES — colonnes ========================================================= */ .genres { display: flex; min-height: 100svh; width: 100%; } .genre { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; cursor: pointer; transition: flex-grow .7s var(--ease); display: grid; place-items: center; } .genres:hover .genre { flex-grow: .82; } .genre:hover, .genre.actif { flex-grow: 2.4; } .genre__img { position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(.65) brightness(.62); transition: filter .7s var(--ease), transform .9s var(--ease); } .genre:hover .genre__img { filter: grayscale(0) brightness(.85); transform: scale(1.06); } .genre__contenu { position: relative; z-index: 2; text-align: center; padding: 1rem; } .genre__nom { font-family: var(--titre); font-weight: 500; text-transform: uppercase; font-size: clamp(1.1rem, 2.4vw, 2.2rem); letter-spacing: .02em; text-shadow: 0 4px 20px rgba(0,0,0,.7); writing-mode: horizontal-tb; } .genre__cta { display: block; font-style: italic; letter-spacing: .18em; text-transform: uppercase; font-size: .75rem; margin-top: .9rem; opacity: 0; transform: translateY(12px); transition: opacity .45s var(--ease), transform .45s var(--ease); } .genre:hover .genre__cta { opacity: .95; transform: none; } .bulle { position: absolute; left: 50%; top: 62%; translate: -50% 0; z-index: 20; background: var(--blanc); color: var(--noir); padding: 1rem 2rem; border-radius: 999px; font-size: 1rem; white-space: nowrap; box-shadow: 0 18px 50px rgba(0,0,0,.4); animation: flotte 3.4s ease-in-out infinite; } .bulle::after { content: ""; position: absolute; right: 30px; bottom: -12px; border: 9px solid transparent; border-top-color: var(--blanc); border-right: 0; transform: rotate(-18deg); } @keyframes flotte { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } /* ========================================================= Page LISTE ARTISTES ========================================================= */ .entete-page { position: relative; min-height: 62svh; display: grid; align-items: center; padding: clamp(7rem, 14vw, 11rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; } .entete-page::before { content: ""; position: absolute; inset: 0; z-index: -1; background: conic-gradient(from 200deg at 20% 30%, #5c2135, #1c2b3a 25%, #3b4a24 50%, #2b1e3d 75%, #5c2135), var(--noir); filter: saturate(.85); } .entete-page::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,22,24,.72), rgba(20,22,24,.9)); } .entete-page__marque { width: clamp(220px, 38vw, 430px); margin-inline: auto; } .entete-page__barre { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; margin-top: clamp(2rem, 5vw, 3.5rem); } /* Champ de recherche des en-têtes de page */ .entete-page input[type="search"] { flex: 1 1 220px; min-width: 0; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: var(--blanc); border-radius: 999px; padding: .8rem 1.4rem; backdrop-filter: blur(6px); transition: border-color .3s, background .3s; } .entete-page input[type="search"]::placeholder { color: rgba(255,255,255,.45); } .entete-page input[type="search"]:focus { outline: none; border-color: var(--blanc); background: rgba(255,255,255,.14); } .filtres { display: flex; flex-wrap: wrap; gap: .6rem; } .filtres button { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: var(--blanc); border-radius: 999px; padding: .55rem 1.3rem; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(6px); transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease); } .filtres button:hover { transform: translateY(-2px); border-color: var(--blanc); } .filtres button[aria-pressed="true"] { background: var(--blanc); color: var(--noir); border-color: var(--blanc); } .grille-artistes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: clamp(1rem, 2.2vw, 1.8rem); padding: clamp(3rem, 7vw, 5rem) 0 clamp(4rem, 9vw, 7rem); } .carte-artiste { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-md); overflow: hidden; background: var(--noir-3); box-shadow: 0 18px 46px rgba(0,0,0,.45); transition: transform .55s var(--ease); animation: monte .6s var(--ease) both; backface-visibility: hidden; } .carte-artiste:hover { transform: translateY(-10px); } .carte-artiste__img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .8s var(--ease); } .carte-artiste:hover .carte-artiste__img { transform: scale(1.07); } /* Meme cause que sur les arches : le `mix-blend-mode: color` produisait une frange sur les coins arrondis en fin de transition. Remplace par un simple voile sombre qui s'eclaircit au survol. */ .carte-artiste__teinte { position: absolute; inset: 0; opacity: .34; transition: opacity .5s; } .carte-artiste:hover .carte-artiste__teinte { opacity: 0; } .carte-artiste__voile { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.8)); } .carte-artiste__txt { position: absolute; inset: auto 0 0 0; padding: 1.4rem 1.3rem; } .carte-artiste__nom { font-family: var(--titre); font-weight: 600; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .03em; } .carte-artiste__meta { font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; opacity: .8; line-height: 1.4; margin-top: .3rem; } @keyframes monte { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } /* ========================================================= Page ARTISTE ========================================================= */ .fiche { background: var(--grad-bleu); color: var(--noir); position: relative; overflow: hidden; } .fiche::before { content: ""; position: absolute; left: -25%; top: -10%; width: 90%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.14); } .fiche > .shell { position: relative; z-index: 1; padding-block: clamp(7rem, 13vw, 10rem) clamp(4rem, 9vw, 7rem); } .fiche__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: clamp(2.5rem, 5vw, 5rem); } .fiche__nom { font-family: var(--titre); font-weight: 700; text-transform: uppercase; font-size: clamp(3rem, 10vw, 7rem); line-height: .9; letter-spacing: -.02em; margin: 1.8rem 0 1.4rem; } .fiche__tags { display: flex; flex-wrap: wrap; gap: .7rem; } .fiche__tags span { border: 2px solid var(--noir); border-radius: 999px; padding: .35rem 1.4rem; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; background: rgba(255,255,255,.35); } .fiche h2 { font-family: var(--titre); font-weight: 500; text-transform: uppercase; font-size: clamp(1.8rem, 4vw, 3rem); margin: clamp(2.5rem, 5vw, 3.5rem) 0 1.2rem; letter-spacing: .01em; } .fiche__bio p { font-size: .95rem; line-height: 1.75; margin-bottom: 1.1rem; max-width: 62ch; } .fiche__media { display: grid; grid-template-columns: 92px 1fr; gap: 1.2rem; align-items: start; } .fiche__vignettes { display: grid; gap: 1rem; } .fiche__vignettes button { aspect-ratio: 1; border: 0; border-radius: var(--r-sm); cursor: pointer; background-size: cover; background-position: center; background-color: rgba(255,255,255,.5); opacity: .6; transition: opacity .35s, transform .35s var(--ease), outline-color .3s; outline: 2px solid transparent; outline-offset: 3px; } .fiche__vignettes button:hover { opacity: 1; transform: scale(1.06); } .fiche__vignettes button[aria-current="true"] { opacity: 1; outline-color: var(--noir); } .fiche__photo { aspect-ratio: 4 / 4.4; border-radius: var(--r-lg); overflow: hidden; background-size: cover; background-position: center; background-color: #16324a; box-shadow: 0 30px 70px rgba(10,30,50,.4); transition: transform .6s var(--ease); } .fiche__photo:hover { transform: scale(1.02); } .fiche__son { margin-top: 1.4rem; margin-left: calc(92px + 1.2rem); border: 2px solid var(--blanc); border-radius: var(--r-md); padding: 1.3rem 2rem; text-align: center; font-size: clamp(1.1rem, 2.2vw, 1.5rem); color: var(--blanc); background: rgba(255,255,255,.08); cursor: pointer; width: fit-content; transition: background .35s, transform .35s var(--ease), color .35s; } .fiche__son:hover { background: var(--blanc); color: var(--noir); transform: translateY(-4px); } .dates-artiste { display: grid; gap: .8rem; margin-top: 1rem; } .date-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; background: rgba(255,255,255,.32); border-radius: var(--r-sm); padding: 1rem 1.4rem; transition: background .3s, transform .3s var(--ease); } .date-ligne:hover { background: rgba(255,255,255,.5); transform: translateX(6px); } .date-ligne b { font-family: var(--titre); font-weight: 700; letter-spacing: .04em; min-width: 6rem; } .date-ligne span { flex: 1; font-size: .92rem; } /* ========================================================= Page BILLETTERIE ========================================================= */ .billets { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(1.2rem, 2.4vw, 2rem); padding: clamp(3rem, 7vw, 5rem) 0 clamp(4rem, 9vw, 7rem); } .billet { position: relative; display: flex; align-items: stretch; min-height: 128px; border-radius: 14px; overflow: hidden; color: var(--blanc); cursor: pointer; box-shadow: 0 16px 44px rgba(0,0,0,.4); transition: transform .45s var(--ease); animation: monte .6s var(--ease) both; } .billet:hover { transform: translateY(-8px) rotate(-.6deg); } .billet__img { position: absolute; inset: 0; background-size: cover; background-position: center; } .billet__teinte { position: absolute; inset: 0; opacity: .8; } .billet__corps { position: relative; z-index: 2; flex: 1; padding: 1.2rem 1.4rem; display: flex; flex-direction: column; justify-content: center; } .billet__date { font-size: .82rem; letter-spacing: .12em; font-weight: 600; opacity: .95; } .billet__nom { font-family: var(--titre); font-weight: 700; text-transform: uppercase; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1; letter-spacing: .02em; color: rgba(255,255,255,.9); text-shadow: 0 2px 12px rgba(0,0,0,.3); } .billet__lieu { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; opacity: .95; margin-top: .3rem; } .billet__souche { position: relative; z-index: 2; flex: 0 0 46px; background: rgba(0,0,0,.34); border-left: 2px dashed rgba(255,255,255,.6); display: grid; grid-template-rows: repeat(7, 1fr); gap: 3px; padding: 10px 8px; } .billet__souche i { background: rgba(0,0,0,.28); border-radius: 2px; } .billet::before, .billet::after { content: ""; position: absolute; right: 44px; z-index: 3; width: 18px; height: 18px; border-radius: 50%; background: var(--fond); } .billet::before { top: -9px; } .billet::after { bottom: -9px; } /* ========================================================= Utilitaires & animations d'apparition ========================================================= */ .reveal { opacity: 0; transform: translateY(38px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .reveal.vu { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .1s; } .reveal.d2 { transition-delay: .2s; } .reveal.d3 { transition-delay: .3s; } .centre { text-align: center; } .vide { text-align: center; opacity: .6; padding: 4rem 0; grid-column: 1 / -1; } /* Barre de progression de lecture */ .progression { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 100; background: var(--or); transform-origin: left; scale: 0 1; transition: scale .1s linear; } /* ========================================================= Responsive ========================================================= */ @media (max-width: 1080px) { .pied__grille { grid-template-columns: 1fr 1fr; } .bulletin { grid-column: 1 / -1; } } @media (max-width: 900px) { .avant__grille { grid-template-columns: 1fr; } .avant__visuel { max-width: 420px; } .fiche__grille { grid-template-columns: 1fr; } .fiche__son { margin-left: 0; } .carrousel__fleche--prec { left: .25rem; } .carrousel__fleche--suiv { right: .25rem; } .genres { flex-direction: column; min-height: auto; } .genre { min-height: 26svh; } .genres:hover .genre { flex-grow: 1; } .genre:hover, .genre.actif { flex-grow: 1; } .genre__cta { opacity: .9; transform: none; } .bulle { display: none; } } @media (max-width: 700px) { .pied__grille { grid-template-columns: 1fr; } .eventail__cartes { gap: .8rem; } .vedette { flex: 0 0 44%; rotate: 0deg !important; translate: 0 !important; } .hero__accroche { bottom: 26%; } .fiche__media { grid-template-columns: 1fr; } .fiche__vignettes { grid-auto-flow: column; grid-template-columns: repeat(3, 1fr); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } html { scroll-behavior: auto; } } /* ========================================================= PARCOURS DE RÉSERVATION Page concert, panier, coordonnées, paiement, confirmation. ========================================================= */ /* ---------- Pastille de panier dans l'en-tête ---------- */ .panier-lien { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; transition: background .3s, transform .3s var(--ease); } .panier-lien svg { width: 23px; height: 23px; } .panier-lien:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); } .panier-lien__nb { position: absolute; top: -2px; right: -2px; min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; background: var(--or); color: var(--noir); border-radius: 999px; font-size: .7rem; font-weight: 600; opacity: 0; scale: .4; transition: opacity .3s var(--ease), scale .3s var(--ease); } .panier-lien.garni .panier-lien__nb { opacity: 1; scale: 1; } /* ---------- Page concert : bandeau de tête ---------- */ .concert-tete { position: relative; isolation: isolate; min-height: 62svh; display: flex; align-items: flex-end; padding: clamp(7rem, 14vw, 11rem) 0 clamp(2.5rem, 5vw, 4rem); overflow: hidden; } .concert-tete__fond { position: absolute; inset: 0; z-index: -2; background-size: cover !important; background-position: center !important; transform: scale(1.04); } .concert-tete__voile { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,24,26,.82) 0%, rgba(20,24,26,.45) 40%, rgba(42,48,49,.97) 100%); } .concert-tete__date { font-size: .95rem; letter-spacing: .18em; text-transform: uppercase; color: var(--or); margin: clamp(1.5rem, 3vw, 2.5rem) 0 .4rem; } .concert-tete__nom { font-family: var(--titre); font-weight: 800; text-transform: uppercase; font-size: clamp(2.6rem, 9vw, 6.5rem); line-height: .9; letter-spacing: -.02em; } .concert-tete__lieu { font-size: 1.05rem; opacity: .82; margin-top: .5rem; } .concert-tete__etat { margin-top: 1.2rem; } .etat { display: inline-flex; align-items: center; gap: .55rem; padding: .4rem 1.1rem; border-radius: 999px; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; border: 1px solid currentColor; } .etat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .etat--vert { color: #7bd39a; } .etat--orange { color: var(--or); } .etat--rouge { color: #e08b8b; } /* ---------- Page concert : corps ---------- */ .concert-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(2rem, 4vw, 4rem); padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 9vw, 7rem); align-items: start; } .concert-corps h2 { font-family: var(--titre); font-weight: 600; text-transform: uppercase; font-size: clamp(1.3rem, 2.6vw, 1.9rem); letter-spacing: .02em; margin: 0 0 1.2rem; } .concert-corps h2 + * { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } .concert-lien { font-size: .95rem; opacity: .8; } .concert-lien a { color: var(--or); text-decoration: underline; text-underline-offset: 3px; } .infos { display: grid; gap: 0; } .info-ligne { display: grid; grid-template-columns: minmax(0, 200px) 1fr; gap: 1rem; padding: .85rem 0; border-top: 1px solid rgba(255,255,255,.1); font-size: .95rem; } .info-ligne dt { opacity: .58; } /* ---------- Sélecteur de places ---------- */ .reservation-carte { position: sticky; top: 100px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-md); padding: clamp(1.4rem, 2.6vw, 2rem); backdrop-filter: blur(6px); } .reservation-carte h2 { margin-bottom: 1.2rem; } .tarifs { display: grid; gap: .8rem; } .tarif { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: center; padding: 1rem; border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.12); transition: border-color .3s, background .3s; } .tarif--actif { border-color: var(--or); background: rgba(226,172,95,.09); } .tarif__txt h3 { font-size: 1rem; font-weight: 600; } .tarif__txt p { font-size: .78rem; opacity: .6; line-height: 1.4; margin-top: .2rem; } .tarif__prix { font-family: var(--titre); font-weight: 700; font-size: 1.25rem; } .tarif .compteur { grid-column: 1 / -1; justify-self: start; } .compteur { display: inline-flex; align-items: center; gap: .2rem; } .compteur button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid rgba(255,255,255,.22); background: none; color: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; transition: background .25s, border-color .25s, transform .2s var(--ease); } .compteur button:hover:not(:disabled) { background: var(--blanc); color: var(--noir); border-color: var(--blanc); } .compteur button:active:not(:disabled) { transform: scale(.92); } .compteur button:disabled { opacity: .3; cursor: not-allowed; } .compteur output { min-width: 34px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; } .reservation-carte__total { margin: 1.4rem 0 1rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.12); font-size: 1.05rem; font-weight: 600; } .reservation-carte__note { font-size: .78rem; opacity: .5; margin-top: 1rem; line-height: 1.5; } .btn:disabled { opacity: .35; cursor: not-allowed; transform: none !important; } .date-ligne__prix { font-size: .88rem; opacity: .7; white-space: nowrap; } /* ========================================================= Tunnel de commande ========================================================= */ .tunnel { padding-block: clamp(7rem, 13vw, 10rem) clamp(4rem, 9vw, 7rem); } .avis-demo { background: rgba(226,172,95,.12); border: 1px solid rgba(226,172,95,.4); color: var(--or-clair); border-radius: var(--r-sm); padding: .9rem 1.2rem; font-size: .88rem; line-height: 1.55; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); } .avis-demo strong { color: var(--or); } /* ---------- Jauge d'étapes ---------- */ .jauge { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-bottom: clamp(2rem, 4vw, 3.2rem); counter-reset: etape; } .jauge li { display: flex; align-items: center; gap: .6rem; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; opacity: .38; transition: opacity .4s; } .jauge li span { width: 27px; height: 27px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 1px solid currentColor; font-size: .76rem; transition: background .4s, color .4s, border-color .4s; } .jauge li.active { opacity: 1; color: var(--or); } .jauge li.faite { opacity: .85; color: var(--blanc); } .jauge li.faite span { background: var(--blanc); color: var(--noir); border-color: var(--blanc); } .jauge li.active span { background: var(--or); color: var(--noir); border-color: var(--or); } /* Une fois la commande confirmee, le tunnel ne se remonte plus : le JS pose `verrouille` sur la jauge, qui s'estompe pour le signaler. */ .jauge.verrouille li:not(.active) { opacity: .22; } .titre-tunnel { font-family: var(--titre); font-weight: 800; font-style: italic; text-transform: uppercase; line-height: .92; font-size: clamp(2rem, 5vw, 3.4rem); margin-bottom: clamp(1.5rem, 3vw, 2.4rem); } .titre-tunnel--petit { font-size: clamp(1.4rem, 3vw, 2rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); } .etape { animation: entree .5s var(--ease) both; } @keyframes entree { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .tunnel__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; } .tunnel__cote { position: sticky; top: 100px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-md); padding: clamp(1.3rem, 2.4vw, 1.8rem); display: grid; gap: 1.2rem; } .tunnel__cote h2 { font-size: 1.1rem; font-weight: 600; } .tunnel__lien { text-align: center; font-size: .9rem; opacity: .65; text-decoration: underline; text-underline-offset: 3px; } .tunnel__lien:hover { opacity: 1; } /* ---------- Lignes du panier ---------- */ .ligne-panier { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto auto auto; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.1); } .ligne-panier__img { width: 82px; aspect-ratio: 3/4; border-radius: 10px; background-size: cover !important; background-position: center !important; } .ligne-panier__txt h3 { font-family: var(--titre); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; } .ligne-panier__txt p { font-size: .85rem; opacity: .62; } .ligne-panier__cat { color: var(--or) !important; opacity: 1 !important; margin-top: .25rem; } .ligne-panier__total { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 5rem; text-align: right; } .ligne-panier__suppr { background: none; border: 0; cursor: pointer; color: inherit; opacity: .45; padding: .4rem; transition: opacity .25s, color .25s; } .ligne-panier__suppr svg { width: 19px; height: 19px; } .ligne-panier__suppr:hover { opacity: 1; color: #e08b8b; } .panier-vide { text-align: center; padding: clamp(3rem, 8vw, 6rem) 0; display: grid; gap: 1.5rem; justify-items: center; } .panier-vide p { opacity: .6; } /* ---------- Récapitulatif ---------- */ .resume { display: grid; gap: .6rem; font-size: .92rem; } .resume > div { display: flex; justify-content: space-between; gap: 1rem; } .resume dt small { opacity: .5; } .resume--remise { color: #7bd39a; } .resume__total { margin-top: .5rem; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.15); font-size: 1.2rem; font-weight: 600; } .recap-liste { display: grid; gap: .5rem; margin: 1rem 0; font-size: .9rem; } .recap-liste li { display: flex; justify-content: space-between; gap: 1rem; } .recap-total { display: flex; justify-content: space-between; gap: 1rem; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.15); font-size: 1.1rem; } /* ---------- Formulaires ---------- */ .formulaire { display: grid; gap: 1.1rem; } .formulaire__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } .champ { display: grid; gap: .4rem; } .champ label { font-size: .88rem; opacity: .78; } .champ label em { color: var(--or); font-style: normal; font-size: .8rem; margin-left: .4rem; } .champ input, .promo input { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-sm); padding: .85rem 1rem; transition: border-color .25s, background .25s; } .champ input::placeholder, .promo input::placeholder { color: rgba(255,255,255,.3); } .champ input:focus, .promo input:focus { outline: none; border-color: var(--or); background: rgba(255,255,255,.1); } .champ input.invalide { border-color: #e08b8b; } .champ__aide { font-size: .78rem; opacity: .45; min-height: 1.1em; } .champ__aide--erreur { color: #e08b8b; opacity: 1; } .champ__aide--ok { color: #7bd39a; opacity: 1; } .case { display: flex; align-items: flex-start; gap: .7rem; font-size: .9rem; opacity: .8; cursor: pointer; } .case input { width: 18px; height: 18px; accent-color: var(--or); flex: none; margin-top: .1rem; } .formulaire__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .6rem; } .formulaire__actions--centre { justify-content: center; margin-top: 2.5rem; } .moyens { border: 0; display: grid; gap: .7rem; } .moyens legend { font-size: .88rem; opacity: .78; margin-bottom: .7rem; } .moyen { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; align-items: center; cursor: pointer; padding: 1rem 1.2rem; border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.14); transition: border-color .25s, background .25s; } .moyen:has(input:checked) { border-color: var(--or); background: rgba(226,172,95,.09); } .moyen input { width: 18px; height: 18px; accent-color: var(--or); grid-row: 1 / 3; } .moyen__nom { font-weight: 600; } .moyen__marques { font-size: .78rem; opacity: .55; } .mention-sure { display: flex; align-items: center; gap: .6rem; font-size: .8rem; opacity: .5; margin-top: .4rem; } .mention-sure svg { width: 17px; height: 17px; flex: none; } .promo label { display: block; font-size: .88rem; opacity: .78; margin-bottom: .4rem; } .promo__ligne { display: flex; gap: .6rem; } .promo__ligne input { flex: 1; min-width: 0; } .promo__ligne .btn { padding-inline: 1.2rem; white-space: nowrap; } /* ---------- Confirmation ---------- */ .confirme { text-align: center; padding: clamp(1.5rem, 4vw, 3rem) 0; } .confirme__coche { width: 74px; height: 74px; margin: 0 auto 1.6rem; border-radius: 50%; display: grid; place-items: center; background: rgba(123,211,154,.16); color: #7bd39a; border: 1px solid rgba(123,211,154,.5); animation: pousse .6s var(--ease) both; } .confirme__coche svg { width: 34px; height: 34px; } @keyframes pousse { from { scale: .4; opacity: 0; } to { scale: 1; opacity: 1; } } .confirme__txt { opacity: .8; max-width: 52ch; margin: 0 auto; line-height: 1.7; } .confirme__txt strong { color: var(--or); } .billets-emis { display: grid; gap: 1rem; } .eticket { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 1.2rem; align-items: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-md); padding: 1rem; animation: monte .5s var(--ease) both; } .eticket__img { width: 92px; aspect-ratio: 1; border-radius: 12px; background-size: cover !important; background-position: center !important; } .eticket__cat { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--or); } .eticket__corps h3 { font-family: var(--titre); font-weight: 700; font-size: 1.3rem; text-transform: uppercase; } .eticket__corps p { font-size: .86rem; opacity: .65; } .eticket__ref { font-family: var(--mono, monospace); letter-spacing: .1em; opacity: .45 !important; margin-top: .3rem; } .eticket__code { width: 78px; height: 78px; background: var(--blanc); color: var(--noir); border-radius: 8px; padding: 6px; } .eticket__code svg { width: 100%; height: 100%; } /* ---------- Voile de paiement ---------- */ .voile-secure { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: rgba(16,19,20,.9); backdrop-filter: blur(6px); } .voile-secure__boite { text-align: center; display: grid; gap: 1.2rem; justify-items: center; padding: 2rem; } .voile-secure__anneau { width: 54px; height: 54px; border-radius: 50%; border: 3px solid rgba(255,255,255,.16); border-top-color: var(--or); animation: tourne .9s linear infinite; } @keyframes tourne { to { transform: rotate(1turn); } } .voile-secure__note { font-size: .78rem; opacity: .45; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .concert-corps, .tunnel__grille { grid-template-columns: 1fr; } .reservation-carte, .tunnel__cote { position: static; } .ligne-panier { grid-template-columns: 68px 1fr auto; row-gap: .8rem; } .ligne-panier__img { width: 68px; } .ligne-panier__total { grid-column: 2; text-align: left; } .ligne-panier__suppr { grid-column: 3; } .formulaire__duo { grid-template-columns: 1fr; } .eticket { grid-template-columns: 68px 1fr; } .eticket__img { width: 68px; } .eticket__code { grid-column: 2; width: 66px; height: 66px; } .info-ligne { grid-template-columns: 1fr; gap: .2rem; } } /* ---------- Impression des billets ---------- */ @media print { .entete, .menu-mobile, .pied, .jauge, .avis-demo, .progression, .formulaire__actions, .bandeau { display: none !important; } body { background: #fff !important; color: #000; } .eticket { border-color: #bbb; background: #fff; break-inside: avoid; } .eticket__corps p, .eticket__ref { opacity: .8 !important; } .confirme__txt strong, .eticket__cat { color: #000; } } .carte-artiste__prix { color: var(--or); }