/*
 * SQY Coloc — compléments du thème.
 *
 * Se charge après bundle.css (copié tel quel du design) et ne contient que ce que l'en-tête, le panneau du menu et le
 * pied de page demandent en plus : lien d'évitement, panneau plein écran et son blocage du défilement, bouton du
 * menu, mise en page de la page entière, cibles tactiles de 48 px. Puis, pour la page d'un appartement : ancres sous
 * l'en-tête figé, barre du bas, carte Leaflet, carrousel, vidéo, photo agrandie, mouvement réduit. Puis, pour les pages
 * et les articles : fil d'Ariane, haut d'un article, encadré de fin d'article, blocs standard de WordPress dans le texte
 * long (.sqy-prose). Puis, pour les listes (actualités, archives, recherche, page introuvable) : liste d'articles,
 * pagination, carte entière cliquable, formulaire de recherche. Puis l'accueil et Logements : lien d'une section, appel
 * final. Puis Comment ça marche et Candidater : le signe « sans visite », et le formulaire de Contact Form 7 (sa feuille
 * de style n'est pas chargée : tout vient d'ici). Les compléments des autres modèles s'ajoutent à la suite, par section.
 * Aucune valeur de couleur en dur : tout vient des jetons de tokens.css.
 */

/* ---------------------------------------------------------------- Page entière */

/* Le pied de page reste en bas de l'écran même quand la page est courte (404, page vide). */
.sqy {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.sqy > #contenu {
  flex: 1 0 auto;
}

/*
 * La barre d'administration de WordPress (connecté seulement) est fixe au-dessus de 600 px : l'en-tête se pose dessous.
 * Sa hauteur est posée sur <body> (classe « admin-bar », ce que lit l'en-tête) et sur <html> (:has), que lit
 * scroll-padding-top plus bas : <html> ne voit pas les variables du <body>.
 */
.admin-bar { --sqy-barre-admin: 32px; }
html:has(.admin-bar) { --sqy-barre-admin: 32px; }

@media (max-width: 782px) {
  .admin-bar { --sqy-barre-admin: 46px; }
  html:has(.admin-bar) { --sqy-barre-admin: 46px; }
}

@media (max-width: 600px) {
  .admin-bar { --sqy-barre-admin: 0px; }
  html:has(.admin-bar) { --sqy-barre-admin: 0px; }
}

/*
 * La hauteur de l'en-tête : 64 px (tokens.css, sur :root), 80 px dès 1 100 px. bundle.css ne pose les 80 px que sur .sqy
 * (le <body>) ; ils sont posés ici aussi sur :root, pour que <html> les voie (ThemeFeuillesTest garde l'égalité).
 */
@media (min-width: 1100px) {
  :root { --sqy-entete: 80px; }
}

/*
 * L'en-tête figé (sous la barre d'administration) cache le haut de l'écran : un lien atteint au clavier en remontant
 * (Maj+Tab), le lien d'évitement et les ancres s'arrêtent dessous, jamais derrière (WCAG 2.4.11). 8 px de plus laissent
 * voir le contour de focus (3 px de trait, 3 px de décalage). Sur une page d'appartement, le sommaire collant s'y ajoute :
 * 57 px, une barre de 56 px (bundle.css) et sa bordure de 1 px, mesurés à 360, 375, 768, 1 024, 1 100 et 1 440 px. Les ancres
 * n'ont pas de scroll-margin-top en plus : ce serait compter deux fois (voir .sqy-bande).
 */
html {
  scroll-padding-top: calc(var(--sqy-barre-admin, 0px) + var(--sqy-entete) + 8px);
}

html:has(.sqy-sommaire) {
  scroll-padding-top: calc(var(--sqy-barre-admin, 0px) + var(--sqy-entete) + 57px + 8px);
}

/* ---------------------------------------------------------------- Lien d'évitement */

/* Caché hors de l'écran jusqu'à ce qu'il reçoive le focus (première tabulation de la page). */
.sqy-lien-evitement {
  position: fixed;
  top: calc(var(--sqy-barre-admin, 0px) + 8px);
  left: 8px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--sqy-pilule);
  background: var(--sqy-jaune);
  box-shadow: var(--sqy-ombre-2);
  color: var(--sqy-petrole);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.sqy-lien-evitement:focus {
  transform: none;
}

/* ---------------------------------------------------------------- En-tête et panneau du menu */

.sqy-entete {
  top: var(--sqy-barre-admin, 0px);
}

/* « Candidater » : 48 px de haut, comme toute cible tactile (le bouton « petit » du design en fait 40). */
.sqy-entete .sqy-bouton--petit {
  min-height: var(--sqy-cible-tactile);
}

/* Le bouton du menu montre les trois traits, puis la croix une fois le panneau ouvert. */
.sqy-entete__icone-fermer {
  display: none;
}

.sqy-entete__burger[aria-expanded="true"] .sqy-entete__icone-ouvrir {
  display: none;
}

.sqy-entete__burger[aria-expanded="true"] .sqy-entete__icone-fermer {
  display: block;
}

/*
 * Le panneau couvre l'écran sous l'en-tête. menu.js pose sa position (top) sous l'en-tête à l'ouverture, barre
 * d'administration comprise ; la valeur d'ici sert sans JavaScript. Fermé, il porte l'attribut hidden : l'attribut ne
 * suffit pas contre le « display: grid » de bundle.css.
 */
