/* Vixya · les pages de contenu (30 octobre 2026 : comment ça marche, tarifs, questions, pages par métier).
   Même univers que l'accueil, « Studio perle » : chaque haut de page est un ciel ou un morceau d'espace, les objets
   en chrome y sont posés, les sections alternent la perle et la nuit. Ici la page défile librement (pas d'accroche
   section par section : ce sont des pages qu'on lit). Transformations et opacités seulement pour les animations. */
@font-face { font-family: "Syncopate"; src: url("/polices/syncopate.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Onest"; src: url("/polices/onest.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --perle: #EEEFF2; --encre: #141418; --gris: #4A4D57; --gris-doux: #5A5D68;
  --nuit: #0B0B0E; --blanc: #EDEDF0; --argent: #A9ACB4; --iris: #4FD1C5;
  --turquoise: #4FD1C5; --bleu: #8AB4FF; --rose: #F29BC4; --or: #FFD27A;
  --chrome-clair: linear-gradient(100deg, #B9BCC6 0%, #FFFFFF 22%, #9EA2AD 40%, #FFFFFF 58%, #C9CCD3 75%, #FFFFFF 90%, #AEB2BC 100%);
  --chrome-sombre: linear-gradient(100deg, #2B2E36 0%, #7E828F 22%, #141418 42%, #5E636F 60%, #1E2027 78%, #6B6F7B 100%);
  --f-nom: "Syncopate", "Segoe UI", system-ui, sans-serif;
  --f: "Onest", "Segoe UI", system-ui, sans-serif;
  --courbe: cubic-bezier(.2, .8, .2, 1);
  --gouttiere: clamp(20px, 5vw, 64px);
  --haut: 64px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--haut) + 16px); }
body { margin: 0; background: var(--perle); color: var(--encre); font: 17px/1.6 var(--f); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--iris); outline-offset: 3px; border-radius: 8px; }
.corps { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gouttiere); }
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.chrome-texte { font-style: normal; background: var(--chrome-clair); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.chrome-sombre { font-style: normal; background: var(--chrome-sombre); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sur { font: 600 12px/1.3 var(--f); letter-spacing: .22em; text-transform: uppercase; color: var(--gris-doux); }
.nuit .sur { color: var(--argent); }

/* ───────── Les boutons ───────── */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; font: 600 16px/1 var(--f); text-decoration: none; background: var(--encre); color: #FFFFFF; transition: transform .3s var(--courbe), box-shadow .3s var(--courbe); -webkit-tap-highlight-color: transparent; }
.bouton .ico { width: 20px; height: 20px; transition: transform .3s var(--courbe); }
.bouton-clair { background: var(--blanc); color: var(--encre); }
.bouton-ligne { background: transparent; color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--encre); }
.nuit .bouton-ligne { color: var(--blanc); box-shadow: inset 0 0 0 1.5px rgba(237, 237, 240, .8); }
@media (hover: hover) { .bouton:hover { transform: translateY(-2px); } .bouton:hover .ico { transform: translateX(3px); } }
.bouton:active { transform: translateY(1px) scale(.97); transition-duration: .08s; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ───────── L'en-tête : toujours visible, fond plein (jamais de flou derrière le menu du téléphone) ───────── */
.bandeau { position: fixed; inset: 0 0 auto; z-index: 30; height: calc(var(--haut) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--gouttiere) 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #EEEFF2; box-shadow: 0 1px 0 rgba(20, 20, 24, .08); transition: background .4s, box-shadow .4s, color .4s; }
body[data-ton="nuit"] .bandeau { background: #0B0B0E; box-shadow: 0 1px 0 rgba(255, 255, 255, .08); color: var(--blanc); }
.marque { position: relative; display: block; width: 125px; height: 22px; flex: none; }
.marque img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .4s; }
.marque .m-nuit, body[data-ton="nuit"] .marque .m-perle { opacity: 0; }
body[data-ton="nuit"] .marque .m-nuit { opacity: 1; }
.navigation { display: none; }
.navigation a { position: relative; text-decoration: none; font: 500 15px/1 var(--f); padding: 10px 2px; }
.navigation a::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 3px; height: 1.5px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--courbe); }
.navigation a[aria-current="page"]::after { transform: scaleX(1); background: linear-gradient(90deg, var(--turquoise), var(--bleu), var(--rose)); }
@media (hover: hover) { .navigation a:hover::after { transform: scaleX(1); } }
.bandeau-demande { display: none; }
.bouton-menu { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 14px; border: 0; border-radius: 999px; background: var(--encre); color: #FFFFFF; font: 600 15px/1 var(--f); cursor: pointer; -webkit-tap-highlight-color: transparent; }
body[data-ton="nuit"] .bouton-menu { background: var(--blanc); color: var(--encre); }
.bouton-menu .ico { width: 20px; height: 20px; }
.bouton-menu .fermer { display: none; }
body.menu-ouvert .bouton-menu .ouvrir { display: none; }
body.menu-ouvert .bouton-menu .fermer { display: block; }

/* Le menu du téléphone : un panneau plein, qui descend sous l'en-tête. */
.panneau { position: fixed; z-index: 29; inset: calc(var(--haut) + env(safe-area-inset-top)) 0 auto; max-height: calc(100svh - var(--haut) - env(safe-area-inset-top)); overflow-y: auto; padding: 14px var(--gouttiere) 28px; background: #0B0B0E; color: var(--blanc); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: transform .35s var(--courbe), opacity .3s, visibility 0s .35s; box-shadow: 0 30px 40px -20px rgba(0, 0, 0, .6); }
body.menu-ouvert .panneau { transform: none; opacity: 1; visibility: visible; transition: transform .35s var(--courbe), opacity .3s; }
.panneau ul { list-style: none; padding: 0; display: grid; }
.panneau li + li { border-top: 1px solid rgba(255, 255, 255, .08); }
.panneau a { display: flex; align-items: center; gap: 14px; min-height: 54px; text-decoration: none; font: 500 17px/1.25 var(--f); }
.panneau a .ico { color: var(--turquoise); }
.panneau .panneau-sur { margin: 18px 0 4px; }
.panneau .bouton { width: 100%; margin-top: 20px; background: var(--blanc); color: var(--encre); }

@media (min-width: 980px) {
  :root { --haut: 72px; }
  .navigation { display: flex; align-items: center; gap: 26px; margin-left: auto; }
  .bandeau-demande { display: inline-flex; min-height: 44px; padding: 0 18px; font-size: 14.5px; }
  body[data-ton="nuit"] .bandeau-demande { background: var(--blanc); color: var(--encre); }
  .bouton-menu, .panneau { display: none; }
}

/* ───────── Le fil d'Ariane ───────── */
.fil { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font: 500 13px/1.4 var(--f); color: var(--gris-doux); }
.nuit .fil { color: var(--argent); }
.fil li + li::before { content: "›"; margin-right: 6px; opacity: .6; }
.fil a { text-decoration: none; }
@media (hover: hover) { .fil a:hover { text-decoration: underline; } }

/* ───────── Le haut de page : un ciel, les objets, le titre ───────── */
.ciel { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--haut) + env(safe-area-inset-top) + 18px) 0 56px; }
.ciel .decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ciel .decor > i { position: absolute; display: block; }
.ciel-grille { display: grid; gap: 8px; align-items: center; }
.scene { position: relative; height: clamp(230px, 34svh, 300px); --b: min(44vw, 200px); }
.ciel-texte { display: grid; gap: 18px; justify-items: start; }
.ciel h1 { font: 700 clamp(33px, 8.6vw, 62px)/1.04 var(--f); letter-spacing: -.035em; max-width: 17ch; }
.ciel .chapo { font-size: clamp(16.5px, 1.5vw, 19px); line-height: 1.55; max-width: 56ch; color: var(--gris); }
.ciel.nuit { color: var(--blanc); }
.ciel.nuit .chapo { color: rgba(237, 237, 240, .78); }
.garanties { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font: 500 14.5px/1.35 var(--f); color: var(--gris); }
.nuit .garanties { color: var(--argent); }
.garanties li { display: inline-flex; align-items: center; gap: 8px; }
.garanties .ico { width: 18px; height: 18px; }
@media (min-width: 900px) {
  .ciel { padding-bottom: 88px; min-height: min(92svh, 860px); display: grid; align-items: center; }
  .ciel-grille { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; }
  .scene { order: 2; height: 440px; --b: 280px; }
}

/* Les ciels. Chacun est un morceau de ciel ou d'espace, comme les plateaux de l'accueil. */
.ciel-aube .decor { background: radial-gradient(42% 34% at 80% 46%, rgba(255, 210, 166, .75), rgba(255, 210, 166, 0) 70%), linear-gradient(180deg, #E2E3EE 0%, #ECE4E8 44%, #F6DCCD 64%, #EDE5E6 76%, #EAE9EF 100%); }
.ciel-aube .astre { left: 80%; top: 46%; width: 120px; height: 120px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, #FFFDF9 0%, #FFF3E2 64%, rgba(255, 236, 214, 0) 100%); box-shadow: 0 0 70px 26px rgba(255, 220, 182, .55); -webkit-mask: linear-gradient(#000 50%, transparent 50%); mask: linear-gradient(#000 50%, transparent 50%); }
.ciel-aube .trainee { left: 80%; top: 46%; width: 9%; height: 54%; translate: -50% 0; background: radial-gradient(50% 100% at 50% 0%, rgba(255, 240, 222, .9), rgba(255, 240, 222, 0)); }
.ciel-aube .ligne, .ciel-couchant .ligne { left: 0; right: 0; top: 46%; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .9) 70%, rgba(255, 255, 255, 0)); }

.ciel-couchant .decor { background: radial-gradient(46% 36% at 18% 52%, rgba(242, 155, 196, .55), rgba(242, 155, 196, 0) 70%), radial-gradient(40% 30% at 24% 50%, rgba(255, 196, 140, .6), rgba(255, 196, 140, 0) 70%), linear-gradient(180deg, #E4E1EC 0%, #EFDCE3 40%, #F7D9CB 52%, #ECE3E8 70%, #E9E8EE 100%); }
.ciel-couchant .astre { left: 20%; top: 52%; width: 110px; height: 110px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, #FFF6EE 0%, #FFE3CC 60%, rgba(255, 210, 180, 0) 100%); box-shadow: 0 0 80px 30px rgba(255, 190, 160, .5); -webkit-mask: linear-gradient(#000 50%, transparent 50%); mask: linear-gradient(#000 50%, transparent 50%); }
.ciel-couchant .ligne { top: 52%; }
/* Sur ordinateur, l'horizon ne passe que derrière les objets, jamais sous le texte. */
@media (min-width: 900px) { .ciel-aube .ligne, .ciel-couchant .ligne, .ciel-brume .ligne { left: 50%; -webkit-mask: linear-gradient(90deg, transparent, #000 20%); mask: linear-gradient(90deg, transparent, #000 20%); } .ciel-couchant .astre { left: 92%; top: 58%; } .ciel-couchant .ligne { top: 58%; } .ciel-couchant .decor { background: radial-gradient(40% 36% at 90% 58%, rgba(242, 155, 196, .5), rgba(242, 155, 196, 0) 70%), radial-gradient(30% 26% at 88% 56%, rgba(255, 196, 140, .55), rgba(255, 196, 140, 0) 70%), linear-gradient(180deg, #E4E1EC 0%, #EBDDE5 40%, #F4DCD0 58%, #ECE3E8 72%, #E9E8EE 100%); } }

.ciel-perle .decor { background: radial-gradient(75% 60% at 18% 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%), radial-gradient(60% 40% at 90% 30%, rgba(214, 218, 228, .55), rgba(214, 218, 228, 0) 70%), linear-gradient(180deg, #F1F2F5 0%, #E3E5EA 62%, #D9DCE3 63%, #EEF0F3 100%); }
.ciel-perle .caustique { left: 72%; top: 64%; width: 340px; height: 56px; translate: -50% -50%; border-radius: 50%; opacity: .32; background: conic-gradient(from 90deg, #4FD1C5, #8AB4FF, #F29BC4, #FFD27A, #4FD1C5); -webkit-mask: radial-gradient(closest-side, #000 15%, transparent 100%); mask: radial-gradient(closest-side, #000 15%, transparent 100%); }

.ciel-halo .decor { background: radial-gradient(34% 30% at 78% 34%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #D9E1ED 0%, #E5E9F1 48%, #EDEEF3 100%); }
.ciel-halo .halo { left: 78%; top: 34%; width: 360px; height: 360px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(120, 136, 165, .07) 0%, rgba(120, 136, 165, .07) 84%, rgba(242, 155, 196, .5) 87.5%, rgba(255, 214, 140, .45) 89.5%, rgba(255, 255, 255, .85) 91.5%, rgba(214, 226, 255, .5) 95%, rgba(214, 226, 255, 0) 100%); }
.ciel-halo .soleil { left: 78%; top: 34%; width: 64px; height: 64px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, #FFFFFF 45%, rgba(255, 255, 255, 0)); box-shadow: 0 0 46px 18px rgba(255, 255, 255, .75); }

.ciel-eclipse .decor { background: radial-gradient(60% 35% at 50% 100%, rgba(138, 180, 255, .12), rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, #050507 0%, #08080C 100%); }
.ciel-eclipse .halo { left: 76%; top: 42%; translate: -50% -50%; border-radius: 50%; width: 900px; height: 900px; background: radial-gradient(closest-side, rgba(170, 190, 255, .16), rgba(242, 155, 196, .06) 55%, rgba(0, 0, 0, 0) 100%); }
/* La couronne de l'éclipse, dans la scène : derrière la bille, un peu décalée, comme un astre qu'elle cache. */
.o-couronne { width: calc(var(--b) * 1.5); height: calc(var(--b) * 1.5); z-index: 0; }
.o-couronne i { position: absolute; border-radius: 50%; }
.o-couronne .couronne { inset: 0; opacity: .85; background: conic-gradient(from 210deg, #4FD1C5, #8AB4FF, #F29BC4, #FFD27A, #4FD1C5); -webkit-mask: radial-gradient(closest-side, transparent 72%, #000 75%, rgba(0, 0, 0, .35) 84%, transparent 100%); mask: radial-gradient(closest-side, transparent 72%, #000 75%, rgba(0, 0, 0, .35) 84%, transparent 100%); }
.o-couronne .limbe { inset: 13%; background: #040406; box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 0 24px 4px rgba(255, 255, 255, .28); }

.ciel-aurore .decor { background: radial-gradient(80% 40% at 50% 100%, rgba(79, 209, 197, .14), rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, #05060A 0%, #090B12 100%); }
.ciel-aurore .voile { left: -25%; right: -25%; height: 78%; -webkit-mask: linear-gradient(90deg, transparent 4%, #000 26%, #000 74%, transparent 96%), repeating-linear-gradient(90deg, rgba(0, 0, 0, .76) 0 2px, #000 2px 11px); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent 4%, #000 26%, #000 74%, transparent 96%), repeating-linear-gradient(90deg, rgba(0, 0, 0, .76) 0 2px, #000 2px 11px); mask-composite: intersect; }
.ciel-aurore .v1 { top: 0; rotate: -7deg; background: radial-gradient(farthest-side at 50% 100%, rgba(79, 209, 197, 0) 60%, rgba(79, 209, 197, .42) 74%, rgba(138, 180, 255, .24) 85%, rgba(242, 155, 196, .18) 93%, rgba(242, 155, 196, 0) 100%); }
.ciel-aurore .v2 { top: 14%; left: 5%; right: -45%; rotate: 9deg; opacity: .7; background: radial-gradient(farthest-side at 50% 100%, rgba(79, 209, 197, 0) 66%, rgba(79, 209, 197, .3) 78%, rgba(160, 150, 255, .2) 88%, rgba(242, 155, 196, .14) 95%, rgba(242, 155, 196, 0) 100%); }

.ciel-contrejour .decor { background: radial-gradient(90% 46% at 50% 100%, rgba(79, 209, 197, .30) 0%, rgba(138, 180, 255, .10) 42%, rgba(11, 11, 14, 0) 72%), radial-gradient(70% 40% at 50% 0%, #15161D 0%, rgba(11, 11, 14, 0) 70%), linear-gradient(180deg, #08090C 0%, #0B0D11 100%); overflow: hidden; }
.ciel-contrejour .astre { left: 50%; top: 92%; width: 340vmax; height: 340vmax; translate: -50% 0; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, #050607 96%, #0B1416 99%, #12302E 100%); box-shadow: 0 0 0 1px rgba(196, 246, 240, .55), 0 -2px 28px 2px rgba(79, 209, 197, .45), 0 -20px 90px 10px rgba(79, 209, 197, .16), inset 0 26px 60px -20px rgba(79, 209, 197, .28); }

.ciel-brume .decor { background: radial-gradient(70% 50% at 70% 30%, rgba(200, 236, 230, .7), rgba(200, 236, 230, 0) 70%), radial-gradient(60% 40% at 10% 10%, #FFFFFF, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #E8EEF0 0%, #E4ECEE 50%, #DCE6EA 64%, #EEF2F3 100%); }
.ciel-brume .nappe { left: -10%; right: -10%; height: 16%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); }
.ciel-brume .n1 { top: 50%; }
.ciel-brume .n2 { top: 60%; left: 20%; right: -30%; opacity: .7; }
.ciel-brume .n3 { top: 36%; left: -40%; right: 30%; opacity: .55; }
.ciel-brume .ligne { left: 0; right: 0; top: 64%; height: 1px; background: linear-gradient(90deg, rgba(79, 209, 197, 0), rgba(79, 209, 197, .45) 60%, rgba(138, 180, 255, 0)); }
.ciel-lune .decor { background: radial-gradient(50% 40% at 78% 30%, rgba(138, 180, 255, .16), rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, #06070C 0%, #0A0C14 70%, #0C0D15 100%); }
.ciel-lune .etoiles { inset: 0; opacity: .7; background:
  radial-gradient(1.5px 1.5px at 12% 18%, #FFFFFF, transparent), radial-gradient(1px 1px at 28% 62%, #FFFFFF, transparent), radial-gradient(1.2px 1.2px at 44% 12%, #DDE6FF, transparent),
  radial-gradient(1px 1px at 58% 74%, #FFFFFF, transparent), radial-gradient(1.5px 1.5px at 66% 8%, #FFFFFF, transparent), radial-gradient(1px 1px at 88% 56%, #FFE7F1, transparent),
  radial-gradient(1.2px 1.2px at 94% 20%, #FFFFFF, transparent), radial-gradient(1px 1px at 6% 82%, #DDE6FF, transparent), radial-gradient(1px 1px at 36% 90%, #FFFFFF, transparent); }
.ciel-lune .lune, .ciel-lune .halo { left: 80%; top: 28%; translate: -50% -50%; border-radius: 50%; }
.ciel-lune .lune { width: 90px; height: 90px; background: radial-gradient(circle at 36% 34%, #FFFFFF, #E3E7F2 45%, #AEB6C8 100%); -webkit-mask: radial-gradient(circle at 72% 36%, transparent 43%, #000 45%); mask: radial-gradient(circle at 72% 36%, transparent 43%, #000 45%); box-shadow: 0 0 40px 6px rgba(214, 226, 255, .25); }
.ciel-lune .halo { width: 320px; height: 320px; background: radial-gradient(closest-side, rgba(214, 226, 255, .14), rgba(242, 155, 196, .05) 60%, rgba(0, 0, 0, 0) 100%); }
.ciel-lune { --lueur: rgba(170, 190, 255, .35); }
.ciel-brume { --lueur: rgba(79, 209, 197, .25); }

@media (max-width: 899px) {
  .ciel-lune .lune, .ciel-lune .halo { left: 82%; top: 16%; }
  .ciel-lune .lune { width: 64px; height: 64px; }
  .ciel-brume .n1 { top: 22%; } .ciel-brume .n2 { top: 30%; } .ciel-brume .n3 { top: 12%; } .ciel-brume .ligne { top: 33%; }
  .ciel-aube .astre, .ciel-aube .trainee { left: 82%; top: 30%; }
  .ciel-aube .ligne { top: 30%; }
  .ciel-aube .decor { background: radial-gradient(60% 24% at 82% 30%, rgba(255, 210, 166, .75), rgba(255, 210, 166, 0) 70%), linear-gradient(180deg, #E2E3EE 0%, #F2DDD3 30%, #ECE6EA 46%, #EAE9EF 100%); }
  .ciel-couchant .astre { left: 16%; top: 30%; width: 90px; height: 90px; }
  .ciel-couchant .ligne { top: 30%; }
  .ciel-couchant .decor { background: radial-gradient(70% 22% at 16% 30%, rgba(242, 155, 196, .5), rgba(242, 155, 196, 0) 70%), linear-gradient(180deg, #E4E1EC 0%, #F3D9D3 30%, #ECE4E9 46%, #E9E8EE 100%); }
  .ciel-perle .caustique { left: 54%; top: 33%; width: 260px; }
  .ciel-halo .halo, .ciel-halo .soleil { left: 74%; top: 18%; }
  .ciel-halo .halo { width: 230px; height: 230px; }
  .ciel-eclipse .halo { left: 50%; top: 22%; }
  .ciel-contrejour .astre { top: 310px; }
}

/* ───────── Les objets en chrome (les mêmes que l'accueil), posés dans la scène du haut de page ───────── */
.obj { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; animation: flotte 7s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.o-bille { width: var(--b); height: var(--b); z-index: 2; }
.o-perle { width: calc(var(--b) * .24); height: calc(var(--b) * .24); z-index: 3; }
.o-gelule { width: calc(var(--b) * .62); height: calc(var(--b) * .24); z-index: 3; }
.o-anneau { width: calc(var(--b) * .7); height: calc(var(--b) * .7); z-index: 1; }
@keyframes flotte { from { transform: translateY(-5px); } to { transform: translateY(7px); } }
.forme { position: absolute; inset: 0; border-radius: 50%; }
.forme i { position: absolute; inset: 0; border-radius: inherit; }
.peau-nuit { opacity: 0; }
.nuit .peau-nuit { opacity: 1; }
.ombre { position: absolute; left: 6%; right: 6%; top: 88%; height: 24%; border-radius: 50%; background: radial-gradient(closest-side, rgba(20, 22, 28, .32), rgba(20, 22, 28, 0)); animation: inherit; animation-name: ombre; }
@keyframes ombre { from { transform: scale(.94); opacity: .8; } to { transform: scale(1.04); opacity: 1; } }
.nuit .ombre { display: none; }
.o-gelule .ombre { top: 64%; height: 80%; }
.bille .peau-perle { background:
  radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .95) 0 5%, rgba(255, 255, 255, 0) 16%),
  radial-gradient(circle at 50% 50%, transparent 56%, rgba(20, 22, 28, .45) 74%, rgba(255, 255, 255, .55) 90%, rgba(30, 32, 40, .85) 100%),
  linear-gradient(180deg, #F6F8FB 0%, #CDD1DA 36%, #2B2E36 47%, #60656F 52%, #BCC1CA 70%, #F0F2F5 100%);
  box-shadow: inset -12px -16px 30px rgba(0, 0, 0, .22); }
.bille .peau-nuit { background:
  radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .95) 0 2.2%, rgba(255, 255, 255, .3) 3.6%, rgba(255, 255, 255, 0) 7.5%),
  radial-gradient(circle at 50% 50%, transparent 60%, rgba(138, 180, 255, .2) 82%, rgba(242, 155, 196, .28) 93%, rgba(255, 255, 255, .5) 100%),
  linear-gradient(180deg, #4A4E5A 0%, #1A1B21 38%, #8A8E9C 47%, #23252C 53%, #121318 78%, #2E3038 100%); }
.bille .iris { inset: 7%; opacity: .08; background: conic-gradient(from 200deg, #4FD1C5, #8AB4FF, #F29BC4, #FFD27A, #4FD1C5); }
.forme .lueur { background: radial-gradient(110% 70% at 50% 108%, var(--lueur, rgba(255, 255, 255, 0)) 0%, rgba(255, 255, 255, 0) 62%); }
.gelule { border-radius: 999px; transform: rotate(var(--r, -18deg)); }
.gelule .peau-perle { background:
  radial-gradient(70% 120% at 30% 20%, rgba(255, 255, 255, .9) 0 4%, rgba(255, 255, 255, 0) 22%),
  linear-gradient(180deg, #F6F8FB 0%, #C9CDD6 34%, #2B2E36 48%, #5E636F 54%, #B8BDC7 72%, #EEF0F4 100%);
  box-shadow: inset -10px -10px 24px rgba(0, 0, 0, .2); }
.gelule .peau-nuit { background:
  radial-gradient(70% 120% at 30% 18%, rgba(255, 255, 255, .8) 0 3%, rgba(255, 255, 255, 0) 18%),
  linear-gradient(180deg, #4A4E5A 0%, #1A1B21 36%, #8A8E9C 48%, #23252C 56%, #121318 80%, #3A3D47 100%); }
.anneau { transform: perspective(800px) rotate(var(--r, -24deg)) rotateX(var(--rx, 62deg)); -webkit-mask: radial-gradient(farthest-side, transparent 73%, #000 74%); mask: radial-gradient(farthest-side, transparent 73%, #000 74%); }
.anneau .peau-perle { background: linear-gradient(160deg, #FFFFFF, #8A8E9C 28%, #2B2E36 44%, #E6E8EE 60%, #5E636F 80%, #FFFFFF); }
.anneau .peau-nuit { background: linear-gradient(160deg, #9AA0AE, #1A1B21 28%, #E6E8EE 44%, #2A2C33 60%, #6B6F7B 80%, #23252C); }
/* La ceinture : l'anneau qui se dessine autour de la bille quand elle devient une planète (comme à l'accueil). */
@property --trace { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.ceinture { position: absolute; inset: -24%; --trace: 0deg; transform: perspective(800px) rotate(-10deg) rotateX(74deg); }
.ceinture.arriere { -webkit-mask: linear-gradient(#000 50%, transparent 50%); mask: linear-gradient(#000 50%, transparent 50%); }
.ceinture.avant { -webkit-mask: linear-gradient(transparent 50%, #000 50%); mask: linear-gradient(transparent 50%, #000 50%); }
.ceinture i { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(160deg, #FFFFFF, #8A8E9C 28%, #2B2E36 44%, #E6E8EE 60%, #5E636F 80%, #FFFFFF);
  -webkit-mask: radial-gradient(farthest-side, transparent 73%, #000 74%), conic-gradient(from 90deg, #000 calc(var(--trace) * 361 / 360 - 1deg), transparent 0); -webkit-mask-composite: source-in;
  mask: radial-gradient(farthest-side, transparent 73%, #000 74%), conic-gradient(from 90deg, #000 calc(var(--trace) * 361 / 360 - 1deg), transparent 0); mask-composite: intersect; }
.nuit .ceinture i { background: linear-gradient(160deg, #9AA0AE, #1A1B21 28%, #E6E8EE 44%, #2A2C33 60%, #6B6F7B 80%, #23252C); }
.ceinture b { position: absolute; left: 50%; top: 50%; width: 9%; height: 9%; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, #FFFFFF, rgba(255, 255, 255, .55) 35%, rgba(255, 255, 255, 0)); transform: translate(-50%, -50%) rotate(calc(90deg + var(--trace))) translateY(-480%); }
.trace .ceinture { --trace: 360deg; transition: --trace 1.6s cubic-bezier(.45, .05, .25, 1) .3s; }
.trace .ceinture b { animation: pointe 1.6s linear .3s both; }
@keyframes pointe { 0% { opacity: 0; } 8%, 82% { opacity: 1; } 100% { opacity: 0; } }
.miroir { position: absolute; inset: 0; transform: translateY(98%) scaleY(-1); opacity: .3; -webkit-mask: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 55%); mask: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 55%); }
.nuit .miroir { display: none; }
.ciel-aurore { --lueur: rgba(110, 220, 210, .45); }
.ciel-contrejour { --lueur: rgba(79, 209, 197, .55); }
.ciel-eclipse { --lueur: rgba(170, 190, 255, .35); }
.ciel-aube, .ciel-couchant { --lueur: rgba(255, 200, 110, .3); }
.appel { --lueur: rgba(242, 155, 196, .45); }

/* ───────── Les sections ───────── */
.bloc { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(64px, 9vw, 120px); }
.bloc.perle { background: radial-gradient(70% 50% at 12% 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%), radial-gradient(50% 40% at 100% 100%, rgba(214, 218, 230, .7), rgba(214, 218, 230, 0) 70%), linear-gradient(180deg, #EFF0F3 0%, #E6E8ED 100%); }
.bloc.nuit { color: var(--blanc); background: radial-gradient(60% 46% at 85% 0%, rgba(138, 180, 255, .13), rgba(0, 0, 0, 0) 70%), radial-gradient(60% 50% at 0% 100%, rgba(79, 209, 197, .1), rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, #0A0A0E 0%, #0E0F15 100%); }
.bloc.nuit.rose { background: radial-gradient(60% 46% at 10% 0%, rgba(242, 155, 196, .14), rgba(0, 0, 0, 0) 70%), radial-gradient(60% 50% at 100% 100%, rgba(255, 210, 122, .08), rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, #0B0A10 0%, #100E16 100%); }
/* Un filet de chrome entre deux sections de même ton. */
.bloc + .bloc.perle::before, .bloc.perle + .bloc.perle::before { content: ""; position: absolute; left: var(--gouttiere); right: var(--gouttiere); top: 0; height: 1px; background: linear-gradient(90deg, rgba(20, 20, 24, 0), rgba(20, 20, 24, .18), rgba(20, 20, 24, 0)); }
.tete { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(30px, 4vw, 52px); }
.titre { font: 650 clamp(28px, 4.4vw, 50px)/1.08 var(--f); letter-spacing: -.03em; max-width: 22ch; }
.tete .chapo { font-size: clamp(16px, 1.4vw, 18.5px); line-height: 1.6; color: var(--gris); max-width: 60ch; }
.nuit .tete .chapo { color: rgba(237, 237, 240, .74); }
.texte { display: grid; gap: 16px; max-width: 68ch; font-size: 17px; line-height: 1.7; color: #2A2C33; }
.nuit .texte { color: rgba(237, 237, 240, .84); }
.texte strong { font-weight: 600; color: var(--encre); }
.nuit .texte strong { color: #FFFFFF; }
.deux { display: grid; gap: 26px; }
.deux > .tete { margin-bottom: 0; }
@media (min-width: 900px) { .deux { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; } .deux > .tete { position: sticky; top: calc(var(--haut) + 32px); margin-bottom: 0; } }

/* Les cartes : une icône par élément, pour comprendre sans lire. */
.cartes { list-style: none; padding: 0; display: grid; gap: 12px; }
@media (min-width: 640px) { .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cartes.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.carte { position: relative; display: grid; align-content: start; gap: 10px; padding: 22px 22px 24px; border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .62)); box-shadow: inset 0 1px 0 #FFFFFF, inset 0 0 0 1px rgba(20, 20, 24, .05), 0 18px 34px -26px rgba(20, 22, 28, .45); }
.carte h3 { font: 600 18.5px/1.3 var(--f); letter-spacing: -.01em; }
.carte p { font-size: 15.5px; line-height: 1.6; color: var(--gris); }
.pastille { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: var(--encre); background: linear-gradient(150deg, #FFFFFF, #DADDE4); box-shadow: inset 0 1px 0 #FFFFFF, 0 6px 14px -8px rgba(20, 22, 28, .5); }
.nuit .carte { background: linear-gradient(160deg, rgb(var(--c1, 22 26 52) / .9), rgb(var(--c2, 44 64 130) / .5)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 24px 40px -30px rgba(0, 0, 0, .9); }
.nuit .carte p { color: rgba(237, 237, 240, .78); }
.nuit .pastille { color: #FFFFFF; background: linear-gradient(150deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .05)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .1); }
.nuit .cartes > :nth-child(4n + 1) { --c1: 20 26 64; --c2: 56 84 170; }
.nuit .cartes > :nth-child(4n + 2) { --c1: 22 36 82; --c2: 44 140 158; }
.nuit .cartes > :nth-child(4n + 3) { --c1: 38 28 82; --c2: 132 88 176; }
.nuit .cartes > :nth-child(4n + 4) { --c1: 54 32 78; --c2: 218 128 142; }

/* Le parcours : des étapes numérotées le long d'un trait de chrome. */
.parcours { list-style: none; padding: 0; display: grid; gap: 14px; position: relative; counter-reset: etape; }
.parcours::before { content: ""; position: absolute; left: 27px; top: 30px; bottom: 30px; width: 1px; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(226, 232, 255, .12)); }
.perle .parcours::before { background: linear-gradient(180deg, rgba(20, 20, 24, .3), rgba(20, 20, 24, .06)); }
.parcours > li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 16px; }
.parcours .num { grid-row: 1 / 3; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font: 700 17px/1 var(--f-nom); background: #0E0F14; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 0 0 6px rgba(11, 11, 14, 1); }
.perle .parcours .num { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(20, 20, 24, .12), 0 0 0 6px #EBECF0; }
.parcours .num span { background: var(--chrome-clair); -webkit-background-clip: text; background-clip: text; color: transparent; }
.perle .parcours .num span { background: var(--chrome-sombre); -webkit-background-clip: text; background-clip: text; }
.parcours h3 { font: 600 19px/1.3 var(--f); padding-top: 6px; }
.parcours .etape-corps { display: grid; gap: 10px; padding-bottom: 18px; font-size: 16px; line-height: 1.65; color: rgba(237, 237, 240, .8); }
.perle .parcours .etape-corps { color: var(--gris); }
.quand { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 6px 12px; border-radius: 999px; font: 600 12px/1.2 var(--f); letter-spacing: .12em; text-transform: uppercase; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.perle .quand { background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px rgba(20, 20, 24, .1); color: var(--gris); }
.quand .ico { width: 16px; height: 16px; color: var(--turquoise); }

/* La liste de ce qui est compris : une coche par ligne. */
.coches { list-style: none; padding: 0; display: grid; gap: 12px; }
.coches li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 16px; line-height: 1.55; }
.coches li::before { content: ""; width: 26px; height: 26px; margin-top: -1px; border-radius: 50%; background: conic-gradient(from 200deg, #4FD1C5, #8AB4FF, #F29BC4, #FFD27A, #4FD1C5); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='12' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M8 13.4l3.2 3.2L18 9.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='12' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M8 13.4l3.2 3.2L18 9.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.perle .coches li::before { background: conic-gradient(from 200deg, #16968B, #4A78D8, #CC5C8C, #B8862A, #16968B); }
.coches b { font-weight: 600; }

/* ───────── Les tarifs : l'échelle des prix ───────── */
.echelle { list-style: none; padding: 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .echelle { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .echelle { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.palier { color: var(--blanc); position: relative; display: grid; align-content: start; gap: 14px; padding: 24px 22px 26px; border-radius: 24px; background: linear-gradient(170deg, rgb(var(--c1) / .95), rgb(var(--c2) / .55)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 50px -36px rgba(0, 0, 0, 1); }
.palier:nth-child(1) { --c1: 20 26 64; --c2: 56 84 170; }
.palier:nth-child(2) { --c1: 22 36 82; --c2: 44 140 158; }
.palier:nth-child(3) { --c1: 38 28 82; --c2: 132 88 176; }
.palier:nth-child(4) { --c1: 54 32 78; --c2: 218 128 142; }
.palier .niveau { font: 600 12px/1.3 var(--f); letter-spacing: .18em; text-transform: uppercase; color: rgba(237, 237, 240, .7); }
.palier .prix { font: 700 clamp(26px, 2.6vw, 32px)/1.1 var(--f); letter-spacing: -.02em; }
.palier .prix small { display: block; margin-top: 6px; font: 500 13.5px/1.4 var(--f); letter-spacing: 0; color: rgba(237, 237, 240, .72); }
.palier p { font-size: 15px; line-height: 1.6; color: rgba(237, 237, 240, .82); }
.palier .coches li { font-size: 14.5px; color: rgba(237, 237, 240, .9); }
.paliers-grille { display: flex; flex-wrap: wrap; gap: 6px; }
.paliers-grille span { padding: 5px 10px; border-radius: 999px; font: 600 13px/1.2 var(--f); background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }

.tableau { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 16px; border-radius: 20px; overflow: hidden; background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px rgba(20, 20, 24, .07), 0 18px 34px -26px rgba(20, 22, 28, .45); }
.tableau caption { text-align: left; padding: 0 0 12px; font: 600 15px/1.4 var(--f); color: var(--gris); }
.tableau th, .tableau td { padding: 16px 18px; text-align: left; vertical-align: top; }
.tableau thead th { font: 600 12px/1.3 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--gris-doux); background: rgba(20, 20, 24, .04); }
.tableau tbody tr + tr > * { border-top: 1px solid rgba(20, 20, 24, .08); }
.tableau td:last-child { font-weight: 600; }
.tableau.court td:last-child { white-space: nowrap; }

/* ───────── Les questions ───────── */
.faq { display: grid; gap: 8px; }
.faq details { border-radius: 16px; background: rgba(255, 255, 255, .74); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(20, 20, 24, .04), 0 12px 26px -22px rgba(20, 22, 28, .4); transition: background .3s; }
.faq details[open] { background: #FFFFFF; }
.faq summary { position: relative; list-style: none; cursor: pointer; padding: 17px 52px 17px 20px; font: 600 16.5px/1.4 var(--f); -webkit-tap-highlight-color: transparent; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; margin-top: -6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; rotate: 45deg; transition: rotate .35s var(--courbe), margin .35s var(--courbe); }
.faq details[open] summary::after { rotate: 225deg; margin-top: -1px; }
.faq .reponse { display: grid; gap: 10px; padding: 0 20px 20px; font-size: 16px; line-height: 1.65; color: var(--gris); }
.faq details[open] .reponse { animation: reponse .4s var(--courbe); }
@keyframes reponse { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.nuit .faq details { background: rgba(255, 255, 255, .06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.nuit .faq details[open] { background: rgba(255, 255, 255, .1); }
.nuit .faq .reponse { color: rgba(237, 237, 240, .8); }
.faq a, .texte a, .carte a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.groupe + .groupe { margin-top: 44px; }
.groupe > h2 { display: flex; align-items: center; gap: 12px; font: 600 clamp(20px, 2vw, 24px)/1.3 var(--f); margin-bottom: 16px; }
.groupe > h2 .pastille { width: 40px; height: 40px; border-radius: 12px; }

/* ───────── Les pages par métier ───────── */
.metiers { list-style: none; padding: 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .metiers.n2, .metiers.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .metiers.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .metiers.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.metier { display: grid; grid-template-columns: 46px minmax(0, 1fr) 20px; gap: 14px; align-items: center; min-height: 84px; padding: 16px 18px; border-radius: 20px; text-decoration: none; background: rgba(255, 255, 255, .78); box-shadow: inset 0 1px 0 #FFFFFF, inset 0 0 0 1px rgba(20, 20, 24, .05), 0 16px 30px -24px rgba(20, 22, 28, .5); transition: transform .35s var(--courbe), background .3s; }
.metier b { display: block; font: 600 16.5px/1.3 var(--f); }
.metier small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--gris-doux); }
.metier > .ico { color: var(--gris-doux); transition: transform .35s var(--courbe); }
@media (hover: hover) { .metier:hover { transform: translateY(-3px); background: #FFFFFF; } .metier:hover > .ico { transform: translateX(4px); } }
.nuit .metier { background: rgba(255, 255, 255, .06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.nuit .metier small, .nuit .metier > .ico { color: var(--argent); }

/* Les réalisations (sites vendus, avec l'accord écrit du client) : un téléphone par site. */
.realisations { list-style: none; padding: 0; display: grid; gap: 18px; }
@media (min-width: 760px) { .realisations { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.realisation a { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 20px; align-items: center; padding: 18px; border-radius: 24px; text-decoration: none; background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.real-tel { display: block; padding: 5px; border-radius: 26px; background: linear-gradient(160deg, #FFFFFF, #8A8E9C 30%, #2B2E36 48%, #E6E8EE 62%, #5E636F 82%, #FFFFFF); }
.real-tel img { border-radius: 21px; aspect-ratio: 1 / 2; object-fit: cover; object-position: top; width: 100%; }
.real-texte { display: grid; gap: 8px; }
.real-texte b { font: 600 20px/1.25 var(--f); }
.real-texte > span:not(.sur):not(.real-lien) { color: rgba(237, 237, 240, .78); font-size: 15.5px; line-height: 1.55; }
.real-lien { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }

/* Une phrase mise en avant, dans un cadre de verre. */
.encadre { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; align-items: start; max-width: 820px; padding: 22px 24px; border-radius: 22px; background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(255, 255, 255, .08); font-size: 16.5px; line-height: 1.65; color: rgba(237, 237, 240, .86); }
.perle .encadre { background: rgba(255, 255, 255, .8); box-shadow: inset 0 1px 0 #FFFFFF, inset 0 0 0 1px rgba(20, 20, 24, .06), 0 16px 30px -24px rgba(20, 22, 28, .45); color: #2A2C33; }
.encadre strong { color: inherit; font-weight: 600; }
.encadre > .ico { width: 30px; height: 30px; margin-top: 2px; color: var(--turquoise); }
@media (max-width: 639px) { .encadre { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 20px; } }
.perle .encadre > .ico { color: #16968B; }
.suite { margin-top: clamp(28px, 4vw, 44px); }

/* ───────── La fin de chaque page : demander son aperçu ───────── */
.appel { position: relative; overflow: hidden; isolation: isolate; color: var(--blanc); padding-block: clamp(72px, 10vw, 128px); background: radial-gradient(85% 42% at 22% 92%, rgba(242, 155, 196, .42) 0%, rgba(255, 196, 140, .16) 38%, rgba(0, 0, 0, 0) 72%), radial-gradient(60% 50% at 85% 0%, rgba(138, 180, 255, .12), rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, #08090F 0%, #0E0F18 92%, #0C0C12 100%); }
.appel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8%; height: 1px; z-index: -1; background: linear-gradient(90deg, rgba(255, 210, 122, 0) 0%, rgba(255, 214, 190, .8) 22%, rgba(242, 155, 196, .5) 55%, rgba(242, 155, 196, 0) 90%); box-shadow: 0 0 16px 1px rgba(242, 155, 196, .3); }
.appel-grille { display: grid; gap: 28px; align-items: center; }
.appel .scene { height: 200px; --b: 150px; }
.appel h2 { font: 700 clamp(32px, 5vw, 58px)/1.05 var(--f); letter-spacing: -.035em; max-width: 16ch; }
.appel p { font-size: clamp(16px, 1.4vw, 18.5px); line-height: 1.6; color: rgba(237, 237, 240, .8); max-width: 54ch; }
.appel .texte-appel { display: grid; gap: 20px; justify-items: start; }
.trois-temps { list-style: none; padding: 0; display: grid; gap: 8px; font-size: 15.5px; color: rgba(237, 237, 240, .82); }
.trois-temps li { display: flex; gap: 10px; align-items: center; }
.trois-temps .ico { color: var(--rose); width: 20px; height: 20px; }
@media (min-width: 900px) { .appel-grille { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } .appel .scene { order: 2; height: 360px; --b: 230px; } }

/* ───────── Le pied de page ───────── */
.pied-site { background: #070709; color: var(--argent); padding: 56px 0 calc(32px + env(safe-area-inset-bottom)); font-size: 15px; }
.pied-grille { display: grid; gap: 34px 20px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pied-grille > :first-child { grid-column: 1 / -1; }
@media (min-width: 760px) { .pied-grille { grid-template-columns: 1.3fr 1fr 1fr 1fr; } .pied-grille > :first-child { grid-column: auto; } }
.pied-site .ile { width: 92px; height: auto; margin: 16px 0 14px; opacity: .9; }
.pied-site .ile path { fill: none; stroke: url(#iris-pied); stroke-width: 3; stroke-linejoin: round; }
.pied-site p { line-height: 1.6; max-width: 34ch; }
.pied-site h2 { font: 600 12px/1.3 var(--f); letter-spacing: .18em; text-transform: uppercase; color: #C9CBD2; margin-bottom: 10px; }
.pied-site ul { list-style: none; padding: 0; display: grid; }
.pied-site .pied-sous { margin-top: 22px; }
.pied-site li a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; color: #D4D6DC; }
@media (hover: hover) { .pied-site li a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; } }
.pied-site .pied-bas { max-width: none; }
.pied-bas { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13.5px; color: #8E929C; }

/* ───────── Les apparitions : quand l'élément est un peu entré à l'écran ───────── */
.js [data-entre] { opacity: 0; transform: translateY(18px); transition: opacity .65s var(--courbe), transform .65s var(--courbe); transition-delay: calc(var(--k, 0) * 70ms); }
.js [data-entre].vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .obj, .ombre { animation: none; }
  .js [data-entre] { opacity: 1; transform: none; transition: none; }
  .trace .ceinture { transition: none; }
  .trace .ceinture b { animation: none; }
  html { scroll-behavior: auto; }
}