/* ==========================================================================
   AUBE — direction artistique Anton Anton (phase D : tout le site, 27 langues)
   Couche chargée APRÈS site.css. Aucune règle ne modifie le contenu :
   uniquement la présentation. Retirer ce fichier (et aube.js) = retour à la DA v225.
   La nuit pour la promesse, les visuels et les outils ; le jour pour la lecture et la preuve.
   ========================================================================== */

/* ---------- 1. Jetons ---------- */
:root {
  --nuit: #07051a;
  --nuit-2: #0e0b26;
  --nuit-3: #17123a;
  --papier: #f4f2ff;
  --papier-2: #ebe7fb;
  --papier-3: #ffffff;
  --encre: #120e2e;
  --encre-2: #2a2550;
  --ardoise: #5b5680;
  --brume: #a7a2c8;
  --aurore: linear-gradient(90deg, #f6c35b, #e8577a 30%, #a94fc4 55%, #6d5ff0 78%, #5fd3ee);
  --aurore-chaude: linear-gradient(100deg, #f6c35b 0%, #f39a6c 30%, #e8577a 62%, #c94f9b 100%);
  --aurore-jour: linear-gradient(90deg, #a8650a, #c3335a 30%, #8b2fa8 55%, #4f3fd8 78%, #13789a);

  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --t-h1: clamp(2.6rem, 5.8vw, 6rem);
  --t-h2: clamp(2.05rem, 4.1vw, 3.85rem);
  --t-h3: clamp(1.18rem, 1.5vw, 1.45rem);
  --t-serif: clamp(1.75rem, 3vw, 2.85rem);
  --t-lead: clamp(1.07rem, 1.25vw, 1.22rem);
  --t-label: .8125rem;
  --section: clamp(5.5rem, 10vw, 9.5rem);
  --section-tight: clamp(4rem, 7vw, 6rem);
  --head-h: 72px;
  --btn-h: 3.25rem;
  --ease-aube: cubic-bezier(.22, .9, .24, 1);
}

/* ---------- 2. Base ---------- */
body {
  font-stretch: 100%;
  font-weight: 430;
  letter-spacing: .002em;
  font-feature-settings: "kern", "liga";
}
p { max-width: 68ch; }
::selection { background: #e8577a; color: #fff; }

/* Effets retirés : la comète et le grain. Le curseur rond et son halo, les étoiles filantes restent. */
.fire-comet, .grain { display: none !important; }
.fr-city text, .sf-ic .ic-t { font-family: var(--body) !important; }

/* Puces : plus d'orbes, des points nets alignés sur la ligne */
.mq-row b { background: var(--aurore) !important; box-shadow: none !important; width: 5px !important; height: 5px !important; }

/* ---------- 3. Titres ---------- */
h1, h2, h3, .fitx {
  text-transform: none;
  font-stretch: 112%;
  font-weight: 740;
  letter-spacing: -.028em;
  line-height: 1.02;
  font-size: min(var(--fs), calc(100cqi / (var(--w, 8) * .74)));
}
h1 { font-stretch: 118%; font-weight: 780; letter-spacing: -.036em; line-height: .98; }
h3 {
  font-stretch: 104%;
  font-weight: 660;
  letter-spacing: -.012em;
  line-height: 1.18;
  font-size: var(--fs);
  overflow-wrap: break-word;
}

/* Deux lignes, deux largeurs : la première droite et légère, la seconde s'étire (Archivo variable, comme le logotype) */
h1 .ln.o, h2 .ln.o { color: var(--ink); -webkit-text-stroke: 0; font-stretch: 100%; font-weight: 500; letter-spacing: -.032em; }
h2 .ln.g, h2 .g { background: none; color: var(--ink); -webkit-text-fill-color: currentColor; font-stretch: 125%; font-weight: 780; letter-spacing: -.034em; }
h1 .ln.g {
  width: fit-content;
  max-width: 100%;
  font-stretch: 125%;
  font-weight: 800;
  background: var(--aurore);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding: .02em .04em .12em 0;
  margin: -.02em 0 -.12em;
}
/* Accueil : le H1 reste blanc, la lumière est portée par le marché qui change dans la mission */
.hx h1 .ln.g { background: none; color: #fff; -webkit-text-fill-color: #fff; }

/* Les titres se déplient en apparaissant */
.js .ln-mask .ln {
  clip-path: inset(0 -6% 100% -6%);
  transform: translateY(40%);
  transition: clip-path 1s var(--ease-aube), transform 1s var(--ease-aube), font-stretch 1.6s var(--ease-aube);
}
.js .ln-mask.in .ln { clip-path: inset(-20% -6% -24% -6%); transform: none; }
.js .ln-mask.in .ln + .ln { transition-delay: .12s, .12s, .3s; }
.js .ln-mask .ln.g { font-stretch: 96%; }
.js .ln-mask.in .ln.g { font-stretch: 125%; }

/* Sur-titres : en minuscules, discrets, avec un filet d'aurore */
.label {
  font-family: var(--body);
  font-size: var(--t-label);
  font-weight: 520;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--muted);
}
.eyebrow { gap: .75rem; margin-bottom: 1.4rem; }
.eyebrow::before { width: 1.75rem; }

.lead { font-size: var(--t-lead); line-height: 1.6; }

/* ---------- 4. Boutons et liens ---------- */
.btn {
  min-height: var(--btn-h);
  padding: 0 1.55rem;
  font-family: var(--body);
  font-stretch: 106%;
  font-weight: 620;
  font-size: .96875rem;
  letter-spacing: -.004em;
  text-transform: none;
  gap: .6rem;
}
.btn-main {
  background: var(--aurore-chaude);
  background-size: 180% 100%;
  background-position: 0 0;
  color: #120e2e;
  box-shadow: 0 14px 34px -16px rgba(232, 87, 122, .75);
  transition: background-position .8s var(--ease-aube), transform .5s var(--ease-aube), box-shadow .5s;
}
.btn-main:hover { background-position: 100% 0; color: #120e2e; box-shadow: 0 18px 40px -14px rgba(232, 87, 122, .9); }
.btn-sm { --bh: 2.6rem; min-height: 2.6rem; padding: 0 1.1rem; font-size: .875rem; }
.link { font-weight: 620; }
.arrow { width: 48px; height: 48px; }

/* ---------- 5. En-tête : compact, toujours visible, Contact sur mobile ---------- */
.site-head { height: var(--head-h); }
.site-head.hide { transform: none; }
.site-head.scrolled { background: rgba(7, 5, 26, .93); border-color: rgba(255, 255, 255, .08); }
.logo-mark { width: 40px; height: 40px; }
.nav-inline { gap: clamp(1.1rem, 2vw, 2.1rem); }
.nav-inline > li > a {
  font-size: .9375rem;
  font-weight: 520;
  font-stretch: 104%;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(244, 242, 255, .82);
}
.nav-inline > li > a:hover, .nav-inline > li > a[aria-current] { color: #fff; }
.nav-inline > li > a::after { bottom: .15rem; height: 2px; border-radius: 2px; }
.langs { font-size: .8125rem; letter-spacing: .06em; font-weight: 600; }
.langs a:not([aria-current]) { color: #a7a2c8; }
.head-right { gap: .9rem; }
.dd-in { border-radius: 18px; border-color: rgba(255, 255, 255, .12); background: rgba(12, 9, 35, .96); }
.nav-inline .dd .dd-h { font-family: var(--body); font-stretch: 108%; font-weight: 700; }
.menu-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); }
.menu-btn .ring { display: none; }
.menu-btn .bars { width: 18px; height: 10px; margin: auto; padding: 0; border: 0; border-radius: 0; background: none; }
.menu-btn .bars i:last-child { top: 8px; }
.menu-btn[aria-expanded=true] .bars i:first-child, .menu-btn[aria-expanded=true] .bars i:last-child { top: 4px; }
@media (max-width: 768px) {
  .head-right .btn { display: inline-flex; }
  .head-right .langs { display: none; }
  .head-right { gap: .5rem; }
  .site-head .btn-sm { min-height: 2.5rem; padding: 0 1rem; font-size: .875rem; }
}
/* Menu mobile */
.nav-main > li > a {
  font-family: var(--body) !important;
  text-transform: none !important;
  font-stretch: 112% !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
}

/* ---------- 6. Bandeau cookies : même contenu, plus compact ---------- */
.cc-box {
  width: min(380px, calc(100vw - 2rem));
  padding: .95rem 1rem .9rem;
  border-radius: 16px;
  left: auto;
  right: max(1rem, env(safe-area-inset-right));
}
.cc-t { font-size: .78rem; letter-spacing: .02em; text-transform: none; margin-bottom: .3rem; }
.cc-x { font-size: .84rem; line-height: 1.45; }
.cc-btns { margin-top: .7rem; gap: .5rem; }
.cc-b { font-size: .84rem; letter-spacing: 0; text-transform: none; font-weight: 640; padding: .6rem .8rem; }
@media (max-width: 768px) {
  .cc-box { left: max(.75rem, env(safe-area-inset-left)); right: max(.75rem, env(safe-area-inset-right)); bottom: max(.75rem, env(safe-area-inset-bottom)); width: auto; }
}

/* ---------- 7. Têtes de section ---------- */
.sec-head { margin-bottom: clamp(2.75rem, 5vw, 4.75rem); }
.sec-head .sh-aside p { color: var(--muted); max-width: 40ch; }

/* ==========================================================================
   NUIT — l'en-tête de l'accueil
   ========================================================================== */
.hero.hx {
  min-height: min(100svh, 1000px);
  padding: calc(var(--head-h) + clamp(3.2rem, 7vh, 5rem)) 0 clamp(3.5rem, 7vh, 5rem);
}
.hero-meta { top: calc(var(--head-h) + 1rem); }
.hero-meta .label { color: rgba(244, 242, 255, .62); }
.hx .wrap.cq > h1 { --fs: clamp(2.6rem, 5.4vw, 5.7rem); }
.hero.hx .wrap.cq { gap: clamp(1rem, 2vw, 1.5rem); }
.hx .hero-mission { justify-content: flex-start; text-align: left; }
.hero-mission small { font-size: clamp(1rem, 1.2vw, 1.12rem); font-weight: 520; color: rgba(244, 242, 255, .78); }
.hx .hero-mission .serif-g { font-size: clamp(1.7rem, 2.9vw, 2.75rem); line-height: 1.12; }
.hero-foot .lead { font-size: var(--t-lead); color: rgba(244, 242, 255, .84); max-width: 54ch; margin: 0; }
.hero-foot { row-gap: 1.6rem; }
.hx-trust strong { font-size: .95rem; font-weight: 640; }
.hx-trust span { font-size: .9rem; color: rgba(244, 242, 255, .74); }
.hx-trust b { color: #f6c35b; }
.scroll-cue { font-size: .8rem; }

/* Le marché qui change s'allume : levée + reflet de lumière à chaque changement */
.hx .hero-mission .hx-ctry {
  background-image: linear-gradient(100deg, transparent 0 38%, rgba(255, 255, 255, .95) 50%, transparent 62% 100%), var(--aurore);
  background-size: 260% 100%, 100% 100%;
  background-position: 120% 0, 0 0;
  background-repeat: no-repeat;
  display: inline-block;
  animation: aube-allume 1.25s var(--ease-aube) both;
}
@keyframes aube-allume {
  0% { opacity: 0; transform: translateY(.3em); filter: blur(5px); background-position: 120% 0, 0 0; }
  45% { opacity: 1; transform: none; filter: none; }
  100% { opacity: 1; transform: none; filter: none; background-position: -60% 0, 0 0; }
}

/* La lumière du ciel suit le marché affiché dans le visuel */
.hx-bg::before, .hx-bg::after {
  content: "";
  position: absolute;
  inset: -10%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hx-bg::before { background: radial-gradient(42% 46% at 76% 30%, rgba(246, 195, 91, .22), transparent 70%), radial-gradient(36% 40% at 88% 78%, rgba(232, 87, 122, .2), transparent 70%); }
.hx-bg::after { background: radial-gradient(42% 46% at 74% 28%, rgba(95, 211, 238, .2), transparent 70%), radial-gradient(36% 40% at 90% 80%, rgba(109, 95, 240, .26), transparent 70%); }
.hx:has(.hx-stage[data-m="de"]) .hx-bg::before,
.hx:has(.hx-stage[data-m="fr"]) .hx-bg::before { opacity: 1; }
.hx:has(.hx-stage[data-m="nl"]) .hx-bg::after,
.hx:has(.hx-stage[data-m="en"]) .hx-bg::after { opacity: 1; }

@media (max-width: 999px) {
  .hero.hx > .wrap.cq { display: flex; flex-direction: column; }
  .hero.hx > .wrap.cq > h1 { order: 1; }
  .hero.hx > .wrap.cq > .hero-mission { order: 2; }
  .hero.hx > .wrap.cq > .hero-foot { order: 3; }
  .hero.hx > .wrap.cq > .hero-langs { order: 4; }
  .hero.hx > .wrap.cq > .hx-stage { order: 5; margin-top: 1.5rem; }
}
@media (max-width: 768px) {
  .hero.hx { padding-top: calc(var(--head-h) + 3.2rem); }
  .hx .wrap.cq > h1 { --fs: clamp(2.35rem, 10.5vw, 3.1rem); }
  .hero-meta .label { font-size: .75rem; }
  .hero-foot .lead { font-size: 1rem; line-height: 1.55; }
}

/* ---------- Bandeau de mots-clés : plus lent ---------- */
.marquee .mq-row { --dur: 120s; }
.marquee .mq-row span { font-family: var(--body); font-stretch: 108%; font-weight: 600; letter-spacing: .01em; text-transform: none; font-size: clamp(.84rem, .95vw, .95rem); }

/* ---------- Manifeste ---------- */
.manifesto-text { font-family: var(--body); font-stretch: 108%; font-weight: 560; letter-spacing: -.022em; line-height: 1.16; font-size: clamp(1.7rem, 3.5vw, 3.35rem); }
.manifesto-text .w { opacity: .26; transition: opacity .45s linear; }
.manifesto-text .w.on { opacity: 1; }

/* ---------- Le canal (globe) ---------- */
.canal-l { font-family: var(--body); text-transform: none; font-stretch: 118%; font-weight: 780; letter-spacing: -.035em; }
.canal-l1 { font-stretch: 100%; font-weight: 460; }
.canal-l3 { font-family: var(--serif) !important; font-style: italic !important; font-weight: 400 !important; font-stretch: 100% !important; letter-spacing: -.01em; line-height: 1.2; font-size: clamp(1.6rem, 3.2vw, 3rem) !important; }
.canal-l3 .serif-g { font-family: inherit; font-style: italic; }

/* ==========================================================================
   NUIT — sections de promesse
   ========================================================================== */

/* ---------- Offres : un parcours en trois étapes reliées, sans cartes ---------- */
.offer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0 !important; position: relative; }
.offer-grid::before {
  content: "";
  position: absolute;
  left: 44px; right: calc(33.333% - 44px); top: 44px;
  height: 1px;
  background: linear-gradient(90deg, rgba(246, 195, 91, .85), rgba(232, 87, 122, .7) 45%, rgba(95, 211, 238, .55));
  transform-origin: 0 50%;
  transform: scaleX(var(--trace, 1));
  pointer-events: none;
}
.offer-grid::after {
  content: "";
  position: absolute;
  top: 41px; left: 44px;
  width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 3px rgba(255, 226, 180, .9), 0 0 24px 8px rgba(232, 87, 122, .45);
  opacity: 0;
  animation: aube-parcours 6.5s cubic-bezier(.5, 0, .3, 1) 1.2s infinite;
  pointer-events: none;
}
@keyframes aube-parcours {
  0% { left: 44px; opacity: 0; }
  6% { opacity: 1; }
  44% { left: calc(33.333% + 44px); }
  50% { left: calc(33.333% + 44px); }
  88% { left: calc(66.666% + 44px); opacity: 1; }
  100% { left: calc(66.666% + 44px); opacity: 0; }
}
.offer-grid .svc-tile {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0 clamp(1.25rem, 3vw, 3rem) 0 0;
  overflow: visible;
  gap: .9rem;
}
.offer-grid .svc-tile::after, .offer-grid .svc-tile .fx-glow { display: none; }
.offer-grid .svc-tile:hover { transform: none; }
.offer-grid .svc-tile-top { margin-bottom: .6rem; justify-content: flex-start; gap: 1rem; align-items: center; position: relative; z-index: 1; }
.offer-grid .svc-tile .pl-wrap { transition: transform .8s var(--ease-aube); }
.offer-grid .svc-tile:hover .pl-wrap { transform: scale(1.1) rotate(-8deg); }
.offer-grid .svc-tile-no { background: var(--nuit); padding: 0 .55rem; position: relative; z-index: 1; border-radius: 6px; }
.svc-tile-no {
  font-family: var(--body);
  font-stretch: 100%;
  font-weight: 560;
  font-size: .875rem;
  letter-spacing: .02em;
  color: var(--muted);
  -webkit-text-stroke: 0;
  font-variant-numeric: tabular-nums;
}
.offer-grid .svc-tile h3 { --fs: clamp(1.35rem, 1.9vw, 1.75rem); }
.offer-grid .svc-tile p { font-size: .98rem; color: rgba(244, 242, 255, .76); }
.offer-grid .svc-tile .arrow { width: 44px; height: 44px; }
.offer-grid .svc-tile-foot { justify-content: flex-start; margin-top: .4rem; }

/* Étiquettes : du texte discret, pas des pastilles en capitales */
.tags span { font-size: .78rem; font-weight: 560; letter-spacing: .01em; text-transform: none; padding: .3rem .7rem; color: var(--ink-2); }

/* ---------- Marchés : un atlas à filets, les planètes-drapeaux en vedette ---------- */
.markets { gap: 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.market {
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  border-radius: 0;
  background: none;
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1rem, 2.5vw, 2.5rem) clamp(1.75rem, 3vw, 2.75rem) 0;
  overflow: visible;
}
.markets > .market:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, .1); }
.markets > .market:nth-child(even) { padding-left: clamp(1rem, 2.5vw, 2.5rem); }
.market::after { -webkit-text-stroke: 0; color: rgba(255, 255, 255, .05); font-family: var(--body); font-stretch: 125%; font-weight: 800; }
.market:hover::after { color: rgba(246, 195, 91, .14); }
.market::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 80% at 12% 40%, rgba(109, 95, 240, .16), transparent 70%);
  opacity: 0;
  transition: opacity .6s;
  pointer-events: none;
}
.market:hover::before { opacity: 1; }
.market h3 { font-family: var(--body); font-stretch: 108%; font-weight: 680; letter-spacing: -.012em; }
.market .p3d-globe { filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .55)) drop-shadow(0 0 30px rgba(143, 180, 255, .18)); }
@media (max-width: 900px) {
  .markets > .market:nth-child(odd) { border-right: 0; }
  .markets > .market:nth-child(even) { padding-left: 0; }
}

