/* ========================================================================= Ouraya, feuille de style commune aux sites du collectif. CINQ PIEGES DEJA PAYES SUR CE PROJET, dont les corrections sont ici : 1. Collision de specificite sur les marges. « .w{padding:0 26px} » vaut 0,1,0 et ecrase « section{padding:104px 0} » a 0,0,1 : toutes les marges verticales disparaissent. Donc le conteneur de largeur ne porte QUE du padding-inline, et les sections QUE du padding-block. Jamais les deux. 2. Meme collision sur les boutons : « .nav a » (0,1,1) ecrase « .btn » (0,1,0). Tout bouton vivant dans un conteneur qui stylise ses liens voit son selecteur double. 3. Placement automatique en grille : un enfant conditionnel absent decale les suivants. Tout element optionnel porte un grid-column explicite. 4. Position absolue sans ancetre positionne : l'element prend la racine du document pour bloc conteneur et echappe a overflow-x:clip. 5. Un apercu sans doctype ne prouve rien, le navigateur calcule en mode degrade. Toute page servie commence par . ========================================================================= */ /* Polices servies depuis le domaine. Aucun service tiers : charger une police depuis un CDN fuite l'adresse IP du visiteur au passage. */ @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} @font-face{font-family:Instrument;src:url(/fonts/instrument-serif-400-normal-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap} @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} @font-face{font-family:JetBrains;src:url(/fonts/jetbrains-mono-400-normal-latin.woff2) format("woff2");font-weight:400;font-display:swap} /* LES DEUX MODES ------------------------------------------------------------------------- Les noms de jetons decrivent un ROLE, pas une couleur : « encre » est la couleur du texte, « papier » celle du fond. Ils s'echangent donc d'un mode a l'autre sans qu'aucune regle en aval n'ait a changer. Nommer un jeton « bleu-fonce » aurait oblige a reecrire la feuille entiere. Le mode clair est le defaut, y compris pour qui a regle son systeme en sombre : c'est une demande explicite. Le choix du visiteur est retenu, et c'est la seule chose que ce site garde dans le navigateur. */ :root{ --encre:#12213A; --encre-douce:#3C4A63; --gris:#5F6B7D; /* 4,04 avant, sous le seuil de 4,5 */ --ambre:#E8A33D; --ambre-sombre:#9A6414; /* 3,42 avant, sur un texte de 12 px */ --papier:#FBF9F5; --papier-creuse:#F4F0E8; --filet:#E4DED2; --surface:#FFFFFF; /* Le panneau inverse : sombre sur une page claire, et l'inverse. Sans ce jeton, les sections qui utilisaient « --encre » en fond devenaient BLANCHES en mode sombre, puisque l'encre y est claire. */ --panneau:#12213A; --panneau-texte:#FBF9F5; --panneau-filet:rgba(251,249,245,.18); --panneau-doux:rgba(251,249,245,.78); --ombre:rgba(18,33,58,.42); /* Jetons apportes par la partie « mettre en lien », verses ici parce qu'ils appartiennent desormais au systeme et non a une section. 🚨 « --action », propose par la conception en terre cuite #A8481B, N'A PAS ete retenu : il frole #A6402E, la couleur des liens morts, et les deux roles n'etaient separes que par le traitement, aplat contre trait. Cette separation tombe en capture d'ecran, en niveaux de gris, et pour qui distingue mal les rouges. Sur un site dont la signature est d'afficher ses liens morts, le risque ne valait pas le gain. L'ambre du systeme porte les boutons d'envoi. */ --sur-ambre:#12213A; --bande:#12213A; --sur-bande:#FBF9F5; --bande-filet:#3A4A66; --bande-creuse:#1B2C48; --voile:rgba(18,33,58,.34); --ombre-portee:rgba(18,33,58,.16); /* 🚨 CES QUATRE VALEURS ONT ETE ASSOMBRIES PAR RAPPORT A LA CONCEPTION. Une pastille d'etat pose son texte sur un fond fait de SA PROPRE couleur a 10 ou 12 %, ce qui rapproche les deux et fait chuter le contraste. Mesures d'origine sur fond papier : vivant 4,19, redirige 4,48, verifier 3,73, absent 4,23. Quatre sur cinq sous le seuil de 4,5, et le README du paquet l'annonce lui-meme au point 9 de ses restes : le colorimetre n'avait ete passe que sur les ecrans 1 a 3. Le mode sombre, lui, passe sans retouche, de 5,43 a 6,35. */ --vivant:#267553; /* 4,19 avant sur son propre fond teinte */ --redirige:#3A6C9C; /* 4,48 avant */ --verifier:#7A6340; /* 3,73 avant, le plus faible des cinq */ --perdu:#A6402E; --absent:#5D6775; /* 4,23 avant sur son propre fond teinte */ --vivant-fond:rgba(46,125,91,.10); --redirige-fond:rgba(60,110,158,.10); --verifier-fond:rgba(138,115,80,.12); --perdu-fond:rgba(166,64,46,.10); --absent-fond:rgba(138,147,161,.12); --large:1140px; --marge:26px; --titre:Bricolage,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --serif:Instrument,"Iowan Old Style",Palatino,Georgia,serif; --mono:JetBrains,ui-monospace,SFMono-Regular,Menlo,monospace; } :root[data-theme="sombre"]{ --encre:#ECE7DE; --encre-douce:#B9C3D2; --gris:#8794A6; --ambre:#F0B45C; --ambre-sombre:#E8A33D; --papier:#0D1727; --papier-creuse:#111E31; --filet:#243449; --surface:#16233A; /* Sur une page deja sombre, le panneau inverse doit etre PLUS CLAIR que le fond pour se detacher. L'inverser franchement, en creme, eblouirait au milieu d'une lecture de nuit. */ --panneau:#20365A; /* 1,28:1 avant, trop proche du fond */ --panneau-texte:#F2EEE6; --panneau-filet:rgba(242,238,230,.16); --panneau-doux:rgba(242,238,230,.80); --ombre:rgba(0,0,0,.55); --sur-ambre:#12213A; --bande:#1B2A44; --sur-bande:#ECE7DE; --bande-filet:#3A4A66; --bande-creuse:#152238; --voile:rgba(4,8,16,.6); --ombre-portee:rgba(0,0,0,.5); --vivant:#5FB68C; --redirige:#7FADD6; --verifier:#C9A97B; --perdu:#E08974; --absent:#93A0B2; --vivant-fond:rgba(95,182,140,.14); --redirige-fond:rgba(127,173,214,.14); --verifier-fond:rgba(201,169,123,.14); --perdu-fond:rgba(224,137,116,.14); --absent-fond:rgba(147,160,178,.14); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--papier); color:var(--encre); font:400 17px/1.68 var(--titre); overflow-x:clip; } img,svg{max-width:100%;height:auto} a{color:inherit} /* PIEGE 1 : ce conteneur ne porte que du padding horizontal. */ .w{width:100%;max-width:var(--large);margin-inline:auto;padding-inline:var(--marge)} /* Et les sections que du padding vertical. */ section{padding-block:96px} section.serre{padding-block:64px} h1,h2,h3{margin:0;line-height:1.12;letter-spacing:-.022em;font-weight:600} h1{font-size:clamp(38px,6.2vw,66px)} h2{font-size:clamp(28px,3.9vw,40px)} h3{font-size:20px;letter-spacing:-.012em} p{margin:0 0 1.1em} p:last-child{margin-bottom:0} .chapo{font-size:clamp(18px,2.1vw,21px);line-height:1.6;color:var(--encre-douce);max-width:62ch} .mesure{max-width:66ch} .gris{color:var(--gris)} .sur-titre{ font:400 12px/1 var(--mono); letter-spacing:.16em;text-transform:uppercase;color:var(--ambre-sombre); margin:0 0 18px;display:block; } .serif{font-family:var(--serif);font-weight:400} em.serif{font-style:italic} /* ---------------------------------------------------------------- barre --- */ .barre{border-bottom:1px solid var(--filet);background:color-mix(in srgb,var(--papier) 88%,transparent); backdrop-filter:saturate(1.4) blur(8px);position:sticky;top:0;z-index:20} .barre .w{display:flex;align-items:center;gap:20px;padding-block:20px; transition:padding .3s cubic-bezier(.4,0,.2,1)} .barre.compacte .w{padding-block:10px} /* LE LOGOTYPE, ET SON PASSAGE DU VERTICAL A L'HORIZONTAL ------------------------------------------------------------------------- En haut de page, le logotype vertical, en grand. Des que la lecture commence, il cede la place a l'horizontal, plus discret mais toujours lisible. Les deux images sont superposees dans une boite dont les dimensions s'animent ; on ne fait varier que l'opacite et la boite, jamais la taille des images elles-memes, ce qui evite le tremblement au redimensionnement. Les rapports sont ceux des fichiers, pas des valeurs choisies : vertical 502 x 480 (0,956) et horizontal 247 x 102 (0,413). Les inventer ecraserait le dessin. */ .marque{display:block;text-decoration:none;position:relative;flex:0 0 auto; width:176px;height:168px; transition:width .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1)} /* Le logotype est pose en FOND et non en image : c'est la seule facon d'en changer avec le mode sans passer par un script, donc sans que la mauvaise version apparaisse une fraction de seconde au chargement. */ .marque i{position:absolute;left:0;top:0;width:100%;height:100%; background-repeat:no-repeat;background-position:left center; background-size:contain;transition:opacity .24s ease} .marque .vertical{background-image:url(/logo-vertical.png)} .marque .horizontal{background-image:url(/logo-horizontal.png)} :root[data-theme="sombre"] .marque .vertical{background-image:url(/logo-vertical-sombre.png)} :root[data-theme="sombre"] .marque .horizontal{background-image:url(/logo-horizontal-sombre.png)} .marque .horizontal{opacity:0} .marque .vertical{opacity:1} .barre.compacte .marque{width:131px;height:54px} .barre.compacte .marque .vertical{opacity:0} .barre.compacte .marque .horizontal{opacity:1} @media (max-width:820px){ .marque{width:126px;height:120px} .barre.compacte .marque{width:104px;height:43px} } .barre nav{margin-left:auto;display:flex;align-items:center;gap:26px} .barre nav a{text-decoration:none;color:var(--encre-douce);font-size:15px} .barre nav a:hover{color:var(--encre)} /* PIEGE 2 : « .barre nav a » vaut 0,1,2 et ecraserait « .btn » a 0,1,0. Le selecteur du bouton est double pour reprendre la main. */ .barre nav a.btn.btn{color:var(--papier)} /* --------------------------------------------------------------- boutons --- */ .btn{ display:inline-flex;align-items:center;gap:9px; background:var(--encre);color:var(--papier); padding:13px 22px;border-radius:999px; font:600 15px/1 var(--titre);text-decoration:none; border:1px solid var(--encre); transition:transform .12s ease,box-shadow .12s ease; } .btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(18,33,58,.45)} .btn.creux{background:transparent;color:var(--encre);border-color:var(--filet)} .btn.creux:hover{border-color:var(--encre);box-shadow:none} /* ------------------------------------------------------------------ hero --- */ .hero{position:relative;padding-block:104px 88px} /* PIEGE 4 : la lueur est positionnee par rapport a .hero, qui est en position:relative. Sans cet ancetre elle prendrait la racine du document pour reference et deborderait du overflow-x:clip du corps. */ .hero .lueur{ position:absolute;inset:auto 0 0 50%;transform:translateX(-50%); width:min(980px,120%);height:420px;pointer-events:none;z-index:0; background:radial-gradient(58% 100% at 50% 100%,rgba(232,163,61,.22),transparent 70%); } .hero .w{position:relative;z-index:1} .hero h1{max-width:19ch} .hero .chapo{margin-top:22px} .actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px} /* ----------------------------------------------------------------- cartes --- */ .grille{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr))} /* Colonne flexible pour que la pastille d'etat se pose EN BAS de chaque carte. Sans cela elle suit la fin du texte, et trois cartes de longueurs differentes donnent trois pastilles a trois hauteurs. */ .carte{ background:var(--surface);border:1px solid var(--filet);border-radius:16px; padding:26px 24px 28px; display:flex;flex-direction:column; } .carte h3{margin-bottom:9px} .carte p{font-size:16px;color:var(--encre-douce)} .carte .etat{ margin-top:auto;align-self:flex-start; font:400 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase; color:var(--gris);border:1px solid var(--filet);border-radius:999px; padding:5px 10px;padding-top:6px; } .carte .etat.vif{color:var(--ambre-sombre);border-color:rgba(232,163,61,.5)} /* ------------------------------------------------------------- les portes --- */ .portes{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr))} .porte{border:1px solid var(--filet);border-radius:18px;padding:32px 30px 34px; background:var(--surface)} .porte.sombre{background:var(--encre);border-color:var(--encre);color:var(--papier)} .porte.sombre .chapo,.porte.sombre p{color:rgba(251,249,245,.82)} .porte.sombre .sur-titre{color:var(--ambre)} /* PIEGE 2 encore : dans une porte sombre, le bouton creux serait illisible. */ .porte.sombre .btn.creux.creux{color:var(--papier);border-color:rgba(251,249,245,.35)} .porte h2{font-size:26px;margin-bottom:12px} .porte ul{margin:18px 0 24px;padding:0;list-style:none} .porte li{padding:8px 0 8px 26px;position:relative;font-size:16px;line-height:1.55} .porte li::before{content:"";position:absolute;left:2px;top:16px;width:9px;height:9px; border-radius:50%;background:var(--ambre)} /* ------------------------------------------------------------------- nom --- */ .nom{background:var(--papier-creuse);border-block:1px solid var(--filet)} .nom .dispo{display:grid;gap:44px;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:center} .arabe{ font-family:var(--serif);font-size:clamp(56px,9vw,104px);line-height:1; color:var(--encre);text-align:center;direction:rtl; } .arabe small{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.1em; color:var(--gris);margin-top:18px;direction:ltr;text-transform:uppercase} /* --------------------------------------------------------------- citation --- */ blockquote{ margin:0;padding:0 0 0 24px;border-left:3px solid var(--ambre); font-family:var(--serif);font-size:clamp(21px,2.6vw,27px);line-height:1.45; color:var(--encre); } blockquote cite{display:block;margin-top:14px;font:400 13px/1.4 var(--mono); letter-spacing:.06em;font-style:normal;color:var(--gris)} /* Le pied de page ne s'anime pas : une seule image, taille fixe. */ footer .marque{width:auto;height:auto;display:inline-block} footer .marque .logotype{position:static;height:40px;width:110px;opacity:1;display:block} /* ------------------------------------------------------------------- pied --- */ footer{border-top:1px solid var(--filet);padding-block:44px 52px;background:var(--papier-creuse)} footer .dispo{display:flex;flex-wrap:wrap;gap:30px;align-items:flex-start;justify-content:space-between} footer a{color:var(--encre-douce);text-decoration:none} footer a:hover{color:var(--encre);text-decoration:underline} .liens{display:flex;flex-wrap:wrap;gap:22px;font-size:15px} .mention{font-size:13px;color:var(--gris);margin-top:22px} /* --------------------------------------------------- le marqueur de charte --- */ /* Le petit bloc que quelqu'un colle sur SON site pour dire qu'il se reconnait dans la charte. 🚨 IL NE CHARGE RIEN DEPUIS NOS DOMAINES, ET C'EST LA TOUTE LA QUESTION. Un macaron servi en image depuis ouraya.org donnerait a Ouraya l'adresse IP de chaque visiteur de chaque site qui l'affiche. C'est exactement ce que nous reprochons aux polices de Google, et ce serait pire : eux au moins ne pretendent pas ecrire une charte sur l'autonomie. Le marqueur est donc du SVG en ligne, avec ses couleurs ecrites en dur puisqu'il vit chez les autres et n'a pas acces a nos jetons. Aucune requete, aucune trace, rien a mettre a jour. */ .marqueur-charte{ display:inline-flex;align-items:center;gap:9px; padding:8px 14px 8px 10px;border:1px solid var(--filet);border-radius:999px; background:var(--surface);color:var(--encre); font:600 13px/1 var(--titre);letter-spacing:.02em;text-decoration:none; } .marqueur-charte:hover{border-color:var(--ambre);text-decoration:none} .marqueur-charte svg{width:22px;height:22px;flex:0 0 auto} /* Le bloc a copier. Il montre du code a quelqu'un qui n'en ecrit pas : il doit donc etre lisible et selectionnable en entier, jamais tronque. Le defilement est horizontal et propre a la boite, sinon c'est la page qui defile. */ .a-copier{ margin:0;padding:16px 18px;border:1px solid var(--filet);border-radius:12px; background:var(--papier-creuse);color:var(--encre-douce); font:400 12.5px/1.7 var(--mono); overflow-x:auto;white-space:pre;-webkit-overflow-scrolling:touch; tab-size:2; } .a-copier::selection,.a-copier *::selection{background:var(--ambre);color:var(--encre)} /* Un nom de domaine ou un fragment technique au fil du texte. La taille est ramenee a 92 % : une chasse fixe posee a la meme taille qu'une proportionnelle parait toujours plus grosse, et la ligne se met a boiter. */ .mono{font-family:var(--mono);font-size:.92em;letter-spacing:-.01em} /* ------------------------------------------------------------- panneau --- */ /* Les sections a contre-jour. Elles etaient ecrites en style dans le HTML, avec « background:var(--encre) », ce qui les rendait blanches des que l'encre devenait claire. */ .panneau{background:var(--panneau);color:var(--panneau-texte)} .panneau .sur-titre{color:var(--ambre)} .panneau .mesure,.panneau .mesure p{color:var(--panneau-doux)} .panneau .carte{background:transparent;border-color:var(--panneau-filet)} .panneau .carte h3{color:var(--panneau-texte)} .panneau .carte p{color:var(--panneau-doux)} .panneau .carte:hover{border-color:rgba(232,163,61,.55)} .porte.sombre{background:var(--panneau);border-color:var(--panneau);color:var(--panneau-texte)} .porte.sombre .chapo,.porte.sombre p{color:var(--panneau-doux)} .porte.sombre .sur-titre{color:var(--ambre)} .porte.sombre .btn.creux.creux{color:var(--panneau-texte);border-color:var(--panneau-filet)} /* -------------------------------------------------------------- bascule --- */ /* Le bouton de mode. Un seul dessin : un disque, un masque qui vient le mordre pour en faire un croissant, et des rais qui s'effacent. Tout est anime par « transform » et « opacity », donc rien ne recalcule la page. */ .bascule{ appearance:none;border:1px solid var(--filet);background:transparent; color:var(--encre-douce);cursor:pointer; width:40px;height:40px;border-radius:999px;flex:0 0 auto; display:inline-grid;place-items:center;padding:0; transition:border-color .2s ease,color .2s ease,transform .2s ease; } .bascule:hover{border-color:var(--ambre);color:var(--encre);transform:rotate(-12deg)} .bascule svg{width:19px;height:19px;overflow:visible} .bascule .astre{fill:currentColor;transition:transform .4s cubic-bezier(.4,0,.2,1)} .bascule .morsure{transition:transform .4s cubic-bezier(.4,0,.2,1)} .bascule .rais{stroke:currentColor;stroke-width:1.7;stroke-linecap:round; transform-origin:12px 12px; transition:opacity .3s ease,transform .4s cubic-bezier(.4,0,.2,1)} /* En mode sombre : le masque vient mordre le disque, les rais disparaissent. */ :root[data-theme="sombre"] .bascule .morsure{transform:translate(-11px,-4px)} :root[data-theme="sombre"] .bascule .rais{opacity:0;transform:scale(.45) rotate(-40deg)} :root[data-theme="sombre"] .bascule .astre{transform:scale(1.12)} /* ---------------------------------------------------------- formulaire --- */ .formulaire{display:grid;gap:18px;max-width:62ch;margin-top:30px} .champ{display:grid;gap:7px} .champ label{font-weight:600;font-size:15px} .champ .aide{font-size:14px;color:var(--gris);line-height:1.5} .champ textarea,.champ input[type=email]{ font:400 16px/1.55 var(--titre);color:var(--encre); background:var(--surface);border:1px solid var(--filet);border-radius:12px; padding:13px 15px;width:100%;resize:vertical; } .champ textarea:focus,.champ input:focus{border-color:var(--ambre);outline:none; box-shadow:0 0 0 3px rgba(232,163,61,.22)} /* Le piege a robots. « display:none » est detecte par les automates les plus soigneux ; on le sort de l'ecran sans le masquer, et on l'ecarte du clavier comme des lecteurs d'ecran. Un humain ne peut pas le remplir par accident. */ .piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .retour{margin:0;font-size:15px;min-height:1.5em} .retour.bon{color:#1F6B4A} .retour.mauvais{color:#A6371F} /* ------------------------------------------------------------- accessible --- */ .evitement{position:absolute;left:-9999px} .evitement:focus{left:var(--marge);top:10px;z-index:50;background:var(--encre); color:var(--papier);padding:10px 16px;border-radius:8px} :focus-visible{outline:2px solid var(--ambre);outline-offset:3px;border-radius:4px} @media (max-width:820px){ section{padding-block:66px} .hero{padding-block:70px 60px} .nom .dispo{grid-template-columns:1fr;gap:26px} .barre nav{gap:16px} .barre nav a:not(.btn){display:none} } @media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important} }