:root{
  --blanc:#fff;
  --dim:rgba(255,255,255,.6);
  --faint:rgba(255,255,255,.16);
  --accent:#fff;
  --accent-soft:rgba(255,255,255,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
/* Le fond de la page remonte au "canvas" du navigateur : c'est lui qui est
   peint dans la zone d'elasticite (rubber-band iOS, tire-pour-rafraichir).
   Deux conditions pour qu'il soit noir et pas blanc :
     - color-scheme:dark, sinon Safari peint cette zone avec le fond systeme ;
     - pas d'overflow:hidden sur html. "hidden" fait de la racine un
       conteneur de defilement et casse la propagation du fond. "clip"
       coupe le debordement horizontal sans creer ce conteneur. */
/* Rien d'autre ici : ni overflow, ni height. Toute valeur d'overflow sur la
   racine casse la propagation du fond vers le canvas. Le debordement
   horizontal est evite a la source (voir .starfield). */
html{
  background-color:#000;
  color-scheme:dark;
}
/* Defilement par ecran sur les pages planete : un geste = un ecran.
   html.defile-par-ecran est pose par le JS a l'ouverture d'une planete
   et retire au retour a l'accueil, qui reste libre.
   Le defilement vertical natif au doigt est coupe : c'est app.js qui
   change d'ecran (voir « defilement par ecran »). pan-x garde le
   balayage horizontal des carrousels, pinch-zoom le zoom a deux doigts.
   L'accrochage CSS (scroll-snap-type) a ete abandonne : Safari ramenait
   la page sur l'ecran de depart apres chaque deplacement par les
   boutons. Ne pas le remettre. */
html.defile-par-ecran,
html.defile-par-ecran body{touch-action:pan-x pinch-zoom}
/* Le pied de page global vit hors des vues : sous le defilement par
   ecran il formerait un demi-cran sous le dernier ecran. Sur une page planete il
   est repris dans ce dernier ecran (.planet-pied), donc masque ici. */
html.defile-par-ecran .site-footer{display:none}
body{
  background-color:#000;
  color:var(--blanc);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* svh et non dvh : dvh change pendant que la barre d'adresse d'iOS se
     replie, la hauteur de la page bougeait donc sous le doigt — source
     classique de saccades. svh est la petite hauteur, stable. */
  min-height:100svh;
  display:flex;
  flex-direction:column;
  /* pas d'overflow-x ici : sur body, il casse position:sticky. html le porte deja. */
}

/* ---------- champ d'étoiles ---------- */
/* inset:0 et non une valeur negative : un element fixe qui deborde du
   viewport rend la page defilable horizontalement, et aucun overflow sur
   la racine ne l'en empeche vraiment. Le zoom de .warping agrandit le
   ciel, il ne peut donc pas en decouvrir les bords. */
.starfield{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .4s ease;
  will-change:transform;
}
.starfield.warping{
  transform:scale(1.06);
  opacity:.82;
}
/* Nappe de couleur du fond : les teintes de la galaxie diffusees tres
   doucement derriere les etoiles. C'est ce qui empeche le noir d'etre
   plat sans rien allumer. Le motif est construit par app.js dans --halos,
   depuis ORDER et POS. inset negatif : les nappes sont posees sur les
   bords, il faut de la matiere au-dela pour qu'elles ne se coupent pas
   net — .starfield etant en overflow:hidden, rien n'en sort. */
.starfield::before{
  content:"";
  position:absolute;
  inset:-12%;
  z-index:-1;
  pointer-events:none;
  background-image:var(--halos,none);
}
.star{
  position:absolute;
  background:#fff;
  border-radius:50%;
  animation:twinkle var(--d,3.5s) ease-in-out var(--dl,0s) infinite;
}
.star-x{
  position:absolute;
  color:#fff;
  animation:twinkle var(--d,4s) ease-in-out var(--dl,0s) infinite;
}
.star-x svg{display:block;width:100%}
@keyframes twinkle{0%,100%{opacity:.1;transform:scale(.7)}50%{opacity:.9;transform:scale(1)}}

/* ---------- planètes de fond : style illustré / détaillé ---------- */
.bg-planet{
  position:absolute;
  /* Diametre pose par app.js dans --t, et non en pixels dans l'attribut
     style : il faut pouvoir le reduire sur telephone, ou le meme disque
     occupe une bien plus grande part de l'ecran. */
  width:var(--t,30px);
  height:var(--t,30px);
  border-radius:50%;
  overflow:visible;
  isolation:isolate;
  background:
    radial-gradient(circle at 28% 23%, rgba(255,255,255,.70) 0 4%, rgba(255,255,255,.18) 11%, transparent 23%),
    radial-gradient(circle at 62% 68%, rgba(0,0,0,.34) 0 18%, transparent 34%),
    radial-gradient(circle at 42% 42%, var(--c1) 0%, color-mix(in srgb,var(--c1) 76%,var(--c2)) 42%, var(--c2) 76%, #02030a 100%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    inset -18% -14% 24% rgba(0,0,0,.64),
    inset 9% 7% 13% rgba(255,255,255,.14),
    0 0 0 1px rgba(255,255,255,.05),
    0 0 12px var(--glow),
    0 0 28px color-mix(in srgb,var(--glow) 55%,transparent);
  filter:saturate(1.22) brightness(.88);
  will-change:transform,filter,opacity;
}

/* Atmosphère + rim light. */
.bg-planet::before{
  content:"";
  position:absolute;
  inset:-14%;
  border-radius:50%;
  background:
    radial-gradient(circle at 72% 72%, transparent 0 54%, rgba(255,255,255,.07) 61%, var(--glow) 67%, transparent 76%);
  opacity:.82;
  z-index:-1;
  pointer-events:none;
}

/* Texture / relief : les classes ci-dessous remplacent le simple rond par une vraie identité. */
.bg-planet::after{
  content:"";
  position:absolute;
  inset:2%;
  border-radius:50%;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.72;
  background:
    radial-gradient(circle at 23% 34%, rgba(255,255,255,.16) 0 4%, transparent 5.5%),
    radial-gradient(circle at 68% 25%, rgba(0,0,0,.18) 0 6%, transparent 7.5%),
    radial-gradient(circle at 72% 65%, rgba(255,255,255,.10) 0 3%, transparent 4.5%),
    radial-gradient(circle at 38% 74%, rgba(0,0,0,.18) 0 5%, transparent 6.5%);
}

/* Le ciel reste un decor — il ne doit jamais concurrencer le logo, le
   texte ni les boutons, sur lesquels les planetes passent parfois — mais
   il porte les couleurs de la galaxie. Les planetes etaient bridees a
   opacity .34 et brightness .5, ce qui les rendait presque grises ; a
   leur nouveau diametre elles supportent d'etre colorees.
   Survoler un nom rallume la sienne (.flare) : c'est le contraste entre
   ces deux etats qui fait le lien, il faut donc garder de la marge
   au-dessus de l'etat de repos. */
.bg-planet{
  animation:planet-pulse var(--d,5s) ease-in-out var(--dl,0s) infinite;
  transition:opacity .35s ease,box-shadow .35s ease,filter .35s ease;
  opacity:.52;
  filter:saturate(1.12) brightness(.74);
  border-color:rgba(255,255,255,.14);
  box-shadow:
    inset -18% -14% 24% rgba(0,0,0,.66),
    inset 9% 7% 13% rgba(255,255,255,.12),
    0 0 14px color-mix(in srgb,var(--glow) 55%,transparent),
    0 0 34px color-mix(in srgb,var(--glow) 30%,transparent);
}
/* L'atmosphere et le relief : desormais lisibles, les disques etant plus
   grands. Ils etaient effaces parce qu'ils faisaient du bruit a 15px. */
.bg-planet::before{opacity:.55}
.bg-planet::after{opacity:.6}

/* Chaque planète possède sa propre géologie / matière. */
.planet-kikoo-world{
  background:
    radial-gradient(ellipse at 30% 35%, rgba(107,255,218,.95) 0 7%, transparent 8%),
    radial-gradient(ellipse at 62% 62%, rgba(65,190,119,.92) 0 12%, transparent 13%),
    radial-gradient(ellipse at 45% 68%, rgba(35,123,82,.9) 0 8%, transparent 9%),
    linear-gradient(155deg, transparent 0 36%, rgba(255,255,255,.13) 37% 40%, transparent 41% 52%, rgba(0,0,0,.16) 53% 57%, transparent 58%),
    radial-gradient(circle at 38% 35%, #8be8ff 0%, #2d8dca 38%, #103b78 70%, #02050d 100%);
}

.planet-kikoomag{
  background:
    repeating-linear-gradient(166deg, transparent 0 10%, rgba(255,255,255,.10) 11% 14%, transparent 15% 24%),
    radial-gradient(ellipse at 65% 36%, rgba(255,126,229,.62) 0 10%, transparent 11%),
    radial-gradient(ellipse at 30% 67%, rgba(111,36,121,.9) 0 12%, transparent 13%),
    radial-gradient(circle at 35% 30%, #ffb0ed 0%, #b94bb8 34%, #641b68 68%, #16061c 100%);
}

.planet-kikoomania{
  background:
    repeating-linear-gradient(7deg, #ffcc62 0 7%, #d77a24 8% 13%, #8d3b0c 14% 18%, #ffad32 19% 24%),
    radial-gradient(circle at 32% 28%, #ffe3a1 0%, #f08c25 42%, #6a2105 78%, #090301 100%);
}
.planet-kikoomania::after{
  background:
    radial-gradient(ellipse at 68% 52%, rgba(255,235,173,.72) 0 7%, transparent 8%),
    radial-gradient(ellipse at 58% 55%, rgba(255,92,22,.8) 0 3%, transparent 4%),
    radial-gradient(ellipse at 74% 48%, rgba(0,0,0,.25) 0 8%, transparent 9%);
}

.planet-kikoo-arena{
  background:
    linear-gradient(132deg, transparent 0 18%, rgba(255,236,190,.25) 19% 21%, transparent 22% 39%, rgba(255,98,54,.62) 40% 42%, transparent 43% 61%, rgba(255,196,77,.22) 62% 64%, transparent 65%),
    radial-gradient(circle at 34% 28%, #ff9b6c 0%, #d93e35 36%, #75131a 68%, #150305 100%);
}
.planet-kikoo-arena::after{
  background:
    radial-gradient(circle at 25% 58%, rgba(255,221,140,.7) 0 3%, transparent 4%),
    radial-gradient(circle at 63% 35%, rgba(0,0,0,.38) 0 7%, transparent 8%),
    linear-gradient(160deg, transparent 0 45%, rgba(255,83,40,.55) 46% 48%, transparent 49% 100%);
}

.planet-kikoo-show{
  background:
    repeating-linear-gradient(172deg, #c9a0ff 0 8%, #7041bd 9% 16%, #3a176f 17% 22%, #a66df1 23% 31%),
    radial-gradient(circle at 35% 30%, #eadcff 0%, #9562e7 40%, #3b176f 75%, #0d0317 100%);
}
.planet-kikoo-show::after{
  background:
    radial-gradient(circle at 63% 32%, rgba(255,255,255,.58) 0 4%, transparent 5%),
    radial-gradient(circle at 34% 66%, rgba(18,5,42,.45) 0 8%, transparent 9%);
}

.planet-kikoo-gaming{
  background:
    repeating-linear-gradient(90deg, transparent 0 18%, rgba(116,255,154,.16) 19% 21%, transparent 22% 38%),
    repeating-linear-gradient(0deg, transparent 0 22%, rgba(116,255,154,.13) 23% 25%, transparent 26% 44%),
    radial-gradient(circle at 36% 30%, #b7ffc8 0%, #35c86b 34%, #11612d 68%, #021007 100%);
}
.planet-kikoo-gaming::after{
  background:
    radial-gradient(circle at 60% 42%, rgba(218,255,225,.62) 0 3%, transparent 4%),
    radial-gradient(circle at 28% 64%, rgba(0,30,10,.46) 0 7%, transparent 8%),
    linear-gradient(25deg, transparent 0 45%, rgba(148,255,175,.35) 46% 48%, transparent 49%);
}

.planet-jey{
  background:
    radial-gradient(circle at 35% 32%, #fff5bc 0 7%, transparent 8%),
    radial-gradient(circle at 66% 38%, rgba(255,123,0,.7) 0 9%, transparent 10%),
    repeating-linear-gradient(20deg, #fff0a2 0 9%, #e7a52b 10% 15%, #9d4c05 16% 21%, #ffd765 22% 30%),
    radial-gradient(circle at 38% 32%, #fffbe0 0%, #ffc84d 38%, #c15b05 72%, #160600 100%);
}
.planet-jey::before{
  inset:-25%;
  background:radial-gradient(circle,transparent 55%,rgba(255,205,74,.38) 62%,rgba(255,130,0,.2) 70%,transparent 78%);
}

.planet-d2{
  background:
    linear-gradient(135deg, transparent 0 22%, rgba(229,255,252,.35) 23% 25%, transparent 26% 46%, rgba(49,214,204,.42) 47% 49%, transparent 50% 70%, rgba(224,255,255,.24) 71% 73%, transparent 74%),
    radial-gradient(circle at 34% 28%, #b8ffff 0%, #45d5d0 38%, #167b7b 70%, #021316 100%);
}
.planet-d2::after{
  background:
    radial-gradient(circle at 63% 34%, rgba(255,255,255,.55) 0 5%, transparent 6%),
    radial-gradient(circle at 28% 67%, rgba(0,46,48,.45) 0 9%, transparent 10%),
    linear-gradient(145deg, transparent 0 46%, rgba(207,255,255,.45) 47% 49%, transparent 50%);
}

.planet-kikoo{
  background:
    radial-gradient(circle at 24% 30%, rgba(255,255,255,.8) 0 5%, transparent 6%),
    radial-gradient(circle at 65% 62%, rgba(0,0,0,.28) 0 11%, transparent 12%),
    radial-gradient(circle at 48% 42%, #fff 0%, #bfc3cc 34%, #696d78 66%, #11131a 100%);
}
.planet-kikoo::after{
  background:
    radial-gradient(circle at 66% 28%, rgba(0,0,0,.32) 0 8%, transparent 9%),
    radial-gradient(circle at 38% 65%, rgba(255,255,255,.26) 0 5%, transparent 6%),
    radial-gradient(circle at 70% 68%, rgba(0,0,0,.22) 0 4%, transparent 5%);
}

/* Kikoomag : un anneau fin, plus graphique, qui reste lisible dans les coins. */
.planet-kikoomag::before{
  inset:-30% -48%;
  border:1px solid rgba(255,151,235,.30);
  background:linear-gradient(90deg,transparent 0 18%,rgba(255,205,246,.24) 48%,transparent 82%);
  transform:rotate(18deg);
  opacity:.75;
  z-index:-1;
}

/* Une planète annelée apporte une silhouette immédiatement reconnaissable. */
.planet-kikoo-show{
  box-shadow:
    inset -18% -14% 24% rgba(0,0,0,.64),
    inset 9% 7% 13% rgba(255,255,255,.14),
    0 0 0 1px rgba(255,255,255,.12),
    0 0 12px var(--glow),
    0 0 28px var(--glow),
    0 0 0 5px rgba(194,142,255,.07);
}
.planet-kikoo-show::before{
  inset:-35% -55%;
  border:2px solid rgba(206,167,255,.30);
  background:linear-gradient(90deg,transparent 0 16%,rgba(255,255,255,.20) 48%,transparent 82%);
  transform:rotate(-18deg);
  opacity:.8;
  z-index:-1;
}

/* Sur une page planete, le ciel se retire. L'accueil est une carte de la
   galaxie : les planetes y sont le sujet, elles peuvent etre franches.
   Une page planete est un texte : elles n'y sont plus qu'une texture de
   fond, et a leur nouveau diametre elles passaient derriere les titres et
   les cartes. Le halo de couleur, lui, reste — c'est lui qui porte la
   teinte, pas les disques.
   :not(.hidden) plutot qu'un ordre de declaration : la planete courante
   doit rester invisible, et sa regle est moins specifique que celle-ci. */
html.defile-par-ecran .bg-planet:not(.hidden){
  opacity:.2;
  filter:saturate(.85) brightness(.5);
  box-shadow:
    inset -18% -14% 24% rgba(0,0,0,.72),
    inset 9% 7% 13% rgba(255,255,255,.08),
    0 0 8px color-mix(in srgb,var(--glow) 35%,transparent);
}
html.defile-par-ecran .bg-planet::before{opacity:.25}
html.defile-par-ecran .bg-planet::after{opacity:.3}
/* Les nappes de couleur non plus n'ont pas leur place sur une page
   planete : les quatre teintes de la galaxie lavaient le fond en rose
   alors que la page est bleue. La teinte y vient de .planet-bg, qui suit
   l'accent de la planete affichee. */
html.defile-par-ecran .starfield::before{opacity:0}
.starfield::before{transition:opacity .5s ease}

/* Survol d'un nom sur l'accueil : la planete correspondante s'allume. */
.bg-planet.flare{
  opacity:1;
  filter:saturate(1.3) brightness(1.05);
  border-color:rgba(255,255,255,.22);
  box-shadow:
    inset -18% -14% 24% rgba(0,0,0,.55),
    inset 9% 7% 13% rgba(255,255,255,.18),
    0 0 0 1px rgba(255,255,255,.16),
    0 0 18px var(--glow2),
    0 0 36px var(--glow);
}
.bg-planet.hidden{opacity:0;pointer-events:none}

/* Seule l'echelle est animee. Mettre "filter" dans les keyframes le
   figerait : une animation l'emporte sur une declaration normale, et le
   survol (.flare) ne pourrait plus l'eclaircir. */
@keyframes planet-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.035)}
}

/* ---------- vues ---------- */
.view{
  flex:1;
  display:none;
  flex-direction:column;
  position:relative;
  z-index:1;
}
.view.active{display:flex}
/* Les durees viennent du JS (--warp-out / --warp-in), meme source que la
   choregraphie de l'etoile : la vue sortante atteint l'opacite zero au
   moment exact de l'echange, et la vue entrante part de zero. Rien ne
   peut donc "sauter" a l'ecran, quelle que soit l'intensite du halo. */
.view.leaving{animation:view-out var(--warp-out,378ms) cubic-bezier(.4,0,.6,1) both}
.view.entering{animation:view-in var(--warp-in,560ms) cubic-bezier(.2,.8,.2,1) both}
@keyframes view-out{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-10px) scale(.985)}}
@keyframes view-in{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ============ ACCUEIL ============ */
.hero{
  flex:1;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:56px 20px 64px;
}
.stage{
  position:relative;
  width:min(62vw,290px);
  aspect-ratio:714/478;
  margin-bottom:32px;
}
/* Halo derriere le monogramme. Comme l'anneau, il est borne par le
   viewport : un pseudo-element qui deborde rend la page defilable
   horizontalement, et il echappe aux sondes qui n'inspectent que les
   vrais elements. */
.stage::before{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:min(180%, calc(86vw - 28px));
  height:180%;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(255,255,255,.08),transparent 70%);
  pointer-events:none;
}
.orbit{
  position:absolute;
  left:50%;top:50%;
  /* 146% du logo, mais jamais plus que ce que le viewport peut contenir.
     Le dimensionnement se fait sur la DIAGONALE, pas sur la largeur :
     .orbit-carrier est un carre qui tourne a 360 degres, sa boite
     englobante atteint donc largeur x 1,41 a 45 degres. Un debordement
     ici rend toute la page defilable horizontalement, de facon
     intermittente puisqu'il depend de l'angle. */
  width:min(146%, calc(58vw - 8px));
  aspect-ratio:1;
  transform:translate(-50%,-50%) rotateX(69deg) rotateZ(-15deg);
  pointer-events:none;
  z-index:0;
}
.orbit-carrier{position:absolute;inset:0;animation:orbit 20s linear infinite}
.orbit-star{
  position:absolute;top:-7px;left:50%;
  width:14px;height:14px;
  transform:translateX(-50%) rotateZ(15deg) rotateX(-69deg);
  color:#fff;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.8));
}
@keyframes orbit{to{transform:rotate(360deg)}}
.mono{
  position:absolute;inset:0;
  z-index:1;
  width:100%;height:100%;
  object-fit:contain;
  animation:enter-mono .9s cubic-bezier(.2,.9,.3,1) both,
            float 7s ease-in-out 1.2s infinite;
}
@keyframes enter-mono{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
/* Le flottement anime `translate`, pas `transform` : l'entree (enter-mono)
   anime deja transform sur le meme element, et deux animations de la
   meme propriete empechaient le navigateur de les confier au compositeur.
   Mesure : 60 recalculs de style par seconde au repos sur l'accueil,
   environ 22 % d'un coeur, en permanence. */
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -7px}}
/* Le <h1> de l'accueil ne fait qu'envelopper le logo : aucune marge,
   aucune hauteur de ligne, sinon l'image prendrait un liseré dessous. */
.titre-site{margin:0;font-size:inherit;line-height:0}
.wordmark{
  width:min(78vw,390px);
  height:auto;
  animation:enter-up .8s cubic-bezier(.2,.9,.3,1) .35s both;
}
@keyframes enter-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
/* Au retour d'une planete, la sequence d'entree de l'accueil rejoue
   (l'element sort de display:none). On la resserre : au premier
   chargement on decouvre, au retour on retrouve. */
.view.entering .wordmark{animation-delay:.06s}
.view.entering .tagline{animation-delay:.14s}
.view.entering .galaxy-list{animation-delay:.22s}
.tagline{
  margin-top:24px;
  font-weight:500;
  font-size:15px;
  letter-spacing:.03em;
  line-height:1.65;
  color:var(--dim);
  max-width:46ch;
  animation:enter-up .8s cubic-bezier(.2,.9,.3,1) .55s both;
}

/* ---------- constellation de noms ---------- */
.galaxy-list{
  margin-top:44px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  list-style:none;
  width:min(100%,880px);
  animation:enter-up .8s cubic-bezier(.2,.9,.3,1) .7s both;
}
/* flex:1 1 <base> borne par max-width : dans une rangee pleine tous les
   boutons font la meme largeur, et une rangee incomplete reste centree.
   Avec 880px et une base de 172px, les quatre planetes tiennent sur une
   rangee sur grand ecran ; en dessous de 760px la liste se resserre a
   400px, soit deux par rangee. A 648px, c'etait 3 + 1 : Kikoo Gaming
   seule sur sa ligne, comme mise a part. */
.galaxy-list li{display:flex;flex:1 1 172px;max-width:208px}
@media (max-width:760px){.galaxy-list{width:min(100%,400px)}}

/* Le titre d'une planete recoit le focus a l'arrivee (app.js, pour les
   lecteurs d'ecran) : il n'est pas un controle, pas de contour. */
.planet-title:focus{outline:none}
.galaxy-list button,.galaxy-list a{
  --c:#fff;
  text-decoration:none;
  flex:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:13px 18px;
  /* Le nom ET la bordure portent la couleur de la planete : c'est le nom
     qui identifie la destination, autant qu'il l'annonce. Les quatre
     teintes sont claires, leur contraste sur le noir du site va de 6,5 a
     12 pour 1 — bien au-dela des 4,5 exiges. */
  border:1.5px solid color-mix(in srgb,var(--c) 55%,transparent);
  border-radius:999px;
  /* Un fond sombre sous la teinte, et non un simple voile : les planetes
     du ciel sont desormais colorees et passent derriere ces boutons. Sans
     cette base, l'une d'elles remontait a travers le nom. */
  background:color-mix(in srgb,var(--c) 9%,rgba(10,11,13,.62));
  color:var(--c);
  font-family:inherit;
  font-weight:800;
  font-size:13.5px;
  letter-spacing:.13em;
  line-height:1.15;
  text-transform:uppercase;
  text-align:center;
  cursor:pointer;
  transition:color .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease,transform .25s ease;
}
/* Inversion franche au survol, comme les pilules des pages planete : le
   bouton se remplit de sa couleur et le texte passe au noir du site. */
.galaxy-list button:hover,.galaxy-list a:hover,
.galaxy-list button:focus-visible,.galaxy-list a:focus-visible{
  color:#0c0d0e;
  border-color:var(--c);
  background:var(--c);
  box-shadow:0 8px 26px rgba(0,0,0,.45),0 0 28px color-mix(in srgb,var(--c) 42%,transparent);
  transform:translateY(-3px);
}
.galaxy-list button:active,.galaxy-list a:active{transform:translateY(-1px) scale(.985)}
.galaxy-list button:focus-visible,.galaxy-list a:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ============ WARP — l'etoile filante ============
   Une etoile blanche a quatre branches, le motif du site (logo, orbite,
   pied de page). A l'aller elle part de la position de la planete dans
   le ciel, file vers le centre et eclate en lumiere ; l'echange de vues
   se fait sous le pic, quand les deux vues sont de toute facon a
   opacite nulle. Au retour elle nait au centre, eclate, puis regagne sa
   place dans le ciel, ou la planete de fond se rallume.

   Tout est en transform + opacity (compose par le GPU). Une seule duree,
   --warp, posee par le JS et partagee par toutes les animations. Le
   nettoyage attend la fin reelle de l'animation (animationend) : rien
   n'est coupe en cours de route.
   ================================================= */
.warp{
  position:fixed;
  inset:0;
  z-index:50;
  display:none;
  pointer-events:none;
  overflow:hidden;
}
.warp.on{display:block}

/* Voile : la lumiere qui baigne tout l'ecran au pic. --warp-peak regle son
   intensite (0 = aucune, 1 = blanc pur). */
.warp-veil{
  position:absolute;
  inset:0;
  background:#fff;
  opacity:0;
  will-change:opacity;
}
/* Halo : l'eclat centre sur l'etoile. */
.warp-bloom{
  position:absolute;
  left:50%;top:50%;
  width:100vmax;height:100vmax;
  margin:-50vmax 0 0 -50vmax;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.9) 0%,rgba(255,255,255,.62) 14%,rgba(255,255,255,.34) 30%,rgba(255,255,255,.09) 52%,transparent 72%);
  transform:scale(0);
  opacity:0;
  will-change:transform,opacity;
}
.warp-star{
  position:absolute;
  left:50%;top:50%;
  width:26px;height:26px;
  margin:-13px 0 0 -13px;
  color:#fff;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.8)) drop-shadow(0 0 14px rgba(255,255,255,.4));
  opacity:0;
  will-change:transform,opacity;
}
.warp-star svg{display:block;width:100%;height:100%}
/* Trainee : une seconde etoile, plus petite, qui suit la premiere avec un
   leger retard. Suffit a suggerer le mouvement sans aucun calcul d'angle. */
.warp-star.trail{
  width:16px;height:16px;
  margin:-8px 0 0 -8px;
  opacity:.55;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.55));
}

/* --- aller : ciel -> centre -> eclat --- */
.warp.aller .warp-star{animation:star-aller var(--warp,900ms) cubic-bezier(.25,.6,.2,1) both}
.warp.aller .warp-star.trail{animation-delay:55ms;animation-duration:calc(var(--warp,900ms) - 55ms)}
/* Le pic est volontairement discret : une etoile qui grossit trop au
   centre "saute" a l'oeil au lieu d'accompagner le changement de page.
   L'echelle plafonne sous 1,5 et les fondus sont etales. */
@keyframes star-aller{
  0%  {transform:translate(var(--tx,0px),var(--ty,0px)) scale(.45) rotate(0deg);opacity:0}
  16% {opacity:.9}
  44% {transform:translate(0,0) scale(1.35) rotate(85deg);opacity:1}
  68% {transform:translate(0,0) scale(1) rotate(130deg);opacity:.55}
  100%{transform:translate(0,0) scale(.62) rotate(180deg);opacity:0}
}
.warp.aller .warp-bloom{animation:bloom-aller var(--warp,900ms) cubic-bezier(.3,0,.25,1) both}
@keyframes bloom-aller{
  0%  {transform:translate(var(--tx,0px),var(--ty,0px)) scale(.02);opacity:0}
  24% {opacity:.34}
  44% {transform:translate(0,0) scale(.92);opacity:.72}
  100%{transform:translate(0,0) scale(1.3);opacity:0}
}
.warp.aller .warp-veil{animation:veil-aller var(--warp,900ms) ease-in-out both}
@keyframes veil-aller{
  0%  {opacity:0}
  40% {opacity:var(--warp-peak,.72)}
  50% {opacity:var(--warp-peak,.72)}
  100%{opacity:0}
}

/* --- retour : centre -> eclat -> ciel --- */
.warp.retour .warp-star{animation:star-retour var(--warp,900ms) cubic-bezier(.3,0,.25,1) both}
.warp.retour .warp-star.trail{animation-delay:55ms;animation-duration:calc(var(--warp,900ms) - 55ms)}
@keyframes star-retour{
  0%  {transform:translate(0,0) scale(.5) rotate(0deg);opacity:0}
  20% {transform:translate(0,0) scale(1.25) rotate(60deg);opacity:.95}
  44% {transform:translate(0,0) scale(1.35) rotate(90deg);opacity:1}
  86% {opacity:.8}
  100%{transform:translate(var(--tx,0px),var(--ty,0px)) scale(.4) rotate(180deg);opacity:0}
}
.warp.retour .warp-bloom{animation:bloom-retour var(--warp,900ms) cubic-bezier(.3,0,.25,1) both}
@keyframes bloom-retour{
  0%  {transform:scale(.02);opacity:0}
  44% {transform:scale(.92);opacity:.72}
  100%{transform:translate(var(--tx,0px),var(--ty,0px)) scale(.02);opacity:0}
}
.warp.retour .warp-veil{animation:veil-retour var(--warp,900ms) ease-in-out both}
@keyframes veil-retour{
  0%  {opacity:0}
  40% {opacity:var(--warp-peak,.72)}
  50% {opacity:var(--warp-peak,.72)}
  100%{opacity:0}
}

/* ============ PAGE PLANÈTE ============
   Construite sur ce que fait night.co, releve ecran par ecran :
     - un menu flottant en trois zones (pilule / logo / pilule), jamais
       une barre pleine largeur ;
     - une idee par ecran : chaque section fait une hauteur d'ecran, le
       contenu est centre verticalement, le vide autour est assume ;
     - des ecrans-titres : un texte en capitales qui prend la largeur,
       avec un halo lumineux, et une phrase en petites capitales dessous ;
     - des carrousels centres : la carte active est grande au milieu, les
       voisines depassent en bandes sur les cotes ;
     - du texte courant en petites capitales espacees, pas de paragraphes.
   ====================================== */
.planet-view{
  --accent:#fff;
  --accent-soft:rgba(255,255,255,.12);
  --pad:clamp(20px,4vw,56px);
  padding:0;
}
.planet-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(70% 60% at 90% -15%, var(--accent-soft), transparent 70%),
    radial-gradient(55% 50% at -15% 110%, var(--accent-soft), transparent 70%);
}

/* --- texte en petites capitales : la voix du site --- */
.pcap{
  font-size:clamp(11.5px,.95vw,13.5px);
  font-weight:600;
  letter-spacing:.09em;
  line-height:1.5;
  text-transform:uppercase;
  color:rgba(242,242,242,.82);
}

/* --- menu flottant --- */
.planet-head{
  position:fixed;
  top:clamp(14px,2vw,26px);
  left:0;
  right:0;
  z-index:20;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  padding-inline:var(--pad);
  pointer-events:none;
}
.planet-head > *{pointer-events:auto;justify-self:start}
/* ---------- barre de progression (app.js, armerMenu) ----------
   Un trait de 2px tout en haut, coupe en un segment par ecran. Le
   remplissage glisse de gauche a droite en avancant, se retire en
   reculant. Au-dessus du menu, sans jamais intercepter un toucher. */
.progression{
  position:fixed;
  top:env(safe-area-inset-top,0px);
  left:0;
  right:0;
  z-index:25;
  display:flex;
  gap:3px;
  height:2px;
  pointer-events:none;
}
.progression span{
  position:relative;
  flex:1;
  background:rgba(255,255,255,.14);
  overflow:hidden;
}
.progression span::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.progression span.fait::after{transform:scaleX(1)}
.head-logo{
  justify-self:center;
  display:block;
  height:16px;
  /* La zone de clic depasse le logo : 16px de haut, il etait presque
     impossible a toucher sur tablette. */
  padding:12px 10px;
  opacity:.92;
  transition:opacity .25s ease;
}
.head-logo img{display:block;height:100%;width:auto}
.head-logo:hover{opacity:1}
.head-droite{justify-self:end}
.pilule,
.back-btn,
.back-link,
.next-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:12px 20px;
  color:#f2f2f2;
  font-family:inherit;
  font-weight:700;
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  background:rgba(22,23,26,.62);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.pilule:hover,.pilule:focus-visible,
.back-btn:hover,.back-btn:focus-visible,
.back-link:hover,.back-link:focus-visible,
.next-link:hover,.next-link:focus-visible{background:#f2f2f2;color:#0c0d0e;border-color:#f2f2f2}
.pilule:focus-visible,.back-btn:focus-visible,.back-link:focus-visible,.next-link:focus-visible{outline:2px solid #fff;outline-offset:3px}
.pilule svg,.back-btn svg,.back-link svg,.next-link svg{width:13px;height:13px;flex:none}
/* Au doigt, 44px de haut au minimum (39px sinon) : la souris n'en a pas
   besoin, l'ordinateur garde ses pilules fines. */
@media (pointer:coarse){
  .pilule,.back-btn,.back-link,.next-link{min-height:44px}
}

/* --- une idee par ecran --- */
.ecran{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:clamp(88px,12vh,130px) var(--pad) clamp(56px,9vh,110px);
  scroll-margin-top:0;
}

/* --- ouverture --- */
.planet-kicker{
  font-size:clamp(11px,.9vw,13px);
  font-weight:700;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:clamp(18px,2.4vw,30px);
}
/* Le halo : ce qui fait qu'un titre "prend l'ecran" au lieu d'etre pose
   dessus. Deux ombres larges, sans decalage. */
.halo{
  text-shadow:
    0 0 .18em rgba(255,255,255,.28),
    0 0 .55em rgba(255,255,255,.14);
}
.planet-title{
  font-weight:900;
  font-style:italic;
  font-size:clamp(46px,11vw,168px);
  letter-spacing:-.01em;
  text-transform:uppercase;
  line-height:.88;
  /* Toujours sur une seule ligne : c'est un nom, pas une phrase. La
     taille reelle est ensuite reduite par le JS (ajusterTitre) jusqu'a
     ce qu'il tienne dans la largeur, quel que soit le nom de la planete.
     width:max-content pour que la mesure porte sur le texte et non sur
     la colonne. */
  white-space:nowrap;
  width:max-content;
  max-width:none;
  /* Respiration : 1,5 % d'amplitude sur 7 secondes. Assez pour que la page
     ne soit pas figee, assez peu pour ne pas attirer l'oeil. Le delai
     laisse l'animation d'entree se terminer d'abord. */
  animation:respire 7s ease-in-out 1.1s infinite;
}
@keyframes respire{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.015)}
}
.planet-title .dot{color:var(--accent)}
/* L'accroche portait jusqu'ici la taille du texte courant (11,5 a
   13,5px) alors qu'elle porte le message de la planete. Sur un grand
   ecran, cela formait un pave minuscule au milieu du vide. Elle a donc sa
   propre echelle, et une largeur de ligne qui suit la taille du texte au
   lieu d'une colonne etroite figee. */
.planet-lead{
  margin-top:clamp(26px,3.4vw,52px);
  font-size:clamp(15px,1.35vw,22px);
  line-height:1.65;
  letter-spacing:.055em;
  color:rgba(242,242,242,.88);
  max-width:min(100%,60ch);
  /* evite les lignes orphelines d'un seul mot en bout de paragraphe */
  text-wrap:pretty;
}
.view.entering .planet-kicker{animation:enter-up .6s cubic-bezier(.2,.8,.2,1) .08s both}
.view.entering .planet-title{animation:enter-up .8s cubic-bezier(.2,.8,.2,1) .16s both}
.view.entering .planet-lead{animation:enter-up .8s cubic-bezier(.2,.8,.2,1) .3s both}

/* --- ecran-titre (la vision) --- */
.declaration{
  font-weight:800;
  font-style:normal;
  font-size:clamp(26px,5.2vw,86px);
  letter-spacing:-.015em;
  line-height:1.02;
  text-transform:uppercase;
  color:#f2f2f2;
  max-width:18ch;
}
.declaration + .declaration{margin-top:.5em}
.mentions{
  width:100%;
  display:flex;
  justify-content:space-between;
  margin-top:clamp(28px,4vw,56px);
  color:rgba(242,242,242,.55);
  font-size:11px;
  letter-spacing:.14em;
}

/* Sur un ecran-carrousel, les marges verticales sont fixes : la carte est
   dimensionnee par (100svh - 400px), ce qui suppose des couts fixes
   connus. Des marges en vh les feraient grandir avec l'ecran et la carte
   deborderait a nouveau. */
.ecran-carrousel{padding-top:88px;padding-bottom:44px}
.ecran-carrousel .section-tete{margin-bottom:clamp(22px,2.6vw,36px)}

/* --- en-tete de section : titre centre + petites capitales --- */
.section-tete{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  margin-bottom:clamp(28px,4vw,52px);
}
.section-num{
  font-size:11px;
  font-weight:700;
  letter-spacing:.2em;
  color:rgba(242,242,242,.38);
  font-variant-numeric:tabular-nums;
}
.section-titre{
  font-weight:800;
  font-size:clamp(26px,3.6vw,54px);
  letter-spacing:-.01em;
  line-height:1;
  text-transform:uppercase;
  color:#f2f2f2;
}
.section-sous{max-width:48ch;color:rgba(242,242,242,.7)}

/* La revelation ne doit JAMAIS transformer une section : une section est
   une cible d'accrochage, et le point d'accrochage suit la boite
   transformee. Un translateY de 28px deplacait donc le cran de 28px au
   moment precis ou la section se revelait, et l'accrochage obligatoire
   recalculait sous le doigt — d'ou les sauts et les blocages au
   defilement. Le decalage est porte par les enfants, la section reste
   immobile. */
.reveal{
  opacity:0;
  transition:opacity .7s cubic-bezier(.2,.8,.2,1);
}
.reveal > *{
  transform:translateY(26px);
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.reveal.vu{opacity:1}
.reveal.vu > *{transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal > *{transform:none}
}

/* --- carrousel centre ---
   La piste defile horizontalement avec accrochage au centre. Un padding
   lateral de (100% - carte)/2 permet a la premiere et a la derniere carte
   de se centrer aussi ; les voisines depassent naturellement en bandes.
   La barre de defilement est masquee, la navigation se fait a la molette,
   au doigt, aux fleches ou aux boutons. */
/* La largeur de carte est aussi bornee par la HAUTEUR disponible : un
   ecran fait une hauteur d'ecran, en-tete de section et navigation
   compris. Sans cette borne, une photo en 3/4 de 560px de large faisait
   747px de haut et l'ecran debordait a 1159px sur un ecran de 900. */
.carrousel{
  width:100%;
  --carte:min(78vw, 980px, calc((100svh - 340px) * 16 / 9));
  --ecart:clamp(10px,1.4vw,20px);
}
.carrousel[data-type="short"]{--carte:min(62vw, 330px, calc((100svh - 340px) * 9 / 16))}
.carrousel[data-type="image"]{--carte:min(72vw, 560px, calc((100svh - 340px) * 3 / 4))}
.carrousel-piste{
  display:flex;
  gap:var(--ecart);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  /* pan-x : le navigateur ne fait de ce toucher qu'un defilement
     horizontal de la piste. Le vertical, lui, n'est plus jamais natif
     sur une page planete : un balayage vertical qui part d'une carte est
     lu par app.js (« defilement par ecran »), qui change d'ecran — il
     recoit les evenements tactiles d'ou qu'ils partent. Avec pan-y en
     plus, Chrome pouvait faire defiler la page lui-meme en meme temps,
     et l'on aurait eu deux mouvements a la fois.
     (Avant le 04/10/2026 le defilement vertical etait natif, et pan-x
     seul l'empechait au depart d'une carte : d'ou pan-x pan-y a
     l'epoque.) */
  touch-action:pan-x;
  /* Ni scroll-snap ni scroll-behavior ici : l'accrochage est pilote par le
     JS. La boucle infinie demande de sauter d'un exemplaire a l'autre sans
     animation ; avec l'accrochage CSS le navigateur re-cadrait derriere,
     la carte n'etait plus centree et le compteur se desynchronisait. */
  padding-inline:calc((100% - var(--carte)) / 2);
  padding-block:14px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.carrousel-piste::-webkit-scrollbar{display:none}
.carte{
  flex:0 0 var(--carte);
  position:relative;
  border-radius:clamp(14px,1.6vw,24px);
  overflow:hidden;
  background:#0e0f11;
  border:1px solid rgba(255,255,255,.07);
  transform:scale(.94);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .3s ease;
}
/* L'attenuation d'une carte voisine porte sur son CONTENU, jamais sur la
   carte elle-meme. Une opacite posee sur .carte rendait aussi son fond
   translucide : le ciel etoile, planetes comprises, remontait au travers
   de la vignette. Le fond de la carte reste donc opaque, seul ce qu'elle
   contient s'efface. */
.carte > *{transition:opacity .5s ease}
.carte:not(.active) > *{opacity:.5}
.carte.active{transform:none;border-color:rgba(255,255,255,.22)}
.carte-media{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  background:#111;
}
.carrousel[data-type="short"] .carte-media{aspect-ratio:9/16}
.carrousel[data-type="image"] .carte-media{aspect-ratio:3/4}
.carte-media img,
.carte-media iframe{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  border:0;
}
/* Voile : le texte est pose SUR le media, il faut de la lisibilite. */
.carte-voile{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
  transition:opacity .35s ease;
}
.carte.joue .carte-voile,
.carte.joue .carte-texte,
.carte.joue .carte-lire{opacity:0;pointer-events:none}
.carte-texte{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:clamp(16px,2.4vw,32px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
  color:#f2f2f2;
  pointer-events:none;
}
.carte-titre{
  font-weight:800;
  font-size:clamp(16px,1.8vw,28px);
  letter-spacing:.01em;
  line-height:1.1;
  text-transform:uppercase;
  text-shadow:0 2px 18px rgba(0,0,0,.6);
}
.carrousel[data-type="short"] .carte-titre{font-size:clamp(13px,1.2vw,17px)}
.carrousel[data-type="image"] .carte-titre{font-size:clamp(12px,1vw,14px);font-weight:600;letter-spacing:.08em;color:rgba(242,242,242,.85)}
/* Le bouton rond "LIRE" en texte tournant, pose au centre de la carte. */
/* Pastille reduite : a 104px elle masquait l'apercu du media. */
.carte-lire{
  position:absolute;
  left:50%;top:50%;
  width:clamp(44px,4.4vw,60px);
  height:clamp(44px,4.4vw,60px);
  margin:calc(-1 * clamp(44px,4.4vw,60px) / 2) 0 0 calc(-1 * clamp(44px,4.4vw,60px) / 2);
  border:0;
  border-radius:50%;
  background:rgba(12,13,14,.5);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#f2f2f2;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:transform .3s ease,background .3s ease,opacity .3s ease;
}
.carte-lire > svg.fleche{width:46%;height:46%}
.carte-lire:hover,.carte-lire:focus-visible{transform:scale(1.06);background:#f2f2f2;color:#0c0d0e}
.carte-lire:focus-visible{outline:2px solid #fff;outline-offset:4px}
.carte:not(.active) .carte-lire{opacity:0;pointer-events:none}
.carte-num{
  position:absolute;
  top:clamp(12px,1.6vw,20px);
  left:clamp(14px,1.8vw,22px);
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  color:#f2f2f2;
  /* Pose sur la miniature : une ombre le garde lisible sur une image
     claire, ou il tombait sous 3:1. */
  text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.6);
}
/* Une carte voisine reste cliquable : un clic la centre. */
.carte:not(.active){cursor:pointer}

/* Titre de la video pose SOUS la carte. Masque par defaut : sur grand
   ecran le titre reste sur l'image, il y a la place et c'est plus beau.
   Il n'apparait que sur telephone, ou la carte 16/9 est plate (voir la
   requete media 640px). La hauteur minimale evite que les fleches, juste
   dessous, ne sautent entre un titre d'une ligne et un titre de deux. */
.carrousel-legende{
  display:none;
  margin:0;
  max-width:32ch;
  min-height:2.5em;
  font-weight:800;
  font-size:17px;
  line-height:1.25;
  text-transform:uppercase;
  color:#f2f2f2;
  text-align:center;
  text-wrap:balance;
}

/* Fleches posees de part et d'autre de la carte active, a mi-hauteur, et
   a la couleur de la planete : elles se voient sur un media clair comme
   sur du noir, et disent ou l'on va sans occuper de place sous la carte. */
.carrousel{position:relative}
.carrousel-fleche{
  position:absolute;
  top:50%;
  z-index:3;
  width:clamp(46px,4vw,58px);
  height:clamp(46px,4vw,58px);
  margin-top:calc(-1 * clamp(46px,4vw,58px) / 2);
  border-radius:50%;
  border:1.5px solid var(--accent);
  background:rgba(12,13,14,.66);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:var(--accent);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.carrousel-fleche svg{width:44%;height:44%}
/* Posees juste en dehors de la carte active, ou collees aux bords quand
   l'ecran est trop etroit pour les loger a cote. */
.carrousel-prec{right:calc(50% + var(--carte) / 2 + clamp(10px,1.6vw,26px))}
.carrousel-suiv{left:calc(50% + var(--carte) / 2 + clamp(10px,1.6vw,26px))}
.carrousel-fleche:hover,.carrousel-fleche:focus-visible{
  background:var(--accent);
  color:#0c0d0e;
  transform:scale(1.08);
  box-shadow:0 0 26px color-mix(in srgb,var(--accent) 45%,transparent);
}
.carrousel-fleche:focus-visible{outline:2px solid #fff;outline-offset:3px}


/* --- reseaux --- */
.planet-socials h3{
  font-weight:900;
  font-style:italic;
  font-size:clamp(34px,7vw,120px);
  letter-spacing:-.01em;
  line-height:.92;
  text-transform:uppercase;
  /* 12ch cassait « Retrouve Kikoo World sur » en trois lignes dont la
     derniere ne portait que « SUR ». A 16ch le titre tient en deux lignes
     equilibrees de 320px a 1900px — et sur un ecran large mais bas
     (1900x800), la ligne economisee est ce qui empeche l'ecran de
     deborder. */
  max-width:16ch;
  text-wrap:balance;
  /* en vh et non en vw : sur un ecran large mais bas (1280x720) la
     somme des marges faisait deborder l'ecran de 12px */
  margin-bottom:clamp(28px,6.5vh,92px);
}
.planet-socials h3 em{color:var(--accent);font-style:inherit}
.reseaux{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(24px,3.5vw,56px);
  width:100%;
  max-width:1100px;
}
.reseaux-groupe{flex:1 1 300px;max-width:520px;min-width:0}
/* Avec trois groupes, sur une largeur intermediaire (768 a 1100px), deux
   tenaient sur la premiere ligne et le troisieme passait seul dessous,
   etire a 520px : ses boutons etaient plus larges que les autres. La
   largeur de bouton depend de celle du groupe (container query) : un
   groupe seul sur sa ligne doit donc garder la largeur d'un groupe
   accompagne. On borne chaque groupe a un tiers, ecarts deduits. */
/* Seulement au-dela de 1100px, la ou trois groupes tiennent cote a cote.
   En dessous, ils s'empilent et chacun prend toute la largeur : sans
   cette borne, un min-width de 300px les ecrasait a 93px de bouton sur
   telephone, alors qu'ils ont la place. */
/* Un ecran ne doit JAMAIS etre plus haut que la fenetre. Sous le
   defilement par ecran, la page se cale sur le haut de chaque ecran :
   ce qui depasse en dessous est inatteignable — mesure
   a 320x568, le pied restait cache 84px sous le bord. « Laisser le
   defilement finir la page » ne marche pas ici ; il faut faire tenir. */

/* Trois groupes cote a cote des 960px : sur 1024x700, les empiler
   faisait 145px de trop. A cette largeur les groupes font ~290px et
   leurs boutons ~90px, lisibles. */
@media (min-width:960px){
  .reseaux:has(> :nth-child(3)) .reseaux-groupe{
    flex-basis:calc((100% - 2 * clamp(24px,3.5vw,56px)) / 3);
    max-width:calc((100% - 2 * clamp(24px,3.5vw,56px)) / 3);
  }
}
/* Entre 640 et 1100px : trois groupes ne tiennent pas cote a cote mais
   deux le pourraient, laissant le troisieme seul et plus large. On les
   force en colonne : un par ligne, tous a la meme largeur. */
@media (min-width:641px) and (max-width:959px){
  .reseaux:has(> :nth-child(3)) .reseaux-groupe{flex-basis:100%;max-width:520px}
}
.reseaux-intitule{
  font-size:11px;
  font-weight:700;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(242,242,242,.66);
  margin-bottom:14px;
}
/* Largeur de bouton commune a tous les groupes. Sans elle, un groupe de
   quatre passait en 2x2 avec des boutons de 255px pendant que celui de
   trois gardait 167px : les deux blocs ne se ressemblaient plus. Les
   colonnes sont donc dimensionnees en dur et la grille est centree. */
/* --btn depend de la largeur du GROUPE, pas de celle de l'ecran : les
   groupes se mettent cote a cote des qu'il y a la place, et une largeur
   en vw debordait alors de leur colonne. La valeur est calculee sur trois
   colonnes — le groupe le plus fourni — pour que tous les boutons de la
   page aient la meme largeur, quel que soit leur nombre par groupe. */
.reseaux{--btn:clamp(92px,26vw,176px)}
.reseaux-groupe{container-type:inline-size}
@supports (container-type: inline-size){
  .planet-socials ul{--btn:min(176px, calc((100cqw - 20px) / 3))}
}
/* Flex et non grid, avec la largeur du bloc bornee au nombre de colonnes
   voulu : c'est ce qui centre la DERNIERE rangee quand elle est
   incomplete. En grille, cinq boutons sur trois colonnes laissaient les
   deux derniers colles a gauche, sous les trois premiers. */
.planet-socials ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  list-style:none;
  margin-inline:auto;
  width:min(100%, calc(var(--nb-cols,3) * var(--btn) + (var(--nb-cols,3) - 1) * 10px));
}
/* min-width:0 est indispensable : la taille minimale automatique d'un
   element flex vaut la largeur de son contenu, un libelle un peu long
   ferait donc grossir son seul bouton et les rangees ne s'aligneraient
   plus (mesure : 87 a 106px dans un meme groupe). */
/* display:flex : le bouton prend toute la hauteur de sa rangee. Un
   libelle sur deux lignes (« Apple Music ») ne fait plus un bouton plus
   haut que ses voisins, ce sont eux qui s'alignent. */
.planet-socials li{flex:0 0 var(--btn);min-width:0;display:flex}
/* Le nombre de colonnes evite les rangees incompletes : 4 liens se
   rangent en carre, pas en 3 + 1. */
.planet-socials ul[data-nb="1"]{--nb-cols:1}
.planet-socials ul[data-nb="2"]{--nb-cols:2}
.planet-socials ul[data-nb="3"]{--nb-cols:3}
.planet-socials ul[data-nb="4"]{--nb-cols:2}
.planet-socials ul[data-nb="5"]{--nb-cols:3}
.planet-socials ul[data-nb="6"]{--nb-cols:3}
/* Le bouton « Contact » a exactement la forme d'un lien reseau — meme
   pilule, meme largeur de colonne — et la couleur de la planete pour le
   distinguer : c'est une action, pas un compte. */
/* `.reseaux a` et non `.planet-socials a` : Retour et la planete
   suivante, en bas du meme ecran, sont aussi des liens desormais, et
   prendraient la forme d'un bouton reseau. */
.reseaux a,
.planet-socials .lien-contact{
  display:flex;
  /* Un <button> ne s'etire pas a la largeur de sa colonne comme un <a> :
     sa largeur automatique est celle de son contenu. Sans width:100% le
     bouton Contact faisait 101px la ou les liens en font 167. */
  width:100%;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:13px 14px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  color:#f2f2f2;
  text-decoration:none;
  font-weight:700;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:center;
  background:rgba(22,23,26,.5);
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.reseaux a:hover,.reseaux a:focus-visible,
.planet-socials .lien-contact:hover,.planet-socials .lien-contact:focus-visible{
  background:#f2f2f2;
  border-color:#f2f2f2;
  color:#0c0d0e;
  transform:translateY(-2px);
}
.planet-socials .lien-contact{
  font-family:inherit;
  cursor:pointer;
  color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  background:color-mix(in srgb,var(--accent) 8%,rgba(22,23,26,.5));
}
.planet-socials .lien-contact:hover,
.planet-socials .lien-contact:focus-visible{
  background:var(--accent);
  border-color:var(--accent);
  color:#0c0d0e;
}

/* ---------- indice de defilement ----------
   Il ne parait qu'a l'arrivee et disparait au premier geste : voir
   armerIndice dans app.js. En position fixe, donc sans aucun cout de
   hauteur dans les ecrans — certains n'ont que 59px de libre sur
   telephone. Pose en bas dans les deux sens : c'est la que l'oeil
   cherche une invitation a defiler, et c'est aussi la que le pouce
   arrive. La fleche, elle, pointe ou il reste quelque chose. */
.indice{
  position:fixed;
  left:50%;
  bottom:clamp(20px,4vh,44px);
  z-index:30;
  width:clamp(44px,4vw,54px);
  height:clamp(44px,4vw,54px);
  margin-left:calc(-1 * clamp(44px,4vw,54px) / 2);
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1.5px solid var(--accent,#fff);
  background:rgba(12,13,14,.7);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:var(--accent,#fff);
  cursor:pointer;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1),background .25s ease,color .25s ease;
}
.indice svg{width:44%;height:44%}
.indice.vu{
  opacity:1;
  transform:none;
  pointer-events:auto;
  animation:indice-respire 2.4s ease-in-out .5s infinite;
}
.indice:hover,.indice:focus-visible{background:var(--accent,#fff);color:#0c0d0e}
.indice:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* Un mouvement de 5px, dans le sens ou il faut aller : c'est le geste
   qu'on suggere, pas une decoration. */
@keyframes indice-respire{
  0%,100%{translate:0 0}
  50%{translate:0 5px}
}
.indice[data-vers="haut"].vu{animation-name:indice-respire-haut}
@keyframes indice-respire-haut{
  0%,100%{translate:0 0}
  50%{translate:0 -5px}
}
@media (prefers-reduced-motion:reduce){
  .indice.vu{animation:none}
}

/* ---------- rappel de l'adresse de contact ----------
   Apparait au clic sur « Contact », le temps que la messagerie s'ouvre.
   Sur un ordinateur sans messagerie configuree, un mailto ne produit
   rien : ce rappel est la pour que le visiteur reparte quand meme avec
   l'adresse. */
.rappel{
  position:fixed;
  left:50%;
  bottom:max(18px,env(safe-area-inset-bottom));
  transform:translate(-50%,14px);
  z-index:60;
  display:flex;
  align-items:center;
  gap:12px;
  max-width:min(calc(100vw - 28px),720px);
  padding:12px 12px 12px 18px;
  border:1px solid color-mix(in srgb,var(--accent,#fff) 40%,rgba(255,255,255,.16));
  border-radius:999px;
  background:rgba(14,15,17,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 16px 44px rgba(0,0,0,.6);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.2,1);
}
.rappel.vu{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.rappel-texte{
  margin:0;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(242,242,242,.6);
  white-space:nowrap;
}
/* flex:0 1 auto et non flex:1 : l'adresse doit s'afficher en entier, c'est
   toute la raison d'etre de ce rappel. Elle ne se rogne qu'en dernier
   recours, sur un ecran vraiment etroit. */
.rappel-adresse{
  flex:0 1 auto;
  min-width:0;
  border:0;
  padding:8px 14px;
  border-radius:999px;
  background:color-mix(in srgb,var(--accent,#fff) 14%,transparent);
  color:var(--accent,#f2f2f2);
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:background .2s ease,color .2s ease;
}
.rappel-adresse:hover,.rappel-adresse:focus-visible{background:var(--accent,#f2f2f2);color:#0c0d0e}
.rappel-fermer{
  flex:none;
  display:grid;
  place-items:center;
  width:30px;height:30px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:rgba(242,242,242,.55);
  cursor:pointer;
  transition:color .2s ease,background .2s ease;
}
.rappel-fermer svg{width:15px;height:15px}
.rappel-fermer:hover{color:#f2f2f2;background:rgba(255,255,255,.1)}
@media (max-width:520px){
  /* Sur telephone la phrase et l'adresse ne tiennent pas cote a cote. */
  .rappel{
    flex-wrap:wrap;
    justify-content:center;
    border-radius:18px;
    padding:14px 16px;
    row-gap:8px;
  }
  .rappel-texte{width:100%;text-align:center;white-space:normal}
  /* flex-grow a 0 : avec 1, l'adresse prenait toute la rangee et
     repoussait la croix de fermeture sur une ligne a elle. */
  .rappel-adresse{flex:0 1 auto;font-size:12.5px}
}
/* Le pied est colle a la navigation, et non a mi-distance des boutons :
   les deux ne forment qu'un seul appui en bas d'ecran. */
.planet-pied{
  margin-top:clamp(12px,2vh,26px);
  color:rgba(242,242,242,.62);
  font-size:11px;
  letter-spacing:.16em;
}
/* Nettement detache des boutons de reseaux : colle, on croyait que
   « Retour » et le nom de la planete suivante faisaient partie de la liste
   des comptes. Un filet et une marge franche les separent. */
/* Trois distances, pas une seule : le titre respire au-dessus des
   boutons, les boutons forment un bloc franc, et la navigation avec le
   pied se detachent nettement en bas. Colles a distance egale, les quatre
   groupes se lisaient comme un seul pave compact. Le filet est aussi plus
   large que les 520px d'origine : plus etroit que ce qu'il separe, il
   avait l'air d'un accident. */
.planet-end{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  width:min(100%,760px);
  margin-top:clamp(36px,9vh,124px);
  padding-top:clamp(22px,3.4vh,50px);
  border-top:1px solid rgba(255,255,255,.14);
}
.next-link{border-color:var(--accent);color:var(--accent);background:rgba(22,23,26,.5)}
.next-link:hover,.next-link:focus-visible{background:var(--accent);border-color:var(--accent);color:#000}

@media (max-width:640px){
  .planet-head{grid-template-columns:auto 1fr auto}
  .head-logo{display:none}
  /* 12px et non 11 : a 11px les pilules faisaient 37 a 39px de haut, sous
     le minimum tactile de 40. .back-link etait oublie et gardait la
     taille d'ordinateur a cote de la pilule suivante. */
  .pilule,.back-btn,.back-link,.next-link{padding:12px 15px;font-size:11px;letter-spacing:.1em}
  /* « Section suivante » se comprend a la fleche seule ; le nom de la
     planete suivante, lui, doit rester lisible. */
  .head-droite .next-link[data-action="suivante"] span{display:none}
  /* Sur telephone les cartes laissent depasser les voisines d'une bande
     visible : c'est ce qui dit qu'on peut balayer. */
  /* La largeur reste bornee par la HAUTEUR disponible, ici comme sur
     grand ecran. Sans ce troisieme terme, un telephone large mais court
     (640x800) affichait un Short de 330px de large, donc 587px de haut,
     et l'ecran debordait. Les couts fixes different par type : l'ecran
     video porte en plus le titre de la video et la rangee de fleches
     posees sous la carte, d'ou 380px contre 250px. */
  /* 74vw et non 80 : la bande visible d'une voisine vaut
     (largeur de piste - carte) / 2 - ecart. A 80vw elle tombait a 9px,
     on ne voyait plus qu'on peut balayer ; a 74vw elle fait 21px. */
  .carrousel{--carte:min(74vw, 980px, calc((100svh - 380px) * 16 / 9))}
  .carrousel[data-type="short"]{--carte:min(58vw, 330px, calc((100svh - 250px) * 9 / 16))}
  .carrousel[data-type="image"]{--carte:min(64vw, 560px, calc((100svh - 250px) * 3 / 4))}
  /* La carte occupe presque toute la largeur : les fleches ne peuvent pas
     tenir a cote. Elles sont centrees sur ses bords, a cheval, ce qui se
     lit comme un choix et non comme un chevauchement subi. */
  .carrousel-prec{right:auto;left:calc(50% - var(--carte) / 2 - clamp(46px,4vw,58px) / 2)}
  .carrousel-suiv{left:auto;right:calc(50% - var(--carte) / 2 - clamp(46px,4vw,58px) / 2)}

  /* ----- echelle du texte sur telephone -----
     Toutes les tailles sont ecrites clamp(plancher, valeur en vw,
     plafond). Sous 640px le terme en vw vaut toujours moins que le
     plancher : c'est donc le plancher qui s'applique partout, et il avait
     ete calibre pour un ecran de 320px. Les valeurs mobiles sont donc
     posees ici, explicitement, plutot qu'en tordant les clamps. */
  .planet-kicker{font-size:13px;letter-spacing:.2em;margin-bottom:20px}
  .planet-lead{font-size:15px;line-height:1.7;letter-spacing:.045em;margin-top:28px}
  /* Seul l'ecran video a de la place a reprendre : les ecrans Shorts et
     photos ont des cartes verticales qui remplissent deja la hauteur, un
     titre plus gros les faisait deborder (mesure : 685px sur un ecran de
     664 des que le titre passait a trois lignes). */
  .ecran-carrousel[data-media="video"] .section-titre{font-size:34px}
  .planet-socials h3{font-size:34px}

  /* Les distances de l'ecran reseaux sont reduites sur telephone : la
     hauteur y est comptee, et cet ecran etait deja le plus rempli des
     cinq. C'est sur grand ecran qu'il avait besoin de respirer. */
  .planet-socials h3{margin-bottom:clamp(20px,3.4vh,34px)}
  .planet-end{margin-top:clamp(26px,5vh,52px);padding-top:clamp(18px,2.6vh,26px)}
  .planet-pied{margin-top:clamp(10px,1.6vh,16px)}
  /* Trois groupes empiles : l'ecart entre groupes et l'intitule sont
     resserres. Ce qui manque encore sur un ecran bas est repris plus
     loin, dans la requete sur la hauteur. */
  .reseaux{gap:16px}
  .reseaux-intitule{margin-bottom:8px}

  /* ----- ecran video : le titre et les fleches descendent sous la carte -----
     Une carte 16/9 est plate en portrait : a 664px de haut d'ecran elle
     n'occupait que 145px, et le titre comme les fleches, poses SUR
     l'image, n'occupaient aucune hauteur propre. Les faire descendre
     remplit l'ecran avec du contenu reel au lieu de marge, degage la
     miniature et rend le titre lisible sans voile.
     Les Shorts et les photos gardent leurs fleches sur la carte : leurs
     cartes sont verticales, elles remplissent deja l'ecran, et une rangee
     de plus les ferait deborder. */
  .carrousel[data-type="video"]{
    display:grid;
    grid-template-columns:1fr auto auto 1fr;
    grid-template-areas:
      "piste   piste   piste piste"
      "legende legende legende legende"
      ".       prec    suiv  .";
    align-items:center;
    justify-items:center;
    row-gap:clamp(14px,2.2vh,22px);
    column-gap:18px;
  }
  .carrousel[data-type="video"] .carrousel-piste{grid-area:piste;width:100%}
  .carrousel[data-type="video"] .carrousel-legende{grid-area:legende;display:block}
  .carrousel[data-type="video"] .carrousel-prec{grid-area:prec}
  .carrousel[data-type="video"] .carrousel-suiv{grid-area:suiv}
  /* Elles quittent le flottement et reprennent leur place dans la grille :
     left / right / margin-top ci-dessus ne s'appliquent plus. */
  .carrousel[data-type="video"] .carrousel-fleche{position:static;margin-top:0}
  /* Le titre est sorti de l'image : le voile n'a plus rien a proteger. */
  .carrousel[data-type="video"] .carte-texte{display:none}
  .carrousel[data-type="video"] .carte-voile{
    background:linear-gradient(to top, rgba(0,0,0,.34) 0%, rgba(0,0,0,.10) 55%, transparent 100%);
  }
}

/* ============ FOOTER ============ */
.site-footer{
  position:relative;
  z-index:1;
  border-top:1px solid rgba(255,255,255,.12);
  padding:24px 20px calc(24px + env(safe-area-inset-bottom));
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 24px;
  max-width:960px;
  width:100%;
  margin:0 auto;
}
.site-footer p{
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.footer-star{width:12px;color:rgba(255,255,255,.35)}
.footer-star svg{display:block;width:100%}

/* ============ GALERIES « images + texte » ============ */
/* La mise en page suit le nombre d'images, pour qu'aucune ne soit
   inutilement petite :
     1 ou 2 images -> cote a cote avec le texte (cote pilote par `cote`) ;
     3 ou 4 images -> le texte passe au-dessus, les images prennent toute
     la largeur utile. A trois images dans une demi-colonne, chacune
     tomberait sous 160px. */
.galerie{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(24px,3.5vw,48px);
  align-items:center;
  width:100%;
}
/* Au-dela de deux images, le texte passe au-dessus et les images
   prennent toute la largeur : a trois dans une demi-colonne, chacune
   tomberait sous 160px. */
.galerie:not([data-nb="1"]):not([data-nb="2"]){
  grid-template-columns:minmax(0,1fr);
  gap:clamp(20px,2.6vw,30px);
  align-items:start;
}
.galerie:not([data-nb="1"]):not([data-nb="2"]) .galerie-texte{order:-1;max-width:66ch}
/* Images a droite, texte a gauche. On inverse par l'ordre visuel :
   le DOM garde images-puis-texte, donc l'ordre de lecture reste bon. */
.galerie.cote-droite .galerie-images{order:2}
.galerie.cote-droite .galerie-texte{order:1}

/* Flex centre plutot que grille : avec un nombre d'images qui ne tombe
   pas juste (5 images sur 3 colonnes), une grille laisse la derniere
   rangee collee a gauche. Centree, elle se lit comme voulue. Les
   vignettes gardent toutes la meme taille. */
.galerie-images{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}
.galerie-item{width:calc(33.333% - 8px)}
/* Une image occupe toute la largeur ; deux se partagent la colonne ;
   quatre se rangent en carre plutot qu'en ligne de quatre. */
.galerie[data-nb="1"] .galerie-item{width:100%}
.galerie[data-nb="2"] .galerie-item{width:calc(50% - 6px)}
.galerie[data-nb="4"] .galerie-item{width:calc(50% - 6px)}

.galerie-item{margin:0;min-width:0}

.galerie-vignette{
  display:block;
  width:100%;
  padding:0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  overflow:hidden;
  background:#0a0a0a;
  cursor:zoom-in;
  position:relative;
  /* 3/4 : le format de quatre des cinq photos, donc aucun recadrage
     pour elles. La visionneuse, elle, affiche l'image entiere. */
  aspect-ratio:3/4;
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.galerie-vignette img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.galerie-vignette:hover,
.galerie-vignette:focus-visible{
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(0,0,0,.5);
  outline:none;
}
.galerie-vignette:hover img,
.galerie-vignette:focus-visible img{transform:scale(1.05)}

.galerie-item figcaption{
  margin-top:8px;
  font-size:12.5px;
  font-weight:500;
  line-height:1.5;
  /* Assez opaque pour rester lisible quand une planete de fond passe
     derriere : le fond du site est anime, pas uni. */
  color:rgba(255,255,255,.62);
  text-shadow:0 1px 6px rgba(0,0,0,.85);
}

.galerie-texte p{
  font-size:15.5px;
  font-weight:500;
  line-height:1.75;
  color:rgba(255,255,255,.78);
  margin-bottom:14px;
}

/* ============ VISIONNEUSE (image en grand) ============ */
.visionneuse{
  border:0;
  padding:0;
  margin:auto;
  width:min(100vw,1400px);
  height:100dvh;
  max-width:100vw;
  max-height:100dvh;
  background:transparent;
  overflow:hidden;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(4px,2vw,20px);
  padding:clamp(12px,3vw,40px);
}
.visionneuse:not([open]){display:none}
.visionneuse::backdrop{
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(6px);
}
.visionneuse .v-scene{
  margin:0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  max-height:100%;
}
.visionneuse .v-scene img{
  max-width:100%;
  max-height:calc(100dvh - 140px);
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:10px;
  display:block;
  box-shadow:0 24px 80px rgba(0,0,0,.7);
}
.visionneuse figcaption{
  font-size:13.5px;
  font-weight:500;
  color:rgba(255,255,255,.66);
  text-align:center;
  max-width:60ch;
}

.visionneuse .v-nav,
.visionneuse .v-fermer{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.visionneuse .v-nav svg,
.visionneuse .v-fermer svg{width:22px;height:22px}
.visionneuse .v-nav:hover,
.visionneuse .v-fermer:hover,
.visionneuse .v-nav:focus-visible,
.visionneuse .v-fermer:focus-visible{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.4);
  transform:scale(1.06);
  outline:none;
}
.visionneuse .v-fermer{
  position:fixed;
  top:clamp(12px,3vw,28px);
  right:clamp(12px,3vw,28px);
  z-index:2;
}
.visionneuse .v-nav[hidden]{display:none}

/* ============ RESPONSIVE ============ */
@media (max-width:820px){
  /* En colonne, le texte passe toujours au-dessus des images : on lit
     l'intention avant de regarder. */
  .galerie{grid-template-columns:1fr;gap:18px}
  .galerie .galerie-texte{order:-1;max-width:none}
  .galerie .galerie-images{order:0}
}
@media (max-width:480px){
  .hero{padding:44px 16px 52px}
  /* Le ciel est cadre sur le viewport : a diametre egal, une planete
     mange une bien plus grande part d'un ecran de telephone. */
  .bg-planet{width:calc(var(--t,30px) * .55);height:calc(var(--t,30px) * .55)}
  .galaxy-list{gap:9px}
  /* max-width aligne sur la largeur d'une colonne : le dernier bouton,
     seul sur sa rangee, garde la taille des autres au lieu de s'etirer. */
  .galaxy-list li{flex-basis:136px;max-width:176px}
  .galaxy-list button,.galaxy-list a{min-height:46px;padding:11px 12px;font-size:12px;letter-spacing:.1em}
  .media-liste{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  .carte-titre{font-size:12.5px}
  .planet-socials ul{gap:8px}
  /* Contact compris : il gardait sa taille d'ordinateur (12px, 50px de
     haut) au milieu de voisins en 11px et 46px. */
  .reseaux a,.planet-socials .lien-contact{font-size:11px;letter-spacing:.06em;padding:12px 8px;min-height:46px}
  .carte-play svg{width:17px;height:17px}
  .visionneuse .v-nav,.visionneuse .v-fermer{width:40px;height:40px}
  .galerie-images{gap:8px}
  /* Deux par rangee sur telephone, quel que soit le nombre d'images. */
  .galerie-item{width:calc(50% - 5px)}
}

/* Ecran tres court (320x568 et assimiles) : l'ecran reseaux est le seul
   des cinq a ne pas tenir. La condition porte sur la HAUTEUR, pas sur la
   largeur — c'est de hauteur qu'il manque, et un 390x844 n'a aucune raison
   d'y perdre son titre. On reprend les couts fixes plutot que de rogner le
   contenu, et la regle ne vise que cet ecran : les ecrans-carrousels ont
   besoin de leurs marges fixes pour le calcul de la largeur de carte. */
@media (max-width:640px) and (max-height:700px){
  .planet-socials{padding-top:70px;padding-bottom:40px}
  /* 26px et non 30 : a 30px, « Retrouve Kikoo World sur » tombait en trois
     lignes a 320px et venait se serrer sur l'intitule du premier groupe. */
  .planet-socials h3{font-size:26px;margin-bottom:18px}
  .reseaux{gap:12px}
  .reseaux-intitule{margin-bottom:6px;font-size:10px}
  /* A trois groupes sur un ecran bas, c'est la hauteur des boutons qui
     compte : 44px reste la taille tactile minimale, on s'y tient. Et
     l'ecart entre rangees se resserre. */
  .planet-socials:has(.reseaux > :nth-child(3)) .reseaux a,
  .planet-socials:has(.reseaux > :nth-child(3)) .lien-contact{min-height:40px;padding:9px 8px}
  .planet-socials:has(.reseaux > :nth-child(3)) ul{gap:7px}
  .planet-socials:has(.reseaux > :nth-child(3)) .planet-end{margin-top:18px;padding-top:14px}
  .planet-socials:has(.reseaux > :nth-child(3)) .planet-pied{margin-top:8px}
  .site-footer{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .starfield.warping{transform:none;opacity:1}
  .reveal{opacity:1;transform:none}
}


/* ============ PAGE 404 ============
   Ces regles vivaient dans un <style> de 404.html. Elles sont ici
   pour qu'aucune page n'ait de style inline : la CSP du site
   interdit l'inline, c'est ce qui protege d'une injection. */
/* Cette page ne charge pas app.js : elle n'a ni vues, ni transition, ni
   carrousel. Elle emprunte seulement la police, les couleurs et les
   boutons de la feuille du site, et pose ici le peu qui lui est propre. */
.err{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:clamp(72px,10vh,120px) var(--pad) clamp(56px,8vh,100px);
  position:relative;
  z-index:1;
}
.err-code{
  font-weight:900;
  font-style:italic;
  font-size:clamp(88px,20vw,240px);
  line-height:.86;
  letter-spacing:-.02em;
  color:#f2f2f2;
  text-shadow:0 0 .18em rgba(255,255,255,.28), 0 0 .55em rgba(255,255,255,.14);
}
.err-titre{
  font-weight:800;
  font-size:clamp(20px,3vw,34px);
  line-height:1.15;
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin-top:clamp(20px,3vh,36px);
  text-wrap:balance;
}
.err-texte{
  margin-top:16px;
  max-width:46ch;
  font-size:clamp(14px,1.2vw,17px);
  line-height:1.65;
  color:rgba(242,242,242,.66);
  text-wrap:pretty;
}
.err-intitule{
  margin-top:clamp(34px,6vh,72px);
  font-size:11px;
  font-weight:700;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(242,242,242,.45);
}
.err .galaxy-list{margin-top:16px;animation:none}
.err-accueil{margin-top:clamp(28px,4vh,48px)}