/*
 * SQY Coloc — composants du thème (téléphone d'abord).
 *
 * Se charge après tokens.css, qui déclare les jetons --sqy-*, --font-titres et --font-texte. Aucune valeur de couleur
 * en dur ici, sauf les transparences d'ombre et les dessins en data: (toit, flèche de liste déroulante), qui reprennent
 * le pétrole #104868. Points de rupture : 768 px (tablette) et 1 100 px (ordinateur).
 *
 * Tout est rangé sous des classes « sqy- ». La racine d'une page porte la classe « sqy ».
 */

/* ---------------------------------------------------------------- Base */

.sqy {
  --sqy-picto-fond: var(--sqy-menthe);
  --sqy-picto-fond-opacite: 1;
  --sqy-gouttiere-active: 20px;
  margin: 0;
  background: var(--sqy-blanc);
  color: var(--sqy-nuit);
  font-family: var(--font-texte);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

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

.sqy img,
.sqy video {
  display: block;
  max-width: 100%;
  height: auto;
}

.sqy :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) {
  margin: 0;
}

.sqy :where(ul, ol) {
  padding: 0;
  list-style: none;
}

:where(.sqy) a {
  color: var(--sqy-petrole);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.sqy :focus-visible {
  outline: 3px solid var(--sqy-petrole);
  outline-offset: 3px;
  border-radius: 6px;
}

.sqy-sombre :focus-visible {
  outline-color: var(--sqy-jaune);
}

.sqy strong,
.sqy b {
  font-weight: 700;
}

.sqy-chiffres {
  font-variant-numeric: tabular-nums;
}

.sqy-visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .sqy { --sqy-gouttiere-active: 32px; }
}

@media (min-width: 1100px) {
  .sqy { --sqy-gouttiere-active: 40px; font-size: 17px; }
}

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

/* ---------------------------------------------------------------- Mise en page */

.sqy-conteneur {
  width: 100%;
  max-width: calc(var(--sqy-largeur) + 2 * var(--sqy-gouttiere-active));
  margin-inline: auto;
  padding-inline: var(--sqy-gouttiere-active);
}

.sqy-conteneur--lecture {
  max-width: calc(var(--sqy-largeur-lecture) + 2 * var(--sqy-gouttiere-active));
}

/* Une bande va d'un bord à l'autre ; son contenu est dans un .sqy-conteneur. */
.sqy-bande {
  padding-block: var(--sqy-espace-8);
  scroll-margin-top: calc(var(--sqy-entete) + 56px);
}

.sqy-bande--serree { padding-block: var(--sqy-espace-7); }
.sqy-bande--gris { background: var(--sqy-gris); }
.sqy-bande--menthe-pale { background: var(--sqy-menthe-100); }
.sqy-bande--ciel-pale { background: var(--sqy-ciel-100); }
.sqy-bande--jaune-pale { background: var(--sqy-jaune-100); }
.sqy-bande--menthe { background: var(--sqy-menthe); }
.sqy-bande--jaune { background: var(--sqy-jaune); }

.sqy-bande--petrole {
  --sqy-picto-fond: var(--sqy-jaune);
  background: var(--sqy-petrole);
  color: var(--sqy-blanc);
}

.sqy-bande--petrole :is(h1, h2, h3, h4, .sqy-h2, .sqy-h3, .sqy-etiquette) {
  color: var(--sqy-blanc);
}

.sqy-bande--petrole a:not(.sqy-bouton) {
  color: var(--sqy-blanc);
}

.sqy-bande--arrondie {
  border-radius: 0 0 var(--sqy-arrondi-grand) var(--sqy-arrondi-grand);
}

@media (min-width: 1100px) {
  .sqy-bande { padding-block: var(--sqy-espace-9); }
  .sqy-bande--serree { padding-block: var(--sqy-espace-8); }
  .sqy-bande--arrondie { border-radius: 0 0 48px 48px; }
}

.sqy-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sqy-espace-4);
}

@media (min-width: 768px) {
  .sqy-grille { gap: var(--sqy-espace-5); }
  .sqy-grille--2,
  .sqy-grille--3,
  .sqy-grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .sqy-grille { gap: var(--sqy-espace-6) var(--sqy-espace-5); }
  .sqy-grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sqy-grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Titre de section : surtitre, h2, chapeau ; un lien peut se placer à droite sur ordinateur. */
/* Deux colonnes inégales sur ordinateur (contenu principal, complément) ; une seule sur téléphone. */
.sqy-colonnes {
  display: grid;
  gap: 32px;
}

@media (min-width: 1100px) {
  .sqy-colonnes { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; gap: 48px; }
}

/* Liste nom / valeur (surfaces des pièces, détails chiffrés). */
.sqy-liste-valeurs li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding-block: 8px;
  border-bottom: 1px solid var(--sqy-ligne);
  font-variant-numeric: tabular-nums;
}

.sqy-liste-valeurs li > :last-child {
  font-weight: 700;
  color: var(--sqy-petrole);
}

.sqy-liste-valeurs li:last-child {
  border-bottom: 0;
}

.sqy-titre-section {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sqy-espace-4) var(--sqy-espace-6);
  margin-bottom: var(--sqy-espace-6);
}

.sqy-titre-section__texte {
  display: grid;
  gap: var(--sqy-espace-3);
  max-width: 46rem;
}

.sqy-titre-section--centre {
  justify-content: center;
  text-align: center;
}

.sqy-titre-section--centre .sqy-titre-section__texte {
  justify-items: center;
}

@media (min-width: 1100px) {
  .sqy-titre-section { margin-bottom: var(--sqy-espace-7); }
}

/* ---------------------------------------------------------------- Typographie */

.sqy-display,
.sqy-h1,
.sqy-h2,
.sqy-h3 {
  font-family: var(--font-titres);
  font-weight: 600;
  color: var(--sqy-petrole);
  text-wrap: balance;
}

