:root {
  --ivory: #faf9f6;
  --ink: #1c1d1c;
  --gold: #b29462;
  --line: rgba(129, 116, 91, .24);
  --soft: #696862;
  --serif: "Italiana", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --app-height: 100svh;
  --phone-detail-diameter: 83.5vmin;
  --central-diameter: min(390px, 44vw, calc(var(--app-height) - 170px));
}

@property --float-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

* { box-sizing: border-box; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
html, body { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--sans); }
.asset-picture { display: contents; }
main { position: relative; width: 100%; height: var(--app-height); overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }

.home-screen,
.services-screen { position: absolute; inset: 0; width: 100%; min-height: 0; height: var(--app-height); overflow: hidden; transition: opacity .48s ease, visibility .48s ease; }
.home-screen { z-index: 2; opacity: 1; visibility: visible; pointer-events: auto; }
.services-screen { z-index: 1; opacity: 0; visibility: hidden; pointer-events: none; }
body.show-services .home-screen { opacity: 0; visibility: hidden; pointer-events: none; }
body.show-services .services-screen { z-index: 3; opacity: 1; visibility: visible; pointer-events: auto; }

/* Première page — l'ancienne marge photographique devient l'accueil. */
.home-screen { color: #fff; background: #1c1d1c; }
.home-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.56) contrast(1.08) brightness(.7); animation: home-breathe 16s ease-in-out infinite alternate; }
.home-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.1) 50%, rgba(0,0,0,.48)), linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.5)); }
.home-mark { --central-pull-x: 0px; --central-pull-y: 0px; position: absolute; left: 50%; top: 50%; width: var(--central-diameter); height: var(--central-diameter); min-width: 0; min-height: 0; padding: clamp(34px, 5vw, 68px); border: 1px solid rgba(215,190,143,.58); border-radius: 50%; overflow: hidden; display: grid; place-content: center; text-align: center; background: rgba(250,249,246,.9); color: var(--ink); transform: translate(calc(-50% + var(--central-pull-x)),calc(-50% + var(--central-pull-y))); backdrop-filter: blur(7px); box-shadow: 0 26px 80px rgba(0,0,0,.2); transition: background .45s, border-color .45s, transform .18s ease-out, box-shadow .45s; }
.home-mark-identity, .home-mark-invitation { grid-area: 1 / 1; align-self: center; justify-self: center; transition: opacity .38s, transform .48s; }
.home-mark-identity { display: grid; place-items: center; width: 100%; }
.home-mark img { width: 100%; height: auto; }
.home-mark-identity i { width: 30px; height: 1px; margin: 25px auto 14px; background: var(--gold); }
.home-mark-identity small { margin: 0; color: var(--gold); font-size: 9px; letter-spacing: .3em; text-transform: uppercase; }
.home-mark-invitation { opacity: 0; color: #fff; font: 400 clamp(24px, 3.2vw, 43px)/1.18 var(--serif); letter-spacing: .03em; transform: scale(.86); }
.home-mark:is(:hover,:focus-visible,.is-armed) { background: rgba(28,29,28,.94); border-color: var(--gold); transform: translate(calc(-50% + var(--central-pull-x)),calc(-50% + var(--central-pull-y))) scale(1.025); box-shadow: 0 30px 90px rgba(0,0,0,.3); }
.home-mark:is(:hover,:focus-visible,.is-armed) .home-mark-identity { opacity: 0; transform: scale(.88); }
.home-mark:is(:hover,:focus-visible,.is-armed) .home-mark-invitation { opacity: 1; transform: scale(1); }
.home-mark:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.satellite-card { position: absolute; z-index: 2; border: 1px solid rgba(215,190,143,.7); border-radius: 50%; background: rgba(250,249,246,.9); color: var(--ink); backdrop-filter: blur(7px); box-shadow: 0 15px 45px rgba(0,0,0,.18); }
.home-contact { --diameter: clamp(164px, 15vw, 194px); left: clamp(28px, 7vw, 112px); top: clamp(28px, 8vh, 88px); width: var(--diameter); height: var(--diameter); display: grid; place-items: center; padding: 25px; overflow: hidden; transition: transform .35s, background .35s; }
.home-contact img { width: 88%; }
.home-contact .mail-icon { display: none; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; transform: none; }
.home-contact:is(:hover,:focus-visible,:active,.is-armed) { padding: 0; background: var(--ink); transform: rotate(-3deg) translate(5px,5px); }
.home-contact:is(:hover,:focus-visible,:active,.is-armed):has(.mail-icon) { background: var(--ink); }
.home-contact:is(:hover,:focus-visible,:active,.is-armed) img { display: none; }
.home-contact:is(:hover,:focus-visible,:active,.is-armed) .mail-icon { display: block; }
.home-coordinates { --diameter: clamp(164px, 15vw, 194px); right: clamp(28px, 7vw, 112px); bottom: clamp(54px, 9vh, 92px); width: var(--diameter); height: var(--diameter); padding: 25px; display: grid; place-items: center; overflow: hidden; transition: width .35s, height .35s, transform .35s, background .35s, color .35s; }
.coordinates-logo, .coordinates-mobile-icon, .coordinates-content { grid-area: 1 / 1; transition: opacity .35s, transform .42s; }
.coordinates-logo-picture { position: absolute; inset: 0; padding: inherit; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.coordinates-logo { width: 88%; display: block; }
.coordinates-mobile-icon { display: none; }
.coordinates-content { position: absolute; inset: 10%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transform: scale(.86); transition: opacity .35s, visibility .35s, transform .42s; }
.coordinates-content span { margin-bottom: 6px; color: var(--gold); }
.coordinates-content .coordinates-name { width: 100%; font-size: 7px; line-height: 1.25; letter-spacing: .025em; text-align: left; text-transform: lowercase; }
.coordinates-content a { width: max-content; max-width: 100%; font-size: 8px; font-weight: 500; line-height: 1.35; text-align: left; }
.coordinates-content a + a { margin-top: 7px; padding-bottom: 3px; border-bottom: 1px solid rgba(178,148,98,.72); }
.coordinates-arrow { display: inline-block; margin: 0; color: inherit; font-family: "Times New Roman", Times, serif; font-size: 1em; font-style: normal; font-weight: 400; line-height: 1; }
.coordinates-content small { margin-top: 6px; color: rgba(255,255,255,.86); font-size: 6.5px; line-height: 1.3; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.home-coordinates:is(:hover,:focus,:focus-within,.is-open) { background: var(--ink); color: #fff; transform: rotate(2deg) translate(-6px,-6px); outline: none; }
.home-coordinates:is(:hover,:focus,:focus-within,.is-open) .coordinates-logo { opacity: 0; transform: scale(.84); }
.home-coordinates:is(:hover,:focus,:focus-within,.is-open) .coordinates-content { opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1); }
.home-coordinates:is(:hover,:focus,:focus-within,.is-open) .coordinates-name { margin-bottom: 12px; font-size: 14px; }
.home-coordinates:is(:hover,:focus,:focus-within,.is-open) .coordinates-content a { font-size: 16px; }
.home-coordinates:is(:hover,:focus,:focus-within,.is-open) .coordinates-content a + a { margin-top: 14px; padding-bottom: 6px; }
.home-coordinates:is(:hover,:focus,:focus-within,.is-open) .coordinates-content small { margin-top: 12px; font-size: 13px; }
@media (hover: hover) and (pointer: fine) {
  .home-coordinates:is(:hover,:focus,:focus-within,.is-open) {
    z-index: 12;
    width: calc(var(--diameter) * 2);
    height: calc(var(--diameter) * 2);
    transform: none;
    box-shadow: 0 18px 54px rgba(0,0,0,.3);
  }
}
.legal-trigger { --diameter: clamp(62px, 6.2vw, 74px); position: absolute; z-index: 4; left: calc(50% - min(25vw, 300px)); top: 69%; width: var(--diameter); height: var(--diameter); padding: 0; border: 1px solid rgba(215,190,143,.7); border-radius: 50%; display: grid; place-items: center; background: rgba(250,249,246,.9); color: var(--ink); backdrop-filter: blur(7px); box-shadow: 0 15px 45px rgba(0,0,0,.18); transform: translate(-50%,-50%); cursor: pointer; transition: background .35s, border-color .35s, transform .35s, box-shadow .35s; }
.legal-symbol, .legal-label { grid-area: 1 / 1; transition: opacity .3s, transform .38s; }
.legal-symbol { display: block; width: 100%; height: 100%; max-width: none; border-radius: 50%; object-fit: cover; object-position: center; }
.legal-label { width: 90%; opacity: 0; color: #fff; font-size: clamp(5px, .52vw, 6.5px); font-weight: 500; letter-spacing: .1em; text-align: center; text-transform: uppercase; transform: scale(.78); }
.legal-trigger:is(:hover,:focus-visible) { background: var(--ink); border-color: var(--gold); transform: translate(-50%,-50%) scale(1.08) rotate(3deg); box-shadow: 0 18px 48px rgba(0,0,0,.24); outline: none; }
.legal-trigger:is(:hover,:focus-visible) .legal-symbol { opacity: 0; transform: scale(.75); }
.legal-trigger:is(:hover,:focus-visible) .legal-label { opacity: 1; transform: scale(1); }
.legal-trigger:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
.legal-panel { width: min(680px, calc(100vw - 38px)); padding: clamp(38px, 6vw, 72px); border: 1px solid rgba(178,148,98,.62); overflow: visible; background: rgba(250,249,246,.98); color: var(--ink); box-shadow: 0 34px 110px rgba(20,18,15,.32); }
.legal-panel::backdrop { background: rgba(18,18,17,.62); backdrop-filter: blur(5px); }
.legal-close { position: absolute; left: 50%; bottom: -32px; width: clamp(64px, 7vw, 76px); aspect-ratio: 1; padding: 14px; border: 1px solid rgba(178,148,98,.7); border-radius: 50%; display: grid; place-items: center; background: var(--ivory); transform: translateX(-50%); cursor: pointer; box-shadow: 0 12px 30px rgba(38,34,28,.13); transition: background .35s, transform .35s, box-shadow .35s; }
.legal-close img, .legal-close span { grid-area: 1 / 1; transition: opacity .32s, transform .38s; }
.legal-close img { width: 100%; height: auto; }
.legal-close span { opacity: 0; color: #fff; font-size: 7px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; transform: scale(.78); }
.legal-close:is(:hover,:focus-visible,.is-armed) { background: var(--ink); transform: translateX(-50%) scale(1.08) rotate(-3deg); box-shadow: 0 16px 38px rgba(38,34,28,.2); outline: none; }
.legal-close:is(:hover,:focus-visible,.is-armed) img { opacity: 0; transform: scale(.8); }
.legal-close:is(:hover,:focus-visible,.is-armed) span { opacity: 1; transform: scale(1); }
.legal-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
.legal-kicker { color: var(--gold); font-size: 8px; letter-spacing: .22em; text-transform: uppercase; }
.legal-panel h2 { margin: 14px 0 34px; font: 400 clamp(27px, 4vw, 42px)/1.1 var(--serif); }
.legal-columns { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 5vw, 54px); }
.legal-columns h3 { margin: 0 0 12px; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.legal-columns p { margin: 0; color: var(--soft); font-size: 10px; line-height: 1.75; }
.legal-mail { display: inline-block; margin-top: 30px; padding-bottom: 3px; border-bottom: 1px solid var(--gold); font-size: 9px; letter-spacing: .04em; }

/* Deuxième page — constellation libre. */
.services-screen {
  background-color: #17130f;
  background-image: image-set(url("assets/boulier-antique.webp") type("image/webp"), url("assets/boulier-antique.jpg") type("image/jpeg"));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.services-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(20,16,12,.26) 0, rgba(13,10,8,.48) 58%, rgba(5,4,3,.72) 100%),
    linear-gradient(90deg, rgba(0,0,0,.26), rgba(0,0,0,.05) 50%, rgba(0,0,0,.34));
}
.constellation { --diameter: min(82vw, 900px, calc(var(--app-height) - 70px)); position: absolute; z-index: 1; left: 50%; top: 50%; width: var(--diameter); height: var(--diameter); min-width: 0; min-height: 0; transform: translate(-50%,-50%); }
.ring { position: absolute; left: 50%; top: 50%; border: 1px solid var(--line); border-radius: 50%; transform: translate(-50%,-50%); transition: opacity .5s, transform .6s, border-color .5s, filter .5s; animation: ring-breathe 12s ease-in-out infinite alternate; }
.services-screen .ring { border-color: rgba(220,194,145,.38); filter: drop-shadow(0 1px 5px rgba(0,0,0,.35)); }
.ring::before, .ring::after { content: ""; position: absolute; width: 7px; height: 7px; border: 1px solid var(--gold); border-radius: 50%; background: var(--ivory); }
.ring::before { left: 10%; top: 18%; }
.ring::after { right: 6%; bottom: 25%; }
.ring-outer { width: 64%; height: 64%; }
.ring-inner { width: 47%; height: 47%; border-color: rgba(178,148,98,.38); animation-delay: -5s; animation-duration: 15s; }
.identity { --central-pull-x: 0px; --central-pull-y: 0px; position: absolute; z-index: 3; left: 50%; top: 50%; width: 47%; height: 47%; min-width: 0; min-height: 0; padding: 0; border: 1px solid transparent; border-radius: 50%; overflow: hidden; display: grid; place-items: center; text-align: center; container-type: inline-size; background: var(--ivory); transform: translate(calc(-50% + var(--central-pull-x)),calc(-50% + var(--central-pull-y))); transition: background .45s, border-color .45s, transform .18s ease-out, box-shadow .45s; }
.central-logo-frame, .central-quote { position: absolute; left: 50%; top: 50%; transition: opacity .4s, transform .5s; }
.central-logo-frame { width: 66%; display: grid; place-items: center; transform: translate(-50%,-50%); }
.central-logo-frame img { width: 100%; height: auto; display: block; }
.central-quote { width: 70%; margin: 0; opacity: 0; transform: translate(-50%,-50%) scale(.86); }
.central-quote p { margin: 0; color: #fff; font: 400 clamp(12px, 5.2cqw, 21px)/1.42 var(--serif); letter-spacing: .025em; }
.central-quote cite { display: block; margin-top: 18px; color: var(--gold); font-size: clamp(6px, .65vw, 8px); font-style: normal; letter-spacing: .2em; text-transform: uppercase; }
.identity:is(:hover,:focus-visible) { background: var(--ink); border-color: var(--gold); transform: translate(calc(-50% + var(--central-pull-x)),calc(-50% + var(--central-pull-y))) scale(1.025); box-shadow: 0 24px 66px rgba(0,0,0,.28); }
.identity:is(:hover,:focus-visible) .central-logo-frame { opacity: 0; transform: translate(-50%,-50%) scale(.88); }
.identity:is(:hover,:focus-visible) .central-quote { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.identity:focus-visible { outline: 1px solid var(--gold); outline-offset: -1px; }
.home-orb { --diameter: clamp(48px, 5.7vw, 64px); position: absolute; z-index: 5; left: 66%; top: 32%; width: var(--diameter); height: var(--diameter); padding: 11px; border: 1px solid rgba(178,148,98,.65); border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ivory); transform: translate(-50%,-50%); cursor: pointer; box-shadow: 0 10px 25px rgba(38,34,28,.1); transition: background .35s, transform .35s, box-shadow .35s; }
.home-orb img, .home-orb span { grid-area: 1 / 1; transition: opacity .32s, transform .38s; }
.home-orb img { width: 100%; height: auto; }
.home-orb span { opacity: 0; color: #fff; font-size: 6px; letter-spacing: .12em; text-transform: uppercase; transform: scale(.8); }
.home-orb:is(:hover,:focus-visible,.is-armed) { background: var(--ink); transform: translate(-50%,-50%) scale(1.08); box-shadow: 0 15px 34px rgba(38,34,28,.18); }
.home-orb:is(:hover,:focus-visible,.is-armed) img { opacity: 0; transform: scale(.82); }
.home-orb:is(:hover,:focus-visible,.is-armed) span { opacity: 1; transform: scale(1); }
.home-orb:focus-visible, .service-orb:focus-visible, .detail-back:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }

.service-orb { --x: 50%; --y: 50%; --delay: 0s; --pull-x: 0px; --pull-y: 0px; --float-y: 0px; --diameter: clamp(58px, 7.4vw, 82px); position: absolute; z-index: 4; left: var(--x); top: var(--y); width: var(--diameter); height: var(--diameter); min-width: 0; min-height: 0; padding: 0; border: 1px solid rgba(178,148,98,.55); border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ink); color: #fff; box-shadow: 0 11px 30px rgba(38,34,28,.1); transform: translate(-50%,-50%) translate(var(--pull-x), calc(var(--pull-y) + var(--float-y))) scale(1); cursor: pointer; animation: float 6.8s var(--delay) ease-in-out infinite; transition: background .35s, border-color .35s, box-shadow .35s, opacity .45s, filter .45s, transform .18s ease-out; }
.service-orb .orb-icon,
.service-orb .orb-title { grid-area: 1 / 1; transition: opacity .28s, transform .35s; }
.service-orb .orb-icon { font: clamp(24px, 3vw, 34px)/1 var(--serif); }
.business-arrow { font-family: "Times New Roman", Times, serif !important; font-style: normal; font-weight: 400; font-variant: normal; }
.service-orb .orb-title { width: 88%; opacity: 0; font-size: clamp(5.5px, .67vw, 8px); font-weight: 500; line-height: 1.28; letter-spacing: .07em; text-align: center; text-transform: uppercase; transform: scale(.78); }
.service-orb:is(:hover,:focus-visible,.is-opening,.is-armed) { background: var(--gold); border-color: var(--gold); box-shadow: 0 18px 44px rgba(86,67,34,.24); transform: translate(-50%,-50%) translate(var(--pull-x), calc(var(--pull-y) + var(--float-y))) scale(1.11); }
.service-orb:is(:hover,:focus-visible,.is-armed) .orb-icon { opacity: 0; transform: rotate(5deg) scale(.76); }
.service-orb:is(:hover,:focus-visible,.is-armed) .orb-title { opacity: 1; transform: scale(1); }
.service-orb.is-opening .orb-icon { opacity: 0; transform: rotate(5deg) scale(.76); }
.service-orb.is-opening .orb-title { opacity: 1; transform: scale(1); }
.constellation.orb-engaged .ring { border-color: rgba(178,148,98,.36); filter: drop-shadow(0 0 8px rgba(178,148,98,.08)); }
.constellation.orb-engaged .service-orb:not(:hover) { opacity: .68; filter: saturate(.58); }
.service-1 { --x: 50%; --y: 6%; --delay: -.4s; }
.service-2 { --x: 82%; --y: 22%; --delay: -2.2s; }
.service-3 { --x: 94%; --y: 56%; --delay: -1.1s; }
.service-4 { --x: 75%; --y: 87%; --delay: -3.4s; }
.service-5 { --x: 25%; --y: 87%; --delay: -1.8s; }
.service-6 { --x: 6%; --y: 56%; --delay: -4s; }
.service-7 { --x: 18%; --y: 22%; --delay: -2.8s; }

.service-detail { --origin-x: 0px; --origin-y: 0px; --diameter: min(54%, 470px); position: absolute; z-index: 10; left: 50%; top: 50%; width: var(--diameter); height: var(--diameter); min-width: 0; min-height: 0; padding: clamp(54px, 7vw, 84px); border: 1px solid var(--gold); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(250,249,246,.98); box-shadow: 0 30px 90px rgba(60,48,29,.18), 0 0 0 14px rgba(178,148,98,.05); opacity: 0; visibility: hidden; transform: translate(calc(-50% + var(--origin-x)),calc(-50% + var(--origin-y))) scale(.12); transform-origin: center; transition: opacity .35s, visibility .45s, transform .7s cubic-bezier(.18,.86,.22,1); }
.detail-icon { color: var(--gold); font: 34px/1 var(--serif); }
.service-detail h2 { max-width: 82%; margin: 17px 0 14px; font-size: clamp(10px, 1.2vw, 14px); font-weight: 500; line-height: 1.42; letter-spacing: .145em; text-transform: uppercase; }
.service-detail p { max-width: 345px; margin: 0; color: #575753; font-size: clamp(9px, .96vw, 12px); font-weight: 300; line-height: 1.72; letter-spacing: .012em; }
.service-detail p em { display: block; margin-top: 10px; color: var(--gold); font-size: .9em; font-style: normal; }
.detail-back { position: absolute; left: 50%; bottom: -31px; width: clamp(64px, 7vw, 78px); aspect-ratio: 1; padding: 14px; border: 1px solid rgba(178,148,98,.7); border-radius: 50%; display: grid; place-items: center; background: var(--ivory); transform: translateX(-50%); cursor: pointer; transition: transform .35s, background .35s; }
.detail-back img,
.detail-back span { grid-area: 1 / 1; transition: opacity .32s, transform .38s; }
.detail-back img { z-index: 1; width: 100%; opacity: 1; }
.detail-back span { z-index: 2; opacity: 0; color: #fff; font-size: 8px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; transform: scale(.8); }
.detail-back:is(:hover,:focus-visible,.is-armed) { background: var(--ink); transform: translateX(-50%) scale(1.08) rotate(-3deg); }
.detail-back:is(:hover,:focus-visible,.is-armed) img { opacity: 0; transform: scale(.82); }
.detail-back:is(:hover,:focus-visible,.is-armed) span { opacity: 1; transform: scale(1); }
.constellation.detail-open .service-detail { opacity: 1; visibility: visible; transform: translate(-50%,-50%) scale(1); }
.constellation.detail-open .service-orb, .constellation.detail-open .identity, .constellation.detail-open .home-orb, .constellation.detail-open .ring { opacity: .1; pointer-events: none; }
.constellation.detail-open .ring { transform: translate(-50%,-50%) scale(1.08); }
.constellation.opening-detail .service-orb:not(.is-opening), .constellation.opening-detail .identity, .constellation.opening-detail .home-orb, .constellation.opening-detail .ring { opacity: .35; }

@media (hover: hover) and (pointer: fine) {
  .service-detail { --diameter: min(64%, 520px); padding: clamp(44px, 5vw, 62px) clamp(48px, 6vw, 72px) clamp(58px, 6vw, 72px); }
  .service-detail h2 { width: 100%; max-width: 90%; }
  .service-detail p { width: 100%; max-width: 380px; }
  .service-detail > .detail-back { bottom: clamp(-68px, -6vw, -54px); }
  .service-detail > .detail-icon,
  .service-detail > h2,
  .service-detail > p { opacity: 0; transition: opacity .18s ease; }
  .service-detail > .detail-back { opacity: 0; transition: transform .35s, background .35s, opacity .18s ease; }
  .constellation.detail-open .service-detail > .detail-icon,
  .constellation.detail-open .service-detail > h2,
  .constellation.detail-open .service-detail > p,
  .constellation.detail-open .service-detail > .detail-back { opacity: 1; transition-delay: .34s; }
}

@keyframes float { 0%,100% { --float-y: 0px; } 50% { --float-y: -7px; } }
@keyframes ring-breathe { from { opacity: .72; } to { opacity: 1; filter: drop-shadow(0 0 8px rgba(178,148,98,.08)); } }
@keyframes home-breathe { from { transform: scale(1); } to { transform: scale(1.035); } }

@media (hover: none), (pointer: coarse), (any-pointer: coarse) {
  .service-detail { transition: opacity .18s, visibility .18s, transform .3s cubic-bezier(.18,.86,.22,1); }
  .home-orb:not(.is-armed) img,
  .detail-back:not(.is-armed) img,
  .legal-close:not(.is-armed) img { opacity: 1; transform: none; }
  .home-orb:not(.is-armed) span,
  .detail-back:not(.is-armed) span,
  .legal-close:not(.is-armed) span { opacity: 0; transform: scale(.8); }
  .home-orb.is-armed img,
  .detail-back.is-armed img,
  .legal-close.is-armed img { opacity: 0; transform: scale(.82); }
  .home-orb.is-armed span,
  .detail-back.is-armed span,
  .legal-close.is-armed span { opacity: 1; transform: scale(1); }
  .home-contact { padding: 0; }
  .home-contact:not(.is-armed) { padding: calc(var(--diameter) * .13); background: rgba(250,249,246,.9); transform: none; }
  .home-contact:not(.is-armed) > img:first-child { display: block; width: 88%; }
  .home-contact:not(.is-armed) .mail-icon { display: none; }
  .home-contact.is-armed > img:first-child { display: none; }
  .home-contact.is-armed .mail-icon { display: block; width: 100%; height: 100%; object-fit: cover; transform: none; }
  .home-coordinates { padding: 0; }
  .home-coordinates:not(.is-armed):not(.is-open) { padding: calc(var(--diameter) * .13); }
  .home-coordinates:not(.is-armed):not(.is-open) .coordinates-logo { display: block; width: 88%; opacity: 1; visibility: visible; transform: none; }
  .home-coordinates:not(.is-armed):not(.is-open) .coordinates-mobile-icon { display: none; }
  .home-coordinates.is-armed .coordinates-logo,
  .home-coordinates.is-open .coordinates-logo { display: none; }
  .home-coordinates .coordinates-mobile-icon { display: none; }
  .home-coordinates .coordinates-content { inset: 10%; }
  .home-coordinates:not(.is-open) { z-index: 2; width: var(--diameter); height: var(--diameter); background: rgba(250,249,246,.9); color: var(--ink); transform: none; }
  .home-coordinates.is-armed:not(.is-open) {
    background-color: var(--ink);
    background-image: image-set(url("assets/icone-adresse.webp") type("image/webp"), url("assets/icone-adresse.png?v=20260814-3") type("image/png"));
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .home-coordinates:not(.is-open) .coordinates-content { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(.86); }
  .home-coordinates.is-open { z-index: 12; width: calc(var(--diameter) * 2); height: calc(var(--diameter) * 2); transform: none; box-shadow: 0 18px 54px rgba(0,0,0,.3); }
  .home-coordinates.is-open .coordinates-mobile-icon { display: none; }
  .legal-trigger:not(.is-armed) .legal-symbol { opacity: 1; transform: scale(1); }
  .legal-trigger:not(.is-armed) .legal-label { opacity: 0; transform: scale(.75); }
  .legal-trigger.is-armed { background: var(--ink); border-color: var(--gold); transform: translate(-50%,-50%); }
  .legal-trigger.is-armed .legal-symbol { opacity: 0; transform: scale(.75); }
  .legal-trigger.is-armed .legal-label { opacity: 1; transform: scale(1); }
}

@media (max-width: 700px) {
  :root { --central-diameter: clamp(156px, 54vmin, 300px); }
  .home-mark { padding: clamp(28px, 10vmin, 42px); }
  .home-contact { --diameter: clamp(110px, 35vmin, 150px); left: max(16px, env(safe-area-inset-left)); top: max(16px, env(safe-area-inset-top)); padding: 0; }
  .home-contact:not(.is-armed) > img:first-child { display: block; width: 88%; }
  .home-contact:not(.is-armed) .mail-icon { display: none; }
  .home-contact.is-armed > img:first-child { display: none; }
  .home-contact.is-armed .mail-icon { display: block; width: 100%; height: 100%; object-fit: cover; transform: none; }
  .home-coordinates { --diameter: clamp(110px, 35vmin, 150px); right: max(16px, env(safe-area-inset-right)); bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px)); padding: 0; }
  .home-coordinates:not(.is-armed):not(.is-open) .coordinates-logo { display: block; }
  .home-coordinates .coordinates-mobile-icon { display: none; }
  .home-coordinates .coordinates-content { inset: 10% 10% 10% 14%; }
  .home-coordinates.is-open .coordinates-mobile-icon { display: none; }
  .home-coordinates.is-open { z-index: 12; width: calc(var(--diameter) * 2); height: calc(var(--diameter) * 2); transform: none; box-shadow: 0 18px 54px rgba(0,0,0,.3); }
  .legal-trigger { --diameter: clamp(36px, 11vmin, 58px); left: calc(50% - min(32vmin, 142px)); top: 66%; }
  .legal-label { font-size: 5px; letter-spacing: .07em; }
  .constellation { --diameter: min(calc(100vw - 20px), calc(var(--app-height) - 20px)); top: 50%; }
  .ring-outer { width: 66%; height: 66%; }
  .ring-inner { width: 48%; height: 48%; }
  .identity { width: 48%; height: 48%; padding: clamp(28px, 9vmin, 54px); }
  .central-quote { width: 92%; }
  .central-quote p { font-size: clamp(10px, 3vw, 15px); }
  .central-quote cite { margin-top: 12px; font-size: 6px; }
  .home-orb { --diameter: clamp(32px, 10.5vmin, 46px); left: 67%; top: 32%; padding: clamp(6px, 2.1vmin, 8px); }
  .home-orb span { font-size: 5px; letter-spacing: .08em; }
  .service-orb { --diameter: clamp(36px, 11.5vmin, 50px); }
  .service-orb .orb-icon { font-size: clamp(17px, 5.4vmin, 24px); }
  .service-orb .orb-title { font-size: clamp(4.1px, 1.28vmin, 5.6px); letter-spacing: .035em; }
  .service-1 { --y: 8%; }
  .service-2 { --x: 80%; --y: 20%; }
  .service-3 { --x: 91%; --y: 53%; }
  .service-4 { --x: 74%; --y: 88%; }
  .service-5 { --x: 26%; --y: 88%; }
  .service-6 { --x: 9%; --y: 53%; }
  .service-7 { --x: 20%; --y: 20%; }
  .service-detail { --diameter: min(var(--phone-detail-diameter), 390px); padding: clamp(40px, 13vmin, 50px); }
  .detail-icon { font-size: 26px; }
  .service-detail h2 { max-width: 90%; font-size: 10px; }
  .service-detail p { font-size: 9px; line-height: 1.62; }
  .detail-back { bottom: -27px; }
  .legal-columns { grid-template-columns: 1fr; gap: 25px; }
  .legal-panel { max-height: calc(var(--app-height) - 72px); padding: 40px 30px 82px; overflow-y: auto; }
  .legal-close { bottom: 8px; }
}

/* Tablettes tactiles (iPad compris) : les satellites disposent de davantage
   d'espace que sur smartphone, sans bénéficier du survol d'un ordinateur. */
@media (min-width: 600px) and (max-width: 1400px) and (min-height: 651px) and (any-pointer: coarse) {
  .service-orb { --diameter: clamp(76px, 8vw, 94px); }
  .service-orb .orb-icon { font-size: clamp(28px, 3.2vw, 38px); }
  .service-orb .orb-title { width: 90%; font-size: 5px; line-height: 1.3; }

  .service-detail { --diameter: min(52.7vmin, 520px, calc(var(--app-height) - 90px)); padding: clamp(58px, 7vw, 78px); }
  .detail-icon { font-size: 26px; }
  .service-detail h2 { max-width: 90%; margin: 10px 0 9px; font-size: 10px; }
  .service-detail p { max-width: 410px; font-size: 9px; line-height: 1.62; }
  .service-detail p em { margin-top: 8px; }
  .service-detail > .detail-back { bottom: -31px; }
}

/* Smartphones tactiles en paysage : leur largeur ressemble à celle d'une
   tablette, mais leur faible hauteur exige une constellation compacte. */
@media (orientation: landscape) and (max-height: 650px) and (any-pointer: coarse) {
  :root { --central-diameter: clamp(156px, 54vmin, 250px); }
  .legal-panel > .legal-close {
    left: auto;
    right: -20px;
    top: -20px;
    bottom: auto;
    transform: none;
  }
  .legal-panel > .legal-close:is(:hover,:focus-visible,.is-armed) { transform: scale(1.08) rotate(-3deg); }
  .constellation { --diameter: min(calc(100vw - 24px), calc(var(--app-height) - 24px)); top: 50%; }
  .ring-outer { width: 66%; height: 66%; }
  .ring-inner { width: 48%; height: 48%; }
  .identity { width: 48%; height: 48%; padding: clamp(26px, 8vmin, 38px); }
  .central-quote { width: 92%; }
  .central-quote p { font-size: clamp(9px, 2.7vmin, 13px); }
  .central-quote cite { margin-top: 10px; font-size: 6px; }

  .home-orb { --diameter: clamp(32px, 10.5vmin, 46px); left: 67%; top: 32%; padding: clamp(6px, 2.1vmin, 8px); }
  .home-orb span { font-size: 5px; letter-spacing: .08em; }
  .service-orb { --diameter: clamp(36px, 11.5vmin, 50px); }
  .service-orb .orb-icon { font-size: clamp(17px, 5.4vmin, 24px); }
  .service-orb .orb-title { font-size: clamp(4.1px, 1.28vmin, 5.6px); letter-spacing: .035em; }
  .service-1 { --y: 8%; }
  .service-2 { --x: 80%; --y: 20%; }
  .service-3 { --x: 91%; --y: 53%; }
  .service-4 { --x: 74%; --y: 88%; }
  .service-5 { --x: 26%; --y: 88%; }
  .service-6 { --x: 9%; --y: 53%; }
  .service-7 { --x: 20%; --y: 20%; }

  .service-detail { --diameter: min(var(--phone-detail-diameter), 390px); padding: clamp(36px, 10vmin, 44px); }
  .detail-icon { font-size: 26px; }
  .service-detail h2 { max-width: 90%; margin: 10px 0 9px; font-size: 10px; }
  .service-detail p { max-width: 300px; font-size: 9px; line-height: 1.62; }
  .service-detail p em { margin-top: 8px; }
  .service-detail > .detail-back {
    left: auto;
    right: -24px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  .service-detail > .detail-back:is(:hover,:focus-visible,.is-armed) { transform: translateY(-50%) scale(1.08) rotate(-3deg); }
}

@media (max-width: 420px) {
  :root { --central-diameter: 54vmin; }
  .home-mark { padding: clamp(27px, 9.5vmin, 34px); }
  .home-contact { --diameter: 35vmin; }
  .home-coordinates { --diameter: 35vmin; padding: 0; }
  .constellation { --diameter: min(calc(100vw - 18px), calc(var(--app-height) - 24px)); }
  .service-detail { --diameter: min(var(--phone-detail-diameter), 390px); padding: clamp(38px, 12vmin, 44px); }
  .detail-icon { font-size: 26px; }
}

@media (max-height: 700px) and (min-width: 701px) and (hover: hover) and (pointer: fine) {
  :root { --central-diameter: min(330px, calc(var(--app-height) - 150px)); }
  .constellation { --diameter: min(74vw, calc(var(--app-height) - 86px)); }
  .home-contact { --diameter: 158px; }
  .home-coordinates { --diameter: 158px; padding: 29px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}