/* AJUSTEMENTS EN-TETE */
.datapreferences {
    /*display: none;*/
     margin-bottom: 0px !important;
}
 #region-main hr {
    display:none;
}
 #region-main {
    background-color: #f8f9fa;
}

/* CADRE CONTENEUR GENERAL */
 .card-deck, .inline-card-deck {
     margin: 10px 20px;
    /*gap: 5px;*/
}

/* CADRE UNITAIRE ELEMENT */
.card {
     flex: 1 0 24%; 
     padding-top: 16px;
     border:lightgrey 1px solid;
     flex-grow:0;
     margin-bottom:8px;
     min-width: 230px;
     box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.inline-card {
     display: block;
     padding-top: 8px;
     border:lightgrey 1px solid;
     margin-bottom:8px;
	 border-radius: 4px;
     box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}

/* MISE EN FORME CONTENU  */
.card-body {
     text-align:center;
}

.inline-card-body {
	display:block;
     text-align:left;
	 float:left;
}

/* GESTION DES IMAGES PORTRAIT  */
 .image-box {
     width: 200px;
     height: 250px;
     background-color: #000;
     display: flex;
     border: #ac25aa 8px solid;
     justify-content: center;
     align-items: center;
     margin: auto auto;
     overflow: hidden;
    /* cache le débordement éventuel */
    /*border-radius: 10px; */
}

 .inline-image-box {
     width: 100px;
     height: 120px;
     background-color: #000;
     float:left;
     border: #ac25aa 2px solid;
     justify-content: center;
     align-items: center;
     overflow: hidden;
     border-radius: 4px; 
	 margin: 8px 20px;
}

 .inline-image-box a {
	 display:block;
	 max-width: 100%;
     max-height: 100%;
 }

 .image-box img, .inline-image-box img  {
     max-width: 100%;
     max-height: 100%;
     object-fit: cover;
    /* garde les proportions sans couper */
}

/* DOMAINES EXPERTISES  */
 .domexpconteneur {
     --s: 1em;
    /* the ribbon size */
     --d: .4em;
    /* the depth */
     --c: .4em;
    /* the cutout part */
     padding: 0 calc(var(--s) + .9em) var(--d);
}
.inline-domexpconteneur {margin-bottom: 6px;}
.inline-domexp {}

 .domexp {
     border: #34ac7d6b 1px solid;
     border-top: none;
     background-color:#fff;
     padding: 8px 0 12px 0;
     margin-top:-8px;
     margin-bottom: 8px;
    /* border-radius: 0 0 3px 3px;
    */
     box-shadow: 1px 1px 4px rgba(0,0,0,0.1);
     position: relative;
}

/* RESTYLAGE BOUTON ACCEDER A LA FICHE et RETOUR */
 .card .btn,  .inline-card .btn {
     border: none;
     border-radius: unset;
}
 .card .btn:hover,  .inline-card .btn:hover {
     background-color: #167953;
     color: #fff;
}

 .btn-retour {
     background-color: #fff;
     border :#888 1px solid;
}

/* STYLE BANDEAU VIOLET  */
 .ribbon {
     font-size: 21px;
    /*font-weight: bold;*/
     color: #fff;
}
 .ribbon {
     --s: 1em;
    /* the ribbon size */
     --d: .4em;
    /* the depth */
     --c: .4em;
    /* the cutout part */
     padding: 0 calc(var(--s) + .5em) var(--d);
    /* line-height: 1.8;
    */
     background: conic-gradient(at left var(--s) bottom var(--d), #0000 25%,#0008 0 37.5%,#0004 0) 0 /50% 100% no-repeat, conic-gradient(at right var(--s) bottom var(--d), #0004 62.5%,#0008 0 75%,#0000 0) 100%/50% 100% no-repeat;
     clip-path: polygon(0 var(--d), var(--s) var(--d),var(--s) 0,calc(100% - var(--s)) 0,calc(100% - var(--s)) var(--d),100% var(--d),calc(100% - var(--c)) calc(50% + var(--d)/2),100% 100%,calc(100% - var(--s) - var(--d)) 100%,calc(100% - var(--s) - var(--d)) calc(100% - var(--d)),calc(var(--s) + var(--d)) calc(100% - var(--d)),calc(var(--s) + var(--d)) 100%,0 100%,var(--c) calc(50% + var(--d)/2));
     background-color: #ac25aa;
    /* the main color */
    /* width: fit-content; */
}
 .inline-ribbon {
     font-size: 20px;
	 font-weight:bold;
	 color: #8c1d8a;
}

/* SURCHARGE : l'affichage BDD en activité unique change le comportement du flex */
@media (min-width: 576px) {
  .card-deck .card {
     flex: 1 0 24%; 
flex-grow:0;
    margin-right: .25rem;
    margin-bottom: .5rem;
    margin-left: .25rem;
  }
}