/*
CARACTÉRISTIQUES DE LA PAGE
*/

body {
    padding: 0 1em;
    max-width: 1200px;
    background: rgb(32,32,32);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-family: Arial, serif;
    color: black;
}

/*
FORMATAGE DU TEXTE
*/

h1, h2, h3, h4, h5, h6 {
    text-align: center;
}

h1 { font-size: 2em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.25em; }
h5 { font-size: 1em; }
h6 { font-size: 0.5em; }

img, a img { border: none; }

a {
    color: rgb(160,0,0);
    font-weight: normal;
    text-decoration: none;
}

a:hover {
    color: rgb(192,0,0);
    font-weight: bold;
    text-decoration: none;
}

article, aside, div, header, footer {
    text-align: center;
    font-size: 1em;
    color: black;
}

/* En mobile, les éléments de contenu grossissent légèrement */
@media all and (max-width: 1216px) {
    article, aside, div, header, footer { font-size: 1.2em; }
}


/*
COULEUR DES BLOCS
*/

.gris, .gris2   { background-color: rgb(220,220,220); border: 1px solid black; }
.bleu, .bleu2   { background-color: rgb(220,220,255); border: 1px solid black; }
.cyan, .cyan2   { background-color: rgb(220,255,255); border: 1px solid black; }
.vert           { background-color: rgb(220,255,220); border: 1px solid black; }
.jaune          { background-color: rgb(255,255,220); border: 1px solid black; }
.orange, .orange2 { background-color: rgb(255,220,200); border: 1px solid black; }
.rouge, .rouge2 { background-color: rgb(255,220,220); border: 1px solid black; }
.rose, .rose2   { background-color: rgb(255,220,255); border: 1px solid black; }
.night_sky      { background: rgb(0,0,96); border: 1px solid black; }
.noir           { background: rgb(0,0,0); border: 1px solid black; }

/*
COULEURS DE TEXTE
*/

.texte_blanc       { color: rgb(255,255,255); }
.texte_noir        { color: rgb(0,0,0); }
.texte_rouge       { color: rgb(255,0,0); }
.texte_vert        { color: rgb(0,255,0); }
.texte_bleu        { color: rgb(0,0,255); }
.texte_jaune       { color: rgb(255,255,0); }
.texte_magenta     { color: rgb(255,0,255); }
.texte_cyan        { color: rgb(0,255,255); }
.texte_orange      { color: rgb(255,128,0); }
.texte_rose        { color: rgb(255,0,128); }
.texte_vert_pomme  { color: rgb(128,255,0); }
.texte_vert_eau    { color: rgb(0,255,128); }
.texte_violet      { color: rgb(128,0,255); }
.texte_bleu_clair  { color: rgb(0,128,255); }

/*
BLOCS SECTION
*/

.bloc_centre {
    padding: 2px;
    margin: 1% auto;
    width: 46%;
    border: 2px solid black;
    border-radius: 12px;
    background-color: rgb(210,210,255);
    text-align: center;
    color: black;
    font-size: 0.85em;
}

.bloc_droite {
    float: right;
    padding: 2px;
    margin-left: 1%;
    margin-right: 0.5%;
    margin-bottom: 1%;
    width: 35%;
    border: 2px solid black;
    border-radius: 12px;
    background-color: rgb(210,210,255);
    text-align: center;
    color: black;
    font-size: 0.85em;
}

@media all and (max-width: 1216px) {
    .bloc_centre {
        padding: 5px;
        margin: 5px auto;
        width: 532px;
        border: 1px solid white;
        border-radius: 12px;
        background-color: rgb(210,210,255);
        font-size: 1em;
    }
    .bloc_droite {
        float: right;
        padding: 5px;
        margin: 0 10px 10px 10px;
        width: 300px;
        border: 1px solid white;
        border-radius: 12px;
        background-color: rgb(210,210,255);
        font-size: 1em;
    }
}


/*
EN-TÊTE
*/

