/* Bandes pleine largeur bord à bord (sans toucher au texte) */
.alignfull{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
}

/* Carousel avis : espace sous le texte pour les points */
.wp-block-superb-addons-carousel .superb-carousel-slide{
  padding-bottom: 3rem;
}

/* Transition douce */
.wp-block-navigation a,
.wp-block-button__link {
  transition: color .18s ease, background-color .18s ease;
}

/* Menu : liens en bleu au survol */
.wp-block-navigation a:hover,
.wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--primary) !important;
}

/* Bouton "Estimer mon bien" : bleu plus foncé au survol */
.wp-block-button__link:hover {
  background-color: #0B2E63 !important;
}


/* --- PAGE AVIS (photo avec Christophe) — remplace 2614 par l'ID réel --- */
.page-id-2614 .wp-block-cover__image-background {
  object-position: 65% 20% !important;
}

/* =============================================================
   MENU MOBILE — REPLIER LES SOUS-MENUS (Prix du m² / Quartiers)
   OÙ : Éditeur → Styles → ⋮ → CSS supplémentaire
        (ou Apparence → Personnaliser → CSS supplémentaire)
   -------------------------------------------------------------
   PRÉREQUIS : le bloc Navigation doit avoir « Ouvrir les
   sous-menus au clic » ACTIVÉ (openSubmenusOnClick).
   → Si le menu ne se replie toujours pas : re-colle le header
     (Parties de modèle → En-tête → Éditeur de code), la version
     à jour contient déjà ce réglage.
   ============================================================= */

/* 1) Dans le panneau plein écran mobile, on masque les sous-menus par défaut */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container{
  display:none !important;
}

/* 2) On ne les affiche QUE si leur parent est ouvert (flèche tapée = aria-expanded) */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-submenu:has(> .wp-block-navigation-submenu__toggle[aria-expanded="true"])
  > .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-submenu:has(> button[aria-expanded="true"])
  > .wp-block-navigation__submenu-container{
  display:block !important;
}

/* 3) Confort de lecture : lignes un peu plus espacées + flèche bien visible */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
  padding-block:.2rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* =============================================================
   PAGE BLOG — dernier article EN GRAND + grille 3x3 + pagination
   OÙ : Éditeur → Styles → ⋮ → CSS supplémentaire
        (ou Apparence → Personnaliser → CSS supplémentaire)
   PRÉREQUIS : la grille d'articles a la classe « blog-hub »
   (déjà dans « PAGE - Blog (accueil conseils).txt »).
   -------------------------------------------------------------
   Objectif : 1 article en avant (pleine largeur) + 9 en 3x3.
   Le !important est nécessaire pour passer devant le style
   natif du bloc (flex 3 colonnes).
   ============================================================= */

/* Espacement général de la grille */
.wp-block-query.blog-hub .wp-block-post-template{
  gap:2.2rem !important;
}

/* --- LE 1er ARTICLE (le plus récent) : PLEINE LARGEUR, mis en avant --- */
.wp-block-query.blog-hub .wp-block-post-template > li:first-child{
  flex-basis:100% !important;      /* si le bloc est en flex */
  max-width:100% !important;
  width:100% !important;
  grid-column:1 / -1 !important;   /* si le bloc est en grid */
  padding-bottom:2rem;
  margin-bottom:.6rem;
  border-bottom:1px solid var(--wp--preset--color--mono-3);
}

/* grande image bandeau pour le 1er */
.wp-block-query.blog-hub .wp-block-post-template > li:first-child .wp-block-post-featured-image img{
  width:100% !important;
  aspect-ratio:21 / 9;
  object-fit:cover;
  border-radius:12px;
}
/* gros titre + chapô pour le 1er */
.wp-block-query.blog-hub .wp-block-post-template > li:first-child .wp-block-post-title{
  font-size:var(--wp--preset--font-size--superbfont-xxlarge) !important;
  line-height:1.15;
  margin-top:1rem;
}
.wp-block-query.blog-hub .wp-block-post-template > li:first-child .wp-block-post-excerpt{
  font-size:var(--wp--preset--font-size--superbfont-medium);
  max-width:65ch;
}

/* --- Responsive : tout en 1 colonne sur mobile --- */
@media (max-width:781px){
  .wp-block-query.blog-hub .wp-block-post-template > li:first-child .wp-block-post-title{
    font-size:var(--wp--preset--font-size--superbfont-xlarge) !important;
  }
}

