/* Correctifs de mise en page hérités du site Webflow (les mêmes défauts y existaient), chargés
   sur toutes les pages par lib/legacy/page.ts. Chaque règle ne vise qu'un défaut constaté. */

/* 1. Pages de recherche (/recherche-de-bureau, 54 pages ville) en tablette et téléphone : le bloc
   du bouton menu était masqué (display:none sans règle mobile), donc pas de menu du tout. Le
   bandeau de recherche fixe laisse la place du bouton à droite. */
@media screen and (max-width: 991px) {
  .navbar.search .nav-wrapper.search { display: flex; flex-direction: row; justify-content: flex-end; }
  .nav-special-bg { max-width: calc(100% - 64px); }
}

/* 2. Pages ville : en téléphone, le haut de page gardait ses deux colonnes (texte | conseiller
   dédié), ce qui décalait le texte hors de l'écran. Une colonne, le conseiller dessous. */
@media screen and (max-width: 767px) {
  .bp-hero .w-layout-layout.quick-stack { grid-template-columns: 1fr !important; }
}

/* 3. Police « Notosans Variablefont Wdth Wght » : citée par 66 règles du site d'origine mais jamais
   déclarée, donc remplacée par une police à empattements (« Filtres » / « Carte » des pages ville,
   « Contact » du menu mobile…). Déclarée ici avec les fichiers de Noto Sans (Google Fonts, police
   variable, servie par le site), la police prévue par le design. */
@font-face {
  font-family: "Notosans Variablefont Wdth Wght";
  font-style: normal; font-weight: 100 900; font-stretch: 62.5% 100%; font-display: swap;
  src: url(/wf/media/noto-sans-variable-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Notosans Variablefont Wdth Wght";
  font-style: normal; font-weight: 100 900; font-stretch: 62.5% 100%; font-display: swap;
  src: url(/wf/media/noto-sans-variable-latin.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;
}
/* « Noto Sans » (28 règles) était chargée depuis Google par webfont.js, script bloquant en tête de
   page, la police restant invisible pendant le chargement, et l'adresse IP du visiteur envoyée à
   Google. Même police, mêmes fichiers que ci-dessus, servis par le site (09/10/2026). */
@font-face {
  font-family: "Noto Sans";
  font-style: normal; font-weight: 100 900; font-stretch: 62.5% 100%; font-display: swap;
  src: url(/wf/media/noto-sans-variable-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Noto Sans";
  font-style: normal; font-weight: 100 900; font-stretch: 62.5% 100%; font-display: swap;
  src: url(/wf/media/noto-sans-variable-latin.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;
}

/* 4. Carrousels des cartes bureau : un lien transparent (vers la fiche) couvre la photo, le doigt
   ne touchait donc jamais le carrousel (flèches invisibles sur téléphone) : impossible de faire
   défiler. Une fois le carrousel démarré (public/v2/carrousels.js), le lien laisse passer le
   geste et chaque diapo est elle-même un lien vers la fiche. Sans script, rien ne change. */
.dtd-carrousel .inner-bureau-link { pointer-events: none; }
.dtd-diapo { display: block; width: 100%; height: 100%; }

/* 5. Fiche bureau sur téléphone et tablette (choix du 08/10/2026, maquette A) : une seule grande
   photo (4:3), la galerie s'ouvre par « Voir plus de photos » (le lien de la galerie couvre la
   photo, toute la photo l'ouvre) — au lieu de deux photos empilées. L'espace vide dessous venait du
   bloc des boutons « Voir le plan » / « Visite virtuelle », haut de 100 px même vide, suivi de
   80 px d'espacement. Ordinateur : inchangé. */
@media screen and (max-width: 991px) {
  .bureau-hero-main { position: relative; }
  .bureau-main-img { height: auto; border-radius: 24px 0 24px 0; overflow: hidden; }
  .bureau-main-img img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
  .right-hero-bureau { position: absolute; inset: 0; margin: 0; height: auto; padding: 0; }
  .right-hero-bureau .video-wrapper { display: none; }
  .right-hero-bureau .lightbox { position: absolute; inset: 0; width: 100%; height: 100%; }
  .right-hero-bureau .lightbox > img { opacity: 0; }
  .right-hero-bureau .lightbox-opacifier { background: transparent; }
  .bureau-btns-wrapper { height: auto; padding-top: 16px; }
  .bureau-btns-wrapper:empty { display: none; }
  .bureau-hero-section .spacer-80 { height: 32px; }
}

/* 6. « Ces autres bureaux pourraient vous intéresser » (fiche bureau) : 4 colonnes à toutes les
   tailles, donc cartes écrasées et la dernière coupée sur téléphone. Tablette : 2 colonnes.
   Téléphone : une bande qu'on fait défiler au doigt (cartes à 80 %, la suivante dépasse pour
   inviter à glisser, arrêt net sur chaque carte), du bord au bord de l'écran. Dans cette bande,
   glisser fait défiler les bureaux, pas les photos (public/v2/carrousels.js) ; un appui ouvre la
   fiche. */
@media screen and (max-width: 991px) {
  .bureaux-list.similar { grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 767px) {
  .bureaux-list.similar {
    display: flex; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    /* Marge latérale du site (.container-standard) : la bande va d'un bord à l'autre de l'écran,
       la première carte reste alignée sur le texte, au départ comme à chaque arrêt. */
    --dtd-marge: clamp(1rem, .219rem + 3.472vw, 3.5rem);
    margin-inline: calc(-1 * var(--dtd-marge)); padding-inline: var(--dtd-marge); scroll-padding-inline: var(--dtd-marge);
    padding-bottom: 4px;
  }
  .bureaux-list.similar::-webkit-scrollbar { display: none; }
  .bureaux-list.similar > .w-dyn-item { flex: 0 0 80%; min-width: 0; scroll-snap-align: start; }
}

/* 7. Tuiles « localisations » de l'accueil (Paris, Lyon…) : seule la photo était un lien. Le
   bandeau « Paris → » ne réagit pas aux clics (pointer-events: none, pour laisser passer le clic
   vers la photo qu'il recouvre sur ordinateur) ; sur téléphone il passe SOUS la photo et un appui
   dessus ne menait nulle part. Le lien de la photo est étendu à toute la tuile (photo + bandeau). */
.home-loca-wrapper > .home-loca-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* 8. Mêmes tuiles, tablette et ordinateur : la photo (896 × 1 152) n'avait aucune taille avant
   d'être chargée (son lien, en ligne, prenait la largeur de la photo elle-même). À son arrivée, le
   bloc de droite grandissait et le texte d'accueil, centré à côté, descendait d'un coup de 92 px
   (saut de mise en page de 0,28 à l'ouverture de l'accueil). Lien en bloc (largeur de la tuile)
   et hauteur réservée au même rapport : rendu final identique au pixel (768 à 1 440 px).
   Téléphone : inchangé (photo carrée). */
@media screen and (min-width: 768px) {
  .home_hero-right .home-loca-link { display: block; }
  .home_hero-right .loca-img { aspect-ratio: 896 / 1152; }
}

/* 9. Pages ville et arrondissement sur téléphone (choix du 11/10/2026) : le bloc « Votre conseiller
   dédié » (photo + « Confier ma recherche ») occupait tout le haut de l'écran avant la liste des
   bureaux ; il est retiré sur téléphone, les encarts « Votre conseiller » glissés entre les cartes
   restent. La photo y est alors demandée dans sa plus petite taille (sizes « 1px » dans la page).
   Tablette et ordinateur : inchangés. */
@media screen and (max-width: 767px) {
  .bp-hero .hero-right-col { display: none; }
}

/* Boutons « Filtres / Carte » des pages de recherche (téléphone) : centrés sur l'écran, ils
   passaient sous le bouton du chat (52 px à 20 px du bord droit) sous 400 px de large. Quand le
   chat est là, ils se centrent dans la place laissée à sa gauche. */
@media screen and (max-width: 430px) {
  body:has(> d2d-chat) .mobile-btns-wrapper { left: calc(50% - 38px); }
}

/* Lien de langue du header (lib/i18n/en.ts) : « FR / EN », langue de la page en blanc, l'autre
   estompée — on lit d'un coup d'œil où l'on est et ce que le lien ouvre. */
[data-dtd-langue="nav"] span:not([data-actuelle]),
[data-dtd-langue="barre"] span:not([data-actuelle]) { opacity: .55; }
[data-dtd-langue="nav"]:hover span, [data-dtd-langue="nav"]:focus-visible span,
[data-dtd-langue="barre"]:hover span, [data-dtd-langue="barre"]:focus-visible span { opacity: 1; }
/* Même lien dans la barre des filtres de la page de recherche (ordinateur), à l'image du bouton
   « Profil » voisin ; sur téléphone la barre ne l'affiche pas : il est dans le menu. */
[data-dtd-langue="barre"] {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; height: 50px;
  padding: 12px; border: 1px solid #2e2e2e; border-radius: 8px 0; background: #0d0d0d;
  color: #fff; text-decoration: none; white-space: nowrap; transition: border-color .2s;
}
[data-dtd-langue="barre"]:hover, [data-dtd-langue="barre"]:focus-visible { border-color: #6f6f6f; }
@media screen and (max-width: 991px) { [data-dtd-langue="barre"] { display: none; } }
/* Barre des filtres des pages de recherche : le champ de recherche cède la place aux boutons
   (sans quoi, sous ~1 200 px, le dernier bouton sortait de l'écran). */
.special-nav-second-line,
.special-nav-second-line .search-outer-wrapper,
.special-nav-second-line .search-input-wrapper { min-width: 0; }

/* Pastille de langue (pages sans header, lib/i18n/en.ts, en bas à gauche) : sur téléphone, elle passait sous le
   bouton « Filtres » des pages de recherche ; elle remonte au-dessus de la rangée de boutons. */
@media screen and (max-width: 767px) {
  body:has(.mobile-btns-wrapper) [data-dtd-langue=""] { bottom: 84px !important; }
}

/* Fiche sans disponibilité confirmée (lib/cms/bureau.ts, indisponibilite()) : bandeau sous le
   titre — la situation en clair, puis les bureaux disponibles à proximité, une recherche confiée
   ou une alerte. Coins arrondis haut-gauche / bas-droite, signature de la marque. */
.dtd-indispo {
  margin: 24px 0 8px; padding: 20px 22px; border: 1px solid #2e2e2e; border-left: 3px solid #34e0b8;
  border-radius: 12px 0 12px 0; background: #0d0d0d; color: #fff; font-family: 'Noto Sans', system-ui, sans-serif;
}
.dtd-indispo-tete { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; }
.dtd-indispo-date { grid-column: 2; }
.dtd-indispo-date::before { content: "À partir du "; }
html[lang="en"] .dtd-indispo-date::before { content: "From "; }
.dtd-indispo-point { width: 9px; height: 9px; border-radius: 50%; background: #8f8f8f; }
.dtd-indispo-point.est-bientot { background: #f0a73b; }
.dtd-indispo-point.est-sur-demande { background: #34e0b8; }
.dtd-indispo-titre { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.dtd-indispo-date { margin: 0; color: #f0a73b; font-size: .9375rem; }
.dtd-indispo-texte { margin: 10px 0 18px; color: #c9c9c9; font-size: .9375rem; line-height: 1.6; max-width: 62ch; }
.dtd-indispo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.dtd-indispo-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border: 1px solid #fff;
  border-radius: 8px 0 8px 0; color: #fff; font-size: .9375rem; font-weight: 500; text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s;
}
.dtd-indispo-btn.est-principal { background: #0a0a0a; border-color: #34e0b8; color: #fff; gap: 12px; }
.dtd-indispo-btn.est-principal::before { content: ""; width: 6px; height: 6px; background: #34e0b8; box-shadow: 0 0 8px rgba(52, 224, 184, .7); flex: 0 0 auto; }
.dtd-indispo-btn:hover, .dtd-indispo-btn:focus-visible { background: #fff; color: #0d0d0d; }
.dtd-indispo-btn.est-principal:hover, .dtd-indispo-btn.est-principal:focus-visible { background: rgba(52, 224, 184, .12); border-color: #34e0b8; color: #fff; }
.dtd-indispo-lien { color: #c9c9c9; font-size: .9375rem; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
.dtd-indispo-lien:hover, .dtd-indispo-lien:focus-visible { color: #fff; }
.dtd-indispo a:focus-visible { outline: 2px solid #34e0b8; outline-offset: 2px; }
@media screen and (max-width: 479px) {
  .dtd-indispo { padding: 18px 16px; }
  .dtd-indispo-btn { width: 100%; justify-content: center; text-align: center; }
}
#autres-bureaux { scroll-margin-top: 90px; }
/* Version anglaise : le préfixe de date des cartes de dispo est posé en CSS par la feuille Webflow
   (« Disponible à partir du ») ; la page anglaise le disait en français. */
html[lang="en"] .dispo-card-date::before { content: "Available from "; }

/* Encart « Contactez-nous pour connaître les disponibilités » de la fiche (gabarit Webflow : fond
   blanc et bouton noir arrondi, hors charte sur le site sombre) : mêmes codes que le bandeau. */
.dispos-cta { background: #0d0d0d !important; border: 1px solid #2e2e2e !important; border-radius: 12px 0 12px 0 !important; }
.dispos-cta-text { color: #c9c9c9 !important; }
.dispos-cta-button { background: #0a0a0a !important; color: #fff !important; border: 1px solid #34e0b8 !important; border-radius: 8px 0 8px 0 !important; }
.dispos-cta-button:hover, .dispos-cta-button:focus-visible { background: rgba(52, 224, 184, .12) !important; }
.dispos-container .w-dyn-empty { background: transparent; padding: 0; }