/* Mise en page modernisée de ReOpen911 News (archive statique) — chargée après les feuilles d'origine.
   --u : valeur d'1 px du gabarit d'origine (1000 px de large) ; --t : coefficient des tailles de texte ;
   --h : coefficient des hauteurs fixes des blocs de texte. */

:root { --u: 1px; --t: 1.3; --h: 1.8; }
@media (min-width: 768px)  { :root { --u: min(1px, calc((100vw - 32px) / 1000)); --t: 1.09; --h: 1.3; } }
@media (min-width: 1024px) { :root { --u: min(1.3px, calc((100vw - 48px) / 1000)); --t: 1.12; --h: 1.15; } }
@media (min-width: 1280px) { :root { --t: 1.18; --h: 1.2; } }
@media (min-width: 1600px) { :root { --t: 1.24; --h: 1.25; } }

.entry-content { line-height: 1.6; }

/* Menu : hauteur et interligne suivent la taille du texte */
div#mainmenu { height: calc(26px * var(--t)); }
.nav li a span { line-height: calc(16px * var(--t)); }

/* Bandeau : image de 1000 px centrée sur la bande noire (diaporama Nivo réduit à un fond fixe) */
#sitename { background-position: center top !important; background-color: #000; }
#sitename .nivo-slice, #sitename .nivo-box { display: none !important; }
#sitename img.nivo-main-image { width: auto !important; max-width: 100%; margin: 0 auto; }
#sitename img { display: block; max-width: 100%; height: auto; margin: 0 auto; }

/* Dégradés : les images d'origine (25 px de haut, 265 ou 380 px de large) refaites en CSS pour suivre
   la taille des blocs agrandis ; mêmes couleurs, relevées sur les images */
div#mainmenu, .nav li li a:hover { background-image: linear-gradient(#5f5f5f, #292929); }
#header { background-image: linear-gradient(#282828, #1e1e1e); }
/* Fond de la colonne de droite (filet clair à gauche), placé à la nouvelle largeur du contenu */
#content-container {
  background-image: linear-gradient(to right, transparent calc(667 * var(--u)), #edf3b4 calc(667 * var(--u)),
    #edf3b4 calc(667 * var(--u) + 1px), #f6f9d4 calc(667 * var(--u) + 1px));
}
.home #content-container { background-image: none; }

/* Contenus plus larges que leur colonne */
.entry-content img, .entry-content video, .entry-content iframe, .entry-content object,
.entry-content embed, .sidebar img { max-width: 100%; }
.entry-content img { height: auto; }
#content img { max-width: 100%; height: auto; }
/* Longues adresses citées dans les articles et commentaires */
.entry-content, #comments { overflow-wrap: break-word; }

/* ------------------------------------------------------------------ smartphone */
@media (max-width: 767px) {
  body { overflow-x: clip; }
  #container, #wrapper { width: auto !important; }

  #sitename { height: auto !important; aspect-ratio: 5 / 1; background-size: contain !important; }

  div#mainmenu { height: auto; }
  #mainmenu ul.nav { float: none; display: flex; flex-wrap: wrap; justify-content: center; }
  #mainmenu .nav li { float: none; }

  #content-container { background-image: none; }
  #blog-title, #main-menu { float: none; width: auto; }
  #blog-title { overflow: hidden; }
  #blog-title img { max-width: calc(100% - 10px); height: auto; }
  #sub-header-search { float: none; padding: 0 10px 10px; }
  #content, .post, .page, .post-alt, .sidebar, .sidebar-container, #comments, #respond,
  .navigation { padding-left: 10px !important; padding-right: 10px !important; box-sizing: border-box; }
  .post-alt img.alignleft, .entry-content img.alignleft, .entry-content img.alignright { max-width: 45%; }
}

