/*
 * SQY Coloc — sections « sqy- » de l'extension : style « coloré et chaleureux » (piste B), téléphone d'abord.
 *
 * Tout est rangé sous les classes « sqy- » : ce fichier ne restyle pas le thème, à une seule exception, limitée
 * aux pages d'appartement par la classe « sqy-page-appartement » du <body> (section « En-tête du thème sur une
 * page d'appartement », en fin de fichier). Il ne déclare en dehors que des jetons --sqy-* sur :root et les
 * polices « Sqy Fraunces » et « Sqy Inter », hébergées par l'extension (aucun appel à Google Fonts). Les
 * conteneurs racines sont .sqy-page (page d'un appartement), .sqy-section (sections et blocs autonomes),
 * .sqy-logements et .sqy-parcours-bloc (blocs autonomes).
 *
 * Dans une section Kubio, les règles globales du thème « [data-kubio] h1…h6, p, button » (spécificité 0,1,1)
 * et « [data-kubio] a:not(…):not(…) » (0,3,1) passeraient devant les nôtres. Les règles concernées portent
 * donc aussi un sélecteur préfixé par [data-kubio], et la typographie des liens vient de leur conteneur
 * (voir « Compatibilité Kubio » en fin de fichier).
 */

/* ---------------------------------------------------------------- Polices (woff2 latin) */

@font-face {
  font-family: "Sqy Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fraunces-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Sqy Fraunces";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/fraunces-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Sqy Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Sqy Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Sqy Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- Jetons de la charte */

:root {
  --sqy-ciel: #5ac8fa;
  --sqy-jaune: #ffd766;
  --sqy-menthe: #a8e6cf;
  --sqy-nuit: #2c3e50;
  --sqy-gris: #f5f5f5;
  --sqy-petrole: #104868;
  --sqy-blanc: #fff;

  /* Teintes claires des couleurs de la charte, pour les fonds de tuiles et de bandes. */
  --sqy-ciel-pale: #dff4fe;
  --sqy-jaune-pale: #fff5d6;
  --sqy-jaune-clair: #ffe28c;
  --sqy-menthe-pale: #e5f7ef;
  --sqy-nuit-doux: #4a5d70; /* textes secondaires : 6,8:1 sur blanc */

  --sqy-police-titres: "Sqy Fraunces", Georgia, "Times New Roman", serif;
  --sqy-police-texte: "Sqy Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --sqy-arrondi: 18px;
  --sqy-arrondi-grand: 28px;
  --sqy-arrondi-petit: 12px;
  --sqy-pilule: 999px;
  --sqy-ombre: 0 6px 20px rgba(16, 72, 104, 0.12);

  --sqy-gouttiere: 1rem;
  --sqy-largeur: 68rem;
}

/* ---------------------------------------------------------------- Conteneurs */

.sqy-page,
.sqy-section,
.sqy-logements,
.sqy-parcours-bloc {
  box-sizing: border-box;
  font-family: var(--sqy-police-texte);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--sqy-nuit);
  overflow-wrap: break-word;
}

:is(.sqy-page, .sqy-section, .sqy-logements, .sqy-parcours-bloc) *,
:is(.sqy-page, .sqy-section, .sqy-logements, .sqy-parcours-bloc) *::before,
:is(.sqy-page, .sqy-section, .sqy-logements, .sqy-parcours-bloc) *::after {
  box-sizing: border-box;
}

.sqy-page {
  width: 100%;
}

/* Bandes pleine largeur ; le contenu reste dans --sqy-largeur, avec une gouttière sur téléphone. */
.sqy-section {
  margin: 0;
  padding-block: 2rem;
  padding-inline: max(var(--sqy-gouttiere), calc((100% - var(--sqy-largeur)) / 2));
  scroll-margin-top: 5.5rem; /* sous le menu figé en haut */
}

/* Blocs posés seuls dans une page : même largeur que les sections. */
.sqy-logements,
.sqy-parcours-bloc {
  width: min(100% - 2 * var(--sqy-gouttiere), var(--sqy-largeur));
  margin-inline: auto;
  margin-block: 2rem;
}

.sqy-section .sqy-parcours-bloc,
.sqy-section .sqy-logements {
  width: auto;
  margin: 0;
}

/* ---------------------------------------------------------------- Typographie de base */

.sqy-section :where(h2),
[data-kubio] .sqy-section :where(h2) {
  margin: 0 0 1rem;
  font-family: var(--sqy-police-titres);
  font-weight: 700;
  font-size: clamp(1.55rem, 1.25rem + 1.4vw, 2.15rem);
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  color: var(--sqy-petrole);
  text-wrap: balance;
}

:is(.sqy-section, .sqy-parcours-bloc) :where(h3),
[data-kubio] :is(.sqy-section, .sqy-parcours-bloc) :where(h3) {
  margin: 1.75rem 0 0.6rem;
  font-family: var(--sqy-police-texte);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  color: var(--sqy-petrole);
}

:is(.sqy-page, .sqy-section, .sqy-logements, .sqy-parcours-bloc) :where(p),
[data-kubio] :is(.sqy-page, .sqy-section, .sqy-logements, .sqy-parcours-bloc) :where(p) {
  margin: 0 0 1rem;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  text-transform: none;
  color: inherit;
}

:is(.sqy-page, .sqy-section, .sqy-logements, .sqy-parcours-bloc) :where(ul, ol),
.sqy-logements {
  padding: 0;
  list-style: none;
}

:is(.sqy-page, .sqy-section, .sqy-logements, .sqy-parcours-bloc) :where(ul, ol) {
  margin: 0 0 1rem;
}

:is(.sqy-page, .sqy-section, .sqy-logements, .sqy-parcours-bloc) :where(img, video) {
  max-width: 100%;
}

/* Les liens prennent police et couleur de leur conteneur (voir « Compatibilité Kubio »). */
:is(.sqy-page, .sqy-section, .sqy-logements, .sqy-parcours-bloc) :where(a) {
  color: inherit;
  text-underline-offset: 0.18em;
}

.sqy-note,
[data-kubio] .sqy-note {
  font-size: 0.9rem;
  color: var(--sqy-nuit-doux);
}

/* ---------------------------------------------------------------- Boutons et focus */

/*
 * Dans une section Kubio, « [data-kubio] a:not(…):not(…) » (0,3,1) et « [data-kubio] button[type=submit] » (0,2,1)
 * passeraient devant un simple « [data-kubio] .sqy-bouton » : le second sélecteur (0,4,1) les bat.
 */
.sqy-bouton,
[data-kubio] :is(.sqy-page, .sqy-section, .sqy-logements, .sqy-parcours-bloc) .sqy-bouton:is(a[href], button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  margin: 0;
  padding: 0.75rem 1.6rem;
  border: 2px solid var(--sqy-jaune);
  border-radius: var(--sqy-pilule);
  background: var(--sqy-jaune);
  box-shadow: 0 3px 0 rgba(16, 72, 104, 0.18);
  font-family: var(--sqy-police-texte);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--sqy-petrole);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.sqy-bouton:hover,
[data-kubio] :is(.sqy-page, .sqy-section, .sqy-logements, .sqy-parcours-bloc) .sqy-bouton:is(a[href], button):hover {
  border-color: var(--sqy-jaune-clair);
  background: var(--sqy-jaune-clair);
}

:is(.sqy-page, .sqy-section, .sqy-logements, .sqy-parcours-bloc) :focus-visible {
  outline: 3px solid var(--sqy-petrole);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- 1. En-tête de l'appartement */

/* « .sqy-section.sqy-entete » et « .sqy-section.sqy-bandeau » : le padding-block de .sqy-section dans les media queries
   (même spécificité que « .sqy-entete », placé plus loin) l'emporterait dès 600 px sur celui de l'en-tête et du bandeau. */
.sqy-section.sqy-entete {
  display: grid;
  gap: 1.25rem;
  padding-block: 1.25rem 2.75rem;
  border-radius: 0 0 var(--sqy-arrondi-grand) var(--sqy-arrondi-grand);
  background: var(--sqy-menthe);
}

.sqy-entete-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--sqy-arrondi);
  background: var(--sqy-menthe-pale);
  box-shadow: var(--sqy-ombre);
}