#entete, #tut_practice_menu {
    font-size: 0.9em;
    font-weight: bold;
    color: white;
    font-family: Arial, serif;
}

#entete a, #tut_practice_menu a {
    font-weight: bold;
    color: rgb(192,192,192);
}

#entete a:hover, #tut_practice_menu a:hover {
    font-weight: bold;
    color: red;
}

@media all and (max-width: 1216px) {
    #entete, #tut_practice_menu { font-size: 1.25em; }
}


/*
BANDEAU
*/

#bandeau_720 { display: none; }

@media all and (max-width: 1216px) {
    #bandeau_1200 { display: none; }
    #bandeau_720  { display: inline; }
}


/*
MENUS
*/


#menu_principal, #menu_principal ul {
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 21px;
    text-align: center;
    z-index: 10;
}

#menu_principal {
    font-weight: bold;
    font-family: Arial;
    font-size: 12px;
}

#menu_principal a {
    font-weight: bold;
    display: block;
    padding: 0;
    background: url("../images/interface/fond_homepage.jpg") fixed repeat;
    color: rgb(255,255,225);
    font-style: normal;
    text-decoration: none;
    width: 199px;
}

#menu_principal a:hover {
    font-weight: bold;
    background: rgb(220,220,180);
    color: rgb(0,20,60);
    font-style: normal;
}

#menu_principal li { float: left; }

#menu_principal li ul {
    position: absolute;
    width: 199px;
    left: -999em;
}

#menu_principal li ul ul { margin: -22px 0 0 199px; }

#menu_principal li:hover ul ul,
#menu_principal li.sfhover ul ul { left: -999em; }

#menu_principal li:hover ul,
#menu_principal li li:hover ul,
#menu_principal li.sfhover ul,
#menu_principal li li.sfhover ul { left: auto; }

#menu_principal li ul li { min-height: 0; }

@media all and (max-width: 1216px) {
    #menu_principal { display: none; }
}


/*
MENU MOBILE (cellules de navigation)
*/

#cell1, #cell2, #cell3, #cell4, #cell5, #cell6,
#blankcell, #vide1, #vide2, #vide3, #vide4, #vide5, #vide6 {
    font-size: 1em;
    padding: 2px;
    color: black;
    width: 114px;
    text-align: center;
}

#cell1_double, #cell2_double, #cell3_double, #vide1_double, #vide2_double {
    font-size: 1.25em;
    padding: 2px;
    color: black;
    width: 234px;
    text-align: center;
}

#cell1_triple, #cell2_triple, #vide1_triple {
    font-size: 1.25em;
    padding: 2px;
    color: black;
    width: 354px;
    text-align: center;
}

#cell1_quadruple, #vide1_quadruple {
    font-size: 1.25em;
    padding: 2px;
    color: black;
    width: 474px;
    text-align: center;
}

#cell1_quintuple {
    font-size: 1.25em;
    padding: 2px;
    color: black;
    width: 592px;
    text-align: center;
}

#cell1_sextuple {
    font-size: 1.25em;
    padding: 2px;
    color: black;
    width: 714px;
    text-align: center;
}

#cell1, #vide1, #intervalle, #demibloc1, #demibloc3,
#cell1_double, #cell1_triple, #cell1_quadruple, #cell1_quintuple, #cell1_sextuple,
#vide1_double, #vide1_triple, #vide1_quadruple {
    clear: both;
    float: left;
}

#clear { clear: both; }

#cell2, #cell3, #cell4, #cell5, #cell6, #blankcell,
#vide2, #vide3, #vide4, #vide5, #vide6,
#demibloc2, #demibloc4, #cell2_double, #cell3_double, #cell2_triple {
    float: left;
}

#vide1, #vide2, #vide3, #vide4, #vide5, #vide6 { visibility: hidden; }


/*
CORPS — Les blocs
*/

.bloc, #simons_demos {
    padding: 6px;
    margin-bottom: 14px;
    text-align: center;
    color: black;
    font-size: 1em;
    font-family: Arial, serif;
}