/* --- Pagination aérée (pastilles) --- */
.wp-block-query.blog-hub .wp-block-query-pagination{
  justify-content:center;
  gap:.9rem;
  margin-top:3rem;
}
.wp-block-query.blog-hub .wp-block-query-pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.4rem;
  height:2.4rem;
  padding:0 .6rem;
  border:1px solid var(--wp--preset--color--mono-3);
  border-radius:8px;
  line-height:1;
  text-decoration:none;
}
.wp-block-query.blog-hub .wp-block-query-pagination .page-numbers:hover{
  border-color:#1666E0;
  color:#1666E0;
}
.wp-block-query.blog-hub .wp-block-query-pagination .page-numbers.current{
  background:#0B2E63;
  color:#fff;
  border-color:#0B2E63;
}
.wp-block-query.blog-hub .wp-block-query-pagination-previous,
.wp-block-query.blog-hub .wp-block-query-pagination-next{
  padding:0 1rem;
}

/* =============================================================
   FORMULAIRE D'ESTIMATION (Brevo) — habillage charte Bresch
   OÙ : Éditeur → Styles → ⋮ → CSS supplémentaire
        (ou Apparence → Personnaliser → CSS supplémentaire)
   Cible les classes du formulaire Brevo (.sib-...-area) + le
   bouton .mon-bouton-estimation. Aucun réglage à faire dans le
   HTML : ça se pose tout seul sur le formulaire existant.
   OPTION carte : si tu peux entourer le formulaire d'une balise
   <div class="cb-estim-form"> ... </div>, il aura un joli cadre.
   ============================================================= */

/* --- ANTI-DÉBORDEMENT (fix mobile) : tout inclut padding/bordure dans la largeur --- */
.cb-estim-form, .cb-estim-form *,
[class^="sib-"], [class^="sib-"] *{
  box-sizing:border-box;
  max-width:100%;
}
[class^="sib-"] input,
[class^="sib-"] select,
.mon-bouton-estimation{
  width:100%;
}

/* --- (Optionnel) Carte autour du formulaire --- */
.cb-estim-form{
  max-width:560px;
  margin-inline:auto;
  background:#fff;
  padding:2.2rem 2rem;
  border:1px solid #eceef2;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(11,46,99,.06);
}

/* --- Chaque champ (les <p class="sib-...-area">) --- */
[class^="sib-"][class$="-area"]{
  margin:0 0 1.15rem;
  display:flex;
  flex-direction:column;
  gap:.4rem;
  text-align:left;
}
[class^="sib-"][class$="-area"] > label{
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.01em;
  color:#0B2E63;
}

/* --- Inputs & select --- */
[class^="sib-"] input[type="text"],
[class^="sib-"] input[type="email"],
[class^="sib-"] input[type="tel"],
[class^="sib-"] select{
  width:100%;
  padding:.8rem .95rem;
  font-size:1rem;
  font-family:inherit;
  color:#101010;
  background:#fff;
  border:1px solid #d7dbe2;
  border-radius:10px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
[class^="sib-"] input::placeholder{ color:#9aa1ad; }
[class^="sib-"] input:focus,
[class^="sib-"] select:focus{
  outline:none;
  border-color:#1666E0;
  box-shadow:0 0 0 3px rgba(22,102,224,.15);
}

/* --- Case consentement : checkbox + texte alignés --- */
.sib-CONSENT-area > label{
  flex-direction:row;
  align-items:flex-start;
  display:flex;
  gap:.6rem;
  font-weight:400;
  font-size:.9rem;
  line-height:1.4;
  color:#555;
}
.sib-CONSENT-area input[type="checkbox"]{
  width:auto;
  margin-top:.15rem;
  min-width:18px;
  height:18px;
  accent-color:#0B2E63;
}

/* --- Bouton d'envoi --- */
.mon-bouton-estimation{
  display:inline-block;
  background:#0B2E63;
  color:#fff;
  border:none;
  border-radius:12px;
  padding:1rem 2.2rem;
  font-size:1.05rem;
  font-weight:700;
  font-family:inherit;
  letter-spacing:.01em;
  cursor:pointer;
  transition:background .15s ease, transform .05s ease;
}
.mon-bouton-estimation:hover{ background:#1666E0; }
.mon-bouton-estimation:active{ transform:translateY(1px); }

/* --- Confort mobile --- */
@media (max-width:600px){
  .cb-estim-form{ padding:1.6rem 1.2rem; }
  .mon-bouton-estimation{ width:100%; }
}

.wp-block-button__link:hover { filter: brightness(1.08) !important; }

/* HOME média de territoire — vrai plein largeur */
.page-id-4567 .alignfull{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}