/* ========================================= */
/* ANTI-FOUC : FADE-IN AU CHARGEMENT DE PAGE */
/* ========================================= */
body {
  animation: fadeInFOUC 1s ease-in-out forwards;
}

@keyframes fadeInFOUC {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}

/* Poppins - Poids 400 (Regular) */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: block; /* Évite le FOUC */
  src: url("/sfsites/c/resource/PoppinsFonts/Poppins-Regular.ttf")
    format("truetype");
}

/* Poppins - Poids 500 (Medium) */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("/sfsites/c/resource/PoppinsFonts/Poppins-Medium.ttf")
    format("truetype");
}

/* Poppins - Poids 600 (SemiBold) */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("/sfsites/c/resource/PoppinsFonts/Poppins-SemiBold.ttf")
    format("truetype");
}

/* Poppins - Poids 700 (Bold) */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url("/sfsites/c/resource/PoppinsFonts/Poppins-Bold.ttf")
    format("truetype");
}

/* =========================================
   1. STYLE DESKTOP & GLOBAL (Basé sur la Photo 1)
   ========================================= */
.banner-text h1 {
  font-family: "Poppins", sans-serif !important;
  font-weight: 700 !important;
  font-size: 80px !important;
  line-height: 64px !important;
  letter-spacing: 0px !important;
  text-align: center !important; /* Centre le texte */
}

/* Force le retour à la ligne ET sauve le bas des lettres */
.banner-text .expert-group {
  display: block !important;
  padding-bottom: 20px !important; /* 👈 LE FIX : Libère l'espace vers le bas pour le 'g', 'p', 'y' */
}

/* =========================================
   2. STYLE MOBILE (Basé sur la Photo 2)
   ========================================= */
