:root {
  --bleu: #074b98;
  --bleu-fonce: #143768;
  --marine: #222836;
  --vert: #108848;
  --vert-fonce: #0b6b38;
  --gris-pale: #f2f2f2;
  --texte: #222;
  --police: "Helvetica Neue", Arial, sans-serif;
  --largeur: 1200px;
}

body {
  font-family: var(--police);
  color: var(--texte);
  background: #fff;
  line-height: 1.5;
  margin: 0;
}

a { color: var(--bleu); }

/* Boutons verts */
.button,
input[type="submit"] {
  display: inline-block;
  background: var(--vert);
  color: #fff;
  border: 0;
  padding: 0.7rem 1.4rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.button:hover,
input[type="submit"]:hover { background: var(--vert-fonce); }

/* Texte réservé aux lecteurs d'écran */
.site-nav h2,
.site-search h2,
.site-search label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* En-tête : bandeau bleu avec silhouette */
.site-header__top {
  background-color: var(--bleu);
  background-image: url("../images/skyline.svg");
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: auto 100%;
}
.site-header__top,
.site-header__top a { color: #fff; }

.site-header__inner,
.site-header__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}
.site-header__inner { min-height: 80px; }

.site-header img {
  max-height: 58px;
  width: auto;
}

/* Liens du haut (Se connecter, etc.) */
.site-secondary-menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
}
.site-secondary-menu a { text-decoration: none; }
.site-secondary-menu a:hover { text-decoration: underline; }

/* Barre du menu principal et de la recherche */
.site-header__bar {
  background: var(--bleu);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav li {
  position: relative;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
}
.site-nav li:first-child { border-left: 1px solid rgba(255, 255, 255, 0.25); }

.site-nav li > a,
.site-nav li > span {
  display: block;
  padding: 1rem 1.25rem;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  text-decoration: none;
}
.site-nav li > a:hover,
.site-nav li > a:focus { background: var(--bleu-fonce); }

/* Sous-menus déroulants */
.site-nav li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  flex-direction: column;
  min-width: 240px;
  background: var(--bleu-fonce);
  z-index: 100;
}
.site-nav li ul li { border: 0; }
.site-nav li ul a {
  text-transform: none;
  font-weight: 400;
}
.site-nav li:hover > ul,
.site-nav li:focus-within > ul { display: flex; }

/* Recherche */
.site-search form { display: flex; }
.site-search input[type="search"],
.site-search input[type="text"] {
  padding: 0.6rem 0.8rem;
  min-width: 340px;
  border: 0;
  font-size: 1rem;
}

/* Bannière */
.site-banner {
  background: var(--gris-pale);
  padding: 2rem 1rem;
  text-align: center;
}

/* Contenu principal */
main {
  display: flex;
  gap: 2rem;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 2rem 1rem;
}
.layout-content { flex: 1; min-width: 0; }
.layout-sidebar-first { width: 260px; }

/* Pied de page marine */
.site-footer { background: var(--marine); color: #fff; }
.site-footer a { color: #fff; }

.site-footer__top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 2rem 1rem;
}
.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 1rem;
  font-size: 0.9rem;
}

/* Mobile */
@media (max-width: 768px) {
  .site-header__inner,
  .site-header__bar-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .site-nav,
  .site-nav ul { width: 100%; }
  .site-nav ul { flex-direction: column; }
  .site-nav li {
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  }
  .site-nav li ul { position: static; }
  main { flex-direction: column; }
  .layout-sidebar-first { width: auto; }
}

