/* ==========================================
   1. VARIABLES (les mêmes que style.css)
   ========================================== */
:root {
    --fond: #15100c;
    --encre: #f1e7da;
    --encre-douce: #a99b8c;
    --braise: #ef7b45;
    --argile: #e8a38e;
    --trait: rgba(241, 231, 218, 0.12);
    --trait-fort: rgba(241, 231, 218, 0.28);
    --marge: clamp(1.25rem, 4vw, 3.5rem);
    --respiration: 1.4vw;   /* retrait du texte par rapport aux lignes de la trame */
}

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

/* ==========================================
   2. BASE & FOND
   La barre de défilement est masquée : sinon elle réduit la largeur de la page
   et décale les colonnes (donc Archives / Contact) par rapport à l'accueil.
   ========================================== */
html {
    background: var(--fond);
    scrollbar-width: none;
}

html::-webkit-scrollbar { display: none; }


body {
    margin: 0;
    background-color: var(--fond);
    color: var(--encre);
    font-family: "Space Mono", monospace;
    -webkit-font-smoothing: antialiased;
}

.contexte-background {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(60vw 60vw at 6% 0%, rgba(239, 123, 69, 0.20), transparent 70%),
        radial-gradient(55vw 55vw at 100% 100%, rgba(232, 163, 142, 0.14), transparent 70%);
}

.contexte-background::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.3;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* Transition depuis / vers l'accueil : le personnage glisse et rétrécit (ou grandit) */
@view-transition { navigation: auto; }

/* Le petit faust glisse en une seule courbe longue (départ vif, arrivée très douce) ;
   le reste de la page se fond lentement, sans à-coup. */
