/* =========================================================
   PAROLE — CONGRÈS
   Feuille de style "squelette" à personnaliser par congrès
   (copier en: /wp-content/themes/WPBASE/congres-assets/css/css-<ID>.css)
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
/* ---------- Variables globales (faciles à surcharger) ---------- */
:root{
    --pe-font-base:        system-ui, -apple-system, Roboto, Arial, sans-serif;
    --pe-font-alt:         inherit;

    --pe-color-bg:         #ffffff;
    --pe-color-text:       #666;
    --pe-color-muted:      #6b7280;

    --pe-primary:          #0d6efd;     /* liens, boutons */
    --pe-secondary:        #6c757d;
    --pe-accent:           #e3f2fd;     /* bandeau nav */
    --pe-border:           #e5e7eb;

    --pe-radius:           .5rem;
    --pe-shadow:           0 8px 24px rgba(0,0,0,.08);

    --pe-space-1:          .25rem;
    --pe-space-2:          .5rem;
    --pe-space-3:          1rem;
    --pe-space-4:          1.5rem;
    --pe-space-5:          2rem;

    /* Largeurs breakpoint (alignées Bootstrap 5) */
    --bp-xl: 1200px;
    --bp-lg: 992px;
    --bp-md: 768px;
    --bp-sm: 576px;
}

/* =========================================================
   RESET minimum local à la page congrès
   ========================================================= */
body.congres-template-default{
    /*background: var(--pe-color-bg);*/
    /*color: var(--pe-color-text);*/
    /*font-family: var(--pe-font-base);*/
}
body {
    font-family: "Roboto";
    font-optical-sizing: auto;
    font-weight: 350;
    font-style: normal;
    color: #6E7199;
    font-size: 1.1rem;
    background: #252530 url(../img/300/trame2.png) repeat fixed;
    background-size: 300px auto;
}

/* =========================================================
   HEADER + barre supérieure
   ========================================================= */
#header.sticky-top{
    /* padding, fond, ombre… */
}
#header .navbar-brand{
    /* logo / lien home */
}
#header .menu-container{
    /* conteneur menu principal du thème */
}
#showMenu{
    /* bouton burger thème */
}

/* =========================================================
   MESSAGE défilant (bandeau info)
   ========================================================= */
#message-defilant.message{
    /* fond, typo, espacement */
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    background-color: #D94D84 !important; /* optionnel : couleur de fond */
    border-top: 1px solid #D94D84;
    border-bottom: 1px solid #D94D84;
    font-size: 1.1rem;
    font-weight: 700;
    color: #FFF !important;
    padding: 8px 0;
}
#message-defilant.message span{
    /* style du texte défilant */
    display: inline-block;
    padding-left: 100%;
    animation: defilement 15s linear infinite;
}
/* Animation du défilement */
@keyframes defilement {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
/* =========================================================
   NAV CONGRÈS (barre secondaire ancrages)
   ========================================================= */
#nav-congres.navbar{
    background: transparent!important;
    /* bordure/ombre/radius éventuels */
}
#nav-congres .navbar-brand img{
    /* taille logo nav interne */
}
#nav-congres .navbar-toggler{
    /* style bouton toggle (mobile) */
}
#nav-congres .navbar-nav{
    /* gap horizontal/vertical */
}
#nav-congres .nav-link{
    /* couleur, hover, active */
    /*font-family: 'Black Ops One', cursive;*/
    margin: 0 20px;
    font: 400 30px "Black Ops One", sans-serif;
    color: #F5F5F5 !important;
    transform: scaleX(0.85);
}
#nav-congres .nav-link.active,
#nav-congres .nav-link:focus,
#nav-congres .nav-link:hover{
    /* état actif/survol */
}

/* =========================================================
   SECTION — Header mini-site (titre + dates)
   ========================================================= */
