/* stage.fr : feuille de style unique du site public. Mobile d'abord. */

:root {
  --petrol: #013B51;
  --petrol-2: #0B4A62;
  --petrol-line: #2E6478;
  --mint: #00C389;
  --mint-soft: #D6F5EA;
  --ink: #00756C;
  --green: #2F7A5B;
  --blue: #1F5F7A;
  --blue-soft: #E0EEF3;
  --bg: #F5F9FA;
  --white: #FFFFFF;
  --line: #D6E4E8;
  --line-strong: #A9C2CA;
  --grey-soft: #E8F1F3;
  --muted: #4B5E66;
  --on-dark: #F5F9FA;
  --on-dark-muted: #BFD9E0;
  --warning-bg: #FFF4E0;
  --warning-line: #F0C674;

  --font-head: "Poppins", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --gutter: 16px;
  --max: 1200px;
  --focus: 0 0 0 3px var(--white), 0 0 0 5px var(--ink);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--petrol);
  background: var(--bg);
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; }

a { color: var(--petrol); }
a:hover { color: var(--ink); }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }

h1, h2, h3 { margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 10;
  background: var(--mint); color: var(--petrol); font-weight: 700;
  padding: 10px 14px; border-radius: var(--radius-sm);
}
.skip-link:focus { top: 8px; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.container--text { max-width: 820px; }

.stack-sm > * + * { margin-top: 8px; }
.stack-md > * + * { margin-top: 16px; }
.stack-lg > * + * { margin-top: 28px; }

.muted { color: var(--muted); }
.small { font-size: 14px; }
.text-mint { color: var(--mint); }

/* Titres ---------------------------------------------------------------- */

.h1 { font-family: var(--font-head); font-weight: 700; font-size: 28px; line-height: 1.15; }
.h2 { font-family: var(--font-head); font-weight: 600; font-size: 26px; line-height: 1.15; }
.h2--small { font-size: 22px; }
.h3 { font-size: 19px; line-height: 1.3; }

.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
}
.eyebrow--mint { color: var(--mint); }

.link-strong { font-weight: 700; }
.link-light { color: var(--on-dark); }
.link-light:hover { color: var(--mint); }

/* Boutons, puces, badges --------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 12px 18px; border-radius: var(--radius-sm);
  font: inherit; font-weight: 700; font-size: 15px; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer; border: 1px solid transparent;
}
.btn--sm { min-height: 44px; padding: 10px 14px; font-size: 15px; }
.btn--lg { min-height: 52px; padding: 14px 22px; font-size: 16px; }
.btn--block { width: 100%; }
.btn--mint { background: var(--mint); color: var(--petrol); }
.btn--mint:hover { background: #00AD7A; color: var(--petrol); }
.btn--dark { background: var(--petrol); color: var(--on-dark); }
.btn--dark:hover { background: var(--petrol-2); color: var(--white); }
.btn--ghost { background: transparent; color: var(--petrol); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }

.pill {
  display: inline-block; font-size: 12px; font-weight: 700; line-height: 1.4;
  padding: 2px 8px; border-radius: 999px;
}
.pill--mint { background: var(--mint); color: var(--petrol); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px;
  border-radius: 999px; font-size: 15px; font-weight: 500; text-decoration: none;
  color: var(--petrol); border: 1px solid var(--line-strong); background: var(--white);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip--active { background: var(--petrol); border-color: var(--petrol); color: var(--on-dark); font-weight: 700; }
.chip--active:hover { color: var(--white); }
.chip--mint { background: var(--mint); border-color: var(--mint); color: var(--petrol); font-weight: 700; }
.chip--mint:hover { color: var(--petrol); background: #00AD7A; }
.chip--outline { background: transparent; color: var(--on-dark); border-color: var(--petrol-line); }
.chip--outline:hover { color: var(--mint); border-color: var(--mint); }
.chip--line { background: transparent; font-size: 14px; min-height: 36px; padding: 6px 12px; }

.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  display: inline-block; font-size: 13px; font-weight: 500; line-height: 1.4;
  padding: 3px 10px; border-radius: 999px; color: var(--muted); background: var(--grey-soft);
}
.badge--alternance { background: var(--mint-soft); color: var(--petrol); font-weight: 700; }
.badge--stage { background: var(--blue-soft); color: var(--petrol); font-weight: 700; }
.badge--autre { background: var(--grey-soft); color: var(--petrol); font-weight: 700; }
.badge--featured { background: var(--petrol); color: var(--on-dark); font-weight: 700; }

/* En-tête ---------------------------------------------------------------- */

