/* Webizy · direction « Nuit Webizy » */
:root {
  --nuit: #0E0C12; --nuit-rgb: 14, 12, 18; --surface: #19151F; --ligne: #2C2635; --trait: #3a3244; --texte-doux: #cfc8d2; --souligne: #5a4f66;
  --violet: #4E3C90; --peche: #F3A395; --craie: #F3EEEA; --brume: #A49DAA;
  --serif: "Bricolage Grotesque", "Geist", system-ui, sans-serif; /* police des titres : sans serif grasse */
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --marge: clamp(20px, 4.5vw, 64px);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--nuit); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--nuit); color: var(--craie); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, p, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 1px solid var(--peche); outline-offset: 4px; border-radius: 2px; }
em { font-style: normal; color: var(--peche); }

.saut { position: fixed; left: var(--marge); top: -60px; z-index: 10; padding: 10px 16px; background: var(--craie); color: var(--nuit); border-radius: 4px; font-size: 14px; }
.saut:focus { top: 12px; }

/* ---------- Typographie ---------- */
.label, .num, .compteur, .coords, .pied { font-family: var(--mono); font-size: 11px; line-height: 1.6; letter-spacing: .16em; text-transform: uppercase; }
.label { color: var(--peche); }
.titre, .titre-2, .phrase { font-family: var(--serif); font-weight:700; letter-spacing: -.02em; text-wrap: balance; }
.titre { font-size: clamp(40px, 6.9vw, 107px); line-height: .98; }
.titre-2 { font-size: clamp(29px, 3.8vw, 55px); line-height: 1.05; }
.phrase { font-size: clamp(33px, 4.6vw, 72px); line-height: 1.04; }
.titre span, .titre em, .titre-2 span, .titre-2 em { display: block; }
.discret { color: var(--brume); max-width: 46ch; }

.lien { display: inline-flex; gap: .6em; align-items: baseline; font-size: 15px; font-weight: 500; padding: 6px 0; border-bottom: 1px solid var(--ligne); transition: border-color .3s, color .3s; }
.lien span { transition: transform .3s; }
.lien:hover { border-color: var(--peche); color: var(--peche); }
.lien:hover span { transform: translateX(4px); }

.bouton, .bouton-ligne { display: inline-block; font: 500 15px/1 var(--sans); border-radius: 999px; transition: background .3s, color .3s, border-color .3s, transform .3s; }
.bouton { padding: 18px 30px; background: var(--peche); color: var(--nuit); }
.bouton:hover { background: var(--craie); transform: translateY(-1px); }
.bouton-ligne { padding: 11px 20px; border: 1px solid rgba(243, 163, 149, .55); color: var(--peche); }
.bouton-ligne:hover { background: var(--peche); color: var(--nuit); }

/* ---------- Navigation ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 20px var(--marge); }
.nav-logo img { display: block; height: 36px; width: auto; }
.nav-logo { transition: opacity .6s; }
.anime.signature .nav-logo { opacity: 0; pointer-events: none; }
.nav nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 40px); font-size: 15px; }
.nav nav a:not(.bouton-ligne) { color: var(--brume); transition: color .3s; }
.nav nav a:not(.bouton-ligne):hover { color: var(--craie); }

/* ---------- Fond : lueurs et grain ---------- */
.fond { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.lueur { position: absolute; inset: 0; }
.lueur i { position: absolute; left: 50%; top: 50%; border-radius: 50%; will-change: transform; }
.lueur-violet { width: 110vmax; height: 110vmax; margin: -55vmax 0 0 -55vmax; background: radial-gradient(closest-side, rgba(78, 60, 144, .36), rgba(78, 60, 144, .12) 45%, transparent 72%); }
.lueur-peche { width: 60vmax; height: 60vmax; margin: -34vmax 0 0 -22vmax; background: radial-gradient(closest-side, rgba(243, 163, 149, .10), transparent 70%); }
@media (hover: none) {
  .anime .lueur { animation: derive 14s ease-in-out infinite alternate; }
}
@keyframes derive { from { transform: translate3d(-6vw, -4vh, 0); } to { transform: translate3d(6vw, 5vh, 0); } }
.grain { position: fixed; inset: 0; z-index: 6; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }

/* ---------- Accueil sans animation : cinq écrans à la suite ---------- */
.piste, .plateau { position: relative; z-index: 1; }
.objet, .hud { display: none; }
.moment { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 120px var(--marge) 80px; }
.bloc { width: 100%; max-width: 1180px; margin: 0 auto; }
.m1 .bloc, .m4 .bloc, .m5 .bloc { text-align: center; }
.m1 .discret, .m5 .discret { margin-inline: auto; }
.m1 .label { margin-bottom: 28px; }
.m1 .discret { margin-top: 32px; }
.m2 .phrase + .phrase { margin-top: .25em; }
.offres li { display: grid; grid-template-columns: 44px 1fr; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--ligne); }
.offres li:last-child { border-bottom: 1px solid var(--ligne); }
.offres .num { color: var(--peche); }
.offres p { color: var(--brume); max-width: 44ch; }
.offres strong { display: block; font:600 clamp(28px, 2.8vw, 40px)/1.1 var(--serif); letter-spacing: -.01em; color: var(--craie); margin-bottom: 6px; }
.m3 .bloc { max-width: 560px; }
.m3 .lien { margin-top: 30px; }
.clients { color: var(--brume); margin: 28px 0 22px; }
.m5 .discret { margin: 18px auto 34px; }
.logo-fixe { display: block; width: min(78vw, 460px); margin: 0 auto 56px; }