.sqy-display {
  font-size: clamp(2.375rem, 1.55rem + 3.1vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.sqy-h1 {
  font-size: clamp(2.125rem, 1.65rem + 1.9vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.sqy-h2 {
  font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
}

.sqy-h3 {
  font-size: clamp(1.375rem, 1.3rem + 0.3vw, 1.5rem);
  line-height: 1.2;
}

.sqy-h4 {
  font-family: var(--font-texte);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--sqy-petrole);
}

.sqy-chapeau {
  font-size: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  color: var(--sqy-nuit);
  text-wrap: pretty;
}

.sqy-petit {
  font-size: 0.9375rem;
  line-height: 1.5;
}

.sqy-legende {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sqy-nuit-doux);
}

.sqy-note {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--sqy-nuit-doux);
}

.sqy-etiquette {
  font-family: var(--font-texte);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sqy-petrole);
}

.sqy-prix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  color: var(--sqy-petrole);
  font-variant-numeric: tabular-nums;
}

.sqy-prix strong {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
}

.sqy-prix span {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sqy-nuit-doux);
}

.sqy-prix--petit strong {
  font-size: 1.25rem;
}

.sqy-prix--grand strong {
  font-size: clamp(2rem, 1.7rem + 1.2vw, 2.5rem);
}

.sqy-prix--grand span {
  font-size: 1rem;
  color: var(--sqy-petrole);
}

/* ---------------------------------------------------------------- Pictogrammes */

/* Pictogrammes Phosphor « duotone » : un trait (currentColor) et un fond (--sqy-picto-fond, plein). */
.sqy-picto {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.sqy-picto-fond {
  fill: var(--sqy-picto-fond, currentColor);
  opacity: var(--sqy-picto-fond-opacite, 0.2);
}

.sqy-fond-menthe { --sqy-picto-fond: var(--sqy-menthe); }
.sqy-fond-ciel { --sqy-picto-fond: var(--sqy-ciel); }
.sqy-fond-jaune { --sqy-picto-fond: var(--sqy-jaune); }

/* Tuile : un carré arrondi teinté qui porte un pictogramme. La teinte de la tuile et le fond du pictogramme sont de la
   même couleur (menthe par défaut). */
.sqy-tuile-picto {
  --sqy-picto-fond: var(--sqy-menthe);
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--sqy-arrondi-petit);
  background: var(--sqy-menthe-100);
  color: var(--sqy-petrole);
}

.sqy-tuile-picto .sqy-picto {
  width: 28px;
  height: 28px;
}

.sqy-tuile-picto--ciel { --sqy-picto-fond: var(--sqy-ciel); background: var(--sqy-ciel-100); }
.sqy-tuile-picto--jaune { --sqy-picto-fond: var(--sqy-jaune); background: var(--sqy-jaune-100); }
.sqy-tuile-picto--blanc { background: var(--sqy-blanc); }

.sqy-tuile-picto--grande {
  width: 64px;
  height: 64px;
  border-radius: 18px;
}

.sqy-tuile-picto--grande .sqy-picto {
  width: 36px;
  height: 36px;
}

.sqy-tuile-picto--petite {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.sqy-tuile-picto--petite .sqy-picto {
  width: 22px;
  height: 22px;
}

/* ---------------------------------------------------------------- Boutons et liens */

.sqy-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--sqy-cible-tactile);
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: var(--sqy-pilule);
  font-family: var(--font-texte);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.sqy-bouton .sqy-picto {
  width: 20px;
  height: 20px;
}

.sqy-bouton:active {
  transform: translateY(1px);
}

.sqy-bouton--principal {
  --sqy-picto-fond: var(--sqy-blanc);
  background: var(--sqy-jaune);
  border-color: var(--sqy-jaune);
  color: var(--sqy-petrole);
  box-shadow: 0 2px 0 rgba(16, 72, 104, 0.22);
}

.sqy-bouton--principal:hover {
  background: var(--sqy-jaune-400);
  border-color: var(--sqy-jaune-400);
}

.sqy-bouton--secondaire {
  background: var(--sqy-blanc);
  border-color: var(--sqy-petrole);
  color: var(--sqy-petrole);
}

.sqy-bouton--secondaire:hover {
  background: var(--sqy-petrole-100);
}

.sqy-bouton--sombre {
  --sqy-picto-fond: var(--sqy-jaune);
  background: var(--sqy-petrole);
  border-color: var(--sqy-petrole);
  color: var(--sqy-blanc);
}

.sqy-bouton--sombre:hover {
  background: var(--sqy-petrole-900);
  border-color: var(--sqy-petrole-900);
}

/* Sur fond pétrole : contour blanc. */
.sqy-bouton--clair {
  background: transparent;
  border-color: var(--sqy-blanc);
  color: var(--sqy-blanc);
}

.sqy-bouton--clair:hover {
  background: rgba(255, 255, 255, 0.12);
}

.sqy-bouton--petit {
  min-height: 40px;
  padding: 8px 18px;
  font-size: 0.9375rem;
}

.sqy-bouton--pleine-largeur {
  display: flex;
  width: 100%;
}

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

@media (max-width: 479px) {
  .sqy-boutons--empiles > .sqy-bouton {
    flex: 1 1 100%;
  }
}

/* Lien fléché : un texte souligné de jaune et une flèche qui avance au survol. */
.sqy-lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--sqy-petrole);
  text-decoration: underline;
  text-decoration-color: var(--sqy-jaune);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.sqy-lien-fleche .sqy-picto {
  width: 18px;
  height: 18px;
  transition: transform 0.15s ease;
}

.sqy-lien-fleche:hover .sqy-picto {
  transform: translateX(3px);
}

/* Bouton d'icône seul (menu, fermer, agrandir) : 44 px, libellé dans aria-label. */
.sqy-bouton-icone {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--sqy-pilule);
  background: transparent;
  color: var(--sqy-petrole);
  cursor: pointer;
}

.sqy-bouton-icone:hover {
  background: var(--sqy-petrole-100);
}

.sqy-bouton-icone--blanc {
  background: var(--sqy-blanc);
  box-shadow: var(--sqy-ombre-1);
}

