/* Les pages qui se lisent (09/10) : le signal, l'attente, les mentions, la confidentialité. Même matière que l'accueil. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/polices/archivo-latin.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url('/assets/polices/jetbrains-mono-latin.woff2') format('woff2')}
:root{--fond:#0e0e0e;--encre:#f2f0ec;--sourd:#8a8682;--braise:#ff2b1f;--x:50vw;--y:30vh}
html{color-scheme:dark;background:var(--fond)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:focus-visible{outline:1px solid rgba(255,43,31,.75);outline-offset:3px}
body{min-height:100svh;background:var(--fond);color:var(--encre);font-family:'Archivo',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:-50%;pointer-events:none;z-index:5;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.lampe{position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(circle 300px at var(--x) var(--y),rgba(255,255,255,.05),transparent 70%)}
header,footer{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:16px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sourd)}
header a,footer a{color:inherit;text-decoration:none}
header a:hover,footer a:hover{color:var(--encre)}
.signal{display:flex;align-items:center;gap:10px}
.signal i{width:6px;height:6px;border-radius:50%;background:var(--braise);box-shadow:0 0 10px var(--braise);animation:pouls 2.4s ease-in-out infinite}
@keyframes pouls{0%,100%{opacity:.25}50%{opacity:1}}
main{position:relative;z-index:3;width:100%;max-width:760px;margin:0 auto;padding:clamp(32px,8vh,96px) 16px clamp(48px,10vh,120px);min-width:0}
section{margin:0 0 clamp(72px,16vh,160px);opacity:0;transform:translateY(18px);transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.2,.7,.1,1)}
section.vue,.sans-js section{opacity:1;transform:none}
.etiquette{display:flex;align-items:center;gap:12px;margin-bottom:22px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--braise)}
.etiquette::before{content:"";width:28px;height:1px;background:var(--braise);box-shadow:0 0 8px var(--braise)}
h1,h2{font-weight:850;letter-spacing:-.03em;line-height:1.02}
h1{font-size:clamp(2.4rem,1.2rem + 6vw,5.5rem)}
h1 .doux{display:block;color:var(--sourd);font-weight:500}
h2{font-size:clamp(1.7rem,1.1rem + 3vw,3.2rem)}
p{font-size:clamp(1.05rem,.98rem + .35vw,1.25rem);line-height:1.6;color:#d9d6d1;margin-top:18px;max-width:38em;overflow-wrap:break-word}
p.fort{color:var(--encre);font-weight:700}
p.mono,.mono{font-family:'JetBrains Mono',monospace;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sourd)}
.verbes{font-weight:800;font-size:clamp(1.25rem,1rem + 1.2vw,1.9rem);color:var(--encre);letter-spacing:-.01em;line-height:1.35}
.verbes b{color:var(--braise);font-weight:800}
.fente{display:flex;align-items:center;gap:8px;margin-top:28px;padding:8px 8px 8px 22px;border-radius:999px;background:var(--fond);max-width:560px;min-width:0;
  box-shadow:inset 7px 7px 16px rgba(0,0,0,.95),inset -7px -7px 16px rgba(255,255,255,.06),0 1px 0 rgba(255,255,255,.07);transition:box-shadow .4s}
.fente:focus-within{box-shadow:inset 6px 6px 14px rgba(0,0,0,.92),inset -6px -6px 14px rgba(255,255,255,.04),0 0 22px rgba(255,43,31,.25)}
.fente input{flex:1 1 auto;min-width:0;background:none;border:0;outline:0;color:var(--encre);font-family:'JetBrains Mono',monospace;font-size:16px;letter-spacing:.06em;caret-color:var(--braise);padding:10px 0}
.fente input::placeholder{color:var(--sourd)}
.fente button,.bouton{flex:0 0 auto;border:0;border-radius:999px;cursor:pointer;padding:12px 18px;background:#161616;color:var(--encre);font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  box-shadow:5px 5px 12px rgba(0,0,0,.9),-4px -4px 10px rgba(255,255,255,.05)}
.fente button:hover,.bouton:hover{color:#fff;box-shadow:5px 5px 12px rgba(0,0,0,.9),-4px -4px 10px rgba(255,255,255,.05),0 0 18px rgba(255,43,31,.35)}
.fente.faux{animation:refus .45s ease}
@keyframes refus{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.accord{display:flex;gap:12px;align-items:flex-start;margin-top:18px;max-width:560px;font-size:.92rem;line-height:1.5;color:var(--sourd);cursor:pointer}
.accord input{margin-top:4px;accent-color:var(--braise);width:16px;height:16px;flex:0 0 auto}
.accord a,.texte a{color:var(--encre);text-underline-offset:3px}
.reponse{min-height:1.6em;margin-top:18px;font-family:'JetBrains Mono',monospace;font-size:.9rem;letter-spacing:.06em;color:var(--braise)}
.cent{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08)}
.compte{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:clamp(4.5rem,2rem + 14vw,10rem);letter-spacing:-.04em;line-height:1;color:var(--encre);
  text-shadow:0 0 40px rgba(255,43,31,.25)}
.compte small{font-size:.22em;letter-spacing:.2em;color:var(--sourd);font-weight:500;margin-left:.4em}
.barre{height:2px;background:rgba(255,255,255,.08);margin-top:22px;max-width:560px;position:relative;overflow:hidden}
.barre i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--braise);box-shadow:0 0 12px var(--braise);transition:width 1.6s cubic-bezier(.2,.7,.1,1)}
.texte h2{font-size:clamp(1.3rem,1rem + 1.4vw,1.9rem);margin-top:44px}
.texte p{font-size:1rem;color:#cfcbc6}
.texte ul{margin:14px 0 0 1.2em;color:#cfcbc6;line-height:1.6}
@media (prefers-reduced-motion:reduce){body::before{animation:none}section{transition:none;opacity:1;transform:none}}
@media (max-width:480px){.fente{padding:6px 6px 6px 16px}.fente button{padding:11px 12px;letter-spacing:.12em}header,footer{font-size:10px;letter-spacing:.12em}}