.bloc {
    clear: both;
    width: 1184px;
}

.menu_jv { border-radius: 12px; }

/*
Les demiblocs
*/

#demibloc1, #demibloc2, #demibloc3, #demibloc4, #demibloc5,
#demibloc6, #demibloc7, #demibloc8, #demibloc9, #demibloc10 {
    width: 570px;
    height: 670px;
    padding: 6px;
    margin-bottom: 14px;
    text-align: center;
    color: black;
    font-size: 1em;
    font-family: Arial, serif;
}

#demibloc1, #demibloc3, #demibloc5, #demibloc7, #demibloc9 { float: left; }
#demibloc2, #demibloc4, #demibloc6, #demibloc8, #demibloc10 { float: right; }

/*
Les tiersblocs
*/

#tierstut1, #tierstut2, #tierstut3, #tierstut4, #tierstut5, #tierstut6,
#tierstutprac1, #tierstutprac2, #tierstutprac3, #tierstutprac4,
#tierstutprac5, #tierstutprac6, #tierstutprac7, #tierstutprac8,
#tierssim1, #tierssim2, #tierssim3,
#tierssimfree1, #tierssimfree2, #tierssimfree3, #tierssimfree4, #tierssimfree5,
#tierssimfree6, #tierssimfree7, #tierssimfree8, #tierssimfree9, #tierssimfree10,
#tierssimfree11, #tierssimfree12, #tierssimfree13, #tierssimfree14, #tierssimfree15,
#tierssimfree16, #tierssimfree17, #tierssimfree18, #tierssimfree19, #tierssimfree20,
#tierssimcabimp1, #tierssimcabimp2, #tierssimcabimp3,
#tierssoft1, #tierssoft2, #tierssoft3,
#tiersplus1, #tiersplus2, #tiersplus3,
#tierscompos1, #tierscompos2, #tierscompos3 {
    width: 368px;
    height: 520px;
    padding: 6px;
    margin-bottom: 10px;
    border: 2px solid rgb(0,20,60);
    text-align: center;
    color: black;
    font-size: 1em;
    font-family: Arial, serif;
}

#tierstut1, #tierstut4,
#tierstutprac1, #tierstutprac4,
#tierssim1,
#tierssimfree1, #tierssimfree4, #tierssimfree7, #tierssimfree10,
#tierssimfree13, #tierssimfree16, #tierssimfree19,
#tierssimcabimp1, #tierssoft1, #tiersplus1, #tierscompos1 {
    float: left;
}

#tierstut2, #tierstut5,
#tierstutprac2, #tierstutprac5, #tierstutprac7, #tierstutprac8,
#tierssim2,
#tierssimfree2, #tierssimfree5, #tierssimfree8, #tierssimfree11,
#tierssimfree14, #tierssimfree17, #tierssimfree20,
#tierssimcabimp2, #tierssoft2, #tiersplus2, #tierscompos2 {
    margin-right: auto;
    margin-left: auto;
}

#tierstut3, #tierstut6,
#tierstutprac3, #tierstutprac6,
#tierssim3,
#tierssimfree3, #tierssimfree6, #tierssimfree9, #tierssimfree12,
#tierssimfree15, #tierssimfree18,
#tierssimcabimp3, #tierssoft3, #tiersplus3, #tierscompos3 {
    float: right;
}

/*
Liens dans les blocs
*/

