/* Engendré par site-refonte/outils/construire-accueil.py depuis site-refonte/accueil/css/ (commentaires retirés : ils sont dans les sources) ; ne pas modifier à la main. */
/* 00-jetons.css */
@font-face {
font-family: "Ysabeau"; font-style: normal; font-weight: 300 700; font-display: swap;
src: url(/assets/polices/ysabeau.woff2?v=9ab9c742fa) format("woff2");
}
@font-face {
font-family: "Ysabeau"; font-style: italic; font-weight: 300 700; font-display: swap;
src: url(/assets/polices/ysabeau-italique.woff2?v=4bb333bd36) format("woff2");
}
@font-face {
font-family: "Ysabeau sphère"; font-style: normal; font-weight: 300 700; font-display: block;
src: url(/assets/polices/ysabeau.woff2?v=9ab9c742fa) format("woff2");
}
@font-face {
font-family: "Ysabeau secours"; font-style: normal; font-weight: 100 479;
src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"), local("Roboto-Regular");
size-adjust: 92.3%; ascent-override: 114.2%; descent-override: 31.3%; line-gap-override: 0%;
}
@font-face {
font-family: "Ysabeau secours"; font-style: normal; font-weight: 480 579;
src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"), local("Roboto-Regular");
size-adjust: 92.5%; ascent-override: 113.9%; descent-override: 31.2%; line-gap-override: 0%;
}
@font-face {
font-family: "Ysabeau secours"; font-style: normal; font-weight: 580 649;
src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"), local("Roboto Bold"), local("Roboto-Bold");
size-adjust: 89.6%; ascent-override: 117.6%; descent-override: 32.3%; line-gap-override: 0%;
}
@font-face {
font-family: "Ysabeau secours"; font-style: normal; font-weight: 650 1000;
src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"), local("Roboto Bold"), local("Roboto-Bold");
size-adjust: 87.3%; ascent-override: 120.7%; descent-override: 33.1%; line-gap-override: 0%;
}
:root {
--nuit: #07070a;
--nuit-2: #0d0d12;
--texte: #eeedf1;
--texte-2: #b9b6c2;
--texte-3: #9a97a4;
--trait: rgba(255,255,255,.10);
--ambiance: #FFCC3D;
--police-titre: "Ysabeau", "Ysabeau secours", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--police-texte: "Ysabeau", "Ysabeau secours", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--police-sphere: "Ysabeau sphère", "Ysabeau secours", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--rond: var(--police-titre);
--sans: var(--police-texte);
--sortie: cubic-bezier(0.22, 1, 0.36, 1);
--entree-sortie: cubic-bezier(0.65, 0, 0.35, 1);
--t-retour: 160ms;
--t-transition: 260ms;
--t-apparition: 520ms;
color-scheme: dark;
accent-color: var(--ambiance);
}
/* 01-base.css */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; -webkit-tap-highlight-color: transparent; }
body {
margin: 0;
background: var(--nuit);
color: var(--texte);
font: 17px/1.6 var(--sans);
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
::selection { background: color-mix(in srgb, var(--ambiance) 38%, transparent); color: #fff; }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--ambiance) 70%, white); outline-offset: 4px; border-radius: 6px; }
a { color: inherit; }
a:not(.badge) { transition: opacity var(--t-retour) var(--sortie); }
a:not(.badge):active { opacity: .6; }
@media (pointer: coarse) { p a { padding-block: calc((46px - 1.34em) / 2); } }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--rond); font-weight: 560; text-wrap: balance; margin: 0; }
p { margin: 0; text-wrap: pretty; }
@property --ambiance { syntax: '<color>'; inherits: true; initial-value: #FFCC3D; }
.ambiance {
position: fixed; inset: 0; pointer-events: none; z-index: 0;
}
.ambiance, .ambiance > .voile {
background:
radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--c, var(--ambiance)) 9%, transparent), transparent 70%),
radial-gradient(90% 60% at 50% 110%, color-mix(in srgb, var(--c, var(--ambiance)) 5%, transparent), transparent 70%),
color-mix(in srgb, var(--c, var(--ambiance)) calc(var(--lavis, 0) * (1.5% + var(--f, .6) * 5%)), transparent);
}
.ambiance.a-voiles { background: none; }
.voile {
position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
opacity: 0; transition: opacity 900ms var(--entree-sortie);
}
.voile.est-visible { opacity: 1; }
.en-geste > .voile { transition-duration: 220ms; transition-timing-function: var(--sortie); }
.barre {
position: relative; z-index: 3;
display: flex; align-items: center; justify-content: space-between;
padding: 20px max(clamp(20px, 4vw, 48px), env(safe-area-inset-right, 0px)) 20px max(clamp(20px, 4vw, 48px), env(safe-area-inset-left, 0px));
}
.marque {
display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin-block: calc((1.6em - 44px) / 2);
font-family: var(--rond); font-weight: 600; font-size: 21px; letter-spacing: -.005em; text-decoration: none;
}
.boutiques {
--h-badge: 60px;
display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px;
}
.badge {
position: relative;
display: block; flex: none; border-radius: calc(var(--h-badge) * .18);
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
transition: transform var(--t-retour) var(--sortie);
}
.badge::after { content: ""; position: absolute; inset: min(0px, calc((var(--h-badge) - 44px) / 2)) 0; }
.badge img { -webkit-user-drag: none; }
.badge img { display: block; max-width: none; height: var(--h-badge); width: calc(var(--h-badge) * var(--r, 3)); }
.badge:active { transform: scale(.97); }
.badge:focus-visible { outline-offset: 5px; border-radius: calc(var(--h-badge) * .18); }
@media (max-width: 760px) {
.boutiques { --h-badge: clamp(40px, calc((100vw - 2 * 20px - 10px) / 6.535), 56px); gap: 10px; }
}
/* 02-sphere.css */
.sphere {
--d: 300px;
position: relative; width: var(--d); aspect-ratio: 1; border-radius: 50%;
display: grid; place-items: center;
touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
cursor: grab; outline: none; isolation: isolate;
}
.sphere[aria-hidden="true"] { touch-action: auto; pointer-events: none; cursor: auto; }
.sphere.tient { cursor: grabbing; }
.sphere:focus-visible .sphere__anneau { opacity: 1; }
.sphere__anneau {
position: absolute; inset: -14px; border-radius: 50%;
box-shadow: 0 0 0 2px rgba(255,255,255,.85); opacity: 0; pointer-events: none;
transition: opacity var(--t-retour) var(--sortie);
}
.sphere__geste, .sphere__etirement, .sphere__vie, .sphere__teinte, .sphere__matiere {
position: absolute; inset: 0;
}
.sphere__geste { will-change: transform; border-radius: 50%; }
.sphere__geste > * { pointer-events: none; }
.sphere__vie {
border-radius: 47% 53% 51% 49% / 52% 48% 52% 48%;
animation: sphere-tourne 38s linear infinite, sphere-respire 7.5s var(--entree-sortie) infinite alternate;
}
.sphere.en-pause .sphere__vie, .sphere.en-pause .sphere__reflet { animation-play-state: paused; }
@keyframes sphere-tourne { to { rotate: 360deg; } }
@keyframes sphere-respire { from { scale: 1; } to { scale: 1.035; } }
.sphere__teinte { opacity: 0; transition: opacity var(--t-transition) var(--entree-sortie); }
.sphere__teinte.est-visible { opacity: 1; }
.sphere.tient .sphere__teinte { transition-duration: 120ms; }
.sphere__lueur {
position: absolute; inset: -42%; border-radius: 50%; pointer-events: none;
background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 42%, transparent) 30%, color-mix(in srgb, var(--c) 14%, transparent) 62%, transparent 100%);
opacity: var(--lueur, 1);
}
.sphere__corps { position: absolute; inset: 0; border-radius: inherit; background: var(--c); border-radius: 47% 53% 51% 49% / 52% 48% 52% 48%; }
.sphere__matiere {
border-radius: 47% 53% 51% 49% / 52% 48% 52% 48%;
overflow: hidden;
}
.sphere__matiere::after {
content: ""; position: absolute; inset: 0; border-radius: inherit;
box-shadow: inset 0 0 calc(var(--d) * .16) calc(var(--d) * .02) rgba(255,255,255,.22);
}
.sphere__reflet {
position: absolute; inset: -2%;
background:
radial-gradient(circle at 50% 54%, rgba(0,0,0,.56) 0%, rgba(0,0,0,.38) 46%, transparent 74%),
radial-gradient(circle at 33% 25%, rgba(255,255,255,.24), transparent 46%),
radial-gradient(circle at 70% 82%, rgba(255,255,255,.07), transparent 40%);
animation: sphere-tourne 38s linear infinite reverse;
}
.sphere__texte {
position: absolute; inset: 0; display: grid; place-content: center stretch; text-align: center;
padding: 0 14%; pointer-events: none;
}
.sphere__phrase {
display: grid; align-content: center; min-height: 2.24em;
font: 700 max(20px, calc(var(--d) * .09))/1.12 var(--police-sphere); letter-spacing: -.01em; color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 2px 18px rgba(0,0,0,.5);
transition: opacity 120ms var(--sortie), transform 200ms var(--sortie);
}
.sphere__famille {
margin-top: .55em; font: 600 max(12px, calc(var(--d) * .038))/1 var(--police-sphere);
letter-spacing: .22em; text-transform: uppercase; color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 0 12px rgba(0,0,0,.6);
}
.sphere__texte.change .sphere__phrase { opacity: 0; transform: translateY(4px); }
.sphere__halo { position: absolute; inset: 0; pointer-events: none; }
.sphere__halo i {
--r: min(calc(var(--d) * .62), calc(50vw - 18px));
position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
border-radius: 50%; background: var(--c);
transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) scale(.4);
opacity: 0; transition: transform 280ms var(--sortie), opacity 200ms var(--sortie);
}
.sphere__halo i.visee { z-index: 2; box-shadow: 0 0 0 1.5px rgba(255,255,255,.85); }
.sphere.montre-directions .sphere__halo i,
.sphere:focus-visible .sphere__halo i { opacity: .9; transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) scale(1); }
.sphere.montre-directions .sphere__halo i.visee,
.sphere:focus-visible .sphere__halo i.visee { opacity: 1; transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) scale(1.7); }
.sphere.montre-directions.tient .sphere__halo i:not(.visee) { opacity: .35; }
.sphere__approche { position: absolute; inset: -32%; border-radius: 50%; touch-action: auto; cursor: default; }
.fantome {
position: absolute; left: 50%; top: calc(50% + max(var(--d) * .2, 56px));
width: 44px; height: 96px; margin: -22px 0 0 -22px;
pointer-events: none; z-index: 2; transform-origin: 22px 22px;
opacity: 0; scale: 1.12;
transition: opacity 160ms var(--sortie), scale 160ms var(--sortie);
}
.fantome svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.fantome.est-visible { opacity: 1; scale: 1; }
.fantome.leve { opacity: 0; scale: 1.06; transition-duration: 200ms; }
.fil {
position: absolute; left: 0; top: 0; height: 2px; transform-origin: 0 50%;
pointer-events: none; z-index: 0;
background: linear-gradient(90deg, transparent, var(--c) 18%, color-mix(in srgb, var(--c) 60%, white) 96%, #fff);
clip-path: inset(0 100% 0 0);
transition: clip-path 460ms var(--sortie), opacity 260ms var(--sortie);
}
.fil.part { clip-path: inset(0 0 0 0); }
.fil.s-efface { opacity: 0; }
.fil--voyage { clip-path: inset(0 0 0 var(--coupe, 0%)); transition: none; will-change: transform; }
.fil--voyage.absorbe { clip-path: inset(0 0 0 100%); transition: clip-path 260ms var(--entree-sortie); }
.fil--voyage.s-efface { opacity: 0; transition: opacity 240ms var(--sortie); }
.vivant { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
.sphere__vie, .sphere__reflet { animation: none; }
.sphere__texte.change .sphere__phrase { transform: none; }
.fil { transition: opacity 260ms linear; clip-path: none; opacity: 0; }
.fil.part { opacity: 1; }
.fil.s-efface { opacity: 0; }
.sphere__halo i { transition: opacity 200ms linear; }
.fantome, .fantome.est-visible, .fantome.leve { scale: none; transition: opacity 200ms linear; }
}
/* 03-telephone.css */
.tel {
--w: 300px;
position: relative; width: var(--w); aspect-ratio: 720 / 1565; margin: 0;
min-height: 0;
border-radius: calc(var(--w) * .145);
background: linear-gradient(160deg, #2a2a30, #121216 40%, #1b1b20);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 30px 60px -20px rgba(0,0,0,.8), 0 10px 20px -10px rgba(0,0,0,.6);
-webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.tel img { -webkit-user-drag: none; }
.tel__ecran {
position: absolute; inset: calc(var(--w) * .028); overflow: hidden; isolation: isolate;
border-radius: calc(var(--w) * .12); background: #000; container-type: inline-size;
}
.tel__ecran img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tel__fond {
position: absolute; inset: 1px; border-radius: calc(var(--w) * .12); pointer-events: none;
background-color: var(--accent, #FFCC3D);
-webkit-mask: url(/assets/captures/fond.png?v=d4f1872ce4) center / cover no-repeat;
mask: url(/assets/captures/fond.png?v=d4f1872ce4) center / cover no-repeat;
opacity: 0; transition: opacity var(--t-transition) var(--entree-sortie);
}
.tel__fond.est-visible { opacity: 1; }
.tel__direct {
position: absolute; left: 0; right: 0; top: 15.5%; bottom: 17.4%;
display: grid; justify-items: center; align-content: start;
}
.tel__interface { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.tel__interface, .tel__interface > img, .tel__interface > .tel__accent { border-radius: calc(var(--w) * .12); }
.tel__direct .sphere { --d: 80cqw; margin-top: 9cqw; cursor: default; }
.tel__direct .sphere__phrase { font-size: 6.6cqw; }
.tel__direct .sphere__famille { font-size: 2.2cqw; letter-spacing: .24em; }
.tel__indice {
justify-self: stretch; margin-top: 7.58cqw; height: 8.84cqw;
display: flex; flex-direction: column; justify-content: flex-end;
font: 500 3.4cqw/1.3 var(--sans); color: var(--c, #FFCC3D); text-align: center; padding: 0 8cqw;
transition: color 260ms var(--entree-sortie);
}
.tel__jauge { display: flex; gap: 1.6cqw; margin-top: 2.6cqw; }
.tel__jauge span { width: 4.6cqw; height: .9cqw; border-radius: 1cqw; background: rgba(255,255,255,.16); transition: background-color 200ms var(--sortie); }
.tel__jauge span.on { background: var(--c, #FFCC3D); }
.tel__quand { justify-self: stretch; text-align: center; margin-top: 2cqw; font: 400 2.6cqw/1 var(--sans); color: rgba(255,255,255,.4); }
.tel__accent {
position: absolute; inset: 0; pointer-events: none;
background-color: var(--accent, #FFCC3D); mix-blend-mode: hue;
opacity: 0; transition: opacity var(--t-transition) var(--entree-sortie);
}
.tel__accent.est-visible { opacity: 1; }
.tel .sphere__teinte.arrive { opacity: 1; transition: none; }
.tel .sphere__teinte.arrive > .sphere__corps {
-webkit-mask-image: radial-gradient(circle at var(--ax, 50%) var(--ay, 0%), #000 var(--plein, 0px), transparent var(--front, 0px));
mask-image: radial-gradient(circle at var(--ax, 50%) var(--ay, 0%), #000 var(--plein, 0px), transparent var(--front, 0px));
}
@media (prefers-reduced-motion: reduce) {
.tel .sphere__teinte.arrive > .sphere__corps { -webkit-mask-image: none; mask-image: none; }
}
/* 10-haut.css */
.haut {
position: relative; z-index: 1; min-height: 100svh;
display: grid; grid-template-rows: auto 1fr;
}
.haut__corps {
--marge: clamp(20px, 4vw, 48px);
--dh: min(40vw, 620px, 62svh);
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-rows: auto auto auto 1fr;
column-gap: clamp(16px, 2vw, 32px);
padding: clamp(20px, 9svh, 104px) var(--marge) max(calc(52px + var(--dh) * .045), env(safe-area-inset-bottom));
}
.haut__titre {
grid-column: 1 / -1; grid-row: 1; justify-self: start;
position: relative; z-index: 2; pointer-events: none;
max-width: 15ch;
font-size: clamp(44px, 6.2vw, 92px); font-weight: 600; line-height: 1; letter-spacing: -.02em;
text-wrap: balance;
}
.haut__titre > span { pointer-events: auto; }
.accroche {
grid-column: 1 / span 6; grid-row: 2; position: relative; z-index: 2;
margin-top: clamp(20px, 3.4svh, 32px); max-width: 31em;
color: var(--texte-2); font-size: clamp(17px, 1.32vw, 20px); line-height: 1.55;
}
.haut .boutiques {
grid-column: 1 / -1; grid-row: 3; justify-self: start; align-self: start;
position: relative; z-index: 2; margin-top: clamp(24px, 4.4svh, 40px);
}
.foyer {
grid-column: 7 / -1; grid-row: 1 / -1; align-self: end; justify-self: end;
margin-right: clamp(0px, 2.2vw, 32px);
}
.foyer #sphere { --d: var(--dh); width: var(--d); aspect-ratio: 1; }
.foyer .sphere__halo i { --r: calc(var(--d) * .545 + 40px); }
@media (max-width: 760px) and (orientation: portrait) {
.barre { padding-top: 16px; padding-bottom: 16px; }
.haut__corps {
display: flex; flex-direction: column;
padding: 6px 20px max(22px, env(safe-area-inset-bottom));
}
.haut__titre { font-size: clamp(32px, 10.2vw, 44px); line-height: 1.02; max-width: none; }
.accroche { margin-top: 14px; font-size: 17px; line-height: 1.5; }
.foyer {
flex: 1 1 0; min-height: 120px; align-self: stretch;
margin: 10px 0 14px; padding-right: 6vw;
display: flex; align-items: center; justify-content: flex-end;
}
.foyer #sphere { --d: min(74vw, 300px); }
.foyer .sphere__halo i { --r: min(calc(var(--d) * .545 + 40px), calc(var(--d) / 2 + 6vw + 8px)); }
@supports (width: 1cqh) {
.foyer { container-type: size; }
.foyer #sphere { --d: min(100cqh - 16px, 74vw, 300px); }
.foyer .sphere__halo i { --r: min(calc(var(--d) * .545 + 40px), calc(var(--d) / 2 + 6vw + 8px), calc(50cqh + 2px)); }
}
.haut .boutiques { margin-top: 0; }
}
@media (max-width: 760px) and (orientation: portrait) and (max-height: 620px) {
.barre { padding-top: 10px; padding-bottom: 10px; }
.haut__titre { font-size: clamp(28px, 9vw, 40px); }
.accroche { margin-top: 10px; }
.foyer { margin: 8px 0 10px; }
}
@container (max-height: 176px) {
.foyer #sphere { margin-inline: auto; }
.foyer .sphere__texte { padding-inline: 5%; }
.foyer .sphere__phrase { font-size: clamp(15px, calc(var(--d) * .13), 20px); -webkit-hyphens: auto; hyphens: auto; }
.foyer .sphere__famille { font-size: 10px; letter-spacing: .12em; overflow-wrap: anywhere; }
}
@media (orientation: landscape) and (max-height: 500px) {
.barre { padding-top: 4px; padding-bottom: 4px; }
.haut__corps {
--dh: min(40vw, 56svh);
grid-template-rows: 1fr auto auto auto 1fr;
padding: 1.5svh max(var(--marge), env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(var(--marge), env(safe-area-inset-left));
}
.haut__titre, .accroche { max-width: calc(100% - var(--dh) - clamp(0px, 2.2vw, 32px) - 40px); }
.haut__titre { grid-row: 2; font-size: clamp(26px, 8.6svh, 92px); }
.accroche { grid-column: 1 / -1; grid-row: 3; margin-top: 10px; font-size: 17px; line-height: 1.45; }
.haut .boutiques { grid-row: 4; --h-badge: 44px; margin-top: 12px; }
.foyer { align-self: center; }
.foyer .sphere__halo i { --r: calc(var(--d) * .5 + 24px); }
}
/* 20-echo.css */
.echo {
--g: 16px;
position: relative; z-index: 1; min-height: 100svh;
display: grid; align-content: center; justify-items: center;
padding: clamp(56px, 10vh, 112px) var(--g);
}
.echo__bloc { display: grid; justify-items: center; }
.echo.pret .echo__bloc { opacity: 0; transform: translateY(20px); }
.echo.pret .echo__bloc.est-apparu { opacity: 1; transform: none; transition: opacity 520ms var(--sortie), transform 520ms var(--sortie); }
.echo h2 {
font-size: clamp(26px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -.015em;
text-align: center; margin-bottom: clamp(26px, 5vh, 52px);
}
.duo {
--ecart: clamp(64px, 11vw, 176px);
--w1: min(300px, 23vw, calc((100svh - 260px) / 2.18));
--w2: var(--w1);
position: relative;
display: grid; grid-template-columns: var(--w1) var(--w2); column-gap: var(--ecart); row-gap: 14px;
align-items: start;
}
.consigne {
grid-column: 1; grid-row: 1; justify-self: center;
width: max-content; max-width: calc(var(--w1) + var(--ecart));
font-size: 17px; letter-spacing: .01em; color: var(--texte-2); text-align: center; text-wrap: balance;
transition: opacity var(--t-transition) var(--sortie);
}
.consigne.faite { opacity: 0; }
.echo:not(.pret) .consigne { visibility: hidden; }
#tel-a, #tel-b { width: var(--w); aspect-ratio: 720 / 1565; }
#tel-a { grid-column: 1; grid-row: 2; --w: var(--w1); }
#tel-b { grid-column: 2; grid-row: 2; --w: var(--w2); margin-top: calc((var(--w1) - var(--w2)) * .922); }
.duo .tel__direct .sphere { margin-top: 20cqw; }
.tel .sphere__halo i { --r: calc(var(--d) * .56); width: 6px; height: 6px; margin: -3px 0 0 -3px; }
.tel .sphere__anneau { inset: -6px; }
.duo.invite #tel-a .sphere:not(.montre-directions):not(:focus-visible) .sphere__halo i {
opacity: .35; transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) scale(1);
transition-duration: var(--t-apparition);
}
.echo-main { position: absolute; z-index: 2; pointer-events: none; }
.echo-main .fantome { top: calc(50% + var(--d) * .24); }
.echo-fil {
position: absolute; left: 0; top: 0; z-index: 2; height: 2px; border-radius: 1px;
transform-origin: 0 50%; pointer-events: none;
background: linear-gradient(90deg, transparent, var(--c) 22%, color-mix(in srgb, var(--c) 60%, white) 94%, #fff);
clip-path: inset(0 100% 0 0);
transition: clip-path 420ms var(--sortie), opacity 120ms var(--sortie);
}
.echo-fil.part { clip-path: inset(0 0 0 0); }
.echo-fil.absorbe { clip-path: inset(0 0 0 100%); transition: clip-path 240ms var(--entree-sortie), opacity 120ms var(--sortie); }
.echo-fil.coupe { opacity: 0; }
.fil-dedans { position: absolute; z-index: 2; overflow: hidden; pointer-events: none; }
@media (max-width: 700px) {
.echo { --g: clamp(12px, 4.2vw, 16px); }
.duo {
--ecart: clamp(14px, 5.6vw, 24px);
--w1: max(160px, calc((100vw - 2 * var(--g) - var(--ecart)) / 2));
--w2: min(var(--w1), calc(100vw - 2 * var(--g) - var(--ecart) - var(--w1)));
}
}
@media (max-width: 359px) {
.duo { --w1: calc((100vw - 2 * var(--g) - var(--ecart)) / 2); --w2: var(--w1); }
}
@media (orientation: landscape) and (max-height: 500px) {
.echo {
padding-block: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-bottom));
padding-inline: max(var(--g), env(safe-area-inset-left)) max(var(--g), env(safe-area-inset-right));
}
.echo__bloc {
grid-template-columns: minmax(0, 1fr) auto; align-items: center;
column-gap: clamp(24px, 5vw, 56px); width: min(100%, 1000px);
}
.echo h2 { text-align: start; margin: 0; justify-self: end; max-width: 11em; }
.duo {
--ecart: clamp(32px, 7vw, 72px);
--w1: calc((100svh - 24px - 1.6 * 17px - 14px) / 2.1736); --w2: var(--w1);
}
.consigne { max-width: calc(var(--w1) + 2 * var(--ecart)); }
}
@media (min-width: 1000px) and (min-height: 600px) {
.echo {
--p: clamp(24px, 3svh, 40px); --h2: clamp(32px, 3.2vw, 48px); --mb: clamp(20px, 2.8svh, 32px);
padding-block: var(--p);
}
.echo h2 { font-size: var(--h2); margin-bottom: var(--mb); white-space: nowrap; }
.duo {
--w1: min(440px, calc((100vw - 2 * var(--g) - var(--ecart)) / 2),
calc((100svh - 2 * var(--p) - 1.1 * var(--h2) - var(--mb) - 1.6 * 17px - 14px) / 2.1736));
--w2: var(--w1);
}
}
@media (prefers-reduced-motion: reduce) {
.echo.pret .echo__bloc { transform: none; }
.echo-fil, .echo-fil.part, .echo-fil.absorbe { clip-path: none; transition: opacity 220ms linear; }
.echo-fil { opacity: 0; }
.echo-fil.part { opacity: 1; }
.echo-fil.absorbe, .echo-fil.coupe { opacity: 0; }
}
/* 30-roue.css */
.roue {
--g: 16px;
position: relative; z-index: 1;
display: grid; justify-items: center;
padding: clamp(64px, 11vh, 128px) var(--g);
}
.roue__bloc {
width: min(100%, 1240px);
display: grid; justify-items: center; row-gap: clamp(28px, 5vh, 44px);
}
.roue__mots { display: grid; justify-items: center; text-align: center; max-width: 36em; }
.roue__phrase {
font: 560 clamp(26px, 3.3vw, 48px)/1.14 var(--police-titre); letter-spacing: -.015em;
color: var(--texte); max-width: 14em; text-wrap: balance;
}
.roue__texte { margin-top: 18px; font-size: 17px; line-height: 1.5; color: var(--texte-2); max-width: 26em; }
.roue__mot { position: relative; white-space: nowrap; }
.roue__mot::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -.04em; height: 2px; border-radius: 1px;
background: var(--c-mot, #388CFF); opacity: 0; transform: scaleX(0); transform-origin: 0 50%;
transition: transform 200ms var(--sortie), opacity 160ms var(--sortie);
}
.roue__mot.est-la::after { opacity: 1; transform: none; transition-duration: 320ms, 200ms; }
.roue__scene {
--D: min(calc(100vw - 2 * var(--g)), 460px);
display: grid; justify-items: center; row-gap: clamp(10px, 2vh, 18px);
}
.roue__lecture { display: grid; justify-items: center; text-align: center; width: var(--D); max-width: 100%; }
.roue__famille, .roue__nuance { display: grid; width: 100%; }
.roue__famille > *, .roue__nuance > * { grid-area: 1 / 1; }
.roue__nuance {
min-height: 2.24em; align-content: end;
font: 650 clamp(24px, 6.4vw, 36px)/1.12 var(--police-titre); letter-spacing: -.01em; color: #fff;
}
.roue__nuance > * { align-self: end; }
.roue__famille { margin-top: 6px; font: 600 13px/1.4 var(--police-texte); letter-spacing: .2em; text-transform: uppercase; min-height: 1.4em; }
.roue:not(.pret) .roue__lecture { visibility: hidden; }
.roue__cadran {
position: relative; width: var(--D); aspect-ratio: 1; border-radius: 50%;
touch-action: pan-y; touch-action: pan-y pinch-zoom;
user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.roue.pret .roue__cadran { cursor: pointer; }
.roue__cadran:focus { outline: none; }
.roue__cadran:focus-visible {
outline: 2px solid color-mix(in srgb, var(--ambiance) 70%, white); outline-offset: 6px; border-radius: 50%;
}
.roue__trame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.roue__trame circle { opacity: .34; transition: opacity 200ms var(--sortie); }
.roue__rayon.choisi circle { opacity: .26; }
.roue__rayon.choisi circle.allume { opacity: 1; }
.roue__cadran.actif .roue__rayon:not(.choisi) circle { opacity: .2; }
.roue__nom {
font: 600 var(--fs, 14px)/1 var(--police-texte); letter-spacing: .02em;
fill: var(--texte); opacity: .6; transition: opacity 200ms var(--sortie);
}
.roue__nom.choisi { opacity: 1; }
.roue__cadran.vif .roue__trame circle, .roue__cadran.vif .roue__nom { transition-duration: 120ms; }
.roue__curseur {
position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none;
transition: transform 220ms var(--sortie);
}
.roue__curseur > i {
position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%;
box-shadow: 0 0 0 1.5px rgba(255,255,255,.92);
transform: scale(var(--s, 1)); transition: transform 220ms var(--sortie), opacity 240ms var(--sortie);
}
.roue__cadran.vif .roue__curseur { transition-duration: 130ms; }
.roue__cadran.vif .roue__curseur > i { transition-duration: 130ms, 240ms; }
.roue__coeur {
position: absolute; left: 50%; top: 50%; width: var(--Ds, 86px); height: var(--Ds, 86px);
margin: calc(var(--Ds, 86px) / -2) 0 0 calc(var(--Ds, 86px) / -2); pointer-events: none;
}
.roue__coeur .sphere { --d: var(--Ds, 86px); }
.roue__coeur .sphere__halo, .roue__coeur .sphere__texte, .roue__coeur .sphere__anneau { display: none; }
.roue__coeur .sphere__lueur { opacity: calc(.45 + var(--force, .3) * .55); transition: opacity 260ms var(--sortie); }
.roue.pret .roue__mots, .roue.pret .roue__lecture { opacity: 0; transform: translateY(16px); }
.roue.pret .roue__coeur { opacity: 0; transform: scale(.7); }
.roue.pret .roue__trame { opacity: 0; transform: scale(.72); }
.roue.pret .roue__curseur > i { opacity: 0; }
.roue.pret .est-apparu .roue__mots, .roue.pret .est-apparu .roue__lecture {
opacity: 1; transform: none; transition: opacity 520ms var(--sortie), transform 520ms var(--sortie);
}
.roue.pret .est-apparu .roue__lecture { transition-delay: 60ms; }
.roue.pret .est-apparu .roue__coeur { opacity: 1; transform: none; transition: opacity 420ms var(--sortie) 80ms, transform 520ms var(--sortie) 80ms; }
.roue.pret .est-apparu .roue__trame {
opacity: 1; transform: none;
transition: transform 600ms var(--sortie) 160ms, opacity 240ms var(--sortie) 160ms;
}
.roue.pret .est-apparu .roue__curseur > i { opacity: 1; transition-delay: 0s, 560ms; }
.roue__familles { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.roue__familles li {
--a: 0deg; position: absolute; left: 50%; top: 50%; white-space: nowrap;
font: 600 14px/1 var(--police-texte); color: var(--texte-2);
transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--D) * -.38)) rotate(calc(-1 * var(--a)));
}
.roue__familles i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: var(--c); }
.roue__familles li:nth-child(2) { --a: 45deg; }  .roue__familles li:nth-child(3) { --a: 90deg; }
.roue__familles li:nth-child(4) { --a: 135deg; } .roue__familles li:nth-child(5) { --a: 180deg; }
.roue__familles li:nth-child(6) { --a: 225deg; } .roue__familles li:nth-child(7) { --a: 270deg; }
.roue__familles li:nth-child(8) { --a: 315deg; }
@media (orientation: landscape) and (max-height: 500px) {
.roue {
padding-block: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-bottom));
padding-inline: max(var(--g), env(safe-area-inset-left)) max(var(--g), env(safe-area-inset-right));
}
.roue__bloc { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(24px, 5vw, 56px); }
.roue__mots { justify-items: start; text-align: start; }
.roue__phrase { font-size: clamp(22px, 3.2vw, 30px); }
.roue__nuance { font-size: 22px; }
.roue__scene { --D: min(calc(100svh - 112px), 46vw); }
}
@media (min-width: 1000px) and (min-height: 600px) {
.roue { padding-block: clamp(48px, 8vh, 96px); }
.roue__bloc {
grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "scene mots";
align-items: center; justify-items: stretch; column-gap: clamp(56px, 7vw, 128px);
}
.roue__scene { grid-area: scene; --D: clamp(340px, min(42vw, calc(100svh - 230px)), 600px); }
.roue__mots { grid-area: mots; justify-items: start; text-align: start; }
.roue__phrase { font-size: clamp(32px, 3.3vw, 50px); }
.roue__texte { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.roue.pret .roue__mots, .roue.pret .roue__lecture, .roue.pret .roue__coeur { transform: none; }
.roue.pret .roue__trame, .roue.pret .est-apparu .roue__trame { transform: none; }
.roue__curseur, .roue__curseur > i { transition: none; }
.roue__mot::after, .roue__mot.est-la::after { transform: none; transition: opacity 200ms linear; }
}
/* 40-pulsation.css */
.pulsation {
--petite: 116px;
position: relative; z-index: 1;
min-height: 100svh;
display: grid; align-content: center; justify-items: center;
padding: clamp(64px, 12vh, 128px) max(16px, env(safe-area-inset-right, 0px)) clamp(64px, 12vh, 128px) max(16px, env(safe-area-inset-left, 0px));
}
.pulsation__bloc { display: grid; width: min(100%, 1180px); row-gap: 28px; }
.pulsation.pret .pulsation__bloc { opacity: 0; transform: translateY(20px); }
.pulsation.pret .pulsation__bloc.est-apparu { opacity: 1; transform: none; transition: opacity 520ms var(--sortie), transform 520ms var(--sortie); }
.pulsation__mots { width: min(100%, 34em); justify-self: center; }
.pulsation h2 { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -.015em; }
.pulsation h3 { margin-top: 22px; font-size: 19px; font-weight: 600; line-height: 1.3; }
.pulsation__mots p { margin-top: 6px; color: var(--texte-2); font-size: 17px; line-height: 1.6; max-width: 30em; }
.pulsation__geste { display: grid; justify-items: center; }
.pulsation__scene {
--ox: 25cqw;
--oy1: calc(var(--petite) / 2 + 38px);
--oy2: calc(var(--petite) / 2 + 104px);
position: relative; width: min(100%, 420px); height: calc(var(--petite) + 256px);
container-type: size;
}
.pulsation__ondes { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 1; pointer-events: none; }
.pulsation__onde {
position: absolute; inset: calc(var(--petite) * -1.3); border-radius: 50%;
border: 2px solid var(--rose); opacity: 0;
}
.pulsation__eclat {
position: absolute; inset: calc(var(--petite) * -1.05); border-radius: 50%; opacity: 0;
background: radial-gradient(closest-side, color-mix(in srgb, var(--rose) 48%, transparent) 42%, color-mix(in srgb, var(--rose) 16%, transparent) 68%, transparent);
}
.pulsation__touche {
position: absolute; left: 50%; top: 50%; z-index: 2;
width: var(--petite); aspect-ratio: 1; margin: calc(var(--petite) / -2) 0 0 calc(var(--petite) / -2);
border-radius: 50%; outline: none;
touch-action: manipulation; user-select: none; -webkit-user-select: none;
-webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
transition: transform 140ms var(--sortie);
}
.pulsation.pret .pulsation__touche { cursor: pointer; }
.pulsation__touche.appuye { transform: scale(.96); }
.pulsation__sphere.sphere { --d: var(--petite); --c: var(--ambiance); cursor: inherit; }
.pulsation__sphere .sphere__texte { display: none; }
.pulsation__sphere .sphere__anneau { inset: -10px; }
.pulsation__touche:focus-visible .sphere__anneau { opacity: 1; }
.pulsation__rose { transition: opacity 200ms var(--sortie); }
.pulsation__touche.rosit .pulsation__rose { opacity: 1; transition: opacity 380ms linear 120ms; }
.pulsation__scene.ouverte .pulsation__rose,
.pulsation__scene.rose .pulsation__rose { opacity: 1; }
.pulsation__sphere .sphere__teinte:not(.pulsation__rose) .sphere__lueur { transition: opacity 200ms var(--sortie); }
.pulsation__scene.ouverte .sphere__teinte:not(.pulsation__rose) .sphere__lueur,
.pulsation__scene.rose .sphere__teinte:not(.pulsation__rose) .sphere__lueur { opacity: 0; }
.pulsation__phrases {
position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; list-style: none;
pointer-events: none; visibility: hidden; transition: visibility 0s linear 220ms;
}
.pulsation__scene.ouverte .pulsation__phrases { visibility: visible; transition: none; }
.pulsation__phrases li {
--px: 0px; --py: 0px;
position: absolute; left: 50%; top: 50%; width: max-content; max-width: 48cqw;
opacity: 0;
transform: translate(-50%, -50%) translate(calc(var(--px) * .32), calc(var(--py) * .32)) scale(.94);
transition: transform 200ms var(--sortie), opacity 140ms var(--sortie);
}
.pulsation__phrases li:nth-child(1) { --py: calc(var(--oy2) * -1); max-width: 86cqw; }
.pulsation__phrases li:nth-child(2) { --px: var(--ox); --py: calc(var(--oy1) * -1); }
.pulsation__phrases li:nth-child(3) { --px: var(--ox); --py: var(--oy1); }
.pulsation__phrases li:nth-child(4) { --py: var(--oy2); max-width: 86cqw; }
.pulsation__phrases li:nth-child(5) { --px: calc(var(--ox) * -1); --py: var(--oy1); }
.pulsation__phrases li:nth-child(6) { --px: calc(var(--ox) * -1); --py: calc(var(--oy1) * -1); }
.pulsation__scene.ouverte .pulsation__phrases li {
opacity: 1;
transform: translate(-50%, -50%) translate(var(--px), var(--py));
transition: transform 400ms var(--sortie) calc(var(--i, 0) * 40ms), opacity 300ms var(--sortie) calc(var(--i, 0) * 40ms);
}
.pulsation__phrases button {
display: block; min-height: 44px; margin: 0; padding: 11px 6px; border: 0; border-radius: 12px;
background: none; color: color-mix(in srgb, var(--rose) 26%, #fff);
font: 600 17px/1.2 var(--sans); letter-spacing: .005em; text-align: center; text-wrap: balance;
cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent;
transition: color var(--t-retour) var(--sortie), transform 140ms var(--sortie);
}
.pulsation__phrases button:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
.pulsation__phrases button:hover { color: #fff; }
}
.pulsation__etat {
min-height: 1.5em; margin-top: 2px; text-align: center;
font-size: 16px; line-height: 1.5; color: var(--texte-2);
opacity: 0; transition: opacity 360ms var(--sortie);
}
.pulsation__etat.est-visible { opacity: 1; transition-duration: 160ms; }
.pulsation__geste { position: relative; }
.pulsation__aide {
position: absolute; left: 50%; top: 100%; translate: -50% 0;
width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
text-align: center; font-size: 15px; line-height: 1.5; color: var(--texte-3);
opacity: 0; transition: opacity var(--t-retour) var(--sortie);
}
.pulsation.pret .pulsation__geste:has(.pulsation__touche:focus-visible) .pulsation__aide {
width: max-content; max-width: min(26em, 100%); height: auto; margin-top: 4px;
overflow: visible; clip: auto; white-space: normal; opacity: 1;
}
.pulsation:not(.pret) .pulsation__aide { visibility: hidden; }
@media (min-width: 1000px) and (min-height: 600px) {
.pulsation { --petite: 148px; padding-block: 64px; }
.pulsation__bloc { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(40px, 6vw, 112px); }
.pulsation__mots { justify-self: end; width: auto; max-width: 25em; }
.pulsation h2 { font-size: clamp(32px, 3.4vw, 52px); max-width: 9.5em; }
.pulsation h3 { margin-top: 32px; font-size: 20px; }
.pulsation__mots p { font-size: 18px; }
.pulsation__scene { width: 560px; height: 440px; --ox: 30cqw; --oy1: 70px; --oy2: 160px; }
.pulsation__phrases li { max-width: 38cqw; }
.pulsation__phrases button { font-size: 18px; }
}
@media (orientation: landscape) and (max-height: 500px) {
.pulsation {
--petite: 92px;
padding-top: max(16px, env(safe-area-inset-top, 0px)); padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
}
.pulsation__bloc { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(24px, 5vw, 56px); }
.pulsation__mots { justify-self: end; width: auto; max-width: 24em; }
.pulsation h3 { margin-top: 14px; }
.pulsation__scene {
width: min(48vw, 400px);
height: calc(100svh - max(16px, env(safe-area-inset-top, 0px)) - max(16px, env(safe-area-inset-bottom, 0px)) - 26px);
--ox: 31cqw; --oy1: calc(var(--petite) / 2 + 22px); --oy2: calc(50cqh - 24px);
}
.pulsation__phrases li { max-width: 38cqw; }
}
@media (prefers-reduced-motion: reduce) {
.pulsation.pret .pulsation__bloc { transform: none; }
.pulsation__touche, .pulsation__touche.appuye, .pulsation__phrases button:active { transform: none; }
.pulsation__phrases li, .pulsation__scene.ouverte .pulsation__phrases li { transform: translate(-50%, -50%) translate(var(--px), var(--py)); }
}
/* 50-fonctionnalites.css */
.fonctionnalites {
--g: clamp(20px, 5.4vw, 72px);
--repli: #c9c6d2;
position: relative; z-index: 1;
width: min(1240px, 100%); margin: 0 auto;
padding: clamp(96px, 15vh, 176px) max(var(--g), env(safe-area-inset-right, 0px)) clamp(64px, 10vh, 120px) max(var(--g), env(safe-area-inset-left, 0px));
}
.fn + .fn { margin-top: clamp(104px, 16vh, 184px); }
.fonctionnalites h3 { font-size: clamp(30px, 3vw, 44px); line-height: 1.08; letter-spacing: -.016em; }
.fn__texte p, .fn--nous > p {
margin-top: .8em; max-width: 30em;
font-size: clamp(17px, 1.25vw, 19px); line-height: 1.62; color: var(--texte-2);
}
.conv {
--rose: #FF6B94;
--s: 40px;
--r: 82px;
width: min(100%, 320px); display: grid; gap: 14px;
font: 400 16px/1.35 var(--sans);
}
.conv__fil { display: grid; gap: 8px; justify-items: start; }
.conv__bulle {
max-width: 84%; padding: 10px 14px; border-radius: 19px;
background: rgba(255,255,255,.07); color: var(--texte);
}
.conv__bulle--moi { justify-self: end; background: rgba(255,255,255,.14); }
.conv__gif {
position: relative; width: 138px; aspect-ratio: 1; border-radius: 16px; overflow: hidden;
background: #17131a;
}
.conv__gif svg { display: block; width: 100%; height: 100%; }
.conv__gif .c { transform-box: fill-box; transform-origin: center; }
.conv__gif-mot {
position: absolute; left: 8px; top: 8px; padding: 4px 7px; border-radius: 999px;
background: rgba(8,8,12,.72); font: 700 11px/1 var(--sans); letter-spacing: .06em; color: #fff;
}
.conv__mention {
justify-self: end; display: inline-flex; align-items: center; gap: 7px;
padding: 8px 14px 8px 12px; border-radius: 999px;
background: color-mix(in srgb, var(--rose) 22%, transparent);
font: 600 15px/1.2 var(--sans); color: #fff;
}
.conv__emoji { font-size: 18px; line-height: 1; }
.conv__reagir { position: relative; justify-self: center; width: var(--s); height: var(--s); }
.conv__sphere {
--k: var(--c, var(--repli));
position: absolute; inset: 0; border-radius: 50%;
background:
radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--k) 35%, white), transparent 48%),
radial-gradient(circle at 50% 56%, color-mix(in srgb, var(--k) 70%, black), var(--k) 74%);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--k) 16%, transparent), 0 0 18px color-mix(in srgb, var(--k) 32%, transparent);
transition: scale 160ms var(--sortie), box-shadow 160ms var(--sortie);
}
.conv.tient .conv__sphere { scale: 1.14; box-shadow: 0 0 0 1px color-mix(in srgb, var(--k) 55%, transparent), 0 0 22px color-mix(in srgb, var(--k) 40%, transparent); }
.conv.vise .conv__sphere { box-shadow: 0 0 0 1px color-mix(in srgb, var(--rose) 55%, transparent), 0 0 22px color-mix(in srgb, var(--k) 40%, transparent); }
.conv__eventail { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 2; pointer-events: none; }
.conv__eventail i {
--place: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a)));
position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%;
display: grid; place-items: center; font-style: normal; font-size: 16px; line-height: 1;
background: rgba(0,0,0,.72);
transform: var(--place) scale(.4); opacity: 0;
transition: transform 220ms var(--sortie), opacity 160ms var(--sortie), background-color 160ms var(--sortie), box-shadow 160ms var(--sortie);
}
.conv.tient .conv__eventail i { opacity: 1; transform: var(--place); transition-delay: calc(var(--i) * 40ms); }
.conv.tient.vise .conv__eventail i:first-child {
transform: var(--place) scale(1.27); background-color: rgba(0,0,0,.82);
box-shadow: 0 0 0 2px var(--rose); transition-delay: 0ms;
}
.conv__vise {
position: absolute; left: 0; top: calc(-1 * var(--r) - 44px); translate: -50% 0;
padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--rose) 92%, transparent);
font: 700 14px/1.2 var(--sans); color: #2a0712; white-space: nowrap;
opacity: 0; transition: opacity 160ms var(--sortie);
}
.conv.tient.vise .conv__vise { opacity: 1; }
.conv__main { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 3; pointer-events: none; }
.conv__main .fantome { left: 0; top: 0; }
.conv__champ { display: flex; align-items: center; gap: 8px; }
.conv__rond {
flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
background: rgba(255,255,255,.07); color: var(--texte-2);
}
.conv__rond svg { width: 19px; height: 19px; }
.conv__rond--gif { font: 700 11px/1 var(--sans); letter-spacing: .04em; color: var(--texte); }
.conv__saisie {
flex: 1; min-width: 0; height: 36px; display: flex; align-items: center; padding: 0 14px;
border-radius: 18px; background: rgba(255,255,255,.06); color: var(--texte-3);
font-size: 15px; white-space: nowrap; overflow: hidden;
}
.conv.attend .conv__gif, .conv.attend .conv__mention { opacity: 0; translate: 0 10px; }
.conv.attend.gif .conv__gif { opacity: 1; translate: none; transition: opacity 520ms var(--sortie), translate 520ms var(--sortie); }
.conv.attend.mention .conv__mention { opacity: 1; translate: none; transition: opacity 420ms var(--sortie), translate 420ms var(--sortie); }
.conv.joue .conv__gif .c { animation: conv-coeur 2200ms var(--entree-sortie) var(--d) 2; }
@keyframes conv-coeur {
0% { transform: none; opacity: 1; }
45% { transform: translateY(-14px) scale(1.12); opacity: 0; }
46% { transform: translateY(6px) scale(.7); opacity: 0; }
100% { transform: none; opacity: 1; }
}
.nous__titre { width: fit-content; max-width: 100%; }
.fn--nous h3 { font-size: clamp(92px, 13.5vw, 196px); font-weight: 500; line-height: .9; letter-spacing: -.045em; }
.lien { display: flex; align-items: center; height: 12px; margin-top: clamp(12px, 1.6vw, 22px); }
.lien__point {
flex: none; width: 11px; height: 11px; border-radius: 50%;
background: var(--c, var(--repli)); box-shadow: 0 0 14px color-mix(in srgb, var(--c, var(--repli)) 62%, transparent);
}
.lien__trait { flex: 1; height: 2px; }
.lien__trait--a { background: linear-gradient(90deg, var(--c, var(--repli)), color-mix(in srgb, var(--c, var(--repli)) 25%, white)); }
.lien__trait--b { background: linear-gradient(270deg, var(--c, var(--repli)), color-mix(in srgb, var(--c, var(--repli)) 25%, white)); }
.lien.attend .lien__point { opacity: 0; transform: scale(.6); }
.lien__trait--a { transform-origin: 0 50%; }
.lien__trait--b { transform-origin: 100% 50%; }
.lien.attend .lien__trait { transform: scaleX(0); }
.lien.attend.joue .lien__point { opacity: 1; transform: none; transition: opacity 360ms var(--sortie), transform 360ms var(--sortie); }
.lien.attend.joue .lien__point:last-child { transition-delay: 160ms; }
.lien.attend.joue .lien__trait { transform: none; transition: transform 640ms var(--sortie) 200ms; }
.lien.attend.joue .lien__trait--b { transition-delay: 420ms; }
.mots {
--t: clamp(50px, 4.6vw, 64px);
display: flex; align-items: center; gap: max(30px, calc(var(--t) * .62));
padding: calc(var(--t) * .5) 0 calc(var(--t) * .5) calc(var(--t) * .4 + 4px);
}
.mots__sphere { position: relative; flex: none; width: var(--t); height: var(--t); transition: transform 120ms var(--sortie); }
.mots__teinte {
position: absolute; inset: 0; border-radius: 50%; opacity: 0;
background: var(--c, var(--repli));
box-shadow: 0 0 calc(var(--t) * .5) color-mix(in srgb, var(--c, var(--repli)) 42%, transparent);
transition: opacity 400ms var(--entree-sortie);
}
.mots__teinte::after {
content: ""; position: absolute; inset: 0; border-radius: inherit;
background:
radial-gradient(circle at 50% 56%, rgba(0,0,0,.42) 0%, rgba(0,0,0,.24) 46%, transparent 74%),
radial-gradient(circle at 33% 26%, rgba(255,255,255,.3), transparent 48%);
box-shadow: inset 0 0 calc(var(--t) * .16) rgba(255,255,255,.22);
}
.mots__teinte--pale { --c: #dcd9e2; box-shadow: 0 0 calc(var(--t) * .3) rgba(220,217,226,.16); }
.mots__teinte--apres { opacity: 1; }
.mots.attend .mots__teinte--apres { opacity: 0; }
.mots.attend .mots__teinte--avant { opacity: 1; }
.mots.attend.sans-roue .mots__teinte--avant { opacity: 0; }
.mots.attend.sans-roue .mots__teinte--pale { opacity: 1; }
.mots.attend.coloree .mots__teinte--pale { opacity: 0; }
.mots.attend.coloree .mots__teinte--apres { opacity: 1; }
.mots.appui .mots__sphere { transform: scale(.92); }
.mots__roue { position: absolute; inset: 0; pointer-events: none; }
.mots__roue i {
--r: calc(var(--t) * .9);
position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
border-radius: 50%; background: var(--c);
transform: rotate(var(--a)) translateY(calc(var(--r) * -1));
transition: opacity 260ms var(--sortie), transform 260ms var(--sortie);
}
.mots.sans-roue .mots__roue i { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--r) * -.6)) scale(.5); }
.mots__onde {
position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0;
box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.8);
}
.mots__onde.go { animation: fn-onde 600ms var(--sortie) backwards; }
@keyframes fn-onde { from { opacity: .85; transform: scale(.9); } to { opacity: 0; transform: scale(2.1); } }
.mots__champ {
min-width: 0; font: 500 clamp(28px, 3.3vw, 48px)/1.16 var(--police-titre); letter-spacing: -.014em; color: var(--texte);
}
.mots__reste { visibility: hidden; }
.mots__curseur { position: relative; }
.mots__curseur::after {
content: ""; position: absolute; left: 1px; top: .1em; bottom: .02em; width: 2px; border-radius: 1px;
background: var(--texte); opacity: 0;
}
.mots.ecrit .mots__curseur::after { opacity: 1; }
.mots.fini .mots__curseur::after { animation: fn-cligne 1000ms step-end 2 both; }
@keyframes fn-cligne { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
.mots.attend.doux .mots__champ { opacity: 0; }
.mots.attend.doux.ecrite .mots__champ { opacity: 1; transition: opacity 480ms var(--sortie); }
.souvenir { perspective: 900px; width: fit-content; max-width: 100%; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.souvenir__carte { display: grid; transform-style: preserve-3d; transform: rotateX(180deg); }
.souvenir__face {
grid-area: 1 / 1; display: flex; align-items: center; gap: .45em;
padding: .5em .85em .56em .7em; border-radius: 20px;
background: color-mix(in srgb, var(--c, var(--repli)) 7%, #16161c);
font: 500 clamp(26px, 2.3vw, 34px)/1.15 var(--police-titre); letter-spacing: -.012em; color: var(--texte);
text-wrap: balance;
-webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.souvenir__face--rappel { transform: rotateX(180deg); }
.souvenir__face i {
flex: none; width: .3em; height: .3em; border-radius: 50%;
background: var(--c, var(--repli)); box-shadow: 0 0 12px color-mix(in srgb, var(--c, var(--repli)) 60%, transparent);
}
.souvenir.attend .souvenir__carte { transform: none; transition: transform 620ms var(--entree-sortie); }
.souvenir.attend.vif .souvenir__carte { transition-duration: 420ms; }
.souvenir.attend.retourne .souvenir__carte { transform: rotateX(180deg); }
.jours { display: flex; align-items: center; gap: clamp(12px, 1.3vw, 18px); margin-bottom: clamp(24px, 3vw, 34px); }
.jours i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--repli)); }
.jours .jours__aujourdhui {
width: 24px; height: 24px;
background:
radial-gradient(circle at 33% 26%, rgba(255,255,255,.32), transparent 50%),
radial-gradient(circle at 50% 56%, rgba(0,0,0,.3), transparent 72%),
var(--c, var(--repli));
box-shadow: 0 0 18px color-mix(in srgb, var(--c, var(--repli)) 50%, transparent);
}
.jours .jours__place { width: 24px; height: 24px; margin-left: clamp(8px, 1.4vw, 18px); background: none; border: 1.5px dashed rgba(255,255,255,.34); }
.jours.attend i { opacity: 0; transform: translateY(8px); }
.jours.attend.joue i { opacity: 1; transform: none; transition: opacity 440ms var(--sortie), transform 440ms var(--sortie); }
.jours.attend.joue i:nth-child(2) { transition-delay: 60ms; }
.jours.attend.joue i:nth-child(3) { transition-delay: 120ms; }
.jours.attend.joue i:nth-child(4) { transition-delay: 180ms; }
.jours.attend.joue i:nth-child(5) { transition-delay: 240ms; }
.jours.attend.joue i:nth-child(6) { transition-duration: 600ms; transition-delay: 520ms; }
@media (min-width: 960px) {
.fn { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 40px); align-items: center; }
.fn--conversation .conv { grid-column: 2 / span 4; justify-self: end; }
.fn--conversation .fn__texte { grid-column: 7 / span 5; }
.fn--nous .nous__titre { grid-column: 6 / -1; }
.fn--nous > p { grid-column: 8 / -1; }
.fn--mots .fn__texte { grid-column: 1 / span 5; grid-row: 1; }
.fn--mots .mots { grid-column: 7 / -1; grid-row: 1; }
.fn--souvenirs { align-items: end; }
.fn--souvenirs .souvenir { grid-column: 1 / span 6; justify-self: center; translate: 0 clamp(24px, 4vh, 48px); }
.fn--souvenirs .fn__texte { grid-column: 8 / -1; }
.fn--soi .jours, .fn--soi .fn__texte { grid-column: 4 / span 6; }
}
@media (max-width: 959px) {
.fn__figure { margin-bottom: clamp(26px, 6vw, 40px); }
.conv { width: min(86vw, 320px); }
.fn--nous h3 { font-size: clamp(88px, 28vw, 168px); }
.fn--nous > p { margin-left: clamp(36px, 14vw, 140px); }
.mots__champ { font-size: clamp(26px, 7.6vw, 40px); }
.souvenir { margin-left: auto; }
.souvenir__face { font-size: clamp(22px, 6.6vw, 34px); }
}
@media (prefers-reduced-motion: reduce) {
.lien.attend .lien__point, .jours.attend i { transform: none; }
.lien.attend .lien__trait--a, .lien.attend .lien__trait--b { transform: none; opacity: 0; }
.lien.attend.joue .lien__trait { opacity: 1; transition: opacity 520ms var(--sortie) 200ms; }
.mots.appui .mots__sphere { transform: none; }
.mots.sans-roue .mots__roue i { transform: rotate(var(--a)) translateY(calc(var(--r) * -1)); }
.mots__onde { transform: scale(1.5); }
.mots__onde.go { animation-name: fn-onde-douce; animation-duration: 420ms; }
.souvenir__carte, .souvenir.attend .souvenir__carte, .souvenir.attend.retourne .souvenir__carte, .souvenir__face--rappel { transform: none; }
.souvenir__face { -webkit-backface-visibility: visible; backface-visibility: visible; transition: opacity 240ms var(--sortie) 160ms; }
.souvenir__face--date { opacity: 0; transition-duration: 160ms; transition-delay: 0ms; }
.souvenir.attend:not(.retourne) .souvenir__face--date { opacity: 1; transition: opacity 240ms var(--sortie) 160ms; }
.souvenir.attend:not(.retourne) .souvenir__face--rappel { opacity: 0; transition: opacity 160ms var(--sortie); }
.conv.joue .conv__gif .c { animation: none; }
.conv.attend .conv__gif, .conv.attend .conv__mention, .conv.tient .conv__sphere { translate: none; scale: none; }
.conv__eventail i, .conv.tient .conv__eventail i, .conv.tient.vise .conv__eventail i:first-child { transform: var(--place); transition: opacity 200ms linear; }
}
@keyframes fn-onde-douce { 0% { opacity: 0; } 35% { opacity: .55; } 100% { opacity: 0; } }
/* 55-sante.css */
.fn + .fn--sante { margin-top: clamp(64px, 10vh, 112px); }
.sante__texte {
max-width: 30em;
font-size: clamp(17px, 1.25vw, 19px); line-height: 1.62; color: var(--texte-2);
}
.sante__badge {
--h-sante: 36px;
display: block; max-width: none;
height: var(--h-sante); width: calc(var(--h-sante) * var(--r, 3.6));
margin-top: max(24px, calc(var(--h-sante) / 4));
}
@media (min-width: 960px) {
.fn--sante > * { grid-column: 4 / span 6; }
.sante__badge { --h-sante: 40px; justify-self: start; margin-top: max(28px, calc(var(--h-sante) / 4)); }
}
/* 60-ne-fait-pas.css */
.ne-fait-pas {
--strophe: clamp(26px, .9rem + 3.6vw, 52px);
position: relative; z-index: 1;
padding: clamp(104px, 20vh, 208px) clamp(20px, 4vw, 48px);
}
.ne-fait-pas__bloc { width: min(100%, 1200px); margin-inline: auto; }
.ne-fait-pas h2, .ne-fait-pas__refus {
max-width: 19em;
font-family: var(--rond); font-size: var(--strophe); line-height: 1.14; letter-spacing: -.012em;
overflow-wrap: break-word;
}
.ne-fait-pas h2 { font-weight: 560; color: var(--texte); }
.ne-fait-pas__refus { list-style: none; margin: .62em 0 0; padding: 0; font-weight: 340; color: var(--texte-2); }
.ne-fait-pas__refus li { text-wrap: balance; }
.ne-fait-pas__refus li + li { margin-top: .62em; }
.ne-fait-pas__promesse {
max-width: 33em; margin-top: clamp(44px, 8vh, 80px);
font-size: 18px; line-height: 1.6; color: var(--texte-2);
}
.ne-fait-pas__promesse a {
color: var(--texte); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
text-decoration-color: color-mix(in srgb, var(--texte) 45%, transparent);
}
@media (hover: hover) and (pointer: fine) {
.ne-fait-pas__promesse a:hover { text-decoration-color: var(--texte); }
}
.ne-fait-pas.pret .ne-fait-pas__bloc { opacity: 0; }
.ne-fait-pas.pret .ne-fait-pas__bloc.est-apparu { opacity: 1; transition: opacity 600ms var(--entree-sortie); }
@media (min-width: 1000px) {
.ne-fait-pas__bloc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.ne-fait-pas h2, .ne-fait-pas__refus { grid-column: 2 / span 10; }
.ne-fait-pas__promesse { grid-column: 7 / span 5; }
}
@media (min-width: 1100px) { .ne-fait-pas__promesse { font-size: 19px; } }
@media (orientation: landscape) and (max-height: 500px) {
.ne-fait-pas {
padding-block: 72px;
padding-inline: max(clamp(20px, 4vw, 48px), env(safe-area-inset-left)) max(clamp(20px, 4vw, 48px), env(safe-area-inset-right));
}
.ne-fait-pas { --strophe: clamp(24px, 3.6vw, 34px); }
}
/* 70-feelfriends.css */
.amis {
position: relative; z-index: 1;
display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start;
width: min(100%, 1240px); margin-inline: auto;
padding: clamp(56px, 10vh, 120px) clamp(20px, 4vw, 48px);
}
.amis h2 { max-width: 13em; font-size: clamp(28px, 3.4vw, 52px); line-height: 1.1; letter-spacing: -.015em; }
.amis__texte { max-width: 30em; font-size: 18px; line-height: 1.6; color: var(--texte-2); }
.amis__texte a {
color: var(--texte); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
text-decoration-color: color-mix(in srgb, var(--texte) 45%, transparent);
}
@media (hover: hover) and (pointer: fine) {
.amis__texte a:hover { text-decoration-color: var(--texte); }
}
.amis__scene {
position: relative; justify-self: center;
width: min(100%, 440px); aspect-ratio: 1;
margin-block: clamp(16px, 3vh, 32px);
container-type: inline-size;
pointer-events: none;
}
.amis__goutte, .amis__moi {
position: absolute; inset: 0; margin: auto;
width: calc(var(--t) * 1cqw); height: calc(var(--t) * 1cqw);
}
.amis__moi { z-index: 2; transform: scale(.675); }
.amis__goutte {
--retard: calc(60ms + var(--k) * 50ms);
z-index: 1;
transform: translate(calc(var(--x) * 1cqw), calc(var(--y) * 1cqw)) scale(1);
}
.amis .sphere { --d: calc(var(--t) * 1cqw); --c: var(--ambiance); cursor: auto; touch-action: auto; }
.amis .sphere__vie, .amis .sphere__reflet { animation-delay: var(--vie, 0s); }
.amis:not(.vit) .sphere__vie, .amis:not(.vit) .sphere__reflet { animation-play-state: paused; }
.amis__goutte .sphere__etirement { transform: rotate(var(--ang)) scale(1) rotate(calc(var(--ang) * -1)); }
.amis .amis__avant { opacity: 0; transition: none; }
.amis .amis__propre { opacity: 1; transition: none; }
.amis.pret .amis__scene:not(.divisee) .amis__moi { transform: scale(1); }
.amis.pret .amis__scene:not(.divisee) .amis__goutte { transform: translate(0, 0) scale(.45); opacity: 0; }
.amis.pret .amis__scene:not(.divisee) .amis__goutte .sphere__etirement { transform: rotate(var(--ang)) scale(1.24, .8) rotate(calc(var(--ang) * -1)); }
.amis.pret .amis__scene:not(.divisee) .amis__avant { opacity: 1; }
.amis.pret .amis__scene:not(.divisee) .amis__propre { opacity: 0; }
.divisee .amis__moi { transition: transform 640ms var(--sortie) 40ms; }
.divisee .amis__goutte { transition: transform 620ms var(--sortie) var(--retard), opacity 60ms linear var(--retard); }
.divisee .amis__goutte .sphere__etirement { transition: transform 480ms var(--sortie) var(--retard); }
.amis .divisee .amis__propre { transition: opacity 260ms var(--entree-sortie) calc(var(--retard) + 70ms); }
.amis .divisee .amis__avant { transition: opacity 200ms linear calc(var(--retard) + 330ms); }
@media (min-width: 900px) and (min-height: 560px) {
.amis {
grid-template-columns: auto minmax(0, 25em); grid-template-rows: 1fr auto auto 1fr;
column-gap: clamp(48px, 7vw, 128px); justify-content: center; align-items: center;
padding-block: clamp(64px, 12vh, 140px);
}
.amis__scene { grid-column: 1; grid-row: 1 / -1; width: min(44vw, 600px, calc(100svh - 180px)); margin: 0; }
.amis h2 { grid-column: 2; grid-row: 2; font-size: clamp(34px, 3.4vw, 52px); }
.amis__texte { grid-column: 2; grid-row: 3; margin-top: 20px; }
}
@media (min-width: 1100px) { .amis__texte { font-size: 19px; } }
@media (orientation: landscape) and (max-height: 500px) {
.amis {
grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr;
column-gap: clamp(24px, 5vw, 56px); align-items: center;
padding-block: 40px;
padding-inline: max(clamp(20px, 4vw, 48px), env(safe-area-inset-left)) max(clamp(20px, 4vw, 48px), env(safe-area-inset-right));
}
.amis__scene { grid-column: 1; grid-row: 1 / -1; width: min(78svh, 42vw); margin: 0; }
.amis h2 { grid-column: 2; grid-row: 2; }
.amis__texte { grid-column: 2; grid-row: 3; margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.amis.pret .amis__scene:not(.divisee) .amis__moi { transform: scale(.675); }
.amis.pret .amis__scene:not(.divisee) .amis__goutte { transform: translate(calc(var(--x) * 1cqw), calc(var(--y) * 1cqw)) scale(1); }
.amis .amis__goutte .sphere__etirement,
.amis.pret .amis__scene:not(.divisee) .amis__goutte .sphere__etirement { transform: none; }
.amis.pret .amis__scene:not(.divisee) .amis__avant { opacity: 0; }
.amis.pret .amis__scene:not(.divisee) .amis__propre { opacity: 1; }
.divisee .amis__moi, .divisee .amis__goutte .sphere__etirement { transition: none; }
.divisee .amis__goutte { transition: opacity 480ms var(--entree-sortie) calc(var(--k) * 60ms); }
.amis .divisee .amis__propre, .amis .divisee .amis__avant { transition: none; }
}
/* 75-abonnement.css */
.abonnement {
position: relative; z-index: 1;
padding: clamp(72px, 14vh, 160px) clamp(20px, 4vw, 48px);
}
.abonnement__bloc { width: min(100%, 1200px); margin-inline: auto; }
.abonnement h2 {
max-width: 13em;
font-size: clamp(28px, 3.4vw, 52px); line-height: 1.1; letter-spacing: -.015em;
}
.abonnement__corps { max-width: 34em; margin-top: clamp(24px, 4vh, 40px); }
.abonnement__intro, .abonnement__texte, .abonnement__promesse {
font-size: 18px; line-height: 1.6; color: var(--texte-2);
}
.abonnement__ajouts {
list-style: none; margin: 1.1em 0 0; padding: 0;
font-family: var(--rond); font-size: clamp(20px, .9rem + .7vw, 24px); line-height: 1.32;
color: var(--texte);
}
.abonnement__ajouts li { text-wrap: pretty; }
.abonnement__ajouts li + li { margin-top: .55em; }
.abonnement__ajouts + .abonnement__texte { margin-top: 1.8em; }
.abonnement__texte + .abonnement__texte { margin-top: 1em; }
.abonnement__promesse { margin-top: 1.6em; color: var(--texte-3); }
@media (min-width: 1000px) {
.abonnement__bloc {
display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start;
}
.abonnement h2 { grid-column: 2 / span 4; position: sticky; top: clamp(72px, 14vh, 140px); }
.abonnement__corps { grid-column: 7 / span 5; margin-top: 0; }
}
@media (min-width: 1100px) {
.abonnement__intro, .abonnement__texte, .abonnement__promesse { font-size: 19px; }
}
@media (orientation: landscape) and (max-height: 500px) {
.abonnement {
padding-block: 64px;
padding-inline: max(clamp(20px, 4vw, 48px), env(safe-area-inset-left)) max(clamp(20px, 4vw, 48px), env(safe-area-inset-right));
}
}
/* 80-fin.css */
.fin {
--d-fin: clamp(200px, min(70vw, 46svh), 440px);
position: relative; z-index: 1;
padding: clamp(20px, 4vh, 48px) clamp(20px, 4vw, 48px) 0;
}
.fin__scene {
display: grid; justify-items: center;
width: min(100%, 1240px); margin: 0 auto;
}
.fin__foyer { display: grid; place-items: center; padding-block: calc(var(--d-fin) * .12 + 14px); }
.fin .fin__sphere { --d: var(--d-fin); width: var(--d); }
.fin__sphere { --c: var(--ambiance); }
.fin:not(.pret) .sphere__vie, .fin:not(.pret) .sphere__reflet { animation-play-state: paused; }
.fin .sphere__texte { transition: opacity var(--t-transition) var(--sortie); }
.fin:not(.pret) .sphere__texte { opacity: 0; }
.fin__mots { position: relative; z-index: 1; width: min(100%, 440px); }
.fin__texte { font-size: 17px; line-height: 1.5; color: var(--texte-2); }
.fin__texte strong {
display: block; margin-bottom: 10px;
font: 560 clamp(22px, 2.1vw, 30px)/1.16 var(--rond); letter-spacing: -.012em;
color: var(--texte); text-wrap: balance;
}
.fin__texte a {
white-space: nowrap;
color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em;
text-decoration-color: color-mix(in srgb, var(--ambiance) 60%, transparent);
}
@media (hover: hover) and (pointer: fine) { .fin__texte a:hover { text-decoration-color: var(--ambiance); } }
.fin__boutiques { margin-top: 24px; }
.fin.pret .fin__foyer { opacity: 0; transform: scale(.95); }
.fin.pret .fin__mots > * { opacity: 0; transform: translateY(12px); }
.fin.pret .fin__foyer.est-apparu,
.fin.pret .fin__mots.est-apparu > * {
opacity: 1; transform: none;
transition: opacity var(--t-apparition) var(--sortie), transform var(--t-apparition) var(--sortie);
}
.fin.pret .fin__foyer.est-apparu { transition-duration: 600ms; }
.fin.pret .fin__mots.est-apparu > .fin__texte { transition-delay: 60ms; }
.fin.pret .fin__mots.est-apparu > .fin__boutiques { transition-delay: 120ms; }
.fin.invite .sphere:not(.montre-directions):not(:focus-visible) .sphere__halo i {
opacity: .35; transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) scale(1);
transition-duration: var(--t-apparition);
}
@media (min-width: 1024px) and (min-height: 600px) {
.fin { --d-fin: min(52svh, 34vw, 540px); padding-top: clamp(40px, 8vh, 96px); }
.fin__scene {
grid-template-columns: minmax(0, 1fr) minmax(0, 30em); align-items: center;
column-gap: clamp(48px, 6vw, 112px);
}
.fin__mots { width: auto; justify-self: start; }
.fin__texte { font-size: 18px; }
.fin__boutiques { width: max-content; margin-top: 28px; }
}
@media (orientation: landscape) and (max-height: 500px) {
.fin {
--d-fin: min(58svh, 36vw);
padding: 8px max(clamp(20px, 4vw, 48px), env(safe-area-inset-right)) 0 max(clamp(20px, 4vw, 48px), env(safe-area-inset-left));
}
.fin__scene { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(32px, 6vw, 64px); }
.fin__foyer { padding-left: calc(var(--d-fin) * .12 + 14px); }
.fin__mots { width: auto; justify-self: start; max-width: 30em; }
.fin__boutiques { --h-badge: 48px; width: max-content; margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
.fin.pret .fin__foyer, .fin.pret .fin__mots > * { transform: none; }
}
/* 90-pied.css */
.bas {
position: relative; z-index: 1;
width: min(672px, calc(100% - 2 * max(24px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)))); margin: 80px auto 0;
padding: 18px 0 max(48px, env(safe-area-inset-bottom));
border-top: 1px solid var(--trait);
font-size: 16px; line-height: 1.5; color: var(--texte-3);
}
.bas a { display: inline-block; padding-block: 6px; margin-right: 18px; white-space: nowrap; color: var(--texte-2); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .bas a:hover { color: var(--texte); } }
@media (pointer: coarse) { .bas a { padding-block: 10px; } }
.langues { margin-top: 6px; }
.langues a { margin-right: 14px; color: var(--texte-3); }
.langues a[aria-current="page"] { color: var(--texte); }
.bas__marques { margin-top: 14px; max-width: 60ch; font-size: 14px; line-height: 1.5; color: var(--texte-3); }
@media (max-width: 560px) {
.bas { width: calc(100% - 40px); }
}
/* 95-introuvable.css */
.introuvable { min-height: 100svh; display: grid; grid-template-rows: auto 1fr; overflow: clip; }
.introuvable__corps {
display: grid; justify-items: center; align-content: center; gap: clamp(36px, 7svh, 64px);
padding: 0 var(--marge) max(48px, env(safe-area-inset-bottom));
}
.introuvable .sphere { --d: min(64vw, 400px, 50svh); cursor: auto; touch-action: auto; }
.introuvable .sphere__phrase { margin: 0; }
.introuvable__retour {
display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 999px;
background: rgba(255,255,255,.08); color: var(--texte);
font: 600 17px/1.2 var(--sans); text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--t-retour) var(--sortie), scale var(--t-retour) var(--sortie);
}
@media (hover: hover) { .introuvable__retour:hover { background: rgba(255,255,255,.14); } }
.introuvable__retour:active { scale: .97; }
.introuvable__retour:focus-visible { border-radius: 999px; }
@media (max-height: 500px) {
.introuvable__corps { gap: 20px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.introuvable .barre { padding-block: 12px; }
}
@media (prefers-reduced-motion: reduce) { .introuvable__retour:active { scale: none; } }
/* 97-texte.css */
.texte { min-height: 100svh; display: flex; flex-direction: column; }
.texte__corps {
position: relative; z-index: 1;
flex: 1;
width: min(672px, calc(100% - 2 * max(24px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))));
margin: clamp(28px, 6vh, 72px) auto 0;
}
.texte .bas { margin-top: clamp(72px, 12vh, 120px); }
.texte__corps h1 {
font-size: clamp(34px, 1.3rem + 3vw, 58px); line-height: 1.05; letter-spacing: -.02em;
hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
}
.texte__corps h2 {
margin-top: 2.2em;
font-size: clamp(24px, 1.05rem + 1.1vw, 32px); line-height: 1.15; letter-spacing: -.012em;
hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
}
.texte__corps h3 { margin-top: 1.8em; font-size: 20px; line-height: 1.3; letter-spacing: -.005em; }
.texte__corps .date { margin-top: 14px; font-size: 15px; color: var(--texte-3); }
.texte__corps p, .texte__corps li, .texte__corps td { color: var(--texte-2); }
.texte__corps p { margin-top: 1em; }
.texte__corps h1 + p, .texte__corps .date + p { margin-top: clamp(28px, 4.5vh, 44px); }
.texte__corps :is(h2, h3) + :is(p, ul, table, div) { margin-top: .7em; }
.texte__corps strong { font-weight: 600; color: var(--texte); }
.texte__corps ul { margin: 1em 0 0; padding-left: 1.15em; }
.texte__corps li + li { margin-top: .45em; }
.texte__corps li::marker { color: var(--texte-3); }
.texte__corps a {
color: var(--texte); overflow-wrap: anywhere;
text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
text-decoration-color: color-mix(in srgb, var(--texte) 40%, transparent);
}
@media (hover: hover) and (pointer: fine) {
.texte__corps a:hover { text-decoration-color: var(--texte); }
}
.texte__corps .encadre {
margin-top: 1.6em; padding: .1em 0 .1em 1.1em;
border-left: 2px solid color-mix(in srgb, var(--texte) 18%, transparent);
}
.texte__corps .encadre p { color: var(--texte); }
.texte__corps .encadre > :first-child { margin-top: 0; }
.texte__corps .identite { list-style: none; padding: 0; }
.texte__corps .identite li {
padding: .3em 0 .3em 1em;
border-left: 2px solid color-mix(in srgb, var(--texte) 12%, transparent);
}
.texte__corps .identite li + li { margin-top: .25em; }
.texte__corps table { width: 100%; margin-top: 1.4em; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.texte__corps :is(th, td) { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--trait); }
.texte__corps tr > :first-child { width: 9.5em; }
.texte__corps tr > :last-child { padding-right: 0; }
.texte__corps th { font-family: var(--rond); font-weight: 600; color: var(--texte); }
@media (max-width: 560px) {
.texte__corps :is(table, tbody) { display: block; }
.texte__corps tr {
display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px;
padding: 12px 0; border-bottom: 1px solid var(--trait);
}
.texte__corps :is(th, td) { display: block; width: auto; padding: 0; border: 0; hyphens: auto; -webkit-hyphens: auto; }
.texte__corps tr > :first-child { width: auto; color: var(--texte); }
.texte__corps tr > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; }
.texte__corps tr > :last-child { grid-column: 2; grid-row: 1; text-align: right; }
}