/* Chemins des images corrigés pour un sous-dossier (../images/) */
:root{
  --img-hero:        url('../images/hero.jpg');
  --img-maritime:    url('../images/maritime.jpg');
  --img-routier:     url('../images/routier.jpg');
  --img-aerien:      url('../images/aerien.jpg');
  --img-poignee:     url('../images/poignee.jpg');
  --img-fcl:         url('../images/maritime.jpg');
  --img-lcl:         url('../images/lcl.jpg');
  --img-avion:       url('../images/aerien.jpg');
  --img-camion:      url('../images/routier.jpg');
  --img-douane:      url('../images/douane.jpg');
  --img-adr:         url('../images/adr.jpg');
  --img-animaux:     url('../images/animaux.jpg');
  --img-stockage:    url('../images/stockage.jpg');
  --img-equipe:      url('../images/equipe.jpg');
  --img-equipe2:     url('../images/equipe2.jpg');
}

/* ==========================================================================
   FERDELA — ADAPTATION ARABE (droite → gauche)
   Ce fichier vient PAR-DESSUS style.css. Il ne contient que les corrections
   nécessaires au sens de lecture arabe. Ne touchez pas à style.css pour l'arabe.
   ========================================================================== */

/* ---- Police arabe ---- */
body{
  font-family:'Cairo','Manrope',-apple-system,'Segoe UI',sans-serif;
  direction:rtl;
  text-align:right;
}

/* L'arabe est cursif : tout espacement entre lettres casse la liaison. */
h1,h2,h3,h4,p,li,a,span,label,button,div{letter-spacing:normal !important}
.logo__sub,.kicker,.crumb,.stat__label,.mode,.contact3 h3,.foot h4,.svc__tag,.eyebrow{
  letter-spacing:.02em !important;
}

/* Les titres arabes ont besoin d'un interlignage plus généreux */
h1,h2,h3{line-height:1.35 !important}
.hero h1{line-height:1.4 !important}

/* ---- Héro : la colonne texte passe à droite, l'image à gauche ---- */
.hero__visual .fade{
  background:
    linear-gradient(to left,var(--navy-900),rgba(13,27,62,.55) 22%,rgba(13,27,62,0) 55%),
    linear-gradient(to top,rgba(13,27,62,.75),transparent 45%) !important;
}
.hero::after{
  -webkit-mask-image:linear-gradient(to left,#000,transparent 70%) !important;
  mask-image:linear-gradient(to left,#000,transparent 70%) !important;
}
.hero::before{
  background:
    radial-gradient(900px 600px at 92% 12%,rgba(226,87,31,.2),transparent 60%),
    radial-gradient(700px 700px at 55% 95%,rgba(30,58,117,.85),transparent 65%) !important;
}
.eyebrow{padding:8px 10px 8px 16px}

/* ---- Flèches des boutons : elles doivent pointer vers la gauche ---- */
.btn svg,.tcard .more svg{transform:scaleX(-1)}
.btn:hover svg{transform:scaleX(-1) translateX(5px)}
.tcard:hover .more svg{transform:scaleX(-1) translateX(4px)}

/* ---- Navigation ---- */
.nav .btn-nav{margin-left:0;margin-right:8px}
.lang{margin-left:0;margin-right:10px}

/* ---- Sections en deux colonnes ---- */
.split__body,.svc__inner > div{text-align:right}
.reason{flex-direction:row}

/* ---- Listes à puces des services ---- */
.svc li{flex-direction:row}
.svc li svg{transform:scaleX(-1)}

/* ---- Trait décoratif des étiquettes de service ---- */
.svc__tag{flex-direction:row}

/* ---- Formulaire ---- */
.field input,.field textarea{text-align:right;direction:rtl}
.field input[type="email"],.field input[type="tel"]{text-align:right;direction:ltr}

/* ---- Coordonnées : les numéros restent lisibles de gauche à droite ---- */
.topbar a[href^="tel:"],.foot a[href^="tel:"],.contact3 a[href^="tel:"],
.topbar a[href^="mailto:"],.foot a[href^="mailto:"],.contact3 a[href^="mailto:"],
.formwrap__left a{direction:ltr;display:inline-block;unicode-bidi:embed}

/* ---- Pied de page ---- */
.foot-bottom{flex-direction:row}

/* ---- Bouton WhatsApp : passe à gauche ---- */
.wa{right:auto;left:20px}

/* ---- Menu mobile ---- */
@media(max-width:980px){
  .nav a{text-align:right}
  .nav .btn-nav{margin:8px 0 0}
}