/* ==========================================================================
   seo_pages.css — composants partagés des pages thématiques + menu déroulant
   Reprend strictement la charte existante (my_style.css) :
   bleu #3884c3, texte #3b3535, fond doux #e8ecf5, police de titres "testfont",
   ombre de carte 0 0 45px rgba(0,0,0,.08).
   ========================================================================== */

:root {
  --ep-primary: #3884c3;
  --ep-primary-dark: #2b6b9f;
  --ep-secondary: #3d96df;
  --ep-text: #3b3535;
  --ep-muted: #5f6b76;
  --ep-soft: #e8ecf5;
  --ep-border: #dde4ee;
  --ep-shadow: 0 0 45px rgba(0, 0, 0, .08);
  --ep-radius: 10px;
  /* Hauteur du header fixe (#header.fixed-top). Valeur par défaut mesurée,
     recalculée au chargement par nav.js si le logo ou la police changent. */
  --ep-header-h: 96px;
}

/* --------------------------------------------------------------------------
   0. ESPACEMENT SOUS LE HEADER FIXE
   Le header est en position fixe : tout premier bloc de page doit démarrer
   sous lui, et les ancres (#faq, #partenaires…) ne doivent pas s'y cacher.
   -------------------------------------------------------------------------- */

html {
  scroll-padding-top: calc(var(--ep-header-h) + 16px);
}

/* Pages racines : le hero #main_div avait 100px de marge haute pour un header
   de 96px, soit un titre collé au menu. On part de la hauteur réelle. */
/* `body #main_div` : plus spécifique que main_div_enhanced.css (accueil),
   chargé après cette feuille. */
@media (min-width: 992px) {
  body #main_div {
    padding-top: calc(var(--ep-header-h) + 40px);
  }
}

/* pointeuses.html : sous 992px, le titre n'est plus précédé d'une colonne
   avec marge interne comme sur les autres pages racines. */
@media (max-width: 991px) {
  #title_de_pointeuse {
    margin-top: 40px !important;
  }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--ep-primary);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  left: 0;
  color: #fff;
}

/* --------------------------------------------------------------------------
   1. MENU DÉROULANT (desktop : survol — mobile : accordéon piloté par nav.js)
   -------------------------------------------------------------------------- */

.navbar .dropdown>a {
  cursor: pointer;
}

.navbar .dropdown>a .bx-chevron-down {
  font-size: 14px;
  line-height: 0;
  margin-left: 4px;
  transition: transform .3s;
}

.navbar .dropdown>ul {
  display: block;
  position: absolute;
  left: 10px;
  top: calc(100% + 18px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0 0 30px rgba(56, 132, 195, .18);
  border-radius: var(--ep-radius);
  transition: .25s ease;
  min-width: 250px;
}

.navbar .dropdown:hover>ul,
.navbar .dropdown.dropdown-active>ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.navbar .dropdown>ul li {
  min-width: 220px;
}

.navbar .dropdown>ul a {
  padding: 10px 20px;
  font-size: 14px;
  text-transform: none;
  white-space: nowrap;
  color: var(--ep-text);
}

.navbar .dropdown>ul a:hover,
.navbar .dropdown>ul .active {
  color: var(--ep-primary);
  background: var(--ep-soft);
}

/* Le menu mobile réutilise .navbar-mobile-show déjà défini dans my_style.css.
   Ici on ne fait qu'aplatir les sous-menus en accordéon sous 992px. */
@media screen and (max-width: 992px) {

  .navbar .dropdown>ul {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    padding: 0;
    margin: 0;
    min-width: 100%;
    background: transparent;
    border-radius: 0;
  }

  .navbar .dropdown.dropdown-active>ul {
    display: block;
  }

  .navbar .dropdown.dropdown-active>a .bx-chevron-down {
    transform: rotate(180deg);
  }

  .navbar .dropdown>ul a {
    padding: 10px 0;
    font-size: 14px;
    justify-content: center;
    color: var(--ep-muted);
  }
}

/* --------------------------------------------------------------------------
   2. FIL D'ARIANE
   -------------------------------------------------------------------------- */

.seo-breadcrumb {
  background: var(--ep-soft);
  /* compense le header fixe + respiration sous le menu */
  padding: calc(var(--ep-header-h) + 30px) 0 14px 0;
}

.seo-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--ep-muted);
}