/* --- Généré par moderniser.py à partir de : News/wp-content/themes/jello-wala-mello/style.css, css/superfish.css --- */
body { font-size: calc(12px * var(--t)); }
form, input, textarea, table { font-size: calc(12px * var(--t)); }
h1, h2, h3, h4, h5, h6 { font-size: calc(18px * var(--t)); }
#blog-title h1 { font-size: calc(36px * var(--t)); }
#sub-header { font-size: calc(11px * var(--t)); }
#sub-header-search input { font-size: calc(11px * var(--t)); }
.entry-meta { font-size: calc(11px * var(--t)); }
.navigation { font-size: calc(11px * var(--t)); }
.entry-meta-2 { font-size: calc(11px * var(--t)); }
.sidebar ul li h3 { font-size: calc(16px * var(--t)); }
#comments ul.domtabs { font-size: calc(11px * var(--t)); }
#comments small.commentmetadata { font-size: calc(11px * var(--t)); }
#comments p.nocomments, p#login-req { font-size: calc(11px * var(--t)); }
#respond form { font-size: calc(11px * var(--t)); }
#respond input, textarea#comment { font-size: calc(11px * var(--t)); }
#footer { font-size: calc(11px * var(--t)); }
.home .multi-purpose ul.domtabs { font-size: calc(10px * var(--t)); }
.normal-content .post-alt h2 { font-size: calc(12px * var(--t)); }
.normal-content .entry-date, .featured-content .entry-date { font-size: calc(11px * var(--t)); }
.featured-content .entry-meta-alt, .normal-content .entry-meta-alt { font-size: calc(11px * var(--t)); }
.nav li a span { font-size: calc(13px * var(--t)); }
.nav li li a span { font-size: calc(11px * var(--t)); }
#container { width: calc(1000 * var(--u)); }
#wrapper { width: calc(1000 * var(--u)); }
#header { width: calc(1000 * var(--u)); }
#sub-header { width: calc(1000 * var(--u)); }
#content-container { width: calc(1000 * var(--u)); }
#content { width: calc(677 * var(--u)); }
.post, .poage { width: calc(667 * var(--u)); }
.navigation { width: calc(667 * var(--u)); }
.sidebar-container { width: calc(322 * var(--u)); }
.sidebar { width: calc(322 * var(--u)); }
#comments { width: calc(667 * var(--u)); }
#comments .domtab { width: calc(667 * var(--u)); }
#comments ul.domtabs { width: calc(667 * var(--u)); }
#respond { width: calc(667 * var(--u)); }
#footer { width: calc(1000 * var(--u)); }
.home #content-container { width: calc(1000 * var(--u)); }
.featured-content { width: calc(1000 * var(--u)); }
.featured-content .post-alt { width: calc(514 * var(--u)); }
.home .multi-purpose { width: calc(360 * var(--u)); }
.home .multi-purpose ul.domtabs { width: calc(360 * var(--u)); }
.normal-content { width: calc(1000 * var(--u)); }
.normal-content .post-alt { width: calc(312 * var(--u)); }
.home .navigation { width: calc(1000 * var(--u)); }
.home .sidebar-container { width: calc(1000 * var(--u)); }
.home .sidebar { width: calc(302 * var(--u)); }
@media (max-width: 767px) {
  #container { width: auto !important; float: none !important; }
  #wrapper { width: auto !important; float: none !important; }
  #header { width: auto !important; float: none !important; }
  #sub-header { width: auto !important; float: none !important; }
  #content-container { width: auto !important; float: none !important; }
  #content { width: auto !important; float: none !important; }
  .post, .poage { width: auto !important; float: none !important; }
  .navigation { width: auto !important; float: none !important; }
  .sidebar-container { width: auto !important; float: none !important; }
  .sidebar { width: auto !important; float: none !important; }
  #comments { width: auto !important; float: none !important; }
  #comments .domtab { width: auto !important; float: none !important; }
  #comments ul.domtabs { width: auto !important; float: none !important; }
  #respond { width: auto !important; float: none !important; }
  #footer { width: auto !important; float: none !important; }
  .home #content-container { width: auto !important; float: none !important; }
  .featured-content { width: auto !important; float: none !important; }
  .featured-content .post-alt { width: auto !important; float: none !important; }
  .home .multi-purpose { width: auto !important; float: none !important; }
  .home .multi-purpose ul.domtabs { width: auto !important; float: none !important; }
  .normal-content { width: auto !important; float: none !important; }
  .normal-content .post-alt { width: auto !important; float: none !important; }
  .home .navigation { width: auto !important; float: none !important; }
  .home .sidebar-container { width: auto !important; float: none !important; }
  .home .sidebar { width: auto !important; float: none !important; }
}
