.adapt-img-content {
    margin: auto;
    /* height: 600px; */
    /* max-width: 1373px; */
    max-width: 100%;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.adapt-img-content > div {
    display: block;
    min-height: 100%;
}

#imgServ {
    display: block;
    max-width: 100%;
    /* max-width: auto; */
    margin: auto;
    min-height: 100%;
    min-width: 100%;
}

.adapt-img-content h1.textinside {
    /* color: #fff; */
    color: purple;
    font-size: 30px;
    display: inline-block;
    position: absolute;
    top: 30%;
    right: 20%;
    padding: 12px 24px;
    /* background-color: rgba(0, 0, 0, 0.45); */
    background-color: rgba(255, 255, 255, 0.85);
    font-weight: normal;
    line-height: 40px;
}

#animMain {
    position: relative;
    width: 100%;
    margin: 70px 0;
    transform: scale(0.94)!important;
}

.fond {
    width: 100%;
    height: 100%;
    /* position: absolute; */
    top: 0;
    transform: scale(0, 1);
}

#animMain.on .fond {
    transform: scale(1, 1);
    transition: 2s all linear;
}

.fond img {
    width: 100%;
}

/* La largeur est explicite parce que styles.css pose img { max-width: 100% }.
   Sans elle, .caps est un absolu sans width ni right : sa largeur est calculée
   en shrink-to-fit, plafonnée par l'espace restant entre `left` et le bord droit
   du conteneur. L'image ne pouvait donc plus imposer sa taille et se pliait à
   ce reste — CPX (left: 98 %) tombait à ~22 px, soit 13 px une fois scale(0.6)
   appliqué, et CPLUS (left: 88 %) perdait un cinquième de sa taille. Une largeur
   explicite rend les pastilles indépendantes de leur position.

   Elle est en POURCENTAGE et non en pixels (correctif repris de CONCEPT+,
   07/08/2026) : les positions des pastilles, elles, sont en %. Avec une taille
   fixe, retrecir l'animation les rapprochait sans les reduire, et elles se
   chevauchaient. 12.4 % de 1373 px — la largeur de calibrage d'origine du
   template, encore visible commentee sur .adapt-img-content — redonne exactement
   les 170 px de depart. */
.caps {
    position: absolute;
    top: 0;
    left: 0;
    width: 12.4%;
    opacity: 0;
}
/* Les PNG font 170 x 170 en natif. styles.css pose bien img { max-width: 100% },
   qui empeche le debordement, mais pas le remplissage : sans width, l'image
   garderait ses 170 px tant que la pastille est plus large, et retrecirait
   toute seule ensuite. Le width la cale sur la pastille dans les deux sens. */
.caps img {
    display: block;
    width: 100%;
    box-shadow: -8px 8px 10px 2px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
}
.mainCaps {
    transform: scale(0.6);
    top: -100%;
    left: 50%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.8);
}

#animMain.on .mainCaps {
    position: absolute;
    top: 50%;
    transition: 2s all linear;
}

#animMain.ok .mainCaps {
    position: absolute;
    top: 50%;
    transition: 0.5s all linear;
}

#text {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    direction: rtl;
    text-align: center;
    width: 40%;
    font-size: 18px;
}
#animMain.detail #text::after {
    min-width: 0%;
    transition: 0.3s all linear 0.4s !important;
}

#text::after {
    content: "";
    min-width: 100%;
    height: 100%;
    z-index: 1;
    background-color: #fff;
    position: absolute;
    display: block;
    top: 0;
    transition: 0.3s all linear !important;
}

/* En mode détail, les pastilles non retenues sont masquées par la seule opacité :
   elles gardent leur surface de 170 px et continuent de recevoir les clics. Le
   `z-index: -10` ci-dessous était censé les enfouir sous le fond, mais la liste
   `#animMain.detail #SVT, …` plus bas leur repose `z-index: 0` avec une
   spécificité supérieure (deux ID contre un ID et deux classes) : il n'a jamais
   eu d'effet. Un clic « dans le vide » tombait donc une fois sur deux sur un
   disque invisible, et `select()` — voyant `.detail` déjà posé — ouvrait le lien
   de cette société au lieu de revenir à la galaxie.
   `pointer-events: none` laisse désormais le clic traverser jusqu'à `#animMain`,
   dont le `onclick="unselected()"` ramène à la galaxie. La pastille retenue, elle,
   reste cliquable : c'est ce second clic qui ouvre son lien. */
#animMain.detail .caps {
    opacity: 0 !important;
    transition: 0.5s all linear !important;
    z-index: -10;
    pointer-events: none;
}

