/* ============================================================================
   OPOLO — recrutement des métiers manuels et du bâtiment, CDI ou régie
   Design « chantier » : fond papier, noir, orange sécurité, typographie
   condensée, angles droits. Volontairement différent des trois autres sites
   (Otolo, Ofolo, ESN), qui sont sombres et arrondis.

   ⚠ TOUTES LES TAILLES SONT EN PIXELS : le thème Kolo met html à 10 px,
     un « rem » vaudrait 10 px et non 16.
   ⚠ Ne jamais poser backdrop-filter / filter / transform sur un parent de
     la barre fixe (header#header) : elle passerait sous le contenu.
   ⚠ Ne pas remettre « overflow-x: hidden » sur le body : « clip » seulement.

   SOMMAIRE
   00. Socle et jetons
   01. En-tête clair et onglets
   02. Panneau mobile
   03. Hero fendu
   04. Bandeau défilant
   05. Secteurs (blocs)
   06. CDI ou régie
   07. Méthode (jalons)
   08. Chiffres
   09. Témoignages
   10. Double appel
   11. Questions fréquentes
   12. Formulaires et fiches
   13. Pages intérieures et prose
   14. Journal
   15. Pied de page
   16. Animations
   17. Responsive
   ========================================================================= */

/* --- 00. Socle et jetons ------------------------------------------------- */