.seo-breadcrumb a {
  color: var(--ep-primary);
  text-decoration: none;
}

.seo-breadcrumb a:hover {
  text-decoration: underline;
}

.seo-breadcrumb li+li::before {
  content: "›";
  margin-right: 6px;
  color: #9aa7b4;
}

.seo-breadcrumb [aria-current="page"] {
  color: var(--ep-muted);
}

/* --------------------------------------------------------------------------
   3. HERO DE PAGE
   -------------------------------------------------------------------------- */

.seo-hero {
  background: var(--ep-soft);
  padding: 30px 0 55px 0;
}

.seo-hero h1 {
  font-family: "testfont" !important;
  font-size: 38px;
  line-height: 1.25;
  color: var(--ep-primary);
  margin-bottom: 18px;
}

.seo-hero .seo-hero-lead {
  font-size: 17px;
  line-height: 1.75;
  color: var(--ep-text);
  margin-bottom: 24px;
  max-width: 760px;
}

.seo-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.seo-hero-img img {
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   4. BOUTONS
   -------------------------------------------------------------------------- */

.seo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 40px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: .3s;
  border: 2px solid var(--ep-primary);
}

.seo-btn-primary {
  background: var(--ep-primary);
  color: #fff;
}

.seo-btn-primary:hover {
  background: var(--ep-primary-dark);
  border-color: var(--ep-primary-dark);
  color: #fff;
}

.seo-btn-outline {
  background: transparent;
  color: var(--ep-primary);
}

.seo-btn-outline:hover {
  background: var(--ep-primary);
  color: #fff;
}

/* --------------------------------------------------------------------------
   5. SECTIONS DE CONTENU
   -------------------------------------------------------------------------- */

.seo-section {
  padding: 55px 0;
}

.seo-section--soft {
  background: #f7f9fc;
}

.seo-section h2 {
  font-family: "testfont" !important;
  font-size: 29px;
  color: var(--ep-primary);
  margin-bottom: 18px;
}

.seo-section h3 {
  font-family: "testfont" !important;
  font-size: 20px;
  color: var(--ep-text);
  margin: 26px 0 10px 0;
}

.seo-section p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--ep-text);
  margin-bottom: 14px;
}

.seo-list {
  margin: 0 0 16px 0;
  padding: 0;
  list-style: none;
}

.seo-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 11px;
  line-height: 1.7;
  color: var(--ep-text);
}

.seo-list li::before {
  content: "\ea41";
  /* bx-check (boxicons) */
  font-family: 'boxicons' !important;
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--ep-primary);
  font-size: 18px;
}

/* --------------------------------------------------------------------------
   6. GRILLE DE CARTES
   -------------------------------------------------------------------------- */

/* Grilles de cartes (.seo-grid, .seo-related-grid, .seo-products) en flex centré :
   une dernière rangée incomplète reste centrée au lieu de laisser un vide d'un côté.
   --cols = cartes par rangée ; le générateur (render.par_rangee) choisit la variante
   qui remplit le mieux les rangées, les media queries la réduisent sur petit écran. */
.seo-grid {
  --cols: 3;
  --gap: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}

.seo-grid > *,
.seo-related-grid > *,
.seo-products > * {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  min-width: 0;
}

.seo-grid--2 {
  --cols: 2;
}

.seo-grid--4 {
  --cols: 4;
}

.seo-card {
  background: #fff;
  border: 1px solid var(--ep-border);
  border-radius: var(--ep-radius);
  padding: 26px 22px;
  box-shadow: var(--ep-shadow);
  transition: transform .3s, box-shadow .3s;
}

.seo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(56, 132, 195, .16);
}

.seo-card i {
  font-size: 34px;
  color: var(--ep-primary);
  display: block;
  margin-bottom: 12px;
}

.seo-card img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  margin-bottom: 12px;
}

