/* ============================================================
   Euro-Gulf Bridge Consulting — premium static site
   ============================================================ */

:root{
  --navy-900:#060f24;
  --navy-800:#0a1735;
  --navy-700:#0e1f45;
  --navy-600:#13284f;
  --navy-500:#1b3a73;

  --gold-300:#f3dca0;
  --gold-400:#e3c474;
  --gold-500:#d4af5a;
  --gold-600:#bd9743;
  --gold-grad:linear-gradient(120deg,#f6e2a8 0%,#d4af5a 52%,#b88a37 100%);

  --paper:#fbf9f4;
  --cream:#f5f0e6;
  --white:#ffffff;
  --ink:#0f1a30;
  --muted:#5e6a82;
  --line:#ebe5d8;

  --radius:20px;
  --radius-sm:12px;
  --shadow-sm:0 8px 24px rgba(9,21,48,.06);
  --shadow:0 24px 60px rgba(9,21,48,.12);
  --shadow-lg:0 40px 90px rgba(9,21,48,.20);

  --maxw:1280px;
  --serif:"Fraunces", Georgia, serif;
  --sans:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease:cubic-bezier(.22,.7,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--sans); color:var(--ink);
  background:var(--paper); font-size:16px; line-height:1.7; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  text-rendering:optimizeLegibility; font-optical-sizing:auto;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--serif); font-weight:600; color:var(--ink); line-height:1.12; letter-spacing:-.015em; text-wrap:balance; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }

.grad{
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

::selection{ background:var(--gold-500); color:var(--navy-900); }
::-moz-selection{ background:var(--gold-500); color:var(--navy-900); }

/* ---------- Reveal on scroll ---------- */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* ---------- Buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-weight:600; font-size:.95rem; letter-spacing:.01em;
  padding:14px 26px; border-radius:999px; cursor:pointer; overflow:hidden; white-space:nowrap;
  border:1.5px solid transparent; transition:transform .2s var(--ease), box-shadow .25s, background .25s, color .25s, border-color .25s;
}
.btn:hover{ transform:translateY(-2px); }
.btn-lg{ padding:16px 32px; font-size:1rem; }
.btn-gold{ background:var(--gold-grad); color:var(--navy-900); box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 14px 34px rgba(212,175,90,.36); }
.btn-gold:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 18px 46px rgba(212,175,90,.5); }
.btn-outline{ background:transparent; color:var(--navy-700); border-color:var(--gold-500); }
.btn-outline:hover{ background:var(--gold-500); color:var(--navy-900); border-color:var(--gold-500); }
.btn-ghost{ background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.28); backdrop-filter:blur(6px); }
.btn-ghost:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5); }
/* shine sweep */
.shine::after{
  content:""; position:absolute; top:0; left:-130%; width:60%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg); transition:left .7s var(--ease);
}
.shine:hover::after{ left:140%; }

/* WhatsApp glyph */
.wa-ico{
  width:22px; height:22px; flex:0 0 22px; display:inline-block;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%2325D366' d='M16 3C9 3 3.5 8.5 3.5 15.5c0 2.4.7 4.6 1.9 6.6L3 29l7.1-2.3c1.9 1 4 1.6 6.3 1.6 7 0 12.5-5.5 12.5-12.5S23 3 16 3Z'/%3E%3Cpath fill='%23fff' d='M21.8 18c-.3-.2-1.9-.9-2.1-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-1 1.2-.2.2-.4.2-.7.1-.3-.2-1.4-.5-2.6-1.6-1-.9-1.6-1.9-1.8-2.3-.2-.3 0-.5.1-.7l.5-.6c.2-.2.2-.3.3-.6.1-.2 0-.4 0-.6l-1-2.4c-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.6.1-.9.4-.3.3-1.2 1.1-1.2 2.8s1.2 3.3 1.4 3.5c.2.2 2.4 3.7 5.9 5.1 2.9 1.2 3.5 1 4.1.9.6-.1 1.9-.8 2.2-1.5.3-.8.3-1.4.2-1.5Z'/%3E%3C/svg%3E");
  background-size:contain; background-repeat:no-repeat; background-position:center;
}
.wa-ico.sm{ width:17px; height:17px; flex-basis:17px; }

