/* ===================================================================
   AFRINOVA — Feuille de style
   Couleurs issues du logo : bleu marine + orange
   =================================================================== */

:root{
  --navy:#1B2A63;
  --navy-deep:#121E47;
  --navy-soft:#243375;
  --orange:#F47920;
  --orange-soft:#ff9244;
  --ink:#16203f;
  --muted:#5b647d;
  --bg:#ffffff;
  --bg-alt:#f5f7fc;
  --line:#e6eaf4;
  --white:#ffffff;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 18px 50px -20px rgba(27,42,99,.28);
  --shadow-sm:0 8px 24px -12px rgba(27,42,99,.25);
  --max:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Barres de défilement ----------
   Firefox utilise scrollbar-width/-color ; les navigateurs WebKit
   (Chrome, Edge, Safari) utilisent les pseudo-éléments ci-dessous.
   La bordure transparente + background-clip donnent un pouce affiné
   avec de l'air autour, sans réduire la zone cliquable.               */
html{scrollbar-width:thin;scrollbar-color:#c3ccdf transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background-color:transparent}
::-webkit-scrollbar-thumb{
  background-color:#c3ccdf;
  border:3px solid transparent;
  background-clip:content-box;
  border-radius:999px;
}
::-webkit-scrollbar-thumb:hover{background-color:var(--navy-soft)}
::-webkit-scrollbar-thumb:active{background-color:var(--navy)}
::-webkit-scrollbar-corner{background-color:transparent}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* « clip » plutôt que « hidden » : même effet visuel, mais sans créer de
     conteneur de défilement — sinon position:sticky cesse de fonctionner
     pour ses descendants (barre de filtres de la page Location). */
  overflow-x:hidden;
  overflow-x:clip;
}
h1,h2,h3,h4{font-family:'Poppins',sans-serif;line-height:1.15;color:var(--navy)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}
.accent{color:var(--orange)}
.grad{
  background:linear-gradient(100deg,var(--orange),var(--orange-soft));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:.95rem;
  padding:.85rem 1.6rem;border-radius:999px;cursor:pointer;border:2px solid transparent;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 12px 26px -10px rgba(244,121,32,.7)}
.btn-primary:hover{background:#e96c12;transform:translateY(-3px);box-shadow:0 18px 34px -10px rgba(244,121,32,.75)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--navy);transform:translateY(-3px)}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.btn-sm{padding:.6rem 1.1rem;font-size:.88rem}
.btn-block{width:100%}

.kicker{
  display:inline-block;font-family:'Poppins',sans-serif;font-weight:600;
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);
  margin-bottom:.7rem;
}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);
  backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:.3s var(--ease);
}
.site-header.scrolled{border-color:var(--line);box-shadow:0 6px 24px -16px rgba(27,42,99,.4)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;align-items:center;gap:.6rem}
.brand-logo{width:42px;height:42px;border-radius:10px;object-fit:cover}
.brand-name{font-family:'Poppins',sans-serif;font-weight:800;font-size:1.3rem;letter-spacing:.02em;color:var(--navy)}
.nav{display:flex;align-items:center;gap:1.8rem}
.nav a{font-weight:600;font-size:.95rem;color:var(--ink);position:relative;transition:color .2s}
.nav a:not(.nav-cta)::after{
  content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;
  background:var(--orange);transition:width .25s var(--ease);
}
.nav a:not(.nav-cta):hover{color:var(--navy)}
.nav a:not(.nav-cta):hover::after{width:100%}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:26px;height:3px;background:var(--navy);border-radius:3px;transition:.3s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:72px 0 0}
.hero-bg{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(900px 500px at 85% -5%,rgba(244,121,32,.12),transparent 60%),
    radial-gradient(700px 500px at 0% 20%,rgba(27,42,99,.10),transparent 55%),
    linear-gradient(180deg,#fbfcff,#f5f7fc);
}
.hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding-bottom:60px}
.eyebrow{
  display:inline-block;background:rgba(27,42,99,.07);color:var(--navy);
  font-weight:600;font-size:.85rem;padding:.4rem 1rem;border-radius:999px;margin-bottom:1.2rem;
}
.hero h1{font-size:clamp(2.3rem,5vw,3.7rem);font-weight:800;margin-bottom:1.2rem}
.lead{font-size:1.1rem;color:var(--muted);max-width:560px;margin-bottom:1.8rem}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2.4rem}
.hero-badges{display:flex;gap:2.2rem;flex-wrap:wrap}
.hero-badges div{display:flex;flex-direction:column}
.hero-badges strong{font-family:'Poppins',sans-serif;font-size:1.8rem;color:var(--navy);line-height:1}
.hero-badges span{font-size:.85rem;color:var(--muted)}

.hero-card{position:relative;display:flex;align-items:center;justify-content:center}
/* Photo d'équipe : pas de cadre blanc, l'image occupe toute la carte.
   Les dimensions sont aussi posées dans le HTML pour réserver la place
   avant le chargement et éviter que le texte ne saute. */
.hero-photo{
  /* height:auto est indispensable : sans lui, l'attribut height du HTML
     fixerait la hauteur à 1120px et écraserait aspect-ratio. */
  width:min(400px,100%);height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 40%;
  border-radius:28px;box-shadow:var(--shadow);position:relative;z-index:2;
  animation:floaty 7s ease-in-out infinite;
}
.hero-card-glow{
  position:absolute;width:75%;height:75%;border-radius:50%;
  background:radial-gradient(circle,rgba(244,121,32,.35),transparent 70%);
  filter:blur(40px);z-index:1;
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ---------- Marquee ---------- */
.marquee{background:var(--navy);overflow:hidden;padding:14px 0}
.marquee-track{display:flex;gap:1.5rem;white-space:nowrap;width:max-content;animation:scroll 28s linear infinite}
.marquee-track span{font-family:'Poppins',sans-serif;font-weight:600;color:#fff;opacity:.92;font-size:1rem;letter-spacing:.03em}
.marquee-track span:nth-child(even){color:var(--orange-soft)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
.section{padding:96px 0}
.section-alt{background:var(--bg-alt)}
.section-head{max-width:640px;margin:0 auto 56px;text-align:center}
.section-head h2{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:800;margin-bottom:1rem}
.section-head p{color:var(--muted);font-size:1.05rem}

/* ---------- Services ---------- */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.service-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px;position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;
}
.service-card::before{
  content:"";position:absolute;left:0;top:0;height:4px;width:100%;
  background:var(--c,var(--orange));transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.service-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:transparent}
.service-card:hover::before{transform:scaleX(1)}
.service-icon{
  width:58px;height:58px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px;
  color:var(--c,var(--navy));background:color-mix(in srgb,var(--c,var(--navy)) 12%,#fff);
}
.service-icon svg{width:30px;height:30px}
.service-icon.photo{padding:0;overflow:hidden;background:none}
.service-icon.photo img{width:100%;height:100%;object-fit:cover;border-radius:16px}
.service-icon .ic-letter{font-family:'Poppins',sans-serif;font-weight:800;font-size:1.7rem;color:var(--c,var(--navy))}
.service-card h3{font-size:1.25rem;margin-bottom:.6rem}
.service-card p{color:var(--muted);font-size:.95rem;margin-bottom:1rem}
.service-card ul li{
  font-size:.88rem;color:var(--ink);padding-left:1.3rem;position:relative;margin-bottom:.3rem;font-weight:500;
}
.service-card ul li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--c,var(--orange))}

.cta-card{
  background:linear-gradient(150deg,var(--navy),var(--navy-deep));
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;border:none;
}
.cta-card::before{display:none}
.cta-card h3{color:#fff}
.cta-card p{color:rgba(255,255,255,.8)}
.cta-card:hover{transform:translateY(-8px)}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
.about-visual{position:relative;display:flex;justify-content:center}
.about-emblem{
  width:min(380px,100%);aspect-ratio:1;border-radius:30px;overflow:hidden;
  background:#fff;box-shadow:var(--shadow);display:grid;place-items:center;padding:24px;
}
.about-emblem img{border-radius:18px}
.float-tag{
  position:absolute;background:#fff;padding:.6rem 1rem;border-radius:14px;
  font-weight:600;font-size:.9rem;color:var(--navy);box-shadow:var(--shadow-sm);
  animation:floaty 5s ease-in-out infinite;
}
.tag-1{top:6%;left:-4%;animation-delay:.2s}
.tag-2{bottom:14%;right:-6%;animation-delay:1s}
.tag-3{bottom:-4%;left:18%;animation-delay:1.6s}
.about-text h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin-bottom:1.2rem}
.about-text>p{color:var(--muted);font-size:1.05rem;margin-bottom:2rem;max-width:560px}
.values{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.value{padding-left:1.1rem;border-left:3px solid var(--orange)}
.value h4{font-size:1.05rem;margin-bottom:.3rem}
.value p{color:var(--muted);font-size:.92rem}

/* ---------- Process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.step{position:relative;padding:34px 26px;border-radius:var(--radius);background:var(--bg-alt);transition:transform .35s var(--ease),background .35s}
.step:hover{transform:translateY(-8px);background:#fff;box-shadow:var(--shadow)}
.step-num{font-family:'Poppins',sans-serif;font-weight:800;font-size:2.4rem;color:var(--orange);opacity:.45;display:block;margin-bottom:.4rem}
.step h3{font-size:1.2rem;margin-bottom:.5rem}
.step p{color:var(--muted);font-size:.92rem}

/* ---------- Stats ---------- */
.stats{background:linear-gradient(135deg,var(--navy),var(--navy-deep));padding:70px 0;position:relative;overflow:hidden}
.stats::after{content:"";position:absolute;top:-40%;right:-5%;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(244,121,32,.3),transparent 70%);filter:blur(30px)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;position:relative;z-index:2}
.stat{display:flex;flex-direction:column;align-items:center}
.stat-num,.stat-suffix{font-family:'Poppins',sans-serif;font-weight:800;font-size:3rem;color:#fff;line-height:1}
.stat-suffix{color:var(--orange-soft)}
.stat{flex-direction:row;flex-wrap:wrap;justify-content:center}
.stat p{width:100%;color:rgba(255,255,255,.75);font-size:.95rem;margin-top:.4rem}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.contact-info h2{font-size:clamp(1.8rem,3.4vw,2.5rem);margin-bottom:1rem}
.contact-info>p{color:var(--muted);margin-bottom:2rem}
.contact-list{display:flex;flex-direction:column;gap:1.1rem;margin-bottom:2rem}
.contact-list li{display:flex;gap:1rem;align-items:center}
.ci-icon{width:48px;height:48px;border-radius:14px;background:var(--bg-alt);display:grid;place-items:center;font-size:1.3rem;flex-shrink:0}
.contact-list strong{display:block;font-family:'Poppins',sans-serif;color:var(--navy);font-size:.95rem}
.contact-list span,.contact-list a{color:var(--muted);font-size:.95rem}
.contact-list a{display:block;line-height:1.45}
.contact-list a:hover{color:var(--orange)}
.hours{background:var(--bg-alt);border-radius:var(--radius-sm);padding:1rem 1.2rem;display:flex;flex-direction:column}
.hours strong{font-family:'Poppins',sans-serif;color:var(--navy)}
.hours span{color:var(--muted);font-size:.95rem}

.contact-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow-sm)}
.field{display:flex;flex-direction:column;margin-bottom:1.1rem}
.field label{font-weight:600;font-size:.88rem;color:var(--navy);margin-bottom:.4rem}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:.95rem;padding:.8rem 1rem;border:1.5px solid var(--line);
  border-radius:var(--radius-sm);background:#fbfcff;color:var(--ink);transition:border-color .2s,box-shadow .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(244,121,32,.12)
}
.field textarea{resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-note{margin-top:1rem;text-align:center;color:#1AAA5E;font-weight:600}
.form-note .meta-ico{vertical-align:-3px;margin-right:.15rem}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-deep);color:rgba(255,255,255,.8);padding:64px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer-brand .brand-name{color:#fff}
.footer-brand p{margin-top:1rem;font-size:.95rem;color:rgba(255,255,255,.65)}
.footer-col h4{color:#fff;font-size:1rem;margin-bottom:1rem}
/* Une adresse e-mail est un mot insécable : sans cela elle impose sa largeur
   à la colonne de grille et fait déborder la page sur un petit téléphone. */
.footer-col a,.footer-brand p{overflow-wrap:anywhere}
.footer-col a{display:block;color:rgba(255,255,255,.7);font-size:.93rem;padding:.3rem 0;transition:color .2s,padding-left .2s}
.footer-col a:hover{color:var(--orange-soft);padding-left:5px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;flex-wrap:wrap;gap:1rem}
.footer-bottom p{font-size:.9rem;color:rgba(255,255,255,.6)}
.socials{display:flex;gap:1.4rem}
.socials a{font-size:.9rem;color:rgba(255,255,255,.7)}
.socials a:hover{color:var(--orange-soft)}

/* ---------- To top ---------- */
.to-top{
  position:fixed;left:24px;bottom:24px;width:48px;height:48px;border-radius:50%;
  background:var(--navy);color:#fff;display:grid;place-items:center;font-size:1.3rem;
  box-shadow:0 12px 26px -10px rgba(27,42,99,.6);opacity:0;visibility:hidden;
  transform:translateY(12px);transition:.3s var(--ease);z-index:55;
}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:#e96c12;transform:translateY(-3px)}

/* ---------- Réalisations ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:40px}
.filter-btn{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:.9rem;
  padding:.55rem 1.2rem;border-radius:999px;border:1.5px solid var(--line);
  background:#fff;color:var(--muted);cursor:pointer;transition:.25s var(--ease);
}
.filter-btn:hover{border-color:var(--navy);color:var(--navy)}
.filter-btn.active{background:var(--navy);border-color:var(--navy);color:#fff}

.work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.work-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),opacity .35s,border-color .35s;
}
.work-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:transparent}
.work-card.hide{display:none}
.work-cover{
  position:relative;aspect-ratio:16/11;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(120px 80px at 70% 20%,rgba(255,255,255,.25),transparent 60%),
    linear-gradient(145deg,var(--c,var(--navy)),color-mix(in srgb,var(--c,var(--navy)) 60%,#000));
}
.work-emoji{display:grid;place-items:center;color:#fff;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));transition:transform .4s var(--ease)}
.work-emoji svg{width:56px;height:56px}
.work-card:hover .work-emoji{transform:scale(1.12) rotate(-4deg)}
.work-badge{
  position:absolute;top:12px;left:12px;background:rgba(255,255,255,.92);color:var(--navy);
  font-size:.72rem;font-weight:700;letter-spacing:.02em;padding:.3rem .7rem;border-radius:999px;
}
.work-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.work-body h3{font-size:1.1rem;margin-bottom:.5rem}
.work-body p{color:var(--muted);font-size:.9rem;margin-bottom:1rem;flex:1}
.work-meta{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;color:var(--navy);font-weight:600;border-top:1px solid var(--line);padding-top:.8rem}
/* ---------- Icônes en ligne (remplacent les anciens emojis) ---------- */
.work-meta span{display:inline-flex;align-items:center;gap:.35rem}
.meta-ico{width:15px;height:15px;flex:0 0 auto;stroke-width:1.9}
.tag-ico{width:16px;height:16px;flex:0 0 auto;margin-right:.4rem;vertical-align:-3px;color:var(--orange)}
.ci-icon svg{width:22px;height:22px;color:var(--navy)}
.work-emoji .svc-ico{width:46px;height:46px;color:#fff}
.work-meta span:last-child{color:var(--orange)}
.work-note{text-align:center;color:var(--muted);font-size:.88rem;margin-top:32px;font-style:italic}

/* ---------- Fondateur ---------- */
.founder-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.founder-media{position:relative;display:flex;justify-content:center}
.founder-avatar{
  width:min(320px,82%);aspect-ratio:4/5;border-radius:26px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--navy),var(--navy-deep));box-shadow:var(--shadow);
  position:relative;overflow:hidden;padding:7px;
}
.founder-avatar::before{
  content:"";position:absolute;inset:0;z-index:3;border-radius:26px;pointer-events:none;
  border:3px solid transparent;
  background:linear-gradient(150deg,var(--navy),var(--orange)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.founder-photo{width:100%;height:100%;object-fit:cover;object-position:50% 45%;border-radius:20px;display:block;position:relative;z-index:2}
.founder-monogram{font-family:'Poppins',sans-serif;font-weight:800;font-size:5rem;color:#fff;letter-spacing:.05em;position:relative;z-index:2}
.founder-content h2{font-size:clamp(1.9rem,3.6vw,2.6rem);margin-bottom:.2rem}
.founder-role{color:var(--orange);font-weight:600;margin-bottom:1.4rem}
.founder-quote{
  border-left:4px solid var(--orange);padding:.4rem 0 .4rem 1.4rem;margin-bottom:1.4rem;
  font-size:1.12rem;line-height:1.6;color:var(--navy);font-weight:500;font-style:italic;
}
.founder-content>p{color:var(--muted);margin-bottom:1.4rem;max-width:560px}
.founder-sign{
  font-family:'Poppins',sans-serif;font-weight:700;font-size:1.5rem;color:var(--navy);
  font-style:italic;transform:rotate(-3deg);display:inline-block;
}

/* ---------- Page Service (détail) ---------- */
.svc-hero{
  position:relative;overflow:hidden;padding:52px 0 62px;border-bottom:1px solid var(--line);
  background:
    radial-gradient(700px 380px at 88% -10%, color-mix(in srgb,var(--svc,var(--navy)) 20%, transparent), transparent 60%),
    linear-gradient(180deg,#fbfcff,#f5f7fc);
}
.crumb{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.85rem;color:var(--muted);margin-bottom:26px}
.crumb a{color:var(--muted);font-weight:600}
.crumb a:hover{color:var(--svc,var(--navy))}
.crumb span{opacity:.5}
.crumb em{color:var(--svc,var(--navy));font-style:normal;font-weight:700}
.svc-hero-grid{display:grid;grid-template-columns:1.5fr .5fr;gap:32px;align-items:center}
.svc-kicker{display:inline-block;font-family:'Poppins',sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--svc,var(--orange));margin-bottom:.6rem}
.svc-hero h1{font-size:clamp(2.1rem,4.6vw,3.2rem);font-weight:800;margin-bottom:.8rem}
.svc-tagline{font-size:1.15rem;color:var(--muted);max-width:560px;margin-bottom:1.8rem}
.svc-hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
.svc-hero-icon{
  justify-self:center;width:130px;height:130px;border-radius:30px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,var(--svc,var(--navy)),color-mix(in srgb,var(--svc,var(--navy)) 55%,#000));
  box-shadow:0 22px 44px -18px color-mix(in srgb,var(--svc,var(--navy)) 75%, transparent);
}
.svc-hero-icon svg{width:64px;height:64px}

.svc-intro-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:48px;align-items:start}
.svc-intro p{color:var(--muted);font-size:1.06rem;margin-bottom:1.1rem}
.svc-intro p:first-child{color:var(--ink);font-size:1.16rem}
.svc-aside{background:var(--bg-alt);border-radius:var(--radius);padding:26px;border:1px solid var(--line)}
.svc-stats{display:flex;flex-direction:column;gap:14px;margin-bottom:22px}
.svc-stat{display:flex;align-items:baseline;gap:.6rem;padding-bottom:12px;border-bottom:1px dashed var(--line)}
.svc-stat:last-child{border-bottom:none;padding-bottom:0}
.svc-stat strong{font-family:'Poppins',sans-serif;font-size:1.5rem;color:var(--svc,var(--navy));min-width:78px}
.svc-stat span{color:var(--muted);font-size:.92rem}
.svc-atouts h4{font-size:1rem;margin-bottom:.8rem}
.svc-atouts ul{display:flex;flex-direction:column;gap:.55rem}
.svc-atouts li{position:relative;padding-left:1.6rem;font-weight:500;font-size:.94rem;color:var(--ink)}
.svc-atouts li::before{content:"✓";position:absolute;left:0;top:0;color:var(--svc,var(--orange));font-weight:800}

.presta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.presta-card{display:flex;gap:.9rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:22px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.presta-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm);border-color:transparent}
.presta-check{flex-shrink:0;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--svc,var(--navy))}
.presta-card h3{font-size:1.05rem;margin-bottom:.35rem}
.presta-card p{color:var(--muted);font-size:.9rem}

.svc-cta{background:linear-gradient(135deg,var(--svc,var(--navy)),color-mix(in srgb,var(--svc,var(--navy)) 50%,#000));color:#fff;text-align:center;padding:70px 0}
.svc-cta h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:.7rem}
.svc-cta p{color:rgba(255,255,255,.85);max-width:560px;margin:0 auto 1.8rem}
.svc-cta-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost-light:hover{background:rgba(255,255,255,.12);transform:translateY(-3px)}

/* lien « voir le détail » sur les cartes service de l'accueil */
.service-link{position:relative;text-decoration:none;display:flex;flex-direction:column}
.service-more{display:inline-flex;align-items:center;gap:.35rem;margin-top:auto;padding-top:16px;font-weight:700;font-size:.9rem;color:var(--c,var(--navy));transition:gap .25s var(--ease)}
.service-more svg{width:16px;height:16px}
.service-link:hover .service-more{gap:.7rem}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-text{order:1}.hero-card{order:0}
  /* La carte passe au-dessus du texte : on bride la photo pour que le
     titre reste visible sans avoir à faire défiler. */
  .hero-photo{width:min(300px,74%)}
  .lead{margin-left:auto;margin-right:auto}
  .hero-actions,.hero-badges{justify-content:center}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .svc-hero-grid{grid-template-columns:1fr;gap:24px}
  .svc-hero-icon{justify-self:start}
  .svc-intro-grid{grid-template-columns:1fr;gap:32px}
  .presta-grid{grid-template-columns:repeat(2,1fr)}
  .founder-wrap{grid-template-columns:1fr;gap:48px;text-align:center}
  .founder-content>p,.founder-quote{margin-left:auto;margin-right:auto}
  .founder-quote{text-align:left}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:40px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  /* Colonne dépilée : l'emblème occupe toute la largeur, les étiquettes
     flottantes doivent rentrer dans le cadre au lieu de dépasser à droite. */
  .about-visual{max-width:380px;margin-inline:auto}
  .tag-1{left:0}
  .tag-2{right:0}
  .tag-3{left:8%}
}
/* Avec huit entrées, le menu horizontal réclame ~960px : en dessous on
   bascule sur le burger, bien avant le seuil mobile, sinon il déborde.
   Si vous retirez des entrées du menu, ce seuil peut redescendre. */
@media (max-width:1000px){
  .nav{
    position:fixed;inset:76px 0 auto 0;background:#fff;flex-direction:column;gap:0;
    padding:1rem 24px 1.5rem;border-bottom:1px solid var(--line);box-shadow:var(--shadow);
    transform:translateY(-130%);transition:transform .35s var(--ease);
  }
  .nav.open{transform:translateY(0)}
  .nav a{width:100%;padding:.9rem 0;border-bottom:1px solid var(--line)}
  .nav a:not(.nav-cta)::after{display:none}
  .nav-cta{margin-top:.8rem;justify-content:center}
  .burger{display:flex}
}
@media (max-width:680px){
  .services-grid,.steps,.values,.row,.work-grid,.presta-grid{grid-template-columns:1fr}
  .section{padding:70px 0}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-bottom{flex-direction:column;text-align:center}
}
/* Très petits écrans : deux colonnes de pied de page deviennent illisibles */
@media (max-width:420px){
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .stats-grid{grid-template-columns:1fr}
}