@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 400;
    src: local('Quicksand'), url(/inc/fonts/quicksand-v22-latin-regular.woff2) format('woff2'), url(/inc/fonts/quicksand-v22-latin-regular.woff) format('woff');
    font-display: swap
}
@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 600;
    src: local('Quicksand'), url(/inc/fonts/quicksand-600.woff2) format('woff2'), url(/inc/fonts/quicksand-v22-latin-regular.woff) format('woff');
    font-display: swap
}

@font-face {
    font-family: 'Marianne';
    font-style: normal;
    font-weight: 400;
    src: local('Marianne'), url(/inc/fonts/Marianne-Regular.woff2) format('woff2'), url(/inc/fonts/Marianne-Regular.woff) format('woff');
    font-display: swap
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: local('Material Icons'), url(/inc/fonts/materialicons/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
    font-display: swap
}

/* { outline: 1px dashed #000;} */

*, ::before, ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}
a {
    text-decoration: none
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block
}
body {
    line-height: 1;
    font-size: 16px
}
ol, ul {
    list-style: none
}
blockquote, q {
    quotes: none
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
.mini{font-size: 0.8em;}
.material-icons {
    font-family: 'Material Icons';
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased
}
body {
    --etoile: hsl(39deg 100% 45%);
    --etalon: hsl(39deg 100% 45%);
    --search: hsl(35deg 100% 45%);
    --search-h: hsl(21deg 87% 55%);
    --color-1: hsl(0, 0%, 0%);
    --color-2: hsl(203, 68%, 48%);
    --color-3: hsl(202, 23%, 23%);
    --color-4: hsl(33, 100%, 21%);
    --cta: #DF2E83;
    --cta-h: #ff5dab;
    --cta-hover: #ff5dab;
    --msg: #f15f5f;
    --male: #2890CF;
    --male-h: #1978b1;
    --male-bg: #DAF0FF;
    --femelle: #DF2E83;
    --femelle-bg: #FFE1EF;
    --femelle-h: #FC6DB1;
    --chiot: #DF2E83;
    --chiot-h: #FC6DB1;
    --eleveur: #3ead00;
    --eleveur-h: #348b03;
    --chien: #2890CF;
    --chien-h: #1978b1;
    --etalon-h: #ffb969;
    --bgannonce: hsl(92deg 34% 94%);
    --bgtoilpens: hsl(101deg 60% 94%);
    --valid   : hsla(102, 86%, 38%, 1);
    --toilpens: hsla(102, 86%, 38%, 1);
    --toilpens-h: hsla(102, 86%, 38%, .75);
    --avendre: #4e8c17;
    --smenu: hsl(203deg 21% 50%);
    --saillie: hsla(102, 86%, 38%, 1);
    --address: hsla(102, 86%, 38%, 1);
    --address-h: hsla(102, 86%, 38%, .75);
    --prix: #e6e6e6;
    --connexion: #C13BCD;
    --club-bg: #000;
    --alert: #C00;
    --gr-0: hsl(223, 30%, 96%);
    --gr-05: hsl(225, 27%, 91%);
    --gr-1: hsl(223, 30%, 85%);
    --gr-2: hsl(223, 30%, 70%);
    --gr-3: hsl(223, 24%, 50%);
    --gr-4: hsl(223, 39%, 34%);
    --fida : hsl(206.36deg 54.1% 23.92%);
    --border: #E6E9EC;
    --ombre-txt: #FFF;
    --rev-white: #FFF;
    --rev-black: #000;
    --size-xxs: .125rem;
    --size-xs: .25rem;
    --size-sm: .5rem;
    --size-sm2: .75rem;
    --size-md: 1rem;
    --size-lg: 2rem;
    --size-xl: 3rem;
    --ec-0: clamp(1.5rem, 3vw, 3rem);
    --ec-1: clamp(1.25rem, 3vw, 2rem);
    --ec-2: clamp(1rem, 3vw, 1.5rem);
    --ec-3: clamp(.75rem, 3vw, 1.25rem);
    --ec-4: clamp(.5rem, 1vw, .8rem);
    --radius: 6px;
    --radius-1: 9px;
    --radius-2: 12px;
    --resp: clamp(1.5rem, 3vw, 2rem);
    --res: calc(0.01 * 10vmin);
    --signaler: hsl(0deg 99% 36%);
    --lsa-1: #002848;
    --lsa-2: #F25C05;
    --lsa-2-h: #c24b07;
    --lsa-3: #f5f7ff;
    --lsa-4: #fffaf8;
    --lsa-5: #f5f7ff;
    font-family: 'Quicksand', sans-serif
}
body.dark {
    --bgtoilpens: hsl(19deg 23% 22%);
    --toilpens: hsl(19deg 72% 58%);
    --toilpens-h: hsl(19deg 100% 64%);
    --signaler: hsl(0deg 96% 68%);
    --etoile: hsl(35deg 79% 48%);
    --search: hsl(26deg 95% 43%);
    --cta: hsl(331deg 53% 55%);
    --male: hsl(202deg 71% 66%);
    --male-bg: #14374e;
    --femelle: hsl(331deg 82% 65%);
    --femelle-bg: #2e0317;
    --etalon: hsl(39deg 81% 55%);
    --connexion: #e376ec;
    --avendre: #76d132;
    --bgannonce: hsl(92deg 16% 9%);
    --address: hsl(102deg 60% 45%);
    --color-1: #FFF;
    --color-2: #81d0ff;
    --color-3: #e1e6ea;
    --color-4: #e6b77f;
    --gr-4: hsl(0deg 0% 90%);
    --gr-3: #e2e7ec;
    --gr-2: #acb8c5;
    --gr-1: hsl(211deg 16% 35%);
    --gr-0: hsl(206deg 10% 26%);
    --gr-05: hsl(205, 11%, 21%);
    --border: #474f56;
    --rev-white: #24292d;
    --rev-black: #e6e9ec;
    --ombre-txt: #000;
    --smenu: hsl(0deg 0% 80%);
    --lsa-1: rgb(215 241 255);
    --lsa-2: #eb774b;
    --lsa-2-h: #ca3e06;
    --lsa-3: #32404c;
    --lsa-4: #32404c;
    --lsa-5: #32404c;
}
body {
    font-family: 'Quicksand', sans-serif ;
    background-color: var(--rev-white);
    color: var(--color-3)
}
h1, .f-1, .search-titre {
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    color: var(--color-1);
    font-weight: 600;
    margin-bottom: .75rem
}
.f-1, .search-titre {
    margin-bottom: var(--ec-1)
}
h1 span {
    font-size: clamp(.8rem, 3vw, 1rem);
    margin-bottom: .4rem;
    font-weight: 400;
    display: block;
    color: var(--gr-3)
}
h2, .st {
    font-size: clamp(1.1rem, 2vw, 1.25rem);
    color: var(--color-2);
    margin-bottom: 1.2rem;
    font-weight: bold;
}
h3 {
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    font-weight: bold; 
    margin-bottom: var(--ec-1);
}
::placeholder { font-family:  'Quicksand', sans-serif; color: var(--color-1); opacity: .75;}

.ici { display: inline-flex !important; justify-content: center; align-items: center; background-color: #a82663; width: 30px; height: 30px; flex-shrink: 0; color : #FFF; border-radius: 50%; font-size: 14px; font-weight: bold; }
.ici::before { content: "ici";}


.creer-site { 
    display: block;
    color: #000;
    border: 1px solid var(--connexion);
    padding: var(--size-md);
    border-radius: var(--radius);
    position: relative;
    min-width: 300px
}
.creer-site span { display: block; color: var(--rev-black);}
.creer-site .cs1 { color: var(--connexion); font-size: 1.1rem; font-weight: bold; }
.creer-site .cs2 { font-size: 1.8rem; padding: .25rem 0; font-weight: bold;  }
.creer-site .cs4 { background: url(/media/creerdog.png)  no-repeat; position: absolute; width: 83px; height: 126px; bottom: 0; right: -1px; }


@media only screen and (max-width:1600px) {

    h1 span {
        font-size: clamp(.8rem, 3vw, 1rem);
    }
}

.acc-site { margin-bottom: 2rem; text-align: center}

.color-lsa-cta { color : var(--lsa-2)}
.color-lsa     { color : var(--lsa-1)}
.fidalogo {
    background: url(/media/assurance/logo.svg) 50% 50%  no-repeat;
    background-size: contain; 
    height: 65px; 
}

p {
    line-height: 1.2rem;
    color: var(--color-3)
}
img {
    max-width: 100%
}
a {
    color: var(--color-2)
}
a:active, a:link, a:visited, a:hover { color: var(--color-2) }
.ob_link { cursor: pointer;}
.mp-validation { background-color: var(--gr-05); padding: 0.5rem; border-radius: 0 0 var(--radius) var(--radius);}
form {
    width: 100%;
}
select, button {    font-family: 'Quicksand', sans-serif;}
.fg { flex-grow: 1 }
.g { font-weight: 700 }
.i { font-style: italic ;}
.none {
    display: none
}
.info {
    color: var(--color-2);
    font-weight: 700
}
.f-2first-letter, .f-1:first-letter, .flu:first-letter, .search-titre:first-letter {
    text-transform: uppercase
}
.f-1-st {
    color: var(--color-2);
    font-size: clamp(1rem, 2.5vw, 1.15rem)
}

.center {
    text-align: center;
    margin: 0 auto
}
.inline-center {
    text-align: center;
    margin: auto;
    display: inline-block
}
.color-2 { color: var(--color-2) }
.flex { display: flex }
.flex-align-center { align-items: center;}
.flex-gap-xs { gap : .25em}
.flex-gap-sm { gap : .5em}
.flex-gap-md { gap : 1em}
.flex-gap-lg { gap : 2em}

.flex-h1 {
    display: flex; justify-content: space-between;     align-items: center;
}

.cursor {
    cursor: pointer
}
.content, .content-sensi, nav, header, .footer-dim, .glob-etalon, .content-max, .content .glob.globetalon {
    width: min(95%, 1900px);
    margin: 0 auto
}

.footer-dim { gap: 1rem;}

.w100 {
    width: 100%
}
.versiondev { bottom: 0; width: 100%; font-size: .8rem; background-color: hsl(0, 100%, 32%); padding: .5rem 1rem; z-index: 10000;  color : #FFF;  margin: auto; text-align: center;}
.content {
    margin-bottom: var(--ec-1);
    display: flex
}

.content-sensi {
    margin-bottom: var(--ec-1);
    display: flex
}

.content-sensi span.ob_link {
    color: #0000EE;
}

.content .various .sticky-menud  { position: sticky; top: 1rem;}
.content .various .sticky-menud  .f-3 { font-size: clamp(1.1rem, 2.5vw, 1.3rem); font-weight: bold; margin: var(--size-sm) 0 var(--ec-2) 0; }

.content .various, nav .connexion {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column
}

.abs-max {
    max-width: 1268px;
}

.content .glob {
    flex-direction: column;
    display: flex;
    width: calc(100% - (300px + var(--ec-1)))
}
.glob-ped {
    border: 1px solid var(--gr-1);
    border-radius: var(--radius);
    padding: 1.5rem; flex-direction: column
}
.glob-max {
    padding: 1.5rem; flex-direction: column; background-color: var(--gr-0); flex-grow: 1
}

.valid-donnees {
    font-size: 1rem;
    margin-bottom: var(--size-lg);
}

.valid-donnees-check {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.valid-donnees-rgpd { font-size: .9em; color: var(--color-2); }


.direction-column {
    flex-direction: column
}
.qcq-oups {
    font-size: clamp(4rem, 8vw, 8rem);
    font-weight: 700;
    text-align: center;
    margin-bottom: 2rem
}
.qcq-txt {
    text-align: center;
    margin-bottom: 2rem
}
.qcq-img {
    background: url(/media/qcq-img.png) no-repeat top center;
    width: 100%;
    height: 250px;
    background-size: contain;
    margin: auto
}
.card-alert div, .card-valid div, .card-warning div, .card-info div {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-weight: 500;
    margin-bottom: 2px;

  }
  .card-alert {
    color: hsl(0deg 58% 48%);
  }
.qcq-retour {
    font-weight: 700;
    text-align: center;
    margin: auto
}
.choices__list--dropdown, .choices__list[aria-expanded] {
    z-index: 10 !important
}
.cadre-1 {
    padding: var(--resp);
    border-radius: var(--radius);
    border: 1px solid var(--gr-1)
}

.message {
    margin-bottom: var(--size-lg);
    text-align: center;
    padding: 1rem;
    font-weight: bold;
    font-size: 1.4em;
    color: var(--address-h);
}
.message ul {
    border: 1px solid var(--msg);
    max-width: max(800px, 50%);
    margin: auto;
    padding: var(--size-md);
    border-radius: var(--radius)
}
.message ul li {
    color: var(--msg);
    font-weight: 700;
    margin-bottom: var(--size-sm)
}

header {
    margin: var(--ec-1) auto;
    height: 68px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
nav {
    height: 4rem;
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--ec-3);
}
nav a, .connexion {
    text-align: center;
    border: 1px solid var(--gr-1);
    border-radius: var(--radius);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center
}
nav a:hover, .connexion:hover, .connexion:hover .ic-con::before {
    border-color: var(--gr-4)
}
.connexion.actif, .connexion.actif .ic-con::before {
    border-color: var(--connexion);
    background-color: var(--gr-0)
}
.dark .connexion.actif, .dark .connexion.actif .ic-con::before {
    background-color: rgb(14 19 24);
    border-color: #000
}
nav a span:first-child, .connexion span:first-child {
    color: var(--color-1);
    width: 100%;
    font-weight: 700;
    font-size: clamp(1.05rem, 1.5vw, 1.5rem);
    margin-bottom: var(--size-xs)
}
nav a span:last-child, .connexion span:last-child {
    color: var(--smenu);
    font-size: clamp(.7rem, 1vw, .9rem)
}
nav .home {
    min-width: 4.5rem;
    display: none
}
nav .home, nav .chiots, nav .eleveurs, nav .etalons, nav .chiens, nav .services {
    margin-right: var(--ec-4)
}
.content .various, nav .connexion {
    margin-left: var(--ec-1)
}

nav .chiots, nav .etalons, nav .eleveurs, nav .chiens, nav .services, nav .assurance {
    flex : 1
}

nav .material-icons {
    font-size: 1.8rem;
    color: var(--color-1)
}
.fp {
    display: flex;
    gap: 1rem;
    border-radius: var(--radius);
    color: var(--rev-black)
}
.fp .ins, .fp .log {
    width: 50%;
    padding: 1.5rem;
    border: 2px solid var(--gr-1);
    display: flex;
    flex-direction: column
}
.dark .fp .ins, .dark .fp .log {
    border-color: #85a2be
}
.fp .ins .regroup, .fp .log .regroup {
    flex-grow: 1
}
.fp .log {
    background-color: var(--bg)
}
.dark .fp .log {
    background-color: var(--gr-0)
}
.dark .fp .log {
    background-color: #85a2be
}
.ins .titre, .log .titre {
    font-size: 1.3rem;
    color: var(--color-1);
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center
}
.ins {
    border-radius: var(--radius);
    color: var(--rev-black)
}
.log {
    border-radius: var(--radius);
    color: var(--rev-black)
}
.fp a {
    display: inline-block;
    padding: 1rem 1.5rem;
    border-radius: var(--radius);
    background-color: hsl(29deg 100% 52%);
    color: #FFF;
    font-weight: 700
}
.logifr {
    height: 18rem;
    width: 100%;
    display: flex;
    border-radius: var(--radius);
    justify-content: center
}
.logifr iframe {
    border: 1px solid var(--gr-1)
}
.ins p {
    color: var(--color-3);
    margin-bottom: var(--size-md)
}
.ins span {
    color: var(--color-2);
    font-weight: 700
}
.log-box {
    max-width: 30rem;
    margin: auto
}

.log-iframe {
    width: 100%;
    min-height: 420px
}
.img-ins-1, .img-ins-2 {
    height: 150px;
    border-radius: var(--radius-1)
}
.img-ins-1 {
    background: url(/media/img-ins-1.jpg) no-repeat 0 0;
    background-size: cover
}
.img-ins-2 {
    background: url(/media/img-ins-2.jpg) no-repeat 0 0;
    background-size: cover
}
.hins {
    min-height: 178px
}
.chiots.actif, .etalons.actif, .chiens.actif, .eleveurs.actif, .services.actif, .assurance.actif {
    background-color: var(--gr-0)
}
.dark .chiots.actif, .dark .etalons.actif, .dark .chiens.actif, .dark .eleveurs.actif, .dark .services.actif, .dark .assurance.actif {
    background-color: rgb(14 19 24);
    border-color: #000
}


.report-flex-spam {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    cursor: pointer;
}

.report-select {
    font-size: 1rem;
    padding: .5rem;
    margin-right: 1rem;
    border-radius: var(--radius)
}
.report-titre {
    font-size: 1.1rem;
    color: var(--color-1);
    margin-bottom: 1rem;
    font-weight: 700
}
.report-textarea {
    font-size: 1rem;
    padding: 1rem;
    width: 100%;
    min-height: 10rem;
    margin-bottom: 1rem
}
.report-bout {
    min-height: 45px;
    background-color: var(--search);
    border: 0;
    box-shadow: 0 0 0 6px var(--rev-white);
    color: #FFF;
    border-radius: var(--radius-1);
    cursor: pointer;
    font-size: 1.3rem;
    padding: 0 1rem;
    align-items: center;
    min-width: 180px;
    text-align: center
}
.report-info {
    margin-bottom: 1.5rem;
    color: var(--gr-3)
}
.report-bout:hover {
    background-color: color:hsl(35deg 91% 40%)
}
main {
    flex-grow: 1
}
section {
    /*flex-grow: 1*/
}
.menuright a {
    display: block;
    margin-bottom: .75rem;
    color: var(--color-2)
}
.menuright a:hover {
    color: var(--color-2-h)
}
.connexion {
    position: relative
}
.connexion .ic-con {
    width: 4rem;
    height: 4rem;
    position: absolute;
    left: calc(50% - 2rem);
    top: -2rem;
    display: flex;
    justify-content: center;
    align-items: center
}
.connexion .ic-con::before {
    background-color: var(--rev-white);
    border: 1px solid var(--gr-1);
    position: absolute;
    top: 0;
    display: block;
    border-bottom: 0;
    content: "";
    height: 2rem;
    width: 4rem;
    border-radius: 2rem 2rem 0 0
}
.connexion .ic-con .material-icons {
    z-index: 2
}
.connexion .ic-con .material-icons:after {
    font-size: 30px;
    content: "person";
    color: var(--connexion)
}
.connexion span:first-child {
    color: var(--connexion)
}
.connexion span:nth-child(2) {
    color: var(--color-1)
}
.chiensdefrance {
    display: inline-block;
    background: url(/media/chiens-de-france.svg) no-repeat 0 0;
    width: 320px;
    height: 86px;
    background-size: contain
}
.dark .logcdf .chiensdefrance {
    background: url(/media/chiens-de-france-w.svg) no-repeat 0 0;
}
.chiensdefrance:after {
    text-align: center;
    margin-top: 4rem;
    font-size: .8rem;
    LETTER-SPACING: .05REM;
    display: block;
    content: "AVEC LES ELEVEURS DEPUIS 1999";
    color: var(--gr-4)
}
.chiensdefrance:hover:after {
    color: var(--gr-2)
}
.logcdf {
    width: 60%;
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav-mobile-r, .nav-mobile-l {
    width: 20%;
    height: 100%;
}
.bout-gal {
    display: block;
    height: 100%;
    left: 0;
    overflow-x: hidden;
    position: fixed;
    top: 0;
    transition: 0s;
    width: 0;
    z-index: 10000 !important;
    background-color: var(--rev-white)
}
.gal-princ.only .uk-inline .uk-icon > * {
    display: none !important
}
.nav-mobile-menu {
    display: block;
    height: 100%;
    left: 0;
    overflow-x: hidden;
    position: fixed;
    top: 0;
    transition: 0s;
    width: 0;
    z-index: 100 !important;
    background-color: var(--rev-white)
}
.nav-mobile-cont {
    width: 90%;
    margin: auto
}
.nav-mobile-top {
    margin: var(--ec-1) auto 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center
}
.nav-mobile {
    margin: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2%;
    row-gap: 1.3rem;
    margin-bottom: 1.3rem
}
.nav-mobile a {
    width: 47.5%;
    min-height: 4rem;
    text-align: center;
    border: 1px solid var(--gr-2);
    border-radius: var(--radius);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center
}
.nav-mobile a span:first-child {
    color: var(--color-1);
    width: 100%;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: var(--size-xs)
}
.nav-mobile a span:last-child {
    font-size: .8rem;
    color: var(--color-2)
}
.nav-mobile a:last-child {
    width: 100%
}
.nav-mobile-r {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-content: flex-end
}
.nav-mobile-l {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center
}
.fast-home, .fast-hamb, .fast-close, .fast-dark, .fast-account {
    display: flex;
    justify-content: center;
    align-items: center
}
.dark .fast-dark .material-icons:before {
    content: "light_mode"
}
.fast-dark .material-icons:before {
    content: "nightlight_round"
}
.fast-hamb .material-icons:before {
    content: "menu"
}
.fast-close .material-icons:before {
    content: "close"
}
.fast-home .material-icons:before {
    content: "home"
}
.fast-account .material-icons:before {
    content: "person";
    color: var(--connexion)
}
.fast-hamb {
    display: none
}
.fast-home {
    display: none
}
.fast-account {
    display: none
}
.fast-home, .fast-hamb, .fast-close, .fast-dark {
    color: var(--gr-3);
    cursor: pointer
}
.fast-home, .fast-hamb, .fast-close, .fast-dark, .fast-account {
    border-radius: 50%;
    border: 1px solid var(--gr-1);
    padding: .5rem;
    font-size: 24px
}
.fast-home:hover, .fast-hambhover, .fast-closehover, .fast-dark:hover, .fast-accounthover {
    border: 1px solid var(--gr-4)
}
.fast-hamb, .fast-close, .fast-account {
    margin-left: var(--size-sm)
}
.fast-home {
    display: flex
}
.search {
    padding: 0rem 2rem;
    border-radius: var(--radius);
    color: var(--rev-white);
    text-align: center;
    font-size: 2rem;
    position: relative;
    margin-bottom: 3rem
}
.search_bout {
    height: 45px
}
.search button {
    min-height: 45px;
    background-color: var(--search);
    border: 0;
    box-shadow: 0 0 0 6px var(--rev-white);
    color: #FFF;
    border-radius: var(--radius-1);
    position: absolute;
    bottom: -22px;
    font-size: 1.3rem;
    padding: 0 1rem;
    align-items: center;
    min-width: 180px;
    text-align: center
}
.search button:hover {
    cursor: pointer
}
.search button:hover {
    background-color: var(--search-h)
}
.search button {
    content: "Chercher";
    font-family: 'Quicksand', sans-serif;
    font-weight: 700
}
.search_chiots {
    background: #7aa12f url(/media/bgchiots.jpg) no-repeat 80% 50%;
    background-size: cover
}
.search_eleveurs {
    background: #5c4d92 url(/media/bgeleveurs.jpg) no-repeat 100% 40%;
    background-size: cover
}
.search_etalons {
    background:  url(/media/bgetalons.jpg) no-repeat 0% 0%;
    background-size: cover
}
.search_chiens {
    background: #5c4d92 url(/media/bgchiens.jpg) no-repeat 0% 50%;
    background-size: cover
}
.search_annonce {
    transition: .2s ease-in-out;
    background: #2c231e url(/media/bgannonce.jpg) no-repeat 0% -20px;
    background-size: 100%;
    margin-bottom: 1.5rem
}
.search_annonce:hover .aspelien {
    background-color: hsl(0deg 0% 100% / 20%)
}
.search_annonce .txt {
    text-shadow: 0 0 4px #000;
    color: #FFF;
    font-size: 1rem;
    margin-bottom: var(--size-md);
    line-height: 1.4rem
}
.search_annonce .aspelien {
    max-width: 300px;
    display: inline-block;
    transition: .2s ease-in-out;
    background-color: hsl(0deg 0% 100% / 36%);
    border-radius: var(--radius-1);
    color: #FFF;
    padding: .8rem 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    text-shadow: 1px 1px 0 hsl(0deg 0% 0% / 39%)
}
.flex_bandeau_annonce {
    display: flex;
    padding: 3rem 2rem;
    gap: 1rem;
    font-size: 1.2rem;
    height: 100%;
    text-shadow: none;
    align-items: center
}
.flex_bandeau_annonce div.txt {
    text-align: left;
    margin-bottom: 0;
    width: 50%;
    line-height: 1.75rem;
    font-size: 1.5rem;
    font-weight: 700
}
.pas-de-resultat {
    text-align: center;
    font-size: 1.2rem;
    min-height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 1px solid var(--gr-1);
    border-radius: var(--radius);
    padding: var(--ec-0);
    margin-bottom: var(--resp);
}

.search_race, .search_region {
    background-color: hsla(0, 0%, 98%, .95)
}
.search_race .choices {
    width: 100%;
    border-radius: .2rem
}
.search_region .choices {
    flex-grow: 1;
    border-radius: .2rem 0 0 .2rem
}
.search_region .choices:last-child {
    flex-grow: 0;
    border-radius: 0 .2rem .2rem 0
}
.search .xtz {
    display: flex;
    justify-content: space-evenly;
    margin: auto;
    flex-wrap: wrap;
    min-height: 70px;
    max-width: 850px
}
.search h1, .search-titre {
    color: #FFF;
    font-size: clamp(1.4, 3vw, 1.8rem);
    font-weight: 600;
    text-shadow: 0 0 5px hsl(0deg 0% 0% / 70%);
    display: flex;
    height: 85px;
    justify-content: center;
    align-items: center;
    margin-bottom: 0
}
.search_race, .search_region {
    height: 50px;
    width: 45%;
    display: flex;
    border-radius: .5rem;
    box-shadow: 0 0 19px 0 #0000003b
}
.search_rub {
    display: none;
    gap: 1.5rem;
    align-items: center;
    border-radius: var(--radius);
    justify-content: space-around;
    padding-top: 2.5rem
}
.search_rub input[type="radio"] {
    display: none
}
.search_rub label {
    cursor: pointer;
    border-radius: 1.2rem;
    background-color: hsl(0deg 0% 0% / 40%);
    height: 60px;
    width: 60px;
    border: 3px solid hsla(0, 0%, 100%, 0);
    color: #FFF;
    font-weight: 700;
    position: relative
}
.search_rub label:hover {
    border-color: hsla(0, 0%, 100%, .55);
    border: 3px solid hsla(0, 0%, 100%, .6)
}
.search_rub label, .search_rub label:hover {
    -webkit-transition: all .2s
}
.search_rub label span {
    font-size: .9rem;
    display: block;
    margin: -25px;
    letter-spacing: .05rem
}
.search_rub [type="radio"]:checked + label {
    border: 3px solid hsla(0, 0%, 100%, 1)
}
.search_bout {
    position: relative;
    display: flex;
    justify-content: center
}
.search_vente {
    display: flex;
    margin-top: 1rem;
    justify-content: center
}
.search_vente label .coch {
    color: #FFF;
    border-radius: var(--radius-1);
    font-size: 1rem;
    padding: .4rem 1rem .4rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center
}
.search_vente label .coch:hover {
    color: var(--gr-2)
}
.search_vente label .coch .tchek {
    display: block;
    content: "";
    width: 18px;
    border-radius: 50%;
    height: 18px;
    border: 2px solid #FFF;
    margin-right: .5rem
}
.search_vente label:hover .coch .tchek {
    border-color: var(--gr-2);
    display: block
}
.search_vente label input[type="checkbox"]:checked + .coch span {
    color: #FFF !important
}
.search_vente label input[type="checkbox"]:checked + .coch span:first-child {
    background-color: var(--search);
    border-color: #FFF
}
.search_vente label input[type="checkbox"] {
    display: none
}
.lab_chiens {
    background: url(/media/vign-chien.png) no-repeat 11px 11px
}
.lab_etalons {
    background: url(/media/vign-etalon.png) no-repeat 8px 9px
}
.lab_chiots {
    background: url(/media/vign-chiot.png) no-repeat 8px 10px
}
.lab_eleveurs {
    background: url(/media/vign-eleveur.png) no-repeat 6px 10px
}
.filtres {
    font-weight: 700;
    display: flex;
    align-items: center;
    align-content: center;
    margin-bottom: var(--ec-3);
}
.filtres .cat {
    display: flex;
    gap: .5rem;
    align-items: center;
    height: 100%;

}
.filtres .cat div label {
    cursor: pointer;
    display: flex;
    border: 1px solid var(--gr-2);
    width: 100%;
    font-weight: 700;
    padding: var(--size-md) var(--size-sm);
    text-align: center;
    color: var(--rev-black) !important;
    border-radius: var(--radius);
    padding: 0.5rem;
    font-weight: normal;
    align-items: center;
}
.filtres .cat div label:hover {
    background-color:  var(--gr-0)
}
.filtres .cat div label span {
    margin-left: .25rem;
    font-size: .9rem;
    display: flex;align-items: center;
}
.filtres .sepa {
    display: block;
    width: 1px;
    margin: 0 var(--size-md);
    height: 50%;
    background-color: var(--gr-1)
}
.filtres select {
    padding: .42rem;
    border-radius: var(--radius);
    border: 1px solid var(--gr-2);
    font-size: 1em
}
.filtres p {
    position: relative
}
.filtres [type="checkbox"]:not(:checked), .filtres [type="checkbox"]:checked {
    position: absolute;
    left: 0; display: none;
    opacity: .01
}
.filtres [type="checkbox"]:not(:checked) + label:before, .filtres [type="checkbox"]:checked + label {
    background-color: var(--gr-1);
    color: #FFF
}

.filtres select, .filtres .cat div label, .alerte { height: 38px; }
.box-info, .box-alert, .box-warning {
    font-size: 1.1rem;
    color: var(--rev-black) !important;
    border-radius: var(--radius);
    padding : var(--ec-1);
    position: relative;
}

.box-info { border: 3px dashed var(--color-2); }
.box-alert { border: 3px dashed #CC0000; }
.box-warning { border: 3px dashed #cc6d00; }

.alerte-dispo { margin-left: auto }
.alerte {
    display: flex;
    align-items: center;
    gap: .5em;
    border: 1px solid var(--search);
    background-color: var(--rev-white);
    cursor: pointer;
    text-align: center;
    color: var(--rev-black) !important;
    border-radius: var(--radius);
    font-weight: normal;
    font-size: 1.025em;
    padding-right: .5rem;
    position: relative;
}

.alerte span:first-child {
    background-color: var(--search);
    width: 40px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px 0 0 4px;
    padding-right: 2px;
}
.alerte .supp { position: absolute; top : -18px; font-size: 10px; font-weight: 600; width: 100%; text-align: center}
.alerte span:last-child { font-weight: 600 }
.alerte span:first-child svg { fill: var(--rev-white)}

.alerte:hover { border: 1px solid var(--search-h); }
.alerte:hover span:first-child {background-color: var(--search-h); }
.alerte:hover span:first-child svg {
    -webkit-animation: checkbb 1.5s ease;
            animation: checkbb 1.5s ease;
}

@-webkit-keyframes checkbb {
    0% 		{ transform: rotate(35deg) 	}
    12.5% 	{ transform: rotate(-30deg)	}
    25% 	{ transform: rotate(25deg) 	}
    37.5% 	{ transform: rotate(-20deg) }
    50% 	{ transform: rotate(15deg) 	}
    62.5% 	{ transform: rotate(-10deg) }
    75% 	{ transform: rotate(5deg)	}
    100% 	{ transform: rotate(0) 		}
}

.contact-img {
    width: 200px;
    height: 200px;
    display: flex;
    margin: 0 auto 1rem auto;
    border-radius: 10rem;
    overflow: hidden
}
.contact-img img {
    object-fit: cover;
    width: 100%
}
.u { text-decoration: underline; }
.color-1 {
    color: var(--color-1)
}
.color-2 {
    color: var(--color-2)
}
.color-3 {
    color: var(--color-3)
}
.color-cta {
    color: var(--cta)
}
.color-etoile {
    color: var(--etoile)
}
.color-male {
    color: var(--male)
}
.color-femelle {
    color: var(--femelle)
}
.gr-0 {
    background-color: var(--gr-0)
}
.gr-1 {
    background-color: var(--gr-1)
}
.gr-2 {
    background-color: var(--gr-2)
}
.gr-3 {
    background-color: var(--gr-3)
}
.gr-4 {
    background-color: var(--gr-4)
}
.bg-1 {
    border-radius: var(--radius-1);
    background-color: var(--gr-0);
    padding: var(--size-lg)
}
.mb-resp {
    margin-bottom: var(--resp)
}
.mb-xs {
    margin-bottom: .25rem
}
.mb-sm, .mb10 {
    margin-bottom: .5rem
}
.mb-md {
    margin-bottom: 1rem
}
.mb-lg {
    margin-bottom: 2rem
}
.mb-xl {
    margin-bottom: 3rem
}
.mt-sm {
    margin-top: .5rem
}
.mt-md {
    margin-top: 1rem
}
.mr-md {
    margin-right: 1rem
}
.border {
    border: 1px solid #000
}
.plus {
    border: 1px solid var(--color-2);
    background-color: var(--rev-white);
    max-width: 200px;
    border-radius: var(--radius-1);
    padding: var(--size-sm);
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    display: block
}
.plus:hover {
    border-color: 1px solid var(--gr-4)
}
.fl {
    display: inline-block
}
.fl:first-letter {
    text-transform: uppercase
}
.st {
    margin-bottom: var(--size-md);
    color: var(--color-2);
    display: flex;
    align-items: center;
    font-weight: bold;
}
.st .material-icons {
    margin-right: var(--size-sm)
}

.size-xs { font-size: .8em;}
.size-sm { font-size: .9em;}
.size-md { font-size: 1em;}
.size-lg { font-size: 1.2em;}
.size-xl { font-size: 1.6em;}

.responsable { margin-bottom : 1em;}

#breadcrumb * { outline: 0px dotted hsla(0, 100%, 40%, .5); }

#breadcrumb {
    font-size: .9rem;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: var(--size-md);
    gap: .25em;
    border-top: 1px solid var(--gr-0);
    border-bottom: 1px solid var(--gr-0);
    padding: var(--size-xs) 0;
}
#breadcrumb > li a, #breadcrumb > li:last-child span {
    display: flex;
    gap : .5em;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    padding: var(--size-xs) var(--size-xs) var(--size-xs) 0;
}

#breadcrumb > li:last-child span { border-style:dashed}

#breadcrumb li a {
    color: var(--color-1)
}

#breadcrumb li a::after {
    content: "›";
    display: inline-flex;
    align-items: center
}

#breadcrumb li a:hover {
    text-decoration: underline;
    color: var(--color-2)
}
#breadcrumb li::after:last-child {
    display: none
}
.contact-fil #breadcrumb {
    border-top: 1px solid var(--gr-1);
    border-bottom: 1px solid var(--gr-1);
    width: 100%
}
#breadcrumb li:last-child::after {
    display: none
}
#breadcrumb li a span {
    text-transform: capitalize
}
.liste-3 .box-titre .imgtitre, .box-race .img, .box-saillie-mini .box-parents .pere .img, .box-saillie-mini .box-parents .mere .img, .gridifich-saillie a .pict,  .box-saillie .pere img, .box-saillie .mere img, .box-saillie .regroup .pere .img, .box-saillie .mere .img, .pedifich .img-p, .pedifich .gp .img-gp, .gal-0, .pedimg, .gal-item, .gal-princ {
    background: url(/media/sans.png) no-repeat 50% 50%;
    background-color: color-mix(in oklab, var(--gr-0) 50%, transparent);
    background-size: 25%
}
.box-rech-reg .img {
    background: url(/media/vign-chiot-gris.png) no-repeat 50% 50%;
    background-color: var(--gr-0)
}
.box-rech-reg .pays {
    color: var(--gr-2);
    margin-bottom: .25rem
}
.list_box_200, .list_box_240, .list_box_300 {
    display: grid;
    grid-gap: 1rem
}
.list_box_200 {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
}
.list_box_240 {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))
}
.list_box_5 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: calc(1rem + 1vw);
}
.list_box_4 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;

}
.list_box_3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem
}
.list_box_2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem
}
.list_box_300 {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
}
.list_box_elv {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
    gap: 1.5rem;
    grid-gap: clamp(0rem, 5vw, 1em) clamp(0rem, 5vw, 2rem)
}
.list_box_saillie {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: clamp(0rem, 5vw, 1.5em) clamp(0rem, 5vw, 2rem)
}
.list_box_chiot  {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
    grid-gap: 1.5rem 3%;
    justify-content: space-between;
    margin-bottom: var(--ec-1)
}

