/* ==========================================================================
   Vigier Veran FSE — styles mesurés (valeurs de la spec §2/§3, audit 31/10)
   Tout ce qui ne tient pas dans theme.json. PHP/CSS pur, zéro Elementor.
   ========================================================================== */

:root {
  --vv-primary: #6D071A;
  --vv-accent:  #C87777;
  --vv-text:    #7A7A7A;
  --vv-excerpt: #777777;
  --vv-meta:    #ADADAD;
  --vv-card-bg: #F9FAFA;
  --vv-header-h: 92px;
  --vv-container: 1140px;
}

/* ---- Révélation au scroll (amélioration progressive) -------------------- */
.vv-fade-in { opacity: 1; }               /* visible par défaut (sans JS) */
.js-reveal .vv-fade-in {                   /* JS présent : on prépare l'anim */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease;
}
.js-reveal .vv-fade-in.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .vv-fade-in { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ---- En-tête fixe ------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  height: var(--vv-header-h);
  box-shadow: 0 0 24px rgba(0,0,0,.15);
  display: flex;
  align-items: center;
}
/* Hauteur d'en-tête par palier (§3.1 : 92px desktop / 87px mobile). */
@media (max-width: 1024px) {
  :root { --vv-header-h: 87px; }
}
.site-header__inner { width: 100%; max-width: var(--vv-container); margin: 0 auto; }
.site-logo img, .footer-logo img { height: auto; display: block; }

/* Le héros passe DERRIÈRE la barre fixe : pas de marge de compensation sur
   la page d'accueil (hero). Sur les autres pages, on décale le contenu
   sous l'en-tête par palier de largeur (+2px de marge, cf. piège README). */
.site-main:not(.site-main--hero) { padding-top: calc(var(--vv-header-h) + 2px); }

/* ---- Menu --------------------------------------------------------------- */
/* Espacement entre entrées de premier niveau : blockGap global = 0 colle
   les items ("PUBLICATIONSCONTACT"). On rétablit un gap sur le conteneur flex. */
.site-menu.wp-block-navigation.is-layout-flex,
.site-menu .wp-block-navigation__container.is-layout-flex {
  gap: 28px;
}
/* Couleur au repos = primaire (#6D071A). Le bloc navigation de WordPress pose
   .wp-block-navigation-item__content.wp-block-navigation-item__content{color:inherit}
   (classe doublée, spécificité 0,3,0, chargée après notre CSS) -> le lien
   retombe sur le texte de corps #7A7A7A. On bat cette règle en doublant aussi
   la classe et en préfixant par .site-menu (spécificité 0,4,0). */
.site-menu .wp-block-navigation-item__content.wp-block-navigation-item__content,
.site-menu .wp-block-navigation-item__content.wp-block-navigation-item__content .wp-block-navigation-item__label {
  text-transform: uppercase;
  color: var(--vv-primary);
  letter-spacing: .2px;
  font-weight: 400;
}
.site-menu .wp-block-navigation-item { position: relative; }
.site-menu .wp-block-navigation-item > .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 2px;
  background: var(--vv-accent);
  transition: width .25s ease;
}
.site-menu .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.site-menu .current-menu-item > .wp-block-navigation-item__content::after {
  width: 100%;
}
.site-menu .current-menu-item > .wp-block-navigation-item__content { color: var(--vv-accent); }

/* ---- Sous-menu déroulant (desktop) -------------------------------------- */
/* Le bloc Navigation est réglé sur « aligné à droite » (items-justified-right) :
   le cœur ancre alors le sous-menu sur le bord DROIT de son titre. Un panneau
   plus large que le titre part donc vers la gauche — défaut signalé par la
   cliente (« le bandeau n'est pas dessous le titre, il se déroule avec un
   décalage sur la gauche »). On le ré-ancre sur le bord GAUCHE de son titre.

   Pourquoi un plafond variable et pas une largeur fixe : la nav est collée au
   bord droit de l'en-tête, donc la place disponible à droite d'un titre dépend
   de l'écran. Mesuré sur ce menu : 337px de 768 à 1200px, puis 381px à 1300,
   415px à 1366, 452px à 1440, 532px à 1600, 692px à 1920 (la marge centrée du
   conteneur, max ~1211px, s'ajoute au-delà de 1200). Aucun plafond fixe ne
   couvre les deux bouts : à 337px le panneau de 415px sort de 78px, à 452px un
   plafond de 337px replierait les libellés sans raison.
   Le JS du thème mesure la place réelle de chaque panneau et pose --vv-sub-max.
   Valeur de repli 320px : sûre sur toutes les largeurs, même sans JS. */
@media (min-width: 768px) {
  .site-menu.items-justified-right .wp-block-navigation__container .has-child.wp-block-navigation-item .wp-block-navigation__submenu-container {
    left: 0;
    right: auto;
    width: max-content;
    min-width: 220px;
    max-width: var(--vv-sub-max, 320px);
  }
  /* Pas de `white-space: nowrap` ici : quand le plafond contraint le panneau,
     le libellé doit se replier À L'INTÉRIEUR du cadre. Bug 1.1.2 : nowrap +
     plafond = jusqu'à 38px de libellé hors du panneau. */
}

/* ---- Menu mobile (burger) ----------------------------------------------- */
/* Le bloc Navigation bascule en burger sous 600px seulement : entre 600 et ~740px
   le menu complet écrasait le logo (50x8px mesuré à 600px). Le site d'origine
   passait en burger jusqu'à 767px : on reprend ce seuil. */
