@import url('https://fonts.googleapis.com/css2?family=Cookie&family=Quicksand:wght@300..700&display=swap');

:root {   
--bg      : #5990b6;
--menu    : #FFF;
--site    : #d62262;
--h2      : #3b061c; 
--hx      : #91133f;
--cta     : #d42362; 
--cta-h   : #91133f; 
--bg-cta       : var(--cta); 
--bg-cta-txt   : #FFF; 
--claire  : #f5f5f5; 
--claire-h : #e8e8e8; 
--gr-1    : #f0f0f0;
--gr-2    : #bebebe;
--txt     : #171717;
--color-1 : var(--site);     
--color-2 : color-mix(in lab, var(--color-1) 25%, #fff 75%);
--radius : 8px;

/* BANDE CDF */
--main-asideatara-bgcolor : #7c163a;
--main-asideatara-color : #eeeeee;

/* AFFIXE */
--affixe      : #fff;
--affixe-size : clamp(2.5rem, 5vw, calc(3.5rem + 1.5vw));
--affixe-shadow :  0px 1px 0px #ccc, 0px 2px 0px #c9c9c9, 0px 3px 0px #bbb, 0px 6px 1px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 3px 5px rgba(0, 0, 0, 0.2), 0px 5px 10px rgba(0, 0, 0, 0.25), 0px 20px 20px rgba(0, 0, 0, 0.15); 
--race        : #000;

/* MENU HAUT */  
--main-menu-txtcolor : #000;
--main-menu-txtcolorh : #000;
--main-menu-a-bg-h : #ff97bc25;
--main-menu-select : #ff97bc50;
--main-menu-txtype : uppercase;
--main-menu-txtsize :calc(2.1em + .2vw);

/* MENU GAUCHE */
--main-nav-g-bg : #fff;
--main-nav-g-titre-bg : #7eaedb;
--main-nav-g-titre-txtcolor : #000; 
--main-nav-g-rubrique-a-bgcolor : #f2f7fb; 
--main-nav-g-rubrique-a-txtcolor : #000;

/* PAGE et ACTU */   
--main-article-main-bgcolor : #FFFFFF;
--actualaune-bgcolor : #4089b7;
--actu-alaune-h1     : #FFF;
--actualaune-txtcolor : #f4F4F4;

/* PIED*/
--main-footer-bgcolor : transparent;
--main-footer-txtcolor : #fff;
--main-footer-a-txtcolor : #c2e1f7;
}

a { color:  var(--txt); } 

body {
  font-family:  "Quicksand", "Open Sans", sans-serif;
  color : var(--txt) ;
  background-color: var(--bg); 
}

#global { 
  background:  url(bg-milieu.jpg);
  background-position: top center;
  background-repeat: no-repeat; 
  z-index: 0;
}

/* HAUT */
#aside-atara { background-color: var(--main-asideatara-bgcolor); border-bottom: 1px solid #FFF;}
#aside-atara a {color: var(--main-asideatara-color); }
  
h1 { display: flex; flex-direction: column; gap: 10px; }
h1 a {  
  color: var(--affixe); 
  font-size: var(--affixe-size); 
  text-shadow: var(--affixe-shadow);  
}

h1 a, #nav-main-bar ul li a {  
  font-family: "Cookie", serif;
  font-weight: 400;
  font-style: normal; 
}

h1 p { 
  color: var(--race); 
  font-size: calc(.9rem + .1vw);
  text-transform: uppercase; 
  background-color: #fff;
  display: block;
  width: max-content;
  padding: 5px 10px;
  border-radius: 8px;
} 

