/* Police unique auto-hébergée : Onest (variable, poids 100-900, sans italique).
   Les deux fichiers .woff2 doivent être placés dans /fonts/ à la racine du site
   (voir procédure de téléchargement). Tant qu'ils n'y sont pas, le navigateur
   bascule proprement sur la pile de secours système grâce à font-display:swap. */
@font-face{
  font-family:'Onest';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/onest-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Onest';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/onest-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  color-scheme:light;
  --bg:#F2F6FF; --bg2:#EDF4FF; --bg3:#F8F3EE;
  --wash1:rgba(234,164,122,.30); --wash2:rgba(143,175,159,.18);
  --ink:#111C3D; --muted:#5B6786;
  --dune:#EAA47A; --lichen:#8FAF9F; --techblue:#8BB0FF;
  --line:rgba(17,28,61,.14);
  --surface:rgba(255,255,255,.28);
  --surface-strong:rgba(255,255,255,.48);
  --surface-border:rgba(255,255,255,.72);
  --glass-highlight:rgba(255,255,255,.55);
  --shadow:0 24px 70px rgba(54,79,126,.12);
  --contact-1:rgba(17,28,61,.96); --contact-2:rgba(37,59,103,.96);
  --contact-ink:#F2F6FF; --contact-muted:#C9D3E8;
  --transition:900ms cubic-bezier(.22,.61,.36,1);
}
:root[data-theme="night"]{
  color-scheme:dark;
  --bg:#09152E; --bg2:#0D2041; --bg3:#111D39;
  --wash1:rgba(234,164,122,.13); --wash2:rgba(139,176,255,.15);
  --ink:#E8F0FF; --muted:#AABBD9;
  --dune:#F0B58D; --lichen:#9CC6BC; --techblue:#9FC3FF;
  --line:rgba(214,230,255,.18);
  --surface:rgba(153,190,255,.075);
  --surface-strong:rgba(153,190,255,.13);
  --surface-border:rgba(207,228,255,.22);
  --glass-highlight:rgba(214,232,255,.16);
  --shadow:0 28px 90px rgba(0,0,0,.30);
  --contact-1:rgba(8,19,43,.96); --contact-2:rgba(26,55,103,.96);
  --contact-ink:#E8F0FF; --contact-muted:#B8C9E7;
}
:root[data-theme="day"]{ color-scheme:light; }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  position:relative;
  isolation:isolate;
  margin:0;
  color:var(--ink);
  background:linear-gradient(135deg,var(--bg),var(--bg2) 48%,var(--bg3));
  transition:background var(--transition),color var(--transition);
  font-family:'Onest',system-ui,sans-serif;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
a:focus-visible, button:focus-visible{outline:2px solid var(--techblue); outline-offset:3px; border-radius:4px}
.wrap{width:min(1180px, calc(100% - 64px)); margin:auto; position:relative; z-index:1}
h1,h2{font-family:'Onest',system-ui,sans-serif; font-weight:600; letter-spacing:-.03em; margin:0}
blockquote{font-family:'Onest',system-ui,sans-serif}

/* nav */
.site-header{height:104px; display:flex; align-items:center; justify-content:space-between}
.brand-logo{width:52px;height:52px;display:block;object-fit:contain;flex:0 0 auto;}
.brand{display:flex; align-items:baseline; gap:12px}
.nav-cta{
  font-size:13px; padding:10px 20px; border:1px solid var(--line); border-radius:100px;
  transition:background .3s, border-color .3s;
}
.nav-cta:hover{background:var(--surface); border-color:var(--surface-border)}


.theme-control{display:flex;align-items:center;gap:9px;margin-left:auto;margin-right:18px}
.theme-button{appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:9px 13px;font:inherit;font-size:11px;letter-spacing:.04em;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background var(--transition),border-color var(--transition),color var(--transition)}
.theme-button:hover{background:var(--surface-strong);border-color:var(--surface-border)}
.theme-symbol{font-size:14px;line-height:1}

