/* ============================================================
   JOBARD GROUPE — Design System
   Charte graphique v1.1 (avril 2026) — Poppins unique
   Palette corporate : Rouge #C8102E · Blanc · Bleu #0A2472
   ============================================================ */

:root{
  /* Corporate */
  --rouge:#C8102E;
  --rouge-fonce:#A50D26;
  --bleu:#0A2472;
  --bleu-clair:#1B3C9E;
  --blanc:#FFFFFF;
  --or:#B08D57;          /* accent premium discret (filets, hover) */
  --or-clair:#C8A878;

  /* Neutres premium */
  --anthracite:#1C1C1C;
  --encre:#14151A;
  --gris-700:#3A3D46;
  --gris-500:#6B6F7A;
  --gris-300:#B9BCC4;
  --gris-100:#ECEEF1;
  --ivoire:#F7F4EE;       /* fond de respiration */
  --bord:#E5DCC9;         /* bord premium (charte page À propos) */

  /* Couleur active de marque (surchargée par [data-brand]) */
  --brand:#0A2472;
  --brand-2:#C8102E;
  --brand-ink:#1C1C1C;
  --brand-soft:#F7F4EE;

  --font:'Poppins','Segoe UI',Arial,sans-serif;

  --max:1200px;
  --pad:clamp(20px,5vw,64px);
  --radius:4px;
  --shadow:0 18px 50px -24px rgba(20,21,26,.45);
  --shadow-soft:0 10px 30px -18px rgba(20,21,26,.35);
  --t:.35s cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  color:var(--anthracite);
  background:var(--blanc);
  line-height:1.6;
  font-weight:400;
  font-size:clamp(15px,1.05vw,17px);
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}

/* ---------- Typographie ---------- */
h1,h2,h3,h4{line-height:1.12;font-weight:700;letter-spacing:-.015em;color:var(--bleu)}
h1{font-size:clamp(2.4rem,6vw,4.6rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.9rem)}
h3{font-size:clamp(1.15rem,1.8vw,1.45rem);font-weight:600}
.eyebrow{
  font-size:.72rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--rouge);display:inline-flex;align-items:center;gap:.7em;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--or)}
.lead{font-size:clamp(1.05rem,1.5vw,1.35rem);color:var(--gris-700);font-weight:300;line-height:1.5}
.muted{color:var(--gris-500)}
em,.italic{font-style:italic;font-weight:300}

/* ---------- Layout ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(64px,9vw,128px)}
.section--soft{background:var(--ivoire)}
.section--ink{background:var(--encre);color:#EDEDF0}
.section--ink h2,.section--ink h3{color:#fff}
.section--ink .lead{color:#B9BCC4}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.stack>*+*{margin-top:1.1rem}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--or),transparent);border:0;margin:0}

/* ---------- Filet doré signature ---------- */
.goldrule{height:3px;width:64px;background:var(--or);border-radius:2px}

/* ---------- Boutons ---------- */
.btn{
  --bg:var(--rouge);--fg:#fff;
  display:inline-flex;align-items:center;gap:.6em;
  padding:.95em 1.7em;border-radius:var(--radius);
  background:var(--bg);color:var(--fg);font-weight:600;font-size:.95rem;
  letter-spacing:.01em;border:1px solid var(--bg);cursor:pointer;
  transition:transform var(--t),box-shadow var(--t),background var(--t);
  box-shadow:var(--shadow-soft);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn .arw{transition:transform var(--t)}
.btn:hover .arw{transform:translateX(4px)}
.btn--ghost{--bg:transparent;--fg:var(--bleu);border-color:var(--bord);box-shadow:none}
.btn--ghost:hover{border-color:var(--or);color:var(--or)}
.btn--brand{--bg:var(--brand);--fg:#fff;border-color:var(--brand)}
.btn--light{--bg:#fff;--fg:var(--bleu);border-color:#fff}

/* ---------- Header ---------- */
.site-head{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--gris-100);
}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;height:74px}
.brandmark{display:flex;align-items:center;gap:.7rem;font-weight:700;color:var(--bleu);letter-spacing:.02em}
.brandmark img{height:38px;width:auto}
.brandmark .wm{font-size:1.02rem;line-height:1}
.brandmark .wm small{display:block;font-size:.6rem;letter-spacing:.32em;color:var(--gris-500);font-weight:500;margin-top:3px}
.nav{display:flex;align-items:center;gap:2rem}
.nav a{font-size:.92rem;font-weight:500;color:var(--gris-700);position:relative;padding:.2em 0}
.nav a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--rouge);transition:width var(--t)}
.nav a:hover{color:var(--bleu)}.nav a:hover::after{width:100%}
.nav a.cta{padding:.55em 1.1em;border:1px solid var(--bord);border-radius:var(--radius);color:var(--bleu)}
.nav a.cta::after{display:none}
.nav a.cta:hover{border-color:var(--or);color:var(--or)}
.burger{display:none;background:none;border:0;cursor:pointer;width:42px;height:42px;color:var(--bleu)}
.burger svg{width:26px;height:26px}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--encre);color:#fff;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(120% 90% at 80% -10%,rgba(27,60,158,.55),transparent 60%),
             radial-gradient(80% 70% at 0% 110%,rgba(200,16,46,.40),transparent 60%),var(--encre)}
