/* { outline: 1px dashed hsla(0, 0%, 0%, .25);}*/

.material-icons { font-size: 20px; }

.entete-etalon { 
    text-align: center;
    margin: 0 auto var(--resp) auto;
    display: flex;
    flex-direction: column;
    align-items: center
}
.entete-etalon h1 {
    font-size: clamp(1.1rem, 3vw, 2.5rem)
}
.entete-etalon h2 {
    font-size: clamp(1rem, 3vw, 1.5rem)
}

.list-other { display: grid; grid-template-columns: 1fr 1fr;  grid-gap: var(--ec-3); margin-bottom: var(--ec-1);}
.list-other > div div  { font-size: 1.4em; font-weight: bold; padding: var(--ec-3) 0 var(--ec-1) 0; text-align: center; }
.list-other > div ul { list-style: none; } 
.list-other > div ul li a { display: block; margin-bottom: var(--size-sm); font-weight: 600; padding: var(--ec-3); border: 1px solid var(--gr-1); border-radius: 0.5rem; transition: background-color .2s ease-in-out; }
.list-other > div ul li a:hover { background-color : var(--gr-0) }

.gal {
    display: flex;
    color: var(--color-1); 
    aspect-ratio: 16/9;
    max-height: 700px;
    overflow: hidden;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    position: relative;
    align-items: center;
    justify-content: center
}
.gal-bg {
    z-index: 0;
    -moz-filter: blur(.8rem);
    -ms-filter: blur(.8rem);
    -o-filter: blur(.8rem);
    -webkit-filter: blur(.8rem);
    background-position: center;
    position: absolute;
    top: -50px;
    bottom: -50px;
    right: -50px;
    left: -50px;
    opacity: .5;
    background-size: cover;
    background-repeat: no-repeat
}
.gal-only {
    z-index: 1;
    object-fit: contain;
    height: 100%; 
}
.gal-bg, .gal img, .gal-item, .gal .gal-princ {
    border-radius: var(--radius);
    height: 100%; 
}
.gal-1, .gal-2, .gal-3, .gal-4, .gal-5, .gal-6 {
    display: grid;
    grid-gap: 1rem;
    grid-auto-rows: 1fr 1fr;
    grid-auto-columns: 1fr 1fr;
    justify-items: center
    
}
.gal-item {
    width: 100%;
    height: 100%;
    overflow: hidden
}
.gal-item img {
    width: 100%;
    height: 100%;
    object-fit: cover
}
.gal-1 div:nth-child(n+1) {
    grid-column: 1;
    grid-row: 1
}
.gal-1 div:nth-child(n+2) {
    grid-column: 2;
    grid-row: 1
}
.gal-2 div:nth-child(n+1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3
}
.gal-2 div:nth-child(n+2) {
    grid-column: 3 / 4;
    grid-row: 1
}
.gal-2 div:nth-child(n+3) {
    grid-column: 3 / 4;
    grid-row: 2
}
.gal-3 div:nth-child(n+1) {
    grid-column: 1 / 4;
    grid-row: 1 / 3
}
.gal-3 div:nth-child(n+2) {
    grid-column: 4 / 6;
    grid-row: 1
}
.gal-3 div:nth-child(n+3) {
    grid-column: 4 / 4;
    grid-row: 2
}
.gal-3 div:nth-child(n+4) {
    grid-column: 5 / 5;
    grid-row: 2
}
.gal-4 div:nth-child(n+1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3
}
.gal-4 div:nth-child(n+2) {
    grid-column: 3 / 4;
    grid-row: 1 / 2
}
.gal-4 div:nth-child(n+3) {
    grid-column: 4 / 5;
    grid-row: 1 / 2
}
.gal-4 div:nth-child(n+4) {
    grid-column: 3 / 4;
    grid-row: 2 / 2
}
.gal-4 div:nth-child(n+5) {
    grid-column: 4 / 5;
    grid-row: 2 / 2
}
.gal-5 div:nth-child(n+1) {
    grid-column: 1 / 3;
    grid-row: 1 / 4
}
.gal-5 div:nth-child(n+2) {
    grid-column: 3 / 4;
    grid-row: 1 / 2
}
.gal-5 div:nth-child(n+3) {
    grid-column: 3 / 4;
    grid-row: 2 / 3
}
.gal-5 div:nth-child(n+4) {
    grid-column: 3 / 4;
    grid-row: 3 / 4
}
.gal-5 div:nth-child(n+5) {
    grid-column: 4 / 5;
    grid-row: 1 / 3
}
.gal-5 div:nth-child(n+6) {
    grid-column: 4 / 5;
    grid-row: 3 / 3
}
.gal-6 div:nth-child(n+1) {
    grid-column: 2 / 5;
    grid-row: 1 / 4
}
.gal-6 div:nth-child(n+2) {
    grid-column: 1 / 2;
    grid-row: 1 / 2
}
.gal-6 div:nth-child(n+3) {
    grid-column: 1 / 2;
    grid-row: 2 / 3
}
.gal-6 div:nth-child(n+4) {
    grid-column: 1 / 2;
    grid-row: 3 / 4
}
.gal-6 div:nth-child(n+5) {
    grid-column: 5 / 6;
    grid-row: 1 / 2
}
.gal-6 div:nth-child(n+6) {
    grid-column: 5 / 6;
    grid-row: 2 / 3
}
.gal-6 div:nth-child(n+7) {
    grid-column: 5 / 6;
    grid-row: 3 / 4
}
.gal .gal-princ {
    display: flex;
    justify-content: center;
    transition: .15s ease-in-out;
    overflow: hidden;    
    height: 100%;
    position: relative; 
    width: -webkit-fill-available;
    width: -moz-available;
}
.gal .gal-princ a .count {
    font-size: .8rem;
    z-index: 5;
    position: absolute;
    border-radius: var(--radius-1) 0 0 0;
    padding: .5rem 1rem;
    background-color: var(--rev-white);
    bottom: 0rem;
    right: 0rem
}
.gal .gal-princ a img {
    object-fit: cover;
    width: 100%;  
} 
.gal .sans {
    transition: .15s ease-in-out;
    overflow: hidden;
    display: flex;
    max-height: 250px;
    width: 100%;
    position: relative;
    background: url(/media/sans.png) no-repeat 50% 50%;
    background-color: var(--gr-0);
    background-size: 120px
}
.gal:after {
    display: none;
    padding: .6rem;
    position: absolute;
    font-weight: 700;
    letter-spacing: -.01rem;
    font-size: .9rem;
    left: 1rem;
    bottom: 1rem;
    content: "Voir toutes les images";
    background-color: var(--rev-white);
    box-shadow: 0 0 6px rgb(0 0 0 / 25%);
    text-align: center;
    border-radius: var(--radius-1)
}
.gal:hover .gal-princ:after {
    box-shadow: 0 0 6px rgba(0, 0, 0, .95);
    transition: .15s ease-in-out
}
.fiche-signaler {
    color: var(--signaler) !important;
    border: 1px solid var(--signaler);
    font-size: .9rem;
    border-radius: var(--radius-1);
    padding: .5rem;
    display: block;
    text-align: center;
    max-width: 250px;
    margin: auto
}
.gridifich {
    display: flex;
    gap: var(--ec-1);
    margin-bottom: var(--ec-1);
    justify-content: space-between;  
}
.gridifich .it1 {
    flex: 1
}
.gridifich .it2 {
    width: max(400px, 35%)
}
.gal .gal-princ a {
    display: block; 
}

