/* ============================================================================
   Vitrine Avona Games
   ----------------------------------------------------------------------------
   Une table allumee dans une piece sombre.

   Toute lumiere de la page vient d'EN BAS, comme le halo d'une table. Il n'y a
   qu'une seule lueur par page. L'or n'est jamais un aplat : c'est une dorure a
   chaud, des traits et des lettres.
   ========================================================================== */

/* ── Fontes, auto-hebergees : aucune requete vers un tiers ────────────────── */

@font-face {
    font-family: 'Fraunces';
    src: url("../fonts/fraunces-latin-SfWU466.woff2") format('woff2-variations');
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
    font-family: 'Work Sans';
    src: url("../fonts/worksans-latin-shqi8Sk.woff2") format('woff2-variations');
    font-weight: 300 600;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

/* ── Saira : la police du NOM DU STUDIO, et rien d'autre ──────────────────

   Auto-hebergee comme les deux autres : aucune requete vers Google Fonts ni vers
   un CDN. Licence SIL OFL, conservee a cote du fichier (assets/fonts/saira-OFL.txt).

   La specification est volontairement reduite a cinq proprietes, et elle est
   IDENTIQUE dans les trois projets - site, console, jeux. Toute propriete ajoutee
   ici ferait diverger le nom d'un projet a l'autre, ce qui est exactement ce
   qu'une identite ne doit pas faire.

   La couleur n'en fait PAS partie : elle depend du fond, qui n'est pas le meme
   d'un projet a l'autre. Elle se pose la ou le nom est ecrit.

   Le texte HTML reste « Avona Games » : ce sont les capitales du CSS qui
   l'affichent en AVONA GAMES. Un lecteur d'ecran l'annonce donc normalement, et
   le nom reste du vrai texte - jamais une image.
   ------------------------------------------------------------------------- */

@font-face {
    font-family: 'Saira';
    src: url("../fonts/saira-900-8KYWceY.woff2") format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

.nom-studio {
    font-family: 'Saira', var(--courant);
    font-weight: 900;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ── Jetons ───────────────────────────────────────────────────────────────── */

:root {
    /* La palette de la console, a l'identique. Aucun gris neutre, aucun noir
       pur, aucun blanc pur : les neutres sont tires vers le rouge. */
    --piece: #0d0709;
    --surface: #170f12;
    --surface-haute: #211519;
    --bordeaux: #7a2233;
    --bordeaux-profond: #5c1a2b;
    --or: #ffd97a;
    --or-logo: #c9a84f;
    --texte: #f5ece0;
    --texte-discret: #a08f85;

    /* Teinte de la page. Chaque fiche de jeu la remplace par son theme.accent. */
    --accent: #7a2233;

    --display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --courant: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --fs-display: clamp(2.75rem, 6vw, 5rem);
    --fs-h1: clamp(2rem, 4vw, 3rem);
    --fs-h2: 1.75rem;
    --fs-h3: 1.25rem;
    --fs-corps: 1.0625rem;
    --fs-petit: 0.875rem;

    --sp-1: .5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;  --sp-4: 2rem;
    --sp-5: 3rem;   --sp-6: 4rem;   --sp-7: 6rem;    --sp-8: 9rem;

    --r-sm: 6px;  --r-md: 12px;  --r-lg: 20px;

    --mesure: 34rem; /* ~68 caracteres */
    --largeur: 72rem;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: dark; }

/* La lueur deborde volontairement de sa boite : c'est ce qui lui donne sa forme.
   Encore faut-il que ce debordement soit rogne.

   « overflow-x: hidden » pose sur `body` SEUL ne suffit pas : le navigateur
   propage cette valeur au viewport, et `body` repasse alors en « visible ».
   Mesure avant correction : 98 px de defilement horizontal vers du vide, sur
   CHAQUE page en 390 px de large.

   « clip » plutot que « hidden » : il rogne sans creer de conteneur de defilement,
   donc sans casser « position: sticky ». La ligne « hidden » reste au-dessus, en
   repli pour les navigateurs qui ignorent « clip ».

   Et sur `html` SEUL, jamais sur `body`. Quand les deux axes different et que l'un
   vaut « visible », ce « visible » se calcule en « auto » : pose sur `body`, ce
   clip en faisait un conteneur de defilement a lui tout seul. La fenetre cessait
   alors de defiler, et l'IntersectionObserver des apparitions ne voyait plus rien
   passer - les blocs restaient invisibles. Corrige apres l'avoir casse. */
html {
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    margin: 0;
    background: var(--piece);
    color: var(--texte);
    font: 400 var(--fs-corps)/1.65 var(--courant);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

:focus-visible {
    outline: 2px solid var(--or);
    outline-offset: 3px;
    border-radius: 2px;
}

::selection { background: var(--bordeaux); color: var(--texte); }

h1, h2, h3 {
    font-family: var(--display);
    font-weight: 600;
    font-variation-settings: 'SOFT' 0, 'WONK' 0;
    letter-spacing: -0.02em;
    line-height: 1.08;
    margin: 0;
    text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.coquille {
    width: min(100% - 2.5rem, var(--largeur));
    margin-inline: auto;
}

.mesure { max-width: var(--mesure); }

.discret { color: var(--texte-discret); }

.chiffres { font-variant-numeric: tabular-nums; }

/* ── La lueur : une seule par page, ancree en bas du bloc ─────────────────── */

.lueur {
    position: relative;
    isolation: isolate;
}

/* Les rayons restent nettement à l'intérieur de la boîte : un dégradé plus large
   que son élément est rogné par ses bords, et une lueur censée être ronde se
   retrouve avec deux arêtes verticales bien droites. */
.lueur::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5rem;
    width: min(150%, 90rem);
    /* Elle deborde de sa boite - c'est ce qui lui donne sa forme - mais jamais de
       l'ecran. Sans cette borne, 150 % d'une colonne de 350 px depassent de 98 px
       de chaque cote, et la page se laisse tirer horizontalement vers du vide.
       Mesure : scrollX = 98 sur toutes les pages en 390 px de large. */
    max-width: 100%;
    height: min(66%, 36rem);
    transform: translateX(-50%);
    background:
        radial-gradient(30% 78% at 50% 100%,
            color-mix(in oklab, var(--or) 14%, transparent) 0%,
            transparent 70%),
        radial-gradient(46% 92% at 50% 100%,
            color-mix(in oklab, var(--accent) 45%, transparent) 0%,
            transparent 72%);
    z-index: -1;
    pointer-events: none;
}

/* ── Le chevron de couronne : le filet de section ─────────────────────────── */

.chevron {
    display: block;
    width: 84px;
    height: 16px;
    margin: var(--sp-2) auto;
    color: var(--or-logo);
    opacity: .75;
}

.chevron--large { width: 120px; }

/* ── En-tete ──────────────────────────────────────────────────────────────── */

.entete {
    position: relative;
    z-index: 2;
    padding-block: var(--sp-3);
}

.entete__rang {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

.marque {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    font-family: var(--display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.marque img { width: 26px; height: auto; }

.nav {
    margin-left: auto;
    display: flex;
    gap: var(--sp-3);
    font-size: var(--fs-petit);
}

.nav a {
    white-space: nowrap;
    text-decoration: none;
    color: var(--texte-discret);
    padding-block: .35rem;
    border-bottom: 1px solid transparent;
    transition: color .18s ease, border-color .18s ease;
}

.nav a:hover { color: var(--texte); }

.nav a[aria-current] {
    color: var(--or);
    border-bottom-color: var(--or);
}

/* ── Heros ────────────────────────────────────────────────────────────────── */

.heros {
    padding-block: clamp(var(--sp-5), 9vw, var(--sp-7)) 0;
    text-align: center;
}

.heros__titre {
    font-size: var(--fs-display);
    max-width: 18ch;
    margin-inline: auto;
}

/* La deuxieme ligne de l'accroche, en or : c'est la seule phrase doree du site. */
.heros__or {
    display: block;
    font-style: normal;
    color: var(--or);
}

.heros__sous {
    margin-top: var(--sp-3);
    max-width: 42ch;
    margin-inline: auto;
    color: var(--texte-discret);
    font-size: 1.125rem;
}

/* ── Sections ─────────────────────────────────────────────────────────────── */

.section {
    padding-block: var(--sp-6);
}

.section__titre {
    font-size: var(--fs-h1);
    margin-bottom: var(--sp-4);
}

/* Trois phrases pleine largeur separees par un filet. Pas trois cartes a
   icones : bordure, fond et ombre disent chacun « objet separe », les depenser
   ici aplatirait la hierarchie. */
.propositions {
    border-top: 1px solid rgb(201 168 79 / .22);
}

.proposition {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: var(--sp-2) var(--sp-5);
    padding-block: var(--sp-4);
    border-bottom: 1px solid rgb(201 168 79 / .22);
}

.proposition h3 {
    font-size: var(--fs-h3);
    color: var(--or);
}

.proposition p { color: var(--texte-discret); max-width: var(--mesure); }

/* ── Bande de dos de boite ────────────────────────────────────────────────── */

.bande {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1) var(--sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bande li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--fs-petit);
    font-variant-numeric: tabular-nums;
    color: var(--texte-discret);
}

.bande svg {
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 auto;
    color: var(--or-logo);
}

.bande--fiche li { font-size: 1rem; color: var(--texte); }
.bande--fiche svg { width: 1.6rem; height: 1.6rem; }

/* ── Catalogue : une liste, pas une grille ────────────────────────────────── */

.filtres {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: var(--sp-5);
    padding: .3rem;
    border: 1px solid rgb(245 236 224 / .1);
    border-radius: var(--r-lg);
    background: var(--surface);
    width: fit-content;
    max-width: 100%;
}

.filtre {
    padding: .45rem 1rem;
    border-radius: var(--r-lg);
    text-decoration: none;
    font-size: var(--fs-petit);
    color: var(--texte-discret);
    white-space: nowrap;
    transition: background .18s ease, color .18s ease;
}

.filtre:hover { color: var(--texte); background: var(--surface-haute); }

.filtre[aria-current] {
    color: var(--or);
    background: var(--surface-haute);
    box-shadow: inset 0 0 0 1px rgb(255 217 122 / .45);
}

.catalogue { border-top: 1px solid rgb(201 168 79 / .22); }

.entree {
    display: grid;
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: center;
    padding-block: var(--sp-5);
    border-bottom: 1px solid rgb(201 168 79 / .22);
}

.entree__jaquette img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-md);
    border: 1px solid rgb(245 236 224 / .1);
    box-shadow: 0 1rem 2.5rem -1rem rgb(0 0 0 / .8);
    transition: transform .28s cubic-bezier(.2, .7, .2, 1);
}

.entree:hover .entree__jaquette img { transform: translateY(-.35rem); }

.entree__titre {
    font-size: var(--fs-h2);
    margin-bottom: .4rem;
}

.entree__titre a {
    text-decoration: none;
    background-image: linear-gradient(var(--or), var(--or));
    background-size: 0 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .25s ease;
}

.entree:hover .entree__titre a { background-size: 100% 1px; }

.entree__accroche {
    color: var(--texte-discret);
    max-width: var(--mesure);
    margin-bottom: var(--sp-3);
}

/* ── Fiche de jeu ─────────────────────────────────────────────────────────── */

.fiche__retour {
    display: inline-block;
    margin-block: var(--sp-2) var(--sp-4);
    font-size: var(--fs-petit);
    color: var(--texte-discret);
    text-decoration: none;
}

.fiche__retour:hover { color: var(--or); }

.banniere {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid rgb(245 236 224 / .1);
}

/* Une classe, jamais « .banniere img ». Ce sélecteur descendant attrapait aussi
   .banniere__icone, qui vit dans .banniere__contenu — et il gagnait, avec une
   spécificité de (0,1,1) contre (0,1,0). L'icône héritait donc de width:100% et
   d'aspect-ratio:16/7 : elle recouvrait la jaquette et poussait le titre hors du
   cadre, où overflow:hidden le rognait. Mesuré : 1038 px au lieu de 88.

   La règle qui vaut pour tout ce fichier : un composant qui contient plusieurs
   images ne se stylise pas au type d'élément. */
.banniere__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
}

.banniere::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        var(--piece) 2%,
        color-mix(in oklab, var(--accent) 55%, transparent) 42%,
        transparent 85%
    );
}

.banniere__contenu {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    padding: var(--sp-5) clamp(var(--sp-3), 4vw, var(--sp-6));
    display: flex;
    align-items: flex-end;
    gap: var(--sp-3);
}

.banniere__icone {
    width: clamp(3.5rem, 7vw, 5.5rem);
    border-radius: var(--r-md);
    border: 1px solid rgb(255 217 122 / .3);
    flex: 0 0 auto;
}

.banniere__titre {
    font-size: var(--fs-h1);
    color: var(--or);
    text-shadow: 0 .15em .6em rgb(13 7 9 / .85);
}

.versions { border-top: 1px solid rgb(201 168 79 / .22); }

.version {
    padding-block: var(--sp-4);
    border-bottom: 1px solid rgb(201 168 79 / .22);
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: var(--sp-2) var(--sp-5);
}

.version__numero {
    font-family: var(--display);
    font-size: var(--fs-h3);
    font-variant-numeric: tabular-nums;
}

.version__numero span {
    display: block;
    font-family: var(--courant);
    font-size: var(--fs-petit);
    color: var(--texte-discret);
}

.version__notes { color: var(--texte-discret); white-space: pre-line; max-width: var(--mesure); }

/* ── Bloc « ou ca se joue » ───────────────────────────────────────────────── */

.table-avona {
    padding: var(--sp-5);
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, var(--surface) 0%, var(--piece) 100%);
    border: 1px solid rgb(201 168 79 / .2);
    text-align: center;
}

