/* ============================================================================
   OFOLO — cabinet de recrutement finance, comptabilité, juridique
   Feuille de style sur mesure. Le thème Kolo n'est JAMAIS modifié :
   tout passe par ce fichier, chargé depuis mu-plugins.

   SOMMAIRE
   01. Jetons de couleur et bases
   02. En-tête sombre + logo
   03. Hero plein écran
   04. Bandeau de confiance
   05. Expertises (6 pôles)
   06. Méthode en 3 temps
   07. Chiffres et preuves
   08. Témoignages
   09. Double appel à l'action
   10. Questions fréquentes
   11. Formulaires
   12. Contenu de page intérieure
   13. Pied de page
   14. Animations
   15. Responsive
   ⚠ TOUTES LES TAILLES SONT EN PIXELS, JAMAIS EN REM.
   Le thème Kolo déclare « html { font-size: 10px } » : un « rem » y vaut donc
   10 px et non 16. Toute la maquette tournait à 62,5 % de la taille prévue —
   un chapô à 12,8 px au lieu de 19. Si vous ajoutez des règles ici, restez
   en pixels.
   ========================================================================= */

/* --- 01. Jetons de couleur et bases ------------------------------------- */

.of {
  --of-nuit:      #0A0C10;
  --of-nuit-2:    #10131A;
  --of-nuit-3:    #13181F;
  --of-carte:     #161B24;
  --of-carte-2:   #1B2130;
  --of-bord:      rgba(61, 220, 151, .20);
  --of-bord-2:    rgba(255, 255, 255, .09);

  --of-or:        #3DDC97;
  --of-or-clair:  #7CF5C0;
  --of-or-fonce:  #22D3EE;
  --of-grad:      linear-gradient(118deg, #7CF5C0 0%, #3DDC97 45%, #22D3EE 100%);
  --of-grad-doux: linear-gradient(118deg, rgba(124,245,192,.16) 0%, rgba(34,211,238,.10) 100%);

  --of-ivoire:    #F2F5F8;
  --of-texte:     #C7D0DC;
  --of-texte-2:   #8B95A7;

  --of-r:         18px;
  --of-r-s:       12px;
  --of-ombre:     0 26px 60px -20px rgba(0, 0, 0, .65);
  --of-ombre-or:  0 18px 44px -14px rgba(61, 220, 151, .38);

  /* pleine largeur, quelle que soit la colonne du thème */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  background: var(--of-nuit);
  color: var(--of-texte);
  font-family: 'Inter', 'Segoe UI', -apple-system, sans-serif;
  font-size: 16.5px;
  line-height: 1.7;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

.of *,
.of *::before,
.of *::after { box-sizing: border-box; }

.of h1, .of h2, .of h3, .of h4 {
  font-family: 'Space Grotesk', 'Inter', 'Segoe UI', sans-serif;
  color: var(--of-ivoire);
  line-height: 1.16;
  letter-spacing: -.02em;
  margin: 0 0 .6em;
  font-weight: 700;
}

.of h1 { font-size: clamp(40px, 5.4vw, 70.4px); }
.of h2 { font-size: clamp(31.2px, 3.7vw, 48px); }
.of h3 { font-size: clamp(19.2px, 1.9vw, 24px); }

.of p { margin: 0 0 1.15em; }
.of a { color: var(--of-or); text-decoration: none; transition: color .25s; }
.of a:hover { color: var(--of-or-clair); }
.of img { max-width: 100%; height: auto; display: block; }
.of ul { margin: 0 0 1.2em; padding-left: 1.2em; }
.of li { margin-bottom: .5em; }

.of__zone { padding: clamp(72px, 9vw, 130px) 24px; position: relative; }
.of__large { max-width: 1240px; margin: 0 auto; }
.of__etroit { max-width: 860px; margin: 0 auto; }

.of__alt   { background: var(--of-nuit-2); }
.of__alt2  { background: linear-gradient(175deg, var(--of-nuit-2) 0%, var(--of-nuit) 100%); }

/* Surtitre doré */
.of__surtitre {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--of-or);
  margin-bottom: 22px;
}
.of__surtitre::before {
  content: ''; width: 34px; height: 1px; background: var(--of-grad);
}

.of__chapo {
  font-size: clamp(16.8px, 1.5vw, 19.2px);
  color: var(--of-texte-2); max-width: 62ch;
}

.of__centre { text-align: center; }
.of__centre .of__chapo { margin-left: auto; margin-right: auto; }
.of__centre .of__surtitre::before { display: none; }

/* Mot en dégradé */
.of__or {
  background: var(--of-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Boutons */
.of__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 32px; border-radius: 100px; font-weight: 650; font-size: 15.4px;
  letter-spacing: .01em; border: 1px solid transparent; cursor: pointer;
  transition: transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s, background .28s, color .28s;
  text-align: center;
}
.of__btn--or {
  background: var(--of-grad); color: #10131A !important;
  box-shadow: var(--of-ombre-or);
}
.of__btn--or:hover { transform: translateY(-3px); box-shadow: 0 24px 56px -12px rgba(61,220,151,.52); color: #10131A !important; }
.of__btn--ligne {
  border-color: var(--of-bord); color: var(--of-ivoire) !important;
  background: rgba(255,255,255,.03);
}
.of__btn--ligne:hover { border-color: var(--of-or); background: rgba(61,220,151,.09); transform: translateY(-3px); }

.of__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.of__centre .of__btns { justify-content: center; }


/* --- 02. En-tête sombre + logo ------------------------------------------ */

body.of-body { background: var(--of-nuit, #0A0C10); }

/* La bannière de titre du thème charge une image depuis le site de démo
   distant (wpdemothemes.com) et double le titre de la page. On la retire,
   comme la barre d'infos et le fil d'Ariane. */
body.of-body #main_banner,
body.of-body .top-bar,
body.of-body .header-top,
body.of-body .page-header,
body.of-body .breadcrumb,
body.of-body .kc-title-wrap { display: none !important; }

/* ⚠ Le thème pose « overflow-x: hidden » sur le body (style.css, ligne 52).
   Un overflow « hidden » fait du body un conteneur de défilement, et la barre
   de navigation « position: fixed » se retrouve peinte SOUS le contenu de la
   page — c'est ce qui masquait l'en-tête du blog, puis les sous-menus qui
   descendent sous la barre.
   « clip » découpe de la même façon mais ne crée PAS de conteneur de
   défilement : l'empilement redevient normal. Il faut préciser
   « overflow-y: visible », sinon « clip » retombe sur « hidden ».
   On garde un découpage horizontal parce que « .of » fait 100vw, ce qui
   dépasse de la largeur de l'ascenseur vertical. */
body.of-body {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* ⚠ NE PAS remettre « overflow-x: hidden » sur le body.
   Cela transforme le body en conteneur de défilement : la barre de navigation
   « position: fixed » sort alors du contexte d'empilement de la page et se
   retrouve peinte SOUS les sections, logo et menu compris. C'est exactement ce
   qui donnait l'impression d'être bloqué sur le blog.
   Mesuré : il n'y a aucun débordement horizontal (scrollWidth == clientWidth),
   cette règle était donc inutile. Si un débordement apparaît un jour, corriger
   l'élément fautif, pas le body. */

/* Bouton d'ouverture du menu sur mobile : le thème le rend sombre sur fond
   sombre, donc invisible. On lui redonne les barres dorées. */
body.of-body .navbar-toggle {
  border: 1px solid var(--of-bord, rgba(61,220,151,.2)) !important;
  border-radius: 10px !important;
  background: rgba(61, 220, 151, .10) !important;
  padding: 10px 11px !important;
  margin-top: 12px;
}
body.of-body .navbar-toggle .icon-bar {
  background: #3DDC97 !important;
  width: 21px !important; height: 2px !important;
  display: block; border-radius: 2px;
}
body.of-body .navbar-toggle .icon-bar + .icon-bar { margin-top: 4px !important; }

/* ⚠ Empilement — à ne pas toucher sans mesurer.
   Sur le blog et les articles, notre contenu démarre à 1 px du haut et passe
   donc SOUS la barre de navigation fixe. Sans ces z-index explicites, la
   bannière est peinte par-dessus le logo et le menu : on se croit bloqué,
   sans aucun moyen de revenir à l'accueil.
   Vérifier avec document.elementFromPoint(200, 30) : la réponse doit être
   le logo ou la barre, jamais une section de page. */
body.of-body header,
body.of-body .header,
body.of-body .main-header,
body.of-body .navbar { z-index: 1200 !important; }

body.of-body .of { position: relative; z-index: 0; }
body.of-body .of__banniere,
body.of-body .of__hero { z-index: 0; }

/* ⚠ « backdrop-filter » UNIQUEMENT sur « .navbar », jamais sur « header ».
   Posé sur header#header — qui est en « position: static » — il y crée un
   contexte d'empilement et en fait le bloc conteneur des descendants fixes.
   La barre et ses sous-menus sont alors peints dans la couche des blocs non
   positionnés, donc SOUS « .of » (relative, z-index 0). Résultat : les menus
   déroulants disparaissaient derrière la page.
   « .navbar » est en « position: fixed » avec z-index 1200 : elle porte l'effet
   sans effet de bord. Vérifier avec document.elementsFromPoint() sous une
   entrée à sous-menu : le sous-menu doit être en tête de pile. */
body.of-body header,
body.of-body .header,
body.of-body .main-header,
body.of-body .navbar {
  background: rgba(10, 12, 16, .88) !important;
  border-bottom: 1px solid var(--of-bord-2, rgba(255,255,255,.09));
}
body.of-body .navbar {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* logo : on remplace l'image du thème par le SVG */
body.of-body .logo img,
body.of-body .navbar-brand img,
body.of-body .site-logo img { height: 50px !important; width: auto !important; }

/* liens du menu en clair */
body.of-body .navbar-nav > li > a,
body.of-body .main-menu a,
body.of-body #menu-main-menu > li > a,
body.of-body .nav > li > a {
  color: #E8EDF3 !important;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  font-weight: 600 !important;
  /* ⚠ En pixels, pas en rem : ce thème met « html { font-size: 10px } », donc
     « 16px » vaut 10 px et non 16. C'est ce qui rendait tout le menu minuscule. */
  font-size: 15px !important;
  letter-spacing: .01em;
  transition: color .25s;
}
body.of-body .navbar-nav > li > a:hover,
body.of-body .navbar-nav > li.current-menu-item > a,
body.of-body .navbar-nav > li.current-menu-parent > a,
body.of-body .nav > li > a:hover { color: var(--of-or, #3DDC97) !important; }

/* sous-menus */
body.of-body .dropdown-menu,
body.of-body .sub-menu {
  background: #10131A !important;
  border: 1px solid rgba(61,220,151,.20) !important;
  border-radius: 16px !important;
  padding: 12px !important;
  box-shadow: 0 26px 60px -20px rgba(0,0,0,.75) !important;
  /* ⚠ Le thème impose « width: 228px » sur ul.sub-menu : sans « width », le
     min-width seul ne l'élargit pas. */
  width: 300px !important;
  min-width: 300px !important;
}
body.of-body .dropdown-menu > li > a,
body.of-body .sub-menu > li > a {
  color: #C7D0DC !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  transition: background .22s, color .22s;
}
body.of-body .dropdown-menu > li > a:hover,
body.of-body .sub-menu > li > a:hover {
  background: rgba(61,220,151,.12) !important;
  color: var(--of-or, #3DDC97) !important;
}

/* Bouton d'action dans le menu.
   ⚠ Le thème donne aux liens du menu une hauteur de ligne calée sur la barre.
   Un padding vertical ici fait déborder le bouton hors de l'en-tête : on garde
   donc la hauteur du thème et on ne joue que sur le padding horizontal. */
/* Sur grand écran, la liste du menu devient une rangée alignée sur son axe :
   toutes les entrées, bouton compris, se centrent verticalement d'elles-mêmes.
   ⚠ Réservé au bureau — en dessous de 992 px le thème replie le menu en
   colonne, et une rangée flex casserait l'affichage mobile. */
/* Menu déployé à partir de 1200 px seulement.
   Sept entrées plus le bouton « Recruter un profil » ne tiennent pas sur une
   ligne en dessous : le thème les repliait sur deux lignes et la barre passait
   de 61 à 121 px. On préfère le menu burger jusqu'à 1199 px. */
@media (min-width: 992px) {
  body.of-body #navigation-menu .navbar-nav {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 2px;
  }
  body.of-body #navigation-menu .navbar-nav > li { float: none !important; white-space: nowrap; }
}


/* ==========================================================================
   MENU MOBILE — panneau autonome
   --------------------------------------------------------------------------
   Sous 1200 px, le menu repliable du thème est neutralisé et remplacé par
   « .of-panneau », construit en JavaScript et posé en fin de <body>.
   Il ne dépend ni de Bootstrap, ni de la classe « collapse », ni de
   l'empilement de l'en-tête : trois sources de panne sur téléphone.
   ========================================================================== */

@media (max-width: 991px) {
  body.of-body .navbar-header { float: none !important; }
  body.of-body .navbar-toggle { display: block !important; }
  /* le menu d'origine ne doit plus jamais apparaître */
  body.of-body #navigation-menu,
  body.of-body .navbar-collapse { display: none !important; }
}

@media (min-width: 992px) {
  .of-panneau { display: none !important; }
}

/* le fond ne défile plus quand le panneau est ouvert */
html.of-bloque, html.of-bloque body { overflow: hidden !important; }

/* ⚠ La visibilité ne repose JAMAIS sur l'opacité ni sur une transition.
   Le panneau est pleinement opaque dès qu'il est affiché ; seul l'attribut
   « hidden » décide s'il est là ou non. Si une transition ne se déclenche pas
   — navigateur ancien, animations désactivées, onglet en arrière-plan — le
   menu reste visible au lieu de devenir un écran vide. Le glissement n'est
   qu'un ornement. */
.of-panneau {
  position: fixed; inset: 0;
  z-index: 100000;
  background: #0A0C10;
  display: flex; flex-direction: column;
  opacity: 1;
  transform: translateY(-10px);
  transition: transform .26s cubic-bezier(.2,.8,.3,1);
  overscroll-behavior: contain;
  font-family: 'Inter', 'Segoe UI', sans-serif;
}
.of-panneau.of-ouvert { transform: none; }
.of-panneau[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .of-panneau { transform: none; transition: none; }
}

.of-panneau__tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  flex: 0 0 auto;
}
.of-panneau__tete img { height: 42px; width: auto; display: block; }

.of-panneau__fermer {
  position: relative;
  width: 46px; height: 46px; flex: 0 0 auto;
  border: 1px solid rgba(61, 220, 151, .22);
  border-radius: 12px;
  background: rgba(61, 220, 151, .10);
  cursor: pointer; padding: 0;
}
.of-panneau__fermer::before,
.of-panneau__fermer::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 19px; height: 2px; margin: -1px 0 0 -9.5px;
  background: #3DDC97; border-radius: 2px;
}
.of-panneau__fermer::before { transform: rotate(45deg); }
.of-panneau__fermer::after  { transform: rotate(-45deg); }

.of-panneau__liste {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 20px 36px;
}

.of-panneau__ligne {
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.of-panneau__ligne > a {
  flex: 1 1 auto;
  display: block;
  padding: 17px 2px;
  /* !important : le theme declare « a { color: #337ab7 } », qui reprenait
     la main des que notre feuille etait servie en version perimee. */
  color: #F2F5F8 !important;
  font-size: 17px; font-weight: 600;
  text-decoration: none;
}
.of-panneau__ligne > a:active { color: #7CF5C0; }

.of-panneau__chevron {
  position: relative;
  width: 48px; height: 48px; flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  cursor: pointer; padding: 0;
}
.of-panneau__chevron::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 9px; height: 9px; margin: -6px 0 0 -5px;
  border-right: 2px solid #3DDC97; border-bottom: 2px solid #3DDC97;
  transform: rotate(45deg); transition: transform .28s;
}
.of-panneau__chevron.of-ouvert::after { transform: rotate(-135deg); margin-top: -2px; }

.of-panneau__tiroir { display: none; padding: 6px 0 12px 12px; }
.of-panneau__tiroir.of-ouvert { display: block; }
.of-panneau__tiroir a {
  display: block;
  padding: 13px 14px;
  margin-bottom: 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
  color: #C7D0DC !important;
  font-size: 15.2px;
  text-decoration: none;
}
.of-panneau__tiroir a:active { background: rgba(61, 220, 151, .14); color: #7CF5C0; }

/* l'entrée « Recruter un profil » garde son allure de bouton */
.of-panneau__ligne--cta { border-bottom: 0; margin-top: 18px; }
.of-panneau__ligne--cta > a {
  background: linear-gradient(118deg, #7CF5C0, #3DDC97 45%, #22D3EE);
  color: #10131A !important;
  text-align: center;
  border-radius: 100px;
  padding: 15px 24px;
  font-weight: 700;
  box-shadow: 0 14px 32px -12px rgba(61, 220, 151, .5);
}


/* Entre 992 et 1199 px, les sept entrées plus le bouton doré sont à l'étroit.
   On resserre plutôt que de laisser la barre passer sur deux lignes. */
@media (min-width: 992px) and (max-width: 1199px) {
  body.of-body .navbar-nav > li > a,
  body.of-body .nav > li > a {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 12.8px !important;
  }
  body.of-body .menu-item.of-cta > a {
    padding: 0 14px !important;
    font-size: 12.2px !important;
    height: 36px; line-height: 36px !important;
  }
  body.of-body .navbar-brand img { height: 38px !important; }
}

/* ⚠ Décalage sous la barre fixe — ne pas retirer.
   Le thème pose « overflow-x: hidden » sur le body (style.css, ligne 52), ce
   qui en fait un conteneur de défilement : une section qui recouvre la barre
   fixe est alors peinte PAR-DESSUS elle, logo et menu compris.
   Les gabarits de page du thème évitent le problème car leur conteneur démarre
   déjà sous la barre. Nos gabarits de blog, eux, sont collés au haut du body :
   on reproduit donc le même décalage. Hauteur mesurée de la barre : 61 px. */
/* (décalage désormais défini plus haut, à 68 px) */

body.of-body .menu-item.of-cta > a {
  background: linear-gradient(118deg,#7CF5C0,#3DDC97 45%,#22D3EE) !important;
  color: #10131A !important;
  border-radius: 100px !important;
  padding: 0 22px !important;
  height: 40px; line-height: 40px !important;
  display: inline-block;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: .01em;
  box-shadow: 0 10px 26px -10px rgba(61,220,151,.5);
  transition: transform .25s, box-shadow .25s;
}
body.of-body .menu-item.of-cta > a:hover {
  transform: translateY(-2px); color: #10131A !important;
  box-shadow: 0 16px 34px -10px rgba(61,220,151,.62);
}


/* Hauteur de barre unifiée à 68 px, toutes largeurs confondues.
   Les 61 px d'origine du thème laissaient le logo de 50 px dépasser de 6 px
   sous la bordure. Les paliers grands écrans plus bas la font monter à 78
   puis 90 px. Le décalage appliqué aux gabarits de blog suit la même valeur —
   les deux doivent toujours rester synchronisés. */
body.of-body .navbar { min-height: 68px !important; }
body.of-body .navbar-brand {
  display: flex !important; align-items: center;
  height: 68px !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
}
/* ⚠ Dans le code du thème, le bouton du menu est écrit AVANT le logo.
   En passant « .navbar-header » en flex on annule son « float: right », et le
   bouton se retrouve à gauche. On rétablit donc l'ordre visuel :
   logo à gauche, bouton à droite. */
body.of-body .navbar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* marge de respiration : sans elle, le logo et le bouton sont collés aux
     bords de l'écran sur téléphone. */
  padding-left: 6px;
  padding-right: 6px;
}
body.of-body .navbar-brand  { order: 1; }
body.of-body .navbar-toggle {
  order: 2;
  margin-top: 0 !important;
  margin-right: 6px !important;
  align-self: center;
  float: none !important;
}

/* Sur téléphone, le conteneur du thème ne laisse que 15 px de marge :
   le bouton frôle la bordure de l'écran. On double l'écart des deux côtés. */
@media (max-width: 991px) {
  body.of-body .navbar > .container {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  /* ⚠ Bootstrap applique « margin: 0 -15px » à .navbar-header : sans cette
     annulation, l'en-tête ressort du conteneur et le bouton se retrouve à
     7 px du bord de l'écran, quelle que soit la marge du conteneur. */
  body.of-body .navbar-header {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }
  /* « margin-right: auto » colle le logo à gauche et pousse le bouton à
     droite, sans dépendre de la répartition de « space-between » — que les
     marges du thème faussaient (logo repoussé à 177 px au lieu de 22). */
  body.of-body .navbar-brand {
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.of-body .navbar-toggle { margin-left: 0 !important; margin-right: 0 !important; }
}

body.of-body.blog .of, body.of-body.single .of, body.of-body.archive .of,
body.of-body.category .of, body.of-body.tag .of, body.of-body.search .of,
body.of-body.error404 .of { margin-top: 68px; }

/* Montée en taille sur les grands écrans.
   ⚠ Ce bloc doit rester APRÈS les règles de base : à spécificité égale et avec
   « !important » des deux côtés, c'est la dernière déclaration qui gagne.
   Placé avant, il était purement et simplement ignoré. */
@media (min-width: 1500px) {
  /* Le conteneur du thème est plafonné à 1170 px : avec des entrées plus
     grandes, le menu débordait et la barre passait à 121 px sur deux lignes.
     On élargit la barre ET le contenu, pour qu'ils restent alignés. */
  body.of-body .navbar > .container { width: 100% !important; max-width: 1460px !important; }
  .of__large { max-width: 1460px; }

  /* la barre doit grandir avec le logo, sinon il déborde par le bas */
  body.of-body .navbar { min-height: 78px !important; }
  body.of-body .navbar-brand { display: flex !important; align-items: center; height: 78px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  body.of-body.blog .of, body.of-body.single .of, body.of-body.archive .of,
  body.of-body.category .of, body.of-body.tag .of, body.of-body.search .of,
  body.of-body.error404 .of { margin-top: 78px; }

  body.of-body .logo img,
  body.of-body .navbar-brand img,
  body.of-body .site-logo img { height: 58px !important; }

  body.of-body .navbar-nav > li > a,
  body.of-body .nav > li > a {
    font-size: 17px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  body.of-body .menu-item.of-cta > a {
    height: 48px; line-height: 48px !important;
    padding: 0 30px !important;
    font-size: 15px !important;
  }
  body.of-body .dropdown-menu,
  body.of-body .sub-menu { width: 340px !important; min-width: 340px !important; padding: 14px !important; }
  body.of-body .dropdown-menu > li > a,
  body.of-body .sub-menu > li > a { font-size: 16px !important; padding: 15px 18px !important; }
}

@media (min-width: 1900px) {
  body.of-body .navbar > .container { width: 100% !important; max-width: 1680px !important; }
  .of__large { max-width: 1680px; }

  body.of-body .navbar { min-height: 90px !important; }
  body.of-body .navbar-brand { display: flex !important; align-items: center; height: 90px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  body.of-body.blog .of, body.of-body.single .of, body.of-body.archive .of,
  body.of-body.category .of, body.of-body.tag .of, body.of-body.search .of,
  body.of-body.error404 .of { margin-top: 90px; }

  body.of-body .logo img,
  body.of-body .navbar-brand img,
  body.of-body .site-logo img { height: 66px !important; }

  body.of-body .navbar-nav > li > a,
  body.of-body .nav > li > a {
    font-size: 19px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  body.of-body .menu-item.of-cta > a {
    height: 54px; line-height: 54px !important;
    padding: 0 36px !important;
    font-size: 17px !important;
  }
  body.of-body .dropdown-menu,
  body.of-body .sub-menu { width: 390px !important; min-width: 390px !important; padding: 16px !important; }
  body.of-body .dropdown-menu > li > a,
  body.of-body .sub-menu > li > a { font-size: 17px !important; padding: 17px 20px !important; }
}


/* --- 03. Hero plein écran ----------------------------------------------- */

.of__hero {
  position: relative;
  min-height: min(92vh, 900px);
  display: flex; align-items: center;
  padding: 130px 24px 96px;
  overflow: hidden;
  background: var(--of-nuit);
}

.of__hero-fond {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center 28%;
  filter: saturate(.72) contrast(1.04);
  transform: scale(1.06);
}
.of__hero-voile {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(10,12,16,.97) 0%, rgba(10,12,16,.90) 42%, rgba(10,12,16,.55) 72%, rgba(10,12,16,.30) 100%),
    radial-gradient(1200px 620px at 78% 24%, rgba(61,220,151,.16), transparent 68%);
}
.of__hero-grille {
  position: absolute; inset: 0; z-index: 1; opacity: .35;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(circle at 50% 42%, #000 22%, transparent 74%);
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 22%, transparent 74%);
}
.of__hero-contenu { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; width: 100%; }
.of__hero-texte { max-width: 830px; }

.of__badge {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 9px 20px 9px 14px; border-radius: 100px;
  background: rgba(61,220,151,.10);
  border: 1px solid var(--of-bord);
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: var(--of-or-clair); margin-bottom: 30px;
}
.of__pastille {
  width: 8px; height: 8px; border-radius: 50%; background: var(--of-or);
  box-shadow: 0 0 0 0 rgba(61,220,151,.65);
  animation: otPouls 2.4s infinite;
}
@keyframes otPouls {
  0%   { box-shadow: 0 0 0 0 rgba(61,220,151,.60); }
  70%  { box-shadow: 0 0 0 11px rgba(61,220,151,0); }
  100% { box-shadow: 0 0 0 0 rgba(61,220,151,0); }
}

.of__hero h1 { margin-bottom: 26px; }
.of__hero .of__chapo { font-size: clamp(17.6px, 1.6vw, 20.5px); color: #B7C1CE; max-width: 60ch; }

/* mot qui tourne */
.of__rotatif { display: inline-block; position: relative; min-width: 2ch; }
.of__rotatif span {
  display: inline-block;
  background: var(--of-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: otMonte .55s cubic-bezier(.2,.8,.3,1);
}
@keyframes otMonte {
  from { opacity: 0; transform: translateY(.42em) rotateX(-40deg); }
  to   { opacity: 1; transform: none; }
}

/* repères sous le hero */
.of__reperes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 1px; margin-top: 64px;
  background: var(--of-bord-2);
  border: 1px solid var(--of-bord-2);
  border-radius: var(--of-r);
  overflow: hidden;
}
.of__repere { background: rgba(16,19,26,.72); padding: 26px 24px; backdrop-filter: blur(6px); }
.of__repere b {
  display: block; font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(26.4px, 2.6vw, 35.2px); font-weight: 800;
  background: var(--of-grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1.1; margin-bottom: 5px;
}
.of__repere small { font-size: 13.1px; color: var(--of-texte-2); letter-spacing: .03em; }


/* --- 04. Bandeau de confiance ------------------------------------------- */

.of__confiance {
  border-top: 1px solid var(--of-bord-2);
  border-bottom: 1px solid var(--of-bord-2);
  background: var(--of-nuit-2);
  padding: 30px 24px;
  overflow: hidden;
}
.of__defile {
  display: flex; gap: 58px; align-items: center;
  width: max-content;
  animation: otDefile 38s linear infinite;
}
.of__confiance:hover .of__defile { animation-play-state: paused; }
@keyframes otDefile { to { transform: translateX(-50%); } }
.of__defile span {
  font-size: 14.7px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--of-texte-2); white-space: nowrap;
}
.of__defile span::before { content: '◆'; color: var(--of-or); margin-right: 14px; font-size: 9.9px; vertical-align: middle; }


/* --- 05. Expertises (6 pôles) ------------------------------------------- */

.of__grille-3 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(322px, 1fr));
  gap: 26px; margin-top: 58px;
}

.of__pole {
  position: relative; overflow: hidden;
  border-radius: var(--of-r);
  border: 1px solid var(--of-bord-2);
  background: var(--of-carte);
  transition: transform .4s cubic-bezier(.2,.8,.3,1), border-color .35s, box-shadow .4s;
  display: flex; flex-direction: column;
}
.of__pole:hover {
  transform: translateY(-7px);
  border-color: var(--of-bord);
  box-shadow: var(--of-ombre);
}
.of__pole-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.of__pole-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.62) brightness(.78);
  transition: transform .8s cubic-bezier(.2,.8,.3,1), filter .5s;
}
.of__pole:hover .of__pole-img img { transform: scale(1.07); filter: saturate(.9) brightness(.9); }
.of__pole-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--of-carte) 2%, rgba(22,27,36,.42) 46%, transparent 100%);
}
.of__pole-num {
  position: absolute; top: 16px; right: 18px; z-index: 2;
  font-family: 'Space Grotesk', sans-serif; font-size: 38.4px; font-weight: 800;
  color: rgba(255,255,255,.14); line-height: 1;
}
.of__pole-corps { padding: 26px 28px 30px; flex: 1; display: flex; flex-direction: column; }
.of__pole h3 { margin-bottom: 12px; font-size: 20.5px; }
.of__pole p { font-size: 15.2px; color: var(--of-texte-2); margin-bottom: 18px; }

.of__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; }
.of__tag {
  font-size: 12.1px; font-weight: 600; letter-spacing: .02em;
  padding: 5px 11px; border-radius: 100px;
  background: rgba(61,220,151,.09);
  border: 1px solid var(--of-bord);
  color: var(--of-or-clair);
}


/* --- 06. Méthode en 3 temps --------------------------------------------- */

.of__etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 60px; }

.of__etape { position: relative; padding-top: 34px; }
.of__etape::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--of-bord-2);
}
.of__etape::after {
  content: ''; position: absolute; top: 0; left: 0; height: 2px; width: 0;
  background: var(--of-grad);
  transition: width 1.1s cubic-bezier(.2,.8,.3,1);
}
.of__etape.of-vu::after { width: 100%; }

.of__etape-num {
  font-family: 'Space Grotesk', sans-serif; font-size: 12.8px; font-weight: 700;
  letter-spacing: .16em; color: var(--of-or); margin-bottom: 14px; display: block;
}
.of__etape h3 { margin-bottom: 12px; }
.of__etape p { font-size: 15.4px; color: var(--of-texte-2); }
.of__etape-img {
  margin-top: 22px; border-radius: var(--of-r-s); overflow: hidden;
  aspect-ratio: 4 / 3; border: 1px solid var(--of-bord-2);
}
.of__etape-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.6) brightness(.8); transition: filter .5s, transform .8s;
}
.of__etape:hover .of__etape-img img { filter: saturate(.9) brightness(.95); transform: scale(1.05); }


/* --- 07. Chiffres et preuves -------------------------------------------- */

.of__preuves {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 26px; margin-top: 54px;
}
.of__preuve {
  text-align: center; padding: 38px 24px;
  border: 1px solid var(--of-bord-2); border-radius: var(--of-r);
  background: var(--of-grad-doux);
  transition: border-color .35s, transform .35s;
}
.of__preuve:hover { border-color: var(--of-bord); transform: translateY(-5px); }
.of__preuve b {
  display: block; font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(35.2px, 4vw, 49.6px); font-weight: 800; line-height: 1;
  background: var(--of-grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}
.of__preuve small { font-size: 14.1px; color: var(--of-texte-2); }

/* bloc "engagement" en deux colonnes */
.of__duo {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(34px, 5vw, 76px);
  align-items: center;
}
.of__duo-img {
  border-radius: var(--of-r); overflow: hidden; position: relative;
  border: 1px solid var(--of-bord-2);
  box-shadow: var(--of-ombre);
}
.of__duo-img img { width: 100%; filter: saturate(.7) brightness(.86); }
.of__duo-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(140deg, rgba(61,220,151,.10), transparent 58%);
}

.of__liste-or { list-style: none; padding: 0; margin: 28px 0 0; }
.of__liste-or li {
  position: relative; padding-left: 36px; margin-bottom: 16px;
  color: var(--of-texte); font-size: 15.7px;
}
.of__liste-or li::before {
  content: ''; position: absolute; left: 0; top: .42em;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--of-grad-doux);
  border: 1px solid var(--of-bord);
}
.of__liste-or li::after {
  content: ''; position: absolute; left: 6.5px; top: .72em;
  width: 6px; height: 10px;
  border-right: 2px solid var(--of-or); border-bottom: 2px solid var(--of-or);
  transform: rotate(42deg);
}
.of__liste-or li b { color: var(--of-ivoire); font-weight: 650; }


/* --- 08. Témoignages ----------------------------------------------------- */

.of__avis { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; margin-top: 56px; }
.of__avis-carte {
  padding: 34px 30px; border-radius: var(--of-r);
  border: 1px solid var(--of-bord-2); background: var(--of-carte);
  display: flex; flex-direction: column;
  transition: border-color .35s, transform .35s;
}
.of__avis-carte:hover { border-color: var(--of-bord); transform: translateY(-5px); }
.of__avis-carte::before {
  content: '”'; font-family: Georgia, serif; font-size: 70.4px; line-height: .6;
  color: var(--of-or); opacity: .4; margin-bottom: 14px;
}
.of__avis-carte p { font-size: 15.7px; color: var(--of-texte); font-style: italic; flex: 1; }
.of__avis-qui { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--of-bord-2); }
.of__avis-qui img {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--of-bord); flex: 0 0 auto;
}
.of__avis-qui b { display: block; color: var(--of-ivoire); font-size: 15.2px; font-weight: 650; }
.of__avis-qui small { color: var(--of-texte-2); font-size: 13.4px; }


