.elementor-kit-2241{--e-global-color-primary:#070F22;--e-global-color-secondary:#6625F2;--e-global-color-text:#000000;--e-global-color-accent:#6625F2;--e-global-color-cbwhite1:#FFFFFF;--e-global-color-cbgrey01:#E0E0E0;--e-global-color-cbgrey02:#CCCCCC;--e-global-typography-primary-font-family:"Encode Sans Semi Condensed";--e-global-typography-primary-font-size:40px;--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Encode Sans Semi Condensed";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:500;--e-global-typography-cbtitrel-font-family:"Encode Sans Semi Condensed";--e-global-typography-cbtitrel-font-size:35px;--e-global-typography-cbtitrel-font-weight:400;--e-global-typography-cbinter35-font-family:"Inter";--e-global-typography-cbinter35-font-size:35px;--e-global-typography-cbinter35-font-weight:400;--e-global-typography-cbinter300-font-family:"Inter";--e-global-typography-cbinter300-font-size:20px;--e-global-typography-cbinter300-font-weight:300;--e-global-typography-cbinter540-font-family:"Inter";--e-global-typography-cbinter540-font-size:40px;--e-global-typography-cbinter540-font-weight:500;--e-global-typography-cbinter700-font-family:"Inter";--e-global-typography-cbinter700-font-size:25px;--e-global-typography-cbinter700-font-weight:700;--e-global-typography-cbexp500-font-family:"Encode Sans Expanded";--e-global-typography-cbexp500-font-size:16px;--e-global-typography-cbexp500-font-weight:500;--e-global-typography-cbexp500-line-height:15px;}.elementor-kit-2241 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1080px;}.e-con{--container-max-width:1080px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-2241{--e-global-typography-primary-font-size:34px;--e-global-typography-cbtitrel-font-size:30px;--e-global-typography-cbinter35-font-size:30px;--e-global-typography-cbinter300-font-size:18px;--e-global-typography-cbinter540-font-size:34px;--e-global-typography-cbinter700-font-size:22px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-2241{--e-global-typography-primary-font-size:28px;--e-global-typography-cbtitrel-font-size:26px;--e-global-typography-cbinter35-font-size:26px;--e-global-typography-cbinter300-font-size:16px;--e-global-typography-cbinter540-font-size:28px;--e-global-typography-cbinter700-font-size:20px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --font-1:Encode Sans Expanded; --text-base:16px; --color-1:#ffffff; --text-lg:18px; --text-xs:12px; --text-xl:20px; --text-4xl:40px; --color-2:#6625F2; --color-0:#000000; --text-3xl:30px; --font-2:Arial; --font-3:Inter; --color-border-0:#000000; --border-width-1:2px; --higth-1:20px; --text-sm:14px; --text-2xl:25px; --radius-sm:4px; --radius-md:8px; --radius-lg:16px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:0px; --font-4:Encode Sans Semi Expanded; }
/* Start custom CSS *//* ============================================================
   CEBIOS — CSS PERSONNALISÉ DU KIT ELEMENTOR
   Réorganisé le 25 juillet 2026, puis à nouveau le 18 septembre 2026
   Mis à jour le 23 septembre 2026 (sections 4.4, 4.5quater, 4.9 et 11 (x2) : cf. notes ci-dessous)
   ============================================================
   Sommaire :
   1. Variables globales (rappel)
   2. Navigation (toutes pages)
   3. Page Accueil
   4. Page CEBIOS + Popup Vision
   5. Page Nos sujets
   6. Pages légales
   7. Formulaires (Contact Form 7)
   8. Page Ingénierie — Audit
   9. Template Article (page article individuelle)
   10. Page Actualités
   11. Pages Produits digitaux (FAQ + Page Solutions digitales)
   12. Classes d'animation réutilisables (boutons, liens, images)
   ============================================================
   NOTE (23 septembre) — Section 4.4, popup Vision (Méthode/Anticipation/
   Proximité) :
   • Le clic sur l'image ronde de chaque bloc togglait les classes
     .visible (texte) / .active (image), via un script jQuery du
     "Code personnalisé" du site (pas dans ce fichier CSS). Demande :
     garder les 3 blocs toujours ouverts et désactiver ce clic.
   • Plutôt que de toucher au script JS, on neutralise ici côté CSS :
     .toggle-content force l'affichage ouvert en permanence (!important,
     que la classe .visible soit présente ou non), et .toggle-trigger
     passe en pointer-events:none pour empêcher toute interaction.
   • Au passage : le bloc "Méthode" n'a jamais eu la classe
     .toggle-content sur son texte (contrairement à Anticipation/
     Proximité) — il s'affichait donc déjà en permanence, ce qui
     explique le chevauchement de texte vu sur les captures d'écran
     avant ce correctif.
   ============================================================
   NOTE (23 septembre) — Section 4.9, burger non cliquable en popup
   Vision (breakpoint "laptop") :
   • Repéré en relisant le HTML de la page : le décor cercle RSE
     (.elementor-element-8f93fa3, visible uniquement sur l'onglet RSE
     de la popup Vision) avait un z-index: 1000, très largement
     supérieur à celui du bandeau flottant logo+burger
     (.elementor-element-6efee15) qui n'a lui aucun z-index défini
     dans ce fichier. Le bloc décor passait donc AU-DESSUS du burger
     et interceptait les clics, sans que rien ne soit visible à
     l'écran (le bloc est transparent, seuls son ::before/::after ont
     pointer-events:none — le conteneur lui-même, non).
   • z-index ramené à 2 : largement suffisant pour rester au-dessus du
     propre fond/contenu de son panneau (le reste du panneau n'a pas
     de z-index explicite), sans repasser devant le bandeau flottant.
     L'ordre interne (::after z-index:0 < ::before z-index:1 <
     enfants z-index:10) n'est pas affecté, il est relatif au bloc
     lui-même.
   • À tester en priorité sur l'onglet RSE en largeur "laptop" (le
     rapport initial mentionnait ce format précisément). Si le
     problème persiste ailleurs, inspecter l'élément (clic droit sur
     le burger → Inspecter) pour voir quel élément reçoit le clic en
     façade.
   • SUITE (23 septembre, même jour) : le z-index seul n'a pas suffi.
     Diagnostic confirmé via document.elementFromPoint() (le vrai
     coupable est .elementor-element-fe5ab65, un bloc div vide du
     bandeau logo+burger — voir NOTE section 4.5quater ci-dessous.
   ============================================================
   NOTE (23 septembre) — Section 4.5quater, burger non cliquable en
   popup Vision (suite/coupable réel) :
   • Diagnostic via document.elementFromPoint() sur le centre du
     burger (au clic) : c'est .elementor-element-fe5ab65 (bloc div
     vide, e-div-block-base, aucun widget dedans, fait partie du
     bandeau logo+burger .elementor-element-6efee15) qui reçoit le
     clic à la place du burger — pas le décor RSE (8f93fa3, corrigé
     en 4.9 mais qui n'était pas la cause de la persistance).
   • Fix : pointer-events:none sur .elementor-element-fe5ab65,
     puisqu'il n'a aucun contenu interactif à protéger.
   ============================================================
   NOTE (23 septembre) — Section 11, "Solutions digitales" :
   • Le bloc était dupliqué à l'identique (une 1ʳᵉ copie orpheline/
     incomplète, coupée avant les classes .cebios-tool-*, puis la
     copie complète) — supprimé, sans impact sur l'affichage puisque
     rigoureusement identique.
   • Le rond central est affiché par un widget "Code HTML" séparé.
     La grille CSS ne peut positionner que l'élément qui est
     directement enfant du conteneur en grille — c'est le WIDGET
     lui-même (classe `cebios-ring-item`, ajoutée dans Elementor sur
     ce widget), pas la <div class="cebios-ring-wrap"> qui est à
     l'intérieur de son code HTML.
   • Le placement des 5 outils est passé par plusieurs itérations :
     d'abord position absolute + %, puis une grille 3×3 avec
     justify-self/align-self (sans effet visible : chaque widget
     remplit toute sa case en largeur, quel que soit son réglage
     d'alignement). Solution retenue : une grille plus fine (5×5),
     où chaque outil a directement SA case au bon endroit — plus
     besoin de justify-self/align-self/width puisque la position
     est choisie par la case elle-même, pas par un alignement dedans.
   • Les classes .cebios-circle-wrap/-svg/-track/-seg (ancien cercle
     "5 couleurs" en 480px, avant le trait violet fin .cebios-ring-*)
     semblent toujours inutilisées sur le site — gardées telles
     quelles, à supprimer plus tard si confirmé qu'elles ne servent
     vraiment plus à rien.
   • SUITE (23 septembre, même jour) : deux demandes de plus sur cette
     page :
     1) Grille carrée forcée : .cebios-circle-stage passe en
        width/height !important + aspect-ratio:1/1, au cas où une
        règle Elementor ne contraindrait qu'une seule des deux
        dimensions (largeur imposée par le conteneur, hauteur restée
        libre par ex.) — garde-fou en plus du !important déjà discuté
        mais jamais confirmé comme appliqué/régénéré.
     2) Logos rapprochés du centre : sans toucher aux cases de la
        grille (qui fonctionnent), chaque .cebios-tool-* reçoit un
        transform: translate(...) vers le centre. D'abord testé avec
        UNE variable partagée, puis passé à UNE variable par outil
        (--cebios-nudge-veille/-audit/-olfactif/-amelioration/-lms),
        car Veille/Audit se déplacent en diagonale (2 axes) et
        Olfactif/Amélioration/LMS sur 1 seul axe : à valeur égale, la
        diagonale parcourt plus de distance visuelle. Au 23 septembre,
        Veille/Audit et LMS validés "parfait" par Vincent (108px et
        13px). Olfactif/Amélioration : 108 → 170 → 195 → 220px,
        toujours dans le même sens (plus de nudge = plus proche).
   ============================================================ */


/* ============================================================
   1. VARIABLES GLOBALES — toujours utiliser ces variables plutôt
      que des couleurs en dur dans le CSS
   ============================================================
   --e-global-color-primary    = Bleu nuit #070F22
   --e-global-color-secondary  = Violet    #6625F2
   --e-global-color-text       = Noir      #000000
   --e-global-color-cbgrey01   = Gris séparation #E0E0E0
   --e-global-color-cbgrey02   = Gris inactif    #CCCCCC
   ============================================================ */


/* ============================================================
   2. NAVIGATION (toutes les pages)
   ============================================================ */

/* --- 2.1 Structure de base + indicateur animé (GSAP, 20 juillet) --- */
.elementor-element-792e7c0d .elementor-nav-menu--main , .elementor-element-b75ddbc .elementor-nav-menu--main {
  position: relative;
}
.elementor-element-792e7c0d .elementor-nav-menu--main .elementor-item:after , .elementor-element-b75ddbc .elementor-nav-menu--main .elementor-item:after {
  display: none !important;
}
.cebios-nav-indicator {
  position: absolute;
  bottom: -6px;
  left: 0;
  height: 2px;
  width: 0;
  background-color: #6625F2;
  opacity: 0;
  pointer-events: none;
  border-radius: 2px;
}

/* --- 2.2 Boutons Démo / Connexion --- */
.menu-item.btn-nav-style > a.elementor-item {
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
  border-radius: 0 !important;
  padding: 8px 20px !important;
  background: transparent !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  margin-inline-end: 10px;
  transition: background 0.2s ease;
  position: relative;
  overflow: hidden;
}
.menu-item.btn-nav-style > a:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}
.elementor-element-792e7c0d .menu-item.btn-nav-style > a, .elementor-element-b75ddbc .menu-item.btn-nav-style > a {
  white-space: nowrap !important;
}