.table-avona h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-2); }
.table-avona p { color: var(--texte-discret); max-width: 46ch; margin-inline: auto; }

/* ── Lien courant ─────────────────────────────────────────────────────────── */

/* Le filet dore se dessine au survol, comme sur les titres du catalogue. C'est
   le seul traitement de lien de la vitrine : un seul geste, partout. */
.lien {
    text-decoration: none;
    background-image: linear-gradient(var(--or), var(--or));
    background-size: 0 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .25s ease;
}

.lien:hover { background-size: 100% 1px; color: var(--texte); }

/* ── Contact ──────────────────────────────────────────────────────────────── */

/* L'adresse est la seule chose soulevee de la page. Le cadre est un filet dore,
   pas un aplat : c'est une dorure a chaud, des traits et des lettres. */
.adresse {
    margin-block: var(--sp-5) var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid rgb(201 168 79 / .35);
    border-radius: var(--r-lg);
    background: var(--surface);
    display: inline-block;
    max-width: 100%;
}

.adresse a {
    font-family: var(--display);
    font-size: clamp(1.15rem, 3.4vw, 1.9rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--or);
    text-decoration: none;
    /* Une adresse longue ne doit pas pousser la page hors de l'ecran. */
    overflow-wrap: anywhere;
}

.adresse a:hover { text-decoration: underline; text-underline-offset: .25em; }