/* --- 09. Double appel à l'action ---------------------------------------- */

.of__duo-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.of__cta-carte {
  position: relative; overflow: hidden; border-radius: var(--of-r);
  border: 1px solid var(--of-bord-2);
  padding: clamp(38px, 4.4vw, 62px);
  min-height: 330px; display: flex; flex-direction: column; justify-content: flex-end;
  transition: border-color .35s, transform .4s;
}
.of__cta-carte:hover { border-color: var(--of-bord); transform: translateY(-6px); }
.of__cta-fond {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  filter: saturate(.55) brightness(.42);
  transition: transform .9s cubic-bezier(.2,.8,.3,1);
}
.of__cta-carte:hover .of__cta-fond { transform: scale(1.07); }
.of__cta-carte::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(10,12,16,.96) 8%, rgba(10,12,16,.72) 52%, rgba(10,12,16,.42) 100%);
}
.of__cta-carte > *:not(.of__cta-fond) { position: relative; z-index: 2; }
.of__cta-carte h3 { font-size: clamp(22.4px, 2.2vw, 29.6px); margin-bottom: 12px; }
.of__cta-carte p { color: #B7C1CE; font-size: 15.5px; margin-bottom: 24px; }

/* bandeau final */
.of__final {
  text-align: center;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(61,220,151,.15), transparent 70%),
    var(--of-nuit-2);
  border-top: 1px solid var(--of-bord-2);
}


