/*
 * SQY Coloc — restyle du menu (en-tête Kubio), du pied de page et des polices du thème, au style « coloré et chaleureux ».
 * Sur les pages de l'extension, il retire aussi la photo et les marges du hero qui dépassent sous le menu blanc
 * (section « En-tête du thème sur les pages de l'extension »).
 * Chargé seulement si le réglage « sqy_style_actif » est vrai, après sqy.css (jetons --sqy-* et polices) ; avec ce même
 * réglage, l'extension ne charge plus les polices Google du thème (voir retirer_polices_google dans sqy-coloc.php).
 *
 * Sélecteurs relevés le 25/10/2026 dans le HTML public de sqycoloc.fr (accueil, /nh-16/, /colocation-elancourt/,
 * /front_page/actualites/ et un article) : même structure partout. On ne vise que les classes de structure des
 * blocs Kubio (wp-block-kubio-header, wp-block-kubio-navigation-section__nav, kubio-dropdown-menu, kubio-menu,
 * kubio-offscreen, wp-block-kubio-footer…), jamais les classes générées « style-xxxx » ou « style-local-N »,
 * qui changent d'une page à l'autre.
 *
 * Kubio écrit ses règles sous la forme « #kubio .style-xxxx-outer > .kubio-menu > ul > li > a » (spécificité 1,2,3),
 * et jusqu'à 1,5,3 quand le menu est figé en haut au défilement (« #kubio .h-navigation_sticky:not(.extra-1) … »).
 * #kubio est l'id de <html> sur tout le site : nos sélecteurs le reprennent et ajoutent assez de classes de
 * structure pour passer devant dans tous les cas, sans !important.
 */

/* ---------------------------------------------------------------- Polices du thème : texte en Inter, titres en Fraunces */

/*
 * Sans Google Fonts, tout ce que Kubio règle en Roboto, Niramit ou Open Sans tomberait sur Helvetica ou Arial.
 * Les règles globales de Kubio (« [data-kubio] p », « [data-kubio] h1 »… en 0,1,1 ; liens en 0,3,1 ; champs en 0,2,1)
 * sont battues par des sélecteurs à peine plus précis : assez pour passer devant, pas assez pour passer devant les
 * règles « sqy- » des blocs de l'extension, qui gardent leur propre police.
 *
 * Texte : la police de la page (hors blocs Kubio), puis les blocs, paragraphes, liens et champs de Kubio.
 */
#kubio {
  font-family: var(--sqy-police-texte);
}

html [data-kubio],
html [data-kubio] p,
html p[data-kubio],
html [data-kubio] .h-lead,
html [data-kubio] a:not([class*="wp-block-button"]):not([class*="wp-element-button"]) {
  font-family: var(--sqy-police-texte);
}

html [data-kubio] :is(input, textarea, select, button):not([type="hidden"]) {
  font-family: var(--sqy-police-texte);
}

/* Titres : sur tout le site, y compris hors des blocs Kubio. */
html :is(h1, h2, h3, h4, h5, h6),
html [data-kubio] :is(h1, h2, h3, h4, h5, h6),
html :is(h1, h2, h3, h4, h5, h6)[data-kubio] {
  font-family: var(--sqy-police-titres);
}

/*
 * Titres du thème sur téléphone : Fraunces est plus large que la police de Kubio, qui règle ses titres à 64, 48 et 40 px
 * (pages villes, articles, contact). À 375 px, des mots seraient coupés au milieu (« Colocatio / n »). Trois tailles plus
 * petites, et une vraie césure (hyphens) plutôt qu'une coupure n'importe où. Les titres des blocs « sqy- » gardent leurs
 * propres tailles : leurs règles sont plus précises que celles-ci. Rien ne change dès 768 px.
 */
@media (max-width: 767px) {
  html :is(h1, h2, h3),
  html [data-kubio] :is(h1, h2, h3),
  html :is(h1, h2, h3)[data-kubio] {
    overflow-wrap: normal;
    hyphens: auto;
  }

  html h1,
  html [data-kubio] h1,
  html h1[data-kubio] {
    font-size: 2.25rem;
    line-height: 1.15;
  }

  html h2,
  html [data-kubio] h2,
  html h2[data-kubio] {
    font-size: 1.75rem;
    line-height: 1.2;
  }

  html h3,
  html [data-kubio] h3,
  html h3[data-kubio] {
    font-size: 1.3rem;
    line-height: 1.25;
  }
}

/* Nom du site à côté du logo (en-tête et pied de page) : battu sur les « style-xxxx-text » de Kubio (1,1,0). */
#kubio .wp-block-kubio-logo .wp-block-kubio-logo__text {
  font-family: var(--sqy-police-titres);
}

/*
 * Reste : les règles que Kubio génère page par page (champs et bouton du formulaire de contact, métadonnées des
 * articles, bouton « lire la suite »…) nomment ces trois polices, avec jusqu'à sept classes de spécificité. Plutôt que
 * de les suivre une à une, on leur donne Inter sous ces noms : ce qui n'a pas été prévu ci-dessus s'affiche en Inter,
 * pas en Helvetica. Mêmes fichiers que sqy.css, donc rien de plus à télécharger.
 */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 500;
  font-display: swap;
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("../fonts/inter-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Niramit";
  font-style: normal;
  font-weight: 100 500;
  font-display: swap;
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Niramit";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Niramit";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("../fonts/inter-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 100 500;
  font-display: swap;
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("../fonts/inter-latin-700-normal.woff2") format("woff2");
}

/* ---------------------------------------------------------------- Barre du haut (adresse, téléphone, courriel ; cachée sur téléphone) */

#kubio .wp-block-kubio-header .wp-block-kubio-navigation .wp-block-kubio-navigation-top-bar {
  background-color: var(--sqy-menthe);
}

#kubio .wp-block-kubio-header .wp-block-kubio-navigation-top-bar .wp-block-kubio-iconlist .wp-block-kubio-iconlistitem__text {
  font-family: var(--sqy-police-texte);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--sqy-petrole);
}

#kubio .wp-block-kubio-header .wp-block-kubio-navigation-top-bar .wp-block-kubio-iconlist .h-svg-icon {
  fill: var(--sqy-petrole);
}

/* ---------------------------------------------------------------- Barre du menu : blanche, liseré menthe */

#kubio .wp-block-kubio-header .wp-block-kubio-navigation .wp-block-kubio-navigation-section__nav.h-navigation.h-section {
  border-bottom: 3px solid var(--sqy-menthe);
  background-color: var(--sqy-blanc);
  box-shadow: 0 4px 16px rgba(16, 72, 104, 0.08);
}

/*
 * Logo du menu : un bloc image Kubio (fichier de 150 px), affiché à 72 px sur téléphone et tablette (net en densité 2) et
 * à 96 px dès 1024 px. Kubio lui donne sinon une hauteur qui porte le menu à 183 px à 375 px ; réduit, le menu passe à
 * 105 px et Kubio recale lui-même le hero qu'il recouvre.
 */
#kubio .wp-block-kubio-header .wp-block-kubio-navigation .wp-block-kubio-image__image {
  width: auto;
  height: 72px;
}

@media (min-width: 1024px) {
  #kubio .wp-block-kubio-header .wp-block-kubio-navigation .wp-block-kubio-image__image {
    height: 96px;
  }
}

/* Liens du menu en bleu pétrole, au repos comme au survol (Kubio les éclaircit, voire les passe en menthe). */
#kubio .wp-block-kubio-header .wp-block-kubio-navigation-section__nav.h-navigation .kubio-dropdown-menu.wp-block-kubio-dropdown-menu > .kubio-menu > ul > li > a {
  font-family: var(--sqy-police-texte);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--sqy-petrole);
}

#kubio .wp-block-kubio-header .wp-block-kubio-navigation-section__nav.h-navigation .kubio-dropdown-menu.wp-block-kubio-dropdown-menu > .kubio-menu > ul > li:is(.current-menu-item, .current_page_item) > a {
  font-weight: 700;
}

#kubio .wp-block-kubio-header .wp-block-kubio-navigation-section__nav.h-navigation .kubio-dropdown-menu.wp-block-kubio-dropdown-menu > .kubio-menu > ul > li > a:focus-visible {
  outline: 3px solid var(--sqy-petrole);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Survol et page courante : le trait sous le lien (effet « bordered-active-item » de Kubio) passe en jaune, plus épais. */
#kubio .wp-block-kubio-header .wp-block-kubio-navigation-section__nav.h-navigation .kubio-dropdown-menu.wp-block-kubio-dropdown-menu.bordered-active-item > .kubio-menu > ul > li::before,
#kubio .wp-block-kubio-header .wp-block-kubio-navigation-section__nav.h-navigation .kubio-dropdown-menu.wp-block-kubio-dropdown-menu.bordered-active-item > .kubio-menu > ul > li::after {
  height: 4px;
  border-radius: 2px;
  background-color: var(--sqy-jaune);
}

/* Sous-menus éventuels (aucun aujourd'hui). */
#kubio .wp-block-kubio-header .wp-block-kubio-navigation-section__nav.h-navigation .kubio-dropdown-menu.wp-block-kubio-dropdown-menu > .kubio-menu li > ul > li > a {
  font-family: var(--sqy-police-texte);
  color: var(--sqy-petrole);
  background-color: var(--sqy-blanc);
}

#kubio .wp-block-kubio-header .wp-block-kubio-navigation-section__nav.h-navigation .kubio-dropdown-menu.wp-block-kubio-dropdown-menu > .kubio-menu li > ul > li > a:hover,
#kubio .wp-block-kubio-header .wp-block-kubio-navigation-section__nav.h-navigation .kubio-dropdown-menu.wp-block-kubio-dropdown-menu > .kubio-menu li > ul > li:is(.current-menu-item, .current_page_item) > a {
  color: var(--sqy-petrole);
  background-color: var(--sqy-jaune);
}

