@import url('https://fonts.googleapis.com/css2?family=Bigelow+Rules&family=IM+Fell+English:ital@0;1&family=Quicksand:wght@300..700&display=swap');

:root {
  --bg      : #000;
  --menu    : #d2783c7d;
  --site    : #372419ab;
  --h2      : #d2783c;
  --hx      : #000;
  --cta     : #cf5a0c;
  --cta-h   : #964008;
  --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(3rem + 1vw));
  --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        : #ffab5d;

  /* MENU HAUT */
  --main-menu-txtcolor : #fff;
  --main-menu-txtcolorh : #fff;
  --main-menu-a-bg-h : #00000020;
  --main-menu-select : #00000040;
  --main-menu-txtype : uppercase;
  --main-menu-txtsize :calc(2em + .5vw);

  /* MENU GAUCHE */
  --main-nav-g-bg : #472c1b;
  --main-nav-g-titre-bg : #5b351d;
  --main-nav-g-titre-txtcolor : #ffffff;
  --main-nav-g-rubrique-a-bgcolor : #593f2d;
  --main-nav-g-rubrique-a-txtcolor : rgb(236, 166, 124);

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

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


  /* IMG SUPP */
  #particles-js { position: absolute; top: 30px; width: 100%; height: 275px; }
  .IMG_PERSO { position: absolute; height: 20px; width: 20px; top: 30px; right: 130px }
  .tag-image-cadre { border: 3px dotted rgba(255,255,255,0.8); background-color: rgba(255,255,255,.3) }
  .tag-image-1,  .tag-image-2,  .tag-image-3,  .tag-image-4 { position: absolute }

  .tag-image-1 { z-index: 2; top: 85px; right: 150px; transform: rotate(-10deg); width: 150px; height: 160px; }
  .tag-image-2 { z-index: 1; top: 15px; right: 0px; transform: rotate(5deg); width: 180px; height: 210px; }
  .tag-image-3 { z-index: 1; top: 70px; right: -120px; transform: rotate(15deg); width: 150px; height: 180px; }
  .tag-image-4 { z-index: 3; top: 190px; right: 115px; transform: rotate(6deg); width: 60px; height: 60px; }

  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;
  }

  /* HAUT */
  #aside-atara { background-color: var(--main-asideatara-bgcolor); }
  #aside-atara a {color: var(--main-asideatara-color); }
  #header-affixe-bar { justify-content: flex-start;}
  h1 { display: flex; flex-direction: column; gap: 10px;    align-items: flex-start; }
  h1 a {
    color: var(--affixe);
    font-size: var(--affixe-size);
    text-shadow: var(--affixe-shadow);
	  font-family: "Forum", serif;
    font-weight: 400;
    font-style: normal;
    z-index: 2;
    max-width: 900px;
    text-align: left;
  }

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

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

 #header-affixe { height: 300px; max-height: 400px; }

  /* MENU HAUT */
  #nav-main-bar { width: 100%; max-width: 1400px; background-color: var(--menu); border-radius: var(--radius); z-index: 1; }
  #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-family: "Bigelow Rules", serif; font-weight: 400; font-style: normal; text-shadow: 0px 2px 0 #000;}
  #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-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; border-top: 2px solid #8b3a0875;  }
  .actu-alaune-h1	 	{ color: var(--actualaune-titre); }
  .actu-alaune-img 	{ background-color: var(--claire);}
  .actu-alaune  .actu-alaune-txt { color: var(--actualaune-txtcolor);}

  /* 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) {

  .tag-image-1 { z-index: 2; top: 85px; right: 150px; transform: rotate(-10deg); width: 75px; height: 80px; }
  .tag-image-2 { z-index: 1; top: 15px; right: 0px; transform: rotate(5deg); width: 90px; height: 105px; }
  .tag-image-3 { z-index: 1; top: 70px; right: -120px; transform: rotate(15deg); width: 75px; height: 90px; }
  .tag-image-4 { z-index: 3; top: 190px; right: 115px; transform: rotate(6deg); width: 30px; height: 30px; }

    .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(3rem + 1vw) 0;}
    h1 a div, h1  p {
       display: block;
    }
    .IMG_PERSO { display: none;}
    h1,#header-affixe-bar {    justify-content: center; }
    h1 { align-items: center;  }
    h1 a {
      max-width: 90vw;
      text-align: center;
  }

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

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