/* Remplissage animé au survol (GSAP) : suit la couleur du bouton (inversion), fusion des itérations du 20-21 juillet */
.cebios-btn-fill {
  position: absolute;
  inset: 0;
  background-color: currentColor !important;
  opacity: 1 !important;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  border-radius: 0;
  z-index: 0;
}
.cebios-btn-label {
  position: relative;
  z-index: 1;
  display: inline-block;
}

/* Largeur nowrap pour éviter le retour à la ligne à certaines largeurs desktop */
.elementor-element-792e7c0d .elementor-nav-menu--main > ul.elementor-nav-menu , .elementor-element-b75ddbc .elementor-nav-menu--main > ul.elementor-nav-menu {
  flex-wrap: nowrap !important;
}
.elementor-element-792e7c0d .menu-item.btn-nav-style, .elementor-element-b75ddbc .menu-item.btn-nav-style {
  flex-shrink: 0 !important;
}

@media (max-width: 767px) {
  .menu-item.btn-nav-style > a {
    color: #000000 !important;
    border-color: #000000 !important;
  }
  .menu-item.btn-nav-style > a:hover {
    background: rgba(0, 0, 0, 0.06) !important;
  }
  .menu-item.btn-nav-style {
    width: fit-content !important;
    margin: 8px 0 8px 20px !important;
  }
  .menu-item.btn-nav-style > a {
    width: fit-content !important;
    display: inline-flex !important;
    flex-grow: 0 !important;
  }
}

/* --- 2.3 Menu déroulant (tous niveaux) — refonte visuelle du 21 juillet --- */
.elementor-element-792e7c0d .elementor-nav-menu--dropdown , .elementor-element-b75ddbc .elementor-nav-menu--dropdown {
  background-color: #FFFFFF !important;
  border-radius: 0 !important;
  padding: 10px !important;
  min-width: 260px !important;
  box-shadow: 0 24px 48px rgba(7, 15, 34, 0.18), 0 4px 14px rgba(7, 15, 34, 0.07) !important;
  border: 1px solid rgba(7, 15, 34, 0.05) !important;
  margin-top: 14px !important;
}

/* Petite flèche visuelle reliant le panneau à son parent */
.elementor-element-792e7c0d .elementor-nav-menu--main > ul.elementor-nav-menu > li > .elementor-nav-menu--dropdown::before , .elementor-element-b75ddbc .elementor-nav-menu--main > ul.elementor-nav-menu > li > .elementor-nav-menu--dropdown::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 24px;
  width: 12px;
  height: 12px;
  background-color: #FFFFFF;
  transform: rotate(45deg);
  border-radius: 2px;
  box-shadow: -2px -2px 4px rgba(7, 15, 34, 0.03);
}

.elementor-element-792e7c0d .elementor-nav-menu--dropdown .elementor-sub-item,
.elementor-element-792e7c0d .elementor-nav-menu--dropdown .elementor-item , .elementor-element-b75ddbc .elementor-nav-menu--dropdown .elementor-item {
  color: #070F22 !important;
  fill: #070F22 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  text-transform: none !important;
  border-radius: 0 !important;
  padding: 12px 14px !important;
  margin: 1px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease !important;
}
.elementor-element-792e7c0d .elementor-nav-menu--dropdown a:hover , .elementor-element-b75ddbc .elementor-nav-menu--dropdown a:hover {
  color: #6625F2 !important;
  fill: #6625F2 !important;
  padding-left: 18px !important;
}

/* Sous-sous-menus (3e niveau) : léger décalage + fond très légèrement teinté pour marquer la hiérarchie */
.elementor-element-792e7c0d .elementor-nav-menu--dropdown .elementor-nav-menu--dropdown , .elementor-element-b75ddbc .elementor-nav-menu--dropdown .elementor-nav-menu--dropdown {
  background-color: #FAF9FC !important;
  box-shadow: 0 20px 44px rgba(7, 15, 34, 0.16) !important;
  margin-top: 0 !important;
}
.elementor-element-792e7c0d .elementor-nav-menu--dropdown .elementor-nav-menu--dropdown::before , .elementor-element-b75ddbc .elementor-nav-menu--dropdown .elementor-nav-menu--dropdown::before {
  display: none;
}