/* --- 10. Questions fréquentes -------------------------------------------- */

.of__faq { max-width: 880px; margin: 52px auto 0; }
.of__q {
  border: 1px solid var(--of-bord-2); border-radius: var(--of-r-s);
  background: var(--of-carte); margin-bottom: 12px; overflow: hidden;
  transition: border-color .3s;
}
.of__q.of-ouvert { border-color: var(--of-bord); }
.of__q-tete {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 22px 60px 22px 26px; position: relative;
  font-family: 'Space Grotesk', sans-serif; font-size: 16.5px; font-weight: 650;
  color: var(--of-ivoire); line-height: 1.45;
}
.of__q-tete::after {
  content: ''; position: absolute; right: 26px; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2px solid var(--of-or); border-bottom: 2px solid var(--of-or);
  transform: rotate(45deg); transition: transform .33s;
}
.of__q.of-ouvert .of__q-tete::after { transform: rotate(-135deg); margin-top: -3px; }
.of__q-corps { max-height: 0; overflow: hidden; transition: max-height .42s cubic-bezier(.2,.8,.3,1); }
.of__q-corps div { padding: 0 26px 24px; color: var(--of-texte-2); font-size: 15.4px; }


/* --- 11. Formulaires ----------------------------------------------------- */

.of__form {
  background: var(--of-carte); border: 1px solid var(--of-bord-2);
  border-radius: var(--of-r); padding: clamp(28px, 3.4vw, 46px);
  box-shadow: var(--of-ombre);
}
.of__form .wpcf7-form { margin: 0; }
.of__form p { margin-bottom: 18px; }
.of__form label {
  display: block; font-size: 13.9px; font-weight: 600; letter-spacing: .02em;
  color: var(--of-ivoire); margin-bottom: 8px;
}
.of__form input[type=text],
.of__form input[type=email],
.of__form input[type=tel],
.of__form input[type=url],
.of__form input[type=number],
.of__form select,
.of__form textarea {
  width: 100%; padding: 13px 16px;
  background: var(--of-nuit-2) !important;
  border: 1px solid var(--of-bord-2) !important;
  border-radius: 10px !important;
  color: var(--of-ivoire) !important;
  font-family: 'Inter', sans-serif; font-size: 15.2px;
  transition: border-color .25s, box-shadow .25s;
}
.of__form input:focus,
.of__form select:focus,
.of__form textarea:focus {
  outline: 0;
  border-color: var(--of-or) !important;
  box-shadow: 0 0 0 3px rgba(61,220,151,.14);
}
.of__form textarea { min-height: 148px; resize: vertical; }
.of__form input::placeholder, .of__form textarea::placeholder { color: #66748A; }
.of__form select option { background: #10131A; color: #F2F5F8; }

.of__form input[type=submit],
.of__form .wpcf7-submit {
  background: var(--of-grad) !important; color: #10131A !important;
  border: 0 !important; border-radius: 100px !important;
  padding: 15px 38px !important; font-weight: 700 !important; font-size: 15.4px !important;
  cursor: pointer; width: auto !important;
  box-shadow: var(--of-ombre-or);
  transition: transform .28s, box-shadow .28s;
}
.of__form input[type=submit]:hover { transform: translateY(-3px); box-shadow: 0 24px 56px -12px rgba(61,220,151,.52); }

.of__form .wpcf7-not-valid-tip { color: #FF8A80; font-size: 13.1px; margin-top: 6px; }
.of__form .wpcf7-response-output {
  border-radius: 10px !important; border-color: var(--of-bord) !important;
  color: var(--of-ivoire) !important; padding: 14px 18px !important; margin: 18px 0 0 !important;
}
.of__form-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

/* colonne contact à côté du formulaire */
.of__contact-grille { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(30px, 4vw, 62px); align-items: start; }
.of__fiche { margin-bottom: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--of-bord-2); }
.of__fiche:last-child { border-bottom: 0; }
.of__fiche b { display: block; color: var(--of-or); font-size: 12.8px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.of__fiche span, .of__fiche a { color: var(--of-ivoire); font-size: 16.3px; }


/* --- 11b. Simulateur de recherche ---------------------------------------- */

.of__sim {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 0;
  border: 1px solid var(--of-bord); border-radius: var(--of-r);
  overflow: hidden; margin-top: 52px;
  background: var(--of-carte);
  box-shadow: var(--of-ombre);
}
.of__sim-reglages { padding: clamp(28px, 3.2vw, 44px); border-right: 1px solid var(--of-bord-2); }
.of__sim-reglages h3 { font-size: 19.5px; margin-bottom: 8px; }
.of__sim-reglages > p { font-size: 14.7px; color: var(--of-texte-2); margin-bottom: 26px; }
.of__sim-champ { margin-bottom: 20px; }
.of__sim-champ label {
  display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--of-or); margin-bottom: 9px;
}
.of__sim-champ select {
  width: 100%; padding: 13px 16px;
  background: var(--of-nuit-2); border: 1px solid var(--of-bord-2);
  border-radius: 10px; color: var(--of-ivoire);
  font-family: 'Inter', sans-serif; font-size: 15.2px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #3DDC97 50%), linear-gradient(135deg, #3DDC97 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  transition: border-color .25s;
}
.of__sim-champ select:focus { outline: 0; border-color: var(--of-or); }
.of__sim-champ select option { background: #10131A; color: #F2F5F8; }

.of__sim-resultat {
  padding: clamp(28px, 3.2vw, 44px);
  background: var(--of-grad-doux);
  display: flex; flex-direction: column; justify-content: center;
}
.of__sim-ligne {
  padding: 15px 0; border-bottom: 1px solid var(--of-bord-2);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
}
.of__sim-ligne:last-child { border-bottom: 0; }
.of__sim-ligne small {
  flex: 0 0 165px; font-size: 12.6px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--of-texte-2);
}
.of__sim-ligne b {
  font-family: 'Space Grotesk', sans-serif; font-size: 19.5px; font-weight: 700;
  color: var(--of-ivoire);
}
.of__sim-ligne em { font-style: normal; font-size: 13.1px; color: var(--of-texte-2); width: 100%; padding-left: 179px; }
.of__sim-note { font-size: 13.1px; color: var(--of-texte-2); margin: 20px 0 0; }

@media (max-width: 767px) {
  .of__sim { grid-template-columns: 1fr; }
  .of__sim-reglages { border-right: 0; border-bottom: 1px solid var(--of-bord-2); }
  .of__sim-ligne small { flex: 1 1 100%; }
  .of__sim-ligne em { padding-left: 0; }
}

/* en-tête condensé au défilement */
body.of-body header.of-condense,
body.of-body .main-header.of-condense,
body.of-body .navbar.of-condense {
  background: rgba(10, 12, 16, .97) !important;
  box-shadow: 0 10px 34px -14px rgba(0, 0, 0, .8);
}


/* --- 12. Contenu de page intérieure -------------------------------------- */

.of__banniere {
  position: relative; padding: 148px 24px 84px; overflow: hidden;
  border-bottom: 1px solid var(--of-bord-2);
}
.of__banniere-fond {
  position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center 34%;
  filter: saturate(.55) brightness(.36);
}
.of__banniere::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(95deg, rgba(10,12,16,.95) 12%, rgba(10,12,16,.70) 100%),
    radial-gradient(760px 340px at 82% 10%, rgba(61,220,151,.15), transparent 70%);
}
.of__banniere > .of__large { position: relative; z-index: 2; }
.of__banniere h1 { margin-bottom: 18px; }
.of__banniere .of__chapo { margin-bottom: 0; }

.of__prose h2 { margin-top: 2.1em; }
.of__prose h2:first-child { margin-top: 0; }
.of__prose h3 { margin-top: 1.8em; color: var(--of-or-clair); }
.of__prose ul li::marker { color: var(--of-or); }
.of__prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 15px; }
.of__prose th, .of__prose td { padding: 13px 16px; border: 1px solid var(--of-bord-2); text-align: left; }
.of__prose th { background: var(--of-carte); color: var(--of-ivoire); font-weight: 650; }