/* ---------- Références : des logos plus lisibles ---------- */
.ref-ring .ref img { opacity: .95; }
.ref-ring { border-color: rgba(255, 255, 255, .07); }

/* ---------- Deux sens, quatre langues : une double page reliée par un canal de lumière ---------- */
.two-way { gap: 0; position: relative; }
.way { border-radius: 0; background: none; border: 0; border-top: 1px solid rgba(255, 255, 255, .12); padding: clamp(1.75rem, 3.5vw, 3rem) clamp(1.25rem, 3vw, 3rem) clamp(1.75rem, 3.5vw, 3rem) 0; overflow: visible; }
.way + .way { padding-left: clamp(1.25rem, 3vw, 3rem); border-left: 1px solid rgba(255, 255, 255, .12); }
.way::before { opacity: .18; right: auto; left: -120px; top: -160px; }
.way h3 { --fs: clamp(1.45rem, 2.3vw, 2.1rem); }
.route { font-size: .8125rem; letter-spacing: .02em; text-transform: none; font-weight: 600; }
.chips a { font-size: .9rem; font-weight: 600; }
@media (max-width: 900px) {
  .way + .way { padding-left: 0; border-left: 0; }
}

/* ---------- Services : une table à filets, les planètes conservées ---------- */
.svc-grid:not(.offer-grid):not(.pil-grid) { gap: 0; border-top: 1px solid rgba(255, 255, 255, .1); border-left: 1px solid rgba(255, 255, 255, .1); }
.svc-grid:not(.offer-grid):not(.pil-grid) > .svc-tile {
  border-radius: 0;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  background: none;
  overflow: hidden;
}
.svc-grid:not(.offer-grid):not(.pil-grid) > .svc-tile::after { border-radius: 0; }
.svc-grid > .svc-tile:hover { transform: none; }
.svc-grid:not(.offer-grid):not(.pil-grid) > .svc-tile::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 60% at 20% 0%, rgba(169, 79, 196, .2), transparent 70%);
  opacity: 0;
  transition: opacity .6s var(--ease-aube);
  pointer-events: none;
}
.svc-grid > .svc-tile:hover::before { opacity: 1; }
.svc-tile .pl-wrap { transition: transform .8s var(--ease-aube); }
.svc-tile:hover .pl-wrap { transform: scale(1.12) rotate(-10deg); }
.svc-tile h3 { --fs: clamp(1.15rem, 1.45vw, 1.38rem); }
.badge-free { font: 700 .72rem/1 var(--body); letter-spacing: .01em; text-transform: none; }