.ad-cmp {
    grid-column: 1 / span 4;
}

.video {
    display: flex;
    justify-content: center;
    border: 1px solid var(--gr-1);
    padding: calc(1rem + 1vw);
    border-radius: var(--radius);
}

.embed-video { max-width: 800px; width: 100%; aspect-ratio: 3 / 2; margin: auto; }


@media only screen and (max-width:1644px ) {
    .ad-cmp {  grid-column: 1 / span 3    }
}

@media only screen and (max-width:1400px ) {
    .ad-cmp {  grid-column: 1 / span 4    }
}
@media only screen and (max-width:1295px ) {
    .ad-cmp {  grid-column: 1 / span 3    }
}

@media only screen and (max-width:940px ) {
    .ad-cmp {  grid-column: 1 / span 2    }
}

.all-data-cadre { position: relative; font-size: 16px; }
.all-data-acces { text-align: center; margin-bottom: var(--size-md); position: sticky; top: 0; border: 1px dashed var(--gr-2); border-top: 0; padding: var(--ec-3) 0; background-color: var(--rev-white); border-radius: 0 0 var(--radius) var(--radius) ;}
.all-data-acces > div {  font-size: .9em; margin-bottom: var(--size-sm); color: var(--color-2);}
.all-data-acces #choix_race { padding: var(--size-sm) var(--size-md); border-radius: var(--radius); background-color: var(--rev-white);    border: 1px solid var(--gr-2);    font-size: 1em; margin: auto; font-size: .9em; max-width: 90%; }
.all-data-h1 { padding: var(--ec-2); border-radius: var(--radius) var(--radius) 0 0; background-color: var(--color-2); text-align: center; color: var(--rev-white); position: relative; overflow: hidden; text-shadow: 0 0 16px hsl(0deg 0% 0% / 34%); margin-bottom: 0; }
.all-data-h1 svg  { fill: var(--rev-white);    height: 150px;    position: absolute;    right: 0;    rotate: 25deg;    opacity: .25;    top: -10px; }
.list { display: grid; gap: var(--ec-4); grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); margin-bottom: var(--size-lg); }
.all-data a { display: inline-block; color: var(--color-1); }
.all-data h2 a { margin-bottom: var(--size-sm); font-weight: bold; font-size: 1.6rem; color : var(--color-2)}
.list > div { background-color: var(--gr-0); border-radius: var(--radius); padding: var(--size-md);}
.all-data .race      { font-size :1.4em; font-weight:bold; color: var(--color-2); margin-bottom: var(--size-md);}
.all-data .region    { font-size :1.15em; font-weight:600; color: var(--color-1); margin-bottom: var(--size-md);}
.all-data .dep { color : var(--gr-4); display: inline-block; }
.all-data .dep:hover { color : var(--color-2) }
.all-data div > div  { margin-bottom: var(--size-sm); }
.all-data-footer { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap : var(--ec-3);  }
.all-data-footer a { display: inline-flex; align-items: center; flex : 1; padding: var(--ec-3); background-color: var(--gr-0); border-radius : var(--radius);     justify-content: center; }