.seo-card h3 {
  font-family: "testfont" !important;
  font-size: 18px;
  color: var(--ep-text);
  margin: 0 0 8px 0;
}

.seo-card p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ep-muted);
  margin: 0;
}

/* --------------------------------------------------------------------------
   7. TABLEAU COMPARATIF / SPÉCIFICATIONS
   -------------------------------------------------------------------------- */

.seo-table-wrap {
  overflow-x: auto;
}

.seo-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
  background: #fff;
  border-radius: var(--ep-radius);
  overflow: hidden;
  box-shadow: var(--ep-shadow);
}

.seo-table th,
.seo-table td {
  padding: 13px 16px;
  text-align: left;
  font-size: 15px;
  border-bottom: 1px solid var(--ep-border);
}

.seo-table th {
  background: var(--ep-primary);
  color: #fff;
  font-family: "testfont" !important;
  font-weight: 400;
}

.seo-table tbody tr:last-child td {
  border-bottom: none;
}

.seo-table tbody tr:nth-child(even) {
  background: #f7f9fc;
}

/* --------------------------------------------------------------------------
   8. FAQ — <details>/<summary>, sans JavaScript
   -------------------------------------------------------------------------- */

.seo-faq-item {
  background: #fff;
  border: 1px solid var(--ep-border);
  border-radius: var(--ep-radius);
  margin-bottom: 12px;
  overflow: hidden;
}

.seo-faq-item summary {
  cursor: pointer;
  padding: 17px 22px;
  font-family: "testfont" !important;
  font-size: 17px;
  color: var(--ep-text);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.seo-faq-item summary::-webkit-details-marker {
  display: none;
}

.seo-faq-item summary::after {
  content: "+";
  font-size: 24px;
  color: var(--ep-primary);
  line-height: 1;
  flex-shrink: 0;
}

.seo-faq-item[open] summary::after {
  content: "–";
}

.seo-faq-item[open] summary {
  color: var(--ep-primary);
}

.seo-faq-item summary:focus-visible {
  outline: 2px solid var(--ep-primary);
  outline-offset: -2px;
}

.seo-faq-item .seo-faq-body {
  padding: 0 22px 18px 22px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ep-muted);
}

/* --------------------------------------------------------------------------
   9. BANDEAU D'APPEL À L'ACTION
   -------------------------------------------------------------------------- */

.seo-cta {
  background: linear-gradient(135deg, var(--ep-primary) 0%, var(--ep-secondary) 100%);
  padding: 45px 0;
  color: #fff;
  text-align: center;
}

.seo-cta h2 {
  font-family: "testfont" !important;
  font-size: 27px;
  color: #fff;
  margin-bottom: 12px;
}

.seo-cta p {
  font-size: 16px;
  line-height: 1.7;
  margin: 0 auto 22px auto;
  max-width: 640px;
  color: rgba(255, 255, 255, .93);
}

.seo-cta .seo-btn-primary {
  background: #fff;
  color: var(--ep-primary);
  border-color: #fff;
}

.seo-cta .seo-btn-primary:hover {
  background: var(--ep-soft);
  color: var(--ep-primary-dark);
  border-color: var(--ep-soft);
}

.seo-cta .seo-btn-outline {
  color: #fff;
  border-color: #fff;
}

.seo-cta .seo-btn-outline:hover {
  background: #fff;
  color: var(--ep-primary);
}

.seo-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   10. MAILLAGE INTERNE — « pages liées »
   -------------------------------------------------------------------------- */

.seo-related {
  padding: 50px 0;
  background: #f7f9fc;
}

.seo-related h2 {
  font-family: "testfont" !important;
  font-size: 24px;
  color: var(--ep-primary);
  margin-bottom: 22px;
  text-align: center;
}

.seo-related-grid {
  --cols: 3;
  --gap: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}

.seo-related-grid--4 {
  --cols: 4;
}

.seo-related-item {
  display: block;
  background: #fff;
  border: 1px solid var(--ep-border);
  border-left: 4px solid var(--ep-primary);
  border-radius: 8px;
  padding: 17px 20px;
  text-decoration: none;
  transition: .3s;
}