.gal .gal-item a {
    display: contents; 
}

.gal .gal-princ a img, .gal .gal-item a img {
    transition: .2s ease-in-out
}

.gal-item a .count {
    display: none
}
.mot {
    position: relative;
    line-height: 1.3rem; 
    margin: var(--ec-1) 0 0 0; 
}

.mot-2 {
    position: relative;
    line-height: 1.3rem; 
    word-break: break-word; 
}

.sexe {
    color: var(--male);
    font-weight: 700
}
.sexe.femelle {
    color: var(--femelle)
}
 
.saillie-etoile .list-etoile {
    justify-content: center
}
.saillie-etoile {
    margin-bottom: .5rem
}
.fiche-contact {
    height: 100%;
    color: var(--color-3);
    border-left: 1px dotted var(--gr-1);
    padding: 0 0 0 var(--size-lg); 

}
.fiche-contact .int {
    font-weight: 700;
    margin-bottom: var(--size-xs);
    color: var(--color-1);
}

.fiche-contact .ficpro {
    font-weight: 700;
    color: var(--color-2);
    font-size: 1.2rem;
    display: block;
    margin-bottom: 1rem
}


.btn-msg { transition: .2s ease-in-out ; display: flex; align-items: center; gap: .5rem; background-color: var(--cta); color: #FFF !important; justify-content: center; font-size: 1.2rem; text-align: center;  border-radius: .3rem; fill: var(--rev-white); font-weight: bold  }
.btn-msg:hover { background-color: var(--cta-h);  }
.btn-msg svg { fill : #FFF; height: 24px; }

.fiche-contact .int, .fiche-contact .ficpro { text-align: center;} 
   

.fiche-contact .prix {
    flex-direction: column;
    flex-grow: 1;
    display: flex; 
    min-height: 50px;
    flex-shrink: 0;
    text-align: center;
    background-color: var(--rev-white);
    border-radius: var(--radius-1);
    align-content: center;
    align-items: center;
    justify-content: center;
    width: calc(50% - .5rem);
    border: 1px solid var(--gr-1);
}
.fiche-contact .prix .okpri {
    font-size: 1.4rem;
    font-weight: bold;
    display: block
}
.fiche-contact .prix .nc {
    font-size: 1rem
}
.fiche-contact .place {
    display: flex;
    align-items: center;
    column-gap: .5rem;
    color: var(--address)
}
.fiche-contact .place span {
    display: flex;
    font-size: 16px
}
.cont, .plan, .phone {
    flex-grow: 1;
    font-weight: bold;
    display: flex;
    align-items: center;
    color: var(--rev-white) !important;
    justify-content: center;
    font-size: 1rem; 
    text-align: center;
    border-radius: var(--radius-1)
}
.openclose {
    display: flex;
    flex-direction: column;
    padding: .75rem 0;
    color: var(--rev-black);
    border-radius: var(--radius);
    border: 1px solid var(--gr-1);
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700
}
.cont {
    background-color: var(--cta); width: calc(50% - 0.5rem); padding: 1rem 0;
}
.plan {
    background-color: #a91b5f
}
.phone {
    background-color: #6a0938
}
.dark .plan, .dark .phone {
    background-color: #FFF
}
.nbimg {
    font-weight: 700; 
    background-color: hsl(0deg 0% 100% / 60%);
    cursor: pointer;
    position: absolute;
    bottom: .75rem;
    color: var(--rev-black);
    width: 180px;
    text-align: center;
    padding: .5rem 0;
    z-index: 5;
    font-size: .9rem;
    border-radius: var(--radius-1);  
    left: calc(50% - 80px);
    width: 160px;
}
.dark .nbimg {
    background-color: hsl(207deg 13% 16% / 82%)
}
.uk-position-medium {
    color: #FFF !important
}
.nbimg.affmob {
    display: none
}
.share-item {
    cursor: pointer;
    border-radius: var(--radius-1);
    display: inline-flex;
    flex-wrap: wrap; 
    border: 1px solid var(--gr-1); 
    color: var(--rev-black);
    font-size: 1rem;
    font-weight: 700;
    padding: 1rem;
    text-align: center;
    position: relative;
    justify-content: center;
    width: 100%;
} 

.share-item > span { display: flex; gap: .5rem; align-items: center; }

.site-prod { margin-bottom: var(--size-md); display: block; text-align: center; font-size: 1.1em; font-weight: bold; }
.site-prod span { display: block; font-size: .8rem; font-weight: normal; color: var(--color-1); margin-bottom: .125rem}

.modal-header {
    display: none;
    position: absolute;
    top: 0;
    right: 0; 
    color: #dd8f8f;
}
.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: #fff
}
.modal-content {
    width: 100%;
    margin: auto;
    padding: 1rem;
    border-radius: var(--radius);
    animation-name: animatetop;
    animation-duration: 0.4s
}
.modal-body ul {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: space-between
}
.modal-body ul li {
    width: 30%;
    cursor: pointer;
    display: flex;
    height: 40px;
    border: 1px solid var(--gr-1);
    border-radius: var(--radius);
    align-items: center;
    justify-content: center
}
.modal-body ul li:hover {
    border-color: var(--gr-3);
    border-radius: var(--radius);
    align-items: center;
    justify-content: center
}
.modal-body ul li a {
    font-size: .9rem;
    color: var(--rev-black)
}
.modal-body ul li a:first-letter {
    text-transform: uppercase
}
.openclose span:first-child {
    font-size: .9rem
}
.openclose span:last-child {
    font-size: 1.75rem;
    color: var(--address);
    text-transform: uppercase;
    font-weight: 700
}
.annonce-flexi {
    display: flex;
    justify-content: space-between
}
.gridiserv .st {
    color: var(--toilpens);
    font-weight: 700; 
}
.gridiserv .action {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    flex-wrap: wrap
}
.gridiserv .gs-adresse {
    flex-grow: 1
}
.gridiserv .gal-item {
    display: none
}
.gridiserv .list-img a.gal-princ {
    height: 300px;
    width: 100%;
    max-width: 100%;
    border-radius: 1rem
}
.gridiserv-h1 h1 {
    font-size: clamp(1.1rem, 3vw, 1.6rem);
}
.gridiserv-h1 h1:first-letter {
    text-transform: uppercase
}
.gridiserv .list-img-vide {
    min-height: 200px;
    border-radius: var(--radius-1);
    margin: 1rem 0;
    background: hsla(0, 0%, 80%, .2) url(/media/sans-service.png) no-repeat 50% 50%;
    background-size: 30%
}
.gridiserv .list-img {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem; 
}
.gridiserv .list-img a {
    display: block;
    width: 90px;
    height: 90px;
    overflow: hidden;
    border-radius: 50%
}
.gridiserv .list-img a img {
    height: 100%;
    width: 100%;
    object-fit: cover
}
.gridiserv .list-img a.gal-princ img {
    width: 100%;radius: var(--radius-1);
    max-width:100%; 
    height: 340px;
    border-radius: 1rem
}
.liste-paiement, .liste-services {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap
}
.liste-paiement .box-paiement {
    border: 1px solid var(--gr-1);
    padding: .5rem;
    border-radius: var(--radius);
    text-align: center;
    min-width: 30%
}
.liste-paiement .box-paiement span {
    display: block;
    margin-bottom: .5rem
}
.liste-services span {
    border: 1px solid var(--gr-1);
    display: inline-block;
    padding: .5rem;
    border-radius: var(--radius);
    text-align: center;
    min-width: 7rem
}
.liste-services span:first-letter {
    text-transform: uppercase
}
a.gs-phone, a.gs-plan, a.gs-contact, span.gs-plan {
    font-weight: 700;
    display: flex;
    border-radius: var(--radius);
    height: 80px;
    flex-shrink: 0;
    width: 30%;
    align-items: center;
    padding: 1rem;
    flex-direction: column
}
a.gs-phone, a.gs-plan, a.gs-contact, span.gs-plan {
    color: var(--rev-white);
    background-color: var(--toilpens)
}
a.gs-phone:hover, a.gs-plan:hover, a.gs-contact:hover, span.gs-plan:hover {
    background-color: var(--toilpens-h)
}
.gs-ouvert {
    border: 2px solid var(--address);
    color: var(--address);
    width: 100%;
    border-radius: var(--radius-1);
    align-items: center;
    padding: 1rem 0;
    font-weight: 700;
    display: inline-flex;
    justify-content: center;
    font-size: 1.2rem
}
.gs-phone {
    background: var(--color-2) url(/media/i-tel.png) no-repeat 50% 70%;
    background-size: 20px 20px
}
.gs-plan {
    background: var(--color-2) url(/media/i-map.png) no-repeat 50% 70%;
    background-size: 20px 20px
}
.gs-contact {
    background: var(--color-2) url(/media/i-enveloppe.png) no-repeat 50% 70%;
    background-size: 20px 20px
}
.gs-adresse div:first-child {
    margin-bottom: .5rem
}
.gs-adresse-nom {
    font-weight: 900;
    margin-bottom: .5rem;
    text-transform: uppercase
}
.gs-phone span, .gs-plan span {
    text-align: center
}
.gridiserv {
    display: grid;
    grid-template-columns: 1fr max(350px, 35%);
    gap: var(--size-lg);
    justify-content: space-between;
    margin-bottom: var(--size-md);
    line-height: 1.2rem;
}
.gridiserv.okcadre {
    padding: 1rem;
    border: 1px solid var(--gr-1);
    border-radius: 1rem
}
.gridiserv.okcadre2 {
    padding: 1rem;
    border-radius: var(--radius-1);
    background-color: var(--bgtoilpens)
}
.gridiserv .it1 {
    order: 0
}
.gridiserv .it2 .regroup {
    display: flex;
    gap: 1rem;
    flex-grow: 1;
    flex-wrap: wrap
}
.gridiserv .it2 .cont {
    width: 100%
}
.fiche-contact .cont:hover {
    background-color: var(--cta-h)
}
.liste-1 {
    display: grid;
    grid-gap: .5rem;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    color: var(--color-3);
    margin-bottom: var(--resp)
}
.liste-1 li { 
    padding: var(--size-md);
    border-radius: var(--radius);
    background-color: var(--gr-0);
    line-height: normal;
}
.liste-1 li div:first-child, .tares div:first-child {
    font-weight: 700;
    margin-bottom: var(--size-xs);
    color: var(--color-1)
}
.tares {
    border-radius: var(--radius);
    margin-bottom: var(--resp);
    color: var(--color-1)
}
.tares-list {
    gap: .5rem;
    display: flex;
    flex-wrap: wrap;
    padding-top: .25rem;
}
.tares span {
    display: block;
    
}
.liste-2 {
    margin-bottom: var(--resp);
    display: grid;
    grid-gap: .5rem;
    grid-template-columns: 1fr 1fr 1fr;
    color: var(--color-3)
}
.liste-2 li {
    padding: var(--size-md);
    border-radius: var(--radius);
    border: 1px solid var(--gr-1);
    color: var(--color-1)
}
.liste-2 li div {
    font-weight: 700;
    margin-bottom: var(--size-sm);
    color: var(--color-1)
}
.liste-3 {
    margin-bottom: var(--resp);
    display: grid;
    grid-gap: .5rem;
    grid-template-columns: 1fr 1fr;
    color: var(--color-3)
}
.liste-3 li {
    padding: var(--size-md);
    border-radius: var(--radius);
    border: 1px solid var(--gr-2);
    color: var(--color-2)
}
.liste-3 li div {
    font-weight: 700;
    margin-bottom: var(--size-sm);
    color: var(--color-1)
}
.liste-pedifich {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
    grid-column-gap: 1rem
}
.liste-3 {
    display: grid;
    grid-gap: .5rem
}
.liste-3 .box-titre {
    margin-bottom: var(--size-sm);
    display: flex;
    color: var(--color-3);
    background-color: var(--rev-white);
    padding: var(--size-md);
    border-radius: var(--radius)
}
.liste-3 .box-titre .int {
    font-weight: 700;
    margin-bottom: var(--size-sm);
    color: var(--color-1)
}
.liste-3 .box-titre .date {
    color: var(--color-2)
}
.liste-3 .box-titre .imgtitre {
    min-width: 5rem;
    height: 4rem;
    margin-right: var(--size-md);
    display: block;
    background-color: var(--gr-0);
    border-radius: var(--radius);
    overflow: hidden
}
.liste-3 .box-titre a img {
    object-fit: cover;
    width: 100%;
    height: 100%
}
.liste-annee {
    display: flex;
    flex-wrap: wrap;
    column-gap: .5rem
}
.liste-annee a {
    margin-bottom: var(--size-md);
    cursor: pointer;
    color: var(--rev-black);
    height: 4rem;
    width: 4rem;
    border: 2px solid var(--gr-2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}
.liste-annee a:hover {
    height: 4rem;
    width: 4rem;
    border: 2px solid var(--male);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}
.liste-annee a.select {
    background-color: var(--rev-white)
}
.liste-annee a:hover.select {
    border: 2px solid var(--gr-2)
}
.pedifich {
    padding: var(--size-md);
    border-radius: var(--radius);
    border: 1px solid var(--gr-2);
    margin-bottom: 1rem
}
.pedifich .nom {
    display: block;
    margin-bottom: var(--size-md);
    color: var(--color-1)
}
.pedigree-box .nom span {
    display: block;
    color: var(--rev-black)
}
.pedigree-box.male .p-lien {
    color: var(--male)
}
.pedigree-box.femelle .p-lien {
    color: var(--femelle)
}
.pedifich .type {
    margin-bottom: var(--size-xs)
}
.pedi-fond {
    border-radius: var(--radius);
    padding: var(--resp);
    background-color: var(--gr-0)
}
.pedi-grid {
    display: flex
}
.pedi-grid .gpbox {
    display: flex;
    width: 40%;
    flex-direction: column;
    gap: .5rem;
    flex-grow: 1;
    justify-content: center
}
.pedi-grid div {
    border-radius: var(--radius)
}
.gal.gal-0 .gal-princ { background-image: none !important;}

.gal-0 {
    background-size: 18%
}

.gal.gal-0.sans { max-height: 280px !important; }

.pedifich .img-p {
    overflow: hidden;
    border-radius: var(--radius);
    height: 12rem;
    width: 40%
}
.pedifich .img-p img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    max-width: 330px
}
.pedifich .arbo {
    min-width: 2rem;
    position: relative;
    flex-grow: 1
}
.pedifich .arbo span {
    display: block;
    position: relative;
    width: 100%;
    height: 100%
}
.pedifich .arbo span:after {
    position: absolute;
    display: block;
    width: 50%;
    content: " ";
    height: .25rem;
    background-color: var(--gr-1);
    top: 50%;
    left: 0
}
.pedifich .arbo span:before {
    position: absolute;
    display: block;
    height: 50%;
    content: " ";
    width: .25rem;
    background-color: var(--gr-1);
    top: 25%;
    left: 50%
}
.pedifich .arbo:after {
    position: absolute;
    display: block;
    width: 50%;
    content: " ";
    height: .25rem;
    background-color: var(--gr-1);
    top: 25%;
    right: 0
}
.pedifich .arbo:before {
    position: absolute;
    display: block;
    width: 50%;
    content: " ";
    height: .25rem;
    background-color: var(--gr-1);
    bottom: 25%;
    right: 0
}
.pedifich .gp .img-gp {
    flex-shrink: 0;
    background-color: var(--gr-0);
    width: 5rem;
    height: 5rem;
    overflow: hidden
}
.pedifich .gp .img-int {
    font-size: .9rem
}
.pedifich .gp .img-gp img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    max-width: 100px
}
.pedifich .gp {
    display: flex;
    color: var(--male);
    gap: .5rem;
    align-items: center;
    height: 50%;
    transition: .15s ease-in-out
}
.pedifich .gp:last-child {
    color: var(--femelle)
}
.pedifich.male .type {
    color: var(--male);
    font-weight: 700
}
.pedifich.femelle .type {
    color: var(--femelle);
    font-weight: 700
}
.fiche-duo {
    display: flex;
    gap: 1rem;
    margin: 0 auto  1rem 0
} 
.lien-pedigree {
    display: flex;
    column-gap: 1rem;
    margin: 0 auto 1.5rem auto
}
.lien-pedigree > span, .lien-pedigree > a, .lien-pedigree > a.ext {
    display: flex;
    gap: .5rem;
    align-items: center;
    padding: var(--size-md);
    border-radius: var(--radius-1);
    background-color:var(--cta);
    color: #FFF !important;
    justify-content: center;
    transition: .2s ease-in-out;
}
.lien-pedigree a span:first-child {display: none;}