/* ---------------------------------------------------------------- Pastilles et chiffres clés */

.sqy-pastille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 12px;
  border-radius: var(--sqy-pilule);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.sqy-pastille .sqy-picto {
  width: 18px;
  height: 18px;
}

/* La pastille d'état porte une pastille de couleur et un mot : la couleur n'est jamais seule. */
.sqy-pastille--libre,
.sqy-pastille--bientot,
.sqy-pastille--occupee {
  padding-left: 10px;
}

.sqy-pastille--libre::before,
.sqy-pastille--bientot::before,
.sqy-pastille--occupee::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.sqy-pastille--libre { background: var(--sqy-menthe-100); color: var(--sqy-menthe-900); }
.sqy-pastille--bientot { background: var(--sqy-ciel-100); color: var(--sqy-ciel-800); }
.sqy-pastille--occupee { background: var(--sqy-gris); color: var(--sqy-nuit-doux); }
.sqy-pastille--occupee::before { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }

.sqy-pastille--blanche {
  background: var(--sqy-blanc);
  color: var(--sqy-petrole);
  box-shadow: var(--sqy-ombre-1);
}

.sqy-pastille--jaune { background: var(--sqy-jaune); color: var(--sqy-petrole); }
.sqy-pastille--contour { background: transparent; color: var(--sqy-petrole); box-shadow: inset 0 0 0 1px var(--sqy-ligne); }

.sqy-pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Chiffres clés d'un appartement : pictogramme + valeur. */
.sqy-faits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--sqy-nuit);
  font-variant-numeric: tabular-nums;
}

.sqy-faits li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sqy-faits .sqy-picto {
  width: 20px;
  height: 20px;
  color: var(--sqy-petrole);
}

/* Arguments en une ligne (tout inclus, sans frais d'agence, éligible CAF). */
.sqy-atouts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  font-weight: 600;
  color: var(--sqy-petrole);
}

.sqy-atouts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sqy-atouts .sqy-picto {
  width: 22px;
  height: 22px;
}

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

.sqy-entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--sqy-blanc);
  border-bottom: 1px solid var(--sqy-ligne);
}

.sqy-entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--sqy-entete);
}

.sqy-entete__logo {
  display: block;
  flex: none;
}

.sqy-entete__logo img {
  width: auto;
  height: 44px;
}

.sqy-entete__menu {
  display: none;
}

.sqy-entete__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sqy-entete__telephone {
  display: none;
}

@media (min-width: 1100px) {
  .sqy { --sqy-entete: 80px; }
  .sqy-entete__logo img { height: 54px; }

  .sqy-entete__menu {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-inline: auto 8px;
  }

  .sqy-entete__menu a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: var(--sqy-pilule);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sqy-nuit);
    text-decoration: none;
  }

  .sqy-entete__menu a:hover {
    background: var(--sqy-gris);
    color: var(--sqy-petrole);
  }

  .sqy-entete__menu a[aria-current="page"] {
    color: var(--sqy-petrole);
  }

  .sqy-entete__menu a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 3px;
    border-radius: 2px;
    background: var(--sqy-jaune);
  }

  .sqy-entete__telephone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding-inline: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sqy-petrole);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
  }

  .sqy-entete__telephone .sqy-picto { width: 20px; height: 20px; }
  .sqy-entete__burger { display: none; }
}

/* Panneau du menu sur téléphone (ouvert par le bouton « Menu »). */
.sqy-panneau-menu {
  --sqy-picto-fond-opacite: 0;
  display: grid;
  align-content: start;
  gap: 24px;
  padding: 8px var(--sqy-gouttiere-active) 32px;
  background: var(--sqy-blanc);
}

.sqy-panneau-menu__liens a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  border-bottom: 1px solid var(--sqy-ligne);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--sqy-petrole);
  text-decoration: none;
}

.sqy-panneau-menu__liens a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--sqy-jaune);
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}

.sqy-panneau-menu__contact {
  display: grid;
  gap: 4px;
  padding: 16px 20px;
  border-radius: var(--sqy-arrondi);
  background: var(--sqy-gris);
}

.sqy-panneau-menu__contact a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
}

.sqy-panneau-menu__contact .sqy-picto { width: 22px; height: 22px; }

/* ---------------------------------------------------------------- Fil d'Ariane */

.sqy-ariane ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sqy-nuit-doux);
}

.sqy-ariane li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sqy-ariane li + li::before {
  content: "›";
  color: var(--sqy-nuit-doux);
}

.sqy-ariane a {
  color: var(--sqy-petrole);
}

/* ---------------------------------------------------------------- En-têtes de page */

/* Le toit du logo, tracé au-dessus d'une photo d'en-tête. */
.sqy-sous-toit {
  position: relative;
  padding-top: 15.5%;
}

.sqy-sous-toit::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: -5%;
  right: -5%;
  aspect-ratio: 400 / 64;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 64' preserveAspectRatio='none'%3E%3Cpath d='M8 57 C70 42 140 24 192 9 Q200 6 208 9 C262 24 330 40 392 53' fill='none' stroke='%23104868' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.sqy-sous-toit > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--sqy-arrondi);
  box-shadow: var(--sqy-ombre-3);
}

/* En-tête de l'accueil et des appartements : bande menthe arrondie, texte et photo. */
.sqy-hero {
  padding-block: 28px 56px;
}

.sqy-hero__grille {
  display: grid;
  gap: 40px;
}

.sqy-hero__texte {
  display: grid;
  align-content: center;
  gap: 20px;
}

.sqy-hero__visuel {
  position: relative;
  padding-inline: 4%;
}

.sqy-hero__flottant {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: -28px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 12px;
  border-radius: 18px;
  background: var(--sqy-blanc);
  box-shadow: var(--sqy-ombre-2);
  color: var(--sqy-petrole);
}

.sqy-hero__flottant strong {
  display: block;
  font-size: 1rem;
  line-height: 1.25;
}

.sqy-hero__flottant span {
  font-size: 0.875rem;
  color: var(--sqy-nuit-doux);
}