.sqy-panneau-menu {
  position: fixed;
  top: var(--sqy-entete);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 49;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sqy-panneau-menu[hidden] {
  display: none;
}

/* Pendant l'ouverture, la page derrière ne défile pas (menu.js pose la classe sur <html>). */
html.sqy-menu-ouvert {
  overflow: hidden;
}

/* Dès 1 100 px, le menu est déplié dans l'en-tête : le panneau n'existe plus. */
@media (min-width: 1100px) {
  .sqy-panneau-menu {
    display: none;
  }
}

/* Un numéro de téléphone ne se coupe jamais en fin de ligne. */
.sqy-entete__telephone,
.sqy-panneau-menu__contact a,
.sqy-pied__liens a[href^="tel:"] {
  white-space: nowrap;
}

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

.sqy-pied__bas .sqy-conteneur {
  align-items: center;
  padding-block: 6px;
}

.sqy-pied__bas a {
  display: inline-flex;
  align-items: center;
  min-height: var(--sqy-cible-tactile);
}

/* ---------------------------------------------------------------- Cibles tactiles */

/*
 * Sur un écran tactile, toute cible de texte de l'en-tête, du panneau et du pied de page fait au moins 48 px de haut,
 * quelle que soit la largeur ; bundle.css en donne 40 ou 44 à certaines (liens du pied, liens du menu, téléphone,
 * téléphone et e-mail du panneau). Sous 1 100 px (téléphone, tablette), 48 px pour tous ; au-delà, sur écran tactile
 * seulement (pointer: coarse), pour garder l'aspect du design à la souris. Le panneau du menu n'existe que sous 1 100 px.
 * « Candidater » (.sqy-entete .sqy-bouton--petit) et « Mentions légales » (.sqy-pied__bas a) sont à 48 px plus haut,
 * à toute largeur ; les boutons d'icône restent à 44 px. Chaque sélecteur est celui de bundle.css : complements.css, chargé
 * après, l'emporte. ThemeFeuillesTest garde cette liste.
 */
.sqy-panneau-menu__contact a {
  min-height: var(--sqy-cible-tactile);
}

@media (max-width: 1099px), (pointer: coarse) {
  .sqy-pied__liens a,
  .sqy-pied__liens li > span {
    min-height: var(--sqy-cible-tactile);
  }
}

@media (min-width: 1100px) and (pointer: coarse) {
  .sqy-entete__menu a,
  .sqy-entete__telephone {
    min-height: var(--sqy-cible-tactile);
  }
}

/* ---------------------------------------------------------------- Page d'un appartement : ancres et sommaire */

/*
 * Les liens du sommaire, du bandeau « chambres libres » et des chambres libres de l'accueil (« #chambre-3 ») arrivent
 * sous l'en-tête et le sommaire figés : c'est le scroll-padding-top de <html> (plus haut) qui les arrête dessous, barre
 * d'administration comprise. bundle.css donne aux bandes un scroll-margin-top de 120 px (en-tête + sommaire) : il serait
 * compté une seconde fois, il est remis à zéro.
 */
.sqy-bande {
  scroll-margin-top: 0;
}

/*
 * Le haut de la page (« sqy-hero », avec le fil d'Ariane) est une grille à colonnes automatiques : le nom d'un appartement
 * plus long que ceux d'aujourd'hui élargirait la colonne, donc la page (360 px), au lieu d'être coupé par « … »
 * (les règles du fil d'Ariane sont plus bas, avec celles des pages et des articles). Les colonnes peuvent rétrécir ;
 * dès 1 100 px, bundle.css pose lui-même deux colonnes.
 */
.sqy-hero__texte {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1099px) {
  .sqy-hero__grille {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Le sommaire se colle sous l'en-tête, lui-même posé sous la barre d'administration. */
.sqy-sommaire {
  top: calc(var(--sqy-barre-admin, 0px) + var(--sqy-entete));
}

/* Sur téléphone, un lien du sommaire est une cible de 48 px (la barre en fait 56). */
@media (max-width: 1099px), (pointer: coarse) {
  .sqy-sommaire__liens a {
    min-height: var(--sqy-cible-tactile);
  }
}

/* ---------------------------------------------------------------- Page d'un appartement : barre du bas */

/*
 * La barre « prix et Je candidate » (bundle.css : collée en bas de l'écran sous 1 100 px, cachée au-delà, le sommaire
 * prenant alors le relais) est le dernier élément de la page : une fois en bas, elle reprend sa place avant le pied de
 * page et ne cache rien. Pendant le défilement, elle couvre le bas de l'écran : un champ ou une ancre atteints au
 * clavier s'arrêtent au-dessus d'elle. Son bouton est une cible de 48 px.
 */
@media (max-width: 1099px) {
  html:has(.sqy-barre-candidature) {
    scroll-padding-bottom: 80px;
  }
}

.sqy-barre-candidature .sqy-bouton--petit {
  min-height: var(--sqy-cible-tactile);
}

/* ---------------------------------------------------------------- Page d'un appartement : carte du quartier */

/* Sans JavaScript, le cadre de la carte est vide : le texte du quartier suffit. */
@media (scripting: none) {
  [data-sqy-carte] {
    display: none;
  }
}

/*
 * Leaflet dessine dans le cadre de bundle.css (4:3, coins arrondis, fond menthe). Ses calques montent jusqu'à
 * z-index 1000 : le cadre en fait un contexte d'empilement, sans quoi la carte passerait par-dessus l'en-tête figé.
 */
.sqy-carte-quartier__fond {
  isolation: isolate;
}

.sqy-carte-quartier__fond.leaflet-container {
  background: var(--sqy-menthe-100);
  font-family: var(--font-texte);
}

/*
 * bundle.css étire tout <svg> du cadre (l'illustration de la maquette) à 100 % : ici ce serait le calque du cercle,
 * que Leaflet dimensionne lui-même (attributs width et height), et le drapeau de l'attribution.
 */
.sqy-carte-quartier__fond.leaflet-container svg {
  display: inline;
  width: auto;
  height: auto;
}

.sqy-carte-quartier__fond.leaflet-container .leaflet-attribution-flag {
  width: 1em;
  height: 0.6669em;
}

/* Boutons de zoom à 44 px pour le doigt (Leaflet en met 30). */
.sqy-carte-quartier__fond.leaflet-touch .leaflet-bar a {
  width: 44px;
  height: 44px;
  line-height: 44px;
}

/* ---------------------------------------------------------------- Page d'un appartement : photos, carrousel, vidéo */

/* Une photo agrandissable est un bloc : sans cela, l'image en ligne laisse un espace sous la ligne de base. */
[data-sqy-agrandir]:not(.sqy-bouton) {
  display: block;
  cursor: zoom-in;
}

/* Les pièces d'une rangée ont des textes de hauteurs différentes : la photo et le texte restent collés en haut. */
.sqy-piece {
  align-content: start;
}

/*
 * Pièce à plusieurs photos : une photo à la fois, sur toute la largeur. La rangée défile à l'horizontale, d'un cran par
 * photo (accrochage), au doigt comme sans JavaScript ; sans lui, sa barre de défilement reste le moyen de défiler à la
 * souris. sqy-design.js la range dans un cadre avec deux flèches et un compteur « 1 / 3 », puis masque la barre
 * (classe sqy-carrousel--active).
 */
.sqy-carrousel {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain; /* le dernier cran ne déclenche pas le « retour » du navigateur */
  scroll-snap-type: x mandatory;
  border-radius: var(--sqy-arrondi);
}

.sqy-carrousel > [data-sqy-agrandir] {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}

.sqy-carrousel--active {
  scrollbar-width: none;
}

.sqy-carrousel--active::-webkit-scrollbar {
  display: none;
}

/* La rangée rogne ce qui dépasse : le contour de focus d'une photo se dessine à l'intérieur (blanc, puis pétrole). */
.sqy-carrousel > [data-sqy-agrandir]:focus-visible {
  outline-offset: -6px;
}

.sqy-carrousel > [data-sqy-agrandir]:focus-visible img {
  outline: 3px solid var(--sqy-blanc);
  outline-offset: -3px;
}

.sqy-carrousel-cadre {
  position: relative;
}

.sqy-carrousel__fleche {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--sqy-pilule);
  background: var(--sqy-blanc);
  box-shadow: var(--sqy-ombre-1);
  color: var(--sqy-petrole);
  cursor: pointer;
  transform: translateY(-50%);
}

.sqy-carrousel__fleche--prec {
  left: 12px;
}

.sqy-carrousel__fleche--suiv {
  right: 12px;
}

.sqy-carrousel__fleche:hover:not(:disabled) {
  background: var(--sqy-petrole-100);
}

.sqy-carrousel__fleche:disabled {
  box-shadow: none;
  opacity: 0.4;
  cursor: default;
}

/* Le contour pétrole est séparé de la flèche par un anneau blanc, pour rester lisible sur la photo. */
.sqy-carrousel__fleche:focus-visible {
  outline: 3px solid var(--sqy-petrole);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--sqy-blanc);
}

.sqy-carrousel__compteur {
  position: absolute;
  bottom: 12px;
  left: 50%;
  padding: 4px 12px;
  border-radius: var(--sqy-pilule);
  background: var(--sqy-blanc);
  box-shadow: var(--sqy-ombre-1);
  color: var(--sqy-petrole);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  transform: translateX(-50%);
}

/* La vidéo : un cadre 16:9 (pétrole autour d'une vidéo d'un autre format). Sans JavaScript, ses commandes natives. */
.sqy-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

/* Avec JavaScript, l'affiche porte d'abord le bouton de lecture de bundle.css (rond jaune), puis les commandes. */
.sqy-video--facade video {
  opacity: 0.88;
}

.sqy-video__lecture:hover > span {
  background: var(--sqy-jaune-400);
}

.sqy-video__lecture:focus-visible {
  outline: 0;
}

.sqy-video__lecture:focus-visible > span {
  box-shadow: 0 0 0 3px var(--sqy-blanc), 0 0 0 6px var(--sqy-petrole);
}

/* Dans la carte d'une chambre, la vidéo suit la photo, bord à bord, avec un bouton plus petit. */
.sqy-carte-chambre .sqy-video {
  border-radius: 0;
}

.sqy-carte-chambre .sqy-video__lecture > span {
  width: 56px;
  height: 56px;
}

.sqy-carte-chambre .sqy-video__lecture .sqy-picto {
  width: 26px;
  height: 26px;
}

/* Le plan : « Agrandir le plan » est une cible de 48 px (le bouton « petit » du design en fait 40). */
.sqy-plan__pied .sqy-bouton--petit {
  min-height: var(--sqy-cible-tactile);
}

/* Les boutons sous les étapes : 40 px sous la liste, comme la maquette. */
.sqy-boutons--apres-etapes {
  margin-top: 40px;
}

/* ---------------------------------------------------------------- Photo agrandie */

/* Le dialogue que crée sqy-design.js : toute la fenêtre, la photo au centre, « fermer » en haut à droite. */
.sqy-visionneuse {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 72px 16px 16px;
  border: 0;
  background: transparent;
  color: var(--sqy-blanc);
  font-family: var(--font-texte);
}

.sqy-visionneuse[open] {
  display: grid;
  place-items: center;
}

.sqy-visionneuse::backdrop {
  background: var(--sqy-petrole);
  background: color-mix(in srgb, var(--sqy-petrole) 92%, transparent);
}

.sqy-visionneuse__figure {
  margin: 0;
  text-align: center;
}

.sqy-visionneuse__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 8rem);
  max-height: calc(100dvh - 8rem);
  margin-inline: auto;
  border-radius: var(--sqy-arrondi-petit);
  background: var(--sqy-blanc);
}

