/* services.css — PROMETI */
:root{
  color-scheme  : light;
  --c-blue      : #0ea5e9;
  --c-blue-dark : #0284c7;
  --c-blue-light: #38bdf8;
  --c-navy      : #07101e;
  --ease        : cubic-bezier(.4,0,.2,1);
  --ease-out    : cubic-bezier(0,0,.2,1);
  --tr          : .26s;
  --shadow-sm   : 0 1px 4px rgba(15,23,42,0.06);
  --shadow-md   : 0 4px 20px rgba(15,23,42,0.08), 0 1px 6px rgba(15,23,42,0.04);
  --shadow-blue : 0 8px 32px rgba(14,165,233,0.14), 0 2px 8px rgba(15,23,42,0.06);
}

*{ box-sizing:border-box; }
button,input,textarea,select{ font-family:inherit; font-size:inherit; }
html{ margin:0; padding:0; height:100%; font-size:16px; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0; padding:0; height:100%; overflow-x:clip;
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  color:#1e293b;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.page-bg-gradient{
  position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1;
  background:#f7f9fc; pointer-events:none;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
.container{ width:min(1320px,94%); margin:0 auto; }
.accent{ color:#0284c7; }

/* ══ ANIMATIONS ══ */
@-webkit-keyframes lineShine{ 0%{left:-40%} 50%{left:120%} 100%{left:120%} }
@keyframes lineShine{ 0%{left:-40%} 50%{left:120%} 100%{left:120%} }
@-webkit-keyframes fadeUp{
  from{ opacity:0; -webkit-transform:translateY(28px); transform:translateY(28px); }
  to  { opacity:1; -webkit-transform:translateY(0); transform:translateY(0); }
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(28px); }
  to  { opacity:1; transform:translateY(0); }
}

/* ══════════════════════════════
   LIGNES DÉCORATIVES
══════════════════════════════ */
.hero-line,.section-line{ height:3px; border-radius:999px; position:relative; overflow:hidden; }
.hero-line{
  width:min(340px,52%); margin:20px auto 0;
  background:linear-gradient(90deg,transparent,#0ea5e9 30%,#3b82f6 50%,#0ea5e9 70%,transparent);
}
.hero-line::after{
  content:""; position:absolute; top:0; left:-40%; width:40%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(59,130,246,0.70),transparent);
  -webkit-animation:lineShine 3.5s ease-in-out infinite;
  animation:lineShine 3.5s ease-in-out infinite;
}
.section-line{
  width:min(180px,48%); margin:14px auto 0;
  background:linear-gradient(90deg,transparent,#0ea5e9 25%,#3b82f6 50%,#0ea5e9 75%,transparent);
}

/* ══════════════════════════════
   HERO
══════════════════════════════ */
.hero{
  padding-top:76px;
  display:flex; align-items:flex-start; justify-content:center;
  position:relative; overflow:hidden;
  background:transparent;
}
.hero::before,.hero::after{ display:none; }
.hero-deco{ display:none; }
.hero-inner{
  position:relative; z-index:1;
  width:min(1160px,94%); text-align:center;
  padding:44px 0 0;
}


.hero-title{
  margin:0;
  font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  font-size:clamp(26px,3.8vw,50px);
  font-weight:900; line-height:.92;
  letter-spacing:.04em; text-transform:uppercase; color:#0f172a;
  text-shadow:none;
}
@keyframes leadFadeUp{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:translateY(0); }
}
.hero-lead{
  margin:24px auto 0; max-width:none;
  line-height:1.74; font-weight:500;
  color:#7a93ab; font-size:17.5px;
  letter-spacing:.012em;
  white-space:nowrap;
  opacity:0;
  animation:leadFadeUp .55s .12s cubic-bezier(.22,1,.36,1) both;
}

/* ══════════════════════════════════════════════════════════════════════
   BAND INSTITUTIONNEL — Gestion Projet / Assurance Qualité / Performance
   Fond dark navy, colonnes typographiques, sans card box.
══════════════════════════════════════════════════════════════════════ */
.hero-metrics{
  margin:20px auto 0;
  max-width:1160px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  background:#28405c;
  border-radius:22px;
  border:1px solid rgba(14,165,233,0.18);
  overflow:hidden;
  position:relative;
  box-shadow:
    0 40px 96px rgba(2,10,22,0.30),
    0 0 0 1px rgba(14,165,233,0.08),
    inset 0 1px 0 rgba(14,165,233,0.14);
}

/* Ligne lumineuse en haut du band */
.hero-metrics::before{
  content:'';
  position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(14,165,233,0.42),transparent);
  pointer-events:none; z-index:1;
}