body::before{content:"";position:fixed;inset:0;z-index:-4;pointer-events:none;background:radial-gradient(circle at 8% 12%,var(--wash1),transparent 27%),radial-gradient(circle at 92% 28%,var(--wash2),transparent 30%),radial-gradient(circle at 48% 88%,rgba(139,176,255,.12),transparent 32%);}
.ambient{position:fixed;z-index:-3;pointer-events:none;border-radius:50%;filter:blur(12px);mix-blend-mode:multiply;opacity:.72;will-change:transform;contain:layout paint;}
.ambient-one{width:42vw;height:42vw;left:-18vw;top:24vh;background:radial-gradient(circle,rgba(234,164,122,.24),transparent 68%);animation:ambientDriftOne 22s ease-in-out infinite alternate;}
.ambient-two{width:38vw;height:38vw;right:-14vw;top:76vh;background:radial-gradient(circle,rgba(143,175,159,.22),transparent 68%);animation:ambientDriftTwo 27s ease-in-out infinite alternate;}
/* ambient-three est positionné en fixed avec top:150vh : il tombe donc toujours hors du viewport visible
   et n'a jamais été rendu à l'écran. On le désactive (display:none) pour supprimer un calque de flou +
   une animation infinie qui tournaient dans le vide, sans le moindre impact visuel. */
.ambient-three{display:none;}
@keyframes ambientDriftOne{to{transform:translate(9vw,8vh) scale(1.12)}}
@keyframes ambientDriftTwo{to{transform:translate(-8vw,-10vh) scale(1.16)}}
@keyframes ambientDriftThree{to{transform:translate(5vw,-7vh) scale(1.1)}}
@media (prefers-reduced-motion:reduce){.ambient-one,.ambient-two,.ambient-three{animation:none}}

/* Mode nuit : on retire mix-blend-mode:multiply, qui forçait le navigateur à
   recomposer ces halos avec tout ce qu'il y a en dessous à chaque frame, en
   continu, tant que le thème nuit est actif. Sur un fond aussi sombre,
   "multiply" écrase presque toute la couleur (elle tend vers le noir) : le
   halo réel est donc déjà très ténu. On reproduit ce même effet discret avec
   un mélange normal à opacité très réduite, sans le coût de recomposition. */
:root[data-theme="night"] .ambient-one{
  background: radial-gradient(circle, rgba(234,164,122,.05), transparent 68%);
  mix-blend-mode: normal;
  opacity: .55;
}
:root[data-theme="night"] .ambient-two{
  background: radial-gradient(circle, rgba(143,175,159,.055), transparent 68%);
  mix-blend-mode: normal;
  opacity: .55;
}

/* Pause des animations décoratives quand l'onglet est masqué, ou quand un bloc
   (sphère, cartes vitrées, panneau "Repères") sort du viewport. Purement une
   économie de calcul : dès que l'élément redevient visible ou que l'onglet
   reprend le focus, l'animation repart exactement où elle en était — aucun
   changement de rendu pour la personne qui regarde le site. */
.tab-hidden *,
.is-offscreen,
.is-offscreen *{
  animation-play-state:paused !important;
}

/* hero */
.hero{
  min-height:calc(100vh - 104px); display:grid; grid-template-columns:1.05fr 1fr;
  align-items:center; gap:40px; padding:20px 0 90px;
}
.hero h1{font-size:clamp(64px,10vw,168px); line-height:.86; margin:22px 0 30px}
.hero h1 .dot{color:var(--dune)}
.hero-text .lead{font-size:19px; line-height:1.7; color:var(--muted); max-width:440px; margin:0 0 14px}
.hero-text .lead strong{color:var(--ink); font-weight:600}
.hero-scroll{display:inline-flex;align-items:center;gap:10px;margin-top:28px;color:var(--muted);text-decoration:none;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.hero-scroll .scroll-arrow{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;font-size:16px;animation:scrollHint 2.2s ease-in-out infinite}
.hero-scroll:hover{color:var(--ink)}
@keyframes scrollHint{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(5px);opacity:1}}
.hero-kicker{font-size:14px; color:var(--muted)}

