@charset "UTF-8";
/*
 * Inflexsys — Styles de mise en page des sections (patterns d'accueil).
 *
 * Ces styles complètent theme.json pour ce que les blocs core ne peuvent pas
 * exprimer seuls : cartes (survol, hauteur égale), tags « pilule », icônes de
 * savoir-faire, méga-menu accessible, illustrations placeholder.
 *
 * Règle : aucune valeur de design « en dur » — on réutilise les variables CSS
 * générées par theme.json (--wp--preset--* et --wp--custom--*).
 */
/* ---------------------------------------------------------------------------
 * Utilitaires de visibilité.
 * `ifx-hide-mobile` : élément masqué sous 768px (breakpoint mobile WP standard).
 * Utilisé p. ex. pour la colonne illustration du module onglets, qui devient
 * un slider plein largeur en mobile.
 * ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .ifx-hide-mobile {
    display: none !important;
  }
}
/* ---------------------------------------------------------------------------
 * 0. Hero / bandeau d'accueil
 * Le bloc reste un Groupe « contraint » (validation fiable) ; on gère la
 * hauteur et le centrage vertical ici, en CSS, sans toucher au markup.
 * ------------------------------------------------------------------------- */
.ifx-hero {
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Titre du hero : graisse de base regular, mots en gras via <strong>. */
.ifx-hero h1 {
  font-weight: 400;
}

.ifx-hero h1 strong {
  font-weight: 700;
}

/* Chevron de défilement (décoratif) sous les boutons. */
.ifx-hero__scroll {
  display: flex;
  justify-content: center;
  margin-top: var(--wp--preset--spacing--50, 2rem);
  color: var(--wp--preset--color--red-900, #e73b34);
}

.ifx-hero__scroll svg {
  width: 30px;
  height: auto;
  display: block;
}

/* Variante lien (gabarit d'article) : cliquable + micro-animation invitant au scroll.
 * Le focus visible est fourni globalement par foundations.css (RGAA 10.7).
 * L'animation est neutralisée par le bloc prefers-reduced-motion de foundations.css. */
a.ifx-hero__scroll,
a.ifx-hero__scroll:hover,
a.ifx-hero__scroll:focus,
a.ifx-hero__scroll:focus-visible {
  text-decoration: none;
  color: var(--wp--preset--color--red-900, #e73b34);
}

/* Aligné à gauche dans le gabarit d'article (l'accueil garde son centrage). */
a.ifx-hero__scroll {
  justify-content: flex-start;
}

a.ifx-hero__scroll svg {
  animation: ifx-hero-scroll-bounce 1.8s ease-in-out infinite;
}

a.ifx-hero__scroll:hover svg,
a.ifx-hero__scroll:focus-visible svg {
  animation-play-state: paused;
}

@keyframes ifx-hero-scroll-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}
/* ---------------------------------------------------------------------------
 * 0.b. Hero split (Réalisations, Publications)
 * Split texte à gauche / image à droite. Image ronds coins. Chevron rouge
 * cliquable pointant vers #page-content (ancre du contenu de la page).
 * ------------------------------------------------------------------------- */
.ifx-page-hero {
  min-height: 480px;
}

.ifx-page-hero h1 {
  font-weight: 700;
}

.ifx-page-hero__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--wp--custom--radius--lg, 16px);
}

/* Desktop : la colonne image s'étire sur toute la hauteur de la colonne
 * texte à sa gauche, et l'image remplit cette hauteur (recadrage cover). */
@media (min-width: 782px) {
  .ifx-page-hero__media.wp-block-column {
    align-self: stretch;
  }
  .ifx-page-hero__media .ifx-page-hero__image,
  .ifx-page-hero__media .ifx-page-hero__image img {
    height: 100%;
  }
  .ifx-page-hero__media .ifx-page-hero__image img {
    object-fit: cover;
  }
}
/* Mobile : réordonnancement vertical demandé — titre, texte, IMAGE, bouton,
 * flèche. L'image est dans l'autre colonne (donc dernière dans le DOM) : on
 * efface les boîtes des colonnes (display:contents) pour remonter leurs enfants
 * au niveau flex de .wp-block-columns, puis on les réordonne via `order`.
 * A11y : seul l'élément non focusable (image) change de place ; l'ordre de
 * tabulation bouton -> flèche reste inchangé (RGAA 10.3). */
@media (max-width: 781.98px) {
  .ifx-page-hero .wp-block-columns {
    display: flex;
    flex-direction: column;
  }
  .ifx-page-hero .wp-block-column {
    display: contents;
  }
  .ifx-page-hero .wp-block-column > h1 {
    order: 1;
  }
  .ifx-page-hero .wp-block-column > p {
    order: 2;
  }
  .ifx-page-hero .wp-block-column .ifx-page-hero__image {
    order: 3;
  }
  .ifx-page-hero .wp-block-column > .wp-block-buttons {
    order: 4;
  }
  .ifx-page-hero .wp-block-column > .ifx-page-hero__scroll {
    order: 5;
  }
}
a.ifx-page-hero__scroll {
  display: inline-flex;
  color: var(--wp--preset--color--red-900, #e73b34);
  margin-top: var(--wp--preset--spacing--40, 1.5rem);
  text-decoration: none;
}

a.ifx-page-hero__scroll:hover,
a.ifx-page-hero__scroll:focus,
a.ifx-page-hero__scroll:focus-visible {
  color: var(--wp--preset--color--red-900, #e73b34);
  text-decoration: none;
}

a.ifx-page-hero__scroll svg {
  width: 30px;
  height: auto;
  display: block;
  animation: ifx-hero-scroll-bounce 1.8s ease-in-out infinite;
}

a.ifx-page-hero__scroll:hover svg,
a.ifx-page-hero__scroll:focus-visible svg {
  animation-play-state: paused;
}

/* Ancre du contenu de la page (cible de a.ifx-page-hero__scroll).
 * Compense la hauteur du header sticky pour ne pas glisser la cible sous lui. */
#page-content {
  scroll-margin-top: var(--wp--preset--spacing--70, 4rem);
}

/* Hero header (pattern inflexsys/hero-header) : déplacé dans le partial
 * sections/_hero-header.scss (§0.b-bis) — structure sans wp:columns (flex). */
/* ---------------------------------------------------------------------------
 * 0.c. Grille Réalisations — cartes à largeurs alternées par ligne.
 * Base 5 colonnes ; chaque ligne = une petite (2/5) + une grande (3/5).
 * Lignes impaires : petite | grande ; lignes paires : grande | petite.
 * Robuste au filtrage : le filtre re-render la liste côté serveur, donc
 * l'ordre DOM (et donc les nth-child) reste cohérent après filtrage.
 * ------------------------------------------------------------------------- */
@media (min-width: 782px) {
  .ifx-filter-target .wp-block-post-template.ifx-grid-alt {
    grid-template-columns: repeat(5, 1fr) !important;
  }
  .ifx-grid-alt > li:nth-child(4n+1),
  .ifx-grid-alt > li:nth-child(4n) {
    grid-column: span 2 !important;
  }
  .ifx-grid-alt > li:nth-child(4n+2),
  .ifx-grid-alt > li:nth-child(4n+3) {
    grid-column: span 3 !important;
  }
}
/* ---------------------------------------------------------------------------
 * 1. Cartes (style de bloc « Inflexsys – Carte »)
 * Utilisé par savoir-faire, réalisations, ressources.
 * ------------------------------------------------------------------------- */
.wp-block-group.is-style-inflexsys-card {
  background-color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--electric-200);
  border-radius: var(--wp--custom--radius--lg, 16px);
  box-shadow: var(--wp--preset--shadow--default);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wp-block-group.is-style-inflexsys-card-gradient {
  background: var(--wp--preset--gradient--card-background);
  border-radius: var(--wp--custom--radius--lg, 16px);
}

/* Survol : léger soulèvement. Neutralisé par prefers-reduced-motion (foundations.css). */
.wp-block-group.is-style-inflexsys-card:hover,
.wp-block-group.is-style-inflexsys-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--wp--preset--shadow--hover);
}

/* Cartes cliquables (ressources) : toute la carte est un lien visuel. */
.ifx-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.ifx-card-link:hover,
.ifx-card-link:focus-visible {
  text-decoration: none;
}

/* Rangée de cartes (une carte par colonne) : hauteurs égales.
 * Les colonnes core s'étirent déjà (align-items: stretch) ; on demande à la
 * carte de remplir toute la hauteur de sa colonne. À n'utiliser que sur des
 * colonnes contenant UNE seule carte (réalisations, etc.). */
.ifx-cards .wp-block-column > .wp-block-group {
  height: 100%;
}

/* ---------------------------------------------------------------------------
 * 2. Tags « pilule » (mots-clés réalisations, catégories)
 * Liste sémantique <ul> sans puce, rendue en pastilles.
 * ------------------------------------------------------------------------- */
.ifx-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--20, 0.5rem);
}

.ifx-tags li {
  margin: 0;
}

.ifx-tag {
  display: inline-block;
  border: 1px solid var(--wp--preset--color--electric-900);
  color: var(--wp--preset--color--electric-900);
  border-radius: var(--wp--custom--radius--pill, 999px);
  padding: 0.25rem 0.875rem;
  font-size: var(--wp--preset--font-size--body-small);
  font-weight: 500;
  line-height: 1.4;
}

/* Carte ressource horizontale et cliquable. */
.ifx-resource-card {
  display: flex;
  gap: var(--wp--preset--spacing--40, 1.5rem);
  align-items: stretch;
  background-color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--electric-200);
  border-radius: var(--wp--custom--radius--lg, 16px);
  box-shadow: var(--wp--preset--shadow--default);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ifx-resource-card:hover,
.ifx-resource-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--wp--preset--shadow--hover);
  text-decoration: none;
}

.ifx-resource-card .ifx-media-placeholder {
  flex: 0 0 180px;
  min-height: 0;
}

.ifx-resource-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--wp--preset--spacing--40, 1.5rem) var(--wp--preset--spacing--40, 1.5rem) var(--wp--preset--spacing--40, 1.5rem) 0;
}

.ifx-resource-card__title {
  font-family: var(--wp--preset--font-family--heading, sans-serif);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--citation, 1.125rem);
  line-height: 1.4;
  color: var(--wp--preset--color--blue-900);
}

/* ---------------------------------------------------------------------------
 * 3. Icônes (savoir-faire, métadonnées ressources)
 * ------------------------------------------------------------------------- */
.ifx-icon {
  display: inline-flex;
  color: var(--wp--preset--color--electric-900);
}

.ifx-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ifx-icon--lg svg {
  width: 40px;
  height: 40px;
}

.ifx-icon--sm svg {
  width: 16px;
  height: 16px;
}

/* Métadonnée ressource (ex. « Article ») : icône + libellé. */
.ifx-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--wp--preset--color--electric-900);
  font-size: var(--wp--preset--font-size--body-small);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * 4. Illustration placeholder (zones photo en attente d'images réelles)
 * À retirer une fois les visuels intégrés (remplacer par core/image).
 * ------------------------------------------------------------------------- */
.ifx-media-placeholder {
  background: var(--wp--preset--gradient--card-background);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--blue-500);
  font-size: var(--wp--preset--font-size--body-small);
}

/* ---------------------------------------------------------------------------
 * 5. Méga-menu accessible (core/navigation, sous-menu « Savoir-faire »)
 * Le comportement (aria-expanded, clavier) est géré par le bloc core
 * Navigation. On habille seulement le panneau déroulant.
 * ------------------------------------------------------------------------- */
.site-header .wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation__submenu-container {
  border: 1px solid var(--wp--preset--color--electric-200);
  border-radius: var(--wp--custom--radius--lg, 16px);
  box-shadow: var(--wp--preset--shadow--hover);
  padding: var(--wp--preset--spacing--20, 0.5rem);
  min-width: 320px;
}

.site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  border-radius: var(--wp--custom--radius--md, 12px);
  padding: 0.625rem 1rem;
}

.site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background-color: var(--wp--preset--color--electric-50);
}

/* Sous-item actif du menu (page consultée) : souligné + semi-gras, en desktop
 * (méga-menu) comme en overlay mobile — le sélecteur cible le sous-menu quel
 * que soit le contexte. aria-current est injecté par le filtre PHP
 * inflexsys_navigation_mark_current (functions.php). RGAA 3.2 : l'état actif est
 * signalé par aria-current ET par un repère visible (soulignement), pas la
 * seule couleur. */
.site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content[aria-current] {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Barre animée sous les items de navigation de premier niveau (hover + actif).
 * Barre de 2px à coins arrondis ; au survol elle s'agrandit depuis le centre.
 * L'item actif affiche simplement la barre (pas d'animation, aucun autre changement). */
.site-header .wp-block-navigation__container.wp-block-navigation {
  gap: 48px;
}

.site-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  position: relative;
}

.site-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.site-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after,
.site-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible::after {
  transform: scaleX(1);
}

/* Item actif : barre affichée d'emblée, sans animation d'entrée. */
.site-header .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content::after,
.site-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current]::after {
  transform: scaleX(1);
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
    transition: none;
  }
}
/* ---------------------------------------------------------------------------
 * 5 bis. Menu mobile (overlay core/navigation, < 600px)
 * Le bloc core gère ouverture/fermeture, aria-expanded et le focus clavier.
 * On habille seulement : l'icône burger (3 barres — maquette), le bouton
 * Contact rapatrié dans l'overlay, et l'aplatissement du sous-menu
 * « Savoir-faire » (le §5 ci-dessus est une carte déroulante pensée desktop).
 * Point de bascule 600px = celui du bloc core
 * (wp-includes/blocks/navigation/style.css → responsive-container-open).
 * ------------------------------------------------------------------------- */
/* Icône burger : 3 barres au lieu des 2 barres du SVG core. On masque le SVG
 * et on dessine 3 traits en currentColor (suit la couleur de texte de
 * l'en-tête → contraste conservé, RGAA 3.2). L'aria-label du bouton, porté
 * par le cœur, reste inchangé (RGAA 11.9 / bouton nommé). */
.site-header .wp-block-navigation__responsive-container-open svg {
  display: none;
}

.site-header .wp-block-navigation__responsive-container-open::before {
  content: "";
  display: block;
  width: 24px;
  height: 16px;
  background-image: linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0);
  background-size: 100% 2px;
  background-position: left top, left center, left bottom;
  background-repeat: no-repeat;
}

/* Bouton Contact de la barre d'en-tête : masqué sous 600px (il réapparaît
 * dans l'overlay via .ifx-overlay-contact). Au-dessus de 600px il reste visible. */
@media (max-width: 599.98px) {
  .site-header .wp-block-buttons {
    display: none;
  }
}
/* Logo + bouton Contact réinjectés dans l'overlay par le filtre PHP
 * inflexsys_navigation_overlay_extras (functions.php). Ils vivent dans le
 * contenu de la nav, affiché EN LIGNE sur desktop : on les masque donc par
 * défaut et on ne les révèle que dans l'overlay ouvert (.is-menu-open). */
.ifx-overlay-logo,
.ifx-overlay-contact {
  display: none;
}

/* Le cœur réserve un padding-top de calc(2rem + 24px) en haut du contenu de
 * l'overlay pour dégager le bouton de fermeture (positionné en absolu). Comme
 * on place le logo à gauche sur cette même ligne, ce dégagement fait tomber
 * tout le contenu trop bas : on le supprime. Le bouton de fermeture (à droite)
 * ne chevauche pas le logo. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding-top: 0;
  gap: 0;
}

/* Logo en tête de l'overlay, aligné à gauche sur la ligne du bouton de fermeture. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .ifx-overlay-logo {
  display: block;
  margin-bottom: var(--wp--preset--spacing--gap-10);
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .ifx-overlay-logo img {
  display: block;
  width: auto;
  max-width: 185px;
}

/* Bouton Contact en pied de l'overlay. L'ancre porte .wp-block-button__link :
 * elle hérite automatiquement du style de bouton primaire de theme.json
 * (fond electric-900, survol blue-900) — aucun style de couleur à redéclarer. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .ifx-overlay-contact {
  display: block;
  margin-top: var(--wp--preset--spacing--gap-6);
}

/* Sous-menu « Savoir-faire » dans l'overlay : à plat. On retire le décor de
 * carte déroulante (bord/ombre/rayon/min-width) hérité du §5, réservé au
 * desktop. Le cœur gère déjà l'accordéon (openSubmenusOnClick) et le retrait.
 * On aligne aussi les sous-items à gauche (le cœur applique padding 2rem :
 * on le neutralise via le sélecteur .has-child, même spécificité, chargé après). */
.site-header .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container {
  box-shadow: none;
  border: 0;
  border-radius: 0;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Items du sous-menu dans l'overlay : texte simple aligné à gauche. Le §5
 * (mega-menu desktop) leur applique padding 1rem + rayon + fond de survol :
 * on le neutralise ici pour retrouver l'alignement de la maquette. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background-color: transparent;
}

/* Séparateur sous le groupe « Savoir-faire » (maquette). */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
  width: 100%;
  padding-bottom: var(--wp--preset--spacing--gap-5);
  border-bottom: 1px solid var(--wp--preset--color--electric-200);
  margin-bottom: var(--wp--preset--spacing--gap-5);
}

/* Poids typographiques de la maquette (overlay uniquement) :
 * - liens de 1er niveau autonomes (Publications / Réalisations / Notre vision) : 700 ;
 * - parent « Savoir-faire » : 500 (Body/Body-CTA) ;
 * - sous-items : 400 (Body/Body-Main, poids par défaut du corps → non redéclaré). */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-link > .wp-block-navigation-item__content {
  font-weight: 700;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content {
  font-weight: 500;
}

/* CTA « Contour clair » dans l'en-tête / le hero sur fond foncé. */
.wp-block-button.is-style-inflexsys-outline-light .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--white);
  border: 2px solid var(--wp--preset--color--white-700);
}

.wp-block-button.is-style-inflexsys-outline-light .wp-block-button__link:hover,
.wp-block-button.is-style-inflexsys-outline-light .wp-block-button__link:focus {
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--electric-900);
}

/* CTA « Translucide » : bord blanc fin sur fond transparent (état normal),
 * remplissage blanc 20% au survol (seul le fond change). Pour fonds foncés
 * (hero, dégradé). Texte et bord restent blancs dans tous les états. */
.wp-block-button.is-style-inflexsys-translucide .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--white);
  border-radius: var(--wp--custom--radius--small, 8px);
}

.wp-block-button.is-style-inflexsys-translucide .wp-block-button__link:hover,
.wp-block-button.is-style-inflexsys-translucide .wp-block-button__link:focus {
  background-color: var(--wp--preset--color--white-200);
}

/* CTA « Primaire blanc » (button/primary-white) : fond blanc, texte blue-900,
 * pour fonds foncés (hero, dégradé). Survol : seul le fond change → blanc 70%
 * (laisse transparaître légèrement le fond foncé). Rayon small. */
.wp-block-button.is-style-inflexsys-primary-white .wp-block-button__link {
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--blue-900);
  border-radius: var(--wp--custom--radius--small, 8px);
}

.wp-block-button.is-style-inflexsys-primary-white .wp-block-button__link:hover,
.wp-block-button.is-style-inflexsys-primary-white .wp-block-button__link:focus {
  background-color: var(--wp--preset--color--white-700);
}

/* ---------------------------------------------------------------------------
 * 6. Séparateur dégradé (entre sections)
 * ------------------------------------------------------------------------- */
.ifx-divider {
  height: 1px;
  border: 0;
  margin: 0 auto;
  background: linear-gradient(90deg, var(--wp--preset--color--electric-200), var(--wp--preset--color--electric-900), var(--wp--preset--color--electric-200));
}

/* Le premier separateur (juste apres le hero) est aere de 80px en haut
 * pour marquer visuellement la transition avec le corps d'article. */
.ifx-article-hero + .ifx-divider {
  margin-top: 80px;
}

/* ---------------------------------------------------------------------------
 * 7. Footer — liens et formulaire newsletter
 * ------------------------------------------------------------------------- */
main + footer {
  margin-block: 0;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--wp--preset--color--white);
}

.ifx-footer-newsletter input[type=email] {
  background-color: var(--wp--preset--color--white-200);
  border: 1px solid var(--wp--preset--color--white-400);
  color: var(--wp--preset--color--white);
}

.ifx-footer-newsletter ::placeholder {
  color: var(--wp--preset--color--white-700);
}

.ifx-social {
  display: flex;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ifx-social a {
  display: inline-flex;
  width: 24px;
  height: 24px;
  color: var(--wp--preset--color--white);
}

.ifx-social svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------------------------------------------------------------------------
 * X. Grille de posts Inflexsys (variation de core/query)
 * Cible : .wp-block-query.is-style-inflexsys-posts-grid
 * Design : cartes horizontales empilées (image gauche + titre/badge à droite),
 * 1 colonne sur desktop ET mobile. Conforme à la maquette Figma.
 * ------------------------------------------------------------------------- */
/* Conteneur : grille 1 colonne dont toutes les lignes ont la meme hauteur
 * (grid-auto-rows: 1fr => chaque item s'aligne sur le plus grand). */
.wp-block-query.is-style-inflexsys-posts-grid .wp-block-post-template {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: var(--wp--preset--spacing--30, 1rem);
}

.wp-block-query.is-style-inflexsys-posts-grid .wp-block-post-template > li {
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;
}

/* Card : groupe flex horizontal — image gauche, contenu droit. */
.wp-block-query.is-style-inflexsys-posts-grid .ifx-posts-grid__card {
  display: flex;
  align-items: stretch;
  height: 100%;
  background-color: var(--wp--preset--color--white, #fff);
  border: 1px solid var(--wp--preset--color--electric-200, #d3ddff);
  border-radius: var(--wp--custom--radius--lg, 16px);
  padding: var(--wp--preset--spacing--20, 0.75rem);
  gap: var(--wp--preset--spacing--30, 1rem);
  overflow: hidden;
  box-shadow: var(--wp--preset--shadow--default);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wp-block-query.is-style-inflexsys-posts-grid .ifx-posts-grid__card:hover,
.wp-block-query.is-style-inflexsys-posts-grid .ifx-posts-grid__card:focus-within {
  box-shadow: var(--wp--preset--shadow--hover);
}

/* Image : taille fixe, ratio préservé, coins arrondis. */
.wp-block-query.is-style-inflexsys-posts-grid .ifx-posts-grid__media {
  flex: 0 0 auto;
  align-self: stretch;
  width: 203px;
  max-width: 203px;
  aspect-ratio: auto;
}

.wp-block-query.is-style-inflexsys-posts-grid .ifx-posts-grid__media img,
.wp-block-query.is-style-inflexsys-posts-grid .ifx-posts-grid__media .wp-block-post-featured-image__placeholder {
  width: 100%;
  height: 100%;
  min-height: 120px;
  object-fit: cover;
  border-radius: var(--wp--custom--radius--md, 8px);
  display: block;
}

/* Corps de la card : titre + badge, alignés à gauche. */
.wp-block-query.is-style-inflexsys-posts-grid .ifx-posts-grid__body {
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--wp--preset--spacing--20, 0.75rem);
}

/* Titre : 2 lignes max (ellipsis), lien sans soulignement par défaut. */
.wp-block-query.is-style-inflexsys-posts-grid .ifx-posts-grid__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--medium, 1rem);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wp-block-query.is-style-inflexsys-posts-grid .ifx-posts-grid__title a {
  color: inherit;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Badge « Article » : pilule contour electric, fond transparent. */
.wp-block-query.is-style-inflexsys-posts-grid .ifx-posts-grid__badge .wp-block-button__link {
  border: 1px solid var(--wp--preset--color--electric-200, #d3ddff);
  background: transparent;
  color: var(--wp--preset--color--electric-900, #2457fd);
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
}

/* Mobile : on resserre l'image pour garder 1 colonne visible et lisible. */
@media (max-width: 599px) {
  .wp-block-query.is-style-inflexsys-posts-grid .ifx-posts-grid__media {
    width: 96px;
    max-width: 96px;
  }
  .wp-block-query.is-style-inflexsys-posts-grid .ifx-posts-grid__media img,
  .wp-block-query.is-style-inflexsys-posts-grid .ifx-posts-grid__media .wp-block-post-featured-image__placeholder {
    height: 100%;
    min-height: 96px;
  }
}
/* ---------------------------------------------------------------------------
 * 8. Article (template single.html)
 * Comme pour les patterns/parties de modèle (voir section 0), on évite tout
 * `layout:flex` écrit à la main dans le template : les groupes gardent une
 * disposition par défaut, et la mise en page réelle (grille 3 colonnes,
 * rangées) est pilotée ici via de simples classNames stables.
 * ------------------------------------------------------------------------- */
/* -- 8.1 En-tête d'article : image + titre/tags/temps de lecture ---------- */
/* Bord à bord obtenu nativement : le groupe .ifx-article-hero est lui-même
 * en align="full" dans le template (sinon il reçoit un padding global en
 * tant que conteneur "constrained" imbriqué, qui décale son enfant alignfull
 * du vrai bord d'écran). Rien à forcer ici en CSS. */
/* Hauteur fixe en rem (25.25rem = 404px à 16px de base) plutôt qu'en px :
 * la hauteur suit le zoom de texte du navigateur, meilleur confort RGAA
 * pour les personnes qui zooment sans mettre l'image en portion illisible. */
.ifx-article-hero__image img,
.ifx-article-hero__image .wp-block-post-featured-image__placeholder {
  width: 100%;
  height: 16.25rem;
  object-fit: cover;
  display: block;
}

@media (min-width: 782px) {
  .ifx-article-hero__image img,
  .ifx-article-hero__image .wp-block-post-featured-image__placeholder {
    height: 25.25rem;
  }
}
.ifx-article-hero__text {
  padding-top: var(--wp--custom--sizes-sections--desktop-gap);
  padding-bottom: var(--wp--custom--sizes-sections--desktop-gap);
  margin-block: 0;
}

/* La layout "constrained" injecte automatiquement une regle
 * .wp-container-... > :where(...) { max-width:1120px; margin:auto !important }
 * qui recentre les enfants du hero et laisse un vide a gauche. On force
 * l'alignement a gauche : max-width libere, marges laterales a 0.
 * Le !important est necessaire car la regle WP l'emploie sur les marges. */
.ifx-article-hero__text > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.single-post .ifx-article-hero__text h1 {
  margin-top: var(--Gap-3);
}

.ifx-article-hero__meta {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30, 1rem);
  margin-top: var(--wp--preset--spacing--40, 1.5rem);
}

.single-post .ifx-article-hero__meta {
  margin-top: var(--Gap-8);
}

.ifx-article-hero__meta .wp-block-post-terms {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--wp--preset--spacing--20, 0.5rem);
}

.ifx-article-hero__meta .wp-block-post-time-to-read {
  text-align: left;
  margin: 0;
}

/* Prefixe "Temps de lecture : " devant la valeur (ex: "4 minutes").
 * Le contenu genere par CSS est annonce par NVDA/JAWS/VoiceOver modernes,
 * mais si un RGAA strict est vise, remplacer par un vrai texte dans le DOM
 * via un filtre PHP sur le block core/post-time-to-read. */
.ifx-article-hero__meta .wp-block-post-time-to-read::before {
  content: "Temps de lecture : ";
}

.ifx-article-hero__meta .wp-block-post-terms a {
  display: inline-block;
  border: 1px solid var(--wp--preset--color--blue-900, #171441);
  color: var(--wp--preset--color--blue-900, #171441);
  border-radius: var(--wp--custom--radius--pill, 999px);
  padding: 0.25rem 0.875rem;
  text-decoration: none;
}

.ifx-article-hero__meta .wp-block-post-terms a:hover,
.ifx-article-hero__meta .wp-block-post-terms a:focus-visible {
  background: var(--wp--preset--color--electric-50, #f0f3fb);
}

/* -- 8.2 Mise en page 3 colonnes : sommaire / contenu / partage ----------- */
.ifx-article-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 250px;
  column-gap: var(--wp--preset--spacing--70, 4rem);
  align-items: start;
  /* Padding vertical de section (Figma : --Sizes-Sections-Padding-Desktop-top-bottom).
   * Le padding horizontal (24px) vient de .has-global-padding (theme.json). */
  padding-top: var(--Sizes-Sections-Padding-Desktop-top-bottom, 112px);
  padding-bottom: var(--Sizes-Sections-Padding-Desktop-top-bottom, 112px);
}

/* Largeur maquette : la section porte alignwide donc herite du wideSize global
 * (1200px). Ici on veut la largeur "section" du design system (1392px = 1440
 * canvas - 2x24 de padding lateraux). On surcharge uniquement pour ce bloc. */
/* =========================================================================
 * 9. Bloc « Tableau » – variante Inflexsys – Conformité (core/table).
 *    Activée par défaut sur toute insertion (voir editor-table-default.js
 *    + register_block_style('core/table','inflexsys-conformite')).
 *    L'auteur peut cliquer sur « Défaut » ou « Bandes zébrées » dans la
 *    sidebar « Style » pour retrouver l'apparence Gutenberg native.
 *
 *    Choix techniques :
 *    - border-collapse: separate : autorise un background sur <tr>, ce qui
 *      nous permet de dessiner le séparateur horizontal en linear-gradient
 *      (marges latérales propres, pas d'artefact aux coins arrondis).
 *    - Coins arrondis posés sur <figure> avec overflow:hidden (fiable).
 *    - Repli si l'auteur n'active pas l'option « En-tête » : la 1re ligne
 *      du tbody est stylée comme un en-tête (RGAA : préférer <thead>).
 * ========================================================================= */
.wp-block-table.is-style-inflexsys-conformite {
  margin: 0 auto;
}

figure.wp-block-table.is-style-inflexsys-conformite {
  border-radius: 12px;
  overflow: hidden;
  /* Ombre douce optionnelle — décommenter si besoin.
   * box-shadow: 0 2px 12px rgba(23, 20, 65, 0.06); */
}

.wp-block-table.is-style-inflexsys-conformite table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--wp--preset--font-family--body, inherit);
  color: var(--wp--preset--color--blue-700, #50587a);
}

/* ---- En-tête ------------------------------------------------------------ */
/* Cas idéal RGAA (<thead>) + repli 1re ligne du tbody si pas de thead. */
.wp-block-table.is-style-inflexsys-conformite thead th,
.wp-block-table.is-style-inflexsys-conformite thead td,
.wp-block-table.is-style-inflexsys-conformite > table > tbody:first-child > tr:first-child > th,
.wp-block-table.is-style-inflexsys-conformite > table > tbody:first-child > tr:first-child > td {
  background-color: var(--wp--preset--color--electric-900, #2457fd);
  color: var(--wp--preset--color--white, #fbfbfb);
  font-family: var(--wp--preset--font-family--heading, inherit);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--body-md, 1rem);
  text-align: center;
  padding: 1.25rem 1.5rem;
  border: 0;
  line-height: 1.3;
}

/* Séparateur vertical blanc entre les cellules d'en-tête. */
.wp-block-table.is-style-inflexsys-conformite thead th:not(:last-child),
.wp-block-table.is-style-inflexsys-conformite thead td:not(:last-child),
.wp-block-table.is-style-inflexsys-conformite > table > tbody:first-child > tr:first-child > th:not(:last-child),
.wp-block-table.is-style-inflexsys-conformite > table > tbody:first-child > tr:first-child > td:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.35);
}

/* ---- Corps -------------------------------------------------------------- */
/* Fond alterné posé sur <tr> (border-collapse: separate le permet).
 * En cas de repli « pas de thead », la 1re ligne du tbody garde le fond
 * bleu de l'en-tête grâce au background-color du <td> (rendu au-dessus). */
.wp-block-table.is-style-inflexsys-conformite tbody tr:nth-child(odd) {
  background-color: var(--wp--preset--color--electric-50, #f0f3fb);
}

.wp-block-table.is-style-inflexsys-conformite tbody tr:nth-child(even) {
  background-color: #ffffff;
}

/* Cellules du corps : padding, aucune bordure — le séparateur horizontal
 * est dessiné plus bas via un linear-gradient sur le <tr>. */
.wp-block-table.is-style-inflexsys-conformite tbody td {
  padding: 1.5rem;
  border: 0;
  background-color: transparent;
  vertical-align: middle;
  line-height: 1.5;
  font-size: var(--wp--preset--font-size--body-md, 1rem);
}

/* Séparateur horizontal : trait fin en linear-gradient, avec 1.5rem de
 * marge à gauche et à droite (pas d'artefact tronqué par les coins
 * arrondis, pas de fondu bizarre). Appliqué sur toutes les lignes SAUF
 * la première (qui touche l'en-tête). */
.wp-block-table.is-style-inflexsys-conformite tbody tr:not(:first-child) {
  background-image: linear-gradient(to right, transparent 0, transparent 1.5rem, var(--wp--preset--color--electric-200, #d3ddff) 1.5rem, var(--wp--preset--color--electric-200, #d3ddff) calc(100% - 1.5rem), transparent calc(100% - 1.5rem));
  background-position: top left;
  background-size: 100% 1px;
  background-repeat: no-repeat;
}

/* Première colonne : libellé gras, blue-900. */
.wp-block-table.is-style-inflexsys-conformite tbody td:first-child {
  color: var(--wp--preset--color--blue-900, #171441);
  font-weight: 700;
  font-family: var(--wp--preset--font-family--heading, inherit);
}

/* En cas de repli sans <thead>, la 1re ligne reste blanche même en 1re col. */
.wp-block-table.is-style-inflexsys-conformite > table > tbody:first-child > tr:first-child > td:first-child {
  color: var(--wp--preset--color--white, #fbfbfb);
}

/* Mise en avant (strong / b) : passe en blue-900. */
.wp-block-table.is-style-inflexsys-conformite tbody td strong,
.wp-block-table.is-style-inflexsys-conformite tbody td b {
  color: var(--wp--preset--color--blue-900, #171441);
  font-weight: 700;
}

/* ---- Légende (figcaption) ----------------------------------------------- */
.wp-block-table.is-style-inflexsys-conformite figcaption {
  color: var(--wp--preset--color--blue-700, #50587a);
  font-size: var(--wp--preset--font-size--body-sm, 0.875rem);
  text-align: center;
  margin-top: 0.75rem;
}

/* ---- Responsive < 768 --------------------------------------------------- */
@media (max-width: 767px) {
  .wp-block-table.is-style-inflexsys-conformite thead th,
  .wp-block-table.is-style-inflexsys-conformite thead td,
  .wp-block-table.is-style-inflexsys-conformite > table > tbody:first-child > tr:first-child > th,
  .wp-block-table.is-style-inflexsys-conformite > table > tbody:first-child > tr:first-child > td {
    padding: 1rem;
    font-size: var(--wp--preset--font-size--body-sm, 0.9375rem);
  }
  .wp-block-table.is-style-inflexsys-conformite tbody td {
    padding: 1rem;
    font-size: var(--wp--preset--font-size--body-sm, 0.9375rem);
  }
  /* Séparateur horizontal : marges réduites pour rester cohérent. */
  .wp-block-table.is-style-inflexsys-conformite tbody tr:not(:first-child) {
    background-image: linear-gradient(to right, transparent 0, transparent 1rem, var(--wp--preset--color--electric-200, #d3ddff) 1rem, var(--wp--preset--color--electric-200, #d3ddff) calc(100% - 1rem), transparent calc(100% - 1rem));
  }
}
.ifx-article-layout.alignwide {
  max-width: 1392px;
}

/* Cible du lien de défilement du hero (a.ifx-hero__scroll href="#article-content").
 * Compense la hauteur du header sticky pour ne pas glisser la cible sous lui. */
#article-content {
  scroll-margin-top: var(--wp--preset--spacing--70, 4rem);
}

/* ---------------------------------------------------------------------------
 * Grille des réalisations (archive-realisation.html)
 * Force la disposition 2 colonnes desktop, 1 colonne mobile — fiabilise
 * le rendu du core/post-template en mode grid, indépendamment de la version WP.
 * ------------------------------------------------------------------------- */
.ifx-filter-target .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--Gap-8, 2.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Coque de carte partagée (Réalisations + Publications) :
 * fond clair, coins arrondis, ombre bleutée, survol plus marqué. */
.ifx-filter-target .wp-block-post-template > li {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--gap-3, 0.5rem);
  background-color: var(--wp--preset--color--white, #fbfbfb);
  border-radius: var(--wp--custom--radius--lg, 16px);
  overflow: hidden;
  box-shadow: 4px 4px 10px 0 rgba(36, 87, 253, 0.2); /* card-shadow-default */
  padding: var(--wp--preset--spacing--gap-6, 1.5rem) var(--wp--preset--spacing--gap-7, 2rem);
  transition: box-shadow 0.25s ease;
}

.ifx-filter-target .wp-block-post-template > li:hover,
.ifx-filter-target .wp-block-post-template > li:focus-within {
  box-shadow: 4px 4px 10px 0 rgba(36, 87, 253, 0.9); /* card-shadow-hover */
}

/* Image collée aux bords de la carte (déborde le padding), texte en retrait.
 * Les coins hauts sont arrondis par le overflow:hidden + radius de la carte. */
.ifx-filter-target .wp-block-post-template > li .wp-block-post-featured-image {
  margin-top: calc(-1 * var(--wp--preset--spacing--gap-6, 1.5rem));
  margin-right: calc(-1 * var(--wp--preset--spacing--gap-7, 2rem));
  margin-left: calc(-1 * var(--wp--preset--spacing--gap-7, 2rem));
  margin-bottom: var(--wp--preset--spacing--30, 1rem);
}

.ifx-filter-target .wp-block-post-template > li .wp-block-post-featured-image a {
  display: block;
  height: 100%;
}

.ifx-filter-target .wp-block-post-template > li .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 0;
}

/* Titre : navy foncé, gras, souligné au survol seulement. */
.ifx-filter-target .wp-block-post-template > li .wp-block-post-title {
  margin: 0;
  line-height: 1.3;
  font-weight: 700;
}

.ifx-filter-target .wp-block-post-template > li .wp-block-post-title a {
  text-decoration: none;
  color: var(--wp--preset--color--blue-900, #171441);
  font-size: 1.125rem;
  line-height: 1.5;
}

/* Cartouche catégorie / secteur : pastille bordée, texte navy, poussée en bas. */
.ifx-filter-target .wp-block-post-template > li .wp-block-post-terms {
  margin-top: auto;
  padding-top: var(--wp--preset--spacing--30, 1rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ifx-filter-target .wp-block-post-template > li .ifx-posts-grid__badge__item,
.wp-block-post-terms .ifx-posts-grid__badge__item {
  padding: var(--Gap-1) var(--Gap-3);
  border: 1px solid currentColor;
  border-radius: 2em;
}

/* Pastilles = pas de séparateur ", " natif (le gap flex suffit). */
.ifx-filter-target .wp-block-post-template > li .wp-block-post-terms .wp-block-post-terms__separator {
  display: none;
}

.ifx-filter-target .wp-block-post-template > li .wp-block-post-terms a {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  background-color: var(--wp--preset--color--white, #fbfbfb);
  color: var(--wp--preset--color--blue-900, #171441);
  font-size: 0.75rem;
  text-decoration: none;
  line-height: 1.2;
}

.ifx-filter-target .wp-block-post-template > li .wp-block-post-terms a:hover,
.ifx-filter-target .wp-block-post-template > li .wp-block-post-terms a:focus-visible {
  background-color: var(--wp--preset--color--electric-50, #eef1fe);
}

@media (max-width: 768px) {
  .ifx-filter-target .wp-block-post-template {
    grid-template-columns: 1fr;
    gap: var(--Gap-8, 2.5rem);
  }
  .ifx-filter-target .wp-block-post-template > li {
    padding: var(--Gap-6);
  }
}
/* ---------------------------------------------------------------------------
 * Grille des publications (home.html)
 * Seules différences avec les réalisations : 3 col desktop (2 tablette,
 * 1 mobile) et une méta « date » sobre au-dessus du titre.
 * ------------------------------------------------------------------------- */
.ifx-filter-target.ifx-publications-grid .wp-block-post-template {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ifx-filter-target.ifx-publications-grid .wp-block-post-template > li .wp-block-post-date {
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0.02em;
  margin: 0;
  color: var(--wp--preset--color--blue-700, #4c5a9e);
}

/* Hauteur d'image par grille : conteneur dimensionné, image en height:100%
 * + max-height de sécurité, toujours recadrée en cover. */
.ifx-filter-target.ifx-publications-grid .wp-block-post-template > li .wp-block-post-featured-image {
  height: 180px;
}

.ifx-filter-target.ifx-publications-grid .wp-block-post-template > li .wp-block-post-featured-image img {
  max-height: 180px;
}

.ifx-filter-target .ifx-grid-alt > li .wp-block-post-featured-image {
  height: 225px;
}

.ifx-filter-target .ifx-grid-alt > li .wp-block-post-featured-image img {
  max-height: 225px;
}

/* Excerpt des cartes réalisations : tronqué sur une seule ligne avec "…".
 * Le texte complet reste dans le DOM (lu par les lecteurs d'écran). */
.ifx-filter-target .ifx-grid-alt > li .wp-block-post-excerpt p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .ifx-filter-target.ifx-publications-grid .wp-block-post-template {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .ifx-filter-target.ifx-publications-grid .wp-block-post-template {
    grid-template-columns: 1fr;
  }
}
/* Barre de filtres sticky : c'est desormais le GROUPE (.ifx_tabs-filter-group)
 * qui reste colle sous le header pendant le scroll, jusqu'a la sortie de la
 * section #page-content. Les blocs filter-tabs cohabitent en ligne dans ce
 * groupe, donc le sticky est porte par le conteneur, pas par chaque bloc.
 * On cible la classe ET l'ancre (#) au cas ou le groupe utilise l'un ou l'autre. */
.ifx_tabs-filter-group,
#ifx_tabs-filter-group {
  position: sticky;
  top: 90px;
  z-index: 10; /* sous le header (20), au-dessus des cartes */
  background-color: var(--wp--preset--color--white, #fbfbfb);
}

.admin-bar .ifx_tabs-filter-group,
.admin-bar #ifx_tabs-filter-group {
  top: 122px; /* 90 + 32 (barre d'admin WP) */
}

/* ---------------------------------------------------------------------------
 * Partenaires — « Ils nous font confiance »
 * Utilise core/gallery (natif). CSS pour aligner verticalement, contraindre
 * la hauteur des logos, et ajuster sur fond dégradé bleu.
 * ------------------------------------------------------------------------- */
.ifx-partners .wp-block-gallery.ifx-partners__gallery {
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--50, 2rem) var(--wp--preset--spacing--60, 3rem);
}

.ifx-partners .wp-block-gallery.ifx-partners__gallery .wp-block-image {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.ifx-partners .wp-block-gallery.ifx-partners__gallery .wp-block-image img {
  max-height: 56px;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 782px) {
  .ifx-partners .wp-block-gallery.ifx-partners__gallery .wp-block-image img {
    max-height: 40px;
  }
}
/* Variante slider : le style des logos (hauteur de rangée fixe + image
 * « contain ») est désormais porté par la variation de style du bloc
 * inflexsys/card-slider (is-style-logos, « Bande de logos »), pas ici. */
.ifx-article-layout__toc,
.ifx-article-layout__share {
  position: sticky;
  top: var(--wp--preset--spacing--50, 2rem);
}

/* __share est un enfant de grille (colonne de droite, 250px). La layout
 * constrained parente injecte `margin: 0 auto !important` sur cet enfant.
 * Or en CSS Grid, une margin auto neutralise justify-self: stretch (spec
 * Box Alignment L3 : "auto margin -> stretch behaves as start"). Consequence :
 * __share se retrecit a la taille de son contenu (32px : la LinkedIn) et se
 * centre au milieu de la colonne. On force margin: 0 pour retablir le
 * comportement de placement, puis on cale __share a droite via justify-self.
 * Specificite (0,2,0) via l'enchainement .ifx-article-layout__share... suffit
 * a battre la regle .wp-container-X > :where(...) generee par WP (0,1,0). */
.ifx-article-layout .ifx-article-layout__share {
  justify-self: end;
  align-self: start;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-top: 0;
}

@media (max-width: 767px) {
  .ifx-article-layout .ifx-article-layout__share {
    justify-self: flex-start;
    order: -1;
  }
}
/* La colonne centrale : pas de margin-block-start (WP injecte une marge par
 * defaut via :where(.is-layout-*) > * qu'on annule pour coller au haut de la
 * grille avec le fil d'Ariane). */
.ifx-article-layout__main {
  margin-block-start: 0;
}

/* Fil d'Ariane (Yoast) : typo Body/Body-Small tokenisee sur foundations, quel
 * que soit l'element (p/span/a). Le separateur SVG est injecte par le filtre
 * wpseo_breadcrumb_separator (voir functions.php). */
.ifx-article-layout__main .wp-block-yoast-seo-breadcrumbs,
.ifx-article-layout__main .wp-block-yoast-seo-breadcrumbs *,
.ifx-article-layout__main .yoast-breadcrumb,
.ifx-article-layout__main .yoast-breadcrumb * {
  color: var(--wp--preset--color--blue-900, #171441);
  font-family: var(--wp--preset--font-family--body, Roboto);
  font-size: var(--wp--preset--font-size--body-small, 0.875rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
}

.ifx-article-layout__main .ifx-breadcrumb__sep {
  display: inline-flex;
  align-items: center;
  margin: 0 0.5rem;
  vertical-align: middle;
}

.ifx-article-layout__main .ifx-breadcrumb__sep svg {
  display: block;
  width: 8px;
  height: 12px;
}

/* Contenu de l'article (post-content) : corps de texte légèrement plus petit
 * que le corps de texte par défaut du site (choix de la maquette Figma).
 * NB : la règle ne cible que le paragraphe pour ne pas écraser les tailles
 * fluid des titres définies dans theme.json (elements.h1/h2/h3…). */
.single-post .entry-content {
  font-size: var(--wp--preset--font-size--body-small);
}

/* -- Paragraphes dans l'article (spec Figma) -----------------------------
 * Composant "content title + text" : pas de margin verticale, uniquement un
 * padding-bottom de Gap-5 (16px). WP injecte des margin-block par défaut via
 * `:root :where(.is-layout-constrained) > * { margin-block-start: var(--wp--preset--spacing--40); }`
 * qu'on neutralise ici pour rester fidèle au design system. */
.single-post .entry-content > p,
.single-post .entry-content p.wp-block-paragraph:not(:last-child),
.single-post .entry-content .wp-block-post-content > p {
  margin: 0;
  padding-bottom: var(--Gap-5, 16px);
}

/* Listes UL/OL : même rythme vertical que les paragraphes (padding-bottom). */
.single-post .entry-content > ul,
.single-post .entry-content > ol,
.single-post .entry-content ul.wp-block-list,
.single-post .entry-content ol.wp-block-list {
  margin: 0;
  padding-bottom: var(--Gap-5, 16px);
}

/* -- Titres dans l'article : réaffirmer les tailles du design system ---
 * Filet de sécurité : les slugs h1/h2/h3 des fontSizes de theme.json entrent
 * en collision avec les elements h1/h2/h3, donc `var(--wp--preset--font-size--h2)`
 * peut ne pas être généré. On utilise ici des clamp() explicites correspondant
 * aux mêmes bornes que theme.json (fluid min/max). */
.single-post .entry-content h1,
.single-post .entry-content h1.wp-block-heading {
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(2.25rem, 2rem + 1.25vw, 3.125rem); /* 36 → 50 */
  font-weight: 700;
  line-height: 1.2;
  color: var(--wp--preset--color--blue-900);
}

.single-post .entry-content h2,
.single-post .entry-content h2.wp-block-heading {
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(1.75rem, 1.375rem + 1.875vw, 2.5rem); /* 28 → 40 */
  font-weight: 700;
  line-height: 1.2;
  color: var(--wp--preset--color--blue-900);
}

.single-post .entry-content h3,
.single-post .entry-content h3.wp-block-heading {
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(1.375rem, 1.125rem + 1.25vw, 2rem); /* 22 → 32 */
  font-weight: 700;
  line-height: 1.25;
  color: var(--wp--preset--color--blue-900);
}

.single-post .entry-content h4,
.single-post .entry-content h4.wp-block-heading {
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(1.25rem, 1.0625rem + 0.9375vw, 1.75rem); /* 20 → 28 */
  font-weight: 700;
  line-height: 1.3;
  color: var(--wp--preset--color--blue-900);
}

.single-post .entry-content h5,
.single-post .entry-content h5.wp-block-heading {
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(1.125rem, 1.0625rem + 0.3125vw, 1.25rem); /* 18 → 20 */
  font-weight: 700;
  line-height: 1.4;
  color: var(--wp--preset--color--blue-900);
}

.single-post .entry-content h6,
.single-post .entry-content h6.wp-block-heading {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--blue-900);
}

.single-post .entry-content h2,
.single-post .entry-content h2.wp-block-heading {
  display: block;
  scroll-margin-top: var(--Gap-7, 32px);
  margin-block: 0;
}

/* -- Images dans l'article (specs Figma) --------------------------------
 * Composant "picture + caption / desktop" :
 *   display: flex; flex-direction: column;
 *   padding: var(--Gap-9, 48px) 0;
 *   align-items: flex-start;
 *   gap: var(--Gap-3, 8px);
 * On utilise les alias Figma (--Gap-N, --large) plutôt que les presets WP,
 * car WP écrase ses slugs numériques (--wp--preset--spacing--50 = 24px, pas 32). */
.single-post .entry-content .wp-block-image,
.single-post .entry-content figure.wp-block-image {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Gap-3, 8px);
  padding: var(--Gap-9, 48px) 0;
  margin: 0;
}

.single-post .entry-content .wp-block-image img {
  border-radius: var(--large, 16px);
  display: block;
  height: auto;
  max-width: 100%;
}

/* Légende (figcaption) : Body-Tiny, bleu électrique 900, Roboto — spec Figma. */
.single-post .entry-content .wp-block-image figcaption,
.single-post .entry-content figcaption.wp-element-caption {
  margin: 0;
  color: var(--wp--preset--color--electric-900, #2457fd);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--body-tiny, 0.75rem);
  font-weight: 400;
  line-height: 1.5;
  font-style: normal;
  text-align: left;
}

/* -- Citation (blockquote) dans l'article — spec Figma ------------------ */
/* La barre gauche et l'italique proviennent de theme.json (styles.blocks.core/quote).
 * Ici on impose la couleur bleu électrique 900 et on ré-affirme la taille (20px). */
.single-post .entry-content .wp-block-quote,
.single-post .entry-content .wp-block-quote p {
  color: var(--wp--preset--color--electric-900, #2457fd);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--citation, 1.25rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
}

@media (max-width: 1023.98px) {
  .ifx-article-layout {
    grid-template-columns: 1fr;
    row-gap: var(--wp--preset--spacing--50, 2rem);
    /* Padding vertical mobile (Figma : --Sizes-Sections-Padding-Mobile-top-bottom). */
    padding-top: var(--Sizes-Sections-Padding-Mobile-top-bottom, 64px);
    padding-bottom: var(--Sizes-Sections-Padding-Mobile-top-bottom, 64px);
  }
  .ifx-article-layout__toc {
    /* Le bloc sommaire (inflexsys/table-of-contents) passe en onglet
     * lateral fixe facon sticky CTA en mobile. `display: contents` evite
     * que ce wrapper vide reserve un emplacement (et un row-gap fantome)
     * dans la grille, puisque le bloc est alors hors flux. */
    display: contents;
  }
  .ifx-article-layout__main {
    order: 1;
  }
  .ifx-article-layout__share {
    order: 3;
    position: static;
    /* Retour a un placement de debut (gauche) en single-column mobile. */
    justify-self: start;
  }
}
/* -- 8.3 Fin d'article : partage + auteur ---------------------------------- */
.ifx-article-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  margin-block: 0;
  padding-top: 0;
  padding-bottom: var(--wp--preset--spacing--section-tb);
}

/* En flex-column avec align-items: center, les enfants shrinkent a leur
 * contenu -> le <hr> du divider (sans width explicite) tombe a 0. On le
 * stretch pour retrouver 100% de la largeur du conteneur. */
/* Deux verrous WP a lever pour que le divider prenne 100% :
 * 1. .wp-container-Y > :where(...) impose max-width: 768px (contentSize du
 *    theme.json) : on force max-width: none. Specificite (0,2,0) > (0,1,0).
 * 2. Meme regle impose margin-left/right: auto !important : combines a
 *    width: 100%, les autos calent a 0, mais si un jour width bouge elles
 *    recentrent le divider. On les met explicitement a 0 avec !important
 *    pour matcher l'importance de la regle WP. */
.ifx-article-end .ifx-divider {
  align-self: stretch;
  width: 100%;
  max-width: none;
  margin-top: var(--Gap-9);
  margin-bottom: var(--Gap-9);
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* WP applique un blockGap (margin-block-start) sur les enfants du groupe via
 * :where(.is-layout-*) > * + *. Combine a notre `gap` de flex, on obtient un
 * double-espacement. On neutralise la margin injectee : le `gap` du flex
 * gere seul l'espacement vertical. */
.ifx-article-end > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

.ifx-article-end .ifx-share {
  justify-content: center;
  margin-block-start: var(--Gap-5);
}

.ifx-article-end .wp-block-post-author-name {
  font-weight: 700;
}

/* -- 8.4 Articles en relation : réutilise le style carte de posts-slider -- */
/* Padding vertical de section (même échelle que .ifx-article-layout) : le HTML
 * du template ne porte plus de padding sur cette section (juste margin-top:0
 * pour coller au séparateur au-dessus), on rend le rythme vertical via CSS
 * pour éviter d'avoir à retoucher chaque template qui affiche ce bloc. */
.ifx-article-related {
  background-color: var(--wp--preset--color--white, #fbfbfb);
  padding-top: var(--Sizes-Sections-Padding-Desktop-top-bottom, 112px);
  padding-bottom: var(--Sizes-Sections-Padding-Desktop-top-bottom, 112px);
}

@media (max-width: 1023.98px) {
  .ifx-article-related {
    padding-top: var(--Sizes-Sections-Padding-Mobile-top-bottom, 64px);
    padding-bottom: var(--Sizes-Sections-Padding-Mobile-top-bottom, 64px);
  }
}
/* ---------------------------------------------------------------------------
 * 9. Newsletter (bandeau réutilisable)
 * ------------------------------------------------------------------------- */
.ifx-newsletter {
  margin: 0;
  gap: var(--Gap-7);
  display: flex;
  flex-direction: column;
}

.ifx-newsletter > * {
  margin-block-start: 0;
}

.ifx-newsletter__form {
  max-width: 520px;
  margin: 0;
  text-align: center;
}

.ifx-newsletter__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--20, 0.5rem);
}

.ifx-newsletter__row input[type=email] {
  flex: 1 1 auto;
  min-width: 200px;
  border-radius: var(--wp--custom--radius--sm, 8px);
  border: 1px solid var(--wp--preset--color--white, #fbfbfb);
  background-color: var(--wp--preset--color--white, #fbfbfb);
  padding: 0.625rem 0.875rem;
  color: var(--wp--preset--color--blue-900, #171441);
  font-size: var(--wp--preset--font-size--body-small);
}

.ifx-newsletter__row input[type=email]::placeholder {
  color: var(--wp--preset--color--blue-500, #8b89a0);
}

.ifx-newsletter__submit {
  border-radius: var(--wp--custom--radius--sm, 8px);
  border: 1px solid var(--wp--preset--color--white, #fbfbfb);
  background: transparent;
  color: var(--wp--preset--color--white, #fbfbfb);
  padding: 0.625rem 1rem;
  font-family: var(--wp--preset--font-family--body, sans-serif);
  font-weight: 500;
  font-size: var(--wp--preset--font-size--body-cta, 1rem);
  transition: background 0.35s;
  cursor: pointer;
}

.ifx-newsletter__submit:hover,
.ifx-newsletter__submit:focus-visible {
  transition: background 0.35s;
  background: var(--wp--preset--color--white-200);
}

.ifx-newsletter__disclaimer {
  margin-top: var(--Gap-5);
  margin-bottom: 0;
  font-size: var(--wp--preset--font-size--body-tiny);
  opacity: 0.85;
}

/* ---------------------------------------------------------------------------
 * 10. Header (sticky)
 * Le header reste visible au scroll. z-index au-dessus du contenu (menus,
 * overlays de section) mais sous l'overlay de navigation mobile (core).
 * ------------------------------------------------------------------------- */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 20;
}

.admin-bar header.wp-block-template-part {
  top: 32px;
}

/* ---------------------------------------------------------------------------
 * 11. Formulaire de téléchargement d'article (single-alt : « Obtenez… »)
 *     - 2 colonnes desktop (image / formulaire), 1 colonne mobile.
 *     - Champs empilés + 2 cases à cocher + long disclaimer RGPD.
 *     - RGAA : labels associés, focus visible, indication *obligatoire, gros
 *       clic sur les checkbox, contraste texte >= 4.5:1.
 * ------------------------------------------------------------------------- */
.ifx-article-form {
  background-color: var(--wp--preset--color--white, #fbfbfb);
}

/* La colonne image et la colonne formulaire, centrées à 1120px comme le hero. */
.ifx-article-form > .wp-block-group.alignwide {
  max-width: 1120px;
  margin-inline: auto;
}

.ifx-article-form__cols {
  display: grid;
  align-items: stretch;
}

/* -- Placeholder image (Photo) — à remplacer par une vraie image plus tard - */
.ifx-article-form__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4/5;
  background-color: var(--wp--preset--color--blue-200, #d1d0d9);
  border-radius: var(--wp--custom--radius--lg, 16px);
  color: var(--wp--preset--color--blue-700, #50587a);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--body-small);
}

.ifx-article-form__img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--wp--custom--radius--lg, 16px);
  display: block;
}

.ifx-article-form__embed iframe {
  width: 100%;
}

/* -- Formulaire ---------------------------------------------------------- */
.ifx-article-form__form {
  display: flex;
  flex-direction: column;
  gap: var(--Gap-5, 16px);
  margin-top: var(--Gap-5, 16px);
}

.ifx-article-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--Gap-3, 8px);
}

.ifx-article-form__field label {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--body-small);
  font-weight: 500;
  color: var(--wp--preset--color--blue-900, #171441);
  line-height: 1.5;
}

.ifx-article-form__required {
  color: var(--wp--preset--color--red-900, #e73b34);
  margin-left: 2px;
}

.ifx-article-form__field input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border-radius: var(--wp--custom--radius--sm, 8px);
  border: 1px solid var(--wp--preset--color--blue-200, #d1d0d9);
  background-color: var(--wp--preset--color--white, #fbfbfb);
  color: var(--wp--preset--color--blue-900, #171441);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--body-small);
  line-height: 1.5;
}

.ifx-article-form__field input::placeholder {
  color: var(--wp--preset--color--blue-500, #8b89a0);
}

.ifx-article-form__field input:focus-visible {
  outline: 3px solid var(--wp--preset--color--blue-900, #171441);
  outline-offset: 2px;
  border-color: var(--wp--preset--color--blue-900, #171441);
}

.ifx-article-form__legend {
  margin: 0;
  color: var(--wp--preset--color--red-900, #e73b34);
  font-size: var(--wp--preset--font-size--body-tiny, 0.75rem);
}

/* -- Cases à cocher ------------------------------------------------------ */
.ifx-article-form__consent {
  display: flex;
  flex-direction: column;
  gap: var(--Gap-5, 16px);
  margin-top: var(--Gap-3, 8px);
}

.ifx-article-form__check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--Gap-4, 12px);
  align-items: start;
}

.ifx-article-form__check input[type=checkbox] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--wp--preset--color--electric-900, #2457fd);
  cursor: pointer;
  flex-shrink: 0;
}

.ifx-article-form__check input[type=checkbox]:focus-visible {
  outline: 3px solid var(--wp--preset--color--blue-900, #171441);
  outline-offset: 2px;
}

.ifx-article-form__check label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  color: var(--wp--preset--color--blue-900, #171441);
  font-family: var(--wp--preset--font-family--body);
  line-height: 1.5;
}

.ifx-article-form__check-title {
  font-size: var(--wp--preset--font-size--body-small);
  font-weight: 500;
}

.ifx-article-form__check-note {
  font-size: var(--wp--preset--font-size--body-tiny, 0.75rem);
  color: var(--wp--preset--color--blue-700, #50587a);
  font-weight: 400;
}

/* -- Disclaimer RGPD ---------------------------------------------------- */
.ifx-article-form__disclaimer {
  margin: 0;
  font-size: var(--wp--preset--font-size--body-tiny, 0.75rem);
  color: var(--wp--preset--color--blue-700, #50587a);
  line-height: 1.5;
}

.ifx-article-form__disclaimer a {
  color: var(--wp--preset--color--electric-900, #2457fd);
  text-decoration: underline;
}

/* -- Bouton d'envoi (héritage .wp-element-button pour les styles bouton) --- */
.ifx-article-form__submit {
  align-self: flex-start;
  cursor: pointer;
  border: 0;
  margin-top: var(--Gap-3, 8px);
}

/* -- Responsive < 782 : le core/columns passe déjà en 1 colonne, on ajuste - */
@media (max-width: 781.98px) {
  .ifx-article-form__cols {
    grid-template-columns: 1fr;
  }
}
/* ---------------------------------------------------------------------------
 * Etat « aucun resultat » des grilles filtrables (Publications + Realisations)
 * Rendu dans core/query-no-results : un message ciblable (.ifx-no-results)
 * suivi d'une grille de posts par defaut (.ifx-fallback-grid). Les cartes de
 * cette grille heritent du style des cartes principales : la requete de repli
 * est imbriquee dans .ifx-filter-target, donc les selecteurs
 * « .ifx-filter-target .wp-block-post-template … » s'y appliquent aussi.
 * ------------------------------------------------------------------------- */
.ifx-no-results {
  margin-top: var(--wp--preset--spacing--gap-6, 1.5rem);
}

.ifx-no-results__message {
  margin: 0 0 var(--wp--preset--spacing--gap-3, 0.5rem);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--wp--preset--color--blue-900, #171441);
}

.ifx-no-results__hint {
  margin: 0 0 var(--wp--preset--spacing--gap-8, 2.5rem);
  color: var(--wp--preset--color--blue-700, #4c5a9e);
}

.ifx-no-results .ifx-fallback-grid {
  margin: 0;
}

/* En état « aucun résultat » (présence de .ifx-no-results dans la query filtrée),
 * masquer la pagination et la grille vide du bloc PRINCIPAL — via le combinateur
 * enfant direct (>) pour ne pas toucher la grille de repli imbriquée. */
.ifx-filter-target:has(.ifx-no-results) > .wp-block-post-template,
.ifx-filter-target:has(.ifx-no-results) > .wp-block-query-pagination {
  display: none;
}

.ifx-article-hero__image img, .ifx-hero-header__image img {
  object-position: var(--ifx-hero-fm, 50% 50%);
}

@media (min-width: 782px) {
  .ifx-article-hero__image img, .ifx-hero-header__image img {
    object-position: var(--ifx-hero-fd, 50% 50%);
  }
}
/* ---------------------------------------------------------------------------
 * 0.b-bis. Hero header (pattern inflexsys/hero-header)
 *
 * Structure SANS wp:columns (même esprit que bloc-alt-image-gauche-complement) :
 *   .ifx-hero-header__inner > [ __text (h1, para, CTA, chevron) | __image ]
 *
 * Desktop : flex row — texte à gauche / image à droite ; l'image épouse la
 * hauteur de la colonne texte (object-fit: cover).
 * Mobile  : flex column ordonné — l'image s'intercale entre le paragraphe et
 * le bouton CTA. __text passe en `display: contents` pour que ses enfants
 * deviennent enfants directs de __inner (seul moyen d'intercaler l'image via
 * `order`). RGAA : __text est un <div> générique sans rôle ARIA — le retirer
 * de l'arbre de boîtes n'altère pas l'arbre d'accessibilité (bug historique
 * `display:contents` corrigé depuis Chrome 89 / Firefox 63 / Safari 11.1).
 *
 * @keyframes ifx-hero-scroll-bounce : défini dans _patterns-core.scss (§0),
 * compilé dans le même patterns.css → réutilisé ici sans redéclaration.
 * ------------------------------------------------------------------------- */
.ifx-hero-header h1 {
  font-weight: 700;
}

.ifx-hero-header__inner {
  display: flex;
  flex-direction: column;
  gap: 0 var(--Sizes-Sections-Desktop-gap);
}

.ifx-hero-header__image {
  margin: 0;
}

.ifx-hero-header__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--wp--custom--radius--lg, 16px);
}

.ifx-hero-header__text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Espacements internes portés en CSS (aucun margin inline sur les blocs) :
 * h1 → para = gap-8 ; para → CTA = gap-12 ; CTA → chevron = gap-7. */
.ifx-hero-header__text > .wp-block-heading {
  padding-top: 0;
  padding-bottom: var(--wp--preset--spacing--gap-8);
}

.ifx-hero-header__text > .wp-block-buttons {
  margin-top: var(--wp--preset--spacing--gap-12);
}

.ifx-hero-header__scroll {
  margin-top: var(--wp--preset--spacing--gap-7);
  color: var(--wp--preset--color--red-900, #e73b34);
  line-height: 0;
}

.ifx-hero-header__scroll svg {
  width: 30px;
  height: auto;
  display: block;
  animation: ifx-hero-scroll-bounce 1.8s ease-in-out infinite;
}

/* Mobile : titre, paragraphe, IMAGE, CTA, chevron. */
@media (max-width: 767px) {
  .ifx-hero-header__text {
    display: contents;
  }
  .ifx-hero-header__text > .wp-block-heading {
    order: 1;
  }
  .ifx-hero-header__text > p {
    order: 2;
  }
  .ifx-hero-header__image {
    order: 3;
    margin-top: var(--wp--preset--spacing--gap-8);
  }
  .ifx-hero-header__text > .wp-block-buttons {
    order: 4;
    margin-inline: auto;
  }
  .ifx-hero-header__text > .ifx-hero-header__scroll {
    order: 5;
    margin-top: var(--Gap-6);
  }
  /* Contrainte de hauteur image en mobile. rem plutot que px pour
   * scale avec le zoom texte du navigateur (RGAA 10.4). 11.25rem
   * = 180px a la racine par defaut. object-fit: cover pour
   * preserver le cadrage si la hauteur est clampee. */
  .ifx-hero-header__image img {
    max-height: 11.25rem;
    object-fit: cover;
  }
}
/* ---------------------------------------------------------------------------
 * Variante --realisation : hero dynamique de la template single-realisation.
 * Reprend l'ossature de .ifx-hero-header mais avec des blocs core dynamiques
 * (post-title, post-terms, post-excerpt, post-featured-image). Les sélecteurs
 * de spacing/ordering du hero standard ciblent .wp-block-heading et > p, qui
 * ne matchent pas ces blocs dynamiques — d'où les règles ci-dessous.
 *
 * Contenu texte (desktop et mobile) : titre, nuage de taxonomies "secteur"
 * rendu en pills, extrait. Pas de CTA ni de chevron.
 * ------------------------------------------------------------------------- */
.ifx-hero-header--realisation .ifx-hero-header__text > .wp-block-post-title {
  padding-top: 0;
  padding-bottom: var(--wp--preset--spacing--gap-8);
  margin: 0;
  font-weight: 700;
}

.ifx-hero-header--realisation .ifx-hero-header__text > .ifx-hero-header__terms {
  margin: 0 0 var(--wp--preset--spacing--gap-8);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ifx-hero-header--realisation .ifx-hero-header__text > .ifx-hero-header__terms a {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4em;
  color: var(--wp--preset--color--blue-900, #171441);
  text-decoration: none;
  border: 1px solid;
}

.ifx-hero-header--realisation .ifx-hero-header__text > .ifx-hero-header__terms a:hover,
.ifx-hero-header--realisation .ifx-hero-header__text > .ifx-hero-header__terms a:focus-visible {
  background-color: var(--wp--preset--color--electric-200, #d3ddff);
}

.ifx-hero-header--realisation .ifx-hero-header__text > .wp-block-post-excerpt {
  margin: 0;
}

.ifx-hero-header--realisation .ifx-hero-header__text > .wp-block-post-excerpt p {
  margin: 0;
}

/* Mobile : ordre visuel = titre, taxonomies, extrait, IMAGE. Pas de CTA
 * ni de chevron dans cette variante. */
@media (max-width: 767px) {
  .ifx-hero-header--realisation .ifx-hero-header__text > .wp-block-post-title {
    order: 1;
  }
  .ifx-hero-header--realisation .ifx-hero-header__text > .ifx-hero-header__terms {
    order: 2;
  }
  .ifx-hero-header--realisation .ifx-hero-header__text > .wp-block-post-excerpt {
    order: 3;
  }
  .ifx-hero-header--realisation .ifx-hero-header__image {
    order: 4;
  }
}
/* Desktop : image à droite, hauteur épousée à la colonne texte. */
@media (min-width: 768px) {
  .ifx-hero-header__inner {
    flex-direction: row;
    align-items: stretch;
  }
  .ifx-hero-header__inner > .ifx-hero-header__text {
    flex: 1 1 0;
    justify-content: center;
  }
  /* L'image epouse la hauteur de la colonne texte adjacente sans
   * imposer sa hauteur intrinseque. `contain: size` indique au
   * navigateur que la taille de la figure ne depend pas de ses
   * descendants : sa contribution a la hauteur de la ligne flex
   * devient 0, donc c'est la colonne texte qui dicte la hauteur,
   * et `align-self: stretch` etire ensuite la figure a cette
   * hauteur. L'img en height:100% + object-fit:cover remplit. */
  .ifx-hero-header__inner > .ifx-hero-header__image {
    flex: 1 1 0;
    align-self: stretch;
    contain: size;
    overflow: hidden;
    border-radius: var(--wp--custom--radius--lg, 16px);
  }
  .ifx-hero-header__inner > .ifx-hero-header__image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
/* ---------------------------------------------------------------------------
 * 0.b-ter. Bloc contenu alterne (patterns inflexsys/bloc-alt-image-droite
 * et inflexsys/bloc-alt-image-gauche).
 * Bord arrondi 24px, bordure electric-200, degrade card-gradient-left/right.
 * Section align:full clampee a 1300px de large (fond), contenu limite a
 * 1120px via layout.contentSize du pattern.
 *
 * Structure : .ifx-alt-card__inner > [ __image | __text ( heading, para,
 * buttons ) ]. Pas de wp:columns : le client veut que l'image s'intercale
 * entre le dernier paragraphe et le CTA en mobile (impossible cross-colonnes).
 * On utilise un flex row en desktop et un flex column ordonne en mobile
 * (voir bloc mobile plus bas, meme strategie que _bloc-alt-complement.scss).
 * ------------------------------------------------------------------------- */
/* Centrage horizontal - !important pour battre les marges negatives de
 * .alignfull (et les surcharges globales-padding-aware du core). */
.wp-block-group.ifx-alt-card,
.ifx-alt-card {
  max-width: 1300px !important;
  margin-inline: auto !important;
}

.single-realisation .ifx-alt-card.has-card-gradient-left-gradient-background {
  max-width: min(1300px, 100% + 11.25rem) !important;
  margin-inline: clamp(-5.625rem, (100vw - 1160px) * -4 / 15, 0px) !important;
}

/* Post-content de la page realisation : WP core injecte un
 * `margin-block-start: var(--wp--preset--spacing--40)` via
 * `:root :where(.is-layout-constrained) > *` (0-1-0) sur ce wrapper, enfant
 * de <main> constrained. On le neutralise (0-2-0, sans !important) pour que
 * le premier bloc alt-card colle sous le hero. */
.single-realisation .wp-block-post-content {
  margin-block-start: 0;
}

.ifx-alt-card__inner {
  display: flex;
  flex-direction: column;
  gap: 0 var(--Sizes-Sections-Desktop-gap);
}

.ifx-alt-card.has-card-gradient-left-gradient-background .ifx-alt-card__inner {
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
}

.ifx-alt-card__image {
  margin: 0;
}

.ifx-alt-card__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--wp--custom--radius--lg, 16px);
}

.ifx-alt-card__text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Découplage des gaps de la grille Gutenberg. En mode « nombre max. de
 * colonnes », WP écrit `gap: 5rem` en RACCOURCI → row-gap ET column-gap
 * sont liés, impossible à dissocier depuis l'UI. On garde l'écart
 * horizontal (column-gap) réglé dans l'éditeur et on met l'écart
 * vertical à 0 (utile surtout quand la grille retombe à 1 colonne en
 * mobile : image et texte collés). Cible la classe stable, 0-2-0 > 0-1-0
 * du core, pas de !important. */
.ifx-alt-card.is-layout-grid,
.ifx-alt-card .is-layout-grid {
  row-gap: 0;
}

/* Espacements internes - controles ici (pas d'inline sur les blocs) pour
 * pouvoir varier mobile/desktop. Specificite 0-2-0 bat le style h2
 * global de theme.json (`:root :where(h2)` = 0-1-0) sans !important. */
.ifx-alt-card__text > .wp-block-heading {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: var(--wp--preset--spacing--gap-6);
}

.ifx-alt-card__text > .wp-block-buttons {
  margin-top: var(--wp--preset--spacing--gap-9);
}

/* Mobile : ordre visuel = titre + paragraphe(s), image, CTA.
 * Le CTA sort du wrapper __text uniquement visuellement grace a
 * `display: contents` : ses enfants deviennent des enfants directs de
 * .ifx-alt-card__inner, ce qui permet de le pousser apres l'image via
 * order. */
@media (max-width: 767px) {
  .ifx-alt-card__text {
    display: contents;
  }
  .ifx-alt-card__inner > .ifx-alt-card__image {
    order: 10;
    margin-top: var(--wp--preset--spacing--gap-6);
  }
  /* Contrainte de hauteur image en mobile. rem plutot que px pour
   * scale avec le zoom texte du navigateur (RGAA 10.4). 11.25rem
   * = 180px a la racine par defaut. object-fit: cover pour
   * preserver le cadrage si la hauteur est clampee. */
  .ifx-alt-card__inner > .ifx-alt-card__image img {
    max-height: 11.25rem;
    object-fit: cover;
  }
  .ifx-alt-card__text > .wp-block-buttons {
    order: 20;
    align-self: center;
  }
  /* Layout « Grille » Gutenberg posé sur la carte (ex. wp:group en
   * mode grille, 2 colonnes) : le mode « nombre max. de colonnes » de
   * WP est FIXE (grid-template-columns: repeat(2, ...)) et reste à 2
   * colonnes même en mobile. On force 1 colonne < 767px. On cible la
   * classe STABLE `is-layout-grid` — surtout pas le hash volatil
   * .wp-container-core-group-is-layout-xxxx qui change à chaque
   * modif de config. Spécificité 0-2-0 > 0-1-0 de la règle core,
   * donc pas besoin de !important. */
  .ifx-alt-card.is-layout-grid,
  .ifx-alt-card .is-layout-grid {
    grid-template-columns: 1fr;
  }
  /* Image en DERNIER dans la grille mobile (après le texte). order:1
   * passe devant l'ordre 0 par défaut du bloc texte. Le row-gap étant
   * forcé à 0, c'est ce margin-top qui crée l'espace au-dessus de
   * l'image. Spécificité 0-3-0 > `.ifx-alt-card__image{margin:0}`. */
  .ifx-alt-card.is-layout-grid > .ifx-alt-card__image,
  .ifx-alt-card .is-layout-grid > .ifx-alt-card__image {
    order: 1;
    margin-top: var(--wp--preset--spacing--gap-8);
  }
}
@media (min-width: 768px) {
  .ifx-alt-card__inner {
    flex-direction: row;
    align-items: stretch;
  }
  /* Variante image a droite : on inverse l'ordre visuel des colonnes. */
  .ifx-alt-card--image-droite .ifx-alt-card__inner {
    flex-direction: row-reverse;
  }
  /* L'image epouse la hauteur de la colonne texte adjacente sans
   * imposer sa hauteur intrinseque. `contain: size` indique au
   * navigateur que la taille de la figure ne depend pas de ses
   * descendants : sa contribution a la hauteur de la ligne flex
   * devient 0, donc c'est la colonne texte qui dicte la hauteur,
   * et `align-self: stretch` etire ensuite la figure a cette
   * hauteur. L'img en height:100% + object-fit:cover remplit. */
  .ifx-alt-card__inner > .ifx-alt-card__image {
    flex: 1 1 0;
    align-self: stretch;
    margin-top: 0;
    contain: size;
    overflow: hidden;
    border-radius: var(--wp--custom--radius--lg, 16px);
  }
  .ifx-alt-card__inner > .ifx-alt-card__image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .ifx-alt-card__inner > .ifx-alt-card__text {
    flex: 1 1 0;
    justify-content: center;
  }
  /* Desktop : espacements legerement plus genereux qu'en mobile. */
  .ifx-alt-card__text > .wp-block-heading {
    margin-bottom: var(--wp--preset--spacing--gap-8);
  }
  .ifx-alt-card__text > .wp-block-buttons {
    margin-top: var(--wp--preset--spacing--gap-12);
  }
}
/* ---------------------------------------------------------------------------
 * Padding externe des cartes : sorti de l'inline pour varier mobile/desktop.
 * Mobile = tokens Figma (64px haut/bas ; cotes 24px pour les cartes image,
 * 0 pour le complement). Desktop = 80px haut/bas (desktop-gap).
 * ------------------------------------------------------------------------- */
.ifx-alt-card--image-gauche,
.ifx-alt-card--image-droite {
  padding: var(--wp--custom--sizes-sections--padding-mobile-top-bottom, 64px) var(--wp--preset--spacing--gap-6, 24px);
}

/* Espacements haut/bas alignés sur le preset « Section haut/bas »
 * (--section-tb = clamp 64→112px). Logique block = axe vertical seul,
 * padding-inline (gap-6) et marges inline conservés. 0-2-0 bat la règle
 * partagée + son override desktop (0-1-0) et le `margin-block-start` du
 * core (0-1-0), sans !important.
 *
 * padding-block INTERNE : toutes les cartes gauche/droite, fond ou non. */
.ifx-alt-card.ifx-alt-card--image-droite,
.ifx-alt-card.ifx-alt-card--image-gauche {
  padding-block: var(--wp--preset--spacing--section-tb);
}

/* margin-block EXTERNE : uniquement les cartes AVEC fond. Les variantes
 * sans-fond (narratives) ne veulent QUE le padding — leur rythme externe
 * vient du blockGap par défaut (spacing--40 = 24px) et des séparateurs. */
.ifx-alt-card.ifx-alt-card--image-droite:not(.ifx-alt-card--sans-fond),
.ifx-alt-card.ifx-alt-card--image-gauche:not(.ifx-alt-card--sans-fond) {
  margin-block: var(--wp--preset--spacing--section-tb);
}

/* Variante sans fond (patterns bloc-alt-image-*-simple) : reprend le layout
 * flex des cartes mais sans dégradé/bordure/CTA.
 *
 * Contrairement aux variantes avec fond (qui bénéficient de la suppression
 * automatique de `has-global-padding` par core dès qu'un background est
 * présent), la version sans fond garde `has-global-padding` et core applique
 * des marges négatives pour l'échapper au padding du parent post-content.
 * Nos règles génériques `max-width: 1300px !important` et `margin-inline:
 * auto !important` (haut de fichier) bloquent ce mécanisme d'échappement —
 * on les neutralise ici pour laisser core faire son travail. Le contenu
 * (__inner) reste centré à 1120px via la contentSize de la section. */
.ifx-alt-card.ifx-alt-card--sans-fond {
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: 0;
  /* Élimine le margin-block-start injecté par le core (spacing--40 = 24px)
   * sur cet enfant de post-content : les sans-fond ne veulent AUCUNE marge
   * externe, tout l'espacement vient de leur padding-block (section-tb).
   * Effet de bord bénéfique : entre deux sans-fond (marge 0 de part et
   * d'autre) leurs padding se touchent, donc le séparateur à bottom:0 tombe
   * pile au milieu du blanc. 0-2-0 bat le core (0-1-0), sans !important. */
  margin-block: 0;
}

/* Variante sans fond montée en grille (is-layout-grid posé directement sur la
 * section : la figure et le bloc texte sont enfants DIRECTS de .ifx-alt-card,
 * sans wrapper __inner). Les règles de hauteur flex ci-dessus ciblent
 * `.ifx-alt-card__inner > .ifx-alt-card__image` et ne s'appliquent donc pas
 * ici. Le sélecteur enfant direct `> .ifx-alt-card__image` ne matche que cette
 * structure sans wrapper (pas de conflit avec la version flex, où l'image est
 * petite-fille). Même technique que la version flex : `contain: size` annule la
 * hauteur intrinsèque de la figure → c'est la colonne texte qui dicte la
 * hauteur de la ligne ; `align-self: stretch` (défaut en grille) étire la
 * figure à cette hauteur ; l'img en height:100% + object-fit:cover remplit. */
@media (min-width: 768px) {
  .ifx-alt-card--sans-fond > .ifx-alt-card__image {
    align-self: stretch;
    min-height: 0;
    contain: size;
    overflow: hidden;
    border-radius: var(--wp--custom--radius--lg, 16px);
  }
  .ifx-alt-card--sans-fond > .ifx-alt-card__image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
/* Mobile : même plafond de hauteur que la version flex (11.25rem = 180px à la
 * racine, en rem pour scaler avec le zoom texte — RGAA 10.4). */
@media (max-width: 767px) {
  .ifx-alt-card--sans-fond > .ifx-alt-card__image img {
    max-height: 11.25rem;
    object-fit: cover;
  }
}
.ifx-alt-complement-section {
  padding: var(--wp--custom--sizes-sections--padding-mobile-top-bottom, 64px) 0;
}

@media (min-width: 768px) {
  .ifx-alt-card--image-gauche,
  .ifx-alt-card--image-droite,
  .ifx-alt-complement-section {
    padding-top: var(--wp--custom--sizes-sections--desktop-gap, 80px);
    padding-bottom: var(--wp--custom--sizes-sections--desktop-gap, 80px);
  }
}
/* ---------------------------------------------------------------------------
 * 0.b-quater. Variante image + complément (pattern inflexsys/bloc-alt-image-
 * gauche-complement).
 *
 * Structure : .ifx-alt-complement > [ __image | __text ( heading, para,
 * complement-picker) ]. 
 *
 * Repli mobile (section entière) : voir §0.b-quinquies.
 * ------------------------------------------------------------------------- */
.ifx-alt-complement {
  display: flex;
  flex-direction: column;
  gap: 0 var(--Sizes-Sections-Desktop-gap);
}

.ifx-alt-complement__image {
  margin: 0;
}

.ifx-alt-complement__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--wp--custom--radius--lg);
}

.ifx-alt-complement__text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Espacements internes du pattern : contrôlés ici (pas d'inline sur les
 * Spécificité 0-2-0 → bat le style h2 global de theme.json
 * (`:root :where(h2)` = 0-1-0) sans !important. */
.ifx-alt-complement__text > .wp-block-heading {
  padding-top: 0;
  padding-bottom: var(--wp--preset--spacing--gap-8);
}

/* Espace paragraphe → complement-picker : porté par le margin-top du picker.
 * Base (mobile) à 0 — l'espacement vient du gap du parent flex .ifx-alt-
 * complement (le groupe __text passe en display:contents). Desktop : gap-6. */
.ifx-alt-complement__text > .wp-block-inflexsys-complement-picker,
.ifx-alt-complement__text > .ifx-complement-picker {
  margin-top: 0;
}

/* Espace entre paragraphes consécutifs = une hauteur de ligne (line-height
 * body = 1.5 → 1.5em, fallback pour l'unité lh). Le dernier paragraphe est
 * exclu : son espace vers le picker est porté par le margin-top ci-dessus.
 * Desktop seulement : en mobile le gap du parent flex (display:contents) le
 * gère déjà. */
.ifx-alt-complement__text > p:not(:last-of-type) {
  margin-bottom: 1.5em;
  margin-bottom: 1lh;
}

/* Mobile : ordre visuel = __text (titre + paragraphes), image, complement.
 * Le complement-picker sort du wrapper __text uniquement visuellement grâce
 * à `display: contents` : ses enfants deviennent des enfants directs de
 * .ifx-alt-complement, ce qui permet de le pousser après l'image via order. */
@media (max-width: 767px) {
  .ifx-alt-complement__text {
    display: contents;
  }
  .ifx-alt-complement__text > .wp-block-inflexsys-complement-picker,
  .ifx-alt-complement__text > .ifx-complement-picker {
    order: 20;
  }
  .ifx-alt-complement > .ifx-alt-complement__image {
    order: 10;
    margin-top: var(--wp--preset--spacing--gap-8);
  }
  .ifx-alt-complement__text > .wp-block-heading {
    padding-top: 0;
    padding-bottom: var(--wp--preset--spacing--gap-6);
  }
}
@media (min-width: 768px) {
  .ifx-alt-complement {
    flex-direction: row;
    align-items: stretch;
  }
  .ifx-alt-complement > .ifx-alt-complement__image {
    flex: 1 1 0;
    align-self: stretch;
    height: auto;
    contain: size;
    overflow: hidden;
  }
  /* L'image épouse la hauteur de la colonne texte adjacente. */
  .ifx-alt-complement > .ifx-alt-complement__image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .ifx-alt-complement > .ifx-alt-complement__text {
    flex: 1 1 0;
    justify-content: center;
  }
  /* Espace paragraphe → complement-picker en desktop (le groupe __text n'a
   * plus de gap). */
  .ifx-alt-complement__text > .wp-block-inflexsys-complement-picker,
  .ifx-alt-complement__text > .ifx-complement-picker {
    margin-top: var(--wp--preset--spacing--gap-8);
  }
}
/* ---------------------------------------------------------------------------
 * Variante image à droite (pattern inflexsys/bloc-alt-image-droite-complement).
 * Même structure que la version image à gauche ; seul l'ordre visuel des
 * colonnes est inversé en desktop. Le mobile est inchangé (l'ordre y est
 * porté par les `order` ci-dessus). Spécificité 0-2-0 → bat `.ifx-alt-
 * complement` (0-1-0) sans dépendre de l'ordre source.
 * ------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .ifx-alt-complement-section--image-droite .ifx-alt-complement {
    flex-direction: row-reverse;
  }
}
/* ---------------------------------------------------------------------------
 * 0.b-quinquies. Section repliable (pattern inflexsys/bloc-alt-image-gauche-
 * complement, en mobile uniquement).
 *
 * Bouton "Voir plus / Voir moins" injecté via wp:html dans le pattern. JS
 * (assets/js/collapsible-section.js) bascule .is-open et aria-expanded.
 * En desktop le bouton est masqué et le contenu toujours visible.
 * ------------------------------------------------------------------------- */
.ifx-alt-complement-section__toggle {
  display: none;
  margin-top: var(--wp--preset--spacing--gap-6, 1.5rem);
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--wp--preset--color--blue-900);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--body);
  font-weight: 400;
  line-height: 1.5;
  text-decoration: underline;
  cursor: pointer;
}

.ifx-alt-complement-section__toggle:focus-visible {
  outline: 2px solid var(--wp--preset--color--electric-900);
  outline-offset: 2px;
  text-decoration: none;
}

/* Aperçu replié : le corps du bloc conserve une hauteur maxi (150px) avec un
 * masque en dégradé qui fond la fin de contenu. L'animation ouverture/fermeture
 * est pilotée par max-height (valeur exacte posée par JS pour transitionner
 * proprement vers `auto`). */
.ifx-alt-complement {
  transition: max-height 0.4s ease;
}

@media (max-width: 767px) {
  /* Bouton visible et centré horizontalement (fit-content pour que
   * margin auto fonctionne sur un élément block). */
  .ifx-alt-complement-section__toggle {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
  }
  /* Le corps garde overflow:hidden dans les DEUX états (ouvert/fermé). C'est
   * ce clip qui rend l'animation d'ouverture visible : sans lui, retirer
   * max-height afficherait tout le contenu d'un coup (aucune zone à révéler).
   * Une fois pleinement ouvert (max-height: auto via JS), le contenu tient
   * dans la boîte : rien n'est clippé. */
  .ifx-alt-complement-section .ifx-alt-complement {
    overflow: hidden;
  }
  /* État replié : hauteur limitée + masque en dégradé (fondu vers
   * transparent). Le contenu clippé au-delà de 150px reste dans le DOM
   * mais est rendu inaccessible au clavier via `inert` (posé par le JS
   * sur .ifx-complement-picker — seul enfant réellement interactif de
   * la zone masquée dans ce pattern). */
  .ifx-alt-complement-section:not(.is-open) .ifx-alt-complement {
    max-height: 150px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 1.6em), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 1.6em), transparent 100%);
  }
}
/* RGAA 13.8 : respect de prefers-reduced-motion — anime pas quand
 * l'utilisateur a demandé la réduction des animations dans son OS. */
@media (prefers-reduced-motion: reduce) {
  .ifx-alt-complement {
    transition: none;
  }
}
/* ---------------------------------------------------------------------------
 * Repliable GÉNÉRIQUE (mobile uniquement) — piloté par
 * assets/js/collapsible-section.js (§2, initGeneric).
 *
 * Markup : un bouton `.ifx-collapsible__toggle` avec `aria-controls` pointant
 * l'`id` du corps `.ifx-collapsible__body`. Le JS bascule `.is-open` sur le
 * CORPS + `aria-expanded` sur le bouton. En desktop : bouton masqué, contenu
 * intégralement visible (aucune contrainte de hauteur).
 *
 * Hauteur de l'aperçu replié : variable `--ifx-collapsible-max` (réglable par
 * instance ; défaut 9rem).
 * ------------------------------------------------------------------------- */
.ifx-collapsible__toggle {
  display: none;
  margin-top: var(--wp--preset--spacing--gap-4, 0.75rem);
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--wp--preset--color--blue-900);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--body);
  font-weight: 400;
  line-height: 1.5;
  text-decoration: underline;
  cursor: pointer;
}

.ifx-collapsible__toggle:hover {
  text-decoration: none;
}

.ifx-collapsible__toggle:focus-visible {
  outline: 2px solid var(--wp--preset--color--electric-900);
  outline-offset: 2px;
  text-decoration: none;
}

/* Transition d'ouverture/fermeture (hauteur exacte posée par le JS pour
 * transitionner proprement vers/depuis `auto`). */
.ifx-collapsible__body {
  transition: max-height 0.4s ease;
}

@media (max-width: 781.98px) {
  .ifx-collapsible__toggle {
    display: block;
  }
  /* overflow:hidden conservé dans les DEUX états : c'est ce clip qui rend
   * l'animation d'ouverture visible. */
  .ifx-collapsible__body {
    overflow: hidden;
  }
  /* État replié : hauteur limitée + fondu en bas. Le contenu au-delà reste
   * dans le DOM (lisible lecteurs d'écran) ; pour cette instance (paragraphe)
   * il n'y a aucun élément interactif masqué, donc pas d'`inert` nécessaire. */
  .ifx-collapsible__body:not(.is-open) {
    max-height: var(--ifx-collapsible-max, 9rem);
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ifx-collapsible__body {
    transition: none;
  }
}
/* ---------------------------------------------------------------------------
 * « Voir plus / Voir moins » générique PAR CLASSE (mobile ≤ 767px) — piloté
 * par assets/js/collapsible-section.js (§3, initReadmore).
 *
 * Usage : ajouter la classe `ifx-readmore` sur un paragraphe (ou un groupe)
 * dans Gutenberg → Avancé → Classe(s) CSS additionnelle(s). Le JS injecte le
 * bouton `.ifx-readmore__toggle` juste après, pose `.is-collapsible` (seulement
 * si le texte dépasse l'aperçu de 5 lignes) et la max-height calculée.
 * Même rendu que le pattern « complément » (§0.b-quinquies).
 * ------------------------------------------------------------------------- */
.ifx-readmore__toggle {
  display: none;
  margin-top: var(--wp--preset--spacing--gap-6, 1.5rem);
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--wp--preset--color--blue-900);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--body);
  font-weight: 400;
  line-height: 1.5;
  text-decoration: underline;
  cursor: pointer;
}

.ifx-readmore__toggle:hover {
  text-decoration: none;
}

.ifx-readmore__toggle:focus-visible {
  outline: 2px solid var(--wp--preset--color--electric-900);
  outline-offset: 2px;
  text-decoration: none;
}

.ifx-readmore.is-collapsible {
  transition: max-height 0.4s ease;
}

@media (max-width: 767px) {
  .ifx-readmore__toggle {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
  }
  /* overflow:hidden dans les DEUX états : rend l'animation d'ouverture
   * visible. `.is-collapsible` n'est posé que par le JS → sans JS / dans
   * l'éditeur, le texte reste entier. */
  .ifx-readmore.is-collapsible {
    overflow: hidden;
  }
  .ifx-readmore.is-collapsible:not(.is-open) {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 1.6em), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 1.6em), transparent 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ifx-readmore.is-collapsible {
    transition: none;
  }
}
/* ---------------------------------------------------------------------------
 * Section — FAQ (pattern inflexsys/faq).
 *
 * Mise en page uniquement : intro (~1/3) à gauche, accordéon (~2/3) à droite.
 * Le style du bloc accordéon lui-même vit dans le plugin eenov-inflexsys-blocks
 * (src/accordion/style.scss) ; on ne le duplique pas ici.
 *
 * En mobile, core/columns empile les colonnes nativement sous 782px : on ne
 * force la répartition qu'au-delà de ce point de rupture.
 * ------------------------------------------------------------------------- */
.ifx-faq {
  padding-top: var(--wp--preset--spacing--80);
  padding-bottom: var(--wp--preset--spacing--80);
}
.ifx-faq .ifx-faq__row {
  gap: 0 var(--wp--preset--spacing--70);
}
@media (min-width: 782px) {
  .ifx-faq .ifx-faq__intro {
    flex: 0 0 33%;
  }
  .ifx-faq .ifx-faq__panel {
    flex: 0 0 67%;
  }
}

/* ---------------------------------------------------------------------------
 * FAQ — variante core/columns marquée .ifx__faq (page Réalisations).
 * Structure différente du pattern inflexsys/faq (.ifx-faq) ci-dessus :
 * colonnes brutes + flex-basis inline, classe marqueur .ifx__faq.
 *
 * Mobile (<782px) : réordonnancement vertical demandé — titre, intro,
 * ACCORDÉON, puis bouton « Nous contacter » en dernier. L'accordéon est dans
 * l'autre colonne (donc après le bouton dans le DOM) : on efface les boîtes
 * des colonnes (display:contents) pour remonter leurs enfants au niveau flex
 * de .wp-block-columns, puis on réordonne via `order`.
 *
 * NB RGAA : le bouton (focusable) passant visuellement après l'accordéon,
 * l'ordre de tabulation ne suit pas l'ordre visuel (critère 12.8) — écart
 * assumé, le CTA restant lu juste après l'intro dans le DOM / lecteur d'écran.
 * ------------------------------------------------------------------------- */
@media (max-width: 781.98px) {
  .ifx__faq {
    display: flex;
    flex-direction: column;
  }
  .ifx__faq > .wp-block-column {
    display: contents;
  }
  .ifx__faq .wp-block-column > h2 {
    order: 1;
  }
  .ifx__faq .wp-block-column > p {
    order: 2;
  }
  .ifx__faq .wp-block-column > .inflexsys-accordion {
    order: 3;
  }
  .ifx__faq .wp-block-column > .wp-block-buttons {
    order: 4;
  }
}

/* ---------------------------------------------------------------------------
 * Section — CTA Besoin d'informations (pattern inflexsys/cta-informations).
 *
 * Bandeau full-width sur dégradé bleu. Padding vertical piloté par les tokens
 * custom.sizes-sections (112px desktop / 64px mobile), qui ne correspondent à
 * aucun spacingSize preset — d'où la gestion en CSS plutôt qu'inline.
 * ------------------------------------------------------------------------- */
.ifx-cta-informations {
  padding-top: var(--wp--custom--sizes-sections--padding-mobile-top-bottom);
  padding-bottom: var(--wp--custom--sizes-sections--padding-mobile-top-bottom);
}
@media (min-width: 782px) {
  .ifx-cta-informations {
    padding-top: var(--wp--custom--sizes-sections--padding-desktop-top-bottom);
    padding-bottom: var(--wp--custom--sizes-sections--padding-desktop-top-bottom);
  }
}

/* ---------------------------------------------------------------------------
 * Section — La méthodologie (pattern inflexsys/methodologie).
 *
 * Bandeau full-width sur dégradé bleu (background-blue), texte blanc. Le visuel
 * des étapes (icônes + libellés + chevrons) est porté par le bloc
 * inflexsys/methodologie-steps (styles dans le plugin). Ici : padding vertical
 * de section + réglages de la zone de texte à deux colonnes.
 * ------------------------------------------------------------------------- */
.ifx-methodologie {
  padding-top: var(--wp--custom--sizes-sections--padding-mobile-top-bottom);
  padding-bottom: var(--wp--custom--sizes-sections--padding-mobile-top-bottom);
}
@media (min-width: 782px) {
  .ifx-methodologie {
    padding-top: var(--wp--custom--sizes-sections--padding-desktop-top-bottom);
    padding-bottom: var(--wp--custom--sizes-sections--padding-desktop-top-bottom);
  }
}
.ifx-methodologie__texte p {
  margin: 0;
}

/* ---------------------------------------------------------------------------
 * Section — Pagination des blocs Query (core/query-pagination).
 *
 * Design : un seul pill à fond dégradé (card-gradient-left) qui englobe
 * flèche gauche, numéros de page et flèche droite. Page courante entourée
 * d'un contour electric-900. Flèches toujours visibles ; état désactivé
 * (opacité réduite) injecté côté PHP quand il n'y a pas de page cible
 * — cf. inflexsys_pagination_placeholder() dans functions.php.
 *
 * RGAA : le texte des liens précédent/suivant reste dans le DOM (masqué
 * visuellement via text-indent) ; l'icône est un fond SVG blue-900.
 * ------------------------------------------------------------------------- */
/* -- Coque pill : centrée, largeur au contenu ---------------------------- */
.wp-block-query-pagination {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--Gap-5);
  padding: 0 var(--Gap-3);
  border-radius: var(--wp--custom--radius--pill, 999px);
  border: 1px solid var(--wp--preset--color--electric-200, #d3ddff);
  background: var(--wp--preset--gradient--card-gradient-left, linear-gradient(104deg, #f0f3fb 35.06%, #d3ddff 90.34%));
}

/* Espace au-dessus de la barre de pagination.
 * Le bloc Query pose un blockGap (--wp--preset--spacing--gap-6, 24px) via sa
 * règle de layout `.wp-container-core-query-is-layout-… > * + *` (0,1,0).
 * On la double en spécificité (0,2,0) pour passer devant quel que soit
 * l'ordre des feuilles : 88px desktop (figma), Gap/12 (72px) en mobile. */
.wp-block-query .wp-block-query-pagination {
  margin-block-start: 88px;
}
@media (max-width: 781.98px) {
  .wp-block-query .wp-block-query-pagination {
    margin-block-start: var(--wp--preset--spacing--gap-12);
  }
}

/* -- Flèches précédent / suivant : chevron SVG inline (blue-900) --------- */
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
  display: inline-flex;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  /* Masque visuellement le texte du lien (« Précédente » / « Suivante »)
   * sans le retirer de l'accessibilité : lecteurs d'écran l'annoncent. */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  color: transparent;
  text-decoration: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.wp-block-query-pagination-previous {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M14.4432 6.586L8.73618 12.293L14.4432 18L15.8572 16.586L11.5642 12.293L15.8572 8L14.4432 6.586Z' fill='%23171441'/%3E%3C/svg%3E");
  background-size: 24px 24px;
}

.wp-block-query-pagination-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12' fill='none'%3E%3Cpath d='M1.414 11.414L7.121 5.707L1.414 0L0 1.414L4.293 5.707L0 10L1.414 11.414Z' fill='%23171441'/%3E%3C/svg%3E");
  background-size: 8px 12px;
}

a.wp-block-query-pagination-previous:hover,
a.wp-block-query-pagination-next:hover,
a.wp-block-query-pagination-previous:focus-visible,
a.wp-block-query-pagination-next:focus-visible {
  text-decoration: none;
}

a.wp-block-query-pagination-previous:hover,
a.wp-block-query-pagination-previous:focus-visible {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M14.4432 6.586L8.73618 12.293L14.4432 18L15.8572 16.586L11.5642 12.293L15.8572 8L14.4432 6.586Z' fill='%235D5B7A'/%3E%3C/svg%3E");
}

a.wp-block-query-pagination-next:hover,
a.wp-block-query-pagination-next:focus-visible {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12' fill='none'%3E%3Cpath d='M1.414 11.414L7.121 5.707L1.414 0L0 1.414L4.293 5.707L0 10L1.414 11.414Z' fill='%235D5B7A'/%3E%3C/svg%3E");
}

/* État désactivé (span injecté par le filtre PHP) : opacité réduite,
 * curseur défaut, pas de focus. */
.wp-block-query-pagination-previous.is-disabled,
.wp-block-query-pagination-next.is-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* -- Numéros de page : plain text, page courante en contour ------------- */
.wp-block-query-pagination-numbers {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--body-md);
  color: var(--wp--preset--color--blue-900);
}

.wp-block-query-pagination-numbers .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--blue-900);
  text-decoration: none;
  line-height: 1.5;
  padding: var(--Gap-4);
  border: 1px solid transparent;
  border-radius: 3rem;
  font-size: var(--wp--preset--font-size--body-small);
  transition: color 0.15s ease;
}

.wp-block-query-pagination-numbers a.page-numbers:hover,
.wp-block-query-pagination-numbers a.page-numbers:focus-visible {
  border: 1px solid var(--wp--preset--color--electric-900);
  color: var(--wp--preset--color--electric-900);
  text-decoration: none;
}

/* Page courante : cercle contour electric-900, texte electric-900. */
.wp-block-query-pagination-numbers .page-numbers.current {
  border: 1.5px solid var(--wp--preset--color--electric-900);
  color: var(--wp--preset--color--electric-900);
  font-weight: 600;
}

.wp-block-query-pagination-numbers .page-numbers.dots {
  padding: 4px 2px;
}

/* ---------------------------------------------------------------------------
 * Section « Nos savoir-faire » (contenu de page, classe `.ifx-savoir-faire`).
 *
 * Desktop : colonnes 50/50 (texte à gauche, slider de cartes à droite) — rendu
 * natif du bloc columns, rien à surcharger ici.
 *
 * Mobile (<782px) : la maquette impose l'ordre titre → paragraphe (repliable)
 * → « Voir plus » → slider → bouton « Découvrir » EN DERNIER. Or le bouton est
 * dans la colonne GAUCHE et le slider dans la colonne DROITE : impossible de
 * réordonner d'une colonne à l'autre en l'état. On efface donc les colonnes via
 * `display: contents` (leurs enfants remontent comme enfants directs de
 * `.wp-block-columns`, qui devient un flex column) puis on repousse le CTA
 * après le slider avec `order`. Même stratégie que _bloc-alt-shared.scss.
 * ------------------------------------------------------------------------- */
/* Aperçu replié du paragraphe d'intro (réglable). */
.ifx-savoir-faire .ifx-collapsible__body {
  --ifx-collapsible-max: 9rem;
}

/* CTA « Découvrir nos savoir-faire » : espacement géré ici (mobile + desktop)
 * plutôt qu'en inline, pour pouvoir varier selon le breakpoint. */
.ifx-savoir-faire .ifx-sf-cta {
  margin-top: var(--wp--preset--spacing--gap-12);
}

@media (max-width: 781.98px) {
  .ifx-savoir-faire .wp-block-columns {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  /* Les colonnes s'effacent : leurs enfants deviennent les items flex du
   * conteneur .wp-block-columns, ce qui autorise le réordonnancement. */
  .ifx-savoir-faire .wp-block-column {
    display: contents;
  }
  /* Espace avant le slider (le titre et le paragraphe gardent leurs marges
   * propres). */
  .ifx-savoir-faire .inflexsys-card-slider {
    margin-top: var(--wp--preset--spacing--gap-8);
  }
  /* Le CTA passe APRÈS le slider (tous les autres items sont en order:0) et
   * se centre, conformément à la maquette. */
  .ifx-savoir-faire .ifx-sf-cta {
    order: 1;
    align-self: center;
    margin-top: var(--wp--preset--spacing--gap-8);
  }
  /* « Voir plus » centré sous le paragraphe. */
  .ifx-savoir-faire .ifx-collapsible__toggle {
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
  }
}