/* ============================================================
   Atelier Digital TN — V4
   Habillages différenciés par page
   - Accueil : business + premium
   - Services : technique / grille
   - À propos : élégant / éditorial
   ============================================================ */

:root{
  --v4-premium-green: rgba(112,176,156,.18);
  --v4-premium-orange: rgba(228,109,63,.14);
  --v4-navy-soft: rgba(16,60,86,.10);
  --v4-card-line: rgba(16,28,36,.08);
  --v4-card-line-dark: rgba(255,255,255,.08);
  --v4-shadow: 0 18px 46px rgba(7,16,24,.06);
  --v4-shadow-strong: 0 26px 64px rgba(7,16,24,.08);
}

body.home-page,
body.services-page,
body.about-page{background:var(--dark)}

body.home-page .section,
body.services-page .section,
body.about-page .section,
body.home-page .page-hero,
body.services-page .page-hero,
body.about-page .page-hero{position:relative;overflow:hidden;isolation:isolate}

body.home-page .section>.wrap,
body.services-page .section>.wrap,
body.about-page .section>.wrap,
body.home-page .page-hero>.wrap,
body.services-page .page-hero>.wrap,
body.about-page .page-hero>.wrap{position:relative;z-index:2}

/* =========================
   OUTILS DECORATIFS COMMUNS
   ========================= */
body.home-page .pain-card,
body.home-page .why-card,
body.home-page .method-step,
body.services-page .service-nav-card,
body.services-page .why-card,
body.services-page .process-card,
body.about-page .value-card,
body.about-page .about-brand-card,
body.about-page .identity-grid dl>div{position:relative;overflow:hidden;isolation:isolate}

body.home-page .pain-card > *,
body.home-page .why-card > *,
body.home-page .method-step > *,
body.services-page .service-nav-card > *,
body.services-page .why-card > *,
body.services-page .process-card > *,
body.about-page .value-card > *,
body.about-page .about-brand-card > *,
body.about-page .identity-grid dl>div > *{position:relative;z-index:2}

/* =========================
   ACCUEIL — business + premium
   ========================= */
body.home-page .problem-section::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 12% 16%, rgba(228,109,63,.09), transparent 26%),
    radial-gradient(circle at 83% 82%, rgba(112,176,156,.12), transparent 28%),
    linear-gradient(to right, rgba(16,28,36,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16,28,36,.05) 1px, transparent 1px);
  background-size:auto,auto,44px 44px,44px 44px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.92),rgba(0,0,0,.65));
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.92),rgba(0,0,0,.65));
}

body.home-page .pain-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.34)),
    rgba(255,255,255,.38);
  box-shadow:var(--v4-shadow);
  backdrop-filter:blur(3px);
}
body.home-page .pain-card::before{
  content:"";position:absolute;inset:auto -52px -52px auto;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle at center, rgba(228,109,63,.14), rgba(228,109,63,.04) 42%, transparent 72%);
  z-index:0
}
body.home-page .pain-card::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgba(16,28,36,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16,28,36,.06) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(to bottom right, rgba(0,0,0,.24), transparent 75%);
  -webkit-mask-image:linear-gradient(to bottom right, rgba(0,0,0,.24), transparent 75%);
  opacity:.5;z-index:0
}
body.home-page .pain-card h3::after{
  content:"";position:absolute;right:-20px;top:-18px;width:110px;height:110px;border:1px solid rgba(16,28,36,.09);
  border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;opacity:.8;z-index:1
}

body.home-page .why-section::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 86% 14%, rgba(112,176,156,.14), transparent 18%),
    radial-gradient(circle at 18% 78%, rgba(16,60,86,.08), transparent 22%);
}
body.home-page .why-card{
  background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.14));
  backdrop-filter:blur(2px);
}
body.home-page .why-card::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:3px;
  background:linear-gradient(90deg, rgba(112,176,156,.65), rgba(16,60,86,0));
}
body.home-page .why-card::after{
  content:"";position:absolute;right:-34px;bottom:-34px;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle at center, rgba(112,176,156,.14), transparent 70%);
}

