/* =====================================================================
   CATALOGUE DENDREO - Theme "Qubstudio" (lavande / violet / pastels)
   =====================================================================

   >>> MODE D'EMPLOI POUR CHANGER LES COULEURS (sans connaitre le CSS) <<<

   1. Toutes les couleurs du catalogue sont definies UNE SEULE FOIS dans la
      section " PALETTE DE COULEURS " juste en dessous.
   2. Chaque ligne ressemble a :   --qb-violet: #6c63ff;
      -> remplacez uniquement le code hexadecimal (#6c63ff) par le votre.
      -> ne touchez pas au nom (--qb-violet) ni au point-virgule final.
   3. Enregistrez, puis rechargez la page du catalogue en forcant le cache
      (Mac : Cmd + Shift + R  /  Windows : Ctrl + Shift + R).
   4. Vous n'avez normalement JAMAIS besoin de modifier ce qui se trouve
      apres la palette. Le reste du fichier reutilise ces couleurs.

   Ou se trouve quoi (reperes visuels) :
      - Couleur principale (violet) ............ --qb-violet + degrade --qb-grad-violet
      - Fond de la page (degrade) .............. --qb-bg-1 / --qb-bg-2 / --qb-bg-3
      - Cartes blanches ........................ --qb-card
      - Textes ................................. --qb-ink (fonce) / --qb-ink-soft (gris)
      - Pastels (badges, visuels) .............. --qb-pink*, --qb-sky*, --qb-teal*
      - Pastille jaune (compteurs) ............. --qb-yellow

   Astuce : pour changer le violet partout, modifiez --qb-violet, --qb-violet-dark,
   --qb-violet-light ET les 3 codes du degrade --qb-grad-violet.

   Accessibilite : tailles de texte et espacements en " em " (ils suivent le
   reglage " taille du texte " du panneau accessibilite Dendreo), palette
   noir/blanc automatique en mode " contraste accentue ", respect de la police
   dyslexie et des animations reduites (voir la derniere section du fichier).

   Note technique : tous les selecteurs sont prefixes #bootstrap3 (c'est l'id
   du <body> du catalogue Dendreo) pour que ce CSS passe devant le theme natif.
   ===================================================================== */


/* Police d'ecriture (chargee depuis Google Fonts).
   Supprimez cette ligne si vous ne voulez aucun appel externe :
   la police de secours " Segoe UI " sera utilisee. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');


/* =====================================================================
   PALETTE DE COULEURS  ->  C'EST ICI QU'ON MODIFIE LES COULEURS
   ===================================================================== */
:root {

    /* ---------- Textes ----------
       Les couleurs de texte (et le violet, utilise pour les liens) gardent un contraste
       d'au moins 4.5:1 avec les fonds clairs : ne pas les eclaircir. */
    --qb-ink:          #1f1d2b;   /* Texte principal (titres, prix, noms de formations) */
    --qb-ink-soft:     #67647b;   /* Texte secondaire (liens du menu, duree, sous-titres, pied de page) */
    --qb-ink-body:     #4a4860;   /* Texte des paragraphes dans la fiche formation */
    --qb-placeholder:  #67647b;   /* Texte d'exemple dans les champs vides, mention " TTC " */
    --qb-link-icon:    #c9c5da;   /* Petite icone " lien " a cote des titres de categorie */
    --qb-white:        #ffffff;   /* Blanc (textes sur fond violet, boutons blancs) */
    --qb-black:        #1a1a1a;   /* Bouton d'action forte (ajout panier / inscription) */
    --qb-black-hover:  #000000;   /* Ce meme bouton au survol */

    /* ---------- Fonds ---------- */
    --qb-bg-1:         #f2eefc;   /* Fond de page : couleur de depart du degrade (lavande) */
    --qb-bg-2:         #fbeff6;   /* Fond de page : couleur du milieu (rose pale) */
    --qb-bg-3:         #f5f1fb;   /* Fond de page : couleur de fin */
    --qb-card:         #ffffff;   /* Fond des cartes formations et des blocs de la colonne de droite */
    --qb-card-soft:    #f7f5fd;   /* Fond des champs de saisie, lignes " prochaines sessions ", bas de bloc */
    --qb-line:         #ece8f7;   /* Separateur fin dans les cartes */

    /* ---------- Couleur principale : VIOLET ---------- */
    --qb-violet:       #5548e6;   /* Liens, icones, onglet actif, cases cochees, contour des champs actifs */
    --qb-violet-dark:  #4335c9;   /* Liens au survol, texte du badge " Presentiel / a distance " */
    --qb-violet-light: #eceafe;   /* Fond des liens du menu au survol, fond des badges violets, fond des jauges */
    --qb-grad-violet:  linear-gradient(135deg, #6a5ff0 0%, #5b4fe6 55%, #4a3dd6 100%);   /* texte blanc dessus : >= 4.5:1 en tout point */
                                  /* Degrade violet : banniere, onglet actif, boutons, bloc d'inscription, visuel des cartes 1/3 */

    /* ---------- Degrades des visuels de cartes (alternance) ---------- */
    --qb-grad-coral:   linear-gradient(135deg, #ff9a7b 0%, #f47a8e 100%);   /* Cartes 2, 5, 8... (corail) */
    --qb-grad-sky:     linear-gradient(135deg, #8fd3ff 0%, #6ab8f5 100%);   /* Cartes 3, 6, 9... (ciel) */

    /* ---------- Pastels : ROSE ---------- */
    --qb-pink:         #f48fc1;   /* Forme floue rose de la banniere, points de l'illustration laterale */
    --qb-pink-glow:    #ffb3d9;   /* Coeur (plus clair) de la forme floue rose */
    --qb-pink-light:   #fde7f2;   /* Fond du badge " Nouveaute ", icone de section 2/3 */
    --qb-pink-dark:    #a8306a;   /* Texte du badge " Nouveaute " */

    /* ---------- Pastels : CIEL ---------- */
    --qb-sky:          #7fc4f7;   /* Forme floue bleue de la banniere */
    --qb-sky-glow:     #b9e6ff;   /* Coeur (plus clair) de la forme floue bleue */
    --qb-sky-light:    #e4f3fe;   /* Fond du badge " Presentiel " */
    --qb-sky-dark:     #1f6aa3;   /* Texte du badge " Presentiel " */

    /* ---------- Pastels : TURQUOISE ---------- */
    --qb-teal:         #3fd3bd;   /* Point turquoise de l'illustration laterale */
    --qb-teal-light:   #dff8f3;   /* Fond des badges " A distance / E-learning ", messages de succes, icone de section 3/3 */
    --qb-teal-dark:    #0d6e60;   /* Texte des badges " A distance / E-learning " */

    /* ---------- Jaune ---------- */
    --qb-yellow:       #ffd400;   /* Compteur de formations, compteur panier, etoiles, point jaune de l'illustration */

    /* ---------- Messages d'avertissement ---------- */
    --qb-warning-bg:   #fff4d6;   /* Fond */
    --qb-warning-text: #8a6400;   /* Texte */

    /* ---------- Illustration laterale (fenetre 3D) ---------- */
    --qb-illu-win-1:   #9b93ff;   /* Fenetre : haut du degrade */
    --qb-illu-win-2:   #7a70f5;   /* Fenetre : bas du degrade */
    --qb-illu-cyl-1:   #ff9ed1;   /* Cylindre rose : reflet */
    --qb-illu-cyl-2:   #e070aa;   /* Cylindre rose : ombre */
    --qb-illu-blue-1:  #a9dcff;   /* Cone et anneau bleus : clair */
    --qb-illu-blue-2:  #6ab8f5;   /* Cone et anneau bleus : moyen */
    --qb-illu-blue-3:  #4c9fe6;   /* Cone et anneau bleus : fonce */
    --qb-illu-blue-4:  #8fd3ff;   /* Anneau : reflet */
    --qb-illu-bg-1:    #f6f2fd;   /* Fond du bloc illustration : milieu */
    --qb-illu-bg-2:    #fbeff6;   /* Fond du bloc illustration : bas */

    /* =========================================================
       Reglages de forme et d'ombres (a ne modifier que si necessaire)
       ========================================================= */
    --qb-radius:       24px;      /* Arrondi des cartes et blocs */
    --qb-radius-sm:    16px;      /* Arrondi des petits elements */
    --qb-shadow:       0 10px 30px rgba(108, 99, 255, .10);   /* Ombre douce des cartes (teinte violette) */
    --qb-shadow-hover: 0 22px 44px rgba(108, 99, 255, .22);   /* Ombre au survol des cartes */
    --qb-shadow-glow:  0 8px 18px rgba(108, 99, 255, .35);    /* Ombre de l'onglet actif */
    --qb-shadow-btn:   0 10px 22px rgba(108, 99, 255, .32);   /* Ombre des boutons violets */
    --qb-shadow-btn-hover: 0 14px 28px rgba(108, 99, 255, .40);
    --qb-shadow-hero:  0 24px 48px rgba(108, 99, 255, .30);   /* Ombre de la banniere et du bloc d'inscription */
    --qb-shadow-dark:  0 10px 22px rgba(0, 0, 0, .15);        /* Ombre neutre (boutons blancs, bouton noir) */
    --qb-shadow-dark-hover: 0 14px 28px rgba(0, 0, 0, .18);

    /* Variables natives Dendreo (laissez telles quelles) */
    --dendreo-primary:        var(--qb-violet);
    --dendreo-primary-hover:  var(--qb-violet-dark);
    --dendreo-primary-text:   var(--qb-white);
}


/* =====================================================================
   A PARTIR D'ICI : MISE EN FORME. Aucune couleur n'est ecrite en dur,
   tout renvoie a la palette ci-dessus. Modifiez seulement si vous savez
   ce que vous faites.
   ===================================================================== */


/* ==========================
   FOND DE PAGE, POLICE, TITRES, LIENS
========================== */
body#bootstrap3 {
    background: linear-gradient(160deg, var(--qb-bg-1) 0%, var(--qb-bg-2) 60%, var(--qb-bg-3) 100%) fixed !important;
    font-size: 100%;   /* base = 16px ; le reglage accessibilite Dendreo la remplace en direct */
    font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
    color: var(--qb-ink);
}
/* Tous les titres */
#bootstrap3 h1, #bootstrap3 h2, #bootstrap3 h3,
#bootstrap3 .panel-title, #bootstrap3 .catalogue-gallery__title {
    font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--qb-ink);
}
/* Liens texte */
#bootstrap3 a { color: var(--qb-violet); transition: color .2s; }
#bootstrap3 a:hover { color: var(--qb-violet-dark) !important; }