/* ---------- Contenus, traduction et stratégie : deux volets ---------- */
.pil-grid > .svc-tile { border-radius: 20px; background: radial-gradient(120% 90% at 100% 0%, rgba(169, 79, 196, .16), transparent 55%), rgba(255, 255, 255, .025); border-color: rgba(255, 255, 255, .1); }
.tile-langs { letter-spacing: .06em; font-weight: 600; }

/* ---------- Bandeau test ---------- */
.rd-band-in { border-radius: 24px; }
.rd-band-txt h2 .ln.o { font-weight: 500; }

/* ---------- Vidéo « Même besoin, autres mots » ---------- */
.vid-player { border-radius: 18px; }

/* ==========================================================================
   LE JOUR — zones de lecture et de preuve (classes posées par aube.js)
   .aube-jour  : section de jour (papier, encre nuit)
   .aube-ilot  : bloc conçu pour la nuit au milieu du jour → écran de nuit posé sur la page
   .aube-lever : lever du soleil (inséré avant la première section de jour)
   .aube-coucher : la nuit retombe (inséré après la dernière section de jour)
   Sans JavaScript, tout le site reste en nuit : aucun état intermédiaire illisible.
   ========================================================================== */
main.aube-zones { position: relative; isolation: isolate; }
main.aube-zones::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: var(--j1, 0);
  height: calc(var(--j2, 0px) - var(--j1, 0px));
  /* la lumière du matin sous l'horizon, le soir qui violit avant la tombée de la nuit */
  background:
    radial-gradient(70% 460px at 50% 0, rgba(250, 192, 216, .4), transparent 72%),
    radial-gradient(36% 340px at 12% 0, rgba(232, 87, 122, .07), transparent 72%),
    radial-gradient(64% 380px at 50% 100%, rgba(169, 79, 196, .09), transparent 72%),
    radial-gradient(640px 470px at 95% 34%, rgba(255, 204, 228, .55), transparent 70%) 0 0 / 100% 2600px repeat-y,
    radial-gradient(700px 520px at 3% 74%, rgba(204, 219, 255, .6), transparent 70%) 0 0 / 100% 2600px repeat-y,
    radial-gradient(520px 380px at 60% 96%, rgba(214, 204, 255, .5), transparent 70%) 0 0 / 100% 2600px repeat-y,
    var(--papier);
  z-index: -1;
  pointer-events: none;
}
.aube-jour {
  --ink: #120e2e;
  --ink-2: #2a2550;
  --muted: #5b5680;
  --dim: #615c86;
  --line: rgba(18, 14, 46, .12);
  --line-2: rgba(18, 14, 46, .22);
  --card: #ffffff;
  --card-2: #faf9ff;
  --bg: #f4f2ff;
  --bg-2: #ffffff;
  --grad: linear-gradient(90deg, #a8650a, #c3335a 30%, #8b2fa8 55%, #4f3fd8 78%, #13789a);
  --grad-soft: linear-gradient(135deg, rgba(139, 47, 168, .07), rgba(19, 120, 154, .05));
  --sun: #8f5306;
  --rose: #c3335a;
  --orchid: #8b2fa8;
  --iris: #4f3fd8;
  --lagoon: #13789a;
  color: var(--ink);
}
.aube-lever + .aube-jour.wrap, .aube-lever + .wrap.aube-jour { padding-top: clamp(2.5rem, 5vw, 4.5rem); }
/* Portes France : le même jour, aux couleurs royales (bleu, violet, rouge) */
.theme-fr .aube-jour {
  --grad: linear-gradient(90deg, #2448c8, #4b3fd0 26%, #6a3bc0 50%, #a8306c 76%, #c8243a);
  --grad-soft: linear-gradient(135deg, rgba(36, 72, 200, .07), rgba(200, 36, 58, .04));
  --sun: #b42a3c;
  --rose: #c8243a;
  --orchid: #5a4bb8;
  --iris: #2448c8;
  --lagoon: #2a5bd7;
}

/* ---------- Le lever du soleil : un grand soleil rouge orangé monte derrière l'horizon ---------- */
.aube-lever {
  --ciel: clamp(10rem, 27vw, 23rem);
  --sol: min(30vw, 390px);
  --R: 230vw;
  --s: 5.5vw;
  position: relative;
  display: block;
  height: var(--ciel);
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% calc(100% - var(--s) + var(--R)), transparent calc(var(--R) - 2px), rgba(255, 236, 214, .95) calc(var(--R) + .5px), rgba(255, 138, 76, .55) calc(var(--R) + 6px), rgba(242, 73, 58, .3) calc(var(--R) + 24px), rgba(169, 79, 196, .14) calc(var(--R) + 70px), transparent calc(var(--R) + 160px)),
    radial-gradient(52% 78% at 50% 100%, rgba(242, 73, 58, calc(var(--rise, 1) * .26)), rgba(169, 79, 196, calc(var(--rise, 1) * .1)) 55%, transparent 78%),
    linear-gradient(180deg, transparent 0, rgba(109, 95, 240, .05) 40%, rgba(242, 90, 70, .12) 100%);
}
.aube-lever.aube-grand { --ciel: clamp(13rem, 40vw, 36rem); --sol: min(40vw, 540px); }
.aube-lever { -webkit-mask: linear-gradient(180deg, transparent, #000 16%); mask: linear-gradient(180deg, transparent, #000 16%); }
.aube-lever .aube-rayons { display: none; }
@keyframes aube-tourne { to { rotate: 360deg; } }
.aube-lever .aube-soleil {
  position: absolute;
  left: 50%; bottom: calc(var(--s) - var(--sol) / 2);
  width: var(--sol); height: var(--sol);
  translate: -50% 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 62%, rgba(110, 8, 36, .26) 100%),
    radial-gradient(circle at 48% 22%, rgba(255, 214, 160, .34), rgba(255, 214, 160, 0) 46%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cfilter id='m' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.022' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .6  0 0 0 0 .1  0 0 0 0 .1  .8 0 0 0 -.36'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23m)'/%3E%3C/svg%3E") center / cover,
    linear-gradient(180deg, #ff9442 0%, #ff6236 30%, #ef4039 62%, #d22f50 100%);
  transform: translateY(calc((.5 - var(--rise, 1) * .74) * var(--sol)));
}
/* halo : dégradés (pas d'ombre portée, plus douce et sans coutures) */
.aube-lever .aube-soleil::before {
  content: "";
  position: absolute; inset: -34%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 128, 64, .5) 52%, rgba(244, 76, 57, .22) 66%, rgba(232, 87, 122, .08) 82%, transparent);
  z-index: -1;
}
/* grain photographique */
.aube-lever .aube-soleil::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .9  0 0 0 0 .8  0 0 0 .9 -.32'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  opacity: .55;
}
.aube-lever .aube-masque {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% calc(100% - var(--s) + var(--R)), var(--papier) calc(var(--R) - .5px), transparent calc(var(--R) + .5px));
}
.aube-lever .aube-flare {
  position: absolute;
  left: 50%; bottom: var(--s);
  width: calc(var(--sol) * 1.25); height: 2px;
  translate: -50% 50%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 196, 150, .22) 25%, rgba(255, 246, 232, .8) 50%, rgba(255, 196, 150, .22) 75%, transparent);
  filter: blur(.8px);
  opacity: calc(var(--rise, 1) * .7);
  transform: scaleX(calc(.25 + var(--rise, 1) * .75));
}

