/* ══════════════════════════════════════════════════
   PREMIUM PASS — Services bento, pages, zones vides
   ══════════════════════════════════════════════════ */

/* ── Section padding réduit (moins de zones vides) ── */
.section{
  padding-top:4.2rem !important;
  padding-bottom:4.2rem !important;
}
.premium-path{
  padding-top:3.6rem !important;
}
.page-hero{
  padding:7rem 1.5rem 2.6rem !important;
}

/* ── Services bento grid ── */
.svc-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:.5rem;
}
.svc-head-sub{
  max-width:360px;
  text-align:right;
  flex-shrink:0;
}
.svc-bento{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:1fr;
  gap:1rem;
  margin-top:1.8rem;
}
/* Cards in bento: flex column, hauteur uniforme */
.svc-bento .svc-card{
  padding:1.55rem;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  height:100%;
}
/* Strip the inner white panel — content sits directly in the card */
.svc-bento .svc-content-panel{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  margin-top:.75rem;
  flex:1;
  display:flex;
  flex-direction:column;
}
/* Icon sizing */
.svc-bento .icon-box{
  width:52px;
  height:52px;
  border-radius:14px;
  flex-shrink:0;
}
/* Tags: inline (pas full-width) */
.svc-bento .tag{
  display:inline-flex !important;
  width:auto !important;
  align-self:flex-start;
}
/* Bottom action link visible by default */
.svc-action{
  display:flex !important;
  align-items:center;
  gap:.4rem;
  margin-top:auto;
  padding-top:.9rem;
  border-top:1px solid rgba(15,28,17,.09) !important;
  font-size:.77rem !important;
  font-weight:700 !important;
  color:#006B3A !important;
  cursor:pointer;
  transition:gap .2s;
}
.svc-action svg{
  flex-shrink:0;
  transition:transform .2s;
}
.svc-bento .svc-card:hover .svc-action svg{
  transform:translateX(4px);
}
.svc-card.dark .svc-action{
  color:rgba(200,255,225,.82) !important;
  border-top-color:rgba(255,255,255,.12) !important;
}
.svc-action-y{color:#7A5A00 !important}
.svc-action-r{color:#A51B22 !important}
/* Colored sweep line on hover */
.svc-bento .svc-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  border-radius:24px 24px 0 0;
  background:#006B3A;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .38s cubic-bezier(.4,0,.2,1);
  z-index:3;
}
.svc-bento .svc-card:hover::before{
  transform:scaleX(1);
}
.svc-bento .svc-card.svc-y::before{background:#D6AA00}
.svc-bento .svc-card.svc-r::before{background:#CC2128}
.svc-bento .svc-card.dark::before{background:rgba(168,240,198,.6)}
/* Responsive bento */
@media(max-width:1100px){
  .svc-bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}
  .svc-head-sub{text-align:left;max-width:100%}
  .svc-head{flex-direction:column;align-items:flex-start;gap:.75rem}
}
@media(max-width:640px){
  .svc-bento{grid-template-columns:1fr;grid-auto-rows:auto}
}

/* ── Page hero quick-badges ── */
.phero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin-top:1.3rem;
}
.phero-tag{
  display:inline-flex;
  align-items:center;
  height:30px;
  padding:0 .85rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.09);
  color:rgba(255,255,255,.88) !important;
  font-size:.69rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
  white-space:nowrap;
}
.phero-tag-g{border-color:rgba(168,240,198,.3);background:rgba(0,107,58,.18);color:rgba(168,240,198,.92) !important}
.phero-tag-y{border-color:rgba(253,224,80,.3);background:rgba(214,170,0,.18);color:rgba(253,224,80,.92) !important}
.phero-tag-r{border-color:rgba(255,150,155,.3);background:rgba(204,33,40,.18);color:rgba(255,150,155,.92) !important}

/* ── Villes section header ── */
.villes-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.5rem;
  margin-bottom:1.8rem;
  flex-wrap:wrap;
}
.villes-head .btn{
  flex-shrink:0;
}

/* ── Témoignages section ── */
.temo-section{
  background:#FFFFFF !important;
  border-top:1px solid rgba(15,28,17,.07);
  border-bottom:1px solid rgba(15,28,17,.07);
}
.temo-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.5rem;
  margin-bottom:2.2rem;
  flex-wrap:wrap;
}
.temo-head .btn{
  flex-shrink:0;
}
.temo-card{
  background:#FFFFFF !important;
  border:1px solid rgba(15,28,17,.09) !important;
  box-shadow:0 16px 40px rgba(15,28,17,.06) !important;
  border-radius:24px !important;
}
.temo-q{
  font-family:var(--fd) !important;
  font-size:1.05rem !important;
  color:var(--ink) !important;
  font-style:italic;
  line-height:1.65;
}
.temo-name{color:var(--ink) !important}
.temo-role{color:var(--ink5) !important}
.temo-stars svg{fill:#D6AA00 !important}
.temo-av{box-shadow:0 6px 16px rgba(0,0,0,.12)}

/* Section title inline with text-muted description (Parcours) */
.path-head{
  margin-bottom:1.6rem !important;
}

/* Readability guard for new elements */
.page > .section :where(.svc-action){
  color:#006B3A !important;
}
.page > .section :where(.svc-card.dark .svc-action){
  color:rgba(200,255,225,.82) !important;
}
.page > .section :where(.svc-action-y){color:#7A5A00 !important}
.page > .section :where(.svc-action-r){color:#A51B22 !important}
.page > .section :where(.phero-tag){
  color:rgba(255,255,255,.88) !important;
}
.page > .section :where(.temo-q){
  color:var(--ink) !important;
}
.page > .section :where(.temo-name){
  color:var(--ink) !important;
}
@media(max-width:768px){
  .temo-head{flex-direction:column;align-items:flex-start}
  .villes-head{flex-direction:column;align-items:flex-start}
  .phero-tags{gap:.42rem}
  .phero-tag{font-size:.65rem;height:27px;padding:0 .7rem}
  .section{padding-top:3.2rem !important;padding-bottom:3.2rem !important}
  .page-hero{padding:7.5rem 1.15rem 2.8rem !important}
}

/* ══════════════════════════════════════════════════
   PREMIUM PASS v2 — améliorations qualité globale
   ══════════════════════════════════════════════════ */

/* ── Stats band light-theme reset ── */
.stats-band{
  background:linear-gradient(90deg,#006B3A,#008A4A 50%,#006B3A) !important;
  padding:1.6rem 1.5rem !important;
}
.stats-band-inner{
  max-width:1320px;
  margin:0 auto;
}
.sb-num{
  font-weight:900 !important;
  letter-spacing:-.04em !important;
  color:#fff !important;
}
.sb-lbl{
  color:rgba(255,255,255,.68) !important;
  font-size:.72rem !important;
  letter-spacing:.06em !important;
  font-weight:600 !important;
}

/* ── Testimonials: decorative quote mark + colored avatars ── */
.temo-card{
  position:relative;
  overflow:hidden;
}
.temo-deco-quote{
  width:36px;
  height:27px;
  color:rgba(0,107,58,.11);
  margin-bottom:1rem;
  flex-shrink:0;
}
.temo-q{
  font-style:italic;
  line-height:1.7 !important;
}
.temo-av-g{background:linear-gradient(135deg,#006B3A,#009148) !important}
.temo-av-y{background:linear-gradient(135deg,#C97B0A,#E8A01A) !important}
.temo-av-r{background:linear-gradient(135deg,#8B1A1A,#B42828) !important}
.temo-av{
  font-family:var(--fd);
  font-size:.9rem !important;
  font-weight:700 !important;
  letter-spacing:.02em;
}
.temo-stars svg{
  fill:#D6AA00 !important;
}

/* ── City contacts on contact page ── */
.city-contacts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.5rem;
}
.city-chip{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.82rem .9rem;
  background:linear-gradient(135deg,rgba(0,107,58,.04),rgba(0,107,58,.02));
  border:1px solid rgba(0,107,58,.12);
  border-radius:var(--r12);
  transition:all .18s ease;
}
.city-chip:hover{
  background:linear-gradient(135deg,rgba(0,107,58,.08),rgba(0,107,58,.04));
  border-color:rgba(0,107,58,.24);
  transform:translateY(-2px);
}
.city-chip.city-chip-main{
  border-color:rgba(0,107,58,.24);
  background:linear-gradient(135deg,rgba(0,107,58,.07),rgba(0,107,58,.03));
}
.city-chip-icon{
  width:30px;
  height:30px;
  border-radius:var(--r8);
  background:rgba(0,107,58,.09);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--g);
  flex-shrink:0;
}
.city-chip span{
  display:block;
  font-size:.84rem;
  font-weight:700;
  color:var(--ink);
}
.city-chip small{
  display:block;
  font-size:.7rem;
  color:var(--ink5);
  margin-top:.1rem;
}

/* ── Mobile menu CTA style ── */
.mobile-link-cta{
  background:var(--g) !important;
  color:#fff !important;
  font-weight:800 !important;
  border-radius:var(--r12) !important;
  border-bottom:none !important;
  text-align:center !important;
  margin-top:.5rem;
}
.mobile-link-cta:hover{
  background:var(--gd) !important;
  color:#fff !important;
}

/* ── Service bento: ensure min cell height ── */
.svc-bento{
  grid-auto-rows:minmax(210px,1fr) !important;
}

/* ── Parcours step numbers: green for light theme ── */
.path-card span{
  background:var(--g) !important;
  color:#fff !important;
  font-family:var(--fb) !important;
  font-size:.72rem !important;
  font-weight:900 !important;
}
.path-card h3{
  color:var(--ink) !important;
}
.path-card p{
  color:var(--ink5) !important;
}

/* ── Section spacing tightening ── */
.svc-head h2.h2{
  margin-top:.2rem;
}

/* ── Temo section border accent ── */
.temo-section{
  border-top:3px solid rgba(0,107,58,.09) !important;
  border-bottom:3px solid rgba(0,107,58,.09) !important;
}
.temo-card{
  background:linear-gradient(180deg,#FFFFFF,#FAFAF8) !important;
  border:1px solid rgba(0,107,58,.1) !important;
  box-shadow:0 18px 48px rgba(0,107,58,.06),0 6px 16px rgba(0,107,58,.03) !important;
  border-radius:24px !important;
  padding:1.8rem !important;
}
.temo-card:hover{
  box-shadow:0 24px 60px rgba(0,107,58,.10),0 8px 24px rgba(0,107,58,.05) !important;
  transform:translateY(-5px);
  transition:all .3s cubic-bezier(.4,0,.2,1);
}
.temo-q{
  color:var(--ink) !important;
  font-size:1rem !important;
}
.temo-name{color:var(--ink) !important}
.temo-role{color:var(--ink5) !important}

/* ── Card hover on service bento ── */
.svc-bento .svc-card:hover{
  transform:translateY(-6px) scale(1.015);
  box-shadow:0 28px 60px rgba(0,107,58,.12),0 8px 24px rgba(0,107,58,.06) !important;
  border-color:rgba(0,107,58,.22) !important;
}
.svc-bento .svc-card.dark:hover{
  box-shadow:0 28px 60px rgba(0,0,0,.22) !important;
  border-color:rgba(255,255,255,.14) !important;
}

/* ══════════════════════════════════════════════════
   BENTO MOSAIC — 3 services phares (1-3) + 5 blancs
   Ordre : Ziarra · Commerce · Emploi · puis les 5 blancs
   ══════════════════════════════════════════════════ */

/* ── Ziarra à Fès (1) : forêt profonde — ton chaud ── */
.svc-bento > .svc-card:nth-child(1){
  background:linear-gradient(150deg,#1A3628 0%,#22452E 55%,#2A5438 100%) !important;
  border-color:rgba(85,200,130,.18) !important;
}

/* ── Commerce Maroc-Sénégal (2) : cognac boisé ── */
.svc-bento > .svc-card:nth-child(2){
  background:linear-gradient(150deg,#3D1800 0%,#522200 55%,#662C00 100%) !important;
  border-color:rgba(255,165,60,.18) !important;
}

/* ── Emploi & Business (3) : ardoise bleue ── */
.svc-bento > .svc-card:nth-child(3){
  background:linear-gradient(150deg,#182038 0%,#1E2D4E 55%,#253A62 100%) !important;
  border-color:rgba(100,145,230,.18) !important;
}

/* ── Cartes claires (4-8) : blanc net ── */
.svc-bento > .svc-card:nth-child(4),
.svc-bento > .svc-card:nth-child(5),
.svc-bento > .svc-card:nth-child(6),
.svc-bento > .svc-card:nth-child(7),
.svc-bento > .svc-card:nth-child(8){
  background:#FFFFFF !important;
  border-color:rgba(0,107,58,.1) !important;
}

/* ── Textes cartes sombres (1, 2, 3) ── */
.svc-bento > .svc-card:nth-child(1) .svc-title,
.svc-bento > .svc-card:nth-child(2) .svc-title,
.svc-bento > .svc-card:nth-child(3) .svc-title{color:#fff !important}
.svc-bento > .svc-card:nth-child(1) .svc-desc,
.svc-bento > .svc-card:nth-child(2) .svc-desc,
.svc-bento > .svc-card:nth-child(3) .svc-desc{color:rgba(255,255,255,.68) !important}
.svc-bento > .svc-card:nth-child(1) .svc-content-panel,
.svc-bento > .svc-card:nth-child(2) .svc-content-panel,
.svc-bento > .svc-card:nth-child(3) .svc-content-panel{background:transparent !important}

/* ── Actions cartes sombres ── */
.svc-bento > .svc-card:nth-child(1) [class*="svc-action"],
.svc-bento > .svc-card:nth-child(2) [class*="svc-action"],
.svc-bento > .svc-card:nth-child(3) [class*="svc-action"]{
  color:rgba(255,255,255,.6) !important;
}

/* ── Tags cartes sombres ── */
.svc-bento > .svc-card:nth-child(1) .tag,
.svc-bento > .svc-card:nth-child(2) .tag,
.svc-bento > .svc-card:nth-child(3) .tag{
  background:rgba(255,255,255,.12) !important;
  color:rgba(255,255,255,.82) !important;
  border-color:rgba(255,255,255,.2) !important;
}

/* ── Textes cartes claires (4-8) ── */
.svc-bento > .svc-card:nth-child(n+4) .svc-title{color:var(--ink) !important}
.svc-bento > .svc-card:nth-child(n+4) .svc-desc{color:var(--ink5) !important}

/* ── Icon boxes harmonisés ── */
.svc-bento > .svc-card:nth-child(1) .icon-box,
.svc-bento > .svc-card:nth-child(2) .icon-box,
.svc-bento > .svc-card:nth-child(3) .icon-box{
  background:rgba(255,255,255,.14) !important;
  color:#fff !important;
}
.svc-bento > .svc-card:nth-child(4) .icon-box,
.svc-bento > .svc-card:nth-child(7) .icon-box{
  background:rgba(0,107,58,.1);color:#005B32;
}
.svc-bento > .svc-card:nth-child(5) .icon-box,
.svc-bento > .svc-card:nth-child(8) .icon-box{
  background:rgba(0,107,58,.1);color:#005B32;
}
.svc-bento > .svc-card:nth-child(6) .icon-box,
.svc-bento > .svc-card:nth-child(8) .icon-box{
  background:rgba(214,170,0,.13);color:#7A5A00;
}

/* ── Hovers cartes sombres ── */
.svc-bento > .svc-card:nth-child(1):hover{
  box-shadow:0 28px 60px rgba(26,54,40,.38),0 8px 24px rgba(26,54,40,.18) !important;
  border-color:rgba(85,200,130,.3) !important;
}
.svc-bento > .svc-card:nth-child(2):hover{
  box-shadow:0 28px 60px rgba(61,24,0,.38),0 8px 24px rgba(61,24,0,.18) !important;
  border-color:rgba(255,165,60,.3) !important;
}
.svc-bento > .svc-card:nth-child(3):hover{
  box-shadow:0 28px 60px rgba(24,32,56,.38),0 8px 24px rgba(24,32,56,.18) !important;
  border-color:rgba(100,145,230,.3) !important;
}

@media(max-width:768px){
  .city-contacts{grid-template-columns:1fr}
  .stats-band{padding:1.2rem 1rem !important}
  /* Formulaires : une colonne sur mobile */
  .grid2{grid-template-columns:1fr !important}
}

/* ══════════════════════════════════════════════════
   HERO VISUEL — overlay renforcé sur petits écrans
   Empêche le texte de se lire sur fond d'image clair
   ══════════════════════════════════════════════════ */
@media(max-width:640px){
  .visual-page-hero{
    background:
      linear-gradient(160deg,rgba(1,9,6,.95) 0%,rgba(1,9,6,.90) 45%,rgba(1,9,6,.75) 100%),
      var(--page-hero-img) center/cover no-repeat !important;
  }
}