/* ── Mentions legales ─────────────────────────────────────────────────────── */

/* Une page de texte, et rien d'autre : pas de carte, pas d'encadre. Elle se lit
   ou elle se parcourt, et la colonne de mesure fait tout le travail. */
.legal h2 {
    font-size: var(--fs-h2);
    margin-top: var(--sp-5);
    margin-bottom: var(--sp-2);
}

.legal h2:first-child { margin-top: 0; }

.legal dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: .4rem var(--sp-3);
    margin: 0 0 var(--sp-3);
}

.legal dt { color: var(--texte-discret); }
.legal dd { margin: 0; }

.legal__maj { margin-top: var(--sp-5); font-size: var(--fs-petit); }

/* Sur un telephone, « Directeur de la publication » ne partage pas sa ligne. */
@media (max-width: 40rem) {
    .legal dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .legal dt { margin-top: var(--sp-2); }
}

/* ── Erreurs ──────────────────────────────────────────────────────────────── */

.erreur { text-align: center; }
.erreur .mesure { margin-inline: auto; }

/* Le code en lettres creuses : de l'or en traits, jamais en surface. */
.erreur__code {
    font-family: var(--display);
    font-size: clamp(4rem, 14vw, 9rem);
    font-weight: 600;
    line-height: 1;
    margin: 0 0 var(--sp-2);
    color: var(--or-logo);
}