.site-header { background: var(--petrol); border-bottom: 1px solid var(--petrol-2); position: relative; }
.site-header__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 32px; padding-top: 10px; padding-bottom: 10px;
}
.site-logo { display: block; line-height: 0; }
.site-logo img { height: 44px; width: auto; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  border: 1px solid var(--petrol-line); background: transparent; color: var(--on-dark); cursor: pointer;
}

.site-nav { display: none; width: 100%; padding: 4px 0 12px; }
.site-header.is-open .site-nav { display: block; }
.site-nav__list { display: flex; flex-direction: column; }
.site-nav__link, .site-nav__pro {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 0;
  color: var(--on-dark); text-decoration: none; font-weight: 500;
}
.site-nav__link:hover, .site-nav__pro:hover { color: var(--mint); }
.site-nav__link[aria-current="page"] { color: var(--mint); }
.site-nav__pro { color: var(--on-dark-muted); text-decoration: underline; font-size: 15px; }

/* Bandeau d'accueil -------------------------------------------------------- */

.hero { background: var(--petrol); color: var(--on-dark); }
.hero__inner { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; padding-top: 28px; padding-bottom: 36px; }
.hero__inner--narrow { max-width: 820px; }
.hero__main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.hero__title { font-family: var(--font-head); font-weight: 700; font-size: 28px; line-height: 1.15; }
.hero__title--small { font-size: 26px; }
.hero__lead { font-size: 17px; color: var(--on-dark-muted); max-width: 34em; }
.hero__quick { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hero__quick-label { font-size: 15px; color: var(--on-dark-muted); }
.hero--compact .hero__inner { padding-top: 40px; padding-bottom: 48px; }

/* Formulaire de recherche */
.search-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.search-form__field {
  grid-column: 1 / -1; display: flex; flex-direction: column; min-width: 0;
  background: var(--white); color: var(--petrol); border-radius: 12px; padding: 8px 14px;
  border: 1px solid var(--line);
}
.search-form__field--where { grid-column: 1 / 2; }
.search-form__label { font-size: 12px; font-weight: 700; }
.search-form__field input {
  width: 100%; min-width: 0; border: 0; background: transparent; color: var(--petrol);
  font: inherit; font-size: 16px; padding: 2px 0;
}
.search-form__field input:focus { outline: none; }
.search-form__field:focus-within { box-shadow: 0 0 0 3px var(--mint); }
.search-form__field input::placeholder { color: #6B7F87; }
.search-form__submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 60px; min-height: 56px; padding: 0 16px; border: 0; border-radius: 12px;
  background: var(--mint); color: var(--petrol); font: inherit; font-weight: 700; font-size: 17px; cursor: pointer;
}
.search-form__submit:hover { background: #00AD7A; }
.search-form__submit-text { display: none; }

/* Carte assistant de l'accueil : lien compact sur téléphone, carte complète ailleurs */
.assistant-link {
  flex: 1 1 100%; display: flex; gap: 12px; align-items: center; padding: 14px 16px;
  background: var(--white); border-radius: 16px; text-decoration: none; color: var(--petrol);
}
.assistant-link__text { display: flex; flex-direction: column; }
.assistant-card {
  flex: 1 1 340px; min-width: 0; background: var(--bg); color: var(--petrol);
  border-radius: 20px; padding: 20px; display: none; flex-direction: column; gap: 14px;
}
.assistant-card__head { display: flex; align-items: center; gap: 10px; }
.assistant-card__head div { display: flex; flex-direction: column; }
.assistant-card__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bubble { padding: 12px 16px; font-size: 15px; max-width: 92%; }
.bubble--me { align-self: flex-end; background: var(--petrol); color: var(--on-dark); border-radius: 16px 16px 4px 16px; }
.bubble--bot { background: var(--white); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; }

.icon-tile {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
}
.icon-tile--dark { background: var(--petrol); }
.icon-tile--blue { background: var(--blue-soft); width: 52px; height: 52px; }
.icon-tile--mint { background: var(--mint-soft); width: 52px; height: 52px; }
.icon-tile--green { background: #E1F2EA; width: 52px; height: 52px; }

/* Chiffres */
.stats { background: var(--white); border-bottom: 1px solid var(--line); }
.stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 16px; padding-top: 20px; padding-bottom: 20px; }
.stat { display: flex; flex-direction: column; color: var(--muted); }
.stat__value { font-family: var(--font-head); font-weight: 600; font-size: 24px; color: var(--petrol); }

/* Sections ---------------------------------------------------------------- */

.section { padding: 32px 0; }
.section-tight { padding-top: 24px; padding-bottom: 40px; }
.page-top { padding-top: 20px; }
.section-head { display: flex; flex-direction: column; gap: 8px; }
.section-head--row { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 16px; }

.band { background: var(--white); border-bottom: 1px solid var(--line); padding: 20px 0 24px; }
.band .search-form__field { background: var(--bg); }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.feature {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px; display: flex; flex-direction: column; gap: 12px;
}

.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.tile {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 60px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; font-weight: 700; text-decoration: none;
}
.tile:hover { border-color: var(--ink); }
.tile__count { color: var(--muted); font-weight: 400; white-space: nowrap; font-size: 15px; }

.cta-band {
  background: var(--petrol); color: var(--on-dark); border-radius: var(--radius-xl); padding: 28px 22px;
}
.cta-band__text { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; max-width: 720px; }
.cta-band__lead { color: var(--on-dark-muted); font-size: 17px; }

.guide-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.guide {
  display: flex; flex-direction: column; gap: 4px; height: 100%;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; text-decoration: none;
}
.guide:hover { border-color: var(--ink); }

/* Cartes d'offre ------------------------------------------------------------ */

.job-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.job-card {
  position: relative;
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.job-card:hover { border-color: var(--ink); }
/* Toute la carte mène à l'offre ; les boutons restent cliquables par-dessus. */
.job-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.job-card--featured { border-color: var(--mint); box-shadow: inset 4px 0 0 var(--mint); }
.job-card__title { font-family: var(--font-body); font-size: 18px; line-height: 1.3; font-weight: 700; }
.job-card__title a { text-decoration: none; }
.job-card__title a:hover { text-decoration: underline; }
.job-card__meta { color: var(--muted); font-size: 15px; }
.job-card__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.job-card__actions .btn--dark { display: none; }
.job-card__actions .btn--ghost { min-height: 44px; padding: 10px 0; border: 0; text-decoration: underline; color: var(--ink); }

.result-count { color: var(--muted); }
.result-count b { color: var(--petrol); }

.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; }
.empty { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

.pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding-top: 8px; }
.pager__link {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--white); text-decoration: none; font-weight: 500;
}
.pager__link:hover { border-color: var(--ink); }
.pager__link.is-current { background: var(--petrol); border-color: var(--petrol); color: var(--on-dark); font-weight: 700; }

.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 4px; font-size: 14px; color: var(--muted); }
.breadcrumbs li { display: inline-flex; min-width: 0; }
.breadcrumbs li + li::before { content: "›"; margin-right: 4px; color: var(--line-strong); }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--ink); }
.breadcrumbs [aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }

/* Page offre ------------------------------------------------------------------ */

.job-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 16px; padding-bottom: 40px; }
.job-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.job-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.job-head { display: flex; flex-direction: column; gap: 12px; }
.job-head__title { font-family: var(--font-head); font-weight: 700; font-size: 26px; line-height: 1.2; }
.job-head__meta { font-size: 17px; color: var(--muted); }
.job-head__meta a { color: var(--petrol); font-weight: 700; }
.job-head__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.job-head__actions .btn { flex: 1 1 200px; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 20px; margin: 0; }
.facts__item dt { font-size: 13px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: 0.08em; }
.facts__item dd { margin: 2px 0 0; font-weight: 500; }

.notice { display: flex; flex-direction: column; gap: 4px; border-radius: var(--radius); padding: 14px 16px; margin-top: 16px; }
.notice--warning { background: var(--warning-bg); border: 1px solid var(--warning-line); }

.apply-bar { display: flex; }
.apply-bar .btn { flex: 1 1 auto; }

.company-card { display: flex; flex-direction: column; gap: 8px; }
.company-card__logo { width: 64px; height: 64px; object-fit: contain; border-radius: 12px; border: 1px solid var(--line); background: var(--white); }
.assistant-mini { display: flex; flex-direction: column; gap: 10px; }
.job-side .card > * + * { margin-top: 10px; }
.assistant-mini.card > * + * { margin-top: 0; }