.hero-visual{position:relative; height:520px}
.hero-visual svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.sphere{filter:drop-shadow(0 30px 60px rgba(54,79,126,.22))}
.orbit{fill:none; stroke:var(--line); stroke-width:1}
.orbit-a{animation:spin 54s linear infinite; transform-origin:240px 232px; will-change:transform}
.orbit-b{animation:spin-rev 70s linear infinite; transform-origin:240px 232px; will-change:transform}
.node{filter:drop-shadow(0 0 0 rgba(0,0,0,0))}
.node-pulse{animation:pulse 3.4s ease-in-out infinite}
.node-pulse.delay{animation-delay:1.1s}
.node-pulse.delay2{animation-delay:2.1s}
.dataflow-dot{animation:dataflow 6.5s ease-in-out infinite}
.bars rect{transform-origin:bottom; animation:bar 2.6s ease-in-out infinite; will-change:transform}
.bars rect:nth-child(2){animation-delay:.15s}
.bars rect:nth-child(3){animation-delay:.3s}
.bars rect:nth-child(4){animation-delay:.45s}
.bars rect:nth-child(5){animation-delay:.6s}

.glass-note{
  position:absolute; left:0; bottom:6%; max-width:230px; padding:18px 20px;
  border:1px solid var(--surface-border); border-radius:18px;
  background:var(--surface);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow); font-size:13px; color:var(--muted); line-height:1.6;
}
.glass-note strong{display:block; color:var(--ink); margin-bottom:5px; font-weight:600}

@media (prefers-reduced-motion:reduce){.glass-mini--easter,.glass-mini--easter::after{animation:none}}

/* contact */
.contact{padding:20px 0 90px}
.contactbox{
  position:relative; overflow:hidden; border-radius:28px; padding:64px;
  background:linear-gradient(120deg, var(--contact-1), var(--contact-2));
  color:var(--contact-ink); box-shadow:var(--shadow);
}
.contactbox::after{
  content:""; position:absolute; width:460px; height:460px; border-radius:50%;
  right:-160px; top:-210px;
  background:radial-gradient(circle, #EAA47A99, #8BB0FF1f 55%, transparent 70%);
}
.contactbox h2{position:relative; z-index:1; font-size:clamp(38px,5vw,60px)}
.contact-logo{position:absolute; right:54px; bottom:48px; width:84px; height:84px; object-fit:contain; opacity:.92; z-index:1}
@media (max-width:700px){.contact-logo{right:26px; bottom:28px; width:62px; height:62px}.contactbox{padding-right:110px}}
.contactbox p{position:relative; z-index:1; color:var(--contact-muted); max-width:440px; line-height:1.7; margin:22px 0 32px; font-size:16px}
.contact-links{position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:14px 30px; align-items:center}
.contactlink{font-size:15px; padding-bottom:3px; border-bottom:1px solid rgba(255,255,255,.35)}
.contactlink.primary{font-size:16px; font-weight:600; border-bottom-color:rgba(255,255,255,.7)}
.contactlink:hover{border-bottom-color:currentColor}

footer{display:flex; justify-content:space-between; padding:0 0 50px; color:var(--muted); font-size:12px}

/* scroll thread */
.thread{position:fixed; left:32px; top:0; height:100vh; width:2px; z-index:5; pointer-events:none}
.thread-line{position:absolute; inset:0; background:linear-gradient(var(--line), transparent 92%)}
.thread-dot{position:absolute; left:-3px; top:0; width:8px; height:8px; border-radius:50%; background:var(--dune); box-shadow:0 0 0 5px var(--wash1); transform:translateY(0)}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spin-rev{to{transform:rotate(-360deg)}}
@keyframes pulse{0%,100%{transform:scale(1); opacity:.85} 50%{transform:scale(1.9); opacity:0}}
@keyframes dataflow{0%{transform:translate(70px,150px)} 50%{transform:translate(378px,266px)} 100%{transform:translate(70px,150px)}}
@keyframes bar{0%,100%{transform:scaleY(.4)} 50%{transform:scaleY(1)}}
@keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)}}
.sphere-float{animation:float 8s ease-in-out infinite; will-change:transform}