.of__encadre {
  background: var(--of-grad-doux); border: 1px solid var(--of-bord);
  border-radius: var(--of-r-s); padding: 26px 30px; margin: 32px 0;
}
.of__encadre p:last-child { margin-bottom: 0; }


/* --- 12a. Fil de retour -------------------------------------------------- */

.of__fil {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  margin-bottom: 22px;
  font-size: 13.8px;
}
.of__fil a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px; border-radius: 100px;
  border: 1px solid var(--of-bord-2);
  background: rgba(255, 255, 255, .035);
  color: var(--of-texte-2) !important;
  font-weight: 550;
  transition: border-color .25s, background .25s, color .25s;
}
.of__fil a:hover {
  border-color: var(--of-bord);
  background: rgba(61, 220, 151, .10);
  color: var(--of-or-clair) !important;
}
/* la flèche recule légèrement au survol, pour dire « on revient en arrière » */
.of__fil a span { display: inline-block; transition: transform .25s; }
.of__fil a:hover span { transform: translateX(-3px); }
.of__fil-sep { color: var(--of-texte-2); opacity: .5; }

@media (max-width: 767px) {
  .of__fil { font-size: 13.1px; margin-bottom: 18px; }
  .of__fil a { padding: 6px 13px; }
}


/* --- 12b. Blog : liste, filtres, pagination ------------------------------ */

/* Le gabarit du thème ajoute une colonne latérale vide sur nos pages : inutile. */
body.of-body.blog #blog .col-sm-4,
body.of-body.single #blog .col-sm-4,
body.of-body.archive #blog .col-sm-4 { display: none !important; }

.of__filtres {
  border-top: 1px solid var(--of-bord-2);
  border-bottom: 1px solid var(--of-bord-2);
  background: var(--of-nuit-2);
  padding: 20px 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.of__filtres::-webkit-scrollbar { display: none; }
.of__filtres .of__large { display: flex; gap: 10px; white-space: nowrap; }

.of__filtre {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 100px;
  border: 1px solid var(--of-bord-2);
  background: rgba(255, 255, 255, .03);
  color: var(--of-texte) !important;
  font-size: 13.9px; font-weight: 600;
  transition: border-color .25s, background .25s, color .25s;
}
.of__filtre:hover { border-color: var(--of-bord); color: var(--of-or-clair) !important; }
.of__filtre.of-actif {
  background: var(--of-grad-doux);
  border-color: var(--of-bord);
  color: var(--of-or-clair) !important;
}
.of__filtre span {
  font-size: 11.8px; font-weight: 700;
  padding: 1px 7px; border-radius: 100px;
  background: rgba(61, 220, 151, .16); color: var(--of-or-clair);
}

.of__articles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 26px;
}
.of__articles--trois { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); margin-top: 48px; }

