@import url('https://fonts.googleapis.com/css2?family=Emilys+Candy&family=Quicksand:wght@300..700&display=swap');
:root {   
  --bg      : #3e1d2e;
  --menu    : #620129c7;
  --site    : #c67091bd;
  --h2      : #3b061c; 
  --hx      : #000;
  --cta     : #a23a9f; 
  --cta-h   : #641462; 
  --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 : #000;
  --main-asideatara-color : #eeeeee;

  /* AFFIXE */
  --affixe      : #fff;
  --affixe-size : clamp(2.5rem, 5vw, calc(2.5rem + 1.5vw));
  --affixe-shadow :  0 1px 1px hsla(0, 0%, 0%, .4), 0 -1px 1px hsla(0, 0%, 0%, .4), 1px 0 1px hsla(0, 0%, 0%, .4), -1px 0 1px hsla(0, 0%, 0%, .4), 0 0 10px hsla(0, 0%, 0%, .4); 
  --race        : #940a3a;
 
  /* MENU HAUT */  
  --main-menu-txtcolor : #fff;
  --main-menu-txtcolorh : #fff;
  --main-menu-a-bg-h : color-mix(in lab, var(--menu) 70%, #ffffff 30%);
  --main-menu-select : color-mix(in lab, var(--menu) 50%, #ffffff 50%);
  --main-menu-txtype : uppercase;
  --main-menu-txtsize :calc(1.1em + .2vw);
  
  /* MENU GAUCHE */
  --main-nav-g-bg : var(--menu);
  --main-nav-g-titre-bg : var(--menu);
  --main-nav-g-titre-txtcolor : #ffffff; 
  --main-nav-g-rubrique-a-bgcolor : hsla(0, 0%, 100%, 0.1) ; 
  --main-nav-g-rubrique-a-txtcolor : #FFFFFF;

  /* PAGE et ACTU */   
  --main-article-main-bgcolor : #FFFFFF;
  --actualaune-bgcolor : var(--menu);
  --actu-alaune-h1     : #FFF;
  --actualaune-txtcolor : #FFF;
  
  /* PIED*/
  --main-footer-bgcolor : transparent;
  --main-footer-txtcolor : #fff;
  --main-footer-a-txtcolor : #ffaccf;
  }
  
  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;
    background-size: 100%;  
  }
  
  /* HAUT */
  #aside-atara { background-color: var(--main-asideatara-bgcolor); }
  #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); 
	font-family: "Emilys Candy", serif;
    font-weight: 400;
    font-style: normal; 
	-webkit-text-stroke: 0.1px;
	-webkit-text-stroke-color: #3b061c;
  }

  h1 p { 
    color: var(--race);
    font-weight: bold;
    font-size: calc(.9rem + .1vw);
    text-transform: uppercase;
  } 

  h2 { color : var(--h2) }
  h3 { color : var(--hx) }
  h4 { color : color-mix(in lab, var(--h2) 90%, #fff 10%);  }
 
 #header-affixe { height: calc(100px + 10vw); max-height: 400px; }


  /* MENU HAUT */
  #nav-main-bar { width: 100%; max-width: 1400px; background-color: var(--menu); border-radius: var(--radius) } 
  #nav-main-bar ul li a { text-transform: var(--main-menu-txtype); font-size: var(--main-menu-txtsize) ; color: var(--main-menu-txtcolor); font-weight: 600;  }
  #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; text-shadow: 0 0 14px #00000080;}
  .icone-accueil { background: url('/media/vign-accueil-blanc.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-color: var(--site);  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: bold; font-size: calc(1rem + .1vw); padding: calc(1rem + .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);}
  h3 { color: var(--txt);} 
  .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); }
  
  
  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) }	
  }

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