/* ========================================================================= OURAYA CLOUD · CHARTE « LA LUMIÈRE » ------------------------------------------------------------------------- Retenue par Johann le 28/09/2026, d'après la maquette public/essais/lumiere/. Ce fichier est la CHARTE COMMUNE des pages en ligne : page de vente, page Sécurité, outil de dépôt. Il pose les jetons, la typographie, les surfaces, les commandes, les formulaires, et les trois pièces que toutes les pages partagent : la barre, le pied et la lampe. Il ne connaît aucune section particulière ; chaque page ajoute sa propre feuille par-dessus (vente.css, securite.css, transfert.css). LE PRINCIPE PHYSIQUE : il existe UNE source de lumière, en haut de page, légèrement à gauche. Les arêtes hautes s'allument, les ombres tombent vers le bas, et c'est le visiteur qui promène un petit faisceau. Là où il tombe, un mur de texte chiffré apparaît : on voit la matière, jamais un contenu. LE MODE. Le jour est le défaut, la nuit suit le réglage du système, et le bouton de la barre force l'un ou l'autre (attribut data-theme="clair" ou "sombre" sur , retenu sous la clé « ouraya-mode », la même que la charte précédente). Tout ce qui change d'un mode à l'autre est un JETON : aucune règle en aval n'écrit « si c'est le jour ». C'est ce qui permet de suivre le système sans dupliquer chaque règle. 🚨 LES DEUX BLOCS « NUIT » PLUS BAS SONT IDENTIQUES, EXPRÈS. L'un sert le réglage du système, l'autre le choix forcé. Une requête média ne se combine pas avec un sélecteur dans une même règle. Toute retouche de l'un se reporte dans l'autre. AUCUNE REQUÊTE SORTANTE. Polices servies depuis le domaine, grain produit par un filtre SVG écrit dans la feuille. ========================================================================= */ /* --------------------------------------------------------------- POLICES -- */ /* SORA, variable de 100 à 800 : les titres. Les graisses fines ne descendent jamais sous 32 px, où elles cassent. */ @font-face{ font-family:Sora; src:url(/fonts/sora-latin-wght-normal.woff2) format("woff2"); font-weight:100 800; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC; } @font-face{ font-family:Sora; src:url(/fonts/sora-latin-ext-wght-normal.woff2) format("woff2"); font-weight:100 800; font-style:normal; font-display:swap; unicode-range:U+0100-02AF,U+1E00-1EFF; } /* BRICOLAGE GROTESQUE : le texte courant. */ @font-face{ font-family:Bricolage; src:url(/fonts/bricolage-grotesque-200-800-normal-latin.woff2) format("woff2"); font-weight:200 800; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC; } @font-face{ font-family:Bricolage; src:url(/fonts/bricolage-grotesque-200-800-normal-latin-ext.woff2) format("woff2"); font-weight:200 800; font-display:swap; unicode-range:U+0100-02AF,U+1E00-1EFF; } /* JETBRAINS MONO : l'instrumentation (sur-titres, relevés, champs). */ @font-face{ font-family:JetBrains; src:url(/fonts/jetbrains-mono-400-normal-latin.woff2) format("woff2"); font-weight:400; font-display:swap; } /* INSTRUMENT SERIF : un seul emploi, le mot arabe du pied de page. */ @font-face{ font-family:Instrument; src:url(/fonts/instrument-serif-400-italic-latin.woff2) format("woff2"); font-weight:400; font-style:italic; font-display:swap; } /* ------------------------------------------------------------- LA LAMPE -- Les coordonnées du point éclairé sont déclarées au navigateur pour qu'il sache les interpoler. La valeur initiale doit être absolue. */ @property --lx{syntax:"";inherits:true;initial-value:280px} @property --ly{syntax:"";inherits:true;initial-value:300px} @property --lampe-angle{syntax:"";inherits:true;initial-value:42deg} @property --lampe-portee{syntax:"";inherits:true;initial-value:600px} /* ======================================================= JETONS COMMUNS == */ :root{ /* La tache de lumière reste PETITE : une lampe de poche, pas un projecteur. Johann, 28/09 : « un petit truc qui suit la souris, c'est bien et suffisant ». 88 px sur téléphone, plus bas. */ --lampe-rayon:118px; --lx:280px; --ly:300px; /* Le point d'où part la lumière, hors champ en haut à gauche. */ --sx:16vw; --sy:-7vh; --angle-lumiere:9deg; /* Le panneau est sombre dans les deux modes : son accent l'est aussi. */ --panneau-accent:#FFD9A0; --r-net:2px; --r-bloc:4px; --r-pastille:999px; --large:1220px; --etroit:64ch; --marge:24px; /* La barre : haute en haut de page (logotype vertical), compacte dès qu'on lit (logotype horizontal). La hauteur haute est RÉSERVÉE en permanence : le passage de l'une à l'autre ne déplace rien. */ --barre-compacte:84px; --barre-haute:200px; --logo-v:150px; /* hauteur VISIBLE du logotype vertical */ --logo-h:44px; /* hauteur VISIBLE du logotype horizontal */ --f-titre:Sora,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --f-texte:Bricolage,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --f-technique:JetBrains,ui-monospace,SFMono-Regular,Menlo,monospace; --f-serif:Instrument,"Iowan Old Style",Palatino,Georgia,serif; --sortie:cubic-bezier(.16,.84,.30,1); --entree-sortie:cubic-bezier(.65,0,.35,1); } /* ============================================================== JOUR == Le défaut. La même scène, éclairée par le soleil : la source n'émet plus, elle éclaire ; un relief se lit par son ombre ; le grain baisse. */ :root, :root[data-theme="clair"]{ color-scheme:light; --fond-abysse:#E7E0D1; --fond:#F7F3EA; --fond-creux:#F1ECE0; --surface:#FFFFFF; --surface-haute:#FFFFFF; --trait:#E3DCCD; --trait-net:#CFC6B3; --arete-lumiere:rgba(255,255,255,.9); --arete-lumiere-faible:rgba(255,255,255,.55); --arete-ombre:rgba(63,52,32,.10); --texte:#141D2E; --texte-doux:#46526A; --texte-faible:#616B7D; --texte-inverse:#F7F3EA; --accent:#92540A; /* 5,4 sur --fond, tenable en texte courant */ --accent-clair:#B87418; --accent-aplat:#E8A33D; /* l'aplat garde l'ambre vif du logotype */ --sur-accent:#1A1205; --accent-voile:rgba(232,163,61,.16); --accent-trait:rgba(146,84,10,.32); --alerte:#B23A22; --alerte-voile:rgba(178,58,34,.09); --faisceau-coeur:rgba(255,252,244,.92); --faisceau-mi:rgba(255,241,214,.34); --faisceau-melange:normal; --faisceau-opacite:.9; --source-eclat:rgba(255,224,170,1); --source-halo:rgba(232,163,61,.5); --halo:rgba(232,163,61,.14); --fente-opacite:.8; /* Le mur de chiffré : de jour il s'assombrit et se multiplie au papier, comme une impression qui transparaît. Plus discret que de nuit. */ --mur-encre:#8A6A2E; --mur-opacite:.22; --mur-melange:multiply; --eclat-titre:var(--accent); --matiere:#DDD5C4; --matiere-vive:#8A5A12; --ombre-courte:0 1px 0 rgba(63,52,32,.08); --ombre-portee:0 22px 40px -28px rgba(56,44,22,.34); --ombre-profonde:0 50px 80px -50px rgba(56,44,22,.42); --creux-ombre:inset 0 2px 4px rgba(63,52,32,.07); --grain-force:.03; --grain-melange:multiply; /* Le panneau soustrait à la lumière : un aplat encré au milieu du papier. */ --panneau-fond:#111A2B; --panneau-texte:#EDE8DE; --panneau-doux:#AAB4C4; --panneau-trait:rgba(255,255,255,.12); /* Logotypes : lequel des deux fichiers est affiché. */ --logo-jour:block; --logo-nuit:none; --logo-cloud-v:url(/logo-cloud-vertical.png); --logo-cloud-h:url(/logo-cloud-horizontal.png); --pastille-x:16px; } /* ============================================================== NUIT == Le mode dans lequel la charte a été dessinée. Le fond n'est pas noir : un noir pur écrase les dégradés. La nuit, la source ÉMET, donc « screen ». 🚨 Bloc répété à l'identique juste après : voir l'en-tête du fichier. */ @media (prefers-color-scheme:dark){ :root:not([data-theme="clair"]){ color-scheme:dark; --fond-abysse:#03060C; --fond:#070C15; --fond-creux:#0A111C; --surface:#0E1724; --surface-haute:#141F30; --trait:#1B2635; --trait-net:#2A3A4F; --arete-lumiere:rgba(255,214,160,.14); --arete-lumiere-faible:rgba(255,214,160,.06); --arete-ombre:rgba(0,0,0,.55); --texte:#E9E4DA; --texte-doux:#A7B0BF; --texte-faible:#818C9E; --texte-inverse:#0B0F18; --accent:#FFB648; --accent-clair:#FFD9A0; --accent-aplat:#FFB648; --sur-accent:#150D01; --accent-voile:rgba(255,182,72,.12); --accent-trait:rgba(255,182,72,.34); --alerte:#F08A70; --alerte-voile:rgba(224,100,75,.12); --faisceau-coeur:rgba(255,186,90,.20); --faisceau-mi:rgba(255,150,40,.085); --faisceau-melange:screen; --faisceau-opacite:1; --source-eclat:rgba(255,205,135,.95); --source-halo:rgba(255,166,56,.42); --halo:rgba(255,178,74,.16); --fente-opacite:1; --mur-encre:#FFD9A0; --mur-opacite:.26; --mur-melange:normal; --eclat-titre:#FFD9A0; --matiere:#182231; --matiere-vive:#FFC978; --ombre-courte:0 2px 0 rgba(0,0,0,.45); --ombre-portee:0 26px 50px -34px rgba(0,0,0,.9); --ombre-profonde:0 60px 90px -60px rgba(0,0,0,1); --creux-ombre:inset 0 2px 5px rgba(0,0,0,.22); --grain-force:.055; --grain-melange:overlay; --panneau-fond:#02050A; --panneau-texte:#DDD9D0; --panneau-doux:#98A2B2; --panneau-trait:rgba(255,255,255,.09); --logo-jour:none; --logo-nuit:block; --logo-cloud-v:url(/logo-cloud-vertical-sombre.png); --logo-cloud-h:url(/logo-cloud-horizontal-sombre.png); --pastille-x:0px; } } :root[data-theme="sombre"]{ color-scheme:dark; --fond-abysse:#03060C; --fond:#070C15; --fond-creux:#0A111C; --surface:#0E1724; --surface-haute:#141F30; --trait:#1B2635; --trait-net:#2A3A4F; --arete-lumiere:rgba(255,214,160,.14); --arete-lumiere-faible:rgba(255,214,160,.06); --arete-ombre:rgba(0,0,0,.55); --texte:#E9E4DA; --texte-doux:#A7B0BF; --texte-faible:#818C9E; --texte-inverse:#0B0F18; --accent:#FFB648; --accent-clair:#FFD9A0; --accent-aplat:#FFB648; --sur-accent:#150D01; --accent-voile:rgba(255,182,72,.12); --accent-trait:rgba(255,182,72,.34); --alerte:#F08A70; --alerte-voile:rgba(224,100,75,.12); --faisceau-coeur:rgba(255,186,90,.20); --faisceau-mi:rgba(255,150,40,.085); --faisceau-melange:screen; --faisceau-opacite:1; --source-eclat:rgba(255,205,135,.95); --source-halo:rgba(255,166,56,.42); --halo:rgba(255,178,74,.16); --fente-opacite:1; --mur-encre:#FFD9A0; --mur-opacite:.26; --mur-melange:normal; --eclat-titre:#FFD9A0; --matiere:#182231; --matiere-vive:#FFC978; --ombre-courte:0 2px 0 rgba(0,0,0,.45); --ombre-portee:0 26px 50px -34px rgba(0,0,0,.9); --ombre-profonde:0 60px 90px -60px rgba(0,0,0,1); --creux-ombre:inset 0 2px 5px rgba(0,0,0,.22); --grain-force:.055; --grain-melange:overlay; --panneau-fond:#02050A; --panneau-texte:#DDD9D0; --panneau-doux:#98A2B2; --panneau-trait:rgba(255,255,255,.09); --logo-jour:none; --logo-nuit:block; --logo-cloud-v:url(/logo-cloud-vertical-sombre.png); --logo-cloud-h:url(/logo-cloud-horizontal-sombre.png); --pastille-x:0px; } /* ================================================================== BASE == */ *,*::before,*::after{box-sizing:border-box} /* L'attribut « hidden » gagne toujours. Les outils (dépôt, liste d'attente) masquent leurs étapes et leurs messages par cet attribut : une règle « display:grid » posée plus loin ne doit jamais les faire réapparaître. */ [hidden]{display:none !important} html{ scroll-behavior:smooth; /* Une ancre ne tombe pas sous la barre collante. */ scroll-padding-top:calc(var(--barre-compacte) + 16px); -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--fond); color:var(--texte); font-family:var(--f-texte); font-size:17px; line-height:1.62; font-weight:380; letter-spacing:-.005em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; /* « clip » et non « hidden » : « hidden » crée un conteneur de défilement et casse « position:sticky ». */ overflow-x:clip; } /* LE GRAIN. Fixé, non cliquable, immobile. Sans lui, un dégradé ambre sur du bleu nuit se casse en bandes sur un écran 8 bits. */ body::after{ content:""; position:fixed; inset:0; z-index:80; pointer-events:none; opacity:var(--grain-force); mix-blend-mode:var(--grain-melange); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"); } img{max-width:100%;height:auto;display:block} ::selection{background:var(--accent-aplat);color:var(--sur-accent)} :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-net); } .evitement{ position:fixed; top:12px; left:12px; z-index:200; transform:translateY(-200%); background:var(--accent-aplat); color:var(--sur-accent); padding:10px 18px; border-radius:var(--r-net); font:600 14px/1 var(--f-technique); text-decoration:none; transition:transform .2s var(--sortie); } .evitement:focus-visible{transform:translateY(0)} /* ========================================================== TYPOGRAPHIE == Échelle discontinue : l'affiche (graisse 200), le titre de section (300), l'intitulé (500), le texte courant (17), l'instrument (12, monospace). */ h1,h2,h3,h4{ font-family:var(--f-titre); margin:0; letter-spacing:-.035em; text-wrap:balance; } h1,.affiche{ font-weight:200; font-size:clamp(2.4rem,6.4vw,5.6rem); line-height:.98; letter-spacing:-.045em; } .affiche em,h1 em{font-style:normal;font-weight:500} h2,.titre-section{ font-weight:300; font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.06; } h3,.intitule{ font-weight:500; font-size:1.3rem; line-height:1.32; letter-spacing:-.022em; } /* Le sur-titre : une graduation d'instrument, avec un tiret de conduite. */ .sur-titre{ display:flex; align-items:center; gap:14px; margin:0 0 22px; font:400 11.5px/1.3 var(--f-technique); letter-spacing:.2em; text-transform:uppercase; color:var(--accent); } .sur-titre::before{ content:""; width:clamp(20px,4vw,56px); height:1px; background:linear-gradient(to right,transparent,var(--accent-trait)); flex:none; } .chapo{ font-size:clamp(1.05rem,1.55vw,1.28rem); line-height:1.62; color:var(--texte-doux); font-weight:360; margin:0; } .mesure{max-width:var(--etroit)} .mention{ font-size:.86rem; line-height:1.55; color:var(--texte-faible); margin:0; } .serif{font-family:var(--f-serif);font-style:italic;font-weight:400} .instrument{ font:400 12px/1.5 var(--f-technique); letter-spacing:.04em; color:var(--texte-faible); font-variant-numeric:tabular-nums; } .mono{font-family:var(--f-technique);font-size:.9em;letter-spacing:-.01em} p{margin:0 0 1.1em} p:last-child{margin-bottom:0} strong,b{font-weight:600} a{color:var(--texte);text-decoration-color:var(--accent-trait);text-underline-offset:.22em} a:hover{text-decoration-color:var(--accent)} /* Le lien accentué : son soulignement se dessine au survol. */ .lien{ position:relative; display:inline-flex; align-items:center; gap:10px; color:var(--accent); font-family:var(--f-technique); font-size:13px; letter-spacing:.04em; text-decoration:none; padding-bottom:4px; } .lien::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--accent); transform:scaleX(.18); transform-origin:left; transition:transform .45s var(--sortie); } .lien:hover::after,.lien:focus-visible::after{transform:scaleX(1)} /* ================================================================ TRAME == Le conteneur de largeur ne porte QUE du padding horizontal, les sections QUE du padding vertical. Mélanger les deux les fait s'écraser. */ .w{width:100%;max-width:var(--large);margin-inline:auto;padding-inline:var(--marge)} /* « .mesure » est déclarée avant « .w » : sans cette règle explicite, elle n'aurait aucun effet sur un conteneur de largeur. */ .w.mesure{max-width:calc(var(--etroit) + 2 * var(--marge))} section{padding-block:clamp(72px,10vw,150px);position:relative} /* La tête de section : sur-titre, titre, chapô. */ .tete{margin-bottom:clamp(40px,5.5vw,70px);max-width:70ch} .tete h2{margin-bottom:18px} .milieu{text-align:center} .milieu .sur-titre{justify-content:center} .milieu .sur-titre::after{ content:""; width:clamp(20px,4vw,56px); height:1px; background:linear-gradient(to left,transparent,var(--accent-trait)); flex:none; } .milieu .chapo,.milieu .mention{margin-inline:auto} /* ============================================================= SURFACES == UNE seule recette de relief : liseré clair en haut, liseré très faible à gauche, ombre en bas. « carte » est le nom historique des pages en ligne. */ .surface,.carte{ background:var(--surface); border:1px solid var(--trait); border-radius:var(--r-bloc); box-shadow:inset 0 1px 0 var(--arete-lumiere), inset 1px 0 0 var(--arete-lumiere-faible), var(--ombre-portee); } .carte{padding:clamp(22px,2.6vw,32px)} .surface-creuse{ background:var(--fond-creux); border:1px solid var(--trait); border-radius:var(--r-bloc); box-shadow:inset 0 1px 0 var(--arete-lumiere-faible); } .grille{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(auto-fit,minmax(min(272px,100%),1fr))} /* Le filet s'allume au centre, là où la source tombe. */ .filet{ height:1px; border:0; margin:0; background:linear-gradient(to right,transparent,var(--trait-net) 22%,var(--trait-net) 78%,transparent); } /* LE PANNEAU SOUSTRAIT À LA LUMIÈRE. Plus sombre que ce qui l'entoure dans les deux modes, et il couvre le mur : c'est l'endroit où l'on dit ce qu'on ne sait pas faire, et où l'on cesse d'éclairer joliment. */ .panneau{ background:var(--panneau-fond); color:var(--panneau-texte); border-block:1px solid var(--panneau-trait); } .panneau h2,.panneau h3{color:var(--panneau-texte)} .panneau p,.panneau .mention,.panneau .chapo{color:var(--panneau-doux)} .panneau .sur-titre{color:var(--panneau-accent)} .panneau strong{color:var(--panneau-texte)} /* ============================================================= COMMANDES == */ .btn{ --fond-btn:var(--accent-aplat); --texte-btn:var(--sur-accent); position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 26px; border:1px solid transparent; border-radius:var(--r-net); background:var(--fond-btn); color:var(--texte-btn); font-family:var(--f-titre); font-weight:600; font-size:.95rem; line-height:1.2; letter-spacing:-.01em; text-align:center; text-decoration:none; cursor:pointer; overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), var(--ombre-courte); transition:transform .3s var(--sortie), box-shadow .3s var(--sortie), border-color .3s var(--sortie); } /* Le reflet qui traverse le bouton au survol, depuis la gauche, une fois. */ .btn::after{ content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%); transform:translateX(-110%); transition:transform .7s var(--sortie); pointer-events:none; } .btn:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 26px -14px var(--source-halo)} .btn:hover::after{transform:translateX(110%)} .btn:active{transform:translateY(0)} .btn.creux{ --fond-btn:transparent; --texte-btn:var(--texte); border-color:var(--trait-net); box-shadow:inset 0 1px 0 var(--arete-lumiere-faible); } .btn.creux:hover{border-color:var(--accent-trait);box-shadow:inset 0 1px 0 var(--arete-lumiere)} .btn.creux::after{background:linear-gradient(105deg,transparent 30%,var(--accent-voile) 48%,transparent 66%)} .panneau .btn.creux{--texte-btn:var(--panneau-texte);border-color:var(--panneau-trait)} .btn[disabled]{opacity:.5;cursor:not-allowed;transform:none} .btn[disabled]::after{display:none} /* Le fanion : une étiquette d'instrument, pour « Gratuit » ou « Le plus choisi ». */ .fanion{ display:inline-block; margin:0 0 12px; padding:5px 10px; background:var(--accent-voile); border:1px solid var(--accent-trait); border-radius:var(--r-net); font:400 10.5px/1 var(--f-technique); letter-spacing:.16em; text-transform:uppercase; color:var(--accent); } /* ============================================================ FORMULAIRE == Le champ est creusé dans la surface ; le focus l'allume par le bas. Deux balisages coexistent :

…

et …. */ .champ{display:flex;flex-direction:column;gap:9px;margin:0 0 18px} .champ > label, .champ > span{ font:400 11.5px/1.35 var(--f-technique); letter-spacing:.14em; text-transform:uppercase; color:var(--texte-faible); } .champ input,.champ select,.champ textarea{ appearance:none; -webkit-appearance:none; width:100%; padding:15px 16px; background:var(--fond-creux); border:1px solid var(--trait); border-radius:var(--r-net); box-shadow:var(--creux-ombre); color:var(--texte); font-family:var(--f-texte); font-size:1rem; line-height:1.45; transition:border-color .25s, box-shadow .25s; } .champ textarea{resize:vertical;min-height:80px} .champ select{ /* Le chevron est tracé dans la feuille : zéro requête, et il suit la couleur du texte dans les deux modes. */ background-image:linear-gradient(45deg,transparent 50%,currentColor 50%), linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 20px) calc(50% - 2px),calc(100% - 15px) calc(50% - 2px); background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:44px; cursor:pointer; } .champ input::placeholder,.champ textarea::placeholder{color:var(--texte-faible);opacity:.7} .champ input:focus,.champ select:focus,.champ textarea:focus{ outline:none; border-color:var(--accent-trait); box-shadow:var(--creux-ombre),0 0 0 1px var(--accent-trait),0 8px 24px -16px var(--source-halo); } .champ input:focus-visible,.champ select:focus-visible,.champ textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .champ input[readonly]{font-family:var(--f-technique);font-size:.86rem;color:var(--texte-doux)} /* Le piège à robots : sorti de l'écran sans « display:none », que certains automates détectent. */ .piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* La réponse d'un formulaire : un filet d'accent, un voile. L'erreur prend la couleur d'alerte ; « ok » et « info » gardent l'ambre. */ .reponse{ margin:16px 0 0; padding:13px 16px; border-left:2px solid var(--accent); background:var(--accent-voile); border-radius:0 var(--r-net) var(--r-net) 0; color:var(--texte); font-size:.93rem; line-height:1.5; } .reponse[data-ton="erreur"]{border-left-color:var(--alerte);background:var(--alerte-voile)} /* ============================================================ QUESTIONS == */ details{border-bottom:1px solid var(--trait)} details summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:26px; padding:22px 0; font-family:var(--f-titre); font-weight:450; font-size:1.08rem; line-height:1.4; letter-spacing:-.018em; color:var(--texte); transition:color .25s; } details summary::-webkit-details-marker{display:none} details summary:hover{color:var(--accent)} /* La croix : deux filets dont l'un pivote. */ details summary .croix{position:relative;flex:none;width:15px;height:15px} details summary .croix::before, details summary .croix::after{ content:""; position:absolute; left:0; top:7px; width:15px; height:1px; background:currentColor; transition:transform .4s var(--sortie); } details summary .croix::after{transform:rotate(90deg)} details[open] summary{color:var(--accent)} details[open] summary .croix::after{transform:rotate(0)} details .reponse-texte{ padding:0 0 26px; max-width:70ch; color:var(--texte-doux); font-size:.99rem; } details[open] .reponse-texte{animation:deplier .5s var(--sortie) both} @keyframes deplier{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} /* ================================================================ LAMPE == Trois couches sous le contenu, pilotées par --lx et --ly, que pose lumiere.js. Balisage attendu, en tête de : */ .lampe{ position:fixed; inset:0; z-index:0; pointer-events:none; contain:layout paint; } /* LE MUR DE CHIFFRÉ. Fixe, entièrement masqué hors du faisceau : au repos, la page a l'air parfaitement sobre. */ .matiere{ position:absolute; inset:-2vh -2vw; font:400 11px/1.75 var(--f-technique); letter-spacing:.34em; color:var(--mur-encre); opacity:var(--mur-opacite); mix-blend-mode:var(--mur-melange); white-space:pre; overflow:hidden; user-select:none; -webkit-mask-image:radial-gradient(circle var(--lampe-rayon) at var(--lx) var(--ly), #000 0%, rgba(0,0,0,.78) 32%, rgba(0,0,0,.24) 62%, transparent 80%); mask-image:radial-gradient(circle var(--lampe-rayon) at var(--lx) var(--ly), #000 0%, rgba(0,0,0,.78) 32%, rgba(0,0,0,.24) 62%, transparent 80%); } /* LE FAISCEAU : un cône ancré à la source, tourné vers le point éclairé. */ .faisceau{ position:absolute; left:var(--sx); top:var(--sy); width:var(--lampe-portee); height:calc(var(--lampe-portee) * 1.25); transform-origin:0 50%; transform:translateY(-50%) rotate(var(--lampe-angle)); background:linear-gradient(to right, var(--faisceau-coeur) 0%, var(--faisceau-mi) 42%, transparent 86%); clip-path:polygon(0 46%, 100% 2%, 100% 98%, 0 54%); mix-blend-mode:var(--faisceau-melange); opacity:var(--faisceau-opacite); will-change:transform; } /* Le contenu passe DEVANT la lumière, par son rang dans le document et SANS z-index : un z-index créerait un contexte d'empilement, et le cône du hero n'aurait plus rien à éclairer. */ main,.pied{position:relative} /* LA SOURCE DU HERO : la fente qui émet, et le cône qui tombe sur le titre. */ .hero{position:relative;overflow:hidden} .source{ position:absolute; top:-14vh; left:0; right:0; height:120vh; pointer-events:none; z-index:-1; } .source .cone{ position:absolute; top:0; left:var(--sx); width:min(74vw,900px); height:100%; transform:translateX(-46%) rotate(var(--angle-lumiere)); transform-origin:50% 0; background:linear-gradient(to bottom, var(--faisceau-coeur) 0%, var(--faisceau-mi) 34%, transparent 78%); clip-path:polygon(43% 0, 57% 0, 100% 100%, 0 100%); mix-blend-mode:var(--faisceau-melange); opacity:.75; } @supports (animation-timeline:scroll()){ .source .cone{ animation:puits linear both; animation-timeline:scroll(root block); animation-range:0 90vh; } @keyframes puits{ from{transform:translateX(-46%) rotate(var(--angle-lumiere)) translateY(0)} to{transform:translateX(-46%) rotate(var(--angle-lumiere)) translateY(-16vh)} } } /* LA FENTE, l'émetteur. Fixe, visible : c'est elle qui donne au faisceau une origine que l'œil peut désigner. */ .fente{ position:fixed; left:var(--sx); top:0; width:clamp(120px,22vw,300px); height:2px; transform:translate(-50%,0) rotate(var(--angle-lumiere)); background:linear-gradient(to right,transparent,var(--source-eclat),transparent); box-shadow:0 0 26px 3px var(--source-halo); opacity:var(--fente-opacite); z-index:1; pointer-events:none; } /* La même fente, retournée, en bas de la dernière section : la page se referme sur sa propre source. La section qui la porte est en « overflow:hidden ». */ .fente-basse{ position:absolute; top:auto; bottom:0; left:50%; width:min(70vw,720px); transform:translateX(-50%) rotate(calc(var(--angle-lumiere) * -1)); opacity:.7; } /* LE TITRE ÉCLAIRÉ. Le dégradé est attaché à la fenêtre : il suit le point éclairé sans conversion de coordonnées. Le texte ne devient transparent que si le découpage est pris en charge. */ @supports ((-webkit-background-clip:text) or (background-clip:text)){ .eclaire{ background-image: radial-gradient(circle calc(var(--lampe-rayon) * 1.55) at var(--lx) var(--ly), var(--eclat-titre) 0%, transparent 72%), linear-gradient(var(--texte),var(--texte)); background-attachment:fixed; -webkit-background-clip:text; background-clip:text; color:transparent; } } /* L'invitation à promener la lumière : pointeur fin seulement, retirée au premier mouvement. */ .invite-lampe{ display:flex; align-items:center; gap:9px; letter-spacing:.14em; text-transform:uppercase; font-size:10.5px; color:var(--texte-faible); opacity:0; transition:opacity .8s var(--sortie); } .invite-lampe.montree{opacity:1} .invite-point{ width:6px;height:6px;border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--source-halo); animation:battement 2.6s var(--entree-sortie) infinite; } @keyframes battement{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}} /* ================================================================ BARRE == LE LOGOTYPE QUI SE REPLIE. En haut de page, le logotype vertical, grand ; dès qu'on lit, il cède la place au logotype horizontal dans une barre compacte et collante. Trois décisions tiennent l'ensemble : 1. La hauteur haute est RÉSERVÉE, toujours. L'en-tête mesure --barre-haute et colle à « top: compacte − haute » : en défilant, il remonte jusqu'à ne laisser voir que sa rangée du bas… sauf que la rangée est elle-même collante (top:0) à l'intérieur : elle reste en haut de l'écran pendant tout le trajet. Aucune hauteur ne s'anime, rien ne saute dans la page. 2. Seuls « opacity » et « transform » bougent : fondu enchaîné, le vertical se replie par une échelle vers le coin, l'horizontal se pose. 3. Le déclencheur est un IntersectionObserver (lumiere.js) qui pose « .compacte ». Sans script, l'extrait de tête ne pose pas « avec-js » : la barre reste compacte, horizontale, et rien ne dépend du mouvement. Les deux logotypes sont des images de FOND, portées par des jetons : seul le fichier du mode affiché est téléchargé. Les PNG ont de larges marges transparentes ; les tailles et positions ci-dessous les rognent, calculées sur la zone réellement dessinée (horizontal : 959 × 235 dans 1310 × 540, à 211 / 152 ; vertical : 962 × 750 dans 1260 × 1200, à 147 / 272). */ .barre{ position:sticky; top:0; z-index:60; height:var(--barre-compacte); } .avec-js .barre{ top:calc(var(--barre-compacte) - var(--barre-haute)); height:var(--barre-haute); } .barre-rangee{ position:sticky; top:0; height:var(--barre-compacte); border-bottom:1px solid transparent; transition:background-color .4s var(--sortie), border-color .4s var(--sortie); } /* La rangée ne devient une surface qu'au moment où du contenu passe dessous. */ .barre.compacte .barre-rangee, html:not(.avec-js) .barre-rangee{ background:color-mix(in srgb, var(--fond) 86%, transparent); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); border-bottom-color:var(--trait); } .barre-corps{ height:100%; display:flex; align-items:center; gap:clamp(14px,3vw,40px); } /* La marque réserve la place du logotype horizontal ; le vertical déborde vers le bas, dans la hauteur réservée de l'en-tête. */ .marque{ position:relative; display:block; flex:none; width:calc(var(--logo-h) * 4.081); height:var(--logo-h); text-decoration:none; } .logo-horizontal, .logo-vertical{ position:absolute; left:0; top:0; background-repeat:no-repeat; pointer-events:none; } .logo-horizontal{ width:100%; height:100%; background-image:var(--logo-cloud-h); background-size:136.6% auto; background-position:60.11% 49.84%; transform-origin:0 50%; } .logo-vertical{ display:none; width:calc(var(--logo-v) * 1.2827); height:var(--logo-v); /* Centré dans la hauteur réservée, exprimé depuis le haut de la marque. */ top:calc((var(--barre-haute) - var(--logo-v)) / 2 - (var(--barre-compacte) - var(--logo-h)) / 2); background-image:var(--logo-cloud-v); background-size:130.98% auto; background-position:49.33% 60.44%; transform-origin:0 0; } /* L'état « haut de page », avec script. */ .avec-js .logo-vertical{ display:block; transition:opacity .45s var(--sortie) .06s, transform .6s var(--sortie), visibility 0s linear 0s; } .avec-js .logo-horizontal{ opacity:0; transform:translateY(10%) scale(1.45); transition:opacity .3s var(--sortie), transform .6s var(--sortie); } /* L'état « on lit » : le vertical se replie vers le coin, l'horizontal se pose à sa place. En remontant, le chemin inverse. */ .avec-js .barre.compacte .logo-vertical{ opacity:0; visibility:hidden; transform:scale(.3); transition:opacity .3s var(--sortie), transform .6s var(--sortie), visibility 0s linear .6s; } .avec-js .barre.compacte .logo-horizontal{ opacity:1; transform:none; transition:opacity .45s var(--sortie) .08s, transform .6s var(--sortie); } /* Le logotype suit le mode : deux fichiers, un jeton. */ .logo-jour{display:var(--logo-jour)} .logo-nuit{display:var(--logo-nuit)} .barre-nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px);margin-left:auto;min-width:0} .barre-nav a{ font:400 12.5px/1 var(--f-technique); letter-spacing:.02em; color:var(--texte-doux); text-decoration:none; padding:8px 0; position:relative; white-space:nowrap; } .barre-nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--sortie); } .barre-nav a:hover,.barre-nav a[aria-current="page"]{color:var(--texte)} .barre-nav a:hover::after,.barre-nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left} /* LA BASCULE. Une réglette qui dit le mode en toutes lettres. */ .bascule{ display:inline-flex; align-items:center; gap:10px; padding:7px 12px 7px 8px; background:var(--fond-creux); border:1px solid var(--trait); border-radius:var(--r-pastille); color:inherit; font:inherit; cursor:pointer; flex:none; box-shadow:inset 0 1px 0 var(--arete-lumiere-faible); transition:border-color .3s var(--sortie); } .bascule:hover{border-color:var(--trait-net)} .bascule-piste{ position:relative; width:34px; height:18px; border-radius:var(--r-pastille); background:var(--trait); flex:none; } .bascule-pastille{ position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:var(--r-pastille); background:var(--accent-aplat); box-shadow:0 0 12px var(--source-halo); transform:translateX(var(--pastille-x)); transition:transform .42s var(--sortie); } .bascule-mot{ font:400 11.5px/1 var(--f-technique); letter-spacing:.1em; text-transform:uppercase; color:var(--texte-doux); min-width:3.4em; text-align:left; } /* La jauge de lecture. Pilotée par le défilement natif là où il existe, par le script ailleurs. (Pas « .jauge » : ce nom appartient aux barres d'avancement de l'outil de dépôt.) */ .barre-jauge{ position:absolute; left:0; right:0; bottom:-1px; height:1px; background:linear-gradient(to right,var(--accent),var(--accent-clair)); transform:scaleX(var(--avance,0)); transform-origin:left; pointer-events:none; } @supports (animation-timeline:scroll()){ .barre-jauge{ animation:jauger linear both; animation-timeline:scroll(root block); } @keyframes jauger{from{transform:scaleX(0)}to{transform:scaleX(1)}} } /* Les liens marqués « secondaire » cèdent la place en premier. */ @media (max-width:860px){ .barre-nav .secondaire{display:none} } @media (max-width:520px){ .bascule-mot{display:none} .bascule{padding:7px 8px} .barre-nav{gap:14px} } /* ================================================================= PIED == */ .pied{ padding-block:clamp(50px,6vw,80px) 34px; border-top:1px solid var(--trait); background:var(--fond-creux); } .pied-corps{ display:flex; flex-wrap:wrap; gap:36px; justify-content:space-between; align-items:flex-start; padding-bottom:36px; } .pied-marque a{display:inline-block} .pied-marque img{width:126px;margin-bottom:14px} .pied-marque .mention{max-width:44ch} .pied-liens{display:grid;gap:11px;align-content:start} .pied-liens a{ font:400 12.5px/1.2 var(--f-technique); color:var(--texte-faible); text-decoration:none; transition:color .25s; } .pied-liens a:hover{color:var(--accent)} .pied-bas{padding-top:26px} /* ================================================= RÉVÉLATION À L'ENTRÉE == RIEN n'est caché par la feuille. « voile » est posé par lumiere.js, au démarrage, et seulement s'il est capable de le retirer. */ .voile{opacity:0;transform:translateY(22px)} .voile.vu{ opacity:1; transform:none; transition:opacity .85s var(--sortie), transform .85s var(--sortie); transition-delay:var(--retard,0ms); } /* ============================================================ TÉLÉPHONE == */ @media (max-width:620px){ /* Un cercle de 118 px sur un écran de 375 couvrirait trop : le mur cesserait d'être une révélation pour devenir un fond. */ :root{ --lampe-rayon:88px; --marge:18px; --barre-compacte:64px; --barre-haute:136px; --logo-v:100px; --logo-h:30px; } } /* =================================================== MOINS DE MOUVEMENT == Tout se coupe, et rien ne reste invisible. La lumière cesse de suivre : elle se pose une fois, en haut à gauche, et n'en bouge plus. */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .voile{opacity:1 !important;transform:none !important} .invite-lampe{display:none} .lampe{--lx:26vw;--ly:34vh} .logo-vertical,.logo-horizontal{transition-delay:0s !important} }