.hero__img{position:absolute;inset:0;z-index:-3;object-fit:cover;width:100%;height:100%;opacity:.28;filter:grayscale(.2) contrast(1.05)}
.hero__veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,17,30,.35),rgba(11,17,30,.78))}
.hero .wrap{position:relative;padding-block:clamp(90px,15vw,180px)}
.hero h1{color:#fff;max-width:16ch}
.hero .eyebrow{color:#fff}
.hero .eyebrow::before{background:var(--or)}
.hero .lead{color:#D7DAE2;max-width:54ch;margin-top:1.4rem}
.hero .cta-row{margin-top:2.4rem;display:flex;gap:1rem;flex-wrap:wrap}
.hero__meta{margin-top:3.2rem;display:flex;gap:2.4rem;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.14);padding-top:1.6rem}
.hero__meta b{display:block;font-size:1.7rem;color:#fff;font-weight:700}
.hero__meta span{font-size:.82rem;color:#AFB3BE;letter-spacing:.04em}

/* ---------- Grilles & cards ---------- */
.grid{display:grid;gap:clamp(18px,2.4vw,30px)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.card{
  background:#fff;border:1px solid var(--gris-100);border-radius:var(--radius);
  padding:clamp(22px,2.4vw,34px);transition:transform var(--t),box-shadow var(--t),border-color var(--t);
  position:relative;overflow:hidden;height:100%;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--bord)}
.card h3{color:var(--bleu)}
.card p{color:var(--gris-700);font-size:.96rem;margin-top:.5rem}

/* Brand cards (accueil) */
.brandcard{display:flex;flex-direction:column;justify-content:flex-end;min-height:300px;color:#fff;
  background:var(--brand);border:0;padding:clamp(24px,2.6vw,36px)}
.brandcard::before{content:"";position:absolute;inset:0;background:linear-gradient(170deg,rgba(0,0,0,.05),rgba(0,0,0,.45))}
.brandcard>*{position:relative}
.brandcard .tag{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;opacity:.85;font-weight:600}
.brandcard h3{color:#fff;font-size:1.5rem;margin-top:.3rem}
.brandcard p{color:rgba(255,255,255,.86);font-size:.92rem;margin-top:.55rem;flex-grow:0}
.brandcard .go{margin-top:1.1rem;font-weight:600;font-size:.9rem;display:inline-flex;gap:.5em;align-items:center}
.brandcard .go .arw{transition:transform var(--t)}
.brandcard:hover .go .arw{transform:translateX(5px)}
.brandcard--soon{background:linear-gradient(160deg,#23262F,#14151A);border:1px solid rgba(255,255,255,.08)}
.brandcard--soon .tag{color:var(--or-clair)}

.value{padding:clamp(22px,2.4vw,32px);background:#fff;border:1px solid var(--bord);border-radius:var(--radius)}
.value .n{font-family:var(--font);font-weight:700;color:var(--or);font-size:.9rem;letter-spacing:.2em}
.value h3{margin:.5rem 0 .6rem;color:var(--bleu);text-transform:uppercase;letter-spacing:.04em;font-size:1.05rem}
.value p{color:var(--gris-700);font-size:.95rem}

/* ---------- Split (texte + média) ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
.split--rev .media{order:-1}
.media{border-radius:var(--radius);overflow:hidden;border:1px solid var(--gris-100);box-shadow:var(--shadow-soft);background:var(--ivoire)}
.media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.media--frame{aspect-ratio:1/1;display:grid;place-items:center;padding:14%}
.media--frame img{aspect-ratio:auto;object-fit:contain}

/* listes premium */
.ticks{list-style:none;display:grid;gap:.85rem}
.ticks li{position:relative;padding-left:1.8rem;color:var(--gris-700)}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border:2px solid var(--rouge);border-radius:50%}
.ticks.brand li::before{border-color:var(--brand)}

/* offres */
.offer{padding:clamp(20px,2.2vw,30px);border:1px solid var(--gris-100);border-radius:var(--radius);background:#fff;height:100%}
.offer .ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);margin-bottom:1rem;font-weight:700}
.offer h3{font-size:1.08rem;color:var(--anthracite)}
.offer p{color:var(--gris-500);font-size:.92rem;margin-top:.4rem}

/* bandeau marque */
.brandhero{position:relative;background:var(--brand);color:#fff;overflow:hidden;isolation:isolate}
.brandhero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(0,0,0,.35))}
.brandhero .wrap{padding-block:clamp(72px,11vw,140px)}
.brandhero h1{color:#fff;max-width:18ch}
.brandhero .eyebrow{color:#fff}.brandhero .eyebrow::before{background:rgba(255,255,255,.6)}
.brandhero .lead{color:rgba(255,255,255,.9);max-width:56ch}
.badge-soon{display:inline-block;margin-bottom:1.2rem;padding:.4em 1em;border:1px solid rgba(255,255,255,.4);border-radius:100px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase}

/* ---------- Footer ---------- */
.site-foot{background:var(--encre);color:#C4C7D0;padding-block:clamp(54px,7vw,84px) 28px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr;gap:clamp(24px,3vw,48px)}
.site-foot h4{color:#fff;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.1rem;font-weight:600}
.site-foot a{color:#AFB3BE;font-size:.92rem;display:block;padding:.28em 0;transition:color var(--t)}
.site-foot a:hover{color:#fff}
.foot-brand img{height:42px;margin-bottom:1rem}
.foot-brand p{font-size:.9rem;color:#9396A0;max-width:34ch}
.socials{display:flex;gap:.7rem;margin-top:1.2rem;flex-wrap:wrap}
.socials a{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);border-radius:50%;color:#C4C7D0}
.socials a:hover{border-color:var(--or);color:#fff;background:rgba(176,141,87,.14)}
.socials svg{width:18px;height:18px}
.foot-bottom{margin-top:3rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:#7E818B}
.foot-bottom .tricolore{display:inline-flex;height:12px;border-radius:2px;overflow:hidden;vertical-align:middle;margin-left:.5em}
.foot-bottom .tricolore i{width:10px}
.foot-bottom .tricolore i:nth-child(1){background:#0A2472}
.foot-bottom .tricolore i:nth-child(2){background:#fff}
.foot-bottom .tricolore i:nth-child(3){background:#C8102E}

/* ---------- CTA band ---------- */
.cta-band{background:var(--rouge);color:#fff;border-radius:var(--radius);padding:clamp(34px,5vw,64px);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  background-image:linear-gradient(135deg,var(--rouge),var(--rouge-fonce))}
.cta-band h2{color:#fff;max-width:18ch}
.cta-band p{color:rgba(255,255,255,.9);margin-top:.5rem;max-width:46ch}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:32px}
  .split--rev .media{order:0}
}
@media(max-width:680px){
  .nav{position:fixed;inset:74px 0 auto 0;background:#fff;flex-direction:column;gap:0;
    border-bottom:1px solid var(--gris-100);padding:.5rem var(--pad) 1.4rem;
    transform:translateY(-130%);transition:transform var(--t);box-shadow:var(--shadow)}
  .nav.open{transform:none}
  .nav a{width:100%;padding:.9rem 0;border-bottom:1px solid var(--gris-100)}
  .nav a.cta{margin-top:.8rem;text-align:center}
  .burger{display:grid;place-items:center}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .cta-band{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}.reveal{opacity:1;transform:none}}

/* prose (corps markdown) */
.prose p{color:var(--gris-700);font-size:1.05rem;line-height:1.7;margin-top:1rem;max-width:60ch}
.prose p:first-child{margin-top:0}
.prose em{color:var(--gris-500);font-size:.92rem}

/* formulaire contact */
.cform{background:#fff;border:1px solid var(--gris-100);border-radius:var(--radius);padding:clamp(22px,3vw,36px);box-shadow:var(--shadow-soft)}
.cform label{display:block;font-size:.82rem;font-weight:600;color:var(--bleu);margin-bottom:1rem;letter-spacing:.02em}
.cform .frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.cform input,.cform select,.cform textarea{
  width:100%;margin-top:.4rem;padding:.8em .9em;border:1px solid var(--bord);border-radius:var(--radius);
  font-family:var(--font);font-size:.95rem;color:var(--anthracite);background:var(--ivoire);font-weight:400;transition:border-color var(--t),box-shadow var(--t)}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:0;border-color:var(--or);box-shadow:0 0 0 3px rgba(176,141,87,.15);background:#fff}
.cform textarea{resize:vertical}
@media(max-width:560px){.cform .frow{grid-template-columns:1fr}}

/* Produits & services */
.product{background:#fff;border:1px solid var(--gris-100);border-radius:var(--radius);padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;height:100%;transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.product:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--bord)}
.product .ptag{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rouge);font-weight:600;margin-bottom:.7rem}
.product h3{color:var(--bleu);font-size:1.3rem}
.product p{color:var(--gris-700);font-size:.95rem;margin:.6rem 0 1.2rem;flex-grow:1}
.product .pgo{font-weight:600;color:var(--bleu);display:inline-flex;gap:.5em;align-items:center}
.product .pgo .arw{transition:transform var(--t)}
.product:hover .pgo .arw{transform:translateX(5px)}
.product--shop{background:linear-gradient(160deg,#0A2472,#14163a);border:0}
.product--shop .ptag{color:var(--or-clair)}
.product--shop h3{color:#fff}
.product--shop p{color:rgba(255,255,255,.86)}
.product--shop .pgo{color:#fff}

/* Galerie écurie */
.fleet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.2vw,26px)}
.fleet figure{margin:0;border:1px solid var(--gris-100);border-radius:var(--radius);overflow:hidden;background:#fff;transition:transform var(--t),box-shadow var(--t)}
.fleet figure:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.fleet img{width:100%;aspect-ratio:1200/860;object-fit:cover;display:block}
.fleet figcaption{padding:.85rem 1.1rem;font-weight:600;color:var(--bleu);font-size:.98rem}
@media(max-width:680px){.fleet{grid-template-columns:1fr}}