/* Pages de contenu (anomalies, aide, à propos, contact…). Reprend les variables de thème (theme-libre.css ou theme-dsfr.css) ; ne redéfinit que la mise en page d'une page défilable (style.css impose overflow:hidden pour l'application cartographique). Le sommaire et les rubriques repliables ont leur feuille propre, rubriques.css. */ /* 'visible' et non 'auto' : 'auto' ferait de body un conteneur de défilement, contre lequel le bandeau collant du site n'aurait plus rien à quoi se tenir. Il suffit d'annuler l'overflow:hidden de style.css. */ html, body { overflow: visible; height: auto; min-height: 100%; } /* Colonne pleine hauteur : le contenu, extensible, pousse le pied de page au bas de la fenêtre même quand la page est courte. */ body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; background-color: var(--fond); color: var(--texte); line-height: 1.5; } /* Titre de la page, en tête du contenu : le bandeau supérieur, identique sur toutes les pages, porte le nom du site et non celui de la page. À l'échelle des titres DSFR — corps ample, couleur de texte et non d'accent, un cran au-dessous sur petit écran. */ main > h1 { margin: 0 0 1.5rem; font-size: 2rem; line-height: 2.5rem; color: var(--texte); } @media (min-width: 48em) { main > h1 { font-size: 2.5rem; line-height: 3rem; } } main { flex: 1 0 auto; /* Enfant de flex : la largeur est posée explicitement (les marges auto feraient sinon rétrécir le bloc sur son contenu), en border-box pour que le rembourrage n'en déborde pas — le plafond le compense pour garder les 56.25rem de contenu utile. */ width: 100%; box-sizing: border-box; max-width: calc(56.25rem + 3rem); margin: 0 auto; padding: 1.5rem; } /* Grand écran : la page s'élargit pour loger deux, puis trois colonnes de cadres .rubrique (mise en forme dans rubriques.css). Le nombre de colonnes n'est plus une media query mais un critère mesuré en rems réels — sensible au zoom et à l'échelle de texte —, publié sur par js/rubriques-colonnes.js, que toutes les pages de contenu chargent : sur celles qui n'ont pas de cadres à mettre en colonnes (glossaire, réponses…), l'attribut ne pilote que la largeur. */ html[data-colonnes="2"] main { max-width: calc(105rem + 3rem); } html[data-colonnes="3"] main { max-width: calc(153rem + 3rem); } /* Un cadre pleine page (rubrique flottante) ne suit pas la très grande largeur : elle ne sert qu'aux colonnes — il s'arrête à la largeur des deux colonnes. */ html[data-colonnes="3"] .rubriques-grille > .rubrique-flottante { max-width: 105rem; } /* La prose hors cadres ne suit pas non plus l'élargissement : lignes bornées à la largeur de lecture — le sommaire porte déjà son propre plafond (rubriques.css). */ main > h1, main > p { max-width: 56.25rem; } /* Liens de contenu : sans cette règle ils restaient au bleu par défaut du navigateur, qui jurait avec l'accent du thème — et rappelait la charte même une fois celle-ci quittée. Le soulignement est conservé : la couleur ne doit pas porter seule l'information (crit. 10.6). */ main a { color: var(--accent); } main a:hover { color: var(--accent-hover); } .intro { color: var(--texte-mention); font-size: 1rem; margin: 0 0 1.5rem; } .mention-maj { margin: 0; font-size: 0.875rem; font-style: italic; color: var(--texte-mention); } .meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; } /* Badges DSFR (fr-badge--sm) : capitales grasses sur fond contrasté, arrondi de 0.25rem. */ .chip { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; text-transform: uppercase; padding: 0 0.5rem; border-radius: 0.25rem; background-color: var(--fond-champ); color: var(--texte); white-space: nowrap; } /* Statuts : source (donnée amont), ouvert, contourné, corrigé — les couleurs fonctionnelles du DSFR (badge nouveau, erreur, information, succès), communes aux deux thèmes. */ .chip.statut-source { background-color: #feebd0; color: #695240; } .chip.statut-ouvert { background-color: #ffe9e9; color: #ce0500; } .chip.statut-contourne{ background-color: #e8edff; color: #0063cb; } .chip.statut-corrige { background-color: #b8fec9; color: #18753c; } .rubrique p { margin: 0 0 0.625rem; } .rubrique p:last-child { margin-bottom: 0; } .rubrique code { font-family: ui-monospace, "Courier New", monospace; font-size: 90%; background-color: var(--fond-alt); padding: 1px 0.25rem; border-radius: 3px; } /* Captures d'écran illustrant une rubrique (page d'aide) : petits cadres cliquables — la vignette s'ouvre en pleine taille dans un dialogue (js/figures.js) ; la légende en mention, comme les précisions. */ .rubrique figure { margin: 0.625rem 0; padding: 0.5rem; border: 1px solid var(--bordure); border-radius: 0.25rem; background-color: var(--fond); } .rubrique figure a { display: block; cursor: zoom-in; } .rubrique figure img { display: block; width: 100%; height: auto; } .rubrique figcaption { margin-top: 0.375rem; font-size: 0.875rem; color: var(--texte-mention); } /* Étapes de la rubrique illustrée : chaque étape apparie un bloc de texte et sa figure. Sur la page élargie (deux colonnes au moins), texte à gauche et figure calée à droite, en colonnes régulières — des figures flottantes de largeurs inégales laissaient des vides et étranglaient le texte. En dessous, tout s'empile simplement. */ html[data-colonnes="2"] .rubrique-flottante .etape, html[data-colonnes="3"] .rubrique-flottante .etape { display: flex; align-items: flex-start; gap: 2rem; } html[data-colonnes="2"] .rubrique-flottante .etape + .etape, html[data-colonnes="3"] .rubrique-flottante .etape + .etape { margin-top: 1rem; } html[data-colonnes="2"] .rubrique-flottante .etape-texte, html[data-colonnes="3"] .rubrique-flottante .etape-texte { flex: 1; min-width: 0; } html[data-colonnes="2"] .rubrique-flottante .etape figure, html[data-colonnes="3"] .rubrique-flottante .etape figure { flex: 0 0 42rem; margin: 0.25rem 0 0; } /* Dialogue d'agrandissement (js/figures.js) : l'image seule sur fond assombri, à la taille que la fenêtre autorise. */ .figure-dialogue { padding: 0; border: none; background: none; max-width: none; max-height: none; } .figure-dialogue::backdrop { background: rgba(0, 0, 0, 0.65); } .figure-dialogue img { display: block; max-width: 96vw; max-height: 92vh; width: auto; height: auto; } .figure-fermer { position: absolute; top: 0.5rem; right: 0.5rem; width: 2rem; height: 2rem; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 1.25rem; line-height: 1; cursor: pointer; } details.detail { margin-top: 0.625rem; font-size: 1rem; /* Les tableaux dépliés peuvent dépasser la largeur d'un téléphone : ils défilent dans le dépliant plutôt que d'élargir la page. */ overflow-x: auto; } details.detail summary { cursor: pointer; color: var(--accent); } details.detail table { border-collapse: collapse; margin: 0.625rem 0 0; } details.detail th, details.detail td { border: 1px solid var(--bordure); padding: 0.25rem 0.625rem; text-align: left; } details.detail th { background-color: var(--fond-alt); } .vide { color: var(--texte-mention); font-style: italic; } /* Curseur de taille du texte (page Accessibilité), gradué en pourcents réels (100 à 200) : les crans y tombent à leurs vraies proportions, 150 au milieu. */ .echelle { display: flex; align-items: flex-end; gap: 0.75rem; } /* La réglette porte la valeur courante au-dessus du pouce : le conteneur positionné lui réserve la hauteur, Echelle.js cale son left sur le cran. */ .echelle-reglette { position: relative; width: min(16.5rem, 100%); padding-top: 1.5em; } .echelle-reglette input[type="range"] { display: block; width: 100%; margin: 0; accent-color: var(--accent); } .echelle output { position: absolute; top: 0; transform: translateX(-50%); font-weight: 700; white-space: nowrap; } /* Bornes de la réglette, purement indicatives (la valeur courante est portée par l'output et par aria-valuetext) : même graisse que l'output pour que les extrémités lui répondent. */ .echelle-borne { font-weight: 700; white-space: nowrap; } /* — Infobulles des sigles (glossaire-liens.js) — */ /* Occurrence non liée d'un sigle : le pointillé signale discrètement que le survol donne le développé — la première occurrence, elle, reste un lien vers le glossaire, à l'habillage ordinaire. */ span.sigle-terme { text-decoration: underline dotted; text-underline-offset: 0.125em; cursor: help; } /* La bulle unique, ancrée sur body et positionnée en fixed par le script : les conteneurs défilants (tableaux, rubriques) ne peuvent pas la rogner. Façon infobulle DSFR : fond de page, ombre portée, corps réduit ; au-dessus du bandeau collant et de son bouton de menu (z-index 40). */ .sigle-infobulle { position: fixed; z-index: 50; max-width: 20rem; padding: 0.375rem 0.625rem; border: 1px solid var(--bordure); border-radius: 0.25rem; background-color: var(--fond); color: var(--texte); font-size: 0.875rem; line-height: 1.25rem; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }