/*
 * public/css/carrousel.css
 *
 * Présentation du carrousel qui remplace masterslider. Écrit à la main, sans framework.
 *
 * ⚠️ Tant que le JavaScript n'a pas pris la main, la classe « carrousel-pret » est absente
 *    et TOUTES les diapositives restent visibles, empilées. C'est voulu : sans script, le
 *    visiteur voit le contenu en entier plutôt qu'une page vide. C'est aussi ce que voient
 *    les moteurs de recherche.
 */

.master-slider {
    position: relative;
    overflow: hidden;
}

/* Une fois le script en place, une seule diapositive à la fois. */
.master-slider.carrousel-pret > .ms-slide { display: none; }
.master-slider.carrousel-pret > .ms-slide.ms-slide-actif { display: block; }

.master-slider.carrousel-pret > .ms-slide img { max-width: 100%; height: auto; }

/* ── Les flèches ─────────────────────────────────────────────────────────────────── */
.carrousel-fleche {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: 28px;
    line-height: 44px;
    cursor: pointer;
    transition: background .15s ease;
}
.carrousel-fleche:hover,
.carrousel-fleche:focus { background: rgba(0, 0, 0, .75); outline: 2px solid #fff; }
.carrousel-precedente { left: 12px; }
.carrousel-suivante   { right: 12px; }

/* ── Les pastilles ───────────────────────────────────────────────────────────────── */
.carrousel-pastilles {
    position: absolute;
    left: 0; right: 0; bottom: 12px;
    z-index: 5;
    text-align: center;
    line-height: 0;
}
.carrousel-pastille {
    width: 11px; height: 11px;
    margin: 0 4px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.carrousel-pastille:hover  { background: rgba(255, 255, 255, .85); }
.carrousel-pastille.active { background: #fff; transform: scale(1.3); }
.carrousel-pastille:focus  { outline: 2px solid #fff; outline-offset: 2px; }

/* Sur un petit écran, les flèches gênent plus qu'elles n'aident. */
@media (max-width: 600px) {
    .carrousel-fleche { width: 34px; height: 34px; font-size: 22px; line-height: 34px; }
    .carrousel-precedente { left: 4px; }
    .carrousel-suivante   { right: 4px; }
}

/* Un visiteur qui a demandé moins d'animations ne subit pas de transition. */
@media (prefers-reduced-motion: reduce) {
    .carrousel-fleche, .carrousel-pastille { transition: none; }
}

/* ── Carrousels Bootstrap imbriqués (.myCarousel) ──────────────────────────────────
   Même principe : tant que le script n'a pas posé « carrousel-pret », tout reste
   visible et empilé. */
.myCarousel { position: relative; overflow: hidden; }
.myCarousel.carrousel-pret > .carousel-inner > .item { display: none; }
.myCarousel.carrousel-pret > .carousel-inner > .item.ms-slide-actif { display: block; }

/* ── Reprise de la main sur masterslider.css ───────────────────────────────────────
 *
 * masterslider.css pose « visibility: hidden » sur .master-slider et « position:
 * absolute » sur chaque .ms-slide. C'était son JavaScript qui révélait le carrousel et
 * lui donnait une hauteur. Sans lui, le bloc mesurait 0 pixel et n'apparaissait pas :
 * mesuré au navigateur le 21/09/2026, msHauteur = 0 alors que l'image faisait 364 px.
 *
 * Ces règles sont plus spécifiques que les siennes (deux classes au lieu d'une) et sont
 * chargées après, donc elles l'emportent dans les deux cas.
 */
.master-slider.carrousel-pret { visibility: visible; }

.master-slider.carrousel-pret > .ms-slide.ms-slide-actif {
    position: relative;      /* et non absolute : la diapositive donne sa hauteur au bloc */
    left: auto;
    top: auto;
    width: 100%;
}

/* Le conteneur de masterslider s'effondrait lui aussi. */
.ms-partialview-template { min-height: 0; }

/* ── Hauteur du carrousel ──────────────────────────────────────────────────────────
 *
 * Sans limite, l'image s'étire sur toute la largeur de l'écran : sur un écran large elle
 * occupait 776 px de haut, soit presque toute la fenêtre avant de voir le moindre texte.
 * Retour d'André le 22/09/2026 : « image trop grosse ».
 *
 * On borne l'IMAGE, pas la diapositive : la diapositive de l'accueil contient aussi, sous
 * l'image, un carrousel imbriqué avec le bandeau « SYSTÈME DE GESTION DE LABORATOIRE ».
 * Borner la diapositive le ferait disparaître.
 *
 * clamp() : jamais moins de 220 px, jamais plus de 420 px, et 38 % de la hauteur de la
 * fenêtre entre les deux. Le cadrage est géré par object-fit, donc l'image n'est jamais
 * déformée : elle est recadrée sur son centre.
 */
.master-slider.carrousel-pret > .ms-slide.ms-slide-actif img {
    width: 100%;
    height: clamp(220px, 38vh, 420px);
    object-fit: cover;
    object-position: center;
}

/* Les images du carrousel imbriqué ne sont pas des visuels de fond : on leur rend
   leur taille naturelle. */
.master-slider.carrousel-pret .myCarousel img,
.myCarousel.carrousel-pret img {
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: initial;
}