/* ── Colonne — pas de box, pas de border-radius individuel ── */
.metric-card{
  padding:36px 40px 34px;
  position:relative;
  background:transparent;
  border:none; border-radius:0; box-shadow:none;
  display:flex; flex-direction:column;
  transition:background .28s var(--ease);
}
.metric-card:hover{ background:transparent; }

/* Séparateur vertical entre colonnes */
.metric-card::before{ display:none; }
.metric-card::after{
  content:'';
  position:absolute; right:0; top:10%; bottom:10%; width:1px;
  background:linear-gradient(to bottom,
    transparent,
    rgba(14,165,233,0.22) 30%,
    rgba(14,165,233,0.22) 70%,
    transparent
  );
  pointer-events:none;
}
.metric-card:last-child::after{ display:none; }

/* ── En-tête de colonne : icône seule ── */
.metric-card-header{
  margin-bottom:28px;
}


/* Icône — épurée, sans container, sur fond sombre */
.metric-card-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px;
  background:rgba(14,165,233,0.10);
  border:1px solid rgba(14,165,233,0.20);
  flex-shrink:0;
}
.metric-card-icon svg{
  width:22px; height:22px;
  stroke:rgba(14,165,233,0.90); stroke-width:1.6; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .28s var(--ease);
}
.metric-card:hover .metric-card-icon{
  background:rgba(14,165,233,0.16);
  border-color:rgba(14,165,233,0.36);
}
.metric-card:hover .metric-card-icon svg{ stroke:var(--c-blue); }

/* ── Contenu textuel ── */
.metric-card-content{ width:100%; flex:1; display:flex; flex-direction:column; }

/* Label eyebrow */
.metric-card-label{
  display:block;
  font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  font-size:20px; font-weight:800;
  text-transform:uppercase; letter-spacing:.30em;
  color:rgba(14,165,233,0.72);
  margin-bottom:16px;
}

/* Trait accent */
.metric-card-divider{
  width:28px; height:2px; border-radius:999px;
  background:linear-gradient(90deg,rgba(14,165,233,0.85),rgba(14,165,233,0.20));
  margin:0 0 16px; flex-shrink:0;
  transition:width .28s var(--ease);
}
.metric-card:hover .metric-card-divider{ width:50px; }

/* Titre principal — taille réduite pour tenir sur une ligne */
.metric-card-content h3{
  margin:0 0 14px;
  font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  font-size:clamp(16px,1.5vw,20px); font-weight:900;
  text-transform:uppercase; letter-spacing:.05em; line-height:1.10;
  color:#ffffff;
  white-space:nowrap;
}

/* Description */
.metric-card-content p{
  margin:0 0 22px;
  color:rgba(255,255,255,0.55);
  font-weight:400; line-height:1.72; font-size:14px;
  flex-shrink:0;
}

