/*
 * ABC PointCom — couche Smart/Tab uniquement.
 *
 * Règle de sécurité : ce fichier n'est chargé qu'à max-width: 991px.
 * Les feuilles PC maîtresses ne sont pas modifiées par cette couche.
 */

@media (max-width: 991px) {
  /* Base responsive : empêcher les débordements horizontaux. */
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  *, *::before, *::after { box-sizing: border-box; }
  img { max-width: 100%; }

  /* =========================
     EN-TÊTE + MENU SMART/TAB
     ========================= */
  .abc-header {
    height: auto !important;
    min-height: 0 !important;
    background: #000 !important;
    position: relative !important;
  }

  .abc-header .abc-sheet {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .abc-menu {
    position: relative !important;
    width: 48px !important;
    flex: 0 0 48px !important;
    z-index: 100000 !important;
  }

  .abc-menu .menu-collapse { display: block !important; }

  .abc-menu .abc-hamburger-link {
    display: flex !important;
    width: 48px !important;
    height: 48px !important;
    padding: 10px !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ff6300 !important;
    color: #000 !important;
    border-radius: 7px !important;
  }

  .abc-menu .abc-hamburger-link svg { width: 28px !important; height: 28px !important; }
  .abc-menu .abc-custom-menu.abc-nav-container { display: none !important; }

  .abc-header .abc-group-elements-1 {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
  }

  .abc-header .abc-group-elements-1 .abc-text-1,
  .abc-header .abc-group-elements-1 .abc-text-2 {
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .abc-header .abc-group-elements-1 .abc-text-1 { font-size: 20px !important; line-height: 1.2 !important; }
  .abc-header .abc-group-elements-1 .abc-text-2 { margin-top: 3px !important; font-size: 13px !important; line-height: 1.25 !important; color: #ff6300 !important; }
  .abc-header > .abc-sheet > .abc-group.abc-group-1 { display: none !important; }

  /* Menu ouvert : le JS existant ajoute .abc-open/.open. */
  .abc-menu .abc-nav-container-collapse {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 100001 !important;
    transform: none !important;
  }

  .abc-menu.open .abc-nav-container-collapse,
  .abc-menu .abc-nav-container-collapse.abc-open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .abc-menu .abc-nav-container-collapse .abc-sidenav {
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    min-height: 100vh !important;
    padding: 70px 14px 24px !important;
    overflow-y: auto !important;
    background: #000 !important;
  }

  .abc-menu .abc-nav-container-collapse .abc-popupmenu-items {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .abc-menu .abc-nav-container-collapse .abc-nav-item { width: auto !important; min-width: 0 !important; }

  .abc-menu .abc-nav-container-collapse .abc-nav-link {
    width: 100% !important;
    min-height: 48px !important;
    padding: 9px 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    color: #fff !important;
    border: 1px solid #ff6300 !important;
  }

  .abc-menu .abc-nav-container-collapse .abc-language-nav-item {
    grid-column: 1 / -1 !important;
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding-top: 12px !important;
  }

  .abc-menu .abc-nav-container-collapse .abc-language-separator { display: none !important; }
  .abc-menu .abc-nav-container-collapse .abc-language-link { width: auto !important; min-width: 58px !important; }
  .abc-menu .abc-nav-container-collapse .abc-menu-close { position: absolute !important; top: 12px !important; right: 14px !important; width: 44px !important; height: 44px !important; z-index: 100002 !important; }
  .abc-menu .abc-nav-container-collapse .abc-menu-close:before { color: #ff6300 !important; font-size: 32px !important; line-height: 44px !important; }

  /* =========================
     ACCUEIL SMART/TAB
     ========================= */
  #section-accueil {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 28px 10px 30px !important;
    background: #000 !important;
    overflow: hidden !important;
  }

  #section-accueil > .abc-image-1 {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    background: #000 !important;
    background-image: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    position: static !important;
  }

  #section-accueil > .abc-image-1 > .abc-group-elements-1 {
    order: 1 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 26px !important;
    padding: 0 !important;
    position: static !important;
  }

  #section-accueil > .abc-image-1 > .abc-group-elements-1 > h1 {
    width: 100% !important;
    margin: 0 0 4px !important;
    text-align: center !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  #section-accueil .abc-group-elements-1 .abc-text-1 { font-size: 25px !important; }
  #section-accueil .abc-group-elements-1 .abc-text-2,
  #section-accueil .abc-group-elements-1 .abc-text-3,
  #section-accueil .abc-group-elements-1 .abc-text-4 { font-size: 13px !important; color: #fff !important; }

  /* Les deux colonnes utilisent les éléments HTML existants. */
  #section-accueil .abc-group-elements-2,
  #section-accueil .abc-group-elements-3 {
    flex: 0 0 calc(50% - 6px) !important;
    width: calc(50% - 6px) !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
  }

  #section-accueil .abc-group-elements-2 { order: 2 !important; margin-right: 12px !important; }
  #section-accueil .abc-group-elements-3 { order: 3 !important; margin-left: 0 !important; }

  #section-accueil .abc-group-elements-2 > .abc-shape,
  #section-accueil .abc-group-elements-2 > .abc-line,
  #section-accueil .abc-group-elements-3 > .abc-shape,
  #section-accueil .abc-group-elements-3 > .abc-line { display: none !important; }

  #section-accueil .abc-group-elements-2 h2,
  #section-accueil .abc-group-elements-3 h2,
  #section-accueil .abc-smart-service-item {
    width: 100% !important;
    min-height: 54px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 11px 7px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-style: italic !important;
    color: #fff !important;
    border: 1px solid #ff6300 !important;
    overflow-wrap: anywhere !important;
  }

  /* La colonne droite reprend exactement le même principe que la colonne gauche :
     le conteneur ne porte aucune bordure et chaque service possède sa propre case. */
  #section-accueil .abc-group-elements-3 h2 {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    border: 0 !important;
    background: transparent !important;
  }

  /* Les <br> appartiennent à la composition PC et sont masqués uniquement en Smart/Tab. */
  #section-accueil .abc-group-elements-3 h2 > br { display: none !important; }

  #section-accueil .abc-group-elements-3 h2 > .abc-smart-service-item {
    width: 100% !important;
    min-height: 54px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 11px 7px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-style: italic !important;
    color: #fff !important;
    border: 1px solid #ff6300 !important;
    overflow-wrap: anywhere !important;
  }

  #section-accueil .abc-text-11 {
    order: 4 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: #ff6300 !important;
  }

  /* =========================
     REFERENCES / ABOUT US
     ========================= */
  #section-references,
  #section-references .abc-carousel-inner,
  #section-references .abc-carousel-item,
  #section-references .abc-sheet-1 {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
  }

  #section-references .abc-carousel-item {
    padding: 26px 14px 32px !important;
    background: #fff !important;
    color: #111 !important;
    overflow: visible !important;
  }

  #section-references .abc-image-1 { display: none !important; }
  #section-references .abc-text-1,
  #section-references .abc-text-2,
  #section-references .abc-text-3 {
    position: static !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    text-align: center !important;
    color: #111 !important;
  }
  #section-references .abc-text-1 { font-size: 25px !important; color: #ff6300 !important; }
  #section-references .abc-text-2 { font-size: 17px !important; }
  #section-references .abc-text-3 { font-size: 24px !important; color: #ff6300 !important; margin-top: 16px !important; }

  #section-references .abc-group-1,
  #section-references .abc-image-3,
  #section-references .abc-group-elements-1 {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
  }

  #section-references .abc-image-2 {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  #section-references .abc-image-3 {
    background-image: url("images/afa-tech-bg.png") !important;
    background-size: cover !important;
    background-position: center !important;
    border: 2px solid #ff6300 !important;
    border-radius: 10px !important;
    padding: 18px 12px !important;
    overflow: visible !important;
  }

  #section-references .abc-text-4 {
    width: 100% !important;
    margin: 0 !important;
    color: #111 !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
  }

  #section-references .abc-image-4,
  #section-references .abc-image-5,
  #section-references .abc-btn-1 {
    position: static !important;
    display: block !important;
    margin: 16px auto !important;
  }

  #section-references .abc-image-4 { width: 94px !important; height: 94px !important; }
  #section-references .abc-image-5 { width: 100% !important; height: auto !important; }

  /* =========================
     AFA SYSTEMS
     ========================= */
  #section-afa-systems,
  #section-afa-systems .abc-sheet-1 {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
  }

  #section-afa-systems {
    padding: 28px 14px 34px !important;
    background: #000 !important;
    overflow: hidden !important;
  }

  #section-afa-systems .abc-image-1,
  #section-afa-systems .abc-image-2 { display: none !important; }
  #section-afa-systems .abc-image-3 {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: 280px !important;
    object-fit: cover !important;
    margin: 0 0 20px !important;
  }

  #section-afa-systems .abc-group-elements-1 {
    position: static !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #section-afa-systems .abc-group-elements-1 > * {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    overflow-wrap: anywhere !important;
  }

  #section-afa-systems .abc-text-1 { font-size: 27px !important; text-align: center !important; color: #ff6300 !important; }
  #section-afa-systems .abc-text-2,
  #section-afa-systems .abc-text-3,
  #section-afa-systems .abc-text-4,
  #section-afa-systems .abc-text-5 { font-size: 15px !important; color: #fff !important; line-height: 1.55 !important; }
  #section-afa-systems .abc-rotation-parent-1 { display: none !important; }

  /* =========================
     CONTACT + MAP
     ========================= */
  #section-contact,
  #section-contact .abc-sheet-1 {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
  }

  #section-contact {
    padding: 26px 14px 34px !important;
    background: #000 !important;
    overflow: hidden !important;
  }

  /* Smart/Tab: the decorative photo is intentionally removed here.
     The contact form and map must remain readable and contained inside
     their own orange borders. */
  #section-contact .abc-image-1 {
    display: none !important;
  }
  #section-contact {
    background: #000 !important;
  }
  #section-contact .abc-sheet-1 {
    position: relative !important;
    z-index: 1 !important;
  }

  #section-contact .abc-group-1 {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 18px !important;
    padding: 8px !important;
    overflow: hidden !important;
    border: 2px solid #ff6300 !important;
    border-radius: 8px !important;
  }

  #section-contact .abc-container-layout-1 { width: 100% !important; padding: 0 !important; }
  #section-contact .abc-map-1 { width: 100% !important; height: 240px !important; min-height: 0 !important; margin: 0 !important; overflow: hidden !important; }
  #section-contact .abc-map-1 .embed-responsive { width: 100% !important; height: 100% !important; overflow: hidden !important; }
  #section-contact iframe { display: block !important; width: 100% !important; height: 240px !important; min-height: 0 !important; border: 0 !important; }

  #section-contact .abc-text-1 {
    position: static !important;
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 27px !important;
    color: #ff6300 !important;
  }

  #section-contact .abc-form-1 {
    position: static !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid #ff6300 !important;
    border-radius: 8px !important;
    background: transparent !important;
  }
  #section-contact .abc-form-1 .abc-label {
    color: #fff !important;
  }

  #section-contact .abc-form-1 form { padding: 18px !important; }
  #section-contact input,
  #section-contact textarea,
  #section-contact select { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  #section-contact .abc-btn-1 { display: block !important; width: max-content !important; max-width: 100% !important; margin: 18px auto 0 !important; }
  #section-contact .abc-text-2 { position: static !important; width: 100% !important; margin: 24px 0 0 !important; text-align: center !important; font-size: 18px !important; color: #ff6300 !important; }

  /* =========================
     SERVICES.HTML — FLUX VERTICAL
     ========================= */
  #section-developpement,
  #section-design,
  #section-web,
  #section-numerisation {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 24px 14px 34px !important;
    background: #000 !important;
    overflow: visible !important;
  }

  /* --- Software Development : titre + image + bloc orange texte blanc. */
  /* Software Development : la section reste dans le flux ;
     les éléments internes sont réordonnés uniquement en Smart/Tab. */
  #section-developpement .abc-image-1 {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    position: static !important;
    display: block !important;
    overflow: visible !important;
  }

  #section-developpement .abc-group-1 {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
  }

  #section-developpement .abc-container-layout-1 {
    width: 100% !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    position: static !important;
  }

  /* Tous les éléments doivent participer au même flux :
     aucune position absolue héritée de la mise en page desktop. */
  #section-developpement .abc-container-layout-1 > .abc-text-1,
  #section-developpement .abc-container-layout-1 > .abc-image-2,
  #section-developpement .abc-container-layout-1 > .abc-group-2,
  #section-developpement .abc-container-layout-1 > .abc-btn-1 {
    position: static !important;
    float: none !important;
    transform: none !important;
  }

  #section-developpement .abc-text-1 {
    order: 1 !important;
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 27px !important;
    color: #fff !important;
  }

  #section-developpement .abc-image-2 {
    /* Smart/Tab : l'image vient après le bloc descriptif orange. */
    order: 3 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 18px !important;
    border-radius: 7px !important;
  }

  #section-developpement .abc-group-2 {
    /* Smart/Tab : bloc orange placé entre le titre et l'image. */
    order: 2 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    background: #ff6300 !important;
    background-image: none !important;
    color: #fff !important;
    border-radius: 8px !important;
    overflow: visible !important;
    transform: none !important;
    animation: none !important;
  }

  /* Les animations desktop ne doivent pas masquer le bloc sur Smart/Tab. */
  #section-developpement .abc-group-2,
  #section-developpement .abc-group-2 * {
    animation: none !important;
    visibility: visible !important;
  }

  #section-developpement .abc-container-layout-2 { padding: 20px 18px !important; }
  #section-developpement .abc-text-2 { width: 100% !important; margin: 0 !important; color: #fff !important; font-size: 15px !important; line-height: 1.55 !important; }
  #section-developpement .abc-btn-1 { order: 4 !important; display: block !important; width: max-content !important; max-width: 100% !important; margin: 18px auto 0 !important; padding: 14px 34px !important; }

  /* --- Design & Communication : carte blanche avec son image. */
  #section-design .abc-sheet-1 { width: 100% !important; min-height: 0 !important; height: auto !important; padding: 0 !important; position: static !important; }
  #section-design .abc-image-1 { display: block !important; width: 100% !important; height: auto !important; margin: 0 0 18px !important; position: static !important; }
  #section-design .abc-shape-1,
  #section-design .abc-shape-2,
  #section-design .abc-shape-3 { display: none !important; }
  #section-design .abc-group-1 { position: static !important; width: 100% !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: #eee !important; border-radius: 8px !important; }
  #section-design .abc-container-layout-1 { padding: 22px 18px !important; }
  #section-design .abc-text-1 { margin: 0 0 16px !important; text-align: center !important; font-size: 24px !important; }
  #section-design .abc-text-2 { margin: 0 !important; font-size: 15px !important; line-height: 1.55 !important; }
  #section-design .abc-btn-1 { display: block !important; width: max-content !important; margin: 18px auto 0 !important; }

  /* --- Web Services : carte blanche + image, sans hauteur artificielle. */
  #section-web .abc-sheet-1 { width: 100% !important; min-height: 0 !important; height: auto !important; padding: 0 !important; position: static !important; }
  #section-web .abc-shape-1 { display: block !important; position: static !important; width: 100% !important; height: 120px !important; margin: 0 0 18px !important; background: #ff6300 !important; }
  #section-web .abc-group-1 { position: static !important; width: 100% !important; min-height: 0 !important; height: auto !important; margin: 0 0 18px !important; padding: 0 !important; }
  #section-web .abc-container-layout-1 { padding: 0 !important; }
  #section-web .abc-group-2 { width: 100% !important; min-height: 0 !important; height: auto !important; margin: 0 !important; background: #eee !important; border-radius: 8px !important; }
  #section-web .abc-container-layout-2 { padding: 22px 18px !important; }
  #section-web .abc-group-elements-1 { width: 100% !important; min-height: 0 !important; height: auto !important; margin: 0 !important; }
  #section-web .abc-text-1 { margin: 0 0 14px !important; text-align: center !important; font-size: 24px !important; }
  #section-web .abc-text-2 { margin: 0 !important; font-size: 15px !important; line-height: 1.55 !important; }
  #section-web .abc-btn-1 { display: block !important; width: max-content !important; margin: 18px auto 0 !important; }
  #section-web .abc-group-3 { position: static !important; width: 100% !important; min-height: 0 !important; height: auto !important; margin: 0 !important; }
  #section-web .abc-container-layout-3 { padding: 0 !important; }
  #section-web .abc-group-3 .abc-image-1 { display: block !important; width: 100% !important; height: auto !important; margin: 0 0 18px !important; }
  #section-web .abc-image-2 { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; }

  /* --- Digitalization : composition en flux, sans grands négatifs. */
  #section-numerisation .abc-sheet-1 { width: 100% !important; min-height: 0 !important; height: auto !important; padding: 0 !important; }
  #section-numerisation .abc-group-elements-1 { width: 100% !important; min-height: 0 !important; height: auto !important; margin: 0 0 18px !important; display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 10px !important; }
  #section-numerisation .abc-image-1,
  #section-numerisation .abc-image-2,
  #section-numerisation .abc-image-3 { position: static !important; width: 100% !important; height: auto !important; min-height: 130px !important; margin: 0 !important; }
  #section-numerisation .abc-group-1 { position: static !important; width: 100% !important; min-height: 0 !important; height: auto !important; margin: 0 !important; }
  #section-numerisation .abc-container-layout-1 { padding: 22px 18px !important; }
  #section-numerisation .abc-group-elements-2 { width: 100% !important; min-height: 0 !important; height: auto !important; margin: 0 !important; }
  #section-numerisation .abc-text-1 { margin: 0 0 14px !important; text-align: center !important; font-size: 24px !important; }
  #section-numerisation .abc-text-2 { margin: 0 !important; font-size: 15px !important; line-height: 1.55 !important; }
  #section-numerisation .abc-btn-1 { display: block !important; width: max-content !important; margin: 18px auto 0 !important; }
}