/* ============ HEADER ============ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  transition:background .35s, box-shadow .35s, backdrop-filter .35s;
  background:transparent;
}
.site-header.scrolled{
  background:rgba(8,18,42,.82); backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 10px 30px rgba(4,10,26,.35); border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{ display:flex; align-items:center; gap:24px; height:84px; }
.site-header.scrolled .header-inner{ height:72px; }
.header-inner{ transition:height .35s var(--ease); }
.brand{ display:flex; align-items:center; gap:12px; color:#fff; }
.brand-mark{ color:var(--gold-500); display:flex; filter:drop-shadow(0 2px 6px rgba(212,175,90,.4)); }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{ font-family:var(--serif); font-weight:700; font-size:1.18rem; letter-spacing:.1px; }
.brand-sub{ font-family:var(--sans); font-weight:600; font-size:.66rem; letter-spacing:3.5px; text-transform:uppercase; color:var(--gold-400); margin-top:4px; }

.main-nav{ display:flex; align-items:center; gap:32px; margin-left:auto; }
.nav-link{ color:rgba(255,255,255,.8); font-size:.92rem; font-weight:500; padding:6px 0; position:relative; white-space:nowrap; transition:color .2s; }
.nav-link:hover{ color:#fff; }
.nav-link.active{ color:var(--gold-400); }
.nav-link::after{ content:""; position:absolute; left:0; right:100%; bottom:-3px; height:2px; background:var(--gold-grad); border-radius:2px; transition:right .3s var(--ease); }
.nav-link.active::after, .nav-link:hover::after{ right:0; }

.header-cta{ margin-left:6px; padding:11px 22px; font-size:.86rem; }

.nav-toggle{ display:none; background:none; border:0; cursor:pointer; flex-direction:column; gap:5px; padding:8px; margin-left:auto; }
.nav-toggle span{ width:25px; height:2px; background:#fff; border-radius:2px; transition:.25s; }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============ HERO ============ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  color:#fff; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(130% 100% at 78% 8%, rgba(212,175,90,.20), transparent 50%),
    radial-gradient(120% 120% at 8% 100%, rgba(27,58,115,.55), transparent 55%),
    linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 42%, var(--navy-700) 100%);
}
.hero-canvas{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; opacity:.6; }
.hero-glow{
  position:absolute; z-index:-1; width:60vw; height:60vw; right:-12vw; top:-16vw; border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,90,.22), transparent 62%); filter:blur(20px); pointer-events:none;
}
.hero-grain{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-content{ padding:130px 28px 110px; max-width:var(--maxw); display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center; }
.hero-copy{ min-width:0; }
.pill{
  display:inline-flex; align-items:center; gap:9px; font-size:.8rem; font-weight:600; letter-spacing:.04em;
  color:rgba(255,255,255,.9); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  padding:8px 16px; border-radius:999px; backdrop-filter:blur(8px); margin-bottom:30px;
}
.pill-dot{ width:8px; height:8px; border-radius:50%; background:var(--gold-400); box-shadow:0 0 0 0 rgba(227,196,116,.6); animation:ping 2.4s infinite; }
@keyframes ping{ 0%{ box-shadow:0 0 0 0 rgba(227,196,116,.6);} 70%{ box-shadow:0 0 0 9px rgba(227,196,116,0);} 100%{ box-shadow:0 0 0 0 rgba(227,196,116,0);} }
.hero-title{ color:#fff; font-size:clamp(2.4rem, 4.5vw, 4.05rem); font-weight:600; max-width:15ch; line-height:1.04; letter-spacing:-.028em; }
.hero-sub{ max-width:50ch; margin:26px 0 38px; color:rgba(255,255,255,.84); font-weight:400; font-size:clamp(1rem,1.4vw,1.12rem); }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:34px; }
.hero-chips{ display:flex; gap:12px; flex-wrap:wrap; }
.chip{
  display:inline-flex; align-items:center; gap:9px; font-size:.86rem; font-weight:500; color:rgba(255,255,255,.86);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); padding:9px 16px; border-radius:999px; backdrop-filter:blur(6px);
}
.chip-ico{ font-size:.95rem; }

/* hero visual / framed photo */
.hero-visual{ position:relative; }
.hero-visual::before{
  content:""; position:absolute; inset:-8% -6% -12% 4%; z-index:-1; border-radius:30px;
  background:radial-gradient(60% 60% at 70% 20%, rgba(212,175,90,.35), transparent 60%);
  filter:blur(28px);
}
.hero-frame{
  position:relative; border-radius:24px; overflow:hidden;
  border:1px solid rgba(212,175,90,.45);
  box-shadow:0 40px 90px rgba(2,8,22,.6), inset 0 0 0 1px rgba(255,255,255,.06);
  aspect-ratio:16/11; background:var(--navy-800);
  transition:transform .5s var(--ease), box-shadow .5s;
}
.hero-frame:hover{ transform:translateY(-6px); box-shadow:0 50px 110px rgba(2,8,22,.7); }
.hero-frame img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(6,15,36,.55) 100%),
             linear-gradient(100deg, rgba(6,15,36,.25), transparent 45%);
}
.frame-badge{
  position:absolute; left:18px; bottom:18px; z-index:2; display:inline-flex; align-items:center; gap:9px;
  font-size:.82rem; font-weight:600; color:#fff; padding:9px 15px; border-radius:999px;
  background:rgba(10,23,53,.55); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(10px);
}
.fb-ico{ font-size:1rem; }
.hero-float{
  position:absolute; right:-14px; bottom:-26px; z-index:3; display:flex; align-items:center; gap:13px;
  background:rgba(255,255,255,.96); color:var(--navy-900); padding:14px 18px; border-radius:16px;
  box-shadow:0 24px 50px rgba(2,8,22,.45); max-width:270px;
}
.hf-ring{ width:44px; height:44px; flex:0 0 44px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,var(--navy-700),var(--navy-900)); color:var(--gold-400); box-shadow:inset 0 0 0 1px rgba(212,175,90,.18); }
.hf-ring svg{ width:22px; height:22px; }
.hf-title{ margin:0; font-weight:700; font-size:.92rem; }
.hf-sub{ margin:2px 0 0; font-size:.78rem; color:var(--muted); }

.scroll-cue{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); width:26px; height:42px; border:2px solid rgba(255,255,255,.4); border-radius:14px; display:flex; justify-content:center; padding-top:7px; }
.scroll-cue span{ width:4px; height:8px; border-radius:2px; background:var(--gold-400); animation:scroll 1.8s var(--ease) infinite; }
@keyframes scroll{ 0%{ transform:translateY(0); opacity:1;} 70%{ transform:translateY(14px); opacity:0;} 100%{ opacity:0;} }

/* ============ STATS ============ */
.stats{ background:var(--navy-900); color:#fff; position:relative; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:46px 28px; }
.stat{ text-align:center; position:relative; }
.stat:not(:last-child)::after{ content:""; position:absolute; right:-10px; top:14%; bottom:14%; width:1px; background:rgba(255,255,255,.12); }
.stat-num{ font-family:var(--serif); font-size:clamp(2rem,4vw,2.9rem); font-weight:700; margin:0; line-height:1;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat-suffix{ -webkit-text-fill-color:transparent; }
.stat-num--text{ font-size:clamp(1.05rem,2.2vw,1.4rem); line-height:1.25; }
.stat-label{ margin:10px 0 0; font-size:.82rem; color:rgba(255,255,255,.62); font-weight:500; line-height:1.4; }

/* ============ SECTIONS ============ */
.section{ padding:104px 0; position:relative; }
.section-eyebrow{ display:flex; align-items:center; justify-content:center; gap:14px; text-transform:uppercase; letter-spacing:3.5px; font-size:.76rem; font-weight:700; color:var(--gold-600); margin:0 0 16px; }
.section-eyebrow::before, .section-eyebrow::after{ content:""; height:2px; width:30px; border-radius:2px; background:var(--gold-grad); opacity:.9; }
.section-title{ text-align:center; font-size:clamp(1.9rem,3.6vw,2.85rem); max-width:22ch; margin:0 auto; letter-spacing:-.025em; }
.section-title.light{ color:#fff; }
.section-eyebrow.light{ color:var(--gold-400); }
.section-eyebrow.left{ justify-content:flex-start; }
.section-eyebrow.left::after{ display:none; }
.section-title.left{ text-align:left; max-width:none; margin:0; }
.section-intro{ text-align:center; max-width:60ch; margin:20px auto 0; color:var(--muted); font-weight:400; }
.section-intro.light{ color:rgba(255,255,255,.68); }

/* generic full-bleed section background image + overlay */
.section{ position:relative; }
.section > .container{ position:relative; z-index:2; }
.section-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.section-bg::before{ content:""; position:absolute; inset:0; background-size:cover; background-position:center; }
.section-bg::after{ content:""; position:absolute; inset:0; }

/* ---------- À propos ---------- */
.apropos{ background:var(--paper); }
.apropos-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:60px; align-items:center; }
.apropos-visual{ position:relative; }
.apropos-visual::before{ content:""; position:absolute; inset:-7% auto -10% -6%; width:55%; z-index:0; border-radius:28px;
  background:radial-gradient(60% 60% at 30% 70%, rgba(212,175,90,.28), transparent 60%); filter:blur(26px); }
.ap-frame{ position:relative; z-index:1; border-radius:22px; overflow:hidden; border:1px solid rgba(212,175,90,.3);
  box-shadow:var(--shadow); aspect-ratio:16/11; }
.ap-frame img{ width:100%; height:100%; object-fit:cover; }
.ap-badge{ position:absolute; z-index:2; right:-18px; bottom:-22px; display:flex; flex-direction:column; gap:2px;
  background:linear-gradient(145deg,var(--navy-700),var(--navy-900)); color:#fff; padding:16px 22px; border-radius:16px;
  box-shadow:0 22px 46px rgba(2,8,22,.4); border:1px solid rgba(212,175,90,.3); max-width:230px; }
.ap-num{ font-family:var(--serif); font-weight:700; font-size:1.4rem; background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.ap-lbl{ font-size:.78rem; color:rgba(255,255,255,.78); line-height:1.4; }
.ap-text{ color:var(--muted); margin:22px 0 28px; font-size:1.02rem; }
.ap-pillars{ display:flex; flex-direction:column; gap:20px; }
.ap-pillar{ display:flex; gap:16px; align-items:flex-start; }
.ap-pillar-ico{ width:50px; height:50px; flex:0 0 50px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,var(--navy-700),var(--navy-900)); color:var(--gold-400); box-shadow:inset 0 0 0 1px rgba(212,175,90,.18), var(--shadow-sm); }
.ap-pillar-ico svg{ width:24px; height:24px; }
.ap-pillar h4{ font-family:var(--sans); font-weight:700; font-size:1rem; margin-bottom:5px; }
.ap-pillar p{ margin:0; font-size:.92rem; color:var(--muted); font-weight:400; line-height:1.6; }

/* ---------- Solutions ---------- */
.solutions{ background:var(--paper); }
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:32px; margin-top:60px; }
.cards-3{ grid-template-columns:repeat(3,1fr); gap:26px; }
.cards-3 .card{ padding:34px 28px; }
@media (max-width:1040px){ .cards-3{ grid-template-columns:repeat(2,1fr); } } /* tablet: 2 cols, not a lone narrow column */
.card{
  position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:40px 36px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:rgba(212,175,90,.45); }
.card-line{ position:absolute; top:0; left:0; right:0; height:4px; background:var(--gold-grad); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.card:hover .card-line{ transform:scaleX(1); }
.card-featured{ border-color:rgba(212,175,90,.5); box-shadow:0 24px 60px rgba(212,175,90,.14); }
.card-featured .card-line{ transform:scaleX(1); }
.card-badge{ position:absolute; top:22px; right:22px; font-size:.7rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--navy-900); background:var(--gold-grad); padding:5px 12px; border-radius:999px; }
.card-head{ display:flex; align-items:center; gap:18px; margin-bottom:20px; }
.card-icon{ width:64px; height:64px; flex:0 0 64px; border-radius:18px; background:linear-gradient(145deg,var(--navy-700),var(--navy-900)); color:var(--gold-400); display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px rgba(212,175,90,.18); }
.card-title{ font-size:1.4rem; }
.card-audience{ margin:5px 0 0; color:var(--gold-600); font-size:.85rem; font-weight:600; letter-spacing:.02em; }
.card-accroche{ font-style:italic; color:var(--muted); margin:0 0 22px; font-size:.96rem; }
.card-price{ display:flex; align-items:baseline; gap:16px; margin:0 0 24px; padding:18px 22px; background:linear-gradient(135deg,var(--cream),#fff); border:1px solid var(--line); border-radius:16px; }
.cp-main{ font-family:var(--serif); font-size:1.9rem; font-weight:700; color:var(--navy-800); margin:0; line-height:1; white-space:nowrap; }
.cp-meta{ margin:0; font-size:.82rem; color:var(--muted); line-height:1.5; }
.cp-meta em{ color:var(--gold-600); font-style:normal; font-weight:600; }
.card-list{ display:flex; flex-direction:column; gap:12px; margin:0 0 30px; }
.card-list li{ position:relative; padding-left:32px; font-size:.94rem; color:#33405c; }
.card-list li::before{
  content:""; position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%; background:var(--gold-grad);
  -webkit-mask:center/12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
          mask:center/12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}
.card-cta{ margin-top:auto; width:100%; }
.legal-hint{ text-align:center; margin:48px auto 0; max-width:62ch; font-size:.85rem; color:var(--muted); }
.legal-hint a{ color:var(--navy-700); text-decoration:underline; text-underline-offset:2px; }

/* ---------- Méthode (dark) ---------- */
.methode{
  background:
    radial-gradient(100% 80% at 90% 0%, rgba(212,175,90,.12), transparent 55%),
    linear-gradient(160deg, var(--navy-800), var(--navy-900));
  color:#fff; overflow:hidden;
}
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:62px; }
.step{ position:relative; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius); padding:34px 28px; backdrop-filter:blur(4px); transition:transform .3s var(--ease), border-color .3s, background .3s; }
.step:hover{ transform:translateY(-6px); border-color:rgba(212,175,90,.5); background:rgba(255,255,255,.06); }
.step-num{ font-family:var(--serif); font-size:2.4rem; font-weight:700; background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; display:block; margin-bottom:14px; }
.step h3{ color:#fff; font-size:1.2rem; margin-bottom:10px; }
.step p{ color:rgba(255,255,255,.74); font-size:.92rem; font-weight:400; margin:0; }

/* ---------- Pourquoi (dark, image background) ---------- */
.pourquoi{ color:#fff; background:var(--navy-900); }
.pourquoi .section-bg::before{ background-image:url("/w/assets/pourquoi-bg.jpg"); }
.pourquoi .section-bg::after{
  background:linear-gradient(180deg, rgba(6,15,36,.92) 0%, rgba(6,15,36,.8) 45%, rgba(8,18,42,.92) 100%),
             radial-gradient(90% 70% at 80% 30%, rgba(212,175,90,.12), transparent 60%);
}
.engagements{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; margin-top:60px; }
.engagement{ text-align:center; padding:32px 20px; border-radius:var(--radius);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(6px);
  transition:transform .3s var(--ease), box-shadow .3s, background .3s, border-color .3s; }
.engagement:hover{ transform:translateY(-6px); background:rgba(255,255,255,.09); border-color:rgba(212,175,90,.5); box-shadow:0 24px 50px rgba(2,8,22,.5); }
.eng-icon{ width:72px; height:72px; margin:0 auto 18px; border-radius:18px;
  background:linear-gradient(145deg,var(--navy-600),var(--navy-900)); border:1px solid rgba(212,175,90,.25);
  display:flex; align-items:center; justify-content:center; color:var(--gold-400);
  transition:transform .3s var(--ease); }
.engagement:hover .eng-icon{ transform:scale(1.08) rotate(-4deg); }
.eng-icon svg{ width:30px; height:30px; }
.engagement h3{ color:#fff; font-size:1.04rem; margin-bottom:9px; }
.engagement p{ font-size:.86rem; color:rgba(255,255,255,.72); margin:0; font-weight:400; }

/* ============ CTA BAND ============ */
.cta-band{ position:relative; overflow:hidden; color:#fff;
  background:
    linear-gradient(110deg, rgba(6,15,36,.95) 0%, rgba(6,15,36,.72) 48%, rgba(9,21,48,.6) 100%),
    radial-gradient(80% 140% at 50% 0%, rgba(27,58,115,.4), transparent 60%),
    url("/w/assets/cta-bg.jpg");
  background-size:cover, cover, cover; background-position:center; }
.cta-glow{ position:absolute; width:70vw; height:70vw; left:50%; top:-40%; transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,90,.16), transparent 60%); pointer-events:none; }
.cta-inner{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:48px; padding:80px 28px; flex-wrap:wrap; }
.cta-text h2{ color:#fff; font-size:clamp(1.8rem,3.4vw,2.6rem); }
.cta-text p{ margin:14px 0 0; color:rgba(255,255,255,.84); font-weight:400; max-width:46ch; }
.cta-phone{ display:flex; align-items:center; gap:12px; font-family:var(--serif); font-size:1.8rem; font-weight:700; margin:0 0 18px;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.cta-phone .wa-ico{ -webkit-text-fill-color:initial; }
.cta-mail{ margin:14px 0 0; font-size:.9rem; color:rgba(255,255,255,.72); }
.cta-mail a{ color:#fff; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(212,175,90,.7); transition:color .2s; }
.cta-mail a:hover{ color:var(--gold-400); }

/* ============ FOOTER ============ */
.site-footer{ background:var(--navy-900); color:rgba(255,255,255,.7); }
.footer-grid{ display:grid; grid-template-columns:1.8fr 1fr 1.3fr; gap:48px; padding:72px 28px 48px; }
.footer-brandmark{ color:#fff; margin-bottom:20px; }
.footer-tagline{ font-size:.92rem; font-weight:400; max-width:40ch; line-height:1.75; color:rgba(255,255,255,.66); }
.footer-col h4{ color:#fff; font-family:var(--sans); font-weight:700; font-size:.74rem; letter-spacing:2.5px; text-transform:uppercase; margin-bottom:20px; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a, .footer-contact li{ color:rgba(255,255,255,.7); font-size:.92rem; transition:color .2s; }
.footer-col a:hover{ color:var(--gold-400); }
.footer-contact li{ display:flex; align-items:center; gap:10px; }
.fc-ico{ width:18px; text-align:center; }
.socials{ display:flex; gap:10px; margin-top:22px; }
.soc{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:.85rem; color:rgba(255,255,255,.82); transition:.25s; }
.soc svg{ width:18px; height:18px; display:block; }
.soc:hover{ background:var(--gold-grad); border-color:transparent; color:var(--navy-900); transform:translateY(-2px); }
/* Bande réseaux sociaux — pieds de page simples (offres + pages légales) */
.footer-social-strip{ border-top:1px solid rgba(255,255,255,.08); }
.footer-social-strip .container{ display:flex; justify-content:center; padding:22px 0 6px; }
.footer-social-strip .socials{ margin-top:0; }
/* Réseaux sociaux dans l'en-tête */
.header-socials{ display:flex; align-items:center; gap:10px; }
.hsoc{ width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.8); transition:.25s; }
.hsoc svg{ width:16px; height:16px; display:block; }
.hsoc:hover{ background:var(--gold-grad); border-color:transparent; color:var(--navy-900); transform:translateY(-2px); }
[dir="rtl"] .header-socials{ direction:ltr; }
/* En-tête dense sur les largeurs intermédiaires : on masque les icônes sociales de l'en-tête
   (repli sur le pied de page) ; elles réapparaissent en grand écran et dans le menu mobile (≤860). */
@media (min-width:861px) and (max-width:1200px){ .header-socials{ display:none; } }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); }
.footer-bottom-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px 28px; flex-wrap:wrap; }
.footer-bottom p{ margin:0; font-size:.82rem; color:rgba(255,255,255,.5); }
/* Adresse de l'entreprise : discrète dans le pied de page, alignée sur la
   typographie des mentions légales. Le pied de page riche (accueil) l'affiche
   dans la colonne Contact via .fc-address. */
.footer-address{ font-size:.8rem; color:rgba(255,255,255,.45); }
.fc-address{ align-items:flex-start; line-height:1.55; }
[dir="rtl"] .footer-address, [dir="rtl"] .fc-address{ text-align:right; }
@media (max-width:760px){ .footer-address{ text-align:center; } }
.footer-legal-links{ display:flex; gap:26px; }
.footer-legal-links a{ color:rgba(255,255,255,.68); }
.footer-legal-links a:hover{ color:var(--gold-400); }

/* ============ FLOATING WHATSAPP ============ */
.wa-float{ position:fixed; right:24px; bottom:24px; z-index:60; width:60px; height:60px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px rgba(37,211,102,.45); transition:transform .2s; animation:wa-pulse 2.8s infinite; }
.wa-float:hover{ transform:scale(1.09); }
@keyframes wa-pulse{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5);} 70%{ box-shadow:0 0 0 18px rgba(37,211,102,0);} 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0);} }
.wa-float::after{
  content:attr(data-tip); position:absolute; right:72px; top:50%; transform:translateY(-50%) translateX(8px);
  background:var(--navy-900); color:#fff; font-size:.8rem; font-weight:600; white-space:nowrap;
  padding:9px 14px; border-radius:10px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.wa-float:hover::after, .wa-float:focus-visible::after{ opacity:1; transform:translateY(-50%) translateX(0); }

/* ============ ACCESSIBILITY & POLISH ============ */
:focus-visible{ outline:3px solid var(--gold-400); outline-offset:3px; border-radius:6px; }
.skip-link{
  position:fixed; top:-70px; left:16px; z-index:200; background:var(--gold-grad); color:var(--navy-900);
  font-weight:700; padding:12px 22px; border-radius:10px; box-shadow:var(--shadow); transition:top .25s var(--ease);
}
.skip-link:focus{ top:14px; outline:none; }
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:90; background:var(--gold-grad);
  box-shadow:0 0 12px rgba(212,175,90,.6); transition:width .08s linear;
}
[dir="rtl"] .scroll-progress{ left:auto; right:0; }

/* ============ FAQ ============ */
.faq{ background:var(--paper); }
.faq-list{ max-width:840px; margin:54px auto 0; display:flex; flex-direction:column; gap:14px; }
.faq-item{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:border-color .25s, box-shadow .25s; }
.faq-item.open{ border-color:rgba(212,175,90,.55); box-shadow:var(--shadow-sm); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px; text-align:left;
  background:none; border:0; cursor:pointer; padding:22px 26px; font-family:var(--serif); font-size:1.08rem; font-weight:600; color:var(--ink); }
.faq-q:hover{ color:var(--navy-700); }
.faq-ico{ position:relative; width:20px; height:20px; flex:0 0 20px; }
.faq-ico::before,.faq-ico::after{ content:""; position:absolute; background:var(--gold-600); border-radius:2px; transition:transform .3s var(--ease); }
.faq-ico::before{ left:0; top:8.75px; width:20px; height:2.5px; }
.faq-ico::after{ left:8.75px; top:0; width:2.5px; height:20px; }
.faq-item.open .faq-ico::after{ transform:scaleY(0); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq-a p{ margin:0; padding:0 26px 24px; color:var(--muted); font-size:.96rem; line-height:1.7; }
.faq-a a{ color:var(--navy-700); text-decoration:underline; text-underline-offset:2px; }

/* footer disclaimer note */
.footer-note{ border-top:1px solid rgba(255,255,255,.07); margin-top:6px; }
.footer-note .container{ padding-top:22px; padding-bottom:6px; }
.footer-note p{ margin:0; font-size:.78rem; color:rgba(255,255,255,.42); line-height:1.65; max-width:none; }

@media (prefers-reduced-motion:reduce){
  .scroll-progress, .faq-a, .wa-float::after{ transition:none; }
}

/* ============ LANDING (OFFER) PAGES ============ */
.lp-hero{ position:relative; padding:120px 0 70px; overflow:hidden;
  background:linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 45%, var(--navy-700) 100%); color:#fff; }
.lp-hero .container{ position:relative; z-index:2; max-width:840px; }
.lp-hero .pill{ margin-bottom:22px; }
.lp-title{ font-size:clamp(2.2rem,5vw,3.4rem); color:#fff; margin-bottom:10px; }
.lp-subtitle{ font-family:var(--sans); font-weight:600; letter-spacing:.04em; color:var(--gold-300);
  text-transform:uppercase; font-size:.92rem; margin-bottom:24px; }
.lp-promise{ font-size:1.12rem; line-height:1.7; color:rgba(255,255,255,.82); max-width:680px; margin:0 0 30px; }
.lp-hero-actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.lp-freebadge{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.92rem;
  color:var(--gold-300); }
.lp-freebadge::before{ content:"✓"; display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; background:rgba(227,196,116,.16); color:var(--gold-300); font-size:.8rem; }

.lp-steps{ display:grid; gap:22px; margin-top:38px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.lp-step{ position:relative; background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:30px 28px; box-shadow:var(--shadow-sm); }
.lp-step-num{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:12px; background:var(--gold-grad); color:var(--navy-900); font-family:var(--serif);
  font-weight:700; font-size:1.2rem; margin-bottom:16px; }
.lp-step h3{ font-size:1.18rem; margin-bottom:10px; color:var(--navy-800); }
.lp-step p{ color:#33405c; font-size:.98rem; line-height:1.6; }

.pricing{ background:var(--navy-900); color:#fff; }
.pricing .section-title{ color:#fff; }
.pricing-grid{ display:grid; gap:22px; margin:38px auto 0; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); max-width:760px; }
.pricing .lp-hero-actions{ justify-content:center; }
.price-card{ position:relative; background:rgba(255,255,255,.04); border:1px solid rgba(227,196,116,.28);
  border-radius:18px; padding:30px 28px; }
.price-card.is-featured{ border-color:var(--gold-500); box-shadow:0 18px 50px rgba(0,0,0,.35); }
.pc-name{ font-family:var(--sans); font-weight:600; font-size:.95rem; color:rgba(255,255,255,.78);
  letter-spacing:.02em; margin-bottom:14px; }
.pc-amount{ font-family:var(--serif); font-weight:700; font-size:2.4rem; line-height:1;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.pc-unit{ font-size:1rem; font-weight:500; color:rgba(255,255,255,.7); -webkit-text-fill-color:rgba(255,255,255,.7); }
.pc-note{ margin-top:14px; font-size:.9rem; color:rgba(255,255,255,.62); line-height:1.5; }

.lp-backbar{ padding:34px 0; background:var(--paper); border-top:1px solid var(--line); }
.lp-backbar .container{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; }
.lp-otherlinks{ display:flex; flex-wrap:wrap; gap:18px; }
.lp-otherlinks a{ color:var(--navy-700); font-weight:600; font-size:.95rem; }
.lp-otherlinks a:hover{ color:var(--gold-600); }

/* nav dropdown for offers */
.nav-offers{ position:relative; }
.nav-offers > .nav-link{ cursor:pointer; }
.nav-offers-menu{ position:absolute; top:calc(100% + 10px); left:0; min-width:230px; background:var(--navy-800);
  border:1px solid rgba(227,196,116,.22); border-radius:12px; padding:8px; display:none; flex-direction:column;
  gap:2px; box-shadow:0 18px 44px rgba(0,0,0,.4); z-index:60; }
.nav-offers:hover .nav-offers-menu, .nav-offers:focus-within .nav-offers-menu{ display:flex; }
.nav-offers-menu a{ padding:10px 14px; border-radius:8px; color:rgba(255,255,255,.84); font-size:.92rem; font-weight:500; }
.nav-offers-menu a:hover{ background:rgba(227,196,116,.12); color:var(--gold-300); }

[dir="rtl"] .lp-otherlinks a, [dir="rtl"] .lp-step p, [dir="rtl"] .lp-promise{ text-align:right; }
[dir="rtl"] .nav-offers-menu{ left:auto; right:0; }
[dir="rtl"] .lp-step-num{ font-family:var(--sans); }

@media (max-width:820px){
  .lp-hero{ padding:104px 0 56px; }
}

/* ============ LEGAL PAGES ============ */
.legal-header{ position:relative; background:var(--navy-900); }
.legal-page{ padding:64px 0 90px; background:var(--paper); }
.legal-page h1{ font-size:clamp(2rem,4vw,2.7rem); margin-bottom:8px; }
.legal-page .lead{ color:var(--muted); margin-bottom:40px; }
.legal-page h2{ font-size:1.35rem; margin:38px 0 12px; color:var(--navy-800); }
.legal-page p, .legal-page li{ color:#33405c; font-size:.98rem; }
.legal-page ul{ list-style:disc; padding-left:22px; display:flex; flex-direction:column; gap:8px; margin:14px 0; }
.legal-box{ background:#fff; border-left:4px solid var(--gold-500); border-radius:12px; padding:24px 28px; margin:22px 0; box-shadow:var(--shadow-sm); }
.back-link{ display:inline-flex; align-items:center; gap:8px; margin-top:34px; color:var(--navy-700); font-weight:700; }
.back-link:hover{ color:var(--gold-600); }
.legal-header .nav-link.active::after{ right:0; }
/* Legal pages ship no hamburger/JS — keep their short nav visible & in-flow on mobile
   (otherwise the shared .main-nav mobile collapse hides the links with no way to open). */
@media (max-width:860px){
  .legal-header .header-inner{ flex-wrap:wrap; height:auto; padding:12px 0; gap:8px 18px; }
  .legal-header .main-nav{ position:static; max-height:none; overflow:visible; width:100%;
    flex-direction:row; flex-wrap:wrap; gap:4px 20px; margin:0; padding:0;
    background:none; backdrop-filter:none; border:none; }
  .legal-header .main-nav .nav-link{ padding:4px 0; border-bottom:0; }
}

/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
  .engagements{ grid-template-columns:repeat(3,1fr); row-gap:30px; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .header-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .main-nav{
    position:absolute; top:100%; left:0; right:0; background:rgba(8,18,42,.97); backdrop-filter:blur(14px);
    flex-direction:column; align-items:stretch; gap:0; padding:0 28px; max-height:0; overflow:hidden;
    transition:max-height .35s var(--ease), padding .35s var(--ease); border-bottom:1px solid rgba(255,255,255,.08);
  }
  .main-nav.open{ max-height:640px; padding:10px 28px 22px; }
  /* Réseaux sociaux : rangée en bas du menu déroulant mobile */
  .header-socials{ margin-top:14px; padding-top:16px; border-top:1px solid rgba(255,255,255,.1); gap:14px; align-self:flex-start; }
  .nav-link{ padding:14px 0; border-bottom:1px solid rgba(255,255,255,.07); }
  .nav-link::after{ display:none; }
  /* Offers submenu: stack in-flow inside the mobile drawer (no hover dropdown) */
  .nav-offers{ display:block; }
  .nav-offers-menu{ position:static; display:flex; background:transparent; border:none; box-shadow:none; padding:2px 0 8px 14px; min-width:0; }
  .nav-offers-menu a{ padding:10px 0; }
}
@media (max-width:900px){
  .hero{ min-height:auto; }
  .hero-content{ grid-template-columns:1fr; gap:44px; padding-top:124px; }
  .hero-title{ max-width:18ch; }
  .hero-visual{ max-width:520px; }
  .hero-float{ right:14px; }
  .apropos-grid{ grid-template-columns:1fr; gap:52px; }
  .apropos-visual{ max-width:560px; }
  .ap-badge{ right:14px; }
  .engagements{ grid-template-columns:repeat(3,1fr); row-gap:20px; }
}
@media (max-width:760px){
  .cards{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); gap:34px 20px; }
  .stat:nth-child(2)::after, .stat:not(:last-child)::after{ display:none; }
  .cta-inner{ flex-direction:column; text-align:center; align-items:center; }
  .cta-phone{ justify-content:center; }
  .footer-bottom-inner{ flex-direction:column; text-align:center; }
  .hero-content{ padding-top:120px; }
}
@media (max-width:540px){
  .engagements{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:36px; }
  .section{ padding:72px 0; }
  .hero-actions .btn{ width:100%; }
}

/* ============ LANGUAGE SWITCHER ============ */
.lang-switch{
  display:flex; align-items:center; gap:2px; flex:0 0 auto; margin-left:4px;
  padding:3px; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(255,255,255,.06);
}
.lang-btn{
  appearance:none; border:0; background:none; cursor:pointer; color:rgba(255,255,255,.72);
  font-family:var(--sans); font-weight:700; font-size:.78rem; letter-spacing:.04em; line-height:1;
  padding:6px 10px; min-width:34px; border-radius:999px; transition:color .2s, background .2s, box-shadow .2s;
}
.lang-btn:hover{ color:#fff; }
.lang-btn.active{ color:var(--navy-900); background:var(--gold-grad); box-shadow:0 2px 8px rgba(212,175,90,.4); }
/* darker chrome on legal pages (header is solid navy, not over the hero) */
.legal-header .lang-switch{ border-color:rgba(255,255,255,.22); }
@media (max-width:860px){
  .lang-switch{ margin-left:auto; }
  .nav-toggle{ margin-left:10px; }
}

/* ============ Témoignages (preuve sociale) ============ */
.testimonials{ padding:96px 0; background:var(--navy-900); }
.greviews{ display:flex; align-items:center; gap:22px; max-width:760px; margin:44px auto 0;
  padding:26px 30px; border-radius:20px; background:rgba(255,255,255,.04);
  border:1px solid rgba(212,175,90,.28); color:#fff; transition:.3s var(--ease); }
.greviews:hover{ transform:translateY(-4px); border-color:rgba(212,175,90,.6); background:rgba(255,255,255,.07); }
.greviews-logo{ flex:0 0 64px; height:64px; border-radius:16px; background:#fff; display:flex; align-items:center; justify-content:center; }
.greviews-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.greviews-stars{ color:#f5b400; letter-spacing:3px; font-size:1rem; }
.greviews-title{ font-family:var(--serif); font-size:1.25rem; font-weight:600; }
.greviews-text{ font-size:.92rem; color:rgba(255,255,255,.62); line-height:1.55; }
.greviews-cta{ flex:0 0 auto; background:var(--gold-grad); color:var(--navy-900); font-weight:600;
  font-size:.9rem; padding:12px 22px; border-radius:999px; white-space:nowrap; }
@media (max-width:640px){
  .greviews{ flex-direction:column; text-align:center; padding:26px 22px; }
  .greviews-cta{ width:100%; text-align:center; }
}

/* ============ Tunnel de réservation : modale formulaire → Calendly ============ */
body.bk-open{ overflow:hidden; }
.bk-overlay{ position:fixed; inset:0; z-index:1200; background:rgba(4,10,24,.8);
  backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center;
  padding:24px; overflow-y:auto; animation:bkFade .25s var(--ease); }
.bk-overlay[hidden]{ display:none; }
@keyframes bkFade{ from{ opacity:0; } to{ opacity:1; } }
.bk-modal{ position:relative; width:100%; max-width:520px; margin:auto;
  background:var(--navy-800); border:1px solid rgba(255,255,255,.12); border-radius:20px;
  padding:38px 34px 30px; box-shadow:0 30px 80px rgba(0,0,0,.5);
  animation:bkRise .3s var(--ease); }
@keyframes bkRise{ from{ transform:translateY(14px); opacity:0; } to{ transform:none; opacity:1; } }
.bk-close{ position:absolute; top:14px; right:16px; background:none; border:0; cursor:pointer;
  font-size:1.7rem; line-height:1; color:rgba(255,255,255,.55); transition:.2s; padding:4px 8px; }
.bk-close:hover{ color:#fff; }
.bk-eyebrow{ margin:0 0 6px; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-500); font-weight:600; }
.bk-title{ margin:0 0 8px; font-size:1.6rem; line-height:1.25; color:#fff; }
.bk-sub{ margin:0 0 24px; font-size:.9rem; line-height:1.6; color:rgba(255,255,255,.6); }
.bk-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.bk-field label{ font-size:.84rem; font-weight:600; color:rgba(255,255,255,.85); }
.bk-field input, .bk-field select{ width:100%; padding:12px 14px; border-radius:10px;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); color:#fff;
  font-family:var(--sans); font-size:.94rem; transition:.2s; }
.bk-field input::placeholder{ color:rgba(255,255,255,.35); }
.bk-field input:focus, .bk-field select:focus{ outline:none; border-color:var(--gold-500);
  background:rgba(255,255,255,.08); }
.bk-field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23d4af5a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:12px; padding-right:38px; }
.bk-field select option{ background:var(--navy-900); color:#fff; }
.bk-field input.is-invalid, .bk-field select.is-invalid{ border-color:#e5736b; background:rgba(229,115,107,.08); }
.bk-error{ font-size:.78rem; color:#f0a19a; min-height:1em; }
.bk-submit{ width:100%; margin-top:8px; justify-content:center; }
.bk-note{ margin:14px 0 0; font-size:.78rem; text-align:center; color:rgba(255,255,255,.45); line-height:1.5; }
@media (max-width:560px){
  .bk-overlay{ padding:0; }
  .bk-modal{ max-width:none; min-height:100%; border-radius:0; border:0; padding:56px 22px 30px; }
  .bk-title{ font-size:1.35rem; }
}

/* ============ En-tête mobile — bloc de marque ============
   Demande client : pictogramme plus grand, or plus lumineux, « CONSULTING »
   plus lisible, alignement vertical soigné. Portée : mobile uniquement.
   L'or est appliqué SUR LE LOGO seulement (.brand-mark) : la variable
   --gold-500 sert à 12 autres endroits (boutons, liens, bordures) et n'est
   pas touchée, donc aucun impact sur le reste de la charte. */
@media (max-width:860px){
  /* Pictogramme +25 % (40×34 → 50×42) : les détails fins du pont restent lisibles.
     Surcharge les attributs width/height inscrits dans le SVG de chaque page. */
  .brand-mark svg{ width:50px; height:42px; }

  /* Or métallique plus vif, halo accordé à la nouvelle teinte. */
  .brand-mark{ color:#e5c158; filter:drop-shadow(0 2px 7px rgba(229,193,88,.45)); }

  /* « CONSULTING » : corps et interlettrage augmentés. */
  .brand-sub{ font-size:.72rem; letter-spacing:4.2px; color:#e5c158; }

  /* Centrage optique pictogramme / texte. */
  .brand{ align-items:center; gap:10px; }
  .brand-text{ justify-content:center; }
}

/* Écrans étroits : on récupère de la place pour que « Euro-Gulf Bridge »
   tienne sur une seule ligne malgré le logo agrandi (l'en-tête était déjà
   à l'étroit sous ~390 px avant cette modification). */
@media (max-width:560px){
  .header-inner{ padding-left:16px; padding-right:16px; gap:10px; }
  .lang-btn{ min-width:28px; padding:5px 7px; font-size:.72rem; }
  .nav-toggle{ margin-left:6px; padding:6px; }
}
@media (max-width:400px){
  /* iPhone 14/15 = 390 px : ce palier doit les couvrir, sinon « Euro-Gulf Bridge »
     passe sur deux lignes. */
  .brand-mark svg{ width:44px; height:37px; }
  .brand-name{ font-size:1.02rem; }
  .brand-sub{ font-size:.66rem; letter-spacing:3.2px; }
  .lang-btn{ min-width:25px; padding:5px 6px; }
}

/* ============ RTL (Arabic) ============ */
[lang="ar"]{ font-family:"Cairo", var(--sans); }
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4{ font-family:"Cairo", var(--serif); }

/* --- Header --- */
[dir="rtl"] .main-nav{ margin-left:0; margin-right:auto; }
[dir="rtl"] .nav-toggle{ margin-left:0; margin-right:auto; }
[dir="rtl"] .lang-switch{ margin-left:0; margin-right:4px; }
[dir="rtl"] .header-cta{ margin-left:0; margin-right:6px; }
[dir="rtl"] .nav-link::after{ left:auto; right:0; }
[dir="rtl"] .skip-link{ left:auto; right:16px; }
/* mobile nav: align links to the right */
@media (max-width:860px){
  [dir="rtl"] .nav-link{ text-align:right; }
  [dir="rtl"] .lang-switch{ margin-left:0; margin-right:0; }
}

/* --- Floating elements --- */
[dir="rtl"] .wa-float{ right:auto; left:24px; }
[dir="rtl"] .wa-float::after{ right:auto; left:72px; transform:translateY(-50%) translateX(-8px); }
[dir="rtl"] .wa-float:hover::after, [dir="rtl"] .wa-float:focus-visible::after{ transform:translateY(-50%) translateX(0); }
[dir="rtl"] .hero-float{ right:auto; left:-14px; }
[dir="rtl"] .ap-badge{ right:auto; left:-18px; }
[dir="rtl"] .frame-badge{ left:auto; right:18px; }

/* --- Section eyebrow.left: mirror decorative lines --- */
[dir="rtl"] .section-eyebrow.left{ justify-content:flex-end; }
[dir="rtl"] .section-eyebrow.left::before{ display:none; }
[dir="rtl"] .section-eyebrow.left::after{ display:block; }
[dir="rtl"] .section-title.left{ text-align:right; }

/* --- Cards --- */
[dir="rtl"] .card-badge{ right:auto; left:22px; }
[dir="rtl"] .card-line{ transform-origin:right; }
[dir="rtl"] .card-list li{ padding-left:0; padding-right:32px; }
[dir="rtl"] .card-list li::before{ left:auto; right:0; }

/* --- Pricing --- */
[dir="rtl"] .cp-main{ direction:ltr; text-align:right; }
[dir="rtl"] .cp-meta{ text-align:right; }

/* --- Landing pricing & step cards (RTL): right-align all text, keep the price LTR --- */
[dir="rtl"] .price-card, [dir="rtl"] .lp-step{ text-align:right; }
[dir="rtl"] .pc-name, [dir="rtl"] .pc-note, [dir="rtl"] .lp-step h3{ text-align:right; }
[dir="rtl"] .pc-amount{ direction:ltr; text-align:right; }

/* --- FAQ: undo the hardcoded text-align:left --- */
[dir="rtl"] .faq-q{ text-align:right; }

/* --- Legal pages --- */
[dir="rtl"] .legal-box{ border-left:0; border-right:4px solid var(--gold-500); border-radius:12px; }
[dir="rtl"] .legal-page ul{ padding-left:0; padding-right:22px; }
[dir="rtl"] .back-link{ direction:rtl; }

/* --- Mobile position fixes --- */
@media (max-width:900px){
  [dir="rtl"] .hero-float{ left:14px; }
  [dir="rtl"] .ap-badge{ left:14px; }
}

/* --- Témoignages (RTL) --- */
[dir="rtl"] .greviews{ text-align:right; }

/* --- Modale de réservation (RTL) : texte à droite, téléphone en LTR --- */
[dir="rtl"] .bk-modal{ text-align:right; }
[dir="rtl"] .bk-close{ right:auto; left:16px; }
[dir="rtl"] .bk-field select{ background-position:left 14px center; padding-right:14px; padding-left:38px; }
[dir="rtl"] #bkPhone{ direction:ltr; text-align:right; }
[dir="rtl"] .bk-note{ text-align:center; }

/* Numéro UK : liens tel: au même style que le texte environnant */
.cta-phone a, .hero-chips .chip a{ color:inherit; text-decoration:none; -webkit-text-fill-color:currentColor; }
.cta-phone + .cta-phone{ margin-top:-8px; }