@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap');
:root {
  --mw-site           : 1000px;
  --bg-body           : #ffffff;
  --nav-main-bar-a    : #000;
  --bg-nav-g-titre    : #b2805b;
  --bg-nav-g-rubrique : rgb(255, 255, 255);
  --bg-nav-g-cub      : color-mix( in oklab, var(--bg-nav-g-titre) 70%, #fff 30%);
  --bg-actu-alaune    : hsla(32, 63%, 31%, 0.685);
  --actu-alaune-h1    : #ffffff;
  --actu-alaune-txt   : rgb(226, 226, 226);
  --affixe            : 323px;
  --height-nav-bar    : 64px;
  --color-pied        : #000;
  --color-pied-a      : #876a4d;

  /*MOBILE*/
  --color-affixe-mobile : #FFF;
  --color-race-mobile : #876a4d;
}

/* { outline : 1px dotted #CCC } */
body { color: #000; background-color: var(--bg-body); font-family:  "quicksand" }


.w620 { width: auto; flex: 1;}

/* ENTETE */
h1 a { height: var(--affixe); background: url(affixe.png) no-repeat 75px 75px; }
h1 a div { display: none;}
/* MENU HAUT*/
#nav-main {  height: var(--height-nav-bar); margin: auto;  text-align: center;  margin-bottom: 30px }
#nav-main-bar, #nav-main-bar ul  { height: -webkit-fill-available; height: -moz-available;  }
#nav-main-bar ul { align-items: center; }
#nav-main-bar ul li a { display: block; color: var(--nav-main-bar-a);  border-radius: .5rem;  font-size: 1.1em; padding: 0 .75rem; height: calc(var(--height-nav-bar) - 10px); text-transform: uppercase }
#nav-main-bar ul li#rubaccueil a:hover, #nav-main-bar ul li a:hover, #nav-main-bar ul li a.nav-main-selection { background-color: hsla(20, 10%, 51%, 0.3) }
#nav-main-bar ul li#rubaccueil a { background-color: hsla(0, 0%, 100%, 0.384); }
#nav-main-bar ul li#rubaccueil a .icone-accueil { background: url(/media/vign-accueil-noir.png) no-repeat 50% 50%; }

/* MENU GAUCHE */
.nav-g-rubrique { background-color: var(--bg-nav-g-rubrique);  padding: 5px }
.nav-g-rubrique a, #nav-g a { background-color: #f8f5f3; display: flex; gap: .5rem; align-items: center;  ;}
.nav-g-rubrique a .cub { display: none; background-color: var(--bg-nav-g-cub); width: 8px; height: 8px; margin : 0 0; border-radius: 50%; flex-shrink: 0;}
.nav-g-rubrique a:hover { background-color: #ccc }
.nav-deco { display: none; }
#nav-g-races a:hover, #nav-g-slide .car-lien:hover { background-color: hsla(0, 0%, 100%, 0.4) } 
#nav-g-races a .vign { border-radius: .25rem;  flex-shrink: 0; background-color: #f1f1f1; margin : 0px; display: block; width: 35px; height: 28px; overflow: hidden; border: 0;}
.nav-g-titre, #nav-g-races a { font-weight: bold; color : #FFF; background-color: var(--bg-nav-g-titre); text-transform: uppercase;  position: relative; padding: .75rem 1rem }
#nav-g-races a { padding-left: .75rem;  margin-bottom: 4px;}
#nav-g-races a .vign img { object-fit: cover; width: 100%; margin:0; height: 100%; }
#nav-g { flex-shrink: 0;}


/* TAILLE DES PAGES */
#aside-atara-bar, #header-affixe-bar, #nav-main-bar, #section-main-page, #section-main { width: -webkit-fill-available; width: -moz-available; max-width: var(--mw-site); margin: auto; z-index: 100; }
#section-main-page { background : rgb(255 229 211 / 42%);  padding: .75rem; display: flex; gap: .75rem; }

#header-affixe-bar {
    position: relative;
    min-height: 334px;
}

/* PIED DE PAGE */
#pied .affixe, #pied .cdf a { color: var(--color-pied-a); }
#pied:first-child p { color : var(--color-pied)}

 
.galeries-videos a:hover {
  border-color: #000
}
.galeries-videos a .nb {
  margin-bottom: .5rem;
  color: #000;
  background-color: transparent !important;
  font-weight: bold
}

#global {background:  url(bg-milieu.jpg) no-repeat top center; }
.coul, .liste_chiots .boxprix .prix, .livredor-messages .titre, h2 {
  color: #000; 
}

.savoirplus, .clear, #nav-g-races .nav-g-races-top, .main-page-deco1, h1 p { display: none;}

#aside-atara {
  font-size: 12px;
  width: 100%;
  z-index: 1;
  background-color: #000;
  box-shadow: none;
  background-image: none;
  border-bottom: 1px solid #cccccc2e;
}

.nav-add-facebook, .nav-add-purina, h1 a, #nav-g-slide, .chiotalaune {
  width: -webkit-fill-available;
  width: -moz-available;
}