/* ---------- La nuit retombe ---------- */
.aube-coucher {
  --R: 230vw;
  --s: 5.5vw;
  display: block;
  height: clamp(5rem, 12vw, 10rem);
  pointer-events: none;
  background:
    radial-gradient(circle at 50% calc(var(--s) - var(--R)), var(--papier) calc(var(--R) - .5px), transparent calc(var(--R) + .5px)),
    radial-gradient(circle at 50% calc(var(--s) - var(--R)), transparent calc(var(--R) - 2px), rgba(226, 214, 255, .9) calc(var(--R) + .5px), rgba(169, 79, 196, .42) calc(var(--R) + 7px), rgba(109, 95, 240, .24) calc(var(--R) + 28px), rgba(95, 211, 238, .1) calc(var(--R) + 80px), transparent calc(var(--R) + 180px));
}
.talk { border-top: 0; }

/* Les étoiles s'effacent quand le jour occupe l'écran ; les étoiles filantes se taisent */
.sky-stars { opacity: calc(1 - var(--jour, 0)); }
.sky { transition: opacity .6s ease; }
.aube-ciel-jour .sky { opacity: 0; }

/* ---------- Écrans de nuit posés sur le jour ---------- */
.aube-ilot, .aube-jour .aube-ecran {
  --ink: #f4f2ff;
  --ink-2: #d9d5f2;
  --muted: #a7a2c8;
  --dim: #817da6;
  --line: rgba(255, 255, 255, .1);
  --line-2: rgba(255, 255, 255, .2);
  --card: #110c2b;
  --card-2: #17113a;
  --bg: #07051a;
  --bg-2: #0c0923;
  --grad: linear-gradient(90deg, #f6c35b, #e8577a 30%, #a94fc4 55%, #6d5ff0 78%, #5fd3ee);
  --sun: #f6c35b;
  --rose: #e8577a;
  --orchid: #a94fc4;
  --iris: #6d5ff0;
  --lagoon: #5fd3ee;
  color: var(--ink);
}
.aube-ilot { position: relative; isolation: isolate; }
.aube-ilot::before {
  content: "";
  position: absolute;
  inset: clamp(.75rem, 2vw, 2rem) max(calc(var(--gutter) - 1.25rem), calc((100% - 1360px) / 2 - 2.5rem));
  border-radius: clamp(20px, 3vw, 36px);
  background: radial-gradient(70% 60% at 85% 0%, rgba(109, 95, 240, .2), transparent 70%), radial-gradient(50% 50% at 0% 100%, rgba(232, 87, 122, .1), transparent 70%), #0a0722;
  box-shadow: 0 50px 90px -60px rgba(18, 14, 46, .7);
  z-index: -1;
  pointer-events: none;
}
.aube-jour .aube-ecran { background-color: #0d0a26; border-radius: 18px; }
/* un conteneur .wrap n'a pas de marge intérieure : l'écran de nuit déborde légèrement autour du contenu */
.wrap.aube-ilot::before { inset: calc(-1 * clamp(1.25rem, 2.6vw, 2.5rem)) calc(-1 * clamp(.9rem, 2.2vw, 2rem)); }

/* ==========================================================================
   COMPOSANTS EN PLEIN JOUR
   ========================================================================== */
.aube-jour .btn::before { background: var(--ink); }
.aube-jour .btn:not(.btn-main) { border-color: var(--line-2); color: var(--ink); }
.aube-jour .btn:not(.btn-main):hover { color: var(--papier); border-color: var(--ink); }
.aube-jour .label, .aube-jour .eyebrow { color: var(--muted); }
.aube-jour .eyebrow::before { background: var(--grad); }
.aube-jour h1 .ln.g { background: var(--grad); -webkit-background-clip: text; background-clip: text; }
.aube-jour .link { color: var(--ink); }
.aube-jour .arrow { border-color: var(--line-2); color: var(--ink); }
.aube-jour .tags span { color: var(--ink-2); border-color: var(--line-2); }
.aube-jour ::selection { background: #c3335a; color: #fff; }

/* Chiffres clés */
.aube-jour .stats, .aube-jour .stat { border-color: var(--line); }
.stat strong {
  font-family: var(--body);
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: -.035em;
  font-size: clamp(2.8rem, 5.6vw, 5.2rem);
  width: fit-content;
  padding-bottom: .06em;
}
.stat span { font-size: .98rem; }

/* Projets : le résultat en grand */
.work-list { border-color: var(--line); }
.work-row { grid-template-columns: 3rem minmax(0, 1.1fr) minmax(0, 1.25fr) auto; border-color: var(--line); isolation: isolate; }
.work-row h3 { --fs: clamp(1.35rem, 2.3vw, 2.15rem); font-stretch: 112%; font-weight: 720; }
a.work-row:hover h3 { color: var(--ink); -webkit-text-stroke: 0; }
.work-row .idx { color: var(--dim); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.work-row .meta { justify-items: start; text-align: left; gap: .45rem; }
.work-row .meta .label { color: var(--muted); font-size: .875rem; }
.work-row .meta b {
  font-family: var(--body);
  font-stretch: 116%;
  font-weight: 760;
  font-size: clamp(1.1rem, 1.7vw, 1.55rem);
  letter-spacing: -.02em;
  text-transform: none;
  line-height: 1.15;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  width: fit-content;
}
a.work-row::before {
  content: "";
  position: absolute;
  inset: 0 -1.25rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  opacity: 0;
  transition: opacity .4s;
  z-index: -1;
}
.aube-jour a.work-row::before { background: linear-gradient(90deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .55)); }
a.work-row:hover::before { opacity: 1; }
a.work-row:hover .arrow, .svc-tile:hover .arrow { background: var(--aurore-chaude); color: #120e2e; border-color: transparent; }
@media (max-width: 768px) {
  .work-row { grid-template-columns: minmax(0, 1fr) auto; }
  a.work-row::before { inset: 0 -.75rem; }
}

/* Méthode : une frise qui se remplit */
.steps::after { height: 2px; top: -.5px; }
.steps li > span {
  font-family: var(--body);
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(2rem, 3vw, 2.8rem);
  -webkit-text-stroke: 0;
  color: rgba(255, 255, 255, .16);
  transition: color .8s var(--ease-aube);
  letter-spacing: -.03em;
}
.aube-jour .steps li > span { color: rgba(18, 14, 46, .14); }
.steps li.on > span { color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; width: fit-content; }
.aube-jour .steps li::before { background: var(--papier) !important; border: 1px solid var(--line-2) !important; box-shadow: none !important; }
.steps li.on::before { background: #e8577a !important; border-color: #e8577a !important; box-shadow: 0 0 0 5px rgba(232, 87, 122, .16) !important; }
.steps h3 { --fs: clamp(1.05rem, 1.25vw, 1.2rem); }

/* Témoignages : la scène de l'astronaute dans le ciel du jour */
.aube-jour .astro-sticky { background: radial-gradient(60% 70% at 26% 58%, rgba(250, 196, 222, .5), transparent 70%), radial-gradient(50% 60% at 80% 30%, rgba(169, 79, 196, .1), transparent 70%); }
.aube-jour .astro-svg { filter: drop-shadow(0 18px 26px rgba(18, 14, 46, .22)); }
.astro-bubble { background: #fff; box-shadow: 0 30px 70px -34px rgba(18, 14, 46, .45), 0 0 0 2px var(--a); }
.astro-bubble::before { background: #fff; }
.astro-text { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.3; color: #120e2e; }
.astro-stars { color: #9a5c08; }
.aube-jour .astro-dots li { color: var(--muted); }
.aube-jour .astro-dots li.on { color: var(--ink); }

/* Votre interlocuteur : même en plein jour, l'encart reste un écran de nuit, entouré d'une aurore qui tourne */
.me-card { border-radius: 24px; }
.aube-jour .me-card {
  --ink: #f4f2ff;
  --ink-2: #d9d5f2;
  --muted: #a7a2c8;
  --dim: #817da6;
  --line: rgba(255, 255, 255, .1);
  --line-2: rgba(255, 255, 255, .2);
  --card: #110c2b;
  --card-2: #17113a;
  --bg: #07051a;
  --bg-2: #0c0923;
  --grad: linear-gradient(90deg, #f6c35b, #e8577a 30%, #a94fc4 55%, #6d5ff0 78%, #5fd3ee);
  --sun: #f6c35b;
  --rose: #e8577a;
  --orchid: #a94fc4;
  --iris: #6d5ff0;
  --lagoon: #5fd3ee;
  color: var(--ink);
  border: 1.5px solid transparent;
  background:
    radial-gradient(80% 90% at 100% 0%, rgba(109, 95, 240, .26), transparent 65%) padding-box,
    radial-gradient(circle at 95% 92%, rgba(232, 87, 122, .16), transparent 55%) padding-box,
    radial-gradient(circle at 12% 30%, rgba(169, 79, 196, .2), transparent 55%) padding-box,
    linear-gradient(160deg, #17113a, #0b0824 72%) padding-box,
    conic-gradient(from var(--aube-tour, 0deg), var(--tour-couleurs, #f6c35b, #e8577a, #a94fc4, #6d5ff0, #5fd3ee, #f6c35b)) border-box;
  box-shadow: 0 50px 90px -56px rgba(18, 14, 46, .8), 0 0 80px -34px rgba(169, 79, 196, .45);
  animation: aube-tour 10s linear infinite;
  animation-play-state: paused;
}
.aube-jour .me-card.aube-vu { animation-play-state: running; }
.theme-fr .aube-jour .me-card {
  --card: #0a1536;
  --card-2: #0e1c46;
  --bg: #040a1f;
  --bg-2: #07102f;
  --grad: linear-gradient(90deg, #7d9bff, #6a63f5 26%, #8452e6 50%, #c43f86 76%, #ef4d5f);
  --sun: #ff6b78;
  --rose: #ef3b4d;
  --orchid: #dfe6ff;
  --iris: #2f63ff;
  --lagoon: #7fa8ff;
  --tour-couleurs: #7d9bff, #6a63f5, #8452e6, #c43f86, #ef4d5f, #7d9bff;
  background:
    radial-gradient(80% 90% at 100% 0%, rgba(47, 99, 255, .26), transparent 65%) padding-box,
    radial-gradient(circle at 95% 92%, rgba(239, 77, 95, .14), transparent 55%) padding-box,
    radial-gradient(circle at 12% 30%, rgba(132, 82, 230, .2), transparent 55%) padding-box,
    linear-gradient(160deg, #0e1c46, #050c26 72%) padding-box,
    conic-gradient(from var(--aube-tour, 0deg), var(--tour-couleurs)) border-box;
}
@property --aube-tour { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes aube-tour { to { --aube-tour: 360deg; } }
.aube-jour .me-txt .me-role { color: var(--sun); }
.me-cta .btn { font-size: .9375rem; letter-spacing: -.004em; }
.aube-jour .me-txt p { color: var(--ink-2); }
/* bouton secondaire au survol : le remplissage clair garde un texte foncé, comme la nuit */
.aube-jour .me-card .btn:not(.btn-main):hover { color: #0b0720; }

/* Questions */
.faq summary { font-weight: 640; font-size: clamp(1.04rem, 1.3vw, 1.16rem); }
.aube-jour .faq summary:hover { color: var(--ink); }
.faq summary::after { width: 38px; height: 38px; }
.faq details[open] summary::after { border-color: #e8577a; }
.faq-more { border-top-style: solid; }
.aube-jour .faq .ans { color: var(--ink-2); }

/* Guides */
.post { border-radius: 18px; }
.aube-jour .post { background: #fff; border-color: var(--line); box-shadow: 0 30px 60px -48px rgba(18, 14, 46, .45); }
.aube-jour .post:hover { border-color: var(--line-2); }
.post time { letter-spacing: .02em; text-transform: none; font-weight: 600; }
.aube-jour .post time { color: var(--sun); }
.aube-jour .post h3 { color: var(--ink); }
.swipe-hint { letter-spacing: .02em; text-transform: none; }

/* Passeport d'accents */
.aube-jour .pa-tease-cover { box-shadow: 0 40px 70px -30px rgba(18, 14, 46, .55), inset 8px 0 0 rgba(0, 0, 0, .28), 0 0 90px -30px rgba(169, 79, 196, .45); }
.aube-jour .pa-tease-note { color: var(--muted); }

/* ---------- Le texte courant en plein jour : liens, mises en valeur, sommaire ---------- */
.aube-jour .prose p a, .aube-jour .prose li a, .aube-jour .prose td a, .aube-jour .timeline li a { color: var(--ink); text-decoration-color: var(--rose); }
.aube-jour .prose p a:hover, .aube-jour .prose li a:hover, .aube-jour .timeline li a:hover { text-decoration-color: var(--sun); }
.aube-jour .prose strong, .aube-jour .ax-errors strong, .aube-jour .ax-ways strong { color: var(--ink); }
.aube-jour .aside a:not(.btn):hover, .aube-jour .aside a[aria-current], .aube-jour .toc a:hover, .aube-jour .contact-card a { color: var(--ink); }
main .aube-jour .dt-cols .checklist li.lit { color: var(--ink); }
.aube-jour .fx-ex a { color: #0b6e5c; }
.aube-jour .prose code { background: rgba(18, 14, 46, .07); }
.aube-jour .ax-ways em { color: var(--sun); }
.aube-jour .ax-table td.ok { color: #0b7a52; }
.aube-jour .ax-table td.mid { color: #8f5306; }
.aube-jour .ax-table td.ko { color: #b42346; }
.aube-jour .ax-errors li { background: #fff; }

/* Fil de lecture des pages éditoriales */
.aube-jour .px-flow::before { background: linear-gradient(180deg, rgba(18, 14, 46, .16), rgba(18, 14, 46, .04)); }
.aube-jour .px-node { background: #fff; }
.aube-jour .px-flow blockquote { background: radial-gradient(120% 140% at 0 0, rgba(169, 79, 196, .1), transparent 60%), #fff; }
.aube-jour .prose .px-cards > li { background: #fff; border-color: var(--line); box-shadow: 0 26px 50px -42px rgba(18, 14, 46, .45); }
/* jamais une carte seule sur sa ligne : la dernière d'un nombre impair prend toute la largeur */
@media (min-width: 761px) {
  .px-cards > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* À propos : onglets d'expertise, chiffres */
.aube-jour .ab-tablist button[aria-selected="true"] { color: var(--ink); border-color: var(--rose); background: linear-gradient(120deg, rgba(232, 87, 122, .1), rgba(169, 79, 196, .12)), #fff; }
.aube-jour .ab-tablist button, .aube-jour .ab-stats li { background-color: #fff; }

/* Laboratoire « traduction ou texte écrit pour Google » */
.aube-jour .li-sw { background: #fff; }
.aube-jour .li-sw[aria-pressed=false] .li-o:first-child, .aube-jour .li-sw[aria-pressed=true] .li-o:last-child { color: var(--ink); }
.aube-jour .li-knob { background: rgba(18, 14, 46, .16); }
.aube-jour .li-knob::after { box-shadow: 0 1px 4px rgba(18, 14, 46, .35); }
.aube-jour .li-mock { box-shadow: 0 34px 70px -40px rgba(18, 14, 46, .55); }
.aube-jour .li-notes li { opacity: .66; background: #fff; }
.aube-jour .li.loc .li-notes li { opacity: 1; }

/* Démonstration LinkedIn : en plein jour, le post redevient une carte blanche comme sur LinkedIn */
.aube-jour .lk-head b { color: var(--ink); }
.aube-jour .lk-langs button { background: #fff; }
.aube-jour .lk-langs button[aria-pressed=true] { color: var(--ink); border-color: var(--rose); background: linear-gradient(120deg, rgba(232, 87, 122, .12), rgba(169, 79, 196, .1)), #fff; }
.aube-jour .lk-card { box-shadow: 0 44px 90px -50px rgba(18, 14, 46, .55), 0 0 60px rgba(169, 79, 196, .12); }

/* Calendrier éditorial : les couleurs de format foncent pour rester lisibles sur le papier */
.aube-jour .cal-c { background: #fff; }
.aube-jour .cal-c.f-post { --c: #0e6f9a; }
.aube-jour .cal-c.f-vis { --c: #b4234a; }
.aube-jour .cal-c.f-vid { --c: #6a2fc0; }
.aube-jour .cal-c[aria-selected="true"] { background: linear-gradient(135deg, rgba(232, 87, 122, .1), rgba(255, 255, 255, 0)), #fff; box-shadow: 0 20px 40px -32px rgba(18, 14, 46, .5); }

/* Sélecteurs de langue, d'onglet et de chapitre : l'état actif reste lisible en plein jour */
.aube-jour :is(.adl-langs button, .bro-langs button, .toc-list button, .mx-tabs button, .bro-ctl button) { background-color: #fff; }
.aube-jour :is(.adl-langs button[aria-selected="true"], .bro-langs button[aria-pressed="true"], .toc-list button[aria-selected="true"], .mx-tabs button[aria-selected=true]) {
  color: var(--ink);
  border-color: var(--rose);
  background: linear-gradient(90deg, rgba(232, 87, 122, .1), rgba(169, 79, 196, .08)), #fff;
}
.aube-jour .road-tabs button[aria-selected="true"] { color: var(--ink); }

/* Laboratoires de traduction : phrases sources et résultats à l'encre */
.aube-jour .tl-src { background: #fff; }
.aube-jour .tl-src p, .aube-jour .tl-out p { color: var(--ink); }
.aube-jour .tl-out.good p { color: transparent; }
.aube-jour .tl-out.bad .tl-badge { color: #b4234a; background: rgba(195, 51, 90, .1); }
.aube-jour .tl-out.good .tl-badge { background: rgba(143, 83, 6, .1); }
.aube-jour .tl-seg { background: #fff; }
.aube-jour .tl-links a { background: #fff; }
.aube-jour .adl-bad { color: #b4234a; }
.aube-jour .adl-good { color: var(--ink); }
.aube-jour .adl-bad s { text-decoration-color: rgba(180, 35, 74, .6); }

/* Exemples d'annonces Google Ads (portes France) */
.aube-jour .mx-facts dd { color: var(--ink); }
/* Sources des guides pays */
.aube-jour .sf-src, .aube-jour .sf-src a { color: var(--muted); }

/* Voix off : les cartes d'écoute restent des écrans de nuit, la bande démo garde son étiquette lisible */
.aube-jour .vr-card:not(.vr-reel) {
  --bg-2: #0c0923;
  --card: #110c2b;
  --ink: #f4f2ff;
  --ink-2: #d9d5f2;
  --muted: #a7a2c8;
  --line-2: rgba(255, 255, 255, .2);
  --sun: #f6c35b;
  --grad: linear-gradient(90deg, #f6c35b, #e8577a 30%, #a94fc4 55%, #6d5ff0 78%, #5fd3ee);
}
.aube-jour .vr-reel .vr-mp3 { color: #fff; background: rgba(18, 14, 46, .86); }

/* Pastilles à texte foncé posé sur le dégradé : en plein jour, une aurore plus claire (le dégradé profond du jour les rendrait illisibles) */
body.theme-fr { --pastille: linear-gradient(90deg, #7d9bff, #6a63f5 26%, #8452e6 50%, #c43f86 76%, #ef4d5f); }
.aube-jour { --pastille: linear-gradient(90deg, #f8cf75, #ee7a96 30%, #bd73d4 55%, #8a7ff4 78%, #82dff2); }
.theme-fr .aube-jour { --pastille: linear-gradient(90deg, #9fb5ff, #8c86f8 26%, #a17aee 50%, #d771a6 76%, #f5808e); }
.aube-jour :is(.px-cards .px-i, .px-flow > section.on > .px-node, .fx-ok, .tl-seg button[aria-pressed=true], .filters button[aria-pressed=true],
  .cf-steps span.on b, .cf-steps span.ok b, .cf-recap-list span, .pj-intro.on .pj-path span, .vr-reel .vr-reel-ic) { background: var(--pastille, var(--aurore)); }
.aube-jour :is(.li-notes li, .cf-more summary)::before { background: var(--pastille, var(--aurore)); }
main .aube-jour .dt-cols .checklist li.lit::before { background: var(--pastille, var(--aurore)) !important; }

/* Maquettes (audit, rédaction, annonces) : ce sont des écrans, elles gardent les couleurs de la nuit */
.aube-jour .mk {
  --bg-2: #0c0923;
  --card: #110c2b;
  --ink: #f4f2ff;
  --ink-2: #d9d5f2;
  --muted: #a7a2c8;
  --line: rgba(255, 255, 255, .1);
  --line-2: rgba(255, 255, 255, .2);
  --sun: #f6c35b;
  --grad: linear-gradient(90deg, #f6c35b, #e8577a 30%, #a94fc4 55%, #6d5ff0 78%, #5fd3ee);
}
.aube-jour .mk-card { box-shadow: 0 50px 90px -46px rgba(18, 14, 46, .7), 0 0 60px -30px rgba(232, 87, 122, .45); }
/* À propos : la pastille de langues posée sur la photo reste une pastille de nuit */
.aube-jour .p-chip { color: #f4f2ff; }

/* Formulaires en plein jour : champs blancs, cadres et cases visibles, puces de besoin lisibles */
.aube-jour .form :is(input, select, textarea):hover { border-color: rgba(18, 14, 46, .42); }
.aube-jour .form :is(input, select, textarea):focus { box-shadow: 0 0 0 4px rgba(19, 120, 154, .16); }
.aube-jour .form ::placeholder { color: #6e6992; opacity: 1; }
.aube-jour .af-chip span { color: var(--ink-2); background: #fff; border-color: var(--line-2); }
.aube-jour .af-chip:hover span { color: var(--ink); border-color: rgba(168, 101, 10, .6); }
.aube-jour .af-chip input:checked + span { color: #0b0720; background: var(--pastille, var(--aurore)); }
.aube-jour .cf-card-in { border-color: var(--line); }
.aube-jour .cf-card:hover .cf-card-in { border-color: var(--line-2); }
.aube-jour .cf-card img { filter: drop-shadow(0 8px 14px rgba(18, 14, 46, .28)); }
.aube-jour .cf-tick { border-color: rgba(18, 14, 46, .32); }
.aube-jour .cf-bar, .aube-jour .toc-bar { background: rgba(18, 14, 46, .08); }
.aube-jour .cf-recap { border-color: var(--line); background: #fff; }

/* Cartes et listes dessinées en verre pour la nuit : en plein jour elles deviennent des cartes blanches */
.aube-jour :is(.vo-uses li, .out-list li, .kf li, .mx-facts div, .sd-related a, .pj-card, .sd-out li) { background-color: #fff; }
.aube-jour :is(a.pj-card:hover, a.pj-card:focus-visible) { border-color: var(--line-2); box-shadow: 0 30px 70px -36px rgba(79, 63, 216, .45); }
.aube-jour .sd-out .sat { border-color: rgba(18, 14, 46, .25); }
.aube-jour .vo-eq i { background: rgba(18, 14, 46, .07); }
.aube-jour .ad-card { box-shadow: 0 30px 60px -34px rgba(18, 14, 46, .45), 0 0 0 1px rgba(18, 14, 46, .06); }
.theme-fr .aube-jour :is(.eyebrow, .label)::before { background: var(--grad); }
/* Vidéo intégrée à la lecture : la légende reste claire sur l'écran du lecteur */
.aube-jour .vid-player { --ink: #f4f2ff; --ink-2: #d9d5f2; --muted: #a7a2c8; color: var(--ink); }

/* États au survol et au focus, dessinés en blanc pour la nuit */
.aube-jour .astro-dots li:hover { color: var(--ink); }
main .aube-jour form :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]), textarea, select):focus { background: #fff; border-color: rgba(168, 101, 10, .7); }
.aube-jour .vo-ic { background: radial-gradient(circle at 30% 25%, #4fb8d8, #6d5ff0 55%, #8b3fb0); box-shadow: 0 12px 26px -12px rgba(79, 63, 216, .55); }
/* Tableaux des articles sur mobile : la première colonne était écrite en blanc */
.aube-jour .prose .ax-table td:first-child { color: var(--ink); }
/* Fenêtres (vidéo YouTube) ouvertes depuis une section de jour : elles restent en nuit */
.aube-jour dialog { --ink: #f4f2ff; --ink-2: #d9d5f2; --muted: #a7a2c8; --line: rgba(255, 255, 255, .1); --line-2: rgba(255, 255, 255, .2); }

/* Ombres : en plein jour elles prennent la teinte de l'encre, plus de halo noir sur le papier */
.aube-jour .dt-cols .out-list li { box-shadow: 0 18px 32px -24px rgba(18, 14, 46, .32); }
.aube-jour .ship-svg { filter: drop-shadow(0 22px 30px rgba(18, 14, 46, .22)); }
.aube-jour .bro-face { box-shadow: 0 22px 50px -24px rgba(18, 14, 46, .45); }

/* Questions des articles : même dessin que la FAQ des pages */
.prose.article > section > details { position: relative; border-bottom: 1px solid var(--line); }
.prose.article > section > details:first-of-type { border-top: 1px solid var(--line); }
.prose.article > section > details > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
  padding: 1.15rem 0;
  font-weight: 640;
  font-size: clamp(1.02rem, 1.25vw, 1.12rem);
  transition: color .25s ease, translate .25s ease;
}
.prose.article > section > details > summary::-webkit-details-marker { display: none; }
.prose.article > section > details > summary::after {
  content: "";
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: linear-gradient(currentColor, currentColor) center/12px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center/1.5px 12px no-repeat;
  transition: border-color .4s;
}
.prose.article > section > details[open] > summary::after { background: linear-gradient(currentColor, currentColor) center/12px 1.5px no-repeat; border-color: #e8577a; }
.prose.article > section > details > summary:hover { translate: 4px 0; }
.prose.article > section > details > p { margin: 0 0 1.25rem; padding-right: 3rem; color: var(--ink-2); }
.prose.article > section > details::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.prose.article > section > details[open]::after { transform: scaleX(1); }
@media (max-width: 480px) { .prose.article > section > details > p { padding-right: 0; } }

/* ---------- Écrans de nuit dans la lecture : schémas, code, générateurs et calculateurs ---------- */
.aube-jour :is(.ax-fig, .hg, .hof, .lm, .pc, .hgx, .jr-globe, .ga-tool) {
  --ink: #f4f2ff;
  --ink-2: #d9d5f2;
  --muted: #a7a2c8;
  --dim: #817da6;
  --line: rgba(255, 255, 255, .1);
  --line-2: rgba(255, 255, 255, .2);
  --card: #110c2b;
  --card-2: #17113a;
  --bg: #07051a;
  --bg-2: #0c0923;
  --grad: linear-gradient(90deg, #f6c35b, #e8577a 30%, #a94fc4 55%, #6d5ff0 78%, #5fd3ee);
  --sun: #f6c35b;
  --rose: #e8577a;
  --orchid: #a94fc4;
  --iris: #6d5ff0;
  --lagoon: #5fd3ee;
  color: var(--ink);
  background: radial-gradient(80% 60% at 100% 0%, rgba(109, 95, 240, .24), transparent 70%), radial-gradient(60% 55% at 0% 100%, rgba(232, 87, 122, .12), transparent 70%), #0d0a26;
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 44px 80px -54px rgba(18, 14, 46, .75);
}
.aube-jour .ax-fig .ax-code { background: rgba(0, 0, 0, .35); }
/* Portes France : les écrans de nuit gardent la palette royale */
.theme-fr .aube-ilot, .theme-fr .aube-jour .aube-ecran, .theme-fr .aube-jour :is(.ax-fig, .hg, .hof, .lm, .pc, .hgx, .jr-globe, .ga-tool) {
  --card: #0a1536;
  --card-2: #0e1c46;
  --bg: #040a1f;
  --bg-2: #07102f;
  --grad: linear-gradient(90deg, #7d9bff, #6a63f5 26%, #8452e6 50%, #c43f86 76%, #ef4d5f);
  --sun: #ff6b78;
  --rose: #ef3b4d;
  --orchid: #dfe6ff;
  --iris: #2f63ff;
  --lagoon: #7fa8ff;
}
.theme-fr .aube-ilot::before { background: radial-gradient(70% 60% at 85% 0%, rgba(47, 99, 255, .24), transparent 70%), radial-gradient(50% 50% at 0% 100%, rgba(239, 59, 77, .1), transparent 70%), #050c26; }
.theme-fr .aube-jour :is(.ax-fig, .hg, .hof, .lm, .pc, .hgx, .jr-globe, .ga-tool) { background: radial-gradient(80% 60% at 100% 0%, rgba(47, 99, 255, .26), transparent 70%), radial-gradient(60% 55% at 0% 100%, rgba(239, 59, 77, .1), transparent 70%), #050c26; }

/* ==========================================================================
   LE JOUR EN COULEUR — le papier n'est jamais neutre
   ========================================================================== */

/* Titres du jour : la seconde ligne s'encre aux couleurs de l'aurore en apparaissant */
.aube-jour h2 .ln.g {
  width: fit-content;
  max-width: 100%;
  background: linear-gradient(90deg, #a8650a 0%, #c3335a 16%, #8b2fa8 32%, #4f3fd8 48%, var(--ink) 68%, var(--ink) 100%) 0 0 / 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding: .02em .04em .12em 0;
  margin: -.02em 0 -.12em;
}
.theme-fr .aube-jour h2 .ln.g { background-image: linear-gradient(90deg, #2448c8 0%, #4b3fd0 16%, #6a3bc0 32%, #a8306c 48%, var(--ink) 68%, var(--ink) 100%); }
.js .aube-jour h2.ln-mask.in .ln.g { animation: aube-encre 2.6s var(--ease-aube) .3s both; }
@keyframes aube-encre { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* Blocs blancs : un liseré d'aurore se dessine et une lumière colorée se lève quand on les parcourt
   (classe .aube-carte posée par aube.js, .aube-vu quand le bloc entre à l'écran) */
.aube-jour {
  --liseret: linear-gradient(90deg, #eeac45, #e8577a 30%, #a94fc4 60%, #6d5ff0 82%, #3fb6d9);
  --lueur-a: rgba(169, 79, 196, .13);
  --lueur-b: rgba(232, 87, 122, .14);
}
.theme-fr .aube-jour {
  --liseret: linear-gradient(90deg, #5b8bff, #6a63f5 30%, #8452e6 55%, #c43f86 78%, #ef4d5f);
  --lueur-a: rgba(91, 139, 255, .16);
  --lueur-b: rgba(239, 77, 95, .12);
}
.aube-jour .aube-carte.aube-carte.aube-carte {
  border-color: transparent;
  background:
    radial-gradient(130% 100% at 0 0, var(--lueur-a), transparent 62%) 0 0 / 0% 0% no-repeat padding-box,
    radial-gradient(130% 100% at 100% 100%, var(--lueur-b), transparent 62%) 100% 100% / 0% 0% no-repeat padding-box,
    linear-gradient(#fff, #fff) padding-box,
    var(--liseret) 0 0 / 0% 100% no-repeat border-box,
    linear-gradient(var(--line), var(--line)) border-box;
  box-shadow: 0 26px 50px -44px rgba(18, 14, 46, .4);
  transition: background-size 1.6s var(--ease-aube), box-shadow .6s var(--ease-aube), transform .6s var(--ease-aube), border-color .4s;
}
.aube-jour .aube-carte.aube-carte.aube-vu { background-size: 100% 100%, 100% 100%, auto, 100% 100%, auto; }
.aube-jour .aube-carte.aube-carte.aube-carte:hover { box-shadow: 0 34px 60px -34px rgba(232, 87, 122, .42), 0 22px 46px -32px rgba(109, 95, 240, .42); }
.aube-jour :is(.px-cards > li, .vo-uses > li, .out-list > li, .post, .sd-out li, .pj-card, .ab-stats li, .ax-errors li, .kf li).aube-carte:hover { transform: translateY(-4px); }
.aube-jour .aside.aube-carte.aube-carte.aube-carte:hover { box-shadow: 0 26px 50px -44px rgba(18, 14, 46, .4); }

/* Le curseur rond d'origine : or sur la nuit ; sur le papier du jour, son anneau passe par les couleurs de l'aurore */
.cursor { transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s, border-color .6s; }
.cursor::after { transition: background .6s; }
.cursor.sur-jour { animation: aube-curseur 7s linear infinite; }
.cursor.sur-jour::after { animation: aube-curseur-point 7s linear infinite; }
.cursor.sur-jour.hover { background: rgba(232, 87, 122, .1); }
@keyframes aube-curseur {
  0%, 100% { border-color: rgba(194, 120, 16, .9); }
  25% { border-color: rgba(215, 60, 100, .9); }
  50% { border-color: rgba(150, 60, 190, .9); }
  75% { border-color: rgba(80, 80, 225, .9); }
}
@keyframes aube-curseur-point {
  0%, 100% { background: #c27810; }
  25% { background: #d73c64; }
  50% { background: #963cbe; }
  75% { background: #5050e1; }
}

/* La lampe d'aurore : une lumière colorée suit le curseur sur le papier du jour (souris uniquement, créée par aube.js) */
.aube-lampe {
  position: fixed;
  left: 0; top: 0;
  z-index: 160;
  width: 560px; height: 560px;
  margin: -280px 0 0 -280px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 150, 190, .5) 0, rgba(214, 140, 240, .38) 24%, rgba(150, 150, 255, .24) 44%, rgba(120, 200, 255, .1) 58%, rgba(120, 200, 255, 0) 68%);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity .55s ease;
  will-change: transform, opacity;
}
.theme-fr .aube-lampe { background: radial-gradient(circle, rgba(150, 178, 255, .55) 0, rgba(196, 150, 245, .4) 24%, rgba(250, 150, 175, .26) 44%, rgba(255, 190, 200, .12) 58%, rgba(255, 190, 200, 0) 68%); }
.aube-lampe.on { opacity: 1; }

/* ==========================================================================
   LA CONVERSATION FINALE ET LE PIED DE PAGE
   ========================================================================== */
.talk h2 { --fs: clamp(3rem, 10vw, 9.5rem); }
.talk h2 .ln.o { font-weight: 440; }
.talk .serif-g { font-size: clamp(1.8rem, 3.4vw, 3.2rem); }
.site-foot h2, .foot-grid .foot-t { letter-spacing: .02em; text-transform: none; font-size: .875rem; }
.foot-word .o { color: rgba(255, 255, 255, .1); -webkit-text-stroke: 0; }
.foot-word .fitx { font-stretch: 125%; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; }
.foot-word .g { background: var(--aurore); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Plus de galaxies dans les en-têtes et la conversation finale : le ciel étoilé suffit ---------- */
.page-hero > canvas.aurora, .hero.cx > canvas.aurora, .talk > canvas.aurora { display: none !important; }
.page-hero, .sd-hero, .hero.cx { isolation: isolate; }
.page-hero::before, .sd-hero::before, .hero.cx::before {
  content: "";
  position: absolute;
  inset: -12% -8% -8%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(34% 44% at 80% 24%, rgba(109, 95, 240, .3), transparent 70%),
    radial-gradient(24% 32% at 94% 74%, rgba(232, 87, 122, .2), transparent 70%),
    radial-gradient(28% 34% at 6% 88%, rgba(246, 195, 91, .12), transparent 70%),
    radial-gradient(22% 26% at 48% 100%, rgba(95, 211, 238, .1), transparent 70%);
  animation: aube-derive 24s ease-in-out infinite alternate;
}
@keyframes aube-derive { to { transform: translate3d(-3%, 2.5%, 0) scale(1.08); } }
.theme-fr .page-hero::before, .theme-fr .sd-hero::before, .theme-fr .hero.cx::before {
  background:
    radial-gradient(34% 44% at 80% 24%, rgba(47, 99, 255, .3), transparent 70%),
    radial-gradient(24% 32% at 94% 74%, rgba(196, 63, 134, .2), transparent 70%),
    radial-gradient(28% 34% at 6% 88%, rgba(132, 82, 230, .16), transparent 70%),
    radial-gradient(22% 26% at 48% 100%, rgba(239, 77, 95, .1), transparent 70%);
}
.page-hero::after { background: linear-gradient(transparent, rgba(7, 5, 26, 0)); }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .offer-grid::after, .aube-lever .aube-rayons, .hx .hero-mission .hx-ctry,
  .page-hero::before, .sd-hero::before, .hero.cx::before,
  .aube-jour .me-card, .js .aube-jour h2.ln-mask.in .ln.g, .cursor.sur-jour, .cursor.sur-jour::after { animation: none !important; }
  .aube-jour .aube-carte.aube-carte.aube-carte { transition: none; }
  .aube-lampe { display: none; }
  .js .ln-mask .ln, .js .ln-mask.in .ln { transition: none; clip-path: none; transform: none; }
  .js .ln-mask .ln.g { font-stretch: 125%; }
}

/* ---------- Offres sur tablette et mobile : le parcours devient vertical ---------- */
@media (max-width: 900px) {
  .offer-grid { grid-template-columns: minmax(0, 1fr) !important; row-gap: clamp(2.25rem, 7vw, 3rem) !important; }
  .offer-grid .svc-tile { padding: 0 0 0 calc(88px + 1.1rem); position: relative; min-height: 88px; }
  .offer-grid .svc-tile-top { position: absolute; left: 0; top: 0; margin: 0; flex-direction: column; align-items: center; gap: .5rem; }
  .offer-grid::before { left: 44px; right: auto; top: 44px; bottom: 44px; width: 1px; height: auto; transform-origin: 50% 0; transform: scaleY(var(--trace, 1)); background: linear-gradient(180deg, rgba(246, 195, 91, .85), rgba(232, 87, 122, .7) 50%, rgba(95, 211, 238, .55)); }
  .offer-grid::after { left: 41px; top: 44px; margin: 0; animation-name: aube-parcours-v; }
  .offer-grid .svc-tile h3 { margin-top: .2rem; }
}
@keyframes aube-parcours-v {
  0% { top: 44px; opacity: 0; }
  6% { opacity: 1; }
  88% { top: calc(100% - 48px); opacity: 1; }
  100% { top: calc(100% - 48px); opacity: 0; }
}
@media (max-width: 480px) {
  .offer-grid .svc-tile { padding-left: calc(64px + 1rem); }
  .offer-grid .svc-tile .pl-wrap { width: 64px; height: 64px; }
  .offer-grid::before { left: 32px; top: 32px; }
  .offer-grid::after { left: 29px; }
}

/* ---------- Les monuments en 3D (rendus posés par aube.js à la place des dessins au trait) ---------- */
svg.mon-cache { display: none !important; }
.mon-boite { position: relative; width: 100%; pointer-events: none; }
.landmark.aube-mon { max-width: 380px; }
.sf-monuments figure.aube-mon .mon-boite { max-width: 300px; margin: 0 auto; }
.mon-boite > * { position: absolute; display: block; }
/* halo d'aurore derrière le monument, lueur chaude au pied */
.mon-boite .mon-halo {
  inset: 4% -20% -6%;
  background:
    radial-gradient(30% 50% at 50% 60%, rgba(109, 95, 240, .18), rgba(169, 79, 196, .07) 55%, transparent 80%),
    radial-gradient(42% 8% at 50% 96.5%, rgba(255, 170, 80, .34), rgba(232, 87, 122, .1) 60%, transparent 82%);
  opacity: 0; transition: opacity 1.8s ease .3s;
}
.sf-monuments .mon-boite .mon-halo { inset: 0 -6% -4%; }
.mon-boite .mon-img {
  inset: 0; background: var(--mon-src) center / 100% 100% no-repeat;
  opacity: 0; transform: translateY(16px) scale(.985);
  transition: opacity 1.3s ease, transform 1.8s cubic-bezier(.2, .8, .2, 1);
}
.mon-pret .mon-img, .mon-pret .mon-halo { opacity: 1; transform: none; }
/* reflet de lumière qui balaie la pierre et le métal (masqué par la silhouette du rendu) */
.mon-boite .mon-eclat {
  inset: 0;
  -webkit-mask: var(--mon-src) center / 100% 100% no-repeat; mask: var(--mon-src) center / 100% 100% no-repeat;
  background: linear-gradient(104deg, transparent 38%, rgba(255, 226, 196, 0) 43%, rgba(255, 244, 228, .7) 50%, rgba(214, 200, 255, 0) 57%, transparent 62%) 0 0 / 320% 100% no-repeat;
  background-position: 115% 0;
  mix-blend-mode: screen; opacity: 0;
}
.mon-pret .mon-eclat { opacity: 1; animation: mon-eclat 11s cubic-bezier(.45, .05, .3, 1) 1.1s infinite; }
.sf-monuments figure:nth-child(2) .mon-eclat { animation-delay: 2.2s; }
.sf-monuments figure:nth-child(3) .mon-eclat { animation-delay: 3.3s; }
.sf-monuments figure:nth-child(4) .mon-eclat { animation-delay: 4.4s; }
.sf-monuments figure:nth-child(5) .mon-eclat { animation-delay: 5.5s; }
.sf-monuments figure:nth-child(6) .mon-eclat { animation-delay: 6.6s; }
@keyframes mon-eclat {
  0% { background-position: 115% 0; }
  28%, 100% { background-position: -15% 0; }
}
.mon-boite .mon-scint { inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; }
@media (prefers-reduced-motion: reduce) {
  .mon-boite .mon-img, .mon-boite .mon-halo { transition: none; transform: none; }
  .mon-pret .mon-eclat { animation: none; opacity: 0; }
}

/* livrables des pages services : l'orbe de la marque, son orbite dégradée, un satellite qui en fait le tour */
.sd-out .sat { width: 56px; height: 56px; border: 0 !important; animation: none; }
.sd-out .sat::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(95, 211, 238, 0), rgba(109, 95, 240, .35) 40%, rgba(232, 87, 122, .7) 78%, rgba(246, 195, 91, .95));
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1.1px)); mask: radial-gradient(closest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1.1px));
  animation: spin 14s linear infinite;
}
.sd-out .sat::after { inset: 12px; background: url(/img/orb-128.webp) center / cover no-repeat; box-shadow: 0 8px 16px -4px rgba(40, 18, 96, .45), 0 0 18px rgba(169, 79, 196, .25); }
.sd-out .sat i { transform-origin: 5px 33px; animation: spin 14s linear infinite; z-index: 1; }

/* « Un seul interlocuteur » (à propos) : un objet 3D sur chaque nœud du réseau */
.ab-net .net-node.net-3d > circle:not(.net-pulse) { opacity: 0; }
.ab-net .net-ic { transform-box: fill-box; transform-origin: center; animation: ic-flotte 6.5s ease-in-out infinite; animation-delay: var(--d, 0s); }

/* nature morte des guides export : rendu 3D à la place du dessin au trait */
.sf-spec.aube-mon .mon-boite { max-width: 600px; }
.mon-nature .mon-halo { inset: 8% 4% -2%; background: radial-gradient(50% 46% at 50% 62%, rgba(255, 176, 96, .2), transparent 70%), radial-gradient(60% 60% at 70% 40%, rgba(109, 95, 240, .2), transparent 72%); }

/* ---------- Les icônes 3D (pictogrammes reconnus par aube.js) ---------- */
svg.ic3d {
  background: var(--ic, none) center / contain no-repeat !important;
  box-shadow: none !important; border-radius: 0 !important; padding: 0 !important;
  overflow: visible;
  filter: drop-shadow(0 10px 14px rgba(40, 18, 96, .32));
  animation: ic-flotte 6.5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.3s);
}
svg.ic3d > * { display: none; }
.vo-ic.ic3d { width: 84px; height: 84px; margin: -14px 0 -8px -12px; }
.sf-cards .ico.porte-ic3d { width: 5.6rem; height: 5.6rem; }
.fg-front .sf-ic.ic3d { width: 5.4rem; height: 5.4rem; }
.ab-flip .flip-f > svg.ic3d { width: 88px; height: 88px; margin: -12px 0 -6px -16px; }
/* la fusée de la frise des étapes : rendue nez en bas, elle n'a plus besoin d'être retournée */
.sd-steps .sd-rocket.porte-ic3d {
  width: 84px; height: 84px; transform: none; filter: none;
  left: calc(clamp(1rem, 2vw, 1.6rem) - 41px);
  top: calc(.4rem + (100% - .8rem) * var(--fill, 0) - 42px);
}
.sd-steps .sd-rocket > svg.ic3d { filter: drop-shadow(0 0 9px rgba(246, 195, 91, .5)) drop-shadow(0 8px 10px rgba(40, 18, 96, .3)); animation-duration: 2.6s; }
@media (max-width: 640px) {
  .sd-steps .sd-rocket.porte-ic3d { width: 62px; height: 62px; left: calc(clamp(1rem, 2vw, 1.6rem) - 30px); top: calc(.4rem + (100% - .8rem) * var(--fill, 0) - 31px); }
}
.aube-jour svg.ic3d { filter: drop-shadow(0 12px 14px rgba(79, 63, 216, .26)); }
/* apparition : l'objet arrive en tournant, puis flotte */
.js .rv:not(.in) svg.ic3d { scale: .55; rotate: -14deg; opacity: 0; }
.js .rv svg.ic3d { transition: scale .9s cubic-bezier(.34, 1.56, .64, 1) .12s, rotate .9s cubic-bezier(.34, 1.56, .64, 1) .12s, opacity .5s ease .12s, filter .4s ease; }
:is(.vo-uses li, .sf-cards li, .fg-flip):hover svg.ic3d { scale: 1.08; rotate: -6deg; }
@keyframes ic-flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@media (prefers-reduced-motion: reduce) {
  svg.ic3d { animation: none; }
  .js .rv:not(.in) svg.ic3d { scale: 1; rotate: 0deg; opacity: 1; }
}
/* reflets dans l'eau : le bas du rendu se fond dans la page */
.mon-amsterdam .mon-img, .mon-amsterdam .mon-eclat { -webkit-mask-image: linear-gradient(#000 64%, transparent 99%); mask-image: linear-gradient(#000 64%, transparent 99%); }
.mon-amsterdam .mon-eclat { -webkit-mask: var(--mon-src) center / 100% 100% no-repeat; mask: var(--mon-src) center / 100% 100% no-repeat; }
/* monuments posés dans la lecture (jour) : une fenêtre de nuit arrondie */
.aube-jour .landmark.aube-mon .mon-boite {
  border-radius: 22px; overflow: hidden;
  background:
    radial-gradient(70% 60% at 50% 100%, rgba(109, 95, 240, .35), transparent 70%),
    radial-gradient(1px 1px at 18% 22%, rgba(255, 255, 255, .7), transparent 60%),
    radial-gradient(1px 1px at 72% 14%, rgba(255, 255, 255, .6), transparent 60%),
    radial-gradient(1px 1px at 44% 34%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1px 1px at 86% 40%, rgba(255, 255, 255, .55), transparent 60%),
    linear-gradient(180deg, #07051a, #15103a 70%, #1d1546);
  box-shadow: 0 24px 50px -24px rgba(40, 20, 100, .55);
}
.aube-jour .landmark.aube-mon .mon-halo { inset: 0; }