/* Accueil et introductions video : une image degagee sur telephone.
   Le texte reste integralement present. Le bureau garde sa mise en page. */
@media (max-width: 760px) {
  .page-service__hero--accueil,
  .sector-hero--media:has(> .sector-hero__media video) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 0;
    background: #fff;
  }

  .page-service__hero--accueil > .page-service__hero__media,
  .sector-hero--media:has(> .sector-hero__media video) > .sector-hero__media {
    position: relative;
    inset: auto;
    flex: none;
    order: 0;
    width: 100%;
    height: auto;
    min-height: 180px;
    max-height: 360px;
    aspect-ratio: 16 / 9;
    margin: 0;
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
    clip-path: none;
    -webkit-clip-path: none;
    background: #18344b;
  }

  .page-service__hero--accueil > .page-service__hero__media::after,
  .sector-hero--media:has(> .sector-hero__media video) > .sector-hero__media::after {
    display: none;
  }

  .page-service__hero--accueil > .page-service__hero__media .video-loop,
  .sector-hero--media:has(> .sector-hero__media video) > .sector-hero__media .video-loop {
    background: var(--vl-poster) center / cover no-repeat;
  }

  .page-service__hero--accueil > .page-service__hero__media video,
  .sector-hero--media:has(> .sector-hero__media video) > .sector-hero__media video {
    object-fit: cover;
    object-position: center;
  }

  .page-service__hero--accueil > .container,
  .sector-hero--media:has(> .sector-hero__media video) > .container {
    position: relative;
    order: 1;
    padding: 1.5rem 1.25rem 1.75rem;
    background: #fff;
  }

  .page-service__hero--accueil .page-service__hero__inner,
  .sector-hero--media:has(> .sector-hero__media video) .sector-hero__inner {
    width: 100%;
    max-width: none;
    color: #18344b;
  }

  .page-service__hero--accueil .page-service__hero__title,
  .sector-hero--media:has(> .sector-hero__media video) .sector-hero__title {
    margin: 0 0 .875rem;
    font-size: clamp(1.625rem, 7.7vw, 2rem);
    line-height: 1.15;
    color: #18344b;
    text-shadow: none;
    text-wrap: balance;
  }

  .page-service__hero--accueil .page-service__hero__title .ho,
  .sector-hero--media:has(> .sector-hero__media video) .sector-hero__title .accent {
    color: #c6102a;
  }

  .page-service__hero--accueil .page-service__hero__subtitle,
  .sector-hero--media:has(> .sector-hero__media video) .sector-hero__subtitle {
    margin: 0 0 1.25rem;
    font-size: 1rem;
    line-height: 1.55;
    color: #455b6c;
    text-shadow: none;
  }

  .page-service__hero--accueil .page-service__hero__subtitle strong,
  .page-service__hero--accueil .page-service__hero__bullets li {
    color: #18344b;
    text-shadow: none;
  }

  .page-service__hero--accueil .page-service__hero__bullets {
    gap: .625rem;
    margin: 0 0 1.25rem;
  }

  .page-service__hero--accueil .page-service__hero__bullets li {
    font-size: .875rem;
    line-height: 1.5;
    align-items: flex-start;
  }

  .page-service__hero--accueil .page-service__hero__ctas,
  .sector-hero--media:has(> .sector-hero__media video) .sector-hero__ctas {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    margin-top: 0;
  }

  .page-service__hero--accueil .page-service__hero__ctas .btn,
  .sector-hero--media:has(> .sector-hero__media video) .sector-hero__ctas .btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    white-space: normal;
    text-align: center;
    padding: .75rem 1rem;
    line-height: 1.4;
  }

  .page-service__hero--accueil .btn--primary,
  .sector-hero--media:has(> .sector-hero__media video) .btn--primary {
    background: #c6102a;
    color: #fff;
    box-shadow: none;
  }

  .page-service__hero--accueil .btn--outline,
  .sector-hero--media:has(> .sector-hero__media video) .btn--outline {
    color: #18344b;
    border-color: #18344b;
    background: transparent;
  }

  .page-service__hero--accueil .cta-niveau-lien,
  .page-service__hero--accueil .cta-niveau-lien a,
  .sector-hero--media:has(> .sector-hero__media video) .cta-niveau-lien,
  .sector-hero--media:has(> .sector-hero__media video) .cta-niveau-lien a,
  .sector-hero--media:has(> .sector-hero__media video) .sector-hero__trust,
  .sector-hero--media:has(> .sector-hero__media video) .sector-hero__trust strong {
    color: #18344b;
    text-shadow: none;
  }

  .sector-hero--media:has(> .sector-hero__media video) .sector-hero__eyebrow {
    margin-bottom: .875rem;
    background: #f1f4f6;
    color: #18344b;
    font-size: .75rem;
  }

  .sector-hero--media:has(> .sector-hero__media video) .sector-hero__trust {
    font-size: .8125rem;
    margin: 1rem 0 0;
  }

  .page-service__hero--accueil > .hproof {
    order: 2;
    margin-top: 0;
  }
}