/* ==========================
   NEUTRALISATION DU THEME BOOTSTRAP DE BASE
   Selon le compte, Dendreo charge un theme Bootstrap different (sandstone, lumen,
   flatly...). Certains imposent des textes en petites MAJUSCULES espacees (11 px)
   sur le menu, les onglets, les titres de blocs, les boutons et le fil d'Ariane.
   On remet ici une casse et des tailles normales, avec la meme priorite que ces themes.
========================== */
#bootstrap3 .navbar .nav > li > a,
#bootstrap3 .navbar .nav > li > button { text-transform: none; font-size: 0.9375em; line-height: 1.4; font-weight: 600; letter-spacing: 0; }
#bootstrap3 .nav,
#bootstrap3 .nav > li > a { text-transform: none; font-size: 1em; line-height: 1.4; letter-spacing: 0; }
#bootstrap3 .panel .panel-heading,
#bootstrap3 .panel .panel-title { text-transform: none; font-size: 1em; line-height: 1.35; font-weight: 700; letter-spacing: 0; color: inherit; }
#bootstrap3 .panel .panel-footer { text-transform: none; font-size: 1em; line-height: 1.4; }
#bootstrap3 .btn { text-transform: none; font-size: 1em; line-height: 1.4; letter-spacing: 0; }
#bootstrap3 .btn-sm { font-size: 0.875em; }
#bootstrap3 .breadcrumb { text-transform: none; font-size: 0.875em; line-height: 1.5; border: none; letter-spacing: 0; }
#bootstrap3 .dropdown-menu > li > a { text-transform: none; font-size: 1em; }
#bootstrap3 legend, #bootstrap3 label, #bootstrap3 .badge { text-transform: none; letter-spacing: 0; }

/* ==========================
   MENU DU HAUT (navbar blanche translucide, liens en pilule)
========================== */
#bootstrap3 .catalogue-navbar,
#bootstrap3 .navbar {
    background: rgba(255,255,255,.85) !important;   /* blanc a 85 % d'opacite */
    backdrop-filter: blur(12px);
    border: none !important;
    border-radius: 0 0 var(--qb-radius) var(--qb-radius);
    box-shadow: var(--qb-shadow);
    min-height: 4em;
    margin-bottom: 1.75em;
}
#bootstrap3 .navbar-brand { color: var(--qb-ink) !important; font-weight: 700; font-size: 1.1em !important; }

/* Liens du menu. Le theme Dendreo impose 100 px de hauteur : la zone cliquable
   reste grande mais le fond colore (survol / actif) est dessine plus compact. */
#bootstrap3 .navbar-nav > li > a,
#bootstrap3 .navbar-nav > li > button {
    position: relative;
    color: var(--qb-ink-soft) !important;
    font-weight: 500;
    font-size: 0.875em;
    margin: 0 0.1429em;
    padding: 0 0.75em !important;   /* logo, titre et menu tiennent sur une ligne dans le conteneur de 1170 px */
    background: transparent !important;
    border-radius: 0;
    z-index: 0;
    transition: color .15s;
}
#bootstrap3 .navbar-nav > li > a::before,
#bootstrap3 .navbar-nav > li > button::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 2.5em;                 /* hauteur du fond au survol */
    transform: translateY(-50%);
    border-radius: 12px;          /* arrondi du fond au survol */
    background: transparent;
    z-index: -1;
    transition: background .15s, box-shadow .15s;
}
/* Survol d'un lien */
#bootstrap3 .navbar-default .navbar-nav > li > a:hover::before,
#bootstrap3 .navbar-default .navbar-nav > li > button:hover::before { background: var(--qb-violet-light); }
#bootstrap3 .navbar-default .navbar-nav > li > a:hover,
#bootstrap3 .navbar-default .navbar-nav > li > button:hover {
    color: var(--qb-violet) !important;
    background: transparent !important;
}
/* Onglet actif : pilule violette degradee, texte blanc */
#bootstrap3 .navbar-nav > li.active > a,
#bootstrap3 .navbar-default .navbar-nav > .active > a,
#bootstrap3 .navbar-default .navbar-nav > .active > a:hover {
    color: var(--qb-white) !important;
    background: transparent !important;
}
#bootstrap3 .navbar-nav > li.active > a::before,
#bootstrap3 .navbar-default .navbar-nav > .active > a::before {
    background: var(--qb-grad-violet);
    box-shadow: var(--qb-shadow-glow);
}
/* Bouton " hamburger " sur mobile */
#bootstrap3 .navbar-toggle { border: none; }
#bootstrap3 .navbar-toggle .icon-bar { background: var(--qb-ink); }
/* Icone panier et son compteur (pastille jaune) */
#bootstrap3 .navbar .fa-shopping-cart { color: var(--qb-ink); }
#bootstrap3 .navbar .badge {
    background: var(--qb-yellow) !important;
    color: var(--qb-ink) !important;
    border-radius: 999px;
    padding: 0.1875em 0.5em;
    font-weight: 700;
}



