/*
Theme Name: Baobab RH
Theme URI: https://baobabrh.sn
Author: Jokkosys
Description: Thème bloc sur mesure de Baobab RH — gestion RH, paie et digitalisation au Sénégal. Généré depuis la maquette validée (baobab-rh/src/build_theme.py) : ne pas modifier ce fichier à la main.
Version: 1.0.1
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: baobab-rh
Tags: block-theme, full-site-editing, business
*/

:root { --cernes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cellipse cx='400' cy='400' rx='36' ry='32'/%3E %3Cellipse cx='402' cy='398' rx='74' ry='68'/%3E %3Cellipse cx='398' cy='402' rx='116' ry='108'/%3E %3Cellipse cx='404' cy='400' rx='160' ry='150'/%3E %3Cellipse cx='400' cy='404' rx='206' ry='196'/%3E %3Cellipse cx='396' cy='400' rx='252' ry='240'/%3E %3Cellipse cx='402' cy='396' rx='300' ry='290'/%3E %3Cellipse cx='400' cy='402' rx='348' ry='336'/%3E %3Cellipse cx='398' cy='400' rx='394' ry='384'/%3E%3C/svg%3E"); }

/* ==========================================================================
   Socle Gutenberg — avant la feuille de la maquette (spécificité nulle ou
   faible : la maquette doit pouvoir tout surcharger)
   ========================================================================== */

/* Espacement automatique : coupé à la source dans theme.json (blockGap 0),
   filet de sécurité à spécificité nulle — jamais « .wp-block-group > * ». */
:where(.wp-block-group) > :where(*), :where(.wp-block-buttons) { margin-block: 0; }
figure.wp-block-image { margin: 0; }
img { height: auto; }

/* Paragraphe transparent : porte un élément en ligne (small, strong, span…)
   qui reste, pour la mise en page, l'enfant direct de son conteneur. */
.u-c, .wp-block-buttons.u-c { display: contents; }

/* Éléments convertis en paragraphe : affichage par défaut de la balise
   d'origine (span, strong… en ligne ; button en ligne-bloc), sans spécificité. */
:where(.cv-i) { display: inline; }
:where(.cv-ib) { display: inline-block; line-height: normal; text-align: center; }

/* Icônes : pseudo-élément masqué, couleur = currentColor. La taille vient
   des règles de la maquette (« X svg » réécrit en « X .ic-…::before »). */
.ic-av::before, .ic-ap::after, .ic-seul::before {
  content: ""; display: block; flex: none; width: 1em; height: 1em;
  background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
}

/* Cartes entièrement cliquables : le lien est posé sur un texte de la
   carte et étiré sur toute sa surface. */
:where(.lien-bloc) { position: relative; }
.lien-bloc .lien-cible a::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
.lien-bloc .lien-cible a { color: inherit; text-decoration: none; }

/* Illustrations (maquettes d'interface capturées en image) */
.illu img { display: block; width: 100%; height: auto; }

/* ---------- Délais d'apparition (ex-style inline --d) ---------- */
.d-06 { --d: .06s; }
.d-08 { --d: .08s; }
.d-1 { --d: .1s; }
.d-12 { --d: .12s; }
.d-15 { --d: .15s; }
.d-16 { --d: .16s; }
.d-18 { --d: .18s; }
.d-2 { --d: .2s; }
.d-24 { --d: .24s; }
.d-3 { --d: .3s; }
/* ---------- Icônes (masques CSS, ex-sprite SVG) ---------- */
.ic-bouclier { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l7 2.5v5.5c0 4.3-3 7.6-7 9-4-1.4-7-4.7-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.ic-bulle { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5.5h14A1.5 1.5 0 0 1 20.5 7v8.5A1.5 1.5 0 0 1 19 17h-8l-4.5 3.5V17H5a1.5 1.5 0 0 1-1.5-1.5V7A1.5 1.5 0 0 1 5 5.5z'/%3E%3Cpath d='M8 10h8M8 13h5'/%3E%3C/svg%3E"); }
.ic-cadenas { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5'/%3E%3C/svg%3E"); }
.ic-calendrier { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='14' rx='2.5'/%3E%3Cpath d='M4 10h16M8.5 3.5v4M15.5 3.5v4'/%3E%3Cpath d='M9 14.5l2 2 4-4'/%3E%3C/svg%3E"); }
.ic-cible { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E"); }
.ic-couches { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l8.5 4.5L12 13 3.5 8.5z'/%3E%3Cpath d='M3.5 12.5L12 17l8.5-4.5'/%3E%3Cpath d='M3.5 16.5L12 21l8.5-4.5'/%3E%3C/svg%3E"); }
.ic-digital { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16.5V20'/%3E%3Cpath d='M7.5 12.5l2.5-2.5 2 2 4-4'/%3E%3C/svg%3E"); }
.ic-document { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h7l4.5 4.5v11a1.5 1.5 0 0 1-1.5 1.5H7A1.5 1.5 0 0 1 5.5 19V5A1.5 1.5 0 0 1 7 3.5z'/%3E%3Cpath d='M13.5 3.5V8.5h5M8.5 12.5h7M8.5 16h5'/%3E%3C/svg%3E"); }
.ic-dossier { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5A1.5 1.5 0 0 1 5.5 5h4l2 2.5h7A1.5 1.5 0 0 1 20 9v9.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 18.5z'/%3E%3Cpath d='M8.5 13.5h7M8.5 16.5h4'/%3E%3C/svg%3E"); }
.ic-equipe { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.5' r='3'/%3E%3Cpath d='M3.5 19c.6-3 2.8-5 5.5-5s4.9 2 5.5 5'/%3E%3Ccircle cx='16.5' cy='9.5' r='2.5'/%3E%3Cpath d='M15.5 14.2c2.4-.3 4.4 1.3 5 4.3'/%3E%3C/svg%3E"); }
.ic-fleche { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.ic-graphique { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16'/%3E%3Crect x='5.5' y='12' width='3' height='6' rx='1'/%3E%3Crect x='10.5' y='8' width='3' height='10' rx='1'/%3E%3Crect x='15.5' y='4.5' width='3' height='13.5' rx='1'/%3E%3C/svg%3E"); }
.ic-horloge { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.ic-lieu { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0C18.5 15.4 12 21 12 21z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E"); }
.ic-livre { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7c-1.8-1.5-4.5-2-8-2v13c3.5 0 6.2.5 8 2 1.8-1.5 4.5-2 8-2V5c-3.5 0-6.2.5-8 2z'/%3E%3Cpath d='M12 7v13'/%3E%3C/svg%3E"); }
.ic-loupe { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='5.5'/%3E%3Cpath d='M15 15l4.5 4.5'/%3E%3Cpath d='M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E"); }
.ic-mail { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2'/%3E%3Cpath d='M4 7l8 6 8-6'/%3E%3C/svg%3E"); }
.ic-paie { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='6' width='17' height='12' rx='2.5'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M7 9.5v.01M17 14.5v.01'/%3E%3C/svg%3E"); }
.ic-pousse { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20v-8'/%3E%3Cpath d='M12 12c0-4 3-6.5 7-6.5 0 4-3 6.5-7 6.5z'/%3E%3Cpath d='M12 14.5c0-3-2.3-5-5.5-5 0 3 2.3 5 5.5 5z'/%3E%3C/svg%3E"); }
.ic-tel { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5h3.2l1.6 4-2 1.3a10 10 0 0 0 6.4 6.4l1.3-2 4 1.6V19a1.5 1.5 0 0 1-1.6 1.5C10.7 20 4 13.3 3.5 6.1A1.5 1.5 0 0 1 5 4.5z'/%3E%3C/svg%3E"); }
.ic-valide { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8.5 12.2l2.4 2.4 4.6-4.8'/%3E%3C/svg%3E"); }

/* ==========================================================================
   Feuille de la maquette validée (site/styles.css), sélecteurs adaptés
   ========================================================================== */
:root { --foret: #0D3B70;
  --foret-nuit: #062650;
  --foret-3: #2A5C98;
  --sauge: #DCE6F2;
  --sable: #F9E3C8;
  --sable-clair: #EFF3F8;
  --creme: #F7F8FB;
  --blanc: #FFFFFF;
  --anthracite: #172233;
  --gris: #5A6577;
  --trait: #E1E6EE;
  --ocre: #F28C1E;

  --f-titre: "Manrope", system-ui, sans-serif;
  --f-texte: "Inter", system-ui, sans-serif;

  --r-s: 10px;
  --r-m: 18px;
  --r-l: 28px;

  --ombre: 0 1px 2px rgba(6, 38, 80, .06), 0 12px 32px -12px rgba(6, 38, 80, .18);
  --ombre-forte: 0 2px 4px rgba(6, 38, 80, .08), 0 40px 80px -24px rgba(6, 38, 80, .35);

  --largeur: 1200px;
  --gouttiere: clamp(20px, 5vw, 40px); }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0;
  font-family: var(--f-texte);
  font-size: 17px;
  line-height: 1.6;
  color: var(--anthracite);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--f-titre);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
  hyphens: none; }
p { margin: 0; }
.enveloppe { width: min(var(--largeur), 100% - 2 * var(--gouttiere)); margin-inline: auto; }
.surtitre { display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-titre);
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--foret-3); }
.surtitre::before { content: ""; width: 22px; height: 2px; background: var(--ocre); border-radius: 2px; }
.sur-fonce .surtitre { color: var(--sable); }
.titre-section { font-size: clamp(32px, 4.4vw, 54px); max-width: 17ch; margin-top: 18px; }
.chapo { font-size: clamp(17px, 1.5vw, 19px); color: var(--gris); max-width: 58ch; margin-top: 20px; }
.btn, .wp-block-buttons > .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  font-family: var(--f-titre); font-size: 15px; font-weight: 700; letter-spacing: -0.005em;
  border-radius: 999px; border: 1.5px solid transparent;
  transition: transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
  white-space: nowrap; }
.btn.ic-av::before, .btn .ic-av::before, .btn.ic-ap::after, .btn .ic-ap::after, .btn.ic-seul::before, .btn .ic-seul::before { flex: none; width: 18px; height: 18px; transition: transform .25s ease; }
.btn:hover.ic-av::before, .btn:hover .ic-av::before, .btn:hover.ic-ap::after, .btn:hover .ic-ap::after, .btn:hover.ic-seul::before, .btn:hover .ic-seul::before { transform: translateX(3px); }
.btn-plein, .wp-block-buttons > .btn-plein { background: var(--foret); color: var(--creme); }
.btn-plein:hover, .wp-block-buttons > .btn-plein:hover { background: var(--foret-nuit); box-shadow: 0 10px 24px -10px rgba(6,38,80,.55); transform: translateY(-1px); }
.btn-contour, .wp-block-buttons > .btn-contour { border-color: rgba(30,34,38,.18); color: var(--anthracite); background: transparent; }
.btn-contour:hover, .wp-block-buttons > .btn-contour:hover { border-color: var(--foret); color: var(--foret); }
.btn-sable, .wp-block-buttons > .btn-sable { background: var(--ocre); color: var(--foret-nuit); }
.btn-sable:hover, .wp-block-buttons > .btn-sable:hover { background: #F6A54A; transform: translateY(-1px); }
.btn-clair, .wp-block-buttons > .btn-clair { border-color: rgba(247,248,251,.28); color: var(--creme); }
.btn-clair:hover, .wp-block-buttons > .btn-clair:hover { border-color: var(--sable); color: var(--sable); }
.lien-fleche { display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-titre); font-weight: 700; font-size: 15px; color: var(--foret); }
.lien-fleche.ic-av::before, .lien-fleche .ic-av::before, .lien-fleche.ic-ap::after, .lien-fleche .ic-ap::after, .lien-fleche.ic-seul::before, .lien-fleche .ic-seul::before { width: 16px; height: 16px; transition: transform .25s ease; }
.lien-fleche:hover.ic-av::before, .lien-fleche:hover .ic-av::before, .lien-fleche:hover.ic-ap::after, .lien-fleche:hover .ic-ap::after, .lien-fleche:hover.ic-seul::before, .lien-fleche:hover .ic-seul::before { transform: translateX(4px); }
.entete { position: sticky; top: 0; z-index: 50;
  background: rgba(247, 248, 251, .82);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background-color .3s ease; }
.entete.defile { border-bottom-color: var(--trait); background: rgba(247, 248, 251, .94); }
.menu-ouvert .entete { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--creme); }
.entete-barre { display: flex; align-items: center; gap: 24px; height: 78px; }
.entete .enveloppe { width: min(1320px, 100% - 2 * var(--gouttiere)); }
.nav a { padding: 8px 10px; }
.marque { flex: none; display: flex; white-space: nowrap; align-items: center; gap: 12px; font-family: var(--f-titre); font-weight: 800; letter-spacing: .02em; font-size: 17px; color: var(--foret-nuit); }
.marque img { height: 58px; width: auto; }
.pied .marque { background: var(--blanc); padding: 14px 18px; border-radius: 14px; display: inline-flex; }
.pied .marque img { height: 60px; }
.marque small { display: block; font-weight: 600; font-size: 11px; letter-spacing: .16em; color: var(--gris); margin-top: 1px; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { white-space: nowrap;
  font-family: var(--f-titre); font-size: 15px; font-weight: 600; color: var(--anthracite);
  padding: 8px 12px; border-radius: 999px; transition: background-color .2s ease, color .2s ease; }
.nav a:hover { background: var(--sable-clair); color: var(--foret); }
.nav a[aria-current="page"] { color: var(--foret); background: var(--sable-clair); }
.menu-mobile nav a[aria-current="page"] { color: var(--foret-3); }
.entete-actions { display: flex; gap: 10px; align-items: center; }
.entete-actions .btn, .entete-actions .wp-block-buttons > .btn { min-height: 44px; padding: 0 18px; font-size: 14px; }
.btn-espace, .wp-block-buttons > .btn-espace { display: inline-flex; align-items: center; gap: 8px; }
.btn-espace.ic-av::before, .btn-espace .ic-av::before, .btn-espace.ic-ap::after, .btn-espace .ic-ap::after, .btn-espace.ic-seul::before, .btn-espace .ic-seul::before { width: 18px; height: 18px; }
.burger { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--trait); background: var(--blanc); cursor: pointer; align-items: center; justify-content: center; }
.burger span, .burger span::before, .burger span::after { display: block; width: 18px; height: 2px; background: var(--anthracite); border-radius: 2px; position: relative; transition: transform .3s ease, background-color .3s ease; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.menu-ouvert .burger span { background: transparent; }
.menu-ouvert .burger span::before { transform: translateY(6px) rotate(45deg); }
.menu-ouvert .burger span::after { transform: translateY(-6px) rotate(-45deg); }
.menu-mobile { display: none; }
.hero { position: relative; padding: clamp(48px, 8vw, 104px) 0 clamp(72px, 9vw, 128px); overflow: hidden; }
.hero-grille { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(40px, 4.9vw, 68px); letter-spacing: -0.035em; line-height: 1.03; margin-top: 24px; max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--foret-3); }
.hero .chapo { font-size: clamp(18px, 1.6vw, 20px); margin-top: 26px; max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.hero-note { display: flex; align-items: center; gap: 14px; margin-top: 44px; font-size: 14px; color: var(--gris); }
.hero-note .pastilles { display: flex; }
.hero-note .pastilles i { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--creme); margin-left: -8px; display: grid; place-items: center; font-style: normal; font-family: var(--f-titre); font-weight: 700; font-size: 11px; }
.hero-note .pastilles i:first-child { margin-left: 0; background: var(--foret); color: var(--sable); }
.hero-note .pastilles i:nth-child(2) { background: var(--sable); color: var(--foret); }
.hero-note .pastilles i:nth-child(3) { background: var(--foret-3); color: var(--creme); }
.a-cernes::before { content: ""; background: currentColor; -webkit-mask: var(--cernes) center / contain no-repeat; mask: var(--cernes) center / contain no-repeat; position: absolute; pointer-events: none; color: var(--foret); opacity: .09; aspect-ratio: 1 / 1; height: auto; }
.hero.a-cernes::before { width: 980px; right: -300px; top: -180px; }
.hero-visuel { position: relative; }
.ecran { position: relative; z-index: 2;
  background: var(--blanc); border-radius: var(--r-l);
  box-shadow: var(--ombre-forte);
  border: 1px solid rgba(6,38,80,.06);
  overflow: hidden; }
.ecran-barre { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid #E9EDF3; }
.ecran-barre i { width: 9px; height: 9px; border-radius: 50%; background: #D9DFE8; }
.ecran-barre span { margin-left: 12px; font-size: 12px; color: var(--gris); font-family: var(--f-titre); font-weight: 600; }
.ecran-corps { display: grid; grid-template-columns: 58px minmax(0, 1fr); min-height: 380px; }
.ecran-menu { background: var(--foret-nuit); display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 18px 0; }
.ecran-menu b { width: 26px; height: 26px; border-radius: 8px; background: rgba(249,227,200,.14); }
.ecran-menu b:first-child { background: var(--sable); }
.ecran-contenu { padding: 20px; display: grid; gap: 14px; align-content: start; }
.ecran-titre { display: flex; justify-content: space-between; align-items: baseline; }
.ecran-titre strong { font-family: var(--f-titre); font-size: 16px; }
.ecran-titre small { font-size: 11px; color: var(--gris); }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.kpi { background: var(--creme); border-radius: 12px; padding: 12px; }
.kpi small { display: block; font-size: 11px; color: var(--gris); }
.kpi strong { display: block; font-family: var(--f-titre); font-size: 22px; letter-spacing: -0.02em; margin-top: 2px; }
.kpi em { font-style: normal; font-size: 11px; color: var(--foret-3); font-weight: 600; }
.graph { background: var(--creme); border-radius: 12px; padding: 14px; }
.graph-tete { display: flex; justify-content: space-between; font-size: 11px; color: var(--gris); }
.graph-tete strong { color: var(--anthracite); font-family: var(--f-titre); font-size: 13px; }
.barres { display: flex; align-items: flex-end; gap: 8px; height: 96px; margin-top: 12px; }
.barres span { flex: 1; border-radius: 6px 6px 3px 3px; background: var(--sauge); height: var(--h); transform-origin: bottom; }
.barres span:nth-last-child(2) { background: var(--foret-3); }
.barres span:last-child { background: var(--foret); }
.en-vue .barres span { animation: pousse .9s cubic-bezier(.2,.8,.2,1) both; }
.barres span:nth-child(2) { animation-delay: .05s; }
.barres span:nth-child(3) { animation-delay: .1s; }
.barres span:nth-child(4) { animation-delay: .15s; }
.barres span:nth-child(5) { animation-delay: .2s; }
.barres span:nth-child(6) { animation-delay: .25s; }
.barres span:nth-child(7) { animation-delay: .3s; }
@keyframes pousse { from { transform: scaleY(.1); } to { transform: scaleY(1); } }
.flottant { position: absolute; z-index: 3;
  background: var(--blanc); border-radius: 16px; box-shadow: var(--ombre-forte);
  padding: 14px 16px; display: flex; gap: 12px; align-items: center;
  font-size: 13px; line-height: 1.35;
  border: 1px solid rgba(6,38,80,.06); }
.flottant strong { display: block; font-family: var(--f-titre); font-size: 14px; }
.flottant small { color: var(--gris); }
.flottant .ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.flottant .ico.ic-av::before, .flottant .ico .ic-av::before, .flottant .ico.ic-ap::after, .flottant .ico .ic-ap::after, .flottant .ico.ic-seul::before, .flottant .ico .ic-seul::before { width: 20px; height: 20px; }
.flottant-paie { left: -48px; bottom: 58px; }
.flottant-paie .ico { background: var(--foret); color: var(--sable); }
.flottant-conge { right: -28px; top: -30px; }
.flottant-conge .ico { background: var(--sable); color: var(--foret); }
.hero-visuel .donnees-fictives { position: absolute; right: 12px; bottom: -30px; font-size: 11px; color: var(--gris); }
.a-plaque-sable::before { content: ""; position: absolute; z-index: 1; inset: 44px -40px -40px 64px; background: var(--sable); border-radius: var(--r-l); }
@media (prefers-reduced-motion: no-preference) {
.flottant-paie { animation: flotte 7s ease-in-out infinite; }
.flottant-conge { animation: flotte 8s ease-in-out -3s infinite; }
}
@keyframes flotte { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.valeur { padding: clamp(64px, 8vw, 112px) 0; background: var(--blanc); border-block: 1px solid var(--trait); }
.valeur-tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.valeur-tete .titre-section { max-width: 19ch; }
.valeur-tete .titre-section span { color: var(--foret-3); }
.valeur-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 64px; border-top: 1px solid var(--trait); }
.valeur-item { padding: 36px 28px 8px 0; position: relative; }
.valeur-item + .valeur-item { padding-left: 28px; border-left: 1px solid var(--trait); }
.valeur-item .ico { width: 52px; height: 52px; border-radius: 16px; background: var(--sable-clair); color: var(--foret); display: grid; place-items: center; transition: background-color .3s ease, color .3s ease, transform .3s ease; }
.valeur-item:hover .ico { background: var(--foret); color: var(--sable); transform: translateY(-3px); }
.valeur-item .ico.ic-av::before, .valeur-item .ico .ic-av::before, .valeur-item .ico.ic-ap::after, .valeur-item .ico .ic-ap::after, .valeur-item .ico.ic-seul::before, .valeur-item .ico .ic-seul::before { width: 26px; height: 26px; }
.valeur-item h3 { font-size: 30px; margin-top: 28px; }
.valeur-item p:where(:not(.cv, .u-c)) { color: var(--gris); margin-top: 8px; font-size: 16px; }
.valeur-item .num { position: absolute; top: 36px; right: 20px; font-family: var(--f-titre); font-weight: 700; font-size: 13px; color: #A9B2C0; }
.expertises { padding: clamp(80px, 10vw, 140px) 0; }
.expertises-tete { display: flex; justify-content: space-between; gap: 40px; align-items: end; flex-wrap: wrap; }
.expertises-tete .titre-section { max-width: 18ch; }
.cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 56px; }
.carte { position: relative; display: flex; flex-direction: column;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-m);
  padding: 28px; min-height: 290px;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease; }
.carte:hover { transform: translateY(-6px); box-shadow: var(--ombre); border-color: transparent; }
.carte .ico { width: 48px; height: 48px; border-radius: 14px; background: var(--sable-clair); color: var(--foret); display: grid; place-items: center; }
.carte .ico.ic-av::before, .carte .ico .ic-av::before, .carte .ico.ic-ap::after, .carte .ico .ic-ap::after, .carte .ico.ic-seul::before, .carte .ico .ic-seul::before { width: 24px; height: 24px; }
.carte h3 { font-size: 22px; margin-top: 28px; }
.carte p:where(:not(.cv, .u-c)) { color: var(--gris); font-size: 15.5px; margin-top: 10px; }
.carte .lien-fleche { margin-top: auto; padding-top: 24px; }
.carte-large { grid-column: span 2; background: var(--foret); border-color: var(--foret); color: var(--creme); overflow: hidden; }
.carte-large .ico { background: rgba(249,227,200,.14); color: var(--sable); }
.carte-large p:where(:not(.cv, .u-c)) { color: rgba(247,248,251,.72); max-width: 40ch; }
.carte-large .lien-fleche { color: var(--sable); }
.carte-large.a-cernes::before { width: 520px; right: -170px; bottom: -250px; color: var(--sable); opacity: .14; }
.carte-large h3 { font-size: 28px; }
.alliance { position: relative; background: var(--foret-nuit); color: var(--creme); padding: clamp(88px, 11vw, 150px) 0; overflow: hidden; }
.alliance.a-cernes::before { width: 1300px; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--sable); opacity: .07; }
.alliance-tete { position: relative; text-align: center; max-width: 880px; margin-inline: auto; }
.alliance-tete .marques { display: inline-flex; align-items: center; gap: 18px; font-family: var(--f-titre); font-weight: 800; font-size: 14px; letter-spacing: .18em; color: var(--sable); }
.alliance-tete .marques span:nth-child(2) { font-weight: 500; font-size: 22px; letter-spacing: 0; color: var(--ocre); }
.alliance-tete h2 { font-size: clamp(38px, 6vw, 80px); letter-spacing: -0.035em; margin-top: 26px; }
.alliance-tete p:where(:not(.cv, .u-c)) { font-size: clamp(17px, 1.6vw, 20px); color: rgba(247,248,251,.72); max-width: 60ch; margin: 26px auto 0; }
.chaine { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 72px; }
.chaine::before { content: ""; position: absolute; top: 27px; left: 12.5%; right: 12.5%; height: 1px; background: linear-gradient(90deg, rgba(249,227,200,.4), var(--ocre)); }
.chaine-etape { text-align: center; position: relative; padding: 0 10px; }
.chaine-etape b { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; background: var(--foret-nuit); border: 1px solid rgba(249,227,200,.3); font-family: var(--f-titre); font-size: 14px; color: var(--sable); }
.chaine-etape:last-child b { background: var(--ocre); border-color: var(--ocre); color: var(--foret-nuit); }
.chaine-etape strong { display: block; font-family: var(--f-titre); font-size: 18px; margin-top: 18px; }
.chaine-etape small { display: block; font-size: 14px; color: rgba(247,248,251,.6); margin-top: 4px; }
.produits { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 72px; }
.produit { background: rgba(247,248,251,.04); border: 1px solid rgba(249,227,200,.14); border-radius: var(--r-m);
  padding: 32px; display: flex; flex-direction: column; min-height: 300px;
  transition: background-color .35s ease, border-color .35s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.produit:hover { background: rgba(247,248,251,.08); border-color: rgba(249,227,200,.3); transform: translateY(-4px); }
.produit-logo { display: flex; align-items: center; gap: 12px; font-family: var(--f-titre); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; }
.produit-logo i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--sable); color: var(--foret-nuit); font-style: normal; font-size: 16px; }
.produit p:where(:not(.cv, .u-c)) { color: rgba(247,248,251,.7); margin-top: 16px; font-size: 16px; }
.produit ul { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.produit li { font-size: 13px; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(249,227,200,.2); color: rgba(247,248,251,.85); }
.produit .lien-fleche { color: var(--sable); margin-top: auto; padding-top: 28px; }
.alliance-cta { position: relative; text-align: center; margin-top: 56px; }
.jokkorh { padding: clamp(88px, 11vw, 150px) 0 0; background: var(--sable-clair); overflow: hidden; }
.jokkorh-tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 48px; align-items: end; }
.jokkorh h2 { font-size: clamp(40px, 6vw, 84px); letter-spacing: -0.04em; line-height: 1; margin-top: 18px; }
.jokkorh h2 span { color: var(--foret-3); }
.jokkorh-tete p:where(:not(.cv, .u-c)) { color: var(--gris); font-size: 18px; }
.jokkorh-tete .btn, .jokkorh-tete .wp-block-buttons > .btn { margin-top: 28px; }
.fonctions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.fonctions span { font-size: 14px; font-weight: 500; padding: 7px 14px; border-radius: 999px; background: var(--blanc); border: 1px solid var(--trait); }
.app { position: relative; margin-top: 64px; }
.app-cadre { background: var(--blanc); border-radius: var(--r-l) var(--r-l) 0 0;
  box-shadow: 0 -2px 0 rgba(6,38,80,.04), 0 -30px 80px -30px rgba(6,38,80,.3);
  border: 1px solid rgba(6,38,80,.07); border-bottom: 0;
  overflow: hidden; }
.app-corps { display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.app-lateral { background: var(--foret-nuit); color: rgba(247,248,251,.7); padding: 24px 16px; font-size: 14px; display: grid; gap: 4px; align-content: start; }
.app-lateral .app-marque { font-family: var(--f-titre); font-weight: 800; color: var(--creme); font-size: 18px; padding: 0 10px 18px; }
.app-lateral a { padding: 9px 12px; border-radius: 10px; display: flex; gap: 10px; align-items: center; }
.app-lateral a.actif { background: rgba(249,227,200,.12); color: var(--creme); }
.app-lateral a i { width: 8px; height: 8px; border-radius: 3px; background: rgba(249,227,200,.3); }
.app-lateral a.actif i { background: var(--ocre); }
.app-principal { padding: 28px; display: grid; gap: 18px; background: #FAFBFD; }
.app-entete { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.app-entete h4 { font-size: 22px; }
.app-entete small { color: var(--gris); font-size: 13px; }
.app-entete .etiquette { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--sable-clair); color: var(--foret); }
.app-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.app-kpi { background: var(--blanc); border: 1px solid #E6EAF1; border-radius: 14px; padding: 16px 18px; }
.app-kpi small { font-size: 12.5px; color: var(--gris); display: block; }
.app-kpi strong { font-family: var(--f-titre); font-size: 30px; letter-spacing: -0.03em; display: block; margin-top: 6px; line-height: 1.1; }
.app-kpi strong sub { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--gris); vertical-align: baseline; margin-left: 4px; }
.app-kpi em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--foret-3); }
.app-kpi.fort { background: var(--foret); border-color: var(--foret); color: var(--creme); }
.app-kpi.fort small, .app-kpi.fort sub { color: rgba(247,248,251,.7); }
.app-kpi.fort em { color: var(--sable); }
.app-bas { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.panneau { background: var(--blanc); border: 1px solid #E6EAF1; border-radius: 14px; padding: 18px; }
.panneau h5 { margin: 0 0 14px; font-family: var(--f-titre); font-size: 14px; display: flex; justify-content: space-between; }
.panneau h5 small { font-family: var(--f-texte); font-weight: 500; color: var(--gris); font-size: 12px; }
.recrut { display: grid; gap: 10px; }
.recrut div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 12px; font-size: 13px; align-items: center; }
.recrut div span:last-child { color: var(--gris); font-size: 12px; }
.recrut div i { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: #EBEFF5; overflow: hidden; }
.recrut div i::after { content: ""; display: block; height: 100%; width: var(--p); background: var(--foret-3); border-radius: 6px; }
.alertes { display: grid; gap: 10px; font-size: 13px; }
.alertes div { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.alertes b { width: 8px; height: 8px; border-radius: 50%; background: var(--ocre); margin-top: 6px; flex: none; }
.alertes div:nth-child(3) b { background: var(--foret-3); }
.docs { display: grid; gap: 8px; font-size: 13px; }
.docs div { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--creme); }
.docs em { font-style: normal; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--sable); color: var(--foret-nuit); }
.docs em.ok { background: var(--sauge); }
.app-mention { position: absolute; right: 0; top: -28px; font-size: 12px; color: var(--gris); }
.pourquoi { padding: clamp(88px, 11vw, 150px) 0; background: var(--creme); }
.pourquoi-grille { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 110px); }
.pourquoi-gauche { position: sticky; top: 120px; align-self: start; }
.pourquoi-gauche .titre-section { max-width: 11ch; }
.pourquoi-gauche .btn, .pourquoi-gauche .wp-block-buttons > .btn { margin-top: 36px; }
.arguments { list-style: none; margin: 0; padding: 0; counter-reset: arg; }
.argument { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; padding: 32px 0; border-top: 1px solid var(--trait); counter-increment: arg; }
.argument:last-child { border-bottom: 1px solid var(--trait); }
.argument::before { content: "0" counter(arg); font-family: var(--f-titre); font-weight: 700; font-size: 14px; color: var(--ocre); padding-top: 10px; }
.argument h3 { font-size: clamp(26px, 2.8vw, 36px); transition: color .3s ease, transform .3s ease; }
.argument p:where(:not(.cv, .u-c)) { color: var(--gris); margin-top: 8px; font-size: 17px; max-width: 46ch; }
.argument:hover h3 { color: var(--foret-3); transform: translateX(6px); }
.methode { padding: clamp(88px, 11vw, 140px) 0; background: var(--blanc); border-top: 1px solid var(--trait); }
.methode-tete { text-align: center; }
.methode-tete .titre-section, .methode-tete .chapo { margin-inline: auto; }
.frise { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 72px; }
.frise::before { content: ""; position: absolute; top: 36px; left: 0; right: 0; height: 2px; background: var(--trait); }
.frise::after { content: ""; position: absolute; top: 36px; left: 0; height: 2px; width: var(--progression, 0%); background: var(--foret); transition: width 1.6s cubic-bezier(.2,.8,.2,1); }
.en-vue.frise { --progression: 100%; }
.etape { position: relative; z-index: 1; }
.etape .pastille { width: 74px; height: 74px; border-radius: 50%; background: var(--blanc); border: 2px solid var(--trait); display: grid; place-items: center; font-family: var(--f-titre); font-weight: 800; font-size: 20px; color: var(--foret); transition: border-color .4s ease, background-color .4s ease, color .4s ease; }
.en-vue .etape .pastille { border-color: var(--foret); }
.etape:last-child .pastille { background: var(--foret); color: var(--sable); border-color: var(--foret); }
.etape h3 { font-size: 24px; margin-top: 28px; }
.etape p:where(:not(.cv, .u-c)) { color: var(--gris); font-size: 16px; margin-top: 10px; max-width: 28ch; }
.secteurs { padding: clamp(80px, 10vw, 130px) 0; background: var(--sable); position: relative; overflow: hidden; }
.secteurs.a-cernes::before { width: 900px; left: -380px; bottom: -520px; opacity: .1; }
.secteurs-grille { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.secteurs .chapo { color: #5B4A36; }
.secteurs-liste { display: flex; flex-wrap: wrap; gap: 12px; }
.secteurs-liste span { font-family: var(--f-titre); font-weight: 700; font-size: clamp(17px, 1.7vw, 22px); padding: 14px 24px; border-radius: 999px; background: var(--creme); color: var(--foret-nuit); transition: background-color .3s ease, color .3s ease, transform .3s ease; cursor: default; }
.secteurs-liste span:hover { background: var(--foret); color: var(--creme); transform: translateY(-2px); }
.confiance { padding: clamp(72px, 9vw, 120px) 0; background: var(--creme); }
.confiance-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.emplacement { border: 1.5px dashed #B9C3D1; border-radius: var(--r-m); padding: 22px; min-height: 140px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  background: repeating-linear-gradient(-45deg, transparent 0 12px, rgba(185,195,209,.12) 12px 13px); }
.emplacement .badge { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; background: var(--anthracite); color: var(--creme); }
.emplacement strong { font-family: var(--f-titre); font-size: 18px; display: block; }
.emplacement small { color: var(--gris); font-size: 14px; }
.logos-emplacements { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.logos-emplacements span { height: 64px; border: 1.5px dashed #B9C3D1; border-radius: 12px; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: #7C8799; }
.ressources { padding: clamp(88px, 11vw, 140px) 0; background: var(--blanc); border-top: 1px solid var(--trait); }
.ressources-tete { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; }
.articles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 56px; }
.article { display: flex; flex-direction: column; border-radius: var(--r-m); background: var(--creme); overflow: hidden; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
.article:hover { transform: translateY(-6px); box-shadow: var(--ombre); }
.article-visuel { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--foret); color: var(--sable); }
.article-visuel.a-cernes::before { width: 420px; right: -140px; top: -120px; opacity: .22; color: var(--sable); transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.article:hover .article-visuel.a-cernes::before { transform: rotate(18deg) scale(1.05); }
.article-visuel .grand-chiffre { position: absolute; left: 26px; bottom: 16px; font-family: var(--f-titre); font-weight: 800; font-size: 96px; line-height: 1; letter-spacing: -0.05em; }
.article:nth-child(2) .article-visuel { background: var(--sable); color: var(--foret); }
.article:nth-child(2) .article-visuel.a-cernes::before { color: var(--foret); opacity: .14; }
.article:nth-child(3) .article-visuel { background: var(--anthracite); }
.article-corps { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.article-meta { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--gris); }
.article-meta b { font-weight: 600; color: var(--foret-3); }
.article h3 { font-size: 22px; line-height: 1.2; margin-top: 14px; }
.article .lien-fleche { margin-top: auto; padding-top: 24px; }
.cta-final { padding: clamp(40px, 5vw, 64px) 0 clamp(72px, 9vw, 120px); background: var(--blanc); }
.cta-boite { position: relative; overflow: hidden; background: var(--foret); color: var(--creme); border-radius: clamp(24px, 3vw, 40px); padding: clamp(48px, 8vw, 110px) clamp(28px, 7vw, 100px); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 48px; align-items: end; }
.cta-boite.a-cernes::before { width: 900px; right: -320px; top: -360px; color: var(--sable); opacity: .12; }
.cta-boite h2 { position: relative; font-size: clamp(38px, 5.6vw, 76px); letter-spacing: -0.035em; line-height: 1.02; max-width: 13ch; }
.cta-boite p:where(:not(.cv, .u-c)) { position: relative; font-size: clamp(17px, 1.5vw, 19px); color: rgba(247,248,251,.75); margin-top: 24px; max-width: 48ch; }
.cta-actions { position: relative; display: grid; gap: 12px; }
.cta-actions .btn, .cta-actions .wp-block-buttons > .btn { width: 100%; }
.cta-rappel { position: relative; display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(247,248,251,.7); margin-top: 6px; justify-content: center; }
.cta-rappel.ic-av::before, .cta-rappel .ic-av::before, .cta-rappel.ic-ap::after, .cta-rappel .ic-ap::after, .cta-rappel.ic-seul::before, .cta-rappel .ic-seul::before { width: 16px; height: 16px; color: var(--sable); }
.pied { background: var(--foret-nuit); color: rgba(247,248,251,.7); padding: 80px 0 36px; font-size: 15px; }
.pied-grille { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.pied .marque { color: var(--creme); }
.pied .marque small { color: rgba(247,248,251,.5); }
.pied-accroche { margin-top: 20px; max-width: 34ch; }
.pied h4 { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--sable); margin-bottom: 18px; font-weight: 700; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pied a:hover { color: var(--creme); }
.pied .a-completer { color: var(--ocre); font-style: normal; font-size: 14px; }
.pied-bas { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 64px; padding-top: 28px; border-top: 1px solid rgba(249,227,200,.12); font-size: 13px; }
.page-hero { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 7vw, 96px); border-bottom: 1px solid var(--trait); }
.page-hero.a-cernes::before { width: 820px; right: -260px; top: -300px; }
.page-hero .enveloppe { position: relative; }
.ariane { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--gris); }
.ariane a:hover { color: var(--foret); }
.ariane span[aria-hidden] { color: #A9B2C0; }
.page-hero h1 { font-size: clamp(40px, 5.4vw, 72px); letter-spacing: -0.035em; line-height: 1.03; margin-top: 28px; max-width: 16ch; }
.page-hero h1 em { font-style: normal; color: var(--foret-3); }
.page-hero .chapo { font-size: clamp(18px, 1.6vw, 20px); max-width: 58ch; margin-top: 24px; }
.page-hero .hero-actions { margin-top: 34px; }
.sommaire { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 44px; }
.sommaire a { font-family: var(--f-titre); font-weight: 600; font-size: 14.5px; padding: 9px 16px; border-radius: 999px; background: var(--blanc); border: 1px solid var(--trait); transition: border-color .2s ease, color .2s ease, background-color .2s ease; }
.sommaire a:hover { border-color: var(--foret); color: var(--foret); }
.solution { padding: clamp(72px, 9vw, 120px) 0; scroll-margin-top: 70px; }
.solution:nth-of-type(odd) { background: var(--blanc); }
.solution-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.solution:nth-of-type(even) .solution-texte { order: 2; }
.solution-tete { display: flex; align-items: center; gap: 16px; }
.solution-tete .ico { width: 56px; height: 56px; border-radius: 16px; background: var(--foret); color: var(--sable); display: grid; place-items: center; flex: none; }
.solution-tete .ico.ic-av::before, .solution-tete .ico .ic-av::before, .solution-tete .ico.ic-ap::after, .solution-tete .ico .ic-ap::after, .solution-tete .ico.ic-seul::before, .solution-tete .ico .ic-seul::before { width: 28px; height: 28px; }
.solution-tete .num { font-family: var(--f-titre); font-weight: 700; font-size: 14px; color: var(--ocre); letter-spacing: .08em; }
.solution h2 { font-size: clamp(32px, 3.8vw, 48px); margin-top: 28px; }
.solution-texte > p:where(:not(.cv, .u-c)) { color: var(--gris); font-size: 18px; margin-top: 18px; max-width: 50ch; }
.gains { display: grid; gap: 14px; margin-top: 32px; }
.gain { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; }
.gain b { width: 36px; height: 36px; border-radius: 10px; background: var(--sable); color: var(--foret-nuit); display: grid; place-items: center; }
.gain b.ic-av::before, .gain b .ic-av::before, .gain b.ic-ap::after, .gain b .ic-ap::after, .gain b.ic-seul::before, .gain b .ic-seul::before { width: 18px; height: 18px; }
.gain strong { display: block; font-family: var(--f-titre); font-size: 17px; }
.gain span { color: var(--gris); font-size: 15.5px; }
.panneau-solution { background: var(--creme); border: 1px solid var(--trait); border-radius: var(--r-l); padding: clamp(28px, 3.5vw, 44px); position: relative; }
.solution:nth-of-type(even) .panneau-solution { background: var(--blanc); }
.panneau-solution h3 { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--foret-3); }
.liste-coche { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.liste-coche li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; font-size: 16.5px; line-height: 1.5; }
.liste-coche li::before { content: ""; width: 24px; height: 24px; border-radius: 50%; margin-top: 1px;
  background: var(--foret) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F9E3C8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9'/%3E%3C/svg%3E") center / 16px no-repeat; }
.outil-lie { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; padding: 18px 20px; border-radius: 16px; background: var(--foret-nuit); color: var(--creme); transition: transform .3s ease, background-color .3s ease; }
.outil-lie:hover { transform: translateY(-2px); background: var(--foret); }
.outil-lie small { display: block; font-size: 12.5px; color: rgba(247,248,251,.65); }
.outil-lie strong { font-family: var(--f-titre); font-size: 17px; }
.outil-lie.ic-av::before, .outil-lie .ic-av::before, .outil-lie.ic-ap::after, .outil-lie .ic-ap::after, .outil-lie.ic-seul::before, .outil-lie .ic-seul::before { width: 20px; height: 20px; color: var(--ocre); flex: none; }
.solution-cta { margin-top: 34px; }
.produit-section { padding: clamp(80px, 10vw, 136px) 0; scroll-margin-top: 70px; position: relative; overflow: hidden; }
.produit-section.clair { background: var(--blanc); }
.produit-section.pale { background: var(--sable-clair); }
.produit-section.fonce { background: var(--foret-nuit); color: var(--creme); }
.produit-section.fonce .chapo { color: rgba(247,248,251,.72); }
.produit-section.a-cernes::before { width: 1000px; right: -420px; bottom: -520px; }
.produit-section.fonce.a-cernes::before { color: var(--sable); opacity: .08; }
.produit-grille { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.produit-section.inverse .produit-grille > :first-child { order: 2; }
.produit-marque { display: inline-flex; align-items: center; gap: 12px; font-family: var(--f-titre); font-weight: 800; font-size: 18px; }
.produit-marque i { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--foret); color: var(--sable); font-style: normal; font-size: 16px; }
.produit-section.fonce .produit-marque i { background: var(--ocre); color: var(--foret-nuit); }
.produit-section h2 { font-size: clamp(36px, 4.6vw, 60px); letter-spacing: -0.035em; margin-top: 22px; max-width: 14ch; }
.produit-section .chapo { max-width: 50ch; }
.fonctions-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 34px; }
.fonction { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 14px; background: var(--creme); border: 1px solid var(--trait); font-weight: 500; font-size: 15.5px; }
.produit-section.pale .fonction { background: var(--blanc); }
.produit-section.fonce .fonction { background: rgba(247,248,251,.05); border-color: rgba(249,227,200,.14); }
.fonction::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--ocre); flex: none; }
.produit-section .hero-actions { margin-top: 36px; }
.produit-section .note-fictive { display: block; margin-top: 14px; font-size: 12px; color: var(--gris); text-align: right; }
.produit-section.fonce .note-fictive { color: rgba(247,248,251,.5); }
.mini-app { background: var(--blanc); border-radius: var(--r-l); box-shadow: var(--ombre-forte); border: 1px solid rgba(6,38,80,.06); overflow: hidden; }
.mini-app .app-principal { padding: 22px; }
.mini-app .app-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#jokkopay .produit-grille > div:last-child { isolation: isolate; padding: 0 18px 18px 0; }
.bulletin { position: relative; background: var(--blanc); color: var(--anthracite); border-radius: var(--r-l); padding: 28px; box-shadow: var(--ombre-forte); max-width: 520px; margin-left: auto; }
.bulletin::after { content: ""; position: absolute; inset: 18px -18px -18px 18px; background: var(--ocre); border-radius: var(--r-l); z-index: -1; opacity: .9; }
.bulletin-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 18px; border-bottom: 1px dashed var(--trait); }
.bulletin-tete strong { font-family: var(--f-titre); font-size: 18px; display: block; }
.bulletin-tete small { color: var(--gris); font-size: 12.5px; }
.bulletin-tete .etat { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--sauge); color: var(--foret); white-space: nowrap; }
.bulletin table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.bulletin th { text-align: left; font-weight: 600; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); padding: 8px 0; }
.bulletin th:last-child, .bulletin td:last-child { text-align: right; }
.bulletin td { padding: 9px 0; border-top: 1px solid #EEF1F5; }
.bulletin td.moins { color: #A24A12; }
.bulletin tfoot td { border-top: 2px solid var(--foret); font-family: var(--f-titre); font-weight: 800; font-size: 17px; padding-top: 14px; }
.bulletin-pied { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.bulletin-pied span { font-size: 12px; padding: 5px 10px; border-radius: 999px; background: var(--creme); border: 1px solid var(--trait); }
.modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.module { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-m); padding: 22px; display: grid; gap: 14px; transition: transform .3s ease, box-shadow .3s ease; }
.module:hover { transform: translateY(-4px); box-shadow: var(--ombre); }
.module .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--sable-clair); color: var(--foret); display: grid; place-items: center; }
.module .ico.ic-av::before, .module .ico .ic-av::before, .module .ico.ic-ap::after, .module .ico .ic-ap::after, .module .ico.ic-seul::before, .module .ico .ic-seul::before { width: 22px; height: 22px; }
.module strong { font-family: var(--f-titre); font-size: 17px; }
.module:last-child { grid-column: 1 / -1; grid-template-columns: 44px minmax(0, 1fr); align-items: center; }
.module.rh { background: var(--foret); border-color: var(--foret); color: var(--creme); }
.module.rh .ico { background: rgba(249,227,200,.16); color: var(--sable); }
.duo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; align-items: stretch; margin-top: 56px; }
.duo-carte { border-radius: var(--r-l); padding: clamp(28px, 3.5vw, 44px); border: 1px solid rgba(249,227,200,.16); background: rgba(247,248,251,.04); }
.duo-carte h3 { font-size: clamp(24px, 2.6vw, 32px); margin-top: 14px; }
.duo-carte .liste-coche li { font-size: 16px; color: rgba(247,248,251,.85); }
.duo-carte .liste-coche li::before { background-color: var(--ocre); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23062650' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9'/%3E%3C/svg%3E"); }
.duo-carte .role { font-family: var(--f-titre); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ocre); }
.duo-signe { align-self: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ocre); color: var(--foret-nuit); display: grid; place-items: center; font-family: var(--f-titre); font-weight: 800; font-size: 26px; }
.manifeste { padding: clamp(80px, 10vw, 140px) 0; background: var(--blanc); }
.manifeste p:where(:not(.cv, .u-c)).grand { font-family: var(--f-titre); font-weight: 600; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.25; letter-spacing: -0.02em; max-width: 30ch; text-wrap: balance; }
.manifeste p:where(:not(.cv, .u-c)).grand em { font-style: normal; color: var(--foret-3); }
.manifeste p:where(:not(.cv, .u-c)).grand strong { color: var(--ocre); font-weight: 700; }
.piliers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 72px; border-top: 1px solid var(--trait); }
.pilier { padding: 36px 32px 0 0; }
.pilier + .pilier { padding-left: 32px; border-left: 1px solid var(--trait); }
.pilier .num { font-family: var(--f-titre); font-weight: 700; font-size: 13px; color: var(--ocre); letter-spacing: .08em; }
.pilier h3 { font-size: 28px; margin-top: 14px; }
.pilier p:where(:not(.cv, .u-c)) { color: var(--gris); margin-top: 10px; }
.pilier .qui { display: inline-block; margin-top: 18px; font-size: 13px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--sable-clair); color: var(--foret); }
.equipe-emplacements { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.equipe-emplacements .emplacement { min-height: 220px; }
.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.filtre { font-family: var(--f-titre); font-weight: 700; font-size: 14.5px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--trait); background: var(--blanc); color: var(--anthracite); cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.filtre:hover { border-color: var(--foret); }
.filtre.actif { background: var(--foret); border-color: var(--foret); color: var(--creme); }
.ressources-liste { padding: clamp(56px, 7vw, 96px) 0 clamp(80px, 10vw, 130px); background: var(--blanc); }
.ressources-liste .articles { margin-top: 40px; }
.article[hidden], .emplacement[hidden] { display: none; }
.article:nth-child(4) .article-visuel { background: var(--foret-3); }
.article:nth-child(5) .article-visuel { background: var(--ocre); color: var(--foret-nuit); }
.article:nth-child(5) .article-visuel.a-cernes::before { color: var(--foret-nuit); opacity: .15; }
.article-corps p:where(:not(.cv, .u-c)) { color: var(--gris); font-size: 15px; margin-top: 10px; }
.vide-categorie { grid-column: 1 / -1; }
.contact { padding: clamp(56px, 7vw, 96px) 0 clamp(80px, 10vw, 130px); background: var(--blanc); scroll-margin-top: 70px; }
.contact-grille { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.formulaire { background: var(--creme); border: 1px solid var(--trait); border-radius: var(--r-l); padding: clamp(24px, 4vw, 48px); }
.formulaire h2 { font-size: clamp(28px, 3vw, 38px); }
.formulaire > p:where(:not(.cv, .u-c)) { color: var(--gris); margin-top: 10px; }
.champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; margin-top: 32px; }
.champ { display: grid; gap: 7px; }
.champ.large { grid-column: 1 / -1; }
.champ label { font-family: var(--f-titre); font-weight: 700; font-size: 14px; }
.champ label i { font-style: normal; color: var(--ocre); }
.champ input, .champ select, .champ textarea { font: inherit; font-size: 16px; color: var(--anthracite);
  width: 100%; min-height: 52px; padding: 12px 16px;
  background: var(--blanc); border: 1.5px solid var(--trait); border-radius: 12px;
  transition: border-color .2s ease, box-shadow .2s ease; appearance: none; -webkit-appearance: none; }
.champ select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6577' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; }
.champ textarea { min-height: 140px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--foret-3); box-shadow: 0 0 0 4px rgba(42,92,152,.14); }
.case { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; cursor: pointer; }
.champ.case input { width: 22px; height: 22px; min-height: 0; padding: 0; margin: 1px 0 0; border: 0; border-radius: 4px; appearance: auto; -webkit-appearance: checkbox; accent-color: var(--foret); flex: none; box-shadow: none; }
.case strong { font-family: var(--f-titre); display: block; font-size: 15.5px; }
.case span { color: var(--gris); }
.case.rappel { padding: 16px 18px; border-radius: 14px; background: var(--sable); }
.case.rappel span { color: #5B4A36; }
.formulaire-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }
.formulaire-bas small { color: var(--gris); font-size: 13px; max-width: 42ch; }
.formulaire .confirmation { margin-top: 18px; padding: 14px 18px; border-radius: 12px; background: var(--sauge); color: var(--foret-nuit); font-size: 15px; }
.contact-cote { display: grid; gap: 18px; }
.coord { background: var(--foret-nuit); color: var(--creme); border-radius: var(--r-l); padding: 32px; }
.coord h3 { font-size: 22px; }
.coord ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 16px; }
.coord li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; font-size: 15px; }
.coord li.ic-av::before, .coord li .ic-av::before, .coord li.ic-ap::after, .coord li .ic-ap::after, .coord li.ic-seul::before, .coord li .ic-seul::before { width: 22px; height: 22px; color: var(--ocre); }
.coord li small { display: block; color: rgba(247,248,251,.6); font-size: 12.5px; }
.coord .a-completer { color: var(--ocre); font-style: normal; }
.suite { border: 1px solid var(--trait); border-radius: var(--r-l); padding: 32px; }
.suite h3 { font-size: 20px; }
.suite ol { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 16px; counter-reset: s; }
.suite li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; counter-increment: s; font-size: 15px; color: var(--gris); }
.suite li::before { content: counter(s); width: 32px; height: 32px; border-radius: 50%; background: var(--sable-clair); color: var(--foret); display: grid; place-items: center; font-family: var(--f-titre); font-weight: 800; font-size: 14px; }
.suite li strong { display: block; color: var(--anthracite); font-family: var(--f-titre); }
.portail { padding: clamp(56px, 7vw, 96px) 0 clamp(80px, 10vw, 130px); background: var(--blanc); }
.acces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.acces-carte { display: flex; flex-direction: column; border: 1px solid var(--trait); border-radius: var(--r-l); padding: 32px; background: var(--creme); }
.acces-carte .produit-marque { font-size: 22px; }
.acces-carte p:where(:not(.cv, .u-c)) { color: var(--gris); margin-top: 14px; font-size: 15.5px; }
.acces-carte .url { margin-top: 18px; font-size: 13px; padding: 8px 12px; border-radius: 10px; border: 1.5px dashed #B9C3D1; color: #7C8799; overflow-wrap: anywhere; }
.acces-carte .btn, .acces-carte .wp-block-buttons > .btn { margin-top: auto; }
.acces-carte .acces-bas { margin-top: 26px; display: grid; gap: 10px; }
.acces-carte.principal { background: var(--foret); border-color: var(--foret); color: var(--creme); }
.acces-carte.principal p:where(:not(.cv, .u-c)) { color: rgba(247,248,251,.72); }
.acces-carte.principal .produit-marque i { background: var(--ocre); color: var(--foret-nuit); }
.acces-carte.principal .url { border-color: rgba(249,227,200,.35); color: var(--sable); }
.aide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.aide > div { border-radius: var(--r-l); padding: 32px; border: 1px solid var(--trait); display: flex; gap: 18px; align-items: flex-start; }
.aide .ico { width: 48px; height: 48px; border-radius: 14px; background: var(--sable); color: var(--foret-nuit); display: grid; place-items: center; flex: none; }
.aide .ico.ic-av::before, .aide .ico .ic-av::before, .aide .ico.ic-ap::after, .aide .ico .ic-ap::after, .aide .ico.ic-seul::before, .aide .ico .ic-seul::before { width: 24px; height: 24px; }
.aide h3 { font-size: 20px; }
.aide p:where(:not(.cv, .u-c)) { color: var(--gris); margin-top: 6px; font-size: 15.5px; }
.aide .lien-fleche { margin-top: 14px; }
.securite { display: flex; align-items: center; gap: 10px; margin-top: 28px; font-size: 14px; color: var(--gris); }
.securite.ic-av::before, .securite .ic-av::before, .securite.ic-ap::after, .securite .ic-ap::after, .securite.ic-seul::before, .securite .ic-seul::before { width: 18px; height: 18px; color: var(--foret-3); }
@media (max-width: 1080px) {
.solution-grille, .produit-grille, .contact-grille { grid-template-columns: minmax(0, 1fr); }
.solution:nth-of-type(even) .solution-texte, .produit-section.inverse .produit-grille > :first-child { order: 0; }
.bulletin { margin: 0 18px 18px 0; }
.modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.duo { grid-template-columns: minmax(0, 1fr); }
.duo-signe { justify-self: center; }
.piliers { grid-template-columns: minmax(0, 1fr); }
.pilier, .pilier + .pilier { padding: 30px 0; border-left: 0; }
.pilier + .pilier { border-top: 1px solid var(--trait); }
.equipe-emplacements, .acces { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
.fonctions-grille, .champs, .modules, .aide { grid-template-columns: minmax(0, 1fr); }
.champ.large { grid-column: auto; }
.formulaire-bas .btn, .formulaire-bas .wp-block-buttons > .btn { width: 100%; }
.bulletin { padding: 20px; }
.bulletin-tete { flex-direction: column; }
.page-hero.a-cernes::before { width: 560px; right: -300px; top: -220px; }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.recherche-emploi { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 8px; margin-top: 40px; padding: 8px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 20px; box-shadow: var(--ombre); max-width: 880px; }
.recherche-champ { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 14px; }
.recherche-champ + .recherche-champ { border-left: 1px solid var(--trait); border-radius: 0; }
.recherche-champ.ic-av::before, .recherche-champ .ic-av::before, .recherche-champ.ic-ap::after, .recherche-champ .ic-ap::after, .recherche-champ.ic-seul::before, .recherche-champ .ic-seul::before { width: 20px; height: 20px; color: var(--foret-3); flex: none; }
.recherche-champ input { font: inherit; font-size: 16px; border: 0; background: transparent; width: 100%; min-height: 52px; color: var(--anthracite); }
.recherche-champ input:focus { outline: none; }
.recherche-champ:focus-within { box-shadow: inset 0 0 0 2px rgba(42,92,152,.25); }
.emplois { padding: clamp(48px, 6vw, 80px) 0 clamp(72px, 9vw, 110px); background: var(--blanc); }
.emplois-grille { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.filtres-emploi { position: sticky; top: 100px; display: grid; gap: 28px; }
.filtre-bloc { display: grid; gap: 12px; }
.filtre-bloc h3 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--foret-3); margin-bottom: 2px; }
.filtre-bloc .case input { width: 20px; height: 20px; accent-color: var(--foret); margin: 1px 0 0; flex: none; }
.filtre-bloc .case span { color: var(--anthracite); }
.alerte-emploi { padding: 22px; border-radius: var(--r-m); background: var(--sable); }
.alerte-emploi strong { font-family: var(--f-titre); font-size: 17px; }
.alerte-emploi p:where(:not(.cv, .u-c)) { color: #5B4A36; font-size: 14.5px; margin-top: 6px; }
.alerte-emploi .lien-fleche { margin-top: 12px; }
.resultats-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.resultats-tete p:where(:not(.cv, .u-c)) { font-size: 16px; color: var(--gris); }
.resultats-tete strong { font-family: var(--f-titre); color: var(--anthracite); font-size: 20px; }
.badge-exemple { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px; border-radius: 8px; background: var(--anthracite); color: var(--creme); }
.offres { display: grid; gap: 14px; margin-top: 20px; }
.offre { position: relative; border: 1px solid var(--trait); border-radius: var(--r-m); padding: 26px 28px; background: var(--blanc); transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.offre:hover { border-color: transparent; box-shadow: var(--ombre); transform: translateY(-3px); }
.offre::before { content: ""; position: absolute; left: -1px; top: 24px; bottom: 24px; width: 3px; border-radius: 3px; background: var(--ocre); opacity: 0; transition: opacity .3s ease; }
.offre:hover::before { opacity: 1; }
.offre-tete { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.offre-logo { width: 56px; height: 56px; border-radius: 14px; border: 1.5px dashed #B9C3D1; display: grid; place-items: center; font-size: 10.5px; font-weight: 600; color: #7C8799; }
.offre h3 { font-size: 21px; }
.offre h3 a:hover { color: var(--foret-3); }
.offre-ent { font-size: 14.5px; color: var(--gris); margin-top: 3px; }
.offre-date { font-size: 13px; color: #7C8799; white-space: nowrap; align-self: start; }
.offre-resume { color: var(--gris); font-size: 15.5px; margin-top: 16px; max-width: 70ch; }
.offre-pied { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; }
.etiq { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 999px; background: var(--creme); border: 1px solid var(--trait); }
.etiq.ic-av::before, .etiq .ic-av::before, .etiq.ic-ap::after, .etiq .ic-ap::after, .etiq.ic-seul::before, .etiq .ic-seul::before { width: 14px; height: 14px; color: var(--foret-3); }
.etiq.fort { background: var(--foret); border-color: var(--foret); color: var(--creme); font-weight: 600; }
.btn-petit, .wp-block-buttons > .btn-petit { min-height: 42px; padding: 0 18px; font-size: 14px; }
.aucune-offre { padding: 28px; border-radius: var(--r-m); border: 1.5px dashed #B9C3D1; color: var(--gris); }
.depot-cv { display: grid; grid-template-columns: 52px minmax(0, 1fr) 24px; gap: 18px; align-items: center; margin-top: 22px; padding: 22px 26px; border-radius: var(--r-m); background: var(--foret-nuit); color: var(--creme); transition: background-color .3s ease; }
.depot-cv:hover { background: var(--foret); }
.depot-cv .ico { width: 52px; height: 52px; border-radius: 14px; background: var(--ocre); color: var(--foret-nuit); display: grid; place-items: center; }
.depot-cv .ico.ic-av::before, .depot-cv .ico .ic-av::before, .depot-cv .ico.ic-ap::after, .depot-cv .ico .ic-ap::after, .depot-cv .ico.ic-seul::before, .depot-cv .ico .ic-seul::before { width: 26px; height: 26px; }
.depot-cv strong { display: block; font-family: var(--f-titre); font-size: 18px; }
.depot-cv span span, .depot-cv > span:nth-child(2) { color: rgba(247,248,251,.75); font-size: 15px; }
.depot-cv > span:nth-child(2) strong { color: var(--creme); }
.depot-cv .fl { width: 22px; height: 22px; color: var(--ocre); }
.espaces { padding: clamp(72px, 9vw, 120px) 0; background: var(--creme); scroll-margin-top: 70px; }
.espaces-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.espace { border-radius: var(--r-l); padding: clamp(28px, 4vw, 52px); }
.espace h2 { font-size: clamp(30px, 3.4vw, 44px); margin-top: 14px; }
.espace .role { font-family: var(--f-titre); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ocre); }
.espace .liste-coche { margin-top: 26px; }
.espace .hero-actions { margin-top: 32px; }
.espace.candidat { background: var(--foret-nuit); color: var(--creme); }
.espace.candidat .liste-coche li { color: rgba(247,248,251,.85); }
.espace.candidat .liste-coche li::before { background-color: var(--ocre); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23062650' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9'/%3E%3C/svg%3E"); }
.espace.entreprise { background: var(--blanc); border: 1px solid var(--trait); }
@media (max-width: 1080px) {
.emplois-grille, .espaces-grille { grid-template-columns: minmax(0, 1fr); }
.filtres-emploi { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.alerte-emploi { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
.recherche-emploi { grid-template-columns: minmax(0, 1fr); }
.recherche-champ + .recherche-champ { border-left: 0; border-top: 1px solid var(--trait); }
.filtres-emploi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
.filtres-emploi .alerte-emploi { display: none; }
.filtre-bloc .case span { font-size: 14.5px; }
.offre { padding: 22px 20px; }
.offre-tete { grid-template-columns: 48px minmax(0, 1fr); }
.offre-logo { width: 48px; height: 48px; }
.offre-date { grid-column: 1 / -1; }
.offre-pied .btn, .offre-pied .wp-block-buttons > .btn { width: 100%; }
.espace .hero-actions .btn, .espace .hero-actions .wp-block-buttons > .btn { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
.js .apparait { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
.js .apparait.en-vue { opacity: 1; transform: none; }
}
@media (max-width: 1360px) {
.nav { gap: 0; }
.nav a { padding: 8px 8px; font-size: 14.5px; }
.btn-espace span { display: none; }
.entete-barre { gap: 18px; }
}
@media (max-width: 1180px) {
.nav, .entete-actions .btn-plein, .entete-actions .wp-block-buttons > .btn-plein, .btn-espace, .wp-block-buttons > .btn-espace { display: none; }
.burger { display: inline-flex; margin-left: auto; }
}
@media (max-width: 1180px) {
.menu-mobile { display: block; position: fixed; inset: 78px 0 0; z-index: 49;
    background: var(--creme); padding: 24px var(--gouttiere) 40px; overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s; }
.menu-ouvert .menu-mobile { opacity: 1; visibility: visible; transform: none; }
.menu-mobile nav { display: grid; }
.menu-mobile nav a { font-family: var(--f-titre); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; padding: 12px 0; border-bottom: 1px solid var(--trait); }
.menu-mobile .actions { display: grid; gap: 12px; margin-top: 32px; }
.menu-mobile .actions .btn, .menu-mobile .actions .wp-block-buttons > .btn { width: 100%; }
.menu-mobile .btn-espace, .menu-mobile .wp-block-buttons > .btn-espace { display: inline-flex; }
.menu-mobile .btn-espace span { display: inline; }
}
@media (max-width: 1080px) {
.nav, .entete-actions .btn-plein, .entete-actions .wp-block-buttons > .btn-plein, .btn-espace, .wp-block-buttons > .btn-espace { display: none; }
.burger { display: inline-flex; margin-left: auto; }
.menu-mobile { display: block; position: fixed; inset: 78px 0 0; z-index: 49;
    background: var(--creme); padding: 24px var(--gouttiere) 40px; overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s; }
.menu-ouvert .menu-mobile { opacity: 1; visibility: visible; transform: none; }
.menu-mobile nav { display: grid; }
.menu-mobile nav a { font-family: var(--f-titre); font-weight: 700; font-size: 28px; letter-spacing: -0.02em; padding: 14px 0; border-bottom: 1px solid var(--trait); }
.menu-mobile .actions { display: grid; gap: 12px; margin-top: 32px; }
.menu-mobile .actions .btn, .menu-mobile .actions .wp-block-buttons > .btn { width: 100%; }
.hero-grille { grid-template-columns: minmax(0, 1fr); }
.hero h1 { max-width: 16ch; }
.hero-visuel { max-width: 640px; margin-top: 16px; }
.cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.carte-large { grid-column: span 2; }
.valeur-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.valeur-item:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--trait); }
.valeur-item:nth-child(4) { border-top: 1px solid var(--trait); }
.valeur-tete, .jokkorh-tete, .pourquoi-grille, .secteurs-grille, .cta-boite { grid-template-columns: minmax(0, 1fr); }
.pourquoi-gauche { position: static; }
.app-corps { grid-template-columns: minmax(0, 1fr); }
.app-lateral { display: none; }
.app-bas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.app-bas .panneau:first-child { grid-column: 1 / -1; }
.produits { grid-template-columns: minmax(0, 1fr); }
.produit { min-height: 0; }
.confiance-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.logos-emplacements { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
body { font-size: 16px; }
.entete-barre { height: 68px; }
.menu-mobile { inset: 68px 0 0; }
.marque small { display: none; }
.marque img { height: 46px; }
.hero-actions .btn, .hero-actions .wp-block-buttons > .btn { width: 100%; }
.flottant-paie { left: -6px; bottom: -34px; }
.flottant-conge { right: -6px; top: -26px; }
.a-plaque-sable::before { content: ""; inset: 30px -14px -20px 30px; }
.ecran-corps { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.ecran-menu { display: none; }
.kpi strong { font-size: 18px; }
.hero-visuel .donnees-fictives { bottom: -64px; }
.hero { padding-bottom: 110px; }
.valeur-grille { grid-template-columns: minmax(0, 1fr); }
.valeur-item, .valeur-item + .valeur-item { padding: 28px 0; border-left: 0; }
.valeur-item + .valeur-item { border-top: 1px solid var(--trait); }
.valeur-item .num { right: 0; top: 28px; }
.cartes { grid-template-columns: minmax(0, 1fr); }
.carte-large { grid-column: auto; }
.carte { min-height: 0; }
.chaine { grid-template-columns: minmax(0, 1fr); gap: 26px; text-align: left; }
.chaine::before { top: 28px; bottom: 28px; left: 27px; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, rgba(249,227,200,.4), var(--ocre)); }
.chaine-etape { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; text-align: left; padding: 0; align-items: center; }
.chaine-etape b { grid-row: span 2; margin: 0; }
.chaine-etape strong { margin-top: 0; }
.app-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-kpi strong { font-size: 24px; }
.app-bas { grid-template-columns: minmax(0, 1fr); }
.app-principal { padding: 18px; }
.frise { grid-template-columns: minmax(0, 1fr); gap: 36px; }
.frise::before, .frise::after { top: 0; bottom: 0; left: 36px; right: auto; width: 2px; height: auto; }
.frise::after { height: var(--progression, 0%); width: 2px; transition: height 1.6s cubic-bezier(.2,.8,.2,1); }
.etape { display: grid; grid-template-columns: 74px minmax(0, 1fr); column-gap: 22px; }
.etape .pastille { grid-row: span 2; }
.etape h3 { margin-top: 10px; }
.methode-tete { text-align: left; }
.methode-tete .titre-section, .methode-tete .chapo { margin-inline: 0; }
.articles { grid-template-columns: minmax(0, 1fr); }
.confiance-grille { grid-template-columns: minmax(0, 1fr); }
.logos-emplacements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pied-grille { grid-template-columns: minmax(0, 1fr); }
.alliance-tete { text-align: left; }
.alliance-tete p:where(:not(.cv, .u-c)) { margin-left: 0; }
.alliance-cta { text-align: left; }
.alliance-cta .btn, .alliance-cta .wp-block-buttons > .btn, .cta-actions .btn, .cta-actions .wp-block-buttons > .btn { width: 100%; white-space: normal; text-align: center; }
}

/* ==========================================================================
   Adaptations Gutenberg — ce que le DOM des blocs change par rapport à la
   maquette. Toujours PLUS spécifique que le CSS des blocs (imprimé après).
   ========================================================================== */

/* ---------- Boutons : la classe est sur div.wp-block-button, le lien est nu ---------- */
.wp-block-button.btn { position: relative; cursor: pointer; }
.wp-block-button.btn > .wp-block-button__link {
  display: inline; width: auto; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: none; color: inherit; font: inherit; letter-spacing: inherit; line-height: inherit;
  text-align: inherit; text-decoration: none; word-break: normal; white-space: inherit;
}
.wp-block-button.btn > .wp-block-button__link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.wp-block-button.btn > .wp-block-button__link:focus-visible { outline: none; }
.wp-block-button.btn:has(> .wp-block-button__link:focus-visible) { outline: 3px solid var(--ocre); outline-offset: 3px; }

/* ---------- Liens nus dans les paragraphes ---------- */
:root :where(a:not(.wp-element-button)) { color: inherit; text-decoration: none; }

/* ---------- En-tête ---------- */
.wp-site-blocks > .entete { margin: 0; }
.wp-block-site-logo.marque { line-height: 0; }
.entete .wp-block-site-logo.marque img { height: 58px; width: auto; max-width: none; }
.pied .wp-block-site-logo.marque img { height: 60px; width: auto; max-width: none; }
.wp-block-navigation.nav .wp-block-navigation__container { gap: inherit; flex-wrap: nowrap; }
.wp-block-navigation.nav .wp-block-navigation-item__content { display: block; }
.wp-block-navigation.nav-mobile, .wp-block-navigation.nav-mobile .wp-block-navigation__container { width: 100%; }
.wp-block-navigation.nav-mobile .wp-block-navigation__container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.wp-block-navigation.nav-mobile .wp-block-navigation-item { display: block; }
.wp-block-navigation.nav-mobile .wp-block-navigation-item__content { display: block; }
.menu-mobile .nav-mobile a[aria-current="page"] { color: var(--foret-3); }

/* Bouton du menu mobile : paragraphe vide, lignes dessinées en CSS */
p.burger {
  position: relative; margin: 0;
  background-image: linear-gradient(var(--anthracite), var(--anthracite));
  background-size: 18px 2px; background-position: center; background-repeat: no-repeat;
  transition: background-size .3s ease;
}
p.burger::before, p.burger::after {
  content: ""; position: absolute; left: 50%; width: 18px; height: 2px; margin-left: -9px;
  background: var(--anthracite); border-radius: 2px; transition: transform .3s ease;
}
p.burger::before { top: calc(50% - 7px); }
p.burger::after { top: calc(50% + 5px); }
.menu-ouvert p.burger { background-size: 0 2px; }
.menu-ouvert p.burger::before { transform: translateY(6px) rotate(45deg); }
.menu-ouvert p.burger::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Formulaire Contact Form 7 : même rendu que le formulaire de la maquette ---------- */
.formulaire .wpcf7, .formulaire .wpcf7-form { display: contents; }
.formulaire .wpcf7-form > p { color: var(--gris); margin-top: 10px; }
.formulaire .wpcf7-form > p .obligatoire, .formulaire .case .obligatoire { font-style: normal; color: var(--ocre); }
.formulaire .champ .wpcf7-form-control-wrap { display: block; }
.formulaire .champ .wpcf7-form-control-wrap > :is(input, select, textarea) { display: block; }
.formulaire .case .wpcf7-form-control-wrap,
.formulaire .case .wpcf7-form-control,
.formulaire .case .wpcf7-list-item,
.formulaire .case label { display: contents; }
.formulaire .case label, .formulaire .case .wpcf7-list-item-label { font-family: inherit; font-weight: inherit; font-size: inherit; line-height: inherit; }
.formulaire .case .wpcf7-list-item-label { color: var(--gris); }
.formulaire .case.rappel .wpcf7-list-item-label { color: #5B4A36; }
.formulaire .wpcf7-submit.btn {
  cursor: pointer; appearance: none; -webkit-appearance: none;
  padding-right: 52px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7F8FB' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 24px center; background-size: 18px;
}
.formulaire .champ textarea.wpcf7-textarea { height: 140px; }
/* l'indicateur d'envoi de CF7 prend de la place dans la rangée : le bouton le remplace */
.formulaire .wpcf7-spinner { display: none; }
.formulaire .wpcf7-form.submitting .wpcf7-submit { opacity: .6; cursor: progress; }
.formulaire .wpcf7-not-valid-tip { color: #B4461B; font-size: 13px; margin-top: 6px; }
.formulaire .champ .wpcf7-not-valid { border-color: #D9784A; }
.formulaire .wpcf7-response-output {
  margin: 18px 0 0 !important; padding: 14px 18px !important; border: 0 !important; border-radius: 12px;
  background: var(--sauge); color: var(--foret-nuit); font-size: 15px;
}
.formulaire .wpcf7-form.init .wpcf7-response-output:empty,
.formulaire .wpcf7-form.resetting .wpcf7-response-output:empty,
.formulaire .wpcf7-form.submitting .wpcf7-response-output:empty { display: none; }
.formulaire .wpcf7-form.invalid .wpcf7-response-output,
.formulaire .wpcf7-form.failed .wpcf7-response-output { background: var(--sable); color: #5B4A36; }

/* ---------- Divers ---------- */
.est-masque { display: none !important; }
.filtre { cursor: pointer; user-select: none; }

/* ---------- Illustrations capturées : l'enveloppe visuelle de l'original ---------- */
.illu-mobile { display: none; }
@media (max-width: 720px) {
  .illu-bureau { display: none; }
  .illu-mobile { display: block; }
}
.illu-ecran { position: relative; z-index: 2; border-radius: var(--r-l); box-shadow: var(--ombre-forte); overflow: hidden; }
.illu-app-cadre { border-radius: var(--r-l) var(--r-l) 0 0; box-shadow: 0 -2px 0 rgba(6,38,80,.04), 0 -30px 80px -30px rgba(6,38,80,.3); overflow: hidden; }
.illu-mini-app { border-radius: var(--r-l); box-shadow: var(--ombre-forte); overflow: hidden; }
figure.illu-bulletin { position: relative; border-radius: var(--r-l); box-shadow: var(--ombre-forte); max-width: 520px; margin-left: auto; }
.illu-bulletin img { border-radius: var(--r-l); }
.illu-bulletin::after { content: ""; position: absolute; inset: 18px -18px -18px 18px; background: var(--ocre); border-radius: var(--r-l); z-index: -1; opacity: .9; }
@media (max-width: 1080px) {
  figure.illu-bulletin { margin: 0 18px 18px 0; }
}
/* « Espace client » réduit à l'icône (≤ 1360 px) : le lien vide sort du flux,
   sinon il compte comme élément flex et ajoute un écart. */
@media (max-width: 1360px) {
  .entete-actions .wp-block-button.btn-espace > .wp-block-button__link { position: absolute; inset: 0; }
}

/* ==========================================================================
   Gabarits sans maquette (articles, archives, 404) : même vocabulaire visuel
   ========================================================================== */
.page-hero-court h1 { font-size: clamp(34px, 4.2vw, 56px); margin-top: 18px; max-width: 22ch; }
.page-hero-court .article-meta { margin-top: 0; }
.page-hero-court .wp-block-post-date { margin-top: 18px; font-size: 15px; }
.wp-block-query-title:empty, .archive .titre-blog, .search .titre-blog { display: none; }
body:not(.blog) .titre-blog { display: none; }
.liste-articles { padding: clamp(56px, 7vw, 96px) 0 clamp(80px, 10vw, 130px); background: var(--blanc); }
.liste-articles .articles { list-style: none; padding: 0; margin-top: 0; }
.liste-articles .articles > .wp-block-post > .article { height: 100%; }
.article-meta a { font-weight: 600; color: var(--foret-3); }
.article .wp-block-post-title a { color: inherit; }
.article .wp-block-post-excerpt { margin-top: 10px; display: flex; flex-direction: column; flex: 1; }
.article .wp-block-post-excerpt__excerpt { color: var(--gris); font-size: 15px; }
.article .wp-block-post-excerpt__more-text { margin-top: auto; padding-top: 24px; font-family: var(--f-titre); font-weight: 700; font-size: 15px; color: var(--foret); }
.article .wp-block-post-excerpt__more-text a::after { content: " →"; }
.wp-block-query-pagination { margin-top: 48px; display: flex; gap: 12px; justify-content: center; font-family: var(--f-titre); font-weight: 700; }
.wp-block-query-pagination a, .wp-block-query-pagination .current { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--trait); }
.wp-block-query-pagination .current { background: var(--foret); border-color: var(--foret); color: var(--creme); }

.article-texte { padding: clamp(48px, 6vw, 80px) 0 clamp(80px, 10vw, 120px); background: var(--blanc); }
.article-texte .enveloppe { max-width: 760px; }
.article-texte .entry-content { font-size: 18px; line-height: 1.7; }
.article-texte .entry-content > * + * { margin-top: 1.1em; }
.article-texte .entry-content > :is(h2, h3) + * { margin-top: .6em; }
.article-texte .entry-content h2 { font-size: clamp(26px, 2.6vw, 34px); margin-top: 1.8em; }
.article-texte .entry-content h3 { font-size: 22px; margin-top: 1.5em; }
.article-texte .entry-content a { color: var(--foret-3); text-decoration: underline; text-underline-offset: 3px; }
.article-texte .entry-content :is(ul, ol) { padding-left: 1.3em; }
.article-texte .entry-content li + li { margin-top: .4em; }
.article-texte .entry-content img { border-radius: var(--r-m); }
.article-texte .entry-content blockquote { margin-inline: 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--ocre); font-family: var(--f-titre); font-size: 22px; line-height: 1.4; }
.single .page-hero-court .enveloppe { max-width: 760px; }

/* ==========================================================================
   WP Job Portal — rendu aux couleurs de la maquette (cible : src/pages/offres-emploi.html)
   ========================================================================== */
:root {
  --wpjp-primary-color: var(--foret);
  --wpjp-secondary-color: var(--foret-nuit);
  --wpjp-body-font-color: var(--anthracite);
  --wpjp-border-color: var(--trait);
  --wpjp-background-color: var(--creme);
  --wpjp-card-background: var(--blanc);
  --wpjp-highlight-color: var(--ocre);
  --wpjp-card-shadow: none;
  --wpjp-card-hover-shadow: var(--ombre);
  --wpjp-focus-shadow-color: 0 0 0 4px rgba(42, 92, 152, .14);
  --wpjp-main-heading: 28px;
  --wpjp-sub-heading: 21px;
  --wpjp-body-font-size: 15.5px;
}
/* la liste occupe toute la largeur (la colonne de filtres de la maquette est fournie par l'extension) */
.emplois .emplois-grille { display: block; }
.wjportal-main-up-wrapper, .wjportal-main-up-wrapper :is(input, select, button, a, p, span, div) { font-family: var(--f-texte); }
.wjportal-main-up-wrapper :is(h1, h2, h3, h4, .wjportal-job-title, .wjportal-job-title a) { font-family: var(--f-titre); letter-spacing: -0.02em; }
/* en-tête et fil d'Ariane propres à l'extension : la page a déjà les siens */
.emplois .wjportal-page-header, .emplois .wjportal-breadcrumbs-wrp { display: none; }

/* barre de recherche = .recherche-emploi */
.wjportal-filter-search-main-wrp { margin: 0 0 28px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.wjportal-filter-search-wrp { gap: 8px; padding: 8px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 20px; box-shadow: var(--ombre); max-width: 880px; }
.wjportal-filter-search-field-wrp { width: auto; min-width: 0; }
.wjportal-filter-search-wrp :is(input, select) { width: 100%; min-height: 52px; padding: 0 16px; font-size: 16px; color: var(--anthracite); background: var(--creme); border: 1.5px solid transparent; border-radius: 14px; box-shadow: none; }
.wjportal-filter-search-wrp :is(input, select):focus { outline: none; border-color: var(--foret-3); box-shadow: var(--wpjp-focus-shadow-color); background: var(--blanc); }
.wjportal-filter-search-btn-wrp :is(button, input, a) { min-height: 52px; min-width: 52px; padding: 0 22px; border-radius: 999px; border: 0; font-family: var(--f-titre); font-weight: 700; font-size: 15px; cursor: pointer; transition: background-color .25s ease; }
.wjportal-filter-search-btn { background: var(--foret); color: var(--creme); }
.wjportal-filter-search-btn:hover { background: var(--foret-nuit); }
.wjportal-filter-reset-btn { background: var(--sable-clair); color: var(--foret); }

/* fiche d'offre = .offre */
.wjportal-jobs-list { border: 1px solid var(--trait); border-radius: var(--r-m); box-shadow: none; margin-bottom: 14px; transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.wjportal-jobs-list:hover { border-color: transparent; box-shadow: var(--ombre); transform: translateY(-3px); }
.wjportal-jobs-list-top-wrp { padding: 26px 28px 0; gap: 16px; }
.wjportal-jobs-logo { width: 56px; height: 56px; border-radius: 14px; padding: 4px; border: 1px solid var(--trait); }
.wjportal-jobs-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.wjportal-job-title, .wjportal-job-title a { font-size: 21px; font-weight: 700; color: var(--anthracite); line-height: 1.2; }
.wjportal-job-title a:hover { color: var(--foret-3); }
.wjportal-companyname, .wjportal-companyname a { font-size: 14.5px; color: var(--gris); }
.wjportal-jobs-data-text { font-size: 14.5px; color: var(--gris); }
/* l'extension colore le type de contrat en ligne (style="background:…") */
.wjportal-job-type { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--sable-clair) !important; color: var(--foret) !important; }
.wjportal-jobs-salary { font-family: var(--f-titre); font-weight: 700; color: var(--anthracite); }
.wjportal-jobs-list-btm-wrp { padding: 18px 28px 24px; margin-top: 18px; background: transparent; }
.wjportal-newest-jobs-date { font-size: 13px; color: #7C8799; }
a.wjportal-jobs-act-btn-apply { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--foret); color: var(--creme) !important; font-family: var(--f-titre); font-weight: 700; font-size: 14px; }
a.wjportal-jobs-act-btn-apply:hover { background: var(--foret-nuit); }

/* formulaires de l'extension (compte candidat, dépôt de CV…) */
.wjportal-form-title { font-family: var(--f-titre); font-weight: 700; font-size: 14px; color: var(--anthracite); }
.wjportal-form-value :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], select, textarea) { min-height: 52px; font-size: 16px; border: 1.5px solid var(--trait); border-radius: 12px; background: var(--blanc); }
.wjportal-main-up-wrapper :is(.wjportal-form-btn, .wjportal-save-btn, input[type="submit"]) { min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--foret); color: var(--creme); font-family: var(--f-titre); font-weight: 700; font-size: 15px; }
.wjportal-main-up-wrapper :is(.wjportal-form-btn, .wjportal-save-btn, input[type="submit"]):hover { background: var(--foret-nuit); }
.wjportal-main-up-wrapper a { color: var(--foret); }

@media (max-width: 720px) {
  .wjportal-filter-search-wrp { flex-direction: column; align-items: stretch; }
  .wjportal-filter-search-field-wrp { width: 100%; }
  .wjportal-filter-search-btn-wrp :is(button, input, a) { flex: 1; }
  .wjportal-jobs-list-top-wrp { padding: 22px 20px 0; flex-wrap: wrap; }
  .wjportal-jobs-cnt-wrp { flex-direction: column; align-items: flex-start; }
  .wjportal-jobs-right-wrp { width: 100%; text-align: left; align-items: flex-start; }
  .wjportal-jobs-list-btm-wrp { padding: 16px 20px 20px; flex-wrap: wrap; gap: 12px; }
  a.wjportal-jobs-act-btn-apply { width: 100%; justify-content: center; }
}

/* Proportions exactes des illustrations (relevées à la capture) */
.illu-ecran.illu-bureau img { aspect-ratio: 558.422 / 430.188; object-fit: cover; }
.illu-ecran.illu-mobile img { aspect-ratio: 350 / 398.563; object-fit: cover; }
.illu-app-cadre.illu-bureau img { aspect-ratio: 1200 / 495.313; object-fit: cover; }
.illu-app-cadre.illu-mobile img { aspect-ratio: 350 / 1004.594; object-fit: cover; }
.illu-mini-app.illu-bureau img { aspect-ratio: 584.641 / 584.453; object-fit: cover; }
.illu-mini-app.illu-mobile img { aspect-ratio: 350 / 631.828; object-fit: cover; }
.illu-bulletin.illu-bureau img { aspect-ratio: 510.953 / 479.719; object-fit: cover; }
.illu-bulletin.illu-mobile img { aspect-ratio: 314 / 611.281; object-fit: cover; }