/* ---- EMM page-specific (same pattern as déploiement) ---- */
.steps { grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: start; }

/* ---- Expandable step cards ---- */
.step__visual {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: var(--rose);
  display: grid;
  place-items: center;
}
.step__visual svg {
  width: 36px;
  height: 36px;
  color: var(--red);
}
.step__body ul { padding-left: 22px; list-style: disc; }
.step__body li { margin-top: 6px; }

/* Administration : cards plus compactes et flow resserré.
   --pad = unique levier de hauteur de card (modifie juste cette valeur). */
#administration .flow { max-width: none; display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: 16px; }
#administration .flow .step { width: auto; }
@media (max-width: 820px) { #administration .flow { grid-template-columns: 1fr; } }
#administration .step { padding: 40px 28px; }          /* <-- ajuster ici */
#administration .step__top { padding: 0; gap: 14px; }
#administration .step__num { font-size: 1.6rem; margin-bottom: 4px; }
#administration .step__info h3 { font-size: 1rem; }
#administration .step__body { padding: 0; }
#administration .step__body p, #administration .step__body ul { font-size: .9rem; }
#administration .step:hover .step__body,
#administration .step:focus-within .step__body { padding-top: 8px; padding-bottom: 0; }

/* Mobile: always expanded */
@media (max-width: 768px) {
  .step__body {
    max-height: none;
    opacity: 1;
    padding: 4px clamp(22px, 2.5vw, 32px) clamp(22px, 2.5vw, 32px);
  }
}
@media (max-width: 920px) {
  .steps { grid-template-columns: 1fr !important; }
}

/* Rose section step cards */
.section--rose .step {
  background: #fff;
}

/* Skip link */



/* Support cards — wider variant */
.pgrid--support {
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
}
.pcard--support {
  text-align: left;
  align-items: flex-start;
  padding: clamp(28px, 3vw, 40px);
}
.pcard--support .pcard__ico {
  margin-bottom: 20px;
}
.pcard--support h3 {
  text-align: left;
}
.pcard--support p {
  text-align: left;
  color: var(--ink-soft);
  font-size: .94rem;
  line-height: 1.6;
  margin-top: 10px;
}
.pcard--support ul {
  color: var(--ink-soft);
  font-size: .94rem;
  line-height: 1.6;
  margin-top: 10px;
  padding-left: 20px;
  list-style: disc;
  text-align: left;
}
.pcard--support li {
  margin-top: 4px;
}

.pcard--perimetre {
  position: relative;
}

.pcard__img {
  width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.pcard__img img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* Les + block */
.les-plus {
  margin-top: 40px;
  background: var(--rose);
  border-radius: var(--r-lg);
  padding: clamp(28px, 3vw, 40px);
}
.les-plus__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.les-plus__ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--red);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.les-plus__ico svg {
  width: 22px;
  height: 22px;
  color: #fff;
}
.les-plus__head h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--red);
}
.les-plus ul {
  padding-left: 20px;
  list-style: disc;
}
.les-plus li {
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.6;
  margin-top: 6px;
}

/* Flow layout — vertical flowchart with step cards */
.flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 0 auto;
}
.flow .step {
  width: 100%;
}
/* Reduce section spacing after hero */
#flotte, #administration, #support {
  padding-top: clamp(40px, 5vw, 60px);
  padding-bottom: clamp(40px, 5vw, 60px);
}
/* Administration : section plus compacte verticalement */
#administration { padding-top: clamp(40px, 4.5vw, 56px); padding-bottom: clamp(40px, 4.5vw, 56px); }
#administration .section__head { margin-bottom: 22px; }
#flotte {
  padding-top: clamp(36px, 5vw, 60px);
}
#support {
  padding-bottom: 0;
}
/* Support visual + les-plus side by side */
.support-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 4vw, 50px);
  align-items: start;
  margin-top: 12px;
}
.support-bottom__visual {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  align-self: end;
}
.support-bottom__visual img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: -4px;
}
.support-bottom .les-plus {
  margin-top: 0;
  transform: translateY(-70px);
  margin-bottom: clamp(50px, 6vw, 80px);
}
@media (max-width: 768px) {
  .support-bottom {
    grid-template-columns: 1fr;
  }
  .support-bottom__visual {
    order: 2;
  }
  .support-bottom .les-plus {
    order: 1;
    transform: none;
    margin-top: clamp(24px, 5vw, 40px);
    margin-bottom: clamp(24px, 5vw, 40px);
  }
}


