/*
Theme Name:     Kadence Child
Theme URI:      https://www.kadencewp.com/kadence-theme/
Description:    Child theme for Kadence
Author:         Your Name
Author URI:     https://yourwebsite.com
Template:       kadence
Version:        1.0
*/

/* Import parent theme styles */
@import url("../kadence/style.css");

/* ============================================================
   PROFIL LEARNDASH - PERSONNALISATIONS KITEPEDIA
   ============================================================ */

/* --- SECTION BADGES (Achievements) --- */

/* Panneau de badges - fond sombre */
.ld-achievements-panel {
    background: #1d2638;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 20px;
}

.ld-achievements-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #1d2638;
    color: #fff;
}

.ld-achievements-panel__title {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

/* Bouton toggle */
.ld-achievements-panel__toggle-button {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
}

/* Liste des badges en grille */
.ld-achievements-panel__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center !important;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 16px 20px 20px;
    background: #fff;
}

/* Chaque badge : largeur basee sur le contenu du titre */
.ld-achievements-panel__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 8px 6px;
    min-width: 0;
}

/* Wrapper image badge */
.ld-achievements-panel__item-image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.ld-achievements-panel__item-image {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

/* Image badge non-debloque : grisee */
.ld-achievement-locked .ld-achievements-panel__item-image {
    filter: grayscale(100%) opacity(0.4) !important;
    transition: filter 0.3s;
}

/* Image badge debloque : couleur normale */
.ld-achievement-earned .ld-achievements-panel__item-image {
    filter: none !important;
}

/* Titre du badge : UNE SEULE LIGNE (pas de saut de ligne) */
.ld-achievements-panel__item-title {
    font-size: 0.72rem;
    font-weight: 500;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    color: #333;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Titre grise si badge non debloque */
.ld-achievement-locked .ld-achievements-panel__item-title {
    color: #aaa;
}

/* --- BOUTON "VOIR" STATISTIQUES QUIZ --- */

/* Bouton "Voir les questions et reponses" mis en valeur */
.learndash-wrapper a.user_statistic {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #1d2638;
    color: #fff !important;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background 0.2s;
}

.learndash-wrapper a.user_statistic:hover {
    background: #2d3a50;
}

.learndash-wrapper a.user_statistic .ld-icon {
    font-size: 0.9em;
}

/* --- VOLET INSTRUCTEUR (cours ID=9) : MASQUER BARRE DE PROGRESSION --- */

/* Masque la barre de progression uniquement pour la Formation d'instructeur */
#ld-course-list-item-9 .ld-item-list-item-expanded .ld-progress {
    display: none !important;
}

/* --- NOM D'UTILISATEUR PROFIL --- */
.ld-profile-username {
    font-size: 1.3em !important;
    font-weight: bold !important;
    margin: 50px 0 0 0 !important;
    padding: 0 !important;
}

/* --- TEXTE SOUS BOUTON VOIR - STATISTIQUES QUIZ --- */
.ld-table-list-column-stats {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
.voir-subtext {
    display: block !important;
    font-size: 0.75em !important;
    color: #666 !important;
    margin-top: 4px !important;
    text-align: center !important;
}

/* --- 1. GLOBAL COLORS: TEXT & LABELS --- */
.user-registration-form__label-for-checkbox span,
.user-registration-form-row label,
#user-registration-form-8469 .ur-label,
.page-id-8473 .ur-lost-password-title, 
.page-id-8473 .ur-lost-password-message,
.page-id-8473 label,
.user-registration-Input.input-text {
    color: #000000 !important;
}

/* Links (Blue to Dark Blue) */
.user-registration-form__label-for-checkbox a,
.user-registration-register.register a {
    color: #0554A6 !important;
}

.user-registration-form__label-for-checkbox a:hover,
.user-registration-register.register a:hover {
    color: #092340 !important;
}

/* --- 2. HEADER & PAGE BACKGROUNDS --- */
header, .site-header, .header-wrap {
    background-color: #f4f1ed !important;
}

/* Full width blue background on Lost Password page */
.page-id-8473 .entry-content {
    background-color: #245475 !important;
    box-shadow: 0 0 0 100vmax #245475 !important;
    clip-path: inset(0 -100vmax);
}

/* --- 3. FORM CARDS (Placement & Background) --- */

/* --- 3. FORM CARDS (The Single Box Fix) --- */

/* 1. Apply the Gray Background ONLY to the main wrapper */
.ur-frontend-form.login,
#user-registration-form-8469.ur-frontend-form,
#user-registration.user-registration,
.page-id-8473 .ur-frontend-form {
    background-color: #f0f3f6 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 0 !important;
    padding: 40px !important; 
    box-sizing: border-box !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. FORCE all internal rows/grids to be transparent (Stops the double box) */
.ur-frontend-form .ur-form-row, 
.ur-frontend-form .ur-form-grid,
.ur-frontend-form .ur-field-wrapper,
#user-registration-form-8469 .ur-form-row,
#user-registration-form-8469 .ur-form-grid {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 3. Page Spacing (External) */
.page-id-8473 .entry-content, /* Lost Password */
.page-id-8469 .entry-content, /* Registration */
.page-id-8470 .entry-content  /* Login */ {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

/* --- 4. BUTTONS: COLORS, SQUARE SHAPE & PLACEMENT --- */

/* Base Colors & Sharp Corners for all buttons */
.user-registration-Button.ur-submit-button,
.ur-button-container .ur-submit-button,
.page-id-8473 .ur-reset-password-btn {
    background-color: #0554A6 !important;
    color: #ffffff !important;
    border-radius: 0 !important; /* Sharp corners */
}

.user-registration-Button.ur-submit-button:hover,
.ur-button-container .ur-submit-button:hover,
.page-id-8473 .ur-reset-password-btn:hover {
    background-color: #092340 !important;
    color: #ffffff !important;
}

/* Registration Form: Full Width Button */
#user-registration-form-8469 .ur-button-container {
    display: block !important;
    width: 100% !important;
    float: none !important;
}

#user-registration-form-8469 .ur-button-container .ur-submit-button {
    width: 100% !important;
    display: block !important;
}

/* Login/Lost Password: Centered Buttons (Not full width) */
.user-registration-Button.ur-submit-button,
.page-id-8473 .ur-reset-password-btn {
    display: block !important;
    margin: 20px auto !important;
    padding: 12px 30px !important;
}

/* --- LOGIN PAGE: "ALREADY LOGGED IN" MESSAGE --- */
#user-registration.user-registration {
    color: #000000 !important;
    text-align: center; /* Optional: Centers the message like your forms */
    /*padding: 20px;*/
}

#user-registration.user-registration a {
    color: #0554A6 !important;
    text-decoration: underline !important;
}

#user-registration.user-registration a:hover {
    color: #092340 !important;
}

/* =======================================================
   LEARNDASH ACHIEVEMENTS PANEL - GRID RESKIN
   Turns the vertical list into a modern badge grid.
   ======================================================= */

/* --- 1. THE PANEL CONTAINER --- */
/* We target the widget wrapper if possible, but here we style the header/content combo */

/* The Header (Blue Bar) */
.ld-achievements-panel__header {
    background-color: #133040 !important; /* Your Brand Blue */
    color: #ffffff !important;
    padding: 15px 20px !important;
    border-radius: 12px 12px 0 0 !important; /* Rounded top only */
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border: none !important;
}

/* Header Title */
.ld-achievements-panel__title {
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    margin: 0 !important;
    text-transform: none !important; /* Remove uppercase if default */
}

/* The Content Box (White area) */
.ld-achievements-panel__collapsible-content {
    background-color: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-top: none !important; /* Seamless connection to header */
    border-radius: 0 0 12px 12px !important; /* Rounded bottom only */
    padding: 20px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
}

/* --- 2. THE BADGE GRID (The Magic Part) --- */
.ld-achievements-panel__list {
    display: grid !important;
    /* Create responsive columns: at least 90px wide, fitting as many as possible */
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
    gap: 20px 15px !important; /* Vertical gap 20px, Horizontal 15px */
    
    /* Reset List Styles */
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- 3. INDIVIDUAL BADGE ITEMS --- */
.ld-achievements-panel__item {
    display: flex !important;
    flex-direction: column !important; /* Stack Icon on top of Text */
    align-items: center !important;
    text-align: center !important;
    
    /* Card Styling */
    background: #f8f9fa !important;
    border-radius: 8px !important;
    padding: 15px 10px !important;
    border: 1px solid transparent !important;
    transition: all 0.2s ease !important;
}

/* Hover Effect */
.ld-achievements-panel__item:hover {
    background: #ffffff !important;
    border-color: #245475 !important; /* Blue border on hover */
    transform: translateY(-3px) !important; /* Slight lift */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
}

/* --- 4. BADGE IMAGE --- */
.ld-achievements-panel__item-image-wrapper {
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ld-achievements-panel__item-image {
    width: 48px !important; /* Force a consistent icon size */
    height: 48px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); /* Adds depth to the icon */
}

/* --- 5. BADGE TEXT --- */
.ld-achievements-panel__item-content {
    width: 100% !important;
}

.ld-achievements-panel__item-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    color: #333333 !important;
    margin: 0 !important;
    font-weight: 600 !important;
    
    /* Truncate text if it's too long */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- 6. THE TOGGLE BUTTON (Moins/Plus) --- */
.ld-achievements-panel__toggle-button {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}

.ld-achievements-panel__toggle-button:hover {
    background: rgba(255,255,255,0.1) !important;
}

.ld-achievements-panel__toggle-button .toggle-icon {
    /* Optional: Style the arrow if needed, usually inherent LD styles work fine */
    margin-left: 5px; 
}

/* Target the content specifically when LearnDash marks it as hidden */
.ld-achievements-panel__collapsible-content[aria-hidden="true"] {
    /* 1. Kill the Padding (This was holding the door open) */
    padding: 0 !important;
    
    /* 2. Remove the Border (So no leftover grey line shows) */
    border: none !important;
    
    /* 3. Kill Interactions (Stops the "Ghost Hover" on invisible items) */
    visibility: hidden !important;
    pointer-events: none !important;
    
    /* 4. Force fully closed (Backup safety) */
    max-height: 0 !important;
    margin: 0 !important;
}

/* =====================================================
   FIX: Badge names - show full name, allow wrapping
   ===================================================== */
.ld-achievements-panel__item-title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
    width: auto !important;
    word-break: break-word;
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
}

