/* =========================================================
   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=Anton&family=Inter:wght@400;500;600;700;800&display=swap');
/* ---------- Variables globales (faciles à surcharger) ---------- */
:root{
    --pe-font-base:        "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --pe-font-alt:         "Anton", "Oswald", "Helvetica Neue Condensed Bold", "Arial Narrow", sans-serif;

    --pe-color-bg:         #7FC5E8;     /* bleu ciel affiche */
    --pe-color-text:       #142A3A;     /* bleu marine quasi-noir */
    --pe-color-muted:      #5A6B7A;     /* gris-bleu doux */

    --pe-primary:          #E63319;     /* rouge vermillon — liens, boutons */
    --pe-secondary:        #C2280F;     /* rouge profond pour hover/contrast */
    --pe-accent:           #F8E9D0;     /* crème "post-it" — bandeau nav */
    --pe-border:           #D9E9F2;     /* bordure douce ton bleu */

    --pe-radius:           .5rem;
    --pe-shadow:           0 8px 24px rgba(20,42,58,.10);

    --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.congres-template-default h1,
body.congres-template-default h2,
body.congres-template-default h3,
body.congres-template-default h4,
body.congres-template-default h5,
body.congres-template-default h6{
    font-family: var(--pe-font-alt);
    color: var(--pe-primary);
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

body.congres-template-default a{
    color: var(--pe-primary);
}
body.congres-template-default a:hover,
body.congres-template-default a:focus{
    color: var(--pe-secondary);
}
.bg-beige{
    background-color: #FBEDDF;
}
.bg-light{
    background-color: #e3f2fd!important;
}
/* =========================================================
   HEADER + barre supérieure
   ========================================================= */
#header.sticky-top{
    background: var(--pe-color-bg);
}
#header .navbar-brand,
#header .menu-container,
#showMenu{
    color: var(--pe-color-text);
    font-family: var(--pe-font-base);
}


/* =========================================================
   MESSAGE défilant (bandeau info)
   ========================================================= */
#message-defilant.message{
    /* fond, typo, espacement */
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    background-color: #424D42 !important; /* optionnel : couleur de fond */
    border-top: 1px solid #424D42;
    border-bottom: 1px solid #424D42;
    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: var(--pe-accent);
}
#nav-congres .navbar-brand img{
    /* taille logo nav interne */
}
#nav-congres .navbar-toggler{
    color: var(--pe-primary);
    border-color: var(--pe-primary);
}
#nav-congres .navbar-nav .nav-link{
    color: var(--pe-color-text);
    font-family: var(--pe-font-base);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
#nav-congres .nav-link.active,
#nav-congres .nav-link:focus,
#nav-congres .nav-link:hover{
    color: var(--pe-primary);
}

/* =========================================================
   SECTION — Header mini-site (titre + dates)
   ========================================================= */
#header-mini-site{
    background-color: var(--pe-color-bg)!important;
    /*background: #CCC;*/
    background-image: url(../img/663/pinguins2.png);
    background-repeat: no-repeat;
    background-position: left 15%  top;
    background-size: 35%;
    color: var(--pe-color-text);
    height: auto;
    min-height:550px;
}
#header-mini-site .title{
    font-family: var(--pe-font-alt);
    color: var(--pe-primary);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 0.95;
    font-size: 5.5rem;
}
#header-mini-site ul{
    color: var(--pe-color-text);
    font-family: var(--pe-font-base);
}
#header-mini-site li{
    color: var(--pe-color-text);
}

.title3{
    font-size: 4.5rem;
}
/* =========================================================
   SECTIONS Contenu
   (Présentation / Infos pratiques / Programme / Inscriptions)
   ========================================================= */
#presentation{

}
#presentation.content-text,
#infos-pratiques.content-text,
#programme.content-text{
    color: var(--pe-color-text);
    font-family: var(--pe-font-base);
}
#presentation h3,
#infos-pratiques h3,
#programme h3,
#inscriptions h3{
    font-family: var(--pe-font-alt);
    color: var(--pe-primary);
    text-transform: uppercase;
    font-size: 2em;
}
#presentation p, #presentation ul,
#infos-pratiques p, #infos-pratiques ul{
    color: var(--pe-color-text);
}
#infos-pratiques a{
    color: var(--pe-primary);
}