.seo-related-item:hover {
  background: var(--ep-soft);
  transform: translateX(3px);
}

.seo-related-item strong {
  display: block;
  font-family: "testfont" !important;
  font-size: 16px;
  color: var(--ep-primary);
  margin-bottom: 4px;
}

.seo-related-item span {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ep-muted);
}

/* --------------------------------------------------------------------------
   11. LIEN CONTEXTUEL DANS UN BLOC .service-item (solutions.html, pointeuses.html)
   Placé après les paragraphes injectés par l'API, jamais à l'intérieur.
   -------------------------------------------------------------------------- */

.solution-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ep-primary);
  text-decoration: none;
  transition: .3s;
}

.solution-more i {
  font-size: 18px;
  line-height: 1;
  transition: transform .3s;
}

.solution-more:hover {
  color: var(--ep-primary-dark);
}

.solution-more:hover i {
  transform: translateX(3px);
}

/* .service-item passe en fond sombre au survol : le lien doit rester lisible. */
.service-item:hover .solution-more {
  color: #fff;
}

/* --------------------------------------------------------------------------
   12. RESPONSIVE — on reprend les seuils déjà utilisés par le site
   -------------------------------------------------------------------------- */

/* [class] : passe devant les variantes --2 / --4 / --3 / --5, quel que soit l'ordre. */
@media (max-width: 1199px) {

  .seo-grid--4 {
    --cols: 3;
  }

  /* 4 pages liées : 2 × 2 plutôt que 3 + 1 */
  .seo-related-grid--4 {
    --cols: 2;
  }
}

@media (max-width: 992px) {

  .seo-grid[class],
  .seo-related-grid[class] {
    --cols: 2;
  }

  .seo-hero h1 {
    font-size: 31px;
  }

  .seo-section h2 {
    font-size: 25px;
  }
}

@media (max-width: 768px) {

  .seo-grid[class],
  .seo-related-grid[class] {
    --cols: 1;
  }

  .seo-breadcrumb {
    padding-top: calc(var(--ep-header-h) + 26px);
  }

  .seo-hero {
    padding: 24px 0 40px 0;
  }

  .seo-hero h1 {
    font-size: 27px;
  }

  .seo-section {
    padding: 40px 0;
  }

  .seo-hero-actions .seo-btn,
  .seo-cta-actions .seo-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   13. COMPOSANTS AJOUTÉS (2026-09-25) : fiches produit, étapes, encadrés,
   sommaire, glossaire, hubs, 404, footer de maillage.
   ========================================================================== */

/* Ancres de section : le titre ne passe pas sous le header */
.seo-section[id],
.seo-term[id] {
  scroll-margin-top: calc(var(--ep-header-h) + 16px);
}

/* --- Badges du hero (points clés d'une fiche produit) --- */
.seo-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -6px 0 22px 0;
  padding: 0;
  list-style: none;
}

.seo-badges li {
  background: #fff;
  border: 1px solid var(--ep-border);
  color: var(--ep-primary-dark);
  border-radius: 40px;
  padding: 5px 14px;
  font-size: 14px;
  font-weight: 600;
}

.seo-hero-img--product {
  text-align: center;
}

.seo-hero-img--product img {
  width: auto;
  max-width: 100%;
  max-height: 340px;
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(56, 132, 195, .18));
}

/* --- Grille de produits (flex centré, voir la section 6) --- */
.seo-products {
  --cols: 4;
  --gap: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  margin: 18px 0 8px 0;
}

.seo-products--3 {
  --cols: 3;
}

.seo-products--5 {
  --cols: 5;
}

@media (max-width: 1399px) {
  .seo-products--5 {
    --cols: 4;
  }
}

@media (max-width: 1199px) {
  .seo-products[class] {
    --cols: 3;
  }
}

@media (max-width: 767px) {
  .seo-products[class] {
    --cols: 2;
  }
}

@media (max-width: 575px) {
  .seo-products[class] {
    --cols: 1;
  }
}

.seo-product {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ep-border);
  border-radius: var(--ep-radius);
  padding: 18px;
  text-decoration: none;
  box-shadow: var(--ep-shadow);
  transition: transform .3s, box-shadow .3s;
}