@media (max-width: 575px) {
  #section-accueil .abc-group-elements-2,
  #section-accueil .abc-group-elements-3 { flex-basis: calc(50% - 5px) !important; width: calc(50% - 5px) !important; }
  #section-accueil .abc-group-elements-2 { margin-right: 10px !important; }
  #section-accueil .abc-group-elements-2 h2,
  #section-accueil .abc-smart-service-item { font-size: 12px !important; min-height: 52px !important; }
  #section-developpement .abc-text-1,
  #section-design .abc-text-1,
  #section-web .abc-text-1,
  #section-numerisation .abc-text-1 { font-size: 23px !important; }
}

/* ================================================================
   FINAL SMART/TAB CORRECTIONS — 2026-08-30
   These rules are restricted to screens <= 991px and therefore do
   not alter the desktop/PC layout.
   ================================================================ */
@media (max-width: 991px) {
  /* HOME: each of the five right-column services gets its own box.
     The desktop markup groups them in one H2, so the spans are used
     as the individual Smart/Tab service items. */
  #section-accueil .abc-group-elements-3 {
    border: 0 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    position: static !important;
  }
  #section-accueil .abc-group-elements-3 h2 {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    color: #fff !important;
    background: transparent !important;
  }
  #section-accueil .abc-group-elements-3 h2 > .abc-smart-service-item {
    display: flex !important;
    width: 100% !important;
    min-height: 54px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 11px 7px !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-style: italic !important;
    color: #fff !important;
    border: 1px solid #ff6300 !important;
    box-sizing: border-box !important;
  }
  #section-accueil .abc-group-elements-3 h2 > br { display: none !important; }

  /* REFERENCES: eliminate any inherited desktop/carousel height that
     can create a black empty page before AFA Systems. */
  #section-references,
  #section-references .abc-carousel-inner,
  #section-references .abc-carousel-item,
  #section-references .abc-sheet-1 {
    height: auto !important;
    min-height: 0 !important;
  }
  #section-references .abc-text-2::before,
  #section-references .abc-text-2::after { content: none !important; }

  /* AFA SYSTEMS: start the section immediately and keep its content in
     normal document flow. */
  #section-afa-systems {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 12px !important;
    padding-bottom: 28px !important;
  }
  #section-afa-systems .abc-image-3 {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 260px !important;
    margin: 0 0 18px !important;
    object-fit: cover !important;
  }

  /* CONTACT MAP: remove the orange map frame completely, as requested.
     The map itself remains contained and responsive. */
  #section-contact .abc-group-1 {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 0 18px !important;
    background: transparent !important;
    overflow: hidden !important;
  }
  #section-contact .abc-map-1,
  #section-contact .abc-map-1 .embed-responsive,
  #section-contact iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: 240px !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  /* SERVICES — SOFTWARE DEVELOPMENT: force the requested order in a
     real CSS grid so the existing desktop HTML is not reordered for PC. */
  #section-developpement .abc-container-layout-1 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "title"
      "description"
      "image"
      "button" !important;
    align-items: stretch !important;
    gap: 0 !important;
  }
  #section-developpement .abc-container-layout-1 > .abc-text-1 {
    grid-area: title !important;
    position: static !important;
    width: 100% !important;
    margin: 0 0 18px !important;
  }
  #section-developpement .abc-container-layout-1 > .abc-group-2 {
    grid-area: description !important;
    position: static !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #ff6300 !important;
    color: #fff !important;
    border-radius: 8px !important;
    overflow: visible !important;
    animation: none !important;
    transform: none !important;
  }
  #section-developpement .abc-container-layout-1 > .abc-image-2 {
    grid-area: image !important;
    position: static !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 18px !important;
    transform: none !important;
  }
  #section-developpement .abc-container-layout-1 > .abc-btn-1 {
    grid-area: button !important;
    position: static !important;
    display: block !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    transform: none !important;
  }
  #section-developpement .abc-container-layout-2 {
    padding: 20px 18px !important;
  }
  #section-developpement .abc-container-layout-2 .abc-text-2 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  /* SERVICES — remove the large orange decorative band between the
     Design & Communication and Web Services sections. */
  #section-web .abc-shape-1 { display: none !important; }
  #section-web .abc-sheet-1 { padding-top: 0 !important; }

  /* SERVICES — remove the three circular decorative images that caused
     the large black empty area. Keep the Digitalization text/card. */
  #section-numerisation .abc-group-elements-1 {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #section-numerisation .abc-image-1,
  #section-numerisation .abc-image-2,
  #section-numerisation .abc-image-3 { display: none !important; }
  #section-numerisation .abc-group-1 {
    position: static !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
  }
}