.all-data:target { padding-top: 120px;}

.sensi { font-size: clamp(1rem, 2vw, 1.2rem); font-family: 'Marianne'; display: flex; background-color: #ffdd00; color: #000; font-weight: 600;  padding: 3.5%  ; gap: 1rem; line-height: 1.6rem; }
.sensi > div:first-child { display: flex; flex-direction: column; justify-content: center; }
.sensi p { display: inline; line-height: 1.75rem;}
.sensi a { color: hsl(203, 68%, 48%)}
.sensi .log-rf { flex-shrink: 0; background: #FFF url(/media/log-rf.png) no-repeat 50% 0%; background-size: contain; width: 100px; height: 100px; margin: 0 0 0 auto;}

@media only screen and (max-width:1000px ) {
    .sensi div a { line-break: anywhere;}
}

/***************************************************************/
/*************************** FIDANIMO **************************/
/***************************************************************/

/* VISU UNE CASE */
a.ban-fida-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: var(--color-1);
    padding: 0.25rem 0.25rem 0.5rem 0.2rem;
    /*
    outline: 3px solid hsl(220deg 35.29% 80% / 66%);
    background-color: hsl(220deg 35.29% 80% / 33%);
    */
    border-radius: 0.5rem;

    position: relative;
}

a.ban-fida-1 .info { padding:  .5em ; color: var(--color-1); font-weight: normal;}
a.ban-fida-1 .info .g { text-decoration: underline; font-weight: 600;  transition: .25s ease-in-out;}
a.ban-fida-1:hover .info .g { color: #ff4802;}


a.ban-fida-1 .ban-fida-visu-1, a.ban-fida-1 .ban-fida-visu-2    {
    width: 100%;
    background-size: contain;
    margin-bottom: var(--size-sm);
    height: 220px;
}


.ban-fida-visu-1   { background:  url(/media/assurance/fidanimo-assurance-chien-2-3.svg) no-repeat 50% 0% }
.ban-fida-visu-2   { background:  url(/media/assurance/fidanimo-assurance-chien-4.svg) no-repeat 50% 0% }

a.ban-fida-1 .info .mob-off, a.ban-fida-2 .info .mob-off { display: block;}
a.ban-fida-1 .info .mob-on, a.ban-fida-2 .info .mob-on { display: none;}

/* VISU DEUX CASES */

a.ban-fida-2 .ban-fida-bg {      display: flex;     background: hsl(219.13deg 31.77% 44.71% / 48%) url(/media/assurance/blob.svg) no-repeat -240px -5%;    background-size: cover;     padding: 1.2rem .8rem;    border-radius: 0.5rem;     position: relative;    border-radius:.5rem;    justify-content: flex-end;    align-items: center;}
.dark a.ban-fida-2 .ban-fida-bg { background-image:url(/media/assurance/blob-dark.svg); }
a.ban-fida-2 { display: flex;    flex-direction: column;    border-radius: 0.5rem; background-size: 100%;   position: relative;     overflow: hidden;    min-height: 220px;    height: 100%;     padding: .2rem;  }
a.ban-fida-2:hover { outline : 3px solid hsl(220deg 35.29% 80% / 66%);}
.coeur-1 { position: absolute; top: 10px; right: 9px; width: 15px; height: 16px; background : url(/media/assurance/coeur-1.svg) no-repeat 50% 0% }
a.ban-fida-2 .info { position: relative;    font-size: 1.05em;    display: flex;    gap: 1em;    align-items: center;    padding: 1em;    z-index: 1;        color: var(--color-1);    font-weight: normal;    border-radius: 0.4rem;    background-color: var(--rev-white);      width: 60%;    box-shadow: 3px 3px rgb(31 72 154 / 10%);}
a.ban-fida-2 .info div:last-child {      position: absolute;    flex-shrink: 0;    width: 32px;    height: 32px;    background-color: #fd5f1e;    border-radius: 50%;    display: flex;    align-items: center;    justify-content: center;    right: 5%;    bottom: -16px;}
a.ban-fida-2 .fleche { fill: var(--rev-white) }
a.ban-fida-2 .ban-fida-logo {    display: flex;    align-items: center;    justify-content: center;     width: 50%;    z-index: 1;    height: 100%;    margin-left: auto;}
a.ban-fida-2 .ban-fida-logo::after {    content: '';    width: 80%;    max-height: 80px;    height: 100%;    display: block;    background: url(/media/assurance/logo.svg) no-repeat 50% 0%;    background-size: contain; }
a.ban-fida-2 .ban-fida-feuille {    background:  url(/media/assurance/feuille.svg) no-repeat 0 0;    width: 100%;    min-height: 300px;    height: 100%;    position: absolute;    background-size: contain;    left: 7%;    top: 50%; }
a.ban-fida-2 .ban-fida-visu {    background:  url(/media/assurance/fidanimo-assurance-chien-1-3.svg) no-repeat 10px 10px;    flex-shrink: 0;    width: 50%;    height: 300px;     position: absolute;    background-size: 90%;    left: 5px;    top: 5px; }
a.ban-fida-2 .info div .g { font-weight: bold; }
a.ban-fida-2 .info::after {    position: absolute;    content : '';    top: 30px;    left:-16px;    width: 0;    height: 0;    border-right: 16px solid transparent;    border-left: 16px solid transparent;    border-top: 20px solid var(--rev-white); }
.ban-coul { color : #fd5f1e;text-decoration: underline; font-weight: bold; }
a.ban-fida-2 .ban-fida-visu { background-size: 98%; width: 100%; position: relative; height: 220px;order:1; bottom : auto; top: 0; }
a.ban-fida-2 .ban-fida-bg { background-color: transparent; order : 2; padding: 10px 0 0 0; }
a.ban-fida-2 .ban-fida-bg .info { width: 100%; padding: 0; box-shadow: none;   }
a.ban-fida-2 .ban-fida-bg .info div:last-child {display: none;}
a.ban-fida-2 .ban-fida-logo  { order: 3; }
a.ban-fida-2 .ban-fida-logo::after   { height: 35px; right: 10px; position: absolute; top: 10px; max-width: 80px; }
a.ban-fida-2 .ban-fida-feuille, a.ban-fida-2 .info::after, .coeur-1 { display: none }
a.ban-fida-1 .info, a.ban-fida-2 .ban-fida-bg .info {font-size: .9rem; padding:.1rem .5rem .5rem .5rem ; background-color: transparent; }


@media only screen and (max-width: 1350px) {
    a.ban-fida-2 .ban-fida-logo::after { height: 70px; }
    a.ban-fida-2 .ban-fida-feuille { left: -20px; }
    a.ban-fida-2 .info div:last-child { position: absolute; bottom: 0; bottom: -16px; right: 18px;}
    a.ban-fida-2 .ban-fida-visu { background-size: 100% }
    .content .various { position:relative; align-self:auto     }
}

@media only screen and (max-width:1000px ) {
    a.ban-fida-2 { grid-column: span 1; padding : .25rem 0.25rem 0.5rem 0.2rem; /*outline: 3px solid hsl(220deg 35.29% 80% / 66%); background-color: hsl(220deg 35.29% 80% / 33%); */border-radius: 0.5rem; }
    a.ban-fida-2 .ban-fida-visu { background-size: 98%; width: 100%; position: relative; height: 220px;order:1; bottom : auto; top: 0; }
    a.ban-fida-2 .ban-fida-bg { background-color: transparent; order : 2; padding: 10px 0 0 0; }
    a.ban-fida-2 .ban-fida-bg .info { width: 100%; padding: 0; box-shadow: none;   }
    a.ban-fida-2 .ban-fida-bg .info div:last-child {display: none;}
    a.ban-fida-2 .ban-fida-logo  { order: 3; }
    a.ban-fida-2 .ban-fida-logo::after   { height: 35px; right: 10px; position: absolute; top: 10px; max-width: 80px; }
    a.ban-fida-2 .ban-fida-feuille, a.ban-fida-2 .info::after, .coeur-1 { display: none }
    a.ban-fida-1 .info, a.ban-fida-2 .ban-fida-bg .info {font-size: .9rem; padding:.1rem .5rem .5rem .5rem ; background-color: transparent; }
    .ban-fida-logo::after { height: 60px; }
}


@media only screen and (max-width:767px) {
    a.ban-fida-2 { grid-column: span 1; padding : .25rem 0.25rem 0.5rem 0.2rem;  }
    a.ban-fida-2 .ban-fida-visu { background-size: 98%; width: 100%; position: relative; height: 220px;order:1; bottom : auto; top: 0; }
    a.ban-fida-2 .ban-fida-bg { background-color: transparent; order : 2; padding: 10px 0 0 0; }
    a.ban-fida-2 .ban-fida-bg .info { width: 100%; padding: 0; box-shadow: none;   }
    a.ban-fida-2 .ban-fida-bg .info div:last-child {display: none;}
    a.ban-fida-2 .ban-fida-logo  { order: 3; }
    a.ban-fida-2 .ban-fida-logo::after   { height: 35px; right: 10px; position: absolute; top: 10px; max-width: 80px; }
    a.ban-fida-2 .ban-fida-feuille, a.ban-fida-2 .info::after, .coeur-1 { display: none }
    a.ban-fida-1 .info, a.ban-fida-2 .ban-fida-bg .info {font-size: .9rem; padding:.1rem .5rem .5rem .5rem ; background-color: transparent; }
    .alerte span:last-child, .alerte .supp  { display: none}
    .alerte { padding: 0; margin-left: .5rem; }
}

@media only screen and (max-width:550px) {
    a.ban-fida-2 .ban-fida-logo::after   { height: 25px; width: 60px; right: 4px}
    a.ban-fida-2 .ban-fida-bg .info { font-size: .85em; width: 100% }
    a.ban-fida-1 .info .mob-off, a.ban-fida-2 .info .mob-off { display: none;}
    a.ban-fida-1 .info .mob-on, a.ban-fida-2 .info .mob-on { display: block;}
}

@media only screen and (max-width:410px) {
    a.ban-fida-2 .ban-fida-visu { height: 150px}
}

/***************************************************************/
/***************************************************************/
.list_box_portee {    display: grid;    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));    grid-gap: 1.25rem 2rem;    justify-content: space-between;    margin-bottom: var(--ec-1)}
.box-portee {     display: flex;    flex-direction: column;    transition: .2s ease-in-out;     position: relative;    padding: var(--size-md);    border-radius: var(--radius-1);    margin-bottom: var(--size-md);    border: 2px solid var(--gr-2);    background-color: var(--rev-white);   text-align: center; }
.box-portee:hover { border-color: var(--gr-4) }
.box-portee .box-int-1 { color: var(--color-1);font-weight: bold; font-size: 1.1rem;  }
.box-portee .box-int-2 { margin-bottom: .2rem; }
.box-portee .box-int-3 { color: var(--address); font-size: .8rem; margin-bottom: .5rem; }
.box-portee .box-list-chiot { display: flex; gap:1rem; background-color: var(--gr-0); border-radius: 1rem;align-items: center; }
.box-portee .box-list-chiot .box-img { flex-shrink: 0; overflow: hidden; width: 100px; height: 80px; border-radius: 1rem}
.box-portee .box-list-chiot .box-img  img { width: 100%; height: 100%; object-fit: cover}
.box-portee .box-list-chiot .box-info-chiot { text-align: left; flex-grow: 1}
.box-portee .box-list-chiot .box-info-chiot .nom { margin-bottom: .1rem; text-transform:lowercase}
.box-portee .box-list-chiot .box-info-chiot .nom:first-letter { text-transform:uppercase}
.box-portee .box-list-chiot .box-info-chiot .nom { font-weight: bold;   margin-bottom: .1rem}
.box-portee .box-list-chiot .box-info-chiot .nom.male {color:var(--male);}
.box-portee .box-list-chiot .box-info-chiot .nom.femelle {color:var(--femelle);}
.box-portee .box-list-chiot .box-info-chiot .sexe { color:var(--color-1); font-size: .9rem;  }
.box-portee .box-list-chiot .box-info-chiot .prix { color:var(--gr-3); font-size: .9rem; margin-top: .25rem; }


.box-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-1);
    background-color: hsl(223deg 27% 92%);
    padding: .75rem;
    border-radius: var(--radius);
}
.dark .box-title {
    background-color: hsl(207deg 17% 24%)
}
.info-ac {
    display: flex;
    border-radius: var(--radius-1);
    gap: 3rem;
    line-height: 1.2rem;
    padding: 2rem;
    border: 1px solid var(--gr-1)
}
.info-ac .info-1, .info-ac .info-2, .info-ac .info-3 {
    width: 33%
}
.info-ac div p {
    margin-bottom: 1.5rem
}
.info-ac div p:last-child {
    margin-bottom: 0
}
.info-ac div .g {
    color: var(--color-2)
}