.content-section{padding:115px 0 30px}
.section-heading{display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:end;margin-bottom:42px}
.section-index{font-size:11px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;padding-top:12px}
.section-index span{display:block;width:34px;height:2px;background:var(--dune);margin-top:16px}
.section-heading h2{font-family:'Onest',system-ui,sans-serif;font-size:clamp(52px,6vw,92px);line-height:.9;letter-spacing:-.045em;font-weight:600;margin:0}
.section-intro{max-width:500px;color:var(--muted);font-size:17px;line-height:1.7;margin:25px 0 0}
.section-intro--colored{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:16px}
.section-intro--colored span:nth-child(1){color:var(--dune)}
.section-intro--colored span:nth-child(2){color:var(--lichen)}
.section-intro--colored span:nth-child(3){color:var(--techblue)}
.glass-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(255px,auto);gap:18px}
.glass-card{
  position:relative;isolation:isolate;overflow:hidden;min-height:255px;padding:30px;
  border:1px solid var(--surface-border);border-radius:30px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.38),rgba(255,255,255,.12)),
    var(--surface);
  backdrop-filter:blur(15px) saturate(122%);-webkit-backdrop-filter:blur(15px) saturate(122%);
  box-shadow:0 22px 65px rgba(54,79,126,.09),inset 0 1px 0 var(--glass-highlight);
  transition:transform .6s ease,box-shadow .6s ease,border-color .6s ease;
  contain:layout paint style;
}
.glass-card:before{content:"";position:absolute;z-index:-1;inset:-30%;background:radial-gradient(circle at 80% 15%,rgba(255,255,255,.55),transparent 28%),radial-gradient(circle at 10% 100%,var(--wash2),transparent 38%);opacity:.8;pointer-events:none}
.glass-card:hover{transform:translateY(-6px);box-shadow:0 30px 85px rgba(54,79,126,.16),inset 0 1px 0 var(--glass-highlight)}
.glass-card--wide{grid-row:span 2;min-height:528px}
.glass-card--blue{background:linear-gradient(135deg,rgba(201,221,255,.42),rgba(255,255,255,.10)),var(--surface)}
.glass-card--sage{background:linear-gradient(135deg,rgba(143,175,159,.24),rgba(255,255,255,.10)),var(--surface)}
.glass-card--orange{background:linear-gradient(135deg,rgba(234,164,122,.28),rgba(255,255,255,.10)),var(--surface)}
.glass-card--deep{background:linear-gradient(135deg,rgba(17,28,61,.08),rgba(139,176,255,.20)),var(--surface)}
.card-meta{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.glass-card h3{font-family:'Onest',system-ui,sans-serif;font-size:clamp(30px,3.2vw,48px);line-height:1;letter-spacing:-.035em;font-weight:600;margin:28px 0 16px}
.glass-card p{max-width:390px;color:var(--muted);font-size:15px;line-height:1.7;margin:0}
.card-orbit,.card-signal,.card-dots,.card-lines,.card-network{position:absolute;pointer-events:none;opacity:.72}
.card-orbit{right:-40px;bottom:-65px;width:300px;height:300px;border:1px solid var(--line);border-radius:50%}
.card-orbit:before,.card-orbit:after{content:"";position:absolute;border:1px solid var(--line);border-radius:50%}
.card-orbit:before{inset:35px}.card-orbit:after{inset:85px}
.card-orbit i{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--dune);right:48px;top:34px;box-shadow:0 0 0 8px var(--wash1)}
.card-orbit i:nth-child(2){right:auto;left:60px;top:180px;background:var(--techblue)}
.card-signal{right:30px;bottom:28px;width:150px;height:130px}
.card-signal i{position:absolute;left:0;width:100%;height:1px;background:var(--line);transform-origin:left}
.card-signal i:nth-child(1){top:25%;transform:rotate(18deg)}.card-signal i:nth-child(2){top:52%;transform:rotate(-25deg)}.card-signal i:nth-child(3){top:78%;transform:rotate(12deg)}
.card-signal b{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--techblue);left:48%;top:48%;box-shadow:0 0 0 8px rgba(139,176,255,.12)}
.card-dots{right:32px;bottom:34px;width:150px;height:100px;background-image:radial-gradient(var(--lichen) 2px,transparent 3px);background-size:24px 24px;opacity:.5}
.card-lines{right:28px;bottom:25px;width:140px;height:100px}
.card-lines i{position:absolute;width:100%;height:1px;background:var(--line);transform-origin:left}
.card-lines i:nth-child(1){top:15%;transform:rotate(25deg)}.card-lines i:nth-child(2){top:50%;transform:rotate(-35deg)}.card-lines i:nth-child(3){top:82%;transform:rotate(12deg)}
.card-network{right:24px;bottom:18px;width:220px;height:180px}
.card-network i{position:absolute;height:1px;background:var(--line);transform-origin:left}
.card-network i:nth-child(1){width:170px;left:15px;top:40px;transform:rotate(25deg)}
.card-network i:nth-child(2){width:160px;left:35px;top:100px;transform:rotate(-28deg)}
.card-network i:nth-child(3){width:130px;left:60px;top:145px;transform:rotate(18deg)}
.card-network b,.card-network em{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--dune);left:48px;top:75px;box-shadow:0 0 0 8px var(--wash1)}
.card-network em{left:165px;top:30px;background:var(--techblue);box-shadow:0 0 0 8px rgba(139,176,255,.12)}
.anime-panel{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;min-height:430px;border:1px solid var(--surface-border);border-radius:32px;background:linear-gradient(120deg,rgba(255,255,255,.42),rgba(201,221,255,.16)),var(--surface);backdrop-filter:blur(15px) saturate(122%);-webkit-backdrop-filter:blur(15px) saturate(122%);box-shadow:0 25px 75px rgba(54,79,126,.10),inset 0 1px 0 var(--glass-highlight);contain:layout paint style}
.anime-copy{padding:55px 50px;position:relative;z-index:1}
.anime-copy>p:first-child{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 28px}
.anime-copy h3{font-family:'Onest',system-ui,sans-serif;font-size:clamp(40px,4.5vw,68px);line-height:.98;letter-spacing:-.045em;font-weight:600;margin:0 0 30px}
.anime-copy .muted{max-width:390px;color:var(--muted);font-size:15px;line-height:1.7;margin:0}
.anime-visual{position:relative;min-height:430px;overflow:hidden;background:radial-gradient(circle at 45% 45%,rgba(139,176,255,.25),transparent 32%),radial-gradient(circle at 75% 25%,rgba(234,164,122,.24),transparent 25%)}
.flow{position:absolute;border:1px solid var(--line);border-radius:50%;transform:rotate(-20deg)}
.flow-a{width:440px;height:170px;left:-40px;top:125px}
.flow-b{width:370px;height:140px;left:30px;top:150px;transform:rotate(28deg)}
.flow-c{width:270px;height:110px;left:110px;top:165px;transform:rotate(-45deg)}
.flow-node{position:absolute;width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 9px rgba(234,164,122,.12)}
.node-a{background:var(--dune);left:22%;top:28%}.node-b{background:var(--lichen);left:62%;top:65%;box-shadow:0 0 0 9px rgba(143,175,159,.14)}.node-c{background:var(--techblue);left:72%;top:22%;box-shadow:0 0 0 9px rgba(139,176,255,.14)}
.glass-mini{position:absolute;right:28px;bottom:28px;padding:18px 20px;border:1px solid var(--surface-border);border-radius:18px;background:rgba(255,255,255,.22);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);box-shadow:0 15px 35px rgba(54,79,126,.10)}
.glass-mini span{display:block;color:var(--muted);font-size:10px;letter-spacing:.15em;margin-bottom:7px}.glass-mini strong{display:block;font-size:13px;font-weight:600}.glass-mini small{display:block;margin-top:7px;color:var(--muted);font-size:11px;line-height:1.4}
@media (max-width:900px){
  .content-section{padding:80px 0 10px}
  .section-heading{grid-template-columns:1fr;gap:18px}
  .glass-grid{grid-template-columns:1fr;grid-auto-rows:auto}
  .glass-card,.glass-card--wide{grid-row:auto;min-height:280px}
  .anime-panel{grid-template-columns:1fr}
  .anime-visual{min-height:300px}
  .anime-copy{padding:40px 28px}
}