/* ==========================
   MENU : LOGO ET LIENS SUR UNE SEULE LIGNE
   Le theme natif place le logo en " float " : avec un logo large ou beaucoup
   de liens, le menu passait sous le logo. On passe en flex et on borne le logo.
========================== */
#bootstrap3 #brand-logo {
    height: auto !important;
    max-height: 6.25em;
    display: flex;
    align-items: center;
    float: none;
    margin: 0;
    padding: 0.5em 0;
}
#bootstrap3 #brand-logo a { height: auto; padding: 0 !important; }
#bootstrap3 #brand-logo img {
    display: block;
    height: auto;
    max-height: 3.75em;           /* hauteur maximale du logo */
    width: auto;
    max-width: 14em;              /* largeur maximale du logo */
    object-fit: contain;
}
#bootstrap3 #brand-logo::after { display: none !important; }   /* enleve la " feuille " blanche inclinee derriere le logo */
@media (min-width: 768px) {
    #bootstrap3 .navbar { min-height: 0; }
    #bootstrap3 .navbar-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1em;
        min-height: 5em;
    }
    #bootstrap3 .navbar-header { float: none; flex: 0 0 auto; display: flex !important; align-items: center; height: auto !important; }
    #bootstrap3 .navbar-header .navbar-brand:empty { display: none !important; }
    #bootstrap3 .navbar-collapse { flex: 1 1 auto; min-width: 0; padding: 0; }
    #bootstrap3 .navbar-nav {
        float: none !important;
        display: flex;
        flex-wrap: wrap;          /* passe a la ligne si les liens grossissent (taille, police dyslexie) */
        row-gap: 6px;
        justify-content: flex-end;
        align-items: center;
        height: auto;
        margin: 0;
    }
    #bootstrap3 .navbar-nav > li { float: none; white-space: nowrap; display: flex; align-items: center; }
    #bootstrap3 .navbar-nav > li > a,
    #bootstrap3 .navbar-nav > li > button { height: 4em !important; display: inline-flex; align-items: center; }
}
/* Ecrans intermediaires (tablette / petit portable) : on resserre les liens pour tenir sur la ligne */
@media (min-width: 768px) and (max-width: 1199px) {
    #bootstrap3 .navbar-nav > li > a,
    #bootstrap3 .navbar-nav > li > button { padding: 0 0.6em !important; font-size: 0.8125em; }
    #bootstrap3 #brand-logo img { max-width: 10em; }
}

/* ==========================
   BANNIERE D'ACCUEIL (carte violette degradee + texte saisi dans le " Message d'accueil ")

   Le message d'accueil doit contenir, dans cet ordre (sans balise <div> autour,
   l'editeur Dendreo la supprime de toute facon) :
     un paragraphe (sur-titre), un titre H2, un paragraphe (sous-titre), un lien (bouton).
   L'editeur Dendreo supprime les classes, on cible donc la structure.
========================== */
/* (ancien reset de .welcome_msg supprime : la carte est maintenant .welcome_msg lui-meme) */
#bootstrap3 .well.welcome_msg {          /* .well ajoute pour passer devant la regle generique des blocs " well " plus bas */
    position: relative;
    overflow: hidden;
    border: none;                 /* on annule le cadre gris du bloc " well " natif */
    border-radius: var(--qb-radius);
    background: var(--qb-grad-violet);
    color: var(--qb-white);
    padding: 2.5em 2.75em;
    box-shadow: var(--qb-shadow-hero);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 16.25em;
    justify-content: center;
}
/* Deux formes rondes floues (rose en haut a droite, bleue en bas) */
#bootstrap3 .welcome_msg::before,
#bootstrap3 .welcome_msg::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}
#bootstrap3 .welcome_msg::before {
    right: -60px; top: -80px;
    width: 320px; height: 320px;
    background: radial-gradient(circle at 30% 30%, var(--qb-pink-glow) 0%, var(--qb-pink) 40%, transparent 70%);
    opacity: .85;
}
#bootstrap3 .welcome_msg::after {
    right: 160px; bottom: -120px;
    width: 260px; height: 260px;
    background: radial-gradient(circle at 30% 30%, var(--qb-sky-glow) 0%, var(--qb-sky) 45%, transparent 72%);
    opacity: .8;
}
#bootstrap3 .welcome_msg > * { position: relative; z-index: 1; max-width: 62%; }
/* Sur-titre (1er paragraphe) : petites majuscules */
#bootstrap3 .welcome_msg > p:first-child {
    margin: 0 0 .5em;
    font-size: 0.8125em;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.75);
}
/* Titre */
#bootstrap3 .welcome_msg > h2 {
    margin: 0 0 .35em;
    font-size: clamp(1.5em, 3.2vw, 2.5em);
    line-height: 1.12;
    font-weight: 600;
    color: var(--qb-white);
}
/* Sous-titre */
#bootstrap3 .welcome_msg > h2 + p {
    margin: 0 0 1.4em;
    font-size: clamp(0.875em, 1.3vw, 1.0625em);
    font-weight: 400;
    color: rgba(255,255,255,.85);
}
#bootstrap3 .welcome_msg > h2 + p strong { color: var(--qb-white); font-weight: 600; }
/* Le paragraphe qui enveloppe le bouton (l'editeur ajoute parfois un <p> autour du lien) */
#bootstrap3 .welcome_msg > p:has(> a) { margin: 0; font-size: 1em; color: inherit; max-width: 100%; }
/* Bouton blanc (le lien peut etre direct ou dans un <p>) */
#bootstrap3 .welcome_msg > a,
#bootstrap3 .welcome_msg > p > a {
    display: inline-block;
    background: var(--qb-white);
    color: var(--qb-violet) !important;
    font-weight: 600;
    font-size: 0.9375em;
    padding: 0.8em 1.7333em;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: var(--qb-shadow-dark);
    transition: transform .15s, box-shadow .2s;
}
#bootstrap3 .welcome_msg > a:hover,
#bootstrap3 .welcome_msg > p > a:hover {
    transform: translateY(-2px);
    box-shadow: var(--qb-shadow-dark-hover);
    text-decoration: none;
}
/* Si la banniere est une simple image : pas de fond ni de marge autour */
#bootstrap3 .welcome_msg:has(> img) { background: none !important; padding: 0; box-shadow: none; border: none; }
#bootstrap3 .welcome_msg > img { border-radius: var(--qb-radius); box-shadow: var(--qb-shadow); }


/* ==========================
   COLONNE DE DROITE (recherche, filtres, prochaines sessions, reseaux sociaux)
========================== */
/* Chaque bloc = carte blanche sans bordure, ombre douce */
#bootstrap3 .panel.panel-default {
    background: var(--qb-card);
    border: none;
    border-radius: var(--qb-radius);
    box-shadow: var(--qb-shadow);
    overflow: hidden;
}
#bootstrap3 .panel-default > .panel-heading {
    background: transparent;
    border-bottom: none;
    padding: 1.25em 1.375em 0.375em;
}
#bootstrap3 .panel-title,
#bootstrap3 .panel-title label {
    font-size: 1em;
    font-weight: 600;
    color: var(--qb-ink);
}
/* Icone du titre dans un petit carre pastel */
#bootstrap3 .panel-default > .panel-heading .panel-title .fa,
#bootstrap3 .panel-default > .panel-heading .panel-title label .fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4615em; height: 2.4615em;
    border-radius: 10px;
    background: var(--qb-violet-light);
    color: var(--qb-violet);
    margin-right: 0.7692em;
    font-size: 0.8125em;
}
/* Petits sous-titres des filtres (" Par categorie ", " Eligible CPF "...) */
#bootstrap3 .sidebar-sub-heading {
    font-size: 0.75em;
    font-weight: 600;
    color: var(--qb-ink-soft);
    margin-top: 1.3333em;
}
#bootstrap3 .sidebar-sub-heading .fa { color: var(--qb-violet); margin-right: 0.5em; }
/* Bas de bloc */
#bootstrap3 .panel-footer {
    background: var(--qb-card-soft);
    border-top: none;
    font-weight: 600;
}

/* Champs de saisie (recherche, adresse) */
#bootstrap3 .form-control {
    border-radius: 14px;
    border: 1.5px solid transparent;
    box-shadow: none;
    height: 2.75em;
    padding-left: 1em;
    background: var(--qb-card-soft);
    color: var(--qb-ink);
    transition: border-color .2s, box-shadow .2s, background .2s;
}
#bootstrap3 .form-control::placeholder { color: var(--qb-placeholder); }
/* Champ selectionne : contour violet */
#bootstrap3 .form-control:focus {
    border-color: var(--qb-violet);
    box-shadow: 0 0 0 4px var(--qb-violet-light);
    background: var(--qb-white);
}
#bootstrap3 .input-group .form-control { border-radius: 14px 0 0 14px; }
/* Bouton loupe colle au champ de recherche */
#bootstrap3 .input-group-btn .btn {
    border-radius: 0 14px 14px 0;
    height: 2.75em;
    background: var(--qb-grad-violet);
    border: none;
    color: var(--qb-white);
}
#bootstrap3 .input-group-btn .btn:hover { filter: brightness(1.05); }