/* Flèches (chevrons) : plus fines et discrètes */
.elementor-element-792e7c0d .sub-arrow svg, .elementor-element-b75ddbc .sub-arrow svg {
  width: 9px !important;
  height: 9px !important;
  opacity: 0.65;
}
.elementor-element-792e7c0d .elementor-nav-menu--dropdown .sub-arrow svg , .elementor-element-b75ddbc .elementor-nav-menu--dropdown .sub-arrow svg {
  opacity: 0.45;
}

/* --- 2.4 Icône hamburger mobile → croix : morph en 3 barres animées GSAP (24 juillet) --- */
.elementor-element-792e7c0d .elementor-menu-toggle__icon--open,
.elementor-element-792e7c0d .elementor-menu-toggle__icon--close {
  opacity: 0 !important;
}
.elementor-element-792e7c0d .elementor-menu-toggle {
  position: relative;
}
.cebios-burger {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cebios-burger-bar {
  position: absolute;
  left: 1.5px;
  width: 22px;
  height: 3px;
  background-color: currentColor;
  border-radius: 2px;
}
.cebios-burger-bar:nth-child(1) { top: 6px; }
.cebios-burger-bar:nth-child(2) { top: 11.5px; }
.cebios-burger-bar:nth-child(3) { top: 17px; }

/* --- 2.5 Contexte "texte foncé" sur les pages à fond blanc (simplifié le 27 juillet)
   Pour ajouter une page à ce contexte : dans l'édition de la page (WP admin), cocher le champ
   "Nav en texte foncé" (ACF) — aucune modification de CSS nécessaire. --- */
body.nav-dark-context .elementor-element-792e7c0d .elementor-nav-menu--main .elementor-item {
  color: #070F22 !important;
  fill: #070F22 !important;
}
body.nav-dark-context .elementor-element-792e7c0d .elementor-nav-menu--main .elementor-item:focus,
body.nav-dark-context .elementor-element-792e7c0d .elementor-nav-menu--main .elementor-item.elementor-item-active {
  color: #070F22 !important;
  fill: #070F22 !important;
}
body.nav-dark-context .elementor-element-792e7c0d .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after,
body.nav-dark-context .elementor-element-792e7c0d .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item.elementor-item-active:after {
  background-color: #070F22 !important;
}
body.nav-dark-context .elementor-element-792e7c0d .e--pointer-framed .elementor-item:after {
  border-color: #070F22 !important;
}
body.nav-dark-context .elementor-element-792e7c0d div.elementor-menu-toggle {
  color: #070F22 !important;
}
body.nav-dark-context .elementor-element-792e7c0d div.elementor-menu-toggle svg {
  fill: #070F22 !important;
}
body.nav-dark-context .elementor-element-792e7c0d .menu-item.btn-nav-style > a {
  color: #070F22 !important;
  border-color: #070F22 !important;
}
body.nav-dark-context .elementor-element-792e7c0d .menu-item.btn-nav-style > a:hover {
  background: rgba(7, 15, 34, 0.08) !important;
}
body.nav-dark-context .cebios-logo-nav img {
  content: url('https://cebios.fr/wp-content/uploads/2026/06/logo-cebios.png') !important;
}

.cebios-logo-nav img {
  width: 150px !important;
  height: auto !important;
}

/* ============================================================
   3. PAGE ACCUEIL
   ============================================================ */

/* --- 3.1 Navigation par pastilles (Produits Digitaux) --- */

#pastilles-nav {
  position: relative;
  padding: 0;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
}

#pastilles-nav::before {
  content: '';
  position: absolute;
  top: 25px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--e-global-color-cbgrey01);
  z-index: 0;
}

#pastilles-nav .elementor-icon {
  position: relative;
  z-index: 1;
  background: white;
}

.pastille-0 svg, .pastille-1 svg, .pastille-2 svg, .pastille-3 svg, .pastille-4 svg {
  color: var(--e-global-color-cbgrey02);
  fill: var(--e-global-color-cbgrey02);
  transition: all 0.3s ease;
  cursor: pointer;
}

.pastille-active svg {
  color: var(--e-global-color-secondary) !important;
  fill: var(--e-global-color-secondary) !important;
}

@media (max-width: 767px){
  .cebios-hide-mobile{ display: none !important; }
}

@media (max-width: 1024px){
  .cebios-hide-tablette{ display: none !important; }
}

/* --- 3.2 Cartes produits digitaux (Ultra-Doux) --- */
#carte-1, #carte-2, #carte-3, #carte-4, #carte-5 {
  background: white;
  border: 2px solid transparent;
  border-radius: 12px; /* Un poil plus arrondi pour adoucir le design */
  padding: 10px;
  cursor: pointer;

  /* La magie est ici : une courbe exponentielle synchronisée sur 0.7 seconde */
  transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.7s cubic-bezier(0.16, 1, 0.3, 1);

  width: 300px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 8px;
  will-change: transform, box-shadow, width, height;
  overflow: hidden; /* Garde le contenu propre pendant la transition */
}


/* --- RESPONSIVE FIX (Le secret pour éviter le saut) --- */
@media (min-width: 768px) and (max-width: 1024px) {
  div:has(> #carte-1) {
    flex-wrap: wrap;
    justify-content: center;
  }
  #carte-1, #carte-2, #carte-3, #carte-4, #carte-5 {
    width: 30%;
    aspect-ratio: 1 / 1;
    height: auto;
    padding: 16px;
    margin: 6px;
  }
  .carte-active {
    width: 34% !important;
    aspect-ratio: 1 / 1;
    height: auto !important;
  }
}
@media (max-width: 767px) {
  div:has(> #carte-1) {
    flex-wrap: wrap;
    justify-content: center;
  }
  #carte-1, #carte-2, #carte-3, #carte-4, #carte-5 {
    width: 30%;
    aspect-ratio: 1 / 1;
    height: auto;
    padding: 12px;
    margin: 4px;
  }
  .carte-active {
    width: 34% !important;
    aspect-ratio: 1 / 1;
    height: auto !important;
  }
}

/* --- 3.3 Liens images bas de page (+ responsive) --- */
#lien-1, #lien-2, #lien-3 {
  height: 450px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
#lien-1:hover, #lien-2:hover, #lien-3:hover {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
@media (max-width: 767px) {
  #lien-1, #lien-2, #lien-3 {
    height: 260px;
  }
}


/* Animation des flèches du caroussel Expertise */
.carousel-next{
  transition: color .3s ease, transform .3s cubic-bezier(0.22, 1, 0.36, 1), filter .3s ease;
}
.carousel-next:hover{
  color: #6625F2 !important;
  transform: scale(1.15);
  filter: drop-shadow(0 0 6px rgba(102, 37, 242, 0.45));
}

.carousel-prev{
  transition: color .3s ease, transform .3s cubic-bezier(0.22, 1, 0.36, 1), filter .3s ease;
}
.carousel-prev:hover{
  color: #6625F2 !important;
  transform: scale(1.15);
  filter: drop-shadow(0 0 6px rgba(102, 37, 242, 0.45));
}

/* --- 3.4 Diapositive (lien animé avec flèche) --- */
/* Page Accueil Diapositive */
.cebios-slide-lien{
  position: relative;
  display: inline-block;
  cursor: pointer;
  padding-right: 22px;
  color: inherit;
}
.cebios-slide-lien::after{
  content: "";
  position: absolute;
  right: 2px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-50%) translateX(0) rotate(-45deg);
  transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1);
}
.cebios-slide-lien::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}
.cebios-slide-lien:hover::after{
  transform: translateY(-50%) translateX(4px) rotate(-45deg);
}
.cebios-slide-lien:hover::before{
  transform: scaleX(1);
}