::view-transition-group(faust) {
    animation-duration: 1.2s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(faust),
::view-transition-new(faust) {
    animation-duration: 1.2s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(root) { animation: vt-sortie 0.4s cubic-bezier(0.4, 0, 0.6, 1) both; }
::view-transition-new(root) { animation: vt-entree 0.5s cubic-bezier(0.4, 0, 0.6, 1) both; }
@keyframes vt-sortie { to { opacity: 0; filter: blur(5px); } }
@keyframes vt-entree { from { opacity: 0; } }

/* L'en-tête est identique d'une page à l'autre : onglets, rond de thème et flèche de retour
   restent en place (ils ne se rechargent pas) ; seul le soulignement de l'onglet actif se fond. */
.nav-bar      { view-transition-name: onglets; }
.theme-toggle { view-transition-name: bascule; }
.retour       { view-transition-name: retour; }

::view-transition-group(onglets),
::view-transition-group(bascule),
::view-transition-group(retour) { animation-duration: 0.5s; animation-timing-function: ease; }

/* Entre deux catégories, le petit faust ne bouge pas de place : il s'estompe puis réapparaît en douceur
   (la classe faust-fixe est posée par le script de l'en-tête quand il garde la même position). */
html.faust-fixe::view-transition-old(faust) { animation: faust-sortie 0.35s ease both; }
html.faust-fixe::view-transition-new(faust) { animation: faust-entree 1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both; }
@keyframes faust-sortie { to { opacity: 0; } }
@keyframes faust-entree { from { opacity: 0; transform: scale(0.86); filter: blur(4px); } }

/* Quand l'en-tête est déjà là, il n'a pas à « arriver » une seconde fois */
html.vt .nav-bar,
html.vt .theme-toggle,
html.vt .retour { animation: none; }


@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* ==========================================
   3. TRAME : 3 colonnes de repères, sur toute la hauteur de la page
   ========================================== */
.page {
    overflow-x: clip;
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

.reperes {
    position: absolute;
    inset: 0 var(--marge);
    z-index: 0;
    pointer-events: none;
    border-right: 1px solid var(--trait);
    background: linear-gradient(to right, var(--trait) 1px, transparent 1px) 0 0 / 33.3333% 100%;
}

.page > *:not(.reperes) { position: relative; z-index: 1; }

a:focus-visible,
button:focus-visible { outline: 2px solid var(--argile); outline-offset: 6px; border-radius: 2px; }


/* ==========================================
   5. EN-TÊTE : retour | personnage | onglets
   Même grille et même alignement que l'accueil : les onglets restent
   exactement à la même place quand on change de page.
   ========================================== */
.entete {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    padding: clamp(0.9rem, 3vh, 1.5rem) var(--marge);
}

.retour {
    grid-column: 1;
    justify-self: start;
    padding: 0 0 6px var(--respiration);
    color: var(--encre-douce);
    text-decoration: none;
    font-size: clamp(0.75rem, 1.1vw, 0.95rem);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    transition: color 0.3s ease;
}

.retour:hover,
.retour:focus-visible { color: var(--argile); }

/* Petit personnage au centre, avec son halo.
   Il porte le même view-transition-name que celui de l'accueil : c'est lui qui rétrécit. */
.mini-embleme {
    grid-column: 2;
    justify-self: center;
    position: relative;
    display: block;
    height: clamp(4.25rem, 11vh, 7rem);
    aspect-ratio: 474 / 1174;
    view-transition-name: faust;
}

.mini-embleme::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 375%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(closest-side,
        rgba(239, 123, 69, 0.36),
        rgba(239, 123, 69, 0.14) 55%,
        transparent);
}

.mini-embleme img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.nav-bar {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    justify-content: center;
    gap: clamp(1.25rem, 3vw, 2.25rem);
}

.nav-bar a {
    color: var(--encre-douce);
    text-decoration: none;
    font-weight: 400;
    font-size: clamp(0.75rem, 1.1vw, 0.95rem);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding-bottom: 6px;
    background: linear-gradient(var(--argile), var(--argile)) no-repeat 0 100% / 0 1.5px;
    transition: color 0.3s ease, background-size 0.3s ease;
}

.nav-bar a:hover,
.nav-bar a:focus-visible,
.nav-bar a[aria-current="page"] { color: var(--argile); background-size: 100% 1.5px; }

/* ==========================================
   6. TITRE : « Archives sonores » (col. 1) · présentation (col. 3)
   ========================================== */
.titre {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    padding: clamp(1rem, 4vh, 2.5rem) var(--marge) clamp(0.5rem, 2vh, 1.25rem);
}

h1 {
    grid-column: 1 / span 2;
    margin: 0;
    padding-left: var(--respiration);
    font-family: "Fraunces", Georgia, serif;
    font-size: min(6vw, 13vh);
    line-height: 0.95;
    letter-spacing: -0.03em;
}

h1 span { display: block; }
h1 span:first-child { font-weight: 300; font-style: italic; }
h1 span:last-child { font-weight: 400; font-style: normal; color: var(--braise); }

.total {
    font-family: "Space Mono", monospace;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    vertical-align: top;
    color: var(--encre-douce);
    position: relative;
    top: 0.6em;
}

.intro {
    grid-column: 3;
    margin: 0;
    padding: 0 var(--respiration);
    font-family: "Fraunces", Georgia, serif;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.25vw, 1.2rem);
    line-height: 1.5;
    color: var(--encre-douce);
}

/* ==========================================
   7. SIGNAL SONORE : la ligne de la trame passe par son axe
   ========================================== */
.onde {
    width: 100%;
    height: clamp(60px, 10vh, 110px);
    pointer-events: none;
}

.onde::before {
    content: "";
    position: absolute;
    left: var(--marge);
    right: var(--marge);
    top: 50%;
    height: 1px;
    background: var(--trait-fort);
}

.onde svg {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.onde path {
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.trait-braise { stroke: var(--braise); }
.trait-argile { stroke: var(--argile); opacity: 0.6; }


/* ==========================================
   10. PIED
   ========================================== */
.pied {
    margin: 0;
    padding: 1.25rem calc(var(--marge) + var(--respiration)) 1.5rem;
    color: var(--encre-douce);
    font-size: 0.75rem;
}


/* ==========================================
   DESSINS DES MÉTIERS (symboles réutilisés, comme sur l'accueil)
   ========================================== */
.symboles { position: absolute; width: 0; height: 0; overflow: hidden; }

.symboles * {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.symboles .repere { stroke: var(--braise); }

.motif {
    display: block;
    overflow: visible;
    fill: none;
    stroke: var(--argile);
    stroke-width: 1.5;
}

/* ==========================================
   TECHNIQUE : trois métiers, chacun développé en lignes
   Chaque colonne de la trame = un métier ; chaque ligne = un titre + une phrase.
   ========================================== */
.competences {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: clamp(1.5rem, 5vh, 3rem) var(--marge) clamp(2rem, 6vh, 4rem);
    flex: 1;
}

.metier {
    margin: 0 var(--respiration);
    min-width: 0;
}

.metier-tete {
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--trait-fort);
}

.metier .motif {
    width: 58%;
    max-width: 14rem;
    height: clamp(28px, 4.5vh, 44px);
    margin: 0 0 0.9rem;
}

.metier-num {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--braise);
}

.metier h2 {
    margin: 0;
    font-family: "Fraunces", Georgia, serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.6rem, 2.5vw, 2.4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.lignes { list-style: none; margin: 0; padding: 0; counter-reset: ligne; }

.lignes li {
    position: relative;
    padding: 1.05rem 0 1.05rem 2.4rem;
    border-bottom: 1px solid var(--trait);
    counter-increment: ligne;
}

/* numéro de ligne, comme une graduation */
.lignes li::before {
    content: counter(ligne, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 1.2rem;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    color: var(--encre-douce);
    transition: color 0.3s ease;
}

.lignes li:hover::before { color: var(--braise); }

.lignes .t {
    display: block;
    font-family: "Fraunces", Georgia, serif;
    font-weight: 400;
    font-size: clamp(1.05rem, 1.35vw, 1.3rem);
    line-height: 1.2;
    color: var(--encre);
}

.lignes .d {
    display: block;
    margin-top: 0.3rem;
    font-family: "Fraunces", Georgia, serif;
    font-weight: 300;
    font-size: clamp(0.9rem, 1.05vw, 1rem);
    line-height: 1.5;
    color: var(--encre-douce);
}

@media (max-width: 760px) {
    :root { --respiration: 0.75rem; }
    .reperes { background-size: 50% 100%; }
    .titre { grid-template-columns: 1fr; gap: 1.25rem; }
    h1, .intro { grid-column: 1; }
    h1 { font-size: clamp(3rem, 15vw, 5rem); }
    .intro { padding: 0 var(--respiration); }
    .competences { grid-template-columns: 1fr; row-gap: 2.5rem; }
}

/* ==========================================================
   BASCULE DE THÈME : orange (par défaut) <-> minimaliste
   Le bouton .theme-toggle pose  <html data-theme="minimal">  et mémorise le choix.
   Pendant le changement, <html> reçoit la classe .theme-anim (fondu de 0,5 s).
   ========================================================== */

html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
    transition: color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease,
                fill 0.5s ease, stroke 0.5s ease, opacity 0.5s ease, filter 0.5s ease !important;
}

/* ----- Le bouton : un disque à moitié plein, qui tourne à chaque clic ----- */
.theme-toggle {
    appearance: none;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    position: relative;
    z-index: 2;
    width: 26px;
    height: 26px;
    margin: -3px var(--respiration, 1.4vw) 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--argile);
    cursor: pointer;
    transition: color 0.3s ease;
}

.theme-toggle svg {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

.theme-toggle:hover,
.theme-toggle:focus-visible { color: var(--encre); }

.theme-toggle:focus-visible { outline: 2px solid var(--argile); outline-offset: 6px; border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
    .theme-toggle svg { transition: none; }
}

@media (max-width: 760px) {
    .entete { justify-content: flex-start; align-items: flex-start; gap: 0.6rem; }
    .mini-embleme { grid-column: auto; margin-left: auto; justify-self: auto; }
    .nav-bar { grid-column: auto; grid-row: auto; margin-left: auto; gap: 0.9rem; }
    .theme-toggle { grid-column: auto; grid-row: auto; margin: -4.5px 0 0; flex: none; align-self: flex-start; }
}

/* ----- Thème minimaliste : sombre, monochrome, sans décor ----- */
html[data-theme="minimal"] {
    --fond: #0b0b0c;
    --encre: #ecebe8;
    --encre-douce: #76736f;
    --braise: #ecebe8;          /* l'orange devient blanc cassé */
    --argile: #bdbab4;          /* le rose argile devient gris clair */
    --trait: rgba(236, 235, 232, 0.07);
    --trait-fort: rgba(236, 235, 232, 0.16);
}

html[data-theme="minimal"],
html[data-theme="minimal"] body { background: var(--fond); }

html[data-theme="minimal"] ::selection { background: var(--encre); color: var(--fond); }

html[data-theme="minimal"] .contexte-background { opacity: 0; }

html[data-theme="minimal"] .embleme::after,
html[data-theme="minimal"] .mini-embleme::after { opacity: 0; }

html[data-theme="minimal"] .embleme img,
html[data-theme="minimal"] .mini-embleme img { filter: grayscale(1) brightness(1.08) contrast(0.95); }

html[data-theme="minimal"] .trait-argile { opacity: 0; }
html[data-theme="minimal"] .onde path { stroke-width: 1; }
html[data-theme="minimal"] .trait-braise { stroke: var(--encre); opacity: 0.85; }

html[data-theme="minimal"] h1 span:last-child  { color: var(--encre); }


html[data-theme="minimal"] .motif,
html[data-theme="minimal"] .motif * { stroke-width: 1; }


html[data-theme="minimal"] .kicker,
html[data-theme="minimal"] .intro-kicker,
html[data-theme="minimal"] .film-num b { color: var(--encre-douce); }

/* Archives */
html[data-theme="minimal"] .page > .filtres { background: rgba(11, 11, 12, 0.9); }
html[data-theme="minimal"] .filtre.actif { background: rgba(236, 235, 232, 0.05); }

html[data-theme="minimal"] .cadre,
html[data-theme="minimal"] .fiche-cadre {
    background: #101011;
    border-color: var(--trait-fort);
    box-shadow: none;
}

html[data-theme="minimal"] .cadre:hover,
html[data-theme="minimal"] .cadre:focus-visible { border-color: var(--encre-douce); box-shadow: none; }

html[data-theme="minimal"] .visuel .t2 { opacity: 0; }
html[data-theme="minimal"] .visuel .t1 { stroke: var(--encre); stroke-width: 1; }

html[data-theme="minimal"] .grand-num {
    color: rgba(236, 235, 232, 0.05);
}

html[data-theme="minimal"] .voir { background: var(--encre); color: var(--fond); }
html[data-theme="minimal"] .film:hover { background: none; }
html[data-theme="minimal"] .tous { color: var(--encre); }

html[data-theme="minimal"] .fiche { background: var(--fond); }
html[data-theme="minimal"] .fiche-barre { background: linear-gradient(to bottom, rgba(11, 11, 12, 0.96), rgba(11, 11, 12, 0.7)); }
html[data-theme="minimal"] .fiche-id h2 { color: var(--encre); }

/* ==========================================================
   ONGLETS : Archives · Cahier de Brouillon · Contact
   Les trois sont centrés dans la 3e colonne de la trame ; le rond de thème
   est sorti de la colonne, dans la marge de droite, bien à part.
   ========================================================== */
.nav-bar {
    grid-column: 3;
    justify-self: center;
    justify-content: center;
    width: max-content;
    margin: 0;
    gap: clamp(0.7rem, 1.4vw, 1.5rem);
}

.nav-bar a {
    white-space: nowrap;
    font-size: clamp(0.6rem, 0.95vw, 0.95rem);
}

@media (min-width: 761px) {
    .theme-toggle {
        position: absolute;
        top: calc(clamp(0.6rem, 0.95vw, 0.95rem) * 0.65 - 10px);
        right: calc(var(--marge) / 2 - 12px);
        width: 24px;
        height: 24px;
        margin: 0;
    }
}

@media (max-width: 1000px) {
    .nav-bar .suite { display: none; }   /* « Cahier de Brouillon » devient « Cahier » quand la colonne est étroite */
}

@media (max-width: 760px) {
    .theme-toggle { position: static; }
    .nav-bar { width: auto; margin-left: auto; }
    .nav-bar .suite,
    .retour .txt { display: none; }
}

/* ==========================================================
   ARRIVÉE EN DOUCEUR : après le glissement du petit faust, chaque élément apparaît
   à son tour (titre, onglets, puis le reste). Le petit faust, lui, n'est jamais animé ici :
   c'est la transition de page qui le déplace.
   ========================================================== */
@keyframes arrivee    { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes apparition { from { opacity: 0; } to { opacity: 1; } }

h1                { animation: arrivee 1s cubic-bezier(0.22, 1, 0.36, 1) 0.30s both; }
.intro,
.coordonnees      { animation: arrivee 1s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both; }
.retour,
.nav-bar          { animation: arrivee 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both; }
.theme-toggle     { animation: apparition 0.9s ease 0.75s both; }
.onde             { animation: apparition 1.2s ease 0.40s both; }
.bas,
.filtres,
.galerie,
.feuillets,
.competences,
.pied             { animation: apparition 1s ease 0.70s both; }

@media (prefers-reduced-motion: reduce) {
    h1, .intro, .coordonnees, .retour, .nav-bar, .theme-toggle,
    .onde, .bas, .filtres, .galerie, .feuillets, .competences, .pied { animation: none; }
}




/* ==========================================================
   ONDES AU SOL : des anneaux aplatis (vus en perspective) naissent aux pieds du petit faust,
   s'élargissent en ralentissant et s'effacent au loin. Une lueur et une ombre posées sous ses pieds
   l'ancrent dans ce sol. Le dessin est un SVG (aria-hidden) placé au début de l'en-tête.
   ========================================================== */
.entete {
    --pieds: calc(clamp(0.9rem, 3vh, 1.5rem) + clamp(4.25rem, 11vh, 7rem) - 0.45rem);   /* hauteur des pieds du petit faust */
}

.ondes {
    --h: clamp(20rem, 50vh, 30rem);
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--h);
    top: calc(var(--pieds) - var(--h) / 2);
    z-index: -1;
    overflow: visible;
    pointer-events: none;
    /* plus loin = plus pâle : le haut (derrière) s'efface, le bas (devant) reste net */
    -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0, #000 50%, #000 78%, transparent 100%);
            mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0, #000 50%, #000 78%, transparent 100%);
}

.ondes ellipse {
    fill: none;
    stroke: var(--braise);
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: onde-sol 50s cubic-bezier(0.2, 0.55, 0.3, 1) infinite;
    animation-delay: calc(var(--i) * -20s);
}

/* naissance rapide près des pieds, expansion qui ralentit, disparition au loin */
@keyframes onde-sol {
    0%   { transform: scale(0.05); opacity: 0; }
    8%   { opacity: 0.35; }
    55%  { opacity: 0.05; }
    100% { transform: scale(1); opacity: 0; }
}

/* lueur et ombre posées sur le sol, sous les pieds */
.entete::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: clamp(10rem, 30vh, 16rem);
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 3.6rem 0.55rem at 50% var(--pieds), rgba(0, 0, 0, 0.5), transparent 100%),
        radial-gradient(ellipse 13rem 2.4rem at 50% var(--pieds), rgba(239, 123, 69, 0.3), transparent 100%),
        radial-gradient(ellipse 26rem 5rem at 50% var(--pieds), rgba(239, 123, 69, 0.1), transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
    .ondes ellipse { animation: none; opacity: 0.3; transform: scale(calc(0.2 + var(--i) * 0.2)); }
}

@media (max-width: 760px) {
    .ondes, .entete::before { display: none; }
}

/* thème minimaliste : mêmes anneaux, en gris, sans lueur */
html[data-theme="minimal"] .ondes ellipse { stroke: var(--encre); }
html[data-theme="minimal"] .entete::before { opacity: 0; }


/* ==========================================================
   MOBILE : l'en-tête passe sur deux rangées (4 onglets en haut, puis flèche · petit faust · rond)
   Identique sur toutes les pages.
   ========================================================== */
@media (max-width: 760px) {
    .entete {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: start;
        row-gap: 0.9rem;
        column-gap: 0.6rem;
    }
    .nav-bar {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-self: stretch;
        width: auto;
        margin: 0;
        padding: 0 var(--respiration, 0.75rem);
        justify-content: space-between;
        gap: 0;
    }
    .nav-bar a { font-size: 0.68rem; letter-spacing: 0.1em; }
    .retour { grid-column: 1; grid-row: 2; justify-self: start; }
    .mini-embleme { grid-column: 2; grid-row: 2; justify-self: center; margin: 0; }
    .theme-toggle { position: static; grid-column: 3; grid-row: 2; justify-self: end; margin: 0; align-self: start; }
}