/* ==========================================================================
   Projéta - Blocks de contenu & layouts Kirby
   --------------------------------------------------------------------------
   Styles des blocks (heading, text, image, gallery, video, list,
   bouton, séparateur, encart) et des rangées du champ layout.
   ========================================================================== */

/* --- Pile de blocks ------------------------------------------------------- */

.blocs > * + * { margin-top: 24px; }
.blocs > .bloc-titre { margin-top: 48px; }
.blocs > .bloc-titre:first-child { margin-top: 0; }

/* Texte courant : largeur de lecture confortable */
.bloc-texte { max-width: 65ch; }
.bloc-texte a { color: var(--bleu); }

/* --- Image ------------------------------------------------------------------ */

.bloc-image img {
  border: var(--trait);
  border-radius: var(--rayon-carte);
}
.bloc-image figcaption {
  font: 400 11px var(--font-mono);
  letter-spacing: .06em;
  opacity: .6;
  margin-top: 10px;
}

/* --- Galerie (bloc de contenu) --------------------------------------------------
   Rangées justifiées : chaque image garde sa proportion (jamais rognée)
   et les images d'une rangée se partagent la largeur disponible moins les
   gouttières. flex-grow et flex-basis suivent le ratio de l'image (posés
   en style inline par blocks/gallery.php) : une rangée pleine se termine à
   hauteur constante. La dernière rangée, incomplète, garde ses images à une
   taille proche (pas d'étirement démesuré) grâce au plafond de hauteur. */

.bloc-galerie {
  display: flex;
  /* flex-wrap: wrap; */
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bloc-galerie li { min-width: 0; }
.bloc-galerie img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--trait);
  border-radius: var(--rayon-carte);
}

.bloc-galerie-figure { margin: 0; }
.bloc-galerie-legende {
  font: 400 11px var(--font-mono);
  letter-spacing: .06em;
  opacity: .6;
  margin-top: 10px;
}

/* --- Vidéo (fichier de la page ou YouTube/Vimeo) --------------------------------- */

.bloc-video video,
.bloc-video__embed {
  display: block;
  width: 100%;
  border: var(--trait);
  border-radius: var(--rayon-carte);
}
.bloc-video__embed { aspect-ratio: 16 / 9; overflow: hidden; }
.bloc-video__embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.bloc-video figcaption {
  font: 400 11px var(--font-mono);
  letter-spacing: .06em;
  opacity: .6;
  margin-top: 10px;
}

/* --- Liste (puces hirondelles, à l'encre de la page) ------------------------------ */

.bloc-liste ul, .bloc-liste ol { padding-left: 0; margin: 0; }
.bloc-liste li {
  list-style: none;
  line-height: 1.5;
  padding-left: 26px;
  position: relative;
  margin-bottom: 8px;
}
/* La puce est une hirondelle (repère de calage, jeton --hirondelle en
   masque) teintée à l'encre de la page courante. */
.bloc-liste ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .28em;
  width: 13px;
  height: 13px;
  background: var(--accent, var(--rose));
  -webkit-mask: var(--hirondelle) center / contain no-repeat;
  mask: var(--hirondelle) center / contain no-repeat;
}
.bloc-liste ol { counter-reset: repere; }
.bloc-liste ol li::before {
  counter-increment: repere;
  content: counter(repere, decimal-leading-zero);
  position: absolute;
  left: 0;
  font: 700 12px var(--font-mono);
  color: var(--accent, var(--bleu));
}

/* --- Bouton (block custom) ---------------------------------------------------------- */

.bloc-bouton {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

/* --- Séparateur (block custom) : trait plein ou traits de coupe ------------------------- */

.bloc-separateur { margin: 40px 0; }

.bloc-separateur--filet { height: 4px; background: var(--ink); }

/* Traits de coupe : l'hirondelle (repère de calage) au centre, un trait
   de coupe de chaque côté (les ::before/::after du bloc). */
.bloc-separateur--coupe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.bloc-separateur--coupe::before,
.bloc-separateur--coupe::after {
  content: "";
  width: 3em;
  height: 1px;
  background: var(--accent);
}
.bloc-separateur--coupe .hirondelle { flex-shrink: 0; }

/* --- Encart (block custom : petite carte penchée façon cartel d'édition) --------------- */

.bloc-encart {
  border: var(--trait);
  border-radius: var(--rayon-carte);
  padding: 20px 26px;
  background: var(--paper);
  max-width: 480px;
}
.bloc-encart--incline { transform: rotate(-3deg); }
.bloc-encart--jaune { background: var(--jaune); }
.bloc-encart--rose  { background: var(--rose); color: #fff; }
.bloc-encart--bleu  { background: var(--bleu); color: #fff; }
.bloc-encart--papier-alt { background: var(--paper-alt); }
.bloc-encart :last-child { margin-bottom: 0; }

/* --- Rangées du champ layout (grille 12 colonnes) ---------------------------------------- */

.rangee {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
}
.rangee + .rangee { margin-top: 40px; }

/* Chaque colonne annonce sa largeur via --span (calculée par le template) */
.rangee__col { grid-column: span var(--span, 12); min-width: 0; }

@media (max-width: 700px) {
  .rangee__col { grid-column: span 12; }
  .rangee { gap: 24px; }
  .rangee + .rangee { margin-top: 24px; }
}