/* ============================================================
   4. PAGE CEBIOS (notre-entreprise) + POPUP VISION
   ============================================================ */

/* --- 4.1 Histoire : panneaux par année --- */
.year-panels-grid {
  position: relative;
  min-height: 30px;
}
.year-panel {
  display: none !important;
}
.year-panel.active {
  display: block !important;
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
}
.year-nav-item {
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, transform 0.2s;
}
.year-nav-item {
  transform-origin: right center;
}
.year-nav-item.active {
  opacity: 1 !important;
}
.year-nav-item.active .elementor-heading-title {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* --- 4.2 Popup Vision : plein écran + bouton fermeture --- */
#elementor-popup-modal-3084 {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  transform: none !important;
  border-radius: 0 !important;
}
#elementor-popup-modal-3084 .dialog-close-button {
  top: 24px !important;
  right: 24px !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: 50% !important;
  transition: background 0.2s ease;
}
#elementor-popup-modal-3084 .dialog-close-button:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}
#elementor-popup-modal-3084 .dialog-close-button svg {
  width: 18px !important;
  height: 18px !important;
  color: #ffffff !important;
  fill: #ffffff !important;
}
#elementor-popup-modal-3084 .dialog-widget-content,
#elementor-popup-modal-3084 .dialog-message {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: 0 !important;
}

.elementor-element-6e57216 .elementor-loop-container {
  padding-bottom: 20px;
}

/* --- 4.3 Onglets du popup (VISION./HISTOIRE./MÉTIERS./ÉQUIPE./RSE.) --- */
.vision-panel {
  display: none !important;
}
.vision-panel.active {
  display: flex !important;
}
.vision-nav-item {
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}
.vision-nav-item.active {
  opacity: 1 !important;
  font-weight: 700 !important;
}

/* --- 4.4 Blocs Méthode / Anticipation / Proximité (popup Vision) : toujours ouverts
   (23 septembre) — clic sur l'image ronde desactive : le JS (jQuery, dans le
   "Code personnalise" du site) toggle toujours les classes .visible/.active au
   clic, mais on le neutralise ici cote CSS pour ne pas devoir toucher au script.
   .toggle-content force !important pour ecraser l'etat "ferme" (opacity:0;
   max-height:0) meme si la classe .visible est retiree par un clic ; .toggle-trigger
   passe en pointer-events:none pour empecher toute interaction. */
.toggle-content,
.toggle-content.visible {
  opacity: 1 !important;
  max-height: none !important;
  overflow: visible !important;
}
.toggle-trigger {
  cursor: default !important;
  pointer-events: none !important;
  transition: none;
}
.toggle-trigger.active {
  transform: none;
}

/* --- 4.5 Menu du site caché par défaut dans le popup, affiché au clic sur .vision-menu-toggle (GSAP pilote opacité/déplacement, JS) --- */
.elementor-element-b75ddbc {
  display: none;
}

/* --- 4.5ter Empêche le double-hamburger : le widget menu natif de la popup a son propre toggle mobile, on le désactive puisqu on utilise le nôtre --- */
.elementor-element-b75ddbc .elementor-menu-toggle {
  display: none !important;
}

/* --- 4.5bis Icône toggle popup : burger 3 barres (GSAP, même style que le header) --- */
.vision-menu-toggle {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}
.vision-menu-toggle .elementor-icon-wrapper,
.vision-menu-toggle .elementor-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vision-menu-toggle svg {
  opacity: 0 !important;
}
.vision-menu-toggle {
  color: #FFFFFF !important;
}

/* --- 4.5quater (23 septembre) Fix burger non cliquable en breakpoint "laptop" :
   .elementor-element-fe5ab65 est un bloc div vide (e-div-block-base, sans widget
   dedans) qui fait partie du bandeau logo+burger de la popup Vision. Confirmé via
   document.elementFromPoint() que c'est LUI qui reçoit le clic a la place du burger
   a cette largeur (pas le décor RSE, deja corrige en 4.9). N'ayant aucun contenu
   interactif, on lui desactive les evenements de clic pour laisser passer ceux
   destines au burger (.vision-menu-toggle) en dessous. --- */
.elementor-element-fe5ab65 {
  pointer-events: none !important;
}

/* --- 4.6 Fond conditionnel RSE --- */
.elementor-element-559ea55.rse-bg-active {
  position: relative;
}
.elementor-element-559ea55.rse-bg-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  background-image: linear-gradient(rgba(7,15,34,0.78), rgba(7,15,34,0.78)), url('https://cebios.fr/wp-content/uploads/2026/09/photo-bien-jeremy.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}
.elementor-element-559ea55.rse-bg-active > * {
  position: relative;
  z-index: 1;
}

/* --- 4.7 Cercle EcoVadis --- */
.elementor-element-58f429b {
  --container-widget-width: 320px !important;
  --container-widget-flex-grow: 0 !important;
  flex: 0 0 320px !important;
  width: 320px !important;
  height: 320px !important;
  box-sizing: border-box !important;
}
.elementor-element-d1918da {
  --container-widget-width: auto !important;
  --container-widget-flex-grow: 1 !important;
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
}

/* --- 4.8 Cartes équipe (photo N&B) --- */
.equipe-photo-nb img {
  filter: grayscale(100%);
  object-fit: cover;
  width: 96px;
  height: 96px;
  border-radius: 4px;
}
.equipe-photo-v7 {
  width: 100%;
}
.equipe-photo-v7 img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
}
.equipe-service-heading {
  position: relative;
  padding-left: 16px;
  border-left: 4px solid #6625F2;
}
.equipe-service-heading .elementor-heading-title {
  letter-spacing: 0.01em;
}

.elementor-element-559ea55 {
  height: auto !important;
  min-height: 905px !important;
}

/* --- 4.9 Décor : UN cercle avec 2 arcs opposés visibles, panneau RSE popup Vision (27 juillet) --- */
.elementor-element-8f93fa3::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 12.2%;
  transform: translateY(-50%);
  width: 49vh;
  height: 49.5vh;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-sizing: border-box;
  z-index: 0;
  pointer-events: none;
}

.elementor-element-8f93fa3::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 12.2%;
  transform: translateY(-50%);
  width: 49vh;
  height: 49.5vh;
  border-radius: 50%;
  border: 5px solid #6625F2;
  box-sizing: border-box;
  -webkit-mask-image: var(--rse-circle-mask, conic-gradient(
    black 0deg 90deg,
    transparent 90deg 180deg,
    black 180deg 270deg,
    transparent 270deg 360deg
  ));
  mask-image: var(--rse-circle-mask, conic-gradient(
    black 0deg 90deg,
    transparent 90deg 180deg,
    black 180deg 270deg,
    transparent 270deg 360deg
  ));
  z-index: 1;
  pointer-events: none;
}

.elementor-element-8f93fa3 > * {
  position: relative;
  z-index: 10;
}

.elementor-element-8f93fa3 {
    z-index: 2; /* 23 septembre : etait 1000 -> passait au-dessus du burger flottant (.vision-menu-toggle), voir NOTE en tete de fichier */
  position: relative;
  width: 100%;
  min-height: 360px;
  background-color: transparent;
  background-image:
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.4) 4px, transparent 4.5px),
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.4) 4px, transparent 4.5px),
    radial-gradient(circle at 0% 100%, rgba(255, 255, 255, 0.4) 4px, transparent 4.5px),
    radial-gradient(circle at 100% 100%, rgba(255, 255, 255, 0.4) 4px, transparent 4.5px),
    linear-gradient(to right, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
  background-size: 24.85% 49.2%;
  background-position: 3.9px 3.7px;

}