/* Cases a cocher des filtres */
#bootstrap3 .filter-option { margin: 0.375em 0; }
#bootstrap3 .filter-option__input { accent-color: var(--qb-violet); }
#bootstrap3 .filter-option__text { font-weight: 500; color: var(--qb-ink); }

/* Listes deroulantes (categories...) */
#bootstrap3 .select2-container--default .select2-selection--single {
    border-radius: 14px;
    border: 1.5px solid transparent;
    height: 2.75em;
    background: var(--qb-card-soft);
}
#bootstrap3 .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 2.625em; padding-left: 1em; color: var(--qb-ink); }
#bootstrap3 .select2-container--default .select2-selection--single .select2-selection__arrow { height: 2.625em; }
.select2-dropdown { border-radius: var(--qb-radius-sm); border: none; box-shadow: var(--qb-shadow-hover); }
/* Option survolee dans la liste deroulante */
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--qb-violet) !important; color: var(--qb-white) !important; }

/* Bloc " Prochaines sessions " : chaque ligne est une petite carte */
#bootstrap3 .catalogue-prochaines-sessions .list-group-item {
    border: none;
    background: var(--qb-card-soft);
    border-radius: 14px;
    margin: 0.5em 1em;
    padding: 0.75em 1em;
    transition: transform .15s, box-shadow .15s;
}
#bootstrap3 .catalogue-prochaines-sessions .list-group-item:hover {
    background: var(--qb-white);
    transform: translateX(4px);
    box-shadow: var(--qb-shadow);
}


/* ==========================
   TITRES DES CATEGORIES + COMPTEUR DE FORMATIONS
========================== */
#bootstrap3 .liste_categories,
#bootstrap3 .catalogue-list {
    background: transparent;
    border: none;
    box-shadow: none;
}
#bootstrap3 .catalogue-list { padding: 0.5em 0 1.75em; }

#bootstrap3 .catalogue-list > h2 {
    font-size: 1.375em;
    font-weight: 600;
    margin: 0 0 0.8182em;
    display: flex;
    align-items: center;
    gap: 0.4545em;
}
#bootstrap3 .catalogue-list > h2 button {
    background: none; border: none; padding: 0;
    font: inherit; color: inherit; text-align: left;
}
#bootstrap3 .catalogue-list > h2 button:hover { color: var(--qb-violet); }
/* Petite icone " lien " a cote du titre */
#bootstrap3 .categorie-permalink { color: var(--qb-link-icon); font-size: 0.5909em; }
/* Pastille jaune ronde avec le nombre de formations */
#bootstrap3 .badge-count {
    background: var(--qb-yellow) !important;
    color: var(--qb-ink) !important;
    border-radius: 999px;
    min-width: 2.3077em; height: 2.3077em;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 0.7692em;
    font-weight: 700;
    font-size: 0.5909em;
    margin-left: auto;
}

#bootstrap3 .liste_sous_categories .catalogue-list > h3 {
    font-size: 1.25em;
}


/* ==========================
   CARTES FORMATIONS (blanches, sans bordure, visuel sur fond degrade)
========================== */
#bootstrap3 .catalogue-gallery__card {
    display: block;
    position: relative;
    background: var(--qb-card);
    border: none !important;
    border-radius: var(--qb-radius) !important;
    overflow: hidden;
    padding: 0.625em;
    box-shadow: var(--qb-shadow);
    transition: transform .3s ease, box-shadow .3s ease;
    text-decoration: none;
    color: var(--qb-ink);
}
/* Carte au survol : montee + ombre plus forte */
#bootstrap3 .catalogue-gallery__card:hover,
#bootstrap3 .catalogue-gallery__card:focus {
    transform: translateY(-8px);
    box-shadow: var(--qb-shadow-hover);
    text-decoration: none;
    color: var(--qb-ink);
}

/* Zone du visuel : encart degrade. Alternance violet / corail / ciel selon la position */
#bootstrap3 .catalogue-gallery__img {
    border-radius: 18px;
    overflow: hidden;
    background: var(--qb-grad-violet);
    padding: 0.625em;
}
#bootstrap3 .catalogue-gallery__column:nth-child(3n+2) .catalogue-gallery__img { background: var(--qb-grad-coral); }
#bootstrap3 .catalogue-gallery__column:nth-child(3n+3) .catalogue-gallery__img { background: var(--qb-grad-sky); }

#bootstrap3 .catalogue-gallery__img__mask {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--qb-shadow-dark);
}
#bootstrap3 .catalogue-gallery__img__src {
    width: 100%; display: block;
    transition: transform .5s ease;
}
#bootstrap3 .catalogue-gallery__card:hover .catalogue-gallery__img__src { transform: scale(1.05); }

/* Carte sans image : fond violet + icone blanche */
#bootstrap3 .catalogue-gallery__img--none {
    border-radius: 18px;
    background: var(--qb-grad-violet);
}
#bootstrap3 .catalogue-gallery__img--none__bg { background: transparent !important; }
#bootstrap3 .catalogue-gallery__img--none__icon { color: rgba(255,255,255,.9); }

#bootstrap3 .catalogue-gallery__caption { padding: 1em 0.75em 0.625em; }

/* Nom de la formation */
#bootstrap3 .catalogue-gallery__title {
    font-size: 0.9688em;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 0.6452em;
    min-height: 2.8em;
}

/* Ligne d'infos (duree, prix) */
#bootstrap3 .catalogue-gallery__info {
    margin-top: 0.9231em;
    padding-top: 0.9231em;
    border-top: 1px solid var(--qb-line);
    font-size: 0.8125em;
    color: var(--qb-ink-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4615em 1.2308em;
    align-items: baseline;
}
#bootstrap3 .catalogue-gallery__info li { margin: 0; }
#bootstrap3 .catalogue-gallery__info .text-muted { color: var(--qb-violet) !important; }   /* icones duree / prix */

/* Prix */
#bootstrap3 .js-price-amount-ttc,
#bootstrap3 .js-price-amount-ht {
    color: var(--qb-ink);
    font-weight: 700;
    font-size: 1.3077em;
}
/* Mention " TTC " / " HT " */
#bootstrap3 .text-subtle { color: var(--qb-placeholder); }


/* ==========================
   BADGES (petites etiquettes pastel : modalite, Nouveaute, CPF, DPC)
========================== */
#bootstrap3 .badge {
    border-radius: 8px;
    padding: 0.4545em 0.9091em;
    font-size: 0.6875em;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    margin: 0 0.3636em 0.3636em 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3636em;
}
/* " Presentiel " : bleu ciel */
#bootstrap3 .badge-presentiel        { background: var(--qb-sky-light) !important;    color: var(--qb-sky-dark) !important; }
/* " Presentiel / a distance " : violet clair */
#bootstrap3 .badge-mixte             { background: var(--qb-violet-light) !important; color: var(--qb-violet-dark) !important; }
/* " A distance ", " E-learning " : turquoise */
#bootstrap3 .badge-distanciel,
#bootstrap3 .badge-elearning-sync,
#bootstrap3 .badge-elearning-async   { background: var(--qb-teal-light) !important;   color: var(--qb-teal-dark) !important; }
/* " Nouveaute " : rose */
#bootstrap3 .badge-nouveaute         { background: var(--qb-pink-light) !important;   color: var(--qb-pink-dark) !important; }
/* " Formation prioritaire " : violet clair (le vert natif ne contraste pas assez avec le blanc) */
#bootstrap3 .badge-prio              { background: var(--qb-violet-light) !important; color: var(--qb-violet-dark) !important; }

/* Elements actifs (onglet actif de la fiche, ligne active " Telecharger le programme ") :
   sans ces regles, Bootstrap les colore en bleu. */