.info-ac .info-1 div:first-child, .info-ac .info-2 div:first-child, .info-ac .info-3 div:first-child {    margin-bottom: 1.5rem;    background-size: cover;    width: 100%;    height: 320px; }
.info-ac .info-2 div:first-child { background: url(/media/info-2.jpg) 50% 50% no-repeat; background-size: cover; }
.info-ac .info-3 div:first-child { background: url(/media/info-3.jpg) 50% 50% no-repeat; background-size: cover; }
.info-ac .info-1 div:first-child { background: url(/media/info-1.jpg) 50% 50% no-repeat; background-size: cover; }

.list_box_region {
    display: grid;
    grid-gap: 1.5vw;
    grid-template-columns: 1fr 1fr 1fr;
    margin-bottom: var(--resp)
}
.list_box_region a {
    border-radius: var(--radius-1);
    border: 2px solid var(--gr-1);
    padding: var(--size-sm);
    text-align: center
}
.list_box_region a:hover {
    border-color: var(--gr-3)
}
.list_box_region a span {
    display: block
}
.list_box_region a span:first-child {
    margin-bottom: var(--size-xs)
}
.list_box_region a span:first-child {
    color: var(--color-1);
    font-weight: 700
}
.list_box_region a span:last-child {
    color: var(--gr-4)
}
.mention {
    padding-left: 1rem;
    margin-bottom: 1rem
}
.mention .int {
    color: var(--color-2);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: var(--size-xs)
}