#header-mini-site{
    /* padding, fond, image éventuelle */
    position: relative;
    padding: 50px 0;
    z-index: -1;
    overflow: hidden; /* coupe le pseudo-élément */
    isolation: isolate; /* optionnel : crée un contexte propre */
    transform: translateY(-116px);
    margin-bottom: -116px;
}
#header-mini-site::before{
    content:"";
    position:absolute; inset:0;
    background: url(../../../../uploads/2025/10/affiche-v1.jpg) center/cover no-repeat;
    filter: blur(12px);
    transform: scale(1.05); /* évite bords nets après blur */
    z-index: 0;               /* derrière */
    pointer-events: none;     /* ne bloque pas les clics */
}
/* tout le contenu passe au-dessus du bg flouté */
#header-mini-site > *{
    position: relative;
    z-index: 1;
}
#header-mini-site .title{
    /* taille/poids du H1 */
    font-family: 'Black Ops One', cursive;
}
h1, h2 {
    font-family: "Black Ops One", sans-serif;
    font-weight: 400;
    color: #ED538E;
    text-transform: uppercase;
}
h1 {
    transform: scaleX(0.70);
}
h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}
#header-mini-site ul{
    /* liste dates */
}
#header-left {
    position: relative;
    height: auto;
    min-height: 530px;
    padding-top: 60px;
}
#header-right {
    padding-top: 60px;
    text-align: center;
}
.titre-congres {
    font-size: 3.5rem;
    line-height: 3rem;
}
.header-dates {
    font-family: "Black Ops One", sans-serif;
    font-weight: 400;
    font-size: 2.5rem;
    color: #ED538E;
    text-transform: uppercase;
    transform: scaleX(0.85);
}
.header-dates span {
    text-transform: uppercase;
    color: #FFF;
}
#header-mini-site li{
    /* puces/espacement */
}

/* =========================================================
   SECTIONS Contenu
   (Présentation / Infos pratiques / Programme / Inscriptions)
   ========================================================= */
#presentation{
    color: #FFF;
    background-color: rgba(31, 60, 85, .85);
}
#presentation.content-text{ /* wrapper section */ }
#presentation h3{ /* titre */
    font-family: "Black Ops One", sans-serif;
    font-weight: 400;
    color: #ED538E;
    text-transform: uppercase;
}
#presentation p, #presentation ul{ /* texte */ }

#infos-pratiques{
    background-color: rgba(0, 0, 0, .5);
    color: #FFF;
}
#infos-pratiques.content-text{}
#infos-pratiques h3{
    font-family: "Black Ops One", sans-serif;
    font-weight: 400;
    color: #ED538E;
    text-transform: uppercase;
}
#infos-pratiques a{
    color: #ED538E;
    font-weight: 700;
    transition: color .3s
    ease-in-out;
}
#infos-pratiques a:hover {
    color: #2F3848;
}
#programme{
    color: #FFF;
    background-color: rgba(31, 60, 85, .85);
}
#programme.content-text{ }
#programme h3{
    font-family: "Black Ops One", sans-serif;
    font-weight: 400;
    color: #ED538E;
    text-transform: uppercase;
}
#inscriptions{
    color: #FFF;
    background-color: rgba(0, 0, 0, .5);
}
#inscriptions.content-text{ }
#inscriptions h3{
    font-family: "Black Ops One", sans-serif;
    font-weight: 400;
    color: #ED538E;
    text-transform: uppercase;
}

/* =========================================================
   PROGRAMME — Badges & Accordéon
   ========================================================= */
.prog-badge{ /* style badge générique */ }
.prog-badge--date{ /* couleurs date */
    color: #ED538E;
    font-size: 1.6em;
}
.prog-badge--time{ /* couleurs heure */
    color: #F5F5F5;
    font-size: 1.6em;
}

.prog-meta{ /* ligne meta dans l’entête accordéon */ }
.prog-title{ /* titre conférence */ }
.prog-sub{   /* sous-texte conférencier/sous-titre */ }

.accordion{ /* marge globale */
    font-family: "Roboto"!important;
}
.accordion-item.card{ /* bordure/ombre/radius */ }
.accordion-header.card-header{ /* fond/typo header */}
.accordion-button.btn-accordion{ /* zone cliquable */ }
.accordion-button.btn-accordion:not(.collapsed){ /* état ouvert */
    background-color: rgba(255,255,255,.15);
}
.accordion-collapse.collapse{ /* transitions si besoin */ }
.accordion-body.card-body{ /* padding interne */ }

.accordion-body .prog-section{ /* espacement entre blocs */ }
.accordion-body .prog-section h6{ /* sous-titres */
    color: #ED538E;
    font-weight: 700;}