#bootstrap3 .nav-pills > li.active > a,
#bootstrap3 .nav-pills > li.active > a:hover,
#bootstrap3 .nav-pills > li.active > a:focus,
#bootstrap3 .list-group-item.active,
#bootstrap3 .list-group-item.active:focus {
    background: var(--qb-grad-violet) !important;
    border-color: transparent !important;
    color: var(--qb-white) !important;
}
#bootstrap3 .nav-pills > li.active > a .fa,
#bootstrap3 .list-group-item.active a,
#bootstrap3 .list-group-item.active .fa { color: var(--qb-white) !important; font-weight: 600; }
#bootstrap3 .list-group-item.active:hover { background: var(--qb-violet-dark) !important; }
/* " CPF ", " DPC " : violet degrade, texte blanc */
#bootstrap3 .badge-cpf,
#bootstrap3 .badge-dpc               { background: var(--qb-grad-violet) !important;  color: var(--qb-white) !important; }


/* ==========================
   BOUTONS (pilules)
========================== */
#bootstrap3 .btn {
    border-radius: 999px;
    font-weight: 600;
    padding: 0.625em 1.375em;
    border: none;
    transition: transform .15s, box-shadow .2s, filter .2s;
}
#bootstrap3 .btn:active { transform: scale(.98); }

/* Boutons violets degrades */
#bootstrap3 .btn-primary,
#bootstrap3 .btn-info {
    background: var(--qb-grad-violet) !important;
    color: var(--qb-white) !important;
    box-shadow: var(--qb-shadow-btn);
}
#bootstrap3 .btn-primary:hover,
#bootstrap3 .btn-info:hover { filter: brightness(1.06); box-shadow: var(--qb-shadow-btn-hover); }

/* Bouton d'action forte (Ajouter au panier / S'inscrire) : noir */
#bootstrap3 .btn-success {
    background: var(--qb-black) !important;
    color: var(--qb-white) !important;
    box-shadow: var(--qb-shadow-dark-hover);
}
#bootstrap3 .btn-success:hover { background: var(--qb-black-hover) !important; }

/* Boutons secondaires : blancs */
#bootstrap3 .btn-default {
    background: var(--qb-white);
    color: var(--qb-ink);
    box-shadow: var(--qb-shadow);
}
#bootstrap3 .btn-default:hover { color: var(--qb-violet); box-shadow: var(--qb-shadow-hover); }
#bootstrap3 .btn-link { color: var(--qb-violet); }


/* ==========================
   FICHE FORMATION (page detail d'une formation)
========================== */
#bootstrap3 .catalogue-formation-title {
    font-size: 1.875em;
    font-weight: 600;
    margin-bottom: 0.6667em;
}
/* Grande image en haut de la fiche */
#bootstrap3 .wrapper-visuel_description_banner,
#bootstrap3 .visuel_description_banner__mask {
    border-radius: var(--qb-radius);
    overflow: hidden;
    box-shadow: var(--qb-shadow);
}

/* Bloc d'inscription (colonne de droite de la fiche) : carte violette degradee */
#bootstrap3 .catalogue-formation-formulaire {
    background: var(--qb-grad-violet) !important;
    border: none !important;
    border-radius: var(--qb-radius) !important;
    color: var(--qb-white);
    box-shadow: var(--qb-shadow-hero);
    position: relative;
    overflow: hidden;
}
/* Halo blanc decoratif en bas a droite */
#bootstrap3 .catalogue-formation-formulaire::after {
    content: "";
    position: absolute; right: -70px; bottom: -90px;
    width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
#bootstrap3 .catalogue-formation-formulaire .panel-heading {
    background: transparent !important;
    border: none !important;
    color: var(--qb-white) !important;
}
#bootstrap3 .catalogue-formation-formulaire .panel-title,
#bootstrap3 .catalogue-formation-formulaire label { color: var(--qb-white) !important; }
/* Champs de saisie dans le bloc violet : voile sombre, un voile blanc ferait passer
   le texte blanc sous 4.5:1 sur la partie claire du degrade */
#bootstrap3 .catalogue-formation-formulaire .form-control {
    background: rgba(20,16,60,.2);
    border-color: transparent;
    color: var(--qb-white);
}
#bootstrap3 .catalogue-formation-formulaire .form-control::placeholder { color: rgba(255,255,255,.85); }
#bootstrap3 .catalogue-formation-formulaire .js-price-amount-ttc,
#bootstrap3 .catalogue-formation-formulaire .js-price-amount-ht { color: var(--qb-white); font-size: 1.625em; }
#bootstrap3 .catalogue-formation-formulaire .text-muted,
#bootstrap3 .catalogue-formation-formulaire .text-subtle { color: rgba(255,255,255,.92) !important; }
/* Boutons dans le bloc violet : blancs */
#bootstrap3 .catalogue-formation-formulaire .btn-success,
#bootstrap3 .catalogue-formation-formulaire .btn-primary {
    background: var(--qb-white) !important;
    color: var(--qb-violet) !important;
    box-shadow: var(--qb-shadow-dark);
}
#bootstrap3 .catalogue-formation-formulaire .btn-default {
    background: rgba(255,255,255,.14);
    color: var(--qb-white);
    box-shadow: none;
}
#bootstrap3 .catalogue-formation-formulaire .btn-default:hover { background: rgba(255,255,255,.24); color: var(--qb-white); }

/* ==========================
   PAGES CONTACT ET PANIER (formulaires) : carte blanche, en-tete violet, texte encre
========================== */
#bootstrap3 .contact-formulaire,
#bootstrap3 .cart-formulaire {
    background: var(--qb-card) !important;
    border: none !important;
    border-radius: var(--qb-radius) !important;
    box-shadow: var(--qb-shadow);
    color: var(--qb-ink);
    padding: 0;
    overflow: hidden;
}
#bootstrap3 .contact-formulaire > .panel-heading,
#bootstrap3 .cart-formulaire > .panel-heading {
    background: var(--qb-grad-violet) !important;
    border: none !important;
    color: var(--qb-white) !important;
    padding: 1.125em 1.375em;
}
#bootstrap3 .contact-formulaire > .panel-heading .panel-title,
#bootstrap3 .cart-formulaire > .panel-heading .panel-title { color: var(--qb-white) !important; }
#bootstrap3 .contact-formulaire > .panel-heading .fa,
#bootstrap3 .cart-formulaire > .panel-heading .fa { color: var(--qb-white); margin-right: .5em; }
#bootstrap3 .contact-formulaire .panel-body,
#bootstrap3 .cart-formulaire .panel-body { padding: 1.375em; color: var(--qb-ink-body); }
#bootstrap3 .contact-formulaire label,
#bootstrap3 .contact-formulaire legend,
#bootstrap3 .cart-formulaire label,
#bootstrap3 .cart-formulaire legend,
#bootstrap3 .cart-formulaire th,
#bootstrap3 .cart-formulaire td { color: var(--qb-ink); }
#bootstrap3 .contact-formulaire legend,
#bootstrap3 .cart-formulaire legend {
    border-bottom: 1px solid var(--qb-line);
    font-weight: 600;
    font-size: 1.125em;
    padding-bottom: .4em;
    margin-bottom: 1em;
}
#bootstrap3 .contact-formulaire textarea.form-control { height: auto; min-height: 8em; }
/* Bloc " Nos coordonnees " et encart de la page contact */
#bootstrap3 .coordonnees .list-group-item { border: none; border-top: 1px solid var(--qb-line); color: var(--qb-ink); background: transparent; }
#bootstrap3 .coordonnees .list-group-item .fa { color: var(--qb-violet); }
#bootstrap3 .contact_sidebar_msg .panel-heading { font-weight: 600; color: var(--qb-ink); }
#bootstrap3 .contact_sidebar_msg .panel-body { color: var(--qb-ink-body); }

/* Sections de la fiche (Objectifs, Programme...) : texte, et icone pastel qui alterne violet / rose / turquoise */
#bootstrap3 .panel-body { padding: 0.875em 1.375em 1.375em; line-height: 1.7; color: var(--qb-ink-body); }
#bootstrap3 .panel-body ul li::marker { color: var(--qb-violet); }
#bootstrap3 .panel.panel-default:nth-of-type(3n+2) > .panel-heading .panel-title .fa { background: var(--qb-pink-light); color: var(--qb-pink-dark); }
#bootstrap3 .panel.panel-default:nth-of-type(3n+3) > .panel-heading .panel-title .fa { background: var(--qb-teal-light); color: var(--qb-teal-dark); }