.sqy-visionneuse__legende {
  margin-top: 12px;
  font-size: 0.9375rem;
}

.sqy-visionneuse__fermer {
  position: fixed;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: var(--sqy-cible-tactile);
  height: var(--sqy-cible-tactile);
  padding: 0;
  border: 0;
  border-radius: var(--sqy-pilule);
  background: var(--sqy-jaune);
  color: var(--sqy-petrole);
  cursor: pointer;
}

.sqy-visionneuse__fermer:hover {
  background: var(--sqy-jaune-400);
}

/* Sur le fond pétrole, le contour de focus est jaune (comme .sqy-sombre dans bundle.css). */
.sqy-visionneuse :focus-visible {
  outline: 3px solid var(--sqy-jaune);
  outline-offset: 3px;
}

/* Pas de défilement de la page derrière la photo agrandie. */
html.sqy-visionneuse-ouverte {
  overflow: hidden;
}

/* ---------------------------------------------------------------- Pages et articles : fil d'Ariane, haut d'un article */

/*
 * La dernière étape du fil d'Ariane est le titre de la page, parfois très long (un article) : le fil tient sur une
 * ligne, l'accueil et la rubrique gardent leur place et le titre est coupé par « … » ; le <h1> juste dessous le donne en
 * entier, et les lecteurs d'écran lisent toute l'étape.
 * Le haut de page est une grille à une colonne : sans « minmax(0, 1fr) », la colonne s'élargirait à la longueur du
 * titre et la page défilerait à l'horizontale.
 */