.bloc a,
#demibloc1 a, #demibloc2 a, #demibloc3 a, #demibloc4 a, #demibloc5 a, #demibloc6 a,
#tierstut1 a, #tierstut2 a, #tierstut3 a, #tierstut4 a, #tierstut5 a, #tierstut6 a,
#tierstutprac1 a, #tierstutprac2 a, #tierstutprac3 a, #tierstutprac4 a,
#tierstutprac5 a, #tierstutprac6 a, #tierstutprac7 a, #tierstutprac8 a,
#tierssim1 a, #tierssim2 a, #tierssim3 a,
#tierssimfree1 a, #tierssimfree2 a, #tierssimfree3 a, #tierssimfree4 a, #tierssimfree5 a,
#tierssimfree6 a, #tierssimfree7 a, #tierssimfree8 a, #tierssimfree9 a, #tierssimfree10 a,
#tierssimfree11 a, #tierssimfree12 a, #tierssimfree13 a, #tierssimfree14 a, #tierssimfree15 a,
#tierssimfree16 a, #tierssimfree17 a, #tierssimfree18 a, #tierssimfree19 a, #tierssimfree20 a,
#tierssimcabimp1 a, #tierssimcabimp2 a, #tierssimcabimp3 a,
#tierssoft1 a, #tierssoft2 a, #tierssoft3 a,
#tiersplus1 a, #tiersplus2 a, #tiersplus3 a,
#tierscompos1 a, #tierscompos2 a, #tierscompos3 a,
#simons_demos a {

    color: rgb(255,0,0);
    text-decoration: none;
}

.bloc a:hover,
#demibloc1 a:hover, #demibloc2 a:hover, #demibloc3 a:hover,
#demibloc4 a:hover, #demibloc5 a:hover, #demibloc6 a:hover,
#tierstut1 a:hover, #tierstut2 a:hover, #tierstut3 a:hover,
#tierstut4 a:hover, #tierstut5 a:hover, #tierstut6 a:hover,
#tierstutprac1 a:hover, #tierstutprac2 a:hover, #tierstutprac3 a:hover,
#tierstutprac4 a:hover, #tierstutprac5 a:hover, #tierstutprac6 a:hover,
#tierstutprac7 a:hover, #tierstutprac8 a:hover,
#tierssim1 a:hover, #tierssim2 a:hover, #tierssim3 a:hover,
#tierssimfree1 a:hover, #tierssimfree2 a:hover, #tierssimfree3 a:hover,
#tierssimfree4 a:hover, #tierssimfree5 a:hover, #tierssimfree6 a:hover,
#tierssimfree7 a:hover, #tierssimfree8 a:hover, #tierssimfree9 a:hover,
#tierssimfree10 a:hover, #tierssimfree11 a:hover, #tierssimfree12 a:hover,
#tierssimfree13 a:hover, #tierssimfree14 a:hover, #tierssimfree15 a:hover,
#tierssimfree16 a:hover, #tierssimfree17 a:hover, #tierssimfree18 a:hover,
#tierssimfree19 a:hover, #tierssimfree20 a:hover,
#tierssimcabimp1 a:hover, #tierssimcabimp2 a:hover, #tierssimcabimp3 a:hover,
#tierssoft1 a:hover, #tierssoft2 a:hover, #tierssoft3 a:hover,
#tiersplus1 a:hover, #tiersplus2 a:hover, #tiersplus3 a:hover,
#tierscompos1 a:hover, #tierscompos2 a:hover, #tierscompos3 a:hover,
#simons_demos a:hover {

    color: rgb(128,0,0);
    text-decoration: none;
    font-size: 1em;
}

/*
Blocs en version mobile
*/

