/* ============================================================
   PARITY OVERRIDES  (V4 statique  <->  WordPress)
   Chargé en DERNIER : il l'emporte dans la cascade.
   Réaligne WP sur le site V4 en corrigeant :
     (A) les styles par défaut des plugins (Complianz, Forminator, Gutenberg)
     (B) le "bleed" dû à la concaténation de main.css (la home hérite
         de valeurs des blocs service/article concaténés après)
   Pas d'emoji. Icônes SVG outline-stroke ailleurs.
   ============================================================ */

/* ---------- A. BANDEAU COOKIES COMPLIANZ ---------- */
/* Les formulaires du site sont custom (HTML natif -> webhook Make), PAS Forminator.
   Le seul plugin qui injecte ses propres styles dans le DOM de chaque page est le
   bandeau cookies Complianz. On le réaligne sur la marque (police + palette). */

/* A1. Police de la marque sur le bandeau cookies (c'était Arial) et sur les contrôles natifs */
.cmplz-cookiebanner, .cmplz-cookiebanner *,
#cmplz-cookiebanner-container, #cmplz-cookiebanner-container *,
.cmplz-manage-consent,
button, input, select, textarea, optgroup {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* A2. Bandeau cookies : palette de la marque (c'était #222/#008000/#00d084, défauts Complianz) */
.cmplz-cookiebanner .cmplz-title,
.cmplz-cookiebanner .cmplz-category-title,
.cmplz-cookiebanner .cmplz-message,
.cmplz-cookiebanner .cmplz-description,
.cmplz-cookiebanner .cmplz-label {
  color: var(--ink) !important;
}
.cmplz-cookiebanner .cmplz-link,
.cmplz-cookiebanner .cmplz-always-active,
.cmplz-cookiebanner a {
  color: var(--green) !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences {
  background: var(--green) !important;
  color: #fff !important;
}

/* ---------- B. BLEED DÛ À LA CONCATÉNATION DE main.css ---------- */

/* B0. GLOBAL : couleur de texte de base. WP l'avait réglée sur var(--text) #334d41
   (vert délavé) alors que V4 utilise var(--ink) #0a1f17 sur TOUT le body. */
body { color: var(--ink); }

/* B0b. Boutons : la home et les pages service utilisent 15px en V4 ; les articles
   et pages légales gardent le 14px déjà présent dans main.css. Ciblé pour ne pas
   casser les pages à 14px. */
body.home .btn,
body.single-service .btn { font-size: 15px; }

/* B1. HOME : rétablit les valeurs V4 (index.html) écrasées par les blocs
   service/ascenseur concaténés après (hero-title 72px, titres 52px, couleur --ink) */
body.home h1.hero-title {
  font-size: clamp(42px, 5.6vw, 72px);
  color: var(--ink);
}
body.home .section-header h2 {
  font-size: clamp(34px, 4.5vw, 52px);
  color: var(--ink);
}

/* B2. HERO mobile : la grid 2 colonnes doit s'effondrer en 1 (le H1 finissait
   dans une colonne d'environ 170px en passant à la ligne sur 6-8 lignes).
   V4 s'effondre à 960px. */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr !important; }
}

/* B3. FOOTER : taille de police V4 (c'était 13px) */
footer { font-size: 14px; }

/* ============================================================
   C. CORRECTIONS ISSUES DE LA REVUE DE PARITÉ (juin 2026)
   Décisions utilisateur sur la comparaison V4 ⇄ WP (voir AUDIT_V4_VS_WP.md).
   ============================================================ */

/* C1 (S1/F3). PAGES SERVICE — hero-grid : un bleed de main.css:6618 imposait
   `1.3fr 1fr / gap:50px / align-items:start`, rétrécissant la colonne texte et
   réduisant le hero-title. V4 utilise des colonnes égales, gap 60, centré.
   (Sur mobile, l'effondrement en 1 colonne reste géré par B2 <=960px.) */
body.single-service .hero-grid {
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* C2 (S5). PAGES SERVICE — params sur mobile : main.css:8273 effondrait en 1
   colonne sous 760px ; V4 conserve les 3 colonnes côte à côte. */
@media (max-width: 760px) {
  body.single-service .params-grid { grid-template-columns: repeat(3, 1fr); }
}

/* C3 (S3). CHIP « page courante » dans les contenus liés : WP le remplissait en
   sombre (main.css:8266). En V4 la classe existe mais n'a pas de style → identique
   aux autres. */
.related-chip.related-chip-current {
  background: var(--white);
  color: var(--ink);
  border-color: var(--line);
  pointer-events: auto;
}

/* C4 (A1/A2). ARTICLE — headings dans le corps : les posts importés ont des
   couleurs inline vertes (#00d084) et des tailles réduites sur les headings.
   On ramène les titres de section à la couleur sombre V4 et le H2 à 28px
   (l'accent serif sur <em> demande un nettoyage du contenu, voir la note
   dans l'audit). */
.article-body h2,
.article-body h3 { color: var(--ink) !important; }
.article-body h2 *,
.article-body h3 * { color: inherit !important; }
.article-body h2 { font-size: 28px !important; }
.article-body h2 em,
.article-body h3 em { color: var(--green-deep) !important; }

/* C5 (I3). PAGINATION des listings (actualités/archives) : cohérente avec la marque. */
.pagination,
nav.pagination,
.navigation .nav-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 48px;
}
.pagination .page-numbers,
.navigation .nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border: 1.5px solid var(--line);
  border-radius: 100px;
  background: var(--white);
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.pagination a.page-numbers:hover,
.navigation .nav-links a.page-numbers:hover {
  border-color: var(--green);
  color: var(--green-deep);
}
.pagination .page-numbers.current,
.navigation .nav-links .page-numbers.current {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.pagination .page-numbers.dots { border-color: transparent; background: transparent; }

/* C6 (A5). Bug mobile : le numéro de téléphone dans la nav passait à la ligne
   un chiffre par ligne à 375px. On le garde sur une seule ligne. */
.nav-phone { white-space: nowrap; }

/* C7. PAGES SERVICE — hero : le 2e paragraphe vient d'un champ WYSIWYG qui
   l'enveloppe dans un <p> interne sans classe (<p class="hero-lede"><p>…</p></p>),
   il rendait donc avec la taille par défaut (plus petite que le 1er paragraphe).
   On réaligne le <p> interne sur .hero-lede (19px), comme en V4. */
body.single-service .hero-lede p {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
}

/* C8. PAGES SERVICE — phrase verte (hero-quote) : légèrement plus grande (c'était 17px). */
body.single-service .hero-quote { font-size: 20px; }

/* C7. Carrousel « Nos autres expertises » : .related-carousel-wrap a
   overflow:hidden (requis par la boucle infinie du track max-content + le mask
   gradient horizontal), mais il coupait le hover des chips
   (.related-chip:hover -> translateY(-3px) + box-shadow). J'ajoute un padding
   vertical pour donner de l'air au lift+ombre et je l'annule avec une margin
   négative identique : le clipping reste UNIQUEMENT horizontal, le layout ne
   change pas. */
.related-carousel-wrap {
  padding-top: 16px;
  padding-bottom: 36px;
  margin-top: -16px;
  margin-bottom: -36px;
}

/* C8. HERO des pages service : .hero a overflow:hidden (requis pour contenir
   les glows décoratifs ::before/::after qui débordent d'environ 200px au-delà des
   bords → sans clip une scrollbar horizontale apparaîtrait ; vérifié :
   overflow:clip + overflow-clip-margin n'est PAS une alternative valable, cela
   réélargit le scroll horizontal).

   (C8a) OMBRE de la card droite .expertise-aside (box-shadow 0 20px 50px →
   ~70px en dessous, vit dans le content) : elle était coupée en bas. J'élargis la
   box de clipping avec le padding-bottom et je l'annule avec une margin négative
   identique → la section .params suivante (fond transparent, padding-top 55px)
   ne bouge pas, le chevauchement tombe dans son padding vide. Clip inchangé sur
   les autres côtés (blob vert toujours contenu). Base padding-bottom=20px
   desktop+mobile, donc 75-55=20 inchangé. */
body.single-service .hero {
  padding-bottom: 75px;
  margin-bottom: -55px;
}

/* (C8b) GLOW jaune .hero::after : il était coupé net sur le bord inférieur du
   hero. Cela ne se résout PAS avec le padding (C8a) car le glow est ancré `bottom:`
   à la même padding-box qui définit le clip : en étendant le padding, le glow
   descend avec le bord et reste coupé. Je le ré-ancre plus haut pour que son
   fondu se termine À L'INTÉRIEUR du clip. Géométrie : bottom visible du glow =
   paddingBoxBottom + (X - 80) pour `bottom:-Xpx` (height 400, gradient transparent
   à 60% → rayon visible 120). Avec X=40 → 40px à l'intérieur du clip pour
   N'IMPORTE QUELLE hauteur/viewport (relation indépendante de la hauteur, le glow
   est ancré en bas). Il continue de s'estomper au-delà du bord GAUCHE du viewport
   (naturel). Même .hero / même glow sur la HOME (body.home) : la règle vaut donc
   pour les deux. */
body.single-service .hero::after,
body.home .hero::after {
  bottom: -40px;
}

/* C9. Ancre « Expertises » (fil d'Ariane des pages service → /#expertises) : la nav
   est sticky (position:sticky, hauteur ~85px, z-index:100, voir main.css `nav{...}`).
   Sans offset, scrollIntoView aligne le top de la section .expertises sur y=0, donc
   les ~85px supérieurs du bandeau vert (et le badge « Nos expertises ») finissent
   SOUS la nav. scroll-margin-top réserve la hauteur de la nav : le début du bandeau
   vert coïncide avec la fin du header, quel que soit le mode d'arrivée (scrollIntoView
   smooth du handler OU saut natif du navigateur sur le hash). */
#expertises {
  scroll-margin-top: 85px;
}

/* C10. ARTICLE — en-tête « D'autres actualités » (single.php) et « D'autres
   retombées presse » (single-media_coverage.php) : bleed dû à la concaténation.
   Une copie de .other-articles-header dans main.css utilise display:flex +
   justify-content:space-between (en-tête du carrousel avec .other-nav en V4),
   mais ici le markup n'a pas la nav → le h2 reste collé à gauche. Pour ces pages,
   V4 utilise .other-articles-header { text-align:center }. Rétabli. */
.other-articles-header {
  display: block;
  text-align: center;
  justify-content: center;
}

/* C11. HERO — badge « 5/5 ★ Google » : l'étoile inline hérite de la couleur du
   texte (.signal → --ink), elle apparaît donc sombre. On l'enveloppe dans
   .signal-star dans le texte du signal (default du template, seed et valeur ACF
   live) et on la colore avec le jaune du site, cohérent avec les étoiles de la
   section « Avis Google ». */
.signal-star {
  color: var(--yellow);
}

/* C12. Section « Des services dédiés selon votre situation » : la deuxième ligne
   des titres de card (.svc-tail → "avec un expert", "de projet", "de vos documents",
   "copropriété") était rapetissée par une redéfinition concaténée dans
   main.css:6867 (font-size:0.52em). V4 utilise 0.82em (relative au h3). Rétabli. */
.svc-tail {
  font-size: 0.82em;
}

/* ============================================================
   D. MENU MOBILE / TABLETTE (<= 960px)
   main.css masque .nav-links sous 960px sans alternative : aucun menu sur
   mobile/tablette. Le bouton « Prendre RDV » de la barre cède sa place à un
   hamburger (.nav-toggle) qui déplie .nav-links en panneau sous la nav
   sticky ; le CTA « Prendre RDV » est conservé en dernière entrée du panneau
   (.nav-item-cta, injecté par header-nav.php). Le JS existait déjà :
   initNavToggle (main.js) bascule .is-open + aria-expanded.
   ============================================================ */

/* D1. Hamburger : caché sur desktop. Trois barres en spans (style outline-stroke
   cohérent avec les pictos du site) ; l'état ouvert (croix) est piloté par
   aria-expanded, mis à jour par initNavToggle. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.nav-toggle:hover,
.nav-toggle[aria-expanded="true"] {
  border-color: var(--green);
  background: var(--green-soft);
}
.nav-toggle-box {
  position: relative;
  display: block;
  width: 18px;
  height: 14px;
}
.nav-toggle-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.15s ease, top 0.25s ease;
}
.nav-toggle-bar:nth-child(1) { top: 0; }
.nav-toggle-bar:nth-child(2) { top: 6px; }
.nav-toggle-bar:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* D2. CTA du panneau : n'existe visuellement qu'en mobile/tablette. */
.nav-item-cta { display: none; }

/* D2b. Le fil d'Ariane est un <nav class="breadcrumb"> : il hérite de
   position:sticky + z-index:100 de la règle générique `nav {}` de main.css
   (prévue pour la barre d'en-tête). À z-index égal, plus tard dans le DOM,
   il peignait PAR-DESSUS le panneau du menu mobile. On le passe sous la nav. */
nav.breadcrumb { z-index: 99; }

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }

  /* Le bouton « Prendre RDV » de la barre est remplacé par le hamburger. */
  .nav-cta > .btn { display: none; }

  /* D3. Panneau déroulant : pleine largeur, ancré sous la nav (sticky => elle
     sert de containing block à l'absolu). main.css le mettait en display:none ;
     on le garde présent mais replié (visibility/opacity) pour l'animer. */
  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 8px 24px 24px;
    /* Opaque (pas de transparence + blur comme la barre) : le contenu de la
       page transparaissait derrière les entrées du menu. */
    background: #fafdfb;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 28px 44px -30px rgba(10, 31, 23, 0.28);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
  }
  .nav-links.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.22s ease, transform 0.22s ease;
  }

  /* Entrées du menu : pleine largeur, séparées par un filet, fermées par
     initNavToggle au clic. Le CTA (.btn) garde son style de bouton. */
  .nav-links > li { border-top: 1px solid var(--line); }
  .nav-links > li:first-child { border-top: none; }
  .nav-links > li > a:not(.btn) {
    display: block;
    padding: 15px 2px;
    font-size: 16px;
  }
  .nav-item-cta {
    display: block;
    border-top: none;
    padding-top: 16px;
  }
  .nav-item-cta .btn {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  /* Dans le panneau, le CTA hérite des couleurs des liens du menu, plus
     spécifiques que `.btn-green` : `.nav-links a { color: var(--ink) }`
     (main.css:142) au repos et `.nav-links a:hover { color: var(--green-deep) }`
     (main.css:150) au survol — libellé sombre/illisible sur fond vert.
     On force le blanc du bouton dans tous les états, comme partout sur le site. */
  .nav-links .nav-item-cta .btn,
  .nav-links .nav-item-cta .btn:hover,
  .nav-links .nav-item-cta .btn:focus {
    color: #fff;
  }
}