.sqy-article-entete,
.sqy-entete-page__texte {
  grid-template-columns: minmax(0, 1fr);
}

.sqy-ariane ol {
  flex-wrap: nowrap;
}

.sqy-ariane li:not(:last-child) {
  flex: none;
}

.sqy-ariane li:last-child {
  min-width: 0;
  max-width: 100%;
}

.sqy-ariane li:last-child > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* L'image à la une d'un article est plus large que le texte (960 px au plus, maquette Article). */
.sqy-conteneur--image {
  max-width: calc(960px + 2 * var(--sqy-gouttiere-active));
}

/* Le texte de l'article, sous l'en-tête (et l'image) : 48 px au-dessus, 72 px au-dessous (maquette Article). */
.sqy-article-corps {
  padding-block: 48px 72px;
}

/* ---------------------------------------------------------------- Texte long : l'encadré de fin d'article */

/*
 * Chaque article se termine par un paragraphe « p.sqy-encart » (un émoji, le nom, deux liens) : bundle.css utilise
 * aussi .sqy-encart comme composant (une grille grise). Dans le texte long, il prend l'aspect de l'encadré menthe de la
 * maquette Article (.sqy-encadre : mêmes marges intérieures, même arrondi, texte pétrole), et redevient un bloc de
 * texte : en grille, chaque morceau de la phrase serait une cellule.
 */
.sqy-prose p.sqy-encart {
  display: block;
  margin-top: 2.5em;
  padding: 28px 24px;
  border-radius: var(--sqy-arrondi-grand);
  background: var(--sqy-menthe);
  color: var(--sqy-petrole);
}

@media (min-width: 768px) {
  .sqy-prose p.sqy-encart {
    padding: 40px 48px;
  }
}

/* Sur le fond menthe, le trait sous les liens de bundle.css (ciel) se verrait à peine : il suit la couleur du texte. */
.sqy-prose p.sqy-encart a {
  text-decoration-color: currentColor;
}

/* ---------------------------------------------------------------- Texte long : blocs standard de WordPress */

/*
 * bundle.css style les titres h2 et h3, les listes, les liens, les citations, les images et leur légende. Ici, le reste
 * de ce qu'un éditeur de WordPress peut poser dans une page ou un article. Les feuilles de blocs de WordPress ne sont
 * pas toujours chargées : rien ici n'en dépend, et chaque règle l'emporte sur elles quand elles le sont. Tout tient
 * dans la colonne de lecture à 375 px : un bloc large défile dans son cadre au lieu d'élargir la page.
 */

/* Le texte long commence en haut de sa colonne : un titre en premier n'a pas la marge qu'il a au milieu du texte. */
.sqy-prose > :first-child {
  margin-top: 0;
}

/*
 * Un <h1> dans le texte long a l'aspect d'un titre de section : la page a déjà le sien, dans son en-tête. Celui qui ouvre
 * le contenu est séparé par le modèle et devient le <h1> de l'en-tête (inc/Contenu.php) ; celui-ci est un <h1> écrit plus bas.
 */
.sqy-prose h1 {
  margin-top: 2.2em;
  font-family: var(--font-titres);
  font-size: clamp(1.625rem, 1.45rem + 0.7vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--sqy-petrole);
  text-wrap: balance;
}

.sqy-prose h1 + *,
.sqy-prose :is(h4, h5, h6) + * {
  margin-top: 0.6em;
}

.sqy-prose :is(h4, h5, h6) {
  margin-top: 1.5em;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--sqy-petrole);
}

/* Séparateur : un simple trait, avec de l'air autour. */
.sqy-prose hr {
  height: 0;
  margin-block: 2.2em;
  border: 0;
  border-top: 2px solid var(--sqy-ligne);
}

/* Les blocs qui en contiennent d'autres espacent leurs enfants comme le texte long lui-même, sans marge avant le premier. */
.sqy-prose :is(.wp-block-column, .wp-block-group) > * + * {
  margin-top: 1.1em;
}

.sqy-prose :is(.wp-block-column, .wp-block-group) > :first-child {
  margin-top: 0;
}

