/* =========================================================
   Complément — Les mathématiques de la sphère
   (la sphère elle-même : sphere.css)
   ========================================================= */
.section .page.droite .texte + .etapes { margin-top: 0; }
.avec-image { flex: none; display: block; }
.avec-image::after { content: ""; display: block; clear: both; }
.avec-image .texte { margin: 0 0 calc(8 * var(--u)); }
.vignette-histoire { float: right; width: 46%; margin: calc(4 * var(--u)) 0 calc(6 * var(--u)) calc(14 * var(--u)); position: relative; }
.vignette-histoire img { display: block; width: 100%; height: auto; filter: drop-shadow(calc(2 * var(--u)) calc(3 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.3)); transition: transform .35s ease, box-shadow .35s ease; cursor: zoom-in; position: relative; }
.vignette-histoire:hover { z-index: 40; }
.vignette-histoire:hover img { transform: scale(1.9); transform-origin: right top; box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.vignette-histoire figcaption { font-size: calc(12.5 * var(--u)); line-height: 1.2; font-style: italic; color: var(--encre-douce); margin-top: calc(4 * var(--u)); }
.planche img { transition: transform .35s ease; }
.planche:hover { z-index: 40; position: relative; }
.planche:hover img { transform: scale(1.3); }
#duree .texte { margin-bottom: calc(6 * var(--u)); }
#duree .consigne { margin: calc(6 * var(--u)) 0 0; font-size: calc(14.5 * var(--u)); }
@media (max-width: 760px) { .vignette-histoire { float: none; width: 100%; margin: 0 0 8px; } .vignette-histoire:hover img, .planche:hover img { transform: none; } }
#histoire .texte { font-style: normal; }
.vignette-histoire.gauche { float: left; width: 22%; margin: calc(4 * var(--u)) calc(14 * var(--u)) calc(4 * var(--u)) 0; }
.vignette-histoire.gauche:hover img { transform-origin: left bottom; transform: scale(2.2); }