@media (max-width: 767px) {
  .banner-text h1 {
    font-size: 28px !important; /* Réduit légèrement pour que le mot "Technologique" rentre entier */
    line-height: 34px !important; /* Resserre les espaces verticaux entre les lignes/mots */

    /* INTERDICTION DE COUPER LES MOTS */
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  .banner-text .expert-group {
    display: block !important;
    padding-bottom: 10px !important; /* Conserve l'espace pour le bas des lettres comme le 'g' et 'p' */
  }
}

/* ========================================= */
/* OVERRIDE EXTRÊME FIGMA : CARTE "POURQUOI NOUS CHOISIR" */
/* ========================================= */

/* 1. Destruction totale de l'ombre avec une spécificité maximale (Balise + Classe) */
dxp_content_layout-card.card-overlay {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  background-color: #ffffff !important;
}

/* 2. VALEURS DESKTOP STRICTES (Basées sur le panneau Figma) */
@media (min-width: 768px) {
  dxp_content_layout-card.card-overlay {
    border-radius: 32px !important;
    padding: 0 32px 0 32px !important;
    box-sizing: border-box !important;
  }

  /* Espacement (Gap) de 32px entre la colonne texte et la colonne image */
  dxp_content_layout-card.card-overlay .dxp-block-two-column-container {
    gap: 32px !important;
    margin: 0 !important; /* Nettoyage des marges parasites de Salesforce */
    width: 100% !important;
  }
}

/* 3. ASSURANCE MOBILE (Garde les proportions mobiles mais sans l'ombre) */
@media (max-width: 767px) {
  dxp_content_layout-card.card-overlay {
    border-radius: 32px !important;
  }
}

/* =========================================
   TYPOGRAPHIE GLOBALE (Desktop & Mobile)
   ========================================= */
.custom-paragraph-2 h2,
.custom-paragraph-2 h4 {
  font-family: "Poppins", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0px !important;
}

/* =========================================
   1. DESKTOP (Photo 1 - 56px) - Cible le H2
   ========================================= */
.custom-paragraph-2 h2 {
  font-size: 56px !important;
  line-height: 64px !important;
}

/* =========================================
   2. MOBILE / TABLETTE (Photo 2 - 24px) - Cible le H4
   ========================================= */
.custom-paragraph-2 h4 {
  font-size: 24px !important;
  line-height: 32px !important;
}

/* =========================================
   SECURITÉ MEDIA QUERY
   ========================================= */
/* Au cas où le composant Salesforce forcerait l'affichage du h2 sur de petits écrans */
@media (max-width: 768px) {
  .custom-paragraph-2 h2 {
    font-size: 24px !important;
    line-height: 32px !important;
  }
}

.formation-sur-mesure {
  margin: 1rem 3rem 1rem 0 !important;
}

@media (max-width: 768px) {
  .formation-sur-mesure {
    margin: 1rem 0 0 0 !important;
  }
}

.pnc-col {
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 768px) {
  .pnc-col {
    margin: 0 0 1rem 0 !important;
    padding: 0 0 0.5rem 0 !important;
  }
}

.fsm-col {
  margin: 3rem 0 0 0 !important;
}

@media (max-width: 768px) {
  .fsm-col {
    margin: 0 !important;
  }
}

.card-overlay .custom-paragraph-2 {
  margin-bottom: 3rem !important;
}

@media (max-width: 768px) {
  .card-overlay .custom-paragraph-2 {
    margin-bottom: 1rem !important;
  }
}

/* ========================================= */
/* FIX DÉFINITIF : IMAGE CARTE OVERLAY MOBILE*/
/* ========================================= */
@media (max-width: 768px) {
  /* 1. On donne un padding global à la carte blanche */
  .card-overlay {
    padding: 24px !important;
    box-sizing: border-box !important;
  }

  /* 2. LE SECRET : On neutralise les marges négatives de la grille Salesforce 
        qui causent l'étirement sur les grands mobiles (iPhone Pro Max) */
  .card-overlay .dxp-block-two-column-container {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important; /* Force l'empilement */
  }

  /* On supprime les paddings latéraux natifs des colonnes */
  .card-overlay .slds-col {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* 3. L'image retrouve ses propres coins arrondis et reste sagement dans la boîte */
  .card-overlay .dxp-block-image-host,
  .card-overlay .dxp-block-image-host > div[role="img"],
  .card-overlay dxp_content_layout-block-background-image {
    border-radius: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 280px !important;
    margin: 0 !important;
    display: block !important;
  }
}

/* ========================================= */
/* FIX : VERROUILLAGE SCROLL ARRIÈRE-PLAN MENU MOBILE */
/* ========================================= */
@media (max-width: 1024px) {
  /* 1. Bloquer le scroll UNIQUEMENT quand le menu est activement ouvert 
        (quand il n'a pas slds-hide ni aria-hidden="true") */
  body:has(
    .exp-mobile-mega-menu__dialog:not(.slds-hide):not([aria-hidden="true"])
  ) {
    overflow: hidden !important;
    touch-action: none !important;
  }

  /* 2. Empêcher le scroll du menu d'entraîner la page (Scroll chaining) */
  .exp-mobile-mega-menu__dialog,
  .exp-mobile-mega-menu__menu-content {
    overscroll-behavior: contain !important;
  }

  /* 3. S'assurer que le contenu à l'intérieur du menu reste parfaitement scrollable */
  .exp-mobile-mega-menu__body,
  .exp-mobile-mega-menu__body-list {
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ========================================= */
/* FIX : VERROUILLAGE SCROLL ARRIÈRE-PLAN MENU MOBILE */
/* ========================================= */
@media (max-width: 1024px) {
  /* 1. Bloquer le body (Fonctionne principalement pour les navigateurs de bureau/Android) */
  body:has(
    .exp-mobile-mega-menu__dialog:not(.slds-hide):not([aria-hidden="true"])
  ),
  html:has(
    .exp-mobile-mega-menu__dialog:not(.slds-hide):not([aria-hidden="true"])
  ) {
    overflow: hidden !important;
  }

  /* 2. LE SECRET POUR LE FOND TRANSPARENT : 
        On désactive tout geste tactile sur l'ensemble du calque du menu (y compris le fond sombre) */
  .exp-mobile-mega-menu__dialog:not(.slds-hide):not([aria-hidden="true"]) {
    overscroll-behavior: none !important;
    touch-action: none !important; /* Empêche le doigt de scroller quand on touche le fond sombre */
  }

  /* 3. RÉACTIVATION DU SCROLL : 
        On autorise le défilement vertical UNIQUEMENT dans la liste (la zone blanche) */
  .exp-mobile-mega-menu__body,
  .exp-mobile-mega-menu__body-list {
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important; /* Réactive le scroll vertical avec le doigt ici */
    -webkit-overflow-scrolling: touch !important; /* Garde la fluidité native sur iOS */
  }
}

/* ========================================= */
/* OVERRIDE : ELLIPSIS UNIQUEMENT SUR LE DERNIER ÉLÉMENT DU FIL D'ARIANE */
/* ========================================= */

/* 1. Le conteneur global reste sur une seule ligne strictement */
.custom-fil-ariane .slds-breadcrumb,
.custom-category-fil .breadcrumb-list {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* 2. LES PREMIERS LIENS : Ils gardent leur taille complète, on interdit de les couper */
.custom-fil-ariane .slds-breadcrumb__item:not(:last-child),
.custom-category-fil .breadcrumb-list li:not(:last-child) {
  flex-shrink: 0 !important; /* 👈 Interdit au navigateur d'écraser ces éléments */
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

.custom-fil-ariane .slds-breadcrumb__item:not(:last-child) a,
.custom-fil-ariane .slds-breadcrumb__item:not(:last-child) span,
.custom-category-fil .breadcrumb-list li:not(:last-child) a,
.custom-category-fil .breadcrumb-list li:not(:last-child) span {
  overflow: visible !important;
  text-overflow: clip !important; /* Retire les '...' s'ils étaient appliqués */
  white-space: nowrap !important;
  display: inline-block !important;
}

/* 3. LE TOUT DERNIER LIEN : C'est le seul qui a le droit de s'écraser avec les (...) */
.custom-fil-ariane .slds-breadcrumb__item:last-child,
.custom-category-fil .breadcrumb-list li:last-child {
  flex: 0 1 auto !important; /* 👈 Autorise le rétrécissement UNIQUEMENT ici */
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  overflow: hidden !important;
}

.custom-fil-ariane .slds-breadcrumb__item:last-child a,
.custom-fil-ariane .slds-breadcrumb__item:last-child span,
.custom-category-fil .breadcrumb-list li:last-child a,
.custom-category-fil .breadcrumb-list li:last-child span {
  overflow: hidden !important;
  text-overflow: ellipsis !important; /* 👈 Applique les '...' juste pour lui */
  white-space: nowrap !important;
  display: block !important;
  max-width: 100% !important;
}

/* 4. Les chevrons (>) restent toujours protégés et visibles */
.custom-fil-ariane .slds-breadcrumb__item::before,
.custom-category-fil .breadcrumb-list li p[aria-hidden="true"] {
  flex-shrink: 0 !important;
  display: inline-block !important;
}

/* ========================================= */
/* FIX DÉFINITIF : ALIGNEMENT DE L'ENCADRÉ "EN SAVOIR PLUS" */
/* ========================================= */

/* 1. On laisse la section et les lignes Salesforce s'étendre à 100% */
@media (min-width: 1025px) {
  community_layout-section:has(.custom-ensavoir-plus),
  community_layout-section:has(.custom-ensavoir-plus) .columns-content,
  community_layout-section:has(.custom-ensavoir-plus) .columns,
  community_layout-section:has(.custom-ensavoir-plus) dxp_layout-column {
    --dxp-g-root-max-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ========================================= */
/* FIX DÉFINITIF : AUGMENTATION DES MARGES (ALIGNEMENT LIGNES ROUGES) */
/* ========================================= */
@media (min-width: 1025px) {
  dxp_layout-columns.custom-ensavoir-plus,
  .custom-ensavoir-plus {
    /* On laisse la largeur s'adapter automatiquement aux marges */
    width: auto !important;
    max-width: none !important;

    /* 👇 C'EST ICI QU'ON COMPRESSE LE BLOC VERS L'INTÉRIEUR 👇 */
    /* Change le "12rem" en "15rem", "20rem", etc., jusqu'à ce que 
           le bord blanc touche parfaitement ta ligne rouge. */
    margin-left: 5rem !important;
    margin-right: 7rem !important;
  }
}

@media (min-width: 2600px) {
  dxp_layout-columns.custom-ensavoir-plus,
  .custom-ensavoir-plus {
    /* 👇 C'EST ICI QU'ON COMPRESSE LE BLOC VERS L'INTÉRIEUR 👇 */
    /* Change le "12rem" en "15rem", "20rem", etc., jusqu'à ce que 
           le bord blanc touche parfaitement ta ligne rouge. */
    margin-left: 6rem !important;
    margin-right: 8rem !important;
  }
}

@media (min-width: 3000px) {
  dxp_layout-columns.custom-ensavoir-plus,
  .custom-ensavoir-plus {
    /* 👇 C'EST ICI QU'ON COMPRESSE LE BLOC VERS L'INTÉRIEUR 👇 */
    /* Change le "12rem" en "15rem", "20rem", etc., jusqu'à ce que 
           le bord blanc touche parfaitement ta ligne rouge. */
    margin-left: 9rem !important;
    margin-right: 11rem !important;
  }
}