/**
 * dynamic-additions.css
 * ─────────────────────────────────────────────────────────────
 * Styles UNIQUEMENT pour les nouveaux composants dynamiques qui
 * n'existaient pas dans le prototype (arborescence d'organigramme
 * générée depuis ACF). Ne modifie AUCUNE règle du design validé.
 * Ces styles ne s'appliquent que si l'administrateur construit un
 * organigramme à partir d'éléments individuels ; par défaut le thème
 * affiche l'image d'organigramme d'origine et ce fichier reste inerte.
 */

.org-tree,
.org-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.org-tree {
  display: flex;
  justify-content: center;
}

.org-tree ul {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding-top: 32px;
  position: relative;
  flex-wrap: wrap;
}

.org-tree li {
  position: relative;
  text-align: center;
}

.org-node {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px);
  padding: 18px 22px;
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, .05));
  min-width: 180px;
}

.org-photo img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
}

.org-meta strong {
  display: block;
  font-size: .98rem;
  color: var(--navy, #083868);
}

.org-meta span {
  display: block;
  font-size: .82rem;
  color: #667;
  margin-top: 2px;
}

/* Connecteurs simples (dégradation gracieuse si non désiré) */
.org-tree ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 32px;
  background: var(--border, #e5e7eb);
}

.org-tree>li>.org-node {
  margin-bottom: 4px;
}

@media (max-width: 720px) {
  .org-tree ul {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
}

/* ==========================================================================
   Pagination générée par WordPress (paginate_links)
   Le prototype stylait .pagination a / a.current. WordPress produit
   .page-numbers (liens) et span.page-numbers.current (page active) : on
   aligne le rendu sur le design d'origine, sans le modifier.
   ========================================================================== */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border, #e3e3e3);
  border-radius: 10px;
  background: #fff;
  color: var(--text, #1f2421);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  transition: all .25s ease;
}

.pagination a.page-numbers:hover {
  background: var(--sage, #6f8f77);
  border-color: var(--sage, #6f8f77);
  color: #fff;
  transform: translateY(-2px);
}

.pagination .page-numbers.current {
  background: var(--sage, #6f8f77);
  border-color: var(--sage, #6f8f77);
  color: #fff;
}

.pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
}

/* Galerie d'article (services / engagements / actualités) */
.article-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 32px 0;
}

.article-gallery a {
  display: block;
  border-radius: 12px;
  overflow: hidden;
}

.article-gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.article-gallery a:hover img {
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .article-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .article-gallery img {
    height: 150px;
  }
}

/* ==========================================================================
   Toast de confirmation (partage, copie de lien)
   Chargé globalement : la confirmation fonctionne sur TOUTES les pages de
   détail (service, projet, engagement, actualité).
   ========================================================================== */

#bgfi-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--navy, #083868);
  color: #fff;
  font-size: .93rem;
  font-weight: 500;
  line-height: 1.3;
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, .45);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 20px);
  transition: opacity .3s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

#bgfi-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

#bgfi-toast i {
  font-size: 1.05rem;
  color: var(--sage-light, #a8c0a0);
}

#bgfi-toast.is-error {
  background: #8c2f2f;
}

#bgfi-toast.is-error i {
  color: #ffd7d7;
}

@media (prefers-reduced-motion:reduce) {
  #bgfi-toast {
    transition: opacity .2s ease;
    transform: translate(-50%, 0);
  }
}

/* Le bouton « copier » confirme aussi sur place. */
.share-btn.copied {
  background: var(--sage, #6f8f77) !important;
  border-color: var(--sage, #6f8f77) !important;
  color: #fff !important;
}

.share-btn.copied i::before {
  content: "\f00c";
  /* fa-check */
}

/* ==========================================================================
   Filtres de catégorie des actualités
   ========================================================================== */

.news-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 44px;
}

.news-filter {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  border: 1px solid var(--border, #e3e3e3);
  border-radius: 999px;
  background: #fff;
  color: var(--text-2, #55605a);
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .25s ease;
}

.news-filter:hover {
  border-color: var(--navy, #083868);
  color: var(--navy, #083868);
}

.news-filter.active {
  background: var(--navy, #083868);
  border-color: var(--navy, #083868);
  color: #fff;
}

/* ==========================================================================
   Newsletter CF7 — styles GLOBAUX (accueil + pages de détail)
   Les mêmes règles que la page d'accueil, mais sans le scope `body.is-front`
   pour que le rendu soit identique partout où bgfi_newsletter() est appelée.
   Sur la page d'accueil, les règles `body.is-front .newsletter ...` restent
   présentes ET conformes : les valeurs sont identiques, aucune régression.
   ========================================================================== */

.newsletter .newsletter-form {
  display: flex;
  align-items: center;
  gap: 0;
}

.newsletter .newsletter-form>p {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex: 1;
  width: 100%;
}

.newsletter .newsletter-form br {
  display: none;
}

.newsletter .newsletter-form .wpcf7-form-control-wrap {
  flex: 1;
  display: block;
  min-width: 0;
}

.newsletter .newsletter-form input[type="email"] {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 14px 24px;
  color: #fff;
  font-family: var(--body);
  font-size: .95rem;
  outline: none;
}

.newsletter .newsletter-form input::placeholder {
  color: rgba(255, 255, 255, .6);
}

.newsletter .newsletter-form .wpcf7-submit {
  flex: 0 0 auto;
  padding: 14px 32px;
  border-radius: 50px;
  background: var(--sage);
  color: #fff;
  border: 0;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .85rem;
  cursor: pointer;
  transition: all var(--t);
  font-family: var(--body);
  white-space: nowrap;
}

.newsletter .newsletter-form .wpcf7-submit:hover {
  background: #fff;
  color: var(--navy);
}

.newsletter .newsletter-form .wpcf7-spinner {
  position: absolute;
  margin: 0 0 0 8px;
}

.newsletter form>p:last-of-type .newsletter-check {
  margin: 18px 0 0;
  text-align: center;
}

.newsletter .newsletter-check {
  font-size: .85rem;
  color: rgba(255, 255, 255, .75);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.newsletter .newsletter-check .wpcf7-form-control-wrap,
.newsletter .newsletter-check .wpcf7-acceptance,
.newsletter .newsletter-check .wpcf7-list-item {
  display: inline;
  margin: 0;
}

.newsletter .newsletter-check input {
  accent-color: var(--sage);
}

.newsletter .wpcf7-response-output {
  margin: 14px auto 0;
  max-width: 560px;
  border-radius: 12px;
  color: #fff;
  font-size: .9rem;
  text-align: center;
}

/* Neutralise les <p> auto-générés par CF7 qui créent un espacement
   non désiré. display:contents supprime la boîte du <p> (marges,
   padding, saut de ligne induit) sans toucher au DOM ni au form CF7. */

.newsletter .newsletter-form>p {
  display: contents;
}

.newsletter form.wpcf7-form>p:has(.newsletter-check) {
  display: contents;
}

/* Fallback pour navigateurs sans support de :has() (Firefox < 121) */
.newsletter form.wpcf7-form>p {
  margin: 0;
  padding: 0;
}