/*------------------------------------------------------------------------------
  Site repaircafejacouclapiers.fr
  
  V1 - mai 2026
  Auteur : Michel Corneloup
------------------------------------------------------------------------------*/
@font-face {
    font-family:"Calibri-normal";    
    src: local("Calibri"), url("./fonts/calibri.ttf");
    font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
    font-family:"Calibri-bold";    
    src: local("Calibri bold"),url("./fonts/calibrib.ttf");
    font-weight: bold; font-style: normal; font-display: swap;
}
@font-face {
    font-family:"Calibri-italic";    
    src: local("Calibri italic"),url("./fonts/calibrii.ttf");
    font-weight: normal; font-style: italic; font-display: swap;
}
html {
    font-family: var(--fontFamily-normal); font-size: var(--font-size-small); 
    background-color:var(--body-bkgColor);
    margin: 5px; padding: 0; border: none;
    
    /* Police par défaut à l'installation Firefox : Arial */
    --fontFamily-normal: "Calibri-normal", sans-serif;
    --fontFamily-bold:   "Calibri-bold",   sans-serif;
    --fontFamily-italic: "Calibri-italic", sans-serif;
    
    --font-size-small:      0.9rem;
    --font-size-texte:      1.2rem;
    --font-size-titre:      3rem;
    --font-size-sous-titre: 1.5rem;
    --font-size-medium:     2rem;
    
    --body-bkgColor:       white;
    --header-bkgColor:     #EEEEEE;
    --orange-rc:           #ED694B;       /* orange du logo */
    --blue-rc:             #2D2E7E;       /* bleu du logo   */
    --pale-blue:           #DCE6F1;       /* bleu pâle  */
    
    --menu-bkgColor:       #CCCCCC;       /* boutons des menus */
    --menu-hover:          #A0A0A0;
    --menu-disabled:       #808080;
    --gestionMenu-bkgColor:#D5FFAA;       
    --gestionMenu-txt:     #BB00BB;       
    
    --popupBtn_bkgColor:   #A0A0A0;
    --popupBtn_hover:      #606060;
    --popupBtn_disabled:   #C8C8C8;
       
    /* Effets de relief 
       inset : le décalage DOIT être égal à la largeur de l'ombre pour qu'elle
               soit hors de la boîte sur les côtés opposés au sens du décalage */
    --white-layer:       rgb(255 255 255 / 0.6); 
    --black-layer:       rgb(0 0 0 / 0.6);
    --inset_leftTop:     inset  3px  3px 3px; /* decalageX, décalage Y, largeur */
    --inset_rightBottom: inset -3px -3px 3px;
    
    --relief-pushOff : inset  3px  3px 3px rgb(255 255 255 / 0.6), inset -3px -3px 3px rgb(0 0 0 / 0.6);
    --relief-pushOn  : inset -3px -3px 3px rgb(0 0 0 / 0.6), inset  3px  3px 3px rgb(255 255 255 / 0.6);
}
body,header,footer,nav,main,dialog,
div,img,label,input,button,span,h1,a,p,ul,li,table,tr,th,td {  
    margin:0; padding:0; border:0; font-size: var(--font-size-small);
    color: black;
}   
body       {display:flex; flex-direction: column; justify-content: start; align-items: stretch;}
.coteAcote {display:flex; flex-direction: row; justify-content: space-around; align-items:start;}
h1         {font-family: var(--fontFamily-bold);}
a          {color: blue;}
a:visited  {color: purple;}

/*------------------------------------------------------------------------------
  Les boutons et les menus
------------------------------------------------------------------------------*/
button { /* button n'hérite pas font-family de son conteneur */
    font-family:var(--fontFamily-normal); font-size: var(--font-size-texte); 
    text-align: center; cursor: pointer;
}
/* Boutons des commandes dans les menus popup
-------------------------------------------*/
.menuBtn          {height: 30px; width: 200px; padding-left:5px; text-align: left;
                   background-color: var(--menu-bkgColor);}