/* Colonnes : l'une sous l'autre sur téléphone, côte à côte dès 768 px. */
.sqy-prose .wp-block-columns {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

.sqy-prose .wp-block-column {
  flex: 1 1 0;
  min-width: 0;
}

@media (min-width: 768px) {
  .sqy-prose .wp-block-columns {
    flex-direction: row;
  }
}

/* Images : jamais de flottement dans une colonne de lecture ; l'alignement « centré » reste centré. */
.sqy-prose :is(.alignleft, .alignright) {
  float: none;
  margin-inline: 0;
}

.sqy-prose .aligncenter {
  margin-inline: auto;
  text-align: center;
}

.sqy-prose .aligncenter img {
  margin-inline: auto;
}

/* Galerie : les images en grille, deux par ligne dès que la colonne le permet. */
.sqy-prose .wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 12px;
}

/* Citation : la source, plus petite, sous le texte. */
.sqy-prose blockquote > * + * {
  margin-top: 0.6em;
}

.sqy-prose blockquote cite {
  display: block;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  color: var(--sqy-nuit-doux);
}

/* Boutons : les uns à côté des autres, à la ligne quand ils ne tiennent pas ; le principal est le jaune de bundle.css. */
.sqy-prose .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sqy-prose .wp-block-button__link {
  max-width: 100%;
  justify-content: center;
  text-align: center;
}

.sqy-prose .wp-block-button__link:hover {
  background: var(--sqy-jaune-400);
}

/* Le style « contour » du bloc : le bouton secondaire, un trait pétrole sur fond transparent. */
.sqy-prose .is-style-outline > .wp-block-button__link {
  border: 2px solid var(--sqy-petrole);
  background: transparent;
  box-shadow: none;
}

.sqy-prose .is-style-outline > .wp-block-button__link:hover {
  background: var(--sqy-petrole-100);
}

/* Tableau : en-tête menthe, filets fins ; un tableau trop large défile dans son cadre, la page reste fixe. */
.sqy-prose .wp-block-table {
  overflow-x: auto;
}

.sqy-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875em;
  line-height: 1.45;
}

.sqy-prose :is(th, td) {
  padding: 10px;
  border: 0;
  border-bottom: 1px solid var(--sqy-ligne);
  text-align: left;
  vertical-align: top;
}

@media (min-width: 768px) {
  .sqy-prose table {
    font-size: 0.9375em;
  }

  .sqy-prose :is(th, td) {
    padding: 10px 14px;
  }
}

.sqy-prose thead th {
  background: var(--sqy-menthe-100);
  color: var(--sqy-petrole);
  font-weight: 700;
}

/*
 * Code : un cadre gris. Les lignes se coupent plutôt que de défiler (la plupart des blocs « code » du site sont des
 * listes de chiffres : un budget, des frais) ; un mot long très au-delà de la colonne défile dans le cadre.
 */
