/* =========================================================================
   motels-quebec.com
   Repertoire de motels de la grande region de Quebec.
   Feuille de style reprise telle quelle de motels-montreal.com, pour que les
   deux sites soient identiques. Les seuls ajouts propres a Quebec sont
   regroupes tout en bas, sous « Specifique a Quebec ».
   Concu mobile d'abord : la moitie des visiteurs cherchent une chambre
   depuis la route. Le numero de telephone est l'element principal.
   ========================================================================= */

:root {
  /* Point B008 : on annonce au navigateur que la page gere elle-meme ses
     couleurs. Cela desactive l'inversion automatique du mode sombre force,
     qui rendait le pictogramme du menu invisible. */
  color-scheme: light;

  --encre:        #16202b;
  --lien:         #1a5fb4;   /* point 017 : bleu de lien classique assombri */
  --encre-clair:  #2a3948;
  --ambre:        #ffb627;
  --ambre-sombre: #b87c00;
  --brique:       #c1462e;
  --papier:       #f6f4f1;
  --blanc:        #ffffff;
  --texte:        #2c3742;
  --gris:         #5e6b78;
  --trait:        #ded9d2;

  --bleu-bande:   #0b39e1;   /* point 0028 : le bleu de headingBg.png */
  --largeur:      64rem;
  --rayon:        3px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Point B011 : filet de securite. Meme si un element large s'invite dans la
   page (un bloc publicitaire 728x90 sur un ecran de 390 px, une iframe injectee
   par un tiers), la page ne peut plus se decaler lateralement. */
html, body { max-width: 100%; overflow-x: hidden; }

body {
  margin: 0;
  /* Point 0029 : l'enseigne au neon de l'ancien site, fixe au defilement. */
  background: #000 url('/images/bg1.jpg') no-repeat center top fixed;
  background-size: cover;
  color: var(--texte);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
}

img { max-width: 100%; height: auto; display: block; }
/* Tout ce qu'un tiers peut injecter reste dans la largeur de l'ecran. */
iframe, ins, embed, object, video { max-width: 100%; }
.adsbygoogle { max-width: 100% !important; }
.pub, .pub-ligne { max-width: 100%; overflow: hidden; }
.pub iframe { max-width: 100%; }

/* Points 0078 et 0079 : aucune regle :visited. La couleur definie sur « a »
   et sur les classes s'applique donc aussi aux liens deja cliques, et le
   mauve par defaut du navigateur ne peut plus apparaitre. */
a { color: var(--lien); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--ambre);
  outline-offset: 2px;
}

.saut {
  position: absolute; left: -9999px;
  background: var(--encre); color: var(--blanc);
  padding: .75rem 1rem; z-index: 100;
}
.saut:focus { left: .5rem; top: .5rem; }

/* --- Entete : l'enseigne ------------------------------------------------ */

.entete { background: var(--encre); color: var(--blanc); }

.bande {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 1.25rem;
}

.marque {
  display: inline-block;
  text-decoration: none;
  color: var(--blanc);
  max-width: 100%;
}
.marque img {
  width: auto;
  max-width: min(325px, 100%);
  height: auto;
  /* Point 0026 : coins arrondis. */
  border-radius: 8px;
}

/* --- Emplacements publicitaires ----------------------------------------- */

/* L'ancien site laissait le 728x90 deborder sur mobile. Ici le conteneur
   recadre proprement : l'annonce reste centree et ne provoque jamais de
   defilement horizontal. */
.pub {
  margin: 0 auto 1.75rem;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
}
.pub ins { max-width: 100%; }
.pub-ligne {
  list-style: none;
  margin: 0 0 .75rem;
}
.pub-ligne .pub { margin-bottom: 0; }

/* Reserve la hauteur pour eviter que le contenu saute quand l'annonce
   arrive. Google recommande cette pratique. */
.pub-banniere { min-height: 90px; }
.pub-carre    { min-height: 250px; }

@media (max-width: 47rem) {
  /* Le leaderboard 728px ne tient pas sur un telephone ; on le laisse se
     recadrer plutot que de casser la mise en page. */
  .pub-banniere { min-height: 0; }
}

.accroche {
  margin: .5rem 0 0;
  color: #aab6c2;
  font-size: .95rem;
  max-width: none;
}

/* --- Navigation --------------------------------------------------------- */

