/* ==========================================================================
   rayon.css — l'écran « Mes histoires » présenté comme une étagère.

   Le rayon est l'hôte, la tranche est le volume. Ce fichier ne décrit jamais
   la forme d'une tranche : elle vit dans tranche.css, en une seule
   définition. Il décide seulement de la façon dont les volumes sont posés,
   et de ce que révèle celui qu'on sort du rayon.

   PAS DE CARTE. Aucun fond de carte, aucune bordure, aucun rayon 16, aucune
   ombre, aucune vignette, aucune pastille. Le panneau de droite est posé à
   plat sur la page : c'est de la typographie, pas un objet.

   UN SEUL APLAT TERRE PAR ÉCRAN. C'est le bouton d'action du panneau — ou,
   quand le rayon est vide, celui de l'état vide. Le bouton de création de
   l'en-tête est pour cette raison passé en secondaire dans index.html.
   ========================================================================== */

.rayon-ecran {
  display: grid;
  gap: var(--espace-48);
}

/* Un rayon et son titre. Élément de grille, donc min-width: auto par défaut :
   sa taille minimale serait celle de son contenu. Trente volumes réclament
   880 px, et c'est la page entière qui s'élargissait au lieu du rayon qui
   défile — vérifié au navigateur à 599 px. */
.rayon-bloc {
  min-inline-size: 0;
}

/* --- Titre de section ------------------------------------------------------
   Le filet part du titre et court jusqu'au bord du conteneur. */

.rayon-intitule {
  display: flex;
  align-items: center;
  gap: var(--espace-16);
  margin-block-end: var(--espace-24);
}

.rayon-intitule h2 {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* --encre-legere ne descend pas sous 18px : 4,13 sur crème, sous le seuil
     de 4,5 imposé par AGENTS.md. --encre-douce tient la même fonction de
     libellé discret à 7,15. */
  color: var(--encre-douce);
}

.rayon-intitule::after {
  content: '';
  flex: 1 1 auto;
  block-size: 1px;
  background: var(--bord);
}

/* --- Disposition -----------------------------------------------------------
   Le rayon à gauche, le panneau à sa droite. */

.rayon-disposition {
  display: flex;
  align-items: flex-end;
  gap: var(--espace-32);
}

/* L'étagère. box-sizing content-box pour que block-size décrive exactement la
   hauteur offerte aux tranches : elles valent 100 % du rayon, cible 200 px.
   Le retrait bas laisse passer le contour de focus, que overflow-x rognerait
   sinon. */
.rayon {
  box-sizing: content-box;
  flex: 0 1 auto;
  display: flex;
  align-items: flex-end;              /* même ligne de base basse */
  gap: var(--espace-4);               /* 4 px entre les groupes */
  min-inline-size: 0;
  block-size: 200px;
  padding: var(--espace-24) var(--espace-16) var(--espace-8);
  background: var(--creme-profond);
  overflow-x: auto;
  overflow-y: hidden;
}

/* Un groupe de 6 à 8 volumes, collés comme des livres qui se tiennent. */
.rayon-groupe {
  display: flex;
  align-items: flex-end;
  block-size: 100%;
}

/* Le volume ouvert s'écarte de ses voisines. La marge appartient au rayon,
   pas à la tranche : c'est une règle de rangement, pas une forme.
   --transition vaut 0ms sous prefers-reduced-motion, l'écart devient alors
   instantané sans qu'aucune règle supplémentaire soit nécessaire. */
.rayon .tranche {
  transition: margin var(--transition), color var(--transition);
}

.rayon .tranche[aria-expanded='true'] {
  margin-inline: 6px;
}

/* --- Panneau ---------------------------------------------------------------
   À plat. Rien qui le détache du fond de page. */

.rayon-panneau {
  flex: 1 1 clamp(240px, 32vw, 420px);
  align-self: flex-end;
  min-inline-size: 0;
  display: grid;
  justify-items: start;
  gap: var(--espace-16);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.rayon-panneau h3 {
  margin: 0;
  font-family: var(--police-titre);
  font-size: 32px;
  font-weight: var(--titre-graisse);
  font-variation-settings: 'opsz' 32;
  line-height: var(--titre-interligne);
  letter-spacing: var(--titre-tracking);
  color: var(--encre);
}

/* Deux lignes de résumé, pas trois. */
.rayon-panneau p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--encre-douce);
}

/* La première page de l'histoire, en petit carré au-dessus du titre.

   Carré et non 16:9, alors que les illustrations sont natives en 16:9 : le
   `cover` rogne les côtés et garde le centre. C'est un repère, pas une
   reproduction — une couverture pleine largeur faisait passer le panneau de
   190 px à 440 px et déséquilibrait la ligne du rayon, haute de 200 px.

   Ce n'est pas une carte : pas de bordure, pas d'ombre. Le fond crème ne sert
   qu'à occuper la place pendant le chargement, pour que le titre ne remonte
   pas d'un cran quand l'image arrive. */
.rayon-illustration {
  inline-size: 88px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--rayon-10);
  background: var(--creme-profond);
}

/* Deux ou trois faits, séparés par un point médian. Pas de pastille : le
   panneau est posé à plat, une puce y ferait objet. */
.rayon-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--espace-4) var(--espace-12);
  font-family: var(--police-ui);
  font-size: 13px;
  line-height: 1.4;
  color: var(--encre-douce);
}

.rayon-meta span + span::before {
  content: '·';
  margin-inline-end: var(--espace-12);
  color: var(--encre-legere);
}

/* L'unique aplat terre de l'écran. */
.rayon-action {
  padding: var(--espace-12) var(--espace-24);
  border: 0;
  border-radius: var(--rayon-plein);
  background: var(--terre);
  color: var(--sur-accent);            /* 4,56 sur terre */
  font-family: var(--police-ui);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}

/* La brique est la profondeur de la terre cuite : c'est elle qui porte le
   survol du bouton principal. */
.rayon-action:hover {
  background: var(--brique);
}

.rayon-action:focus-visible {
  outline: 2px solid var(--terre);
  outline-offset: 2px;
}

/* Le retrait d'un volume reste possible, mais ce n'est pas une action de
   l'écran : pas d'aplat, pas de bordure, pas de rayon. */
.rayon-retrait {
  padding: 0;
  border: 0;
  background: none;
  color: var(--encre-douce);
  font-family: var(--police-ui);
  font-size: 13px;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.rayon-retrait:hover {
  color: var(--alerte-texte);
}

.rayon-retrait:focus-visible {
  outline: 2px solid var(--terre);
  outline-offset: 2px;
}

/* --- Rayon vide ------------------------------------------------------------
   Le titre de section et son filet restent : c'est ce qui dit qu'il y a un
   rayon, et qu'il attend. Aucune illustration, aucune icône. */

.rayon-vide {
  display: grid;
  justify-items: start;
  gap: var(--espace-24);
  max-inline-size: 46ch;
}

.rayon-vide p {
  margin: 0;
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--encre-douce);
}

/* --- Sous 600 px -----------------------------------------------------------
   Le rayon défile horizontalement, les tranches gardent leurs 28 px, le
   panneau passe dessous. */

@media (max-width: 600px) {
  .rayon-ecran {
    gap: var(--espace-32);
  }

  .rayon-disposition {
    flex-direction: column;
    align-items: stretch;
    gap: var(--espace-24);
  }

  .rayon {
    inline-size: auto;
    padding-inline: var(--espace-12);
  }

  .rayon-panneau {
    flex: 0 0 auto;
  }

  .rayon-panneau h3 {
    font-size: 26px;
    font-variation-settings: 'opsz' 26;
  }
}