.ld-achievements-panel__item-content {
    height: auto !important;
    overflow: visible !important;
}

.ld-achievements-panel__item {
    height: auto !important;
    align-items: center !important;
}

.ld-achievements-panel__list {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    align-items: start !important;
}

/* =======================================================
   LEARNDASH LOGIN RESKIN - "SE CONNECTER" STYLE (FINAL)
   Colors: BG #245475 | Box #F0F3F6 | Btn #3B91CA
   Text: White on Blue, Black in Form
   ======================================================= */


/* --- 2. HEADINGS & TOGGLE TEXT --- */
.ld-registration__wrapper h2,
.ld-registration__heading,
.ld-registration__p {
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    text-align: center !important;
}

.ld-registration__heading {
    font-size: 36px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

/* Links (like "Inscription") inside the blue area */
.ld-registration__p a {
    color: #ffffff !important;
    text-decoration: underline !important;
    font-weight: bold !important;
}

/* --- 3. THE FORM BOX (Grey Container) --- */
.ld-registration__login-form,
.ld-registration__register-form {
    background-color: #F0F3F6 !important;
    padding: 40px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
    width: 100% !important;
    max-width: 850px !important;
    margin: 20px auto 0 !important;
    box-sizing: border-box !important;
    
    /* FORCE TEXT COLOR RESET FOR INSIDE THE BOX */
    color: #333333 !important; 
}

/* --- 4. LOGIN FORM GRID (The 2-Column Layout) --- */
#loginform {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 20px 30px;
    align-items: end;
}

#loginform .login-username { grid-column: 1; margin: 0 !important; }
#loginform .login-password { grid-column: 2; margin: 0 !important; }

#loginform .ld-registration__login_options_wrapper,
#loginform .login-submit {
    grid-column: 1 / -1;
    width: 100% !important;
}

/* --- 5. INPUT STYLING (The Fix for Invisible Text) --- */
#loginform label {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    color: #333333 !important; /* Label Color */
    font-size: 15px !important;
    display: block !important;
    margin-bottom: 8px !important;
}

#loginform input[type="text"],
#loginform input[type="password"] {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    
    /* FORCE INPUT TEXT BLACK */
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    height: auto !important;
    box-sizing: border-box !important;
}

/* --- 6. OPTIONS ROW --- */
#loginform .ld-registration__login_options_wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 15px !important;
    color: #333333 !important; /* Ensure checkbox text is dark */
}

#loginform .ld-registration__login_options_wrapper a {
    color: #333333 !important;
    text-decoration: underline !important;
    font-size: 14px !important;
}

/* --- 7. SUBMIT BUTTON --- */
#loginform .login-submit {
    text-align: center !important;
    margin-top: 30px !important;
}

#loginform input[type="submit"] {
    background-color: #3B91CA !important;
    color: #ffffff !important; /* Button text stays white */
    border: none !important;
    border-radius: 50px !important;
    padding: 12px 50px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: transform 0.2s ease !important;
    width: auto !important;
}

#loginform input[type="submit"]:hover {
    background-color: #004494 !important;
    transform: translateY(-2px);
}

/* --- 8. MOBILE RESPONSIVENESS --- */
@media screen and (max-width: 768px) {
    #loginform { grid-template-columns: 1fr !important; }
    #loginform .login-username, #loginform .login-password { grid-column: 1 !important; }
    .ld-registration__wrapper { padding: 40px 15px !important; }
}

/* =======================================================
   ACF FIELDS & "INSCRIPTION" TITLE FIX
   Styles the custom member number field and its header.
   ======================================================= */

/* 1. FIX THE "INSCRIPTION" H2 (Make it Dark) */
/* It was inheriting white from the main page title. We turn it dark grey. */
.ld-registration__register-form h2 {
    color: #333333 !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 24px !important;
    text-align: left !important;
    margin-top: 30px !important; /* separation from previous fields */
    margin-bottom: 15px !important;
    border-bottom: 2px solid #ddd !important; /* Optional: adds a nice separator line */
    padding-bottom: 10px !important;
}

/* 2. ACF CONTAINER SPACING */
.acf-user-register-fields {
    padding: 10px 0 20px 0 !important; /* Add vertical breathing room */
    margin-bottom: 10px !important;
}

/* 3. LABELS (Match LearnDash Labels) */
.acf-field .acf-label label {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    color: #333333 !important;
    font-size: 15px !important;
    margin-bottom: 5px !important;
    display: block !important;
}

/* 4. DESCRIPTION TEXT ("Composé de 4 chiffres") */
.acf-field .acf-label .description {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    color: #666666 !important;
    font-style: normal !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

/* 5. THE INPUT FIELD (Match Standard Inputs) */
.acf-field .acf-input input[type="number"],
.acf-field .acf-input input[type="text"] {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    
    /* Text Styling */
    color: #000000 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    height: auto !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

/* Focus state for the custom input */
.acf-field .acf-input input:focus {
    border-color: #3B91CA !important;
    outline: none !important;
}

/* =======================================================
   LOGIN PAGE (ID 257) - UNIFIED LAYOUT
   Centers content and forces breathing room for both states.
   ======================================================= */

.page-id-257 .entry-content > .wp-block-group {
    /* 1. Force Minimum Height */
    /* 80vh ensures it fills most of the screen */
    min-height: 80vh !important; 
    
    /* 2. Vertically Center Everything */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    
    /* 3. FORCE BREATHING ROOM (The missing piece) */
    /* This adds space above/below the form so it never touches the edges */
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    
    /* 4. Ensure the inner container respects the centering */
    box-sizing: border-box !important;
}

/* =======================================================
   REMOVE REDUNDANT "INSCRIPTION" TITLE & LINE
   Hides the duplicate H2 inside the registration form.
   ======================================================= */

.ld-registration__register-form h2 {
    display: none !important;
}

/* =======================================================
   Color overrides
   ======================================================= */

.ld-registration-order__heading {
	color: white !important;
}

.link-no-hover-color a:hover {
	color: white !important;
}

/* =======================================================
   HIDE LOGIN MODAL ICONS
   Removes the person/lock icons and resets text spacing.
   ======================================================= */

/* 1. Hide the icons (Pseudo-elements) */
.ld-login-modal-form .login-username::before,
.ld-login-modal-form .login-password::before {
    display: none !important;
    content: none !important;
}

/* 2. Reset input padding */
/* Remove the extra space we added for the icons so text sits naturally */
.ld-login-modal-form input#user_login,
.ld-login-modal-form input#user_pass {
    padding-left: 15px !important; 
}

/* =======================================================
   FIX "CREATE ACCOUNT" BUTTON STYLE
   Style: Ghost Button (Blue Outline) -> Fills Blue on Hover
   ======================================================= */

/* 1. Default State (Outline) */
.ld-login-modal-register a.ld-button.ld-button-reverse {
    background-color: transparent !important;
    border: 2px solid #3B91CA !important; /* Thick Blue Border */
    color: #3B91CA !important;            /* Blue Text */
    
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 10px 30px !important;
    border-radius: 50px !important;       /* Pill Shape */
    text-transform: none !important;      /* Prevent forced uppercase if set */
    transition: all 0.2s ease !important;
    box-shadow: none !important;
	margin: 20px !important;
	box-sizing: border-box !important; /* Ensures border is calculated INSIDE the width/height */
    line-height: 1.2 !important;       /* Resets any weird line-height causing overflow */
    display: inline-block !important;
}

/* 2. Hover State (Filled) */
.ld-login-modal-register a.ld-button.ld-button-reverse:hover {
    background-color: #3B91CA !important; /* Fills Blue */
    color: #ffffff !important;            /* White Text */
    border-color: #3B91CA !important;
    transform: translateY(-2px) !important; /* Slight lift */
}

.ld-login-modal-register a.ld-button.ld-button-reverse {
    border-bottom: 2px solid #3B91CA !important;
}

/* =======================================================
   FIX BUTTON CLIPPING (The Box-Shadow Method)
   Uses an internal shadow to create a border that can't be cut off.
   ======================================================= */

.ld-login-modal-register a.ld-button.ld-button-reverse {
    /* 1. Remove the standard border that is getting clipped */
    border: none !important;
    
    /* 2. Use Box Shadow to fake the border (Inset = Inside the box) */
    /* 0 offsets, 0 blur, 2px thickness, blue color */
    box-shadow: inset 0 0 0 2px #3B91CA !important; 
    
    /* 3. Button Basics */
    background-color: transparent !important;
    color: #3B91CA !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 12px 30px !important; /* Increased vertical padding slightly */
    border-radius: 50px !important;
    display: inline-block !important;
    line-height: 1.2 !important; /* Fix vertical alignment */
    transition: all 0.2s ease !important;
}

/* Hover State */
.ld-login-modal-register a.ld-button.ld-button-reverse:hover {
    background-color: #3B91CA !important;
    color: #ffffff !important;
    /* On hover, we keep the shadow but match the bg color so it looks filled */
    box-shadow: inset 0 0 0 2px #3B91CA !important;
    transform: translateY(-2px) !important;
}

/* =======================================================
   REMOVE HOVER EFFECT ON REGISTRATION PANEL
   Prevents background color change/overlay on hover.
   ======================================================= */

.ld-login-modal-register,
.ld-login-modal-register:hover {
    background-color: transparent !important; /* Or set to your specific dark blue hex if needed */
    filter: none !important;
    opacity: 1 !important;
    transition: none !important;
}

/* Ensure inner wrapper doesn't have a separate hover effect */
.ld-login-modal-register .ld-login-modal-wrapper:hover {
    background: none !important;
    opacity: 1 !important;
}

/* Change hover color for the 'Se connecter' button */
#loginform input[type="submit"]:hover {
    background-color: #133040 !important;
}