.prose { font-size: 16px; line-height: 1.65; }
.prose h2 { font-family: var(--font-head); font-weight: 600; font-size: 20px; margin: 24px 0 8px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 17px; margin: 18px 0 6px; }
.prose p { margin: 0 0 12px; }
.prose ul, .prose ol { margin: 0 0 12px; padding-left: 22px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin: 4px 0; }
.prose a { color: var(--ink); }
.prose img { border-radius: var(--radius); }
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.prose td, .prose th { border: 1px solid var(--line); padding: 6px 10px; }

.intro { color: var(--muted); max-width: 60em; }
/* Textes éditoriaux : guide sous les offres, FAQ (app/templates/_contenus.html). */
.guide-box { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.faq__item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.faq__q { cursor: pointer; font-weight: 700; padding: 12px 16px; }
.faq__a { padding: 0 16px 12px; color: var(--muted); }
.faq__a p { margin: 0 0 8px; }
.post-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.prose .encadre { background: var(--mint-soft); border-radius: var(--radius-sm); padding: 14px 16px; margin: 0 0 16px; }
.prose .encadre p:last-child { margin-bottom: 0; }
.prose blockquote { border-left: 3px solid var(--mint); margin: 0 0 16px; padding: 2px 0 2px 14px; }
.prose .source { font-size: 14px; color: var(--muted); }

/* Entreprises ------------------------------------------------------------------- */

.company-head { display: flex; gap: 16px; align-items: center; }
.company-head__logo { flex: none; width: 72px; height: 72px; object-fit: contain; border-radius: 14px; border: 1px solid var(--line); background: var(--white); }

.inline-form { display: flex; gap: 8px; max-width: 560px; }
.inline-form__field { flex: 1; min-width: 0; }
.inline-form__field input {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); font: inherit; color: var(--petrol); background: var(--white);
}

.company-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.company-tile {
  display: flex; align-items: center; gap: 12px; height: 100%; padding: 12px 14px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none;
}
.company-tile:hover { border-color: var(--ink); }
.company-tile img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.company-tile__initial {
  flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--mint-soft); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 600;
}
.company-tile__text { display: flex; flex-direction: column; min-width: 0; }