.accordion-body .text-body p{ /* texte descriptif */
    color: #F5F5F5;}
.accordion-body .text-bodycv p {
    font-size: 0.8em;
}

.prog-badge{display:inline-flex;align-items:center;border-radius:.375rem;padding:.2rem .5rem;font-weight:600}

.prog-meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.prog-title{color:#FFF;
    font-family: "Roboto";
}
.prog-sub{color:#FFF;
    font-family: "Roboto";}
.accordion-button {
    background-color: transparent;
}
.accordion-button .prog-meta *{}
.accordion-button .prog-title{}
.accordion-body h6{margin-top:0.25rem;margin-bottom:.5rem}
.accordion-body .prog-section{margin-bottom:1rem}
/* Bootstrap 4: on simule visuel button si besoin */
.card.accordion-item{
    background-color: rgba(255, 255, 255, .05);
}
.card-header.accordion-header{
    padding: 15px;
    border-radius: 0;
}
.btn-accordion{border:0;width:100%;text-align:left;padding:1rem;display:block}

.auteur {
    font-size: 1.65rem;
}
.uppercse {
    text-transform: uppercase;
}

/* =========================================================
   FORMULAIRE d’inscription (multi-étapes)
   ========================================================= */
.form-inscr{ /* grille, max-width local si nécessaire */
    background: #362e4ae0;
    color: #CCC;
    padding: 50px 150px 100px 150px!important;
    border-radius: 0;
    margin-bottom: 15px;
}
.form-inscr .ms-step{ /* étapes masquées/affichées */ }
.form-inscr .ms-step.active{ /* étape visible */ }

#ms-progress{ /* barre progression (les .ms-dot) */ }
#ms-progress .ms-dot{ /* points inactifs */ }
#ms-progress .ms-dot.ms-active{ /* points actifs */ }

.form-inscr .field{ /* wrapper champ (label + input) */ }
.form-inscr .field-label{ /* style label */ }
.form-inscr .field-input{ /* style input */ }

.form-inscr .has-error .field-input{ /* bordure rouge */ }
.form-inscr .has-success .field-input{ /* bordure verte */ }
.form-inscr .help-block{ /* message erreur validator */ }

.form-inscr .txtRadio{ /* texte à côté des radios */ }
.form-inscr .rounded-checkbox{ /* style radio custom */ }
.form-inscr .rounded-checkbox .check{ /* bullet custom */ }

#bloc-adresse-privee{ /* conteneur adresse privée */ }
#bloc-adresse-pro{    /* conteneur adresse pro */ }

#alertInfo2participantsMini{ /* alerte 2+ participants */ }
#alertPromo{                   /* alerte promo 5+ */ }

#inscriptionFormSubmit{ /* bouton envoyer */ }

/* Montants / moyens de paiement */
#rowQuantites{ /* ligne "je désire inscrire" */ }
#bel-pay, #france-pay, #swiss-pay, #mandat-fr{ /* radios paiement */ }
#versement_Belgique_montant,
#versement_france_montant,
#versement_Suisse_montant{ /* champs montants (readonly) */ }
#mandat-fr-amount{ /* span (X €/pers) */ }
#Convention_France_montant{ /* hidden total mandat */ }

/* =========================================================
   FOOTER mini-site (bloc gris clair)
   ========================================================= */
#footer-mini-site{
    /* fond, padding */
    color: #8a8caf;
    background-color: rgba(31, 60, 85, .85);
}
#footer-mini-site img{ /* logo */ }
#footer-mini-site .widget-title{ /* titre colonne 1 */ }
#footer-mini-site address{ /* adresses */ }
#footer-mini-site .nav-footer{ /* liste ancres */ }
#footer-mini-site a {
    color: #ED538E;
    text-decoration: none;
    font-weight: 700;
    transition: color .3s
    ease-in-out;
}

#footer-mini-site .nav-footer .nav-link a{ /* liens */
    text-decoration: none;
    color: #8a8caf;
    font-weight: 700;
    transition: color .3s
    ease-in-out;
}
#footer-mini-site .nav-footer .nav-link a {
    font-size: 1.6em;
    text-align: right!important;
}
#footer-mini-site .nav-footer .nav-link a:hover {
    color: #ED538E;
}
.belgique {
    background-image: url(../img/300/belgique.svg);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}
.france {
    background-image: url(../img/300/france.svg);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}
#footer-mini-site > div > div > div.col-12.col-md-6.col-lg-3.cright-footer-mini-site > ul
{

    text-align: right;
}
/* =========================================================
   FOOTER global thème
   ========================================================= */
#footer{ /* fond, padding */
}
#footer #top{ /* bouton remonter */ }
#footer .list-icone{ /* réseaux sociaux */ }
#footer .list-icone a{ /* liens icônes */ }
#footer small{ /* copyright */ }

#copyright {
    /* background: #B85F98; */
    background-color: rgba(0, 0, 0, 0.5);
    color: #FFF;
    padding: 20px 0 5px;
    line-height: 2rem;
    opacity: 0.5;
    transition: all .2s linear;
}
#copyright a {
    color: #E5CBE0;
    font-weight: 700;
    text-decoration: none;
    transition: all .2s
    linear;
}
#copyright a:hover {
    color: #FFF;
    font-weight: 700;
    text-decoration: none;
}
/* =========================================================
   UTILITAIRES LOCAUX (si besoin)
   ========================================================= */