#animMain.detail .caps.selected {
    pointer-events: auto;
}

#animMain.detail .mainCaps {
    opacity: 1 !important;
    left: 20%;
    transform: translate(-50%, -50%) scale(1);
    transition: 0.5s all linear;
    z-index: 2;
}

#CPLUS {
    top: 95%;
    left: 88%;
    transform: translate(-50%, -50%) scale(0.6);
}
#omiB {
    top: 96%;
    left: 31%;
    transform: translate(-50%, -50%) scale(0.6);
}
#CTECHNO {
    top: 82%;
    left: 62%;
    transform: translate(-50%, -50%) scale(0.6);
}
#DGP {
    top: 12%;
    left: 5%;
    transform: translate(-50%, -50%) scale(0.6);
}


#FBR {
    top: 3%;
    left: 69%;
    transform: translate(-50%, -50%) scale(0.6);
}

#OMIDEV {
    top: 86%;
    left: 4%;
    transform: translate(-50%, -50%) scale(0.6);
}

#OMISYS {
    top: 43%;
    left: 14%;
    transform: translate(-50%, -50%) scale(0.6);
}

#PDR {
    top: 70%;
    left: 20%;
    transform: translate(-50%, -50%) scale(0.6);
}
/* Sur ce site, c'est SERVITECH qui occupe le centre : la regle de positionnement
   passe donc a A2000, qui reprend l'emplacement de satellite laisse libre.
   SVT ne doit plus avoir de position propre, sinon son selecteur d'ID
   ecraserait le centrage de .mainCaps (voir la note plus bas). */
#A2000 {
    top: 17%;
    left: 40%;
    transform: translate(-50%, -50%) scale(0.6);
}

#RUNCIBLE {
    top: 59%;
    left: 83%;
    transform: translate(-50%, -50%) scale(0.6);
}
#CPX {
    top: 22%;
    left: 98%;
    transform: translate(-50%, -50%) scale(0.6);
}

/* Cette feuille a été reprise d'ARCHIV2000, où A2000 était la pastille centrale :
   elle n'y avait donc aucune position propre (c'est .mainCaps qui centre), et
   DTP occupait le satellite ci-dessous. Ici les rôles changent — offres.htm met
   SVT au centre — d'où l'échange plus haut : #SVT perd sa position, #A2000 prend
   l'emplacement de satellite libéré (17 % / 40 %). DTP, elle, reste où elle était.
   Sans cet échange, la règle #SVT (sélecteur d'ID) écrasait le left et l'échelle
   de .mainCaps (simple classe) : SERVITECH restait plantée en haut à gauche du
   fond au lieu du centre, tandis qu'A2000, privée de toute position, retombait
   sur .caps { top: 0; left: 0 } sans transform, donc dans le coin haut-gauche et
   à sa taille pleine. */
#DTP {
    top: 28%;
    left: 77%;
    transform: translate(-50%, -50%) scale(0.6);
}

#animMain.on #SVT,
#animMain.on #DTP,
#animMain.on #CPLUS,
#animMain.on #CTECHNO,
#animMain.on #omiB,
#animMain.on #CPX,
#animMain.on #DGP,
#animMain.on #FBR,
#animMain.on #OMIDEV,
#animMain.on #OMISYS,
#animMain.on #PDR,
#animMain.on #A2000,
#animMain.on #RUNCIBLE {
    opacity: 1;
    transition: 1s all linear 2s;
    z-index: 2;
}

#animMain.ok #SVT:hover,
#animMain.ok #DTP:hover,
#animMain.ok #CTECHNO:hover,
#animMain.ok #omiB:hover,
#animMain.ok #DGP:hover,
#animMain.ok #CPX:hover,
#animMain.ok #FBR:hover,
#animMain.ok #OMIDEV:hover,
#animMain.ok #OMISYS:hover,
#animMain.ok #CPLUS:hover,
#animMain.ok #RUNCIBLE:hover,
#animMain.ok #A2000:hover {
    transform: translate(-50%, -50%) scale(0.7);
    transition: 0.5s all linear;
    cursor: pointer;
}

#animMain.ok #SVT,
#animMain.ok #DTP,
#animMain.ok #CPLUS,
#animMain.ok #omiB,
#animMain.ok #CTECHNO,
#animMain.ok #CPX,
#animMain.ok #DGP,
#animMain.ok #FBR,
#animMain.ok #OMIDEV,
#animMain.ok #OMISYS,
#animMain.ok #PDR,
#animMain.ok #A2000,
#animMain.ok #RUNCIBLE {
    opacity: 1;
    transition: 0.5s all linear;
}

