#CACHE{7*24*3600}
#INCLURE{fond=inc_header,env,identifiant=projet}
<!--    <ul id="nav-second" class="clearfix">
<li><a href="#" id="synopsis" class="actuel">All</a></li>
<li><a href="#" id="fiche">Film</a></li>
<li><a href="#" id="presse">Stage</a></li>
<li><a href="#" id="photo">Photo</a></li>
</ul> -->
</header>
<style>
    .mosaique {
        display: -webkit-flex; /* OK chrome 21 */
        -webkit-flex-direction: row;
        display: flex; 
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        color:#fff;
    }

    .mosaique .texte-mini {
        opacity:0;  
        font-size:11px;
    }
    
    .mosaique .texte-mini strong {
        font-family: 'Colaborate-BoldRegular',sans-serif;
        font-weight:normal;
    }
    
    .mosaique li:hover .texte-mini {
        opacity:1;    
    }


    .mosaique a {
        color:#fff;   
    }

    .mosaique li {
        width:33.33333%;
        min-height
    }

    .mosaique .retrait {
        padding:20px;   
    }

    .elem3 {

    }



    .box1{
        order:2;
        -webkit-order: 2;
    }

    .box2{
        order:4;
        -webkit-order: 4;
    }

    .box3{
        order:4;
        -webkit-order: 4;
    }
    
    .box4{
        order:8;
        -webkit-order: 5;
    }
    
    .box5{
        order:9;
        -webkit-order: 6;
    }
    
    .box6{
        order:9;
        -webkit-order: 6;
    }
    
    .box7{
        order:9;
        -webkit-order: 7;
    }
    
    

    .couleur0 {
        background-color:#aca8a0; 
        -webkit-order: 6;
        order: 6;
    }

    .couleur1 {
        background-color:#b3c89a;
        -webkit-order: 5;
        order: 5;
    }

    .couleur2 {
        background-color:#ddc880;
        -webkit-order: 4;
        order: 4;
    }

    .couleur3 {
        background-color:#65a790;
        -webkit-order: 3;
        order: 3;
    }

    .couleur4 {
        background-color:#d8b1b6; 
        -webkit-order: 1;
        order: 1;
    }

    .couleur5 {
        background-color:#5faabd; 
        -webkit-order: 2;
        order: 2;
    }
    
    .couleur6 {
        background-color:#5f7cbd; 
        order:7;
        -webkit-order: 7;
    }


</style>


<section id="main" class="clearfix">
    <div class="full">
        <ul class="mosaique nb<BOUCLE_co(RUBRIQUES){id_parent=1}{par num titre}{!par date}></BOUCLE_co>#TOTAL_BOUCLE<//B_co>">
            <?php $nb=9; ?>   

            <BOUCLE_rubs(RUBRIQUES){id_parent=1}{par num titre}{!par date}>
                <li class="flexbox box#COMPTEUR_BOUCLE" style="background-color:[(#CODE_COULEUR|sinon{#ffcc00})]">
                    <div class="retrait blocinfo">
                        <h2><a href="#URL_RUBRIQUE">#TITRE</a></h2>
                        <div class="texte-mini">
                            [(#TEXTE|morceau{0})]
                        </div>
                    </div>
                </li>
                <?php $nb--; ?>
                </BOUCLE_rubs>
            <?php
for($i=0;$i<$nb;$i++){
echo "<li class=\"flexbox couleur$i\"><div class=\"retrait blocinfo\"> </div></li>";
}

?>

        </ul>
    </div>
</section>
<footer class="colonne full retrait">
    presentperfect produces and distributes work by Jorge León - film, performing arts and other media meet social concern
</footer> 
#INCLURE{fond=inc_footer,env,identifiant=sommaire}