.seo-product:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(56, 132, 195, .16);
}

.seo-product-img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  margin-bottom: 12px;
}

.seo-product-img img {
  max-height: 150px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.seo-product-badge {
  align-self: flex-start;
  background: var(--ep-soft);
  color: var(--ep-primary-dark);
  font-size: 12px;
  font-weight: 700;
  border-radius: 20px;
  padding: 3px 10px;
  margin-bottom: 8px;
}

.seo-product strong {
  font-family: "testfont" !important;
  font-size: 17px;
  color: var(--ep-text);
  margin-bottom: 6px;
}

.seo-product-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ep-muted);
  flex-grow: 1;
}

.seo-product-more {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ep-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* --- Tableau de caractéristiques --- */
.seo-specs {
  min-width: 0;
}

.seo-specs th {
  background: var(--ep-soft);
  color: var(--ep-text);
  width: 38%;
  font-size: 15px;
}

.seo-table caption {
  caption-side: bottom;
  font-size: 13px;
  color: var(--ep-muted);
  padding: 10px 4px 0 4px;
}

.seo-table a {
  font-weight: 600;
}

/* --- Étapes numérotées --- */
.seo-steps {
  list-style: none;
  margin: 10px 0 16px 0;
  padding: 0;
}

.seo-step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px dashed var(--ep-border);
}

.seo-step:last-child {
  border-bottom: none;
}

.seo-step-num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ep-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "testfont" !important;
  font-size: 18px;
  box-shadow: 0 6px 16px rgba(56, 132, 195, .3);
}

.seo-step h3 {
  margin: 6px 0 6px 0 !important;
  font-size: 18px !important;
}

.seo-step p {
  margin: 0 !important;
}

/* --- Liste numérotée --- */
.seo-olist {
  margin: 0 0 16px 0;
  padding-left: 22px;
}

.seo-olist li {
  margin-bottom: 10px;
  line-height: 1.7;
  color: var(--ep-text);
}

/* --- Encadrés --- */
.seo-callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border-radius: var(--ep-radius);
  padding: 16px 20px;
  margin: 18px 0;
  font-size: 15px;
  line-height: 1.7;
  border: 1px solid var(--ep-border);
  border-left: 4px solid var(--ep-primary);
  background: #fff;
  color: var(--ep-text);
}

.seo-callout i {
  font-size: 24px;
  color: var(--ep-primary);
  flex-shrink: 0;
  margin-top: 1px;
}

.seo-callout--legal {
  background: #fbfaf4;
  border-left-color: #c9a227;
}

.seo-callout--legal i {
  color: #b38b12;
}

.seo-callout--tip {
  background: #f3f9f4;
  border-left-color: #2e9e5b;
}

.seo-callout--tip i {
  color: #2e9e5b;
}

/* --- Pastilles de liens (villes, secteurs, plan du site) --- */
.seo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 16px 0;
}

.seo-chip {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--ep-border);
  border-radius: 40px;
  padding: 8px 16px;
  font-size: 14px;
  color: var(--ep-primary-dark);
  text-decoration: none;
  transition: .25s;
}

.seo-chip:hover {
  background: var(--ep-primary);
  border-color: var(--ep-primary);
  color: #fff;
}

/* --- Articles : méta et sommaire --- */
.seo-hero--article {
  padding-bottom: 40px;
}

.seo-hero--article .seo-hero-lead {
  max-width: 860px;
}

.seo-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--ep-muted);
  margin: 0;
}

.seo-article-meta i {
  color: var(--ep-primary);
  font-size: 16px;
}

.seo-toc {
  padding: 28px 0 0 0;
}

.seo-toc details {
  background: #fff;
  border: 1px solid var(--ep-border);
  border-radius: var(--ep-radius);
  padding: 16px 22px;
  max-width: 860px;
}

.seo-toc summary {
  cursor: pointer;
  font-family: "testfont" !important;
  font-size: 18px;
  color: var(--ep-primary);
}

.seo-toc ol {
  margin: 12px 0 0 0;
  padding-left: 20px;
}