/* =======================================================
   UTILITY: CIRCLED NUMBER
   Usage: Add class 'text-special' to a Paragraph Block
   ======================================================= */

.number-circle {
    /* Layout & Centering */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    
    /* Shape */
    width: 5rem !important;
    height: 5rem !important;
    border-radius: 50% !important;
    
    /* Typography */
    font-family: 'Outfit', sans-serif !important; /* Ensure it matches your site font */
    font-size: 3.5rem !important;
    font-weight: 500 !important;
    line-height: 1 !important; /* PREVENTS VERTICAL OFFSETS */
    
    /* Colors */
    /* If this variable doesn't work, replace with your hex code: #378f9e */
    color: var(--wp--preset--color--secondary-1, #378f9e) !important;
    border: 3px solid var(--wp--preset--color--secondary-1, #378f9e) !important;
}

/* =======================================================
   UTILITY: PERFECT SPLIT-SCREEN IMAGE
   Usage: Add class 'image-cover-fit' to an Image Block
   in a 50/50 column layout.
   ======================================================= */

/* 1. Make the image act like a background cover */
.image-cover-fit,
.image-cover-fit img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    min-height: 100%; /* Ensures it fills height even if content is short */
}

/* 2. Remove padding from the parent column so the image touches the edges */
/* This targets the column directly containing the image */
.wp-block-column:has(.image-cover-fit) {
    padding: 0 !important;
    display: flex; /* Ensures the image block can expand to fill height */
    flex-direction: column;
}

/* 3. Ensure the Image Figure block expands */
.wp-block-column:has(.image-cover-fit) figure.wp-block-image {
    flex-grow: 1; /* Allows the container to fill the column height */
    margin: 0 !important; /* Remove default margins */
}

/* =======================================================
   CUSTOM BANNER: SPLIT SCREEN (FIXED 50/50 & CENTERED TEXT)
   Usage: Add class 'hero-split' to the Columns Block
   ======================================================= */

/* 1. PARENT CONTAINER SETUP */
.wp-block-columns.hero-split {
    gap: 0 !important;              /* Zero space between columns */
    align-items: stretch !important; /* Force equal height */
    margin-bottom: 0 !important;
    display: flex !important;       /* Ensure flex layout */
    flex-wrap: nowrap !important;   /* Never let them stack on desktop */
}

/* 2. LOCK COLUMNS TO 50% WIDTH (The anti-smush fix) */
.hero-split .wp-block-column {
    /* These three lines are the key: */
    flex-basis: 50% !important;  /* Start at 50% */
    flex-grow: 0 !important;     /* Do not grow bigger */
    flex-shrink: 0 !important;   /* Do not shrink smaller */
    width: 50% !important;       /* Hard fallback width */

    margin: 0 !important;        /* Remove default margins */
    padding: 0 !important;       /* Reset default padding */
}

/* 3. STYLE THE LEFT COLUMN (Text Side) */
/* Targets the first column to center its content and add padding */
.hero-split .wp-block-column:first-child {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Center Vertically */
    
    /* --- CONTROL YOUR SPACING HERE --- */
    /* This padding sits INSIDE the 50% width */
    padding: 6rem 4rem !important; /* Top/Bottom, Left/Right */
    /* --------------------------------- */
}

/* 4. FORCE THE IMAGE TO FILL THE RIGHT SIDE */
.hero-split .wp-block-column:last-child .wp-block-image,
.hero-split .wp-block-column:last-child img {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Ensure the right column container fills the height */
.hero-split .wp-block-column:last-child {
    display: flex !important;
    flex-direction: column !important;
}
.hero-split .wp-block-column:last-child figure.wp-block-image {
    flex-grow: 1 !important;
}


/* --- FOOTER WIDGET: PERMANENT UNDERLINE FOR LINKS --- */
#block-18 a {
    text-decoration: underline !important;
    color: #0554A6 !important; /* Ensures they use your brand blue */
}

/* Optional: Change color slightly on hover so it still feels interactive */
#block-18 a:hover {
    color: #092340 !important;
}

/* =======================================================
   GLOBAL TYPOGRAPHY SPACING
   Sets the rhythm for the entire site
   ======================================================= */

/* 1. Reset standard headers */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0 !important; /* Reset to prevent double gaps */
    margin-bottom: 20px !important;
    line-height: 1.2 !important;
}

/* 2. Add breathing room ABOVE headers (The "Section Break" feel) */
/* We don't apply this to H1 since it's usually at the top */
h2, h3 {
    margin-top: 50px !important; 
    margin-bottom: 25px !important;
}

h4, h5, h6 {
    margin-top: 30px !important;
    margin-bottom: 15px !important;
}

/* 3. EXCEPTION: Remove top margin if it's the very first item */
/* This prevents a weird gap at the top of a container */
.entry-content > *:first-child {
    margin-top: 0 !important;
}

/* =======================================================
   UTILITY: FIX COLUMN ALIGNMENT
   Removes top margin from headers ONLY when they are 
   at the very top of a column (so they align with images).
   ======================================================= */

.wp-block-column > h1:first-child,
.wp-block-column > h2:first-child,
.wp-block-column > h3:first-child,
.wp-block-column > h4:first-child,
.wp-block-column > h5:first-child,
.wp-block-column > h6:first-child {
    margin-top: 0 !important;
}

/* =======================================================
   CUSTOM PULLQUOTE: BLUE BOX (Centered & Non-Italic)
   Target: <figure class="wp-block-pullquote blue-citation">
   ======================================================= */

/* 1. THE CONTAINER BOX */
.wp-block-pullquote.blue-citation {
    background-color: #123145 !important; /* Deep Dark Blue */
    color: #ffffff !important;
    padding: 40px 60px !important; /* Even padding (more on sides for center look) */
    margin: 30px 0 !important;
    border: none !important;
    border-radius: 0 !important;
    position: relative !important;
    text-align: center !important; /* Centers the text */
    box-sizing: border-box !important;
}

/* 2. THE TRIANGLE ARROW (Decorative Left Indicator) */
.wp-block-pullquote.blue-citation::before {
    content: "" !important;
    position: absolute !important;
    top: 25% !important;        /* Vertically centered */
    transform: translateY(-50%) !important; /* Adjust for perfect center */
    left: 0 !important;         /* Stuck to the left edge */
    width: 0 !important;
    height: 0 !important;
    
    /* Triangle Shape */
    border-top: 10px solid transparent !important;
    border-bottom: 10px solid transparent !important;
    border-left: 15px solid #66c2cd !important; /* Cyan Color */
}