.box-saillie {
    transition: .2s;
    position: relative;
    padding: var(--size-md);
    border-radius: var(--radius-1);
    border: 2px solid var(--gr-1);
    background-color: var(--rev-white);
    justify-content: space-between;
    text-align: center;
    display: flex;
    padding: 1rem;
    flex-direction: column
}
.box-saillie:hover {
    border-color: var(--gr-2)
}
.box-head {
    width: 100%;
    margin-bottom: var(--size-sm2)
}
.box-head .race {
    font-size: 1.1rem;
    color: var(--color-1);
    font-weight: 700
}
.box-head .date-saillie {
    color: var(--color-1)
}
.box-head .affixe {
    font-size: 1.1rem;
    margin-bottom: var(--size-xs);
    color: var(--saillie);
    font-weight: 700
}
.box-head .entete {
    color: var(--gr-3);
    margin-bottom: var(--size-xs);
    font-size: .9rem
}
.box-saillie .regroup {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    flex-grow: 1;
    margin-bottom: var(--size-sm);
    font-size: .9rem
}
.box-saillie .regroup .pere, .box-saillie .regroup .mere {
    flex: 1;
}
.box-saillie .regroup .pere .img, .box-saillie .mere .img {
    aspect-ratio: 4/3;
    margin-bottom: var(--size-sm);
    overflow: hidden;
    border-radius: var(--radius)
}
.box-saillie .regroup .pere img, .box-saillie .mere img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.box-saillie .regroup .pere .nom_complet, .box-saillie .regroup .mere .nom_complet {
    color: var(--color-1)
}
.box-saillie .regroup .pere .sexe, .box-saillie .regroup .mere .sexe {
    font-weight: 700
}
.box-saillie .regroup .pere .sexe {
    color: var(--male)
}
.box-saillie .regroup .mere .sexe {
    color: var(--femelle)
}
.box-saillie .regroup .nom_complet span {
    font-weight: 700;
    width: 100%;
    display: block
}
.box-saillie .regroup .date {
    margin: auto;
    margin-top: var(--size-md);
    color: var(--rev-white);
    font-size: .9rem;
    padding: .25rem .75rem;
    background-color: var(--gr-3);
    border-radius: var(--radius-1)
}
.box-saillie .lieu {
    color: var(--gr-3);
    font-size: .9rem;
    padding-top: .25rem
}
.box-saillie-mini .box-parents {
    border: 1px solid var(--gr-1);
    padding: var(--size-sm) var(--size-md);
    display: flex;
    justify-content: space-between;
    text-align: center;
    flex-wrap: wrap;
    gap: .5rem;
    transition: .2s ease-in-out;
    border-radius: var(--radius);
    margin-bottom: var(--size-sm);
    height: 260px;
}
.box-saillie-mini .box-parents .pere, .box-saillie-mini .box-parents .mere { flex : 1 }
.box-saillie-mini .box-parents .pere .int, .box-saillie-mini .box-parents .mere .int {
    color: var(--rev-white);
    border-radius: 0 0 .5rem .5rem;padding: 0.4rem;
    font-size: .9rem;
}
.box-saillie-mini .box-parents .mere .int {
    background-color: var(--femelle);
}

.box-saillie-mini .box-parents .pere .int {
    background-color: var(--male);
}

.box-saillie-mini .box-parents .pere .img, .box-saillie-mini .box-parents .mere .img {
    background-color: var(--gr-0);
    border-radius: var(--radius) var(--radius) 0 0;
    height: 110px;
    overflow: hidden;
    position: relative
}
.box-saillie-mini .box-parents .pere .img img, .box-saillie-mini .box-parents .mere .img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.box-saillie-mini .box-int-1 {
    font-size: 1.1rem;
    color: var(--color-3);
    margin-bottom: var(--size-xs);
    font-weight: 700;
    color: var(--address)
}
.box-saillie-mini .box-int-2 {
    text-transform: lowercase;
    color: var(--color-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;line-height: 1.1rem;
}
.box-saillie-mini .box-int-3 {
    margin-top: var(--size-xs);
    font-size: .8rem;
    color: var(--gr-3)
}
.box-saillie-mini .entete {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-weight: bold;
    line-height: 1.1rem;
    text-align: center;
    color: var(--color-1);
    width: 100%
}
.box-saillie-mini .entete span {
    font-size: .8rem; display: block;color: var(--gr-3);font-weight: normal
}
.box-saillie-mini:hover .box-parents {
    box-shadow: 0 0 0 4px var(--gr-1)
}
.gridifich-saillie {
    display: flex;
    gap: 1rem;
    transition: .2s ease-in-out;
    position: relative;
    margin-bottom: var(--resp);
    background-color: var(--rev-white);
    justify-content: space-between
}
.gridifich-saillie a {
    padding: var(--size-md);
    display: block;
    width: 49.5%;
    text-align: center;
    gap: 1rem;
    text-align: center;
    border-radius: var(--radius)
}
.gridifich-saillie a div:first-child {
    font-size: .8rem;
    color: var(--color-1);
    text-transform: uppercase
}
.gridifich-saillie a .nom {
    font-weight: 700;
    font-size: clamp(.9rem, 3vw, 1.2rem);
    margin-bottom: var(--size-xs)
}
.gridifich-saillie a.pere {
    color: var(--male);
    border: 1px solid var(--male)
}
.gridifich-saillie a.femelle {
    color: var(--femelle);
    border: 1px solid var(--femelle)
}
.gridifich-saillie .list-etoile div {
    font-size: 1.1em
}
.gridifich-saillie a .pict {
    display: flex;
    height: 14rem;
    max-width: 16rem;
    margin: 0 auto .5rem auto;
    overflow: hidden;
    border-radius: var(--radius-1)
}
.gridifich-saillie a .pict img {
    object-fit: cover;
    width: 100%
}
.box-rech-reg {
    border: 2px solid var(--gr-2);
    border-radius: 3rem;
    padding: var(--size-sm);
    display: flex;
    gap: .75rem;
    background-color: hsl(223deg 30% 96% / 5%)
}
.box-rech-reg:hover {
    border-color: var(--gr-4);
    background-color: transparent
}
.box-rech-reg .img {
    width: 4rem;
    height: 4rem;
    display: flex;
    position: relative;
    overflow: hidden;
    border-radius: 50%
}
.box-rech-reg .regroup {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center
}
.box-rech-reg .img img {
    object-fit: cover;
    width: 90px; max-height: 100px;
}
.box-rech-reg .img div {
    display: none;
    position: absolute;
    color: #F0F0F0;
    width: 100%;
    font-size: .65rem;
    background-color: hsla(0, 0%, 0%, .5);
    bottom: 0;
    padding: .4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
.box-rech-reg .box-int-1 {
    font-size: 1.1rem;
    color: var(--color-3);
    margin-bottom: var(--size-xs);
    font-weight: 700
}
.box-rech-reg .box-int-2 {
    color: var(--color-2);
    margin-bottom: var(--size-sm)
}
.box-1 {
    min-height: 16rem;
    position: relative;
    border: 0 solid var(--gr-1);
    border-radius: var(--radius);
    transition: 2s ease-in-out;
}

.box-1:hover  .box-img { outline: 3px solid var(--gr-2) }

.box-1 .box-img, .box-4 .box-img {
    position: relative;  overflow: hidden; text-align: center; display: flex; align-items: center; justify-content: center;
    background: color-mix(in oklab, var(--gr-0) 50%, transparent) url(/media/sans.png) no-repeat 50% 50%;
    background-size: 40%;

}
.box-1 .box-img { border-radius: var(--radius); height: 260px; margin-bottom: var(--size-sm);}
.box-4 .box-img { border-radius: var(--radius) var(--radius)  0 0; height: 220px; margin-bottom: var(--size-md);}

.box-1 .box-img img, .box-4 .box-img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.box-1 .box-int-1 {
    text-transform: lowercase;
    font-size: 1.1rem;
    color: var(--color-3);
    font-weight: 700;
}
.box-1 .box-int-1:first-letter {
    text-transform: uppercase
}
.box-1 .box-img-txt {
    transition: .2s ease-in-out;
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    background: linear-gradient(180deg, rgba(176, 17, 93, 0) 0%, rgb(0 0 0 / 75%) 100%);
    text-align: left;
    width: 100%;
    color: #FFF;
    padding: .65rem;
    position: absolute;
    bottom: 0;
    text-shadow: 0 0 5px hsl(0deg 0% 0% / 45%)
}
.box-1 .box-img-txt span:first-child {
    width: 60%
}
.box-1 .box-img-txt span:last-child {
    text-align: right;
    width: 100%
}
.box-1.cadre .box-img-txt {
    background-color: hsla(0, 0%, 0%, .25)
}
.box-1.cadre.male .box-img-txt {
    background: rgb(40 144 207 / 65%);
}
.box-1.cadre.femelle .box-img-txt {
    background: rgb(223 46 131 / 51%)
}
.box-1 .box-int-1, .box-1 .box-int-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 230px
}
.box-1 .box-int-1 {
    line-height: 1.4rem
}
.box-1 .box-int-2 {
    line-height: 1.1rem
}
.box-1 .box-int-2 {
    text-transform: lowercase;
    color: var(--color-1)
}
.box-1 .box-int-3 {
    font-size: .8rem;
    color: var(--gr-3);
    text-transform: lowercase;
    line-height: 1rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}
.box-1 .box-int-3 div {
    display: inline-block
}
.box-1 .box-int-3 div::first-letter {
    text-transform: uppercase
}
.box-1 .vignette {
    top: 130px;
    border-radius: 50%;
    display: flex;
    bottom: 100px;
    right: 5px;
    width: 60px;
    height: 60px;
    justify-content: center;
    align-items: center;
    position: absolute
}
.box-1 .vignette img {
    max-width: 60px
}
.box-1.male .vignette:before {
    background-color: var(--male)
}
.box-1.femelle .vignette:before {
    background-color: var(--femelle)
}
.box-1.cadre {
    position: relative
}

.box-1.male.cadre .box-img { outline: 6px solid var(--male); }
.box-1.femelle.cadre .box-img { outline: 6px solid var(--femelle); }


.box-1.male.cadre:hover .box-img-txt, .box-1.femelle.cadre:hover .box-img-txt {
    background-color: rgba(0, 0, 0, .82)
}

.box-1.male.cadre .box-img-txt-2, .box-1.femelle.cadre .box-img-txt-2 {
    background: none;
    text-shadow: none;
    background-color: rgb(0 0 0 / 40%)
}
.box-1 .box-int-1, .box-1 .box-int-2, .box-1 .box-int-3, .box-saillie-mini .box-int-1, .box-saillie-mini .box-int-2, .box-saillie-mini .box-int-3 {
    padding-left: .5rem
}
.male, .box-1.male .box-int-1 {
    color: var(--male)
}
.femelle, .box-1.femelle .box-int-1 {
    color: var(--femelle)
}
.bg-1 .f-1 {
    background-color: transparent
}
.box-2 {
    display: flex;
    transition: .2s ease-in-out;
    min-height: 11rem;
    position: relative;
    padding: var(--size-md) var(--size-md) var(--size-xl) var(--size-md);
    border-radius: var(--radius-1);
    margin-bottom: var(--size-md);
    border: 2px solid var(--gr-2);
    background-color: var(--rev-white)
}
.box-2:hover {
    border-color: var(--gr-4)
}
.box-2 .box-img {
    height: 100px;
    width: 100px;
    overflow: hidden;
    flex-shrink: 0;
    border-radius: var(--radius-1);
    position: relative;
    margin-right: var(--size-md)
}
.box-2 .box-img img {
    object-fit: cover;
    width: 100%;
    max-width: 435px;
    height: 100%
}
.box-2 .box-int-1 {
    font-size: .9rem;
    color: var(--color-3);
    margin-bottom: var(--size-xs)
}
.box-2 .box-int-2 {
    font-weight: 700;
    margin-bottom: var(--size-xs);
    text-transform: uppercase;
    color: var(--color-1)
}
.box-2 .box-int-3 {
    color: var(--gr-4);
    margin-bottom: var(--size-xs);
    max-height: 51px;
    overflow: hidden;
    font-size: .9rem;
    line-height: 1.05rem;
    position: relative;
    word-break: break-word;
    text-transform: lowercase
}
.box-2 .box-int-3:after {
    content: ".."
}
.box-2 .box-int-3:first-letter {
    text-transform: uppercase
}
.box-2 .box-int-4 {
    color: var(--address);
    font-size: .9rem;
    display: flex;
    align-items: center;
    margin-bottom: var(--size-xs)
}
.box-2 .box-int-4 span {
    margin-right: var(--size-xs);
    font-size: 14px
}
.box-2 .box-activite {
    display: flex;
    flex-direction: row;
    position: absolute;
    justify-content: flex-end;
    right: var(--size-lg);
    bottom: -20px
}
.box-2 .box-activite div {
    flex-direction: column;
    border-radius: 50%;
    width: 65px;
    height: 65px;
    background-color: var(--gr-1);
    margin-left: var(--size-sm);
    color: var(--rev-white);
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    align-items: center;
    text-shadow: 0 0 4px rgb(0 0 0 / 15%)
}
.box-2 .box-activite div:first-child {
    margin-left: 0
}
.box-2 .box-activite div span {
    font-weight: 700;
    font-size: .9rem
}
.box-2 .box-activite div span:first-child {
    line-height: .8rem
}
.box-2 .box-activite div.saillie {
    background-color: var(--male)
}
.box-2 .box-activite div.chiot {
    background-color: var(--femelle)
}
.box-2 .box-activite div.etalon {
    background-color: var(--etalon)
}

.dark .box-2.theme-vip-1,
.dark .box-2.theme-vip-2,
.dark .box-2.theme-vip-3,
.dark .box-2.theme-vip-4,
.dark .box-2.theme-vip-5,
.dark .box-2.theme-vip-6,
.dark .box-2.theme-vip-7,
.dark .box-2.theme-vip-8,
.dark .box-2.theme-vip-9,
.dark .box-2.theme-vip-10,
.dark .box-2.theme-vip-13,
.dark .box-2.theme-vip-14,
.dark .box-2.theme-vip-17,
.dark .box-2.theme-vip-18,
.dark .box-2.theme-vip-19,
.dark .box-2.theme-vip-20 {
    border: 2px solid #000
}

.theme-vip-1 .supvip, .theme-vip-2 .supvip, .theme-vip-3 .supvip {
    background-image: url(/media/themevip/ornement1/orn.png);
    top: -6px;
    left: -5px;
    width: 45px;
    height: 45px
}
.box-2.theme-vip-1, .box-2.theme-vip-2, .box-2.theme-vip-3 {
    border: 2px solid hsl(271deg 52% 76%)
}
.box-2.theme-vip-1:hover, .box-2.theme-vip-2:hover, .box-2.theme-vip-3:hover {
    border: 2px solid hsl(271deg 52% 46%)
}
.box-2.theme-vip-4, .box-2.theme-vip-5, .box-2.theme-vip-6, .box-2.theme-vip-7, .box-2.theme-vip-8, .box-2.theme-vip-9, .box-2.theme-vip-10, .box-2.theme-vip-13, .box-2.theme-vip-14, .box-2.theme-vip-17, .box-2.theme-vip-18, .box-2.theme-vip-19, .box-2.theme-vip-20 {
    transition: .2s ease-in-out
}
.theme-vip-5 .supvip {
    background-image: url(/media/themevip/printemps/orn.png);
    top: -3px;
    left: -9px;
    width: 32px;
    height: 32px
}
.box-2.theme-vip-5 {
    border: 2px solid hsl(87deg 42% 64%)
}
.box-2.theme-vip-5:hover {
    border: 2px solid hsl(87deg 42% 34%)
}
.theme-vip-6 .supvip {
    background-image: url(/media/themevip/automne/orn.png);
    top: -3px;
    left: -8px;
    width: 45px;
    height: 32px
}
.box-2.theme-vip-6 {
    border: 2px solid hsl(37deg 75% 72%)
}
.box-2.theme-vip-6:hover {
    border: 2px solid hsl(37deg 75% 42%)
}
.theme-vip-7 .supvip {
    background-image: url(/media/themevip/hiver/orn.png);
    top: -10px;
    left: -18px;
    width: 45px;
    height: 45px
}
.box-2.theme-vip-7 {
    border: 2px solid hsl(216deg 86% 77%)
}
.box-2.theme-vip-7:hover {
    border: 2px solid hsl(216deg 86% 47%)
}

.theme-vip-8 .supvip {
    background-image: url(/media/themevip/love/orn.png);
    top: -3px;
    left: -10px;
    width: 38px;
    height: 30px
}
.box-2.theme-vip-8 {
    border: 2px solid hsl(339deg 89% 79%)
}
.box-2.theme-vip-8:hover {
    border: 2px solid hsl(339deg 89% 49%)
}
.theme-vip-9 .supvip {
    background-image: url(/media/themevip/mer/orn.png);
    top: 2px;
    left: -14px;
    width: 38px;
    height: 30px
}
.box-2.theme-vip-9 {
    border: 2px solid hsl(203deg 50% 69%)
}
.box-2.theme-vip-9:hover {
    border: 2px solid hsl(203deg 50% 39%)
}
.theme-vip-10 .supvip {
    background-image: url(/media/themevip/rose-blanche/orn.png);
    top: -4px;
    left: -18px;
    width: 45px;
    height: 38px
}
.box-2.theme-vip-10 {
    border: 2px solid hsl(68deg 20% 66%)
}
.box-2.theme-vip-10:hover {
    border: 2px solid hsl(68deg 20% 36%)
}
.theme-vip-13 .supvip {
    background-image: url(/media/themevip/rose-rouge/orn.png);
    top: -2px;
    left: -15px;
    width: 45px;
    height: 28px
}
.box-2.theme-vip-13 {
    border: 2px solid hsl(0deg 67% 77%)
}
.box-2.theme-vip-13:hover {
    border: 2px solid hsl(0deg 67% 47%)
}
.theme-vip-14 .supvip {
    background-image: url(/media/themevip/truffes/orn.png);
    top: -7px;
    left: -7px;
    width: 45px;
    height: 35px
}
.box-2.theme-vip-14 {
    border: 2px solid hsl(15deg 40% 66%)
}
.box-2.theme-vip-14:hover {
    border: 2px solid hsl(15deg 40% 36%)
}
.theme-vip-17 .supvip {
    background-image: url(/media/themevip/saint-valentin/orn.png);
    top: -1px;
    left: -18px;
    width: 47px;
    height: 30px;
    width: 45px;
    height: 45px
}
.box-2.theme-vip-17 {
    border: 2px solid hsl(203deg 62% 63%)
}
.box-2.theme-vip-17:hover {
    border: 2px solid hsl(203deg 62% 33%)
}
.theme-vip-4 .supvip, .theme-vip-18 .supvip, .theme-vip-19 .supvip, .theme-vip-20 .supvip {
    background-image: url(/media/themevip/noel/orn.png);
    top: -14px;
    left: calc(50% - 36px);
    width: 72px;
    height: 25px
}
.box-2.theme-vip-4, .box-2.theme-vip-18, .box-2.theme-vip-19, .box-2.theme-vip-20 {
    border: 2px solid hsl(178deg 34% 65%)
}
.box-2.theme-vip-4:hover, .box-2.theme-vip-18:hover, .box-2.theme-vip-19:hover, .box-2.theme-vip-20:hover {
    border: 2px solid hsl(178deg 34% 35%)
}
.supvip {
    z-index: 0;
    position: absolute;
    background-repeat: no-repeat
}
.box-2-conseil {
    display: flex;
    order: 3;
    border-radius: var(--radius-1);
    overflow: hidden;
    margin-bottom: var(--size-md)
}
.box-2-conseil .txt {
    color: var(--color-4);
    max-width: 50%;
    font-size: 2rem;
    padding: var(--size-md);
    text-align: center;
    display: flex;
    align-items: center
}
.box-2-conseil .txt div span:first-child {
    color: var(--etalon)
}
.box-2-conseil .txt div span:last-child {
    color: var(--gr-3)
}
.box-2-conseil .img {
    flex-grow: 1;
    background: url(/media/conseil.jpg) no-repeat 100% 0;
    background-size: cover
}
.box-2-sm {
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid var(--gr-2);
    padding: .8rem;
    background-color: var(--rev-white);
    border-radius: var(--radius)
}
.box-2-sm:hover {
    border-color: var(--gr-4)
}
.box-2-sm .box-regroup {
    flex-grow: 1
}
.box-2-sm .box-int-1 {
    text-transform: uppercase;
    color: var(--color-1);
    font-size: .9rem;
    line-height: 1.1rem;
    font-weight: 600
}
.box-2-sm .box-int-2 {
    color: var(--gr-4);
    font-size: .9rem;
    display: flex;
    align-items: center;
    margin-bottom: var(--size-xs)
}
.box-2-sm .box-int-3 {
    color: var(--address);
    font-size: .9rem;
    display: flex;
    align-items: center;
    text-transform: lowercase;
    margin-bottom: var(--size-sm)
}
.box-2-sm .box-int-3 span:first-letter {
    text-transform: uppercase;
    margin-left: .5rem
}
.box-2-sm .box-activite {
    display: flex;
    gap: .5rem;
    justify-content: space-between
}
.box-2-sm .box-activite div {
    background-color: hsl(223deg 30% 90% / 40%);
    color: var(--gr-2);
    flex-grow: 1;
    flex-direction: column;
    display: flex;
    padding: var(--size-xs) 0;
    border-radius: 4px;
    justify-content: center;
    font-size: .8rem;
    align-content: center;
    align-items: center
}
.dark .box-2-sm .box-activite div {
    background-color: hsl(223deg 30% 90% / 10%);
    color: var(--gr-2)
}
.box-2-sm .box-activite div.saillie {
    background-color: var(--male)
}
.box-2-sm .box-activite div.chiot {
    background-color: var(--femelle)
}
.box-2-sm .box-activite div.etalon {
    background-color: var(--etalon)
}
.box-2-sm .box-activite div.etalon, .box-2-sm .box-activite div.chiot, .box-2-sm .box-activite div.saillie {
    text-shadow: 0 0 4px rgb(0 0 0 / 15%);
    color: #FFF
}
.box-3 {
    display: flex;
    column-gap: var(--size-md);
    min-height: 100px;
    align-items: center
}
.box-3 .box-img {
    display: none;
    height: 90px;
    width: 100px;
    display: flex;
    overflow: hidden;
    flex-shrink: 0;
    border-radius: var(--radius);
    transition: .2s ease-in-out
}
.box-3 .box-img img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    max-width: 100px;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    background-color: var(--gr-0);
}