/* ── Points clés — tiret élégant ── */
.metric-card-points{
  list-style:none; margin:0; padding:16px 0 0;
  display:flex; flex-direction:column; gap:0;
  border-top:1px solid rgba(255,255,255,0.08);
  flex:1;
}
.metric-card-points li{
  display:flex; align-items:center; gap:12px;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
  font-size:13.5px; font-weight:400;
  color:rgba(255,255,255,0.64); line-height:1.40;
  transition:color .22s var(--ease);
}
.metric-card-points li:last-child{ border-bottom:none; }
/* Tiret court — discret, professionnel */
.metric-card-points li::before{
  content:'';
  width:14px; height:1.5px; flex-shrink:0;
  background:rgba(14,165,233,0.55);
  border-radius:999px;
  transition:background .22s var(--ease), width .22s var(--ease);
}
.metric-card:hover .metric-card-points li{ color:rgba(255,255,255,0.80); }
.metric-card:hover .metric-card-points li::before{
  background:rgba(14,165,233,0.85);
  width:18px;
}

/* ══════════════════════════════════════════════════
   SECTION HEAD — "Ce que nous faisons" premium
══════════════════════════════════════════════════ */
.services{ padding:40px 0 60px; background:#f7f9fc; }

.section-head{
  text-align:center; max-width:1100px; margin:0 auto 52px;
  padding:44px 24px 0;
}

/* Eyebrow — sobre, sans badge */
.section-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  margin:0 0 16px;
  padding:0;
  font-size:10.5px; font-weight:800;
  text-transform:uppercase; letter-spacing:.26em; color:#0284c7;
  background:none; border:none; border-radius:0;
}
.section-eyebrow::before{
  content:''; width:20px; height:2px; border-radius:999px; flex-shrink:0;
  background:linear-gradient(90deg,#0ea5e9,rgba(14,165,233,0.30));
}

/* Titre principal — Inter 700, cohérent avec À Propos */
.section-title{
  margin:0; font-size:clamp(24px,2.8vw,38px);
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  letter-spacing:-.025em; font-weight:700; color:#0f172a;
  line-height:1.20;
}
.accent{ color:#0284c7; }

/* Ligne décorative animée */
.section-line{
  width:min(280px,55%); height:3px; border-radius:999px;
  margin:18px auto 0; position:relative; overflow:hidden;
  background:linear-gradient(90deg,transparent,#0ea5e9 30%,#3b82f6 50%,#0ea5e9 70%,transparent);
}
.section-line::after{
  content:''; position:absolute; top:0; left:-40%; width:40%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(59,130,246,0.70),transparent);
  -webkit-animation:lineShine 3.5s ease-in-out infinite;
  animation:lineShine 3.5s ease-in-out infinite;
}

/* Description */
.section-head p{
  margin:22px auto 0; line-height:1.78;
  font-weight:400; color:#475569; font-size:16px;
  max-width:660px;
}

/* ══════════════════════════════════════════════════════════════
   SERVICE CARDS — FLUIDES / MAINTENANCE / CFA / CFO
   Premium 2×2 grid
══════════════════════════════════════════════════════════════ */
.srv-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
  margin-top:0;
}

.srv-card{
  border-radius:20px; overflow:hidden;
  border:1px solid #e2e8f0;
  background:#ffffff;
  box-shadow:0 4px 20px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04);
  display:flex; flex-direction:column; position:relative;
  transform:translateY(0) scale(1);
  transition:
    transform .42s cubic-bezier(.22,1,.36,1),
    box-shadow .42s cubic-bezier(.22,1,.36,1),
    border-color .30s ease;
  animation-delay:var(--delay,0s);
  will-change:transform;
}
/* Ligne lumineuse en haut — glisse de gauche à droite au survol */
.srv-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:3;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(14,165,233,0.50) 20%,
    rgba(255,255,255,0.70) 50%,
    rgba(14,165,233,0.50) 80%,
    transparent 100%);
  background-size:200% 100%;
  opacity:0;
  transition:opacity .30s ease, background-position .60s ease;
  background-position:100% 0;
}
/* Halo radial sous la ligne */
.srv-card::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(600px 300px at 50% 0%, rgba(14,165,233,0.07), transparent 68%);
  opacity:0;
  transition:opacity .42s ease;
}
.srv-card:hover{
  transform:translateY(-8px) scale(1.012);
  border-color:rgba(14,165,233,0.35);
  box-shadow:
    0 24px 56px rgba(14,165,233,0.16),
    0 8px 20px rgba(0,0,0,0.08),
    0 0 0 1px rgba(14,165,233,0.12);
}
.srv-card:hover::before{
  opacity:1;
  background-position:0% 0;
}
.srv-card:hover::after{ opacity:1; }

