/* ==========================================================================
   Emploi — BSM groupe · Design tokens v1.0 (aout 2026)
   Aucune couleur hors de cette liste ne doit apparaitre dans le CSS du site.
   ========================================================================== */
:root {
  /* --- marque --- */
  --emploi-blue:        #23478F; /* primaire : symbole, boutons, titres  8,0:1 sur blanc */
  --emploi-blue-deep:   #0F1F3D; /* fonds sombres, hero, footer, wordmark */
  --emploi-blue-veil:   #EAF0FB; /* surfaces, encarts, tags */
  --emploi-blue-soft:   #8FA6CE; /* montant bas du symbole, texte sur fond sombre */
  --emploi-orange:      #F08A2C; /* accent unique : filet, montant haut, survol */
  --emploi-orange-deep: #B4610D; /* orange accessible pour texte et liens  4,9:1 */

  /* --- neutres --- */
  --sand:    #F5F2EC;
  --ink:     #101418;
  --slate:   #5A6472;
  --border:  #E2DFD7;
  --surface: #FFFFFF;

  /* --- etats --- */
  --success: #1B7F5A;
  --warning: #B45309;
  --error:   #C0392B;

  /* --- typographie --- */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Instrument Sans", Helvetica, system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* --- rayons & rythme --- */
  --radius-sm: 6px;   /* champs, badges, boutons */
  --radius-md: 12px;  /* cartes */
  --radius-lg: 18px;  /* grands blocs */
  --radius-brand: 26%;/* tuile du symbole et icones d'app uniquement */
  --space: 8px;       /* tous les espacements sont des multiples de 8 */
  --content-max: 1180px;
}

/* --------------------------------------------------------------------------
   Polices auto-hebergees — chemins relatifs à ce fichier (assets/css/),
   fonctionnent quel que soit le sous-dossier d'installation de WordPress.
   Subset latin (français) + latin-ext (fichiers -ext) par unicode-range,
   comme le sert Google Fonts — le navigateur ne télécharge que ce dont il
   a besoin.
   -------------------------------------------------------------------------- */
@font-face { font-family:"Archivo"; src:url("../fonts/archivo-variable.woff2") format("woff2-variations");
  font-weight:400 800; font-display:swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Archivo"; src:url("../fonts/archivo-variable-ext.woff2") format("woff2-variations");
  font-weight:400 800; font-display:swap; unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family:"Instrument Sans"; src:url("../fonts/instrument-sans-variable.woff2") format("woff2-variations");
  font-weight:400 600; font-display:swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Instrument Sans"; src:url("../fonts/instrument-sans-variable-ext.woff2") format("woff2-variations");
  font-weight:400 600; font-display:swap; unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family:"IBM Plex Mono"; src:url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight:400; font-display:swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"IBM Plex Mono"; src:url("../fonts/ibm-plex-mono-400-ext.woff2") format("woff2");
  font-weight:400; font-display:swap; unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"IBM Plex Mono"; src:url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight:500; font-display:swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* --------------------------------------------------------------------------
   Bases
   -------------------------------------------------------------------------- */
body { margin:0; background:var(--sand); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-wrap:pretty; }

h1,h2,h3 { font-family:var(--font-display); color:var(--emploi-blue-deep); margin:0 0 var(--space); }
h1 { font-weight:800; font-size:clamp(34px,5vw,52px); line-height:1.05; letter-spacing:-0.035em; }
h2 { font-weight:700; font-size:34px; line-height:1.15; letter-spacing:-0.025em; }
h3 { font-weight:600; font-size:22px; line-height:1.25; letter-spacing:-0.01em; }

a { color:var(--emploi-blue); text-decoration:none; }
a:hover { color:var(--emploi-orange-deep); text-decoration:underline; text-underline-offset:3px; }

.eyebrow { font-family:var(--font-mono); font-size:12px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--slate); }

/* filet d'ouverture de titre */
.rule { width:44px; height:3px; border-radius:2px; background:var(--emploi-orange); }

/* boutons — hauteur 46px, cible tactile 44px minimum */
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:46px;
  padding:0 20px; border:0; border-radius:var(--radius-sm); cursor:pointer;
  font-family:var(--font-display); font-weight:600; font-size:15px; }
.btn--primary   { background:var(--emploi-blue); color:#fff; }
.btn--secondary { background:#fff; color:var(--emploi-blue); box-shadow:inset 0 0 0 1.5px var(--emploi-blue); }
.btn--accent    { background:var(--emploi-orange); color:var(--emploi-blue-deep); font-weight:700; }

/* États hover/focus/active/disabled du système de boutons — définis
   explicitement pour CHAQUE variante. Sans ça, la règle globale `a:hover`
   plus bas (couleur orange foncé) s'appliquait aussi aux boutons qui sont
   des <a>, rendant le texte illisible sur .btn--accent (orange foncé sur
   fond orange). Ne jamais laisser un bouton hériter d'un hover générique. */
.btn:hover, .btn:focus-visible { text-decoration:none; }
.btn--primary:hover,   .btn--primary:focus-visible   { background:var(--emploi-blue-deep); color:#fff; }
.btn--secondary:hover, .btn--secondary:focus-visible { background:var(--emploi-blue-veil); color:var(--emploi-blue); }
.btn--accent:hover,    .btn--accent:focus-visible    { background:#D97815; color:var(--emploi-blue-deep); }
.btn:active { filter:brightness(0.94); }
.btn:disabled, .btn[aria-disabled="true"] { opacity:.5; cursor:not-allowed; pointer-events:none; }

/* focus visible partout */
:focus-visible { outline:2px solid var(--emploi-blue); outline-offset:2px;
  box-shadow:0 0 0 5px var(--emploi-blue-veil); }

/* carte */
.card { background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:calc(var(--space) * 3); }

/* etiquettes de contrat */
.tag { display:inline-block; font-family:var(--font-mono); font-size:11.5px;
  letter-spacing:0.12em; padding:7px 11px; border-radius:var(--radius-sm);
  background:var(--emploi-blue-veil); color:var(--emploi-blue); }
.tag--urgent   { background:#FDF0E2; color:var(--emploi-orange-deep); }
.tag--verified { background:#E7F3EE; color:var(--success); }

/* motif Palier — a poser en pied de hero ou de banniere */
.palier { display:flex; align-items:flex-end; gap:8px; height:30px; }
.palier > i { flex:1; border-radius:4px 4px 0 0; background:rgba(214,224,242,.35); }
.palier > i:nth-child(1) { height:26%; opacity:.7 }
.palier > i:nth-child(2) { height:42%; opacity:.8 }
.palier > i:nth-child(3) { height:58%; opacity:.9 }
.palier > i:nth-child(4) { height:74%; }
.palier > i:last-child   { height:100%; background:var(--emploi-orange); }

/* logo du header : lockup complet, symbole seul en mobile */
.logo-full { height:36px; display:block; }
@media (max-width:640px){ .logo-full { display:none } .logo-symbol { height:32px; display:block } }