.menuBtn:hover    {background-color: var(--menu-hover);}
.menuBtn:disabled {color: var(--menu-disabled);}
.gestionMenuBtn   {background-color: var(--gestionMenu-bkgColor); color: var(--gestionMenu-txt);}

/* Boutons d'ouverture d'un menu popup non contextuel
---------------------------------------------------*/
.popupMenuBtn {
    font-family:var(--fontFamily-bold); font-size: var(--font-size-texte); 
    margin: 10px 10px 10px 10px; 
    color: white; text-shadow: 1px 1px 1px black;
    width: 120px; height: 45px;
    background-color: var(--popupBtn_bkgColor);    
}
.popupMenuBtn:hover {background-color: var(--popupBtn_hover);}

#menuLabel { /* <div> du bouton de menu principal : regroupe le span "menu" et l'icône associée */
    display:flex; flex-direction: row; justify-content: space-between; align-items: center;
    width: 100px; height: 30px; padding: 5px; text-shadow: none;
}
#menuLabel > span {font-family:var(--fontFamily-bold); font-size: var(--font-size-sous-titre); color: black;}

/* Boutons de contrôle des dialogues (effet de bouton poussoir)
-------------------------------------------------------------*/
.pushBtn {
    font-family:var(--fontFamily-bold); font-size: var(--font-size-texte); 
    color: white; text-shadow: 1px 1px 1px black; background-color: var(--popupBtn_bkgColor);    
    width: 100px; height: 45px;
    box-shadow: var(--inset_leftTop)     var(--white-layer), 
                var(--inset_rightBottom) var(--black-layer);
}   
.pushBtn:active {box-shadow: var(--inset_rightBottom) var(--white-layer), 
                             var(--inset_leftTop)     var(--black-layer);}
.pushBtn:hover    {background-color: var(--popupBtn_hover);}

.pushBtn:disabled {background-color: var(--popupBtn_disabled); 
                   box-shadow: var(--inset_leftTop)     var(--white-layer), 
                               var(--inset_rightBottom) var(--black-layer);}
/* Fenêtres popup des menus
-------------------------*/
.popupMenu {
    display:none; position: fixed; z-index: 10; flex-direction: column;
    border: solid thin black; background-color: var(--header-bkgColor);
    margin: 0; padding: 0;
    box-shadow: 7px 5px 3px 0 var(--black-layer);
             /* right, bottom, blur, spread, color */    
}
/*------------------------------------------------------------------------------
  Styles du header (Ecran Samsung Galaxy S7 : largeur 360 pixels)
------------------------------------------------------------------------------*/
#logo {width: 450px; height: 98px;}
header {
    display:flex; flex-direction: row; justify-content: space-between; align-items: end;
    padding: 10px; background: var(--header-bkgColor); border-bottom: solid thin black;
}
@media all and (max-width: 690px) {#logo {width: 350px;}}
/* @media all and (max-width: 480px) {#logo {width: 180px;} header {flex-direction: column; align-items: center;}} */
@media all and (max-width: 590px) {header {flex-direction: column; align-items: center;}}

#commandes { /* div qui regroupe le bouton de menu et le bouton de connexion */
    display:flex; flex-direction: row; align-items: center;
}
/*------------------------------------------------------------------------------
  Styles du footer
------------------------------------------------------------------------------*/
footer {
    display:flex; flex-direction: row; justify-content: space-around; align-items:start; 
    margin: 10px 0 0 0; padding: 10px; background: var(--header-bkgColor);
    border-top: solid thin black; border-bottom: solid thin black;
}    
footer h1, p {margin: 0 0 5px 0; font-size: var(--font-size-small);}

#reseaux {
    display:flex; flex-direction: column; justify-content: start; align-items: stretch;   
}
/*------------------------------------------------------------------------------
  Styles pour <main>
------------------------------------------------------------------------------*/
main {
    display:flex; flex-direction: column; justify-content: start; align-items:stretch;
    margin: 0 25px 0 25px;
}
main h1 {
    margin: 10px; font-size: var(--font-size-titre); 
    color : var(--blue-rc); text-align: center;
}
main h1.erreur {color: var(--orange-rc); font-size: var(--font-size-medium);}