@media (min-width: 1100px) {
  .sqy-hero { padding-block: 48px 96px; }

  .sqy-hero__grille {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: 72px;
  }

  .sqy-hero__texte { gap: 24px; }
  .sqy-hero__flottant { left: -12px; bottom: -32px; }
}

/* En-tête des autres pages : bande teintée plus basse, titre et chapeau. */
.sqy-entete-page {
  padding-block: 28px 48px;
}

.sqy-entete-page__texte {
  display: grid;
  gap: 16px;
  max-width: 48rem;
}

@media (min-width: 1100px) {
  .sqy-entete-page { padding-block: 40px 72px; }
  .sqy-entete-page__texte { gap: 20px; }
}

/* ---------------------------------------------------------------- Cartes */

.sqy-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--sqy-ligne);
  border-radius: var(--sqy-arrondi);
  background: var(--sqy-blanc);
  box-shadow: var(--sqy-ombre-1);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.sqy-carte:hover {
  box-shadow: var(--sqy-ombre-2);
  transform: translateY(-2px);
}

/* Dans une grille, les cartes d'une même rangée ont la même hauteur. */
.sqy-grille > li > .sqy-carte {
  height: 100%;
}

.sqy-carte__photo {
  position: relative;
}

.sqy-carte__photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.sqy-carte__photo .sqy-pastille {
  position: absolute;
  top: 14px;
  left: 14px;
}

.sqy-carte__corps {
  display: grid;
  flex: 1;
  align-content: start;
  gap: 10px;
  padding: 20px;
}

.sqy-carte__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding: 16px 20px;
  border-top: 1px solid var(--sqy-ligne);
}

/* Rond fléché en bas à droite d'une carte cliquable. */
.sqy-rond-fleche {
  --sqy-picto-fond-opacite: 0;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sqy-jaune);
  color: var(--sqy-petrole);
  transition: transform 0.15s ease;
}

.sqy-rond-fleche .sqy-picto { width: 20px; height: 20px; }
a.sqy-carte:hover .sqy-rond-fleche { transform: translateX(3px); }

/* Carte d'information : tuile, titre, texte (conditions, arguments). */
.sqy-carte-info {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--sqy-ligne);
  border-radius: var(--sqy-arrondi);
  background: var(--sqy-blanc);
}

.sqy-carte-info p {
  color: var(--sqy-nuit);
}

.sqy-carte-info--sans-bord {
  padding: 0;
  border: 0;
  background: transparent;
}

/* Carte d'une chambre (page d'un appartement). */
.sqy-carte-chambre .sqy-carte__corps {
  gap: 8px;
  padding: 16px 18px 18px;
}

.sqy-carte-chambre__titre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sqy-carte-chambre__occupant {
  font-size: 0.875rem;
  color: var(--sqy-nuit-doux);
}

.sqy-carte-chambre--libre {
  border-color: var(--sqy-menthe);
  box-shadow: 0 0 0 1px var(--sqy-menthe), var(--sqy-ombre-1);
}

/* Carte d'un article. */
.sqy-carte-article .sqy-carte__photo img,
.sqy-carte-article .sqy-vignette {
  aspect-ratio: 16 / 10;
}

.sqy-carte-article .sqy-carte__corps {
  gap: 10px;
}

.sqy-carte-article__titre {
  font-family: var(--font-titres);
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--sqy-petrole);
  text-wrap: balance;
}

.sqy-carte-article__resume {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.9375rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Article à la une : photo et texte côte à côte sur ordinateur. */
@media (min-width: 1100px) {
  .sqy-carte-article--une {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }

  .sqy-carte-article--une .sqy-carte__photo img { height: 100%; aspect-ratio: auto; min-height: 380px; }
  .sqy-carte-article--une .sqy-carte__corps { align-content: center; gap: 16px; padding: 48px; }
  .sqy-carte-article--une .sqy-carte-article__titre { font-size: 2rem; }
  .sqy-carte-article--une .sqy-carte-article__resume { font-size: 1.0625rem; -webkit-line-clamp: 4; }
  .sqy-carte-article--une .sqy-carte__photo { min-height: 380px; }
  .sqy-carte-article--une .sqy-vignette { height: 100%; min-height: 380px; aspect-ratio: auto; }
}

/* Vignette de repli d'un article sans image : teinte, toit et pictogramme du sujet. */
.sqy-vignette {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--sqy-ciel-100);
  --sqy-picto-fond: var(--sqy-ciel);
}

.sqy-vignette::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 22%;
  aspect-ratio: 400 / 64;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 64' preserveAspectRatio='none'%3E%3Cpath d='M8 57 C70 42 140 24 192 9 Q200 6 208 9 C262 24 330 40 392 53' fill='none' stroke='%23104868' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.sqy-vignette__picto {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin-top: 8%;
  border-radius: 50%;
  background: var(--sqy-blanc);
  color: var(--sqy-petrole);
}

.sqy-vignette__picto .sqy-picto { width: 52px; height: 52px; }
.sqy-vignette--menthe { background: var(--sqy-menthe-100); --sqy-picto-fond: var(--sqy-menthe); }
.sqy-vignette--jaune { background: var(--sqy-jaune-100); --sqy-picto-fond: var(--sqy-jaune); }

/* ---------------------------------------------------------------- Chambres libres (liste de l'accueil) */

.sqy-libres {
  display: grid;
  gap: 12px;
}

.sqy-libre {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--sqy-ligne);
  border-radius: 18px;
  background: var(--sqy-blanc);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}

.sqy-libre:hover { box-shadow: var(--sqy-ombre-2); }

.sqy-libre img {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
}

.sqy-libre__texte {
  display: grid;
  justify-items: start;
  gap: 4px;
  min-width: 0;
}

.sqy-libre__nom {
  font-weight: 700;
  line-height: 1.3;
  color: var(--sqy-petrole);
}

.sqy-libre__ville {
  font-size: 0.875rem;
  color: var(--sqy-nuit-doux);
}

.sqy-libre__prix {
  display: none;
}