/* 3. RESET INNER BLOCKQUOTE */
.wp-block-pullquote.blue-citation blockquote {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* 4. TEXT STYLING (No Italics) */
.wp-block-pullquote.blue-citation p {
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    font-style: normal !important; /* REMOVES ITALICS */
    margin-bottom: 15px !important;
}

/* 5. TITLE STYLING (First Line Bold) */
.wp-block-pullquote.blue-citation p:first-child {
    font-weight: 700 !important;
    font-size: 18px !important;
    margin-bottom: 20px !important;
}

/* 6. CLEANUP (Hide default quote marks) */
.wp-block-pullquote.blue-citation::after,
.wp-block-pullquote.blue-citation blockquote::before {
    display: none !important;
    content: none !important;
}

/* =======================================================
   CUSTOM QUOTE: CENTERED TEAL STYLE
   Usage: Add class 'teal-quote' to a Quote Block
   ======================================================= */

/* 1. THE CONTAINER (Reset) */
.wp-block-quote.teal-quote {
    border: none !important;      /* Remove theme side borders */
    background: transparent !important;
    padding: 0 !important;
    margin: 40px auto !important; /* Center the block with space above/below */
    max-width: 800px !important;  /* Keep lines from getting too long */
    text-align: center !important;
}

/* 2. THE QUOTE TEXT */
.wp-block-quote.teal-quote p {
    color: #378f9e !important;    /* The Teal Color */
    font-family: 'Outfit', sans-serif !important;
    font-size: 20px !important;   /* Slightly larger than body text */
    font-weight: 700 !important;  /* Bold */
    line-height: 1.4 !important;
    font-style: normal !important;
    margin-bottom: 15px !important;
}

/* 3. THE AUTHOR CITATION */
.wp-block-quote.teal-quote cite {
    display: block !important;
    color: #378f9e !important;    /* Same Teal Color */
    font-size: 16px !important;
    font-weight: 600 !important;  /* Semi-bold */
    font-style: normal !important;
    margin-top: 10px !important;
    text-align: center !important;
}

/* 4. CLEANUP (Hide default giant quote marks) */
.wp-block-quote.teal-quote::before,
.wp-block-quote.teal-quote::after,
.wp-block-quote.teal-quote p::before,
.wp-block-quote.teal-quote p::after {
    content: none !important;
    display: none !important;
}

/* =======================================================
   UTILITY: TABLE PADDING
   Usage: Add class 'table-padded' to any Table Block
   ======================================================= */

.table-padded td, 
.table-padded th {
    padding: 10px 10px !important; /* Adjust this number to increase/decrease space */
}

/* Optional: Keep the borders clean */
.table-padded {
    border-collapse: collapse;
} 

/* =======================================================
   CUSTOM TABLE: HEADER & FLAT BODY (No Animation)
   Usage: Add class 'styled-table' to the Table Block
   ======================================================= */

/* 1. MAIN TABLE RESET */
.styled-table {
    border-collapse: collapse !important;
    margin: 25px 0 !important;
    font-size: 16px !important;
    width: 100% !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05) !important;
}

/* 2. THE HEADER (Dark Blue) */
.styled-table thead tr {
    background-color: #1f4e66 !important;
    color: #ffffff !important;
    text-align: left !important;
}

.styled-table th {
    padding: 15px 20px !important;
    font-weight: 700 !important;
    font-family: 'Outfit', sans-serif !important;
    /* Optional: Vertical separator line in header */
    border-right: 1px solid rgba(255,255,255,0.2) !important;
}
.styled-table th:last-child {
    border-right: none !important;
}

/* 3. THE BODY (Flat Light Gray) */
.styled-table tbody tr {
    background-color: #f1f4f6 !important; /* Constant light gray for all rows */
    border-bottom: 1px solid #e0e0e0 !important; /* Thin line between rows */
}

/* 4. THE CELLS */
.styled-table td {
    padding: 15px 20px !important;
    color: #333333 !important;
    /* Optional: Vertical separator line in body */
    border-right: 1px solid rgba(0,0,0,0.05) !important;
}
.styled-table td:last-child {
    border-right: none !important;
}

/* =======================================================
   CUSTOM TABLE: HEADER & FLAT BODY 
   Usage: Add class 'image-table' to the Table Block
   ======================================================= */

/* 1. MAIN TABLE RESET */
.styled-table {
    border-collapse: collapse !important;
    margin: 25px 0 !important;
    font-size: 16px !important;
    width: 100% !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05) !important;
}

/* 2. THE HEADER (Dark Blue) */
.image-table thead tr {
    background-color: #1f4e66 !important;
    color: #ffffff !important;
    text-align: left !important;
}

.image-table th {
    padding: 15px 20px !important;
    font-weight: 700 !important;
    font-family: 'Outfit', sans-serif !important;
    /* Optional: Vertical separator line in header */
    border-right: 1px solid rgba(255,255,255,0.2) !important;
}
.image-table th:last-child {
    border-right: none !important;
}

/* 3. THE BODY (Flat Light Gray) */
.image-table tbody tr {
    background-color: #ffffff !important; /* Constant light gray for all rows */
    border-bottom: 1px solid #e0e0e0 !important; /* Thin line between rows */
}

/* 4. THE CELLS */
.image-table td {
    padding: 15px 20px !important;
    color: #333333 !important;
    /* Optional: Vertical separator line in body */
    border-right: 1px solid rgba(0,0,0,0.05) !important;
}
.image-table td:last-child {
    border-right: none !important;
}

/* =======================================================
   UTILITY: SPACED LIST
   Usage: Add class 'list-spaced' to any List Block
   ======================================================= */

li {
    margin-bottom: 10px !important; /* Adjust this number for more/less space */
    line-height: 1.5 !important;    /* Improves readability for multi-line items */
}

/* Remove margin from the last item so it sits flush */
li:last-child {
    margin-bottom: 0 !important;
}

/* =======================================================
   HEADER MENU FIX
   1. Resets global list spacing for the menu.
   2. Fixes the 'Déconnexion' button alignment.
   ======================================================= */

/* 1. Stop the global list spacing from affecting the menu */
#primary-menu li.menu-item {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. Target the "Déconnexion" button specifically */
/* The 'ld-button' class often adds extra padding/margins */
#primary-menu li.ld-button {
    margin-top: 0 !important;   /* Removes the "lower" droop */
    display: inline-flex !important;
    align-items: center !important; /* Forces it to line up with text */
    height: auto !important;
}

/* 3. Ensure the link inside the button doesn't have extra height */
#primary-menu li.ld-button a {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    vertical-align: middle !important;
}

/* =======================================================
   CUSTOM TABLE: MATRIX STYLE (Top & Left Headers)
   Usage: Add class 'matrix-table' to the Table Block
   ======================================================= */

/* 1. MAIN TABLE RESET */
.matrix-table {
    border-collapse: collapse !important;
    margin: 25px 0 !important;
    width: 100% !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    font-size: 16px !important;
}

/* 2. TOP HEADER (Dark Blue) */
.matrix-table thead th {
    background-color: #1f4e66 !important; /* Dark Blue */
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    padding: 15px !important;
    text-align: center !important; /* Center the column titles */
    
    /* White vertical dividers between header items */
    border-right: 1px solid rgba(255,255,255,0.2) !important; 
}

/* 3. LEFT HEADER COLUMN (The "First Child") */
/* Targets the first cell of every row in the body */
.matrix-table tbody tr > :first-child {
    background-color: #1f4e66 !important; /* Same Dark Blue */
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    text-align: left !important;
    padding: 15px 20px !important;
    
    /* White borders to match the grid look in the screenshot */
    border-top: 1px solid rgba(255,255,255,0.2) !important; 
    border-right: 1px solid rgba(255,255,255,0.2) !important;
}

/* 4. REGULAR DATA CELLS (Light Gray) */
/* Targets all cells EXCEPT the first one */
.matrix-table tbody td:not(:first-child) {
    background-color: #f1f4f6 !important; /* Light Gray */
    color: #333333 !important;
    text-align: center !important; /* Align data in center */
    padding: 15px !important;
    
    /* Subtle borders for the grid */
    border: 1px solid #e0e0e0 !important;
}

/* =======================================================
   CUSTOM TABLE: COMPARISON STYLE (Zebra + Bold First Col)
   Usage: Add class 'comparison-table' to the Table Block
   ======================================================= */

/* 1. MAIN TABLE RESET */
.comparison-table {
    border-collapse: collapse !important;
    margin: 25px 0 !important;
    width: 100% !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    font-size: 16px !important;
}

/* 2. THE HEADER (Dark Blue) */
.comparison-table thead th {
    background-color: #1f4e66 !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    text-align: left !important;
    padding: 15px 20px !important;
    
    /* Vertical divider line in header */
    border-right: 1px solid rgba(255,255,255,0.2) !important;
}
.comparison-table thead th:last-child {
    border-right: none !important;
}

/* 3. ZEBRA STRIPING (Rows alternate colors) */
/* Odd Rows: Light Gray */
.comparison-table tbody tr:nth-child(odd) {
    background-color: #f1f4f6 !important;
}
/* Even Rows: White */
.comparison-table tbody tr:nth-child(even) {
    background-color: #ffffff !important;
}

/* 4. THE FIRST COLUMN (The "Label" Column) */
/* Makes the first cell in every row BOLD */
.comparison-table tbody td:first-child {
    font-weight: 700 !important;
    color: #000000 !important; /* Darker text for emphasis */
}

/* 5. ALL CELLS (Spacing & Vertical Borders) */
.comparison-table td {
    padding: 15px 20px !important;
    color: #333333 !important;
    vertical-align: top !important; /* Aligns text to top if multiple lines */
    
    /* Gray vertical divider lines between columns */
    border-right: 1px solid #e0e0e0 !important;
}

/* Remove border from the last column */
.comparison-table td:last-child {
    border-right: none !important;
}


/* =======================================================
   CUSTOM "ALERT BOX" - FIXED LAYOUT & WHITE-FILLED ICON
   ======================================================= */

/* 1. THE CONTAINER BOX */
.alert-box {
    position: relative;
    border: 2px solid #000000;   /* Black Border */
    
    /* Spacing */
    padding-top: 70px !important;    /* Room for icon */
    padding-bottom: 30px !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    margin: 40px 0 !important;
    
    /* Text */
    text-align: center !important; 
    font-weight: 700 !important;
    background-color: transparent !important;
}

