/* ==========================================================================
   Stage Bénin — feuille de style commune
   Mobile d'abord. Aucune grille multi-colonnes sans point de rupture explicite.
   ========================================================================== */

:root{
  --brand:#0f766e;
  --brand-dark:#0b4f4a;
  --brand-mid:#14b8a6;
  --brand-soft:#ecfdf5;
  --brand-line:#cbeae4;
  --accent:#f59e0b;
  --accent-soft:#fffbeb;
  --ink:#0f1c2e;
  --ink-2:#334155;
  --muted:#6b7c91;
  --line:#e4eaee;
  --bg:#f5f8f8;
  --card:#ffffff;
  --danger:#dc2626;
  --danger-soft:#fef2f2;
  --ok:#15803d;
  --ok-soft:#f0fdf4;
  --warn:#b45309;
  --warn-soft:#fffbeb;
  --info:#1d4ed8;
  --info-soft:#eff6ff;
  --r-lg:20px;
  --r-md:14px;
  --r-sm:10px;
  --shadow:0 4px 16px rgba(15,28,46,.06);
  --shadow-lg:0 18px 40px -18px rgba(15,28,46,.28);
  --top:0px;
  --maxw:1120px;
  --gutter:16px;   /* marge laterale unique : s'agrandit avec l'ecran */
  --sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  font-size:15.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}
body[data-variant="admin"]{--brand:#1d4ed8;--brand-dark:#1e3a8a;--brand-mid:#3b82f6;--brand-soft:#eff6ff;--brand-line:#dbeafe}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4{margin:0;line-height:1.25;letter-spacing:-.02em;font-weight:700}
p{margin:0}
svg{flex:none}

/* --------------------------------------------------------------- écran d'ouverture */
#app-splash{
  display:none;position:fixed;inset:0;z-index:99999;pointer-events:none;
  flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:var(--brand);
}
#app-splash img{border-radius:22px}
#app-splash span{color:#fff;font-weight:700;font-size:19px;letter-spacing:-.01em}
#app-splash.show{display:flex;animation:splashOut .4s ease 1.2s forwards}
@keyframes splashOut{to{opacity:0;visibility:hidden}}

/* ------------------------------------------------------------------- structure */
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.page{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.page--tabs{min-height:100vh}
.section{margin:26px 0}
.section__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.section__title{font-size:19px;font-weight:800}
.section__link{font-size:13.5px;font-weight:600;color:var(--brand);white-space:nowrap}
.section__sub{font-size:13.5px;color:var(--muted);margin-top:3px}

/* --------------------------------------------------------------------- topbar */
.topbar{
  position:sticky;top:0;z-index:60;
  padding-top:env(safe-area-inset-top,0px);
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.topbar__inner{
  width:100%;max-width:var(--maxw);margin:0 auto;
  padding:10px var(--gutter);
  display:flex;align-items:center;gap:clamp(8px,1.6vw,14px);min-height:60px;
}
.topbar__back{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  border:1px solid var(--line);background:#fff;color:var(--ink-2);flex:none;
  transition:transform .12s ease,background .15s ease;
}
.topbar__back:active{transform:scale(.94)}
.topbar__brand{display:flex;align-items:center;flex:none}
.topbar__brand svg{display:block}
.topbar__txt{flex:1 1 auto;min-width:0}
.topbar__title{
  font-size:clamp(15px,4vw,17px);font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar__sub{
  font-size:clamp(11.5px,3vw,12.5px);color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar__right{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.topbar__right .btn--sm{padding:8px 12px;white-space:nowrap}

/* telephones etroits (320-360px) : on rend la place au titre et au bouton */
@media (max-width:400px){
  .topbar__inner{padding:8px 12px;gap:8px;min-height:56px}
  .topbar__right .btn--sm{padding:7px 10px;font-size:12.5px}
  /* le logo laisse un peu plus de place au titre */
  .topbar__brand svg{width:30px;height:30px}
}
@media (max-width:359px){
  .topbar__sub{display:none}
  .tabbar__lbl{font-size:9.5px}
  .hero__eyebrow{font-size:11.5px;padding:5px 10px}
}
.topbar--hero{
  background:linear-gradient(160deg,var(--brand) 0%,var(--brand-dark) 100%);
  border-bottom:none;color:#fff;
}
.topbar--hero .topbar__title,.topbar--hero .topbar__sub{color:#fff}
.topbar--hero .topbar__sub{opacity:.82}
.topbar--hero .topbar__back{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.22);color:#fff}

.desknav{display:none}

/* --------------------------------------------------------------------- tabbar */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;justify-content:space-around;align-items:stretch;
  padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
}
.tabbar__item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 2px;border-radius:14px;color:var(--muted);
  transition:transform .12s ease,color .15s ease,background .15s ease;
}
.tabbar__item:active{transform:scale(.94)}
.tabbar__ico{
  width:40px;height:30px;border-radius:11px;display:grid;place-items:center;
  transition:background .18s ease,color .18s ease;
}
.tabbar__lbl{
  font-size:10.5px;font-weight:600;letter-spacing:-.01em;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tabbar__item.is-active{color:var(--brand)}
.tabbar__item.is-active .tabbar__ico{background:var(--brand-soft)}
.tabbar--admin .tabbar__item.is-active .tabbar__ico{background:var(--brand-soft)}

/* -------------------------------------------------------------------- boutons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 18px;border-radius:var(--r-md);border:1px solid transparent;
  font-size:14.5px;font-weight:700;cursor:pointer;background:#fff;color:var(--ink);
  transition:transform .12s ease,box-shadow .18s ease,background .18s ease,opacity .18s;
  text-align:center;line-height:1.2;
}
.btn:active{transform:scale(.97)}
.btn[disabled],.btn.is-busy{opacity:.6;pointer-events:none}
.btn--primary{background:var(--brand);color:#fff;box-shadow:0 8px 20px -10px rgba(15,118,110,.65)}
.btn--primary:hover{background:var(--brand-dark)}
.btn--dark{background:var(--ink);color:#fff}
.btn--ghost{background:#fff;border-color:var(--line);color:var(--ink-2)}
.btn--soft{background:var(--brand-soft);color:var(--brand-dark)}
.btn--danger{background:var(--danger-soft);color:var(--danger)}
.btn--accent{background:var(--accent);color:#3d2600}
.btn--sm{padding:9px 13px;font-size:13px;border-radius:11px}
.btn--xs{padding:7px 11px;font-size:12.5px;border-radius:9px;gap:6px}
.btn--block{width:100%}
.btn--install{
  background:var(--ink);color:#fff;width:100%;
}
.btn-row{display:flex;flex-wrap:wrap;gap:10px}

/* ---------------------------------------------------------------------- cartes */
.card{
  background:var(--card);border-radius:var(--r-lg);padding:18px;
  box-shadow:var(--shadow);border:1px solid rgba(228,234,238,.9);
}
.card--flat{box-shadow:none;border:1px solid var(--line)}
.card__title{font-size:16px;font-weight:800;margin-bottom:10px}
.grid{display:grid;grid-template-columns:1fr;gap:14px}
.grid--tight{gap:10px}

/* ----------------------------------------------------------------------- hero */
/* Le hero est fluide : une seule colonne sur telephone, texte et photo cote a
   cote a partir de 900px. Toutes les tailles sont en clamp(), donc chaque
   largeur d'ecran (petit telephone, tablette, grand ecran, paysage) a
   automatiquement la bonne taille, sans jamais rien couper ni ecraser. */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(155deg,var(--brand-dark) 0%,var(--brand) 55%,#127f77 100%);
  padding:clamp(24px,5.2vw,58px) 0 clamp(28px,5.8vw,64px);
}
.hero::after{
  content:'';position:absolute;right:-90px;top:-70px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%);
}
.hero__inner{
  position:relative;z-index:2;display:grid;grid-template-columns:1fr;
  gap:18px;align-items:start;
}
.hero__copy{min-width:0}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:7px;font-size:clamp(11.5px,3.1vw,12.5px);font-weight:700;
  background:rgba(255,255,255,.16);padding:6px 12px;border-radius:999px;margin-bottom:14px;
  max-width:100%;
}
.hero h1{
  font-size:clamp(24px,6.2vw,44px);font-weight:800;letter-spacing:-.03em;
  margin-bottom:10px;overflow-wrap:break-word;
}
.hero p{font-size:clamp(14.5px,1.7vw,16.5px);opacity:.9;max-width:58ch}
.hero__media{
  margin-top:2px;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);
}
.hero__media img{width:100%;height:auto;aspect-ratio:16/10;max-height:60vh;object-fit:cover}
.hero__search{
  margin-top:18px;background:#fff;border-radius:var(--r-lg);padding:12px;
  box-shadow:var(--shadow-lg);display:grid;grid-template-columns:1fr;gap:10px;
}

/* ------------------------------------------------------------------ recherche */
.searchbar{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:4px 6px 4px 12px}
.searchbar svg{color:var(--muted)}
.searchbar input{flex:1;border:0;background:transparent;font-size:16px;padding:10px 0;color:var(--ink);outline:none;min-width:0}
.searchbar input::placeholder{color:#9aa9b8}

.field{display:block;margin-bottom:14px}
.field__lbl{display:block;font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:6px}
.field__hint{font-size:12px;color:var(--muted);margin-top:5px}
.input,.select,.textarea{
  width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:var(--r-md);
  /* 16px : en dessous, le navigateur du telephone zoome tout seul sur le champ */
  font-family:inherit;font-size:16px;color:var(--ink);background:#fff;outline:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.input:focus,.select:focus,.textarea:focus{border-color:var(--brand-mid);box-shadow:0 0 0 3px rgba(20,184,166,.16)}
.textarea{min-height:110px;resize:vertical;line-height:1.5}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7c91' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:38px}
.field-row{display:grid;grid-template-columns:1fr;gap:0 14px}

/* -------------------------------------------------------------------- pastilles */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;
  background:#fff;border:1px solid var(--line);font-size:12.8px;font-weight:600;color:var(--ink-2);
  cursor:pointer;transition:transform .12s ease,background .15s,border-color .15s,color .15s;
}
.chip:active{transform:scale(.96)}
.chip.is-active{background:var(--brand);border-color:var(--brand);color:#fff}
.chip--static{cursor:default}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--muted);background:#f2f6f7;border-radius:8px;padding:5px 9px}
.tag svg{color:var(--brand)}

.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px;background:#eef2f5;color:var(--ink-2);white-space:nowrap}
.badge--en_attente{background:var(--accent-soft);color:var(--warn)}
.badge--vue{background:var(--info-soft);color:var(--info)}
.badge--entretien{background:#f5f3ff;color:#6d28d9}
.badge--acceptee{background:var(--ok-soft);color:var(--ok)}
.badge--refusee{background:var(--danger-soft);color:var(--danger)}
.badge--active{background:var(--ok-soft);color:var(--ok)}
.badge--inactive{background:#f1f5f9;color:var(--muted)}
.badge--verifie{background:var(--brand-soft);color:var(--brand-dark)}
.badge--new{background:var(--danger);color:#fff}

/* -------------------------------------------------------------------- états */
.state{padding:38px 18px;text-align:center;background:#fff;border-radius:var(--r-lg);border:1px dashed var(--line)}
.state__ico{width:64px;height:64px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;margin:0 auto 14px}
.state__title{font-weight:800;font-size:16px}
.state__text{color:var(--muted);font-size:14px;margin-top:6px}
.state .btn{margin-top:16px}

.alert{display:flex;gap:10px;align-items:flex-start;padding:13px 14px;border-radius:var(--r-md);font-size:13.8px;font-weight:500;margin-bottom:14px}
.alert--warn{background:var(--warn-soft);color:#7c4a09;border:1px solid #fde68a}
.alert--info{background:var(--info-soft);color:#1e3a8a;border:1px solid #dbeafe}
.alert--err{background:var(--danger-soft);color:#991b1b;border:1px solid #fecaca}
.alert--ok{background:var(--ok-soft);color:#166534;border:1px solid #bbf7d0}

/* ------------------------------------------------------------------- avatars */
.avatar{border-radius:50%;object-fit:cover;background:#e8eef0;flex:none}
.avatar--sq{border-radius:14px}
.avatar--init{display:grid;place-items:center;color:#fff;font-weight:800;background:var(--c,#0f766e)}

/* ------------------------------------------------------------------- offres */
.offre{
  display:flex;flex-direction:column;gap:12px;background:#fff;border-radius:var(--r-lg);
  padding:16px;box-shadow:var(--shadow);border:1px solid rgba(228,234,238,.9);
  transition:transform .14s ease,box-shadow .18s ease;
}
.offre:active{transform:scale(.99)}
.offre__head{display:flex;gap:12px;align-items:flex-start}
.offre__logo{width:48px;height:48px;border-radius:14px;object-fit:cover;background:var(--brand-soft);flex:none}
.offre__title{font-size:15.5px;font-weight:800;letter-spacing:-.015em}
.offre__ent{font-size:12.8px;color:var(--muted);margin-top:2px}
.offre__meta{display:flex;flex-wrap:wrap;gap:7px}
.offre__excerpt{font-size:13.5px;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.offre__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
.offre__pay{font-size:13.5px;font-weight:800;color:var(--brand-dark)}
.offre__date{font-size:12px;color:var(--muted)}
.offre--compact{padding:14px}
.fav-btn{background:none;border:0;padding:6px;border-radius:10px;color:var(--muted);cursor:pointer;transition:transform .12s,color .15s}
.fav-btn:active{transform:scale(.9)}
.fav-btn.is-on{color:var(--danger)}

.row-item{
  display:flex;gap:12px;align-items:center;background:#fff;border-radius:var(--r-md);
  padding:14px;border:1px solid var(--line);transition:transform .12s;
}
.row-item:active{transform:scale(.995)}
.row-item__body{flex:1;min-width:0}
.row-item__t{font-weight:700;font-size:14.5px}
.row-item__s{font-size:12.8px;color:var(--muted);margin-top:2px}

/* ------------------------------------------------------------------ stats */
.stat{
  background:#fff;border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow);
  border:1px solid rgba(228,234,238,.9);
}
.stat__ico{width:42px;height:42px;border-radius:13px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;margin-bottom:12px}
.stat__v{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1}
.stat__l{font-size:12.8px;color:var(--muted);margin-top:5px;font-weight:600}
.stat__d{font-size:12px;font-weight:700;color:var(--ok);margin-top:6px}
.stat--accent .stat__ico{background:var(--accent-soft);color:var(--warn)}

.kpi-band{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--brand-line);
  border-radius:var(--r-lg);overflow:hidden;margin-top:-22px;position:relative;z-index:3;box-shadow:var(--shadow-lg);
}
.kpi-band__i{background:#fff;padding:14px 12px;text-align:center}
.kpi-band__v{font-size:21px;font-weight:800;letter-spacing:-.03em;color:var(--brand-dark)}
.kpi-band__l{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:2px}

/* ------------------------------------------------------------------ timeline */
.timeline{position:relative;padding-left:26px}
.timeline::before{content:'';position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line)}
.timeline__i{position:relative;padding-bottom:18px}
.timeline__i::before{content:'';position:absolute;left:-24px;top:5px;width:12px;height:12px;border-radius:50%;background:#fff;border:2.5px solid var(--line)}
.timeline__i.is-on::before{border-color:var(--brand);background:var(--brand)}
.timeline__t{font-size:13.8px;font-weight:700}
.timeline__s{font-size:12.5px;color:var(--muted)}

/* ---------------------------------------------------------------- tableau */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-md);border:1px solid var(--line);background:#fff}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.tbl th{
  text-align:left;padding:11px 12px;background:#f7fafa;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted);font-weight:700;border-bottom:1px solid var(--line);white-space:nowrap;
}
.tbl td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl__actions{display:flex;gap:6px;flex-wrap:wrap}

/* --------------------------------------------------------------- formulaires */
.form-card{background:#fff;border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow);border:1px solid rgba(228,234,238,.9)}
.auth-wrap{max-width:520px;margin:0 auto;padding:22px 16px 40px}
.auth-head{text-align:center;margin-bottom:20px}
.auth-head__logo{display:flex;justify-content:center;margin-bottom:14px}
.auth-head h1{font-size:23px;font-weight:800;letter-spacing:-.03em}
.auth-head p{color:var(--muted);font-size:14.5px;margin-top:8px}
.roleswitch{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#eef3f4;padding:5px;border-radius:var(--r-md);margin-bottom:18px}
.roleswitch button{
  border:0;background:transparent;padding:10px;border-radius:11px;font-weight:700;font-size:13.5px;
  color:var(--muted);cursor:pointer;transition:background .18s,color .18s,transform .12s;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.roleswitch button:active{transform:scale(.97)}
.roleswitch button.is-active{background:#fff;color:var(--brand);box-shadow:var(--shadow)}
.steps{display:flex;gap:6px;margin-bottom:18px}
.steps span{flex:1;height:4px;border-radius:99px;background:var(--line)}
.steps span.is-on{background:var(--brand)}

/* -------------------------------------------------------------------- modale */
.modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:flex-end;justify-content:center}
.modal__backdrop{position:absolute;inset:0;background:rgba(15,28,46,.55);backdrop-filter:blur(3px)}
.modal__panel{
  position:relative;width:100%;max-width:520px;background:#fff;border-radius:22px 22px 0 0;
  padding:22px 18px calc(22px + env(safe-area-inset-bottom,0px));box-shadow:var(--shadow-lg);
  animation:slideUp .24s ease;max-height:88vh;overflow-y:auto;
}
@keyframes slideUp{from{transform:translateY(24px);opacity:.4}}
.modal__title{font-size:17.5px;font-weight:800;margin-bottom:14px}
.modal__close{position:absolute;right:14px;top:14px;width:36px;height:36px;border-radius:12px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer}
.install-step{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:var(--r-md);background:#f7fafa;margin-bottom:12px}
.install-step__os{display:flex;align-items:center;gap:9px;color:var(--brand-dark)}
.install-step__os b{font-size:14px}
.install-step p{font-size:13.5px;color:var(--ink-2)}
.sheet-tall{max-height:82vh}

/* -------------------------------------------------------------------- toasts */
.toasts{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:9500;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{
  background:var(--ink);color:#fff;padding:13px 15px;border-radius:var(--r-md);font-size:13.8px;font-weight:600;
  box-shadow:var(--shadow-lg);display:flex;gap:10px;align-items:center;animation:toastIn .22s ease;
}
.toast--ok{background:#0f5132}
.toast--err{background:#7f1d1d}
@keyframes toastIn{from{transform:translateY(10px);opacity:0}}

/* ------------------------------------------------------------------- footer */
.footer{
  background:#fff;border-top:1px solid var(--line);margin-top:34px;
  padding:26px 0 calc(26px + env(safe-area-inset-bottom,0px));
}
.footer__grid{display:grid;grid-template-columns:1fr;gap:22px}
.footer__brand{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-weight:800}
.footer__txt{font-size:13px;color:var(--muted);max-width:340px}
.footer h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:10px}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.footer li a{font-size:13.8px;color:var(--ink-2)}
.footer li a:hover{color:var(--brand)}
.footer__bottom{
  margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:12.5px;color:var(--muted);
}

/* ---------------------------------------------------------------- accordéon */
.acc{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;overflow:hidden;margin-bottom:10px}
.acc__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px;background:none;border:0;font-weight:700;font-size:14.3px;text-align:left;cursor:pointer;font-family:inherit;color:var(--ink)}
.acc__a{padding:0 15px 16px;font-size:14px;color:var(--ink-2);display:none}
.acc.is-open .acc__a{display:block}
.acc.is-open .acc__q svg{transform:rotate(180deg)}
.acc__q svg{transition:transform .2s}

/* ------------------------------------------------------------------ galerie entreprises */
.ent-card{display:flex;gap:12px;align-items:center;background:#fff;border-radius:var(--r-lg);padding:15px;box-shadow:var(--shadow);border:1px solid rgba(228,234,238,.9)}
.ent-card__logo{width:52px;height:52px;border-radius:15px;object-fit:cover;background:var(--brand-soft);flex:none}
.ent-card__n{font-weight:800;font-size:15px}
.ent-card__m{font-size:12.5px;color:var(--muted);margin-top:3px}

.detail-hero{
  background:linear-gradient(150deg,var(--brand-dark),var(--brand));color:#fff;
  padding:clamp(20px,4vw,34px) 0 clamp(22px,4.4vw,36px);
}
/* Bloc d'en-tete pleine largeur : la marge laterale suit --gutter, donc
   l'alignement reste juste sur telephone comme sur grand ecran. */
.blk-bleed{margin:-18px calc(-1 * var(--gutter)) 0}
/* Logo + nom : grille (jamais de flex qui ecrase le texte sur petit ecran) */
.detail-hero__top{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(10px,2.5vw,14px);align-items:center;
}
.detail-hero__top img,.detail-hero__top>span{flex:none}
.detail-hero h1{
  font-size:clamp(18px,4.6vw,26px);font-weight:800;letter-spacing:-.025em;
  margin-top:12px;overflow-wrap:break-word;
}
.detail-hero__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.detail-hero .tag{background:rgba(255,255,255,.16);color:#fff}
.detail-hero .tag svg{color:#fff}
/* petit ecran : le badge passe sous le nom au lieu d'ecraser le titre */
@media (max-width:480px){
  .detail-hero__top{grid-template-columns:auto minmax(0,1fr)}
  .detail-hero__top>.badge{grid-column:1 / -1;justify-self:start;margin-top:6px}
}
.prose{font-size:14.6px;line-height:1.68;color:var(--ink-2);overflow-wrap:break-word}
.prose ul{margin:8px 0 0;padding-left:18px;display:grid;gap:6px}
.prose li{font-size:14.4px}
.cover-img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-lg)}

.sticky-actions{
  position:sticky;bottom:0;z-index:40;background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));
  margin-top:22px;
}

/* ------------------------------------------------------------------ filtres */
.filters{display:grid;grid-template-columns:1fr;gap:10px}
.filter-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:20px;flex-wrap:wrap}
.pager button{min-width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:#fff;font-weight:700;color:var(--ink-2);cursor:pointer;font-family:inherit;font-size:13.5px}
.pager button.is-active{background:var(--brand);border-color:var(--brand);color:#fff}
.pager button[disabled]{opacity:.4;pointer-events:none}

/* ------------------------------------------------------------------ divers */
.split{display:grid;grid-template-columns:1fr;gap:16px}
.muted{color:var(--muted)}
.small{font-size:12.8px}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}
.center{text-align:center}
.hr{height:1px;background:var(--line);margin:18px 0;border:0}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.is-in{opacity:1;transform:none}
.skeleton{background:linear-gradient(90deg,#eef2f4 25%,#f7fafb 37%,#eef2f4 63%);background-size:400% 100%;animation:sk 1.3s infinite linear;border-radius:var(--r-md)}
@keyframes sk{0%{background-position:100% 0}100%{background-position:0 0}}
.dot-live{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block}
.progress{height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.progress span{display:block;height:100%;background:var(--brand);border-radius:99px;transition:width .4s ease}
.map-frame{width:100%;height:220px;border:0;border-radius:var(--r-lg);background:#eef3f4}
.doc-list{display:grid;gap:10px}

/* ==========================================================================
   Adaptation a toutes les tailles d'ecran
   Principe : mobile d'abord. Les tailles de texte sont en clamp() (elles
   suivent la largeur de l'ecran en continu), les grilles ne s'ouvrent
   qu'aux paliers ou elles ont vraiment la place. Rien n'est jamais coupe.
   ========================================================================== */
@media (min-width:600px){
  /* rien de multi-colonnes avant 768px : les cartes d'offres sont trop
     riches pour etre serrees en 2 colonnes sur un petit ecran */
  .section{margin:30px 0}
}

@media (min-width:768px){
  body{font-size:16px}

  /* le menu du bas laisse la place a un vrai menu dans la barre du haut */
  .tabbar{display:none}
  .page{padding-bottom:40px}

  .desknav{
    display:flex;gap:2px;flex:1 1 auto;min-width:0;justify-content:flex-end;
    overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  }
  .desknav::-webkit-scrollbar{display:none}
  .desknav a{
    padding:9px 12px;border-radius:11px;font-size:13.5px;font-weight:600;
    color:var(--ink-2);white-space:nowrap;
  }
  .desknav a:hover{background:var(--brand-soft);color:var(--brand-dark)}
  .desknav a.is-active{background:var(--brand-soft);color:var(--brand-dark)}
  /* entre 768 et 1023px la barre est etroite : on retire le sous-titre
     pour laisser toute la place au menu */
  .topbar__sub{display:none}

  .field-row{grid-template-columns:1fr 1fr}
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .kpi-band{grid-template-columns:repeat(4,1fr)}
  .split{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:24px}
  .split--even{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__grid{grid-template-columns:1.5fr 1fr 1fr}
  .filters{grid-template-columns:repeat(2,1fr)}
  .modal{align-items:center}
  .modal__panel{border-radius:22px;padding:26px}
  .toasts{left:auto;right:20px;bottom:20px;width:340px}
  .sticky-actions{position:static;background:none;border:0;backdrop-filter:none}
  .offre__excerpt{-webkit-line-clamp:3}
  .prose{font-size:15px}
}

/* a partir de 900px : texte a gauche, photo a droite dans le hero */
@media (min-width:900px){
  .hero__inner{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:clamp(24px,3.5vw,44px);align-items:center;
  }
  .hero__media{margin-top:0}
  .hero__search{grid-template-columns:1fr 1fr}
  .hero__search .searchbar{grid-column:1 / -1}
  .hero__search .btn{grid-column:1 / -1}
}

@media (min-width:1024px){
  :root{--gutter:24px}
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
  .filters{grid-template-columns:repeat(3,1fr)}
  .topbar__sub{display:block}
}

/* tres large ecran : la recherche du hero repasse sur une seule ligne */
@media (min-width:1100px){
  .hero__search{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr) auto;align-items:center;gap:12px}
  .hero__search .searchbar{grid-column:auto}
  .hero__search .btn{grid-column:auto}
}

@media (min-width:1440px){
  :root{--gutter:32px;--maxw:1240px}
}

/* telephone tenu en paysage (hauteur faible) : on compacte les hauts de page */
@media (max-height:520px) and (orientation:landscape){
  .hero{padding:18px 0 22px}
  .hero__media{display:none}
  .hero__search{margin-top:12px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
}