.lien-pedigree a.ext .material-icons {
    color: var(--cta);
    margin-right: .25rem
}
.lien-pedigree a:hover {
    background-color: var(--cta-h)
}
 
.fiche-info {
    background-color: var(--gr-0);
    border-radius: var(--radius);
    padding: var(--size-md);
    color: var(--color-1);
    word-break: break-all
}
.fiche-titre {
    padding: var(--size-md);
    color: var(--rev-black)
}
.fiche-titre .titre {
    margin-bottom: 10px
}
.fiche-titre .info {
    border: 1px solid #CCC
} 

.fichselltitre {
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
    padding: var(--size-sm) 0;
    text-transform: uppercase;
    background-color: #e7f3dd;
    margin-bottom: var(--size-md);
    border-radius: var(--radius);
}

.fichesell .fichesell-padd { padding: var(--size-md) 0}
.fichesell .int { 
    display: flex;
    justify-content: center;
    font-size: 1.2rem;

}
.fichesell .type {
    display: flex;
    align-items: center;
    font-weight: 700
}
.fichesell .propri {
    color: var(--color-2);
    margin-left: .5rem
}
.fichesell .type .material-icons {
    margin-right: .5rem;
    color: var(--color-2);
    font-size: 20px
}
.fichesell .cont {
    display: block;
    width: 100%;
    margin: auto;
    font-weight: 700;
    padding: var(--size-md) var(--size-sm);
    text-align: center; 
    color: var(--rev-white) !important;
    border-radius: var(--radius-1)
}
.fichesell .cont:hover {
    background-color: var(--etalon-h)
}
.fichesite {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    background-color: var(--cta);
    color: #FFF !important;
    padding: var(--size-sm) var(--size-md); 
    border-radius: var(--radius); 
}
.fichesite svg, .lien-pedigree a svg { fill: #FFF }

.gridiserv .fichesite {
    background-color: var(--address-h)
}
.fichesite:hover {
    background-color: var(--cta-h); transition:  .2sc ease-in-out;
}
.etalon-video {
    min-height: 240px;
    min-width: 500px;
}
 
.serv-horraires {
    margin-bottom: var(--size-lg);
    justify-content: space-between;
    grid-template-columns: 2fr 3fr;
    display: grid;
    grid-gap: var(--size-sm);
    flex-wrap: wrap;
    border-radius: var(--radius);
    width: 100%
}
.serv-horraires .serv-j {
    background-color: var(--gr-1);
    padding: var(--size-sm);
    border-radius: var(--radius);
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center
}
.serv-horraires .serv-h {
    background-color: var(--gr-0);
    padding: var(--size-sm);
    border-radius: var(--radius)
}
.page-pedigree-chiens {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem
}
.pedigree-groupe {
    display: grid;
    grid-gap: .2rem 1rem;
    justify-content: space-around
}
.pedigree-box.vide {
    opacity: .75;
    background-color: var(--gr-0)
}
.pedigree-box {
    border-radius: var(--radius);
    display: block;
    overflow: hidden;
    padding: .4rem;
    position: relative
}
.pedigree-box.male {
    border: 1px solid var(--male)
}
.pedigree-box.femelle {
    border: 1px solid var(--femelle)
}
.pedimg {
    display: flex;
    border-radius: var(--radius);
    overflow: hidden
}
.pedimg img {
    object-fit: cover;
    width: 100%
}
.pedi-info {
    padding: var(--size-sm) 0 0 0;
    border-top: 1px solid var(--gr-0);
    font-size: .8rem;
    text-align: center;
    margin-top: .5rem
}
.pedi-info .p-tdotted {
    min-height: 15px
}
.p-lien {
    text-align: center;
    font-weight: 700;
    font-size: .9rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}
.p-lien, .pedigree-box .regroup {
    margin-bottom: var(--size-sm)
}
.page-pedigree-chiens div .pedigree-groupe .pedigree-box .nom {
    width: 95%
}
.page-pedigree-chiens div .pedigree-groupe .pedigree-box .nom span:last-child {
    font-size: clamp(.7rem, 1.75vw, .9rem);
    height: 20px
}
.page-pedigree-chiens div .pedigree-groupe .pedigree-box .nom span:first-child {
    margin: 0 auto .25rem auto;
    font-weight: 700;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}
.page-pedigree-chiens div .pedigree-groupe .pedigree-box .regroup {
    gap: .5rem;
    display: flex;
    text-align: center;
    flex-direction: column;
    align-items: center;
    margin: auto
}
.page-pedigree-chiens div .pedigree-groupe .pedigree-box .regroup .pedimg {
    width: 100%
}
.page-pedigree-chiens div .pedigree-groupe:nth-child(5) .pedigree-box .nom span:last-child {
    min-height: 16px
}
.page-pedigree-chiens div .pedigree-groupe:nth-child(1) {
    grid-template-columns: 80%;
    min-height: 273px
}
.page-pedigree-chiens div .pedigree-groupe:nth-child(1) .pedigree-box .regroup {
    width: 95%
}
.page-pedigree-chiens div .pedigree-groupe:nth-child(1) .pedigree-box .regroup .pedimg {
    height: 150px;
    width: 180px
}
.page-pedigree-chiens div .pedigree-groupe:nth-child(1) .pedigree-box .nom span:first-child {
    font-size: 1.1rem
}
.page-pedigree-chiens div .pedigree-groupe:nth-child(3) {
    grid-template-columns: 45% 45%;
    min-height: 250px
}
.page-pedigree-chiens div .pedigree-groupe:nth-child(3) .pedigree-box .regroup {
    width: 95%
}
.page-pedigree-chiens div .pedigree-groupe:nth-child(3) .pedigree-box .regroup .pedimg {
    height: 125px;
    width: 140px
}
.page-pedigree-chiens div .pedigree-groupe:nth-child(3) .pedigree-box .nom span:first-child {
    font-size: clamp(.9rem, 1.75vw, 1rem)
}
.page-pedigree-chiens div .pedigree-groupe:nth-child(5) {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    text-align: center;
    min-height: 163px
}
.page-pedigree-chiens div .pedigree-groupe:nth-child(5) .pedigree-box .regroup {
    width: 95%
}
.page-pedigree-chiens div .pedigree-groupe:nth-child(5) .pedigree-box .regroup .pedimg {
    height: 75px;
    width: 90px
}
.page-pedigree-chiens div .pedigree-groupe:nth-child(5) .pedigree-box .nom span:first-child {
    font-size: clamp(.8rem, 1.75vw, .9rem)
}
.page-pedigree-chiens div .pedigree-groupe:nth-child(5) .pedigree-box .nom span:last-child {
    font-size: clamp(.7rem, 1.75vw, .8rem)
}
.page-pedigree-chiens div .pedigree-groupe:nth-child(5) .pedigree-box .pedi-info {
    display: none
}
.page-pedigree-chiens div .pedigree-groupe:nth-child(7) {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    padding-top: 20px;
    min-height: 74px
}
.page-pedigree-chiens div .pedigree-groupe:nth-child(7) .pedigree-box {
    overflow: inherit;
    min-height: 75px
}
.page-pedigree-chiens div .pedigree-groupe:nth-child(7) .pedigree-box .regroup .pedimg {
    height: 60px;
    max-width: 60px
}
.page-pedigree-chiens div .pedigree-groupe:nth-child(7) .pedigree-box .regroup {
    gap: 0rem
}
.page-pedigree-chiens div .pedigree-groupe:nth-child(7) .pedigree-box .nom span:first-child, .page-pedigree-chiens div .pedigree-groupe:nth-child(7) .pedigree-box .p-lien, .page-pedigree-chiens div .pedigree-groupe:nth-child(7) .pedigree-box .nom span:last-child, .page-pedigree-chiens div .pedigree-groupe:nth-child(7) .pedigree-box .pedi-info {
    display: none
}
.page-pedigree-chiens div .pedigree-groupe:nth-child(7) .pedigree-box::before {
    left: calc(50% - 1.5px);
    z-index: 5;
    position: absolute;
    width: 3px;
    height: 20px;
    content: "";
    top: -21px;
    background-color: var(--gr-2)
}
.page-pedigree-chiens div .pedigree-groupe:nth-child(7) .pedigree-box.vide::before {
    left: calc(50% - 1.5px);
    z-index: 5;
    position: absolute;
    width: 3px;
    height: 20px;
    content: "";
    top: -21px;
    background-color: var(--gr-2)
}
.pedigree-chien {
    text-align: center;
    display: block;
    border-radius: var(--radius);
    max-width: 70%;
    margin: auto;
    border: 1px solid var(--gr-1);
    padding: var(--size-sm2)
}
.pedigree-chien .pedcimg {
    margin: auto
}
.pedigree-chien .pedcimg img {
    max-height: 250px;
    max-width: 250px;
    border-radius: var(--radius)
}
.fiche-pedigree-branche {
    display: flex;
    justify-content: center;
    width: 50%;
    margin: auto;
    position: relative;
    height: 40px
}
.fiche-pedigree-branche::before {
    display: block;
    width: 100%;
    height: 50%;
    border-right: 3px solid var(--gr-2);
    border-left: 3px solid var(--gr-2);
    border-top: 3px solid var(--gr-2);
    content: "";
    position: absolute;
    top: 50%
}
.fiche-pedigree-branche::after {
    display: block;
    width: 3px;
    height: 50%;
    content: "";
    position: absolute;
    top: 0;
    background-color: var(--gr-2)
}
.fiche-pedigree-branche:nth-child(4)::after {
    display: none
}
.fiche-pedigree-branche:nth-child(4) {
    align-items: flex-end;
    justify-content: space-around;
    width: 100%
}
.fiche-pedigree-branche:nth-child(4) div {
    position: relative;
    width: 25%;
    height: 50%;
    border: 3px solid var(--gr-2);
    border-bottom: 0
}
.fiche-pedigree-branche:nth-child(4) div::before {
    display: block;
    width: 3px;
    height: 20px;
    content: "";
    position: absolute;
    top: -23px;
    left: 49%;
    background-color: var(--gr-2)
}
.fiche-pedigree-branche:nth-child(4)::before {
    display: none;
    width: 100%;
    height: 20px;
    border-right: 3px solid var(--gr-2);
    border-left: 3px solid var(--gr-2);
    border-top: 3px solid var(--gr-2);
    content: "";
    position: absolute;
    top: 50%
}
.fiche-pedigree-branche:nth-child(8) {
    display: none
}
.page-pedigree-chiens div .pedigree-groupe:nth-child(5) .pedigree-box .regroup {
    margin-bottom: 0
}
.pedigree-box .regroup .nom {
    bottom: 0;
    padding: 0 .1rem
}
.pedigree-chien h1 {
    color: var(--color-1)
}
 .pedigree-chien {
    background-color: hsl(0deg 0% 100% / 30%)
}

 .dark .pedigree-chien {
    background-color: hsl(0deg 0% 0% / 30%)
}

.fiche-pedigree-branche:nth-child(6) {
    display: none
}
 
.flexi-entete, .flexi-fiche { display: flex; justify-content: space-between;  gap: var(--ec-1)  }  
.flexi-entete {     padding-top: var(--size-md);     top: -1px;     background-color: var(--rev-white);      display: flex;     justify-content: space-between;    position: sticky; padding: var(--size-md) 0;     }  
.flexi-entete .f-1 { margin-bottom : 0; text-transform: capitalize;}  
.flexi-entete-l {display: flex; flex-wrap: wrap; flex-direction: column; gap: var(--size-md);   }
.flexi-entete-r { border-left: 1px dotted var(--gr-1); padding-left: var(--ec-1);}
.flexi-fiche-r  { padding-left: calc(var(--ec-1) + 1px)}
.flexi-entete-l, .flexi-fiche-l { flex-grow: 1 }  
.flexi-entete-r, .flexi-fiche-r { width: max(340px, 35%); flex-shrink: 0 } 
.flexi-fiche {margin-bottom: var(--ec-2);}
.flexi-assur { display: none }
.flexi-vignette { display: none}
.flexi-elevage { text-align: center;  font-weight: 400; display: block; }
.flexi-elevage span { font-size: .8em; margin-bottom: .25rem; display: block;}
.flexi-elevage a {color: var(--male); display: block;  margin-bottom: 1rem; font-weight: bold; }
.flexi-action .flexi-prix { display: none }
.flexi-fiche-l .flexi-elevage { display: none}
.flexi-action { display: flex; gap: .5rem; flex-grow: 1; }
.flexi-prix   { display: flex; flex-shrink: 0; width: fit-content; background-color: var(--chien);border-radius: var(--radius);    padding: 1px;}
.flexi-prix div:first-child {     min-width: 70px; background-color: var(--rev-white); position: relative;  display: flex;   justify-content: center; align-items: center; padding: .5rem .75rem; border-radius: 0.3rem; flex-shrink: 0; font-size: 1.25em; font-weight: bold}
.flexi-prix div:first-child::before { border-radius: var(--radius); padding-top: 0.2rem;    position: absolute; width: 40px; background: var(--rev-white); content: 'Prix'; text-align: center; top: -10px; left: calc(50% - 20px); color: var(--gr-4); font-size: 11px  }
.flexi-fida { display: flex; align-items: center; padding: 0 1rem 0 0.75rem; font-weight: bold;  color: #FFF;    }
.list-1 { line-height: normal}
.fiche-important { display: flex; gap: var(--ec-1); margin-bottom: var(--ec-1)}
.is-pinned { border-bottom: 1px solid var(--gr-1);   margin-bottom: var(--ec-2); box-shadow: 0 16px 10px var(--rev-white); z-index: 3 }   
.is-pinned .flexi-assur { display: block; color : var(--color-1); text-align: center; font-size: .8em; font-weight: bold; padding-top: .5em } 
.btn-msg {  transition: .2s ease-in-out ; display: flex; align-items: center; gap: .5rem;   background-color: var(--cta);   color: #FFF !important; justify-content: center; font-size: 1.1rem; text-align: center;  border-radius: .3rem; fill: var(--rev-white);  padding: .75em 0;  width: 100%;  font-weight: bold  }
.btn-msg:hover {    background-color: var(--cta-h);  } 

@media only screen and (max-width:1400px) {
    .page-pedigree-chiens {
        display: grid;
        grid-template-columns: 1fr
    }
    .liste-1 {
        grid-template-columns: 1fr 1fr 1fr
    }
    
}
@media only screen and (max-width:1000px) {
    .liste-1 {
        grid-template-columns: 1fr 1fr 1fr
    }
    .gal { 
        margin-bottom: .75rem
    } 

    .list-other { grid-template-columns: 1fr }
    .liste-pedifich {
        grid-template-columns: 1fr
    }
    .liste-1, .liste-2 {
        grid-template-columns: 1fr 1fr
    }
    .gridifich {
        flex-direction: column;
        gap: var(--size-md)
    }
    .fiche-contact {
        width: 100%;
        border-radius: var(--radius);
        border: 1px solid var(--gr-2);
        padding: 1rem;
        text-align: center
    }
    .gridifich .it2 {
        /*
        width: 100%;
        gap: .5rem
        */
        position: fixed;
        box-shadow: 0 0 19px 0px hsl(0deg 0% 0% / 16%);
        flex-wrap: wrap;
        gap: 0 2.5%;
        z-index: 1000;
        bottom: 0px;
        left: 0;
        padding: 0.75rem 10% 0.25rem 10%;
        background-color: var(--rev-white);
        width: 100%;
        margin-bottom: 0;
        border-radius: 0;
    }
    .site-pro  {
        width: fit-content; 
        padding: .5rem var(--ec-1) ;
    } 
    .gridiserv {
        grid-template-columns: 1fr;
        gap: inherit
    }
    .gridiserv .it1 {
        margin-bottom: 1rem
    }
    .page-pedigree-chiens div .pedigree-groupe:nth-child(1) {
        grid-template-columns: 1fr
    }
    .page-pedigree-chiens div .pedigree-groupe:nth-child(3) {
        grid-template-columns: 1fr 1fr
    }
    .gs-ouvert {
        padding: .5rem 0
    }
    .gridiserv .gs-adresse {
        margin-bottom: 1rem
    }
    .gridiserv .it1 {
        order: 2
    }
    .gridiserv .it2 {
        order: 1
    }
    .gal-item img {
        max-width: 400px
    } 
    .fichesell .fiche-contact { border: 0; padding: 0; text-align: left }
    .fichesell .int { display: none;}
    .fiche-contact .ficpro { margin-bottom: .75rem; font-size: 1rem;}
    .flexi-fiche { gap: 0; margin: 0; gap: 1.5rem; }
    .flexi-entete { padding: var(--size-sm) 0; box-shadow: 0 10px 10px var(--rev-white); gap: 1rem;}
    .flexi-fiche, .flexi-entete  { flex-direction: column;  margin-bottom: 1rem; }  
    .flexi-entete-r, .flexi-fiche-r { width: auto; padding: 0; border: 0} 
    .flexi-fiche-l { order: 1}
    .fiche-important { flex-direction: column }
    .fiche-important > div { width: 100%;}  
    .is-pinned .flexi-vignette {height: 40px; width: 50px} 
    .flexi-entete-l .flexi-prix, .flexi-entete-r .flexi-elevage a { display: none }
    .flexi-action .flexi-prix { display: block; width: 30% }
    .flexi-prix div:first-child { height: 100% }
    .flexi-fiche-l .flexi-elevage { display: block; text-align: left; font-size:1.2rem }    
    a.fida-info { border: 0; background-color: transparent;  text-align: center;}
    a.fida-info, a.fida-info > div:first-child, .fida-30  {  margin: 0; padding: 0}
    a.fida-info div div:first-child, a.fida-info .visu,   a.fida-info div:first-child {display: none;}
    a.fida-info .fida-30 {color: var(--lsa-1); border-bottom: 1px dotted #CCC; padding: 0 0 1.5rem 0; }
    a.fida-info .fida-30 span {display: inline; line-height: 1.5rem}
    a.fida-info .fida-30 span i {color: var(--lsa-2) } 
}
@media only screen and (max-width:700px) {

    .gridifich .it2 { padding: 0.5rem 1rem }
    .fiche-duo { gap: 1REM; margin-bottom: 0;}

    .etalon-video {
        min-width: -webkit-fill-available;
        min-width: -moz-available;
    }
    .arbo {
        width: 4%
    }
    .pedifich .img-p {
        height: auto;
        width: 40%
    }
    .pedifich .gpbox {
        height: auto;
        width: 46%
    }
    .pedifich .gp .img-int {
        font-size: .8rem;
        max-width: 50%
    }
    .pedifich .gp .img-int p {
        font-size: .8rem
    }
    .gridifich .it3 {
        grid-row: auto
    }
    .nbimg.affmob {
        display: block
    }
    .liste-2, .liste-3 {
        grid-template-columns: 1fr
    }
    .lien-pedigree {
        flex-direction: column
    }
    .lien-pedigree a {
        margin-bottom: .5rem;
        width: 100%
    }
    .fiche-contact { padding: .5rem 0; border: 0;}
    .fiche-contact .prix {
        margin-bottom: 0;
    } 
    .gal-1, .gal-2, .gal-3, .gal-4, .gal-5, .gal-6 {
        display: block
    }
    .gal, .gal .gal-princ {
        aspect-ratio: 4/5;
        width: 100%;
        max-height: 400px;
    }
    .content .glob-ped {
        padding: 0;
        border: 0
    }
    .tares-list {
        flex-wrap: wrap
    }
    .tares-list span {
        flex-grow: 1
    }
    .fiche-pedigree-branche:nth-child(4), .fiche-pedigree-branche {
        height: 20px
    }
    .fiche-pedigree-branche:nth-child(4) div::before {
        height: 10px;
        top: -13px
    }
    .page-pedigree-chiens div .pedigree-groupe:nth-child(7) {
        padding-top: 10px
    }
    .page-pedigree-chiens div .pedigree-groupe:nth-child(7) .pedigree-box .p-lien, .page-pedigree-chiens div .pedigree-groupe:nth-child(7) .pedigree-box .regroup {
        display: none
    }
    .page-pedigree-chiens div .pedigree-groupe:nth-child(7) .pedigree-box {
        height: 30px;
        border-radius: var(--radius-1)
    }
    .page-pedigree-chiens div .pedigree-groupe:nth-child(7) .pedigree-box.male {
        background-color: var(--male)
    }
    .page-pedigree-chiens div .pedigree-groupe:nth-child(7) .pedigree-box.femelle {
        background-color: var(--femelle)
    }
    .page-pedigree-chiens div .pedigree-groupe:nth-child(7) .pedigree-box::before {
        left: calc(50% - 1.5px);
        z-index: 5;
        position: absolute;
        width: 3px;
        height: 10px;
        content: "";
        top: -11px;
        background-color: var(--gr-2)
    }
    .page-pedigree-chiens div .pedigree-groupe:nth-child(7) .pedigree-box.vide::before {
        height: 10px;
        top: -11px
    }
    .pedigree-box .regroup {
        flex-direction: column;
        gap: .5rem
    }
    .pedigree-chien {
        max-width: 100%
    }
    .pedigree-top {
        width: 100%
    }
    .pedigree-top .fiche-pedigree-branche::before {
        display: none
    }
    .page-pedigree-chiens div .pedigree-groupe:nth-child(5) .pedigree-box .p-lien {
        font-size: .8rem
    } 
    .btn-msg { max-width: none;} 
}
@media only screen and (max-width:550px) { 
    .gal .gal-item a img {
        width: 1px;
        height: 1px
    }
    .pedifich .img-p img {
        max-width: 250px
    } 
}