body.home-page .method-section::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px),
    radial-gradient(circle at 78% 20%, rgba(112,176,156,.14), transparent 22%);
  background-size:52px 52px,52px 52px,auto;
  opacity:.9;
}
body.home-page .method-step{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
}
body.home-page .method-step::before{
  content:"";position:absolute;inset:auto -44px -44px auto;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle at center, rgba(112,176,156,.12), transparent 72%);
}
body.home-page .method-step::after{
  content:"";position:absolute;left:0;top:0;width:60px;height:1px;background:rgba(255,255,255,.12)
}

/* =========================
   SERVICES — technique / grille
   ========================= */
body.services-page .page-hero::before,
body.services-page .service-hub::before,
body.services-page .soft-section::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgba(16,28,36,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16,28,36,.055) 1px, transparent 1px);
  background-size:36px 36px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.18));
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.18));
}
body.services-page .page-hero::after,
body.services-page .service-hub::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 14% 18%, rgba(16,60,86,.10), transparent 18%),
    radial-gradient(circle at 82% 72%, rgba(112,176,156,.12), transparent 22%);
}
body.services-page .service-nav-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.26)),
    rgba(255,255,255,.30);
  box-shadow:var(--v4-shadow);
}
body.services-page .service-nav-card::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgba(16,28,36,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16,28,36,.055) 1px, transparent 1px);
  background-size:24px 24px;
  mask-image:linear-gradient(to bottom right, rgba(0,0,0,.30), transparent 78%);
  -webkit-mask-image:linear-gradient(to bottom right, rgba(0,0,0,.30), transparent 78%);
  opacity:.65;z-index:0
}
body.services-page .service-nav-card::after{
  content:"";position:absolute;right:-24px;top:-24px;width:120px;height:120px;
  background:
    radial-gradient(circle at center, rgba(16,60,86,.08), transparent 56%);
  border-radius:50%;
  box-shadow: inset 0 0 0 1px rgba(16,28,36,.08);
  z-index:0
}
body.services-page .service-nav-card h3::after{
  content:"";position:absolute;left:0;bottom:-18px;width:82px;height:2px;
  background:linear-gradient(90deg, rgba(16,60,86,.65), rgba(112,176,156,.20), transparent);
}

body.services-page .why-card{
  background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.14));
}
body.services-page .why-card::before{
  content:"";position:absolute;left:18px;top:18px;width:18px;height:18px;border-top:1px solid rgba(16,28,36,.16);border-left:1px solid rgba(16,28,36,.16)}
body.services-page .why-card::after{
  content:"";position:absolute;right:18px;bottom:18px;width:18px;height:18px;border-right:1px solid rgba(16,28,36,.16);border-bottom:1px solid rgba(16,28,36,.16)}

body.services-page .process-section::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px),
    radial-gradient(circle at 18% 16%, rgba(112,176,156,.15), transparent 20%),
    radial-gradient(circle at 86% 80%, rgba(16,60,86,.18), transparent 24%);
  background-size:30px 30px,30px 30px,auto,auto;
}
body.services-page .process-card{
  background:linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.008));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
body.services-page .process-card::before{
  content:"";position:absolute;left:-46px;bottom:-46px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle at center, rgba(112,176,156,.12), transparent 72%);z-index:0
}
body.services-page .process-card::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:20px 20px;
  mask-image:linear-gradient(to bottom right, rgba(0,0,0,.24), transparent 74%);
  -webkit-mask-image:linear-gradient(to bottom right, rgba(0,0,0,.24), transparent 74%);
  opacity:.5;z-index:0
}

/* =========================
   À PROPOS — élégant / éditorial
   ========================= */
