/*
Theme Name: OneRH Child
Theme URI: https://www.oneportage.fr
Description: Thème enfant Hello Elementor pour le site OnePortage — intégration 3MA Group.
Author: 3MA Group
Author URI: https://www.3magroup.com
Template: hello-elementor
Version: 1.40.0
Text Domain: onerh-child
*/

/* ==========================================================================
   FEUILLE UNIQUE — fusion du 15/09/2026 (v1.40.0)

   Les feuilles de travail `style-inacio.css` et `style-bastien.css` sont
   reversées ici et supprimées : le chantier est terminé, et deux feuilles
   chargées après celle-ci ne servaient qu'à laisser deux intégrateurs avancer
   sans se marcher dessus.

   ⚠ L'ORDRE DES SECTIONS REPRODUIT L'ORDRE DE CHARGEMENT D'ORIGINE
   (style.css → style-inacio.css → style-bastien.css). À sélecteur et
   spécificité égaux, c'est la dernière règle du fichier qui gagne : déplacer un
   bloc d'une section à l'autre change le rendu. Ne pas réorganiser sans
   vérifier les sélecteurs concernés un par un.

     §1  Transverse       (ex-style.css)
     §2  Pages et widgets (ex-style-inacio.css)
     §3  Correctifs       (ex-style-bastien.css)

   Les règles sans aucune occurrence dans le site rendu ont été retirées —
   audit du 15/09/2026 sur les 22 pages publiées (aucun brouillon), le gabarit
   d'article et la liste des types de contenu publics (post, page, temoignage :
   ni cas_client, ni podcast, ni expert). Le détail est dans le message de
   commit.
   ========================================================================== */

/* ==========================================================================
   §1 — TRANSVERSE
   ========================================================================== */

/*
Source de vérité unique de la charte : le kit Elementor
(Réglages du site → Couleurs/Polices globales, seedé une fois par inc/elementor-kit-sync.php).
Les variables ci-dessous sont des alias des globales Elementor ;
les fallbacks reflètent la charte extraite des maquettes XD.
*/

:root {
  --onerh-primary: var(--e-global-color-primary, #46106a);
  --onerh-secondary: var(--e-global-color-secondary, #00aeb2);
  --onerh-text: var(--e-global-color-text, #1c0d40);
  --onerh-accent: var(--e-global-color-accent, #ffe495);
  --onerh-primary-light: var(--e-global-color-onerhviolet2, #5f168f);
  --onerh-primary-deep: var(--e-global-color-onerhvioletd, #46106a);
  --onerh-teal-light: var(--e-global-color-onerhteall, #7cd6d8);
  --onerh-text-muted: var(--e-global-color-onerhmuted, #707070);
  --onerh-bg-alt: var(--e-global-color-onerhbgalt, #f4f7fb);
  --onerh-bg: var(--e-global-color-onerhwhite, #ffffff);

  --onerh-font: var(--e-global-typography-text-font-family, "Inter Tight"), sans-serif;
}

body {
  font-family: var(--onerh-font);

  /* Menu burger : tant qu'il est fermé, le panneau déroulant d'Elementor est garé hors
     écran en `position: fixed` — il élargissait le document de 443 px en mobile, donc un
     scroll horizontal parasite sur l'accueil. Le clip doit porter sur `body` : un élément
     en `fixed` échappe à l'overflow de ses parents (mesuré : le poser sur le header ne
     changeait rien). `clip` plutôt que `hidden` — il ne crée pas de conteneur de
     défilement et laisse donc le panneau s'ouvrir normalement (vérifié au clic). */
  overflow-x: clip;
}

/* ==========================================================================
   Utilitaires — la SEULE famille de classes autorisée sur ce site.

   Règle de nommage : une classe décrit un EFFET, jamais une page ni une marque.
   `onerh-pme-link` ne servait qu'à une page, a survécu à sa refonte sans que
   personne ne le voie, et a même toléré une coquille (`onerhh-pme-link`)
   invisible — une classe fantôme ne lève aucune erreur. Ces quatre classes ont
   été supprimées le 13/08/2026 ; `.w-auto`, `.subgrid-rows`, `.link-underline`
   et `.band-bottom` les ont suivies le 15/09/2026, faute d'usage.

   Avant d'en ajouter une ici, vérifier dans l'ordre :
     1. le kit Elementor (couleur, typographie globale) ;
     2. les réglages du bloc (Style, Avancé — y compris positionnement,
        z-index, débordement, largeur, marges) ;
     3. seulement ensuite, un utilitaire générique ci-dessous.
   ========================================================================== */

/* Largeur ajustée au contenu (au lieu d'occuper toute la ligne). */
.fit-content {
  width: fit-content;
}

.no-padding {
  padding: 0 !important;
}

.icon-no-gap {
  line-height: 1;
}

/* ==========================================================================
   CSS de dernier recours.

   Tout le style du site vit désormais soit dans le kit Elementor (couleurs et
   typographies globales), soit dans les réglages des blocs eux-mêmes. Les
   pages et les gabarits ne portent plus aucune classe d'habillage.

   Ne subsistent ici que les cas qu'aucun réglage de widget ne peut atteindre :
   du HTML dynamique (corps d'article, termes de taxonomie) et des garde-fous
   globaux. Sélecteurs NATIFS Elementor uniquement, jamais de classe custom.

   Avant d'ajouter une règle ici, vérifier qu'elle ne peut pas être un réglage
   du kit ou du bloc — c'est presque toujours le cas.
   ========================================================================== */

/* ==========================================================================
   Dimensions fluides — principe appliqué dans tout ce fichier

   Les tailles s'adaptent à la largeur disponible plutôt que de basculer à des
   points de rupture arbitraires : moins de règles, et rien qui casse entre deux
   seuils.

   `clamp(min, souhaité, max)` : la valeur suit la largeur d'écran, sans jamais
   sortir des bornes.

   ⚠ DEUX RÈGLES À RESPECTER

   1. Pour du TEXTE, la borne minimale est en `rem`, jamais en `px`. Une taille en
      `vw` pur ne suit pas le zoom du navigateur : l'utilisateur qui agrandit ne
      voit rien changer — c'est un manquement d'accessibilité (WCAG 1.4.4). La
      borne `rem` garantit que le zoom fonctionne.

   2. Pour les HAUTEURS liées à l'écran, préférer `dvh` à `vh` sur mobile : `vh`
      ignore la barre d'adresse qui se rétracte, ce qui décale le contenu au
      défilement. `dvh` suit la hauteur réellement visible.

   Ce qui reste en pixels, à dessein : bordures, rayons, ombres et petits
   espacements — les rendre fluides n'apporte rien et nuit à la netteté.
   ========================================================================== */

/* Corps d'article (articles migrés) : colonne de lecture + les deux styles de
   titre de la charte (H2 section teal thin / H3 courant).

   `min()` plutôt qu'une largeur fixe : la colonne ne dépasse jamais 760 px sur
   grand écran, et se réduit d'elle-même sur petit écran sans point de rupture. */
.elementor-widget-theme-post-content {
  max-width: min(760px, 100%);
  margin-inline: auto;
}

.elementor-widget-theme-post-content h2 {
  color: var(--e-global-color-secondary, #00aeb2);
  font-weight: 300;
  font-size: clamp(1.5rem, 4vw, 2.75rem);
  line-height: 1.15;
  margin: clamp(2rem, 5vw, 3rem) 0 1.25rem;
}

.elementor-widget-theme-post-content h3 {
  margin: 32px 0 12px;
}

.elementor-widget-theme-post-content img {
  border-radius: 16px;
  height: auto;
}

/* Liens de contenu : le kit fixe déjà la couleur des liens, mais le corps
   dynamique échappe à ses sélecteurs — et Hello Elementor y impose son rose
   #CC3366. */
.elementor-widget-theme-post-content a {
  color: var(--e-global-color-secondary, #00aeb2);
  text-decoration: none;
}

.elementor-widget-theme-post-content a:hover {
  text-decoration: underline;
}

/* Boutons hérités de l'ancien site : les articles migrés contiennent des blocs
   Gutenberg dont le style est écrit dans le HTML importé. Ils s'affichaient en gris
   ardoise (#32373C, la valeur par défaut de WordPress) au milieu du contenu. Ces
   boutons ne sont atteignables par aucun réglage de widget — le corps de l'article
   est rendu dynamiquement. */
.elementor-widget-theme-post-content .wp-block-button__link,
.elementor-widget-theme-post-content .wp-element-button {
  background-color: var(--e-global-color-secondary, #00aeb2);
  color: var(--e-global-color-primary, #1c0d40);
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}

.elementor-widget-theme-post-content .wp-block-button__link:hover,
.elementor-widget-theme-post-content .wp-element-button:hover {
  background-color: var(--e-global-color-accent, #ffe495);
  text-decoration: none;
}

/* Illustrations vectorielles sans dimensions dans le HTML importé : sans contrainte,
   elles s'étirent à toute la largeur de la colonne (mesuré : une icône à 1120 px). */
.elementor-widget-theme-post-content svg:not([width]):not([height]) {
  max-width: 96px;
  height: auto;
}

/* Largeurs figées héritées de l'ancien site : empêchent l'image de se réduire sur
   mobile et provoquent un débordement horizontal. */
.elementor-widget-theme-post-content img[width],
.elementor-widget-theme-post-content figure {
  max-width: 100%;
}

/* ==========================================================================
   Habillage de widgets, mutualisé.

   Ces règles étaient recopiées à l'identique dans le champ « CSS personnalisé »
   de chaque widget — jusqu'à huit fois pour la même déclaration. Ce CSS vivait
   en base de données, invisible depuis le dépôt : impossible à relire, à
   comparer ou à corriger en une fois.

   Elles ciblent des classes générées par Elementor, donc s'appliquent partout
   où le widget est utilisé, sans classe de projet ni réglage à recopier.

   ⚠ AVANT DE MUTUALISER, VÉRIFIER LA PORTÉE. Un sélecteur `.elementor-widget-*`
   touche TOUS les widgets de ce type, y compris ceux qu'on n'a pas mesurés. Ici,
   les grilles d'articles et les encadrés à icône ont partout le même habillage
   attendu. Les onglets, non : le site en a deux styles incompatibles, d'où la
   classe dédiée plus bas.

   La question à se poser : « ce widget a-t-il le même rendu attendu PARTOUT ? »
   Si non, une classe d'effet vaut mieux qu'un sélecteur global.
   ========================================================================== */

/* Grilles d'articles (blocs « Pour aller plus loin ») : cartes surélevées.

   La grille se réorganise seule : autant de colonnes que la largeur en permet,
   chacune d'au moins 17 rem. Trois colonnes sur grand écran, deux sur tablette,
   une sur mobile — sans écrire un seul point de rupture. */
.elementor-widget-posts .elementor-posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.elementor-widget-posts article {
  background: var(--e-global-color-onerhwhite, #fff);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(28, 13, 64, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.elementor-widget-posts article:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(28, 13, 64, 0.14);
}

.elementor-widget-posts .elementor-post__thumbnail {
  aspect-ratio: 16 / 10;
}

.elementor-widget-posts .elementor-post__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.elementor-widget-posts .elementor-post__text {
  padding: clamp(1rem, 2.5vw, 1.375rem) clamp(1.125rem, 2.5vw, 1.5rem)
    clamp(1.25rem, 3vw, 1.75rem);
}

.elementor-widget-posts .elementor-post__meta-data {
  font-size: 0.875rem;
  color: var(--e-global-color-onerhmuted, #707070);
  margin-bottom: 8px;
}

.elementor-widget-posts .elementor-post__title {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 10px;
}

.elementor-widget-posts .elementor-post__title a {
  color: var(--e-global-color-primary, #1c0d40);
}

.elementor-widget-posts .elementor-post__excerpt p {
  font-size: 16px;
  color: var(--e-global-color-text, #1e1e1e);
  line-height: 1.5;
}

/* Encadrés à icône (blocs « Pourquoi nous choisir », méthodologie). */
.elementor-widget-icon-box .elementor-icon-box-wrapper {
  text-align: left;
}

.elementor-widget-icon-box .elementor-icon-box-icon {
  margin-bottom: 14px;
}

.elementor-widget-icon-box .elementor-icon-box-title {
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
}

.elementor-widget-icon-box .elementor-icon-box-description {
  font-size: clamp(0.9375rem, 1.1vw, 1rem);
  line-height: 1.55;
}

/* Onglets en soulignement (blocs « Nos offres » du carrefour et des pages service).

   La classe `tabs-underline` est posée sur chaque widget d'onglets — elle décrit un
   EFFET, réutilisable sur n'importe quel projet, et ne porte ni marque ni nom de page.
   Une classe plutôt qu'un sélecteur global : le style reste explicite sur chaque bloc,
   et un futur bloc d'onglets pourra adopter un autre traitement sans conflit. */

/* Valeurs relevées dans le fichier source de la maquette, pas estimées sur une capture
   (le zoom d'un export PNG fausse toute mesure).

     élément      maquette (artboard 1920)   → site (contenu 1140)
     titre        74 px Thin                   44 px
     onglets      32 px Light                  19 px
     écart        ~74 px                       ~44 px

   Le facteur d'échelle est 1140 / 1920 = 0,594. Contrôle de cohérence : le titre à
   74 px donne 44 px, exactement la valeur déjà en place — l'extraction est fiable.

   Le widget expose ces réglages nativement, mais les poser ici garde la maquette et
   sa transcription au même endroit, lisibles ensemble. Le ciblage passe par la classe
   d'effet : aucun autre bloc d'onglets n'est touché. */
.tabs-underline {
  --n-tabs-title-font-size: clamp(1rem, 1.35vw, 1.1875rem);
  --n-tabs-title-gap: clamp(1.5rem, 3vw, 2.75rem);
  /* Le widget colore ses onglets et leurs fonds par variables. Sans ces valeurs, il
     retombe sur ses défauts — fond jaune au survol, texte blanc sur fond clair. */
  --n-tabs-title-color: var(--e-global-color-primary, #1c0d40);
  --n-tabs-title-color-active: var(--e-global-color-secondary, #00aeb2);
  --n-tabs-title-color-hover: var(--e-global-color-secondary, #00aeb2);
  --n-tabs-title-background-color: transparent;
  --n-tabs-title-background-color-active: transparent;
  --n-tabs-title-background-color-hover: transparent;
  --n-tabs-title-padding-block-start: 0px;
  --n-tabs-title-padding-block-end: 0px;
  --n-tabs-title-padding-inline-start: 0px;
  --n-tabs-title-padding-inline-end: 0px;
  --n-tabs-title-border-radius: 0px;
}

.tabs-underline .e-n-tab-title,
.tabs-underline .e-n-tab-title-text {
  font-weight: 300;
}

.tabs-underline .e-n-tabs-heading {
  border-bottom: 0;
}

/* UN SEUL soulignement. Deux mécanismes coexistaient — une bordure basse et le trait
   animé ci-dessous — d'où un double trait sous chaque onglet, de deux couleurs. La
   bordure est retirée : le trait animé est plus proche de la maquette. */
.tabs-underline .e-n-tab-title {
  border: 0;
}

.tabs-underline .e-n-tabs-content {
  padding-top: 0;
}

/* Trait qui se déploie sous l'onglet au changement de sélection. */
.tabs-underline .e-n-tab-title::before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--e-global-color-secondary, #00aeb2);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.tabs-underline .e-n-tab-title[aria-selected="true"]::before {
  width: 100%;
}

/* Variante « tabs-underline-compact » : onglets alignés à gauche, plus étroits et en
   gras, sur un widget qui porte les deux classes (tabs-underline tabs-underline-compact).
   Même spécificité que les règles .tabs-underline correspondantes (0,2,0) : ces
   déclarations doivent rester APRÈS elles dans le fichier pour gagner par ordre de
   source. Ne pas déplacer plus haut. */
.tabs-underline-compact .e-n-tab-title {
  justify-content: start;
  width: 12rem;
}

.tabs-underline-compact .e-n-tab-title::before {
  background-color: var(--e-global-color-primary, #46106a);
  bottom: -4px;
}

.tabs-underline-compact .e-n-tabs-heading {
  flex-shrink: 1;
  gap: 1.5rem;
}

.tabs-underline-compact .e-n-tab-title-text {
  font-weight: 600;
}

/* Liens dans un bloc de texte : ils héritent de la couleur du paragraphe et ne se
   soulignent qu'au survol. Elementor ne propose aucun réglage pour les liens inline
   d'un éditeur de texte — c'est du HTML libre, hors de portée des contrôles. */
.elementor-widget-text-editor a {
  color: inherit;
  text-decoration: none;
}

.elementor-widget-text-editor a:hover {
  color: var(--e-global-color-secondary, #00aeb2);
}

/* ==========================================================================
   Navigation d'en-tête (.orh-header-nav).

   Blocs numérotés. Pas de commentaire à l'intérieur des blocs — les
   commentaires CSS ne s'imbriquent pas.

   Bureau à partir de 1025 px, tiroir burger jusqu'à 1024 px.
   menu-item-53 = Nos offres, identifiant WordPress écrit en dur.
   ========================================================================== */

/* 1 — Couleur du burger, classe à poser sur le widget */

.orh-burger-blanc {
  --orh-burger: var(--onerh-bg, #ffffff);
}
.orh-burger-violet {
  --orh-burger: var(--onerh-primary, #1c0d40);
}



/* 2 — Entrées de premier niveau */

.orh-header-nav .elementor-nav-menu > li > a.elementor-item {
  padding: 8px 0;
  margin: 0 14px;
  font-weight: 600 !important;
  font-size: 1.25rem !important;
  text-decoration: none;
  position: relative;
  align-self: center;
}



/* 3 — BUREAU : positionnement et hauteurs.
   Toutes les entrées en static : leurs panneaux se calent donc sur le container de
   l en-tête, jamais sur l entrée. Meme reference pour les quatre, donc meme hauteur
   d ouverture sans aucune compensation.
   Le tampon de 64 px ne sert plus qu au confort de survol, plus au positionnement :
   il comble le trou laissé sous le libellé par le padding du container. Voir plus bas. */
@media (min-width: 1025px) {
  .orh-header-nav .sub-arrow {
    display: none !important;
  }
  .orh-header-nav,
  .orh-header-nav .elementor-nav-menu {
    position: static !important;
  }
  .orh-header-nav {
    align-self: stretch;
  }
  .orh-header-nav .elementor-nav-menu--main,
  .orh-header-nav .elementor-nav-menu {
    height: 100%;
    align-items: stretch;
  }
  .orh-header-nav .elementor-nav-menu > li.menu-item-has-children {
    --orh-hover-bridge: 64px;
    position: static;
    display: flex;
  }

  /* PONT DE SURVOL — sans lui, le panneau se referme entre le libellé et son contenu.

     Le panneau s ouvre en `top: 100%` de l ancetre positionné (le container Elementor
     de l en-tête), pas du li : le padding bas de ce container laisse un trou entre le
     bas du libellé et le haut du panneau. La souris le traverse, perd le survol du li,
     et le panneau disparait. Ce pont invisible comble ce trou.

     Il est ancré sur le LIEN, pas sur le panneau : sa largeur reste donc celle du
     libellé (± 14 px, la moitié du `margin: 0 14px` du lien, donc aucun empiètement
     sur l entrée voisine). Ne JAMAIS le poser sur le panneau : celui de Nos offres est
     pleine largeur avec `z-index: 999`, un pont à ses dimensions couvrirait toute la
     ligne de l en-tête — logo, autres entrées, CTA — et bloquerait le curseur.
     C est le défaut corrigé le 15/09/2026 : ne pas le réintroduire.

     `::before` et pas `::after` : `::after` porte le trait teal, section 7.
     Il n existe qu au survol, donc aucune zone morte ne traine sous l en-tête au repos,
     et pas de `pointer-events: none` — c est justement la souris qu il doit capter. */
  .orh-header-nav .elementor-nav-menu > li.menu-item-has-children:hover > a.elementor-item::before,
  .orh-header-nav .elementor-nav-menu > li.menu-item-has-children:focus-within > a.elementor-item::before {
    content: "";
    position: absolute;
    top: 100%;
    left: -14px;
    right: -14px;
    height: var(--orh-hover-bridge);
  }
}

/* 4 — BUREAU : panneau Nos offres, pleine largeur */
@media (min-width: 1025px) {
  .orh-header-nav .elementor-nav-menu > li.menu-item-53 > ul.sub-menu {
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    width: auto !important;
    background: #f4f7fb !important;
    border-radius: 0 !important;
    box-shadow: 0 14px 26px rgba(28, 13, 64, 0.06) !important;
    border: 0;
    z-index: 999 !important;
    padding: 50px 60px 56px !important;
  }
  .orh-header-nav .elementor-nav-menu > li.menu-item-53:hover > ul.sub-menu,
  .orh-header-nav .elementor-nav-menu > li.menu-item-53:focus-within > ul.sub-menu {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 30px 40px;
  }
  .orh-header-nav .elementor-nav-menu > li.menu-item-53 > ul.sub-menu > li {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* 5 — BUREAU : panneaux des trois autres entrées, fond débordant en 200vw.

   `--orh-panel-x` est posée par assets/onerh-nav.js : c'est la position horizontale de
   l'entrée, que le CSS ne peut pas connaître puisque le panneau se cale sur le container
   et non sur l'entrée. Le panneau s'ouvre donc sous son propre libellé.

   La valeur de repli aligne sur la grille du site — (100% - 1140px) / 2 est la marge
   gauche du contenu, `max()` évitant un négatif sous 1180 px. C'est ce qui s'applique si
   le script ne se charge pas : le menu reste utilisable, seulement moins précis. */
@media (min-width: 1025px) {
  .orh-header-nav .elementor-nav-menu > li.menu-item-has-children:not(.menu-item-53) > ul.sub-menu {
    left: var(--orh-panel-x, max(20px, calc((100% - 1140px) / 2))) !important;
    right: auto !important;
    top: 100% !important;
    width: 394px !important;
    min-width: 0 !important;
    margin: 0;
    padding: 50px 0 56px !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 0;
    z-index: 999 !important;
  }
  .orh-header-nav .elementor-nav-menu > li.menu-item-has-children:not(.menu-item-53):hover > ul.sub-menu,
  .orh-header-nav .elementor-nav-menu > li.menu-item-has-children:not(.menu-item-53):focus-within > ul.sub-menu {
    display: block !important;
  }
  .orh-header-nav .elementor-nav-menu > li.menu-item-has-children:not(.menu-item-53) > ul.sub-menu::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 200vw;
    transform: translateX(-50%);
    background: #f4f7fb;
    z-index: -1;
    box-shadow: 0 14px 26px rgba(28, 13, 64, 0.06);
  }
  .orh-header-nav .elementor-nav-menu > li.menu-item-has-children:not(.menu-item-53) > ul.sub-menu > li {
    display: block;
    background: transparent !important;
  }
}

/* 5b — BUREAU : ouverture en fondu-glissé des panneaux.

   `display` ne s anime pas : c est ce qui rendait l apparition seche. `allow-discrete`
   la fait participer a la transition, le temps que l opacite et le glissement se jouent.
   `@starting-style` donne l etat de depart a l ouverture — sans lui le panneau
   apparaitrait deja opaque, et seule la fermeture serait animee.

   Les navigateurs qui ne connaissent pas ces regles ignorent le bloc et gardent
   l apparition instantanee : aucune degradation autre que l absence d animation. */
@media (min-width: 1025px) {
  .orh-header-nav .elementor-nav-menu > li.menu-item-has-children > ul.sub-menu {
    opacity: 0;
    transform: translateY(-14px);
    transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
      display 0.42s allow-discrete;
  }

  .orh-header-nav .elementor-nav-menu > li.menu-item-has-children:hover > ul.sub-menu,
  .orh-header-nav .elementor-nav-menu > li.menu-item-has-children:focus-within > ul.sub-menu {
    opacity: 1;
    transform: translateY(0);
  }

  @starting-style {
    .orh-header-nav .elementor-nav-menu > li.menu-item-has-children:hover > ul.sub-menu,
    .orh-header-nav .elementor-nav-menu > li.menu-item-has-children:focus-within > ul.sub-menu {
      opacity: 0;
      transform: translateY(-14px);
    }
  }

  /* Le troisieme niveau du megamenu est deja deplie dans sa colonne : il ne doit ni
     glisser ni s estomper avec le panneau qui le contient. */
  .orh-header-nav li.menu-item-53:hover > ul.sub-menu > li > ul.sub-menu,
  .orh-header-nav li.menu-item-53:focus-within > ul.sub-menu > li > ul.sub-menu {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
}

/* 6 — BUREAU : typographie des sous-menus */
@media (min-width: 1025px) {
  .orh-header-nav .elementor-nav-menu > li > ul.sub-menu > li:not(.menu-item-has-children) > a {
    color: #1c0d40 !important;
    background: transparent !important;
    font-size: 1.125rem !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    padding: 10px 0 !important;
    text-decoration: none;
  }
  .orh-header-nav .elementor-nav-menu > li > ul.sub-menu > li:not(.menu-item-has-children) > a:hover {
    color: #00aeb2 !important;
  }
  .orh-header-nav li.menu-item-53 > ul.sub-menu > li.menu-item-has-children > a {
    display: block !important;
    font-weight: 300 !important;
    font-size: clamp(1.5rem, 1.7vw, 1.75rem) !important;
    line-height: 1.21 !important;
    color: #46106a !important;
    padding: 0 0 26px !important;
    white-space: normal !important;
    cursor: default;
    text-decoration: none;
  }
  .orh-header-nav li.menu-item-53:hover > ul.sub-menu > li > ul.sub-menu {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-width: 0;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    margin: 0;
  }
  .orh-header-nav li.menu-item-53 ul.sub-menu ul.sub-menu li a {
    font-size: 1.125rem !important;
    font-weight: 400 !important;
    color: #1c0d40 !important;
    padding: 7px 0 !important;
    text-decoration: none;
  }
  .orh-header-nav li.menu-item-53 ul.sub-menu ul.sub-menu li a:hover {
    color: #00aeb2 !important;
  }
}


/* 7 — BUREAU : trait teal au survol */
@media (min-width: 1025px) {
  .orh-header-nav .elementor-nav-menu > li > a.elementor-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: #00aeb2;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.18s ease;
  }
  .orh-header-nav .elementor-nav-menu > li:hover > a.elementor-item::after {
    transform: scaleX(1);
  }
}


/* 8 — MOBILE : burger et voile sombre */
@media (max-width: 1024px) {
  .orh-header-nav {
    flex: 0 0 auto !important;
    width: auto !important;
    display: flex !important;
    justify-content: flex-end !important;
  }
  .orh-header-nav .elementor-menu-toggle {
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    padding: 6px !important;
    color: var(--orh-burger, #fff) !important;
    position: relative;
    z-index: 1002;
  }
  .orh-header-nav .elementor-menu-toggle svg,
  .orh-header-nav .elementor-menu-toggle i {
    width: 30px !important;
    height: 30px !important;
    font-size: 30px !important;
    fill: currentColor !important;
  }
  .orh-header-nav .elementor-menu-toggle.elementor-active {
    color: #1c0d40 !important;
    position: fixed !important;
    top: 22px !important;
    right: 14px !important;
    z-index: 1003 !important;
  }
  .orh-header-nav .elementor-menu-toggle.elementor-active svg {
    fill: #1c0d40 !important;
  }
  .orh-header-nav::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(28, 13, 64, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 1000;
    pointer-events: none;
  }
  .orh-header-nav:has(.elementor-menu-toggle[aria-expanded="true"])::after {
    opacity: 1;
    visibility: visible;
  }
}


/* 9 — MOBILE : tiroir latéral et blocage du défilement */
@media (max-width: 1024px) {
  .orh-header-nav .elementor-nav-menu__container {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    height: 100dvh !important;
    width: 85% !important;
    max-width: 380px !important;
    margin: 0 !important;
    background: #fff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: translateX(100%) !important;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.32s ease;
    z-index: 1001;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 96px 0 32px;
    max-height: none !important;
  }
  /* L ombre n existe qu a l etat OUVERT. Sur la regle de base elle restait visible
     alors que le tiroir est hors champ : son decalage de -16 px et son flou de 40 px
     debordent vers la gauche, et aucun ancetre ne les rogne. Resultat, un dégradé
     grisatre permanent le long du bord droit de la page. */
  .orh-header-nav .elementor-menu-toggle[aria-expanded="true"] ~ .elementor-nav-menu__container {
    transform: translateX(0) !important;
    box-shadow: -16px 0 40px rgba(28, 13, 64, 0.18) !important;
  }
  html:has(.orh-header-nav .elementor-menu-toggle[aria-expanded="true"]) {
    overflow: hidden;
  }
  .orh-header-nav .elementor-nav-menu > li.menu-item-has-children {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}


/* 10 — MOBILE : contenu du tiroir */
@media (max-width: 1024px) {
  .orh-header-nav .elementor-nav-menu__container .elementor-item,
  .orh-header-nav .elementor-nav-menu__container .elementor-sub-item {
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: #1c0d40 !important;
    padding: 15px 28px !important;
    margin: 0 !important;
  }
  .orh-header-nav .elementor-nav-menu__container > .elementor-nav-menu > .menu-item {
    border-bottom: 1px solid #eef1f6;
  }
  .orh-header-nav .elementor-nav-menu__container .sub-menu {
    background: #f4f7fb !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
  }
  .orh-header-nav .elementor-nav-menu__container .sub-menu li {
    width: 100% !important;
    margin: 0 !important;
    background: transparent !important;
  }
  .orh-header-nav .elementor-nav-menu__container .sub-menu .elementor-sub-item {
    font-size: 0.9375rem !important;
    font-weight: 400 !important;
    padding: 12px 34px !important;
    background: transparent !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  .orh-header-nav .elementor-nav-menu__container .sub-menu .sub-menu .elementor-sub-item {
    padding-left: 48px !important;
    font-size: 0.875rem !important;
  }
  .orh-header-nav .elementor-nav-menu__container .sub-menu > li.menu-item-has-children > a.elementor-sub-item {
    color: #46106a !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
  }
  .orh-header-nav .elementor-nav-menu__container .sub-menu > li.menu-item-has-children > a.elementor-sub-item br {
    display: none !important;
  }
  .orh-header-nav .elementor-nav-menu__container .menu-item {
    position: relative;
  }
}


/* 11 — MOBILE : chevrons d'ouverture */
@media (max-width: 1024px) {
  .orh-header-nav .elementor-nav-menu__container .sub-arrow {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;
  }
  .orh-header-nav .elementor-nav-menu__container .sub-arrow i,
  .orh-header-nav .elementor-nav-menu__container .sub-arrow svg {
    color: #46106a !important;
    fill: #46106a !important;
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
    transition: transform 0.2s ease;
  }
  .orh-header-nav .elementor-nav-menu__container a.highlighted .sub-arrow i,
  .orh-header-nav .elementor-nav-menu__container a.highlighted .sub-arrow svg,
  .orh-header-nav .elementor-nav-menu__container a[aria-expanded="true"] .sub-arrow i,
  .orh-header-nav .elementor-nav-menu__container a[aria-expanded="true"] .sub-arrow svg {
    transform: rotate(180deg);
  }
  .orh-header-nav .elementor-nav-menu__container .sub-menu .sub-arrow {
    width: 36px !important;
  }
  .orh-header-nav .elementor-nav-menu__container .sub-menu .sub-arrow i,
  .orh-header-nav .elementor-nav-menu__container .sub-menu .sub-arrow svg {
    font-size: 11px !important;
    width: 11px !important;
    height: 11px !important;
    opacity: 0.7;
  }
}

/* Le bloc 12 — appels à l'action `menu-cta` dans le tiroir — a été retiré le
   15/09/2026 : aucune entrée du menu ne porte ces classes sur les 22 pages du
   site. Pour le rétablir, reprendre la v1.39.0 dans l'historique Git. */


/* Responsive mobile : les valeurs responsive de padding et de largeur des
   containers ne sont pas reprises par le push REST — ce garde-fou évite un
   contenu collé aux bords et des colonnes restées côte à côte sur petit écran. */
@media (max-width: 767px) {
  [data-elementor-type="wp-page"] .e-con.e-parent {
    padding-left: 18px;
    padding-right: 18px;
  }

  [data-elementor-type="archive"] .e-con.e-parent {
    padding-left: 18px;
    padding-right: 18px;
  }

  [data-elementor-type="wp-page"] .e-con.e-flex {
    flex-wrap: wrap;
  }

  [data-elementor-type="wp-page"] .e-con.e-flex > .e-con {
    width: 100%;
    flex-basis: auto;
  }
}

/* Footer : survols (liens et icônes sociales). */
.elementor-location-footer a:hover {
  color: var(--e-global-color-secondary, #00aeb2);
}

.elementor-location-footer .elementor-social-icon {
  transition: color 0.2s;
}

.elementor-location-footer .elementor-social-icon:hover i {
  color: var(--e-global-color-secondary, #00aeb2);
}

@media (max-width: 767px) {
  .elementor-location-footer .elementor-heading-title {
    margin-top: 8px;
  }
}

/* ==========================================================================
   Page « Portage salarial » — étapes (box .port-sal-step-dark / -light)
   ==========================================================================
   Sur desktop, les couleurs des étapes viennent d'Elementor. En tablette et
   mobile (<= 1024px), les box sont inversées : fond coloré pour la variante
   « dark », fond clair pour la variante « light ».
   `!important` est nécessaire : Elementor pose ses couleurs en styles inline
   ou via des sélecteurs `.elementor-element-<id>` plus spécifiques.
   Les descendants sont ciblés (`*`) car le texte est rendu à l'intérieur des
   widgets (`.elementor-heading-title`, `p`, etc.). */

@media (max-width: 1024px) {
  /* Reset du dégradé */
  .port-sal-step-container {
    background: none !important;
  }

  .port-sal-step-title p {
    margin-block-end: 0 !important;
  }

  .port-sal-step-title {
    color: var(--e-global-color-primary, #46106a) !important;
  }

  .port-sal-step-content,
  .port-sal-step-content * {
    color: var(--e-global-color-text, #1c0d40) !important;
  }
}

@media (max-width: 767px) {
  .port-sal-step-number {
    width: calc(20% - (1rem / 2)) !important;
  }
  .port-sal-step-content-container {
    width: calc(80% - (1rem / 2)) !important;
  }

  .port-sal-calc-container,
  .port-sal-ex-container {
    width: calc(50% - 0.75rem) !important;
  }

  .port-sal-calc-container {
    margin-top: calc(2.25rem + 1rem);
  }

  .port-sal-calc-container .port-sal-calc-ope {
    width: 2.5rem !important;
  }
}

/* ==========================================================================
   SOMMAIRE (page Portage salarial et articles)
   ========================================================================== */

/* Ancrage du trait et des voiles.
   Ils sont portés par .oneport-sommaire et NON par le <ul> : un élément en `position: absolute`
   dont le bloc conteneur est un conteneur de défilement défile avec le contenu. Posé sur
   le <ul>, chaque voile partirait avec les liens au premier geste. .oneport-sommaire ne défile
   pas, c'est le seul point d'ancrage correct.
   ⚠ Ne jamais mettre `position: relative` sur `.oneport-sommaire ul` : ça déplacerait le bloc
   conteneur sur le scroller et ramènerait exactement ce défaut.

   La transition est déclarée ici et non sur ::after : c'est .oneport-sommaire qui change de
   valeur au gré des classes du <ul>, le pseudo-élément ne fait que la lire. */
.oneport-sommaire {
  position: relative;
  --sommaire-voile-gauche: 0;
  --sommaire-voile-droit: 0;
  transition: --sommaire-voile-gauche 200ms linear, --sommaire-voile-droit 200ms linear;
}

/* Barre de défilement horizontale, sans barre visible (IE/Edge, Firefox, WebKit). */
.oneport-sommaire ul {
  padding: 0;
  list-style: none;
  display: flex;
  gap: 2rem;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.oneport-sommaire ul::-webkit-scrollbar {
  display: none;
}

/* Arrivée des ancres du sommaire sous le header collant.
   Le header est en `position: sticky` : il recouvre le haut de la fenêtre. Une ancre
   amenée pile en haut arrive donc dessous, et son titre reste masqué.

   `scroll-margin-top` ne déplace rien à l'écran : il indique au navigateur de s'arrêter
   d'autant plus haut quand il défile VERS cet élément.

   Portée : le CSS ne sait pas quel lien a provoqué le défilement, il ne peut cibler que
   la DESTINATION. `:target` désigne l'élément visé par l'ancre courante (#…), et
   `body:has(.oneport-sommaire)` limite la règle aux pages qui portent effectivement un sommaire
   — pas de numéro de page en dur, la règle s'active là où le composant existe.

   À régler sur la hauteur du header en état RÉDUIT (`header.is-sticky`) : quand le
   défilement se termine, la page a forcément bougé, le header est donc déjà rétracté.
   Pour mesurer : défiler un peu, inspecter le <header>, relever sa hauteur. */
body:has(.oneport-sommaire) :target {
  scroll-margin-top: 7rem;
}

/* `inset` plutôt que width/height à 100 % : sans `left`/`bottom` explicites, un pseudo
   absolu se place à sa position statique, qui dans un conteneur flex n'est pas prévisible. */
.oneport-sommaire::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--onerh-bg-alt);
  pointer-events: none;
}

/* Voiles de bord : un dégradé blanc à un bord signale qu'il reste des entrées hors
   écran de ce côté. L'opacité de chaque bord est pilotée par assets/oneport-sommaire.js,
   qui pose .has-fade-left / .has-fade-right sur le <ul>.

   Les classes restent sur le <ul> — c'est lui qui défile, c'est lui que le script
   mesure — et `:has()` les remonte jusqu'à .oneport-sommaire, qui porte les variables.

   Défaut à 0 — aucun voile : sans le script, mieux vaut un sommaire nu qu'un dégradé
   qui laisse croire à du contenu caché là où il n'y en a pas. Un voile absent ne
   trompe personne ; un voile de trop invite à scroller dans le vide.

   @property rend les deux variables animables (une variable non typée est du texte,
   qui ne s'interpole pas). Sans prise en charge, le voile apparaît d'un coup — correct. */
@property --sommaire-voile-gauche {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --sommaire-voile-droit {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.oneport-sommaire:has(ul.has-fade-left) {
  --sommaire-voile-gauche: 1;
}
.oneport-sommaire:has(ul.has-fade-right) {
  --sommaire-voile-droit: 1;
}

/* Cliqué-glissé (assets/oneport-sommaire.js). La main ouverte n'apparaît que s'il y a
   réellement de quoi défiler — un curseur qui promet un geste inopérant désoriente.
   Le test s'appuie sur l'état déjà posé par le script : au moins un voile allumé
   signifie qu'il y a du contenu hors écran, donc un glissé utile. */
.oneport-sommaire ul:is(.has-fade-left, .has-fade-right) {
  cursor: grab;
}
/* Pendant le glissé : main fermée, et sélection de texte coupée — sans ça le geste
   surligne les libellés au lieu de faire défiler la liste.
   Le curseur est réimposé aux descendants : les <a> portent `cursor: pointer` de la
   feuille du navigateur, qui l'emporterait sur celui du conteneur. Hors glissé on ne
   le fait pas — sur un lien, la main qui pointe est la bonne indication. */
.oneport-sommaire ul.is-dragging,
.oneport-sommaire ul.is-dragging * {
  cursor: grabbing;
}
.oneport-sommaire ul.is-dragging {
  user-select: none;
  /* Le défilement est piloté à la main pendant le glissé : un `scroll-behavior: smooth`
     hérité d'Elementor amortirait chaque déplacement et rendrait le geste flottant. */
  scroll-behavior: auto;
}

.oneport-sommaire::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, var(--sommaire-voile-gauche)) 0%,
    rgba(255, 255, 255, 0) 10%,
    rgba(255, 255, 255, 0) 90%,
    rgba(255, 255, 255, var(--sommaire-voile-droit)) 100%);
  pointer-events: none;
}

.oneport-sommaire ul li {
  width: fit-content;
  text-wrap: nowrap;
  position: relative;
}
.oneport-sommaire ul li a {
  display: inline-block;
  padding-bottom: 0.75rem;
}
/* Trait teal sous l'entrée survolée, par-dessus le rail gris de `::before`.

   Ces deux règles étaient écrites en `color-mix()` sans espace de couleur
   (`color-mix(transparent 100%, …)` au lieu de `color-mix(in srgb, transparent 100%, …)`).
   La syntaxe étant invalide, le navigateur ignorait les deux déclarations et le trait
   n'apparaissait jamais — ni au repos, ni au survol. Corrigé le 15/09/2026.

   Les `color-mix()` sont remplacés par les couleurs qu'ils calculaient, qui sont leurs
   deux bornes : 100 % de transparent au repos, 0 % de transparent au survol. Le détour
   par une fonction de mélange ne servait à rien ici — aucune valeur intermédiaire n'est
   jamais demandée. */
.oneport-sommaire ul li::after {
  content: "";
  position: absolute;
  background-color: transparent;
  width: 100%;
  height: 2px;
  left: 0;
  bottom: 0;
  transition: background-color 0.2s ease;
}
.oneport-sommaire ul li:has(a:hover)::after {
  background-color: var(--onerh-teal-light);
}

/* ==========================================================================
   §2 — PAGES ET WIDGETS   (ex-style-inacio.css)

   ⚠ Ces règles étaient chargées APRÈS la section §1 : elles gagnent à sélecteur
   et spécificité égaux. Ne pas les remonter.
   ========================================================================== */

/***** ACCUEIL *****/

/* Accordéon « Nos offres » — la classe est posée sur le CONTAINER de la section, pas sur
   le widget. */
.orh-offres-acc .e-n-accordion{display:flex;flex-direction:column;gap:0}
.orh-offres-acc .e-n-accordion details{align-items:flex-start!important}

/* Réinit de la bordure « boîte » du widget : elle est sur le titre ET sur l'item, sur les
   4 côtés. Le séparateur haut est remis juste après. */
.orh-offres-acc .e-n-accordion .e-n-accordion-item-title{border:0!important;border-radius:0!important}
.orh-offres-acc .e-n-accordion .e-n-accordion-item,
.orh-offres-acc .e-n-accordion .e-n-accordion-item > .e-con{border:0!important;border-radius:0!important;background:transparent!important}

/* Séparateur haut sur CHAQUE item, premier inclus. Classe répétée volontairement :
   `.orh-offres-acc.orh-offres-acc` compte pour deux classes sur le même élément, ce qui
   porte le sélecteur à 4 et lui fait passer devant la règle de bordure générée par le
   widget. Sans cette répétition, les filets disparaissent. */
.orh-offres-acc.orh-offres-acc .e-n-accordion .e-n-accordion-item{border-top:1px solid rgba(255,255,255,.28)!important}

/* Titre : texte à gauche, chevron à droite, grand et thin. */
.orh-offres-acc .e-n-accordion-item-title{padding:18px 2px!important;font-family:'Inter Tight'!important;
  font-weight:300!important;font-size:30px!important;color:#fff!important;cursor:pointer;list-style:none;
  display:flex!important;flex-direction:row!important;align-items:center;justify-content:space-between;gap:16px}
.orh-offres-acc .e-n-accordion-item-title-header{order:1}
.orh-offres-acc .e-n-accordion-item-title-icon{order:2;margin-left:auto;color:var(--e-global-color-onerhteall,#7CD6D8)!important}
.orh-offres-acc .e-n-accordion-item-title::-webkit-details-marker{display:none}
.orh-offres-acc .e-n-accordion-item-title-icon svg{fill:var(--e-global-color-onerhteall,#7CD6D8)!important;width:16px;height:16px}

/* Services : texte simple, pas de coche. */
.orh-offres-acc .elementor-icon-list-items{padding:0 0 16px;margin:0}
.orh-offres-acc .elementor-icon-list-item{padding:5px 0}
.orh-offres-acc .elementor-icon-list-icon{display:none!important}
.orh-offres-acc .elementor-icon-list-text{color:rgba(255,255,255,.82)!important;font-size:15px;padding:0!important}

/* Onglets « Vous êtes » — migré depuis le CSS custom du widget (`selector`).
   Le bloc d'origine empilait deux passes contradictoires : des pilules (bordure,
   padding, fond teal à l'actif) que la seconde passe annulait au profit d'un
   soulignement animé. Ci-dessous, le rendu final résolu, sans les déclarations
   mortes.

   ⚠ Si un même widget porte `.orh-segments-tabs` ET `.tabs-underline`, c'est ce
   bloc qui l'emporte (il refait en `!important` ce que `.tabs-underline` obtient
   par les variables du widget — écarts sur la couleur du trait, le gap, le fond). */
.orh-segments-tabs .e-n-tabs-heading {
  justify-content: center;
  gap: 5.5rem;
  border: 0;
  flex-wrap: wrap;
}

.orh-segments-tabs .e-n-tab-title {
  /* absent du CSS migré : sans lui, le trait ::before s'ancre au premier parent
     positionné et sort de l'onglet. */
  position: relative;
  font-family: "Inter Tight" !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  color: var(--e-global-color-primary, #1c0d40) !important;
  border: 0 !important;
  border-radius: 26px !important;
  padding: 0 !important;
  background: #fff !important;
}

/* trait qui se déploie de la gauche vers la droite à la sélection */
.orh-segments-tabs .e-n-tab-title::before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--e-global-color-primary) !important;
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.orh-segments-tabs .e-n-tab-title[aria-selected="true"] {
  background: none !important;
}

.orh-segments-tabs .e-n-tab-title[aria-selected="true"]::before {
  width: 100%;
}

.orh-segments-tabs .e-n-tabs-content {
  padding-top: 30px;
}

/* Cabinet de conseil : l'image déborde SOUS le fond de la section.

   Le fond gris reste celui réglé dans Elementor, on n'y touche pas. C'est l'image qui
   sort de la section par le bas, via une marge basse négative : la section se raccourcit
   d'autant, donc le fond s'arrête plus haut et l'image continue seule sur le blanc.

   Une marge négative plutôt qu'un fond découpé en `::before` : rien à neutraliser côté
   Elementor, et une seule valeur pilote l'effet.

   Le container doit rester en débordement visible (réglage par défaut). S'il est en
   « Masqué » dans Avancé → Débordement, l'image est rognée au ras du fond et l'effet
   disparaît. */
.orh-cabinet-conseil {
  --orh-image-overflow: 52px;
}

.orh-cabinet-conseil .elementor-widget-image {
  margin-bottom: calc(-1 * var(--orh-image-overflow));
}

/* ==========================================================================
   Blog : grille de cartes (.orh-blog sur le widget Posts, skin Cards).

   Le widget sort les éléments dans cet ordre : image, texte, méta-données. La maquette
   veut la date AU-DESSUS du titre : la carte passe donc en flex colonne et les trois
   blocs sont réordonnés explicitement.

   L'auteur est masqué ici : le widget ne l'émet qu'en texte brut, sans avatar ni
   fonction.
   ========================================================================== */

/* La règle mutualisée de la §1 met `auto-fit` sur tous les widgets Posts : le nombre
   de colonnes y suit la largeur disponible et ignore le réglage du widget, d'où 5 cartes
   par rangée sur un conteneur large. Ici le réglage 3 / 2 / 1 est rétabli explicitement.
   `minmax(0, 1fr)` et non `1fr` : sans le minimum à zéro, un titre long empêche la
   colonne de se réduire et déborde la grille. */
.orh-blog .elementor-posts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.orh-blog .elementor-post__card {
  display: flex;
  flex-direction: column;
  background: var(--onerh-bg, #ffffff);
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(28, 13, 64, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.orh-blog .elementor-post__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(28, 13, 64, 0.14);
}

/* La maquette veut la date AU-DESSUS du titre et l'auteur EN BAS, alors que le widget
   enferme les deux dans un seul `.elementor-post__meta-data`. `display: contents` efface
   cette boîte : ses deux spans deviennent enfants directs de la carte et peuvent donc
   recevoir des `order` distincts. C'est ce qui permet de les placer aux deux extrémités
   sans dupliquer quoi que ce soit. */
.orh-blog .elementor-post__meta-data {
  display: contents;
}

.orh-blog .elementor-post__thumbnail__link {
  order: 0;
  margin: 0;
}

.orh-blog .elementor-post__text {
  order: 2;
}

/* `padding-bottom: 0` : Elementor réserve le ratio de la vignette par un padding, que
   `aspect-ratio` remplace ici — les deux cumulés doubleraient la hauteur. */
.orh-blog .elementor-post__thumbnail {
  aspect-ratio: 16 / 10;
  height: auto;
  padding-bottom: 0 !important;
}

.orh-blog .elementor-post__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Le padding se pose sur le span lui-même : la boîte qui le portait a disparu avec
   `display: contents`. */
.orh-blog .elementor-post-date {
  order: 1;
  padding: 24px 28px 0;
  font-size: 0.8125rem;
  color: var(--onerh-text-muted, #707070);
}

/* Bloc auteur en pied de carte, détaché par un filet. `margin-top: auto` le pousse vers
   le bas : les cartes d'une rangée ont la même hauteur, donc les filets s'alignent même
   quand un extrait tient sur moins de lignes. */
.orh-blog .elementor-post-author {
  order: 3;
  margin-top: auto;
  padding: 16px 28px 22px;
  border-top: 1px solid #eef1f6;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--onerh-primary, #1c0d40);
}

.orh-blog .elementor-post__text {
  padding: 8px 28px 22px;
  margin: 0;
}

/* Titre et extrait coupés à un nombre de LIGNES fixe, avec points de suspension ajoutés
   par le navigateur. Le réglage « longueur de l'extrait » d'Elementor coupe, lui, à un
   nombre de MOTS : la hauteur varie alors selon la longueur des mots et les cartes se
   décalent. Ici les trois cartes d'une rangée ont exactement la même hauteur de texte.

   `-webkit-line-clamp` demande `display: -webkit-box` et `box-orient` — c'est la syntaxe
   préfixée, mais elle est la seule reconnue partout pour la troncature multiligne. */
.orh-blog .elementor-post__title {
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.orh-blog .elementor-post__title a {
  color: var(--onerh-primary, #1c0d40);
  text-decoration: none;
}

.orh-blog .elementor-post__title a:hover {
  color: var(--onerh-secondary, #00aeb2);
}

.orh-blog .elementor-post__excerpt p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--onerh-text, #1e1e1e);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   Accordéon courant — habillage par défaut de la charte.

   Cible le widget lui-même, pas une classe à poser : ces accordéons n'en portent
   aucune. Les deux qui ont leur propre traitement sont exclus, la FAQ en cartes et
   l'accordéon violet de l'accueil.

   Habillage : pas de boîte, un filet fin entre les items, titre à gauche, signe
   plus/moins teal à droite. Le titre passe au teal à l'ouverture.

   Les listes passent en deux colonnes : onze logiciels en une seule colonne, avec le
   premier panneau ouvert par défaut, repoussent tout le reste de la page.

   `!important` : le widget écrit bordures, fonds et espacements dans des styles
   générés par élément, qu'une classe seule ne bat pas.
   ========================================================================== */

.elementor-widget-n-accordion:not(.orh-faq):not(.orh-offres-acc):not(.orh-offres-acc *) {
  & .e-n-accordion {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Filet haut sur chaque item, filet bas sur le dernier : la liste est fermée des deux
     côtés sans jamais doubler le trait entre deux items. */
  & .e-n-accordion-item {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border-top: 1px solid rgba(28, 13, 64, 0.12) !important;

    &:last-child {
      border-bottom: 1px solid rgba(28, 13, 64, 0.12) !important;
    }
  }

  & .e-n-accordion-item-title {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 16px;
    padding: 20px 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    cursor: pointer;
    list-style: none;

    /* Un `<summary>` affiche un triangle natif, qui ferait doublon avec le plus/moins. */
    &::-webkit-details-marker {
      display: none;
    }

    &::marker {
      content: "";
    }

    /* L'accordéon se parcourt aux flèches du clavier : sans contour, à l'aveugle. */
    &:focus-visible {
      outline: 2px solid var(--onerh-secondary, #00aeb2);
      outline-offset: 2px;
    }
  }

  & .e-n-accordion-item-title-header {
    flex: 1;
    min-width: 0;
  }

  & .e-n-accordion-item-title-text {
    font-family: "Inter Tight", sans-serif;
    font-size: clamp(1rem, 1.3vw, 1.1875rem);
    font-weight: 500;
    line-height: 1.4;
    color: var(--onerh-primary, #1c0d40);
    transition: color 0.25s ease;
  }

  & .e-n-accordion-item[open] .e-n-accordion-item-title-text {
    color: var(--onerh-secondary, #00aeb2);
  }

  & .e-n-accordion-item-title-icon {
    flex: 0 0 auto;
    margin-left: auto;

    & svg {
      width: 14px;
      height: 14px;
      fill: var(--onerh-secondary, #00aeb2) !important;
    }
  }

  & .e-n-accordion-item > .e-con {
    padding: 0 2px 22px !important;
    background: transparent !important;
    border: 0 !important;
  }

  /* `break-inside: avoid` empêche qu'un nom soit coupé entre deux colonnes. */
  & .elementor-widget-text-editor ul {
    columns: 2;
    column-gap: 48px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  & .elementor-widget-text-editor li {
    position: relative;
    break-inside: avoid;
    padding: 5px 0 5px 20px;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--onerh-text, #1e1e1e);

    /* Tiret teal en guise de puce : plus discret qu'un point sur une liste de noms
       propres, et cohérent avec les filets fins de la charte. */
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.95em;
      width: 8px;
      height: 1px;
      background: var(--onerh-secondary, #00aeb2);
    }
  }
}


/* ==========================================================================
   FAQ (.orh-faq sur le widget accordéon nested).

   Parti pris : des items en cartes DÉTACHÉES plutôt qu'un bloc unique à filets. Une
   question fermée reste alors lisible comme une entrée cliquable, et l'ouverture se lit
   à trois signaux simultanés — l'ombre se creuse, la question passe au teal, un liseré
   se déploie à gauche. Sur une FAQ, savoir d'un coup d'œil quelle question est ouverte
   compte plus que la densité.

   Reprend la charte telle qu'elle s'est fixée : violet profond pour le texte, teal pour
   l'interaction, gris #F4F7FB pour les fonds neutres, rayon de 16 px, ombres très
   diffuses en rgba(28, 13, 64, …).

   `!important` sur bordures, fonds et espacements : le widget nested-accordion écrit ces
   valeurs dans des styles générés par élément, qu'une classe seule ne bat pas. Même
   raison que pour l'accordéon « Nos offres » plus haut.
   ========================================================================== */

.orh-faq .e-n-accordion {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.orh-faq .e-n-accordion-item {
  position: relative;
  overflow: hidden;
  background: var(--onerh-bg, #ffffff) !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 20px rgba(28, 13, 64, 0.06);
  transition: box-shadow 0.28s ease;
}

.orh-faq .e-n-accordion-item[open] {
  box-shadow: 0 14px 34px rgba(28, 13, 64, 0.1);
}

/* Liseré teal qui se déploie du haut vers le bas à l'ouverture. `scaleY` plutôt qu'une
   hauteur : la transformation ne déclenche pas de recalcul de mise en page, l'animation
   reste fluide même sur une longue liste. */
.orh-faq .e-n-accordion-item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--onerh-secondary, #00aeb2);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.orh-faq .e-n-accordion-item[open]::before {
  transform: scaleY(1);
}

/* Question. `list-style` et le marqueur WebKit sont neutralisés : un `<summary>` affiche
   un triangle natif par défaut, qui ferait doublon avec le chevron. */
.orh-faq .e-n-accordion-item-title {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 20px;
  padding: 20px 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  cursor: pointer;
  list-style: none;
}

.orh-faq .e-n-accordion-item-title::-webkit-details-marker {
  display: none;
}

.orh-faq .e-n-accordion-item-title::marker {
  content: "";
}

/* Repère clavier : le `<summary>` est focusable, et l'accordéon se parcourt aux flèches.
   Sans ce contour, la navigation au clavier se fait à l'aveugle. */
.orh-faq .e-n-accordion-item-title:focus-visible {
  outline: 2px solid var(--onerh-secondary, #00aeb2);
  outline-offset: -2px;
}

.orh-faq .e-n-accordion-item-title-header {
  flex: 1;
  min-width: 0;
}

.orh-faq .e-n-accordion-item-title-text {
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--onerh-primary, #1c0d40);
  transition: color 0.25s ease;
}

.orh-faq .e-n-accordion-item[open] .e-n-accordion-item-title-text {
  color: var(--onerh-secondary, #00aeb2);
}

/* Chevron dans une pastille : cible plus large que l'icône seule, et le changement de
   fond à l'ouverture donne un second signal d'état, lisible sans lire le texte. */
.orh-faq .e-n-accordion-item-title-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--onerh-bg-alt, #f4f7fb);
  transition: background 0.25s ease;
}

.orh-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon {
  background: var(--onerh-teal-light, #7cd6d8);
}

.orh-faq .e-n-accordion-item-title-icon svg {
  width: 12px;
  height: 12px;
  fill: var(--onerh-primary, #1c0d40) !important;
}

/* Réponse. Pas de padding haut : l'espacement vient de la question au-dessus, sinon
   l'écart double à l'ouverture. Le retrait à droite est plus large qu'à gauche pour que
   la ligne de texte ne file pas sous le chevron. */
.orh-faq .e-n-accordion-item > .e-con {
  padding: 0 68px 22px 24px !important;
  background: transparent !important;
  border: 0 !important;
}

.orh-faq .elementor-widget-text-editor p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--onerh-text, #1e1e1e);
  margin: 0;
}

.orh-faq .elementor-widget-text-editor a {
  color: var(--onerh-secondary, #00aeb2);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.orh-faq .elementor-widget-text-editor a:hover {
  color: var(--onerh-primary, #1c0d40);
}

/* ==========================================================================
   Flèche « arrow-right » : le dessin suit la couleur de son contexte.

   `currentColor` vaut la couleur de texte de l'élément parent — donc celle réglée dans
   Elementor. La flèche change de couleur avec le libellé du bouton, survol compris,
   sans qu'aucune valeur ne soit écrite ici.

   C'est le `stroke` qui est recoloré, pas le `fill` : ce dessin est au trait
   (`fill="none"` sur ses formes). Remplir un tracé au trait le transformerait en tache.

   Ciblé par `[id=]` autant que par `.classe` : dans le SVG exporté, `arrow-right` est un
   ID posé sur le `<g>`. Un ID est censé être unique dans la page, or la flèche apparaît
   sur plusieurs boutons — le sélecteur d'attribut les vise tous, là où `#arrow-right`
   n'en viserait qu'un seul selon les navigateurs.

   ⚠ Ne fonctionne que sur un SVG INLINE. Une flèche insérée en `<img src="…svg">` reste
   un fichier extérieur, hors d'atteinte du CSS de la page. */
:is(.arrow-right, [id="arrow-right"]) :is(path, line, polyline),
:is(.arrow-right, [id="arrow-right"])[stroke] {
  stroke: currentColor !important;
}

/* Taille des flèches de bouton. `height: auto` conserve les proportions du dessin :
   avec un viewBox de 31 × 15,414, une largeur de 1,5 rem donne environ 12 px de haut.
   Pas de `!important` : cette règle est chargée après celle d'Elementor, donc elle
   l'emporte à spécificité égale. */
.elementor-button-icon svg {
  width: 1.5rem;
  height: auto;
}

/* ==========================================================================
   Rayon et espacement interne communs à TOUS les boutons du site, quelle que soit leur
   origine : widget bouton Elementor, bloc Gutenberg des articles migrés, pagination.

   Le padding est l'espacement INTÉRIEUR du bouton — 18 px au-dessus et en dessous du
   libellé, 19 px de chaque côté. Si l'intention était un espace AUTOUR du bouton, c'est
   `margin` qu'il faut, et les valeurs sont à revoir.

   ⚠ Portée volontairement large — c'est le but : un seul rayon pour que les boutons se
   ressemblent d'une page à l'autre. Les appels à l'action du menu ne sont pas touchés :
   ce sont des `a.elementor-item`, pas des `.elementor-button`.

   `!important` : Elementor écrit le rayon de ses boutons depuis le kit
   (`.elementor-kit-… .elementor-button`, deux classes) ou par widget — une règle à une
   seule classe ne le bat pas. Le bon endroit reste le kit : Réglages du site → Boutons
   → Rayon de bordure. Une valeur posée là-bas rend cette règle inutile, et reste
   visible pour qui ouvre l'éditeur.

   SEULE source du rayon des boutons dans le thème : ne pas réintroduire ailleurs une
   deuxième valeur concurrente.
   ========================================================================== */
.elementor-button,
.wp-block-button__link,
.wp-element-button {
  border-radius: 1rem !important;
  padding: 18px 19px !important;
}

/* Fond annulé sur ordinateur (.orh-notre-entreprise) — conservé en tablette et mobile.

   Le fond est posé dans Elementor sur l'élément lui-même ; sa règle générée compte trois
   classes (`.elementor-XXX .elementor-element.elementor-element-YYY`), d'où le `!important`
   ici — la classe seule ne suffirait pas à passer devant.

   1025 px et non 1024 : la borne tablette d'Elementor s'arrête à 1024 px, les deux règles
   ne se chevauchent donc jamais.

   Seule la couleur est neutralisée. Si un jour une image de fond apparaît sur ordinateur,
   c'est `background-image: none` qu'il faudra ajouter — `transparent` ne l'efface pas. */
@media (min-width: 1025px) {
  .orh-notre-entreprise {
    background-color: transparent !important;
  }
}

@media (max-width: 1024px) {
  /* Reprend le réglage du widget : 2 colonnes en tablette, 1 en mobile. */
  .orh-blog .elementor-posts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Onglets « Vous êtes » : la carte de texte de chaque onglet est réglée en
     `position: absolute` + `translateY(-50%)`. C'est la superposition voulue sur le
     bureau, où elle chevauche l'image.

     Sortie du flux, elle ne pousse plus rien : le conteneur de l'onglet ne mesure que
     la hauteur de son image, la carte dépasse en bas — bouton coupé — et recouvre la
     section suivante. Elle est donc remise dans le flux, sous l'image.

     `!important` : Elementor écrit ces deux propriétés dans une règle par élément
     (`.elementor-element-045c018 { position: absolute }`), qu'une classe ne bat pas. */
  .tabs-underline .e-n-tabs-content .e-con.e-transform {
    position: static !important;
    transform: none !important;
  }
}

@media (max-width: 767px) {
  /* La barre d'onglets est conservée sur mobile (point d'arrêt « Aucun » dans le
     widget). Les quatre titres font 62 caractères : ils ne tiennent pas sur 375 px et
     passeraient à la ligne, ce qui casse la barre en trois rangées et rend le trait
     de soulignement illisible. `nowrap` les maintient sur une seule ligne, que le
     défilement horizontal du widget rend glissable au doigt.

     L'écart entre titres reste piloté par `--n-tabs-title-gap`, dont la borne basse
     (1,5 rem) est déjà calibrée pour cette largeur.

     Le défilement est posé ici, sur la barre elle-même : le réglage du widget ne fait
     que l'autoriser, mais sans `overflow-x` le dernier onglet reste coupé net au bord
     sans qu'on puisse l'atteindre. La barre de défilement est masquée — elle traverserait
     le trait de soulignement — et le débordement se signale autrement : le padding droit
     laisse volontairement apparaître le début de l'onglet suivant. */
  .tabs-underline .e-n-tabs-heading {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding-right: 32px;
    /* Indispensable, et pas seulement esthétique : poser `overflow-x: auto` fait passer
       `overflow-y` de `visible` à `auto` — les deux axes ne peuvent pas cohabiter dans
       ces états. Or le trait de soulignement est à `bottom: -8px`, donc 9 px hors de la
       boîte : le navigateur ajoutait une barre de défilement verticale pour l'atteindre.
       Ce padding ramène le trait à l'intérieur, et le défilement vertical disparaît. */
    padding-bottom: 12px;
    scrollbar-width: none;
  }

  .tabs-underline .e-n-tabs-heading::-webkit-scrollbar {
    display: none;
  }

  .tabs-underline .e-n-tab-title {
    white-space: nowrap;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* Même correctif que le palier 1024 px ci-dessus, mais déclenché par la classe
     qu'Elementor pose lui-même en mode accordéon : le correctif suit donc le point de
     rupture réglé dans le widget. La media query reste comme garde-fou, au cas où cette
     classe soit rendue côté serveur. */
  .e-n-tabs-mobile .e-n-tabs-content .e-con.e-transform {
    position: static !important;
    transform: none !important;
  }

  /* Sur une colonne, l'image passe sous le texte et un débordement sous le fond n'a
     plus de sens : il mangerait l'espacement avec la section suivante. */
  .orh-cabinet-conseil {
    --orh-image-overflow: 0px;
  }

  .orh-blog .elementor-posts {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Une seule colonne : à 375 px, deux colonnes de noms de logiciels donneraient des
     libellés coupés comme « Advantage RH / (Sigma) ». */
  .elementor-widget-n-accordion:not(.orh-faq):not(.orh-offres-acc):not(.orh-offres-acc *) {
    & .elementor-widget-text-editor ul {
      columns: 1;
    }

    & .e-n-accordion-item-title {
      padding: 16px 0 !important;
    }
  }

  /* FAQ : paddings resserrés, et le retrait droit de la réponse retombe à la même valeur
     qu'à gauche — sur 375 px, 68 px de marge ne laisseraient plus de colonne de lecture.
     La pastille du chevron rétrécit d'autant. */
  .orh-faq .e-n-accordion-item-title {
    gap: 12px;
    padding: 16px 18px !important;
  }

  .orh-faq .e-n-accordion-item-title-icon {
    width: 28px;
    height: 28px;
  }

  .orh-faq .e-n-accordion-item > .e-con {
    padding: 0 18px 18px !important;
  }

  /* Tableau « Votre besoin / Notre solution » : les dix rangées passent en colonne, donc
     chaque paire besoin-solution devient un bloc de deux lignes empilées. À deux
     colonnes sur 375 px, des libellés de 40 à 60 caractères se coupent sur trois lignes
     et le tableau devient illisible.

     `!important` : Elementor écrit la direction et la largeur des containers dans une
     règle par élément. Ces valeurs sont aussi réglables dans l'éditeur (Disposition →
     Direction, variante mobile), mais il faudrait le faire sur les dix rangées et
     recommencer à chaque ligne ajoutée. */
  .orh-solutions > .e-con {
    flex-direction: column !important;
  }

  .orh-solutions > .e-con > .e-con {
    width: 100% !important;
  }

  /* Détache les paires les unes des autres, pour qu'on voie où commence chaque cas. */
  .orh-solutions > .e-con + .e-con {
    margin-top: 14px;
  }

  /* Le filet teal entre rangées n'existe plus ici : il est désormais borné au bureau
     dans la §3, au lieu d'être posé partout puis annulé à cet endroit. Empilé, il
     s'ajoutait à la marge ci-dessus et donnait une double séparation. */

  /* Onglets : un titre long doit pouvoir passer à la ligne au lieu d'être tronqué. */
  .e-n-tab-title {
    height: auto;
    align-items: flex-start;
  }
  .e-n-tab-title-text {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ==========================================================================
   §3 — CORRECTIFS   (ex-style-bastien.css)

   ⚠ Ces règles étaient chargées EN DERNIER : elles gagnent à sélecteur et
   spécificité égaux, y compris face à la §2. Ne pas les remonter.
   ========================================================================== */

/*** HEADER STICKY ***/
header {
   position: sticky;
   top: 0;
   z-index: 100;
   transition: padding 0.2s ease-out;
}

header.is-sticky .elementor-element-onrhrootl,
header.is-sticky .elementor-element-onrhrootd {
   padding: 1rem 3.75rem;
}

header .elementor-widget-image img {
   transition: width 0.3s ease-out;
}

header.is-sticky .elementor-widget-image img {
   width: 80px !important;
}

@media screen and (min-width: 1024px) {
   header.is-sticky .orh-header-nav .elementor-nav-menu > li > a.elementor-item {
      font-size: 1rem !important;
   }

   header.is-sticky .elementor-button {
      font-size: 13px !important;
      padding: 12px 15px !important;
   }
}

/*** NOS OFFRES ***/

/* Filet teal entre les rangées du tableau « Votre besoin / Notre solution ».

   BUREAU ET TABLETTE UNIQUEMENT. Sous 768 px, la §2 empile chaque paire et les détache
   par une marge : le filet s'y ajouterait et donnerait une double séparation.

   La borne est posée ici, sur la règle elle-même. Auparavant le filet s'appliquait à
   toutes les largeurs et la §2 l'annulait par une contre-règle de spécificité
   supérieure — une règle dont le seul rôle était d'en défaire une autre, invisible pour
   qui lisait celle-ci. Vérifié avant regroupement : les enfants directs de
   `.orh-solutions` portent tous `.e-con` sur les trois pages concernées, `> div` et
   `> .e-con` désignaient donc le même ensemble. */
@media screen and (min-width: 768px) {
   .orh-solutions > div:not(:last-child) {
      border-bottom: 1px solid #00AEB2;
   }
}

.orh-solutions p {
   margin: 0 !important;
}

/*** ARTICLE (single post) ***/
.post .e-con-inner {
   width: min(100%, 1200px)
}

/*** ONE PORTAGE — Footer ***/
footer .elementor-widget-n-menu .e-n-menu-heading {
   flex-direction: column !important;
}

/*** ONE PORTAGE — Blog (corps d'article) ***/
.orh-blog-post h1 {
   padding-bottom: 1.5rem;
}

.orh-blog-post h2 {
   padding-top: 1rem;
}

.orh-blog-post h3 {
   padding-top: 0.7rem;
}

.orh-blog-post .wp-block-image {
   text-align: center;
}

.orh-blog-post img {
   margin-top: 1rem;
}

.orh-blog-post .wp-block-button {
   padding-top: 1rem;
}

.orh-blog-post .wp-block-button a.wp-block-button__link {
   background-color: var(--e-global-color-onerhteall) !important;
   color: var(--e-global-color-text) !important;
}

.orh-blog-post iframe {
   padding: 1rem 0 1.5rem;
}

@media screen and (max-width: 767px) {
   .orh-blog-post {
      padding: 0 18px;
   }
}

.calendly-inline-widget {
  width: 100%;
  min-width: 320px;   /* évite que ça devienne trop étroit sur mobile */
  height: 700px;      /* hauteur fixe raisonnable, ou voir plus bas pour du fluide */
}

@media (max-width: 600px) {
  .calendly-inline-widget {
    height: 900px;     /* sur mobile, Calendly a besoin de plus de hauteur car tout s'empile verticalement */
  }
}

/* ==== SIMULATEUR ==== */
/* ===== Jetons (couleurs du site + transparences) ===== */
#op-sim {
  --op-field:         color-mix(in srgb, var(--onerh-primary-light) 5%,  transparent);
  --op-border:        color-mix(in srgb, var(--onerh-primary-light) 12%, transparent);
  --op-text-soft:     color-mix(in srgb, var(--onerh-text)   75%, transparent);
  --op-on-dark:       color-mix(in srgb, var(--onerh-bg)  80%, transparent);
  --op-on-dark-bg:    color-mix(in srgb, var(--onerh-bg)  8%,  transparent);
  --op-on-dark-line:  color-mix(in srgb, var(--onerh-bg)  12%, transparent);
  --op-shadow-violet: color-mix(in srgb, var(--onerh-primary-light) 25%, transparent);
  --op-shadow-navy:   color-mix(in srgb, var(--onerh-text)   28%, transparent);
  --op-placeholder:   color-mix(in srgb, var(--onerh-primary) 50%, transparent);

  --op-neg: var(--onerh-text-muted);
  --op-pos: var(--onerh-secondary);
}

/* ===== Neutralisation des marges du thème et d'Elementor ===== */
#op-sim .elementor-heading-title { margin:0; }
#op-sim .elementor-widget:not(:last-child) { margin-block-end:0; }
#op-sim .op-benefit .elementor-icon-box-title { margin:0; }
#op-sim .op-benefit .elementor-icon-box-description { margin:0; }
#op-sim[data-profile="entreprise"] .op-benefit .elementor-icon-box-title { margin:0 0 0.25rem 0; }

/* ===== Onglets ===== */
/* Fonds des onglets, par les variables du widget plutôt que par des règles.
   Inséré par un widget Modèle, le widget charge sa feuille (functions.php) APRÈS celle du modèle :
   à spécificité égale, sa règle de fond actif — qui lit --n-tabs-title-background-color-active,
   par défaut la couleur d'accent du kit (beige) — l'emporte sur celle du modèle (blanc). En
   prévisualisation l'ordre est inverse, d'où l'écart. Poser les variables sur #op-tabs rend le
   résultat indépendant de l'ordre de chargement. */
#op-tabs {
  --n-tabs-title-background-color: color-mix(in srgb, var(--onerh-bg) 50%, transparent);
  --n-tabs-title-background-color-hover: color-mix(in srgb, var(--onerh-bg) 80%, transparent);
  --n-tabs-title-background-color-active: var(--onerh-bg);
}
#op-tabs .e-n-tabs-content { display:none; }
/* Supprimables si l'étirement 50/50 est réglé dans Elementor */
#op-tabs .e-n-tabs-heading { display:flex; flex-direction:row !important; flex-wrap:nowrap; width:100%; }
#op-tabs .e-n-tab-title { flex:1 1 50%; max-width:50%; justify-content:center; text-align:center; }

/* ===== Boutons : typo, padding, rayon, hauteur (couleurs dans Elementor) ===== */
#op-sim .op-seg-btn,
#op-sim .op-submit,
#op-sim .op-cta-btn,
#op-sim .op-detail-toggle { /* largeur : voir "Style → Position → Étiré" dans Elementor */ }

#op-sim .op-seg-btn .elementor-button,
#op-sim .op-submit .elementor-button,
#op-sim .op-cta-btn .elementor-button,
#op-sim .op-detail-toggle .elementor-button {
  display:flex; align-items:center; justify-content:center;
}

/* Sélecteur de mode */
#op-sim .op-seg-btn { flex:1 1 auto; width:auto; }
#op-sim .op-seg-btn .elementor-button {
  min-height:2.5rem; padding:0.375rem 0.5rem !important; border-radius:0.5rem !important;
  font-size:0.875rem; font-weight:600; line-height:1.2; text-align:center;
}

/* Bouton principal */
#op-sim .op-submit .elementor-button {
  min-height:3.375rem; padding:0 1rem; border-radius:0.75rem;
  font-size:1rem; font-weight:700;
}

/* Bouton CTA */
#op-sim .op-cta-btn .elementor-button {
  min-height:3.25rem; padding:0 1.25rem; border-radius:0.75rem;
  font-size:0.9375rem; font-weight:700;
}
#op-sim .op-cta-btn .elementor-button-icon svg { width:1.25rem; height:auto; }

/* Bouton « Voir le détail du calcul » */
#op-sim .op-detail-toggle .elementor-button {
  justify-content:flex-start; padding:0.5rem 0;
  font-size:0.875rem; font-weight:700;
}

/* Mode actif (état piloté par le JS : seule couleur de bouton gardée en CSS) */
#op-sim .op-seg-btn.op-is-active .elementor-button {
  background:var(--onerh-primary-light); color:var(--onerh-bg); font-weight:700;
  box-shadow:0 0.125rem 0.375rem var(--op-shadow-violet);
}

/* ===== Champs (widget HTML) ===== */
#op-fields { display:flex; flex-direction:column; gap:1.25rem; }
.op-field { display:flex; flex-direction:column; gap:0.5rem; }
.op-field__label { font-size:0.9375rem; font-weight:700; color:var(--onerh-text); }
.op-field__control { position:relative; }
.op-field__control input {
  width:100%; height:3.125rem; box-sizing:border-box; padding:0 3.5rem 0 1rem;
  border:1.5px solid transparent; border-radius:0.625rem;
  background:var(--op-field); color:var(--onerh-text);
  font-family:inherit; font-size:1rem; font-weight:600;
}
.op-field__control input::placeholder { color:var(--op-placeholder); opacity:1; }
.op-field__control input:focus { outline:none; border-color:var(--onerh-primary-light); }
.op-field__suffix {
  position:absolute; right:1rem; top:50%; transform:translateY(-50%);
  font-size:0.875rem; font-weight:600; color:var(--op-placeholder); pointer-events:none;
}
.op-field__help { font-size:0.75rem; line-height:1.45; color:var(--onerh-text-muted); }

/* Chargement : le widget HTML contient des champs d'exemple (coquille du modèle), et le JS les
   remplace par les vrais à son exécution. Tant qu'il n'a pas posé data-op-ready, on masque
   ces exemples et on réserve la place de 3 champs (label + saisie + écarts, le dernier avec son texte d'aide : 319 px mesurés sur bureau) avec 3 barres qui
   pulsent : la page ne saute pas quand les vrais champs arrivent. Si le JS ne se charge pas,
   le squelette reste — mieux que des champs d'exemple inertes. */
#op-fields:not([data-op-ready]) > * { display:none; }
#op-fields:not([data-op-ready])::before {
  /* Plus soutenu que le fond des vrais champs (5 %) : à 5 %, le pulse serait presque invisible */
  --op-skeleton:color-mix(in srgb, var(--onerh-primary-light) 14%, transparent);
  content:""; display:block; height:20rem; border-radius:0.625rem;
  background:
    linear-gradient(var(--op-skeleton), var(--op-skeleton)) 0 0 / 100% 5rem no-repeat,
    linear-gradient(var(--op-skeleton), var(--op-skeleton)) 0 6.25rem / 100% 5rem no-repeat,
    linear-gradient(var(--op-skeleton), var(--op-skeleton)) 0 12.5rem / 100% 5rem no-repeat;
  animation:op-pulse 0.85s ease-in-out infinite alternate;
}
@keyframes op-pulse { from { opacity:0.25; } to { opacity:1; } }
/* Même principe pour le panneau « Votre estimation » (état vide) et pour la liste des bénéfices
   juste en dessous (.op-includes) : tant que le JS n'est pas prêt, leur contenu est masqué et leur
   cadre pulse à la place, à dimensions identiques — pas de saut quand le vrai contenu prend le relais.
   `visibility` et non `display` : la boîte garde sa taille.
   Le cadre de .op-includes n'a pas de fond propre : le fond posé ici n'existe que pendant le chargement. */
#op-sim:not([data-op-ready]) .op-empty,
#op-sim:not([data-op-ready]) .op-includes { animation:op-pulse 0.85s ease-in-out infinite alternate; }
#op-sim:not([data-op-ready]) .op-empty > *,
#op-sim:not([data-op-ready]) .op-includes > * { visibility:hidden; }
#op-sim:not([data-op-ready]) .op-includes {
  background:color-mix(in srgb, var(--onerh-primary-light) 14%, transparent); border-radius:0.75rem;
}
/* Après les règles d'animation : à spécificité égale, la dernière gagne. */
@media (prefers-reduced-motion: reduce) {
  #op-fields:not([data-op-ready])::before,
  #op-sim:not([data-op-ready]) .op-empty,
  #op-sim:not([data-op-ready]) .op-includes { animation:none; }
}

/* ===== États et visibilité (pilotés par le JS) ===== */
#op-sim .op-result { display:none; }
#op-sim.op-has-result .op-result { display:flex; }
#op-sim.op-has-result .op-empty { display:none; }
#op-sim .op-is-hidden { display:none !important; }

#op-sim[data-profile="entreprise"] .op-only-consultant,
#op-sim:not([data-profile="entreprise"]) .op-only-entreprise { display:none !important; }

#op-sim .op-needs-result { display:none; }
#op-sim.op-has-result .op-needs-result { display:flex; }

/* ===== Titre de l'état vide (widget HTML) ===== */
.op-empty__title { display:block; font-size:0.9375rem; font-weight:700; color:var(--onerh-text); }

/* ===== Carte résultat (widget HTML) ===== */
#op-result-card { display:flex; flex-direction:column; gap:0.875rem; color:var(--onerh-bg); }

.op-target {
  display:flex; flex-wrap:wrap; align-items:baseline; gap:0.25rem 0.75rem;
  padding:0.625rem 0.875rem; border-radius:0.625rem;
  background:var(--op-on-dark-bg); font-size:0.875rem;
}
.op-target strong { font-size:1rem; color:var(--onerh-teal-light); }
.op-target small { font-size:0.75rem; color:var(--op-on-dark); }

.op-result__grid {
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:1rem; align-items:center;
}
.op-result__hero { display:flex; flex-direction:column; gap:0.5rem; }
.op-result__value { display:flex; align-items:baseline; gap:0.5rem; }
.op-result__value > span:first-child {
  font-size:2.5rem; font-weight:700; line-height:1; letter-spacing:-0.02em;
}
.op-result__unit { font-size:1.125rem; font-weight:600; }
.op-result__label { font-size:0.8125rem; color:var(--op-on-dark); }
.op-badge {
  align-self:flex-start; padding:0.25rem 0.625rem; border-radius:999px;
  background:var(--onerh-teal-light); color:var(--onerh-text); font-size:0.8125rem; font-weight:700;
}

.op-result__chips { display:flex; flex-direction:column; gap:0.5rem; }
.op-chip {
  display:flex; align-items:center; gap:0.75rem;
  padding:0.625rem 0.875rem; border-radius:0.75rem;
  background:var(--op-on-dark-bg); border:1px solid var(--op-on-dark-line);
}
.op-chip__icon { flex:0 0 auto; width:1.5rem; height:1.5rem; color:var(--onerh-teal-light); }
.op-chip__value { display:block; font-size:1.1875rem; font-weight:700; line-height:1.2; }
.op-chip__label { display:block; font-size:0.75rem; font-weight:600; color:var(--op-on-dark); }

/* ===== Détail du calcul ===== */
#op-sim .op-detail-body { display:none; }
#op-sim .op-detail.op-open .op-detail-body { display:block; }
#op-sim .op-detail-toggle .elementor-button-icon { transition:transform .2s; }
#op-sim .op-detail.op-open .op-detail-toggle .elementor-button-icon { transform:rotate(180deg); }

/* En-tête cliquable en entier (le JS gère le clic) ; chevron = widget Icône classé .op-detail-chevron */
#op-sim .op-detail-head { cursor:pointer; transition:background-color .2s; }
/* Rayon du conteneur .op-detail (0,75 rem) moins sa bordure de 1 px : le fond suit le coin intérieur.
   Détail ouvert, le bas de l'en-tête touche le corps : coins bas carrés. */
#op-sim .op-detail-head { border-radius:calc(0.75rem - 1px); }
#op-sim .op-detail.op-open .op-detail-head { border-radius:calc(0.75rem - 1px) calc(0.75rem - 1px) 0 0; }
#op-sim .op-detail-head:hover { background:var(--onerh-bg-alt); }
#op-sim .op-detail-head .op-tip { cursor:help; }
/* Chevron en dernier (à droite), après l'info-bulle, quel que soit l'ordre dans Elementor */
#op-sim .op-detail-chevron { order:1; margin-left:auto; }
#op-sim .op-detail-chevron .elementor-icon { transition:transform .2s; }
#op-sim .op-detail.op-open .op-detail-chevron .elementor-icon { transform:rotate(180deg); }

.op-row {
  display:flex; justify-content:space-between; align-items:baseline; gap:0.75rem;
  padding:0.5rem 0; font-size:0.875rem; color:var(--onerh-text);
}
/* Le montant ne se coupe jamais (« + » à la fin d'une ligne et « 0,00 € » à la suivante) : c'est le
   libellé, à gauche, qui passe à la ligne si la place manque. */
.op-row__val { flex:0 0 auto; font-weight:700; white-space:nowrap; text-align:right; }
.op-row__val--neg { color:var(--op-neg); }
.op-row__val--pos { color:var(--op-pos); }
.op-row--sub { border-top:1px solid var(--op-border); font-weight:700; }
.op-row--total { border-top:2px solid var(--onerh-text); font-size:0.9375rem; font-weight:800; }
.op-row--total .op-row__val { font-size:1rem; font-weight:800; color:var(--onerh-primary-light); }

/* ===== Info-bulles (widgets HTML) ===== */
.op-tip {
  position:relative; display:inline-flex; align-items:center; gap:0.375rem;
  cursor:help; color:var(--onerh-primary-light);
}
.op-tip--note { align-self:flex-start; font-size:0.75rem; color:var(--op-text-soft); }
.op-tip__icon { width:1rem; height:1rem; flex:0 0 auto; }
.op-tip__bubble {
  display:none; position:absolute; z-index:30; width:20rem;
  padding:0.75rem 0.875rem; border-radius:0.625rem;
  background:var(--onerh-text); color:var(--onerh-bg);
  font-size:0.75rem; font-weight:400; font-style:normal; line-height:1.5; text-align:left;
  box-shadow:0 0.625rem 1.5rem var(--op-shadow-navy);
}
.op-tip__bubble--down { top:calc(100% + 0.375rem); left:-0.75rem; }
.op-tip__bubble--up { bottom:calc(100% + 0.5rem); left:0; }
.op-tip__bubble--wide { width:23.75rem; flex-direction:column; gap:0.375rem; }
.op-tip:hover .op-tip__bubble,
.op-tip:focus .op-tip__bubble,
.op-tip:focus-within .op-tip__bubble { display:block; }
.op-tip:hover .op-tip__bubble--wide,
.op-tip:focus .op-tip__bubble--wide,
.op-tip:focus-within .op-tip__bubble--wide { display:flex; }
.op-tip__sep { padding-top:0.375rem; border-top:1px solid var(--op-on-dark-line); }
.op-tip__sep strong { color:var(--onerh-teal-light); }

/* ===== Listes « inclus » : 2 colonnes ===== */
#op-sim .op-includes-list .elementor-icon-list-items {
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0.375rem 1.5rem;
}

/* ===== Bas de page : 2/3 + 1/3 (supprimable si réglé par largeurs dans Elementor) ===== */
#op-sim .op-bottom {
  display:grid !important; grid-template-columns:minmax(0,2fr) minmax(0,1fr);
}
#op-sim .op-cta { align-self:start; height:auto; }

/* ===== Résultat périmé (état posé par le JS) ===== */
/* Un champ a changé depuis le dernier calcul : le résultat reste visible mais atténué,
   jusqu'au clic sur « Mettre à jour ma simulation ». */
#op-sim .op-result,
#op-sim .op-detail-body { transition:opacity .2s; }
#op-sim.op-is-stale .op-result,
#op-sim.op-is-stale .op-detail-body { opacity:0.45; }

/* ===== Bouton « Simuler » inactif (état posé par le JS) ===== */
/* Les champs sont ceux du résultat affiché : rien à recalculer. */
#op-sim .op-submit .elementor-button { transition:opacity .2s; }
#op-sim .op-submit.op-is-disabled .elementor-button {
  opacity:0.4; cursor:not-allowed; box-shadow:none; pointer-events:none;
}


/* ===== Simulateur : mobile ===== */
@media (max-width: 767px) {

  #op-sim {
    padding: 0;
  }
  /* Onglets : padding réduit. Les règles génériques « Onglets » de la section mobile plus haut
     (.e-n-tab-title { align-items:flex-start } et .e-n-tab-title-text { flex:1 1 auto }) valent
     aussi pour ces onglets : en réduisant le padding à la main dans Elementor, le texte se
     retrouvait collé en haut et non centré dans son libellé. On les recentre ici, et on pose le
     padding dans la feuille pour qu'il n'y ait qu'un seul endroit où le régler. */
  #op-tabs .e-n-tab-title {
    padding:0.75rem 0.5rem;
    align-items:center; justify-content:center; text-align:center;
  }
  #op-tabs .e-n-tab-title-text { flex:0 1 auto; text-align:center; }

  /* Bas de page : les conteneurs s'empilent. La grille 2/3 + 1/3 du bureau est posée en
     !important (voir « Bas de page ») : le sens de la direction réglé dans Elementor pour
     le mobile n'avait donc aucun effet. */
  #op-sim .op-bottom { grid-template-columns:minmax(0, 1fr); }

  /* Carte résultat : le montant principal et les deux pastilles s'empilent. */
  .op-result__grid { grid-template-columns:minmax(0, 1fr); }

  /* Listes « inclus » : une seule colonne (à 375 px, deux colonnes coupent les libellés sur plusieurs lignes). */
  #op-sim .op-includes-list .elementor-icon-list-items { grid-template-columns:minmax(0, 1fr); }
}