/* =========================================================================== RefrAIme. Feuille unique. Direction retenue le 07/09/2026 : CHAMP (field). Chaque section est un aplat plein, la marque est le logo fourni, la carte une silhouette, et les six villes six aplats dont la valeur suit le soleil. Les deux autres directions montees pour comparaison (1 bit, Terminal) ont ete retirees, ainsi que le selecteur qui servait a arbitrer. Aucun framework, aucune requete tierce, aucun cookie. =========================================================================== */ /* =========================================================================== Refraime. Direction : 1 BIT. Regle unique et non negociable : aucun gris, aucun degrade, aucune ombre, aucune transparence de couleur. Chaque pixel est soit encre soit papier. Tout ce qui ressemble a un gris est une TRAME de points, calculee. Une seconde encre, mal reperee, comme sur une serigraphie. References : bitmap Macintosh 1984, tramage Atkinson, risographie. =========================================================================== */ /* ---------- 1. Fontes, auto-hebergees ---------- */ @font-face{ font-family:'Bricolage'; src:url('../fonts/bricolage-latin.woff2') format('woff2'); font-weight:420 800; font-stretch:76% 100%; font-style:normal; font-display:swap; 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; } /* Archivo : la police d'AFFICHAGE. C'est celle de tech-resolution-center (--display:"Archivo Expanded" dans son theme), et c'est aussi la reponse a un defaut mesure : Bricolage en 800 tres condense, au corps de titre, devenait illisible, les lettres se touchaient. Archivo en LARGE (wdth 112) et demi-gras ouvre le mot et se lit d'un coup d'oeil. Plages restreintes a ce qui sert : graisse 500 a 800, chasse 100 a 125. */ @font-face{ font-family:'Archivo'; src:url('../fonts/archivo-latin.woff2') format('woff2'); font-weight:500 800; font-stretch:100% 125%; font-style:normal; font-display:swap; 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; } /* ---------- 2. Jetons ---------- Deux encres, point final. `--flag` est la seconde encre, celle qui deborde. Elle change de valeur selon le fond : une encre sur papier noir parait plus claire qu'elle ne l'est, c'est vrai en impression comme a l'ecran. */ :root{ /* ⚠ Le haut de la page est BLANC : annoncer un schema sombre faisait peindre au navigateur un fond noir avant meme que la feuille ne s'applique. */ color-scheme:light; /* ⚠ Palette relevee sur ce que tech-resolution-center.com SERT REELLEMENT, pas sur son theme. Son accueil repond 503 : c'est sa page d'attente que l'on voit, et elle a sa propre palette, plus sombre que le theme. Le fond n'est PAS #042C53, c'est #06182B. Mesure au pixel sur une capture. Contrastes calcules sur le fond #06182B : blanc 17,90 AAA · #D6E3F1 13,74 AAA · #85B7EB 8,50 AAA #378ADD 4,98 AA · #185FA5 2,74 INSUFFISANT en texte 🚨 #042C53 sur #06182B ne donne que 1,27 : alterner ces deux marines est invisible. #042C53 sert de BLOC, jamais de contraste. */ --k:#06182B; /* le fond */ --k2:#042C53; /* le bloc marine */ --w:#FFFFFF; /* le blanc */ --soft:#D6E3F1; /* le texte courant sur fond sombre */ --flag:#185FA5; /* fond des boutons, seconde encre sur fond CLAIR */ --flag-neg:#85B7EB; /* seconde encre sur fond sombre */ --bright:#378ADD; /* filets et marques */ /* aplat equivalent a rgba(133,183,235,.22) pose sur #06182B : on garde des couleurs pleines plutot qu'une transparence */ --line:#223B55; --ink:var(--soft); --paper:var(--k); --spot:var(--flag-neg); --head:var(--w); --face:'Bricolage','Helvetica Neue',Arial,sans-serif; --display:'Archivo','Helvetica Neue',Arial,sans-serif; --t-display:clamp(3.75rem,16vw,14rem); --t-l:clamp(1.375rem,2.7vw,2rem); --t-m:1.0625rem; --t-s:.75rem; --pad:clamp(1rem,4.5vw,3.5rem); --gap:clamp(1.25rem,3vw,2.5rem); --cell:6px; } /* ---------- 3. Socle ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--face); font-size:var(--t-m); font-weight:420; line-height:1.42; font-variation-settings:'wdth' 100,'opsz' 16; -webkit-font-smoothing:antialiased; overflow-x:hidden; } ::selection{background:var(--spot);color:var(--paper)} img,svg,canvas{max-width:100%;display:block} a{color:inherit} :focus-visible{outline:3px solid var(--spot);outline-offset:2px} .sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0} .skip{position:absolute;left:0;top:-4rem;z-index:99;background:var(--spot);color:var(--w); padding:.7rem 1rem;font-family:var(--face);font-size:.8125rem;text-decoration:none} .skip:focus{top:0} /* ---------- 5. Structure commune aux trois directions ---------- 🚨 Ces regles etaient dans la feuille 1 bit, et les deux autres directions s'appuyaient dessus sans le savoir. Consequences mesurees : le registre sortait en puces avec le libelle colle a la valeur, et surtout le champ pot-de-miel N'ETAIT PLUS MASQUE, donc un visiteur pouvait le remplir et voir sa candidature ecartee en silence. Tout ce qui est STRUCTUREL vit ici ; chaque direction n'apporte que son habillage. */ .honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .list{list-style:none;margin:0;padding:0} .list li{display:grid} .form{margin:0} .f label{display:block} .f input,.f textarea,.f select{width:100%;appearance:none;font:inherit} .f textarea{resize:vertical;min-height:5.5rem} .f .hint{display:block} .cols p:last-child{margin-bottom:0} del,ins{text-decoration:none} /* ---------- 6. Le logo ---------- Le fichier fourni est une image : son cadre est trace a main levee, il ne se redessine pas en CSS. On en sert le tirage REVERSE (texte blanc), parce que la barre du haut est sombre dans les trois directions. Sa hauteur est donnee en em pour qu'il suive le corps de la barre. */ .top__logo{ height:1.6em;width:auto;display:block; /* le fichier fait 782x273 : au-dela de cette largeur il devient flou */ max-width:min(100%,782px); } .top__mark{display:flex;align-items:center} /* ---------- 7. Le logo ---------- C'est le LOGO fourni, pas une recomposition typographique : la marque retypographiee au corps d'affichage se lisait mal, lettres accolees. ⚠ Il existe en DEUX tirages, un par valeur de fond. En image dans le HTML, il aurait fallu poser les deux et en cacher une, donc en telecharger deux. En fond CSS, chaque direction choisit le sien et une seule part sur le reseau. role + aria-label rendent le texte du logo aux lecteurs d'ecran. ⚠ L'encre du fichier fait 782 px de large : au-dela il devient flou. Logo remplace le 28/09/2026 (uploads/2026/09/Refraime.png et -White.png, recadres sur l'encre). Anciens tirages : ~/_sauvegardes-avant-edition/refraime-logo-20260928/ */ .logo{ display:block; background-image:url('../img/logo-reverse.png?v=20260928'); /* fonds sombres */ background-repeat:no-repeat;background-position:left center;background-size:contain; aspect-ratio:782/273; } .top__mark .logo{height:1.6em;width:auto} .logo--big{width:min(100%,782px)} /* ---------- 8. Couleurs de la CARTE ---------- Le script les lit ici plutot que de les recopier : le jour ou la palette bouge, la carte suit. Defaut : trame claire sur mer sombre. */ :root{ --map-sea:var(--k); --map-land:var(--w); --map-mark:var(--flag-neg); } /* =========================================================================== Direction 3 : CHAMP. La couleur pleine. References hors web : pochettes ECM et Factory Records, affiches d'institution d'art, Experimental Jetset. Suppose base.css chargee avant. Principes : - Chaque section est un APLAT plein, bord a bord. Aucun blanc de reserve, aucun filet, aucune trame. - La typographie est monumentale et DEBORDE du cadre. - Aucune monospace : c'est ce qui separe le plus cette direction des deux autres. - Les six villes deviennent six aplats, dont la valeur suit le soleil. 🚨 Contrastes mesures : le blanc ne tient que sur #06182B (17,9), #042C53 (14,1) et #185FA5 (6,5). Sur #378ADD, #85B7EB et #D6E3F1 il tombe sous 3,6 : ces trois aplats portent du MARINE (4,98 a 13,74). =========================================================================== */ body{ font-family:var(--face); font-size:clamp(1.0625rem,1.25vw,1.1875rem); font-weight:400; font-variation-settings:'wdth' 96,'opsz' 18; line-height:1.45; background:var(--flag); color:var(--w); } /* ---------- La regle des aplats ---------- */ .champ-clair{color:var(--k)} /* aplats #378ADD, #85B7EB, #D6E3F1 */ .champ-sombre{color:var(--w)} /* aplats #06182B, #042C53, #185FA5 */ /* ---------- En-tete : une simple ligne, posee sur l'aplat ---------- */ /* =========================================================================== LA BARRE DU HAUT ET LE MENU BURGER (20/09/2026) --------------------------------------------------------------------------- MOBILE D'ABORD. Les regles de base sont celles du telephone ; les @media (min-width) ne font qu'agrandir. Aucune regle en max-width ici : une feuille ecrite a l'envers oblige a defaire en petit ce qu'on a pose en grand, et c'est la que les oublis se logent. ⚠ Le burger vaut sur TELEPHONE COMME SUR GRAND ECRAN. C'est un choix, pas un repli : la navigation est la meme partout, il n'y a donc qu'une seule mise en page a tenir et a eprouver, au lieu de deux qui divergent. ⚠ La barre est FIXE. Avec un burger pour seule navigation, une barre qui defile hors de l'ecran rend le menu inatteignable sans remonter toute la page. Deux consequences, traitees dans le script : - elle s'efface en descendant et revient en remontant, sinon elle recouvrirait le texte en permanence sur petit ecran ; - elle LIT l'aplat qui passe dessous pour choisir son encre. =========================================================================== */ .top{ position:fixed;top:0;left:0;right:0; /* 🚨 z-index SUPERIEUR a celui du volet (55). Le burger doit rester cliquable PAR-DESSUS le menu ouvert : c'est lui qui le referme. Sous le volet, il deviendrait un bouton qu'on voit et qu'on ne peut pas actionner, le pire des deux mondes. */ z-index:60; display:flex;align-items:center;gap:1rem; padding:.85rem clamp(1rem,4vw,3rem); background:transparent;border:0; /* ⚠ L'encre passe par un JETON, pas par une couleur ecrite en dur : le script y pose la couleur de texte que la bande du dessous a DEJA choisie pour elle-meme. Sans jeton, il faudrait poser un style en ligne, et le style en ligne gagnerait contre la regle du volet ouvert. */ color:var(--top-ink,var(--k)); transition:transform .42s cubic-bezier(.76,0,.24,1),color .25s linear; } @media (min-width:48rem){ .top{ padding:1.3rem clamp(1.25rem,4vw,3rem) } } .top[data-etat="cache"]{ transform:translateY(-130%) } /* ⚠ L'encre suit l'aplat qui passe DESSOUS, mesure par le script sur la couleur REELLEMENT calculee de la bande. Le site est fait de bandes dont l'editeur choisit la couleur dans l'administration : une encre figee finirait forcement invisible sur l'une d'elles, et personne ne le verrait venir. C'est aussi pour cela que le logo existe en deux tirages. */ /* ⚠ is-dark ne porte plus la couleur du texte (le jeton s'en charge) : il ne sert plus qu'au TIRAGE du logo, qui est une image et ne suit pas currentColor. C'est precisement pour cela que le fichier existe en deux versions. */ .top.is-dark .logo{ background-image:url('../img/logo-reverse.png?v=20260928') } .top__mark{ text-decoration:none;color:inherit } /* ---------- Le bouton ---------- */ .burger{ margin-left:auto; display:inline-flex;align-items:center;gap:.6rem; padding:.4rem 0;border:0;background:none;cursor:pointer; color:inherit; font-family:var(--face);font-weight:600;font-size:.8125rem; font-variation-settings:'wdth' 92;letter-spacing:.01em;line-height:1; -webkit-tap-highlight-color:transparent; } @media (min-width:48rem){ .burger{ font-size:.875rem;gap:.7rem } } /* Le mot bascule : « Menu » monte, « Fermer » prend sa place. ⚠ Les deux occupent LA MEME cellule de grille : la boite prend donc la largeur du plus long des deux mots, dans toutes les langues, sans qu'aucune largeur ne soit ecrite a la main. Avec une largeur fixe, « Fermer » aurait ete coupe en francais et personne ne l'aurait vu en relisant l'anglais. */ .burger__mot{ display:grid;overflow:hidden;height:1.2em;text-align:right } .burger__mot > span{ grid-area:1/1;display:block; transition:transform .42s cubic-bezier(.76,0,.24,1); } .burger__mot-b{ transform:translateY(115%) } .burger[aria-expanded="true"] .burger__mot-a{ transform:translateY(-115%) } .burger[aria-expanded="true"] .burger__mot-b{ transform:translateY(0) } /* Deux barres qui se croisent. Les valeurs sont des JETONS et non des nombres recopies : la position de la barre basse, le decalage de la croix et l'epaisseur se deduisent tous de --h et --e. Changer l'un ne peut donc pas desaligner les autres. */ .burger__box{ --h:.875rem; --e:3px; position:relative;display:block;width:1.75rem;height:var(--h);flex:0 0 auto; } @media (min-width:48rem){ .burger__box{ --h:1rem;width:2rem } } .burger__bar{ position:absolute;left:0;width:100%;height:var(--e);background:currentColor; transition:transform .42s cubic-bezier(.76,0,.24,1), width .3s cubic-bezier(.76,0,.24,1); } .burger__bar:nth-child(1){ top:0 } .burger__bar:nth-child(2){ top:calc(var(--h) - var(--e)) } /* Au survol, la barre basse se retire : un signe de vie, sans fondu. */ .burger:hover .burger__bar:nth-child(2){ width:62% } .burger[aria-expanded="true"] .burger__bar{ width:100% } .burger[aria-expanded="true"] .burger__bar:nth-child(1){ transform:translateY(calc((var(--h) - var(--e)) / 2)) rotate(45deg); } .burger[aria-expanded="true"] .burger__bar:nth-child(2){ transform:translateY(calc((var(--h) - var(--e)) / -2)) rotate(-45deg); } /* ---------- Le volet ---------- */ .menu{ position:fixed;inset:0;z-index:55; display:grid;align-content:space-between; padding:5.5rem clamp(1rem,4vw,3rem) 2rem; padding-top:calc(5.5rem + env(safe-area-inset-top,0px)); padding-bottom:calc(2rem + env(safe-area-inset-bottom,0px)); background:var(--k);color:var(--w); overflow-y:auto;overscroll-behavior:contain; /* 🚨 Le volet ARRIVE PAR UN BALAYAGE, jamais par un fondu. Dans cette direction tout est soit encre soit papier : une opacite intermediaire fabriquerait exactement le demi-ton que la charte interdit depuis la premiere ligne de cette feuille. */ clip-path:inset(0 0 0 100%); visibility:hidden; /* ⚠ visibility a 0s AVEC DELAI : sans elle le volet resterait cliquable une fois ferme, et le lecteur d'ecran continuerait a le parcourir. Le delai est exactement la duree du balayage, sinon il disparaitrait avant d'avoir fini de sortir. */ transition:clip-path .5s cubic-bezier(.76,0,.24,1),visibility 0s linear .5s; } .menu[aria-hidden="false"]{ clip-path:inset(0 0 0 0); visibility:visible; transition:clip-path .58s cubic-bezier(.76,0,.24,1),visibility 0s linear 0s; } @media (min-width:48rem){ .menu{ padding:7rem clamp(1.25rem,4vw,3rem) 2.5rem } } .menu__inner{ display:contents } .menu__list{ list-style:none;margin:0;padding:0 } .menu__item{ position:relative;isolation:isolate } .menu__item + .menu__item{ margin-top:.06em } /* Le pave de survol balaie depuis la gauche : dans cette langue, la couleur porte, pas le point. 🚨 PAS de `z-index:-1` ici. Un pseudo-element en z-index negatif se peint au-dessus du fond de SON parent mais DERRIERE celui du contexte d'empilement : le volet ayant un fond et un clip-path, le pave aurait disparu derriere lui. D'ou `isolation:isolate` sur l'element, le pave a 0 et le lien a 1. Le meme piege a deja recouvert un bouton le 07/09. */ .menu__item::before{ content:'';position:absolute;z-index:0;inset:.1em -.4em; background:var(--flag-neg); transform:scaleX(0);transform-origin:left center; transition:transform .4s cubic-bezier(.76,0,.24,1); } .menu__item:hover::before,.menu__item:focus-within::before{ transform:scaleX(1) } .menu__lien{ position:relative;z-index:1; display:flex;align-items:baseline;gap:.5rem; color:inherit;text-decoration:none; transition:color .2s linear; } @media (min-width:48rem){ .menu__lien{ gap:.9rem } } .menu__item:hover .menu__lien,.menu__item:focus-within .menu__lien{ color:var(--k) } .menu__n{ flex:0 0 auto; font-family:var(--face);font-weight:600;font-size:.6875rem; font-variation-settings:'wdth' 92;letter-spacing:.06em; color:var(--flag-neg);transition:color .2s linear; } @media (min-width:48rem){ .menu__n{ font-size:.8125rem } } .menu__item:hover .menu__n,.menu__item:focus-within .menu__n{ color:var(--k) } /* La fenetre qui decoupe le mot : il monte depuis le bas, il n'apparait pas. */ .menu__mask{ display:block;overflow:hidden;padding-bottom:.06em } .menu__mot{ display:block; font-family:var(--display); font-variation-settings:'wght' 640,'wdth' 110; font-size:clamp(2.125rem,11vw,3.75rem); line-height:1.02;letter-spacing:-.018em; transform:translateY(108%); transition:transform .44s cubic-bezier(.76,0,.24,1); } @media (min-width:48rem){ .menu__mot{ font-size:clamp(3rem,7.5vw,5.5rem) } } /* ⚠ Le decalage n'existe QU'A L'OUVERTURE. A la fermeture, tout part ensemble : un escalier a l'envers donne l'impression que le volet accroche. */ .menu[aria-hidden="false"] .menu__mot{ transform:none; transition-duration:.6s; transition-timing-function:cubic-bezier(.22,1,.36,1); transition-delay:calc(.14s + var(--i,0) * .055s); } .menu__pied{ display:grid;gap:1.1rem; margin-top:clamp(2rem,6vh,3.5rem); clip-path:inset(0 0 100% 0); transition:clip-path .4s cubic-bezier(.76,0,.24,1); } .menu[aria-hidden="false"] .menu__pied{ clip-path:inset(0 0 0 0); transition-duration:.6s; transition-delay:calc(.18s + var(--i,0) * .055s); } @media (min-width:48rem){ .menu__pied{ grid-auto-flow:column;justify-content:space-between;align-items:end;gap:2rem } } .menu__bloc{ margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .8rem; font-family:var(--face); } .menu__k{ font-size:.75rem;font-weight:500;letter-spacing:.06em;color:var(--flag-neg) } .menu__mail{ color:inherit;text-decoration:none;font-weight:600; font-size:clamp(1rem,3vw,1.25rem); border-bottom:3px solid var(--flag-neg);padding-bottom:.06em; overflow-wrap:anywhere; } .menu__mail:hover{ border-bottom-color:var(--w) } .menu__langues{ gap:.9rem } .menu__langues a{ color:var(--flag-neg);text-decoration:none;font-weight:600; font-size:.8125rem;letter-spacing:.06em; } .menu__langues a[aria-current="true"]{ color:var(--w);text-decoration:underline; text-decoration-thickness:2px;text-underline-offset:.25em; } /* ⚠ Le verrou de defilement se pose sur html ET body : sur l'un seulement, iOS continue de faire glisser la page derriere le volet. */ html.menu-ouvert,body.menu-ouvert{ overflow:hidden } /* 🚨 La barre est FIXE : sans cette reserve, cliquer une ancre du menu amene le haut de la section EXACTEMENT sous la barre, et le titre est mange. Le defaut ne se voit pas en haut de page, seulement en cliquant. */ section[id]{ scroll-margin-top:4.5rem } @media (min-width:48rem){ section[id]{ scroll-margin-top:5.5rem } } /* Le volet est l'aplat le plus sombre du site : le bouton y passe en blanc. */ body.menu-ouvert .top{ color:var(--w) } /* ⚠ Le mouvement est un agrement, jamais le porteur de l'information : qui demande moins d'animation obtient le meme menu, instantane. */ @media (prefers-reduced-motion:reduce){ .top,.menu,.menu__mot,.menu__pied,.menu__item::before, .burger__bar,.burger__mot > span{ transition-duration:.01ms !important; transition-delay:0s !important; } } /* ---------- La couverture : un seul aplat sature ---------- */ .cover{ background:var(--flag);color:var(--w); padding:0;position:relative;overflow:hidden;min-height:100svh; display:flex;flex-direction:column;justify-content:flex-end; } /* La carte devient une SILHOUETTE plate, enorme, qui deborde par le bas. Aucune trame : dans cette langue, la couleur porte, pas le point. */ .cover__frame{ position:absolute;inset:0;aspect-ratio:auto;overflow:hidden; background:transparent;border:0;pointer-events:none; } .cover__map{ position:absolute;left:-6%;top:46%;width:118%;height:auto;aspect-ratio:2/1; transform:translateY(-42%);opacity:1; } .cover__still{display:none} .cover__type{ position:relative;z-index:2;margin:0; /* ⚠ Le mot est enorme et la couverture aligne son contenu en bas : des que le texte depasse la hauteur d'ecran, la marque remonte et RECOUVRE le logo de la barre. Cette reserve en haut la retient sous l'en-tete. */ padding:clamp(4.5rem,9vh,7rem) clamp(1.25rem,4vw,3rem) clamp(1.5rem,4vh,3rem); } /* Le mot deborde volontairement du cadre a droite. */ .word{ margin:0 0 clamp(1rem,2.5vh,2rem);padding:0; /* La marque est une IMAGE : les reglages de fonte n'ont plus d'objet, et la marge negative qui la faisait deborder ferait deborder l'image hors cadre. */ } .word__ghost{display:none} .word .ai{color:var(--w);position:static;padding:0} .word .ai::before{display:none} .claim{ margin:clamp(1rem,2.5vh,2rem) 0 clamp(.75rem,2vh,1.25rem); font-family:var(--display); font-variation-settings:'wght' 600,'wdth' 104; font-size:clamp(1.5rem,3.2vw,2.6rem); line-height:1.1;letter-spacing:-.012em; color:var(--w);max-width:24ch;text-wrap:balance; } .sub{ font-size:clamp(1rem,1.2vw,1.125rem);font-weight:400; font-variation-settings:'wdth' 96,'opsz' 18; line-height:1.4;max-width:46ch;color:var(--w); margin:0 0 clamp(1.25rem,3vh,2rem); } .rdct::after,.rdct::before{display:none} .blk{ display:inline-block;padding:.9rem 1.6rem;border:0; background:var(--w);color:var(--flag); font-family:var(--face);font-weight:600;font-size:1rem; font-variation-settings:'wdth' 92; letter-spacing:0;text-transform:none;text-decoration:none;cursor:pointer; box-shadow:none;transition:transform .18s cubic-bezier(.22,.61,.36,1); } .blk::after{display:none} .blk:hover{transform:translateX(6px);box-shadow:none;background:var(--w);color:var(--flag)} /* ---------- Les six villes : six aplats, dont la valeur suit le soleil ---- data-lum est pose par le script, de 0 (nuit profonde) a 5 (plein jour). La bande devient donc une coupe vivante du terminateur, en aplats. */ .clocks{ display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:0; position:relative;z-index:2; } @media (max-width:26rem){ .clocks{grid-template-columns:repeat(1,1fr)} } .clock{ display:block;padding:1rem clamp(.75rem,1.5vw,1.25rem) 1.1rem; background:#185FA5;color:var(--w);box-shadow:none; font-family:var(--face); transition:background .8s linear,color .8s linear; } .clock b{ display:block;font-weight:600;font-size:.8125rem; font-variation-settings:'wdth' 92;margin-bottom:.35rem;letter-spacing:0; text-transform:none;color:inherit;opacity:.85; } /* ⚠ Une couleur PAR PAVE, fixee par la position, et non plus par l'elevation solaire : Londres et Paris sont a un degre de longitude l'une de l'autre, elles tombaient donc presque toujours dans le meme palier et la bande semblait n'avoir que deux pavés. Les trois valeurs vont du plus sombre a l'ouest au plus clair a l'est, ce qui garde le sens du trajet du soleil. Contrastes verifies : blanc sur #06182B 17,9 · blanc sur #185FA5 6,5 · marine sur #85B7EB 8,5. */ /* 🚨 Londres etait en #06182B, exactement la couleur de la SECTION situee juste en dessous : les deux se fondaient et le pave n'avait plus de bord. Les trois valeurs ont ete choisies par calcul, en maximisant le plus PETIT ecart entre voisins, et non a l'oeil. Ecarts obtenus : Londres / Paris ............ 2,00 Paris / Singapour .......... 2,42 Londres / section du dessous 1,76 Singapour / heros blanc .... 2,11 Et chaque aplat porte son texte au niveau AA : blanc sur #0D4278 10,16 · blanc sur #2670BC 5,09 · marine sur #85B7EB 8,50 */ .clock:nth-child(1){background:#0D4278;color:#fff} .clock:nth-child(2){background:#2670BC;color:#fff} .clock:nth-child(3){background:#85B7EB;color:#06182B} /* Le cadran, a gauche de l'heure. Il suit le corps du texte, donc il grandit avec lui, et prend la couleur du pave. */ .clock__row{display:flex;align-items:center;gap:.55rem} /* ⚠ Le cadran se cale sur la taille de l'HEURE, pas sur celle du texte courant : a 0,82 em du corps de base il faisait 14 px a cote d'un nombre de 32 px, et ses aiguilles se confondaient en un seul trait. */ .dial{ width:clamp(1.15rem,2vw,1.65rem);height:auto;aspect-ratio:1;flex:0 0 auto; fill:none;stroke:currentColor;stroke-linecap:round;overflow:visible; } .dial circle{stroke-width:1.5} /* Les deux aiguilles se distinguent par leur epaisseur ET leur longueur, comme sur un vrai cadran. */ /* ⚠ A 18h06 les deux aiguilles sont presque opposees : de meme longueur elles dessinaient un DIAMETRE, et le cadran se lisait comme un panneau d'interdiction. L'aiguille des heures est donc tres courte (3 unites sur un rayon de 10) et plus epaisse : les deux ne peuvent plus se confondre. */ .dial .dial__h{stroke-width:2.6} .dial .dial__m{stroke-width:1.4} .dial line{transition:transform .5s cubic-bezier(.4,0,.2,1)} .clock time{ display:block;font-family:var(--face);font-weight:700; font-variation-settings:'wdth' 82,'opsz' 32; font-size:clamp(1.375rem,2.4vw,2rem);line-height:1;letter-spacing:-.02em; color:inherit; /* ⚠ Chiffres a chasse fixe. Sans cela, les secondes qui defilent changent la largeur du nombre a chaque battement et le pave tressaute. */ font-variant-numeric:tabular-nums; } /* Les secondes, discretes : plus petites, en retrait, et sans jamais pousser les minutes. */ .clock .sec{ font-size:.52em;font-weight:600; opacity:.6;letter-spacing:0;margin-left:.06em; font-variant-numeric:tabular-nums; } /* ---------- Les sections : un aplat chacune ---------- */ .band{padding:clamp(4rem,10vh,8rem) clamp(1.25rem,4vw,3rem);border:0} .wrap{max-width:74rem;margin:0} /* 🚨 Les aplats sont attaches aux IDENTIFIANTS des sections. Renommer un id dans le HTML sans le renommer ici laisse la section SANS AUCUN FOND, en silence : c'est arrive le 07/09 en passant #convener a #founder, et la section est ressortie blanche. Toute renommage se fait DES DEUX COTES. */ /* 🚨 LES APLATS NE SONT PLUS ATTACHES AUX IDENTIFIANTS (20/09/2026). Ils l'etaient : #terms, #founder, #circle, #post. C'etait deja un piege connu, mesure le 07/09 en passant #convener a #founder : la section etait ressortie SANS AUCUN FOND, en silence. Sous WordPress, ou l'editeur renomme et reordonne les sections depuis l'administration, ce piege devenait une certitude. La couleur est desormais un CHOIX, porte par une classe, et l'identifiant ne sert plus qu'a l'ancre du menu. ⚠ Les six valeurs sont celles qui existaient, pas une de plus : chacune a son contraste calcule, et toutes sont au-dessus de 4,5 pour du texte. */ .band--blanc {background:#FFFFFF;color:#06182B} /* 17,90 */ .band--encre {background:#06182B;color:#FFFFFF} /* 17,90 */ .band--marine{background:#042C53;color:#FFFFFF} /* 14,08 */ .band--bleu {background:#185FA5;color:#FFFFFF} /* 6,52 */ .band--vif {background:#378ADD;color:#06182B} /* 4,98 */ .band--pale {background:#D6E3F1;color:#06182B} /* 13,74 */ /* ⚠ Sur un aplat CLAIR, le bouton standard (#185FA5 sur #378ADD = 2,4) disparaitrait : c'est blk--dark qu'il faut y poser. Voir plus bas. */ .head-row{display:grid;gap:clamp(1.5rem,4vw,3.5rem);margin-bottom:clamp(2.5rem,6vh,4.5rem)} @media (min-width:68rem){ .head-row{grid-template-columns:minmax(0,30rem) minmax(0,1fr)} } .title{ margin:0;color:inherit; /* ⚠ Bricolage en 800 tres condense etait illisible a ce corps : les lettres se touchaient. Archivo en LARGE ouvre le mot. */ font-family:var(--display); font-variation-settings:'wght' 650,'wdth' 112; /* ⚠ Cale sur le mot le plus long. "Correspondence" fait 8,22 em, mesure dans la police : 427 px a 52 px de corps. La colonne de titre doit donc depasser cette valeur, sinon le mot deborde SUR le chapeau, un mot long ne pouvant pas se couper. */ font-size:clamp(2rem,4vw,3.25rem);line-height:1.04;letter-spacing:-.015em; text-transform:none; } .title br{display:block} .title .n{ display:block;background:none;color:inherit;opacity:.5; font-family:var(--face);font-weight:500;font-size:.28em; padding:0;margin:0 0 .4em;vertical-align:0;letter-spacing:.02em; } .first{ margin:0;color:inherit; font-weight:500;font-variation-settings:'wdth' 92,'opsz' 32; font-size:clamp(1.25rem,2.2vw,1.75rem);line-height:1.25;max-width:34ch; } .body-row{display:grid;gap:clamp(1.5rem,4vw,3.5rem)} @media (min-width:60rem){ .body-row{grid-template-columns:minmax(0,1fr) minmax(0,17rem)} } .cols{columns:2 21rem;column-gap:clamp(1.5rem,3vw,3rem);max-width:none} .cols p{margin:0 0 1.2em;color:inherit} del.cut{background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat;opacity:.55} ins.add{ font-weight:700;margin-left:.45em;padding:0; border-bottom:3px solid currentColor;color:inherit; } ins.add::before{display:none} /* Les marques deviennent de grandes affirmations posees dans l'aplat. */ .marks{display:flex;flex-direction:column;gap:clamp(1.5rem,4vh,2.5rem);padding:0} .mark{ /* Meme remarque que pour les titres : la face condensee en gras se lit mal. Archivo, en large, ouvre la citation. */ font-family:var(--display); font-variation-settings:'wght' 600,'wdth' 106; font-size:clamp(1.125rem,1.8vw,1.5rem);line-height:1.05;letter-spacing:-.02em; color:inherit;opacity:.72;max-width:14ch; transform:none;text-shadow:none; } .mark::before{content:none} /* ---------- Registre et formulaire, sans filet ---------- */ .list{border:0;display:grid;gap:0} .list li{border:0;padding:.55rem 0;grid-template-columns:minmax(6.5rem,9rem) 1fr; align-items:baseline;gap:.3rem 1.5rem} .list .k{ font-family:var(--face);font-weight:500;font-size:.9375rem; text-transform:none;letter-spacing:0;color:inherit;opacity:.6; } .list .v{font-size:1.125rem;font-weight:600;color:inherit} .list a{color:inherit;text-decoration:underline;text-decoration-thickness:2px; text-underline-offset:.2em} .form{max-width:40rem;margin-top:clamp(2rem,5vh,3rem)} .f{margin-bottom:1.35rem;display:block} .f label{ font-family:var(--face);font-weight:600;font-size:.9375rem; text-transform:none;letter-spacing:0;color:inherit;opacity:.7;margin-bottom:.4rem; } .f input,.f textarea,.f select{ border:0;border-bottom:3px solid currentColor;border-radius:0; background:transparent;color:inherit; font-family:var(--face);font-size:1.125rem;font-weight:500; padding:.45rem 0 .5rem; } .f input:focus,.f textarea:focus,.f select:focus{outline:0;background:rgba(6,24,43,.06)} .f .hint{font-family:var(--face);font-size:.875rem;text-transform:none; letter-spacing:0;opacity:.6;margin-top:.35rem} .status{font-family:var(--face);font-size:1rem;padding:0;margin-top:1rem} .status[data-state="ok"],.status[data-state="bad"]{ background:none;color:inherit;padding:0;display:block;font-weight:600; } .split{display:grid;gap:clamp(1.5rem,4vw,3.5rem)} @media (min-width:64rem){ .split{grid-template-columns:minmax(0,30rem) minmax(0,1fr)} } .foot{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)); gap:1.5rem clamp(1.5rem,4vw,3rem); margin-top:clamp(3rem,8vh,5rem); font-family:var(--face);font-size:.9375rem;line-height:1.5; } .foot p{color:inherit;opacity:.7;max-width:40ch} /* ---------- Ce que cette direction n'utilise pas ---------- */ .ramp-wrap{display:none} /* Les aplats de section sont fixes : la bascule positif/negatif n'aurait presque aucun effet ici. Un bouton qui ne fait rien est pire qu'un bouton absent, on le retire. */ /* ---------- L'introduction : une colonne, posee dans l'aplat ---------- */ .claim{max-width:24ch} .cover__intro{max-width:52ch;margin-bottom:clamp(1.25rem,3vh,2rem)} .cover__intro .sub{margin:0 0 1em;max-width:none} .cover__intro .sub:last-child{margin-bottom:0} /* =========================================================================== HEROS EN FOND BLANC (07/09/2026) Le bleu sature ecrasait le logo et la carte : sur #185FA5 le cadre du logo tombe a 1,6 de contraste et la silhouette a 2,6. Le heros passe donc au blanc, et tout ce qui s'y trouve suit : tirage du logo, carte, barre du haut, bouton. Les aplats de couleur restent, mais a partir de la bande des six villes. =========================================================================== */ .cover{background:var(--w);color:var(--k)} .cover .claim,.cover .sub{color:var(--k)} /* La carte : mer blanche, terres en bleu pale. Assez pour lire une carte, pas assez pour disputer le texte (marine sur #D6E3F1 = 13,7). */ :root{ --map-sea:#FFFFFF; --map-land:#D6E3F1; } /* Le logo prend son tirage a texte marine. */ .logo{background-image:url('../img/logo-direct.png?v=20260928')} /* La barre du haut flotte au-dessus du heros : elle devient marine. */ /* ⚠ L'encre de la barre n'est plus figee ici : elle suit l'aplat qui passe dessous (voir .top.is-dark plus haut). Les deux regles qui la posaient en marine ont ete retirees le 20/09/2026 ; les y remettre annulerait le contraste automatique sans rien signaler. */ /* Le bouton reprend la pilule : fond #185FA5, texte blanc (6,52). */ .blk{background:var(--flag);color:var(--w)} .blk:hover{background:var(--flag);color:var(--w)} /* ⚠ Le fond de page suit le HAUT de la page, pas le bas : c'est lui que l'on voit pendant le chargement, avant que les aplats de section ne soient peints. En marine, il produisait un flash sombre sur le heros. */ html,body{background:var(--w)} /* ---------- Correspondence ---------- Avant : trois fragments dans une meme bande, sans hierarchie. Le registre Email/LinkedIn etait colle sous le titre, l'adresse apparaissait deux fois cote a cote, et le pied de page flottait au milieu sans separation. Maintenant : meme structure que les autres sections (titre + chapeau), puis les deux voies d'acces en grand et cliquables, puis un pied qui est un APLAT A LUI. Dans cette direction c'est la couleur qui separe, pas un filet. */ .ways{ list-style:none;margin:clamp(2.5rem,6vh,4.5rem) 0 0;padding:0; display:grid;gap:clamp(1.75rem,4vw,3.5rem); } @media (min-width:44rem){ .ways{grid-template-columns:repeat(2,minmax(0,1fr));max-width:56rem} } .ways__k{ display:block;font-family:var(--face);font-size:.9375rem;font-weight:500; opacity:.6;margin-bottom:.45rem; } .ways__v{ display:inline-block;color:inherit;text-decoration:none; font-family:var(--display); font-variation-settings:'wght' 600,'wdth' 104; font-size:clamp(1.25rem,2.5vw,2rem); line-height:1.08;letter-spacing:-.018em; border-bottom:3px solid currentColor;padding-bottom:.1em; overflow-wrap:anywhere; /* une adresse ne doit jamais deborder du cadre */ } .ways__v:hover{opacity:.72} /* Le pied : l'aplat le plus sombre de la page, ce qui la ferme. */ .band--end{background:#06182B;color:#fff;padding-block:clamp(2.5rem,7vh,4.5rem)} .foot{ display:grid;gap:1.5rem clamp(1.5rem,4vw,3rem);margin:0; grid-template-columns:minmax(0,1fr); } @media (min-width:48rem){ .foot{grid-template-columns:minmax(0,1fr) auto;align-items:start} .foot__mark{text-align:right} } .foot p{color:inherit;opacity:.7;max-width:46ch;font-size:.9375rem;line-height:1.5} .foot__mark{opacity:.55} /* L'option d'attente du menu deroulant se distingue d'un vrai choix : tant que le champ est invalide, il s'affiche en retrait. */ .f select:invalid{opacity:.55} /* Le lien LinkedIn du fondateur, mis en evidence sous le registre. ⚠ Il vit sur l'aplat #378ADD : le bouton standard, en #185FA5, n'y ferait que 2,4 de contraste et disparaitrait. Il prend donc le marine, qui detache a 4,98 sur ce fond, avec du blanc dedans a 17,9. Le bloc decale passe en blanc, pour la meme raison. */ .blk--dark{ background:var(--k);color:var(--w); box-shadow:5px 4px 0 0 var(--w); margin-top:clamp(1.5rem,3.5vh,2.25rem); } .blk--dark:hover{background:var(--k);color:var(--w);box-shadow:0 0 0 0 var(--w)} /* =========================================================================== AJOUTS DU PASSAGE SOUS WORDPRESS (20/09/2026) Rien de ce qui precede n'a change, sauf les quatre aplats par identifiant, devenus des classes. Ce qui suit habille ce que le site ecrit a la main n'avait pas : un journal, un selecteur de langue, des pages ordinaires. =========================================================================== */ /* ⚠ Le selecteur de langue a quitte la barre du haut le 20/09/2026 : il vit maintenant dans le pied du volet (.menu__langues). Ses anciennes regles ont ete retirees plutot que laissees a trainer : du CSS qui ne s'applique plus a rien finit par etre recopie ailleurs en croyant qu'il sert. */ /* ---------- Le corps d'un article ---------- UNE colonne. Les deux colonnes de « Terms of reference » conviennent a un manifeste que l'on parcourt ; a un article que l'on lit d'un bout a l'autre, elles imposent de remonter en haut de page a chaque fin de colonne. ⚠ La mesure qui compte est le nombre de signes par ligne, pas une largeur en pixels : au-dela de 75 l'oeil perd sa ligne en revenant a la marge. */ .prose{max-width:38rem;font-size:clamp(1.0625rem,1.25vw,1.1875rem);line-height:1.62} .prose > *:first-child{margin-top:0} .prose p{margin:0 0 1.15em} .prose h2,.prose h3{ font-family:var(--display);font-variation-settings:'wght' 620,'wdth' 108; line-height:1.12;letter-spacing:-.012em;margin:2em 0 .6em; } .prose h2{font-size:clamp(1.375rem,2.4vw,1.875rem)} .prose h3{font-size:clamp(1.125rem,1.8vw,1.375rem)} .prose a{color:inherit;text-decoration:underline;text-decoration-thickness:2px; text-underline-offset:.18em} .prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.3em} .prose li{margin-bottom:.45em} .prose blockquote{ margin:1.8em 0;padding:0 0 0 1.1em;border-left:4px solid currentColor; font-family:var(--display);font-variation-settings:'wght' 600,'wdth' 106; font-size:clamp(1.125rem,1.7vw,1.375rem);line-height:1.2; } .prose blockquote p:last-child{margin-bottom:0} .prose code,.prose pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em} .prose pre{overflow-x:auto;padding:1em;background:rgba(6,24,43,.06)} .prose img,.prose figure{margin:1.8em 0;max-width:100%;height:auto} .prose figcaption{font-size:.875rem;opacity:.7;margin-top:.5rem} .prose hr{border:0;border-top:3px solid currentColor;opacity:.25;margin:2.4em 0} .prose table{border-collapse:collapse;width:100%;margin:1.8em 0} .prose th,.prose td{text-align:left;padding:.5em .8em;border-bottom:1px solid currentColor} /* ---------- La liste des articles ---------- */ .pieces{ list-style:none;margin:clamp(2.5rem,6vh,4.5rem) 0 0;padding:0; display:grid;gap:clamp(2rem,5vw,3.5rem); } @media (min-width:56rem){ .pieces{grid-template-columns:repeat(2,minmax(0,1fr))} } .piece{max-width:34rem} .piece__k{ font-family:var(--face);font-size:.9375rem;font-weight:500; opacity:.6;margin:0 0 .5rem; } .piece__t{ margin:0 0 .6rem;font-family:var(--display); font-variation-settings:'wght' 640,'wdth' 108; font-size:clamp(1.375rem,2.6vw,2rem);line-height:1.08;letter-spacing:-.015em; } .piece__t a{color:inherit;text-decoration:none} .piece__t a:hover{text-decoration:underline;text-decoration-thickness:3px; text-underline-offset:.16em} .piece__x{margin:0 0 .8rem;opacity:.85;line-height:1.5} .piece__go{ color:inherit;text-decoration:none;font-weight:600;font-size:.9375rem; border-bottom:3px solid currentColor;padding-bottom:.08em; } .piece__img{margin:0;width:100%;height:auto} /* ---------- Pagination et retours ---------- */ .pages{ display:flex;flex-wrap:wrap;gap:1rem clamp(1.5rem,4vw,3rem); margin-top:clamp(2.5rem,6vh,4rem); font-family:var(--face);font-size:.9375rem;font-weight:600; } .pages a{ color:inherit;text-decoration:none; border-bottom:3px solid currentColor;padding-bottom:.08em; } .pages a:hover{opacity:.7} /* ---------- Ce que l'editeur de WordPress peut poser dans une page ---------- */ .prose .wp-block-image img{max-width:100%;height:auto} .aligncenter{margin-left:auto;margin-right:auto} .alignright{float:right;margin:0 0 1em 1.5em} .alignleft{float:left;margin:0 1.5em 1em 0} .screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} /* ---------- L'introduction de la couverture ---------- ⚠ Dans le site ecrit a la main, ces paragraphes portaient la classe .sub, posee a la main dans le HTML. Ils viennent maintenant de l'editeur, qui n'ecrit que des

nus : sans cette regle ils perdaient leur corps, leur interligne et leur couleur, et l'introduction ressortait au corps du texte courant. */ .cover__intro p{ font-size:clamp(1rem,1.2vw,1.125rem);font-weight:400; font-variation-settings:'wdth' 96,'opsz' 18; line-height:1.4;color:var(--k);margin:0 0 1em;max-width:none; } .cover__intro p:last-child{margin-bottom:0}