.seo-toc li {
  margin-bottom: 6px;
  font-size: 15px;
}

.seo-toc a {
  color: var(--ep-text);
  text-decoration: none;
}

.seo-toc a:hover {
  color: var(--ep-primary);
  text-decoration: underline;
}

/* --- Glossaire --- */
.seo-glossary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
}

.seo-term {
  background: #fff;
  border: 1px solid var(--ep-border);
  border-radius: var(--ep-radius);
  padding: 16px 20px;
}

.seo-term dt {
  font-family: "testfont" !important;
  font-size: 17px;
  color: var(--ep-primary);
  margin-bottom: 6px;
}

.seo-term dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ep-text);
}

/* --- Cartes : quand le titre porte un lien, toute la carte est cliquable --- */
.seo-card {
  position: relative;
}

.seo-card h3 a {
  color: inherit;
  text-decoration: none;
}

.seo-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.seo-card h3 a:hover,
.seo-card:hover h3 a {
  color: var(--ep-primary);
}

.seo-card p a {
  position: relative;
  z-index: 1;
}

/* --- 404 --- */
.seo-404 {
  padding: calc(var(--ep-header-h) + 60px) 0 70px 0;
}

.seo-404-code {
  font-family: "testfont" !important;
  font-size: 96px;
  line-height: 1;
  color: var(--ep-primary);
  opacity: .25;
  margin-bottom: 8px;
}

.seo-404 .seo-hero-lead {
  max-width: 640px;
}

/* --- Footer : bloc de maillage interne --- */
.footer-seo {
  border-top: 1px solid rgba(0, 0, 0, .06);
  padding: 26px 0 6px 0;
}

.footer-seo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.footer-seo h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--ep-text);
  margin-bottom: 10px;
  text-transform: uppercase;
}

.footer-seo ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.footer-seo li a {
  font-size: 13px;
  color: var(--ep-muted);
  text-decoration: none;
}

.footer-seo li a:hover {
  color: var(--ep-primary);
  text-decoration: underline;
}

@media (max-width: 992px) {
  .footer-seo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .seo-glossary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .footer-seo-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-seo ul {
    justify-content: center;
  }

  .seo-hero-img--product {
    margin-top: 24px;
  }

  .seo-hero-img--product img {
    max-height: 240px;
  }

  .seo-step {
    gap: 12px;
  }

  .seo-specs th {
    width: 45%;
  }
}

/* --- Menu : les 6 entrées tiennent entre 992 et 1199px --- */
@media (min-width: 992px) and (max-width: 1199px) {

  .navbar a,
  .navbar a:focus {
    padding-left: 11px;
    padding-right: 11px;
    font-size: 14px;
  }

  .image_main_logo {
    width: 170px !important;
    height: auto;
  }
}

/* --- Respiration entre un bloc (grille, tableau, étapes) et le texte suivant --- */
.nowrap {
  white-space: nowrap;
}

.seo-grid+p,
.seo-products+p,
.seo-table-wrap+p,
.seo-steps+p,
.seo-chips+p {
  margin-top: 22px;
}

.seo-table-wrap {
  margin-bottom: 16px;
}

/* --- Menu mobile : fond opaque, parents d'accordéon centrés, état actif
   aux couleurs de la charte (l'ancien fond #3b3535 restait « collé » après
   un tap sur écran tactile) --- */
@media screen and (max-width: 992px) {
  .navbar {
    background-color: rgba(255, 255, 255, .98);
  }

  .navbar .dropdown>a {
    justify-content: center;
    gap: 6px;
  }

  .navbar ul li a:hover,
  .navbar ul li a.active,
  .navbar .dropdown.dropdown-active>a {
    background-color: var(--ep-soft);
    color: var(--ep-primary);
  }
}

/* --------------------------------------------------------------------------
   14. WORKFLOWS ANIMÉS (.flow) — accueil (#fonctionnement) et pages thématiques
   L'animation est un SVG autonome (tools/workflows) affiché par <img> ; la
   liste des étapes est du HTML, surlignée au rythme de l'animation par
   assets/js/workflows.js grâce aux fenêtres de temps de data-fenetres.
   -------------------------------------------------------------------------- */
