/* Structure catégorielle
   version 2025-04-01 (suit 2025-03-20)
-------------------------------------------------------------------------------------------|
Chaque catégorie est classée par ordre alphabétique.                                       |
– pseudoclasse :    État particulier requis pour appliquer la déclaration.                 |
– Pseudoéléments :  Comportement général non associé à un élément.                         |
– @font :           Déclarations de fontes.                                                |
– @keyframe :       Animations.                                                            |
– HTML :            Uniquement la balise HTML.                                             |
– Agencement :      Organisation globale (grid-area avec body, main header, footer, etc.). |
– Éléments HTML :   Styles spécifiques aux éléments).                                      |
– Identifiants :    Styles spécifiques à une seule entité.                                 |
– Classes :         Styles pour des classes réutilisables.                                 |
– @media :          Styles adaptatifs Media Query.                                         |
------------------------------------------------------------------------------------------ |
• Classement alphabétique dans chaque catégorie.                                           |
• Classement des propriétés ordre logique : disposition, espacement, taille, typographie,  |
  aspect visuel, animation et transition, autres                                           |
-------------------------------------------------------------------------------------------|
*/

/*---------------------------------|
Pseudoclasse : Variables globales. |
-----------------------------------|
*/
:root {
    --image-largeur: min(50vh, calc(var(--menu-largeur) * 0.7));
}


html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

body {
    display: flex;
    flex-direction: column;
}

article {
    /* Espacement */
    padding: 0 var(--rembourrage);
}

article > header,
main > header {
    all: unset;

    padding: var(--rembourrage);
}

main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

article > aside {
    /* Annulation des réglages en menu superposé */
    display: block;
    position: static;
    grid-area: auto;
}

h1, h2 {
    text-align: left;
}

hr.asterisme {
  border: none;
  text-align: center;
  color: rgba(var(--pourpre-rvb), var(--alpha-100));
  background-color: transparent;
  block-size: 2rem;
}

hr.asterisme:after {
    content: "⁂";
}

.carre {
    flex: 1;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.carre img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.galerie {
    flex: 1 1 30%;
    min-height: 0;
    overflow-y: auto;
    padding: var(--rembourrage) 0;
}

.galerie h2,
.galerie p {
  padding: 0 var(--rembourrage);
}

.galerie-colonne:first-child {
    flex: 0 0 var(--image-largeur);
    display: flex;
    justify-content: center;
    align-items: center;
}

.galerie-colonne:nth-child(2) {
    flex: 1; /* Prend le reste de l'espace */
    height: 50vh; /* Force la hauteur à rester à 50vh */
    overflow: hidden; /* Empêche le débordement */
}

.galerie-element {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.galerie-element img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.galerie-element a {
  display: block;
  padding: 0;
  background-color: rgba(var(--pourpre-rvb), var(--alpha-100));
  transition: padding 0.3s ease-in-out, margin 0.3s ease-in-out,
              background-color 0.3s ease-in-out 0.3s;
  box-sizing: border-box;
  text-align: center;
}

.galerie-element a:hover {
  padding: 1rem;
  margin: 0;
  background-color: rgba(var(--pourpre-rvb), var(--alpha-100));
  transition: padding 0.3s ease-in-out, margin 0.3s ease-in-out,
              background-color 0.3s ease-in-out;
}

.galerie-image-principale {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--courbure);
    aspect-ratio: 1 / 1;
    box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.2); /* ombrage doux */
}


.galerie-ligne {
    display: flex;
    margin: var(--interbloc);
    height: 50vh;
}

.galerie-responsive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    padding: var(--rembourrage) 0;
}

.galerie-texte-principal {
    height: 50vh; /* Hauteur fixe égale à la ligne */
    overflow-y: auto; /* Active le défilement */
    background-color: rgba(var(--blanc-casse-rvb), var(--alpha-100));
    padding: var(--rembourrage) 0;
}

.incipit-cabinet {
    background-color: rgba(var(--gris-argent-rvb), var(--alpha-100));
    padding: var(--rembourrage);
    border-left: 0.7rem solid rgba(var(--pourpre-rvb), var(--alpha-100));
    margin: var(--interbloc) 0 calc(1.5 * var(--interbloc)) 0;
}

.literary-analysis {
    background: rgba(var(--pourpre-rvb), var(--alpha-30));
    padding: var(--rembourrage);
    margin: calc(3 * var(--interbloc)) 0;
}

.story-meta {
    color: rgba(var(--gris-sombre-rvb), var(--alpha-100));
    font-style: italic;
    margin: var(--interbloc) 0;
}

.story-meta span,
.story-meta time {
    margin-right: var(--interbloc);
}

/* Adaptaton du nombre de vignettes à la largeur de l’écran */
@media (max-width: 768) {
    .galerie-responsive {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 900px) {
    .galerie-responsive {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 901px) and (max-width: 1200px) {
    .galerie-responsive {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1201px) {
    .galerie-responsive {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 1441px) {
    .galerie-responsive {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width: 1921px) {
    .galerie-responsive {
        grid-template-columns: repeat(7, 1fr);
    }
}