/* ===========================================================
   ITDot — Pages internes (partagé)
   Styles pour les pages de contenu : hero interne, grilles,
   cards produit/service, sections alternées.
   =========================================================== */

/* ---------------- Page Hero (interne) ---------------- */
.page-hero {
  padding: clamp(120px, 14vw, 170px) 0 clamp(50px, 6vw, 70px);
  background: var(--paper);
  color: var(--ink);
  position: relative;
  border-bottom: 1px solid rgba(62,61,60,.08);
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero .breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: .94rem; color: var(--ink-soft); margin-bottom: 28px;
}
.page-hero .breadcrumb a { color: var(--ink-soft); transition: color .2s; }
.page-hero .breadcrumb a:hover { color: var(--red); }
.page-hero .breadcrumb .sep { color: rgba(62,61,60,.3); }
.page-hero .breadcrumb .current { color: var(--red); font-weight: 600; }
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 800; line-height: 1; letter-spacing: -.025em;
  max-width: 20ch;
}
.page-hero h1::after {
  content: "";
  display: block;
  width: 56px; height: 4px;
  background: var(--red);
  border-radius: 2px;
  margin-top: 22px;
}
.page-hero__sub {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 56ch; margin-top: 22px; line-height: 1.65;
}

/* ---------------- Product / Service grid ---------------- */
.pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.pcard {
  background: #fff;
  border: 1px solid rgba(62,61,60,.08);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 36px);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
}
.pcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(62,61,60,.12);
}
.pcard__ico {
  width: 72px; height: 72px;
  border-radius: 16px;
  background: var(--rose);
  display: grid; place-items: center;
  margin-bottom: 18px;
}
.pcard__ico svg { width: 36px; height: 36px; color: var(--red); }
.pcard h3 {
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 700;
  letter-spacing: -.01em;
}
.pcard p {
  color: var(--ink-soft);
  font-size: .94rem; line-height: 1.5;
  margin-top: 8px;
}

/* ---------------- Steps / phases (cartes dépliables) ----------------
   Composant partagé par deploiement, securite et solutions-emm.
   Chaque page surcharge .step__visual, .step__top et les listes. */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.step {
  position: relative;
  background: #fff;
  border: 1px solid rgba(62,61,60,.08);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3vw, 38px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
}
.step:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(62,61,60,.1);
}
.step::before { display: none; }
.step__top {
  display: flex; align-items: center; gap: 20px;
  padding: 16px clamp(22px, 2.5vw, 32px); padding-bottom: 12px;
}
.step__info { flex: 1; min-width: 0; }
.step__num {
  font-family: var(--font-display); font-weight: 800; font-size: 2.2rem;
  color: var(--red); opacity: .2; line-height: 1; display: block; margin-bottom: 8px;
}
.step__info h3 {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; line-height: 1.25;
}
.step__body {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .45s cubic-bezier(.25,.8,.25,1), opacity .35s ease, padding .35s ease;
  padding: 0 clamp(22px, 2.5vw, 32px);
}
.step__body p, .step__body ul {
  color: var(--ink-soft); font-size: .94rem; line-height: 1.6; margin-top: 0;
}
.step:hover .step__body, .step:focus-within .step__body {
  max-height: 350px; opacity: 1; padding-top: 4px; padding-bottom: clamp(22px, 2.5vw, 32px);
}

/* ---------------- Responsive (inner pages) ---------------- */
@media (max-width: 768px) {
  .pgrid { grid-template-columns: 1fr !important; }
  .pgrid--support { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .pgrid { grid-template-columns: 1fr !important; }
  .steps { grid-template-columns: 1fr !important; }
}

/* ---------------- Inner page header fix ---------------- */
.page-inner .hdr {
  background: rgba(255,255,255,.97);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 8px 30px rgba(62,61,60,.10);
  border-bottom: 1px solid rgba(62,61,60,.08);
  padding: 10px 0;
}
.page-inner .hdr .brand__logo--white { display: none !important; }
.page-inner .hdr .brand__logo--dark { display: block !important; }
.page-inner .hdr .nav__link { color: var(--ink); }
.page-inner .hdr .nav__link:hover { background: rgba(62,61,60,.07); color: var(--ink); }
.page-inner .hdr .nav__cta.btn--red { background: var(--ink); color: #fff; }
.page-inner .hdr .nav__cta.btn--red:hover { background: #2a2928; }
.page-inner .hdr .burger { background: rgba(62,61,60,.08); }
.page-inner .hdr .burger span,
.page-inner .hdr .burger span::before,
.page-inner .hdr .burger span::after { background: var(--ink); }