/* ——— Vue d'un document unique ——————————————————————— */ /* Surcharge du séparateur breadcrumb (2e item = ":" au lieu de "→") */ .results-breadcrumb--document li:nth-child(2)::after { content: " :"; } /* ——— Barre d'actions ——————————————————————— */ /* Le .main-content parent devient le container pour la barre d'actions */ .main-content:has(.document-actions) { container-type: inline-size; container-name: doc-actions-container; } .document-actions { backdrop-filter: blur(8px); background-color: rgb(255 255 255 / 0.85); border-radius: var(--radius-md); box-shadow: var(--shadow-border); margin: var(--space-16) var(--space-8) var(--space-8); position: sticky; top: var(--space-8); /* aligné avec .sidebar__inner */ z-index: 10; } /* Par défaut (petits écrans) : blocs empilés */ .document-actions__top { border-bottom: 1px solid var(--color-border-light); display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-8) var(--space-12); } .document-actions__download { align-items: center; display: flex; font-size: var(--fs-small); gap: var(--space-8); margin: 0; } /* Tag de format (.pdf, ) — contour via box-shadow */ .document-format-tag { border-radius: var(--radius-sm); box-shadow: var(--shadow-border); display: inline-block; font-size: var(--fs-small); padding: var(--space-4) var(--space-8); white-space: nowrap; } /* Pagination centrée par défaut (blocs empilés) */ .document-actions__bottom { align-items: center; display: flex; justify-content: center; padding: var(--space-8) var(--space-12); } /* Blocs côte à côte : le séparateur colle aux options, la pagination prend le reste */ @container doc-actions-container (width > 675px) { .document-actions { display: flex; flex-direction: row; } .document-actions__top { border-bottom: none; border-inline-end: 1px solid var(--color-border-light); flex-shrink: 0; /* largeur dictée par le contenu — séparateur côté options */ } .document-actions__bottom { flex: 1; /* la pagination occupe le reste */ justify-content: flex-end; } } /* À partir de 985px : impression et téléchargement sur une seule ligne */ @container doc-actions-container (width > 985px) { .document-actions__top { align-items: end; flex-direction: row; gap: var(--space-16); } } /* ——— Pagination entre résultats ——————————————————————— */ .document-pagination { align-items: center; display: flex; gap: var(--space-4); ol { align-items: center; display: flex; gap: var(--space-4); list-style: none; margin: 0; padding: 0; } } .pagination-btn, .document-pagination a { align-items: center; background: none; border: none; border-radius: var(--radius-sm); color: var(--color-body-text); cursor: pointer; display: inline-flex; font-family: var(--ff-primary); font-size: var(--fs-small); height: 1.75rem; justify-content: center; padding: 0; text-decoration: none; transition: background-color 150ms ease-out; width: 1.75rem; &:hover { background-color: var(--color-surface-lighter); } } .document-pagination a[aria-current="true"] { box-shadow: var(--shadow-border); } .pagination-gap { color: color-mix(in srgb, var(--color-body-text) 50%, transparent); font-size: var(--fs-small); padding-inline: var(--space-4); user-select: none; } /* ——— Corps du document ——————————————————————— */ .document { border-radius: var(--radius-md); box-shadow: var(--shadow-border); container-type: normal; /* annule le container-type: inline-size du reset sur article */ margin-block: var(--space-8); margin-inline: var(--space-8); padding-inline: var(--space-16); } .document__header { display: flex; place-content: center; padding-block: var(--space-24); } .document__meta { display: flex; justify-content: space-between; margin-inline: auto; max-width: 70ch; * { font-size: var(--fs-small); } } .document__dossier { color: color-mix(in srgb, var(--color-body-text) 65%, transparent); font-variant-numeric: tabular-nums; letter-spacing: 0.05em; text-transform: uppercase; } .document__date { color: color-mix(in srgb, var(--color-body-text) 65%, transparent); } /* Cachet CRIDON */ .document__stamp { align-items: center; border: 2px solid var(--color-primary); border-radius: 50%; color: var(--color-primary); display: flex; flex-direction: column; font-size: 0.45rem; font-weight: 700; gap: 2px; height: 3.5rem; justify-content: center; letter-spacing: 0.12em; opacity: 0.35; padding: var(--space-8); text-align: center; text-transform: uppercase; width: 3.5rem; } .document__title { font-size: var(--fs-body); font-weight: 700; line-height: 1.45; margin-block: 0 var(--space-16); text-wrap: pretty; } .document p { line-height: 1.65; margin-block: 0 var(--space-12); } /* Annule le max-width: 70ch de reset.css (importé dans main.css, donc non désactivable via disableStylesheets) */ #bofip-document-content p, #bofip-document-content li, #bofip-document-content figcaption, #amc-document-body p, #amc-document-body li, #amc-document-body figcaption { max-width: none; } #amc-document-body h2 { text-align: center; } #bofip-document-content table tr:nth-child(even), #amc-document-body table tr:nth-child(even) { background-color: var(--color-surface-lighter); } .document__section { margin-block-start: var(--space-24); margin-inline: auto; max-width: 70ch; h3 { font-size: var(--fs-body); font-weight: 700; margin-block: 0 var(--space-12); } h4 { font-size: var(--fs-body); font-style: italic; font-weight: 600; margin-block: var(--space-16) var(--space-8); } } .document__section-bg { background-color: var(--color-surface-lighter); border-radius: var(--radius-sm); box-shadow: var(--shadow-border); margin-inline: auto; padding: var(--space-16); max-width: calc(70ch + var(--space-16) * 2); } .document blockquote { border-inline-start: 2px solid var(--color-border-light); margin-block: var(--space-12); margin-inline: 0; padding-inline-start: var(--space-16); p { color: color-mix(in srgb, var(--color-body-text) 80%, transparent); font-style: italic; } } p.document__copyright { color: color-mix(in srgb, var(--color-body-text) 50%, transparent); font-size: var(--fs-small); margin-block-start: calc(var(--space-16) * 3); } /* ——— Boutons de navigation bas de page ——————————————————————— */ /* Le .main-content parent devient le container — ":has()" limite la portée à ce seul bloc sans affecter les autres .main-content du site */ .main-content:has(.document-footer-actions) { container-type: inline-size; container-name: footer-container; } .document-footer-actions { align-items: stretch; display: flex; flex-direction: column; padding: var(--space-16); width: 100%; /* contre le display:flex du .main-content:last-child (search-form.css) */ /* Par défaut : les boutons s'empilent pleine largeur */ .btn { align-self: auto; justify-content: center; padding-block: var(--space-16); } } /* Passage en rangée quand le conteneur est assez large pour les deux boutons */ @container footer-container (width > 490px) { .document-footer-actions { align-items: center; flex-direction: row; gap: var(--space-8); /* "Modifier la recherche" : prend uniquement la place de son contenu */ .btn:first-child { align-self: auto; justify-content: flex-start; margin: 0; } /* "Nouvelle recherche" : s'étend sur l'espace disponible */ .btn:last-child { flex: 1; justify-content: center; } } }