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

:root {   
  --bg      : #652e72;
  --menu    : #b41d7f;
  --site    : #460a4d59;
  --h2      : #3b061c; 
  --hx      : #000;
  --cta     : #d73ca1; 
  --cta-h   : #751152; 
  --bg-cta       : #d73ca1; 
  --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(3.5rem + 1.5vw));
  --affixe-shadow :  0 0 40px #000;
  --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 : #FFFFFF30;
  --main-menu-txtype : uppercase;
  --main-menu-txtsize :calc(1.1em + .2vw);
  
  /* MENU GAUCHE */
  --main-nav-g-bg : #a366aa;
  --main-nav-g-titre-bg : #862990;
  --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 : #b41d7f9e;
  --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: "Zeyada", cursive;
    font-weight: 400;
    font-style: normal; 
  }

  h1 p { 
    color: #ffe5b3;
    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; }

 .nav-main-deco { position: absolute;  display: block;  width: 888px;  height: 35px;  background:  url(img1.png); top: -35px; margin-left: calc(50% - 444px); opacity: .5; }

 .nav-effets-speciaux1 { position: absolute; bottom: 15px; left: 58%; display: block; width: 4px; height: 4px; opacity: 0; border-radius: 50%; background-color: #fff2a8; animation: animationFrames linear 4s; animation-iteration-count: infinite; transform-origin: 50% 50%; -webkit-animation: animationFrames linear 4s 1s; -webkit-animation-iteration-count: infinite; -moz-animation: animationFrames linear 4s 1s; -moz-animation-iteration-count: infinite; -o-animation: animationFrames linear 4s 1s; -o-animation-iteration-count: infinite; -ms-animation: animationFrames linear 4s 1s; -ms-animation-iteration-count: infinite }
 .nav-effets-speciaux2 { position: absolute; bottom: 20px; left: 60%; display: block; width: 5px; height: 5px; opacity: 0; border-radius: 50%; background-color: #fff2a8; animation: animationFrames linear 8s; animation-iteration-count: infinite; transform-origin: 50% 50%; -webkit-animation: animationFrames linear 8s 1s; -webkit-animation-iteration-count: infinite; -moz-animation: animationFrames linear 8s 1s; -moz-animation-iteration-count: infinite; -o-animation: animationFrames linear 8s 1s; -o-animation-iteration-count: infinite; -ms-animation: animationFrames linear 8s 1s; -ms-animation-iteration-count: infinite }
 .nav-effets-speciaux3 { position: absolute; bottom: 24px; left: 62%; display: block; width: 3px; height: 3px; opacity: 0; border-radius: 50%; background-color: #fff2a8; animation: animationFrames linear 12s; animation-iteration-count: infinite; transform-origin: 50% 50%; -webkit-animation: animationFrames linear 12s 1s; -webkit-animation-iteration-count: infinite; -moz-animation: animationFrames linear 12s 1s; -moz-animation-iteration-count: infinite; -o-animation: animationFrames linear 12s 1s; -o-animation-iteration-count: infinite; -ms-animation: animationFrames linear 12s 1s; -ms-animation-iteration-count: infinite }
 .nav-effets-speciaux5 { position: absolute; bottom: 10px; left: 73%; display: block; width: 4px; height: 4px; opacity: 0; border-radius: 50%; background-color: #fff2a8; animation: animationFrames2 linear 10s; animation-iteration-count: infinite; transform-origin: 50% 50%; -webkit-animation: animationFrames2 linear 10s 1s; -webkit-animation-iteration-count: infinite; -moz-animation: animationFrames2 linear 10s 1s; -moz-animation-iteration-count: infinite; -o-animation: animationFrames2 linear 10s 1s; -o-animation-iteration-count: infinite; -ms-animation: animationFrames2 linear 10s 1s; -ms-animation-iteration-count: infinite }
 .nav-effets-speciaux6 { position: absolute; bottom: 20px; left: 72%; display: block; width: 5px; height: 5px; opacity: 0; border-radius: 50%; background-color: #fff2a8; animation: animationFrames2 linear 6s; animation-iteration-count: infinite; transform-origin: 50% 50%; -webkit-animation: animationFrames2 linear 6s 1s; -webkit-animation-iteration-count: infinite; -moz-animation: animationFrames2 linear 6s 1s; -moz-animation-iteration-count: infinite; -o-animation: animationFrames2 linear 6s 1s; -o-animation-iteration-count: infinite; -ms-animation: animationFrames2 linear 6s 1s; -ms-animation-iteration-count: infinite }
 .nav-effets-speciaux4 { position: absolute; bottom: 8px; left: 71%; display: block; width: 3px; height: 3px; opacity: 0; border-radius: 50%; background-color: #fff2a8; animation: animationFrames2 linear 8s; animation-iteration-count: infinite; transform-origin: 50% 50%; -webkit-animation: animationFrames2 linear 8s 1s; -webkit-animation-iteration-count: infinite; -moz-animation: animationFrames2 linear 8s 1s; -moz-animation-iteration-count: infinite; -o-animation: animationFrames2 linear 8s 1s; -o-animation-iteration-count: infinite; -ms-animation: animationFrames2 linear 8s 1s; -ms-animation-iteration-count: infinite }
 .nav-effets-speciaux9 { position: absolute; bottom: 20px; left: 83%; display: block; width: 4px; height: 4px; opacity: 0; border-radius: 50%; background-color: #fff2a8; animation: animationFrames linear 4s; animation-iteration-count: infinite; transform-origin: 50% 50%; -webkit-animation: animationFrames linear 4s 1s; -webkit-animation-iteration-count: infinite; -moz-animation: animationFrames linear 4s 1s; -moz-animation-iteration-count: infinite; -o-animation: animationFrames linear 4s 1s; -o-animation-iteration-count: infinite; -ms-animation: animationFrames linear 4s 1s; -ms-animation-iteration-count: infinite }
 .nav-effets-speciaux7 { position: absolute; bottom: 8px; left: 84%; display: block; width: 5px; height: 5px; opacity: 0; border-radius: 50%; background-color: #fff2a8; animation: animationFrames2 linear 12s; animation-iteration-count: infinite; transform-origin: 50% 50%; -webkit-animation: animationFrames2 linear 12s 1s; -webkit-animation-iteration-count: infinite; -moz-animation: animationFrames2 linear 12s 1s; -moz-animation-iteration-count: infinite; -o-animation: animationFrames2 linear 12s 1s; -o-animation-iteration-count: infinite; -ms-animation: animationFrames2 linear 12s 1s; -ms-animation-iteration-count: infinite }
 .nav-effets-speciaux8 { position: absolute; bottom: 12px; left: 81%; display: block; width: 3px; height: 3px; opacity: 0; border-radius: 50%; background-color: #fff2a8; animation: animationFrames linear 6s; animation-iteration-count: infinite; transform-origin: 50% 50%; -webkit-animation: animationFrames linear 6s 1s; -webkit-animation-iteration-count: infinite; -moz-animation: animationFrames linear 6s 1s; -moz-animation-iteration-count: infinite; -o-animation: animationFrames linear 6s 1s; -o-animation-iteration-count: infinite; -ms-animation: animationFrames linear 6s 1s; -ms-animation-iteration-count: infinite }
 @keyframes "animationFrames" {
 0% {
 transform:translate(100px, 20px);
 }
 20% {
 transform:translate(90px, 0px);
 }
 40% {
 transform:translate(95px, -20px);
 }
 60% {
 transform:translate(85px, -40px);
 opacity:1;
 }
 100% {
 transform:translate(100px, -60px);
 opacity:0;
 }
 }
 @-moz-keyframes "animationFrames" {
 0% {
 transform:translate(100px, 20px);
 }
 20% {
 transform:translate(90px, 0px);
 }
 40% {
 transform:translate(95px, -20px);
 }
 60% {
 transform:translate(85px, -40px);
 opacity:1;
 }
 100% {
 transform:translate(100px, -60px);
 opacity:0;
 }
 }
 @-webkit-keyframes "animationFrames" {
 0% {
 transform:translate(100px, 20px);
 }
 20% {
 transform:translate(90px, 0px);
 }
 40% {
 transform:translate(95px, -20px);
 }
 60% {
 transform:translate(85px, -40px);
 opacity:1;
 }
 100% {
 transform:translate(100px, -60px);
 opacity:0;
 }
 }
 @-o-keyframes animationFrames {
 0% {
 transform:translate(100px, 20px);
 opacity:0
 }
 20% {
 transform:translate(90px, 0px);
 opacity:1
 }
 40% {
 transform:translate(95px, -20px)
 }
 60% {
 transform:translate(85px, -40px);
 opacity:1
 
 }
 100% {
 transform:translate(100px, -60px);
 opacity:0
 }
 }
 @keyframes "animationFrames2" {
 0% {
 transform:translate(85px, 20px);
 }
 10% {
 transform:translate(95px, 0px);
 }
 39% {
 transform:translate(90px, -20px);
 }
 72% {
 transform:translate(100px, -40px);
 opacity:1;
 }
 100% {
 transform:translate(105px, -60px);
 opacity:0;
 }
 }
 @-moz-keyframes "animationFrames2" {
 0% {
 transform:translate(85px, 20px);
 }
 10% {
 transform:translate(95px, 0px);
 }
 39% {
 transform:translate(90px, -20px);
 }
 72% {
 transform:translate(100px, -40px);
 opacity:1;
 }
 100% {
 transform:translate(105px, -60px);
 opacity:0;
 }
 }
 @-webkit-keyframes "animationFrames2" {
 0% {
 transform:translate(85px, 20px);
 }
 10% {
 transform:translate(95px, 0px);
 }
 39% {
 transform:translate(90px, -20px);
 }
 72% {
 transform:translate(100px, -40px);
 opacity:1;
 }
 100% {
 transform:translate(105px, -60px);
 opacity:0;
 }
 }
 @-o-keyframes animationFrames2 {
 0% {
 transform:translate(85px, 20px)
 }
 10% {
 transform:translate(95px, 0px)
 }
 39% {
 transform:translate(90px, -20px)
 }
 72% {
 transform:translate(100px, -40px);
 opacity:1
 }
 100% {
 transform:translate(105px, -60px);
 opacity:0
 }
 }

  /* MENU HAUT */
  #nav-main-bar { width: 100%; max-width: 1400px; background-color: var(--menu); border-radius: var(--radius); position: relative; } 
  #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) }	
  }

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