.box-3 .box-regroup {
    overflow: hidden;
    flex-grow: 1
}
.box-3 .box-int-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
    font-size: .8rem;
    color: var(--etalon);
    margin-bottom: var(--size-xs)
}
.box-3 .box-int-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-3);
    font-weight: 700;
    margin-bottom: var(--size-xs);
    max-width: 180px;
    line-height: 1.1
}
.box-3 .box-int-2-mchien {
    color: var(--color-3);
    font-weight: 700;
    margin-bottom: var(--size-xs);
    line-height: 1.1
}

.box-3 .box-int-3 {
    font-size: .9rem;
    margin-bottom: var(--size-xs);
    color: var(--color-3)
}

.box-3:hover .box-img {
    transform: scale(1.025)
}
.box-3 .list-etoile {
    justify-content: left !important
}
.box-3:hover .box-int-1 {
    color: var(--color-1)
}
.box-3:hover .box-int-2 {
    color: var(--etalon)
}

.box-3.m-chien { min-height:auto; border-radius: var(--radius-2);   }
.box-3.m-chien .box-img img {  background-color: var(--rev-white); }
.box-3.m-chien .box-img { height: 70px; width: 80px; }
.box-3.m-chien .box-int-1 { color: var(--chien) }

.box-4 {
    --shad: 0px 8px 40px 0px rgba(0, 0, 0, .04), 0px 2px 5px 0px rgba(0, 0, 0, .05), 0px 0px 2px 0px rgba(0, 0, 0, .15);
    box-shadow:  0 0 var(--rev-black), 0 0 var(--rev-black), var(--shad);
    border-radius: var(--radius);
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column
}

.dark .box-4 {
    --shad: 0px 8px 40px 0px rgba(0, 0, 0, 0.25), 0px 2px 5px 0px rgba(0, 0, 0, 0.25), 0px 0px 2px 0px rgba(255, 255, 255, 0.15);
    outline: 1px solid var(--gr-0);
}
.box-4:hover {
    outline: 4px solid var(--gr-1);
}
.box-4:hover .box-img .box-img-txt {
    background: rgba(0, 0, 0, .75);
    color: #FFF
}
.box-4.etalon:hover .box-img .box-img-txt {
    background: rgba(0, 0, 0, .75)
}

.box-4 .box-img-txt, .box-4 .box-int-1, .box-4 .box-int-supp, .box-4 .box-int-supp-etalon { padding-left: var(--size-sm); padding-right: var(--size-sm); }

.box-4 .box-img-txt {
    color: var(--gr-3);
    font-size: 10px;
    font-weight: bold;
    padding-bottom: .75rem;
    text-transform: uppercase;
    display: block;
}

.box-4 .box-int-1 {
    justify-content: center;
    line-height: 1.1rem;
    font-weight: 700;
    color: var(--color-1);
    min-height: 40px;
    margin-bottom: var(--size-sm);
    display: flex;
    flex-grow: 1
}
.box-4 .box-int-2 {
    margin-bottom: var(--size-md);
    flex-grow: 1;
    color: var(--color-1)
}

.box-4 .box-int-supp, .box-4 .box-int-supp-etalon {
    align-items: center;
    padding: 0.75rem 0;
    text-transform: lowercase;
    border-top: 1px solid var(--gr-0);
    font-size: .8rem;
    color: var(--color-1);
}
.box-4 .box-int-supp:first-letter, .box-4 .box-int-supp-etalon:first-letter {
    text-transform: uppercase
}
.box-4 .box-int-supp-etalon {
    color: var(--etalon);
    font-weight: 700
}
.box-4 .box-int-etalon {
    position: absolute;
    font-weight: 700;
    background-color: var(--etalon);
    padding: 0 1rem;
    color: #FFF;
    font-size: .8rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    height: 23px;
    display: flex;
    z-index: 1;
    left: -1px;
    top: 16px;
    text-transform: uppercase;
    align-items: center
}
.box-4 .box-int-vente {
    position: absolute;
    background-color: var(--avendre);
    color: var(--rev-white);
    padding: 0 0.75rem;
    font-size: 12px;
    font-weight: bold;
    border-radius: var(--radius) var(--radius) 0 0;
    z-index: 1;
    bottom: 0;
    translate: 0;
    text-transform: uppercase;
    padding: .25rem 1rem ;
}
.box-4.male .box-int-1 {
    color: var(--male)
}
.box-4.femelle .box-int-1 {
    color: var(--femelle)
}
.box-4 .box-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    align-items: stretch
}
.box-4 .box-info div {
    width: 45%
}
.box-4.etalon:hover {
    border-color: var(--rev-black)
}

.box-4 .box-img > span:first-child, .box-1 .box-img > span:first-child  { position: absolute; inset: 0 0; filter: blur(100px); transform: scale(10); background-size: cover; background-repeat: no-repeat; }