@media (min-width: 600px) and (max-width: 767px) {
  .site-menu .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .site-menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
/* Bouton burger : icône 24px inchangée, zone tactile portée à 44px. */
.site-menu .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open {
  padding: 10px; margin: -10px; color: var(--vv-primary);
}

/* Panneau ouvert : plein écran, blanc, sans les marges globales du thème. */
.site-menu .wp-block-navigation__responsive-container.is-menu-open {
  padding: 0 !important;
  background: #fff !important;
  color: var(--vv-primary) !important;
}
.site-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { max-width: none; }
/* Barre du haut = réplique de l'en-tête : logo à la même place, filet dessous. */
.site-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  padding-top: var(--vv-header-h);
  min-height: 100%;
}
.site-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: var(--vv-header-h);
  border-bottom: 1px solid #EFEAE8;
  background: url("/wp-content/uploads/2023/09/cropped-logo-white-removebg-preview.png") no-repeat 28px 24px / 190px auto;
}
/* Croix : exactement à la place du burger, zone tactile 44px. */
.site-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  top: calc((var(--vv-header-h) - 44px) / 2 - 2px);
  right: 18px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--vv-primary);
}
.site-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding: 8px 28px 48px !important;
  align-items: stretch !important;
}

/* Liste : une colonne pleine largeur, alignée à gauche, sans les écarts du desktop. */
.site-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  width: 100%;
  text-align: left !important;
}
.site-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
  position: relative;
  width: 100%;
  align-items: stretch !important;
  border-bottom: 1px solid #EFEAE8;
}
/* Entrées principales : 16px, capitales, ligne tactile de 56px. */
.site-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  display: flex; align-items: center;
  min-height: 56px;
  padding: 0 52px 0 0 !important;
  font-size: 16px;
  letter-spacing: .06em;
}
/* Sous-menus : repliés par défaut, ouverts par le chevron (JS du thème). */
.site-menu .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container {
  display: none !important;
  min-width: 0 !important;
  margin: 0 0 14px !important;
  padding: 0 0 0 16px !important;
  gap: 0 !important;
  border-left: 2px solid var(--vv-accent);
  align-items: stretch !important;
}
.site-menu .wp-block-navigation__responsive-container.is-menu-open .has-child.vv-sub-open > .wp-block-navigation__submenu-container {
  display: flex !important;
}
/* le bloc aligne les éléments sur la justification desktop (droite) : on force la gauche partout */
.site-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100%;
  align-items: stretch !important;
  text-align: left !important;
}
.site-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  box-sizing: border-box;
  justify-content: flex-start;
  text-align: left !important;
}
/* Sous-entrées : casse normale (intitulés longs lisibles), même retrait pour toutes, cible 44px. */
.site-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content,
.site-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content .wp-block-navigation-item__label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
  line-height: 1.35;
  color: #3F3A3A;
}
.site-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: flex; align-items: center;
  min-height: 44px;
  padding: 8px 0 !important;
}
/* Page en cours. */
.site-menu .wp-block-navigation__responsive-container.is-menu-open .vv-current > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.site-menu .wp-block-navigation__responsive-container.is-menu-open .vv-current > .wp-block-navigation-item__content.wp-block-navigation-item__content .wp-block-navigation-item__label {
  color: var(--vv-accent);
  font-weight: 500;
}
/* Le chevron natif du desktop reste masqué dans le panneau ; le nôtre n'existe que là. */
.site-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle { display: none !important; }
.site-menu .vv-sub-toggle { display: none; }
.site-menu .wp-block-navigation__responsive-container.is-menu-open .vv-sub-toggle {
  position: absolute; top: 6px; right: -10px; z-index: 3; /* au-dessus du lien (sinon le tap ouvre la page) */
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--vv-primary);
}
.site-menu .vv-sub-toggle svg { transition: transform .2s ease; }
.site-menu .vv-sub-open > .vv-sub-toggle svg { transform: rotate(180deg); }
.site-menu .vv-sub-toggle:focus-visible { outline: 2px solid var(--vv-accent); outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) { .site-menu .vv-sub-toggle svg { transition: none; } }
/* le soulignement animé du desktop n'a pas de sens empilé : on le neutralise */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; }

/* ---- Héros accueil (un seul, responsive — écart G1 assumé) -------------- */
.vv-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: 50% 50%;
  padding: 0 28.5px;
}
.vv-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--vv-accent);
  opacity: .5;                              /* voile accent 50% (§2) */
  z-index: 1;                               /* AU-DESSUS de l'image de fond (cover img z-index:0) */
  pointer-events: none;
}
/* L'image de fond du bloc cover est en z-index:0 ; le voile doit passer par-dessus,
   puis le contenu (inner-container) au-dessus du voile. */
.vv-hero .wp-block-cover__image-background { z-index: 0; }
.vv-hero .wp-block-cover__inner-container { position: relative; z-index: 2; }
.vv-hero > * { position: relative; z-index: 2; }
.vv-hero .vv-hero__h1 {
  color: #fff !important;
  text-transform: uppercase;
  font-size: 40px; line-height: 40px; font-weight: 600;
  margin: 0 0 12px;
}
.vv-hero .vv-hero__h2 {
  color: #fff !important;
  font-size: 25px; line-height: 25px; font-weight: 600;
  margin: 0 0 28px;
}
@media (max-width: 1024px) {
  .vv-hero { min-height: 60vh; padding: 0 2%; }
}

/* ---- Titres de section -------------------------------------------------- */
.vv-section-title {
  font-size: 32px; line-height: 48px; font-weight: 600;
  color: var(--vv-primary);
  text-align: center;
}