.of__art {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--of-bord-2); border-radius: var(--of-r);
  background: var(--of-carte);
  transition: transform .4s cubic-bezier(.2,.8,.3,1), border-color .35s, box-shadow .4s;
}
.of__art:hover {
  transform: translateY(-7px);
  border-color: var(--of-bord);
  box-shadow: var(--of-ombre);
}

.of__art-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; position: relative; }
.of__art-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.62) brightness(.78);
  transition: transform .8s cubic-bezier(.2,.8,.3,1), filter .5s;
}
.of__art:hover .of__art-img img { transform: scale(1.06); filter: saturate(.9) brightness(.9); }
.of__art-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--of-carte) 1%, transparent 58%);
}

.of__art-corps { padding: 24px 28px 28px; display: flex; flex-direction: column; flex: 1; }

.of__art-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font-size: 12.5px; color: var(--of-texte-2); margin-bottom: 14px;
  letter-spacing: .03em;
}
.of__art-cat {
  padding: 4px 11px; border-radius: 100px;
  background: rgba(61, 220, 151, .11);
  border: 1px solid var(--of-bord);
  color: var(--of-or-clair) !important;
  font-weight: 650; font-size: 11.8px;
  text-transform: uppercase; letter-spacing: .07em;
}
.of__art-duree::before { content: '◆ '; color: var(--of-or); font-size: 9.6px; vertical-align: middle; }