@media (max-width: 1100px){
  .wrap{width:min(100% - 48px,1180px)}
  .site-header{height:88px}
  .nav-links{gap:16px;margin-left:18px;margin-right:16px}
  .hero{min-height:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;padding:42px 0 80px}
  .hero h1{font-size:clamp(70px,10vw,126px)}
  .hero-visual{height:450px}
}
@media (max-width: 760px){
  .wrap{width:calc(100% - 36px)}
  .site-header{height:auto;min-height:82px;flex-wrap:wrap;gap:16px;padding:18px 0}
  .theme-control{order:3;margin:0}
  .nav-links{order:4;width:100%;margin:0;justify-content:flex-start;gap:20px}
  .nav-links a{font-size:11px}
  .nav-cta{margin-left:auto;font-size:12px;padding:9px 15px}
  .hero{display:flex;flex-direction:column;align-items:stretch;padding:45px 0 70px;gap:22px}
  .hero h1{font-size:clamp(76px,22vw,132px);margin:18px 0 24px}
  .hero-text .lead{font-size:17px;max-width:100%}
  .hero-kicker{font-size:12px}
  .hero-visual{height:min(92vw,390px);min-height:300px;margin-top:4px}
  .hero-visual svg{width:100%;height:100%}
  .glass-note{left:0;bottom:0;max-width:220px;font-size:12px;padding:14px 16px}
  .content-section{padding:78px 0 12px}
  .section-heading{display:block;margin-bottom:30px}
  .section-index{margin-bottom:22px}
  .section-heading h2{font-size:clamp(52px,15vw,78px)}
  .section-intro{font-size:16px;margin-top:22px}
  .glass-grid{display:grid;grid-template-columns:1fr;gap:14px}
  .glass-card,.glass-card--wide{min-height:270px;padding:25px;border-radius:24px}
  .glass-card h3{font-size:clamp(32px,9vw,46px);margin-top:24px}
  .glass-card p{font-size:14px;max-width:90%}
  .anime-panel{min-height:0;border-radius:25px}
  .anime-copy{padding:34px 25px}
  .anime-copy h3{font-size:clamp(42px,12vw,62px)}
  .anime-visual{min-height:285px}
  .contact{padding:88px 0 50px}
  .contactbox{padding:38px 26px;border-radius:26px}
  .contact-links{align-items:flex-start;flex-direction:column;gap:18px}
  .back-to-top{right:16px;bottom:16px;width:40px;height:40px}
}
@media (max-width: 420px){
  .nav-links{gap:14px}
  .nav-links a{font-size:10px}
  .hero-visual{height:315px;min-height:270px}
  .glass-note{max-width:195px}
}

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