@supports (-webkit-text-stroke: 1px currentColor) {
    .erreur__code {
        color: transparent;
        -webkit-text-stroke: 1.5px var(--or-logo);
    }
}

.erreur__issues {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2) var(--sp-4);
    margin-top: var(--sp-4);
    font-size: var(--fs-petit);
    color: var(--texte-discret);
}

.erreur__issues a { text-decoration: none; }
.erreur__issues a:hover { color: var(--or); }

/* ── Vide ─────────────────────────────────────────────────────────────────── */

.vide {
    padding-block: var(--sp-7);
    text-align: center;
    color: var(--texte-discret);
}

/* ── Pied ─────────────────────────────────────────────────────────────────── */

.pied {
    margin-top: var(--sp-7);
    padding-block: var(--sp-5);
    border-top: 1px solid rgb(245 236 224 / .08);
    font-size: var(--fs-petit);
    color: var(--texte-discret);
}

.pied__rang {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    align-items: center;
}

/* Le nom du studio ne suit pas la ligne dans sa discretion : la mention legale
   est grise, le nom reste creme. C'est une marque, pas une note de bas de page. */
.pied .nom-studio { color: var(--texte); }

.pied nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
.pied a { text-decoration: none; white-space: nowrap; }
.pied a:hover { color: var(--or); }

/* ── La bannière, pleine largeur ─────────────────────────────────────────── */

/* Elle sort de la coquille : c'est la seule image qui porte le nom du jeu, et la
   contenir la réduirait à une vignette large. Les coins et les bords latéraux
   disparaissent donc — un rayon de 20 px sur un élément qui touche les deux bords
   de l'écran ne se lit pas comme un arrondi, mais comme un défaut. */
.banniere--large {
    border-radius: 0;
    border-inline: 0;
}

/* Deux sélecteurs pour un seul rôle. La bannière éditoriale est un <picture>, la
   jaquette de repli un <img> nu : le premier cas stylise l'enveloppe, le second
   l'image elle-même. Le « > img » est sans danger ici — un <picture> ne contient
   qu'une image, par définition du format. */
.banniere__image,
.banniere__image > img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
}

.banniere__contenu {
    padding-block: var(--sp-5);
    padding-inline: 0;
}

.banniere__coquille {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-3);
}

/* ── L'en-tête de fiche : pastilles, puis accroche ───────────────────────── */

.fiche__entete {
    padding-block: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid rgb(201 168 79 / .22);
}

.fiche__accroche {
    margin-top: var(--sp-3);
    max-width: var(--mesure);
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--texte-discret);
    text-wrap: pretty;
}

/* ── Les blocs éditoriaux ────────────────────────────────────────────────── */

.bloc { padding-block: var(--sp-6); }
.bloc + .bloc { padding-top: 0; }

.bloc__titre {
    font-size: var(--fs-h2);
    margin-bottom: var(--sp-3);
}

/* L'intertitre : un bloc Texte réduit à son titre. Il est plus grand que les
   titres de bloc qu'il chapeaute, et le filet — celui de l'en-tête de fiche — le
   rattache à ce qui suit plutôt qu'à ce qui précède : peu d'air dessous, tout
   l'espace d'un bloc au-dessus. */
.bloc--intertitre { padding-bottom: var(--sp-3); }
.bloc + .bloc--intertitre { padding-top: var(--sp-2); }

.bloc--intertitre .bloc__titre {
    font-size: var(--fs-h1);
    margin-bottom: 0;
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid rgb(201 168 79 / .22);
}

/* Le rendu du Markdown restreint. Sept balises en tout : le sélecteur de type est
   donc légitime ici — ce contenu n'a aucune classe, il sort d'un convertisseur. */
.prose { max-width: var(--mesure); color: var(--texte-discret); }
.prose p { margin-bottom: .9em; }
.prose strong { color: var(--texte); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 .9em; }
.prose li { margin-bottom: .3em; }

.prose a {
    color: var(--texte);
    text-decoration: none;
    background-image: linear-gradient(var(--or), var(--or));
    background-size: 100% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: color .2s ease;
}

.prose a:hover { color: var(--or); }

/* ── Bloc « Texte + image » ──────────────────────────────────────────────── */

.bloc--duo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: center;
}

/* L'image est écrite en premier dans le document ; « order » la renvoie à droite.
   Sur une colonne, cet ordre s'annule et le document reprend la main : l'image
   arrive avant le texte, ce qui est l'ordre de lecture voulu. */
.bloc--duo-inverse .bloc__image { order: 2; }

.bloc__image img,
.bloc__image picture {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-md);
    border: 1px solid rgb(245 236 224 / .1);
}

/* ── Bloc « Cartes » ─────────────────────────────────────────────────────── */

.cartes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--sp-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.carte-jeu {
    padding: var(--sp-3);
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid rgb(245 236 224 / .08);
    transition: border-color .2s ease, transform .2s ease;
}

.carte-jeu:hover {
    border-color: rgb(201 168 79 / .34);
    transform: translateY(-2px);
}

