/* Start custom CSS for html, class: .elementor-element-d1e854b *//* =============== Variables & base (mobile-first) =============== */
:root{
  --navy:#06376d; --ink:#233142; --muted:#5a6170;
  --turq:#3ad3d4; --turq-600:#18b9b9; --ice:#ebffff;
  --soft:#f6f9fc; --line:#E7ECF3; --white:#fff;

  --glass-bg: rgba(255,255,255,.8);
  --glass-brd: rgba(6,55,109,.12);
  --shadow-1: 0 8px 22px rgba(6,55,109,.10);
  --shadow-2: 0 16px 36px rgba(6,55,109,.16);

  --radius:16px; --r-sm:12px;
  --ring: 0 0 0 4px rgba(58,211,212,.18);
}

@media (prefers-color-scheme: dark){
  :root{
    --navy:#c6d2e1; --ink:#d1d8e0; --muted:#9aa6b2;
    --turq:#43e2e3; --turq-600:#1fc9c9; --ice:#0d3a42;
    --soft:#0f1520; --line:#1e2a3a; --white:#0e1522;

    --glass-bg: rgba(17,24,39,.72);
    --glass-brd: rgba(255,255,255,.08);
    --shadow-1: 0 10px 28px rgba(0,0,0,.35);
    --shadow-2: 0 18px 48px rgba(0,0,0,.5);
    --ring: 0 0 0 4px rgba(67,226,227,.2);
  }
  html,body{ background:#0b111b }
}

*{ box-sizing:border-box }
html,body{ margin:0; font-family:"Open Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:var(--ink); background:#fff }
.container{ width:min(1120px,92%); margin:0 auto }
h1,h2,h3{ margin:0; color:var(--navy) }
a{ text-decoration:none }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.82rem 1.15rem; border-radius:12px; font-weight:900;
  transition:transform .12s ease, background .2s ease, color .2s ease, border-color .2s ease;
  border:2px solid transparent; box-shadow: var(--shadow-1);
}
.btn:hover{ transform: translateY(-1px) }
.btn--primary{ background:linear-gradient(135deg,var(--turq),var(--turq-600)); color:#06376d }
.btn--primary:hover{ filter:brightness(.98) }
.btn--ghost{ background:transparent; color:#06376d; border-color:#06376d }
.btn--ghost:hover{ background:#06376d; color:#fff }

/* =============== Header =============== */
.md-header{
  position:sticky; top:0; z-index:1000;
  background:linear-gradient(180deg, rgba(235,255,255,.5), rgba(255,255,255,.85));
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom:1px solid var(--glass-brd);
}
.md-nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; height:72px }
.md-brand img{ height:44px; display:block }
.md-right{ display:flex; align-items:center; gap:8px }

/* =============== Hero =============== */
.hero-compact{
  background:
    radial-gradient(60% 60% at 85% -10%, rgba(58,211,212,.18), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f9fafc 100%);
  padding: 56px 0 36px;
}
.hero-inner{ display:flex; flex-direction:column; gap:16px }
.hero-text h1{ font-size:1.8rem; font-weight:900; line-height:1.15 }
.hero-text p{ color:var(--muted); margin-top:.35rem }
.kpis{ list-style:none; padding:0; margin:0; display:flex; gap:10px; flex-wrap:wrap }
.kpis li{
  background:var(--white); border:1px solid var(--glass-brd); border-radius:14px; padding:10px 12px;
  box-shadow:var(--shadow-1); min-width:120px; text-align:center
}
.kpis strong{ display:block; color:#06376d }
.kpis span{ font-size:.8rem; color:var(--muted) }

/* =============== Layout =============== */
.search-layout{ padding: 16px 0 70px }
.layout{ display:grid; grid-template-columns:1fr; gap:16px }

/* =============== Filtres (Mobile = top accordéon) =============== */
.filters{
  background:var(--glass-bg); border:1px solid var(--glass-brd); border-radius:var(--radius);
  box-shadow: var(--shadow-1); overflow:hidden;
}
.filters-toggle{ display:none }
.filters-toggle-btn{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; cursor:pointer; font-weight:900; color:#06376d;
  background:linear-gradient(180deg, rgba(235,255,255,.6), rgba(255,255,255,.8));
  border-bottom:1px solid var(--glass-brd);
}
.filters-toggle-btn b{ transition: transform .2s }
.filters__form{
  display:grid; grid-template-columns:1fr; gap:12px; padding:14px;
  max-height:0; overflow:hidden; transition:max-height .35s ease;
}
.f-row{ display:grid; grid-template-columns:1fr; gap:12px }
.f-label{ font-size:.82rem; color:#4b5a68; font-weight:800; margin-bottom:6px; display:block }
.f-block input, .f-block select{
  width:100%; padding:.78rem .95rem; border:1.5px solid var(--line);
  border-radius:12px; font-size:.96rem; background:var(--white); color:var(--ink);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.f-block input:focus, .f-block select:focus{ outline:none; border-color:var(--turq); box-shadow: var(--ring) }
.filters .btn{ width:100%; margin-top:6px; box-shadow:none }
.filters-active{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px }
.chip{
  background:var(--ice); color:#06376d; border:1px solid rgba(6,55,109,.12);
  padding:.35rem .6rem; border-radius:999px; font-weight:800; font-size:.78rem;
}

/* Accordéon ouvert */
.filters-toggle:checked ~ .filters__form{ max-height:1200px }
.filters-toggle:checked + .filters-toggle-btn b{ transform:rotate(45deg) }

/* =============== Résultats (Cards) =============== */
.results{}
.results__header{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap
}
.results__header p{ margin:0; color:#22364a }
.view-toggle{
  display:inline-flex; gap:8px; background:var(--white);
  border:1px solid var(--line); border-radius:999px; padding:4px;
}
.view-toggle button{
  border:none; background:transparent; padding:.45rem .7rem; border-radius:999px; cursor:pointer;
  font-weight:900; color:#6b7482
}
.view-toggle .is-active{ background:var(--ice); color:#06376d }

.cards{ display:grid; grid-template-columns:1fr; gap:14px }
.card{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.98));
  border:1px solid var(--glass-brd); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow-1);
  display:flex; flex-direction:column; gap:10px;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow:var(--shadow-2); border-color:rgba(58,211,212,.25) }

.card__head{ display:grid; grid-template-columns:56px 1fr; gap:10px; align-items:center }
.avatar{
  width:56px; height:56px; border-radius:14px; display:grid; place-items:center; font-weight:900;
  background:linear-gradient(135deg, #eff6ff, #ebffff); color:#06376d; border:1px solid rgba(6,55,109,.12)
}
.avatar.alt{ background:linear-gradient(135deg, #ebffff, #eff6ff) }
.id h3{ margin:0; font-size:1.02rem; color:#06376d; letter-spacing:.2px; font-weight:900 }
.role{ margin:2px 0 0; color:#22364a; font-weight:800 }
.quick{ display:none } /* masqué mobile, on l’affiche dès tablette */

.meta{ margin:0; font-size:.92rem; color:#5a6170 }
.skills{ display:flex; flex-wrap:wrap; gap:8px }
.skills span{
  background:#f7fbff; border:1px solid var(--line); border-radius:999px;
  padding:.28rem .6rem; font-weight:800; font-size:.78rem; color:#2a3a4a
}
.actions{ display:flex; gap:8px; flex-wrap:wrap }
.actions .btn{ flex:1 } /* boutons larges mobile */

/* Pagination */
.pagination{ display:flex; gap:8px; justify-content:center; margin-top:18px; flex-wrap:wrap }
.page{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:40px; padding:0 .8rem; border-radius:12px;
  border:1px solid var(--line); color:#22364a; font-weight:900; background:var(--white);
}
.page.is-active{
  background:linear-gradient(135deg,var(--turq),var(--turq-600));
  border-color:transparent; color:#06376d; box-shadow:0 8px 18px rgba(58,211,212,.25);
}

/* =============== Footer =============== */
.md-footer{ border-top:1px solid var(--line); background:#fff; padding:20px 0; text-align:center }
.f-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px }
.footer-logo{ height:32px }
.footer-links a{ margin:0 8px; color:#06376d; font-weight:800 }
.footer-links a:hover{ color:var(--turq) }

/* ==================== BREAKPOINTS ==================== */

/* ≥ 769px (tablette) */
@media (min-width: 769px){
  .hero-inner{ flex-direction:row; align-items:flex-end; justify-content:space-between }
  .kpis li{ min-width:140px }
  .filters__form{ grid-template-columns:1fr; } /* on reste en pile mais large */
  .f-row{ grid-template-columns:1fr 1fr }
  .cards{ grid-template-columns:repeat(2,1fr) }
  .card__head{ grid-template-columns:56px 1fr auto }
  .quick{ display:flex; gap:8px; flex-wrap:wrap; justify-self:end }
  .actions .btn{ flex:0 0 auto }
}

/* ≥ 1025px (desktop) */
@media (min-width: 1025px){
  .layout{ grid-template-columns:300px 1fr; gap:22px }
  .filters{ position:sticky; top:86px }
  .filters-toggle-btn{ display:none }      /* on cache le bouton accordéon */
  .filters__form{
    max-height:none !important; padding:16px; border:0; grid-template-columns:1fr;
  }
  .cards{ grid-template-columns:repeat(3,1fr) }
}
/* ===== HEADER RESPONSIVE FIX ===== */
.md-header{
  position:sticky; top:0; z-index:1000;
  background:linear-gradient(180deg, rgba(235,255,255,.55), rgba(255,255,255,.92));
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom:1px solid rgba(6,55,109,.10);
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

.md-nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; height:auto; min-height:68px;
  padding:10px 0; flex-wrap:wrap;
}

.md-brand img{
  height:44px; max-width: 180px; width:auto; display:block;
}

/* zone droite (boutons) */
.md-right{ display:flex; align-items:center; gap:10px; }

/* boutons compacts */
.md-right .btn{ padding:.6rem 1rem; border-radius:10px; font-weight:800; }

/* ===== BREAKPOINTS ===== */
/* <= 992px : header respire, logo à gauche, boutons à droite */
@media (max-width: 992px){
  .md-brand img{ height:40px; max-width:165px; }
  .md-right .btn{ padding:.55rem .9rem; }
}

/* <= 768px : header sur 2 lignes, logo centré, actions en dessous en full-width */
@media (max-width: 768px){
  .md-nav{
    justify-content:center;
    row-gap:10px;
    padding:10px 0 12px;
  }
  .md-brand{ width:100%; display:flex; justify-content:center; }
  .md-brand img{ height:38px; max-width:150px; }

  .md-right{
    width:100%; display:grid;
    grid-template-columns: 1fr 1fr; gap:8px;
  }
  .md-right .btn{ width:100%; padding:.62rem 1rem; }
  /* si tu veux n’afficher qu’un bouton en mobile, décommente la ligne suivante : */
  /* .md-right .btn.btn--ghost{ display:none; } */
}

/* très petits écrans */
@media (max-width: 380px){
  .md-right{ grid-template-columns: 1fr; }
}
/* ==== PATCH DESKTOP MEDARIS EMPLOYEURS — GRID & TEXT ==== */

/* 1) Conteneur un peu plus large en desktop */
@media (min-width: 1025px){
  .search-layout .container{ width:min(1240px, 94%); }
}

/* 2) Grille des résultats solide (cartes min 300px) */
.results .cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(300px, 1fr));
  gap:20px;
}
@media (max-width: 1200px){
  .results .cards{ grid-template-columns: repeat(2, minmax(280px, 1fr)); }
}
@media (max-width: 680px){
  .results .cards{ grid-template-columns: 1fr; }
}

/* 3) Empêcher le “texte vertical” (casse par caractère) */
.results .card *,
.results .card h3,
.results .card .role,
.results .card .meta,
.results .card .skills span{
  word-break: keep-all !important;      /* pas de coupure au milieu des mots */
  overflow-wrap: normal !important;     /* évite les retours bizarres */
  white-space: normal !important;
  writing-mode: horizontal-tb !important;
}

/* 4) Tête de carte stable */
.results .card__head{
  display:grid;
  grid-template-columns: 56px 1fr auto;
  align-items:center;
  gap:12px;
}
.results .quick{ justify-self:end; display:flex; gap:8px; flex-wrap:wrap; }

/* 5) Petits réglages de lisibilité */
.results .card h3{ font-size:1.06rem; letter-spacing:.01em; }
.results .meta{ font-size:.95rem; color:#5a6170; }
.results .skills span{ font-size:.82rem; }

/* 6) Filtres & KPI : espacements et tailles cohérentes */
.filters__form input,
.filters__form select{ min-height:46px; }
.kpis{ flex-wrap:wrap; gap:14px; }
.kpis li{ min-width:160px; }

/* 7) Header : empilement propre si l’espace manque */
.md-nav{ flex-wrap:wrap; gap:14px; }
@media (max-width: 900px){
  .md-brand{ width:100%; display:flex; justify-content:center; }
  .md-right{ width:100%; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .md-right .btn{ width:100%; }
}
@media (max-width: 380px){
  .md-right{ grid-template-columns:1fr; }
}/* End custom CSS */