/* Mix, refonte du 27/09/2026 : une seule nuit pour tout le site.
   Le ciel (dégradé fixe, étoiles, aurores) vient de /claude/. Tout ce qu'on
   touche (iPhone titane, bouton dégradé, cartes, ressorts) vient de /codex/.
   Feuille commune aux 10 pages : jetons, ciel, en-tête, pied, boutons. */
@font-face{font-family:Newsreader;src:url('/fonts/newsreader-latin.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:Newsreader;src:url('/fonts/newsreader-italic-latin.woff2') format('woff2');font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:Lexend;src:url('/fonts/lexend-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Amiri;src:url('/fonts/amiri-arabic.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  --nuit-0:#0b0a1a;
  --nuit-1:#14112c;
  --nuit-2:#1b1738;
  --texte:#f3effa;
  --texte-2:#b3adcf;
  --lilas:#c8b4f0;
  --or:#e8c07d;
  --menthe:#7fd8b8;
  --rose:#d87da8;
  --bleu:#9cc8d8;
  --mauve:#cf83b6;
  --degrade:linear-gradient(135deg,#a8b4e0 0%,#c8b4f0 45%,#d87da8 100%);
  --verre:rgba(200,180,240,.06);
  --bord:rgba(200,180,240,.14);
  --filet:rgba(200,180,240,.10);
  --serif:Newsreader,Georgia,"Times New Roman",serif;
  --sans:Lexend,system-ui,-apple-system,"Segoe UI",sans-serif;
  --gouttiere:40px;
  --large:1160px;
  --motion-out:cubic-bezier(.16,1,.3,1);
  --ease:cubic-bezier(.22,.75,.22,1);
  color-scheme:dark;
}
@view-transition{navigation:auto}
*,*::before,*::after{box-sizing:border-box}
/* Le fond plein vit sur html seulement : le ciel fixe passe au-dessus, sous
   tout le contenu, et aucune section ne porte de fond propre. */
html{background:var(--nuit-0);scroll-behavior:smooth;scroll-padding-top:140px;-webkit-text-size-adjust:100%}
body{margin:0;background:transparent;color:var(--texte);font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
a{color:var(--lilas);text-underline-offset:4px;text-decoration-thickness:1px}
img{max-width:100%;height:auto;display:block}
svg{display:block}
figure{margin:0}
h1,h2,h3,p{margin:0}
h1,h2{font-family:var(--serif);font-weight:450;line-height:1.05;letter-spacing:-.035em;text-wrap:balance;color:var(--texte)}
h3{font-family:var(--serif);font-weight:500;color:var(--texte)}
em{font-style:italic;font-weight:400;color:var(--lilas)}
p{color:var(--texte-2)}
::selection{background:rgba(200,180,240,.3);color:var(--texte)}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--lilas);outline-offset:4px;border-radius:6px}
.visuellement-cache{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;z-index:2000;top:56px;left:16px;padding:12px 20px;background:var(--texte);color:var(--nuit-0);border-radius:10px;text-decoration:none;transform:translateY(-240%)}
.skip-link:focus{transform:none}
.bande{width:min(var(--large),calc(100% - 2 * var(--gouttiere)));margin-inline:auto}

/* ---------- Le ciel ---------- */
.ciel-fond,#ciel,.aurore{position:fixed;inset:0;z-index:-1;pointer-events:none}
.ciel-fond{background:radial-gradient(120% 62% at 50% -8%,#332a63 0%,#211c48 26%,#15122f 58%,#0b0a1a 100%)}
#ciel{width:100%;height:100%}
.aurore{inset:auto;width:68vmax;height:68vmax;border-radius:50%}
.aurore-a{top:-28vmax;left:-18vmax;background:radial-gradient(circle,#6f55c9 0%,transparent 62%);opacity:.16}
/* Le lavis : une seule aurore dont la teinte suit la partie lue. La forme est
   un masque, la couleur un background-color : la transition est native. */
.aurore-b{top:6vmax;right:-30vmax;width:84vmax;height:72vmax;background-color:var(--lilas);-webkit-mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.45) 45%,transparent 100%);mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.45) 45%,transparent 100%);opacity:.12;transition:background-color 1.1s ease}
@media (prefers-reduced-motion:no-preference) and (min-width:880px){
  html.js .aurore-a{animation:aurore-glisse 64s ease-in-out infinite alternate}
  html.js .aurore-b{animation:aurore-glisse 88s ease-in-out infinite alternate-reverse}
}
@keyframes aurore-glisse{to{transform:translate3d(-7vmax,6vmax,0) scale(1.1)}}

/* ---------- En-tête ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(11,10,26,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--filet)}
.header-inner{width:min(1240px,calc(100% - 2 * var(--gouttiere)));margin:auto;display:flex;align-items:center;gap:22px;min-height:72px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--texte);text-decoration:none;font:500 26px/1 var(--serif);letter-spacing:-.04em;flex:none}
.brand-lune{width:26px;height:26px;color:var(--lilas);flex:none}
.main-nav{margin-left:auto;position:relative}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{position:relative;color:var(--texte-2);text-decoration:none;font-size:14px;padding-block:6px}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--texte)}
.nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--lilas);transform:scaleX(0);transform-origin:left;transition:transform .2s var(--motion-out)}
.nav-links a:hover::after,.nav-links a:focus-visible::after,.nav-links a[aria-current]::after{transform:scaleX(1)}
.nav-toggle{display:none;align-items:center;gap:6px;color:var(--texte);background:transparent;border:0;padding:8px 6px;font-size:13px;min-height:40px}
.nav-toggle span{font-size:19px;line-height:1;transition:transform .2s var(--motion-out)}
.main-nav[data-open=true] .nav-toggle span{transform:rotate(45deg)}

/* Bouton pause (Codex) */
.motion-toggle{visibility:hidden;display:inline-grid;place-items:center;width:36px;height:36px;flex:0 0 36px;padding:0;border:1px solid rgba(200,180,240,.4);border-radius:50%;color:var(--lilas);background:transparent;transition:background .16s,color .16s}
html[data-motion] .motion-toggle{visibility:visible}
.motion-toggle svg{grid-area:1/1;width:16px;height:16px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6}
.motion-toggle .motion-play-icon{display:none}
.motion-toggle[aria-pressed=true] .motion-play-icon{display:block}
.motion-toggle[aria-pressed=true] .motion-pause-icon{display:none}
.motion-toggle:hover{background:#2a2346;color:var(--texte)}
.motion-toggle:disabled{cursor:default}
.motion-toggle:disabled:not([data-system-reduced]){visibility:hidden}

/* ---------- Boutons ---------- */
.button,.bouton{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:54px;padding:14px 26px;border-radius:100px;text-decoration:none;font:500 15px/1.2 var(--sans);border:1px solid transparent;transition:transform .3s var(--ease),box-shadow .2s,background-color .2s,border-color .2s,color .2s}
.button svg,.text-link svg{width:20px;height:20px;flex:none}
/* L'unique action principale d'un écran : le dégradé de marque. */
.button-plein{color:var(--nuit-0);background:var(--degrade) #c8b4f0;border-color:#c8b4f0;box-shadow:inset 0 1px 0 #ffffff70,0 4px 22px #c8b4f017}
.button-contour{color:var(--texte);background:transparent;border-color:rgba(200,180,240,.5)}
.button-contour:hover{border-color:var(--lilas);background:rgba(200,180,240,.08)}
.button-small{min-height:40px;padding:8px 16px;font-size:13px;gap:10px}
.button-small svg{width:16px;height:16px}
.text-link{display:inline-flex;align-items:center;gap:12px;color:var(--texte);text-decoration:none;font-size:15px;border-bottom:1px solid rgba(200,180,240,.55);padding-bottom:4px;width:fit-content}
.text-link:hover{border-bottom-color:var(--lilas)}
.text-link svg{width:18px;height:18px;transition:transform .2s}
@media (hover:hover) and (pointer:fine){
  .button:hover,.bouton:hover{transform:translateY(-2px)}
  .button-plein:hover{box-shadow:inset 0 1px 0 #ffffff99,0 7px 28px #c8b4f030}
  .text-link:hover svg{transform:translateX(4px)}
}
.button:active,.bouton:active,.motion-toggle:active{transform:scale(.97)}

/* ---------- Pied ---------- */
.pied{border-top:1px solid var(--filet);margin-top:40px}
.pied-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:48px;padding-block:40px 48px}
.pied-marque{display:grid;gap:8px}
.pied-marque .brand{font-size:20px;gap:9px}
.pied-marque .brand-lune{width:20px;height:20px}
.pied .signature{font-size:13px;color:var(--texte-2);max-width:320px;text-wrap:pretty}
.pied nav{display:flex;flex-wrap:wrap;gap:12px 26px;max-width:620px;justify-content:flex-end;padding-top:2px}
.pied nav a{color:var(--texte-2);text-decoration:none;font-size:14px;min-height:28px;display:inline-flex;align-items:center}
.pied nav a:hover{color:var(--texte);text-decoration:underline}

/* ---------- Retour en haut (Claude, validé le 31/08) ---------- */
.haut{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:90;display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid rgba(200,180,240,.3);border-radius:50%;background:rgba(18,16,43,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--texte-2);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s var(--motion-out),transform .3s var(--motion-out),visibility .3s,color .2s}
.haut svg{width:20px;height:20px}
.haut[data-vu=oui]{opacity:1;visibility:visible;transform:none}
.haut:hover{color:var(--texte)}

/* ---------- Pause et moins de mouvement ---------- */
html[data-motion=paused] *,html[data-motion=paused] *::before,html[data-motion=paused] *::after{animation-play-state:paused!important;transition:none!important;scroll-behavior:auto!important}
html[data-motion=paused]{scroll-behavior:auto}
[data-scroll-actor]{transition:none}
html[data-motion=paused] [data-scroll-actor]{transform:none!important;opacity:1!important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-scroll-actor]{transform:none!important;opacity:1!important}
  .button:hover,.bouton:hover{transform:none}
}
@media (hover:none),(pointer:coarse){.button:hover,.bouton:hover,.text-link:hover svg{transform:none}}

/* ---------- Écrans moyens et téléphone ---------- */
@media (max-width:1100px){.nav-links{gap:20px}.header-inner{gap:16px}}
@media (max-width:880px){:root{--gouttiere:28px}}
@media (max-width:760px){
  html{scroll-padding-top:124px}
  .header-inner{min-height:60px;gap:10px}
  .brand{font-size:23px;gap:8px}
  .brand-lune{width:22px;height:22px}
  .nav-toggle{display:inline-flex}
  .main-nav:not([data-ready]) .nav-toggle{display:none}
  .main-nav[data-ready]{position:static}
  .main-nav[data-ready] .nav-links{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;align-items:stretch;gap:0;padding:10px 20px 16px;background:#100e25;border-bottom:1px solid var(--bord);box-shadow:0 18px 30px rgba(5,4,14,.5)}
  .main-nav[data-ready][data-open=true] .nav-links{display:flex}
  .main-nav[data-ready] .nav-links a{font-size:16px;padding:12px 4px;border-bottom:1px solid var(--filet)}
  .main-nav[data-ready] .nav-links a:last-child{border-bottom:0}
  .main-nav[data-ready] .nav-links a::after{display:none}
  .main-nav:not([data-ready]){order:3;width:100%}
  .main-nav:not([data-ready]) .nav-links{flex-wrap:wrap;gap:6px 18px;padding-bottom:8px}
  .header-inner{flex-wrap:wrap}
  .motion-toggle{width:34px;height:34px;flex-basis:34px}
  .header-inner>.button-small{font-size:12px;padding:7px 12px;min-height:38px;gap:6px}
  .header-inner>.button-small svg{width:14px;height:14px}
  .pied-inner{flex-direction:column;gap:22px;padding-block:32px 40px}
  .pied nav{justify-content:flex-start;gap:6px 22px}
}
@media (max-width:650px){:root{--gouttiere:20px}}
@media (max-width:480px){
  .header-inner{gap:8px}
  .brand{font-size:21px;gap:7px}
  .brand-lune{width:20px;height:20px}
  .nav-toggle{padding-inline:4px;font-size:13px;gap:4px}
  .motion-toggle{width:32px;height:32px;flex-basis:32px}
  .header-inner>.button-small{font-size:12px;padding-inline:11px}
  .header-inner>.button-small svg{display:none}
}
@media (max-width:370px){
  .header-inner{gap:5px}
  .brand{font-size:19px;gap:5px}
  .brand-lune{width:18px;height:18px}
  .nav-toggle{font-size:12px}
  .header-inner>.button-small{font-size:11px;padding-inline:9px}
}

/* ---------- Impression : une seule feuille, blanc et encre ---------- */
@media print{
  .ciel-fond,#ciel,.aurore,.haut,.version-switch,.motion-toggle,.main-nav,.site-header .button,.formulaire,.hero-actions,.skip-link{display:none!important}
  html,body{background:#fff!important;color:#111!important}
  .site-header{position:static;background:#fff;border-bottom:1px solid #ccc;-webkit-backdrop-filter:none;backdrop-filter:none}
  .brand,h1,h2,h3,strong,em{color:#000!important}
  p,li,.maj{color:#1a1a1a!important}
  a{color:#000!important}
  main a[href^="http"]::after,main a[href^="mailto"]::after{content:" (" attr(href) ")";font-size:.85em;word-break:break-all}
  [data-scroll-actor]{transform:none!important;opacity:1!important}
}

/* 29/09 : les comptes de LunaCycle, sous la marque du pied. */
.pied .reseaux{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start;max-width:none;padding-top:8px}
.pied .reseaux a{width:44px;height:44px;min-height:0;justify-content:center;border-radius:50%;border:1px solid var(--filet);color:var(--texte-2);transition:color .2s ease,border-color .2s ease,transform .16s cubic-bezier(.23,1,.32,1)}
.pied .reseaux a:hover{color:var(--texte);border-color:currentColor;text-decoration:none}
.pied .reseaux a:active{transform:scale(.94)}
.pied .reseaux svg{width:18px;height:18px;fill:currentColor}
@media (prefers-reduced-motion:reduce){.pied .reseaux a{transition:none}}