/* ── Cover image ── */
.srv-cover{
  position:relative; min-height:280px;
  display:flex; align-items:flex-end; overflow:hidden;
}
.srv-cover::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  -webkit-transition:-webkit-transform .70s var(--ease), filter .70s var(--ease);
  transition:transform .70s var(--ease), filter .70s var(--ease);
  -webkit-transform:translateZ(0); transform:translateZ(0);
  will-change:transform;
}
.srv-card:hover .srv-cover::before{ -webkit-transform:translateZ(0); transform:translateZ(0); }

.srv-cover-fluide::before{
  background-image:url("services/fluides-et-cvc.png");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center 40%;
  filter:brightness(0.92) saturate(1.08);
}
.srv-card:hover .srv-cover-fluide::before{ filter:brightness(1.00) saturate(1.10); }

.srv-cover-maintenance::before{
  background-image:url("services/maintenance-multi-technique.png");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center 35%;
  filter:brightness(0.92) saturate(1.08);
}
.srv-card:hover .srv-cover-maintenance::before{ filter:brightness(1.00) saturate(1.10); }

.srv-cover-it::before{
  background-image:url("services/cfa-systemes-courants-faibles.png");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center 50%;
  filter:brightness(0.92) saturate(1.08);
}
.srv-card:hover .srv-cover-it::before{ filter:brightness(1.00) saturate(1.10); }

.srv-cover-electricite::before{
  background-image:url("services/cfo-installations-electriques.png");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center 55%;
  filter:brightness(0.92) saturate(1.08);
}
.srv-card:hover .srv-cover-electricite::before{ filter:brightness(1.00) saturate(1.10); }

.srv-cover-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to bottom, rgba(4,10,24,0.10) 0%, transparent 28%),
    linear-gradient(to top,    rgba(4,10,24,0.92) 0%, rgba(4,10,24,0.58) 38%, rgba(4,10,24,0.08) 68%, transparent 100%);
  transition:opacity var(--tr) var(--ease);
}
.srv-card:hover .srv-cover-overlay{ opacity:.90; }

/* ── Header dans le cover ── */
.srv-head-content{
  position:relative; z-index:2;
  padding:28px 32px 30px; width:100%;
}

.srv-num{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  font-size:10px; font-weight:900; line-height:1;
  margin:0 0 14px;
  color:rgba(148,194,251,0.75);
  letter-spacing:.32em; text-transform:uppercase;
  user-select:none;
}
.srv-num::before{
  content:""; display:inline-block;
  width:22px; height:1.5px; border-radius:999px; flex-shrink:0;
  background:linear-gradient(90deg,rgba(148,194,251,0.85),rgba(148,194,251,0.20));
}

.srv-title{
  margin:0 0 18px;
  font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  font-size:clamp(21px,2.2vw,27px);
  font-weight:900; color:#ffffff; line-height:1.08;
  text-shadow:0 2px 10px rgba(0,0,0,0.72), 0 4px 28px rgba(0,0,0,0.52);
  letter-spacing:.06em; text-transform:uppercase;
}

