/* ==============================
   LOG BASE Groupe – Design System (HTML+CSS only)
   Palette (alignée au logo) :
   - Navy: #0d1b2a  - Teal: #1aa6b7
   - Red:  #ff5252  - Yellow: #ffcc00  - Orange: #fca311
   ============================== */

:root{
  --navy:#0d1b2a;
  --teal:#1aa6b7;
  --red:#ff5252;
  --yellow:#ffcc00;
  --orange:#fca311;
  --ink:#222;
  --muted:#5a6a7d;
  --bg:#f7f9fc;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  line-height:1.5}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* Layout utils */
.container{width:90%;max-width:1120px;margin:0 auto}

/* Header */
.site-header{position:sticky;top:0;z-index:1000;
  background:linear-gradient(180deg,var(--navy),#16314e);color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.18)}
.header-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.logo{height:60px;width:auto;border-radius:8px;background:rgba(255,255,255,.06)}
.site-title{font-size:1.5rem;font-weight:800;letter-spacing:.2px}
.main-nav a{color:#fff;text-decoration:none;margin-left:16px;padding:8px 2px;border-bottom:2px solid transparent;transition:border-color .2s,opacity .2s}
.main-nav a:hover{opacity:.9;border-bottom-color:rgba(255,255,255,.4)}
.main-nav a.active,[aria-current="page"]{border-bottom-color:#cfe0ff;font-weight:700}
@media (max-width:820px){.header-bar{flex-direction:column;align-items:flex-start}
  .main-nav a{display:inline-block;margin:6px 12px 0 0}}

/* Footer */
footer{background:var(--navy);color:#e9f0fa;margin-top:44px}
footer .container{padding:22px 0}
footer a{color:#cfe0ff;text-decoration:underline}

/* Hero (sobre + lumineux) */
.hero{padding:56px 0;background:linear-gradient(120deg,#ffffff,#f2f6ff);border-radius:12px;margin-top:20px;
  box-shadow:0 8px 22px rgba(0,0,0,.06)}
.hero h1,.hero h2{color:var(--navy);margin:0 0 10px}
.hero .lead{font-size:1.08rem;color:#3c4a5d;max-width:70ch}

/* Buttons (HTML-only) */
.btn{display:inline-block;padding:12px 18px;border-radius:12px;background:var(--teal);color:#fff;text-decoration:none;
  transition:transform .15s,background .2s}
.btn:hover{background:#158b99;transform:translateY(-1px)}
.btn.ghost{background:transparent;border:1px solid rgba(0,0,0,.15);color:var(--navy)}
.btn.ghost:hover{background:#eef6f7}

/* Carreaux (cartes) */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:28px 0}
.card{background:#fff;border-radius:14px;padding:20px;box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition:transform .18s,box-shadow .2s;border-top:5px solid var(--yellow)}
.card:nth-child(2){border-top-color:var(--red)}
.card:nth-child(3){border-top-color:var(--teal)}
.card:nth-child(4){border-top-color:var(--orange)}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(0,0,0,.09)}
.card h3{color:var(--navy);margin:6px 0}
.card p{margin:0 0 8px;color:#47576b}
.card .more{font-weight:700;color:var(--navy);text-decoration:none}
.card .more:hover{text-decoration:underline}

/* Bandes de chiffres (stats) */
.stats{background:#f1f5fb;border-radius:12px;margin-top:24px;
  box-shadow:0 8px 22px rgba(0,0,0,.05)}
.stats .grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));padding:20px}
.stat{background:#fff;border-radius:12px;padding:18px;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.05)}
.stat .n{font-size:1.7rem;font-weight:800;color:var(--navy);line-height:1}
.stat .l{margin-top:6px;color:var(--muted)}

/* Split (texte + visuel décoratif) */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center;margin:36px 0}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.visual{height:260px;border-radius:14px;box-shadow:0 10px 28px rgba(0,0,0,.08);
  background:
    radial-gradient(600px 220px at 15% -10%, rgba(255,204,0,.25), transparent 60%),
    radial-gradient(600px 220px at 85% -10%, rgba(255,82,82,.22), transparent 60%),
    linear-gradient(135deg,#f8fafc,#eef4ff)}

/* Process (étapes en carreaux) */
.process h2{text-align:center;color:var(--navy);margin-bottom:10px}
.steps{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.step{background:#fff;border-radius:12px;padding:18px;box-shadow:0 8px 20px rgba(0,0,0,.06);position:relative}
.badge{position:absolute;top:-12px;left:-12px;background:var(--teal);color:#fff;font-weight:800;border-radius:999px;width:36px;height:36px;
  display:grid;place-items:center;box-shadow:0 6px 14px rgba(0,0,0,.15)}

/* Engagements (kpis) */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin:18px 0}
.kpi{background:#fff;border-radius:12px;padding:18px;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.kpi h3{margin:0 0 6px;color:var(--navy)}
.kpi p{margin:0;color:#4c5c6f}

/* À propos (valeurs & équipe) */
.values,.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:18px 0}
.value,.member{background:#fff;border-radius:12px;padding:18px;box-shadow:0 6px 18px rgba(0,0,0,.06);text-align:center}
.value img,.member img{width:100%;height:160px;object-fit:cover;border-radius:10px;margin-bottom:8px}
.member h4{margin:8px 0 4px;color:var(--navy)}
.member .role{margin:0;color:#5a6a7d}

/* Contact (HTML only) */
.grid-contact{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:24px 0}
@media (max-width:880px){.grid-contact{grid-template-columns:1fr}}
.box{background:#fff;border-radius:12px;padding:20px;box-shadow:0 6px 18px rgba(0,0,0,.06)}
form.grid{display:grid;gap:14px}
input,textarea{padding:12px;border:1px solid #d5dde8;border-radius:10px;font:inherit;width:100%}
button.btn{border:0;cursor:pointer}

/* CTA band (dégradé logo) */
.cta{background:linear-gradient(90deg,var(--red),var(--yellow));color:#1f2429;border-radius:12px}
.cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px}
.cta .btn.light{background:#fff;color:var(--navy)}
@media (max-width:820px){.cta .wrap{flex-direction:column;text-align:center}}

/* ====== Contact – Nos coordonnées (plus esthétique) ====== */
.contact-info h3{
  margin-top: 0;
  color: var(--navy);
}

.contact-cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 10px;
}

.contact-card{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  border-left: 4px solid var(--teal);
  transition: transform .15s ease, box-shadow .2s ease;
}
.contact-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0,0,0,.09);
}
.contact-card:nth-child(1){ border-left-color: var(--yellow); }
.contact-card:nth-child(2){ border-left-color: var(--red); }
.contact-card:nth-child(3){ border-left-color: var(--teal); }
.contact-card:nth-child(4){ border-left-color: var(--orange); }

.contact-icon{
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: 20px;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.7), transparent),
    linear-gradient(135deg, #fff7cc, #ffeab0);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05), 0 4px 10px rgba(0,0,0,.06);
}
.contact-card:nth-child(2) .contact-icon{
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.7), transparent),
    linear-gradient(135deg, #ffd1d1, #ffc2c2);
}
.contact-card:nth-child(3) .contact-icon{
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.7), transparent),
    linear-gradient(135deg, #d3f3f7, #c6edf2);
}
.contact-card:nth-child(4) .contact-icon{
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.7), transparent),
    linear-gradient(135deg, #ffe3b3, #ffd48c);
}

.contact-body h4{
  margin: 2px 0 4px;
  color: var(--navy);
}
.contact-body p{
  margin: 0;
  color: #4b5a6e;
}
.contact-body a{
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Encadré d’appel à l’action sous les cartes */
.contact-highlight{
  margin-top: 14px;
  background: linear-gradient(90deg, var(--red), var(--yellow));
  color: #1f2429;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.contact-highlight .btn.small{
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff;
  color: var(--navy);
}
@media (max-width: 640px){
  .contact-highlight{ flex-direction: column; text-align: center; }
}
/* ===== À PROPOS – HERO ===== */
.about-hero{
  margin-top: 22px;
  padding: 38px 24px;
  border-radius: 14px;
  background:
    radial-gradient(800px 260px at 15% -10%, rgba(255,204,0,.24), transparent 60%),
    radial-gradient(800px 260px at 85% -10%, rgba(255,82,82,.18), transparent 60%),
    linear-gradient(135deg,#ffffff,#f2f6ff);
  box-shadow: 0 10px 26px rgba(0,0,0,.07);
  text-align: center;
}
.about-hero h1{ color: var(--navy); margin: 0 0 8px; }
.about-hero .lead{ max-width: 70ch; margin: 0 auto 12px; color:#3b4a60; }
.pills{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.pill{
  display:inline-block; padding:8px 12px; border-radius:999px; font-weight:700;
  color:#1f2429; background:#fff; box-shadow: 0 6px 16px rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.06);
}
.pill-yellow{ background: linear-gradient(135deg,#fff6c2,#ffea8c); }
.pill-red{ background: linear-gradient(135deg,#ffd7d7,#ffc3c3); }
.pill-teal{ background: linear-gradient(135deg,#d6f4f7,#c9edf2); }
.pill-orange{ background: linear-gradient(135deg,#ffe3b3,#ffd48d); }

/* ===== À PROPOS – INTRO ===== */
.about-intro .about-visual{
  min-height: 280px;
  background:
    radial-gradient(600px 220px at 20% -10%, rgba(255,204,0,.25), transparent 60%),
    radial-gradient(600px 220px at 80% -10%, rgba(26,166,183,.22), transparent 60%),
    linear-gradient(135deg,#f8fafc,#eef4ff);
}
.quote-card{
  margin-top: 14px; background:#fff; border-radius:12px; padding:16px;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  border-left:4px solid var(--teal);
}
.quote-card p{ margin:0; font-weight:600; color:#2e3a4d; }
.quote-card span{ display:block; margin-top:6px; color:#5a6a7d; }

/* ===== TIMELINE ===== */
.timeline h2{ color: var(--navy); text-align:left; }
.milestones{ position: relative; margin: 18px 0 6px; }
.milestone{ display:flex; gap:14px; position:relative; padding: 10px 0; }
.dot{
  flex:0 0 14px; height:14px; border-radius:999px; margin-top: 4px;
  background: var(--teal); box-shadow: 0 0 0 4px rgba(26,166,183,.18);
}
.milestone:nth-child(2) .dot{ background: var(--yellow); box-shadow: 0 0 0 4px rgba(255,204,0,.22); }
.milestone:nth-child(3) .dot{ background: var(--red); box-shadow: 0 0 0 4px rgba(255,82,82,.18); }
.ml-body h3{ margin:0 0 4px; color: var(--navy); }
.ml-body p{ margin:0; color:#4b5a6e; }
.milestones .line{
  position:absolute; left:6px; top:0; bottom:0; width:2px;
  background: linear-gradient(var(--teal), var(--yellow), var(--red));
  opacity:.25; pointer-events:none;
}

/* ===== PARTENAIRES ===== */
.partners h2{ color: var(--navy); }
.partners .logos{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px; margin-top: 10px;
}
.logo-tile{
  display:grid; place-items:center; height:72px; border-radius:12px; font-weight:800; letter-spacing:.4px;
  background:#fff; color:#2a3546; box-shadow:0 6px 18px rgba(0,0,0,.06);
  border-top:4px solid var(--yellow);
}
.logo-tile:nth-child(2){ border-top-color: var(--red); }
.logo-tile:nth-child(3){ border-top-color: var(--teal); }
.logo-tile:nth-child(4){ border-top-color: var(--orange); }

/* ===== FAQ (HTML pur) ===== */
.faq h2{ color: var(--navy); }
.faq details{
  background:#fff; border-radius:12px; padding:12px 14px; margin-top:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.faq summary{ cursor:pointer; font-weight:700; color:var(--navy); }
.faq p{ margin:8px 0 0; color:#4b5a6e; }
/* ===== Mission & Vision – section premium ===== */
.mission-vision{ position: relative; margin: 28px 0; }
.mission-vision::before{
  content:""; position:absolute; inset:-6px 0 -24px 0; z-index:-1;
  background:
    radial-gradient(800px 260px at 15% -10%, rgba(255,204,0,.16), transparent 60%),
    radial-gradient(800px 260px at 85% -10%, rgba(255,82,82,.10), transparent 60%);
}

.mv-cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.mv-card{
  background:#fff;
  border-radius:14px;
  padding:20px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  position:relative; overflow:hidden;
  transition:transform .18s ease, box-shadow .2s ease;
}
.mv-card:hover{ transform: translateY(-4px); box-shadow:0 16px 34px rgba(0,0,0,.10); }

.mv-mission{ border-top:6px solid var(--yellow); }
.mv-vision{ border-top:6px solid var(--teal); }

.mv-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.mv-ico{
  width:44px;height:44px;border-radius:999px;display:grid;place-items:center;font-size:20px;
  box-shadow: 0 8px 20px rgba(0,0,0,.08), inset 0 0 0 1px rgba(0,0,0,.06);
}
.mv-ico-yellow{ background: linear-gradient(135deg,#fff6c2,#ffea8c); }
.mv-ico-teal{ background: linear-gradient(135deg,#d6f4f7,#c9edf2); }

.mv-list{ margin:10px 0 0 18px; }
.mv-list li{ margin:6px 0; color:#405168; }

.mv-quote{
  margin-top:12px; padding:12px 14px; color:#2e3a4d;
  background:#f9fbff; border-left:4px solid var(--teal);
  border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,.05);
}

.mv-badges{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }

/* Pills déjà utilisées ailleurs mais on renforce ici si besoin */
.pill{
  display:inline-block; padding:8px 12px; border-radius:999px; font-weight:700;
  color:#1f2429; background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.06);
}
.pill-yellow{ background: linear-gradient(135deg,#fff6c2,#ffea8c); }
.pill-red{ background: linear-gradient(135deg,#ffd7d7,#ffc3c3); }
.pill-teal{ background: linear-gradient(135deg,#d6f4f7,#c9edf2); }
.pill-orange{ background: linear-gradient(135deg,#ffe3b3,#ffd48d); }
/* === Mission & Vision : centrage élégant === */
.mission-vision { margin: 28px 0; }

/* Centrer le groupe de cartes dans la page */
.mission-vision .mv-cards{
  /* largeur contrôlée + centrage */
  max-width: 880px;
  margin-inline: auto;

  /* grille compacte et centrée */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 380px));
  justify-content: center;         /* centre la grille */
  gap: 20px;
}

/* Les cartes s’étirent uniformément dans leurs colonnes */
.mission-vision .mv-card{ justify-self: stretch; }

/* Headings centrés pour l’équilibre visuel */
.mission-vision .mv-head,
.mission-vision .mv-card h2{ text-align: center; }

/* Texte lisible, légèrement contenu */
.mission-vision .mv-card p,
.mission-vision .mv-list{
  max-width: 60ch;
  margin-inline: auto;             /* centre le bloc de texte */
  text-align: left;                /* lisibilité optimale */
}

/* Un petit souffle en mobile */
@media (max-width: 600px){
  .mission-vision .mv-cards{ max-width: 520px; gap: 16px; }
}
/* ===========================
   ENGAGEMENTS – Mise en page pro
   =========================== */

/* HERO plus imposant */
.eng-hero{
  text-align:center;
  padding: 64px 24px;
  margin-top: 22px;
}

/* Grille 4 piliers */
.eng-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin: 28px auto;
}
.eng-card{
  background:#fff;
  border-radius:16px;
  padding:22px;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  border-top:6px solid var(--yellow);
  transition: transform .18s ease, box-shadow .2s ease;
}
.eng-card:nth-child(2){ border-top-color: var(--red); }
.eng-card:nth-child(3){ border-top-color: var(--teal); }
.eng-card:nth-child(4){ border-top-color: var(--orange); }
.eng-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); }

.eng-card h3{ margin: 10px 0 6px; color: var(--navy); font-size: 1.25rem; }
.eng-card p{ margin: 0 0 10px; color: #47576b; }
.eng-bullets{ margin: 0; padding-left: 18px; color:#405168; }
.eng-bullets li{ margin: 6px 0; }

/* Icône ronde décorative */
.eng-icon{
  width: 56px; height: 56px; border-radius: 999px;
  display: grid; place-items: center; font-size: 22px; font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 8px 20px rgba(0,0,0,.10);
  margin-bottom: 6px;
}
.ico-yellow{ background: linear-gradient(135deg,#fff6c2,#ffea8c); color:#3a2d00; }
.ico-red{    background: linear-gradient(135deg,#ffd7d7,#ffc3c3); color:#5a1212; }
.ico-teal{   background: linear-gradient(135deg,#d6f4f7,#c9edf2); color:#0a4e57; }
.ico-orange{ background: linear-gradient(135deg,#ffe3b3,#ffd48d); color:#4a3000; }

/* Avantages (6 tuiles) */
.eng-advantages h2{ color: var(--navy); text-align: left; margin-bottom: 8px; }
.eng-adv-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 12px 0 6px;
}
.eng-adv{
  background:#fff; border-radius:12px; padding:16px;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  border-left:4px solid var(--teal);
  transition: transform .15s ease, box-shadow .2s ease;
}
.eng-adv:nth-child(2){ border-left-color: var(--red); }
.eng-adv:nth-child(3){ border-left-color: var(--yellow); }
.eng-adv:nth-child(4){ border-left-color: var(--orange); }
.eng-adv:nth-child(5){ border-left-color: var(--teal); }
.eng-adv:nth-child(6){ border-left-color: var(--red); }
.eng-adv:hover{ transform: translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.10); }

.adv-ico{ display:inline-grid; place-items:center; width:36px; height:36px; border-radius:999px;
  background:#f3f7ff; margin-bottom:6px; font-size:18px; }

/* Standards + KPI band */
.eng-standards{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  margin: 26px auto;
}
@media (max-width: 900px){ .eng-standards{ grid-template-columns: 1fr; } }

.eng-std-card{
  background:#fff; border-radius:14px; padding:18px;
  box-shadow:0 10px 26px rgba(0,0,0,.07); border-left:6px solid var(--teal);
}
.eng-std-card h2{ margin: 0 0 8px; color: var(--navy); }
.eng-checklist{ margin: 0; padding-left: 22px; }
.eng-checklist li{ margin: 8px 0; color:#405168; position: relative; }
.eng-checklist li::marker{ content: "✓ "; color: var(--teal); font-weight: 800; }

/* KPIs à droite */
.eng-kpi{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap: 16px;
}
.kpi-box{
  background:#fff; border-radius:12px; padding:16px; text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.06); border-top:4px solid var(--yellow);
}
.kpi-box:nth-child(2){ border-top-color: var(--red); }
.kpi-box:nth-child(3){ border-top-color: var(--teal); }
.kpi-n{ display:block; font-size:1.8rem; font-weight:800; color: var(--navy); line-height: 1; }
.kpi-l{ display:block; margin-top:6px; color:#556; }
/* ===========================
   SERVICES – page longue & premium
   =========================== */

/* HERO services (centré + pills) */
.svc-hero{ text-align:center; padding:64px 24px; margin-top:22px; }
.svc-pills{ margin-top:10px; }

/* 4 Domaines (carreaux) */
.svc-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:22px; margin:28px 0;
}
.svc-card{
  background:#fff; border-radius:16px; padding:22px;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  border-top:6px solid var(--yellow);
  transition: transform .18s ease, box-shadow .2s ease;
}
.svc-card:nth-child(2){ border-top-color: var(--red); }
.svc-card:nth-child(3){ border-top-color: var(--teal); }
.svc-card:nth-child(4){ border-top-color: var(--orange); }
.svc-card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.10); }
.svc-card h3{ margin:8px 0 6px; color: var(--navy); }
.svc-card p{ margin:0 0 10px; color:#47576b; }
.svc-bullets{ margin:0; padding-left:18px; color:#405168; }
.svc-bullets li{ margin:6px 0; }

/* Icônes rondes décoratives */
.svc-ico{
  width:56px; height:56px; border-radius:999px;
  display:grid; place-items:center; font-size:22px; font-weight:800;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 8px 20px rgba(0,0,0,.10);
  margin-bottom:6px;
}
.ico-yellow{ background: linear-gradient(135deg,#fff6c2,#ffea8c); color:#3a2d00; }
.ico-red{    background: linear-gradient(135deg,#ffd7d7,#ffc3c3); color:#5a1212; }
.ico-teal{   background: linear-gradient(135deg,#d6f4f7,#c9edf2); color:#0a4e57; }
.ico-orange{ background: linear-gradient(135deg,#ffe3b3,#ffd48d); color:#4a3000; }

/* Accordéons de prestations (HTML <details>) */
.svc-details h2{ color: var(--navy); }
.svc-acc{
  background:#fff; border-radius:14px; margin-top:12px;
  box-shadow:0 8px 22px rgba(0,0,0,.06); overflow:hidden;
  border-left:6px solid var(--teal);
}
.svc-acc summary{
  cursor:pointer; padding:14px 16px; font-weight:700; color:var(--navy);
  list-style:none; outline:none;
}
.svc-acc summary::-webkit-details-marker{ display:none; }
.svc-acc[open] summary{ background:#f3f7fb; }
.svc-acc-body{ padding:14px 16px 16px; }
.svc-acc-grid{
  display:grid; gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
}
.svc-acc-grid h4{ margin:0 0 6px; color:var(--navy); }
.svc-acc-grid ul{ margin:0; padding-left:18px; color:#42516a; }
.svc-acc-grid li{ margin:6px 0; }

/* Méthode d’intervention (étapes) */
.svc-process h2{ color: var(--navy); text-align:center; margin-bottom:10px; }
.svc-steps{
  display:grid; gap:18px; margin-top:8px;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
}
.s-step{
  background:#fff; border-radius:12px; padding:18px;
  box-shadow:0 8px 20px rgba(0,0,0,.06); position:relative;
}
.s-badge{
  position:absolute; top:-12px; left:-12px;
  background:var(--teal); color:#fff; font-weight:800;
  border-radius:999px; width:36px; height:36px; display:grid; place-items:center;
  box-shadow:0 6px 14px rgba(0,0,0,.15);
}

/* Secteurs desservis (tuiles) */
.svc-industries h2{ color: var(--navy); }
.ind-grid{
  display:grid; gap:14px; margin-top:8px;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
}
.ind{
  background:#fff; border-radius:12px; padding:14px;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  border-left:4px solid var(--yellow);
  display:flex; align-items:center; gap:10px; color:#2c3a4f;
}
.ind:nth-child(2){ border-left-color: var(--red); }
.ind:nth-child(3){ border-left-color: var(--teal); }
.ind:nth-child(4){ border-left-color: var(--orange); }
.ind:nth-child(5){ border-left-color: var(--teal); }
.ind:nth-child(6){ border-left-color: var(--red); }
.ind span{ font-size:20px; display:inline-block; width:28px; text-align:center }

/* Modes d’intervention */
.svc-modes h2{ color: var(--navy); }
.modes-grid{
  display:grid; gap:16px; margin-top:8px;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
}
.mode{
  background:#fff; border-radius:12px; padding:16px;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  border-top:4px solid var(--teal);
}
.mode:nth-child(2){ border-top-color: var(--red); }
.mode:nth-child(3){ border-top-color: var(--yellow); }
.mode:nth-child(4){ border-top-color: var(--orange); }

/* FAQ Services */
.svc-faq h2{ color: var(--navy); }
.svc-faq details{
  background:#fff; border-radius:12px; padding:12px 14px; margin-top:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.svc-faq summary{ cursor:pointer; font-weight:700; color:var(--navy); }
.svc-faq p{ margin:8px 0 0; color:#4b5a6e; }