/* ---- Boutons pilule (contenu) ------------------------------------------- */
.wp-block-button.is-style-pill .wp-block-button__link,
.vv-btn-pill .wp-block-button__link {
  border-radius: 100px;
  padding: 16px 55px;
  background: var(--vv-accent);
  color: #fff;
  border: 1px solid var(--vv-accent);
  text-transform: uppercase;
  font-size: 15px; font-weight: 500; line-height: 1;
}
.wp-block-button.is-style-pill .wp-block-button__link:hover,
.vv-btn-pill .wp-block-button__link:hover {
  background: var(--vv-primary);
  border-color: var(--vv-primary);
}

/* ---- Cartes d'expertise (grille 3x3, carte 333x350) --------------------- */
.vv-expertise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vv-expertise-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  background: var(--vv-card-bg);
  overflow: hidden;
}
.vv-expertise-card__img {
  height: 200px;
  background-size: cover;
  background-position: center;
}
.vv-expertise-card__body {
  min-height: 150px;
  display: flex; align-items: center; justify-content: center;
  padding: 35px;
  background: var(--vv-card-bg);
}
.vv-expertise-card__body h2 {
  margin: 0; text-align: center;
  font-size: 23px; line-height: 1.2; font-weight: 600;
  color: var(--vv-primary);
}
/* le lien interne hérite de la couleur accent (elements.link) : forcer le primaire (§3.3) */
.vv-expertise-card__body h2 a,
.vv-expertise-card__body h2 a:visited { color: var(--vv-primary); text-decoration: none; }
.vv-expertise-card:hover .vv-expertise-card__body h2 a { color: var(--vv-accent); }
.vv-expertise-card a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.vv-expertise-card:hover .vv-expertise-card__img { transform: scale(1.04); transition: transform .4s ease; }

@media (max-width: 767px) {
  .vv-expertise-grid { grid-template-columns: 1fr; }
}

/* ---- Carrousel Expertises (ACCUEIL) : 3 cartes visibles + flèches ------- */
.vv-expertise-carousel {
  position: relative;
  display: flex; align-items: center;
  gap: 8px;
}
.vv-carousel__viewport { overflow: hidden; flex: 1 1 auto; }
.vv-carousel__track {
  display: flex;
  gap: 20px;
  transition: transform .45s ease;
  will-change: transform;
}
.vv-expertise-carousel .vv-expertise-card {
  flex: 0 0 calc((100% - 40px) / 3);  /* 3 cartes visibles, 2 gaps de 20px */
  max-width: calc((100% - 40px) / 3);
}
.vv-carousel__arrow {
  flex: 0 0 auto;
  background: none; border: 0; cursor: pointer;
  font-size: 40px; line-height: 1; color: var(--vv-primary);
  padding: 0 4px; transition: color .2s ease;
  font-family: var(--wp--preset--font-family--roboto);
}
.vv-carousel__arrow:hover { color: var(--vv-accent); }
.vv-carousel__arrow[disabled] { opacity: .3; cursor: default; }
@media (max-width: 1024px) {
  .vv-expertise-carousel .vv-expertise-card { flex-basis: calc((100% - 20px) / 2); max-width: calc((100% - 20px) / 2); }
}
@media (max-width: 767px) {
  .vv-expertise-carousel .vv-expertise-card { flex-basis: 100%; max-width: 100%; }
}

/* ---- Cartes avocates (page Cabinet) : grandes photos + voile + nom dessus */
.vv-team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.vv-team-card {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 450px;
  background-size: cover; background-position: center top;
  overflow: hidden; text-decoration: none;
}
.vv-team-card__overlay {
  position: absolute; inset: 0;
  background: var(--vv-accent); opacity: .55;   /* voile accent (comme le héros) */
  transition: opacity .3s ease;
}
.vv-team-card__name {
  position: relative; z-index: 1;
  font-family: var(--wp--preset--font-family--bodoni);
  font-size: 30px; font-weight: 600; color: #fff; text-align: center;
}
.vv-team-card:hover .vv-team-card__overlay { opacity: .4; }
@media (max-width: 767px) { .vv-team-grid { grid-template-columns: 1fr; } .vv-team-card { height: 360px; } }

/* ---- Fiches expertises : layout 2 colonnes (titre gauche | barre | contenu) */
.vv-fiche-row { gap: 0 !important; align-items: stretch; }
.vv-fiche-row__head { display: flex; align-items: flex-start; justify-content: flex-end; padding-right: 40px; }
.vv-fiche-heading {
  margin: 0; text-align: right;
  font-family: var(--wp--preset--font-family--bodoni);
  font-size: 23px; line-height: 1.3; font-weight: 600; color: var(--vv-primary);
}
/* barre verticale #C87777 entre les deux colonnes */
.vv-fiche-row__body {
  border-left: 1px solid var(--vv-accent);
  padding-left: 40px;
}
/* puce carrée 7 px teinte #C87777, comme la maquette du 10/11 */
.vv-fiche-item {
  position: relative;
  padding-left: 26px;
  font-family: var(--wp--preset--font-family--roboto);
  font-size: 16px; line-height: 1.62; color: var(--vv-text);
  margin: 0 0 18px;
}
.vv-fiche-item::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; background: var(--vv-accent);
}
.vv-fiche-item:last-child { margin-bottom: 0; }
.vv-fiche-item strong { color: var(--vv-primary); font-weight: 600; }
@media (max-width: 767px) {
  .vv-fiche-row { flex-wrap: wrap; }
  .vv-fiche-row__head { justify-content: flex-start; padding-right: 0; margin-bottom: 16px; }
  .vv-fiche-heading { text-align: left; }
  .vv-fiche-row__body { border-left: 0; padding-left: 0; }
}