h2 { color : var(--h2) }
h3 { color : var(--hx); font-weight: 600; }
h4 { color : color-mix(in lab, var(--h2) 90%, #fff 10%);  }

#header-affixe { height: calc(160px + 10vw); max-height: 400px; }

.nav-main-deco { position: absolute;  display: block;  width: 99px;  height: 99px;  background:  url(img1.png);   right: 20px; top: -99px;}
#nav-main-bar::before { content: ""; position: absolute;  display: block; top: -32px; left: calc(50% - 134px); width: 268px;  height: 32px;  background:  url(img2.png) }
#nav-main-bar::after { content: ""; position: absolute;  display: block; top: -32px; left: -84px; width: 155px;  height: 81px; z-index: 0;  background:  url(img4.png); z-index: -1; }

/* MENU HAUT */
#nav-main-bar { position: relative; width: 100%; max-width: 1400px; border-radius: var(--radius); background-color: var(--menu); } 
#nav-main-bar ul li a { font-size: var(--main-menu-txtsize) ; color: var(--main-menu-txtcolor);    }
#nav-main-bar ul li a:hover { background-color: var(--main-menu-a-bg-h);  color: var(--main-menu-txtcolorh);}
#nav-main-bar ul li a.nav-main-selection, #rubaccueil a.nav-main-selection-acc { background-color: var(--main-menu-select); font-weight: 500;  }
.icone-accueil { background: url('/media/vign-accueil-noir.png') no-repeat 50% 50%; }
#rubaccueil svg { fill : #FFF; height: 30px;}  
/* ACTU A LA UNE*/
.actu-alaune { background-color: var(--actualaune-bgcolor); max-width: 1200px;  }
.actu-alaune-h1	 	{ color: var(--actualaune-titre); }
.actu-alaune-img 	{ background-color: var(--claire);}
.actu-alaune  .actu-alaune-txt { color: var(--actualaune-txtcolor);} 

.slider-container .slide { background-color: var(--claire);}

/* PAGE STRUCTURE */ 
#section-main-page 	{ 
  background: rgb(214,34,98);
  background: linear-gradient(180deg, rgba(214,34,98,1) 0%, #316386 100%);
  border-radius: var(--radius) 
  }

/* MENU GAUCHE */
.nav-g-box			{  background-color: var(--main-nav-g-bg);}
.nav-g-box .selection { background-color: hsl(0deg 0% 100% / 25%); }
#nav-g-races a, .nav-g-titre, #nav-g-slide p { background-color: var(--main-nav-g-titre-bg); border-bottom: 0px; color: var(--main-nav-g-titre-txtcolor); font-weight: 600;; font-size: calc(1rem + .1vw); padding:  calc(.5em + .1vw) }
.nav-g-titre a  { color: var(--main-nav-g-titre-txtcolor)} 
.nav-g-rubrique a, .aucun-menu 	{ background-color: var(--main-nav-g-rubrique-a-bgcolor); color: var(--main-nav-g-rubrique-a-txtcolor); }

.nav-deco { display: none} 
#nav-g-races a .vign { background-color: var(--claire); }


#nav-g-slide button {background-color: hsl(0deg 0% 100% / 25%); }

#nav-g-slide button:hover,   .box-regroup .status a:hover, .liste-portees:hover  { background-color: var(--main-nav-g-rubrique-a-bgcolor);}
#nav-g-races a:hover, .nav-g-rubrique a:hover { background-color: hsl(0deg 0% 100% / 25%);}


/* PAGE */

.article-duo, .article-main { background-color: var(--main-article-main-bgcolor)}
.livredor-messages { border: 1px solid var(--gr-1);}
.livredor-messages .titre { font-weight: bold; }
.livredor-messages .nom { color: var(--h2);} 
.actu-alaune-h1 { color : var(--actu-alaune-h1); }
.paragraphe p 		{ color: var(--txt)}  

.fiche-info .int  { background-color: var(--gr-1); border-color : var(--gr-2);  }
.fiche-info .cont { border-color : var(--gr-2);  } 
.imgparents { background-color: var(--claire);}
.fiche-titre { background-color: var(--claire); } 
.email-invisible, .sollicite { color: var(--txt) }
.jcarousel-skin-tango .jcarousel-item {	background-color: var(--claire); } 
#nav-g-slide .chiotalaune .car-slide { background-color: #000; color: #FFFFFF;  background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.6) }
.liste_chiots .boximg .grd, .liste_chiots .boximg .grdvide { background-color: var(--claire);} 
.box-chiot .box-regroup .boxprix .prix  { color: var(--txt); font-size: 1.2em}
  .box-regroup .boxprix {  background-color: var(--claire); padding: 5px; padding: 5px 15px; text-align: right;} 
.info_portee { border: 1px solid var(--claire); }
.box-chiens,  .telechargement-box  { border: 1px solid var(--gr-2);   }
.liste-portees { border: 1px solid #d2d7dc; }

.liste-portees .regroup .int p:first-child { color: var(--txt); }
.liste-portees .parents .box { background-color: transparent;  }
.liste-portees .parents .box .nom .gras {background-color: var(--claire); color:var(--main-txt3-txt); }
.galeries-box .gb-img .nb { color: var(--txt) }
.telechargement-box-dl { background-color: var(--claire); border: 1px solid  var(--claire); }
.telechargement-box-dl:hover {background-color: var(--claire); border: 1px solid  var(--claire);  }
.telechargement-box .regroup .gras { color: var(--txt); } 


.resultat-box-txt .manif, .resultat-box-txt .upper, .resultat-box .lien-nom, .contact-tel .titre, .contact-tel .int, .contact-nom {color: var(--txt);}

.contact-tel .u { background-color: var(--claire); }

.box-regroup .status a, .fiche-pedigree, .bout-lien, .bout-anne, .affichnum   { outline : 2px solid var(--cta); color: var(--cta); font-weight: bold; }
div.button, button, [type=submit] { background-color: var(--cta-h); color : #FFF}
.box-regroup .status a:hover, .fiche-pedigree:hover, .bout-lien:hover, .bout-annee:hover { outline : 2px solid var(--cta-h); color: var(--cta-h); background-color: var(--claire); }
.box-regroup .status a:hover, .fiche-pedigree:hover, .bout-lien.coul.gras, .bout-annee.coul.gras { background : var(--bg-cta); color : var(--bg-cta-txt); }

.contact-rs.gras { font-weight: bold; font-size: calc(1.2rem + .1vw);}

.info-contact-add-titre { color: var(--h2);}
/*div.button, button, [type=submit] { background: var(--claire); } */
.actu-box:hover .actu-alaune-img { display: flex; outline: 2px solid #000; }
.actu-box .actu-alaune-img, .actu-box .actu-alaune-img-vide {  background-color: var(--claire); border-radius: 5px;   }
.actu-box .actu-alaune-h1 {color: var(--txt); }
.actu-publie { color : var(--txt)}
.liste-fiche-resultat .fiche-titre .titre { color: var(--txt)}
.box-chiens:hover	{ background-color: var(--claire-h)}
.box-chiens .nom 	{ color: var(--txt); }
.box-chiens-etat-bas { background-color: var(--claire); }

.liste-portees .parents .box .nom .gras, .boxprix, .box-chiot .box-regroup .boxprix .prix   {background-color: var(--bg-cta); color: #FFF; }


#affiche_tel, #affiche_gsm { font-weight: bold; color:var(--h2); font-size: 1.2rem;}

/* DIVERS*/
.rond-vide { color: var(--claire) }

/* PIED */
footer {  background-color: var(--main-footer-bgcolor); color: var(--main-footer-txtcolor)}
footer a { color: var(--main-footer-a-txtcolor)}
  

#nav-main-bar ul li a, #rubaccueil, #nav-g-races a, .article-duo,   .telechargement-box-dl, .iamenu-show .menumobile-bout, .raccourci-bout a, input[type=text], input[type=date], input[type=number], input[type=email], 
input[type=file], input[type=range], input[type=password], input[type=tel], textarea, select, div.button, button, [type=submit], .nav-g-rubrique,  #nav-g-races a .vign  img { border-radius: var(--radius); }




@media (max-width: 800px) {
  
  .iamenu-show .menumobile-bout a:hover { border: 2px solid var(--claire); color: #000 }
  .iamenu-show .menumobile-titre { color: var(--txt); }
  .article-main { padding: 20px;   }
  #section-main-page { padding: 0; background-color: transparent}
  #header-affixe { height: auto; padding: calc(2rem + 1vw) 0;}
  h1 a div, h1  p {
      display: block; 
  }
  #global { background-size: 130%; }
    
}

@media (max-width: 500px) { 
  .menurub { color: #FFF; padding: 10px 10px !important; background-color: rgba(255,255,255,0.2) }	
}

/*****************************************************************/
/*****************************************************************/