@media all and (max-width: 1216px) {

    .bloc,
    #demibloc1, #demibloc2, #demibloc3, #demibloc4, #demibloc5, #demibloc6,
    #tierstut1, #tierstut2, #tierstut3, #tierstut4, #tierstut5, #tierstut6,
    #tierstutprac1, #tierstutprac2, #tierstutprac3, #tierstutprac4,
    #tierstutprac5, #tierstutprac6, #tierstutprac7, #tierstutprac8,
    #tierssim1, #tierssim2, #tierssim3,
    #tierssimfree1, #tierssimfree2, #tierssimfree3, #tierssimfree4, #tierssimfree5,
    #tierssimfree6, #tierssimfree7, #tierssimfree8, #tierssimfree9, #tierssimfree10,
    #tierssimfree11, #tierssimfree12, #tierssimfree13, #tierssimfree14, #tierssimfree15,
    #tierssimfree16, #tierssimfree17, #tierssimfree18, #tierssimfree19, #tierssimfree20,
    #tierssimcabimp1, #tierssimcabimp2, #tierssimcabimp3,
    #tierssoft1, #tierssoft2, #tierssoft3,
    #tiersplus1, #tiersplus2, #tiersplus3,
    #tierscompos1, #tierscompos2, #tierscompos3 {
        clear: both;
        padding: 6px;
        margin-bottom: 14px;
        width: 704px;
        height: auto;
        text-align: center;
        color: black;
        font-size: 1.25em;
        font-family: Arial, serif;
    }

    .bloc a,
    #demibloc1 a, #demibloc2 a, #demibloc3 a, #demibloc4 a, #demibloc5 a, #demibloc6 a,
    #tierstut1 a, #tierstut2 a, #tierstut3 a, #tierstut4 a, #tierstut5 a, #tierstut6 a,
    #tierstutprac1 a, #tierstutprac2 a, #tierstutprac3 a, #tierstutprac4 a,
    #tierstutprac5 a, #tierstutprac6 a, #tierstutprac7 a, #tierstutprac8 a,
    #tierssim1 a, #tierssim2 a, #tierssim3 a,
    #tierssimfree1 a, #tierssimfree2 a, #tierssimfree3 a, #tierssimfree4 a, #tierssimfree5 a,
    #tierssimfree6 a, #tierssimfree7 a, #tierssimfree8 a, #tierssimfree9 a, #tierssimfree10 a,
    #tierssimfree11 a, #tierssimfree12 a, #tierssimfree13 a, #tierssimfree14 a, #tierssimfree15 a,
    #tierssimfree16 a, #tierssimfree17 a, #tierssimfree18 a, #tierssimfree19 a, #tierssimfree20 a,
    #tierssimcabimp1 a, #tierssimcabimp2 a, #tierssimcabimp3 a,
    #tierssoft1 a, #tierssoft2 a, #tierssoft3 a,
    #tiersplus1 a, #tiersplus2 a, #tiersplus3 a,
    #tierscompos1 a, #tierscompos2 a, #tierscompos3 a,
    #simons_demos a {
        color: rgb(255,0,0);
        text-decoration: none;
        font-size: 1.25em;
    }

    .bloc a:hover,
    #demibloc1 a:hover, #demibloc2 a:hover, #demibloc3 a:hover,
    #demibloc4 a:hover, #demibloc5 a:hover, #demibloc6 a:hover,
    #tierstut1 a:hover, #tierstut2 a:hover, #tierstut3 a:hover,
    #tierstut4 a:hover, #tierstut5 a:hover, #tierstut6 a:hover,
    #tierstutprac1 a:hover, #tierstutprac2 a:hover, #tierstutprac3 a:hover,
    #tierstutprac4 a:hover, #tierstutprac5 a:hover, #tierstutprac6 a:hover,
    #tierstutprac7 a:hover, #tierstutprac8 a:hover,
    #tierssim1 a:hover, #tierssim2 a:hover, #tierssim3 a:hover,
    #tierssimfree1 a:hover, #tierssimfree2 a:hover, #tierssimfree3 a:hover,
    #tierssimfree4 a:hover, #tierssimfree5 a:hover, #tierssimfree6 a:hover,
    #tierssimfree7 a:hover, #tierssimfree8 a:hover, #tierssimfree9 a:hover,
    #tierssimfree10 a:hover, #tierssimfree11 a:hover, #tierssimfree12 a:hover,
    #tierssimfree13 a:hover, #tierssimfree14 a:hover, #tierssimfree15 a:hover,
    #tierssimfree16 a:hover, #tierssimfree17 a:hover, #tierssimfree18 a:hover,
    #tierssimfree19 a:hover, #tierssimfree20 a:hover,
    #tierssimcabimp1 a:hover, #tierssimcabimp2 a:hover, #tierssimcabimp3 a:hover,
    #tierssoft1 a:hover, #tierssoft2 a:hover, #tierssoft3 a:hover,
    #tiersplus1 a:hover, #tiersplus2 a:hover, #tiersplus3 a:hover,
    #tierscompos1 a:hover, #tierscompos2 a:hover, #tierscompos3 a:hover,
    #simons_demos a:hover {
        color: rgb(64,0,0);
        text-decoration: none;
        font-size: 1.25em;
    }

}


