/* Règles communes à toutes les pages : police, menu, séries d'images.
   Les valeurs reprennent celles mesurées sur l'ancien site (tout est proportionnel à la largeur d'écran). */

@font-face {
    font-family: 'krjst_goodregular';
    src: url('krjst_good-regular-webfont.woff2') format('woff2'),
         url('krjst_good-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body { background: #fff; }

/* Titre de page pour Google et les lecteurs d'écran, sans changer l'affichage (le menu et le logo font titre) */
.cache {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Menu ---------- */
.menu {
    position: fixed;
    left: 2.5vw;
    top: 12vw;
    z-index: 100000;
}
.menu a {
    position: relative;
    display: block;
    height: 2.5vw;
    color: #000 !important;
    text-decoration: none;
    font-family: 'krjst_goodregular' !important;
    font-weight: normal !important;
    font-size: 2vw !important;
    line-height: 2.2vw !important;
    white-space: nowrap;
}
.menu .cercle {
    position: absolute;
    left: -0.2vw;
    top: -0.28vw;
    width: 2.3vw;
    display: none;
    pointer-events: none;
}
.menu a.actif .cercle { display: block; }
.menu a.hors-menu { display: none; }

/* ---------- Séries (carrousels) ---------- */
.serie { padding-top: 3%; z-index: 0; }
.serie.premiere { padding-top: 12%; }
.serie.derniere { padding-bottom: 3%; }
.etroite .serie { padding-left: 10%; width: 85%; }
.large .serie { padding-left: 7%; width: 100%; }
.etroite .serie.resserree { padding-left: 11.3%; width: 78%; }
.serie img { height: auto; }
.serie .carousel-item { display: none; }
.serie .carousel-item.active { display: block; }

/* Flèches : placées d'après la géométrie mesurée (diapo à 10 % du bord, sur 80 % de la largeur ;
   rangée = diapo + 24 px de gouttière ; colonne vide de 1/12 ; photo sur 8/12 ou 9/12 moins 12 px de chaque côté).
   D'où : bord gauche de la photo = 16,667 % + 2 px ; bord droit = 70 % - 6 px (8/12) ou 76,667 % - 4 px (9/12).
   Sur l'ancien site, un HTML mal fermé faisait sortir les flèches de leur lien : elles tombaient collées
   à la photo, à pleine opacité ; on reproduit ce rendu. */
.serie .carousel-control-prev, .serie .carousel-control-next {
    width: 3.75%;
    right: auto;
    transform: none !important;
    opacity: 1 !important;
    align-items: flex-end;
    bottom: -1.3vw;
    touch-action: manipulation;
}
.serie .carousel-control-prev img, .serie .carousel-control-next img { width: 100% !important; }
.serie .carousel-control-prev { left: calc(13.854% + 2px); }
.serie.mise-8-3 .carousel-control-next { left: calc(70% - 5px); }
.serie.mise-9-2 .carousel-control-next, .serie.mise-9-2m .carousel-control-next { left: calc(76.667% - 3px); }
@media (max-width: 575.98px) {
    .serie.mise-9-2 .carousel-control-next { left: calc(70% - 5px); }   /* col-8 sur téléphone */
}

@media only screen and (max-width: 576px) and (orientation: portrait) {
    body { overflow-x: hidden; }
    .menu {
        position: absolute;
        left: 0;
        right: 0;
        top: 40.3vw;
        text-align: center;
    }
    .menu a { display: none; height: auto; font-size: 9vw !important; line-height: 2.2vw !important; }
    .menu a.courant { display: inline-block; }
    .menu .cercle { display: none !important; }

    .menu a.hors-menu { display: inline-block; }

    .serie { padding-top: 5%; transform: translateX(-18%); width: 144% !important; padding-left: 7% !important; }
    .serie.premiere { padding-top: 80%; }
    .serie.mise-9-2m { width: 130% !important; }
    .serie .carousel-control-prev, .serie .carousel-control-next { bottom: -2.6vw; }

    /* Accueil : menu complet à gauche, photo verticale à droite */
    .page-index .menu { position: fixed; left: 4.5vw; right: auto; top: 40vw; text-align: left; }
    .page-index .menu a { display: block; height: 6.8vw; font-size: 6vw !important; }
    /* l'ancien script affichait cette image (invisible) : elle réserve la place qui pousse la photo verticale */
    .page-index .pics_tapestries { display: block !important; }
}