.of__art h2 {
  font-size: 19.8px; line-height: 1.32; margin-bottom: 12px;
}
.of__art h2 a { color: var(--of-ivoire) !important; transition: color .25s; }
.of__art h2 a:hover { color: var(--of-or-clair) !important; }
.of__art p { font-size: 15px; color: var(--of-texte-2); margin-bottom: 18px; }

.of__art-lien {
  margin-top: auto; align-self: flex-start;
  font-size: 14.1px; font-weight: 650; color: var(--of-or) !important;
}
.of__art-lien span { display: inline-block; transition: transform .25s; }
.of__art:hover .of__art-lien span { transform: translateX(5px); }

/* Article mis en avant : pleine largeur, image à gauche */
@media (min-width: 900px) {
  .of__art--vedette {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: stretch;
  }
  /* La colonne de texte est courte : sans plafond, l'image imposerait sa
     hauteur à toute la carte et laisserait un grand vide à côté du texte. */
  .of__art--vedette { max-height: 400px; }
  .of__art--vedette .of__art-img { flex: 0 0 50%; aspect-ratio: auto; }
  .of__art--vedette .of__art-img::after {
    background: linear-gradient(to right, transparent 55%, var(--of-carte) 99%);
  }
  .of__art--vedette .of__art-corps { padding: clamp(30px, 3.4vw, 50px); justify-content: center; }
  /* « margin-top:auto » colle le lien en bas de carte : utile sur une grille
     de cartes de même hauteur, mais il creuse un vide ici. */
  .of__art--vedette .of__art-lien { margin-top: 6px; }
  .of__art--vedette h2 { font-size: clamp(24px, 2.3vw, 32px); }
  .of__art--vedette p { font-size: 16px; }
}

.of__pagination {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-top: 54px;
}
.of__pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 15px;
  border: 1px solid var(--of-bord-2); border-radius: 12px;
  color: var(--of-texte) !important; font-size: 14.7px; font-weight: 600;
  transition: border-color .25s, background .25s, color .25s;
}
.of__pagination .page-numbers:hover {
  border-color: var(--of-bord); background: rgba(61, 220, 151, .09);
  color: var(--of-or-clair) !important;
}
.of__pagination .page-numbers.current {
  background: var(--of-grad); border-color: transparent;
  color: #10131A !important;
}


/* --- 12c. Article seul ---------------------------------------------------- */

.of__banniere--article { padding-top: 156px; padding-bottom: 76px; }
.of__banniere--article h1 { font-size: clamp(32px, 3.9vw, 51.2px); max-width: 22ch; }
.of__art-meta--haut { margin-bottom: 22px; font-size: 13.4px; }

.of__article-corps { font-size: 16.6px; line-height: 1.78; }
.of__article-corps > p:first-of-type {
  font-size: 18.2px; color: var(--of-ivoire);
}
.of__article-corps h2 {
  font-size: clamp(23.2px, 2.2vw, 29.6px);
  margin-top: 2em; padding-top: .7em;
  border-top: 1px solid var(--of-bord-2);
}
.of__article-corps h3 { font-size: 18.9px; color: var(--of-or-clair); margin-top: 1.7em; }
.of__article-corps blockquote {
  margin: 34px 0; padding: 4px 0 4px 28px;
  border-left: 3px solid var(--of-or);
  font-size: 17.6px; color: var(--of-ivoire); font-style: italic;
}
.of__article-corps blockquote p:last-child { margin-bottom: 0; }

.of__art-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 40px 0 0; }

.of__signature {
  display: flex; gap: 18px; align-items: flex-start;
  margin-top: 40px; padding: 26px 28px;
  border: 1px solid var(--of-bord); border-radius: var(--of-r);
  background: var(--of-grad-doux);
}
.of__signature img { flex: 0 0 auto; border-radius: 12px; }
.of__signature b { display: block; color: var(--of-ivoire); margin-bottom: 5px; font-size: 15.7px; }
.of__signature small { color: var(--of-texte-2); font-size: 13.9px; line-height: 1.6; display: block; }

@media (max-width: 767px) {
  .of__art-corps { padding: 20px 22px 24px; }
  .of__articles { gap: 20px; }
  .of__banniere--article { padding-top: 122px; padding-bottom: 54px; }
  .of__signature { flex-direction: column; gap: 14px; }
}


/* --- 13. Pied de page ---------------------------------------------------- */

.of-pied {
  background: var(--of-nuit, #0A0C10);
  border-top: 1px solid rgba(61,220,151,.18);
  color: #8B95A7;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  padding: 72px 24px 0;
  width: 100vw; margin-left: calc(50% - 50vw);
}
.of-pied__large { max-width: 1240px; margin: 0 auto; }
.of-pied__cols {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 46px; padding-bottom: 54px;
}
.of-pied__logo { height: 52px; width: auto; margin-bottom: 20px; }
.of-pied p { font-size: 14.9px; line-height: 1.75; margin: 0 0 14px; }
.of-pied h4 {
  color: #F2F5F8; font-family: 'Space Grotesk', sans-serif;
  font-size: 13.1px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 20px;
}
.of-pied ul { list-style: none; margin: 0; padding: 0; }
.of-pied li { margin-bottom: 11px; }
.of-pied a { color: #8B95A7; font-size: 14.9px; text-decoration: none; transition: color .24s, padding-left .24s; }
.of-pied a:hover { color: #3DDC97; padding-left: 5px; }
.of-pied__bas {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 24px 0 28px;
  display: flex; flex-wrap: wrap; gap: 16px 28px; justify-content: space-between; align-items: center;
  font-size: 13.8px;
}
.of-pied__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; }


/* --- 13b. Barre de progression de lecture -------------------------------- */

.of-progres {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 99999; pointer-events: none; background: transparent;
}
.of-progres span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #22D3EE, #3DDC97 45%, #7CF5C0);
  box-shadow: 0 0 14px rgba(61, 220, 151, .65);
  transition: width .1s linear;
}


/* --- 13c. Calculateur du coût d'un recrutement raté ---------------------- */

.of__calc {
  display: grid; grid-template-columns: .92fr 1.08fr;
  border: 1px solid var(--of-bord); border-radius: var(--of-r);
  overflow: hidden; background: var(--of-carte);
  box-shadow: var(--of-ombre); margin-top: 52px;
}

.of__calc-reglages { padding: clamp(28px, 3.4vw, 46px); border-right: 1px solid var(--of-bord-2); }
.of__calc-reglages h3 { font-size: 19.8px; margin-bottom: 8px; }
.of__calc-reglages > p { font-size: 14.7px; color: var(--of-texte-2); margin-bottom: 30px; }

.of__curseur { margin-bottom: 28px; }
.of__curseur-tete {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px; gap: 12px;
}
.of__curseur-tete label {
  font-size: 12.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--of-or);
}
.of__curseur-tete output {
  font-family: 'Space Grotesk', sans-serif; font-size: 17.9px; font-weight: 700;
  color: var(--of-ivoire); white-space: nowrap;
}

