et son conteneur direct */
/* 1. On remet le parent en comportement normal pour annuler les 3 colonnes */
.section-qualiopi .custom-btn-qualiopi {
display: block !important;
width: 100% !important;
}
/* 2. On cache les balises fantômes de Salesforce qui perturbent l'affichage */
.section-qualiopi .custom-btn-qualiopi experience-responsive:empty {
display: none !important;
}
/* 3. On force le bouton cliquable à prendre toute la place et à centrer le texte */
.section-qualiopi .custom-btn-qualiopi .container,
.section-qualiopi .custom-btn-qualiopi .slds-button {
width: 100% !important;
max-width: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
white-space: nowrap !important; /* Empêche le texte de s'écraser sur 2 lignes */
}
/* Création de la puce personnalisée */
.custom-qualiopi-list li::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 8px !important; /* Aligne la puce sur la première ligne */
width: 2px !important;
height: 2px !important;
background-color: #000000 !important;
border-radius: 50% !important;
display: inline-block !important;
}
}
/* 4. SÉCURITÉS */
.section-qualiopi .background-image-overlay {
display: none !important;
}
.section-qualiopi .columns-content {
position: relative !important;
z-index: 2 !important;
}
/* ðŸâ€Âµ ========================================= */
/* ðŸâ€Âµ 10. SECTION QUALIOPI : Texte et logo */
/* ðŸâ€Âµ ========================================= */
.custom-qualiopi-list ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.custom-qualiopi-list li {
position: relative !important;
padding-left: 25px !important; /* Espace pour la puce */
margin-bottom: 24px !important; /* Espacement entre les blocs de texte */
font-family: "Poppins", sans-serif !important;
font-size: 16px !important;
line-height: 1.5 !important;
color: #1a1a1a !important;
}
/* Création de la puce personnalisée */
.custom-qualiopi-list li::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 8px !important; /* Aligne la puce sur la première ligne */
width: 4px !important;
height: 4px !important;
background-color: #000000 !important;
border-radius: 50% !important;
display: inline-block !important;
}
/* Supprime la marge sur le dernier élément */
.custom-qualiopi-list li:last-child {
margin-bottom: 0 !important;
}
/* ðŸâ€Âµ ========================================= */
/* ðŸâ€Âµ 11. SECTION PARTENAIRE : Texte et logo */
/* ðŸâ€Âµ ========================================= */
@media (min-width: 1025px) {
.custom-partner {
margin: 3rem 10rem !important;
}
.custom-partner .custom-paragraph-2 {
margin-bottom: 2rem !important;
}
}
@media (max-width: 1024px) {
.custom-partner {
margin: 2rem 0 !important;
}
.custom-partner .custom-paragraph-2 {
margin-bottom: 2rem !important;
}
}
@media (max-width: 767px) {
/* 1. Fond transparent (Inchangé) */
.custom-partner,
.custom-partner dxp_content_layout-block-flexible,
.custom-partner .dxp-block-flexible-layout,
.custom-partner .dxp-block-flexible-container {
background-color: transparent !important;
background: transparent !important;
}
/* 2. Réduire les logos (Inchangé) */
.custom-partner .custom-section-logo-partner,
.custom-partner .custom-section-logo-partner .image-wrapper,
.custom-partner .custom-section-logo-partner .image-container,
.custom-partner .custom-section-logo-partner img {
width: 70.43px !important;
max-width: 70.43px !important;
height: 14.6px !important;
max-height: 14.6px !important;
object-fit: contain !important;
margin: 0 auto !important;
}
/* 3. FIX: Grille avec alignement strict (Annulation des marges négatives) */
.custom-partner .slds-grid.slds-wrap {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
/* On répartit l'espace proprement ou on centre */
justify-content: center !important;
gap: 10px !important;
/* 🚨 LE SECRET EST ICI : on écrase les marges négatives de Salesforce */
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
}
/* 4. FIX: Éléments de la grille sans paddings parasites */
.custom-partner .dxp-grid-item {
width: 30% !important;
min-width: 30% !important;
max-width: 30% !important;
flex: 0 0 30% !important;
/* 🚨 On met le padding à 0 pour éviter que ça ne pousse la grille vers l'extérieur */
padding: 5px 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
}
/* ðŸâ€Âµ ========================================= */
/* ðŸâ€Âµ 13. CARD OVERLAY (FORMATION) */
/* ðŸâ€Âµ ========================================= */
.card-overlay {
/* 1. Positionnement pour chevaucher (Toujours -200px) */
margin-top: -200px !important;
position: relative;
z-index: 10;
/* 2. Fond et Forme MIS À JOUR */
background-color: #ffffff !important; /* Fond blanc opaque */
border-radius: 55px !important; /* 4 COINS ARRONDIS Ã 40px */
/* 3. La Bordure MISE À JOUR (SUPPRIMÉE) */
border: none !important; /* Pas de bordure visible */
padding: 25px;
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.1) !important;
}
@media (max-width: 767px) {
/* 1. Forcer la grille en colonne classique (empêcher le reverse ou l'empilement natif) */
.card-overlay .dxp-block-two-column-container {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
}
/* 2. Forcer l'image (Child 1) Ã s'afficher en PREMIER (en haut) */
.card-overlay .dxp-block-two-column-container > .slds-col:nth-of-type(1) {
order: 1 !important;
width: 100% !important;
display: block !important;
/* Optionnel : Assure que le bloc image garde une hauteur minimale sur mobile */
min-height: 250px !important;
}
/* 3. Forcer le texte (Child 2) Ã s'afficher en SECOND (en bas) */
.card-overlay .dxp-block-two-column-container > .slds-col:nth-of-type(2) {
order: 2 !important;
width: 100% !important;
display: block !important;
}
/* 1. Forcer le conteneur du bouton à prendre 100% de la largeur */
.card-overlay .custom-btn-choisir {
display: block !important;
width: 100% !important;
}
/* 2. Cacher les balises experience-responsive fantômes (vides) de Salesforce */
.card-overlay .custom-btn-choisir experience-responsive:empty {
display: none !important;
}
/* 3. Forcer le lien (le bouton lui-même) et son conteneur à remplir l'espace et centrer le texte */
.card-overlay .custom-btn-choisir .container,
.card-overlay .custom-btn-choisir .slds-button {
width: 100% !important;
max-width: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
white-space: nowrap !important;
}
}
/*---------------------------------------------------------------*/
/*--------------------------NewStyle 2-----------------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*--------------------------NewStyle 2-----------------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*--------------------------NewStyle 2-----------------------------*/
/*---------------------------------------------------------------*/
.section-light-blue {
background-color: #dbf5ff;
/* Optionnel : ajoutez du padding pour que le contenu ne touche pas les bords */
padding: 40px 20px;
}
.custom-gradient-banner {
/* Dégradé de gauche à droite */
background: linear-gradient(90deg, #01415e 0%, #009ddf 100%);
overflow: hidden;
/* Arrondi de 80px uniquement en bas (Gauche et Droite) */
/* Syntaxe : top-left top-right bottom-right bottom-left */
border-radius: 0 0 80px 80px;
/* Optionnel : pour bien voir l'effet */
padding: 40px;
color: white;
}
.custom-gradient-banner::after {
content: ""; /* Obligatoire pour afficher le pseudo-élément */
position: absolute; /* Positionne le calque précisément */
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Dégradé : Transparent de 0% à 50%, puis devient noir progressivement jusqu'à 100% */
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0%,
/* Totalement transparent en haut */ rgba(0, 0, 0, 0) 20%,
rgba(0, 0, 0, 0.7) 80%,
/* Reste totalement transparent jusqu'au milieu */ rgba(0, 0, 0, 1) 100%
/* Devient noir vers le bas */
);
z-index: 2; /* Place le calque au-dessus de l'image de fond (z-index 1) */
pointer-events: none;
}
/* Si vous avez une image de fond dans la bannière, assurez-vous qu'elle est en dessous */
.custom-gradient-banner > img {
position: relative;
z-index: 1; /* Image de fond en dessous du calque noir */
}
/* Le texte doit être au-dessus du calque noir pour rester lisible */
.custom-gradient-banner h1,
.custom-gradient-banner p {
position: relative;
z-index: 3; /* Texte au-dessus du calque noir */
color: white; /* Assurez-vous que le texte est blanc pour le contraste */
}
.bg-only-transparent {
/* Supprime toute couleur ou dégradé */
background: transparent;
position: relative;
bottom: -2.5em;
}
.banniere-content {
/* On fait descendre la bannière de quelques rem */
margin-top: 3rem;
/* On s'assure qu'elle touche le bas ou reste bien positionnée */
padding-bottom: 2rem;
}
.interligne-etroit {
line-height: 10%; /* Plus petit que la taille normale du texte */
}
.banner-text {
color: white;
font-size: 80px;
text-align: center;
/* On s'assure que le conteneur ne crée pas de scroll */
overflow: hidden;
}
.banner-text p {
font-weight: 700;
margin: 0; /* Supprime l'espace invisible qui crée le scroll */
line-height: 0.85;
letter-spacing: -1px;
}
/* --- TABLETTE (Écrans inférieurs à 1024px) --- */
@media (max-width: 1024px) {
.banner-text {
font-size: 50px; /* Taille inventée pour tablette */
}
}
/* --- MOBILE (Écrans inférieurs à 768px) --- */
@media (max-width: 768px) {
.banner-text {
font-size: 32px; /* Taille demandée pour mobile */
}
/* On peut aussi ajuster l'arrondi de la bannière sur mobile si besoin */
.custom-gradient-banner {
border-radius: 0 0 40px 40px;
}
}
/*---------------------------------------------------------------*/
/*--------------------------NewStyle latest modif-----------------------------*/
/*---------------------------------------------------------------*/ /*---------------------------------------------------------------*/
/*--------------------------NewStyle latest modif-----------------------------*/
/*---------------------------------------------------------------*/ /*---------------------------------------------------------------*/
/*--------------------------NewStyle latest modif-----------------------------*/
/*---------------------------------------------------------------*/
/* Gère la couleur du titre en rouge */
.error-style h1 {
color: #d93025; /* Un rouge vif pour marquer l'erreur */
margin-bottom: 15px;
}
/* L'icône d'erreur (si tu n'as pas d'image) */
.error-style {
display: flex;
justify-content: center;
align-items: center;
}
.error-style .container {
text-align: center;
background: white;
padding: 40px;
border-radius: 15px;
background: #ffffff;
background-color: #ffffff;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
max-width: 1200px;
width: 100%;
}
.error-icon {
width: 60px;
height: 60px;
background-color: #ffe6e6;
border-radius: 50%;
margin: 0 auto 20px auto;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.error-icon::before,
.error-icon::after {
content: "";
position: absolute;
width: 30px;
height: 4px;
background-color: #d93025;
border-radius: 2px;
}
.error-icon::before {
transform: rotate(45deg);
}
.error-icon::after {
transform: rotate(-45deg);
}
.error-style p {
color: #555;
font-size: 16px;
line-height: 1.6;
}
.error-style .btn {
display: inline-block;
margin-top: 25px;
padding: 12px 25px;
background: #28a745;
color: white;
text-decoration: none;
border-radius: 8px;
transition: 0.3s;
}
/*.custom-pill{
display: none !important;
}*/
/* Cibler le h1 à l'intérieur de banner-text */
.banner-text h1 {
/* 1. Rendre la taille de la police fluide avec clamp() */
/* clamp(Taille_Min, Taille_Ideale_en_vw, Taille_Max) */
font-size: clamp(2rem, 5vw, 4rem) !important;
/* 2. Forcer le passage à la ligne au lieu de déborder */
white-space: normal;
overflow-wrap: break-word;
/* 3. Ajouter une petite marge interne pour éviter que le texte touche le bord exact */
padding-left: 15px;
padding-right: 15px;
}
.custom-article-content {
margin-left: 4rem !important;
margin-right: 4rem !important;
}
@media (max-width: 1024px) {
.custom-article-content {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
.article-formation {
background-color: #dbf5ff;
padding: 40px 20px;
}
/*
.article-formation:not(:has(c-lwc03-thematic-carousel .product-card)) {
background-color: rgb(241, 246, 250) !important;
}*/
.confirmation-style {
display: flex;
justify-content: center;
align-items: center;
}
.confirmation-style .container {
text-align: center;
background: white;
padding: 40px;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
max-width: 1200px;
width: 100%;
}
.confirmation-style .check-icon {
width: 100px;
height: 100px;
border-radius: 50%;
background: #28a745;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto 20px;
}
.confirmation-style .check-icon::after {
content: "\2714";
color: white;
font-size: 50px;
font-weight: bold;
}
.confirmation-style h1 {
color: #28a745;
margin-bottom: 15px;
}
.confirmation-style p {
color: #555;
font-size: 16px;
line-height: 1.6;
}
.confirmation-style .btn {
display: inline-block;
margin-top: 25px;
padding: 12px 25px;
background: #28a745;
color: white;
text-decoration: none;
border-radius: 8px;
transition: 0.3s;
}
/* 1. Appliquer le style de conteneur (fond blanc, radius, padding, largeur) au Rich Text Editor entier */
/* Nous ciblons le conteneur interne du texte enrichi pour éviter les Shadow DOM LWC */
.article-body-long .ql-editor.cb-outputRichText-container {
background-color: #ffffff !important; /* Fond blanc, forcé */
border-radius: 24px !important; /* Bords arrondis de 24px, forcé */
padding: 24px !important; /* Padding interne de 24px, forcé */
margin: 0 auto !important; /* Centrer le bloc s'il est plus large que l'écran */
display: flow-root !important; /* Important pour que le texte wrap autour de l'image (si vous l'ajoutez) */
}
/* ==========================================================================
MÉTHODE BRUTE FORCE : DESTRUCTION DE TOUS LES GAPS
========================================================================== */
/* 1. ON ÉCRASE TOUT : Zéro marge, zéro padding sur absolument tous les éléments */
.article-body-long .cb-outputRichText-container,
.article-body-long .cb-outputRichText-container * {
margin: 0 !important;
padding: 0 !important;
}
/* 2. ÉRADICATION DES RETOURS À LA LIGNE */
.article-body-long .cb-outputRichText-container br {
display: none !important;
}
/* 3. RECONSTRUCTION AU MILLIMÈTRE (Très serré) */
/* Titres */
.article-body-long .cb-outputRichText-container h2 {
color: #01415d !important;
font-weight: 700 !important;
}
.article-body-long .cb-outputRichText-container h3 {
color: #009ddf !important;
font-weight: 600 !important;
}
/* Listes à puces (Obligé de remettre un petit padding gauche sinon on ne voit plus les puces) */
.article-body-long .cb-outputRichText-container ul {
padding-left: 20px !important;
}
.article-body-long .cb-outputRichText-container li {
}
/* Médias (Images et iframe YouTube) : Centrés et serrés */
.article-body-long .cb-outputRichText-container img,
.article-body-long .cb-outputRichText-container iframe {
display: block !important;
margin: 0 auto !important;
max-width: 100% !important;
border-radius: 8px !important;
}
/* Comportement spécifique de la vidéo pour qu'elle s'adapte sans casser la page */
.article-body-long .cb-outputRichText-container iframe {
width: 100% !important;
aspect-ratio: 16 / 9 !important;
height: auto !important;
}
/* Le bloc de citation (si vous l'avez toujours) */
.article-body-long .cb-outputRichText-container strong em,
.article-body-long .cb-outputRichText-container em strong {
display: block !important;
margin: 15px 0 !important;
padding: 15px !important;
background-color: rgb(241, 246, 250) !important;
border-left: 5px solid #009ddf !important;
}
/*===========================================================*/
/* 1. Définir la taille exacte sur le conteneur principal */
.article-image-banner .image-wrapper {
width: 100% !important;
/*max-width: 825px !important;*/
height: 280px !important;
border-radius: 24px !important;
overflow: hidden !important;
margin: 0 auto !important;
}
/* 2. NOUVEAU : Forcer TOUTES les balises intermédiaires de Salesforce à remplir l'espace */
.article-image-banner .image-container,
.article-image-banner .image,
.article-image-banner picture {
width: 100% !important;
height: 100% !important;
display: block !important;
}
/* 3. Appliquer le mode "Fill" (cover) sur l'image elle-même */
.article-image-banner img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important; /* Empêche les marges fantômes sous l'image */
}
/*==================================================================================*/
/* Conteneur des tags */
.tags-container {
display: flex;
flex-direction: row;
gap: 10px;
flex-wrap: wrap;
align-items: center;
margin-top: 16px;
}
/* Style de chaque tag (étiquette) */
.article-tag {
border: 1px solid #ffffff;
border-radius: 32px;
padding: 3px 8px;
color: #ffffff;
font-family: "Poppins", sans-serif;
font-size: 0.85rem;
font-weight: 500;
background-color: transparent;
margin: 0;
white-space: nowrap;
/* 1. Force l'annulation des majuscules globales */
text-transform: none;
}
/* 2. Masque complètement la bordure et l'élément si le champ CMS est vide */
.article-tag:empty {
display: none;
}
@media (max-width: 767px) {
.card-overlay {
/* 2. Fond et Forme MIS À JOUR */
background-color: #ffffff !important; /* Fond blanc opaque */
border-radius: 32px !important; /* 4 COINS ARRONDIS Ã 40px */
padding: 5px 20px 10px 20px;
}
}
/* --- ÉTAT 1 : NORMAL (Au chargement, avant de scroller) --- */
.custom-pill,
dxp_layout-columns.custom-pill {
position: relative !important;
margin-top: 40px !important;
/* Ajout de 'width' à la transition pour que l'étirement vers le plein écran soit fluide */
transition:
width 0.3s ease,
border-radius 0.3s ease,
box-shadow 0.3s ease,
background-color 0.3s ease !important;
z-index: 99999 !important;
}
/* --- ÉTAT 2 : COLLÉ EN HAUT ET PLEIN ÉCRAN (Classe ajoutée par le JS) --- */
.custom-pill.is-stuck,
dxp_layout-columns.custom-pill.is-stuck {
position: fixed !important;
top: 0 !important;
margin-top: 0 !important;
left: 0 !important;
right: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
/* 🚨 LES CHANGEMENTS SONT ICI : */
width: 100% !important; /* Écrase la largeur (calc) pour prendre 100% de l'écran */
border-radius: 0 !important; /* Retire totalement les angles arrondis */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
background-color: #ffffff !important;
}
/* --- MODIFICATIONS DU SOUS-MENU EN MODE STICKY --- */
/* 1. On cible le conteneur du sous-menu quand la pilule globale est en mode "stuck" */
.custom-pill.is-stuck .custom-menu .exp-mega-menu__nav-content-container,
dxp_layout-columns.custom-pill.is-stuck
.custom-menu
.exp-mega-menu__nav-content-container {
/* On enlève le gap (padding-top: 5px) défini dans ton Static Resource */
padding-top: 0 !important;
/* 👉 On met le sous-menu AU-DESSUS de la pilule pour cacher l'ombre qui bave */
z-index: 100000 !important;
}
/* 2. On enlève les arrondis et on force le blanc sur TOUS les layers du sous-menu */
.custom-pill.is-stuck .custom-menu .exp-mega-menu__nav-content-backdrop,
.custom-pill.is-stuck .custom-menu .exp-mega-menu__nav-content-fs,
.custom-pill.is-stuck .custom-menu .exp-mega-menu__nav-content,
dxp_layout-columns.custom-pill.is-stuck
.custom-menu
.exp-mega-menu__nav-content-backdrop,
dxp_layout-columns.custom-pill.is-stuck
.custom-menu
.exp-mega-menu__nav-content-fs,
dxp_layout-columns.custom-pill.is-stuck
.custom-menu
.exp-mega-menu__nav-content {
border-radius: 0 !important;
background-color: #ffffff !important;
box-shadow: none !important; /* On nettoie d'abord toutes les ombres parasites */
}
/* 3. NOUVEAU : On ajoute l'ombre UNIQUEMENT vers le bas sur la couche de fond (backdrop) */
.custom-pill.is-stuck .custom-menu .exp-mega-menu__nav-content-backdrop,
dxp_layout-columns.custom-pill.is-stuck
.custom-menu
.exp-mega-menu__nav-content-backdrop {
/* L'astuce : X=0, Y=12px (pousse vers le bas), Blur=15px, Spread=-8px (rétrécit l'ombre pour qu'elle ne sorte pas en haut) */
box-shadow: 0 12px 15px -8px rgba(0, 0, 0, 0.15) !important;
}
/* 🔵 ========================================================= */
/* 🔵 CONTENEUR PRINCIPAL : POLITIQUE DE CONFIDENTIALITÉ */
/* 🔵 ========================================================= */
.custom-politique-confidentiel {
background-color: #ffffff !important;
border-radius: 24px !important;
padding: 40px !important;
margin-left: 4rem !important;
margin-right: 4rem !important;
box-sizing: border-box !important;
display: block !important;
overflow: hidden !important;
}
/* 🚨 FORCE LE FOND BLANC SUR TOUTE LA HIÉRARCHIE (Sous-conteneurs Salesforce) */
.custom-politique-confidentiel,
.custom-politique-confidentiel div {
background-color: #ffffff !important;
}
@media (max-width: 1024px) {
.custom-politique-confidentiel {
padding: 20px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* 🔵 ========================================================= */
/* 🔵 CONTACT LÉGAL (STRUCTURE ET ESPACEMENTS) */
/* 🔵 ========================================================= */
/* Le conteneur spécifique du texte (Sans Arrondis) */
.contact-legal {
--contact-legal-inline: 22px;
display: block !important;
background: transparent !important; /* Laisse le fond blanc du parent */
border-radius: 0px !important;
margin: 10px 0 !important;
overflow: hidden !important;
}
/* Conteneur de texte interne */
.contact-legal .cb-outputRichText-container {
position: relative !important;
padding: 18px var(--contact-legal-inline) 24px !important;
margin-bottom: 14px !important;
}
/* Ligne bleue tout en bas */
.contact-legal .cb-outputRichText-container::after {
content: "";
position: absolute;
left: var(--contact-legal-inline);
right: var(--contact-legal-inline);
bottom: 0;
height: 1px;
background: #3368b4 !important;
}
/* 🔵 ========================================================= */
/* 🔵 CONTACT LÉGAL (TYPOGRAPHIE COMPLÈTE) */
/* 🔵 ========================================================= */
/* --- 1. GRAND TITRE H1 --- */
.contact-legal h1,
.contact-legal .ql-editor h1,
.contact-legal h1 strong,
.contact-legal .ql-editor h1 strong,
.contact-legal h1 span {
font-family: "Poppins", sans-serif !important;
font-size: 32px !important;
font-weight: 700 !important;
line-height: 40px !important;
color: rgba(12, 17, 19, 1) !important;
}
@media (max-width: 768px) {
.contact-legal h1,
.contact-legal .ql-editor h1,
.contact-legal h1 strong,
.contact-legal .ql-editor h1 strong,
.contact-legal h1 span {
font-size: 24px !important;
}
}
/* --- 2. SOUS-TITRES H4 & FAUX H4 (DIV > STRONG isolé) --- */
/* Typographie (Couleurs et Tailles) */
.contact-legal h4,
.contact-legal .ql-editor h4,
.contact-legal h4 strong,
.contact-legal .ql-editor h4 strong,
.contact-legal h4 span,
.contact-legal .ql-editor div > strong:only-child {
font-family: "Poppins", sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
line-height: 24px !important;
color: rgba(1, 65, 94, 1) !important;
}
/* Marges des sous-titres */
.contact-legal h4,
.contact-legal .ql-editor h4,
.contact-legal .ql-editor div > strong:only-child {
margin-top: 16px !important;
margin-bottom: 6px !important;
padding-top: 0 !important;
border-top: none !important;
display: block !important;
}
/* Ligne de séparation bleue (::before) */
.contact-legal .ql-editor h4:not(:first-of-type)::before,
.contact-legal .ql-editor div > strong:only-child::before {
content: "";
display: block;
border-top: 1px solid #3368b4 !important;
margin: 0 0 16px !important;
}
/* Esquive des sauts de ligne invisibles pour le premier élément */
.contact-legal .ql-editor > div:nth-of-type(1) > strong:only-child::before,
.contact-legal .ql-editor > div:nth-of-type(2) > strong:only-child::before,
.contact-legal .ql-editor > div:nth-of-type(3) > strong:only-child::before {
display: none !important;
}
.contact-legal .ql-editor h4:first-of-type {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* --- 3. TOUS LES AUTRES TEXTES (Paragraphes) --- */
.contact-legal div,
.contact-legal p,
.contact-legal span,
.contact-legal li {
font-family: "Poppins", sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 22px !important;
color: rgba(0, 0, 0, 1) !important;
}
/* Gras normal à l'intérieur d'une phrase */
.contact-legal div strong,
.contact-legal p strong,
.contact-legal li strong {
font-weight: 700 !important;
color: rgba(0, 0, 0, 1) !important;
}
/* --- 4. GESTION DES RETRAITS (INDENTATIONS SALESFORCE) --- */
.contact-legal .ql-indent-1,
.contact-legal .ql-editor .ql-indent-1 {
padding-left: 10px !important;
}
.contact-legal .ql-indent-2,
.contact-legal .ql-editor .ql-indent-2 {
padding-left: 20px !important;
}
/* 🔠========================================================= */
/* 🔠FIX BARRE DE RECHERCHE - ÉCRANS MOYENS (1025px - 1400px) */
/* 🔠========================================================= */
@media screen and (min-width: 1025px) and (max-width: 1400px) {
/* 1. On réduit la taille de base (état inactif) */
.custom-search input.slds-input {
width: 120px !important; /* Réduit par rapport au 125px de base */
}
/* 2. On empêche l'expansion ou on la limite fortement (état actif) */
.custom-search:focus-within input.slds-input,
.custom-search:has(.clear) input.slds-input {
width: 120px !important; /* S'étend beaucoup moins (au lieu de 160px) */
}
}
/* 🔵 ========================================================= */
/* 🔵 RECHERCHE CLOSE SUGGESTIION */
/* 🔵 ========================================================= */
/* --- CLASSE DE FERMETURE FORCÉE (Gérée par le JS) --- */
.force-hide-search-dropdown {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* 🔵 ========================================================= */
/* 🔵 SECTION AVIS CLIENTS (CONTENEUR BLANC) */
/* 🔵 ========================================================= */
.custom-avis {
background-color: #ffffff !important; /* Le fond blanc */
border-radius: 24px !important; /* Les bords arrondis identiques */
/* Marges internes et externes pour que ça respire comme sur Figma */
padding: 40px !important;
margin-left: 4rem !important;
margin-right: 4rem !important;
box-sizing: border-box !important;
display: block !important;
overflow: hidden !important; /* Garde le contenu bien à l'intérieur des bords arrondis */
}
/* Version tablette/mobile (on réduit l'espace interne pour les petits écrans) */
@media (max-width: 1024px) {
.custom-avis {
padding: 20px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* 🔵 ========================================================= */
/* 🔵 SECTION AVIS CLIENTS (CONTENU INTERNE) */
/* 🔵 ========================================================= */
/* --- 1. L'IMAGE (Logo) --- */
.custom-avis .avis-image,
.custom-avis .avis-image img {
width: 60px !important;
height: 60px !important;
object-fit: contain !important; /* Empêche l'image de s'étirer ou se déformer */
display: block !important;
}
/* --- 2. LA DESCRIPTION (Texte de l'avis) --- */
/* On cible toutes les balises internes (em, span, div, p) pour forcer le design */
.custom-avis .avis-description,
.custom-avis .avis-description .ql-editor,
.custom-avis .avis-description .ql-editor div,
.custom-avis .avis-description .ql-editor p,
.custom-avis .avis-description .ql-editor span,
.custom-avis .avis-description .ql-editor em {
font-family: "Poppins", sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 22px !important;
color: rgba(0, 0, 0, 1) !important;
}
/* --- 3. L'INFO UTILISATEUR (Nom et poste) --- */
.custom-avis .avis-info-user,
.custom-avis .avis-info-user .ql-editor,
.custom-avis .avis-info-user .ql-editor div,
.custom-avis .avis-info-user .ql-editor p,
.custom-avis .avis-info-user .ql-editor span {
font-family: "Poppins", sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 20px !important;
color: rgba(0, 105, 180, 1) !important; /* Le bleu Onepoint */
}
/* --- 4. LE GRAND TITRE H2 ("Ils nous font confiance") --- */
/* Version Bureau (Desktop) */
.custom-avis h2,
.custom-avis h2 span,
.custom-avis dxp_base-text-block h2 {
font-family: "Poppins", sans-serif !important;
font-size: 32px !important;
font-weight: 700 !important; /* Bold */
line-height: 40px !important;
letter-spacing: 0px !important;
color: rgba(12, 17, 19, 1) !important; /* Noir onepoint */
margin-bottom: 24px !important;
display: block !important;
}
/* Version Tablette et Mobile */
@media (max-width: 1024px) {
.custom-avis h2,
.custom-avis h2 span,
.custom-avis dxp_base-text-block h2 {
font-size: 24px !important;
line-height: 32px !important;
}
}
/* 🔵 ========================================================= */
/* 🔵 GRILLE MENTIONS LÉGALES (ESPACEMENTS GLOBAUX) */
/* 🔵 ========================================================= */
.custom-grid-mention-legale {
padding-left: 4rem !important; /* 4rem divisé par 2 */
padding-right: 4rem !important; /* 4rem divisé par 2 */
width: 100% !important;
box-sizing: border-box !important;
display: block !important;
}
@media (max-width: 1024px) {
.custom-grid-mention-legale {
padding-left: 0 !important; /* 16px divisé par 2 */
padding-right: 0 !important; /* 16px divisé par 2 */
}
}
/* 🔵 ========================================================= */
/* 🔵 ESPACEMENT ENTRE LES COMPOSANTS DU REPEATER (2rem) */
/* 🔵 ========================================================= */
.custom-grid-mention-legale .dxp-grid-item {
padding-bottom: 2rem !important;
}
/* On enlève l'espace sous le tout dernier composant pour ne pas avoir un vide inutile en bas de la page */
.custom-grid-mention-legale .dxp-grid-item:last-child {
padding-bottom: 0 !important;
}
/* 🔵 ========================================================= */
/* 🔵 MENTIONS LÉGALES (TYPOGRAPHIE FIGMA & CONTENEUR) */
/* 🔵 ========================================================= */
/* --- 1. LE CONTENEUR BLANC --- */
.legal-content {
--legal-content-inline: 22px; /* 44px divisé par 2 */
display: block !important;
background: #ffffff !important;
border-radius: 25px !important;
overflow: hidden !important;
}
.legal-content .cb-outputRichText-container {
position: relative !important;
padding: 18px var(--legal-content-inline) 24px !important;
margin-bottom: 14px !important;
}
/* Ligne bleue tout en bas du conteneur blanc */
.legal-content .cb-outputRichText-container::after {
content: "";
position: absolute;
left: var(--legal-content-inline);
right: var(--legal-content-inline);
bottom: 0;
height: 1px;
background: #3368b4;
}
/* --- 2. GRAND TITRE H1 --- */
.legal-content h1,
.legal-content .ql-editor h1,
.legal-content h1 strong,
.legal-content .ql-editor h1 strong,
.legal-content h1 span {
font-family: "Poppins", sans-serif !important;
font-size: 32px !important;
font-weight: 700 !important;
line-height: 40px !important;
color: rgba(12, 17, 19, 1) !important;
}
@media (max-width: 768px) {
.legal-content h1,
.legal-content .ql-editor h1,
.legal-content h1 strong,
.legal-content .ql-editor h1 strong,
.legal-content h1 span {
font-size: 24px !important;
}
}
/* --- 3. SOUS-TITRES H4 & FAUX H4 (DIV > STRONG isolé) --- */
/* A. Typographie (Couleurs et Tailles) */
.legal-content h4,
.legal-content .ql-editor h4,
.legal-content h4 strong,
.legal-content .ql-editor h4 strong,
.legal-content h4 span,
.legal-content .ql-editor div > strong:only-child {
font-family: "Poppins", sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
line-height: 24px !important;
color: rgba(1, 65, 94, 1) !important;
}
/* B. Marges et Comportement Structurel */
.legal-content h4,
.legal-content .ql-editor h4,
.legal-content .ql-editor div > strong:only-child {
margin-top: 16px !important;
margin-bottom: 6px !important;
padding-top: 0 !important;
border-top: none !important;
display: block !important;
}
/* Ligne de séparation bleue avant les sous-titres (::before) */
.legal-content .ql-editor h4:not(:first-of-type)::before,
.legal-content .ql-editor div > strong:only-child::before {
content: "";
display: block;
border-top: 1px solid #3368b4 !important;
margin: 0 0 16px !important;
}
/* 🚨 LA CORRECTION EST ICI : On cible les 3 premiers DIV pour esquiver les "sauts de ligne" invisibles de Salesforce 🚨 */
.legal-content .ql-editor > div:nth-of-type(1) > strong:only-child::before,
.legal-content .ql-editor > div:nth-of-type(2) > strong:only-child::before,
.legal-content .ql-editor > div:nth-of-type(3) > strong:only-child::before {
display: none !important;
}
.legal-content .ql-editor h4:first-of-type {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* --- 4. TOUS LES AUTRES TEXTES (div, p, etc.) --- */
.legal-content div,
.legal-content p,
.legal-content span,
.legal-content li {
font-family: "Poppins", sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 22px !important;
color: rgba(0, 0, 0, 1) !important;
}
/* Gras normal à l'intérieur d'une phrase (Reste Noir) */
.legal-content div strong,
.legal-content p strong,
.legal-content li strong {
font-weight: 700 !important;
color: rgba(0, 0, 0, 1) !important;
}
/* --- 5. GESTION DES RETRAITS (INDENTATIONS SALESFORCE) --- */
.legal-content .ql-indent-1,
.legal-content .ql-editor .ql-indent-1 {
padding-left: 10px !important;
}
.legal-content .ql-indent-2,
.legal-content .ql-editor .ql-indent-2 {
padding-left: 20px !important;
}
/* 🔵 ========================================================= */
/* 🔵 SECTION "EN SAVOIR PLUS" (COMPOSANT STANDARD CUSTOMISÉ) */
/* 🔵 ========================================================= */
/* --- 1. LE CONTENEUR GLOBAL (La Carte Blanche) --- */
.custom-ensavoir-plus {
background-color: #ffffff !important;
border-radius: 24px !important;
padding: 32px !important; /* Marge interne pour aérer le contenu */
/*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;*/ /* Ombre douce */
margin-left: 4rem !important;
margin-right: 4rem !important;
/* Alignement et largeur identiques à ta pilule et ton header */
max-width: 100vw !important;
box-sizing: border-box !important;
display: block !important;
}
/* --- 2. LE TITRE "En savoir plus" --- */
.custom-titre-savoir-plus h2 {
font-family: "Poppins", sans-serif !important;
font-size: 32px !important;
font-weight: 700 !important;
line-height: 40px !important;
color: #000000 !important;
margin-top: 0 !important;
margin-bottom: 24px !important; /* Espace entre le titre et les onglets */
text-align: left !important;
}
/* --- 3. BARRE D'ONGLETS (Style "Pilules" - Schéma 2) --- */
/* On s'assure que le parent ne force pas le 100% */
.custom-onglet .dxp-tabs-container {
width: auto !important;
display: block !important;
}
/* Le conteneur gris clair qui englobe tous les onglets */
.custom-onglet ul.slds-tabs_default__nav {
background-color: #f4f6f9 !important; /* Fond gris clair global */
border-radius: 50px !important;
padding: 6px !important;
border-bottom: none !important; /* Tue la ligne soulignée native */
display: inline-flex !important;
width: auto !important;
max-width: 100% !important; /* S'adapte au contenu global */
gap: 4px !important;
margin-bottom: 24px !important;
}
/* Désactive les pseudo-éléments de Salesforce (lignes fantômes) */
.custom-onglet ul.slds-tabs_default__nav::after,
.custom-onglet ul.slds-tabs_default__nav::before {
display: none !important;
}
/* --- Stylisation générale d'un onglet (li) --- */
.custom-onglet .dxp-tab {
border-radius: 50px !important;
padding: 8px 20px !important;
border: none !important;
background-color: transparent !important;
height: auto !important;
/* 🚨 LE SECRET POUR QUE L'ONGLET S'ADAPTE AU TEXTE 🚨 */
min-width: 0 !important;
width: max-content !important;
flex: 0 0 max-content !important; /* Ne grandit pas, ne rétrécit pas, épouse le texte */
display: flex !important;
justify-content: center !important;
align-items: center !important;
cursor: pointer !important;
}
/* Écrasement forcé des couleurs et de la coupure de texte (truncate) */
.custom-onglet .dxp-tab dxp_base-text-block,
.custom-onglet .dxp-tab p,
.custom-onglet .dxp-tab .slds-truncate {
background-color: transparent !important;
background: transparent !important;
margin: 0 !important;
padding: 0 !important;
font-family: "Poppins", sans-serif !important;
font-size: 14px !important;
border: none !important;
box-shadow: none !important;
text-align: center !important;
/* 🚨 TUE DÉFINITIVEMENT LES "..." ET LA LIMITE DE SALESFORCE 🚨 */
overflow: visible !important;
text-overflow: clip !important;
white-space: nowrap !important; /* Reste sur une seule ligne */
max-width: none !important; /* Annule la contrainte de largeur de Salesforce */
display: inline-block !important;
}
/* 🔵 ONGLET ACTIF (La Pilule Bleue) */
.custom-onglet .dxp-tab[data-active="true"] {
/* 🚨 NOUVEAU : On applique le dégradé linéaire extrait de Figma 🚨 */
background-image: linear-gradient(
to bottom right,
rgba(0, 205, 241, 1) 0%,
rgba(0, 157, 223, 1) 100%
) !important;
/* On s'assure que la couleur de fond unie est supprimée */
background-color: transparent !important;
}
.custom-onglet .dxp-tab[data-active="true"] p {
color: #ffffff !important;
font-weight: 700 !important;
}
/* ⚪ ONGLETS INACTIFS (Transparents avec texte gris) */
.custom-onglet .dxp-tab[data-active="false"] {
background-color: transparent !important;
transition: background-color 0.2s ease !important;
}
.custom-onglet .dxp-tab[data-active="false"]:hover {
background-color: #e2e8f0 !important; /* Effet de survol */
}
.custom-onglet .dxp-tab[data-active="false"] p {
color: #4a4a4a !important; /* Gris foncé */
font-weight: 600 !important;
}
/* ========================================================= */
/* --- 4. SOUS-TITRES ET CONTENU (AJOUTS DEMANDÉS) */
/* ========================================================= */
.custom-sous-titre h3,
.custom-sous-titre .override-text-style,
.custom-sous-titre p {
font-family: "Poppins", sans-serif !important;
font-size: 20px !important;
font-weight: 700 !important;
line-height: 28px !important;
letter-spacing: 0 !important;
color: rgba(0, 0, 0, 1) !important;
}
.custom-contenu .field-value,
.custom-contenu p,
.custom-contenu li,
.custom-contenu span {
font-family: "Poppins", sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 28px !important;
letter-spacing: 0 !important;
color: rgba(0, 0, 0, 1) !important;
}
/* 📱 ========================================================= */
/* 📱 5. RESPONSIVE MOBILE (Max 768px) - MENU DÉROULANT ONGLET */
/* 📱 ========================================================= */
@media (max-width: 1024px) {
/* 1. Ajustement du conteneur (100% de sa propre colonne) */
.custom-ensavoir-plus {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 24px 16px !important;
box-sizing: border-box !important;
}
/* Destruction locale des espacements Salesforce pour que le contenu respire */
.custom-ensavoir-plus .columns-content,
.custom-ensavoir-plus .columns,
.custom-ensavoir-plus dxp_layout-column,
.custom-ensavoir-plus .column-content {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
display: block !important;
}
.custom-ensavoir-plus dxp_layout-column-spacer {
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* 2. Réduction du Gap au-dessus du menu (Encadré rouge HAUT) */
.custom-titre-savoir-plus h2 {
margin-bottom: 8px !important;
}
/* 3. FIX DU GRAND VIDE : On tue les hauteurs fantômes de Salesforce */
.custom-onglet dxp_layout-tab-bar,
.custom-onglet .dxp-tabs-container,
.custom-onglet .slds-tabs_default {
height: auto !important;
min-height: 0 !important;
--dxp-c-tab-container-height: auto !important;
width: 100% !important;
max-width: 100% !important;
display: block !important;
}
/* 4. Transformer le conteneur d'onglets en menu déroulant */
.custom-onglet ul.slds-tabs_default__nav {
background-color: transparent !important;
border-radius: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
position: relative !important;
height: auto !important;
margin-bottom: 16px !important; /* Réduction du Gap sous le menu (Encadré rouge BAS) */
}
/* Reset global des onglets pour mobile */
.custom-onglet .dxp-tab {
width: 100% !important;
max-width: 100% !important;
border-radius: 0 !important;
padding: 12px 0 !important; /* Ligne alignée parfaitement sur les bords */
justify-content: space-between !important;
height: auto !important;
}
.custom-onglet .dxp-tab dxp_base-text-block,
.custom-onglet .dxp-tab p,
.custom-onglet .dxp-tab .slds-truncate {
text-align: left !important;
white-space: normal !important;
width: 100% !important;
max-width: 100% !important;
}
/* 🔴 ÉTAT PAR DÉFAUT (Fermé) : On cache tous les onglets inactifs */
.custom-onglet
ul.slds-tabs_default__nav:not(.mobile-menu-open)
.dxp-tab[data-active="false"] {
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
overflow: hidden !important;
}
/* 🔵 ÉTAT FERMÉ : ONGLET ACTIF (Le déclencheur du menu) */
.custom-onglet
ul.slds-tabs_default__nav:not(.mobile-menu-open)
.dxp-tab[data-active="true"] {
background: transparent !important;
background-image: none !important; /* Annule le dégradé bleu quand c'est fermé */
border-bottom: 1px solid #009ddf !important; /* Ligne bleue inférieure pleine largeur */
}
/* Texte de l'onglet actif fermé (Gris-Bleu) */
.custom-onglet
ul.slds-tabs_default__nav:not(.mobile-menu-open)
.dxp-tab[data-active="true"]
p {
color: #7492a5 !important;
font-weight: 500 !important;
font-size: 14px !important;
}
/* Ajout du chevron (Flèche vers le bas) */
.custom-onglet .dxp-tab[data-active="true"]::after {
content: "";
display: block;
width: 8px;
height: 8px;
border-right: 2px solid #009ddf;
border-bottom: 2px solid #009ddf;
transform: rotate(45deg) translateY(-4px);
transition: transform 0.3s ease;
margin-right: 4px;
}
/* 🟢 ÉTAT OUVERT (Le menu se déroule) */
.custom-onglet ul.slds-tabs_default__nav.mobile-menu-open {
background-color: #ffffff !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
border-radius: 12px !important;
padding: 8px !important;
position: absolute !important; /* Survole le contenu */
top: 0;
left: 0;
z-index: 100 !important;
border: 1px solid #eaeaea !important;
width: 100% !important;
}
/* Style des éléments dans le menu ouvert */
.custom-onglet ul.slds-tabs_default__nav.mobile-menu-open .dxp-tab {
padding: 12px 16px !important; /* Padding interne pour faire joli */
border-bottom: 1px solid #f4f6f9 !important;
}
/* Rotation de la flèche vers le haut quand le menu est ouvert */
.custom-onglet
ul.slds-tabs_default__nav.mobile-menu-open
.dxp-tab[data-active="true"]::after {
transform: rotate(225deg) translateY(0px);
border-color: #ffffff !important; /* Le chevron passe en blanc */
}
/* 🚨 L'ONGLET ACTIF DANS LE MENU OUVERT */
.custom-onglet
ul.slds-tabs_default__nav.mobile-menu-open
.dxp-tab[data-active="true"] {
background-image: linear-gradient(
to bottom right,
rgba(0, 205, 241, 1) 0%,
rgba(0, 157, 223, 1) 100%
) !important;
border-radius: 8px !important;
border-bottom: none !important;
}
/* 🚨 COULEUR DU TEXTE ACTIF (Blanc sur fond Bleu) */
.custom-onglet
ul.slds-tabs_default__nav.mobile-menu-open
.dxp-tab[data-active="true"]
p {
color: #ffffff !important;
font-weight: 700 !important;
}
/* Couleurs des textes INACTIFS dans le menu déroulant */
.custom-onglet
ul.slds-tabs_default__nav.mobile-menu-open
.dxp-tab[data-active="false"]
p {
color: #000000 !important;
font-weight: 500 !important;
}
}
/* 🔵 ========================================================= */
/* 🔵 17. AJUSTEMENTS DES MARGES (DESKTOP & TABLETTE) */
/* 🔵 ========================================================= */
/* ðŸ–¥ï¸ VERSION DESKTOP (1025px et plus) - CARTE OBJECTIFS PÉDAGOGIQUES */
/* 1. STYLISATION DE LA CARTE (Bordure, Radius, Padding) */
.custom-card-produit .custom-expandable-produit {
background-color: #ffffff !important;
/* Remplacer #009ddf par votre variable de couleur si nécessaire */
border: 1px solid #ffffff !important;
border-radius: 24px !important;
padding: 24px !important;
display: block !important;
box-shadow: none !important; /* Au cas où Salesforce ajoute une ombre par défaut */
}
/* 2. DÉSACTIVER LE COMPORTEMENT ACCORDÉON */
.custom-card-produit .section-header {
pointer-events: none !important;
background-color: transparent !important;
padding: 0 !important;
border: none !important;
cursor: default !important;
}
/* On cache le chevron (la petite flèche) */
.custom-card-produit .section-header lightning-icon {
display: none !important;
}
/* 3. TYPOGRAPHIE DU TITRE (Figma : Poppins, Bold 700, 32px) */
.custom-card-produit .section-header h2 {
font-family: "Poppins", sans-serif !important;
font-weight: 700 !important;
font-size: 32px !important;
line-height: 40px !important;
color: #000000 !important;
margin: 0 !important;
text-align: left !important;
}
/* 4. TYPOGRAPHIE DU CONTENU (Figma : Poppins, Medium 500, 14px) */
.custom-card-produit .content .field-value,
.custom-card-produit .content .field-value p,
.custom-card-produit .content .field-value li {
font-family: "Poppins", sans-serif !important;
font-weight: 500 !important;
font-size: 14px !important;
line-height: 22px !important;
color: #000000 !important;
}
/* 5. FIX SPÉCIFIQUE POUR LA LISTE À PUCES */
.custom-card-produit .content .field-value ul {
padding-left: 20px !important;
margin-top: 8px !important;
margin-bottom: 0 !important;
list-style-type: disc !important; /* Affiche les puces standards */
}
.custom-card-produit .content .field-value li {
margin-bottom: 4px !important;
display: list-item !important; /* Sécurité si Salesforce force un display block */
}
/* 📱 VERSION MOBILE & TABLETTE (1024px et moins) - CARTES EXPANDABLE */
@media (max-width: 1024px) {
/* 2. STYLISATION DE LA CARTE BLANCHE (Figma : Radius 24px, Padding 16px) - TON CODE INTACT */
.custom-card-produit .custom-expandable-produit {
background-color: #ffffff !important;
border-radius: 24px !important;
padding: 16px !important; /* Espace interne de la carte */
/* 👇 Espace entre les cartes */
margin-bottom: 12px !important;
margin-top: 0 !important;
display: block !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important; /* Légère ombre optionnelle */
width: 100% !important;
box-sizing: border-box !important;
}
/* 3. RÉACTIVATION DU CLIC ET DU HEADER (Accordéon) - TON CODE INTACT */
.custom-card-produit .section-header {
pointer-events: auto !important; /* ✅ RÉACTIVE LE CLIC */
cursor: pointer !important;
background-color: transparent !important;
padding: 0 !important;
border: none !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
}
/* On s'assure que le chevron (flèche) est bien visible sur mobile - TON CODE INTACT */
.custom-card-produit .section-header lightning-icon {
display: block !important;
}
/* 4. TYPOGRAPHIE DU TITRE (Ex: "Objectifs pédagogiques") - TON CODE INTACT */
.custom-card-produit .section-header h2,
.custom-card-produit .section-header h3 {
font-family: "Poppins", sans-serif !important;
font-weight: 700 !important;
font-size: 24px !important; /* Typo respectée ! */
color: #000000 !important;
margin: 0 !important;
text-align: left !important;
flex: 1 !important; /* Laisse la place à la flèche */
}
/* 5. GESTION DU CONTENU (Texte déroulant) - TON CODE INTACT */
.custom-card-produit .content {
/* 🚨 TRÈS IMPORTANT : On ne force PAS de display: block ici.
On laisse le script natif de Salesforce gérer l'ouverture/fermeture */
padding: 12px 0 0 0 !important; /* Espace entre le titre et le texte quand c'est ouvert */
}
/* 6. TYPOGRAPHIE DU CONTENU INTERNE (Figma : Poppins, 14px, Medium 500) - TON CODE INTACT */
.custom-card-produit .content .field-value,
.custom-card-produit .content .field-value p,
.custom-card-produit .content .field-value li {
font-family: "Poppins", sans-serif !important;
font-weight: 500 !important;
font-size: 14px !important;
line-height: 22px !important;
color: #000000 !important;
}
/* Ajustement des listes à puces pour mobile - TON CODE INTACT */
.custom-card-produit .content .field-value ul {
padding-left: 20px !important;
margin-top: 8px !important;
margin-bottom: 0 !important;
list-style-type: disc !important;
}
.custom-card-produit .content .field-value li {
margin-bottom: 4px !important;
display: list-item !important;
}
}
/* 🔵 ========================================================= */
/* 🔵 AJUSTEMENTS DES MARGES (DESKTOP & TABLETTE) */
/* 🔵 ========================================================= */
/* ðŸ–¥ï¸ DESKTOP (1025px et plus) */
@media (min-width: 1025px) {
.custom-column-hero {
margin-top: 6rem !important;
}
}
/* 🔵 ========================================= */
/* 🔵 12. BANNIÈRE HERO CUSTOM (FORMATION) */
/* 🔵 ========================================= */
.custom-banner {
position: relative !important;
min-height: auto !important;
height: auto !important;
/* ✅ 1. LE FOND GLOBAL : Il remplit les coins avec la couleur de ton thème */
background: rgb(241, 246, 250) !important;
border-radius: 0 !important; /* On retire l'arrondi du parent pour qu'il soit bien carré */
padding: 60px 132px !important;
z-index: 1 !important; /* Très important pour la superposition des calques */
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
/* ✅ 2. LE DÉGRADÉ : On le déplace dans un calque avec tes arrondis */
.custom-banner::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
/* Ton dégradé et ton radius sont conservés ici ! */
background: linear-gradient(90deg, #01415e 0%, #009ddf 100%) !important;
border-radius: 0 0 40px 40px !important;
z-index: -1 !important; /* Le place au fond, juste au-dessus de la couleur de thème */
}
/* 2. On supprime l'overlay noir natif de Salesforce */
.custom-banner .background-image-overlay {
display: none !important;
}
/* 3. Calque de l'image (Alimenté par le Builder Salesforce) */
.custom-banner .background-image {
display: block !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 1 !important;
/* ✅ 3. L'IMAGE : Doit aussi avoir les arrondis pour ne pas cacher les coins gris */
border-radius: 0 0 40px 40px !important;
overflow: hidden !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
/* On maintient notre effet de fusion lumineux Figma */
mix-blend-mode: soft-light !important;
opacity: 0.8 !important;
background-color: transparent !important;
}
/* 4. Contenu au premier plan */
.custom-banner .columns-content {
position: relative !important;
z-index: 5 !important;
height: auto !important;
width: 100% !important;
}
/* 📱 Ajustement Mobile */
@media (max-width: 767px) {
.custom-banner {
padding: 40px 20px !important;
}
/* L'arrondi change sur mobile, donc on l'applique au pseudo-élément et à l'image */
.custom-banner::before,
.custom-banner .background-image {
border-radius: 0 0 20px 20px !important;
}
}
/* 5. FORCER TOUT LE TEXTE EN BLANC DANS LA BANNIÈRE */
.custom-banner,
.custom-banner h1,
.custom-banner h2,
.custom-banner h3,
.custom-banner p,
.custom-banner span,
.custom-banner a,
.custom-banner div,
.custom-banner lightning-formatted-text,
.custom-banner lightning-formatted-rich-text,
.custom-banner .slds-text-heading_large,
.custom-banner .slds-text-heading_medium {
color: #ffffff !important;
}
/* S'il y a des liens, on s'assure qu'ils n'ont pas la couleur bleue par défaut de Salesforce */
.custom-banner a:hover {
color: #f2f2f2 !important; /* Un blanc légèrement grisé au survol (optionnel) */
}
/* 🔵 ========================================= */
/* 🔵 13 . FIX : LOGOS PARTENAIRE (DESKTOP & MOBILE) */
/* 🔵 ========================================= */
/* --- A. BASE COMMUNE ET ALIGNEMENT À DROITE --- */
.custom-banner .custom-logo-partner-header-desktop,
.custom-banner .custom-logo-partner-header-mobile {
/* On utilise Flexbox pour pousser le conteneur blanc tout à droite de sa colonne */
display: flex !important;
justify-content: flex-end !important;
width: 100% !important;
margin: 0 !important;
}
/* Le conteneur blanc (Design Figma) */
.custom-banner .custom-logo-partner-header-desktop .partner-container,
.custom-banner .custom-logo-partner-header-desktop .slds-m-around_medium,
.custom-banner .custom-logo-partner-header-mobile .partner-container,
.custom-banner .custom-logo-partner-header-mobile .slds-m-around_medium {
margin: 0 !important;
/* Paramètres communs exigés */
padding: 10px !important;
gap: 10px !important;
border-radius: 32px !important;
background-color: #ffffff !important;
/* Centrage interne de l'image */
display: flex !important;
align-items: center !important;
justify-content: center !important;
/* Ombre légère optionnelle */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}
/* L'image à l'intérieur s'adapte automatiquement grâce au padding de 10px du parent */
.custom-banner .custom-logo-partner-header-desktop .partner-logo,
.custom-banner .custom-logo-partner-header-mobile .partner-logo {
width: 100% !important;
height: 100% !important;
object-fit: contain !important; /* Garde les proportions sans déformer */
margin: 0 !important;
}
/* --- B. ðŸ–¥ï¸ GESTION DESKTOP (1025px et plus) --- */
@media (min-width: 1025px) {
/* On masque la version mobile */
.custom-banner .custom-logo-partner-header-mobile {
display: none !important;
}
/* Dimensions spécifiques Desktop */
.custom-banner .custom-logo-partner-header-desktop .partner-container,
.custom-banner .custom-logo-partner-header-desktop .slds-m-around_medium {
width: 120px !important;
height: 80px !important;
}
}
/* --- C. 📱 GESTION TABLETTE & MOBILE (1024px et moins) --- */
@media (max-width: 1024px) {
/* On masque la version desktop */
.custom-banner .custom-logo-partner-header-desktop {
display: none !important;
}
/* Dimensions et Radius spécifiques Tablette/Mobile */
.custom-banner .custom-logo-partner-header-mobile .partner-container,
.custom-banner .custom-logo-partner-header-mobile .slds-m-around_medium {
width: 80px !important;
height: 60px !important;
border-radius: 24px !important; /* 👈 LE FIX EST ICI */
}
}
/* 📱 FIX TABLETTE COMPLET & NETTOYÉ (768px à 1024px) */
/* Ce code supprime le grand gap vertical et aligne le contenu sur la navbar */
@media (max-width: 1024px) {
/* 1. NETTOYAGE STRICT DU PARENT (Bannière) */
/* On réduit drastiquement les paddings verticaux de la bannière parent
pour remonter tout le contenu vers le haut. */
.custom-banner {
width: 100% !important;
max-width: 100% !important;
/* On réduit la marge du haut pour coller le contenu près de la navbar
et on garde juste un petit espace en bas. Ajuste le '20px' si besoin */
padding: 7rem 0 4rem 0 !important;
margin: 0 !important;
display: block !important;
}
/* Nettoyage des autres sous-conteneurs de la bannière */
.custom-banner > .columns-content,
.custom-banner community_layout-column,
.custom-banner .column-content,
.custom-banner webruntimedesign-region-wrapper,
.custom-banner .interactions-region {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* 2. LE COMPOSANT HERO (Le bloc bleu de sélection) */
.custom-column-hero {
margin-left: 16px !important; /* Marge gauche alignée sur la navbar pill */
margin-right: 16px !important; /* Marge droite alignée sur la navbar pill */
width: auto !important; /* Calcule automatiquement la largeur MOINS les marges */
display: block !important;
/* ON SUPPRIME LE GAP : On met les marges/paddings verticaux à ZÉRO */
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* 3. ALIGNEMENT INTERNE (On s'assure qu'aucun bloc interne ne repousse le contenu) */
.custom-column-hero .columns,
.custom-column-hero dxp_layout-column,
.custom-column-hero .column-content,
.custom-column-hero .columns-content {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* 4. FIX COLONNE 3 (CODE #AR + LOGO) */
/* On force la ligne pour supprimer le grand vide vertical à cet endroit */
.custom-col-code-logo .columns,
.custom-col-code-logo .columns-content {
display: flex !important;
flex-direction: row !important; /* Aligne Code et Logo horizontalement */
justify-content: space-between !important; /* Code à gauche, Logo à droite */
align-items: center !important;
flex-wrap: nowrap !important;
width: 100% !important;
margin-top: 0.5rem !important; /* Espace vertical réduit entre le titre et le code */
margin-bottom: 0.5rem !important;
}
.custom-col-code-logo dxp_layout-column {
width: auto !important;
flex: 0 1 auto !important;
}
/* 5. ALIGNEMENT DU LOGO PARTENAIRE */
.custom-logo-partner-header-mobile {
display: flex !important;
justify-content: flex-end !important;
}
/* 6. ALIGNEMENT DES ÉLÉMENTS DE TEXTE */
.custom-fil-ariane,
.custom-product-title,
.container-flex,
.custom-category-titre,
.custom-category-text {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
text-align: left !important;
}
/* 7. AJUSTEMENT DU TITRE (Taille et espace réduit) */
.custom-product-title h1 {
font-size: 32px !important; /* Taille un peu plus petite pour tablette pour mieux entrer */
line-height: 1.1 !important;
margin: 0.5rem 0 !important; /* Espace vertical réduit autour du titre */
padding: 0 !important;
}
/* 8. FIX SPÉCIFIQUE DU FIL D'ARIANE (On ajoute les marges et le display block) */
.custom-category-fil {
display: block !important; /* ✅ INDISPENSABLE POUR QUE LES MARGES FONCTIONNENT */
margin-top: 1rem !important;
margin-bottom: 1rem !important;
width: 100% !important;
padding: 0 !important;
}
.custom-category-fil commerce-breadcrumbs {
display: block !important; /* ✅ SÉCURITÉ : Force le composant interne */
margin: 0 !important;
}
.custom-fil-ariane nav {
display: block !important; /* ✅ INDISPENSABLE POUR QUE LES MARGES FONCTIONNENT */
margin-top: 1rem !important;
margin-bottom: 1rem !important;
width: 100% !important;
padding: 0 !important;
}
/* 9. SUPPRESSION DES HAUTEURS FANTÔMES */
[data-region-name="column"] {
min-height: auto !important;
}
}
/* 🔵 Ajustement Desktop pour garantir la largeur */
@media (min-width: 1025px) {
.custom-column-hero {
max-width: 100% !important;
}
}
/* 📱 FIX ALIGNEMENT CODE + LOGO (MOBILE & TABLETTE) */
@media (max-width: 1024px) {
/* 1. On force le conteneur à rester en ligne au lieu de s'empiler */
.custom-col-code-logo .columns {
display: flex !important;
flex-direction: row !important; /* Emplacement côte à côte */
flex-wrap: nowrap !important; /* Empêche le saut de ligne */
justify-content: space-between !important;
align-items: center !important; /* Aligne verticalement le #AR et le logo */
width: 100% !important;
}
/* 2. On ajuste les deux colonnes internes pour qu'elles se partagent la largeur */
.custom-col-code-logo dxp_layout-column {
display: flex !important;
width: auto !important; /* Largeur automatique selon le contenu */
max-width: none !important;
flex: 0 1 auto !important;
}
/* 3. On assure que le code produit (#AR) reste à gauche */
.custom-col-code-logo dxp_layout-column:nth-of-type(1) {
justify-content: flex-start !important;
}
/* 4. On assure que le logo reste bien à droite */
.custom-col-code-logo dxp_layout-column:nth-of-type(2) {
justify-content: flex-end !important;
margin-left: auto !important; /* Pousse le logo vers la droite */
}
/* 5. Ajustement spécifique du texte du code pour éviter les retours à la ligne */
.custom-product-code {
white-space: nowrap !important;
font-size: 16px !important; /* Ajustez selon votre Figma */
font-weight: 700 !important;
}
}
/* 🔵 ======================================================= */
/* 🔵 FIX : ALIGNEMENT BANNIÈRE SUR TRÈS GRANDS ÉCRANS (> 1920px) */
/* 🔵 ======================================================= */
@media (min-width: 1921px) {
/* 1. On surcharge la variable native Salesforce qui bride le layout */
.custom-banner {
--dxp-g-root-max-width: 100% !important;
}
/* 2. On cible TOUTES les couches générées par Salesforce entre
la bannière et le texte pour détruire le centrage automatique */
.custom-banner > .columns-content,
.custom-banner > .columns-content > .columns,
.custom-banner .custom-column-hero,
.custom-banner .custom-column-hero > .columns-content,
.custom-banner .custom-column-hero > .columns-content > .columns,
.custom-banner .custom-column-hero dxp_layout-column,
.custom-banner webruntimedesign-region-wrapper,
.custom-banner .interactions-region {
max-width: 100% !important;
width: 100% !important;
/* On annule le margin: 0 auto qui crée ce vide au centre */
margin-left: 0 !important;
margin-right: 0 !important;
/* On s'assure qu'aucun padding interne ne repousse le texte */
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* 🔵 ========================================= */
/* 🔵 14. CATEGORY HERO CUSTOM (FORMATION) */
/* 🔵 ========================================= */
/* 🔵 TITRE CATEGORY HERO - DESKTOP */
.custom-category-titre h1 {
font-size: 56px !important;
line-height: 64px !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
/* On s'assure que la police Poppins est appliquée si chargée */
font-family: "Poppins", sans-serif !important;
}
/* 📱 TITRE CATEGORY HERO - MOBILE (Basé sur vos captures Figma) */
@media (max-width: 1024px) {
.custom-category-titre h1 {
font-size: 40px !important;
line-height: 48px !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
}
/* Optionnel : Ajuster la marge pour coller au design Figma */
.custom-category-titre {
margin-bottom: 24px !important;
}
}
/* 🔵 ========================================= */
/* 🔵 15. CATEGORY HERO CUSTOM (FORMATION) */
/* 🔵 ========================================= */
/* 🔵 PRODUCT CODE */
.custom-product-code {
display: inline-flex !important; /* Force l'alignement horizontal */
align-items: center !important;
white-space: nowrap !important; /* Empêche le retour à la ligne */
font-weight: bold !important;
}
.custom-product-code::before {
content: "#";
display: inline-block !important;
margin-right: 2px !important; /* Petit espace entre le # et le texte */
}
/* Si Salesforce injecte des balises internes (div, p) qui cassent la ligne */
.custom-product-code * {
display: inline !important;
}
/* 🔵 TITRE PRODUIT - DESKTOP */
.custom-product-title .product-title,
.custom-product-title h1 {
font-size: 56px !important;
line-height: 64px !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
font-family: "Poppins", sans-serif !important;
margin: 0 !important; /* Nettoyage des marges par défaut */
display: block !important;
}
/* 📱 TITRE PRODUIT - MOBILE (767px et moins) */
@media (max-width: 767px) {
.custom-product-title .product-title,
.custom-product-title h1 {
font-size: 40px !important;
line-height: 48px !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
}
}
/* 📱 AJUSTEMENT TABLETTE (768px à 1024px) */
/* Pour éviter que le titre ne se compresse au centre comme vu précédemment */
@media (min-width: 768px) and (max-width: 1024px) {
.custom-product-title {
display: block !important;
width: 100% !important;
max-width: 100% !important;
}
.custom-product-title .product-title,
.custom-product-title h1 {
font-size: 40px !important; /* Taille intermédiaire ou mobile selon ton Figma */
line-height: 48px !important;
width: 100% !important;
}
}
/* 🔵 ========================================================= */
/* 🔵 16. FIL D'ARIANE - SÉPARATION STRICTE */
/* 🔵 ========================================================= */
/* --- A. PAGE PRODUIT UNIQUEMENT (Composant Custom) --- */
/* On verrouille TOUT sur la classe .custom-fil-ariane */
.custom-fil-ariane a,
.custom-fil-ariane .slds-breadcrumb__path {
font-family: "Poppins", sans-serif !important;
font-size: 16px !important;
color: #ffffff !important;
text-decoration: underline !important;
font-weight: 400 !important;
}
/* Page actuelle Produit */
.custom-fil-ariane .slds-breadcrumb__item:last-child a,
.custom-fil-ariane .current-page-link {
font-weight: 700 !important;
text-decoration: none !important;
color: #ffffff !important;
}
/* Chevron UNIQUEMENT pour le produit */
.custom-fil-ariane .slds-breadcrumb__item + .slds-breadcrumb__item::before {
color: #ffffff !important;
content: ">" !important; /* On ne l'applique qu'ici */
text-decoration: none !important;
}
/* --- B. SPÉCIFIQUE PAGE CATEGORY (Standard Component) --- */
.custom-category-fil {
--com-c-breadcrumb-link-color: #ffffff !important;
--com-c-breadcrumb-text-color: #ffffff !important;
--com-c-breadcrumb-divider-color: #ffffff !important;
}
/* 1. LE SECRET EST ICI : Flexbox sur le parent (li) */
.custom-category-fil .breadcrumb-list li {
display: inline-flex !important;
align-items: center !important; /* Force le centrage vertical absolu entre le texte et le chevron */
}
/* 2. TES PROPRIÉTÉS RESTAURÉES POUR LE TEXTE */
.custom-category-fil a,
.custom-category-fil span {
font-family: "Poppins", sans-serif !important;
font-size: 16px !important; /* TA VALEUR */
color: #ffffff !important; /* TA VALEUR */
text-decoration: underline !important;
line-height: 1 !important; /* Évite les marges invisibles haut/bas */
}
/* 3. FIX DU CHEVRON (Le fantôme) */
.custom-category-fil .breadcrumb-list li p[aria-hidden="true"] {
display: flex !important;
align-items: center !important;
margin: 0 8px !important; /* Juste l'espacement gauche/droite */
padding: 0 !important;
font-size: 16px !important; /* Aligné sur ton texte */
color: #ffffff !important;
line-height: 1 !important;
}
/* 4. LAST CHILD : Bold, Blanc, Pas d'underline */
.custom-category-fil .breadcrumb-list li:last-child a,
.custom-category-fil .breadcrumb-list li:last-child span {
font-weight: 700 !important;
text-decoration: none !important;
color: #ffffff !important;
font-size: 16px !important;
}
@media (max-width: 767px) {
.custom-fil-ariane a,
.custom-fil-ariane .slds-breadcrumb__path,
.custom-category-fil a,
.custom-category-fil span {
font-size: 12px !important;
}
.custom-fil-ariane .slds-breadcrumb__item:last-child a,
.custom-fil-ariane .current-page-link,
.custom-category-fil .breadcrumb-list li p[aria-hidden="true"],
.custom-category-fil .breadcrumb-list li:last-child a,
.custom-category-fil .breadcrumb-list li:last-child span {
font-size: 12px !important;
}
}
/* On cible la classe brand directement */
.slds-button.slds-button_brand {
/* 1. Reset des variables Salesforce pour le bouton */
--slds-c-button-color-background: transparent;
--slds-c-button-color-border: transparent;
--slds-c-button-text-color: #ffffff;
--sds-c-button-brand-color-background: transparent;
--sds-c-button-brand-color-border: transparent;
/* 2. Application du dégradé onepoint */
background-image: linear-gradient(90deg, #009ddf 0%, #00cdf1 100%) !important;
background-color: transparent !important; /* Pour éviter les flashs de bleu slds */
/* 3. Style visuel demandé */
border: none !important;
border-radius: 32px !important;
min-height: 56px !important;
padding: 16px 24px !important;
font-weight: 700 !important;
box-shadow: 0 2px 8px rgba(0, 157, 223, 0.35) !important;
transition: all 0.2s ease !important;
}
/* 4. Gestion de l'état au survol (Hover) */
.slds-button.slds-button_brand:hover {
filter: brightness(1.08) !important;
background-image: linear-gradient(90deg, #009ddf 0%, #00cdf1 100%) !important;
box-shadow: 0 4px 12px rgba(0, 157, 223, 0.5) !important;
}
.slds-button_op-outline-brand {
/* 1. Reset des variables Salesforce */
--slds-c-button-color-background: transparent;
--slds-c-button-text-color: #01415e;
--slds-c-button-color-border: #01415e;
--sds-c-button-outline-brand-color-text: #01415e;
--sds-c-button-outline-brand-color-border: #01415e;
/* 2. Fond transparent et bordure */
background: transparent !important;
border: 1.5px solid #01415e !important;
color: #01415e !important;
/* 3. Dimensions identiques au bouton Brand (Précédent) */
border-radius: 32px !important;
min-height: 56px !important;
padding: 16px 24px !important;
font-weight: 700 !important;
font-size: clamp(0.875rem, 2vw, 1rem) !important;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease !important;
}
/* --- ÉTATS --- */
/* Survol (Hover) */
.slds-button_op-outline-brand:hover {
background-color: rgba(
1,
65,
94,
0.05
) !important; /* Léger voile bleu foncé */
border-color: #009ddf !important; /* Change vers le bleu onepoint au survol */
color: #009ddf !important;
}
/* Désactivé */
.slds-button_op-outline-brand:disabled {
opacity: 0.5 !important;
cursor: not-allowed !important;
}
.bg-deep-ocean {
background-color: #011c28;
color: #ffffff; /* Texte blanc pour un bon contraste */
}
/* L'arrière-plan qui couvre tout l'écran */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Noir semi-transparent */
display: flex;
justify-content: center;
align-items: center;
z-index: 1000; /* S'assure qu'elle est au-dessus de tout */
}
/* La boîte blanche au centre */
.modal-content {
background: white;
padding: 2rem;
border-radius: 8px;
max-width: 500px;
width: 90%;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
position: relative;
}
/* --- LE PARENT --- */
.phase-container {
display: block;
position: relative;
width: 100%;
padding-bottom: 20px;
overflow: hidden;
box-sizing: border-box;
}
/* --- 1. DESIGN DESKTOP (Grands écrans : Nombre -> Ligne -> Texte) --- */
/* Le bloc séparateur */
.phase-container .separateur-container {
position: absolute;
/* Position fixe sur grand écran pour ne jamais superposer */
left: 95px;
top: 0;
width: 15px;
height: 100%;
z-index: 100;
text-align: center;
transition: left 0.3s ease; /* Animation fluide lors du redimensionnement */
}
/* Le point bleu */
.phase-container .dot {
width: 12px;
height: 12px;
background-color: #009ee2;
border-radius: 50%;
margin: 15px auto 5px auto;
display: block;
}
/* La ligne blanche */
.phase-container .line {
width: 1.5px;
background-color: #ffffff;
height: calc(100% - 32px);
margin: 0 auto;
display: block;
}
/* Le wrapper qui contient le numéro et le texte */
.phase-container .content-wrapper {
display: flex;
align-items: flex-start;
padding-left: 0;
width: 100%;
box-sizing: border-box;
transition: padding-left 0.3s ease;
}
/* Le gros numéro */
.phase-container .number {
flex-shrink: 0;
/* Largeur fixe, laisse la place exacte à la ligne qui est à 95px */
width: 85px;
color: #009ee2;
font-family: "Poppins", sans-serif;
font-size: 65px;
font-weight: 900;
line-height: 0.8;
letter-spacing: -3px;
margin-top: 10px;
margin-bottom: 20px;
}
/* Le bloc de texte (Titre + P) */
.phase-container .text-box {
flex: 1;
/* Laisse l'espace pour la ligne entre le nombre et le texte */
padding-left: 40px;
padding-top: 4px;
box-sizing: border-box;
}
/* Styles des textes */
.phase-container h2 {
color: #ffffff;
font-family: "Poppins", sans-serif;
font-size: clamp(22px, 3vw, 36px);
font-weight: 700;
margin: 0;
line-height: 1.1;
}
.phase-container p {
color: #ffffff;
font-family: "Poppins", sans-serif;
font-size: 15px;
line-height: 1.5;
margin-top: 15px;
}
/* --- 2. ADAPTATION ÉCRANS MOYENS/PETITS (Ligne -> Nombre -> Texte) --- */
/* Déclenchement à 1300px pour éviter la superposition vue sur ta capture */
@media screen and (max-width: 1850px) {
.phase-container .separateur-container {
left: 5px; /* On ramène la ligne tout à gauche, avant le nombre ! */
}
.phase-container .content-wrapper {
padding-left: 35px; /* On décale tout le contenu (nombre + texte) après la ligne */
}
.phase-container .number {
width: auto; /* Le nombre s'adapte à son contenu */
margin-right: 20px; /* On crée un espace classique entre le nombre et le texte */
font-size: clamp(
45px,
6vw,
65px
); /* On le réduit légèrement si besoin */
}
.phase-container .text-box {
padding-left: 0; /* Plus besoin du padding gauche, le margin-right du nombre suffit */
}
}
@media screen and (max-width: 1024px) {
/* On ramène la ligne tout à gauche */
.phase-container .separateur-container {
left: 10px;
}
/* Le secret est ici : flex-direction column empile le numéro sur le texte */
.phase-container .content-wrapper {
padding-left: 40px; /* On décale tout le contenu pour laisser la place à la ligne */
flex-direction: column; /* 🚨 EMPILEMENT AUTOMATIQUE 🚨 */
}
/* On ajuste le numéro pour qu'il ressemble au design mobile */
.phase-container .number {
width: auto;
margin-right: 0;
margin-bottom: 5px; /* Petit espace sous le numéro avant le titre */
font-size: 40px; /* On le rend un peu plus petit sur mobile */
letter-spacing: -1px;
line-height: 1;
}
/* On retire le padding gauche du texte puisqu'il est en dessous du nombre maintenant */
.phase-container .text-box {
padding-left: 0;
padding-top: 0;
}
.phase-container h2 {
font-size: 22px; /* Taille adaptée au mobile */
margin-bottom: 8px;
}
.phase-container p {
margin-top: 0;
font-size: 14px;
}
}
/* 1. STRUCTURE DE BASE (DESKTOP PAR DÉFAUT) */
.modal {
/* Largeur fixe sur Desktop */
width: 990px !important;
max-width: none !important; /* Force l'absence de limite sur grand écran */
/* Hauteur flexible pour éviter les coupures de texte */
height: auto !important;
max-height: none !important;
min-height: 200px !important;
margin: 0 auto !important;
padding: 24px !important;
display: flex !important;
flex-direction: column !important;
font-family: "Poppins", sans-serif !important;
box-sizing: border-box !important;
box-shadow: none !important;
}
.modal .modal-body {
border-radius: 24px !important;
padding: 12px !important;
border: 1px solid #e0e0e0 !important;
}
/* 2. ADAPTATION MOBILE (ÉCRANS DE MOINS DE 768px) */
@media only screen and (max-width: 767px) {
.modal {
width: 100% !important;
max-width: 350px !important; /* Votre demande mobile */
padding: 16px !important; /* Réduction légère du padding sur mobile */
border-radius: 16px !important;
}
.modal .footer {
flex-direction: column-reverse !important; /* Empile les boutons sur mobile */
gap: 15px !important;
align-items: center !important;
}
.modal .footer .reject {
margin: 0 !important; /* Reset du margin-left: auto sur mobile */
}
}
/* 3. ZONE DE CONTENU */
.modal .content {
text-align: left !important;
color: #000000 !important;
padding: 0.5rem !important;
flex-grow: 1 !important;
overflow: visible !important; /* Puisqu'on n'a plus de hauteur fixe, on laisse le texte respirer */
}
/* 4. FOOTER (LIGNE BLEUE ET BOUTONS) */
.modal .footer {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
background: transparent !important;
border-top: 1.5px solid #00a1e0 !important;
margin-top: 5px !important;
padding-top: 10px !important;
gap: 15px !important;
}
/* 5. BOUTON TOUT ACCEPTER (CYAN) */
.modal .footer .accept button {
color: #ffffff !important;
border: none !important;
border-radius: 50px !important;
padding: 17px 49px !important;
font-weight: 700 !important;
font-size: 16px !important;
cursor: pointer !important;
box-shadow: none !important;
}
/* 6. BOUTON REFUSER (LIEN ÉPURÉ) */
.modal .footer .reject button {
background: transparent !important;
border: none !important;
color: #00a1e0 !important;
text-decoration: underline !important;
font-size: 16px !important;
font-weight: 600 !important;
padding: 0 !important;
cursor: pointer !important;
box-shadow: none !important;
}
.modal .footer .reject button:hover {
box-shadow: none !important;
background: transparent !important;
}
@media only screen and (min-width: 64.0625em) {
.dxp-block-image-host {
margin-right: 2rem;
}
}
@media (min-width: 1024px) {
c-lwc01-product-variation-session {
display: block;
position: relative;
margin-top: -6rem; /* ajuster : -16px à -40px selon le rendu */
z-index: 2; /* pour passer au-dessus du bandeau */
}
}
c-lwc07_-contact-et-inscriptions {
display: block;
position: relative;
z-index: 2;
margin-top: -20rem; /* à ajuster : 2rem, 3rem, 48px… */
}
.expanded-section-title h3 {
font-size: 1.2rem !important; /* Adjust this to your preferred size */
line-height: 1.2 !important;
margin: 0 !important;
}