.sqy-libre .sqy-rond-fleche { width: 36px; height: 36px; }

@media (min-width: 768px) {
  .sqy-libre {
    grid-template-columns: 88px minmax(0, 1fr) auto auto;
    gap: 24px;
    padding: 12px 20px 12px 12px;
  }

  .sqy-libre img { width: 88px; height: 66px; }
  .sqy-libre__texte { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; }
  .sqy-libre__texte .sqy-pastille { grid-column: 2; grid-row: 1 / span 2; }
  .sqy-libre__prix { display: flex; }
}

/* ---------------------------------------------------------------- Étapes du parcours */

.sqy-etapes {
  display: grid;
  gap: 0;
  counter-reset: etape;
}

.sqy-etape {
  position: relative;
  display: grid;
  align-content: start;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 4px 18px;
  padding-bottom: 28px;
}

/* Trait pointillé qui relie les tuiles des étapes. */
.sqy-etape::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 60px;
  bottom: 4px;
  border-left: 2px dashed var(--sqy-petrole);
  opacity: 0.35;
}

.sqy-etape:last-child { padding-bottom: 0; }
.sqy-etape:last-child::before { display: none; }

.sqy-etape .sqy-tuile-picto {
  grid-row: span 3;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--sqy-blanc);
  box-shadow: inset 0 0 0 2px var(--sqy-menthe);
}

.sqy-etape .sqy-tuile-picto .sqy-picto { width: 32px; height: 32px; }

.sqy-etape__numero {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sqy-petrole);
}

.sqy-etape__texte {
  color: var(--sqy-nuit);
}

/* Variante sur fond jaune ou menthe : tuiles blanches sans liseré. */
.sqy-bande--jaune .sqy-etape .sqy-tuile-picto,
.sqy-bande--menthe .sqy-etape .sqy-tuile-picto {
  box-shadow: var(--sqy-ombre-1);
}

.sqy-bande--jaune .sqy-etape .sqy-tuile-picto { --sqy-picto-fond: var(--sqy-menthe); }

@media (min-width: 1100px) {
  .sqy-etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .sqy-etape { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-bottom: 0; }
  .sqy-etape .sqy-tuile-picto { grid-row: auto; width: 72px; height: 72px; border-radius: 20px; margin-bottom: 12px; }
  .sqy-etape .sqy-tuile-picto .sqy-picto { width: 40px; height: 40px; }
  .sqy-etape::before { left: 88px; right: -24px; top: 36px; bottom: auto; border-left: 0; border-top: 2px dashed var(--sqy-petrole); }
}

.sqy-signe-sans-visite {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  padding: 14px 18px;
  border-radius: var(--sqy-arrondi);
  background: var(--sqy-blanc);
  font-weight: 600;
  color: var(--sqy-petrole);
}

/* ---------------------------------------------------------------- Page d'un appartement */

/* Bandeau des chambres libres : pilule jaune qui chevauche le bas de l'en-tête. */
.sqy-bandeau-libres {
  position: relative;
  z-index: 3;
  margin-top: -30px;
}

.sqy-bandeau-libres a {
  --sqy-picto-fond: var(--sqy-blanc);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 44rem;
  min-height: 60px;
  margin-inline: auto;
  padding: 10px 12px 10px 20px;
  border-radius: var(--sqy-pilule);
  background: var(--sqy-jaune);
  box-shadow: var(--sqy-ombre-2);
  color: var(--sqy-petrole);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

.sqy-bandeau-libres__texte {
  flex: 1;
}

.sqy-bandeau-libres__texte small {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
}

.sqy-bandeau-libres .sqy-rond-fleche { background: var(--sqy-blanc); }

/* Sommaire collant de la page : ancres vers les sections, prix et bouton sur ordinateur. */
.sqy-sommaire {
  position: sticky;
  top: var(--sqy-entete);
  z-index: 40;
  margin-top: 28px;
  background: var(--sqy-blanc);
  border-bottom: 1px solid var(--sqy-ligne);
}

.sqy-sommaire__barre {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 56px;
}

.sqy-sommaire__liens {
  display: flex;
  flex: 1;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.sqy-sommaire__liens a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--sqy-pilule);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--sqy-nuit);
  text-decoration: none;
  white-space: nowrap;
}

.sqy-sommaire__liens a[aria-current="true"] {
  background: var(--sqy-menthe-100);
  color: var(--sqy-petrole);
}

.sqy-sommaire__action {
  display: none;
}

@media (min-width: 1100px) {
  .sqy-sommaire__action {
    display: flex;
    flex: none;
    align-items: center;
    gap: 20px;
  }
}

/* Le quartier : carte et listes de trajets. */
.sqy-quartier {
  display: grid;
  gap: 32px;
}

@media (min-width: 1100px) {
  .sqy-quartier {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
    gap: 56px;
  }
}

.sqy-carte-quartier {
  display: grid;
  gap: 10px;
}

.sqy-carte-quartier__fond {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--sqy-arrondi);
  background: var(--sqy-menthe-100);
  box-shadow: inset 0 0 0 1px var(--sqy-ligne);
}

.sqy-carte-quartier__fond svg {
  display: block;
  width: 100%;
  height: 100%;
}

.sqy-trajets {
  display: grid;
  gap: 28px;
}

.sqy-trajets__groupe {
  display: grid;
  gap: 8px;
}

.sqy-trajets__titre {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.sqy-trajets__liste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding-block: 8px;
  border-bottom: 1px solid var(--sqy-ligne);
}

.sqy-trajets__liste li:last-child { border-bottom: 0; }

.sqy-trajets__nom {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-weight: 600;
}

.sqy-trajets__nom .sqy-picto { width: 22px; height: 22px; color: var(--sqy-petrole); }

.sqy-trajets__temps {
  --sqy-picto-fond: var(--sqy-ciel);
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--sqy-pilule);
  background: var(--sqy-gris);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--sqy-petrole);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sqy-trajets__temps .sqy-picto { width: 20px; height: 20px; }