.nav-add-facebook { height: 35px;}

h1 a:hover {
  background: url(affixe2.png) no-repeat 75px 75px
}
.bggris {
  background-color: #f1eff0;
}
#header-affixe { 
  margin-top: 0
} 
.box-chiens-etat,  .p-sepa-box1, .p-sepa-box3, .resultat-box-txt .manif {
  color: #000
}
 


.liste_chiots .status .contact {
  background: #421C05;
  color: #FFF
}
#section-main {
  margin-bottom: 20px
}


#nav-g a:hover {
  background-color: #DFDFDF;
}

#nav-g-slide { overflow: hidden;}

#nav-g-slide, .article-duo, .article-main, .article-main-max {
  border: 0;
  background: #FFF
}


#pied .avertissement, #pied .siret {
  color: #dadada
}
.aucun-menu {
  color: #A0A0A0;
}
a {
  color: #000
}
a:hover {
  color: #000
}
h2 {
  margin-bottom: 15px
}
h3 {
  margin-bottom: 15px;
  margin-top: -10px;
  color: #555
}
.bgh3 {
  background-color: #f1f1f1
}
h4 {
  font-size: 16px;
  font-weight: 700;
  margin-top: 25px;
  text-transform: uppercase;
  text-align: left
}
#aside-atara-bar, #aside-atara-bar .vign-atara {
  color: #fff
}
#nav-main, #nav-main-bar ul li a {
  display: block; 
}
.actu-alaune {
  margin-bottom: 12px;
	background-color: var(--bg-actu-alaune);
}
.actu-alaune a { height: auto;}
#showheretest .actu-alaune-h1 {
  color: var(--actu-alaune-h1);
  margin-bottom: 5px;
  font-size: 1.1rem;
  font-weight: normal;
}
#showheretest .actu-alaune-txt {
  color: var(--actu-alaune-txt);
  line-height: 18px;
  font-size: 1rem; font-weight: normal;
}
#nav-main-bar ul li a { 
  font-size: 1.2em;
  display: flex;
  align-items: center;
  justify-content: center; 
}
#rubaccueil {
  width: 5.5%
}
#nav-main-bar ul li#rubcontact a {
  margin-right: 0
}

.nav-deco {
  position: absolute;
  display: block
}
.nav-g-rubrique a.chiot, .nav-g-rubrique a, .nav-g-rubrique a.chaton {
  padding: 10px 0 8px 6px;
  background-color: #fff;
  margin-bottom: 4px
}
.nav-g-rubrique a.chiot:last-child, .nav-g-rubrique a:last-child, .nav-g-rubrique a.chaton:last-child {
  margin-bottom: 0px;
} 
#nav-g-races .nav-g-races-bottom {
  border-width: 0;
  border-color: #000;
  margin-bottom: 4px
} 

#nav-g-races p {
  font-size: 18px
}
.nav-g-sepa {
  border-color: #555
}
.nav-g-rubrique .selection {
  font-weight: 700
}

.p-sepa-box2 {
  border-color: var(--bg-nav-g-rubrique)
}
.liste_chiots .status .contact .fleche {
  border-color: transparent var(--bg-nav-g-rubrique) transparent transparent
}
.article-main, .actu-alaune {
  border-style: solid;
  margin: 0;
}

.article-main {
  flex: 1;
}

.actu-alaune-img { flex-shrink: 0; }

.actu-alaune {
  margin-bottom: .75rem;
}

