/* ══════════════════════════════════════════════════════════════════ SECTEUR 40 — feuille de style commune Toutes les pages s'appuient dessus : régie, photobooth, sas d'entrée, galerie, dépôt, page photo, modération, affiches. Une couleur ou une police à changer ? C'est ici, et nulle part ailleurs. ══════════════════════════════════════════════════════════════════ */ /* ─────────────── 1. LA POLICE DE GUILLAUME ─────────────── Déposez les fichiers dans assets/font/ puis ajustez UNIQUEMENT les noms ci-dessous. Formats acceptés : .woff2 (idéal), .woff, .ttf, .otf. Tant qu'un fichier est absent, la page retombe proprement sur la pile système : rien ne casse, seul le dessin des lettres change. */ @font-face{ font-family:"Secteur40"; /* Agency FB Bold — la police retenue par Guillaume. Le .woff2 est chargé en priorité s'il existe (fichier 2 à 3 fois plus léger) ; sinon le .TTF fourni prend le relais. Le nom de fichier respecte la casse sur un serveur Linux comme OVH : AGENCYB.TTF, en majuscules. */ src:url("/assets/font/AGENCYB.woff2") format("woff2"), url("/assets/font/AGENCYB.TTF") format("truetype"); font-weight:400 900; /* un seul fichier gras couvre toutes les graisses */ font-style:normal; font-display:swap; } /* ─────────────── 2. LES JETONS DE DESIGN ─────────────── */ :root{ /* couleurs reprises du cadre de Guillaume */ --cyan:#22d3ff; --magenta:#e83cff; --violet:#7b5cff; --ink:#04050f; --panel:#0a0d20; --dim:#7f93bd; --white:#eaf4ff; --vert:#5dffa0; --rouge:#ff5d7d; --ambre:#ffb340; /* polices : la pile de secours garantit un rendu correct sans les fichiers */ /* Agency FB est très condensée : la pile de secours l'est aussi, pour que la mise en page ne bouge pas si le fichier venait à manquer. */ --police-titre:"Secteur40","Oswald","Haettenschweiler","Arial Narrow", "Avenir Next Condensed","Helvetica Neue",Arial,sans-serif; --police-texte:"Secteur40","Avenir Next","Helvetica Neue",Arial,sans-serif; --police-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; /* Bande réservée à la barre d'état d'iOS (heure, date, batterie). Nulle dans un navigateur classique — il a déjà ses propres barres. Elle n'apparaît qu'en application autonome, lancée depuis l'écran d'accueil : c'est là qu'iOS superpose l'heure à notre interface. Ajustez la valeur 26px si vous la voulez plus haute ou plus fine. */ --barre-haut:0px; /* le rayage horizontal, réglable d'un seul endroit */ --raie-epaisseur:2px; --raie-ecart:5px; --raie-force:.5; } /* En application autonome, on réserve la bande du haut. */ @media (display-mode:standalone),(display-mode:fullscreen){ :root{--barre-haut:max(env(safe-area-inset-top,0px),26px)} } /* Safari sur iOS ne connaît pas toujours display-mode : on complète en JS, qui pose la classe « autonome » sur . */ html.autonome{--barre-haut:max(env(safe-area-inset-top,0px),26px)} /* La bande elle-même : un aplat sombre, sous lequel rien ne passe. */ body::before{content:"";position:fixed;top:0;left:0;right:0; height:var(--barre-haut);background:var(--ink);z-index:150;pointer-events:none} /* ─────────────── 3. SOCLE ─────────────── */ *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;background:var(--ink);color:var(--white); font-family:var(--police-texte);line-height:1.6;-webkit-text-size-adjust:100%; /* pas de rebond horizontal : c'est lui qui amorce le geste « retour » */ overscroll-behavior-x:none} button,input,textarea,select{font-family:inherit} /* ─────────────── 4. TYPOGRAPHIE ─────────────── Le titre rayé : un dégradé de couleur, recouvert de fines raies horizontales, le tout découpé à la forme des lettres. C'est l'effet « écran cathodique » qui donne son identité à la soirée. */ .titre,.s40-titre{ font-family:var(--police-titre); font-weight:700; letter-spacing:.075em; line-height:.94; text-transform:uppercase; background-image: repeating-linear-gradient(180deg, rgba(0,0,0,var(--raie-force)) 0 var(--raie-epaisseur), rgba(0,0,0,0) var(--raie-epaisseur) var(--raie-ecart)), linear-gradient(180deg,#fff 12%,#a9d8ff 44%,var(--cyan) 62%,var(--magenta) 100%); -webkit-background-clip:text;background-clip:text; color:transparent; filter:drop-shadow(0 0 26px rgba(34,211,255,.45)) drop-shadow(0 0 62px rgba(232,60,255,.28)); } /* Variante pour du blanc pur rayé, sans dégradé coloré */ .titre-blanc{ font-family:var(--police-titre);font-weight:700;letter-spacing:.075em; line-height:.94;text-transform:uppercase; background-image: repeating-linear-gradient(180deg, rgba(0,0,0,var(--raie-force)) 0 var(--raie-epaisseur), rgba(0,0,0,0) var(--raie-epaisseur) var(--raie-ecart)), linear-gradient(180deg,#ffffff,#dceeff); -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 0 22px rgba(34,211,255,.5)); } .kicker{font-size:clamp(9px,1.2vw,14px);letter-spacing:.46em;color:var(--cyan); text-transform:uppercase;line-height:2.2} .sous{font-size:clamp(10px,1.35vw,16px);letter-spacing:.3em;color:var(--dim); text-transform:uppercase} .mono{font-family:var(--police-mono)} /* ─────────────── 5. BOUTONS ─────────────── */ .btn{appearance:none;text-decoration:none;display:inline-block;text-align:center; border:1px solid var(--cyan);background:rgba(34,211,255,.09);color:var(--white); border-radius:11px;padding:16px 26px;cursor:pointer; font:600 12px/1 var(--police-texte);letter-spacing:.2em;text-transform:uppercase; transition:background .18s,box-shadow .18s,transform .12s} .btn:hover{background:rgba(34,211,255,.22);box-shadow:0 0 30px rgba(34,211,255,.28)} .btn:active{transform:scale(.97)} .btn[disabled]{opacity:.45;cursor:default} .btn.mag{border-color:var(--magenta);background:rgba(232,60,255,.09)} .btn.mag:hover{background:rgba(232,60,255,.22);box-shadow:0 0 30px rgba(232,60,255,.28)} .btn.vert{border-color:var(--vert);background:rgba(93,255,160,.12)} .btn.vert:hover{background:rgba(93,255,160,.24);box-shadow:0 0 30px rgba(93,255,160,.28)} .btn.ghost{border-color:rgba(127,147,189,.5);background:transparent;color:var(--dim)} .btn.ghost:hover{color:var(--white);border-color:var(--cyan)} .btn.mini{padding:12px 20px;font-size:11px;letter-spacing:.18em} /* Sur mobile, tous les boutons d'une rangée font la même largeur. */ .rangee{display:flex;gap:14px;flex-wrap:wrap;justify-content:center} @media (max-width:760px){ .rangee{flex-direction:column;align-items:stretch;width:min(420px,88vw);margin-inline:auto} .rangee .btn{width:100%} } /* ─────────────── 6. CHAMPS ─────────────── */ .champ{width:100%;background:#04060f;border:1px solid rgba(34,211,255,.42); color:var(--white);border-radius:11px;padding:15px; font:16px/1.3 var(--police-mono);letter-spacing:.18em;text-align:center} .champ::placeholder{color:#4c6a8f} .champ:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 22px rgba(34,211,255,.25)} .etiquette{display:block;font-size:11px;letter-spacing:.2em;color:var(--magenta); text-transform:uppercase;margin-bottom:9px} /* ─────────────── 7. HABILLAGE D'ÉCRAN ─────────────── Le châssis, les bandeaux d'information et le grain de balayage : c'est ce qui fait « instrument de bord » sur les deux applications. */ .chassis{position:fixed;inset:1.4vh 1.4vw;top:calc(1.4vh + var(--barre-haut)); z-index:56;pointer-events:none;border-radius:10px;border:1px solid rgba(34,211,255,.2)} .chassis::before,.chassis::after{content:"";position:absolute;width:42px;height:42px} .chassis::before{left:-1px;top:-1px;border-left:2px solid var(--cyan);border-top:2px solid var(--cyan)} .chassis::after{right:-1px;bottom:-1px;border-right:2px solid var(--magenta);border-bottom:2px solid var(--magenta)} .hud{position:fixed;left:0;right:0;z-index:56;display:flex;justify-content:space-between; padding:0 4.5vw;font-size:clamp(9px,1.05vw,12px);letter-spacing:.28em; pointer-events:none;color:#4f74a5;text-transform:uppercase} .hud.haut{top:calc(3vh + var(--barre-haut))} .hud.bas{bottom:3vh} .hud b{color:var(--cyan);font-weight:400} .hud i{color:var(--magenta);font-style:normal} /* Le balayage horizontal, sur toute la page. */ .grain{position:fixed;inset:0;z-index:58;pointer-events:none;opacity:.45; background:repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 3px,rgba(0,0,0,.3) 3px 4px)} .vig{position:fixed;inset:0;z-index:57;pointer-events:none; background:radial-gradient(130% 95% at 50% 45%,transparent 40%,rgba(0,0,0,.9))} /* Fond de page pour les pages « document » (galerie, photo, dépôt…) */ .fond-faille{background-image: radial-gradient(85% 50% at 50% 0%,rgba(34,211,255,.12),transparent 60%), radial-gradient(75% 45% at 50% 100%,rgba(232,60,255,.12),transparent 60%)} /* ─────────────── 8. ANIMATIONS PARTAGÉES ─────────────── */ .blink{animation:s40-blink 1.4s steps(1,end) infinite} @keyframes s40-blink{50%{opacity:.2}} .pulse{animation:s40-pulse 2.4s ease-in-out infinite} @keyframes s40-pulse{0%,100%{opacity:.58;transform:scale(.985)}50%{opacity:1;transform:scale(1.02)}} @keyframes s40-pop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}} .pop{animation:s40-pop .5s cubic-bezier(.2,1.5,.4,1) both}