/* Bouton du menu sur téléphone et tablette : pétrole, et 44 px de zone de toucher (icône de 30 px + 7 px autour). */
#kubio .wp-block-kubio-header .wp-block-kubio-navigation-section__nav.h-navigation .kubio-dropdown-menu .kubio-offscreen-icon-wrapper .h-svg-icon {
  box-sizing: content-box;
  padding: 7px;
  fill: var(--sqy-petrole);
}

#kubio .wp-block-kubio-header .wp-block-kubio-navigation-section__nav.h-navigation .kubio-dropdown-menu .kubio-offscreen-icon-wrapper:focus-visible {
  outline: 3px solid var(--sqy-petrole);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---------------------------------------------------------------- Menu ouvert sur téléphone (panneau latéral) */

/* Sans .wp-block-kubio-header : le panneau peut être déplacé ailleurs dans la page par le script de Kubio. */
#kubio .wp-block-kubio-menu-offscreen__offscreen.kubio-offscreen {
  background-color: var(--sqy-petrole);
}

#kubio .kubio-offscreen .wp-block-kubio-logo .wp-block-kubio-logo__text {
  font-family: var(--sqy-police-titres);
  font-weight: 700;
  color: var(--sqy-blanc);
}

#kubio .kubio-offscreen .kubio-accordion-menu.wp-block-kubio-accordion-menu > .kubio-menu > ul > li > a {
  min-height: 44px;
  font-family: var(--sqy-police-texte);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--sqy-blanc);
  background-color: transparent;
}

#kubio .kubio-offscreen .kubio-accordion-menu.wp-block-kubio-accordion-menu > .kubio-menu > ul > li > a:hover {
  background-color: rgba(255, 215, 102, 0.18);
}

#kubio .kubio-offscreen .kubio-accordion-menu.wp-block-kubio-accordion-menu > .kubio-menu > ul > li:is(.current-menu-item, .current_page_item) > a {
  color: var(--sqy-petrole);
  background-color: var(--sqy-jaune);
}

#kubio .kubio-offscreen .kubio-accordion-menu.wp-block-kubio-accordion-menu > .kubio-menu > ul > li > a:focus-visible {
  outline: 3px solid var(--sqy-jaune);
  outline-offset: -3px;
}

#kubio .kubio-offscreen .wp-block-kubio-copyright p {
  font-family: var(--sqy-police-texte);
  color: rgba(255, 255, 255, 0.8);
}

/* ---------------------------------------------------------------- En-tête du thème sur les pages de l'extension */

/*
 * Sur une page d'appartement ou de contenu (classes « sqy-page-appartement » et « sqy-page-contenu » du <body>, posées
 * par classes_du_corps dans sqy-coloc.php), sqy.css masque déjà la rangée du grand logo du hero. Le menu, lui, est en
 * position absolue (classe h-navigation_overlap de Kubio) : il ne recouvre que le haut du hero, qui garde sa photo de
 * fond et ses marges, et une bande de photo d'environ 90 px resterait visible sous le menu blanc. On retire donc la
 * photo, la hauteur minimale et les marges du hero, sauf le padding-top de .wp-block-kubio-hero__inner, que Kubio règle
 * à la hauteur du menu : le hero a alors exactement la hauteur du menu qui le recouvre, et la première section de la
 * page commence juste dessous. Ces règles sont ici et non dans sqy.css : sans le restyle, le menu reste transparent
 * et le bandeau photo réduit doit rester visible derrière lui.
 */
#kubio body:is(.sqy-page-appartement, .sqy-page-contenu) .wp-block-kubio-header .wp-block-kubio-hero > .background-wrapper {
  display: none;
}

#kubio body:is(.sqy-page-appartement, .sqy-page-contenu) .wp-block-kubio-header .wp-block-kubio-hero {
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  background: none;
}

#kubio body:is(.sqy-page-appartement, .sqy-page-contenu) .wp-block-kubio-header .wp-block-kubio-hero .wp-block-kubio-hero__inner {
  min-height: 0;
  padding-bottom: 0;
}

/* ---------------------------------------------------------------- Pied de page : bleu pétrole, texte blanc, liens jaunes */

#kubio .wp-block-kubio-footer .wp-block-kubio-section__outer {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
  border-radius: var(--sqy-arrondi-grand) var(--sqy-arrondi-grand) 0 0;
  background-color: var(--sqy-petrole);
  color: var(--sqy-blanc);
}

#kubio .wp-block-kubio-footer .wp-block-kubio-section__outer p {
  font-family: var(--sqy-police-texte);
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--sqy-blanc);
}

#kubio .wp-block-kubio-footer .wp-block-kubio-section__outer a[href] {
  font-family: var(--sqy-police-texte);
  font-weight: 600;
  color: var(--sqy-jaune);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

#kubio .wp-block-kubio-footer .wp-block-kubio-section__outer a[href]:hover {
  color: var(--sqy-blanc);
}

#kubio .wp-block-kubio-footer .wp-block-kubio-section__outer a[href]:focus-visible {
  outline: 3px solid var(--sqy-jaune);
  outline-offset: 3px;
  border-radius: 2px;
}