main p {
    margin: 10px; border: none;
    font-size: var(--font-size-texte); text-align: left;   
}
main p.remarque {
    font-family: var(--fontFamily-italic); font-size: var(--font-size-small);
    text-align: center;
}
main a {font-size: var(--font-size-texte);}

ul {margin-left: 30px; padding-left: 25px;} /* Le padding contient la puce */
li {margin-top:5px; font-size: var(--font-size-texte);}

#introCasse {
    font-family: var(--fontFamily-bold); font-size: var(--font-size-medium);
    color: var(--orange-rc);
}
/*------------------------------------------------------------------------------
  Styles pour accordéon
------------------------------------------------------------------------------*/
details {
    margin: 10px 0 10px 0; background-color:var(--body-bkgColor);
}
details.fondGris {background-color:var(--header-bkgColor);}

summary {
    font-family: var(--fontFamily-bold); font-size: var(--font-size-sous-titre);
    background-color:var(--bkg-color); color:var(--blue-rc);
    white-space:normal; cursor:pointer;
}
summary:hover {color:white; background-color:var(--blue-rc);}

/*------------------------------------------------------------------------------
  Gestion des images
------------------------------------------------------------------------------*/
.rightImgFloat {
    float: right; margin-left: 7px;  border: 2px solid var(--blue-rc); width:50%;
    }
#sallesJSON { /* <div> invisible, initialisé en AJAX avec les données des salles des ateliers */
    display: none;
}
#pageIndex_leafletDiv { /* <div> affichant la carte des ateliers */
    width:50%; margin:10px; height:200px;
    border: solid var(--orange-rc); 
    float: right; z-index: 0;
}
@media all and (max-width: 480px) {
    #pageIndex_leafletDiv {width:90%; float: none;}
}
/*------------------------------------------------------------------------------
  Tableaux
------------------------------------------------------------------------------*/
table    {width: 90%; margin:10px 5% 0px 5%; border-collapse: collapse;}
table tr:nth-child(even) {background-color: var(--pale-blue);}
table th {border:1px solid var(--blue-rc); padding:5px; text-align:center;}
table td {border:1px solid var(--blue-rc); padding:5px; text-align:center;}

.ateliers-col1 {width:25%;}
.ateliers-col2 {width:10%; text-align:left;}

/*------------------------------------------------------------------------------
  Les <dialog>
------------------------------------------------------------------------------*/
dialog {
    position:fixed; left:50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
    padding: 20px; border: 3px solid var(--blue-rc);
    background-color: var(--header-bkgColor);
}
dialog::backdrop {background-color: paleturquoise; opacity: 0.5;}

dialog  h1        {font-size: var(--font-size-medium); 
                   margin: 0 0 15px 0; color: var(--blue-rc); text-align: center;}
dialog button     {width: 80px; height: 35px;}
dialog .coteAcote {margin-top: 10px;}
dialog p          {font-size: var(--font-size-texte); margin: 5px;}
dialog label      {font-size: var(--font-size-texte);
                   margin-left: 5px; display:block;}

input {height: 24px; width: 250px; font-size: var(--font-size-texte); padding-left:5px;
       border: solid black 1px; background-color: white;}

select {height: 24px; font-size: var(--font-size-texte);
       border: solid black 1px; background-color: white;}

.errMessage {height: 15px; color: red; font-size: var(--font-size-small); margin: 2px 0 5px 5px;}

#passwordDiv {
    display:flex; flex-direction: row; justify-content: start; align-items:start;
    margin: 10px 0 0 0; border: solid black 1px; background-color: white;
}
#passwordDiv  input {width: 200px; height: 24px; border: none;}
#passwordEye        {width: 24px; height: 24px;}

#sqlid_salle  {
    width: 250px; margin-left:5px; height: 26px; 
    font-size: var(--font-size-texte); background-color: white;
}
#salleDialog_leafletDiv {
    width:500px; height:300px; margin:5px; 
    border: solid var(--blue-rc);
}
@media all and (max-width: 590px) {#salleDialog_leafletDiv {width:250px; height:250px}}