/* ===== Je m'engage — Mouvement Marianne ===== */

:root {
  /* ── Charte Marianne officielle ── */
  --violet:    #6A4C93;
  --violet-f:  #503773;
  --violet-p:  #F0EBF8;
  --canard:    #005F73;
  --blanc:     #F4F1DE;
  --encre:     #333333;
  --anthracite:#1a1a2e;
  --gris-c:    #e8e4f0;
  --jaune:     #E9C46A;
  --jaune-f:   #C89E3A;

  /* ── Aliases fonctionnels (compatibilité interne) ── */
  --navy:      #6A4C93;   /* violet principal */
  --navy2:     #503773;   /* violet foncé */
  --navy3:     #3D2660;   /* violet très foncé */
  --red:       #6A4C93;   /* violet (remplace rouge générique) */
  --red2:      #503773;

  --bg:        #faf9fd;
  --bg2:       #F0EBF8;
  --white:     #FFFFFF;
  --text:      #333333;
  --text2:     #4a4060;
  --muted:     #7a6e8a;
  --line:      rgba(106,76,147,.12);
  --line2:     rgba(106,76,147,.06);

  --green:     #1A7A4A;
  --green-bg:  rgba(26,122,74,.08);
  --amber:     #9A6400;
  --amber-bg:  rgba(154,100,0,.08);
  --red-bg:    rgba(106,76,147,.08);
  --blue-bg:   rgba(0,95,115,.08);

  /* Génération Marianne — jaune EXCLUSIF */
  --gm-gold:   #C89E3A;
  --gm-gold2:  #A67820;
  --gm-bg:     rgba(233,196,106,.12);
  --gm-line:   rgba(200,158,58,.3);

  --body:      "DM Sans", system-ui, sans-serif;
  --serif:     "Unbounded", sans-serif;
  --mono:      "DM Sans", monospace;

  --shadow-xs: 0 1px 3px rgba(106,76,147,.07);
  --shadow-sm: 0 2px 8px rgba(106,76,147,.1), 0 1px 3px rgba(106,76,147,.06);
  --shadow:    0 4px 20px rgba(106,76,147,.14), 0 1px 4px rgba(106,76,147,.08);
  --r: 12px; --r2: 8px;

  /* Plus d'aliases */
  --ink:       #333333;
  --ink2:      #4a4060;
  --mid:       #7a6e8a;
  --pale:      rgba(106,76,147,.15);
  --pale2:     #F0EBF8;
  --paper:     #faf9fd;
  --rouge:     #6A4C93;
  --rouge2:    #503773;
  --navy-soft: rgba(106,76,147,.05);
  --vert:      #1A7A4A;
  --bleu:      #005F73;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;}

/* ── TOPSTRIP — retour site principal ── */
.topstrip {
  background: var(--anthracite);
  height: 36px;
  display: flex; align-items: center;
  padding: 0 24px;
  gap: 0;
}
.topstrip-inner { max-width: 1200px; margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: space-between; }
.back-link {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: rgba(255,255,255,.55);
  transition: color .12s;
}
.back-link:hover { color: rgba(255,255,255,.9); }
.back-link svg { flex-shrink: 0; }
.strip-name { font-size: 12px; color: rgba(255,255,255,.3); font-family: var(--mono); }

/* ── HEADER ── */
header {
  background: var(--white);
  border-bottom: 2px solid var(--violet);
  position: sticky; top: 0; z-index: 300;
  box-shadow: 0 2px 20px rgba(106,76,147,.1);
}
.header-main {
  max-width: 1200px; margin: 0 auto;
  height: 58px;
  display: flex; align-items: center;
  padding: 0 24px;
  gap: 0;
}
.logo-zone { display: flex; align-items: center; gap: 12px; }
.logo-mark {
  width: 36px; height: 36px;
  background: var(--violet);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.logo-mark svg { width: 20px; height: 20px; }
.logo-text { }
.logo-name { font-family: "Unbounded", sans-serif; font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; line-height: 1.2; }
.logo-sub { font-size: 9px; color: var(--violet); letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; font-weight: 600; }
.header-sep { width: 1px; height: 28px; background: var(--pale); margin: 0 20px; }
.header-space { font-family: "Unbounded", sans-serif; font-size: 13px; font-weight: 700; color: var(--violet); letter-spacing: -.01em; }
.header-nav { display: flex; gap: 2px; margin-left: auto; }
.hn { padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--mid); transition: all .12s; cursor: pointer; }
.hn:hover { color: var(--ink); background: var(--paper); }
.hn.on { color: var(--violet); font-weight: 700; }
.header-right { display: flex; align-items: center; gap: 8px; margin-left: 16px; }
.btn-co { padding: 7px 15px; border-radius: 7px; font-size: 13px; font-weight: 500; border: 1.5px solid var(--pale); color: var(--ink2); transition: all .12s; }
.btn-co:hover { border-color: var(--violet); color: var(--violet); }
.btn-join { padding: 7px 17px; border-radius: 7px; font-size: 13px; font-weight: 700; background: var(--violet); color: #fff; transition: background .12s; }
.btn-join:hover { background: var(--violet-f); }
.user-badge { display: flex; align-items: center; gap: 8px; padding: 5px 13px 5px 6px; border: 1.5px solid var(--pale); border-radius: 100px; cursor: pointer; transition: border-color .12s; }
.user-badge:hover { border-color: var(--mid); }
.u-av { width: 26px; height: 26px; border-radius: 50%; background: var(--violet); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; font-family: "Unbounded",sans-serif; flex-shrink: 0; }
.u-nom { font-size: 13px; font-weight: 600; color: var(--ink); }

/* ── HERO ── */
.hero{
  background: linear-gradient(135deg, var(--violet) 0%, var(--violet-f) 60%, var(--navy3) 100%);
  min-height:calc(100svh - 94px);display:grid;grid-template-rows:1fr auto;
  position:relative;overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 600px 400px at 85% 15%, rgba(80,55,115,.4) 0%, transparent 60%),
    radial-gradient(ellipse 400px 300px at 5% 85%, rgba(0,95,115,.2) 0%, transparent 60%);
}
.hero-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; z-index: 2; background: linear-gradient(to bottom, #002395 0%, #002395 33%, #fff 33%, #fff 66%, #ED2939 66%, #ED2939 100%); opacity: .9; }
.hero-body {
  position: relative; z-index: 2;
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: 72px 24px 48px 48px;
  display: grid; grid-template-columns: 1fr 380px; gap: 60px; align-items: center;
}
.hero-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 26px; }
.hero-dash { width: 20px; height: 1px; background: var(--rouge); }
.hero-title { font-family: var(--serif); font-size: clamp(38px, 4.6vw, 64px); font-weight: 700; line-height: 1.08; letter-spacing: -.03em; color: #fff; margin-bottom: 22px; }
.hero-title em { font-style: italic; font-weight: 400; color: rgba(255,255,255,.5); }
.hero-copy { font-size: 16px; color: rgba(255,255,255,.42); line-height: 1.75; max-width: 420px; margin-bottom: 36px; }
.hero-copy strong { color: rgba(255,255,255,.75); font-weight: 600; }
.hero-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.hbtn { padding: 12px 26px; border-radius: 7px; font-size: 14px; font-weight: 700; transition: all .15s; }
.hbtn-white { background: #fff; color: var(--violet); border: 2px solid #fff; }
.hbtn-white:hover { background: rgba(255,255,255,.88); transform: translateY(-1px); box-shadow: 0 8px 28px rgba(0,0,0,.25); }
.hbtn-ghost { border: 2px solid rgba(255,255,255,.15); color: rgba(255,255,255,.5); }
.hbtn-ghost:hover { border-color: rgba(255,255,255,.4); color: #fff; }

/* Hero right — live */
.hero-r { display: flex; flex-direction: column; gap: 8px; }
.live-label { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.2); margin-bottom: 4px; display: flex; align-items: center; gap: 7px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; animation: lpulse 2.4s ease infinite; }
@keyframes lpulse { 0%,100%{opacity:1;}50%{opacity:.3;} }
.pc { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: 13px 15px; display: flex; align-items: center; gap: 11px; animation: fup .5s ease both; transition: background .15s; }
.pc:nth-child(3){animation-delay:.1s;}.pc:nth-child(4){animation-delay:.2s;}.pc:nth-child(5){animation-delay:.3s;}
@keyframes fup{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.pc:hover { background: rgba(255,255,255,.07); }
.pc-av { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; }
.pc-name { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.8); }
.pc-role { font-size: 12px; color: rgba(255,255,255,.3); margin-top: 2px; }
.pc-on { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; margin-left: auto; flex-shrink: 0; }
.hero-join { margin-top: 4px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 10px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; transition: all .15s; }
.hero-join:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.14); }
.hj-t { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.75); }
.hj-s { font-size: 11px; color: rgba(255,255,255,.3); margin-top: 3px; }
.hj-arr { color: rgba(255,255,255,.3); font-size: 16px; transition: transform .15s; }
.hero-join:hover .hj-arr { transform: translateX(3px); color: rgba(255,255,255,.65); }