/*
AFFICHAGE DESKTOP / MOBILE
(images grande/petite taille selon l'écran)
*/

#ronald_revolutionz_mobile, #ronald_rechrome_mobile, #ronald_regold_mobile,
#sonar_mobile, #reaper_mobile, #cubase_mobile, #studio_one_mobile,
#magix_acid_mobile, #flstudio_mobile, #motudp_mobile, #reason_mobile,
#samplitude_mobile, #tracktion_mobile, #energyxt_mobile, #podium_mobile,
#sharp_mobile, #tubedriver_mobile, #hybrit_mobile, #le456_mobile, #shb1_mobile,
#emissary_mobile, #anvil_mobile, #nrr1_mobile, #x30_mobile, #x50_mobile,
#x50beta_mobile, #x50v2_mobile, #jcm900_mobile, #lecab2_mobile, #harmony_mobile,
#dimension_pro_mobile, #track_mobile, #cradle_mobile, #poverty_mobile, #next_mobile,
#bruant_mobile, #duuaal_mobile, #oldogg_mobile, #purplereign_mobile, #raaw_mobile,
#reecto_mobile, #tumult_mobile, #urrth_mobile, #sirconvolution_mobile,
#sirconvolution2_mobile, #mixir2_mobile, #nadir_mobile, #chaineaudiosim_mobile,
#bfd3_mobile, #master_5orcery_mobile, #jcm800hot_mobile, #jcm800_mobile,
#harlequin_mobile, #tomato_mobile, #amplitube1_mobile, #affichage_mobile {
    display: none;
}

@media all and (max-width: 1216px) {

    #ronald_revolutionz_desktop, #ronald_rechrome_desktop, #ronald_regold_desktop,
    #sonar_desktop, #reaper_desktop, #cubase_desktop, #studio_one_desktop,
    #magix_acid_desktop, #flstudio_desktop, #motudp_desktop, #reason_desktop,
    #samplitude_desktop, #tracktion_desktop, #energyxt_desktop, #podium_desktop,
    #sharp_desktop, #tubedriver_desktop, #hybrit_desktop, #le456_desktop, #shb1_desktop,
    #emissary_desktop, #anvil_desktop, #nrr1_desktop, #x30_desktop, #x50_desktop,
    #x50beta_desktop, #x50v2_desktop, #jcm900_desktop, #lecab2_desktop, #harmony_desktop,
    #dimension_pro_desktop, #track_desktop, #cradle_desktop, #poverty_desktop, #next_desktop,
    #bruant_desktop, #duuaal_desktop, #oldogg_desktop, #purplereign_desktop, #raaw_desktop,
    #reecto_desktop, #tumult_desktop, #urrth_desktop, #sirconvolution_desktop,
    #sirconvolution2_desktop, #mixir2_desktop, #nadir_desktop, #chaineaudiosim_desktop,
    #bfd3_desktop, #master_5orcery_desktop, #jcm800hot_desktop, #jcm800_desktop,
    #harlequin_desktop, #tomato_desktop, #amplitube1_desktop, #affichage_desktop {
        display: none;
    }

    #ronald_revolutionz_mobile, #ronald_rechrome_mobile, #ronald_regold_mobile,
    #sonar_mobile, #reaper_mobile, #cubase_mobile, #studio_one_mobile,
    #magix_acid_mobile, #flstudio_mobile, #motudp_mobile, #reason_mobile,
    #samplitude_mobile, #tracktion_mobile, #energyxt_mobile, #podium_mobile,
    #sharp_mobile, #tubedriver_mobile, #hybrit_mobile, #le456_mobile, #shb1_mobile,
    #emissary_mobile, #anvil_mobile, #nrr1_mobile, #x30_mobile, #x50_mobile,
    #x50beta_mobile, #x50v2_mobile, #jcm900_mobile, #lecab2_mobile, #harmony_mobile,
    #dimension_pro_mobile, #track_mobile, #cradle_mobile, #poverty_mobile, #next_mobile,
    #bruant_mobile, #duuaal_mobile, #oldogg_mobile, #purplereign_mobile, #raaw_mobile,
    #reecto_mobile, #tumult_mobile, #urrth_mobile, #sirconvolution_mobile,
    #sirconvolution2_mobile, #mixir2_mobile, #nadir_mobile, #chaineaudiosim_mobile,
    #bfd3_mobile, #master_5orcery_mobile, #jcm800hot_mobile, #jcm800_mobile,
    #harlequin_mobile, #tomato_mobile, #amplitube1_mobile, #affichage_mobile {
        display: inline;
    }

}