/* Fond de l'en-tête : image avec silhouette de ville */
.site-header__top {
  background-color: var(--bleu);
  background-image: url("../images/fond-entete.jpg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}

/* Pied de page en colonnes */
.site-footer__top {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
}
.pied-page {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  gap: 2rem;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 2.5rem 1rem;
  box-sizing: border-box;
}
.pied-page img { max-width: 180px; height: auto; }
.pied-page h3 {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pied-page ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pied-page li {
  margin-bottom: 0.6rem;
  font-size: 0.9rem;
}
.pied-page a { text-decoration: none; opacity: 0.9; }
.pied-page a:hover,
.pied-page a:focus { text-decoration: underline; opacity: 1; }
.pied-page ul.pied-page__secondaire { margin-top: 1.5rem; }

/* Barre du droit d'auteur */
.site-footer__bottom {
  max-width: none;
  margin: 0;
  padding: 1rem;
  border-top: 0;
  background: #141f38;
  text-align: center;
  font-size: 0.85rem;
}
.site-footer__bottom p { margin: 0; }

@media (max-width: 900px) {
  .pied-page { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .pied-page { grid-template-columns: 1fr; }
}

/* Couleurs relevées sur le site de la Ville */
.site-header__top { background-color: #1a63b1; }
.site-header__bar { background: #1b4588; }

.site-footer a { color: #cccccc; opacity: 1; }
.pied-page h3 {
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
}
.pied-page li { font-size: 1rem; }
.site-footer__bottom {
  background: #363b48;
  color: #ccc;
}

/* Recherche : champ et bouton alignés */
.site-search form {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.site-search .form-item,
.site-search .form-actions { margin: 0; }
.site-search input[type="search"],
.site-search input[type="text"] {
  height: 44px;
  box-sizing: border-box;
  min-width: 260px;
  padding: 0 0.8rem;
  border: 0;
  border-radius: 0;
}
.site-search input[type="submit"] {
  height: 44px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 1.2rem;
  border-radius: 0;
  font-size: 1rem;
}

/* Bouton de recherche en loupe */
.site-search input[type="submit"] {
  width: 44px;
  padding: 0;
  font-size: 0;
  color: transparent;
  background: var(--vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cpath d='M15 15l6 6'/%3E%3C/svg%3E") center / 22px no-repeat;
}
.site-search input[type="submit"]:hover { background-color: var(--vert-fonce); }

/* Icônes de réseaux sociaux */
.pied-page ul.pied-page__reseaux {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}
.pied-page__reseaux li { margin: 0; }
.pied-page__reseaux a {
  display: inline-block;
  font-size: 1.6rem;
  line-height: 1;
  text-decoration: none;
}
.pied-page__reseaux a:hover,
.pied-page__reseaux a:focus { color: #fff; }

/* Icônes : le texte du lien est masqué, l'icône vient de la bibliothèque */
.pied-page__reseaux a { font-size: 0; }
.pied-page__reseaux a::before { font-size: 1.6rem; }

/* Icônes de réseaux sociaux : ciblées par la classe du lien (bi-...) */
.pied-page li:has(> a[class^="bi-"]) {
  display: inline-block;
  margin: 1.5rem 1rem 0 0;
}
.pied-page a[class^="bi-"] {
  display: inline-block;
  font-size: 0;
  line-height: 1;
}
.pied-page a[class^="bi-"]::before { font-size: 1.6rem; }
.pied-page a[class^="bi-"]:hover,
.pied-page a[class^="bi-"]:focus { color: #fff; }

/* Menu principal : survol vert et panneau à 3 colonnes */
.site-header__bar-inner { position: relative; }
.site-nav li { position: static; }

.site-nav li:hover > a,
.site-nav li:hover > span,
.site-nav li:focus-within > a,
.site-nav li:focus-within > span {
  background: var(--vert);
  color: #fff;
}

.site-nav li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  min-width: 0;
  padding: 1.5rem 2rem;
  background: #fff;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
  z-index: 100;
}
.site-nav li:hover > ul,
.site-nav li:focus-within > ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 2rem;
}

.site-nav li ul a {
  padding: 0.7rem 0;
  background: none;
  color: #333;
  font-weight: 400;
  text-transform: none;
}
.site-nav li ul a:hover,
.site-nav li ul a:focus {
  background: none;
  color: var(--vert);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .site-nav li ul {
    position: static;
    padding: 0.5rem 1rem;
    box-shadow: none;
  }
  .site-nav li:hover > ul,
  .site-nav li:focus-within > ul { grid-template-columns: 1fr; }
}

/* Sous-liens : texte foncé, y compris les entrées sans lien (<span>) */
.site-nav li ul a,
.site-nav li ul span {
  display: block;
  padding: 0.7rem 0;
  background: none;
  color: #333;
  font-weight: 400;
  text-transform: none;
}

/* Survol d'un sous-lien : texte vert seulement, sans fond */
.site-nav li ul li:hover > a,
.site-nav li ul li:hover > span,
.site-nav li ul li:focus-within > a,
.site-nav li ul li:focus-within > span {
  background: none;
  color: var(--vert);
}

/* Retirer la flèche ajoutée par Drupal sur les éléments dépliés */
.site-nav li { list-style: none; }

/* Curseur en forme de main sur les entrées de menu sans lien (<nolink>) */
.site-nav li > span,
.site-nav li ul span {
  cursor: pointer;
}

/* Panneau déroulant : aligné sur « Citoyens », jusqu'à la recherche */
.site-nav { position: relative; }

@media (min-width: 769px) {
  .site-nav { flex: 1; }

  .site-nav li ul {
    left: 0;
    right: 0;
    padding: 2rem 1.25rem;
  }
}

/* Les boutons du menu occupent toute la hauteur de la barre */
.site-header__bar-inner { align-items: stretch; }
.site-nav { display: flex; }
.site-nav > * { display: flex; margin: 0; }
.site-nav ul { align-items: stretch; margin: 0; }
.site-nav li { display: flex; }
.site-nav li > a,
.site-nav li > span {
  display: flex;
  flex: 1;
  align-items: center;
}

/* La recherche reste centrée dans la barre */
.site-search { align-self: center; }

/* Les sous-menus gardent leur affichage normal */
.site-nav li ul li { display: block; }
.site-nav li ul a,
.site-nav li ul span { display: block; }


/* Supprimer l'espacement par défaut de Drupal sur les éléments de menu */
.site-nav .menu-item,
.site-nav li {
  padding: 0;
  margin: 0;
}
.site-nav ul.menu { margin: 0; padding: 0; }

/* Forcer la suppression de l'espacement du thème de base sur les éléments de menu */
.site-nav .menu-item,
.site-nav .menu-item--expanded {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
.site-nav .menu-item > span,
.site-nav .menu-item > a { margin: 0 !important; }

/* Sous-menus : alignement, survol vert et soulignement */
.site-nav li ul {
  padding: 2rem 1.25rem;
  text-align: left;
  align-items: start;
}
.site-nav li ul li {
  display: block;
  border: 0;
  text-align: left;
}
.site-nav li ul li > a,
.site-nav li ul li > span {
  display: block;
  padding: 0.6rem 0;
  background: none;
  color: #333;
  font-weight: 400;
  text-transform: none;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.site-nav li ul li > a:hover,
.site-nav li ul li > a:focus,
.site-nav li ul li > span:hover {
  background: none !important;
  color: var(--vert) !important;
  text-decoration: underline !important;
}

/* Sous-menu : version finale (sélecteurs précis pour passer devant les règles précédentes) */
.site-nav li.menu-item--expanded:hover > ul.menu,
.site-nav li.menu-item--expanded:focus-within > ul.menu {
  display: block;
  column-count: 3;
  column-gap: 2rem;
  padding: 2rem 1.25rem;
}

.site-nav li.menu-item--expanded ul.menu li.menu-item {
  display: block;
  break-inside: avoid;
  border: 0;
}

.site-nav li.menu-item--expanded ul.menu li.menu-item > a,
.site-nav li.menu-item--expanded ul.menu li.menu-item > span {
  display: block;
  padding: 0.6rem 0;
  background: none;
  color: #333;
  font-weight: 400;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
}

.site-nav li.menu-item--expanded ul.menu li.menu-item:hover > a,
.site-nav li.menu-item--expanded ul.menu li.menu-item:hover > span,
.site-nav li.menu-item--expanded ul.menu li.menu-item:focus-within > a {
  background: none;
  color: var(--vert);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .site-nav li.menu-item--expanded:hover > ul.menu,
  .site-nav li.menu-item--expanded:focus-within > ul.menu { column-count: 1; }
}

/* Carrousel */
.carrousel {
  position: relative;
  background: #323a4b;
}

.carrousel__pistes {
  display: grid;
}


.carrousel__slide {
  height: 411px !important;
  overflow: hidden;
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 26% 74%;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s;
}

.carrousel--pret .carrousel__slide.est-active,
.carrousel:not(.carrousel--pret) .carrousel__slide:first-child {
  opacity: 1;
  visibility: visible;
}

.carrousel__texte {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 1.5rem 1rem 1rem 1rem;
  color: #fff;
}

.carrousel__texte h2 {
  margin: 1.7rem 0 0.6rem;
  font-size: 24px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 30px;
  letter-spacing: -0.25px;
  max-width: 260px;
}

.carrousel__texte p {
  margin: 0 0 0.75rem;
  color: #d5d8df;
  font-size: 1.1rem;
}

.carrousel__bouton {
  align-self: flex-start;
  padding: 0.8rem 1.5rem;
  background: var(--vert);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.carrousel__bouton:hover,
.carrousel__bouton:focus { background: var(--vert-fonce); }

.carrousel__bouton a {
  color: #fff;
  text-decoration: none;
}

.carrousel__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Flèches rondes */
.carrousel__fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--vert);
  cursor: pointer;
}
.carrousel__fleche:hover,
.carrousel__fleche:focus { background: var(--vert-fonce); }
.carrousel__fleche--prec { left: 1rem; }
.carrousel__fleche--suiv { right: 1rem; }
.carrousel__fleche::before {
  content: "";
  width: 12px;
  height: 12px;
  border: solid #fff;
  border-width: 3px 3px 0 0;
}
.carrousel__fleche--prec::before { transform: rotate(-135deg); margin-left: 5px; }
.carrousel__fleche--suiv::before { transform: rotate(45deg); margin-right: 5px; }

/* Points de navigation */
.carrousel__points {
  position: absolute;
  bottom: 0.5rem;
  left: max(1rem, calc((100% - var(--largeur)) / 2 + 1rem));
  z-index: 5;
  display: flex;
  gap: 0.9rem;
}
.carrousel__point {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.carrousel__point.est-actif { background: var(--vert); }

@media (max-width: 768px) {
  .carrousel__slide { grid-template-columns: 1fr; min-height: 0; }
  .carrousel__slide img { order: -1; min-height: 200px; max-height: 260px; }
  .carrousel__texte { padding: 1.5rem 1rem 3.5rem; }
  .carrousel__fleche { width: 40px; height: 40px; top: 130px; }
}

/* Cartes Je veux */

.view-je-veux .views-col {
  padding: 12px;
}

.view-je-veux article.node--type-tuile {
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 24px;
  height: 100%;
  text-align: center;
  transition: all 0.2s ease;
}

.view-je-veux article.node--type-tuile:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.view-je-veux .node__title {
  margin-bottom: 16px;
  font-size: 1.125rem;
}

.view-je-veux .field--name-field-icone-de-la-tuile {
  margin-top: 16px;
}

.view-je-veux svg,
.view-je-veux img {
  width: 64px;
  height: 64px;
  display: block;
  margin: 0 auto;
}

.view-je-veux article.node--type-tuile {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.view-je-veux .node__title a {
  text-decoration: none;
}

.view-je-veux article.node--type-tuile {
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 32px 24px;
  min-height: 260px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.view-je-veux .node__title {
  margin-bottom: 24px;
}

.view-je-veux article.node--type-tuile:hover {
  border-color: #005aa9;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.view-je-veux img,
.view-je-veux svg {
  width: 80px;
  height: 80px;
}

.view-je-veux article.node--type-tuile {
  position: relative;
}

.view-je-veux article.node--type-tuile h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

main {
  max-width: none;
  padding: 0;
}

.layout-content {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

.path-frontpage .page-title {
  display: none;
}

body.path-frontpage main {
  padding-top: 0;
}

body.path-frontpage .layout-content {
  padding-top: 0;
}

/* Zone principale : tuiles cliquables */
.field--name-field-zone-principale:has(.tuile) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  max-width: 75rem;
  margin: 2rem auto;
  padding: 0 1rem;
}
.paragraph--type--tuile-cliquable {
  height: 100%;
}
.tuile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 100%;
  min-height: 7rem;
  padding: 1rem;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  color: #0b3d6e;
  background: #fff;
  border: 1px solid #c9d3df;
  border-radius: 0.5rem;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.tuile:hover,
.tuile:focus-visible {
  color: #fff;
  background: #0b3d6e;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.tuile__icone {
  font-size: 2rem;
}

/* ===== En-tête : dimensions alignées sur le site de la Ville ===== */
@media (min-width: 767px) {
  .site-header {
    font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
  }
  .site-header__top {
    height: 93px;
    background-color: #186db7;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
  }
  .site-header__inner,
  .site-header__bar-inner {
    max-width: 1160px;
    padding: 0;
  }
  .site-header__inner {
    height: 93px;
    min-height: 93px;
    align-items: flex-start;
  }
  .site-header img {
    height: 90px;
    max-height: none;
    width: auto;
    display: block;
  }
  .site-secondary-menu { margin-top: 4px; }
  .site-secondary-menu ul { gap: 0; font-size: 15px; }
  .site-secondary-menu a { display: inline-block; padding: 8px 11px; }
}

@media (min-width: 767px) {
  .site-header__bar {
    background: #1b4588;
    border-top: 1px solid #325998;
    border-bottom: 1px solid #a6b8d8;
  }
  .site-header__bar-inner { height: 48px; }
  .site-nav li,
  .site-nav li:first-child { border: 0; }
  .site-nav li > a,
  .site-nav li > span {
    padding: 0 24px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.4px;
    line-height: 48px;
    border-left: 1px solid #325998;
  }
  .site-nav li:last-child > a,
  .site-nav li:last-child > span { border-right: 1px solid #325998; }
  .site-nav li > a:hover,
  .site-nav li > a:focus,
  .site-nav li:hover > span {
    background: transparent;
    box-shadow: inset 0 -1px 0 #a6b8d8;
  }
}

@media (min-width: 767px) {
  .site-nav li ul {
    min-width: 0;
    top: 100%;
    left: 1px;
    width: 787px;
    column-count: 3;
    padding: 30px 25px 37px 19px;
    background: #fff;
    box-shadow: 0 7px 54px -10px rgba(0, 0, 0, 0.75);
  }
  .site-nav li:nth-child(2) > ul { width: 525px; column-count: 2; }
  .site-nav li:nth-child(3) > ul { width: 520px; column-count: 2; }
  .site-nav li:nth-child(4) > ul { width: 515px; column-count: 2; }
  .site-nav li:hover > ul,
  .site-nav li:focus-within > ul { display: block; }
  .site-nav li li {
    display: inline-block;
    width: 100%;
    margin-top: 0.4em;
    break-inside: avoid;
  }
  .site-nav li li > a,
  .site-nav li li > span,
  .site-nav li li:last-child > a,
  .site-nav li li:last-child > span {
    display: block;
    padding: 6px 5px 7px;
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0;
    text-transform: none;
    color: #545454;
    border: 0;
  }
  .site-nav li li > a:hover,
  .site-nav li li > a:focus,
  .site-nav li li:hover > span {
    background: transparent;
    box-shadow: none;
    text-decoration: underline;
  }
}

/* ===== Recherche alignée sur le site de la Ville ===== */
@media (min-width: 767px) {
  .site-search form,
  .site-search .form-actions,
  .site-search .form-item { margin: 0; }
  .site-search form {
    display: flex;
    align-items: stretch;
    height: 48px;
  }
  .site-search input[type="search"],
  .site-search input[type="text"] {
    box-sizing: border-box;
    height: 48px;
    width: 150px;
    min-width: 0;
    margin: 0;
    padding: 0 10px 0 20px;
    border: 0;
    border-radius: 0;
    font-size: 18px;
    font-weight: 500;
    color: #545454;
    -webkit-appearance: none;
    appearance: none;
  }
  .site-search input[type="submit"],
  .site-search button {
    box-sizing: border-box;
    width: 60px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: 0;
    color: transparent;
    cursor: pointer;
    background-color: #108848;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55%;
    transition: background-color 0.3s;
  }
  .site-search input[type="submit"]:hover,
  .site-search input[type="submit"]:focus,
  .site-search button:hover,
  .site-search button:focus { background-color: #007236; }
}
@media (min-width: 800px) {
  .site-search input[type="search"],
  .site-search input[type="text"] { width: 180px; }
}
@media (min-width: 850px) {
  .site-search input[type="search"],
  .site-search input[type="text"] { width: 230px; }
}
@media (min-width: 950px) {
  .site-search input[type="search"],
  .site-search input[type="text"] { width: 280px; }
}

/* ===== Couleurs par rubrique au survol (menu principal) ===== */
@media (min-width: 767px) {
  .site-nav ul:not(li ul) > li:nth-child(1):hover > a,
  .site-nav ul:not(li ul) > li:nth-child(1):hover > span,
  .site-nav ul:not(li ul) > li:nth-child(1):focus-within > a,
  .site-nav ul:not(li ul) > li:nth-child(1):focus-within > span { background: #108848; }

  .site-nav ul:not(li ul) > li:nth-child(2):hover > a,
  .site-nav ul:not(li ul) > li:nth-child(2):hover > span,
  .site-nav ul:not(li ul) > li:nth-child(2):focus-within > a,
  .site-nav ul:not(li ul) > li:nth-child(2):focus-within > span { background: #027ac5; }

  .site-nav ul:not(li ul) > li:nth-child(3):hover > a,
  .site-nav ul:not(li ul) > li:nth-child(3):hover > span,
  .site-nav ul:not(li ul) > li:nth-child(3):focus-within > a,
  .site-nav ul:not(li ul) > li:nth-child(3):focus-within > span { background: #cd4c1d; }

  .site-nav ul:not(li ul) > li:nth-child(4):hover > a,
  .site-nav ul:not(li ul) > li:nth-child(4):hover > span,
  .site-nav ul:not(li ul) > li:nth-child(4):focus-within > a,
  .site-nav ul:not(li ul) > li:nth-child(4):focus-within > span { background: #697697; }
}

/* ===== Correctifs de l’entête ===== */
/* Les entrées sans lien (<nolink>) du menu du haut reçoivent le même espacement que les liens. */
@media (min-width: 767px) {
  .site-secondary-menu .menu-item > span { display: inline-block; padding: 8px 11px; }
}

/* Les liens contextuels d’administration restent cachés tant qu’on ne les ouvre pas
   (les règles « display: flex » des listes de l’entête annulaient l’attribut hidden). */
.site-header .contextual-links[hidden] { display: none !important; }

/* Logo : mêmes dimensions que sur le site de la Ville (SVG de 220 px de large). */
@media (min-width: 767px) {
  .site-header .site-logo img { width: 220px; height: auto; max-height: none; }
}

/* Bande bleue du haut : dégradé bleu derrière l’image, visible dans les marges (comme sur le site de la Ville). */
@media (min-width: 767px) {
  .site-header__top {
    background: url("../images/fond-entete.jpg") no-repeat center,
                linear-gradient(#186db7 1%, #074b98 100%) no-repeat center;
    background-color: #186db7;
  }
}

/* Carrousel : les enveloppes de champ de Drupal (.field__items / .field__item) ne doivent pas
   créer de boîtes, pour que les diapositives se superposent dans la grille de .carrousel__pistes. */
.carrousel__pistes > .field,
.carrousel__pistes > .field > .field__item {
  display: contents;
}

/* La barre latérale est imprimée même sans bloc : on la masque quand elle est vide,
   pour qu’elle ne réserve plus 260 px + l’écart à droite du contenu. */
.layout-sidebar-first:not(:has(*)) { display: none; }

/* Contenu dans le même axe que l’entête : de « Citoyens » jusqu’à la loupe (1160 px). */
@media (min-width: 767px) {
  .layout-content {
    max-width: 1160px;
    padding-left: 0;
    padding-right: 0;
  }
}

/* L’ancre du lien d’évitement reste la cible de « Aller au contenu principal »,
   mais ne compte plus comme élément flex (elle ajoutait l’écart de 2rem avant le contenu). */
main > #main-content { position: absolute; }

/* ===== Carrousel : textes et proportions relevés sur le site de la Ville =====
   Drupal affiche les champs dans des <div> (pas des h2/p) : on cible donc les classes de champ. */
@media (min-width: 767px) {
  .carrousel .carrousel__slide {
    height: 445px !important;
    grid-template-columns: 360px 1fr;
  }
  .carrousel .carrousel__texte {
    padding: 52.5px 60px 36px 0;
    font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
  }
  .carrousel__texte .field--name-field-titre {
    margin: 27.6px 0 10px;
    color: #fff;
    font-size: 24px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: -0.25px;
    text-transform: uppercase;
  }
  .carrousel__texte .field--name-field-sous-titre {
    /* En flex, les marges ne fusionnent pas : 0 au lieu de 4px, pour garder 10px sous le titre. */
    margin: 0 0 14px;
    color: #cbcbcb;
    font-size: 16.5px;
    font-weight: 500;
    line-height: 22.275px;
  }
  .carrousel__texte .field--name-field-description {
    margin: 0 0 14px;
    color: #fff;
    font-size: 16.5px;
    font-weight: 500;
    line-height: 22.275px;
  }
  .carrousel .carrousel__bouton {
    margin-top: 20px;
    padding: 8px 30px 10px;
    font-size: 15px;
    font-weight: 700;
    line-height: normal;
  }
  .carrousel__image { height: 445px; overflow: hidden; }
  .carrousel .carrousel__slide .carrousel__image img { height: 445px; }
}

/* ===== Carrousel : bande sombre pleine largeur et flèches dans les marges (site de la Ville) =====
   Le contenu reste dans l’axe de l’entête (1160 px) ; l’ombre portée prolonge le fond
   jusqu’aux bords de l’écran sans créer de défilement horizontal. */
.carrousel {
  background: #212837;
  box-shadow: 0 0 0 100vmax #212837;
  clip-path: inset(0 -100vmax);
}

@media (min-width: 767px) {
  .carrousel .carrousel__fleche {
    width: 40px;
    height: 40px;
  }
  .carrousel .carrousel__points {
    left: 0;
    bottom: 44px;
  }
}

/* Assez de place de chaque côté : flèches à 80 px à l’extérieur du contenu.
   On mesure la largeur de <main> (et non de la fenêtre), pour tenir compte de la barre d’administration. */
main { container-type: inline-size; }
@container (min-width: 1420px) {
  .carrousel .carrousel__fleche--prec { left: -120px; }
  .carrousel .carrousel__fleche--suiv { right: -120px; }
}

/* ===== Tuiles « Je veux » : mise en page et styles relevés sur le site de la Ville =====
   Les tuiles et la bannière sont placées dans une Strate : la grille s’applique au champ Contenu de la strate. */
/* La zone principale ne fait plus que contenir les strates : plus de grille ni de marges ici. */
.field--name-field-zone-principale:has(.tuile) {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
}
/* Titre de strate (ex. : « Je veux »). */
.strate__titre {
  margin: 37.2px 0 14px;
  color: #074b98;
  font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 27.6px;
}
.field--name-field-strate-contenu:has(.tuile) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 20px;
  padding: 10px 0;
}
:is(.field--name-field-zone-principale, .field--name-field-strate-contenu) .tuile {
  position: relative;
  flex-direction: row;
  justify-content: flex-start;
  box-sizing: border-box;
  height: 105px;
  min-height: 0;
  padding: 0 19.2px 0 74.47px;
  border: 1px solid rgba(200, 200, 200, 0.1);
  border-radius: 0;
  background: #fff;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  color: #074b98;
  font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
  transition: background-color 0.2s, color 0.2s;
}
:is(.field--name-field-zone-principale, .field--name-field-strate-contenu) .tuile:hover,
:is(.field--name-field-zone-principale, .field--name-field-strate-contenu) .tuile:focus-visible {
  background: #074b98;
  color: #fff;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Pictogramme à gauche (choisi d’après la position de la tuile, les liens étant temporairement <nolink>), blanc au survol. */
:is(.field--name-field-zone-principale, .field--name-field-strate-contenu) .tuile::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 10.55px;
  width: 52.8px;
  height: 65px;
  transform: translateY(-50%);
  background: no-repeat center / contain;
}
:is(.field--name-field-zone-principale, .field--name-field-strate-contenu) .tuile:hover::before,
:is(.field--name-field-zone-principale, .field--name-field-strate-contenu) .tuile:focus-visible::before {
  filter: brightness(5) saturate(0) contrast(2);
}
:is(.field--name-field-zone-principale, .field--name-field-strate-contenu) .field__item:nth-child(1) > .tuile::before { background-image: url("../images/picto-dechets.svg"); }
:is(.field--name-field-zone-principale, .field--name-field-strate-contenu) .field__item:nth-child(2) > .tuile::before { background-image: url("../images/picto-travaux.svg"); }
:is(.field--name-field-zone-principale, .field--name-field-strate-contenu) .field__item:nth-child(3) > .tuile::before { background-image: url("../images/picto-ordinateur.svg"); }
:is(.field--name-field-zone-principale, .field--name-field-strate-contenu) .field__item:nth-child(4) > .tuile::before { background-image: url("../images/picto-cour.svg"); }
:is(.field--name-field-zone-principale, .field--name-field-strate-contenu) .field__item:nth-child(5) > .tuile::before { background-image: url("../images/picto-assistant-permis.svg"); }
:is(.field--name-field-zone-principale, .field--name-field-strate-contenu) .field__item:nth-child(6) > .tuile::before { background-image: url("../images/picto-chat.svg"); }
:is(.field--name-field-zone-principale, .field--name-field-strate-contenu) .field__item:nth-child(7) > .tuile::before { background-image: url("../images/picto-foyer.svg"); }

/* « Services en ligne » (8e tuile) : tuile verte, flèche à droite. */
:is(.field--name-field-zone-principale, .field--name-field-strate-contenu) .field__item:nth-child(8) > .tuile {
  padding-left: 22.4px;
  background: #108848;
  color: #fff;
}
:is(.field--name-field-zone-principale, .field--name-field-strate-contenu) .field__item:nth-child(8) > .tuile:hover,
:is(.field--name-field-zone-principale, .field--name-field-strate-contenu) .field__item:nth-child(8) > .tuile:focus-visible {
  background: #007236;
}
:is(.field--name-field-zone-principale, .field--name-field-strate-contenu) .field__item:nth-child(8) > .tuile::before {
  left: auto;
  right: 14.6px;
  width: 25px;
  background-image: url("../images/picto-fleche-droite.svg");
  filter: invert(0.5) brightness(2);
}

@media (min-width: 767px) {
  .field--name-field-strate-contenu:has(.tuile) {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ===== Menu du haut : alignement relevé sur le site de la Ville =====
   Texte à 23 px du haut du bandeau, interligne 19,5 px, 4 px entre les entrées,
   « EN » un peu plus grand, « Se connecter » (dernière entrée) précédé d’une icône de personne. */
@media (min-width: 767px) {
  .site-secondary-menu { margin-top: 13px; }
  .site-secondary-menu ul { gap: 4px; }
  .site-secondary-menu .menu-item > a,
  .site-secondary-menu .menu-item > span { line-height: 19.5px; }
  .site-secondary-menu .menu-item:nth-child(5) > a,
  .site-secondary-menu .menu-item:nth-child(5) > span {
    margin-top: -2px;
    font-size: 16.5px;
    line-height: 21.45px;
  }
  .site-secondary-menu .menu-item:last-child > a,
  .site-secondary-menu .menu-item:last-child > span {
    position: relative;
    padding: 8px 1px 8px 25px;
  }
  .site-secondary-menu .menu-item:last-child > a::before,
  .site-secondary-menu .menu-item:last-child > span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 25px;
    height: 25px;
    transform: translateY(-50%);
    background: url("../images/picto-personne-blanc.svg") no-repeat center / contain;
  }
}

/* Menu du haut : souligné blanc au survol, comme sur le site de la Ville, y compris pour les
   entrées temporairement sans lien (<nolink>, affichées en <span>). */
.site-secondary-menu .menu-item > span { cursor: pointer; }
.site-secondary-menu .menu-item > a:hover,
.site-secondary-menu .menu-item > a:focus-visible,
.site-secondary-menu .menu-item > span:hover {
  text-decoration: underline;
  text-decoration-color: #fff;
}

/* ===== Bannière image (ex. : « On donne vie à la Ville ») =====
   Dans la grille « Je veux », elle occupe toute la largeur, 48 px sous les tuiles comme sur le site de la Ville.
   Sur les petits écrans, l’image mobile remplace l’image ordinateur quand elle existe. */
.field__item:has(> .banniere-image) { grid-column: 1 / -1; }
:is(.field--name-field-zone-principale, .field--name-field-strate-contenu) .field__item:has(> .banniere-image) { margin: 28px 0 22px; }
.banniere-image { margin-left: 1px; }
.banniere-image img { display: block; width: 100%; height: auto; }
.banniere-image__lien { display: block; }
.banniere-image__mobile { display: none; }
@media (max-width: 766px) {
  .banniere-image:has(.banniere-image__mobile) .banniere-image__ordinateur { display: none; }
  .banniere-image__mobile { display: block; }
}

/* ===== Strate : bande pleine largeur avec couleur de fond choisie dans la page =====
   La couleur (champ « Couleur de fond ») devient la classe strate--blanc / --gris / --bleu / --marine.
   Le fond est prolongé jusqu’aux bords de l’écran par une ombre portée, le contenu reste dans l’axe de 1160 px. */
.strate {
  --strate-fond: transparent;
  background: var(--strate-fond);
  box-shadow: 0 0 0 100vmax var(--strate-fond);
  clip-path: inset(0 -100vmax);
}
.strate--blanc { --strate-fond: #fff; }
.strate--gris { --strate-fond: #f2f2f2; }
.strate--bleu { --strate-fond: #074b98; color: #fff; }
.strate--marine { --strate-fond: #212b3d; color: #fff; }
.strate__contenu { padding: 25px 18px; }
.strate--bleu .strate__titre,
.strate--marine .strate__titre { color: #fff; }

/* Sous-titre de strate (ex. : « Activités, événements et spectacles. »), sur la ligne du titre. */
.strate__sous-titre {
  font-size: 19.2px;
  font-weight: 500;
}

/* ===== Intégration externe (iframe), ex. : Québec animée =====
   Pleine largeur de la strate ; 27,8 px sous le cadre + 25 px de la strate = 52,8 px, comme sur le site de la Ville. */
.integration-externe { margin-bottom: 27.8px; }
.integration-externe__cadre {
  display: block;
  width: 100%;
  border: 0;
  overflow: hidden;
}

/* Image de remplacement d’une intégration externe (site d’essai) : occupe exactement la place du cadre. */
.integration-externe__remplacement img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== Liste dynamique : derniers communiqués, en deux colonnes (mesures du site de la Ville) =====
   Strate plus serrée que les autres : 15 px en haut, 45 px en bas, 13 px sous le titre. */
.strate:has(.liste-dynamique--derniers-communiques) .strate__contenu { padding: 15px 18px 45px; }
.strate:has(.liste-dynamique--derniers-communiques) .strate__titre { margin-bottom: 13px; }
.liste-communiques ul {
  column-count: 2;
  column-gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
  font-size: 16.5px;
  line-height: 21.45px;
}
.liste-communiques li {
  margin: 0 41.25px 16.5px 0;
  break-inside: avoid;
}
.liste-communiques a {
  color: #074b98;
  text-decoration: underline;
}
@media (max-width: 766px) {
  .liste-communiques ul { column-count: 1; }
}

/* ===== Carte : image ronde ou rectangulaire, titre et texte (mesures du site de la Ville) =====
   Dans une strate, les cartes s’alignent sur 4 colonnes (2 en tablette, 1 sur mobile). */
.field--name-field-strate-contenu:has(> .field__item > .carte) {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 20px 0;
}
.strate:has(.carte) .strate__contenu { padding: 15px 18px 0; }
.carte {
  display: block;
  box-sizing: border-box;
  height: 100%;
  padding: 20px;
  color: inherit;
  font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
  text-align: center;
  text-decoration: none;
}
.carte__image img { display: block; }
.carte--ronde .carte__image img {
  width: 131px;
  height: 131px;
  margin: 0 auto;
  border-radius: 50%;
  object-fit: cover;
}
.carte--rectangulaire .carte__image img {
  width: 100%;
  height: auto;
}
.carte__titre {
  margin: 8.5px 0 13px;
  color: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 19.55px;
}
.carte__texte {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 17.55px;
}
/* Survol d’une carte à image ronde : cercle bleu translucide avec un « + » blanc par-dessus l’image,
   en fondu de 0,3 s (pictogramme du site de la Ville). Aussi actif sur les cartes sans lien (<nolink>) du site d’essai. */
.carte--ronde .carte__image {
  position: relative;
  width: 131px;
  height: 131px;
  margin: 0 auto;
}
.carte--ronde .carte__image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: url("../images/picto-plus-cercle.svg") no-repeat center / 101% auto;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.carte--ronde:hover .carte__image::after,
.carte--ronde:focus-visible .carte__image::after { opacity: 1; }
/* Toute la surface de la carte réagit au survol (et toute la carte est le lien quand une adresse est saisie). */
.carte { cursor: pointer; }
@media (max-width: 1000px) {
  .field--name-field-strate-contenu:has(> .field__item > .carte) { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .field--name-field-strate-contenu:has(> .field__item > .carte) { grid-template-columns: 1fr; }
}

/* ===== Appel à l’action (ex. : infolettre municipale), mesures du site de la Ville =====
   Bloc centré de 542 px ; 15 px au-dessus du titre et 5 px sous le dernier lien, en plus des marges de la strate. */
.appel-action {
  max-width: 542px;
  margin: 15px auto 0;
  padding-bottom: 5px;
  font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
  text-align: center;
}
.appel-action__titre {
  margin: 0 0 14px;
  color: #074b98;
  font-size: 24px;
  font-weight: 700;
  line-height: 27.6px;
}
.strate--bleu .appel-action__titre,
.strate--marine .appel-action__titre { color: #fff; }
.appel-action__texte p,
.appel-action__bouton,
.appel-action__lien {
  margin: 0 0 14px;
  font-size: 16.5px;
  line-height: 22.275px;
}
.appel-action__texte a,
.appel-action__lien a,
.appel-action__lien span {
  color: #074b98;
  font-size: 14.85px;
  text-decoration: underline;
  cursor: pointer;
}
.appel-action__bouton { margin-top: 32px; }
/* Le texte est dans une enveloppe de champ : sa marge ne fusionne pas avec celle du bouton, on la retire. */
.appel-action__texte p:last-child { margin-bottom: 0; }
.bouton-vert {
  display: inline-block;
  margin: 1px 0;
  padding: 13px 42px;
  background: #108848;
  color: #fff;
  font-size: 18.15px;
  font-weight: 700;
  line-height: 27px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s;
}
.bouton-vert:hover,
.bouton-vert:focus-visible { background: #0b6b38; color: #fff; }

/* ===== Cartes à image rectangulaire (ex. : promotions sous les cartes rondes) =====
   Image seule de 257 × 107 px, 32 px entre les cartes ; au survol, rectangle bleu translucide avec un « + ». */
.field--name-field-strate-contenu:has(> .field__item > .carte--rectangulaire) {
  gap: 32px;
  padding: 0;
}
.strate:has(.carte--rectangulaire) .strate__contenu { padding: 37px 18px 32px; }
.carte--rectangulaire { padding: 0; }
.carte--rectangulaire .carte__image { position: relative; }
.carte--rectangulaire .carte__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/picto-plus-rectangle.svg") no-repeat center / 100% 100%;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.carte--rectangulaire:hover .carte__image::after,
.carte--rectangulaire:focus-visible .carte__image::after { opacity: 1; }

/* Page qui se termine par une strate (zone principale, sans zone inférieure) : la dernière strate
   touche le pied de page, sans les 32 px de marge du bas de la colonne de contenu. */
.layout-content:has(.field--name-field-zone-principale > .field__item:last-child > .strate):not(:has(.field--name-field-zone-inferieure)) {
  padding-bottom: 0;
}

/* Tuiles et bouton du carrousel sans lien (<nolink>) : affichés en <div>/<span>, même apparence que les liens. */
.tuile { cursor: pointer; }
.carrousel__bouton span { color: #fff; cursor: pointer; }

/* ==========================================================================
   Version mobile (moins de 767px), d'après ville.quebec.qc.ca :
   barre blanche (MENU, EN, loupe, compte), bande bleue avec le logo,
   menu replié dans un panneau qui glisse depuis la gauche.
   ========================================================================== */
.entete-mobile,
.menu-mobile,
.menu-mobile__voile { display: none; }

@media (max-width: 766px) {
  .site-header { font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif; }

  /* Barre blanche du haut */
  .entete-mobile {
    display: flex;
    height: 61px;
    background: #fff;
  }
  .entete-mobile__menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 88px;
    height: 58px;
    margin: 0;
    padding: 11px 0 0;
    border: 0;
    border-radius: 0;
    background: #136fb8;
    color: #fff;
    font: 700 12px/1 proxima-nova, "Helvetica Neue", Arial, sans-serif;
    text-transform: uppercase;
    cursor: pointer;
  }
  .entete-mobile__burger {
    width: 23px;
    height: 19px;
    background:
      linear-gradient(#fff, #fff) top / 100% 4px no-repeat,
      linear-gradient(#fff, #fff) center / 100% 4px no-repeat,
      linear-gradient(#fff, #fff) bottom / 100% 4px no-repeat;
  }
  .entete-mobile__outils {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    height: 58px;
  }
  .entete-mobile__langue,
  .entete-mobile__recherche,
  .entete-mobile__compte {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 58px;
    box-sizing: border-box;
  }
  .entete-mobile__langue {
    width: 83px;
    color: #166fb7;
    font-size: 23.1px;
    font-weight: 700;
    cursor: pointer;
  }
  .entete-mobile__recherche,
  .entete-mobile__compte {
    /* Filet gris de 40px entre les boutons, comme sur le vrai site. */
    background: linear-gradient(#d0d0d0, #d0d0d0) left 10px / 1px 40px no-repeat;
  }
  .entete-mobile__recherche {
    width: 73px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    cursor: pointer;
  }
  .entete-mobile__recherche::before,
  .entete-mobile__compte::before {
    content: "";
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  .entete-mobile__recherche::before {
    width: 27px;
    height: 27px;
    background-image: url("../images/picto-loupe-bleu.svg");
  }
  .entete-mobile__compte {
    width: 83px;
    cursor: pointer;
  }
  .entete-mobile__compte::before {
    width: 30px;
    height: 34px;
    background-image: url("../images/picto-connexion-bleu.svg");
  }
  .entete-mobile__menu:focus-visible,
  .entete-mobile__recherche:focus-visible {
    outline: 3px solid #f5a623;
    outline-offset: -3px;
  }

  /* Bande bleue avec le logo : le menu secondaire passe dans le panneau. */
  .site-header__top {
    height: 90px;
    background: linear-gradient(#186db7 1%, #074b98 100%);
  }
  .site-header__inner {
    flex-direction: row;
    align-items: center;
    height: 90px;
    min-height: 90px;
    padding: 0;
  }
  .site-header .site-logo img {
    display: block;
    width: 220px;
    height: auto;
    max-height: none;
  }
  .site-secondary-menu { display: none; }

  /* La barre de navigation ne sert plus qu'à la recherche, ouverte par la loupe. */
  .site-header__bar { display: none; }
  .site-header.recherche-ouverte .site-header__bar {
    display: block;
    padding: 12px 16px;
    background: #1b4588;
  }
  .site-header .site-nav { display: none; }
  .site-header .site-search,
  .site-header .site-search form,
  .site-header .site-search .form-item { width: 100%; }
  .site-header .site-search .form-item { flex: 1; }
  .site-header .site-search input[type="search"] {
    width: 100%;
    min-width: 0;
  }

  /* Panneau du menu */
  .menu-mobile {
    display: block;
    position: fixed;
    top: var(--drupal-displace-offset-top, 0px);
    bottom: 0;
    left: 0;
    z-index: 1000;
    width: 338px;
    max-width: 90vw;
    overflow-y: auto;
    background: #fff;
    font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0.3s;
  }
  /* À l'ouverture, visible tout de suite (sinon le focus ne peut pas entrer) ; à la fermeture, après le glissement. */
  .menu-mobile.est-ouvert {
    transform: none;
    visibility: visible;
    transition: transform 0.3s ease, visibility 0s;
  }
  .menu-mobile__voile {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }
  .menu-mobile.est-ouvert + .menu-mobile__voile {
    opacity: 1;
    visibility: visible;
  }
  .menu-mobile-ouvert body { overflow: hidden; }

  .menu-mobile__entete {
    display: flex;
    justify-content: flex-end;
    height: 60px;
    border-bottom: 2px solid #f2f2f2;
    box-sizing: border-box;
  }
  .menu-mobile__fermer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 80px;
    height: 58px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #136db6;
    color: #fff;
    font: 400 14px/1 proxima-nova, "Helvetica Neue", Arial, sans-serif;
    cursor: pointer;
  }
  .menu-mobile__fermer-x {
    width: 22px;
    height: 22px;
    background:
      linear-gradient(45deg, transparent calc(50% - 2px), #fff calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)),
      linear-gradient(-45deg, transparent calc(50% - 2px), #fff calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px));
  }

  .menu-mobile__liste {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .menu-mobile__item { margin: 0; padding: 0; }
  .menu-mobile__lien {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0 20px 0 25px;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .menu-mobile__lien:hover { text-decoration: underline; }
  .menu-mobile__lien:focus-visible {
    outline: 3px solid #f5a623;
    outline-offset: -3px;
  }

  /* Plus (+) des rubriques à déplier, moins (−) une fois dépliées */
  .menu-mobile__lien--parent::after {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    background:
      linear-gradient(currentColor, currentColor) center / 100% 3px no-repeat,
      linear-gradient(currentColor, currentColor) center / 3px 100% no-repeat;
  }
  .menu-mobile__lien--parent[aria-expanded="true"]::after {
    background: linear-gradient(currentColor, currentColor) center / 100% 3px no-repeat;
  }

  /* Rubriques principales en couleur */
  .menu-mobile__principal > .menu-mobile__item {
    border-bottom: 4px solid #f2f2f2;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
  }
  .menu-mobile__principal > .menu-mobile__item > .menu-mobile__lien {
    min-height: 50px;
    text-transform: uppercase;
  }
  .menu-mobile__principal > .menu-mobile__item:nth-child(1) { background: #108848; }
  .menu-mobile__principal > .menu-mobile__item:nth-child(2) { background: #027ac5; }
  .menu-mobile__principal > .menu-mobile__item:nth-child(3) { background: #cd4c1d; }
  .menu-mobile__principal > .menu-mobile__item:nth-child(4) { background: #697697; }

  /* Sous-menus dépliés */
  .menu-mobile__sous-menu {
    padding: 4px 0;
    background: #fff;
    color: #545454;
    font-size: 15px;
    font-weight: 400;
  }
  .menu-mobile__sous-menu .menu-mobile__lien {
    min-height: 42px;
    padding-left: 35px;
    text-transform: none;
  }
  .menu-mobile__sous-menu > .menu-mobile__item + .menu-mobile__item { border-top: 1px solid #ececec; }

  /* Liens secondaires en blanc, avec un chevron */
  .menu-mobile__secondaire > .menu-mobile__item {
    border-bottom: 4px solid #cdcbcb;
    color: #545454;
    font-size: 14px;
  }
  .menu-mobile__secondaire > .menu-mobile__item > .menu-mobile__lien:not(.menu-mobile__lien--parent)::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: 3px;
    border: solid #545454;
    border-width: 2.5px 2.5px 0 0;
    transform: rotate(45deg);
  }

  /* Carrousel : pleine largeur, image au-dessus du texte, points centrés sans flèches. */
  .carrousel { margin: 0 -16px; }
  .carrousel .carrousel__slide {
    height: auto !important;
    grid-template-columns: 1fr;
  }
  .carrousel .carrousel__image {
    order: -1;
    height: auto;
  }
  .carrousel .carrousel__slide .carrousel__image img {
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 375 / 209;
  }
  .carrousel .carrousel__texte {
    padding: 5px 17px 52px 25px;
    font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
  }
  .carrousel__texte .field--name-field-titre {
    margin: 20px 0 14px;
    color: #fff;
    font-size: 17.5px;
    font-weight: 400;
    line-height: 20.125px;
    text-transform: uppercase;
  }
  .carrousel__texte .field--name-field-sous-titre {
    margin: 0 0 5px;
    color: #cbcbcb;
    font-size: 16.5px;
    font-weight: 500;
    line-height: 22.275px;
  }
  .carrousel__texte .field--name-field-description {
    margin: 0 0 5px;
    color: #fff;
    font-size: 16.5px;
    font-weight: 500;
    line-height: 22.275px;
  }
  .carrousel .carrousel__bouton {
    margin-top: 20px;
    padding: 8px 30px 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
  }
  .carrousel .carrousel__fleche { display: none; }
  .carrousel .carrousel__points {
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    gap: 11px;
  }
  .carrousel .carrousel__point {
    width: 11px;
    height: 11px;
  }
}


/* ==========================================================================
   Pied de page, d'après ville.quebec.qc.ca : logo « Nous sommes Québec »,
   trois colonnes (Services, Annonces, Partenaires), puis Confidentialité,
   Nous joindre et les réseaux sociaux sous Partenaires.
   ========================================================================== */
.site-footer {
  background: #212837;
  font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
}
.pied-page {
  display: grid;
  grid-template-columns: 311px 246px 246px 1fr;
  gap: 0;
  max-width: 1160px;
  margin: 0 auto;
  padding: 40px 0 28px;
  box-sizing: border-box;
}
.pied-page__marque { grid-row: 1; }
.pied-page .pied-page__marque img {
  display: block;
  width: 200px;
  max-width: none;
  height: auto;
}
.pied-page h3 {
  margin: 9px 0 9.5px;
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  line-height: 19.5px;
  letter-spacing: 0;
  text-transform: uppercase;
}
.pied-page ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pied-page li {
  margin: 0;
  font-size: 15px;
  line-height: 19.5px;
}
.pied-page li + li { margin-top: 9.5px; }
.pied-page a {
  color: #ccc;
  text-decoration: none;
  cursor: pointer;
}
.pied-page a:hover,
.pied-page a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

/* Confidentialité, Nous joindre et réseaux : sous la colonne Partenaires */
.pied-page__autres {
  grid-column: 4;
  margin-top: 14px;
}
/* CKEditor fusionne les deux listes de cette colonne : les réseaux sont repérés par leurs liens picto-*. */
.pied-page__autres ul {
  display: flex;
  flex-wrap: wrap;
  column-gap: 9px;
}
.pied-page__autres li:not(:has(> a[class^="picto-"])) { flex: 0 0 100%; }
.pied-page__autres li:has(> a[class^="picto-"]) { margin-top: 9.5px; }
.pied-page a[class^="picto-"] {
  display: block;
  width: 28px;
  height: 28px;
  background: no-repeat center / contain;
}
.pied-page a[class^="picto-"]:hover,
.pied-page a[class^="picto-"]:focus-visible { opacity: 0.75; }
.pied-page a.picto-facebook { background-image: url("../images/picto-facebook-blanc.svg"); }
.pied-page a.picto-x { background-image: url("../images/picto-x-blanc.svg"); }
.pied-page a.picto-youtube { background-image: url("../images/picto-youtube-blanc.svg"); }
.pied-page a.picto-instagram { background-image: url("../images/picto-instagram-blanc.svg"); }
.pied-page a.picto-linkedin { background-image: url("../images/picto-linkedin-blanc.svg"); }
.pied-page a.picto-tiktok { background-image: url("../images/picto-tiktok-blanc.svg"); }
.pied-page a.picto-rss { background-image: url("../images/picto-rss-blanc.svg"); }
.pied-page a.picto-courriel { background-image: url("../images/picto-courriel-blanc.svg"); }

.site-footer__bottom {
  padding: 10px 1rem;
  background: #353a49;
  color: #ccc;
  font-size: 13.5px;
  line-height: 18.225px;
  text-align: center;
}

/* Écrans moyens : le logo passe au-dessus des colonnes. */
@media (min-width: 767px) and (max-width: 1180px) {
  .pied-page {
    grid-template-columns: repeat(3, 1fr);
    padding: 40px 20px 20px;
  }
  .pied-page__marque { grid-column: 1 / -1; margin-bottom: 10px; }
  .pied-page__autres { grid-column: 3; }
}

/* Mobile : logo centré, colonnes en accordéon (js/pied-page.js), le reste centré. */
@media (max-width: 766px) {
  .pied-page {
    display: block;
    padding: 20px 35px 0;
  }
  .pied-page .pied-page__marque img {
    width: 220px;
    margin: 0 auto 14px;
  }
  .pied-page__colonne {
    margin-top: 9px;
    padding: 5px 15px 8px;
    border-bottom: 3px solid #cdcbcb;
  }
  .pied-page__colonne h3 { margin: 0; }
  .pied-page__deplier {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font: inherit;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
  }
  .pied-page__deplier::after {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    background:
      linear-gradient(#fff, #fff) center / 100% 3px no-repeat,
      linear-gradient(#fff, #fff) center / 3px 100% no-repeat;
  }
  .pied-page__deplier[aria-expanded="true"]::after {
    background: linear-gradient(#fff, #fff) center / 100% 3px no-repeat;
  }
  .pied-page__deplier:focus-visible {
    outline: 3px solid #f5a623;
    outline-offset: 2px;
  }
  .pied-page__colonne ul { padding: 12px 0 4px; }
  .pied-page__autres {
    margin: 9px 0 20px;
    text-align: center;
  }
  .pied-page__autres ul {
    justify-content: center;
    column-gap: 6px;
  }
  .pied-page__autres li:has(> a[class^="picto-"]) { margin-top: 18px; }
  .pied-page a[class^="picto-"] {
    width: 25px;
    height: 25px;
  }
}


/* ==========================================================================
   Fil d'Ariane (« Accueil / Citoyens »)
   ========================================================================== */
.breadcrumb {
  box-sizing: border-box;
  max-width: 1160px;
  margin: 0 auto;
  padding: 26px 16px 28px;
  font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
  font-size: 15.5px;
  line-height: 20.925px;
  color: #545454;
}
@media (min-width: 767px) {
  .breadcrumb { padding-left: 0; padding-right: 0; }
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb li { margin: 0; padding: 0; }
.breadcrumb li + li::before {
  content: "/";
  padding: 0 6px 0 4px;
}
.breadcrumb a {
  color: #074b98;
  font-weight: 600;
  text-decoration: none;
}
.breadcrumb a:hover,
.breadcrumb a:focus-visible { text-decoration: underline; }

/* ==========================================================================
   Page de section : bannière titre, cartes de section, tuiles à pictogramme
   ========================================================================== */
.layout-content:has(.entete-section) { padding-top: 0; }
/* Le titre est déjà dans la bannière (H1). */
.layout-content:has(.entete-section) .block-page-title-block { display: none; }

.entete-section {
  /* Pleine largeur : déborde du conteneur de 1160px jusqu'aux bords de <main>. */
  margin: 0 calc(50% - 50cqw);
  padding: 88px 16px 73px;
  border-bottom: 30px solid #108b49;
  background:
    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    var(--entete-image, none) center top / cover no-repeat,
    #444;
  color: #fff;
  font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
  font-size: 45px;
  font-weight: 700;
  line-height: 46.125px;
  text-align: center;
}

/* Cartes de section : carte rectangulaire avec titre (image 100px, titre bleu, court texte). */
.field--name-field-strate-contenu:has(> .field__item > .carte--titree.carte--rectangulaire) {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 37px 40px;
  padding: 0;
}
.strate:has(.carte--titree.carte--rectangulaire) .strate__contenu { padding: 51px 0 26px; }
.carte--rectangulaire.carte--titree {
  height: 235px;
  padding: 0 16px;
  overflow: hidden;
  background: #fff;
  color: #000;
  text-align: left;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0);
  transition: background-color 0.5s, box-shadow 0.5s;
}
/* Survol, comme sur le site de la Ville : le fond blanc devient transparent et laisse voir
   le dégradé bleu posé derrière la carte ; titre et texte passent au blanc, sans soulignement. */
.field--name-field-strate-contenu > .field__item:has(> .carte--titree.carte--rectangulaire) {
  background-image: linear-gradient(#074b98 100px, #186db7 100%);
}
.carte--rectangulaire.carte--titree:hover,
.carte--rectangulaire.carte--titree:focus-visible {
  background-color: rgba(255, 255, 255, 0);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  text-decoration: none;
  transition: background-color 0.3s, box-shadow 0.3s;
}
.carte--rectangulaire.carte--titree:active { box-shadow: none; }
.carte--rectangulaire.carte--titree .carte__image {
  height: 100px;
  margin: 0 -16px;
  overflow: hidden;
}
.carte--rectangulaire.carte--titree .carte__image img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  object-position: center top;
}
.carte--rectangulaire.carte--titree .carte__image::after { content: none; }
.carte--rectangulaire.carte--titree .carte__titre {
  margin: 16px 0 5px;
  color: #074b98;
  font-size: 16px;
  font-weight: 700;
  line-height: 18.4px;
}
.carte--rectangulaire.carte--titree .carte__titre,
.carte--rectangulaire.carte--titree .carte__texte { transition: color 0.5s; }
.carte--rectangulaire.carte--titree:is(:hover, :focus-visible) :is(.carte__titre, .carte__texte) {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s;
}
.carte--rectangulaire.carte--titree .carte__texte {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 18px;
}

/* Tuiles à pictogramme (champ « Icône » de la tuile = nom du picto, ex. picto-famille). */
.tuile__icone.picto-famille { background-image: url("../images/picto-famille.svg"); }
.tuile__icone.picto-personnes { background-image: url("../images/picto-personnes.svg"); }
.tuile__icone.picto-wifi { background-image: url("../images/picto-wifi.svg"); }

.node--type-page-section .strate:has(.tuile) .strate__contenu { padding: 40px 0; }
.node--type-page-section .field--name-field-strate-contenu:has(.tuile) {
  grid-template-columns: repeat(auto-fit, 240px);
  justify-content: center;
  gap: 20px;
  padding: 0;
}
.node--type-page-section .field--name-field-strate-contenu .tuile {
  height: 85px;
  padding: 0 12px 0 60px;
  border: 0;
  background: #f2f2f2;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.15);
  color: #074b98;
  font-size: 15px;
  font-weight: 700;
  line-height: 17.25px;
}
/* Les pictos de l'accueil sont placés par position : on les retire ici, l'icône vient du champ. */
.node--type-page-section .field--name-field-strate-contenu .tuile::before { content: none; }
.node--type-page-section .tuile__icone {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 38px;
  height: 46px;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.node--type-page-section .field--name-field-strate-contenu .tuile:hover,
.node--type-page-section .field--name-field-strate-contenu .tuile:focus-visible {
  background: #074b98;
  color: #fff;
}
.node--type-page-section .tuile:hover .tuile__icone,
.node--type-page-section .tuile:focus-visible .tuile__icone { filter: brightness(0) invert(1); }

@media (max-width: 766px) {
  .entete-section {
    padding: 50px 16px 45px;
    border-bottom-width: 20px;
    font-size: 32px;
    line-height: 36px;
  }
  .strate:has(.carte--titree.carte--rectangulaire) .strate__contenu { padding: 30px 0; }
  .field--name-field-strate-contenu:has(> .field__item > .carte--titree.carte--rectangulaire) { gap: 20px; }
  /* En une colonne, la carte prend la hauteur de son contenu (pas de vide sous le texte). */
  .carte--rectangulaire.carte--titree { height: auto; }
  .node--type-page-section .field--name-field-strate-contenu:has(.tuile) { grid-template-columns: 1fr; }
}


/* Menu principal : une rubrique avec une vraie adresse (<a>) garde l'apparence des rubriques en <nolink> (<span>). */
.site-nav .menu--main > ul.menu > li > a,
.site-nav .menu--main > ul.menu > li > a:visited {
  color: #fff;
  text-decoration: none;
}
.site-nav .menu--main > ul.menu > li > a:hover,
.site-nav .menu--main > ul.menu > li > a:focus-visible {
  color: #fff;
  text-decoration: none;
}


/* ==========================================================================
   Sous-pages de section (ex. Accessibilité universelle) :
   paragraphes Texte, Sous-menu de la section et Lien à consulter
   ========================================================================== */

/* Pictogrammes choisis dans un champ « Pictogramme » */
.picto {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.picto.picto-accessibilite { background-image: url("../images/picto-accessibilite.svg"); }
.picto.picto-publication { background-image: url("../images/picto-publication.svg"); }
.picto.picto-personnes-2 { background-image: url("../images/picto-personnes-2.svg"); }

/* Texte : colonne de lecture de 730px centrée */
.texte {
  box-sizing: border-box;
  max-width: 730px;
  margin: 0 auto;
  color: #000;
  font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
  font-size: 16.5px;
  line-height: 22.275px;
}
.texte p { margin: 0 0 14px; }
.texte a {
  color: #074b98;
  text-decoration: underline;
  cursor: pointer;
}
.texte--intro {
  font-size: 18px;
  line-height: 22px;
}
.strate:has(.texte--intro) .strate__contenu { padding: 42px 18px 0; }

.texte--encadre {
  position: relative;
  padding: 25px 31.5px;
  background: #f2f2f2;
}
.texte--encadre.texte--avec-icone { padding-left: 90px; }
.texte--encadre p:last-child { margin-bottom: 0; }
.texte__icone {
  position: absolute;
  top: 50%;
  left: 25px;
  width: 42px;
  height: 50px;
  transform: translateY(-50%);
}
.strate:has(.texte--encadre) .strate__contenu { padding: 22px 18px 20px; }

/* Sous-menu de la section : boutons bleus en dégradé avec flèche */
.sous-menu__liste {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sous-menu__liste li { margin: 0; }
.sous-menu__lien {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 84px;
  padding: 0 42px 0 21px;
  background: linear-gradient(#074b98, #186db7);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
  color: #fff;
  font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 18.15px;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.3s;
}
.sous-menu__lien::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 11px;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  background: url("../images/picto-fleche-droite-blanc.svg") no-repeat center / contain;
}
.sous-menu__lien:hover,
.sous-menu__lien:focus-visible {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  color: #fff;
  text-decoration: underline;
}
.strate:has(.sous-menu) .strate__contenu { padding: 57px 0; }

/* Lien à consulter : boutons blancs avec pictogramme, deux par rangée dans une colonne de 760px */
.strate:has(.lien-consulter) .strate__contenu {
  box-sizing: border-box;
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 0 60px;
}
.strate:has(.lien-consulter) .strate__titre { margin-top: 20px; }
.field--name-field-strate-contenu:has(> .field__item > .lien-consulter) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 23px 36px;
  /* padding plutôt que margin : une marge fusionnerait avec celle du titre. */
  padding-top: 8px;
}
.lien-consulter {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  min-height: 72px;
  padding: 10px 8px 10px 87px;
  border: 1px solid rgba(200, 200, 200, 0.1);
  background: #fff;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  color: #074b98;
  font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 21.45px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.lien-consulter p { margin: 0; }
.lien-consulter strong {
  color: #107cc0;
  font-size: 17px;
  font-weight: 700;
  line-height: 20px;
}
.lien-consulter__icone {
  position: absolute;
  top: 50%;
  left: 10.55px;
  width: 52.8px;
  height: 52px;
  transform: translateY(-50%);
}
/* Survol comme les tuiles de l'accueil : fond bleu, texte et picto blancs. */
.lien-consulter:hover,
.lien-consulter:focus-visible {
  background: #074b98;
  color: #fff;
  text-decoration: none;
}
.lien-consulter:hover strong,
.lien-consulter:focus-visible strong { color: #fff; }
.lien-consulter:hover .lien-consulter__icone,
.lien-consulter:focus-visible .lien-consulter__icone { filter: brightness(0) invert(1); }

/* Menus : le 3e niveau (sous-rubriques d'une rubrique) n'apparaît pas dans le menu déroulant du bureau ;
   dans le menu mobile, il se déplie sous sa rubrique, en retrait. */
.site-nav ul.menu ul.menu ul.menu { display: none; }
.menu-mobile__sous-menu .menu-mobile__sous-menu { background: #f7f7f7; }
.menu-mobile__sous-menu .menu-mobile__sous-menu .menu-mobile__lien { padding-left: 50px; }

@media (max-width: 1000px) {
  .sous-menu__liste { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 766px) {
  .strate:has(.sous-menu) .strate__contenu { padding: 30px 0; }
  .sous-menu__liste {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .sous-menu__lien { height: auto; min-height: 60px; padding-top: 10px; padding-bottom: 10px; }
  .strate:has(.texte--intro) .strate__contenu { padding: 30px 0 0; }
  .strate:has(.texte--encadre) .strate__contenu { padding: 20px 0; }
  .texte--encadre { padding: 20px; }
  .texte--encadre.texte--avec-icone { padding-left: 80px; }
  .strate:has(.lien-consulter) .strate__contenu { padding: 10px 0 30px; }
  .field--name-field-strate-contenu:has(> .field__item > .lien-consulter) {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}


/* ==========================================================================
   Page de contenu (ex. Accessibilité Web) : bandeau de la rubrique parente,
   menu de la section à gauche (fond gris jusqu'au bord), contenu à droite
   ========================================================================== */
.layout-content:has(.contenu-page) {
  padding-top: 0;
  padding-bottom: 0;
}
/* Le titre de la page est dans le gabarit (H1 à droite du menu). */
.layout-content:has(.contenu-page) .block-page-title-block { display: none; }

.bandeau-section {
  margin: 0 calc(50% - 50cqw);
  padding-top: 30px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
    var(--entete-image, none) center / cover no-repeat,
    #444;
}
.bandeau-section__titre {
  margin: 0;
  /* Le titre s'aligne sur le conteneur de 1160px. */
  padding: 25px max(16px, calc(50cqw - 578px));
  background: #108b48;
  color: #fff;
  font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 30.75px;
}

.contenu-page { display: grid; }
.contenu-page--avec-menu { grid-template-columns: 270px minmax(0, 1fr); }
.contenu-page__menu {
  padding-top: 26px;
  background: #f2f2f2;
  /* Le gris continue jusqu'au bord gauche de la fenêtre. */
  box-shadow: -100vmax 0 0 0 #f2f2f2;
  clip-path: inset(0 0 0 -100vmax);
}
.contenu-page__menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.contenu-page__menu li { margin: 0; }
.contenu-page__lien {
  display: block;
  padding: 8px 20px 8px 15px;
  color: #074b99;
  font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
}
.contenu-page__lien:hover,
.contenu-page__lien:focus-visible { text-decoration: underline; }
.contenu-page__lien.est-actif {
  background: #1b51a0;
  color: #fff;
  font-weight: 600;
}
/* Colonne de lecture de 727px, comme sur le site de la Ville (le reste à droite reste blanc). */
.contenu-page__principal {
  max-width: 727px;
  padding: 24px 0 24px 40px;
}
.contenu-page:not(.contenu-page--avec-menu) .contenu-page__principal { padding-left: 0; }
.contenu-page__titre {
  margin: 6px 0 12px;
  color: #074b98;
  font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 30.75px;
}
.contenu-page .texte { max-width: none; }

/* Texte : listes, intertitres et deux styles d'encadré */
.texte ul {
  margin: 13.2px 0 26.4px 28.875px;
  padding: 0;
}
.texte li { margin-top: 9.9px; }
.texte h2 {
  margin: 0 0 14px;
  color: #074b98;
  font-size: 24px;
  font-weight: 700;
  line-height: 27.6px;
}
.texte--encadre-bordure {
  margin: 10px auto 15px;
  padding: 25px 31.5px;
  background: #fff;
  box-shadow: inset 0 0 0 7.875px #eee;
}
.texte--renseignements {
  margin: 31.5px auto 23.625px;
  padding: 25px 44.1px 25px 31.5px;
  background: #074b98;
  color: #fff;
}
.texte--renseignements h2 {
  margin-bottom: 6.3px;
  color: #fff;
  font-size: 21px;
  line-height: 24.15px;
}
.texte--renseignements a { color: #fff; }
:is(.texte--encadre-bordure, .texte--renseignements) p:last-child { margin-bottom: 0; }

@media (max-width: 766px) {
  .bandeau-section__titre {
    font-size: 26px;
    line-height: 27px;
  }
  /* En mobile, on navigue dans la section avec le menu MENU, comme sur le site de la Ville. */
  .contenu-page--avec-menu { grid-template-columns: minmax(0, 1fr); }
  .contenu-page__menu { display: none; }
  .contenu-page__principal {
    max-width: none;
    padding: 24px 0 20px;
  }
  .contenu-page__titre {
    font-size: 26px;
    line-height: 27px;
  }
  .texte--encadre-bordure { padding: 19px 15px; }
  .texte--renseignements { padding: 20px 15px; }
}


/* Page de contenu sans menu de gauche (page hors menu) : bandeau centré, colonne de 767px centrée */
.node--sans-menu .bandeau-section__titre { text-align: center; }
.contenu-page:not(.contenu-page--avec-menu) .contenu-page__principal {
  max-width: 767px;
  margin: 0 auto;
  padding: 24px 0 20px;
}
/* Intertitre : 24px au-dessus, après un paragraphe comme juste sous le titre de la page. */
.texte h2:not(:first-child),
.contenu-page__principal .field--name-field-zone-principale > .field__item:first-child .texte--normal h2:first-child { margin-top: 24px; }

/* Question-réponse (ex. fiche d'accessibilité d'un lieu) */
.question-reponse {
  padding: 10px 0;
  color: #000;
  font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
  font-size: 16.5px;
  line-height: 22.275px;
}
.field__item:has(> .question-reponse) + .field__item > .question-reponse { border-top: 1px solid #ccc; }
.question-reponse p { margin: 0 0 14px; }
.question-reponse__reponse a {
  color: #074b98;
  text-decoration: underline;
  cursor: pointer;
}
.question-reponse__reponse ul {
  margin: 13.2px 0 26.4px 28.875px;
  padding: 0;
}
.question-reponse__reponse li { margin-top: 9.9px; }
:is(.question-reponse--oui, .question-reponse--non) .question-reponse__reponse p:first-child {
  position: relative;
  padding-left: 32px;
}
:is(.question-reponse--oui, .question-reponse--non) .question-reponse__reponse p:first-child::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 25px;
  height: 25px;
  box-sizing: border-box;
  border: 2px solid #074b98;
  border-radius: 50%;
  background: no-repeat center / 100% auto;
}
/* Mêmes filtres que le site de la Ville : le picto et le cercle bleus deviennent verts (Oui) ou rouges (Non). */
.question-reponse--oui .question-reponse__reponse p:first-child::before {
  background-image: url("../images/picto-accepter.svg");
  filter: hue-rotate(-65deg) brightness(1.2);
}
.question-reponse--non .question-reponse__reponse p:first-child::before {
  background-image: url("../images/picto-refuser.svg");
  filter: hue-rotate(153deg) brightness(1.41);
}


/* Texte de style « Slogan » (ex. VOTRE SUCCÈS NOTRE ADN) : grand texte bleu centré, mots en gras en bleu clair */
.texte--slogan {
  color: #024999;
  font-size: 42px;
  font-weight: 700;
  line-height: 56.7px;
  text-align: center;
  text-transform: uppercase;
}
.texte--slogan p { margin: 0; }
.texte--slogan strong {
  color: #4895c9;
  font-weight: 700;
}
.strate:has(.texte--slogan) .strate__contenu { padding: 41px 18px 34px; }
@media (max-width: 766px) {
  .texte--slogan {
    font-size: 30px;
    line-height: 38px;
  }
  .strate:has(.texte--slogan) .strate__contenu { padding: 30px 0; }
}


/* ==========================================================================
   Page Touristes : texte avec image à droite, encadrés illustrés, galerie photos
   ========================================================================== */

/* Texte avec image à droite (75 % / 25 %) */
.texte--avec-image {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 205px;
  max-width: 820px;
}
.texte__image { margin: 0; }
.texte__image img {
  display: block;
  width: 100%;
  height: auto;
}
.strate:has(.texte--avec-image) .strate__contenu { padding: 44px 18px 24px; }

/* Encadrés illustrés : trois par rangée ; un texte ou une galerie dans la même strate prend toute la largeur. */
.field--name-field-strate-contenu:has(> .field__item > .encadre-illustre) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.field--name-field-strate-contenu:has(> .field__item > .encadre-illustre) > .field__item:not(:has(> .encadre-illustre)) { grid-column: 1 / -1; }
.encadre-illustre {
  box-sizing: border-box;
  height: 100%;
  padding: 25px 31.5px;
  color: #000;
  font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
  font-size: 16.5px;
  line-height: 22.275px;
}
.encadre-illustre--blanc { background: #fff; }
.encadre-illustre--gris { background: #f2f2f2; }
.encadre-illustre__image { margin: 0; }
.encadre-illustre__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.encadre-illustre__titre {
  margin: 36.5px 0 13px;
  color: #222;
  font-size: 18px;
  font-weight: 700;
  line-height: 20.7px;
}
.encadre-illustre--gris .encadre-illustre__titre {
  margin-top: 40.9px;
  font-size: 20.5px;
  line-height: 23.575px;
}
.encadre-illustre__texte p { margin: 0 0 14px; }
.encadre-illustre__texte ul {
  margin: 13.2px 0 0 28.875px;
  padding: 0;
}
.encadre-illustre__texte li {
  margin-top: 9.9px;
  line-height: 21.45px;
}
.encadre-illustre__texte a {
  color: #074b98;
  text-decoration: underline;
  cursor: pointer;
}
/* « Que recherchez-vous? » : titre collé aux encadrés blancs, comme sur le site de la Ville. */
.strate:has(.encadre-illustre--blanc) .strate__contenu { padding: 16px 0; }
.strate:has(.encadre-illustre--blanc) .strate__titre { margin: 0; }

/* Strate avec galerie : colonne de 800px centrée */
.strate:has(.galerie) .strate__contenu {
  box-sizing: border-box;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 0 19px;
}
.strate:has(.galerie) .texte { max-width: none; }

/* Galerie photos */
.galerie { margin: 15.75px 0 31.5px; }
.galerie__scene {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 345px;
}
.galerie__image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
.galerie__fleche {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #108848;
  transform: translateY(-50%);
  cursor: pointer;
}
.galerie__fleche:hover,
.galerie__fleche:focus-visible { background: #007236; }
.galerie__fleche--prec { left: 10px; }
.galerie__fleche--suiv { right: 10px; }
.galerie__fleche::before {
  content: "";
  width: 11px;
  height: 11px;
  border: solid #fff;
  border-width: 3px 3px 0 0;
}
.galerie__fleche--prec::before { margin-left: 5px; transform: rotate(-135deg); }
.galerie__fleche--suiv::before { margin-right: 5px; transform: rotate(45deg); }
.galerie__vignettes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.galerie__vignettes li { margin: 0; }
.galerie__vignette {
  display: block;
  padding: 0;
  border: 3px solid transparent;
  background: none;
  cursor: pointer;
  line-height: 0;
}
.galerie__vignette img {
  display: block;
  width: 54px;
  height: 54px;
  object-fit: cover;
}
.galerie__vignette[aria-current="true"] { border-color: #108848; }
.galerie__vignette:focus-visible {
  outline: 3px solid #f5a623;
  outline-offset: 1px;
}

@media (max-width: 1000px) {
  .field--name-field-strate-contenu:has(> .field__item > .encadre-illustre) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 766px) {
  .texte--avec-image { grid-template-columns: minmax(0, 1fr); }
  .texte__image { max-width: 205px; margin-top: 10px; }
  .strate:has(.texte--avec-image) .strate__contenu { padding: 30px 0 20px; }
  .field--name-field-strate-contenu:has(> .field__item > .encadre-illustre) { grid-template-columns: minmax(0, 1fr); }
  .strate:has(.encadre-illustre--blanc) .strate__titre { margin-top: 14px; }
  .galerie__scene { height: 220px; }
}


/* ==========================================================================
   Couleurs de section (champ « Couleur de la section », calculé dans ville_quebec.theme)
   Citoyens vert, Gens d'affaires bleu, Touristes orange, À propos gris : bande sous la
   bannière et bandeau des pages de contenu. Texte blanc : contraste de 4,4 à 4,6:1.
   ========================================================================== */
.couleur-section--vert { --couleur-section: #108b49; }
.couleur-section--bleu { --couleur-section: #027ac5; }
.couleur-section--orange { --couleur-section: #cd4c1d; }
.couleur-section--gris { --couleur-section: #697697; }
.entete-section { border-bottom-color: var(--couleur-section, #108b49); }
.bandeau-section__titre { background: var(--couleur-section, #108b48); }


/* Images insérées dans un texte avec l'éditeur (bouton d'alignement : à gauche, centrée, à droite) */
.texte img {
  max-width: 100%;
  height: auto;
}
.texte img.align-center {
  display: block;
  margin: 0 auto 14px;
}
.texte img.align-left {
  float: left;
  margin: 0 20px 14px 0;
}
.texte img.align-right {
  float: right;
  margin: 0 0 14px 20px;
}
/* Seulement si le texte contient une image flottante : ailleurs, ce bloc empêcherait les marges de fusionner. */
.texte:has(img.align-left, img.align-right)::after {
  content: "";
  display: table;
  clear: both;
}
/* Même raison pour le « clearfix » que Drupal ajoute au champ de texte : sans image flottante, on le retire
   pour que la marge d’une liste ou d’un paragraphe fusionne avec celle du bloc suivant, comme sur le site de la Ville. */
.texte .clearfix:not(:has(img.align-left, img.align-right))::after { content: none; }
/* Un bloc Renseignements en fin de strate porte déjà sa marge du bas. */
.strate:has(.field__item:last-child > .texte--renseignements) .strate__contenu { padding-bottom: 0; }


/* Style « Bouton vert » de l'éditeur (lien avec la classe « bouton ») */
.texte a.bouton {
  display: inline-block;
  margin: 1px 0 7px;
  padding: 8px 30px 10px;
  border-radius: 3px;
  background: #108848;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s;
}
.texte a.bouton:hover,
.texte a.bouton:focus-visible {
  background: #007236;
  color: #fff;
  text-decoration: underline;
}

/* Pictogrammes ajoutés pour la page Animaux */
.picto.picto-portail-reglements { background-image: url("../images/picto-portail-reglements.svg"); }
.picto.picto-formulaire { background-image: url("../images/picto-formulaire.svg"); }
.picto.picto-chien-patte { background-image: url("../images/picto-chien-patte.svg"); }
.picto.picto-dossier-aide { background-image: url("../images/picto-dossier-aide.svg"); }

/* Textes qui se suivent dans une même strate : un encadré se détache du texte qui le précède,
   et l'intertitre d'un texte qui suit un autre bloc reprend l'espace d'un intertitre courant. */
.field__item:has(> .texte) + .field__item > .texte--encadre { margin-top: 10px; }
.field__item:has(> .texte) + .field__item > .texte--normal h2:first-child { margin-top: 37.2px; }
.picto.picto-logo-ville { background-image: url("../images/picto-logo-ville.svg"); }


/* Phrase d’accroche : dans une introduction, un premier paragraphe entièrement en gras
   (ex. « Québec foisonne d'activités artistiques et culturelles »). */
.texte--intro p:first-child:has(> strong:only-child) {
  margin-bottom: 18px;
  color: #074b98;
  font-size: 24px;
  line-height: 28px;
}


/* Intégration externe, présentation « Encadré à bordure » (ex. module Facebook, 500px de large au plus) */
.integration-externe.integration-externe--encadre { margin-bottom: 15px; }
.integration-externe--encadre .integration-externe__cadre {
  display: block;
  width: 100%;
  max-width: 500px;
  border: 0;
}


/* Sous-intertitre (H3) dans un texte */
.texte h3 {
  margin: 35.875px 0 13px;
  color: #222;
  font-size: 20.5px;
  font-weight: 700;
  line-height: 23.575px;
}
.texte h3:first-child { margin-top: 0; }

/* Pictogrammes ajoutés pour la page Cour municipale */
.picto.picto-cour { background-image: url("../images/picto-cour.svg"); }
.picto.picto-poignee-main { background-image: url("../images/picto-poignee-main.svg"); }


/* ==========================================================================
   Pages de section de Citoyens (importateur) : pictogrammes, lien à consulter bleu, accroche
   ========================================================================== */
.picto.picto-remorquage { background-image: url("../images/picto-remorquage.svg"); }
.picto.picto-stationnement-vignette { background-image: url("../images/picto-stationnement-vignette.svg"); }
.picto.picto-flocon { background-image: url("../images/picto-flocon.svg"); }
.picto.picto-casque { background-image: url("../images/picto-casque.svg"); }
.picto.picto-lieux-animation { background-image: url("../images/picto-lieux-animation.svg"); }
.picto.picto-courriel { background-image: url("../images/picto-courriel.svg"); }
.picto.picto-mobilite-active { background-image: url("../images/picto-mobilite-active.svg"); }
.picto.picto-travaux { background-image: url("../images/picto-travaux.svg"); }
.picto.picto-reseau-structurant { background-image: url("../images/picto-reseau-structurant.svg"); }
.picto.picto-assistant-permis { background-image: url("../images/picto-assistant-permis.svg"); }
.picto.picto-maison { background-image: url("../images/picto-maison.svg"); }
.picto.picto-pdf { background-image: url("../images/picto-pdf.svg"); }
.picto.picto-eglise { background-image: url("../images/picto-eglise.svg"); }
.picto.picto-medaille { background-image: url("../images/picto-medaille.svg"); }
.picto.picto-facebook-blanc { background-image: url("../images/picto-facebook-blanc.svg"); }
.picto.picto-x-blanc { background-image: url("../images/picto-x-blanc.svg"); }
.picto.picto-youtube-blanc { background-image: url("../images/picto-youtube-blanc.svg"); }
.picto.picto-quebec-alerte { background-image: url("../images/picto-quebec-alerte.svg"); }
.picto.picto-alerte { background-image: url("../images/picto-alerte.svg"); }
.picto.picto-famille { background-image: url("../images/picto-famille.svg"); }
.picto.picto-trousse { background-image: url("../images/picto-trousse.svg"); }
.picto.picto-recherche-maison { background-image: url("../images/picto-recherche-maison.svg"); }
.picto.picto-mobile { background-image: url("../images/picto-mobile.svg"); }

/* Lien à consulter, style « bleu » (ex. réseaux sociaux de la page Police) */
.lien-consulter.lien-consulter--bleu {
  min-height: 54px;
  border: 0;
  background: linear-gradient(#074b98, #186db7);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
  color: #fff;
  font-weight: 700;
  transition: box-shadow 0.3s;
}
.lien-consulter--bleu strong { color: #fff; font-size: 16px; }
.lien-consulter--bleu:hover,
.lien-consulter--bleu:focus-visible {
  background: linear-gradient(#074b98, #186db7);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  text-decoration: underline;
}
.lien-consulter--bleu .lien-consulter__icone,
.lien-consulter--bleu:hover .lien-consulter__icone,
.lien-consulter--bleu:focus-visible .lien-consulter__icone {
  left: 24px;
  width: 30px;
  height: 30px;
  filter: none;
}

/* Phrase d’accroche aussi en tête d’un texte courant (ex. « Je veux : » sur la page Police) */
.texte--normal p:first-child:has(> strong:only-child) {
  margin-bottom: 18px;
  color: #074b98;
  font-size: 24px;
  line-height: 28px;
}


/* Vidéo dans une page de section : dans la colonne de lecture de 730px (Québec animée, sur l’accueil, reste pleine largeur). */
.node--type-page-section .integration-externe:not(.integration-externe--encadre) {
  max-width: 730px;
  margin-right: auto;
  margin-left: auto;
}
/* Image d’un encadré à bordure : pleine largeur de l’encadré (ex. Loisirs et sports). */
.texte--encadre-bordure img.align-center { width: 100%; }


/* ==========================================================================
   Carte « Image avec titre superposé » (ex. Installations sportives) :
   photo, dégradé sombre en bas et titre blanc, trois par rangée
   ========================================================================== */
:is(.field--name-field-zone-principale, .field--name-field-strate-contenu):has(> .field__item > .carte--superpose) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
:is(.field--name-field-zone-principale, .field--name-field-strate-contenu):has(> .field__item > .carte--superpose) > .field__item:not(:has(> .carte)) { grid-column: 1 / -1; }
/* Dans la grille, les marges ne fusionnent pas : l’écart de 16px suffit avant les cartes. */
:is(.field--name-field-zone-principale, .field--name-field-strate-contenu):has(> .field__item > .carte--superpose) > .field__item:has(+ .field__item > .carte) .texte .field > :last-child { margin-bottom: 0; }
.field__item:has(> .carte) + .field__item > .texte--normal h2:first-child { margin-top: 22px; }
.carte.carte--superpose {
  position: relative;
  height: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #ddd;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: left;
}
.carte--superpose .carte__image { position: relative; }
.carte--superpose .carte__image img {
  display: block;
  width: 100%;
  height: 148px;
  object-fit: cover;
}
.carte--superpose .carte__image::after {
  content: "";
  position: absolute;
  inset: 60% 0 0;
  background: linear-gradient(to top, rgba(33, 40, 55, 0.8), rgba(33, 40, 55, 0));
}
.carte.carte--superpose .carte__titre {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  margin: 0;
  padding: 9.6px 16px;
  color: #fff;
  font-size: 17.6px;
  font-weight: 700;
  line-height: 1.3;
}
.carte--superpose:hover .carte__titre,
.carte--superpose:focus-visible .carte__titre { text-decoration: underline; }

/* Rangée de pictogrammes insérés dans un texte (ex. interdictions) */
.texte p:has(> img[src*="picto-interdiction"]) {
  display: flex;
  gap: 16px;
}

@media (max-width: 766px) {
  :is(.field--name-field-zone-principale, .field--name-field-strate-contenu):has(> .field__item > .carte--superpose) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Installations sportives : liste filtrable, vignettes et fiches
   ========================================================================== */
.picto-calendrier-horloge { --picto: url("../images/picto-calendrier-horloge.svg");}
.picto-calendrier { --picto: url("../images/picto-calendrier.svg");}
.picto-sport-gymnase { --picto: url("../images/picto-sport-gymnase.svg");}
.picto-accessibilite { --picto: url("../images/picto-accessibilite.svg");}
.picto-auto { --picto: url("../images/picto-auto.svg");}
.picto-checklist { --picto: url("../images/picto-checklist.svg");}
.picto-dollar { --picto: url("../images/picto-dollar.svg");}
.picto-information { --picto: url("../images/picto-information.svg");}
.picto-carte-route { --picto: url("../images/picto-carte-route.svg");}
.picto-carte-google { --picto: url("../images/picto-carte-google.svg");}
.picto-site-externe { --picto: url("../images/picto-site-externe.svg");}
.picto-retroaction { --picto: url("../images/picto-retroaction.svg");}
.picto-stationnement { --picto: url("../images/picto-stationnement.svg");}
.picto-toilette { --picto: url("../images/picto-toilette.svg");}
.picto-wifi { --picto: url("../images/picto-wifi.svg");}

/* Menu de gauche déplié (rubrique de la branche courante) */
.contenu-page__sous-menu .contenu-page__lien {
  padding-left: 30px;
  font-size: 15px;}
.contenu-page__sous-menu .contenu-page__sous-menu .contenu-page__lien { padding-left: 45px;}
.contenu-page__lien.dans-branche:not(.est-actif) { font-weight: 700;}

/* Filtres */
.filtres-installations {
  margin: 0 0 30px;
  padding: 20px;
  background: #f2f2f2;}
.filtres-installations__titre {
  flex-basis: 100%;
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;}
.filtres-installations .form--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: 20px;}
.filtres-installations .form--inline::after { content: none;}
.filtres-installations .form-item {
  float: none;
  margin: 0 0 10px;}
.filtres-installations label {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 700;}
.filtres-installations select {
  width: 200px;
  max-width: 100%;
  padding: 6px;
  border: 1px solid #767676;
  border-radius: 4px;
  background-color: #fff;
  font-size: 15px;}
.filtres-installations .form-actions {
  flex-basis: 100%;
  margin: 0;}
.filtres-installations [data-drupal-selector^="edit-submit"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);}
.filtres-installations [data-drupal-selector^="edit-reset"] {
  margin: 0;
  padding: 0 0 0 22px;
  border: 0;
  background: url("../images/picto-fleches-cercle.svg") left center / 16px no-repeat;
  color: #074b98;
  font-size: 15px;
  text-decoration: underline;
  cursor: pointer;}
/* Comme sur le site de la Ville : filtres, puis nombre d'éléments, puis la liste. */
.liste-installations .view {
  display: flex;
  flex-direction: column;}
.liste-installations .view-filters { order: -1;}
.liste-installations .view-header {
  margin: 0 0 20px;
  padding-bottom: 8px;
  border-bottom: 2px solid #222;
  font-size: 15px;
  font-weight: 700;}

/* Vignette d'une installation */
.fiche-installation {
  margin: 20px 0 32px;
  padding: 1.2rem;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);}
.fiche-installation__titre {
  margin: 0 0 20px;
  font-size: 21px;
  line-height: 1.2;}
.fiche-installation__titre a {
  color: #074b98;
  text-decoration: underline;}
.fiche-installation__colonnes {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;}
.fiche-installation__photo {
  flex: 1 1 250px;
  margin: 0;}
.fiche-installation__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;}
.fiche-installation__coordonnees {
  flex: 1 1 70px;
  align-self: flex-start;
  padding: 1rem;
  border-radius: 8px;
  background: #f9f9f9;
  font-size: 15px;}
.fiche-installation__coordonnees p { margin: 0 0 .8rem;}
.fiche-installation__coordonnees p:last-child { margin-bottom: 0;}
.fiche-installation__services {
  display: flex;
  gap: .5rem;
  margin: 0 0 .8rem;
  padding: 0;
  list-style: none;}
.picto-service {
  width: 25px;
  height: 25px;
  background: var(--picto) center / contain no-repeat;}
.statut {
  display: inline-block;
  padding: .2rem .3rem;
  border: 2px solid #dc3b00;
  border-radius: 6px;
  color: #000;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;}
.statut--ouvert {
  border-color: #108848;
  color: #108848;}
.statut--preparation { border-color: #ee7523;}
@media (max-width: 700px) {
  .fiche-installation__photo,
  .fiche-installation__coordonnees { flex-basis: 100%;}
}

/* Liens précédés d'un pictogramme */
.lien-picto {
  position: relative;
  padding-left: 26px;}
.lien-picto::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  background: var(--picto) center / contain no-repeat;}
a.lien-picto { color: #074b98;}

/* Fiche */
.fiche__etiquette {
  display: inline-block;
  margin: 4px 10px 10px 0;
  padding: 5px 10px;
  border-radius: 3px;
  background: #545454;
  color: #fff;
  font-size: 13px;
  font-weight: 600;}
.fiche__etiquette--type { background: #8a8a8a;}
.fiche__statut {
  display: block;
  width: fit-content;
  margin: 5px 0 0;
  padding: 0 .3rem;}
.fiche__maj {
  display: block;
  width: fit-content;
  margin: 14px 0 20px;
  font-size: 14px;}
.fiche-avis {
  margin: 20px 0;
  padding: 16px 20px 16px 72px;
  border-left: 6px solid;
  border-radius: 6px;
  background: left 20px center / 34px no-repeat;}
.fiche-avis--avis {
  border-color: #ffcb04;
  background-color: #fff4cc;
  background-image: url("../images/picto-attention.svg");}
.fiche-avis--annonce {
  border-color: #107cc0;
  background-color: #e7f1fa;
  background-image: url("../images/picto-porte-voix.svg");}
.fiche-avis__titre {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;}
.fiche-avis__texte { margin: 0;}
.fiche__intro { margin: 20px 0 34px;}
.fiche__raccourcis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;}
.fiche__raccourcis li { margin: 0;}
.fiche__raccourci {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 85px;
  height: 100%;
  padding: 0 12px 0 23px;
  background: #fff;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, .15);
  color: #222;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;}
.fiche__raccourci::before {
  content: "";
  flex: 0 0 40px;
  height: 40px;
  background: var(--picto) center / contain no-repeat;}
.fiche__raccourci:hover span,
.fiche__raccourci:focus-visible span { text-decoration: underline;}
.fiche__section-titre {
  position: relative;
  margin: 37px 0 14px;
  padding-left: 40px;
  color: #074b98;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  scroll-margin-top: 20px;}
.fiche__section-titre::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  background: var(--picto) center / contain no-repeat;}
.fiche__section h3 {
  margin: 20px 0 8px;
  font-size: 19px;}
.fiche-horaire { margin: 16px 0;}
.fiche-horaire__onglets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 3px solid #108848;}
.fiche-horaire__onglet {
  padding: 8px 16px;
  border: 0;
  border-radius: 6px 6px 0 0;
  background: #e6e6e6;
  color: #222;
  font: inherit;
  font-weight: 700;
  cursor: pointer;}
.fiche-horaire__onglet[aria-selected="true"] {
  background: #108848;
  color: #fff;}
.fiche-horaire__periode { padding: 16px 0 0;}
.fiche-horaire__dates { font-weight: 700;}
.annule {
  color: #dc3b00;
  font-weight: 700;}
.fiche-tarifs {
  width: 100%;
  margin: 10px 0 24px;
  border-collapse: collapse;
  font-size: 15px;}
.fiche-tarifs caption {
  padding: 0 0 8px;
  color: #222;
  font-size: 17px;
  font-weight: 700;
  text-align: left;}
.fiche-tarifs th,
.fiche-tarifs td {
  padding: 8px 10px;
  border-bottom: 1px solid #ddd;
  text-align: left;}
.fiche-tarifs thead th {
  background: #074b98;
  color: #fff;}
.fiche__galerie .field__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 30px;}
.fiche__galerie img {
  display: block;
  width: 100%;
  height: auto;}
.fiche__coordonnees {
  display: flex;
  flex-wrap: wrap;
  margin-top: 40px;
  overflow: hidden;
  border-radius: 10px;
  background: #f9f9f9;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .1);}
.fiche__coordonnees-photo {
  width: 100%;
  max-width: 400px;
  object-fit: cover;}
.fiche__coordonnees-details {
  flex: 1;
  min-width: 250px;
  padding: 1.5rem;}
.fiche__coordonnees-details h2 {
  margin: 0;
  color: #074b98;
  font-size: 24px;}
.fiche__lieu {
  margin: 20px 0 4px;
  color: #343434;
  font-size: 17px;}
.fiche__coordonnees-details p { margin: 0 0 12px;}
@media (max-width: 700px) {
  .fiche__coordonnees-photo { max-width: none;}
}

/* ==========================================================================
   Paragraphe « Tiroir » (titre cliquable qui déplie un contenu)
   ========================================================================== */
.tiroir { margin: 0 0 12px;}
.tiroir__titre { margin: 24px 0 0;}
.tiroir__bouton {
  position: relative;
  width: 100%;
  padding: 12px 44px 12px 16px;
  border: 0;
  border-bottom: 2px solid #074b98;
  background: #f2f2f2;
  color: #074b98;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;}
.tiroir--h2 .tiroir__bouton { font-size: 24px;}
.tiroir--h3 .tiroir__bouton { font-size: 19px;}
.tiroir__bouton::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;}
.tiroir__bouton[aria-expanded="true"]::after { content: "−";}
.tiroir__bouton:hover,
.tiroir__bouton:focus-visible { background: #e6e6e6;}
.tiroir__contenu { padding: 16px 16px 4px;}

/* Pistes (ski de fond, raquette) : grille des pistes, condition et légende */
.picto-sport-ski-fond { --picto: url("../images/picto-sport-ski-fond.svg");}
.picto-sport-raquette { --picto: url("../images/picto-sport-raquette.svg");}
.picto-tempete-neige { --picto: url("../images/picto-tempete-neige.svg");}
.fiche-pistes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;}
@media (min-width: 768px) {
  .fiche-pistes { grid-template-columns: repeat(2, 1fr);}
}
.fiche-piste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin: 0;
  padding: 1rem .8rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);}
.fiche-piste__info {
  display: flex;
  align-items: center;
  gap: .5rem;}
.fiche-piste__difficulte { width: 20px; height: auto;}
.fiche-piste__style { width: 28px; height: auto;}
.fiche-piste__etat {
  padding: .2em .6em;
  border: 1px solid;
  border-radius: 4px;
  font-size: .9rem;}
.fiche-piste__etat--bonne { border-color: #c3e6cb; background: #d4edda; color: #155724;}
.fiche-piste__etat--passable { border-color: #ffeeba; background: #fff3cd; color: #856404;}
.fiche-piste__etat--fermee { border-color: #f5c6cb; background: #f8d7da; color: #721c24;}
.fiche-pistes__legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1rem;
  background: #dcdcdc;
  font-size: .95rem;}
.fiche-pistes__legende p { margin: 0;}
.fiche-pistes__legende-item {
  display: flex;
  align-items: center;
  gap: .5rem;}
.fiche-pistes__legende-item img { width: 20px; height: auto;}

/* Bouton « Effacer la recherche » des filtres (toujours visible, pictogramme flèches en cercle) */
.filtres-installations__effacer-ligne {
  flex-basis: 100%;
  margin: 0;}
.filtres-installations__effacer {
  margin: 0;
  padding: 0 0 0 22px;
  border: 0;
  background: url("../images/picto-fleches-cercle.svg") left center / 16px no-repeat;
  color: #074b98;
  font: inherit;
  font-size: 15px;
  text-decoration: underline;
  cursor: pointer;}
.filtres-installations__effacer:hover,
.filtres-installations__effacer:focus-visible { text-decoration: none;}

/* Pictogrammes ajoutés pour la page Espace presse */
.picto.picto-video-camera { background-image: url("../images/picto-video-camera.svg");}
.picto.picto-telephone { background-image: url("../images/picto-telephone2.svg");}
.picto.picto-dossier-ouvert { background-image: url("../images/picto-dossier-ouvert.svg");}
.picto.picto-bulle { background-image: url("../images/picto-bulle.svg");}
/* Texte « Encadré blanc à bordure grise » (encadré du haut de l'Espace presse) */
.texte--encadre-haut {
  position: relative;
  max-width: 730px;
  margin: 0 auto;
  padding: 25px 31.5px;
  background: #fff;
  box-shadow: inset 0 0 0 8px #eee;}
.texte--encadre-haut.texte--avec-icone { padding-left: 90px;}
.texte--encadre-haut .texte__icone {
  top: 18px;
  left: 10px;
  width: 75px;
  height: 65px;
  transform: none;}
.texte--encadre-haut h2 { margin-top: 0;}
.texte--encadre-haut p:last-child { margin-bottom: 0;}
.strate:has(.texte--encadre-haut) .strate__contenu { padding: 20px 0;}
@media (max-width: 700px) {
  .texte--encadre-haut { padding: 20px;}
  .texte--encadre-haut.texte--avec-icone { padding-left: 80px;}
  .texte--encadre-haut .texte__icone { width: 60px; height: 52px;}
}

/* ==========================================================================
   Communiqués et actualités : filtres, liste et fiche
   ========================================================================== */
.filtres-communiques {
  position: relative;
  margin: 0 0 30px;
  padding: 30px 40px;
  background: #f2f2f2;}
.filtres-communiques .form--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: 20px;}
.filtres-communiques .form--inline::after { content: none;}
.filtres-communiques__titre {
  flex-basis: 100%;
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 700;}
/* « Effacer les filtres » en haut à droite de l'encadré, comme sur le site de la Ville. */
.filtres-communiques .filtres-installations__effacer {
  position: absolute;
  top: 30px;
  right: 40px;}
.filtres-communiques .form-item {
  float: none;
  margin: 0 0 10px;}
.filtres-communiques label {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;}
.filtres-communiques select {
  width: 200px;
  max-width: 100%;
  padding: 6px;
  border: 1px solid #767676;
  border-radius: 4px;
  background-color: #fff;
  font-size: 15px;}
.filtres-communiques .form-actions {
  flex-basis: 100%;
  margin: 4px 0 0;}
.filtres-communiques [data-drupal-selector^="edit-submit"] {
  padding: 8px 20px 10px 38px;
  border: 0;
  border-radius: 3px;
  background: #108848 url("../images/picto-loupe-blanc.svg") 14px center / 16px no-repeat;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;}
.filtres-communiques [data-drupal-selector^="edit-submit"]:hover { background-color: #0b6b38;}
.liste-dynamique--communiques .view-header {
  margin: 0 0 14px;
  padding: 20px 0 10px;
  border-bottom: 1px solid #000;
  font-size: 16.5px;
  font-weight: 700;}
.liste-dynamique--communiques .view {
  display: flex;
  flex-direction: column;}
.liste-dynamique--communiques .view-filters { order: -1;}
.communique-item {
  display: flow-root;
  padding: 30px 0 23px;
  border-bottom: 1px solid #e5e5e5;}
.communique-item__image {
  float: left;
  width: min(260px, 35%);
  margin: 0 30px 0 0;}
.communique-item__image img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: #eef3f9;}
.communique-item__image img[src$=".svg"] {
  padding: 30px 50px;
  object-fit: contain;}
.communique-item__date {
  margin: 0 0 1px;
  font-size: 16.5px;
  font-weight: 700;}
.communique-item__titre {
  margin: 12px 0 14px;
  font-size: 24px;
  line-height: 1.15;}
.communique-item__titre a {
  color: #074b98;
  text-decoration: underline;}
.communique-item__extrait {
  margin: 0;
  font-size: 16.5px;}
@media (max-width: 700px) {
  .filtres-communiques { padding: 20px;}
  .filtres-communiques .filtres-installations__effacer { top: 20px; right: 20px;}
  .communique-item__image {
    float: none;
    width: 100%;
    margin: 0 0 14px;}
}
/* Fiche */
.communique__etiquettes { margin: 0 0 10px;}
.communique__etiquette--type { background: #1b3a6b;}
.communique__date {
  display: block;
  width: fit-content;
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;}
.communique__banniere { margin: 20px 0;}
.communique__banniere img {
  display: block;
  width: 100%;
  height: auto;}
.communique__intro {
  margin: 20px 0;
  font-size: 19px;
  line-height: 1.5;}
.communique__complement { margin-top: 30px;}
.communique__complement h3 { color: #074b98;}
.communique__numero {
  margin-top: 30px;
  color: #545454;
  font-size: 14px;}

/* Pictogrammes ajoutés pour la page Nous joindre */
.picto.picto-telephone-fixe { background-image: url("../images/picto-telephone-fixe.svg");}
.picto.picto-arrondissements-bureaux { background-image: url("../images/picto-arrondissements-bureaux.svg");}
.picto.picto-panier { background-image: url("../images/picto-panier.svg");}
/* Texte « Bloc à pictogramme » (options de communication de Nous joindre) */
.texte--pictogramme {
  position: relative;
  max-width: 730px;
  margin: 0 auto;
  padding: 10px 0 20px 65px;
  border-bottom: 1px solid #ddd;}
.field__item:last-child > .texte--pictogramme { border-bottom: 0;}
.field__item + .field__item > .texte--pictogramme { padding-top: 20px;}
.texte--pictogramme .texte__icone {
  top: 8px;
  left: 0;
  width: 60px;
  height: 45px;
  transform: none;}
.field__item + .field__item > .texte--pictogramme .texte__icone { top: 18px;}
.texte--pictogramme h2 {
  margin: 0 0 10px;
  color: #074b98;
  font-size: 24px;}
.texte--pictogramme h3 {
  margin: 0 0 8px;
  font-size: 17px;}
.texte--pictogramme blockquote {
  margin: 20px 0 0;
  padding: 25px 30px;
  background: #f2f2f2;
  font-style: normal;}
.texte--pictogramme blockquote p:last-child { margin-bottom: 0;}
@media (max-width: 700px) {
  .texte--pictogramme { padding-left: 55px;}
  .texte--pictogramme .texte__icone { width: 45px; height: 34px;}
}

/* Bloc à pictogramme qui commence par un titre 3 (options du 311) */
.texte--pictogramme h3:first-child {
  margin: 9px 0 13px;
  font-size: 20.5px;}
.texte--pictogramme h3:first-child + p:last-child { margin-bottom: 0;}

/* Encadré gris (citation) dans un tiroir */
.tiroir__contenu blockquote {
  margin: 20px 0;
  padding: 25px 30px;
  background: #f2f2f2;
  font-style: normal;}
.tiroir__contenu blockquote h2 {
  margin-top: 0;
  font-size: 21px;}
.tiroir__contenu blockquote p:last-child { margin-bottom: 0;}

/* Couleur de section Nous joindre (pages utilitaires) : bleu foncé du site de la Ville. */
.couleur-section--bleu_fonce { --couleur-section: #144487;}

/* ==========================================================================
   Version anglaise : menu du haut, lien de langue mobile, tuiles de l'accueil
   ========================================================================== */
/* Menu du haut anglais (Media Room, Contact us, FR, Log in) : FR est le 3e lien. */
.site-secondary-menu .menu--en .menu-item:nth-child(3) > a,
.site-secondary-menu .menu--en .menu-item:nth-child(3) > span {
  margin-top: -2px;
  font-size: 16.5px;
  line-height: 21.45px;}
a.entete-mobile__langue {
  color: inherit;
  text-decoration: none;}
a.entete-mobile__langue:hover,
a.entete-mobile__langue:focus-visible { text-decoration: underline;}
/* Tuiles à pictogramme : le pictogramme par position (accueil français) ne s'applique pas. */
:is(.field--name-field-zone-principale, .field--name-field-strate-contenu) .field__item > .tuile:has(> .tuile__icone)::before { content: none;}
.tuile__icone.picto-stationnement { background-image: url("../images/picto-stationnement.svg");}
.tuile__icone.picto-souris { background-image: url("../images/picto-souris.svg");}
.tuile__icone.picto-tempete-neige { background-image: url("../images/picto-tempete-neige.svg");}
.picto.picto-information { background-image: url("../images/picto-information.svg");}
/* Tuile verte (icône « services-en-ligne ») : comme « Services en ligne » de l'accueil. */
:is(.field--name-field-zone-principale, .field--name-field-strate-contenu) .field__item > .tuile.tuile--verte {
  padding-left: 22.4px;
  background: #108848;
  color: #fff;}
:is(.field--name-field-zone-principale, .field--name-field-strate-contenu) .field__item > .tuile.tuile--verte:hover,
:is(.field--name-field-zone-principale, .field--name-field-strate-contenu) .field__item > .tuile.tuile--verte:focus-visible { background: #007236;}
:is(.field--name-field-zone-principale, .field--name-field-strate-contenu) .field__item > .tuile.tuile--verte::before {
  left: auto;
  right: 14.6px;
  width: 25px;
  background-image: url("../images/picto-fleche-droite.svg");
  filter: invert(0.5) brightness(2);}

/* Tuiles à pictogramme dans toute strate (pas seulement les pages de section, ex. accueil anglais). */
:is(.field--name-field-zone-principale, .field--name-field-strate-contenu) .tuile__icone {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 38px;
  height: 46px;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;}
:is(.field--name-field-zone-principale, .field--name-field-strate-contenu) .tuile:hover .tuile__icone,
:is(.field--name-field-zone-principale, .field--name-field-strate-contenu) .tuile:focus-visible .tuile__icone { filter: brightness(0) invert(1);}
/* Carte à titre superposé avec un sous-texte (ex. le mois d'un événement) : titre et texte sur le bas de l'image. */
.carte--superpose:has(.carte__texte) .carte__image::after { inset: 45% 0 0;}
/* L'image occupe toute la carte ; le titre puis le texte s'empilent en bas, quelle que soit leur longueur. */
.carte.carte--superpose:has(.carte__texte) {
  display: grid;
  grid-template-rows: 1fr auto auto;}
.carte.carte--superpose:has(.carte__texte) .carte__image { grid-area: 1 / 1 / 4 / 2;}
.carte.carte--superpose:has(.carte__texte) .carte__image img { height: 100%; min-height: 148px;}
.carte.carte--superpose:has(.carte__texte) .carte__titre {
  position: relative;
  grid-area: 2 / 1;
  padding-bottom: 2px;}
.carte.carte--superpose .carte__texte {
  position: relative;
  z-index: 1;
  grid-area: 3 / 1;
  margin: 0;
  padding: 0 16px 9.6px;
  color: #fff;
  font-size: 14px;
  line-height: 1.3;}
/* Exactement 4 cartes superposées (ex. « Major events ») : 4 colonnes sur grand écran. */
@media (min-width: 768px) {
  :is(.field--name-field-zone-principale, .field--name-field-strate-contenu):has(> .field__item:nth-child(4) > .carte--superpose):not(:has(> .field__item:nth-child(5))) { grid-template-columns: repeat(4, minmax(0, 1fr));}
  :is(.field--name-field-zone-principale, .field--name-field-strate-contenu):has(> .field__item:nth-child(4) > .carte--superpose):not(:has(> .field__item:nth-child(5))) .carte--superpose .carte__image img { height: 200px;}
}

/* Liste de logos dans un texte (ex. médias sociaux de Contact Us) : chaque élément est un lien avec une image. */
.texte ul:has(> li > a > img) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 20px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
  text-align: center;}
.texte ul:has(> li > a > img) > li { margin: 0;}
.texte ul:has(> li > a > img) > li > a > img {
  display: block;
  margin: 0 auto 8px;}