/* Hero foot */
.hero-foot { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; width: 100%; padding: 16px 24px 16px 48px; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; gap: 36px; }
.hs-n { font-family: "Unbounded", sans-serif; font-size: 22px; font-weight: 800; color: #fff; line-height: 1; }
.hs-l { font-size: 11px; color: rgba(255,255,255,.25); margin-top: 3px; }
.hs-sep { width: 1px; height: 26px; background: rgba(255,255,255,.06); }
.hero-scroll { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 11px; color: rgba(255,255,255,.18); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: color .15s; }
.hero-scroll:hover { color: rgba(255,255,255,.45); }
.scroll-ring { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; animation: bob 2.5s ease-in-out infinite; }
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}

/* ── SECTION ENGAGEMENT — 3 grandes cartes sombres ── */
.eng-section { padding: 72px 24px 80px; background: var(--bg); }
.eng-inner { max-width: 1200px; margin: 0 auto; }
.sec-header { text-align: center; margin-bottom: 52px; }
.sec-pretitle { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mid); margin-bottom: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.sec-pretitle::before,.sec-pretitle::after { content:''; width: 32px; height: 1px; background: var(--pale); }
.sec-title { font-family: "Unbounded", sans-serif; font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin-bottom: 12px; }
.sec-sub { font-size: 15px; color: var(--mid); line-height: 1.7; max-width: 480px; margin: 0 auto; }

