/* =========================================================
   layout.css — L'Atelier des Arts · Piste Kandinsky
   Grille principale : contenu + sidebar permanente
   ========================================================= */

/* ---- Base corps ---------------------------------------- */
body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--color-ink);
}
h1 { font-size: clamp(2.6rem, 5.6vw, 5rem);   }
h2 { font-size: clamp(2rem,   3.4vw, 3.2rem);  }
h3 { font-size: clamp(1.3rem, 1.9vw, 1.7rem);  }
h4 { font-size: 1.2rem; }

p  { color: var(--color-ink-soft); line-height: 1.7; }
p + p { margin-top: 1em; }
strong { font-weight: 600; }

/* ---- Site wrapper -------------------------------------- */
.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-content { flex: 1; }

/* ---- Container centré ---------------------------------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--padding-x);
}

/* ---- Grille page : contenu | sidebar ------------------- */
.page-grid {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--padding-x);
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  gap: var(--gutter);
  align-items: start;
  padding-top: var(--space-12);
  padding-bottom: var(--space-16);
}
.page-grid__main   { min-width: 0; }
.page-grid__sidebar { position: sticky; top: 108px; min-width: 0; }

/* ---- Entry content (Gutenberg) ------------------------- */
.entry-content > * + * { margin-top: 1.5em; }

/* Titres du contenu : les lignes sont equilibrees plutot que remplies jusqu'au
   bord. Sans cela, un titre long comme « Le festival "L'Opera dans tous ses
   etats" » venait buter contre la colonne de droite et laissait deux mots
   seuls sur la seconde ligne (remarque du 6 septembre 2026, point 4.6). */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.post-header__title {
  text-wrap: balance;
}

/* Les liens du contenu doivent se voir : sans cela, un lien vers un article
   de presse ou une page interne passe pour du texte ordinaire. */
.entry-content a:not(.btn) {
  color: var(--color-blue);
  border-bottom: 1px solid currentColor;
  transition: color var(--ease-fast);
}
.entry-content a:not(.btn):hover { color: var(--color-red); }
.entry-content ul,
.entry-content ol  { list-style: revert; padding-left: 1.5em; }
.entry-content ul li + li,
.entry-content ol li + li { margin-top: 0.4em; }
/* Images et légendes du contenu.
   Marges élargies le 08/09/2026 (point 2.2) : la légende reste collée à sa
   photo, mais le bloc entier se détache nettement du texte qui suit. */
.entry-content figure { margin-block: 2.75em; }
.entry-content figcaption {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-muted);
  margin-top: 0.7em;
  text-align: center;
}

/* Bloc « Image » natif de Gutenberg — le seul que la cliente peut insérer
   elle-même avec une légende (point 2.1). Jusqu'au 08/09/2026 il n'était pas
   stylé du tout : toutes les photos du site étaient posées en HTML brut, hors
   de sa portée. Il reçoit désormais le même traitement que les autres photos
   du site, cadre orangé compris, pour qu'une image qu'elle ajoute ressemble
   aux autres sans qu'elle ait à s'en occuper. */
.entry-content .wp-block-image { margin-block: 2.75em; }
.entry-content .wp-block-image img {
  background: var(--color-white);
  padding: 6px;
  border: 2px solid var(--color-orange);
  box-shadow: var(--shadow-card);
}
.entry-content .wp-block-image figcaption {
  margin-top: 0.7em;
  font-size: 0.85rem;
  color: var(--color-muted);
  text-align: center;
}
/* Une image alignée à droite ou à gauche garde de l'air côté texte. */
.entry-content .wp-block-image.alignright { margin-left: var(--space-8); }
.entry-content .wp-block-image.alignleft  { margin-right: var(--space-8); }
/* Une image pleine largeur n'a pas besoin du cadre : il ferait vignette. */
.entry-content .wp-block-image.alignfull img,
.entry-content .wp-block-image.alignwide img { border: 0; padding: 0; box-shadow: none; }
.entry-content blockquote {
  border-left: 4px solid var(--color-red);
  padding-left: 1.25em;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--color-ink-soft);
}
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content th,
.entry-content td   { padding: 0.6em 0.9em; border-bottom: 1px solid var(--color-line); }
.entry-content th   { font-weight: 600; background: var(--color-bg-alt); }