/* Barres de progression */
#bootstrap3 .progress { border-radius: 999px; background: var(--qb-violet-light); box-shadow: none; height: 0.625em; }
#bootstrap3 .progress-bar { background: var(--qb-grad-violet); box-shadow: none; }

/* Etoiles de notation */
#bootstrap3 .star-ratings-css-top { color: var(--qb-yellow); }

/* Messages d'alerte */
#bootstrap3 .alert { border: none; border-radius: var(--qb-radius-sm); }
#bootstrap3 .alert-warning { background: var(--qb-warning-bg); color: var(--qb-warning-text); }
#bootstrap3 .alert-info    { background: var(--qb-violet-light); color: var(--qb-violet-dark); }
#bootstrap3 .alert-success { background: var(--qb-teal-light); color: var(--qb-teal-dark); }


/* ==========================
   CERTIFICATIONS / LOGOS / AUTRES BLOCS
========================== */
#bootstrap3 .well,
#bootstrap3 .thumbnail {
    background: var(--qb-card);
    border: none;
    border-radius: var(--qb-radius) !important;
    box-shadow: var(--qb-shadow);
}
#bootstrap3 .catalogue_certifications { padding: 1.5em; }

/* Boutons de partage reseaux sociaux */
#bootstrap3 .resp-sharing-button__link { transition: transform .2s; }
#bootstrap3 .resp-sharing-button__link:hover { transform: translateY(-3px); }


/* ==========================
   PIED DE PAGE (blanc translucide)
========================== */
#bootstrap3 .footer {
    background: rgba(255,255,255,.7);
    border-top: none;
    color: var(--qb-ink-soft);
    font-size: 0.7812em;
    padding-top: 0.64em;
}
#bootstrap3 .footer .text-muted { color: var(--qb-ink-soft) !important; }
#bootstrap3 .footer a { color: var(--qb-violet); }
#bootstrap3 .footer .fa-rocket { color: var(--qb-violet); }
/* Gris natifs (description de categorie, mentions, fil d'Ariane) : trop clairs sur les fonds du theme */
#bootstrap3 .liste_categorie_description,
#bootstrap3 .text-muted,
#bootstrap3 .breadcrumb > .active { color: var(--qb-ink-soft); }


/* ==========================
   ACCESSIBILITE (contour visible au clavier, animations reduites)
========================== */
#bootstrap3 a:focus-visible,
#bootstrap3 button:focus-visible,
#bootstrap3 .form-control:focus-visible {
    outline: 3px solid var(--qb-violet);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    #bootstrap3 * { transition: none !important; transform: none !important; }
}


/* ==========================
   MOBILE (ecrans de moins de 768 px)
========================== */
@media (max-width: 767px) {
    #bootstrap3 .welcome_msg { padding: 1.625em 1.375em; min-height: 0; }
    #bootstrap3 .welcome_msg > * { max-width: 100%; }
    #bootstrap3 .welcome_msg::after { display: none; }
    #bootstrap3 .catalogue-list > h2 { font-size: 1.1875em; }
    #bootstrap3 .catalogue-formation-title { font-size: 1.5em; }
    #bootstrap3 .catalogue-navbar { border-radius: 0; }
}


/* ==========================
   BLOC LATERAL : ILLUSTRATION 100 % CSS, SANS TEXTE
   (fenetre 3D violette + cylindre rose + cone bleu + anneau bleu)

   Le message du bloc lateral doit contenir exactement 5 paragraphes vides :
   <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
   p1 = fenetre, p2 = volet gauche, p3 = graphique, p4 = cylindre rose, p5 = cone bleu.
   Les couleurs sont dans la palette, section " Illustration laterale ".
   L'illustration ne s'applique QUE si le bloc n'a pas de titre (pas de .panel-heading) :
   un bloc lateral avec un titre et du texte reste une carte blanche classique.
========================== */
#bootstrap3 .liste_sidebar_msg:not(:has(.panel-heading)) {
    position: relative;
    background: linear-gradient(160deg, var(--qb-white) 0%, var(--qb-illu-bg-1) 60%, var(--qb-illu-bg-2) 100%);
    overflow: hidden;
}
/* Deux halos flous en fond (rose a gauche, bleu en bas a droite) */
#bootstrap3 .liste_sidebar_msg:not(:has(.panel-heading))::before,
#bootstrap3 .liste_sidebar_msg:not(:has(.panel-heading))::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(18px);
    pointer-events: none;
}
#bootstrap3 .liste_sidebar_msg:not(:has(.panel-heading))::before {
    left: 8%; top: 14%; width: 62%; height: 62%;
    background: radial-gradient(circle, rgba(244,143,193,.55), rgba(244,143,193,0) 70%);   /* rose */
}
#bootstrap3 .liste_sidebar_msg:not(:has(.panel-heading))::after {
    right: -10%; bottom: -8%; width: 55%; height: 55%;
    background: radial-gradient(circle, rgba(127,196,247,.55), rgba(127,196,247,0) 70%);   /* bleu */
}

#bootstrap3 .liste_sidebar_msg:not(:has(.panel-heading)) .panel-body {
    position: relative;
    padding: 0;
    aspect-ratio: 1 / 1;      /* bloc carre */
    overflow: hidden;
    z-index: 1;
}
#bootstrap3 .liste_sidebar_msg:not(:has(.panel-heading)) .panel-body > p {
    position: absolute;
    margin: 0;
    font-size: 0;
    line-height: 0;
    color: transparent;
}
/* Anneau bleu (haut gauche) */
#bootstrap3 .liste_sidebar_msg:not(:has(.panel-heading)) .panel-body::before {
    content: "";
    position: absolute; left: 7%; top: 9%;
    width: 11%; aspect-ratio: 1;
    border-radius: 50%;
    border: 6px solid;
    border-color: var(--qb-illu-blue-4) var(--qb-illu-blue-2) var(--qb-illu-blue-3) var(--qb-illu-blue-1);
    transform: rotate(-20deg) skewX(-10deg);
    filter: drop-shadow(0 8px 10px rgba(106,184,245,.45));
}
/* p1 : fenetre violette */
#bootstrap3 .liste_sidebar_msg:not(:has(.panel-heading)) .panel-body > p:nth-child(1) {
    left: 13%; top: 25%;
    width: 72%; height: 52%;
    border-radius: 14px;
    background: linear-gradient(150deg, var(--qb-illu-win-1) 0%, var(--qb-illu-win-2) 100%);
    box-shadow: 0 30px 50px -18px rgba(108,99,255,.55), inset 0 -3px 0 rgba(255,255,255,.18);
}
/* Barre de titre blanche de la fenetre */
#bootstrap3 .liste_sidebar_msg:not(:has(.panel-heading)) .panel-body > p:nth-child(1)::before {
    content: "";
    position: absolute; left: 6%; right: 6%; top: 8%;
    height: 9%;
    border-radius: 999px;
    background: var(--qb-white);
}
/* Trois points colores (rose, jaune, turquoise) au-dessus de la fenetre */
#bootstrap3 .liste_sidebar_msg:not(:has(.panel-heading)) .panel-body > p:nth-child(1)::after {
    content: "";
    position: absolute; left: 6%; top: -4%;
    width: 0.4375em; height: 0.4375em;
    border-radius: 50%;
    background: var(--qb-pink);
    box-shadow: 12px 0 0 var(--qb-yellow), 24px 0 0 var(--qb-teal);
}
/* p2 : volet gauche de la fenetre (rond rose + 3 lignes blanches) */
#bootstrap3 .liste_sidebar_msg:not(:has(.panel-heading)) .panel-body > p:nth-child(2) {
    left: 17.5%; top: 37.5%;
    width: 16%; height: 32%;
    border-radius: 8px;
    background-color: rgba(255,255,255,.28);
    background-image:
        radial-gradient(circle at 50% 18%, var(--qb-pink) 0 18%, transparent 20%),
        linear-gradient(var(--qb-white),var(--qb-white)), linear-gradient(var(--qb-white),var(--qb-white)), linear-gradient(var(--qb-white),var(--qb-white));
    background-repeat: no-repeat;
    background-size: 100% 100%, 60% 3px, 60% 3px, 60% 3px;
    background-position: 0 0, 20% 48%, 20% 60%, 20% 72%;
}
/* p3 : zone graphique avec la courbe blanche */
#bootstrap3 .liste_sidebar_msg:not(:has(.panel-heading)) .panel-body > p:nth-child(3) {
    left: 36.5%; top: 37.5%;
    width: 44%; height: 32%;
    border-radius: 8px;
    background-color: rgba(255,255,255,.22);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'><path d='M4 40 C14 40 14 14 24 14 S34 46 44 46 S54 10 64 10 S74 44 84 44 S94 18 104 18 S114 36 118 36' fill='none' stroke='white' stroke-width='4' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-size: 90% auto;
    background-position: center 60%;
}
/* p4 : cylindre rose (haut droite) */
#bootstrap3 .liste_sidebar_msg:not(:has(.panel-heading)) .panel-body > p:nth-child(4) {
    right: 8%; top: 8%;
    width: 10%; height: 12%;
    border-radius: 40% / 18%;
    background: linear-gradient(90deg, var(--qb-pink), var(--qb-illu-cyl-1) 55%, var(--qb-illu-cyl-2));
    box-shadow: 0 14px 22px -8px rgba(244,143,193,.7);
    transform: rotate(28deg);
}
/* p5 : cone bleu (bas droite) */
#bootstrap3 .liste_sidebar_msg:not(:has(.panel-heading)) .panel-body > p:nth-child(5) {
    right: 9%; bottom: 7%;
    width: 12%; height: 16%;
    clip-path: polygon(50% 0, 100% 92%, 50% 100%, 0 92%);
    background: linear-gradient(120deg, var(--qb-illu-blue-1), var(--qb-illu-blue-2) 60%, var(--qb-illu-blue-3));
    transform: rotate(-24deg);
    filter: drop-shadow(0 10px 10px rgba(106,184,245,.45));
}


