/* Thème Cosmodrome : mise en page téléphone et tablette des éléments propres au blog.
   Chargée après blog.css et après css/cosmodrome-responsive.css du site (burger, menu latéral replié, tableaux, schémas : voir functions.php), seulement sous 1160 px (attribut media) ;
   toutes les règles sont dans des @media : le bureau (> 1160 px) est celui de blog.css, inchangé.
   Seuils du site : 1160 px (burger), 1024 px (une colonne), 820 px, 520 px (téléphone). */

/* Trois colonnes (menu | articles | outils) : sous 1160 px, les outils passent sous les articles, dans la colonne du centre */
@media (max-width: 1160px) {
  .layout-blog { grid-template-columns: var(--sidebar) minmax(0, 1fr); }
  .layout-blog .blog-tools { grid-column: 2; padding-top: 0; }
}

/* Une seule colonne : menu replié (bouton ajouté par js/cosmodrome-responsive.js), articles, puis outils */
@media (max-width: 1024px) {
  .layout-blog .blog-tools { grid-column: auto; margin-top: 12px; padding: 22px 0 24px; border-top: 1px solid var(--color-archive); }
  .layout-blog .main { padding-bottom: 12px; }
  .blog-tools .widget { margin-bottom: 24px; }
  /* Menu replié : tout son contenu est caché sauf le bouton (les titres des widgets « Musées » et « Voyages » ne sont pas dans une liste, la règle du site ne les cache pas) */
  .blog-menu.replie > :not(.sidenav-toggle) { display: none; }
  /* Les widgets du menu du blog et leurs titres : même retrait que le menu replié */
  .blog-menu .widget-title { margin: 22px 0 8px 17px; }
}

@media (max-width: 820px) {
  .main { overflow-wrap: break-word; }
  .entry-meta { margin-left: 0; }
  .blog-tagline { margin-top: -6px; }
  .entry-footer { gap: 6px 14px; }

  /* Textes d'articles écrits entre 2006 et 2022 : tableaux et code défilent dans leur cadre, vidéos à leur proportion */
  .entry-content table, .blog-tools table { display: block; max-width: 100%; overflow-x: auto; }
  .entry-content pre { max-width: 100%; overflow-x: auto; }
  .entry-content iframe[src*="youtube"], .entry-content iframe[src*="youtu.be"], .entry-content iframe[src*="vimeo"], .entry-content iframe[src*="dailymotion"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .entry-content video { height: auto; }
  .entry-content .wp-caption { width: auto !important; }

  .posts-navigation .nav-links, .comment-navigation .nav-links { flex-direction: column; }
  .posts-navigation .nav-next, .comment-navigation .nav-next { margin-left: 0; text-align: left; }
  .posts-navigation a, .comment-navigation a { display: block; }

  .comment-list .children { padding-left: 16px; }
  .comment-body { padding: 10px 12px 4px; }
  .comment-meta { flex-wrap: wrap; }
  .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"] { max-width: 100%; }
  .main .search-form { max-width: 100%; }
}

@media (max-width: 520px) {
  /* Images à gauche ou à droite du texte : au-dessus du texte, centrées, sur toute la largeur possible */
  .entry-content img[align="right"], .entry-content img.alignright, .entry-content .right,
  .entry-content img[align="left"], .entry-content img.alignleft { float: none; display: block; margin: 8px auto 12px; }
  .entry-content img { margin-right: 0; }
  .entry-content .alignleft, .entry-content .alignright, .entry-content .wp-caption.alignleft, .entry-content .wp-caption.alignright { float: none; display: block; margin: 8px auto 12px; }
  .entry-result .entry-title { font-size: 20px; }
  .comment-list .children { padding-left: 10px; }
  .search-form { flex-wrap: wrap; }
  .search-submit { width: 100%; }
  .subpages { padding: 14px 14px 8px; }
}