.of__curseur input[type=range] {
  width: 100%; height: 5px; appearance: none; -webkit-appearance: none;
  background: linear-gradient(90deg, var(--of-or) 0%, var(--of-or) var(--of-avance, 40%),
              rgba(255,255,255,.11) var(--of-avance, 40%), rgba(255,255,255,.11) 100%);
  border-radius: 100px; outline: 0; cursor: pointer;
}
.of__curseur input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(140deg, #7CF5C0, #22D3EE);
  border: 3px solid #161B24; cursor: grab;
  box-shadow: 0 3px 12px rgba(61,220,151,.55);
  transition: transform .2s;
}
.of__curseur input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.18); }
.of__curseur input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(140deg, #7CF5C0, #22D3EE);
  border: 3px solid #161B24; cursor: grab;
  box-shadow: 0 3px 12px rgba(61,220,151,.55);
}
.of__curseur small { display: block; margin-top: 9px; font-size: 12.8px; color: var(--of-texte-2); }

.of__calc-total {
  padding: clamp(28px, 3.4vw, 46px);
  background:
    radial-gradient(700px 320px at 80% 0%, rgba(61,220,151,.13), transparent 70%),
    var(--of-nuit-2);
  display: flex; flex-direction: column; justify-content: center;
}
.of__calc-chiffre {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(41.6px, 5.6vw, 65.6px); font-weight: 800; line-height: 1;
  background: var(--of-grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
}
.of__calc-legende {
  font-size: 13.1px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--of-texte-2); margin-bottom: 30px;
}

.of__calc-barre {
  display: flex; height: 13px; border-radius: 100px; overflow: hidden;
  margin-bottom: 26px; background: rgba(255,255,255,.06);
}
.of__calc-barre i {
  display: block; height: 100%;
  transition: width .5s cubic-bezier(.2,.8,.3,1);
}
.of__calc-barre i:nth-child(1) { background: #7CF5C0; }
.of__calc-barre i:nth-child(2) { background: #3DDC97; }
.of__calc-barre i:nth-child(3) { background: #22D3EE; }
.of__calc-barre i:nth-child(4) { background: #178FA3; }

.of__calc-poste {
  display: flex; align-items: baseline; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--of-bord-2);
  font-size: 14.9px;
}
.of__calc-poste:last-of-type { border-bottom: 0; }
.of__calc-puce { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.of__calc-poste span { flex: 1; color: var(--of-texte-2); }
.of__calc-poste b { font-family: 'Space Grotesk', sans-serif; color: var(--of-ivoire); white-space: nowrap; }

.of__calc-note {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--of-bord-2);
  font-size: 13.1px; color: var(--of-texte-2);
}

@media (max-width: 991px) {
  .of__calc { grid-template-columns: 1fr; }
  .of__calc-reglages { border-right: 0; border-bottom: 1px solid var(--of-bord-2); }
}


/* --- 14. Animations ------------------------------------------------------ */

.of-anim { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.8,.3,1), transform .8s cubic-bezier(.2,.8,.3,1); }
.of-anim.of-vu { opacity: 1; transform: none; }
.of-anim--1 { transition-delay: .08s; }
.of-anim--2 { transition-delay: .16s; }
.of-anim--3 { transition-delay: .24s; }
.of-anim--4 { transition-delay: .32s; }
.of-anim--5 { transition-delay: .40s; }
.of-anim--6 { transition-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
  .of-anim { opacity: 1; transform: none; transition: none; }
  .of__defile { animation: none; }
  .of__pastille { animation: none; }
}


/* --- 15. Responsive ------------------------------------------------------ */

@media (max-width: 991px) {
  .of__duo,
  .of__duo-cta,
  .of__contact-grille { grid-template-columns: 1fr; }
  .of__duo-img { order: -1; }
  .of-pied__cols { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 767px) {
  .of { font-size: 16px; }

  /* ⚠ Les minimums de clamp() sont calibrés pour le bureau : à 390 px de large,
     un h1 à 40px déborde de l'écran et élargit toute la page. On redescend
     les trois niveaux de titre, et on autorise la coupure des mots longs. */
  .of h1 { font-size: clamp(29.6px, 8.2vw, 38.4px); }
  .of h2 { font-size: clamp(24px, 6.4vw, 31.2px); }
  .of h3 { font-size: 18.6px; }
  .of h1, .of h2, .of h3 { overflow-wrap: break-word; hyphens: auto; }

  .of__hero { min-height: auto; padding: 108px 20px 72px; }
  .of__zone { padding: 62px 20px; }
  .of__reperes { grid-template-columns: 1fr 1fr; margin-top: 44px; }
  .of__form-duo { grid-template-columns: 1fr; }
  .of__grille-3, .of__etapes, .of__avis { gap: 20px; }
  .of-pied__cols { grid-template-columns: 1fr; gap: 32px; }
  .of-pied { padding-top: 54px; }
  .of__btns .of__btn { width: 100%; }
  .of__banniere { padding: 118px 20px 62px; }
}

@media (max-width: 420px) {
  .of__reperes { grid-template-columns: 1fr; }
}


/* --- correctif puces (24/09) : le thème impose list-style:square et « .of ul » un padding → doubles puces --- */
.of ul.of__liste-or, .of__liste-or { list-style: none !important; padding-left: 0 !important; }
.of__liste-or li { list-style: none !important; }
.of__liste-or li::marker { content: ''; }
.of .of__contrat ul, .of .of__contrat li, .of .of__tags { list-style: none !important; }
@media (max-width: 767px) {
  .of__prose table { display: table; width: 100%; table-layout: fixed; font-size: 12.5px; }
  .of__prose th, .of__prose td { white-space: normal; padding: 8px 6px; overflow-wrap: anywhere; }
}

/* --- correctif 24/09 : le pied de page est hors de .of, ses variables CSS n'existent pas là →
   le bouton « Déposer un besoin » était invisible (fond et texte transparents). Couleurs en dur. --- */
.of-pied .of__btn--or, .of-pied .of__btn--or:hover {
  background: linear-gradient(118deg, #7CF5C0 0%, #3DDC97 45%, #22D3EE 100%) !important;
  color: #10131A !important; border-color: transparent !important;
  box-shadow: 0 18px 44px -14px rgba(61, 220, 151, .38);
}
.of-pied .of__btn--ligne { border-color: rgba(255,255,255,.4) !important; color: #FFFFFF !important; }