.sqy-prose pre {
  max-width: 100%;
  overflow-x: auto;
  padding: 16px 20px;
  border-radius: var(--sqy-arrondi-petit);
  background: var(--sqy-gris);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9375rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

.sqy-prose code {
  padding: 0.1em 0.35em;
  border-radius: 6px;
  background: var(--sqy-gris);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

.sqy-prose pre code {
  padding: 0;
  background: none;
  font-size: inherit;
}

/* Intégrations (vidéo, carte) : à la largeur de la colonne, en 16:9. */
.sqy-prose iframe,
.sqy-prose video {
  display: block;
  width: 100%;
  max-width: 100%;
}

.sqy-prose .wp-block-embed iframe {
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--sqy-arrondi);
}

/* ---------------------------------------------------------------- Listes : actualités, archives, recherche, page introuvable */

/*
 * La liste d'articles (template-parts/liste-articles.php) : l'article à la une, la grille de cartes et la pagination à
 * 32 px les uns des autres (maquette Actualites). Une seule colonne, qui peut rétrécir : une carte au titre long
 * n'élargit pas la page. Le formulaire de recherche, quand il y en a un, ouvre la liste.
 */
.sqy-liste-articles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

/* La page introuvable : une phrase, puis les boutons. */
.sqy-introuvable {
  display: grid;
  gap: 24px;
}

/*
 * La carte entière est le lien (une seule cible par carte pour les lecteurs d'écran) : le contour de focus de bundle.css
 * donne 6 px de rayon à ce qui a le focus, et la carte (20 px) perdrait ses coins arrondis ; il en va de même des
 * numéros de la pagination, qui sont des pastilles.
 */
.sqy-carte:focus-visible {
  border-radius: var(--sqy-arrondi);
}

.sqy-pagination :focus-visible {
  border-radius: var(--sqy-pilule);
}

/* Pagination : les numéros et « Suivant » sont des cibles de 48 px, comme le reste du thème (le design en met 44). */
.sqy-pagination a,
.sqy-pagination span {
  min-width: var(--sqy-cible-tactile);
  height: var(--sqy-cible-tactile);
}

/*
 * Le formulaire de recherche : l'étiquette au-dessus, puis le champ et le bouton sur une ligne. Le champ prend la place
 * restante (« width: auto » : bundle.css lui donne toute la largeur) et le bouton passe dessous quand elle manque, à
 * 375 px par exemple.
 */
.sqy-recherche {
  max-width: 40rem;
}

.sqy-recherche__ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sqy-recherche__ligne .sqy-saisie {
  flex: 1 1 14rem;
  width: auto;
  min-width: 0;
}

/* ---------------------------------------------------------------- Accueil et Logements */

/* Le lien à droite du titre d'une section (« Tous les logements », « Tout savoir sur la location… ») : une cible de 48 px. */
.sqy-titre-section > .sqy-lien-fleche {
  min-height: var(--sqy-cible-tactile);
}

/*
 * La bande jaune (« Comment ça marche ») : le lien de section y est souligné de jaune (bundle.css), donc sans soulignement visible, et
 * sur deux lignes (375 px) sa flèche, élément à part du « inline-flex », restait seule à l'extrémité droite. Ici le soulignement est
 * pétrole, le texte s'écoule comme un bloc (la cible de 48 px de la règle précédente reste) et la flèche suit le dernier mot.
 * Un sélecteur local : le composant « lien fléché » des autres bandes ne change pas.
 */
.sqy-bande--jaune .sqy-titre-section > .sqy-lien-fleche {
  display: block;
  padding-block: 11px;
  text-decoration-color: var(--sqy-petrole);
}

.sqy-bande--jaune .sqy-titre-section > .sqy-lien-fleche .sqy-picto {
  display: inline-block;
  vertical-align: -4px;
  margin-left: 6px;
}

/* « Par ville » (Logements) : le lien du titre d'une carte est une cible de 48 px, même si le titre tient sur deux lignes. */
.sqy-carte-info .sqy-h3 > a {
  display: inline-flex;
  align-items: center;
  min-height: var(--sqy-cible-tactile);
}

/*
 * L'appel final (template-parts/appel-final.php) : sur le fond pétrole, le chapeau est blanc. La maquette le pose par un
 * style en ligne (« color: var(--sqy-blanc) ») ; bundle.css ne met en blanc que les titres et les liens de la bande, et
 * le chapeau y garde le gris-bleu des textes sur fond clair.
 */
.sqy-bande--petrole .sqy-chapeau {
  color: var(--sqy-blanc);
}

/* ---------------------------------------------------------------- Comment ça marche */

/*
 * Le signe « sans visite » sous les étapes : blanc sur la bande jaune de l'accueil, mais sur le fond blanc de cette page la
 * maquette le teinte en menthe pâle par un style en ligne, que le thème n'écrit pas.
 */
.sqy-bande:not(.sqy-bande--jaune) .sqy-signe-sans-visite {
  background: var(--sqy-menthe-100);
}

/* Sans l'exemple chiffré (pas de prix), le texte du loyer n'a plus de colonne voisine : une colonne de lecture. */
@media (min-width: 1100px) {
  .sqy-inclus--seul {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sqy-inclus--seul .sqy-inclus__texte {
  max-width: var(--sqy-largeur-lecture);
}

/* ---------------------------------------------------------------- Candidater : la page */

/*
 * La carte et la colonne d'aide : sous 1 100 px une seule colonne, qui peut rétrécir (l'adresse e-mail longue d'un champ ne
 * doit rien pousser). Au-dessus, bundle.css pose les deux colonnes.
 */
@media (max-width: 1099px) {
  .sqy-candidature {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sqy-candidature__aide {
  min-width: 0;
}

/* La carte porte le titre puis le formulaire de Contact Form 7 (la maquette en fait un seul <form>). */
.sqy-formulaire__carte {
  display: grid;
  gap: 22px;
  min-width: 0;
}

/* Le lien d'un encart (« Comment ça marche ») : une cible de 48 px. */
.sqy-encart .sqy-lien-fleche {
  min-height: var(--sqy-cible-tactile);
}

/* ---------------------------------------------------------------- Candidater : le formulaire de Contact Form 7 */

/*
 * Le gabarit du formulaire (n° 40) est celui du site et ne change pas : « .sqy-formulaire », « .sqy-champ », « .sqy-choix »,
 * « .sqy-aide », « .sqy-envoi » et « .sqy-note », autour du balisage de Contact Form 7 (paragraphes, <span> « wpcf7-… »).
 * Les règles ci-dessous donnent à ce balisage l'aspect du composant « Formulaire » de bundle.css.
 */

/* Ce que la feuille de Contact Form 7 cacherait : les champs de service et le pivot de chargement. */
.wpcf7 .hidden-fields-container {
  display: none;
}

/* Le pivot de Contact Form 7 reste caché hors de l'envoi ; pendant l'envoi, il devient le signe d'attente (voir « L'envoi »). */
.wpcf7 .wpcf7-spinner {
  display: none;
}

/* La réponse lue à voix haute (aria-live) : hors de l'écran, mais dans la page. */
.wpcf7 .screen-reader-response {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
}

/* Un champ : l'étiquette au-dessus du contrôle, que Contact Form 7 range ensemble dans un paragraphe. */
.sqy-formulaire .sqy-champ > p:not(.sqy-aide) {
  display: grid;
  gap: 8px;
}

.sqy-formulaire .sqy-champ > p > label {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--sqy-nuit);
}

.sqy-formulaire .wpcf7-form-control-wrap {
  position: relative;
  display: block;
  min-width: 0;
}

.sqy-formulaire .sqy-aide {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--sqy-nuit-doux);
}

/* Les contrôles : ceux de « .sqy-saisie » (52 px de haut, 16 px de police : en dessous, iOS agrandit la page au focus). */
.sqy-formulaire input[type="text"],
.sqy-formulaire input[type="email"],
.sqy-formulaire input[type="tel"],
.sqy-formulaire input[type="date"],
.sqy-formulaire select,
.sqy-formulaire textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 1.5px solid var(--sqy-bordure-champ);
  border-radius: var(--sqy-arrondi-petit);
  background: var(--sqy-blanc);
  font-family: var(--font-texte);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--sqy-nuit);
  -webkit-appearance: none;
  appearance: none;
}

.sqy-formulaire input[type="text"]:focus,
.sqy-formulaire input[type="email"]:focus,
.sqy-formulaire input[type="tel"]:focus,
.sqy-formulaire input[type="date"]:focus,
.sqy-formulaire select:focus,
.sqy-formulaire textarea:focus {
  outline: 3px solid var(--sqy-petrole);
  outline-offset: 2px;
  border-color: var(--sqy-petrole);
}

.sqy-formulaire textarea::placeholder {
  color: var(--sqy-nuit-doux);
  opacity: 1;
}

/* Le gabarit demande dix lignes (rows) : la hauteur du design est de 132 px. */
.sqy-formulaire textarea {
  height: 8.25rem;
  resize: vertical;
}

/* La liste déroulante : sans flèche native, un chevron pétrole tracé par la case qui l'enveloppe. */
.sqy-formulaire select {
  padding-right: 48px;
  cursor: pointer;
}

.sqy-formulaire .wpcf7-form-control-wrap:has(> select)::after {
  content: "";
  position: absolute;
  top: 19px;
  right: 20px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--sqy-petrole);
  border-bottom: 2px solid var(--sqy-petrole);
  transform: rotate(45deg);
  pointer-events: none;
}