@media (max-width:900px){
  .thread{display:none}
  .wrap{width:calc(100% - 40px)}
  .site-header{height:82px}
  .hero{grid-template-columns:1fr; padding:10px 0 60px; min-height:auto}
  .hero-visual{height:340px; order:-1; margin-bottom:10px}
  .contactbox{padding:40px 26px}
  footer{flex-direction:column; gap:10px}
}

.nav-links{display:flex;align-items:center;gap:24px;margin-left:28px;margin-right:24px}
.nav-links a{font-size:12px;color:var(--muted);transition:color .3s ease}
.nav-links a:hover{color:var(--ink)}
.nav-cta{white-space:nowrap}
.hero-visual .node,
.hero-visual .dataflow-dot,
.hero-visual .bars rect{fill:var(--techblue) !important}
.hero-visual .node-pulse,
.hero-visual .dataflow-dot{filter:drop-shadow(0 0 4px rgba(139,176,255,.20))}
.back-to-top{
  position:fixed;right:24px;bottom:24px;z-index:20;
  width:44px;height:44px;border:1px solid var(--surface-border);
  border-radius:50%;background:var(--surface);color:var(--ink);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:var(--shadow);cursor:pointer;font-size:18px;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .35s ease,visibility .35s ease,transform .35s ease,background var(--transition),color var(--transition);
}
.back-to-top.visible{opacity:1;visibility:visible;transform:none}
.back-to-top:hover{background:var(--surface-strong)}

