/* =========================================================
   Cargo 360 — feuille de style principale
   Charte : marine profond + violet (repris de l'app),
   Fraunces (éditorial) + Inter (produit/UI)
   ========================================================= */

:root{
  /* couleurs */
  --navy-950:#0A0E27;
  --navy-900:#12173A;
  --navy-700:#232B57;
  --purple-600:#6D28D9;
  --purple-500:#7C3AED;
  --purple-100:#EFE9FD;
  --ink:#151834;
  --ink-soft:#565B7D;
  --paper:#FFFFFF;
  --mist:#F6F5FB;
  --line:#E4E1F0;
  --teal-500:#12B76A;
  --amber-500:#F59E0B;

  /* typographie */
  --font-display:"Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* rythme */
  --container:1180px;
  --radius-s:10px;
  --radius-m:16px;
  --radius-l:28px;
}

*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  font-size:16px;
  line-height:1.6;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

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

:focus-visible{
  outline:2px solid var(--purple-500);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,0.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}

.site-header__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:78px;
}

.brand{
  display:flex;
  align-items:center;
  gap:11px;
  flex-shrink:0;
}

.brand__mark{ width:34px; height:34px; }

.brand__word{
  font-family:var(--font-body);
  font-weight:800;
  font-size:1.22rem;
  letter-spacing:-0.01em;
  color:var(--navy-900);
}

.brand__word span{ color:var(--purple-600); }

.main-nav{
  display:flex;
  align-items:center;
  gap:38px;
}

.main-nav__links{
  display:flex;
  align-items:center;
  gap:32px;
  list-style:none;
  margin:0;
  padding:0;
}

.main-nav__links a{
  font-size:0.965rem;
  font-weight:500;
  color:var(--ink-soft);
  transition:color .15s ease;
  white-space:nowrap;
}

.main-nav__links a:hover{ color:var(--navy-900); }
.main-nav__links a.is-current{ color:var(--navy-950); }

/* ---------------------------------------------------------
   Sélecteur de langue
   --------------------------------------------------------- */

.lang-switch{
  position:relative;
}

.lang-switch__btn{
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  font-family:var(--font-body);
  font-size:0.85rem;
  font-weight:600;
  color:var(--navy-950);
}
.lang-switch__btn .flag{ font-size:1.05rem; line-height:1; }
.lang-switch__btn svg{ width:13px; height:13px; color:var(--ink-soft); }

.lang-switch__menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:170px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-s);
  box-shadow:0 14px 32px -12px rgba(18,23,58,0.25);
  padding:6px;
  display:none;
  z-index:110;
}
.lang-switch.is-open .lang-switch__menu{ display:block; }

.lang-switch__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:8px;
  font-size:0.9rem;
  color:var(--ink);
  font-weight:500;
}
.lang-switch__item:hover{ background:var(--mist); }
.lang-switch__item.is-active{ background:var(--purple-100); color:var(--purple-600); font-weight:700; }
.lang-switch__item .flag{ font-size:1.1rem; }

[dir="rtl"] .lang-switch__menu{ right:auto; left:0; }

.header-actions{
  display:flex;
  align-items:center;
  gap:18px;
}

.nav-toggle{
  display:none;
  background:none;
  border:0;
  padding:6px;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:var(--navy-900);
  margin:5px 0;
  border-radius:2px;
}

/* ---------------------------------------------------------
   Boutons
   --------------------------------------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 24px;
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.95rem;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  line-height:1;
}

.btn--primary{
  background:var(--navy-900);
  color:#fff;
  box-shadow:0 1px 2px rgba(18,23,58,0.06);
}
.btn--primary:hover{
  background:var(--purple-600);
  transform:translateY(-1px);
}

.btn--ghost{
  background:transparent;
  color:var(--navy-900);
  border-color:var(--line);
}
.btn--ghost:hover{
  border-color:var(--navy-900);
}

.btn--sm{ padding:10px 18px; font-size:0.88rem; }

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */

.hero{
  position:relative;
  overflow:hidden;
  padding:52px 0 60px;
  background:
    radial-gradient(760px 420px at 82% -10%, var(--purple-100) 0%, rgba(239,233,253,0) 62%),
    var(--paper);
}

.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,460px);
  gap:64px;
  align-items:center;
}

.hero__route-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 16px 8px 8px;
  border-radius:999px;
  background:var(--mist);
  border:1px solid var(--line);
  font-size:0.85rem;
  font-weight:600;
  color:var(--navy-900);
  margin-bottom:18px;
}

.hero__route-badge .dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--teal-500);
}

.hero__title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(2.6rem, 3.4vw + 1.2rem, 4rem);
  line-height:1.06;
  letter-spacing:-0.015em;
  color:var(--navy-950);
  margin:0 0 18px;
  max-width:15ch;
}

.hero__lede{
  font-size:1.14rem;
  line-height:1.65;
  color:var(--ink-soft);
  max-width:46ch;
  margin:0 0 26px;
}

.hero__actions{
  display:flex;
  align-items:center;
  gap:26px;
  margin-bottom:34px;
  flex-wrap:wrap;
}

.hero__link{
  font-weight:600;
  font-size:0.95rem;
  color:var(--navy-900);
  border-bottom:1.5px solid var(--line);
  padding-bottom:2px;
  transition:border-color .15s ease;
}
.hero__link:hover{ border-color:var(--navy-900); }

.hero__stats{
  display:grid;
  grid-template-columns:repeat(3, auto);
  gap:36px;
}

.hero__stat-value{
  font-family:var(--font-display);
  font-size:1.7rem;
  font-weight:600;
  color:var(--navy-950);
  line-height:1;
  margin-bottom:6px;
}

.hero__stat-label{
  font-size:0.86rem;
  color:var(--ink-soft);
  max-width:16ch;
  line-height:1.4;
}

/* ---- phone mockup / slider ---- */

.hero__visual{
  position:relative;
  display:flex;
  justify-content:center;
}

.hero__visual-deco{
  position:absolute;
  inset:-40px -20px;
  z-index:0;
}

.phone{
  position:relative;
  z-index:1;
  width:270px;
  border-radius:38px;
  background:var(--navy-950);
  padding:12px;
  box-shadow:
    0 30px 60px -20px rgba(18,23,58,0.35),
    0 8px 20px -8px rgba(18,23,58,0.25);
}

.phone__screen{
  position:relative;
  border-radius:26px;
  overflow:hidden;
  aspect-ratio:640/1387;
  background:#fff;
}

.phone__slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .6s ease;
}
.phone__slide.is-active{ opacity:1; }
.phone__slide img{ width:100%; height:100%; object-fit:cover; }

.hero__caption{
  position:relative;
  margin-top:14px;
  height:42px;
}

.hero__caption-text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  text-align:center;
  padding:0 8px;
  font-size:0.95rem;
  font-weight:600;
  color:#EDEBF9;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .4s ease, transform .4s ease;
}
.hero__caption-text.is-active{ opacity:1; transform:translateY(0); }

.hero__dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:10px;
}

.hero__dots button{
  width:6px; height:6px;
  border-radius:50%;
  border:0;
  padding:0;
  background:var(--line);
  cursor:pointer;
  transition:background .2s ease, width .2s ease;
}
.hero__dots button.is-active{
  background:var(--purple-500);
  width:20px;
  border-radius:4px;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 980px){
  .main-nav__links{ display:none; }
  .nav-toggle{ display:block; }
  .header-actions .btn--ghost{ display:none; }

  .main-nav.is-open .main-nav__links{
    display:flex;
    position:absolute;
    top:78px; left:0; right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    background:#fff;
    border-bottom:1px solid var(--line);
    padding:14px 32px 22px;
  }
  .main-nav.is-open .main-nav__links a{ padding:10px 0; width:100%; }
  .hero__grid{ grid-template-columns:1fr; }
  .hero__visual{ order:-1; margin-bottom:12px; }
  .hero__title{ max-width:none; }
  .hero__stats{ grid-template-columns:repeat(3, 1fr); gap:18px; }
}

@media (max-width: 560px){
  .container{ padding:0 20px; }
  .hero{ padding:48px 0 64px; }
  .hero__stats{ grid-template-columns:1fr 1fr; }
}

/* ---------------------------------------------------------
   Section header (réutilisé par plusieurs sections)
   --------------------------------------------------------- */

.section{ padding:104px 0; }
.section--tight{ padding-top:0; }

.section-head{
  max-width:600px;
  margin:0 0 56px;
}

.section-head__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:0.85rem;
  font-weight:600;
  color:var(--purple-600);
  margin-bottom:14px;
}
.section-head__eyebrow::before{
  content:"";
  width:16px; height:1.5px;
  background:var(--purple-500);
}

.section-head__title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.9rem, 1.6vw + 1.3rem, 2.6rem);
  line-height:1.14;
  letter-spacing:-0.01em;
  color:var(--navy-950);
  margin:0 0 16px;
}

.section-head__lede{
  font-size:1.05rem;
  color:var(--ink-soft);
  line-height:1.65;
  margin:0;
}

/* ---------------------------------------------------------
   Fonctionnalités — grille bento
   --------------------------------------------------------- */

.features{
  background:var(--mist);
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:172px;
  grid-auto-flow:dense;
  gap:18px;
}

.feature-card{
  position:relative;
  border-radius:var(--radius-m);
  border:1px solid var(--line);
  background:#fff;
  padding:26px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.feature-card__icon{
  width:38px; height:38px;
  border-radius:10px;
  background:var(--purple-100);
  color:var(--purple-600);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:auto;
}
.feature-card__icon svg{ width:19px; height:19px; }

.feature-card__title{
  font-family:var(--font-body);
  font-weight:700;
  font-size:1.02rem;
  color:var(--navy-950);
  margin:0 0 6px;
}

.feature-card__text{
  font-size:0.9rem;
  color:var(--ink-soft);
  line-height:1.55;
  margin:0;
}

/* carte vedette : site de suivi marque blanche */
.feature-card--featured{
  grid-column:span 2;
  grid-row:span 2;
  background:#fff;
  padding:0;
  overflow:hidden;
  justify-content:flex-start;
}

.feature-card--featured .feature-card__body{
  padding:24px 28px 0;
}

.feature-card--featured .feature-card__title{
  font-family:var(--font-display);
  font-size:1.4rem;
  font-weight:600;
  margin-bottom:8px;
}
.feature-card--featured .feature-card__text{
  font-size:0.94rem;
  max-width:40ch;
}

/* mini navigateur illustratif */
.mini-browser{
  margin:16px 28px 0;
  border-radius:12px 12px 0 0;
  border:1px solid var(--line);
  border-bottom:0;
  overflow:hidden;
  background:var(--mist);
}
.mini-browser__bar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.mini-browser__bar span{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--line);
}
.mini-browser__url{
  margin-left:8px;
  font-size:0.7rem;
  color:var(--ink-soft);
  background:var(--mist);
  border-radius:6px;
  padding:3px 10px;
  flex:1;
}
.mini-browser__body{
  padding:12px 14px 0;
  background:#fff;
}
.mini-browser__track{
  background:var(--navy-950);
  border-radius:10px 10px 0 0;
  padding:11px 14px;
  color:#fff;
}
.mini-browser__track-route{
  font-weight:700;
  font-size:0.82rem;
  margin-bottom:3px;
}
.mini-browser__track-status{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:0.66rem;
  font-weight:600;
  color:#B9F5D8;
}
.mini-browser__track-status .dot{ width:5px; height:5px; border-radius:50%; background:#12B76A; }
.mini-browser__rows{
  background:#fff;
  border:1px solid var(--line);
  border-top:0;
  padding:2px 14px 2px;
}
.mini-browser__rows div{
  display:flex;
  justify-content:space-between;
  font-size:0.7rem;
  color:var(--ink-soft);
  padding:6px 0;
  border-top:1px dashed var(--line);
}
.mini-browser__rows div:first-child{ border-top:0; }
.mini-browser__rows b{ color:var(--navy-900); font-weight:600; }

/* carte confiance (accent sombre) */
.feature-card--trust{
  background:var(--navy-950);
  border-color:var(--navy-950);
}
.feature-card--trust .feature-card__icon{
  background:rgba(255,255,255,0.1);
  color:#fff;
}
.feature-card--trust .feature-card__title{ color:#fff; }
.feature-card--trust .feature-card__text{ color:rgba(255,255,255,0.68); }

@media (max-width: 900px){
  .feature-grid{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:180px; }
  .feature-card--featured{ grid-column:span 2; grid-row:span 2; }
}

@media (max-width: 620px){
  .section{ padding:72px 0; }
  .feature-grid{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .feature-card{ grid-column:auto !important; grid-row:auto !important; min-height:150px; }
  .feature-card--featured .mini-browser{ margin:22px 22px 0; }
  .feature-card--featured .feature-card__body{ padding:26px 22px 0; }
}

/* ---------------------------------------------------------
   Différenciateur — précision du suivi + portée internationale
   --------------------------------------------------------- */

.diff-section{ background:var(--navy-950); color:#fff; }

.diff-section .section-head__eyebrow{ color:#B9A6FA; }
.diff-section .section-head__eyebrow::before{ background:#B9A6FA; }
.diff-section .section-head__title{ color:#fff; }
.diff-section .section-head__lede{ color:rgba(255,255,255,0.62); }

.diff-compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:56px;
}

.diff-card{
  border-radius:var(--radius-m);
  padding:28px;
  border:1px solid rgba(255,255,255,0.12);
}

.diff-card__label{
  font-size:0.78rem;
  font-weight:600;
  color:rgba(255,255,255,0.5);
  margin-bottom:14px;
  text-transform:none;
}

.diff-card--muted .diff-card__visual{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
}
.diff-card--muted .diff-card__visual .box{
  width:52px; height:40px;
  border:1.5px dashed rgba(255,255,255,0.3);
  border-radius:6px;
}
.diff-card--muted .diff-card__visual .arrow{ color:rgba(255,255,255,0.3); font-size:1.1rem; }
.diff-card--muted .diff-card__visual .tag{
  font-size:0.72rem;
  font-weight:600;
  color:rgba(255,255,255,0.55);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:6px;
  padding:4px 8px;
}

.diff-card--highlight{
  background:linear-gradient(155deg, #241a52, #1a1440);
  border-color:rgba(176,140,255,0.35);
}
.diff-card--highlight .diff-card__visual{
  display:flex;
  gap:6px;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.diff-card--highlight .diff-card__visual .tag{
  font-size:0.72rem;
  font-weight:600;
  color:#fff;
  background:rgba(176,140,255,0.25);
  border:1px solid rgba(176,140,255,0.5);
  border-radius:6px;
  padding:4px 8px;
}

.diff-card p{
  font-size:0.92rem;
  color:rgba(255,255,255,0.68);
  line-height:1.6;
  margin:0;
}
.diff-card strong{ color:#fff; }

.cargo-types{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:56px;
}

.cargo-type-chip{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.04);
  font-size:0.88rem;
  font-weight:600;
  color:#fff;
}
.cargo-type-chip svg{ width:17px; height:17px; color:#B9A6FA; }

.reach{
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:40px;
}

.reach__label{
  font-size:0.85rem;
  color:rgba(255,255,255,0.55);
  margin:0 0 18px;
}

.country-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.country-chip{
  padding:8px 16px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  font-size:0.85rem;
  color:rgba(255,255,255,0.85);
}

@media (max-width: 700px){
  .diff-compare{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------
   Comment ça marche
   --------------------------------------------------------- */

.steps{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  position:relative;
}

.steps::before{
  content:"";
  position:absolute;
  top:27px;
  left:calc(12.5% + 2px);
  right:calc(12.5% + 2px);
  height:1px;
  background:var(--line);
}

.step{
  position:relative;
  padding-right:28px;
}

.step__index{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:54px; height:54px;
  border-radius:50%;
  background:#fff;
  border:1.5px solid var(--line);
  font-family:var(--font-display);
  font-size:1.35rem;
  font-weight:600;
  color:var(--navy-950);
  margin-bottom:24px;
}

.step:first-child .step__index{
  background:var(--navy-950);
  border-color:var(--navy-950);
  color:#fff;
}

.step__title{
  font-size:1.05rem;
  font-weight:700;
  color:var(--navy-950);
  margin:0 0 8px;
}

.step__text{
  font-size:0.92rem;
  color:var(--ink-soft);
  line-height:1.6;
  margin:0;
  max-width:26ch;
}

/* ---- CTA téléchargement ---- */

.download-cta{
  margin-top:88px;
  border-radius:var(--radius-l);
  background:var(--navy-950);
  padding:56px 64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}

.download-cta__text h3{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.7rem;
  color:#fff;
  margin:0 0 10px;
  max-width:22ch;
}

.download-cta__text p{
  font-size:0.98rem;
  color:rgba(255,255,255,0.65);
  margin:0;
  max-width:38ch;
}

.store-badges{
  display:flex;
  gap:14px;
  flex-shrink:0;
  flex-wrap:wrap;
}

.store-badge{
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 20px 11px 16px;
  border-radius:12px;
  background:#12173A;
  border:1px solid rgba(255,255,255,0.16);
  transition:border-color .15s ease, background .15s ease;
}
.store-badge:hover{
  border-color:rgba(255,255,255,0.4);
  background:#181f4d;
}
.store-badge svg{ width:22px; height:22px; flex-shrink:0; }
.store-badge__label{ display:flex; flex-direction:column; line-height:1.2; }
.store-badge__label small{ font-size:0.66rem; color:rgba(255,255,255,0.6); }
.store-badge__label strong{ font-size:0.92rem; font-weight:600; color:#fff; }

@media (max-width: 900px){
  .steps{ grid-template-columns:repeat(2, 1fr); gap:36px 24px; }
  .steps::before{ display:none; }
  .step{ padding-right:0; }
  .download-cta{ padding:44px 32px; }
}

@media (max-width: 560px){
  .steps{ grid-template-columns:1fr; }
  .download-cta{ flex-direction:column; align-items:flex-start; text-align:left; }
  .store-badges{ width:100%; }
  .store-badge{ flex:1; justify-content:center; }
}

/* ---------------------------------------------------------
   Tarifs — devis personnalisé (pas de prix publics)
   --------------------------------------------------------- */

.pricing{ background:var(--mist); }

.pricing-panel{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  border-radius:var(--radius-l);
  background:#fff;
  border:1px solid var(--line);
  overflow:hidden;
}

.pricing-panel__main{
  padding:52px;
}

.pricing-panel__kicker{
  display:inline-block;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.02em;
  color:var(--purple-600);
  background:var(--purple-100);
  padding:6px 12px;
  border-radius:999px;
  margin-bottom:20px;
}

.pricing-panel__main h3{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.6rem;
  color:var(--navy-950);
  margin:0 0 14px;
  max-width:22ch;
}

.pricing-panel__main > p{
  font-size:0.98rem;
  color:var(--ink-soft);
  line-height:1.65;
  max-width:48ch;
  margin:0 0 32px;
}

.pricing-checklist{
  list-style:none;
  margin:0 0 34px;
  padding:0;
  display:grid;
  gap:14px;
}

.pricing-checklist li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:0.93rem;
  color:var(--ink);
  line-height:1.5;
}

.pricing-checklist svg{
  flex-shrink:0;
  width:19px; height:19px;
  color:var(--teal-500);
  margin-top:2px;
}

.pricing-volume-note{
  padding:18px 20px;
  border-radius:var(--radius-s);
  background:var(--mist);
  border:1px solid var(--line);
  font-size:0.86rem;
  line-height:1.6;
  color:var(--ink-soft);
  margin:0;
}

.pricing-volume-note b{ color:var(--navy-950); }

.pricing-panel__contact{
  background:var(--navy-950);
  padding:52px 44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.pricing-panel__contact h4{
  font-family:var(--font-display);
  font-size:1.3rem;
  font-weight:600;
  color:#fff;
  margin:0 0 10px;
}

.pricing-panel__contact > p{
  font-size:0.9rem;
  color:rgba(255,255,255,0.62);
  line-height:1.6;
  margin:0 0 30px;
}

.contact-line{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 0;
  border-top:1px solid rgba(255,255,255,0.12);
}
.contact-line:last-child{ padding-bottom:0; }

.contact-line__icon{
  width:38px; height:38px;
  border-radius:10px;
  background:rgba(255,255,255,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:#fff;
}
.contact-line__icon svg{ width:17px; height:17px; }

.contact-line__text{ display:flex; flex-direction:column; line-height:1.35; min-width:0; }
.contact-line__text small{ font-size:0.72rem; color:rgba(255,255,255,0.55); }
.contact-line__text strong{ font-size:0.95rem; color:#fff; font-weight:600; word-break:break-word; }

@media (max-width: 900px){
  .pricing-panel{ grid-template-columns:1fr; }
  .pricing-panel__main{ padding:38px 28px; }
  .pricing-panel__contact{ padding:38px 28px; }
}

/* ---------------------------------------------------------
   Contact
   --------------------------------------------------------- */

.contact-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:start;
}

.contact-cards{
  display:grid;
  gap:16px;
}

.contact-card{
  display:flex;
  align-items:center;
  gap:16px;
  padding:22px 24px;
  border-radius:var(--radius-m);
  border:1px solid var(--line);
  background:#fff;
  transition:border-color .15s ease, transform .15s ease;
}
.contact-card:hover{ border-color:var(--navy-900); transform:translateY(-1px); }

.contact-card__icon{
  width:44px; height:44px;
  border-radius:12px;
  background:var(--purple-100);
  color:var(--purple-600);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.contact-card__icon svg{ width:20px; height:20px; }

.contact-card__text{ display:flex; flex-direction:column; line-height:1.35; min-width:0; }
.contact-card__text small{ font-size:0.78rem; color:var(--ink-soft); }
.contact-card__text strong{ font-size:1rem; color:var(--navy-950); font-weight:600; word-break:break-word; }

.contact-note{
  margin-top:28px;
  padding:24px;
  border-radius:var(--radius-m);
  background:var(--mist);
  border:1px solid var(--line);
  font-size:0.9rem;
  color:var(--ink-soft);
  line-height:1.6;
}
.contact-note b{ color:var(--navy-950); }

.trust-strip{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:32px;
}
.trust-chip{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  font-size:0.82rem;
  color:var(--ink-soft);
  font-weight:500;
}
.trust-chip svg{ width:15px; height:15px; color:var(--teal-500); flex-shrink:0; }

@media (max-width: 860px){
  .contact-section{ grid-template-columns:1fr; gap:40px; }
}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

.site-footer{
  background:var(--navy-950);
  color:rgba(255,255,255,0.6);
  padding:64px 0 32px;
}

.footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:48px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.footer-brand__word{
  font-weight:800;
  font-size:1.1rem;
  color:#fff;
}
.footer-brand__word span{ color:#9061F9; }

.footer-tagline{
  font-size:0.92rem;
  line-height:1.6;
  max-width:34ch;
  color:rgba(255,255,255,0.55);
}

.social-links{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:22px;
}

.social-links a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:10px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.75);
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.social-links a:hover{
  background:rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.28);
  color:#fff;
  transform:translateY(-1px);
}
.social-links svg{ width:17px; height:17px; }

.footer-col h5{
  font-size:0.8rem;
  font-weight:600;
  color:#fff;
  margin:0 0 18px;
  letter-spacing:0.01em;
}

.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.footer-col a{
  font-size:0.9rem;
  color:rgba(255,255,255,0.6);
  transition:color .15s ease;
}
.footer-col a:hover{ color:#fff; }

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:12px;
  padding-top:28px;
  font-size:0.82rem;
  color:rgba(255,255,255,0.4);
}

@media (max-width: 700px){
  .footer-top{ grid-template-columns:1fr; gap:32px; }
}

/* ---------------------------------------------------------
   Bouton retour en haut
   --------------------------------------------------------- */

.scroll-top{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:90;
  width:46px; height:46px;
  border-radius:50%;
  border:1px solid var(--line);
  background:#fff;
  color:var(--navy-950);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 10px 24px -8px rgba(18,23,58,0.22);
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, border-color .15s ease, background .15s ease;
}
.scroll-top svg{ width:19px; height:19px; }
.scroll-top.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
.scroll-top:hover{ background:var(--navy-950); color:#fff; border-color:var(--navy-950); }

/* ---------------------------------------------------------
   Bannière de page (Support / Politique)
   --------------------------------------------------------- */

.page-banner{
  padding:72px 0 56px;
  background:
    radial-gradient(680px 360px at 88% -20%, var(--purple-100) 0%, rgba(239,233,253,0) 62%),
    var(--paper);
  border-bottom:1px solid var(--line);
}

.page-banner__title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(2.1rem, 2.4vw + 1.2rem, 3rem);
  line-height:1.08;
  letter-spacing:-0.01em;
  color:var(--navy-950);
  margin:0 0 14px;
  max-width:16ch;
}

.page-banner__lede{
  font-size:1.05rem;
  color:var(--ink-soft);
  line-height:1.6;
  max-width:52ch;
  margin:0;
}

.page-content{ padding:72px 0 104px; }

/* ---------------------------------------------------------
   Support — cartes de contact + FAQ
   --------------------------------------------------------- */

.support-layout{
  display:grid;
  grid-template-columns:0.9fr 1.4fr;
  gap:56px;
  align-items:start;
}

.support-aside{
  position:sticky;
  top:100px;
  display:grid;
  gap:14px;
}

.faq-list{
  display:grid;
  gap:12px;
}

.faq-item{
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  background:#fff;
  overflow:hidden;
}

.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 24px;
  font-weight:600;
  font-size:0.98rem;
  color:var(--navy-950);
}
.faq-item summary::-webkit-details-marker{ display:none; }

.faq-item__plus{
  flex-shrink:0;
  width:26px; height:26px;
  border-radius:50%;
  background:var(--mist);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.faq-item__plus::before, .faq-item__plus::after{
  content:"";
  position:absolute;
  background:var(--navy-950);
  border-radius:2px;
}
.faq-item__plus::before{ width:11px; height:1.6px; }
.faq-item__plus::after{ width:1.6px; height:11px; transition:transform .2s ease; }
.faq-item[open] .faq-item__plus::after{ transform:rotate(90deg) scaleY(0); }

.faq-item__body{
  padding:0 24px 22px;
  font-size:0.93rem;
  color:var(--ink-soft);
  line-height:1.65;
}
.faq-item__body a{ color:var(--purple-600); font-weight:600; }

@media (max-width: 860px){
  .support-layout{ grid-template-columns:1fr; }
  .support-aside{ position:static; }
}

/* ---------------------------------------------------------
   FAQ (page d'accueil)
   --------------------------------------------------------- */

.faq-section .faq-list{
  max-width:800px;
}

/* ---------------------------------------------------------
   Politique de confidentialité — article
   --------------------------------------------------------- */

.legal-article{
  max-width:740px;
  margin:0 auto;
}

.legal-article__updated{
  color:var(--ink-soft);
  font-size:0.9rem;
  margin:0 0 40px;
}

.legal-article h2{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.35rem;
  color:var(--navy-950);
  margin:2.2em 0 0.7em;
  padding-bottom:0.5em;
  border-bottom:1px solid var(--line);
}
.legal-article h2:first-child{ margin-top:0; }

.legal-article h3{
  font-size:1.02rem;
  font-weight:700;
  color:var(--navy-950);
  margin:1.7em 0 0.5em;
}

.legal-article p{
  font-size:0.98rem;
  color:var(--ink-soft);
  line-height:1.75;
  margin:0.9em 0;
}

.legal-article ul{
  margin:0.7em 0;
  padding-left:1.3em;
  color:var(--ink-soft);
  font-size:0.98rem;
  line-height:1.75;
}
.legal-article li{ margin:0.4em 0; }

.legal-article strong{ color:var(--navy-950); }
.legal-article a{ color:var(--purple-600); font-weight:600; }

.legal-contact-card{
  background:var(--mist);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:22px 26px;
  margin-top:1em;
}
.legal-contact-card p{ margin:0.3em 0; }

/* ---------------------------------------------------------
   Pages d'erreur (404 / 403)
   --------------------------------------------------------- */

.error-page{
  min-height:calc(100vh - 78px - 260px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:80px 0;
  background:
    radial-gradient(680px 420px at 50% -10%, var(--purple-100) 0%, rgba(239,233,253,0) 62%),
    var(--paper);
}

.error-page__inner{
  max-width:520px;
  margin:0 auto;
  text-align:center;
}

.error-page__code{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(4.5rem, 9vw, 7rem);
  line-height:1;
  letter-spacing:-0.02em;
  background:linear-gradient(135deg, var(--navy-950), var(--purple-600));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin:0 0 20px;
}

.error-page__title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.6rem;
  color:var(--navy-950);
  margin:0 0 14px;
}

.error-page__lede{
  font-size:1rem;
  color:var(--ink-soft);
  line-height:1.65;
  max-width:42ch;
  margin:0 auto 34px;
}

.error-page__actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}

@media (max-width: 560px){
  .error-page{ padding:56px 0; }
  .error-page__actions{ flex-direction:column; }
  .error-page__actions .btn{ width:100%; justify-content:center; }
}

/* ---------------------------------------------------------
   Page Contact — arguments + formulaire
   --------------------------------------------------------- */

.contact-page-layout{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:56px;
  align-items:start;
}

.contact-benefits{
  position:sticky;
  top:100px;
}

.contact-benefits__title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.3rem;
  color:var(--navy-950);
  margin:0 0 22px;
}

.contact-benefits__list{
  list-style:none;
  margin:0 0 32px;
  padding:0;
  display:grid;
  gap:16px;
}

.contact-benefits__list li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:0.96rem;
  color:var(--ink);
  line-height:1.55;
}

.contact-benefits__list svg{
  flex-shrink:0;
  width:20px; height:20px;
  color:var(--teal-500);
  margin-top:2px;
}

.contact-benefits__email{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 20px;
  border-radius:var(--radius-m);
  background:var(--mist);
  border:1px solid var(--line);
}

/* ---- formulaire ---- */

.contact-form-wrap{
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  background:#fff;
  padding:40px;
}

.contact-form__row{
  margin-bottom:20px;
}

.contact-form__row label{
  display:block;
  font-size:0.86rem;
  font-weight:600;
  color:var(--navy-950);
  margin-bottom:8px;
}

.contact-form__row input,
.contact-form__row select,
.contact-form__row textarea{
  width:100%;
  padding:13px 15px;
  border-radius:var(--radius-s);
  border:1px solid var(--line);
  background:var(--paper);
  font-family:var(--font-body);
  font-size:0.95rem;
  color:var(--ink);
  transition:border-color .15s ease;
}

.contact-form__row input:focus,
.contact-form__row select:focus,
.contact-form__row textarea:focus{
  outline:none;
  border-color:var(--purple-500);
}

.contact-form__row textarea{ resize:vertical; min-height:100px; }

.contact-form__row select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23565B7D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px;
  padding-right:40px;
}
[dir="rtl"] .contact-form__row select{
  background-position:left 14px center;
  padding-right:15px;
  padding-left:40px;
}

.contact-form__honeypot{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}

.contact-form__submit{
  width:100%;
  justify-content:center;
  margin-top:6px;
}

.contact-form__privacy{
  margin:14px 0 0;
  font-size:0.8rem;
  color:var(--ink-soft);
  text-align:center;
}

.contact-form-errors{
  background:#FEF2F2;
  border:1px solid #FCA5A5;
  border-radius:var(--radius-s);
  padding:16px 20px;
  margin-bottom:24px;
  font-size:0.9rem;
  color:#991B1B;
}
.contact-form-errors ul{ margin:8px 0 0; padding-left:20px; }
[dir="rtl"] .contact-form-errors ul{ padding-left:0; padding-right:20px; }

/* ---- succès ---- */

.contact-success{
  text-align:center;
  padding:40px 20px;
}

.contact-success__icon{
  width:56px; height:56px;
  color:var(--teal-500);
  margin:0 auto 20px;
}

.contact-success h2{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.5rem;
  color:var(--navy-950);
  margin:0 0 12px;
}

.contact-success p{
  font-size:0.98rem;
  color:var(--ink-soft);
  line-height:1.65;
  max-width:40ch;
  margin:0 auto 28px;
}

@media (max-width: 900px){
  .contact-page-layout{ grid-template-columns:1fr; }
  .contact-benefits{ position:static; }
  .contact-form-wrap{ padding:28px; }
}

/* ---------------------------------------------------------
   RTL — arabe
   --------------------------------------------------------- */

[dir="rtl"] body{ text-align:right; }

[dir="rtl"] .site-header__row,
[dir="rtl"] .main-nav__links,
[dir="rtl"] .header-actions,
[dir="rtl"] .hero__actions,
[dir="rtl"] .hero__stats,
[dir="rtl"] .footer-top,
[dir="rtl"] .contact-line,
[dir="rtl"] .contact-card,
[dir="rtl"] .step,
[dir="rtl"] .cargo-type-chip,
[dir="rtl"] .trust-chip,
[dir="rtl"] .faq-item summary,
[dir="rtl"] .legal-article ul{
  direction: rtl;
}

[dir="rtl"] .hero__lede,
[dir="rtl"] .section-head__lede,
[dir="rtl"] .feature-card__text,
[dir="rtl"] .step__text,
[dir="rtl"] .legal-article p,
[dir="rtl"] .legal-article li{
  text-align:right;
}

[dir="rtl"] .hero__stats{ text-align:right; }

[dir="rtl"] .steps::before{ display:none; }

[dir="rtl"] .diff-card--muted .diff-card__visual .arrow{
  display:inline-block;
  transform:scaleX(-1);
}

[dir="rtl"] .faq-item__plus::after{ transition:transform .2s ease; }

[dir="rtl"] .legal-article ul{ padding-left:0; padding-right:1.3em; }

[dir="rtl"] .contact-line__text,
[dir="rtl"] .contact-card__text{ text-align:right; }

[dir="rtl"] .btn,
[dir="rtl"] .cargo-type-chip,
[dir="rtl"] .trust-chip,
[dir="rtl"] .store-badge,
[dir="rtl"] .social-links{
  flex-direction:row-reverse;
}

[dir="rtl"] .hero__route-badge,
[dir="rtl"] .contact-card,
[dir="rtl"] .contact-line,
[dir="rtl"] .faq-item summary{
  flex-direction:row-reverse;
}

[dir="rtl"] .feature-card__icon{ margin-left:auto; margin-right:0; }

[dir="rtl"] body,
[dir="rtl"] .hero__title,
[dir="rtl"] .section-head__title,
[dir="rtl"] .page-banner__title,
[dir="rtl"] .legal-article h2,
[dir="rtl"] .legal-article h3{
  font-family: "Inter", "Segoe UI", Tahoma, sans-serif;
}