/* ========================================================================== FEUILLE DE STYLE UNIQUE — fosse.fr ========================================================================== OBJECTIF DE CE FICHIER ----------------------- Une seule feuille de style, volontairement figée, à ne plus retoucher. Elle sert deux usages avec le même code HTML5 : 1. Lecture à l'écran (mobile-first, clair/sombre automatique) 2. Génération de PDF via "Imprimer" du navigateur (remplace LaTeX) RÈGLES QUE CE FICHIER RESPECTE STRICTEMENT ------------------------------------------- - Zéro classe CSS (aucun sélecteur ".xxx" nulle part). Tout le style s'accroche aux balises HTML5 standard elles-mêmes (h1, p, aside, nav...). Conséquence pratique : le HTML reste écrit "à la main", sans jamais se demander quelle classe ajouter — juste choisir la bonne balise sémantique. - Aucune police externe chargée (pas de Google Fonts, pas de @font-face). Uniquement des piles de polices système déjà installées sur l'appareil du lecteur. Raison : zéro requête réseau supplémentaire = site plus rapide, et zéro fuite de vie privée vers un CDN de polices tiers. - Le CSS n'a AUCUN effet sur la lisibilité du contenu par les IA/crawlers (LLMs, moteurs GEO) : ces derniers lisent le HTML sémantique, pas le rendu visuel. Ce fichier n'existe donc que pour les lecteurs humains (écran + papier). Le référencement IA se travaille ailleurs (structure HTML, Schema.org, maillage interne, llms.txt — voir skill seo-geo). STRUCTURE DU FICHIER (16 sections numérotées) ----------------------------------------------- 1. Jetons de couleur et de typographie (custom properties) 2. Réinitialisation minimale 3. Corps de page (layout mobile-first) 4. Titres 5. Texte courant (paragraphes, listes inline, petits éléments) 6. Liens 7. Listes (ul/ol/dl) 8. Citations et sources 9. Code 10. Tableaux 11. Figures et médias 12. En-tête / navigation / pied de page / encadrés (aside) 13. Détails-résumé (contenu repliable natif HTML5) 14. Formulaires 15. Accessibilité 16. Impression / génération de PDF ========================================================================== */ /* ============================================================================ 1. JETONS (CUSTOM PROPERTIES) ============================================================================ Toutes les couleurs et polices du fichier passent par ces variables. Pour changer une teinte ou une police plus tard : modifier UNIQUEMENT ici, jamais dans les règles plus bas (qui ne font que consommer var(--xxx)). ============================================================================ */ :root { /* color-scheme indique au navigateur que la page gère elle-même le clair ET le sombre. C'est ce qui active light-dark() ci-dessous, et ce qui permet aussi au navigateur de styler nativement en sombre les éléments qu'on ne stylise pas nous-mêmes (scrollbars, champs de formulaire, etc.) */ color-scheme: light; /* ---- Couleurs ----------------------------------------------------------- light-dark(valeur-claire, valeur-sombre) est une fonction CSS standard (CSS Color Module Level 5) : le navigateur choisit automatiquement la bonne valeur selon le thème clair/sombre choisi par le système d'exploitation du lecteur (prefers-color-scheme), SANS qu'on ait besoin d'écrire une media query @media (prefers-color-scheme: dark) séparée qui dupliquerait toutes les couleurs. Un seul endroit à maintenir. Support navigateur : large courant 2026 (Chrome, Edge, Firefox, Safari). */ --fond: light-dark(#fdfdfb, #16181c); /* blanc cassé / noir chaud, jamais de pur #fff ou #000 (moins agressif pour l'œil) */ --texte: light-dark(#1a1a1a, #e8e6e1); /* texte principal, contraste élevé mais pas absolu */ --texte-att: light-dark(#4a4a46, #a8a6a0); /* texte atténué : légendes, dates, méta-informations */ --accent: light-dark(#1f4b99, #7fb0ff); /* couleur de lien et d'accent — bleu encre, volontairement PAS le orange/terracotta (#D97757) devenu un "tic" visuel reconnaissable des interfaces générées par IA ; un bleu sobre reste neutre et intemporel */ --accent-att: light-dark(#dce6f5, #1c2b42); /* fond très clair/très sombre pour surlignage (mark) et citations */ --bordure: light-dark(#d8d5cd, #33363c); /* traits de séparation (hr, header, footer, tableaux) */ --code-fond: light-dark(#f1efe9, #1e2126); /* fond des blocs de code et encadrés aside */ /* ---- Typographie ---------------------------------------------------------- Trois rôles distincts, chacun avec sa propre pile de polices "système" (déjà présentes sur l'OS du lecteur, donc AUCUN téléchargement) : - police-corps : serif, pour le confort de lecture longue (articles, livres). Un serif classique (Georgia) reste très lisible à l'écran et donne un rendu "éditorial" proche d'un livre imprimé. - police-titre : sans-serif système, pour créer un contraste visuel net avec le corps du texte (convention éditoriale : titres en sans-serif, corps en serif, ou l'inverse — ici ce choix). - police-code : monospace système, pour le code et les données. */ --police-corps: Georgia, "Times New Roman", "Liberation Serif", serif; --police-titre: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --police-code: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace; /* Largeur de colonne optimale pour la lecture longue : la typographie recommande ~60-75 caractères par ligne (au-delà, l'œil "perd le fil" en revenant à la ligne). 68ch calibre cette largeur sur la largeur moyenne d'un caractère de LA POLICE ACTIVE — contrairement à une largeur fixe en px, elle s'adapte automatiquement si tu changes un jour la police du corps. Appliquée directement sur (voir section 3) : pas besoin d'un
supplémentaire, cohérent avec la règle "zéro classe". */ --largeur-texte: 68ch; font-size: 100%; /* respecte la taille de police par défaut réglée par le lecteur dans son navigateur/OS (accessibilité) */ } /* ============================================================================ 2. RÉINITIALISATION MINIMALE ============================================================================ Le strict nécessaire pour repartir d'une base prévisible, sans normaliser à outrance (on garde volontairement les comportements HTML5 par défaut qui sont déjà sains : listes à puces, tableaux avec bordures implicites annulées section par section, etc.) ============================================================================ */ *, *::before, *::after { /* box-sizing: border-box = les paddings/bordures ne s'ajoutent plus à la largeur déclarée d'un élément. Évite les débordements imprévus, en particulier utile en mobile-first où chaque pixel de largeur compte. */ box-sizing: border-box; } * { margin: 0; /* chaque navigateur a ses propres marges par défaut (h1, p, ul...) ; on repart à zéro et on les redéfinit nous-mêmes plus bas, section par section */ } html { -webkit-text-size-adjust: 100%; /* empêche Safari iOS de zoomer arbitrairement le texte lors d'un changement d'orientation d'écran */ } img, svg, video, canvas { /* Médias systématiquement responsives : jamais plus larges que leur conteneur, ratio conservé automatiquement (height: auto). display: block supprime l'espace fantôme sous les images (comportement inline par défaut d'HTML, hérité de l'époque où une image était traitée comme un caractère de texte). */ display: block; max-width: 100%; height: auto; } /* ============================================================================ 3. CORPS DE PAGE — MISE EN PAGE MOBILE-FIRST ============================================================================ Philosophie mobile-first : les règles de base (hors media query) ciblent le mobile. La media query plus bas AJOUTE du confort pour les écrans plus larges, elle ne "corrige" jamais un défaut du mobile — c'est l'inverse d'une approche desktop-first où on partirait d'un design large qu'on rétrécirait ensuite avec des media queries correctives. ============================================================================ */ body { background: var(--fond); color: var(--texte); font-family: var(--police-corps); font-size: 1.0625rem; /* 17px : légèrement au-dessus du 16px "défaut navigateur", pour une lecture longue plus confortable */ line-height: 1.65; /* interligne généreux : essentiel en lecture longue, encore plus sur petit écran où les lignes sont courtes */ /* max-width + margin-inline: auto = la colonne de texte est centrée et ne dépasse jamais --largeur-texte (68ch), même sur un grand écran. C'est ce qui remplace un
: la contrainte de largeur est portée par la balise elle-même. */ max-width: var(--largeur-texte); margin-inline: auto; padding: 1.25rem 1rem 3rem; /* marges resserrées par défaut = optimisées pour le mobile (peu d'espace à gaspiller) */ } @media (min-width: 60ch) { /* Seule media query de "confort" du fichier : sur un écran assez large pour dépasser la largeur de colonne, on peut se permettre plus d'air en haut et en bas de page sans nuire à la lecture mobile. */ body { padding-top: 2.5rem; padding-bottom: 4rem; } } /* ============================================================================ 4. TITRES — ÉCHELLE FLUIDE, POLICE DISTINCTE DU CORPS ============================================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--police-titre); /* contraste volontaire avec le corps en serif (voir section 1) */ font-weight: 700; line-height: 1.25; /* interligne plus serré que le corps : un titre se lit "d'un bloc", pas ligne à ligne */ color: var(--texte); margin-top: 2em; /* espace généreux AVANT un titre : sépare clairement les sections du texte qui précède */ margin-bottom: 0.6em; } /* clamp(min, préféré, max) = taille fluide qui s'adapte en continu à la largeur de l'écran, SANS media query supplémentaire : sur mobile étroit on obtient la valeur min, sur écran large la valeur max, et une interpolation basée sur le viewport (vw) entre les deux. C'est la version moderne du "responsive typography" qui, avant clamp(), demandait plusieurs media queries avec des tailles fixes différentes. */ h1 { font-size: clamp(1.75rem, 5vw, 2.4rem); margin-top: 0; } /* pas de marge au-dessus du tout premier titre de la page */ h2 { font-size: clamp(1.4rem, 4vw, 1.8rem); } h3 { font-size: clamp(1.15rem, 3vw, 1.4rem); } h4 { font-size: 1.1rem; } h5, h6 { /* h5/h6 sont rares en usage réel (au-delà de 4 niveaux de hiérarchie, un article a probablement besoin d'être redécoupé) : traités ici comme de simples "petits titres" en majuscules espacées plutôt que comme un niveau hiérarchique visuellement distinct supplémentaire. */ font-size: 1rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--texte-att); } /* ============================================================================ 5. TEXTE COURANT ============================================================================ */ p, ul, ol, dl, figure, table, pre, blockquote { margin-bottom: 1.3em; /* espacement vertical uniforme entre tous les blocs de contenu, quel que soit leur type */ } p { /* text-wrap: pretty (standard CSS récent, Chromium/Safari) demande au navigateur d'éviter les "orphelines" : une ligne isolée et trop courte en fin de paragraphe. Le navigateur ajuste les retours à la ligne du dernier bloc de texte pour un résultat visuellement plus équilibré. Sans effet néfaste si le navigateur du lecteur ne le supporte pas encore (dégradation silencieuse vers le retour à la ligne standard). */ text-wrap: pretty; } strong { font-weight: 700; } em { font-style: italic; } small { font-size: 0.85em; color: var(--texte-att); } mark { /* Surlignage : on garde la couleur de texte d'origine (color: inherit) plutôt que d'imposer une couleur de texte fixe, pour que reste lisible qu'il surligne du texte normal, un lien, ou du texte atténué. */ background: var(--accent-att); color: inherit; padding: 0.05em 0.2em; } abbr[title] { /* Le sélecteur d'attribut [title] cible uniquement les qui ONT effectivement un attribut title (l'explicitation de l'acronyme) — inutile de styliser un qui n'aurait pas ce texte d'infobulle. */ text-decoration: dotted underline; cursor: help; } sup, sub { font-size: 0.75em; line-height: 0; /* évite qu'un exposant/indice n'agrandisse l'interligne de toute la ligne qui le contient */ } hr { border: none; border-top: 1px solid var(--bordure); margin: 2.5em 0; /* séparateur de section franc, avec un espace vertical généreux de part et d'autre */ } /* ============================================================================ 6. LIENS ============================================================================ */ a { color: var(--accent); text-decoration-thickness: 1px; /* trait de soulignement fin par défaut, discret mais présent (accessibilité : ne jamais retirer le soulignement d'un lien dans du texte courant) */ text-underline-offset: 0.15em; /* léger espace entre le texte et son soulignement, plus lisible qu'un trait collé aux jambages des lettres (g, j, p...) */ } a:hover { text-decoration-thickness: 2px; /* renforcement visuel simple au survol, sans changement de couleur ni animation */ } a:visited { opacity: 0.85; /* distinction discrète des liens déjà visités, utile sur un site à fort maillage interne (articles liés entre eux) */ } /* ============================================================================ 7. LISTES (ul / ol / dl) ============================================================================ */ ul, ol { padding-left: 1.4em; /* indentation suffisante pour que les puces/numéros ne "collent" pas au bord de la colonne de texte */ } li { margin-bottom: 0.4em; /* espacement discret entre items, pour ne pas donner une impression de bloc compact difficile à scanner visuellement */ } dt { font-weight: 700; /* terme défini, mis en évidence */ } dd { margin-bottom: 0.8em; color: var(--texte-att); /* la définition elle-même en texte atténué, pour bien distinguer visuellement terme (dt) et définition (dd) */ } /* ============================================================================ 8. CITATIONS ET SOURCES — usage fréquent dans un contenu éditorial (extraits de sources dans les articles, citations dans EPOCH/Mouchards) ============================================================================ */ blockquote { border-left: 3px solid var(--accent); padding-left: 1.1em; color: var(--texte-att); /* citation visuellement "en retrait" par rapport au texte principal de l'auteur */ font-style: italic; } blockquote p:last-child { margin-bottom: 0.4em; /* réduit l'espace superflu en bas d'une citation multi-paragraphes */ } cite { font-style: normal; /* HTML applique l'italique par défaut à ; on l'annule car blockquote est déjà en italique globalement — évite un double italique peu lisible */ font-size: 0.9em; color: var(--texte-att); } q::before { content: "« "; } q::after { content: " »"; } /* Les guillemets français (chevrons) sont injectés automatiquement par défaut via ::before/::after sur — pas besoin de les taper à la main dans chaque citation courte du texte, cohérence typographique garantie sur tout le site en une seule fois. */ /* ============================================================================ 9. CODE ============================================================================ */ code, kbd, samp { font-family: var(--police-code); font-size: 0.9em; /* une police monospace paraît visuellement plus grande qu'une proportionnelle à taille égale ; on la réduit légèrement pour équilibrer */ background: var(--code-fond); padding: 0.15em 0.4em; border-radius: 3px; } pre { background: var(--code-fond); padding: 1em; overflow-x: auto; /* un bloc de code trop large défile horizontalement plutôt que de casser la mise en page mobile (pas de retour à la ligne forcé qui casserait l'indentation du code) */ border-radius: 4px; line-height: 1.5; } pre code { /* Évite un double fond/double padding quand un se trouve à l'intérieur d'un 
 (cas standard HTML5 : 
...
) */
  background: none;
  padding: 0;
}