/* 2. THE ICON (Constructed manually) */
.alert-box::before {
    content: "";
    position: absolute;
    
    /* POSITION & SIZE */
    top: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    z-index: 10;
    
    /* --- THE FIX: CSS-DRAWN CIRCLE --- */
    background-color: #ffffff !important;  /* 1. White Background */
    border: 2px solid #f57c00 !important;  /* 2. Orange Border (The Ring) */
    border-radius: 50% !important;         /* 3. Make it a Circle */
    /* -------------------------------- */
    
    /* THE ICON: Just the Exclamation Mark */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 512'%3E%3Cpath fill='%23f57c00' d='M176 432c0 44.2-35.8 80-80 80s-80-35.8-80-80 35.8-80 80-80 80 35.8 80 80zM25.4 210.3c-1.6-11.3-3.6-26.6-4.6-41C15.8 104.9 12.3 27 12.3 24 12.3 10.7 23 0 36.3 0h119.4c13.3 0 24 10.7 24 24 0 3 .5 80.9-8.5 145.3-1 14.4-3 29.7-4.6 41l-10.9 76.5c-2.3 16.3-16.3 28.2-32.8 28.2h-53.8c-16.5 0-30.5-11.9-32.8-28.2l-10.9-76.5z'/%3E%3C/svg%3E");
    
    background-repeat: no-repeat;
    background-position: center;
    background-size: 8px auto; /* Controls size of the ! inside the circle */
}

/* =======================================================
   ALERT BOX CLEANUP
   Removes default theme quote marks that might bleed through
   ======================================================= */

/* 1. Target inner Paragraphs and Blockquotes */
.alert-box p::before,
.alert-box p::after,
.alert-box blockquote::before,
.alert-box blockquote::after,
.alert-box .wp-block-quote::before,
.alert-box .wp-block-quote::after {
    content: none !important;
    display: none !important;
    border: none !important;
}

/* 2. Target the main box's ::after pseudo-element */
/* (Just in case the theme uses ::after for the closing quote) */
.alert-box::after {
    content: none !important;
    display: none !important;
}


/* Ajouter votre code CSS ici.
                     
Par exemple:
.exemple {
    color: red;
}

Pour améliorer vos connaissances en CSS, visitez http://www.w3schools.com/css/css_syntax.asp

Fin du commentaire */ 


/* =======================================================
   LEARNDASH NAVIGATION - FINAL MASTER CSS
   ======================================================= */

/* --- 1. GLOBAL BUTTON STYLES (Base Layer) --- */
/* Applies to Previous, Next, Complete, and Incomplete buttons */
.ld-navigation .ld-navigation__previous-link,
.ld-navigation .ld-navigation__next-link,
.ld-navigation input.learndash_mark_complete_button,
.ld-navigation input.learndash_mark_incomplete_button,
.ld-navigation .learndash_mark_complete_button,
.ld-navigation .learndash_mark_incomplete_button,
.ld-navigation button.learndash_mark_complete_button {
    
    /* Layout & Alignment */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important; /* Fixes "Mark Incomplete" left-align */
    
    /* Shape & Size */
    box-sizing: border-box !important;
    border-radius: 50px !important;
    padding: 12px 30px !important;
    border: 2px solid transparent !important; /* Locks border width */
    
    /* Typography */
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
    cursor: pointer !important;
    
    /* Animation Defaults */
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

/* --- 2. DESKTOP SPECIFIC (Screen > 768px) --- */
@media screen and (min-width: 769px) {
    .ld-navigation-lesson,
    .ld-navigation {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 20px 0 !important;
        border-top: 1px solid #eee !important;
    }

    /* Desktop Ordering */
    .ld-navigation .ld-navigation__previous { order: 1; margin-right: auto; }
    .ld-navigation .ld-navigation__progress { order: 2; margin: 0 auto; }
    .ld-navigation .ld-navigation__next     { order: 3; margin-left: auto; }
    
    /* On Desktop, buttons should fit their text (Pill) */
    .ld-navigation .learndash_mark_complete_button,
    .ld-navigation .learndash_mark_incomplete_button {
        width: auto !important; 
    }
}

/* --- 3. COLORS & STATES --- */

/* Blue Buttons (Prev/Next) */
.ld-navigation .ld-navigation__previous-link,
.ld-navigation .ld-navigation__next-link {
    background-color: #3096cd !important;
}
.ld-navigation .ld-navigation__previous-link:hover,
.ld-navigation .ld-navigation__next-link:hover {
    transform: translateY(-2px); /* Only Blue buttons jump */
    opacity: 0.9;
}

/* Green Buttons (Complete/Incomplete) */
.ld-navigation .learndash_mark_complete_button,
.ld-navigation .learndash_mark_incomplete_button,
.ld-navigation input.learndash_mark_complete_button,
.ld-navigation input.learndash_mark_incomplete_button {
    background-color: #2a8c82 !important;
    margin: 0 !important;
}

/* Green Hover State (Color Change Only - NO MOVEMENT) */
.ld-navigation .learndash_mark_complete_button:hover,
.ld-navigation .learndash_mark_incomplete_button:hover,
.ld-navigation input.learndash_mark_complete_button:hover,
.ld-navigation input.learndash_mark_incomplete_button:hover {
    background-color: #009174 !important;
    transform: none !important; /* Explicitly stop jumping */
}

/* --- 4. ICON STABILIZER --- */
/* Forces checkmark to never change size */
.ld-navigation svg {
    fill: #ffffff !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    flex-shrink: 0 !important;
}
.ld-navigation__previous-link svg { margin-right: 10px !important; }
.ld-navigation__next-link svg { margin-left: 10px !important; }
.ld-navigation .learndash_mark_complete_button svg { margin-right: 10px !important; }

/* --- 5. CLEANUP (Ghost Elements) --- */
.ld-navigation .ld-navigation__back-to-course,
.ld-navigation .ld-navigation__label--completed,
.ld-navigation .ld-svgicon__lesson-complete,
.ld-navigation .ld-navigation__progress-completed-action {
    display: none !important;
}

/* --- 6. MOBILE LAYOUT (Screen < 768px) --- */
@media screen and (max-width: 768px) {
    
    /* Main Stack */
    .ld-navigation,
    .ld-navigation-lesson {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centers items */
        gap: 15px !important;
        padding-bottom: 40px !important;
    }

    /* Force Wrappers to fill width so we can center inside them */
    .ld-navigation .ld-navigation__previous,
    .ld-navigation .ld-navigation__next,
    .ld-navigation .ld-navigation__progress,
    .ld-navigation .ld-navigation__progress-completed,
    .ld-navigation .ld-navigation__progress-mark-complete,
    .ld-navigation form {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    /* THE BUTTONS: Force 100% Width ALWAYS */
    .ld-navigation .ld-navigation__previous-link,
    .ld-navigation .ld-navigation__next-link,
    .ld-navigation .learndash_mark_complete_button,
    .ld-navigation .learndash_mark_incomplete_button,
    .ld-navigation input.learndash_mark_complete_button,
    .ld-navigation input.learndash_mark_incomplete_button {
        width: 100% !important;
        max-width: 350px !important;
        display: flex !important; /* Ensures centering works */
        justify-content: center !important; /* Horizontal Center */
        align-items: center !important;     /* Vertical Center */
        text-align: center !important;      /* Text Center */
    }

    /* MOBILE HOVER LOCK: STRICT OVERRIDE */
    /* Prevents the button from shrinking back to 'auto' on hover */
    .ld-navigation .learndash_mark_complete_button:hover,
    .ld-navigation .learndash_mark_incomplete_button:hover,
    .ld-navigation input.learndash_mark_complete_button:hover,
    .ld-navigation input.learndash_mark_incomplete_button:hover {
        width: 100% !important;
        max-width: 350px !important;
    }
    
    /* Mobile Order */
    .ld-navigation .ld-navigation__previous { order: 1 !important; }
    .ld-navigation .ld-navigation__progress { order: 2 !important; }
    .ld-navigation .ld-navigation__next     { order: 3 !important; }
}

/* =======================================================
   BREADCRUMBS: BLUE & UNDERLINED
   ======================================================= */

/* 1. Target the links inside the breadcrumbs container */
.ld-layout__header .ld-breadcrumbs .ld-breadcrumbs__link {
    color: #3B91CA !important;      /* Standard Link Blue */
    text-decoration: underline !important; /* Force underline */
    font-weight: 600 !important;    /* Optional: Makes them pop a bit more */
	transition: none !important;
    background: none !important;
}

/* 2. Hover State (Optional Polish) */
.ld-layout__header .ld-breadcrumbs .ld-breadcrumbs__link:hover {
    color: #004494 !important;      /* Slightly darker on hover */
    text-decoration-thickness: 2px !important; /* Thicker line on hover */
}

/* 3. Current Item (The last one usually doesn't need to look like a link) */
/* If you want the current page (non-clickable) to stay black/grey: */
.ld-layout__header .ld-breadcrumbs .ld-breadcrumbs__item .ld-breadcrumbs__link[aria-current="page"] {
    color: inherit !important;      /* Inherit text color (usually grey/black) */
    text-decoration: none !important;
    cursor: default !important;
}

/* =======================================================
   QUIZ BREADCRUMBS FIX (FINAL SIZE ADJUSTMENT)
   1. White Background & Black Separators.
   2. Font Size reduced to match Lessons.
   ======================================================= */

/* 1. CONTAINER: Force White & Remove Box Styling */
.ld-quiz-status,
.ld-quiz-status .ld-breadcrumbs {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    width: 100% !important;
}

/* 2. SEPARATORS: Slash '/' in Black */
.ld-quiz-status .ld-breadcrumbs-segments li:after {
    display: none !important;
}

.ld-quiz-status .ld-breadcrumbs-segments li:not(:last-child)::after {
    content: "/" !important;
    display: inline-block !important;
    padding: 0 8px !important;      /* Slightly tighter spacing */
    
    /* SEPARATOR STYLE */
    color: #000000 !important;
    font-weight: 400 !important;
    font-size: 14px !important;     /* Match text size */
}

/* 3. LINKS (Blue) */
.ld-quiz-status .ld-breadcrumbs a {
    color: #3B91CA !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
    
    /* SIZE ADJUSTMENT HERE */
    font-size: 14px !important;     /* Reduced from 16px */
}

/* 4. CURRENT ITEM (Black Title) */
.ld-quiz-status .ld-breadcrumbs li:last-child,
.ld-quiz-status .ld-breadcrumbs a[aria-current="page"] {
    color: #000000 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    pointer-events: none !important;
    
    /* SIZE ADJUSTMENT HERE */
    font-size: 14px !important;     /* Reduced from 16px */
}

/* =======================================================
   HEADER BUTTONS: "MARK COMPLETE" & "INCOMPLETE"
   Targets both <input> and <button> versions.
   ======================================================= */

/* 1. SHARED STRUCTURE (Clean, No Borders, Font) */
.ld-focus-header .ld-content-actions button.learndash_mark_complete_button,
.ld-focus-header .ld-content-actions input[type="submit"] {
    /* Visual Reset */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    
    /* Typography */
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    
    /* Layout */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Spacing */
    padding: 10px 16px !important;
    margin: 0 4px !important;
    border-radius: 8px !important;
    
    /* Animation */
    transition: transform 0.2s ease !important;
    cursor: pointer !important;
}

/* 2. COLOR: GREEN (#00b894) */
.ld-focus-header .ld-content-actions button.learndash_mark_complete_button,
.ld-focus-header .ld-content-actions input[type="submit"] {
    color: #2a8c82 !important;
}

/* 3. ICON FIX (Ensure the SVG checkmark is also Green) */
.ld-focus-header .ld-content-actions button.learndash_mark_complete_button svg,
.ld-focus-header .ld-content-actions button.learndash_mark_complete_button path {
    fill: #00b894 !important; /* Forces icon to match text */
    color: #00b894 !important;
    margin-right: 8px !important; /* Spacing between checkmark and text */
}

/* 4. HOVER & FOCUS (The Jump + No Outline) */
.ld-focus-header .ld-content-actions button.learndash_mark_complete_button:hover,
.ld-focus-header .ld-content-actions button.learndash_mark_complete_button:focus,
.ld-focus-header .ld-content-actions input[type="submit"]:hover,
.ld-focus-header .ld-content-actions input[type="submit"]:focus {
    
    /* Keep it Clean */
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
    
    /* The Jump */
    transform: translateY(-2px) !important;
}

/* =======================================================
   UNIFORM BUTTONS: HIDE CHECKMARK ICON
   Makes both "Complete" and "Incomplete" buttons text-only.
   ======================================================= */

.ld-focus-header .ld-content-actions button.learndash_mark_complete_button svg,
.ld-focus-header .ld-content-actions .learndash_mark_complete_button .ld-icon {
    display: none !important;
}

/* =======================================================
   DISCONNECT/CONNECT BUTTON: THE "SIMPLE BUTTON" FIX
   Dismantles the dropdown and creates a static button.
   ======================================================= */

/* 1. HIDE THE CLUTTER (Avatar, Welcome Text, Dropdown Arrow) */
#ld-focus-header .ld-user-menu .ld-user-welcome-text,
#ld-focus-header .ld-user-menu .ld-profile-avatar,
#ld-focus-header .ld-user-menu::after { 
    display: none !important;
}

/* 2. NEUTRALIZE THE CONTAINER (Stop it from being a clickable menu trigger) */
#ld-focus-header .ld-user-menu {
    pointer-events: none !important; 
    background: transparent !important;
    border: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 3. UNWRAP THE MENU ITEMS (Stop them from floating/hiding) */
#ld-focus-header .ld-user-menu .ld-user-menu-items {
    pointer-events: auto !important;
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    width: auto !important;
    padding: 0 !important;
    min-width: 0 !important; 
}

