/* algeriades.com — fondations : variables, remise à zéro, typographie Les couleurs sont relevées sur les GIF de la maquette d'origine (base-algergif/), pas choisies : c'est ce qui garde l'identité du site. */ :root { /* Fond et surfaces */ --fond: #111111; /* relevé sur base-alger_r02_c1.gif */ --fond-carte: #191919; --fond-carte-survol: #1f1f1f; --mosaique: #2a3131; /* trait des zelliges */ --bordure: #2a2a2a; /* Or du bandeau — dégradé relevé de haut en bas sur base-alger_r01_c1.gif */ --or-clair: #e6cd81; --or: #cda52e; --or-sombre: #6d5200; /* Liens — attributs link/vlink/alink du d'origine */ --lien: #4ade4a; /* #00cc00 éclairci pour le contraste AA sur #111 */ --lien-survol: #7cf07c; --lien-visite: #ffcc00; --accent: #ff8c2b; /* #cc6600 éclairci, titres de section */ /* Texte */ --texte: #e8e8e8; --texte-doux: #a8a8a8; --texte-discret: #7d7d7d; /* Rythme */ --pas: 8px; --largeur-max: 1240px; /* La justification de la maquette d'origine : le texte d'article tenait dans une cellule de 58 % d'une colonne de 590 px, soit ~322 px en Verdana 10 px — environ 55 caractères par ligne. On garde ce nombre de caractères, pas les 322 px : la même mesure, dans la typo d'aujourd'hui. */ --largeur-lecture: 55ch; /* La colonne de côté d'un article — logo et « Lire aussi ». Le tableau d'origine partageait sa colonne en 42 % / 58 % : 42/58 de la colonne de lecture, soit 40ch. Les deux réunies font ~745 px à la taille de texte de l'article, la largeur du tableau d'origine (740 px). */ --largeur-cote: 40ch; /* Le texte d'un article, plus petit que le reste du site : la maquette d'origine le composait en Verdana size="-2". C'est aussi l'unité des deux « ch » ci-dessus, qui se mesurent sur cette taille. */ --texte-article: 15px; --rayon: 4px; /* Polices */ --serif: Georgia, "Times New Roman", Times, serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Remise à zéro ------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; } ul, ol { padding: 0; } img { max-width: 100%; height: auto; display: block; } /* Page --------------------------------------------------------------- */ html { /* Empêche iOS de grossir le texte tout seul en paysage */ -webkit-text-size-adjust: 100%; /* Garde-fou : rien ne doit jamais faire défiler la page latéralement. « clip » plutôt que « hidden », qui romprait le position: sticky de la navigation sur grand écran. */ overflow-x: clip; } body { background-color: var(--fond); color: var(--texte); font-family: var(--sans); font-size: 17px; line-height: 1.6; } /* La mosaïque de zelliges, sur son propre plan. Elle ne tapisse plus toute la page mais la seule colonne de contenu : c'est ce que faisait la maquette d'origine, où le GIF était le fond d'une cellule de 590px et non celui du document. Le bandeau, la colonne de droite et le pied reposent donc à nouveau sur le noir uni. Elle reste sur un pseudo-élément plutôt qu'en fond direct : c'est ce qui permet de l'atténuer sans emporter le texte dans l'opacité. Ses quatre bords sont en fond pur (#111111), elle se répète donc sans raccord visible. */ #contenu { position: relative; isolation: isolate; } #contenu::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url(../../base-algergif/base-alger_r02_c1.gif); background-repeat: repeat; opacity: 0.4; } /* Typographie -------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.25; font-weight: 700; text-wrap: balance; } h1 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem); } h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.6rem); } h3 { font-size: 1.15rem; } p + p { margin-top: calc(var(--pas) * 2); } a { color: var(--lien); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:visited { color: var(--lien-visite); } a:hover, a:focus-visible { color: var(--lien-survol); } /* Un anneau de focus visible partout : la maquette d'origine n'en avait aucun, la navigation au clavier y était impossible. */ :focus-visible { outline: 2px solid var(--or); outline-offset: 2px; border-radius: 2px; } /* Accessibilité ------------------------------------------------------ */ .saut-au-contenu { position: absolute; left: -9999px; top: 0; background: var(--fond-carte); color: var(--or-clair); padding: var(--pas) calc(var(--pas) * 2); z-index: 100; } .saut-au-contenu:focus { left: var(--pas); top: var(--pas); } /* Réservé aux lecteurs d'écran */ .lecteur-ecran { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }