/* ==========================================================
   JODIEM SARL - Feuille de style unique pour tout le site
   Modifiez les couleurs et la police dans :root ci-dessous.
   ========================================================== */
:root{
  --noir:#1F2124;      /* Noir du logo */
  --vert:#17A011;      /* Vert du logo */
  --rouge:#EC1018;     /* Rouge du logo */
  --gris:#F3F4F5;      /* Fond des sections claires */
  --texte:#2b2d30;
  /* Police : Arial Narrow en gras, avec alternatives si absente */
  --police:"Arial Narrow","Liberation Sans Narrow","Roboto Condensed",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:var(--police);color:var(--texte);line-height:1.6;font-size:1.1rem;background:#fff}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-weight:700;line-height:1.15;color:var(--noir)}
h1{font-size:clamp(2.4rem,6vw,4.4rem)}
h2{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:.6em}
h3{font-size:1.4rem;margin-bottom:.3em}
:focus-visible{outline:3px solid var(--vert);outline-offset:3px}
.wrap{max-width:1100px;margin:0 auto;padding:0 1.25rem}
section{padding:4.5rem 0}
.fond-gris{background:var(--gris)}
/* Bande tricolore reprise du logo */
.bande{height:6px;background:linear-gradient(90deg,var(--vert) 33.3%,var(--noir) 33.3% 66.6%,var(--rouge) 66.6%)}

/* ---------- En-tête et navigation ---------- */
header{position:sticky;top:0;z-index:10;background:#fff;box-shadow:0 1px 0 #e3e3e3}
.barre{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1.25rem;max-width:1100px;margin:0 auto}
.marque{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-size:1.5rem;font-weight:700;color:var(--noir)}
.marque img{height:48px;width:auto}
nav ul{list-style:none;display:flex;gap:1.6rem;padding:0}
nav a{text-decoration:none;font-weight:700;padding:.3rem 0;border-bottom:3px solid transparent}
nav a:hover,nav a[aria-current="page"]{border-color:var(--rouge)}
.burger{display:none;background:none;border:2px solid var(--noir);padding:.4rem .7rem;font:inherit;font-weight:700;cursor:pointer}
@media(max-width:760px){
  .burger{display:block}
  nav ul{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;gap:0;padding:.5rem 1.25rem 1rem;box-shadow:0 8px 12px rgba(0,0,0,.12)}
  nav ul.ouvert{display:flex}
  nav a{display:block;padding:.7rem 0}
}

/* ---------- Boutons ---------- */
.btn{display:inline-block;padding:.85rem 1.6rem;font:inherit;font-weight:700;text-decoration:none;border:2px solid var(--rouge);background:var(--rouge);color:#fff;cursor:pointer}
.btn:hover{background:#c20c13;border-color:#c20c13}
.btn.sec{background:transparent;color:#fff;border-color:#fff}
.btn.sec:hover{background:#fff;color:var(--noir)}
.btn.vert{background:var(--vert);border-color:var(--vert)}
.btn.vert:hover{background:#0f7d0b;border-color:#0f7d0b}

/* ---------- Bandeau d'accueil (hero) ---------- */
.hero{background:var(--noir);color:#fff;padding:5rem 0 4rem;position:relative;overflow:hidden}
.hero h1{color:#fff}
.hero p.slogan{font-size:1.4rem;margin:1rem 0 2rem;max-width:34rem;color:#e6e6e6}
.hero .actions{display:flex;gap:1rem;flex-wrap:wrap}
/* Trois flèches ascendantes inspirées du logo */
.fleches{position:absolute;right:6%;bottom:0;display:flex;align-items:flex-end;gap:14px;height:88%}
.fleches span{display:block;width:34px;position:relative;background:currentColor}
.fleches span::before{content:"";position:absolute;top:-30px;left:-16px;border:33px solid transparent;border-top:0;border-bottom:34px solid currentColor}
.fleches .f1{color:#fff;height:100%}.fleches .f2{color:var(--vert);height:75%}.fleches .f3{color:var(--rouge);height:95%}
@media(max-width:760px){.fleches{opacity:.25;right:-10px}}
.entete-page{background:var(--noir);color:#fff;padding:3.5rem 0}
.entete-page h1{color:#fff;font-size:clamp(2rem,5vw,3.2rem)}

/* ---------- Grilles et cartes ---------- */
.grille{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.carte{background:#fff;border-top:5px solid var(--vert)}
.carte.rouge{border-color:var(--rouge)}
.carte img{width:100%;aspect-ratio:3/2;object-fit:cover}
.carte .corps{padding:1.4rem}
.fond-gris .carte{box-shadow:0 2px 0 #dcdcdc}
.deux{display:grid;gap:2.5rem;grid-template-columns:1fr 1fr;align-items:center}
@media(max-width:760px){.deux{grid-template-columns:1fr}}
ul.liste{padding-left:1.2rem}ul.liste li{margin:.35rem 0}
ul.liste li::marker{color:var(--rouge)}
.chiffres{display:flex;flex-wrap:wrap;gap:2.5rem;margin-top:1rem}
.chiffres strong{display:block;font-size:2.6rem;color:var(--rouge);line-height:1}
.valeur{border-left:5px solid var(--vert);padding:.2rem 0 .2rem 1rem}
.valeur:nth-child(2){border-color:var(--noir)}.valeur:nth-child(3){border-color:var(--rouge)}.valeur:nth-child(4){border-color:var(--vert)}
.capacites{display:flex;flex-wrap:wrap;gap:.7rem;margin:1rem 0}
.capacites span{background:var(--noir);color:#fff;padding:.4rem 1rem;font-weight:700}
.appel{background:var(--vert);color:#fff;text-align:center}
.appel h2{color:#fff}

/* ---------- Formulaire ---------- */
label{display:block;font-weight:700;margin:1rem 0 .3rem}
input,textarea,select{width:100%;padding:.8rem;font:inherit;border:2px solid #c9cacc;background:#fff}
input:focus,textarea:focus{border-color:var(--vert);outline:none}
.carte-contact p{margin:.6rem 0}

/* ---------- Pied de page ---------- */
footer{background:var(--noir);color:#d8d8d8;padding:3rem 0 1.5rem;font-size:1rem}
footer h3{color:#fff;font-size:1.15rem}
footer a{text-decoration:none}footer a:hover{color:#fff;text-decoration:underline}
.copy{border-top:1px solid #3a3d41;margin-top:2rem;padding-top:1rem;font-size:.9rem}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ==========================================================
   VERSION UNE PAGE : défilement continu, ancres et animations
   ========================================================== */
/* Les ancres tiennent compte de la hauteur de l'en-tête fixe */
section[id]{scroll-margin-top:72px}
/* Lien actif du menu (mis à jour par le JS au défilement) */
nav a.actif{border-color:var(--rouge)}
/* En-tête qui se resserre après un peu de défilement */
header{transition:box-shadow .3s}
header.scrolle{box-shadow:0 4px 18px rgba(0,0,0,.14)}
header .marque img{transition:height .3s}
header.scrolle .marque img{height:38px}

/* --- Animation d'entrée du hero : les 3 flèches montent l'une après l'autre --- */
@keyframes monte{from{transform:translateY(110%)}to{transform:none}}
.fleches span{animation:monte 1.1s cubic-bezier(.2,.8,.2,1) both}
.fleches .f2{animation-delay:.25s}.fleches .f3{animation-delay:.5s}
@keyframes entre{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.hero h1{animation:entre .9s .1s both}
.hero .slogan{animation:entre .9s .35s both}
.hero .actions{animation:entre .9s .6s both}
.hero{min-height:82vh;display:flex;align-items:center}
.hero .wrap{width:100%}
.hero .atout{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:2.2rem;color:#cfd2d6;font-size:1rem;animation:entre .9s .8s both}
.hero .atout b{color:#fff}

/* --- Apparition au défilement (activée seulement si le JS tourne) --- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;transition-delay:var(--d,0s)}
.js .reveal.visible{opacity:1;transform:none}

/* --- Survol des cartes et boutons --- */
.carte{transition:transform .3s,box-shadow .3s}
.carte:hover{transform:translateY(-6px);box-shadow:0 14px 28px rgba(0,0,0,.14)}
.carte img{transition:transform .5s}
.carte{overflow:hidden}
.carte:hover img{transform:scale(1.05)}
.btn{transition:transform .2s,background .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.valeur{transition:transform .3s,background .3s;padding:1rem 1rem 1rem 1.2rem;background:#fff}
.valeur:hover{transform:translateX(6px)}

/* --- Titres de section avec trait tricolore --- */
.titre::after{content:"";display:block;width:90px;height:6px;margin-top:.5rem;background:linear-gradient(90deg,var(--vert) 33%,var(--noir) 33% 66%,var(--rouge) 66%)}
.centre{text-align:center}.centre .titre::after{margin-left:auto;margin-right:auto}

/* --- Bouton WhatsApp flottant --- */
.wa{position:fixed;right:18px;bottom:18px;z-index:20;background:#25D366;color:#fff;font-weight:700;text-decoration:none;padding:.8rem 1.2rem;border-radius:40px;box-shadow:0 6px 16px rgba(0,0,0,.25);transition:transform .2s}
.wa:hover{transform:scale(1.06)}

/* Respect des personnes qui réduisent les animations */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}

/* ==========================================================
   AJOUTS : bandeau défilant, route animée, étapes, FAQ
   ========================================================== */
/* Bandeau défilant : la piste contient 2 fois les mêmes mots et glisse de 50 % en boucle */
.defile{background:var(--rouge);color:#fff;overflow:hidden;white-space:nowrap;font-weight:700;font-size:1.2rem;padding:.7rem 0}
.piste{display:inline-block;animation:defile 28s linear infinite}
.piste span{margin:0 1.6rem}.piste span::after{content:"▲";margin-left:3.2rem;color:var(--noir);font-size:.8em}
@keyframes defile{to{transform:translateX(-50%)}}
/* Route animée avec camion */
.route{position:relative;height:70px;margin-top:3rem;border-bottom:6px dashed var(--noir);overflow:hidden}
.camion{position:absolute;bottom:2px;width:130px;animation:roule 9s linear infinite}
@keyframes roule{from{left:-140px}to{left:100%}}
/* Étapes numérotées (c'est une vraie séquence) */
.etapes{list-style:none;padding:0;display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));counter-reset:e}
.etapes li{counter-increment:e;border-top:5px solid var(--vert);background:var(--gris);padding:1.2rem 1.2rem 1.4rem}
.etapes li::before{content:counter(e);display:block;font-size:2.4rem;font-weight:700;color:var(--rouge);line-height:1}
.etapes b{display:block;font-size:1.3rem;color:var(--noir)}
/* FAQ */
details{border-bottom:2px solid #e2e3e5;padding:1rem 0}
summary{cursor:pointer;font-weight:700;font-size:1.25rem;color:var(--noir);list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::after{content:"+";color:var(--rouge);font-size:1.6rem;line-height:1;transition:transform .3s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding-top:.7rem;animation:entre .4s both}
/* Le bouton WhatsApp "respire" pour attirer l'oeil */
@keyframes pouls{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}60%{box-shadow:0 0 0 14px rgba(37,211,102,0)}}
.wa{animation:pouls 2.4s infinite}
/* Les flèches du hero flottent doucement après leur montée */
@keyframes flotte{50%{transform:translateY(-10px)}}
.fleches .f1{animation:monte 1.1s both,flotte 5s 1.4s ease-in-out infinite}
.fleches .f2{animation:monte 1.1s .25s both,flotte 6s 1.6s ease-in-out infinite}
.fleches .f3{animation:monte 1.1s .5s both,flotte 5.5s 1.8s ease-in-out infinite}