/* ---- Section générique -------------------------------- */
.section       { padding-block: var(--space-20); }
.section--alt  { background: var(--color-bg-alt); }

/* En-tête de section */
.section__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin-bottom: var(--space-3);
}
.section__title { margin-bottom: var(--space-4); }
.section__title em { font-style: italic; color: var(--color-blue); }
.section__lede  { font-size: 1.02rem; color: var(--color-muted); max-width: 58ch; }

/* Deco-divider Kandinsky (3 segments colorés) */
.deco-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-3);
}
.deco-divider span { display: block; height: 3px; }
.deco-divider span:nth-child(1) { width: 36px; background: var(--color-red); }
.deco-divider span:nth-child(2) { width: 14px; background: var(--color-yellow); }
.deco-divider span:nth-child(3) { width: 22px; background: var(--color-blue); }

/* ---- Skip link accessibilité -------------------------- */
.skip-link {
  position: absolute;
  top: -100px; left: 16px;
  background: var(--color-red);
  color: var(--color-white);
  padding: 12px 20px;
  font-weight: 500;
  z-index: 9999;
  transition: top 0.2s;
}
.skip-link:focus { top: 16px; }

/* ---- Post / article ----------------------------------- */
.post-header { margin-bottom: var(--space-8); }
.post-header__meta {
  font-size: 0.82rem;
  color: var(--color-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.post-header__title {
  font-family: var(--font-display);
  font-style: italic;
}
/* Photo de tête.
   Marge basse portée de 2rem à 3rem le 08/09/2026 : la cliente trouvait le
   texte « trop près » sous la photo (point 2.2 du plan d'action). */
.post-thumbnail {
  margin-bottom: var(--space-12);
  aspect-ratio: 16 / 7;
  overflow: hidden;
}
.post-thumbnail img { width: 100%; height: 100%; object-fit: cover; }

/* Photo carree en vis-a-vis du titre, plutot qu'en bandeau large
   (point 9.4 du plan). Sur petit ecran, les deux reviennent l'un sous l'autre. */
.post-header-duo {
  display: grid;
  grid-template-columns: 1fr minmax(0, 280px);
  gap: var(--gutter);
  align-items: center;
  margin-bottom: var(--space-12);
}
.post-header-duo .post-header { margin-bottom: 0; }
.post-header-duo .post-thumbnail--cote {
  aspect-ratio: 1 / 1;
  margin-bottom: 0;
}
/* Sur un portrait, le visage est dans la partie haute : on cadre dessus
   plutot qu'au centre, sinon le haut du crane est rogne. */
.post-thumbnail--cote img { object-position: center top; }
@media (max-width: 700px) {
  .post-header-duo { grid-template-columns: 1fr; gap: var(--space-6); }
  .post-header-duo .post-thumbnail--cote { max-width: 280px; }
}

/* Cadrage choisi page par page dans l'éditeur (encadré « Cadrage de la photo
   de tête »). Sans réglage, le recadrage reste centré comme avant. */
.post-thumbnail--haut img { object-position: center top; }
.post-thumbnail--bas  img { object-position: center bottom; }
/* « Photo entière » : on abandonne le bandeau 16/7 et on montre toute
   l'image, hauteur plafonnée pour qu'un portrait ne mange pas l'écran. */
.post-thumbnail--entiere { aspect-ratio: auto; }
.post-thumbnail--entiere img {
  width: auto;
  height: auto;
  max-height: 620px;
  max-width: 100%;
  margin-inline: auto;
  object-fit: contain;
}

/* ---- Pagination --------------------------------------- */
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: var(--space-12); }
.pagination a,
.pagination .current {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--color-line);
  font-size: 0.9rem;
  transition: var(--ease-fast);
}
.pagination a:hover { border-color: var(--color-red); color: var(--color-red); }
.pagination .current { background: var(--color-red); border-color: var(--color-red); color: var(--color-white); }

/* ---- Responsive --------------------------------------- */
@media (max-width: 1100px) {
  :root { --padding-x: 32px; }
  .page-grid { grid-template-columns: 1fr; gap: 0; }
  .page-grid__sidebar { position: static; padding-top: var(--space-10); }
}
@media (max-width: 768px) {
  :root { --padding-x: 20px; --gutter: 28px; }
}