.srv-line{
  width:40px; height:2.5px; border-radius:999px;
  background:linear-gradient(90deg,#60a5fa 0%,rgba(255,255,255,0.90) 100%);
  box-shadow:0 0 12px rgba(96,165,250,0.45);
}

/* ── Corps de carte ── */
.srv-body{
  padding:26px 30px 30px;
  flex:1; display:flex; flex-direction:column;
  background:#ffffff;
  position:relative; z-index:2;
}

/* Description — borderLeft accent */
.srv-desc{
  margin:0 0 24px;
  padding:14px 18px 14px 20px;
  position:relative; line-height:1.78; font-weight:400;
  color:#334155; font-size:14.5px;
  background:rgba(14,165,233,0.05);
  border-left:3px solid rgba(14,165,233,0.60);
  border-radius:0 8px 8px 0;
}
.srv-desc::before{ display:none; }

/* ── Tags / badges pour la liste ── */
.srv-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:7px;
  flex:1; align-content:flex-start;
}
.srv-list li{
  padding:5px 12px;
  background:#f0f9ff;
  border:1px solid rgba(14,165,233,0.20);
  border-radius:6px;
  color:#0369a1; font-size:12px; font-weight:600;
  line-height:1.4; letter-spacing:.01em;
  transition:background .18s var(--ease), border-color .18s var(--ease),
             color .18s var(--ease), transform .18s var(--ease);
  cursor:default;
}
.srv-list li::before{ display:none; }
.srv-list li:hover{
  background:rgba(14,165,233,0.12);
  border-color:rgba(14,165,233,0.38);
  color:#0284c7;
  transform:translateY(-1px);
}

/* ── Footer CTA ── */
.srv-footer{
  margin-top:20px; padding-top:16px;
  border-top:1px solid #e9eef5;
  display:flex; align-items:center; justify-content:flex-end;
}
.srv-more{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px; border-radius:8px;
  border:1.5px solid #0284c7;
  background:#ffffff;
  color:#0284c7; font-size:12px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  box-shadow:0 1px 4px rgba(2,132,199,0.10);
  transition:background var(--tr), border-color var(--tr),
             color var(--tr), box-shadow var(--tr),
             gap var(--tr), transform var(--tr);
  position:relative; overflow:hidden;
}
.srv-more:hover{
  background:#0284c7; border-color:#0284c7; color:#ffffff;
  box-shadow:0 6px 20px rgba(2,132,199,0.28);
  gap:13px; transform:translateY(-2px);
}
.srv-more svg{ width:14px; height:14px; flex-shrink:0; transition:transform .22s var(--ease); }
.srv-more:hover svg{ transform:translateX(3px); }

/* ══ BOUTONS ══ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 26px; border-radius:999px; font-weight:700; font-size:14.5px;
  border:1px solid transparent; cursor:pointer;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  -webkit-transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
  white-space:nowrap; line-height:1;
}
.btn:hover{ transform:translateY(-1px); }
/* ══ FOOTER ══ */
.footer-bottom{
  position:relative; z-index:1;
  width:min(1260px,92%); margin:0 auto;
  border-top:1px solid rgba(255,255,255,0.20);
  box-shadow:0 -1px 0 rgba(14,165,233,0.10);
  padding:18px 0 22px;
  display:flex; align-items:center; justify-content:center;
}
.footer-copy-text{ font-size:13px; font-weight:600; color:rgba(255,255,255,0.70); letter-spacing:.25px; margin:0; text-align:center; }
.footer-copy-text strong{ color:var(--blue); font-weight:800; }
.footer-copy-text a{ color:rgba(255,255,255,0.70); text-decoration:none; font-weight:600; }
.footer-copy-text a:hover{ color:var(--blue-light); text-decoration:underline; }

/* ══ REVEAL ══ */
.reveal{ opacity:0; -webkit-transform:translateY(28px); transform:translateY(28px); -webkit-transition:opacity .72s var(--ease),-webkit-transform .72s var(--ease); transition:opacity .72s var(--ease),transform .72s var(--ease); }
.reveal.is-visible{ opacity:1; -webkit-transform:translateY(0); transform:translateY(0); }
.srv-card.reveal.is-visible{ transition-delay:var(--delay,0s); }
@keyframes reveal-safe-fallback{ to{ opacity:1; -webkit-transform:translateY(0); transform:translateY(0); } }
.reveal:not(.is-visible){ -webkit-animation:reveal-safe-fallback .5s 1.4s var(--ease) forwards; animation:reveal-safe-fallback .5s 1.4s var(--ease) forwards; }