/*
 * Les choix (Ta situation, garant) : le « .sqy-choix » du gabarit est sur le <fieldset>, et les tuiles sont les <span> de
 * Contact Form 7 (« .wpcf7-list-item-label ») dans l'étiquette : la tuile du design est donc le <span>, et la coche se lit
 * sur lui (« input:checked + span »), sans :has(). Autant de colonnes que la place le permet : deux, ou quatre dès que la
 * carte est assez large.
 */
.sqy-formulaire fieldset.sqy-choix {
  grid-template-columns: minmax(0, 1fr);
}

.sqy-formulaire .wpcf7-radio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 10px;
}

.sqy-formulaire .wpcf7-list-item {
  display: block;
  margin: 0;
}

/* La feuille de Contact Form 7, si elle était chargée, écrirait une espace avant et après le texte du choix : un vide de plus dans la tuile. */
.sqy-formulaire .wpcf7-list-item-label::before,
.sqy-formulaire .wpcf7-list-item-label::after {
  content: none;
}

/* L'étiquette n'est plus la tuile : elle l'enveloppe seulement (bundle.css en fait une tuile). */
.sqy-formulaire .sqy-choix .wpcf7-list-item label {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.sqy-formulaire .wpcf7-list-item-label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 14px;
  border: 1.5px solid var(--sqy-bordure-champ);
  border-radius: var(--sqy-arrondi-petit);
  background: var(--sqy-blanc);
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
}

.sqy-formulaire .wpcf7-list-item input:checked + .wpcf7-list-item-label {
  border-color: var(--sqy-petrole);
  background: var(--sqy-menthe-100);
  box-shadow: inset 0 0 0 1px var(--sqy-petrole);
  color: var(--sqy-petrole);
}

.sqy-formulaire .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label {
  outline: 3px solid var(--sqy-petrole);
  outline-offset: 2px;
}

/*
 * Les pictogrammes des deux premières tuiles (Études, Vie active) : le balisage n'en porte pas, ils sont posés ici par
 * masque, depuis les SVG de l'extension (même couleur que dans le design : pétrole). L'adresse part de ce fichier, qui est
 * dans wp-content/themes/sqy-coloc-theme/assets/css/ : quatre dossiers plus haut, wp-content. Sans l'extension, le masque
 * ne trouve rien et la tuile reste lisible (un carré vide de 26 px à gauche du mot).
 */
.sqy-formulaire .wpcf7-list-item input[value="\C9tudes"] + .wpcf7-list-item-label::before,
.sqy-formulaire .wpcf7-list-item input[value="Vie active"] + .wpcf7-list-item-label::before {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  background: var(--sqy-petrole);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.sqy-formulaire .wpcf7-list-item input[value="\C9tudes"] + .wpcf7-list-item-label::before {
  -webkit-mask-image: url("../../../../plugins/sqy-coloc/assets/pictos/etudes.svg");
  mask-image: url("../../../../plugins/sqy-coloc/assets/pictos/etudes.svg");
}

.sqy-formulaire .wpcf7-list-item input[value="Vie active"] + .wpcf7-list-item-label::before {
  -webkit-mask-image: url("../../../../plugins/sqy-coloc/assets/pictos/vie-active.svg");
  mask-image: url("../../../../plugins/sqy-coloc/assets/pictos/vie-active.svg");
}

/*
 * Un champ qui n'est pas valide (Contact Form 7 pose « wpcf7-not-valid » sur lui et son message juste dessous) : bordure
 * d'erreur sur le champ, ou sur chaque tuile quand c'est un groupe de choix (le groupe lui-même n'a pas de bordure).
 */
.sqy-formulaire input.wpcf7-not-valid,
.sqy-formulaire select.wpcf7-not-valid,
.sqy-formulaire textarea.wpcf7-not-valid {
  border-color: var(--sqy-erreur);
  box-shadow: inset 0 0 0 1px var(--sqy-erreur);
}

.sqy-formulaire .wpcf7-radio.wpcf7-not-valid .wpcf7-list-item-label {
  border-color: var(--sqy-erreur);
}

.sqy-formulaire .wpcf7-not-valid-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sqy-erreur);
}

/* Le pictogramme d'erreur, comme « .sqy-champ__erreur » : le message ne tient pas à la couleur seule. */
.sqy-formulaire .wpcf7-not-valid-tip::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
  -webkit-mask-image: url("../../../../plugins/sqy-coloc/assets/pictos/erreur.svg");
  mask-image: url("../../../../plugins/sqy-coloc/assets/pictos/erreur.svg");
}

/* L'envoi : le bouton du gabarit n'a que « sqy-bouton » ; il prend l'aspect du bouton principal. */
.sqy-formulaire .wpcf7-submit {
  background: var(--sqy-jaune);
  border-color: var(--sqy-jaune);
  color: var(--sqy-petrole);
  box-shadow: var(--sqy-ombre-1);
  -webkit-appearance: none;
  appearance: none;
}

.sqy-formulaire .wpcf7-submit:hover {
  background: var(--sqy-jaune-400);
  border-color: var(--sqy-jaune-400);
}

.wpcf7 form[data-status="submitting"] .wpcf7-submit {
  cursor: progress;
}