.sqy-calcul-trajet {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: var(--sqy-arrondi);
  background: var(--sqy-ciel-100);
}

.sqy-calcul-trajet__ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sqy-calcul-trajet__ligne .sqy-saisie {
  flex: 1 1 200px;
}

/* Vidéo : affiche, bouton de lecture jaune. */
.sqy-video {
  position: relative;
  overflow: hidden;
  border-radius: var(--sqy-arrondi);
  background: var(--sqy-petrole);
}

.sqy-video img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: 0.88;
}

.sqy-video__lecture {
  --sqy-picto-fond: var(--sqy-blanc);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.sqy-video__lecture > span {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--sqy-jaune);
  color: var(--sqy-petrole);
  box-shadow: var(--sqy-ombre-3);
}

.sqy-video__lecture .sqy-picto { width: 36px; height: 36px; margin-left: 4px; }

.sqy-video__legende {
  position: absolute;
  left: 16px;
  bottom: 16px;
}

/* Pièces communes : photo agrandissable, titre, texte. */
.sqy-pieces {
  display: grid;
  gap: 32px;
  margin-top: 40px;
}

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

.sqy-piece {
  display: grid;
  gap: 12px;
}

.sqy-piece__photo {
  position: relative;
}

.sqy-piece__photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--sqy-arrondi);
}

.sqy-piece__photo .sqy-bouton-icone {
  --sqy-picto-fond-opacite: 0;
  position: absolute;
  right: 12px;
  bottom: 12px;
}

/* Le plan. */
.sqy-plan {
  display: grid;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--sqy-ligne);
  border-radius: var(--sqy-arrondi);
  background: var(--sqy-blanc);
}

.sqy-plan img {
  width: 100%;
  border-radius: 12px;
}

.sqy-plan__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Équipements : tuile et libellé. */
.sqy-equipements {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 768px) {
  .sqy-equipements { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}

.sqy-equipement {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--sqy-ligne);
  border-radius: 16px;
  background: var(--sqy-blanc);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

.sqy-a-savoir {
  display: grid;
  gap: 12px;
  padding: 24px;
  border-radius: var(--sqy-arrondi);
  background: var(--sqy-gris);
}

.sqy-a-savoir ul {
  display: grid;
  gap: 12px;
}

.sqy-a-savoir li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.sqy-a-savoir li .sqy-picto { width: 24px; height: 24px; color: var(--sqy-petrole); }

.sqy-equipements-mise-en-page {
  display: grid;
  gap: 32px;
}

@media (min-width: 1100px) {
  .sqy-equipements-mise-en-page { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; gap: 48px; }
}

/* Barre de candidature collée en bas de l'écran sur téléphone. */
.sqy-barre-candidature {
  position: sticky;
  bottom: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px var(--sqy-gouttiere-active);
  border-top: 1px solid var(--sqy-ligne);
  background: var(--sqy-blanc);
  box-shadow: 0 -10px 24px -16px rgba(16, 72, 104, 0.3);
}

@media (min-width: 1100px) {
  .sqy-barre-candidature { display: none; }
}

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

.sqy-inclus {
  display: grid;
  gap: 40px;
}

@media (min-width: 1100px) {
  .sqy-inclus { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; gap: 72px; }
}

.sqy-inclus__texte {
  display: grid;
  gap: 20px;
}

/* Ce qui est compris dans le loyer, en une rangée de tuiles (page Logements). */
.sqy-inclus-ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.sqy-inclus-ligne li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border-radius: var(--sqy-arrondi);
  background: var(--sqy-blanc);
  font-weight: 700;
  color: var(--sqy-petrole);
}

@media (min-width: 768px) {
  .sqy-inclus-ligne { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

@media (min-width: 1100px) {
  .sqy-inclus-ligne { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
  .sqy-inclus-ligne li { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; }
}

/* Texte et photo côte à côte (« La vie en coloc »). */
.sqy-vie-coloc {
  display: grid;
  gap: 32px;
}

.sqy-vie-coloc__texte {
  display: grid;
  align-content: center;
  gap: 16px;
}

.sqy-vie-coloc img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--sqy-arrondi);
}

@media (min-width: 1100px) {
  .sqy-vie-coloc { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 72px; }
}

.sqy-liste-picto {
  display: grid;
  gap: 14px;
}

.sqy-liste-picto li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
}

/* Le « reçu » du loyer tout compris : un ticket dentelé. */
.sqy-recu {
  --sqy-picto-fond-opacite: 0;
  position: relative;
  display: grid;
  gap: 4px;
  padding: 28px 24px;
  border-radius: 6px;
  background: var(--sqy-blanc);
  box-shadow: var(--sqy-ombre-2);
  font-variant-numeric: tabular-nums;
  -webkit-mask: radial-gradient(circle 8px at 12px 0, transparent 7.5px, #000 8px) 0 0 / 24px 51% repeat-x,
    radial-gradient(circle 8px at 12px 100%, transparent 7.5px, #000 8px) 0 100% / 24px 51% repeat-x;
  mask: radial-gradient(circle 8px at 12px 0, transparent 7.5px, #000 8px) 0 0 / 24px 51% repeat-x,
    radial-gradient(circle 8px at 12px 100%, transparent 7.5px, #000 8px) 0 100% / 24px 51% repeat-x;
}

.sqy-recu__titre {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 2px dashed var(--sqy-ligne);
}

.sqy-recu__ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  border-bottom: 1px solid var(--sqy-ligne);
}

.sqy-recu__ligne > span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--sqy-menthe-900);
}

.sqy-recu__ligne .sqy-picto { width: 18px; height: 18px; }

.sqy-recu__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  color: var(--sqy-petrole);
}

.sqy-recu__total strong {
  font-size: 2rem;
  line-height: 1;
}

.sqy-recu__titre .sqy-legende,
.sqy-recu__total > span:last-child {
  white-space: nowrap;
}

/* ---------------------------------------------------------------- Formulaire */

.sqy-formulaire {
  display: grid;
  gap: 22px;
}

