/* Feuille de style de Loisirs pour Tous 44 réalisée par Bruno BORDRON */
* {
	margin: 0px;
    box-sizing: border-box;
}
html {
    font-family: RobotoLight, sans-serif;
    font-size:  62.5%;
}
body {}
@font-face {
    font-family: 'Alata';
    src: url('../police/Alata-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('../police/roboto-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'RobotoLight';
    src: url('../police/roboto-light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
:root {
    --bleu: #84D0F2;
    --bleuFonce: #1B1B6C;
    --gris: #F2F2F2;
    --jaune: #F3C119;
    --rose: #FFEFEF;
    --rouge: #FF5757;
    --noir-100: rgb(240, 240, 240);
    --noir-200: rgb(233, 233, 233);
    --noir-300: rgb(218, 218, 218);
    --noir-600: rgb(178, 178, 278);
    --noir-900: rgb(138, 138, 138);
    --titre-1: 3.2rem;
    --titre-2: 2.8rem;
    --titre-3: 2.4rem;
    --titre-4: 2rem;
    --titre-5: 1.8rem;
    --titre-6: 1.6rem;
    --ombre: 1px 0px 5px rgb(230, 230, 230),
        -1px 0px 5px rgb(230, 230, 230),
        0px 1px 5px rgb(230, 230, 230),
        0px -1px 5px rgb(230, 230, 230);
}
.titre {
    color: white;
    font-family: Alata;
    font-size: var(--titre-2);
}
.sousTitre {
    font-family: Roboto;
    font-size: var(--titre-3);
}
.paragraphe { font-size: var(--titre-6); }
.italique {
    padding-right: 7px;
    color: var(--noir-900);
    font-family: RobotoLight;
    font-size: var(--titre-6);
    font-style: italic;
}
img {
    width: 90%;
    height: 90%;
}
/* STYLE DE L'EN-TETE ---------- ---------- ---------- ---------- ---------- */
.entete {
    position: fixed;
    top: 0;
    left: 0;
    width: 252px;
    height: 160px;
}
.entete__forme {
    position: fixed;
    top: 20px;
    left: 30px;
    width: 192px;
    height: 120px;
    border: 4px solid var(--bleu);
    border-radius: 12px;
    box-shadow: var(--ombre);
    background: no-repeat center / contain url("../images/logo-loisirs-pour-tous.jpeg");;
}
.entete__formePrint {
    width: 192px;
    height: 120px;
    border-radius: 12px;
    box-shadow: var(--ombre);
}

/* STYLE DES LIENS ---------- ---------- ---------- ---------- ---------- */
.menu__lien {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 32px;
    margin: 12px;
    padding: 0 12px;
    border-top: 2px solid var(--jaune);
    border-bottom: 2px solid var(--jaune);
    border-radius: 7px;
    box-shadow: var(--ombre);
}
.menu__lien-texte {
    color: var(--noir-900);
    font-size: var(--titre-6);
    text-decoration: none;
}

/* STYLE DES MODULES ---------- ---------- ---------- ---------- ---------- */
.module__formulaire { width: 500px; }
.module__classique { width: 600px;}
.module__large { width: 950px; }
.module__extraLarge { width: auto; }
.module__sousMenu {
    width: 192px;
    border: 4px solid var(--jaune);
}
.module__formulaire, .module__classique, .module__large, .module__extraLarge, .module__sousMenu {
    margin: 8vh 36px 0 36px;
    padding-bottom: 12px;
    border-radius: 12px;
}
.module__formulaire, .module__classique, .module__large, .module__extraLarge { border: 4px solid var(--bleu); }
.module__titre, .module__ligne, .module__sousTitre {
    display: flex;
    align-items: center;
    width: 100%;
}
.module__titre, .module__sousTitre {
    height: 42px;
    margin-bottom: 12px;
    padding-left: 25px;
    border-radius: 6px 6px 0 0;
}
.module__titre { background-color: var(--bleu); }
.module__sousTitre { background-color: var(--jaune); }
.module__ligne {
    padding: 0 12px;
    min-height: 36px;
}
.etire {
    justify-content: space-between;
    padding: 0 24px;
} 
.module__ligneLarge {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    min-height: 36px;
    margin: 7px 0 0 0;
}
/* STYLE DES FORMULAIRES ---------- ---------- ---------- ---------- ---------- */
.formulaire, .formulaire__ligne__enregistrement { display: flex; }
.formulaire {
    flex-direction: column;
    width: calc(100% - 80px);
    margin: 12px auto 0;
}
.formulaire__ligne__enregistrement {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 70px;
    border: none;
}
.radio { margin: 0 7px; }

/* STYLE DES FORMULAIRES ---------- ---------- ---------- ---------- ---------- */
.tableau {
    width: 100%;
    margin-top: 12px;
    border-collapse: collapse;
}
.ligne__tableau {
    width: 100%;
    height: 42px;
}
.ligne__tableau:nth-child(odd) { background-color: white; }
.ligne__tableau:nth-child(even) { background-color: var(--noir-100); }
.cellule { width: auto ;padding-left: 12px; }



































/* STYLE DE LA NAVIGATION
---------- ---------- ---------- ---------- ---------- */
.navigation {
    position: fixed;
    top: 160px;
    left: 30px;
    width: 192px;
    min-height: calc(100vh - 160px);
}
.menu {
    width: 100%;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border: 3px solid var(--jaune);
    border-radius: 12px;
}
.menu__titre {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 186px;
    height: 38px;
    border-radius: 6px 6px 0 0;
    background-color: var(--jaune);
}
.menu__titre-lien {
    color: white;
    font-size: var(--titre-4);
    text-decoration: none;
}
.menu__titre-sousTitre { font-size: var(--titre-6); }


.formulaireRechercher {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.textRechercher {
    width: 85%;
    height: 40px;
    margin: 0 auto;
    border: 1px solid var(--noir-300);
    border-radius: 7px;
}

/* STYLE PAGE ACCUEIL ---------- ---------- ---------- ---------- ---------- */
.accueil {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100vw;
    height: 100vh;
}

/* STYLE DU CORPS ---------- ---------- ---------- ---------- ---------- */
.corps {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: calc(100vw - 222px);
    height: 100vh;
    margin-left: 222px;
}
.corps__tableau {
    justify-content: flex-start;
}
/* MODULE IDENTIFICATION  */






.module__adhesionLigne {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 7px 0 0 0;
}
.module__adhesionInscription {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin: 7px 0 0 0;
}


/* STYLE PAGE ACCUEIL ---------- ---------- ---------- ---------- ---------- */
.corps__titre, .corps__texte, .corps__sousTitre, .corps__ligneDeLien, .corps__lien { display: flex; }
.corps__texte { flex-direction: column; justify-content: flex-start;}




.corps__titre {
    align-items: center;
    width: 800px;
    height: 80px;
    margin: 5rem 0 0 0;
}
.corps__texte {
    align-items: flex-start;
    width: 800px;
    margin-bottom: 10px;
    padding: 12px 0;
    background-color: white;
}
.corps__sousTitre {
    align-items: flex-start;
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border-bottom: 4px dotted var(--noir-900);
}
.corps__ligne {
    width: 90%;
    margin: 7px 0;
}
.corps__ligne__etire {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 7px 0;
}
.corps__ligneDeLien {
    justify-content: flex-end;
    align-items: center;
    width: 95%;
    margin: 7px auto;
}
.lien {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 10px;
    height: 32px;
    margin: 0 10px;
    padding: 0 18px;
    border-top: 1px solid var(--bleu);
    border-bottom: 1px solid var(--bleu);
}
.lien:hover { background-color: var(--noir-900); }
.lienCarre {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 48px;
    margin: 0 5px;
    padding: 0 12px;
    border: 3px solid var(--bleu);
    border-radius: 8px;
    background-color: white;
}
.lien-texte {
    color: black;
    font-family: Alata;
    text-decoration: none;
}
.corps__lien {
    justify-content: center;
    align-items: center;
    width: 800px;
    min-height: 48px;
    margin: 0 auto 12px;
    border-top: 3px solid var(--bleu);
    border-bottom: 3px solid var(--bleu);
}
.corps__lien:hover { background-color: var(--noir-900); }
.corps__lienFixe {
    position: fixed;
    right: 70px;
    bottom: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    min-height: 64px;
    border: 7px solid var(--jaune);
    border-radius: 32px;
    background-color: white;
}
.corps__lien-titre-4 {
    color: black;
    font-family: Alata;
    font-size: var(--titre-4);
    text-align: center;
    text-decoration: none;
}

.lien__principal {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 1050px;
}

/* STYLE DES FORMULAIRES ---------- ---------- ---------- ---------- ---------- */

.label {
    min-width: 170px;
    padding: 0 12px;
    color: var(--noir-900);
    font-family: RobotoLight;
    font-size: var(--titre-6);
    font-style: italic;
    text-align: right;
}
.text { width: 300px; }



.formulaire__text {
    width: 376px;
    height: 32px;
}
.textMini {
    width: 175px;
    height: 32px;
}


.formulaire-paragraphe {
    font-family: Alata;
    font-size: var(--titre-6);
}