/* Styles specific to each page section, in page order: shared section headings,
   hero, pricing, faq helpers, final CTA, footer. */

/* ===== Section rhythm ===== */
.section-pad{padding:96px 0;}

.section-head{margin-bottom:56px;}
.section-head.center{text-align:center; max-width:780px; margin-left:auto; margin-right:auto;}

.eyebrow-sm{
  display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--fs-xs); font-weight:700; color:var(--blue-strong);
  letter-spacing:0.2px; margin-bottom:var(--space-4); padding:var(--space-2) var(--space-4); border-radius:var(--radius-pill);
}
.eyebrow-sm::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--grad-gold); animation:pulse-gold 3s ease-in-out infinite;}

.section-title{
  font-size:clamp(29px, 3.4vw, 44px); font-weight:700; color:var(--navy); line-height:1.38; margin-bottom:var(--space-4);
}
.section-sub{font-size:var(--fs-lg); color:var(--slate); max-width:660px; line-height:1.9;}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  padding:92px 0 112px;
  background: var(--grad-navy);
  overflow:hidden;
  position:relative;
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(850px 520px at 88% -10%, rgba(16,185,129,0.11), transparent 62%),
    radial-gradient(920px 660px at -8% 36%, rgba(96,165,250,0.22), transparent 60%);
  pointer-events:none;
}
/* Fine technical grid — the "product/technology" layer shared with the final CTA */
.hero::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to left, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(720px 480px at 72% 8%, #000 0%, transparent 74%);
  mask-image:radial-gradient(720px 480px at 72% 8%, #000 0%, transparent 74%);
  pointer-events:none;
}
/* Named areas: the disclaimer lives in its own row under the copy, while the
   product panel spans both rows — copy and mockup read as one composition. */
.hero-grid{
  display:grid; grid-template-columns:1.04fr 0.96fr;
  grid-template-areas:"copy visual" "note visual";
  column-gap:64px; row-gap:var(--space-7); align-items:start;
  position:relative; z-index:2;
}
.hero-copy{grid-area:copy;}
.hero-note{grid-area:note;}
.hero-visual{grid-area:visual; align-self:center;}

/* --- Hero copy --- */
.eyebrow{
  display:inline-flex; align-items:center; gap:var(--space-2); background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.16);
  padding:var(--space-2) var(--space-4); border-radius:var(--radius-pill); font-size:var(--fs-xs); font-weight:500; color:var(--gold-1);
  box-shadow:0 4px 18px -8px rgba(16,185,129,0.25);
}
.eyebrow .ic{width:15px; height:15px;}
.hero h1{
  font-size:clamp(35px, 4.5vw, 58px); line-height:1.3; margin:var(--space-5) 0 var(--space-4); color:#fff;
  max-width:580px;
}
.hero h2.sub{
  font-size:clamp(17px, 1.95vw, 21.5px); font-weight:500; margin-bottom:var(--space-4);
  color:rgba(255,255,255,0.92); line-height:1.75;
}
.hero .desc{
  font-size:var(--fs-base); color:rgba(255,255,255,0.75); max-width:520px; margin-bottom:var(--space-9); line-height:1.95;
}
.hero-ctas{display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;}

/* --- Disclaimer (own row, reassures without competing with the CTA) --- */
.hero-note{
  display:flex; gap:var(--space-2); align-items:flex-start;
  padding:var(--space-3) var(--space-4);
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10); border-radius:var(--radius-sm);
  font-size:var(--fs-xs); line-height:1.8; color:rgba(255,255,255,0.62);
}
.note-ico{color:var(--gold-1); display:flex; margin-top:var(--space-1);}
.note-ico .ic{width:15px; height:15px;}

/* --- Hero visual : real interface capture (assets/wpl.png) --- */
.hero-visual{
  position:relative; z-index:2; min-height:480px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.hero-visual::before{
  content:'';
  position:absolute; inset:-10% -14%;
  background:
    radial-gradient(420px 320px at 68% 24%, rgba(16,185,129,0.10), transparent 66%),
    radial-gradient(500px 360px at 24% 78%, rgba(96,165,250,0.22), transparent 64%);
  filter:blur(8px);
  pointer-events:none;
}

/* --- Hero visual : image principale (capture réelle de l'interface) --- */
.hero-image{
  position:relative; z-index:2; width:100%; max-width:480px; height:auto;
  border-radius:var(--radius-lg);
}

/* ============================================================
   PRICING — countries sub-block container
   ============================================================ */
.pricing-section{position:relative;}

/* ============================================================
   COUNTRIES — grid of 31 country cards (inside the pricing section)
   ============================================================ */
.countries{margin-top:var(--space-10);}
.countries-head{text-align:center; max-width:680px; margin:0 auto var(--space-8);}
.countries-head .section-title{margin-bottom:var(--space-3);}
.countries-head .section-sub{font-size:var(--fs-md); color:var(--slate); margin:0 auto; line-height:1.9;}

.countries-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5);
}

.country-card{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--paper); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-xs);
  position:relative;
  transition:transform .35s var(--ease-entrance), box-shadow .3s ease, border-color .3s ease;
}
.country-card:hover{transform:translateY(-4px); border-color:var(--line-blue); box-shadow:var(--shadow-sm);}

/* Flag zone — sits on top of the card; the flag symbol is centered on a soft gradient */
.country-media{
  height:118px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(150px 150px at 78% 0%, rgba(16,185,129,0.10), transparent 64%),
    radial-gradient(160px 160px at 14% 110%, rgba(96,165,250,0.16), transparent 62%),
    var(--bg2);
}
.country-flag{
  height:84px; width:auto;
  border-radius:5px; overflow:hidden;
  box-shadow:0 8px 20px -10px rgba(10,23,48,0.4), 0 0 0 1px rgba(10,23,48,0.10);
}
.country-card:hover .country-media{filter:brightness(1.02);}

.country-body{
  display:flex; flex-direction:column; flex:1; text-align:center;
  padding:44px var(--space-6) var(--space-6);
}

/* Icon badge — absolutely positioned, straddling the media/body boundary (50/50) */
.country-ico{
  position:absolute; top:90px; left:50%; transform:translateX(-50%);
  width:56px; height:56px; border-radius:16px;
  background:rgb(11 47 91); color:rgb(255 255 255); border:1px solid var(--line-blue);
  display:flex; align-items:center; justify-content:center;
  z-index:1; box-shadow:0 0 0 3px var(--paper);
}
.country-ico .ic{width:26px; height:26px; stroke-width:2;}

/* Title reserves a consistent zone so descriptions start level across cards */
.country-card h3{font-size:var(--fs-md); font-weight:700; color:var(--navy); line-height:1.5; min-height:2.5em; margin-bottom:var(--space-3);}
.country-card p{font-size:var(--fs-sm); color:var(--slate); line-height:1.9; margin-bottom:var(--space-5);}

.country-card .country-cta{margin-top:auto; width:100%;}

/* ===== Countries pagination ===== */
.countries-pager{
  display:flex; align-items:center; justify-content:center; gap:var(--space-3);
  margin-top:var(--space-8);
}
.countries-pager-btn{
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg2); border:1px solid var(--border); color:var(--navy);
  cursor:pointer; transition:background .25s ease, border-color .25s ease, transform .22s var(--ease-interact), opacity .2s ease;
}
.countries-pager-btn:hover:not(:disabled){
  background:var(--paper); border-color:var(--line-blue);
}
.countries-pager-btn:active:not(:disabled){
  transform:scale(0.94);
}
.countries-pager-btn:disabled{
  opacity:0.4; cursor:default;
}
.countries-pager-btn .ic{width:18px; height:18px;}
.countries-pager-nums{
  display:flex; align-items:center; gap:var(--space-2);
}
.countries-pager-num{
  min-width:40px; height:40px; padding:0 var(--space-2);
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background:var(--bg2); border:1px solid var(--border); color:var(--slate);
  font-size:var(--fs-sm); font-weight:600; cursor:pointer;
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.countries-pager-num:hover{
  background:var(--paper); border-color:var(--line-blue); color:var(--navy);
}
.countries-pager-num.active{
  background:var(--grad-gold); border-color:transparent; color:#fff;
}

/* ============================================================
   CANDIDATURE SPONTANÉE
   ============================================================ */
.spontanee-section{
  background:var(--paper);
  border-block:1px solid var(--border);
}
.spontanee-grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  gap:56px; align-items:center;
}

/* ---- Left: Europe visual ---- */
.spontanee-visual{position:relative;}
.spontanee-map-wrap{
  position:relative; aspect-ratio:1/1; max-width:520px; width:100%;
  margin:0 auto;
}
.spontanee-map{
  width:100%; height:100%; display:block; overflow:visible;
  filter:drop-shadow(0 24px 48px rgba(16,185,129,0.10));
}
.sp-eu-shape{
  fill:rgba(16,185,129,0.045); stroke:var(--gold-3); stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:2 3; transition:fill .4s ease, stroke .4s ease;
}
.sp-conns .sp-path{
  fill:none; stroke:var(--gold-2); stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray:7 5; opacity:0.55;
  animation:sp-dash 6s linear infinite;
}
.sp-hub-glow{fill:rgba(16,185,129,0.20); animation:sp-pulse 3.2s ease-in-out infinite;}
.sp-hub-dot{fill:var(--gold-2);}
.sp-travel{fill:var(--blue-light);}

.sp-travel-1{animation:sp-travel1 5s linear infinite;}
.sp-travel-2{animation:sp-travel2 6.5s linear infinite;}
.sp-travel-3{animation:sp-travel3 8s linear infinite;}

/* ---- Floating country cards ---- */
.spontanee-cards{position:absolute; inset:0; max-width:520px; margin:0 auto;}
.sp-country-card{
  position:absolute; display:flex; align-items:center; gap:10px;
  padding:10px 14px; background:var(--paper); border:1px solid var(--border);
  border-radius:var(--radius-sm); box-shadow:var(--shadow);
  font-size:var(--fs-sm); font-weight:600; color:var(--navy); white-space:nowrap;
  animation:sp-float 6s ease-in-out infinite;
}
.sp-country-card .sp-cflag{width:22px; height:auto; flex-shrink:0; border-radius:3px; overflow:hidden; display:flex;}
.sp-country-card .sp-cflag svg{width:100%; height:auto; display:block;}
.sp-country-card .sp-cbody{display:flex; flex-direction:column; line-height:1.3;}
.sp-country-card .sp-cname{font-size:var(--fs-sm); font-weight:700;}
.sp-country-card .sp-cstatus{
  display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-xs);
  font-weight:600; color:var(--green-deep);
}
.sp-country-card .sp-cstatus::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--gold-2);
}
.sp-country-card .sp-csector{font-size:11.5px; color:var(--slate); font-weight:500;}

.sp-country-card[data-pos="0"]{top:6%; left:8%;}
.sp-country-card[data-pos="1"]{top:13%; right:6%;}
.sp-country-card[data-pos="2"]{top:44%; left:2%;}
.sp-country-card[data-pos="3"]{top:52%; left:40%;}
.sp-country-card[data-pos="4"]{top:30%; right:22%;}
.sp-country-card[data-pos="5"]{top:70%; right:4%;}
.sp-country-card[data-pos="6"]{bottom:6%; left:28%;}
.sp-country-card[data-pos="7"]{top:62%; left:4%;}

/* ---- Right: content / CTA ---- */
.spontanee-content{max-width:520px;}
.spontanee-badge{
  display:inline-flex; align-items:center; gap:var(--space-2);
  margin-bottom:var(--space-4); padding:var(--space-2) var(--space-4);
  border:1px solid var(--line-green); border-radius:var(--radius-pill);
  background:var(--wash-green); color:var(--blue-strong); font-size:var(--fs-xs); font-weight:700;
}
.spontanee-badge .ic{width:15px; height:15px; color:var(--gold-2);}
.spontanee-title{
  font-size:clamp(28px, 3.2vw, 42px); font-weight:700; color:var(--navy);
  line-height:1.38; margin-bottom:var(--space-4);
}
.spontanee-title .text-gradient-gold{display:inline-block;}
.spontanee-sub{font-size:var(--fs-lg); color:var(--slate); line-height:1.9; margin-bottom:var(--space-7);}

.spontanee-features{
  list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3) var(--space-5);
  margin-bottom:var(--space-8);
}
.spontanee-features li{
  display:flex; align-items:center; gap:var(--space-3);
  font-size:var(--fs-base); font-weight:600; color:var(--navy);
}
.sp-fi{
  width:40px; height:40px; border-radius:var(--radius-sm); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.sp-fi .ic{width:19px; height:19px;}
.sp-fi--pin{background:var(--tint-gold); color:var(--gold-3);}
.sp-fi--brief{background:var(--wash-blue-2); color:var(--blue);}
.sp-fi--spark{background:var(--tint-gold); color:var(--gold-3);}
.sp-fi--clock{background:var(--wash-blue-2); color:var(--blue);}

.spontanee-cta{margin-top:var(--space-2);}

/* ---- Animations ---- */
@keyframes sp-float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-9px);}
}
@keyframes sp-pulse{
  0%,100%{opacity:1; transform:scale(1);}
  50%{opacity:0.6; transform:scale(1.35);}
}
@keyframes sp-dash{
  to{stroke-dashoffset:-60;}
}
@keyframes sp-travel1{
  0%{transform:translate(175px,190px); opacity:0;}
  10%{opacity:1;}
  90%{opacity:1;}
  100%{transform:translate(215px,150px); opacity:0;}
}
@keyframes sp-travel2{
  0%{transform:translate(110px,220px); opacity:0;}
  12%{opacity:1;}
  88%{opacity:1;}
  100%{transform:translate(175px,190px); opacity:0;}
}
@keyframes sp-travel3{
  0%{transform:translate(145px,116px); opacity:0;}
  15%{opacity:1;}
  85%{opacity:1;}
  100%{transform:translate(215px,150px); opacity:0;}
}

/* ============================================================
   FINAL CTA
   ============================================================ */
/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--ink); color:rgba(255,255,255,0.75); padding:68px 0 30px;}
.footer-top{
  display:grid; grid-template-columns:1fr 1.2fr auto; gap:48px; align-items:start;
  padding-bottom:46px; border-bottom:1px solid rgba(255,255,255,0.08);
}
.footer-brand .logo-img{height:54px; width:auto; display:block;}
.footer-brand p{margin-top:var(--space-4); font-size:var(--fs-sm); color:rgba(255,255,255,0.58); max-width:300px; line-height:1.9;}
.footer-cta{ /* no card frame — content sits directly in the footer */ }
.footer-cta h4{font-size:20px; font-weight:700; color:#fff; margin-bottom:var(--space-3); line-height:1.5;}
.footer-cta p{font-size:var(--fs-sm); color:rgba(255,255,255,0.66); line-height:1.9; margin-bottom:var(--space-5);}
.footer-cta .btn{width:100%;}
.footer-links{display:flex; gap:72px; flex-wrap:wrap;}
.footer-col h5{font-size:var(--fs-xs); font-weight:700; color:#fff; margin-bottom:var(--space-4); letter-spacing:0.3px;}
.footer-col li{margin-bottom:var(--space-3); font-size:var(--fs-sm);}
.footer-col a{transition:color .2s ease; display:inline-flex; align-items:center; gap:var(--space-2);}
.footer-col a:hover{color:var(--gold-1);}
.footer-col a .ic{width:15px; height:15px; opacity:0.85;}
.footer-disclaimer{
  font-size:var(--fs-xs); color:rgba(255,255,255,0.52); line-height:2;
  max-width:880px; margin:34px auto 0; text-align:center;
}
.footer-bottom{
  display:flex; justify-content:center; align-items:center; gap:var(--space-3); margin-top:var(--space-7); padding-top:var(--space-6);
  border-top:1px solid rgba(255,255,255,0.08); font-size:var(--fs-xs); color:rgba(255,255,255,0.5);
}
.footer-sep{opacity:0.35;}
.footer-legal-link{
  color:rgba(255,255,255,0.6); transition:color .2s ease;
}
.footer-legal-link:hover{color:var(--gold-1);}