.sqy-formulaire__carte {
  padding: 24px 20px;
  border: 1px solid var(--sqy-ligne);
  border-radius: var(--sqy-arrondi);
  background: var(--sqy-blanc);
  box-shadow: var(--sqy-ombre-1);
}

@media (min-width: 768px) {
  .sqy-formulaire__carte { padding: 40px; }
  .sqy-formulaire__deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}

.sqy-formulaire__deux {
  display: grid;
  gap: 22px;
}

.sqy-formulaire__groupe {
  display: grid;
  gap: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--sqy-ligne);
}

.sqy-champ {
  display: grid;
  gap: 8px;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

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

/* Le gap d'une grille ne s'applique pas à la légende d'un fieldset. */
.sqy-champ > legend {
  margin-bottom: 10px;
}

.sqy-formulaire__titre {
  display: grid;
  gap: 8px;
}

.sqy-champ__facultatif {
  font-weight: 400;
  color: var(--sqy-nuit-doux);
}

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

.sqy-saisie {
  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-saisie::placeholder {
  color: var(--sqy-nuit-doux);
  opacity: 1;
}

.sqy-saisie:focus {
  outline: 3px solid var(--sqy-petrole);
  outline-offset: 2px;
  border-color: var(--sqy-petrole);
}

textarea.sqy-saisie {
  min-height: 132px;
  resize: vertical;
}

select.sqy-saisie {
  padding-right: 48px;
  background: var(--sqy-blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23104868' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80A8 8 0 0 1 53.66 90.34L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E") right 16px center / 20px 20px no-repeat;
}

.sqy-champ--erreur .sqy-saisie {
  border-color: var(--sqy-erreur);
  box-shadow: inset 0 0 0 1px var(--sqy-erreur);
}

.sqy-champ__erreur {
  --sqy-picto-fond: var(--sqy-erreur-pale);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sqy-erreur);
}

.sqy-champ__erreur .sqy-picto { width: 20px; height: 20px; }

/* Cases de choix : de grandes cibles, une coche visible, un pictogramme facultatif. */
.sqy-choix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sqy-choix--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .sqy-choix--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.sqy-choix label {
  position: relative;
  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-choix input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sqy-choix label .sqy-picto {
  width: 26px;
  height: 26px;
  color: var(--sqy-petrole);
}

.sqy-choix input:checked + label,
.sqy-choix label.sqy-coche {
  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-choix input:focus-visible + label {
  outline: 3px solid var(--sqy-petrole);
  outline-offset: 2px;
}

.sqy-formulaire__envoi {
  display: grid;
  gap: 12px;
}

@media (min-width: 768px) {
  .sqy-formulaire__envoi { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px; }
}

/* Mise en page de la page Candidater : formulaire et colonne d'aide. */
.sqy-candidature {
  display: grid;
  gap: 32px;
}

@media (min-width: 1100px) {
  .sqy-candidature { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; gap: 48px; }
  .sqy-candidature__aide { position: sticky; top: calc(var(--sqy-entete) + 24px); }
}

.sqy-candidature__aide {
  display: grid;
  gap: 20px;
}

.sqy-encart {
  display: grid;
  gap: 14px;
  padding: 24px;
  border-radius: var(--sqy-arrondi);
  background: var(--sqy-gris);
}

.sqy-encart--menthe { background: var(--sqy-menthe-100); }
.sqy-encart--ciel { background: var(--sqy-ciel-100); --sqy-picto-fond: var(--sqy-ciel); }
.sqy-encart--jaune { background: var(--sqy-jaune-100); --sqy-picto-fond: var(--sqy-jaune); }

.sqy-mini-etapes {
  display: grid;
  gap: 14px;
  counter-reset: mini;
}

.sqy-mini-etapes li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.sqy-mini-etapes li::before {
  counter-increment: mini;
  content: counter(mini);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sqy-blanc);
  font-weight: 700;
  color: var(--sqy-petrole);
  box-shadow: inset 0 0 0 2px var(--sqy-menthe);
}

.sqy-contact-ligne {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--sqy-petrole);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.sqy-contact-ligne .sqy-tuile-picto {
  flex: none;
}

/* ---------------------------------------------------------------- Articles, pages villes, mentions légales */

.sqy-article-entete {
  display: grid;
  gap: 18px;
  padding-block: 32px 28px;
}

.sqy-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  font-size: 0.9375rem;
  color: var(--sqy-nuit-doux);
}

.sqy-meta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sqy-meta .sqy-picto { width: 18px; height: 18px; color: var(--sqy-petrole); }

.sqy-article-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--sqy-arrondi);
}

/* Texte long : appliqué au contenu WordPress (blocs standard), sans classe à poser dans l'éditeur. */
.sqy-prose {
  font-size: 1.0625rem;
  line-height: 1.7;
}

@media (min-width: 1100px) {
  .sqy-prose { font-size: 1.125rem; }
}

.sqy-prose > * + * {
  margin-top: 1.1em;
}

.sqy-prose h2 {
  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 h3 {
  margin-top: 1.8em;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--sqy-petrole);
}

.sqy-prose h2 + *,
.sqy-prose h3 + * {
  margin-top: 0.6em;
}

.sqy-prose ul,
.sqy-prose ol {
  display: grid;
  gap: 0.5em;
}

.sqy-prose ul li {
  position: relative;
  padding-left: 1.6em;
}

.sqy-prose ul li::before {
  content: "";
  position: absolute;
  left: 0.3em;
  top: 0.62em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--sqy-ciel);
  box-shadow: 0 0 0 3px var(--sqy-ciel-100);
}

.sqy-prose ol {
  counter-reset: prose;
}

.sqy-prose ol li {
  position: relative;
  padding-left: 2.2em;
  counter-increment: prose;
}

.sqy-prose ol li::before {
  content: counter(prose);
  position: absolute;
  left: 0;
  top: 0.15em;
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: var(--sqy-menthe-100);
  font-size: 0.85em;
  font-weight: 700;
  color: var(--sqy-petrole);
}