@media (max-width: 900px){
  .hero{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:28px;
  }
  .hero-text{
    position:relative;
    z-index:3;
  }
  .hero-visual{
    position:relative;
    z-index:1;
    order:2;
    width:100%;
    height:clamp(290px,48vw,430px);
    min-height:290px;
    margin:0 auto;
    overflow:visible;
  }
  .hero-visual .orb,
  .hero-visual .sphere{
    transform:scale(.72);
    transform-origin:center center;
  }
  .hero-visual .data-lines,
  .hero-visual .dataflow,
  .hero-visual .nodes{
    transform:scale(.78);
    transform-origin:center center;
  }
  .hero-visual .glass-note{
    z-index:2;
  }
}
@media (max-width:600px){
  .hero{gap:24px;padding-top:34px}
  .hero-visual{
    height:300px;
    min-height:260px;
    margin-top:4px;
  }
  .hero-visual .orb,
  .hero-visual .sphere{
    transform:scale(.58);
  }
  .hero-visual .data-lines,
  .hero-visual .dataflow,
  .hero-visual .nodes{
    transform:scale(.64);
  }
}

/* Easter egg contained and readable */
.glass-mini--easter {
  right: 24px;
  bottom: 24px;
  z-index: 4;
  max-width: min(250px, calc(100% - 48px));
  box-sizing: border-box;
  overflow: hidden;
  color: var(--ink);
  background: linear-gradient(135deg, rgba(255,255,255,.68), rgba(201,221,255,.34));
  border-color: rgba(255,255,255,.72);
  box-shadow: 0 18px 48px rgba(35,58,105,.16), inset 0 1px 0 rgba(255,255,255,.75);
  animation: easterGlow 5s ease-in-out infinite;
}
.glass-mini--easter span,
.glass-mini--easter strong,
.glass-mini--easter small {
  position: relative;
  z-index: 2;
}
.glass-mini--easter strong {
  color: var(--ink);
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.25;
  letter-spacing: -.02em;
}
.glass-mini--easter small {
  color: rgba(17,28,61,.78);
  font-size: 12px;
  line-height: 1.5;
}
.glass-mini--easter::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.42) 50%, transparent 75%);
  transform: translateX(-130%);
  animation: easterSheen 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes easterGlow {
  0%, 100% { box-shadow: 0 18px 48px rgba(35,58,105,.16), inset 0 1px 0 rgba(255,255,255,.75); }
  50% { box-shadow: 0 22px 58px rgba(76,116,184,.22), inset 0 1px 0 rgba(255,255,255,.9); }
}
@keyframes easterSheen {
  0%, 65%, 100% { transform: translateX(-130%); }
  82% { transform: translateX(130%); }
}
@media (max-width: 900px) {
  .glass-mini--easter { right: 18px; bottom: 18px; max-width: 240px; }
}
@media (max-width: 600px) {
  .glass-mini--easter { right: 14px; bottom: 14px; max-width: 220px; padding: 15px 16px; }
  .glass-mini--easter strong { font-size: 14px; }
  .glass-mini--easter small { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .glass-mini--easter, .glass-mini--easter::after { animation: none; }
}

/* Optimisation jour : fond blanc/glace, avec des halos bleus très discrets.
   L'orange reste une couleur d'accent dans les cartes, pas la couleur du site. */
:root,
:root[data-theme="day"] {
  --bg: #F6F9FF;
  --bg2: #EEF5FF;
  --bg3: #F8FBFF;
  --wash1: rgba(234, 164, 122, .075);
  --wash2: rgba(143, 175, 159, .10);
  --ink: #111C3D;
  --muted: #52627D;
  --surface: rgba(255, 255, 255, .52);
  --surface-strong: rgba(255, 255, 255, .68);
  --surface-border: rgba(255, 255, 255, .84);
  --glass-highlight: rgba(255, 255, 255, .82);
}

/* Optimisation nuit : textes secondaires plus lumineux sur les surfaces glass. */
:root[data-theme="night"] {
  --ink: #E8F0FF;
  --muted: #C5D5F0;
  --surface: rgba(153, 190, 255, .09);
  --surface-strong: rgba(153, 190, 255, .15);
  --surface-border: rgba(207, 228, 255, .30);
  --glass-highlight: rgba(214, 232, 255, .22);
}

/* Fond atmosphérique froid en mode jour. */
:root[data-theme="day"] body,
:root:not([data-theme="night"]) body {
  background: linear-gradient(135deg, #F8FBFF 0%, #F2F7FF 52%, #EAF2FF 100%);
}

:root[data-theme="day"] body::before,
:root:not([data-theme="night"]) body::before {
  background:
    radial-gradient(circle at 8% 12%, rgba(201, 221, 255, .52), transparent 27rem),
    radial-gradient(circle at 92% 28%, rgba(175, 203, 250, .22), transparent 30rem),
    radial-gradient(circle at 48% 88%, rgba(224, 235, 255, .58), transparent 32%);
}

/* Les halos animés ne doivent plus teinter toute la page en orange. */
:root[data-theme="day"] .ambient-one,
:root:not([data-theme="night"]) .ambient-one {
  background: radial-gradient(circle, rgba(234, 164, 122, .075), transparent 68%);
  mix-blend-mode: normal;
  opacity: .7;
}

:root[data-theme="day"] .ambient-two,
:root:not([data-theme="night"]) .ambient-two {
  background: radial-gradient(circle, rgba(143, 175, 159, .11), transparent 68%);
  mix-blend-mode: normal;
  opacity: .65;
}

:root[data-theme="day"] .ambient-three,
:root:not([data-theme="night"]) .ambient-three {
  background: radial-gradient(circle, rgba(139, 176, 255, .16), transparent 68%);
  mix-blend-mode: normal;
  opacity: .72;
}

/* Lisibilité générale : tailles légèrement augmentées et rythme plus confortable. */
body {
  font-size: 17px;
  line-height: 1.65;
}

.hero-text .lead {
  font-size: clamp(18px, 1.2vw, 20px);
  line-height: 1.72;
}

.section-intro {
  font-size: clamp(17px, 1.15vw, 19px);
  line-height: 1.75;
}

.section-intro--colored {
  font-size: clamp(16px, 1.05vw, 18px);
}

.glass-card p,
.anime-copy .muted {
  font-size:clamp(16px,1vw,17px);
  line-height:1.75;
}

.glass-note {
  font-size: 15px;
  line-height: 1.65;
}

.card-meta,
.section-index {
  font-size: 12px;
}

.contactbox p {
  font-size: 17px;
  line-height: 1.75;
}

footer {
  font-size: 14px;
}

/* Carte "Toujours en recherche" : numéro et sous-texte lisibles dans les deux thèmes. */
.glass-mini--easter > span {
  color: var(--muted);
  opacity: 1;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: .15em;
}

.glass-mini--easter > strong {
  color: var(--ink);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.3;
}

.glass-mini--easter > small {
  color: var(--muted);
  opacity: 1;
  font-size: 14px;
  line-height: 1.55;
}

:root[data-theme="night"] .glass-mini--easter {
  background: linear-gradient(
    135deg,
    rgba(35, 65, 116, .72),
    rgba(78, 116, 184, .34)
  );
  border-color: rgba(207, 228, 255, .34);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(214, 232, 255, .24);
}

:root[data-theme="night"] .glass-mini--easter > span,
:root[data-theme="night"] .glass-mini--easter > small {
  color: #D5E2F8;
}

:root[data-theme="night"] .glass-mini--easter > strong {
  color: #F0F5FF;
}

/* Meilleure lisibilité des liens de navigation et des éléments secondaires en nuit. */
:root[data-theme="night"] .nav-links a,
:root[data-theme="night"] .hero-kicker,
:root[data-theme="night"] .hero-scroll,
:root[data-theme="night"] .card-meta,
:root[data-theme="night"] .section-index {
  color: #C5D5F0;
}

/* Confort de lecture sur petits écrans. */
@media (max-width: 760px) {
  .hero-text .lead {
    font-size: 18px;
  }

  .section-intro {
    font-size: 17px;
  }

  .glass-card p,
  .anime-copy .muted {
    font-size: 16px;
  }

  .glass-mini--easter > strong {
    font-size: 16px;
  }

  .glass-mini--easter > small {
    font-size: 14px;
  }

  .glass-note {
    font-size: 14px;
  }
}

/* Respect du réglage d'accessibilité de contraste du système. */
@media (prefers-contrast: more) {
  :root[data-theme="night"] {
    --muted: #D5E2F8;
    --surface-border: rgba(224, 237, 255, .48);
  }

  :root[data-theme="day"] {
    --muted: #40516E;
    --surface-border: rgba(17, 28, 61, .24);
  }

  .glass-card p,
  .glass-mini--easter > small,
  .glass-note {
    opacity: 1;
  }
}