.sqy-entete .sqy-titre,
[data-kubio] .sqy-entete .sqy-titre {
  margin: 0;
  font-family: var(--sqy-police-titres);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: normal;
  text-transform: none;
  color: var(--sqy-petrole);
}

.sqy-ville,
[data-kubio] .sqy-ville {
  margin: 0.3rem 0 1rem;
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--sqy-petrole);
}

.sqy-chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sqy-chiffre {
  padding: 0.35rem 0.9rem;
  border-radius: var(--sqy-pilule);
  background: var(--sqy-blanc);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--sqy-petrole);
  white-space: nowrap;
}

.sqy-chiffre:nth-child(2) {
  background: var(--sqy-ciel);
}

.sqy-chiffre.sqy-prix {
  background: var(--sqy-jaune);
}

.sqy-accroche,
[data-kubio] .sqy-accroche {
  max-width: 40rem;
  margin: 0;
  font-size: 1.05rem;
}

/* ---------------------------------------------------------------- 2. Bandeau des chambres libres */

.sqy-section.sqy-bandeau {
  position: relative;
  margin-top: -1.75rem; /* la pilule jaune chevauche le bas de l'en-tête */
  padding-block: 0 0.5rem;
  font-weight: 700;
  color: var(--sqy-petrole);
}

.sqy-bandeau-lien {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-width: 40rem;
  min-height: 3.25rem;
  margin-inline: auto;
  padding: 0.75rem 1.25rem;
  border-radius: var(--sqy-pilule);
  background: var(--sqy-jaune);
  box-shadow: var(--sqy-ombre);
  text-align: center;
  text-decoration: none;
}

.sqy-bandeau-lien:hover {
  background: var(--sqy-jaune-clair);
}

.sqy-bandeau-fleche {
  flex: none;
  font-size: 1.2em;
}

/* ---------------------------------------------------------------- 3. Le quartier */

.sqy-quartier-nom,
[data-kubio] .sqy-quartier-nom {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.35rem 0.95rem;
  border-radius: var(--sqy-pilule);
  background: var(--sqy-menthe);
  font-weight: 700;
  color: var(--sqy-petrole);
}

/* Sans JavaScript (ou sans Leaflet), la carte reste cachée : le texte suffit. */
.sqy-carte {
  display: none;
}

.sqy-carte.sqy-carte--active {
  display: block;
  position: relative;
  z-index: 0;
  isolation: isolate;
  width: 100%;
  height: 17rem;
  margin: 0 0 0.75rem;
  overflow: hidden;
  border: 2px solid var(--sqy-jaune);
  border-radius: var(--sqy-arrondi);
  background: var(--sqy-menthe-pale);
  font-family: var(--sqy-police-texte);
}

.sqy-carte .leaflet-control-attribution {
  font-size: 0.7rem;
}

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

/* Une colonne sur téléphone, plusieurs sur grand écran. */
.sqy-arrets,
.sqy-ecoles,
.sqy-employeurs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  column-gap: 2.5rem;
}

.sqy-arrets {
  gap: 0.5rem 1rem;
}

.sqy-arrets li {
  padding: 0.65rem 0.95rem;
  border-radius: var(--sqy-arrondi-petit);
  background: var(--sqy-gris);
}

.sqy-ecoles li,
.sqy-employeurs li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px dashed rgba(16, 72, 104, 0.25);
}