/* ---- Accueil « Notre cabinet » : détacher le texte de l'image ----------- */
/* blockGap:0 colle les 2 colonnes (texte flush contre la photo). On rétablit
   une gouttière et on décale le texte, comme en ligne. */
.vv-cabinet-cols { gap: 0 !important; }
.vv-cabinet-cols > .wp-block-column:first-child { padding-right: 40px; }
.vv-cabinet-cols > .wp-block-column:last-child { padding-left: 56px; }
/* Mobile : empiler et aligner image + texte sur le même bord (pas de décalage). */
@media (max-width: 781px) {
  .vv-cabinet-cols { flex-direction: column !important; }
  .vv-cabinet-cols > .wp-block-column { flex-basis: 100% !important; width: 100% !important; }
  .vv-cabinet-cols > .wp-block-column:first-child { padding-right: 0; margin-bottom: 24px; }
  .vv-cabinet-cols > .wp-block-column:last-child { padding-left: 0; }
}

/* ---- Rythme vertical du contenu (blockGap global = 0 écrase les marges) --
   On rétablit l'espacement des paragraphes et des boutons DANS les colonnes de
   contenu et le corps d'article/page, sans toucher au header/footer. */
.wp-block-column > p,
.site-main .wp-block-column > p { margin: 0 0 18px; }
.wp-block-column > p:last-child { margin-bottom: 0; }
.wp-block-column > .wp-block-buttons { margin-top: 28px; }
.wp-block-column > .wp-block-heading { margin-bottom: 12px; }

/* ---- Pages avocates (Marine / Emma) : photo full-bleed + texte ---------- */
/* .alignfull sur la section : WordPress l'étend bord à bord (layout contraint).
   Photo mesurée en ligne : ~720x719px (quasi carrée, 50% de large). */
.vv-lawyer {
  display: flex;
  align-items: stretch;
  min-height: 720px;
}
.vv-lawyer__photo {
  flex: 0 0 50%;
  background-size: cover;
  background-position: center top;
  min-height: 720px;
}
.vv-lawyer__text {
  flex: 0 0 50%;
  display: flex;
  align-items: center;
}
/* le texte s'aligne sur la grille 1140px : on réserve la moitié de la gouttière. */
.vv-lawyer--photo-left .vv-lawyer__text .vv-lawyer__inner {
  max-width: 540px; margin-right: auto;
  padding: 48px 28px 48px 56px;
}
.vv-lawyer--photo-right .vv-lawyer__text .vv-lawyer__inner {
  max-width: 540px; margin-left: auto;
  padding: 48px 56px 48px 28px;
}
.vv-lawyer__name {
  margin: 0 0 2px;
  font-family: var(--wp--preset--font-family--bodoni);
  font-size: 32px; line-height: 1.2; font-weight: 600; color: var(--vv-primary);
}
.vv-lawyer__role {
  margin: 0 0 24px;
  font-family: var(--wp--preset--font-family--bodoni);
  font-size: 23px; line-height: 1.3; font-weight: 600; color: var(--vv-accent);
}
.vv-lawyer__inner p:not(.vv-lawyer__role) {
  font-family: var(--wp--preset--font-family--roboto);
  font-size: 16px; line-height: 1.6; color: var(--vv-text);
  margin: 0 0 18px;
}
.vv-lawyer__inner p:last-child { margin-bottom: 0; }

/* Contact / Formations / Enseignement : titres accent + barre + puces */
.vv-lawyer-info { display: grid; gap: 40px; }
.vv-lawyer-info--2col { grid-template-columns: repeat(2, 1fr); }
.vv-lawyer-info--3col { grid-template-columns: repeat(3, 1fr); }
.vv-lawyer-info__col { border-left: 1px solid var(--vv-accent); padding-left: 24px; }
.vv-info-title {
  margin: 0 0 16px;
  font-family: var(--wp--preset--font-family--bodoni);
  font-size: 23px; line-height: 1.2; font-weight: 600; color: var(--vv-accent);
}
.vv-lawyer-info__col ul { list-style: disc; margin: 0; padding-left: 18px; }
.vv-lawyer-info__col li {
  font-family: var(--wp--preset--font-family--roboto);
  font-size: 15px; line-height: 1.6; color: var(--vv-text);
  margin-bottom: 8px;
}
.vv-lawyer-info__col li::marker { color: var(--vv-accent); }