/* ---------- Accueil animé : un plateau fixe, l'objet derrière, un message par écran ---------- */
.anime .piste { height: 560vh; }
.anime .plateau { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.anime .objet { display: block; position: absolute; inset: 0; pointer-events: none; }
.anime .objet canvas { position: absolute; inset: 0; display: block; }
.anime #logotype { position: absolute; left: 0; top: 0; opacity: 0; max-width: none; will-change: transform, opacity; }
.anime .logo-fixe { display: none; }
.anime .moment { position: absolute; inset: 0; min-height: 0; padding: 96px var(--marge) 72px; pointer-events: none; }
.anime .moment.actif { pointer-events: auto; }
.anime .l, .anime .phrase { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .45s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.anime .actif .l, .anime .phrase.actif { opacity: 1; transform: none; transition-duration: .8s, 1s; transition-delay: calc(var(--i, 0) * 80ms); }

/* 1 : le titre devant le nuage, avec un voile pour la lisibilité */
.anime .m1 .bloc { position: relative; }
.anime .m1 .bloc::before { content: ""; position: absolute; inset: -22% -6%; z-index: -1; background: radial-gradient(closest-side, rgba(var(--nuit-rgb), .82), rgba(var(--nuit-rgb), .5) 55%, transparent); opacity: 0; transition: opacity .6s; }
.anime .m1.actif .bloc::before { opacity: 1; }
/* 2 : texte à gauche, objet au tiers droit */
.anime .m2 .bloc { display: grid; max-width: none; }
.anime .m2 .phrase { grid-area: 1 / 1; margin: 0; max-width: 9.5em; }
/* 3 : texte à droite, objet au tiers gauche */
.anime .m3 .bloc { max-width: none; margin: 0; padding-left: 52%; }
.anime .m3 .offres, .anime .m3 .lien { max-width: 520px; }
/* 4 et 5 : objet en haut, texte dessous */
.anime .m4, .anime .m5 { align-items: flex-end; padding-bottom: clamp(64px, 11vh, 120px); }

.anime .hud { display: block; position: absolute; inset: 0; pointer-events: none; color: var(--brume); }
.hud b { color: var(--craie); font-weight: 500; }
.compteur { position: absolute; left: var(--marge); bottom: 26px; }
.coords { position: absolute; right: var(--marge); bottom: 26px; }
.filet { position: absolute; right: var(--marge); top: 50%; width: 1px; height: 26vh; margin-top: -13vh; background: var(--ligne); }
.filet i { position: absolute; inset: 0; background: var(--peche); transform-origin: top; transform: scaleY(0); }

/* ---------- Footer ---------- */
.pied { position: relative; z-index: 1; padding: 44px var(--marge) 40px; border-top: 1px solid var(--ligne); color: var(--brume); background: var(--nuit); }
.pied ul { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.pied li:first-child { color: var(--craie); }
.pied a { transition: color .3s; }
.pied a:hover { color: var(--peche); }
.medizy a { text-decoration: underline; text-decoration-color: var(--ligne); text-underline-offset: 4px; }
.medizy { margin-top: 22px; font: 400 14px/1.5 var(--sans); letter-spacing: 0; text-transform: none; }
.a-fournir { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; opacity: .7; }

/* ---------- Mobile et tablette : objet centré en haut, texte dessous ---------- */
@media (max-width: 899px) {
  body { font-size: 16px; }
  .nav { padding: 14px var(--marge); }
  .nav-logo img { height: 30px; }
  .nav nav { font-size: 14px; }
  .bouton-ligne { padding: 9px 16px; }
  .coords, .filet { display: none; }
  .compteur { bottom: 18px; }
  .anime .moment { padding: 84px var(--marge) 64px; }
  .anime .m2, .anime .m3, .anime .m4, .anime .m5 { align-items: flex-end; }
  .anime .m2 .bloc { text-align: center; justify-items: center; min-height: 34vh; align-content: center; }
  .anime .m3 .bloc { padding-left: 0; margin: 0 auto; }
  .offres li { padding: 14px 0; grid-template-columns: 36px 1fr; }
  .offres p { font-size: 15px; }
  .m3 .lien { margin-top: 18px; }
  .m1 .discret { font-size: 15px; }
}
@media (max-width: 420px) {
  .nav nav a:not(.bouton-ligne) { display: inline-block; }
  .nav nav { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Menu : libellé court du bouton et Contact masqué sur petits écrans (le bouton mène à la même page). */
.nav-court { display:none; }
.nav .bouton-ligne { white-space:nowrap; }
@media (max-width:640px) {
  .nav-long { display:none; }
  .nav-court { display:inline; }
  .nav nav a[href="/contact/"]:not(.bouton-ligne) { display:none; }
  .nav .bouton-ligne { padding:9px 14px; font-size:13px; }
  .nav-logo img { flex:none; }
}

/* Burger : bouton masqué par défaut, affiché sur mobile quand le script est actif. */
.burger { display:none; }
body.menu-ouvert { overflow:hidden; }
@media (max-width:640px) {
  .js-menu .burger { display:inline-flex; flex-direction:column; justify-content:center; gap:6px; width:44px; height:44px; padding:0 10px; margin-right:-10px; background:none; border:0; cursor:pointer; position:relative; z-index:2; }
  .burger span { display:block; height:1px; background:var(--craie); transition:transform .3s, opacity .3s; }
  .nav.ouvert .burger span:first-child { transform:translateY(3.5px) rotate(45deg); }
  .nav.ouvert .burger span:last-child { transform:translateY(-3.5px) rotate(-45deg); }
  .js-menu .nav-logo { position:relative; z-index:2; }
  .js-menu .nav nav { position:fixed; inset:0; z-index:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; padding:90px var(--marge) 48px; background:rgba(var(--nuit-rgb),.985); font-size:inherit; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
  .js-menu .nav.ouvert nav { opacity:1; visibility:visible; }
  .js-menu .nav nav a:not(.bouton-ligne) { display:block; min-height:0; padding:6px 0; font:600 clamp(40px,12vw,56px)/1.15 var(--serif); letter-spacing:-.02em; color:var(--craie); }
  .js-menu .nav nav a[href="/contact/"]:not(.bouton-ligne) { display:block; }
  .js-menu .nav nav .bouton-ligne { margin-top:28px; padding:16px 26px; font-size:16px; }
  .js-menu .nav-long { display:inline; }
  .js-menu .nav-court { display:none; }
}
@media (prefers-reduced-motion:reduce) { .js-menu .nav nav, .burger span { transition:none; } }

/* ---------- Verre (glassmorphism) ---------- */
:root {
  --verre: rgba(255, 255, 255, .045); --verre-fort: rgba(255, 255, 255, .08);
  --verre-bord: rgba(255, 255, 255, .13); --flou: blur(18px) saturate(150%);
  --verre-ombre: 0 10px 40px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .09);
}
.nav { padding-inline: calc(var(--marge) + 22px); }
.accueil .nav, .page .nav { background: none; border-bottom: 0; }
.nav::before { content: ""; position: absolute; inset: 10px var(--marge); z-index: -1; border-radius: 999px; background: rgba(18, 14, 26, .78); border: 1px solid var(--verre-bord); -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou); box-shadow: var(--verre-ombre); transition: background .4s, border-color .4s, box-shadow .4s, opacity .3s; }
.nav.ouvert::before { opacity: 0; }
.nav .bouton-ligne { background: var(--verre); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (max-width: 640px) { .nav { padding-inline: calc(var(--marge) + 14px); } .nav::before { inset-inline: calc(var(--marge) - 6px); } }
@media (prefers-reduced-transparency: reduce) { .nav::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: #14101c; } }