.sqy-duree {
  flex: none;
  padding: 0.2rem 0.75rem;
  border-radius: var(--sqy-pilule);
  background: var(--sqy-ciel);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--sqy-petrole);
  white-space: nowrap;
}

.sqy-employeurs .sqy-duree {
  background: var(--sqy-menthe);
}

/* « Calculer mon trajet » : formulaire GET vers Google Maps, sans JavaScript. */
.sqy-trajet {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding: 1.25rem;
  border: 2px solid var(--sqy-jaune);
  border-radius: var(--sqy-arrondi);
  background: var(--sqy-jaune-pale);
}

.sqy-trajet label {
  font-weight: 700;
  color: var(--sqy-petrole);
}

.sqy-trajet input[type="text"],
[data-kubio] .sqy-trajet input[type="text"] {
  width: 100%;
  min-height: 3rem;
  margin: 0;
  padding: 0.7rem 1rem;
  border: 2px solid rgba(16, 72, 104, 0.35);
  border-radius: var(--sqy-arrondi-petit);
  background: var(--sqy-blanc);
  font-family: var(--sqy-police-texte);
  font-weight: 400;
  font-size: 1rem; /* 16 px : pas de zoom automatique sur iPhone */
  line-height: 1.3;
  color: var(--sqy-nuit);
}

.sqy-trajet input[type="text"]:focus,
[data-kubio] .sqy-trajet input[type="text"]:focus {
  border-color: var(--sqy-petrole);
}

/* ---------------------------------------------------------------- 4. Vidéo et pièces communes */

.sqy-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0 0 1.5rem;
  border-radius: var(--sqy-arrondi);
  background: var(--sqy-petrole);
  object-fit: contain;
}

.sqy-piece {
  margin: 0 0 1rem;
  padding: 1rem;
  border-radius: var(--sqy-arrondi);
  background: var(--sqy-gris);
}

.sqy-piece :where(h3),
[data-kubio] .sqy-piece :where(h3) {
  margin-top: 0;
}

.sqy-piece :where(p):last-child {
  margin-bottom: 0;
}

.sqy-photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: 0.5rem;
}

/* Lien vers la photo en grand : sqy.js l'ouvre sur place ; sans JavaScript, il ouvre l'image. */
.sqy-agrandir {
  display: block;
  overflow: hidden;
  border-radius: var(--sqy-arrondi-petit);
  background: var(--sqy-menthe-pale);
  cursor: zoom-in;
}

.sqy-agrandir img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ---------------------------------------------------------------- 5. Le plan */

.sqy-plan .sqy-agrandir {
  max-width: 52rem;
  padding: 0.5rem;
  border: 2px solid var(--sqy-menthe);
  border-radius: var(--sqy-arrondi);
  background: var(--sqy-blanc);
}

.sqy-plan .sqy-agrandir img {
  object-fit: contain;
}

/* ---------------------------------------------------------------- 6. Les chambres */

/* Chaque carte garde sa hauteur : la ligne de statut reste collée sous la photo (ou la vidéo). */
.sqy-chambres-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  align-items: start;
  gap: 1rem;
}

.sqy-chambre {
  container-type: inline-size; /* pour le statut, plus bas */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid var(--sqy-jaune);
  border-radius: var(--sqy-arrondi);
  background: var(--sqy-blanc);
}

.sqy-chambre .sqy-agrandir,
.sqy-chambre .sqy-video {
  margin: 0;
  border-radius: 0;
}

.sqy-chambre .sqy-chambre-ligne,
[data-kubio] .sqy-chambre .sqy-chambre-ligne {
  margin: 0;
  padding: 0.85rem 1rem;
  font-family: var(--sqy-police-texte);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--sqy-petrole);
}

/* Le statut (« occupée (études, 18-24 ans) ») ne se coupe pas, par exemple après le trait d'union de « 18-24 » ;
   la ligne ne peut donc se couper qu'aux « · ». Dans une carte plus étroite que le statut le plus long (« occupée
   (vie active, 25-30 ans) » : environ 250 px, plus 2 × 1 rem de marge), il se coupe à ses espaces plutôt que de
   déborder de la carte, qui rogne ce qui dépasse. */