.carte-jeu__image {
    display: block;
    margin-bottom: var(--sp-2);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.carte-jeu__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.carte-jeu__nom {
    font-size: var(--fs-h3);
    color: var(--or);
    margin-bottom: .4rem;
}

.carte-jeu__phrase { font-size: var(--fs-petit); }

/* ── Bloc « Galerie » ────────────────────────────────────────────────────── */

.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--sp-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.galerie__vignette {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid rgb(245 236 224 / .1);
    border-radius: var(--r-md);
    overflow: hidden;
    background: none;
    cursor: zoom-in;
    transition: border-color .2s ease;
}

.galerie__vignette:hover { border-color: rgb(255 217 122 / .45); }

.galerie__vignette img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform .25s ease;
}

.galerie__vignette:hover img { transform: scale(1.03); }

.galerie__loupe {
    position: absolute;
    right: .6rem;
    bottom: .6rem;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgb(13 7 9 / .72);
    color: var(--or);
    font-size: .9rem;
    opacity: 0;
    transition: opacity .2s ease;
}

.galerie__vignette:hover .galerie__loupe,
.galerie__vignette:focus-visible .galerie__loupe { opacity: 1; }

.galerie__legende {
    margin: .6rem 0 0;
    font-size: var(--fs-petit);
    color: var(--texte-discret);
}

/* ── La visionneuse ──────────────────────────────────────────────────────── */

.visionneuse {
    width: min(96vw, 76rem);
    max-width: none;
    max-height: 94vh;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--texte);
    overflow: visible;
}

/* Le voile derrière. `::backdrop` n'hérite de rien : sa couleur s'écrit en dur,
   les variables de :root ne l'atteignent pas. */
.visionneuse::backdrop { background: rgb(13 7 9 / .92); }

.visionneuse__scene {
    margin: 0;
    display: grid;
    gap: var(--sp-2);
    justify-items: center;
}

.visionneuse__scene img {
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    height: auto;
    border-radius: var(--r-md);
    border: 1px solid rgb(201 168 79 / .28);
}

.visionneuse figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: var(--sp-2);
    font-size: var(--fs-petit);
    color: var(--texte-discret);
    text-align: center;
}

.visionneuse__rang { font-variant-numeric: tabular-nums; color: var(--or-logo); }

.visionneuse__fermer,
.visionneuse__bras {
    position: absolute;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    border: 1px solid rgb(201 168 79 / .28);
    background: rgb(23 15 18 / .9);
    color: var(--texte);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}

.visionneuse__fermer:hover,
.visionneuse__bras:hover { border-color: var(--or); color: var(--or); }

.visionneuse__fermer { top: -1rem; right: -0.5rem; }
.visionneuse__bras { top: 50%; transform: translateY(-50%); }
.visionneuse__bras--avant { left: -0.5rem; }
.visionneuse__bras--apres { right: -0.5rem; }

/* ── Bloc « Chiffres » et « Citation » ───────────────────────────────────── */

.chiffres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--sp-3);
    margin: 0;
    padding-block: var(--sp-4);
    border-block: 1px solid rgb(201 168 79 / .22);
    text-align: center;
}

/* Le filet entre les colonnes, jamais avant la première : un séparateur qui
   ouvre la rangée se lit comme une bordure de bloc. */
.chiffre + .chiffre { border-left: 1px solid rgb(201 168 79 / .22); }

.chiffre__valeur {
    font-family: var(--display);
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    font-weight: 600;
    color: var(--or);
    line-height: 1;
}

.chiffre__libelle {
    margin: .4rem 0 0;
    font-size: var(--fs-petit);
    color: var(--texte-discret);
}

.citation {
    margin: 0;
    padding-left: var(--sp-3);
    border-left: 2px solid var(--or-logo);
    max-width: 44rem;
}

.citation blockquote {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(1.35rem, 2.6vw, 1.85rem);
    line-height: 1.35;
    color: var(--texte);
}

.citation blockquote p { margin-bottom: .4em; }

.citation figcaption {
    margin-top: var(--sp-2);
    font-size: var(--fs-petit);
    color: var(--texte-discret);
}

/* ── D'autres jeux ───────────────────────────────────────────────────────── */

.autres-jeux {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--sp-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.autre-jeu {
    display: block;
    text-decoration: none;
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid rgb(245 236 224 / .08);
    background: var(--surface);
    transition: border-color .2s ease, transform .2s ease;
}

.autre-jeu:hover {
    border-color: rgb(201 168 79 / .34);
    transform: translateY(-2px);
}

.autre-jeu__jaquette {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.autre-jeu__nom {
    display: block;
    padding: var(--sp-2) var(--sp-2) 0;
    font-family: var(--display);
    font-size: var(--fs-h3);
}

.autre-jeu:hover .autre-jeu__nom { color: var(--or); }

.autre-jeu__categorie {
    display: block;
    padding: .2rem var(--sp-2) var(--sp-2);
    font-size: var(--fs-petit);
    color: var(--texte-discret);
}

/* ── L'accueil : le carrousel ────────────────────────────────────────────── */

.heros__attente {
    margin-top: var(--sp-4);
    font-family: var(--display);
    font-size: var(--fs-h3);
    color: var(--or-logo);
}

.carrousel,
.diapo--seule {
    margin-top: clamp(var(--sp-4), 6vw, var(--sp-6));
}

.carrousel { padding-bottom: var(--sp-4); }
.diapo--seule { margin-bottom: var(--sp-5); }

/* La piste EST le carrousel sans script : une rangée qui se balaie au doigt et
   s'arrête net sur chaque jeu. `position: relative` fait d'elle l'offsetParent des
   diapositives — c'est de là que le contrôleur lit où défiler. */
.carrousel__piste {
    position: relative;
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: var(--r-lg);
    border: 1px solid rgb(245 236 224 / .1);
}

.carrousel__piste::-webkit-scrollbar { display: none; }

.diapo {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    text-align: left;
    overflow: hidden;
}

.diapo--seule {
    border-radius: var(--r-lg);
    border: 1px solid rgb(245 236 224 / .1);
}

.diapo__image,
.diapo__image > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 7;
    object-fit: cover;
}

/* Le même dégradé que la bannière d'une fiche, teinté par le jeu de la
   diapositive : il porte le texte, et dit de quel jeu on parle avant qu'on lise. */
.diapo__visuel { position: relative; }

.diapo__visuel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        var(--piece) 4%,
        color-mix(in oklab, var(--accent) 50%, transparent) 46%,
        transparent 82%
    );
}

