/* ------------------------------------------------------------------------
   Intégration de la maquette pivot dans le thème sensible_pro_2.0.

   ÉCRIT À LA MAIN — ce fichier n'est JAMAIS régénéré par build_pivot_wp.py.
   Il ne contient que les règles de raccord avec l'hôte, celles qui n'ont pas
   leur place dans la maquette autonome. Chargé APRÈS dp-pivot.css.

   Le thème pose `.site-header { position:absolute; top:0 }` avec un menu en
   `color:#fff` — conçu pour l'ancien hero sombre. Sur une page au fond clair,
   le menu est donc INVISIBLE, et le header chevauche le début du contenu
   puisqu'il ne réserve aucune hauteur. La page d'accueil résout déjà cela avec
   un bandeau (cf. page-home.php de ce thème enfant) : on applique le même motif,
   en marine — la couleur du site et de la maquette — plutôt qu'en mauve.
   Constaté par GP le 2026-09-01 : « il manque le menu ».
   ------------------------------------------------------------------------ */

/* 1. Le fond marine du header est désormais GLOBAL (style.css du thème enfant,
      2026-09-01) : tout le site porte le même bandeau. Rien à faire ici. */

/* 2. Le header étant en position absolue, il ne pousse rien : on réserve
      sa hauteur en haut de la maquette pour qu'il ne la recouvre pas. */
.page-id-23028 .dp-maquette {
	padding-top: 132px;
}

@media (max-width: 900px) {
	.page-id-23028 .dp-maquette {
		padding-top: 104px;
	}
}

/* 3. La maquette porte sa propre marque « DoliPlus » : elle ferait doublon avec
      le logo du site, juste au-dessus. On garde en revanche sa navigation par
      ancres — elle navigue DANS la page, là où le menu navigue dans le site. */
.page-id-23028 .dp-pivot .top .brand {
	display: none;
}

/* La barre d'ancres se cale alors à gauche, comme le reste du contenu. */
.page-id-23028 .dp-pivot .top {
	justify-content: flex-start;
}

/* ------------------------------------------------------------------------
   4. Le thème impose `color: #ffffff !important` sur TOUS les <button>
      (style.css du parent, bloc bouton générique, avec aussi background:#ea474b,
      font-size:15px, padding:1em 1.5em). Résultat sur la maquette : les onglets
      métier s'affichaient en BLANC SUR BLANC — trois rectangles vides.
      Constaté par GP le 2026-09-01 : « rectangle blanc ».

      Le fond, la taille et le padding de la maquette gagnaient déjà (spécificité
      supérieure) ; seule la COULEUR portait `!important`. Seul un `!important`
      peut battre un `!important` — c'est le seul endroit du portage où on s'y
      résout, et il est cantonné aux boutons de cette page.
   ------------------------------------------------------------------------ */
.page-id-23028 .dp-pivot .scn-tabs button {
	color: var(--ink-soft) !important;
}

.page-id-23028 .dp-pivot .scn-tabs button:hover {
	color: var(--ink) !important;
}

.page-id-23028 .dp-pivot .scn-tabs button[aria-pressed="true"] {
	color: #fff !important;
}

/* ------------------------------------------------------------------------
   ACCUEIL (page 4) — le pivot sous le diaporama, décision GP du 2026-09-02.
   Deux différences avec la page 23028 :
   · PAS de padding-top ici : `page-home.php` enveloppe déjà le contenu dans
     `.dp-home-hero-band` qui réserve 130 px sous le header absolu. En ajouter
     un second décollerait la maquette du diaporama.
   · Même masquage de la marque : le logo du site est juste au-dessus, et le
     diaporama entre les deux. Deux « DoliPlus » à 400 px d'intervalle.
   ------------------------------------------------------------------------ */
.page-id-4 .dp-pivot .top .brand {
	display: none;
}
.page-id-4 .dp-pivot .top {
	justify-content: flex-start;
}

/* ------------------------------------------------------------------------
   BARRE D'ANCRES COLLANTE — le conteneur `.grid` du thème porte
   `overflow: hidden`, et un `position: sticky` ne survit pas à un ancêtre qui
   coupe le débordement : la barre se décollait au premier pixel de défilement.
   Le piège était déjà écrit dans PORTAGE_WORDPRESS.md ; il fallait le lire.
   Neutralisé sur NOS pages seulement — ailleurs `.grid` garde son rôle.
   ------------------------------------------------------------------------ */
.page-id-4 .grid, .page-id-4 .grid-pad,
.page-id-23028 .grid, .page-id-23028 .grid-pad {
	overflow: visible;
}

/* Et le vrai coupable était plus haut : `body { overflow: hidden }` (thème parent).
   Un `sticky` ne survit à AUCUN ancêtre qui coupe le débordement — body compris.
   `clip` sur l'axe horizontal seulement : on garde la protection contre le
   débordement latéral, sans tuer les positions collantes. */
body.page-id-4, body.page-id-23028 {
	overflow-x: clip;
	overflow-y: visible;
}

/* ------------------------------------------------------------------------
   ONGLETS MÉTIER — le thème force `color: #ffffff !important` sur les boutons.
   Sur les onglets INACTIFS (fond blanc), le libellé devenait blanc sur blanc :
   « Chantier » et « Services & SAV » étaient des rectangles vides (GP, 03/09).
   Seul l'actif s'en sortait, son fond étant marine. C'est le piège déjà écrit
   dans PORTAGE_WORDPRESS.md — « la liste des boutons de CETTE page ».
   ------------------------------------------------------------------------ */
.page-id-4 .dp-pivot .scn-tabs button,
.page-id-23028 .dp-pivot .scn-tabs button {
	color: var(--ink-soft) !important;
	background: var(--surface);
}
.page-id-4 .dp-pivot .scn-tabs button:hover,
.page-id-23028 .dp-pivot .scn-tabs button:hover {
	color: var(--ink) !important;
}
.page-id-4 .dp-pivot .scn-tabs button[aria-pressed="true"],
.page-id-23028 .dp-pivot .scn-tabs button[aria-pressed="true"] {
	color: #fff !important;
	background: var(--navy);
}