.sqy-statut {
  white-space: nowrap;
}

@container (max-width: 17.5rem) {
  .sqy-statut {
    white-space: normal;
  }
}

.sqy-chambre-libre {
  border-color: var(--sqy-menthe);
}

.sqy-chambre-libre .sqy-chambre-ligne,
[data-kubio] .sqy-chambre-libre .sqy-chambre-ligne {
  background: var(--sqy-menthe);
}

.sqy-chambre-occupee .sqy-chambre-ligne,
[data-kubio] .sqy-chambre-occupee .sqy-chambre-ligne {
  background: var(--sqy-gris);
  font-weight: 600;
  color: var(--sqy-nuit);
}

/* ---------------------------------------------------------------- 7. Équipements et détails */

.sqy-equipements-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
  gap: 0.5rem;
}

.sqy-section .sqy-equipements-liste {
  margin-bottom: 2rem;
}

.sqy-equipements-liste li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.6rem 0.8rem;
  border-radius: 14px;
  background: var(--sqy-menthe-pale);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.25;
  color: var(--sqy-petrole);
}

.sqy-equipements-liste li:nth-child(3n + 2) {
  background: var(--sqy-jaune-pale);
}

.sqy-equipements-liste li:nth-child(3n) {
  background: var(--sqy-ciel-pale);
}

.sqy-equipements-liste li > span {
  flex: none;
  font-size: 1.4rem;
  line-height: 1;
}

.sqy-details li {
  position: relative;
  margin-bottom: 0.5rem;
  padding-left: 1.6rem;
}

.sqy-details li::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0.3rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--sqy-ciel);
}

/* ---------------------------------------------------------------- 8. Parcours du candidat */

/* La bande jaune des étapes, la même partout où le bloc est posé. */
.sqy-parcours-bloc {
  padding: 0.875rem;
  border-radius: var(--sqy-arrondi-grand);
  background: var(--sqy-jaune);
}

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

.sqy-parcours-bloc .sqy-etapes {
  margin-bottom: 1rem;
}

.sqy-etape {
  position: relative;
  min-height: 4rem;
  padding: 1rem 1rem 1rem 3.75rem;
  border: 2px solid var(--sqy-menthe);
  border-radius: 14px;
  background: var(--sqy-blanc);
  counter-increment: sqy-etape;
}

.sqy-etape::before {
  content: counter(sqy-etape);
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--sqy-petrole);
  font-family: var(--sqy-police-titres);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--sqy-blanc);
}

.sqy-etape:last-child {
  border-color: var(--sqy-ciel);
  background: var(--sqy-ciel);
}

.sqy-etape-titre {
  display: block;
  margin-bottom: 0.2rem;
  font-weight: 700;
  color: var(--sqy-petrole);
}

.sqy-etape-texte {
  display: block;
  font-size: 0.95rem;
}

.sqy-parcours-mention,
[data-kubio] .sqy-parcours-mention {
  margin: 0;
  font-weight: 600;
  color: var(--sqy-petrole);
  text-align: center;
}

.sqy-parcours-action,
[data-kubio] .sqy-parcours-action {
  margin: 1.5rem 0 0;
  font-weight: 700;
  color: var(--sqy-petrole);
  text-align: center;
}

.sqy-bouton-principal,
[data-kubio] :is(.sqy-page, .sqy-section, .sqy-logements, .sqy-parcours-bloc) .sqy-bouton-principal:is(a[href], button) {
  min-width: min(100%, 17rem);
  padding: 1rem 2rem;
  font-size: 1.125rem;
}

/* ---------------------------------------------------------------- Logements (une carte par appartement) */

.sqy-logements {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
}

.sqy-carte-logement {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid var(--sqy-jaune);
  border-radius: var(--sqy-arrondi);
  background: var(--sqy-blanc);
}