body.about-page .light-section::before,
body.about-page .soft-section::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 14% 16%, rgba(112,176,156,.10), transparent 20%),
    radial-gradient(circle at 90% 12%, rgba(228,109,63,.08), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
}
body.about-page .about-main{
  position:relative;
  align-items:center;
}
body.about-page .about-brand-card{
  min-height:360px;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:36px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.22)),
    rgba(255,255,255,.28);
  box-shadow:var(--v4-shadow-strong);
}
body.about-page .about-brand-card::before{
  content:"";position:absolute;inset:22px;
  border:1px solid rgba(16,28,36,.10);z-index:0
}
body.about-page .about-brand-card::after{
  content:"TN";position:absolute;right:28px;bottom:16px;
  font-size:104px;line-height:1;font-weight:700;letter-spacing:-.08em;
  color:rgba(16,28,36,.05);z-index:0
}
body.about-page .about-brand-card p{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;text-transform:uppercase;letter-spacing:.14em;font-weight:800;color:#5d6b72
}
body.about-page .about-brand-card p::before,
body.about-page .about-brand-card p::after{content:"";display:inline-block;width:24px;height:1px;background:rgba(16,28,36,.18)}

body.about-page .values::after{
  content:"";position:absolute;left:0;right:0;top:0;bottom:0;
  background-image:linear-gradient(to right, rgba(16,28,36,.045) 1px, transparent 1px);
  background-size:120px 100%;opacity:.35;pointer-events:none
}
body.about-page .value-card{
  background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.18));
  box-shadow:var(--v4-shadow);
}
body.about-page .value-card::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:4px;
  background:linear-gradient(90deg, rgba(112,176,156,.58), rgba(228,109,63,.24), transparent);
}
body.about-page .value-card::after{
  content:"";position:absolute;right:-32px;top:-32px;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle at center, rgba(112,176,156,.12), transparent 70%);
}

body.about-page .identity-grid{
  position:relative;
}
body.about-page .identity-grid::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:rgba(255,255,255,.10)
}
body.about-page .identity-grid dl{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
body.about-page .identity-grid dl>div{
  padding:22px 24px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
}
body.about-page .identity-grid dl>div::before{
  content:"";position:absolute;right:-28px;bottom:-28px;width:110px;height:110px;border-radius:50%;
  background:radial-gradient(circle at center, rgba(112,176,156,.12), transparent 72%)
}
body.about-page .identity-grid dl>div::after{
  content:"";position:absolute;left:16px;top:16px;width:14px;height:14px;border-top:1px solid rgba(255,255,255,.18);border-left:1px solid rgba(255,255,255,.18)}

/* léger raffinement du hover sur les cartes concernées */
body.home-page .pain-card:hover,
body.home-page .why-card:hover,
body.home-page .method-step:hover,
body.services-page .service-nav-card:hover,
body.services-page .why-card:hover,
body.services-page .process-card:hover,
body.about-page .value-card:hover,
body.about-page .identity-grid dl>div:hover,
body.about-page .about-brand-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 52px rgba(7,16,24,.08);
}

@media(max-width:1000px){
  body.about-page .identity-grid dl{grid-template-columns:1fr}
}

@media(max-width:760px){
  body.home-page .pain-card::before,
  body.home-page .why-card::after,
  body.home-page .method-step::before,
  body.services-page .service-nav-card::after,
  body.services-page .process-card::before,
  body.about-page .value-card::after,
  body.about-page .identity-grid dl>div::before,
  body.about-page .about-brand-card::after{transform:scale(.74);transform-origin:bottom right}

  body.home-page .problem-section::before,
  body.services-page .page-hero::before,
  body.services-page .service-hub::before,
  body.services-page .soft-section::before,
  body.services-page .process-section::before{
    background-size:24px 24px,24px 24px,auto,auto;
  }

  body.about-page .about-brand-card{min-height:300px;padding:28px}
  body.about-page .about-brand-card::after{font-size:72px}
}