@media screen and (min-width: 800px) {
/* Ordinateur */
    section {
        --duration: 500ms;
    }
    .diapo-table {
        margin-left:auto;
        margin-right:auto;
        border-spacing:25px;
    }
    .diapo-picture {
        width:600px;
        height:400px;
        border-radius: 30px;
        object-fit: cover;
        object-position: left top;
        animation-direction: normal;
        animation-duration: 1s;
        animation-iteration-count: var(--duration);
        animation-name: slidein;
    }
    @keyframes slidein {
        from {
          transform: translateX(600px);
          width: 0px;
        }
        to {
          transform: translateX(0px);
          width: 600px;
        }
    }
    .diapo-picture-vertical {
        width:1200px;
        height:300px;
        border-radius: 30px;
        object-fit: cover;
        object-position: left top;
        animation-direction: normal;
        animation-duration: 1s;
        animation-iteration-count: var(--duration);
        animation-name: slideinvert;
    }
    @keyframes slideinvert {
        from {
          transform: translateX(1200px);
          width: 0px;
        }
        to {
          transform: translateX(0px);
          width: 1200px;
        }
    }
    .diapo-picture-frame {
        width: 604px;
        height: 404px;
        text-align: left;
        vertical-align: top;
        border-style: solid;
        border-color:black;
        border-width: 2px;
        border-radius: 30px;
        padding: 0px;
    }
    .diapo-picture-frame-vertical {
        width: 1204px;
        height: 304px;
        text-align: left;
        vertical-align: top;
        border-style: solid;
        border-color:black;
        border-width: 2px;
        border-radius: 30px;
        padding: 0px;
    }
    .diapo-text-frame, .diapo-text-frame-small {
        width: 604px;
        height: 404px;
        color:blue;
        background-color:aliceblue;
        font-size:x-large;
        text-align: center;
        vertical-align: middle;
        border-style: solid;
        border-color:black;
        border-width: 2px;
        border-radius: 30px;
        padding: 10px;
        animation-duration: var(--duration);
        animation-name: fadein;
    }
    .diapo-text-frame {
        font-size:x-large;
    }
    .diapo-text-frame-small {
        font-size:large;
    }
    .diapo-text-frame-vertical {
        width: 1204px;
        height: 254px;
        color:blue;
        background-color:aliceblue;
        font-size:x-large;
        text-align: center;
        vertical-align: middle;
        border-style: solid;
        border-color:black;
        border-width: 2px;
        border-radius: 30px;
        padding: 10px;
        animation-duration: var(--duration);
        animation-name: fadein;
    }
    @keyframes fadein {
        from {
          opacity: 0%;
        }
        to {
          opacity: 100%
        }
    }
    .diapo-text-link:link {
        color: blue;
        background: aliceblue;
        text-decoration: underline;
    }
    .diapo-text-link:visited {
        background: aliceblue;
        color: blue;
        text-decoration: underline;
    }
    .diapo-text-link:hover {
        color: white;
        background: #000080;
    }
    .diapo-text-link:active {
        background: white;
        color: #000080;
        text-decoration: none;
    }
    .diapo-button-frame
    {
        width: auto;
        height: auto;
        border: none;
    }
    .diapo-button
    {
        width: 100%;
        height: auto;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 80px;
        text-align:center;
        color: rgba(0, 0, 0, 0.5);
        background-color:  rgba(255, 255, 255, 0);
    }
    .diapo-button:hover
    {
        color: rgba(0, 0, 0, 1);
    }
    .diapo-button-disabled
    {
        width: 100%;
        height: auto;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 80px;
        text-align:center;
        color: rgba(0, 0, 0, 0.2);
        background-color:  rgba(255, 255, 255, 0);
    }
    .diapo-button-disabled:hover
    {
        color: rgba(0, 0, 0, 0.2);
    }
}
@media screen and (max-width: 800px) {
/* Smartphone*/
    .diapo-table {
        margin-left:auto;
        margin-right:auto;
        border-spacing:10px;
    }
    .diapo-picture {
        border-radius: 15px;
        width: 100%;
        height: 100%;
    }
    .diapo-picture-vertical {
        border-radius: 15px;
        width: 100%;
        height: auto;
        display: block;
    }
    .diapo-picture-frame {
        width: 40%;
        height: 40%;
        text-align: center;
        vertical-align: middle;
        border-style: solid;
        border-color:black;
        border-width: 2px;
        border-radius: 15px;
        padding: 0px;
    }
    .diapo-picture-frame-vertical {
        width: 80%;
        height: auto;
        text-align: center;
        vertical-align: middle;
        border-style: solid;
        border-color:black;
        border-width: 2px;
        border-radius: 15px;
        padding: 0px;
    }
    .diapo-text-frame, .diapo-text-frame-small {
        width: 40%;
        height: 40%;
        color:blue;
        background-color:aliceblue;
        text-align: center;
        vertical-align: middle;
        border-style: solid;
        border-color:black;
        border-width: 2px;
        border-radius: 15px;
        padding: 5px;
    }
    .diapo-text-frame {
        font-size:medium;
    }
    .diapo-text-frame-small {
        font-size:small;
    }
    .diapo-text-frame-vertical {
        width: 80%;
        height: auto;
        color:blue;
        background-color:aliceblue;
        font-size:medium;
        text-align: center;
        vertical-align: middle;
        border-style: solid;
        border-color:black;
        border-width: 2px;
        border-radius: 15px;
        padding: 5px;
        overflow-wrap: anywhere;
    }
    .diapo-text-link:link {
        color: blue;
        background: aliceblue;
        text-decoration: underline;
    }
    .diapo-text-link:visited {
        background: aliceblue;
        color: blue;
        text-decoration: underline;
    }
    .diapo-text-link:hover {
        color: white;
        background: #000080;
    }
    .diapo-text-link:active {
        background: white;
        color: #000080;
        text-decoration: none;
    }
    .diapo-button-frame
    {
        width: 10%;
        height: auto;
        border: none;
    }
    .diapo-button
    {
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size:40px;
        text-align:center;
        color: rgba(0, 0, 0, 0.5);
        background-color:  rgba(255, 255, 255, 0);
    }
    .diapo-button:hover
    {
        color: rgba(0, 0, 0, 1);
    }
    .diapo-button-disabled
    {
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 40px;
        text-align:center;
        color: rgba(0, 0, 0, 0.2);
        background-color:  rgba(255, 255, 255, 0);
    }
    .diapo-button-disabled:hover
    {
        color: rgba(0, 0, 0, 0.2);
    }
}