.nav { background: var(--encre-clair); }
.nav ul {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 .5rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.nav li { margin: 0; }
.nav a {
  display: block;
  padding: .85rem .9rem;
  color: #d6dee6;
  text-decoration: none;
  font-size: .95rem;
  border-bottom: 3px solid transparent;
}
.nav a:hover { color: var(--blanc); }
.nav a[aria-current="page"] {
  color: var(--blanc);
  font-weight: 600;
  border-bottom-color: var(--ambre);
}
.nav-langue { margin-left: auto; }
/* Point 0025 : le lien du site frere se fond dans le menu, sans surbrillance. */
.nav-frere a   { color: #d6dee6; }
.nav-langue a  { color: #ffd77a; font-weight: 600; }

/* --- Structure de page -------------------------------------------------- */

.enveloppe {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 1.75rem 1.25rem 3rem;
}

.titre-page {
  font-size: clamp(1.4rem, 5vw, 2rem);
  line-height: 1.2;
  margin: 0 0 .4rem;
  font-weight: 700;
}
.intro {
  margin: 0 0 1.5rem;
  color: var(--gris);
}
.compte {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--texte);
}

/* --- Carte -------------------------------------------------------------- */

.carte-cadre {
  height: 22rem;
  background: var(--encre-clair);
  border-radius: var(--rayon);
  overflow: hidden;
  margin-bottom: 2rem;
}
#carte { width: 100%; height: 100%; }

.carte-absente {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 1.5rem;
  text-align: center;
  color: #aab6c2;
  font-size: .95rem;
}

.carte-infobulle {
  font: inherit;
  color: var(--texte);
  max-width: 15rem;
  line-height: 1.4;
}
.carte-infobulle strong { display: block; margin-bottom: .2rem; }
.carte-infobulle a { color: var(--lien); }

/* Le style de Leaflet impose sa propre police ; on remet celle du site. */
.leaflet-container { font: inherit; background: var(--encre-clair); }
.leaflet-popup-content { margin: .75rem .9rem; font: inherit; }
.leaflet-popup-content-wrapper { border-radius: var(--rayon); }

/* Invite affichee tant que la molette n'est pas activee. */
.leaflet-container:not(.leaflet-grab) { cursor: pointer; }

/* --- Liste des motels --------------------------------------------------- */

.liste { list-style: none; margin: 0; padding: 0; }

.fiche {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  margin-bottom: .75rem;
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}

.fiche-logo {
  width: 100%;
  max-width: 11rem;
  border-radius: 2px;
}

.fiche-nom {
  font-size: 1.15rem;
  margin: 0 0 .25rem;
  font-weight: 700;
  line-height: 1.25;
}
.fiche-nom a { text-decoration: none; }
.fiche-nom a:hover { text-decoration: underline; }

.fiche-adresse {
  margin: 0 0 .6rem;
  color: var(--gris);
  font-size: .95rem;
  font-style: normal;
}

/* Le telephone est l'action principale : on lui donne la place. */
/* Points 0056 et 0065 : 1.05rem -> 0.74rem, soit -30 %. */
.tel {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  color: var(--encre);
  text-decoration: none;
  border-bottom: 3px solid var(--ambre);
  padding-bottom: 1px;
}
.tel:hover { border-bottom-color: var(--encre); }

.fiche-liens {
  margin-top: .6rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

/* Point 0044 : compacte pour que Localiser / La fiche / Site web tiennent
   sur une seule ligne dans une case de grille. */
.bouton {
  display: inline-block;
  padding: .35rem .55rem;
  font-size: .82rem;
  white-space: nowrap;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--papier);
  color: var(--texte);
  text-decoration: none;
}
.bouton:hover { border-color: var(--gris); }
.bouton-plein {
  background: var(--encre);
  border-color: var(--encre);
  color: var(--blanc);
}
.bouton-plein:hover { background: var(--encre-clair); }

/* --- Fiche individuelle ------------------------------------------------- */

.fil { font-size: .9rem; color: var(--gris); margin: 0 0 1rem; }
.fil a { color: var(--gris); }

.detail-tete {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.detail-tete .tel { font-size: .8rem; }   /* point 0065 : -30 % */

.detail-meta { list-style: none; margin: 1rem 0 0; padding: 0; }
.detail-meta li {
  display: flex;
  gap: .75rem;
  padding: .5rem 0;
  border-top: 1px solid var(--trait);
  font-size: .95rem;
}
.detail-meta dt, .detail-meta .cle {
  flex: 0 0 7.5rem;
  color: var(--gris);
}

.voisins { margin-top: 2.5rem; }
.voisins h2 { font-size: 1.1rem; margin: 0 0 .75rem; }

/* --- Avis / notes ------------------------------------------------------- */

.avis {
  background: #fff8e8;
  border-left: 4px solid var(--ambre);
  padding: .9rem 1rem;
  margin: 0 0 1.5rem;
  font-size: .95rem;
  border-radius: 0 var(--rayon) var(--rayon) 0;
}

/* --- Pied de page ------------------------------------------------------- */

.pied {
  background: var(--encre);
  color: #b9c4cf;
  margin-top: 2rem;
  font-size: .92rem;
}
/* Point 0057 : pas de limite a 64rem ici, sinon la phrase casse en deux
   lignes alors qu'il reste de la place a l'ecran. */
.pied-avis, .pied-suivez {
  margin: 0 auto;
  padding: 0 1.5rem;
}
.pied-avis { font-size: .88rem; }
.pied-avis {
  padding-top: 2rem;
  line-height: 1.6;
}
.pied-suivez { padding-top: .75rem; padding-bottom: 1rem; }
/* Sur fond bleu nuit, le bleu de lien serait illisible : on eclaircit. */
.pied a { color: #9ec7f5; }
.pied-titre {
  color: var(--blanc);
  font-weight: 600;
  margin: 0 0 .35rem;
}
.pied p { margin: 0 0 .35rem; }
.pied-note { color: #8695a3; }
.pied-bas {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 1rem 1.25rem 2rem;
  border-top: 1px solid var(--encre-clair);
  color: #8695a3;
}

/* --- Tableau des evenements --------------------------------------------- */

.tableau-enveloppe { overflow-x: auto; }
table.evenements {
  width: 100%;
  border-collapse: collapse;
  background: var(--blanc);
  font-size: .95rem;
}
table.evenements th, table.evenements td {
  text-align: left;
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--trait);
}
table.evenements th { background: var(--papier); font-weight: 600; }

/* --- Ecrans plus larges ------------------------------------------------- */

@media (min-width: 34rem) {
  .fiche {
    grid-template-columns: 11rem 1fr;
    align-items: start;
    gap: 1.25rem;
    padding: 1.25rem;
  }
  .carte-cadre { height: 26rem; }
}

@media (min-width: 52rem) {
  .carte-cadre { height: 30rem; }
}

/* --- Preferences d'affichage -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .entete, .nav, .carte-cadre, .pied, .fiche-liens { display: none; }
  .fiche { border: none; border-bottom: 1px solid #999; page-break-inside: avoid; }
  body { background: #fff; }
}

/* --- Slogan (point 020) ------------------------------------------------- */

.slogan {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-style: italic;
  color: var(--gris);
}

/* --- Bannieres des annuaires partenaires -------------------------------- */

.seolnk {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 1.25rem 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.seolnk img { border: 0; }


/* --- Quoi faire (points 011 et 012) ------------------------------------- */

.tourisme-titre {
  font-size: 1.2rem;
  margin: 2.25rem 0 .9rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--ambre);
}

.tourisme { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.tourisme > li { min-width: 0; }

.tourisme-item {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 1rem 1.15rem;
}
.tourisme-item h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.tourisme-item p  { margin: 0; }
.tourisme-hote {
  margin-top: .4rem !important;
  font-size: .85rem;
  color: var(--gris);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 46rem) {
  .tourisme { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* --- Point 0028 : bande bleue de titre ---------------------------------- */

/* Reprend le bleu de headingBg.png de l'ancien site, en CSS plutot qu'en
   image : net a toutes les tailles d'ecran, et aucun fichier a charger. */
.bande-titre {
  background: var(--bleu-bande);
  color: #f7eee2;
  font-size: 1.05rem;
  font-weight: 700;
  font-style: italic;
  margin: 1.75rem 0 1rem;
  padding: .55rem 1rem;
  border-radius: 2px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.bande-compte {
  font-style: normal;
  font-weight: 600;
  font-size: .9rem;
  opacity: .85;
  font-variant-numeric: tabular-nums;
}

/* --- Point 0027 : texte de presentation --------------------------------- */

/* Point 0058 : texte courant, sans encadre blanc, comme la page Quoi faire. */
.presentation {
  margin-bottom: 1.5rem;
  color: var(--gris);
}
.presentation p { margin: 0 0 .8rem; }
.presentation p:last-child { margin-bottom: 0; }

/* --- Point 0030 : trois fiches par ligne -------------------------------- */

.liste-grille {
  display: grid;
  /* Point B011 : « 1fr » vaut « minmax(auto, 1fr) », et ce minimum auto se
     calcule sur le contenu. Une case dont la hauteur derive d'un aspect-ratio
     reclamait alors plus de 580 px sur un telephone de 390 px, et la page
     entiere debordait vers la droite. minmax(0, 1fr) supprime ce plancher. */
  grid-template-columns: minmax(0, 1fr);
  gap: .85rem;
  align-items: stretch;
}
.liste-grille .fiche {
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 0;
  min-width: 0;          /* la case ne peut plus imposer sa largeur a la grille */
  text-align: left;
}
.liste-grille .fiche-logo { max-width: 100%; }
.liste-grille .pub-ligne { display: flex; align-items: center; justify-content: center; }

@media (min-width: 34rem) {
  .liste-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 56rem) {
  /* Trois par ligne, comme l'ancien site. */
  .liste-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* L'enveloppe des pages doit rester lisible par-dessus le fond noir. */
.enveloppe {
  background: var(--papier);
}

/* --- Point 0042 : menu burger en mobile -------------------------------- */

/* Pilote par une case a cocher masquee : aucun JavaScript, donc le menu
   fonctionne meme si le navigateur en bloque l'execution. */
.nav-bascule { position: absolute; opacity: 0; pointer-events: none; }

.nav-burger {
  display: none;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1rem;
  color: #d6dee6;
  cursor: pointer;
  font-size: .95rem;
  font-weight: 600;
  user-select: none;
}
.nav-burger-trait,
.nav-burger-trait::before,
.nav-burger-trait::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  content: '';
  position: relative;
}
.nav-burger-trait::before { top: -6px; position: absolute; }
.nav-burger-trait::after  { top:  6px; position: absolute; }

@media (max-width: 47rem) {
  .nav-burger { display: flex; }

  .nav > ul {
    display: none;
    flex-direction: column;
    padding: 0 0 .5rem;
  }
  .nav-bascule:checked ~ ul { display: flex; }

  .nav > ul a {
    padding: .7rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .nav > ul a[aria-current="page"] {
    border-bottom-color: var(--ambre);
  }
  .nav-langue, .nav-frere { margin-left: 0; }

  /* Le clavier doit voir ou se trouve le focus sur le burger. */
  .nav-bascule:focus-visible ~ .nav-burger {
    outline: 3px solid var(--ambre);
    outline-offset: -3px;
  }
}

/* --- Points 0064 : titres en texte simple, hors bande bleue -------------- */

/* Point 0067 : un seul et meme titre de liste partout sur le site. */
.titre-liste {
  font-size: 1.25rem;
  margin: 2rem 0 1rem;
  font-weight: 700;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--trait);
}
.titre-secteur {
  font-size: 1.05rem;
  margin: 1.75rem 0 .75rem;
  font-weight: 700;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--trait);
}
.titre-liste .compte, .titre-secteur .compte {
  font-weight: 600;
  color: var(--gris);
}

/* --- Point 0071 : festivals ---------------------------------------------- */

.tourisme-item h4 { margin: 0 0 .3rem; font-size: 1.05rem; }
.festival-quand {
  margin: 0 0 .4rem !important;
  font-size: .88rem;
  font-weight: 600;
  color: var(--bleu-bande);
}

/* =========================================================================
   Specifique a Quebec
   Ce qui suit n'existe pas sur Montreal : pages et elements que Quebec a en
   plus. Rien au-dessus de cette ligne n'a ete modifie.
   ========================================================================= */

/* L'epingle de la carte est l'image d'origine du site, images/mapicon.png.
   Rien a styler ici : Montreal dessine la sienne en CSS, Quebec garde la
   sienne en image. */

/* Point B009 : vignette des motels sans logo. Leur nom au complet, sur fond
   bleu nuit, plutot qu'une initiale qui ne disait rien. La taille suit la
   largeur de la case pour qu'un nom long reste lisible sans deborder. */
.fiche-logo-vide {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 300 / 139;
  padding: .6rem .8rem;
  background: var(--encre-clair);
  color: #e6ecf2;
  border-radius: 2px;
  text-align: center;
  min-width: 0;
  overflow: hidden;
}
.fiche-logo-vide span {
  font-size: clamp(.95rem, 2.2vw, 1.35rem);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* Texte reserve aux lecteurs d'ecran. */
.hors-ecran {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Point B008 : le bouton du menu est un vrai pictogramme, sans le mot
   « Menu » ecrit a cote. Les trois traits deviennent une croix a l'ouverture. */
.nav-burger { padding: .75rem 1rem; }
/* Couleur explicite plutot que currentColor : un navigateur qui force le mode
   sombre repeint le texte, mais pas une couleur declaree sur un fond declare. */
.nav-burger-trait,
.nav-burger-trait::before,
.nav-burger-trait::after { background: #e8eef4; }
@media (forced-colors: active) {
  .nav-burger-trait,
  .nav-burger-trait::before,
  .nav-burger-trait::after { background: ButtonText; }
}
.nav-burger-trait,
.nav-burger-trait::before,
.nav-burger-trait::after { width: 24px; height: 3px; border-radius: 2px; transition: transform .15s, opacity .15s; }
.nav-bascule:checked ~ .nav-burger .nav-burger-trait { background: transparent; }
.nav-bascule:checked ~ .nav-burger .nav-burger-trait::before { top: 0; transform: rotate(45deg); }
.nav-bascule:checked ~ .nav-burger .nav-burger-trait::after  { top: 0; transform: rotate(-45deg); }

/* Page « Tous les motels » : sommaire des six secteurs. */
.sommaire {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.sommaire a {
  display: inline-block;
  padding: .35rem .6rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--texte);
  text-decoration: none;
  font-size: .9rem;
}
.sommaire a:hover { border-color: var(--gris); }

/* Point A003 : la page « Tous les motels » empile six tableaux. Sans largeurs
   fixes, chacun calcule les siennes et les colonnes ne s'alignent pas d'un
   tableau a l'autre. table-layout: fixed + colgroup reglent les trois colonnes
   une fois pour toutes. */
.tableau-motels { table-layout: fixed; }
.tableau-motels .col-nom     { width: 32%; }
.tableau-motels .col-adresse { width: 46%; }
.tableau-motels .col-tel     { width: 22%; }
.tableau-motels td, .tableau-motels th { vertical-align: top; overflow-wrap: anywhere; }
.tableau-motels td:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 40rem) {
  /* Sur telephone, trois colonnes serrees deviennent illisibles : chaque motel
     devient un bloc. */
  .tableau-motels, .tableau-motels tbody, .tableau-motels tr, .tableau-motels td { display: block; width: auto; }
  .tableau-motels thead, .tableau-motels colgroup { display: none; }
  .tableau-motels tr { padding: .6rem 0; border-bottom: 1px solid var(--trait); }
  .tableau-motels td { border: 0; padding: 0 0 .15rem; }
  .tableau-motels td:first-child { font-weight: 700; }
}

/* Point A005 : la fiche presente ses coordonnees en liste, pas en boutons. */
.detail-tete .fiche-logo { max-width: 300px; margin: 0 0 .9rem; }
.detail-tete .tel { margin-bottom: .5rem; }
.detail-texte { margin: .9rem 0 0; }
.detail-texte p { margin: 0 0 .6rem; }
.detail-meta .cle { flex: 0 0 7.5rem; color: var(--gris); }
.detail-meta li span:last-child { min-width: 0; overflow-wrap: anywhere; }

/* Mention « en ce moment » a cote de la saison en cours. */
.saison-actuelle {
  display: inline-block;
  vertical-align: middle;
  margin-left: .5rem;
  padding: .05rem .5rem;
  background: var(--bleu-bande);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  border-radius: 2px;
}

/* Points B002 et B010 : le bloc 300x250 occupe une case de la grille, comme sur
   Montreal. Exception entre 34 et 56 rem : a deux colonnes, une case fait moins
   de 300 px et l'annonce se ferait couper, alors elle prend les deux. */
@media (min-width: 34rem) and (max-width: 56rem) {
  .liste-grille .pub-ligne { grid-column: 1 / -1; }
}
.pub-ligne .pub { margin: 0; }
.pub-carre ins, .pub-banniere ins { max-width: 100%; }

/* Point B006 : sur Montreal, la periode d'un festival est bleue parce qu'elle
   accompagne un titre cliquable. Ici la plupart des evenements n'ont pas de
   lien : le bleu laissait croire a un lien mort. Gris fonce, sans equivoque. */
.festival-quand { color: var(--encre); }

/* Page 404 : liste des secteurs. */
.liste-simple { margin: 0; padding-left: 1.25rem; }
.liste-simple li { margin-bottom: .35rem; }

/* Corps d'une fiche : deuxieme colonne de la grille, sous le logo en grille. */
.fiche-corps { min-width: 0; }

/* Liste des secteurs dans le pied. */
.pied-secteurs { color: #8695a3; }

/* Note de bas de page de « Quoi faire ». */
.note-dates { margin-top: 2rem; color: var(--gris); font-size: .9rem; }