/* =====================================================================
   ACCESSIBILITE - MODES DU PANNEAU DENDREO (bouton " accessibilite " du menu)
   Dendreo pose des attributs sur la balise <html> :
     data-contrast="more_contrast"        -> contraste accentue
     data-font="dyslexia_font"            -> police adaptee dyslexie
     data-reduce-motion="reduce_motion"   -> animations reduites
   Le reglage " taille du texte " modifie la taille de base : toutes les
   tailles de ce fichier sont en em et suivent donc ce reglage.
   ===================================================================== */

/* ---------- Contraste accentue : palette noir / blanc, plus de degrades ni de transparences ---------- */
[data-contrast="more_contrast"] #bootstrap3 {
    --qb-ink:          #000000;
    --qb-ink-soft:     #1a1a1a;
    --qb-ink-body:     #000000;
    --qb-placeholder:  #333333;
    --qb-link-icon:    #000000;
    --qb-black:        #000000;
    --qb-black-hover:  #000000;
    --qb-bg-1:         #ffffff;
    --qb-bg-2:         #ffffff;
    --qb-bg-3:         #ffffff;
    --qb-card:         #ffffff;
    --qb-card-soft:    #ffffff;
    --qb-line:         #000000;
    --qb-violet:       #2f2299;   /* violet tres fonce : blanc dessus = contraste 11:1 */
    --qb-violet-dark:  #1f1666;
    --qb-violet-light: #ffffff;
    --qb-grad-violet:  linear-gradient(#2f2299, #2f2299);   /* degrade remplace par un aplat */
    --qb-grad-coral:   linear-gradient(#7a1f2e, #7a1f2e);
    --qb-grad-sky:     linear-gradient(#0f3f70, #0f3f70);
    --qb-pink-light:   #ffffff;
    --qb-pink-dark:    #7a1f4d;
    --qb-sky-light:    #ffffff;
    --qb-sky-dark:     #0f3f70;
    --qb-teal-light:   #ffffff;
    --qb-teal-dark:    #0b5c4e;
    --qb-yellow:       #ffe600;
    --qb-warning-bg:   #ffffff;
    --qb-warning-text: #000000;
    --qb-shadow:       none;
    --qb-shadow-hover: none;
    --qb-shadow-glow:  none;
    --qb-shadow-btn:   none;
    --qb-shadow-btn-hover: none;
    --qb-shadow-hero:  none;
    --qb-shadow-dark:  none;
    --qb-shadow-dark-hover: none;
}
/* Onglet actif et ligne active : fond sombre du mode contraste, texte blanc */
[data-contrast="more_contrast"] #bootstrap3 .nav-pills > li.active > a,
[data-contrast="more_contrast"] #bootstrap3 .nav-pills > li.active > a .fa,
[data-contrast="more_contrast"] #bootstrap3 .list-group-item.active a,
[data-contrast="more_contrast"] #bootstrap3 .list-group-item.active .fa { color: #fff !important; }
/* Menu : Dendreo le force en noir, on garde les liens en blanc et la pilule active foncee */
[data-contrast="more_contrast"] #bootstrap3 .catalogue-navbar,
[data-contrast="more_contrast"] #bootstrap3 .navbar { backdrop-filter: none; box-shadow: none; }
[data-contrast="more_contrast"] #bootstrap3 .navbar-nav > li > a,
[data-contrast="more_contrast"] #bootstrap3 .navbar-nav > li > button,
[data-contrast="more_contrast"] #bootstrap3 .navbar .fa-shopping-cart { color: #fff !important; }
[data-contrast="more_contrast"] #bootstrap3 .navbar-default .navbar-nav > li > a:hover::before,
[data-contrast="more_contrast"] #bootstrap3 .navbar-default .navbar-nav > li > button:hover::before { background: #555; }
[data-contrast="more_contrast"] #bootstrap3 .navbar-nav > li.active > a::before,
[data-contrast="more_contrast"] #bootstrap3 .navbar-default .navbar-nav > .active > a::before { background: #fff; box-shadow: none; }
[data-contrast="more_contrast"] #bootstrap3 .navbar-nav > li.active > a { color: #000 !important; }
/* Bordures visibles partout, plus aucune ombre */
[data-contrast="more_contrast"] #bootstrap3 .badge,
[data-contrast="more_contrast"] #bootstrap3 .panel.panel-default,
[data-contrast="more_contrast"] #bootstrap3 .well,
[data-contrast="more_contrast"] #bootstrap3 .form-control,
[data-contrast="more_contrast"] #bootstrap3 .btn,
[data-contrast="more_contrast"] #bootstrap3 .catalogue-gallery__card,
[data-contrast="more_contrast"] #bootstrap3 .catalogue-prochaines-sessions .list-group-item { border: 2px solid #000 !important; box-shadow: none !important; }
/* Decorations floues supprimees */
[data-contrast="more_contrast"] #bootstrap3 .welcome_msg::before,
[data-contrast="more_contrast"] #bootstrap3 .welcome_msg::after,
[data-contrast="more_contrast"] #bootstrap3 .catalogue-formation-formulaire::after,
[data-contrast="more_contrast"] #bootstrap3 .liste_sidebar_msg:not(:has(.panel-heading))::before,
[data-contrast="more_contrast"] #bootstrap3 .liste_sidebar_msg:not(:has(.panel-heading))::after { display: none; }
/* Banniere et bloc d'inscription : Dendreo force le texte en noir, on passe donc le fond en blanc */
[data-contrast="more_contrast"] #bootstrap3 .welcome_msg,
[data-contrast="more_contrast"] #bootstrap3 .catalogue-formation-formulaire {
    background: #fff !important;
    color: #000 !important;
    border: 2px solid #000 !important;
    box-shadow: none !important;
}
[data-contrast="more_contrast"] #bootstrap3 .welcome_msg > * { max-width: 100%; color: #000 !important; }
[data-contrast="more_contrast"] #bootstrap3 .welcome_msg > a,
[data-contrast="more_contrast"] #bootstrap3 .welcome_msg > p > a { border: 2px solid #000; text-decoration: underline; }
[data-contrast="more_contrast"] #bootstrap3 .catalogue-formation-formulaire .panel-title,
[data-contrast="more_contrast"] #bootstrap3 .catalogue-formation-formulaire label,
[data-contrast="more_contrast"] #bootstrap3 .catalogue-formation-formulaire .js-price-amount-ttc,
[data-contrast="more_contrast"] #bootstrap3 .catalogue-formation-formulaire .js-price-amount-ht,
[data-contrast="more_contrast"] #bootstrap3 .catalogue-formation-formulaire .text-muted,
[data-contrast="more_contrast"] #bootstrap3 .catalogue-formation-formulaire .text-subtle { color: #000 !important; opacity: 1 !important; }
[data-contrast="more_contrast"] #bootstrap3 .catalogue-formation-formulaire .form-control { background: #fff; color: #000; }
[data-contrast="more_contrast"] #bootstrap3 .catalogue-formation-formulaire .form-control::placeholder { color: #333; }
/* Visuels des cartes : plus de fond colore autour de l'image */
[data-contrast="more_contrast"] #bootstrap3 .catalogue-gallery__img { padding: 0; border: 2px solid #000; background: #fff; }
[data-contrast="more_contrast"] #bootstrap3 .catalogue-gallery__img__mask { box-shadow: none; border-radius: 0; }
[data-contrast="more_contrast"] #bootstrap3 .footer { background: #fff; border-top: 2px solid #000; }
[data-contrast="more_contrast"] #bootstrap3 .footer a { text-decoration: underline; }
/* Illustration laterale : contours noirs, pas de flou */
[data-contrast="more_contrast"] #bootstrap3 .liste_sidebar_msg:not(:has(.panel-heading)) .panel-body > p,
[data-contrast="more_contrast"] #bootstrap3 .liste_sidebar_msg:not(:has(.panel-heading)) .panel-body::before { filter: none; box-shadow: none; outline: 2px solid #000; }

/* ---------- Police dyslexie : on n'impose jamais notre police par-dessus ---------- */
[data-font="dyslexia_font"] #bootstrap3,
[data-font="dyslexia_font"] #bootstrap3 h1,
[data-font="dyslexia_font"] #bootstrap3 h2,
[data-font="dyslexia_font"] #bootstrap3 h3,
[data-font="dyslexia_font"] #bootstrap3 .panel-title,
[data-font="dyslexia_font"] #bootstrap3 .catalogue-gallery__title,
[data-font="dyslexia_font"] #bootstrap3 .btn { font-family: OpenDyslexic3, sans-serif !important; letter-spacing: 0; }

/* ---------- Animations reduites (reglage Dendreo ET preference systeme) ---------- */
[data-reduce-motion="reduce_motion"] #bootstrap3 *,
[data-reduce-motion="reduce_motion"] #bootstrap3 *::before,
[data-reduce-motion="reduce_motion"] #bootstrap3 *::after { transition: none !important; animation: none !important; }
[data-reduce-motion="reduce_motion"] #bootstrap3 .catalogue-gallery__card:hover,
[data-reduce-motion="reduce_motion"] #bootstrap3 .welcome_msg > a:hover,
[data-reduce-motion="reduce_motion"] #bootstrap3 .welcome_msg > p > a:hover,
[data-reduce-motion="reduce_motion"] #bootstrap3 .catalogue-prochaines-sessions .list-group-item:hover { transform: none !important; }

/* ---------- Replis pour anciens navigateurs ---------- */
@supports not (backdrop-filter: blur(1px)) {
    #bootstrap3 .catalogue-navbar, #bootstrap3 .navbar { background: var(--qb-card) !important; }
}
@supports not (aspect-ratio: 1 / 1) {
    #bootstrap3 .liste_sidebar_msg:not(:has(.panel-heading)) .panel-body { height: 0; padding-bottom: 100%; }
    #bootstrap3 .liste_sidebar_msg:not(:has(.panel-heading)) .panel-body::before { width: 11%; height: 11%; }
}

/* ==========================
   CORRECTIFS (a garder en fin de fichier)
========================== */
/* Bouton loupe des champs " Formation " et " Adresse " : Bootstrap met la taille de
   police du conteneur a 0, ce qui ecrasait le bouton -> on la retablit. */
#bootstrap3 .input-group-btn { font-size: 1em; }

/* Pied de page : hauteur automatique (le texte tient sur 3 lignes) et fond continu */
body#bootstrap3 { margin-bottom: 0; }
#bootstrap3 .footer { position: static; height: auto; padding: 1.25em 0 1.5em; margin-top: 1em; }
#bootstrap3 .footer.navbar-fixed-bottom .container.text-center { background: transparent; padding-bottom: 0 !important; }
#bootstrap3 .footer .text-muted,
#bootstrap3 .footer .text-muted a { line-height: 1.7; }

/* Choix de la session dans le bloc d'inscription colore : les cartes de session
   sont blanches, leur texte et leur prix doivent donc etre sombres (jamais blancs). */
#bootstrap3 .catalogue-formation-formulaire .radio-group__label {
    background: var(--qb-white) !important;
    border: 2px solid transparent !important;
    border-radius: var(--qb-radius-sm);
    color: var(--qb-ink) !important;
    font-size: 1em;
    padding: .8em .9em;
}
#bootstrap3 .catalogue-formation-formulaire .radio-group__label div,
#bootstrap3 .catalogue-formation-formulaire .radio-group__label span:not(.badge),
#bootstrap3 .catalogue-formation-formulaire .radio-group__label .js-price-amount-ttc,
#bootstrap3 .catalogue-formation-formulaire .radio-group__label .js-price-amount-ht,
#bootstrap3 .catalogue-formation-formulaire .radio-group__label .text-muted,
#bootstrap3 .catalogue-formation-formulaire .radio-group__label .text-subtle { color: var(--qb-ink) !important; }
#bootstrap3 .catalogue-formation-formulaire .radio-group__label .js-price-amount-ttc,
#bootstrap3 .catalogue-formation-formulaire .radio-group__label .js-price-amount-ht { font-size: 1.25em; font-weight: 800; }
#bootstrap3 .catalogue-formation-formulaire .radio-group__input:checked + .radio-group__label { border-color: var(--qb-ink) !important; }
#bootstrap3 .catalogue-formation-formulaire .radio-group__input:focus-visible + .radio-group__label { outline: 3px solid var(--qb-white); outline-offset: 2px; }
#bootstrap3 .catalogue-formation-formulaire .session-heading { color: var(--qb-white); font-weight: 700; margin: 1em 0 .5em; }
#bootstrap3 .catalogue-formation-formulaire .session-heading .fa { color: inherit !important; }
/* Sous-blocs du formulaire (formateur, lieu, creneaux) : fond blanc translucide, texte blanc.
   Le bloc " formateur " est masque quand il est vide (evite un rectangle blanc sans contenu). */
#bootstrap3 .catalogue-formation-formulaire .well { background: rgba(20,16,60,.2) !important; border: none !important; box-shadow: none !important; color: var(--qb-white); }
#bootstrap3 .catalogue-formation-formulaire .well strong { color: var(--qb-white); }
#bootstrap3 .catalogue-formation-formulaire .js_formateur_lam:has(> strong:empty) { display: none; }
[data-contrast="more_contrast"] #bootstrap3 .catalogue-formation-formulaire .well { background: #fff !important; color: #000; border: 2px solid #000 !important; }
[data-contrast="more_contrast"] #bootstrap3 .catalogue-formation-formulaire .radio-group__label { border-color: #000 !important; }

/* Liens dans les blocs Lieux / Session animee par du formulaire : blancs */
#bootstrap3 .catalogue-formation-formulaire .well a,
#bootstrap3 .catalogue-formation-formulaire .well a:hover,
#bootstrap3 .catalogue-formation-formulaire .well a:focus { color: var(--qb-white) !important; text-decoration: underline; }
[data-contrast="more_contrast"] #bootstrap3 .catalogue-formation-formulaire .well a { color: #000 !important; }