/* =====================================================================
   Grille des experts (extension braillard-pods) aux codes du site
   (client 2026-10-06 : « en accord avec la charte graphique »).
   Chargée APRÈS la feuille de l'extension. Couleur d'accent = pilier
   expertises (ardoise). Les couleurs posées en ligne par l'extension
   sont neutralisées (!important).
   ===================================================================== */
.elementor-widget-braillard-pods-grid{ --pods-accent: var(--br-expertises, #4D6B72); }

/* Filtres : comme la ligne de sous-menu des pages (texte seul, actif dans la couleur
   du pilier et souligné), plus de pastilles arrondies colorées. */
.elementor-widget-braillard-pods-grid .pods-filters{ gap: 10px clamp(18px, 1.85vw, 32px); margin-bottom: clamp(32px, 3vw, 52px); }
.elementor-widget-braillard-pods-grid .pods-filter,
.elementor-widget-braillard-pods-grid .pods-filter:hover,
.elementor-widget-braillard-pods-grid .pods-filter:focus{
  padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  color: var(--br-black, #000) !important;
  font-family: var(--br-font-body); font-weight: 400; font-size: clamp(15px, 1.16vw, 20px); line-height: 1.6;
  text-decoration: none; cursor: pointer; transition: color .2s ease;
}
.elementor-widget-braillard-pods-grid .pods-filter:hover{ color: var(--pods-accent) !important; }
.elementor-widget-braillard-pods-grid .pods-filter--active,
.elementor-widget-braillard-pods-grid .pods-filter--active:hover{
  color: var(--pods-accent) !important;
  text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px;
}

/* Cartes : sans arrondi, ombre ni fond gris ; image carrée en noir et blanc. */
.elementor-widget-braillard-pods-grid .pods-grid{ gap: clamp(28px, 2.3vw, 40px) clamp(16px, 1.85vw, 32px); }
.elementor-widget-braillard-pods-grid .pod-card,
.elementor-widget-braillard-pods-grid .pod-card:hover{ background: none; border-radius: 0; box-shadow: none; transform: none; }
.elementor-widget-braillard-pods-grid .pod-card__image{ background: #ececea; }
.elementor-widget-braillard-pods-grid .pod-card__image img{ filter: grayscale(1); }
.elementor-widget-braillard-pods-grid .pod-card:hover .pod-card__image img{ transform: none; filter: grayscale(0); transition: filter .4s ease; }
.elementor-widget-braillard-pods-grid .pod-card__placeholder{ background: #ececea; color: #cfcbc4; }
.elementor-widget-braillard-pods-grid .pod-card__content{ padding: 14px 0 0; }
.elementor-widget-braillard-pods-grid .pod-card__name{
  font-family: var(--br-font-body) !important; font-style: normal; font-weight: 400;
  font-size: clamp(15px, 1.16vw, 20px); line-height: 1.25; color: var(--br-black, #000) !important;
  min-height: 2.5em; margin: 0 0 10px;
}
.elementor-widget-braillard-pods-grid .pod-card__surname{ font-weight: 500; }
.elementor-widget-braillard-pods-grid .pod-card:hover .pod-card__name{ color: var(--pods-accent) !important; }

/* Étiquettes : rectangles pleins dans la couleur du pilier, comme les badges des activités. */
.elementor-widget-braillard-pods-grid .pod-tag,
.pods-modal .pod-tag{
  background: var(--br-expertises, #4D6B72) !important; color: var(--br-white, #fff) !important; border: 0 !important; border-radius: 0 !important;
  font-family: var(--br-font-body); font-weight: 500; font-size: clamp(12px, .85vw, 14px); line-height: 1; padding: 5px 7px;
}

/* Panneau de description et fenêtre de détail : formes droites, polices du site. */
.elementor-widget-braillard-pods-grid .pods-description{ background: none; border-radius: 0; border-left: 1px solid rgba(0,0,0,.15); padding: 0 0 0 28px; }
.elementor-widget-braillard-pods-grid .pods-description__title{ font-family: var(--br-font-display); font-style: italic; font-weight: 300; font-size: clamp(24px, 2vw, 34px); color: var(--pods-accent); }
.elementor-widget-braillard-pods-grid .pods-description__text{ font-family: var(--br-font-body); font-size: clamp(15px, 1.16vw, 20px); line-height: 1.45; }
.elementor-widget-braillard-pods-grid .pods-description__link{ color: var(--br-black); text-decoration: underline; text-underline-offset: 3px; }
.pods-modal__dialog{ border-radius: 0 !important; box-shadow: 0 24px 64px rgba(0,0,0,.18) !important; }
.pods-modal__image, .pods-modal__image img{ border-radius: 0 !important; }
.pods-modal__image img{ filter: grayscale(1); }
.pods-modal__name{ font-family: var(--br-font-body) !important; font-weight: 500; color: var(--br-black) !important; }
.pods-modal__bio{ font-family: var(--br-font-body); line-height: 1.5; }
.pods-modal__close{ border-radius: 0 !important; }
/* Ajustements après contrôle : coins droits partout, texte aligné sur l'image, étiquettes
   complètes sur 2 lignes plutôt que tronquées. */
.elementor-widget-braillard-pods-grid .pod-card__image,
.elementor-widget-braillard-pods-grid .pod-card__image img,
.elementor-widget-braillard-pods-grid .pod-card__placeholder{ border-radius: 0 !important; }
.elementor-widget-braillard-pods-grid .pod-card__content{ padding: 14px 0 0 !important; }
.elementor-widget-braillard-pods-grid .pod-tag{ white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.25 !important; }
/* La carte garde un arrondi posé par Elementor (réglage du widget) : on l'annule ;
   le filet coloré en ligne du panneau de description passe à la couleur du pilier. */
.elementor-widget-braillard-pods-grid .pod-card{ border-radius: 0 !important; }
.elementor-widget-braillard-pods-grid .pods-description{ border-top: 0 !important; }

/* Même correction d'équilibre vertical que les badges des activités (Helvetica). */
.elementor-widget-braillard-pods-grid .pod-tag, .pods-modal .pod-tag{ padding: 6px 7px 4px !important; }

/* Filtre sélectionné plus visible (client 2026-10-06) : graisse Medium, couleur du pilier
   et trait épais dessous ; « Tous » suit la même règle. */
.elementor-widget-braillard-pods-grid .pods-filters .pods-filter.pods-filter--active{
  font-weight: 500 !important; color: var(--pods-accent) !important;
  text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 8px !important;
}

/* Domaine sélectionné : texte de description à GAUCHE, experts à DROITE, 50/50
   (client 2026-10-06). L'extension posait le panneau à droite sur 1/3. */
@media (min-width: 901px){
  .elementor-widget-braillard-pods-grid .pods-grid-layout--with-desc{ gap: clamp(32px, 3vw, 56px); }
  .elementor-widget-braillard-pods-grid .pods-grid-layout--with-desc .pods-description{
    order: -1; flex: 0 0 calc(50% - clamp(16px, 1.5vw, 28px)); max-width: none;
    border-left: 0; padding: 0; top: 140px;
  }
  .elementor-widget-braillard-pods-grid .pods-grid-layout--with-desc .pods-grid{
    flex: 0 0 calc(50% - clamp(16px, 1.5vw, 28px)); grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* Couleurs posées en ligne par l'extension (vert, etc.) remplacées par celle du pilier. */
.elementor-widget-braillard-pods-grid .pods-description__title{ color: var(--pods-accent) !important; }
.elementor-widget-braillard-pods-grid .pods-description__text{ color: var(--br-black, #000) !important; }
.elementor-widget-braillard-pods-grid .pods-description__link{ color: var(--br-black, #000) !important; font-weight: 400 !important; font-size: clamp(15px, 1.16vw, 20px) !important; }
.elementor-widget-braillard-pods-grid .pods-description__link:hover{ color: var(--pods-accent) !important; }

/* Changement de thématique (voir pods-charte.js) : grille masquée d'un coup pendant
   l'échange, puis fondu d'entrée ; plus d'effet d'échelle sur les fiches ni de glissement
   du panneau, pour un passage net d'une thématique à l'autre. */
.elementor-widget-braillard-pods-grid .pods-grid-layout{ transition: opacity .35s ease; }
.elementor-widget-braillard-pods-grid .pods-grid-layout.br-pods-switching{ opacity: 0; transition: none; }
.elementor-widget-braillard-pods-grid .pod-card--hiding{ transform: none !important; }
.elementor-widget-braillard-pods-grid .pod-card--showing{ animation: none !important; opacity: 1; }
.elementor-widget-braillard-pods-grid .pods-description{ animation: none !important; }

/* Domaine sélectionné (client 2026-10-06) : pas de lien « En savoir plus » ; les photos
   démarrent à la hauteur du TEXTE de la description, pas de son titre. Le décalage =
   hauteur de ligne du titre + sa marge, posées ici explicitement pour rester justes. */
.elementor-widget-braillard-pods-grid .pods-description__link{ display: none !important; }
.elementor-widget-braillard-pods-grid .pods-description__title{ font-size: clamp(24px, 2vw, 34px); line-height: 1.25 !important; margin: 0 0 16px !important; }
@media (min-width: 901px){
  .elementor-widget-braillard-pods-grid .pods-grid-layout--with-desc .pods-grid{ margin-top: calc(clamp(24px, 2vw, 34px) * 1.25 + 16px); }
}

/* Fenêtre de détail d'un expert : elle est hors de la page Elementor, donc les liens y
   prenaient la couleur par défaut du thème de base (framboise #c36) au lieu de la charte. */
.pods-modal a, .pods-modal a:visited{ color: var(--br-black, #000) !important; text-decoration: underline; text-underline-offset: 3px; }
.pods-modal a:hover{ color: var(--br-expertises, #4D6B72) !important; }
/* Biographies collées depuis Word : jamais de débordement à droite. */
.pods-modal__bio{ overflow-wrap: break-word; }
.pods-modal__content, .pods-modal__body{ overflow-x: hidden !important; }   /* jamais de défilement horizontal dans la fiche */