.diapo__texte {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    display: grid;
    justify-items: start;
    gap: var(--sp-1);
    padding: var(--sp-4) clamp(var(--sp-3), 4vw, var(--sp-5));
}

.diapo__tete {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.diapo__icone {
    width: clamp(2.75rem, 5vw, 4rem);
    height: auto;
    border-radius: var(--r-sm);
    border: 1px solid rgb(255 217 122 / .3);
    flex: 0 0 auto;
}

.diapo__nom {
    font-size: var(--fs-h1);
    text-shadow: 0 .15em .6em rgb(13 7 9 / .85);
}

.diapo__lien {
    text-decoration: none;
    color: var(--or);
}

/* Le seul lien de la diapositive, étendu à toute sa surface. */
.diapo__lien::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
}

.diapo__lien:focus-visible { outline: none; }
.diapo:has(.diapo__lien:focus-visible) { outline: 2px solid var(--or); outline-offset: -2px; }

.diapo__accroche {
    max-width: 46ch;
    color: var(--texte);
    text-shadow: 0 .1em .5em rgb(13 7 9 / .9);
    /* Deux lignes au plus par-dessus l'image : au-delà, le texte mange le visuel.
       L'accroche entière est sur la fiche, à un clic. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.diapo .bande li { color: var(--texte); }

.diapo__suite {
    margin-top: var(--sp-1);
    font-size: var(--fs-petit);
    color: var(--texte-discret);
    transition: color .2s ease;
}

.diapo:hover .diapo__suite { color: var(--or); }

/* Les commandes */

.carrousel__commandes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1) var(--sp-2);
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid rgb(201 168 79 / .22);
}

/* `hidden` doit gagner sur le `display` ci-dessus : sans script, pas de boutons
   qui ne feraient rien. */
.carrousel__commandes[hidden],
.carrousel__pause[hidden] { display: none; }

.carrousel__bras,
.carrousel__pause {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 .6rem;
    border-radius: 999px;
    border: 1px solid rgb(201 168 79 / .28);
    background: transparent;
    color: var(--texte);
    font: inherit;
    font-size: var(--fs-petit);
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}

.carrousel__pause { padding-inline: .9rem 1.1rem; }

.carrousel__bras:hover,
.carrousel__pause:hover { border-color: var(--or); color: var(--or); }

.carrousel__bras svg,
.carrousel__pause svg { width: 1.2rem; height: 1.2rem; }

.carrousel__lecture-icone,
.carrousel__pause--arrete .carrousel__pause-icone { display: none; }
.carrousel__pause--arrete .carrousel__lecture-icone { display: block; }

.carrousel__points { display: flex; }

/* Le point se voit petit, mais se touche grand : 44 px de cible, 10 px de rond. */
.carrousel__point {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.carrousel__point::before {
    content: '';
    width: .625rem;
    height: .625rem;
    border-radius: 50%;
    border: 1px solid var(--or-logo);
    transition: background-color .2s ease, transform .2s ease;
}

.carrousel__point:hover::before { transform: scale(1.25); }
.carrousel__point[aria-current]::before { background: var(--or-logo); }

.carrousel__rang {
    margin-left: auto;
    font-size: var(--fs-petit);
    font-variant-numeric: tabular-nums;
    color: var(--texte-discret);
}

/* ── L'accueil : la table Avona ──────────────────────────────────────────── */

.maison--photo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: center;
}

.maison__photo picture,
.maison__photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-md);
    border: 1px solid rgb(245 236 224 / .1);
}

/* Sans photo, trois colonnes séparées par un filet — la même grammaire que les
   chiffres clés. Avec photo, la colonne est étroite : les étapes s'empilent. */
.etapes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: etape;
}

.etape {
    counter-increment: etape;
    padding: var(--sp-1) var(--sp-4);
}

.etape:first-child { padding-left: 0; }
.etape + .etape { border-left: 1px solid rgb(201 168 79 / .22); }

.etape::before {
    content: counter(etape);
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: var(--sp-2);
    border-radius: 50%;
    border: 1px solid var(--or-logo);
    font-family: var(--display);
    font-size: 1.125rem;
    color: var(--or);
}

.etape h3 { font-size: var(--fs-h3); margin-bottom: .4rem; }
.etape p { color: var(--texte-discret); max-width: 32ch; }