/* Blog -------------------------------------------------------------------------- */

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.post-card { height: 100%; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.post-card__cover { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.post-card__body { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.post-card__body a { text-decoration: none; }
.post-card__body a:hover { text-decoration: underline; }
.job-side__posts ul { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 12px; }
.job-side__posts li a { display: flex; gap: 10px; align-items: flex-start; color: inherit; text-decoration: none; font-size: 14px; line-height: 1.35; font-weight: 600; }
.job-side__posts li a:hover span { text-decoration: underline; }
.job-side__posts img { flex: none; width: 72px; height: 36px; object-fit: cover; border-radius: 6px; }
.cover { display: block; width: 100%; border-radius: var(--radius-lg); }

/* Pied de page ------------------------------------------------------------------- */

.site-footer { background: var(--petrol); color: var(--on-dark-muted); margin-top: 40px; font-size: 15px; }
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 24px; padding-top: 36px; padding-bottom: 24px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 10px; }
.site-footer__brand img { height: 52px; width: auto; align-self: flex-start; }
.site-footer__title { font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--on-dark); margin-bottom: 6px; }
.site-footer a { color: var(--on-dark-muted); display: inline-block; padding: 5px 0; text-decoration: none; }
.site-footer a:hover { color: var(--mint); text-decoration: underline; }
.site-footer__popular { padding-bottom: 20px; }
.site-footer__popular ul { display: flex; flex-wrap: wrap; gap: 0 18px; }
.site-footer__bottom { border-top: 1px solid var(--petrol-2); padding-top: 16px; padding-bottom: 24px; font-size: 14px; }

/* Écrans plus larges -------------------------------------------------------------- */

@media (min-width: 640px) {
  :root { --gutter: 24px; }
  .search-form--hero, .search-form--bar {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
    background: var(--white); padding: 8px; border-radius: 16px; gap: 0;
  }
  .search-form--bar { border: 1px solid var(--line); background: var(--bg); }
  .search-form--hero .search-form__field, .search-form--bar .search-form__field {
    grid-column: auto; border: 0; border-radius: 10px; background: transparent;
  }
  .search-form--hero .search-form__field--where, .search-form--bar .search-form__field--where {
    border-left: 1px solid var(--line); border-radius: 0;
  }
  .assistant-link { display: none; }
  .assistant-card { display: flex; }
  .job-card__actions .btn--dark { display: inline-flex; }
  .job-card__actions .btn--ghost { padding: 10px 14px; border: 1px solid var(--line-strong); text-decoration: none; color: var(--petrol); }
  .search-form__submit { padding: 0 24px; }
  .search-form__submit-text { display: inline; }
  .search-form__submit svg { display: none; }
  .card { padding: 24px; }
  .job-card { padding: 22px; }
  .cta-band { padding: 44px; }
}

@media (min-width: 960px) {
  body { font-size: 17px; }
  .site-header__inner { flex-wrap: nowrap; padding-top: 14px; padding-bottom: 14px; }
  .site-logo img { height: 52px; }
  .nav-toggle { display: none; }
  .site-nav, .site-header.is-open .site-nav {
    display: flex; align-items: center; justify-content: space-between; width: auto; flex: 1; padding: 0; gap: 24px;
  }
  .site-nav__list { flex-direction: row; gap: 4px 24px; }
  .hero__inner { padding-top: 64px; padding-bottom: 80px; gap: 48px; }
  .hero__title { font-size: 46px; line-height: 1.12; }
  .hero__title--small { font-size: 36px; }
  .hero__lead { font-size: 20px; }
  .h1 { font-size: 36px; }
  .h2 { font-size: 34px; }
  .h2--small { font-size: 27px; }
  .stat__value { font-size: 27px; }
  .section { padding: 48px 0; }
  .band { padding: 28px 0 32px; }
  .job-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
  .job-side { position: sticky; top: 16px; }
  .job-head__title { font-size: 34px; }
  .job-head__actions .btn { flex: 0 0 auto; }
  .apply-bar .btn { flex: 0 0 auto; }
  .company-head__logo { width: 88px; height: 88px; }
  .site-footer__grid { grid-template-columns: 1.3fr repeat(5, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* Outils IA recruteurs ---------------------------------------------------------------------------
   Espace pro : « Améliorer mon offre avec l'IA » (formulaire d'offre), tri des candidatures par
   pertinence et profils qui collent à l'offre (page des candidatures). Script dans site.js. */

.proai-badge { display: inline-block; vertical-align: middle; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; background: var(--mint-soft); color: var(--petrol); }
.proai-offer { border: 1px solid #9FE3C9; background: linear-gradient(180deg, #F2FCF8, var(--white)); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.proai-offer[hidden], .proai-result[hidden], [data-proai-list][hidden] { display: none; }
.proai-offer__head, .proai-rankbox__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px 16px; }
.proai-offer__head > div, .proai-rankbox__head > div:first-child { flex: 1 1 260px; min-width: 0; }
.proai-offer .h3, .proai-rankbox .h3 { margin: 0 0 4px; }
.proai-status { margin: 0; color: var(--petrol); font-weight: 500; }
.proai-status:empty { display: none; }
.proai-compare { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.proai-compare__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.proai-compare__col { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; min-width: 0; }
.proai-compare__col--new { background: var(--white); border-color: var(--mint); }
.proai-compare .btn { align-self: flex-start; }
.proai-tag { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; }
.proai-tag--new { color: var(--ink); }
.proai-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.5; max-height: 360px; overflow: auto; }
.proai-rank__label { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: var(--petrol); }
.proai-box, .proai-alert { border-radius: var(--radius-sm); padding: 10px 12px; }
.proai-box { background: var(--blue-soft); }
.proai-alert { background: #FDECEC; border: 1px solid #F2B8B5; color: #8C1D18; }
.proai-box ul, .proai-alert ul, .proai-rank ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; font-size: 15px; }

.proai-rankbox { display: flex; flex-direction: column; gap: 10px; }
.proai-rankbox form { margin: 0; }
.proai-upsell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.proai-upsell .is-disabled { opacity: .55; cursor: not-allowed; }
.proai-note { margin: 0; padding: 8px 12px; background: var(--bg); border-left: 3px solid var(--mint); border-radius: 6px; color: var(--muted); }
.proai-rankbox__links { margin: 0; }
.proai-redo summary { cursor: pointer; color: var(--petrol); font-weight: 500; width: fit-content; }
.proai-redo form { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px 0 0; }
.proai-redo p { margin: 0; }
.proai-rankbox .pro-error { margin: 0; }
.proai-rank { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; background: var(--bg); border-radius: var(--radius-sm); }
.proai-rank__lists { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.proai-rank__checks li::marker { color: #C98A00; }
.proai-score { flex: none; margin: 0; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: baseline; justify-content: center; padding-top: 16px; font-family: var(--font-head); background: var(--white); border: 3px solid var(--line-strong); color: var(--petrol); }
.proai-score b { font-size: 22px; line-height: 1; }
.proai-score span { font-size: 11px; color: var(--muted); }
.proai-score--high { border-color: var(--mint); }
.proai-score--mid { border-color: var(--warning-line); }
.proai-score--low { border-color: var(--line-strong); }
.proai-matches { padding-top: 12px; }
.proai-plan-perk { font-weight: 700; color: var(--ink); }

@media (min-width: 760px) {
  .proai-compare__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Créer mon CV (/creer-mon-cv/ et /mon-espace/cv/) ------------------------------------------ */

.cv-add[hidden], .cv-row__remove[hidden], .cv-nojs-help[hidden] { display: none; }
.cv-rows { display: flex; flex-direction: column; gap: 14px; }
.cv-row {
  display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; padding: 14px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
}
.cv-row__legend { padding: 0 6px; font-size: 14px; font-weight: 700; color: var(--muted); }
.cv-row--inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); align-items: end; }
.cv-row__remove { align-self: flex-start; }
.cv-row--inline .cv-row__remove { justify-self: start; }
.cv-add { align-self: flex-start; }
.input.cv-ai { border-color: var(--mint); background: #F2FCF8; box-shadow: inset 4px 0 0 var(--mint); }
.cv-before summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--ink); }
.cv-before p { white-space: pre-line; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg); color: var(--muted); font-size: 14px; }
.cv-ai-banner { background: var(--mint-soft); border-color: #9FE3C9; }
.cv-ai-card { border-color: var(--mint); }
.cv-save .acc-actions .btn { flex: 1 1 220px; }
.cv-overwrite { margin-left: 30px; font-size: 14px; }
.cv-delete summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--muted); }
.cv-delete[open] summary { margin-bottom: 10px; }

.cv-landing__cta { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.cv-sample {
  display: none; flex: 1 1 300px; max-width: 360px; flex-direction: column; gap: 4px; padding: 22px 22px 26px;
  border-radius: 6px; background: var(--white); color: var(--petrol); font-size: 12px; line-height: 1.45;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); transform: rotate(1.5deg); position: relative; overflow: hidden;
}
.cv-sample__bar { position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--mint); }
.cv-sample__name { font: 700 20px/1.2 var(--font-head); }
.cv-sample__title { font: 600 13px var(--font-head); color: var(--ink); }
.cv-sample__line { color: var(--muted); }
.cv-sample__head {
  margin-top: 10px; padding-bottom: 3px; border-bottom: 1px solid var(--line); font: 600 11px var(--font-head);
  letter-spacing: 0.06em; text-transform: uppercase;
  background: linear-gradient(var(--mint), var(--mint)) left bottom / 22px 2px no-repeat;
}
.cv-sample__item { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.cv-sample__item i { font-style: normal; font-weight: 400; color: var(--muted); }

@media (min-width: 900px) {
  .cv-sample { display: flex; }
}