/* ===========================================
   ZenOps - Responsive Styles
   Breakpoints: 1200px (tablet), 768px (mobile)
   =========================================== */

/* ========== PAGE WRAPPER ========== */
@media (max-width: 1512px) {
  .page-wrapper {
    width: 100%;
    max-width: 1512px;
    margin: 0 auto;
  }
}

/* ========== TABLET (max-width: 1200px) ========== */
@media (max-width: 1200px) {

  /* Global adjustments — clip (not hidden) preserves position: sticky */
  .page-wrapper {
    overflow-x: clip;
  }

  /* Hero */
  .hero {
    position: relative;
    height: auto;
    min-height: auto;
    padding: 140px 30px 60px;
  }

  .hero__container {
    position: relative;
    width: 100%;
    height: auto;
    left: auto;
    top: auto;
    display: flex;
    flex-direction: column;
  }

  .hero__heading {
    position: relative;
    width: 100%;
    height: auto;
    left: auto;
    top: auto;
  }

  .hero__title {
    position: relative;
    width: 100%;
    height: auto;
  }

  .hero__title-line:nth-child(1),
  .hero__title-line:nth-child(2),
  .hero__title-line:nth-child(3) {
    position: static !important;
    width: auto !important;
    font-size: 56px;
    top: auto !important;
    left: auto !important;
    display: inline;
  }

  .hero__paragraph {
    position: relative;
    width: 100%;
    height: auto;
    left: auto;
    top: auto;
    margin-top: 40px;
    align-items: flex-start;
    gap: 32px;
  }

  .hero__description {
    width: 100%;
    height: auto;
  }

  .hero__buttons {
    width: auto;
    height: auto;
    flex-wrap: wrap;
  }

  .hero__buttons .btn-primary,
  .hero__buttons .btn-secondary {
    width: auto;
    height: 40px;
    padding: 0 24px;
  }

  .ai-badge {
    white-space: normal;
    align-self: stretch;
  }

  /* Numbers */
  .numbers {
    height: auto;
    padding: 60px 30px;
  }

  .numbers__badge {
    position: relative;
    left: auto;
    top: auto;
  }

  .numbers__grid {
    position: relative;
    width: 100%;
    left: auto;
    top: auto;
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  .numbers__item {
    position: relative;
    left: auto !important;
    top: auto !important;
  }

  /* Défi */
  .defi {
    height: auto;
    padding: 60px 30px;
  }

  .defi__header {
    position: relative;
    width: 100%;
    left: auto;
    top: auto;
    height: auto;
  }

  .defi__kicker,
  .defi__title {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
  }

  .defi__subtitle {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin-top: 24px;
  }

  .defi__grid {
    position: relative;
    width: 100%;
    left: auto;
    top: auto;
    margin-top: 60px;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .defi__card {
    position: relative;
    width: 100%;
    height: auto;
    min-height: auto;
    left: auto !important;
    top: auto !important;
    padding: 32px;
  }

  .defi__card-bg {
    width: 100%;
    height: 100%;
  }

  .defi__card-title {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin-bottom: 12px;
  }

  .defi__card-text {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
  }

  /* Positionnement */
  .positionnement {
    height: auto;
    padding: 60px 30px;
  }

  .positionnement__header {
    position: relative;
    width: 100%;
    left: auto;
    top: auto;
    height: auto;
  }

  .positionnement__kicker,
  .positionnement__title {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
  }

  .positionnement__subtitle {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin-top: 24px;
  }

  .positionnement__line-vertical {
    display: none;
  }

  .positionnement__stats {
    position: relative;
    width: 100%;
    left: auto;
    top: auto;
    margin-top: 60px;
  }

  .positionnement__bars {
    position: relative;
    width: 100%;
    left: auto;
    top: auto;
    margin-top: 40px;
  }

  .positionnement__bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
  }

  .positionnement__bar-bg {
    width: 100%;
    height: 100%;
  }

  .positionnement__bar-text {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    flex: 1;
  }

  .positionnement__bar-label {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    flex-shrink: 0;
    margin-left: 16px;
  }

  .positionnement__line-horizontal {
    display: none;
  }

  .positionnement__separator {
    width: 100%;
  }

  /* Approche */
  .approche {
    height: auto;
    padding: 60px 30px;
  }

  .approche__header {
    position: relative;
    width: 100%;
    left: auto;
    top: auto;
    height: auto;
  }

  .approche__kicker,
  .approche__title {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
  }

  .approche__cards {
    position: relative;
    width: 100%;
    left: auto;
    top: auto;
    margin-top: 60px;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .approche__card {
    position: relative;
    width: 100%;
    height: auto;
    left: auto !important;
    top: auto !important;
    padding-left: 45px;
    min-height: 120px;
  }

  .approche__card-line {
    height: 100%;
  }

  .approche__card-title,
  .approche__card-text {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
  }

  .approche__card-text {
    margin-top: 12px;
  }

  /* Solutions */
  .solutions {
    height: auto;
    padding: 60px 30px;
  }

  .solutions__header {
    position: relative;
    width: 100%;
    left: auto;
    top: auto;
    height: auto;
  }

  .solutions__kicker,
  .solutions__title {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
  }

  .solutions__subtitle {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin-top: 24px;
  }

  .solutions__cards {
    position: relative;
    width: 100%;
    left: auto;
    bottom: auto;
    margin-top: 60px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
  }

  .solutions__card {
    position: relative;
    width: calc(50% - 12px);
    height: auto;
    min-height: auto;
    left: auto !important;
    top: auto !important;
    padding: 32px;
  }

  .solutions__card-bg {
    width: 100%;
    height: 100%;
  }

  .solutions__card-title {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin-bottom: 16px;
  }

  .solutions__card-badge {
    position: relative;
    left: auto;
    top: auto;
    display: inline-block;
    margin-bottom: 16px;
  }

  .solutions__card-text {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin-bottom: 24px;
  }

  .solutions__card-line {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin-bottom: 20px;
  }

  .solutions__card-statement {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin-bottom: 24px;
  }

  .solutions__card-btn {
    position: relative;
    left: auto;
    top: auto;
  }

  /* Expertises */
  .expertises {
    height: auto;
    padding: 60px 30px;
  }

  .expertises__header {
    position: relative;
    width: 100%;
    left: auto;
    top: auto;
    height: auto;
  }

  .expertises__kicker,
  .expertises__title {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
  }

  .expertises__subtitle {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin-top: 24px;
  }

  .expertises__cards {
    position: relative;
    width: 100%;
    left: auto;
    bottom: auto;
    margin-top: 60px;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .expertises__card {
    position: relative;
    width: 100%;
    height: auto;
    min-height: auto;
    left: auto !important;
    top: auto !important;
    padding: 32px;
  }

  .expertises__card-bg {
    width: 100%;
    height: 100%;
  }

  .expertises__card-title {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin-bottom: 20px;
  }

  .expertises__card-list {
    position: relative;
    left: auto;
    top: auto;
  }

  /* Quote */
  .quote {
    height: auto;
    padding: 60px 30px;
  }

  .quote__text {
    position: relative;
    width: 100%;
    left: auto;
    top: auto;
    font-size: 56px;
  }

  .quote__description {
    position: relative;
    width: 100%;
    left: auto;
    top: auto;
    margin-top: 40px;
  }

  /* Démarche */
  .demarche {
    height: auto;
    padding: 60px 30px;
  }

  .demarche__header {
    position: relative;
    width: 100%;
    left: auto;
    top: auto;
    height: auto;
  }

  .demarche__kicker,
  .demarche__title,
  .demarche__subtitle {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
  }

  .demarche__subtitle {
    margin-top: 24px;
  }

  .demarche__timeline {
    position: relative;
    width: 100%;
    left: auto;
    bottom: auto;
    margin-top: 60px;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  .demarche__line {
    display: none;
  }

  .demarche__step {
    position: relative;
    width: 100%;
    height: auto;
    left: auto !important;
    top: auto !important;
  }

  /* Clients */
  .clients {
    height: auto;
    padding: 60px 30px;
  }

  .clients__card {
    position: relative;
    width: 100%;
    height: auto;
    left: auto;
    padding: 40px;
  }

  .clients__card-bg {
    width: 100%;
    height: 100%;
  }

  .clients__kicker,
  .clients__title {
    position: relative;
    left: auto;
    top: auto;
  }

  .clients__title {
    margin-top: 16px;
  }

  .clients__names {
    position: relative;
    width: 100%;
    left: auto;
    top: auto;
    margin-top: 40px;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 32px;
  }

  .clients__stats {
    position: relative;
    width: 100%;
    left: auto;
    top: auto;
    margin-top: 40px;
    gap: 60px;
    justify-content: flex-start;
  }

  /* Engagements */
  .engagements {
    height: auto;
    padding: 60px 30px;
  }

  .engagements__kicker,
  .engagements__title {
    position: relative;
    width: 100%;
    left: auto;
    top: auto;
  }

  .engagements__title {
    margin-top: 16px;
  }

  .engagements__cards {
    position: relative;
    width: 100%;
    left: auto;
    bottom: auto;
    margin-top: 60px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
  }

  .engagements__card {
    position: relative;
    width: calc(50% - 12px);
    height: auto;
    min-height: auto;
    left: auto !important;
    top: auto !important;
    padding: 32px;
  }

  .engagements__card-bg {
    width: 100%;
    height: 100%;
  }

  .engagements__card-title {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin-bottom: 12px;
  }

  .engagements__card-text {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
  }

  /* Contact */
  .contact {
    height: auto;
    padding: 60px 30px;
    display: flex;
    flex-direction: column;
  }

  .contact__kicker,
  .contact__title,
  .contact__subtitle {
    position: relative;
    width: 100%;
    left: auto;
    top: auto;
  }

  .contact__kicker { order: 1; }
  .contact__title { order: 2; margin-top: 16px; }
  .contact__subtitle { order: 3; margin-top: 24px; }

  .contact__form-card {
    order: 4;
    position: relative;
    width: 100%;
    left: auto;
    top: auto;
    margin-top: 40px;
    height: auto;
  }

  .contact__office {
    order: 5;
    position: relative;
    width: 100%;
    left: auto;
    top: auto;
    margin-top: 40px;
  }

  .contact__form-bg {
    width: 100%;
    height: 100%;
  }

  .contact__input,
  .contact__textarea {
    width: 100%;
  }

  .contact__submit {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    margin-top: 24px;
  }

  /* Footer */
  .footer {
    position: relative;
    height: auto;
    padding: 40px 30px;
    top: auto;
  }

  .footer__container {
    position: relative;
    width: 100%;
    left: auto;
    top: auto;
    flex-wrap: wrap;
    gap: 24px;
  }

  .footer__copyright {
    position: relative;
    left: auto;
    top: auto;
    order: 3;
    width: 100%;
    text-align: center;
    margin-top: 24px;
  }

  .footer__menu {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ========== MOBILE (max-width: 768px) ========== */
@media (max-width: 768px) {

  /* Hero */
  .hero {
    padding: 120px 20px 40px;
  }

  .hero__title-line:nth-child(1),
  .hero__title-line:nth-child(2),
  .hero__title-line:nth-child(3) {
    font-size: 36px !important;
    line-height: 120% !important;
  }

  .hero__paragraph {
    margin-top: 32px;
    gap: 20px;
  }

  .hero__description {
    font-size: 16px;
  }

  .hero__buttons {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }

  .hero__buttons .btn-primary,
  .hero__buttons .btn-secondary {
    width: 100%;
    height: 48px;
    justify-content: center;
    padding: 0 24px;
  }

  .ai-badge {
    padding: 8px 16px 8px 8px;
    gap: 10px;
    white-space: normal;
    width: 100%;
    align-self: stretch;
  }

  .ai-badge__text {
    font-size: 13px;
  }

  /* Numbers */
  .numbers__grid {
    grid-template-columns: 1fr;
  }

  .numbers__value {
    font-size: 56px;
  }

  /* Défi */
  .defi__title {
    font-size: 36px;
  }

  .defi__grid {
    grid-template-columns: 1fr;
  }

  /* Positionnement */
  .positionnement__title {
    font-size: 36px;
  }

  .positionnement__stats-value {
    font-size: 72px;
  }

  .positionnement__bar-text {
    font-size: 18px;
  }

  .positionnement__bar-label {
    font-size: 12px;
  }

  /* Approche */
  .approche__title {
    font-size: 36px;
  }

  /* Solutions */
  .solutions__title {
    font-size: 36px;
  }

  .solutions__cards {
    flex-direction: column;
  }

  .solutions__card {
    width: 100%;
  }

  /* Expertises */
  .expertises__title {
    font-size: 36px;
  }

  .expertises__cards {
    grid-template-columns: 1fr;
  }

  /* Quote */
  .quote__text {
    font-size: 36px;
  }

  /* Démarche */
  .demarche__title {
    font-size: 36px;
  }

  .demarche__timeline {
    grid-template-columns: 1fr;
  }

  /* Clients */
  .clients__title {
    font-size: 36px;
  }

  .clients__names {
    gap: 24px;
  }

  .clients__stats {
    flex-direction: column;
    gap: 32px;
  }

  /* Engagements */
  .engagements__title {
    font-size: 36px;
  }

  .engagements__cards {
    flex-direction: column;
  }

  .engagements__card {
    width: 100%;
  }

  /* Contact */
  .contact__title {
    font-size: 36px;
  }

  .contact__form {
    padding: 32px 20px;
  }

  .contact__submit {
    width: 100%;
  }

  /* Footer */
  .footer__logo {
    display: none;
  }

  .footer__menu {
    display: none;
  }

  .footer__container {
    justify-content: center;
  }

  .footer__copyright {
    order: 1;
    width: auto;
    margin-top: 0;
  }
}

/* ========== SECTIONS TOP RESET FOR FLOW LAYOUT ========== */
@media (max-width: 1200px) {
  .hero,
  .numbers,
  .defi,
  .positionnement,
  .approche,
  .solutions,
  .expertises,
  .quote,
  .demarche,
  .clients,
  .engagements,
  .contact,
  .footer {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
  }
}