/* =========================================================
   PROGRAMME — Badges & Accordéon
   ========================================================= */
.prog-badge{
    background: var(--pe-primary);
    color: var(--pe-accent);
    font-family: var(--pe-font-base);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.prog-badge--date{
    background: var(--pe-primary);
    color: var(--pe-accent);
    padding: 5px 10px;
    border-radius: 50px;
}
.prog-badge--time{
    background: var(--pe-accent);
    color: var(--pe-primary);
}

.prog-meta{ color: var(--pe-color-muted); font-family: var(--pe-font-base); }
.prog-title{
    font-family: var(--pe-font-alt);
    color: var(--pe-primary);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    font-size: 2rem;
}
.prog-sub{ color: var(--pe-color-text); font-family: var(--pe-font-base); }

.accordion-item, .accordion-item.card{
    /*background: var(--pe-accent);*/
    /*border-color: var(--pe-border);*/
    background: transparent!important;
    border-color: transparent!important;
    text-align: left;
}
.accordion-header.card-header{
    background: transparent!important;
    border-color: transparent!important;
    color: var(--pe-color-text);
    font-family: var(--pe-font-base);
    /*margin-bottom: 1em;*/
    margin-top: 0.75em;
}
.accordion-button.btn-accordion{
    color: var(--pe-color-text);
    background: transparent!important;
    border-color: transparent!important;
    font-family: var(--pe-font-base);
    font-weight: 700;
    box-shadow: none!important;
    padding: 0.95em 0.25em;
}
.accordion-button.btn-accordion:not(.collapsed){
    color: var(--pe-primary);
    background: transparent!important;
    border-color: transparent!important;
}
.accordion-body.card-body{
    background: transparent!important;
    border-color: transparent!important;
    color: var(--pe-color-text);
}

.accordion-body .prog-section h6{
    font-family: var(--pe-font-alt);
    color: var(--pe-primary);
    text-transform: uppercase;
}
.accordion-body .text-body p{
    color: var(--pe-color-text);
    font-family: var(--pe-font-base);
}
.accordion-button::after {
    display: none!important;
}


/* Le collapse Bootstrap garde sa transition de hauteur */
.accordion-collapse {
    overflow: visible;
}

.accordion-collapse.collapsing {
    overflow: hidden;
    transition: height .30s cubic-bezier(.22, .61, .36, 1);
}

/* État fermé par défaut */
.accordion-collapse .accordion-body {
    opacity: 0;
    transform: scale(.985);
    transform-origin: top center;
    transition:
            opacity .22s ease,
            transform .26s cubic-bezier(.22, .61, .36, 1);
}

/* État ouvert */
.accordion-collapse.show .accordion-body {
    opacity: 1;
    transform: scale(1);
}

/* Animation du body à l'ouverture */
.accordion-collapse.is-opening .accordion-body {
    animation: progBodyEnter .30s cubic-bezier(.22, .61, .36, 1) both;
}

/* Animation du body à la fermeture */
.accordion-collapse.is-closing .accordion-body {
    animation: progBodyLeave .24s cubic-bezier(.55, .06, .68, .19) both;
}

/* Animation du cloud à l'ouverture */
.accordion-collapse.is-opening .prog-cloud::before {
    animation: progCloudEnter .32s cubic-bezier(.22, .61, .36, 1) both;
}

/* Animation du cloud à la fermeture */
.accordion-collapse.is-closing .prog-cloud::before {
    animation: progCloudLeave .24s cubic-bezier(.55, .06, .68, .19) both;
}

@keyframes progBodyEnter {
    0% {
        opacity: 0;
        transform: scale(.985);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes progBodyLeave {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(.985);
    }
}

@keyframes progCloudEnter {
    0% {
        opacity: 0;
        transform: scale(.96, .92);
    }
    70% {
        opacity: 1;
        transform: scale(1.035, 1.055);
    }
    100% {
        opacity: 1;
        transform: scale(var(--cloud-scale-x), var(--cloud-scale-y));
    }
}

@keyframes progCloudLeave {
    0% {
        opacity: 1;
        transform: scale(var(--cloud-scale-x), var(--cloud-scale-y));
    }
    35% {
        opacity: 1;
        transform: scale(1.025, 1.04);
    }
    100% {
        opacity: 0;
        transform: scale(.96, .92);
    }
}
/* brochure download */
.brochure-img {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.brochure-img img {
    display: block;
    width: 100%;
    height: auto;
}

.brochure-tooltip {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    text-decoration: none;
}

/* Infobulle */
.brochure-img {
    position: relative;
    display: inline-block;
    overflow: visible;
}

.brochure-img img {
    display: block;
    width: 100%;
    height: auto;
}

.brochure-tooltip {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    text-decoration: none;
}

/* Infobulle au-dessus de l'image */
.brochure-tooltip::after {
    content: "Télécharger la brochure";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.75rem);
    z-index: 3;

    transform: translateX(-50%) translateY(0.35rem);
    opacity: 0;

    padding: 0.65rem 1rem;
    border-radius: 999px;

    background: rgba(0, 0, 0, 0.78);
    color: #fff;

    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;

    pointer-events: none;

    transition:
            opacity 0.22s ease,
            transform 0.22s ease;
}

/* Petite flèche vers l'image */
.brochure-tooltip::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.32rem);
    z-index: 3;

    transform: translateX(-50%) translateY(0.35rem);
    opacity: 0;

    width: 0;
    height: 0;

    border-left: 0.45rem solid transparent;
    border-right: 0.45rem solid transparent;
    border-top: 0.45rem solid rgba(0, 0, 0, 0.78);

    pointer-events: none;

    transition:
            opacity 0.22s ease,
            transform 0.22s ease;
}