@media (max-width: 1024px) {
  .vv-lawyer { flex-direction: column; min-height: 0; }
  .vv-lawyer--photo-right { flex-direction: column-reverse; }
  .vv-lawyer__photo { flex-basis: auto; width: 100%; height: 420px; min-height: 420px; }
  .vv-lawyer__text { flex-basis: auto; }
  .vv-lawyer__inner { max-width: none !important; padding: 36px 28px !important; }
  .vv-lawyer-info--3col { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .vv-lawyer-info--2col { grid-template-columns: 1fr; }
}

/* ---- Cartes d'articles -------------------------------------------------- */
.vv-article-card { margin-bottom: 28px; }
.vv-article-card .wp-block-post-title,
.vv-article-card .wp-block-post-title a {
  font-family: var(--wp--preset--font-family--roboto);
  font-size: 16px; line-height: 19.2px; font-weight: 600;
  color: var(--vv-accent);
  text-decoration: none;
}
.vv-article-card .wp-block-post-excerpt { font-size: 14px; line-height: 21px; color: var(--vv-excerpt); }
.vv-article-card .wp-block-post-date { font-family: var(--wp--preset--font-family--roboto-slab); font-size: 12px; line-height: 15.6px; color: var(--vv-meta); }

/* ---- Publications : recherche + pagination native ----------------------- */
.vv-search { max-width: 420px; margin: 0 auto 8px; }
.vv-search .wp-block-search__input {
  border: 1px solid #69727D; border-radius: 3px;
  font-family: var(--wp--preset--font-family--roboto); font-size: 15px;
  padding: 8px 14px; height: 40px; box-sizing: border-box;
}
.vv-search .wp-block-search__button {
  background: var(--vv-accent); color: #fff; border: 0; border-radius: 3px;
  font-family: var(--wp--preset--font-family--roboto); font-size: 14px; font-weight: 500;
  text-transform: uppercase; padding: 0 18px; cursor: pointer;
}
.vv-search .wp-block-search__button:hover { background: var(--vv-primary); }
.vv-publications .wp-block-post-template { gap: 28px 20px; }
.vv-pagination { margin-top: 48px; gap: 10px; }
.vv-pagination a, .vv-pagination .wp-block-query-pagination-numbers .page-numbers {
  color: var(--vv-accent); text-decoration: none;
  font-family: var(--wp--preset--font-family--roboto); font-size: 15px;
}
.vv-pagination .page-numbers.current { color: var(--vv-primary); font-weight: 600; }

/* ---- Pied de page (mesuré en ligne à 1440px : 120px, colonnes 480/418/538) ---- */
.site-footer {
  position: relative;
  box-shadow: 0 0 10px rgba(0,0,0,.5);
}
.vv-footer { display: grid; grid-template-columns: 33.333% 29.03% 1fr; min-height: 120px; }
.vv-footer__logo { display: flex; align-items: center; justify-content: center; }
.vv-footer__logo a { display: flex; justify-content: center; width: 100%; }
.vv-footer__logo img { display: block; height: auto; }
.vv-footer__contact { padding: 10px; }
.vv-footer .footer-title {
  margin: 0; padding: 0 0 0 8px;
  font-family: var(--wp--preset--font-family--bodoni);
  font-size: 21px; line-height: 21px; font-weight: 600; color: var(--vv-primary);
}
.vv-footer__row { display: flex; align-items: flex-start; }
.footer-contact {
  flex: 0 0 290px; box-sizing: border-box; margin: 0; padding: 10px;
  font-family: var(--wp--preset--font-family--roboto);
  font-size: 13px; line-height: 19.5px; color: #7A7A7A;
}
.footer-contact strong { font-weight: 700; color: #7A7A7A; }
.footer-contact a { color: #7A7A7A; text-decoration: none; }
.footer-contact .footer-legal { color: #CC3366; }
.footer-social { display: flex; padding: 10px; }
.footer-social__link {
  width: 48px; height: 48px; margin-right: 42px;
  display: flex; align-items: center; justify-content: center;
  background: #0077B5; color: #fff; border-radius: 10%;
}
.footer-social__link:nth-child(2) { background: #000; margin-right: 0; }   /* X (ex-Twitter) */
.vv-footer__logo img { width: min(280px, 69.8%); }
/* Tablette (mesuré en ligne à 1024px : 139px) */
@media (max-width: 1024px) {
  .vv-footer { grid-template-columns: 33.333% 30% 1fr; }
  .vv-footer__contact { padding-left: 0; padding-right: 0; }
  .footer-contact { flex: 0 0 204px; }
}
/* Mobile (mesuré en ligne à 390px : 255px, tout empilé et centré) */
@media (max-width: 767px) {
  .vv-footer { grid-template-columns: 1fr; }
  .vv-footer__contact { padding-left: 10px; padding-right: 10px; }
  .vv-footer__mid { display: none; }
  .vv-footer__logo { padding: 10px 10px 0; }
  .vv-footer__logo img { width: 274px; max-width: 100%; }
  .vv-footer__contact { padding: 21px 10px 10px; }
  .vv-footer__row { flex-direction: column; align-items: stretch; }
  .footer-contact { flex: none; padding: 10px; }
  .footer-social { justify-content: center; padding: 10px; }
}

/* ---- Page Contact : coordonnées + carte --------------------------------- */
/* Coordonnées : colonne infos centrée verticalement, DÉTACHÉE du formulaire.
   Le blockGap global = 0 colle les 2 colonnes : on rétablit une gouttière,
   et on décale le texte des coordonnées vers la droite comme en ligne. */
.vv-contact-cols { align-items: center !important; gap: 0 !important; }
.vv-contact-cols > .wp-block-column:first-child { padding-right: 40px; }
.vv-contact-cols > .wp-block-column:last-child { padding-left: 64px; }
.vv-coords {
  font-family: var(--wp--preset--font-family--roboto);
  font-size: 16px; line-height: 2.2; color: var(--vv-text);
  margin: 0;
}
.vv-coords strong { color: var(--vv-primary); font-weight: 600; }
/* Carte : largeur du conteneur 1140px (PAS plein écran). */
.vv-map { margin-top: 8px; }
.vv-map__frame { width: 100%; height: 450px; border: 0; display: block; }

/* ---- Formulaire CF7 (styles mesurés §6) --------------------------------- */
.vv-contact-form .vv-field { margin: 0 0 16px; }
.vv-contact-form .vv-req { color: var(--vv-accent); }
.vv-contact-form p { margin: 0 0 16px; }
.vv-contact-form { max-width: 580px; }
.vv-contact-form label,
.vv-contact-form .vv-label {
  display: block;
  font-family: var(--wp--preset--font-family--bodoni);
  font-size: 19px; font-weight: 600; color: var(--vv-primary);
  margin-bottom: 7px;
}
.vv-contact-form input[type=text],
.vv-contact-form input[type=email],
.vv-contact-form textarea {
  width: 100%;
  font-family: var(--wp--preset--font-family--bodoni);
  font-size: 16px; font-weight: 600; color: var(--vv-text);
  background: #fff;
  border: 1px solid #69727D; border-radius: 3px;
  padding: 8px 16px;
  min-height: 40px;
  box-sizing: border-box;
}
.vv-contact-form textarea { min-height: 112px; }
.vv-contact-form .wpcf7-submit {
  width: 100%;
  font-family: var(--wp--preset--font-family--roboto);
  font-size: 15px; font-weight: 500; color: #fff;
  background: var(--vv-accent);
  border: 0; border-radius: 3px;
  height: 40px; padding: 0 24px;
  text-transform: uppercase; cursor: pointer;
}
.vv-contact-form .wpcf7-submit:hover { background: var(--vv-primary); }

/* ---- Accordéon « Nos valeurs » : « + » À GAUCHE + animation d'ouverture -- */
.vv-accordion details { border-bottom: 1px solid #e5e5e5; }
.vv-accordion summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 14px;
  padding: 18px 0;
  font-family: var(--wp--preset--font-family--bodoni);
  font-size: 20px; font-weight: 600; color: var(--vv-primary);
}
.vv-accordion summary::-webkit-details-marker { display: none; }
/* marqueur +/- À GAUCHE du titre */
.vv-accordion summary::before {
  content: "+";
  flex: 0 0 auto;
  width: 1em; text-align: center;
  color: var(--vv-accent); font-weight: 400;
  transition: transform .3s ease;
}
.vv-accordion details[open] summary::before { content: "–"; }

/* Animation d'ouverture : le corps est enveloppé dans .vv-accordion__body
   qui s'anime en hauteur via grid-template-rows (0fr -> 1fr). Le JS pose la
   classe .is-open et bascule le contenu pour que la transition soit visible. */
/* Sans JS : le contenu d'un <details open> reste à sa hauteur naturelle.
   Avec JS (.js-reveal), on collapse via grid-rows pour pouvoir animer. */
/* Animation par max-height piloté en JS (scrollHeight) : fiable et fluide. */
.js-reveal .vv-accordion__wrap {
  overflow: hidden;
  max-height: 0;
  transition: max-height .32s ease;
  will-change: max-height;
}
.vv-accordion__body > :first-child { padding-top: 4px; }
.vv-accordion__body { padding-bottom: 18px; color: var(--vv-text); }
.vv-accordion__body p { margin: 0 0 12px; }
.vv-accordion__body ul { margin: 0 0 12px; padding-left: 20px; }
@media (prefers-reduced-motion: reduce) {
  .vv-accordion__wrap { transition: none; }
}

/* ---- Garde-fous couleurs (piège §12 du skill) --------------------------- */
h2.has-accent-color { color: var(--vv-accent) !important; }
h2.has-primary-color, .footer-title.has-primary-color { color: var(--vv-primary) !important; }

/* ---- Anti débordement horizontal (défaut §2 : carrousel hors cadre) ----- */
html, body { overflow-x: hidden; }
.site-main img { max-width: 100%; height: auto; }

/* ---- Actualités de la matière (fiches expertises) ----------------------- */
.vv-expertise-news__list {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  list-style: none; margin: 40px 0 0; padding: 0;
}
.vv-expertise-news__list .vv-article-card { margin: 0; }
.vv-expertise-news__list .wp-block-post-title { margin: 0 0 12px; }
.vv-expertise-news__more { text-align: center; margin: 32px 0 0; }
.vv-expertise-news__empty { text-align: center; margin: 24px 0 0; color: #6b6b6b; }
@media (max-width: 1024px) { .vv-expertise-news__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .vv-expertise-news__list { grid-template-columns: 1fr; } }

/* ---- Portraits individuels (accueil, « Notre cabinet ») ----------------- */
.vv-portraits { display: flex; flex-wrap: nowrap; gap: 16px; margin: 0; }
.vv-portraits .vv-portrait { flex: 1 1 0; min-width: 0; margin: 0; }
.vv-portraits .vv-portrait a { display: block; }
.vv-portraits .vv-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }

/* ---- Archives : le header est fixe, le contenu démarre 60px sous lui ---- */
.site-main.vv-archive { padding-top: calc(var(--vv-header-h) + 60px); }

/* ---- Article : reproduction de la page en ligne (mesurée à 1440px) ------- */
/* section 50px sous le header, colonne 860px, 10px de marge interne, 50px sous la section */
.site-main.vv-single { padding-top: calc(var(--vv-header-h) + 50px); padding-bottom: 60px; padding-left: 10px; padding-right: 10px; }
.vv-single .vv-article-title {
  margin: 60px auto 50px !important;
  font-size: 32px; line-height: 48px; font-weight: 600; text-align: center;
}
.vv-single .vv-article-meta { margin: 0 auto 20px !important; gap: 0; }
.vv-single .vv-article-meta,
.vv-single .vv-article-meta a {
  font-family: var(--wp--preset--font-family--roboto);
  font-size: 13px; font-weight: 300; line-height: 19.5px; color: #54595f; text-decoration: none;
}
.vv-single .vv-article-meta > * { margin: 0 !important; }
.vv-single .vv-article-meta > .wp-block-post-date,
.vv-single .vv-article-meta > .wp-block-post-terms { padding-left: 8px; }
.vv-single .vv-article-body { margin: 0 auto !important; }
.vv-single .vv-article-body > p {
  text-align: justify; line-height: 2.1em; margin: 0 0 14.4px !important;
}
.vv-single .vv-article-body a { color: #CC3366; text-decoration: none; }
/* espace sous le contenu (marge 20 + bloc de partage vide de 56 en ligne) puis filet pointillé */
.vv-single .vv-article-body { padding-bottom: 76px; }
.vv-single hr.wp-block-separator.vv-article-sep {
  width: 100% !important; max-width: 860px; height: 0; opacity: 1;
  border: 0; border-top: 1px dotted #000; background: none;
  margin: 28px auto 28px !important;
}

@media (max-width: 767px) {
  .vv-single .vv-article-meta { margin-bottom: 20px !important; gap: 15px; }
  .vv-single .vv-article-meta,
  .vv-single .vv-article-meta a { line-height: 27px; }
  .vv-single .vv-article-body { padding-left: 32px; padding-right: 32px; padding-bottom: 120px; }
}

/* ======================================================================
   Page Publications (maquette v4) — rendu serveur, bloc vv/publications
   ====================================================================== */
.vv-pub {
  --vin: #6D071A; --rose: #C87777; --rose-pale: #F6EDED; --gris: #7A7A7A;
  --gris-fonce: #3F3A3A; --gris-clair: #E9E5E3; --fond-doux: #F7F5F3;
  --serif: var(--wp--preset--font-family--bodoni); --sans: var(--wp--preset--font-family--roboto);
  font-family: var(--sans); color: var(--gris-fonce); background: #fff;
  -webkit-font-smoothing: antialiased;
}
.vv-pub * { box-sizing: border-box; }
.vv-pub p { margin: 0 0 1em; }
.vv-pub h1, .vv-pub h2 { font-family: var(--serif); color: var(--vin); margin: 0; font-weight: 600; line-height: 1.18; }
.vv-pub a { text-decoration: none; }
.vv-pub .vp-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.vv-pub .vp-wrap--narrow { max-width: 980px; }
.vv-pub .vp-head { padding: 58px 0 30px; text-align: center; }
.vv-pub .vp-kicker { font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--rose); margin-bottom: 14px; }
.vv-pub .vp-head h1 { font-size: 46px; letter-spacing: -.01em; }
.vv-pub .vp-lede { font-family: var(--wp--preset--font-family--roboto-slab); font-size: 16px; line-height: 1.7; color: var(--gris); max-width: 620px; margin: 16px auto 0; }
.vv-pub .vp-tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #A34F4F; border-bottom: 1px solid rgba(200,119,119,.45); padding-bottom: 3px; margin-bottom: 12px; }
.vv-pub .vp-more { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #A34F4F; }
.vv-pub .vp-more::after { content: "→"; font-size: 13px; transition: transform .18s ease; }
.vv-pub .vp-more:hover::after { transform: translateX(3px); }
.vv-pub .vp-date { font-size: 11.5px; letter-spacing: .06em; color: #A9A2A0; text-transform: uppercase; }
.vv-pub .vp-empty { padding: 50px 0; text-align: center; color: var(--gris); font-size: 14px; }

/* onglets */
.vv-pub .p4-tabs { border-top: 1px solid var(--gris-clair); border-bottom: 1px solid var(--gris-clair); background: #FCFBFB; }
.vv-pub .p4-tabs__row { display: flex; align-items: center; gap: 4px; }
.vv-pub .p4-tab { position: relative; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8A8482; padding: 18px 2px 16px; margin-right: 34px; transition: color .16s ease; }
.vv-pub .p4-tab:hover, .vv-pub .p4-tab.is-active { color: var(--vin); }
.vv-pub .p4-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--rose); }

/* barre des matières : collée sous le header fixe */
/* Barre de filtres : collante SOUS l'en-tête fixe, donc elle doit rester
   DERRIÈRE lui (en-tête z-index 10). En z-index 20 elle passait devant et
   coupait le menu déroulant — défaut visible seulement sur Publications. */
.vv-pub .p4-bar { border-bottom: 1px solid var(--gris-clair); background: #fff; padding: 16px 0; position: sticky; top: var(--vv-header-h); z-index: 5; }
.vv-pub .p4-bar__row { display: flex; align-items: center; gap: 22px; }
.vv-pub .p4-cats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; padding-bottom: 2px; }
.vv-pub .p4-cat { font-size: 12px; font-weight: 500; letter-spacing: .02em; color: #5E5757; background: #fff; border: 1px solid var(--gris-clair); border-radius: 999px; padding: 8px 15px; white-space: nowrap; transition: all .16s ease; }
.vv-pub .p4-cat:hover { border-color: var(--rose); color: #9E4A4A; }
.vv-pub .p4-cat.is-active { background: var(--vin); border-color: var(--vin); color: #fff; }
.vv-pub .p4-search { display: flex; align-items: center; flex: 0 0 300px; margin: 0; }
.vv-pub .p4-search input[type="search"] { flex: 1; min-width: 0; font-family: var(--sans); font-size: 12.5px; color: var(--gris-fonce); border: 1px solid var(--gris-clair); border-right: 0; border-radius: 2px 0 0 2px; padding: 10px 14px; background: #fff; outline: none; height: 41px; }
.vv-pub .p4-search input::placeholder { color: #B0A9A7; }
.vv-pub .p4-search input:focus { border-color: var(--rose); }
.vv-pub .p4-search button { border: 1px solid var(--vin); background: var(--vin); color: #fff; border-radius: 0 2px 2px 0; padding: 0 13px; height: 38px; display: grid; place-items: center; cursor: pointer; }

/* grille */
.vv-pub .p4-panel { padding-top: 40px; padding-bottom: 8px; }
.vv-pub .p4-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.vv-pub .p4-card { display: flex; flex-direction: column; border: 1px solid var(--gris-clair); border-radius: 3px; background: #fff; padding: 24px 24px 18px; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.vv-pub .p4-card:hover { border-color: rgba(200,119,119,.55); box-shadow: 0 10px 28px -14px rgba(109,7,26,.22); transform: translateY(-2px); }
.vv-pub .p4-card__t { font-size: 19px; margin: 0; }
.vv-pub .p4-card__t a { color: var(--vin); }
.vv-pub .p4-card__t a:hover { color: var(--rose); }
.vv-pub .p4-card__x { font-size: 13.5px; line-height: 1.68; color: var(--gris); margin: 0 0 1em; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.vv-pub .p4-card__f { margin-top: auto; padding-top: 14px; border-top: 1px solid #F1EEEC; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* pagination */
.vv-pub .p4-pager { display: flex; align-items: center; justify-content: space-between; margin: 44px 0 40px; padding-top: 22px; border-top: 1px solid var(--gris-clair); }
.vv-pub .p4-pager__info { font-size: 12px; letter-spacing: .04em; color: #A9A2A0; }
.vv-pub .p4-pager__nav { display: flex; align-items: center; gap: 6px; }
.vv-pub .p4-pager__nav a, .vv-pub .p4-pager__prev { font-size: 12.5px; color: #5E5757; border: 1px solid var(--gris-clair); border-radius: 2px; padding: 8px 13px; min-width: 38px; text-align: center; }
.vv-pub .p4-pager__nav a:hover { border-color: var(--rose); color: #9E4A4A; }
.vv-pub .p4-pager__nav .is-current { background: var(--vin); border-color: var(--vin); color: #fff; }
.vv-pub .p4-pager__prev { color: #C0BAB8; }
.vv-pub .p4-pager__gap { color: #A9A2A0; }

/* fiches pratiques */
.vv-pub .p4-fiches-intro { max-width: 640px; margin-bottom: 34px; }
.vv-pub .p4-fiches-intro h2 { font-size: 30px; margin-bottom: 12px; }
.vv-pub .p4-fiches-intro p { font-size: 14.5px; line-height: 1.75; color: var(--gris); }

@media (max-width: 1024px) {
  .vv-pub .p4-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .vv-pub .vp-head h1 { font-size: 34px; }
  .vv-pub .p4-bar { position: static; }
  .vv-pub .p4-bar__row { flex-direction: column; align-items: stretch; gap: 12px; }
  .vv-pub .p4-search { flex: 1 1 auto; }
  .vv-pub .p4-cats { flex-wrap: nowrap; overflow-x: auto; }
  .vv-pub .p4-grid { grid-template-columns: 1fr; gap: 18px; }
  .vv-pub .p4-tab { margin-right: 20px; }
  .vv-pub .p4-pager { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* Tablette étroite (mesuré en ligne à 768px) : colonnes texte / icônes côte à côte, icônes empilées */
@media (min-width: 768px) and (max-width: 900px) {
  .footer-contact { flex: 0 0 162px; min-width: 0; }
  .footer-social { flex: 0 0 97px; flex-direction: column; padding-left: 0; }
  .footer-social__link { margin-right: 0; }
}

/* ---- Onglet Fiches pratiques : cartes « document » (maquette v4, p4.css) ---- */
.vv-pub .p4-fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; padding-bottom: 6px; }
.vv-pub .p4-fcard { display: flex; flex-direction: column; }
.vv-pub .p4-doc { position: relative; background: var(--fond-doux); border: 1px solid var(--gris-clair); border-radius: 3px; padding: 22px 22px 0; height: 250px; overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease; margin-bottom: 16px; }
.vv-pub .p4-fcard:hover .p4-doc { border-color: rgba(200,119,119,.6); box-shadow: 0 14px 30px -18px rgba(109,7,26,.28); }
.vv-pub .p4-doc__page { background: #fff; border: 1px solid #E4DFDC; border-radius: 2px 2px 0 0; box-shadow: 0 8px 18px -12px rgba(0,0,0,.28); padding: 16px 16px 0; height: 100%; display: flex; flex-direction: column; gap: 8px; }
.vv-pub .p4-doc__head { height: 6px; width: 42%; background: var(--vin); border-radius: 1px; margin-bottom: 6px; }
.vv-pub .p4-doc__line { height: 4px; background: #E6E1DE; border-radius: 1px; }
.vv-pub .p4-doc__bloc { height: 34%; background: #F4F1EF; border-radius: 2px; border-left: 2px solid var(--rose); }
.vv-pub .p4-doc__badge { position: absolute; right: 14px; bottom: 14px; background: var(--vin); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; padding: 5px 9px; border-radius: 2px; }
.vv-pub .p4-fcard__cat { font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #A34F4F; margin-bottom: 8px; }
.vv-pub .p4-fcard__t { font-family: var(--serif); font-size: 18px; line-height: 1.35; color: var(--vin); margin-bottom: 8px; }
.vv-pub .p4-fcard__m { font-size: 11.5px; color: #A9A2A0; letter-spacing: .04em; }
@media (max-width: 1024px) { .vv-pub .p4-fgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px)  { .vv-pub .p4-fgrid { grid-template-columns: 1fr; } }