.box-int-supp:first-letter {
    text-transform: uppercase
}
.box-5 {
    border: 1px solid var(--gr-1);
    border-radius: var(--radius);
    gap: 1rem;
    position: relative;
    padding: var(--size-sm);
    display: flex;
    transition: .2s ease-in-out
}
.box-5:hover {
    border: 1px solid var(--gr-4)
}
.box-5 .box-img {
    flex-shrink: 0;
    width: 170px;
    height: 140px;
    overflow: hidden;
    border-radius: var(--radius);
    background-color: var(--gr-0);
    position: relative
}
.box-5 .box-img img {
    object-fit: cover;
    width: 100%;
    height: 100%
}
.box-5 .box-img {
    background: hsla(0, 0%, 80%, .2) url(/media/sans-service.png) no-repeat 50% 50%;
    background-size: 30%
}
.box-5 .regroup {
    flex-grow: 1
}
.box-5 .regroup .box-int-1 {
    color: var(--color-1);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: var(--size-xs)
}
.box-5 .regroup .box-int-2 {
    font-weight: 700;
    color: var(--gr-4);
    margin-bottom: var(--size-xs)
}
.box-5 .regroup .box-int-2::first-letter {
    text-transform: uppercase
}
.box-5 .regroup .box-int-supp {
    color: var(--color-3)
}
.box-5 .regroup .box-lieu {
    color: var(--address);
    margin-bottom: var(--size-sm);
    text-transform: lowercase;
    font-size: .9rem
}
.box-4 .list-etoile { margin: 0 auto .5rem auto }
.list-etoile {
    display: flex;
    gap: 2px
}
.list-etoile .star, .list-etoile .certif {
    height: 18px;
    width: 18px;
    border-radius: 50%;
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-shrink: 0;
}
.list-etoile .star {
    background-color: var(--etoile)
}
.list-etoile .certif {
    background-color: var(--rev-black)
}
/*
.box-4.vente .list-etoile .star {
    background-color: var(--avendre)
}
*/
.list-etoile .star span, .dark .list-etoile .star span, .list-etoile .certif span, .dark .list-etoile .certif span {
    display: block;
    height: 12px;
    width: 12px;
    margin: auto;
}
input.is-valid-form {
    border-color: #198754;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
  }
  input.is-invalid-form {
    border-color: #dc3545;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
  }
.list-etoile .star span {
    background: url(/media/star-w.svg) no-repeat 50% 50%;
    background-size: cover;
    margin-bottom: 2px;
}
.dark .list-etoile .star span {
    background: url(/media/star-b.svg) no-repeat 50% 50%;
    background-size: cover;
    margin-bottom: 2px;
}
.list-etoile .certif span {
    background: url(/media/certif-w.svg) no-repeat 50% 50%;
    background-size: cover
}
.dark .list-etoile .certif span {
    background: url(/media/certif-b.svg) no-repeat 50% 50%;
    background-size: cover
}
.boxy {
    display: none;
    z-index: 2;
    background-color: rgba(0, 0, 0, .4);
    color: #FFF;
    border-radius: var(--radius);
    padding: 0 .3rem;
    width: 25px;
    height: 25px;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    top: var(--size-sm);
    right: var(--size-sm)
}
.boxy span {
    font-size: .9rem;
    height: .9rem
}
.boxy span:nth-child(2) {
    margin-left: .2rem
}

.htitre { font-weight: bold;    font-size: clamp(1.25rem, 2vw, 1.4rem);   color: var(--chiot);    padding: clamp(1.5rem, 2vw, 2.5rem);     text-align: center;}

.simple {
        margin-left: 1rem;    
}
.simple li {
    margin-left: 1rem;
    list-style: circle;
    margin-bottom: .5rem;
    font-weight: bold;
} 

.para {
    padding: .5rem 2rem  1rem 2rem  ;
}

.para p {
    padding-bottom: .5rem;
}


.ad-horizon {
    width: 100%;
    min-height: 90px;
    margin: auto;
    text-align: center
}
.ad {
    width: 300px;
    max-width: 300px;
    max-height: 600px;
    margin: 0 auto var(--ec-1);
    background-color: var(--gr-0);
}
.ad-ac {
    width: 300px;
    height: 600px;
    margin-bottom: var(--ec-1);
    background-color: var(--rev-white)
}
.ad-purina {
    background: var(--club-bg) url(/media/club.jpg) no-repeat 50% 50%;
    border-radius: var(--radius);
    display: block;
    height: 100px;
    margin-bottom: var(--ec-1);
    text-align: center;
    padding: var(--size-md) 0;
    border: 1px solid var(--gr-2);
    background-color: var(--club-bg);
    width: -webkit-fill-available;
    width: -moz-available;
}
.ad-purina img {
    width: 90%
}

.ad-etalon, .ad-wamiz { width: -webkit-fill-available; flex: 1; }
.ad-wamiz {
    --color-wamiz-1 : #ff807c;
    --color-wamiz-2 : #5d5d6e;
    --color-wamiz-3 : #fff5f5;
    display : block;
    border : 1px solid var(--color-wamiz-1);
    display: block;
    min-height: 8rem;
    border-radius: var(--radius);
    position: relative;
    margin-bottom : var(--size-lg);
}

.ad-wamiz:hover {  border : 1px solid var(--color-wamiz-2);}

.ad-wamiz .ad-wamiz-regroup { padding: var(--size-md) var(--size-md) var(--size-sm) var(--size-md) ; }

.ad-wamiz div .int-1 {
    color :  var(--color-wamiz-1);
    font-weight: bold;
}
.ad-wamiz div .int-2 {
    color :  var(--color-wamiz-2);
    font-weight: bold;
    text-transform : uppercase;
    padding: .25rem 0;
}

.ad-wamiz .int-3 { text-align :center; margin-bottom : .25rem }
.ad-wamiz .int-4 { background-color : var(--color-wamiz-3); border-radius: var(--radius); text-align: right  }
.ad-wamiz .int-4 svg { fill : var(--color-wamiz-1) }




.ad-etalon {
    display: block;
    min-height: 8rem;
    border: 1px solid var(--connexion);
    border-radius: var(--radius);
    padding: var(--size-md);
    position: relative
}
.ad-etalon span {
    display: block
}
.ad-etalon span:first-child {
    font-size: 1.1rem;
    color: var(--connexion);
    margin-bottom: var(--size-xs);
    font-weight: 600
}
.ad-etalon span:nth-child(2) {
    font-size: 1.6rem;
    color: var(--color-1);
    font-weight: 700;
    margin-bottom: var(--size-xs)
}
.ad-etalon span:nth-child(3) {
    font-size: 1.1rem;
    color: var(--gr-4);
    width: 90%
}
.ad-etalon span:nth-child(4) {
    display: block;
    width: 84px;
    height: 126px;
    background: url(/media/etalon.png);
    position: absolute;
    bottom: -20px;
    right: -1px;
    border-radius: 0 0 8px 0
}

.abs-fida {
    display: block;
    position: relative;
    background-color: #e8ecf4;
    padding: 1.5rem;
    background-image    : url(/media/assurance/bg-basgauche.svg), url(/media/assurance/bg-haudroit.svg) ;
    background-position : 0 100%, 100% 0;
    background-size: 40%, 30%;
    height: 250px;
    background-repeat: no-repeat;
    color: #000 !important;
    margin: auto;
    overflow: hidden;

}

.abs-fida-logo { content: '';width: 150px; height: 60px;display: block;margin: 0 auto 1rem auto;background: url(/media/assurance/logo.svg) no-repeat 50% 0%;background-size: contain;}
.abs-fida-txt  { margin: 0 auto 2rem auto; background-color: rgb(255 255 255 / 40%); padding: 1rem; border-radius: .5rem; }
.abs-fida::after { position: absolute; content: ''; width:140px; height: 100px; display: block;bottom: -5px; right: -8px;background: url(/media/assurance/fidanimo-assurance-chien-3-2.svg) no-repeat 50% 0%; background-size: contain; }

.ad-horizon .abs-fida { display: flex; justify-content: center; align-items: center; height: 90px; background-size: 20%, 15%; padding: 0; max-width : -webkit-fill-available;  max-width : -moz-fill-available; }
.ad-horizon .abs-fida .abs-fida-txt { display: none}
.ad-horizon .abs-fida .abs-fida-logo { margin: auto}
.ad-horizon .abs-fida::after { width: 240px; height: 280px; bottom: -165px; right: 0px }


footer {
    text-align: center;
    display: flex;
    flex-direction: column
}
footer .it1 {
    display: flex;
    column-gap: 1rem;
    justify-content: center
}
footer .it1 > a, footer .it1 div {
    display: block;
    padding: .5rem 1rem;
}

footer .it1 a { color: var(--color-1);  }

footer .it1 a:hover {
    color: var(--color-3)
}
footer .it2 {
    margin-bottom: var(--size-sm);
    display: flex;
    justify-content: center
}
footer .it2 span {
    color: var(--male);
    border-radius: var(--radius);
    border: 1px solid var(--male);
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    padding: var(--size-md)
}
footer .it3 {
    color: var(--rev-black);
    margin-bottom: 1rem;
    font-size : .9em
}
footer .it4 {
    font-size: .8rem;
    margin-bottom: 1rem
}
@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }
    to {
        top: 0;
        opacity: 1
    }
}


@media only screen and (max-width:1600px) {
    .ad-horizon {width: 100%}
}

@media only screen and (max-width:1500px) {
    .search_race, .search_region, .search_rub {
        max-height: none
    }
    .search_rub {
        width: 100%;
        justify-content: center
    }
    .list_box_saillie {
        grid-template-columns: 1fr 1fr
    }
    .list_box_3 {
        display: grid;
        grid-template-columns: 1fr 1fr
    }
    /*.ad-cmp { grid-column: 1 / 4 }*/


}
@media only screen and (max-width:1400px) {

    .ad, .ad-ac, .regroup-menue { width: -webkit-fill-available;  width: -moz-available;  }
    .ad-ac { height: auto;}
    .abs-fida { background-size: 25%, 30%; }
    .content .various .sticky-menud  { position: relative; top: auto;}

    .list_box_5 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr
    }
    .list_box_5.acc a:last-child {
        display: none
    }

    .menuright a {
        display: flex;
        margin-bottom: .75rem;
        color: var(--color-2);
        background-color : var(--gr-0);
        padding: .5rem;
        border-radius: .5rem;
        color : var(--rev-black);
        text-align: center;
        margin-bottom: 0;
        justify-content: center;
        align-items: center;
        height: 100%;
        min-height: 80px;
    }
    .menuright { display: grid; grid-gap: .5rem ; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); align-items: center; }

    nav .connexion {display: none}

    .content .various .regroup-menud { display: flex;  gap: 1rem;justify-content: center;}
    .regroup-guide, .regroup-menud { width: -webkit-fill-available; width: -moz-available; }


    .list_box_5 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr
    }
    nav .chiots, nav .eleveurs, nav .chiens, nav .services {
        flex-grow: 1
    }
    header {
        margin: var(--ec-3) auto;
        height: 50px
    }
    .chiensdefrance {
        width: 254px;
        height: 38px
    }

    .chiensdefrance:after {
        margin-top: 2.8rem;
        font-size: .7rem
    }
    .search .xtz {
        width: 100%
    }
    .filtres .sepa {
        margin: 0 .25rem;
        height: 100%
    }
    .filtres select {
        width: 100%
    }
    nav a span:first-child, .connexion span:first-child {
        margin-bottom: .1rem
    }
    nav {
        margin-bottom: var(--size-md);
        height: 3rem;
    }
    nav a span:last-child {
        font-size: .7rem
    }
    .connexion .ic-con {
        width: 3rem;
        height: 3rem;
        left: calc(50% - 1.5rem);
        top: -1.5rem
    }
    .connexion .ic-con::before {
        height: 1.5rem;
        width: 3rem;
        border-radius: 1.5rem 1.5rem 0 0
    }
    .connexion .ic-con .material-icons:after {
        font-size: 24px
    }
    .page-pedigree-chiens {
        display: block
    }
    .pedigree-groupe-pere, .pedigree-groupe-mere {
        width: 100%
    }

    .list_box_5.acc a:nth-last-child(-n+2), nav .home, .connexion, .chiensdefrance:after, nav .home, .pedigree-top .fiche-pedigree-branche div:after {
        display: none
    }
    .fast-account {
        display: flex
    }
    .content {
        display: block
    }
    .content .various {
        margin-left: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-top: var(--ec-1);
        align-items: center;
    }
    .bg-1 {
        padding: var(--size-lg) var(--size-md)
    }
    .content .various .ad { order: 3 }
    .content .various .regroup-menud {order: 1}
    .box-3 .box-int-1 {
        white-space: normal
    }

    .gal { max-height: 400px }

    .gridifich {
        grid-auto-columns: 2fr 300px
    }
    .list_box_saillie {
        grid-template-columns: 1fr 1fr
    }
    .content .glob {
        width: 100%
    }
    /* .ad-cmp { grid-column: 1 / 5 } */

}
@media only screen and (max-width:1000px) {
    .list_box_saillie {
        grid-template-columns: 1fr 1fr
    }
    .list_box_region {
        grid-template-columns: 1fr 1fr
    }
    .list_box_5 {
        grid-template-columns: 1fr 1fr
    }
    .list_box_5.acc a:nth-last-child(-n+2) {
        display: block
    }
    .list_box_5.acc a:nth-last-child(-n+1) {
        display: none
    }
    .info-ac {
        flex-direction: column;
        gap: 2rem
    }
    .info-ac .info-1, .info-ac .info-2, .info-ac .info-3 {
        width: 100%;
        margin: auto
    }
    .info-ac {
        padding: 0;
        border: 0
    }
    /*.ad-cmp { grid-column: 1 / 4 }*/
  /*  .list_box_chiot  { grid-template-columns: repeat(auto-fill,minmax(260px,1fr)) }*/
}
@media only screen and (max-width:900px) {
    .box-1 .box-int-1, .box-1 .box-int-2 {
        max-width: 180px
    }
    nav a span:last-child, .connexion span:last-child {
        display: none
    }
    nav {
        height: auto;
        margin-bottom: var(--size-md);
        gap: .5rem
    }
    nav a span:first-child {
        margin-bottom: 0
    }
    nav a, .connexion {
        min-height: 3rem
    }
    nav .home, nav .chiots, nav .eleveurs, nav .etalons, nav .chiens {
        margin-right: 0
    }
    .filpar {
        font-size: .8rem
    }
    .box-5 .box-img {
        width: 100px;
        height: 85px
    }
    .fp {
        display: flex;
        flex-direction: column
    }
    .fp .ins, .fp .log {
        width: 100%
    }
    .ins .titre, .log .titre {
        margin-bottom: 1rem
    }
    .fp .regroup {
        margin-bottom: .5rem
    }
    .img-ins-1, .img-ins-2, .filpar {
        display: none
    }
    .filtres .cat div label {
        font-size: .9rem;
        padding: .5rem
    }
    .filtres select {
        font-size: .9em
    }
    #breadcrumb {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: .75rem;
        font-size: 12px
    }
    #breadcrumb > li:first-child, #breadcrumb > li:last-child {
        display: none
    }
    #breadcrumb li:nth-child(n+5)::after {
        display: none
    }
    nav .home, nav .chiots, nav .eleveurs, nav .etalons, nav .chiens, nav .services {
        margin-right: 0
    }
    .menuright a { min-height: auto    }
    .footer-dim { min-width: 400px }
    .footer-dim .it1 { flex-direction: column;}
    .all-data-footer { grid-template-columns: 1fr  }
}
@media only screen and (max-width:767px) {

    .list_box_saillie { grid-template-columns: 1fr }
    .choices__list--dropdown, .choices__list[aria-expanded] {z-index: 10 !important }
    .box-saillie .regroup .pere img, .box-saillie .mere img { max-width: 330px; }
    header { height: 30px; }
}