.brochure-tooltip:hover::after,
.brochure-tooltip:focus-visible::after,
.brochure-tooltip:hover::before,
.brochure-tooltip:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* =========================================================
   FORMULAIRE d’inscription (multi-étapes)
   ========================================================= */
.form-inscr{
    color: var(--pe-color-text);
    font-family: var(--pe-font-base);
}
.form-inscr .ms-step{ /* étapes masquées/affichées */ }
.form-inscr .ms-step.active{ /* étape visible */ }

#ms-progress .ms-dot{ background: var(--pe-border); }
#ms-progress .ms-dot.ms-active{ background: var(--pe-primary); }

.form-inscr .field-label{
    color: var(--pe-color-text);
    font-family: var(--pe-font-base);
    font-weight: 700;
}
.form-inscr .field-input{
    color: var(--pe-color-text);
    background: #FFFFFF;
    border-color: var(--pe-border);
    font-family: var(--pe-font-base);
    border-radius: 50px!important;
}

.form-inscr .has-error .field-input{ border-color: var(--pe-primary); }
.form-inscr .has-success .field-input{ border-color: #2E8B57; }
.form-inscr .help-block{ color: var(--pe-primary); }

.form-inscr .txtRadio{ color: var(--pe-color-text); }
.form-inscr .rounded-checkbox .check{ background: var(--pe-primary); }
.btn.tab-btn {
    background: var(--pe-primary)!important;
    color: #fff;
    border: none;
    border-radius: 50px;
}
#alertInfo2participantsMini,
#alertPromo{
    background: var(--pe-accent);
    color: var(--pe-primary);
    border-color: var(--pe-primary);
}

#inscriptionFormSubmit{
    background: var(--pe-primary);
    color: var(--pe-accent);
    border-color: var(--pe-primary);
    font-family: var(--pe-font-base);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
#inscriptionFormSubmit:hover,
#inscriptionFormSubmit:focus{
    background: var(--pe-secondary);
    border-color: var(--pe-secondary);
    color: var(--pe-accent);
}

/* =========================================================
   FOOTER mini-site (bloc gris clair)
   ========================================================= */