/* ══ RESPONSIVE ══ */
@media (max-width:960px){
  .srv-grid{ grid-template-columns:1fr; gap:24px; }
}
@media (max-width:980px){
  .nav-links,.btn-contact-nav,.lang-switch{ display:none; }
  .burger{ display:flex; }
  .nav-container{ grid-template-columns:auto 1fr; }
  .hero-metrics{
    grid-template-columns:1fr 1fr;
    border-radius:18px;
  }
  .metric-card:nth-child(2)::after{ display:none; }
  .metric-card:nth-child(2){
    border-bottom:1px solid rgba(14,165,233,0.14);
  }
  .metric-card:nth-child(3){
    grid-column:1/-1;
    border-top:1px solid rgba(14,165,233,0.14);
  }
  .metric-card{ padding:36px 30px 34px; }
}
@media (max-width:640px){
  .hero{ min-height:auto; padding-bottom:36px; }
  .hero-inner{ padding:44px 0 28px; }
  .hero-title{ font-size:clamp(28px,7.5vw,38px); }
  .hero-lead{ font-size:15px; white-space:normal; }
  .hero-metrics{
    grid-template-columns:1fr;
    border-radius:16px;
  }
  .metric-card{ padding:32px 26px 30px; }
  .metric-card::after{ display:none; }
  .metric-card:not(:last-child){
    border-bottom:1px solid rgba(14,165,233,0.14);
  }
  .metric-card:nth-child(3){ grid-column:auto; border-top:none; }
  .metric-card-content h3{ font-size:17px; white-space:normal; }
  .srv-cover{ min-height:220px; }
  .srv-head-content{ padding:20px 24px 24px; }
  .srv-body{ padding:22px 24px 26px; }
  .srv-title{ font-size:clamp(19px,5vw,24px); }
}
@media (max-width:480px){
  .btn{ width:100%; }
  .nav-container{ padding:0 16px; }
  .hero-inner{ padding:32px 0 24px; }
  .services{ padding:24px 0 40px; }
  .srv-more{ width:100%; justify-content:center; }
}

/* ══════════════════════════════════════════════════
   ACTIVITÉ TABLEAUTIER
   ══════════════════════════════════════════════════ */

.tab-section{
  margin-bottom:28px;
}

.tab-card{
  display:flex; align-items:stretch;
  gap:0;
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:20px;
  box-shadow:0 4px 20px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04);
  position:relative; overflow:hidden;
  transition:box-shadow .42s cubic-bezier(.22,1,.36,1), border-color .30s ease, transform .42s cubic-bezier(.22,1,.36,1);
}
.tab-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:3;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(14,165,233,0.50) 20%,
    rgba(255,255,255,0.70) 50%,
    rgba(14,165,233,0.50) 80%,
    transparent 100%);
  background-size:200% 100%; background-position:100% 0;
  opacity:0; transition:opacity .30s ease, background-position .60s ease;
}
.tab-card:hover{
  transform:translateY(-4px);
  border-color:rgba(14,165,233,0.35);
  box-shadow:0 24px 56px rgba(14,165,233,0.14), 0 8px 20px rgba(0,0,0,0.07), 0 0 0 1px rgba(14,165,233,0.12);
}
.tab-card:hover::before{ opacity:1; background-position:0% 0; }

.tab-content{
  flex:1; min-width:0;
  padding:36px 44px;
  display:flex; flex-direction:column; justify-content:center;
}