/* 3 voies */
.voies-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.voies-grid-bottom { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 20px; }

/* Carte Génération Marianne — pleine largeur, identité distincte */
.voie-card-gm {
  background: var(--white);
  border-radius: var(--r);
  border: 1.5px solid var(--gm-line);
  padding: 28px 32px;
  display: flex; align-items: center; gap: 32px;
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: border-color .18s, box-shadow .18s, transform .14s;
  box-shadow: var(--shadow-xs);
  grid-column: span 3;
}
.voie-card-gm::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--jaune), var(--jaune-f));
  opacity: 0; transition: opacity .18s;
}
.voie-card-gm:hover { border-color: var(--gm-gold); box-shadow: var(--shadow); transform: translateY(-2px); }
.voie-card-gm:hover::before { opacity: 1; }
.gm-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 100px;
  background: var(--gm-bg); border: 1px solid var(--gm-line);
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gm-gold); font-family: var(--mono);
  margin-bottom: 10px;
}
.gm-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gm-gold); }
.tag-gm { background: var(--gm-bg); color: var(--gm-gold2); border: 1px solid var(--gm-line); }
.gm-icon { font-size: 36px; flex-shrink: 0; }
.gm-content { flex: 1; min-width: 0; }
.gm-title { font-family: "Unbounded", sans-serif; font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -.01em; margin-bottom: 6px; }
.gm-desc { font-size: 13px; color: var(--muted); line-height: 1.65; max-width: 580px; }
.gm-pills { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.gm-pill { font-size: 11px; padding: 3px 10px; border-radius: 100px; background: var(--bg2); color: var(--text2); font-weight: 500; }
.gm-cta {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.gm-btn {
  padding: 10px 22px; border-radius: var(--r2);
  background: var(--gm-gold); color: #fff;
  font-size: 13px; font-weight: 700;
  transition: background .14s;
  white-space: nowrap;
}
.gm-btn:hover { background: var(--gm-gold2); }
.gm-ages { font-size: 11px; color: var(--muted); font-family: var(--mono); }

.voie-card {
  background: var(--white);
  border-radius: var(--r);
  border: 1.5px solid var(--line);
  padding: 32px 28px 28px;
  display: flex; flex-direction: column;
  cursor: pointer;
  position: relative;
  transition: border-color .18s, box-shadow .18s, transform .14s;
  box-shadow: var(--shadow-xs);
}
.voie-card:hover { border-color: var(--violet); box-shadow: var(--shadow); transform: translateY(-2px); }
.voie-card::after { display: none; }
.voie-card-accent {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--violet); border-radius: var(--r) var(--r) 0 0;
  opacity: 0; transition: opacity .18s;
}
.voie-card:hover .voie-card-accent { opacity: 1; }

.voie-num {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  color: var(--muted); letter-spacing: .1em;
  margin-bottom: 20px;
}
.voie-icon { font-size: 26px; margin-bottom: 14px; }
.voie-title {
  font-family: "Unbounded", sans-serif; font-size: 16px; font-weight: 700;
  color: var(--text); letter-spacing: -.01em; line-height: 1.25;
  margin-bottom: 10px;
}
.voie-desc {
  font-size: 13px; color: var(--muted); line-height: 1.7;
  margin-bottom: 22px; flex: 1;
}
.voie-steps-mini { display: flex; flex-direction: column; gap: 7px; margin-bottom: 24px; }
.vsm { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; color: var(--text2); line-height: 1.5; }
.vsm-n {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--violet-p); color: var(--violet);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; flex-shrink: 0; margin-top: 1px;
}

.voie-cta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--r2);
  font-size: 13px; font-weight: 600; color: var(--text);
  transition: background .14s, border-color .14s, color .14s;
  margin-top: auto;
}
.voie-card:hover .voie-cta { background: var(--violet); border-color: var(--violet); color: #fff; }
.voie-cta-arr { font-size: 14px; color: var(--muted); transition: transform .15s, color .14s; }
.voie-card:hover .voie-cta-arr { transform: translateX(4px); color: #fff; }

/* Modale tarifs */
.tarifs-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 20px; }
.tarif {
  border: 2px solid var(--pale); border-radius: 12px; overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.tarif:hover { border-color: var(--violet); box-shadow: 0 4px 16px rgba(106,76,147,.12); }
.tarif.best { border-color: var(--violet); }
.tarif-top { padding: 8px 14px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tarif.best .tarif-top { background: var(--violet); color: #fff; }
.tarif:not(.best) .tarif-top { background: var(--pale2); color: var(--mid); }
.tarif-top.promo { background: var(--rouge) !important; color: #fff !important; }
.tarif-body2 { padding: 18px 14px 16px; }
.tarif-label { font-size: 12px; font-weight: 600; color: var(--mid); margin-bottom: 10px; }
.tarif-price2 { display: flex; align-items: baseline; gap: 2px; margin-bottom: 14px; }
.tarif-amount2 { font-family: "Unbounded", sans-serif; font-size: 34px; font-weight: 800; color: var(--violet); line-height: 1; letter-spacing: -.04em; }
.tarif-cur2 { font-size: 16px; font-weight: 700; color: var(--violet); }
.tarif-per2 { font-size: 12px; color: var(--mid); }
.tarif-btn2 { display: block; width: 100%; padding: 9px; background: var(--violet); color: #fff; border-radius: 7px; font-size: 13px; font-weight: 700; text-align: center; cursor: pointer; transition: background .12s; border: none; margin-bottom: 12px; }
.tarif-btn2:hover { background: var(--violet-f); }
.tarif-btn2.r { background: var(--rouge); }
.tarif-btn2.r:hover { background: var(--rouge2); }
.tarif-avs { display: flex; flex-direction: column; gap: 5px; }
.tarif-av2 { font-size: 11px; color: var(--ink2); line-height: 1.4; display: flex; gap: 6px; }
.tarif-av2::before { content:'✓'; color: var(--violet); font-weight: 700; flex-shrink: 0; }

/* ── POSTES CADRES ── */
.postes-section { padding: 56px 24px 64px; background: var(--paper); }
.postes-inner { max-width: 1200px; margin: 0 auto; }
.postes-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.postes-title { font-family: "Unbounded", sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.postes-sub { font-size: 14px; color: var(--mid); margin-top: 4px; }
.postes-search { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ps-input { display: flex; align-items: center; gap: 8px; background: var(--white); border: 1.5px solid var(--pale); border-radius: 8px; padding: 8px 14px; transition: border-color .15s; }
.ps-input:focus-within { border-color: var(--violet); }
.ps-input input { border: none; background: none; outline: none; font: 13px var(--body); color: var(--ink); width: 200px; }
.ps-input input::placeholder { color: var(--mid); }
.ps-pills { display: flex; gap: 5px; flex-wrap: wrap; }
.pp { padding: 5px 12px; border-radius: 100px; border: 1.5px solid var(--pale); background: var(--white); font-size: 12px; font-weight: 500; color: var(--mid); cursor: pointer; transition: all .12s; white-space: nowrap; }
.pp:hover { color: var(--ink); border-color: var(--ink2); }
.pp.on { background: var(--violet); border-color: var(--violet); color: #fff; }

/* Poste cards — 2 colonnes */
.postes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.poste-card {
  background: var(--white); border: 1.5px solid var(--pale); border-radius: 12px;
  padding: 20px 22px; cursor: pointer; transition: all .15s;
}
.poste-card:hover { border-color: var(--violet); box-shadow: var(--shadow); transform: translateY(-1px); }
.poste-card.off { opacity: .5; pointer-events: none; }
.pt { font-family: "Unbounded", sans-serif; font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; margin-bottom: 5px; line-height: 1.3; }
.pd { font-size: 13px; color: var(--mid); line-height: 1.6; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pm { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pm-i { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--mid); }
.pf { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--paper); padding-top: 12px; }
.ps-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.tag { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; font-family: var(--mono); white-space: nowrap; letter-spacing: .03em; }
.t-cad { background: var(--violet-p); color: var(--violet); }
.t-nat { background: rgba(0,95,115,.07); color: var(--canard); }
.t-ter { background: rgba(26,122,74,.07); color: var(--vert); }
.t-off { background: var(--pale2); color: var(--mid); }
.pp.gm-filter.on { background: var(--gm-gold); border-color: var(--gm-gold); color: #fff; }
.pp.gm-filter { border-color: var(--gm-line); color: var(--gm-gold); }
.btn-cand { padding: 6px 16px; border-radius: 7px; background: var(--violet); color: #fff; font-size: 12px; font-weight: 700; transition: background .12s; white-space: nowrap; }
.btn-cand:hover { background: var(--violet-f); }

/* ── MON ESPACE ── */
.me-banner {
  background: var(--violet); border-radius: 14px; padding: 26px 32px;
  display: flex; align-items: center; gap: 18px; margin-bottom: 28px;
  position: relative; overflow: hidden;
}
.me-banner::before { content:''; position:absolute; right:-50px; top:-50px; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.15),transparent 65%); pointer-events:none; }
.me-av { width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-family: "Unbounded",sans-serif; font-size: 15px; font-weight: 800; color: #fff; flex-shrink: 0; position: relative; z-index: 1; border: 2px solid rgba(255,255,255,.3); }
.me-hi { font-family: "Unbounded", sans-serif; font-size: 18px; font-weight: 700; color: #fff; position: relative; z-index: 1; }
.me-sub { font-size: 12px; color: rgba(255,255,255,.38); margin-top: 3px; position: relative; z-index: 1; }
.me-sbadge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 100px; font-size: 11px; font-weight: 700; margin-top: 6px; position: relative; z-index: 1; }
.sb-adh { background: rgba(74,222,128,.15); color: #4ade80; }
.sb-cand { background: rgba(232,50,28,.2); color: #ff8872; }
.me-btns { margin-left: auto; display: flex; gap: 8px; position: relative; z-index: 1; }
.me-btn { padding: 7px 14px; border: 1.5px solid rgba(255,255,255,.12); border-radius: 7px; font-size: 13px; color: rgba(255,255,255,.55); transition: all .12s; }
.me-btn:hover { border-color: rgba(255,255,255,.3); color: #fff; }
.me-btn-out { padding: 7px 14px; border: 1.5px solid rgba(255,255,255,.06); border-radius: 7px; font-size: 13px; color: rgba(255,255,255,.25); transition: all .12s; }
.me-btn-out:hover { color: rgba(255,255,255,.55); }

.dash-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 28px; }
.dc { background: var(--white); border: 1.5px solid var(--pale); border-radius: 12px; padding: 20px; transition: all .15s; }
.dc:hover { border-color: var(--violet); box-shadow: var(--shadow-sm); }
.dc.wide { grid-column: span 2; }
.dc.full { grid-column: span 3; }
.dc-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.dc-icon { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.dc-label { font-family: "Unbounded", sans-serif; font-size: 13px; font-weight: 700; color: var(--ink); }
.dc-sublabel { font-size: 12px; color: var(--mid); margin-top: 2px; }
.dc-arr { font-size: 14px; color: var(--mid); margin-left: auto; transition: transform .12s; }
.dc:hover .dc-arr { color: var(--violet); }
.dc:hover .dc-arr { transform: translateX(3px); color: var(--violet); }

.contact-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--pale2); }
.contact-row:last-child { border-bottom: none; padding-bottom: 0; }
.cr-av { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: "Unbounded",sans-serif; font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0; }
.cr-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.cr-role { font-size: 11px; color: var(--mid); margin-top: 2px; }
.cr-btn { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; border: 1.5px solid var(--pale); color: var(--ink2); margin-left: auto; transition: all .12s; flex-shrink: 0; }
.cr-btn:hover { border-color: var(--violet); color: var(--violet); }

.app-item { background: var(--paper); border-radius: 10px; padding: 14px 16px; border-left: 3px solid var(--pale); margin-bottom: 8px; }
.app-item:last-child { margin-bottom: 0; }
.app-item.cadre { border-left-color: var(--violet); }
.app-item.stage { border-left-color: var(--vert); }
.ai-title { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.ai-meta { font-size: 11px; color: var(--mid); display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.wf { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.wf-dot { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.wf-done { background: var(--vert); color: #fff; }
.wf-active { background: var(--violet); color: #fff; animation: wfp 2s ease infinite; }
@keyframes wfp{0%,100%{box-shadow:0 0 0 0 rgba(106,76,147,.5);}50%{box-shadow:0 0 0 5px rgba(106,76,147,.0);}}
.wf-pending { background: var(--pale2); border: 1.5px solid var(--pale); color: var(--mid); }
.wf-line { width: 14px; height: 1px; background: var(--pale); }
.wf-label { font-size: 10px; color: var(--mid); margin-left: 6px; }

.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qa { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--paper); border-radius: 9px; border: 1.5px solid var(--pale); cursor: pointer; transition: all .12s; }
.qa:hover { border-color: var(--violet); background: var(--white); }
.qa-icon { font-size: 18px; flex-shrink: 0; }
.qa-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.qa-sub { font-size: 11px; color: var(--mid); margin-top: 1px; }

.adh-card { background: var(--bg2); border-radius: 12px; padding: 20px 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; border: 1.5px solid rgba(13,27,42,.1); }
.adh-card-title { font-family: "Unbounded", sans-serif; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.adh-card-info { font-size: 13px; color: var(--mid); }
.adh-card-btns { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ── MODALS ── */
.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); backdrop-filter: blur(4px); z-index: 600; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.overlay.open { display: flex; }
.modal { background: var(--white); border-radius: 16px; width: min(620px,96vw); box-shadow: 0 30px 80px rgba(0,0,0,.16); margin: auto; flex-shrink: 0; }
.mh { padding: 22px 26px 18px; border-bottom: 1px solid var(--pale); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mt { font-family: "Unbounded", sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.mx { font-size: 20px; color: var(--mid); padding: 2px; transition: color .12s; }
.mx:hover { color: var(--ink); }
.mb { padding: 22px 26px; }
.mfoot { padding: 14px 26px; border-top: 1px solid var(--pale); display: flex; gap: 10px; justify-content: flex-end; background: var(--paper); border-radius: 0 0 16px 16px; }
.fg { margin-bottom: 16px; }
.fl { display: block; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--mid); margin-bottom: 5px; }
.req { color: var(--rouge); }
.fi,.fs,.ft { width: 100%; padding: 10px 12px; border: 1.5px solid var(--pale); border-radius: 8px; font: 14px var(--body); color: var(--ink); background: var(--white); outline: none; transition: border-color .15s; }
.fi:focus,.fs:focus,.ft:focus { border-color: var(--violet); }
.ft { resize: vertical; min-height: 90px; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ch { display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 100px; border: 1.5px solid var(--pale); font-size: 13px; font-weight: 500; color: var(--ink2); background: var(--white); cursor: pointer; transition: all .12s; }
.ch:hover { border-color: var(--violet); color: var(--violet); }
.ch.on { background: var(--violet); border-color: var(--violet); color: #fff; }
.ch input { display: none; }
.btn-cancel { padding: 9px 18px; border: 1.5px solid var(--pale); border-radius: 8px; font: 500 14px var(--body); color: var(--mid); background: var(--white); cursor: pointer; }
.btn-cancel:hover { border-color: var(--mid); color: var(--ink); }
.btn-submit { padding: 9px 24px; color: #fff; border: none; border-radius: 8px; font: 700 14px var(--body); cursor: pointer; transition: background .12s; }
.btn-navy { background: var(--violet); }
.btn-navy:hover { background: var(--violet-f); }
.btn-vert { background: var(--vert); }
.btn-vert:hover { background: #155c38; }
.btn-rouge { background: var(--rouge); }
.btn-rouge:hover { background: var(--rouge2); }
.btn-full { width: 100%; padding: 12px; background: var(--violet); color: #fff; border: none; border-radius: 8px; font: 700 14px var(--body); cursor: pointer; margin-top: 4px; }
.btn-full:hover { background: var(--violet-f); }
.at { display: flex; border-bottom: 2px solid var(--pale); margin-bottom: 22px; }
.at-b { padding: 8px 18px; font-size: 14px; font-weight: 500; color: var(--mid); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .12s; cursor: pointer; }
.at-b.on { color: var(--violet); font-weight: 700; border-bottom-color: var(--violet); }
.info-box { border-radius: 10px; padding: 14px 16px; font-size: 13px; line-height: 1.65; margin-bottom: 18px; }
.info-navy { background: var(--violet-p); border: 1px solid rgba(106,76,147,.15); color: var(--ink2); }
.info-navy strong { color: var(--violet); }
.info-vert { background: rgba(26,122,74,.06); border: 1px solid rgba(26,122,74,.14); color: var(--ink2); }
.info-vert strong { color: var(--vert); }
.file-drop { border: 2px dashed var(--pale); border-radius: 8px; padding: 18px; text-align: center; cursor: pointer; transition: all .15s; position: relative; background: var(--paper); }
.file-drop:hover,.file-drop.drag { border-color: var(--violet); background: rgba(106,76,147,.02); }
.file-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.file-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 1.5px solid var(--pale); border-radius: 7px; padding: 7px 12px; font-size: 13px; font-weight: 500; color: var(--ink2); margin-top: 8px; }
.file-chip-rm { color: var(--mid); cursor: pointer; font-size: 14px; transition: color .12s; flex-shrink: 0; }
.file-chip-rm:hover { color: var(--rouge); }

/* Toasts */
#toasts { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: 12px; background: var(--anthracite); color: #fff; padding: 13px 16px; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.18); min-width: 260px; max-width: 340px; animation: tin .2s ease; pointer-events: all; border-left: 3px solid var(--violet); }
@keyframes tin { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)} }
.t-t { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.t-m { font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.45; }
.t-x { color: rgba(255,255,255,.3); font-size: 14px; flex-shrink: 0; margin-left: auto; transition: color .12s; }
.t-x:hover { color: #fff; }

@media(max-width:960px){
  .hero-body{grid-template-columns:1fr;padding:48px 20px 32px 28px;}
  .hero-r{display:none;}
  .voies-grid{grid-template-columns:1fr;}
  .tarifs-grid{grid-template-columns:1fr;}
  .offers-grid{grid-template-columns:1fr;}.offers-sep{display:none;}
  .postes-grid{grid-template-columns:1fr;}
  .dash-grid{grid-template-columns:1fr;}.dc.wide,.dc.full{grid-column:span 1;}
  .qa-grid{grid-template-columns:1fr;}
  .header-main{padding:0 16px;}
  .topstrip{padding:0 16px;}
  .frow{grid-template-columns:1fr;}
  .eng-section,.postes-section{padding:40px 20px;}
  .me-banner{flex-wrap:wrap;}.me-btns{margin-left:0;}
}