/*============================  slides.css  ================================
 * Brigitte Bigi                                                           
 * Style to be used with slides.js.
 *==========================================================================*/

/* =======================================================================
                            VARIABLE DEFINITIONS
  ======================================================================== */

@media print {
    :root:not(.contrast) {
        --font-size: 14px;
        --line-height: 1.2;
        --screen-width: 800px;
        --height: 420px;
    }
}

@media not print {
    :root:not(.contrast)  {
        --font-size: 32px;
        --line-height: 1.4;
        --screen-width: 1280px;
        --height: 720px;
    }
}

:root {
    /* SPPAS4 logo */
    --logo-color: rgb(88, 118, 177);
    /* SPPAS5 logo */
    --logo5-color1: rgb(41, 35, 92); /* #29235C */
    --logo5-color2: rgb(29, 113, 184); /* #1D71B8 */
}


:root:not([data-theme=dark]), [data-theme=light], .light {
    /* Main colors */
    --bg-color: transparent;  /* important */
    --bg-color-alt: rgb(240, 240, 240);
    --fg-color: rgb(0, 5, 10);
    --h2-color: var(--logo5-color1);
    --progress-bg-color: rgb(41, 35, 92);  /* #29235C */
    --progress-fg-color: rgb(29, 113, 184); /* #1D71B8 */
    --progress-height: 0.2rem;
}

/* ===========================  MAIN PAGE  ================================= */

[role="note"] {
    display: none;
}

html {
    margin: 0;
    padding: 0;
}

body {
    width: var(--screen-width);
    box-sizing: border-box;
    max-width: 100%;
}

@media screen {
    body {
        background-color: var(--bg-color-alt);
        height: var(--height);
        margin-top: calc(var(--height)/-2);
        position: absolute;
        top: 50%;
        overflow: hidden;
        display: none;
        cursor: default;
        /* To look like a "screen" and clearly see the un-used part
        when the ratio is not 16:9 */
        border-radius: 0;
        box-shadow: 0 0 var(--border-width) var(--border-width) var(--border-color);
        counter-reset: slides;

        /* to center horizontally */
        left: 50%;
        right: auto;
        margin-left: calc(var(--screen-width)/-2);
        margin-right: auto;
    }
}

@media print {
    body {
        height: auto;
        margin: 1rem;
        position: static;
        overflow: visible !important;
        display: block !important;
    }
}


/* ========================= Slides ======================= */

.view body {
    position: static;
    display: inline-block;
    overflow: visible;
    overflow-x: hidden;
    /* undo Dz.onresize */
    transform: none !important;
    -ms-transform: none !important;
}

section.slide {
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.view section.slide {
    pointer-events: auto;
    position: static;
    width: var(--screen-width);
    height: var(--height);
    float: left;
    transform: scale(.4);
    -ms-transform: scale(.4);
}

.view section.slide > * {
    pointer-events: none;
}

section.slide[aria-selected] {
    pointer-events: auto;
}

@media screen {
    html.view {
        overflow: visible;
    }

    body.loaded {
        display: block;
    }

    #progress-container {
        position: absolute;    /* ou fixed si vous voulez qu’elle reste visible */
        bottom: 0;
        left: 0;
        width: 100%;
        height: var(--progress-height);
        background-color: var(--progress-bg-color);
        /* si vous avez déjà #progress-bar positionné, supprimez l’ancien positionnement */
    }

    /* 2) Barre interne (valeur) */
    #progress-bar {
        height: 100%;
        width: 0%;               /* initialement vide ; le JS va mettre XX% */
        background-color: var(--progress-fg-color);
        transition: width 0.2s ease; /* optionnel : animation fluide */
    }

    /* Barre d’arrière-plan */
    #progress-bar::-webkit-progress-bar {
        background: var(--progress-bg-color);
        border-radius: var(--border-radius);
    }
    /* Valeur active */
    #progress-bar::-webkit-progress-value {
        background: var(--progress-fg-color);
        border-radius: var(--border-radius);
    }
    /* Firefox */
    #progress-bar::-moz-progress-bar {
        background: var(--progress-fg-color);
        border-radius: var(--border-radius);
    }

    #license-container {
        position: fixed;
        pointer-events: none;
        z-index: 10;
    }
    #license-container .license-logo {
        width: 64px;
    }

    #license-container.top    { top: 0; bottom: auto}
    #license-container.bottom { bottom: 0; top: auto}
    #license-container.left   { left: 0; right: auto}
    #license-container.right  { right: var(--typography-spacing-horizontal); left: auto}
}