.sqy-prose a {
  font-weight: 600;
  text-decoration-color: var(--sqy-ciel);
  text-decoration-thickness: 2px;
}

.sqy-prose blockquote {
  padding: 20px 24px;
  border-radius: var(--sqy-arrondi);
  background: var(--sqy-menthe-100);
  font-weight: 600;
  color: var(--sqy-petrole);
}

.sqy-prose figure img {
  border-radius: var(--sqy-arrondi);
}

.sqy-prose figcaption {
  margin-top: 8px;
  font-size: 0.875rem;
  color: var(--sqy-nuit-doux);
}

.sqy-prose li > ul {
  margin-top: 0.5em;
}

/* Grande vignette de repli en tête d'un article sans image. */
.sqy-article-vignette {
  aspect-ratio: 16 / 9;
  border-radius: var(--sqy-arrondi);
}

@media (min-width: 768px) {
  .sqy-article-vignette { aspect-ratio: 16 / 7; }
}

/* Bouton WordPress (bloc « Boutons ») : prend l'apparence du bouton principal. */
.sqy-prose .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--sqy-pilule);
  background: var(--sqy-jaune);
  font-weight: 600;
  color: var(--sqy-petrole);
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(16, 72, 104, 0.22);
}

/* Encadré vers les logements (fin d'article, pages villes). */
.sqy-encadre {
  display: grid;
  gap: 18px;
  padding: 28px 24px;
  border-radius: var(--sqy-arrondi-grand);
  background: var(--sqy-menthe);
  color: var(--sqy-petrole);
}

.sqy-encadre__apparts {
  display: grid;
  gap: 10px;
}

@media (min-width: 768px) {
  .sqy-encadre { padding: 40px 48px; }
  .sqy-encadre__apparts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sqy-encadre__appart {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 16px;
  background: var(--sqy-blanc);
  color: inherit;
  text-decoration: none;
}

.sqy-encadre__appart img {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
}

.sqy-encadre__appart strong {
  display: block;
  line-height: 1.25;
}

.sqy-encadre__appart span {
  font-size: 0.875rem;
  color: var(--sqy-nuit-doux);
}

/* Pagination de la liste des articles. */
.sqy-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
}

.sqy-pagination a,
.sqy-pagination span {
  --sqy-picto-fond-opacite: 0;
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding-inline: 12px;
  border-radius: var(--sqy-pilule);
  font-weight: 700;
  color: var(--sqy-petrole);
  text-decoration: none;
}

.sqy-pagination a {
  box-shadow: inset 0 0 0 1px var(--sqy-ligne);
}

.sqy-pagination a:hover {
  background: var(--sqy-gris);
}

.sqy-pagination [aria-current="page"] {
  background: var(--sqy-petrole);
  color: var(--sqy-blanc);
}

.sqy-pagination .sqy-pagination__suite {
  display: inline-flex;
  gap: 6px;
}

/* Filtres de rubrique (liste des articles). */
.sqy-filtres {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.sqy-filtres a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: var(--sqy-pilule);
  background: var(--sqy-blanc);
  box-shadow: inset 0 0 0 1px var(--sqy-ligne);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--sqy-nuit);
  text-decoration: none;
  white-space: nowrap;
}

.sqy-filtres a[aria-current="page"] {
  background: var(--sqy-petrole);
  box-shadow: none;
  color: var(--sqy-blanc);
}

/* ---------------------------------------------------------------- Avis et villes */

.sqy-avis {
  --sqy-picto-fond: var(--sqy-jaune);
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 24px;
  border-radius: var(--sqy-arrondi);
  background: var(--sqy-blanc);
  box-shadow: var(--sqy-ombre-1);
}

.sqy-avis__etoiles {
  display: flex;
  gap: 2px;
  color: var(--sqy-petrole);
}

.sqy-avis__etoiles .sqy-picto { width: 20px; height: 20px; }

.sqy-avis blockquote {
  font-size: 1.0625rem;
  line-height: 1.55;
}

.sqy-avis__auteur {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--sqy-petrole);
}

.sqy-carte-ville {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 24px;
  border-radius: var(--sqy-arrondi);
  background: var(--sqy-blanc);
  color: inherit;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--sqy-ligne);
}

.sqy-carte-ville__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ---------------------------------------------------------------- Bande d'appel à l'action */

.sqy-appel {
  display: grid;
  gap: 24px;
  align-items: center;
}

@media (min-width: 1100px) {
  .sqy-appel { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; }
}

.sqy-appel__texte {
  display: grid;
  gap: 12px;
  max-width: 40rem;
}

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

.sqy-pied {
  --sqy-picto-fond: var(--sqy-jaune);
  background: var(--sqy-petrole);
  color: var(--sqy-blanc);
}

.sqy-pied a {
  color: var(--sqy-blanc);
  text-decoration: none;
}

.sqy-pied a:hover {
  text-decoration: underline;
  text-decoration-color: var(--sqy-jaune);
  text-decoration-thickness: 2px;
}

.sqy-pied__grille {
  display: grid;
  gap: 36px;
  padding-block: 56px 40px;
}

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

@media (min-width: 1100px) {
  .sqy-pied__grille { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 48px; padding-block: 72px 48px; }
}

.sqy-pied__marque {
  display: grid;
  align-content: start;
  gap: 16px;
}

.sqy-pied__marque img {
  width: auto;
  height: 72px;
}

.sqy-pied__marque p {
  max-width: 22rem;
  color: var(--sqy-menthe-100);
}

.sqy-pied__titre {
  margin-bottom: 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sqy-menthe);
}

.sqy-pied__liens {
  display: grid;
  gap: 2px;
}

.sqy-pied__liens a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  font-weight: 600;
}

.sqy-pied__liens li > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  font-weight: 600;
}

.sqy-pied__liens .sqy-picto {
  width: 22px;
  height: 22px;
}

.sqy-pied__bas {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  background: var(--sqy-petrole-900);
}

.sqy-pied__bas .sqy-conteneur {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 18px;
  font-size: 0.875rem;
  color: var(--sqy-menthe-100);
}