#animMain.detail #SVT,
#animMain.detail #DTP,
#animMain.detail #CPLUS,
#animMain.detail #omiB,
#animMain.detail #CTECHNO,
#animMain.detail #DGP,
#animMain.detail #FBR,
#animMain.detail #OMIDEV,
#animMain.detail #CPX,
#animMain.detail #OMISYS,
#animMain.detail #PDR,
#animMain.detail #A2000,
#animMain.detail #RUNCIBLE {
    z-index: 0;
}
#animMain.detail #SVT.selected,
#animMain.detail #DTP.selected,
#animMain.detail #CPLUS.selected,
#animMain.detail #omiB.selected,
#animMain.detail #CTECHNO.selected,
#animMain.detail #DGP.selected,
#animMain.detail #FBR.selected,
#animMain.detail #CPX.selected,
#animMain.detail #OMIDEV.selected,
#animMain.detail #OMISYS.selected,
#animMain.detail #PDR.selected,
#animMain.detail #A2000.selected,
#animMain.detail #RUNCIBLE.selected {
    opacity: 1 !important;
    top: 50% !important;
    /* right: 20% !important; */
    left: 80% !important;
    transform: translate(-50%, -50%) scale(1);
    transition: 0.5s all linear !important;
    z-index: 2;
}

@media all and (max-width: 640px) {
    .adapt-img-content {
        margin: auto;
        height: 600px;
        max-width: 100%;
        position: relative;
        overflow: hidden;
    }
    .adapt-img-content.env {
        height: auto !important;
    }
    h1.textinside {
        font-size: 25px !important;
    }
    .mainCaps {
        transform: translate(-50%, -50%) scale(0.35);
    }

    #animMain.detail .mainCaps {
        left: 15%;
        transform: translate(-50%, -50%) scale(0.5);
    }
    .animBloc {
        position: relative;
        margin: auto 0px;
    }

    /* les 70 px de respiration verticale sont calibrés pour une animation large :
       réduits à l'échelle du mobile, où l'animation ne fait plus que ~180 px de
       haut, ils représentaient les trois quarts de sa hauteur */
    #animMain {
        margin: 30px 0;
    }

    #text {
        font-size: 10px;
    }

    /* Sous 640 px les pastilles sont en plus reduites par le scale(0.25)
       ci-dessous, calibre a l'epoque ou .caps valait 170 px fixes. Depuis qu'elle
       est en pourcentage, les deux reductions se cumulent et les pastilles
       deviennent minuscules. On divise donc la largeur par ce meme 0.25
       (12.4 / 0.25 = 49.6) : la taille affichee redevient continue de part et
       d'autre du point de rupture. Si un scale mobile change, ce ratio doit
       changer avec lui. */
    .caps {
        width: 49.6%;
    }

    #CPLUS,
    #SVT,
    #DTP,
    #omiB,
    #CTECHNO,
    #DGP,
    #FBR,
    #CPX,
    #OMIDEV,
    #OMISYS,
    #PDR,
    #RUNCIBLE,
    #A2000 {
        transform: translate(-50%, -50%) scale(0.25);
    }
    #animMain.ok #SVT:hover,
    #animMain.ok #DTP:hover,
    #animMain.ok #CTECHNO:hover,
    #animMain.ok #omiB:hover,
    #animMain.ok #CPX:hover,
    #animMain.ok #DGP:hover,
    #animMain.ok #FBR:hover,
    #animMain.ok #OMIDEV:hover,
    #animMain.ok #OMISYS:hover,
    /* #animMain.ok #PDR:hover, */
    #animMain.ok #CPLUS:hover,
    #animMain.ok #RUNCIBLE:hover ,
    #animMain.ok #A2000:hover {
        transform: translate(-50%, -50%) scale(0.35);
    }
    #animMain.detail #SVT.selected,
    #animMain.detail #DTP.selected,
    #animMain.detail #CPLUS.selected,
    #animMain.detail #omiB.selected,
    #animMain.detail #CPX.selected,
    #animMain.detail #CTECHNO.selected,
    #animMain.detail #DGP.selected,
    #animMain.detail #FBR.selected,
    #animMain.detail #OMIDEV.selected,
    #animMain.detail #OMISYS.selected,
    #animMain.detail #PDR.selected,
    #animMain.detail #A2000.selected,
    #animMain.detail #RUNCIBLE.selected {
        left: 85% !important;
        transform: translate(-50%, -50%) scale(0.5);
    }
}