/* ============================================================================
   10. TABLEAUX
   ============================================================================ */
table {
  /* display: block (plutôt que le display: table implicite d'un )
     transforme le tableau en un conteneur qui peut défiler horizontalement
     tout seul via overflow-x, SANS faire déborder le reste de la page ni
     nécessiter de 
 supplémentaire autour du tableau. Les éléments
     internes (thead/tbody/tr/td) conservent leur rendu tabulaire normal :
     seul le conteneur englobant change de comportement.
     Nécessaire dès qu'un tableau a beaucoup de colonnes ou du contenu
     large (ex. tableau à 9 colonnes) : sans cette règle, un tel tableau
     déborde silencieusement de la colonne de texte --largeur-texte sur
     mobile, cassant la mise en page plutôt que de proposer un défilement
     dédié et contenu. */
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* défilement tactile fluide sur iOS, plutôt que saccadé */
  max-width: 100%;

  width: 100%;
  border-collapse: collapse; /* fusionne les bordures adjacentes de cellules plutôt que de doubler chaque trait */
  font-size: 0.95em;
}

th, td {
  text-align: left; /* le centrage par défaut des 
 dans les navigateurs ne convient pas à un tableau de données/texte éditorial */
  padding: 0.5em 0.7em;
  border-bottom: 1px solid var(--bordure); /* lignes horizontales seulement (style "tableau épuré"), pas de quadrillage complet */
}