input[type=submit] {
  box-shadow: 0 0 1px #000;
  background-image: linear-gradient(#f1f1f1, #d7d7d7);
  border: 1px solid #fff
}
input[type=submit]:hover {
  box-shadow: 0 0 3px #555;
  background-image: linear-gradient(#d7d7d7, #f1f1f1);
  border: 1px solid #555
}
.nav-g-rubrique .selection {
  background-color: #fff
}
#nav-g-races .selection {
  font-weight: 700;
}
.fiche-titre .info .ville {
  color: #555
}
#aside-atara-bar .vign-atara {
  font-size: .7em
}
#aside-atara-bar .vign-atara, #nav-g-slide .chiotalaune .car-slide, #pied .avertissement, #pied .cdf, #pied .siret, .box-chiens .out .nom, .box-chiens-etat, .box-chiens-petit .out .nom, .fiche-titre .info, .galeries-photos .int, .galeries-videos .autresvideos .nb, .liste_chiots .infocdf, .liste_chiots .nom .boxprix .int, .liste_chiots .nom .gris, .nommere, .nompere, .p-agmere, .p-agmere .p-lien, .p-agpere, .p-agpere .p-lien, .p-gmere, .p-gpere, .p-mere, .p-pere, .pedigree-box .pedinomargrd {
  font-size: .8em
}
#nav-g-races a .position-race, .actu-alaune, .article-main-nav, .fiche-parents .fp-int, .galeries-box .int, .galeries-videos .autresvideos, .lien-text, .liste_chiots, .liste_chiots .commentaire, .livredor-messages .txt, .nav-g-rubrique a, .paragraphe div span, .paragraphe-rub, .telechargement-box, input[type=submit] {
  font-size: .9em
}

#nav-g-races a .position-race { margin: 0;}
#nav-g-races a .padd1, #nav-g-races a .padd2 { padding : 0; }

#nav-g-slide p {
  font-size: 1em
}
.fiche-pedigree:hover, .liste_chiots .nom, .p-lien, h3 {
  font-size: 1.1em
}
.contact-tel .cont {
  font-size: 1.3em
}
h2 {
  font-size: 1.5em
}
#nav-g-races a .vign, #nav-g-slide .chiotalaune, .bar-annee, .bgh3, .bout-annee:hover, .box-chiens-petit .out .in, .contact-tel, .fiche-img-vide, .fiche-info .int, .fiche-parents .imgparents, .fiche-retour-bas:hover, .fiche-retour:hover, .galeries-photos a, .galeries-videos .autresvideos .nb, .information, .liste-portees .imgportee, .liste-portees .parents .box .imgbox, .liste_chiots .boximg .grd, .liste_chiots .boxprix, .liste_chiots h4, .livredor-messages .nom, .message, .paragraphe-rub p, .pedigree-box-first:hover, .pedigree-box:hover, .resultat-box-img, .resultat-box-txt .manif, .telechargement-box:hover {
  background-color: #f1f1f1
}
#nav-g-slide button, .bar-annee .gras, .box-chiens, .box-chiens-petit, .fiche-info .cont, .fiche-info .int, .fiche-parents, .fiche-parents:hover, .fiche-pedigree, .fiche-pedigree:hover, .fiche-retour-bas, .fiche-titre, .galeries-box, .liste_chiots .box, .liste_chiots .boxprix, .resultat-box:hover, .telechargement-box:hover {
  border: 1px solid #ccc
}
.flechehaut {
  width: 50px;
  height: 51px;
  display: block;
  background: url(media/backtop-blanc.png) no-repeat 50% 50%
}
.liste_chiots .boxprix {
  border-top: 0;
  border-right: 0
}
#nav-main-bar ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
}
#rubaccueil {
  width: 50px;
}
#rubchiens, #rubchiots, #rubactus, #rublivre, #rubliens, #rubcontact, #rubphotos {
  width: auto
}
/*
@media (max-width: 500px) {
  body {
    color: #000;
  }
  h1 a span { 
    display: block;
    font-size: .8rem;
    text-transform: capitalize;
    font-weight: normal;
    margin-top: 5px;
    color: var(--color-race-mobile) !important;
  }
  h1 p { display: block; color: var(--color-race-mobile);}
  #global {
    width: 100%;
    margin: auto;
    min-width: 100%;
    background: url('bg-mobile.jpg') no-repeat top center; 
  }
  #header-affixe a {
    color: var(--color-affixe-mobile) !important;
    text-transform: uppercase;
    text-shadow: none;
    margin: 30px auto 5px auto !important;
  } 
  h1 a div { display: block;}
  #section-main-page {
    min-height: 500px;
    max-width: 960px;
  }
  #nav-main, #nav-main-bar ul li a, #section-main {
    display: block;
    margin: 0 10px;
  }
  .regroup-duo {
    display: flex;
    flex-direction: column;
  }
  #header-affixe {
    padding: 30px;
  }
  #header-affixe-bar {
    min-height: auto !important;
  }
}
*/