.sqy-carte-photo-lien {
  display: block;
  background: var(--sqy-menthe-pale);
}

.sqy-carte-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.sqy-carte-texte {
  padding: 0.9rem 1rem 1.1rem;
}

.sqy-carte-nom,
[data-kubio] .sqy-carte-nom {
  margin: 0;
  font-family: var(--sqy-police-titres);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  color: var(--sqy-petrole);
}

.sqy-carte-nom a {
  text-decoration: none;
}

.sqy-carte-nom a:hover {
  text-decoration: underline;
}

.sqy-carte-ville,
[data-kubio] .sqy-carte-ville {
  margin: 0.15rem 0 0.5rem;
  color: var(--sqy-nuit-doux);
}

.sqy-carte-prix,
[data-kubio] .sqy-carte-prix {
  margin: 0;
  font-weight: 700;
  color: var(--sqy-petrole);
}

.sqy-puce-libre {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.25rem 0.8rem;
  border-radius: var(--sqy-pilule);
  background: var(--sqy-menthe);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--sqy-petrole);
}

/* ---------------------------------------------------------------- Chambres libres (tous appartements) */

.sqy-chambres-libres-bloc {
  background: var(--sqy-menthe-pale);
}

.sqy-chambres-libres {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 0.5rem;
  font-weight: 600;
  color: var(--sqy-petrole);
}

.sqy-chambres-libres a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.25rem;
  padding: 0.75rem 1rem;
  border: 2px solid var(--sqy-menthe);
  border-radius: 14px;
  background: var(--sqy-blanc);
  text-decoration: none;
}

.sqy-chambres-libres a:hover {
  border-color: var(--sqy-petrole);
}

/* Chevron dessiné (la flèche → n'est pas dans le jeu de caractères des polices). */
.sqy-chambres-libres a::after {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.2rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

/* ---------------------------------------------------------------- Avis des colocataires */

.sqy-avis {
  background: var(--sqy-ciel-pale);
}

.sqy-avis-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}

.sqy-avis-item {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 2.25rem 1.25rem 1.1rem;
  border: 2px solid var(--sqy-ciel);
  border-radius: var(--sqy-arrondi);
  background: var(--sqy-blanc);
}

.sqy-avis-item::before {
  content: "\201C";
  content: "\201C" / "";
  position: absolute;
  top: 0.35rem;
  left: 1rem;
  font-family: var(--sqy-police-titres);
  font-weight: 700;
  font-size: 3.25rem;
  line-height: 1;
  color: var(--sqy-ciel);
}

.sqy-avis-texte,
[data-kubio] .sqy-avis-texte {
  margin: 0 0 1rem;
}

.sqy-avis-signature,
[data-kubio] .sqy-avis-signature {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  margin: auto 0 0;
  font-size: 0.9rem;
}

.sqy-avis-note {
  padding: 0.1rem 0.6rem;
  border-radius: var(--sqy-pilule);
  background: var(--sqy-jaune);
  letter-spacing: 0.1em;
  color: var(--sqy-petrole);
}

.sqy-avis-nom {
  font-weight: 700;
  color: var(--sqy-petrole);
}

.sqy-avis-date {
  color: var(--sqy-nuit-doux);
}

/* ---------------------------------------------------------------- Visionneuse (photo agrandie, sqy.js) */

.sqy-visionneuse {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 4.5rem 1rem 1rem;
  border: 0;
  background: transparent;
  font-family: var(--sqy-police-texte);
  color: var(--sqy-blanc);
}

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

.sqy-visionneuse::backdrop {
  background: rgba(16, 72, 104, 0.9);
}

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

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

.sqy-visionneuse-legende {
  margin-top: 0.75rem;
  font-size: 0.95rem;
}

.sqy-visionneuse-fermer {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top));
  right: max(0.75rem, env(safe-area-inset-right));
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sqy-jaune);
  font-family: var(--sqy-police-texte);
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1;
  color: var(--sqy-petrole);
  cursor: pointer;
}