/* --- 4.10 Liste des années Histoire : hauteur fixe + défilement (27 juillet) --- */
.elementor-element-6e57216 {
  height: 300px;
  overflow: hidden;
  position: relative;
}

/* --- 4.11 Indicateur de défilement liste années (dégradés + piste) --- */
.elementor-element-6e57216::before,
.elementor-element-6e57216::after {
  content: '';
  position: absolute;
  left: 0;
  right: 16px;
  height: 40px;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.25s ease;
}
.elementor-element-6e57216::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(15, 18, 36, 0.9), transparent);
  opacity: 0;
}
.elementor-element-6e57216::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(15, 18, 36, 0.9), transparent);
  opacity: 1;
}
.elementor-element-6e57216.cebios-not-at-top::before {
  opacity: 1;
}
.elementor-element-6e57216.cebios-at-bottom::after {
  opacity: 0;
}
.cebios-year-scroll-track {
  position: absolute;
  top: 0;
  left: 4px;
  width: 3px;
  height: 100%;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  z-index: 3;
  pointer-events: none;
}
.cebios-year-scroll-thumb {
  position: absolute;
  left: 0;
  width: 100%;
  background: #6625F2;
  border-radius: 2px;
}


/* ============================================================
   5. PAGE NOS SUJETS
   ============================================================ */

/* --- 5.1 Loop Grid des cartes secteurs (+ responsive) --- */
.secteurs-loop-grid .elementor-loop-container { gap: 20px; }
.elementor-element-29e6663 { padding:0 !important; width:100%; }
.elementor-element-cardimg01 { width:100%; }
.elementor-element-cardimg01 .elementor-widget-container { width:100%; line-height:0; }
.elementor-element-cardimg01 img { width:100% !important; height:auto; aspect-ratio: 3 / 3.4; object-fit:cover; object-position:center; display:block; margin:0; }
.elementor-element-121a872 { display:flex !important; flex-direction:column !important; justify-content:center !important; height:92px !important; min-height:92px !important; max-height:92px !important; box-sizing:border-box; overflow:hidden; }
.elementor-element-121a872 .elementor-heading-title, .elementor-element-121a872 h1, .elementor-element-121a872 h2, .elementor-element-121a872 h3, .elementor-element-121a872 h4 { max-height:100%; overflow:hidden; }
@media (max-width:1024px){ .elementor-element-121a872{ height:84px !important; min-height:84px !important; max-height:84px !important; } }
@media (max-width:767px){ .secteurs-loop-grid .elementor-loop-container{ gap:16px; } .elementor-element-121a872{ height:80px !important; min-height:80px !important; max-height:80px !important; } }


/* ============================================================
   6. PAGES LÉGALES (Mentions légales, Politique de confidentialité)
   ============================================================ */
.legal-content h2 {
  font-family: 'Encode Sans Semi Condensed', sans-serif;
  color: #070F22;
  font-size: 20px;
  font-weight: 600;
  margin-top: 32px;
  margin-bottom: 12px;
}
.legal-content h2:first-child {
  margin-top: 0;
}
.legal-content p {
  margin: 0 0 16px 0;
  line-height: 1.7;
}
.legal-content a {
  color: #6625F2;
}
.legal-content ul {
  margin: 0 0 16px 0;
  padding-left: 20px;
  line-height: 1.7;
}
.legal-content em {
  color: #9AA0A6;
}

/* --- 6.2 Page Politiques : bascule CGV / Règlement intérieur --- */
/* --- Page Politiques : bascule CGV / Reglement interieur --- */
.politique-question {
  cursor: pointer;
  color: #999999 !important;
  transition: color 0.25s ease;
}
.politique-question.active {
  color: #000000 !important;
}
.politique-panel {
  display: none !important;
}
.politique-panel.active {
  display: flex !important;
}


/* ============================================================
   7. FORMULAIRES (Contact Form 7 — s'applique à tous les
      formulaires CF7 du site)
   ============================================================ */
.wpcf7-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 100px;
  font-family: 'Inter', sans-serif;
}
.wpcf7-form > p {
  margin: 0 0 55px 0;
}
.wpcf7-form > p.wpcf7-field-full {
  grid-column: 1 / -1;
}
@media (max-width: 600px) {
  .wpcf7-form {
    grid-template-columns: 1fr;
  }
}

.wpcf7-form label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #070F22;
}
.wpcf7-form-control-wrap {
  display: block;
  margin-top: 15px;
}
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-textarea,
.wpcf7-form-control.wpcf7-select {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 16px;
  border: 1px solid black;
  border-radius: 2px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #070F22;
  background: transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wpcf7-form-control.wpcf7-text:focus,
.wpcf7-form-control.wpcf7-textarea:focus,
.wpcf7-form-control.wpcf7-select:focus {
  outline: none;
  border-color: #6625F2;
  box-shadow: 0 0 0 3px rgba(102, 37, 242, 0.15);
}
.wpcf7-form-control.wpcf7-textarea {
  min-height: 160px;
  resize: vertical;
}
.wpcf7-form-control.wpcf7-not-valid {
  border-color: #D32F2F;
}
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #D32F2F;
}

/* Case à cocher CGV */
.wpcf7-field-checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: #4A4A4A;
}
.wpcf7-list-item {
  margin: 0;
}
.wpcf7-list-item-label a {
  color: #6625F2;
}