.pe-shadow{ box-shadow: var(--pe-shadow); }
.pe-rounded{ border-radius: var(--pe-radius); }
.pe-border{ border: 1px solid var(--pe-border); }
.pe-muted{ color: var(--pe-color-muted); }

/* =========================================================
   RESPONSIVE — TABLETTES (≤ LG)
   ========================================================= */
@media (max-width: 991.98px){
    #nav-congres .navbar-nav{
        /* pile verticale, espacement augmenté */
    }

    /* --- Burger menu visible sur fond foncé --- */
    .navbar-toggler {
        border: 1px solid rgba(255, 255, 255, 0.5);
        padding: 0.4rem 0.6rem;
    }

    /* Icône du burger (les trois barres) */
    .navbar-toggler-icon {
        background-image: none; /* on enlève l'icône Bootstrap par défaut */
        position: relative;
        width: 24px;
        height: 2px;
        background-color: #fff;
        display: inline-block;
        transition: all 0.3s ease-in-out;
    }

    /* On ajoute les 2 barres du haut et du bas */
    .navbar-toggler-icon::before,
    .navbar-toggler-icon::after {
        content: "";
        position: absolute;
        left: 0;
        width: 24px;
        height: 2px;
        background-color: #fff;
        transition: all 0.3s ease-in-out;
    }

    .navbar-toggler-icon::before {
        top: -7px;
    }

    .navbar-toggler-icon::after {
        top: 7px;
    }

    /* Optionnel : animation croix quand on ouvre */
    .navbar-toggler.collapsed .navbar-toggler-icon {
        background-color: #fff;
    }

    .navbar-toggler:not(.collapsed) .navbar-toggler-icon {
        background-color: transparent;
    }

    .navbar-toggler:not(.collapsed) .navbar-toggler-icon::before {
        transform: rotate(45deg);
        top: 0;
    }

    .navbar-toggler:not(.collapsed) .navbar-toggler-icon::after {
        transform: rotate(-45deg);
        top: 0;
    }
    /* Arrière-plan visible quand la nav est dépliée sur mobile */
    .navbar-collapse.show {
        background-color: rgba(0, 0, 0, 0.25); /* fond noir semi-transparent */
        padding:50px;
    }
    /* Bonus : un peu d’aération visuelle pour les liens */
    .navbar-collapse.show .nav-link {
        color: #fff;
        padding: 0.75rem 1rem;
    }


    #header-mini-site{
        /* réduire padding top/bottom */
    }
    .prog-meta{ /* réduire gap/alignement */ }
    .accordion-button.btn-accordion{ /* taille typo plus petite */ }

    .form-inscr .ms-nav{ /* nav étapes en colonne */ }
    #rowQuantites{ /* empiler colonnes */ }
    #footer-mini-site .nav-footer{ /* centrer liens */ }
}

/* =========================================================
   RESPONSIVE — TÉLÉPHONES (≤ MD)
   ========================================================= */
@media (max-width: 767.98px){
    #nav-congres .navbar-brand img{
        /* logo plus petit */
    }
    #nav-congres .nav-link{
        /* toucher + grand (padding) */
    }

    #header-mini-site .title{
        /* taille H1 réduite */
    }
    #header-mini-site ul{
        /* liste dates en pile */
    }


    .prog-badge{ /* badges plus compacts */ }
    .prog-title{ /* taille réduite */ }
    .prog-sub{   /* cacher/limiter si besoin */ }

    .form-inscr{
        padding: 50px!important;
    }
    .form-inscr .field-label{
        /* au-dessus de l’input */
    }
    .form-inscr .ms-step{
        /* marges internes réduites */
    }
    #inscriptionFormSubmit{
        /* bouton full-width */
    }

    #footer-mini-site .row > *{
        /* centrer, marges verticales */
    }
    .cleft-footer-mini-site, .cright-footer-mini-site{
        text-align: center!important;
        padding-bottom: 50px!important;padding-top: 50px!important;
    }
    #footer-mini-site > div > div > div.col-12.col-md-6.col-lg-3.cright-footer-mini-site > ul
    {

        padding-left: 0!important;
        margin-left: 0!important;
        text-align: center!important;
    }
}

/* =========================================================
   (OPTION) PRINT — masquer éléments non pertinents à l’impression
   ========================================================= */
@media print{
    #message-defilant,
    #nav-congres,
    #ms-progress,
    #footer-mini-site,
    #footer{ display:none !important; }
}