/* 4. HIDE UNWANTED LINKS (But explicitly keep logout and connexion) */
#ld-focus-header .ld-user-menu .ld-user-menu-items a:not([href*="logout"]):not([href*="connexion"]) {
    display: none !important;
}

/* 5. STYLE BOTH LINKS AS BUTTONS */
#ld-focus-header .ld-user-menu .ld-user-menu-items a[href*="logout"],
#ld-focus-header .ld-user-menu .ld-user-menu-items a[href*="connexion"] {
    /* Layout & Shape */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    border-radius: 8px !important; 
    margin-left: 10px !important;  
    
    /* Typography (Navy Blue) */
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    color: #123145 !important;
    text-decoration: none !important;
    line-height: 1 !important;
    
    /* Colors (White Background) */
    background-color: #ffffff !important;
    border: 1px solid transparent !important; 
    
    /* Fix weird theme overrides */
    width: auto !important;
    float: none !important;
    box-shadow: none !important;
}

/* 6. HOVER STATE */
#ld-focus-header .ld-user-menu .ld-user-menu-items a[href*="logout"]:hover,
#ld-focus-header .ld-user-menu .ld-user-menu-items a[href*="connexion"]:hover {
    background-color: #f4f4f4 !important; 
    color: #123145 !important;
    transform: translateY(-2px) !important; 
}

/* =======================================================
   BOUTON CONNEXION INJECTÉ (VISITEURS DÉCONNECTÉS)
   ======================================================= */
.ld-custom-login-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    border-radius: 8px !important; 
    margin-left: 15px !important;  
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    color: #123145 !important;
    text-decoration: none !important;
    line-height: 1 !important;
    background-color: #ffffff !important;
    border: 1px solid transparent !important; 
    white-space: nowrap !important;
}

/* =======================================================
   HOVER STATES (No gray background)
   ======================================================= */

/* 1. Hover state for the native DÉCONNEXION button */
#ld-focus-header .ld-user-menu .ld-user-menu-items a[href*="logout"]:hover {
    background-color: #ffffff !important; /* Forces it to stay white */
    color: #123145 !important;
    transform: translateY(-2px) !important; /* Keeps the little jump */
}

/* 2. Hover state for the injected CONNEXION button */
.ld-custom-login-btn:hover {
    background-color: #ffffff !important; /* Forces it to stay white */
    color: #123145 !important;
    transform: translateY(-2px) !important; /* Keeps the little jump */
}

/* =======================================================
   QUIZ "PREVIOUS CHAPTER" BUTTON FIX
   Styles the back button to look like a clean link.
   ======================================================= */

/* 1. Reset the Button to look like a Text Link */
.ld-content-action .ld-button.ld-button-transparent {
    /* Remove Button "Boxiness" */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    
    /* Typography & Color */
    color: #3B91CA !important;      /* Match your Link Blue */
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;    /* Bold to match UI */
    font-size: 14px !important;
    text-decoration: none !important;
    
    /* Layout */
    display: inline-flex !important;
    align-items: center !important;
}

/* 2. Style the Icon (Arrow Left) */
.ld-content-action .ld-button.ld-button-transparent .ld-icon {
    margin-right: 8px !important;   /* Space between arrow and text */
    font-size: 16px !important;
    color: inherit !important;      /* Forces icon to be blue too */
}

/* 3. Hover Interaction */
.ld-content-action .ld-button.ld-button-transparent:hover {
    color: #004494 !important;      /* Darker Blue on hover */
    background: transparent !important;
    transform: translateX(-3px) !important; /* Subtle slide to the left */
}

.ld-content-action .ld-button.ld-button-transparent:hover,
.ld-content-action .ld-button.ld-button-transparent:focus,
.ld-content-action .ld-button.ld-button-transparent:active,
.ld-content-action .ld-button.ld-button-transparent:focus-visible {
    outline: none !important;
    outline-width: 0 !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important; /* Double check bg stays clear */
}

/* =========================================
   LEARNDASH FOCUS MODE OVERRIDES
   ========================================= */
/* Remove underline from left navigation lesson titles */
a.ld-lesson-item-preview-heading {
    text-decoration: none !important;
    border: none !important;      /* Removes borders some themes add */
    box-shadow: none !important;  /* Removes "fancy" underlines in modern themes */
}

/* Ensures the hover state doesn't add it back */
a.ld-lesson-item-preview-heading:hover {
    text-decoration: none !important;
}


/* Removes underline from the Course Title in the Focus Mode sidebar */
#ld-focus-mode-course-heading {
    text-decoration: none !important;
    border: none !important;      /* Removes theme borders */
    box-shadow: none !important;  /* Removes modern theme underlines */
    color: inherit !important;    /* Optional: Forces it to use the sidebar text color */
}

/* Ensures the hover state doesn't add it back */
#ld-focus-mode-course-heading:hover {
    text-decoration: none !important;
}

/* =======================================================
   FIX LEARDASH LIST UNDERLINES
   Forces removal of underlines on Module/Lesson lists 
   overriding theme defaults.
   ======================================================= */

.ld-table-list-item-preview {
    text-decoration: none !important;
    border-bottom: none !important; /* Covers themes that use borders for underlines */
    box-shadow: none !important;    /* Covers themes that use shadow for underlines */
}