/* Bouton d'envoi */
.wpcf7-form-control.wpcf7-submit {
  background: #6625F2;
  color: #FFFFFF;
  border: none;
  border-radius: 2px;
  padding: 12px 30px;
  font-family: 'Encode Sans Semi Condensed', sans-serif;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.wpcf7-form-control.wpcf7-submit:hover:not(:disabled) {
  background: #5019C9;
}
.wpcf7-form-control.wpcf7-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Bandeau de réponse (succès / erreur) */
.wpcf7-response-output {
  grid-column: 1 / -1;
  margin: 16px 0 0 0 !important;
  padding: 14px 18px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  border: 1px solid #E0E0E0 !important;
}
.wpcf7-form.sent .wpcf7-response-output {
  background: #EDFCF3;
  border-color: #34C77B !important;
  color: #0F7A44;
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output,
.wpcf7-form.payment-required .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output {
  background: #FDEDEE;
  border-color: #E4534B !important;
  color: #A32A22;
}


/* ============================================================
   8. PAGE INGÉNIERIE — AUDIT
   ============================================================ */

/* --- Carte secteur (page Audit) : image plein cadre --- */
.elementor-element-56dbf8b {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
}
.elementor-element-56dbf8b img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.elementor-element-29c3336 {
  width: 100%;
}

.e-881b166-band {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
}
.cebios-secteur-lien-data {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
}


/* ============================================================
   9. TEMPLATE ARTICLE (page article individuelle)
   ============================================================ */

/* ============================================================
   Template Article : carte "Dernières actualités" (24 août)
   ============================================================ */
.elementor-element-20ba36e {
  display: flex !important;
  flex-direction: column;
  gap: 14px;
}
.elementor-element-26d7898 {
  overflow: hidden;
}
.elementor-element-26d7898 img {
  width: 100%;
  aspect-ratio: 3.2 / 2;
  object-fit: cover;
  display: block;
}
.elementor-element-20ba36e:hover .elementor-element-26d7898 img {
  transform: scale(1.04);
}
.elementor-element-c8a13c6 .elementor-heading-title {
  font-family: 'Encode Sans Semi Condensed', sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  color: #070F22;
  transition: color 0.25s ease;
}
.elementor-element-20ba36e:hover .elementor-element-c8a13c6 .elementor-heading-title {
  color: #6625F2;
}

/* --- Template Article : pastilles 'Categories de lecture' colorees par terme (24 aout) --- */
.cebios-categorie-pill {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  padding: 6px 16px !important;
  border: none !important;
  border-radius: 2px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  transition: filter 0.2s ease;
}
.cebios-categorie-pill:hover {
  filter: brightness(0.9);
}

/* --- Template 5147 : lire plus en ligne + date/pastilles groupees (25 aout) --- */
.cebios-lireplus-inline {
  text-decoration: underline;
  white-space: nowrap;
}
.cebios-carte-riche-meta,
.elementor-element-cbdatep1 {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 10px !important;
}
.cebios-carte-riche-date-label {
  font-size: 12px !important;
  color: #070F22 !important;
  margin-right: -4px;
}

/* --- Fleche fin de titre, widget "Dernieres actualites" en bas des pages article uniquement (26 aout) --- */

.elementor-element-dc12bf5 .elementor-element-312d00a .elementor-heading-title::after {
  content: " \2192";
}


/* ============================================================
   10. PAGE ACTUALITÉS
   ============================================================ */

/* --- Liste Actualites : alternance carte riche / carte simple, par page (24 aout) ---
   IMPORTANT : tout est scope a .elementor-element-a6dce3e (le widget Grille de boucle
   de la page Actualites) car .e-loop-item est une classe GENERIQUE reutilisee par TOUS
   les widgets Loop Grid/Carousel du site (ex. "Dernieres actualites" sur les pages
   article) - sans ce scope, ces regles (grid-column, order) cassaient aussi ces
   AUTRES grilles ailleurs sur le site. Bug trouve et corrige le 24 aout. */
.elementor-element-a6dce3e .e-loop-item .cebios-carte-riche,
.elementor-element-a6dce3e .e-loop-item .cebios-carte-simple {
  display: none !important;
}
.elementor-element-a6dce3e .e-loop-item {
  grid-column: auto;
}

/* Page IMPAIRE (par defaut, y compris le 1er chargement) :
   riche+riche, simple+simple, riche seule pleine largeur (miroir) */
.elementor-element-a6dce3e .e-loop-item:nth-of-type(1) .cebios-carte-simple,
.elementor-element-a6dce3e .e-loop-item:nth-of-type(2) .cebios-carte-simple {
  display: flex !important;
}
.elementor-element-a6dce3e .e-loop-item:nth-of-type(3) .cebios-carte-riche,
.elementor-element-a6dce3e .e-loop-item:nth-of-type(4) .cebios-carte-riche {
  display: flex !important;
  flex-direction: row !important;
}
.elementor-element-a6dce3e .e-loop-item:nth-of-type(3),
.elementor-element-a6dce3e .e-loop-item:nth-of-type(4) {
  grid-column: 1 / -1 !important;
}
.elementor-element-a6dce3e .e-loop-item:nth-of-type(1) { order: 3 !important; }
.elementor-element-a6dce3e .e-loop-item:nth-of-type(2) { order: 4 !important; }
.elementor-element-a6dce3e .e-loop-item:nth-of-type(3) { order: 1 !important; }
.elementor-element-a6dce3e .e-loop-item:nth-of-type(4) { order: 2 !important; }
.elementor-element-a6dce3e .e-loop-item:nth-of-type(5) { order: 5 !important; }
.elementor-element-a6dce3e .e-loop-item:nth-of-type(5) .cebios-carte-riche {
  display: flex !important;
  flex-direction: row-reverse !important;
}
.elementor-element-a6dce3e .e-loop-item:nth-of-type(5) {
  grid-column: 1 / -1 !important;
}

.cebios-carte-riche {
  display: none !important;
}
.page-parity-even .e-loop-item:nth-of-type(5) {
  grid-column: auto !important;
}
.page-parity-even .e-loop-item:nth-of-type(1) .cebios-carte-simple {
  display: flex !important;
}
.page-parity-even .e-loop-item:nth-of-type(1) {
  grid-column: 1 / -1 !important;
}
.page-parity-even .e-loop-item:nth-of-type(2) .cebios-carte-riche,
.page-parity-even .e-loop-item:nth-of-type(3) .cebios-carte-riche {
  display: flex !important;
}
.page-parity-even .e-loop-item:nth-of-type(3) .cebios-carte-simple,
.page-parity-even .e-loop-item:nth-of-type(4) .cebios-carte-simple {
  display: none !important;
}
.page-parity-even .e-loop-item:nth-of-type(4) .cebios-carte-simple,
.page-parity-even .e-loop-item:nth-of-type(5) .cebios-carte-simple {
  display: flex !important;
}

.cebios-carte-riche {
  flex-direction: row !important;
  align-items: center !important;
  gap: 130px !important;
  width: 100% !important;
  padding: 24px 0 !important;
}
.cebios-carte-riche-texte {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 55% !important;
  min-width: 0 !important;
}
.elementor-element-d022070 {
  flex: 0 0 40% !important;
  max-width: 100% !important;
}
.elementor-element-d022070 img {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  display: block !important;
}
.elementor-widget-theme-post-excerpt.elementor-element-f2150ee {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: #5B6270 !important;
  line-height: 1.5 !important;
  display: inline !important;
}
.cebios-carte-riche-pills {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 4px;
}
.cebios-carte-riche-date {
  font-size: 12px !important;
  color: #070F22 !important;
  font-style: normal !important;
}

.cebios-carte-riche-texte {
  gap: 10px !important;
}
.cebios-carte-riche-texte > * {
  margin: 0 !important;
}

.cebios-carte-simple {
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
}
.elementor-element-cd80e90 img {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  display: block !important;
}
.elementor-element-0f29d97 .elementor-heading-title {
  font-family: 'Encode Sans Semi Condensed', sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  color: #070F22 !important;
}

/* --- Pagination Actualites : suppression du clignotement pendant le chargement AJAX (24 aout) --- */
.elementor-widget-loop-grid.e-loading-overlay {
  animation: none !important;
  opacity: 1 !important;
}


/* --- Liste Actualites : separateurs pleine largeur entre articles (24 aout) --- */

.cebios-carte-simple {
  padding-bottom: 24px !important;
}
.cebios-carte-riche {
  padding-bottom: 24px !important;
}


/* --- Pagination Actualites, stylee a son emplacement natif dans le widget (24 aout) --- */
.elementor-element-a6dce3e .elementor-pagination {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 42px;
  width: 100%;
  padding: 32px 0;
}
.elementor-element-a6dce3e .page-numbers.prev {
  text-decoration: underline;
  color: #070F22;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
}
.elementor-element-a6dce3e .page-numbers.next {
  text-decoration: underline;
  color: #070F22;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
}

.elementor-element-a6dce3e .cebios-pagination-numbers {
  display: flex;
  align-items: center;
}
.elementor-element-a6dce3e .page-numbers:not(.prev):not(.next) {
  color: #8A8F98;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  margin: 0 9px;
}
.elementor-element-a6dce3e .page-numbers.current {
  color: #070F22 !important;
  font-weight: 700 !important;
}
.elementor-element-a6dce3e .cebios-pagination-dots {
  color: #8A8F98;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  user-select: none;
}

/* --- Actualites : panneau de filtres par sous-domaine (25 aout) --- */
.elementor-element-f945fb1 {
  position: relative;
}
.cebios-filtres-trigger {
  cursor: pointer;
  user-select: none;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  color: #070F22 !important;
  border: 1px solid #A0A0A0;
  padding: 0 18px;
  width: 350px;
  height: 40px;
  box-sizing: border-box;
}
.cebios-filtres-trigger::after {
  content: "\25BE";
  font-size: 12px;
  transition: transform 0.2s ease;
}
.cebios-filtres-trigger.active::after {
  transform: rotate(180deg);
}
.cebios-filtres-panel {
  display: none;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 20px !important;
  border: 1px solid #A0A0A0;
  background: #FFFFFF;
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  margin-top: 8px;
  min-width: 290px !important;
  box-shadow: 0 8px 24px rgba(7,15,34,0.08);
}
.cebios-filtres-panel.open {
  display: flex !important;
}
.cebios-filtres-panel .e-filter-item {
  all: unset;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #070F22;
  padding: 7px 0px !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: left !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
}
.cebios-filtres-panel .e-filter-item[data-filter="__all"] {
  display: none !important;
}

/* Titres de groupe : couleur propre a chacun, reprise de la couleur commune
   de leurs sous-elements (couleur_sous_domaine), avec chevron depliant */
.cebios-filtre-groupe-titre {
  font-weight: 700 !important;
  font-family: 'Encode Sans Semi Condensed', sans-serif !important;
  font-size: 16px !important;
  margin-top: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 8px;
}
.cebios-filtre-groupe-titre::after {
  content: "\25BE";
  font-size: 11px;
  transition: transform 0.2s ease;
}
.cebios-filtre-groupe-titre.open::after {
  transform: rotate(180deg);
}
.cebios-filtres-panel .e-filter-item[data-filter="expertise"] {
  color: #6625F2 !important;
  margin-top: 0 !important;
}
.cebios-filtres-panel .e-filter-item[data-filter="metier"] {
  color: #7379b4 !important;
}
.cebios-filtres-panel .e-filter-item[data-filter="outil-digital"] {
  color: #1c1d4c !important;
}

/* Sous-groupes : replies par defaut, prennent la place seulement une fois ouverts */
.cebios-filtre-groupe-enfants {
  display: none;
  flex-direction: column;
  gap: 6px;
}
.cebios-filtre-groupe-enfants.open {
  display: flex;
}

/* Case a cocher : contour + coche, jamais remplie entierement */
.cebios-filtre-groupe-enfants .e-filter-item {
  padding-left: 30px !important;
  position: relative;
}
.cebios-filtre-groupe-enfants .e-filter-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 1.5px solid #CCCCCC;
  background: #FFFFFF;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}
.cebios-filtre-groupe-enfants .e-filter-item[aria-pressed="true"]::before {
  border-color: #6625F2;
}
.cebios-filtre-groupe-enfants .e-filter-item[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 5px;
  height: 9px;
  border-right: 2px solid #6625F2;
  border-bottom: 2px solid #6625F2;
  transform: translateY(-65%) rotate(45deg);
}


/* --- Actualites : boite de recherche (25 aout) --- */
.cebios-recherche-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #A0A0A0;
  padding: 0 18px;
  width: 350px;
  height: 40px;
  box-sizing: border-box;
  color: #070F22;
}
.cebios-recherche-input {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #070F22;
  flex: 1;
  min-width: 0;
  padding: 0;
  height: 100%;
}
.cebios-recherche-input::placeholder {
  color: #767676;
  opacity: 1;
}
.cebios-recherche-icon {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #070F22;
  flex-shrink: 0;
}


/* --- Actualites : Filtres + Recherche colles cote a cote (25 aout) --- */
.elementor-element-f945fb1,
.elementor-element-b31bb5b {
  flex: 0 0 auto !important;
  width: auto !important;
}

@media (min-width: 801px){
  .elementor-element-a6dce3e .elementor-loop-container {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 800px){
  .elementor-element-a6dce3e .elementor-loop-container {
    grid-template-columns: 1fr !important;
  }
  .elementor-element-a6dce3e .e-loop-item .cebios-carte-riche.cebios-carte-riche {
    flex-direction: column !important;
  }
  .elementor-element-a6dce3e .e-loop-item .elementor-element-d022070.elementor-element-d022070 {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .elementor-element-a6dce3e .e-loop-item .cebios-carte-riche-texte.cebios-carte-riche-texte {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 100% !important;
  }
}


/* ============================================================
   11. PAGES PRODUITS DIGITAUX (FAQ + Page Solutions digitales)
   ============================================================ */

/* --- FAQ Produits digitaux : accordeon question/reponse (anime en JS/GSAP, CSS = juste etat de repos) --- */
/* Etat de repos gere en JS (Snippet 59), juste la couleur ici, scopee aux grilles FAQ Produits digitaux connues */
.elementor-element-a30d5f5 .e-paragraph-base,
.elementor-element-afcd979 .e-paragraph-base,
.elementor-element-72de2de .e-paragraph-base,
.elementor-element-2168ab4 .e-paragraph-base,
.elementor-element-cbaeab1 .e-paragraph-base,
.elementor-element-7e885ac .e-paragraph-base {
  color: #FFFFFF;
}

/* Ancien systeme de cercle "5 couleurs" (480px) — semble inutilise sur le
   site depuis le passage au trait violet fin .cebios-ring-* ci-dessous.
   Garde tel quel en attendant confirmation avant suppression. */
.cebios-circle-wrap{
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 480px; height: 480px;
  z-index: 2; pointer-events: none;
}
.cebios-circle-svg{ width: 100%; height: 100%; display: block; }
.cebios-circle-track{ fill: none; stroke: #E3E3E7; stroke-width: 14px; }
.cebios-circle-seg{ fill: none; stroke-width: 14px; stroke-linecap: round; }


/* --- Page Solutions digitales : cercle central + 5 outils autour ---
   Grille CSS 5x5 sur .cebios-circle-stage : chaque outil a directement
   SA case, choisie proche du cercle — plus besoin de justify-self/
   align-self (sans effet visible, chaque widget remplit 100% de sa
   case en largeur quel que soit l'alignement demande). */

.cebios-circle-stage{
  position: relative;
  width: 600px !important;
  height: 600px !important;
  aspect-ratio: 1 / 1; /* 23 septembre : garde-fou en plus du !important, au cas
    ou une regle Elementor ne contraindrait qu'une seule des deux dimensions */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  place-items: center;
}

/* Le rond central (widget "Code HTML") : la classe de placement va sur le
   widget lui-meme (cebios-ring-item, ajoutee dans Elementor), pas sur la
   div a l'interieur de son code (cebios-ring-wrap), qui n'est pas un
   enfant direct de la grille. Occupe toute la grille, en fond, centre. */
.cebios-ring-item{
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  z-index: 1;
  pointer-events: none;
}

.cebios-ring-wrap{
  width: 340px;
  height: 340px;
}

.cebios-center-img{
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  width: 100px;
  z-index: 2;
  opacity: 0;
  filter: blur(14px);
}

.cebios-ring-svg{ width: 100%; height: 100%; display: block; }
.cebios-ring-seg{ fill: none; stroke: #6625F2; stroke-width: 1px; stroke-linecap: round; }

/* Les 5 outils : petit au repos, grossit (en douceur, avec un leger rebond) au survol */
.cebios-tool{
  z-index: 3;
  text-align: center;
}
.cebios-tool-logo{
  display: block;
  margin: 0 auto;
  transition: width .45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cebios-tool-audit        .cebios-tool-logo{ width: 65px; }
.cebios-tool-amelioration .cebios-tool-logo{ width: 75px; }
.cebios-tool-lms          .cebios-tool-logo{ width: 55px; }
.cebios-tool-olfactif     .cebios-tool-logo{ width: 65px; }
.cebios-tool-veille       .cebios-tool-logo{ width: 65px; }

.cebios-tool-audit:hover        .cebios-tool-logo{ width: 90px; }
.cebios-tool-amelioration:hover .cebios-tool-logo{ width: 105px; }
.cebios-tool-lms:hover          .cebios-tool-logo{ width: 75px; }
.cebios-tool-olfactif:hover     .cebios-tool-logo{ width: 90px; }
.cebios-tool-veille:hover       .cebios-tool-logo{ width: 90px; }

/* Le texte : caché, apparaît au survol de SON outil (pur CSS, pas de script) */
.cebios-tool-tagline{
  margin-top: 6px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .3s ease, transform .3s ease;
  font-size: 13px;
  white-space: nowrap;
}
.cebios-tool:hover .cebios-tool-tagline{
  opacity: 1;
  transform: translateY(0);
}

/* Placement dans la grille 5x5 : chaque outil a directement sa case,
   choisie proche du cercle (remplace le systeme top/left en % puis
   la grille 3x3 + justify-self, sans effet visible sur ces widgets).
   23 septembre : les cases elles-memes ne bougent pas (elles marchent
   bien), on rapproche juste chaque logo du centre avec un translate.
   D'abord une seule variable partagee (--cebios-tool-nudge), mais
   Veille/Audit (diagonale, deplacement sur 2 axes) et Olfactif/
   Amelioration/LMS (un seul axe) n'ont pas la meme distance
   parcourue pour un meme nombre de px -> passage a UNE variable par
   outil pour regler chacun independamment. Veille/Audit valides
   "parfait" par Vincent, on ne les retouche plus. */
:root{
  --cebios-nudge-veille: 90px;
  --cebios-nudge-audit: 90px;
  --cebios-nudge-olfactif: 183px;      /* 23 sept. : encore un peu plus */
  --cebios-nudge-amelioration: 183px;  /* idem */
  --cebios-nudge-lms: 13px;            /* 23 sept. : attention, LMS va dans le sens INVERSE des
    autres (moins de nudge = plus loin du cercle) ; 48px etait encore trop proche/en chevauchement */
}
.cebios-tool-veille        { grid-column: 2; grid-row: 1; transform: translate(var(--cebios-nudge-veille), var(--cebios-nudge-veille)); }
.cebios-tool-audit         { grid-column: 4; grid-row: 1; transform: translate(calc(-1 * var(--cebios-nudge-audit)), var(--cebios-nudge-audit)); }
.cebios-tool-olfactif      { grid-column: 1; grid-row: 3; transform: translate(var(--cebios-nudge-olfactif), 0); }
.cebios-tool-amelioration  { grid-column: 5; grid-row: 3; transform: translate(calc(-1 * var(--cebios-nudge-amelioration)), 0); }
.cebios-tool-lms           { grid-column: 3; grid-row: 5; transform: translate(0, calc(-1 * var(--cebios-nudge-lms))); }

@media (min-width: 1380px){
  :root{
    /* grille plus grande (720px) : Veille/Audit restent tels quels (valides par
       Vincent a cette taille d'ecran, cf. capture), les 3 autres suivent le
       meme ratio que precedemment (x1.2) */
    --cebios-nudge-veille: 108px;
    --cebios-nudge-audit: 108px;
    --cebios-nudge-olfactif: 220px;
    --cebios-nudge-amelioration: 220px;
    --cebios-nudge-lms: 15px;
  }
  .cebios-circle-stage{ width: 720px !important; height: 720px !important; }
  .cebios-ring-wrap{ width: 400px; height: 400px; }
  .cebios-center-img{ width: 220px; }

  .cebios-tool-audit        .cebios-tool-logo{ width: 90px; }
  .cebios-tool-amelioration .cebios-tool-logo{ width: 160px; }
  .cebios-tool-lms          .cebios-tool-logo{ width: 80px; }
  .cebios-tool-olfactif     .cebios-tool-logo{ width: 100px; }
  .cebios-tool-veille       .cebios-tool-logo{ width: 85px; }

  .cebios-tool-audit:hover        .cebios-tool-logo{ width: 105px; }
  .cebios-tool-amelioration:hover .cebios-tool-logo{ width: 180px; }
  .cebios-tool-lms:hover          .cebios-tool-logo{ width: 95px; }
  .cebios-tool-olfactif:hover     .cebios-tool-logo{ width: 115px; }
  .cebios-tool-veille:hover       .cebios-tool-logo{ width: 95px; }
}


/* ============================================================
   12. CLASSES D'ANIMATION RÉUTILISABLES (boutons, liens, images)
   ============================================================ */

/* --- Animation hover boutons btn-primary-1 / btn-secondary (26 aout) --- */
/* Classes reutilisables : a assigner (Avance > Classes CSS) sur nimporte
   quel bouton pour lui donner la meme animation au survol. */
.cebios-anim-primaire,
.cebios-anim-secondaire {
  transition: background-color 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  text-align: center;
}
.elementor-element-2083b3c,
.elementor-element-3e14c16 {
  width: 280px !important;
}
.cebios-anim-primaire:hover {
  background-color: #6625F2 !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(102, 37, 242, 0.28);
}
.cebios-anim-secondaire:hover {
  background-color: #070F22 !important;
  color: #FFFFFF !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(7, 15, 34, 0.18);
}


/* Lien "En savoir plus" Ingenierie (loop item 4518) - le flexbox est maintenant
   un vrai <a>, on annule le style de lien par defaut du theme (reset.css)
   pour que le texte/la fleche gardent leur couleur naturelle au repos. */
.cebios-lien-souligne, .cebios-lien-souligne:visited, .cebios-lien-souligne:hover {
  color: inherit !important;
  text-decoration: none !important;
}


/* --- Animation "lueur" bouton blanc (ex. Notre histoire, page CEBIOS) --- */
/* Volontairement DIFFERENTE du remplissage des boutons noirs : ici fond et texte
   ne changent jamais, seul un contour violet + une legere lueur apparaissent,
   avec un leger soulevement (meme langage de mouvement que les autres boutons). */
.cebios-anim-lueur {
  border: 2px solid transparent;
  transition: border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.cebios-anim-lueur:hover {
  border-color: #6625F2;
  box-shadow: 0 0 0 4px rgba(102, 37, 242, 0.12), 0 10px 24px rgba(102, 37, 242, 0.20);
  transform: translateY(-3px);
}


/* --- Zoom leger au survol des images (ex. grille des 5 domaines, page Audit) --- */
/* Classes reutilisables en paire : la carte (overflow:hidden + declenche le survol)
   + l'image a l'interieur (celle qui zoome). */
.cebios-image-zoom-card {
  overflow: hidden;
}
.cebios-image-zoom-img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transform: scale(1);
}
.cebios-image-zoom-card:hover .cebios-image-zoom-img {
  transform: scale(1.08);
}


.cebios-anim-violet{
  transition: background-color .5s cubic-bezier(0.22, 1, 0.36, 1),
              color .5s cubic-bezier(0.22, 1, 0.36, 1),
              transform .5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow .5s cubic-bezier(0.22, 1, 0.36, 1);
}
.cebios-anim-violet:hover{
  background-color: #FFFFFF !important;
  color: #070F22 !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(102, 37, 242, 0.25);
}
.outils-survol .cebios-outils-textes {
  display: grid;
}
.outils-survol .cebios-outils-textes > * {
  grid-column: 1;
  grid-row: 1;
}

/* texte affiché par défaut (aucun logo survolé) */
.outils-survol .texte-lms,
.outils-survol .texte-audit,
.outils-survol .texte-olfactif,
.outils-survol .texte-amelioration {
  visibility: hidden;
  opacity: 0;
}
.outils-survol .texte-veille {
  visibility: visible;
  opacity: 1;
}

/* au survol d'un logo, on bascule */
.outils-survol:has(.logo-lms:hover) .texte-lms,
.outils-survol:has(.logo-audit:hover) .texte-audit,
.outils-survol:has(.logo-veille:hover) .texte-veille,
.outils-survol:has(.logo-olfactif:hover) .texte-olfactif,
.outils-survol:has(.logo-amelioration:hover) .texte-amelioration {
  visibility: visible;
  opacity: 1;
}
.outils-survol:has(.logo-lms:hover) .texte-veille,
.outils-survol:has(.logo-audit:hover) .texte-veille,
.outils-survol:has(.logo-olfactif:hover) .texte-veille,
.outils-survol:has(.logo-amelioration:hover) .texte-veille {
  visibility: hidden;
  opacity: 0;
}/* End custom CSS */