@media print {
    section.slide {
        display: block !important; /* Affiche toutes les diapositives */
        position: relative !important; /* Empêche les diapositives de se superposer */
        width: 100%;
        height: auto;
        page-break-inside: avoid; /* Empêche les diapositives d'être coupées */
        margin-bottom: 2rem; /* Ajoute un espacement entre les diapositives */
        transition: none;
        transform: none;
    }

    .slide:before {
        position: relative !important; /* Ne pas utiliser fixed */
        margin-top: 0; /* Ajuster les marges */
        margin-left: 0;
    }

    #progress-bar {
        display: none;
    }
}

/* =======================================================================
                       HTML ELEMENTS STYLING
  ======================================================================== */

/*=============================  SLIDE  ==================================*/

/* Add page number at footer */
@media screen {
    .slide:before {
        counter-increment: slides;
        font-family: var(--font-family-pre), cursive;
        font-size: 40%;
        position: fixed;
        color: var(--fg-color-alt);
        content: var(--footer-text) counter(slides);
        margin-top: calc((var(--height)) - var(--typography-spacing-vertical));
        margin-left: 13rem;
        z-index: 1;
    }

    /* No footer on the first slide, it's the presentation title */
    .slide:first-child:before {
        content: "";
    }
}

/*=============================  TITLES  ==================================*/

/* Main title of a section: only the title at the center of the slide */

section.slide h1,
section.slide > h2,
section.slide > h3,
section.slide > h4,
section.slide > h5,
section.slide > h6 {
    font-family: var(--font-family-sans), sans-serif;
    /*margin-top: 0.5rem;
    margin-bottom: 1rem;
    margin-right: 0.5rem;
    margin-left: 0.5rem;*/
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-right: 0;
    padding-left: 0.5rem;
}

section.slide h1 {
    font-weight: bold;
    font-style: normal;
    font-variant: normal;
    font-size: 125%;
    text-align: left;
    letter-spacing: 2px;
    margin-top: calc((var(--height) * 0.35));
    /*border-bottom: 4px solid var(--h1-color);*/
    border-bottom: 4px solid transparent;
    border-image: linear-gradient(0.25turn, var(--logo5-color2), rgb(200, 200, 200), var(--logo5-color1));
    border-image-slice: 1;
    width: 100%;
}

section.slide h1.title {
    line-height: calc(var(--font-size) * 1.5);
    margin: auto;
    text-align: center;
    border-bottom: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
    color: var(--logo5-color1);
    background: #98C9F1;
}

section.slide h1.sub-title {
    line-height: calc(var(--font-size) * 1.5);
    margin: auto;
    text-align: center;
    border-bottom: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
    color: var(--logo5-color2);
    background: #98C9F1;
}


/* Title at the top of each slide */
section.slide > h2 {
    margin-top: 0;
    background: linear-gradient(0deg, var(--bg-color) 0%, var(--logo5-color2) 100%);;
    font-weight: var(--font-weight-bold);
    font-style: normal;
    font-variant: normal;
    font-size: calc(var(--font-size) * 1.2);
    text-align: left;
    letter-spacing: 1px;
}