.op {
  --op-papier:   #F3F0E8;
  --op-blanc:    #FFFFFF;
  --op-encre:    #111111;
  --op-encre-2:  #3A3A3A;
  --op-gris:     #6B6B6B;
  --op-ligne:    #D9D3C4;
  --op-orange:   #FF6A13;
  --op-orange-2: #C94F05;
  --op-orange-p: #FFE3D2;
  --op-noir:     #111111;
  --op-hachures: repeating-linear-gradient(135deg, #FF6A13 0 14px, #111111 14px 28px);

  /* pleine largeur SANS compter la barre de défilement (--op-sb posée par le JS),
     sinon la page dépasse de 8 px à droite sur ordinateur et tout paraît décalé */
  width: calc(100vw - var(--op-sb, 0px)); max-width: calc(100vw - var(--op-sb, 0px));
  margin-left: calc(50% - 50vw + var(--op-sb, 0px) / 2); margin-right: calc(50% - 50vw + var(--op-sb, 0px) / 2);
  background: var(--op-papier);
  color: var(--op-encre-2);
  font-family: 'Barlow', 'Segoe UI', Arial, sans-serif;
  font-size: 17px; line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
.op *, .op *::before, .op *::after { box-sizing: border-box; }

.op h1, .op h2, .op h3, .op h4 {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  color: var(--op-encre);
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .98;
  margin: 0 0 .5em;
  font-weight: 700;
}
.op h1 { font-size: clamp(52px, 7vw, 104px); }
.op h2 { font-size: clamp(38px, 4.6vw, 64px); }
.op h3 { font-size: 26px; }
.op p  { margin: 0 0 1.1em; }
.op a  { color: var(--op-encre); text-decoration: none; }
.op img { max-width: 100%; height: auto; display: block; }
.op ul { margin: 0 0 1.2em; padding-left: 1.1em; }
.op li { margin-bottom: .45em; }

.op__zone   { padding: clamp(64px, 8vw, 120px) 24px; position: relative; }
.op__large  { max-width: 1280px; margin: 0 auto; }
.op__etroit { max-width: 840px; margin: 0 auto; }
.op__blanc  { background: var(--op-blanc); }
.op__noir   { background: var(--op-noir); color: #D7D2C5; }
.op__noir h1, .op__noir h2, .op__noir h3 { color: #FFFFFF; }
.op__noir a { color: #FFFFFF; }
.op__noir p { color: #D7D2C5; }

/* liseré hachuré en haut d'une section */
.op__hachure { border-top: 10px solid transparent; border-image: var(--op-hachures) 10; }

.op__surtitre {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--op-orange-2); margin-bottom: 18px;
}
.op__surtitre::before { content: ''; width: 28px; height: 4px; background: var(--op-orange); }
.op__noir .op__surtitre { color: var(--op-orange); }

.op__chapo { font-size: 20px; color: var(--op-gris); max-width: 60ch; }
.op__noir .op__chapo { color: #B9B3A5; }
.op__centre { text-align: center; }
.op__centre .op__chapo { margin-left: auto; margin-right: auto; }
.op__centre .op__surtitre::before { display: none; }
.op__or { color: var(--op-orange); }

/* boutons : blocs carrés */
.op__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 30px; border: 3px solid var(--op-encre);
  font-family: 'Barlow Condensed', sans-serif; font-size: 19px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  transition: transform .18s, background .18s, color .18s, border-color .18s;
}
.op__btn--or   { background: var(--op-orange); border-color: var(--op-orange); color: var(--op-encre) !important; }
.op__btn--or:hover { background: var(--op-encre); border-color: var(--op-encre); color: var(--op-orange) !important; transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--op-orange); }
.op__btn--ligne { background: transparent; color: var(--op-encre) !important; }
.op__btn--ligne:hover { background: var(--op-encre); color: #FFFFFF !important; transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--op-orange); }
.op__noir .op__btn--ligne { border-color: #FFFFFF; color: #FFFFFF !important; }
.op__noir .op__btn--ligne:hover { background: #FFFFFF; color: var(--op-encre) !important; }
.op__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.op__centre .op__btns { justify-content: center; }


/* --- 01. En-tête clair et onglets ---------------------------------------- */

body.op-body { background: #F3F0E8; overflow-x: clip !important; overflow-y: visible !important; }

body.op-body #main_banner, body.op-body .top-bar, body.op-body .header-top,
body.op-body .page-header, body.op-body .breadcrumb, body.op-body .kc-title-wrap { display: none !important; }

body.op-body header, body.op-body .header, body.op-body .main-header, body.op-body .navbar { z-index: 1200 !important; }
body.op-body .op { position: relative; z-index: 0; }

body.op-body .navbar {
  background: #FFFFFF !important;
  border-bottom: 3px solid #111111;
  min-height: 72px !important;
}
body.op-body .navbar-header { display: flex; align-items: center; justify-content: space-between; }
body.op-body .navbar-brand { display: flex !important; align-items: center; height: 72px !important; padding: 0 !important; order: 1; margin-right: auto !important; }
body.op-body .navbar-brand img { height: 52px !important; width: auto !important; }

/* onglets : blocs avec barre orange en bas */
@media (min-width: 992px) {
  body.op-body #navigation-menu { display: block; }
  body.op-body #navigation-menu .navbar-nav { display: flex !important; align-items: stretch; flex-wrap: nowrap; gap: 0; height: 72px; }
  body.op-body #navigation-menu .navbar-nav > li { float: none !important; display: flex; align-items: stretch; white-space: nowrap; }
}
body.op-body .navbar-nav > li > a,
body.op-body .nav > li > a {
  display: flex; align-items: center;
  padding: 0 16px !important;
  color: #111111 !important;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700 !important; font-size: 18px !important;
  letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 5px solid transparent;
  transition: border-color .2s, background .2s;
}
body.op-body .navbar-nav > li > a:hover,
body.op-body .navbar-nav > li.current-menu-item > a,
body.op-body .navbar-nav > li.current-menu-parent > a { border-bottom-color: #FF6A13; background: #F3F0E8; color: #111111 !important; }

/* sous-menus : bloc blanc, bordure noire, liseré orange */
body.op-body .dropdown-menu, body.op-body .sub-menu {
  background: #FFFFFF !important;
  border: 3px solid #111111 !important; border-top: 5px solid #FF6A13 !important;
  border-radius: 0 !important; padding: 8px !important;
  box-shadow: 8px 8px 0 #FF6A13 !important;
  width: 320px !important; min-width: 320px !important;
}
body.op-body .dropdown-menu > li > a, body.op-body .sub-menu > li > a {
  display: block; color: #111111 !important; padding: 13px 14px !important;
  font-family: 'Barlow Condensed', sans-serif; font-size: 18px !important; font-weight: 600 !important;
  letter-spacing: .04em; text-transform: uppercase; border-left: 4px solid transparent;
  transition: background .18s, border-color .18s;
}
body.op-body .dropdown-menu > li > a:hover, body.op-body .sub-menu > li > a:hover { background: #F3F0E8 !important; border-left-color: #FF6A13; }
/* Affichage au survol / au clavier : règle à nous, pour ne pas dépendre de
   celle du thème (opacity 0 + z-index -99 au repos dans kolo/css/style.css). */
body.op-body #navigation-menu .sub-menu { position: absolute !important; top: 100% !important; left: 0 !important; z-index: -99; opacity: 0; visibility: hidden; transition: opacity .18s, visibility .18s; }
body.op-body #navigation-menu li:hover > .sub-menu,
body.op-body #navigation-menu li:focus-within > .sub-menu,
body.op-body #navigation-menu li.op-survol > .sub-menu { opacity: 1 !important; visibility: visible !important; z-index: 999 !important; }
body.op-body #navigation-menu .sub-menu > li { display: block !important; width: 100%; float: none !important; }

/* bouton d'action : bloc noir */
body.op-body .menu-item.op-cta { margin-left: 12px; align-self: center; }
body.op-body .menu-item.op-cta > a {
  background: #111111 !important; color: #FF6A13 !important;
  height: 46px; line-height: 46px !important; padding: 0 22px !important;
  border: 0 !important; display: inline-block;
}
body.op-body .menu-item.op-cta > a:hover { background: #FF6A13 !important; color: #111111 !important; }

/* burger */
body.op-body .navbar-toggle {
  order: 2; display: none; border: 3px solid #111111 !important; border-radius: 0 !important;
  background: #FFFFFF !important; padding: 9px 10px !important; margin: 0 !important; float: none !important; cursor: pointer;
}
body.op-body .navbar-toggle .icon-bar { display: block; background: #111111 !important; width: 22px !important; height: 3px !important; }
body.op-body .navbar-toggle .icon-bar + .icon-bar { margin-top: 4px !important; }
@media (max-width: 991px) {
  body.op-body .navbar-toggle { display: block !important; }
  body.op-body #navigation-menu, body.op-body .navbar-collapse { display: none !important; }
  body.op-body .navbar > .container { padding-left: 20px !important; padding-right: 20px !important; }
  body.op-body .navbar-header { margin: 0 !important; width: 100%; }
}
/* décalage sous la barre fixe pour nos gabarits collés en haut du body */
body.op-body.blog .op, body.op-body.single .op, body.op-body.archive .op,
body.op-body.category .op, body.op-body.tag .op, body.op-body.search .op, body.op-body.error404 .op { margin-top: 75px; }

/* barre de progression : fine ligne orange */
.op-progres { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 99999; pointer-events: none; }
.op-progres span { display: block; height: 100%; width: 0; background: #FF6A13; }


/* --- 02. Panneau mobile --------------------------------------------------- */

html.op-bloque, html.op-bloque body { overflow: hidden !important; }
.op-panneau {
  position: fixed; inset: 0; z-index: 100000; background: #FFFFFF; display: flex; flex-direction: column;
  opacity: 1; transform: translateY(-8px); transition: transform .22s; font-family: 'Barlow', sans-serif;
}
.op-panneau.op-ouvert { transform: none; }
.op-panneau[hidden] { display: none !important; }
@media (min-width: 992px) { .op-panneau { display: none !important; } }
.op-panneau__tete { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; border-bottom: 3px solid #111111; }
.op-panneau__tete img { height: 46px; width: auto; }
.op-panneau__fermer { position: relative; width: 46px; height: 46px; border: 3px solid #111111; background: #FFFFFF; cursor: pointer; padding: 0; }
.op-panneau__fermer::before, .op-panneau__fermer::after { content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 3px; margin: -1.5px 0 0 -10px; background: #111111; }
.op-panneau__fermer::before { transform: rotate(45deg); } .op-panneau__fermer::after { transform: rotate(-45deg); }
.op-panneau__liste { flex: 1 1 auto; overflow-y: auto; padding: 8px 20px 36px; }
.op-panneau__ligne { display: flex; align-items: center; gap: 10px; border-bottom: 2px solid #D9D3C4; }
.op-panneau__ligne > a { flex: 1 1 auto; display: block; padding: 16px 2px; color: #111111 !important; font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.op-panneau__chevron { position: relative; width: 46px; height: 46px; border: 3px solid #111111; background: #FFFFFF; cursor: pointer; padding: 0; flex: 0 0 auto; }
.op-panneau__chevron::after { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -7px 0 0 -5px; border-right: 3px solid #FF6A13; border-bottom: 3px solid #FF6A13; transform: rotate(45deg); transition: transform .2s; }
.op-panneau__chevron.op-ouvert::after { transform: rotate(-135deg); margin-top: -2px; }
.op-panneau__tiroir { display: none; padding: 4px 0 12px 12px; }
.op-panneau__tiroir.op-ouvert { display: block; }
.op-panneau__tiroir a { display: block; padding: 12px 14px; margin-bottom: 4px; border-left: 4px solid #FF6A13; background: #F3F0E8; color: #111111 !important; font-family: 'Barlow Condensed', sans-serif; font-size: 18px; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; }
.op-panneau__ligne--cta { border-bottom: 0; margin-top: 18px; }
.op-panneau__ligne--cta > a { background: #111111; color: #FF6A13 !important; text-align: center; padding: 16px; }


/* --- 03. Hero fendu -------------------------------------------------------- */

.op__hero { position: relative; padding: 130px 24px 0; overflow: hidden; background: var(--op-papier); }
.op__hero-contenu { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: end; }
.op__hero-texte { padding-bottom: 72px; }
.op__badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px;
  background: #111111; color: #FFFFFF; font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 26px;
}
.op__pastille { width: 10px; height: 10px; background: var(--op-orange); }
.op__hero h1 { margin-bottom: 22px; }
.op__hero h1 em { font-style: normal; color: var(--op-orange); }
.op__hero .op__chapo { font-size: 21px; }
.op__hero-visuel { position: relative; align-self: stretch; min-height: 520px; }
.op__hero-visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.15) contrast(1.05); }
.op__hero-visuel::before { content: ''; position: absolute; left: -22px; top: 40px; right: 22px; bottom: -22px; background: var(--op-orange); z-index: -1; }
.op__hero-cartouche {
  position: absolute; left: -22px; bottom: 34px; background: #111111; color: #FFFFFF;
  padding: 18px 22px; border-left: 8px solid var(--op-orange); max-width: 300px;
}
.op__hero-cartouche b { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 40px; line-height: 1; color: var(--op-orange); }
.op__hero-cartouche small { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.op__rotatif { display: inline-block; color: var(--op-orange); }
.op__rotatif span { display: inline-block; animation: opMonte .45s ease-out; }
@keyframes opMonte { from { opacity: 0; transform: translateY(.3em); } to { opacity: 1; transform: none; } }

/* jalons sous le hero */
.op__reperes { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 3px solid #111111; border-bottom: 3px solid #111111; }
.op__repere { padding: 26px 24px; border-right: 3px solid #111111; background: var(--op-blanc); }
.op__repere:last-child { border-right: 0; }
.op__repere b { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 44px; line-height: 1; color: #111111; margin-bottom: 6px; }
.op__repere b span { color: var(--op-orange); }
.op__repere small { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--op-gris); }


/* --- 04. Bandeau défilant -------------------------------------------------- */

.op__confiance { background: #111111; padding: 18px 0; overflow: hidden; }
.op__defile { display: flex; gap: 56px; align-items: center; width: max-content; animation: opDefile 34s linear infinite; }
.op__confiance:hover .op__defile { animation-play-state: paused; }
@keyframes opDefile { to { transform: translateX(-50%); } }
.op__defile span { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #FFFFFF; white-space: nowrap; }
.op__defile span::before { content: '■'; color: var(--op-orange); margin-right: 16px; font-size: 12px; vertical-align: middle; }


/* --- 05. Secteurs (blocs) --------------------------------------------------- */

.op__grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 52px; border: 3px solid #111111; }
.op__pole {
  position: relative; display: flex; flex-direction: column; background: var(--op-blanc);
  border-right: 3px solid #111111; border-bottom: 3px solid #111111; text-decoration: none;
  transition: background .2s;
}
.op__pole:nth-child(3n) { border-right: 0; }
.op__pole:nth-last-child(-n+3) { border-bottom: 0; }
.op__pole:hover { background: var(--op-orange-p); }
.op__pole-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 3px solid #111111; }
.op__pole-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .35s, transform .6s; }
.op__pole:hover .op__pole-img img { filter: none; transform: scale(1.04); }
.op__pole-num { position: absolute; top: 0; left: 0; background: var(--op-orange); color: #111111; font-family: 'Barlow Condensed', sans-serif; font-size: 30px; font-weight: 700; padding: 6px 14px; line-height: 1; }
.op__pole-corps { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.op__pole h3 { margin-bottom: 8px; }
.op__pole p { font-size: 16px; color: var(--op-gris); margin-bottom: 16px; }
.op__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.op__tag { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border: 2px solid #111111; color: #111111; background: #FFFFFF; }
.op__pole-lien { margin-top: 16px; font-family: 'Barlow Condensed', sans-serif; font-size: 17px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--op-orange-2); }


/* --- 06. CDI ou régie ------------------------------------------------------- */

.op__contrats { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 52px; }
.op__contrat { padding: clamp(30px, 3.6vw, 52px); border: 3px solid #111111; position: relative; }
.op__contrat--cdi { background: #111111; color: #D7D2C5; }
.op__contrat--cdi h3, .op__contrat--cdi b { color: #FFFFFF; }
.op__contrat--regie { background: var(--op-orange); color: #111111; }
.op__contrat--regie h3, .op__contrat--regie b { color: #111111; }
.op__contrat h3 { font-size: 42px; margin-bottom: 6px; }
.op__contrat-sous { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 22px; opacity: .85; }
.op ul.op__contrat-liste, .op__contrat ul { list-style: none !important; padding: 0 !important; margin: 0 0 26px; }
.op__contrat li { list-style: none !important; }
.op__contrat li { padding: 12px 0 12px 32px; border-top: 1px solid rgba(255,255,255,.18); position: relative; font-size: 17px; }
.op__contrat--regie li { border-top-color: rgba(17,17,17,.22); }
.op__contrat li::before { content: ''; position: absolute; left: 0; top: 17px; width: 16px; height: 16px; background: var(--op-orange); }
.op__contrat--regie li::before { background: #111111; }
.op__contrat .op__btn { margin-top: 4px; }
.op__contrat--cdi .op__btn--ligne { border-color: #FFFFFF; color: #FFFFFF !important; }
.op__contrat--cdi .op__btn--ligne:hover { background: #FFFFFF; color: #111111 !important; box-shadow: 4px 4px 0 var(--op-orange); }
.op__contrat--regie .op__btn--ligne:hover { box-shadow: 4px 4px 0 #FFFFFF; }


/* --- 07. Méthode (jalons) --------------------------------------------------- */

.op__etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 52px; counter-reset: etape; }
.op__etape { position: relative; padding: 36px 30px 30px 0; border-top: 3px solid #111111; }
.op__etape + .op__etape { padding-left: 30px; }
.op__etape::before { content: ''; position: absolute; top: -3px; left: 0; width: 0; height: 3px; background: var(--op-orange); transition: width 1s ease-out; }
.op__etape.op-vu::before { width: 100%; }
.op__etape-num { display: inline-block; font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--op-orange-2); margin-bottom: 12px; }
.op__etape h3 { margin-bottom: 10px; }
.op__etape p { font-size: 16px; color: var(--op-gris); }
.op__etape-img { margin-top: 20px; aspect-ratio: 4 / 3; overflow: hidden; border: 3px solid #111111; }
.op__etape-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .35s; }
.op__etape:hover .op__etape-img img { filter: none; }


/* --- 08. Chiffres ------------------------------------------------------------ */

.op__preuves { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 46px; border: 3px solid #111111; background: var(--op-blanc); }
.op__preuve { padding: 34px 22px; text-align: center; border-right: 3px solid #111111; }
.op__preuve:last-child { border-right: 0; }
.op__preuve b { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 58px; line-height: 1; color: #111111; margin-bottom: 8px; }
.op__preuve b span { color: var(--op-orange); }
.op__preuve small { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--op-gris); }
.op__noir .op__preuves { background: transparent; border-color: #FFFFFF; }
.op__noir .op__preuve { border-right-color: #FFFFFF; }
.op__noir .op__preuve b { color: #FFFFFF; }

/* bloc en deux colonnes texte / image */
.op__duo { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.op__duo-img { position: relative; border: 3px solid #111111; }
.op__duo-img img { width: 100%; filter: grayscale(.2); }
.op__duo-img::after { content: ''; position: absolute; right: -16px; bottom: -16px; left: 16px; top: 16px; border: 3px solid var(--op-orange); z-index: -1; }
.op ul.op__liste-or, .op__liste-or { list-style: none !important; padding: 0 !important; margin: 26px 0 0; }
.op__liste-or li { list-style: none !important; }
.op__liste-or li::marker { content: ''; }
.op__liste-or li { position: relative; padding: 12px 0 12px 34px; border-top: 1px solid var(--op-ligne); font-size: 17px; }
.op__liste-or li::before { content: ''; position: absolute; left: 0; top: 18px; width: 16px; height: 16px; background: var(--op-orange); }
.op__liste-or li b { color: #111111; }
.op__noir .op__liste-or li { border-top-color: rgba(255,255,255,.16); }
.op__noir .op__liste-or li b { color: #FFFFFF; }


/* --- 09. Témoignages --------------------------------------------------------- */

.op__avis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 52px; }
.op__avis-carte { background: var(--op-blanc); border: 3px solid #111111; padding: 30px 28px 26px; display: flex; flex-direction: column; position: relative; }
.op__avis-carte::before { content: '“'; position: absolute; top: -26px; left: 22px; font-family: Georgia, serif; font-size: 80px; line-height: 1; color: var(--op-orange); background: var(--op-papier); padding: 0 8px; }
.op__avis-carte p { font-size: 17px; color: var(--op-encre-2); flex: 1; }
.op__avis-qui { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 2px solid var(--op-ligne); }
.op__avis-qui img { width: 52px; height: 52px; object-fit: cover; border: 3px solid #111111; flex: 0 0 auto; filter: grayscale(1); }
.op__avis-qui b { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 19px; text-transform: uppercase; letter-spacing: .04em; color: #111111; }
.op__avis-qui small { color: var(--op-gris); font-size: 14px; }


/* --- 10. Double appel --------------------------------------------------------- */

.op__duo-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.op__cta-carte { position: relative; overflow: hidden; border: 3px solid #111111; min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(30px, 4vw, 56px); color: #FFFFFF; }
.op__cta-fond { position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(1) brightness(.45); transition: transform .7s, filter .4s; }
.op__cta-carte:hover .op__cta-fond { transform: scale(1.05); filter: grayscale(.4) brightness(.5); }
.op__cta-carte > *:not(.op__cta-fond) { position: relative; }
.op__cta-carte h3 { color: #FFFFFF; font-size: 40px; }
.op__cta-carte p { color: #E4DFD3; font-size: 16px; margin-bottom: 22px; }
.op__final { text-align: center; }
.op__final .op__btns { justify-content: center; }


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

.op__faq { max-width: 880px; margin: 46px auto 0; border-top: 3px solid #111111; }
.op__q { border-bottom: 3px solid #111111; background: var(--op-blanc); }
.op__q-tete { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 22px 60px 22px 22px; position: relative; font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #111111; line-height: 1.2; }
.op__q-tete::after { content: '+'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 30px; color: var(--op-orange); font-weight: 700; transition: transform .25s; }
.op__q.op-ouvert .op__q-tete::after { transform: translateY(-50%) rotate(45deg); }
.op__q-corps { max-height: 0; overflow: hidden; transition: max-height .35s ease-out; }
.op__q-corps div { padding: 0 22px 24px; color: var(--op-encre-2); font-size: 17px; }


/* --- 12. Formulaires et fiches ------------------------------------------------- */

.op__form { background: var(--op-blanc); border: 3px solid #111111; padding: clamp(26px, 3vw, 42px); box-shadow: 10px 10px 0 var(--op-orange); }
.op__form .wpcf7-form { margin: 0; }
.op__form p { margin-bottom: 16px; }
.op__form label { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #111111; margin-bottom: 6px; }
.op__form input[type=text], .op__form input[type=email], .op__form input[type=tel], .op__form input[type=url], .op__form input[type=number], .op__form select, .op__form textarea {
  width: 100%; padding: 12px 14px; background: #FFFFFF !important; border: 2px solid #111111 !important; border-radius: 0 !important;
  color: #111111 !important; font-family: 'Barlow', sans-serif; font-size: 16px;
}
.op__form input:focus, .op__form select:focus, .op__form textarea:focus { outline: 0; border-color: var(--op-orange) !important; box-shadow: 4px 4px 0 var(--op-orange); }
.op__form textarea { min-height: 140px; resize: vertical; }
.op__form input[type=submit], .op__form .wpcf7-submit {
  background: var(--op-orange) !important; color: #111111 !important; border: 3px solid #111111 !important; border-radius: 0 !important;
  padding: 15px 34px !important; font-family: 'Barlow Condensed', sans-serif; font-size: 20px !important; font-weight: 700 !important;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer; width: auto !important; transition: background .18s, color .18s;
}
.op__form input[type=submit]:hover { background: #111111 !important; color: var(--op-orange) !important; }
.op__form .wpcf7-not-valid-tip { color: #C0392B; font-size: 14px; margin-top: 4px; }
.op__form .wpcf7-response-output { border: 2px solid #111111 !important; padding: 12px 16px !important; margin: 16px 0 0 !important; }
.op__form-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.op__contact-grille { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(30px, 4vw, 60px); align-items: start; }
.op__fiche { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 2px solid var(--op-ligne); }
.op__fiche:last-child { border-bottom: 0; }
.op__fiche b { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--op-orange-2); margin-bottom: 6px; }
.op__fiche span, .op__fiche a { color: #111111; font-size: 17px; }
.op__fiche a { text-decoration: underline; text-decoration-color: var(--op-orange); text-underline-offset: 3px; }


/* --- 13. Pages intérieures et prose ------------------------------------------ */

.op__banniere { position: relative; padding: 140px 24px 70px; border-bottom: 3px solid #111111; background: var(--op-papier); overflow: hidden; }
.op__banniere-fond { position: absolute; top: 0; right: 0; bottom: 0; width: 42%; background-size: cover; background-position: center; filter: grayscale(1) contrast(1.05); }
.op__banniere-fond::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--op-papier) 0%, rgba(243,240,232,.2) 40%, transparent 100%); }
.op__banniere > .op__large { position: relative; z-index: 1; }
.op__banniere h1 { max-width: 14ch; margin-bottom: 16px; }
.op__banniere .op__chapo { margin-bottom: 0; }
.op__fil { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; font-family: 'Barlow Condensed', sans-serif; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.op__fil a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 2px solid #111111; background: #FFFFFF; color: #111111 !important; font-weight: 700; }
.op__fil a:hover { background: #111111; color: #FFFFFF !important; }
.op__fil-sep { color: var(--op-gris); align-self: center; }

.op__prose h2 { margin-top: 1.8em; font-size: clamp(30px, 3.4vw, 44px); }
.op__prose h3 { margin-top: 1.5em; font-size: 24px; color: var(--op-orange-2); }
.op__prose ul li::marker { color: var(--op-orange); }
.op__prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 16px; background: var(--op-blanc); border: 3px solid #111111; }
.op__prose th, .op__prose td { padding: 12px 14px; border: 1px solid var(--op-ligne); text-align: left; }
.op__prose th { background: #111111; color: #FFFFFF; font-family: 'Barlow Condensed', sans-serif; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; }
.op__encadre { background: var(--op-blanc); border: 3px solid #111111; border-left: 12px solid var(--op-orange); padding: 22px 26px; margin: 28px 0; }
.op__encadre p:last-child { margin-bottom: 0; }
/* pages légales : mention à compléter */
.op__manque { display: inline-block; padding: 2px 8px; border: 2px solid #C0392B; color: #C0392B; font-size: 14px; font-weight: 700; }


/* --- 14. Journal --------------------------------------------------------------- */

.op__filtres { border-bottom: 3px solid #111111; background: var(--op-blanc); padding: 14px 24px; overflow-x: auto; scrollbar-width: none; }
.op__filtres::-webkit-scrollbar { display: none; }
.op__filtres .op__large { display: flex; gap: 8px; white-space: nowrap; }
.op__filtre { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 2px solid #111111; color: #111111 !important; font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: #FFFFFF; }
.op__filtre:hover, .op__filtre.op-actif { background: #111111; color: #FFFFFF !important; }
.op__filtre span { font-size: 13px; padding: 1px 6px; background: var(--op-orange); color: #111111; }
.op__articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.op__articles--trois { margin-top: 44px; }
.op__art { display: flex; flex-direction: column; background: var(--op-blanc); border: 3px solid #111111; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.op__art:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--op-orange); }
.op__art-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 3px solid #111111; }
.op__art-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .35s; }
.op__art:hover .op__art-img img { filter: none; }
.op__art-corps { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.op__art-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-family: 'Barlow Condensed', sans-serif; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--op-gris); margin-bottom: 12px; }
.op__art-cat { padding: 2px 8px; background: var(--op-orange); color: #111111 !important; font-weight: 700; }
.op__art-duree::before { content: '■ '; color: var(--op-orange); font-size: 9px; vertical-align: middle; }
.op__art h2 { font-size: 26px; line-height: 1.05; margin-bottom: 10px; }
.op__art h2 a { color: #111111 !important; }
.op__art p { font-size: 15px; color: var(--op-gris); margin-bottom: 16px; }
.op__art-lien { margin-top: auto; align-self: flex-start; font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--op-orange-2) !important; }
@media (min-width: 900px) {
  .op__art--vedette { grid-column: 1 / -1; flex-direction: row; max-height: 400px; }
  .op__art--vedette .op__art-img { flex: 0 0 50%; aspect-ratio: auto; border-bottom: 0; border-right: 3px solid #111111; }
  .op__art--vedette .op__art-corps { padding: clamp(28px, 3.2vw, 48px); justify-content: center; }
  .op__art--vedette h2 { font-size: clamp(30px, 3vw, 44px); }
  .op__art--vedette .op__art-lien { margin-top: 6px; }
}
.op__pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; }
.op__pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border: 2px solid #111111; color: #111111 !important; font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 700; }
.op__pagination .page-numbers.current, .op__pagination .page-numbers:hover { background: #111111; color: #FFFFFF !important; }
.op__banniere--article { padding-top: 150px; }
.op__banniere--article h1 { font-size: clamp(36px, 4.6vw, 64px); max-width: 22ch; }
.op__art-meta--haut { margin-bottom: 18px; }
.op__article-corps { font-size: 18px; line-height: 1.7; }
.op__article-corps > p:first-of-type { font-size: 20px; color: #111111; }
.op__article-corps h2 { margin-top: 1.8em; padding-top: .6em; border-top: 3px solid #111111; }
.op__article-corps blockquote { margin: 30px 0; padding: 18px 26px; border-left: 12px solid var(--op-orange); background: var(--op-blanc); font-family: 'Barlow Condensed', sans-serif; font-size: 24px; color: #111111; }
.op__article-corps blockquote p:last-child { margin-bottom: 0; }
.op__art-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.op__signature { display: flex; gap: 18px; align-items: flex-start; margin-top: 36px; padding: 22px 26px; background: var(--op-blanc); border: 3px solid #111111; }
.op__signature img { flex: 0 0 auto; border: 3px solid #111111; }
.op__signature b { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 20px; text-transform: uppercase; color: #111111; margin-bottom: 4px; }
.op__signature small { color: var(--op-gris); font-size: 14px; line-height: 1.5; }


/* --- 15. Pied de page ------------------------------------------------------------ */

.op-pied { background: #111111; color: #B9B3A5; font-family: 'Barlow', sans-serif; padding: 0 24px; width: calc(100vw - var(--op-sb, 0px)); margin-left: calc(50% - 50vw + var(--op-sb, 0px) / 2); border-top: 10px solid transparent; border-image: repeating-linear-gradient(135deg, #FF6A13 0 14px, #111111 14px 28px) 10; }
.op-pied__large { max-width: 1280px; margin: 0 auto; }
.op-pied__cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 44px; padding: 64px 0 50px; }
.op-pied__logo { height: 50px; width: auto; margin-bottom: 18px; }
.op-pied p { font-size: 15px; line-height: 1.7; margin: 0 0 12px; }
.op-pied h4 { color: #FF6A13; font-family: 'Barlow Condensed', sans-serif; font-size: 18px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 18px; }
.op-pied ul { list-style: none; margin: 0; padding: 0; }
.op-pied li { margin-bottom: 10px; }
.op-pied a { color: #E4DFD3; font-size: 15px; text-decoration: none; }
.op-pied a:hover { color: #FF6A13; }
/* le pied est hors de .op : ses variables n'existent pas → couleurs en dur */
.op-pied .op__btn--or { background: #FF6A13 !important; border-color: #FF6A13 !important; color: #111111 !important; }
.op-pied .op__btn--or:hover { background: #FFFFFF !important; border-color: #FFFFFF !important; color: #111111 !important; box-shadow: 4px 4px 0 #FF6A13; }
.op-pied__bas { border-top: 1px solid rgba(255,255,255,.14); padding: 20px 0 26px; display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; font-size: 14px; }
.op-pied__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }


/* --- 16. Animations ---------------------------------------------------------------- */

.op-anim { opacity: 0; transform: translateY(18px); transition: opacity .6s ease-out, transform .6s ease-out; }
.op-anim.op-vu { opacity: 1; transform: none; }
.op-anim--1 { transition-delay: .07s; } .op-anim--2 { transition-delay: .14s; } .op-anim--3 { transition-delay: .21s; } .op-anim--4 { transition-delay: .28s; } .op-anim--5 { transition-delay: .35s; }
@media (prefers-reduced-motion: reduce) { .op-anim { opacity: 1; transform: none; transition: none; } .op__defile { animation: none; } .op-panneau { transform: none; transition: none; } }


/* --- 17. Responsive ------------------------------------------------------------------ */

@media (max-width: 1100px) {
  .op__grille-3 { grid-template-columns: repeat(2, 1fr); }
  .op__pole:nth-child(3n) { border-right: 3px solid #111111; }
  .op__pole:nth-child(2n) { border-right: 0; }
  .op__pole:nth-last-child(-n+3) { border-bottom: 3px solid #111111; }
  .op__pole:nth-last-child(-n+2) { border-bottom: 0; }
  .op__etapes, .op__avis, .op__articles { grid-template-columns: 1fr 1fr; }
  .op__etape + .op__etape { padding-left: 0; }
  .op__etape { padding-right: 0; }
  .op__preuves { grid-template-columns: repeat(2, 1fr); }
  .op__preuve:nth-child(2) { border-right: 0; }
  .op__preuve:nth-child(-n+2) { border-bottom: 3px solid #111111; }
}
@media (max-width: 991px) {
  .op__hero { padding-top: 100px; }
  .op__hero-contenu { grid-template-columns: 1fr; gap: 24px; }
  .op__hero-texte { padding-bottom: 28px; }
  /* mobile : cadre orange et cartouche recentrés (ils débordaient à droite et coupaient la photo) */
  .op__hero-visuel { min-height: 300px; margin: 0 0 36px; }
  .op__hero-visuel::before { left: 0; right: 0; top: 12px; bottom: -12px; }
  .op__hero-cartouche { left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 12px 16px; }
  .op__hero-cartouche b { font-size: 30px; }
  .op__duo-img::after { left: 0; right: 0; top: 10px; bottom: -10px; }
  .op__banniere-fond { width: 100%; opacity: .22; }
  .op__contrat { padding: 26px 20px; }
  .op__reperes { grid-template-columns: 1fr 1fr; }
  .op__repere:nth-child(2) { border-right: 0; }
  .op__repere:nth-child(-n+2) { border-bottom: 3px solid #111111; }
  .op__contrats, .op__duo, .op__duo-cta, .op__contact-grille { grid-template-columns: 1fr; }
  .op__duo-img { order: -1; }
  .op__banniere-fond { width: 100%; opacity: .25; }
  .op-pied__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 767px) {
  .op { font-size: 16px; }
  .op h1 { font-size: clamp(40px, 12vw, 64px); }
  .op h2 { font-size: clamp(30px, 8.5vw, 44px); }
  .op__zone { padding: 56px 20px; }
  .op__grille-3, .op__etapes, .op__avis, .op__articles { grid-template-columns: 1fr; }
  .op__pole { border-right: 0 !important; border-bottom: 3px solid #111111 !important; }
  .op__pole:last-child { border-bottom: 0 !important; }
  .op__preuves { grid-template-columns: 1fr; }
  .op__preuve { border-right: 0 !important; border-bottom: 3px solid #111111; }
  .op__preuve:last-child { border-bottom: 0; }
  .op__form-duo { grid-template-columns: 1fr; }
  .op__btns .op__btn { width: 100%; }
  .op-pied__cols { grid-template-columns: 1fr; }
  .op__banniere { padding: 112px 20px 52px; }
  /* tableaux (grilles de salaires) : défilement à l'intérieur de leur cadre, jamais hors de l'écran */
  .op__prose table { display: table; width: 100%; table-layout: fixed; font-size: 12.5px; }
  .op__prose th, .op__prose td { white-space: normal; padding: 8px 6px; overflow-wrap: anywhere; }
  .op__prose th { font-size: 11px; letter-spacing: .04em; }
  /* liste des autres secteurs : on passe à la ligne au lieu de déborder */
  .op__filtres { overflow: visible; padding: 14px 20px; }
  .op__filtres .op__large { flex-wrap: wrap; white-space: normal; }
  .op__filtre { font-size: 14px; padding: 7px 11px; }
  /* blocs qui pouvaient dépasser : cadres, encadré, contrats */
  .op__encadre { margin-left: 0; margin-right: 0; }
  .op__contrats { gap: 16px; }
  .op__contrat h3 { font-size: 32px; }
  .op__hero-cartouche b { font-size: 28px; }
  .op__banniere h1 { font-size: clamp(38px, 11vw, 56px); word-break: break-word; }
  .op h1, .op h2 { overflow-wrap: anywhere; }
  .op__reperes { grid-template-columns: 1fr; }
  .op__repere { border-right: 0; border-bottom: 3px solid #111111; }
  .op__repere:last-child { border-bottom: 0; }
}
@media (min-width: 1500px) {
  body.op-body .navbar > .container { width: 100% !important; max-width: 1460px !important; }
  .op__large { max-width: 1460px; }
  body.op-body .navbar-nav > li > a, body.op-body .nav > li > a { font-size: 20px !important; padding: 0 20px !important; }
  body.op-body .navbar-brand img { height: 56px !important; }
}


/* ==========================================================================
   Centrage mobile + tableaux en fiches (26/09/2026, demande de Marc :
   « tout centrer, les carrés sont incomplets sur téléphone »)
   ========================================================================== */
@media (max-width: 767px) {
  .op h1, .op h2, .op h3, .op .op__chapo, .op__badge, .op__hero-texte, .op__banniere .op__large,
  .op__repere, .op__preuve, .op__pole-corps, .op__etape, .op__avis-carte, .op__contrat, .op__cta-carte,
  .op__art-corps, .op__fiche, .op__encadre, .op__q-tete, .op__q-corps div, .op__duo > div, .op__contact-grille > div,
  .op__sim-reglages, .op__calc-reglages, .op__prose, .op__article-corps { text-align: center; }
  .op .op__chapo, .op__badge { margin-left: auto; margin-right: auto; }
  .op__surtitre { display: flex; justify-content: center; text-align: center; }
  .op__surtitre::before { display: none; }
  .op__btns, .op__tags, .op__art-tags, .op__art-meta, .op__avis-qui, .op__fil { justify-content: center; }
  .op__avis-qui > div { text-align: left; }
  .op__art-lien, .op__pole-lien { align-self: center; }
  .op__liste-or li, .op__contrat li, .op__prose ul, .op__prose ol, .op__form, .op__form label, .op__q-corps ul { text-align: left; }
  .op__liste-or { display: inline-block; text-align: left; max-width: 100%; }
  .op__reperes { grid-template-columns: 1fr 1fr; gap: 10px; border-top: 0; border-bottom: 0; margin-top: 8px; margin-bottom: 44px; } /* de l'air avant le bandeau qui défile */
  .op__repere, .op__repere:nth-child(2n), .op__repere:last-child { border: 3px solid #111111; } /* cartes séparées : cadre complet, pas un trait orphelin */
  .op__repere { padding: 16px 12px 14px; }
  .op__repere b { font-size: 28px; }
  .op__hero-fond { transform: none; inset: 0; }
  .op__pole-img img, .op__etape-img img, .op__art-img img { object-position: center; }

  /* tableaux : une fiche par ligne, l'intitulé de colonne devant chaque valeur (data-label posé par le JS) */
  .op__prose table, .op__prose tbody, .op__prose tr, .op__prose td { display: block; width: 100%; }
  .op__prose thead { display: none; }
  .op__prose table { border: 0; background: transparent; box-shadow: none; table-layout: auto; font-size: 15px; }
  .op__prose tr { margin-bottom: 12px; border: 1px solid var(--op-ligne); border-radius: 14px; padding: 4px 14px 6px; background: var(--op-blanc); }
  .op__prose td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: right; padding: 9px 0; border-bottom: 1px solid var(--op-ligne); white-space: normal; overflow-wrap: anywhere; }
  .op__prose td:last-child { border-bottom: 0; }
  .op__prose td::before { content: attr(data-label); flex: 0 0 46%; text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--op-gris); }
  .op__prose td:first-child { display: block; text-align: center; font-weight: 700; color: var(--op-encre); padding-top: 12px; }
  .op__prose td:first-child::before { display: none; }
  .op__prose td[data-label=""]::before { display: none; }
}


/* --- Offres d'emploi (27/09) ----------------------------------------------- */
.op__offres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.op__offres--trois { margin-top: 44px; }
.op__offre { display: flex; flex-direction: column; background: var(--op-blanc); border: 3px solid #111111; padding: 22px 22px 20px; text-decoration: none; color: var(--op-encre-2); transition: transform .2s, box-shadow .2s; }
.op__offre:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--op-orange); }
.op__offre-tete { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.op__offre-contrat { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; background: var(--op-orange); color: #111111; }
.op__offre-contrat--regie { background: #111111; color: var(--op-orange); }
.op__offre-contrat--regie-cdi { background: #111111; color: #FFFFFF; }
.op__offre-secteur { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border: 2px solid #111111; color: #111111; }
.op__offre h3 { font-size: 26px; margin-bottom: 12px; color: #111111; }
.op__offre-faits { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 15px; color: var(--op-gris); margin-bottom: 16px; }
.op__offre-lien { margin-top: auto; font-family: 'Barlow Condensed', sans-serif; font-size: 17px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--op-orange-2); }
.op__offre-fiche .op__fiche { margin-bottom: 14px; padding-bottom: 14px; }
.op__offre-fiche .op__fiche:last-of-type { border-bottom: 0; }
@media (max-width: 1100px) { .op__offres { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .op__offres { grid-template-columns: 1fr; } .op__offre { text-align: center; } .op__offre-tete, .op__offre-faits { justify-content: center; } .op__offre-lien { align-self: center; } }

.op__filtres--domaines { background: var(--op-papier); border-bottom: 3px solid #111111; }
.op__filtres--domaines .op__filtre { font-size: 14px; padding: 7px 11px; }


/* --- Habillage des articles (27/09) --------------------------------------- */
.op__lecture { position: fixed; top: 0; left: 0; height: 4px; width: 0; background: var(--op-orange); z-index: 1200; transition: width .1s linear; }
.op__credit { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--op-gris); margin-top: 14px; }
.op__sommaire { background: var(--op-blanc); border: 3px solid #111111; padding: 22px 26px 18px; margin: 34px 0 38px; }
.op__sommaire > b { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--op-orange-2); margin-bottom: 10px; }
.op__sommaire ol { margin: 0; padding: 0; list-style: none; counter-reset: som; columns: 2; column-gap: 32px; }
.op__sommaire li { counter-increment: som; margin: 0 0 8px; break-inside: avoid; font-size: 16px; line-height: 1.35; }
.op__sommaire li::before { content: counter(som, decimal-leading-zero); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; color: var(--op-orange); margin-right: 10px; }
.op__sommaire a { color: #111111; text-decoration: none; border-bottom: 2px solid transparent; }
.op__sommaire a:hover { border-bottom-color: var(--op-orange); }
.op__chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 30px 0 18px; }
.op__chiffre { background: #111111; color: #FFFFFF; padding: 20px 18px 16px; border-top: 6px solid var(--op-orange); }
.op__chiffre b { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 40px; line-height: 1; color: var(--op-orange); margin-bottom: 8px; letter-spacing: .01em; }
.op__chiffre b small { font-size: 22px; color: #FFFFFF; margin-left: 3px; }
.op__chiffre span { display: block; font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; color: #C9C3B5; line-height: 1.35; }
.op__tableau { margin: 10px 0 30px; }
.op__tableau > b { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--op-gris); margin: 14px 0 6px; }
.op__tableau table { margin-top: 0; }
.op__tableau td:last-child { font-weight: 600; color: #111111; }
.op__retenir { background: var(--op-blanc); border: 3px solid #111111; border-left: 12px solid var(--op-orange); padding: 24px 28px 14px; margin: 40px 0; }
.op__retenir h2 { margin: 0 0 14px !important; padding-top: 0 !important; border-top: 0 !important; font-size: 28px !important; }
.op__retenir ul { list-style: none; margin: 0; padding: 0; }
.op__retenir li { position: relative; padding-left: 34px; margin-bottom: 12px; font-size: 17px; }
.op__retenir li::marker { content: ''; }
.op__retenir li::before { content: '\2713'; position: absolute; left: 0; top: -1px; width: 24px; height: 24px; background: var(--op-orange); color: #111111; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.op__faq { margin: 40px 0; }
.op__faq details { background: var(--op-blanc); border: 3px solid #111111; margin-bottom: 10px; }
.op__faq summary { cursor: pointer; list-style: none; padding: 16px 52px 16px 22px; font-family: 'Barlow Condensed', sans-serif; font-size: 21px; font-weight: 700; color: #111111; position: relative; }
.op__faq summary::-webkit-details-marker { display: none; }
.op__faq summary::after { content: '+'; position: absolute; right: 18px; top: 10px; font-size: 30px; color: var(--op-orange); font-weight: 700; transition: transform .2s; }
.op__faq details[open] summary::after { transform: rotate(45deg); }
.op__faq details[open] summary { border-bottom: 2px solid var(--op-ligne); }
.op__faq details > p { padding: 16px 22px 6px; margin: 0 0 12px; font-size: 17px; }
.op__cta-inline { background: #111111; color: #FFFFFF; padding: 30px 32px; margin: 44px 0 34px; border-left: 12px solid var(--op-orange); }
.op__cta-inline h2 { color: #FFFFFF !important; margin: 0 0 12px !important; padding-top: 0 !important; border-top: 0 !important; font-size: 30px !important; }
.op__cta-inline p { color: #C9C3B5; margin-bottom: 18px; }
.op__cta-inline .op__btns { margin: 0; }
.op__cta-inline .op__btn--ligne { color: #FFFFFF; border-color: #FFFFFF; }
.op__cta-inline .op__btn--ligne:hover { background: #FFFFFF; color: #111111; }
.op__sources { background: var(--op-blanc); border: 2px solid var(--op-ligne); padding: 18px 22px 8px; margin: 30px 0; font-size: 15px; }
.op__sources h2 { font-size: 15px !important; letter-spacing: .14em; text-transform: uppercase; color: var(--op-gris); margin: 0 0 10px !important; padding-top: 0 !important; border-top: 0 !important; }
.op__sources ul { margin: 0; padding: 0; list-style: none; }
.op__sources li { padding-left: 22px; position: relative; margin-bottom: 8px; color: var(--op-gris); }
.op__sources li::marker { content: ''; }
.op__sources li::before { content: '\25A0'; position: absolute; left: 0; top: 0; color: var(--op-orange); font-size: 11px; }
.op__sources a { color: #111111; text-decoration: underline; text-decoration-color: var(--op-orange); text-underline-offset: 3px; }
.op__sources small, .op__note { display: block; color: var(--op-gris); font-size: 14px; margin-top: 8px; }
.op__ref { color: var(--op-orange-2); text-decoration: none; border-bottom: 1px dotted var(--op-orange); white-space: nowrap; }
.op__ref:hover { border-bottom-style: solid; }
.op__article-corps h2[id] { scroll-margin-top: 110px; }
@media (max-width: 1100px) { .op__chiffres { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) {
  .op__sommaire ol { columns: 1; }
  .op__sommaire, .op__retenir, .op__faq summary, .op__sources { text-align: left; }
  .op__chiffres { grid-template-columns: 1fr 1fr; gap: 10px; }
  .op__chiffre { padding: 16px 12px 12px; }
  .op__chiffre b { font-size: 30px; }
  .op__chiffre b small { font-size: 16px; }
  .op__cta-inline { padding: 24px 18px; text-align: center; border-left: 0; border-top: 8px solid var(--op-orange); }
  .op__cta-inline .op__btns { justify-content: center; }
  .op__retenir li, .op__sources li, .op__faq details > p { text-align: left; }
}
@media (max-width: 767px) { .op__tableau td[data-label="Valeur"]::before { display: none; } .op__tableau td[data-label="Valeur"] { text-align: center; font-size: 16px; } }