/* Optional: Ensure hover doesn't bring it back weirdly */
.ld-table-list-item-preview:hover {
    text-decoration: none !important;
}


/* --- 4. THE CENTERED JUMP FIX (Disconnect Button) --- */

/* A. Hide Everything Else */
#ld-focus-header .ld-user-menu .ld-user-menu-items a:not([href*="logout"]),
#ld-focus-header .ld-user-menu .ld-user-welcome-text,
#ld-focus-header .ld-user-menu .ld-profile-avatar,
#ld-focus-header .ld-user-menu::after { 
    display: none !important;
}

/* B. Reset the Container */
#ld-focus-header .ld-user-menu,
#ld-focus-header .ld-user-menu .ld-user-menu-items {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* C. THE BUTTON STYLE (Flexbox Centering + Animation Setup) */
#ld-focus-header .ld-user-menu .ld-user-menu-items a[href*="logout"],
#ld-focus-header .ld-user-menu .ld-user-menu-items a[href*="logout"]:link,
#ld-focus-header .ld-user-menu .ld-user-menu-items a[href*="logout"]:visited {
    
    /* 1. LAYOUT (The Centering Fix) */
    display: inline-flex !important; /* Perfect centering container */
    align-items: center !important;  /* Vertical Center */
    justify-content: center !important; /* Horizontal Center */
    text-align: center !important;
    
    /* 2. COLORS (Navy Text / White Box) */
    color: #123145 !important; 
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    
    /* 3. VISUALS */
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 8px !important; /* Matches other buttons */
    
    /* 4. SPACING */
    padding: 10px 16px !important;
    
    /* 5. ANIMATION SETUP */
    /*transition: transform 0.2s ease !important; /* Smooth movement */
}

/* D. HOVER STATE (The Jump) */
#ld-focus-header .ld-user-menu .ld-user-menu-items a[href*="logout"]:hover {
    /* Keep Colors Steady */
    background-color: #ffffff !important; 
    color: #123145 !important;
    
    /* EXECUTE JUMP */
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important; /* Optional: subtle shadow on lift */
    opacity: 1 !important;
}

/* =======================================================
   MARK COMPLETE BUTTON: THE OUTLINE KILLER
   Removes border/glow on Hover, Click, and Focus.
   ======================================================= */

/* Target the Green Button specifically */
#ld-focus-header .ld-content-actions input[type="submit"]:hover,
#ld-focus-header .ld-content-actions input[type="submit"]:focus,
#ld-focus-header .ld-content-actions input[type="submit"]:active,
#ld-focus-header .ld-content-actions input[type="submit"]:focus-visible {
    
    /* 1. Kill the Line */
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    border: none !important;
    
    /* 2. Kill the Glow/Shadow */
    box-shadow: none !important;
    
    /* 3. Ensure Background stays transparent */
    background: transparent !important;
    background-color: #2a8c82 !important;
    
    /* 4. Keep the Jump */
    transform: translateY(-2px) !important;
}

/* =======================================================
   LEARNDASH SIDEBAR: CONSOLIDATED FINAL FIX
   1. Layout: Arrow Right, Title Left with spacing.
   2. Visuals: White Arrow, No Rings, No Borders.
   3. Interaction: No Focus/Hover outlines.
   ======================================================= */

/* 1. HEADER CONTAINER LAYOUT */
.ld-course-navigation-heading {
    display: flex !important;
    align-items: center !important;
    /* Padding ensures title isn't glued to the left edge */
    padding-left: 20px !important;
    padding-right: 10px !important;
}

/* 2. TITLE SPACING */
.ld-focus-mode-course-heading-wrapper {
    flex-grow: 1 !important;        /* Takes up available space */
    margin-right: 15px !important;  /* Gap between title and arrow */
    line-height: 1.2 !important;
}

/* 3. BUTTON POSITION & RESET (The "Ring Killer") */
#ld-focus-sidebar-toggle {
    /* Positioning */
    margin-left: auto !important;   /* Pushes to far right */
    order: 99 !important;           /* Visual order: last */
    flex-shrink: 0 !important;      /* Prevent squishing */

    /* Dimensions & Alignment */
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Visual Reset (Nukes borders/bg) */
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* 4. GHOST ELEMENT REMOVAL (Extra Ring Killer) */
/* Removes the hidden circle elements */
#ld-focus-sidebar-toggle::before,
#ld-focus-sidebar-toggle::after {
    display: none !important;
    content: none !important;
    background: none !important;
    border: none !important;
}

/* 5. ICON STYLING */
#ld-focus-sidebar-toggle .ld-icon {
    /* Color & Fill */
    color: #ffffff !important;
    fill: #ffffff !important;

    /* Size & Layout */
    font-size: 20px !important;
    display: inline-block !important;

    /* Logic: Disable manual rotation (Let LearnDash swap the icon) */
    transform: none !important;

    /* Reset inherited borders */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 6. INTERACTION: THE NUCLEAR OPTION */
/* This targets the button AND everything inside it (the icon) */
#ld-focus-sidebar-toggle:focus,
#ld-focus-sidebar-toggle:active,
#ld-focus-sidebar-toggle:focus-visible,
#ld-focus-sidebar-toggle:visited,
#ld-focus-sidebar-toggle * { 
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}


/* =========================================
   LEARNDASH COURSE LESSON LIST OVERRIDES
   ========================================= */

/* Removes underline from Lesson titles in the Course Content list */
a.ld-accordion__item-title {
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Ensures the hover state doesn't add it back */
a.ld-accordion__item-title:hover {
    text-decoration: none !important;
}

/* =========================================
   LEARNDASH COURSE GRID/LIST OVERRIDES
   ========================================= */

/* Force Course Grid Images to equal height */
.thumbnail .image img {
    height: 200px !important;      /* Change this number to fit your design */
    width: 100% !important;        /* Ensures it fills the card width */
    object-fit: cover !important;  /* The Magic: Crops to fit, prevents squishing */
    object-position: center center !important; /* Focuses on the middle of the image */
}

/* Change the background color of the 'Completed' ribbon */
.ribbon.completed {
    background-color: #2a8c82 !important; /* Adjust this Hex code to your preferred green */
    color: #ffffff !important; /* Text color */
}

/* Change the background color of the 'Enrolled' ribbon */
.ribbon.enrolled {
    background-color: #133040 !important;
    color: #ffffff !important; /* Text color */
}

/* =======================================================
   UNIVERSAL SEPARATOR BLOCK FIX (Frontend + Editor)
   Targets the WordPress Separator Block everywhere.
   ======================================================= */

/* 1. FRONTEND SELECTOR (Standard) */
.wp-block-separator,

/* 2. EDITOR SELECTOR (The "Backend" Fix) */
/* Targets the HR inside the generic block wrapper in the editor */
.wp-block.wp-block-separator hr,
.block-editor-block-list__block hr.wp-block-separator,

/* 3. SAFETY FALLBACK (Direct HRs in LearnDash) */
.learndash-wrapper .wp-block-separator {
    
    /* VISIBILITY & COLOR */
    display: block !important;
    border: 0 !important;
    border-top: 1px solid var(--wp--preset--color--secondary-1, #378f9e) !important; /* Teal */
    background: transparent !important;
    opacity: 1 !important;
    height: 1px !important;

    /* LAYOUT & SPACING */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 30px 0 !important; /* Clean vertical spacing */
    
    /* RESET FLOATS */
    float: none !important;
    clear: both !important;
}

/* OPTIONAL: Remove the default 'dots' or 'wide' styles if the theme adds them */
.wp-block-separator:not(.is-style-dots) {
    border-bottom: none !important;
}

/* =======================================================
   FEATURED IMAGE: FORCE LANDSCAPE (16:9)
   Crops portrait images to fit a landscape box.
   ======================================================= */

.ld-tab-bar__panel .ld-featured-image {
    /* 1. Force Width & Reset Height */
    width: 100% !important;
    height: auto !important;
    
    /* 2. Define the Landscape Shape (16:9 is standard video shape) */
    aspect-ratio: 16/9 !important;
    
    /* 3. The "Magic" Crop */
    /* 'cover' ensures the image fills the box without stretching/squishing. */
    /* It will cut off the top/bottom of portrait images. */
    object-fit: cover !important;
    
    /* 4. Center the Subject */
    /* Keeps the middle of the photo visible. Change to 'top center' if heads get cut off. */
    object-position: center center !important;
    
    /* 5. Optional Polish */
    border-radius: 8px !important;
    max-height: 500px !important; /* Prevents it from getting too tall on huge screens */
}

/* =======================================================
   HIDE PROFILE STATS (Certificates & Points)
   Removes specific stats from the user profile header.
   ======================================================= */

.ld-profile-stat-certificates, 
.ld-profile-stat-points {
    display: none !important;
}

/* Emergency CSS to hide intro if JS fails */
.wpProQuiz_content:not([style*="display: none"]) ~ .quiz-intro-section,
.wpProQuiz_content:not([style*="display: none"]) .quiz-intro-section {
    display: none !important;
}

/* =======================================================
   HIDE LEARNDASH CERTIFICATE COLUMN
   ======================================================= */
.ld-column-certificate {
    display: none !important;
}

/* =======================================================
   LEARNDASH LOGIN RESKIN - "SE CONNECTER" STYLE (FINAL)
   Colors: BG #245475 | Box #F0F3F6 | Btn #3B91CA
   Text: White on Blue, Black in Form
   ======================================================= */


/* --- 2. HEADINGS & TOGGLE TEXT --- */
.ld-registration__wrapper h2,
.ld-registration__heading,
.ld-registration__p {
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    text-align: center !important;
}

.ld-registration__heading {
    font-size: 36px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

/* Links (like "Inscription") inside the blue area */
.ld-registration__p a {
    color: #ffffff !important;
    text-decoration: underline !important;
    font-weight: bold !important;
}

/* --- 3. THE FORM BOX (Grey Container) --- */
.ld-registration__login-form,
.ld-registration__register-form {
    background-color: #F0F3F6 !important;
    padding: 40px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
    width: 100% !important;
    max-width: 850px !important;
    margin: 20px auto 0 !important;
    box-sizing: border-box !important;
    
    /* FORCE TEXT COLOR RESET FOR INSIDE THE BOX */
    color: #333333 !important; 
}

/* --- 4. LOGIN FORM GRID (The 2-Column Layout) --- */
#loginform {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 20px 30px;
    align-items: end;
}

#loginform .login-username { grid-column: 1; margin: 0 !important; }
#loginform .login-password { grid-column: 2; margin: 0 !important; }

#loginform .ld-registration__login_options_wrapper,
#loginform .login-submit {
    grid-column: 1 / -1;
    width: 100% !important;
}

/* --- 5. INPUT STYLING (The Fix for Invisible Text) --- */
#loginform label {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    color: #333333 !important; /* Label Color */
    font-size: 15px !important;
    display: block !important;
    margin-bottom: 8px !important;
}

