/*===================================================================
Feuille de style XHTML/CSS
interregion : Inter-région Bretagne - Pays de Loire : Modélisme naval
Jean-Marc HUET - 06/2019 - V3
===================================================================*/

/* Pour les écrans étroits
smartphones, tablettes et portables
largeur d'écran max : 480 pixels
================================================*/
@media (max-width: 480px) { /* Pour les smartphones */
    header h1 {
        font-size: 1.5em; /* Taille du texte */
        margin: 0; /* Marge extérieure */
    }

    header h2 {
        font-size: 1.1em; /* Taille du texte */
        margin: 0; /* Marge extérieure */
    }

    #logo_entete {
        width: 20%; /* Largeur de l'image */
    }

    nav {
       padding: 4px 0px; /*  */
    }

    .menu {
        display: none; /* Cache le menu */
        list-style-type: none; /* Puce des éléments de liste */
        margin: 6px 0; /* Marge extérieure */
        padding: 0; /* marge intérieure */
    }

    .menu li {
        border : 1px solid #46E; /* Bordure autour de chaque élément */
    }

    .menu li a {
        display: block; /* Affiche le lien */
        background-color: #008;
        color: #FFF; /* Couleur du texte */
        text-decoration: none; /* Soulignement des liens */
        padding: 5px; /* marge intérieure */
    }

    .menu a:hover {
        color: #FF0; /* Couleur du texte */
        background-color: #22A;
        font-weight: bold; /*  */
    }

    .menu ul {
        display: none; /* Cache le menu */
        list-style-type: none; /* Puce des éléments de liste */
        padding: 0; /* marge intérieure */
    }

    .menu ul li a {
        display: block; /* Affiche le lien */
        padding: 5px 2em; /* marge intérieure */
        background-color: #28E;
    }
    .menu li:hover ul, nav ul li.sfhover ul { /* Sous-listes lorsque la souris passe sur un élément de liste */
        display: block; /*  le menu */
    }

    /* Contenu de page */
    #flexible {
        display: flex; /* Mode boite flexible */
        flex-flow: row wrap; /* Rangement en ligne sur plusieurs lignes */
    }
    
    /* Info supplémentaire */
    aside { /* Cadre de droite */
        display: flex; /* Mode boite flexible */
        flex-flow: column; /* Rangement en colonne */
        width: 100%; /* Largeur du cadre */
    }

    aside p { /* Pour les paragraphes */
        margin: 0.5em;
    }
    
    .section_etroite, .section_large {
        margin: 0; /* Pas de marge extérieures */
	    padding: 5px; /* marge intérieure */
	    order: -1; /* Placer avant le précédent (aside) */
	    align-self: center; /* Alignement au centre */
        width: 100%;
    }

    .list th,.list td {
        height: 1.5em;
        font-size: 0.5em;
    }

    .list input {
        font-size: 1.5em;
    }

    /* Formulaire : cadre */
    .fieldSet100, .fieldSet90, .fieldSet80, .fieldSet60, .fieldSet40 { /* Largeur 100% */
        width: 100%;
    }

    /* Fiche de jugement */
    .enteteFiche { /* Tableau de l'entête de la fiche */
        width: 100%;
    }

    .ongletsFiche {
        width: 100%;
    }

    .manche table td .chiffre {
        width: 2.5em;
    }

}














    /* Formulaire */
    fieldset { /* Les cadres */
/*        width: 100%;*/
    }

    .form th, td {
/*        height: 1.5em;*/
       /* font-size: 0.5em;*/
    }