/*
FLÈCHES DE REMONTÉE (visibles uniquement en mobile)
*/

#fleche_1_mobile, #fleche_2_mobile, #fleche_3_mobile, #fleche_4_mobile,
#fleche_5_mobile, #fleche_6_mobile, #fleche_7_mobile, #fleche_8_mobile,
#fleche_9_mobile { display: none; }

@media all and (max-width: 1216px) {
    #fleche_1_mobile, #fleche_2_mobile, #fleche_3_mobile, #fleche_4_mobile,
    #fleche_5_mobile, #fleche_6_mobile, #fleche_7_mobile, #fleche_8_mobile,
    #fleche_9_mobile { display: inline; }
}

.paypal { display: inline; }


/*
TABLEAUX
*/

.table_routage {
    width: 90%;
    margin: auto;
    font-style: normal;
    font-family: Arial, serif;
}

.td_routage {
    width: 20%;
    padding: 0.5%;
    text-align: center;
    vertical-align: center;
    border: 2px solid black;
    border-radius: 12px;
}

.table_recherche {
    width: 96%;
    margin: auto;
    border-collapse: collapse;
}

.th_recherche_col1, .th_recherche_description, .th_recherche_col2 {
    background-color: rgba(144,144,144,0.4);
    text-align: center;
    border: thin solid white;
}

.td_recherche_col1, .td_recherche_description, .td_recherche_col2 {
    background-color: rgba(0,0,96,0.2);
    text-align: center;
    border: thin solid white;
}

.th_recherche_col1, .td_recherche_col1 { width: 20%; }
.th_recherche_col2, .td_recherche_col2 { width: 23%; }
.th_recherche_description, .td_recherche_description { width: 57%; }

.td_recherche_col1 a, .td_recherche_description a, .td_recherche_col2 a {
    color: black;
}

.td_recherche_col1 a:hover, .td_recherche_description a:hover, .td_recherche_col2 a:hover {
    color: white;
}


#messages_homestudio {
    padding: 6px;
    border: 1px solid white;
    color: black;
}


/*
PIED DE PAGE
*/

#pied_de_page {
    clear: both;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background-color: black;
    border: 1px solid white;
    text-align: center;
    font-size: 1em;
    font-family: Arial, serif;
    margin: 5px auto;
    padding: 10px;
    color: white;
}

@media all and (max-width: 1216px) {
    #pied_de_page {
        font-size: 1.25em;
        padding: 5px;
    }
}


/*
IMAGES AVEC ZOOM (lightbox)
*/

.image-container {
    padding: 0 5px;
    box-sizing: border-box;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
}

.responsive-image {
    width: 100%;
    max-width: 1200px;
    height: auto;
    display: block;
    margin: 0 auto;
    cursor: pointer;
    border: 1px solid #ccc;
    background-color: white;
}

#lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    box-shadow: 0 0 20px white;
    cursor: pointer;
}