/* v1031 — polices hébergées sur Noxi (Fraunces et Inter, licence SIL Open Font License) : plus de détour par
Google Fonts, qui bloquait le premier affichage. Polices « variables » : un fichier couvre toutes les graisses. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("/decouvrir/polices/fraunces-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("/decouvrir/polices/fraunces-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/decouvrir/polices/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/decouvrir/polices/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* v1026 — site de présentation Noxi (à part de l'app). Animations : transform et opacity seulement (fluides sur
téléphone), toutes coupées si « réduire les animations » est demandé. Couleurs de Noxi : violet → rose, bleu pour les pros. */
:root {
--violet: #a855f7; --rose: #ec1f9c; --rose-clair: #ffb3e6; --fond: #140428;
--texte: #f6f1fb; --texte-2: rgba(246, 241, 251, 0.78); --texte-3: rgba(246, 241, 251, 0.58);
--verre: rgba(255, 255, 255, 0.08); --verre-2: rgba(255, 255, 255, 0.12); --bord: rgba(255, 255, 255, 0.14);
--degrade: linear-gradient(90deg, #a855f7, #ec1f9c);
--ease: cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; }
html { background: var(--fond); scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; color: var(--texte); font-family: "Inter", system-ui, sans-serif; line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; }
.conteneur { max-width: 1140px; margin: 0 auto; padding: 0 22px; }
.titre { font-family: "Fraunces", Georgia, serif; font-weight: 700; letter-spacing: -0.025em; line-height: 1.04; margin: 0; }
.degrade-texte { background: linear-gradient(95deg, #d8b4fe 0%, #ff7ccd 60%, #ffb3e6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.surtitre { margin: 0 0 12px; color: var(--rose-clair); font-weight: 700; font-size: 14px; }
.surtitre.bleu { color: #a9c6ff; }
/* Fond d'ambiance : trois halos qui dérivent lentement */
.ambiance { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(170deg, #140428 0%, #26083f 45%, #3f0a38 100%); }
.halo { position: absolute; border-radius: 50%; opacity: 0.55; will-change: transform; }
.h1 { width: 70vmax; height: 70vmax; left: -25vmax; top: -30vmax; background: radial-gradient(closest-side, rgba(168, 85, 247, 0.55), transparent); animation: derive1 22s ease-in-out infinite alternate; }
.h2 { width: 60vmax; height: 60vmax; right: -25vmax; top: 5vmax; background: radial-gradient(closest-side, rgba(236, 31, 156, 0.45), transparent); animation: derive2 26s ease-in-out infinite alternate; }
.h3 { width: 55vmax; height: 55vmax; left: 20vmax; bottom: -35vmax; background: radial-gradient(closest-side, rgba(139, 92, 246, 0.35), transparent); animation: derive1 30s ease-in-out infinite alternate-reverse; }
@keyframes derive1 { to { transform: translate(8vmax, 6vmax) scale(1.12); } }
@keyframes derive2 { to { transform: translate(-7vmax, 9vmax) scale(0.92); } }
/* Barre du haut : verre, se densifie au défilement */
.barre { position: sticky; top: 0; z-index: 50; transition: background 0.3s, border-color 0.3s; border-bottom: 1px solid transparent; }
.barre.defile { background: rgba(20, 4, 40, 0.72); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-bottom-color: var(--bord); }
.barre-int { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 72px; }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marque span { font-family: "Fraunces", Georgia, serif; font-size: 23px; font-weight: 700; }
.barre nav { display: flex; align-items: center; gap: 22px; }
.barre nav .lien { color: var(--texte-2); text-decoration: none; font-weight: 600; font-size: 14.5px; transition: color 0.2s; }
.barre nav .lien:hover { color: #fff; }
/* Boutons */
.bouton { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 28px; border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap; transition: transform 0.25s var(--ease), box-shadow 0.25s; overflow: hidden; }
.bouton:hover { transform: translateY(-2px); }
.bouton:active { transform: translateY(0) scale(0.98); }
.bouton.petit { height: 42px; padding: 0 18px; font-size: 14.5px; }
.bouton.grand { height: 60px; padding: 0 34px; font-size: 17px; }
.bouton-principal { background: var(--degrade); color: #fff; box-shadow: 0 14px 36px rgba(236, 31, 156, 0.42); }
.bouton-principal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); transform: translateX(-120%); animation: reflet 4.5s ease-in-out infinite 1.5s; }
@keyframes reflet { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.bouton-verre { background: var(--verre); border: 1px solid var(--bord); color: var(--texte); }
.bouton-verre:hover { background: var(--verre-2); }
.bouton-pro { background: linear-gradient(90deg, #5b8dee, #8b5cf6); color: #fff; box-shadow: 0 14px 34px rgba(91, 141, 238, 0.38); }
.fleche { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--ease); }
.bouton:hover .fleche { transform: translateX(4px); }
/* Apparition au défilement (site.js ajoute .visible) */
/* v1031 — le script est chargé sans bloquer l'affichage (« defer ») : les éléments partent masqués, et s'affichent seuls
après 2,5 s si le script ne tourne pas (jamais de page vide). Dès que le script tourne (.js), c'est lui qui les révèle. */
.revele { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--d, 0s); animation: revele-secours 0.6s var(--ease) 2.5s forwards; }
.js .revele { animation: none; }
.revele.visible { opacity: 1; transform: none; }
@keyframes revele-secours { to { opacity: 1; transform: none; } }
/* ACCROCHE */
.accroche { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 40px; align-items: center; min-height: calc(100vh - 72px); padding-top: 20px; padding-bottom: 60px; }
.badge { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px; padding: 8px 14px; border-radius: 999px; background: var(--verre); border: 1px solid var(--bord); font-size: 13.5px; font-weight: 600; color: var(--texte-2); }
.point-direct { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 0 rgba(236, 31, 156, 0.6); animation: pouls 1.8s ease-out infinite; flex-shrink: 0; }
@keyframes pouls { 0% { box-shadow: 0 0 0 0 rgba(236, 31, 156, 0.6); } 100% { box-shadow: 0 0 0 10px rgba(236, 31, 156, 0); } }
.titre-geant { font-size: clamp(38px, 9.6vw, 74px); }
@media (min-width: 961px) { .titre-geant { font-size: clamp(56px, 5.4vw, 76px); } }
.mot { display: inline-block; opacity: 0; transform: translateY(0.45em) rotate(2deg); animation: mot 0.9s var(--ease) forwards; animation-delay: calc(0.08s * var(--i) + 0.1s); }
@keyframes mot { to { opacity: 1; transform: none; } }
.sous { font-size: clamp(17px, 2.1vw, 20px); color: var(--texte-2); margin: 24px 0 32px; max-width: 540px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.note { margin: 22px 0 0; font-size: 13.5px; color: var(--texte-3); }
/* Scène du téléphone */
.scene { position: relative; justify-self: center; width: 340px; max-width: 100%; }
.orbite { position: absolute; border-radius: 50%; border: 1px dashed rgba(255, 179, 230, 0.2); left: 50%; top: 50%; pointer-events: none; }
.o1 { width: 470px; height: 470px; margin: -235px 0 0 -235px; animation: tourne 60s linear infinite; }
.o2 { width: 380px; height: 380px; margin: -190px 0 0 -190px; border-color: rgba(168, 85, 247, 0.22); animation: tourne 45s linear infinite reverse; }
@keyframes tourne { to { transform: rotate(360deg); } }
.telephone { position: relative; width: 300px; margin: 0 auto; border-radius: 48px; padding: 12px; background: linear-gradient(160deg, #2a1144, #0e0320); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 50px 100px rgba(8, 2, 18, 0.7), 0 0 0 7px rgba(255, 255, 255, 0.04), 0 0 80px rgba(236, 31, 156, 0.25); }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes flotte { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-14px) rotate(1deg); } }
.encoche { position: absolute; top: 20px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 999px; background: #0a0216; z-index: 3; }
.ecran { position: relative; border-radius: 38px; overflow: hidden; background: linear-gradient(170deg, #2a0b4a 0%, #4a0b48 60%, #560b43 100%); height: 590px; }
.ecrans { position: relative; height: 100%; }
.vue { position: absolute; inset: 0; padding: 56px 16px 18px; opacity: 0; transform: translateX(24px) scale(0.98); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.vue.active { opacity: 1; transform: none; }
.vue.sortie { opacity: 0; transform: translateX(-24px) scale(0.98); }
.vue .haut { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.vue .haut b { font-family: "Fraunces", Georgia, serif; font-size: 16px; }
.vue .haut i { font-style: normal; font-size: 12px; color: var(--texte-2); display: inline-flex; align-items: center; gap: 6px; }
.vue .ville { font-family: "Fraunces", Georgia, serif; font-size: 32px; font-weight: 700; margin: 0 0 14px; }
.mini { background: rgba(255, 255, 255, 0.11); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 18px; padding: 12px; margin-bottom: 10px; }
.mini .ligne { display: flex; align-items: center; gap: 10px; }
.mini .t { display: block; font-weight: 700; font-size: 13.5px; }
.mini .s { display: block; font-size: 11.5px; color: var(--texte-2); }
.medaillon { width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(135deg, #a855f7, #ec1f9c); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.medaillon.petit { width: 28px; height: 28px; border-radius: 9px; }
.medaillon svg { width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.medaillon.petit svg { width: 14px; height: 14px; }
.visages { display: flex; gap: 8px; margin-top: 10px; }
.visage { width: 38px; height: 38px; border-radius: 50%; padding: 2px; background: linear-gradient(135deg, #a855f7, #ec1f9c); position: relative; }
.visage::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: #3a1660 center / 60% no-repeat url("data:image/svg+xml;utf8,"); }
.boite { border-radius: 18px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.1); }
.boite .photo { height: 110px; position: relative; overflow: hidden; background: #22083a; }
.lumieres { position: absolute; inset: -40%; background: radial-gradient(60px 60px at 25% 40%, rgba(236, 31, 156, 0.9), transparent 70%), radial-gradient(80px 80px at 70% 60%, rgba(168, 85, 247, 0.9), transparent 70%), radial-gradient(50px 50px at 55% 25%, rgba(62, 166, 255, 0.7), transparent 70%); animation: lumieres 7s ease-in-out infinite alternate; }
@keyframes lumieres { to { transform: translate(12%, -8%) rotate(18deg); } }
.boite .photo b { position: absolute; left: 12px; bottom: 9px; font-family: "Fraunces", Georgia, serif; font-size: 19px; }
.boite .corps { padding: 11px 12px 12px; }
.flamme { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
.flamme svg { width: 18px; height: 18px; animation: flamme 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes flamme { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.12) rotate(3deg); } }
.flamme b.saute { display: inline-block; animation: saute 0.5s var(--ease); }
@keyframes saute { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.pilule { margin-top: 10px; height: 36px; border-radius: 999px; background: var(--degrade); display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; }
.carte-nuit { position: relative; height: 330px; margin: 12px 0; border-radius: 20px; overflow: hidden; background: radial-gradient(120% 80% at 50% 40%, #2c1050, #150530); border: 1px solid rgba(255, 255, 255, 0.12); }
.rue { position: absolute; background: rgba(214, 199, 230, 0.12); border-radius: 4px; }
.r1 { left: -10%; right: -10%; top: 38%; height: 6px; transform: rotate(-12deg); }
.r2 { left: 30%; top: -10%; bottom: -10%; width: 5px; transform: rotate(8deg); }
.r3 { left: -10%; right: -10%; top: 72%; height: 4px; transform: rotate(6deg); }
.r4 { left: 70%; top: -10%; bottom: -10%; width: 4px; transform: rotate(-18deg); }
.epingle { position: absolute; width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #1c0733; border: 2.5px solid var(--c); box-shadow: 0 0 12px var(--c), inset 0 0 8px var(--c); animation: pulse-epingle 2.4s ease-in-out infinite; }
.epingle.bar { width: 20px; height: 20px; }
@keyframes pulse-epingle { 0%, 100% { box-shadow: 0 0 8px var(--c), inset 0 0 6px var(--c); } 50% { box-shadow: 0 0 22px var(--c), inset 0 0 10px var(--c); } }
.e1 { left: 44%; top: 30%; } .e2 { left: 18%; top: 58%; animation-delay: 0.6s; } .e3 { left: 66%; top: 64%; animation-delay: 1.1s; } .e4 { left: 30%; top: 16%; animation-delay: 0.3s; } .e5 { left: 76%; top: 22%; animation-delay: 1.4s; }
.pote { position: absolute; width: 30px; height: 30px; border-radius: 50%; padding: 2px; background: var(--degrade); }
.pote::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: #3a1660 center / 60% no-repeat url("data:image/svg+xml;utf8,"); }
.p1 { left: 52%; top: 18%; animation: flotte-pote 3.2s ease-in-out infinite; } .p2 { left: 24%; top: 42%; animation: flotte-pote 3.6s ease-in-out infinite 0.8s; }
@keyframes flotte-pote { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.chrono { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 16px; position: relative; }
.etape { display: grid; grid-template-columns: 44px auto 1fr; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.14); opacity: 0; transform: translateX(16px); }
.vue.active .etape { animation: arrive 0.6s var(--ease) forwards; }
.vue.active .etape:nth-child(2) { animation-delay: 0.25s; } .vue.active .etape:nth-child(3) { animation-delay: 0.5s; }
@keyframes arrive { to { opacity: 1; transform: none; } }
.heure { font-weight: 700; font-size: 13px; }
.pastille-etape { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--degrade); }
.lieu { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bulle-msg { max-width: 78%; padding: 8px 12px; border-radius: 16px; font-size: 12.5px; margin-bottom: 6px; opacity: 0; transform: translateY(8px); }
.vue.active .bulle-msg { animation: arrive 0.5s var(--ease) forwards; animation-delay: var(--d, 0s); }
.bulle-msg.gauche { background: rgba(255, 255, 255, 0.13); border-bottom-left-radius: 6px; }
.bulle-msg.droite { margin-left: auto; background: var(--degrade); border-bottom-right-radius: 6px; }
.bulle-msg b { display: block; font-size: 10.5px; color: var(--rose-clair); }
.flottant { position: absolute; display: flex; align-items: center; gap: 9px; padding: 9px 14px 9px 9px; border-radius: 16px; background: rgba(28, 8, 50, 0.82); border: 1px solid var(--bord); box-shadow: 0 18px 40px rgba(8, 2, 18, 0.5); font-size: 13px; white-space: nowrap; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.f1 { left: -46px; top: 22%; animation: flotte 7s ease-in-out infinite 0.5s; }
.f2 { right: -40px; bottom: 18%; animation: flotte 8s ease-in-out infinite 1.2s; }
/* BANDEAU DÉFILANT */
.bandeau { overflow: hidden; border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); background: rgba(255, 255, 255, 0.03); padding: 18px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.bandeau-piste { display: flex; align-items: center; gap: 26px; width: max-content; animation: defile 38s linear infinite; }
.bandeau span { font-family: "Fraunces", Georgia, serif; font-size: 26px; font-weight: 600; color: var(--texte-2); }
.bandeau i { width: 8px; height: 8px; border-radius: 50%; background: var(--degrade); flex-shrink: 0; }
@keyframes defile { to { transform: translateX(-50%); } }
/* SECTIONS */
.section { padding-top: 110px; padding-bottom: 20px; }
.entete-section { max-width: 680px; margin: 0 0 42px; }
.entete-section h2 { font-size: clamp(34px, 5vw, 56px); }
.entete-section p:not(.surtitre) { color: var(--texte-2); font-size: 18px; margin: 16px 0 0; }
.etapes-comment { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: etape; }
.etapes-comment li { position: relative; padding: 28px 24px 26px; border-radius: 28px; background: var(--verre); border: 1px solid var(--bord); }
.numero { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 15px; background: var(--degrade); font-family: "Fraunces", Georgia, serif; font-size: 22px; font-weight: 700; box-shadow: 0 10px 26px rgba(236, 31, 156, 0.35); margin-bottom: 18px; }
.etapes-comment h3 { font-family: "Fraunces", Georgia, serif; font-size: 25px; margin: 0 0 8px; letter-spacing: -0.01em; }
.etapes-comment p { margin: 0; color: var(--texte-2); font-size: 15.5px; }
/* Grille « bento » */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tuile { position: relative; overflow: hidden; padding: 28px; border-radius: 28px; background: var(--verre); border: 1px solid var(--bord); min-height: 230px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; transition: transform 0.35s var(--ease), border-color 0.35s, background 0.35s; }
.tuile:hover { transform: translateY(-4px); border-color: rgba(255, 179, 230, 0.35); background: var(--verre-2); }
.tuile::before { content: ""; position: absolute; width: 260px; height: 260px; right: -90px; top: -110px; border-radius: 50%; background: radial-gradient(closest-side, rgba(236, 31, 156, 0.28), transparent); pointer-events: none; }
.tuile.large { grid-column: span 2; }
.tuile h3 { font-family: "Fraunces", Georgia, serif; font-size: 26px; margin: 0 0 10px; letter-spacing: -0.01em; }
.tuile p { margin: 0; color: var(--texte-2); font-size: 15.5px; max-width: 460px; }
.jauge { display: grid; gap: 12px; }
.jauge-ligne { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 14px; font-size: 13.5px; color: var(--texte-2); }
.jauge-barre { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.jauge-barre i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--c); box-shadow: 0 0 14px var(--c); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease); }
.visible .jauge-barre i { transform: scaleX(1); }
.visible .jauge-ligne:nth-child(2) i { transition-delay: 0.15s; } .visible .jauge-ligne:nth-child(3) i { transition-delay: 0.3s; } .visible .jauge-ligne:nth-child(4) i { transition-delay: 0.45s; }
.mini-carte { position: relative; height: 110px; border-radius: 18px; background: radial-gradient(120% 90% at 50% 40%, #2c1050, #150530); border: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; }
.mini-carte .e1 { left: 30%; top: 30%; } .mini-carte .e2 { left: 62%; top: 45%; } .mini-carte .e4 { left: 16%; top: 55%; } .mini-carte .p1 { left: 74%; top: 16%; }
.quiz { display: flex; flex-wrap: wrap; gap: 8px; }
.quiz span { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--bord); font-size: 13.5px; font-weight: 600; color: var(--texte-2); }
.quiz span.choisi { background: var(--degrade); border-color: transparent; color: #fff; animation: choisi 3.4s ease-in-out infinite; }
.quiz span.choisi:nth-child(4) { animation-delay: 1.7s; }
@keyframes choisi { 0%, 100% { transform: none; } 10% { transform: scale(1.08); } 20% { transform: none; } }
.frise { display: flex; align-items: center; gap: 0; }
.noeud { padding: 10px 18px; border-radius: 999px; background: var(--degrade); font-weight: 700; font-size: 14px; box-shadow: 0 8px 22px rgba(236, 31, 156, 0.32); }
.trait { flex: 1; height: 3px; margin: 0 8px; border-radius: 3px; background: linear-gradient(90deg, rgba(168, 85, 247, 0.9), rgba(236, 31, 156, 0.9)); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) 0.3s; }
.visible .trait { transform: scaleX(1); }
.visible .trait + .noeud + .trait { transition-delay: 0.8s; }
/* Chiffres */
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.chiffre { text-align: center; padding: 34px 20px; border-radius: 28px; background: var(--verre); border: 1px solid var(--bord); }
.chiffre b, .chiffre > span { font-family: "Fraunces", Georgia, serif; font-size: clamp(46px, 6vw, 72px); font-weight: 700; line-height: 1; background: linear-gradient(95deg, #d8b4fe, #ff7ccd); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chiffre p { margin: 10px 0 0; color: var(--texte-2); font-weight: 600; }
/* Villes */
.villes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ville-lien { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 24px; border-radius: 22px; background: var(--verre); border: 1px solid var(--bord); text-decoration: none; font-family: "Fraunces", Georgia, serif; font-size: 20px; font-weight: 700; transition: transform 0.3s var(--ease), background 0.3s, border-color 0.3s; }
.ville-lien span { color: var(--rose-clair); font-size: 26px; transition: transform 0.3s var(--ease); }
.ville-lien:hover { transform: translateY(-3px); background: var(--verre-2); border-color: rgba(255, 179, 230, 0.35); }
.ville-lien:hover span { transform: translateX(5px); }
/* Pros */
.pros { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; padding: 44px; border-radius: 32px; background: linear-gradient(135deg, rgba(91, 141, 238, 0.22), rgba(139, 92, 246, 0.2)); border: 1px solid rgba(140, 178, 255, 0.34); }
.pros h2 { font-size: clamp(32px, 4.4vw, 48px); }
.pros p { color: var(--texte-2); font-size: 17px; margin: 16px 0 26px; }
.pros .petit-texte { font-size: 13.5px; margin: 14px 0 0; color: var(--texte-3); }
.pros ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pros li { display: flex; gap: 12px; font-size: 16px; }
.pros li::before { content: ""; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: center / 13px no-repeat url("data:image/svg+xml;utf8,"), linear-gradient(135deg, #5b8dee, #8b5cf6); }
/* FAQ */
.faq details { border-radius: 22px; background: var(--verre); border: 1px solid var(--bord); margin-bottom: 12px; transition: background 0.3s; }
.faq details[open] { background: var(--verre-2); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 22px 24px; font-weight: 700; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: center / 14px no-repeat url("data:image/svg+xml;utf8,"), var(--degrade); transition: transform 0.35s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 24px 22px; color: var(--texte-2); }
/* Appel final */
.final { padding-top: 110px; padding-bottom: 60px; }
.final-carte { position: relative; overflow: hidden; text-align: center; padding: 70px 26px; border-radius: 36px; background: linear-gradient(135deg, rgba(168, 85, 247, 0.35), rgba(236, 31, 156, 0.32)); border: 1px solid rgba(255, 179, 230, 0.3); }
.final-carte::before { content: ""; position: absolute; inset: -50%; background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.12), transparent 30%); animation: tourne 12s linear infinite; }
.final-carte > * { position: relative; }
.final-carte h2 { font-size: clamp(36px, 6vw, 64px); }
.final-carte p { color: var(--texte-2); font-size: 18px; margin: 18px auto 30px; max-width: 520px; }
/* Pied de page */
.pied { padding-top: 30px; padding-bottom: 50px; color: var(--texte-3); font-size: 14px; border-top: 1px solid var(--bord); }
.pied-haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.pied nav { display: flex; flex-wrap: wrap; gap: 18px; }
.pied nav a { color: var(--texte-2); text-decoration: none; }
.pied nav a:hover { color: #fff; }
.pied p { margin: 6px 0 0; }
/* Téléphone / tablette */
@media (max-width: 960px) {
.accroche { grid-template-columns: 1fr; min-height: 0; padding-top: 24px; gap: 56px; }
.bento { grid-template-columns: 1fr 1fr; }
.tuile.large { grid-column: span 2; }
.etapes-comment { grid-template-columns: 1fr; }
.pros { grid-template-columns: 1fr; padding: 30px 24px; }
.barre nav .lien { display: none; }
.f1 { left: -8px; } .f2 { right: -8px; }
}
@media (max-width: 640px) {
.bento { grid-template-columns: 1fr; }
.tuile.large { grid-column: auto; }
.villes { grid-template-columns: 1fr; }
.chiffres { grid-template-columns: 1fr; }
.jauge-ligne { grid-template-columns: 1fr; gap: 6px; }
.section { padding-top: 80px; }
.o1, .o2 { display: none; }
.scene { width: 300px; }
.telephone { width: 280px; }
.ecran { height: 560px; }
.f1 { top: 8%; } .f2 { bottom: 6%; }
.bouton { height: 52px; padding: 0 22px; }
.actions .bouton { flex: 1 1 auto; }
}
/* Réduire les animations : tout s'affiche, rien ne bouge */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
.revele, .mot, .etape, .bulle-msg { opacity: 1 !important; transform: none !important; }
.jauge-barre i, .trait { transform: none !important; }
html { scroll-behavior: auto; }
}
/* v1027 — pages de ville (/sortir/{ville}/), générées au build avec ce même style */
.ville-accroche { padding-top: 60px; padding-bottom: 20px; }
.titre-ville { font-size: clamp(42px, 8vw, 84px); }
.ville-accroche .sous { max-width: 640px; }
.compteurs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.compteurs span { padding: 10px 16px; border-radius: 999px; background: var(--verre); border: 1px solid var(--bord); color: var(--texte-2); font-weight: 600; font-size: 14.5px; }
.compteurs b { font-family: "Fraunces", Georgia, serif; font-size: 20px; margin-right: 4px; background: linear-gradient(95deg, #d8b4fe, #ff7ccd); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-ville { padding-top: 80px; }
.grille-lieux { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lieu-carte { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 18px; border-radius: 24px; background: var(--verre); border: 1px solid var(--bord); text-decoration: none; transition: transform 0.3s var(--ease), background 0.3s, border-color 0.3s; }
.lieu-carte::before { content: ""; position: absolute; width: 200px; height: 200px; right: -80px; top: -90px; border-radius: 50%; background: radial-gradient(closest-side, rgba(236, 31, 156, 0.22), transparent); pointer-events: none; }
.lieu-carte:hover { transform: translateY(-4px); background: var(--verre-2); border-color: rgba(255, 179, 230, 0.35); }
.lieu-nom { font-family: "Fraunces", Georgia, serif; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.lieu-style { align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: rgba(236, 31, 156, 0.16); border: 1px solid rgba(255, 179, 230, 0.25); color: var(--rose-clair); font-size: 12.5px; font-weight: 600; }
.lieu-horaires { display: flex; align-items: flex-start; gap: 7px; color: var(--texte-2); font-size: 14px; }
.lieu-horaires svg { width: 15px; height: 15px; margin-top: 3px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lieu-voir { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; color: var(--rose-clair); font-weight: 700; font-size: 14px; }
.lieu-carte:hover .fleche { transform: translateX(4px); }
.grille-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.bar-carte { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-radius: 18px; background: rgba(62, 166, 255, 0.07); border: 1px solid rgba(62, 166, 255, 0.2); text-decoration: none; transition: background 0.25s, border-color 0.25s; }
.bar-carte:hover { background: rgba(62, 166, 255, 0.14); border-color: rgba(62, 166, 255, 0.4); }
.bar-carte .lieu-nom { font-size: 16px; }
.bar-carte .lieu-horaires { font-size: 12.5px; color: var(--texte-3); }
@media (max-width: 960px) { .grille-lieux { grid-template-columns: 1fr 1fr; } .grille-bars { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .grille-lieux { grid-template-columns: 1fr; } .grille-bars { grid-template-columns: 1fr 1fr; } .ville-accroche { padding-top: 30px; } .section-ville { padding-top: 64px; } }
/* v1028 — badge « Bientôt sur l'App Store et Google Play » : l'app va sur les stores ; le web n'est que l'attente.
Dessiné par nous (le logo et le badge officiels d'Apple sont réservés aux apps déjà publiées). */
.badge-store { display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 22px 0 16px; border-radius: 16px; background: #0b0214; border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; box-shadow: 0 12px 30px rgba(8, 2, 18, 0.45); }
.badge-store svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; flex-shrink: 0; }
.badge-store > span { display: flex; flex-direction: column; font-weight: 700; font-size: 15px; line-height: 1.15; }
.badge-store small { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.7); }
.badge-store.clair { background: rgba(11, 2, 20, 0.55); }
.actions.centre { justify-content: center; }
@media (max-width: 640px) { .badge-store { flex: 1 1 100%; justify-content: center; } }
/* v1029 — très petits téléphones (iPhone SE, 320 px) : le badge et le bouton dépassaient de quelques pixels. */
.accroche > * { min-width: 0; }
@media (max-width: 380px) {
.conteneur { padding: 0 16px; }
.actions .bouton, .badge-store { width: 100%; }
.badge-store { padding: 0 14px; gap: 10px; }
.badge-store > span { font-size: 14px; }
.bouton { padding: 0 16px; font-size: 15px; }
.titre-geant { font-size: 34px; }
.badge { font-size: 12.5px; }
.f1 { left: 0; } .f2 { right: 0; }
.flottant { font-size: 12px; padding: 7px 11px 7px 7px; }
}
/* v1031 — fiches publiques des lieux (/venue/…/) */
.fiche-accroche { padding-top: 34px; }
.fil { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; font-size: 13.5px; color: var(--texte-3); }
.fil a { color: var(--texte-2); text-decoration: none; }
.fil a:hover { color: #fff; }
.fiche-visuel { position: relative; overflow: hidden; height: 190px; border-radius: 28px; margin-bottom: 26px; background: #22083a; border: 1px solid var(--bord); }
.fiche-visuel .lumieres { inset: -30%; }
.fiche-type { position: absolute; left: 20px; bottom: 16px; padding: 7px 13px; border-radius: 999px; background: rgba(12, 3, 24, 0.55); border: 1px solid var(--bord); font-size: 13.5px; font-weight: 700; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.titre-fiche { font-size: clamp(40px, 7vw, 76px); margin-bottom: 14px; }
.fiche-puces { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.lieu-style.neutre { background: var(--verre); border-color: var(--bord); color: var(--texte-2); }
.fiche-infos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.info-carte { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 22px; background: var(--verre); border: 1px solid var(--bord); }
.info-carte .medaillon { width: 42px; height: 42px; border-radius: 13px; }
.info-carte .medaillon svg { width: 20px; height: 20px; }
.info-titre { margin: 0 0 3px; font-size: 13px; font-weight: 700; color: var(--rose-clair); }
.info-texte { margin: 0; font-size: 16px; color: var(--texte); text-decoration: none; line-height: 1.45; }
a.info-texte:hover { text-decoration: underline; }
@media (max-width: 640px) { .fiche-infos { grid-template-columns: 1fr; } .fiche-visuel { height: 140px; } }