.flow {
  display: grid;
  gap: 22px;
  margin: 0;
}

.flow[hidden] {
  display: none;
}

.flow__scene {
  position: relative;
  padding: 12px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--ep-border);
  box-shadow: 0 24px 60px -30px rgba(15, 34, 59, .35), 0 2px 6px rgba(15, 34, 59, .04);
}

/* <object> n'a pas de proportions intrinsèques : l'aspect-ratio (posé en
   ligne, propre à chaque workflow) lui donne sa hauteur. L'<img> intérieure
   est le contenu de repli (image fixe), visible tant que le SVG n'est pas chargé. */
.flow__scene object,
.flow__scene object > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.flow__scene object {
  pointer-events: none;
}

.flow__cadre {
  position: relative;
}

/* Téléphone : réduite à la largeur de l'écran, la scène (1 200 à 1 320 unités)
   serait quatre fois trop petite. Elle s'affiche à 680 px dans une fenêtre qui
   défile, au doigt ou automatiquement vers l'étape en cours (workflows.js) ;
   la bande des légendes du SVG est masquée, la liste des étapes la reprend. */
@media (max-width: 700px) {
  .flow__scene {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .flow__scene::-webkit-scrollbar {
    display: none;
  }

  .flow__cadre {
    width: 680px;
    aspect-ratio: var(--ratio-scene);
    overflow: hidden;
    border-radius: 11px;
  }
}

.flow__infos {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 30px;
  margin-top: 45px;
  align-items: start;
}

.flow__surtitre {
  margin: 0 0 8px;
  color: var(--ep-primary);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.flow__titre {
  margin: 0 0 10px;
  color: #0f223b;
  font-size: 23px;
  line-height: 1.25;
}

.flow__resume {
  margin: 0 0 16px;
  color: var(--ep-muted);
  font-size: 15.5px;
  line-height: 1.65;
}

.flow__lien {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

.flow__lien i {
  transition: transform .2s ease;
}

.flow__lien:hover i {
  transform: translateX(3px);
}

.flow__etapes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow__etapes li {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 13px 14px 15px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--ep-border);
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}

.flow__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: #eef4fa;
  color: var(--ep-primary);
  font-size: 14px;
  font-weight: 800;
  transition: background-color .3s ease, color .3s ease;
}

.flow__etapes strong {
  display: block;
  color: #0f223b;
  font-size: 14.5px;
  line-height: 1.3;
}

.flow__legende {
  display: block;
  margin-top: 3px;
  color: var(--ep-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

/* Étape en cours : bordure, pastille pleine et fine barre de progression
   dont la durée (--d) est posée par workflows.js. */
.flow__etapes li.is-active {
  border-color: rgba(56, 132, 195, .55);
  background: linear-gradient(180deg, #fff, #f3f9ff);
  box-shadow: 0 12px 26px -16px rgba(56, 132, 195, .7);
}

.flow__etapes li.is-active .flow__num {
  background: linear-gradient(120deg, #3884c3, #2fb6df);
  color: #fff;
}

.flow__etapes li.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(120deg, #3884c3, #2fb6df);
  transform-origin: left;
  animation: flow-etape var(--d, 2s) linear forwards;
}

@keyframes flow-etape {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Dans une page thématique : un seul workflow, sans onglets. */
.seo-section .flow {
  margin: 8px 0 12px;
}

@media (max-width: 991px) {
  .flow__infos {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

@media (max-width: 575px) {
  .flow__scene {
    padding: 6px;
    border-radius: 16px;
  }

  .flow__scene object,
  .flow__scene object > img {
    border-radius: 11px;
  }

  .flow__etapes {
    grid-template-columns: 1fr;
  }

  .flow__titre {
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow__etapes li.is-active::after {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   15. GALERIE DE RÉALISATIONS (bloc « galerie », page /realisations/)
   Vignettes au même format dans une grille flex centrée (--cols), comme les
   cartes : une rangée incomplète reste au milieu. Au clic, galerie.js ouvre la
   grande photo dans un <dialog> ; sans JavaScript, le lien ouvre la photo.
   -------------------------------------------------------------------------- */
.seo-galerie {
  --cols: 4;
  --gap: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  margin: 26px 0 18px;
}

.seo-galerie--3 {
  --cols: 3;
}

.seo-galerie__item {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  min-width: 0;
  margin: 0;
}

.seo-galerie__lien {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  background: var(--ep-soft);
  box-shadow: 0 14px 30px -18px rgba(15, 34, 59, .45);
}

.seo-galerie__lien img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.seo-galerie__zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ep-primary);
  font-size: 18px;
  line-height: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}

.seo-galerie__lien:hover img,
.seo-galerie__lien:focus-visible img {
  transform: scale(1.04);
}

.seo-galerie__lien:hover .seo-galerie__zoom,
.seo-galerie__lien:focus-visible .seo-galerie__zoom {
  opacity: 1;
  transform: none;
}

.seo-galerie__lien:focus-visible {
  outline: 3px solid var(--ep-secondary);
  outline-offset: 3px;
}

.seo-galerie__item figcaption {
  margin-top: 10px;
  color: var(--ep-muted);
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 991px) {
  .seo-galerie[class] {
    --cols: 3;
  }
}

@media (max-width: 767px) {
  .seo-galerie[class] {
    --cols: 2;
    --gap: 14px;
  }
}

/* Visionneuse (galerie.js) */
.seo-visionneuse {
  max-width: min(94vw, 1100px);
  max-height: 94vh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.seo-visionneuse::backdrop {
  background: rgba(7, 18, 34, .88);
}

.seo-visionneuse figure {
  margin: 0;
}

.seo-visionneuse img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(94vh - 70px);
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .6);
}

.seo-visionneuse figcaption {
  padding: 14px 8px 0;
  color: #e6eef7;
  font-size: 15px;
  text-align: center;
}

.seo-visionneuse button {
  position: fixed;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 26px;
  line-height: 0;
  cursor: pointer;
  transition: background-color .2s ease;
}

.seo-visionneuse button:hover,
.seo-visionneuse button:focus-visible {
  background: rgba(255, 255, 255, .28);
}

.seo-visionneuse__fermer {
  top: 18px;
  right: 18px;
}

.seo-visionneuse__prec,
.seo-visionneuse__suiv {
  top: 50%;
  transform: translateY(-50%);
}

.seo-visionneuse__prec {
  left: 16px;
}

.seo-visionneuse__suiv {
  right: 16px;
}

@media (max-width: 575px) {
  .seo-visionneuse__prec,
  .seo-visionneuse__suiv {
    top: auto;
    bottom: 18px;
    transform: none;
  }
}

/* Captures d'écran de l'accueil (data-galerie="ecran") : jusqu'à leur taille native (1424 px). */
.seo-visionneuse--ecran {
  max-width: min(96vw, 1424px);
}

.seo-visionneuse--ecran img {
  border-radius: 8px;
}

/* Les boutons passent sur la capture, souvent blanche : fond sombre pour rester visibles. */
.seo-visionneuse--ecran button {
  background: rgba(7, 18, 34, .78);
}

.seo-visionneuse--ecran button:hover,
.seo-visionneuse--ecran button:focus-visible {
  background: rgba(7, 18, 34, .92);
}

/* Sur un écran étroit, réduite à la largeur du téléphone, la capture serait illisible : elle
   s'affiche à sa taille réelle, pixel pour pixel, et se parcourt au doigt dans les deux sens. */
@media (max-width: 991px) {
  .seo-visionneuse--ecran {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
  }

  .seo-visionneuse--ecran figure {
    height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .seo-visionneuse--ecran img {
    width: auto;
    max-width: none;
    max-height: none;
    margin: 76px 16px 96px;
    border-radius: 6px;
  }

  .seo-visionneuse--ecran figcaption {
    position: fixed;
    right: 76px;
    bottom: 18px;
    left: 76px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(7, 18, 34, .78);
    font-size: 13.5px;
    line-height: 1.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seo-galerie__lien img,
  .seo-galerie__zoom {
    transition: none;
  }
}