.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;
}

/* ---------------------------------------------------------------- Écrans plus larges */

@media (min-width: 600px) {
  .sqy-section {
    padding-block: 2.5rem;
  }

  .sqy-parcours-bloc {
    padding: 1.75rem;
  }

  .sqy-trajet {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .sqy-trajet label {
    grid-column: 1 / -1;
  }

  .sqy-carte.sqy-carte--active {
    height: 21rem;
  }
}

@media (min-width: 900px) {
  .sqy-section {
    padding-block: 3rem;
  }

  .sqy-section.sqy-entete {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: center;
    gap: 2.5rem;
    padding-block: 2.5rem 3.75rem;
  }

  .sqy-section.sqy-bandeau {
    margin-top: -2rem;
  }

  /* Pièces communes sur deux colonnes, sous la vidéo. */
  .sqy-appartement {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
    align-items: start;
  }

  .sqy-appartement > h2,
  .sqy-appartement > .sqy-video {
    grid-column: 1 / -1;
  }

  .sqy-carte.sqy-carte--active {
    height: 26rem;
  }

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

  .sqy-etape {
    padding: 3.75rem 1.1rem 1.1rem;
  }
}

/* ---------------------------------------------------------------- Mouvements (seulement s'ils sont acceptés) */

@media (prefers-reduced-motion: no-preference) {
  .sqy-bouton,
  .sqy-bandeau-lien,
  .sqy-carte-logement,
  .sqy-chambres-libres a {
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  }

  .sqy-bouton:hover,
  .sqy-bandeau-lien:hover {
    transform: translateY(-1px);
  }

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

  .sqy-agrandir img {
    transition: transform 0.3s ease;
  }

  .sqy-agrandir:hover img {
    transform: scale(1.03);
  }
}

/* ---------------------------------------------------------------- Compatibilité Kubio */

/*
 * Dans une section Kubio, « [data-kubio] a:not([class*=wp-block-button]):not([class*=wp-element-button]) »
 * (0,3,1) impose aux liens Roboto, le doré du thème et aucun soulignement. Ce sélecteur (0,6,1) rend aux liens
 * de nos blocs la police et la couleur de leur conteneur, comme partout ailleurs. Les liens-boutons (.sqy-bouton)
 * en sont exclus : leur taille, leur interlignage, leur graisse et leur couleur sont ceux du bouton.
 */
[data-kubio] :is(.sqy-page, .sqy-section, .sqy-logements, .sqy-parcours-bloc) a[href]:not([class*="wp-block-button"]):not([class*="wp-element-button"]):not(.sqy-bouton) {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* ---------------------------------------------------------------- En-tête du thème sur une page d'appartement */

/*
 * Toutes les pages du site portent le même en-tête Kubio : le menu posé sur un « hero » de 806 px (ordinateur) qui
 * montre une photo et un très grand logo. Sur une page d'appartement, le candidat ne verrait que ce logo à
 * l'arrivée, la fiche de l'appartement commençant sous la ligne de flottaison. On masque donc la rangée du logo :
 * le hero se réduit à son padding-top, un bandeau photo de la hauteur du menu (190 px sur ordinateur, 270 px à
 * 375 px), sous lequel la fiche suit directement. Le menu reste lisible sur la photo, comme ailleurs.
 *
 * La classe « sqy-page-appartement » est posée sur <body> par classes_du_corps (sqy-coloc.php). Ce sélecteur reprend
 * #kubio (id de <html> sur tout le site) comme sqy-entete.css, pour passer devant Kubio sans !important. La règle est
 * ici et non dans sqy-entete.css : elle s'applique que le réglage sqy_style_actif soit vrai ou faux.
 */
#kubio body.sqy-page-appartement .wp-block-kubio-header .wp-block-kubio-hero .wp-block-kubio-hero__inner > .wp-block-kubio-row {
  display: none;
}