/* Sub-Title at the top of the slide */
section.slide > h3 {
    font-weight: var(--font-weight-semibold);
    font-style: normal;
    font-variant: normal;
    font-size: calc(var(--font-size) * 1.1);
    text-align: left;
    letter-spacing: 1px;
}

/*=============================  OTHERS  ==================================*/

table {
    margin: auto;
}

ul, ol, p, blockquote, article, .cards-panel {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-right: 0.5rem;
    margin-left: 2rem;
}

li, li p { font-size: 100%; }

li li, li li p { font-size: 90%; }

li li li, li li li p { font-size: 85%; }

q { quotes: "“" "”" "‘" "’"; }


/*=============================  MEDIA  ==================================*/

/* Figures are displayed full-page, with the caption on bottom of the image. */
figure {
    display: block;
    text-align: center;
    max-width: 90%;
    max-height: 90%;
}

/* remove center align (from <figure>) inside <li> */
figure li, figure p { text-align: left; }
li figure { text-align: left; }

/* class right-image for floating image at right side */
.right-image img { float: right; margin: 0 10px 0 5px;}
.left-image img { float: left; margin: 0 10px 0 5px;}

/* class text-top for image aligned with text top */
.text-top img { vertical-align:text-top;}

audio, video {
    background-color: transparent;
    border-width:     0; 
    border-style:     none;
    margin:           0 auto;
    max-width:        90%; 
    max-height:       60%;
    position:         relative;
}

img {
    background-color: transparent;
    border-width:     0; 
    border-style:     none;
    margin:           0 auto;
    max-width:        100%; 
    max-height:       90%;
    position:         relative;
}

figcaption {
    position:       relative;
    font-size:      60%;
	padding-bottom: 10px;
}
 

/*=============================  EFFECTS  ==================================*/


@media screen {

    /* Transition effect when changing slide */
    section.slide {
      -moz-transition:    left 250ms linear 0s;
      -webkit-transition: left 250ms linear 0s;
      -ms-transition:     left 250ms linear 0s;
      transition:         left 250ms linear 0s;
    }

    /* Before */
    section.slide {
        left: -150%;
    }

    /* Now */
    section.slide[aria-selected] { left: 0; }

    /* After */
    section.slide[aria-selected] ~ section.slide { left: +150%; }


    /* Incremental elements */
    /* -------------------- */

    .incremental {
        opacity: 0.15;
    }
    .incremental[active] {
        opacity: 1;
    }

    .incremental > * {
        opacity: 1;
    }

    /* The current item */
    .incremental > *[aria-selected] {
        color: var(--fg-color);
        opacity: 1;
    }

    /* The items to-be-selected */
    .incremental > *[aria-selected] ~ * {
        opacity: 0.2;
    }

    .incremental-invisible {
        opacity: 0.05;
    }
    .incremental-invisible > *[aria-selected] ~ * {
        opacity: 0.05;
    }

}

/* --------------------- THIS PRESENTATION -------------------- */

.no-padding {
    padding: 0 !important;
}
.no-margin {
    margin: 0 !important;
}

.center {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.tiny {
    font-size: 50%;
}

.idee  {
    max-height: 3.2rem;
    width: auto;
}

.small-logo  {
    max-height: 3rem;
    width: auto;
}

.medium-logo {
    max-height: 6.5rem;
    width: auto;
}

.large-logo {
    max-height: 10rem;
    width: auto;
}

.extra-large-logo {
    width: 40rem;
    min-width: 15rem;
}

.margin-right {
    margin-right: 2rem;
}

/* ========== BACKGROUND SPPAS POUR LES SLIDES ========== */

@media screen {
    /* Appliquer le background uniquement aux <section class="slide"> qui n'ont PAS .no-background */
    section.slide:not(.no-background) {
        background: url("../images/background.jpg") no-repeat center center;
        background-size: cover;
    }
    /* Pour celles avec .no-background, on annule */
    section.slide.no-background {
        background: white;
    }
}