.maison--photo .etapes { grid-template-columns: minmax(0, 1fr); }

.maison--photo .etape {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-left: 0;
    border-top: 1px solid rgb(201 168 79 / .22);
}

.maison--photo .etape::before { grid-row: span 2; margin: 0; }
.maison--photo .etape p { max-width: none; }

/* ── L'accueil : le journal des nouveautés ───────────────────────────────── */

.journal {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgb(201 168 79 / .22);
}

.journal__entree {
    position: relative;
    display: grid;
    grid-template-columns: 7rem 8.5rem minmax(0, 1fr) auto;
    gap: var(--sp-1) var(--sp-3);
    align-items: baseline;
    padding-block: var(--sp-3);
    border-bottom: 1px solid rgb(201 168 79 / .22);
}

.journal__date {
    font-size: var(--fs-petit);
    font-variant-numeric: tabular-nums;
    color: var(--texte-discret);
}

.journal__etiquette {
    justify-self: start;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texte-discret);
}

/* Un filet, jamais un aplat : l'or reste une dorure. */
.journal__etiquette--nouveau {
    padding: .1rem .55rem;
    border: 1px solid rgb(255 217 122 / .45);
    border-radius: 999px;
    color: var(--or);
}

.journal__titre { font-size: var(--fs-h3); transition: color .2s ease; }

.journal__lien { text-decoration: none; }

/* Toute la ligne se clique, pour un seul arrêt de tabulation. */
.journal__lien::after {
    content: '';
    position: absolute;
    inset: 0;
}

.journal__version {
    font-family: var(--courant);
    font-size: var(--fs-petit);
    font-variant-numeric: tabular-nums;
    color: var(--texte-discret);
    margin-left: .35rem;
}

.journal__extrait {
    margin-top: .25rem;
    color: var(--texte-discret);
    max-width: var(--mesure);
}

.journal__fleche {
    color: var(--or-logo);
    transition: transform .2s ease, color .2s ease;
}

.journal__entree:hover .journal__titre,
.journal__entree:hover .journal__fleche { color: var(--or); }
.journal__entree:hover .journal__fleche { transform: translateX(.25rem); }

.journal__entree:has(.journal__lien:focus-visible) {
    outline: 2px solid var(--or);
    outline-offset: 4px;
}

.journal__lien:focus-visible { outline: none; }

/* ── L'accueil : le studio ───────────────────────────────────────────────── */

.studio__titre {
    font-size: var(--fs-h3);
    color: var(--or);
    margin-bottom: var(--sp-2);
}

.studio__pied { margin-top: var(--sp-3); }

/* ── Les pages fixes : « Le studio », « Infos » ──────────────────────────── */

/* Sans bannière, le titre seul ouvre la page ; les blocs qui suivent portent déjà
   leur propre marge haute. */
.page-fixe__entete { padding-bottom: 0; }
.page-fixe__entete .section__titre { margin-bottom: 0; }

.page-fixe__contact { margin: 0; }

.maison__suite { margin-top: var(--sp-4); }

/* ── La frise : « Le chemin parcouru » ───────────────────────────────────── */

/* Un axe vertical, jamais horizontal : une frise horizontale défile de côté dès
   cinq entrées, et sur un téléphone dès deux. L'axe est un filet or, tracé une
   seule fois sur toute la hauteur — des filets par année se couperaient entre
   deux millésimes. Il s'efface en bas : l'histoire continue. */
.frise {
    --frise-annee: 7rem;
    --frise-retrait: 2.25rem;

    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.frise::before {
    content: '';
    position: absolute;
    top: .6rem;
    bottom: 0;
    left: var(--frise-annee);
    width: 1px;
    background: linear-gradient(to bottom, rgb(201 168 79 / .5) 85%, transparent);
}

.frise__annee {
    display: grid;
    grid-template-columns: var(--frise-annee) minmax(0, 1fr);
    padding-bottom: var(--sp-4);
}

.frise__millesime {
    font-size: var(--fs-h2);
    color: var(--or-logo);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.frise__entrees {
    margin: 0;
    padding: 0 0 0 var(--frise-retrait);
    list-style: none;
}

.frise__entree {
    position: relative;
    padding-bottom: var(--sp-4);
}

.frise__entree:last-child { padding-bottom: 0; }

/* Le jalon : un rond bordeaux cerclé d'or, posé sur l'axe. */
.frise__entree::before {
    content: '';
    position: absolute;
    top: .45rem;
    left: calc(var(--frise-retrait) * -1 - .4rem);
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: var(--bordeaux);
    border: 1px solid var(--or-logo);
}

/* La sortie : un losange or plein. Petit, donc une dorure et pas un aplat. */
.frise__entree--sortie::before {
    border-radius: 1px;
    background: var(--or);
    border-color: var(--or);
    transform: rotate(45deg) scale(.9);
}

.frise__date {
    display: block;
    font-size: var(--fs-petit);
    color: var(--texte-discret);
    font-variant-numeric: tabular-nums;
}

/* Un h4 : la règle des titres du site s'arrête au h3. Sans ces lignes, il prenait
   la police courante en gras et les marges du navigateur. */
.frise__titre {
    margin: .15rem 0 0;
    font-family: var(--display);
    font-size: var(--fs-h3);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-wrap: balance;
}

.frise__etiquette {
    display: inline-block;
    margin-right: .5rem;
    padding: .05rem .5rem;
    vertical-align: .2em;
    border: 1px solid rgb(255 217 122 / .45);
    border-radius: 999px;
    font-family: var(--courant);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--or);
}

.frise__lien {
    text-decoration: none;
    background: linear-gradient(var(--or), var(--or)) 0 100% / 0 1px no-repeat;
    transition: background-size .25s ease, color .2s ease;
}

.frise__lien:hover { color: var(--or); background-size: 100% 1px; }

.frise__texte {
    margin-top: .3rem;
    color: var(--texte-discret);
    max-width: var(--mesure);
}

.frise__jeu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    margin-top: var(--sp-2);
}

