devient deux colonnes, chacune bordee comme une carte. Le corps
perd son alinea de 160 px, inutile une fois la colonne reduite. */
.patch-accordion {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px; border: 0; box-shadow: none; background: none;
}
.patch-accordion details,
.patch-accordion details:last-child { border: 1px solid #c8ba99; }
.patch-accordion details > div { padding: 0 20px 16px; }
/* Les actualites : quatre entrees empilees deviennent 2 x 2. */
.news-board {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px; align-items: start;
}
/* « La taverne » du projet : trois replis cote a cote. */
.inn {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: 14px; border: 0; background: none; box-shadow: none; margin-top: 21px;
}
.inn details { border: 1px solid #bfae88; background: #f8e9c2; }
/* Le bandeau de l'auberge reste un bandeau : il coiffe les trois replis. */
.inn > .inn-title { grid-column: 1 / -1; }
/* Le tableau d'avancement : la jauge etait figee a 280 px au milieu d'un
panneau devenu deux fois plus large. */
.progress-board { grid-template-columns: minmax(0, 1fr) minmax(280px, 26%); }
/* La galerie d'epoque : l'image d'archive avait 255 px fixes au milieu de
l'ecran ; elle prend enfin la place qui lui revient. */
.heritage-gallery { grid-template-columns: minmax(0, 1fr) minmax(255px, 34%); }
.legacy-shot img { height: 300px; }
/* L'avertissement du catalogue : sept puces sur toute la largeur faisaient
des lignes de 1 500 px. Deux colonnes de journal, titre en pleine largeur. */
.essai-avertissement { column-count: 2; column-gap: 42px; }
.essai-avertissement h2 { column-span: all; }
.essai-avertissement h3 { break-after: avoid; }
.essai-avertissement ul,
.essai-avertissement li,
.essai-avertissement p { break-inside: avoid; }
/* Les pages juridiques (mentions, confidentialite, conditions) : des
cartouches independants empiles sur plusieurs ecrans de haut. En colonnes
de journal ils se lisent dans l'ordre, du haut de la premiere colonne au
bas de la seconde, et la mesure retombe a ~65 signes.
`break-inside:avoid` garde chaque cartouche entier. */
/* L'onglet de section (`.scroll-title`) est en `position:absolute` : dans un
bloc a colonnes, son bloc conteneur se resout hors du fragment et il part
se coller en haut de la colonne. On le repasse en flux (`relative`), au
meme endroit a l'oeil pres, avec une marge basse negative pour qu'il ne
pousse pas le titre vers le bas. */
.pages-legales > section:not(.archive-intro) > .scroll-title {
position: relative; display: inline-block;
top: -48px; left: -8px; margin-bottom: -29px;
}
.pages-legales { column-count: 2; column-gap: 26px; }
.pages-legales > * { break-inside: avoid; }
.pages-legales > .archive-intro,
.pages-legales > .archive-back { column-span: all; }
}
/* ===========================================================================
LE CATALOGUE DES VERSIONS (versions.php)
Trente entrees a la file, chacune une barre de 1 500 px portant trois mots.
A partir de 1 500 px d'ecran elles se rangent deux par deux ; une entree
ouverte reprend toute la largeur (`grid-column:1/-1`), pour que son panneau
« notes d'epoque / essayer cette version » garde ses deux colonnes.
catalogue.css est charge apres cette feuille : specificite doublee.
=========================================================================== */
@media (min-width: 1500px) {
.catalogue-list {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px; align-items: start;
}
.catalogue-list > .catalogue-version { margin: 0; }
.catalogue-list > .catalogue-version[open] { grid-column: 1 / -1; }
}
.catalogue .version-columns li,
.catalogue .version-columns > section > p { max-width: var(--mesure); }
/* ===========================================================================
L'ACCUEIL
=========================================================================== */
@media (min-width: 701px) {
.era-collection { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}
@media (min-width: 1250px) {
.document-layout { gap: 40px 70px; }
.document-stack { align-content: start; }
/* La carte d'epoque : la capture etait bloquee a 260 px de haut dans une
carte devenue bien plus large -- deux bandes noires de chaque cote. */
.era-feature > img { height: 330px; }
}