*  { box-sizing              : border-box          ; }

h1 { color:#000000; font-size:64pt; text-align:center; font-family:Monotype corsiva,arial,sans serif ; margin:0%; }
h2 { color:#000000; font-size:32pt; text-align:center; font-family:Monotype corsiva,arial,sans serif ; margin:0%; }
h3 { color:#000000; font-size:18pt; text-align:left  ; font-family:Monotype corsiva,arial,sans serif ; margin:0%; }
h4 { color:#000000; font-size:16pt; text-align:left  ; font-family:Monotype corsiva,arial,sans serif ; /* margin:0%;*/ }
h5 { color:#000000; font-size:14pt; text-align:left  ; font-family:Monotype corsiva,arial,sans serif ; /* margin:0%;*/ }
h6 { color:#000000; font-size:12pt; text-align:left  ; font-family:Monotype corsiva,arial,sans serif ; /* margin:0%;*/ }

                        
h1.Titre                  { color : red ; font-style:italic; }                          
                          
body                      { background-image        : url(../fonds/bleuclairdv3.jpg);
                            background-repeat       : repeat              ;
                            background-attachment   : fixed               ; }         
                            
nav , section.navcache    { background              : #FFF2BF             ;
                            width                   : 100%                ; }
                               
nav                       { z-index                 : 100                 ;   /* au dessus de tout */
                            position                : fixed               ;   /* fixe     */
                          }   
/* navcache caché (solution trouvée pour ne pas masquer le début de la suite) */           
section.navcache          { visibility              : hidden              ; }
     
ul.navi {
    font: bold 16px arial;
    text-align: center;
    padding: 0;
    margin: 0 auto; 
    width: auto; 
    max-width: 100%; 
    display: flex; 
    justify-content: space-between; 
    height: auto;
}

ul.navi li {
    list-style: none;
    flex: 1; 
}

ul.navi li a {
    padding: 2px 0.5em;
    text-decoration: none;
    color: black;
    background-color: #FFF2BF;
    border: 2px solid #FFE271;
    display: block; 
    text-align: center; 
    width: 100%; 
}

                            
ul.navi li a:hover        { background-color        : #FFE271             ;
                            border-style            : outset              ;
                            padding                 : 2px 0.5em           ; }
                            
section.navcache          { grid-area               : navcache            ; }

div.cadre                 { grid-area               : cadre               ; }

div.Drapeau               { display                 :flex                 ;
                            justify-content         :center               ; }
                            
section.page              { display                 : grid                ;
                            grid-template-columns   : 1fr                 ;
                            grid-template-areas     : "navcache" "cadre"  ; }
                            
a:link                    { color                   : blue                ;
                            text-decoration         : none                ; }
                            
a:visited                 { color                   : green               ;
                            text-decoration         : line-through        ; }
                            
a:hover                   { color                   : red                 ;
                            font-weight             : bold                ;
                            font-style              : italic              ; }
                            
a:active                  { color                   : black               ;
                            text-decoration         : underline overline  ; }