/* ===== Hero EMM — flotte qui s'enrôle ===== */
.page-hero { overflow: visible; border-bottom: none; }
.section strong, .lead strong, .page-hero__sub strong { font-weight: 600; color: var(--ink); }
#flotte .pcard h3 { margin-bottom: 12px; }
.emm-scene {
  position: absolute;
  right: clamp(8px, 5vw, 80px); top: 50%;
  transform: translate(-30%, -35%);
  width: clamp(270px, 30vw, 390px); aspect-ratio: 1 / 1;
  z-index: 0; pointer-events: none;
  animation: emmAppear .6s ease .5s both;
}
.emm-scene svg { width: 100%; height: 100%; display: block; overflow: visible; position: relative; z-index: 1; }
.emm-scene__glow {
  position: absolute; left: 8%; top: 8%; width: 84%; height: 84%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(155,27,31,.22), rgba(155,27,31,0) 68%);
  filter: blur(26px); z-index: 0;
  animation: emmGlow 5s ease-in-out infinite;
}
.emm-dev { fill: #fff; stroke: var(--red); stroke-width: 2.5; stroke-linejoin: round; }
.emm-dev-line { stroke: var(--red); stroke-width: 2; stroke-linecap: round; }
.emm-dev-dot { fill: var(--red); }
.emm-hub { stroke: var(--red); stroke-width: 2.5; stroke-linecap: round; fill: none; }
.emm-hub-core { fill: #fff; stroke: var(--red); stroke-width: 3; }
.emm-pulse { fill: none; stroke: var(--red); stroke-width: 2; transform-box: view-box; transform-origin: 230px 230px; animation: emmPulse 4.2s ease-out infinite; }
.emm-pulse--2 { animation-delay: 1.4s; }
.emm-pulse--3 { animation-delay: 2.8s; }
.emm-badge { transform-box: fill-box; transform-origin: center; animation: emmBadge 6s ease-in-out infinite; }
.emm-badge circle { fill: var(--red); }
.emm-badge path { stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

@keyframes emmAppear { from { opacity: 0; } to { opacity: 1; } }
@keyframes emmGlow { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes emmPulse {
  0%   { transform: scale(.18); opacity: .5; }
  70%  { opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes emmBadge {
  0%       { opacity: 0; transform: scale(0); }
  7%       { opacity: 1; transform: scale(1.2); }
  12%      { transform: scale(1); }
  82%      { opacity: 1; transform: scale(1); }
  90%,100% { opacity: 0; transform: scale(.5); }
}
@media (max-width: 760px) { .emm-scene { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .emm-scene, .emm-scene__glow, .emm-pulse, .emm-badge { animation: none; }
  .emm-badge { opacity: 1; transform: none; }
}

/* ===== Lot 3c — délais dorigine (ex-inline) ===== */
.emm-badge--d06 { animation-delay: .6s; }
.emm-badge--d11 { animation-delay: 1.1s; }
.emm-badge--d16 { animation-delay: 1.6s; }
.emm-badge--d21 { animation-delay: 2.1s; }
.emm-badge--d26 { animation-delay: 2.6s; }
.emm-badge--d31 { animation-delay: 3.1s; }

/* ===== Lot 3e ===== */
.pgrid.pgrid--3 { grid-template-columns: repeat(3,1fr); }
.pcard__img img.emm-mh-130 { max-height: 130px; }
.pcard__img img.emm-mh-145 { max-height: 145px; }
.pcard__img img.emm-mh-165 { max-height: 165px; }