/* vitrine.min.css — généré par assembler.py : NE PAS ÉDITER, modifier les sources. */ /* ---- prototype/src/styles/fonts.css ---- */ /* Polices auto-hébergées. Aucune requête tierce : le pied de page promet qu'aucune donnée n'est envoyée, et une requête vers fonts.gstatic.com ou api.fontshare.com transmet l'adresse IP du visiteur (LG München I, 20.01.2022, sur Google Fonts). Fichiers dans prototype/fonts/. Licences : Switzer — ITF Free Font License ; Anton et IBM Plex Mono — SIL Open Font License 1.1. Les trois autorisent l'auto-hébergement. Les sous-ensembles latin / latin-ext sont ceux servis par Google Fonts ; le navigateur ne charge que ceux dont la page a besoin. */ /* — Switzer (interface), fichiers Fontshare, latin — */ @font-face { font-family: 'Switzer'; font-style: normal; font-weight: 400; font-display: swap; src: url('../prototype/fonts/switzer-400.woff2') format('woff2'); } @font-face { font-family: 'Switzer'; font-style: normal; font-weight: 500; font-display: swap; src: url('../prototype/fonts/switzer-500.woff2') format('woff2'); } @font-face { font-family: 'Switzer'; font-style: normal; font-weight: 600; font-display: swap; src: url('../prototype/fonts/switzer-600.woff2') format('woff2'); } @font-face { font-family: 'Switzer'; font-style: normal; font-weight: 700; font-display: swap; src: url('../prototype/fonts/switzer-700.woff2') format('woff2'); } /* — Anton (display) — */ @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('../prototype/fonts/anton-400-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: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('../prototype/fonts/anton-400.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; } /* — IBM Plex Mono (zone lisible en machine, légendes) — */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../prototype/fonts/plexmono-400-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: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../prototype/fonts/plexmono-400.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: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../prototype/fonts/plexmono-500-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: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../prototype/fonts/plexmono-500.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; } /* ---- prototype/src/styles/tokens.css ---- */ /* Jetons repris de la charte Junior, sans écart. Les dix teintes de volée ne sont PAS ici : elles sont posées par src/core/volees.js, qui en est la source unique. */ :root { /* substrats — jamais de noir pur, jamais de blanc pur */ --s0: #0b0b0c; --s1: #141416; --s2: #1c1c1f; --s3: #232327; --s4: #2e2e34; /* encres */ --ink: #edede7; --ink-2: #a3a39c; /* #6c6c67 dans la charte : 3,73:1 sur --s1, sous le seuil AA (4,5:1) pour du corps de texte. Porté à #868680 : 5,02 sur --s1, 4,64 sur --s2, même gris tiède. Écart à la charte assumé et mesuré — à reporter dans charte.html. */ --ink-3: #868680; /* Le même gris tiède, mais pour l'écran clair du commerçant (fond --ink). #6c6c67 y donnait 4,49:1, sous le seuil de 0,01 ; #63635e donne 5,14. */ --ink-3-clair: #63635e; --rule: #26262b; /* Une seule couleur d'accent dans l'interface, et elle est empruntée à la volée affichée. Aucun accent propre au produit : la couleur appartient au membre. Posée par le JS, valeur de départ ici pour éviter un flash. */ --acc: #a87cff; /* Direction « Volée » (30.09.2026) : l'interface s'arrondit. Exception aux 2 px du studio, validée par Max pour Junior seulement. La licence garde ses 6 px : c'est un document, pas un composant. */ --r: 12px; /* tout l'interface */ --r-doc: 6px; /* la licence seule — comme une vraie carte */ --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --t-ecran: 160ms; /* transition d'écran : un fondu, rien d'autre */ --ui: 'Switzer', -apple-system, BlinkMacSystemFont, sans-serif; --mrz: 'IBM Plex Mono', ui-monospace, monospace; --display: 'Anton', var(--ui); --gut: clamp(20px, 4.4vw, 72px); --tel: 390px; /* largeur de référence de l'écran membre */ } /* ---- prototype/src/styles/licence.css ---- */ /* LE DOCUMENT. Repris de la charte sans écart de grammaire, avec trois corrections. 1. La charte dimensionne l'année en `clamp(56px, 20%, 96px)`. En CSS, un pourcentage de `font-size` se résout sur le corps du PARENT, pas sur la largeur : 20 % de 15px font 3px, le clamp retombe sur son plancher, et l'année est figée à 56px quelle que soit la taille de la carte. La borne haute n'a jamais servi. Ici on mesure en `cqw` — pour cent de la largeur du conteneur — ce qui est l'outil juste et rend l'échelle réellement fluide. 2. L'année est plus grande que dans la charte. C'est elle qui déclenche la conversation au comptoir, donc elle doit être lisible à un mètre, de travers, dans la main de quelqu'un d'autre. 3. La MRZ fait ses trois lignes de trente signes, bord à bord, sur sa propre zone. Une MRZ qui ne remplit pas la largeur n'est pas une MRZ, c'est une légende. */ /* Le conteneur de mesure est le CADRE, pas le document : `container-type` impose un confinement de mise en page, et on ne veut pas l'imposer à la carte qui porte les calques en position absolue. */ .scene3d { perspective: 1500px; perspective-origin: 50% 42%; container-type: inline-size; } .lic { --vol: var(--acc); position: relative; width: 100%; aspect-ratio: 1 / 1.54; border-radius: var(--r-doc); overflow: hidden; background: linear-gradient(168deg, var(--s3), var(--s1) 55%, #08080a); border: 1px solid #33333a; will-change: transform; /* `pan-y` et non `none` : sans cette ligne, un doigt qui glisse sur la carte est interprété par le navigateur comme un défilement, il envoie un `pointercancel` et la carte cesse de recevoir les mouvements — le repli au doigt ne peut alors PAS fonctionner sur téléphone, ce qui est exactement ce qu'on a observé. On réclame donc l'axe horizontal pour la carte et on laisse l'axe vertical à la page : glisser de côté révèle, glisser vers le bas défile. `none` aurait piégé le doigt et empêché de quitter la section. */ touch-action: pan-y; /* Sans ceci, un doigt maintenu sur la MRZ déclenche la loupe de sélection d'iOS et la poignée bleue par-dessus le document : le geste est perdu et l'illusion de l'objet avec. La MRZ reste sélectionnable là où on en a réellement besoin, dans le banc d'essai, qui l'affiche en clair. */ -webkit-user-select: none; user-select: none; display: flex; flex-direction: column; justify-content: space-between; padding: 4.9cqw; box-shadow: 0 34px 70px -28px #000c, 0 2px 0 #ffffff0a inset; transition: box-shadow .5s var(--ease), filter .7s var(--ease); } .lic > * { position: relative; z-index: 4; } /* Au repos la licence est GRISE. La teinte de volée n'apparaît qu'à la révélation — inclinaison, scan, plein écran. La couleur n'est pas un fond, c'est un événement : on ne la voit qu'en manipulant l'objet, donc on le manipule, donc on le montre. (Principe des passeports norvégiens de Neue.) */ .lic svg.g { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: .5; color: #55555c; transition: color .75s var(--ease), opacity .75s var(--ease); } .lic .yr, .lic .stamp { transition: color .75s var(--ease); } .lic .yr { color: var(--ink); } .lic .stamp { color: var(--ink-3); } .lic.rev svg.g { color: var(--vol); opacity: .66; } .lic.rev .yr, .lic.rev .stamp { color: var(--vol); } /* Mode gyroscope : la carte s'allume et RETOMBE EN GRIS quasi instantanément (le pointeur desktop et la révélation de volée gardent leurs fondus lents). */ .lic.vivgyro .holo { transition: opacity .13s var(--ease); } .lic.vivgyro .glare { transition: opacity .11s var(--ease); } .lic.vivgyro .yr, .lic.vivgyro .stamp { transition: color .15s var(--ease); } .lic.vivgyro svg.g { transition: color .15s var(--ease), opacity .15s var(--ease); } /* Feuille holographique — une BANDE, pas un vernis sur toute la carte. Un foil qui couvre tout le document le repeint en aplat et lui fait perdre sa nature de papier ; en bande il reste une pièce rapportée, comme sur un billet. La bande est à droite : l'année, le numéro et la MRZ gardent le fond sombre et restent lisibles, et c'est le tracé qui passe dessous — la grammaire exacte d'un billet. Le poinçon perce la bande. Le spectre est construit sur la teinte de volée et ses deux voisines à deux rangs (--h1/--h2/--h3, posées par le JS depuis spectre()). */ .lic .holo { position: absolute; right: 0; top: 0; bottom: 0; width: 27%; z-index: 2; pointer-events: none; mix-blend-mode: screen; opacity: .17; background: linear-gradient(196deg, transparent 30%, #ffffff5e 46%, #ffffff12 54%, transparent 70%), repeating-linear-gradient(104deg, transparent 0 1.9%, #ffffff3d 2.25%, transparent 2.8%), conic-gradient(from 195deg at 44% 36%, var(--h1, #3cd6ff), var(--h2, #a87cff) 118deg, var(--h3, #ff7ce0) 236deg, var(--h1, #3cd6ff) 360deg); background-size: 180% 260%, 240% 240%, 200% 200%; border-left: 1px solid #ffffff14; transition: opacity .55s var(--ease); } /* Le reflet : une tache de lumière qui suit la main. En `soft-light` elle éclaircit sans laver, donc le document garde sa matière. */ .lic .glare { position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: soft-light; opacity: 0; background: radial-gradient(34% 30% at var(--gx, 50%) var(--gy, 42%), #fff 0%, #ffffff40 32%, transparent 66%); transition: opacity .45s var(--ease); } /* ---------- en-tête du document ---------- */ .lic .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 3cqw; } .lic .wm { font-family: var(--display); font-size: 5cqw; letter-spacing: .04em; line-height: 1; } .lic .wm i { font-style: normal; color: var(--ink-3); } .lic .stamp { font-family: var(--mrz); font-size: 2.4cqw; letter-spacing: .11em; border: 1px solid currentColor; border-radius: var(--r); padding: 1.6cqw 2.2cqw; transform: rotate(-4.5deg); text-align: center; line-height: 1.35; opacity: .92; flex: none; } /* ---------- le héros : l'année ---------- */ /* Le masque de révélation doit laisser passer les jambages. Sans le couple padding-bottom / margin-bottom négatif, un `j` ou un `g` se fait couper au ras — et sur un chiffre, c'est la panse du 3 et du 9 qui saute. */ .lic .yr-mask { overflow: hidden; padding-bottom: .18em; margin-bottom: -.18em; } .lic .yr { font-family: var(--display); /* 39cqw cale les quatre chiffres à ~88 % de la largeur utile. Le corps ne se devine pas : Anton est une étroite, donc une valeur qui « a l'air grande » laisse un tiers de la ligne vide. `tabular-nums` garantit que toutes les volées font la même largeur, donc le réglage vaut pour les dix. */ font-size: 39cqw; line-height: .78; letter-spacing: .005em; font-variant-numeric: tabular-nums; } /* Le numéro à palettes : chaque chiffre est une colonne qui défile et s'arrête. La bande porte DEUX cycles de 0 à 9, pas un seul : avec un cycle unique, la colonne doit dépasser le dernier chiffre puis revenir en place d'un coup, et on voit un blanc juste avant l'arrivée. Avec deux cycles elle atterrit sur le bon chiffre du second tour, sans saut et sans trou. */ .lic .flap { display: inline-flex; gap: .02em; font-family: var(--display); font-size: 7.6cqw; line-height: 1; letter-spacing: .06em; color: var(--ink); margin-top: 2.6cqw; } .lic .flap .col { position: relative; height: 1em; overflow: hidden; width: .62em; } .lic .flap .col u { position: absolute; left: 0; top: 0; text-decoration: none; display: block; } .lic .flap .col u b { display: block; height: 1em; font-weight: 400; text-align: center; } .lic .sec { font-family: var(--mrz); font-size: 2.85cqw; letter-spacing: .15em; color: var(--ink-2); margin-top: 2.4cqw; } /* ---------- la zone lisible en machine ---------- */ /* Sur un vrai document la MRZ est posée sur sa propre plage, détachée du champ graphique : c'est une zone de lecture, pas une légende. Ici c'est un fond plus sombre et un filet, et la bande holographique ne la couvre pas. */ .lic .mrz { margin: 0 -4.9cqw -4.9cqw; padding: 3.2cqw 4.9cqw 3.6cqw; background: #07070880; border-top: 1px solid #ffffff10; z-index: 5; } .lic .mrz span { display: block; font-family: var(--mrz); font-weight: 400; /* 4,5cqw met les trente signes à ~96 % de la zone : bord à bord, ce qui est la seule proportion juste pour une MRZ, avec la marge qu'exige `white-space:pre` sous le `overflow:hidden` de la carte. */ font-size: 4.5cqw; letter-spacing: .035em; line-height: 1.34; color: var(--ink-2); white-space: pre; font-variant-ligatures: none; } .lic .mrz span + span { color: var(--ink-3); } /* ---------- le poinçon et les encoches ---------- */ /* Le poinçon est une découpe réelle : on voit le fond à travers, donc il est plus sombre que n'importe quelle valeur de la carte, avec une ombre portée INTÉRIEURE qui donne l'épaisseur du support. */ .lic .punch { position: absolute; z-index: 6; width: 4.6cqw; height: 4.6cqw; border-radius: 50%; background: #040405; box-shadow: inset 0 2px 3px #000, 0 0 0 1px #3a3a42; right: 12%; top: 63%; } /* Une encoche par saison renouvelée, empilée sur le flanc droit. C'est le seul compteur du document : on ne lit pas une date d'entrée, on compte des crans. */ /* Une encoche est une DÉCOUPE : sans arête claire sur son bord gauche, elle est du noir sur du noir et le compteur de saisons devient invisible — le défaut exact qu'on avait au premier rendu. */ .lic .notch { position: absolute; z-index: 6; right: -1px; width: 2.2cqw; height: 4.6cqw; border-radius: 3px 0 0 3px; background: var(--s0); box-shadow: inset 2px 0 3px #000, -1px 0 0 #ffffff2e; } /* ---------- la licence échue ---------- */ /* À vingt-six ans elle est perforée EN TRAVERS, définitivement. La perforation passe par-dessus tout, y compris la MRZ : un document annulé reste lisible à l'œil mais ne peut plus être présenté comme valide. Le gris n'est pas un effet, c'est l'état : la teinte de volée ne revient plus. */ .lic.perf { filter: saturate(.12) brightness(.86); } .lic.perf .holo { opacity: .05 !important; } .lic.perf::after { content: ''; position: absolute; z-index: 7; left: -12%; right: -12%; top: 46%; height: 4.4cqw; transform: rotate(-19deg); background: radial-gradient(circle at 50% 50%, #040405 0 38%, transparent 40%) 0 50% / 8.6cqw 100% repeat-x; filter: drop-shadow(0 1px 0 #3a3a42); } /* ---------- phases de la délivrance ---------- */ /* La séquence ne cache rien par du JavaScript : chaque phase est un état CSS, donc l'écran est toujours cohérent, y compris si on le photographie au milieu, et il reste correct sans JS une fois la classe finale posée. */ .lic[data-phase] .yr, .lic[data-phase] .flap, .lic[data-phase] .sec, .lic[data-phase] .stamp, .lic[data-phase] .mrz, .lic[data-phase] .punch, .lic[data-phase] .notch { visibility: hidden; } .lic[data-phase='trace'] .stamp, .lic[data-phase='mrz'] .stamp, .lic[data-phase='annee'] .stamp, .lic[data-phase='poincon'] .stamp, .lic[data-phase='fini'] .stamp { visibility: visible; } .lic[data-phase='mrz'] .mrz, .lic[data-phase='annee'] .mrz, .lic[data-phase='poincon'] .mrz, .lic[data-phase='fini'] .mrz { visibility: visible; } .lic[data-phase='annee'] .yr, .lic[data-phase='annee'] .flap, .lic[data-phase='annee'] .sec, .lic[data-phase='poincon'] .yr, .lic[data-phase='poincon'] .flap, .lic[data-phase='poincon'] .sec, .lic[data-phase='fini'] .yr, .lic[data-phase='fini'] .flap, .lic[data-phase='fini'] .sec { visibility: visible; } .lic[data-phase='poincon'] .punch, .lic[data-phase='poincon'] .notch, .lic[data-phase='fini'] .punch, .lic[data-phase='fini'] .notch { visibility: visible; } /* ---- prototype/src/styles/volee.css ---- */ /* LA DIRECTION « VOLÉE » — validée le 30.09.2026. Source unique de la DA pour la page enseigne et le prototype. Elle s'ajoute APRÈS tokens.css et fonts.css, et ne touche pas à la licence (licence.css), qui garde sa propre grammaire de document. Le principe : la couleur sort de la licence. Le fond est sombre, et la seule lumière de la page vient des trois teintes du spectre de la volée affichée — celle du visiteur, tirée à chaque visite. Aucune couleur n'est propre à la marque ; elle appartient toujours au membre. Deux exceptions aux règles du studio, validées par Max pour Junior seulement : les surfaces et les boutons s'arrondissent, et le titre porte un effet signature qui anime `background-position` (le reflet de la bande irisée). Garde-fou : le champ de lumière vient TOUJOURS de `--s-1/2/3`, posées par le script depuis `spectre()`. Un dégradé fixe ferait retomber la page dans le registre des sites générés. */ :root { --v-bg: #16171c; /* sombre doux (défaut 13.10, décision Max) : anthracite chaud, plus le quasi-noir */ --v-fg: #f4f4ef; --v-fg2: #c0c0ba; --v-fg3: #96968f; --v-line: #ffffff1f; --v-surf: #1f2027; --v-surf2: #272932; --v-surf-line: #ffffff17; /* Rayons pris dans l'échelle de Material 3 Expressive (12 · 20 · 28 · plein) : trois valeurs, pas une par composant. https://github.com/androidx/androidx/blob/androidx-main/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/tokens/ShapeTokens.kt */ --v-rad: 28px; --v-rad-s: 20px; --v-pill: 999px; --v-ease: cubic-bezier(.22, 1, .36, 1); --v-gut: clamp(20px, 5vw, 72px); --v-max: 1240px; /* Valeurs de repli avant que le script ne pose le spectre. */ --s-1: #3cd6ff; --s-2: #a87cff; --s-3: #ff7ce0; } /* ---------- états de départ du mouvement ---------- Conditionnés à `.js`, posée par le script : si le script tombe, tout reste visible au lieu de disparaître. */ .js [data-reveal] { opacity: 0; } .js [data-split] { visibility: hidden; animation: titreVisible 0s 2.5s forwards; } /* réapparaît quand même après 2,5 s si le script tarde */ @keyframes titreVisible { to { visibility: visible; } } /* Le masque de SplitText rogne les accents et les jambages : on agrandit la zone visible et on annule l'effet sur la mise en page. */ .ln-mask { padding-top: .18em; margin-top: -.18em; padding-bottom: .12em; margin-bottom: -.12em; } html.lenis, html.lenis body { height: auto; } /* WCAG 2.2, critère 2.4.11 : un élément qui reçoit le focus ne doit pas passer sous la barre fixe. https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum */ html { scroll-padding-top: 96px; } .lenis.lenis-smooth { scroll-behavior: auto !important; } /* ---------- le champ de lumière ---------- */ .champ { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .champ--fondu { z-index: 0; } /* Chaque tache est un disque aux bords fondus. Jusqu'au 12.10 c'était un disque plein avec `filter: blur(90px)` : la carte graphique refloutait ces disques de 820 px à CHAQUE image pendant qu'ils glissaient au défilement — mesuré : plus de 5 s de tâches GPU sur 25 s de défilement de l'accueil, des images à 1,8 s. Le même rendu s'obtient avec un dégradé radial qui suit la courbe d'un flou gaussien (sigma 90 px sur un rayon de 410 px) : dessiné UNE fois, puis seulement déplacé. La couleur voyage par `color` (currentColor), lue par changerSpectre(). Le dégradé reste DANS la boîte : une boîte plus grande (essayée à +27 %) multiplie la mémoire graphique des couches et fait saccader plus que le flou d'origine. Deuxième économie : la boîte fait UN TIERS de la taille visible et `transform: scale(3)` l'agrandit. Avec `will-change: transform`, Chrome rastérise la couche à sa taille de boîte et laisse la carte graphique l'agrandir : neuf fois moins de pixels en mémoire par tache (13 Mo au lieu de 117 Mo pour les neuf taches de l'accueil en 1440 × 2), et un dégradé agrandi reste un dégradé. Safari rastérise à l'échelle finale : même rendu, sans l'économie. Les décalages ajoutent d/3 pour garder le même centre visuel ; le mouvement (mouvement.js, champ()) se calcule sur la taille VISIBLE. */ .champ i { --d: min(68vw, 900px); position: absolute; width: calc(var(--d) / 3); aspect-ratio: 1; opacity: .42; transform: scale(3); will-change: transform; } .champ i::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle closest-side, currentColor 22%, color-mix(in srgb, currentColor 78%, transparent) 42%, color-mix(in srgb, currentColor 42%, transparent) 62%, color-mix(in srgb, currentColor 12%, transparent) 82%, transparent 100%); } .champ i:nth-child(1) { color: var(--s-1); left: calc(-18% + var(--d) / 3); top: calc(-14% + var(--d) / 3); } .champ i:nth-child(2) { color: var(--s-2); right: calc(-20% + var(--d) / 3); top: calc(6% + var(--d) / 3); opacity: .5; } .champ i:nth-child(3) { color: var(--s-3); left: calc(22% + var(--d) / 3); top: calc(44% + var(--d) / 3); opacity: .34; } /* Le voile : le champ éclaire, il ne recouvre pas. Le texte reste sur du presque-noir, donc lisible quelle que soit la volée. */ .champ::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 55% at 50% 38%, #0b0b0c5c 0%, #0b0b0cd0 70%, #0b0b0c 100%); } /* ---------- le titre qui emprunte la licence ---------- La typo de l'année (Anton, capitales) et, sur la ligne marquée `.holo-t`, la bande irisée : les trois teintes du spectre, les fines rayures, un reflet qui glisse quand on fait défiler (variable `--hx`, posée par le script). */ .titre-carte { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .005em; line-height: 1.12; } /* Les capitales accentuées d'Anton montent haut (Ô, É, À) : on laisse la place dans le masque pour ne pas les rogner, sans re-serrer les lignes entre elles. */ .titre-carte .ln-mask { padding-top: .2em; margin-top: -.06em; } .holo-t { background: linear-gradient(104deg, transparent 38%, #ffffff8c 48%, transparent 58%), repeating-linear-gradient(104deg, #ffffff00 0 .09em, #ffffff38 .1em, #ffffff00 .13em), linear-gradient(96deg, var(--s-1), var(--s-2) 34%, var(--s-3) 66%, var(--s-2) 84%, var(--s-1)); background-size: 260% 100%, 100% 100%, 180% 100%; background-position: calc(var(--hx, 0%) + var(--mx, 0%)) 50%, 0 0, calc((var(--hx, 0%) + var(--mx, 0%)) * .6) 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Les coupes se composent : une `br.m` n'existe qu'en téléphone. */ br.m { display: none; } @media (max-width: 560px) { br.m { display: inline; } } /* ---------- boutons ---------- */ /* Un seul bouton plein par écran. Pilule claire, halo de la volée. */ .btn-plein { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 0; border-radius: var(--v-pill); background: var(--v-fg); color: var(--v-bg); font: 600 15px/1 var(--ui); letter-spacing: -.01em; text-decoration: none; cursor: pointer; box-shadow: 0 10px 40px -10px var(--acc); /* Retour d'interaction sous 300 ms (NN/g, « Animation duration »). */ transition: transform .28s var(--v-ease), box-shadow .28s var(--v-ease); } .btn-plein:hover { transform: translateY(-2px); box-shadow: 0 16px 50px -8px var(--acc); } .btn-plein:active { transform: translateY(0) scale(.97); } .btn-plein:focus-visible { outline: 2px solid var(--v-fg); outline-offset: 4px; } .btn-plein .fl { transition: transform .45s var(--v-ease); } .btn-plein:hover .fl { transform: translateX(4px); } /* Le lien secondaire : un filet qui se retire au survol, jamais un second bouton. */ .btn-lien { display: inline-flex; align-items: center; min-height: 44px; color: var(--v-fg); font: 500 15px/1 var(--ui); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(50% + .8em) / 100% 1px no-repeat; transition: background-size .45s var(--v-ease); } .btn-lien:hover { background-size: 0 1px; background-position: 100% calc(50% + .8em); } .btn-lien:focus-visible { outline: 2px solid var(--v-fg); outline-offset: 4px; border-radius: 4px; } /* ---------- pastille et surface ---------- */ .pastille { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--v-pill); background: #ffffff12; border: 1px solid #ffffff1a; color: var(--v-fg); font: 500 14px/1.2 var(--ui); } .pastille::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 12px var(--acc); } .surface { border-radius: var(--v-rad); background: var(--v-surf); border: 1px solid var(--v-surf-line); } /* ---------- la barre : une pilule flottante, commune aux pages ---------- */ .barre { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 50%; z-index: 50; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; width: min(calc(100% - 24px), 880px); padding: 6px 6px 6px 20px; border-radius: var(--v-pill); background: #141417c7; -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); border: 1px solid #ffffff14; } .barre__m { font-family: var(--display); font-size: 17px; letter-spacing: .05em; text-decoration: none; color: var(--v-fg); white-space: nowrap; } .barre__m i { font-style: normal; color: var(--v-fg3); } .barre__t { color: var(--v-fg3); font-size: 14px; } .barre__cta { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--v-pill); background: var(--v-fg); color: var(--v-bg); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: transform .4s var(--v-ease); } .barre__cta:hover { transform: scale(1.03); } .barre__cta:focus-visible, .barre__m:focus-visible { outline: 2px solid var(--v-fg); outline-offset: 3px; border-radius: var(--v-pill); } @media (max-width: 480px) { .barre__t { display: none; } } /* ---------- transition entre les pages ---------- Les pages qui chargent volee.css (enseigne, prototype, licence, pistes) se succèdent par un fondu : l'ancienne recule à peine, la nouvelle monte de 24 px. Navigateurs sans View Transitions : navigation normale, sans perte. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: .32s var(--v-ease) both vt-sortie; } ::view-transition-new(root) { animation: .55s var(--v-ease) both vt-entree; } @keyframes vt-sortie { to { opacity: 0; transform: scale(.985); } } @keyframes vt-entree { from { opacity: 0; transform: translateY(24px); } } /* Contraste renforcé demandé : la barre perd sa transparence. Safari ne gère pas `prefers-reduced-transparency`, d'où une barre déjà assez opaque par défaut. https://github.com/mdn/browser-compat-data/blob/main/css/at-rules/media.json */ @media (prefers-contrast: more) { .barre { background: #141417; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: #ffffff40; } .champ { opacity: .5; } } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } .btn-plein, .btn-plein .fl, .btn-lien { transition: none; } } /* ---------- la navigation commune (posée par ui/nav.js) ---------- */ .barre__nav { display: flex; gap: 4px; margin: 0 auto 0 20px; } .barre__nav a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: var(--v-pill); font-size: 14px; color: var(--v-fg3); white-space: nowrap; text-decoration: none; transition: color .25s ease, background-color .25s ease; } .barre__nav a:hover { color: var(--v-fg); background: #ffffff10; } .barre__nav a[aria-current='page'] { color: var(--v-fg); background: #ffffff16; } .barre__nav a:focus-visible { outline: 2px solid var(--v-fg); outline-offset: 2px; } /* Burger (menu mobile) */ .barre__burger { display: none; flex: none; width: 38px; height: 38px; border: 0; background: none; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; -webkit-tap-highlight-color: transparent; } .barre__burger span { display: block; width: 22px; height: 2px; background: var(--v-fg); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; } .barre--open .barre__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .barre--open .barre__burger span:nth-child(2) { opacity: 0; } .barre--open .barre__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 780px) { .barre { gap: 10px; } .barre__burger { display: flex; } .barre__cta { margin-left: auto; } .barre__nav { position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0; flex-direction: column; gap: 2px; padding: 8px; display: none; background: #141417f2; -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); border: 1px solid #ffffff14; border-radius: 18px; box-shadow: 0 22px 50px -20px #000d; } .barre--open .barre__nav { display: flex; } .barre__nav a { padding: 13px 14px; font-size: 16px; border-radius: 12px; } } @media (max-width: 560px) { .barre__cta-long { display: none; } } /* ---- vitrine/vitrine.css ---- */ /* LA VITRINE JUNIOR — composition des quatre pages (accueil, offres, enseignes, licence). Les jetons, la barre, les boutons, le titre irisé et le champ de lumière viennent de prototype/src/styles/volee.css ; la licence de licence.css. Les cartes d'offres (.tcard, .treco, .tcomp, .adeal, .aflash, .accHeure, .ens__logo) sont REPRISES de app/app.css, pour que la démo montre exactement ce que l'app montre. Quand l'app change, on reporte ici. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 132px; } body { background: var(--v-bg); color: var(--v-fg); font-family: var(--ui); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; } button { font: inherit; color: inherit; } svg { display: block; } .opt { font-weight: 400; color: var(--v-fg3); } .evitement { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--v-pill); background: var(--v-fg); color: var(--v-bg); font-weight: 600; text-decoration: none; } .evitement:focus { top: 12px; } .enveloppe { max-width: var(--v-max); margin: 0 auto; padding: 0 var(--v-gut); } .h2 { font-size: clamp(32px, 4.6vw, 64px); font-weight: 600; letter-spacing: -.045em; line-height: 1.06; } .h2.titre-carte { font-weight: 400; letter-spacing: .005em; line-height: 1.06; font-size: clamp(38px, 5vw, 76px); } .lede { color: var(--v-fg2); font-size: clamp(16.5px, 1.35vw, 19px); line-height: 1.6; max-width: 52ch; } .lede b { color: var(--v-fg); font-weight: 500; } .kicker { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--v-fg3); margin-bottom: 12px; } /* ---------- l'annonce, au-dessus de la barre ---------- */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 51; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0 16px; background: var(--acc); color: var(--v-bg); font-size: 13px; font-weight: 600; transition: background-color 1s var(--v-ease); } .topbar p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* La barre de la démo porte six liens, le sélecteur de langue et le bouton : un peu plus large que la pilule commune (880 px), sinon le bouton déborde. */ .barre { top: 48px; width: min(calc(100% - 24px), 1000px); } .barre__nav a i { font-style: normal; font-size: 12px; margin-left: 2px; } /* ---------- le menu « Offres » par rubrique (dropdown dans la barre) ---------- Le bouton se fond dans la barre (mêmes règles que .barre__nav a) ; le panneau est opaque (pas de backdrop-filter : il s'anime en opacity + transform). Sur petit écran, il se range dans le menu burger, en liste repliable. */ .barre__drop { position: relative; display: flex; } .barre__dropb { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 12px; border: 0; background: none; border-radius: var(--v-pill); font: 400 14px/1 var(--ui); color: var(--v-fg3); white-space: nowrap; cursor: pointer; transition: color .25s ease, background-color .25s ease; } .barre__dropb::after { content: '▾'; font-size: 10px; line-height: 1; color: inherit; transition: transform .25s ease; } .barre__dropb:hover, .barre__drop:hover .barre__dropb, .barre__drop:focus-within .barre__dropb { color: var(--v-fg); background: #ffffff10; } .barre__dropb--on { color: var(--v-fg); background: #ffffff16; } .barre__dropb:focus-visible { outline: 2px solid var(--v-fg); outline-offset: 2px; } .barre__drop.ouvert .barre__dropb::after { transform: rotate(180deg); } .barre__menu { position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: max-content; min-width: 264px; padding: 8px; background: #15161b; border: 1px solid #ffffff1f; border-radius: 16px; box-shadow: 0 22px 50px -20px #000d; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .barre__drop:hover .barre__menu, .barre__drop:focus-within .barre__menu, .barre__drop.ouvert .barre__menu { opacity: 1; transform: none; pointer-events: auto; } .barre__menu a { display: flex; align-items: center; min-height: 38px; padding: 0 12px; border-radius: 10px; font-size: 13.5px; color: var(--v-fg2); text-decoration: none; white-space: nowrap; transition: color .2s ease, background-color .2s ease; } .barre__menu a:hover { color: var(--v-fg); background: #ffffff10; } .barre__menu a:focus-visible { outline: 2px solid var(--v-fg); outline-offset: -2px; } .barre__menuTout { grid-column: 1 / -1; color: var(--v-fg); font-weight: 600; border-bottom: 1px solid var(--v-line); border-radius: 10px 10px 0 0; margin-bottom: 2px; } @media (prefers-reduced-motion: reduce) { .barre__menu { transition: none; } } @media (max-width: 780px) { /* dans le menu burger : la liste se range sous le bouton, sans positionnement absolu */ .barre__drop { flex-direction: column; align-items: stretch; } .barre__dropb { justify-content: space-between; padding: 13px 14px; font-size: 16px; border-radius: 12px; } .barre__menu { position: static; width: auto; min-width: 0; margin: 2px 0 4px; padding: 6px; background: #ffffff08; border: 0; box-shadow: none; opacity: 1; transform: none; pointer-events: auto; display: none; } .barre__drop:hover .barre__menu, .barre__drop:focus-within .barre__menu { display: none; } .barre__drop.ouvert .barre__menu { display: grid; } .barre__menu a { font-size: 14.5px; min-height: 40px; } } /* ---------- le sélecteur de langue, dans la barre, avant le bouton ---------- Des pilules sobres, à la manière des liens de la barre : gris (--v-fg3) au repos, blanc (--v-fg) pour la langue en cours. Pas de couleur de volée ici, la barre reste neutre. */ .barre__lang { flex: none; display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--v-pill); border: 1px solid var(--v-line); background: #ffffff08; } .barre__lang button { min-height: 30px; padding: 0 8px; border: 0; border-radius: var(--v-pill); background: transparent; color: var(--v-fg3); font: 600 11.5px/1 var(--ui); letter-spacing: .04em; cursor: pointer; transition: color .25s ease, background-color .25s ease; } .barre__lang button:hover { color: var(--v-fg); background: #ffffff10; } .barre__lang button[aria-pressed="true"] { color: var(--v-fg); background: #ffffff16; } .barre__lang button:focus-visible { outline: 2px solid var(--v-fg); outline-offset: 2px; } @media (max-width: 780px) { /* en mode burger, le sélecteur se range à droite, contre le bouton */ .barre__lang { margin-left: auto; } .barre__cta { margin-left: 0; } } @media (max-width: 480px) { .barre__lang { gap: 0; padding: 2px; } .barre__lang button { min-height: 28px; padding: 0 6px; font-size: 11px; letter-spacing: .02em; } } /* ---------- le hero ---------- */ .hero { position: relative; overflow: hidden; padding: clamp(150px, 15vw, 190px) 0 clamp(40px, 6vw, 80px); } .hero__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 64px); align-items: center; } .hero__h { font-size: clamp(42px, 5.3vw, 80px); margin-top: 22px; } .hero__lede { margin-top: 24px; max-width: 50ch; } .cherche { display: flex; gap: 8px; margin-top: 28px; padding: 6px; border-radius: var(--v-pill); background: #ffffff0a; border: 1px solid #ffffff1f; max-width: 560px; } .cherche input { flex: 1; min-width: 0; min-height: 48px; padding: 0 16px; background: transparent; border: 0; color: var(--v-fg); font: 500 15.5px/1.2 var(--ui); } .cherche input::placeholder { color: var(--v-fg3); } .cherche input:focus { outline: none; } .cherche input::-webkit-search-cancel-button { -webkit-appearance: none; } .cherche .btn-plein { min-height: 48px; padding: 0 22px; flex: none; } .cherche:focus-within { border-color: color-mix(in srgb, var(--acc) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 18%, transparent); } .hero__leg { margin-top: 16px; font-size: 13px; color: var(--v-fg3); max-width: 52ch; } /* le téléphone */ /* Le bloc fait la largeur du téléphone : les cartes flottantes se placent par rapport à lui, et débordent sur ses flancs comme sur la référence. */ .hero__tel { position: relative; width: fit-content; margin: 0 auto; padding: 24px 0; } .tel { position: relative; width: min(330px, 84vw); aspect-ratio: 9 / 18.6; border-radius: 44px; background: #0b0b0c; border: 1px solid #ffffff26; padding: 18px 14px; overflow: hidden; color: var(--v-fg); font-size: 14px; line-height: 1.4; box-shadow: 0 0 0 8px #141417, 0 0 0 9px #ffffff14, 0 60px 110px -40px #000, 0 40px 90px -36px color-mix(in srgb, var(--acc) 55%, transparent); transition: box-shadow 1s var(--v-ease); } .tel::before { content: ''; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 96px; height: 24px; border-radius: 14px; background: #000; z-index: 3; } .tel__ecran { height: 100%; overflow: hidden; padding-top: 32px; display: flex; flex-direction: column; gap: 12px; } .tel__barre { display: flex; justify-content: space-between; align-items: center; } .tel__m { font-family: var(--display); font-size: 15px; letter-spacing: .05em; } .tel__v { font-size: 11px; color: var(--v-fg3); padding: 4px 9px; border-radius: var(--v-pill); border: 1px solid var(--v-line); } .tel__chips { display: flex; gap: 6px; overflow: hidden; } .tel__chips span { flex: none; font: 600 11px/1 var(--ui); padding: 7px 10px; border-radius: var(--v-pill); border: 1px solid var(--v-line); color: var(--v-fg2); white-space: nowrap; } .tel__chips span:first-child { background: var(--v-fg); color: var(--v-bg); border-color: transparent; } .tel .treco { margin-top: 0; padding: 13px; } .tel .treco__nom { font-size: 14.5px; } .tel .treco__ex { font-size: 12px; } .tel .treco .ens__logo { width: 42px; height: 42px; border-radius: 13px; } .tel .treco__r { font-size: 12.5px; padding: 5px 9px; } .tel .treco__go { padding: 8px 14px; font-size: 12.5px; } .tel .treco__min { font-size: 11.5px; } .tel .treco__badge { font-size: 11px; } .tel .treco__ctx { font-size: 11px; } .flot { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; min-width: 200px; padding: 10px 14px 10px 10px; border-radius: 18px; background: #23242cf0; border: 1px solid #ffffff1f; box-shadow: 0 24px 50px -20px #000; /* Pas de backdrop-filter ici : le fond est opaque à 94 %, le flou derrière ne se voyait pas, et il se recalculait à chaque image pendant l'inclinaison et le défilement. */ cursor: pointer; will-change: transform; } .flot .ens__logo { width: 38px; height: 38px; border-radius: 12px; } .flot b { display: block; font-size: 13.5px; white-space: nowrap; } /* le sous-titre seulement : « .flot span » attrapait aussi la pastille de remise et la rendait grise (vu par Max le 13.10) */ .flot div > span { display: block; font-size: 12px; color: var(--v-fg3); white-space: nowrap; } .flot__r { margin-left: auto; flex: none; padding: 4px 9px; border-radius: var(--v-pill); background: var(--acc); color: var(--v-bg); font: 700 12.5px/1 var(--ui); } .flot--a { left: -38%; top: 11%; } .flot--b { right: -34%; top: 44%; } .flot--c { left: -26%; bottom: 9%; } /* La carte-licence du hero : objet signature, inclinée devant le téléphone. L'inclinaison de base vit sur le conteneur (le relief écrit le transform de .lic). */ /* La licence occupe désormais le coin bas-gauche : on y masque le flotteur « près de toi » pour une compo nette. */ .hero__tel .flot--c { display: none; } .hero__lic { position: absolute; left: -19%; bottom: 14%; width: clamp(140px, 14vw, 176px); z-index: 4; transform: rotate(-8deg); } .hero__lic .scene3d { width: 100%; perspective: 1100px; } .hero__lic .lic { color: #edede7; box-shadow: 0 34px 70px -28px #000c, 0 30px 60px -16px #000a, 0 2px 0 #ffffff0a inset; } @media (max-width: 900px) { .hero__in { grid-template-columns: minmax(0, 1fr); } .hero__tel { padding: 36px 0 10px; } .flot--a { left: -14%; top: 10%; } .flot--b { right: -12%; top: 46%; } .flot--c { left: -8%; bottom: 7%; } /* Téléphone centré : la licence reste dans l'écran, au coin bas-gauche. */ .hero__lic { left: -3%; bottom: 5%; width: clamp(100px, 28vw, 128px); transform: rotate(-7deg); } } @media (max-width: 560px) { .flot { min-width: 0; padding: 8px 10px 8px 8px; } .flot b { font-size: 12.5px; } .flot span { display: none; } .flot .ens__logo { width: 32px; height: 32px; border-radius: 10px; } } /* ---------- le défilé d'enseignes ---------- */ .marq { margin-top: clamp(36px, 5vw, 64px); padding: 22px 0; overflow: hidden; border-top: 1px solid var(--v-line); border-bottom: 1px solid var(--v-line); } .marq__k { text-align: center; padding: 0 var(--v-gut); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--v-fg3); margin-bottom: 18px; } .marq__rail { display: flex; width: max-content; will-change: transform; animation: marq 70s linear infinite; } .marq__set { display: flex; gap: 12px; padding-right: 12px; } .marq__it { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: var(--v-pill); background: var(--v-surf); border: 1px solid var(--v-surf-line); white-space: nowrap; font-size: 13.5px; font-weight: 600; cursor: pointer; } .marq__it .ens__logo { width: 34px; height: 34px; border-radius: 10px; } .marq__it span { color: var(--v-fg3); font-weight: 400; } @keyframes marq { to { transform: translateX(-50%); } } .marq:hover .marq__rail { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .marq__rail { animation: none; } } /* ---------- les sections ---------- */ .sect { padding-top: clamp(64px, 8vw, 120px); } .sect__tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 32px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 40px); } .sect__tete .lede { margin-top: 16px; } .live { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; padding: 6px 12px; border-radius: var(--v-pill); background: var(--v-surf); border: 1px solid var(--v-surf-line); font: 600 11px/1 var(--ui); letter-spacing: .07em; text-transform: uppercase; color: var(--v-fg2); } .live i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); } .live--v { --acc: #9b7bff; color: #cbbcff; border-color: color-mix(in srgb, #8b5cf6 50%, transparent); } /* L'onde du point « en direct » : un anneau qui grandit et s'efface en transform + opacity, composé par la carte graphique — plus un box-shadow repeint soixante fois par seconde. */ .live i::after, .accHeure__live i::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid var(--acc); opacity: 0; animation: pulseLive 1.8s var(--v-ease) infinite; } @keyframes pulseLive { 0% { transform: scale(.7); opacity: .75; } 70%, 100% { transform: scale(2.6); opacity: 0; } } /* ---------- les sceaux (logos inventés) — repris de app.css ---------- */ .ens__logo { position: relative; flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; color: var(--v-bg); overflow: hidden; background: linear-gradient(0deg, color-mix(in srgb, #0b0b0c 14%, transparent), transparent 55%), linear-gradient(var(--la, 140deg), var(--e1, var(--s-1)), var(--e2, var(--s-2))); box-shadow: inset 0 1px 0 #ffffff5c, inset 0 0 0 1px #ffffff1f; } .ens__logo::after { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 70% at 28% 8%, #ffffff66, transparent 58%); opacity: .9; } .ens__logo--lg { width: 72px; height: 72px; border-radius: 22px; } .ens__sym { width: 56%; height: 56%; fill: var(--v-bg); position: relative; z-index: 2; } .ens__lettre { position: relative; z-index: 2; font-family: var(--display); font-weight: 400; color: var(--v-bg); font-size: 29px; line-height: 1; letter-spacing: .02em; } .ens__lettre--two { font-size: 21px; letter-spacing: .04em; } .ens__logo--lg .ens__lettre { font-size: 38px; } .ens__logo--lg .ens__lettre--two { font-size: 28px; } .ens__logo--bdg { border-radius: 50%; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--v-bg) 28%, transparent), inset 0 1px 0 #ffffff5c, inset 0 0 0 1px #ffffff1f; } .ens__logo[class*="ens__dev-"]::before { content: ''; position: absolute; z-index: 1; background: var(--v-bg); } .ens__dev-bar::before { left: 50%; bottom: 8px; transform: translateX(-50%); width: 42%; height: 3px; border-radius: 2px; } .ens__dev-dot::before { top: 9px; right: 9px; width: 5px; height: 5px; border-radius: 50%; } .ens__dev-slash::before { top: 50%; left: 12%; width: 76%; height: 2.5px; border-radius: 2px; transform: rotate(-20deg); opacity: .8; } /* ---------- le deal du jour — repris de app.css ---------- */ .dealGrid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 14px; align-items: stretch; } /* Deal en vedette : la grande carte, avec deux flèches DANS le dégradé pour passer d'un deal au suivant (la vedette change ; les autres restent en gris à côté). */ .adealBox { position: relative; } .adeal__fl { position: absolute; top: 42%; transform: translateY(-50%); z-index: 4; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #0b0b0c26; background: #ffffffcc; color: #0b0b0c; font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px -8px #0008; transition: transform .2s var(--v-ease), background-color .2s ease; } .adeal__fl:hover { background: #fff; } .adeal__fl:active { transform: translateY(-50%) scale(.94); } .adeal__fl:focus-visible { outline: 2px solid var(--v-fg); outline-offset: 3px; } .adeal__fl--next { right: 12px; } .adeal__fl[hidden] { display: none; } .adeal { border-radius: var(--v-rad); overflow: hidden; background: var(--v-surf); border: 1px solid var(--v-surf-line); cursor: pointer; transition: transform .3s var(--v-ease), border-color .3s var(--v-ease); display: flex; flex-direction: column; } .adeal__cover { position: relative; min-height: 240px; flex: 1; padding: 20px 22px; display: flex; align-items: flex-end; color: #0b0b0c; background: linear-gradient(132deg, var(--s-1), var(--s-2) 50%, var(--s-3)); transition: background 1s var(--v-ease); } .adeal__cover .ens__logo { position: absolute; top: 18px; right: 20px; background: #0b0b0c1f; color: #0b0b0c; box-shadow: inset 0 1px 0 #ffffff50, inset 0 0 0 1px #0b0b0c1a; } .adeal__cover .ens__logo::after { background: radial-gradient(120% 70% at 28% 8%, #ffffff50, transparent 60%); } /* le reflet qui balaie le dégradé au changement de deal (animé en transform + opacity) */ .adeal__shine { position: absolute; inset: 0 auto 0 0; width: 55%; z-index: 3; pointer-events: none; opacity: 0; background: linear-gradient(100deg, transparent 18%, #ffffff52 44%, #ffffffad 50%, #ffffff52 56%, transparent 82%); } .adeal__big { font-family: var(--display); font-weight: 400; font-size: clamp(72px, 10vw, 136px); line-height: .82; letter-spacing: -.02em; color: #0b0b0c; } .adeal__big i { font-style: normal; font-size: .42em; vertical-align: super; margin-left: 2px; } .adeal__go { position: absolute; bottom: 18px; right: 20px; z-index: 2; font: 700 10.5px/1 var(--ui); letter-spacing: .07em; text-transform: uppercase; color: #0b0b0c; background: #ffffff66; border: 1px solid #0b0b0c1f; padding: 8px 12px; border-radius: var(--v-pill); } .adeal__body { padding: 18px 22px 20px; } .adeal__nom { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.01em; line-height: 1; } .adeal__ex { margin-top: 8px; font-size: 15px; color: var(--v-fg2); } .adeal__chrono { display: flex; align-items: center; gap: 12px; margin-top: 16px; } .adeal__chrono em, .accHeure__chrono em { font-style: normal; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--v-fg3); } .chrono { display: inline-flex; gap: 6px; } .chrono span { position: relative; font-family: var(--display); font-weight: 400; font-size: 20px; font-variant-numeric: tabular-nums; background: var(--v-surf2); border: 1px solid var(--v-surf-line); border-radius: 8px; padding: 6px 8px 4px; min-width: 38px; text-align: center; } .chrono span + span::before { content: ':'; position: absolute; left: -7px; top: 50%; transform: translateY(-50%); color: var(--v-fg3); } .adeal__flash { display: grid; gap: 12px; align-content: stretch; } .aflash { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--v-rad-s); background: var(--v-surf); border: 1px solid var(--v-surf-line); cursor: pointer; transition: transform .3s var(--v-ease), border-color .3s var(--v-ease); } .aflash__r { flex: none; font-family: var(--display); font-weight: 400; font-size: 28px; color: var(--acc); letter-spacing: -.01em; transition: color .9s var(--v-ease); min-width: 74px; } .aflash__id { min-width: 0; flex: 1; } .aflash__id b { display: block; font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aflash__id span { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--v-fg3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aflash__id span i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--acc); } .aflash__go { flex: none; color: var(--v-fg3); font-size: 18px; } @media (hover: hover) { .adeal:hover, .aflash:hover, .tcard:hover, .treco:hover, .tuile:hover, .marq__it:hover, .flot:hover { border-color: color-mix(in srgb, var(--acc) 45%, var(--v-surf-line)); } .adeal:hover, .tcard:hover, .tuile:hover { transform: translateY(-2px); } } .adeal:focus-visible, .aflash:focus-visible, .tcard:focus-visible, .tcomp:focus-visible, .tuile:focus-visible, .accHeure:focus-visible, .marq__it:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; } @media (max-width: 860px) { .dealGrid { grid-template-columns: minmax(0, 1fr); } .adeal__cover { min-height: 180px; } /* carte haute en pile : la flèche descend dans le coin bas-droite du corps (zone vide), dégagée du sceau et de « Voir » (dans le dégradé) et du chrono (à gauche) */ .adeal__fl { top: auto; bottom: 16px; transform: none; } .adeal__fl:active { transform: scale(.94); } } /* ---------- les prochains deals : une bande, un par jour ---------- */ .dsem { margin-top: 18px; } .dsem__tete { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 10px; } .dsem__tete b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; } .dsem__tete span { font-size: 13px; color: var(--v-fg3); } .dsem__rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, 1fr); gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; } .dsem__rail::-webkit-scrollbar { display: none; } .dsem__c { scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; justify-items: start; text-align: left; min-width: 0; padding: 14px; border-radius: var(--v-rad-s); background: var(--v-surf); border: 1px solid var(--v-surf-line); color: var(--v-fg); font: inherit; cursor: pointer; transition: transform .3s var(--v-ease), border-color .3s var(--v-ease); } .dsem__c:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--acc) 45%, var(--v-surf-line)); } .dsem__c:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; } .dsem__j { font: 700 11px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--v-fg3); } .dsem__c .ens__logo { width: 40px; height: 40px; border-radius: 12px; margin-top: 2px; } .dsem__c b { max-width: 100%; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dsem__r { padding: 3px 8px; border-radius: var(--v-pill); background: var(--acc); color: var(--v-bg); font: 700 12px/1 var(--ui); transition: background-color .9s var(--v-ease); } .dsem__ex { max-width: 100%; font-size: 12px; color: var(--v-fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 1100px) { .dsem__rail { grid-auto-columns: 160px; margin: 0 calc(-1 * var(--v-gut)); padding-inline: var(--v-gut); scroll-padding-inline: var(--v-gut); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); } } /* ---------- les offres, comme dans l'app ---------- */ .filtres { display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; } .villes, .rubs { display: flex; flex-wrap: wrap; gap: 8px; } .chip { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: var(--v-pill); border: 1px solid var(--v-line); background: #ffffff08; color: var(--v-fg2); font: 600 13.5px/1 var(--ui); cursor: pointer; transition: background-color .25s ease, color .25s ease, border-color .25s ease; white-space: nowrap; } .chip:hover { background: #ffffff12; color: var(--v-fg); } .chip[aria-pressed="true"] { background: var(--v-fg); color: var(--v-bg); border-color: transparent; } .chip--v { min-height: 46px; padding: 0 16px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; border-radius: 16px; } .chip--v b { font-size: 14px; } .chip--v span { font-size: 11.5px; font-weight: 500; opacity: .7; } .chip:focus-visible { outline: 2px solid var(--v-fg); outline-offset: 3px; } .terrain { margin-top: 8px; } .tsect { margin-top: 30px; } .tsect[hidden] { display: none; } .tsectH { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; } .tsectH b { font-size: 18px; font-weight: 700; letter-spacing: -.01em; } .tsectH span { font-size: 13px; color: var(--v-fg3); } .tgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } @media (max-width: 900px) { .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .tgrid { grid-template-columns: minmax(0, 1fr); } } .vide { margin-top: 14px; color: var(--v-fg3); font-size: 15px; } .vide[hidden] { display: none; } .villesLeg { align-self: center; font: 600 11px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--v-fg3); margin-right: 6px; white-space: nowrap; } .plus { margin-top: 18px; } .plus .btn-lien[hidden] { display: none; } /* la grande carte « Maintenant pour toi » — reprise de app.css */ .treco { position: relative; margin-top: 18px; padding: 18px; border-radius: var(--v-rad); background: var(--v-surf); border: 1.5px solid color-mix(in srgb, var(--acc) 55%, var(--v-surf-line)); cursor: pointer; overflow: hidden; transition: border-color .3s var(--v-ease); } .treco::before { content: ''; position: absolute; inset: 0; background: radial-gradient(130% 150% at 100% 0, color-mix(in srgb, var(--acc) 15%, transparent), transparent 62%); pointer-events: none; } .treco__tete { position: relative; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .treco__badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--acc); } .treco__badge svg { width: 14px; height: 14px; } .treco__ctx { font-size: 12.5px; color: var(--v-fg3); } .treco__main { position: relative; display: flex; align-items: center; gap: 14px; margin-top: 14px; } .treco .ens__logo { width: 56px; height: 56px; border-radius: 17px; flex: none; } .treco__id { flex: 1; min-width: 0; } .treco__nom { font-size: 19px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .treco__ex { font-size: 14px; color: var(--v-fg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .treco__r { flex: none; align-self: flex-start; padding: 6px 12px; border-radius: var(--v-pill); background: var(--acc); color: var(--v-bg); font-weight: 700; font-size: 14.5px; transition: background-color .9s var(--v-ease); } .treco__acts { position: relative; display: flex; align-items: center; gap: 14px; margin-top: 16px; } .treco__go { font: inherit; font-weight: 700; font-size: 14px; color: var(--v-bg); background: var(--v-fg); border: 0; border-radius: var(--v-pill); padding: 10px 20px; cursor: pointer; } .treco__min { font-size: 13px; color: var(--v-fg3); } /* la carte d'enseigne — reprise de app.css */ .tcard { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; padding: 16px; border-radius: var(--v-rad); background: var(--v-surf); border: 1px solid var(--v-surf-line); cursor: pointer; transition: transform .3s var(--v-ease), border-color .3s var(--v-ease); } .tcard__id { min-width: 0; padding-right: 60px; } .tcard__nom { font-weight: 600; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tcard__type { font-size: 13px; color: var(--v-fg3); } .tcard__go { position: absolute; top: 12px; right: 12px; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent); padding: 5px 10px; border-radius: var(--v-pill); transition: color .9s var(--v-ease), background-color .9s var(--v-ease); } .tcard__bas { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 6px; } .tcard__r { flex: none; padding: 6px 11px; border-radius: var(--v-pill); background: var(--acc); color: var(--v-bg); font-weight: 700; font-size: 13.5px; transition: background-color .9s var(--v-ease); } .tcard__ex { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--v-fg2); } .tcard__d { flex: none; font-size: 12.5px; color: var(--v-fg3); } /* ---------- la page des flash deals (flash.html) ---------- Des cartes « chaudes » : liseré et halo à la couleur de la volée, une grosse remise, une fenêtre, un compte à rebours. Clic → la fiche (écouteur global [data-id]). */ .flashGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } @media (max-width: 900px) { .flashGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .flashGrid { grid-template-columns: minmax(0, 1fr); } } .fcard { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: 18px; border-radius: var(--v-rad); background: var(--v-surf); border: 1.5px solid color-mix(in srgb, var(--acc) 42%, var(--v-surf-line)); cursor: pointer; overflow: hidden; transition: transform .3s var(--v-ease), border-color .3s var(--v-ease); } .fcard::before { content: ''; position: absolute; inset: 0; background: radial-gradient(130% 150% at 100% 0, color-mix(in srgb, var(--acc) 16%, transparent), transparent 60%); pointer-events: none; } .fcard:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--acc) 70%, var(--v-surf-line)); } .fcard > * { position: relative; } .fcard__hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .fcard__r { flex: none; padding: 7px 13px; border-radius: var(--v-pill); background: var(--acc); color: var(--v-bg); font-weight: 800; font-size: 17px; letter-spacing: -.01em; transition: background-color .9s var(--v-ease); } .fcard__fen { font-size: 12px; font-weight: 600; color: var(--v-fg3); text-align: right; } .fcard__main { display: flex; align-items: center; gap: 14px; min-width: 0; } .fcard .ens__logo { width: 48px; height: 48px; border-radius: 15px; flex: none; } .fcard__id { min-width: 0; } .fcard__nom { font-weight: 700; font-size: 17px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fcard__ex { font-size: 13px; color: var(--v-fg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .fcard__bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--v-line); } .fcard__chrono { font-size: 12.5px; color: var(--v-fg3); } .fcard__chrono em { font-style: normal; } .fcard__chrono b { font-variant-numeric: tabular-nums; color: var(--v-fg); font-weight: 700; margin-left: 5px; } .fcard__go { flex: none; font-size: 12px; font-weight: 700; color: var(--acc); } @media (prefers-reduced-motion: reduce) { .fcard, .fcard:hover { transform: none; } } .tcard:active, .treco:active, .tcomp:active { transform: scale(.992); } /* la ligne compacte — reprise de app.css */ .tcomps { border: 1px solid var(--v-surf-line); border-radius: var(--v-rad); overflow: hidden; background: var(--v-surf); } .tcomp { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-top: 1px solid var(--v-surf-line); cursor: pointer; } .tcomp:first-child { border-top: 0; } .tcomp .ens__logo { width: 34px; height: 34px; border-radius: 10px; flex: none; } .tcomp__id { flex: 1; min-width: 0; } .tcomp__nom { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tcomp__nom span { color: var(--v-fg3); font-weight: 400; } .tcomp__r { flex: none; font-size: 12px; font-weight: 700; color: var(--v-bg); background: var(--acc); padding: 3px 9px; border-radius: var(--v-pill); transition: background-color .9s var(--v-ease); } .tcomp__d { flex: none; font-size: 12px; color: var(--v-fg3); width: 46px; text-align: right; } .tcomp__tag { flex: none; color: var(--v-fg3); display: grid; place-items: center; } .tcomp__tag svg { width: 15px; height: 15px; } /* ---------- par envie ---------- */ .tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .tuile { min-height: 160px; padding: 22px; border-radius: var(--v-rad-s); background: var(--v-surf); border: 1px solid var(--v-surf-line); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; text-align: left; cursor: pointer; transition: transform .3s var(--v-ease), border-color .3s var(--v-ease), background-color 1s var(--v-ease); } .tuile h3 { font-size: clamp(19px, 1.6vw, 23px); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; } .tuile p { margin-top: 6px; font-size: 13.5px; color: var(--v-fg3); line-height: 1.45; } .tuile--acc { background: var(--acc); border-color: transparent; color: var(--v-bg); } .tuile--acc p { color: color-mix(in srgb, var(--v-bg) 68%, transparent); } @media (max-width: 900px) { .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tuile { min-height: 130px; padding: 18px; } } /* ---------- les places des enseignes fondatrices (page des enseignes) ---------- */ .slots { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; } .slot { aspect-ratio: 1; border-radius: 18px; border: 1px dashed #ffffff2a; display: grid; place-items: center; padding: 8px; color: var(--v-fg3); font-size: 12px; line-height: 1.3; text-align: center; text-decoration: none; } .slot--cta { border: 1px solid color-mix(in srgb, var(--acc) 60%, transparent); background: color-mix(in srgb, var(--acc) 12%, transparent); color: var(--v-fg); font-weight: 600; transition: transform .3s var(--v-ease); } .slot--cta:hover { transform: translateY(-2px); } @media (max-width: 900px) { .slots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .slot { font-size: 11px; padding: 6px; border-radius: 14px; } } /* ---------- les liens d'une tête de section ---------- */ .sect__liens { display: flex; flex-wrap: wrap; gap: 4px 22px; } /* ---------- les bandes (carte, licence) ---------- */ .band { position: relative; overflow: hidden; margin-top: clamp(64px, 8vw, 120px); padding: clamp(56px, 7vw, 100px) 0; background: var(--v-surf); border-top: 1px solid var(--v-surf-line); border-bottom: 1px solid var(--v-surf-line); } .band__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; } .band__txt .lede { margin-top: 22px; } .band__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; } .band__leg { font-size: 13px; color: var(--v-fg3); } .band--lic { background: var(--v-bg); border: 0; } @media (max-width: 900px) { .band__in { grid-template-columns: minmax(0, 1fr); } } .plan { position: relative; aspect-ratio: 4 / 3; min-height: 320px; border-radius: var(--v-rad); overflow: hidden; border: 1px solid var(--v-surf-line); background: #0e0e10; } .plan__map { position: absolute; inset: 0; } .plan__charge { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; color: var(--v-fg3); pointer-events: none; } .plan__charge[hidden] { display: none; } .leaflet-container { background: #0e0e10; font: inherit; } .leaflet-div-icon { background: transparent; border: 0; } .pmk { background: none; border: 0; text-align: center; } .pmk .ens__logo { width: 38px; height: 38px; border-radius: 12px; display: block; margin: 0 auto; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); } .pmk__r { display: inline-block; margin-top: 2px; font-size: 10px; font-weight: 700; color: var(--v-bg); background: var(--acc); padding: 1px 6px; border-radius: 999px; line-height: 1.4; } .pmoi span { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--v-fg); box-shadow: 0 0 0 5px color-mix(in srgb, var(--v-fg) 20%, transparent); } .pclust span { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: var(--acc); color: var(--v-bg); font-weight: 800; font-size: 14px; box-shadow: 0 2px 10px rgba(0, 0, 0, .5); border: 2px solid #0b0b0c; } .leaflet-control-attribution { background: rgba(0, 0, 0, .55); color: #9a9a95; font-size: 10px; } .leaflet-control-attribution a { color: #b7b7b0; } .leaflet-bar a { background: #1b1b1f; color: var(--v-fg); border-color: #ffffff1a; } .leaflet-bar a:hover { background: #2a2a30; } /* ---------- l'heure de la volée — reprise de app.css ---------- */ .heures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } @media (max-width: 1000px) { .heures { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .heures { grid-template-columns: minmax(0, 1fr); } } .accHeure { padding: 16px 18px; border: 1px solid var(--v-surf-line); border-radius: var(--v-rad-s); background: #ffffff06; } .accHeure--actif { --acc: #9b7bff; position: relative; overflow: hidden; border-color: color-mix(in srgb, #8b5cf6 58%, transparent); background: radial-gradient(135% 120% at 0% 0%, color-mix(in srgb, #b79dff 22%, transparent), transparent 52%), radial-gradient(130% 125% at 100% 100%, color-mix(in srgb, #6d28d9 30%, transparent), transparent 56%), linear-gradient(162deg, #16101f, #110e17); box-shadow: 0 0 48px -14px #8b5cf6, 0 12px 30px -20px #000, inset 0 1px 0 #ffffff14; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .25s var(--v-ease), box-shadow .35s var(--v-ease), border-color .35s var(--v-ease); } .accHeure--actif > * { position: relative; z-index: 1; } .accHeure--actif::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(105deg, transparent 40%, #ffffff22 49%, transparent 58%); transform: translateX(-130%); animation: heureSweep 6s var(--v-ease) infinite; } @keyframes heureSweep { 0%, 68% { transform: translateX(-130%); } 100% { transform: translateX(130%); } } .accHeure--actif:hover { transform: translateY(-2px); box-shadow: 0 0 60px -12px #8b5cf6, 0 16px 34px -20px #000, inset 0 1px 0 #ffffff1c; border-color: color-mix(in srgb, #a78bfa 72%, transparent); } .accHeure--actif:active { transform: translateY(0); } .accHeure__kick { display: flex; align-items: center; gap: 8px; font: 700 11px/1 var(--ui); text-transform: uppercase; letter-spacing: .08em; color: var(--v-fg3); } .accHeure--actif .accHeure__kick { color: var(--acc); } .accHeure__live i { position: relative; display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); } .accHeure__voir { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font: 700 11px/1 var(--ui); letter-spacing: .03em; text-transform: none; color: var(--acc); } .accHeure__voir i { font-style: normal; } .accHeure__main { display: flex; align-items: center; gap: 12px; margin-top: 14px; } .accHeure .ens__logo { width: 46px; height: 46px; border-radius: 14px; } .accHeure__id { min-width: 0; } .accHeure__h { font: 600 15.5px/1.25 var(--ui); color: var(--v-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .accHeure__sous { margin-top: 4px; font: 500 13px/1.45 var(--ui); color: var(--v-fg3); } .accHeure__sous b { color: #efeaff; font-weight: 700; } .accHeure__chrono { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .accHeure--actif .chrono span { border-color: color-mix(in srgb, #8b5cf6 42%, var(--v-surf-line)); background: color-mix(in srgb, #8b5cf6 16%, var(--v-surf2)); color: #efeaff; font-size: 17px; min-width: 34px; } @media (prefers-reduced-motion: reduce) { .live i::after, .accHeure__live i::after { animation: none; } .accHeure--actif::after { animation: none; } } /* ---------- l'app et la licence ---------- */ .puces { list-style: none; display: grid; gap: 10px; margin-top: 22px; } .puces li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.55; color: var(--v-fg2); } .puces li b { color: var(--v-fg); font-weight: 600; } .puces li::before { content: ''; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 10px var(--acc); transition: background-color 1s var(--v-ease); } .stores { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--v-fg3); } .stores span { padding: 9px 13px; border-radius: var(--v-pill); border: 1px dashed #ffffff2e; color: var(--v-fg2); font-weight: 600; } .stores em { font-style: normal; } .licBloc { display: flex; flex-direction: column; align-items: center; text-align: center; } /* L'ombre portée de la licence est un box-shadow sur la carte (dessiné une fois dans sa couche, puis déplacé avec elle), pas un filter: drop-shadow sur le conteneur, que la carte graphique recalculait à chaque degré d'inclinaison. */ .flotte { width: min(320px, 70vw); margin: 0 auto; will-change: transform; } .flotte .lic { box-shadow: 0 34px 70px -28px #000c, 0 30px 60px -16px #000a, 0 2px 0 #ffffff0a inset; } .flotte .lic { color: #edede7; } .licLeg { margin-top: 20px; font-size: 13px; color: var(--v-fg3); } .licLeg span { display: block; } .choix { display: grid; gap: 18px; width: 100%; max-width: 440px; margin-top: 26px; text-align: left; } .choix__k { display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--v-fg3); margin-bottom: 8px; } .choix__sel { width: 100%; min-height: 48px; padding: 0 16px; border-radius: 16px; border: 1px solid #ffffff26; background: #ffffff08; color: var(--v-fg); font: 500 15.5px/1.2 var(--ui); appearance: none; -webkit-appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--v-fg2) 50%), linear-gradient(135deg, var(--v-fg2) 50%, transparent 50%); background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%; background-size: 6px 6px; background-repeat: no-repeat; } .choix__sel:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 25%, transparent); } .choix__sel option { color: #111; } .teintes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; } .teinte { aspect-ratio: 1; width: 100%; border-radius: 50%; border: 2px solid transparent; background: var(--c); cursor: pointer; transition: transform .25s var(--v-ease), border-color .25s ease; box-shadow: inset 0 0 0 2px #0b0b0c; } .teinte:hover { transform: scale(1.08); } .teinte[aria-pressed="true"] { border-color: var(--v-fg); transform: scale(1.14); } .teinte:focus-visible { outline: 2px solid var(--v-fg); outline-offset: 3px; } .choix__leg { font-size: 13.5px; line-height: 1.55; color: var(--v-fg2); } .choix__leg b { color: var(--v-fg); font-weight: 600; } /* ---------- pour les marques : offre fondation + packs ---------- */ .fondation { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding: 18px 26px; border-radius: var(--v-pill); background: var(--acc); color: var(--v-bg); font-size: 15px; transition: background-color 1s var(--v-ease); } .fondation b { font-size: 17px; font-weight: 700; } .fondation span { font-weight: 600; opacity: .8; } .packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; } .pack { position: relative; padding: 26px 22px 24px; border-radius: var(--v-rad-s); background: var(--v-surf); border: 1px solid var(--v-surf-line); } .pack__k { display: block; font: 700 12px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--v-fg3); } .pack__prix { margin-top: 16px; font-family: var(--display); font-weight: 400; font-size: clamp(40px, 3.4vw, 50px); line-height: 1; letter-spacing: .01em; font-variant-numeric: tabular-nums; } .pack__prix i { font-style: normal; font-family: var(--ui); font-weight: 700; font-size: 13px; letter-spacing: .08em; margin-left: 8px; color: var(--v-fg3); vertical-align: 8px; } .pack ul { list-style: none; margin-top: 18px; display: grid; gap: 9px; } .pack li { display: flex; gap: 10px; font-size: 14.5px; color: var(--v-fg2); line-height: 1.45; } .pack li::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; margin-top: 7px; background: var(--acc); transition: background-color 1s var(--v-ease); } .pack--star { border-color: color-mix(in srgb, var(--acc) 70%, transparent); box-shadow: 0 0 60px -22px var(--acc); background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 14%, var(--v-surf)), var(--v-surf) 70%); } .pack--star .pack__k, .pack--star .pack__prix i { color: var(--acc); } .pack__tag { position: absolute; top: -14px; right: 18px; padding: 7px 12px; border-radius: var(--v-pill); background: var(--acc); color: var(--v-bg); font: 700 12px/1 var(--ui); transition: background-color 1s var(--v-ease); } .packs__note { margin-top: 16px; font-size: 13px; color: var(--v-fg3); max-width: 70ch; } .tarifs__k { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-top: 30px; } .tarifs__k b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.02em; } .tarifs__k span { display: block; margin-top: 4px; font-size: 14px; color: var(--v-fg3); } .bascule { display: inline-flex; padding: 4px; border-radius: var(--v-pill); background: #ffffff0a; border: 1px solid var(--v-line); } .bascule button { min-height: 38px; padding: 0 16px; border: 0; border-radius: var(--v-pill); background: transparent; color: var(--v-fg2); font: 600 13.5px/1 var(--ui); cursor: pointer; transition: background-color .25s ease, color .25s ease; } .bascule button[aria-pressed="true"] { background: var(--v-fg); color: var(--v-bg); } .bascule button i { font-style: normal; margin-left: 6px; padding: 3px 7px; border-radius: var(--v-pill); background: var(--acc); color: var(--v-bg); font-size: 11px; transition: background-color 1s var(--v-ease); } .bascule button:focus-visible { outline: 2px solid var(--v-fg); outline-offset: 3px; } .packs--abo { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pack__prix i em { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 13px; } @media (max-width: 900px) { .packs--abo { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 1000px) { .packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .packs { grid-template-columns: minmax(0, 1fr); } .fondation { border-radius: 22px; padding: 16px 20px; } .fondation b { font-size: 16px; } } /* ---------- questions ---------- */ .faq__h { text-align: center; } .faq { max-width: 820px; margin: clamp(28px, 4vw, 48px) auto 0; border-bottom: 1px solid var(--v-line); } .faq details { border-top: 1px solid var(--v-line); } .faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-size: 17px; font-weight: 600; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; flex: none; font-size: 26px; font-weight: 300; color: var(--v-fg3); transition: transform .3s var(--v-ease); } .faq details[open] summary::after { transform: rotate(45deg); } .faq p { padding: 0 0 22px; color: var(--v-fg2); max-width: 64ch; line-height: 1.6; } /* ---------- la pré-inscription — reprise de site.css ---------- */ .insc { position: relative; overflow: hidden; margin-top: clamp(64px, 8vw, 120px); padding: clamp(96px, 12vw, 160px) var(--v-gut) clamp(96px, 12vw, 140px); border-radius: var(--v-rad) var(--v-rad) 0 0; background: var(--v-surf); border-top: 1px solid var(--v-surf-line); } .insc__in { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; text-align: center; } .insc__h { font-size: clamp(56px, 10vw, 140px); } .insc__lede { margin: 24px auto 0; } .formulaire, .merci { margin-top: 36px; padding: clamp(22px, 3vw, 32px); text-align: left; } .formulaire[hidden], .merci[hidden] { display: none; } .piege { position: absolute; left: -9999px; } .champ-f { border: 0; margin-top: 22px; } .champ-f:first-of-type { margin-top: 0; } .champ-f__k { display: block; font-size: 14px; font-weight: 600; margin-bottom: 10px; } .champ-f__aide { margin-top: 8px; font-size: 13.5px; color: var(--v-fg3); } .champ-f__in { width: 100%; min-height: 52px; padding: 0 18px; border-radius: 16px; border: 1px solid #ffffff26; background: #ffffff08; color: var(--v-fg); font: 500 17px/1.2 var(--ui); transition: border-color .25s ease, box-shadow .25s ease; } .champ-f__in::placeholder { color: var(--v-fg3); } .champ-f__in:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 25%, transparent); } .champ-f__in--court { max-width: 160px; } .annees { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .annee { position: relative; display: block; cursor: pointer; } .annee input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } /* Les années sont des années, pas des couleurs : pas de pastille, l'état coché prend la couleur CHOISIE par le visiteur (--acc). */ .annee span { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: var(--v-pill); border: 1px solid var(--v-line); background: #ffffff08; color: var(--v-fg2); font: 600 14px/1 var(--ui); font-variant-numeric: tabular-nums; transition: background-color .25s ease, border-color .25s ease; } .annee:hover span { background: #ffffff12; } .annee input:checked + span { border-color: var(--acc); color: var(--v-fg); background: color-mix(in srgb, var(--acc) 18%, transparent); } .annee input:focus-visible + span { outline: 2px solid var(--v-fg); outline-offset: 3px; } @media (max-width: 480px) { .annees { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .annee span { min-height: 42px; font-size: 13.5px; } } .consent { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; margin-top: 24px; font-size: 14px; line-height: 1.55; color: var(--v-fg2); cursor: pointer; } .consent input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--acc); } .consent a { color: var(--v-fg); } .formulaire__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; } .formulaire__note { font-size: 13.5px; color: var(--v-fg3); } .formulaire__etat { min-height: 1.6em; margin-top: 14px; font-size: 14.5px; color: var(--v-fg2); } .formulaire__etat.erreur { color: #ffb4a8; } .btn-plein:disabled { opacity: .5; cursor: default; transform: none; } .merci { text-align: center; } .merci__h { font-size: clamp(24px, 3vw, 34px); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; } .merci__h b { color: var(--acc); } .merci__p { margin: 14px auto 22px; color: var(--v-fg2); max-width: 40ch; } /* ---------- le pied ---------- */ .pied { border-top: 1px solid var(--v-line); padding: 48px var(--v-gut) calc(28px + env(safe-area-inset-bottom)); background: var(--v-bg); } .pied__in { max-width: var(--v-max); margin: 0 auto; display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 32px 28px; } .pied__m { font-family: var(--display); font-size: 22px; letter-spacing: .05em; } .pied__marque p { margin-top: 10px; font-size: 13.5px; color: var(--v-fg3); max-width: 30ch; line-height: 1.5; } .pied h4 { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--v-fg3); margin-bottom: 12px; } .pied nav a, .pied nav span { display: block; padding: 4px 0; font-size: 14px; color: var(--v-fg2); text-decoration: none; } .pied nav span { color: var(--v-fg3); } .pied nav a:hover { color: var(--v-fg); } .pied__bas { max-width: var(--v-max); margin: 36px auto 0; padding-top: 18px; border-top: 1px solid var(--v-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; font-size: 12.5px; color: var(--v-fg3); } @media (max-width: 900px) { .pied__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pied__marque { grid-column: 1 / -1; } } /* ---------- la fiche d'une offre ---------- */ /* Centrage explicite : Safari laisse un en haut à gauche quand sa hauteur n'est pas définie (pas de `height: fit-content` en position fixe). */ .fiche { position: fixed; inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; border: 0; padding: 0; background: transparent; width: min(92vw, 440px); max-width: none; max-height: 92vh; overflow: auto; color: var(--v-fg); } .fiche:not([open]) { display: none; } button.btn-lien { border: 0; background-color: transparent; padding: 0 2px; cursor: pointer; } .fiche::backdrop { background: #0b0b0ccc; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .fiche__in { position: relative; padding: 28px 22px 22px; border-radius: var(--v-rad); background: var(--v-surf); border: 1px solid var(--v-surf-line); text-align: center; } .fiche__x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--v-line); background: #ffffff0c; color: var(--v-fg2); font-size: 20px; line-height: 1; cursor: pointer; } .fiche__tete { display: flex; flex-direction: column; align-items: center; gap: 12px; } .fiche__nom { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -.01em; } .fiche__type { font-size: 13px; color: var(--v-fg3); margin-top: 6px; } .fiche__r { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 14px; border-radius: var(--v-pill); background: var(--acc); color: var(--v-bg); font-weight: 700; font-size: 15px; } .fiche__desc { margin: 14px auto 0; max-width: 34ch; font-size: 14.5px; color: var(--v-fg2); line-height: 1.5; } .fiche__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; } .fiche__meta span { padding: 6px 11px; border-radius: var(--v-pill); border: 1px solid var(--v-line); font-size: 12.5px; color: var(--v-fg2); } .fiche__meta span.v { --acc: #9b7bff; border-color: color-mix(in srgb, #8b5cf6 55%, transparent); color: #cbbcff; } .fiche__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; } .fiche__acts .btn-plein { min-height: 48px; } .fiche__acts .btn-lien { padding: 0 8px; } .fiche__note { margin-top: 14px; font-size: 12px; color: var(--v-fg3); } @media (prefers-reduced-motion: reduce) { .tcard, .treco, .adeal, .aflash, .tuile, .accHeure--actif, .teinte, .chip { transition: none; } } /* ==================================================================== QUATRE PAGES — l'en-tête des pages intérieures, et la passe responsive ==================================================================== */ /* l'en-tête d'une page intérieure (offres, enseignes) : le même souffle que le héros, sans téléphone */ .entete { position: relative; overflow: hidden; padding: clamp(150px, 15vw, 190px) 0 clamp(28px, 4vw, 48px); } .entete__in { position: relative; z-index: 1; } .entete .h2 { margin-top: 10px; max-width: 30ch; } /* un groupe de mots qui ne se coupe jamais (« 16 à 29 ans ») : SplitText découpe aussi sur les espaces insécables, le nowrap, lui, tient */ .nb { white-space: nowrap; } .entete .lede { margin-top: 20px; max-width: 56ch; } .entete .band__acts { margin-top: 26px; } .sect--serre { padding-top: clamp(28px, 3.5vw, 48px); } /* la bande de la licence en tête de page (licence.html) */ .band--haut { margin-top: 0; padding-top: clamp(150px, 15vw, 190px); } /* le bandeau du haut : texte court et lien court sur un téléphone, au lieu d'une phrase tronquée */ .topbar .court { display: none; } @media (max-width: 640px) { .topbar { font-size: 12.5px; padding: 0 12px; } .topbar .long { display: none; } .topbar a.court { display: inline; text-decoration: none; font-weight: 600; } .topbar a.court b { font-weight: 800; } } /* le héros sur un téléphone : le téléphone pointe depuis le pli au lieu d'occuper deux écrans */ @media (max-width: 900px) { .hero__cadre { max-height: 460px; overflow: hidden; padding: 0 14px; margin: 0 -14px; -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); } .hero { padding-bottom: clamp(16px, 4vw, 40px); } } @media (max-width: 560px) { .tel { width: min(300px, 80vw); } .hero__cadre { max-height: 420px; } .flot--a { left: -8%; top: 12%; } .flot--b { right: -8%; top: 44%; } .flot--c { left: -4%; bottom: 10%; } } /* les rubriques : une rangée qui défile au doigt, comme dans l'app */ @media (max-width: 640px) { .rubs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--v-gut)); padding: 2px var(--v-gut) 6px; scroll-padding: 0 var(--v-gut); } .rubs::-webkit-scrollbar { display: none; } .rubs { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); } .villes { gap: 6px; } .chip--v { min-height: 42px; padding: 0 12px; } } /* le deal du jour : sur un téléphone, le grand chiffre reste lisible, les flashs prennent la largeur */ @media (max-width: 560px) { .adeal__cover { min-height: 160px; padding: 16px 18px; } .adeal__body { padding: 16px 18px 18px; } .aflash { padding: 14px 16px; gap: 12px; } .aflash__r { min-width: 62px; font-size: 24px; } } /* la licence sur un téléphone : la carte d'abord, le texte ensuite ; les pastilles de couleur restent tapables */ @media (max-width: 900px) { .band--lic .band__in { grid-template-columns: minmax(0, 1fr); } .teintes { gap: 8px; } .choix { max-width: 100%; } } /* les en-têtes de section : les liens passent sous le titre quand la ligne est trop courte */ @media (max-width: 640px) { .sect__tete { gap: 12px 24px; } .sect__liens { gap: 2px 18px; } .tsectH { flex-wrap: wrap; gap: 4px 10px; } } /* les packs : un seul tarif par écran, lisible d'un pouce */ @media (max-width: 560px) { .pack { padding: 22px 18px 20px; } .tarifs__k { margin-top: 24px; } .bascule button { min-height: 36px; padding: 0 13px; font-size: 13px; } } /* le pied sur un téléphone : deux colonnes, la marque en travers, le bas en pile */ @media (max-width: 560px) { .pied { padding-top: 36px; } .pied__in { gap: 26px 20px; } .pied__bas { flex-direction: column; gap: 6px; } } /* ==================================================================== MOUVEMENT — la page vit parce que le lecteur bouge (souris, défilement, temps réel) ==================================================================== */ /* le passage d'une page à l'autre : le contenu glisse, le bandeau et la barre restent en place */ @view-transition { navigation: auto; } #topbar { view-transition-name: bandeau; } #nav { view-transition-name: barre; } @media (prefers-reduced-motion: no-preference) { ::view-transition-old(root) { animation: vtSortie .26s cubic-bezier(.4, 0, 1, 1) both; } ::view-transition-new(root) { animation: vtEntree .5s cubic-bezier(.2, .7, .2, 1) both; } @keyframes vtSortie { to { opacity: 0; transform: translateY(-14px); } } @keyframes vtEntree { from { opacity: 0; transform: translateY(18px); } } } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* le téléphone du héros s'incline vers la souris (vitrine.js) */ .hero__cadre { transform-style: preserve-3d; } /* les sceaux et les flèches répondent au survol des cartes */ .ens__logo { transition: transform .35s var(--v-ease); } .aflash__go, .tuile h3 { transition: transform .3s var(--v-ease); } @media (hover: hover) { .tcard:hover .ens__logo, .tcomp:hover .ens__logo, .aflash:hover .ens__logo, .accHeure--actif:hover .ens__logo, .marq__it:hover .ens__logo, .treco:hover .ens__logo { transform: rotate(-6deg) scale(1.06); } .aflash:hover .aflash__go { transform: translateX(4px); } .tuile:hover h3 { transform: translateY(-2px); } } /* ==================================================================== COMMENT ÇA MARCHE (comment.html) — repris de l'ancienne vitrine « Ton âge suffit » (site.css) ==================================================================== */ .temps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); margin-top: clamp(36px, 5vw, 64px); } .temps li { display: grid; gap: 12px; align-content: start; padding-top: 22px; border-top: 1px solid var(--v-line); } .temps__n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--acc); color: var(--v-bg); font-size: 14px; font-weight: 700; transition: background-color 1s var(--v-ease); } .temps h3 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; letter-spacing: -.035em; line-height: 1.12; } .temps p { color: var(--v-fg2); font-size: 16px; line-height: 1.6; } @media (max-width: 760px) { .temps { grid-template-columns: minmax(0, 1fr); } } .bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(32px, 4.5vw, 56px); } .bento__c { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 250px; padding: 28px; border-radius: var(--v-rad); background: var(--v-surf); border: 1px solid var(--v-surf-line); } .bento__c--a { grid-row: span 2; min-height: 520px; background: radial-gradient(90% 70% at 80% 10%, color-mix(in srgb, var(--acc) 26%, transparent), transparent 70%), var(--v-surf); } .bento__c--b { grid-column: span 2; } .zero { position: absolute; top: 18px; right: 26px; font-family: var(--display); font-weight: 400; font-size: clamp(96px, 11vw, 170px); line-height: .9; color: #ffffff14; } .bento__c--a .zero { font-size: clamp(160px, 20vw, 300px); color: var(--acc); opacity: .95; transition: color 1s var(--v-ease); } .bento__c--c .zero, .bento__c--d .zero { font-size: clamp(72px, 7vw, 110px); top: 16px; right: 22px; } .bento__c--c, .bento__c--d { min-height: 270px; } .bento__c h3 { font-size: clamp(21px, 2vw, 27px); font-weight: 600; letter-spacing: -.03em; line-height: 1.2; } .bento__c h3 s { text-decoration-thickness: 2px; text-decoration-color: var(--acc); } .bento__c p { margin-top: 10px; color: var(--v-fg2); font-size: 15.5px; line-height: 1.6; max-width: 40ch; } @media (max-width: 860px) { .bento { grid-template-columns: minmax(0, 1fr); } .zero { font-size: clamp(78px, 20vw, 104px); top: 14px; right: 18px; } .bento__c--a .zero { font-size: clamp(96px, 26vw, 122px); opacity: .9; } .bento__c--a { grid-row: auto; min-height: 0; padding-top: 128px; } .bento__c--b { grid-column: auto; } .bento__c, .bento__c--c, .bento__c--d { min-height: 0; padding-top: 110px; } } .volees-sec__tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; } .volees-sec__h { font-size: clamp(44px, 6.5vw, 100px); } .volees { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; margin-top: clamp(32px, 5vw, 56px); } .volee { position: relative; aspect-ratio: 1 / 2.1; border-radius: var(--v-rad-s); background: var(--v-surf); border: 1px solid var(--v-surf-line); padding: 12px 8px; display: flex; flex-direction: column; justify-content: flex-end; color: var(--v-fg); cursor: pointer; transition: transform .45s var(--v-ease), border-color .45s var(--v-ease); font: inherit; text-align: left; } .volee b { font-family: var(--display); font-weight: 400; font-size: clamp(15px, 1.7vw, 26px); line-height: .9; } .volee span { margin-top: 4px; font-size: 11.5px; font-weight: 500; opacity: .8; } .volee:hover { transform: translateY(-8px); } .volee.ici { transform: translateY(-16px); border-color: var(--acc); background: color-mix(in srgb, var(--acc) 22%, var(--v-surf)); box-shadow: 0 30px 50px -20px var(--acc); } .volee:focus-visible { outline: 2px solid var(--v-fg); outline-offset: 2px; } .volees__leg { margin-top: clamp(36px, 5vw, 56px); font-size: 14px; color: var(--v-fg3); max-width: 60ch; } @media (max-width: 860px) { .volees-sec__tete { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 700px) { .volees { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; } .volee { aspect-ratio: 1 / 1.35; padding: 8px 6px; } .volee b { font-size: 14px; } .volee span { font-size: 10px; } .volee.ici, .volee:hover { transform: none; } .volee.ici { outline: 2px solid var(--v-fg); outline-offset: 2px; box-shadow: none; } .volees__leg { margin-top: 24px; } } .regle blockquote p { font-size: clamp(32px, 5.4vw, 80px); font-weight: 600; letter-spacing: -.045em; line-height: 1.1; } .regle blockquote p span { color: var(--acc); transition: color 1s var(--v-ease); } .regle blockquote footer { margin-top: 22px; font-size: 14px; color: var(--v-fg3); } .insc--court { padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(72px, 9vw, 110px); } .band__acts--centre { justify-content: center; } .entete--court { padding-bottom: clamp(16px, 2vw, 24px); } /* ---------- un document (confidentialite.html) ---------- */ .doc { max-width: 720px; margin: 0 auto; padding: clamp(150px, 15vw, 190px) var(--v-gut) clamp(72px, 9vw, 110px); } .doc h1 { font-size: clamp(34px, 5vw, 56px); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; } .doc h2 { margin-top: 40px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; } .doc h3 { margin-top: 24px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; } .doc p, .doc li { margin-top: 12px; color: var(--v-fg2); line-height: 1.65; } .doc ul { padding-left: 20px; } .doc b { color: var(--v-fg); font-weight: 500; } .doc .date { color: var(--v-fg3); font-size: 14px; margin-top: 10px; } .doc__note { padding: 10px 14px; border-radius: 12px; background: #ffffff0a; border: 1px solid var(--v-line); font-size: 14px; } .doc__note[hidden] { display: none; } .doc__retour { margin-top: 40px; } /* Ce qui n'est pas encore décidé se voit, pour ne pas être oublié en ligne. */ .a-completer { display: inline-block; padding: 2px 8px; border-radius: 6px; background: #ffb4a826; color: #ffb4a8; font-size: 14px; } /* ---------- la réservation d'une place fondatrice (inscription-enseigne.html) ---------- */ .ensf { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; } .ensf__pitch { position: sticky; top: 120px; } .ensf__pitch .puces { margin-top: 22px; } .ensf__lien { margin-top: 22px; } .ensf__form, .ensf__merci { margin-top: 0; } .ensf__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } .ensf__grille .champ-f { margin-top: 18px; } .ensf__grille .champ-f:first-child, .ensf__grille .champ-f:nth-child(2) { margin-top: 0; } .ensf__large { grid-column: 1 / -1; } .req { color: var(--acc); } .champ-f__in--long { min-height: 110px; padding: 14px 18px; resize: vertical; line-height: 1.5; } .ensf .formulaire__note { margin-top: 16px; } .merci__demo { color: var(--acc); font-weight: 600; } .merci__demo[hidden] { display: none; } @media (max-width: 900px) { .ensf { grid-template-columns: minmax(0, 1fr); } .ensf__pitch { position: static; } } @media (max-width: 560px) { .ensf__grille { grid-template-columns: minmax(0, 1fr); } .ensf__grille .champ-f:nth-child(2) { margin-top: 18px; } } /* ==================================================================== VENDRE AUX ENSEIGNES (enseignes.html, paiement.html) ==================================================================== */ /* les cent places : compteur honnête + ce que gagnent les fondatrices */ .fond { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(16px, 2.5vw, 32px); align-items: stretch; } .fond__compte { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: clamp(24px, 3vw, 36px); background: linear-gradient(160deg, color-mix(in srgb, var(--acc) 16%, var(--v-surf)), var(--v-surf) 70%); } .fond__n { font-family: var(--display); font-weight: 400; font-size: clamp(72px, 9vw, 128px); line-height: .9; letter-spacing: .01em; color: var(--acc); transition: color 1s var(--v-ease); } .fond__l { font-size: 15px; font-weight: 600; } .fond__barre { height: 8px; margin-top: 10px; border-radius: 999px; background: #ffffff12; overflow: hidden; } .fond__barre i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--acc); transition: width 1.2s var(--v-ease), background-color 1s var(--v-ease); } .fond__s { font-size: 13px; color: var(--v-fg3); } .fond__s b { color: var(--v-fg); } .fond__gains { list-style: none; display: grid; gap: 12px; align-content: center; } .fond__gains li { position: relative; padding: 18px 20px 18px 54px; border-radius: var(--v-rad-s); background: var(--v-surf); border: 1px solid var(--v-surf-line); font-size: 15.5px; line-height: 1.5; color: var(--v-fg2); } .fond__gains li b { color: var(--v-fg); font-weight: 600; } .fond__gains li::before { content: '✓'; position: absolute; left: 18px; top: 16px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--acc); color: var(--v-bg); font-size: 13px; font-weight: 800; transition: background-color 1s var(--v-ease); } @media (max-width: 860px) { .fond { grid-template-columns: minmax(0, 1fr); } } /* le prix fondateur sur chaque formule : le fondateur d'abord, le normal barré */ .packs__fond { margin: 14px 0 0; font-size: 14.5px; color: var(--v-fg2); max-width: 70ch; } .packs__fond b { color: var(--v-fg); font-weight: 600; } .pack__fond { display: inline-flex; align-items: baseline; gap: 6px; } .pack__fondtag { display: inline-block; margin-top: 14px; padding: 4px 9px; border-radius: var(--v-pill); background: color-mix(in srgb, var(--acc) 18%, transparent); color: var(--acc); font: 700 11px/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; transition: color 1s var(--v-ease), background-color 1s var(--v-ease); } .pack__fondtag + .pack__prix { margin-top: 8px; } .pack__fondtag[hidden] { display: none; } .pack__normal { margin-top: 6px; font-size: 13px; color: var(--v-fg3); line-height: 1.45; } .pack__normal s { color: var(--v-fg2); text-decoration-thickness: 1.5px; } .pack__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font: 600 14px/1 var(--ui); color: var(--v-fg); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; transition: background-size .45s var(--v-ease); } .pack__cta:hover { background-size: 0 1px; } .pack__cta .fl { transition: transform .3s var(--v-ease); } .pack__cta:hover .fl { transform: translateX(3px); } /* le parcours de paiement (démo) */ .pay__etapes { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: clamp(24px, 3vw, 40px); } .pay__etapes li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--v-rad-s); background: var(--v-surf); border: 1px solid var(--v-surf-line); font: 600 13.5px/1.2 var(--ui); color: var(--v-fg3); } .pay__etapes li i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--v-line); font-style: normal; font-size: 12px; } .pay__etapes li.ici { color: var(--v-fg); border-color: color-mix(in srgb, var(--acc) 55%, var(--v-surf-line)); } .pay__etapes li.ici i { background: var(--acc); color: var(--v-bg); border-color: transparent; } .pay__etapes li.fait i { background: var(--v-fg); color: var(--v-bg); border-color: transparent; } .pay__panneau[hidden] { display: none; } .pay__h { font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.03em; line-height: 1.12; } .pay__sous { margin-top: 10px; color: var(--v-fg2); max-width: 60ch; } .pay__sous b { color: var(--v-fg); font-weight: 600; } .choixf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; } .choixf__c { position: relative; display: block; cursor: pointer; } .choixf__c input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .choixf__in { display: flex; flex-direction: column; gap: 6px; min-height: 150px; padding: 18px; border-radius: var(--v-rad-s); background: var(--v-surf); border: 1.5px solid var(--v-surf-line); transition: border-color .25s ease, transform .3s var(--v-ease); } .choixf__c:hover .choixf__in { transform: translateY(-2px); } .choixf__c input:checked + .choixf__in { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 10%, var(--v-surf)); } .choixf__c input:focus-visible + .choixf__in { outline: 2px solid var(--v-fg); outline-offset: 3px; } .choixf__k { font: 700 11px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--v-fg3); } .choixf__t { font-size: 17px; font-weight: 600; letter-spacing: -.01em; } .choixf__p { margin-top: auto; font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: .01em; } .choixf__p i { font-style: normal; font-family: var(--ui); font-weight: 600; font-size: 12px; color: var(--v-fg3); margin-left: 6px; letter-spacing: .04em; } .choixf__n { font-size: 12.5px; color: var(--v-fg3); } .choixf__n s { color: var(--v-fg2); } .pay__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; } .pay__acts--ok { justify-content: center; } .pay__deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 22px; } .pay__carte { padding: clamp(20px, 2.5vw, 28px); } .pay__carte .champ-f + .champ-f { margin-top: 16px; } .pay__mini { margin-top: 14px; font-size: 12.5px; color: var(--v-fg3); line-height: 1.5; } .pay__lignes { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; margin: 0; } .pay__lignes dt { color: var(--v-fg2); font-size: 15px; } .pay__lignes dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .pay__lignes .rem dd { color: var(--acc); } .pay__lignes .total { padding-top: 12px; border-top: 1px solid var(--v-line); font-size: 18px; } .pay__lignes .total dd { font-family: var(--display); font-weight: 400; font-size: 26px; letter-spacing: .01em; } .pay__puis { margin-top: 16px; font-size: 13.5px; color: var(--v-fg3); line-height: 1.5; } .pay__demo { margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--acc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); color: var(--v-fg); font-size: 13.5px; } .pay__mock { max-width: 560px; margin-top: 18px; } .pay__onglets { display: inline-flex; padding: 4px; border-radius: var(--v-pill); background: #ffffff0a; border: 1px solid var(--v-line); margin-bottom: 18px; } .pay__onglet { min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--v-pill); background: transparent; color: var(--v-fg2); font: 600 13.5px/1 var(--ui); cursor: pointer; } .pay__onglet[aria-selected="true"] { background: var(--v-fg); color: var(--v-bg); } .pay__grille3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; } .pay__twint { color: var(--v-fg2); font-size: 14.5px; line-height: 1.5; } .pay__qr { width: 160px; height: 160px; margin: 16px auto 0; border-radius: 16px; background: repeating-linear-gradient(90deg, #f4f4ef 0 8px, transparent 8px 16px), repeating-linear-gradient(0deg, #f4f4ef 0 8px, transparent 8px 16px); background-blend-mode: multiply; opacity: .55; } .pay__payer { width: 100%; justify-content: center; margin-top: 22px; } .pay__payer[disabled] { opacity: .6; cursor: progress; } .pay__okc { text-align: center; max-width: 640px; margin: 18px auto 0; } .pay__okc .pay__lignes { margin-top: 20px; text-align: left; } .pay__coche { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: var(--acc); color: var(--v-bg); font-size: 26px; font-weight: 800; } @media (max-width: 900px) { .choixf { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pay__deux { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .pay__etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pay__etapes li span { font-size: 12.5px; } .choixf { grid-template-columns: minmax(0, 1fr); } .choixf__in { min-height: 0; } .pay__grille3 { grid-template-columns: minmax(0, 1fr); } } /* le tunnel (paiement.html, décision Max 13.10) : rien que l'achat, chaque étape dans un écran. Mesuré avant : à 1440×900 le bouton « Continuer » tombait 290 px sous le pli, le titre d'entête prenait 534 px. Ici l'entête fait ~170 px, la barre descend à 12 px faute de bandeau. */ .tunnel .barre { top: 12px; width: min(calc(100% - 24px), 880px); } .barre__retour { margin: 0 auto 0 14px; padding: 8px 12px; border-radius: var(--v-pill); font: 600 13.5px/1 var(--ui); color: var(--v-fg2); text-decoration: none; white-space: nowrap; transition: color .2s ease, background-color .2s ease; } .barre__retour:hover { color: var(--v-fg); background: #ffffff10; } .entete--tunnel { padding: clamp(76px, 7vw, 92px) 0 clamp(8px, 1vw, 10px); } .tunnel .pay { padding-top: clamp(16px, 2vw, 22px); } .entete .pay__titre { margin-top: 6px; font-size: clamp(28px, 3.2vw, 40px); max-width: none; } .pied--tunnel { padding: 22px var(--v-gut) calc(18px + env(safe-area-inset-bottom)); } .pied__tunnel { max-width: var(--v-max); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font-size: 12.5px; color: var(--v-fg3); text-align: center; } .pied__tunnel a { color: var(--v-fg2); text-decoration: none; } .pied__tunnel a:hover { color: var(--v-fg); } .tunnel .pay__etapes { margin-bottom: clamp(16px, 2vw, 20px); } /* 1. la formule déjà choisie, confirmée d'un regard ; « Changer » ouvre la grille des sept */ .pay__choisie { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; padding: clamp(20px, 2.5vw, 28px); } .pay__choisie[hidden], #payChoixBloc[hidden] { display: none; } .pay__choisie-t { display: block; margin-top: 6px; font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; } .pay__choisie-n { display: block; margin-top: 8px; font-size: 13.5px; color: var(--v-fg3); } .pay__choisie-n s { color: var(--v-fg2); } .pay__choisie-p { grid-row: 1 / 3; grid-column: 2; margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(34px, 4vw, 48px); line-height: 1; letter-spacing: .01em; text-align: right; } .pay__choisie-p i { display: block; margin-top: 6px; font-style: normal; font-family: var(--ui); font-weight: 600; font-size: 12px; color: var(--v-fg3); letter-spacing: .04em; } .pay__choisie .btn-lien { grid-column: 1 / -1; justify-self: start; } .tunnel .choixf { margin-top: 18px; } .tunnel .choixf__in { min-height: 132px; padding: 16px; } /* 2. les coordonnées que la facture exige, sur deux colonnes ; le récapitulatif reste sous les yeux */ .pay__carte-h { margin-bottom: 16px; } .pay__grille { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .pay__grille .champ-f { grid-column: span 3; margin-top: 0; } .pay__grille .pay__large { grid-column: 1 / -1; } .pay__grille .pay__rue { grid-column: span 3; } .pay__grille .pay__npa { grid-column: span 1; } .pay__grille .pay__loc { grid-column: span 2; } .pay__form .champ-f__k { font-size: 13px; margin-bottom: 6px; } .pay__form .champ-f__in { min-height: 46px; padding: 0 14px; font-size: 15px; border-radius: 13px; } .pay__form .champ-f__aide { margin-top: 6px; font-size: 12.5px; line-height: 1.45; } .pay__opt { font-weight: 500; color: var(--v-fg3); } .pay__consent { margin-top: 16px; font-size: 13px; } .pay__acts--resume { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 16px; } .pay__acts--resume .btn-plein { justify-content: center; } .pay__acts--resume .btn-lien { align-self: center; } .pay__resume .pay__mini { margin-top: 14px; } .pay__err { margin-top: 12px; color: #FF7094; font-size: 13.5px; } .pay__err[hidden] { display: none; } .pay__resume { position: sticky; top: 90px; align-self: start; } .pay__deux { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } .pay__deux--paiement { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); } .tunnel .pay__mock { max-width: none; margin-top: 0; } .pay__lignes3 { margin-bottom: 14px; } .pay__okc .pay__mini { max-width: 48ch; margin-inline: auto; } @media (max-width: 900px) { .pay__deux, .pay__deux--paiement { grid-template-columns: minmax(0, 1fr); } .pay__resume { position: static; } } /* sur un téléphone, le bouton de l'étape reste sous le pouce */ @media (max-width: 640px) { .pay__acts--colle { position: sticky; bottom: 0; z-index: 5; margin: 16px calc(-1 * var(--v-gut)) 0; padding: 12px var(--v-gut) calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--v-bg) 72%, transparent); } .pay__acts--colle .btn-plein { flex: 1; justify-content: center; } .pay__resume .pay__acts--colle { margin-inline: calc(-1 * clamp(20px, 2.5vw, 28px)); padding-inline: clamp(20px, 2.5vw, 28px); background: linear-gradient(to top, var(--v-surf) 72%, transparent); } .pay__grille .champ-f, .pay__grille .pay__rue, .pay__grille .pay__loc { grid-column: 1 / -1; } .pay__grille .pay__npa { grid-column: span 2; } .pay__choisie { grid-template-columns: minmax(0, 1fr); } .pay__choisie-p { grid-row: auto; grid-column: 1; text-align: left; } } /* ==================================================================== LES TROIS GESTES + LA LICENCE QUI VOYAGE (enseignes.html) Porté de l'ancienne page enseigne/ (effet signature validé le 30.09.2026, dossier archivé le 20.10). L'entête porte la licence à droite du texte ; plus bas, la scène — le comptoir sur un téléphone, la licence posée à côté — reste collée à droite pendant que les trois gestes défilent à gauche. Sur ordinateur, un calque fixe (#voyageur) transporte la licence de l'entête jusqu'à la scène, recto puis verso puis recto (vitrine.js, bloc « au comptoir »). Tout ce qui bouge n'anime que transform et opacity ; les ombres sont des box-shadow posés une fois, jamais un filter. ==================================================================== */ /* l'entête de la page enseignes : le texte à gauche, la licence à droite */ .entete__in--doc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px); align-items: center; } .entete__doc { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; } .entete__doc .flotte { width: min(300px, 68vw); } .entete__doc .licLeg { margin-top: 18px; } /* le lien croisé, discret : une ligne sous le lede, pas un second appel à l'action */ .croise { margin-top: 14px; } .btn-lien--croise { min-height: 36px; font-size: 14px; color: var(--v-fg2); } .btn-lien--croise:hover { color: var(--v-fg); } .entete--doc .band__acts { margin-top: 22px; } @media (max-width: 999px) { .entete__in--doc { grid-template-columns: minmax(0, 1fr); } .entete__doc { margin-top: clamp(32px, 7vw, 56px); } .entete__doc .flotte { width: min(240px, 58vw); } } /* ---------- la section ---------- */ .gestes { padding-top: clamp(72px, 9vw, 130px); } .gestes__tete { max-width: 720px; } .gestes__tete .lede { margin-top: 18px; } .gestes__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); margin-top: clamp(32px, 4vw, 56px); } .gestes__l { list-style: none; grid-column: 1; grid-row: 1; } /* La scène colle à 14 % de la hauteur de l'écran : c'est aussi la fin du voyage (vitrine.js, `end: 'top 14%'`), pour que la carte se pose là où la scène s'arrête. */ .gestes__scene { grid-column: 2; grid-row: 1; position: sticky; top: 14vh; align-self: start; padding-bottom: 24px; } /* La composition : le téléphone à droite, la licence devant lui à gauche, un peu plus bas, comme une carte qu'on tend par-dessus le comptoir. Les deux partagent la même case de grille et se chevauchent de quelques pour cent. */ .gestes__compo { display: grid; grid-template-columns: minmax(0, 1fr); width: min(100%, 520px); margin: 0 auto; } .comptoir { grid-area: 1 / 1; justify-self: end; width: 50%; z-index: 1; } /* 52 % + 50 % : la licence mord de 2 % sur le téléphone — son bord et sa marge, jamais l'écran */ .gestes__doc { grid-area: 1 / 1; justify-self: start; align-self: center; width: 52%; margin-top: 14%; z-index: 2; position: relative; } .gestes__doc .lic { color: #edede7; box-shadow: 0 34px 70px -28px #000c, 0 30px 60px -16px #000a, 0 2px 0 #ffffff0a inset; } /* les trois gestes : le temps qu'on lit prend la main (ScrollTrigger, vitrine.js) */ .geste { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px 16px; align-content: center; min-height: 62vh; transition: opacity .5s var(--v-ease); } .js .geste { opacity: .32; } .js .geste.actif { opacity: 1; } .geste__n { grid-row: 1 / 3; display: grid; place-items: center; width: 32px; height: 32px; margin-top: .35em; border-radius: 50%; background: #ffffff12; font-size: 14px; font-weight: 600; transition: background-color .5s var(--v-ease), color .5s var(--v-ease); } .geste.actif .geste__n { background: var(--acc); color: var(--v-bg); } .geste h3 { font-size: clamp(26px, 2.9vw, 44px); font-weight: 600; letter-spacing: -.04em; line-height: 1.08; } .geste p { color: var(--v-fg2); font-size: 17px; line-height: 1.6; max-width: 40ch; } .geste p b { color: var(--v-fg); font-weight: 500; } /* ---------- le comptoir, sur un téléphone (gabarit CSS, pas d'image) ---------- DA « pro sobre » du comptoir : un seul accent froid, l'indigo, posé sur le téléphone seul. La seule couleur de volée qui entre sur l'écran est celle de la licence qu'il vient de lire (--c) : le même objet, vu du jeune puis du commerçant. */ .comptoir { --acc: #8a90ff; position: relative; aspect-ratio: 9 / 18.6; border-radius: 40px; overflow: hidden; background: #0b0b0c; border: 1px solid #ffffff26; padding: 14px 11px; color: var(--v-fg); box-shadow: 0 0 0 7px #141417, 0 0 0 8px #ffffff14, 0 50px 100px -40px #000, 0 30px 70px -30px color-mix(in srgb, var(--acc) 50%, transparent); } .comptoir::before { content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 84px; height: 22px; border-radius: 12px; background: #050506; z-index: 3; } .comptoir__ecran { height: 100%; overflow: hidden; padding-top: 30px; display: flex; flex-direction: column; gap: 10px; font-size: 12px; line-height: 1.35; } .comptoir__haut { display: flex; justify-content: space-between; align-items: center; } .comptoir__m { font-family: var(--display); font-size: 13px; letter-spacing: .05em; } .comptoir__pill { font-size: 10px; color: var(--v-fg3); padding: 3px 8px; border-radius: var(--v-pill); border: 1px solid var(--v-line); } /* Le sélecteur de vue tient dans l'écran quelle que soit la langue (« Meine Angebote ») : les onglets inactifs se compriment et se coupent, l'actif reste entier. */ .comptoir__seg { align-self: center; max-width: 100%; display: inline-flex; gap: 3px; padding: 3px; border-radius: var(--v-pill); background: var(--v-surf); border: 1px solid var(--v-surf-line); } .comptoir__seg span { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 6px 9px; border-radius: var(--v-pill); font: 600 10px/1 var(--ui); color: var(--v-fg3); white-space: nowrap; } .comptoir__seg span.on { flex: none; background: var(--acc); color: var(--v-bg); } .comptoir__k { display: flex; align-items: center; gap: 6px; font: 700 9.5px/1 var(--ui); text-transform: uppercase; letter-spacing: .08em; color: var(--v-fg3); } .comptoir__k em { margin-left: auto; font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; } /* Les trois états de l'écran « Valider », empilés dans la même case ; seul celui du geste en cours est visible. Opacité et translation, rien d'autre. */ .comptoir__etats { display: grid; min-height: 118px; } .comptoir__etats > * { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity .4s var(--v-ease), transform .55s var(--v-ease); } .comptoir[data-etat="montre"] .comptoir__valider, .comptoir[data-etat="valide"] .comptoir__saisie, .comptoir[data-etat="compte"] .comptoir__ok { opacity: 1; transform: none; } /* 1. le bouton « Valider un passage », comme dans le comptoir (.valider, pro.css) */ .comptoir__valider { align-self: center; min-height: 76px; border-radius: 20px; background: var(--v-fg); color: var(--v-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 10px 12px; text-align: center; box-shadow: 0 14px 36px -12px var(--acc); } .comptoir__valider b { font: 600 13px/1 var(--ui); } .comptoir__valider span { font: 500 10px/1.3 var(--ui); color: #0b0b0c; opacity: .55; } /* 2. le code du moment, saisi (le vrai code de cette licence, qui change toutes les 30 s) */ .comptoir__saisie { display: flex; flex-direction: column; gap: 7px; } .comptoir__code { display: block; text-align: center; font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1; letter-spacing: .14em; padding: 12px 6px; border-radius: 14px; border: 1px dashed #ffffff33; background: #ffffff0a; font-variant-numeric: tabular-nums; } .comptoir__go { align-self: stretch; text-align: center; padding: 10px 12px; border-radius: var(--v-pill); background: var(--acc); color: var(--v-bg); font: 700 11.5px/1 var(--ui); } /* 3. la coche dans la couleur de la licence lue, la volée, le passage compté */ .comptoir__ok { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; } .comptoir__check { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c, var(--acc)); color: #0b0b0c; font-size: 24px; font-weight: 700; } .comptoir__volee { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1; color: var(--c, var(--acc)); } .comptoir__compte { font: 500 11px/1.3 var(--ui); color: var(--v-fg2); } /* l'offre active en ce moment, comme .offreActive.on du comptoir */ .comptoir__offre { display: grid; gap: 5px; padding: 10px 12px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); background: color-mix(in srgb, var(--acc) 10%, var(--v-surf)); } .comptoir__offre .comptoir__k { color: var(--acc); } .comptoir__offre .comptoir__k i { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px var(--acc); } .comptoir__r { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1; color: var(--v-fg); } .comptoir__r i { font-style: normal; font-size: .62em; } .comptoir__r span { font-family: var(--ui); font-weight: 600; font-size: 10.5px; color: var(--v-fg2); margin-left: 4px; } .comptoir__j { font-size: 10px; color: var(--v-fg3); } /* « Mon mois » en miniature : sept volées, la sienne en couleur ; au troisième geste, sa barre monte d'un cran (transform seulement). Un exemple, et l'écran le dit. */ .comptoir__mois { display: grid; gap: 8px; padding: 10px 12px; border-radius: 16px; background: var(--v-surf); border: 1px solid var(--v-surf-line); } .comptoir__barres { display: flex; align-items: flex-end; gap: 4px; height: 34px; } .comptoir__barres i { flex: 1; height: 100%; border-radius: 2px; background: var(--c); opacity: .22; transform: scaleY(var(--h)); transform-origin: bottom; transition: transform .7s var(--v-ease), opacity .5s var(--v-ease); } .comptoir__barres i.moi { opacity: 1; } .comptoir[data-etat="compte"] .comptoir__barres i.moi { transform: scaleY(calc(var(--h) + .3)); } /* ---------- le calque du voyage (ordinateur seulement) ---------- */ .voyageur { position: fixed; top: 0; left: 0; z-index: 30; transform-origin: 0 0; will-change: transform; perspective: 1600px; } .voyageur[hidden] { display: none; } .voyageur__faces { position: relative; transform-style: preserve-3d; will-change: transform; } .voyageur__recto, .voyageur__verso { -webkit-backface-visibility: hidden; backface-visibility: hidden; } .voyageur__recto { position: relative; } .voyageur__recto .lic { color: #edede7; box-shadow: 0 34px 70px -28px #000c, 0 30px 60px -16px #000a, 0 2px 0 #ffffff0a inset; } /* Le verso : le même format que la licence, un bord dans la couleur choisie, et trois mots. */ .voyageur__verso { position: absolute; inset: 0; transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: space-between; padding: 7% 8%; border-radius: var(--r-doc); border: 1px solid #33333a; background: linear-gradient(90deg, transparent 0 88%, color-mix(in srgb, var(--acc) 70%, transparent) 88% 100%), linear-gradient(168deg, var(--s3), var(--s1) 55%, #08080a); box-shadow: 0 48px 90px -30px #000e; container-type: inline-size; } .verso__wm { font-family: var(--display); font-size: 5cqw; letter-spacing: .04em; color: #edede7; } .verso__t { display: flex; flex-direction: column; font-family: var(--display); font-size: 12.5cqw; line-height: .98; text-transform: uppercase; color: #edede7; } .verso__acc { color: var(--acc); } .verso__p { max-width: 78%; font-size: 4.2cqw; line-height: 1.45; color: #b7b7b0; } /* En mode voyage, les licences d'origine gardent leur place mais s'effacent : c'est le calque qui les montre. Opacité ET visibilité : certaines couches du document (tampon, zone codée) reposent `visibility` selon la phase de fabrication. */ .mode-voyage #licOuv, .mode-voyage #licGeste { visibility: hidden; opacity: 0; pointer-events: none; } /* téléphone et tablette : la scène en haut, réduite et collante sous la barre, les gestes défilent dessous ; un fondu au bas de la scène évite que les lignes passent net sous elle */ @media (max-width: 999px) { .gestes__grille { grid-template-columns: minmax(0, 1fr); gap: 0; } .gestes__scene { grid-column: 1; grid-row: 1; top: 100px; z-index: 3; padding-bottom: 30px; background: linear-gradient(180deg, var(--v-bg) 84%, #0b0b0c00); } .gestes__l { grid-column: 1; grid-row: 2; } .gestes__compo { width: min(100%, 330px); } .comptoir { width: 50%; border-radius: 28px; padding: 9px 7px; box-shadow: 0 0 0 5px #141417, 0 0 0 6px #ffffff14, 0 40px 80px -36px #000; } .comptoir::before { top: 7px; width: 56px; height: 14px; } .comptoir__ecran { padding-top: 20px; gap: 7px; } .comptoir__m { font-size: 11px; } .comptoir__pill { font-size: 8.5px; padding: 2px 6px; } .comptoir__seg span { padding: 4px 6px; font-size: 8px; } .comptoir__k { font-size: 8px; } .comptoir__etats { min-height: 84px; } .comptoir__valider { min-height: 54px; border-radius: 14px; gap: 3px; padding: 6px 8px; } .comptoir__valider b { font-size: 10.5px; } .comptoir__valider span { font-size: 8px; } .comptoir__code { font-size: 16px; padding: 8px 4px; border-radius: 10px; } .comptoir__go { padding: 7px 8px; font-size: 9.5px; } .comptoir__check { width: 30px; height: 30px; font-size: 16px; } .comptoir__volee { font-size: 17px; } .comptoir__compte { font-size: 9px; } .comptoir__offre, .comptoir__mois { padding: 7px 8px; border-radius: 11px; gap: 4px; } .comptoir__r { font-size: 17px; } .comptoir__r span { font-size: 8.5px; } .comptoir__j { font-size: 8.5px; } .comptoir__barres { height: 22px; gap: 3px; } .gestes__doc { width: 53%; margin-top: 18%; } .geste { min-height: 60svh; align-content: start; padding-top: 22px; grid-template-columns: 32px minmax(0, 1fr); gap: 6px 12px; } .geste__n { width: 28px; height: 28px; font-size: 13px; margin-top: .25em; } .geste h3 { font-size: clamp(22px, 5.6vw, 30px); } .geste p { font-size: 15.5px; } } @media (prefers-reduced-motion: reduce) { .geste, .geste__n, .comptoir__etats > *, .comptoir__barres i { transition: none; } } /* ==================================================================== DÉMO (/demo/) — rien de ceci n'est rendu en mode public : les logos de marques (données chargées seulement sous /demo/), le mur de logos, l'annuaire, l'étiquette « démo » de la barre. Repris de la démo du 12.10 (junior.css). ==================================================================== */ .ens__logo--img { background: #f4f4ef; box-shadow: inset 0 0 0 1px #00000014; } .ens__logo--img::after { content: none; } .ens__logo--img img { position: relative; z-index: 2; width: 74%; height: 74%; object-fit: contain; } .adeal__cover .ens__logo--img { background: #f4f4efe6; } .marq__it .ens__logo--img img { width: 78%; height: 78%; } .logos { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px 12px; } .logo { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; text-align: center; min-width: 0; } .logo__t { display: block; width: 100%; } .logo__t .ens__logo { width: 100%; height: auto; aspect-ratio: 1; border-radius: 20px; transition: transform .3s var(--v-ease); } .logo:hover .ens__logo { transform: translateY(-3px); } .logo b { font-size: 13.5px; font-weight: 600; line-height: 1.2; } .logo > span:last-child { font-size: 11.5px; color: var(--v-fg3); } .pagehead { padding: clamp(150px, 15vw, 190px) 0 clamp(20px, 3vw, 36px); } .pagehead .lede { margin-top: 16px; } .pagehead .cherche { margin-top: 22px; max-width: 520px; } .lettres { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; } .lettres a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--v-line); background: #ffffff08; color: var(--v-fg2); font: 600 13px/1 var(--ui); text-decoration: none; transition: background-color .2s ease, color .2s ease; } .lettres a:hover { background: #ffffff14; color: var(--v-fg); } .lettre { margin-top: 34px; scroll-margin-top: 140px; } .lettre[hidden] { display: none; } .lettre h2 { font-family: var(--display); font-weight: 400; font-size: 34px; letter-spacing: .02em; padding-bottom: 8px; border-bottom: 1px solid var(--v-line); } .mrow { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--v-surf-line); scroll-margin-top: 140px; } .mrow[hidden] { display: none; } .mrow .ens__logo { width: 52px; height: 52px; border-radius: 15px; } .mrow b { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; } .mrow span { font-size: 13px; color: var(--v-fg3); white-space: nowrap; } .mvide { margin-top: 30px; color: var(--v-fg3); } .mvide[hidden] { display: none; } @media (max-width: 900px) { .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; } .logo b { font-size: 12.5px; } } .barre__demo { flex: none; margin-left: 8px; padding: 5px 9px; border-radius: var(--v-pill); background: color-mix(in srgb, var(--acc) 22%, transparent); color: var(--acc); font: 700 10.5px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; } @media (max-width: 480px) { .barre__demo { display: none; } } /* ==================================================================== PARTOUT EN SUISSE (dans toute la démo — décision Max 13.10) : la ville du visiteur dès la première image, la pastille pour en changer, la carte vivante. ==================================================================== */ .hero__ou { margin-bottom: 10px; color: var(--v-fg2); } .hero__ou b { color: var(--v-fg); font-weight: 700; } .hero__ou[hidden] { display: none; } .hero__ou .btn-lien { margin-left: 10px; font-size: 12px; letter-spacing: 0; text-transform: none; } .hero__ville { margin-top: 14px; } .hero__ville:empty { display: none; } /* la pastille de ville : un bouton, un menu */ .vpill { position: relative; display: inline-block; } .vpill__b { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 14px 0 16px; border-radius: var(--v-pill); border: 1px solid var(--v-line); background: #ffffff0a; color: var(--v-fg); font: 600 14.5px/1 var(--ui); cursor: pointer; transition: border-color .2s ease, background-color .2s ease; } .vpill__b:hover { border-color: var(--v-fg3); background: #ffffff10; } .vpill__b:focus-visible { outline: 2px solid var(--v-fg); outline-offset: 3px; } .vpill__k { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--v-fg3); font-weight: 700; } .vpill__b i { font-style: normal; color: var(--v-fg3); font-size: 12px; } /* le menu : toutes les villes d'un coup, sur deux colonnes, jamais d'ascenseur (le Mac le cache et on croit qu'il manque des villes) */ .vpill__menu { position: fixed; z-index: 1000; width: max-content; min-width: 440px; max-width: calc(100vw - 24px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 6px; padding: 8px; border-radius: 18px; background: #23242c; border: 1px solid var(--v-surf-line); box-shadow: 0 24px 60px -20px #000c; overscroll-behavior: contain; } .vpill__menu .vpill__pos { grid-column: 1 / -1; } .vpill__menu[hidden] { display: none; } .vpill__menu button { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 12px; background: none; color: var(--v-fg2); font: 600 14px/1.2 var(--ui); text-align: left; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .vpill__menu button span { font-size: 12px; color: var(--v-fg3); font-weight: 500; } .vpill__menu button:hover, .vpill__menu button[aria-selected="true"] { background: #ffffff0e; color: var(--v-fg); } .vpill__menu .vpill__pos { display: flex; justify-content: flex-start; align-items: center; gap: 10px; margin: 0 2px 8px; padding: 11px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--v-fg); font-weight: 700; transition: background-color .2s ease, border-color .2s ease, transform .2s var(--v-ease); } .vpill__menu .vpill__pos svg { flex: none; color: var(--acc); } .vpill__menu .vpill__pos:hover, .vpill__menu .vpill__pos:focus-visible { background: color-mix(in srgb, var(--acc) 24%, transparent); border-color: var(--acc); } .vpill__menu .vpill__pos:active { transform: scale(.985); } /* la carte vivante */ .suisse__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; } .suisse__compte { margin-top: 18px; font-size: 14.5px; color: var(--v-fg2); } .suisse__compte b { color: var(--v-fg); font-weight: 600; } .suisse__compte[hidden] { display: none; } .suisse__pub { margin-top: 14px; font-size: 14px; color: var(--v-fg3); max-width: 46ch; line-height: 1.5; } /* coupée à sa boîte : zoomée sur un canton, la carte dessinerait sinon tout le pays par-dessus le texte (vu par Max le 13.10 à 2000 px) */ .chmap { width: 100%; height: auto; display: block; overflow: hidden; border-radius: 24px; } .chmap__pays { fill: #ffffff0a; stroke: var(--v-line); stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: fill .6s ease; } .chmap__v { cursor: pointer; outline: none; } .chmap__halo { fill: var(--acc); opacity: 0; transform-origin: 0 0; } .chmap__v--on .chmap__halo { animation: chPulse 3.4s var(--v-ease) infinite; } .chmap__pt { fill: var(--v-fg3); stroke: var(--v-bg); stroke-width: 2; transition: fill .3s ease; } .chmap__v--on .chmap__pt, .chmap__v:hover .chmap__pt, .chmap__v:focus-visible .chmap__pt { fill: var(--acc); } .chmap__t { font: 600 10.5px var(--ui); fill: var(--v-fg3); text-anchor: start; pointer-events: none; } .chmap__v:hover .chmap__t { fill: var(--v-fg); } .chmap__v--toi .chmap__pt { fill: var(--v-fg); } .chmap__v--toi .chmap__t { font-size: 13px; font-weight: 700; fill: var(--v-fg); } .chmap__v--toi .chmap__halo { animation: chPulse 2.2s var(--v-ease) infinite; animation-delay: .4s; } .chmap__toi { font: 700 9px var(--ui); letter-spacing: .12em; text-transform: uppercase; fill: var(--acc); text-anchor: start; pointer-events: none; } @keyframes chPulse { 0% { transform: scale(.35); opacity: .4; } 100% { transform: scale(1.8); opacity: 0; } } .suisse__leg { margin-top: 10px; font-size: 12.5px; color: var(--v-fg3); text-align: center; } @media (max-width: 640px) { .vpill__menu button { padding: 11px 10px; } } @media (max-width: 900px) { .suisse__in { grid-template-columns: minmax(0, 1fr); } .chmap__t { display: none; } .chmap__v--toi .chmap__t { display: block; } } @media (prefers-reduced-motion: reduce) { .chmap__halo { animation: none !important; opacity: .18; } } /* ---------- les vraies enseignes : une ville naît de ses commerces signés ---------- */ .tcard--reel { border-color: color-mix(in srgb, var(--acc) 55%, var(--v-surf-line)); } .tcard--reel::after { content: attr(data-ville-nom); position: absolute; top: 10px; right: 12px; padding: 3px 8px; border-radius: var(--v-pill); background: color-mix(in srgb, var(--acc) 18%, transparent); color: var(--acc); font: 700 10.5px/1 var(--ui); letter-spacing: .04em; } .tsect--reel .tsectH b { color: var(--acc); } .tsect--ex { opacity: .78; } .tsect--ex .tsectH b { color: var(--v-fg3); font-weight: 600; } .tcard--ex { border-style: dashed; } .vpill__grp { grid-column: 1 / -1; padding: 8px 12px 4px; font: 700 10.5px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--v-fg3); } .vpill__menu .vpill__reel b { color: var(--acc); } .chmap__v--reel .chmap__pt { fill: var(--v-fg); stroke: var(--acc); stroke-width: 2.5; } .chmap__v--reel .chmap__t { fill: var(--v-fg); font-weight: 700; } .chmap__v--reel .chmap__halo { animation: chPulse 2.6s var(--v-ease) infinite; } /* ---------- en ligne, partout en Suisse : les familles d'offres ---------- */ .enligne { margin-top: clamp(36px, 5vw, 64px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--v-line); } .enligne--page { margin-top: 0; padding-top: 0; border-top: 0; } .enligne__tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px clamp(24px, 4vw, 56px); align-items: end; margin-bottom: 22px; } .enligne__h { margin-top: 8px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; letter-spacing: -.03em; line-height: 1.12; } .enligne__lede { color: var(--v-fg2); font-size: 15px; line-height: 1.55; max-width: 48ch; } .enligne__note { margin-top: 16px; font-size: 13px; color: var(--v-fg3); } .familles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .famille { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 14px; border-radius: var(--v-rad-s); background: var(--v-surf); border: 1px solid var(--v-surf-line); transition: transform .3s var(--v-ease), border-color .3s var(--v-ease); } .famille:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--acc) 40%, var(--v-surf-line)); } .famille__ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--acc); margin-bottom: 6px; } .famille__ico svg { width: 22px; height: 22px; } .famille b { font-size: 15.5px; font-weight: 600; } .famille__genre { font-size: 12.5px; color: var(--v-fg2); } .famille__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .famille__chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 5px; border-radius: var(--v-pill); background: #ffffff0a; border: 1px solid var(--v-line); font-size: 11.5px; font-weight: 600; color: var(--v-fg2); } .famille__chip img { width: 18px; height: 18px; border-radius: 5px; background: #f4f4ef; object-fit: contain; } .famille__tag { margin-top: auto; padding-top: 10px; font: 700 10px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--v-fg3); } .bascule2 { display: inline-flex; align-self: flex-start; padding: 4px; border-radius: var(--v-pill); background: #ffffff0a; border: 1px solid var(--v-line); } .bascule2[hidden] { display: none; } .bascule2 button { min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--v-pill); background: transparent; color: var(--v-fg2); font: 600 13.5px/1 var(--ui); cursor: pointer; } .bascule2 button[aria-selected="true"] { background: var(--v-fg); color: var(--v-bg); } .enligne--page[hidden] { display: none; } @media (max-width: 900px) { .familles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .enligne__tete { grid-template-columns: minmax(0, 1fr); align-items: start; } } /* ---------- la carte par cantons : contours cliquables, zoom, regroupement ---------- */ .suisse__carte { position: relative; } .chmap__canton { fill: transparent; stroke: #ffffff14; stroke-width: 1; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .25s ease; } .chmap__canton:hover { fill: color-mix(in srgb, var(--acc) 9%, transparent); } .chmap__canton--on { fill: color-mix(in srgb, var(--acc) 7%, transparent); stroke: color-mix(in srgb, var(--acc) 60%, transparent); } .chmap__retour { position: absolute; top: 10px; left: 10px; min-height: 34px; padding: 0 12px; border-radius: var(--v-pill); border: 1px solid var(--v-line); background: #23242cf0; color: var(--v-fg); font: 600 12.5px/1 var(--ui); cursor: pointer; } .chmap__retour[hidden] { display: none; } .chmap__n { font: 700 9.5px var(--ui); fill: var(--v-bg); text-anchor: middle; pointer-events: none; } .chmap__v--grp .chmap__pt { fill: var(--acc); } /* ---------- ta ville par NPA : la recherche dans la pastille, la note honnête ---------- */ .vpill__cherche { grid-column: 1 / -1; position: relative; padding: 2px 2px 6px; } .vpill__in { width: 100%; min-height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--v-line); background: #ffffff08; color: var(--v-fg); font: 500 14.5px/1 var(--ui); -webkit-appearance: none; appearance: none; } .vpill__in::placeholder { color: var(--v-fg3); } .vpill__in:focus { outline: none; border-color: var(--acc); } .vpill__sugg { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; } .vpill__sugg[hidden] { display: none; } .vpill__sugg button { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; background: #ffffff06; color: var(--v-fg); font: 600 14px/1.2 var(--ui); text-align: left; cursor: pointer; } .vpill__sugg button:hover { background: #ffffff10; } .vpill__sugg button span { font-size: 12px; color: var(--v-fg3); font-weight: 500; } .vpill__aucune { padding: 8px 12px; font-size: 12.5px; color: var(--v-fg3); } .villeNote { margin-bottom: 18px; padding: 14px 16px; border-radius: var(--v-rad-s); border: 1px solid color-mix(in srgb, var(--acc) 35%, var(--v-surf-line)); background: color-mix(in srgb, var(--acc) 7%, transparent); font-size: 14px; color: var(--v-fg2); line-height: 1.5; } .villeNote b { color: var(--v-fg); font-weight: 600; } .villeNote[hidden] { display: none; } /* la carte des signées (page des enseignes, couche « toute la Suisse ») */ .fond__carte { margin-top: 22px; } .fond__carte[hidden], .fond__on[hidden], .fond__pre[hidden] { display: none; } .fond__vide { margin: 0; padding: 16px 18px; border-radius: 16px; border: 1px dashed var(--v-line); font-size: 14px; line-height: 1.5; color: var(--v-fg3); text-align: center; } .fond__on { max-width: 720px; margin: 0 auto; } .chmap--fond .chmap__canton { cursor: default; } .chmap--fond .chmap__canton:hover { fill: transparent; } .chmap--fond .chmap__v { cursor: pointer; } .fond__pre { display: block; margin-top: 6px; color: var(--v-fg2); } .slot--signee { border-style: solid; color: var(--v-fg); text-decoration: none; display: grid; align-content: center; justify-items: center; gap: 2px; } .slot--signee img { display: block; max-height: 30px; max-width: 110px; margin-bottom: 6px; object-fit: contain; } .slot--signee b { font-weight: 700; } .slot--signee span { font-size: 12px; color: var(--v-fg3); } .villeNote__pre { display: block; margin-top: 6px; color: var(--v-fg); } .fond__demo { color: var(--v-fg3); font-weight: 500; } /* la carte se balade (prototype/src/ui/navigation-carte.js) : la scène reçoit les gestes, le SVG ne porte que les contours, les villes sont des marqueurs HTML (texte et halos composés par le navigateur, sans repeindre le SVG à chaque image) */ .chmap__scene { position: relative; border-radius: 24px; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none; isolation: isolate; } .chmap__scene .chmap { border-radius: 0; overflow: visible; display: block; } .chmap__scene.chmap--prise { touch-action: none; } .chmap__scene.chmap--glisse, .chmap--glisse .chmap__canton, .chmap--glisse .chmarq { cursor: grabbing; } .chmap__scene:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--acc) 55%, transparent); } .chmap__scene .chmap__canton { cursor: grab; } .chmap__marqs { position: absolute; inset: 0; pointer-events: none; } .chmarq { position: absolute; left: 0; top: 0; width: 0; height: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--v-fg3); font: 600 10.5px/1 var(--ui); cursor: pointer; pointer-events: auto; will-change: transform; outline: none; -webkit-tap-highlight-color: transparent; } .chmarq__pt, .chmarq__halo, .chmarq__n { position: absolute; border-radius: 50%; } .chmarq__pt { left: -4.5px; top: -4.5px; width: 9px; height: 9px; background: var(--v-fg3); box-shadow: 0 0 0 2px var(--v-bg); transition: background-color .3s ease, transform .25s var(--v-ease); } .chmarq--on .chmarq__pt, .chmarq:hover .chmarq__pt, .chmarq:focus-visible .chmarq__pt { background: var(--acc); } .chmarq:hover .chmarq__pt, .chmarq:focus-visible .chmarq__pt { transform: scale(1.35); } .chmarq__halo { left: -16px; top: -16px; width: 32px; height: 32px; background: var(--acc); opacity: 0; } .chmarq--on .chmarq__halo { animation: chPulse 3.4s var(--v-ease) infinite; } .chmarq--toi .chmarq__pt { left: -6.5px; top: -6.5px; width: 13px; height: 13px; background: var(--v-fg); } .chmarq--toi .chmarq__halo { animation: chPulse 2.2s var(--v-ease) infinite; animation-delay: .4s; } .chmarq--toi .chmarq__t { font-size: 13px; font-weight: 700; color: var(--v-fg); } .chmarq--reel .chmarq__pt { left: -5.5px; top: -5.5px; width: 11px; height: 11px; background: var(--v-fg); box-shadow: 0 0 0 2.5px var(--acc); } .chmarq--reel .chmarq__t { color: var(--v-fg); font-weight: 700; } .chmarq--reel .chmarq__halo { animation: chPulse 2.6s var(--v-ease) infinite; } .chmarq--grp .chmarq__pt { left: -8px; top: -8px; width: 16px; height: 16px; background: var(--acc); } .chmarq__n { left: -8px; top: -8px; width: 16px; height: 16px; display: grid; place-items: center; font: 700 9.5px/1 var(--ui); color: var(--v-bg); pointer-events: none; } .chmarq__t, .chmarq__s { position: absolute; white-space: nowrap; pointer-events: none; line-height: 1; } .chmarq__s { font: 700 9px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--acc); } .chmarq:hover .chmarq__t { color: var(--v-fg); } .chmarq--d .chmarq__t { left: 10px; top: -6px; } .chmarq--d .chmarq__s { left: 10px; top: 8px; } .chmarq--g .chmarq__t { right: 10px; top: -6px; } .chmarq--g .chmarq__s { right: 10px; top: 8px; } .chmarq--b .chmarq__t { left: 0; top: 11px; transform: translateX(-50%); } .chmarq--b .chmarq__s { left: 0; top: 25px; transform: translateX(-50%); } .chmarq--h .chmarq__t { left: 0; bottom: 11px; transform: translateX(-50%); } .chmarq--h .chmarq__s { left: 0; bottom: 25px; transform: translateX(-50%); } .chmarq--toi.chmarq--d .chmarq__t, .chmarq--toi.chmarq--g .chmarq__t { top: -7px; } .chmarq--toi.chmarq--d .chmarq__s, .chmarq--toi.chmarq--g .chmarq__s { top: 9px; } .chmap--pause .chmarq__halo { animation-play-state: paused; } @media (max-width: 900px) { .chmarq__t, .chmarq__s { display: none; } .chmarq--toi .chmarq__t, .chmarq--toi .chmarq__s, .chmarq--reel .chmarq__t, .chmarq--grp .chmarq__t, .chmap--zoom .chmarq__t { display: block; } } @media (prefers-reduced-motion: reduce) { .chmarq__halo { animation: none !important; opacity: .18; } } .chmap__ctl { position: absolute; right: 10px; bottom: 42px; display: grid; gap: 6px; } .chmap__btn { width: 36px; height: 36px; border-radius: 11px; border: 1px solid var(--v-line); background: #23242cf0; color: var(--v-fg); font: 600 19px/1 var(--ui); cursor: pointer; display: grid; place-items: center; transition: border-color .2s ease, transform .2s var(--v-ease); } .chmap__btn:hover { border-color: var(--acc); } .chmap__btn:active { transform: scale(.94); } .chmap__aide { position: absolute; left: 50%; bottom: 46px; transform: translate(-50%, 0); margin: 0; padding: 9px 13px; border-radius: var(--v-pill); background: #23242cf0; border: 1px solid var(--v-line); color: var(--v-fg); font: 500 12.5px/1.2 var(--ui); pointer-events: none; opacity: 0; transition: opacity .25s ease; white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; } .chmap__aide.est-visible { opacity: 1; } .chmap__aide[hidden] { display: none; } /* ---------- PISTE « une carte qui se mérite » (progression.html, démo) ---------- */ .prog__piste { display: inline-block; padding: 4px 11px; border-radius: var(--v-pill); border: 1px solid color-mix(in srgb, var(--acc) 50%, transparent); background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--v-fg); font: 700 11px/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; } .prog__demo { padding: 40px 0; text-align: center; color: var(--v-fg3); font-size: 15px; } .prog__grille { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; } .prog__carte { max-width: 320px; margin: 0 auto; width: 100%; } .prog__carte .lic { box-shadow: 0 34px 70px -28px #000c, 0 30px 60px -16px #000a, 0 2px 0 #ffffff0a inset; color: #edede7; } .prog__carte .lic::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; opacity: calc(var(--patine, 0) * .55); transition: opacity .45s var(--v-ease); background: repeating-linear-gradient(118deg, #ffffff05 0 2px, transparent 2px 7px), radial-gradient(120% 90% at 30% 0%, transparent 60%, #0007 100%); } .prog__anc { display: block; font: 700 15px/1.3 var(--ui); color: var(--v-fg); margin-bottom: 14px; min-height: 2.2em; } .prog__slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--acc) 22%, var(--v-surf-line)); outline: none; } .prog__slider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--acc); border: 3px solid var(--v-bg); box-shadow: 0 2px 10px -2px #000a; cursor: pointer; transition: transform .15s var(--v-ease); } .prog__slider::-webkit-slider-thumb:active { transform: scale(1.12); } .prog__slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--acc); border: 3px solid var(--v-bg); cursor: pointer; } .prog__ech { display: flex; justify-content: space-between; margin-top: 8px; font: 600 11px/1 var(--ui); color: var(--v-fg3); } .prog__note { margin-top: 16px; font-size: 13px; color: var(--v-fg3); line-height: 1.5; } .passeport__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .pstamp { display: grid; place-items: center; gap: 8px; padding: 18px 10px; border-radius: 18px; border: 1px dashed var(--v-surf-line); background: var(--v-surf); color: var(--v-fg3); cursor: pointer; transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s var(--v-ease); } .pstamp svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .5; transition: opacity .2s ease, transform .3s var(--v-ease); } .pstamp b { font: 600 12px/1 var(--ui); } .pstamp:hover { border-color: color-mix(in srgb, var(--acc) 45%, var(--v-surf-line)); } .pstamp[aria-pressed="true"] { border-style: solid; border-color: var(--acc); background: color-mix(in srgb, var(--acc) 13%, var(--v-surf)); color: var(--v-fg); } .pstamp[aria-pressed="true"] svg { opacity: 1; color: var(--acc); transform: rotate(-7deg) scale(1.06); } .passeport__compte { margin-top: 16px; text-align: center; font: 700 14px/1 var(--ui); color: var(--v-fg2); } .prog--duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 40px); } .prog__bloc { padding: 24px; border-radius: 20px; border: 1px solid var(--v-surf-line); background: var(--v-surf); } .prog__h3 { font: 700 18px/1.3 var(--ui); margin: 0 0 10px; color: var(--v-fg); } .prog__bloc p { margin: 0; color: var(--v-fg2); line-height: 1.55; font-size: 14.5px; } @media (max-width: 820px) { .prog__grille { grid-template-columns: minmax(0, 1fr); } .prog__carte { max-width: 260px; } .passeport__grille { grid-template-columns: repeat(2, 1fr); } .prog--duo { grid-template-columns: minmax(0, 1fr); } }