#footer-mini-site{
    /*background: var(--pe-color-text)!important;*/
    background:#424D42!important;
    color: var(--pe-accent);
    font-family: var(--pe-font-base);
}
#footer-mini-site .widget-title{
    font-family: var(--pe-font-alt);
    color: var(--pe-accent);
    text-transform: uppercase;
}
#footer-mini-site address,
#footer-mini-site .nav-footer,
#footer-mini-site .nav-footer .nav-link a{
    color: var(--pe-accent);
}
footer .nav-link-footer:hover {
    color: var(--pe-primary);
}
#copyright {
    /*background-color: rgba(20, 42, 58, 0.5);*/
    background-color: rgb(40, 40, 40)!important;
    color: #F8E9D0;
    padding: 20px 0 5px;
    line-height: 2rem;
    /*opacity: 0.5;*/
    transition: all .2s linear;
}
#copyright a {
    color: var(--pe-accent);
    font-weight: 700;
    text-decoration: none;
    transition: all .2s linear;
}
#copyright a:hover {
    color: #FFF;
    font-weight: 700;
    text-decoration: none;
}
/* =========================================================
   FOOTER global thème
   ========================================================= */
#footer{
    background: var(--pe-color-text);
    color: var(--pe-accent);
    font-family: var(--pe-font-base);
}
#footer .list-icone a{ color: var(--pe-accent); }
#footer .list-icone a:hover{ color: var(--pe-primary); }
#footer small{ color: var(--pe-accent); }

/* =========================================================
   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é */
    }
    .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 {
        background-image: url(../img/663/pinguins2.png), url(../img/663/pinguins.png);
        background-repeat: no-repeat, no-repeat;
        background-position: right 33% top, right -43% bottom;
        background-size: 30%, 51%;
    }
    #header-mini-site .title{
        /* taille H1 réduite */
        font-size: 4.5rem;
    }
    #header-mini-site ul{
        /* liste dates en pile */
    }
    div.p-5{
        padding: 1rem!important;
    }
    .prog-badge{ /* badges plus compacts */ }
    .prog-title{ /* taille réduite */ }
    .prog-sub{   /* cacher/limiter si besoin */ }

    .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 */
    }
}
@media (max-width: 480px){

    #header-mini-site {
        background-image: url(../img/663/pinguins2.png), url(../img/663/pinguins.png);
        background-repeat: no-repeat, no-repeat;
        background-position: left -10% top 2%, right -43% bottom;
        background-size: 39%, 57%;
    }
    div.p-5{
        padding: 1rem!important;
    }
    .title3{
        font-size: 3.5rem;
    }
}

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


/* cloud svg */
.cloud-shape {
    --cloud-bg: #fff2df;
    --cloud-padding-y: 0.18em;
    --cloud-padding-x: 0.38em;
    --cloud-radius: 10% 21% 13% 18% / 24% 17% 27% 19%;
    --cloud-scale-x: 1.02;
    --cloud-scale-y: 1.05;

    position: relative;
    z-index: 0;
    display: inline-block;
    padding: var(--cloud-padding-y) var(--cloud-padding-x);
    margin-right: 25px;
    margin-bottom: 15px;
    /*
      Important :
      aucune taille de police ici.
      Le texte garde sa taille d'origine.
    */
    text-transform: uppercase;
    font-weight:800;
}

.cloud-shape::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--cloud-bg);
    border-radius: var(--cloud-radius);
    transform: scale(var(--cloud-scale-x), var(--cloud-scale-y));
    filter: url("#cloud-wobble");
    pointer-events: none;
}
.cloud-shape2 {
    --cloud-bg: rgba(194, 224, 235, .85);
    --cloud-padding-y: 0.18em;
    --cloud-padding-x: 0.38em;
    --cloud-radius: 10% 21% 13% 18% / 24% 17% 27% 19%;
    --cloud-scale-x: 1.02;
    --cloud-scale-y: 1.05;

    position: relative;
    z-index: 0;
    display: inline-block;
    padding: var(--cloud-padding-y) var(--cloud-padding-x);
    margin-right: 25px;
    margin-bottom: 15px;
    /*
      Important :
      aucune taille de police ici.
      Le texte garde sa taille d'origine.
    */
    /*text-transform: uppercase;*/
    /*font-weight:800;*/
}