@media (max-width: 991px) {
  /* REFERENCES: three project actions are balanced in one vertical stack. */
  #section-references .abc-group-elements-1 {
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    align-items:center !important;
    justify-items:center !important;
    margin:18px 0 0 !important;
  }
  #section-references .abc-group-elements-1 .abc-image-4,
  #section-references .abc-group-elements-1 .abc-image-5,
  #section-references .abc-group-elements-1 .abc-btn-1 {
    position:static !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:88% !important;
    max-width:320px !important;
    height:64px !important;
    min-height:64px !important;
    margin:0 !important;
    padding:6px 12px !important;
    box-sizing:border-box !important;
    object-fit:contain !important;
  }
  #section-references .abc-group-elements-1 .abc-image-4,
  #section-references .abc-group-elements-1 .abc-image-5 {
    border:1px solid #ff6300 !important;
    border-radius:8px !important;
    background:#fff !important;
  }
  #section-references .abc-group-elements-1 .abc-image-4 { width:88% !important; object-fit:contain !important; }
  #section-references .abc-group-elements-1 .abc-image-5 { object-fit:contain !important; }
  #section-references .abc-group-elements-1 .abc-btn-1 { color:#fff !important; background:#ff6300 !important; border:1px solid #ff6300 !important; border-radius:8px !important; }
}