.tab-line{
  width:40px; height:2.5px; border-radius:999px;
  background:linear-gradient(90deg,#60a5fa 0%,rgba(96,165,250,0) 100%);
  box-shadow:0 0 12px rgba(96,165,250,0.45);
  margin-bottom:14px;
}

.tab-eyebrow{
  font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  font-size:clamp(20px,2vw,26px); font-weight:900;
  letter-spacing:.06em; text-transform:uppercase;
  color:#0f172a; margin:0 0 10px;
  line-height:1.1;
}

.tab-desc{
  margin:0 0 18px;
  padding:12px 16px 12px 18px;
  font-size:14.5px; line-height:1.78; font-weight:400;
  color:#334155;
  background:rgba(14,165,233,0.05);
  border-left:3px solid rgba(14,165,233,0.60);
  border-radius:0 8px 8px 0;
}

.tab-tags{
  list-style:none; margin:0 0 24px; padding:0;
  display:flex; flex-wrap:wrap; gap:7px;
}
.tab-tags li{
  padding:5px 12px;
  background:#f0f9ff;
  border:1px solid rgba(14,165,233,0.20);
  border-radius:6px;
  color:#0369a1; font-size:12px; font-weight:600;
  line-height:1.4; letter-spacing:.01em;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
  cursor:default;
}
.tab-tags li:hover{
  background:rgba(14,165,233,0.12);
  border-color:rgba(14,165,233,0.38);
  color:#0284c7;
  transform:translateY(-1px);
}

.tab-footer{
  display:flex; align-items:center; justify-content:flex-end;
}

.tab-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 22px; border-radius:8px;
  border:1.5px solid #0284c7;
  background:#ffffff;
  color:#0284c7; font-size:12px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 1px 4px rgba(2,132,199,0.10);
  transition:background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease), gap .22s var(--ease), transform .22s var(--ease);
  white-space:nowrap;
}
.tab-cta:hover{
  background:#0284c7; border-color:#0284c7; color:#ffffff;
  box-shadow:0 6px 20px rgba(2,132,199,0.28);
  gap:13px; transform:translateY(-2px);
}
.tab-cta svg{ width:14px; height:14px; flex-shrink:0; transition:transform .22s var(--ease); }
.tab-cta:hover svg{ transform:translateX(3px); }

.tab-bg-area{
  flex-shrink:0; width:420px;
  background-image:url("Images01/activite-tableautier.jpeg");
  background-size:cover; background-position:center;
  border-left:1px solid #e2e8f0;
  border-radius:0 20px 20px 0;
}

/* ── Responsive Tableautier ── */
@media (max-width:900px){
  .tab-bg-area{ width:300px; }
}
@media (max-width:680px){
  .tab-card{ flex-direction:column; }
  .tab-content{ padding:28px 24px; }
  .tab-bg-area{
    width:100%; height:200px;
    border-left:none; border-top:1px solid #e2e8f0;
    border-radius:0 0 20px 20px;
  }
}
@media (max-width:480px){
  .tab-cta{ width:100%; justify-content:center; }
}

/* ══════════════════════════════════════════════════
   COMPATIBILITÉ CROSS-BROWSER — SERVICES
   Chrome · Edge · Firefox · Safari
   ══════════════════════════════════════════════════ */

html { color-scheme: light; }

/* Reset apparence boutons (Safari/iOS) */
.btn, .srv-more, button {
  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;
}

/* Animations avec préfixes webkit */
.hero-line::after, .section-line::after {
  -webkit-animation: lineShine 3.5s ease-in-out infinite;
  animation: lineShine 3.5s ease-in-out infinite;
}

/* Hover transforms */
.srv-card:hover {
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
}
.srv-more:hover {
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}
.srv-list li:hover {
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}

/* Transitions */
.srv-card {
  -webkit-transition: transform var(--tr) var(--ease), box-shadow var(--tr) var(--ease), border-color var(--tr) var(--ease);
  transition: transform var(--tr) var(--ease), box-shadow var(--tr) var(--ease), border-color var(--tr) var(--ease);
}
.srv-more {
  -webkit-transition: all var(--tr);
  transition: all var(--tr);
}

/* Fallback gap flexbox pour Safari < 14.1 */
.srv-list li + li { margin-left: 8px; }
@supports (gap: 1px) {
  .srv-list li + li { margin-left: 0; }
}

/* user-select avec préfixe */
.srv-num {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}


/* Scroll fluide iOS */
.services {
  -webkit-overflow-scrolling: touch;
}