/*
 * Pendant l'envoi, Contact Form 7 pose data-status="submitting" sur le <form> et son script a glissé un <span class="wpcf7-spinner">
 * juste après le bouton. Le curseur « progress » ne se voit pas au toucher : le <span> devient un signe d'attente, sous le bouton,
 * un anneau et un texte (le texte dit l'état sans le mouvement ni la couleur). Les règles de la feuille de Contact Form 7, si elle
 * est chargée (disque sombre de 24 px, point qui tourne, visibility), sont remplacées : les sélecteurs sont plus spécifiques.
 * Sous mouvement réduit l'anneau reste fixe (voir la fin de la feuille).
 */
.wpcf7 form[data-status="submitting"] .wpcf7-spinner {
  display: flex;
  align-items: center;
  gap: 10px;
  visibility: visible;
  width: auto;
  height: auto;
  margin: 12px 0 0;
  background: none;
  opacity: 1;
  font-weight: 600;
  line-height: 1.3;
  color: var(--sqy-petrole);
}

.wpcf7 form[data-status="submitting"] .wpcf7-spinner::before {
  content: "";
  position: static;
  flex: none;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  background: none;
  border: 3px solid var(--sqy-petrole-100);
  border-top-color: var(--sqy-petrole);
  border-radius: 50%;
  animation: sqy-envoi-tourne 0.9s linear infinite;
}

.wpcf7 form[data-status="submitting"] .wpcf7-spinner::after {
  content: "Envoi en cours…";
}

@keyframes sqy-envoi-tourne {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/*
 * Le message de réponse, sous le formulaire : caché tant qu'il est vide ou que le formulaire n'a rien envoyé (« data-status »
 * du <form>), vert une fois la candidature envoyée, rouge pour un champ invalide, un envoi refusé ou en échec. Les sélecteurs
 * ont la spécificité de ceux de la feuille de Contact Form 7 (« .wpcf7 form .wpcf7-response-output »), au cas où elle serait
 * chargée : celle du thème, qui vient après, l'emporte alors.
 */
.wpcf7 form .wpcf7-response-output {
  margin: 22px 0 0;
  padding: 14px 18px;
  border: 1.5px solid var(--sqy-petrole);
  border-radius: var(--sqy-arrondi-petit);
  font-weight: 600;
  line-height: 1.45;
  color: var(--sqy-petrole);
}

.wpcf7 form .wpcf7-response-output:empty,
.wpcf7 form[data-status="init"] .wpcf7-response-output,
.wpcf7 form[data-status="resetting"] .wpcf7-response-output,
.wpcf7 form[data-status="submitting"] .wpcf7-response-output {
  display: none;
}

.wpcf7 form[data-status="sent"] .wpcf7-response-output {
  border-color: var(--sqy-menthe-900);
  background: var(--sqy-menthe-100);
  color: var(--sqy-menthe-900);
}

.wpcf7 form[data-status="invalid"] .wpcf7-response-output,
.wpcf7 form[data-status="unaccepted"] .wpcf7-response-output,
.wpcf7 form[data-status="spam"] .wpcf7-response-output,
.wpcf7 form[data-status="aborted"] .wpcf7-response-output,
.wpcf7 form[data-status="failed"] .wpcf7-response-output,
.wpcf7 form[data-status="payment-required"] .wpcf7-response-output {
  border-color: var(--sqy-erreur);
  background: var(--sqy-erreur-pale);
  color: var(--sqy-erreur);
}

/*
 * La mise en page du formulaire dès 768 px : deux colonnes, chaque bloc sur toute la ligne sauf l'appartement et la date, l'e-mail
 * et le téléphone (côte à côte), puis le bouton et sa note. Les champs sont repérés par leur type : le gabarit ne leur donne
 * pas de classe de plus. Sans :has() (navigateur ancien), chaque champ garde toute la ligne : la page reste utilisable.
 * Le groupe de l'identité (prénom et nom, e-mail, téléphone, message) est séparé des choix par un filet, comme dans le design.
 */
.sqy-formulaire fieldset.sqy-choix + div.sqy-champ {
  padding-top: 22px;
  border-top: 1px solid var(--sqy-ligne);
}

@media (min-width: 768px) {
  .sqy-formulaire {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
  }

  .sqy-formulaire > * {
    grid-column: 1 / -1;
  }

  .sqy-formulaire > .sqy-envoi,
  .sqy-formulaire > .sqy-note {
    grid-column: auto;
  }

  .sqy-formulaire > .sqy-note {
    align-self: center;
  }

  .sqy-formulaire > .sqy-champ:has(select) {
    grid-column: auto;
  }

  .sqy-formulaire > .sqy-champ:has(input[type="date"]) {
    grid-column: auto;
  }

  .sqy-formulaire > .sqy-champ:has(input[type="email"]) {
    grid-column: auto;
  }

  .sqy-formulaire > .sqy-champ:has(input[type="tel"]) {
    grid-column: auto;
  }
}

/* ---------------------------------------------------------------- Mouvement réduit */

/*
 * bundle.css coupe déjà transitions et animations sous .sqy. Ici, le défilement de la rangée de photos et les
 * animations de Leaflet (que sqy-design.js coupe aussi à la création de la carte), au cas où une règle plus
 * spécifique en remettrait.
 */
@media (prefers-reduced-motion: reduce) {
  .sqy-carrousel {
    scroll-behavior: auto;
  }

  /* L'anneau de l'envoi reste fixe : le texte « Envoi en cours… » dit l'état. (Contact Form 7 le ferait clignoter.) */
  .wpcf7 form[data-status="submitting"] .wpcf7-spinner::before {
    animation: none;
  }

  .leaflet-zoom-anim .leaflet-zoom-animated,
  .leaflet-fade-anim .leaflet-tile,
  .leaflet-fade-anim .leaflet-popup {
    transition: none !important;
  }
}