#loginform input[type="text"],
#loginform input[type="password"] {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    
    /* FORCE INPUT TEXT BLACK */
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    height: auto !important;
    box-sizing: border-box !important;
}

/* --- 6. OPTIONS ROW --- */
#loginform .ld-registration__login_options_wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 15px !important;
    color: #333333 !important; /* Ensure checkbox text is dark */
}

#loginform .ld-registration__login_options_wrapper a {
    color: #333333 !important;
    text-decoration: underline !important;
    font-size: 14px !important;
}

/* --- 7. SUBMIT BUTTON --- */
#loginform .login-submit {
    text-align: center !important;
    margin-top: 30px !important;
}

#loginform input[type="submit"] {
    background-color: #3B91CA !important;
    color: #ffffff !important; /* Button text stays white */
    border: none !important;
    border-radius: 50px !important;
    padding: 12px 50px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: transform 0.2s ease !important;
    width: auto !important;
}

#loginform input[type="submit"]:hover {
    background-color: #004494 !important;
    transform: translateY(-2px);
}

/* --- 8. MOBILE RESPONSIVENESS --- */
@media screen and (max-width: 768px) {
    #loginform { grid-template-columns: 1fr !important; }
    #loginform .login-username, #loginform .login-password { grid-column: 1 !important; }
    .ld-registration__wrapper { padding: 40px 15px !important; }
}

/* =======================================================
   ACF FIELDS & "INSCRIPTION" TITLE FIX
   Styles the custom member number field and its header.
   ======================================================= */

/* 1. FIX THE "INSCRIPTION" H2 (Make it Dark) */
/* It was inheriting white from the main page title. We turn it dark grey. */
.ld-registration__register-form h2 {
    color: #333333 !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 24px !important;
    text-align: left !important;
    margin-top: 30px !important; /* separation from previous fields */
    margin-bottom: 15px !important;
    border-bottom: 2px solid #ddd !important; /* Optional: adds a nice separator line */
    padding-bottom: 10px !important;
}

/* 2. ACF CONTAINER SPACING */
.acf-user-register-fields {
    padding: 10px 0 20px 0 !important; /* Add vertical breathing room */
    margin-bottom: 10px !important;
}

/* 3. LABELS (Match LearnDash Labels) */
.acf-field .acf-label label {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    color: #333333 !important;
    font-size: 15px !important;
    margin-bottom: 5px !important;
    display: block !important;
}

/* 4. DESCRIPTION TEXT ("Composé de 4 chiffres") */
.acf-field .acf-label .description {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    color: #666666 !important;
    font-style: normal !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

/* 5. THE INPUT FIELD (Match Standard Inputs) */
.acf-field .acf-input input[type="number"],
.acf-field .acf-input input[type="text"] {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    
    /* Text Styling */
    color: #000000 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    height: auto !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

/* Focus state for the custom input */
.acf-field .acf-input input:focus {
    border-color: #3B91CA !important;
    outline: none !important;
}

/* =======================================================
   LOGIN PAGE (ID 257) - UNIFIED LAYOUT
   Centers content and forces breathing room for both states.
   ======================================================= */

.page-id-257 .entry-content > .wp-block-group {
    /* 1. Force Minimum Height */
    /* 80vh ensures it fills most of the screen */
    min-height: 80vh !important; 
    
    /* 2. Vertically Center Everything */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    
    /* 3. FORCE BREATHING ROOM (The missing piece) */
    /* This adds space above/below the form so it never touches the edges */
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    
    /* 4. Ensure the inner container respects the centering */
    box-sizing: border-box !important;
}

/* =======================================================
   REMOVE REDUNDANT "INSCRIPTION" TITLE & LINE
   Hides the duplicate H2 inside the registration form.
   ======================================================= */

.ld-registration__register-form h2 {
    display: none !important;
}

/* =======================================================
   Color overrides
   ======================================================= */

.ld-registration-order__heading {
	color: white !important;
}

.link-no-hover-color a:hover {
	color: white !important;
}

/* =======================================================
   HIDE LOGIN MODAL ICONS
   Removes the person/lock icons and resets text spacing.
   ======================================================= */

/* 1. Hide the icons (Pseudo-elements) */
.ld-login-modal-form .login-username::before,
.ld-login-modal-form .login-password::before {
    display: none !important;
    content: none !important;
}

/* 2. Reset input padding */
/* Remove the extra space we added for the icons so text sits naturally */
.ld-login-modal-form input#user_login,
.ld-login-modal-form input#user_pass {
    padding-left: 15px !important; 
}

/* =======================================================
   FIX "CREATE ACCOUNT" BUTTON STYLE
   Style: Ghost Button (Blue Outline) -> Fills Blue on Hover
   ======================================================= */

/* 1. Default State (Outline) */
.ld-login-modal-register a.ld-button.ld-button-reverse {
    background-color: transparent !important;
    border: 2px solid #3B91CA !important; /* Thick Blue Border */
    color: #3B91CA !important;            /* Blue Text */
    
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 10px 30px !important;
    border-radius: 50px !important;       /* Pill Shape */
    text-transform: none !important;      /* Prevent forced uppercase if set */
    transition: all 0.2s ease !important;
    box-shadow: none !important;
	margin: 20px !important;
	box-sizing: border-box !important; /* Ensures border is calculated INSIDE the width/height */
    line-height: 1.2 !important;       /* Resets any weird line-height causing overflow */
    display: inline-block !important;
}

/* 2. Hover State (Filled) */
.ld-login-modal-register a.ld-button.ld-button-reverse:hover {
    background-color: #3B91CA !important; /* Fills Blue */
    color: #ffffff !important;            /* White Text */
    border-color: #3B91CA !important;
    transform: translateY(-2px) !important; /* Slight lift */
}

.ld-login-modal-register a.ld-button.ld-button-reverse {
    border-bottom: 2px solid #3B91CA !important;
}

/* =======================================================
   FIX BUTTON CLIPPING (The Box-Shadow Method)
   Uses an internal shadow to create a border that can't be cut off.
   ======================================================= */

.ld-login-modal-register a.ld-button.ld-button-reverse {
    /* 1. Remove the standard border that is getting clipped */
    border: none !important;
    
    /* 2. Use Box Shadow to fake the border (Inset = Inside the box) */
    /* 0 offsets, 0 blur, 2px thickness, blue color */
    box-shadow: inset 0 0 0 2px #3B91CA !important; 
    
    /* 3. Button Basics */
    background-color: transparent !important;
    color: #3B91CA !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 12px 30px !important; /* Increased vertical padding slightly */
    border-radius: 50px !important;
    display: inline-block !important;
    line-height: 1.2 !important; /* Fix vertical alignment */
    transition: all 0.2s ease !important;
}

/* Hover State */
.ld-login-modal-register a.ld-button.ld-button-reverse:hover {
    background-color: #3B91CA !important;
    color: #ffffff !important;
    /* On hover, we keep the shadow but match the bg color so it looks filled */
    box-shadow: inset 0 0 0 2px #3B91CA !important;
    transform: translateY(-2px) !important;
}

/* =======================================================
   REMOVE HOVER EFFECT ON REGISTRATION PANEL
   Prevents background color change/overlay on hover.
   ======================================================= */

.ld-login-modal-register,
.ld-login-modal-register:hover {
    background-color: transparent !important; /* Or set to your specific dark blue hex if needed */
    filter: none !important;
    opacity: 1 !important;
    transition: none !important;
}

/* Ensure inner wrapper doesn't have a separate hover effect */
.ld-login-modal-register .ld-login-modal-wrapper:hover {
    background: none !important;
    opacity: 1 !important;
}

/* Change hover color for the 'Se connecter' button */
#loginform input[type="submit"]:hover {
    background-color: #133040 !important;
}