th {
  font-family: var(--police-titre);
  font-weight: 700;
}

caption {
  text-align: left;
  color: var(--texte-att);
  font-size: 0.85em;
  margin-bottom: 0.5em;
}


/* ============================================================================
   11. FIGURES ET MÉDIAS
   ============================================================================ */
figure {
  margin-inline: 0; /* HTML applique par défaut une marge horizontale à 
 (héritage historique) ; on l'annule pour qu'elle s'aligne avec le reste du texte */
}

figcaption {
  font-size: 0.85em;
  color: var(--texte-att);
  margin-top: 0.5em;
  font-style: italic;
}


/* ============================================================================
   12. EN-TÊTE, NAVIGATION, PIED DE PAGE, ENCADRÉS
       Structure du site portée uniquement par les balises sémantiques HTML5
       (header/nav/footer/aside) — jamais par des classes.
   ============================================================================ */
header {
  border-bottom: 1px solid var(--bordure);
  padding-bottom: 1em;
  margin-bottom: 2em;
}

nav ul {
  list-style: none; /* le menu de navigation n'a pas besoin visuellement d'être une liste à puces */
  padding-left: 0;
  display: flex;     /* liens de navigation en ligne plutôt qu'empilés verticalement */
  flex-wrap: wrap;    /* passe à la ligne proprement sur petit écran mobile si tous les liens ne tiennent pas sur une seule ligne */
  gap: 0.3em 1.2em;   /* espace horizontal entre liens, espace vertical si retour à la ligne */
}

nav a {
  text-decoration: none; /* dans un menu, le contexte (position, structure de liste) suffit à signaler que ce sont des liens ; le soulignement systématique alourdirait visuellement la navigation */
}

nav a:hover {
  text-decoration: underline; /* le soulignement réapparaît au survol, comme confirmation interactive */
}

footer {
  border-top: 1px solid var(--bordure);
  margin-top: 3em;
  padding-top: 1.5em;
  font-size: 0.9em;
  color: var(--texte-att);
}

/*