.frise__jaquette {
    width: 7rem;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-sm);
    border: 1px solid rgb(245 236 224 / .1);
}

/* ── Apparitions ─────────────────────────────────────────────────────────── */

/* L'état masqué est posé PAR LE SCRIPT, jamais ici : une page qui dépend d'un
   script pour afficher son texte n'est pas une page. Ces deux règles ne servent
   donc qu'aux navigateurs qui exécutent le contrôleur, et le contrôleur ne se
   pose pas du tout sous « prefers-reduced-motion ». */
.a-apparaitre {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .22s ease-out, transform .22s ease-out;
}

.apparu {
    opacity: 1;
    transform: none;
}

/* ── Pour les lecteurs d'écran seuls ─────────────────────────────────────── */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Adaptation ───────────────────────────────────────────────────────────── */

@media (max-width: 56rem) {
    /* Une colonne : « ordre » s'annule, et le document reprend la main - l'image
       passe avant le texte, ce qui est l'ordre de lecture voulu. */
    .bloc--duo { grid-template-columns: minmax(0, 1fr); }
    .bloc--duo-inverse .bloc__image { order: 0; }
}

@media (max-width: 48rem) {
    :root { --fs-h2: 1.5rem; }

    .entree,
    .proposition,
    .version {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-3);
    }

    .entree__jaquette { max-width: 20rem; }

    .nav { gap: .9rem; }
    .entete__rang { gap: var(--sp-2); }

    .pied nav { margin-left: 0; }

    /* Un 16/7 de 350 px de large fait 150 px de haut : une bande ou le titre ne
       respire pas. La banniere reprend de la hauteur sur petit ecran. */
    .banniere__image,
    .banniere__image > img { aspect-ratio: 4 / 3; }

    .banniere__contenu { padding-block: var(--sp-3); }

    /* Le texte passe SOUS l'image, jamais par-dessus en petit : sur 350 px de
       large, une accroche posée sur la photo couvrirait la moitié du visuel. */
    .diapo__image,
    .diapo__image > img { aspect-ratio: 4 / 3; }

    .diapo__texte {
        position: static;
        padding: var(--sp-3) var(--sp-2) var(--sp-2);
    }

    /* Le dégradé ne porte plus de texte : il ne fait plus qu'une transition vers
       le fond. Gardé à sa hauteur de bureau, il éteignait la moitié de l'image. */
    .diapo__visuel::after {
        background: linear-gradient(to top, var(--piece) 0%, transparent 30%);
    }

    .diapo__nom { font-size: var(--fs-h2); }
    .diapo__accroche { text-shadow: none; color: var(--texte-discret); }

    .carrousel__commandes { justify-content: center; }
    .carrousel__rang { margin-left: 0; }

    .maison--photo { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }

    .etapes { grid-template-columns: minmax(0, 1fr); }

    .etape,
    .etape:first-child {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: var(--sp-3);
        padding: var(--sp-3) 0;
    }

    .etape + .etape { border-left: 0; border-top: 1px solid rgb(201 168 79 / .22); }
    .etape::before { grid-row: span 2; margin: 0; }

    .journal__entree { grid-template-columns: minmax(0, 1fr) auto; }

    .journal__date,
    .journal__etiquette,
    .journal__corps { grid-column: 1; }

    .journal__fleche { grid-column: 2; grid-row: 1 / span 3; align-self: center; }

    /* L'année passe au-dessus de ses entrées, dans la même colonne : l'axe
       glisse tout à gauche, et le texte garde la largeur de l'écran. */
    .frise { --frise-annee: .45rem; --frise-retrait: 1.6rem; }

    .frise__annee { grid-template-columns: var(--frise-annee) minmax(0, 1fr); }

    .frise__millesime {
        grid-column: 2;
        padding-left: var(--frise-retrait);
        margin-bottom: var(--sp-2);
    }

    .frise__entrees { grid-column: 2; }

    .frise__jaquette { width: 6rem; }

    /* Les cartes passent a une par rangee : deux colonnes rendraient la phrase
       illisible. La galerie en garde deux - ce ne sont que des images. */
    .cartes { grid-template-columns: minmax(0, 1fr); }
    .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .visionneuse__fermer { top: -3rem; right: 0; }
    .visionneuse__bras { top: auto; bottom: -3.25rem; transform: none; }
    .visionneuse__bras--avant { left: 25%; }
    .visionneuse__bras--apres { right: 25%; }
}

/* Sous 360 px, la marque et trois liens ne tiennent plus sur une ligne : la
   navigation passe dessous, entière, plutôt que de pousser la page de côté.
   Mesuré : 33 px de débordement à 320 px avant cette règle. */
@media (max-width: 22.4rem) {
    .entete__rang { flex-wrap: wrap; row-gap: .25rem; }
    .nav { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}