.cloud-shape2::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--cloud-bg);
    border-radius: var(--cloud-radius);
    transform: scale(var(--cloud-scale-x), var(--cloud-scale-y));
    filter: url("#cloud-wobble");
    pointer-events: none;
}

.auteur{
    font-family: var(--pe-font-alt);
    color: var(--pe-primary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 1.6em;
}

.prog-cloud {
    /*--cloud-bg: rgba(90, 107, 122, 0.68);*/
    --cloud-bg: #DBE6E7;
    --cloud-text: #F5F7FA;

    --cloud-padding-y: 1.3rem;
    --cloud-padding-x: 1.3rem;

    --cloud-radius: 12% 24% 11% 28% / 23% 14% 34% 18%;
    --cloud-scale-x: 1.075;
    --cloud-scale-y: 1.045;

    position: relative;
    z-index: 0;
    display: block;

    padding: var(--cloud-padding-y) var(--cloud-padding-x);

    color: var(--cloud-text)!important;
    font-size: 1rem;
}

.prog-cloud::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background: var(--cloud-bg);
    border-radius: var(--cloud-radius);

    transform: scale(var(--cloud-scale-x), var(--cloud-scale-y));
    filter: url("#cloud-wobble-programme");

    pointer-events: none;
}

.prog-cloud,
.prog-cloud p,
.prog-cloud ul,
.prog-cloud ol,
.prog-cloud li,
.prog-cloud strong,
.prog-cloud em,
.prog-cloud span,
.prog-cloud a,
.prog-cloud b,
.prog-cloud i {
    /*color: inherit;*/
}

.prog-cloud > *:first-child {
    margin-top: 0;
}

.prog-cloud > *:last-child {
    margin-bottom: 0;
}

.prog-cloud2 {
    /*--cloud-bg: rgba(90, 107, 122, 0.68);*/
    --cloud-bg: rgba(219, 230, 231, .5);
    --cloud-text: #F5F7FA;

    --cloud-padding-y: 2.3rem;
    --cloud-padding-x: 2.3rem;

    --cloud-radius: 8% 24% 11% 28% / 30% 14% 34% 18%;
    --cloud-scale-x: 1.075;
    --cloud-scale-y: 1.045;

    position: relative;
    z-index: 0;
    display: block;

    padding: var(--cloud-padding-y) var(--cloud-padding-x);

    color: var(--cloud-text)!important;
    font-size: 1rem;
}

.prog-cloud2::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background: rgba(219, 230, 231, .5);
    border-radius: var(--cloud-radius);

    transform: scale(var(--cloud-scale-x), var(--cloud-scale-y));
    filter: url("#cloud-wobble-programme");

    pointer-events: none;
}
/* arrière plan des divs */
.cloud-bg {
    /*--cloud-bg: rgba(90, 107, 122, 0.35);*/
    --cloud-bg:#DBE6E7;
    --cloud-padding-y: 3.5rem;
    --cloud-padding-x: 5.75rem;
    --cloud-radius: 8% 24% 11% 28% / 30% 14% 34% 18%;
    --cloud-scale-x: 1.015;
    --cloud-scale-y: 1.025;

    position: relative;
    z-index: 0;

    padding: var(--cloud-padding-y) var(--cloud-padding-x);
}

.cloud-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    /*background: var(--cloud-bg);*/
    background: #DBE6E7;
    border-radius: var(--cloud-radius);

    transform: scale(var(--cloud-scale-x), var(--cloud-scale-y));
    transform-origin: center;

    filter: url("#cloud-wobble-global");

    pointer-events: none;
    margin-top: 50px;
    margin-bottom: 50px;
}
.bg-p-l{
    background-image: url(../img/663/pinguins2.png);
    background-repeat: no-repeat;
    background-position: left -15%  top;
    background-size: 25%;
}
.bg-p-r{

    background-image: url(../img/663/pinguins.png);
    background-repeat: no-repeat;
    background-position: right -15% top;
    background-size: 35%;
}