@media only screen and (max-width:700px) {
    .ad-etalon span:nth-child(4) { display: none }
    .content .various .regroup-menud { flex-direction: column;}
    .ad-etalon, .ad-wamiz { text-align:center}

     .search-titre { padding: .75rem 0 }
    .box-1.male.cadre .box-img { outline: 4px solid var(--male); }
    .box-1.femelle.cadre .box-img { outline: 4px solid var(--femelle); }
    .info-label .fida-logo { width: 120px }
    .ad-etalon, .ad  { margin: 0 }
    .ad { margin-top: 1rem;}
    .list_box_chiot { gap: 1.5rem 2rem; grid-template-columns: 1fr 1fr;  }
    .list { grid-template-columns: 1fr; }
    .all-data-footer { grid-template-columns: 1fr 1fr; margin: .75rem auto;  }


    #breadcrumb li:nth-child(2) { display: none }
    #breadcrumb li a span {max-width: 100px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; }

    /*.ad-cmp { grid-column: 1 / 3 }  */

    .flex_bandeau_annonce { flex-direction: column; padding: 1rem; }
    .flex_bandeau_annonce div.txt {
    text-align: center;
    width: 100%;
    line-height: 1rem;
    font-size: 1rem;
    font-weight: 400;
    }
    .logcdf {
        text-align: left;
        flex-grow: 1;
        justify-content: flex-start;
    }
    .list_box_3, .list_box_2 {
        grid-template-columns: 1fr;
        gap: 1rem
    }
    .box-5 {
        align-items: center
    }
    .content, nav, header, .footer-dim, html {
        min-width: 400px
    }
    .fast-home, .fast-hamb, .fast-close, .fast-dark, .fast-account {
        border-radius: 50%;
        border: 2px solid var(--gr-1);
        padding: .2rem;
        font-size: 24px;
        width: 35px;
        height: 35px;
    }
    .search {
        max-height: none;
        margin-bottom: 2rem
    }
    .search_annonce {
        margin-bottom: 1.5rem
    }
    .search .xtz {
        display: block
    }
    .search_bout {
        height: 45px
    }
    .search button {
        bottom: -24px
    }
    .search_race, .search_region {
        margin: auto;
        width: 100%
    }
    .search_race {
        margin-bottom: var(--size-sm)
    }
    .search h1, .search-titre {
        font-size: 1.3rem;
        height: auto;
        padding: 1.5rem 0;
        margin-bottom: 0
    }
    .chiensdefrance {
        height: 29px;
        width: 191px
    }
    nav, .nav-mobile-l, .search h1 span,  .nomob, .gal-item  {
        display: none
    }
    .box-5 .regroup .box-int-supp {
        font-size: .9rem
    }
    .gal {
        height: auto;
        max-height: none
    }
    .box-1 .box-int-1, .box-saillie-mini .box-int-1 {
        font-size: 1rem
    }
    .fast-hamb {
        display: flex
    }
    .list_box_200, .list_box_240, .list_box_300 {
        grid-template-columns: 1fr
    }
    .search .cont {
        flex-direction: column
    }
    .search .cont select {
        width: 100%;
        margin-bottom: 1rem;
        padding: .8rem 1rem
    }
    .box-1 {
        min-height: auto;
    }
    .liste-1 {
        grid-template-columns: repeat(auto-fill, minmax(45%, 1fr))
    }
    .liste-2, .liste-3 {
        grid-template-columns: 1fr 1fr
    }
    .gridifich {
        display: grid;
        grid-auto-columns: 1fr;
        grid-gap: 1rem;
        grid-auto-rows: auto
    }
    .gridifich .it1 {
        grid-column: 1;
        grid-row: 1
    }
    .gridifich .it2 {
        grid-column: 1;
        grid-row: 3
    }
    .gridifich .it3 {
        grid-column: 1;
        grid-row: 2
    }
    .liste-1 li {
        word-break: break-word
    }
    .guide {
        display: block
    }
    .gal-6 div:nth-child(n+1) {
        grid-column: 1
    }
    .gal .gal-princ:after {
        font-size: .8rem;
        padding: .75rem 0
    }
    footer .it1 {
        flex-wrap: wrap;
        margin-bottom: .5rem
    }
    footer .it1 a {
        width: 100%;
        padding: .25rem 0
    }
    .guide-img-300, .guide-img-200 {
        width: 100%
    }
    .guide-age td {
        padding: .25rem .5rem;
        font-size: .8rem
    }
    .menu-purina {
        display: block
    }
    .pedigree-top {
        width: 80%
    }
    .pedigree-groupe {
        gap: .5rem
    }
    .bg-1 { padding: 0; background-color: transparent }
    .box-1.cadre { border: 0 }
    .list_box_region {
        grid-template-columns: 1fr
    }
    .search_chiots, .search_etalons, .search_chiens, .search_annonce, .search_eleveurs {
        background-position: 0% 30%;
        background-image: none
    }

    .search_chiots {
        background: #7aa12f url(/media/bgchiots-mob.jpg) no-repeat 0 ;
        background-size: cover
    }
    .search_eleveurs {
        background: #5c4d92 url(/media/bgeleveurs-mob.jpg) no-repeat 0 0;
        background-size: cover
    }
    .search_etalons {
        background:  url(/media/bgetalons-mob.jpg) no-repeat 0 0;
        background-size: cover
    }
    .search_chiens {
        background: #5c4d92 url(/media/bgchiens-mob.jpg) no-repeat 0 0;
        background-size: cover
    }
    .search_annonce {
        transition: .2s ease-in-out;
        background: #2c231e url(/media/bgannonce-mob.jpg) no-repeat 0 0;
        background-size: 100%;
        margin-bottom: 1.5rem
    }

    .box-1 .vignette {
        width: 45px;
        height: 45px;
        right: 16px;
        top: 110px
    }
    .box-rech-reg .img {
        width: 4rem;
        height: 4rem
    }
    .box-saillie-mini .box-parents {
        padding: var(--size-sm)
    }
    .box-saillie-mini .entete {

        line-height: normal
    }
    .box-3 .box-int-2 {
        max-width: fit-content;
        white-space: inherit
    }
    .box-2-conseil .txt { font-size: 1.5rem;}
    .ad-horizon .abs-fida::after { width: 190px; height: 280px; bottom: -175px; right: 0px }
    .list_box_4 { grid-template-columns: 1fr 1fr; grid-gap: .75rem; }
    .box-4 .box-img {height: 160px; }
}
@media only screen and (max-width:550px) {
    .content .glob.globetalon { width: 100%; }
    #breadcrumb li a span {max-width: 50px }

    .info-ac .info-1 div:first-child, .info-ac .info-2 div:first-child, .info-ac .info-3 div:first-child {  margin: 0 auto 1rem auto ; background-size: cover; }
    .box-4 .box-int-1 { min-height: auto;}
    .list_box_chiot { display: grid; gap: 1.5rem 1.25rem; grid-template-columns: repeat(auto-fill,minmax(160px,1fr))  }
    .box-saillie-mini .box-int-2 { max-width: 160px}
    .box-4.etalon .box-int-1, .box-4 .box-int-supp-etalon {font-size: .9rem}
    .acc-site { margin-bottom: 1rem }
    .box-saillie .regroup .pere img, .box-saillie .mere img { max-width: 210px; }
    .choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item {        padding: .6rem !important;        font-size: 1rem !important;        border-bottom: 1px solid var(--gr-1);    }
    .box-title {        font-size: 1rem    }
    .box-1 .box-int-1, .box-1 .box-int-2 {        overflow: hidden;        text-overflow: ellipsis;        white-space: nowrap;        max-width: 170px;        margin-bottom: 0;            }
    .box-1 .box-int-2 { font-size: .9rem; text-transform: capitalize }
    .list_box_elv .box-2:last-child {        margin-bottom: 0    }
    .list_box_elv {        grid-template-columns: 1fr    }
    .box-1 .box-img, a.ban-fida-1 .ban-fida-visu-1, a.ban-fida-1 .ban-fida-visu-2, a.ban-fida-2 .ban-fida-visu, a.ban-fida-2 .ban-fida-visu  { height: 170px }
    a.ban-fida-2 .ban-fida-visu  { bottom : auto; top: 0; }
    .box-saillie-mini .box-parents { height: 174px    }

    .box-2 {
        flex-wrap: wrap;
        padding: var(--size-md)
    }
    .box-2 .box-int-3 { padding: .5rem 0; max-height : fit-content}
    .box-2 .box-img {
        height: 240px;
        width: 100%;
        display: flex;
        margin-bottom: var(--size-sm);
        justify-content: center
    }
    .box-2 .box-activite {
        position: inherit;
        justify-content: center;
        margin: auto;
        right: auto;
        bottom: auto;
        width: -webkit-fill-available;  width: -moz-available;
    }

    .box-2 .box-activite div {
        flex-direction: row;
        border-radius: var(--radius);
        width: auto;
        gap: .25rem;
        flex: 1;
        height: auto;
        padding: 0.5rem;
    }
    .box-2 .box-activite div span { font-size: .8rem;}
    .box-2 .box-regroup {
        margin-bottom: var(--size-sm);
        width: 100%
    }
    .box-2 {
        margin-bottom: 0
    }


    .search button {
        font-size: 1.1rem;
        min-height: 40px;
        bottom: -19px
    }
    .box-1 .vignette img {
        max-width: 40px
    }
    .search_annonce .txt {
        line-height: 1.1rem
    }
    .box-saillie-mini .entete { font-size: .9rem; }

    .box-saillie-mini .box-parents .pere .img, .box-saillie-mini .box-parents .mere .img {
        height: 70px
    }
    .content, nav, header {
        width: 100%;
        padding: 0 1rem
    }
    .box-1 .box-img-txt {
        font-size: .9rem
    }
    .box-1 .vignette {
        top: 97px
    }
    .qcq-img {
        height: 170px
    }
    .gridifich-saillie a .pict {
        height: 8rem;
        width: 100%
    }
    .gridifich-saillie a {
        padding: .5rem .75rem
    }
    .filtres .cat div:first-child {text-align: center}
    .filtres .cat div:first-child label { display: flex; justify-content: center; }
    .filtres .cat div:last-child  { flex-grow: 1}
    .filtres .cat div label { font-size: .8rem; padding: .5rem     }

    .search_vente label .coch { padding: 0; font-size: .9rem}
    .ad-horizon .abs-fida::after {        width: 120px;        height: 270px;        bottom: -192px;        right: -20px;    }
    .ad-horizon { padding: 1rem 0;}
    .sensi p { line-height: 1.4rem; }
    .sensi .log-rf { width: 75px; height: 75px }
    .box-1 .box-int-1, .box-1 .box-int-2, .box-1 .box-int-3 { max-width: 150px }

}
@media only screen and (max-width:410px) {

    .box-saillie-mini .box-int-3 {margin-top: 0}
    .box-saillie-mini .entete span {    font-size: .7rem;}
    .box-1 .box-img, a.ban-fida-1 .ban-fida-visu-1, a.ban-fida-1 .ban-fida-visu-2, a.ban-fida-2 .ban-fida-visu, a.ban-fida-2 .ban-fida-visu {
        height: 150px
    }
    .box-saillie-mini .box-parents {
        height: 154px
    }
    .box-1 .box-img img { max-width: 190px; object-fit: cover; height: 100%; }
    .ad-etalon {
        min-height: 9rem
    }
    .liste-2, .liste-3 {
        grid-template-columns: 100%
    }
    .ad-etalon span:first-child {
        font-size: 1.3rem
    }
    .ad-etalon span:nth-child(3) {
        font-size: 1.3rem;
        display: block;
        width: 200px
    }
    .ad-etalon span:nth-child(2) {
        font-size: 1.4rem
    }
    .search_race, .search_region {
        width: 100%
    }
    .liste-1 {
        grid-template-columns: 100%
    }
    .guide-drp {
        display: block
    }

    .ad-etalon {
        min-height: auto;
        text-align: center
    }

    .ad-etalon span:nth-child(3) {
        width: 100%
    }
    .box-3 .box-img img {
        max-height: 200px
    }

    .choices__inner {
        font-size: 1rem !important
    }
}